[debug=true] .select span{background:rgba(0,255,0,.5)}#video-sf{display:flex;height:auto}#video-sf *,#video-sf :after,#video-sf :before{box-sizing:border-box;border-style:solid;border-width:0;min-width:0}#video-sf.active{position:fixed;top:0;left:0;width:100%;height:100%;z-index:1000;background:#222}#video-sf .video-sf-main{position:relative;margin:0 auto;width:800px;height:auto}#video-sf .video-sf-main .video-sf-player{width:100%;height:100%;background:#000}#video-sf .video-sf-main .video-sf-player video{position:absolute;width:100%;top:0;left:0;display:none}#video-sf .video-sf-main .video-sf-player .frame{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:3}#video-sf .video-sf-main .video-sf-player .frame.active{z-index:1;background:none}#video-sf .video-sf-main .video-sf-player .frame.active .play{display:none}#video-sf .video-sf-main .video-sf-player .frame.active .frame-paly{display:flex;animation:fade .6s 1;animation-fill-mode:forwards;animation-timing-function:ease-out}#video-sf .video-sf-main .video-sf-player .frame.active .frame-pause{display:none}#video-sf .video-sf-main .video-sf-player .frame .frame-paly{position:absolute;top:0;left:0;display:none;width:100%;height:100%;align-items:center;justify-content:center;pointer-events:none}#video-sf .video-sf-main .video-sf-player .frame .frame-paly span{width:0;height:0;border-color:transparent transparent transparent #fff;border-style:solid;border-width:25px 0 25px 40px}#video-sf .video-sf-main .video-sf-player .frame .frame-pause{position:absolute;top:0;left:0;display:flex;animation:fade .6s 1;animation-fill-mode:forwards;animation-timing-function:ease-out;width:100%;height:100%;align-items:center;justify-content:center;pointer-events:none}#video-sf .video-sf-main .video-sf-player .frame .frame-pause span{display:flex}#video-sf .video-sf-main .video-sf-player .frame .frame-pause span:after{display:flex;content:"";width:8px;height:40px;background:#fff;transform:translateX(7px)}#video-sf .video-sf-main .video-sf-player .frame .frame-pause span:before{display:flex;content:"";width:8px;height:40px;background:#fff;transform:translateX(-7px)}@keyframes fade{0%{opacity:0;transform:scale(.5)}50%{opacity:1;transform:scale(.75)}to{opacity:0;transform:scale(1)}}#video-sf .video-sf-main .video-sf-player .frame .back{position:absolute;top:10px;right:10px;z-index:100;background:rgba(0,0,0,.6);padding:5px 10px;border-radius:5px;color:#fff;box-sizing:border-box;font-size:14px;cursor:pointer;pointer-events:auto;display:none}#video-sf .video-sf-main .video-sf-player .frame .back.active{display:block}#video-sf .video-sf-main .video-sf-player .frame .back:hover{opacity:.7}#video-sf .video-sf-main .video-sf-player .frame .return{position:absolute;z-index:100;color:#fff;cursor:pointer;pointer-events:auto;font-size:28px;top:0;left:0;background:rgba(0,0,0,.6);display:none;justify-content:center;align-items:center;width:100%;height:100%}#video-sf .video-sf-main .video-sf-player .frame .return span{display:inline-block;margin-left:5px;font-size:30px}#video-sf .video-sf-main .video-sf-player .frame .return.active{display:flex}#video-sf .video-sf-main .video-sf-player .frame .return:hover{opacity:.7}#video-sf .video-sf-main .select{position:relative;width:100%;height:100%;top:0;left:0;justify-content:space-between}#video-sf .video-sf-main .select span{pointer-events:auto;position:absolute;align-items:center;justify-content:center;width:0;height:0%;top:0;left:0;cursor:pointer;box-sizing:border-box;user-select:none;display:none}#video-sf .video-sf-main #player-status{position:absolute;z-index:1;bottom:0;left:0;right:0;color:#fff;display:flex;width:100%;height:46px;background:rgba(0,0,0,.4);padding:6px 10px 0;align-items:center;pointer-events:auto}#video-sf .video-sf-main #player-status .play-stop{width:26px;margin-right:5px;font-size:12px;pointer-events:auto;display:flex;justify-content:center;align-items:center;height:20px;cursor:pointer}#video-sf .video-sf-main #player-status .play-stop i{pointer-events:none}#video-sf .video-sf-main #player-status .play-stop i:first-child{display:block}#video-sf .video-sf-main #player-status .play-stop.active i:first-child,#video-sf .video-sf-main #player-status .play-stop i:nth-child(2){display:none}#video-sf .video-sf-main #player-status .play-stop.active i:nth-child(2){display:block}#video-sf .video-sf-main #player-status .volume{width:20px;pointer-events:auto;cursor:pointer;display:flex;justify-content:center;align-items:center;height:20px;margin-right:12px}#video-sf .video-sf-main #player-status .volume i{pointer-events:none}#video-sf .video-sf-main #player-status .volume i:first-child{display:block}#video-sf .video-sf-main #player-status .volume.active i:first-child,#video-sf .video-sf-main #player-status .volume i:nth-child(2){display:none}#video-sf .video-sf-main #player-status .volume.active i:nth-child(2){display:block}#video-sf .video-sf-main #player-status .gauge{position:relative;width:60px;height:20px;pointer-events:auto;cursor:pointer}#video-sf .video-sf-main #player-status .gauge .gauge-bg{position:absolute;top:8px;width:100%;height:5px;background:#222;border-radius:2.5px;pointer-events:none}#video-sf .video-sf-main #player-status .gauge .gauge-color{position:absolute;top:8px;width:0;height:5px;background:#fff;border-radius:2.5px;pointer-events:none}#video-sf .video-sf-main #player-status .gauge .gauge-button{position:absolute;top:4px;left:-6px;width:12px;height:12px;background:#fff;border-radius:6px;pointer-events:none;will-change:transform}#video-sf .video-sf-main #player-status .time{color:#fff;font-size:12px;margin-left:10px;user-select:none}#video-sf .video-sf-main #player-status .fullscreen{margin-left:auto;padding:3px;margin-right:1px;cursor:pointer;pointer-events:auto}#video-sf .video-sf-main #player-status .fullscreen i{pointer-events:none}#video-sf .video-sf-main #player-status .fullscreen i:first-child{display:block}#video-sf .video-sf-main #player-status .fullscreen.active i:first-child,#video-sf .video-sf-main #player-status .fullscreen i:nth-child(2){display:none}#video-sf .video-sf-main #player-status .fullscreen.active i:nth-child(2){display:block}#video-sf .video-sf-main #progress-bar{position:absolute;z-index:2;bottom:40px;left:0;width:calc(100% - 30px);height:10px;margin:0 15px;box-sizing:border-box;pointer-events:auto;cursor:pointer}#video-sf .video-sf-main #progress-bar .background{position:absolute;top:3px;width:100%;height:4px;background:hsla(0,0%,100%,.4);cursor:pointer;pointer-events:none}#video-sf .video-sf-main #progress-bar .load{position:absolute;top:3px;width:0;height:4px;background:hsla(0,0%,100%,.4);pointer-events:none}#video-sf .video-sf-main #progress-bar .color{position:absolute;top:3px;width:0;height:4px;background:#d41c1c;pointer-events:none}#video-sf .video-sf-main #progress-bar .button{position:absolute;top:0;left:-5px;width:10px;height:10px;background:#d41c1c;border-radius:5px;pointer-events:none;will-change:transform}#video-sf .video-sf-main #progress-bar .seek{position:absolute;width:100%;height:4px;top:3px}#video-sf .video-sf-main #progress-bar .seek span{position:absolute;left:0;display:block;background:#d41c1c;width:4px;height:4px;border-radius:2px}#video-sf video::-webkit-media-controls,#video-sf video::-webkit-media-controls-enclosure{display:none!important}