@charset "utf-8";

/* 키비 이미지 */
#MEDIA-CENTER_MOVIE #SUB_KEYVISUAL .gu_sub_top .kv_img_area{background:url(../../images/media-center/movie/KV_media-center_movie_new.jpg) no-repeat center/cover;}

/* popup */
/*body.stop{overflow-y:hidden;}*/
#MEDIA-CENTER_MOVIE .popup{position:fixed; width:100%; height:100%;left:0;right:0;top:0;bottom:0;z-index:999; display:none;}
#MEDIA-CENTER_MOVIE .popup .dim{position: fixed; width: 100%; height: 100%; left: 0; top: 0; z-index: 1000; background: rgba(0,0,0,.8);}
#MEDIA-CENTER_MOVIE .popup .pop_inner{position: absolute; width:calc(100% - 40px); height:calc(100% - 160px); left: 50%; top:50%; z-index: 1001; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); max-width:1020px;max-height:705px}
#MEDIA-CENTER_MOVIE .popup .pop_inner .pop_img_box{width:100%; height:100%; position:absolute;top:50%;left:50%;-webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%);}
#MEDIA-CENTER_MOVIE .popup .pop_inner .pop_img_box img{max-width:100%; max-height:130%; position:absolute;top:50%;left:50%;-webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%);}
#MEDIA-CENTER_MOVIE .popup a.btn_close_pop{position:absolute;top:-50px;right:0; width:24px; height:24px;}
#MEDIA-CENTER_MOVIE .popup a.btn_close_pop:before{content:''; position:absolute;top:0;right:0;background:url("../../images/common/ico_close_white.png") no-repeat 0 0 / contain;width:24px;height:24px;}
/* #MEDIA-CENTER_MOVIE .popup a.btn_close_pop:hover:before{background:url("../../images/common/ico_close_blue.png") no-repeat 0 0 / contain;} */


/* contents */
#MEDIA-CENTER_MOVIE{padding-bottom:160px;}
#MEDIA-CENTER_MOVIE .gu_contents_wrap{padding-top:112px;}
#MEDIA-CENTER_MOVIE .gu_grid{padding-bottom:155px;}
#MEDIA-CENTER_MOVIE .gu_grid:last-child{padding-bottom:0;}
#MEDIA-CENTER_MOVIE .thumb{position:relative;}
#MEDIA-CENTER_MOVIE video{width:100%; position:absolute;top:0;left:0;right:0;bottom:0;}
#MEDIA-CENTER_MOVIE .data_text{ display:none;}
#MEDIA-CENTER_MOVIE .media_list .text_area{margin-top:36px; position:relative;word-break:keep-all;}
#MEDIA-CENTER_MOVIE .media_list .text_area .title{font-size:24px; line-height:40px; margin-bottom:8px;}

#MEDIA-CENTER_MOVIE .desc{font-size:18px; line-height:32px;color:#444;max-width:calc(100% - 190px);}
#MEDIA-CENTER_MOVIE .desc_more{width:100%; height:56px; margin-bottom: 36px}
#MEDIA-CENTER_MOVIE .more_scroll{position:relative;max-width:calc(100% - 220px); height:70px;overflow:hidden;-webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box;-webkit-transition:height 0.3s; -moz-transition:height 0.3s; -ms-transition:height 0.3s; -o-transition:height 0.3s; transition:height 0.3s;}
#MEDIA-CENTER_MOVIE .more_scroll .custom_scroll_content{position:absolute; font-size:18px; line-height:32px;color:#444;width: 100%; overflow-x:hidden; overflow-y:hidden; top:0; right:0; bottom:0; left: 0;padding-right:11px;-webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box;-webkit-transition:height 0.3s; -moz-transition:height 0.3s; -ms-transition:height 0.3s; -o-transition:height 0.3s; transition:height 0.3s;word-break:break-all;}
#MEDIA-CENTER_MOVIE .more_scroll .custom_scroll_content::-webkit-scrollbar{visibility: hidden;}
#MEDIA-CENTER_MOVIE .more_scroll .pane{position: absolute; width: 4px; right: 0; top: 8px; bottom: 0;max-height:calc(100% - 16px); visibility: hidden\9; opacity: 1; -webkit-transition: .2s; -moz-transition: .2s; -o-transition: .2s; transition: .2s;}
#MEDIA-CENTER_MOVIE .more_scroll .pane > .slider{position: relative;}
#MEDIA-CENTER_MOVIE .more_scroll .pane > .slider:after{content:""; display: block; width:100%; height:100%; background:#666;}
#MEDIA-CENTER_MOVIE .more_scroll:hover .pane, .pane.active, .pane.flashed{visibility : visible\9; opacity: 0.99;}

#MEDIA-CENTER_MOVIE .media_list .text_area .btn_more{font-size:14px; color:#666;cursor:pointer; display:inline-block; margin-top:15px;border-bottom: 1px solid #666;}
#MEDIA-CENTER_MOVIE .media_list .text_area .btn_more_close{font-size:14px; color:#666;cursor:pointer; margin-top:15px; display:none;}
#MEDIA-CENTER_MOVIE .media_list .text_area .gu_btn_sm_box{position:absolute;right:0;top:0;}

