.video-box *{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box} .video-box{position:fixed;top:0;left:0;right:0;bottom:0;width:100%;height:100%;font-size:0;z-index:99999999999}.video-box button{display:inline-block;padding:0;border:0;background:0 0;text-align:center;outline:0;cursor:pointer}.video-box .video-button{display:inline-block;width:36px;height:36px;color:#fff;position:relative;overflow:hidden}.video-box .video-button i{font-size:56px}.video-box .video-button.video-btn-volume i{font-size:20px}.video-box .video-button.video-tooltip-toggle i{font-size:20px}.video-box .video-video{position:relative;width:100%;height:100%;overflow:hidden}.video-box .video-video video{position:relative;display:block;top:0;left:0;width:100%;height:100%;background:#000}.video-box .video-container{width:852px;min-height:550px;max-height:90vh;background:#000;overflow:hidden;opacity:0}.video-box .video-container.video-ready{opacity:1}.video-box.quanping .video-container{width:100%;height:100%;max-height:100%;position:relative;left:0;top:0;transform:none}.video-box.video-playing .video-div.video-hide-ui .video-ui{-webkit-transform:translateY(39px);-ms-transform:translateY(39px);transform:translateY(39px)}.video-box.heibian .video-container{padding:40px 0}.video-box.heibian .video-div.video-hide-ui .video-ui{-webkit-transform:translateY(0px);-ms-transform:translateY(0px);transform:translateY(0px)}.video-box.heibian.quanping .video-container{padding:0}.video-box.hideui .video-div .video-ui{-webkit-transform:translateY(39px);-ms-transform:translateY(39px);transform:translateY(39px)}.video-box .i{font-family:none;height:100%;width:100%;background-size:80%;background-position:center;background-repeat:no-repeat}.video-box .i:before,.video-box i:after{display:none!important}.video-box .i-voice-on{background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAzMCAzMCcgID48ZyAgc3Ryb2tlPScjZmZmJyBzdHJva2Utd2lkdGg9JzEnIHN0cm9rZS1saW5lY2FwPSdyb3VuZCcgc3Ryb2tlLWxpbmVqb2luPSdyb3VuZCc+PHBhdGggZD0nTTIsMTBMMiwyMEw1LDIwTDEzLDI1TDEzLDVMNSwxMEw1LDEwWicvPjxwYXRoIGQ9J00xOCwxMEMgMjIsMTIgMjIsMTggMTgsMjAnIC8+PHBhdGggZD0nTTIyLDZDIDI4LDEwIDI4LDIwIDIyLDI0JyAvPjwvZz48L3N2Zz4=)}.video-box .i-voice-off{background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAzMCAzMCcgID48ZyAgc3Ryb2tlPScjZmZmJyBzdHJva2Utd2lkdGg9JzEnIHN0cm9rZS1saW5lY2FwPSdyb3VuZCcgc3Ryb2tlLWxpbmVqb2luPSdyb3VuZCcgPjxwYXRoIGQ9J00yLDEwTDIsMjBMNSwyMEwxMywyNUwxMyw1TDUsMTBMNSwxMFonLz48cGF0aCBkPSdNMTgsMTFMMjcsMjAnIC8+PHBhdGggZD0nTTE4LDIwTDI3LDExJyAvPjwvZz48L3N2Zz4=)}.video-box .i-bofang{background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAzMCAzMCc+PGcgZmlsbD0nI2ZmZicgc3Ryb2tlPScjZmZmJyBzdHJva2Utd2lkdGg9JzEnIHN0cm9rZS1saW5lY2FwPSdyb3VuZCcgc3Ryb2tlLWxpbmVqb2luPSdyb3VuZCc+PHBhdGggZD0nTTEwLDdMMTAsMjNMMjQsMTV6Jy8+PC9nPjwvc3ZnPg==)}.video-box .i-zhanting{background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAzMCAzMCc+PGcgZmlsbD0nI2ZmZicgc3Ryb2tlPScjZmZmJyBzdHJva2Utd2lkdGg9JzEnIHN0cm9rZS1saW5lY2FwPSdyb3VuZCcgc3Ryb2tlLWxpbmVqb2luPSdyb3VuZCc+PHBhdGggZD0nTTcsN0w3LDIzTDExLDIzTDExLDd6Jy8+PHBhdGggZD0nTTIwLDdMMjAsMjNMMjQsMjNMMjQsN3onLz48L2c+PC9zdmc+)}.video-box .i-quanping{background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAzMCAzMCcgID48ZyAgc3Ryb2tlPScjZmZmJyBzdHJva2Utd2lkdGg9JzEnIHN0cm9rZS1saW5lY2FwPSdyb3VuZCcgc3Ryb2tlLWxpbmVqb2luPSdyb3VuZCcgPjxwYXRoIGQ9J002LDEwTDYsNkwxMCw2Jy8+PHBhdGggZD0nTTYsMjFMNiwyNUwxMCwyNScvPjxwYXRoIGQ9J00yMCw2TDI0LDZMMjQsMTAnLz48cGF0aCBkPSdNMjAsMjVMMjQsMjVMMjQsMjEnLz48L2c+PC9zdmc+)}.video-box .i-suoxiao{background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAzMCAzMCcgID48ZyAgc3Ryb2tlPScjZmZmJyBzdHJva2Utd2lkdGg9JzEnIHN0cm9rZS1saW5lY2FwPSdyb3VuZCcgc3Ryb2tlLWxpbmVqb2luPSdyb3VuZCcgPjxwYXRoIGQ9J002LDEwTDEwLDEwTDEwLDYnLz48cGF0aCBkPSdNNiwyMUwxMCwyMUwxMCwyNScvPjxwYXRoIGQ9J00yMCw2TDIwLDEwTDI0LDEwJy8+PHBhdGggZD0nTTIwLDI1TDIwLDIxTDI0LDIxJy8+PC9nPjwvc3ZnPg==)}.video-bg{position:absolute;height:100%;width:100%;background:#000;opacity:.9}.video-div{background:#000;font-size:0;letter-spacing:-1px;position:absolute;height:100%;width:100%;top:0;left:0}.video-ui{position:absolute;width:100%;height:41px;background-color:rgba(0,0,0,.8);left:0;bottom:0;z-index:6;letter-spacing:.25px;-webkit-transition:transform .3s ease;-o-transition:transform .3s ease;-ms-transition:transform .3s ease;-moz-transition:transform .3s ease;transition:transform .3s ease;-webkit-transform:translateY(0px);-o-transform:translateY(0px);-ms-transform:translateY(0px);-moz-transform:translateY(0px);transform:translateY(0px)}.video-loading-pulse{position:absolute;width:6px;height:24px;top:50%;left:50%;background-color:rgba(255,255,255,.2);-webkit-animation:pulse 750ms infinite;animation:pulse 750ms infinite;-webkit-animation-delay:250ms;animation-delay:250ms}.video-loading-pulse:before,.video-loading-pulse:after{content:'';position:absolute;display:block;height:16px;width:6px;background:rgba(255,255,255,.2);top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%);-webkit-animation:pulse 750ms infinite;animation:pulse 750ms infinite}.video-loading-pulse:before{left:-12px}.video-loading-pulse:after{left:12px;-webkit-animation-delay:500ms;animation-delay:500ms}@keyframes pulse{50%{background:#fff}}.video-loading{opacity:1;color:#2c97f6;font-size:0;overflow:hidden;box-shadow:0 0 0 3600px #000;background:#000;width:30px;height:30px;-webkit-transition:all .5s;-o-transition:all .5s;-ms-transition:all .5s;-moz-transition:all .5s;transition:all .5s}.video-loading i{border-radius:50%;width:24px;height:24px;display:block;border:.25rem solid rgba(255,255,255,.2);border-top-color:#fff;-webkit-animation:adeg 1s infinite linear;-o-animation:adeg 1s infinite linear;-ms-animation:adeg 1s infinite linear;-moz-animation:adeg 1s infinite linear;animation:adeg 1s infinite linear}.video-loading .i-loading:before{display:none;opacity:0;visibility:hidden}.video-loading.yihuanchun{opacity:0}@keyframes adeg{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}.video-close{position:absolute;top:calc(52px + 2%);right:5%;width:30px;height:30px;cursor:pointer;background:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAzMCAzMCc+PGcgZmlsbD0nI2ZmZic+PHBhdGggZD0nTTAsMUwxLDBMMzAsMjlMMjksMzB6Jy8+PHBhdGggZD0nTTI5LDBMMjksMEwzMCwxTDEsMzBMMCwyOXonLz48L2c+PC9zdmc+);background-repeat:no-repeat}.video-bofang.f-czspjuzhong{z-index:2;font-size:0}.video-bofang.f-czspjuzhong i{display:block;border-radius:50%;text-align:center;background-color:rgba(0,0,0,.8);color:#fff;width:60px;height:60px;cursor:pointer;line-height:62px;font-size:66px;-webkit-transition:transform 1s;-o-transition:transform 1s;-ms-transition:transform 1s;-moz-transition:transform 1s;transition:transform 1s}.video-hide{z-index:0!important}.video-hide i{opacity:0;-webkit-transform:scale(3);-o-transform:scale(3);-ms-transform:scale(3);-moz-transform:scale(3);transform:scale(3);will-change:transform,opacity;z-index:0}.video-progress{display:block;position:absolute;width:100%;bottom:36px;height:5px;cursor:pointer;-webkit-transition:all .3s ease;-o-transition:all .3s ease;-ms-transition:all .3s ease;-moz-transition:all .3s ease;transition:all .3s ease;z-index:2}.video-progress:hover .video-progress-hover,.video-progress:hover .video-tooltip-time{opacity:1}.video-tooltip-time{width:46px;position:absolute;height:20px;z-index:5;left:0;right:0;bottom:8px;opacity:0;-webkit-transition:opacity .5s;-o-transition:opacity .5s;-ms-transition:opacity .5s;-moz-transition:opacity .5s;transition:opacity .5s}.video-tooltip-time .video-tinytip-content{margin-left:-23px}.video-tooltip-time .video-text{background:rgba(0,0,0,.5);padding:2px;border-radius:2px}.video-tinytip .video-tooltip-content{display:inline-block;padding:0 4px;color:rgba(255,255,255,.5);font-size:10px;line-height:20px;text-align:center}.video-progress-padding{position:absolute;width:100%;height:16px;bottom:0;z-index:40;cursor:pointer}.video-progress-list{position:relative;top:-1px;z-index:39;width:100%;height:100%;background-color:rgba(255,255,255,.2);-webkit-transform:scaleY(.6);-ms-transform:scaleY(.6);transform:scaleY(.6);transition:-webkit-transform .1s cubic-bezier(.4,0,1,1);transition:transform .1s cubic-bezier(.4,0,1,1);transition:transform .1s cubic-bezier(.4,0,1,1),-webkit-transform .1s cubic-bezier(.4,0,1,1)}.video-progress-play,.video-progress-buffer,.video-progress-hover{position:absolute;top:0;left:0;width:0;height:100%}.video-progress-buffer{z-index:33;background-color:rgba(255,255,255,.4);-webkit-transition:all .3s ease;-o-transition:all .3s ease;-ms-transition:all .3s ease;-moz-transition:all .3s ease;transition:all .3s ease}.video-progress-hover{z-index:34;background-color:rgba(255,255,255,.5);opacity:0;-webkit-transition:opacity .25s cubic-bezier(0,0,.2,1);-o-transition:opacity .25s cubic-bezier(0,0,.2,1);-ms-transition:opacity .25s cubic-bezier(0,0,.2,1);-moz-transition:opacity .25s cubic-bezier(0,0,.2,1);transition:opacity .25s cubic-bezier(0,0,.2,1)}.video-progress-play{z-index:35;background-color:#2c97f6}.video-progress-handle{width:13px;height:13px;position:absolute;top:50%;right:-6.5px;margin-top:-6.5px;border-radius:50%;background-color:#2c97f6;-webkit-transform:scale(0);-ms-transform:scale(0);transform:scale(0);transition:-webkit-transform .1s cubic-bezier(.4,0,1,1);transition:transform .1s cubic-bezier(.4,0,1,1);transition:transform .1s cubic-bezier(.4,0,1,1),-webkit-transform .1s cubic-bezier(.4,0,1,1)}.video-progress-padding:hover+.video-progress-list{-webkit-transform:scaleY(1);-ms-transform:scaleY(1);transform:scaleY(1)}.video-progress-padding:hover+.video-progress-list .video-progress-handle{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}.video-controls-buttons{position:absolute;bottom:0;left:0;height:36px;width:100%;padding:0 10px;z-index:3}.video-time-panel{font-size:12px;color:#777;display:inline-block;vertical-align:top;height:36px;padding:0 5px;line-height:36px;letter-spacing:.25px}.video-time-panel-current{color:#dededf}.video-fullscreen{float:right}.video-definition{float:right;width:55px;height:36px;position:relative}.video-definition .video-button{width:100%}.video-definition .video-button span{background:#fff;color:#333;font-size:14px;padding:2px 5px}.video-definition .video-tooltip-content{width:80px;left:50%;margin-left:-40px;display:none;background:rgba(0,0,0,.5)}.video-definition:hover .video-tooltip-content{position:absolute;bottom:35px;color:#aaa;display:block;z-index:6}.video-menu .video-menu-item{display:block;width:100%;line-height:36px;font-size:14px;text-align:center;white-space:nowrap;padding:0 12px;cursor:pointer;position:relative;height:38px;background:-webkit-linear-gradient(top,transparent 0,transparent 50%,rgba(255,255,255,0.1) 50%) center bottom no-repeat;background-size:80% 1px}.video-menu .video-menu-item:hover{color:#fff;background:rgba(255,255,255,.12)}.video-menu .video-menu-item.video-active{color:#ff8f00}.video-volume{float:right;position:relative}.video-popup .video-popup-content{transform:scaleY(0);bottom:41px;position:absolute}.video-popup .video-popup-content:after{content:'';position:absolute;bottom:-10px;left:50%;margin-left:-5px;border:5px solid transparent;border-top-color:rgba(0,0,0,.5)}.video-popup:hover .video-popup-content{-webkit-transform:scaleY(1);-o-transform:scaleY(1);-ms-transform:scaleY(1);-moz-transform:scaleY(1);transform:scaleY(1)}.video-volume-slider{left:0;width:36px;height:100px;cursor:pointer;background:rgba(0,0,0,.8)}.video-tinytip-tiao{position:absolute;top:0;left:0;width:100%;height:100%}.video-volume-range{position:absolute;left:16px;top:10px;width:4px;height:80px;background-color:rgba(0,0,0,.2)}.video-volume-range-current{position:absolute;left:0;bottom:0;width:100%;height:50%;background-color:#2c97f6}.video-volume-handle{position:absolute;top:0;left:-4px;width:12px;height:3px;background-color:#fff}@media(max-width:998px){.video-box .video-container{width:80vw;max-height:80vh;min-height:44.9vw}}@media(max-width:468px){.video-box .video-container{width:100vw;min-height:54.9vw}.video-loading i{font-size:26px}.video-definition{display:none}}.f-czspjuzhong{position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);-o-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);-moz-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}