@charset "utf-8";
/* =========================================================
   K-LNG 서브페이지 공통 (사업소개 LNG 부터 적용)
   모든 선택자는 .kl_sub 아래로 스코프를 한정한다.
   색상 토큰(--kl-*)은 kl_layout.css 에 정의.
   ========================================================= */
.kl_sub { background: #fff; overflow: hidden; overflow: clip; }  /* clip: 가로 넘침은 자르되 스크롤 컨테이너를 만들지 않아 안쪽 position:sticky(SM 탭)가 동작한다 */
.kl_sub .kl_in { max-width: 1600px; margin: 0 auto; padding: 0 var(--kl-gutter); box-sizing: content-box; }

/* 섹션 라벨 (01  BUSINESS OVERVIEW) */
.kl_sub .kl_label {
	display: flex; align-items: center; gap: 18px; margin-bottom: 26px;
	font-family: 'Poppins', sans-serif; font-size: 14px; font-weight: 600; letter-spacing: .14em; color: var(--kl-navy);
}
.kl_sub .kl_label b { font-weight: 600; color: var(--kl-red); letter-spacing: .04em; }
.kl_sub .kl_tit { font-size: 52px; font-weight: 700; line-height: 1.3; letter-spacing: -0.035em; color: var(--kl-navy); }
.kl_sub .kl_desc { margin-top: 28px; font-size: 19px; line-height: 1.75; letter-spacing: -0.02em; color: var(--kl-gray); }

/* 등장 애니메이션 */
.kl_sub .js-reveal { opacity: 0; transform: translateY(40px); transition: opacity 1s, transform 1s cubic-bezier(.2,.7,.2,1); }
.kl_sub .js-reveal.is_in { opacity: 1; transform: none; }

/* ---------- 히어로 ---------- */
.kl_sub_hero {
	position: relative; height: 72vh; height: 72dvh; min-height: 540px; max-height: 780px; overflow: hidden;  /* 2026-10-23 100vh → 72vh (너무 크다는 피드백) */
	background: var(--kl-navy-deep); color: #fff;
}
.kl_sub_hero .bg { position: absolute; inset: 0; }
.kl_sub_hero .bg img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 60% 50%; transform: scale(1.08); transition: transform 2.4s cubic-bezier(.2,.7,.2,1); }
.kl_sub_hero.is_in .bg img { transform: scale(1); }
/* 왼쪽 문구 가독성: 왼쪽·위·아래를 남색으로 어둡게 */
.kl_sub_hero .bg:after {
	content: ''; position: absolute; inset: 0;
	background:
		linear-gradient(90deg, rgba(10,32,66,.72) 0%, rgba(10,32,66,.38) 38%, rgba(10,32,66,0) 62%),
		linear-gradient(180deg, rgba(10,32,66,.45) 0%, rgba(10,32,66,0) 26%, rgba(10,32,66,0) 72%, rgba(10,32,66,.5) 100%);
}
.kl_sub_hero > .kl_in { position: relative; z-index: 1; height: 100%; }
/* 기준 박스: .kl_in 의 좌우 여백 안쪽 → 아래 absolute 요소들의 left:0 이 본문·로고 왼쪽 선과 맞는다 */
.kl_sub_hero .kl_in > .box { position: relative; height: 100%; }
.kl_sub_path {
	position: absolute; left: 0; top: calc(var(--kl-header-h) + 36px);
	display: flex; align-items: center; gap: 14px; font-family: 'Poppins', sans-serif; font-size: 15px; font-weight: 500; color: rgba(255,255,255,.78);
}
.kl_sub_path a { color: inherit; transition: color .3s; }
.kl_sub_path a:hover { color: #fff; }
.kl_sub_path i { display: block; width: 7px; height: 7px; margin-left: -4px; border: solid rgba(255,255,255,.6); border-width: 1.5px 1.5px 0 0; transform: rotate(45deg); }
.kl_sub_path strong { font-weight: 600; color: #fff; }
.kl_sub_hero_txt { position: absolute; left: 0; top: 50%; transform: translateY(-40%); max-width: 820px; }
.kl_sub_hero_txt .eye { display: block; font-family: 'Poppins', sans-serif; font-size: 13px; font-weight: 600; letter-spacing: .2em; color: rgba(255,255,255,.85); }
.kl_sub_hero_txt .big {
	display: block; margin: 14px 0 0 -0.04em; font-family: 'Poppins', sans-serif; font-size: clamp(76px, 6.4vw, 124px);
	font-weight: 700; line-height: .9; letter-spacing: -0.04em;
}
.kl_sub_hero_txt h2 { margin-top: 24px; font-size: 38px; font-weight: 700; letter-spacing: -0.03em; }
.kl_sub_hero_txt p { margin-top: 16px; font-size: 18px; line-height: 1.65; color: rgba(255,255,255,.9); letter-spacing: -0.02em; }
/* 문구는 아래에서 차례로 올라온다 */
.kl_sub_hero_txt > * { opacity: 0; transform: translateY(40px); transition: opacity 1s, transform 1.1s cubic-bezier(.2,.75,.2,1); }
.kl_sub_hero.is_in .kl_sub_hero_txt > * { opacity: 1; transform: none; }
.kl_sub_hero.is_in .kl_sub_hero_txt > :nth-child(2) { transition-delay: .1s; }
.kl_sub_hero.is_in .kl_sub_hero_txt > :nth-child(3) { transition-delay: .22s; }
.kl_sub_hero.is_in .kl_sub_hero_txt > :nth-child(4) { transition-delay: .34s; }

/* ---------- 01 사업 개요 (사진 왼쪽 화면 끝까지 + 문구 오른쪽) ---------- */
.kl_sub_ov { display: grid; grid-template-columns: 47% 1fr; align-items: center; gap: 0 7%; padding: 150px 0; }
.kl_sub_ov .ph { overflow: hidden; aspect-ratio: 16 / 11; }
.kl_sub_ov .ph img { display: block; width: 100%; height: 100%; object-fit: cover; }
.kl_sub_ov .ph.js-reveal { opacity: 1; transform: none; clip-path: inset(0 100% 0 0); transition: clip-path 1.4s cubic-bezier(.7,0,.2,1); }
.kl_sub_ov .ph.js-reveal.is_in { clip-path: inset(0 0 0 0); }
.kl_sub_ov .txt { padding-right: max(var(--kl-gutter), calc((100vw - 1600px) / 2)); }
.kl_sub_ov .txt .kl_label { margin-bottom: 30px; font-size: 16px; }
.kl_sub_ov .txt .kl_tit { font-size: 60px; }
.kl_sub_ov .txt p:not(.kl_label) { margin-top: 34px; font-size: 21px; line-height: 1.8; letter-spacing: -0.025em; color: #4a5566; }
.kl_sub_ov .txt .kl_tit + p { margin-top: 48px; }
.kl_sub_ov .txt p br { display: none; }  /* 글자가 커서 원고의 강제 줄바꿈은 쓰지 않고 칸 폭에 맞춰 흐르게 */
.kl_sub_ov .txt p:not(.kl_label) { max-width: 860px; }
.kl_sub_ov .txt p b { font-weight: 700; color: var(--kl-ink); }
/* LNG·LPG: 원고 줄바꿈 그대로 (PC 만). 긴 줄이 한 번 더 꺾이지 않게 문구 칸을 넓히고 글자를 화면 폭에 맞춰 줄인다 (2026-10-29) */
@media (min-width: 1401px) {
	.kl_sub_ov.kl_sub_ov_br { grid-template-columns: 42% 1fr; gap: 0 5%; }
	.kl_sub_ov.kl_sub_ov_br .txt p:not(.kl_label) { max-width: none; font-size: clamp(17px, 1.1vw, 21px); }
	.kl_sub_ov.kl_sub_ov_br .txt p br { display: inline; }
}

/* ---------- 02 경쟁력 (남색 배경 + 수치 4개) ---------- */
.kl_sub_st { position: relative; padding: 130px 0 120px; background: var(--kl-navy-deep); color: #fff; overflow: hidden; }
/* 배경: 섹션 전체. 배가 오른쪽에 있는 사진이라 오른쪽 기준으로 자르고, 왼쪽(문구·수치 쪽)만 남색으로 어둡게 */
.kl_sub_st .bg { position: absolute; inset: 0; }
.kl_sub_st .bg img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 85% 50%; }
.kl_sub_st .bg:after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(10,32,66,.82) 0%, rgba(10,32,66,.6) 45%, rgba(10,32,66,.12) 78%, rgba(10,32,66,0) 100%); }
.kl_sub_st .kl_in { position: relative; z-index: 1; }
.kl_sub_st .kl_label, .kl_sub_st .kl_tit { color: #fff; }
.kl_sub_st .kl_label b { color: #ff6b6b; }
.kl_sub_st .kl_label { margin-bottom: 30px; font-size: 16px; }
.kl_sub_st .kl_tit { font-size: 60px; }
.kl_sub_st ul { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 90px; }.kl_sub_st li { padding: 8px 24px 8px 40px; border-left: 1px solid rgba(255,255,255,.28); }
/* 수치는 한 줄 고정이라 화면 폭에 비례(1920 기준 약 76px) → '170,000+' 가 칸을 넘지 않는다 */
.kl_sub_st li strong { display: block; font-family: 'Poppins', sans-serif; font-size: clamp(56px, 3.95vw, 78px); font-weight: 600; line-height: 1.05; letter-spacing: -0.025em; white-space: nowrap; }
.kl_sub_st li strong small { margin-left: 4px; font-family: 'Noto Sans KR', sans-serif; font-size: .5em; font-weight: 500; }
.kl_sub_st li p { margin-top: 22px; font-size: 21px; line-height: 1.6; letter-spacing: -0.02em; color: rgba(255,255,255,.85); }

/* ---------- 03 파트너십 & 주요 계약 (위: 문구 + 세계지도 / 구분선 / 아래: 타임라인) ---------- */
.kl_sub_pt { padding: 140px 0 150px; }
.kl_sub .pt_top { display: grid; grid-template-columns: 32% 1fr; align-items: center; gap: 0 3%; }
/* LNG·LPG 03 섹션(문구+지도): 제목이 좁은 칸에서 어색하게 끊김 → PC 는 제목 글씨를 줄이고 원고 줄바꿈 대신 칸 폭에 맞춰 설명이 흐르게 (2026-10-29) */
@media (min-width: 1401px) {
	.kl_sub_pc_fit .pt_top { grid-template-columns: 38% 1fr; }
	.kl_sub_pc_fit .pt_top .kl_tit { font-size: 38px; }  /* 1401~1679: 제목 두 줄이 칸에 들어가게 */
	.kl_sub_pc_fit .pt_top .kl_desc { font-size: 18px; }
	.kl_sub_pc_fit .pt_top .kl_desc br { display: none; }
}
@media (max-width: 1400px) { .kl_sub_pc_fit .pt_top .kl_tit br { display: none; } }  /* 1단 배치에서는 제목이 넓게 흐르게 */
.kl_sub_pc_fit > .kl_in > .kl_map_info { margin-top: 56px; }  /* 카드: 지도 칸 밖으로 빼서 전체 폭 (2026-10-29) */
/* LNG·LPG 설명: 원고 줄바꿈 유지 요청 (2026-10-29). 넓은 화면에서만 문구 칸을 넓히고 글씨를 줄여 원고 두 줄이 칸에 들어가게 */
@media (min-width: 1680px) {
	.kl_sub_pc_fit .pt_top .kl_tit { font-size: 44px; }
	.kl_sub_pc_fit .pt_top .kl_desc { font-size: 17px; }
	.kl_sub_pc_fit .pt_top .kl_desc.keep_br br { display: inline; }
}
.kl_sub .map.js-reveal { transition-delay: .15s; }
/* 세계지도 SVG: world_map.png(1600x533, 투명 배경 점 지도)의 좌우 바다 여백을 viewBox 로 잘라 칸 폭을 꽉 채운다 */
.kl_map_svg { display: block; width: 100%; height: auto; overflow: visible; }
.kl_map_svg .arcs path { fill: none; stroke: #9db2d2; stroke-width: 1.6; stroke-linecap: round; opacity: .75; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.8s cubic-bezier(.5,0,.2,1); }
.kl_map_svg .pins circle { fill: var(--kl-navy); }
.kl_map_svg .pins .halo { fill: rgba(19,50,95,.14); }
.kl_map_svg .pins .ring { fill: none; stroke: var(--kl-navy); stroke-width: 1.5; }
.kl_map_svg .movers { opacity: 0; transition: opacity .8s 2s; }
.kl_map_svg .movers circle { fill: #2f6fd0; }
.kl_map_svg .movers .glow { fill: rgba(47,111,208,.22); }
/* 지도가 화면에 들어오면 호선이 그려지고, 다 그려진 뒤 이동 원이 나타난다 */
.kl_sub .map.is_in .arcs path { stroke-dashoffset: 0; }
.kl_sub .map.is_in .arcs path:nth-child(2) { transition-delay: .15s; }
.kl_sub .map.is_in .arcs path:nth-child(3) { transition-delay: .3s; }
.kl_sub .map.is_in .arcs path:nth-child(4) { transition-delay: .45s; }
.kl_sub .map.is_in .arcs path:nth-child(5) { transition-delay: .6s; }
.kl_sub .map.is_in .arcs path:nth-child(6) { transition-delay: .5s; }
.kl_sub .map.is_in .arcs path:nth-child(7) { transition-delay: .9s; }
.kl_sub .map.is_in .arcs path:nth-child(8) { transition-delay: .7s; }
.kl_sub .map.is_in .movers { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
	.kl_map_svg .arcs path { stroke-dashoffset: 0; transition: none; }
	.kl_map_svg .movers, .kl_map_svg .pins .ring { display: none; }
}
/* LPG 운항 지도: 선적항(빨간 링) / 양하항(남색 점) / 선적·양하 지역(빗금 원) / 운항항로(파란 선) */
.kl_map_svg .routes path { stroke: #3d6fd1; stroke-width: 1.8; opacity: .8; }
/* 지역 원: 점지도와 구분되도록 반투명 색 면 + 가는 테두리 */
.kl_map_svg .regions circle { stroke-width: 1; }
.kl_map_svg .regions .ld { fill: rgba(214,48,49,.16); stroke: rgba(214,48,49,.45); }
.kl_map_svg .regions .ds { fill: rgba(0,160,220,.16); stroke: rgba(0,160,220,.5); }
.kl_map_svg .ports .ld { fill: #fff; stroke: var(--kl-red); stroke-width: 2.4; }
.kl_map_svg .ports .ds { fill: var(--kl-navy); }
.kl_map_svg .ports .ring { fill: none; stroke: var(--kl-red); stroke-width: 1.5; }
/* Small LPGC 층: VLGC 와 한 지도에 겹치므로 주황 계열로 구분 */
.kl_map_svg .ly_alt .regions .un, .kl_map_svg .ly_alt .regions .ds { fill: rgba(240,140,20,.13); stroke: rgba(240,140,20,.55); stroke-dasharray: 4 3; }
.kl_map_svg .ly_alt .regions .ld { fill: rgba(240,140,20,.2); stroke: rgba(240,140,20,.6); }
.kl_map_svg .lbl .mid { text-anchor: middle; }
/* 지역 이름(원 안): 항구 이름과 구분되도록 작은 대문자 + 자간 + 지역 원 색 계열 */
.kl_map_svg .lbl .rg { font-size: 10.5px; font-weight: 600; letter-spacing: .12em; fill: #1f6f93; stroke-width: 2.5px; stroke: rgba(255,255,255,.85); }
.kl_map_svg .ly_alt .lbl .rg { fill: #a35a00; }
.kl_map_svg .ly_alt .ports .ld { stroke: #e8870e; }
.kl_map_svg .ly_alt .ports .ld.wrap { fill: none; stroke-width: 2; }
.kl_map_svg .ly_alt .ports .ds { fill: #e8870e; }
.kl_map_svg .ly_alt .ports .ring { stroke: #e8870e; }
.kl_map_svg .ly_alt .lbl text { fill: #9a5500; }
.kl_map_svg .lbl text { font-family: 'Poppins', sans-serif; font-size: 12.5px; font-weight: 600; fill: #3a4558; paint-order: stroke; stroke: #fff; stroke-width: 3px; stroke-linejoin: round; }
.kl_map_svg .lbl .end { text-anchor: end; }
/* 지도 아래 정보: 선종(노선)별 카드. 머리 = 선종명 + 지역·항로 기호, 본문 = 기호 + 항목명 + 항구 이름(점으로 구분한 텍스트) */
.kl_map_info { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 32px; }.kl_map_info .mi { padding: 36px 40px 18px; border-radius: 16px; background: #f5f7fb; }
.kl_map_info .mi_hd { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 24px; padding-bottom: 22px; }
/* 선종명: 배지 대신 색 막대 + 굵은 영문 */
.kl_map_info .mi .tag { flex: none; display: flex; align-items: center; gap: 10px; padding: 0; border-radius: 0; background: none; font-family: 'Poppins', sans-serif; font-size: 32px; font-weight: 700; letter-spacing: -0.02em; color: var(--kl-navy); }  /* 공통 .kl_sub .tag(배지) 해제 */
.kl_map_info .mi.ly_alt .tag { color: #c46d00; }
.kl_map_info .lgd { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-left: auto; font-size: 15px; color: #6b7789; }
.kl_map_info .lgd li { display: flex; align-items: center; gap: 8px; }
.kl_map_info dl > div { display: grid; grid-template-columns: 132px 1fr; gap: 16px; padding: 24px 0; border-top: 1px solid #e3e8f0; }
.kl_map_info dt { display: flex; align-items: center; gap: 11px; height: 30px; font-size: 18px; font-weight: 700; color: var(--kl-ink); white-space: nowrap; }
/* 구분 점은 각 항목 앞에 두고(폭 32px), dd 를 그만큼 왼쪽으로 당긴 뒤 왼쪽 32px 를 잘라 줄 첫머리 점을 숨긴다 → 줄 끝에 점이 남지 않음 */
.kl_map_info dd { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 0; margin-left: -32px; clip-path: inset(-6px 0 -6px 32px); }
.kl_map_info dd span { display: inline-flex; align-items: center; font-family: 'Poppins', sans-serif; font-size: 18px; font-weight: 500; line-height: 30px; letter-spacing: -0.005em; color: #2c3647; white-space: nowrap; }
.kl_map_info dd span:before { content: ''; flex: none; width: 4px; height: 4px; margin: 0 14px; border-radius: 50%; background: #b3bfcf; }
/* 기호 (지도 SVG 표시와 같은 모양·색) */
.kl_map_info i { display: block; flex: none; }
.kl_map_info .rg_ld, .kl_map_info .rg_ds, .kl_map_info .rg_un { width: 15px; height: 15px; border-radius: 50%; box-sizing: border-box; }
.kl_map_info .rg_ld { border: 1px solid rgba(214,48,49,.45); background: rgba(214,48,49,.2); }
.kl_map_info .rg_ds { border: 1px solid rgba(0,160,220,.5); background: rgba(0,160,220,.2); }
.kl_map_info .rg_un { border: 1px dashed rgba(240,140,20,.7); background: rgba(240,140,20,.16); }
.kl_map_info .pt_ld { width: 12px; height: 12px; border: 2.5px solid var(--kl-red); border-radius: 50%; background: #fff; }
.kl_map_info .pt_ds { width: 12px; height: 12px; border-radius: 50%; background: var(--kl-navy); }
.kl_map_info .rt { width: 24px; height: 2px; background: #3d6fd1; }
.kl_map_info .ly_alt .pt_ld { border-color: #e8870e; }
.kl_map_info .ly_alt .pt_ds { background: #e8870e; }
.kl_map_info .ly_alt .rg_ld { border: 1px solid rgba(240,140,20,.6); background: rgba(240,140,20,.22); }
.kl_map_info .ly_alt .rg_ds { border: 1px dashed rgba(240,140,20,.7); background: rgba(240,140,20,.14); }
.kl_sub_more {
	display: inline-flex; align-items: center; gap: 14px; margin-top: 44px;
	font-size: 16px; font-weight: 500; color: var(--kl-navy);
}
/* 화살표 아이콘(/img/cursor.png)을 마스크로 써서 글자색(currentColor)을 따른다. 이미지 비율 473:264 (여백 포함) */
.kl_sub_more i { display: block; width: 40px; height: 22px; background: currentColor; -webkit-mask: url(/img/cursor.png) center / 100% 100% no-repeat; mask: url(/img/cursor.png) center / 100% 100% no-repeat; transition: transform .3s; }
.kl_sub_more:hover i { transform: translateX(8px); }

/* 주요 계약 (파트너십 섹션 안, 구분선 아래 가로 타임라인) */
.kl_sub_kc { position: relative; margin-top: 30px; padding-top: 44px; }
/* 구분선: 양 끝이 흐려지는 가는 선 */
.kl_sub_kc:before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: linear-gradient(90deg, rgba(200,209,222,0) 0%, #dde3ec 12%, #dde3ec 88%, rgba(200,209,222,0) 100%); }
.kl_sub_kc .kl_sublabel { margin-bottom: 18px; font-family: 'Poppins', sans-serif; font-size: 14px; font-weight: 600; letter-spacing: .14em; color: #6f8fbf; }
.kl_sub_kc .kl_tit { font-size: 34px; }
.kl_sub_kc .kl_tit br { display: none; }  /* 원고는 두 줄이지만 이 자리는 소제목이라 한 줄로 */
.kl_sub_kc .kl_desc { margin-top: 12px; font-size: 18px; line-height: 1.6; }
.kl_sub_kc ol { position: relative; display: grid; grid-template-columns: repeat(5, 1fr); margin-top: 60px; }
/* 타임라인 가로선: 첫 점에서 시작해 오른쪽 끝 화살표까지 */
.kl_sub_kc ol:before { content: ''; position: absolute; left: 5px; right: 0; top: 74px; height: 1px; background: #c8d1de; }
.kl_sub_kc ol:after { content: ''; position: absolute; right: 0; top: 70px; width: 8px; height: 8px; border: solid #c8d1de; border-width: 1px 1px 0 0; transform: rotate(45deg); }
.kl_sub_kc li { position: relative; padding-right: clamp(30px, 4vw, 80px); }
/* 항목 사이 점선 구분 */
.kl_sub_kc li:not(:last-child):after { content: ''; position: absolute; right: clamp(15px, 2vw, 40px); top: 112px; bottom: 0; border-left: 1px dashed #d3dae4; }
.kl_sub_kc li .y { display: flex; align-items: flex-end; height: 58px; font-family: 'Poppins', sans-serif; font-size: 26px; font-weight: 600; line-height: 1.15; color: var(--kl-navy); }
.kl_sub_kc li:before { content: ''; position: absolute; left: 0; top: 69px; width: 11px; height: 11px; border-radius: 50%; background: var(--kl-navy); box-shadow: 0 0 0 5px rgba(19,50,95,.12); }
.kl_sub_kc li p { margin-top: 48px; font-size: 17px; line-height: 1.7; color: #4a5566; }
.kl_sub_kc li.js-reveal:nth-child(2) { transition-delay: .1s; }
.kl_sub_kc li.js-reveal:nth-child(3) { transition-delay: .2s; }
.kl_sub_kc li.js-reveal:nth-child(4) { transition-delay: .3s; }
.kl_sub_kc li.js-reveal:nth-child(5) { transition-delay: .4s; }
/* 독립 섹션으로 쓸 때 (LNG 04): 위쪽 구분선·여백 없이 섹션 제목 아래에 타임라인만 */
.kl_sub_ks { padding: 140px 0 150px; background: #f5f7fa; }
.kl_sub_ks .kl_sub_kc { margin-top: 30px; padding-top: 0; }
.kl_sub_ks .kl_sub_kc:before { display: none; }

/* ---------- 주요 계약 카드 (LPG: 사진 + 회사명 + 계약 내용, 3열) ---------- */
.kl_sub_pc { padding: 140px 0 150px; }
.kl_sub_pc .cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 40px; margin-top: 90px; }
.kl_sub_pc .cards > li { display: flex; flex-direction: column; align-items: flex-start; }
.kl_sub_pc .cards > li.js-reveal:nth-child(2) { transition-delay: .12s; }
.kl_sub_pc .cards > li.js-reveal:nth-child(3) { transition-delay: .24s; }
/* 사진 칸: 사진이 없을 때는 연한 남색 바탕 + 회사명 자리표시 */
.kl_sub_pc .ph { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; aspect-ratio: 16 / 9.5; overflow: hidden; background: linear-gradient(135deg, #eef2f7 0%, #d9e1ec 100%); }
.kl_sub_pc .ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s cubic-bezier(.2,.7,.2,1); }
.kl_sub_pc .cards > li:hover .ph img { transform: scale(1.05); }
.kl_sub_pc .ph_name { font-family: 'Poppins', sans-serif; font-size: 38px; font-weight: 700; letter-spacing: -0.02em; color: rgba(19,50,95,.28); }
.kl_sub_pc .cards > li > strong { margin-top: 32px; font-size: 26px; font-weight: 700; letter-spacing: -0.03em; color: var(--kl-navy); }
.kl_sub_pc .cards > li > p { margin-top: 14px; font-size: 18px; line-height: 1.7; letter-spacing: -0.02em; color: #4a5566; }
.kl_sub_pc .go { position: relative; display: block; width: 46px; height: 46px; margin-top: auto; border: 1px solid #c8d1de; border-radius: 50%; color: var(--kl-navy); transition: background .3s, border-color .3s, color .3s; }
.kl_sub_pc .cards > li > p + .go { margin-top: 28px; }
.kl_sub_pc .go i { position: absolute; left: 50%; top: 50%; width: 28px; height: 16px; margin: -8px 0 0 -14px; background: currentColor; -webkit-mask: url(/img/cursor.png) center / 100% 100% no-repeat; mask: url(/img/cursor.png) center / 100% 100% no-repeat; }
.kl_sub_pc .go:hover { background: var(--kl-navy); border-color: var(--kl-navy); color: #fff; }
/* 부문 카드(VLGC / SLPGC): 2열 + 사양 칩 + 주요 고객 로고 */
.kl_sub_pc .cards.seg { grid-template-columns: 1fr 1fr; gap: 0 56px; }
.kl_sub_pc .seg .ph { aspect-ratio: 16 / 8.5; }
.kl_sub_pc .seg > li > strong { display: flex; align-items: baseline; gap: 12px; font-family: 'Poppins', sans-serif; font-size: 34px; letter-spacing: -0.01em; }
.kl_sub_pc .seg > li > strong small { font-family: 'Noto Sans KR', sans-serif; font-size: 17px; font-weight: 500; color: var(--kl-gray); }
.kl_sub_pc .spec { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.kl_sub_pc .spec li { padding: 6px 14px; border: 1px solid #c8d1de; border-radius: 20px; font-size: 14px; font-weight: 500; color: var(--kl-navy); }
.kl_sub_pc .spec li:first-child { border-color: var(--kl-navy); background: var(--kl-navy); color: #fff; }
.kl_sub_pc .client { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 30px; width: 100%; margin-top: 24px; padding-top: 22px; border-top: 1px solid var(--kl-line); }
.kl_sub_pc .client_h { font-size: 14px; font-weight: 600; color: var(--kl-gray); }
.kl_sub_pc .client img { display: block; height: 30px; width: auto; mix-blend-mode: multiply; }
.kl_sub_pc .client + .go { margin-top: 28px; }

/* ---------- Ship Management: 도입 문구 (가운데 정렬) ---------- */
.kl_sm_intro { padding: 150px 0 100px; text-align: center; }
.kl_sm_intro .kl_label { justify-content: center; }
.kl_sm_intro .kl_desc { max-width: 1200px; margin: 34px auto 0; font-size: 20px; line-height: 1.85; }  /* 원고 줄바꿈 첫 줄(약 1050px)이 들어가게 1000 → 1200 (2026-10-29) */
@media (max-width: 1400px) { .kl_sm_intro .kl_desc br { display: none; } }  /* 좁은 화면은 원고 줄바꿈 없이 흐르게 */
.kl_sm_intro .kl_desc b { font-weight: 700; color: var(--kl-ink); }

/* ---------- Ship Management: 카테고리 탭 (헤더 아래 고정) ---------- */
.kl_sm_tab { position: sticky; top: var(--kl-header-h); z-index: 20; background: #fff; border-top: 1px solid var(--kl-line); border-bottom: 1px solid var(--kl-line); }
.kl_sm_tab .kl_in { display: flex; }
.kl_sm_tab button {
	position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; height: 104px;
	border: 0; background: none; font-family: inherit; cursor: pointer; color: #9aa5b5; transition: color .3s;
}
.kl_sm_tab button + button:before { content: ''; position: absolute; left: 0; top: 30px; bottom: 30px; width: 1px; background: var(--kl-line); }
.kl_sm_tab button span { font-size: 23px; font-weight: 700; letter-spacing: -0.03em; }
.kl_sm_tab button small { font-family: 'Poppins', sans-serif; font-size: 13px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; }
.kl_sm_tab button:after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; background: var(--kl-navy); transform: scaleX(0); transition: transform .4s cubic-bezier(.2,.7,.2,1); }
.kl_sm_tab button:hover { color: var(--kl-navy); }
.kl_sm_tab button.on { color: var(--kl-navy); }
.kl_sm_tab button.on:after { transform: scaleX(1); }

/* ---------- Ship Management: 탭 패널 공통 (제목·설명 2단 → 와이드 사진 → 항목) ---------- */
.kl_sm_pn { padding: 120px 0 150px; }
.kl_sm_pn[hidden] { display: none; }
.kl_sm_pn.crew { background: var(--kl-sky); }
.kl_sm_pn .pn_hd { display: grid; grid-template-columns: 1fr 1fr; align-items: end; gap: 0 6%; }
.kl_sm_pn .pn_hd .kl_label { color: var(--kl-red); }
.kl_sm_pn .pn_hd .kl_desc { margin-top: 0; }
.kl_sm_pn .pn_ph { overflow: hidden; margin-top: 64px; aspect-ratio: 21 / 7; }
.kl_sm_pn .pn_ph img { display: block; width: 100%; height: 100%; object-fit: cover; }
.kl_sm_pn .pn_ph.js-reveal { opacity: 1; transform: none; clip-path: inset(0 0 0 100%); transition: clip-path 1.4s cubic-bezier(.7,0,.2,1); }
.kl_sm_pn .pn_ph.js-reveal.is_in { clip-path: inset(0 0 0 0); }
.kl_sm_pn .n { font-family: 'Poppins', sans-serif; font-weight: 600; }

/* 선박관리 4개 항목: 2×2 카드 */
.kl_sm_pn .grid4 { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; margin-top: 30px; }
.kl_sm_pn .grid4 > li { padding: 50px 50px 54px; border: 1px solid var(--kl-line); background: #fff; transition: border-color .4s, box-shadow .4s; }
.kl_sm_pn .grid4 > li:hover { border-color: var(--kl-navy); box-shadow: 0 20px 40px -24px rgba(19,50,95,.35); }
.kl_sm_pn .grid4 > li.js-reveal:nth-child(even) { transition-delay: .12s; }
.kl_sm_pn .grid4 .n { display: inline-block; padding-bottom: 6px; border-bottom: 2px solid var(--kl-red); font-size: 16px; color: var(--kl-red); }
.kl_sm_pn .grid4 h4 { margin-top: 28px; font-family: 'Poppins', sans-serif; font-size: 27px; font-weight: 600; line-height: 1.3; letter-spacing: -0.015em; color: var(--kl-navy); }
.kl_sm_pn .grid4 h4 small { display: block; margin-top: 10px; font-family: 'Noto Sans KR', sans-serif; font-size: 17px; font-weight: 500; letter-spacing: -0.02em; color: var(--kl-gray); }
.kl_sm_pn .grid4 p { margin-top: 22px; font-size: 17px; line-height: 1.75; letter-spacing: -0.02em; color: #4a5566; }
.kl_sm_pn .grid4 p + p { margin-top: 12px; }
.kl_sub .tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.kl_sub .tags li { padding: 6px 14px; border: 1px solid #c8d1de; border-radius: 20px; background: #fff; font-size: 14px; font-weight: 500; color: var(--kl-navy); }




/* 선원관리: 사진을 배경으로 두고 교육체계 흰 패널이 사진 위로 겹쳐 올라온다 */
.kl_sm_pn.crew .pn_ph { aspect-ratio: 21 / 8; }
.kl_sm_pn .edu { position: relative; z-index: 1; margin: -260px 40px 0; padding: 70px 64px 64px; background: #fff; box-shadow: 0 30px 70px -36px rgba(19,50,95,.45); }

/* 윗줄: 제목 / 3원 다이어그램 / 요약 + 체크 */
.kl_sm_pn .edu_top { display: grid; grid-template-columns: 1fr minmax(0, 460px) 1fr; align-items: center; gap: 0 56px; }
.kl_sm_pn .edu_tit { font-size: 36px; font-weight: 700; line-height: 1.3; letter-spacing: -0.035em; color: var(--kl-navy); }
.kl_sm_pn .edu_desc { margin-top: 22px; font-size: 18px; line-height: 1.75; letter-spacing: -0.02em; color: #4a5566; }
.kl_sm_pn .edu_side { padding-left: 40px; border-left: 1px solid var(--kl-line); }
.kl_sm_pn .edu_side p { font-size: 17px; line-height: 1.75; letter-spacing: -0.02em; color: #4a5566; }
.kl_sm_pn .chk { margin-top: 28px; }
.kl_sm_pn .chk li { position: relative; padding-left: 34px; font-size: 17px; font-weight: 500; line-height: 22px; color: var(--kl-ink); }
.kl_sm_pn .chk li + li { margin-top: 14px; }
.kl_sm_pn .chk li:before { content: ''; position: absolute; left: 0; top: 0; width: 22px; height: 22px; border-radius: 50%; background: var(--kl-navy); }
.kl_sm_pn .chk li:after { content: ''; position: absolute; left: 7px; top: 6px; width: 8px; height: 5px; border: solid #fff; border-width: 0 0 2px 2px; transform: rotate(-45deg); }

/* 3원 다이어그램: 좌표는 460×420 기준 % — 화면이 좁아지면 같은 비율로 줄어든다 */
.kl_sm_pn .venn { position: relative; width: 100%; aspect-ratio: 460 / 420; }
.kl_sm_pn .venn .c { position: absolute; width: 58.7%; aspect-ratio: 1; border-radius: 50%; mix-blend-mode: multiply; }
.kl_sm_pn .venn .c1 { left: 20.65%; top: 0; background: rgba(240,128,122,.42); }
.kl_sm_pn .venn .c2 { left: 4.35%; top: 34.5%; background: rgba(60,88,138,.42); }
.kl_sm_pn .venn .c3 { left: 37%; top: 34.5%; background: rgba(110,160,225,.42); }
.kl_sm_pn .venn .l { position: absolute; display: flex; flex-direction: column; align-items: center; transform: translate(-50%, -50%); text-align: center; white-space: nowrap; color: var(--kl-navy); }
.kl_sm_pn .venn .l svg { width: 26px; height: 26px; margin-bottom: 8px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.kl_sm_pn .venn .l b { font-size: 18px; font-weight: 700; line-height: 1.3; letter-spacing: -0.03em; }
.kl_sm_pn .venn .l small { margin-top: 3px; font-family: 'Poppins', sans-serif; font-size: 11px; font-weight: 500; color: #5f6b7c; }
.kl_sm_pn .venn .l1 { left: 50%; top: 17%; }
.kl_sm_pn .venn .l1 svg { color: var(--kl-red); }
.kl_sm_pn .venn .l2 { left: 24%; top: 69%; }
.kl_sm_pn .venn .l3 { left: 76%; top: 69%; }
.kl_sm_pn .venn .core {
	position: absolute; left: 50%; top: 55%; display: flex; align-items: center; justify-content: center; width: 22%; aspect-ratio: 1; transform: translate(-50%, -50%);
	border-radius: 50%; background: var(--kl-navy); box-shadow: 0 0 0 6px rgba(255,255,255,.55); font-family: 'Poppins', sans-serif; font-size: 14px; font-weight: 700; line-height: 1.2; text-align: center; color: #fff;
}

/* 아랫줄: 영역별 카드. 카드마다 강조색(--ac = 위 원 색)을 두고 번호·상단 띠·소제목·체크 아이콘에 같이 쓴다 */
.kl_sm_pn .edu_cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 64px; }
.kl_sm_pn .edu_cards > li { --ac: var(--kl-navy); --ac-bg: rgba(19,50,95,.08);
	position: relative; display: flex; flex-direction: column; padding: 34px 32px 36px; border: 1px solid #e3e8f0; border-radius: 16px; background: #fff; overflow: hidden;
	transition: opacity 1s, transform 1s cubic-bezier(.2,.7,.2,1), box-shadow .5s, border-color .5s; }
.kl_sm_pn .edu_cards > li.t1 { --ac: var(--kl-red); --ac-bg: rgba(214,48,49,.08); }
.kl_sm_pn .edu_cards > li.t3 { --ac: #3d7bd6; --ac-bg: rgba(61,123,214,.1); }
.kl_sm_pn .edu_cards > li.js-reveal:nth-child(2) { transition-delay: .12s, .12s, 0s, 0s; }
.kl_sm_pn .edu_cards > li.js-reveal:nth-child(3) { transition-delay: .24s, .24s, 0s, 0s; }
/* 상단 강조 띠: 평소엔 짧게, 호버 시 카드 끝까지 */
.kl_sm_pn .edu_cards > li:before { content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 4px; background: var(--ac); transform: scaleX(.16); transform-origin: 0 0; transition: transform .7s cubic-bezier(.2,.7,.2,1); }
.kl_sm_pn .edu_cards > li:hover { border-color: transparent; box-shadow: 0 28px 56px -30px rgba(19,50,95,.35); }
.kl_sm_pn .edu_cards > li:hover:before { transform: scaleX(1); }
.kl_sm_pn .c_hd { display: flex; align-items: flex-start; gap: 16px; }
.kl_sm_pn .c_hd b { font-family: 'Poppins', sans-serif; font-size: 22px; font-weight: 700; line-height: 1.25; color: var(--ac); }
.kl_sm_pn .c_hd strong { font-size: 25px; font-weight: 700; line-height: 1.2; letter-spacing: -0.03em; color: var(--kl-navy); }
.kl_sm_pn .c_hd strong small { display: block; margin-top: 7px; font-family: 'Poppins', sans-serif; font-size: 13px; font-weight: 500; letter-spacing: .04em; color: #7f90ab; }
.kl_sm_pn .c_ph { overflow: hidden; margin-top: 24px; border-radius: 10px; aspect-ratio: 16 / 9; }
.kl_sm_pn .c_ph img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s cubic-bezier(.2,.7,.2,1); }
.kl_sm_pn .edu_cards > li:hover .c_ph img { transform: scale(1.05); }
.kl_sm_pn .c_desc { margin-top: 22px; font-size: 17px; line-height: 1.75; letter-spacing: -0.02em; color: #4a5566; word-break: keep-all; }
/* 항목 영역: 흰 상자 대신 구분선 아래에 소제목 + 체크 목록 */
.kl_sm_pn .c_box { flex: 1; margin-top: 26px; padding-top: 26px; border-top: 1px solid #e3e8f0; }
.kl_sm_pn .c_box h5 { display: inline-block; padding: 5px 12px; border-radius: 6px; background: var(--ac-bg); font-family: 'Poppins', sans-serif; font-size: 14px; font-weight: 600; line-height: 1.4; letter-spacing: .01em; color: var(--ac); }
.kl_sm_pn .c_box ul + h5 { margin-top: 26px; }
.kl_sm_pn .c_box h5 + ul { margin-top: 14px; }
.kl_sm_pn .c_box li { position: relative; padding-left: 30px; font-size: 16.5px; font-weight: 500; line-height: 1.6; letter-spacing: -0.02em; color: #2c3647; word-break: keep-all; }
.kl_sm_pn .c_box li + li { margin-top: 10px; }
/* 체크 아이콘: 강조색 옅은 원 + 강조색 체크 */
.kl_sm_pn .c_box li:before { content: ''; position: absolute; left: 0; top: .2em; width: 20px; height: 20px; border-radius: 50%; background: var(--ac-bg); }
.kl_sm_pn .c_box li:after { content: ''; position: absolute; left: 6.5px; top: calc(.2em + 6px); width: 7px; height: 4px; border: solid var(--ac); border-width: 0 0 2px 2px; transform: rotate(-45deg); }

/* 선발·양성 5단계: 흰 원(그림자) + 아이콘 + 번호 + 단계명 + 영문, 마지막만 남색 */
.kl_sm_pn .proc { margin-top: 110px; text-align: center; }
.kl_sm_pn .proc_h { font-size: 46px; font-weight: 700; letter-spacing: -0.035em; color: var(--kl-navy); }
.kl_sm_pn .proc_d { margin-top: 14px; font-size: 19px; color: var(--kl-gray); }
.kl_sm_pn .proc ol { display: flex; justify-content: center; gap: 0 52px; margin-top: 60px; }
.kl_sm_pn .proc li { position: relative; flex: 0 1 240px; }
.kl_sm_pn .proc li span {
	display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; aspect-ratio: 1; border-radius: 50%; transition: transform .4s cubic-bezier(.2,.7,.2,1), box-shadow .4s;
	background: #fff; box-shadow: 0 16px 36px -18px rgba(19,50,95,.35), inset 0 0 0 1px #e3e9f1; color: var(--kl-navy);
}
.kl_sm_pn .proc li svg { width: 42px; height: 42px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.kl_sm_pn .proc li b { margin-top: 16px; font-family: 'Poppins', sans-serif; font-size: 16px; font-weight: 600; color: var(--kl-red); }
.kl_sm_pn .proc li em { margin-top: 6px; font-style: normal; font-size: 25px; font-weight: 700; letter-spacing: -0.03em; }
.kl_sm_pn .proc li small { margin-top: 6px; font-family: 'Poppins', sans-serif; font-size: 15px; font-weight: 500; color: var(--kl-gray); }
.kl_sm_pn .proc li:hover span { transform: translateY(-8px); box-shadow: 0 26px 44px -20px rgba(19,50,95,.45), inset 0 0 0 1px #e3e9f1; }
.kl_sm_pn .proc li:last-child span { background: var(--kl-navy); box-shadow: 0 16px 36px -14px rgba(19,50,95,.55); color: #fff; }
.kl_sm_pn .proc li:last-child b { color: #ff8a8a; }
.kl_sm_pn .proc li:last-child small { color: rgba(255,255,255,.7); }
.kl_sm_pn .proc li:not(:last-child):after { content: ''; position: absolute; right: -32px; top: 50%; width: 12px; height: 12px; margin-top: -6px; border: solid var(--kl-navy); border-width: 2.5px 2.5px 0 0; transform: rotate(45deg); }


/* ---------- 인재상 01: 가운데 헤드라인 + 인용 2개 ---------- */
.kl_tl_ov { padding: 150px 0 140px; }
.kl_tl_ov .hd { text-align: center; }
.kl_tl_ov .hd .kl_label { justify-content: center; }
/* 5각 다이어그램: 좌표는 정사각형 기준 % (중심 50/50, 반지름 36%, -90°부터 72° 간격) */
.kl_tl_ov .tl_dia { position: relative; width: min(620px, 100%); aspect-ratio: 1; margin: 70px auto 0; }
.kl_tl_ov .tl_dia .ring { position: absolute; left: 14%; top: 14%; width: 72%; aspect-ratio: 1; border: 14px solid #e9edf2; border-radius: 50%; box-sizing: border-box; }
.kl_tl_ov .tl_dia .logo { position: absolute; left: 50%; top: 50%; width: 30%; transform: translate(-50%, -50%); }
.kl_tl_ov .tl_dia li { position: absolute; width: 23%; aspect-ratio: 1; transform: translate(-50%, -50%) scale(.6); opacity: 0; transition: transform .7s cubic-bezier(.3,1.4,.5,1), opacity .5s; }
.kl_tl_ov .tl_dia.is_in li { transform: translate(-50%, -50%); opacity: 1; }
.kl_tl_ov .tl_dia li span {
	display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; padding: 0 8%; box-sizing: border-box;
	border: 12px solid; border-radius: 50%; background: #fff; box-shadow: 0 14px 30px -14px rgba(19,50,95,.35);
	font-size: 16px; font-weight: 700; line-height: 1.3; letter-spacing: -0.03em; text-align: center; word-break: keep-all; transition: scale .4s;
}
.kl_tl_ov .tl_dia li:hover span { scale: 1.06; }  /* transform 은 회전 애니메이션이 쓰므로 개별 scale 속성으로 */
/* 천천히 회전: 원 5개 묶음(ul)이 가운데를 축으로 돌고, 각 원(span)은 반대로 돌아 글자가 항상 바로 선다. 마우스를 올리면 멈춤 */
.kl_tl_ov .tl_dia ul { position: absolute; inset: 0; animation: klTlOrbit 60s linear infinite; }
.kl_tl_ov .tl_dia li span { animation: klTlOrbit 60s linear infinite reverse; }
.kl_tl_ov .tl_dia:hover ul, .kl_tl_ov .tl_dia:hover li span { animation-play-state: paused; }
@keyframes klTlOrbit { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
	.kl_tl_ov .tl_dia ul, .kl_tl_ov .tl_dia li span { animation: none; }
}
.kl_tl_ov .tl_dia .d1 { left: 50%; top: 14%; transition-delay: .2s; }
.kl_tl_ov .tl_dia .d2 { left: 84.2%; top: 38.9%; transition-delay: .32s; }
.kl_tl_ov .tl_dia .d3 { left: 71.2%; top: 79.1%; transition-delay: .44s; }
.kl_tl_ov .tl_dia .d4 { left: 28.8%; top: 79.1%; transition-delay: .56s; }
.kl_tl_ov .tl_dia .d5 { left: 15.8%; top: 38.9%; transition-delay: .68s; }
.kl_tl_ov .tl_dia .d1 span { border-color: #e9555a; color: #d63031; }
.kl_tl_ov .tl_dia .d2 span { border-color: #13325f; color: #13325f; }
.kl_tl_ov .tl_dia .d3 span { border-color: #5b93d6; color: #2f69b3; }
.kl_tl_ov .tl_dia .d4 span { border-color: #13325f; color: #13325f; }
.kl_tl_ov .tl_dia .d5 span { border-color: #5b93d6; color: #2f69b3; }
.kl_tl_ov .quote { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; max-width: 1400px; margin: 80px auto 0; }
.kl_tl_ov .quote li { position: relative; padding: 64px 56px 60px; background: var(--kl-sky); }
.kl_tl_ov .quote li.js-reveal:nth-child(2) { transition-delay: .12s; }
.kl_tl_ov .quote li:before { content: '\201C'; position: absolute; left: 50px; top: 18px; font-family: Georgia, serif; font-size: 90px; line-height: 1; color: var(--kl-red); opacity: .85; }
.kl_tl_ov .quote p { position: relative; padding-top: 28px; font-size: 26px; font-weight: 500; line-height: 1.6; letter-spacing: -0.03em; color: var(--kl-ink); }
.kl_tl_ov .quote p b { font-weight: 700; color: var(--kl-navy); }

/* ---------- 인재상 02: 남색 배경 + 핵심가치 5개 (세로 구분선 칼럼) ---------- */
.kl_tl_cv { padding: 140px 0 150px; background: var(--kl-navy-deep); color: #fff; }
.kl_tl_cv .hd { display: grid; grid-template-columns: 1fr 1fr; align-items: end; gap: 0 6%; }
.kl_tl_cv .kl_label, .kl_tl_cv .kl_tit { color: #fff; }
.kl_tl_cv .kl_label b { color: #ff6b6b; }
.kl_tl_cv .kl_desc { margin-top: 0; color: rgba(255,255,255,.75); }
/* 핵심가치 카드: 반투명 유리 면 5장. 호버 시 떠오르며 흰 면으로 전환(글자 남색, 아이콘 빨강) */
.kl_tl_cv .vals { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; margin-top: 90px; }
.kl_tl_cv .vals li { position: relative; display: flex; flex-direction: column; padding: 36px 30px 40px; border: 1px solid rgba(255,255,255,.1); border-radius: 18px; background: rgba(255,255,255,.045); overflow: hidden;
	transition: opacity 1s, transform .6s cubic-bezier(.2,.7,.2,1), background-color .45s, border-color .45s, box-shadow .45s; }
.kl_tl_cv .vals li.js-reveal:nth-child(2) { transition-delay: .08s, .08s, 0s, 0s, 0s; }
.kl_tl_cv .vals li.js-reveal:nth-child(3) { transition-delay: .16s, .16s, 0s, 0s, 0s; }
.kl_tl_cv .vals li.js-reveal:nth-child(4) { transition-delay: .24s, .24s, 0s, 0s, 0s; }
.kl_tl_cv .vals li.js-reveal:nth-child(5) { transition-delay: .32s, .32s, 0s, 0s, 0s; }
.kl_tl_cv .vals li.is_in:hover { transform: translateY(-10px); border-color: #fff; background-color: #fff; box-shadow: 0 34px 60px -30px rgba(0,0,0,.6); transition-delay: 0s; }
/* 아래쪽 빨간 선: 호버 시 왼쪽에서 늘어난다 */
.kl_tl_cv .vals li:after { content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 4px; background: var(--kl-red); transform: scaleX(0); transform-origin: 0 0; transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.kl_tl_cv .vals li:hover:after { transform: scaleX(1); }
/* 위: 번호 + 가는 구분선 → 소제목 → 제목 → 설명 (모든 카드 같은 구조라 줄이 맞는다) */
.kl_tl_cv .n { display: block; padding-bottom: 22px; border-bottom: 1px solid rgba(255,255,255,.14); font-family: 'Poppins', sans-serif; font-size: 18px; font-weight: 700; line-height: 1; letter-spacing: .02em; color: #ff8a8a; transition: color .45s, border-color .45s; }
.kl_tl_cv .vals li:hover .n { color: var(--kl-red); border-color: #e3e8f0; }
.kl_tl_cv .vals small { margin-top: 30px; font-family: 'Poppins', 'Noto Sans KR', sans-serif; font-size: 14px; font-weight: 600; letter-spacing: .03em; color: rgba(255,255,255,.6); transition: color .45s; }
.kl_tl_cv .vals li:hover small { color: var(--kl-gray); }
.kl_tl_cv .vals strong { min-height: 2.6em; margin-top: 8px; font-size: 27px; font-weight: 700; line-height: 1.3; letter-spacing: -0.03em; color: #fff; word-break: keep-all; transition: color .45s; }  /* 두 줄 제목(Business Intelligence)과 설명 시작선을 맞춘다 */
.kl_tl_cv .vals li:hover strong { color: var(--kl-navy); }
.kl_tl_cv .vals p { margin-top: 14px; font-size: 17px; line-height: 1.8; letter-spacing: -0.02em; color: rgba(255,255,255,.88); word-break: keep-all; transition: color .45s; }
.kl_tl_cv .vals li:hover p { color: #4a5566; }

/* ---------- 선대 현황: 갤러리 (분류 탭 + 카드 + 크게 보기 팝업) ---------- */
.kl_fl_gl { padding: 140px 0 150px; }
.kl_fl_gl .hd { display: grid; grid-template-columns: 1fr 1fr; align-items: end; gap: 0 6%; }
.kl_fl_gl .hd .kl_label { color: var(--kl-red); }
.kl_fl_gl .hd .kl_desc { margin-top: 0; }
.kl_fl_gl .bar { display: flex; align-items: center; justify-content: space-between; margin-top: 70px; padding-bottom: 22px; border-bottom: 2px solid var(--kl-navy); }
.kl_fl_gl .flt { display: flex; gap: 10px; }
.kl_fl_gl .flt button {
	display: inline-flex; align-items: center; gap: 8px; height: 46px; padding: 0 22px; border: 1px solid #c8d1de; border-radius: 30px; background: #fff;
	font-family: inherit; font-size: 16px; font-weight: 600; color: var(--kl-gray); cursor: pointer; transition: background .3s, border-color .3s, color .3s;
}
.kl_fl_gl .flt button em { font-family: 'Poppins', sans-serif; font-size: 13px; font-style: normal; font-weight: 500; opacity: .7; }
.kl_fl_gl .flt button:hover { border-color: var(--kl-navy); color: var(--kl-navy); }
.kl_fl_gl .flt button.on { border-color: var(--kl-navy); background: var(--kl-navy); color: #fff; }
.kl_fl_gl .cnt { font-size: 15px; color: var(--kl-gray); }
.kl_fl_gl .cnt b { font-family: 'Poppins', sans-serif; font-weight: 600; color: var(--kl-red); }
.kl_fl_gl .grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 56px 30px; margin-top: 50px; }
.kl_fl_gl .grid > li[hidden] { display: none; }
.kl_fl_gl .grid > li.js-reveal:nth-child(3n+2) { transition-delay: .1s; }
.kl_fl_gl .grid > li.js-reveal:nth-child(3n) { transition-delay: .2s; }
.kl_fl_gl .card { display: flex; flex-direction: column; align-items: flex-start; width: 100%; padding: 0; border: 0; background: none; font-family: inherit; text-align: left; cursor: pointer; }
.kl_fl_gl .card .ph { position: relative; display: block; width: 100%; overflow: hidden; aspect-ratio: 4 / 3; background: var(--kl-sky); }
.kl_fl_gl .card .ph img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s cubic-bezier(.2,.7,.2,1); }
.kl_fl_gl .card .ph:after { content: ''; position: absolute; inset: 0; background: rgba(13,38,72,.35); opacity: 0; transition: opacity .4s; }
.kl_fl_gl .card:hover .ph img { transform: scale(1.06); }
.kl_fl_gl .card:hover .ph:after { opacity: 1; }
.kl_fl_gl .zoom { position: absolute; left: 50%; top: 50%; z-index: 1; width: 64px; height: 64px; margin: -32px 0 0 -32px; border: 1px solid rgba(255,255,255,.8); border-radius: 50%; opacity: 0; transform: scale(.7); transition: opacity .4s, transform .4s; }
.kl_fl_gl .zoom:before, .kl_fl_gl .zoom:after { content: ''; position: absolute; left: 50%; top: 50%; background: #fff; }
.kl_fl_gl .zoom:before { width: 20px; height: 1.5px; margin: -1px 0 0 -10px; }
.kl_fl_gl .zoom:after { width: 1.5px; height: 20px; margin: -10px 0 0 -1px; }
.kl_fl_gl .card:hover .zoom { opacity: 1; transform: none; }
.kl_sub .tag { display: inline-block; padding: 5px 12px; border-radius: 20px; font-family: 'Poppins', sans-serif; font-size: 12px; font-weight: 600; letter-spacing: .02em; }
.kl_sub .tag.lng { background: #e7eef9; color: #2f69b3; }
.kl_sub .tag.lpg { background: #fbe9e9; color: var(--kl-red); }
.kl_fl_gl .card .tag { margin-top: 22px; }
.kl_fl_gl .card strong { margin-top: 12px; font-family: 'Poppins', sans-serif; font-size: 24px; font-weight: 600; letter-spacing: -0.01em; color: var(--kl-navy); }
.kl_fl_gl .card .cap { margin-top: 6px; font-size: 16px; color: var(--kl-gray); }

.kl_fl_gl .pager { display: flex; justify-content: center; align-items: center; gap: 6px; margin-top: 70px; }
.kl_fl_gl .pager:empty { display: none; }
.kl_fl_gl .pager button {
	display: flex; align-items: center; justify-content: center; min-width: 44px; height: 44px; padding: 0 6px; border: 1px solid transparent; border-radius: 50%;
	background: none; font-family: 'Poppins', sans-serif; font-size: 16px; font-weight: 500; color: var(--kl-gray); cursor: pointer; transition: background .3s, color .3s, border-color .3s;
}
.kl_fl_gl .pager .num:hover { color: var(--kl-navy); border-color: #c8d1de; }
.kl_fl_gl .pager .num.on { background: var(--kl-navy); color: #fff; }
.kl_fl_gl .pager .arw { border-color: #c8d1de; }
.kl_fl_gl .pager .arw.prev { margin-right: 10px; }
.kl_fl_gl .pager .arw.next { margin-left: 10px; }
.kl_fl_gl .pager .arw i { display: block; width: 9px; height: 9px; border: solid var(--kl-navy); border-width: 1.5px 1.5px 0 0; }
.kl_fl_gl .pager .prev i { margin-left: 3px; transform: rotate(-135deg); }
.kl_fl_gl .pager .next i { margin-right: 3px; transform: rotate(45deg); }
.kl_fl_gl .pager .arw:not(:disabled):hover { background: var(--kl-navy); border-color: var(--kl-navy); }
.kl_fl_gl .pager .arw:not(:disabled):hover i { border-color: #fff; }
.kl_fl_gl .pager .arw:disabled { opacity: .35; cursor: default; }
.kl_fl_modal { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: 40px; }
.kl_fl_modal[hidden] { display: none; }
.kl_fl_modal .dim { position: absolute; inset: 0; background: rgba(8,24,49,.82); }
/* 사진 칸은 3:2 고정(사진 10장 평균 비율 ≈ 1.48) → 어떤 사진이든 팝업 크기가 같다. 화면 높이에 맞춰 폭도 줄인다 */
.kl_fl_modal .box { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 400px; width: min(1400px, 100%, calc((100vh - 80px) * 1.5 + 400px)); background: #fff; animation: klFlIn .4s cubic-bezier(.2,.7,.2,1); }
@keyframes klFlIn { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
.kl_fl_modal .ph { background: #0d2648; }
.kl_fl_modal .ph { aspect-ratio: 3 / 2; }
.kl_fl_modal .ph img { display: block; width: 100%; height: 100%; object-fit: cover; }
.kl_fl_modal .info { height: 0; min-height: 100%; padding: 56px 44px 48px; box-sizing: border-box; overflow-y: auto; }  /* 높이는 사진 칸을 따르고 넘치면 스크롤 */
.kl_fl_modal .info strong { display: block; margin-top: 16px; font-family: 'Poppins', sans-serif; font-size: 34px; font-weight: 600; color: var(--kl-navy); }
.kl_fl_modal .info p { margin-top: 18px; font-size: 16px; line-height: 1.75; letter-spacing: -0.02em; color: #4a5566; }
.kl_fl_modal .info dl { display: grid; grid-template-columns: auto 1fr; gap: 0 20px; margin-top: 30px; border-top: 2px solid var(--kl-navy); }
.kl_fl_modal .info dt, .kl_fl_modal .info dd { padding: 15px 0; border-bottom: 1px solid var(--kl-line); font-size: 15px; }
.kl_fl_modal .info dt { font-weight: 600; color: var(--kl-navy); }
.kl_fl_modal .info dd { color: #4a5566; }
.kl_fl_modal button { position: absolute; display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; border: 0; border-radius: 50%; background: #fff; cursor: pointer; box-shadow: 0 10px 24px -10px rgba(0,0,0,.4); transition: background .3s; }
.kl_fl_modal button:hover { background: var(--kl-navy); }
.kl_fl_modal button i { position: relative; display: block; width: 12px; height: 12px; border: solid var(--kl-navy); border-width: 2px 2px 0 0; transition: border-color .3s; }
.kl_fl_modal button:hover i { border-color: #fff; }
.kl_fl_modal .prev { left: -28px; top: 50%; margin-top: -28px; }
.kl_fl_modal .prev i { margin-left: 4px; transform: rotate(-135deg); }
.kl_fl_modal .next { right: -28px; top: 50%; margin-top: -28px; }
.kl_fl_modal .next i { margin-right: 4px; transform: rotate(45deg); }
.kl_fl_modal .close { right: 18px; top: 18px; width: 44px; height: 44px; box-shadow: none; background: var(--kl-sky); }
.kl_fl_modal .close i { width: 18px; height: 18px; border: 0; }
.kl_fl_modal .close i:before, .kl_fl_modal .close i:after { content: ''; position: absolute; left: 50%; top: 50%; width: 18px; height: 2px; margin: -1px 0 0 -9px; background: var(--kl-navy); transform: rotate(45deg); transition: background .3s; }
.kl_fl_modal .close i:after { transform: rotate(-45deg); }
.kl_fl_modal .close:hover i:before, .kl_fl_modal .close:hover i:after { background: #fff; }

/* ---------- 윤리경영 제안·제보: 카테고리 탭 + 폼 ---------- */
.kl_rp { padding: 120px 0 150px; }
.kl_rp_tab { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid #c8d1de; }
.kl_rp_tab button {
	display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; height: 110px; border: 0; background: #fff; cursor: pointer;
	font-family: inherit; color: var(--kl-gray); transition: background .3s, color .3s;
}
.kl_rp_tab button + button { border-left: 1px solid #c8d1de; }
.kl_rp_tab button span { font-size: 24px; font-weight: 700; letter-spacing: -0.03em; }
.kl_rp_tab button small { font-family: 'Poppins', sans-serif; font-size: 13px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; opacity: .75; }
.kl_rp_tab button:hover { color: var(--kl-navy); }
.kl_rp_tab button.on { background: var(--kl-navy); color: #fff; }
.kl_rp_pn { min-width: 0; margin: 0; padding: 0; border: 0; }
.kl_rp_pn[hidden] { display: none; }
.kl_rp_pn .pn_hd { padding: 80px 0 10px; }
.kl_rp_pn .pn_hd .kl_tit { font-size: 40px; }
.kl_rp_pn .pn_hd .kl_desc { margin-top: 18px; font-size: 18px; }
.kl_rp_pn .pn_hd .kl_desc b { font-weight: 700; color: var(--kl-navy); }

/* 제보 안내 */
.kl_rp .guide { display: grid; grid-template-columns: 1.25fr 1fr; gap: 24px; margin-top: 40px; }
.kl_rp .g_l, .kl_rp .g_r { display: flex; flex-direction: column; gap: 24px; }
.kl_rp .g_box { padding: 40px 42px 42px; background: var(--kl-sky); }
.kl_rp .g_box h4, .kl_rp .g_way h4 { font-size: 21px; font-weight: 700; letter-spacing: -0.03em; color: var(--kl-navy); }
.kl_rp .g_box ul { margin-top: 18px; }
.kl_rp .g_box li { position: relative; padding-left: 14px; font-size: 15px; line-height: 1.75; letter-spacing: -0.02em; color: #4a5566; word-break: keep-all; }
.kl_rp .g_box li + li { margin-top: 8px; }
.kl_rp .g_box li:before { content: ''; position: absolute; left: 1px; top: .75em; width: 4px; height: 4px; border-radius: 50%; background: #9fb0c7; }
.kl_rp .g_box .chk li { padding-left: 26px; }
.kl_rp .g_box .chk li:before { left: 0; top: .42em; width: 14px; height: 14px; border-radius: 50%; background: var(--kl-red); }
.kl_rp .g_box .chk li:after { content: ''; position: absolute; left: 4px; top: .65em; width: 5px; height: 3px; border: solid #fff; border-width: 0 0 1.5px 1.5px; transform: rotate(-45deg); }
.kl_rp .g_way { padding: 40px 42px 42px; background: var(--kl-navy-deep); color: #fff; }
.kl_rp .g_way h4 { color: #fff; }
.kl_rp .g_way dl { display: grid; grid-template-columns: auto 1fr; gap: 0 24px; margin-top: 22px; border-top: 1px solid rgba(255,255,255,.2); }
.kl_rp .g_way dt, .kl_rp .g_way dd { padding: 16px 0; border-bottom: 1px solid rgba(255,255,255,.2); font-size: 15px; }
.kl_rp .g_way dt { color: rgba(255,255,255,.65); }
.kl_rp .g_way dd a { font-family: 'Poppins', 'Noto Sans KR', sans-serif; font-weight: 600; color: #fff; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: rgba(255,255,255,.35); }
.kl_rp .g_way dd a:hover { text-decoration-color: #fff; }
.kl_rp .g_way p { margin-top: 24px; font-size: 15px; line-height: 1.7; color: #ff9c9c; }

/* 폼: 번호 제목 + 2단 행(항목명 / 입력) */
.kl_rp .fs { margin-top: 70px; }
.kl_rp .fs_hd { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; padding-bottom: 16px; border-bottom: 2px solid var(--kl-navy); }
.kl_rp .fs_hd h4 { display: flex; align-items: baseline; gap: 12px; font-size: 22px; font-weight: 700; letter-spacing: -0.03em; color: var(--kl-navy); }
.kl_rp .fs_hd h4 b { font-family: 'Poppins', sans-serif; font-size: 16px; font-weight: 600; color: var(--kl-red); }
.kl_rp .fs_hd .note { font-size: 14px; color: var(--kl-red); text-align: right; }
.kl_rp .row { display: grid; grid-template-columns: 220px 1fr; border-bottom: 1px solid var(--kl-line); }
.kl_rp .th { display: flex; align-items: center; padding: 18px 28px; background: #f7f9fc; font-size: 16px; font-weight: 600; color: var(--kl-ink); }
.kl_rp .th.req:after { content: '*'; margin-left: 4px; color: var(--kl-red); }
.kl_rp .td { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 12px 24px; min-width: 0; }
.kl_rp .td input[type="text"], .kl_rp .td input[type="tel"], .kl_rp .td select, .kl_rp .td textarea {
	width: 100%; max-width: 620px; height: 48px; padding: 0 16px; border: 1px solid #d3dae4; border-radius: 0; background: #fff; box-sizing: border-box;
	font-family: inherit; font-size: 15px; color: var(--kl-ink); transition: border-color .3s;
}
/* 선택상자: 기본 화살표 대신 오른쪽 18px 안쪽에 얇은 화살표 (글자와 겹치지 않게 오른쪽 여백 48px) */
.kl_rp .td select {
	padding-right: 48px; cursor: pointer; -webkit-appearance: none; -moz-appearance: none; appearance: none;
	background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%2313325f' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 18px center / 12px 8px;
}
.kl_rp .td select::-ms-expand { display: none; }
.kl_rp .td textarea { max-width: none; height: 260px; padding: 14px 16px; line-height: 1.7; resize: vertical; }
.kl_rp .td input::placeholder { font-size: 14px; color: #9aa5b5; opacity: 1; }
.kl_rp .td textarea::placeholder { font-size: 14px; line-height: 1.7; color: #9aa5b5; }
.kl_rp .td input:focus, .kl_rp .td select:focus, .kl_rp .td textarea:focus { border-color: var(--kl-navy); outline: none; }
.kl_rp .td.tel input { width: 100px; text-align: center; }
.kl_rp .td.mail input { width: 180px; }
.kl_rp .td.mail select { width: 180px; }
.kl_rp .td i { font-style: normal; color: var(--kl-gray); }
.kl_rp .td.radio { gap: 28px; }
.kl_rp .td.radio label { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; color: var(--kl-ink); cursor: pointer; }
.kl_rp .td.radio input, .kl_rp .agree input { width: 18px; height: 18px; margin: 0; accent-color: var(--kl-navy); }
.kl_rp .td input[type="file"] { font-size: 14px; }
.kl_rp .terms { max-height: 220px; margin-top: 20px; padding: 26px 30px; overflow-y: auto; border: 1px solid #d3dae4; background: #fff; font-size: 14px; line-height: 1.75; color: #4a5566; }
.kl_rp .terms.tall { max-height: 300px; }
.kl_rp .terms h5 { margin-top: 18px; font-size: 15px; font-weight: 700; color: var(--kl-ink); }
.kl_rp .terms h5:first-child { margin-top: 0; }
.kl_rp .terms p { margin-top: 6px; }
.kl_rp .terms p b { color: var(--kl-navy); }
.kl_rp .terms ul, .kl_rp .terms ol { margin-top: 6px; padding-left: 20px; }
.kl_rp .terms ul li { list-style: disc; }
.kl_rp .terms ol li { list-style: decimal; }
.kl_rp .agree { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin-top: 14px; font-size: 15px; color: var(--kl-ink); cursor: pointer; }
.kl_rp .btn { margin-top: 70px; text-align: center; }
.kl_rp_btn {
	display: inline-flex; align-items: center; gap: 22px; height: 64px; padding: 0 40px 0 46px; border: 0; border-radius: 40px; background: var(--kl-navy); cursor: pointer;
	font-family: inherit; font-size: 18px; font-weight: 600; color: #fff; transition: background .3s;
}
.kl_rp_btn i { display: block; width: 40px; height: 22px; background: currentColor; -webkit-mask: url(/img/cursor.png) center / 100% 100% no-repeat; mask: url(/img/cursor.png) center / 100% 100% no-repeat; }
.kl_rp_btn:hover { background: var(--kl-red); }
/* 메일문의: 제안·제보 폼 스타일을 그대로 쓰고 머리말·동의 라디오만 추가 */
.kl_ml .pn_hd .kl_tit { font-size: 40px; }
.kl_ml .pn_hd .kl_desc { margin-top: 16px; font-size: 16px; }
.kl_ml .req_mark { color: var(--kl-red); }
/* 2칸 행: 문의종류|문의분야, 성명|회사 */
.kl_ml .row2 { display: grid; grid-template-columns: 1fr 1fr; }
.kl_ml .row2 .row { grid-template-columns: 220px 1fr; }   /* 항목명 칸 폭 = 한 줄 행(.kl_rp .row 220px)과 같게 → 왼쪽 세로선이 맞는다 */
.kl_ml .row2 .row + .row .th { border-left: 1px solid var(--kl-line); }
.kl_ml .fs:first-of-type { margin-top: 50px; }
.kl_ml .agree_r { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 10px 28px; margin-top: 14px; }
.kl_ml .agree_r label { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; color: var(--kl-ink); cursor: pointer; }
.kl_ml .agree_r input { width: 18px; height: 18px; margin: 0; accent-color: var(--kl-navy); }
@media (max-width: 1400px) {
	.kl_rp .guide { grid-template-columns: 1fr; }
}
@media (max-width: 1024px) {
	.kl_rp { padding: 56px 0 80px; }
	.kl_rp_tab button { height: 76px; }
	.kl_rp_tab button span { font-size: 17px; }
	.kl_rp_tab button small { font-size: 10px; }
	.kl_rp_pn .pn_hd { padding-top: 44px; }
	.kl_rp_pn .pn_hd .kl_tit { font-size: 26px; }
	.kl_rp_pn .pn_hd .kl_desc { font-size: 15px; }
	.kl_rp .guide { gap: 14px; margin-top: 28px; }
	.kl_rp .g_l, .kl_rp .g_r { gap: 14px; }
	.kl_rp .g_box, .kl_rp .g_way { padding: 26px 20px 28px; }
	.kl_rp .g_box h4, .kl_rp .g_way h4 { font-size: 18px; }
	.kl_rp .g_box li, .kl_rp .g_way dt, .kl_rp .g_way dd, .kl_rp .g_way p { font-size: 14px; }
	.kl_rp .fs { margin-top: 44px; }
	.kl_rp .fs_hd { flex-direction: column; align-items: flex-start; gap: 6px; }
	.kl_rp .fs_hd h4 { font-size: 18px; }
	.kl_rp .fs_hd .note { font-size: 12px; text-align: left; }
	.kl_rp .row { grid-template-columns: 1fr; }
	.kl_rp .th { padding: 14px 0 0; background: none; font-size: 14px; }
	.kl_rp .td { padding: 8px 0 14px; }
	.kl_rp .td.tel input { width: calc((100% - 40px) / 3); }
	.kl_rp .td.mail input { width: calc((100% - 24px) / 2); }
	.kl_rp .td.mail select { width: 100%; }
	.kl_rp .td.radio { gap: 18px; }
	.kl_rp .td textarea { height: 220px; }
	.kl_rp .terms { padding: 18px 16px; font-size: 13px; }
	.kl_rp .agree { justify-content: flex-start; font-size: 14px; }
	.kl_rp .btn { margin-top: 44px; }
	.kl_rp_btn { width: 100%; justify-content: center; height: 56px; font-size: 16px; }
	.kl_ml .pn_hd .kl_tit { font-size: 26px; }
	.kl_ml .row2 { grid-template-columns: 1fr; }
	.kl_ml .row2 .row { grid-template-columns: 1fr; }
	.kl_ml .row2 .row + .row .th { border-left: 0; }
	.kl_ml .pn_hd .kl_desc { font-size: 14px; }
	.kl_ml .fs:first-of-type { margin-top: 32px; }
	.kl_ml .agree_r { justify-content: flex-start; flex-direction: column; gap: 10px; }
	.kl_ml .agree_r label { font-size: 14px; }
}

/* ---------- ESG (2026-10-26 개편): 01 소개(차오르는 선언 문장 + 핵심 사실) / 02 E·S·G 방향 카드 / 03 주요 활동 사진 카드 / 04 숫자 + 정책 바로가기 ---------- */
.kl_sub .tbd { color: #9aa5b5; }
.kl_esg_in { padding: 160px 0 150px; }
.kl_esg_in .kl_in { display: grid; grid-template-columns: 30% 1fr; gap: 0 6%; align-items: start; }
.kl_esg_in .head { position: sticky; top: calc(var(--kl-header-h, 100px) + 40px); }
.kl_esg_in .lead { font-size: 40px; font-weight: 700; line-height: 1.5; letter-spacing: -0.04em; color: var(--kl-navy); word-break: keep-all; }
.kl_esg_in .lead.is_split span { color: #cfd7e3; transition: color .35s; }
.kl_esg_in .lead.is_split span.is_lit { color: var(--kl-navy); }
.kl_esg_in .txt { margin-top: 40px; max-width: 860px; font-size: 19px; line-height: 1.85; letter-spacing: -0.02em; color: #4a5566; word-break: keep-all; }
.kl_esg_in .facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 60px; }
/* 3카드 각자 색 (초록 / 파랑 / 남색), 텍스트 가운데 정렬 */
.kl_esg_in .facts li { --c: #13325f; position: relative; padding: 38px 32px 40px; text-align: center; border-radius: 20px; background: var(--c); color: #fff; overflow: hidden; box-shadow: 0 24px 40px -28px var(--c); transition: transform .4s cubic-bezier(.2,.7,.2,1), box-shadow .4s; }
/* ESG 히어로: 사진 대신 단색 남색 바탕 + E(초록)·S(파랑)·G(남색) 세 색 띠. 로드되면 아래에서 차례로 올라온다 */
.kl_esg_hero .bg { background: #0b2347; }
.kl_esg_hero .bg:after { display: none; }
.kl_esg_hero .bands { position: absolute; top: 0; bottom: 0; right: -7%; width: 58%; display: flex; transform: skewX(-12deg); }
.kl_esg_hero .bands li { position: relative; flex: 1; display: flex; flex-direction: column; justify-content: flex-end; padding: 0 0 70px 44px; background: var(--c); overflow: hidden;
	transform: translateY(102%); transition: transform 1.3s cubic-bezier(.2,.75,.2,1), flex-grow .6s cubic-bezier(.2,.7,.2,1); }
.kl_esg_hero .bands li:nth-child(1) { --c: #1f9a6c; --c2: #157a55; }
.kl_esg_hero .bands li:nth-child(2) { --c: #2f74d6; --c2: #1f56aa; transition-delay: .12s, 0s; }
.kl_esg_hero .bands li:nth-child(3) { --c: #1d4580; --c2: #13325f; transition-delay: .24s, 0s; }
.kl_esg_hero.is_in .bands li { transform: none; }
.kl_esg_hero .bands li:hover { flex-grow: 1.35; }
.kl_esg_hero .bands span { display: block; transform: skewX(12deg); transform-origin: left bottom; }
.kl_esg_hero .bands b { display: block; font-family: 'Poppins', sans-serif; font-size: clamp(100px, 9vw, 170px); font-weight: 700; line-height: .85; letter-spacing: -0.04em; color: rgba(255,255,255,.95); }
.kl_esg_hero .bands small { display: block; margin-top: 14px; font-family: 'Poppins', sans-serif; font-size: 14px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.75); }
.kl_esg_in .facts li:nth-child(1) { --c: #1a9c72; }
.kl_esg_in .facts li:nth-child(2) { --c: #2f6fd6; }
.kl_esg_in .facts li:nth-child(3) { --c: #1a3c6e; }
.kl_esg_in .facts li:hover { transform: translateY(-6px); box-shadow: 0 30px 46px -26px var(--c); }
.kl_esg_in .facts .k { position: relative; z-index: 1; display: block; font-family: 'Poppins', sans-serif; font-size: 30px; font-weight: 700; letter-spacing: -0.02em; color: #fff; }
.kl_esg_in .facts p { position: relative; z-index: 1; margin-top: 12px; font-size: 17px; line-height: 1.6; letter-spacing: -0.02em; color: rgba(255,255,255,.88); }

/* 02 E·S·G 방향: 흰 카드 + 아이콘 원 · 큰 글자. 호버 시 영역 색(--c)이 아래에서 차오르고 글자색이 흰색으로 */
.kl_esg_dir { padding: 150px 0 160px; background: var(--kl-sky); }
.kl_esg_dir .hd, .kl_esg_act .hd { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 0 6%; }
.kl_esg_dir .hd .kl_desc, .kl_esg_act .hd .kl_desc { margin-top: 0; }
.kl_esg_dir .esg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 70px; }
.kl_esg_dir .esg > li { position: relative; overflow: hidden; padding: 44px 42px 46px; border-radius: 24px; background: #fff; isolation: isolate;
	transition: opacity 1s, transform .6s cubic-bezier(.2,.7,.2,1), box-shadow .5s; }
.kl_esg_dir .esg > li:nth-child(2) { transition-delay: .12s, .12s, 0s; }
.kl_esg_dir .esg > li:nth-child(3) { transition-delay: .24s, .24s, 0s; }
.kl_esg_dir .esg > li.is_in:hover { transition-delay: 0s; transform: translateY(-10px); box-shadow: 0 40px 60px -40px rgba(19,50,95,.5); }
.kl_esg_dir .esg > li:after { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--c); transform: translateY(101%); transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.kl_esg_dir .esg > li:hover:after { transform: none; }
.kl_esg_dir .top { display: flex; align-items: flex-start; justify-content: space-between; }
.kl_esg_dir .ico { display: flex; align-items: center; justify-content: center; width: 68px; height: 68px; border-radius: 50%; background: color-mix(in srgb, var(--c) 12%, #fff); color: var(--c); transition: background .5s, color .5s, transform .6s cubic-bezier(.2,.7,.2,1); }
.kl_esg_dir .ico svg { width: 32px; height: 32px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.kl_esg_dir .lt { font-family: 'Poppins', sans-serif; font-size: 120px; font-weight: 700; line-height: .8; letter-spacing: -0.05em; color: color-mix(in srgb, var(--c) 14%, #fff); transition: color .5s, transform .6s cubic-bezier(.2,.7,.2,1); }
.kl_esg_dir .en { margin-top: 40px; font-family: 'Poppins', sans-serif; font-size: 14px; font-weight: 600; letter-spacing: .14em; color: var(--c); transition: color .5s; }
.kl_esg_dir h4 { margin-top: 8px; font-size: 32px; font-weight: 700; letter-spacing: -0.035em; color: var(--kl-navy); transition: color .5s; }
.kl_esg_dir .d { margin-top: 16px; font-size: 19px; font-weight: 500; line-height: 1.65; letter-spacing: -0.03em; color: var(--kl-ink); word-break: keep-all; transition: color .5s; }
.kl_esg_dir .esg ul { margin-top: 28px; padding-top: 26px; border-top: 1px solid #e3e8f0; transition: border-color .5s; }
.kl_esg_dir .esg ul li { position: relative; padding-left: 30px; font-size: 17px; line-height: 1.6; letter-spacing: -0.02em; color: #4a5566; word-break: keep-all; transition: color .5s; }
.kl_esg_dir .esg ul li + li { margin-top: 12px; }
.kl_esg_dir .esg ul li:before { content: ''; position: absolute; left: 0; top: 4px; width: 18px; height: 18px; border-radius: 50%; background: color-mix(in srgb, var(--c) 14%, #fff); transition: background .5s; }
.kl_esg_dir .esg ul li:after { content: ''; position: absolute; left: 6px; top: 8px; width: 5px; height: 8px; border: solid var(--c); border-width: 0 2px 2px 0; transform: rotate(45deg); transition: border-color .5s; }
.kl_esg_dir .esg > li:hover .ico { background: rgba(255,255,255,.16); color: #fff; transform: rotate(-8deg) scale(1.06); }
.kl_esg_dir .esg > li:hover .lt { color: rgba(255,255,255,.16); transform: translateY(6px) scale(1.08); }
.kl_esg_dir .esg > li:hover .en { color: rgba(255,255,255,.75); }
.kl_esg_dir .esg > li:hover h4, .kl_esg_dir .esg > li:hover .d { color: #fff; }
.kl_esg_dir .esg > li:hover ul { border-color: rgba(255,255,255,.22); }
.kl_esg_dir .esg > li:hover ul li { color: rgba(255,255,255,.88); }
.kl_esg_dir .esg > li:hover ul li:before { background: rgba(255,255,255,.18); }
.kl_esg_dir .esg > li:hover ul li:after { border-color: #fff; }

/* 03 주요 활동: 둥근 사진(호버 시 확대) + 번호 · E/S/G 태그 · 제목 · 설명 */
.kl_esg_act { padding: 150px 0 160px; }
.kl_esg_act .acts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; margin-top: 70px; }
.kl_esg_act .acts > li:nth-child(2) { transition-delay: .12s; }
.kl_esg_act .acts > li:nth-child(3) { transition-delay: .24s; }
.kl_esg_act .ph { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: #e6ebf2; }
.kl_esg_act .ph img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s cubic-bezier(.2,.7,.2,1); }
.kl_esg_act .ph:after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,25,50,0) 50%, rgba(10,25,50,.55)); }
.kl_esg_act .ph .no { position: absolute; left: 26px; bottom: 18px; z-index: 1; font-family: 'Poppins', sans-serif; font-size: 44px; font-weight: 700; line-height: 1; letter-spacing: -0.03em; color: #fff; }
.kl_esg_act .acts > li:hover .ph img { transform: scale(1.07); }
.kl_esg_act .tx { padding: 28px 6px 0; }
.kl_esg_act .kl_sub .tags, .kl_esg_act .tx .tags { display: flex; gap: 6px; margin-top: 0; }
.kl_esg_act .tags span { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; font-family: 'Poppins', sans-serif; font-size: 13px; font-weight: 700; color: #fff; }
.kl_esg_act .tags .e { background: #1f9a6c; }
.kl_esg_act .tags .s { background: #2f74d6; }
.kl_esg_act .tags .g { background: var(--kl-navy); }
.kl_esg_act .en { margin-top: 20px; font-family: 'Poppins', sans-serif; font-size: 14px; font-weight: 600; letter-spacing: .14em; color: var(--kl-red); }
.kl_esg_act h4 { margin-top: 8px; font-size: 28px; font-weight: 700; letter-spacing: -0.035em; color: var(--kl-navy); }
.kl_esg_act .d { margin-top: 14px; font-size: 17px; line-height: 1.8; letter-spacing: -0.02em; color: #4a5566; word-break: keep-all; }

/* 04 숫자 + 관련 정책 바로가기 (남색) */
.kl_esg_pf { padding: 150px 0 160px; background: var(--kl-navy-deep); color: #fff; }
.kl_esg_pf .kl_label, .kl_esg_pf .kl_tit { color: #fff; }
.kl_esg_pf .kl_label b { color: #ff6b6b; }
.kl_esg_pf .kpi { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 70px; border-top: 1px solid rgba(255,255,255,.22); border-bottom: 1px solid rgba(255,255,255,.22); }
.kl_esg_pf .kpi li { padding: 50px 34px 46px; }
.kl_esg_pf .kpi li + li { border-left: 1px solid rgba(255,255,255,.14); }
.kl_esg_pf .kpi strong { display: flex; align-items: baseline; gap: 4px; font-family: 'Poppins', sans-serif; font-weight: 600; line-height: 1; }
.kl_esg_pf .kpi em { font-size: 72px; font-style: normal; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.kl_esg_pf .kpi small { font-family: inherit; font-size: 24px; font-weight: 600; color: #ff6b6b; }
.kl_esg_pf .kpi p { margin-top: 20px; font-size: 17px; line-height: 1.6; letter-spacing: -0.02em; color: rgba(255,255,255,.72); }
.kl_esg_pf .links { margin-top: 90px; }
.kl_esg_pf .links h4 { font-size: 22px; font-weight: 700; }
.kl_esg_pf .links ul { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 24px; }
.kl_esg_pf .links a { position: relative; display: block; padding: 34px 90px 36px 34px; border: 1px solid rgba(255,255,255,.16); border-radius: 20px; background: rgba(255,255,255,.05); color: #fff;
	transition: background .4s, border-color .4s, color .4s, transform .4s cubic-bezier(.2,.7,.2,1); }
.kl_esg_pf .links .en { font-family: 'Poppins', sans-serif; font-size: 13px; font-weight: 600; letter-spacing: .14em; color: #ff6b6b; }
.kl_esg_pf .links strong { display: block; margin-top: 10px; font-size: 24px; font-weight: 700; letter-spacing: -0.03em; }
.kl_esg_pf .links p { margin-top: 8px; font-size: 16px; color: rgba(255,255,255,.65); transition: color .4s; }
.kl_esg_pf .links i { position: absolute; right: 30px; top: 50%; width: 46px; height: 46px; margin-top: -23px; border-radius: 50%; background: rgba(255,255,255,.1); transition: background .4s, transform .4s cubic-bezier(.2,.7,.2,1); }
.kl_esg_pf .links i:before { content: ''; position: absolute; left: 50%; top: 50%; width: 20px; height: 11px; margin: -5.5px 0 0 -10px; background: currentColor;
	-webkit-mask: url(/img/cursor.png) center / 100% 100% no-repeat; mask: url(/img/cursor.png) center / 100% 100% no-repeat; }
.kl_esg_pf .links a:hover { background: #fff; border-color: #fff; color: var(--kl-navy); transform: translateY(-6px); }
.kl_esg_pf .links a:hover .en { color: var(--kl-red); }
.kl_esg_pf .links a:hover p { color: #4a5566; }
.kl_esg_pf .links a:hover i { background: var(--kl-red); color: #fff; transform: translateX(6px); }
@media (max-width: 1400px) {
	.kl_esg_in .kl_in { grid-template-columns: 1fr; gap: 40px; }
	.kl_esg_in .head { position: static; }
	.kl_esg_in .lead { font-size: 34px; }
	.kl_esg_dir .esg > li { padding: 36px 30px 40px; }
	.kl_esg_dir .lt { font-size: 96px; }
	.kl_esg_dir h4 { font-size: 28px; }
	.kl_esg_pf .kpi { grid-template-columns: 1fr 1fr; }
	.kl_esg_pf .kpi li:nth-child(3) { border-left: 0; }
	.kl_esg_pf .kpi li:nth-child(n+3) { border-top: 1px solid rgba(255,255,255,.14); }
}
@media (max-width: 1024px) {
	.kl_esg_in, .kl_esg_dir, .kl_esg_act, .kl_esg_pf { padding: 72px 0 80px; }
	.kl_esg_in .kl_in { gap: 24px; }
	.kl_esg_in .lead { font-size: 22px; }
	.kl_esg_in .txt { margin-top: 22px; font-size: 15px; }
	.kl_esg_in .facts { grid-template-columns: 1fr; gap: 10px; margin-top: 30px; }
	.kl_esg_in .facts li { padding: 24px 20px; border-radius: 14px; }
	.kl_esg_hero .bands { top: 0; bottom: auto; right: -10%; width: 120%; height: 50%; }
	.kl_esg_hero .bands li:first-child { padding-left: 84px; }
	.kl_esg_hero .bands li { padding: 0 0 22px 26px; }
	.kl_esg_hero .bands b { font-size: 60px; }
	.kl_esg_hero .bands small { margin-top: 6px; font-size: 10px; letter-spacing: .1em; }
	.kl_esg_in .facts .k { font-size: 22px; }
	.kl_esg_in .facts p { margin-top: 8px; font-size: 14px; }
	.kl_esg_in .lead br { display: none; }
	.kl_esg_dir .hd, .kl_esg_act .hd { grid-template-columns: 1fr; }
	.kl_esg_dir .hd .kl_desc, .kl_esg_act .hd .kl_desc { margin-top: 16px; }
	.kl_esg_dir .esg, .kl_esg_act .acts { grid-template-columns: 1fr; gap: 14px; margin-top: 32px; }
	.kl_esg_act .acts { gap: 36px; }
	.kl_esg_dir .esg > li { padding: 26px 22px 28px; border-radius: 18px; }
	.kl_esg_dir .ico { width: 52px; height: 52px; }
	.kl_esg_dir .ico svg { width: 26px; height: 26px; }
	.kl_esg_dir .lt { font-size: 64px; }
	.kl_esg_dir .en { margin-top: 22px; font-size: 12px; }
	.kl_esg_dir h4, .kl_esg_act h4 { font-size: 21px; }
	.kl_esg_dir .d { margin-top: 10px; font-size: 15px; }
	.kl_esg_dir .esg ul { margin-top: 18px; padding-top: 18px; }
	.kl_esg_dir .esg ul li { padding-left: 26px; font-size: 14.5px; }
	.kl_esg_dir .esg ul li:before { top: 2px; }
	.kl_esg_dir .esg ul li:after { top: 6px; }
	.kl_esg_act .ph .no { left: 18px; bottom: 14px; font-size: 30px; }
	.kl_esg_act .tx { padding: 18px 2px 0; }
	.kl_esg_act .tags span { width: 26px; height: 26px; font-size: 12px; }
	.kl_esg_act .en { margin-top: 14px; font-size: 12px; }
	.kl_esg_act .d { margin-top: 10px; font-size: 15px; }
	.kl_esg_pf .kpi { margin-top: 36px; }
	.kl_esg_pf .kpi li { padding: 28px 16px 26px; }
	.kl_esg_pf .kpi em { font-size: 40px; }
	.kl_esg_pf .kpi small { font-size: 16px; }
	.kl_esg_pf .kpi p { margin-top: 12px; font-size: 13.5px; }
	.kl_esg_pf .links { margin-top: 50px; }
	.kl_esg_pf .links h4 { font-size: 18px; }
	.kl_esg_pf .links ul { grid-template-columns: 1fr; gap: 10px; margin-top: 16px; }
	.kl_esg_pf .links a { padding: 22px 74px 22px 22px; border-radius: 14px; }
	.kl_esg_pf .links strong { font-size: 19px; }
	.kl_esg_pf .links p { font-size: 14px; }
	.kl_esg_pf .links i { right: 20px; width: 40px; height: 40px; margin-top: -20px; }
}

/* ---------- 본사 및 지점 안내: 사업장 탭 + 사진·정보 + 구글 지도 ---------- */
.kl_lc { padding: 120px 0 150px; }
.kl_lc_tab { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; border: 1px solid #c8d1de; }
.kl_lc_tab button {
	display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; height: 100px; border: 0; background: #fff; cursor: pointer;
	font-family: inherit; color: var(--kl-gray); transition: background .3s, color .3s;
}
.kl_lc_tab button + button { border-left: 1px solid #c8d1de; }
.kl_lc_tab button span { font-size: 22px; font-weight: 700; letter-spacing: -0.03em; }
.kl_lc_tab button small { font-family: 'Poppins', sans-serif; font-size: 12px; font-weight: 500; letter-spacing: .14em; opacity: .75; }
.kl_lc_tab button:hover { color: var(--kl-navy); }
.kl_lc_tab button.on { background: var(--kl-navy); color: #fff; }
.kl_lc_pn { margin-top: 60px; animation: klLcIn .7s cubic-bezier(.2,.7,.2,1); }
.kl_lc_pn[hidden] { display: none; }
@keyframes klLcIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
.kl_lc_pn .top { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: stretch; background: var(--kl-sky); }
/* 사진은 오른쪽 정보 높이에 맞춰 채운다. aspect-ratio + stretch 조합이면 높이에서 폭이 역산돼 정보 영역을 덮었다 (2026-10-27) */
.kl_lc_pn .ph { position: relative; overflow: hidden; min-height: 440px; }
.kl_lc_pn .ph img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
.kl_lc_pn .info { display: flex; flex-direction: column; justify-content: center; padding: 56px 60px; }
.kl_lc_pn .en { font-family: 'Poppins', sans-serif; font-size: 14px; font-weight: 600; letter-spacing: .16em; color: var(--kl-red); }
.kl_lc_pn h3 { margin-top: 10px; font-size: 40px; font-weight: 700; letter-spacing: -0.035em; color: var(--kl-navy); }
.kl_lc_pn dl { margin-top: 34px; border-top: 2px solid var(--kl-navy); }
.kl_lc_pn dl > div { display: grid; grid-template-columns: 90px 1fr; gap: 16px; padding: 20px 0; border-bottom: 1px solid #d3dae4; }
.kl_lc_pn dt { font-family: 'Poppins', 'Noto Sans KR', sans-serif; font-size: 15px; font-weight: 600; color: var(--kl-navy); }
.kl_lc_pn dd { font-size: 17px; line-height: 1.65; letter-spacing: -0.02em; color: var(--kl-ink); word-break: keep-all; }
.kl_lc_pn dd .zip { color: var(--kl-gray); }
.kl_lc_pn dd a { color: inherit; transition: color .3s; }
.kl_lc_pn dd a:hover { color: var(--kl-red); }
.kl_lc_btn { display: inline-flex; align-self: flex-start; align-items: center; gap: 18px; margin-top: 34px; padding: 15px 28px 15px 32px; border: 1px solid var(--kl-navy); border-radius: 40px; font-size: 15px; font-weight: 600; color: var(--kl-navy); transition: background .3s, color .3s; }
.kl_lc_btn i { display: block; width: 36px; height: 20px; background: currentColor; -webkit-mask: url(/img/cursor.png) center / 100% 100% no-repeat; mask: url(/img/cursor.png) center / 100% 100% no-repeat; }
.kl_lc_btn:hover { background: var(--kl-navy); color: #fff; }
.kl_lc_pn .map { margin-top: 24px; height: 520px; background: #eef2f7; }
.kl_lc_pn .map iframe { display: block; width: 100%; height: 100%; border: 0; }
@media (max-width: 1400px) {
	.kl_lc_pn .info { padding: 44px 40px; }
	.kl_lc_pn h3 { font-size: 32px; }
}
@media (max-width: 1024px) {
	.kl_lc { padding: 56px 0 80px; }
	.kl_lc_tab button { height: 72px; }
	.kl_lc_tab button span { font-size: 15px; }
	.kl_lc_tab button small { font-size: 9px; letter-spacing: .08em; }
	.kl_lc_pn { margin-top: 28px; }
	.kl_lc_pn .top { grid-template-columns: 1fr; }
	.kl_lc_pn .ph { aspect-ratio: 16 / 10; min-height: 0; }
	.kl_lc_pn .info { padding: 28px 20px 32px; }
	.kl_lc_pn .en { font-size: 12px; }
	.kl_lc_pn h3 { font-size: 24px; }
	.kl_lc_pn dl { margin-top: 20px; }
	.kl_lc_pn dl > div { grid-template-columns: 64px 1fr; gap: 10px; padding: 14px 0; }
	.kl_lc_pn dt { font-size: 13px; }
	.kl_lc_pn dd { font-size: 14px; }
	.kl_lc_btn { margin-top: 22px; font-size: 14px; }
	.kl_lc_pn .map { margin-top: 14px; height: 320px; }
}

/* ---------- 사업담당자 안내: 인사말 + 대표 문의 2장 / 사업영역별 담당자 카드 3열 ---------- */
.kl_mg { padding: 140px 0 160px; }
.kl_mg .mg_top { display: grid; grid-template-columns: 1fr 1.15fr; gap: 0 6%; align-items: center; }
.kl_mg .kl_desc { word-break: keep-all; }
/* 대표 문의: 남색(일반·PR) + 하늘색(선원·선박) 카드 */
.kl_mg .quick { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.kl_mg .quick li { position: relative; display: flex; flex-direction: column; min-height: 300px; padding: 40px 36px 36px; border-radius: 18px; overflow: hidden; }
.kl_mg .quick li.js-reveal:nth-child(2) { transition-delay: .12s; }
.kl_mg .quick .q1 { background: var(--kl-navy); color: #fff; }
.kl_mg .quick .q2 { background: var(--kl-sky); color: var(--kl-navy); }
.kl_mg .quick .en { font-family: 'Poppins', sans-serif; font-size: 13px; font-weight: 600; letter-spacing: .14em; color: #ff8a8a; }
.kl_mg .quick .q2 .en { color: var(--kl-red); }
.kl_mg .quick strong { margin-top: 14px; font-size: 27px; font-weight: 700; line-height: 1.3; letter-spacing: -0.03em; }
.kl_mg .quick p { margin-top: 14px; font-size: 16px; line-height: 1.7; letter-spacing: -0.02em; opacity: .8; word-break: keep-all; }
.kl_mg .quick .go { display: inline-flex; align-self: flex-start; align-items: center; gap: 14px; margin-top: auto; padding: 14px 24px 14px 26px; border: 1px solid rgba(255,255,255,.45); border-radius: 40px; font-size: 16px; font-weight: 600; color: #fff; transition: background .3s, border-color .3s, color .3s; }
.kl_mg .quick .go i { display: block; width: 32px; height: 18px; background: currentColor; -webkit-mask: url(/img/cursor.png) center / 100% 100% no-repeat; mask: url(/img/cursor.png) center / 100% 100% no-repeat; transition: transform .3s; }
.kl_mg .quick .go:hover { background: #fff; border-color: #fff; color: var(--kl-navy); }
.kl_mg .quick .go:hover i { transform: translateX(4px); }
.kl_mg .quick .go.tel { gap: 10px; padding-left: 22px; border-color: var(--kl-navy); font-family: 'Poppins', sans-serif; font-size: 19px; color: var(--kl-navy); }
.kl_mg .quick .go.tel:hover { background: var(--kl-navy); color: #fff; }
.kl_mg .quick .go svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linejoin: round; }
.kl_mg .mg_hd { margin-top: 140px; }
/* 담당자 카드: 위 = 구분·팀·담당 업무 / 아래 = 담당자·연락처. 호버 시 남색 테두리 + 떠오름 */
.kl_mg .mg_list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 50px; }
.kl_mg .mg_list > li { display: flex; flex-direction: column; padding: 36px 34px 30px; border: 1px solid #dfe5ee; border-radius: 0; background: #fff;
	transition: opacity 1s, transform .6s cubic-bezier(.2,.7,.2,1), border-color .4s, box-shadow .4s; }
.kl_mg .mg_list > li.js-reveal:nth-child(3n+2) { transition-delay: .1s, .1s, 0s, 0s; }
.kl_mg .mg_list > li.js-reveal:nth-child(3n) { transition-delay: .2s, .2s, 0s, 0s; }
.kl_mg .mg_list > li.is_in:hover { transform: translateY(-8px); border-color: var(--kl-navy); box-shadow: 0 28px 50px -30px rgba(19,50,95,.4); transition-delay: 0s; }
.kl_mg .cat { font-family: 'Poppins', sans-serif; font-size: 12.5px; font-weight: 600; letter-spacing: .14em; color: var(--kl-red); }
.kl_mg .team { margin-top: 12px; font-size: 25px; font-weight: 700; line-height: 1.3; letter-spacing: -0.03em; color: var(--kl-navy); }
.kl_mg .biz { margin-top: 8px; font-size: 16px; line-height: 1.6; letter-spacing: -0.02em; color: #5b6779; word-break: keep-all; }
.kl_mg .name { margin-top: auto; padding-top: 30px; font-family: 'Poppins', sans-serif; font-size: 18px; font-weight: 600; color: var(--kl-ink); }
.kl_mg .ct { margin-top: 14px; padding-top: 16px; border-top: 1px solid #e6ebf2; }
.kl_mg .ct li + li { margin-top: 8px; }
.kl_mg .ct a { display: inline-flex; align-items: center; gap: 10px; max-width: 100%; font-family: 'Poppins', sans-serif; font-size: 16px; font-weight: 500; color: #3a4558; transition: color .3s; }
.kl_mg .ct a span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kl_mg .ct a:hover { color: var(--kl-red); }
.kl_mg .ct svg { flex: none; width: 30px; height: 30px; padding: 7px; border-radius: 50%; background: var(--kl-sky); box-sizing: border-box; fill: none; stroke: var(--kl-navy); stroke-width: 1.7; stroke-linejoin: round; transition: background .3s, stroke .3s; }
.kl_mg .ct a:hover svg { background: var(--kl-red); stroke: #fff; }
@media (max-width: 1400px) {
	.kl_mg .mg_top { grid-template-columns: 1fr; gap: 48px; }
	.kl_mg .mg_list > li { padding: 32px 26px 26px; }
	.kl_mg .team { font-size: 22px; }
}
@media (max-width: 1024px) {
	.kl_mg { padding: 64px 0 88px; }
	.kl_mg .mg_top { gap: 32px; }
	.kl_mg .quick { grid-template-columns: 1fr; gap: 12px; }
	.kl_mg .quick li { min-height: 0; padding: 28px 22px 24px; border-radius: 14px; }
	.kl_mg .quick .en { font-size: 11px; }
	.kl_mg .quick strong { font-size: 21px; }
	.kl_mg .quick p { font-size: 14.5px; }
	.kl_mg .quick .go { margin-top: 22px; padding: 12px 20px 12px 22px; font-size: 15px; }
	.kl_mg .quick .go.tel { font-size: 17px; }
	.kl_mg .mg_hd { margin-top: 72px; }
	.kl_mg .mg_list { grid-template-columns: 1fr; gap: 12px; margin-top: 28px; }
	.kl_mg .mg_list > li { padding: 24px 20px 20px; }
	.kl_mg .mg_list > li.js-reveal:nth-child(n) { transition-delay: 0s; }
	.kl_mg .mg_list > li.is_in:hover { transform: none; box-shadow: none; }
	.kl_mg .cat { font-size: 11px; }
	.kl_mg .team { margin-top: 8px; font-size: 20px; }
	.kl_mg .biz { font-size: 14.5px; }
	.kl_mg .name { padding-top: 18px; font-size: 16px; }
	.kl_mg .ct a { font-size: 15px; }
}

/* ---------- 채용공고 (/hr/hr_notice — 모듈 게시판 스킨). board.css 위에 덮어쓰므로 .programCon.kl_rc 로 시작 ---------- */
.programCon.kl_rc { padding: 120px 0 150px; background: #fff; }
.programCon.kl_rc .inner { width: auto; max-width: 1600px; margin: 0 auto; padding: 0 var(--kl-gutter); box-sizing: content-box; }
.kl_rc .kl_label { display: flex; align-items: center; gap: 18px; margin-bottom: 26px; font-family: 'Poppins', sans-serif; font-size: 14px; font-weight: 600; letter-spacing: .14em; color: var(--kl-navy); }
.kl_rc .kl_label b { font-weight: 600; color: var(--kl-red); letter-spacing: .04em; }
.kl_rc .kl_tit { font-size: 52px; font-weight: 700; line-height: 1.3; letter-spacing: -0.035em; color: var(--kl-navy); }
.kl_rc_hd { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; }
.kl_rc_cnt { padding-bottom: 8px; font-size: 17px; color: #5b6779; }
.kl_rc_cnt b { margin-left: 4px; font-family: 'Poppins', sans-serif; font-weight: 700; color: var(--kl-red); }
/* 검색: 구분 선택 + 검색어 입력 한 줄 */
.programCon.kl_rc .prd_search_wrapper02 { display: flex; justify-content: flex-end; gap: 10px; margin: 40px 0 0; padding: 0; border: 0; background: none; }
.programCon.kl_rc .login_form_flex_box01 { flex: none; width: 160px; margin: 0; }
.programCon.kl_rc .login_form_flex_box01 select { width: 100%; height: 56px; padding: 0 40px 0 20px; border: 1px solid #d3dae4; border-radius: 12px; font-size: 16px; color: var(--kl-ink);
	-webkit-appearance: none; appearance: none; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%2313325f' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 18px center / 12px 8px; }
.programCon.kl_rc .program_search_box01 { position: relative; flex: 0 1 420px; width: auto; height: 56px; margin: 0; padding: 0; border: 1px solid #d3dae4; border-radius: 12px; background: #fff; overflow: hidden; transition: border-color .3s; }
.programCon.kl_rc .program_search_box01:focus-within { border-color: var(--kl-navy); }
.programCon.kl_rc .program_search_box01 input[type="text"] { width: 100%; height: 100%; padding: 0 60px 0 20px; border: 0; background: none; font-size: 16px; color: var(--kl-ink); }
.programCon.kl_rc .program_search_box01 a { position: absolute; right: 6px; top: 6px; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 10px; background: var(--kl-navy); }
.programCon.kl_rc .program_search_box01 a img { width: 18px; height: auto; filter: brightness(0) invert(1); }
/* 목록: 한 줄형 (번호 | 상태·제목 | 접수기간 | 등록일) */
.programCon.kl_rc .recruitment_table01 { margin: 0; border: 0; }
.programCon.kl_rc #searchForm + .recruitment_table01 { margin-top: 24px; border-top: 2px solid var(--kl-navy); }  /* 목록 첫 줄 위 기준선 */
.programCon.kl_rc .recruitment_table01 .box.inline_type { display: grid; grid-template-columns: 80px minmax(0, 1fr) 260px 130px; align-items: center; gap: 20px; min-height: 96px; margin: 0; padding: 0 24px; border: 0; border-bottom: 1px solid #e3e8f0; border-radius: 0; background: #fff; cursor: pointer; transition: background .3s; }
.programCon.kl_rc .recruitment_table01 .box.inline_type:hover { background: var(--kl-sky); }
.programCon.kl_rc .recruitment_table01 .box.inline_type > div { width: auto; margin: 0; padding: 0; border: 0; }
.programCon.kl_rc .recruitment_table01 .box.inline_type .recruit_num { font-family: 'Poppins', sans-serif; font-size: 15px; font-weight: 500; color: #8a96a8; text-align: center; }
.programCon.kl_rc .recruitment_table01 .box.inline_type .recruit_tit { display: flex; align-items: center; gap: 14px; min-width: 0; }
.programCon.kl_rc .recruitment_table01 .box.inline_type .recruit_tit .title_value { overflow: hidden; font-size: 19px; font-weight: 600; letter-spacing: -0.02em; color: var(--kl-navy); text-overflow: ellipsis; white-space: nowrap; transition: color .3s; }
.programCon.kl_rc .recruitment_table01 .box.inline_type:hover .title_value { color: var(--kl-red); }
.programCon.kl_rc .recruitment_table01 .box .recruit_tit .status_badge { flex: none; margin: 0; padding: 6px 12px; border: 0; border-radius: 20px; font-size: 13px; font-weight: 600; line-height: 1; }
.programCon.kl_rc .recruitment_table01 .box .recruit_tit .status_badge.status_ing { background: rgba(214,48,49,.1); color: var(--kl-red); }
.programCon.kl_rc .recruitment_table01 .box .recruit_tit .status_badge.status_end { background: #eef1f5; color: #8a96a8; }
.programCon.kl_rc .recruitment_table01 .box.inline_type .recruit_period { font-family: 'Poppins', sans-serif; font-size: 15px; color: #4a5566; text-align: center; }
.programCon.kl_rc .recruitment_table01 .box.inline_type .recruit_date { font-family: 'Poppins', sans-serif; font-size: 15px; color: #8a96a8; text-align: center; }
.programCon.kl_rc .recruitment_table01 .box.end.inline_type .recruit_tit .title_value { color: #8a96a8; }
/* 페이지 번호 (Page.newIndexUserList 출력) */
.programCon.kl_rc .prd_page_nav_wrapper { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 48px; }
.programCon.kl_rc .prd_page_nav_num_box { display: flex; gap: 6px; }
.programCon.kl_rc .prd_page_nav_num, .programCon.kl_rc .prd_page_nav_arw { display: flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 50%; font-family: 'Poppins', sans-serif; font-size: 15px; font-weight: 500; color: #5b6779; transition: background .3s, color .3s; }
.programCon.kl_rc .prd_page_nav_num:hover, .programCon.kl_rc .prd_page_nav_arw:hover { background: var(--kl-sky); color: var(--kl-navy); }
.programCon.kl_rc .prd_page_nav_num.active { background: var(--kl-navy); color: #fff; }
/* 모바일 더보기 (모듈 버튼): 사이트 버튼 모양으로, 공고가 없으면 숨김 */
.programCon.kl_rc .mo_programPage { border: 1px solid var(--kl-navy); border-radius: 40px; background: #fff; }
.programCon.kl_rc .mo_programPage a { font-size: 15px; font-weight: 600; color: var(--kl-navy); }
.programCon.kl_rc .kl_rc_empty ~ .mo_programPage, .programCon.kl_rc .kl_rc_empty ~ .prd_page_nav_wrapper { display: none !important; }  /* 모듈 모바일 CSS 가 !important 로 띄움 */
/* 공고 없음 */
.kl_rc_empty { margin-top: 24px; padding: 90px 20px; border-top: 2px solid var(--kl-navy);  /* 기준선 포함 */ border-bottom: 1px solid #e3e8f0; text-align: center; }
.kl_rc_empty strong { display: block; font-size: 22px; font-weight: 700; letter-spacing: -0.03em; color: var(--kl-navy); }
.kl_rc_empty p { margin-top: 10px; font-size: 16px; color: #7a8699; }
.kl_rc_empty a { display: inline-flex; align-items: center; gap: 14px; margin-top: 28px; padding: 13px 24px 13px 26px; border: 1px solid var(--kl-navy); border-radius: 40px; font-size: 15px; font-weight: 600; color: var(--kl-navy); transition: background .3s, color .3s; }
.kl_rc_empty a i { display: block; width: 30px; height: 17px; background: currentColor; -webkit-mask: url(/img/cursor.png) center / 100% 100% no-repeat; mask: url(/img/cursor.png) center / 100% 100% no-repeat; }
.kl_rc_empty a:hover { background: var(--kl-navy); color: #fff; }
/* 상세: 뒤로가기 · 제목 영역 · 본문 · 첨부 · 버튼 */
.programCon.kl_rc_read { padding-top: 80px; }
.programCon.kl_rc_read .prd_tab_wrapper { margin: 0; padding: 0; border: 0; background: none; }
.programCon.kl_rc_read .prd_back_btn01 { display: inline-flex; align-items: center; gap: 10px; font-family: 'Poppins', sans-serif; font-size: 15px; font-weight: 600; color: #5b6779; transition: color .3s; }
.programCon.kl_rc_read .prd_back_btn01:hover { color: var(--kl-navy); }
.programCon.kl_rc_read .prd_back_btn01 img { width: 7px; height: auto; transform: scaleX(-1); opacity: .6; }
.programCon.kl_rc_read .prd_detail_wrapper { margin: 28px 0 0; padding: 0; border: 0; }
.programCon.kl_rc_read .recruitment_detail_top_box { margin: 0; padding: 0 0 34px; border: 0; border-bottom: 2px solid var(--kl-navy); background: none; text-align: left; }
.programCon.kl_rc_read .recruitment_label { display: inline-block; margin: 0; padding: 6px 14px; border-radius: 20px; background: rgba(214,48,49,.1); font-size: 14px; font-weight: 600; color: var(--kl-red); }
.programCon.kl_rc_read .recruitment_tit { margin: 18px 0 0; font-size: 40px; font-weight: 700; line-height: 1.35; letter-spacing: -0.035em; color: var(--kl-navy); word-break: keep-all; }
.programCon.kl_rc_read .recruitment_alt { margin: 14px 0 0; font-family: 'Poppins', sans-serif; font-size: 15px; color: #8a96a8; }
.programCon.kl_rc_read .readEdit { margin: 0; padding: 56px 0 64px; border: 0; font-size: 17px; line-height: 1.85; color: #2c3647; }
.programCon.kl_rc_read .urlFile { margin: 0; padding: 22px 26px; border: 0; border-radius: 12px; background: var(--kl-sky); }
.programCon.kl_rc_read .urlFile p + p { margin-top: 8px; }
.programCon.kl_rc_read .urlFile a { font-size: 15px; color: var(--kl-navy); }
.programCon.kl_rc_read .urlFile a:hover { color: var(--kl-red); text-decoration: underline; }
.programCon.kl_rc_read .ej_du_wrap { margin-top: 48px; padding-top: 40px; border-top: 1px solid #e3e8f0; }
.programCon.kl_rc_read .mok_rok_btn { display: flex; justify-content: center; gap: 12px; margin: 0; }
.programCon.kl_rc_read .mok_rok_btn a { display: inline-flex; align-items: center; justify-content: center; min-width: 180px; height: 58px; margin: 0; padding: 0 30px; border: 1px solid var(--kl-navy); border-radius: 40px; background: #fff; font-size: 16px; font-weight: 600; color: var(--kl-navy); transition: background .3s, color .3s, border-color .3s; }
.programCon.kl_rc_read .mok_rok_btn a strong { font-weight: inherit; color: inherit; }
.programCon.kl_rc_read .mok_rok_btn a:hover { background: var(--kl-navy); color: #fff; }
.programCon.kl_rc_read .mok_rok_btn a.login_chk_btn01 { border-color: var(--kl-red); background: var(--kl-red); color: #fff; }
.programCon.kl_rc_read .mok_rok_btn a.login_chk_btn01:hover { border-color: var(--kl-navy); background: var(--kl-navy); }
@media (max-width: 1024px) {
	.programCon.kl_rc { padding: 56px 0 80px; }
	.kl_rc .kl_label { gap: 12px; margin-bottom: 14px; font-size: 12px; }
	.kl_rc .kl_tit { font-size: 28px; }
	.kl_rc_cnt { padding-bottom: 4px; font-size: 14px; }
	.programCon.kl_rc .prd_search_wrapper02 { margin-top: 24px; }
	.programCon.kl_rc .login_form_flex_box01 { width: 110px; }
	.programCon.kl_rc .login_form_flex_box01 select, .programCon.kl_rc .program_search_box01 { height: 48px; border-radius: 10px; font-size: 14px; }
	.programCon.kl_rc .program_search_box01 { flex: 1 1 auto; }
	.programCon.kl_rc .program_search_box01 input[type="text"] { padding: 0 52px 0 14px; font-size: 14px; }
	.programCon.kl_rc .program_search_box01 a { top: 4px; right: 4px; width: 40px; height: 40px; }
	.programCon.kl_rc .recruitment_table01 .box.inline_type { grid-template-columns: 1fr; gap: 6px; min-height: 0; padding: 18px 4px; }
	.programCon.kl_rc .recruitment_table01 .box.inline_type .recruit_num, .programCon.kl_rc .recruitment_table01 .box.inline_type .recruit_date { display: none; }
	.programCon.kl_rc .recruitment_table01 .box.inline_type .recruit_tit { gap: 10px; }
	.programCon.kl_rc .recruitment_table01 .box.inline_type .recruit_tit .title_value { font-size: 16px; white-space: normal; }
	.programCon.kl_rc .recruitment_table01 .box.inline_type .recruit_period { font-size: 13px; text-align: left; }
	.kl_rc_empty { padding: 56px 16px; }
	.kl_rc_empty strong { font-size: 18px; }
	.kl_rc_empty p { font-size: 14px; }
	.programCon.kl_rc_read { padding-top: 40px; }
	.programCon.kl_rc_read .recruitment_tit { font-size: 24px; }
	.programCon.kl_rc_read .readEdit { padding: 32px 0 40px; font-size: 15px; }
	.programCon.kl_rc_read .mok_rok_btn a { flex: 1; min-width: 0; height: 50px; font-size: 15px; }
}

/* ---------- 채용안내: 01 인력관리 System / 02 평가 / 03 보상 / 04 인력개발 / 05 입사지원 ---------- */
.kl_rg_sys, .kl_rg_ev, .kl_rg_rw, .kl_rg_dv, .kl_rg_ap { padding: 140px 0; }
.kl_rg_sys .hd, .kl_rg_ev .hd, .kl_rg_rw .hd, .kl_rg_dv .hd { display: grid; grid-template-columns: 1fr 1fr; align-items: end; gap: 32px 6%; }
.kl_sub [class^="kl_rg_"] .kl_desc { margin-top: 0; word-break: keep-all; }
.kl_rg_ev .kl_desc { margin-top: 24px; }
/* 01 인력관리 System: 4단계 카드, 사이에 화살표. 마지막(인력개발)이 다시 직무로 이어지는 순환 */
.kl_rg_sys .flow { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; margin-top: 80px; counter-reset: f; }
.kl_rg_sys .flow li { position: relative; padding: 36px 30px 40px; border-radius: 18px; background: var(--kl-sky); }
.kl_rg_sys .flow li.js-reveal:nth-child(2) { transition-delay: .1s; }
.kl_rg_sys .flow li.js-reveal:nth-child(3) { transition-delay: .2s; }
.kl_rg_sys .flow li.js-reveal:nth-child(4) { transition-delay: .3s; }
.kl_rg_sys .flow li:not(:last-child):after { content: ''; position: absolute; right: -30px; top: 50%; width: 20px; height: 12px; margin-top: -6px; background: #b3bfcf; -webkit-mask: url(/img/cursor.png) center / 100% 100% no-repeat; mask: url(/img/cursor.png) center / 100% 100% no-repeat; }
.kl_rg_sys .flow li:last-child { background: var(--kl-navy); color: #fff; }
.kl_rg_sys .flow .no { font-family: 'Poppins', sans-serif; font-size: 44px; font-weight: 700; line-height: 1; letter-spacing: -0.04em; color: #d5dde8; }
.kl_rg_sys .flow li:last-child .no { color: rgba(255,255,255,.2); }
.kl_rg_sys .flow .en { display: block; margin-top: 26px; font-family: 'Poppins', sans-serif; font-size: 13px; font-weight: 600; letter-spacing: .14em; color: var(--kl-red); }
.kl_rg_sys .flow li:last-child .en { color: #ff8a8a; }
.kl_rg_sys .flow strong { display: block; margin-top: 8px; font-size: 28px; font-weight: 700; letter-spacing: -0.03em; color: var(--kl-navy); }
.kl_rg_sys .flow li:last-child strong { color: #fff; }
.kl_rg_sys .flow p { margin-top: 14px; font-size: 16.5px; line-height: 1.7; letter-spacing: -0.02em; color: #4a5566; word-break: keep-all; }
.kl_rg_sys .flow li:last-child p { color: rgba(255,255,255,.8); }
/* 02 평가: 하늘색 배경 + 가로 타임라인 (선 위 점 → 카드) */
.kl_rg_ev { background: var(--kl-sky); }
/* 1년 트랙: 회색 선 위로 빨간 진행선이 그어지고(:after), 시점 알약 → 세로 연결선 → 카드 순서로 나타난다 (ol 이 .is_in 이 될 때) */
.kl_rg_ev .tl { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 70px; }
.kl_rg_ev .tl.js-reveal { opacity: 1; transform: none; }
.kl_rg_ev .tl:before, .kl_rg_ev .tl:after { content: ''; position: absolute; left: 0; right: 0; top: 21px; height: 3px; border-radius: 2px; background: #d5dde8; }
.kl_rg_ev .tl:after { background: linear-gradient(90deg, var(--kl-navy), var(--kl-red)); transform: scaleX(0); transform-origin: 0 50%; transition: transform 1.8s cubic-bezier(.45,0,.2,1) .1s; }
.kl_rg_ev .tl.is_in:after { transform: scaleX(1); }
.kl_rg_ev .tl > li { position: relative; display: flex; flex-direction: column; align-items: flex-start; }
.kl_rg_ev .pin { position: relative; z-index: 1; display: inline-flex; align-items: center; height: 45px; padding: 0 22px; border: 2px solid var(--kl-navy); border-radius: 24px; background: #fff; box-sizing: border-box; font-size: 17px; font-weight: 700; color: var(--kl-navy);
	opacity: 0; transform: scale(.6); transition: opacity .4s, transform .6s cubic-bezier(.3,1.6,.5,1); }
.kl_rg_ev .tl > li:last-child .pin { border-color: var(--kl-red); background: var(--kl-red); color: #fff; }
.kl_rg_ev .cd { position: relative; align-self: stretch; flex: 1; margin-top: 34px; padding: 38px 36px 40px; border-radius: 22px; background: #fff; overflow: visible;
	opacity: 0; transform: translateY(30px); transition: opacity .7s, transform .8s cubic-bezier(.2,.7,.2,1), box-shadow .4s; }
/* 알약과 카드를 잇는 세로선 */
.kl_rg_ev .cd:before { content: ''; position: absolute; left: 40px; top: -34px; width: 2px; height: 34px; background: #cdd6e2; }
.kl_rg_ev .tl.is_in .pin, .kl_rg_ev .tl.is_in .cd { opacity: 1; transform: none; }
.kl_rg_ev .tl.is_in > li:nth-child(1) .pin { transition-delay: .15s; }
.kl_rg_ev .tl.is_in > li:nth-child(1) .cd { transition-delay: .3s, .3s, 0s; }
.kl_rg_ev .tl.is_in > li:nth-child(2) .pin { transition-delay: .75s; }
.kl_rg_ev .tl.is_in > li:nth-child(2) .cd { transition-delay: .9s, .9s, 0s; }
.kl_rg_ev .tl.is_in > li:nth-child(3) .pin { transition-delay: 1.35s; }
.kl_rg_ev .tl.is_in > li:nth-child(3) .cd { transition-delay: 1.5s, 1.5s, 0s; }
.kl_rg_ev .tl.is_in > li .cd:hover { transform: translateY(-8px); box-shadow: 0 30px 56px -30px rgba(19,50,95,.4); transition-delay: 0s; }
.kl_rg_ev .cd .no { position: absolute; right: 30px; top: 22px; font-family: 'Poppins', sans-serif; font-size: 76px; font-weight: 700; line-height: 1; letter-spacing: -0.04em; color: #eef2f7; transition: color .4s; }
.kl_rg_ev .cd:hover .no { color: #e3e9f2; }
.kl_rg_ev .cd .ico { position: relative; display: flex; align-items: center; justify-content: center; width: 60px; height: 60px; border-radius: 18px; background: var(--kl-sky); transition: background .4s, transform .5s cubic-bezier(.3,1.5,.5,1); }
.kl_rg_ev .cd .ico svg { width: 28px; height: 28px; fill: none; stroke: var(--kl-navy); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: stroke .4s; }
.kl_rg_ev .cd:hover .ico { background: var(--kl-navy); transform: rotate(-8deg); }
.kl_rg_ev .cd:hover .ico svg { stroke: #fff; }
.kl_rg_ev .tl strong { position: relative; display: block; margin-top: 24px; font-size: 28px; font-weight: 700; letter-spacing: -0.03em; color: var(--kl-navy); }
.kl_rg_ev .tl ul { position: relative; margin-top: 20px; padding-top: 20px; border-top: 1px solid #e3e8f0; }
.kl_rg_ev .tl ul li { position: relative; padding-left: 18px; font-size: 17px; line-height: 1.6; letter-spacing: -0.02em; color: #2c3647; word-break: keep-all; }
.kl_rg_ev .tl ul li + li { margin-top: 10px; }
.kl_rg_ev .tl ul li:before { content: ''; position: absolute; left: 0; top: .68em; width: 6px; height: 6px; border-radius: 50%; background: var(--kl-red); }
/* 아래: 순환 안내 알약 + 용어 설명 */
.kl_rg_ev .ev_foot { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 14px 24px; margin-top: 30px; }
.kl_rg_ev .loop { display: inline-flex; align-items: center; gap: 10px; padding: 12px 22px 12px 18px; border-radius: 30px; background: #fff; font-size: 16px; font-weight: 600; color: var(--kl-navy); }
.kl_rg_ev .loop svg { width: 22px; height: 22px; fill: none; stroke: var(--kl-red); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .8s cubic-bezier(.3,1.2,.5,1); }
.kl_rg_ev .loop:hover svg { transform: rotate(360deg); }
.kl_rg_ev .note { font-family: 'Poppins', sans-serif; font-size: 14px; color: #7a8699; }
/* 03 보상 */
/* 복리후생 카드: 하늘색 면 + 오른쪽 아래 큰 워터마크 아이콘. 호버 시 떠오르며 남색, 아이콘 원은 빨강으로 바뀌며 흔들리고 워터마크가 돌며 커진다 */
.kl_rg_rw .wf { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 70px; }
.kl_rg_rw .wf li { position: relative; display: flex; flex-direction: column; min-height: 0; padding: 40px 40px 44px; border-radius: 22px; background: var(--kl-sky); overflow: hidden; cursor: default;
	transition: opacity 1s, transform .6s cubic-bezier(.2,.7,.2,1), background-color .45s, box-shadow .45s; }
.kl_rg_rw .wf li.js-reveal:nth-child(3n+2) { transition-delay: .1s, .1s, 0s, 0s; }
.kl_rg_rw .wf li.js-reveal:nth-child(3n) { transition-delay: .2s, .2s, 0s, 0s; }
.kl_rg_rw .wf li.is_in:hover { transform: translateY(-8px); background-color: var(--kl-navy); box-shadow: 0 30px 56px -28px rgba(19,50,95,.55); transition-delay: 0s; }
.kl_rg_rw .wf .no { position: absolute; right: 36px; top: 66px;  /* 아이콘(위 40 + 높이 76) 가운데 높이 */ font-family: 'Poppins', sans-serif; font-size: 17px; font-weight: 600; letter-spacing: .06em; color: #9fb0c7; transition: color .45s; }
.kl_rg_rw .wf li:hover .no { color: rgba(255,255,255,.5); }
.kl_rg_rw .wf .ico { display: flex; align-items: center; justify-content: center; width: 76px; height: 76px; border-radius: 50%; background: #fff; box-shadow: 0 10px 24px -14px rgba(19,50,95,.35); transition: background .45s; }
.kl_rg_rw .wf li:hover .ico { background: var(--kl-red); animation: klWfWiggle .7s cubic-bezier(.3,1.5,.5,1); }
.kl_rg_rw .wf .ico svg { width: 34px; height: 34px; fill: none; stroke: var(--kl-navy); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: stroke .45s; }
.kl_rg_rw .wf li:hover .ico svg { stroke: #fff; }
@keyframes klWfWiggle { 0% { transform: rotate(0) scale(1); } 30% { transform: rotate(-12deg) scale(1.12); } 60% { transform: rotate(8deg) scale(1.06); } 100% { transform: rotate(0) scale(1); } }
/* 제목은 아이콘 아래 같은 높이에 고정 (설명 줄 수가 달라도 카드끼리 제목·설명 시작선이 맞음) */
.kl_rg_rw .wf strong { position: relative; margin-top: 34px; font-size: 27px; font-weight: 700; line-height: 1.35; letter-spacing: -0.03em; color: var(--kl-navy); transition: color .45s; }
.kl_rg_rw .wf p { position: relative; margin-top: 12px; max-width: 92%; font-size: 18px; line-height: 1.7; letter-spacing: -0.02em; color: #4a5566; word-break: keep-all; transition: color .45s; }
.kl_rg_rw .wf li:hover strong { color: #fff; }
.kl_rg_rw .wf li:hover p { color: rgba(255,255,255,.8); }
.kl_rg_rw .wf .wm { position: absolute; right: -26px; bottom: -30px; width: 180px; height: 180px; fill: none; stroke: var(--kl-navy); stroke-width: 1.1; stroke-linecap: round; stroke-linejoin: round; opacity: .06; pointer-events: none; transition: transform .8s cubic-bezier(.2,.7,.2,1), opacity .45s, stroke .45s; }
.kl_rg_rw .wf li:hover .wm { stroke: #fff; opacity: .1; transform: rotate(-14deg) scale(1.12); }
.kl_rg_rw .foot { margin-top: 20px; font-size: 14.5px; line-height: 1.7; color: #7a8699; word-break: keep-all; }
/* 04 인력개발: 남색 배경 + 벤토 그리드 (해외연수 큰 칸) */
.kl_rg_dv { background: var(--kl-navy-deep); color: #fff; }
.kl_rg_dv .kl_label, .kl_rg_dv .kl_tit { color: #fff; }
.kl_rg_dv .kl_label b { color: #ff6b6b; }
.kl_sub .kl_rg_dv .kl_desc { color: rgba(255,255,255,.75); }
.kl_rg_dv .grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr; grid-template-rows: auto auto; gap: 16px; margin-top: 70px; }
.kl_rg_dv .box { padding: 34px 32px 36px; border: 1px solid rgba(255,255,255,.1); border-radius: 18px; background: rgba(255,255,255,.045); transition: opacity 1s, transform 1s cubic-bezier(.2,.7,.2,1), background-color .4s, border-color .4s; }
.kl_rg_dv .box:hover { border-color: rgba(255,255,255,.25); background-color: rgba(255,255,255,.08); }
.kl_rg_dv .box.big { grid-row: 1 / 3; }
.kl_rg_dv .box .en { font-family: 'Poppins', sans-serif; font-size: 12.5px; font-weight: 600; letter-spacing: .14em; color: #ff8a8a; }
.kl_rg_dv .box strong { display: block; margin-top: 10px; font-size: 24px; font-weight: 700; letter-spacing: -0.03em; }
.kl_rg_dv .box p { margin-top: 14px; font-size: 16px; line-height: 1.75; letter-spacing: -0.02em; color: rgba(255,255,255,.75); word-break: keep-all; }
.kl_rg_dv dl { margin-top: 22px; }
.kl_rg_dv dl > div { padding: 18px 0; border-top: 1px solid rgba(255,255,255,.12); }
.kl_rg_dv dt { font-size: 17.5px; font-weight: 700; letter-spacing: -0.02em; }
.kl_rg_dv dd { margin-top: 6px; font-size: 15.5px; line-height: 1.7; letter-spacing: -0.02em; color: rgba(255,255,255,.72); word-break: keep-all; }
/* 05 입사지원: 메일 카드 2 + 채용공고 바로가기(남색) */
.kl_rg_ap .ap { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 50px; }
.kl_rg_ap .ap li { display: flex; flex-direction: column; min-height: 280px; padding: 36px 34px 34px; border: 1px solid #dfe5ee; border-radius: 18px; }
.kl_rg_ap .ap li.js-reveal:nth-child(2) { transition-delay: .1s; }
.kl_rg_ap .ap li.js-reveal:nth-child(3) { transition-delay: .2s; }
.kl_rg_ap .ap .en { font-family: 'Poppins', sans-serif; font-size: 12.5px; font-weight: 600; letter-spacing: .14em; color: var(--kl-red); }
.kl_rg_ap .ap strong { margin-top: 10px; font-size: 26px; font-weight: 700; line-height: 1.35; letter-spacing: -0.03em; color: var(--kl-navy); }
.kl_rg_ap .ap p { margin-top: 12px; font-size: 16px; line-height: 1.7; color: #4a5566; }
.kl_rg_ap .ap li > a:not(.kl_sub_btn) { display: inline-flex; align-items: center; gap: 10px; margin-top: auto; padding-top: 24px; font-family: 'Poppins', sans-serif; font-size: 18px; font-weight: 600; color: var(--kl-navy); transition: color .3s; }
.kl_rg_ap .ap li > a:not(.kl_sub_btn):hover { color: var(--kl-red); }
.kl_rg_ap .ap li > a svg { width: 34px; height: 34px; padding: 8px; border-radius: 50%; background: var(--kl-sky); box-sizing: border-box; fill: none; stroke: var(--kl-navy); stroke-width: 1.7; stroke-linejoin: round; }
.kl_rg_ap .ap li.go { border-color: var(--kl-navy); background: var(--kl-navy); }
.kl_rg_ap .ap li.go .en { color: #ff8a8a; }
.kl_rg_ap .ap li.go strong { color: #fff; }
.kl_rg_ap .ap li.go .kl_sub_btn { align-self: flex-start; margin-top: auto; color: #fff; }
.kl_rg_ap .ap li.go .kl_sub_btn:hover { color: var(--kl-navy); }
/* 입사지원: 삭제된 인력개발 섹션의 남색 배경을 이어받음 (2026-10-30) */
.kl_rg_ap { background: var(--kl-navy-deep); color: #fff; }
.kl_rg_ap .kl_label, .kl_rg_ap .kl_tit { color: #fff; }
.kl_rg_ap .kl_label b { color: #ff6b6b; }
.kl_rg_ap .ap li { border-color: rgba(255,255,255,.1); background: rgba(255,255,255,.045); transition: opacity 1s, transform 1s cubic-bezier(.2,.7,.2,1), background-color .4s, border-color .4s; }
.kl_rg_ap .ap li:hover { border-color: rgba(255,255,255,.25); background-color: rgba(255,255,255,.08); }
.kl_rg_ap .ap .en { color: #ff8a8a; }
.kl_rg_ap .ap strong { color: #fff; }
.kl_rg_ap .ap p { color: rgba(255,255,255,.75); }
.kl_rg_ap .ap li > a:not(.kl_sub_btn) { color: #fff; }
.kl_rg_ap .ap li > a:not(.kl_sub_btn):hover { color: #ff8a8a; }
.kl_rg_ap .ap li > a svg { background: rgba(255,255,255,.12); stroke: #fff; }

/* ---------- 복리후생 아코디언 (2026-10-30): 왼쪽 이미지(문구 겹침, 스크롤 고정) + 오른쪽 아코디언, 항목을 열면 왼쪽 이미지 교체 ---------- */
.kl_rg_wfa .wfa { display: grid; grid-template-columns: 40% 1fr; gap: 0 4%; align-items: start; }
.kl_rg_wfa .vis { position: sticky; top: calc(var(--kl-header-h) + 30px); height: min(780px, calc(100vh - var(--kl-header-h) - 60px)); min-height: 560px; overflow: hidden; background: linear-gradient(180deg, #e4eef9 0%, #f3f7fc 100%); }
.kl_rg_wfa .ph, .kl_rg_wfa .ph_i { position: absolute; inset: 0; }
.kl_rg_wfa .ph_i { opacity: 0; transition: opacity .6s; }
.kl_rg_wfa .ph_i.on { opacity: 1; }
.kl_rg_wfa .ph_i img { display: block; width: 100%; height: 100%; object-fit: cover; }
.kl_rg_wfa .ready { position: absolute; left: 50%; top: 66%; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 14px; font-size: 16px; font-weight: 500; letter-spacing: -0.02em; color: #8a9ab0; white-space: nowrap; }
.kl_rg_wfa .ready svg { width: 64px; height: 64px; fill: none; stroke: #b4c3d6; stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; }
.kl_rg_wfa .hd { align-items: end; margin-bottom: 64px; }  /* 머리: 제목 왼쪽, 설명은 오른쪽 — 제목 마지막 줄(모두를 위한 복리후생) 아랫선에 맞춤 (2026-10-30) */
.kl_rg_wfa .hd .kl_desc { margin-top: 0; }

.kl_rg_wfa .acc { display: flex; flex-direction: column; gap: 14px; }
.kl_rg_wfa .acc > li { border: 1px solid #e3e8f0; border-radius: 18px; background: #fff; transition: opacity 1s, transform 1s cubic-bezier(.2,.7,.2,1), background-color .4s, border-color .4s, box-shadow .4s; }
.kl_rg_wfa .acc > li:hover { border-color: #c9d6e6; }
.kl_rg_wfa .acc > li.on { border-color: #cfe0f3; background: #eef5fd; box-shadow: 0 20px 40px -30px rgba(19,50,95,.35); }
.kl_rg_wfa .acc_hd { display: grid; grid-template-columns: 46px 1fr 44px; align-items: center; gap: 0 18px; width: 100%; padding: 22px 26px; border: 0; background: none; font: inherit; text-align: left; cursor: pointer; }  /* 앞 아이콘 제거 (2026-11-02) */
.kl_rg_wfa .acc_hd .no { font-family: 'Poppins', sans-serif; font-size: 17px; font-weight: 600; letter-spacing: .04em; color: #9fb0c7; transition: color .4s; }
.kl_rg_wfa li.on .acc_hd .no { color: var(--kl-navy); }
.kl_rg_wfa .acc_hd .tt { display: block; min-width: 0; }
.kl_rg_wfa .acc_hd strong { display: block; font-size: 22px; font-weight: 700; letter-spacing: -0.03em; color: var(--kl-navy); }
.kl_rg_wfa .acc_hd .sum, .kl_rg_wfa .acc_hd .lead { display: block; margin-top: 6px; font-size: 16px; line-height: 1.6; letter-spacing: -0.02em; color: #5b6778; word-break: keep-all; }
.kl_rg_wfa .acc_hd .lead, .kl_rg_wfa .acc_hd .sum { display: none; }  /* 닫힘: 제목만 (2026-10-30 요청) */
.kl_rg_wfa li.on .acc_hd .lead { display: block; }
.kl_rg_wfa .pm { position: relative; width: 44px; height: 44px; border-radius: 50%; background: #eef2f7; transition: background .4s; }
.kl_rg_wfa .pm:before, .kl_rg_wfa .pm:after { content: ''; position: absolute; left: 50%; top: 50%; width: 14px; height: 2px; margin: -1px 0 0 -7px; background: var(--kl-navy); transition: transform .4s, background .4s; }
.kl_rg_wfa .pm:after { transform: rotate(90deg); }
.kl_rg_wfa li.on .pm { background: var(--kl-navy); }
.kl_rg_wfa li.on .pm:before, .kl_rg_wfa li.on .pm:after { background: #fff; }
.kl_rg_wfa li.on .pm:after { transform: rotate(0); }
.kl_rg_wfa .acc_bd { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .45s cubic-bezier(.2,.7,.2,1); }
.kl_rg_wfa li.on .acc_bd { grid-template-rows: 1fr; }
.kl_rg_wfa .acc_bd > .in { overflow: hidden; }
.kl_rg_wfa .acc_bd .li { margin: 0 26px 24px calc(26px + 46px + 18px); padding: 22px 28px; border-radius: 14px; background: #fff; columns: 2; column-gap: 40px; column-rule: 1px solid #e3e8f0; }
.kl_rg_wfa .acc_bd .li li { position: relative; padding: 4px 0 4px 16px; font-size: 16px; line-height: 1.6; letter-spacing: -0.02em; color: #2c3647; break-inside: avoid; word-break: keep-all; }
.kl_rg_wfa .acc_bd .li li:before { content: ''; position: absolute; left: 0; top: 14px; width: 5px; height: 5px; border-radius: 50%; background: var(--kl-navy); }
.kl_rg_wfa .foot { margin-top: 24px; }
@media (max-width: 1400px) {
	.kl_rg_wfa .wfa { grid-template-columns: 38% 1fr; gap: 0 3%; }
	.kl_rg_wfa .acc_bd .li { margin-left: 26px; }
}
@media (max-width: 1024px) {
	.kl_rg_wfa .wfa { grid-template-columns: 1fr; gap: 24px; }
	.kl_rg_wfa .hd { margin-bottom: 32px; }
	.kl_rg_wfa .hd .kl_desc { margin-top: 0; }
	.kl_rg_wfa .vis { position: relative; top: auto; height: auto; min-height: 0; aspect-ratio: 16 / 10; }
	.kl_rg_wfa .ready { top: 50%; }
}
@media (max-width: 640px) {
	.kl_rg_wfa .acc { gap: 10px; }
	.kl_rg_wfa .acc_hd { grid-template-columns: 1fr 36px; gap: 0 14px; padding: 16px 16px; }
	.kl_rg_wfa .acc_hd .no { display: none; }
	.kl_rg_wfa .acc_hd strong { font-size: 18px; }
	.kl_rg_wfa .acc_hd .sum, .kl_rg_wfa .acc_hd .lead { font-size: 14.5px; }
	.kl_rg_wfa .pm { width: 36px; height: 36px; }
	.kl_rg_wfa .acc_bd .li { margin: 0 16px 16px; padding: 16px 18px; columns: 1; }
	.kl_rg_wfa .acc_bd .li li { font-size: 14.5px; }
	.kl_rg_wfa .ready { font-size: 14px; }
	.kl_rg_wfa .ready svg { width: 48px; height: 48px; }
}
@media (max-width: 1400px) {
	.kl_rg_sys .flow { grid-template-columns: repeat(3, 1fr); gap: 16px; }  /* 인력개발 카드 삭제로 3장 (2026-10-29) */
	.kl_rg_sys .flow li:not(:last-child):after { display: none; }
	.kl_rg_rw .wf { grid-template-columns: repeat(2, 1fr); }
	.kl_rg_dv .grid { grid-template-columns: 1fr 1fr; }
	.kl_rg_dv .box.big { grid-column: 1 / -1; grid-row: auto; }
	.kl_rg_ap .ap { grid-template-columns: 1fr 1fr; }
	.kl_rg_ap .ap li.go { grid-column: 1 / -1; min-height: 0; }
}
@media (max-width: 1024px) {
	.kl_rg_sys, .kl_rg_ev, .kl_rg_rw, .kl_rg_dv, .kl_rg_ap { padding: 72px 0; }
	.kl_rg_sys .hd, .kl_rg_ev .hd, .kl_rg_rw .hd, .kl_rg_dv .hd { grid-template-columns: 1fr; gap: 20px; }
	.kl_rg_sys .flow { grid-template-columns: 1fr; gap: 10px; margin-top: 36px; }
	.kl_rg_sys .flow li { padding: 24px 22px 26px; border-radius: 14px; }
	.kl_rg_sys .flow .no { font-size: 30px; }
	.kl_rg_sys .flow .en { margin-top: 16px; font-size: 11px; }
	.kl_rg_sys .flow strong { font-size: 21px; }
	.kl_rg_sys .flow p { font-size: 14.5px; }
	.kl_rg_sys .flow p br { display: none; }
	/* 모바일: 세로 트랙 (왼쪽 선 위에서 아래로 그어짐) */
	.kl_rg_ev .tl { grid-template-columns: 1fr; gap: 22px; margin-top: 36px; padding-left: 26px; }
	.kl_rg_ev .tl:before, .kl_rg_ev .tl:after { left: 6px; right: auto; top: 0; bottom: 0; width: 3px; height: auto; }
	.kl_rg_ev .tl:after { background: linear-gradient(180deg, var(--kl-navy), var(--kl-red)); transform: scaleY(0); transform-origin: 50% 0; }
	.kl_rg_ev .tl.is_in:after { transform: scaleY(1); }
	.kl_rg_ev .pin { height: 36px; padding: 0 16px; font-size: 14px; }
	.kl_rg_ev .cd { margin-top: 12px; padding: 24px 20px 26px; border-radius: 14px; }
	.kl_rg_ev .cd:before { display: none; }
	.kl_rg_ev .tl.is_in > li .cd:hover { transform: none; box-shadow: none; }
	.kl_rg_ev .cd .no { right: 18px; top: 16px; font-size: 44px; }
	.kl_rg_ev .cd .ico { width: 46px; height: 46px; border-radius: 14px; }
	.kl_rg_ev .cd .ico svg { width: 22px; height: 22px; }
	.kl_rg_ev .tl strong { margin-top: 16px; font-size: 20px; }
	.kl_rg_ev .tl ul { margin-top: 14px; padding-top: 14px; }
	.kl_rg_ev .tl ul li { font-size: 14.5px; }
	.kl_rg_ev .ev_foot { margin-top: 22px; }
	.kl_rg_ev .loop { padding: 10px 16px 10px 14px; font-size: 14px; }
	.kl_rg_ev .note { font-size: 12px; }
	.kl_rg_rw .wf { grid-template-columns: 1fr; gap: 10px; margin-top: 32px; }
	.kl_rg_rw .wf li { min-height: 0; padding: 24px 22px 26px; border-radius: 16px; }
	.kl_rg_rw .wf li.js-reveal:nth-child(n) { transition-delay: 0s; }
	.kl_rg_rw .wf li.is_in:hover { transform: none; }
	.kl_rg_rw .wf .no { right: 22px; top: 42px; font-size: 14px; }
	.kl_rg_rw .wf .ico { width: 56px; height: 56px; }
	.kl_rg_rw .wf .ico svg { width: 26px; height: 26px; }
	.kl_rg_rw .wf strong { margin-top: 20px; font-size: 21px; }
	.kl_rg_rw .wf p { margin-top: 8px; font-size: 15.5px; }
	.kl_rg_rw .wf .wm { width: 120px; height: 120px; }
	.kl_rg_rw .foot { font-size: 13px; }
	.kl_rg_dv .grid { grid-template-columns: 1fr; gap: 10px; margin-top: 36px; }
	.kl_rg_dv .box { padding: 24px 22px; border-radius: 14px; }
	.kl_rg_dv .box strong { font-size: 20px; }
	.kl_rg_dv .box p, .kl_rg_dv dd { font-size: 14.5px; }
	.kl_rg_dv dt { font-size: 16px; }
	.kl_rg_ap .ap { grid-template-columns: 1fr; gap: 10px; margin-top: 28px; }
	.kl_rg_ap .ap li { min-height: 0; padding: 24px 22px; border-radius: 14px; }
	.kl_rg_ap .ap strong { font-size: 21px; }
	.kl_rg_ap .ap p { font-size: 14.5px; }
	.kl_rg_ap .ap li > a:not(.kl_sub_btn) { font-size: 16px; }
	.kl_rg_ap .ap li.go .kl_sub_btn { margin-top: 24px; }
}

/* ---------- 05 선대 바로가기 (사진 배경 배너) ---------- */
.kl_sub_fl { position: relative; padding: 150px 0; background: var(--kl-navy-deep); color: #fff; overflow: hidden; }
.kl_sub_fl .bg { position: absolute; inset: 0; }
.kl_sub_fl .bg img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 70% 50%; }
.kl_sub_fl .bg:after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(13,38,72,.95) 0%, rgba(13,38,72,.7) 35%, rgba(13,38,72,.1) 70%); }
.kl_sub_fl .kl_in { position: relative; z-index: 1; }
.kl_sub_fl .kl_label, .kl_sub_fl .kl_tit { color: #fff; }
.kl_sub_fl .kl_label b { color: #ff6b6b; }
.kl_sub_fl .kl_desc { color: rgba(255,255,255,.85); }
.kl_sub_btn {
	display: inline-flex; align-items: center; gap: 22px; margin-top: 50px; padding: 18px 34px 18px 38px;
	border: 1px solid rgba(255,255,255,.55); border-radius: 40px; font-size: 17px; font-weight: 500; color: #fff;
	transition: background .3s, border-color .3s, color .3s;
}
.kl_sub_btn i { display: block; width: 40px; height: 22px; background: currentColor; -webkit-mask: url(/img/cursor.png) center / 100% 100% no-repeat; mask: url(/img/cursor.png) center / 100% 100% no-repeat; }
.kl_sub_btn:hover { background: #fff; border-color: #fff; color: var(--kl-navy); }

/* ---------- 반응형 ---------- */
@media (max-width: 1400px) {
	.kl_sub .kl_tit { font-size: 44px; }
	.kl_sub_hero_txt h2 { font-size: 34px; }
	.kl_sub_ov .txt .kl_tit { font-size: 48px; }
	.kl_sub_ov .txt p:not(.kl_label) { font-size: 18px; }
	.kl_sub_ov .txt p br { display: none; }
	.kl_sub_st .kl_tit { font-size: 48px; }
	.kl_sub_st li { padding: 6px 24px 6px 28px; }
	.kl_sub_st li strong { font-size: 52px; }
	.kl_sub_st li p { font-size: 18px; }
	.kl_sub .pt_top { grid-template-columns: 1fr; gap: 50px; }
	.kl_sub_kc .kl_tit { font-size: 30px; }
	.kl_sub_pc .cards { gap: 0 24px; }
	.kl_sub_pc .cards > li > strong { font-size: 22px; }
	.kl_sub_pc .cards > li > p { font-size: 16px; }
	.kl_sub_pc .cards > li > p br { display: none; }
	.kl_sm_pn .grid4 > li { padding: 40px 36px 44px; }
	.kl_sm_pn .grid4 h4 { font-size: 23px; }
	.kl_fl_gl .grid { gap: 44px 20px; }
	.kl_fl_modal .box { grid-template-columns: minmax(0, 1fr) 340px; width: min(1400px, 100%, calc((100vh - 80px) * 1.5 + 340px)); }
	.kl_fl_modal .info { padding: 48px 32px 40px; }
	.kl_tl_ov .quote p { font-size: 21px; }
	.kl_tl_ov .quote p br { display: none; }
	.kl_tl_cv .vals { grid-template-columns: repeat(3, 1fr); }
	.kl_sm_pn .edu { margin: -180px 20px 0; padding: 56px 40px 48px; }
	.kl_sm_pn .edu_top { grid-template-columns: 1fr minmax(0, 380px); gap: 40px 40px; }
	.kl_sm_pn .edu_side { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 0 40px; padding: 28px 0 0; border-left: 0; border-top: 1px solid var(--kl-line); }
	.kl_sm_pn .chk { margin-top: 0; }
	.kl_sm_pn .edu_cards { gap: 16px; }
	.kl_sm_pn .edu_cards > li { padding: 28px 24px 30px; }
	.kl_sm_pn .c_box li { font-size: 15.5px; }
	.kl_sm_pn .proc ol { gap: 0 36px; }
	.kl_sm_pn .proc li svg { width: 34px; height: 34px; }
	.kl_sm_pn .proc li em { font-size: 20px; }
	.kl_sm_pn .proc li small { font-size: 13px; }
	.kl_sm_pn .proc li:not(:last-child):after { right: -23px; width: 10px; height: 10px; margin-top: -5px; }
}
@media (max-width: 1024px) {
	.kl_sub .kl_in { padding: 0 20px; }
	.kl_sub .kl_label { gap: 12px; margin-bottom: 18px; font-size: 12px; }
	.kl_sub .kl_tit { font-size: 32px; }
	.kl_sub .kl_desc { margin-top: 18px; font-size: 16px; }
	.kl_sub .kl_desc br { display: none; }

	.kl_sub_hero { min-height: 460px; height: 64vh; }
	.kl_sub_hero .bg img { object-position: 68% 50%; }
	.kl_sub_hero .bg:after { background: linear-gradient(180deg, rgba(10,32,66,.55) 0%, rgba(10,32,66,.2) 40%, rgba(10,32,66,.75) 100%); }
	.kl_sub_path { top: calc(var(--kl-header-h) + 20px); gap: 12px; font-size: 14px; }
	.kl_sub_hero_txt { top: auto; bottom: 48px; transform: none; }
	.kl_sub_hero_txt .eye { font-size: 11px; }
	.kl_sub_hero_txt .big { font-size: 62px; }
	.kl_sub_hero_txt h2 { margin-top: 16px; font-size: 24px; }
	.kl_sub_hero_txt p { margin-top: 10px; font-size: 15px; }

	.kl_sub_ov { grid-template-columns: 1fr; gap: 40px; padding: 72px 0; }
	.kl_sub_ov .txt { padding: 0 20px; }
	.kl_sub_ov .txt .kl_label { margin-bottom: 18px; font-size: 12px; }
	.kl_sub_ov .txt .kl_tit { font-size: 32px; }
	.kl_sub_ov .txt p:not(.kl_label) { margin-top: 20px; font-size: 16px; }
	.kl_sub_ov .txt p br { display: none; }

	.kl_sub_st { padding: 72px 0; }
	.kl_sub_st .bg { width: 100%; }
	.kl_sub_st .bg:after { background: rgba(13,38,72,.78); }
	.kl_sub_st ul { grid-template-columns: 1fr 1fr; gap: 36px 0; margin-top: 44px; }
	.kl_sub_st li { padding: 0 12px 0 18px; }
	.kl_sub_st .kl_label { margin-bottom: 18px; font-size: 12px; }
	.kl_sub_st .kl_tit { font-size: 32px; }
	.kl_sub_st li strong { font-size: clamp(28px, 8vw, 44px); }  /* 2열: 375px 폭에서 약 30px → '170,000+' 가 칸 안에 들어간다 */
	.kl_sub_st li p { margin-top: 10px; font-size: 15px; }
	.kl_sub_st li p br { display: none; }

	.kl_sub_pt { padding: 72px 0; }
	.kl_sub .pt_top { gap: 32px; }
	.kl_sub_more { margin-top: 28px; font-size: 15px; }

	/* 타임라인: 세로로 */
	.kl_sub_kc { margin-top: 56px; padding-top: 40px; }
	.kl_sub_ks { padding: 72px 0 40px; }
	.kl_sub_ks .kl_sub_kc { margin-top: 0; padding-top: 0; }
	.kl_sub_kc .kl_sublabel { margin-bottom: 12px; font-size: 12px; }
	.kl_sub_kc .kl_tit { font-size: 24px; }
	.kl_sub_kc .kl_desc { font-size: 15px; }
	.kl_sub_kc ol { grid-template-columns: 1fr; margin-top: 40px; padding-left: 28px; }
	.kl_sub_kc ol:before { left: 5px; right: auto; top: 8px; bottom: 8px; width: 1px; height: auto; }
	.kl_sub_kc ol:after, .kl_sub_kc li:not(:last-child):after { display: none; }
	.kl_sub_kc li { padding: 0 0 34px; }
	.kl_sub_kc li:before { left: -28px; top: 7px; }
	.kl_sub_kc li .y { display: block; height: auto; font-size: 20px; }
	.kl_sub_kc li .y br { display: none; }
	.kl_sub_kc li p { margin-top: 8px; font-size: 15px; }
	.kl_sub_kc li p br { display: none; }

	/* 계약 카드: 1열 */
	.kl_sub_pc { padding: 72px 0 80px; }
	.kl_sub_pc .cards { grid-template-columns: 1fr; gap: 44px; margin-top: 36px; }
	.kl_sub_pc .ph_name { font-size: 28px; }
	.kl_sub_pc .cards > li > strong { margin-top: 20px; font-size: 20px; }
	.kl_sub_pc .cards > li > p { margin-top: 8px; font-size: 15px; }
	.kl_sub_pc .cards > li > p + .go { margin-top: 18px; width: 40px; height: 40px; }
	.kl_sub_pc .cards.seg { grid-template-columns: 1fr; gap: 44px; }
	.kl_sub_pc .seg > li > strong { font-size: 26px; }
	.kl_sub_pc .seg > li > strong small { font-size: 14px; }
	.kl_sub_pc .spec li { padding: 5px 12px; font-size: 13px; }
	.kl_sub_pc .client { gap: 12px 22px; }
	.kl_sub_pc .client img { height: 24px; }

	/* Ship Management */
	.kl_sm_intro { padding: 72px 0 56px; }
	.kl_sm_intro .kl_desc { margin-top: 20px; font-size: 15px; text-align: left; }
	.kl_sm_tab button { height: 72px; gap: 2px; }
	.kl_sm_tab button + button:before { top: 20px; bottom: 20px; }
	.kl_sm_tab button span { font-size: 17px; }
	.kl_sm_tab button small { font-size: 10px; letter-spacing: .08em; }
	.kl_sm_pn { padding: 56px 0 72px; }
	.kl_sm_pn .pn_hd { grid-template-columns: 1fr; }
	.kl_sm_pn .pn_hd .kl_desc { margin-top: 18px; }
	.kl_sm_pn .pn_ph { margin-top: 32px; aspect-ratio: 16 / 9; }
	.kl_sm_pn .grid4 { grid-template-columns: 1fr; gap: 16px; margin-top: 16px; }
	.kl_sm_pn .grid4 > li { padding: 28px 22px 30px; }
	.kl_sm_pn .grid4 .n { font-size: 14px; }
	.kl_sm_pn .grid4 h4 { margin-top: 18px; font-size: 20px; }
	.kl_sm_pn .grid4 h4 small { font-size: 14px; }
	.kl_sm_pn .grid4 p { margin-top: 14px; font-size: 15px; }
	.kl_sub .tags { margin-top: 16px; gap: 6px; }
	.kl_sub .tags li { padding: 5px 12px; font-size: 13px; }

	/* 선대 현황 */
	.kl_fl_gl { padding: 72px 0 80px; }
	.kl_fl_gl .hd { grid-template-columns: 1fr; }
	.kl_fl_gl .hd .kl_desc { margin-top: 18px; }
	.kl_fl_gl .bar { flex-direction: column; align-items: flex-start; gap: 14px; margin-top: 36px; padding-bottom: 16px; }
	.kl_fl_gl .flt button { height: 38px; padding: 0 16px; font-size: 14px; }
	.kl_fl_gl .cnt { font-size: 13px; }
	.kl_fl_gl .grid { grid-template-columns: 1fr 1fr; gap: 28px 12px; margin-top: 28px; }
	.kl_fl_gl .card .tag { margin-top: 12px; }
	.kl_sub .tag { padding: 4px 9px; font-size: 10px; }
	.kl_fl_gl .card strong { margin-top: 6px; font-size: 16px; }
	.kl_fl_gl .card .cap { font-size: 13px; }
	.kl_fl_gl .zoom { display: none; }
	.kl_fl_gl .pager { margin-top: 40px; gap: 2px; }
	.kl_fl_gl .pager button { min-width: 36px; height: 36px; font-size: 14px; }
	.kl_fl_modal { align-items: flex-end; padding: 0; }
	.kl_fl_modal .box { grid-template-columns: 1fr; width: 100%; max-height: 92vh; overflow-y: auto; }

	.kl_fl_modal .info { height: auto; min-height: 0; padding: 26px 20px 34px; overflow: visible; }
	.kl_fl_modal .info strong { font-size: 24px; }
	.kl_fl_modal .info p { font-size: 14px; }
	.kl_fl_modal .info dt, .kl_fl_modal .info dd { padding: 11px 0; font-size: 13px; }
	.kl_fl_modal .prev, .kl_fl_modal .next { top: 23vh; width: 40px; height: 40px; margin-top: -20px; }
	.kl_fl_modal .prev { left: 10px; }
	.kl_fl_modal .next { right: 10px; }
	.kl_fl_modal .close { right: 10px; top: 10px; width: 38px; height: 38px; }

	/* 인재상 */
	.kl_tl_ov { padding: 72px 0; }
	.kl_tl_ov .tl_dia { margin-top: 36px; }
	.kl_tl_ov .tl_dia .ring { border-width: 8px; }
	.kl_tl_ov .tl_dia li span { border-width: 6px; padding: 0 8%; font-size: clamp(10px, 3vw, 14px); }
	.kl_tl_ov .quote { grid-template-columns: 1fr; gap: 14px; margin-top: 40px; }
	.kl_tl_ov .quote li { padding: 40px 24px 30px; }
	.kl_tl_ov .quote li:before { left: 22px; top: 10px; font-size: 64px; }
	.kl_tl_ov .quote p { padding-top: 16px; font-size: 17px; }
	.kl_tl_cv { padding: 72px 0 80px; }
	.kl_tl_cv .hd { grid-template-columns: 1fr; }
	.kl_tl_cv .kl_desc { margin-top: 18px; }
	/* 모바일: 1열 카드. 호버 효과 없음 */
	.kl_tl_cv .vals { grid-template-columns: 1fr; gap: 10px; margin-top: 40px; }
	.kl_tl_cv .vals li { padding: 24px 22px 26px; border-radius: 14px; }
	.kl_tl_cv .vals li.is_in:hover { transform: none; border-color: rgba(255,255,255,.1); background-color: rgba(255,255,255,.045); box-shadow: none; }
	.kl_tl_cv .vals li:hover:after { transform: scaleX(0); }
	.kl_tl_cv .vals li:hover .n { color: #ff8a8a; border-color: rgba(255,255,255,.14); }
	.kl_tl_cv .vals li:hover small { color: rgba(255,255,255,.6); }
	.kl_tl_cv .vals li:hover strong { color: #fff; }
	.kl_tl_cv .vals li:hover p { color: rgba(255,255,255,.88); }
	.kl_tl_cv .n { padding-bottom: 14px; font-size: 15px; }
	.kl_tl_cv .vals small { margin-top: 16px; font-size: 12.5px; }
	.kl_tl_cv .vals strong { min-height: 0; margin-top: 4px; font-size: 21px; }
	.kl_tl_cv .vals p { margin-top: 8px; font-size: 15px; line-height: 1.7; }
	.kl_sm_pn.crew .pn_ph { aspect-ratio: 16 / 10; }
	.kl_sm_pn .edu { margin: -60px 0 0; padding: 32px 18px 24px; }
	.kl_sm_pn .edu_top { grid-template-columns: 1fr; gap: 28px; }
	.kl_sm_pn .edu_tit { font-size: 24px; }
	.kl_sm_pn .edu_desc { margin-top: 12px; font-size: 15px; }
	.kl_sm_pn .venn { width: min(320px, 100%); margin: 0 auto; }
	.kl_sm_pn .venn .l svg { width: 18px; height: 18px; margin-bottom: 4px; }
	.kl_sm_pn .venn .l b { font-size: 13px; }
	.kl_sm_pn .venn .l small { font-size: 9px; }
	.kl_sm_pn .venn .core { font-size: 10px; box-shadow: 0 0 0 4px rgba(255,255,255,.55); }
	.kl_sm_pn .edu_side { grid-template-columns: 1fr; gap: 18px; padding-top: 22px; }
	.kl_sm_pn .edu_side p, .kl_sm_pn .chk li { font-size: 15px; }
	.kl_sm_pn .edu_cards { grid-template-columns: 1fr; gap: 14px; margin-top: 32px; }
	.kl_sm_pn .edu_cards > li { padding: 24px 20px 26px; border-radius: 12px; }
	.kl_sm_pn .c_hd b { font-size: 18px; }
	.kl_sm_pn .c_hd strong { font-size: 20px; }
	.kl_sm_pn .c_desc { margin-top: 16px; font-size: 15px; }
	.kl_sm_pn .c_box { margin-top: 18px; padding-top: 18px; }
	.kl_sm_pn .c_box ul + h5 { margin-top: 20px; }
	.kl_sm_pn .c_box li { padding-left: 28px; font-size: 15px; }
	.kl_sm_pn .c_box li + li { margin-top: 8px; }
	.kl_sm_pn .proc { margin-top: 56px; }
	.kl_sm_pn .proc_h { font-size: 25px; }
	.kl_sm_pn .proc_d { font-size: 14px; }
	.kl_sm_pn .proc ol { flex-wrap: wrap; gap: 20px 22px; margin-top: 28px; }
	.kl_sm_pn .proc li { flex: none; }
	.kl_sm_pn .proc li span { width: 92px; height: 92px; }
	.kl_sm_pn .proc li svg { width: 22px; height: 22px; }
	.kl_sm_pn .proc li b { margin-top: 5px; font-size: 11px; }
	.kl_sm_pn .proc li em { margin-top: 2px; font-size: 13.5px; }
	.kl_sm_pn .proc li small { display: none; }
	.kl_sm_pn .proc li:not(:last-child):after { right: -15px; width: 7px; height: 7px; margin-top: -4px; border-width: 2px 2px 0 0; }
	/* 지도: 작은 화면에서는 항구 이름이 읽히지 않으므로 지도 아래 목록으로 대신한다 */
	.kl_map_svg .lbl { display: none; }
	.kl_map_info { grid-template-columns: 1fr; gap: 12px; margin-top: 20px; }
	.kl_map_info .mi { padding: 24px 20px 8px; border-radius: 12px; }
	.kl_map_info .mi_hd { padding-bottom: 16px; }
	.kl_map_info .mi .tag { font-size: 24px; }
	.kl_map_info .lgd { margin-left: 0; font-size: 13px; }
	.kl_map_info dl > div { grid-template-columns: 1fr; gap: 8px; padding: 16px 0; }
	.kl_map_info dt { height: auto; font-size: 16px; }
	.kl_map_info dd span { font-size: 16px; line-height: 26px; }
	.kl_map_info dd { margin-left: -26px; clip-path: inset(-6px 0 -6px 26px); }
	.kl_map_info dd span:before { margin: 0 11px; }

	.kl_sub_fl { padding: 80px 0 90px; }
	.kl_sub_fl .bg:after { background: linear-gradient(180deg, rgba(13,38,72,.92) 0%, rgba(13,38,72,.6) 60%, rgba(13,38,72,.4) 100%); }
	.kl_sub_btn { margin-top: 32px; padding: 14px 26px; font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) {
	.kl_sub .js-reveal, .kl_sub_hero_txt > * { opacity: 1; transform: none; transition: none; }
	.kl_sub_ov .ph.js-reveal { clip-path: none; }
}

/* =========================================================
   회사소개 > CI (company/ci/index)
   ========================================================= */
.kl_sub .blind { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- 01 신규 상호: 왼쪽 제목 + 큰 변경일자 / 오른쪽 변경 전(옅게) → 변경 후(남색·로고·선박) 세로 흐름 ---------- */
.kl_ci_nm { padding: 150px 0 140px; }
.kl_ci_nm .kl_in { display: grid; grid-template-columns: 40% 1fr; gap: 0 6%; align-items: stretch; }
.kl_ci_nm .head { display: flex; flex-direction: column; justify-content: space-between; gap: 50px; }
.kl_ci_nm .head .kl_desc br { display: none; }
/* 변경일자: 큰 숫자 날짜 */
.kl_ci_nm .date .lbl { display: block; font-size: 15px; font-weight: 600; color: var(--kl-gray); }
.kl_ci_nm .date strong { display: block; margin-top: 10px; font-family: 'Poppins', sans-serif; font-size: clamp(56px, 4.4vw, 84px); font-weight: 600; line-height: 1; letter-spacing: -0.035em; color: var(--kl-navy); }
.kl_ci_nm .date strong i { font-style: normal; color: var(--kl-red); }
.kl_ci_nm .date .ko { display: block; margin-top: 14px; font-size: 16px; color: var(--kl-gray); }

.kl_ci_nm .flow { display: flex; flex-direction: column; }
.kl_ci_nm .card { position: relative; overflow: hidden; }
.kl_ci_nm .tag { display: inline-flex; align-items: baseline; gap: 10px; font-family: 'Poppins', sans-serif; font-size: 14px; font-weight: 600; letter-spacing: .16em; color: #8a9ab3; }
.kl_ci_nm .tag em { font-family: 'Noto Sans KR', sans-serif; font-size: 14px; font-style: normal; font-weight: 500; letter-spacing: 0; }
.kl_ci_nm dl { position: relative; display: grid; grid-template-columns: 64px 1fr; gap: 14px 0; align-items: baseline; margin-top: 26px; }
.kl_ci_nm dt { font-size: 15px; color: var(--kl-gray); }
.kl_ci_nm dd { font-weight: 600; letter-spacing: -0.02em; }
/* 변경 전: 연한 면 + 옅은 글자 */
.kl_ci_nm .before { padding: 34px 44px 38px; background: var(--kl-sky); }
.kl_ci_nm .before dd { font-size: 22px; color: #97a3b4; }
/* 가운데 화살표: 두 카드 사이에 걸친 빨간 원 + 아래 방향, 살짝 위아래로 움직임 */
.kl_ci_nm .arr { position: relative; z-index: 2; display: block; height: 18px; }
.kl_ci_nm .arr:before { content: ''; position: absolute; left: 44px; top: 50%; width: 56px; height: 56px; margin-top: -28px; border: 4px solid #fff; border-radius: 50%; background: var(--kl-red); box-sizing: border-box; }
.kl_ci_nm .arr:after { content: ''; position: absolute; left: 66px; top: 50%; width: 10px; height: 10px; margin-top: -8px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); animation: klCiArr 1.6s ease-in-out infinite; }
@keyframes klCiArr { 0%, 100% { translate: 0 -2px; } 50% { translate: 0 3px; } }
/* 변경 후: 남색 면 + 오른쪽 선박 사진(왼쪽으로 녹아듦) + 로고 */
.kl_ci_nm .after { min-height: 300px; padding: 44px 44px 46px; background: var(--kl-navy); color: #fff; box-sizing: border-box; }
.kl_ci_nm .after .bg { position: absolute; top: 0; right: 0; bottom: 0; width: 62%; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 45%); mask-image: linear-gradient(90deg, transparent 0%, #000 45%); }  /* 왼쪽 끝을 투명하게 녹여 경계선이 안 보이게 */
.kl_ci_nm .after .bg img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 60% 55%; transform: scale(1.06); transition: transform 1.6s cubic-bezier(.2,.7,.2,1); }
.kl_ci_nm .after .bg:after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(19,50,95,.7) 0%, rgba(19,50,95,.15) 100%); }
.kl_ci_nm .after:hover .bg img { transform: scale(1.12); }
.kl_ci_nm .after .top { position: relative; display: flex; justify-content: space-between; align-items: center; gap: 20px; }
.kl_ci_nm .after .tag { color: rgba(255,255,255,.7); }
.kl_ci_nm .after .tag em { color: #fff; }
.kl_ci_nm .after .logo { display: block; height: 38px; width: auto; }
.kl_ci_nm .after dl { margin-top: 48px; }
.kl_ci_nm .after dt { color: rgba(255,255,255,.6); }
.kl_ci_nm .after dd { font-size: 34px; font-weight: 700; color: #fff; }
/* 순서대로 등장: 변경 전 → 화살표 → 변경 후 */
.kl_ci_nm .arr.js-reveal { transform: scale(.4); transition-delay: .25s; }
.kl_ci_nm .arr.js-reveal.is_in { transform: none; }
.kl_ci_nm .after.js-reveal { transition-delay: .4s; }

/* ---------- 02 상표: 로고 4종 ---------- */
.kl_ci_lg { padding: 130px 0 140px; background: var(--kl-sky); }
/* 벤토 그리드: [가로형 국문 | 세로 국문 | 세로 영문] / [가로형 영문 | (세로 이어짐)] */
.kl_ci_lg .bento { display: grid; grid-template-columns: 1.7fr 1fr 1fr; grid-template-rows: 300px 300px; gap: 16px; margin-top: 60px; }
.kl_ci_lg .bento .h1 { grid-column: 1; grid-row: 1; }
.kl_ci_lg .bento .h2 { grid-column: 1; grid-row: 2; }
.kl_ci_lg .bento .v1 { grid-column: 2; grid-row: 1 / 3; }
.kl_ci_lg .bento .v2 { grid-column: 3; grid-row: 1 / 3; }
.kl_ci_lg .bento .v1.js-reveal { transition-delay: .1s; }
.kl_ci_lg .bento .v2.js-reveal { transition-delay: .2s; }
.kl_ci_lg .bento .h2.js-reveal { transition-delay: .3s; }
.kl_ci_lg .bento > li {
	position: relative; display: flex; flex-direction: column; overflow: hidden; background-color: #fff;
	/* 옅은 가이드 격자 (로고 가이드라인 느낌) — 마우스를 올리면 진해진다 */
	background-image: linear-gradient(rgba(19,50,95,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(19,50,95,.045) 1px, transparent 1px);
	background-size: 28px 28px; background-position: -1px -1px;
	transition: opacity 1s, transform 1s cubic-bezier(.2,.7,.2,1), box-shadow .45s;
}
.kl_ci_lg .bento > li:after { content: ''; position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(rgba(19,50,95,.09) 1px, transparent 1px), linear-gradient(90deg, rgba(19,50,95,.09) 1px, transparent 1px); background-size: 28px 28px; background-position: -1px -1px; opacity: 0; transition: opacity .45s; }
.kl_ci_lg .bento > li:hover { box-shadow: 0 30px 60px -36px rgba(13,38,72,.4); }
.kl_ci_lg .bento > li:hover:after { opacity: 1; }
/* 칸 왼쪽 위 캡션: 번호 · 이름 · 영문 */
.kl_ci_lg .cap { position: relative; z-index: 1; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; padding: 28px 32px 0; }
.kl_ci_lg .cap .no { font-family: 'Poppins', sans-serif; font-size: 14px; font-weight: 600; color: var(--kl-red); }
.kl_ci_lg .cap b { font-size: 17px; font-weight: 700; color: var(--kl-navy); }
.kl_ci_lg .cap em { width: 100%; font-family: 'Poppins', sans-serif; font-size: 12px; font-style: normal; font-weight: 600; letter-spacing: .14em; color: #a2aec0; }
.kl_ci_lg .box { position: relative; z-index: 1; flex: 1; display: flex; align-items: center; justify-content: center; padding: 10px 40px 30px; }
.kl_ci_lg .box img { display: block; width: 58%; max-width: 420px; height: auto; transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.kl_ci_lg .box.v img { width: 54%; max-width: 230px; }
.kl_ci_lg .bento > li:hover .box img { transform: scale(1.05); }

/* ---------- 03 변화 (2026-10-26 개편): 윗줄 핵심 숫자 3 + 전략 변화 / 아랫줄 선대 Portfolio 카드 + 장기계약 화주 카드 ---------- */
.kl_ci_ch { padding: 150px 0; }
.kl_ci_ch .ov_top { display: grid; grid-template-columns: 1.15fr 1fr; gap: 24px; margin-top: 70px; }
.kl_ci_ch .stat { display: grid; grid-template-columns: repeat(3, 1fr); border-radius: 22px; background: var(--kl-sky); }
.kl_ci_ch .stat li { position: relative; display: flex; flex-direction: column; justify-content: center; padding: 34px 30px; }
.kl_ci_ch .stat li + li:before { content: ''; position: absolute; left: 0; top: 30px; bottom: 30px; width: 1px; background: #d5dde8; }
.kl_ci_ch .stat strong { display: block; font-family: 'Poppins', sans-serif; font-size: 40px; font-weight: 700; line-height: 1.1; letter-spacing: -0.03em; color: var(--kl-navy); white-space: nowrap; }
.kl_ci_ch .stat strong small { margin-left: 2px; font-family: 'Noto Sans KR', sans-serif; font-size: .55em; font-weight: 700; }
.kl_ci_ch .stat p { margin-top: 12px; font-size: 15px; line-height: 1.5; color: var(--kl-gray); }
/* 전략 변화: 남색 카드 안에서 이전(흐림) → 이후(흰 글씨) */
.kl_ci_ch .strat { display: flex; flex-direction: column; justify-content: center; padding: 30px 36px; border-radius: 22px; background: var(--kl-navy); color: #fff; }
.kl_ci_ch .strat .lb { font-family: 'Poppins', 'Noto Sans KR', sans-serif; font-size: 14px; font-weight: 600; letter-spacing: .02em; color: #ff8a8a; }
.kl_ci_ch .strat .flow { display: grid; grid-template-columns: 1fr 44px 1.1fr; align-items: center; gap: 0 14px; margin-top: 14px; }
.kl_ci_ch .strat span { font-size: 17px; font-weight: 600; line-height: 1.45; letter-spacing: -0.02em; word-break: keep-all; }
.kl_ci_ch .strat .from { color: rgba(255,255,255,.55); }
.kl_ci_ch .strat .to { font-size: 21px; font-weight: 700; color: #fff; }
.kl_ci_ch .strat i { display: block; width: 44px; height: 25px; background: var(--kl-red);
	-webkit-mask: url(/img/cursor.png) center / 100% 100% no-repeat; mask: url(/img/cursor.png) center / 100% 100% no-repeat; }
.kl_ci_ch .cols { display: grid; grid-template-columns: 1.15fr 1fr; gap: 24px; margin-top: 24px; }
.kl_ci_ch .pf, .kl_ci_ch .lt { padding: 40px 40px 36px; border: 1px solid #e3e8f0; border-radius: 22px; background: #fff; }
.kl_ci_ch .pf { display: flex; flex-direction: column; }
.kl_ci_ch .lt.js-reveal { transition-delay: .15s; }
.kl_ci_ch .hd { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; }
.kl_ci_ch .hd h4 { font-size: 22px; font-weight: 700; letter-spacing: -0.03em; color: var(--kl-navy); }
/* 선종 색 (원본 자료 색 유지) */
.kl_ci_ch .c_lpg { background: #3b6fe0; }
.kl_ci_ch .c_lng { background: #12b5a0; }
.kl_ci_ch .c_oil { background: #f2853a; }
.kl_ci_ch .c_dry { background: #f5c33b; }
.kl_ci_ch .lgd { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 14px; color: var(--kl-gray); }
.kl_ci_ch .lgd li { display: flex; align-items: center; gap: 7px; }
.kl_ci_ch .lgd i { display: block; width: 12px; height: 12px; border-radius: 50%; }
/* 가로 누적 막대: 막대 칸 전체 = 55척. 화면에 들어오면 왼쪽부터 펼쳐진다 */
.kl_ci_ch .bars { display: flex; flex-direction: column; gap: 18px; margin: 40px 0 36px; }
.kl_ci_ch .row { display: grid; grid-template-columns: 84px 1fr; align-items: center; gap: 16px; }
.kl_ci_ch .row .yr { font-family: 'Poppins', sans-serif; font-size: 16px; font-weight: 600; color: var(--kl-gray); }
.kl_ci_ch .row.is_new .yr { color: var(--kl-navy); }
.kl_ci_ch .bar { display: flex; gap: 2px; height: 64px; border-radius: 10px; background: repeating-linear-gradient(135deg, #f1f4f8 0 8px, #e9edf3 8px 16px); overflow: hidden;
	clip-path: inset(0 100% 0 0 round 10px); transition: clip-path 1.3s cubic-bezier(.2,.7,.2,1) .3s; }
.kl_ci_ch .pf.is_in .bar { clip-path: inset(0 0 0 0 round 10px); }
.kl_ci_ch .pf.is_in .row + .row .bar { transition-delay: .55s; }
.kl_ci_ch .bar span { display: flex; align-items: center; justify-content: center; flex: none; min-width: 24px; font-family: 'Poppins', sans-serif; font-size: 16px; font-weight: 600; color: #fff; }
.kl_ci_ch .bar .c_dry { color: var(--kl-ink); }
/* 이전 → 이후 비교 3칸 */
.kl_ci_ch .cmp { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: auto; }
.kl_ci_ch .cmp li { padding: 22px 22px 20px; border-radius: 16px; background: var(--kl-sky); }
.kl_ci_ch .cmp .k { font-size: 15px; font-weight: 600; color: var(--kl-gray); }
.kl_ci_ch .cmp .v { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-top: 10px; }
.kl_ci_ch .cmp s { font-family: 'Poppins', 'Noto Sans KR', sans-serif; font-size: 16px; font-weight: 500; color: #9aa5b5; }
.kl_ci_ch .cmp i { display: block; width: 18px; height: 10px; background: var(--kl-red);
	-webkit-mask: url(/img/cursor.png) center / 100% 100% no-repeat; mask: url(/img/cursor.png) center / 100% 100% no-repeat; }
.kl_ci_ch .cmp b { font-family: 'Poppins', 'Noto Sans KR', sans-serif; font-size: 28px; font-weight: 700; letter-spacing: -0.03em; color: var(--kl-navy); }
.kl_ci_ch .pf .note { margin-top: 14px; font-family: 'Poppins', sans-serif; font-size: 13px; text-align: right; color: #9aa5b5; }
/* 장기계약 화주: 숫자 배지 + 로고 타일 */
.kl_ci_ch .cnt { display: flex; align-items: baseline; gap: 4px; font-size: 15px; font-weight: 600; color: var(--kl-gray); }
.kl_ci_ch .cnt b { font-family: 'Poppins', sans-serif; font-size: 30px; font-weight: 700; line-height: 1; color: var(--kl-red); }
.kl_ci_ch .grp { margin-top: 28px; }
.kl_ci_ch .grp + .grp { margin-top: 24px; }
.kl_ci_ch .grp_h { display: flex; align-items: center; gap: 8px; }
.kl_ci_ch .grp_h span { font-family: 'Poppins', sans-serif; font-size: 14px; font-weight: 700; letter-spacing: .12em; color: var(--kl-navy); }
.kl_ci_ch .grp_h em { display: flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; background: #12b5a0; font-family: 'Poppins', sans-serif; font-size: 12px; font-style: normal; font-weight: 700; color: #fff; }
.kl_ci_ch .grp.lpg .grp_h em { background: #3b6fe0; color: #fff; }
.kl_ci_ch .grp ul { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 12px; }
.kl_ci_ch .grp li { display: flex; align-items: center; justify-content: center; height: 86px; padding: 0 14px; border: 1px solid #e3e8f0; border-radius: 14px; background: #fff;
	transition: border-color .35s, box-shadow .35s, transform .35s cubic-bezier(.2,.7,.2,1); }
.kl_ci_ch .grp li:hover { border-color: #c8d3e3; box-shadow: 0 16px 30px -20px rgba(19,50,95,.45); transform: translateY(-4px); }
.kl_ci_ch .grp img { display: block; max-width: 100%; max-height: 44px; object-fit: contain; mix-blend-mode: multiply; }   /* 흰 바탕 JPG 로고도 카드에 녹게 */

/* ---------- 04 약속: 두 축(배너 + 카드 2개 + 결론 띠) ---------- */
.kl_ci_pr { padding: 150px 0; background: var(--kl-sky); }
.kl_ci_pr .cols { display: grid; grid-template-columns: 1fr 1fr; gap: 0 40px; margin-top: 70px; }
.kl_ci_pr .side.esg.js-reveal { transition-delay: .15s; }
.kl_ci_pr .side { display: flex; flex-direction: column; gap: 16px; }
.kl_ci_pr .bnr { position: relative; height: 170px; overflow: hidden; border-radius: 6px; background: var(--kl-navy-deep); }
.kl_ci_pr .bnr img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 100% 50%; }
.kl_ci_pr .bnr .t { position: absolute; left: 44px; top: 50%; transform: translateY(-50%); }
.kl_ci_pr .bnr strong { display: block; font-family: 'Poppins', sans-serif; font-size: 30px; font-weight: 600; letter-spacing: -0.01em; color: #fff; }
.kl_ci_pr .bnr span { display: block; margin-top: 4px; font-size: 19px; color: #8fe3cf; }
.kl_ci_pr .card { flex: 1; display: flex; gap: 30px; padding: 36px 40px; border-radius: 6px; background: #fff; }
.kl_ci_pr .ico { flex: none; display: flex; align-items: center; justify-content: center; width: 76px; height: 76px; border-radius: 50%; background: #111827; }
.kl_ci_pr .esg .ico { background: #4a78c8; }
.kl_ci_pr .ico img { display: block; width: 42px; height: 42px; }
.kl_ci_pr .card h4 { font-size: 22px; font-weight: 700; letter-spacing: -0.02em; color: var(--kl-ink); }
.kl_ci_pr .card ul { margin-top: 14px; }
.kl_ci_pr .card li { position: relative; padding-left: 16px; font-size: 16.5px; line-height: 1.85; letter-spacing: -0.02em; color: #4a5566; }
.kl_ci_pr .card li:before { content: ''; position: absolute; left: 0; top: .8em; width: 5px; height: 5px; border-radius: 50%; background: #4a78c8; }
.kl_ci_pr .card sup { font-size: .65em; vertical-align: super; }
.kl_ci_pr .iso { display: flex; gap: 8px; margin-top: 18px; }
.kl_ci_pr .iso img { display: block; height: 46px; width: auto; }
.kl_ci_pr .res { display: flex; align-items: center; gap: 16px; padding: 22px 32px; border-radius: 6px; background: #111827; font-size: 19px; font-weight: 700; letter-spacing: -0.02em; color: #fff; }
.kl_ci_pr .esg .res { background: #4a78c8; }
.kl_ci_pr .res i { flex: none; display: block; width: 36px; height: 20px; background: currentColor; -webkit-mask: url(/img/cursor.png) center / 100% 100% no-repeat; mask: url(/img/cursor.png) center / 100% 100% no-repeat; }
.kl_ci_pr .note { margin-top: 24px; font-size: 13px; color: var(--kl-gray); }

/* ---------- 05 주소 (왼쪽 목록 + 오른쪽 점묘 한국 지도) ---------- */
.kl_ci_ad { position: relative; padding: 140px 0 150px; background: linear-gradient(180deg, #fff 0%, var(--kl-sky) 100%); overflow: hidden; }
.kl_ci_ad > .kl_in { display: grid; grid-template-columns: 1fr minmax(0, 540px); align-items: center; gap: 0 8%; }
/* 주소 목록: 구분선 행, 선택된(.is_on) 도시는 왼쪽 막대 + 진한 글씨 */
.kl_ci_ad .loc { margin: 60px 0 44px; border-bottom: 1px solid var(--kl-line); }
/* 한 행 = 왼쪽 큰 도시명 | 오른쪽 주소 (가로 여백을 채운다) */
.kl_ci_ad .loc li { position: relative; display: grid; grid-template-columns: minmax(0, 300px) 1fr; align-items: center; gap: 0 40px; padding: 32px 0 32px 36px; border-top: 1px solid var(--kl-line); cursor: default; }
.kl_ci_ad .loc li:before { content: ''; position: absolute; left: 0; top: 32px; bottom: 32px; width: 3px; background: var(--kl-navy); transform: scaleY(0); transform-origin: top; transition: transform .5s cubic-bezier(.2,.7,.2,1); }
.kl_ci_ad .loc li.hq:before { background: var(--kl-red); }
.kl_ci_ad .loc li.is_on:before { transform: scaleY(1); }
.kl_ci_ad .loc li.js-reveal:nth-child(2) { transition-delay: .12s; }
.kl_ci_ad .tag { display: block; padding: 0; border: 0; border-radius: 0; background: none; font-size: 16px; font-weight: 700; color: var(--kl-navy); }  /* 공통 .tag(배지) 스타일 해제 */
.kl_ci_ad .hq .tag { color: var(--kl-red); }
.kl_ci_ad .loc strong { display: block; margin-top: 4px; font-family: 'Poppins', sans-serif; font-size: 64px; font-weight: 700; line-height: 1.1; letter-spacing: -0.02em; color: #a9b6c8; transition: color .4s; }
.kl_ci_ad .loc li.is_on strong { color: var(--kl-navy); }
.kl_ci_ad .loc p { font-size: 19px; line-height: 1.7; letter-spacing: -0.02em; color: var(--kl-ink); }
/* 지도: 점 SVG 와 경로선 SVG 를 같은 크기로 겹치고, 핀은 % 좌표 */
.kl_ci_ad .map { position: relative; aspect-ratio: 362 / 440; }
.kl_ci_ad .map:before { content: ''; position: absolute; left: 50%; top: 50%; width: 120%; height: 100%; transform: translate(-50%, -50%); background: radial-gradient(closest-side, rgba(19,50,95,.07), rgba(19,50,95,0)); }
.kl_ci_ad .map .dots, .kl_ci_ad .map .route { position: absolute; inset: 0; width: 100%; height: 100%; }
.kl_ci_ad .route path { fill: none; stroke: var(--kl-navy); stroke-width: 1.5; stroke-dasharray: 2 7; stroke-linecap: round; vector-effect: non-scaling-stroke; opacity: .6; animation: klCiRoute 1.4s linear infinite; }
@keyframes klCiRoute { to { stroke-dashoffset: -18; } }  /* 서울 → 부산 방향으로 점선이 흐른다 */
.kl_ci_ad .pin { position: absolute; width: 0; height: 0; z-index: 1; }
.kl_ci_ad .pin i { position: absolute; left: -7px; top: -7px; width: 14px; height: 14px; border-radius: 50%; background: var(--kl-navy); box-shadow: 0 0 0 4px #fff, 0 4px 12px rgba(13,38,72,.3); transition: transform .4s; }
.kl_ci_ad .pin.busan i { background: var(--kl-red); }
/* 퍼지는 원: 선택된 핀만 */
.kl_ci_ad .pin i:before, .kl_ci_ad .pin i:after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: inherit; opacity: 0; }
.kl_ci_ad .pin.is_on i { transform: scale(1.25); }
.kl_ci_ad .pin.is_on i:before, .kl_ci_ad .pin.is_on i:after { animation: klCiPulse 2.4s ease-out infinite; }
.kl_ci_ad .pin.is_on i:after { animation-delay: 1.2s; }
@keyframes klCiPulse { 0% { transform: scale(1); opacity: .45; } 100% { transform: scale(4.2); opacity: 0; } }
/* 핀 이름표: 서울은 오른쪽, 부산은 왼쪽 */
.kl_ci_ad .pin b {
	position: absolute; left: 20px; top: 0; transform: translateY(-50%); padding: 10px 16px; white-space: nowrap;
	background: #fff; box-shadow: 0 8px 24px rgba(13,38,72,.12); font-family: 'Poppins', sans-serif; font-size: 15px; font-weight: 700; letter-spacing: .02em; color: var(--kl-navy);
	transition: background .4s, color .4s;
}
.kl_ci_ad .pin.busan b { left: auto; right: 20px; }
.kl_ci_ad .pin b small { display: block; margin-top: 2px; font-family: 'Noto Sans KR', sans-serif; font-size: 12px; font-weight: 500; letter-spacing: -0.02em; color: #8a9ab3; transition: color .4s; }
.kl_ci_ad .pin.is_on b { background: var(--kl-navy); color: #fff; }
.kl_ci_ad .pin.busan.is_on b { background: var(--kl-red); }
.kl_ci_ad .pin.is_on b small { color: rgba(255,255,255,.8); }

@media (max-width: 1400px) {
	.kl_ci_ad > .kl_in { grid-template-columns: 1fr minmax(0, 420px); gap: 0 6%; }
	.kl_ci_ad .loc li { grid-template-columns: 1fr; gap: 10px; }  /* 좁으면 도시명 아래로 주소 */
	.kl_ci_ad .loc strong { font-size: 52px; }
	.kl_ci_nm .kl_in { grid-template-columns: 1fr; gap: 50px; }
	.kl_ci_nm .head { flex-direction: row; align-items: flex-end; }
	.kl_ci_nm .date { flex: none; text-align: right; }
	.kl_ci_lg .bento { grid-template-columns: 1.4fr 1fr 1fr; grid-template-rows: 250px 250px; }
	.kl_ci_ch .ov_top, .kl_ci_ch .cols { grid-template-columns: 1fr; }
	.kl_ci_ch .grp ul { grid-template-columns: repeat(4, 1fr); }
	.kl_ci_pr .cols { grid-template-columns: 1fr; gap: 50px; }
}
@media (max-width: 1024px) {
	.kl_ci_nm { padding: 72px 0; }
	.kl_ci_nm .kl_in { gap: 32px; }
	.kl_ci_nm .head { flex-direction: column; align-items: stretch; gap: 28px; }
	.kl_ci_nm .date { text-align: left; }
	.kl_ci_nm .date .lbl { font-size: 13px; }
	.kl_ci_nm .date strong { font-size: 44px; }
	.kl_ci_nm .date .ko { margin-top: 8px; font-size: 14px; }
	.kl_ci_nm .before { padding: 24px 22px 26px; }
	.kl_ci_nm .after { min-height: 0; padding: 28px 22px 30px; }
	.kl_ci_nm .after .bg { width: 100%; opacity: .5; }
	.kl_ci_nm .after .bg:after { background: linear-gradient(90deg, var(--kl-navy) 20%, rgba(19,50,95,.6) 100%); }
	.kl_ci_nm .after .logo { height: 26px; }
	.kl_ci_nm .after dl { margin-top: 28px; }
	.kl_ci_nm .tag, .kl_ci_nm .tag em { font-size: 12px; }
	.kl_ci_nm dl { grid-template-columns: 44px 1fr; gap: 10px 0; margin-top: 18px; }
	.kl_ci_nm dt { font-size: 13px; }
	.kl_ci_nm .before dd { font-size: 16px; }
	.kl_ci_nm .after dd { font-size: 21px; }
	.kl_ci_nm .arr { height: 14px; }
	.kl_ci_nm .arr:before { left: 22px; width: 44px; height: 44px; margin-top: -22px; border-width: 3px; }
	.kl_ci_nm .arr:after { left: 39px; width: 8px; height: 8px; margin-top: -7px; }

	.kl_ci_lg { padding: 72px 0; }
	/* 모바일: 가로형은 한 줄 전체, 세로형 둘은 나란히 */
	.kl_ci_lg .bento { grid-template-columns: 1fr 1fr; grid-template-rows: none; grid-auto-rows: auto; gap: 10px; margin-top: 32px; }
	.kl_ci_lg .bento .h1 { grid-column: 1 / -1; grid-row: 1; }
	.kl_ci_lg .bento .h2 { grid-column: 1 / -1; grid-row: 2; }
	.kl_ci_lg .bento .v1 { grid-column: 1; grid-row: 3; }
	.kl_ci_lg .bento .v2 { grid-column: 2; grid-row: 3; }
	.kl_ci_lg .bento > li { min-height: 190px; background-size: 20px 20px; }
	.kl_ci_lg .bento > li:after { background-size: 20px 20px; }
	.kl_ci_lg .cap { gap: 4px 8px; padding: 18px 18px 0; }
	.kl_ci_lg .cap .no { font-size: 12px; }
	.kl_ci_lg .cap b { font-size: 14px; }
	.kl_ci_lg .cap em { font-size: 10px; letter-spacing: .1em; }
	.kl_ci_lg .box { padding: 18px 20px 24px; }
	.kl_ci_lg .box img { width: 66%; }
	.kl_ci_lg .box.v img { width: 70%; }

	.kl_ci_ch { padding: 72px 0; }
	.kl_ci_ch .ov_top { gap: 10px; margin-top: 36px; }
	.kl_ci_ch .stat { border-radius: 16px; }
	.kl_ci_ch .stat li { padding: 20px 10px; text-align: center; }
	.kl_ci_ch .stat li + li:before { top: 18px; bottom: 18px; }
	.kl_ci_ch .stat strong { font-size: 20px; }
	.kl_ci_ch .stat p { margin-top: 6px; font-size: 12px; }
	.kl_ci_ch .strat { padding: 20px 20px 22px; border-radius: 16px; }
	.kl_ci_ch .strat .lb { font-size: 12px; }
	.kl_ci_ch .strat .flow { grid-template-columns: 1fr 26px 1fr; gap: 0 10px; margin-top: 10px; }
	.kl_ci_ch .strat span { font-size: 13px; }
	.kl_ci_ch .strat .to { font-size: 15px; }
	.kl_ci_ch .strat i { width: 26px; height: 15px; }
	.kl_ci_ch .cols { gap: 10px; margin-top: 10px; }
	.kl_ci_ch .pf, .kl_ci_ch .lt { padding: 24px 18px 22px; border-radius: 16px; }
	.kl_ci_ch .hd h4 { font-size: 18px; }
	.kl_ci_ch .lgd { gap: 4px 12px; font-size: 12px; }
	.kl_ci_ch .bars { gap: 10px; margin: 22px 0 20px; }
	.kl_ci_ch .row { grid-template-columns: 1fr; gap: 6px; }
	.kl_ci_ch .row .yr { font-size: 13px; }
	.kl_ci_ch .bar { height: 40px; border-radius: 8px; }
	.kl_ci_ch .bar span { min-width: 20px; font-size: 13px; }
	.kl_ci_ch .cmp { gap: 6px; margin-top: 20px; }
	.kl_ci_ch .cmp li { padding: 14px 10px; border-radius: 12px; }
	.kl_ci_ch .cmp .k { font-size: 12px; }
	.kl_ci_ch .cmp .v { gap: 2px 6px; margin-top: 6px; }
	.kl_ci_ch .cmp s { font-size: 12px; }
	.kl_ci_ch .cmp i { width: 12px; height: 7px; }
	.kl_ci_ch .cmp b { width: 100%; font-size: 19px; }
	.kl_ci_ch .cnt { font-size: 13px; }
	.kl_ci_ch .cnt b { font-size: 24px; }
	.kl_ci_ch .grp { margin-top: 20px; }
	.kl_ci_ch .grp ul, .kl_ci_ch .grp ul { grid-template-columns: repeat(2, 1fr); gap: 6px; }
	.kl_ci_ch .grp li { height: 64px; padding: 0 12px; border-radius: 10px; }
	.kl_ci_ch .grp img { max-height: 34px; }

	.kl_ci_pr { padding: 72px 0; }
	.kl_ci_pr .cols { gap: 40px; margin-top: 40px; }
	.kl_ci_pr .side { gap: 10px; }
	.kl_ci_pr .bnr { height: 120px; }
	.kl_ci_pr .bnr .t { left: 22px; }
	.kl_ci_pr .bnr strong { font-size: 20px; }
	.kl_ci_pr .bnr span { font-size: 14px; }
	.kl_ci_pr .card { gap: 16px; padding: 24px 20px; }
	.kl_ci_pr .ico { width: 52px; height: 52px; }
	.kl_ci_pr .ico img { width: 28px; height: 28px; }
	.kl_ci_pr .card h4 { font-size: 18px; }
	.kl_ci_pr .card li { font-size: 14.5px; line-height: 1.7; }
	.kl_ci_pr .iso img { height: 38px; }
	.kl_ci_pr .res { gap: 12px; padding: 16px 20px; font-size: 15px; }

	.kl_ci_ad { padding: 72px 0 80px; }
	.kl_ci_ad > .kl_in { grid-template-columns: 1fr; }
	.kl_ci_ad .loc { margin: 32px 0 28px; }
	.kl_ci_ad .loc li { grid-template-columns: 1fr; gap: 8px; padding: 24px 0 24px 20px; }
	.kl_ci_ad .loc li:before { top: 24px; bottom: 24px; }
	.kl_ci_ad .tag { font-size: 14px; }
	.kl_ci_ad .loc strong { font-size: 32px; }
	.kl_ci_ad .loc p { margin-top: 8px; font-size: 15px; }
	.kl_ci_ad .loc p br { display: none; }	/* 모바일 순서: 제목 → 지도 → 주소 목록 → 링크 (.txt 를 풀어 자식들을 그리드 항목으로) */
	.kl_ci_ad .txt { display: contents; }
	.kl_ci_ad .loc { order: 2; }
	.kl_ci_ad .kl_sub_more { order: 3; justify-self: start; }
	.kl_ci_ad .map { order: 1; width: min(100%, 320px); margin: 36px auto 0; }
	.kl_ci_ad .pin b { left: 14px; padding: 6px 10px; font-size: 12px; }
	.kl_ci_ad .pin.busan b { right: 14px; }
	.kl_ci_ad .pin b small { font-size: 10px; }
}
@media (prefers-reduced-motion: reduce) {
	.kl_ci_ad .route path, .kl_ci_ad .pin.is_on i:before, .kl_ci_ad .pin.is_on i:after { animation: none; }
}
@media (prefers-reduced-motion: reduce) {
	.kl_ci_ch .bar { clip-path: none; transition: none; }
}

/* =========================================================
   회사소개 > CEO 인사말 (company/ceo/index)
   ========================================================= */
/* 사진 sticky 가 동작하도록 이 페이지만 overflow: hidden 대신 clip (hidden 은 스크롤 컨테이너가 되어 sticky 를 막는다) */
.kl_sub.kl_ceo { overflow: clip; }
/* 히어로 배경: 이미지 대신 남색 그라데이션 + 천천히 움직이는 빛 번짐(파랑·빨강·하늘) */
.kl_ceo_hero .bg { overflow: hidden; background: linear-gradient(135deg, #071a36 0%, #0f2b55 45%, #13325f 70%, #0b2245 100%); }
.kl_ceo_hero .bg:after { background: linear-gradient(90deg, rgba(7,26,54,.55) 0%, rgba(7,26,54,0) 55%); }  /* 공통 사진용 오버레이를 가볍게 (왼쪽 문구 가독성만) */
.kl_ceo_hero .glow { position: absolute; border-radius: 50%; filter: blur(90px); will-change: transform; }
.kl_ceo_hero .g1 { right: -8%; top: -18%; width: 62vw; height: 62vw; max-width: 1100px; max-height: 1100px; background: radial-gradient(circle, rgba(47,111,208,.75) 0%, rgba(47,111,208,0) 65%); animation: klCeoGlow1 18s ease-in-out infinite alternate; }
.kl_ceo_hero .g2 { right: 18%; bottom: -30%; width: 46vw; height: 46vw; max-width: 820px; max-height: 820px; background: radial-gradient(circle, rgba(214,48,49,.42) 0%, rgba(214,48,49,0) 65%); animation: klCeoGlow2 22s ease-in-out infinite alternate; }
.kl_ceo_hero .g3 { left: 22%; top: 10%; width: 30vw; height: 30vw; max-width: 560px; max-height: 560px; background: radial-gradient(circle, rgba(120,190,255,.28) 0%, rgba(120,190,255,0) 65%); animation: klCeoGlow3 26s ease-in-out infinite alternate; }
@keyframes klCeoGlow1 { to { transform: translate(-8vw, 10vh) scale(1.12); } }
@keyframes klCeoGlow2 { to { transform: translate(10vw, -8vh) scale(.9); } }
@keyframes klCeoGlow3 { to { transform: translate(14vw, 16vh) scale(1.2); } }
@media (prefers-reduced-motion: reduce) {
	.kl_ceo_hero .glow { animation: none; }
}

/* ---------- 01 인사말: 왼쪽 사진(스크롤 따라 고정) + 오른쪽 본문 ---------- */
.kl_ceo_msg { padding: 170px 0 160px; }
.kl_ceo_msg .kl_in { display: grid; grid-template-columns: 40% 1fr; gap: 0 8%; align-items: start; }
.kl_ceo_msg .ph { position: sticky; top: calc(var(--kl-header-h) + 40px); }
/* 사진 뒤 연한 면: 왼쪽 아래로 비껴 깔아 깊이감 */
.kl_ceo_msg .ph:before { content: ''; position: absolute; left: -32px; bottom: 40px; z-index: -1; width: 64%; height: 62%; background: var(--kl-sky); }
.kl_ceo_msg .frame { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: #a9a5a7; }
.kl_ceo_msg .frame img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 85% 0; transform: scale(1.1); transition: transform 1.8s cubic-bezier(.2,.7,.2,1); }
/* 등장: 사진이 아래에서 위로 열리며 살짝 줌아웃 */
.kl_ceo_msg .ph.js-reveal { opacity: 1; transform: none; }
.kl_ceo_msg .ph.js-reveal .frame { clip-path: inset(100% 0 0 0); transition: clip-path 1.3s cubic-bezier(.7,0,.2,1); }
.kl_ceo_msg .ph.js-reveal.is_in .frame { clip-path: inset(0 0 0 0); }
.kl_ceo_msg .ph.is_in .frame img { transform: none; }
.kl_ceo_msg .cap { display: flex; align-items: baseline; gap: 14px; margin-top: 26px; }
.kl_ceo_msg .cap span { font-size: 16px; font-weight: 500; color: var(--kl-gray); }
.kl_ceo_msg .cap strong { font-size: 26px; font-weight: 700; letter-spacing: .2em; color: var(--kl-navy); }

.kl_ceo_msg .txt { padding-top: 10px; }
.kl_ceo_msg .kl_tit { font-size: 52px; }
.kl_ceo_msg .body { margin-top: 56px; padding-top: 50px; border-top: 1px solid var(--kl-line); }
.kl_ceo_msg .body p { font-size: 19px; line-height: 1.95; letter-spacing: -0.02em; color: #4a5566; word-break: keep-all; }
.kl_ceo_msg .body p + p { margin-top: 28px; }
/* 강조: 화면에 들어오면 형광펜처럼 밑줄 면이 왼쪽에서 그어진다 */
.kl_ceo_msg .body em {
	font-style: normal; font-weight: 700; color: var(--kl-navy);
	background: linear-gradient(transparent 60%, rgba(214,48,49,.16) 60%) no-repeat 0 0 / 0% 100%;
	transition: background-size 1.2s cubic-bezier(.2,.7,.2,1) .5s;
}
.kl_ceo_msg .body .is_in em { background-size: 100% 100%; }
.kl_ceo_msg .sign { display: flex; align-items: center; justify-content: flex-end; gap: 16px; margin-top: 64px; }
.kl_ceo_msg .sign span { font-size: 17px; color: var(--kl-gray); }
.kl_ceo_msg .sign strong { font-size: 26px; font-weight: 700; letter-spacing: .3em; color: var(--kl-ink); }
.kl_ceo_msg .sign img { display: block; height: 72px; width: auto; mix-blend-mode: multiply; }

/* ---------- 02 약속: 펼침 패널 3장 (활성 패널이 넓어지며 남색 면으로 전환) ---------- */
.kl_ceo_cm { padding: 150px 0; background: var(--kl-sky); }
.kl_ceo_cm ol { display: flex; gap: 16px; height: 440px; margin-top: 80px; }
.kl_ceo_cm li { position: relative; flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; padding: 44px 44px 46px; border-radius: 16px; background: #fff; overflow: hidden; cursor: pointer; outline: none;
	transition: flex-grow .7s cubic-bezier(.65,0,.25,1), background-color .5s, box-shadow .5s; }
.kl_ceo_cm li.on { flex-grow: 1.9; background-color: var(--kl-navy); box-shadow: 0 30px 60px -30px rgba(19,50,95,.55); cursor: default; }
.kl_ceo_cm li:focus-visible { box-shadow: 0 0 0 3px rgba(227,30,36,.45); }
/* 활성 패널 오른쪽 아래 은은한 빛 */
/* 큰 외곽선 숫자 + 그 아래 영문 라벨 */
.kl_ceo_cm .no { display: block; margin-left: -4px; font-family: 'Poppins', sans-serif; font-size: 88px; font-weight: 700; line-height: 1; letter-spacing: -0.04em; color: #dde4ee; transition: color .5s; }
.kl_ceo_cm li.on .no { color: rgba(255,255,255,.18); }
.kl_ceo_cm .en { position: relative; margin-top: 18px; font-family: 'Poppins', sans-serif; font-size: 14px; font-weight: 600; letter-spacing: .14em; color: var(--kl-red); transition: color .5s; }
.kl_ceo_cm li.on .en { color: #ff8a8a; }
/* + 아이콘: 활성 시 45도 회전 */
.kl_ceo_cm .pl { position: absolute; left: 44px; bottom: 46px; width: 44px; height: 44px; border: 1px solid #c8d1de; border-radius: 50%; transition: opacity .4s, transform .6s cubic-bezier(.2,.7,.2,1); }
.kl_ceo_cm .pl:before, .kl_ceo_cm .pl:after { content: ''; position: absolute; left: 50%; top: 50%; width: 14px; height: 1.5px; margin: -.75px 0 0 -7px; background: var(--kl-navy); }
.kl_ceo_cm .pl:after { transform: rotate(90deg); }
.kl_ceo_cm li.on .pl { opacity: 0; transform: rotate(45deg) scale(.6); }
.kl_ceo_cm li:not(.on):hover .pl { transform: rotate(90deg); }
/* 제목·설명: 패널 하단에 붙고, 비활성 패널은 제목만 보인다 */
.kl_ceo_cm .ct { position: relative; margin-top: auto; padding-bottom: 66px; transition: padding .6s cubic-bezier(.2,.7,.2,1); }
.kl_ceo_cm li.on .ct { padding-bottom: 0; }
.kl_ceo_cm h4 { font-size: 28px; font-weight: 700; line-height: 1.35; letter-spacing: -0.035em; color: var(--kl-navy); word-break: keep-all; transition: color .5s; }
.kl_ceo_cm li.on h4 { color: #fff; }
.kl_ceo_cm li p { width: min(460px, 100%); max-height: 0; margin-top: 0; font-size: 17px; line-height: 1.85; letter-spacing: -0.02em; color: rgba(255,255,255,.82); word-break: keep-all; opacity: 0; transform: translateY(16px);
	transition: max-height .6s cubic-bezier(.2,.7,.2,1), margin .6s, opacity .3s, transform .3s; }
.kl_ceo_cm li.on p { max-height: 160px; margin-top: 18px; opacity: 1; transform: none; transition-delay: 0s, 0s, .3s, .3s; }

/* ---------- 03 비전: 사진 배경 + 인용문 ---------- */
.kl_ceo_vs { position: relative; padding: 170px 0; background: var(--kl-navy-deep); color: #fff; overflow: hidden; }
.kl_ceo_vs .bg { position: absolute; inset: 0; }
.kl_ceo_vs .bg img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 55%; }
.kl_ceo_vs .bg:after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(13,38,72,.95) 0%, rgba(13,38,72,.78) 40%, rgba(13,38,72,.25) 80%); }
.kl_ceo_vs .kl_in { position: relative; z-index: 1; }
.kl_ceo_vs .kl_label { color: #fff; }
.kl_ceo_vs .kl_label b { color: #ff6b6b; }
.kl_ceo_vs blockquote { margin-top: 44px; }
.kl_ceo_vs .q:before { content: ''; display: block; width: 56px; height: 3px; margin-bottom: 38px; background: var(--kl-red); }
.kl_ceo_vs .q { font-size: 64px; font-weight: 700; line-height: 1.3; letter-spacing: -0.035em; }
.kl_ceo_vs .d { margin-top: 30px; font-size: 21px; line-height: 1.7; letter-spacing: -0.02em; color: rgba(255,255,255,.85); }

@media (max-width: 1400px) {
	.kl_ceo_msg .kl_in { gap: 0 6%; }
	.kl_ceo_msg .kl_tit { font-size: 42px; }
	.kl_ceo_msg .body p { font-size: 17.5px; }
	.kl_ceo_cm ol { height: 400px; }
	.kl_ceo_cm li { padding: 36px 32px 38px; }
	.kl_ceo_cm .no { font-size: 72px; }
	.kl_ceo_cm .pl { left: 32px; bottom: 38px; }
	.kl_ceo_cm h4 { font-size: 23px; }
	.kl_ceo_cm li p { font-size: 16px; }
	.kl_ceo_vs .q { font-size: 52px; }
}
@media (max-width: 1024px) {
	.kl_ceo_msg { padding: 72px 0 80px; }
	.kl_ceo_msg .kl_in { grid-template-columns: 1fr; gap: 48px; }
	.kl_ceo_msg .ph { position: relative; top: auto; }
	.kl_ceo_msg .ph:before { left: -20px; bottom: 30px; }
	.kl_ceo_msg .frame { aspect-ratio: 1 / 1; }
	.kl_ceo_msg .cap { margin-top: 18px; }
	.kl_ceo_msg .cap span { font-size: 14px; }
	.kl_ceo_msg .cap strong { font-size: 21px; }
	.kl_ceo_msg .kl_tit { font-size: 25px; }
	.kl_ceo_msg .body { margin-top: 32px; padding-top: 32px; }
	.kl_ceo_msg .body p { font-size: 15.5px; line-height: 1.85; }
	.kl_ceo_msg .body p br { display: none; }  /* 모바일은 원고 줄바꿈 없이 흐르게 */
	.kl_ceo_msg .body p + p { margin-top: 20px; }
	.kl_ceo_msg .sign { gap: 12px; margin-top: 40px; }
	.kl_ceo_msg .sign span { font-size: 14px; }
	.kl_ceo_msg .sign strong { font-size: 20px; }
	.kl_ceo_msg .sign img { height: 54px; }

	.kl_ceo_cm { padding: 72px 0; }
	/* 모바일: 세로로 쌓고 모든 패널 내용 노출, 활성 패널만 남색 */
	.kl_ceo_cm ol { flex-direction: column; gap: 12px; height: auto; margin-top: 36px; }
	.kl_ceo_cm li { flex: none; padding: 26px 24px 28px; border-radius: 12px; }
	.kl_ceo_cm .no { font-size: 52px; }
	.kl_ceo_cm .en { margin-top: 12px; font-size: 12px; }
	.kl_ceo_cm .pl { display: none; }
	.kl_ceo_cm .ct, .kl_ceo_cm li.on .ct { margin-top: 22px; padding-bottom: 0; }
	.kl_ceo_cm h4 { font-size: 20px; }
	.kl_ceo_cm li p, .kl_ceo_cm li.on p { width: auto; max-height: none; margin-top: 10px; font-size: 15px; color: #4a5566; opacity: 1; transform: none; }
	.kl_ceo_cm li.on p { color: rgba(255,255,255,.82); }

	.kl_ceo_vs { padding: 88px 0 96px; }
	.kl_ceo_vs .bg:after { background: linear-gradient(180deg, rgba(13,38,72,.92) 0%, rgba(13,38,72,.7) 60%, rgba(13,38,72,.5) 100%); }
	.kl_ceo_vs blockquote { margin-top: 28px; }
	.kl_ceo_vs .q:before { width: 40px; margin-bottom: 24px; }
	.kl_ceo_vs .q { font-size: 32px; }
	.kl_ceo_vs .d { margin-top: 18px; font-size: 16px; }
	.kl_ceo_vs .d br { display: none; }
}
@media (prefers-reduced-motion: reduce) {
	.kl_ceo_msg .ph.js-reveal .frame { clip-path: none; transition: none; }
	.kl_ceo_msg .frame img { transform: none; transition: none; }
	.kl_ceo_msg .body em { background-size: 100% 100%; transition: none; }
}

/* =========================================================
   회사소개 > 회사개요 (company/overview/index)
   01 소개 → 02 일반현황 → 03 주요 연혁 → 04 사업분야 → 05 선대 현황 → 06 본사 안내
   (2026-10-27 Global Network 삭제 후 재구성 — 문구는 CEO·연혁·CI·선대 페이지 키 재사용)
   ========================================================= */
.kl_ov_hero .bg img { object-position: 50% 62%; }
.kl_ov_gn .head, .kl_ov_hl .head, .kl_ov_bz .head, .kl_ov_lc .head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; }
.kl_ov_hl .head .kl_sub_more, .kl_ov_bz .head .kl_sub_more, .kl_ov_lc .head .kl_sub_more { margin-top: 0; }

/* ---------- 01 회사 소개: 왼쪽 비전 문구 / 오른쪽 소개글 + 약속 3가지 ---------- */
.kl_ov_ab { padding: 160px 0 150px; }
.kl_ov_ab .row { display: grid; grid-template-columns: 1fr 1.15fr; gap: 0 8%; align-items: start; }
.kl_ov_ab .body p { font-size: 19px; line-height: 1.85; letter-spacing: -0.02em; color: #4a5566; }
.kl_ov_ab .body p + p { margin-top: 20px; }
.kl_ov_ab .body em { font-style: normal; font-weight: 700; color: var(--kl-navy); }
.kl_ov_ab .body .kl_sub_more { margin-top: 36px; }
/* 약속 3가지: 카드 3장. 번호 원 + 영문 라벨 → 제목 → 설명. 호버 시 남색 단색 면으로 전환 */
.kl_ov_ab .val { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 90px; }
.kl_ov_ab .val li { position: relative; display: flex; flex-direction: column; padding: 44px 40px 46px; background: var(--kl-sky);
	transition: opacity 1s, transform .5s cubic-bezier(.2,.7,.2,1), background-color .45s, box-shadow .45s; }
.kl_ov_ab .val li.js-reveal:nth-child(2) { transition-delay: .12s, .12s, 0s, 0s; }
.kl_ov_ab .val li.js-reveal:nth-child(3) { transition-delay: .24s, .24s, 0s, 0s; }
.kl_ov_ab .val li.is_in:hover { transform: translateY(-8px); background-color: var(--kl-navy); box-shadow: 0 30px 50px -30px rgba(19,50,95,.6); transition-delay: 0s; }
.kl_ov_ab .val .top { display: flex; align-items: center; gap: 14px; }
.kl_ov_ab .val .no { flex: none; display: flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 50%; background: #fff; font-family: 'Poppins', sans-serif; font-size: 15px; font-weight: 700; color: var(--kl-red); transition: background .45s, color .45s; }
.kl_ov_ab .val li:hover .no { background: var(--kl-red); color: #fff; }
.kl_ov_ab .val .en { font-family: 'Poppins', sans-serif; font-size: 13px; font-weight: 600; letter-spacing: .12em; color: #7f90ab; transition: color .45s; }
.kl_ov_ab .val li:hover .en { color: rgba(255,255,255,.6); }
.kl_ov_ab .val strong { display: block; margin-top: 40px; font-size: 27px; font-weight: 700; line-height: 1.35; letter-spacing: -0.03em; color: var(--kl-navy); word-break: keep-all; transition: color .45s; }
.kl_ov_ab .val li:hover strong { color: #fff; }
.kl_ov_ab .val p { margin-top: 14px; font-size: 16.5px; line-height: 1.8; letter-spacing: -0.02em; color: #4a5566; word-break: keep-all; transition: color .45s; }
.kl_ov_ab .val li:hover p { color: rgba(255,255,255,.82); }
/* ---------- 02 일반현황: 큰 수치 3열 (하늘색 면) ---------- */
.kl_ov_gn { padding: 140px 0; background: var(--kl-sky); }
.kl_ov_gn .base { font-size: 16px; font-weight: 500; color: var(--kl-gray); }
.kl_ov_gn .stat { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 60px; border-top: 1px solid #c8d1de; }
.kl_ov_gn .stat li { position: relative; padding: 48px 56px 8px; border-left: 1px solid #d3dbe7; }
.kl_ov_gn .stat li:first-child { padding-left: 0; border-left: 0; }
.kl_ov_gn .stat li:last-child { padding-right: 0; }
.kl_ov_gn .stat li.js-reveal:nth-child(2) { transition-delay: .12s; }
.kl_ov_gn .stat li.js-reveal:nth-child(3) { transition-delay: .24s; }
/* 상단 남색 마디 (CEO 약속 영역과 같은 장치) */
.kl_ov_gn .stat li:before { content: ''; position: absolute; left: 0; top: -1px; width: 0; height: 2px; background: var(--kl-navy); transition: width .9s cubic-bezier(.2,.7,.2,1) .4s; }
.kl_ov_gn .stat li.is_in:before { width: 56px; }
.kl_ov_gn .en { display: block; font-family: 'Poppins', sans-serif; font-size: 16px; font-weight: 600; letter-spacing: .12em; color: #7f90ab; }
.kl_ov_gn strong { display: block; margin-top: 22px; font-family: 'Poppins', sans-serif; font-size: clamp(48px, 3.6vw, 70px); font-weight: 600; line-height: 1.1; letter-spacing: -0.03em; color: var(--kl-navy); white-space: nowrap; }
.kl_ov_gn strong small { margin-left: 3px; font-family: 'Noto Sans KR', sans-serif; font-size: .42em; font-weight: 600; letter-spacing: -0.02em; }
.kl_ov_gn .stat p { margin-top: 18px; font-size: 17px; color: #4a5566; }

/* ---------- 03 주요 연혁: 가로 타임라인 5칸 (가로선 위 점 + 연도 / 아래 문구) ---------- */
/* 일반현황 섹션 삭제(2026-11-02)로 배경 교차 재배치: 소개(흰) → 연혁(하늘) → 사업(흰) → 선대(사진) → 본사(하늘) */
.kl_ov_hl { padding: 150px 0; background: var(--kl-sky); }
/* 연혁 5칸: 위 가는 선 + 짧은 포인트 바, 큰 연도(옅은 남색 → 호버 시 진한 남색), 아래 설명. 최신(2026)만 남색·빨강 강조 */
.kl_ov_hl ol { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0 24px; margin-top: 70px; }
.kl_ov_hl li { position: relative; padding-top: 34px; border-top: 1px solid #d5dde8; }
.kl_ov_hl li.js-reveal:nth-child(2) { transition-delay: .1s; }
.kl_ov_hl li.js-reveal:nth-child(3) { transition-delay: .2s; }
.kl_ov_hl li.js-reveal:nth-child(4) { transition-delay: .3s; }
.kl_ov_hl li.js-reveal:nth-child(5) { transition-delay: .4s; }
.kl_ov_hl li:before { content: ''; position: absolute; left: 0; top: -2px; width: 36px; height: 3px; background: var(--kl-navy); transition: width .6s cubic-bezier(.2,.7,.2,1); }
.kl_ov_hl li:hover:before { width: 100%; }
.kl_ov_hl .y { display: block; font-family: 'Poppins', sans-serif; font-size: 64px; font-weight: 600; line-height: 1; letter-spacing: -0.04em; color: #c3cfdf; transition: color .4s; }
.kl_ov_hl li:hover .y { color: var(--kl-navy); }
.kl_ov_hl p { margin-top: 22px; font-size: 16.5px; line-height: 1.7; letter-spacing: -0.02em; color: #4a5566; word-break: keep-all; }
.kl_ov_hl li:last-child:before { background: var(--kl-red); }
.kl_ov_hl li:last-child .y { color: var(--kl-navy); }
.kl_ov_hl li:last-child p { font-weight: 600; color: var(--kl-navy); }
/* ---------- 04 사업분야: 사진 카드 3장 (카드 전체가 링크, 흰 면) ---------- */
.kl_ov_bz { padding: 150px 0 160px; }
.kl_ov_bz .cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 60px; }
.kl_ov_bz .cards > li { position: relative; height: 520px; overflow: hidden; background: var(--kl-navy-deep); color: #fff; }
.kl_ov_bz .cards > li.js-reveal:nth-child(2) { transition-delay: .12s; }
.kl_ov_bz .cards > li.js-reveal:nth-child(3) { transition-delay: .24s; }
.kl_ov_bz .cards a { display: block; height: 100%; color: inherit; }
.kl_ov_bz .ph { position: absolute; inset: 0; }
.kl_ov_bz .ph img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; transform: scale(1.04); transition: transform 1.6s cubic-bezier(.2,.7,.2,1); }
.kl_ov_bz .lpg .ph img { object-position: 78% 50%; }
.kl_ov_bz .cards > li:hover .ph img { transform: scale(1.1); }
/* 하단 남색 그라데이션: 글자 가독성 */
.kl_ov_bz .ph:after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,32,66,0) 35%, rgba(10,32,66,.55) 65%, rgba(10,32,66,.92) 100%); }
.kl_ov_bz .txt { position: absolute; left: 40px; right: 40px; bottom: 40px; z-index: 1; }
.kl_ov_bz .eye { display: flex; align-items: center; gap: 14px; font-family: 'Poppins', sans-serif; font-size: 15px; font-weight: 600; letter-spacing: .12em; color: rgba(255,255,255,.8); }
.kl_ov_bz .eye .no { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: var(--kl-red); font-size: 14px; letter-spacing: 0; color: #fff; }
.kl_ov_bz .h { display: block; margin-top: 16px; font-size: 42px; font-weight: 700; letter-spacing: -0.04em; line-height: 1.2; }
/* 태그: 반투명 유리 질감 */
.kl_ov_bz .chip { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.kl_ov_bz .chip span { padding: 8px 18px; border: 1px solid rgba(255,255,255,.35); border-radius: 24px; background: rgba(255,255,255,.1); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); font-size: 15px; font-weight: 500; color: #fff; transition: background .3s, color .3s; }
.kl_ov_bz .cards > li:hover .chip span { background: #fff; color: var(--kl-navy); }

/* ---------- 05 선대 현황: 공통 사진 배너(.kl_sub_fl) + 오른쪽 분류별 척수 ---------- */
.kl_ov_fl .kl_in { display: flex; justify-content: space-between; align-items: flex-end; gap: 60px; }
.kl_ov_fl .cnt { display: flex; gap: 0; padding: 38px 44px; background: rgba(10,30,60,.78); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }  /* 밝은 선체 사진 위에서도 숫자가 읽히도록 남색 반투명 패널로 받친다 */
.kl_ov_fl .cnt li { min-width: 150px; padding: 0 40px; border-left: 1px solid rgba(255,255,255,.2); }
.kl_ov_fl .cnt li:first-child { padding-left: 0; border-left: 0; }
.kl_ov_fl .cnt li:last-child { padding-right: 0; }
.kl_ov_fl .cnt span { display: block; font-family: 'Poppins', sans-serif; font-size: 15px; font-weight: 600; letter-spacing: .12em; color: rgba(255,255,255,.75); }
.kl_ov_fl .cnt strong { display: block; margin-top: 14px; font-family: 'Poppins', sans-serif; font-size: 72px; font-weight: 600; line-height: 1; letter-spacing: -0.03em; color: #fff; }
.kl_ov_fl .cnt strong small { margin-left: 4px; font-family: 'Noto Sans KR', sans-serif; font-size: 20px; font-weight: 500; letter-spacing: -0.02em; }
.kl_ov_fl .cnt .all strong { color: #ff6b6b; }

/* ---------- 06 본사 안내: 주소 카드 2장 (본사만 남색 면) ---------- */
.kl_ov_lc { padding: 150px 0 160px; background: var(--kl-sky); }
.kl_ov_lc .loc { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 60px; }
.kl_ov_lc .loc li { padding: 44px 48px 46px; border: 1px solid var(--kl-line); background: #fff; }
.kl_ov_lc .loc li.js-reveal:nth-child(2) { transition-delay: .12s; }
.kl_ov_lc .loc .tag { font-size: 15px; font-weight: 600; color: var(--kl-gray); }
.kl_ov_lc .loc strong { display: block; margin-top: 36px; font-family: 'Poppins', sans-serif; font-size: 36px; font-weight: 700; letter-spacing: -0.01em; color: var(--kl-navy); }
.kl_ov_lc .loc p { margin-top: 12px; font-size: 17px; line-height: 1.7; letter-spacing: -0.02em; color: #4a5566; }
.kl_ov_lc .loc .hq { border-color: var(--kl-navy); background: var(--kl-navy); }
.kl_ov_lc .loc .hq .tag { color: rgba(255,255,255,.7); }
.kl_ov_lc .loc .hq strong { color: #fff; }
.kl_ov_lc .loc .hq p { color: rgba(255,255,255,.85); }

@media (max-width: 1400px) {
	.kl_ov_ab .val { gap: 14px; }
	.kl_ov_ab .val li { padding: 34px 28px 36px; }
	.kl_ov_ab .val strong { font-size: 23px; }
	.kl_ov_gn .stat li { padding: 40px 32px 6px; }
	.kl_ov_gn strong { font-size: clamp(36px, 3.6vw, 52px); }
	.kl_ov_hl ol { gap: 0 18px; }
	.kl_ov_hl .y { font-size: 46px; }
	.kl_ov_hl p { font-size: 15.5px; }
	.kl_ov_bz .cards > li { height: 460px; }
	.kl_ov_bz .txt { left: 30px; right: 30px; bottom: 32px; }
	.kl_ov_bz .h { font-size: 34px; }
	.kl_ov_fl .kl_in { flex-direction: column; align-items: flex-start; }
	.kl_ov_fl .cnt { margin-top: 20px; }
	.kl_ov_fl .cnt li:first-child { padding-left: 0; border-left: 0; }
}
@media (max-width: 1024px) {
	.kl_ov_hero .kl_sub_hero_txt .big { font-size: min(62px, 14vw); }  /* 'OVERVIEW' 8글자가 화면 폭을 넘지 않게 */
	.kl_ov_hero .kl_sub_hero_txt p br { display: none; }
	.kl_ov_gn .head, .kl_ov_hl .head, .kl_ov_bz .head, .kl_ov_lc .head { flex-direction: column; align-items: flex-start; gap: 16px; }

	.kl_ov_ab { padding: 72px 0; }
	.kl_ov_ab .row { grid-template-columns: 1fr; }
	.kl_ov_ab .body { margin-top: 24px; }
	.kl_ov_ab .body p { font-size: 15.5px; line-height: 1.8; }
	.kl_ov_ab .body p br { display: none; }  /* 모바일은 원고 줄바꿈 없이 흐르게 */
	.kl_ov_ab .body p + p { margin-top: 14px; }
	.kl_ov_ab .body .kl_sub_more { margin-top: 24px; }
	.kl_ov_ab .val { grid-template-columns: 1fr; gap: 10px; margin-top: 44px; }
	.kl_ov_ab .val li { padding: 24px 22px 26px; }
	.kl_ov_ab .val li.js-reveal:nth-child(n) { transition-delay: 0s; }
	.kl_ov_ab .val li.is_in:hover { transform: none; background-color: var(--kl-sky); box-shadow: none; }
	.kl_ov_ab .val li:hover .no { background: #fff; color: var(--kl-red); }
	.kl_ov_ab .val li:hover .en { color: #7f90ab; }
	.kl_ov_ab .val li:hover strong { color: var(--kl-navy); }
	.kl_ov_ab .val li:hover p { color: #4a5566; }
	.kl_ov_ab .val .no { width: 38px; height: 38px; font-size: 13px; }
	.kl_ov_ab .val .en { font-size: 11px; }
	.kl_ov_ab .val strong { margin-top: 18px; font-size: 20px; }
	.kl_ov_ab .val p { margin-top: 8px; font-size: 14.5px; }
	.kl_ov_gn { padding: 72px 0; }
	.kl_ov_gn .head { gap: 10px; }
	.kl_ov_gn .base { font-size: 14px; }
	.kl_ov_gn .stat { grid-template-columns: 1fr; margin-top: 32px; border-top: 0; }
	.kl_ov_gn .stat li, .kl_ov_gn .stat li:first-child { padding: 26px 0 28px; border-left: 0; border-top: 1px solid #c8d1de; }
	.kl_ov_gn .stat li.js-reveal:nth-child(n) { transition-delay: 0s; }
	.kl_ov_gn .stat li.is_in:before { width: 40px; }
	.kl_ov_gn .en { font-size: 13px; }
	.kl_ov_gn strong { margin-top: 12px; font-size: 38px; }
	.kl_ov_gn .stat p { margin-top: 8px; font-size: 15px; }

	/* 연혁: 세로 타임라인 (왼쪽 세로선 + 점) */
	.kl_ov_hl { padding: 72px 0; }
	.kl_ov_hl ol { grid-template-columns: 1fr; margin-top: 36px; }
	.kl_ov_hl li { display: grid; grid-template-columns: 84px 1fr; align-items: baseline; gap: 14px; padding: 18px 0; }
	.kl_ov_hl li:last-child { border-bottom: 1px solid #d5dde8; }
	.kl_ov_hl li:before { width: 24px; }
	.kl_ov_hl li.js-reveal:nth-child(n) { transition-delay: 0s; }
	.kl_ov_hl .y { font-size: 26px; color: var(--kl-navy); }
	.kl_ov_hl p { margin-top: 0; font-size: 15px; }
	.kl_ov_bz { padding: 72px 0 80px; }
	.kl_ov_bz .cards { grid-template-columns: 1fr; gap: 12px; margin-top: 32px; }
	.kl_ov_bz .cards > li { height: 300px; }
	.kl_ov_bz .cards > li.js-reveal:nth-child(n) { transition-delay: 0s; }
	.kl_ov_bz .txt { left: 22px; right: 22px; bottom: 24px; }
	.kl_ov_bz .eye { gap: 10px; font-size: 12px; }
	.kl_ov_bz .eye .no { width: 32px; height: 32px; font-size: 12px; }
	.kl_ov_bz .h { margin-top: 10px; font-size: 28px; }
	.kl_ov_bz .chip { gap: 6px; margin-top: 14px; }
	.kl_ov_bz .chip span { padding: 6px 13px; font-size: 13.5px; }

	.kl_ov_fl .kl_in { gap: 32px; }
	.kl_ov_fl .cnt { width: 100%; margin-top: 0; padding: 24px 20px; box-sizing: border-box; }
	.kl_ov_fl .cnt li { flex: 1; min-width: 0; padding: 0 16px; }
	.kl_ov_fl .cnt span { font-size: 12px; }
	.kl_ov_fl .cnt strong { margin-top: 8px; font-size: 40px; }
	.kl_ov_fl .cnt strong small { font-size: 14px; }

	.kl_ov_lc { padding: 72px 0 80px; }
	.kl_ov_lc .loc { grid-template-columns: 1fr; gap: 12px; margin-top: 32px; }
	.kl_ov_lc .loc li { padding: 24px 22px; }
	.kl_ov_lc .loc li.js-reveal:nth-child(n) { transition-delay: 0s; }
	.kl_ov_lc .loc .tag { font-size: 13px; }
	.kl_ov_lc .loc strong { margin-top: 14px; font-size: 24px; }
	.kl_ov_lc .loc p { margin-top: 6px; font-size: 14.5px; }
	.kl_ov_lc .loc p br { display: none; }
}
@media (prefers-reduced-motion: reduce) {
	.kl_ov_gn .stat li:before { transition: none; }
}

/* =========================================================
   회사소개 > 연혁 (company/history/index)
   ========================================================= */
/* 왼쪽 sticky 가 동작하도록 이 페이지만 overflow: clip (hidden 은 스크롤 컨테이너가 되어 sticky 를 막는다) */
.kl_sub.kl_hs_page { overflow: clip; }
/* basic.css 의 html, body { overflow-x: hidden } 이 body 를 스크롤 컨테이너로 만들어 sticky 가 화면에 붙지 않는다.
   sticky 를 쓰는 페이지(연혁·CEO 인사말·환경안전보건 HSEQ 방침)만 clip 으로 바꿔 가로 넘침은 그대로 막고 sticky 는 살린다 */
html:has(.kl_hs_page), html:has(.kl_hs_page) body,
html:has(.kl_ceo), html:has(.kl_ceo) body,
html:has(.kl_ehs_po), html:has(.kl_ehs_po) body,
html:has(.kl_esg_in), html:has(.kl_esg_in) body { overflow-x: clip; }
/* board.css 가 600px 이하에서 #wrap 에 overflow-x: hidden !important 를 걸어 같은 문제가 생긴다 → 이 페이지들만 덮어씀 */
html:has(.kl_hs_page) #wrap, html:has(.kl_ceo) #wrap, html:has(.kl_ehs_po) #wrap, html:has(.kl_esg_in) #wrap { overflow-x: clip !important; }
.kl_hs_hero .bg img { object-position: 78% 50%; }  /* 배가 사진 오른쪽(약 78%)에 있다 (2026-10-29) */
@media (max-width: 1024px) { .kl_hs_hero .bg img { object-position: 86% 50%; } }  /* 모바일은 세로로 길어 확대가 커서 배를 화면 안쪽으로 */

.kl_hs { padding: 160px 0 170px; }
.kl_hs .kl_in { display: grid; grid-template-columns: 34% 1fr; gap: 0 6%; align-items: start; }

/* ---------- 왼쪽: 제목 + 현재 연대(큰 숫자) + 연대 메뉴 — 스크롤 동안 고정 ---------- */
.kl_hs .side { position: sticky; top: calc(var(--kl-header-h) + 50px); }
/* 제목 속 'K-LNG' 를 로고 이미지로 (메인 intro 링크와 같은 방식).
   logo_navy.png(570x133) 는 좌 38 · 우 40 · 아래 8px 투명 여백이 있어 그만큼 음수 여백으로 당겨 글자와 붙인다 */
.kl_hs .kl_tit .logo { display: inline-block; height: 1em; width: auto; margin: 0 -.22em 0 -.285em; vertical-align: -0.08em; }
.kl_hs .now { display: flex; align-items: flex-start; margin-top: 56px; font-family: 'Poppins', sans-serif; font-weight: 700; line-height: .9; letter-spacing: -0.05em; color: var(--kl-navy); }
.kl_hs .now strong { font-size: clamp(96px, 8.4vw, 164px); font-weight: 700; transition: opacity .22s, transform .22s; }
.kl_hs .now span { margin: .12em 0 0 .06em; font-size: clamp(36px, 2.8vw, 54px); color: var(--kl-red); letter-spacing: 0; }
.kl_hs .now.is_swap strong { opacity: 0; transform: translateY(14px); }
.kl_hs .nav { display: flex; flex-direction: column; gap: 4px; margin-top: 44px; }
.kl_hs .nav a { position: relative; display: inline-flex; align-items: center; gap: 14px; padding: 6px 0; font-family: 'Poppins', sans-serif; font-size: 18px; font-weight: 600; letter-spacing: .02em; color: #9aa7ba; transition: color .3s; }
/* 앞의 짧은 가로 표시: 현재 연대에서 길어진다 */
.kl_hs .nav a:before { content: ''; display: block; width: 14px; height: 2px; background: currentColor; transition: width .35s cubic-bezier(.2,.7,.2,1); }
.kl_hs .nav a:hover { color: var(--kl-navy); }
.kl_hs .nav a.on { color: var(--kl-navy); }
.kl_hs .nav a.on:before { width: 40px; background: var(--kl-red); }

/* ---------- 오른쪽: 연대별 연도 목록 ---------- */
.kl_hs .dec + .dec { margin-top: 0; }  /* PC: 연대 머리 없이 한 목록처럼 이어짐 (연대는 왼쪽 큰 숫자로 표시) */
/* 연대 머리: 왼쪽 큰 숫자와 같은 결(채운 남색 + 빨간 's) */
.kl_hs .dec_h { display: flex; align-items: flex-start; font-family: 'Poppins', sans-serif; font-size: clamp(68px, 5.2vw, 100px); font-weight: 600; line-height: 1; letter-spacing: -0.035em; color: var(--kl-navy); }
.kl_hs .dec_h span { margin: .1em 0 0 .05em; font-size: .45em; letter-spacing: 0; color: var(--kl-red); }
.kl_hs .dec ol { position: relative; }
/* PC 에서는 왼쪽 큰 숫자가 현재 연대를 보여주므로 오른쪽 연대 머리는 숨김 (모바일에서만 표시) */
.kl_hs .dec_h { display: none; }
/* 연도 줄: 왼쪽 연도 / 오른쪽 항목. 줄 사이 옅은 구분선 */
.kl_hs .dec ol > li { display: grid; grid-template-columns: 150px 1fr; gap: 0 30px; padding: 34px 0; border-top: 1px solid #e3e8ef; }
.kl_hs .dec:last-child ol > li:last-child { border-bottom: 1px solid #e3e8ef; }
.kl_hs .y { font-family: 'Poppins', sans-serif; font-size: 34px; font-weight: 600; line-height: 1.1; letter-spacing: -0.02em; color: var(--kl-navy); transition: color .3s; }
.kl_hs .dec ol > li:hover .y { color: var(--kl-red); }
.kl_hs .dec ol > li ul { padding-top: 6px; }
.kl_hs .dec ol > li ul li { position: relative; padding-left: 18px; font-size: 18px; line-height: 1.75; letter-spacing: -0.02em; color: #3d4859; word-break: keep-all; }
.kl_hs .dec ol > li ul li + li { margin-top: 6px; }
.kl_hs .dec ol > li ul li:before { content: ''; position: absolute; left: 0; top: .78em; width: 6px; height: 6px; border-radius: 50%; background: #9fb3cf; }
/* 등장: 줄마다 아래에서 살짝 올라온다 (공통 .js-reveal 보다 짧고 가볍게) */
.kl_hs .dec ol > li.js-reveal { transform: translateY(24px); transition: opacity .8s, transform .8s cubic-bezier(.2,.7,.2,1); }
.kl_hs .dec ol > li.js-reveal.is_in { transform: none; }

@media (max-width: 1400px) {
	.kl_hs .kl_in { grid-template-columns: 30% 1fr; gap: 0 5%; }
	.kl_hs .dec ol > li { grid-template-columns: 110px 1fr; gap: 0 20px; }
	.kl_hs .y { font-size: 28px; }
	.kl_hs .dec ol > li ul li { font-size: 16.5px; }
}
@media (max-width: 1024px) {
	.kl_hs { padding: 64px 0 80px; }
	/* 왼쪽 영역 → 제목 + 헤더 아래 고정되는 가로 연대 탭.
	   그리드면 sticky 범위가 자기 행으로 제한되므로 block 으로 바꾸고, .side 를 풀어 탭이 섹션 전체 높이 동안 붙어 있게 한다 */
	.kl_hs .kl_in { display: block; }
	.kl_hs .side { display: contents; }
	.kl_hs .now { display: none; }
	.kl_hs .nav {
		position: sticky; top: var(--kl-header-h); z-index: 5; flex-direction: row; gap: 6px; margin: 24px -20px 0; padding: 12px 20px;
		overflow-x: auto; scrollbar-width: none; background: rgba(255,255,255,.94); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
	}
	.kl_hs .nav::-webkit-scrollbar { display: none; }
	.kl_hs .nav a { flex: none; padding: 7px 14px; border: 1px solid #d5dce6; border-radius: 20px; font-size: 14px; }
	.kl_hs .nav a:before { display: none; }
	.kl_hs .nav a.on { border-color: var(--kl-navy); background: var(--kl-navy); color: #fff; }
	.kl_hs .list { margin-top: 30px; }
	.kl_hs .dec + .dec { margin-top: 64px; }
	.kl_hs .dec ol > li:last-child { border-bottom: 1px solid #e3e8ef; }
	.kl_hs .dec_h { display: flex; font-size: 54px; }
	.kl_hs .dec ol { margin-top: 16px; }
	.kl_hs .dec ol > li { grid-template-columns: 1fr; gap: 10px; padding: 22px 0; }
	.kl_hs .y { font-size: 24px; }
	.kl_hs .dec ol > li ul { padding-top: 0; }
	.kl_hs .dec ol > li ul li { padding-left: 15px; font-size: 15px; line-height: 1.7; }
	.kl_hs .dec ol > li ul li + li { margin-top: 4px; }
	.kl_hs .dec ol > li ul li:before { width: 5px; height: 5px; }
}
@media (prefers-reduced-motion: reduce) {
	.kl_hs .now strong { transition: none; }
}

/* =========================================================
   지속가능경영 > 윤리경영 (sustain/ethics/index)
   ========================================================= */
.kl_et_hero .bg img { object-position: 62% 55%; }

/* ---------- 01 도입: 왼쪽 제목 / 오른쪽 정의(큰 글) + 다짐 2단 ---------- */
.kl_et_in { padding: 160px 0 150px; }
.kl_et_in .kl_in { display: grid; grid-template-columns: 30% 1fr; gap: 0 6%; align-items: start; }
.kl_et_in .lead { font-size: 30px; font-weight: 600; line-height: 1.65; letter-spacing: -0.035em; color: var(--kl-ink); word-break: keep-all; }
/* 핵심어: 화면에 들어오면 밑줄 면이 왼쪽에서 그어진다 */
.kl_et_in .lead em {
	font-style: normal; font-weight: 700; color: var(--kl-navy);
	background: linear-gradient(transparent 62%, rgba(214,48,49,.18) 62%) no-repeat 0 0 / 0% 100%;
	transition: background-size 1.2s cubic-bezier(.2,.7,.2,1) .5s;
}
.kl_et_in .lead.is_in em { background-size: 100% 100%; }
.kl_et_in .cols { display: grid; grid-template-columns: 1fr 1fr; gap: 0 48px; margin-top: 56px; padding-top: 44px; border-top: 1px solid var(--kl-line); }
.kl_et_in .cols p { font-size: 17.5px; line-height: 1.9; letter-spacing: -0.02em; color: #4a5566; word-break: keep-all; }
.kl_et_in .cols p.js-reveal:nth-child(2) { transition-delay: .12s; }

/* ---------- 02 원칙: 이해관계자 카드 6장 + 토대(임직원 기본윤리) 띠 ---------- */
.kl_et_pr { padding: 150px 0 160px; background: var(--kl-sky); }
/* 카드 그리드 3×2: 마우스를 올리면 아래에서 남색이 차오르고(.fill) 상세가 드러난다. 기울기(JS) */
.kl_et_pr .cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 56px; }
.kl_et_pr .cards > li {
	position: relative; display: flex; flex-direction: column; padding: 36px 36px 38px; border-radius: 22px; overflow: hidden;
	background: #fff; cursor: default; outline: none; transform-style: preserve-3d;
	transition: opacity 1s, transform .45s cubic-bezier(.2,.7,.2,1), box-shadow .45s;
}
.kl_et_pr .cards > li.js-reveal:nth-child(3n+2) { transition-delay: .1s; }
.kl_et_pr .cards > li.js-reveal:nth-child(3n) { transition-delay: .2s; }
.kl_et_pr .cards > li.is_in { transition-delay: 0s; }
.kl_et_pr .cards > li:hover, .kl_et_pr .cards > li:focus-visible { box-shadow: 0 34px 60px -30px rgba(13,38,72,.5); }
/* 남색 면: 아래에서 위로 차오름 */
.kl_et_pr .cards .fill { position: absolute; inset: 0; background: var(--kl-navy); transform: scaleY(0); transform-origin: 50% 100%; transition: transform .55s cubic-bezier(.65,0,.35,1); }
.kl_et_pr .cards > li:hover .fill, .kl_et_pr .cards > li:focus-visible .fill { transform: scaleY(1); }
/* 마우스를 따라다니는 빛 + 오른쪽 아래 큰 번호 워터마크 */
.kl_et_pr .cards > li:before { content: attr(data-no); position: absolute; right: -4px; bottom: -34px; z-index: 1; font-family: 'Poppins', sans-serif; font-size: 170px; font-weight: 700; line-height: 1; letter-spacing: -0.06em; color: rgba(255,255,255,.07); opacity: 0; transform: translateY(30px); transition: opacity .5s, transform .7s cubic-bezier(.2,.7,.2,1); pointer-events: none; }
.kl_et_pr .cards > li:hover:before, .kl_et_pr .cards > li:focus-visible:before { opacity: 1; transform: none; transition-delay: .2s; }
.kl_et_pr .cards .top, .kl_et_pr .cards .bot { position: relative; z-index: 2; }
.kl_et_pr .cards .top { display: flex; justify-content: space-between; align-items: flex-start; }
.kl_et_pr .cards .ico { display: flex; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: 50%; background: var(--kl-sky); transition: background .45s, transform .6s cubic-bezier(.34,1.56,.64,1); }
.kl_et_pr .cards .ico svg { width: 30px; height: 30px; fill: none; stroke: var(--kl-navy); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; transition: stroke .45s; }
.kl_et_pr .cards .no { font-family: 'Poppins', sans-serif; font-size: 16px; font-weight: 600; color: #b3bfcf; transition: color .45s; }
.kl_et_pr .cards .en { font-family: 'Poppins', sans-serif; font-size: 12px; font-weight: 600; letter-spacing: .14em; color: #8a9ab3; transition: color .45s; }
.kl_et_pr .cards h4 { margin-top: 8px; font-size: 26px; font-weight: 700; letter-spacing: -0.035em; color: var(--kl-navy); transition: color .45s; }
/* 상세: 항상 보이게 (2026-10-26 — 이전엔 마우스를 올려야만 보여 카드가 비어 보임). 호버 시 흰 글자로 */
.kl_et_pr .cards .bot { margin-top: 44px; }
.kl_et_pr .cards .bot ul { margin-top: 18px; padding-top: 16px; border-top: 1px solid #e3e8f0; transition: border-color .45s; }
.kl_et_pr .cards .bot ul li { position: relative; padding: 5px 0 5px 18px; font-size: 17px; letter-spacing: -0.02em; color: #4a5566; word-break: keep-all; transition: color .45s; }
.kl_et_pr .cards .bot ul li:before { content: ''; position: absolute; left: 0; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%; background: var(--kl-red); }
.kl_et_pr .cards > li:hover .bot ul, .kl_et_pr .cards > li:focus-visible .bot ul { border-color: rgba(255,255,255,.18); }
.kl_et_pr .cards > li:hover .bot ul li, .kl_et_pr .cards > li:focus-visible .bot ul li { color: rgba(255,255,255,.88); }
/* 마우스 올림 상태 색 */
.kl_et_pr .cards > li:hover .ico, .kl_et_pr .cards > li:focus-visible .ico { background: var(--kl-red); transform: rotate(-10deg) scale(1.08); }
.kl_et_pr .cards > li:hover .ico svg, .kl_et_pr .cards > li:focus-visible .ico svg { stroke: #fff; }
.kl_et_pr .cards > li:hover .no, .kl_et_pr .cards > li:focus-visible .no { color: rgba(255,255,255,.55); }
.kl_et_pr .cards > li:hover .en, .kl_et_pr .cards > li:focus-visible .en { color: #ff8a8a; }
.kl_et_pr .cards > li:hover h4, .kl_et_pr .cards > li:focus-visible h4 { color: #fff; }
/* + 표시: 상세가 항상 보이므로 숨김 */
.kl_et_pr .cards .plus { display: none; }

/* 토대: 남색 띠 — 왼쪽 제목 / 오른쪽 세 가지 가치 */
.kl_et_pr .base { display: grid; grid-template-columns: 30% 1fr; align-items: center; gap: 0 40px; margin-top: 16px; padding: 34px 40px; border-radius: 22px; background: #0b2245; color: #fff; }
.kl_et_pr .base .en { display: flex; align-items: center; gap: 10px; font-family: 'Poppins', sans-serif; font-size: 12px; font-weight: 600; letter-spacing: .16em; color: #ff8a8a; }
.kl_et_pr .base .en b { color: rgba(255,255,255,.5); letter-spacing: 0; }
.kl_et_pr .base h4 { margin-top: 6px; font-size: 26px; font-weight: 700; letter-spacing: -0.035em; }
.kl_et_pr .base ul { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.kl_et_pr .base li { display: flex; align-items: center; justify-content: center; min-height: 70px; padding: 0 14px; border: 1px solid rgba(255,255,255,.18); border-radius: 14px; font-size: 18px; font-weight: 600; letter-spacing: -0.02em; text-align: center; transition: background .35s, color .35s, border-color .35s; }
.kl_et_pr .base li:hover { border-color: #fff; background: #fff; color: var(--kl-navy); }

/* ---------- 제보 안내 배너 ---------- */
/* ---------- 윤리경영 02 윤리강령 및 행동지침 (2026-10-26 통합): 제목 + 다짐 / 왼쪽 원칙 탭 4개 · 오른쪽 원칙 설명 + 행동지침 3개 ---------- */
.kl_et_cc { padding: 150px 0 160px; background: #fff; }  /* 위 이해관계자 섹션(하늘색)과 구분되게 흰 배경 + 탭 · 패널은 하늘색 면 */
.kl_et_cc .hd { display: grid; grid-template-columns: 30% 1fr; align-items: end; gap: 0 6%; }
.kl_et_cc .pledge { position: relative; padding-left: 34px; border-left: 3px solid var(--kl-red); font-size: 22px; font-weight: 500; line-height: 1.75; letter-spacing: -0.03em; color: var(--kl-ink); word-break: keep-all; }
.kl_et_cc .pledge b { font-weight: 700; color: var(--kl-navy); }
.kl_et_cc .cc { display: grid; grid-template-columns: 38% 1fr; gap: 24px; margin-top: 80px; }
/* 왼쪽 탭: 번호 원 + 원칙 문장. 활성 탭은 남색 면 + 오른쪽 화살표 */
.kl_et_cc .cc_tab { display: flex; flex-direction: column; gap: 10px; }
.kl_et_cc .cc_tab button { position: relative; display: flex; align-items: center; gap: 20px; width: 100%; padding: 26px 64px 26px 26px; border: 0; border-radius: 18px; background: var(--kl-sky); cursor: pointer; text-align: left;
	font-family: inherit; color: var(--kl-navy); transition: background .4s, color .4s, box-shadow .4s, transform .4s cubic-bezier(.2,.7,.2,1); }
.kl_et_cc .cc_tab button b { flex: none; display: flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 50%; background: #fff; font-family: 'Poppins', sans-serif; font-size: 17px; font-weight: 700; color: var(--kl-navy); transition: background .4s, color .4s; }
.kl_et_cc .cc_tab button span { font-size: 19px; font-weight: 700; line-height: 1.45; letter-spacing: -0.03em; word-break: keep-all; }
.kl_et_cc .cc_tab button:after { content: ''; position: absolute; right: 26px; top: 50%; width: 26px; height: 15px; margin-top: -7.5px; background: currentColor; opacity: 0; transform: translateX(-10px);
	-webkit-mask: url(/img/cursor.png) center / 100% 100% no-repeat; mask: url(/img/cursor.png) center / 100% 100% no-repeat; transition: opacity .4s, transform .4s; }
.kl_et_cc .cc_tab button:hover { transform: translateX(6px); }
.kl_et_cc .cc_tab button.on { background: var(--kl-navy); color: #fff; box-shadow: 0 26px 50px -30px rgba(19,50,95,.6); transform: translateX(10px); }
.kl_et_cc .cc_tab button.on b { background: var(--kl-red); color: #fff; }
.kl_et_cc .cc_tab button.on:after { opacity: 1; transform: none; }
/* 오른쪽 패널: 큰 번호 워터마크 + 원칙 + 설명 + 행동지침(번호 카드 3개). 바뀔 때 아래에서 올라온다 */
.kl_et_cc .cc_pns { position: relative; }
.kl_et_cc .cc_pn { position: relative; display: none; height: 100%; padding: 52px 56px 56px; border-radius: 24px; background: var(--kl-sky); overflow: hidden; box-sizing: border-box; }
.kl_et_cc .cc_pn.on { display: block; animation: klEtUp .6s cubic-bezier(.2,.7,.2,1) both; }
.kl_et_cc .cc_pn .big { position: absolute; right: 36px; top: 18px; font-family: 'Poppins', sans-serif; font-size: 150px; font-weight: 700; line-height: 1; letter-spacing: -0.06em; color: #e1e8f1; pointer-events: none; }
.kl_et_cc .cc_pn .tag { position: relative; display: inline-block; padding: 6px 14px; border-radius: 20px; background: rgba(214,48,49,.1); font-size: 14px; font-weight: 700; color: var(--kl-red); }
.kl_et_cc .cc_pn h4 { position: relative; margin-top: 18px; padding-right: 120px; font-size: 32px; font-weight: 700; line-height: 1.4; letter-spacing: -0.035em; color: var(--kl-navy); word-break: keep-all; }
.kl_et_cc .cc_pn .d { position: relative; margin-top: 18px; font-size: 18px; line-height: 1.85; letter-spacing: -0.02em; color: #4a5566; word-break: keep-all; }
.kl_et_cc .cc_pn .sub { margin-top: 36px; padding-top: 30px; border-top: 1px solid #e3e8f0; font-size: 15px; font-weight: 700; color: var(--kl-navy); }
.kl_et_cc .cc_pn ol { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }
.kl_et_cc .cc_pn ol li { display: grid; grid-template-columns: 56px 1fr; align-items: center; gap: 16px; padding: 18px 22px; border-radius: 14px; background: #fff; font-size: 17px; line-height: 1.65; letter-spacing: -0.02em; color: #2c3647; word-break: keep-all; transition: background .35s, transform .35s; }
.kl_et_cc .cc_pn ol li:hover { box-shadow: 0 14px 30px -20px rgba(19,50,95,.35); transform: translateX(4px); }
.kl_et_cc .cc_pn ol em { display: flex; align-items: center; justify-content: center; height: 34px; border-radius: 17px; background: var(--kl-sky); font-family: 'Poppins', sans-serif; font-size: 14px; font-style: normal; font-weight: 700; color: var(--kl-navy); }
.kl_et_cc .cc_pn.on ol li { animation: klEtUp .6s cubic-bezier(.2,.7,.2,1) both; }
.kl_et_cc .cc_pn.on ol li:nth-child(1) { animation-delay: .12s; }
.kl_et_cc .cc_pn.on ol li:nth-child(2) { animation-delay: .2s; }
.kl_et_cc .cc_pn.on ol li:nth-child(3) { animation-delay: .28s; }
@keyframes klEtUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@media (max-width: 1400px) {
	.kl_et_cc .hd { grid-template-columns: 1fr; gap: 30px; }
	.kl_et_cc .cc { grid-template-columns: 40% 1fr; }
	.kl_et_cc .cc_tab button { padding: 22px 54px 22px 20px; gap: 14px; }
	.kl_et_cc .cc_tab button span { font-size: 17px; }
	.kl_et_cc .cc_pn { padding: 44px 40px 46px; }
	.kl_et_cc .cc_pn h4 { font-size: 27px; }
}
@media (max-width: 1024px) {
	/* 모바일: 탭 없이 4개 원칙 패널을 모두 차례로 */
	.kl_et_cc { padding: 72px 0 80px; }
	.kl_et_cc .hd { gap: 22px; }
	.kl_et_cc .pledge { padding-left: 18px; font-size: 16px; }
	.kl_et_cc .cc { grid-template-columns: 1fr; gap: 12px; margin-top: 36px; }
	.kl_et_cc .cc_tab { display: none; }
	.kl_et_cc .cc_pns { display: flex; flex-direction: column; gap: 12px; }
	.kl_et_cc .cc_pn, .kl_et_cc .cc_pn.on { display: block; height: auto; padding: 28px 20px 24px; border-radius: 16px; animation: none; }
	.kl_et_cc .cc_pn .big { right: 16px; top: 14px; font-size: 64px; }
	.kl_et_cc .cc_pn .tag { padding: 5px 12px; font-size: 12px; }
	.kl_et_cc .cc_pn h4 { margin-top: 12px; padding-right: 50px; font-size: 20px; }
	.kl_et_cc .cc_pn .d { margin-top: 12px; font-size: 15px; }
	.kl_et_cc .cc_pn .sub { margin-top: 22px; padding-top: 20px; font-size: 13px; }
	.kl_et_cc .cc_pn ol li { grid-template-columns: 44px 1fr; gap: 12px; padding: 14px 14px; font-size: 14.5px; }
	.kl_et_cc .cc_pn.on ol li { animation: none; }
	.kl_et_cc .cc_pn ol em { height: 28px; font-size: 12px; }
}

/* 03 신고·제보: 사진 배경(짙게 눌러 차분하게) 위 2단 — 왼쪽 안내 + 보호 원칙 2개 + 버튼 / 오른쪽 흰 패널의 제보 창구 3줄 */
.kl_et_rp { position: relative; padding: 140px 0; background: var(--kl-navy-deep); color: #fff; overflow: hidden; }
.kl_et_rp .bg { position: absolute; inset: 0; }
.kl_et_rp .bg img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; filter: grayscale(.6); }
.kl_et_rp .bg:after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(10,30,60,.96) 0%, rgba(10,30,60,.9) 50%, rgba(10,30,60,.72) 100%); }
.kl_et_rp .kl_in { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr minmax(0, 640px); gap: 0 8%; align-items: center; }
.kl_et_rp .kl_label, .kl_et_rp .kl_tit { color: #fff; }
.kl_et_rp .kl_desc { color: rgba(255,255,255,.82); word-break: keep-all; }
.kl_et_rp .kl_label b { color: #ff6b6b; }
.kl_et_rp .safe { margin-top: 40px; border-top: 1px solid rgba(255,255,255,.18); }
.kl_et_rp .safe li { display: flex; align-items: center; gap: 18px; padding: 20px 0; border-bottom: 1px solid rgba(255,255,255,.18); }
.kl_et_rp .safe i { flex: none; display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 50%; background: rgba(255,107,107,.16); }
.kl_et_rp .safe i svg { width: 23px; height: 23px; fill: none; stroke: #ff8a8a; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.kl_et_rp .safe p { font-size: 16px; line-height: 1.6; color: rgba(255,255,255,.7); word-break: keep-all; }
.kl_et_rp .safe strong { display: block; font-size: 18px; font-weight: 700; color: #fff; }
.kl_et_rp .txt .kl_sub_btn { margin-top: 44px; }
.kl_et_rp .panel { padding: 40px 40px 30px; border-radius: 24px; background: #fff; color: var(--kl-navy); box-shadow: 0 40px 80px -40px rgba(0,0,0,.6); transition-delay: .15s; }
.kl_et_rp .panel .ph { font-family: 'Poppins', 'Noto Sans KR', sans-serif; font-size: 15px; font-weight: 700; color: var(--kl-red); }
.kl_et_rp .ways { margin-top: 14px; }
.kl_et_rp .ways li + li { border-top: 1px solid #e3e8f0; }
.kl_et_rp .ways a { position: relative; display: grid; grid-template-columns: 60px 1fr; gap: 2px 20px; align-items: center; margin: 0 -16px; padding: 24px 76px 24px 16px; border-radius: 16px; color: var(--kl-navy); transition: background .35s; }
.kl_et_rp .ways i { grid-row: 1 / 3; display: flex; align-items: center; justify-content: center; width: 60px; height: 60px; border-radius: 50%; background: var(--kl-sky); transition: background .35s; }
.kl_et_rp .ways i svg { width: 26px; height: 26px; fill: none; stroke: var(--kl-navy); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: stroke .35s; }
.kl_et_rp .ways span { font-size: 15px; color: #7a8699; }
.kl_et_rp .ways strong { font-family: 'Poppins', 'Noto Sans KR', sans-serif; font-size: 22px; font-weight: 600; letter-spacing: -0.01em; overflow-wrap: anywhere; }
.kl_et_rp .ways a:after { content: ''; position: absolute; right: 22px; top: 50%; width: 24px; height: 14px; margin-top: -7px; background: #b3bfcf;
	-webkit-mask: url(/img/cursor.png) center / 100% 100% no-repeat; mask: url(/img/cursor.png) center / 100% 100% no-repeat; transition: background .35s, transform .35s cubic-bezier(.2,.7,.2,1); }
.kl_et_rp .ways a:hover { background: var(--kl-sky); }
.kl_et_rp .ways a:hover i { background: var(--kl-navy); }
.kl_et_rp .ways a:hover i svg { stroke: #fff; }
.kl_et_rp .ways a:hover:after { background: var(--kl-red); transform: translateX(6px); }
@media (max-width: 1400px) {
	.kl_et_in .lead { font-size: 25px; }
	.kl_et_rp .kl_in { grid-template-columns: 1fr 1fr; gap: 0 5%; }
	.kl_et_rp .panel { padding: 32px 30px 22px; }
	.kl_et_rp .ways strong { font-size: 19px; }
}
@media (max-width: 1024px) {
	.kl_et_in { padding: 72px 0; }
	.kl_et_in .kl_in { grid-template-columns: 1fr; gap: 24px; }
	.kl_et_in .lead { font-size: 19px; line-height: 1.7; }
	.kl_et_in .cols { grid-template-columns: 1fr; gap: 16px; margin-top: 32px; padding-top: 28px; }
	.kl_et_in .cols p { font-size: 15px; line-height: 1.8; }

	.kl_et_pr { padding: 72px 0; }
	.kl_et_pr .cards { grid-template-columns: 1fr; gap: 10px; margin-top: 28px; }
	.kl_et_pr .cards > li { padding: 22px 22px 24px; }
	.kl_et_pr .cards > li.js-reveal:nth-child(n) { transition-delay: 0s; }
	.kl_et_pr .cards .ico { width: 48px; height: 48px; }
	.kl_et_pr .cards .ico svg { width: 22px; height: 22px; }
	.kl_et_pr .cards .no { font-size: 13px; }
	.kl_et_pr .cards .bot { margin-top: 18px; }
	.kl_et_pr .cards .en { font-size: 11px; }
	.kl_et_pr .cards h4 { margin-top: 4px; font-size: 19px; }
	.kl_et_pr .cards .bot ul li { padding: 5px 0 5px 16px; font-size: 14.5px; }
	.kl_et_pr .base { grid-template-columns: 1fr; gap: 16px; margin-top: 8px; padding: 24px 20px; }
	.kl_et_pr .base h4 { font-size: 20px; }
	.kl_et_pr .base ul { grid-template-columns: 1fr; gap: 6px; }
	.kl_et_pr .base li { min-height: 48px; font-size: 15px; }

	.kl_et_rp { padding: 80px 0; }
	.kl_et_rp .kl_in { grid-template-columns: 1fr; gap: 36px; }
	.kl_et_rp .safe { margin-top: 28px; }
	.kl_et_rp .safe li { gap: 14px; padding: 16px 0; }
	.kl_et_rp .safe i { width: 40px; height: 40px; }
	.kl_et_rp .safe i svg { width: 20px; height: 20px; }
	.kl_et_rp .safe p { font-size: 13.5px; }
	.kl_et_rp .safe strong { font-size: 15.5px; }
	.kl_et_rp .txt .kl_sub_btn { margin-top: 28px; }
	.kl_et_rp .panel { padding: 24px 20px 14px; border-radius: 18px; }
	.kl_et_rp .panel .ph { font-size: 13px; }
	.kl_et_rp .ways { margin-top: 6px; }
	.kl_et_rp .ways a { grid-template-columns: 40px 1fr; gap: 2px 12px; margin: 0 -10px; padding: 16px 30px 16px 10px; border-radius: 12px; }
	.kl_et_rp .ways i { width: 40px; height: 40px; }
	.kl_et_rp .ways i svg { width: 20px; height: 20px; }
	.kl_et_rp .ways span { font-size: 12px; }
	.kl_et_rp .ways strong { font-size: 14px; letter-spacing: -0.02em; }
	.kl_et_rp .ways a:after { right: 8px; width: 16px; height: 9px; margin-top: -4.5px; }
}
@media (prefers-reduced-motion: reduce) {
	.kl_et_in .lead em { background-size: 100% 100%; transition: none; }
	.kl_et_pr .cards > li { transform: none !important; }
}

/* =========================================================
   지속가능경영 > 환경·안전·보건 (sustain/ehs/index)
   ========================================================= */
.kl_ehs_hero .bg img { object-position: 72% 40%; }

/* ---------- 01 HSEQ 목표: 왼쪽 제목 + HSEQ 네 글자(스크롤 고정) / 오른쪽 목표 3가지 ---------- */
.kl_ehs_ob { padding: 160px 0 150px; }
.kl_ehs_ob .kl_in { display: grid; grid-template-columns: 34% 1fr; gap: 0 6%; align-items: start; }
.kl_ehs_ob .head { position: sticky; top: calc(var(--kl-header-h) + 48px); }
.kl_ehs_ob .word { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 60px; border-top: 1px solid var(--kl-line); }
.kl_ehs_ob .word li { padding-top: 24px; cursor: default; }
.kl_ehs_ob .word b { display: block; font-family: 'Poppins', sans-serif; font-size: 68px; font-weight: 700; line-height: 1; letter-spacing: -0.04em; color: var(--kl-navy); transition: color .4s, transform .5s cubic-bezier(.34,1.56,.64,1); }
.kl_ehs_ob .word span { display: block; margin-top: 14px; font-family: 'Poppins', sans-serif; font-size: 11px; font-weight: 600; letter-spacing: .12em; color: #8a9ab3; }
.kl_ehs_ob .word em { display: block; margin-top: 4px; font-style: normal; font-size: 15px; font-weight: 500; color: var(--kl-gray); }
.kl_ehs_ob .word li:hover b, .kl_ehs_ob .word li.is_hl b { color: var(--kl-red); transform: translateY(-6px); }  /* .hl 은 에디터 공통 CSS(display:none)와 겹쳐 is_hl 사용 */
.kl_ehs_ob .word li.is_hl em { color: var(--kl-red); }
/* 목표 3가지 카드: 아이콘 원 | 번호 · 제목 · 설명. 호버 시 남색(단색)이 아래에서 차오른다(:after) */
.kl_ehs_ob .goal { display: flex; flex-direction: column; gap: 16px; }
.kl_ehs_ob .goal > li { position: relative; display: grid; grid-template-columns: 92px 1fr; grid-template-rows: auto auto; gap: 0 34px; align-items: start; padding: 42px 48px 44px; border-radius: 24px; background: var(--kl-sky); overflow: hidden; isolation: isolate; cursor: default; }
.kl_ehs_ob .goal > li:after { content: ''; position: absolute; inset: 0; z-index: -2; background: var(--kl-navy); transform: translateY(101%); transition: transform .6s cubic-bezier(.65,0,.25,1); }
.kl_ehs_ob .goal > li:hover:after { transform: none; }
.kl_ehs_ob .goal > li.js-reveal:nth-child(2) { transition-delay: .1s; }
.kl_ehs_ob .goal > li.js-reveal:nth-child(3) { transition-delay: .2s; }
.kl_ehs_ob .goal .ico { grid-row: 1 / 3; display: flex; align-items: center; justify-content: center; width: 92px; height: 92px; border-radius: 50%; background: #fff; box-shadow: 0 14px 30px -18px rgba(19,50,95,.45); transition: background .45s, transform .6s cubic-bezier(.3,1.5,.5,1); }
.kl_ehs_ob .goal .ico svg { width: 40px; height: 40px; fill: none; stroke: var(--kl-navy); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; transition: stroke .45s; }
.kl_ehs_ob .goal > li:hover .ico { background: var(--kl-red); transform: rotate(-10deg) scale(1.06); }
.kl_ehs_ob .goal > li:hover .ico svg { stroke: #fff; }
/* 번호: 오른쪽 위 큰 숫자 (평소 옅게, 호버 시 흰색 반투명) */
.kl_ehs_ob .goal .no { position: absolute; right: 40px; top: 30px; font-family: 'Poppins', sans-serif; font-size: 64px; font-weight: 700; line-height: 1; letter-spacing: -0.04em; color: #dbe2ec; transition: color .45s; }
.kl_ehs_ob .goal > li:hover .no { color: rgba(255,255,255,.12); }
.kl_ehs_ob .goal .t { padding-top: 6px; padding-right: 80px; }
.kl_ehs_ob .goal .en { font-family: 'Poppins', sans-serif; font-size: 13px; font-weight: 600; letter-spacing: .14em; color: var(--kl-red); transition: color .45s; }
.kl_ehs_ob .goal h4 { margin-top: 8px; font-size: 30px; font-weight: 700; letter-spacing: -0.035em; color: var(--kl-navy); word-break: keep-all; transition: color .45s; }
.kl_ehs_ob .goal .d { grid-column: 2; margin-top: 14px; font-size: 18px; line-height: 1.8; letter-spacing: -0.02em; color: #4a5566; word-break: keep-all; transition: color .45s; }
.kl_ehs_ob .goal > li:hover .en { color: #ff8a8a; }
.kl_ehs_ob .goal > li:hover h4 { color: #fff; }
.kl_ehs_ob .goal > li:hover .d { color: rgba(255,255,255,.82); }

/* ---------- 02 HSEQ 방침: 왼쪽 고정(제목 + 현재 번호 · 진행 막대) / 오른쪽 카드 7장 (활성 카드만 선명) ---------- */
.kl_ehs_po { padding: 150px 0 160px; background: var(--kl-sky); }
.kl_ehs_po .po_wrap { display: grid; grid-template-columns: 34% 1fr; gap: 0 6%; align-items: start; }
.kl_ehs_po .po_side { position: sticky; top: calc(var(--kl-header-h) + 60px); }
.kl_ehs_po .po_cnt { margin-top: 64px; }
.kl_ehs_po .po_cnt .cur { font-family: 'Poppins', sans-serif; font-size: 120px; font-weight: 700; line-height: 1; letter-spacing: -0.05em; color: var(--kl-navy); }
.kl_ehs_po .po_cnt span { margin-left: 10px; font-family: 'Poppins', sans-serif; font-size: 24px; font-weight: 600; color: #9fb0c7; }
.kl_ehs_po .po_cnt .bar { display: block; height: 3px; margin-top: 26px; border-radius: 2px; background: #d5dde8; overflow: hidden; }
.kl_ehs_po .po_cnt .bar em { display: block; width: 14.3%; height: 100%; background: var(--kl-red); transition: width .6s cubic-bezier(.2,.7,.2,1); }
.kl_ehs_po .po_cnt .cur_en { margin-top: 18px; font-family: 'Poppins', sans-serif; font-size: 14px; font-weight: 600; letter-spacing: .14em; color: var(--kl-red); }
.kl_ehs_po .list { display: flex; flex-direction: column; gap: 14px; }
.kl_ehs_po .list > li { display: grid; grid-template-columns: 64px 1fr; gap: 0 28px; padding: 36px 40px 38px; border: 1px solid transparent; border-radius: 20px; background: rgba(255,255,255,.55);
	transition: opacity 1s, transform 1s cubic-bezier(.2,.7,.2,1), background-color .45s, border-color .45s, box-shadow .45s; }
.kl_ehs_po .list > li.on { border-color: #fff; background-color: #fff; box-shadow: 0 30px 60px -36px rgba(19,50,95,.45); }
/* 번호 원: 활성 시 빨강으로 채워지며 살짝 커짐 */
.kl_ehs_po .list .no { display: flex; align-items: center; justify-content: center; width: 64px; height: 64px; border: 2px solid #c8d1de; border-radius: 50%; box-sizing: border-box; font-family: 'Poppins', sans-serif; font-size: 20px; font-weight: 700; color: #9fb0c7; transition: background .45s, border-color .45s, color .45s, transform .5s cubic-bezier(.3,1.5,.5,1); }
.kl_ehs_po .list > li.on .no { border-color: var(--kl-red); background: var(--kl-red); color: #fff; transform: scale(1.06); }
/* 비활성 카드의 글은 흐리게, 활성 카드만 선명하게 */
.kl_ehs_po .list .t, .kl_ehs_po .list > li > ul { opacity: .5; transition: opacity .45s; }
.kl_ehs_po .list > li.on .t, .kl_ehs_po .list > li.on > ul { opacity: 1; }
.kl_ehs_po .list .t { padding-top: 6px; }
.kl_ehs_po .list .en { font-family: 'Poppins', sans-serif; font-size: 12.5px; font-weight: 600; letter-spacing: .14em; color: var(--kl-red); }
.kl_ehs_po .list h4 { margin-top: 8px; font-size: 27px; font-weight: 700; letter-spacing: -0.035em; color: var(--kl-navy); word-break: keep-all; }
.kl_ehs_po .list > li > ul { grid-column: 2; margin-top: 20px; padding-top: 20px; border-top: 1px solid #e3e8f0; }
.kl_ehs_po .list ul li { position: relative; padding: 4px 0 4px 20px; font-size: 17.5px; line-height: 1.75; letter-spacing: -0.02em; color: #2c3647; word-break: keep-all; }
.kl_ehs_po .list ul li:before { content: ''; position: absolute; left: 0; top: 17px; width: 7px; height: 7px; border-radius: 50%; background: var(--kl-red); }

/* ---------- 03 국제 기준: 사진 배경 + 반투명 카드 5장 ---------- */
/* ---------- 환경·안전·보건 02 환경품질관리: 왼쪽 제목·도입(고정) / 오른쪽 3블록 ---------- */
.kl_ehs_eq { padding: 150px 0 160px; }
.kl_ehs_eq .kl_in { display: grid; grid-template-columns: 34% 1fr; align-items: start; gap: 0 6%; }
.kl_ehs_eq .head { position: sticky; top: calc(var(--kl-header-h) + 50px); }
.kl_ehs_eq .head .kl_desc { font-size: 17px; word-break: keep-all; }
.kl_ehs_eq .blk { border-top: 2px solid var(--kl-navy); }
.kl_ehs_eq .blk > li { display: grid; grid-template-columns: 64px 1fr; column-gap: 28px; padding: 40px 0 42px; border-bottom: 1px solid var(--kl-line); }
.kl_ehs_eq .ico { grid-row: 1 / 4; display: flex; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: 50%; background: var(--kl-sky); }
.kl_ehs_eq .ico svg { width: 30px; height: 30px; fill: none; stroke: var(--kl-navy); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.kl_ehs_eq .en { font-family: 'Poppins', sans-serif; font-size: 13px; font-weight: 600; letter-spacing: .14em; color: var(--kl-red); }
.kl_ehs_eq h4 { margin-top: 6px; font-size: 26px; font-weight: 700; letter-spacing: -0.03em; color: var(--kl-navy); }
.kl_ehs_eq .blk ul { margin-top: 16px; }
.kl_ehs_eq .blk ul li { position: relative; padding-left: 14px; font-size: 17px; line-height: 1.75; letter-spacing: -0.02em; color: #4a5566; word-break: keep-all; }
.kl_ehs_eq .blk ul li + li { margin-top: 8px; }
.kl_ehs_eq .blk ul li:before { content: ''; position: absolute; left: 1px; top: .78em; width: 4px; height: 4px; border-radius: 50%; background: #9fb0c7; }

/* ---------- 환경·안전·보건 03 안전보건관리: 6가지 활동 카드 3×2 ---------- */
.kl_ehs_sf { padding: 150px 0 160px; background: var(--kl-sky); }
.kl_ehs_sf .head { display: grid; grid-template-columns: 1fr 1fr; align-items: end; gap: 0 6%; }
.kl_ehs_sf .head .kl_desc { margin-top: 0; }
.kl_ehs_sf .cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 70px; }
.kl_ehs_sf .cards > li { position: relative; padding: 42px 38px 44px; background: #fff; border-top: 3px solid transparent; transition: border-color .4s, box-shadow .4s, transform .4s; }
.kl_ehs_sf .cards > li:hover { border-top-color: var(--kl-red); box-shadow: 0 24px 44px -28px rgba(19,50,95,.45); transform: translateY(-4px); }
.kl_ehs_sf .cards > li.js-reveal:nth-child(3n+2) { transition-delay: .1s; }
.kl_ehs_sf .cards > li.js-reveal:nth-child(3n) { transition-delay: .2s; }
.kl_ehs_sf .cards > li.is_in { transition-delay: 0s; }
.kl_ehs_sf .no { position: absolute; right: 34px; top: 34px; font-family: 'Poppins', sans-serif; font-size: 40px; font-weight: 600; line-height: 1; color: #e3e9f1; }
.kl_ehs_sf .en { font-family: 'Poppins', sans-serif; font-size: 13px; font-weight: 600; letter-spacing: .14em; color: var(--kl-red); }
.kl_ehs_sf h4 { margin-top: 10px; font-size: 23px; font-weight: 700; letter-spacing: -0.03em; color: var(--kl-navy); }
.kl_ehs_sf .cards ul { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--kl-line); }
.kl_ehs_sf .cards ul li { position: relative; padding-left: 14px; font-size: 16px; line-height: 1.75; letter-spacing: -0.02em; color: #4a5566; word-break: keep-all; }
.kl_ehs_sf .cards ul li + li { margin-top: 8px; }
.kl_ehs_sf .cards ul li:before { content: ''; position: absolute; left: 1px; top: .78em; width: 4px; height: 4px; border-radius: 50%; background: #9fb0c7; }
/* 04 인증 현황: 기존 국제기준 카드(.std)를 3×2 로 + 인증기관·연도 */
.kl_ehs_st .std.cert { grid-template-columns: repeat(3, 1fr); }
.kl_ehs_st .std.cert li { min-height: 230px; }
.kl_ehs_st .std.cert strong { font-size: 34px; }
.kl_ehs_st .std.cert p { font-size: 17px; }
.kl_ehs_st .std em { margin-top: 18px; padding: 4px 12px; border: 1px solid rgba(255,255,255,.3); border-radius: 20px; font-family: 'Poppins', 'Noto Sans KR', sans-serif; font-size: 13px; font-style: normal; color: rgba(255,255,255,.8); transition: color .4s, border-color .4s; }
.kl_ehs_st .std li:hover em { border-color: #c8d1de; color: var(--kl-gray); }
@media (max-width: 1400px) {
	.kl_ehs_eq .kl_in { grid-template-columns: 1fr; gap: 40px; }
	.kl_ehs_eq .head { position: static; }
	.kl_ehs_sf .cards { grid-template-columns: 1fr 1fr; }
	.kl_ehs_sf .cards > li.js-reveal:nth-child(n) { transition-delay: 0s; }
}
@media (max-width: 1024px) {
	.kl_ehs_eq, .kl_ehs_sf { padding: 72px 0 80px; }
	.kl_ehs_eq .head .kl_desc { font-size: 15px; }
	.kl_ehs_eq .blk > li { grid-template-columns: 1fr; padding: 28px 0 30px; }
	.kl_ehs_eq .ico { grid-row: auto; width: 48px; height: 48px; margin-bottom: 14px; }
	.kl_ehs_eq .ico svg { width: 24px; height: 24px; }
	.kl_ehs_eq h4 { font-size: 20px; }
	.kl_ehs_eq .blk ul li, .kl_ehs_sf .cards ul li { font-size: 14px; }
	.kl_ehs_sf .head { grid-template-columns: 1fr; }
	.kl_ehs_sf .head .kl_desc { margin-top: 18px; }
	.kl_ehs_sf .cards { grid-template-columns: 1fr; gap: 14px; margin-top: 32px; }
	.kl_ehs_sf .cards > li { padding: 28px 22px 30px; }
	.kl_ehs_sf .no { right: 22px; top: 24px; font-size: 30px; }
	.kl_ehs_sf h4 { font-size: 19px; }
	.kl_ehs_st .std.cert { grid-template-columns: 1fr 1fr; }
	.kl_ehs_st .std.cert li { min-height: 170px; }
	.kl_ehs_st .std.cert strong { font-size: 20px; }
	.kl_ehs_st .std.cert p { font-size: 13px; }
	.kl_ehs_st .std em { margin-top: 10px; font-size: 11px; }
}

.kl_ehs_st { position: relative; padding: 140px 0 150px; background: var(--kl-navy-deep); color: #fff; overflow: hidden; }
.kl_ehs_st .bg { position: absolute; inset: 0; }
.kl_ehs_st .bg img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; }
.kl_ehs_st .bg:after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(13,38,72,.94) 0%, rgba(13,38,72,.82) 55%, rgba(13,38,72,.9) 100%); }
.kl_ehs_st .kl_in { position: relative; z-index: 1; }
.kl_ehs_st .head { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; }
.kl_ehs_st .kl_label, .kl_ehs_st .kl_tit { color: #fff; }
.kl_ehs_st .kl_label b { color: #ff6b6b; }
.kl_ehs_st .kl_desc { margin-top: 0; color: rgba(255,255,255,.85); }
.kl_ehs_st .std { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin-top: 72px; }
.kl_ehs_st .std li { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; min-height: 250px; padding: 34px 24px; border: 1px solid rgba(255,255,255,.2); background: rgba(255,255,255,.05); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); transition: opacity 1s, transform 1s cubic-bezier(.2,.7,.2,1), background .4s, border-color .4s; }
.kl_ehs_st .std li.js-reveal:nth-child(2) { transition-delay: .08s; }
.kl_ehs_st .std li.js-reveal:nth-child(3) { transition-delay: .16s; }
.kl_ehs_st .std li.js-reveal:nth-child(4) { transition-delay: .24s; }
.kl_ehs_st .std li.js-reveal:nth-child(5) { transition-delay: .32s; }
.kl_ehs_st .std li.is_in { transition-delay: 0s; }
.kl_ehs_st .std .cat { font-family: 'Poppins', sans-serif; font-size: 14px; font-weight: 600; letter-spacing: .14em; color: #ff8a8a; transition: color .4s; }
.kl_ehs_st .std strong { margin-top: 18px; font-family: 'Poppins', sans-serif; font-size: 42px; font-weight: 600; line-height: 1.15; letter-spacing: -0.03em; transition: color .4s; }
.kl_ehs_st .std p { margin-top: 14px; font-size: 20px; line-height: 1.5; letter-spacing: -0.02em; color: rgba(255,255,255,.8); word-break: keep-all; transition: color .4s; }
.kl_ehs_st .std li:hover { border-color: #fff; background: #fff; }
.kl_ehs_st .std li:hover .cat { color: var(--kl-red); }
.kl_ehs_st .std li:hover strong { color: var(--kl-navy); }
.kl_ehs_st .std li:hover p { color: #4a5566; }

@media (max-width: 1400px) {
	.kl_ehs_ob .word b { font-size: 52px; }
	.kl_ehs_po .po_wrap { grid-template-columns: 30% 1fr; gap: 0 5%; }
	.kl_ehs_po .po_cnt .cur { font-size: 96px; }
	.kl_ehs_po .list > li { padding: 32px 30px 34px; gap: 0 22px; }
	.kl_ehs_po .list h4 { font-size: 23px; }
	.kl_ehs_st .std { grid-template-columns: repeat(3, 1fr); }
	.kl_ehs_st .std strong { font-size: 36px; }
	.kl_ehs_st .std p { font-size: 18px; }
}
@media (max-width: 1024px) {
	.kl_ehs_ob { padding: 72px 0; }
	.kl_ehs_ob .kl_in { grid-template-columns: 1fr; gap: 40px; }
	.kl_ehs_ob .head { position: static; }
	.kl_ehs_ob .word { margin-top: 32px; }
	.kl_ehs_ob .word li { padding-top: 16px; }
	.kl_ehs_ob .word b { font-size: 40px; }
	.kl_ehs_ob .word span { font-size: 9px; letter-spacing: .06em; }
	.kl_ehs_ob .word em { font-size: 13px; }
	.kl_ehs_ob .goal { gap: 10px; }
	.kl_ehs_ob .goal > li { grid-template-columns: 52px 1fr; gap: 0 16px; padding: 24px 20px 26px; border-radius: 16px; }
	.kl_ehs_ob .goal > li.js-reveal:nth-child(n) { transition-delay: 0s; }
	.kl_ehs_ob .goal .ico { grid-row: auto; width: 52px; height: 52px; }
	.kl_ehs_ob .goal .ico svg { width: 24px; height: 24px; }
	.kl_ehs_ob .goal .no { right: 18px; top: 18px; font-size: 34px; }
	.kl_ehs_ob .goal .t { padding: 2px 44px 0 0; }
	.kl_ehs_ob .goal .en { font-size: 11px; }
	.kl_ehs_ob .goal h4 { margin-top: 4px; font-size: 20px; }
	.kl_ehs_ob .goal .d { grid-column: 1 / -1; margin-top: 14px; font-size: 15px; line-height: 1.75; }

	.kl_ehs_po { padding: 72px 0; }
	/* 모바일: 고정 해제 · 번호 카운터 숨김, 카드는 모두 선명하게 */
	.kl_ehs_po .po_wrap { grid-template-columns: 1fr; }
	.kl_ehs_po .po_side { position: static; }
	.kl_ehs_po .po_cnt { display: none; }
	.kl_ehs_po .list { gap: 10px; margin-top: 32px; }
	.kl_ehs_po .list > li { grid-template-columns: 44px 1fr; gap: 0 14px; padding: 22px 18px 24px; border-radius: 14px; background: #fff; }
	.kl_ehs_po .list .t, .kl_ehs_po .list > li > ul { opacity: 1; }
	.kl_ehs_po .list .no { width: 44px; height: 44px; font-size: 15px; border-color: var(--kl-red); color: var(--kl-red); }
	.kl_ehs_po .list > li.on .no { transform: none; }
	.kl_ehs_po .list .t { padding-top: 0; }
	.kl_ehs_po .list .en { font-size: 11px; }
	.kl_ehs_po .list h4 { margin-top: 4px; font-size: 19px; }
	.kl_ehs_po .list > li > ul { grid-column: 1 / -1; margin-top: 14px; padding-top: 14px; }
	.kl_ehs_po .list ul li { padding: 3px 0 3px 16px; font-size: 15px; }
	.kl_ehs_po .list ul li:before { top: 13px; width: 5px; height: 5px; }

	.kl_ehs_st { padding: 80px 0; }
	.kl_ehs_st .head { display: block; }
	.kl_ehs_st .kl_desc { margin-top: 20px; }
	.kl_ehs_st .std { grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 36px; }
	.kl_ehs_st .std li { min-height: 160px; padding: 22px 14px; }
	.kl_ehs_st .std li.js-reveal:nth-child(n) { transition-delay: 0s; }
	.kl_ehs_st .std .cat { font-size: 11px; letter-spacing: .1em; }
	.kl_ehs_st .std strong { margin-top: 10px; font-size: 26px; }
	.kl_ehs_st .std p { margin-top: 8px; font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) {
	.kl_ehs_ob .word li:hover b { transform: none; }
}


/* =========================================================
   개인정보처리방침 (member/policy)
   본문은 관리자 에디터 HTML(p > font > span 인라인 스타일)이라
   글꼴·크기를 여기서 덮어써 사이트 서체로 통일한다.
   ========================================================= */
/* 상단: 고정 헤더 아래 흰 배경 제목 영역 */
.kl_policy .top { padding: calc(var(--kl-header-h) + 70px) 0 64px; background: var(--kl-sky); border-bottom: 1px solid var(--kl-line); }
.kl_policy .path { display: flex; align-items: center; gap: 14px; margin-bottom: 56px; font-family: 'Poppins', sans-serif; font-size: 15px; font-weight: 500; color: #8a9ab3; }
.kl_policy .path a { color: inherit; transition: color .3s; }
.kl_policy .path a:hover { color: var(--kl-navy); }
.kl_policy .path i { display: block; width: 7px; height: 7px; margin-left: -4px; border: solid #b3bfcf; border-width: 1.5px 1.5px 0 0; transform: rotate(45deg); }
.kl_policy .path strong { font-weight: 600; color: var(--kl-navy); }

/* 본문: 읽기 좋은 폭(1000px)으로 가운데 */
.kl_policy .body { padding: 90px 0 150px; }
.kl_policy .doc { max-width: 1000px; margin: 0 auto; font-size: 17px; line-height: 1.85; letter-spacing: -0.02em; color: #4a5566; word-break: keep-all; overflow-wrap: anywhere; }
.kl_policy .doc * { font-family: inherit !important; }
.kl_policy .doc p { margin: 0; }
.kl_policy .doc b, .kl_policy .doc strong { font-weight: 700; color: var(--kl-ink); }
/* 에디터가 넣은 빈 줄(p > br)은 간격을 제목 쪽에서 주므로 숨긴다 */
.kl_policy .doc p:has(> br:only-child), .kl_policy .doc p:has(> font:only-child > br:only-child) { display: none; }
/* 18px 로 입력된 줄 = 장·조 제목 */
.kl_policy .doc span[style*="font-size: 18px"], .kl_policy .doc span[style*="font-size:18px"] {
	display: block; margin-top: 44px; padding-top: 0; font-size: 22px !important; font-weight: 700; line-height: 1.5; letter-spacing: -0.03em; color: var(--kl-navy);
}
.kl_policy .doc > p:first-child span[style*="font-size"] { margin-top: 0; }
/* 장 제목([제1장 …])은 빨간 막대로 구분 */
.kl_policy .doc span.kl_pol_ch { display: block; margin-top: 72px; padding-top: 28px; border-top: 2px solid var(--kl-navy); font-size: 15px !important; font-family: 'Poppins', sans-serif; font-weight: 600; letter-spacing: .04em; color: var(--kl-red); }
.kl_policy .doc > p:first-child span.kl_pol_ch { margin-top: 0; }
.kl_policy .doc span.kl_pol_after { margin-top: 20px; }
.kl_policy .doc table { width: 100%; margin: 16px 0; border-collapse: collapse; border-top: 2px solid var(--kl-navy); font-size: 15px; }
.kl_policy .doc th, .kl_policy .doc td { padding: 12px 14px; border-bottom: 1px solid var(--kl-line); text-align: left; vertical-align: top; }
.kl_policy .doc th { background: var(--kl-sky); color: var(--kl-navy); font-weight: 600; }

@media (max-width: 1024px) {
	.kl_policy .top { padding: calc(var(--kl-header-h) + 36px) 0 40px; }
	.kl_policy .path { margin-bottom: 32px; font-size: 13px; }
	.kl_policy .body { padding: 50px 0 90px; }
	.kl_policy .doc { font-size: 15px; line-height: 1.8; }
	.kl_policy .doc span[style*="font-size: 18px"], .kl_policy .doc span[style*="font-size:18px"] { margin-top: 32px; font-size: 18px !important; }
	.kl_policy .doc span.kl_pol_ch { margin-top: 56px; padding-top: 20px; font-size: 13px !important; }
	.kl_policy .doc table { display: block; overflow-x: auto; font-size: 13px; }
}