/* BASIC css start */
    html,
    body {
        position: relative;
        height: 90%;
    }

    .main-swiper {
        width: 100%;
        height: 90%;
    }

    .main-swiper .swiper-slide {
        text-align: center;
        font-size: 18px;
        background: #ececec;
        display: flex !important;
        justify-content: center;
        align-items: center;
        height: 60vh;
    }

    .main-swiper .swiper-button-next,
    .main-swiper .swiper-button-prev {
        color: #a5836a;
        background: none;
    }

    /* progress bar */
    .main-swiper-progress-bar {
        position: relative;
        width: 100%;
        height: 2px;
    }

    .main-swiper-progress-bar .slide_progress-bar {
        position: absolute;
        background: #ddd;
        width: 100%;
        height: 100%;
        margin-left: 5px;
    }

    .main-swiper-progress-bar .slide_progress-bar:after {
        position: absolute;
        top: 0;
        left: 0;
        background: #a5836a;
        height: 100%;
        width: 0;
        content: "";
        transition: 0.1s linear;
    }

    .main-swiper-progress-bar.animate .slide_progress-bar {
        opacity: 1;
    }

    .main-swiper-progress-bar.animate .slide_progress-bar:after {
        animation: progress 3s linear infinite;
        width: 100%;
    }

    .main-swiper-progress-bar.animate .slide_progress-bar.play_btn:after {
        animation: progress 3s linear infinite;
        width: 100%;
        animation-play-state: running;
    }

    .main-swiper-progress-bar.animate .slide_progress-bar.stop_btn:after {
        animation-play-state: paused;
    }

    .main-swiper-progress-bar.animate .slide_progress-bar.reset:after {
        animation: none;
        width: 0;
    }
    
    .swiper_bottom {
        display: flex;
        align-items: center;
        margin-top: 5px;
    }

    /* pagination */
    .main-swiper-pagination {
        display: flex;
        justify-content: center;
        align-items: center;
        width: fit-content !important;
    }

    .main-swiper-pagination .swiper-pagination-bullet {
        background: #7F7F7F;
        opacity: 1;
        width: 10px;
        height: 10px;
        margin-right: 5px;
    }

    .main-swiper-pagination .swiper-pagination-bullet-active {
        background: #fff;
        border: 2px solid #a5836a
    }

    /* 슬라이드 재생/정지 버튼 */
    .playstop_btn {
        margin-left: 5px;
    }

    .playstop_btn > div {
        width: 23px;
        height: 23px;
        cursor: pointer;
    }

    .playstop_btn > div i {
        display: block;
        color: #a5836a;
        font-size: 23px;
    }

    /* progress bar animation */
    @keyframes progress {
        0% {
            width: 0;
        }

        100% {
            width: 100%;
        }
    }
/* BASIC css end */