/* style.css */
@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Thin.woff2') format('woff2');
    font-weight: 100;
    font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-ExtraLight.woff2') format('woff2');
    font-weight: 200;
    font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Light.woff2') format('woff2');
    font-weight: 300;
    font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Regular.woff2') format('woff2');
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Medium.woff2') format('woff2');
    font-weight: 500;
    font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-SemiBold.woff2') format('woff2');
    font-weight: 600;
    font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Bold.woff2') format('woff2');
    font-weight: 700;
    font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-ExtraBold.woff2') format('woff2');
    font-weight: 800;
    font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Black.woff2') format('woff2');
    font-weight: 900;
    font-display: swap;
}

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

ol, ul {
    list-style: none
}

blockquote,
q {
    quotes: '"' '"'
}

blockquote:after,
blockquote:before,
q:after,
q:before {
    content: '';
    content: none
}

table {
    border-collapse: collapse;
    border-spacing: 0
}

address {
    font-style: normal
}

textarea {
    width: 100%;
    resize: none;
}

button, img, input, select {
    vertical-align: middle
}

.ellipsis {
	display:inline-block;
	max-width:100%;
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
	word-wrap: normal;
	vertical-align:middle
}

table td a {
    overflow: hidden;
    height: auto;
    white-space: normal;
    word-wrap: break-word;
    word-break: break-all;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}

body, html {
	overflow-x:hidden;
}

body {
	color:#353535;
	-webkit-font-smoothing: antialiased;
}

img {
	max-width: 100%;
	-webkit-user-drag: none;
}

::selection {
   background: #b4cae7;
   color: #fff
}

::-moz-selection {
   background: #b4cae7;
   color: #fff
}

::-webkit-selection {
    background: #b4cae7;
   color: #fff
}

a {
	text-decoration: none;
}

area {
    cursor: pointer;
}

.rel {
    position: relative;
}

.container {
    max-width: 1920px;
    margin: auto;
}

.section .inner {
    max-width: 750px;
    margin: auto;
    text-align: center;
}

.section.main {
	background-image: url('/PROJECT_HTML/');
}

.section dl {
	display: flex;
	justify-content: center;
	margin: auto;
	color: #09003e;
	margin-bottom: 4px;
}

.section dl:last-of-type {
	margin-bottom: 0;
}

.section dt {
	padding-right: 3px;
}

.section.sns {
	padding: 100px 0 75px;
	background-color: #1d170d;
}

.section.main {
	height: 898px;
	padding-top: 68px;
	background-image: url('/PROJECT_HTML/2026ulsan_naming_evt/img/main_bg.jpg?new');
	background-position: center;
	background-size: cover;
}

.section.main .head_logo {
	margin-bottom: 44px;
}

.section.main .mini_title {
	width: 352px;
	height: 136px;
	margin: auto;
	margin-bottom: 20px;
}

.section.main .mini_title .left {
	position: absolute;
	left: 0;
	top: 0;
}

.section.main .mini_title .right {
	position: absolute;
	right: 0;
	bottom: 0;
}

.section.main .main_title {
	margin-bottom: 24px;
}

.section.main .ex_pharases {
	margin-bottom: 56px;
}

.section.main .cha {
	position: relative;
	max-width: 680px;
	margin: auto;
	text-align: left;
	z-index: 2;
}

.section.main .card {
	position: absolute;
	top: -30px;
	right: 50px;
	width: 388px;
	height: 452px;
}

.section.main .card li {
	position: absolute;
}

.section.main .photo {
	position: absolute;
	left: 50%;
}

.section.main .photo.photo_01 {
	top: 90px;
	margin-left: -630px;
}

.section.main .photo.photo_02 {
	top: 232px;
	margin-left: -902px;
}

.section.main .photo.photo_03 {
	
	top: 474px;
	margin-left: -710px;
}

.section.main .photo.photo_04 {
	left: auto;
	right: 50%;
	top: 150px;
	margin-right: -604px;
}

