@charset "UTF-8";

/* --- 하단 배너 공통 스타일 --- */
.banner-container {
	flex-shrink: 0; 
    width: 100%;
    
    display: flex;
    flex-direction: column;
}

/* 배너 링크 공통 속성 (블록 요소로 만들어서 영역 꽉 채우기) */
.banner-link {
    display: block;
    width: 100%;
    text-decoration: none;
    overflow: hidden; /* 이미지가 영역을 벗어나지 않게 처리 */
}

/* 750x120 비율 (전체 너비) */
.banner-full {
	width: 100%;
    aspect-ratio: 750 / 120; 
}

/* 375x120 비율을 담는 가로 정렬 컨테이너 */
.banner-half-wrapper {
    display: flex;
    width: 100%;
}

/* 375x120 비율 (절반 너비) */
.banner-half {
    flex: 1; /* 가로 공간을 1:1로 나눔 */
    aspect-ratio: 375 / 120;
}

/* 내부 이미지 스타일 (비율 유지하며 꽉 채우기) */
.banner-container img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 이미지가 찌그러지지 않고 비율에 맞게 꽉 차도록 설정 */
    display: block;
}

/* --- Swiper 전용 커스텀 스타일 --- */
.top-banner-swiper {
    position: relative;
}

/* 페이지네이션 점 색상 */
/* .top-banner-swiper .swiper-pagination-bullet-active { */
/*     background: #8b2635 !important; */
/*     opacity: 1; */
/* } */

/* .top-banner-swiper .swiper-pagination-bullet { */
/*     background: #ccc; */
/* } */