@charset "utf-8";

/*
 * esg.css
 * ESG 하위 페이지 공통 스타일 통합 파일
 *   - ESG 중장기 로드맵  (.esgRoadmap)
 *   - ESG 정책 및 보고서 (.esgPolicy)
 * sub.css 는 일절 수정하지 않음 — 이 파일에서만 관리
 * 배포 경로: /resources/css/esg.css
 */


/* ============================================================
   공통 — 헤더 배경
============================================================ */
.esgRoadmap #header,
.esgPolicy #header,
.esgManagementDeclaration #header {
	background: url(/resources/images/contents/esg_header.jpg) center 0 no-repeat;
	background-size: cover;
}


/* ============================================================
   공통 — 페이지 타이틀 h3
   sub.css ".section h3" 오버라이드 — 경영선언 페이지 스타일 동일 적용
============================================================ */
.esgRoadmap .section h3,
.esgPolicy .section h3 {
	padding-bottom: 0px;
	padding-top: 10px;
	font-size: 30px;
	background: url(/resources/images/contents/bull_divided3.gif) center top no-repeat;
}


/* ============================================================
   공통 — 섹션 소제목 (.esgRoadmap 내부에서 사용)
   border-bottom 색상: #0060B2 (메인 파랑)
============================================================ */
.esg-section-label {
	font-family: 'Noto Sans KR', 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
	display: inline-block;
	font-size: 22px;
	font-weight: 600;
	color: #333232;
	letter-spacing: -1px;
	margin: 0 0 26px;                /* ← 타이틀 아래 여백 조절 */
	padding-bottom: 10px;
	border-bottom: 3px solid #0060B2;
}
.esg-section-label-light {
	font-size: 16px;
	font-weight: 300;
	letter-spacing: 0;
	margin-left: 6px;
	color: #7a8ea0;
}

/* 중장기 Roadmap 섹션 소제목 — 중앙 정렬 + 밑줄 → 상단 선으로 변경 */
.esg-roadmap-section .esg-section-label {
	display: table;
	position: relative;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 26px;
	padding-bottom: 0;
	padding-top: 14px;        /* 선과 텍스트 사이 간격 */
	border-bottom: none;      /* 기존 하단 밑줄 제거 */
	
}
/* ↓ width 값으로 선 길이 조절 */
.esg-roadmap-section .esg-section-label::before {
	content: '';
	position: absolute;
	top: 0;
	left: 50%;
	-webkit-transform: translateX(-50%);
	        transform: translateX(-50%);
	width: 120px;              /* ← 선 길이 조절 */
	height: 3px;
	background: #0160B2;
	border-radius: 2px;
}


/* ============================================================
   공통 — 로드인 애니메이션
   keyframe 명칭 rmp 접두어로 충돌 방지
============================================================ */
@-webkit-keyframes rmpFadeUp {
	from { opacity: 0; -webkit-transform: translateY(18px); transform: translateY(18px); }
	to   { opacity: 1; -webkit-transform: translateY(0);    transform: translateY(0); }
}
@keyframes rmpFadeUp {
	from { opacity: 0; transform: translateY(18px); }
	to   { opacity: 1; transform: translateY(0); }
}


/* ============================================================
   ESG 중장기 로드맵 (.esgRoadmap)
   색상 시스템: #1A70B9 (Phase 1) → #0060B2 (Phase 2) → #003E7E (Phase 3)
============================================================ */
/* "ESG 운영체계" h3 섹션 하단 여백 조절
   (sub.css 기본값 80px 덮어쓰기 — ↓ 이 숫자로 h3와 인트로 문구 사이 간격 조절) */
.esgRoadmap .location + .section {
	margin-bottom: 20px;
}
/* --- ESG 운영체계 인트로 텍스트 --- */
.esg-ops-intro {
	font-family: 'Noto Sans KR', 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
	text-align: center;
	font-size: 18px;
	font-weight: 500;
	color: #0160B2;
	letter-spacing: -0.5px;
	margin-top: 0;                   /* 브라우저 기본 p 여백 제거 */
	margin-bottom: 50px;
	line-height: 1.7;
}

/* --- ops-flow 행 컨테이너 --- */
.ops-flow {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	    -ms-flex-direction: column;
	        flex-direction: column;
	gap: 0;
}

