@charset "utf-8";
/* =========================================================
   K-LNG 공통 레이아웃 (헤더 · 모바일 메뉴 · 푸터)
   headHtml.jsp 에서 custom.css 앞에 로드된다.
   layout.css 의 모듈 기본 헤더 규칙(#header{display:none} 등)을
   .kl_header / .kl_m_menu / .kl_footer 로 스코프를 좁혀 덮어쓴다.
   ========================================================= */
:root {
	--kl-navy: #13325f;
	--kl-navy-deep: #0d2648;
	--kl-navy-card: #1d4277;
	--kl-red: #d63031;
	--kl-ink: #18233a;
	--kl-gray: #5f6b7c;
	--kl-line: #e1e6ee;
	--kl-sky: #f3f6fa;
	--kl-header-h: 90px;
	--kl-gutter: 5.5%;   /* 사이트 좌우 여백 (2026-10-22 4% → 5.5%) — 본문 최대 폭 1600px (2026-10-23 1800 → 1600) */
}

body { font-family: 'Noto Sans KR', sans-serif; color: var(--kl-ink); word-break: keep-all; }
html.kl_m_lock, html.kl_m_lock body { overflow: hidden; }

/* ---------- 헤더 ---------- */
#header.kl_header {
	display: block; position: fixed; left: 0; top: 0; z-index: 100;
	width: 100%; height: var(--kl-header-h);
	background: transparent; transition: background .35s, box-shadow .35s;
}
.kl_header .kl_header_in {
	position: relative; z-index: 2;
	display: flex; align-items: center; justify-content: space-between;
	/* 본문 컨테이너(.kl_in: 최대 1600px + 좌우 --kl-gutter)와 같은 폭 → 로고 왼쪽 선이 본문 왼쪽 선과 맞는다 */
	max-width: 1600px; height: 100%; margin: 0 auto; padding: 0 var(--kl-gutter); box-sizing: content-box;
}
.kl_header .kl_logo { flex: 0 0 auto; margin: 0; line-height: 0; }
.kl_header .kl_logo a { display: block; }
.kl_header .kl_logo img { height: 40px; width: auto; margin-left: -11px; }  /* 로고 PNG 왼쪽 투명 여백(원본 37/133) 만큼 당겨 보이는 로고 선 = 본문 왼쪽 선 */
.kl_header .kl_logo .is_navy { display: none; }

.kl_header .gnb { height: 100%; }
.kl_header .gnb > ul { display: flex; height: 100%; }
.kl_header .gnb > ul > li { position: relative; width: 150px; text-align: center; }
.kl_header .gnb > ul > li > a {
	display: flex; align-items: center; justify-content: center; height: 100%;
	font-size: 20px; font-weight: 500; color: #fff; letter-spacing: -0.02em;
	text-shadow: 0 1px 8px rgba(5,25,55,.35);
	transition: color .3s, opacity .3s;
}
.kl_header.is_solid .gnb > ul > li > a, .kl_header.is_open .gnb > ul > li > a { text-shadow: none; }
.kl_header .gnb > ul > li:hover > a { opacity: .7; }
/* 하위메뉴: 헤더가 열리면(.is_open) 각 1차 메뉴 아래에 세로로 나열 */
.kl_header .gnb > ul > li > ul {
	position: absolute; left: 0; top: 100%; width: 100%;
	padding: 28px 0 0; box-sizing: border-box;
	opacity: 0; visibility: hidden; transition: opacity .3s;
}
.kl_header .gnb > ul > li > ul > li > a {
	display: block; padding: 9px 8px; font-size: 15px; color: var(--kl-gray); line-height: 1.4;
	transition: color .2s;
}
.kl_header .gnb > ul > li > ul > li > a:hover { color: var(--kl-red); }

