@charset "utf-8";

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

.imc {
    --vw: 0.625px; /* 1920px 기준 */
    --font-kr: 'Noto Sans KR', sans-serif;
    --font-proxima: 'ProximaNova', sans-serif;
    --font-garamond: 'ITCGaramondStd', serif;
    --nksf-ink: #151415;
    --nksf-lime: #dbdf70;
    --nksf-sub: #999;
    --nksf-off: #8f959b;
    --nksf-offbg: #e8e8e8;
    --nksf-rowbg: #e6e6e6;
    --nksf-rowbg2: #bdbdbd;
    --nksf-kvbg: #f7f7f7;
    --nksf-tilebg: #f5f5f5;
}
@media screen and (min-width: 1200px) {
    .imc { --vw: 0.052083333vw; }
}

.imc__content {background:#fff; color:var(--nksf-ink); font-family:var(--font-kr);}
.imc__content img {display:block; width:100%; height:auto;}

/* KV :: S */
.nksf__kv {}
/* KV :: E */

/* 리드 :: S */
.nksf__lead {width:calc(1024 * var(--vw)); margin:0 auto; padding-top:calc(60 * var(--vw)); text-align:center;}
.nksf__leadSub {font-size:calc(30 * var(--vw)); font-weight:700; line-height:1.1; letter-spacing:calc(-0.3 * var(--vw));}
.nksf__leadTitle {margin-top:calc(20 * var(--vw)); font-family:var(--font-garamond); font-size:calc(90 * var(--vw)); font-weight:400; line-height:1.1; letter-spacing:calc(-0.9 * var(--vw)); text-transform:uppercase;}
.nksf__leadText {margin-top:calc(20 * var(--vw)); font-size:calc(22 * var(--vw)); font-weight:400; line-height:calc(36 * var(--vw)); letter-spacing:calc(-1.1 * var(--vw));}
.nksf__leadText strong {font-weight:700;}
/* 리드 :: E */

/* 섹션 헤더 :: S */
.nksf__section {scroll-margin-top:106px;}
.nksf__head {display:flex; flex-direction:column; align-items:center; gap:calc(10 * var(--vw)); margin-bottom:calc(60 * var(--vw)); text-align:center;}
.nksf__headSub {font-size:calc(18 * var(--vw)); font-weight:700; line-height:calc(28 * var(--vw)); letter-spacing:calc(-0.9 * var(--vw)); color:var(--nksf-sub);}
.nksf__headTitle {font-size:calc(40 * var(--vw)); font-weight:900; line-height:1.4; letter-spacing:calc(-2 * var(--vw));}

.nksf__tab {display:flex; justify-content:center; gap:calc(10 * var(--vw)); margin-top:calc(30 * var(--vw)); position:sticky; top:106px; }
.nksf__tabBtn {display:flex; align-items:center; justify-content:center; height:calc(40 * var(--vw)); padding:calc(5 * var(--vw)) calc(25 * var(--vw)); border-radius:calc(20 * var(--vw)); background:var(--nksf-offbg); color:var(--nksf-off); font-size:calc(16 * var(--vw)); font-weight:700; line-height:calc(26 * var(--vw)); letter-spacing:calc(-0.8 * var(--vw)); transition:0.3s;}
.nksf__tabBtn.on {padding:calc(5 * var(--vw)) calc(26 * var(--vw)); background:var(--nksf-ink); color:#fff;}
/* 섹션 헤더 :: E */

/* 배지 :: S */
/* 배지 색은 행 단위. 01 라임 / 02 하늘 / 03 회색 (시안 전수 대조) */
.nksf__badge {display:inline-flex; align-items:center; justify-content:center; height:calc(44 * var(--vw)); padding:0 calc(24 * var(--vw)); border-radius:calc(100 * var(--vw)); background:var(--nksf-badgebg, var(--nksf-lime)); font-family:var(--font-proxima); font-size:calc(20 * var(--vw)); font-weight:800; line-height:calc(44 * var(--vw)); color:var(--nksf-ink); white-space:nowrap;}
.nksf__badge--wide {font-family:var(--font-kr); font-size:calc(18 * var(--vw)); font-weight:900;}
/* 배지 :: E */

/* 버튼 :: S */
.nksf__btn {display:inline-flex; align-items:center; justify-content:center; width:calc(140 * var(--vw)); height:calc(45 * var(--vw)); padding:0 calc(35 * var(--vw)); border-radius:calc(5 * var(--vw)); background:var(--nksf-ink); color:#fff; font-size:calc(16 * var(--vw)); font-weight:400; letter-spacing:calc(-0.8 * var(--vw)); white-space:nowrap; transition:0.3s; box-sizing:border-box;}
.nksf__btn:hover {color:#fff;}
/* 버튼 :: E */

/* 나이 유형 :: S */
.nksf__section--age{margin: calc(160 * var(--vw)) 0;}
.nksf__ageRow {display:flex; gap:calc(28 * var(--vw)); padding:calc(45 * var(--vw)) 0 calc(46 * var(--vw)) calc(36 * var(--vw)); background:var(--nksf-rowbg) url("https://image.nbkorea.com/NBRB_PC/event/imc/NKSHOEFUNCTION/age_bg01.jpg") no-repeat center / cover;}
.nksf__ageRow--02 {background-color:var(--nksf-rowbg2); background-image:url("https://image.nbkorea.com/NBRB_PC/event/imc/NKSHOEFUNCTION/age_bg02.jpg");}
.nksf__ageRow--01 {--nksf-badgebg:#dbdf70;}
.nksf__ageRow--02 {--nksf-badgebg:#83d8e6;}
.nksf__ageRow--03 {--nksf-badgebg:#cfcfcf;}
.nksf__ageFixed {flex:none; width:calc(500 * var(--vw));}
.nksf__ageSwiper {flex:1 1 auto; min-width:0; overflow:hidden;}
.nksf__ageSwiper .swiper-wrapper {align-items:stretch;}

.nksf__ageCard {display: flex; flex-direction: column; justify-content: center; align-items: center; width:calc(500 * var(--vw)); height:calc(613.467 * var(--vw)); border-radius:calc(20 * var(--vw)); background:#fff; box-sizing:border-box; position:relative; overflow:hidden; text-align:center;}
.nksf__ageCard--intro{display: block;}
.nksf__ageCard--intro img {width:100%; height:100%; object-fit:cover;}

.nksf__ageText {margin-top:calc(34 * var(--vw)); padding:0 calc(2 * var(--vw)); font-size:calc(22 * var(--vw)); font-weight:400; line-height:calc(36 * var(--vw)); letter-spacing:calc(-1.1 * var(--vw));}
.nksf__ageText.small {margin-top:calc(27 * var(--vw));}
.nksf__ageText p + p {margin-top:calc(36 * var(--vw));}
.nksf__ageText strong {font-weight:700;}
.nksf__ageText em {font-family:var(--font-proxima); font-style:normal; font-weight: 700;}

.nksf__pointTitle {margin-top:calc(30 * var(--vw)); font-size:calc(22 * var(--vw)); font-weight:900; line-height:calc(36 * var(--vw)); letter-spacing:calc(-1.1 * var(--vw));text-align: left;}
/*.nksf__pointTitle::before {content:''; display:inline-block; width:calc(22 * var(--vw)); height:calc(22 * var(--vw)); margin-right:calc(6 * var(--vw)); background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22' fill='none'%3E%3Ccircle cx='9.5' cy='9.5' r='6.7' stroke='%23151415' stroke-width='1.6'/%3E%3Cpath d='M14.5 14.5L19 19' stroke='%23151415' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center/contain; vertical-align:calc(-3 * var(--vw));}*/
.nksf__pointList {display:inline-block; margin-top:calc(10 * var(--vw)); text-align:left; font-size:calc(22 * var(--vw)); line-height:calc(34 * var(--vw)); letter-spacing:calc(-1.1 * var(--vw));}
.nksf__pointList li {display:flex; gap:calc(6 * var(--vw));}
.nksf__pointList i {flex:none; font-style:normal;}
.nksf__pointList em {font-size:calc(16 * var(--vw)); font-style:normal; color:var(--nksf-sub);}

.nksf__ageCard--apma .nksf__apmaLogo {width:calc(152 * var(--vw)); margin:calc(30 * var(--vw)) auto 0;}
.nksf__apmaText {margin-top:calc(30 * var(--vw)); font-size:calc(22 * var(--vw)); line-height:calc(36 * var(--vw)); letter-spacing:calc(-1.1 * var(--vw));}
.nksf__apmaText em {font-family:var(--font-proxima); font-size:calc(24 * var(--vw)); font-style:normal;}

.nksf__ageCard--prd .nksf__prdImg {width:calc(305 * var(--vw)); height:calc(337 * var(--vw)); object-fit:contain; margin:calc(34 * var(--vw)) auto 0;} /* 시안: 제품 이미지 영역 305x337 고정 */
.nksf__ageCard--prd .nksf__btn {margin-top:calc(26 * var(--vw)) }
/* 나이 유형 :: E */

/* 신발의 기능 :: S */
.nksf__funcGroup + .nksf__funcGroup {margin-top:calc(150 * var(--vw));}
.nksf__funcLabel {width:calc(496 * var(--vw)); margin:0 auto; font-family:var(--font-proxima); font-size:calc(36 * var(--vw)); font-weight:900; line-height:calc(60 * var(--vw)); text-align:center;}
.nksf__funcLabel em {font-family:var(--font-kr); font-style:normal; font-weight: 900;}

.nksf__spectrum {position:relative; display:flex; align-items:center; justify-content:space-between; height:calc(58 * var(--vw)); margin:calc(40 * var(--vw)) auto 0; padding:0 calc(25 * var(--vw)); box-sizing:border-box; background:linear-gradient(90deg, #E6E6E6 0%, #cfcfcf 50%, #90969C 100%);}
.nksf__spectrum::before, .nksf__spectrum::after {content:''; position:absolute; top:50%; width:calc(60 * var(--vw)); height:calc(103 * var(--vw)); transform:translateY(-50%);}
.nksf__spectrum::before {left:calc(-60 * var(--vw)); background:#E6E6E6; clip-path:polygon(100% 0, 100% 100%, 0 50%);}
.nksf__spectrum::after {right:calc(-60 * var(--vw)); background:#90969C; clip-path:polygon(0 0, 0 100%, 100% 50%);}
.nksf__funcGroup--01 .nksf__spectrum {width:calc(1639 * var(--vw));}
.nksf__funcGroup--02 .nksf__spectrum {width:calc(1764 * var(--vw));}
.nksf__spectrumLeft,
.nksf__spectrumRight {position:relative; z-index:1; font-family:var(--font-proxima); font-size:calc(32 * var(--vw)); font-weight:300; line-height:calc(26 * var(--vw));}
.nksf__spectrumRight {color:#fff;}
.nksf__spectrum.preschool {background:linear-gradient(90deg, #AEB2B7 0%, #3D3F41 100%);}
.nksf__spectrum.preschool::after{background: #3D3F41;}
.nksf__spectrum.preschool::before{background: #AEB2B7;}

.nksf__funcList {display:flex; justify-content:space-between; margin:calc(66 * var(--vw)) auto 0;}
.nksf__funcGroup--01 .nksf__funcList {width:calc(1641 * var(--vw));}
.nksf__funcGroup--02 .nksf__funcList {width:calc(1838 * var(--vw));}
.nksf__funcCard {display:flex; flex-direction:column; align-items:center; border:1px solid rgba(0, 0, 0, 0.4); border-radius:calc(20 * var(--vw)); background:#fff; box-sizing:border-box; text-align:center; opacity:0; transform:translateX(calc(-30 * var(--vw))); transition:opacity 0.5s ease, transform 0.5s ease;}
.nksf__funcCard.on {opacity:1; transform:translateX(0);}
.nksf__funcGroup--01 .nksf__funcCard {width:calc(384 * var(--vw)); padding:calc(40 * var(--vw)) calc(0 * var(--vw)) calc(30 * var(--vw));}
.nksf__funcGroup--02 .nksf__funcCard {width:calc(356 * var(--vw)); height:calc(573 * var(--vw)); padding:calc(40 * var(--vw)) calc(0 * var(--vw)) calc(30 * var(--vw));}

.nksf__funcName {font-family:var(--font-proxima); font-size:calc(28 * var(--vw)); font-weight:900; line-height:calc(30 * var(--vw)); text-transform:uppercase;}
.nksf__funcSum {margin-top:calc(14 * var(--vw)); font-size:calc(20 * var(--vw)); font-weight:900; line-height:calc(30 * var(--vw)); letter-spacing:calc(-1 * var(--vw));}
.nksf__funcSum strong {font-family:var(--font-proxima); font-size:calc(22 * var(--vw)); font-weight:800;}
.nksf__funcDesc {margin-top:calc(16 * var(--vw)); font-size:calc(14 * var(--vw)); font-weight:400; line-height:calc(26 * var(--vw)); letter-spacing:calc(-0.98 * var(--vw));}
.nksf__funcDesc em {font-family:var(--font-proxima); font-size:calc(16 * var(--vw)); font-style:normal;} /* 시안: 본문 속 영문 16px */
.nksf__funcImg {width:calc(332 * var(--vw))!important; margin:calc(30 * var(--vw)) auto;}
.nksf__funcCard .nksf__btn {margin-top:auto;}

.nksf__iconList {display:flex; justify-content:space-between; margin:calc(30 * var(--vw)) auto 0;}
.nksf__funcGroup--01 .nksf__iconList {width:calc(1641 * var(--vw));}
.nksf__funcGroup--02 .nksf__iconList {width:calc(1838 * var(--vw));}
/* 아이콘 묶음: 카드 1칸 또는 2칸 폭을 차지하고, 타일 쌍은 묶음 중앙 정렬 */
.nksf__iconGroup {display:flex; justify-content:center; flex:none;}
.nksf__iconGroup:not(:empty) {border-top:calc(3 * var(--vw)) solid rgba(0, 0, 0, 0.2); padding-top:calc(30 * var(--vw));}
.nksf__funcGroup--01 .nksf__iconGroup {gap:calc(31 * var(--vw));}
.nksf__funcGroup--01 .nksf__iconGroup--span1 {width:calc(384 * var(--vw));}
.nksf__funcGroup--01 .nksf__iconGroup--span2 {width:calc(803 * var(--vw));}
.nksf__funcGroup--02 .nksf__iconGroup {gap:calc(27 * var(--vw));}
.nksf__funcGroup--02 .nksf__iconGroup--span1 {width:calc(346 * var(--vw));}
.nksf__funcGroup--02 .nksf__iconGroup--span2 {width:calc(719 * var(--vw));}

.nksf__iconTile {position:relative; width:calc(279 * var(--vw)); height:calc(252 * var(--vw)); border-radius:calc(20 * var(--vw)); background:var(--nksf-tilebg); overflow:hidden;}
.nksf__iconTile img {width:100%; height:100%; object-fit:cover;}
/*.nksf__iconCaption {position:absolute; left:0; right:0; bottom:0; padding:calc(10 * var(--vw)); background:rgba(0, 0, 0, 0.4); color:#fff; font-size:calc(14 * var(--vw)); font-weight:700; line-height:calc(26 * var(--vw)); letter-spacing:calc(-0.7 * var(--vw)); text-align:center;}*/
/*.nksf__iconCaption i {margin-right:calc(4 * var(--vw)); font-family:var(--font-proxima); font-size:calc(16 * var(--vw)); font-style:normal; font-weight:700; letter-spacing:calc(-0.8 * var(--vw));}*/
/*.nksf__iconCaption strong {font-family:var(--font-proxima); font-size:calc(16 * var(--vw)); font-weight:700; letter-spacing:calc(-0.8 * var(--vw));}*/
/* 신발의 기능 :: E */

/* 푸터 :: S */
.nksf__footer {padding:calc(220 * var(--vw)) 0 calc(65 * var(--vw)); text-align:center;}
.nksf__footer img {width:calc(128 * var(--vw)); margin:0 auto;}
/* 푸터 :: E */