.mainVideoController {
    position: absolute;
    display: block;
    font-family: "Times New Roman", "微軟正黑體", "Microsoft JhengHei", sans-serif;
    font-size: 16px;
    -moz-user-select: -moz-none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -o-user-select: none;
    user-select: none;
}


/*按鈕*/

.mainVideoController .videoControllerFrame {
    position: absolute;
    display: block;
    width: 100%;
    height: 30px;
    background-color: rgba(255, 255, 255, 0.9);
    /*bottom: -30px;*/
    bottom: 0px;
}

.mainVideoController .videoController {
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.mainVideoController .buttonGroup {
    position: absolute;
    display: block;
}

.mainVideoController .buttonGroup .button {
    position: relative;
    display: block;
    float: left;
    background-size: 90%;
    background-repeat: no-repeat;
    background-position: center;
    transition: background .3s, color .3s;
    width: 28px;
    height: 28px;
    margin: 1px;
    border: 1px solid #ccc;
    box-sizing: border-box;
    border-radius: 5px;
}
.mainVideoController .buttonGroup .button:before {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    background-size: 90%;
    background-repeat: no-repeat;
    background-position: center;
    transition: background .3s, color .3s;    
}
.mainVideoController .buttonGroup .button:hover {
    background-color: rgba(199, 199, 199, 0.4);
}


.mainVideoController .buttonGroup .playButton:before {
    content: "";    
    background-image: url(videoController/play.png);
}

.mainVideoController .buttonGroup .playButton.active:before {
    background-image: url(videoController/stop.png);
}

.mainVideoController .buttonGroup .muteButton:before {
    content: "";  
    background-image: url(videoController/value_open.png);
}

.mainVideoController .buttonGroup .muteButton.active:before {
    background-image: url(videoController/value_stop.png);
}

.mainVideoController .buttonGroup .subtitleButton {
    font-size: 0.75em;
    line-height: 28px;
    line-height: 26px \9;
    text-align: center;
    cursor: default;
    color: #000;
    width: 38px;
}

.mainVideoController .buttonGroup .subtitleButton:before {
    content: "字幕";
}

.mainVideoController .buttonGroup .subtitleButton.active {
    color: #fff;
    background-color: #414141;
}

.mainVideoController .buttonGroup .subtitleButton.active:hover {
    background-color: #5c5c5c;
}

/*轉圈圈*/

.mainVideoController .videoLoading {
    position: absolute;
    display: none;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url(videoController/loading.gif);
    transform: translate(-50%, -50%);
    width: 20px;
    height: 20px;
    left: 50%;
    top: 50%;
}

.mainVideoController .videoLoading.active {
    display: block;
}

/*字幕*/

.videoSubtitleFrame {
    position: absolute;
    display: none;
    width: 100%;
    bottom: 0%;
}

.videoSubtitleFrame.active {
    display: block;
}

.videoSubtitleFrame .videoSubtitle {
    position: absolute;
    display: block;
    width: 100%;
    bottom: 30px;
    text-align: center;
}

.videoSubtitleFrame .videoSubtitle .subtitleText:before {
    content: attr(text);
    position: relative;
    display: inline-block;
    min-height: 1em;
    text-align: center;
    background-color: rgba(0, 0, 0, 0.5);
    font-size: 1.3em;
    text-shadow: 0px 0px 1px #000, 0px 0px 1px #000, 0px 0px 1px #000, 0px 0px 1px #000, 0px 0px 1px #000, 0px 0px 1px #000, 0px 0px 2px #000, 0px 1px 3px #000;
    /*color: #ffdb42;*/
    color: #fff;
    letter-spacing: 0.1em;
    font-weight: 500;
    padding: 10px;
    border-radius: 0.3em;
    margin: 4px;
    /*border: 1px solid #b1b1b1;*/
}

.videoSubtitleFrame .videoSubtitle .subtitleText[text=""]:before {
    padding: 0px 0px;
}

/*時間顯示*/

.timeGroup {
    position: relative;
    display: block;
    font-size: 13px;
    /*width: 80px;*/
    text-align: center;
    height: 30px;
    line-height: 20px;
    padding: 5px 0px;
    box-sizing: border-box;
    color: #000000;
}

.timeGroup:before {
    content: "";
    position: relative;
    display: block;
    float: left;
    width: 5px;
    height: 100%;
}

.timeGroup:after {
    content: "";
    position: relative;
    display: block;
    float: left;
    width: 5px;
    height: 100%;
}

.timeGroup .currentTime {
    position: relative;
    display: block;
    float: left;
}

.timeGroup .totalTime {
    position: relative;
    display: block;
    float: left;
}

.timeGroup .between {
    position: relative;
    display: block;
    float: left;
    margin: 0% 0.2em;
}

/*滑桿*/

.progressGroup {
    position: relative;
    display: block;
    width: 100%;
    height: 30px;
    padding: 10px 10px;
    box-sizing: border-box;
    -moz-user-select: -moz-none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -o-user-select: none;
    user-select: none;
}

.progressGroup .progressFrame {
    position: relative;
    display: block;
    background-color: rgb(80, 80, 80);
    width: 100%;
    height: 100%;
}

.progressGroup .bufferProgress {
    position: absolute;
    display: block;
    background-color: rgb(47, 47, 47);
    width: 0%;
    height: 100%;
}

.progressGroup .currentLengthLock {
    position: absolute;
    display: block;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
}

.progressGroup .currentLength {
    position: absolute;
    display: block;
    background-color: rgb(216, 216, 216);
    width: 0%;
    height: 100%;
}

.progressGroup .progressLock {
    position: absolute;
    display: block;
    left: 0px;
    top: 50%;
    right: 0px;
}

.progressGroup .progress {
    position: absolute;
    display: block;
    top: 50%;
    left: 0%;
}

.progressGroup .progressButton {
    position: absolute;
    display: block;
    background-color: #8f8f8f;
    width: 12px;
    height: 20px;
    top: 0%;
    left: 0%;
    transform: translate(-50%, -50%);
    border-radius: 4px;
}



/*設定*/

/*base*/

.mainVideoController .timeGroup {
    position: absolute;
}

.mainVideoController .progressGroup {
    position: absolute;
    width: auto;
    left: 0px;
    right: 0px;
}

/*noSubtitle*/

.mainVideoController.noSubtitle .buttonGroup .subtitleButton {
    display: none;
}

.mainVideoController.noSubtitle .videoSubtitleFrame {
    display: none;
}

/*double*/

.mainVideoController.double .buttonGroup {
    top: 25px;
}

.mainVideoController.double .timeGroup {
    top: 25px;
}

.mainVideoController.double .videoControllerFrame {
    height: 55px;
}

.mainVideoController.double .progressGroup {
    height: 25px;
}

/*size450*/

.mainVideoController.size450 .timeGroup .totalTime,
.mainVideoController.size450 .timeGroup .between {
    display: none;
}


.mainVideoController.size450 .videoSubtitleFrame .videoSubtitle .subtitleText:before {
    font-size: 1.15em;
}

/*size350*/

.mainVideoController.size350 .timeGroup {
    display: none;
}


.mainVideoController.size350 .videoSubtitleFrame .videoSubtitle .subtitleText:before {
    font-size: 1em;
}

/*size150*/

.mainVideoController.size150 .videoControllerFrame {
    height: 20px;
}

.mainVideoController.size150 .progressGroup {
    height: 20px;
    padding: 6px 6px;
}

.mainVideoController.size150 .progressGroup .progressButton {
    width: 8px;
    height: 18px;
}

.mainVideoController.size150 .buttonGroup .button {
    width: 23px;
    height: 18px;
}

.mainVideoController.size150 .buttonGroup .subtitleButton {
    font-size: 0.75em;
    line-height: 14px;
}

.mainVideoController.size150 .buttonGroup .subtitleButton:before {
    content: "s";
}

.mainVideoController.size150 .videoSubtitleFrame .videoSubtitle .subtitleText:before {
    font-size: 0.5em;
}