.kl_header .kl_lang { display: flex; gap: 14px; font-family: 'Poppins', sans-serif; font-size: 14px; }
.kl_header .kl_lang a { color: rgba(255,255,255,.55); transition: color .3s; }
.kl_header .kl_lang a.on, .kl_header .kl_lang a:hover { color: #fff; }

.kl_header .kl_gnb_bg {
	position: absolute; left: 0; top: 100%; z-index: 1; width: 100%; height: 0;
	background: #fff; overflow: hidden;
	box-shadow: 0 20px 30px rgba(8, 24, 49, 0); transition: height .35s, box-shadow .35s;
}

/* 흰 배경 상태 (스크롤 · 서브페이지 · 메뉴 열림) */
/* 스크롤 시: 반투명 흰색 + 뒤 배경 흐림(유리 느낌). 메뉴가 열렸을 땐 하위메뉴 가독성을 위해 불투명 흰색 */
#header.kl_header.is_solid {
	background: rgba(255,255,255,.48); box-shadow: 0 1px 0 rgba(19,50,95,.08);
	-webkit-backdrop-filter: blur(18px) saturate(1.6); backdrop-filter: blur(18px) saturate(1.6);
}
#header.kl_header.is_open { background: #fff; box-shadow: 0 1px 0 var(--kl-line); }
.kl_header.is_solid .kl_logo .is_white, .kl_header.is_open .kl_logo .is_white { display: none; }
.kl_header.is_solid .kl_logo .is_navy, .kl_header.is_open .kl_logo .is_navy { display: block; }
.kl_header.is_solid .gnb > ul > li > a, .kl_header.is_open .gnb > ul > li > a { color: var(--kl-navy); }
.kl_header.is_solid .kl_lang a, .kl_header.is_open .kl_lang a { color: #a3acb9; }
.kl_header.is_solid .kl_lang a.on, .kl_header.is_open .kl_lang a.on,
.kl_header.is_solid .kl_lang a:hover, .kl_header.is_open .kl_lang a:hover { color: var(--kl-navy); }
.kl_header.is_open .gnb > ul > li > ul { opacity: 1; visibility: visible; }
.kl_header.is_open .kl_gnb_bg { height: 230px; box-shadow: inset 0 1px 0 var(--kl-line), 0 20px 30px rgba(8, 24, 49, .08); }

/* 햄버거 (모바일). layout.css 의 #header .m_btn 규칙보다 우선하도록 #header 까지 지정 */
#header.kl_header .m_btn {
	display: none; width: 30px; height: 22px; margin: 0; padding: 0; border: 0; background: none;
	flex-direction: column; justify-content: space-between; align-items: flex-end;
}
#header.kl_header .m_btn i { display: block; width: 100%; height: 2px; margin: 0; background: #fff; transition: background .3s; }
#header.kl_header .m_btn i:nth-of-type(2) { width: 70%; }
#header.kl_header.is_solid .m_btn i { background: var(--kl-navy); }

