/* 비디오 */
.video{
    background-image : url('/statics/xdimg/bg.png');
}

.video-wrap{
    display : flex;
    flex-wrap : wrap;
}

.video-wrap > div.img{
    text-align : right;
    padding-right : 3%;
    width : 40%;
}

.video-wrap .img-mo{
    display : none;
}

.video-wrap > div.video-slide{
    width : 60%;
}

.video-wrap > div.video-slide .swiper-container2{
    width : 80% !important;
}

.video-wrap > div.img img{
    width : 50%;
}

.video-wrap .swiper-slide > div{
    position : relative;
    width : 100%;
    height : 0;
    padding-top : 60%;
}

.video-wrap .swiper-slide > div > iframe{
    position : absolute;
    width : 100%;
    height : 100%;
    top : 0;
    left : 0;
}

.swiper-container2 .swiper-button-prev{
    background-image : url('/statics/xdimg/left.png');
    background-size : 50px;
    width : 50px;
    height : 50px;
}

.swiper-container2 .swiper-button-next{
    background-image : url('/statics/xdimg/right.png');
    background-size : 50px;
    width : 50px;
    height : 50px;
}

.swiper-container2 .swiper-pagination-bullet:nth-child(1){
    background-image : url('/statics/xdimg/video1.jpg');
}



.swiper-container2.swiper-container-horizontal > .swiper-pagination-bullets{
    position : static;
    bottom : -86px;
}

.swiper-container2 .swiper-pagination{
    display : flex;
    margin-top : 10px;
}

.swiper-container2.swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet{
    display : block;
    width : 100%;
    padding-top : 10%;
    border-radius : 0;
    margin : 0;
    margin-right : 5%;
    background-size : 100%;
}

.swiper-container2.swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet:last-child{
    margin-right : 0;
}

.video-thumbnails{
    width : 80%;
    margin-top  :10px;
    display : none;
}

.video-thumbnails li{
    margin-right : 5%;
}

.video-thumbnails li:last-child{
    margin-right : 0;
}

@media screen and (max-width : 800px){
    .video-wrap > div.img{
        display : none;
    }

    .video-wrap .img-mo{
        display : block;
        width : 50%;
        margin : 0 auto 30px;
    }

    .video-wrap > div.video-slide{
        width : 90%;
        margin : 0 auto;
    }

    .video-wrap > div.video-slide .swiper-container2{
        width : 100% !important;
    }

    #index .swiper-container2 .swiper-slide{
        height : auto;
    }

    .video-thumbnails{
        width : 100%;
    }
}