.learning-containe{display:flex;position:relative}
.learning-sidebar{height:calc(100vh -  60px);position:sticky;top:60px;padding:16px;box-sizing:border-box;width:416px;flex-shrink:0;background:#f7f8fa;border-right:#dbdcdd solid 1px;transition:all .3s ease}
.learning-sidebar.hidden{transform:translateX(-416px);width:0;padding:0;border:none;max-width:416px}
.learning-sidebar .listitem{max-height:100%;border:#dbdcdd solid 1px;border-radius:12px;background:#fff;overflow:hidden}
.learning-sidebar .listitem.hidden{display:none}
.learning-sidebar .listitem .title{border-bottom:#dbdcdd solid 1px;display:flex;padding:12px 16px}
.learning-sidebar .listitem .title .icon{width:40px;height:40px;background:url(../images/course-bg.png) no-repeat center;background-size:100%;border-radius:8px;text-align:center;margin-right:12px}
.learning-sidebar .listitem .title .icon i{font-size:24px;color:#fff;line-height:40px}
.learning-sidebar .listitem .title h2{font-size:20px;align-items:center;display:flex}
.learning-sidebar .listitem .stage-switch{display:flex;justify-content:space-between;border-bottom:#eee solid 1px;padding:16px 0}
.learning-sidebar .listitem .stage-switch .txt{text-align:center}
.learning-sidebar .listitem .stage-switch .txt h3{font-size:16px;line-height:22px}
.learning-sidebar .listitem .stage-switch .txt h4{font-size:12px;padding-bottom:5px}
.learning-sidebar .listitem .stage-switch .txt h4 a{color:#1865f2}
.learning-sidebar .listitem .stage-switch .txt h4 em{font-family:SimSun;padding:0 5px}
.learning-sidebar .listitem .stage-switch .next,.learning-sidebar .listitem .stage-switch .prev{align-items:center;display:flex;padding:0 16px;cursor:pointer}
.learning-sidebar .listitem .content{overflow-y:auto;height:calc(100vh - var(--t-height) - var(--s-height) - 93px)}
.learning-sidebar .listitem .content h3{
    font-size: 16px;
    padding: 20px 0 15px;
    border-bottom:#eee solid 1px;
}
.learning-sidebar .listitem .content ul{margin:0 16px}
.learning-sidebar .listitem .content ul li{border-bottom:#eee solid 1px}
.learning-sidebar .listitem .content ul li a{display:flex;align-items:center;padding:16px;min-height:72px;box-sizing:border-box;cursor:pointer}
.learning-sidebar .listitem .content ul li a:hover{text-decoration:none;background:#eee}
.learning-sidebar .listitem .content ul li .icon{width:22px;height:22px;border-radius:2px;border:#909195 solid 1px;line-height:22px;text-align:center;margin-right:15px;flex-shrink:0;position:relative}
.learning-sidebar .listitem .content ul li .icon i{font-size:13px;font-weight:700;color:#21242c}
.learning-sidebar .listitem .content ul li .icon .layui-progress{position:absolute;bottom:-1px;height:4px;left:-1px;right:-1px;background:0 0}
.learning-sidebar .listitem .content ul li .icon .layui-progress-bar{height:4px;border-radius:0 0 2px 2px;background:#1865f2}
.learning-sidebar .listitem .content ul li .icon .complete{position:absolute;top:-8px;right:-8px;width:18px;height:18px;line-height:18px}
.learning-sidebar .listitem .content ul li .icon .complete i{color:#1865f2;position:relative;z-index:1;box-shadow:inset 0 0 0 8px #fff;border-radius:100%;border:#fff solid 2px}
.learning-sidebar .listitem .content ul li .progress-svg{width:22px;height:36px;text-align:center;margin-right:15px;flex-shrink:0}
.learning-sidebar .listitem .content ul li .progress-svg .progress{fill:#d4d6d9}
.learning-sidebar .listitem .content ul li .progress-svg .progress .bar{fill:#9059ff}
.learning-sidebar .listitem .content ul li .t h4{font-size:16px;font-weight:400;line-height:24px}
.learning-sidebar .listitem .content ul li .t p{font-size:14px;padding-top:5px;color:#666}
.learning-sidebar .listitem .content ul li em{background:#1865f2;color:#fff;font-size:12px;margin-left:10px;border-radius:4px;padding:0 6px;height:21px;line-height:21px;flex-shrink:0}
.learning-sidebar .listitem .content ul li.active a{background:#edf3fe;position:relative;box-shadow:inset 4px 0 #1865f2}
.learning-sidebar .listitem .content ul li.active a:hover{background:#dae6fd}
.learning-sidebar .listitem .content .breadcrumb{background:#f7f8fa;margin:12px 16px 0;padding:16px;border-radius:4px;text-align:center}
.learning-sidebar .listitem .content .breadcrumb a{font-size:16px;line-height:26px;text-decoration:underline;color:#6e7076}
.learning-sidebar .listitem .content .breadcrumb a:hover{color:#1865f2}
.learning-sidebar .listitem .content .breadcrumb em{font-family:SimSun;padding:0 5px}
.learning-sidebar .listitem .content .copyright{text-align:center;font-size:12px;padding:16px 0 30px}
.learning-content{flex-grow:1;position:relative}
.learning-content .switch{position:absolute;left:0;top:50%;margin-top:-20px;border:#dbdcdd solid 1px;border-left:0;border-radius:0 50% 50% 0;height:40px;line-height:40px;text-align:center;padding:0 10px 0 5px;cursor:pointer;background:#fff}
.learning-content .switch i{font-size:18px}
.learning-content .loading{fill:#dbdcdd;width:100%;height:100%;position:absolute;left:0;top:0}
.learning-content .loading .loading-svg{width:96px;height:96px;position:absolute;left:50%;top:50%;margin:-48px 0 0 -48px;animation:rotate 2s infinite linear}
@keyframes rotate{from{transform:rotate(0)}
to{transform:rotate(360deg)}
}
.content-wrapper{overflow:auto;height:calc(100vh - 126px);padding:24px 48px 60px;box-sizing:border-box}
.content-wrapper .video-box{background:#000;text-align:center}
.content-wrapper .video-box .video{padding-bottom: 44%;position: relative;z-index: 1;}
#player{position: absolute;left:0;top:0;width: 100%;height: 100%;}
.fullScreenContainer {position: fixed !important;top: 0px;left: 0px;width: 100vw !important;height: 100vh !important;z-index: 9999999;}
.content-wrapper h1{text-align:center;font-size:28px;padding-bottom:24px}
.content-wrapper .title{border-bottom:#dbdcdd solid 1px}
.content-wrapper .title h3{font-size:16px;color:#1865f2;position:relative;display:inline-block;padding:0 0 10px}
.content-wrapper .title h3::before{content:'';position:absolute;height:3px;background:#1865f2;position:absolute;left:0;bottom:0;width:100%}
.content-wrapper .introduce{padding:30px 0 0 0}
.content-wrapper .introduce .txt{padding:24px 0;font-size:16px;line-height:28px}
.content-wrapper .introduce .txt img{max-width: 100%;}
.content-wrapper .introduce .txt .copy_btn_code{color: #ccc;cursor: pointer;position: absolute;top: 10px;right: 10px;}
.content-wrapper .content-footer{background:#fff;position:absolute;bottom:0;left:0;min-height:66px;padding:0 16px;width:100%;box-sizing:border-box;display:flex;border-top:#dbdcdd solid 1px;justify-content:flex-end;justify-content:space-between;box-sizing:border-box}
.content-footer .try{align-items:center;display:flex;font-size:18px;font-weight:700}
.content-footer .try a{color:#1865f2}
.content-footer .try a:hover{text-decoration:none}
.content-footer .try i{padding-right:8px}
.content-wrapper .content-footer .next{align-items:center;display:flex;justify-content:flex-end;flex-grow:1}
.content-wrapper .content-footer .next a{background:#1865f2;display:inline-block;border-radius:4px;padding:0 16px;height:40px;line-height:40px;font-size:16px;font-weight:700;color:#fff;text-decoration:none}
.content-wrapper .content-footer .next a:hover{box-shadow:0 0 0 1px #fff,0 0 0 3px #1865f2;text-decoration:none}
.content-wrapper .content-footer .disable{align-items:center;display:flex}
.content-wrapper .content-footer .disable a{background:#b8b9bb;display:inline-block;border-radius:4px;padding:0 16px;height:40px;line-height:40px;font-size:16px;font-weight:700;color:#fff;text-decoration:none;pointer-events:none}
.problem{padding:30px 0 0 0}
.problem .title{margin-bottom:30px}
.problem .item{border-bottom:#eee solid 1px;padding:24px 0;display:flex}
.problem .item .user-person{width:48px;height:48px;margin-right:20px}
.problem .item .user-person img{width:48px;height:48px;border-radius:100%;border:#e0e0e1 solid 2px;box-sizing:border-box}
.problem .item .content{flex:1}
.problem .item .content .user-name{font-size:14px;padding-bottom:15px}
.problem .item .content .user-name span{color:#717378;padding-left:10px}
.problem .item .content .txt{font-size:16px;line-height:28px}
.problem .item .content .txt img{width:120px;margin-top:10px}
.problem .item .content .reply{display:flex;margin-top:24px}
.problem .ck-editor__editable{height:200px}
.ck.ck-powered-by-balloon{display:none!important}
.ck-editor h1{text-align:left}
h1.ck-placeholder{text-align:left}
.problem .submit{text-align:right;padding:20px 0 30px}
.problem .submit a{background:#1865f2;display:inline-block;border-radius:4px;padding:0 30px;height:40px;line-height:40px;font-size:16px;font-weight:700;color:#fff;text-decoration:none;cursor: pointer;}
.problem .submit a:hover{box-shadow:0 0 0 1px #fff,0 0 0 3px #1865f2;text-decoration:none}
.problem .none{text-align:center;padding:50px 0 50px}
.problem .none h4{font-size:18px}
.problem .none .submit{text-align:center}
.skin-tips{right:30px;bottom:80px;left:auto!important;top:auto!important;width:auto!important}
.skin-tips .layui-layer-content{background:#fff!important;border-radius:6px!important;border:1px solid rgba(0,0,0,.1)!important;box-shadow:0 1px 4px 0 rgba(0,0,0,.1)!important;padding:16px;display:flex}
.skin-tips .layui-layer-content .info{color:#21242c;padding-left:15px;font-size:16px}
.skin-tips .layui-layer-content .info h3{font-size:18px;padding:5px 0 10px}
.skin-tips .layui-layer-content .info p{white-space:nowrap}
.skin-tips .layui-layer-content .info a{color:#1865f2}
.summarize-wrapper{overflow:auto;height:calc(100vh - 60px);padding:24px 0 0;box-sizing:border-box}
.summarize-box{background:#0b2149;height:calc(100% - 61px);text-align:center;color:#fff;position:relative}
.summarize-box h2{font-size:36px;padding:80px 0 20px;position: relative;}
.summarize-box p{font-size:18px;position: relative;}
.summarize-box h3{font-size:20px;padding:30px 0 0;position: relative;}
.summarize-box .btn{background: #fff;display: inline-block;border-radius:5px;font-size: 18px;margin-top: 20px;font-weight: bold;position: relative;z-index: 99999}
.summarize-box .btn a{ color: #1865f2;display: block;padding:15px 40px;}
.summarize-img{position:absolute;bottom:0;width:100%;display:flex;justify-content:space-around;overflow:hidden}

.summarize-box .price{padding:25px 0;font-size: 18px;position: relative;}
.summarize-box .price span{font-size:30px;font-family:arial;color:#fff;padding:0 10px;font-weight:700}
.summarize-box .price em{color:rgba(255,255,255,.6);text-decoration:line-through}
#player .novid{width: 100%;height:100%;background: #000;color: #fff;text-align: center;font-size: 18px;display:table;}
#player .novid .tips{display:table-cell;vertical-align: middle;}
#player .novid .tips .ccH5TipText {display: block;font-size: 14px;padding: 0 10%;height: 42px;overflow: hidden;line-height: 21px;}


.videoTips .icon{cursor: pointer;position: relative;}
.videoTips .txt{display: none;position: absolute;top:100px;left:50%;transform:translateX(-50%)}
.videoTips .icon:hover  .txt{display: block;}
.ccH5PlayBtn{width: 100px;height: 100px;background: url(../images/video-icon.jpg) no-repeat;    background-size: 100px 100px;top: 45%;left: 45%;}
.index-btn{margin-top:5px;background: #1865f2;display: inline-block;border-radius: 4px;padding: 0 32px;height:56px;line-height:56px;font-size: 18px;font-weight: bold;color: #fff;text-align: center;border: none;cursor: pointer;}
.index-btn:hover {box-shadow: 0 0 0 1px #ffffff, 0 0 0 3px #1865f2;text-decoration: none;color: #fff;}