/* 11/08 대표: 첫 화면을 '영상 가득'으로(시안 6) — 화면 전체에 예시 영상, 왼쪽 아래에 제목·단추. 유리 카드·꺾쇠·진행 칩은 첫 화면에서 뺌.
   영상 오른쪽 아래 생성 도구 표시(✦)가 보이지 않게 살짝 키워 왼쪽 위 기준으로 자름. 음소거 단추는 그대로(data-sound). */
.nh.nh2 { position: relative; min-height: calc(100svh - 8px); margin-top: -84px; padding: 0 !important; background: #0f1a1b !important; display: flex; align-items: flex-end; overflow: hidden; }
.nh2 .nh-glassbg, .nh2 .nh-flow, .nh2 .nh-frame::before, .nh2 .nh-frame::after { display: none !important; }
.nh2 .nh-wrap { position: static; display: block; width: 100%; max-width: 1200px; padding: 0 24px 72px; }
.nh2 .nh-right, .nh2 .nh-frame { position: static; display: block; }
.nh2 .nh-video { position: absolute !important; inset: 0; z-index: 0; aspect-ratio: auto; border-radius: 0 !important; box-shadow: none !important; margin: 0; }
.nh2 .nh-video video, .nh2 .nh-video .nh-anim { width: 100%; height: 100%; object-fit: cover; object-position: 70% 50%; }
/* 글이 읽히게 아래·왼쪽만 어둡게(사진 위 그늘) */
.nh2 .nh-video::after { content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(0deg, rgba(14, 23, 24, .6), rgba(14, 23, 24, 0) 40%); }
.nh2 .nh-video figcaption { position: absolute; z-index: 2; right: 24px; bottom: 28px; left: auto; top: auto; display: flex; align-items: center; gap: 8px; padding: 0 !important; background: none !important; box-shadow: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; color: rgba(255, 255, 255, .85); font-size: 14px; }
.nh2 .nh-video figcaption .nh-tag { background: rgba(255, 255, 255, .18) !important; color: #fff !important; }
.nh2 .nh-video .ad-sound, .nh2 .nh-video .ad-play { z-index: 3; top: auto !important; left: auto !important; bottom: 72px !important; right: 24px !important; }
.nh2 .nh-video .ad-play { right: 76px !important; }
/* 첫 화면 위에서는 머리 메뉴 뒤 흰 띠를 없애 영상이 끝까지 보이게 */
html:not(.hd-scrolled):not(.gl-scrolled) body:has(.nh2) .ad-head { background: none !important; }
/* 제목·단추: 유리 카드 없이 영상 위에 바로 */
.nh2 .nh-left { position: relative; z-index: 2; max-width: 640px; padding: 0 !important; background: none !important; box-shadow: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; color: #fff; }
.nh2 .nh-left::before, .nh2 .nh-left::after { display: none !important; }
.nh2 .nh-h1 { color: #fff !important; font-size: clamp(44px, 6vw, 84px) !important; line-height: 1.06 !important; letter-spacing: -.04em; text-shadow: 0 2px 24px rgba(0, 0, 0, .25); }
.nh2 .nh-h1 span { color: #fff !important; }
.nh2 .nh-h1 em { color: #fff !important; background: none !important; -webkit-text-fill-color: #fff; }
.nh2 .nh-h1 em::before, .nh2 .nh-h1 em::after { display: none !important; }
.nh2 .nh-lead { color: rgba(255, 255, 255, .86) !important; font-size: 19px !important; }
.nh2 .nh-cta { max-width: 460px; background: #FAFAFA !important; color: var(--c-text, #1D1D1F) !important; box-shadow: 0 10px 30px rgba(0, 0, 0, .25) !important; }
.nh2 .nh-cta small { color: #6E6E73 !important; }
.nh2 .nh-cta__ic { background: var(--c-soft, #E8F4F3) !important; color: var(--c-main, #1B3A3D) !important; }
.nh2 .nh-cta__go { background: var(--c-main, #1B3A3D) !important; color: #fff !important; }
.nh2 .nh-cre, .nh2 .nh-cre a, .nh2 .nh-cre b { color: rgba(255, 255, 255, .9) !important; }
.nh2 .nh-cre__ic { background: rgba(255, 255, 255, .16) !important; color: #fff !important; box-shadow: none !important; }
.nh2 .nh-cue { position: absolute; z-index: 2; left: 50%; bottom: 22px; transform: translateX(-50%); background: rgba(255, 255, 255, .16) !important; color: #fff !important; box-shadow: none !important; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.nh2 .nh-cue i { background: #FAFAFA !important; color: var(--c-main, #1B3A3D) !important; }
.nh2 .nh-cue i svg { stroke: var(--c-main, #1B3A3D) !important; }
@media (max-width: 760px) {
  .nh.nh2 { min-height: calc(100svh - 4px); margin-top: -120px; }
  .nh2 .nh-wrap { padding: 0 20px 86px; }
  .nh2 .nh-video figcaption { display: none; }
  .nh2 .nh-video .ad-sound, .nh2 .nh-video .ad-play { bottom: auto !important; top: 132px !important; right: 16px !important; }
  .nh2 .nh-video .ad-play { right: 68px !important; }
  .nh2 .nh-cue { bottom: 20px; }
}


/* 점 영상: 휴대폰에선 점 모양이 위쪽에 오게 */
@media (max-width: 760px) {
  .nh2 .nh-video video, .nh2 .nh-video .nh-anim { position: absolute; left: 0; right: 0; top: 70px; height: 52%; object-position: 79% 50%; }
  .nh2 .nh-video::after { background: linear-gradient(180deg, rgba(14, 23, 24, 0) 40%, #0E1718 62%) !important; }
}
/* 11/08 대표: 첫 화면 영상을 흰 바탕 점 아이콘(카카오 홈 느낌)으로 → 바탕 흰색, 글자 짙게 */
.nh.nh2 { background: #FAFAFA !important; }
.nh2 .nh-video::after { background: linear-gradient(90deg, rgba(255,255,255,.92) 0%, rgba(255,255,255,.6) 38%, rgba(255,255,255,0) 58%) !important; }
.nh2 .nh-h1, .nh2 .nh-h1 span, .nh2 .nh-h1 em { color: var(--c-text, #1D1D1F) !important; -webkit-text-fill-color: currentColor; text-shadow: none !important; }
.nh2 .nh-h1 em { color: var(--c-point, #208888) !important; }
.nh2 .nh-lead { color: var(--c-text-2, #6E6E73) !important; }
.nh2 .nh-cta { background: var(--c-main, #1B3A3D) !important; color: #fff !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 10px 26px rgba(27,58,61,.22) !important; }
.nh2 .nh-cta small { color: rgba(255,255,255,.72) !important; }
.nh2 .nh-cta__ic { background: rgba(255,255,255,.12) !important; color: #fff !important; }
.nh2 .nh-cta__go { background: var(--c-point, #208888) !important; }
.nh2 .nh-cre, .nh2 .nh-cre a, .nh2 .nh-cre b { color: var(--c-text, #1D1D1F) !important; }
.nh2 .nh-cre__ic { background: var(--c-soft, #E8F4F3) !important; color: var(--c-main, #1B3A3D) !important; }
.nh2 .nh-cue { background: rgba(27,58,61,.06) !important; color: var(--c-text, #1D1D1F) !important; }
.nh2 .nh-cue i { background: var(--c-main, #1B3A3D) !important; } .nh2 .nh-cue i svg { stroke: #fff !important; }
html:not(.hd-scrolled):not(.gl-scrolled) body:has(.nh2) .ad-head { background: none !important; }
@media (max-width: 760px) {
  .nh2 .nh-video video, .nh2 .nh-video .nh-anim { top: 70px; height: 50%; object-position: 72% 50%; }
  .nh2 .nh-video::after { background: linear-gradient(180deg, rgba(255,255,255,0) 40%, #FAFAFA 60%) !important; }
}
/* 11/10 대표: 첫 화면 바탕 #FAFAFA */
.nh.nh2 { background: #FAFAFA !important; }
.nh2 .nh-video::after { background: linear-gradient(90deg, rgba(250,250,250,.9) 0%, rgba(250,250,250,.5) 38%, rgba(250,250,250,0) 58%) !important; }
@media (max-width: 760px) { .nh2 .nh-video::after { background: linear-gradient(180deg, rgba(250,250,250,0) 40%, #FAFAFA 60%) !important; } }
/* 11/09 대표 새 첫 화면 영상(4K 입체 아이콘): 휴대폰에선 영상 칸을 줄여 큰 휴대폰이 제목과 겹치지 않게 */
@media (max-width: 760px) {
  .nh2 .nh-video video, .nh2 .nh-video .nh-anim { top: 76px; height: 38%; object-position: 64% 50%; }
  .nh2 .nh-video::after { background: linear-gradient(180deg, rgba(250,250,250,0) 34%, #FAFAFA 47%) !important; }
}
/* 11/09 가상 고객 시험: 작은 휴대폰 + 글자 크게(화면 폭 300px 안팎)에서 첫 화면 큰 제목이 머리 막대 밑으로 들어가던 것 → 제목 위 자리를 늘 확보 */
@media (max-width: 760px) { .nh.nh2 { padding-top: 132px !important; } }
@media (max-width: 340px) { .nh2 .nh-video video, .nh2 .nh-video .nh-anim { height: 230px; } .nh.nh2 { padding-top: 300px !important; } }
/* 아이패드 가로 + 글자 크게처럼 화면 높이가 낮을 때도 제목이 머리 막대 밑으로 들어가지 않게 */
@media (min-width: 761px) { .nh.nh2 { padding-top: 120px !important; } }
/* 첫 화면 영상의 소리·멈춤 단추가 오른쪽 아래 [문의하기] 단추에 가려지던 것(아이패드 가로) → 조금 위로 */
@media (min-width: 761px) { .nh2 .nh-video .ad-sound, .nh2 .nh-video .ad-play { bottom: 132px !important; } }
/* 11/11 대표: 자동 재생이 막히면(아이패드 저전력 등) 재생 화면 대신 정지 그림 */
.nh-video video::-webkit-media-controls,
.nh-video video::-webkit-media-controls-panel,
.nh-video video::-webkit-media-controls-overlay-play-button,
.nh-video video::-webkit-media-controls-start-playback-button { display: none !important; -webkit-appearance: none; opacity: 0 !important; }
.nh-video video { pointer-events: none; }
.nh-video.is-still video { visibility: hidden; }
.nh-video .nh-anim { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 70% 50%; pointer-events: none; display: block; }
.nh-video:not(.is-still) .nh-anim { display: none; }