@charset "UTF-8";
/* ============ FONT : NanumSquare Neo, Pretendard ============ */
@font-face{ font-family: "NanumSquare Neo"; src: url("../font/NanumSquareNeo/NanumSquareNeoTTF-bRg.woff") format("woff"); font-weight: 200; font-display: swap }
@font-face{ font-family: "NanumSquare Neo"; src: url("../font/NanumSquareNeo/NanumSquareNeoTTF-cBd.woff") format("woff"); font-weight: 500; font-display: swap }
@font-face{ font-family: "NanumSquare Neo"; src: url("../font/NanumSquareNeo/NanumSquareNeoTTF-dEb.woff") format("woff"); font-weight: 600; font-display: swap }
@font-face{ font-family: "NanumSquare Neo"; src: url("../font/NanumSquareNeo/NanumSquareNeoTTF-eHv.woff") format("woff"); font-weight: 700; font-display: swap }
@font-face{ font-family: "Pretendard"; src: url("../font/pretendard/Pretendard-Regular.woff") format("woff"); font-weight: 400; font-display: swap; unicode-range: U+AC00-D7A3, U+0020-002F, U+003A-0040, U+005B-0060, U+007B-007E }
@font-face{ font-family: "Pretendard"; src: url("../font/pretendard/Pretendard-Medium.woff") format("woff"); font-weight: 500; font-display: swap; unicode-range: U+AC00-D7A3, U+0020-002F, U+003A-0040, U+005B-0060, U+007B-007E }
@font-face{ font-family: "Pretendard"; src: url("../font/pretendard/Pretendard-SemiBold.woff") format("woff"); font-weight: 600; font-display: swap; unicode-range: U+AC00-D7A3, U+0020-002F, U+003A-0040, U+005B-0060, U+007B-007E }
@font-face{ font-family: "Pretendard"; src: url("../font/pretendard/Pretendard-Bold.woff") format("woff"); font-weight: 700; font-display: swap; unicode-range: U+AC00-D7A3, U+0020-002F, U+003A-0040, U+005B-0060, U+007B-007E }
@font-face{ font-family: "munmak"; src: url("../font/munmak/MUNMAK_BYEOLBANCHE.woff") format("woff"); font-display: swap }
/* ============ DESIGN TOKENS ============ */
:root{ 
  --container: 1420px; 
  --content: 1040px; 
  --pad-mobile: 24px; 
  --color-blue: #007AC2; 
  --shadow1: 12px 12px 20px rgba(0, 0, 0, 0.15); 
  --paper: #fff; 
  --grid: #eee; 
  --fs-note: 2.4rem
}
/* ============ RESET / BASE ============ */
*,*::before,*::after{ margin:0; padding:0; box-sizing:border-box; font:inherit; color:inherit; flex-shrink:0; outline: none; -webkit-tap-highlight-color: transparent }
html{ -webkit-text-size-adjust:100%; font-size:clamp(8px, 0.35vw + 5px, 10px) }
/* 1rem = 8~10px : 857px↓→8px, 1429px↑→10px (뷰포트에 따라 자연스럽게 스케일) */
body{ font-size:1.6rem; font-family:'NanumSquare Neo','Apple SD Gothic Neo','Malgun Gothic',sans-serif; color:#333; line-height:1; font-weight: 200; letter-spacing: -0.02em; overflow-x:hidden; -webkit-font-smoothing:antialiased; text-size-adjust: none; -webkit-text-size-adjust: none }
h1, h2, h3, h4, h5, h6{ font-size:inherit; line-height:inherit }
ul,ol,dl,menu,li{ list-style:none }
a, a:active, a:hover{ text-decoration:none }
button{ background-color:transparent; border: none; cursor: pointer }
blockquote, q{ quotes:none }
:after, :before{ box-sizing:inherit }
img, picture, video, canvas, svg{ display: block; max-width:100% }
fieldset,img{ border:0 }
iframe{ overflow:hidden; margin:0; border:0; padding:0; vertical-align:top }
address, em,i{ font-style:normal }
textarea{ -webkit-backface-visibility:hidden; backface-visibility:hidden; background-color:transparent; border:0; word-wrap:break-word }
table{ border-collapse:collapse; border-spacing:0 }
td, th{ padding:0 }
input, select, textarea{ vertical-align: middle; box-sizing: border-box; border-radius: 0; appearance:none; -moz-appearance: none; -webkit-appearance: none }
input[type=text]::-ms-clear{ display: none }
/* =========== =========== */
.sr-only{ position: absolute; width: 1px; height: 1px; padding: 0; margin: -0.1rem; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0 }
.mo{ display: none }
.z1{ position: relative; z-index: 2 }
/* ============ LAYOUT HELPERS ============ */
.container{ position:relative; width:min(90%, 1420px); margin:0 auto; height:100% }
.content{ max-width:var(--content); margin:0 auto }
.section{ position:relative }
.full{ height: calc(var(--vh) * 100) }
/* 모눈 종이 배경 */
.bg-paper{ background-color: var(--paper); background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px); background-size: clamp(2.5rem, 4.1379vw + 0.4483rem, 5rem) clamp(2.5rem, 4.1379vw + 0.4483rem, 5rem); background-position: clamp(1.5rem, 2.069vw + 0.2241rem, 2.5rem) clamp(1.5rem, 2.069vw + 0.2241rem, 2.5rem); background-attachment: fixed }
/* 색깔 종이 배경 */
[class*="paper-"]::after{ content: ''; position: absolute; width: 100%; left: 0; z-index: 1 }
.paper-blue-bottom::after{ bottom: -1px; height: 53px; aspect-ratio: 1920 / 53; background: url(/campaign/myfirstun-cgz/images/bg_paper_blue_top.png) repeat-x bottom center / contain }
.paper-blue-top::after{ top: -1px; height: 56px; aspect-ratio: 1920 / 56; background: url(/campaign/myfirstun-cgz/images/bg_paper_blue_bottom.png) repeat-x top center / contain }
.paper-blue-line::after{ top: -1px; height: clamp(12rem, 20.6897vw + 4.2414rem, 27rem); aspect-ratio: 1920/270; background: url(/campaign/myfirstun-cgz/images/bg_paper_blue_line.png) no-repeat top center / contain }
.paper-bottom::after{ bottom: -1px; width: 100%; aspect-ratio: 1920 / 151; filter: drop-shadow(0px -10px 30px rgba(23, 75, 111, 0.05)); background: url(/campaign/myfirstun-cgz/images/bg_paper_skyblue_top.png) no-repeat center bottom / 100%; -webkit-transform: translateZ(0); transform: translateZ(0);}
.paper-top::after{ position: absolute; top: 0; width: 100%; aspect-ratio: 1920 / 131; filter: drop-shadow(0px 10px 30px rgba(23, 75, 111, 0.05)); background: url(/campaign/myfirstun-cgz/images/bg_paper_skyblue_bottom.png) no-repeat center top / 100%; -webkit-transform: translateZ(0); transform: translateZ(0);}
.bg-blue{ background: url(/campaign/myfirstun-cgz/images/bg_sec7.jpg) repeat-y top center / 100%; background-attachment: fixed }
/* ============ TYPOGRAPHY ============ */
.sec-tit{ font-weight: 500; font-size: 4.8rem; line-height: 130%; letter-spacing: -0.02em }
.sec-tit > div:first-child{ position: relative; z-index: 2; margin-bottom: 0.4rem; word-break: keep-all; }
.sec-tit strong{ font-weight: 600 }
.sec-des{ font-size: 3.2rem; line-height: 140%; text-align: center; letter-spacing: -0.02em; color: #fff; opacity: 0.9; -webkit-text-stroke: 0.4px #fff }
.color-blue{ color:var(--color-blue) }
/* ============ DECORATION ============ */
.line{ position: relative; overflow: visible }
.line span{ position: relative; z-index: 1 }
.line::before{ content: ""; position: absolute; bottom: -6px; left: -10px; width: calc(100% + 20px); height: 100%; background: url(/campaign/myfirstun-cgz/images/obj_tit_line.svg) no-repeat bottom center / 100%; opacity: 0.4 }
.line.db::before{ background-image: url(/campaign/myfirstun-cgz/images/obj_tit_line_double.svg); opacity: 0.6 }
.star{ position: relative }
.star::before{ content: ""; position: absolute; top: 0; left: 0; z-index: 1; transform: translate(-70%, -76%); width: 40px; aspect-ratio:40/43; background: url(/campaign/myfirstun-cgz/images/ico_star.svg) no-repeat center / 100% 100% }
.obj{ position: absolute; background: no-repeat center / cover; filter: drop-shadow(12px 12px 20px rgba(0, 0, 0, 0.15)); pointer-events: none; -webkit-transform: translateZ(0); transform: translateZ(0); }
.obj.flower{ --obj-img: url(/campaign/myfirstun-cgz/images/obj_flower.png); width: 8.02%; aspect-ratio: 77/69; background-image: var(--obj-img) }
.obj.line1{ --obj-img: url(/campaign/myfirstun-cgz/images/obj_line.svg); width: 10.99%; aspect-ratio: 211/84; background-image: var(--obj-img) }
.obj.unhch{ --obj-img: url(/campaign/myfirstun-cgz/images/obj_unhch.png); width: 8.91%; aspect-ratio: 57/53; background-image: var(--obj-img) }
.obj.heart{ --obj-img: url(/campaign/myfirstun-cgz/images/obj_heart.png); width: 9.01%; aspect-ratio: 173/153; background-image: var(--obj-img) }
.obj.star1{ --obj-img: url(/campaign/myfirstun-cgz/images/obj_star.png); width: 9.38%; aspect-ratio: 10/9; background-image: var(--obj-img) }
.obj.flag2{ width: 9.48%; aspect-ratio: 182/165; background-image: url(/campaign/myfirstun-cgz/images/obj_flag2.png) }
/* ============ BUTTONS ============ */
.btn-pill{ position: relative; display: inline-flex; align-items: center; justify-content: center; flex-direction: column; padding: 2.8rem 6.4rem; border-radius: 999px; gap:8px; background: linear-gradient(90deg,#0F88D8 0%,#0269D1 100%); font-weight: 500; font-size: 3.2rem; line-height: 105%; text-align: center; letter-spacing: -0.02em; color: #fff; text-decoration: none; border: none; box-shadow: inset 4px 4px 30px rgba(255, 255, 255, .4), inset -4px -4px 10px rgba(0, 53, 144, .4); filter: drop-shadow(15px 15px 30px rgba(0, 0, 0, .15)); -webkit-transform: translateZ(0); transform: translateZ(0); 
transition: transform .2s ease, filter .2s ease, box-shadow .2s ease;}
@media (hover:hover) {
  .btn-pill:hover {
    transform: translateY(2px);
    box-shadow: inset 2px 2px 12px rgba(255, 255, 255, .25), inset -2px -2px 8px rgba(0, 53, 144, .25);
    filter: drop-shadow(8px 8px 16px rgba(0, 0, 0, .12));
  }
}
.btn-pill::before{ content: ""; position: absolute; inset: 0; border-radius: inherit; border: 3px solid rgba(255, 255, 255, .2); pointer-events: none }
.btn-pill.sm{ padding: 3.2rem 5.6rem }
.btn-pill small{ display: block; font-weight: 200; font-size: 2.2rem; line-height: 120%; letter-spacing: -0.02em }
.btn-pill strong{ display: block; font-weight: 500 }
.btn-pill[class*="ico"]{ flex-direction: row; gap: 12px }
.btn-pill[class*="ico"]::after{ content: ""; display: inline-block; width: 2.8rem; aspect-ratio: 1/1; background: no-repeat center / 100% 100% }
.btn-pill.ico-arrow::after{ background-image: url(/campaign/myfirstun-cgz/images/ico_arrow.svg) }
.btn-line{ display: inline-flex; flex-direction: row; align-items: center; gap:8px; position: relative; padding: 1.2rem 0; font-family: 'NanumSquare Neo'; font-weight: 500; font-size: 1.8rem; line-height: 105%; text-align: center; letter-spacing: -0.02em; color: var(--color-blue) }
.btn-line::before{ content: ""; position: absolute; bottom: 0; width: 100%; height: 1.5px; background-color: var(--color-blue) }
.btn-line.ico-arrow::after{ content: ""; display: inline-block; width: 28px; height: 28px; background:url(/campaign/myfirstun-cgz/images/ico_arrow_blue.svg) no-repeat center }
.btn-float { position: fixed; top: 80px; right: 4.167%; z-index: 5; width: 7.3499%; min-width: 140px; filter: drop-shadow(15px 15px 30px rgba(0, 0, 0, 0.15)); opacity: 0; visibility: hidden; transition: opacity 0.35s ease, visibility 0.35s ease; -webkit-transform: translateZ(0); transform: translateZ(0) }
.btn-float .btn-pill { display: flex; flex-direction: column; align-items: center; max-width:140px; padding: 137px 22px 40px; gap: 16px; background: linear-gradient(180deg, #0F88D8 0%, #0269D1 100%); box-shadow: inset 4px 4px 30px rgba(255, 255, 255, 0.4), inset -4px -4px 20px rgba(0, 53, 144, 0.4); font-size: 24px; line-height: 130%; position: relative; transform-origin: 50% 18%; will-change: transform }
.btn-float .btn-pill::after{ content:""; width: 100%; aspect-ratio: 140/121; background: url(/campaign/myfirstun-cgz/images/img_float_book.png) no-repeat top center / contain; position: absolute; top: 0 }
.btn-float.is-visible { opacity: 1; visibility: visible }
.btn-float.is-visible .btn-pill{ animation: btnFloatJingle 4.6s cubic-bezier(0.34, 1.56, 0.64, 1) infinite }
@keyframes btnFloatJingle{
  0%, 30%, 62%, 100%{ transform: translate3d(0, 0, 0) rotate(0deg) }
  5%{ transform: translate3d(0, 0, 0) rotate(3.2deg) }
  10%{ transform: translate3d(0, 0, 0) rotate(-2.6deg) }
  15%{ transform: translate3d(0, 0, 0) rotate(1.8deg) }
  20%{ transform: translate3d(0, 0, 0) rotate(-1deg) }
  25%{ transform: translate3d(0, 0, 0) rotate(0.4deg) }
  67%{ transform: translate3d(0, 0, 0) rotate(-3deg) }
  72%{ transform: translate3d(0, 0, 0) rotate(2.4deg) }
  77%{ transform: translate3d(0, 0, 0) rotate(-1.6deg) }
  82%{ transform: translate3d(0, 0, 0) rotate(0.8deg) }
  87%{ transform: translate3d(0, 0, 0) rotate(-0.3deg) }
}
.popup-wrap{ position: fixed; width: 100%; height: 100%; inset: 0; z-index: 10; display: none }
.popup-wrap .dim{ position: fixed; background: rgba(0, 0, 0, 0.4); width: 100%; height: 100% }
.popup{ position: absolute; top: 50%; left: 50%; background: url(/campaign/myfirstun-cgz/images/bg_popup.png) no-repeat center / 100% 100%; width: calc(100% - 24px); padding: 4rem 3.2rem; transform: translate(-50%, -50%); display: none }
.popup .btn-close{ position: absolute; top: 16px; right: 16px; width: 20px; height: 20px; background: url(/campaign/myfirstun-cgz/images/icon_close.png) no-repeat center / cover }
.popup p{ font-weight: 500; font-size: 18px; line-height: 150%; text-align: center; letter-spacing: -0.02em; color: #333 }
.popup-wrap.active, .popup.active{ display: block }
@media (prefers-reduced-motion: reduce){
  .btn-float.is-visible .btn-pill{ animation:none }
}
/* ============ HERO ============ */
.hero{ overflow: hidden; position: relative; background: url(/campaign/myfirstun-cgz/images/hero_bg_pc.jpg) no-repeat top center / cover }
.hero h1{ position: absolute; top: 50px; left: 50px }
.hero .container{ display: flex; align-items: center; height: calc(100% - 53px) }
.hero .container > div{ margin-left: 4.047%; text-align: center; position: relative; z-index: 1 }
.hero h2{ width: 50rem; margin: 0 auto 2.8rem }
.hero h2 img{ display: inline-block; width: 100% }
.hero h2 .mo{ display: none;}
.hero .btn-pill{ text-align: left; align-items: flex-start; padding-left: 4.8rem; padding-right: 6.4rem }
.hero .btn-pill strong{ font-weight: 600 }
.hero .btn-pill::after{ content:''; position: absolute; right: 0; width: min(21.46%,115px); aspect-ratio: 115/112; background: url(/campaign/myfirstun-cgz/images/obj_earth.png) no-repeat center / cover; filter: drop-shadow(var(--shadow1)); -webkit-transform: rotate(10.05deg) translate3d(1.04%, -61%, 0); transform: rotate(10.05deg) translate3d(1.04%, -61%, 0); }
.hero .obj{ filter: drop-shadow(8px 8px 15px rgba(0, 0, 0, 0.08)); -webkit-transform: translateZ(0); transform: translateZ(0); }
.hero .obj.line1{ top: 32.2%; left: 47.2%; transform: rotate(29.48deg) translate3d(0, 0, 0) }
/* ============ SEC 1) NAME ============ */
.name-sec{ overflow: hidden; padding: 10rem 0 12.8rem; background: url(/campaign/myfirstun-cgz/images/bg_sec_name.jpg) no-repeat center / 100% 100%; text-align: center; color: #fff; z-index: 1 }
.name-sec .sec-tit{ margin-bottom: 2rem }
.name-sec .line::before{ background-image: url(/campaign/myfirstun-cgz/images/obj_tit_line_name.svg); opacity: 0.6 }
.name-sec .sec-des{ margin-bottom: 6.4rem }
.name-form{ position: relative; z-index: 2; width: 66.19%; margin: 0 auto; display: flex; flex-direction: column; justify-content: center; align-items: center; -webkit-transform: translateZ(0); transform: translateZ(0); }
.name-form::after{ content: ''; position: absolute; inset: 0; background: url(/campaign/myfirstun-cgz/images/bg_sec1_name_box.png) no-repeat center / 100% 100%; filter: drop-shadow(var(--shadow1)); -webkit-transform: translateZ(0); transform: translateZ(0); z-index: -1; pointer-events: none; }
.name-form::before{ content: ''; position: absolute; left: 0; width: min(19.68%, 185px); aspect-ratio: 115 / 112; background: url(/campaign/myfirstun-cgz/images/obj_earth.png) no-repeat center / cover; filter: drop-shadow(var(--shadow1)); -webkit-transform: rotate(10.05deg) translateZ(0); transform: rotate(24.02deg) translate3d(-72%, -30%, 0) }
.name-toast{ position:absolute; top:0; left:50%; z-index:3; display:flex; align-items:center; gap:.2rem; padding:1rem 1.6rem 1rem 1.2rem; border-radius:999px; background: rgba(255, 255, 255, 0.9); font-weight: 500; font-size: 2rem; line-height: 140%; text-align: center; letter-spacing: -0.02em; color: rgba(34, 34, 34, 0.8);white-space:nowrap; pointer-events:none; opacity:0; filter:drop-shadow(12px 12px 20px rgba(0, 0, 0, 0.15)); backdrop-filter: blur(4px); transform:translate3d(-50%, -50%, 0); transition:opacity .32s ease, transform .32s ease; will-change:opacity, transform }
.name-toast::after{ content: ''; position: absolute; top: calc(100% - 1px); left: 50%; width: 0; height: 0; border-top: 1.4rem solid rgba(255, 255, 255, 0.9); border-right: .8rem solid transparent; border-left: .8rem solid transparent; transform: translateX(-50%);}
.name-toast[hidden]{ display:none }
.name-toast.is-visible{ opacity:1; transform:translate3d(-50%, -70%, 0) }
.name-toast.is-hiding{ opacity:0; transform:translate3d(-50%, -50%, 0) }
.name-toast-icon{ display:inline-flex; width:2.4rem; height:2.4rem; align-items:center; justify-content:center; background: url(/campaign/myfirstun-cgz/images/ico_error.svg) no-repeat center / 100%;}
.name-input{ width:100%; padding: 5.9rem 0; color: #333; font-weight: 500; border:none; background: none; text-align: center; font-size: 3rem; line-height: 140%; letter-spacing: -0.02em }
.name-input:focus{ outline: none }
.name-input::placeholder{ color:#BBBBBB; font-weight: 200 }
.name-note{ margin-top: 4rem; font-size: var(--fs-note); line-height: 140%; text-align: center; color: rgba(255, 255, 255, 0.8); letter-spacing: -0.02em }
.name-sec .obj{ pointer-events: none; z-index: 1 }
.name-sec .obj.flower{ top: 50%; left: 50%; max-width: 154px; transform: rotate(11.63deg) translate3d(-453%, 163%, 0); width: 8.65% }
.name-sec .obj.unhch{ top: 50%; left: 50%; max-width: 185px; transform: rotate(-12.03deg) translate3d(330%, 125%, 0); width: 9.64% }
.name-sec .obj.heart{ top: 50%; left: 50%; max-width: 173px; transform: rotate(16.44deg) translate3d(225%, -220%, 0) }
.name-sec .obj.star1{ top: 50%; left: 50%; max-width: 180px; transform: rotate(-12.47deg) translate3d(-373%, -269%, 0) }
/* ============ SEC 2) VISION ============ */
.vision-sec{ overflow: hidden; padding: 21.3rem 0 0; text-align: center }
.vision-sec .line::before{ background-image: url(/campaign/myfirstun-cgz/images/obj_tit_line_vision.svg) }
.vision-note img{ margin: auto }

.vision-wrap { overflow: hidden; position: relative; margin: 5.6rem auto 7.2rem;}
.vision-embla { overflow: hidden;}
.vision-track { display: flex; align-items: center; height: 360px;}
.vision-slide { flex: 0 0 510px; min-width: 0; position: relative; display: flex; align-items: center; justify-content: center;}
.vision-slide::after{ content: ""; position: absolute; inset: 0; z-index: 1; opacity: 0; background: no-repeat center / contain; transition: opacity 0.3s ease-in-out .3s;}
.vision-slide.is-active::after{ opacity: 1;}
.vision-slide[data-slide="1"].is-active::after { background-image: url(/campaign/myfirstun-cgz/images/txt_sec2_box1_deco.png); }
.vision-slide[data-slide="2"].is-active::after { background-image: url(/campaign/myfirstun-cgz/images/txt_sec2_box2_deco.png);}
.vision-slide[data-slide="3"].is-active::after { background-image: url(/campaign/myfirstun-cgz/images/txt_sec2_box3_deco.png);}
.vision-slide[data-slide="4"].is-active::after { background-image: url(/campaign/myfirstun-cgz/images/txt_sec2_box4_deco.png);}
.vision-slide[data-slide="5"].is-active::after { background-image: url(/campaign/myfirstun-cgz/images/txt_sec2_box5_deco.png);}
.vision-slide[data-slide="6"].is-active::after { background-image: url(/campaign/myfirstun-cgz/images/txt_sec2_box6_deco.png);}

.slide-inner { width: 510px; height: 360px; position: relative; transition: transform .6s cubic-bezier(.22, .61, .36, 1), opacity .6s, filter .6s; transform-origin: center center; will-change: transform, opacity; z-index: 1;}
.slide-inner img { display: block; width: 100%; height: auto;}
.vision-slide .slide-inner { transform: scale(.5882353);/* 300/510 */}
.vision-slide.is-active { z-index: 20;}
.vision-slide.is-active .slide-inner { transform: scale(1); opacity: 1;}
.vision-slide.is-prev .slide-inner{ transform: translateX(48px) scale(.5882353);}
.vision-slide.is-next .slide-inner{ transform: translateX(-48px) scale(.5882353);}
.vision-slide.is-prev2 .slide-inner{ transform: translateX(196px) scale(.5882353);}
.vision-slide.is-next2 .slide-inner{ transform: translateX(-196px) scale(.5882353);}
@media (min-width: 1921px) {
  .vision-slide{ flex-basis: 362px;}
  .vision-slide.is-prev .slide-inner,
  .vision-slide.is-prev2 .slide-inner,
  .vision-slide.is-prev-far .slide-inner{ transform: translateX(-100px) scale(.5882353);}
  .vision-slide.is-next .slide-inner,
  .vision-slide.is-next2 .slide-inner,
  .vision-slide.is-next-far .slide-inner{ transform: translateX(100px) scale(.5882353);}
}
/* ============ SEC 3) WIDER WORLD ============ */
.wider-sec{ overflow: hidden; height: calc(100vw * 810 / 1920); min-height: calc(var(--vh) * 100) }
.wider-sec .line::before{ background-image: url(/campaign/myfirstun-cgz/images/obj_tit_line_wider.svg) }
.wider-head{ position: relative; width: 100%; height: 100% }
.wider-sec .sec-tit{ position: absolute; left: 50%; top: 34%; transform: translate(-50%, -50%); white-space: nowrap; text-align: center }
.wider-cover{ position: absolute; top: 0; left: 0; width: 100%; height: 100% }
.wider-cover .sec-tit{ position: absolute; left: 50%; top: 50%; z-index: 1; text-align: center; white-space: nowrap }
.wider-cover img{ position: absolute; left: 0; top: 0; width: 100%; height: 100%; transform: translateY(586px) scale(0.9029); object-fit: cover }
/* ============ SEC 4) KIT INTRO ============ */
.kit-sec{ overflow: hidden; padding: 16rem 0 12.8rem; color: #fff; text-align: center; background: url(/campaign/myfirstun-cgz/images/bg_sec_name.jpg) center }
.kit-sec .sec-tit{ position: relative; z-index: 2;}
.kit-sec .sec-tit .line::before{ opacity: 0.6 }
.kit-box{ position: relative; overflow: visible; width: min(75.573%, 1451px); margin: 6.3rem auto 8.4rem; aspect-ratio: 1451/633; background: url(/campaign/myfirstun-cgz/images/img_sec5.png) no-repeat center / contain }
.kit-box::before{ content: ""; position: absolute; top: -21.5%; left: 1.5%; z-index: 2; width: 14.55%; aspect-ratio: 211/216; background: url(/campaign/myfirstun-cgz/images/obj_flag.png) no-repeat center / contain; filter: drop-shadow(var(--shadow1)); pointer-events: none; transform: rotate(-13.48deg) translate3d(0, 0, 0) }
.kit-txt{ margin: 0 auto 4.4rem; font-family: 'munmak'; font-size: 4.4rem; line-height: 105%; letter-spacing: -0.02em; color: #FFF }
.kit-txt .line::before{ background-image: url(/campaign/myfirstun-cgz/images/obj_tit_line_thick.png) }
.kit-label{ display: flex; gap:16px; justify-content: center }
.kit-label div{ flex: 1; position: relative; background: #fff; border-radius: 16px; padding: 0.6rem }
.kit-label div span{ display: flex; height: 100%; padding: 1.8rem 2.59%; border: 2.5px solid var(--color); border-radius: 12px; font-family: 'munmak'; font-size: 4rem; line-height: 105%; text-align: center; letter-spacing: -0.02em; -webkit-text-stroke: 0.4px var(--color); color: var(--color); align-items: center; word-break: keep-all; justify-content: center;  -webkit-transform: translateZ(0); transform: translateZ(0);}
.kit-label div.label1{ box-shadow: 6px 6px 20px rgba(123, 58, 74, 0.15); flex: 1 1 21.6% }
.kit-label div.label1 span{ --color: #DF5F7D }
.kit-label div.label2{ box-shadow: 6px 6px 20px rgba(52, 97, 129, 0.15); flex: 1 1 22.4% }
.kit-label div.label2 span{ --color: #007AC2 }
.kit-label div.label3{ box-shadow: 6px 6px 20px rgba(129, 111, 74, 0.15); flex: 1 1 29% }
.kit-label div.label3 span{ --color: #FFB829 }
.kit-label div.label4{ box-shadow: 6px 6px 20px rgba(115, 90, 152, 0.15); flex: 1 1 23.1% }
.kit-label div.label4 span{ --color: #AB88E1 }
/* ============ SEC 5) GOODS ============ */
.goods-sec{ padding: 6.4rem 0 12rem }
.goods{ float: left; position: relative }
.goods-grid{ position: relative; z-index: 2; width: 100% }
.goods-grid::after { content: ""; width: 100%; clear: both; display: block }
.goods-sec .btn-wrap{ margin: 7.7rem auto 0; text-align: center }
.goods-sec .btn-pill strong{ font-weight: 600 }
.goods .img-wrap{ overflow: hidden; display: inline-block; position: absolute; background: no-repeat top left / 100%; /*filter: drop-shadow(25px 25px 40px rgba(39, 75, 100, 0.12));*/}
.goods .tag{ position: absolute; z-index: 2; background: url(/campaign/myfirstun-cgz/images/img_kit_item1_tag_pc.png) no-repeat center / 100% 100% }
.goods .bubble{ position: absolute; z-index: 1; }
.goods .bubble .txt{position: relative; padding: 0 3.2rem; font-weight: 500; font-size: 2.4rem; line-height: 140%; text-align: center; border-radius: 32px }
.goods .bubble::before,
.goods .bubble::after { content: ""; width: 100%; display: block; background: no-repeat bottom center / 100%;}
.goods .bubble .txt::before,
.goods .bubble .txt::after { content: ""; height: 100%; display: block; background: no-repeat top center; position: absolute; top: 0;}

/* pink */
.goods.p { width: 48.0985915493%; aspect-ratio: 683/838; text-align: right;}
.goods.p .img-wrap { top: -1.8%; right: -6%; width: 88.58%; aspect-ratio: 605 / 804; background-image: url(/campaign/myfirstun-cgz/images/img_goods01.png); }
.goods.p .tag { bottom: 12.44%; left: -1%; width: 54.48%; aspect-ratio: 371 / 328; background-image: url(/campaign/myfirstun-cgz/images/img_kit_item1_tag_pc.png) }
.goods.p .bubble { bottom: 0; right: 0; color: #8E5662}
.goods.p .bubble::before { background-image: url(/campaign/myfirstun-cgz/images/txt_box_sec5_p_t.png); aspect-ratio: 458/47;}
.goods.p .bubble::after { background-image: url(/campaign/myfirstun-cgz/images/txt_box_sec5_p_b.png); aspect-ratio: 229/13;}
.goods.p .bubble .txt { background: #ffd3dd;}
.goods.p .bubble .txt::before,
.goods.p .bubble .txt::after { aspect-ratio: 1/3; }
.goods.p .bubble .txt::before { background-image: url(/campaign/myfirstun-cgz/images/txt_box_sec5_p_l.png); left: 0;}
.goods.p .bubble .txt::after { background-image: url(/campaign/myfirstun-cgz/images/txt_box_sec5_p_r.png); right: 0;}
/* blue */
.goods.b { margin-top: 8.9rem; margin-left: 5.4929577465%; width: 43.9436619718%; aspect-ratio: 624/784;}
.goods.b .img-wrap { left: -4.8%; bottom: -10.5%; width: 112.5%; aspect-ratio: 702 / 772; background-image: url(/campaign/myfirstun-cgz/images/img_goods02.png);}
.goods.b .tag { top: 9%; left: 53.19%; width: 39.07%; aspect-ratio: 243 / 210; background-image: url(/campaign/myfirstun-cgz/images/img_kit_item2_tag_pc.png)}
.goods.b .bubble { left: 6.4102564103%; min-width: 313px; color: #1D679F}
.goods.b .bubble::before { background-image: url(/campaign/myfirstun-cgz/images/txt_box_sec5_b_t.png); aspect-ratio: 157/13;}
.goods.b .bubble::after { background-image: url(/campaign/myfirstun-cgz/images/txt_box_sec5_b_b.png); aspect-ratio: 157/23;}
.goods.b .bubble .txt { background: #bfe3ff;}
.goods.b .bubble .txt::before,
.goods.b .bubble .txt::after { aspect-ratio: 17/35; }
.goods.b .bubble .txt::before { background-image: url(/campaign/myfirstun-cgz/images/txt_box_sec5_b_l.png); left: 0;}
.goods.b .bubble .txt::after { background-image: url(/campaign/myfirstun-cgz/images/txt_box_sec5_b_r.png); right: 0;}
/* yellow */
.goods.y { margin-top: 0; width: 48.3098591549%; aspect-ratio: 686/628;}
.goods.y .img-wrap { top: -2.5%; right: -6.5%; width: 75.978%; aspect-ratio: 493 / 614; background-image: url(/campaign/myfirstun-cgz/images/img_goods03.png);}
.goods.y .tag {  top: 23.68%; left: -2%; width: 48.978%; aspect-ratio: 335 / 211; background-image: url(/campaign/myfirstun-cgz/images/img_kit_item3_tag_pc.png)}
.goods.y .bubble { right: 0; bottom: 0; color: #726435}
.goods.y .bubble::before { background-image: url(/campaign/myfirstun-cgz/images/txt_box_sec5_y_t.png); aspect-ratio: 426/47;}
.goods.y .bubble::after { background-image: url(/campaign/myfirstun-cgz/images/txt_box_sec5_y_b.png); aspect-ratio: 213/13;}
.goods.y .bubble .txt { padding-right: 3.4rem; padding-left: 3.4rem; background: #ffeba8;}
.goods.y .bubble .txt::before,
.goods.y .bubble .txt::after { aspect-ratio: 1/2; }
.goods.y .bubble .txt::before { background-image: url(/campaign/myfirstun-cgz/images/txt_box_sec5_y_l.png); left: 0;}
.goods.y .bubble .txt::after { background-image: url(/campaign/myfirstun-cgz/images/txt_box_sec5_y_r.png); right: 0;}
/* violet */
.goods.v { margin-top: 0; margin-left: 4.2253521127%; width: 45.7746478873%; aspect-ratio: 650/603;}
.goods.v .img-wrap { top: -2%; left: -1.8%; width: 79.63%; aspect-ratio: 516 / 643; background-image: url(/campaign/myfirstun-cgz/images/img_goods04.png);}
.goods.v .tag { right: -4.3%; bottom: 8.253%; width: 37.193%; aspect-ratio: 241 / 235; background-image: url(/campaign/myfirstun-cgz/images/img_kit_item4_tag_pc.png)}
.goods.v .bubble { left: 22.5%; bottom: 0; color: #634A8B}
.goods.v .bubble::before { background-image: url(/campaign/myfirstun-cgz/images/txt_box_sec5_v_t.png); aspect-ratio: 359/47;}
.goods.v .bubble::after { background-image: url(/campaign/myfirstun-cgz/images/txt_box_sec5_v_b.png); aspect-ratio: 359/26;}
.goods.v .bubble .txt { background: #d8bfff;}
.goods.v .bubble .txt::before,
.goods.v .bubble .txt::after { aspect-ratio: 1/2; }
.goods.v .bubble .txt::before { background-image: url(/campaign/myfirstun-cgz/images/txt_box_sec5_v_l.png); left: 0;}
.goods.v .bubble .txt::after { background-image: url(/campaign/myfirstun-cgz/images/txt_box_sec5_v_r.png); right: 0;}
/* ============ SEC 6) WHY SPECIAL ============ */
.why-sec{ position: relative; text-align: center; padding: 8rem 0 21.9rem; overflow: hidden }
.why-row{ overflow: visible; position: relative; margin-top: 6.8rem }
.why-row::after{ content:''; display: block; width:100% }
.why-photo{ width: 44.577%; transform: rotate(-2.5deg) translateZ(0); position: relative; z-index: 2; filter: drop-shadow(20px 20px 30px rgba(23, 75, 111, 0.15));  -webkit-transform: rotate(-2.5deg) translateZ(0); }
.why-cloud{ position: absolute; top: 60px; right: -90px; display: flex; flex-direction: column; align-items: center; justify-self: center; width: min(68%, 967px); padding: 2.5rem 9.86% 0 9.08%; aspect-ratio: 967/494; text-align: center; word-break: keep-all; background: url(/campaign/myfirstun-cgz/images/bg_sec6_txt_box.png) no-repeat center / auto 100%; justify-content: center }
.why-cloud::after { content: ""; position: absolute; right: -3.6%; top: 18%; width: 18.73%; aspect-ratio: 182 / 165; background: url(/campaign/myfirstun-cgz/images/obj_flag2.png) no-repeat center / cover; transform: rotate(13.62deg) }
.why-cloud .sec-tit{ line-height: 140%; margin-bottom: 0.8rem }
.why-cloud p{ font-size: 3.2rem; line-height: 160%; letter-spacing: -0.02em }
.why-cloud p strong{ font-weight: 500 }
.why-sec .obj{ filter: drop-shadow(10px 10px 15px rgba(119, 165, 198, 0.25)); -webkit-transform: translateZ(0); transform: translateZ(0); }
.why-sec .obj.flag2{display: none; top: 50%; left: 50%; transform: rotate(13.62deg) translate3d(339%, -168%, 0) }
/* ============ SEC 7) ONLY UNHCR ============ */
.only-sec{ padding: 12rem 0 6rem; }
.only-sec .why-cloud{ display: none }
.only-sec .sec-tit .line::before{ opacity: 0.6 }
.only-sec .star::before{ transform: translate(-50%, -90%) }
.only-sec .btn-wrap{ margin: 5.6rem auto 0; text-align: center; position: relative; z-index: 5; }
.only-pin{ position: relative }
.only-pin-inner{ transform-origin: top center }
.only-row{ display: flex; align-items: flex-start; gap: 8.45%; aspect-ratio: 1420/760; margin: 0 auto; position: relative }
.only-left{ flex: 0 1 33.8% }
.only-left .sec-tit{ margin-top: 5.6rem; line-height: 140%; word-break: keep-all;}
.only-right{ width: 57.75%; height: 100%; }
.only-photo { position: relative; display: flex; margin-top: 12.6rem; aspect-ratio: 5/4; transform: rotate(-2deg) scale(1.105) translateZ(0); background: url(/campaign/myfirstun-cgz/images/bg_sec7_wrap.png) no-repeat center / contain; filter: drop-shadow(20px 20px 30px rgba(23, 75, 111, 0.15)); align-items: center; justify-content: center }
.only-photo>div { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; opacity: 0; transition: opacity 0.25s ease }
.only-photo>div.active { opacity: 1 }
.only-photo img { width: 93.2%; height: auto; aspect-ratio: 480/380 }
.only-card-track{ position: relative; height: 100%;}
.only-sec .card{ position: relative; padding: 7.317% 7.805% 7.805%; aspect-ratio: 820 / 560; background: none; will-change: transform, opacity; backface-visibility: hidden }
.only-sec .card-bg{ position: absolute; z-index: 0; inset: 0; opacity: 0; pointer-events: none; background-repeat: no-repeat; background-position: center; background-size: cover; will-change: opacity; backface-visibility: hidden }
.only-sec .card-bg-default{ opacity: 1; background-image: url(/campaign/myfirstun-cgz/images/bg_set7_card.png) }
.only-sec .card-bg-sm{ background-image: url(/campaign/myfirstun-cgz/images/bg_set7_card_sm.png) }
.only-sec .card-bg-xs{ background-image: url(/campaign/myfirstun-cgz/images/bg_set7_card_xs.png) }
.only-sec .card.done-sm .card-bg-default,
.only-sec .card.done-xs .card-bg-default{ opacity: 0 }
.only-sec .card.done-sm .card-bg-sm{ opacity: 1 }
.only-sec .card.done-xs .card-bg-xs{ opacity: 1 }
.only-sec .card > :not(.card-bg){ position: relative; z-index: 1 }
.only-sec .card .num{ margin-bottom: 3.2rem; font-weight: 900; font-size: var(--fs-note); line-height: 140%; color: var(--color-blue) }
.only-sec .card h3{ margin-bottom: 1.6rem; font-weight: 500; font-size: 4rem; line-height: 140% }
.only-sec .card h3 .color-blue{font-weight: 600;}
.only-sec .card h3 .line::before{ opacity: 0.4 }
.only-sec .card strong{ font-weight: 500 }
.only-sec .card p{ font-size: 2.8rem; line-height: 160%; word-break: keep-all; }
.only-sec .card[data-card="3"] h3 .line::before{ background: url(/campaign/myfirstun-cgz/images/obj_tit_line_only_card3.png) no-repeat bottom center / 100% }
.only-sec .card .exp{display: none;}
@media (max-width: 1408px) {
  .only-sec .card .exp2{display: none;}
}
@media (max-width: 1320px) {
  .only-sec .card .exp{display: block;}
}
@media (max-width: 1300px){
  .only-row{ aspect-ratio: auto }
  .only-right{ height: auto }
  .only-card-track{ height: auto }
}
/* ============ SEC 8) MAP ============ */
.map-sec{ overflow: hidden; padding: 10rem 0 10.4rem; text-align:center }
.map-sec .btn-wrap{ position: relative; z-index: 2; text-align:center; }
.map-sec .btn-support{ position: relative; display: inline-flex; align-items: center; justify-content: center; flex-direction: row;
  gap: 12px; padding: 3.2rem 5.6rem; height: 98px; filter: drop-shadow(20px 20px 30px rgba(12,12,85,.1)); overflow:visible; -webkit-transform: translateZ(0); transform: translateZ(0);}
.map-sec .btn-support .line1, .map-sec .btn-support .line2 { display: contents }
.map-sec .btn-support .btn-txt-l, .map-sec .btn-support .post, .map-sec .btn-support .line2 { font-weight: 500; font-size: 3.2rem; line-height: 1.1; white-space: nowrap }
.map-sec .btn-support .cn { font-weight: 500; }
.map-sec .btn-support .amt { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 21rem; height: 12.6rem; transform: rotate(-4.81deg) translateY(-17%); z-index: 2; flex: none;}
.map-sec .btn-support .amt::before { content: ""; position: absolute; inset: 0; background: url('/campaign/myfirstun-cgz/images/bg_amt.png') no-repeat center / contain;}
.map-sec .btn-support .amt em { position: relative; z-index: 1; font-family: "munmak"; font-size: 4.4rem; line-height: 1; color: var(--color-blue); transform: rotate(-4.8deg) translate(0, 30%); white-space: nowrap;}
.map-note{ margin-top: 4rem; font-size: var(--fs-note); line-height: 140%; text-align: center; letter-spacing: -0.02em; color: rgba(51, 51, 51, 0.8) }
.map-wrap{ position: relative; display: flex; align-items: center; width: min(98.028%,1392px); margin: 4rem auto 5.6rem }
/* 맵 스크롤 컨테이너: 버튼 사이 영역을 채우며 가로 스크롤 허용 */
.map-scroll-outer{ flex: 1; min-width: 0;}
.map-scroll-outer::-webkit-scrollbar{ display: none }
.map-ctrl{ width: min(7.043%, 100px); aspect-ratio: 1/1; border-radius: 50%; background: no-repeat center / cover; box-shadow: inset 4px 4px 40px rgba(255, 255, 255, 0.3), inset -4px -4px 15px rgba(0, 53, 144, 0.3); transition: transform .12s; position: absolute; top: 50%; z-index: 2; filter: drop-shadow(20px 20px 30px rgba(23, 75, 111, 0.15)); -webkit-transform: translateZ(0); transform: translateZ(0); }
.map-ctrl.prev{ background-image: url(/campaign/myfirstun-cgz/images/ico_prev_off.svg); left: 0; transform: translate(0, -50%) }
.map-ctrl.prev:not(:disabled){ background-image: url(/campaign/myfirstun-cgz/images/ico_prev_on.svg) }
.map-ctrl.next{ background-image: url(/campaign/myfirstun-cgz/images/ico_next_off.svg); right: 0; transform: translate(0, -50%) }
.map-ctrl.next:not(:disabled){ background-image: url(/campaign/myfirstun-cgz/images/ico_next_on.svg) }
.map-ctrl:disabled{ cursor: default; pointer-events: none }
.map{ position: relative; width:81.85%; max-width: 1080px; aspect-ratio: 1080 / 530; background: url(/campaign/myfirstun-cgz/images/bg_map.png) no-repeat center / 100%; filter: drop-shadow(20px 20px 30px rgba(23, 75, 111, 0.15)); margin: auto }
.map .name-wrap{ position: absolute; top: 30.75%; left: 31.85%; width: 15.84%; z-index: 1; background: #fff; border-radius: 16px; display: flex; align-items: center; padding: 6px; box-shadow: 6px 6px 20px rgba(52, 97, 129, 0.15); justify-content: center; transform: rotate(4deg) translateZ(0); -webkit-transform: rotate(4deg) translateZ(0); }
.map .name-wrap span{ display: block; min-width: 158px; padding: 10px 18px; border-radius: 12px; border: 2.5px solid #0F88D8; border-radius: 16px; font-family: 'munmak'; font-size: 3.6rem; line-height: 105%; letter-spacing: -0.02em; color: var(--color-blue); -webkit-text-stroke: 0.4px var(--color-blue); text-align: center;}
.map [class^="step"]{ position: absolute; z-index: 0; top: 50%; left: 50%; opacity: 0; width: 84.0745%; background: url(/campaign/myfirstun-cgz/images/img_map.png) no-repeat center / contain; transform: translate(-50%, -50%); transition: opacity .45s ease }
.map [class^="step"] img{ width:100% }
.map [class^="step"].active{ z-index: 1; opacity: 1 }
.map-sec .obj{filter: drop-shadow(4px 4px 6px rgba(119, 165, 198, 0.25));}
.map-sec .obj.star1{max-width: 202px; top: 17%; left: 13.4%; transform: rotate(-12.47deg) translate3d(0, 0, 0); width: 10.52% }
.map-sec .obj.flower{max-width: 173px; top: 78.1%; right: 7.5%; transform: rotate(11.63deg) translate3d(0, 0, 0); width: 9.01% }
.map-sec .obj.star1{ transform-origin: 8% 8%; animation: mapStarWobble 8s ease-in-out infinite }
.map-sec .obj.flower{ transform-origin: 50% 50%; animation: mapFlowerSpin 8s linear infinite }

@keyframes mapStarWobble{
  0%, 24%, 25%, 100%{ transform: rotate(-12.47deg) translate3d(0, 0, 0) }
  6%{ transform: rotate(-16.5deg) translate3d(0, 0, 0) }
  12%{ transform: rotate(-10deg) translate3d(0, 0, 0) }
  18%{ transform: rotate(-14.5deg) translate3d(0, 0, 0) }
}
@keyframes mapFlowerSpin{
  0%, 25%{ transform: rotate(11.63deg) translate3d(0, 0, 0) }
  49%, 100%{ transform: rotate(371.63deg) translate3d(0, 0, 0) }
}
@media (prefers-reduced-motion: reduce){
  .map-sec .obj{ animation: none !important }
}
/* ============ SEC 9) GIFT KIT ============ */
.gift-sec{ overflow: hidden; padding: 24rem 0 9.6rem; text-align: center }
.gift-sec .sec-tit{ position: relative; z-index: 2;}
.gift-sec .carousel{ margin-top: 5.9rem }
/* carousel */
.carousel{ position: relative; width: 100vw; left: 50%; transform: translateX(-50%); margin-top: 4.8rem }
.carousel .swiper-container{ overflow: visible }
.carousel .swiper-wrapper{ align-items: center }
.carousel .swiper-slide{ flex: 0 0 auto; width: 540px; scroll-snap-align: center; text-align: center }
.carousel .swiper-slide img{ display: inline-block; filter: drop-shadow(20px 20px 30px rgba(23, 75, 111, 0.15)); -webkit-transform: translateZ(0); transform: translateZ(0); }
.gift-sec .obj.star1 { max-width: 162px; top: 34.7%; right: 10.5%; transform: rotate(-12.47deg) translate3d(0, 0, 0); width: 8.46%; }
.gift-sec .obj.heart { max-width: 152px; left: 37.1%; bottom: 4.2%; transform: rotate(10.21deg) translate3d(0, 0, 0); width: 7.95%; }
.gift-sec .obj.flower { max-width: 138px; top: 36.1%; left: 14.4%; transform: rotate(11.63deg) translate3d(0, 0, 0); width: 7.21%; }
/* ============ SEC 10) JOURNEY ============ */
.journey-sec{ overflow: hidden; padding: 14rem 0 6rem; text-align: center }
.journey-sec .sec-tit .line::before{ background-image: url(/campaign/myfirstun-cgz/images/obj_tit_line_journey.svg); opacity: 0.6 }
.steps-cont{ margin: 5.6rem 0 }
.steps-cont ul{ position: relative; width: min(83.1%, 1180px); aspect-ratio: 59/25; margin: auto }
.steps-cont li{ position: absolute; inset: 0; width: 100%; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.36s ease, visibility 0s linear 0.36s }
.steps-cont li.on{ opacity: 1; visibility: visible; pointer-events: auto; transition-delay: 0s }
.steps-cont li:not([data-step="0"]) .txt-box{ position: absolute; right: -100px; bottom: -40px; width: 420px; height: 270px; padding: 0 8.8rem 0 8.7rem; background: url(/campaign/myfirstun-cgz/images/bg_journey_cloud.png) no-repeat center / cover; text-align: center }
.steps-cont li:not([data-step="0"]) .txt-box::before{ content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url(/campaign/myfirstun-cgz/images/bg_journey_obj.png) no-repeat center / cover }
.steps-cont .img{ width: 100%; aspect-ratio: 59/25; background: no-repeat center / cover }
.steps-cont .txt-box{ opacity: 0; animation: stepFadeIn 0.5s ease 0.3s forwards; display: flex; flex-direction: column; justify-content: center; align-items: center;}
.steps-cont .txt-box h3{ position: relative; z-index: 1; display: inline-block; font-weight: 600; font-size: 3.4rem; line-height: 140%; color: var(--color-blue); letter-spacing: -0.02em; margin-bottom: 1rem }
.steps-cont .txt-box .line::before{ background-image: url(/campaign/myfirstun-cgz/images/obj_tit_line_journey2.svg); opacity: 0.4 }
.steps-cont .txt-box p{ position: relative; z-index: 1; font-size: 2.4rem; line-height: 150%; letter-spacing: -0.02em; word-break: keep-all }
.steps-cont .txt-box strong{ font-weight: 500; color: var(--color-blue) }
.steps-cont .deco{ content: ""; position: absolute; left: 0; top: 0; filter: drop-shadow(var(--shadow1));  -webkit-transform: translateZ(0); transform: translateZ(0); }
@keyframes stepImgFadeIn{
from{ opacity: 0 }
to{ opacity: 1 }
}
@keyframes stepFadeIn{
from{ opacity: 0; transform: translateY(12px) }
to{ opacity: 1; transform: translateY(0) }
}
.steps-cont [data-step="1"] .deco{ width: 174px; aspect-ratio: 174 / 169; background: url(/campaign/myfirstun-cgz/images/obj_earth.png) no-repeat center / cover; transform: rotate(13.18deg) translate(-44%, -27%) }
.steps-cont [data-step="2"] .deco{ width: 162px; aspect-ratio: 162 / 146; top: 50%; background: url(/campaign/myfirstun-cgz/images/obj_flag2.png) no-repeat center / cover; transform: rotate(-10.09deg) translate(-30%, -50%) }
.steps-cont [data-step="3"] .deco{ width: 196px; aspect-ratio: 196 / 168; left: auto; right: 0; background: url(/campaign/myfirstun-cgz/images/obj_fuo.png) no-repeat center / cover; transform: translate(-55%, -50%) }
.steps-cont [data-step="4"] .deco{ width: 165px; aspect-ratio: 165 / 169; background: url(/campaign/myfirstun-cgz/images/obj_flag.png) no-repeat center / cover; transform: rotate(6.29deg) translate(27%, -57%) }
.steps-cont [data-step="5"] .deco{ width: 177px; aspect-ratio: 177 / 164; background: url(/campaign/myfirstun-cgz/images/obj_unhch.png) no-repeat center / cover; transform: rotate(-8.04deg) translate(-70%, 154%) }
/* 개별 */
.steps-cont li[data-step="0"].on{ display: flex; align-items: center; justify-content: center }
.steps-cont li[data-step="0"] .txt-box{ padding: 0 11.2rem; width: min(52.033%, 614px); aspect-ratio: 614/430; background: url(/campaign/myfirstun-cgz/images/bg_journey_cloud_large.png) no-repeat center / 100%; text-align: center;}
.steps-cont li[data-step="0"] .txt-box p{ font-weight: 500; font-size: 3rem; line-height: 140%; letter-spacing: -0.02em }
.steps-cont li[data-step="0"] .txt-box p strong{ font-weight: 600; color: var(--color-blue) }
.steps-cont li[data-step="0"] .txt-box img{ display: inline-block; width: 18.42%; max-width: 72px; height: auto; margin-bottom: 2rem; }
.steps-cont li[data-step="1"] .img{ background-image: url(/campaign/myfirstun-cgz/images/img_journey_01.png) }
.steps-cont li[data-step="2"] .img{ background-image: url(/campaign/myfirstun-cgz/images/img_journey_02.png) }
.steps-cont li[data-step="3"] .img{ background-image: url(/campaign/myfirstun-cgz/images/img_journey_03.png) }
.steps-cont li[data-step="4"] .img{ background-image: url(/campaign/myfirstun-cgz/images/img_journey_04.png) }
.steps-cont li[data-step="5"] .img{ background-image: url(/campaign/myfirstun-cgz/images/img_journey_05.png) }
.steps-btn-wrap{ position: relative; height: 96px; display: flex; align-items: center; justify-content: center }
.steps-btn-wrap::before{ content: ""; position: absolute; top: 50%; left: 0; width: 100%; height: 4px; background: url(/campaign/myfirstun-cgz/images/line_step.png) no-repeat center / 100% 4px; transform: translate3d(0, -50%, 0) }
.steps-btn{ display: flex; justify-content: center; align-items: center; gap: 16rem; position: relative; z-index: 1 }
.steps-btn i{ display: inline-block; width: 6.4rem; aspect-ratio: 1/1; background: url(/campaign/myfirstun-cgz/images/ico_step_star2.png) no-repeat center / contain }
.steps-btn i.light{ background-image: url(/campaign/myfirstun-cgz/images/ico_step_star1.png) }
.steps-btn button{ position: relative; width: 6.4rem; aspect-ratio: 1/1; background: url(/campaign/myfirstun-cgz/images/ico_step_off.png) no-repeat center / contain; text-indent: -9999px }
.steps-btn button span{ position: absolute; inset: 0; display: block; background: url(/campaign/myfirstun-cgz/images/ico_step_on.png) no-repeat center / contain; opacity: 0; transition: opacity 0.36s ease; pointer-events: none }
.steps-btn button::before, .steps-btn button::after{ content: ""; position: absolute; left: 50%; top: 50%; border-radius: 50%; width: 100%; height: 100%; pointer-events: none }
.steps-btn button::before{ background: rgba(0, 122, 194, .08); animation: pulse1 2.8s infinite }
.steps-btn button::after{ background: rgba(0, 122, 194, .05); animation: pulse2 2.8s infinite }
.steps-btn button.on span{ opacity: 1 }
@keyframes pulse1{
0%, 55%, 100%{ transform: translate(-50%, -50%) scale(1.93) }
8%{ transform: translate(-50%, -50%) scale(2.05) }
16%{ transform: translate(-50%, -50%) scale(1.93) }
24%{ transform: translate(-50%, -50%) scale(2.1) }
32%{ transform: translate(-50%, -50%) scale(1.93) }
}
@keyframes pulse2{
0%, 55%, 100%{ transform: translate(-50%, -50%) scale(2.90); opacity: .5 }
8%{ transform: translate(-50%, -50%) scale(3.05); opacity: .8 }
24%{ transform: translate(-50%, -50%) scale(3.15); opacity: .8 }
40%{ transform: translate(-50%, -50%) scale(2.90); opacity: .5 }
}
/* ============ SEC 11) FINAL CTA ============ */
.final-sec{ overflow: hidden; padding: 4rem 0 26rem; text-align: center }
/* ============ OBJ MOTION ============ */
.hero .obj,
.name-sec .obj{ background-image: none }
.hero .obj::before,
.name-sec .obj::before{ content: ""; position: absolute; inset: 0; background: var(--obj-img) no-repeat center / 100% 100%; transform: translate3d(0, 0, 0); will-change: transform, opacity }
.hero .obj.flower::before{ transform-origin: 50% 50%; animation: heroFlowerSpin 3.8s cubic-bezier(.58, 0, .42, 1) infinite }
.hero .obj.line1::before{ transform-origin: 100% 100%; animation: heroLineStab 2.8s ease-in-out infinite }
.hero .obj.unhch::before{ transform-origin: 50% 88%; animation: heroUnhchStamp 3.2s ease-in-out infinite }
.name-sec .obj.star1::before{ transform-origin: 50% 0; animation: nameStarWobble 4.8s ease-in-out infinite }
.name-sec .obj.heart::before{ transform-origin: 50% 58%; animation: nameHeartBeat 3.6s ease-in-out infinite }
.name-sec .obj.flower::before{ transform-origin: 50% 50%; animation: nameFlowerSpin 6.4s cubic-bezier(.58, 0, .42, 1) infinite }
.name-sec .obj.unhch::before{ transform-origin: 50% 88%; animation: nameUnhchHop 4.2s ease-in-out infinite }
@keyframes heroFlowerSpin{
  0%, 18%, 100%{ transform: rotate(0deg) translate3d(0, 0, 0) }
  64%{ transform: rotate(360deg) translate3d(0, 0, 0) }
}
@keyframes heroLineStab{
  0%, 42%, 100%{ transform: translate3d(0, 0, 0) rotate(0deg) }
  18%{ transform: translate3d(-8%, -5%, 0) rotate(-2.5deg) }
  28%{ transform: translate3d(-4%, -2.5%, 0) rotate(-1deg) }
}
@keyframes heroUnhchStamp{
  0%, 48%, 100%{ transform: scale(1) translate3d(0, 0, 0) }
  16%{ transform: scale(1.1, .9) translate3d(0, 0, 0) }
  25%{ transform: scale(.97, 1.04) translate3d(0, 0, 0) }
  34%{ transform: scale(1.02, .98) translate3d(0, 0, 0) }
}
@keyframes nameStarWobble{
  0%, 100%{ transform: rotate(0deg) translate3d(0, 0, 0) }
  20%{ transform: rotate(-5deg) translate3d(0, 0, 0) }
  42%{ transform: rotate(4deg) translate3d(0, 0, 0) }
  64%{ transform: rotate(-2.5deg) translate3d(0, 0, 0) }
  82%{ transform: rotate(1.5deg) translate3d(0, 0, 0) }
}
@keyframes nameHeartBeat{
  0%, 100%{ transform: scale(1) translate3d(0, 0, 0) }
  12%{ transform: scale(1.07) translate3d(0, 0, 0) }
  18%{ transform: scale(.99) translate3d(0, 0, 0) }
  30%{ transform: scale(1.12) translate3d(0, 0, 0) }
  42%{ transform: scale(1) translate3d(0, 0, 0) }
  74%{ transform: scale(1.04) translate3d(0, 0, 0) }
  84%{ transform: scale(1) translate3d(0, 0, 0) }
}
@keyframes nameFlowerSpin{
  0%{ transform: rotate(0deg) translate3d(0, 0, 0) }
  100%{ transform: rotate(360deg) translate3d(0, 0, 0) }
}
@keyframes nameUnhchHop{
  0%, 100%{ transform: translate3d(0, 0, 0) scale(1) }
  16%{ transform: translate3d(0, -5%, 0) scale(1.01, .99) }
  28%{ transform: translate3d(0, 0, 0) scale(1.03, .96) }
  45%{ transform: translate3d(0, -4%, 0) scale(1.005, .995) }
  56%{ transform: translate3d(0, 0, 0) scale(1.02, .975) }
  72%{ transform: translate3d(0, -3%, 0) scale(1.005, .995) }
  82%{ transform: translate3d(0, 0, 0) scale(1.01, .985) }
}
@media (prefers-reduced-motion: reduce){
  .hero .obj::before,
  .name-sec .obj::before{ animation: none !important }
  .name-toast{ transition-duration:.01ms }
}
/* ============ SEC 12) FAQ ============ */
.faq-sec{ padding: 8rem 0 15.6rem; background: url(/campaign/myfirstun-cgz/images/bg_sec7.jpg) repeat top center / 100% }
.faq-sec .sec-tit{ text-align: center }
.faq-sec .line::before{ opacity: 0.4 }
.faq-list{ display: flex; flex-direction: column; gap: 16px; margin-top: 5.6rem }
.faq-q{ all: unset; display: flex; align-items: center; gap: 12px; width: 100%; box-sizing: border-box; cursor: pointer; font-weight: 500; font-size: 2.4rem; line-height: 140%; letter-spacing: -0.02em; color: #FFFFFF; padding: 2.4rem 4rem 2.4rem 2.4rem; background: linear-gradient(90deg, #2B9BE4 0%, #2B6FE4 100%); box-shadow: inset 4px 4px 40px rgba(255, 255, 255, 0.3), inset -4px -4px 15px rgba(0, 53, 144, 0.3); filter: drop-shadow(20px 20px 30px rgba(12, 12, 85, 0.1)); backdrop-filter: blur(10px); border-radius: 999px; -webkit-transform: translateZ(0); transform: translateZ(0); }
.faq-q::before{ content: ""; position: absolute; inset: 0; border-radius: inherit; border: 3px solid rgba(255, 255, 255, 0.2); pointer-events: none }
.faq-q .qmark{ flex: 0 0 auto; width: 4.8rem; height: 4.8rem; background: rgba(255, 255, 255, 0.4); border-radius: 999px; font-weight: 700; font-size: 2.8rem; line-height: 4.8rem; text-align: center; letter-spacing: -0.02em; color: #FFFFFF }
.faq-q .chev{ display: inline-block; width: 28px; height: 28px; margin-left: auto; transition: transform .3s; background: url(/campaign/myfirstun-cgz/images/ico_arrow_down.svg) no-repeat center / 100% auto }
.faq-item[open] .faq-q .chev{ transform: rotate(180deg) }
.faq-a{ overflow: hidden; box-sizing: border-box; transition: height .38s ease, opacity .3s ease }
.faq-a-inner{ padding: 3.2rem min(5.915%, 8.4rem) 5.6rem; font-family: 'Pretendard','NanumSquare Neo', sans-serif; font-weight: 400; font-size: 2rem; line-height: 170%; letter-spacing: -0.02em }
.faq-a-inner strong{ font-weight: 600 }
.faq-a .btn-line{ margin-top: 0.8rem }
@media (prefers-reduced-motion: reduce){
  .faq-a{ transition: none }
}
/* ============ FOOTER ============ */
.footer{ background: #202020; color: #FFFFFF; padding: 9rem 0 }
.footer-inner{ display: flex; align-items: center; gap: 40px; flex-wrap: wrap; width: min(87.5%, 1680px); margin: auto }
.footer-logo{ flex: 0 0 auto }
.footer-info{ flex: 1; min-width: 260px; display: flex; gap: 16px; flex-direction: column; font-family: 'Pretendard', 'NanumSquare Neo', sans-serif; font-weight: 500; font-size: 1.6rem; line-height: 130%; letter-spacing: -0.02em; color: #FFFFFF }
.footer-info .name{ font-weight: 700 }
.footer-info ul{ display: flex; flex-wrap: wrap; gap: 20px }
.footer-info ul li{ position: relative; list-style: none }
.footer-info ul li:not(:last-child)::after{ content: ""; position: absolute; right: -10px; top: 50%; transform: translate(0, -50%); display: block; width: 1px; height: 15px; background: #fff }
.footer-info .copy{ color: #787878 }
.footer-social{ display: flex; gap: 6px }
.footer-social a{ width: 46px; height: 46px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: #3a3a3a }
.footer-social a span{ position: absolute; width: 1px; height: 1px; padding: 0; margin: -0.1rem; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0 }
.footer-social a{ background: no-repeat center / 100% }
.footer-social a.fb{ background-image: url(/campaign/myfirstun-cgz/images/ico_fb.svg) }
.footer-social a.x{ background-image: url(/campaign/myfirstun-cgz/images/ico_x.svg) }
.footer-social a.yt{ background-image: url(/campaign/myfirstun-cgz/images/ico_yt.svg) }
.footer-social a.blog{ background-image: url(/campaign/myfirstun-cgz/images/ico_blog.png) }