.ops-row {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: stretch;
	    -ms-flex-align: stretch;
	        align-items: stretch;
	border: 1px solid #D9E2EC;
	border-radius: 3px;
	overflow: hidden;
	margin-bottom: 2px;
	background: #fff;
	-webkit-transition: -webkit-box-shadow 0.2s ease;
	        transition: box-shadow 0.2s ease;
	border-radius: 16px;   /* ← 이 값을 원하는 만큼 키우기 */
    overflow: hidden;     /* 이 덕분에 안쪽 셀도 같이 둥글게 처리됨 */
}
.ops-row:hover {
	-webkit-box-shadow: 0 3px 12px rgba(0,96,178,0.10);
	        box-shadow: 0 3px 12px rgba(0,96,178,0.10);
}

/* 번호 뱃지 */
.ops-num {
	font-family: 'Noto Sans KR', 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	-webkit-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;
	width: 40px;
	min-width: 40px;
	background: #1A70B9;
    height: 40px;           /* ← 추가: 너비=높이 → 정원 */
    border-radius: 50%;     /* ← 추가: 동그랗게 */
    align-self: center;     /* ← 추가: 행 세로 중앙 정렬 */
    margin: 0 6px;          /* ← 추가: 좌우 여백 */
	color: #fff;
	font-size: 14px;
	font-weight: 700;
	-ms-flex-negative: 0;
	    flex-shrink: 0;
}

/* 제목 셀 */
.ops-title-cell {
	font-family: 'Noto Sans KR', 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	padding: 14px 18px;
	min-width: 170px;
	font-size: 15px;
	font-weight: 600;
	color: #333232;
	letter-spacing: -0.3px;
	border-right: 1px solid #D9E2EC;
	background: #F4F8FC;
	-ms-flex-negative: 0;
	    flex-shrink: 0;
}

/* 태그 영역 */
.ops-tags {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	-ms-flex-wrap: wrap;
	    flex-wrap: wrap;
	gap: 6px;
	padding: 10px 16px;
	-webkit-box-flex: 1;
	    -ms-flex: 1;
	        flex: 1;
}

.ops-tag {
	font-family: 'Noto Sans KR', 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
	display: -webkit-inline-box;
	display: -ms-inline-flexbox;
	display: inline-flex;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	height: 28px;
	padding: 0 12px;
	border: 1px solid #C8D8EA;
	border-radius: 2px;
	font-size: 14px;
	color: #333259;
	letter-spacing: -0.2px;
	background: #fff;
	white-space: nowrap;
}

/* ——————————————————————————————————————————
   줄별 ops-tag 박스 크기 수동 조절
   ↓ 각 행의 min-width · padding 값을 바꿔서 크기를 독립적으로 조절합니다.
   · justify-content: center  → 박스 안 텍스트 중앙 정렬
   · min-width                → 박스 최소 너비 (px 단위로 조절)
   · padding                  → 좌우 내부 여백 (min-width 대신 패딩으로 조절 가능)
—————————————————————————————————————————— */

/* 2번 행 (ESG 정책 및 운영규정) ← 이 숫자로 박스 너비 조절 */
.ops-tag-1 {
	flex: 1;
	min-width: 0px;          /* ← 박스 최소 너비 */
	justify-content: center;
}

/* 3번 행 (ESG 운영체계) ← 이 숫자로 박스 너비 조절 */
.ops-tag-2 {
	flex: 1;
	min-width: 0px;          /* ← 박스 최소 너비 */
	justify-content: center;
}

/* 4번 행 (ESG 평가 및 개선관리) ← 이 숫자로 박스 너비 조절 */
.ops-tag-3 {
	min-width: 144px;          /* ← 박스 최소 너비 */
	justify-content: center;
}

/* 1번 행 설명 텍스트 전용 — ops-tag 스타일에서 아래 속성만 덮어씀 */
.ops-tag-desc {
	border: none;                    /* 테두리 */
	font-size: 16px;               /* ← 글자 크기 */
	font-weight: 500;                /* ← 글자 두께 (400=보통 / 500=중간 / 600=굵게) */
	color: #333232;                  /* ← 글자 색상 */
}

/* 5번 row (ESG 중장기 로드맵) — 메인 파란 배경 */
.ops-row.ops-last {
	background: #0160B2;
	border-color: #0160B2;
	margin-bottom: 0;
}
.ops-row.ops-last .ops-num {
	background: #FFFFFF;
	width: 40px;
    min-width: 40px;
    height: 40px;           /* ← 추가: 너비=높이 → 정원 */
    border-radius: 50%;     /* ← 추가: 동그랗게 */
    align-self: center;     /* ← 추가: 행 세로 중앙 정렬 */
    margin: 0 6px;          /* ← 추가: 좌우 여백 */
	color: #333232;
}
.ops-row.ops-last .ops-title-cell {
	background: transparent;
	border-right-color: rgba(255,255,255,0.25);
	font-size: 15px;
	color: #fff;
}
.ops-row.ops-last .ops-tags {
	padding: 12px 16px;
	gap: 8px;
}

