.flex-start-center{display:flex;align-items:center}.text-too-long{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}@-webkit-keyframes rotate{0%{transform:rotate(0deg)}to{transform:rotate(90deg)}}@keyframes rotate{0%{transform:rotate(0deg)}to{transform:rotate(90deg)}}#app{font-family:PingFang SC-Regular,PingFang SC,Microsoft YaHei sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-align:left;color:#666;width:100%}#app .video-player-wrap{width:100%;height:calc(56.25vw + 50px);background-color:#f5f5f5}#app .video-player-wrap .video-player{width:100%;height:56.25vw}#app .video-player-wrap .small-float{width:50%;height:28.125vw;position:fixed;top:0;right:0;z-index:100}#app .video-player-wrap .player-title{color:#333;padding:1rem;font-size:1.167rem;font-weight:700}#app img.arrow{width:1.667rem;height:auto;margin:0 1.333rem}#app .section-icon{margin:0 .333rem 0 1rem;width:1.333rem;height:auto}#app .line{margin-top:1rem;width:100%;height:1px;background-color:#eee}#app .directory{width:100%;padding-top:1rem}#app .directory .class-room{margin:1rem 1rem;background:#fff;box-shadow:0 0 16px 0 rgba(0,0,0,.04);border-radius:16px}#app .directory .class-room .head{display:flex;align-items:center;padding:1.333rem 0 1rem 1.333rem}#app .directory .class-room .head img{width:1.8rem;height:auto}#app .directory .class-room .head span{font-size:1.333rem;font-weight:700;margin-left:.333rem;color:#333}#app .directory .class-room .class-room-item{padding:.667rem 1.333rem;font-size:1.167rem;line-height:1.667rem}#app .directory .class-room .class-room-item .chapter-title,#app .directory .class-room .class-room-item .course{display:flex;align-items:center;justify-content:space-between;align-items:flex-start;transform:rotate(0deg);transition:transform .2s linear}#app .directory .class-room .class-room-item .chapter-title>img,#app .directory .class-room .class-room-item .course>img{width:1.667rem;height:auto;margin:0 0 0 1.333rem}#app .directory .class-room .class-room-item .chapter-title.expend>img,#app .directory .class-room .class-room-item .course.expend>img{transform:rotate(90deg);transition:transform .2s linear}#app .directory .class-room .class-room-item .chapter-title.collapsed>img,#app .directory .class-room .class-room-item .course.collapsed>img{transform:rotate(0deg);transition:transform .2s linear}#app .directory .class-room .class-room-item .chapter{padding-top:1.25rem}#app .directory .class-room .class-room-item .chapter .chapter-title{font-size:1.333rem;color:#333}#app .directory .class-room .class-room-item .chapter .chapter-title img{margin-right:2rem}#app .directory .class-room .class-room-item .chapter .section-warp{margin-top:1.333rem;padding:.667rem 0;background:#f8f8f8;border-radius:1.333rem}#app .directory .class-room .class-room-item .chapter .section-warp .section{display:flex;align-items:center;justify-content:space-between;align-items:flex-start;padding:.833rem 0}#app .directory .class-room .class-room-item .chapter .section-warp .section .start{width:80%;display:flex;align-items:center;align-items:flex-start}#app .directory .class-room .class-room-item .chapter .section-warp .section .start .section-name{flex-shrink:2}#app .directory .class-room .class-room-item .chapter .section-warp .section .start img{margin:0 .333rem 0 1rem;width:1.333rem;height:auto}#app .directory .class-room .class-room-item .chapter .section-warp .section .section-right{cursor:pointer;width:20%}#app .directory .class-room .class-room-item .chapter .section-warp .section .section-right .play{text-align:center;float:right;color:#f2183d;padding:1px .333rem;margin-right:1.333rem;width:3rem;height:1.333rem;line-height:1.333rem}#app .directory .class-room .class-room-item .chapter .section-warp .section .section-right .border{border-radius:.333rem;border:1px solid #f2183d}#app .directory .class-room .class-room-item .chapter .section-warp .section .section-right img{margin:0 .333rem 0 1rem;width:1.333rem;height:auto;margin:auto}#app .pc-container{margin:auto;width:100%;height:100%;display:flex;align-items:center}#app .pc-container>div{height:100%}#app .pc-container>div.pc-player{width:70%;background:url(/img/pc-bg.54e10212.jpg) 50% no-repeat;background-size:cover}#app .pc-container>div.pc-right{cursor:pointer;width:30%;color:#e4e4e4;background-color:#475477;font-size:14px}#app .pc-container>div.pc-right .class-room-head-wrap{width:100%;position:relative;height:40px;background:#18223d}#app .pc-container>div.pc-right .class-room-head-wrap .class-room-head{width:88%;height:100%;border-bottom:2px solid #475477}#app .pc-container>div.pc-right .class-room-head-wrap .class-room-head .head-title{white-space:nowrap;text-overflow:ellipsis;border-bottom:2px solid #475477;border-right:2px solid #475477;background:#242f48;text-indent:1rem;font-size:17px;line-height:40px;letter-spacing:1px;overflow:hidden}#app .pc-container>div.pc-right .class-room-head-wrap .head-icon{width:41px;height:40px;position:absolute;top:0;right:0;display:flex;justify-content:center;align-items:center;background:#18223d;border-left:2px solid #18223d}#app .pc-container>div.pc-right .class-room-head-wrap .head-icon.show-list{border-bottom:2px solid #18223d}#app .pc-container>div.pc-right .class-room-head-wrap .head-icon img{width:20px;height:auto}#app .pc-container>div.pc-right .class-room-head-wrap .class-room-list-wrap{height:calc(100% - 40px);z-index:100;position:absolute;top:42px;width:100%}#app .pc-container>div.pc-right .class-room-head-wrap .class-room-list-wrap .class-room{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;background:#18223d;width:100%;text-indent:1rem;line-height:40px;font-size:17px}#app .pc-container>div.pc-right .class-room-head-wrap .class-room-list-wrap .class-room.selected{background:#fa6161}#app .pc-container>div.pc-right .course-wrap{overflow-y:auto;height:calc(100% - 57px);padding-left:15px;padding-top:15px;background:#2a3550}#app .pc-container>div.pc-right .course-wrap .course .course-head{display:flex;align-items:center;justify-content:space-between;align-items:flex-start}#app .pc-container>div.pc-right .course-wrap .course .course-head span{width:88%;padding:5px}#app .pc-container>div.pc-right .course-wrap .course .course-head img{width:13px;height:auto;margin-top:10px;margin-right:15px}#app .pc-container>div.pc-right .course-wrap .course .chapter-wrap{margin-left:20px}#app .pc-container>div.pc-right .course-wrap .course .chapter-wrap .chapter-head{padding:5px 0;display:flex;align-items:center}#app .pc-container>div.pc-right .course-wrap .course .chapter-wrap .chapter-head img{width:12px;height:auto;margin-right:5px}#app .pc-container>div.pc-right .course-wrap .course .chapter-wrap .section-warp .section{display:flex;align-items:center;justify-content:space-between;align-items:flex-start;padding:5px 20px 5px 10px}#app .pc-container>div.pc-right .course-wrap .course .chapter-wrap .section-warp .section span:first-child{line-height:24px;width:80%}#app .pc-container>div.pc-right .course-wrap .course .chapter-wrap .section-warp .section span:last-child{width:40px;text-align:center}#app .pc-container>div.pc-right .course-wrap .course .chapter-wrap .section-warp .section img{margin-top:5px;width:15px;height:auto}#app .pc-container>div.pc-right .course-wrap .course .chapter-wrap .section-warp .section .section-play{padding:5px;background:#fb4343;border-radius:3px;font-size:12px;color:#fff;line-height:15px}#app .pc-container>div.pc-right .course-wrap .course .chapter-wrap .section-warp .section.selected{color:#fb4343;background:#343f5a}#app .pc-container>div.pc-right .course-wrap .course.expend .course-head img{transform:rotate(180deg);transition:transform .2s linear}#app .pc-container>div.pc-right .course-wrap .course.collapsed .course-head img{transform:rotate(0deg);transition:transform .2s linear}