.js-video{position: relative;margin: 0 auto;border-radius: 10px;width: 100%;}
/********************* * Elements inside js-video *********************/
video{max-width: 100%; background-size: cover; background-position: center center; border-radius: 10px 10px 0 0;}
.videokuang{width:100%;position: relative;height: inherit;}
.js-video button{-moz-appearance: none; -webkit-appearance: none;}
/********************* * UI *********************/
.playPause.ui-icon{position: absolute;top: 0;left: 0;display: block;width: 100%;height: 98%;}
.playPause.ui-icon:before, .playPause.ui-icon:after{position: absolute; top: 50%; left: 50%;}
.playPause.ui-icon:after{content: ''; width: 130px; height: 130px; margin: -65px 0 0 -65px; background: url(/template/1/tsly/_files/images/video1.png) no-repeat center;background-size: 100%;}
.playPause.ui-icon:before{font-size: 40px; line-height: 80px; color: rgba(244, 209, 126, 0.5); z-index: 2; top: 50%; left: 50%; margin: -40px 0 0 -14px;}
.playPause.ui-icon.fa-pause:before, .playPause.ui-icon.fa-undo:before{margin-left: -17px;}
.playPause.ui-icon.fa-pause{opacity: 0;}
.bofang{width: 100%;}
.ui{width: 100%;height: 100px;line-height:100px;background: #292929;border-radius: 0 0 10px 10px;margin-top: -7px;display: inline-flex;display:-webkit-inline-flex;display:-ms-flexbox;/* align-items: center; *//* -webkit-align-items: center; */justify-content:center;flex-direction:row;flex-wrap:wrap;}
.ui li{float: left;margin-left: 3%;line-height:100px;}
.zanting{width: 53px;height: 53px;background: url(/template/1/tsly/_files/images/video1.png) no-repeat center;background-size: 100%;line-height: 100px;text-align:  center;margin-top: 24px;}
.zanting.fa-pause{background: url(/template/1/tsly/_files/images/video2.png) no-repeat center;background-size: 100%;}
.zanting.fa-play{background: url(/template/1/tsly/_files/images/video1.png) no-repeat center;background-size: 100%;}
.zanting.fa-undo{background: url(/template/1/tsly/_files/images/video1.png) no-repeat center;background-size: 100%;}
.time{flex: 5;-webkit-flex: 5;-ms-flex: 5;-webkit-box-flex: 5;-moz-box-flex: 5;width: 50%;margin-top: 45px;}
.voiceco{width: 38px;height: 30px;margin-top: 33px;}
.voicetiao{margin-left: 2%;}
.fa{width:38px ; height: 30px;}
.fa-volume-off{background: url(/template/1/tsly/_files/images/icon_sound.png) no-repeat center left;}
.fa-volume-up{background: url(/template/1/tsly/_files/images/voice.png) no-repeat center left;}
.fullscreen{display: block;width: 30px;height: 30px;text-align: center;cursor: pointer;-moz-transition: color 0.3s;-o-transition: color 0.3s;-webkit-transition: color 0.3s;transition: color 0.3s;background: url(/template/1/tsly/_files/images/quanping.png) no-repeat center;margin-right: 3.5%;margin-top: 35px;}
.fullscreen:hover{background: url(/template/1/tsly/_files/images/quanping1.png) no-repeat center;}
.ui-icon{cursor: pointer;}
/********************* * Progress *********************/
.progress, .volumeControl{background: #7f7f7f; width: 100%; position: relative; height: 12px; cursor: pointer; overflow: hidden; border-radius: 5px; border: 0;}
.progress > *{position: absolute; top: 0; left: 0; height: 100%;}
.progress-time{background: #34afd8; border-radius: inherit;}
.anim{-moz-transition: width 1000ms linear; -o-transition: width 1000ms linear; -webkit-transition: width 1000ms linear; transition: width 1000ms linear;}
.progress-buffer{-moz-transition: width 250ms linear; -o-transition: width 250ms linear; -webkit-transition: width 250ms linear; transition: width 250ms linear; background: #7f7f7f;}
.volumeControl{
    flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    overflow: visible;
    position: relative;
    background: #767676;
    height: 12px;
    width: 12%;
    margin-top: 45px;
}
.ui li.volumeControl{margin-left:1%}
.volumeControl .ui-slider-handle{position: absolute; width: 12px; height: 12px; border: 0;}
.volumeControl .ui-slider-handle:after{content: ''; position: absolute; width: 100%; height: 100%; left: -50%; background: #34afd8; border-radius: 4px;}
.volumeControl .ui-slider-handle:focus{outline: none;}

@media only screen and (min-width:1920px ) {
    .time{width: 58%;}
}
@media only screen and (max-width:1300px ){
    .time{width: 45%;}
}<!--ºÄʱ1764066017.28Ãë-->