.section.main .photo.photo_05 {
	left: auto;
	right: 50%;
	top: 504px;
	margin-right: -700px;
}

.section_02 {
	position: relative;
	background-color: #282828;
	padding-top: 236px;
	overflow: hidden;
}

.section_02 .inner {
	position: relative;
	z-index: 2;
}

.section_02 .bg {
	position: absolute;
	left: 0;
	top: 324px;
	width: 100%;
	height: 288px;
	background-image: url('/PROJECT_HTML/2026ulsan_naming_evt/img/section02_bg_text.png?new');
}

.section_02 .photo {
	position: absolute;
	top: 350px;
	left: 50%;
}

.section_02 .photo.photo_01 {
	margin-left: -890px;
}

.section_02 .photo.photo_02 {
	margin-left: -604px;
}

.section_02 .photo.photo_03 {
	left: auto;
	right: 50%;
	margin-right: -604px;
}

.section_02 .photo.photo_04 {
	left: auto;
	right: 50%;
	margin-right: -890px;
}

.section_02 .title {
	margin-bottom: 36px;
	 
}	

.section_02 .text {
	 font-size: 18px;
	 font-family: 'Pretendard';
	 font-weight: 100;
	 color: #ebebeb;
	 line-height: 180%;
}

.line {
	border-top: 1px dashed #fff;
	position: relative;
	width: 98%;
	margin: auto;
}

.section_02 .line {
	
	margin-top: 302px;
	z-index: 2;
}

.section_03 {
	position: relative;
	background-color: #282828;
	background-image: url('/PROJECT_HTML/2026ulsan_naming_evt/img/section03_bg_item.png?new');
	background-position: center 100%;
	background-repeat: no-repeat;
}

.section_03 .title {
	position: relative;
	margin-top: -246px;
	z-index: 3;
}

.section_03 .inner > p {
	font-size: 18px;
	 font-family: 'Pretendard';
	 font-weight: 100;
	 color: #ebebeb;
	 line-height: 180%;
	 margin: 40px auto;
}

.section_04 {
	padding: 112px 0 150px;
	background-color: #282828;
}

.b_popup {
	width: 686px;
	height: 1772px;
	padding-top: 90px;
	background-image: url('/PROJECT_HTML/2026ulsan_naming_evt/img/apply_bg.png?new');
	background-position: center;
	background-size: cover;
}

.b_popup * {
	font-family: 'Pretendard';
}

.b_popup .inner {
	max-width: 600px;
	margin: auto;
}

.b_popup .title {
	margin-bottom: 32px;
}

.b_popup .photo {
	margin-bottom: 36px;
}

.b_popup  .form_group {
    display: flex;
    align-items: center;
    border: 2px solid #000;
    margin-bottom: 12px;
}

.b_popup  .form_group label {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 163px;
    height: 60px;
    font-size: 20px;
    background-color: #1f1f1f;
    color: #fff;
}

.b_popup  .form_group label.label_3,
.b_popup  .form_group label.label_5 {
	height: 150px;
}

.b_popup  .form_group label.label_2 {
	background-color: #027be4;
}

.b_popup  .form_group label.label_4 {
	background-color: #f977a5;
}

.b_popup .form_group input {
    width: 434px;
    height: 60px;
    padding: 0 12px;
    font-size: 20px;
    border-radius: 0px;
    border: none;
    outline: none;
}

.b_popup .form_group textarea {
	width: 434px;
	height: 150px;
	padding: 12px;
    font-size: 20px;
    border-radius: 0px;
    border: none;
    outline: none;
}

.b_popup .form_group input::placeholder {
	font-size: 20px;
}

.b_popup .pharases {
    padding: 0 12px 12px;
}

.b_popup  dl {
    display: flex;
    align-items: center;
    margin-bottom: 4px;
}

.b_popup  dl dt {
    padding-right: 3px;
}

.b_popup .term_zone .term {
    height: 180px;
    background-color: #fff;
    overflow-y: scroll;
    padding: 24px;
    font-size: 18px;
    margin-bottom: 12px;
	border: 2px solid #000;
}

