@charset "utf-8";
/* =========================================================
   K-LNG 메인페이지 전용 (www/index.jsp)
   모든 선택자는 .kl_main 아래로 스코프를 한정한다.
   색상 토큰(--kl-*)은 kl_layout.css 에 정의.
   ========================================================= */
/* basic.css 의 html, body { overflow-x: hidden } 은 body 를 스크롤 컨테이너로 만들어 sticky 를 막는다.
   메인에서만 clip 으로 바꾼다 (가로 넘침 차단 효과는 같음) */
html, body { overflow-x: clip; }
.kl_main { background: #fff; overflow: hidden; overflow: clip; }  /* clip: 사업영역 sticky 고정이 동작하도록 (hidden 은 sticky 를 막는다) */
.kl_main .kl_in { max-width: 1600px; margin: 0 auto; padding: 0 var(--kl-gutter); box-sizing: content-box; }
.kl_main .kl_tit {
	font-size: 48px; font-weight: 700; line-height: 1.28; letter-spacing: -0.035em; color: var(--kl-navy);
}
.kl_main .kl_desc { font-size: 18px; line-height: 1.75; color: var(--kl-gray); letter-spacing: -0.02em; }

/* 텍스트 링크 (아이콘 없이 밑줄만) */
.kl_main .kl_link, .kl_main .kl_biz_pn .more {
	position: relative; display: inline-block; padding-bottom: 6px;
	font-size: 16px; font-weight: 500; color: var(--kl-navy);
}
.kl_main .kl_link:after, .kl_main .kl_biz_pn .more:after {
	content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px;
	background: currentColor; transform-origin: right; transition: transform .4s, background .3s;
}
.kl_main .kl_link:hover:after, .kl_main .kl_biz_pn:hover .more:after { animation: klLine .7s; }
@keyframes klLine { 0% { transform: scaleX(1); transform-origin: right; } 49% { transform: scaleX(0); transform-origin: right; } 51% { transform: scaleX(0); transform-origin: left; } 100% { transform: scaleX(1); transform-origin: left; } }

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

/* ---------- 메인비주얼 ---------- */
.kl_main .kl_hero {
	--hero-p: 0;
	/* 항상 화면 전체 (모바일 주소창 변화까지 반영하는 100dvh 우선) */
	position: relative; width: 100%; height: 100vh; height: 100dvh; min-height: 560px; overflow: hidden; background: #0f3a6b;
}
.kl_main .kl_hero_slider, .kl_main .kl_hero_slider .swiper-slide { height: 100%; }
.kl_main .kl_hero_bg { position: absolute; inset: 0; overflow: hidden; }
/* 문구 가독성: 영상 색 보정 없이, 문구가 놓인 왼쪽 아래 + 메뉴가 놓인 맨 위만 옅게 받친다 */
.kl_main .kl_hero_bg:after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(9,34,70,.42) 0%, rgba(9,34,70,0) 18%), linear-gradient(20deg, rgba(9,34,70,.55) 0%, rgba(9,34,70,.2) 35%, rgba(9,34,70,0) 55%); pointer-events: none; }
.kl_main .kl_hero_bg img, .kl_main .kl_hero_bg video {
	display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%;
	/* 정지 상태는 원본 배율(1) 그대로 — 확대는 스크롤할 때만 */
	transform: scale(calc(1 + var(--hero-p) * .1));
	animation: klHeroIn 1.6s ease-out both;
}
@keyframes klHeroIn { from { opacity: 0; } to { opacity: 1; } }
.kl_main .kl_hero_txt {
	position: absolute; left: 0; right: 0; bottom: 15vh; z-index: 3;
	max-width: 1600px; margin: 0 auto; padding: 0 var(--kl-gutter); box-sizing: content-box; color: #fff;
	opacity: calc(1 - var(--hero-p) * 1.6);
	transform: translateY(calc(var(--hero-p) * -80px));
}
.kl_main .kl_hero_txt h2 {
	font-family: 'Poppins', 'Noto Sans KR', sans-serif;   /* 영문 카피 */
	font-size: 96px; font-weight: 500; line-height: 1.1; letter-spacing: -0.035em;
	text-shadow: 0 2px 6px rgba(5,25,55,.35), 0 4px 30px rgba(5,25,55,.45);
	animation: klUp 1.2s .4s cubic-bezier(.2,.7,.2,1) both;
}
.kl_main .kl_hero_txt p {
	max-width: 500px; margin-top: 26px; font-size: 19px; line-height: 1.7; color: #fff; text-shadow: 0 1px 4px rgba(5,25,55,.5), 0 2px 18px rgba(5,25,55,.45);
	animation: klUp 1.2s .65s cubic-bezier(.2,.7,.2,1) both;
}
@keyframes klUp { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: none; } }

/* 슬라이드 진행 막대 (2장 이상일 때) */
.kl_main .kl_hero_bar {
	position: absolute; left: var(--kl-gutter); bottom: 7vh; z-index: 3; width: 160px; height: 2px; background: rgba(255,255,255,.3);
}
.kl_main .kl_hero_bar:after { content: ''; position: absolute; left: 0; top: 0; height: 100%; width: 0; background: #fff; }
.kl_main .kl_hero_bar.is_run:after { animation: klBar 6s linear forwards; }
@keyframes klBar { to { width: 100%; } }

/* 스크롤 유도선 */
.kl_main .kl_hero_scroll {
	position: absolute; right: var(--kl-gutter); bottom: 0; z-index: 3; width: 1px; height: 88px; background: rgba(255,255,255,.3); overflow: hidden;
}
.kl_main .kl_hero_scroll:after {
	content: ''; position: absolute; left: 0; top: -40%; width: 100%; height: 40%; background: #fff;
	animation: klScroll 2.2s ease-in-out infinite;
}
@keyframes klScroll { to { top: 100%; } }

/* ---------- 회사소개 ---------- */
/* 남색 바탕 + 가는 세로 격자선(4등분) + 오른쪽 위 청색 빛 — 흰 섹션들 사이에서 무게중심을 잡는다 */
.kl_main .kl_intro {
	position: relative; padding: 150px 0 130px; overflow: hidden; color: #fff;
	/* 밤바다 사진(main_intro_bg.jpg)을 남색 막으로 덮어 은은하게. 위·아래는 더 진하게 덮어 이웃 섹션과 자연스럽게 이어진다 */
	background:
		linear-gradient(180deg, rgba(18,48,88,.86) 0%, rgba(24,60,108,.58) 35%, rgba(24,62,110,.62) 70%, rgba(18,52,96,.88) 100%),
		url('/img/main/main_intro_bg.jpg?v=20261022') center 40% / cover no-repeat,
		var(--kl-navy-deep);
}
.kl_main .kl_intro:before {
	content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
	background:
		radial-gradient(45% 55% at 90% 0%, rgba(111,155,194,.24), rgba(111,155,194,0) 70%),
		linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px) 0 0 / 25% 100%;
}
/* 워터마크: 로고를 흰색으로 아주 옅게 — 핵심가치 줄 뒤 오른쪽 아래 */
.kl_main .kl_intro:after {
	content: ''; position: absolute; z-index: 0; pointer-events: none;
	right: max(var(--kl-gutter), calc(50% - 700px)); bottom: -24px; width: min(860px, 58%); aspect-ratio: 570 / 133;
	background: url('/img/main/logo_navy.png?v=20261022') right bottom / contain no-repeat;
	filter: brightness(0) invert(1); opacity: .04;
}
.kl_main .kl_intro > .kl_in { position: relative; z-index: 1; }

