@charset "utf-8";

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

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

#content .slide-box .main-swiper img{height:16px;}

#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;}
#content .photo-buttons div img, 
#content .video-buttons div img{height:18px;}

.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:63px;}
    #content .slide-pause,
    #content .slide-play{right:30px;}

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

    #content .photo-buttons, 
    #content .video-buttons{justify-content:center;margin-top:10px;}
}

@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%;}
}