/* 서브페이지 키비쥬얼 */
#SUB_KEYVISUAL .gu_sub_top .kv_img_area {background-image: url('../../../img/media/KV_media.jpg')}

/* video */
#VIDEO .video_box {position:relative;}
#VIDEO .video_box > img {width:100%;height:100%;}
#VIDEO .video_box iframe {display: block;width: 100%;top:0;left:0; position:absolute;}
#VIDEO .video_box .video_btn {position:absolute; top:0; left:0; width:100%; height:100%; opacity:1; background: url(../../../img/common/btn_video_bg.png) no-repeat center / contain;; cursor:pointer;z-index:1;}
#VIDEO .video_box .video_btn:before, #VIDEO .video_box .video_btn:after {position:absolute; top:50%; left:50%; display:block; content:''; transform:translate(-50%, -50%); -webkit-transform:translate(-50%, -50%); -ms-transform:translate(-50%, -50%);}
#VIDEO .video_box .video_btn:before {width:3.875rem; height:3.875rem; background:#fff; z-index:1;}
#VIDEO .video_box .video_btn:after {width: 0; height: 0; border-top:10px solid transparent; border-bottom:10px solid transparent; border-left:14px solid #222; z-index:2;}
#VIDEO .video_box.on .video_btn {display:none;}
#VIDEO .video_box video {display: block; height: 100%; width: auto; max-width: 100%; max-height: 100%; position: absolute; top: 50%; left: 50%; transition: all 0.2s; transform: translate(-50%,-50%);object-fit:contain;}
#VIDEO .video_box video.full {transform:translate(0,0)}


#VIDEO ul.video_list {border-bottom:1px solid #e5e5e5;}
#VIDEO ul.video_list li {margin-bottom:100px;}

#VIDEO .text_area .gu_box_title {margin:40px 0 15px;}

#VIDEO .text_area .bottom {font-size:0; margin-top:30px;}
#VIDEO .text_area .desc {font-size:0; float:left;}
#VIDEO .text_area .desc > span {font-size:16px; color:#999; position:relative; padding-right:25px;}
#VIDEO .text_area .desc > span:after {content:''; position:absolute;right:12px;top:50%;width:1px;height:80%;background:#999; -webkit-transform:translateY(-50%); -moz-transform:translateY(-50%); -ms-transform:translateY(-50%); -o-transform:translateY(-50%); transform:translateY(-50%);}
#VIDEO .text_area .desc > span:last-child:after {display:none;}

#VIDEO .video_list .btn_area {float:right;}
#VIDEO .video_list .btn_area > div {display:inline-block; vertical-align:middle;float:none;}
#VIDEO .video_list .btn_area .gu_sort_area {width:70px; margin-bottom:0;}
#VIDEO .video_list .btn_area .gu_sort_area .gu_sort_name {width:70px;}
#VIDEO .video_list .btn_area .gu_sort_area .gu_sort_name:before {bottom:auto;}
#VIDEO .video_list .btn_area .gu_sort_area .gu_sort_name a {font-size:16px; padding:0;height:auto;}
#VIDEO .video_list .btn_area .gu_sort_area .gu_sort_name a:before, #VIDEO .video_list .bottom .gu_sort_area .gu_sort_name a:after {display:none;}
#VIDEO .video_list .btn_area .gu_btn_down {margin-left:20px;}


/* ================================== Tablet css ================================== */
@media all and (max-width: 1080px) {
    #VIDEO ul.video_list li {margin-bottom:80px;}
    #VIDEO ul.video_list li:last-child {margin-bottom:35px;}
    #VIDEO .text_area .desc > span {font-size:13px; padding-right:20px;}
    #VIDEO .text_area .desc > span:after {right:9px;}
    #VIDEO .text_area .bottom {margin-top:20px;}
    #VIDEO .video_list .btn_area .gu_sort_area .gu_sort_name a {font-size:12px;}
    #VIDEO .video_list .btn_area .gu_sort_area {width:58px;}
    #VIDEO .video_list .btn_area .gu_sort_area .gu_sort_name {width:58px;}
    #VIDEO .video_list .btn_area .gu_sort_area .gu_sort_name:before {width:12px; height:12px; right:6px;}
    #VIDEO .video_list .btn_area .gu_sort_area .gu_selectbox .gu_selectbox_inner a {font-size:12px; height:32px; line-height:32px;}
    #VIDEO .video_list .btn_area .gu_btn_down {margin-left:15px;}

}

/* ================================== Mobile css ================================== */
@media all and (max-width: 766px) {
    #VIDEO .video_box .video_btn:before { width:42px; height:42px;}
    #VIDEO .video_box .video_btn:after {border-top: 6px solid transparent;border-bottom: 6px solid transparent;border-left: 10px solid #222;}
    #VIDEO ul.video_list li {margin-bottom:50px;}
    #VIDEO .text_area .desc {float:none;}
    #VIDEO .video_list .btn_area {float:none; margin-top:30px;}
}