@charset "utf-8";
/* 메인 비주얼 — 2026-11-06 Figma 시안(휴스템_메인배너이미지) 1920×805 기준.
   --u = 시안 1px. 1920px 미만 PC 는 비율대로 줄이고(작은 글자는 최소 크기), 1024px 미만은 세로로 쌓는 배치. */
.mv { --u: calc(100vw / 1920); position: relative; z-index: 1; overflow: hidden; background: #fff; font-family: 'Noto Sans KR', sans-serif; word-break: keep-all; }
@media (min-width: 1920px) { .mv { --u: 1px; } }
.mv * { box-sizing: border-box; }
.mv p, .mv h2 { margin: 0; padding: 0; }
.mv button { margin: 0; padding: 0; border: 0; background: none; cursor: pointer; font: inherit; color: inherit; }

.mv_swiper { width: 100%; }
.mv_slide { position: relative; height: calc(805 * var(--u)); overflow: hidden; background: #fff; }
.mv_bg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-repeat: no-repeat; background-position: center center; background-size: cover; }
/* 흰 곡선: 화면 오른쪽 끝까지(1920px 넘는 화면에서도) */
.mv_notch { position: absolute; right: 0; bottom: 0; height: calc(381 * var(--u)); width: calc(860 * var(--u) + max(0px, (100% - 1920 * var(--u)) / 2)); background: #fff; border-top-left-radius: calc(320 * var(--u)); }
/* 시안 1920 무대(가운데) */
.mv_stage, .mv_ui { position: absolute; top: 0; left: 50%; width: calc(1920 * var(--u)); height: calc(805 * var(--u)); transform: translateX(-50%); }
.mv_ui { z-index: 5; pointer-events: none; }
.mv_ui a, .mv_ui button { pointer-events: auto; }

/* 왼쪽 문구 */
.mv_copy { position: absolute; left: calc(160 * var(--u)); top: calc(148 * var(--u)); width: calc(591 * var(--u)); display: flex; flex-direction: column; align-items: flex-start; gap: calc(28 * var(--u)); color: #fff; }
.mv_eyebrow { display: flex; align-items: center; gap: calc(16 * var(--u)); }
.mv_num { display: flex; align-items: center; justify-content: center; flex: none; width: max(30px, calc(40 * var(--u))); height: max(30px, calc(40 * var(--u))); border: 1px solid #d5d5d5; border-radius: 50%; font-size: max(11px, calc(14 * var(--u))); font-weight: 700; line-height: .8; color: #fff; }
.mv_label { font-size: max(12px, calc(16 * var(--u))); font-weight: 500; line-height: 1.4; letter-spacing: calc(1.5 * var(--u)); color: #f5f5f5; white-space: nowrap; }
.mv_title { display: flex; align-items: baseline; gap: calc(16 * var(--u)); line-height: 1; color: #fff; white-space: nowrap; font-weight: 400; }
.mv_title strong { font-size: calc(140 * var(--u)); font-weight: 700; letter-spacing: calc(-2 * var(--u)); }
.mv_title span { font-size: max(20px, calc(48 * var(--u))); font-weight: 300; letter-spacing: calc(-1 * var(--u)); }
.mv_lead { font-size: max(15px, calc(24 * var(--u))); font-weight: 300; line-height: 1.5; letter-spacing: calc(-.5 * var(--u)); color: #f5f5f5; white-space: nowrap; }

/* 오른쪽 제품 */
.mv_prod { position: absolute; left: calc(1000 * var(--u)); bottom: calc(40 * var(--u)); width: calc(760 * var(--u)); display: flex; flex-direction: column; align-items: flex-end; gap: calc(20 * var(--u)); }
.mv_prod_box { position: relative; display: block; width: 100%; height: calc(360 * var(--u)); }
.mv_prod_box picture { display: block; }
.mv_prod_img { position: absolute; display: block; max-width: none; object-fit: contain; filter: drop-shadow(0 calc(40 * var(--u)) calc(80 * var(--u)) rgba(10, 26, 51, .32)); }
.mv_mpro .mv_prod_img { left: 0; top: calc(33 * var(--u)); width: calc(760 * var(--u)); height: calc(298 * var(--u)); }
.mv_d .mv_prod_img { left: calc(72 * var(--u)); top: calc(82 * var(--u)); width: calc(616 * var(--u)); height: calc(265 * var(--u)); }
.mv_m .mv_prod_img { left: calc(83 * var(--u)); top: calc(-7 * var(--u)); width: calc(594 * var(--u)); height: calc(375 * var(--u)); }
.mv_s .mv_prod_img { left: calc(17 * var(--u)); top: calc(95 * var(--u)); width: calc(688 * var(--u)); height: calc(230 * var(--u)); }
.mv_spec { display: flex; flex-direction: column; align-items: flex-end; gap: calc(8 * var(--u)); white-space: nowrap; }
.mv_series { font-size: max(18px, calc(32 * var(--u))); font-weight: 300; line-height: 1.3; letter-spacing: calc(-1 * var(--u)); color: #000; }
.mv_series strong { font-weight: 700; }
.mv_use { font-size: max(12px, calc(16 * var(--u))); font-weight: 500; line-height: 1.4; color: #757575; }

/* 원형 배지 */
.mv_badge { position: absolute; left: calc(1592 * var(--u)); top: calc(148 * var(--u)); width: max(120px, calc(168 * var(--u))); height: max(120px, calc(168 * var(--u))); display: block; }
.mv_badge_ring { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; }
.mv_badge_ring text { font-family: 'Noto Sans KR', sans-serif; font-size: 12px; font-weight: 500; fill: #fff; }
.mv_badge_ring text.b { font-size: 13.5px; font-weight: 700; }
.mv_badge_core { position: absolute; left: 31%; top: 31%; width: 38%; height: 38%; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: #2d6cdf; box-shadow: 0 calc(8 * var(--u)) calc(24 * var(--u)) rgba(45, 108, 223, .4); color: #fff; font-size: max(16px, calc(22 * var(--u))); font-weight: 500; line-height: 1; transition: transform .3s; }
.mv_badge:hover .mv_badge_core, .mv_badge:focus .mv_badge_core { transform: scale(1.08); }

/* 페이저: 번호·진행선·화살표·멈춤 */
.mv_pager { position: absolute; left: calc(160 * var(--u)); top: calc(516 * var(--u)); display: flex; align-items: center; gap: calc(16 * var(--u)); height: max(30px, calc(40 * var(--u))); color: #fff; }
.mv_cur, .mv_tot { width: max(14px, calc(20 * var(--u))); text-align: center; font-size: max(14px, calc(18 * var(--u))); font-weight: 700; line-height: 1; }
.mv_track { position: relative; width: max(80px, calc(136 * var(--u))); height: 2px; background: rgba(255, 255, 255, .32); overflow: hidden; }
.mv_thumb { position: absolute; left: 0; top: 0; height: 2px; background: #fff; transition: left .6s; }
.mv_arrows { display: flex; align-items: center; gap: calc(12 * var(--u)); }
.mv_arrows button { display: block; width: max(20px, calc(24 * var(--u))); height: max(20px, calc(24 * var(--u))); }
.mv_arrows img { display: block; width: 100%; height: 100%; }
.mv_prev img { transform: scaleX(-1); }
.mv .mv_pause { --pb: max(30px, calc(40 * var(--u))); position: relative; flex: none; width: var(--pb); height: var(--pb); border-radius: 50%; background: rgba(255, 255, 255, .24); }
.mv_pause_l, .mv_pause_r { position: absolute; top: 35%; width: 7.5%; height: 30%; background: #fff; }
.mv_pause_l { left: 37.5%; }
.mv_pause_r { left: 55%; }
.mv.is_paused .mv_pause_l { left: 40%; top: 32%; width: 0; height: 0; background: none; border-style: solid; border-width: calc(var(--pb) * .18) 0 calc(var(--pb) * .18) calc(var(--pb) * .28); border-color: transparent transparent transparent #fff; }
.mv.is_paused .mv_pause_r { display: none; }
.mv button:focus-visible, .mv a:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* 1024px 미만(태블릿·휴대폰): 세로로 쌓기 — 시안에 모바일이 없어 PC 시안 요소를 그대로 재배치 */
@media (max-width: 1023px) {
    .mv_slide { height: clamp(600px, calc(100vw * 1.45), 880px); }
    .mv_stage, .mv_ui { left: 0; width: 100%; height: 100%; transform: none; }
    .mv_bg { background-position: 30% center; }
    .mv_d .mv_bg { background-position: 15% center; }
    .mv_m .mv_bg { background-position: 20% center; }
    .mv_s .mv_bg { background-position: 40% center; }
    .mv_bg:after { content: ""; position: absolute; left: 0; top: 0; right: 0; height: 60%; background: linear-gradient(to bottom, rgba(0, 0, 0, .45), rgba(0, 0, 0, 0)); }
    .mv_notch { width: min(88%, 680px); height: 40%; border-top-left-radius: clamp(110px, 30vw, 240px); }
    .mv_copy { left: 20px; top: 40px; width: auto; right: 20px; gap: 14px; }
    .mv_eyebrow { gap: 10px; }
    .mv_num { width: 30px; height: 30px; font-size: 11px; }
    .mv_label { font-size: 12px; letter-spacing: 1px; }
    .mv_title { gap: 10px; }
    .mv_title strong { font-size: clamp(64px, 17vw, 120px); letter-spacing: -1px; }
    .mv_title span { font-size: clamp(22px, 5.6vw, 40px); letter-spacing: -.5px; }
    /* common.css 600px 이하 "p { font-size:3vw !important }" 를 배너 문구에서만 이김 */
    .mv .mv_lead { font-size: clamp(16px, 4.1vw, 22px) !important; letter-spacing: -.3px; white-space: normal; }
    .mv_pager { left: 20px; top: auto; bottom: calc(40% + 28px); gap: 12px; height: 30px; }
    .mv_badge { display: none; }
    .mv_prod { left: auto; right: 20px; bottom: 24px; width: min(82%, 520px); gap: 10px; } /* 태블릿에서 제품이 페이저까지 올라오지 않게 */
    .mv_prod_box { height: 0; padding-top: 47.37%; }
    .mv_mpro .mv_prod_img { left: 0; top: 9.2%; width: 100%; height: 82.8%; }
    .mv_d .mv_prod_img { left: 9.5%; top: 22.8%; width: 81%; height: 73.6%; }
    .mv_m .mv_prod_img { left: 10.9%; top: -1.9%; width: 78.2%; height: 104.2%; }
    .mv_s .mv_prod_img { left: 2.2%; top: 26.4%; width: 90.5%; height: 63.9%; }
    .mv_prod_img { filter: drop-shadow(0 16px 32px rgba(10, 26, 51, .28)); }
    .mv .mv_series { font-size: clamp(20px, 5.4vw, 30px) !important; letter-spacing: -.5px; }
    .mv .mv_use { font-size: clamp(12px, 3.3vw, 15px) !important; }
}