@charset "utf-8";
/*
video.html
*/

/* VideoPlayer */
.video-stage {position:relative;top:0;left:0;z-index:1;width:100%;height:0;padding-bottom:56.25%;background-color:#000;}
.video-stage-overlay {overflow:hidden;position:absolute;top:0;left:0;z-index:5;width:100%;height:100%;}
.video-stage-thumb {position:absolute;top:0;left:0;z-index:5;width:100%;height:100%;}
.video-stage-playbtn {
    position:absolute;
    top:50%;
    left:50%;
    z-index:10;
    display:block;
    width:85px;
    height:56px;
    background:url("/common/promotions/galaxy/note5/btn_media_play.png") no-repeat 0 0;
    -webkit-background-size: 100% 100%;
    background-size: 100% 100%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}
.video-stage-iframe {position:absolute;top:0;left:0;z-index:1;width:100%;height:100%;}

@media only screen and ( max-width:767px ){
    .video-stage-playbtn {width:43px;height:28px;}
}


/* // VideoPlayer */

/* Video List Thumbnail */
.video-list-wrap {overflow:hidden;position:relative;width:100%;}
.video-list-arrow {display:none;position:absolute;top:0;z-index:10;width:5%;height:100%;}
.video-list-arrow.js-visible {display:block;}
.video-list-arrow.prev {left:0;background:url("/common/promotions/galaxy/note5/btn_videoList_prevBtn.png") no-repeat 80% 50%;}
.video-list-arrow.next {right:0;background:url("/common/promotions/galaxy/note5/btn_videoList_nextBtn.png") no-repeat 20% 50%;}

.video-list {position:relative;white-space:nowrap;font-size:0;background-color:#292929;}
.video-list:after {content:"";display:block;clear:both}
.video-list > li {display:inline-block;width:25%;}
.video-item {overflow:hidden;position:relative;top:0;left:0;z-index:5;width:100%;height:0;padding-bottom:56.25%;}
.video-item a {display:block;}
.video-item-thumb {position:absolute;top:0;left:0;z-index:5;width:100%;height:100%;opacity:0.6;
    -webkit-transition: opacity 0.5s;
    -moz-transition: opacity 0.5s;
    -ms-transition: opacity 0.5s;
    -o-transition: opacity 0.5s;
    transition: opacity 0.5s;
}
.video-list .active .video-item-thumb {opacity:1;}

.video-list .emptyItem {background:#292929;text-align:center;font-family: "sssM",sans-serif;}
.video-list .emptyItem-box {position:absolute;top:50%;left:0;width:100%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
}
.video-list .emptyItem-box .video-item-thumb {position:static;width:199px;}
.video-list .emptyItem-box .emptyItem-soon {position:static;display:block;font-size:18px;color:#7e7e7e;line-height:1.8;}

.video-item-subject {position:absolute;top:0;left:0;z-index:10;width:100%;height:100%;
    padding:1em;
    font-size:32px;
    line-height:1.25;
    font-family: "sssB",sans-serif;
    color:#fff;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.video-list-more {display:none;}

@media only screen and ( max-width:1280px ){
    .video-item-subject {font-size:28px;}
}

@media only screen and ( max-width:1023px ){
    .video-item-subject {font-size:22px;}
}

@media only screen and ( max-width:767px ){
    .video-list-arrow {display:none !important;}
    .video-list {left:0 !important;white-space: normal;}
    .video-list > li {width:50%;}
    .video-list > li:nth-child(n+3) {display:none;}
    .video-item {padding-bottom:55.5555555%;}
    .video-item-subject {padding:12px;font-size:16px;}
    .video-list-more {text-align:center;}
    .video-list-more_btn {display:inline-block;margin:32px 0;padding:8px 30px;background:#fff;border-radius:16px 18px;border:1px solid #888;font-size:10px;line-height:1.6;font-family: "sssM",sans-serif;color:#7e7e7e;text-align:center;}


    .video-list .emptyItem-box .video-item-thumb {width:99px;}
    .video-list .emptyItem-box .emptyItem-soon {font-size:12px;}
}

/* //Video List Thumbnail */