/* 
 * 메인페이지의 swiperjs를 설정후 조정하는 css파일임
 * Created on : 2023. 12. 31.
 * Author     : JEONGMIN KIM
 */
/*기존 CSS OVERWRITER 및 신규 필요*/
.mainVisual-pager {
    z-index: 1;
}
/* 신규 */
.swiper-slide {
    display: flex;
}
/* 신규 */
.section .swiper-slide {
    height: auto !important;
}
/* 신규 */
.section .arrow-round.swiper-button-disabled {
    opacity: 0.5;
}
/* 신규 */
.swiper-scrollbar {
    left: 0 !important;
    bottom: -2px !important;
    z-index: 0 !important;
    height: 5px !important;
    background: transparent !important;
} 
/* 신규 */
.swiper-scrollbar .swiper-scrollbar-drag {
    background: var(--bs-black) !important;
    cursor: pointer;
}

/* 신규 */
.swiper-scrollbar:before {
    width: calc(100% - 24px);
    height: 1px;
    background: var(--bs-black);
    display: block;
    content: "";
    top: 50%;
    position: absolute;
    left: 0;
    transform: translateY(-50%);
}
/* 신규 */
.recomm-process-area .process-bar:before {
    display: none;
}
/* 신규 */
.swiper-fraction.swiper-pagination-fraction,
.swiper-fraction.swiper-pagination-fraction span {
    color: var(--bs-white);
    font-size: 24px;
    word-break: keep-all;
    width: auto !important; 
}

.best10-list-area {
    position: relative;
    left: unset;
    transform: none;
}
.best10-item {
    margin-right: 0;
    overflow: hidden;
}
.today-content-wrap.swiper-slide {
    display: flex;
}
.today-content-item:hover {
    box-shadow: rgba(0, 0, 0, 0.8) 4px 18px 10px -14px;
}
.list-thum-progress-type {
    flex-wrap: nowrap;
    gap: normal;
}

@media all and (max-width: 1220px){
    .best10-list-area {
        padding-left: 15px;
    }
    .list-thum-porgress-item {
        margin: inherit;
    }
}

@media all and (max-width: 980px){
    .list-thum-porgress-item {
        margin: unset;
    }
    .list-thum-porgress-item:nth-child(even){
        /*margin-top: 0 !important;*/
    }
    .swiper-grid-column>.swiper-wrapper {
        flex-direction: unset !important;
        align-items: flex-start;
    }
    .normal-swiper-wrap .swiper-slide{
        margin-top: 5px !important;
    }
}
@media all and (max-width: 800px){
    .recomm-item {
        max-width: none;
    }
    .swiper-grid-column>.swiper-wrapper {
        flex-direction: unset !important;
        align-items: flex-start;
    }
    .normal-swiper-wrap .swiper-slide{
        margin-top: 5px !important;
    }
}

/*모바일 사이즈 반응형*/
@media all and (max-width:600px) {
    .today-content-item {
        width: 98%;
    }
    .e-learning-item {
        width: 48%;
    }
    /*
    .list-thum-progress-type {
        flex-wrap: wrap;
    }
    */
    .swiper-grid-column>.swiper-wrapper {
        flex-direction: unset !important;
        align-items: flex-start;
    }
    .vod-info-area {
        height: 100%;
    }
    .list-thum-porgress-item {
        height : calc(100% / 2) !important;
        display: flex;
    }

    /*swiper Grid*/
    /* 신규 */
    .normal-swiper-wrap .swiper-slide{
        margin-top: 5px !important;
    }
}