/* ---------- 모바일 메뉴 ---------- */
.m_menu_bg { z-index: 110; background: rgba(8, 24, 49, .6); }
#m_menu.kl_m_menu {
	z-index: 111; left: auto; right: -100%; width: 86%; max-width: 420px !important;
	padding: 0 !important; background: var(--kl-navy); color: #fff; transition: right .4s;
	display: flex; flex-direction: column;
}
#m_menu.kl_m_menu.on { right: 0; left: auto; }
#m_menu.kl_m_menu .top_box {
	display: flex !important; align-items: center; justify-content: space-between;
	height: 76px; padding: 0 24px;
}
#m_menu.kl_m_menu .m_logo img { height: 22px; width: auto; }
#m_menu.kl_m_menu .top_box .close_btn { position: relative; right: auto; top: auto; width: 26px; height: 26px; }
#m_menu.kl_m_menu .top_box .close_btn i {
	position: absolute; left: 0; top: 12px; width: 100%; height: 2px; background: #fff; transform: rotate(45deg);
}
#m_menu.kl_m_menu .top_box .close_btn i:last-of-type { transform: rotate(-45deg); }
#m_menu.kl_m_menu .gnb_box { flex: 1; padding: 10px 24px; border-top: 1px solid rgba(255,255,255,.12); }
#m_menu.kl_m_menu .gnb_box > ul > li { border-bottom: 1px solid rgba(255,255,255,.12); }
#m_menu.kl_m_menu .gnb_box > ul > li > a {
	display: block !important; padding: 20px 0 !important;
	font-size: 20px !important; font-weight: 500; color: #fff; text-decoration: none;
}
#m_menu.kl_m_menu .gnb_box > ul > li.on > a { color: #fff; }
#m_menu.kl_m_menu .gnb_box > ul > li > ul { display: none; padding: 0 0 18px; border-top: 0; background: none; }
#m_menu.kl_m_menu .gnb_box > ul > li > ul > li > a {
	display: block; padding: 8px 0 !important; font-size: 16px !important; color: rgba(255,255,255,.7); background: none;
}
#m_menu.kl_m_menu .gnb_box > ul > li > ul > li > a:hover { color: #fff; background: none; }
#m_menu.kl_m_menu .kl_lang { display: flex; gap: 18px; padding: 24px; font-family: 'Poppins', sans-serif; font-size: 15px; }
#m_menu.kl_m_menu .kl_lang a { color: rgba(255,255,255,.5); }
#m_menu.kl_m_menu .kl_lang a.on { color: #fff; }

/* ---------- 푸터 ---------- */
/* 화이트 톤 (2026-10-22 남색 → 흰색). 위 섹션과는 윗선으로 구분 */
footer.kl_footer { display: block; background: #fff; border-top: 1px solid var(--kl-line); color: #4a5566; }
.kl_footer .kl_footer_in { max-width: 1600px; margin: 0 auto; padding: 96px var(--kl-gutter) 80px; box-sizing: content-box; }
.kl_footer .kl_footer_top {
	display: flex; align-items: center; justify-content: space-between;
	padding-bottom: 34px; border-bottom: 1px solid var(--kl-line);
}
.kl_footer .kl_footer_logo img { height: 32px; width: auto; }
.kl_footer .kl_footer_policy { font-size: 16px; font-weight: 600; color: var(--kl-navy); }
.kl_footer .kl_footer_info { display: flex; flex-wrap: wrap; gap: 10px 36px; padding-top: 34px; font-size: 16px; line-height: 1.65; }
.kl_footer .kl_footer_info .is_addr { flex-basis: 100%; }
.kl_footer .kl_footer_info .lb { margin-right: 10px; color: #9aa4b2; }
.kl_footer .kl_footer_info a { color: inherit; }
.kl_footer .kl_copy { margin-top: 28px; font-family: 'Poppins', sans-serif; font-size: 14px; color: #9aa4b2; }

/* ---------- 반응형 ---------- */
@media (max-width: 1400px) {
	.kl_header .gnb > ul > li { width: 130px; }
	.kl_header .gnb > ul > li > a { font-size: 18px; }
}
@media (max-width: 1200px) {
	.kl_header .gnb > ul > li { width: 112px; }
	.kl_header .gnb > ul > li > a { font-size: 16px; }
}
@media (max-width: 1024px) {
	:root { --kl-header-h: 72px; }
	.kl_header .kl_header_in { padding: 0 20px; }
	.kl_header .kl_logo img { height: 31px; margin-left: -9px; }
	#header.kl_header .gnb, .kl_header > .kl_header_in > .kl_lang, .kl_header .kl_gnb_bg { display: none; }
	#header.kl_header .m_btn { display: flex; }
	.kl_footer .kl_footer_in { padding: 62px 20px 56px; }
	.kl_footer .kl_footer_logo img { height: 26px; }
	.kl_footer .kl_footer_info { flex-direction: column; gap: 6px; font-size: 15px; }
}

/* 컨텐츠 준비 중인 서브페이지 (GNB + 푸터만). 고정 헤더 높이만큼 띄우고 화면 높이를 채운다 */
.kl_sub_blank { min-height: 70vh; padding-top: var(--kl-header-h); box-sizing: border-box; }