#MEDIA-CENTER_MOVIE .thumb_and_text {
    display: flex;
    margin-top: 48px;
}

#MEDIA-CENTER_MOVIE .thumb_and_text:first-child {
    margin-top: 0;
}

#MEDIA-CENTER_MOVIE .thumb_and_text .thumb {
    display: inline-block;
    width: 48%;
}

#MEDIA-CENTER_MOVIE .thumb_and_text .thumb img {
    width: 100%;
}

#MEDIA-CENTER_MOVIE .thumb_and_text .content_area {
    display: inline-block;
    width: 48%;
    margin-left: 4%;
}

#MEDIA-CENTER_MOVIE .thumb_and_text .content_area .title_area {font-size: 24px;font-weight: bold;    line-height: 1.5;}
#MEDIA-CENTER_MOVIE .thumb_and_text .content_area .title_area .cname {font-size: 22px;}

#MEDIA-CENTER_MOVIE .thumb_and_text .content_area .button_area {
    margin-top: 16px;
}

#MEDIA-CENTER_MOVIE .thumb_and_text .content_area .button_area .gu_btn_sm_box {
    text-align: left;
}


/* gallery */
#MEDIA-CENTER_MOVIE .media_gallery{font-size:0;}
#MEDIA-CENTER_MOVIE .media_gallery .gallery_thumb{margin-top:16px; position:relative;}
#MEDIA-CENTER_MOVIE .media_gallery .gallery_thumb ul{width:calc(100% - 88px);}
#MEDIA-CENTER_MOVIE .media_gallery .gallery_thumb ul>li{display:inline-block; vertical-align:top; margin-right:8px; position:relative;width:calc((100% / 6) - 8px);}
#MEDIA-CENTER_MOVIE .media_gallery .gallery_thumb ul>li:last-child{margin-right:0;}
#MEDIA-CENTER_MOVIE .media_gallery .gallery_thumb ul>li.on:before{content:''; position:absolute; width:100%; height:100%; left:0;top:0;background:#1634db;opacity:0.55;}
#MEDIA-CENTER_MOVIE .media_gallery .gallery_thumb .direction_area{position:absolute;top:50%;right:0; -webkit-transform:translateY(-50%); -moz-transform:translateY(-50%); -ms-transform:translateY(-50%); -o-transform:translateY(-50%); transform:translateY(-50%);}
#MEDIA-CENTER_MOVIE .media_gallery .gallery_thumb .direction_area>a{width: 10px; height: 16px; position: unset; display: inline-block; vertical-align: middle; margin-top:0;background: url(../../images/common/ico_arrow_black_right.png) no-repeat center / contain;}
#MEDIA-CENTER_MOVIE .media_gallery .gallery_thumb .direction_area>a.on{opacity:.4;pointer-events:none;}
#MEDIA-CENTER_MOVIE .media_gallery .gallery_thumb .direction_area .thumb_prev{-webkit-transform:rotate(180deg); -moz-transform:rotate(180deg); -ms-transform:rotate(180deg); -o-transform:rotate(180deg); transform:rotate(180deg);}
#MEDIA-CENTER_MOVIE .media_gallery .gallery_thumb .direction_area .thumb_next{margin-left: 44px;}

#MEDIA-CENTER_MOVIE .media_gallery .text_area ul>li{ display:none;}
#MEDIA-CENTER_MOVIE .media_gallery .text_area ul>li.on{ display:block;}
#MEDIA-CENTER_MOVIE .video_area .text_area .gu_btn_sm_box{top:50px}
#MEDIA-CENTER_MOVIE .video_area .text_area .gu_btn_sm_box.btn_video {top: 0;}




/* ================================== Laptop css ================================== */
@media all and (max-width: 1280px){

}

