@charset "utf-8";

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

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

/* Bytesized (픽셀 폰트, Google Fonts OFL) */
@font-face {
    font-family: 'Bytesized';
    font-style: normal;
    font-weight: 400;
    src: url('/fonts/Bytesized-Regular.woff2') format('woff2'),
        url('/fonts/Bytesized-Regular.ttf') format('truetype');
}

/* ===== NKSUMMERRASHGUARD :: COMMON ===== */
.nkrg { width: 100%; background: #f5f5f5;
    --font-serif: 'ITCGaramondStd', serif;
    --font-kr: 'Noto Sans KR', sans-serif;
    --font-pixel: 'Bytesized', sans-serif;
    --font-proxima: 'ProximaNova', sans-serif;
    background: linear-gradient(180deg, #FFF 37.02%, #EAEDD5 81.73%, #C0CC84 100%);
}
.nkrg img { display: block; width: 100%; }
.nkrg * { box-sizing: border-box; }

/* 섹션 공통 타이틀 + 카피 */
.nkrg__head { display: flex; flex-direction: column; gap: calc(20 * var(--vw)); align-items: center; text-align: center; }
.nkrg__tit { font-family: var(--font-serif); font-weight: 400; font-size: calc(60 * var(--vw)); line-height: 1.1; letter-spacing: -0.01em; color: #151415; }
.nkrg__copy { font-family: var(--font-kr); font-weight: 400; font-size: calc(26 * var(--vw)); line-height: calc(42 * var(--vw)); letter-spacing: -0.04em; color: #000; }

/* ===== 1. KV ===== */
.nkrg-kv { padding-bottom: calc(160 * var(--vw)); }
.nkrg-kv__hero { display: flex; height: calc(960 * var(--vw)); overflow: hidden; }
.nkrg-kv__panel { height: 100%; overflow: hidden; }
.nkrg-kv__panel--left { width: calc(788 * var(--vw)); }
.nkrg-kv__panel--right { width: calc(1132 * var(--vw)); }
.nkrg-kv__panel img { width: 100%; height: 100%; object-fit: cover; }
.nkrg-kv__intro { margin: calc(60 * var(--vw)) auto 0; width: calc(1048 * var(--vw)); text-align: center; }
.nkrg-kv__tit { font-family: var(--font-serif); font-weight: 400; font-size: calc(90 * var(--vw)); line-height: 1.1; letter-spacing: -0.01em; color: #373737; }
.nkrg-kv__copy { margin-top: calc(20 * var(--vw)); font-family: var(--font-kr); font-weight: 400; font-size: calc(28 * var(--vw)); line-height: calc(44 * var(--vw)); letter-spacing: -0.04em; color: #000; }

/* ===== 2. 컨셉 티커 (스티키 배너) ===== */
.nkrg-ticker { position: sticky; top: 106px; z-index: 10; height: calc(66 * var(--vw)); background-image: url("https://image.nbkorea.com/NBRB_PC/event/imc/NKSUMMERRASHGUARD/gnbg.jpg"); background-size: cover;background-repeat: no-repeat; } /* 헤더(fixed 106px) 아래 상단 고정 */
.nkrg-ticker__inner { display: flex; justify-content: center; align-items: center; gap: calc(150 * var(--vw)); height: 100%; }
.nkrg-ticker__item { display: flex; align-items: center; gap: calc(5 * var(--vw)); opacity: 0.5; transition: opacity 0.3s; cursor: pointer; }
.nkrg-ticker__item.on { opacity: 1; }
.nkrg-ticker__item span { font-family: var(--font-pixel); font-size: calc(31 * var(--vw)); line-height: 1.1; letter-spacing: -0.02em; color: #fff; text-transform: uppercase; }
.nkrg-ticker__item img { width: auto; height: calc(40 * var(--vw)); mix-blend-mode: screen; }
.nkrg-ticker__item--pool img { height: calc(36 * var(--vw)); }
.nkrg-ticker__item--camping img { height: calc(39 * var(--vw)); }

/* ===== 3. VACATION ESSENTIALS ===== */
/*.nkrg-esntl { padding-bottom: calc(160 * var(--vw)); }*/
.nkrg-esntl__inner { display: flex; justify-content: center; align-items: center; gap: calc(60 * var(--vw)); height: calc(795 * var(--vw)); background-color: #F5F5F5; }
.nkrg-esntl__left { display: flex; flex-direction: column; align-items: center; gap: calc(46 * var(--vw)); width: calc(845 * var(--vw)); }
.nkrg-esntl__list { display: flex; justify-content: center; gap: calc(15 * var(--vw)); width: 100%; }
.nkrg-esntl__card { position: relative; display: block; width: calc(200 * var(--vw)); height: calc(225 * var(--vw)); border-radius: calc(8 * var(--vw)); overflow: hidden; }
.nkrg-esntl__card img { width: 100%; height: 100%; object-fit: cover; }
.nkrg-esntl__card::after { content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: linear-gradient(180deg, rgba(217, 217, 217, 0) 40%, rgba(0, 0, 0, 0.6) 93.75%); }
.nkrg-esntl__card span { position: absolute; left: 0; bottom: calc(16 * var(--vw)); z-index: 1; width: 100%; font-family: var(--font-pixel); font-size: calc(23 * var(--vw)); line-height: 1; letter-spacing: -0.05em; color: #fff; text-align: center; }
.nkrg-esntl__more { display: flex; align-items: center; gap: calc(10 * var(--vw)); font-family: var(--font-kr); font-weight: 400; font-size: calc(26 * var(--vw)); line-height: calc(42 * var(--vw)); letter-spacing: -0.04em; color: #000; }
.nkrg-esntl__more i { font-family: var(--font-pixel); font-style: normal; font-size: calc(48 * var(--vw)); line-height: calc(42 * var(--vw)); height: calc(33 * var(--vw));}
.nkrg-esntl__photo { width: calc(648 * var(--vw)); height: calc(648 * var(--vw)); border-radius: calc(8 * var(--vw)); overflow: hidden; }
.nkrg-esntl__photo img { width: 100%; height: 100%; object-fit: cover; }

/* ===== 4. SUN SAFE GUIDE ===== */
.nkrg-guide { padding-top: calc(160 * var(--vw)); background-color: #fff; display: flex; flex-direction: column; align-items: center; gap: calc(40 * var(--vw)); padding-bottom: calc(120 * var(--vw)); }
.nkrg-guide__list { display: flex; gap: calc(9 * var(--vw)); }
.nkrg-guide__item { display: flex; align-items: center; gap: calc(12 * var(--vw)); height: calc(74 * var(--vw)); padding: calc(16 * var(--vw)) calc(18 * var(--vw)); background: #f6f6f6; border: 1px solid rgba(0, 0, 0, 0.2); border-radius: calc(8 * var(--vw)); }
.nkrg-guide__item img { width: calc(43 * var(--vw)); height: calc(43 * var(--vw)); object-fit: contain; }
.nkrg-guide__txt { display: flex; flex-direction: column; gap: calc(3 * var(--vw)); text-align: center; color: #373737; }
.nkrg-guide__txt .kr { font-family: var(--font-kr); font-weight: 400; font-size: calc(14 * var(--vw)); line-height: 1.2; letter-spacing: -0.05em; }
.nkrg-guide__txt .en { font-family: var(--font-proxima); font-weight: 700; font-size: calc(15 * var(--vw)); line-height: 1.2; letter-spacing: -0.05em; }

/* ===== 5. SUMMER VACATION STYLING TIPS ===== */
.nkrg-styling { display: flex; flex-direction: column; align-items: center; gap: calc(40 * var(--vw)); padding: calc(120 * var(--vw)) 0; background: #c0cc84; }
.nkrg-styling__slider { position: relative; display: flex; justify-content: center; align-items: center; gap: calc(15 * var(--vw)); }
.nkrg-styling__arrow { width: calc(93 * var(--vw)); height: calc(59 * var(--vw)); font-family: var(--font-pixel); font-size: calc(48 * var(--vw)); line-height: calc(59 * var(--vw)); color: #000; text-align: center; background: none; border: 0; cursor: pointer; }
.nkrg-styling__arrow--prev { transform: rotate(180deg) scaleY(-1); }
.nkrg-styling__swiper { width: calc(947 * var(--vw)); overflow: hidden; }
.nkrg-styling__set { display: flex; justify-content: center; align-items: center; gap: calc(15 * var(--vw)); }
.nkrg-styling__prd { display: block; width: calc(200 * var(--vw)); height: calc(200 * var(--vw)); background: #f5f5f5; border-radius: calc(8 * var(--vw)); overflow: hidden; }
.nkrg-styling__prd img { width: 100%; height: 100%; object-fit: cover; }
.nkrg-styling__plus { width: calc(19 * var(--vw)); font-family: var(--font-proxima); font-weight: 700; font-size: calc(26 * var(--vw)); line-height: 1; letter-spacing: -0.04em; color: #010101; text-align: center; }

/* ===== 6. 컨셉 화보컷 (Resort Day / Fresh Camping / Swim in the Pool / At the Beach) ===== */
.nkrg-concept { padding-bottom: calc(160 * var(--vw)); }
.nkrg-concept--resort { margin-top: calc(160 * var(--vw)); }
.nkrg-concept__inner { display: flex; justify-content: center; align-items: center; gap: calc(60 * var(--vw)); height: calc(850 * var(--vw)); }
.nkrg-concept--reverse .nkrg-concept__inner { flex-direction: row-reverse; }
.nkrg-concept__main { width: calc(620 * var(--vw)); height: calc(849 * var(--vw)); overflow: hidden; }
.nkrg-concept__main img { width: 100%; height: 100%; object-fit: cover; }
.nkrg-concept__col { display: flex; flex-direction: column; align-items: center; gap: calc(60 * var(--vw)); }
.nkrg-concept__subs { display: flex; gap: calc(20 * var(--vw)); }
.nkrg-concept__sub { position: relative; width: calc(480 * var(--vw)); height: calc(657 * var(--vw)); overflow: hidden; }
.nkrg-concept__sub img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1s; }
.nkrg-concept__sub img.on { opacity: 1; }

/* ===== 7. NB KIDS LOGO 푸터 ===== */
.nkrg-footer { display: flex; justify-content: center; align-items: flex-start; height: calc(332 * var(--vw)); }
.nkrg-footer img { width: calc(170 * var(--vw)); margin-top: calc(100 * var(--vw)); }