.video-page{width:100%;height:100vh;background:#2f2f2f;display:flex;flex-direction:column}.video-page .top-nav{background:#282828;width:100%}.video-page .top-nav .content-wrap{display:flex;align-items:center;height:40px;font-size:14px;color:#e0e0e0}.video-page .top-nav .content-wrap span{cursor:pointer}.video-page .video-content{display:flex;flex:1;min-width:1200px;position:relative}.video-page .video-content .left-catalog{display:flex;width:360px;height:calc(100% - 42px);background:#282828;position:absolute;left:0;top:0;z-index:100}.video-page .video-content .left-catalog .catalog-left .catalog-left-content{display:flex;flex-direction:column;align-items:center;justify-content:center;width:60px;height:80px;background:#2f2f2f}.video-page .video-content .left-catalog .catalog-left .catalog-left-content img{width:16px;height:16px;margin-bottom:8px}.video-page .video-content .left-catalog .catalog-left .catalog-left-content span{font-size:14px;color:#fff}.video-page .video-content .left-catalog .list-wrap{flex:1;background:#2f2f2f;padding-top:20px;height:100%;overflow-y:auto}.video-page .video-content .left-catalog .list-wrap .el-tree>.el-tree-node{padding:0 21px 0 12px;background:#2f2f2f}.video-page .video-content .left-catalog .list-wrap .el-tree .el-tree-node{white-space:unset}.video-page .video-content .left-catalog .list-wrap .el-tree .catalog-wrap{width:100%}.video-page .video-content .left-catalog .list-wrap .el-tree .catalog-wrap-item{padding-right:15px}.video-page .video-content .left-catalog .list-wrap .el-tree .catalog-wrap-item .catalog-name{font-size:14px;font-weight:400;color:#fff}.video-page .video-content .left-catalog .list-wrap .el-tree .catalog-wrap-last .top{display:flex}.video-page .video-content .left-catalog .list-wrap .el-tree .catalog-wrap-last .top .top-image{width:7px;height:11px;margin-right:8px;background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAALCAYAAACzkJeoAAAAAXNSR0IArs4c6QAAAK5JREFUKFNjPHjsutVvZoabLuaabxnQAOORYzd//v/P8Jrx//9YGxuN/cjyjIeP3vwPEWD8y8Dwr+PPr+cNjo6Of8AiCEmIkv8M/48xM/yLsrbWeoghCTXl/b//f1NwSILNeIZL58V/TAyR6JL/GRmZpv7+yVLq6Kj4Ay75n4HhLQPD/2Q7a42NMO8wHj564x0DI9OlPz8ZYxwdVZ+g+vPwJcG9e9d9bGho+IceQgDULFeKW3ykJQAAAABJRU5ErkJggg==) no-repeat 100% 100%}.video-page .video-content .left-catalog .list-wrap .el-tree .catalog-wrap-last .top .catalog-name{font-size:14px;font-weight:400;color:#c3c5d9}.video-page .video-content .left-catalog .list-wrap .el-tree .catalog-wrap-last .top .video-view-process{width:16px;height:16px;margin-left:10px}.video-page .video-content .left-catalog .list-wrap .el-tree .catalog-wrap-last .bottom{display:flex;align-items:center;font-size:12px;font-weight:400;color:#77777d;padding-left:15px;margin-top:10px}.video-page .video-content .left-catalog .list-wrap .el-tree .catalog-wrap-last .bottom span{margin-right:28px}.video-page .video-content .left-catalog .list-wrap .el-tree .el-tree-node__children .catalog-name{font-size:14px}.video-page .video-content .left-catalog .list-wrap .el-tree .el-tree-node__content{position:relative;width:100%;height:auto;line-height:1;padding:12px 0}.video-page .video-content .left-catalog .list-wrap .el-tree .el-tree-node__expand-icon{position:absolute;right:0;top:calc(50% - 3.5px)}.video-page .video-content .left-catalog .list-wrap .el-tree .el-tree-node__expand-icon.is-leaf{display:none}.video-page .video-content .left-catalog .list-wrap .el-tree .el-tree-node__expand-icon:before{content:""}.video-page .video-content .left-catalog .list-wrap .el-tree .el-tree-node__expand-icon{background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAAHCAYAAADTcMcaAAAAAXNSR0IArs4c6QAAAJZJREFUKFN9zsFNQlEQBdAzGxogIWgnLongBopg69JIorClDEoAawHjhiJMoIMxjzzI/2CY7b0ndyIzB/iNiB93LjM7mGIVmfmKJYYRsfvPVfCFHp6ilDLzA7MKv5uwgg36eImI4wlV+In3JqxgjYczKN0LuoLP2KOAR4zKwnmghSqc4w1bdCs4NF++QRUuMME4Ilqg5H+ZyjgFI8BXNAAAAABJRU5ErkJggg==) no-repeat 100% 100%;background-size:13px 7px}.video-page .video-content .left-catalog .list-wrap .el-tree .el-tree-node__expand-icon.expanded{transform:rotate(0);background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAAICAYAAAAiJnXPAAAAAXNSR0IArs4c6QAAAJ1JREFUKFN10D0SAUEQhuH3S9wAW0LnkCnchhVJFEJ38XcPnEEk3w1UCVuN6t0aU2Oy6f6e6a4RmWNmHaAn6ZnrKy06OAMjYCrpmmZ+kINTmAJcgBUwS2GLHByBvgdrM5sDO7/fmolfFIHCV6qbgJktgG0M5eAADICJpBZEsAQ2/uA9oD0w9kKV+y3fZgmsgSKgLvCW9PoHoolDSY8P+Hk/C/VS8ZsAAAAASUVORK5CYII=) no-repeat 100% 100%}.video-page .video-content .left-catalog .list-wrap .el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content,.video-page .video-content .left-catalog .list-wrap .el-tree .el-tree-node:focus>.el-tree-node__content,.video-page .video-content .left-catalog .list-wrap .el-tree .el-tree-node__content:hover{background-color:transparent}.video-page .video-content .left-catalog .list-wrap .el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content .catalog-wrap-last .top .top-image{background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAALCAYAAACzkJeoAAAAAXNSR0IArs4c6QAAAKhJREFUKFN10LEOwWAUBeBzTFYPYkTiTQgTryA6dkMTo90reAKbpCIRTDYSESElNqL9j1Qq2uKO57s3N/ey0FaZGaynHXpIFYuW7gROMKi7DsdxZ8mSXoEQiOhOs7Bh0w+jD0YjEiYPH9V5n9svjHouxqD5D8M1+58oYOEbVBIoQSAGxwNamyFvcfQCoTHrcfQ+J8SzgCUNaq7DXeLOvKXcKosrbJr0h55U1FBqP9D5PgAAAABJRU5ErkJggg==) no-repeat 100% 100%}.video-page .video-content .left-catalog .list-wrap .el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content .catalog-wrap-last .catalog-name{color:#2669f4!important}.video-page .video-content .left-catalog .close-btn{display:flex;align-items:center;justify-content:center;position:absolute;width:30px;height:60px;top:calc(50% - 30px);right:-30px;background:#2f2f2f;border-radius:0 10px 10px 0;cursor:pointer}.video-page .video-content .left-catalog .close-btn img{width:11px;height:20px}.video-page .video-content .video-play-wrap{background:#fff;width:100%;height:100%}.video-page .video-content .video-play-wrap .player-wrapper{height:100%}.video-page .video-content .video-play-wrap .player-wrapper .video-wrapper{height:100%;padding-bottom:0!important}.video-page .video-content .video-play-wrap .player-wrapper .video-wrapper .video-js .vjs-control-bar{background-color:#282828}.video-page .video-content .video-play-wrap .player-wrapper .video-wrapper .vjs-has-started.vjs-user-inactive.vjs-playing .vjs-control-bar{opacity:1}.video-page .video-content .video-play-wrap .player-wrapper .video-wrapper .video-js .vjs-slider{background-color:#6f859f}.video-page .video-content .video-play-wrap .player-wrapper .video-wrapper .video-js .vjs-play-progress{background-color:#00a4ff}.video-page .video-content .video-play-wrap .player-wrapper .video-wrapper .video-js .vjs-control{width:5em}.video-page .video-content .video-play-wrap .player-wrapper .video-wrapper .vjs-current-time,.video-page .video-content .video-play-wrap .player-wrapper .video-wrapper .vjs-duration{width:4em!important}.video-page .video-content .video-play-wrap .player-wrapper .video-wrapper .vjs-progress-control{min-width:5em}.video-page .video-content .video-play-wrap .player-wrapper .video-wrapper .vjs-playback-rate-value{line-height:1;display:flex;align-items:center;justify-content:center;font-size:14px;color:#fff}.video-page .video-content .video-play-wrap .player-wrapper .video-wrapper .vjs-menu{font-size:12px;color:#fff}.video-page .video-content .video-play-wrap .player-wrapper .video-wrapper .vjs-menu .vjs-menu-content{display:flex;justify-content:space-around;flex-direction:column;width:64px;min-height:150px;background:rgba(0,0,0,.6);border-radius:4px;max-height:unset}.video-page .video-content .video-play-wrap .player-wrapper .video-wrapper .vjs-menu .vjs-selected{background-color:transparent;color:#3778ff}.video-page .video-content .video-play-wrap .player-wrapper .video-wrapper .vjs-menu li{line-height:1.8em}.video-page .video-content .video-play-wrap .player-wrapper .video-wrapper .video-js .vjs-volume-panel .vjs-volume-control{display:flex;align-items:center;justify-content:center;z-index:1000;background:rgba(0,0,0,.6);width:40px;height:150px;border-radius:4px;bottom:146px}.video-page .video-content .video-play-wrap .player-wrapper .video-wrapper .video-page .video-content .video-play-wrap .player-wrapper .video-wrapper .video-js .vjs-slider{background-color:#70717b}.video-page .video-content .video-play-wrap .player-wrapper .video-wrapper .vjs-volume-bar.vjs-slider-vertical{height:120px}.video-page .video-content .video-play-wrap .player-wrapper .video-wrapper .video-js .vjs-volume-level{background-color:#3778ff}.video-page .video-content .video-play-wrap .loading-wrap{position:absolute;left:0;top:0;bottom:42px;width:100%;z-index:100}.video-page .video-content .open-btn{display:flex;align-items:center;justify-content:center;position:absolute;width:30px;height:60px;top:calc(50% - 30px);left:0;background:rgba(47,47,47,.3);border-radius:0 10px 10px 0;cursor:pointer}.video-page .video-content .open-btn img{width:11px;height:20px}.video-page .video-fluent{position:absolute;right:4em;bottom:42px;display:flex;justify-content:space-around;flex-direction:column;align-items:center;width:5em;background:rgba(0,0,0,.6);border-radius:4px}.video-page .video-fluent span{display:flex;justify-content:center;width:100%;flex:1;text-align:center;font-size:12px;color:#fff;cursor:pointer;line-height:30px;height:30px}.video-page .video-fluent span:hover{background-color:hsla(0,0%,100%,.3)}.video-page .video-fluent .selected{background-color:transparent;color:#3778ff}