@charset "utf-8";

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

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

.imc { color: #151415; }
.imc img { display: block; width: 100%; }

/* 영상(유튜브) 공통 : 밴드 16:9 (영상 원본 16:9와 일치) */
.imc__video {
    position: relative;
    width: 100%;
    overflow: hidden;
}
.imc__video > iframe {
    position: absolute;
    top: 50%;
    left: 50%;
    /* 살짝 확대해 가장자리(하단 레터박스/서브픽셀 선)를 overflow:hidden으로 클립 */
    transform: translate(-50%, -50%) scale(1.007);
    width: 100%;
    height: 100%;
    border: 0;
    background: #000;
}
.imc__video--full { aspect-ratio: 16 / 9; }              /* 영상1 : 풀블리드 16:9 */
.imc__video--inner {                                     /* 영상2 : 1810 폭 16:9 */
    width: calc(1810 * var(--vw));
    aspect-ratio: 16 / 9;
    margin: 0 auto;
}

/* ===== 인트로 : 히어로 + 타이틀 + 슈즈리스트 (Frame257) ===== */
.imc__intro {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(60 * var(--vw));
    padding-top: calc(60 * var(--vw));   /* 영상1 ↔ 히어로 간격 */
    padding-bottom: calc(140 * var(--vw));
}
.imc__intro-visual {
    width: calc(1810 * var(--vw));
    height: calc(905 * var(--vw));
    overflow: hidden;
    background: #e9e9e9;
}
.imc__intro-visual img { height: 100%; object-fit: cover; }

.imc__intro-tit {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(20 * var(--vw));
    width: calc(800 * var(--vw));
    text-align: center;
}
.imc__intro-titGroup {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(16 * var(--vw));
}
.imc__intro-sub {
    font-family: 'ITCGaramondStd', serif;
    font-size: calc(40 * var(--vw));
    line-height: 1.2;
    letter-spacing: -0.01em;
    background: linear-gradient(94.33deg, #f1e899 9.02%, #9b86bd 42.78%, #6e5b98 69.47%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.imc__intro-h1 {
    font-family: 'ITCGaramondStd', serif;
    font-size: calc(90 * var(--vw));
    line-height: 1.1;
    letter-spacing: -0.01em;
}
.imc__intro-copy {
    font-family: 'Noto Sans KR', sans-serif;
    font-size: calc(28 * var(--vw));
    line-height: calc(44 * var(--vw));
    letter-spacing: -0.05em;
}

.imc__shoes {
    display: flex;
    justify-content: center;
    gap: calc(30 * var(--vw));
    width: calc(1318 * var(--vw));
}
.imc__shoes-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(16 * var(--vw));
    width: calc(307 * var(--vw));
}
.imc__shoes-thumb {
    width: calc(275 * var(--vw));
    height: calc(185 * var(--vw));
}
.imc__shoes-thumb img { height: 100%; object-fit: cover; }
.imc__shoes-txt {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(4 * var(--vw));
    text-align: center;
}
.imc__shoes-gender {
    font-family: 'ProximaNova', sans-serif;
    font-weight: 700;
    font-size: calc(18 * var(--vw));
    line-height: 1.1;
    letter-spacing: -0.01em;
    color: #737273;
}
.imc__shoes-code {
    font-family: 'ProximaNova', sans-serif;
    font-weight: 700;
    font-size: calc(28 * var(--vw));
    line-height: calc(44 * var(--vw));
}

/* ===== 런허브 트라이얼 카드 (Frame310) ===== */
.imc__runhub {
    display: flex;
    justify-content: center;
}
.imc__runhub-card {
    display: flex;
    align-items: center;
    gap: calc(60 * var(--vw));
    width: calc(1040 * var(--vw));
    padding: calc(60 * var(--vw));
    background: #f5f5f5;
    border-radius: calc(20 * var(--vw));
}
.imc__runhub-logo {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: calc(28 * var(--vw));
    flex-shrink: 0;
    width: calc(420 * var(--vw));
    height: calc(280 * var(--vw));
    background: #737b82;
    border-radius: calc(20 * var(--vw));
    overflow: hidden;
}
.imc__runhub-logo1 { width: calc(319 * var(--vw))!important; }
.imc__runhub-logo2 { width: calc(164 * var(--vw))!important; }
.imc__runhub-info {
    display: flex;
    flex-direction: column;
    gap: calc(20 * var(--vw));
    width: calc(440 * var(--vw));
}
.imc__runhub-tit {
    display: flex;
    flex-direction: column;
    gap: calc(8 * var(--vw));
}
.imc__runhub-eyebrow {
    font-family: 'ProximaNova', sans-serif;
    font-weight: 700;
    font-size: calc(20 * var(--vw));
    line-height: calc(24 * var(--vw));
    color: #737b82;
}
.imc__runhub-name {
    font-family: 'ProximaNova', sans-serif;
    font-weight: 800;
    font-size: calc(34 * var(--vw));
    line-height: 1;
    color: #1e1e1e;
}
.imc__runhub-desc {
    font-family: 'Noto Sans KR', sans-serif;
    font-size: calc(18 * var(--vw));
    line-height: calc(28 * var(--vw));
    letter-spacing: -0.05em;
    color: #1e1e1e;
}
.imc__runhub-desc span {
    font-family: 'ProximaNova', sans-serif;
    font-size: calc(20 * var(--vw));
}
.imc__runhub-meta {
    display: flex;
    flex-direction: column;
    gap: calc(16 * var(--vw));
    margin-top: calc(20 * var(--vw));
    padding-top: calc(20 * var(--vw));
    border-top: 1px solid #b9b9b9;
}
.imc__runhub-row {
    display: flex;
    gap: calc(20 * var(--vw));
}
.imc__runhub-row dt {
    flex-shrink: 0;
    width: calc(99 * var(--vw));
    font-family: 'Noto Sans KR', sans-serif;
    font-weight: 700;
    font-size: calc(18 * var(--vw));
    line-height: calc(28 * var(--vw));
    letter-spacing: -0.05em;
    color: #1e1e1e;
    white-space: nowrap;
}
.imc__runhub-row dd {
    font-family: 'Noto Sans KR', sans-serif;
    font-size: calc(18 * var(--vw));
    line-height: calc(28 * var(--vw));
    letter-spacing: -0.05em;
    color: #1e1e1e;
}
.imc__runhub-row dd .en {
    font-family: 'ProximaNova', sans-serif;
    font-size: calc(20 * var(--vw));
}

/* 영상2 : 런허브와의 간격 */
.imc__video--inner { margin: calc(160 * var(--vw)) auto 0; }

/* ===== 페이퍼 2컷 (Frame297) ===== */
.imc__paper {
    display: flex;
    justify-content: center;
    padding: calc(160 * var(--vw)) 0 calc(40 * var(--vw));
}
.imc__paper img { width: calc(800 * var(--vw)); }

/* ===== 제품 정보 : 이미지 + 스펙 (IMC_PC_Featured_3) ===== */
.imc__spec {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: calc(40 * var(--vw));
    padding: calc(100 * var(--vw)) 0 calc(140 * var(--vw));
    background: #fff;
}
.imc__spec-img { width: calc(742 * var(--vw)); }
.imc__spec-info {
    display: flex;
    flex-direction: column;
    gap: calc(25 * var(--vw));
    padding-right: calc(60 * var(--vw));
}
.imc__spec-name {
    font-family: 'ITCGaramondStd', serif;
    font-size: calc(88 * var(--vw));
    line-height: calc(100 * var(--vw));
    letter-spacing: -0.01em;
}
.imc__spec-detail {
    display: flex;
    flex-direction: column;
    gap: calc(15 * var(--vw));
}
.imc__spec-tech {
    display: flex;
    flex-direction: column;
}
.imc__spec-gauge {
    display: flex;
    align-items: center;
    gap: calc(20 * var(--vw));
}
.imc__spec-label {
    font-family: 'Noto Sans KR', sans-serif;
    font-weight: 700;
    font-size: calc(20 * var(--vw));
    line-height: calc(38 * var(--vw));
    letter-spacing: -0.05em;
}
.imc__spec-range {
    display: flex;
    gap: calc(6 * var(--vw));
}
.imc__spec-range i {
    box-sizing: border-box;
    width: calc(60 * var(--vw));
    height: calc(20 * var(--vw));
    border: 2px solid #151415;
    border-radius: calc(20 * var(--vw));
}
.imc__spec-range i.on { background: #151415; }
.imc__spec-line {
    width: calc(400 * var(--vw));
    height: calc(2 * var(--vw));
    background: #979797;
}
.imc__spec-meta {
    display: flex;
    flex-direction: column;
    font-family: 'ProximaNova', sans-serif;
    font-weight: 700;
    font-size: calc(18 * var(--vw));
    line-height: calc(28 * var(--vw));
}
.imc__spec-meta b {
    font-family: 'Noto Sans KR', sans-serif;
    font-weight: 700;
    font-size: calc(16 * var(--vw));
}
.imc__spec-meta em {
    font-style: normal;
    font-size: calc(16 * var(--vw));
    letter-spacing: -0.04em;
    color: #a1a1a1;
    font-weight: bold;
}

/* ===== 테크놀로지 (분해도 + USP 3컬럼) ===== */
.imc__tech {
    position: relative;
    background-color: #b5b5b5;
    background-repeat: no-repeat;
    background-position: center top;
    background-size: cover;   /* 배경 이미지 경로는 JSP 인라인 스타일(${SYSTEM_IMAGE_URL})로 지정 */
    padding-bottom: calc(160 * var(--vw));
    color: #fff;
    text-align: center;
}
.imc__tech-head { padding-top: calc(120 * var(--vw)); }
.imc__tech-eyebrow {
    font-family: 'ITCGaramondStd', serif;
    font-size: calc(36 * var(--vw));
    line-height: 1.2;
    letter-spacing: -0.01em;
}
.imc__tech-title {
    font-family: 'ITCGaramondStd', serif;
    font-size: calc(60 * var(--vw));
    line-height: 1.1;
    letter-spacing: -0.01em;
}
.imc__tech-explode {
    width: calc(1204 * var(--vw));
    margin: calc(-50 * var(--vw)) auto 0;
}
.imc__tech-usp {
    display: flex;
    justify-content: center;
    gap: calc(30 * var(--vw));
    padding: 0 calc(90 * var(--vw));
    text-align: left;
    margin-top: calc(-40 * var(--vw));
}
.imc__tech-col {
    display: flex;
    flex-direction: column;
    gap: calc(40 * var(--vw));
    width: calc(560 * var(--vw));
}
.imc__tech-photo {
    width: 100%;
    height: calc(560 * var(--vw));
    overflow: hidden;
    background: #b7b7b7;
}
.imc__tech-photo img { height: 100%; object-fit: cover; }
.imc__tech-txt {
    display: flex;
    flex-direction: column;
    gap: calc(30 * var(--vw));
}
.imc__tech-titBlock {
    display: flex;
    flex-direction: column;
    gap: calc(8 * var(--vw));
}
.imc__tech-sub {
    font-family: 'ProximaNova', sans-serif;
    font-weight: 700;
    font-size: calc(24 * var(--vw));
    line-height: calc(28 * var(--vw));
    text-transform: uppercase;
    color: #6e5b98;
}
.imc__tech-h3 {
    font-family: 'Noto Sans KR', sans-serif;
    font-weight: 900;
    font-size: calc(40 * var(--vw));
    line-height: 1.4;
    letter-spacing: -0.05em;
    color: #151415;
}
.imc__tech-desc {
    font-family: 'Noto Sans KR', sans-serif;
    font-size: calc(24 * var(--vw));
    line-height: calc(38 * var(--vw));
    letter-spacing: -0.05em;
    color: #151415;
}

/* ===== 환경 사진 ===== */
.imc__envA {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: calc(160 * var(--vw));
    padding: calc(160 * var(--vw)) 0;
}
.imc__envA-l { width: calc(760 * var(--vw)); }
.imc__envA-r {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(34 * var(--vw));
    width: calc(600 * var(--vw));
}
.imc__envA-caption {
    font-family: 'ITCGaramondStd', serif;
    font-size: calc(32 * var(--vw));
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: #737b82;
    text-align: center;
}
.imc__envB {
    display: flex;
    justify-content: center;
    padding-bottom: calc(160 * var(--vw));
}
.imc__envB img { width: calc(905 * var(--vw)); }
.imc__envC img { width: 100%; }

/* ===== 스펙 테이블 (IMC_Featured_3) ===== */
.imc__table {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: calc(80 * var(--vw));
    padding-top: calc(120 * var(--vw));
}
.imc__table-img { width: calc(680 * var(--vw)); }
.imc__table-img img { mix-blend-mode: darken; }
.imc__table-body {
    display: flex;
    flex-direction: column;
    gap: calc(60 * var(--vw));
    width: calc(478 * var(--vw));
}
.imc__table-name {
    font-family: 'ITCGaramondStd', serif;
    font-size: calc(76 * var(--vw));
    line-height: calc(68 * var(--vw));
    letter-spacing: -0.01em;
}
.imc__table-inner {
    display: flex;
    flex-direction: column;
    gap: calc(50 * var(--vw));
}
.imc__table-row {
    display: flex;
    gap: calc(20 * var(--vw));
    margin-bottom: calc(20 * var(--vw));
    padding-bottom: calc(20 * var(--vw));
    border-bottom: 1px solid #d9d9d9;
}
.imc__table-row:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: 0;
}
.imc__table-row dt {
    flex-shrink: 0;
    width: calc(82 * var(--vw));
    font-family: 'Noto Sans KR', sans-serif;
    font-weight: 700;
    font-size: calc(20 * var(--vw));
    line-height: 1;
    letter-spacing: -0.05em;
}
.imc__table-row dd {
    font-family: 'ProximaNova', 'Noto Sans KR', sans-serif;
    font-size: calc(20 * var(--vw));
    line-height: 1;
    letter-spacing: -0.05em;
}
.imc__table-row dd em {
    font-style: normal;
    font-size: calc(16 * var(--vw));
    letter-spacing: -0.04em;
}
.imc__table-note {
    font-family: 'Noto Sans KR', sans-serif;
    font-size: calc(16 * var(--vw));
    letter-spacing: -0.05em;
    color: #737b82;
}

/* ===== NB 로고 ===== */
.imc__logo {
    display: flex;
    justify-content: center;
    padding: calc(140 * var(--vw)) 0;
}
.imc__logo img { width: calc(114 * var(--vw)); }
/* ===== 메인 KV 영상 효과 (videoBlurMotion / toggleVideoSound / hideGnbOnMainVideo) — motionTest.css 원본 발췌 ===== */
/* videoBlurMotion :: S */
.imc__videoMask {position:relative;}
.videoMask__blur{position:absolute; top:0; width:100%; height:100%; z-index: 1; transition:0.5s; backdrop-filter: blur(0px);}
/* videoBlurMotion :: E */

/* toggleVideoSound :: S */
.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%3Cpath d='M15.7306 24.6463C15.5552 24.6463 15.3951 24.5948 15.2426 24.4991L7.55612 19.3618H2.85885C2.18019 19.3618 1.62354 18.8245 1.62354 18.1695V9.84522C1.62354 9.18281 2.18019 8.65288 2.85885 8.65288H7.55612L15.2426 3.51555C15.3951 3.41251 15.5552 3.36835 15.7306 3.36835C16.15 3.36835 16.5923 3.68483 16.5923 4.20004V23.822C16.5923 24.3372 16.1424 24.6537 15.7306 24.6537V24.6463Z' fill='white'/%3E%3Cpath d='M15.7293 4.09702C15.7293 4.09702 15.8361 4.09702 15.8361 4.1927V23.8147C15.8361 23.9103 15.737 23.9103 15.7293 23.9103C15.7293 23.9103 15.7065 23.9103 15.676 23.8883L8.18779 18.8834L7.79889 18.6184H2.86524C2.60597 18.6184 2.39246 18.4124 2.39246 18.1621V9.83788C2.39246 9.58763 2.60597 9.38155 2.86524 9.38155H7.79889L8.18779 9.11659L15.676 4.11174C15.676 4.11174 15.7217 4.08966 15.7293 4.08966M15.7293 2.625C15.4167 2.625 15.1041 2.71332 14.8143 2.90468L7.32612 7.90954H2.87287C1.76718 7.90954 0.875 8.77066 0.875 9.83788V18.1621C0.875 19.2293 1.76718 20.0905 2.87287 20.0905H7.32612L14.8143 25.0953C15.1041 25.2867 15.4243 25.375 15.7293 25.375C16.5758 25.375 17.3612 24.7273 17.3612 23.8073V4.1927C17.3612 3.27269 16.5758 2.625 15.7293 2.625Z' fill='white'/%3E%3C/svg%3E");}
.imc__videoMask .mainVideo__muteBtn.on{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='M15.7306 24.6463C15.5552 24.6463 15.3951 24.5948 15.2426 24.4991L7.55612 19.3618H2.85885C2.18019 19.3618 1.62354 18.8245 1.62354 18.1695V9.84522C1.62354 9.18281 2.18019 8.65288 2.85885 8.65288H7.55612L15.2426 3.51555C15.3951 3.41251 15.5552 3.36835 15.7306 3.36835C16.15 3.36835 16.5923 3.68483 16.5923 4.20004V23.822C16.5923 24.3372 16.1424 24.6537 15.7306 24.6537V24.6463Z' fill='white'/%3E%3Cpath d='M15.7293 4.09702C15.7293 4.09702 15.8361 4.09702 15.8361 4.1927V23.8147C15.8361 23.9103 15.737 23.9103 15.7293 23.9103C15.7293 23.9103 15.7065 23.9103 15.676 23.8883L8.18779 18.8834L7.79889 18.6184H2.86524C2.60597 18.6184 2.39246 18.4124 2.39246 18.1621V9.83788C2.39246 9.58763 2.60597 9.38155 2.86524 9.38155H7.79889L8.18779 9.11659L15.676 4.11174C15.676 4.11174 15.7217 4.08966 15.7293 4.08966M15.7293 2.625C15.4167 2.625 15.1041 2.71332 14.8143 2.90468L7.32612 7.90954H2.87287C1.76718 7.90954 0.875 8.77066 0.875 9.83788V18.1621C0.875 19.2293 1.76718 20.0905 2.87287 20.0905H7.32612L14.8143 25.0953C15.1041 25.2867 15.4243 25.375 15.7293 25.375C16.5758 25.375 17.3612 24.7273 17.3612 23.8073V4.1927C17.3612 3.27269 16.5758 2.625 15.7293 2.625Z' fill='white'/%3E%3Cpath d='M21 11.375V17.5' stroke='white' stroke-width='1.52509' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M24.5 9.625V19.25' stroke='white' stroke-width='1.52509' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");}
/* toggleVideoSound :: E */

/* hideGnbOnMainVideo :: S */
.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;}
/* #topLayerBanner {position:absolute; top: -100%; } 상단 팝업 배너도 hide 처리 */
/* hideGnbOnMainVideo :: E */
.imc__videoMask .jsKvIframe { transition: filter 0.5s; }