.b_popup .term_zone .term .inner {
	text-align: left;
}

.b_popup .term_zone .term .h5 {
	font-weight: 900;
	margin-bottom: 8px;
}

.b_popup .term_zone .term .h6 {
	margin-bottom: 4px;
}

.b_popup .term_zone .agree {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 18px;
    gap: 8px;
}

.b_popup .term_zone .agree input + label {
    cursor: pointer;
}

.b_popup .term_zone .agree input {
    appearance: none;
    position: relative;
    display: inline-block;
    width: 20px;
    height: 20px;
    background-color: #fff;
    border: 2px solid #000;
    border-radius: 50%;
}

.b_popup .term_zone .agree input::after {
    content:'';
    display: none;
    width: 12px;
    height: 12px;
    background-color: #000;
    border-radius: 50%;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.b_popup .term_zone .agree input:checked::after {
    display: inline-block;
}

.b_popup .btn_box {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    margin-top: 40px;
}

.b_popup .btn_box .btn {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 230px;
    height: 70px;
    background-color: #1f1f1f;
    color: #fff;
    border: 2px solid #000;
    font-size: 25px;
	cursor: pointer;
}

.b_popup .btn_box a.link_btn {
    background-color: #e7141a;
}

.quick_btn.pc {
    position: fixed;
    margin: 80px 0 0 946px;
	z-index: 50;
}

.quick_btn.mo {
    display: none;
    max-width: 750px;
    width: 100%;
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
	z-index: 50;
}

.section_05 {
	padding: 80px 0;
}

.footer {
    padding: 70px 20px;
    background-color: #1e170d;
    color: #fff;
    text-align: center;
}

.footer .info {
    margin-top: 30px;
    line-height: 180%;
}

@media(max-width: 1600px) {
    .quick_btn.pc {
        margin-left: 750px;
    }
}

@media(max-width: 991px) {
    .quick_btn.pc {
        display: none;
    }
    
    .quick_btn.mo {
        display: block;
    }
    
    .quick_btn.mo img {
        width: 100%;
        max-width: 100%;
    }
    
    .section.sns {
        padding-bottom: 160px;
    }
}

@media(max-width: 750px) {
	.section.main  {
		height: 119.73vw;
		padding-top: 9.07vw;
	}
	
	.section.main .head_logo {
		margin-bottom: 5.87vw;
	}
		
	.section.main .head_logo img {
		width: 21.87vw;
	}
	
	.section.main .mini_title {
		width: 46.93vw;
		height: 18.13vw;
		margin-bottom: 2.67vw;
	}
	
	.section.main .mini_title .left img {
		width: 37.33vw;
	}
	
	.section.main .mini_title .right img {
		width: 32vw;
	}
	
	.section.main .main_title {
		margin-bottom: 3.2vw;
	}
	
	.section.main .main_title img {
		width: 77.33vw;
	}
	
	.section.main .ex_pharases {
		margin-bottom: 7.47vw;
	}
	
	.section.main .ex_pharases img {
		width: 79.47vw;
	}
	
	.section.main .cha {
		max-width: 90.67vw;
	}
	
	.section.main .cha > img {
		width: 52vw;
	}
	
	.section.main .card {
		top: -4vw;
		right: 6.67vw;
		width: 51.73vw;
		height: 60.27vw;
	}
	
	.section.main .card li img {
		width: 51.73vw;
	}
	
	.section_02 {
		padding-top: 31.47vw;
	}
	
	.section_02 .bg {
		top: 43.2vw;
		height: 38.4vw;
	}
	
	.section_02 .title {
		margin-bottom: 4.8vw;
	}
	
	.section_02 .title img {
		width: 32.53vw;
	}
	
	.section_02 .text {
		font-size: 2.8vw;
	}
	
	.section_02 .line {
		margin-top: 40.27vw;
	}
	
	.section_03 .title {
		margin-top: -32.8vw;
	}
	
	.section_03 .title img {
		width: 69.87vw;
	}
	
	.section_03 .inner > p {
		font-size: 2.8vw;
		margin: 5.33vw auto;
	}
	
	.section_03 .gift > img {
		width: 84.53vw;
	}
	
	.section_04 {
		padding: 14.93vw 0 20vw;
	}
	
	.b_popup {
		width: 91.47vw;
		height: 236.27vw;
		padding-top: 12vw;
		margin: auto;
	}
	
	.b_popup .title {
		margin-bottom: 4.27vw;
	}
	
	.b_popup .title img {
		width: 80vw;
	}
	
	.b_popup .photo {
		margin-bottom: 4.8vw;
	}
	
	.b_popup .photo img {
		width: 78.13vw;
	}
	
	.b_popup .inner {
		width: 80vw;
	}
	
	.b_popup .term .inner {
		width: 100%;
	}
	
	.b_popup .form_group {
		margin-bottom: 1.6vw;	
	}
	
	.b_popup .form_group label {
		width: 21.87vw;
		height: 8vw;
		font-size: 2.67vw;
	}
	
	.b_popup .form_group input {
		width: 57.87vw;
		height: 8vw;
		padding: 0 1.6vw;
		font-size: 16px;
	}
	
	.b_popup .form_group input::placeholder,
	.b_popup .form_group textarea::placeholder {
		font-size: 2.67vw;
	}
	
	.b_popup .form_group label.label_3, .b_popup .form_group label.label_5 {
		height: 20vw;
	}
	
	.b_popup .form_group textarea {
		width: 57.87vw;
		height: 20vw;
		padding: 1.6vw;
		font-size: 16px;
	}
	
	.b_popup .term_zone .term {
		height: 24vw;
		padding: 3.2vw;
		font-size: 2.67vw;
		margin-bottom: 1.6vw;
	}
	
	.b_popup .term_zone .agree {
		font-size: 2.67vw;
		gap: 1.07vw;
	}
	
	.b_popup .term_zone .agree input {
		width: 2.87vw;
		height: 2.87vw;
	}
	
	.b_popup .term_zone .agree input::after {
		width: 1.6vw;
		height: 1.6vw;
	}
	
	.b_popup .btn_box {
		gap: 2.67vw;
		margin-top: 5.33vw;
	}
	
	.b_popup .btn_box .btn {
		font-size: 3.2vw;
		width: 30.67vw;
		height: 9.33vw;
	}
	
	.section_05 {
		padding: 10.67vw 2.4vw;
	}
	
	.section dl {
		font-size: 2.67vw;
		word-break: keep-all;
		justify-content: flex-start;
	}
	
	.section dd {
		text-align: left;
	}
	
	.section.sns {
		padding: 10.67vw 2.4vw 20vw;
	}
	
	.footer {
		padding: 9.33vw 2.67vw;
	}
	
	.footer .logo img {
		width: 21.87vw;
	}
	
	.footer .info {
		margin-top: 4vw;
		font-size: 2.67vw;
	}
}

/* =========================
   ADD: Animations + Mobile
   ========================= */

/* ---- keyframes ---- */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeDown {
  from { opacity: 0; transform: translateY(-18px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fromLeft {
  from { opacity: 0; transform: translateX(-22px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes fromRight {
  from { opacity: 0; transform: translateX(22px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes stamp {
  0%   { opacity: 0; transform: scale(1.25) rotate(-2deg); }
  60%  { opacity: 1; transform: scale(0.95) rotate(1deg); }
  100% { opacity: 1; transform: scale(1) rotate(0); }
}
@keyframes photoSway {
  0%   { transform: translateY(0) rotate(-1.2deg); }
  50%  { transform: translateY(6px) rotate(1.2deg); }
  100% { transform: translateY(0) rotate(-1.2deg); }
}
@keyframes flipIn {
  0%   { opacity: 0; transform: perspective(800px) rotateY(90deg) translateY(10px); }
  70%  { opacity: 1; transform: perspective(800px) rotateY(-10deg) translateY(0); }
  100% { opacity: 1; transform: perspective(800px) rotateY(0deg) translateY(0); }
}
@keyframes floatY {
  0%   { transform: translateY(0); }
  50%  { transform: translateY(-10px); }
  100% { transform: translateY(0); }
}
@keyframes bgRoll {
  from { background-position: 0 0; }
  to   { background-position: 2400px 0; }
}

/* ---- will-change (부드럽게) ---- */
.section.main .inner *,
.section.main .photo,
.section_02 .photo,
.section_02 .bg,
.scroll-reveal {
  will-change: transform, opacity, background-position;
}

/* =========================
   1) MAIN: 초기 로딩 순차 애니
   ========================= */
/* JS가 reveal 클래스를 붙여줌 */
.section.main .reveal {
  opacity: 0;
}

.section.main.is-loaded .reveal.fadeUp {
  animation: fadeUp 700ms ease both;
  animation-delay: var(--d, 0ms);
}
.section.main.is-loaded .reveal.fromLeft {
  animation: fromLeft 700ms ease both;
  animation-delay: var(--d, 0ms);
}
.section.main.is-loaded .reveal.fromRight {
  animation: fromRight 700ms ease both;
  animation-delay: var(--d, 0ms);
}
.section.main.is-loaded .reveal.stamp {
  animation: stamp 720ms ease both;
  animation-delay: var(--d, 0ms);
}

/* MAIN: 데코 photo = 순차 fadeDown + 무한 살짝 까딱 */
.section.main .photo {
  opacity: 0;
  transform: translateY(-18px);
}
.section.main.is-loaded .photo.photo-anim {
  animation:
    fadeDown 750ms ease both var(--d, 0ms),
    photoSway 3.6s ease-in-out infinite calc(var(--d, 0ms) + 750ms);
}

/* =========================
   2) SECTION_02: .bg 무한 롤링
   ========================= */
.section_02 .bg {
  /* 기존 속성 유지하면서 롤링만 추가 */
  background-repeat: repeat-x;
  background-size: auto 100%;
  animation: bgRoll 45s linear infinite;
}

/* =========================
   3) SECTION_02: photo 스크롤 지점 닿으면 flip 순차 + 이후 위아래 무한
   ========================= */
.section_02 .photo {
  opacity: 0;
  transform: perspective(800px) rotateY(90deg) translateY(10px);
  transform-style: preserve-3d;
}

.section_02 .photo.is-flipped {
  opacity: 1;
  /* flip + float 두 개를 시차로 */
  animation:
    flipIn 700ms ease both var(--d, 0ms),
    floatY 2.8s ease-in-out infinite calc(var(--d, 0ms) + 760ms);
}

/* =========================
   4) 스크롤 애니 (그 다음부터 자율)
   ========================= */
.scroll-reveal {
  opacity: 0;
  transform: translateY(18px);
}
.scroll-reveal.is-inview {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 650ms ease, transform 650ms ease;
}

/* =========================
   MAIN 카드 롤링(무한)
   ========================= */
.section.main .card {
  perspective: 900px;
}

.section.main .card li.zero {
	z-index: 10;
}

.section.main .card li.on {
  opacity: 0;
  transform: translateY(20px);
  transition: transform 600ms ease, opacity 600ms ease;
}

/* 활성 카드(맨 위) */
.section.main .card li.is-active {
  opacity: 1;
  transform: translateY(0);
  z-index: 4;
}

/* 다음 카드(살짝 뒤) */
.section.main .card li.is-next {
  opacity: 0.85;
  transform: translateY(10px);
  z-index: 3;
}

/* 그 다음 카드 */
.section.main .card li.is-next2 {
  opacity: 0.65;
  transform: translateY(18px);
  z-index: 2;
}

/* 나가는 카드(위로 빠지면서 사라짐) */
.section.main .card li.is-exit {
  opacity: 0;
  transform: translateY(-26px);
  z-index: 5;
}