@charset "utf-8";

/* 히어로 */
.main-hero-section {position: relative; display: flex; height: clamp(480px, 42.7vw, 820px); background-color: var(--color-static1); overflow: hidden;}
.main-hero-section .main-hero-bg {position: absolute; inset: 0;}
.main-hero-section .main-hero-bg img {width: 100%; height: 100%; object-fit: cover; animation: mainHeroBg 2.4s var(--ease-out) both;}
@keyframes mainHeroBg {from {transform: scale(1.06);}}
.main-hero-section .inner {position: relative; z-index: 1; display: flex; align-items: flex-end; padding-bottom: var(--space-120);}
.main-hero-section .hero-tit-wrap .display {box-shadow: var(--box-shadow);}
.main-hero-section .hero-tit-wrap .h4 {margin-top: var(--space-28);}

/* 소개 */
.main-intro-section {padding-block: var(--space-120); text-align: center;}
.main-intro-section .section-tit-wrap {margin-bottom: 0;}
.main-intro-section .section-tit-wrap .txt-wrap .body-l {max-width: 740px; margin: var(--space-20) auto 0;}
.main-intro-section .section-tit-wrap .btn-list {margin-top: var(--space-30);}

/* What We Do - 탭 + 이미지 */
.main-wwd-section {padding-block: var(--space-100);}
.main-wwd-section .section-tit-wrap {margin-bottom: var(--space-24);}
.main-wwd-section .tab-content {padding-top: var(--space-50);}
.main-wwd-section .wwd-img {max-width: 872px; margin: 0 auto; aspect-ratio: 872 / 400; border-radius: var(--radius); overflow: hidden; background-color: var(--section-bg2);}
.main-wwd-section .wwd-img img {width: 100%; height: 100%; object-fit: cover;}
.main-wwd-section .btn-list {justify-content: center; margin-top: var(--space-60);}

/* Clean Water Project - 가운데 정렬 이미지 행 (양끝 잘림) */
.main-water-section {padding-block: var(--space-120) var(--space-180); overflow: hidden;}
.main-water-section .section-tit-wrap {margin-bottom: 0;}
.main-water-section .section-tit-wrap .txt-wrap .body-m {margin-top: var(--space-14);}
.main-water-section .water-list {display: flex; justify-content: center; column-gap: 24px; margin-top: var(--space-100);}
.main-water-section .water-item {flex: none; width: clamp(260px, 29vw, 557px); aspect-ratio: 557 / 316; border-radius: var(--radius); overflow: hidden; background-color: var(--section-bg1);}
.main-water-section .water-item img {width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease-out);}

/* 후원 배너 */
.main-cta-section {position: relative; display: flex; align-items: center; min-height: clamp(360px, 25vw, 480px); padding-block: var(--space-80); background-color: var(--color-static1); overflow: hidden;}
.main-cta-section .main-cta-bg {position: absolute; inset: 0;}
.main-cta-section .main-cta-bg img {width: 100%; height: 100%; object-fit: cover;}
.main-cta-section .inner {position: relative; z-index: 1;}
.main-cta-section .section-tit-wrap {margin-bottom: 0;}
.main-cta-section .section-tit-wrap .h3 {max-width: 600px; color: var(--color-font6);}

/* 호버 */
@media (hover: hover) {
    .main-water-section .water-item:hover img {transform: scale(1.05);}
}

@media screen and (max-width: 1024px) {
    .main-hero-section .inner {padding-bottom: var(--space-80);}
}
@media screen and (max-width: 768px) {
    .main-hero-section {height: auto; min-height: 480px;}
    .main-hero-section .display br {display: none;}

    /* 이미지 행 - 가로 스크롤 */
    .main-water-section .water-list {justify-content: flex-start; column-gap: 16px; padding-inline: 24px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 24px; scrollbar-width: none;}
    .main-water-section .water-list::-webkit-scrollbar {display: none;}
    .main-water-section .water-item {width: 78%; scroll-snap-align: start;}
}
@media screen and (max-width: 480px) {
    .main-water-section .water-list {padding-inline: 20px; scroll-padding-inline: 20px;}
}