.main-contents {
  /*padding-bottom: 60px;*/
}

.main-banner-area {
  width: 100%;
  position: relative;
  /* 배너와 하단 컨트롤러 사이 간격 조정 */
}

/* 슬라이더 영역 */
.main_banner_B {
  /* 하단 알약 컨트롤러가 배너 위에 겹치지 않고 아래에 위치하도록 공간 확보 */
  overflow: hidden; 
  position: relative;
}

.main_banner_B .swiper-wrapper {
  /* 높이를 고정값으로 설정 */
  height: 380px !important; 
}

.main_banner_B .swiper-slide {
  /* 슬라이드 높이 고정 */
  height: 380px !important;
  /* 카드 형태처럼 보이게 둥근 모서리 */
  border-radius: 12px; 
  overflow: hidden;
  /* 배경색 (이미지 로딩 전) */
  background-color: #f5f5f5;
  /* 약한 그림자 */
  box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}

.main_banner_B .banner-item {
  display: block; 
  width: 100%; 
  height: 100%;
}

.main_banner_B img {
  width: 100%; 
  height: 100% !important; 
  
  /* 👇 [중요] 이미지를 찌그러뜨리지 않고 380px 높이를 꽉 채웁니다. 
     (이미지 좌우가 조금 잘릴 수 있지만, 카드 모양이 예쁘게 잡힙니다.) */
  object-fit: cover; 
  
  display: block;
  transition: transform 0.3s ease;
}

/* 호버 시 확대 효과 */
.main_banner_B .swiper-slide:hover img {
  transform: scale(1.03);
}

/* --- 알약 페이지네이션 (위치 미세 조정) --- */
.custom-pagination-wrap {
  position: absolute; 
  bottom: 0; /* padding-bottom 영역에 위치 */
  left: 50%; 
  transform: translateX(-50%);
  display: flex; 
  align-items: center; 
  justify-content: center;
  background: #fff; 
  border: 1px solid #e5e5e5; 
  border-radius: 25px;
  padding: 5px 20px; 
  box-shadow: 0 4px 10px rgba(0,0,0,0.05); 
  gap: 20px;
  z-index: 10; 
  font-family: 'Montserrat', sans-serif;
  font-size: 14px; 
  color: #333; 
  font-weight: 700;
  min-width: 140px; /* 너비 고정 */
}

/* --- 모바일 반응형 --- */
@media (max-width: 768px) {
  .main_banner_B .swiper-wrapper,
  .main_banner_B .swiper-slide {
    /* 모바일에서는 높이를 조금 줄임 */
    height: 300px !important; 
    border-radius: 0px;
  }
}