/* 메인 첫 화면 — 새 콘텐츠 main-hero 의 CSS 탭에 통째로
   배경 이미지는 지금 테스트 사이트 폴더 것을 불러옴. 실제 사이트 리소스관리 > 이미지에 올린 뒤 주소를 바꾸면 더 안전 */
.nh { --nh-blue:#1d6bfc; --nh-accent:#6fb6ff; position:relative; height:100vh; min-height:700px; background:#071a4f; color:#fff; overflow:hidden; }
.nh * { box-sizing:border-box; }
.nh-bg { position:absolute; inset:0; background:url(/_res/service/test/img/main/hero-security-platform.png) center / cover no-repeat; opacity:0; transform:scale(1.04); transition:opacity 1.4s ease, transform 2.4s cubic-bezier(.2,.7,.2,1); }
.nh-n { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
.nh #nhPath { transition:opacity 1.2s ease; }
.nh.drawn .nh-bg { opacity:1; transform:none; }
.nh.drawn #nhPath { opacity:.28; }
.nh.drawn #nhHead { opacity:0; transition:opacity .6s; }
/* 위로 갈수록 어둡게 (아래는 그대로) — 배경·N 위, 글자 아래 */
.nh::before { content:''; position:absolute; left:0; right:0; top:0; height:55%; z-index:1; pointer-events:none; background:linear-gradient(180deg, rgba(2,6,22,.78) 0%, rgba(2,6,22,.35) 45%, rgba(2,6,22,0) 100%); }
.nh::after { content:''; position:absolute; left:0; right:0; bottom:0; height:40%; pointer-events:none; background:linear-gradient(180deg, rgba(7,26,79,0) 0%, rgba(7,26,79,.75) 70%, #071a4f 100%); }
.nh-wrap { position:relative; z-index:2; height:100%; display:flex; flex-direction:column; max-width:1400px; margin:0 auto; padding:105px 48px 0; }
/* 네 장을 같은 칸에 겹쳐 쌓아, 가장 긴 장 높이에 맞춤 (위아래 여백이 화면 높이에 따라 들쭉날쭉하지 않게) */
.nh-stage { flex:1; display:grid; align-content:center; }
.nh-slide { grid-area:1 / 1; visibility:hidden; }
.nh-slide.is-on { visibility:visible; }
/* 글: 슬라이드가 켜지면 0.1초 간격으로 올라옴 (버튼까지 0.5초 안에) */
.nh-slide > * { opacity:0; transform:translateY(18px); transition:opacity .5s ease, transform .6s cubic-bezier(.2,.7,.2,1); }
.nh.text .nh-slide.is-on > * { opacity:1; transform:none; }
.nh.text .nh-slide.is-on > *:nth-child(2) { transition-delay:.08s; }
.nh.text .nh-slide.is-on > *:nth-child(3) { transition-delay:.16s; }
.nh.text .nh-slide.is-on > *:nth-child(4) { transition-delay:.24s; }
.nh-prod { margin:0 0 14px; font-size:19px; font-weight:700; line-height:1.3; color:var(--nh-accent); }
.nh-title { margin:0; font-size:54px; font-weight:700; line-height:1.25; letter-spacing:-2px; word-break:keep-all; }
.nh-desc { max-width:600px; margin:22px 0 0; font-size:18px; line-height:1.7; color:rgba(255,255,255,.82); word-break:keep-all; }
.nh-cta { display:flex; flex-wrap:wrap; gap:12px; margin-top:40px; }
.nh-btn { display:inline-flex; align-items:center; height:48px; padding:0 24px; border-radius:6px; font-size:16px; font-weight:600; color:#fff !important; text-decoration:none; transition:background .2s ease, border-color .2s ease; }
.nh-btn.primary { background:var(--nh-blue); }
.nh-btn.primary:hover { background:#3a80ff; }
.nh-btn.line { border:1px solid rgba(255,255,255,.4); }
.nh-btn.line:hover { border-color:#fff; }
/* 화면엔 안 보이고 검색엔진·화면낭독기에만 읽히는 제품명 (링크 글자가 "자세히 보기"만이면 어느 제품인지 모름) */
.nh-blind { position:absolute; width:1px; height:1px; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
/* 아래 제품 탭 + 진행 막대 */
.nh-tabs { position:relative; padding-bottom:40px; display:grid; grid-template-columns:repeat(4,1fr); gap:24px; opacity:0; transition:opacity .8s ease .3s; }
.nh.text .nh-tabs { opacity:1; }
.nh-tab { position:relative; display:flex; align-items:flex-start; padding:20px 0 0; border:0; border-top:1px solid rgba(255,255,255,.18); background:none; color:rgba(255,255,255,.5); font:inherit; font-size:16px; font-weight:600; text-align:left; cursor:pointer; }
.nh-tab small { display:block; margin-top:4px; font-size:14px; font-weight:400; }
.nh-tab::before { content:''; position:absolute; top:-1px; left:0; width:0; height:2px; background:#fff; }
.nh-tab.is-on { color:#fff; }
.nh-tab.is-on::before { width:100%; transition:width var(--nh-dur,7s) linear; }
.nh.is-paused .nh-tab.is-on::before { transition:none; }
.nh-tab:hover { color:#fff; }
.nh-tab:focus { outline:none; }
.nh-tab:focus-visible { outline:2px solid #6fb6ff; outline-offset:6px; }
/* 노트북 폭 */
@media (max-width:1366px) { .nh-title { font-size:50px; letter-spacing:-1.5px; } .nh-desc { font-size:17px; } }

@media (max-width:1024.98px) {
		.nh { height:100vh; height:100svh; min-height:560px; max-height:780px; }
	.nh-wrap { padding:58px 20px 0; }
			.nh-title { font-size:34px; letter-spacing:-1px; }
	.nh-prod { font-size:16px; margin-bottom:10px; }
	.nh-desc { font-size:15px; margin-top:16px; }
	.nh-desc br { display:none; }
	.nh-cta { margin-top:24px; }
	.nh-tabs { padding-bottom:28px; padding-right:60px; gap:10px; } /* 오른쪽은 챗봇 버튼 자리 */
	.nh-tab { padding-top:14px; font-size:13px; }
	.nh-tab small { display:none; }
	/* 세로 화면에서 배경을 화면 가득(cover) 깔면 가운데만 잘려 N이 세로로 길쭉해짐
	   → 배경·N을 원래 비율(1675:939) 그대로 헤더 밑 위쪽에 놓고 아래로 흐리게, 문구는 아래쪽으로 */
	.nh-bg, .nh-n { inset:auto; top:58px; width:min(150vw, 900px); height:calc(min(150vw, 900px) * 939 / 1675); left:calc(50vw - min(150vw, 900px) * .73); } /* N(이미지 가로 51~95% 구간)이 화면 가운데 오게 */
	.nh-bg { background-size:100% 100%; -webkit-mask-image:radial-gradient(ellipse 34% 62% at 73% 48%,#000 55%,transparent 100%); mask-image:radial-gradient(ellipse 34% 62% at 73% 48%,#000 55%,transparent 100%); /* N 둘레만 남기고 이미지 가장자리는 흐리게 */ }
	.nh-stage { align-content:end; padding-bottom:32px; }
}
/* ── 수치 줄 (테스트 사이트 모양, 문구·숫자는 실제 사이트 메인에 있던 것) ── */
.nh-stats { background:linear-gradient(180deg,#071a4f 0%,#050f22 100%); color:#fff; }
.nh-stats-in { max-width:1400px; margin:0 auto; padding:100px 48px 110px; display:grid; grid-template-columns:repeat(5,1fr); gap:20px; text-align:center; }
.nh-stat { margin:0; opacity:0; transform:translateY(18px); transition:opacity .7s ease, transform .7s ease; }
.nh-stats.in .nh-stat { opacity:1; transform:none; }
.nh-stats.in .nh-stat:nth-child(2) { transition-delay:.08s; } .nh-stats.in .nh-stat:nth-child(3) { transition-delay:.16s; }
.nh-stats.in .nh-stat:nth-child(4) { transition-delay:.24s; } .nh-stats.in .nh-stat:nth-child(5) { transition-delay:.32s; }
.nh-num { font-size:60px; font-weight:700; line-height:1; color:#4c8dff; letter-spacing:-1.5px; font-variant-numeric:tabular-nums; }
.nh-num small { margin-left:2px; font-size:26px; letter-spacing:0; }
.nh-lbl { margin-top:14px; font-size:17px; font-weight:600; line-height:1.45; }
/* 기존 메인 수치 카드(main-content01 안)는 이 줄로 대신하므로 숨김 */
.mn-nnsp-b { display:none !important; }
@media (max-width:1000px) { .nh-stats-in { grid-template-columns:1fr 1fr; row-gap:48px; } }
@media (max-width:640px) {
	.nh-stats-in { row-gap:36px; padding:56px 20px 72px; }
	.nh-stat:last-child { grid-column:span 2; }
	.nh-num { font-size:44px; } .nh-num small { font-size:20px; }
	.nh-lbl { margin-top:10px; font-size:14.5px; }
}
@media (prefers-reduced-motion:reduce) {
	.nh-stat { opacity:1 !important; transform:none !important; transition:none; }
	.nh-bg { opacity:1 !important; transform:none !important; transition:none; }
	.nh-slide > *, .nh-tabs, .nh-tab::before { transition:none !important; }
	.nh #nhPath { opacity:.28; } .nh #nhHead { display:none; }
}