@charset "UTF-8";

/***********************  Swiper 관련 된 커스텀 CSS  ***************************/
.swiper-pagination {
  display: flex;
  gap: 10px;
  justify-content: center;
  bottom: 2.5rem !important;
}

.swiper-pagination-bullet {
  flex-shrink: 0;
  flex-grow: 0;
  width: 10px !important;
  height: 10px !important;
  display: block !important;
  background: rgba(255, 255, 255, 0.3) !important;
  position: relative;
  overflow: hidden;
  border-radius: 5px !important;
  margin: 0 !important;
}

.swiper-pagination-bullet.swiper-pagination-bullet-active {
  width: 50px !important;
  background: rgba(255, 255, 255, 0.3) !important;
}

/* 실제 진행 바 */
.swiper-pagination-bullet .progress {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 0%;
  background: #fff;
}