@charset "utf-8";

:root {
    --intro-bg-bottom: calc(0px - 140 / 1920 * 100vw);
}

.esg {overflow-x: hidden; overflow-y: visible;}

section:not(.cards) {width: 100%; padding: var(--section-padding-t) 0;}
section .inner {width: 100%; max-width: var(--inner2-width); padding: var(--inner2-padding);}


/* ──────────────────────────────────────────
   ESG 약속
────────────────────────────────────────── */
.intro, .policy {text-align: center;}
:is(.intro, .policy) .title {margin-bottom: clamp(0px, 0.56em, 20px);}
:is(.intro-desc, .policy-desc) p {width: 100%; font-size: clamp(14px, 1.25rem, 20px); font-weight: 500; line-height: 2; letter-spacing: var(--ls); white-space: pre-line;}

.intro {background: linear-gradient(to bottom, #E5F5F1 0%, #E5F5F1 95%, transparent 95%, transparent 100%); position: relative; z-index: 1;}
.intro-bg {width: calc(100% + 80px); max-width: unset; height: auto; aspect-ratio: 2000/424; position: absolute; bottom: -140px; bottom: var(--intro-bg-bottom); left: -40px; z-index: -1; pointer-events: none;}

.intro-content {display: flex; flex-direction: column; align-items: center; gap: clamp(40px, 6.25rem, 100px);}

.intro-logo-line-area {width: 100%; display: flex; gap: clamp(0px, 0.27em, 8px); align-items: center; justify-content: center; flex-wrap: wrap; color: var(--gray900); font-size: clamp(22px, 1.875rem, 30px); font-weight: 400; letter-spacing: var(--ls);}
.intro-logo-line {display: flex; gap: clamp(0px, 0.27em, 8px); align-items: center; justify-content: center;}
.intro-logo-line .logo {width: auto; height: clamp(22px, 1.875rem, 30px); aspect-ratio: 277/30;}
.intro-logo-line-area .txt-ha {font: inherit;}
.intro-logo-line-area .txt-ha1 {line-height: 1; white-space: nowrap;}

.intro-desc {color: var(--gray900);}

.boat-img {width: auto; height: clamp(240px, calc(587 / var(--inner) * 100vw), 587px); aspect-ratio: 1382/587; position: absolute; bottom: clamp(-220px, -13.75rem, 0px); right: clamp(-340.35px, -21.25rem, 0px); z-index: 1; pointer-events: none;}
.boat-img img {width: 100%; height: auto;}


/* ──────────────────────────────────────────
   Policy text section
────────────────────────────────────────── */
.policy {background: #fff; margin-top: clamp(0px, calc(141 / var(--inner) * 100vw), 141px);}


/* ──────────────────────────────────────────
   Cards (5 columns)
────────────────────────────────────────── */
.cards-list {width: 100%; display: grid; grid-template-columns: repeat(5, 1fr);}

.esg-card {padding: var(--section-padding-t) clamp(20px, 1.875rem, 30px) clamp(30px, 2.5rem, 40px); overflow: hidden; display: flex; align-items: flex-end; background-size: cover; background-position: center; background-repeat: no-repeat; color: var(--white); position: relative;}
.esg-card--01 {background-image: url('../img/esg/esg-card-01.png');}
.esg-card--02 {background-image: url('../img/esg/esg-card-02.png');}
.esg-card--03 {background-image: url('../img/esg/esg-card-03.png');}
.esg-card--04 {background-image: url('../img/esg/esg-card-04.png');}
.esg-card--05 {background-image: url('../img/esg/esg-card-05.png');}

.esg-card * {transition: all 0.3s ease-out;}

.esg-card .overlay {position: absolute; inset: 0; background: rgba(0, 0, 0, 0.7); pointer-events: none;}
.esg-card:hover .overlay {background: rgba(0, 124, 92, 0.7);}

.esg-card .card-content {position: relative; z-index: 1; width: 100%; display: flex; flex-direction: column;}

.esg-card .index {font-family: 'Bebas Neue', sans-serif; font-size: clamp(48px, 4.5rem, 72px); line-height: 0.8; letter-spacing: -0.002em; margin-bottom: clamp(0px, 0.56em, 40px);}

.esg-card .title {margin-bottom: 0.75em;}


/* 영문 */
html:lang(en) .intro-logo-line .logo {aspect-ratio: 330/30;}
html:lang(en) .info-logo img {height: clamp(20px, 1.75rem, 28px); aspect-ratio: 330/30;}
/* //영문 */





@media (max-width:1100px){
    .boat-img {bottom: clamp(-89px, -13.75vw, -50px);}
}

@media (max-width:1024px){
    .cards-list {grid-template-columns: unset;}
}