@charset "UTF-8";
/***************自习课 start**************/
html{
    position: relative;
    font-size: 62.5%;
    height:100%;
}
body {
    position:relative;
    height:100%;
    background:url("../images/course_bg.jpg") no-repeat top center;
    background-size:100% 100%;
    font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
    font-size:1.5rem;
    color: #000;
    margin: 0;
    padding: 0;
}
.mui-bar-transparent{
    z-index:1000;
}
.mui-bar .mui-title{ color:#fff;}
.mui-bar-tab~.mui-content {
    padding-bottom: 50px;
}
.mui-content,.swiper-slide{
    background:transparent!important;
}
.mui-bar-tab{
    background:#161616;
    border-color:#161616;
}
.mui-bar-tab .mui-tab-item{
    color:#999;
}
.mui-bar-tab .mui-tab-item.mui-active{
    color:#fff;
}
.swiper-container {
    z-index:999;
    width: 100%;
    height: 100%;
}
.swiper-slide {
    text-align: center;
    font-size: 18px;
    /*background: #fff;*/
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
}
.video_box{
    width:100%;
    height:210px;
}
.video_box video{
    width:100%;
    height:100%;
    object-fit:cover;
}
/*slide上下内容 start*/
.slide_up{
    display: flex;
    align-items: center;
    justify-content: center;
    text-align:left;
    position:absolute;
    top:44px;
    left:5%;
    width:90%;
    height:calc(50% - 154px);
    overflow:hidden;
}
.slide_up h1{
    display: table-cell;
    vertical-align: middle;
    color:#fff;
    font-size:1.7rem;
    line-height:30px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    -webkit-line-clamp: 5;
}
.slide_down{
    position:absolute;
    bottom:70px;
    left:5%;
    width:90%;
    height:calc(50% - 175px);
    text-align:left;
    overflow:hidden;
}
.slide_down p{
    display: table-cell;
    vertical-align: middle;
    color:#fff;
    font-size:1.5rem;
    margin-top:10px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2;
}
@media(max-width:330px){
    .slide_down p{
        font-size:1.4rem;
        margin-top:0;
    }
}
/*slide上下内容 end*/

/*系列课程 start*/
.course{
    width:100%;
    height:100%;
    background:#fff;
    overflow-y:scroll;
}
.self_banner{
    position:relative;
    width:100%;
    margin-bottom:10px;
    overflow:hidden;
}
.self_banner img{
    width:100%;
}
.self_banner p{
    position:absolute;
    left:5%;
    top:50%;
    margin-top:-45px;
    width:90%;
    color:#fff;
    font-size:1.7rem;
    line-height:26px;
    text-align: justify;
}
.self_list{
    width:100%;
    overflow:hidden;
}
.self_list li{
    position:relative;
    width:94%;
    line-height:26px;
    background:#eee;
    border-radius:5px;
    padding:10px;
    margin:0 auto 10px;
    text-align:left;
    overflow:hidden;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.self_list li a{
    display:block;
    width:100%;
    padding-left:30px;
    overflow:hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.self_list li i{
    position:absolute;
    left:3%;
    top:13px;
    width:22px;
    height:22px;
    background:url("../images/icon_play2.png") no-repeat center;
    background-size:cover;
}
.catalog_list li.beat a{
    color:#e50d01;
}
@media(max-width:345px){
    .self_banner p{
        font-size:1.5rem;
        line-height:21px;
        margin-top:-35px;
    }
}
/*系列课程 end*/

/*点赞收藏分享 start*/
.right_bar{
    position:fixed;
    z-index:99;
    right:0;
    top:50%;
    margin-top:-105px;
    width:50px;
    height:210px;
    text-align: center;
}
.right_btn{
    height:60px;
    margin-bottom:10px;
}
.heart {
    width:28px;
    height:28px;
    cursor:pointer;
    margin:0 auto;
}
#like1{
    background: url(../images/self_zan1.png) no-repeat center;
    background-size:cover;
}
#like1.sel {
    background: url(../images/self_zan2.png) no-repeat center;
    background-size:cover;
}
#like2{
    background: url(../images/self_collect1.png) no-repeat center;
    background-size:cover;
}
#like2.sel {
    background: url(../images/self_collect2.png) no-repeat center;
    background-size:cover;
}
#share{
    display:block;
    background: url(../images/self_share.png) no-repeat center;
    background-size:cover;
}
.likeCount{
    width:100%;
    font-size:1.3rem;
    line-height:30px;
    color: #fff;
    text-align: center;
}
/*点赞收藏分享 end*/

/*分享 start*/
#forward .share_list{
    display:flex;
    text-align: center;
    padding:15px 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
#forward .share_list li{
    flex:1;
    border:0;
}
#forward .share_list li a{
    font-size:1.5rem;
    padding:15px 0;
}
#forward .share_list li img{
    width:40px;
}
#forward .share_list li span{
    display:block;
    width:100%;
    margin-top:15px;
    overflow:hidden;
}
#forward .mui-table-view .mui-table-view-cell:after{
    background:transparent;
}
.mui-popover .mui-table-view .mui-table-view-cell a{
    font-size:1.5rem;
}
/*分享 end*/
/***************自习课 end**************/