@charset "utf-8";

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

.imc { --vw: 0.625px; } /* 1920px 기준 */
@media screen and (min-width: 1200px) {
    .imc { --vw: 0.052083333vw; }
}
.en{
    font-family: "ProximaNova", sans-serif;
    letter-spacing: 0;
}
/* NKSUMMERTSHIRTS 기획전 (NB2024-11079) :: S */

/* common :: S */
.nkSummerTshirts { color:#151415; font-family:'Pretendard', sans-serif; letter-spacing:-0.01em;}
.nkSummerTshirts img { display:block; width:100%; height:auto;}
.nkSummerTshirts__textTitle { font-family:'ITCGaramondStd', 'Pretendard', serif;}
/* common :: E */

/* KV :: S */
.nkSummerTshirts__kv { position:relative; width:100%;}
.nkSummerTshirts__kvImage { position:relative; width:100%; height:calc(960 * var(--vw)); overflow:hidden; background:#9B8989;}
.nkSummerTshirts__kvImage img { width:100%; height:100%; object-fit:cover;}
.nkSummerTshirts__kvCopy { padding:calc(60 * var(--vw)) 0 calc(160 * var(--vw)); text-align:center;}
.nkSummerTshirts__kvTitle { width: calc(1048 * var(--vw)); margin:calc(8 * var(--vw)) auto 0;}
.nkSummerTshirts__kvDesc { margin-top:calc(20 * var(--vw)); font-size:calc(28 * var(--vw)); font-weight:400; line-height:calc(44 * var(--vw));color:#151415;}
/* KV :: E */

/* promo (멤버스 10% 혜택 배너) :: S */
.nkSummerTshirts__promo { padding:0 calc(281 * var(--vw)) calc(160 * var(--vw)); background:#fff;}
.nkSummerTshirts__promoInner { position:relative; width:100%; height:calc(432 * var(--vw));}
.nkSummerTshirts__promoImage { position:relative; width:100%; height:100%; overflow:hidden;}
.nkSummerTshirts__promoImage img { width:100%; height:100%; object-fit:cover;}
.nkSummerTshirts__promoCard { position:absolute; right:calc(73 * var(--vw)); top:calc(65 * var(--vw)); width:calc(601 * var(--vw)); display:flex; flex-direction:column;}
.nkSummerTshirts__promoTitle {letter-spacing: -0.01em; font-size:calc(32 * var(--vw)); font-weight:800; line-height:calc(48 * var(--vw)); color:#151515;}
.nkSummerTshirts__promoTitle .en{ font-size:calc(34 * var(--vw)); font-weight:800;}
.nkSummerTshirts__promoDesc { padding-bottom:calc(17 * var(--vw));margin-top:calc(6 * var(--vw)); font-size:calc(23 * var(--vw)); font-weight:400; line-height:1.6; color:#151515; letter-spacing: -0.03em;}
.nkSummerTshirts__promoMeta { margin-top:auto; padding-top:calc(14 * var(--vw)); border-top:calc(1 * var(--vw)) solid rgba(21, 21, 21, 0.5); display:flex; gap:calc(70 * var(--vw));}
.nkSummerTshirts__promoMetaLabel { font-size:calc(18 * var(--vw)); font-weight:700; color:#151515; letter-spacing: -0.05em; line-height:calc(41 * var(--vw)); }
.nkSummerTshirts__promoMetaValue { font-size:calc(18 * var(--vw)); font-weight:400; color:#151515;letter-spacing: -0.05em;line-height:calc(41 * var(--vw));}
/* promo :: E */

/* collectionGrid :: S */
.nkSummerTshirts__collectionGrid { background:rgba(226, 226, 226, 0.3);width:calc(1660 * var(--vw));  height:auto; margin: 0 auto;}
.nkSummerTshirts__collectionGrid img { display:block;}
/* collectionGrid :: E */

/* pickYourBest :: S */
.nkSummerTshirts__pick { padding:calc(160 * var(--vw)) calc(130 * var(--vw)) calc(198 * var(--vw)); background:#fff;}
.nkSummerTshirts__pickHead { text-align:center; margin-bottom:calc(60 * var(--vw));}
.nkSummerTshirts__pickTitle { font-size:calc(27 * var(--vw)); font-weight:800; line-height:calc(32 * var(--vw)); color:#000; letter-spacing: -0.03em;}
.nkSummerTshirts__pickDesc { margin-top:calc(6 * var(--vw)); font-size:calc(16 * var(--vw)); font-weight:400; line-height:1.4;letter-spacing: -0.05em; color:#000;}
.nkSummerTshirts__pickList { display:grid; grid-template-columns:repeat(4, 1fr); gap:calc(20 * var(--vw));}
.nkSummerTshirts__pickItem { display:block; color:#151415; text-decoration:none;}
.nkSummerTshirts__pickThumb { position:relative; width:100%; aspect-ratio:1/1; overflow:hidden; background:#f5f5f5;}
.nkSummerTshirts__pickThumb img { width:100%; height:100%; object-fit:cover;}
.nkSummerTshirts__pickName { margin-top:calc(15 * var(--vw)); text-align:center; font-size:calc(16 * var(--vw)); font-weight:400; line-height: calc(26 * var(--vw));letter-spacing: -0.05em; color: rgba(0, 0, 0, 0.8);}
/* pickYourBest :: E */

/* styleSection (SURF/STRIPE/RAGLAN/SPORTS) :: S */
.nkSummerTshirts__style { position:relative; width:100%;}
.nkSummerTshirts__style.--surf,
.nkSummerTshirts__style.--stripe { background:#DDE8F3;}
.nkSummerTshirts__style.--raglan,
.nkSummerTshirts__style.--sports { background:#FBF6DC;}

.nkSummerTshirts__styleInner { display:flex; align-items:stretch; gap:calc(70 * var(--vw)); padding:calc(160 * var(--vw)) calc(80 * var(--vw));}
.nkSummerTshirts__style.--reverse .nkSummerTshirts__styleInner { flex-direction:row-reverse;}

.nkSummerTshirts__styleMain { flex:0 0 calc(712 * var(--vw)); position:relative;}
.nkSummerTshirts__styleMain img { width:100%; height:auto;}

.nkSummerTshirts__styleRight { flex:1; display:flex; flex-direction:column; justify-content:center;margin-top:calc(80 * var(--vw)); }
.nkSummerTshirts__styleSubImages { display:flex; gap:0;}
.nkSummerTshirts__styleSubImage { flex:1; overflow:hidden; aspect-ratio:489 / 698;}
.nkSummerTshirts__styleSubImage img { width:100%; height:100%; object-fit:cover;}

.nkSummerTshirts__styleText { margin-top:calc(280 * var(--vw)); text-align:center;}
.nkSummerTshirts__styleTitle { font-size:calc(40 * var(--vw)); font-weight:800; line-height:calc(52 * var(--vw)); color:#000; letter-spacing:-0.02em;}
.nkSummerTshirts__styleDesc { margin-top:calc(12 * var(--vw)); font-size:calc(24 * var(--vw)); font-weight:400; line-height:calc(30 * var(--vw)); color:#000; letter-spacing:-0.05em;}
/* styleSection :: E */

/* nbKidsLogo :: S */
.nkSummerTshirts__brandLogo { display:flex; align-items:center; justify-content:center; height:calc(332 * var(--vw)); background:#7BA6B7;}
.nkSummerTshirts__brandLogoImg { width:calc(170 * var(--vw)); height:auto;}
/* nbKidsLogo :: E */

/* effect :: S */

/* scrollFadeUp - 컬렉션 한판 (영역2) :: 스크롤시 아래에서 위로 등장 */
.jsScrollFadeUp { opacity:0; transform:translateY(80px); transition:opacity 1s ease-out, transform 1s ease-out;}
.jsScrollFadeUp.on { opacity:1; transform:translateY(0);}

/* hoverZoom - PICK YOUR BEST (영역3) :: 호버 시 이미지 확대 */
.nkSummerTshirts__pickThumb { cursor:pointer;}
.nkSummerTshirts__pickThumb img { transition:transform 0.4s ease;}
.nkSummerTshirts__pickItem:hover .nkSummerTshirts__pickThumb img { transform:scale(1.08);}

/* scrollParallax - SURF/STRIPE/RAGLAN/SPORTS (영역4~7) :: 스크롤 진행 동안 텍스트는 빠르게, 이미지(메인+서브)는 천천히 이동 */
.jsScrollParallaxMotionSection { overflow:hidden;}
.jsScrollParallaxImg, .jsScrollParallaxText { will-change:transform;}

/* effect :: E */

/* NKSUMMERTSHIRTS 기획전 :: E */


/*
 * motionTest 템플릿 잔재 (NB2024-11079에서 사용 안 함) :: S
 * 효과 적용 시 일부 패턴(jsScrollFadeInImg, scrollParallaxMotion, hoverZoom 등)을 재정의하여 사용
 */
/*
.imc__videoMask {position:relative;}
.videoMask__blur{position:absolute; top:0; width:100%; height:100%; z-index: 1; transition:0.5s; backdrop-filter: blur(0px);}

.imc__videoMask .mainVideo__muteBtn{position:absolute; z-index: 2; bottom:calc(32 * var(--vw)); left:calc(32 * var(--vw)); width: calc(28 * var(--vw)); height: calc(28 * var(--vw)); background-size: calc(28 * var(--vw)); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28' fill='none'%3E%3Cpath d='M26.9078 11.3637L20.8074 17.4641' stroke='white' stroke-width='1.52509' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M26.9078 17.4641L20.8074 11.3637' stroke='white' stroke-width='1.52509' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");}

.wrap .header {transition:0.3s; display: none;}
.wrap .header.on {position:absolute; top: -110px;}
.container.npb {padding-top:0; position:absolute;width:100%; z-index: 60;}

.tabBar__Container{background:#151415; display: flex; justify-content: space-between; position:sticky; top:106px; z-index: 11;}
.tabBar__Container .tabBar__title {width:33.33%; height:50px; color:#8a8a8a; font-size: 16px; font-weight: bolder; display: flex; transition:0.5s; justify-content: center; align-items: center;}

.motionTest__article01 .motionTest__parallaxContainer{margin:calc(180 * var(--vw)) 0; display: flex; padding:0 calc(88 * var(--vw)) 0 calc(176 * var(--vw)); justify-content: space-between;}
.motionTest__article01 .motionTest__parallaxContainer .motionTest__parallax01{width:calc( 800 * var(--vw)); height: fit-content;}
.motionTest__article01 .motionTest__parallaxContainer .motionTest__parallax02{width:calc( 540 * var(--vw)); position:relative; top:300px;}

.motionTest__article01 .motionTest__fadeInContainer {position:relative; padding-top:calc(200 * var(--vw));}
.motionTest__article01 .motionTest__fadeInContainer .motionTest__fadeIn01  { width:calc(640 * var(--vw)); left:50%; transform:translateX(-50%); position:relative;}
.motionTest__article01 .motionTest__fadeInContainer .motionTest__fadeIn02  { width:100%; display: flex; justify-content: flex-end; padding-right:calc(43 * var(--vw)); margin-top: calc(160 * var(--vw));}
.motionTest__article01 .motionTest__fadeInContainer .motionTest__fadeIn02 img  { width:calc(940 * var(--vw));}
.jsScrollFadeInImg {opacity: 0; transition:1.5s;}
.jsScrollFadeInImg.on {opacity: 1; }

.motionTest__article01 .imc__doubleMotionContainer {position:relative; margin:0 calc(207 * var(--vw)) calc(180 * var(--vw)) calc(336 * var(--vw));}
.motionTest__article01 .imc__doubleMotionContainer .imc__hoverZoomContainer{width:calc(640 * var(--vw)); height: calc(800 * var(--vw)); overflow: hidden;}
.motionTest__article01 .imc__doubleMotionContainer .imc__hoverZoomContainer img {transition:0.3s; cursor: pointer;}
.motionTest__article01 .imc__doubleMotionContainer .imc__hoverZoomContainer img:hover {transform:scale(1.1);}

.imc__floatUpDownContainer {position:absolute; width:calc(560 * var(--vw)); right:0; top:50%; transform:translateY(-50%);}
.imc__floatUpDownContainer .imc__floatUpDownImg{animation: floatUpDown 0.6s ease-out infinite alternate; transform:translateY(0px);}
.imc__floatUpDownContainer p {text-align: center; font-size: calc(30 * var(--vw)); font-weight: 900; line-height: calc(44 * var(--vw));}
@keyframes floatUpDown {
    0% {transform:translateY(20px);}
    100%{transform:translateY(0px);}
}

.motionTest__scaleContainer {display: flex; justify-content: space-between; align-items: flex-start; margin-bottom:calc(180 * var(--vw))}
.motionTest__scaleContainer [class*="motionTest__scale"] {width:calc(800 * var(--vw)); overflow: hidden; transition:transform 0.1s ease-out; transform:scale(0.5);}
.motionTest__scaleContainer img{object-fit:contain; transition:transform 0.1s ease-out; transform:scale(1.5);}


.motionTest__article02 {position:relative;}
.motionTest__article02 .motionTest__playVideoContainer {position:absolute; top:calc(208 * var(--vw)); width:100%; padding:0 calc(75 * var(--vw)); display: flex; justify-content: space-between }
.motionTest__article02 .motionTest__playVideoContainer .motionTest__video{width:calc(420 * var(--vw));}

.motionTest__article03 {background:linear-gradient(180deg, #72a7ce 6%, #fff 55%, #fff 99%); padding-top:calc(150 * var(--vw));}

.motionTest__article03 .imc__singleSwiper{width:calc(640 * var(--vw)); margin:0 auto;}
.motionTest__article03 .imc__singleSwiper .swiper-pagination-bullets {display: flex; justify-content: center; position:absolute; bottom:calc(30 * var(--vw)); z-index: 1;}
.motionTest__article03 .imc__singleSwiper .swiper-pagination-bullet {width:calc(16 * var(--vw)); height:calc(16 * var(--vw)); margin:0 calc(5 * var(--vw)); border-radius: 50%; background:#fff; opacity: 0.3;}
.motionTest__article03 .imc__singleSwiper .swiper-pagination-bullet-active {opacity: 1;}

.imc__roll{margin-top:calc(106.5 * var(--vw));}
.imc__roll .swiper-wrapper{align-items: center; transition-timing-function: linear}
.imc__roll .swiper-slide {width:calc(540 * var(--vw));}

.imc__scrollSwiper {margin-top:calc(260 * var(--vw));}
.imc__scrollSwiper h2{font-family: 'ITCGaramondStd', sans-serif; padding-bottom: calc(60 * var(--vw)); text-align: center; font-size: calc(60 * var(--vw)); letter-spacing: -0.01em; line-height: calc(68 * var(--vw));}
.imc__scrollSwiper .swiper-wrapper{margin-bottom:calc(80 * var(--vw)); margin-left:calc(55 * var(--vw)); }
.imc__scrollSwiper .swiper-slide{width:calc(480 * var(--vw));}
.imc__scrollSwiper.swiper-container-horizontal>.swiper-scrollbar {position:relative; width: calc(1810 * var(--vw)); margin:0 calc(55 * var(--vw));  left:0; bottom:0; height: calc(4 * var(--vw)); background:#e3e5e6; border-radius: 0; }
.imc__scrollSwiper.swiper-container-horizontal>.swiper-scrollbar .swiper-scrollbar-drag{background:#151415;  border-radius: 0;}
*/
/* motionTest 템플릿 잔재 :: E */