/*!
 * main-event-banner.css
 * 메인 페이지 "이벤트" 배너 — 이미지가 컨테이너 영역을 넘어 흘러나가는 현상 보정.
 * .box-event에 overflow:hidden + 슬라이드에 aspect-ratio + img object-fit:cover로
 * 모든 이미지가 동일한 비율로 컨테이너 안에 fit.
 */

.main-contents .section-notice .box-event,
.main-contents .section-notice .box-event .slider-wrapper,
.main-contents .section-notice .box-event .swiper.event-slider {
    overflow: hidden;
}

.main-contents .section-notice .box-event .swiper-slide {
    aspect-ratio: 5 / 3;
    overflow: hidden;
    border-radius: 8px;
}

.main-contents .section-notice .box-event .swiper-slide .link {
    display: block;
    width: 100%;
    height: 100%;
}

.main-contents .section-notice .box-event .swiper-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* aspect-ratio 미지원 환경 fallback (구형 브라우저) — padding-bottom 트릭 */
@supports not (aspect-ratio: 1) {
    .main-contents .section-notice .box-event .swiper-slide {
        position: relative;
        height: 0;
        padding-bottom: 60%; /* 5:3 = 60% */
    }
    .main-contents .section-notice .box-event .swiper-slide .link {
        position: absolute;
        inset: 0;
    }
}