@charset "utf-8";

/*
* vw 단위 사용법
* 80px => calc(80 * var(--vw));
*/

.imc { --vw: 0.625px; } /* 1920px 기준 */
@media screen and (min-width: 1200px) {
    .imc { --vw: 0.052083333vw; }
}

/* ============================================
   KV
   ============================================ */
.exc__kv {display:flex; flex-direction:column; align-items:center; padding-bottom:calc(160 * var(--vw));}
.exc__kvImages {width: 100%; margin-bottom: calc(60 * var(--vw));}
.exc__kvTitles {text-align: center; margin-bottom: calc(20 * var(--vw));}
.exc__kvTitles p{font-weight: 700; font-size: calc( 28 * var(--vw)); letter-spacing: -0.04em;margin-bottom: calc(20 * var(--vw));}
.exc__subTitle {font-family:'ITCGaramondStd', serif; font-size:calc(60 * var(--vw)); font-weight:400; color:#c0cc84; letter-spacing:-0.01em; line-height:1.1;}
.exc__mainTitle {margin-bottom: calc(20 * var(--vw)); font-family:'ITCGaramondStd', serif; font-size:calc(90 * var(--vw)); font-weight:400; color:#373737; letter-spacing:-0.01em; line-height:1.1;}
.exc__mainCopy {font-family:'Noto Sans KR', sans-serif; font-size:calc(28 * var(--vw)); font-weight:400; color:#000; letter-spacing:-0.04em; line-height:calc(44 * var(--vw)); text-align:center;}

/* ============================================
   Sorona
   ============================================ */
.exc__sorona {display:flex; flex-direction:column; align-items:center; width:100%; padding-bottom:calc(160 * var(--vw));}
.exc__soronaText {display:flex; flex-direction:column; align-items:center; gap:calc(6 * var(--vw));}
.exc__soronaTitle {font-family:'ITCGaramondStd', serif; font-size:calc(60 * var(--vw)); font-weight:400; color:#4c7283; letter-spacing:-0.04em; line-height:1.1; text-align:center;}
.exc__soronaCopy {font-family:'Noto Sans KR', sans-serif; font-size:calc(28 * var(--vw)); font-weight:400; color:#52719C; letter-spacing:-0.05em; line-height:calc(42 * var(--vw)); text-align:center;}
.exc__tiger {width:calc(876 * var(--vw)); height:calc(876 * var(--vw));}
.exc__tiger img {width:100%; height:100%; object-fit:cover;}

/* ============================================
   Online Only
   ============================================ */
.exc__onlineOnly {width:calc(1516 * var(--vw)); margin:0 auto; background:#f5f5f5; padding:calc(70 * var(--vw)) 0 calc(60 * var(--vw)); border: calc(1 * var(--vw)) solid #D9D9D9; border-radius: calc(50 * var(--vw));}
.exc__onlineHeader {text-align:center;}
.exc__onlineTitle {font-family:'ITCGaramondStd', serif; font-size:calc(60 * var(--vw)); font-weight:400; color:#000; letter-spacing:-0.04em; line-height:1.1;}
.exc__onlineSubtitle {font-family:'Noto Sans KR', sans-serif; font-size:calc(28 * var(--vw)); font-weight:400; color:#000; letter-spacing:-0.05em; line-height:calc(42 * var(--vw)); margin-top:calc(6 * var(--vw));}
.exc__onlineSubtitle.small {font-size:calc(23 * var(--vw)); font-weight:400; opacity: .6; margin-top: 0;}

/* Color List */
.exc__colorList {display:flex; justify-content:center; gap:calc(40 * var(--vw)); margin-bottom:calc(50 * var(--vw));}
.exc__colorItem {cursor:pointer; text-align:center; opacity:0.5; transition:opacity 0.3s;}
.exc__colorItem.on {opacity:1;}
.exc__colorThumb {width:calc(278 * var(--vw)); height:calc(275 * var(--vw)); background:#f5f5f5; overflow:hidden; display:flex; align-items:center; justify-content:center;}
.exc__colorThumb img {max-width:100%; max-height:100%; object-fit:contain;}
.exc__colorLabel {display:flex; align-items:center; justify-content:center; gap:calc(10 * var(--vw));}
.exc__colorDot {display:inline-block; width:calc(23 * var(--vw)); height:calc(23 * var(--vw)); border-radius:50%;}
.exc__colorName {font-family:'Proxima Nova', sans-serif; font-size:calc(24 * var(--vw)); font-weight:700; color:#151415; letter-spacing:-0.02em;}

/* Color Swiper */
.exc__colorSwiper {position:relative; width:calc(1206 * var(--vw)); margin:0 auto; overflow:hidden;}
.exc__colorDetail {display:flex; justify-content:center; gap:calc(20 * var(--vw)); background:#fff; padding:calc(22 * var(--vw)) 0 calc(39 * var(--vw)); border-radius: calc(20 * var(--vw));}
.exc__detailItem {text-align:center;}
.exc__detailImg {width:calc(468 * var(--vw)); height:calc(468 * var(--vw)); background:#fff; overflow:hidden; display:flex; align-items:center; justify-content:center;}
.exc__detailImg img {max-width:100%; max-height:100%; object-fit:contain;}
.exc__detailLabel {font-family:'Proxima Nova', sans-serif; font-size:calc(18 * var(--vw)); font-weight:500; color:#151415; opacity: .5; letter-spacing:-0.02em; }

/* Swiper Arrows */
.exc__swiperPrev, .exc__swiperNext {position:absolute; top:50%; transform:translateY(-50%); z-index:2; background:none; border:none; cursor:pointer; }
.exc__swiperPrev{margin-left: calc(50 * var(--vw)); }
.exc__swiperNext{margin-right: calc(50 * var(--vw)); }
.exc__swiperPrev img, .exc__swiperNext img {width:calc(31 * var(--vw)); height:calc(38 * var(--vw));}
.exc__swiperPrev {left:0;}
.exc__swiperNext {right:0;}

/* ============================================
   Middle Title
   ============================================ */
.exc__middleTitle {
    padding: calc(160 * var(--vw)) 0 calc(80 * var(--vw));
    font-size: calc(60 * var(--vw));
    font-family: 'ITCGaramondStd';
    line-height: calc(66 * var(--vw));
    letter-spacing: calc(-2.4 * var(--vw));
    text-align: center;
}
.exc__middleTitle .top {color: #C0CC84;}
.exc__middleTitle .bottom  {color: #7393BC;}

/* ============================================
   Double Reward
   ============================================ */
.exc__reward {width:calc(1200 * var(--vw)); margin:0 auto; padding:calc(160 * var(--vw)) 0; text-align:center;}
.exc__rewardTitle {font-family:'Proxima Nova', sans-serif; font-size:calc(38 * var(--vw)); font-weight:800; color:#52719c; letter-spacing:-0.03em; line-height:calc(40 * var(--vw)); text-transform:uppercase; margin-bottom:calc(16 * var(--vw));}
.exc__rewardCopy {font-family:'Noto Sans KR', sans-serif; font-size:calc(24 * var(--vw)); font-weight:400; color:#373737; letter-spacing:-0.05em; line-height:calc(38 * var(--vw)); margin-bottom:calc(20 * var(--vw));}
.exc__rewardInfo {opacity: .65; font-family:'Noto Sans KR', sans-serif; font-size:calc(18 * var(--vw)); font-weight:400; color:#151415; letter-spacing:-0.05em; line-height:calc(28 * var(--vw));}
.exc__rewardInfo .en {font-family:'Proxima Nova', sans-serif; letter-spacing:0em;}

/* ============================================
   Gallery
   ============================================ */
.exc__gallery {position:relative; width:100%; overflow:hidden;}

/* Gallery 1 - 3 images + 1 float */
.exc__gallery--01 {display:flex; align-items:flex-start; height:calc(1040 * var(--vw));}
.exc__galleryImg--01a {width:calc(600 * var(--vw)); height:calc(848 * var(--vw)); margin-left:calc(82 * var(--vw)); overflow:hidden;}
.exc__galleryImg--01b {position: relative; box-sizing: content-box; width:calc(476 * var(--vw)); height:calc(672 * var(--vw)); margin-left:calc(40 * var(--vw)); padding-top:calc(218 * var(--vw)); }
.exc__galleryImg--01b .deco{position: absolute;top:calc(0 * var(--vw));left:50%; transform:translateX(-50%); width:calc(215 * var(--vw))!important; height: auto!important;}
.exc__galleryImg--01b .float{position: absolute;top:calc(743 * var(--vw));left:calc(361 * var(--vw)); width:calc(176 * var(--vw))!important; height: auto!important;}
.exc__galleryImg--01c {width:calc(600 * var(--vw)); height:calc(848 * var(--vw)); margin-left:calc(40 * var(--vw)); overflow:hidden;}
.exc__galleryFloat--01 {position:absolute; width:calc(215 * var(--vw)); top:calc(1 * var(--vw)); left:calc(853 * var(--vw));}

/* Gallery 2 - 2 images + 1 float */
.exc__gallery--02 { display:flex; align-items:flex-start; height:calc(1044 * var(--vw));}
.exc__galleryImg--02a {width:calc(623 * var(--vw)); height:calc(884 * var(--vw)); margin-left:calc(346 * var(--vw)); }
.exc__galleryImg--02b {position: relative; width:calc(486 * var(--vw)); height:calc(689 * var(--vw)); margin-left:calc(120 * var(--vw)); margin-top:calc(98 * var(--vw)); }
.exc__galleryImg--02b img:last-child {position:absolute; width:calc(232 * var(--vw))!important; height: auto!important; top:calc(573 * var(--vw)); left:calc(340 * var(--vw));}

/* Gallery 3 - 2 images + 2 floats */
.exc__gallery--03 {display:flex; align-items:flex-start; height:calc(984 * var(--vw)); padding-top:calc(98 * var(--vw));}
.exc__galleryImg--03a {width:calc(486 * var(--vw)); height:calc(689 * var(--vw)); margin-left:calc(346 * var(--vw)); overflow:hidden;}
.exc__galleryImg--03b {width:calc(623 * var(--vw)); height:calc(884 * var(--vw)); margin-left:calc(120 * var(--vw)); margin-top:calc(-98 * var(--vw)); overflow:hidden;}
.exc__galleryImg--03a img:first-child {position:absolute; z-index: -1; width:calc(199 * var(--vw))!important; height: auto!important; top:calc(442 * var(--vw)); left:calc(191 * var(--vw));}
.exc__galleryImg--03a img:last-child {position:absolute; z-index: 1; width:calc(157 * var(--vw))!important; height: auto!important; top:calc(637 * var(--vw)); left:calc(233 * var(--vw));}

.exc__gallery img:not(.exc__galleryFloat) {width:100%; height:100%; object-fit:cover;}

/* Scroll FadeIn */
.jsScrollFadeInImg {opacity:0; transition:1.5s;}
.jsScrollFadeInImg.on {opacity:1;}

/* ============================================
   NB Kids Logo
   ============================================ */
.exc__logo {display:flex; align-items:center; justify-content:center; width:100%; height:calc(332 * var(--vw)); background:#7ba6b7;}
.exc__logo img {width:calc(170 * var(--vw)); height:auto;}