/* 메인 페이지에서 사용하는 progress bar 스타일시트 */

/* Banner Slider - 바닐라 상태 */
.banner-slider {
  overflow: hidden;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
}
.banner-slider .item {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transform: scale(1.1);
  clip-path: inset(0% 0% 0% 0%);
  -webkit-clip-path: inset(0% 0% 0% 0%);
}
.banner-slider .item:first-child {
  opacity: 1;
}
.banner-slider .item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Progress Bar */
.progress-bar-container {
  /* width: 100%; */
  width: 250px;
  display: flex;
  position: absolute;
  bottom: 0px;
  left: 50%;
  transform: translate(-50%, 0);
  bottom: 40px;
  /* left: 0; */
  /* gap: 10px; */
  padding: 0 15px;
  box-sizing: border-box;
  z-index: 10;
}
#progress-bars {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.progress-bar-container .item {
  display: block;
  width: 100%;
  min-width: 30px;
  max-width: 30px;
  padding: 0;
  cursor: pointer;
  color: white;
  transition: max-width 0.5s ease-in-out;
}
.progress-bar-container .item:first-of-type {
  margin-right: 5px;
}
.progress-bar-container .item:not(:first-of-type):not(:last-of-type) {
  margin-left: 5px;
  margin-right: 5px;
}
.progress-bar-container .item:last-of-type {
  margin-left: 5px;
}
.progress-bar-container .item span.progress-bar {
  width: 100%;
  height: 4px;
  background-color: var(--color-bg-black-03);
  display: block;
  border-radius: 2px;
}
.progress-bar-container .item span.progress-bar .in-progress {
  background-color: white;
  width: 0%;
  min-width: 0%;
  max-width: 100%;
  height: 4px;
  border-radius: 2px;
}

#autoplay-button {
  cursor: pointer;
  position: absolute;
  top: 50%;
  right: -20px;
  transform: translate(0, -50%);
  width: fit-content;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

/* Tablet */