/* ================================== Tablet css ================================== */
@media all and (max-width: 1080px){
    #MEDIA-CENTER_MOVIE{padding-bottom:100px;}
    #MEDIA-CENTER_MOVIE .gu_grid{padding-bottom:80px;}
    /*#MEDIA-CENTER_MOVIE .media_gallery .gallery_thumb{overflow:hidden;}*/
    /*#MEDIA-CENTER_MOVIE .media_gallery .gallery_thumb ul{overflow-y:hidden; overflow-x:auto; width:100%;white-space:nowrap; margin-bottom:-16px;}*/
    #MEDIA-CENTER_MOVIE .media_gallery .gallery_thumb ul{overflow-y:hidden; overflow-x:auto; width:100%;white-space:nowrap; padding-bottom:10px;}
    #MEDIA-CENTER_MOVIE .media_gallery .gallery_thumb ul>li{margin-right:9px;width:calc((100% / 4) - 7px);}
    #MEDIA-CENTER_MOVIE .media_gallery .gallery_thumb ul>li img{width:100%;}
    #MEDIA-CENTER_MOVIE .media_gallery .gallery_thumb .direction_area{top:auto;transform:none;bottom:-50px;z-index:1;}
    #MEDIA-CENTER_MOVIE .media_gallery .gallery_thumb .direction_area>a{background-image:url(../../images/common/ico_arrow_black_right_s.png);}
    #MEDIA-CENTER_MOVIE .media_gallery .gallery_thumb .direction_area .thumb_next{margin-left:30px;}

    #MEDIA-CENTER_MOVIE .media_list .text_area{padding-bottom:80px;margin-top:0}
    #MEDIA-CENTER_MOVIE .media_list .text_area .title{font-size:18px; line-height:26px; margin-bottom:16px;}
    #MEDIA-CENTER_MOVIE .media_list .text_area .btn_more{margin-top:20px;}
    #MEDIA-CENTER_MOVIE .media_list .text_area .gu_btn_sm_box{top:auto;right:auto;left:0;bottom:0; margin-top:32px;}
    /*#MEDIA-CENTER_MOVIE .media_gallery .text_area ul + .gu_btn_sm_box{bottom:-80px;}*/
    /*#MEDIA-CENTER_MOVIE .media_gallery .text_area .desc + .gu_btn_sm_box{bottom:-40px;}*/
    #MEDIA-CENTER_MOVIE .more_scroll{height:70px;width:100%;max-width:100%;}
    #MEDIA-CENTER_MOVIE .more_scroll .custom_scroll_content{font-size:14px; line-height:24px;}
    #MEDIA-CENTER_MOVIE .desc{font-size:14px; line-height:24px;max-width:100%;}


    /* 스크롤바 */
    #MEDIA-CENTER_MOVIE .media_gallery .gallery_thumb ul::-webkit-scrollbar{
        width: 0;
        height: 15px;
    }
    #MEDIA-CENTER_MOVIE .media_gallery .gallery_thumb ul::-webkit-scrollbar-track{
        background-color: #fff;
    }
    #MEDIA-CENTER_MOVIE .media_gallery .gallery_thumb ul::-webkit-scrollbar-track-piece{
        background-color: #fff;
    }
    #MEDIA-CENTER_MOVIE .media_gallery .gallery_thumb ul::-webkit-scrollbar-thumb{
        background-color: #e1e1e1;
        border-bottom:6px solid #fff;
        border-top:6px solid #fff;
    }
    #MEDIA-CENTER_MOVIE .media_gallery .gallery_thumb ul::-webkit-scrollbar-button:start{
        background-color: #fff; /* Top, Left 방향의 이동버튼 */
    }
    #MEDIA-CENTER_MOVIE .media_gallery .gallery_thumb ul::-webkit-scrollbar-button:end{
        background-color: #fff; /* Bottom, Right 방향의 이동버튼 */
    }
    
    #MEDIA-CENTER_MOVIE .media_gallery .gallery_thumb ul{
        /* ie */
        scrollbar-face-color: #e1e1e1;
        scrollbar-base-color: #fff;
        scrollbar-track-color: #fff;
        scrollbar-arrow-color: #fff;
        scrollbar-highlight-color: #fff;
        scrollbar-3dlight-color: #fff;
        scrollbar-shadow-color: #fff;
        scrollbar-darkshadow-color: #fff;
    }
}

/* ================================== Mobile css ================================== */
@media all and (max-width: 766px){
    #MEDIA-CENTER_MOVIE .gu_contents_wrap{padding-top:40px;}
    #MEDIA-CENTER_MOVIE .gu_title + .gu_sort_area:nth-child(2){margin-bottom:40px;width:134px;}
    #MEDIA-CENTER_MOVIE .media_gallery .gallery_thumb{margin-top:9px;}
    #MEDIA-CENTER_MOVIE .media_gallery .gallery_thumb ul>li{width:calc((100% / 3) - 7px)}
    #MEDIA-CENTER_MOVIE .thumb .preview_image{ display:inline-block; margin-top:32px;}
    #MEDIA-CENTER_MOVIE .thumb_and_text .content_area{ margin-top:32px;}
    #MEDIA-CENTER_MOVIE .media_list.video_area {margin-top: 32px;}
    #MEDIA-CENTER_MOVIE .media_list .text_area .title{display:none}
    #MEDIA-CENTER_MOVIE .promotion .more_scroll {margin-top: 90px;}
	#MEDIA-CENTER_MOVIE .promotion .video_area .text_area .gu_btn_sm_box.btn_video {margin-top: 0;top: -70px;    max-height: 50px;;}
	#MEDIA-CENTER_MOVIE .gu_grid.promotion {margin-top: 90px;}
	#MEDIA-CENTER_MOVIE .thumb_and_text .content_area .title_area { font-size: 20px; letter-spacing: -0.5px; }
	:lang(ko) #MEDIA-CENTER_MOVIE .thumb_and_text .content_area .title_area { font-size: 17px; }
	#MEDIA-CENTER_MOVIE .thumb_and_text .content_area .title_area .cname {font-size: 16px;}

}