@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%;}
}


/*new photos, videos*/
div.media-pv {
    display: flex;
    justify-content: space-between;
}
.media-pv-ele {
    position: relative;
    flex:1;
    max-width: 49%;
}
.media-pv .swiper-pagination {display: none;}

.media-pv-ele .swiper-slide img {
    width: 100%;
    height: 300px;
    object-fit: cover;
}

#content .media .media-pv-ele ul li {
    height: auto;
}

.btn-23 {
    width: 35px;
    height: 35px;
    position:absolute;
    overflow: hidden;
    background: rgba(255,255,255, 0.6);
    z-index: 2;
    cursor: pointer;
    transition: opacity .4s ease-in-out;
}
.btn-23:hover {
    background: rgba(255,255,255, 1);
}

.gg-next {
    right: 0;

}
.gg-pre {
    left: 0;
    transform:rotate(180deg);
}

.pv-pre-next {
    position: absolute;
    left: 0;top: 150px;right: 0;
    display: flex;
    justify-content:space-between;
    align-items: center;


}


.btn-23 img {
    display: block;
    width: 100%;
}

/*.btn-23 {
    visibility: hidden;
    opacity: 0;
    transition: opacity .4s ease-in-out;

}
.pv-pre-next.pv-on .btn-23 {
    visibility: visible;
    opacity: 1;
    transition: opacity .6s ease-in-out;
}*/



.photo2-pagination {
    border: 1px solid green;
    z-index: 9999;
}

.pv-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}
.pv-title p {
    font-size: 32px;
    font-weight: 700;
}

.media-pv-ele .swiper-slide h5 {
    color: #161616;
    text-align: center;
    margin-top: 10px;
}
.media-pv-ele .swiper-slide img {
    min-height: 300px;
}

@media screen and (max-width: 700px) {
    div.media-pv {
        display: block;
        margin-left: 0;
        margin-right: 0;
    }
    .media-pv .media-photos, .media-pv .media-videos {
        flex:1;
        max-width: 100%;
        margin-right: 0;
    }

    .pv-title p {
        font-size: 22px;
        font-weight: 700;
    }

    .pv-pre-next {
        /*top: 192px;*/
    }
}


/*소셜 썸네일 조정*/
.social-content .social-box img {
    height: 190px;
}