@charset "utf-8";

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

/* ============================================
   KV
   ============================================ */
.exc__kv {display:flex; flex-direction:column; align-items:center;}
.exc__kvImage {width:100%; overflow:hidden;}
.exc__kvImage img {width:100%; display:block;}
.exc__kvText {display:flex; flex-direction:column; align-items:center; gap:calc(16 * var(--vw-400)); padding:calc(30 * var(--vw-400)) 0 calc(49 * var(--vw-400));}
.exc__kvTitles {display:flex; flex-direction:column; align-items:center; text-align: center;}
.exc__kvTitles p {font-weight: 700; font-size: calc(18 * var(--vw-400)); letter-spacing: -0.05em; line-height: calc(28 * var(--vw-400)); margin-top: calc(16 * var(--vw-400));}
.exc__subTitle {font-family:'ITCGaramondStd', serif; font-size:calc(30 * var(--vw-400)); font-weight:400; color:#c0cc84; letter-spacing:-0.01em; line-height:1.2;}
.exc__mainTitle {font-family:'ITCGaramondStd', serif; font-size:calc(46 * var(--vw-400)); font-weight:400; line-height: calc(51 * var(--vw-400)); color:#151415; letter-spacing:-0.01em;}
.exc__mainCopy {font-family:'Noto Sans KR', sans-serif; font-size:calc(18 * var(--vw-400)); font-weight:400; color:#151415; letter-spacing:-0.04em; line-height:calc(28 * var(--vw-400)); text-align:center;}

/* ============================================
   Sorona
   ============================================ */
.exc__sorona {display:flex; flex-direction:column; align-items:center; padding:calc(40 * var(--vw-400)) calc(16 * var(--vw-400)) calc(90 * var(--vw-400));}
.exc__soronaText {display:flex; flex-direction:column; align-items:center; gap:calc(6 * var(--vw-400)); margin-bottom:calc(30 * var(--vw-400));}
.exc__soronaTitle {font-family:'ITCGaramondStd', serif; font-size:calc(36 * var(--vw-400)); font-weight:400; color:#4c7283; letter-spacing:-0.04em; line-height:1.2; text-align:center;}
.exc__soronaBold {font-family:'Noto Sans KR', sans-serif; font-size:calc(22 * var(--vw-400)); font-weight:900; color:#4c7283; letter-spacing:-0.04em; line-height:1.2; text-align:center; margin-top:calc(4 * var(--vw-400));}
.exc__soronaCopy {font-family:'Noto Sans KR', sans-serif; font-size:calc(18 * var(--vw-400)); font-weight:400; color:#52719c; letter-spacing:-0.05em; line-height:calc(28 * var(--vw-400)); text-align:center;}
.exc__tiger {width:calc(400 * var(--vw-400)); height:calc(400 * var(--vw-400)); overflow:hidden;}
.exc__tiger img {width:100%; height:100%; object-fit:cover;}

/* ============================================
   Online Only
   ============================================ */
.exc__onlineOnly {position:relative; background:#f5f5f5; padding:calc(40 * var(--vw-400)) calc(10 * var(--vw-400)) calc(30 * var(--vw-400)); margin: calc(10 * var(--vw-400)); border-radius: calc(15 * var(--vw-400));}
.exc__onlineOnly::before {content:''; position:absolute; inset:-1px; border-radius:calc(16 * var(--vw-400)); background:linear-gradient(180deg, #DFDFDF 0%, #D5D6B5 100%); z-index:-1;}
.exc__onlineHeader {text-align:center;}
.exc__onlineTitle {font-family:'ITCGaramondStd', serif; font-size:calc(28 * var(--vw-400)); 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(18 * var(--vw-400)); font-weight:400; color:#000; letter-spacing:-0.05em; line-height:calc(28 * var(--vw-400));}
.exc__onlineSubtitle.small {font-size:calc(15 * var(--vw-400)); font-weight:400; opacity:.6; margin-bottom:calc(20 * var(--vw-400));}

/* Color List - 2x2 grid */
.exc__colorList {margin-bottom:calc(20 * var(--vw-400));}
.exc__colorRow {display:flex; justify-content:center; gap:calc(20 * var(--vw-400)); margin-bottom:calc(16 * var(--vw-400));}
.exc__colorItem {cursor:pointer; text-align:center; opacity:0.5; transition:opacity 0.3s;}
.exc__colorItem.on {opacity:1;}
.exc__colorThumb {width:calc(180 * var(--vw-400)); height:calc(178 * var(--vw-400)); 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(6 * var(--vw-400)); margin-top:calc(6 * var(--vw-400));}
.exc__colorDot {display:inline-block; width:calc(18 * var(--vw-400)); height:calc(18 * var(--vw-400)); border-radius:50%;}
.exc__colorName {font-family:'Proxima Nova', sans-serif; font-size:calc(18 * var(--vw-400)); font-weight:700; color:#151415; letter-spacing:-0.02em;}

/* Color Swiper */
.exc__colorSwiper {position:relative; width:calc(364 * var(--vw-400)); margin:0 auto; overflow:hidden;border-radius: calc(20 * var(--vw-400));}
.exc__colorDetail {display:flex; justify-content:center; gap:calc(4 * var(--vw-400)); background:#fff; padding:calc(23 * var(--vw-400)) 0; }
.exc__detailItem {text-align:center;}
.exc__detailImg {width:calc(180 * var(--vw-400)); height:calc(180 * var(--vw-400)); 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 {display:flex; align-items:center; justify-content:center; gap:calc(6 * var(--vw-400)); font-family:'Proxima Nova', sans-serif; font-size:calc(18 * var(--vw-400)); font-weight:500; color:#151415; opacity: .5; letter-spacing:-0.02em;}

/* Swiper Arrows - inline with FRONT/BACK labels */
.exc__swiperPrev, .exc__swiperNext {z-index: 1;position: absolute; bottom: calc(26 * var(--vw-400));display:inline-block; vertical-align:middle; background:none; border:none; cursor:pointer; padding:0; }
.exc__swiperPrev{ left: calc(28 * var(--vw-400));}
.exc__swiperNext{ right: calc(28 * var(--vw-400));}
.exc__swiperPrev img, .exc__swiperNext img {width:calc(20 * var(--vw-400))!important; height:auto; opacity: 0.5;}

/* ============================================
   Middle Title
   ============================================ */
.exc__middleTitle {
    padding: calc(88 * var(--vw-400)) 0 calc(40 * var(--vw-400));
    font-size: calc(28 * var(--vw-400));
    font-family: 'ITCGaramondStd';
    line-height: calc(31 * var(--vw-400));
    letter-spacing: calc(-1.12 * var(--vw-400));
    text-align: center;
}
.exc__middleTitle .top {color: #C0CC84;}
.exc__middleTitle .bottom  {color: #7393BC;}

/* ============================================
   Double Reward
   ============================================ */
.exc__reward {padding:calc(80 * var(--vw-400)) calc(16 * var(--vw-400)); text-align:center;}
.exc__rewardTitle {font-family:'Proxima Nova', sans-serif; font-size:calc(24 * var(--vw-400)); font-weight:800; color:#52719c; letter-spacing:-0.04em; text-transform:uppercase; margin-bottom:calc(12 * var(--vw-400));}
.exc__rewardCopy {font-family:'Noto Sans KR', sans-serif; font-size:calc(16 * var(--vw-400)); font-weight:400; color:#151415; letter-spacing:-0.05em; line-height:calc(26 * var(--vw-400)); margin-bottom:calc(16 * var(--vw-400));}
.exc__rewardInfo {font-family:'Noto Sans KR', sans-serif; font-size:calc(16 * var(--vw-400)); font-weight:400; color:#151415; letter-spacing:-0.05em; line-height:calc(28 * var(--vw-400)); opacity: .65;}
.exc__rewardCopy .en, .exc__rewardInfo .en{
    font-family:'Proxima Nova', sans-serif; font-size:calc(18 * var(--vw-400));
}
/* ============================================
   Gallery
   ============================================ */
.exc__gallery {position:relative; width:100%; overflow:hidden;}
.exc__gallery img {width:100%; display:block; object-fit:cover;}
.exc__galleryFloat {height:auto !important; object-fit:contain !important;}

/* Gallery 1 */
.exc__gallery--01 {position: relative; display:flex; flex-direction:column; align-items:center; gap:calc(20 * var(--vw-400)); margin-bottom: calc(90 * var(--vw-400));}
.exc__gallery--01 .float{position: absolute; top: calc(1157 * var(--vw-400)); right: 0; width: calc(148 * var(--vw-400))!important;}


/* Gallery 2 */
.exc__gallery--02 {position: relative;}
.exc__gallery--02 .floatImg {position:absolute;top: calc(438 * var(--vw-400)); right: calc(12 * var(--vw-400)); width:calc(170 * var(--vw-400)); bottom:calc(30 * var(--vw-400)); right:0; z-index:1;}

/* Gallery 3 */
.exc__gallery--03 {position: relative;}
.exc__gallery--03 .floatImg {position:absolute;top: calc(406 * var(--vw-400)); left: calc(10 * var(--vw-400)); width:calc(137 * var(--vw-400)); z-index:1;}

/* 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(166 * var(--vw-400)); background:#7ba6b7;}
.exc__logo img {width:calc(64 * var(--vw-400)); height:auto;}