@charset "UTF-8";

/***********************************************************************************************/
/*全螢幕設定(只要設定父層DIV)S*/
body {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
}

/*大按鈕字型*/
@font-face {
    font-family: "fontello";
    src: url("font/fontello/fontello.eot?82002398");
    src: url("font/fontello/fontello.eot?82002398#iefix") format("embedded-opentype"), url("font/fontello/fontello.woff?82002398") format("woff"), url("font/fontello/fontello.ttf?82002398") format("truetype"), url("font/fontello/fontello.svg?82002398#fontello") format("svg");
    font-weight: normal;
    font-style: normal;
}


/*全螢幕設定(只要設定父層DIV)E*/
/***********************************************************************************************/

/***********************************************************************************************/
/*videojs Style S*/
.video-js {
    font-size: 10px;
    color: #fff;
}

.vjs-object-fit {
    object-fit: fill;
    /*
    主要是object-fit要設置為：cover，再加上寬高為100%。object-fit最好不要是fill，
    因為fill會讓視屏充滿容器，可能導致視屏變形。 這樣視屏就能自動撐滿容器，並且按比例伸縮。
    object-fit: cover;
    width: 100%;
    height: 100%;
    */
}

/*點擊屏幕播放/暫停*/
/*
.video-js.vjs-playing .vjs-tech {
    pointer-events: auto;
}
*/

/*進度顯示當前播放時間*/
/*
.video-js .vjs-time-control {
    display: block;
}

.video-js .vjs-remaining-time {
    display: none;
}
*/

/*點擊會有outline*/
/*
.video-js.vjs-default-skin {
    outline: 0 !important;
}

.video-js video {
    outline: 0 !important;
}
*/

.video-js .vjs-control-bar,
.video-js .vjs-big-play-button,
.video-js .vjs-menu-button .vjs-menu-content {
    background-color: #000;
    background-color: rgba(0, 0, 0, 0.8);
}

/* Slider底色 */
.video-js .vjs-slider {
    background-color: #595959;
    background-color: rgba(89, 89, 89, 0.7);
}

/*進度條pogress*/
.video-js .vjs-play-progress {
    background-color: #ecc546;
    background: #e3d53e url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAGCAYAAADgzO9IAAAAP0lEQVQIHWWMAQoAIAgDR/QJ/Ub//04+w7ZICBwcOg5FZi5iBB82AGzixEglJrd4TVK5XUJpskSTEvpdFzX9AB2pGziSQcvAAAAAAElFTkSuQmCC) -50% 0 repeat;
}

.video-js .vjs-play-progress:before {
    top: -0.36em;
}

.video-js .vjs-progress-control:hover .vjs-play-progress:before {
    top: -0.333333333333333em;
}

/*slider控制鈕修正位置(firefox)*/
@-moz-document url-prefix() {
    .video-js .vjs-play-progress:before {
        top: -0.1em;
        right: -0.5em;
        font-size: 0.9em;
    }

    /*slider控制鈕(hover)*/
    .video-js .vjs-progress-control:hover .vjs-progress-holder {
        font-size: 1.6666666667em;
    }
}

/*fix mobile(firefox)  slider button dropdwon */
@media screen and (max-width: 550px) {
    @-moz-document url-prefix() {
        .video-js .vjs-play-progress:before {
            top: -0.3em;
        }
    }
}

/*無字幕*/
/* hide the captions settings item from the captions menu */
.vjs-texttrack-settings {
    display: none;
}


/*hover時間軸後顯示的時間框*/
.video-js .vjs-progress-control:hover .vjs-mouse-display:after,
.video-js .vjs-progress-control:hover .vjs-play-progress:after {
    display: block;
    font-size: 0.6em;
}