/* 5번 row 단계 태그 — 파란 명도 차이 */
.ops-tag-solid {
	font-family: 'Noto Sans KR', 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
	display: -webkit-inline-box;
	display: -ms-inline-flexbox;
	display: inline-flex;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	height: 30px;
	padding: 0 16px;
	border-radius: 2px;
	font-size: 14px;
	font-weight: 500;
	letter-spacing: -0.2px;
	color: #333232;
	white-space: nowrap;
}
.ops-tag-solid.t1 { background: #F2F2F2; }
.ops-tag-solid.t2 { background: #F2F2F2; }
.ops-tag-solid.t3 { background: #F2F2F2; }

/* 행 사이 화살표 */
.ops-arrow {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	    -ms-flex-pack: center;
			justify-content: center;
			/*
	        justify-content: flex-start;
			padding-left: 600px;*/        /* ← 이 값으로 위치 조절 */
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	height: 18px;
	color: #9bb0c8;
	font-size: 15px;
	line-height: 1;
	margin: 0 0 2px;
}

/* --- Roadmap 섹션 — 회색 배경 전폭 처리 --- */
.esgRoadmap .esg-roadmap-section {
	background: #F2F2F2;
	text-align: center;
	padding: 50px 0 64px;
	margin-bottom: 0;
}

/* Roadmap 인트로 텍스트 */
.roadmap-intro {
	font-family: 'Noto Sans KR', 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
	text-align: center;
	font-size: 18px;
	font-weight: 500;
	color: #0160B2;
	letter-spacing: -0.5px;
	margin-bottom: 40px;
	line-height: 1.8;
}

/* 타임라인 트랙 */
.roadmap-timeline-wrap { margin-bottom: 18px; }

.roadmap-timeline-track {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	height: 6px;
	border-radius: 3px;
	                             /* overflow: hidden 제거 — 세그먼트 분리를 위해 */
	gap: 24px;                   /* ← 화살표 너비(16px + padding 4px×2)와 일치 */
}
.tt-seg {
	-webkit-box-flex: 1;
	    -ms-flex: 1;
	        flex: 1;
	border-radius: 3px;
}
.tt-s1 { background: #1A70B9; }
.tt-s2 { background: #5EB4E7; }
.tt-s3 { background: #ACACAC; }

.roadmap-year-labels {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	margin-top: 7px;
	gap: 24px;                   /* ← roadmap-timeline-track gap과 동일하게 유지 */
}
.yr-label {
	-webkit-box-flex: 1;
	    -ms-flex: 1;
	        flex: 1;
	font-family: 'Noto Sans KR', 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
	font-size: 11px;
	font-weight: 600;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	gap: 5px;
}
.yr-tick {
	display: inline-block;
	width: 1px;
	height: 8px;
	background: currentColor;
	opacity: 0.4;
}
.yl-s1 { color: #1A70B9; }
.yl-s2 { color: #0060B2; }
.yl-s3 { color: #003E7E; }

/* 카드 행 */
.roadmap-cards {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	gap: 0;
	-webkit-box-align: stretch;
	    -ms-flex-align: stretch;
	        align-items: stretch;
}

.roadmap-arrow {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	-ms-flex-item-align: center;
	    align-self: center;
	padding: 0 4px;
	-ms-flex-negative: 0;
	    flex-shrink: 0;
}

.roadmap-card {
	-webkit-box-flex: 1;
	    -ms-flex: 1;
	        flex: 1;
	background: #fff;
	border-radius: 3px;
	overflow: hidden;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	    -ms-flex-direction: column;
	        flex-direction: column;
	-webkit-box-shadow: 0 2px 14px rgba(0,0,0,0.07);
	        box-shadow: 0 2px 14px rgba(0,0,0,0.07);
	opacity: 0;
	-webkit-animation: rmpFadeUp 0.45s ease forwards;
	        animation: rmpFadeUp 0.45s ease forwards;
}
.rc-phase1 { -webkit-animation-delay: 0.15s; animation-delay: 0.15s; }
.rc-phase2 { -webkit-animation-delay: 0.28s; animation-delay: 0.28s; }
.rc-phase3 { -webkit-animation-delay: 0.41s; animation-delay: 0.41s; }

/* 카드 상단 컬러 스트라이프 */
.card-stripe { height: 3px; }
.rc-phase1 .card-stripe { background: #0160B2; }
.rc-phase2 .card-stripe { background: #5EB4E7; }
.rc-phase3 .card-stripe { background: #ACACAC; }

/* 카드 헤드 */
.card-head {
	padding: 16px 18px 14px;
	text-align: center;
	border-bottom: 1px solid #edf0f3;
}
.card-version {
	font-family: 'Noto Sans KR', 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
	font-size: 20px;
	font-weight: 700;
	letter-spacing: -1px;
}
.rc-phase1 .card-version { color: #1A70B9; }
.rc-phase2 .card-version { color: #5EB4E7; }
.rc-phase3 .card-version { color: #ACACAC; }

.card-year-badge {
	font-family: 'Noto Sans KR', 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
	display: inline-block;
	font-size: 11px;
	color: #333232;
	font-weight: 400;
	margin-left: 6px;
	vertical-align: middle;
}

/* 카드 바디 */
.card-body {
	padding: 16px 18px 4px;
	-webkit-box-flex: 1;
	    -ms-flex: 1;
	        flex: 1;
}
.card-eyebrow {
	font-family: 'Noto Sans KR', 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 1px;
	text-transform: uppercase;
	margin-bottom: 5px;
}
.rc-phase1 .card-eyebrow { color: #1A70B9; }
.rc-phase2 .card-eyebrow { color: #5EB4E7; }
.rc-phase3 .card-eyebrow { color: #ACACAC; }

.card-title {
	font-family: 'Noto Sans KR', 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
	font-size: 15px;
	font-weight: 600;
	color: #1B2A4A;
	letter-spacing: -0.5px;
	margin: 0 0 14px;
	padding-bottom: 10px;
	border-bottom: 1px solid #edf0f3;
}

/* 카드 리스트 */
.card-list { list-style: none; padding: 0; margin: 0 24px 14px; }
.card-list li {
	font-family: 'Noto Sans KR', 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
	font-size: 12.5px;
	color: #4d5c6e;
	padding: 5px 0 5px 13px;
	position: relative;
	letter-spacing: -0.2px;
	line-height: 1.5;
	border-bottom: 1px solid #f4f6f9;
	text-align: left;
}
.card-list li:last-child { border-bottom: none; }
.card-list li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 11px;
	width: 4px;
	height: 4px;
	border-radius: 50%;
}
.rc-phase1 .card-list li::before { background: #1A70B9; }
.rc-phase2 .card-list li::before { background: #5EB4E7; }
.rc-phase3 .card-list li::before { background: #ACACAC; }

/* 카드 푸터 */
.card-footer {
	min-height: 40px;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	-webkit-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;
	padding: 12.5px 18px;
	font-family: 'Noto Sans KR', 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
	font-size: 14px;
	font-weight: 500;
	color: rgba(255,255,255,0.93);
	text-align: center;
	line-height: 1.6;
	letter-spacing: -0.2px;
}
.rc-phase1 .card-footer { background: #1A70B9; }
.rc-phase2 .card-footer { background: #5EB4E7; }
.rc-phase3 .card-footer { background: #ACACAC; }


/* ============================================================
   ESG 정책 및 보고서 (.esgPolicy)
============================================================ */

/* --- 카테고리 선택 영역 --- */
.esgpol-category {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	border: 1px solid #dde3ec;
	margin-bottom: 30px;
}

.esgpol-cat-item {
	-webkit-box-flex: 1;
	    -ms-flex: 1;
	        flex: 1;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	    -ms-flex-direction: column;
	        flex-direction: column;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	-webkit-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;
	padding: 36px 20px 32px;
	text-align: center;
	cursor: default;
}

/* 세로 구분선 */
.esgpol-cat-divider {
	width: 1px;
	background: #dde3ec;
	-ms-flex-item-align: stretch;
	    align-self: stretch;
}

.esgpol-cat-icon {
	display: block;
	line-height: 0;
}

.esgpol-cat-label {
	font-family: 'Noto Sans KR', 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
	display: block;
	margin-top: 14px;
	font-size: 14px;
	letter-spacing: -0.3px;
}
.esgpol-cat-active .esgpol-cat-label {
	color: #2B62C8;
	font-weight: 500;
}
.esgpol-cat-inactive .esgpol-cat-label {
	color: #999;
	font-weight: 400;
}

/* --- 목록 테이블 --- */
.esgpol-table {
	width: 100%;
	border-top: 2px solid #444;
	border-collapse: collapse;
	table-layout: fixed;
}

.esgpol-table caption {
	/* 접근성: 시각적으로 숨김 */
	position: absolute;
	left: -9999px;
	top: auto;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.esgpol-table thead tr {
	background: #e8e8e8;
}

.esgpol-table th {
	font-family: 'Noto Sans KR', 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
	padding: 13px 10px;
	text-align: center;
	font-size: 14px;
	font-weight: 500;
	color: #333;
	border-bottom: 1px solid #ccc;
	letter-spacing: -0.3px;
}
.esgpol-table th.cent { text-align: center; }

.esgpol-table tbody tr { background: #fff; }
.esgpol-table tbody tr:hover { background: #f7f9fc; }

.esgpol-table td {
	font-family: 'Noto Sans KR', 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
	padding: 15px 10px;
	text-align: center;
	font-size: 14px;
	color: #666;
	border-bottom: 1px solid #e4e4e4;
	letter-spacing: -0.3px;
	word-break: keep-all;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* 제목 컬럼 */
.esgpol-table td.tit {
	text-align: center;
	white-space: normal;
}
.esgpol-table td.tit a {
	color: #2B62C8;
	text-decoration: none;
	font-size: 14px;
	letter-spacing: -0.3px;
}
.esgpol-table td.tit a:hover { text-decoration: underline; }

/* 다운로드 버튼 */
.esgpol-dl-btn {
	display: -webkit-inline-box;
	display: -ms-inline-flexbox;
	display: inline-flex;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	gap: 4px;
	text-decoration: none;
	color: #555;
	font-size: 13px;
	letter-spacing: -0.2px;
}
.esgpol-dl-btn:hover { color: #2B62C8; }
.esgpol-dl-btn img {
	display: inline-block;
	vertical-align: middle;
}


/* ============================================================
   ESG 경영 선언 (.esgManagementDeclaration)
   sub.css에 의존하지 않고 esg.css에서 완전하게 명시
============================================================ */

/* H3 제목 섹션 하단 여백 조절 (sub.css 기본값 80px 덮어쓰기)
   ↓ margin-bottom 값을 바꾸면 "ESG 경영 선언" 과 리드 문구 사이 간격이 조절됨 */
.esgManagementDeclaration .location + .section {
	margin-bottom: 30px;
}

/* esg_txt 컨테이너 기본 서식 (sub.css 동일 규칙 + esg.css에서 재보장) */
.esgManagementDeclaration .esg_txt {
	font-family: 'Noto Sans KR', 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
	font-size: 18px;
	line-height: 1.9;
	color: #333232;
	letter-spacing: -1px;
}

/* 리드 문구 — 파란색 강조 중앙 정렬 */
.esgManagementDeclaration .esg_txt .lead {
	font-family: 'Noto Sans KR', 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
	margin-bottom: 60px;
	color: #1B70BA;
	font-size: 20px;
	font-weight: 500;
	text-align: center;
	letter-spacing: -1px;
	line-height: 1.2;
}

/* 서브 문구 — index.jsp h2 > p 동등 서식 (main.css 기준: 18px / weight:400 / center) */
.esgManagementDeclaration .esg_txt .esgdecl-subtitle {
	font-family: 'Noto Sans KR', 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
	font-size: 28px;
	font-weight: 450;
	color: #555;
	text-align: center;
	letter-spacing: -1px;
	line-height: 1.85;
	position: relative;
	padding-bottom: 40px;
	margin-bottom: 48px;
}
/* 서브 문구 하단 틸 장식선 */
.esgManagementDeclaration .esg_txt .esgdecl-subtitle::after {
	content: '';
	position: absolute;
	left: 50%;
	bottom: 0;
	-webkit-transform: translateX(-50%);
	        transform: translateX(-50%);
	width: 40px;
	height: 3px;
	background: #167B8C;
	border-radius: 2px;
}

/* sub.css padding-left:120px 제거 */
.esgManagementDeclaration .esg_txt .esg_declaration_body {
	padding-left: 0;
}

/* 마무리 문구 — 중앙 정렬 */
.esgManagementDeclaration .esg_txt .closing {
	font-family: 'Noto Sans KR', 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
	font-size: 18px;
	font-weight: 500;
	text-align: center;
	padding: 0 60px;
	line-height: 2;
	letter-spacing: -0.8px;
	margin-bottom: 50px;
	color: #4d5c6e;
}

/* 서명 — 중앙 정렬 */
.esgManagementDeclaration .esg_txt .sign {
	font-family: 'Noto Sans KR', 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
	padding-top: 10px;
	text-align: center;
	font-size: 18px;
	font-weight: 500;
	line-height: 1.9;
	letter-spacing: -0.5px;
	color: #333232;
}

/* ---- 선언 항목 카드 리스트 ---- */
.esgdecl-list {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	    -ms-flex-direction: column;
	        flex-direction: column;
	gap: 10px;
	margin: 0 0 50px;
}

.esgdecl-item {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: stretch;
	    -ms-flex-align: stretch;
	        align-items: stretch;
	background: #fff;
	border: 1px solid #dde4ed;
	border-left: 4px solid #0160B2;
	border-radius: 0 4px 4px 0;
	overflow: hidden;
	-webkit-box-shadow: 0 2px 10px rgba(22, 123, 140, 0.06);
	        box-shadow: 0 2px 10px rgba(22, 123, 140, 0.06);
	-webkit-transition: -webkit-box-shadow 0.2s ease, -webkit-transform 0.2s ease;
	        transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.esgdecl-item:hover {
	-webkit-box-shadow: 0 6px 22px rgba(22, 123, 140, 0.13);
	        box-shadow: 0 6px 22px rgba(22, 123, 140, 0.13);
	-webkit-transform: translateY(-2px);
	        transform: translateY(-2px);
}

/* 번호 영역 */
.esgdecl-num {
	font-family: 'Noto Sans KR', 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
	font-size: 26px;
	font-weight: 700;
	color: #1B70BA;
	letter-spacing: -1px;
	line-height: 1;
	width: 72px;
	min-width: 72px;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	-webkit-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;
	background: #F2F2F2;
	-ms-flex-negative: 0;
	    flex-shrink: 0;
}

/* 번호/텍스트 세로 구분선 */
.esgdecl-divider {
	width: 1px;
	background: #dde4ed;
	-ms-flex-negative: 0;
	    flex-shrink: 0;
}

/* 텍스트 영역 */
.esgdecl-text {
	font-family: 'Noto Sans KR', 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
	font-size: 15px;
	line-height: 1.9;
	color: #333;
	letter-spacing: -0.4px;
	margin: 0;
	padding: 20px 28px;
}


/* ============================================================
   반응형 — 960px 이하
   sub.css @media 블록에 추가하지 않음
============================================================ */
@media (max-width: 960px) {

	/* Ops-flow: 좁은 화면 대응 */
	.ops-title-cell { min-width: 120px; font-size: 12px; padding: 12px 12px; }
	.ops-tag { font-size: 11.5px; height: 24px; padding: 0 9px; }
	.ops-tag-1 { min-width: 80px; }   /* ← 모바일 너비 조절 */
	.ops-tag-2 { min-width: 100px; }  /* ← 모바일 너비 조절 */
	.ops-tag-3 { min-width: 120px; }  /* ← 모바일 너비 조절 */
	.ops-tag-solid { height: 26px; padding: 0 12px; font-size: 11.5px; }

	/* 로드맵 카드: 세로 정렬, 화살표 숨김 */
	.roadmap-cards {
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		    -ms-flex-direction: column;
		        flex-direction: column;
	}
	.roadmap-arrow { display: none; }

	/* 연도 레이블 */
	.roadmap-year-labels {
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		    -ms-flex-direction: column;
		        flex-direction: column;
		gap: 4px;
	}

	/* 카테고리 아이콘 */
	.esgpol-cat-label { font-size: 12px; }

	/* 테이블 */
	.esgpol-table th,
	.esgpol-table td { font-size: 12px; padding: 11px 6px; }
	.esgpol-table td.tit { white-space: normal; }

	/* 다운로드 버튼 — 텍스트 숨김, 아이콘만 표시 */
	.esgpol-dl-btn span { display: none; }

	/* 선언 도입/마무리 — 패딩 축소 */
	.esgManagementDeclaration .esg_txt .declare,
	.esgManagementDeclaration .esg_txt .closing { padding: 0 10px; }

	/* 선언 카드 — 번호 영역 축소 */
	.esgdecl-num { width: 52px; min-width: 52px; font-size: 20px; }
	.esgdecl-text { font-size: 13px; padding: 16px 16px; }
}