/* 1단: 스테이트먼트(왼쪽 넓게) ↔ 헤드라인·소개·링크(오른쪽), 아래 끝선 맞춤 */
.kl_main .kl_intro_top { display: grid; grid-template-columns: 1.2fr 1fr; gap: 100px; align-items: end; }
.kl_main .kl_intro_label {
	display: flex; align-items: center; gap: 14px; margin-bottom: 30px;
	font-family: 'Poppins', sans-serif; font-size: 18px; font-weight: 500; letter-spacing: .18em; color: #8fb8de;
}
/* 빨간 포인트: 로고의 빨강을 작은 사각 마크로 */
.kl_main .kl_intro_label:before { content: ''; flex: 0 0 auto; width: 9px; height: 9px; background: var(--kl-red); }
.kl_main .kl_intro_en {
	font-family: 'Poppins', 'Noto Sans KR', sans-serif; font-size: 46px; font-weight: 400; line-height: 1.4; letter-spacing: -0.035em; color: #fff; word-break: keep-all;
}
/* 강조 구절: 히어로 바다에서 가져온 맑은 청색 (Noto Sans KR 은 600 이 없어 700) */
.kl_main .kl_intro_en em { font-style: normal; font-weight: 700; color: #9fd3ff; }   /* 남색 배경 위에서 또렷한 밝은 하늘색 (기존 #8fb8de 는 회색빛이라 묻힘) */
.kl_main .kl_intro_en b { font-weight: inherit; }
.kl_main .kl_intro_h { font-size: 27px; font-weight: 300; line-height: 1.45; letter-spacing: -0.04em; color: #fff; word-break: keep-all; }
.kl_main .kl_intro_h b { font-weight: 700; }
.kl_main .kl_intro_desc { margin-top: 26px; padding-top: 26px; border-top: 1px solid rgba(255,255,255,.16); }
.kl_main .kl_intro_desc p { font-size: 17px; line-height: 1.8; letter-spacing: -0.03em; color: rgba(255,255,255,.6); }
.kl_main .kl_intro_desc p + p { margin-top: 16px; }
.kl_main .kl_intro_desc b, .kl_main .kl_intro_desc em { font-style: normal; font-weight: 500; color: #fff; }
/* 링크: 글자 + 화살표 원 (공지 카드와 같은 모양) */
.kl_main .kl_intro_more { display: inline-flex; align-items: center; gap: 22px; margin-top: 40px; font-size: 21px; font-weight: 500; color: #fff; }
.kl_main .kl_intro_more .txt { display: inline-flex; align-items: center; gap: 10px; }
.kl_main .kl_intro_more .logo { display: block; height: 29px; width: auto; }
.kl_main .kl_intro_more .arr {
	position: relative; flex: 0 0 auto; width: 58px; height: 58px; border: 1px solid rgba(255,255,255,.35); border-radius: 50%; color: #fff;
	transition: background .4s, border-color .4s, color .4s, transform .4s;
}
/* 화살표 아이콘(/img/cursor.png)을 마스크로 써서 글자색(currentColor)을 따른다. 이미지 비율 473:264 (여백 포함) */
.kl_main .kl_intro_more .arr:before { content: ''; position: absolute; top: 50%; left: 50%; width: 36px; height: 20px; margin: -10px 0 0 -18px; background: currentColor; -webkit-mask: url(/img/cursor.png) center / 100% 100% no-repeat; mask: url(/img/cursor.png) center / 100% 100% no-repeat; }
.kl_main .kl_intro_more:hover .arr { background: #fff; border-color: #fff; color: var(--kl-navy); transform: translateX(4px); }

/* 2단: 큰 선박 사진 + 현장 사진 (같은 높이로 나란히) */
.kl_main .kl_intro_media { display: grid; grid-template-columns: 1.9fr 1fr; gap: 20px; height: 520px; margin-top: 90px; }
.kl_main .kl_intro .ph { position: relative; }
/* 아래쪽만 어둡게 받쳐 캡션을 읽히게 */
.kl_main .kl_intro .ph:after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(9,34,70,.55) 0%, rgba(9,34,70,0) 40%); }
.kl_main .kl_intro .ph .cap {
	position: absolute; left: 34px; bottom: 30px; z-index: 1;
	font-family: 'Poppins', sans-serif; font-size: 14px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: rgba(255,255,255,.88);
}

/* 3단: 핵심가치 3열 — 윗선 위에 짧은 청색 선으로 각 칸의 시작을 표시 */
.kl_main .kl_intro_keys { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 80px; border-top: 1px solid rgba(255,255,255,.18); }
/* 칸마다 가운데 정렬 — 윗선 위 짧은 청색 선도 칸 가운데 */
.kl_main .kl_intro_keys li { position: relative; padding: 34px 24px 36px; text-align: center; }
.kl_main .kl_intro_keys li + li { border-left: 1px solid rgba(255,255,255,.1); }
.kl_main .kl_intro_keys li:before { content: ''; position: absolute; top: -1px; left: 50%; z-index: 1; width: 48px; height: 2px; background: var(--kl-red); transform: translateX(-50%); transition: width .5s cubic-bezier(.22,.61,.36,1); }
/* 호버 배경: 위에서 아래로 옅어지는 빛 (평소엔 투명) */
.kl_main .kl_intro_keys li:after { content: ''; position: absolute; inset: 0; background: rgba(143,184,222,.08); opacity: 0; transition: opacity .45s ease; pointer-events: none; }
.kl_main .kl_intro_keys .no, .kl_main .kl_intro_keys p { position: relative; z-index: 1; display: block; transition: color .35s ease, transform .45s cubic-bezier(.22,.61,.36,1); }
.kl_main .kl_intro_keys .no { font-family: 'Poppins', sans-serif; font-size: 16px; font-weight: 500; letter-spacing: .1em; color: #8fb8de; }
.kl_main .kl_intro_keys p { margin-top: 18px; font-family: 'Poppins', 'Noto Sans KR', sans-serif; font-size: 29px; font-weight: 400; line-height: 1.45; letter-spacing: -0.01em; color: #fff; }
@media (hover: hover) {
	.kl_main .kl_intro_keys li:hover:before { width: 100%; }
	.kl_main .kl_intro_keys li:hover:after { opacity: 1; }
	.kl_main .kl_intro_keys li:hover .no { color: #ff6b6b; transform: translateY(-4px); }
	.kl_main .kl_intro_keys li:hover p { transform: translateY(-6px); }
}

/* 사진 공통 + 등장: 아래에서 위로 걷히며 나타나고, 안쪽 사진은 살짝 줄어들며 자리를 잡는다 */
.kl_main .kl_intro .ph { display: block; overflow: hidden; }
.kl_main .kl_intro .ph img { display: block; width: 100%; height: 100%; object-fit: cover; }
.kl_main .kl_intro .ph.js-reveal { opacity: 1; transform: none; clip-path: inset(100% 0 0 0); transition: clip-path 1.3s cubic-bezier(.7,0,.2,1); }
.kl_main .kl_intro .ph.js-reveal.is_in { clip-path: inset(0 0 0 0); }
.kl_main .kl_intro .ph_s.js-reveal { transition-delay: .3s; }
.kl_main .kl_intro .ph.js-reveal img { transform: scale(1.18); transition: transform 1.8s cubic-bezier(.2,.7,.2,1); }
.kl_main .kl_intro .ph.js-reveal.is_in img { transform: scale(1); }

/* ---------- 사업영역 ---------- */
/* 왼쪽(제목 · LNG/LPG 탭 · 설명) + 오른쪽(큰 선박 사진). 탭/스크롤로 .is_on 이 바뀌면 사진과 설명이 함께 교체된다.
   스크롤 고정 없이 일반 섹션으로 지나가고, 6초마다 자동으로 LNG ↔ LPG 가 바뀐다 (아래 .is_auto) */
.kl_main .kl_biz { position: relative; padding: 140px 0; }
.kl_main .kl_biz_wrap { display: grid; grid-template-columns: minmax(0, 38%) minmax(0, 1fr); align-items: center; gap: 0 6%; }
.kl_main .kl_biz_head .kl_desc { margin-top: 22px; font-size: 19px; word-break: keep-all; }
/* 탭 */
.kl_main .kl_biz_tab { display: flex; margin-top: 56px; border-bottom: 1px solid var(--kl-line); }
.kl_main .kl_biz_tab button {
	position: relative; flex: 1; display: flex; align-items: baseline; gap: 12px; padding: 0 0 18px; border: 0; background: none; cursor: pointer;
	font-family: 'Poppins', sans-serif; font-size: 26px; font-weight: 600; letter-spacing: -0.01em; color: #a3aebd; text-align: left; transition: color .4s;
}
.kl_main .kl_biz_tab button b { font-size: 13px; font-weight: 500; letter-spacing: .06em; color: inherit; }
.kl_main .kl_biz_tab button i { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--kl-navy); transform-origin: left; transform: scaleX(0); transition: transform .5s cubic-bezier(.2,.7,.2,1); }
.kl_main .kl_biz_tab button:hover { color: var(--kl-navy); }
.kl_main .kl_biz_tab button.is_on { color: var(--kl-navy); }
.kl_main .kl_biz_tab button.is_on b { color: var(--kl-red); }
.kl_main .kl_biz_tab button.is_on i { transform: scaleX(1); }
/* 설명 패널: 두 개를 같은 칸에 겹쳐 두고(높이는 긴 쪽 기준) .is_on 만 한 줄씩 밀려 올라온다 */
.kl_main .kl_biz_pns { display: grid; margin-top: 48px; }
.kl_main .kl_biz_pn { grid-area: 1 / 1; display: block; visibility: hidden; pointer-events: none; transition: visibility 0s .6s; }
.kl_main .kl_biz_pn.is_on { visibility: visible; pointer-events: auto; transition: none; }
.kl_main .kl_biz_pn .en { display: flex; align-items: flex-end; gap: 24px; margin-bottom: 26px; }
.kl_main .kl_biz_pn .en .ch { display: flex; overflow: hidden; padding-bottom: .02em; line-height: .84; }
.kl_main .kl_biz_pn .en i {
	display: block; font-style: normal; font-family: 'Poppins', sans-serif; font-size: clamp(90px, 7vw, 140px); font-weight: 700; letter-spacing: -0.05em; color: var(--kl-navy);
	transform: translate3d(0, 105%, 0) rotate(10deg); transform-origin: left bottom; transition: transform .7s cubic-bezier(.6,0,.4,1);
}
.kl_main .kl_biz_pn .en em {
	display: block; padding-bottom: .5em; font-style: normal; font-family: 'Poppins', sans-serif; font-size: 13px; font-weight: 500;
	line-height: 1.6; letter-spacing: .22em; text-transform: uppercase; color: var(--kl-gray); opacity: 0; transition: opacity .4s;
}
.kl_main .kl_biz_pn .ln { display: block; overflow: hidden; }
.kl_main .kl_biz_pn .ln > * { display: block; transform: translate3d(0, 110%, 0); transition: transform .6s cubic-bezier(.6,0,.4,1); }
.kl_main .kl_biz_pn strong { font-size: 36px; font-weight: 700; letter-spacing: -0.03em; color: var(--kl-navy); }
.kl_main .kl_biz_pn .desc { max-width: 560px; margin-top: 14px; font-size: 18px; line-height: 1.75; letter-spacing: -0.02em; color: #4a5566; word-break: keep-all; }
.kl_main .kl_biz_pn .ln > .more { display: inline-block; margin-top: 30px; }
/* 켜질 때: 나갈 때보다 조금 늦게(.3s) 시작해 앞 패널이 내려간 뒤 올라온다 */
.kl_main .kl_biz_pn.is_on .en i, .kl_main .kl_biz_pn.is_on .ln > * { transform: none; transition: transform 1.1s .3s cubic-bezier(.2,.75,.2,1); }
.kl_main .kl_biz_pn.is_on .en em { opacity: 1; transition: opacity .8s .6s; }
.kl_main .kl_biz_pn.is_on .en i:nth-child(2) { transition-delay: .37s; }
.kl_main .kl_biz_pn.is_on .en i:nth-child(3) { transition-delay: .44s; }
.kl_main .kl_biz_pn.is_on .ln:nth-of-type(2) > * { transition-delay: .42s; }
.kl_main .kl_biz_pn.is_on .ln:nth-of-type(3) > * { transition-delay: .52s; }
.kl_main .kl_biz_pn.is_on .ln:nth-of-type(4) > * { transition-delay: .62s; }
/* 사진 */
.kl_main .kl_biz_media { position: relative; display: block; height: min(72vh, 780px); min-height: 520px; overflow: hidden; background: var(--kl-navy-deep); }
.kl_main .kl_biz_media .ph { position: absolute; inset: 0; clip-path: inset(0 0 0 100%); transition: clip-path 0s 1.3s; }
.kl_main .kl_biz_media .ph img { display: block; width: 100%; height: 100%; object-fit: cover; transform: scale(1.15); transition: transform 0s 1.3s; }
.kl_main .kl_biz_media .ph.is_on { z-index: 1; clip-path: inset(0 0 0 0); transition: clip-path 1.2s cubic-bezier(.7,0,.2,1); }
.kl_main .kl_biz_media .ph.is_on img { transform: scale(1); transition: transform 2s cubic-bezier(.2,.7,.2,1); }
.kl_main .kl_biz_media:hover .ph.is_on img { transform: scale(1.04); }
.kl_main .kl_biz_media .ph:after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(12,38,76,.45) 0%, rgba(12,38,76,0) 30%); }
.kl_main .kl_biz_media .num { position: absolute; right: 32px; bottom: 28px; z-index: 2; font-family: 'Poppins', sans-serif; font-size: 16px; font-weight: 500; letter-spacing: .08em; color: rgba(255,255,255,.7); }
.kl_main .kl_biz_media .num b { font-weight: 600; color: #fff; }

/* ===== 자동 전환 (.is_auto): 켜진 탭 아래 선이 6초 동안 차오르고, 다 차면 JS(animationend)가 다음 사업으로 넘긴다.
   .is_pause(마우스 올림 · 키보드 포커스 · 화면 밖)일 때는 선이 멈춰 전환도 함께 멈춘다 ===== */
.kl_main .kl_biz.is_auto .kl_biz_tab button.is_on i { transform: scaleX(0); transition: none; animation: klBizBar 6s linear forwards; }
.kl_main .kl_biz.is_pause .kl_biz_tab button i { animation-play-state: paused; }
@keyframes klBizBar { to { transform: scaleX(1); } }

/* ---------- 선대 현황 ---------- */
.kl_main .kl_fleet { position: relative; }
.kl_main .kl_fleet_visual { position: relative; height: 680px; overflow: hidden; color: #fff; }
.kl_main .kl_fleet_visual .bg { position: absolute; left: 0; right: 0; top: -8%; bottom: -8%; will-change: transform; }
.kl_main .kl_fleet_visual .bg img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.kl_main .kl_fleet_visual .bg:after {
	content: ''; position: absolute; inset: 0;
	/* 사진 속 바다색(청회색)으로 덮어 아래 면과 이어지게 한다 */
	background:
		linear-gradient(270deg, rgba(14,36,64,.55) 0%, rgba(14,36,64,.15) 30%, rgba(14,36,64,0) 50%),
		linear-gradient(0deg, rgba(14,36,64,.5) 0%, rgba(14,36,64,0) 40%);
}
.kl_main .kl_fleet_deco span { position: absolute; top: 0; bottom: 0; right: 0; pointer-events: none; }
/* 선박이 오른쪽에 있어 사선 면은 화면 끝에 얇게만 둔다 (파란 기 없이 바다 톤) */
.kl_main .kl_fleet_deco .d1 { width: 24%; background: rgba(160,186,206,.16); clip-path: polygon(78% 0, 100% 0, 100% 100%, 0 100%); }
.kl_main .kl_fleet_deco .d2 { width: 14%; background: rgba(255,255,255,.08); clip-path: polygon(90% 0, 100% 0, 100% 100%, 30% 100%); }
.kl_main .kl_fleet_visual .kl_in { position: relative; z-index: 2; height: 100%; }
/* 선박이 사진 왼쪽~가운데를 차지하므로 제목은 오른쪽 위 빈 바다 면에 둔다 */
.kl_main .kl_fleet_head { position: absolute; right: var(--kl-gutter); top: 150px; text-align: right; }
.kl_main .kl_fleet_head .kl_tit { color: #fff; font-weight: 300; font-size: 56px; }
.kl_main .kl_fleet_head .kl_tit b { font-weight: 700; }
.kl_main .kl_fleet_head .kl_desc { margin-top: 18px; color: rgba(255,255,255,.88); }

/* 사진 아래 면 — 가운데가 아래로 꺾인 V 자 윗선.
   효과 없이 색만으로 바다를 표현: 사진 경계의 짙은 바다색에서 시작해 맑은 바다 청색을 거쳐 깊은 바다 남청으로 */
.kl_main .kl_fleet_body {
	position: relative; z-index: 3; margin-top: -150px; padding: 196px 0 110px;
	background: linear-gradient(180deg, #1b4565 0%, #13557e 38%, #0f4a70 68%, #0b3656 100%);
	clip-path: polygon(0 0, 50% 150px, 100% 0, 100% 100%, 0 100%);
}

/* 배경 포인트: 섹션 맨 아래 띠에 로고를 크게, 아주 옅게 (전체가 보이도록 가운데 정렬 · 폭 제한) */
.kl_main .kl_fleet_body { padding-bottom: 240px; }
.kl_main .kl_fleet_mark {
	position: absolute; left: 50%; bottom: 72px; z-index: 0; width: min(560px, 60%);
	transform: translateX(-50%); opacity: .09; pointer-events: none; line-height: 0;
}
.kl_main .kl_fleet_mark img { display: block; width: 100%; height: auto; }
.kl_main .kl_fleet_body > .kl_in { position: relative; z-index: 1; }
/* 선박 카드 슬라이더 — 컨테이너 왼쪽 선에서 시작해 오른쪽 화면 끝까지 흘러나간다 (.kl_main overflow:hidden 이 자름) */
.kl_main .kl_fleet_slider { overflow: visible; }
.kl_main .kl_vessel {
	display: block; overflow: hidden; color: #fff;
	/* 배경(맑은 바다 청색)보다 한 톤 깊은 남청색 카드 — 배경과 살짝 구분되게 */
	background: linear-gradient(170deg, #0f3d62 0%, #0c3354 100%);
	box-shadow: inset 0 0 0 1px rgba(255,255,255,.1), 0 30px 50px -30px rgba(3,15,30,.7);
	transition: box-shadow .4s, transform .5s cubic-bezier(.2,.7,.2,1);
}
.kl_main .kl_vessel:hover { transform: translateY(-6px); box-shadow: inset 0 0 0 1px rgba(255,255,255,.24), 0 40px 60px -30px rgba(5,15,25,.75); }
.kl_main .kl_vessel .img { position: relative; display: block; overflow: hidden; aspect-ratio: 4 / 3; }
.kl_main .kl_vessel .img img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s cubic-bezier(.2,.7,.2,1); }
.kl_main .kl_vessel:hover .img img { transform: scale(1.06); }
/* 아랫줄: 선박명 ↔ + 아이콘 */
.kl_main .kl_vessel .info { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 26px 30px 28px; }
.kl_main .kl_vessel .name { display: block; font-family: 'Poppins', 'Noto Sans KR', sans-serif; font-size: 23px; font-weight: 500; letter-spacing: .03em; line-height: 1.3; }
.kl_main .kl_vessel .plus {
	position: relative; flex: 0 0 auto; width: 36px; height: 36px; border: 1px solid rgba(255,255,255,.3); border-radius: 50%;
	transition: transform .5s cubic-bezier(.2,.7,.2,1), background .4s, border-color .4s;
}
.kl_main .kl_vessel .plus:before, .kl_main .kl_vessel .plus:after { content: ''; position: absolute; top: 50%; left: 50%; width: 12px; height: 1.5px; margin: -.75px 0 0 -6px; background: #fff; transition: background .4s; }
.kl_main .kl_vessel .plus:after { transform: rotate(90deg); }
.kl_main .kl_vessel:hover .plus { transform: rotate(45deg); background: #fff; border-color: #fff; }
.kl_main .kl_vessel:hover .plus:before, .kl_main .kl_vessel:hover .plus:after { background: var(--kl-navy); }
/* 제원 패널: 사진 위를 덮는 남색 반투명 면 — 평소엔 숨기고 마우스를 올리면 아래에서 떠오른다 */
.kl_main .kl_vessel .spec {
	position: absolute; inset: 0; z-index: 1;
	display: grid; grid-template-columns: 1fr 1fr; align-content: end; gap: 22px 24px; padding: 34px;
	background: linear-gradient(0deg, rgba(8,34,60,.95) 0%, rgba(8,34,60,.82) 100%);
	opacity: 0; transform: translateY(24px); transition: opacity .45s, transform .55s cubic-bezier(.2,.7,.2,1);
}
.kl_main .kl_vessel:hover .spec, .kl_main .kl_vessel:focus-visible .spec { opacity: 1; transform: none; }
.kl_main .kl_vessel .spec dt { font-size: 14px; color: rgba(255,255,255,.6); }
.kl_main .kl_vessel .spec dd { margin-top: 6px; font-size: 18px; font-weight: 500; color: #fff; }
/* 하단: 스크롤바(진행 상태) + 전체보기 버튼 */
.kl_main .kl_fleet_foot { display: flex; align-items: center; gap: 48px; margin-top: 56px; }
.kl_main .kl_fleet_foot .kl_fleet_bar {
	position: relative; left: auto; bottom: auto; flex: 1; width: auto; height: 2px; border-radius: 0; background: rgba(255,255,255,.18);
}
.kl_main .kl_fleet_foot .kl_fleet_bar .swiper-scrollbar-drag { border-radius: 0; background: #fff; cursor: grab; }
.kl_main .kl_btn_line {
	flex: 0 0 auto; display: inline-block; padding: 16px 44px; border: 1px solid rgba(255,255,255,.45);
	font-size: 16px; font-weight: 500; color: #fff; transition: background .3s, border-color .3s, color .3s;
}
.kl_main .kl_btn_line:hover { background: #fff; border-color: #fff; color: var(--kl-navy); }

/* ---------- 지속가능경영 ---------- */
/* 큰 사진 카드 3장 계단식 배치 + 뒤로 흐르는 외곽선 영문 띠. 카드 설명은 호버 시 펼침 */
.kl_main .kl_sustain {
	position: relative; padding: 170px 0 150px; overflow: hidden;
	/* 위(사업영역·흰색)와 아래(인재채용·옅은 하늘색) 사이에서 확실히 구분되는 진한 남색 면 */
	background:
		radial-gradient(55% 45% at 88% 0%, rgba(80,140,210,.16) 0%, rgba(80,140,210,0) 70%),
		#0f2a50;
}
/* 뒤로 흐르는 큰 외곽선 글자 띠 (같은 문구 2벌을 이어 붙여 끊김 없이 반복) */
.kl_main .kl_sustain_flow { position: absolute; left: 0; right: 0; top: 64px; overflow: hidden; pointer-events: none; }
.kl_main .kl_sustain_flow .track { display: flex; width: max-content; animation: klFlow 120s linear infinite; }  /* 한 그룹(로고 8개)이 화면보다 넓어야 -50% 반복 시 빈틈이 없다 */
/* 흐르는 띠: K-LNG 로고를 크게, 흑백으로 아주 옅게 */
.kl_main .kl_sustain_flow .grp { flex: 0 0 auto; display: flex; }
.kl_main .kl_sustain_flow img { display: block; flex: 0 0 auto; height: 150px; width: auto; margin-right: 180px; }  /* logo_flow.png: 흰 글자는 아주 옅게(6%), 빨간 심볼만 진하게(42%) 투명도를 이미지에 넣어 둠 */
@keyframes klFlow { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.kl_main .kl_sustain > .kl_in { position: relative; z-index: 1; }

.kl_main .kl_sustain_head { display: flex; justify-content: space-between; align-items: flex-end; gap: 60px; margin-bottom: 90px; }
.kl_main .kl_sustain_label {
	display: flex; align-items: center; gap: 12px; margin-bottom: 26px;
	font-family: 'Poppins', sans-serif; font-size: 16px; font-weight: 600; letter-spacing: .16em; color: #8fb8de;
}
.kl_main .kl_sustain_label:before { content: ''; width: 9px; height: 9px; background: var(--kl-red); }
.kl_main .kl_sustain_head .kl_tit { font-size: 60px; line-height: 1.22; color: #fff; }
/* 스크롤 진행만큼 글자가 차례로 밝아진다 (.is_fx = PC). 꺼진 글자는 남색 배경 위 옅은 흰색 */
.kl_main .kl_sustain.is_fx .kl_sustain_head .kl_tit .ch { color: rgba(255,255,255,.16); transition: color .35s; }
.kl_main .kl_sustain.is_fx .kl_sustain_head .kl_tit .ch.is_lit { color: #fff; }
.kl_main .kl_sustain_head .side { max-width: 600px; padding-bottom: 8px; }
.kl_main .kl_sustain_head .kl_desc { font-size: 19px; font-weight: 500; line-height: 1.75; color: rgba(255,255,255,.8); word-break: keep-all; }
/* 바로가기: 글자 + 남색 원 화살표. 호버 시 원이 채워지며 화살표가 밀려난다 */
.kl_main .kl_sustain_more { display: inline-flex; align-items: center; gap: 18px; margin-top: 34px; font-size: 17px; font-weight: 600; color: #fff; }
.kl_main .kl_sustain_more .arr {
	position: relative; width: 52px; height: 52px; border: 1px solid rgba(255,255,255,.4); border-radius: 50%; overflow: hidden;
	transition: background .4s, border-color .4s;
}

/* 화살표 공통 (/img/cursor.png 마스크 — 배경색이 화살표 색) */
.kl_main .kl_sustain .arr:before { content: ''; position: absolute; top: 50%; left: 50%; width: 30px; height: 17px; margin: -8.5px 0 0 -15px; background: #fff; -webkit-mask: url(/img/cursor.png) center / 100% 100% no-repeat; mask: url(/img/cursor.png) center / 100% 100% no-repeat; transition: background .4s, transform .45s cubic-bezier(.22,.61,.36,1); }

/* 카드: 가운데 카드만 아래로 내려 계단 리듬 */
.kl_main .kl_sustain_list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; align-items: start; }
.kl_main .kl_sustain_list li:nth-child(2) { margin-top: 80px; transition-delay: .14s; }
.kl_main .kl_sustain_list li:nth-child(3) { margin-top: 30px; transition-delay: .28s; }
.kl_main .kl_sustain_list a {
	--py: 0px;
	position: relative; display: block; aspect-ratio: 1 / 1.06; overflow: hidden; color: #fff;   /* 정사각형에 가깝게 */
	--q: 1;
	/* 스크롤 진입 시(--q 0→1): 아래쪽을 축으로 뒤로 눕혀진 카드가 올라오며 일어선다 */
	transform: perspective(1600px) translate3d(0, calc(var(--py) + (1 - var(--q)) * 160px), 0) rotateX(calc((1 - var(--q)) * 24deg)) scale(calc(.88 + var(--q) * .12));
	transform-origin: 50% 100%;
	/* 남색 배경과 분리되도록 얇은 밝은 테두리 + 진한 그림자 */
	box-shadow: 0 0 0 1px rgba(255,255,255,.12), 0 40px 70px -40px rgba(0,0,0,.6); transition: box-shadow .6s;
}
/* 사진: 등장 시 아래에서 위로 걷히고, 호버 시 천천히 확대 */
.kl_main .kl_sustain_list .img { position: absolute; inset: 0; overflow: hidden; clip-path: inset(100% 0 0 0); transition: clip-path 1.3s cubic-bezier(.7,0,.2,1); }
.kl_main .kl_sustain_list li.is_in .img { clip-path: inset(0 0 0 0); }
.kl_main .kl_sustain_list .img img { display: block; width: 100%; height: 100%; object-fit: cover; transform: scale(1.15); filter: brightness(1.12) saturate(1.15) contrast(1.03); transition: transform 1.6s cubic-bezier(.2,.7,.2,1); }
.kl_main .kl_sustain_list li.is_in .img img { transform: scale(1); }
/* 사진 위 남색 그라데이션 (아래 문구 가독성) + 호버 시 전체가 조금 더 어두워짐 */
.kl_main .kl_sustain_list .img:after {
	content: ''; position: absolute; inset: 0;
	/* 남색 배경 위에서 카드가 가라앉지 않도록 문구 뒤(아래 40%)만 받치고 나머지는 사진 그대로 */
	background: linear-gradient(0deg, rgba(8,26,52,.78) 0%, rgba(8,26,52,.42) 22%, rgba(8,26,52,0) 44%), linear-gradient(180deg, rgba(8,26,52,.22) 0%, rgba(8,26,52,0) 18%);
	transition: background-color .5s;
}
/* 위: 큰 번호 / 오른쪽 위: 화살표 원 */
.kl_main .kl_sustain_list .no { position: absolute; left: 40px; top: 34px; z-index: 1; font-family: 'Poppins', sans-serif; font-size: 15px; font-weight: 500; letter-spacing: .12em; color: rgba(255,255,255,.85); }
.kl_main .kl_sustain_list .no:after { content: ''; display: inline-block; vertical-align: middle; width: 40px; height: 1px; margin-left: 14px; background: rgba(255,255,255,.5); transition: width .5s cubic-bezier(.22,.61,.36,1), background .4s; }
.kl_main .kl_sustain_list .arr {
	position: absolute; right: 32px; top: 26px; z-index: 1; width: 52px; height: 52px; border: 1px solid rgba(255,255,255,.45); border-radius: 50%;
	transition: background .4s, border-color .4s, transform .5s cubic-bezier(.22,.61,.36,1);
}
.kl_main .kl_sustain_list .arr:before { background: #fff; }
/* 아래: 분류 · 제목 · (접힌) 설명. 빨간 선이 제목 위에서 늘어난다 */
.kl_main .kl_sustain_list .body { position: absolute; left: 40px; right: 40px; bottom: 40px; z-index: 1; display: block; }
.kl_main .kl_sustain_list .cat { display: block; font-family: 'Poppins', sans-serif; font-size: 34px; font-weight: 600; line-height: 1.2; letter-spacing: .01em; color: #9fd3ff; }   /* 영문 분류 = 한글 제목과 같은 크기, 하늘색으로 구분 */
.kl_main .kl_sustain_list .cat:before { content: ''; display: block; width: 36px; height: 3px; margin-bottom: 20px; background: var(--kl-red); transition: width .6s cubic-bezier(.22,.61,.36,1); }
.kl_main .kl_sustain_list .name { display: block; margin-top: 2px; font-size: 34px; font-weight: 700; line-height: 1.3; letter-spacing: -0.03em; }
.kl_main .kl_sustain_list .desc { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .55s cubic-bezier(.22,.61,.36,1); }
.kl_main .kl_sustain_list .desc > span {
	overflow: hidden; display: block; font-size: 17px; line-height: 1.7; letter-spacing: -0.02em; color: rgba(255,255,255,.86); word-break: keep-all;
	opacity: 0; transform: translateY(12px); transition: opacity .45s, transform .55s cubic-bezier(.22,.61,.36,1);
}
@media (hover: hover) and (min-width: 1025px) {
	.kl_main .kl_sustain_more:hover .arr { background: #fff; border-color: #fff; }
	.kl_main .kl_sustain_more:hover .arr:before { background: var(--kl-navy); animation: klArrPass .5s; }
	.kl_main .kl_sustain_list a:hover { box-shadow: 0 0 0 1px rgba(255,255,255,.3), 0 50px 80px -36px rgba(0,0,0,.7); }
	.kl_main .kl_sustain_list a:hover .img img { transform: scale(1.08); }
	.kl_main .kl_sustain_list a:hover .img:after { background-color: rgba(8,26,52,.18); }
	.kl_main .kl_sustain_list a:hover .no:after { width: 72px; background: #fff; }
	.kl_main .kl_sustain_list a:hover .arr { background: #fff; border-color: #fff; transform: rotate(-45deg); }
	.kl_main .kl_sustain_list a:hover .arr:before { background: var(--kl-navy); }
	.kl_main .kl_sustain_list a:hover .cat:before { width: 100%; }
	.kl_main .kl_sustain_list a:hover .desc { grid-template-rows: 1fr; }
	.kl_main .kl_sustain_list a:hover .desc > span { padding-top: 16px; opacity: 1; transform: none; transition-delay: .08s; }
}
/* 화살표가 오른쪽으로 빠졌다가 왼쪽에서 다시 들어온다 */
@keyframes klArrPass { 0% { transform: translateX(0); } 49% { transform: translateX(30px); } 50% { transform: translateX(-30px); } 100% { transform: translateX(0); } }

/* ---------- 공지사항 ---------- */
/* 제목줄(제목 ↔ 더보기 버튼) 아래에 최신 공지 4건을 같은 크기 카드로 나란히 */
.kl_main .kl_notice { padding: 160px 0 170px; background: #fff; }
.kl_main .kl_notice_head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: 56px; }
.kl_main .kl_btn_navy {
	flex: 0 0 auto; display: inline-block; padding: 14px 38px; border: 1px solid var(--kl-navy);
	font-size: 15px; font-weight: 500; color: var(--kl-navy); transition: background .3s, color .3s;
}
.kl_main .kl_btn_navy:hover { background: var(--kl-navy); color: #fff; }
.kl_main .kl_notice_list { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.kl_main .kl_notice_list a {
	position: relative; display: flex; flex-direction: column; height: 100%; min-height: 360px; box-sizing: border-box;
	padding: 44px 40px 38px; border: 1px solid var(--kl-line); overflow: hidden;
	background: linear-gradient(180deg, #fff 0%, var(--kl-sky) 100%); color: var(--kl-ink);
	transition: transform .5s cubic-bezier(.2,.7,.2,1), box-shadow .5s, color .4s, border-color .4s;
}
/* 마우스 오버: 카드 전체가 남색 면으로 차오른다 (아래에서 위로) */
.kl_main .kl_notice_list a:before {
	content: ''; position: absolute; inset: 0; z-index: 0;
	background: linear-gradient(160deg, #1d4f80 0%, var(--kl-navy) 70%);
	transform: translateY(101%); transition: transform .55s cubic-bezier(.2,.7,.2,1);
}
.kl_main .kl_notice_list a > * { position: relative; z-index: 1; }
.kl_main .kl_notice_list a:hover { transform: translateY(-8px); border-color: transparent; box-shadow: 0 34px 60px -30px rgba(19,50,95,.6); color: #fff; }
.kl_main .kl_notice_list a:hover:before { transform: translateY(0); }
/* 날짜: 큰 일자(숫자) 아래 작은 연월 — 카드마다 숫자가 리듬을 만든다 */
.kl_main .kl_notice_list .date {
	display: flex; flex-direction: column; gap: 6px;
	font-family: 'Poppins', sans-serif; font-size: 15px; font-weight: 500; letter-spacing: .04em; color: #8a96a8; transition: color .4s;
}
.kl_main .kl_notice_list .date b { font-size: 54px; font-weight: 300; line-height: 1; letter-spacing: -0.02em; color: var(--kl-navy); transition: color .4s; }
.kl_main .kl_notice_list .tit {
	display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
	margin-top: 34px; font-size: 23px; font-weight: 600; line-height: 1.5; letter-spacing: -0.03em; word-break: keep-all;
}
/* 아래: 가는 구분선 위에 더보기 글자 ↔ 화살표 원 */
.kl_main .kl_notice_list .foot {
	display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: 24px;
	border-top: 1px solid var(--kl-line); transition: border-color .4s;
}
.kl_main .kl_notice_list .more { font-size: 15px; font-weight: 500; color: var(--kl-navy); transition: color .4s; }
.kl_main .kl_notice_list .arr {
	position: relative; flex: 0 0 auto; width: 46px; height: 46px; border: 1px solid rgba(19,50,95,.25); border-radius: 50%;
	transition: background .4s, border-color .4s, transform .4s;
}
.kl_main .kl_notice_list .arr:before { content: ''; position: absolute; top: 50%; left: 50%; width: 28px; height: 16px; margin: -8px 0 0 -14px; background: var(--kl-navy); -webkit-mask: url(/img/cursor.png) center / 100% 100% no-repeat; mask: url(/img/cursor.png) center / 100% 100% no-repeat; transition: background .4s; }
.kl_main .kl_notice_list a:hover .date { color: rgba(255,255,255,.7); }
.kl_main .kl_notice_list a:hover .date b, .kl_main .kl_notice_list a:hover .more { color: #fff; }
.kl_main .kl_notice_list a:hover .foot { border-color: rgba(255,255,255,.2); }
.kl_main .kl_notice_list a:hover .arr { background: #fff; border-color: #fff; transform: translateX(4px); }
.kl_main .kl_notice_list .is_empty { grid-column: 1 / -1; padding: 48px 0; font-size: 17px; color: var(--kl-gray); text-align: center; }

/* ---------- 인재채용 ---------- */
.kl_main .kl_recruit { position: relative; min-height: 760px; display: flex; align-items: center; background: var(--kl-sky); overflow: hidden; }
/* 오른쪽 사진: 왼쪽 가장자리를 사선으로 자른다 */
.kl_main .kl_recruit_visual { position: absolute; top: 0; right: 0; bottom: 0; width: 60%; }
.kl_main .kl_recruit_visual .photo {
	position: absolute; inset: 0; overflow: hidden;
	clip-path: polygon(30% 0, 100% 0, 100% 100%, 0 100%);
}
/* 사진 여러 장을 겹쳐 두고 .on 만 보인다. 보이는 동안 아주 천천히 확대되어 정지 화면처럼 보이지 않게 한다 */
.kl_main .kl_recruit_visual .photo img {
	position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
	opacity: 0; transform: scale(1.08);
	transition: opacity 1.8s ease, transform 7s linear;
}
.kl_main .kl_recruit_visual .photo img.on { opacity: 1; transform: scale(1); }
.kl_main .kl_recruit_visual .photo img:nth-child(1) { object-position: 45% 30%; }   /* 인물이 가운데 */
.kl_main .kl_recruit_visual .photo img:nth-child(2) { object-position: 80% 50%; }   /* 인물·안내판이 오른쪽 */
/* 사진 앞에 겹치는 반투명 사선 면 2장 */
.kl_main .kl_recruit_visual .p1, .kl_main .kl_recruit_visual .p2 { position: absolute; top: 0; bottom: 0; z-index: 1; pointer-events: none; }
/* 옅은 하늘색 반투명 면 (사진 위에서는 푸른 빛으로 겹친다) */
.kl_main .kl_recruit_visual .p1 { left: -9%; width: 34%; top: 14%; background: rgba(120,170,220,.22); clip-path: polygon(62% 0, 100% 0, 38% 100%, 0 100%); }
.kl_main .kl_recruit_visual .p2 { left: -3%; width: 26%; top: 46%; background: rgba(120,170,220,.3); clip-path: polygon(64% 0, 100% 0, 36% 100%, 0 100%); }
.kl_main .kl_recruit .kl_in { position: relative; z-index: 2; width: 100%; }
.kl_main .kl_recruit_txt { max-width: 640px; padding: 140px 0; }
.kl_main .kl_recruit_txt .kl_tit { white-space: nowrap; }
.kl_main .kl_recruit_txt .kl_desc { margin-top: 24px; }
.kl_main .kl_recruit_txt .kl_link { margin-top: 40px; }

/* ---------- 반응형 ---------- */
@media (max-width: 1400px) {
	.kl_main .kl_recruit_visual { width: 56%; }
}
@media (max-width: 1440px) {
	.kl_main .kl_intro_top { gap: 70px; }
	.kl_main .kl_intro_en { font-size: 40px; }
	.kl_main .kl_intro_media { height: 460px; }
}
@media (max-width: 1200px) {
	.kl_main .kl_tit { font-size: 42px; }
	.kl_main .kl_intro_top { gap: 50px; }
	.kl_main .kl_intro_en { font-size: 34px; }
	.kl_main .kl_intro_h { font-size: 23px; }
	.kl_main .kl_intro_desc p { font-size: 16px; }
	.kl_main .kl_intro_media { height: 400px; }
	.kl_main .kl_intro_keys li { padding-left: 16px; padding-right: 16px; }
	.kl_main .kl_intro_keys p { font-size: 23px; }
	.kl_main .kl_hero_txt h2 { font-size: 76px; }
	.kl_main .kl_fleet_head .kl_tit { font-size: 46px; }
	.kl_main .kl_notice_list { grid-template-columns: repeat(2, 1fr); }
	.kl_main .kl_notice_list a { min-height: 300px; }
	.kl_main .kl_sustain_head .kl_tit { font-size: 50px; }
	.kl_main .kl_sustain_flow img { height: 120px; margin-right: 140px; }
	.kl_main .kl_sustain_list { gap: 20px; }
	.kl_main .kl_sustain_list .no { left: 28px; }
	.kl_main .kl_sustain_list .arr { right: 24px; width: 44px; height: 44px; }
	.kl_main .kl_sustain_list .body { left: 28px; right: 28px; bottom: 32px; }
	.kl_main .kl_sustain_list .cat, .kl_main .kl_sustain_list .name { font-size: 26px; }
	.kl_main .kl_sustain_list .desc > span { font-size: 15px; }
}
@media (max-width: 1024px) {
	.kl_main .kl_in { padding: 0 20px; }
	.kl_main .kl_tit { font-size: 32px; }
	.kl_main .kl_desc { font-size: 16px; }
	.kl_main .kl_hero { min-height: 480px; }
	.kl_main .kl_hero_bg img, .kl_main .kl_hero_bg video { object-position: 52% 50%; }
	.kl_main .kl_hero_txt { padding: 0 20px; bottom: 13vh; }
	.kl_main .kl_hero_txt h2 { font-size: clamp(30px, 8.6vw, 44px); }
	.kl_main .kl_hero_txt p { margin-top: 18px; font-size: 16px; }
	/* 좁은 화면에서는 사선 면이 문구 위를 덮으므로(슬라이더 위 레이어) 남색 면은 숨기고 얇게만 둔다 */
	.kl_main .kl_hero_bar { left: 20px; }
	.kl_main .kl_hero_scroll { right: 20px; height: 60px; }

	/* 회사소개: 스테이트먼트 → 소개 → 사진 2장 → 핵심가치 순으로 한 줄씩 쌓는다 */
	.kl_main .kl_intro { padding: 84px 0 72px; }
	.kl_main .kl_intro:before { background-size: auto, 50% 100%; }
	.kl_main .kl_intro_top { grid-template-columns: 1fr; gap: 36px; }
	.kl_main .kl_intro_label { margin-bottom: 18px; font-size: 14px; }
	.kl_main .kl_intro_en { font-size: 28px; line-height: 1.45; }
	.kl_main .kl_intro_h { font-size: 21px; }
	.kl_main .kl_intro_desc { margin-top: 20px; padding-top: 20px; }
	.kl_main .kl_intro_desc p { font-size: 15px; line-height: 1.75; }
	.kl_main .kl_intro_more { margin-top: 28px; gap: 16px; font-size: 17px; }
	.kl_main .kl_intro_more .logo { height: 23px; }
	.kl_main .kl_intro_more .arr { width: 46px; height: 46px; }
	.kl_main .kl_intro_media { grid-template-columns: 1fr; height: auto; gap: 12px; margin-top: 48px; }
	.kl_main .kl_intro .ph_l { height: 240px; }
	.kl_main .kl_intro .ph_s { height: 200px; }
	.kl_main .kl_intro .ph .cap { left: 20px; bottom: 18px; font-size: 12px; }
	.kl_main .kl_intro_keys { grid-template-columns: 1fr; margin-top: 44px; }
	.kl_main .kl_intro_keys li, .kl_main .kl_intro_keys li + li { padding: 22px 0; border-left: 0; }
	.kl_main .kl_intro_keys li + li { border-top: 1px solid rgba(255,255,255,.1); }
	.kl_main .kl_intro_keys li + li:before { display: none; }
	.kl_main .kl_intro_keys p { margin-top: 10px; font-size: 21px; }

	/* 사업영역: 제목 → 탭 → 사진 → 설명 순으로 한 줄씩 */
	.kl_main .kl_biz { padding: 72px 0 64px; }
	.kl_main .kl_biz_wrap { display: flex; flex-direction: column; align-items: stretch; }
	.kl_main .kl_biz_l { display: contents; }
	.kl_main .kl_biz_head { order: 1; }
	.kl_main .kl_biz_head .kl_desc { margin-top: 14px; font-size: 16px; }
	.kl_main .kl_biz_tab { order: 2; margin-top: 32px; }
	.kl_main .kl_biz_tab button { padding-bottom: 14px; font-size: 20px; }
	.kl_main .kl_biz_media { order: 3; height: auto; min-height: 0; aspect-ratio: 4 / 3; margin-top: 24px; }
	.kl_main .kl_biz_media .num { right: 16px; bottom: 14px; font-size: 13px; }
	.kl_main .kl_biz_pns { order: 4; margin-top: 28px; }
	.kl_main .kl_biz_pn .en { gap: 14px; margin-bottom: 16px; }
	.kl_main .kl_biz_pn .en i { font-size: 64px; }
	.kl_main .kl_biz_pn .en em { font-size: 11px; letter-spacing: .16em; }
	.kl_main .kl_biz_pn strong { font-size: 26px; }
	.kl_main .kl_biz_pn .desc { font-size: 15px; }
	.kl_main .kl_biz_pn .ln > .more { margin-top: 20px; }
	.kl_main .kl_fleet_visual { height: 520px; }
	.kl_main .kl_fleet_head { left: 20px; right: 20px; top: auto; bottom: 120px; text-align: left; }
	/* 세로 화면에서는 제목이 흰 선체 위에 놓이므로 아래쪽을 진하게 받친다 */
	.kl_main .kl_fleet_visual .bg:after {
		background: linear-gradient(0deg, rgba(14,36,64,.92) 0%, rgba(14,36,64,.7) 30%, rgba(14,36,64,.2) 55%, rgba(14,36,64,0) 70%);
	}
	.kl_main .kl_fleet_head .kl_tit { font-size: 34px; }
	.kl_main .kl_fleet_deco .d1 { width: 70%; }
	.kl_main .kl_fleet_deco .d2 { width: 45%; }
	.kl_main .kl_fleet_body { margin-top: -80px; padding: 116px 0 72px; clip-path: polygon(0 0, 50% 80px, 100% 0, 100% 100%, 0 100%); }
	.kl_main .kl_vessel .info { padding: 20px 22px 22px; }
	.kl_main .kl_vessel .name { font-size: 19px; }
	.kl_main .kl_vessel .plus { width: 30px; height: 30px; }
	.kl_main .kl_vessel .spec { gap: 14px 16px; padding: 22px; }
	.kl_main .kl_vessel .spec dd { font-size: 15px; }
	.kl_main .kl_fleet_foot { flex-direction: column; align-items: stretch; gap: 28px; margin-top: 32px; }
	.kl_main .kl_fleet_foot .kl_btn_line { align-self: center; }
	.kl_main .kl_fleet_foot .kl_fleet_bar { flex: none; width: 100%; }
	.kl_main .kl_fleet_body { padding-bottom: 130px; }
	.kl_main .kl_fleet_mark { bottom: 44px; width: 62%; }

	/* 인재채용: 사진 위, 문구 아래로 쌓는다 */
	.kl_main .kl_recruit { display: block; min-height: 0; }
	.kl_main .kl_recruit_visual { position: relative; width: 100%; height: 380px; }
	.kl_main .kl_recruit_visual .photo { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 86%); }
	.kl_main .kl_recruit_visual .p1, .kl_main .kl_recruit_visual .p2 { display: none; }
	.kl_main .kl_recruit_txt { padding: 40px 0 72px; }
	.kl_main .kl_recruit_txt .kl_tit { white-space: normal; }
	.kl_main .kl_recruit_txt .kl_link { margin-top: 28px; }

	/* 지속가능경영: 카드 한 줄씩, 계단·패럴랙스 없이, 설명은 항상 펼침 */
	.kl_main .kl_sustain { padding: 84px 0 90px; }
	.kl_main .kl_sustain_flow { top: 30px; }
	.kl_main .kl_sustain_flow img { height: 64px; margin-right: 70px; }
	.kl_main .kl_sustain_head { flex-direction: column; align-items: flex-start; gap: 18px; margin-bottom: 36px; }
	.kl_main .kl_sustain_label { margin-bottom: 16px; font-size: 13px; }
	.kl_main .kl_sustain_head .kl_tit { font-size: 32px; }
	.kl_main .kl_sustain_head .kl_desc { font-size: 16px; }
	.kl_main .kl_sustain_more { margin-top: 22px; gap: 14px; font-size: 15px; }
	.kl_main .kl_sustain_more .arr { width: 42px; height: 42px; }
	.kl_main .kl_sustain_list { grid-template-columns: 1fr; gap: 16px; }
	.kl_main .kl_sustain_list li, .kl_main .kl_sustain_list li:nth-child(n) { margin-top: 0; transition-delay: 0s; }
	.kl_main .kl_sustain_list a { aspect-ratio: 1 / 1; transform: none; }
	.kl_main .kl_sustain_list .no { left: 22px; top: 24px; font-size: 13px; }
	.kl_main .kl_sustain_list .arr { right: 20px; top: 16px; width: 40px; height: 40px; }
	.kl_main .kl_sustain_list .body { left: 22px; right: 22px; bottom: 26px; }
	.kl_main .kl_sustain_list .cat { font-size: 24px; }
	.kl_main .kl_sustain_list .cat:before { margin-bottom: 14px; }
	.kl_main .kl_sustain_list .name { margin-top: 2px; font-size: 24px; }
	.kl_main .kl_sustain_list .desc { grid-template-rows: 1fr; }
	.kl_main .kl_sustain_list .desc > span { padding-top: 10px; font-size: 15px; opacity: 1; transform: none; }

	.kl_main .kl_notice { padding: 80px 0 90px; }
	.kl_main .kl_notice_head { margin-bottom: 32px; }
	.kl_main .kl_btn_navy { padding: 10px 24px; font-size: 14px; }
	.kl_main .kl_notice_list { grid-template-columns: 1fr; gap: 14px; }
	.kl_main .kl_notice_list a { min-height: 0; padding: 28px 26px 24px; }
	.kl_main .kl_notice_list .date { font-size: 13px; gap: 4px; }
	.kl_main .kl_notice_list .date b { font-size: 38px; }
	.kl_main .kl_notice_list .tit { margin-top: 18px; font-size: 18px; -webkit-line-clamp: 2; }
	.kl_main .kl_notice_list .foot { margin-top: 22px; padding-top: 16px; }
	.kl_main .kl_notice_list .more { font-size: 14px; }
	.kl_main .kl_notice_list .arr { width: 36px; height: 36px; }
}
@media (prefers-reduced-motion: reduce) {
	.kl_main .js-reveal { opacity: 1; transform: none; transition: none; }
	.kl_main .kl_sustain_flow .track { animation: none; }
	.kl_main .kl_sustain_list .img { clip-path: none; }
	.kl_main .kl_hero_bg img, .kl_main .kl_hero_bg video, .kl_main .kl_hero_txt h2, .kl_main .kl_hero_txt p, .kl_main .kl_hero_scroll:after { animation: none; }
}