/*loading顏色條 */
.video-js .vjs-load-progress {
    background: ligthen(#73859f, 25%);
    background: rgba(115, 133, 159, 0.5);
}

.video-js .vjs-load-progress div {
    background: ligthen(#73859f, 50%);
    background: rgba(115, 133, 159, 0.75);
}

/*聲音條*/
.video-js .vjs-volume-bar {
    background-color: #595959;
    background: rgba(115, 133, 159, 0.5);
}

/*聲音條 pogress*/
.video-js .vjs-volume-level {
    background-color: #ecc546;
    background: #e3d53e url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAGCAYAAADgzO9IAAAAP0lEQVQIHWWMAQoAIAgDR/QJ/Ub//04+w7ZICBwcOg5FZi5iBB82AGzixEglJrd4TVK5XUJpskSTEvpdFzX9AB2pGziSQcvAAAAAAElFTkSuQmCC) -50% 0 repeat;
}

/*聲音條位置*/
@-moz-document url-prefix() {
    .video-js .vjs-volume-bar {
        margin-top: 1.2em;
    }
}

/*撥放大按鈕S*********************************************/
.vjs-default-skin .vjs-big-play-button {
    font-family: fontello;
    font-size: 10em;
    line-height: 2.1;
    width: 100px;
    height: 100px;
    margin-left: -50px;
    margin-top: -50px;
    /* 0.06666em = 2px default */
    order: 0.06666em solid #fff;
    /* 0.3em = 9px default */
    border-radius: 50%;
    /* Align center */
    left: 50%;
    top: 50%;
    /*box-shadow    : 0 0 1em rgba(255,255,255,.25);*/
    background-color: transparent;
    border: none;
    opacity: 0.7;
    transition: all 300ms 50ms;
    transform: rotate(0deg);
    transform-origin: 50% 50%;
    opacity: 0.7;
    /*cursor        :pointer; z-index:555;*/
}


.vjs-default-skin .vjs-big-play-button:before {
    font-family: fontello;
    font-weight: 400;
    font-style: norma;
    content: "\e802";
    text-shadow: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    line-height: 1.1;
    /*transition: all 500ms;*/
}

/*fix chrome*/
@media screen and (-webkit-min-device-pixel-ratio: 0) {
    .vjs-default-skin .vjs-big-play-button:before {
        line-height: 1;
    }
}

.video-js:hover .vjs-big-play-button,
.video-js .vjs-big-play-button:focus {
    outline: 0;
    opacity: 1;
    border-color: transparent;
    background-color: transparent;
    transition: all 300ms 50ms;
    -webkit-box-shadow: 0 0 0.5em -0.1em #fff;
    -moz-box-shadow: 0 0 0.5em -0.1em #fff;
    box-shadow: 0 0 0.5em -0.1em #fff;
    transform-origin: 50% 50%;
    transform: rotate(360deg);
    opacity: 1;
}

.video-js .vjs-big-play-button .vjs-icon-placeholder:before {
    display: none;
}

/*撥放大按鈕E*********************************************/

/*videojs Style E*/
/***********************************************************************************************/


/***********************************************************************************************/
/*S*/
/*videojs外部環境*/
.ima-videoplayer {
    position: absolute;
    background-color: #000;
    margin-left: auto;
    margin-right: auto;
    height: 100%;
    width: 100%;
    overflow: hidden;
}

/*videojs 全畫面*/
.ima-videoplayer .content_videoplayer {
    position: absolute;
    width: 100% !important;
    height: 100% !important;
}

/*E*/
/***********************************************************************************************/

/***********************************************************************************************/
/*首圖及play鈕設定S*/
/*初始時，建立虛擬，底圖及按鈕，無法video*/
.ima-placeholder {
    background: no-repeat center;
    width: 100%;
    height: 100%;
    background-size: contain;
    position: relative;
}

.ima-placeholder:after {
    font-family: VideoJS;
    font-weight: 400;
    font-style: norma;
    content: '\f102';
    color: #fff;
    position: absolute;
    font-size: 7em;
    width: 110px;
    height: 110px;
    left: 50%;
    top: 50%;
    margin: -55px 0 0 -55px;
    z-index: 2;
    cursor: pointer;
    opacity: 0.7;
    transition: .3s;
}

.ima-placeholder:hover:after {
    opacity: 1;
}

/*首圖及play鈕設定E*/
/***********************************************************************************************/

/***********************************************************************************************/
/*繼續觀看 .endplay S*****************************/
.ima-placeholder.endplay {}

.ima-placeholder.endplay:after {
    font-family: "微軟正黑體";
    font-weight: normal;
    font-style: normal;
    content: '繼續觀看';
    color: #fff;
    width: 260px;
    height: 90px;
    line-height: 90px;
    top: 50%;
    left: 50%;
    margin-top: -45px;
    margin-left: -130px;
    border: 1px solid rgba(255, 255, 255, .9);
    cursor: pointer;
    opacity: 0.7;
    transition: .3s;
    text-align: center;
    font-size: 1.5em;
}

.ima-placeholder.endplay:hover:after {
    opacity: 1;
}

/*繼續觀看 .endplay E*****************************/
/***********************************************************************************************/


/***********************************************************************************************/
/*廣告全螢幕設定(只要設定父層DIV)S*
.ima-ad-container {
    position: relative;
    width: 100% !important;
    height: 100% !important;
    overflow: hidden;
}
*/
/*廣告全螢幕設定(只要設定父層DIV)E*/
/***********************************************************************************************/

/***********************************************************************************************/
/*廣告覆蓋有連結S*/
.ad_more {
    width: 100%;
    height: calc(100% - 85px);
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    /*z-index: 9999999999 ;*/

}

.ad_more a {
    width: 100%;
    height: 100%;
    display: block;
}

/*廣告覆蓋有連結E*/
/***********************************************************************************************/


/***********************************************************************************************/
/*修正 videojs-resolution-switcher S*/

.vjs-resolution-button {
    color: #fff;
}

.vjs-resolution-button .vjs-resolution-button-label {
    font-size: 1.4em;
    line-height: 2.2em;
}

.vjs-resolution-button .vjs-menu {
    left: -1em;
    bottom: 0;
}

.vjs-resolution-button ul.vjs-menu-content {
    font-size: 1.5em;
    bottom: 1em !important;
    background-color: rgba(0, 0, 0, 1) !important;
}

.vjs-resolution-button ul.vjs-menu-content li.vjs-menu-item {
    padding: 2.88px 0 2.88px 0;
}

.vjs-resolution-button ul.vjs-menu-content li.vjs-menu-item.vjs-selected {
    background-color: #fff;
}

/*
.vjs-resolution-button ul.vjs-menu-content {
    width: 5em !important;
}
*/

/*修正 videojs-resolution-switcher E*/
/***********************************************************************************************/

/***********************************************************************************************/
/*修正 vjs-playback-rate 倍速清單 S*/
.vjs-playback-rate div.vjs-menu ul.vjs-menu-content {
    font-size: 1.2em;
    bottom: 1em !important;
    background-color: rgba(0, 0, 0, 1) !important;
    width: 55px !important;
}

.vjs-playback-rate div.vjs-menu ul.vjs-menu-content li.vjs-menu-item.vjs-selected {
    background-color: #fff;
}


/*修正 vjs-playback-rate 倍速清單 E*/
/***********************************************************************************************/