.ws-video {position: relative;}
.ws-video img {width: 100%;height: auto;position: relative;z-index: 8;}
.js-video{position:relative;width:100%;margin:0 auto;}
video{position: absolute;top: 0;left: 0; width:100%;height:100%;background-size:cover;background-position:center center;background-color: #000;z-index: 9;}
.js-video button{-moz-appearance:none;-webkit-appearance:none}
.js-video .playPause.ui-icon{position:absolute;top:0;left:0;right:0;display:block;width:auto;bottom:0;z-index: 9;}
.js-video .playPause.ui-icon:after{position:absolute;top:50%;left:50%;content:'';width:70px;height:70px;margin:-35px 0 0 -35px;}
.js-video .playPause.ui-icon:before{content:'';position:absolute;left: 0;top: 0;width:100%;height: 100%;background: rgba(27,27,27,0);-webkit-transition:all ease-out 0.4s;transition:all ease-out 0.4s;}
.js-video .playPause.fa-play:after{background:url(../images/play.png);}
.js-video .playPause.fa-pause:after{background:url(../images/pause.png);}
.js-video .playPause.fa-undo:after{background:url(../images/undo.png);}
.js-video .playPause.fa-play:before{background: rgba(0,0,0,.2);}
.js-video .playPause.ui-icon.fa-pause{opacity:0;-webkit-transition:all ease-out 0.3s;transition:all ease-out 0.3s;}
.js-video .playPause.ui-icon.fa-pause:hover{opacity: 1;}
.js-video .ui{position:absolute;width: 100%;font-style:normal;left:0;bottom:10px;display:block;padding:10px 1vw;font-size:0;z-index: 9;display: -webkit-flex;display: flex;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box}
.js-video .ui-icon{font-size:20px;vertical-align:middle;width:20px;cursor:pointer}
.js-video .progress{background:rgba(229,229,229,.5);width:100%;position:relative;height:3px;cursor:pointer;overflow:hidden;border-radius:2px;border:0;margin-bottom: 0;}
.js-video .progress>*{position:absolute;top:0;left:0;height:100%}
.js-video .progress-time{background-color:#fff}
.js-video .anim{-moz-transition:width 1s linear;-o-transition:width 1s linear;-webkit-transition:width 1s linear;transition:width 1s linear}
.js-video .progress-buffer{background-color:rgba(0,0,0,.4);-moz-transition:width 250ms linear;-o-transition:width 250ms linear;-webkit-transition:width 250ms linear;transition:width 250ms linear}
.js-video .ui > div:nth-of-type(1) {-webkit-flex: 1 0 20px;flex: 1 0 20px;font-size: 12px;text-align: center;line-height: 20px;}
.js-video .ui > div:nth-of-type(2) {-webkit-flex: 30 30 1px;flex: 30 30 1px;padding-top: 8px;}
.js-video .ui > div:nth-of-type(3) {-webkit-flex: 1 0 20px;flex: 1 0 20px;font-size: 12px;margin-right: 10px;text-align: center;line-height: 20px;}
.js-video .ui > div:nth-of-type(4) {-webkit-flex: 0 0 20px;flex: 0 0 20px;margin-right: 20px;}
.js-video .ui > div:nth-of-type(5) {-webkit-flex: 0 0 20px;flex: 0 0 20px;}
.timeDisplay {white-space: nowrap;}
.timeDisplay i {font-style: normal;color: #fff;}
.js-video .ui .fa-volume-up {background: url(../images/volup.png) no-repeat center center;width: 20px;height: 20px;display: inline-block;}
.js-video .ui .fa-volume-off {background: url(../images/voloff.png) no-repeat center center;width: 20px;height: 20px;display: inline-block;}
.js-video .ui .fa-full {background: url(../images/full.png) no-repeat center center;width: 20px;height: 20px;display: inline-block;}