@charset "utf-8";
/* ============================================================
   lnb.css — 서브 페이지 헤드 / 2dep 탭
   ============================================================ */

/* ── 서브: 페이지 헤드 ── */
.pageHero {
	position:relative; overflow:hidden;
	background:#22262c center / cover no-repeat;   /* 이미지 로드 전 차콜 바탕 */
}
.pageHero.company    { background-image:url(/images/include/greeting_img.webp); background-position-y: 12%;}
.pageHero.automation { background-image:url(/images/include/lnb_bg_automation.webp); }
.pageHero.products   { background-image:url(/images/include/lnb_bg_products.webp); }
.pageHero.reference  { background-image:url(/images/include/lnb_bg_reference.webp); }
.pageHero.customer   { background-image:url(/images/include/lnb_bg_customer.webp); }
.pageHero.privacy    { background-image:url(/images/include/lnb_bg_customer.webp); }
/* 타이틀이 긴 정책 페이지 — 한 줄에 들어오도록 축소 */
.pageHero.privacy .pageTit { font-size:var(--fs22); }

/* 무채색 차콜 — 사진 본래 색을 살리고 브랜드색은 탭·본문에만 */
.pageHero .cover {
	position:absolute; inset:0;
	background:linear-gradient(120deg, rgba(18,20,24,.88) 0%, rgba(32,36,42,.78) 48%, rgba(52,58,66,.66) 100%);
}
/* 타이틀은 왼쪽, 사이트 루트는 오른쪽 끝에 붙여 한 줄로 배치 */
.pageHero .pageHeroIn {
	position:relative; z-index:1;
	display:flex; align-items:flex-end; justify-content:space-between; gap:14px;
	padding:22px 18px;
}
.pageHero .pageHeroTxt { min-width:0; }
.pageHero .eyebrow {
	display:block; margin-bottom:7px;
	color:#c9ced6; font-size:var(--fs12); font-weight:700; letter-spacing:.09em;
}
.pageHero .pageTit { font-family:var(--f_en), var(--f_title), var(--f_base1), sans-serif; color:#fff; font-size:var(--fs28); font-weight:800; letter-spacing:-.03em; line-height:1.25; }
.pageHero .siteRoute { display:flex; align-items:center; flex:0 0 auto; gap:8px; padding-bottom:4px; }
.pageHero .siteRoute span { color:rgba(255,255,255,.72); font-size:var(--fs12); font-weight:600; white-space:nowrap; }
.pageHero .siteRoute i { width:3px; height:3px; border-radius:50%; background:rgba(255,255,255,.5); }

/* 바깥 래퍼는 위치만 잡는 투명 영역 — 배경이 비쳐야 하므로 클릭도 통과시킨다. */
.lnbTab {
	position:sticky; top:64px; z-index:55;
	display:flex; justify-content:center;
	padding:24px 12px 0px; pointer-events:none;
}
/* 실제 탭 박스 : 메뉴 갯수만큼만 차지하고 가운데, 넘치면 박스 안에서 가로 스크롤 */
.lnbTab ul {
	display:flex; align-items:center; flex-wrap:nowrap; gap:4px;
	width:max-content; max-width:100%; padding:8px;
	border-radius:12px; background:rgba(255,255,255,.2);
	box-shadow:0 0 24px rgba(0,0,0,.08);
	-webkit-backdrop-filter:blur(40px); backdrop-filter:blur(40px);
	overflow-x:auto; -webkit-overflow-scrolling:touch; overscroll-behavior-x:contain;
	scrollbar-width:none; -ms-overflow-style:none;
	pointer-events:auto; border: 1px solid rgb(235 235 235 / 50%);
}
.lnbTab ul::-webkit-scrollbar { display:none; }
.lnbTab li a {
	display:flex; align-items:center; justify-content:center;
	height:38px; padding:0 16px; border-radius:12px;
	background:transparent;
	color:#000; font-size:var(--fs14); font-weight:600; letter-spacing:-.03em; line-height:1; white-space:nowrap;
	transition:background-color .2s ease, color .2s ease;
}
.lnbTab li.on a {
	background:var(--c_base2); color:#fff; font-weight:700;
	box-shadow:0 4px 10px rgba(27,84,178,.22);
}

/* ── 좁은 화면 (360px 이하) — 2dep 탭 여백 축소 ── */
@media screen and (max-width: 360px) {
	.lnbTab ul { gap:2px; padding:8px; }
	.lnbTab li a { padding:0 12px; letter-spacing:-.05em; }
}

/* ── 태블릿 이상 (600px~) — 상단바 72px 에 맞춰 sticky 오프셋 조정 ── */
@media screen and (min-width: 600px) {
	.pageHero .pageHeroIn { padding:32px 26px; }

	.lnbTab { top:72px; padding:14px 22px; }
	.lnbTab ul { gap:6px; padding:12px; border-radius:14px; }
	.lnbTab li a { height:44px; padding:0 22px; font-size:var(--fs15); }
}

/* ── PC (1024px~) — 넓은 셸 좌우 여백 ── */
@media screen and (min-width: 1024px) {
	.pageHero .pageHeroIn { padding:44px 40px; }
	.lnbTab { padding:14px 40px; }
}