.self-audio-one{position:relative;margin:0 auto;width:480px;height:160px;background:linear-gradient(180deg,#272c33,#12151a);box-shadow:0 6px 12px 0 rgba(18,21,26,.08);border-radius:8px}.self-audio-one audio{visibility:hidden}.self-audio-one .slider{width:100%;position:absolute;bottom:31px}.self-audio-one .audio-options{position:relative;height:48px;width:100%;position:absolute;bottom:0;display:flex;align-items:center;left:20px}.self-audio-one .audio-options .icon-play{height:24px;cursor:pointer}.self-audio-one .audio-options .audio-time{font-size:12px;font-weight:600;color:#fff;margin-left:20px}.self-audio-one .audio-title{display:flex;align-items:center;position:absolute;top:43px;left:24px;z-index:9}.self-audio-one .audio-title .title{font-size:16px;font-weight:600;color:#fff;margin-right:37px}.self-audio-one .audio-icon{position:absolute;top:24px;width:64px;height:64px;left:50%;margin-left:-32px}.self-audio-one .close-icon{font-size:18px;position:absolute;right:12px;top:12px;cursor:pointer;color:#fff}.courseware-preview .video-wrapper{position:fixed;top:0;right:0;bottom:0;left:0;overflow:hidden;margin:0;z-index:2001;display:flex;align-items:center;justify-items:center;width:100%;background:rgba(75,83,92,.5)}.courseware-preview .video-wrapper .video-title{width:960px;height:48px;position:absolute;left:50%;top:50%;transform:translate(-50%,-318px);background:#000;border-radius:8px 8px 0 0;color:#fff;z-index:2002;line-height:48px}.courseware-preview .video-wrapper .video-title .title-icon{font-size:18px;position:absolute;right:24px;top:12px;cursor:pointer}.courseware-preview .video-wrapper .video-title .title{margin-left:24px;font-size:16px;font-weight:600}.courseware-preview .video-wrapper #dplayer{margin:0 auto;width:960px;height:636px}.courseware-preview .video-wrapper #dplayer .dplayer-video-wrap{border-radius:8px;background:#000}.courseware-preview .video-wrapper #dplayer .dplayer-controller-mask{border-radius:0 0 8px 8px;background:#000}.courseware-preview .video-wrapper #dplayer .dplayer-bar-wrap{width:100%;left:0;top:-20px}.courseware-preview .video-wrapper #dplayer .dplayer-icons{top:-3px}.courseware-preview .video-wrapper #dplayer .dplayer-played{background:#409fff!important}.courseware-preview .audio-wrapper{position:fixed;top:0;right:0;bottom:0;left:0;overflow:hidden;margin:0;z-index:2001;display:flex;align-items:center;justify-items:center;width:100%;background:rgba(75,83,92,.5)}.courseware-preview .audio-wrapper .el-slider__runway{height:2px}.courseware-preview .audio-wrapper .el-slider__runway .el-slider__bar{height:2px;background:#409fff}.courseware-preview .audio-wrapper .el-slider__runway .el-slider__button-wrapper{top:-17px!important;display:none}.courseware-preview .audio-wrapper .el-slider__runway .el-slider__button{width:10px;height:10px}.courseware-preview .el-drawer{background:transparent}.courseware-preview .el-drawer__header{margin-bottom:0;background:#272c33;box-shadow:0 4px 8px 0 rgba(18,21,26,.6);border-radius:12px 0 0 0;font-weight:600;color:#fff;position:relative}.courseware-preview .el-drawer__body{padding:0}.courseware-preview .el-drawer__body .drawe-body{display:flex;align-items:center;justify-content:space-between;height:100%}.courseware-preview .el-drawer__body .drawe-body .drawe-left{flex:1;height:100%;background:#12151a}.courseware-preview .el-drawer__body .drawe-body .drawe-left .preview-page-wrap{display:flex;justify-content:center}.courseware-preview .el-drawer__body .drawe-body .drawe-left .preview-page-wrap .preview-page{display:inline-block;margin-top:24px;text-align:center;font-weight:600;margin-bottom:20px;padding:4px 12px;background:rgba(18,21,26,.4);border-radius:4px}.courseware-preview .el-drawer__body .drawe-body .drawe-left .preview-page-wrap .preview-page .current-page{font-size:16px;color:#fff}.courseware-preview .el-drawer__body .drawe-body .drawe-left .preview-page-wrap .preview-page .total-page{font-size:16px;color:hsla(0,0%,100%,.4)}.courseware-preview .el-drawer__body .drawe-body .drawe-left .preview-img{width:100%;height:calc(100% - 70px);background-size:contain!important;background-position:50%!important}.courseware-preview .el-drawer__body .drawe-body .drawe-left .preview-pagetion{width:100%;display:flex;flex-direction:column;position:absolute;bottom:0;right:288px}.courseware-preview .el-drawer__body .drawe-body .drawe-left .preview-pagetion .icon{cursor:pointer;display:flex;justify-content:flex-end;font-size:24px;color:#fff;margin-bottom:34px;margin-right:24px}.courseware-preview .el-drawer__body .drawe-body .drawe-left .preview-pagetion .nextDisabled,.courseware-preview .el-drawer__body .drawe-body .drawe-left .preview-pagetion .preDisabled{cursor:not-allowed!important;color:#4a4e52!important}.courseware-preview .el-drawer__body .drawe-body .drawe-right{width:288px;padding:0 12px;height:100%;background:#272c33;overflow-y:scroll;overflow-x:hidden}.courseware-preview .el-drawer__body .drawe-body .drawe-right .img-list{margin-top:24px}.courseware-preview .el-drawer__body .drawe-body .drawe-right .img-list .img-item{width:264px;height:148px;border-radius:4px;position:relative;box-sizing:border-box}.courseware-preview .el-drawer__body .drawe-body .drawe-right .img-list .img-item .img-No{position:absolute;top:0;left:0;width:44px;height:24px;border-radius:0 0 8px 0;background:rgba(0,0,0,.75);text-align:center;line-height:24px;font-size:16px;font-weight:600;color:#fff}.courseware-preview .el-drawer__body .drawe-body .drawe-right .img-list .img-item .imgNoAcitve{background:#409fff}.courseware-preview .el-drawer__body .drawe-body .drawe-right .img-list .itemActive{box-shadow:0 4px 8px 0 #0e418c;border:2px solid #409fff}