@charset "utf-8";

/*===== swiper-slide 커스텀 =====*/
.control-box {display: inline-flex;}
.swiper .control-box button {font-size: 0;}
.control-box .arrow-box {display: flex; gap: 0.8rem;}
.control-box .arrow-box button {width: 40px; height: 40px; background-color: #fff; border-radius: 100%; position: relative;}
.control-box .arrow-box button::after {display: block; content: ''; width: 40px; height: 40px; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);}


/* stop play 버튼 */

.arrow-box button.btn-prev::after {background: url(../../images/btn_prev.svg) no-repeat center;}
.arrow-box button.btn-next::after {background: url(../../images/btn_next.svg) no-repeat center;}
.arrow-box button.btn-autoplay-stop::after {background: url(../../images/btn_pause.svg) no-repeat center;}
.arrow-box button.btn-autoplay-play::after {background: url(../../images/btn_play.svg) no-repeat center;}
.swiper-button-lock {display: block;}

.arrow-box .btn-autoplay-stop {display: inline-block;}
.arrow-box .btn-autoplay-play {display: none;}
.arrow-box.stop .btn-autoplay-stop {display: none;}
.arrow-box.stop .btn-autoplay-play {display: inline-block;}

/* progress-bar */
.progress-box {position: relative; display: flex; justify-content: space-between; width: 170px; height: 50px; z-index: 11;}
.progress-box .autoplay-progress {position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 10; width: 100px; height: 3px; background-color:rgba(255, 255, 255, 0.5);}
.progress-box .autoplay-progress svg {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 10;
    width: 100%;
    stroke-width: 4px;
    stroke: #fff;
    fill: none;
    stroke-dashoffset: calc(100 * (1 - var(--progress)));
    stroke-dasharray: 100;
}
.progress-box .swiper-pagination {  
    position: absolute;
    top: 50%;  
    transform: translateY(-50%);
    display: flex;
    justify-content: space-between;
    color: #fff;
    text-align: left;
}

/* 공공체육시설 > 시설안내 슬라이드 */
.swiper-container {position: relative;}
.swiper-container .swiper-pagination {position: absolute; bottom: 0px !important; left: 50% !important; transform: translateX(-50%);  width: fit-content !important; padding: 8px 40px; background-color: #222; border-radius: 12px 12px 0 0;}
.swiper-container .swiper-pagination-bullet {background: #eee; opacity: 1 !important;}
.swiper-container .swiper-pagination-bullet-active {background-color: var(--color-green) !important;}
.swiper_sisul {position: relative;}
.swiper_sisul .arrow-box {position: absolute; top: 50%; transform: translateY(-50%); z-index: 9; display: flex; justify-content: space-between; width: 100%;}
.swiper_sisul .arrow-box button {position: relative; text-indent: -9999em; width: 48px; height: 48px; background-color: #222;}
.swiper_sisul .arrow-box button::after {position: absolute; content: ''; width: 100%; height: 100%; top: 0; left: 0;}
.swiper_sisul .arrow-box button.btn-prev {border-radius: 0 8px 8px 0;}
.swiper_sisul .arrow-box button.btn-next {border-radius: 8px 0 0 8px;}
.swiper_sisul .arrow-box button.btn-prev::after {background: url(../../images/btn_prev_w.svg) no-repeat center;}
.swiper_sisul .arrow-box button.btn-next::after {background: url(../../images/btn_next_w.svg) no-repeat center;}