@charset "utf-8";

#content .main-swiper{background-image:none; display:flex; align-items:center; justify-content:center;}

#content .slide-next{top: auto; bottom: 1px; right:1px; background: #d54b49; color: #fff; width: 40px;height: 40px;}
#content .slide-prev{top: auto; bottom: 1px; left: auto; right: 83px; background: #d54b49; color: #fff; width: 40px;height: 40px;}

#content .slide-pause,
#content .slide-play{position:absolute; top: auto; bottom: 1px; left: auto; right: 40px; background: #d54b49; color: #fff; width: 40px;height: 40px;z-index:10; cursor:pointer; margin: 0 2px;}

#content .service-next{top: 35px; bottom: auto; right:0; border: 1px solid #a6a6a6; width: 35px; height: 35px; background-image: url(/wp-content/themes/seoul-e/_br/images/arrow.png); background-position: center; background-size: auto; transform: rotate(180deg); }
#content .service-next:hover{background-image: url(/wp-content/themes/seoul-e/_br/images/arrow_on.png); background-color: #d54b49; border: none;}

#content .service-prev{top: 35px; bottom: auto; left: auto; right: 40px; border: 1px solid #a6a6a6; width: 35px; height: 35px; background-image: url(/wp-content/themes/seoul-e/_br/images/arrow.png); background-position: center; background-size: auto;}
#content .service-prev:hover{background-image: url(/wp-content/themes/seoul-e/_br/images/arrow_on.png); background-color: #d54b49; border: none;}

#content .media-swiper-btn,
#content .media-swiper-btn2{position: absolute;top: 42%;}
#content .webtoon-swiper-btn{position: absolute;top: 55%;}

#content .media-swiper-btn div,
#content .media-swiper-btn2 div,
#content .webtoon-swiper-btn div{border: 1px solid #a6a6a6; width: 35px; height: 35px; padding: 8px 10px;}

#content .media-swiper-btn:hover div,
#content .media-swiper-btn2:hover div,
#content .webtoon-swiper-btn:hover div{border: none;}

#content .media-next{left:auto; right: -60px; }
#content .media-next div{background-image: url(/wp-content/themes/seoul-e/_br/images/arrow.png); background-position: center; background-size: auto; transform: rotate(180deg);}
#content .media-next:hover div{background-image: url(/wp-content/themes/seoul-e/_br/images/arrow_on.png); background-color: #d54b49;}
#content .media-prev{left: -60px; right: auto;}
#content .media-prev div{background-image: url(/wp-content/themes/seoul-e/_br/images/arrow.png); background-position: center; background-size: auto;}
#content .media-prev:hover div{background-image: url(/wp-content/themes/seoul-e/_br/images/arrow_on.png); background-color: #d54b49;}

#content .photo-buttons,
#content .video-buttons{display: flex; justify-content: flex-end; margin-top: 10px; padding-bottom: 20px;}
#content .photo-buttons div,
#content .video-buttons div{width: 20px; height: 20px; text-align: center; margin-left: 10px; cursor: pointer;}

.swiper-pagination{display:none}

@media only screen and (max-width:1280px){
    #content .service-next{right: 4%; top: 25px;}
    #content .service-prev{right: 9%; top: 25px;}
}

@media only screen and (max-width:768px){
    .service.swiper-container,
    .media .swiper-container{padding-bottom: 35px;}

    #content .service-next,
    #content .service-prev,
    #content .media-next,
    #content .media-prev{display: none;}

    #content .slide-next,
    #content .slide-prev,
    #content .slide-pause,
    #content .slide-play{width: 30px; height: 30px;}

    #content .slide-prev{right: 62px;}
    #content .slide-pause,
    #content .slide-play{right: 29px;}

    .swiper-pagination{display:block;}
    .swiper-pagination-fraction, 
    .swiper-pagination-custom, .swiper-container-horizontal > .swiper-pagination-bullets{position: relative; top: 10px;}
    .swiper-pagination-bullet-active{background: #d54b49; }

    #content .photo-buttons, 
    #content .video-buttons{justify-content: center;}
}

@media only screen and (max-width:460px){
    #content .slide-next,
    #content .slide-prev,
    #content .slide-pause,
    #content .slide-play{width: 25px; height: 25px;}

    #content .slide-prev{right: 53px;}
    #content .slide-pause,
    #content .slide-play{right: 25px;}

    #content .media-swiper-btn, 
    #content .media-swiper-btn2,
    #content .webtoon-swiper-btn{top: 45%;}

    #content .media-swiper-btn div,
    #content .media-swiper-btn2 div,
    #content .webtoon-swiper-btn div{width: 25px; height: 25px; padding: 5px 8px;}

    #content .media-prev{left: -50px;}
    #content .media-next{right: -50px;}

    #content .webtoon-swiper-btn{top: 35%;}
}