.titleBar{
    /* text-align: center;
    margin-bottom: .12rem;
    background: #fff; */
}
.titleBar h3{
    /* font-size: .36rem;
    color:#333;
    line-height: .84rem; */
}
.studyCenter{
    padding:.48rem .28rem;
    background: #090A4A; 
    height: 3.15rem;
    position: relative;
}
.studyCenter .cover{
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    position: absolute;
    top:.48rem;
    right: .28rem;
    background: #fff;
}
.studyCenter .caption{
    font-size: .36rem;
    color:#fff;
    font-weight: bold;
}
.studyCenter .text{
    font-size: .26rem;
    color:#fff;
    margin-top: .1rem;
}
.progressBar{
    padding-top: .24rem;
    position: relative;
    width: 4.7rem;
}
.progressBar .progress{
    background: #fff;
    width:100%;
    height: .06rem;
    border-radius:.06rem;
    overflow: hidden;
    display: inline-block;
    vertical-align: middle;
}
.progressBar .progress div{
    background: #FFC108;
    height:.06rem;
    border-radius:.06rem;
    transition: all .5s ease;
}
.progressBar .txt{
    color:#FFC108;
    font-size: .2rem;
    display: block;
    position: absolute;
    top:0;
    right: 0;
}

.dataBox{
    border-radius: .1rem;
    background: #fff;
    height: 1.9rem;
    position: relative;
    display: flex;
    z-index: 2;
    box-shadow:0px .1rem .12rem rgba(230,229,236,0.6);
    margin-top: .3rem;
} 
.dataBox .item{
    width: 50%;
    display: inline-block;
    padding:.4rem .4rem;
}
.dataBox .text{
    color:#999;
    font-size: 0.24rem;
}
.dataBox .total{
    color:#1A1A1A;
    font-size: 0.48rem;
    line-height: 120%;
    font-family: DINCondensed;
}
.dataBox .total .num{
    color:#e62129;
    font-size: 1rem; 
    margin-right: .1rem;
}
.dataBox .item:last-child .num{
    color:#01A99D;
    font-size: 1rem;
}


.studyBox{
    padding-top: 1.55rem;
    background: #fff;
	justify-content: space-around;
	display: flex;
}
.studyTabs{
    text-align: center;
	display: flex;
	justify-content: space-evenly;
	background: #F7F7F7;
}
.studyTabs li{
   
}
.studyTabs li a{
    color:#999;
    font-size: 0.3rem;
    position: relative;
    display: block;
    line-height: .9rem; 
}
.studyTabs li a::after{
    width:.32rem;
    height:.06rem;
    background:#e62129;
    border-radius:.03rem;
    position: absolute;
    bottom: 0;
    left: 50%;
    margin-left: -.16rem;
    display: none;
    content: '';
}
.studyTabs li.active a{
    color:#1A1A1A
}
.studyTabs li.active a::after{
    display: block;
}
.studyContent{
    display: none;
    padding: .28rem ;
}
.studyContent.show{
    display: block;
}
.studyList li{
    margin-bottom: .3rem;
    padding-bottom: .3rem;
    display: flex;
    border-bottom: 0.01rem solid #E9E9E9;
    position: relative;
}
.studyList li .cover{
    width:1.24rem ;
    height:1.48rem;
}
.studyList li .box{
    width:6rem ;
    padding-left: .18rem;
    padding-top: .15rem;
}
.studyList li .caption{
    font-size: .32rem;
    color:#1A1A1A;
    line-height: .44rem;
    font-weight: bold;
}
.studyList li .text{
    font-size: .28rem;
    color:#999;
    line-height: .4rem;
    margin: .2rem 0 .4rem;
}
.studyList li .action{
    display: flex;
    justify-content: space-between;
}
.studyList li .state{
    font-size: .26rem;
    color:#BCC0CF;
    line-height: .54rem;
}
.studyList li .btn{
    font-size: .28rem;
    color:#fff;
    padding: 0 .3rem;
    background: #BCC0CF;
    border-radius: .54rem;
    line-height: .54rem;
    display: inline-block;
    position: relative;
    z-index: 9;
}
.studyList li.review .btn{
    background: #e62129;
}
.studyList li.active .btn{
    background: #01A99D;
}
.studyList li.active .state{
    color: #01A99D;
}
.studyList li:last-child,
.noteList li:last-child{
    border-bottom: 0 none;
}
.studyList li:last-child::after,
.noteList li:last-child::after{
    display: none;
}


.noteList li{
    margin-bottom: .3rem;
    padding-bottom: .3rem;
    border-bottom:0.01rem solid #E9E9E9;
    position: relative;
}
.noteList li a{
    display: block;
}
.noteList li .caption{
    font-size: .32rem;
    font-weight: bold;
    color:#1A1A1A;
    line-height: .44rem;
}
.noteList li .text{
    font-size: .26rem;
    color:#757B99;
    line-height: .4rem;
    margin: .2rem 0;
    height: .8rem;
    text-overflow: -o-ellipsis-lastline;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
}
.noteList li .time{
    color:#BCC0CF;
    font-size: .24rem;
    line-height: .34rem;
}




.newsItem{
    box-shadow:0 .05rem .08rem rgba(102, 102, 102, .07);
}
.newsItem a{
    display: block;
    position: relative;
    line-height: .96rem;
    padding: 0 .24rem;
    font-size: .32rem;
    color:#333;
    background: #fff;
}
.newsItem a i{
    position: absolute;
    top:.3rem;
    right: .48rem;
    height:.32rem;
    width: .32rem;
    border-radius: 50%;
    background: #ff4747;
    text-align: center;
    line-height: .32rem;
    color:#fff;
    font-size: .2rem;
}
.arrow:after,
.action .prve::before{
    background: url(../images/arrow.png) no-repeat;
    background-size: cover;
    width:.09rem;
    height: .19rem;
    display: inline-block;
    content: '';
    margin-left: .1rem;
    vertical-align: middle;
}
.action .prve::before{
    transform: rotate(-180deg);
    margin:0  .1rem 0 0;
}
.newsItem .arrow:after{
    position: absolute;
    right: .24rem;
    top:.36rem
}


.videoBox{
    background: #000;
}
.courseTab{
    display: flex;
    justify-content: center;
    padding: .12rem .28rem;
    background: #fff;
}
.courseTab li{
    position: relative;
}
.courseTab li a{
    display: block;
    padding: 0 .24rem;
    padding: 0 .48rem;
    font-size: .3rem;
    color:#757B99;
    line-height: .6rem;
}
.courseTab li.active a{
    color:#1A1A1A
}
.courseTab li.active a:after{
    width: .32rem;
    height: .05rem;
    background: rgba(125,87,195,1);
    border-radius: 3px;
    position: absolute;
    bottom: 0;
    left: 50%;
    margin-left: -.16rem;
    content: '';
}
.courseItem{
    overflow: hidden;
    overflow-x: auto;
    padding: .24rem 0 .12rem;
    background: #fff;
}
.courseItem::-webkit-scrollbar {
    display: none;
}

.courseItem .lists{
    display: flex;
}
.courseItem .lists li{
    position: relative;
    margin-right: .24rem;;
}
.courseItem .lists .num{
    display: block;
    height:.8rem;
    line-height:.8rem;
    width: .8rem;
    background: #f4f4f4;
    border-radius: .05rem;
    text-align: center;
    font-size: .3rem;
    color:#BCC0CF;
}
.courseItem .lists li.look .num{
    color:#1A1A1A;
}
.courseItem .lists li .tag{
    height:.14rem;
    line-height:.14rem;
    background: #5756b0;
    border-radius: .03rem;
    font-size: .12rem;
    padding: 0 .05rem;
    color:#fff;
    position: absolute;
    top:0;
    right: 0;
    display: block;
}
.courseItem .lists li.active .num{
    color:#673BB7;
}
.courseTile{
    overflow: hidden;
    overflow-y: auto;
    background: #fff;
    -webkit-overflow-scrolling: touch;
}
.courseContent h3.caption{
    font-size: .4rem;
    color:#1A1A1A;
    padding: .3rem 0;
}
.courseTile .lists{
    padding-left: .3rem;
    margin-left: .18rem;
    position: relative;
}
.courseTile .lists::after{
    position: absolute;
    left: 0rem;
    top:.25rem;
    bottom: .25rem;
    width: .01rem;
    background: #BCC0CF;
    content: '';
}
.courseTile li{
    position: relative;
    line-height: .4rem;
    margin-bottom: .1rem;
}
.courseTile li .dot{
    width: .2rem;
    height: .2rem;
    border-radius: 50%;
    background: #BCC0CF;
    display: block;
    position: absolute;
    top: .22rem;
    left: -0.4rem;
    z-index: 3;
    border: .05rem solid #fff;
}
.courseTile li .icon-play{
    width: .36rem;
    height: .36rem;
    position: absolute;
    top: .12rem;
    left: -0.46rem;
    background: #fff;
    font-size:.36rem ;
    z-index: 2;
}
.courseTile li a{
    font-size: .28rem;
    color:#BCC0CF;
    display: block;
    line-height: .66rem;
}
.courseTile li a .txt{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-right: 1.2rem;
    display: block;
}
.courseTile li .tag{
    color:#BCC0CF;
    font-size: .24rem;
    line-height: .66rem;
    position: absolute;
    top:0;
    right: 0;;
}
.courseTile .lists li.active a{
    color:#673BB7;
}
.courseTile li.active .tag{
    color:#673BB7;
}
.courseTile li.look .icon-paly{
    color:#757B99
}
.courseTile li.look a{
    color:#1A1A1A
}
.courseTile li.look .tag{
    color:#757B99
}

.courseContent{
    display: none;
    background: #fff;
    padding: 0 .28rem .28rem;
    /* overflow: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch; */
}
.courseContent.show{
    display: block;
}


.noteTile{
    overflow: hidden;
}
.noteTile .item:first-child{
    padding-top: 0;
}
.txa{
    width: 100%;
    padding: .24rem;
    outline: none;
    min-height: 2.5rem;
    border-radius: .1rem;
    font-size: .3rem;
    color:#1A1A1A;
    margin-bottom: .12rem;
    background:rgba(188,192,207,.1);
    resize: none;
    border:0 none;
}
.noteTile .item{
    border-bottom: 0.01rem solid #E9E9E9;
    padding:.24rem 0 .36rem 0;
    overflow: hidden;
}
.noteTile .item:last-child{
    border:0 none;
}
.noteTile .item .text{
    font-size: .26rem;
    color:#757B99;
    line-height: .42rem;
    margin-bottom: .2rem;
}
.noteTile .item .vTime{
    float: left;
    font-size: .2rem;
    color:#e62129;
}

.noteTile .item .time{
    float: right;
    font-size: .2rem;
    color:#BCC0CF;
}
.noteTile .btn{
    height: .55rem;
    line-height: .55rem;
    background: #e62129;
    padding: 0 .55rem;
    font-size: .28rem;
    color: #fff;
    border:0 none;
    border-radius: .55rem;
    display: block;
    float: right;
    margin-top: .3rem;
}


.noticeBox{
    /* padding:0 .24rem;  */
}
.newsPanel{
    padding:.24rem 0;
    position: relative;
    border-bottom:0.01rem solid #E9E9E9;
}
.newsPanel.unread{
    padding-left: .36rem;
}
.newsPanel a{
    display: block
}
.newsPanel .caption{
    font-size: .32rem;
    color:#1A1A1A;
    line-height: .6rem;
    margin-bottom: .12rem;
    font-weight: bold;
    margin-right: 1.3rem;
}
.newsPanel .time{
    position: absolute;
    top:.24rem;
    right: .24rem;
    color:#BCC0CF;
    font-size: .2rem;
    line-height: .6rem;
}
.newsPanel .text{
    font-size: .26rem;
    color:#757B99;
    line-height: .42rem;
    height: .84rem;
    overflow: hidden;
    text-overflow: -o-ellipsis-lastline;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
}
.newsPanel.unread::after {
    content: '';
    width: .18rem;
    height: .18rem;
    background: #FE615A;
    border-radius: 50%;
    display: block;
    position: absolute;
    top: .42rem;
    left:0;
}
.newsPanel.read .caption{
    color:#666;
}
.newsPanel.read .text,.newsPanel.read .time{
    color:#999;
}
.projectPanel{
    background: #fff;
    margin-top: .12rem;
    padding: .24rem .24rem 0;
}
.projectPanel .caption{
    font-size: .3rem;
    color:#333;
    line-height: .6rem;
}
.projectPanel .caption em{
    width: .28rem;
    height: .28rem;
    text-align: center;
    line-height: .3rem;
    font-size: .2rem;
    color:#fff;
    display: inline-block;
    background: #5756b0;
    vertical-align: middle;
}
.projectPanel .txt{
    color:#999;
    font-size: .2rem;
    margin-left: .36rem;
}
.projectPanel .item{
    position: relative;
    padding-bottom: .24rem;
}
.projectPanel .btn{
    padding:0 .24rem ;
    line-height: .48rem;
    position: absolute;
    top:.24rem;
    right: .12rem;
    font-size: .24rem;
    background: #5756b0;
    color:#fff;
    border-radius: .05rem;
}
.projectPanel .more{
    display: block;
    line-height:.84rem;
    text-align: center;
    font-size: .24rem;
    color:#666;
    border-top: 1px solid #f2f2f2;
}
.projectPanel .arrow:after{
    transform: rotate(90deg)
}
.projectPanel.active .btn{
    background: #ff4747;
}
.projectPanel.no .btn{
    background: #999;
}
.moreBox{
    display: none;
    padding:0 .24rem .24rem;
}
.moreBox .text{
  font-size: 0.22rem;
  color:#666;
  line-height: .36rem;
  text-align: justify;
}
.moreBox .tit{
    font-size: 0.28rem;
    color:#333;
    margin:.12rem 0;
}
.projectPanel.on .arrow:after{
    transform: rotate(-90deg)
}

.projectPanel .progressBox{
    display: inline-block;
    vertical-align: middle;
}
.projectPanel .progress{
    width: 2rem
}


.detailBox{
    padding:.28rem .28rem 0 ;
    background: #fff;
    position: relative;
}
.detailBox.notice{
    background: #673BB7;
    background:linear-gradient(180deg,rgba(103,59,183,1) 0%,rgba(125,87,195,1) 100%);
}
.detailBox.notice::after{
    width: 3.42rem;
    height: 6.32rem;
    background: url(../images/detail-bg.png) no-repeat;
    background-size: cover;
    position: absolute;
    top:0;
    right: 0;
    content: '';
}
.detailBox h2{
    font-size:.6rem;
    text-align: center;
    color:#fff;
    padding: .12rem 0 .45rem;
}
.detailBox .action{
    display: flex;
    justify-content: space-between;
    position: relative;
    z-index: 5;
}
.detailBox .action a{
    font-size: .26rem;
    color:#fff;
    display: block;
    padding: .2rem .28rem;
    line-height: .5rem;
}
.detailBox .action a.gray{
    opacity: .35;
}
.note.detailBox .action{
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    border-top: 1px solid #E9E9E9;
}
.note.detailBox .action a{
    color:#6A31DF;
}
.note.detailBox .action .icon-edit,
.note.detailBox .action .icon-del{
    font-size: .42rem;
}
.note.detailBox .action a.gray{
    color:#BCC0CF
}
.detailBox .arrow.gray:after,
.detailBox .action .gray::before{
    opacity: .3;
}

.detailBox.notice .content{
    padding: .3rem;
    background: #fff;
    border-radius: .1rem;
    position: relative;
    z-index: 5;
    overflow: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
.detailBox .content.new:after{
    background:url('../images/new.png') no-repeat;
    background-size: cover;
    width: .9rem;
    height: .9rem;
    position: absolute;
    top:0;
    right: 0;
    content: '';
}
.detailBox .content .caption{
    font-size: .32rem;
    color:#1A1A1A;
    margin-bottom: .2rem;
    line-height: .42rem;
}
.detailBox.note .content .caption{
    text-align: left;
    padding: .3rem 0 .1rem;
    font-size: .36rem;
}
.detailBox .content h3{
    font-size: .36rem;
    color:#333;
    text-align: center;
    margin-bottom: .36rem;
    font-weight: bold;
}
.notice .content h3{
    margin-bottom: .28rem;
    padding-bottom: .2rem;
    border-bottom:0.01rem solid #E9E9E9;
}
.detailBox .content p.text{
    font-size: .26rem;
    color:#757B99;
    line-height: .48rem
}
.detailBox.note .content p.text{
    color:#1A1A1A;
}
.detailBox .content .time{
    font-size: .2rem;
    color: #666;
    margin-top: .48rem;
}
.detailBox .content .time::before {
    background: url(../images/time.png) no-repeat;
    background-size: contain;
    content: '';
    width: .24rem;
    height: .24rem;
    display: inline-block;
    margin-right: .1rem;
    vertical-align: middle;
}
.notice .arrow:after,.notice .action .prve::before{
    background-image: url(../images/arrow1.png) ;
}

.detailBox .tool {
    text-align: center;
    margin:.6rem 0;
}
.detailBox .tool a{
    border:1px solid #333;
    color:#333;
    font-size: .24rem;
    line-height: .6rem;
    display: inline-block;
    border-radius: .1rem;
    padding: 0 .48rem;
    margin:0 .6rem;
}

.detailBox .tool a.edit::before{
    background-image: url(../images/edit.png) ;
}
.detailBox .tool a.del::before{
    background-image: url(../images/del.png) ;
}
.detailBox .info {
    margin-top: .28rem;
}
.detailBox .info li{
    font-size: .28rem;
    color:#757B99;
    line-height: .48rem
}
.detailBox .info ~.text{
    margin-left: .6rem;
    margin-top: .28rem;
}
.detailBox .tr {
    font-size: .24rem;
    color:#1A1A1A;
    text-align: right;
}


.playHistory{
    position: fixed;
    bottom: 1.2rem;
    left:.24rem;
    right:.24rem;
    background: rgba(000, 000, 000, .5);
    border-radius: .06rem;
    height: 1.08rem;
    padding: .16rem 1rem;
    z-index: 9;
}
.playHistory:after{
    background: rgba(000, 000, 000, .35);
    -webkit-filter: blur(5px); /* Chrome, Opera */
       -moz-filter: blur(5px);
        -ms-filter: blur(5px);
            filter: blur(5px);
            position: absolute;
            top:0;
            left:0;
            z-index: -1;
            right:0;
            bottom: 0;
            content: '';
}
.playHistory .cover{
    width: .72rem;
    height: .76rem;
    float: left;
    margin-right: .2rem;
    border-radius: .06rem;
}
.playHistory .icon-closed,
.playHistory .icon-play{
    display: block;
    position: absolute;
    top:.3rem;
    color:#fff;
}
.playHistory .icon-closed{
    left:.3rem;
    top:.32rem;
    font-size: .4rem;
    width: .4rem;
    height:.4rem;
}
.playHistory .icon-play{
    right:.3rem;
    width: .52rem;
    height:.52rem;
    font-size: .52rem;
}
.playHistory .caption{
    font-size: .3rem;
    color:#fff;
    margin-bottom: .06rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.playHistory .time{
    font-size: .22rem;
    color:#f2f2f2;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/*  跟home页面一样 */
.panel h3.caption,
.tile h3.caption{
    font-size: .36rem;
    color:#333;
    line-height:1.48rem;
    text-align: center
}
.porjectItem{
    display: flex;
    justify-content: space-between;
    height: 3.3rem;
    margin-bottom: .24rem;
    box-shadow: 0 .06rem .08rem rgba(102, 102, 102, .07);
    background: #fff;
}
.porjectItem .cover{
    width: 3.45rem;
    height: 3.3rem;
}
.porjectItem .box{
    padding: .24rem;
    display: flex;
    -webkit-box-direction: normal;
    -webkit-box-orient: vertical;
    flex-direction: column;
    justify-content: center;
    width: 4rem;
}
.porjectItem .box .caption{
    font-size: .28rem;
    color:#333;
    line-height: .48rem;
}
.porjectItem .box .text{
    margin: .12rem  0 .24rem;
}
.porjectItem .box .tag{
    font-size: .2rem;
    color:#666;
    line-height: .3rem;
    margin-right: .1rem;
    border:1px solid #ccc;
    border-radius: .26rem;
    display: inline-block;
    line-height: .26rem;
    padding: 0 .1rem;
}
.porjectItem  .price{
    font-size: .3rem;
    color:#5756b0;
    font-weight: bold;
}
.porjectItem  .price:before{
    content: '￥';
    font-size: .32rem;
    color:#5756b0;
}

.tips400{
   height: 4rem;
   display: flex;
   -webkit-box-direction: normal;
   -webkit-box-orient: vertical;
   flex-direction: column;
   justify-content: center;
   text-align: center;
}
.tips400{
    font-size: 0.28rem;
    color:#666
}


/* 课程表 */
.courseList{
    padding: .28rem 0;
    margin:0 .28rem .12rem;
    border-bottom: 0.01rem solid #E9E9E9
}
.courseList .time{
   font-size: .24rem;
   color:#757B99;
   line-height: .34rem;
   padding-left: .6rem;
}
.courseList .caption{
   font-size: .32rem;
   color:#1A1A1A;
   line-height: .44rem;
   margin-bottom: .16rem;
   font-weight: bold;
}
.courseList .caption .num{
    font-size: .42rem;
    color: #BCC0CF;
    margin-right: .14rem;
}

 /* 学习任务 */
 .tasksTab {
     text-align: center;
     padding: .38rem 0;
 }
.tasksTab li{
    display: inline-block;
    margin: 0 .4rem;
    position: relative;
}

.tasksTab li a{
    color: #757B99;
    font-size: 0.3rem;
    position: relative;
    display: block;
    line-height: .42rem;
    padding-bottom: .1rem;
}
.tasksTab li a::after{
    width:.32rem;
    height:.05rem;
    background:rgba(125,87,195,1);
    border-radius:3px;
    position: absolute;
    bottom: 0;
    left: 50%;
    margin-left: -.16rem;
    display: none;
    content: '';
}
.tasksTab li.active a{
    color:#1A1A1A
}
.tasksTab li.active a::after{
    display: block;
}


.tasksContent{
    display: none;
    padding: 0 .28rem;
}
.tasksContent.show{
    display: block;
}
.tasksBox{
    margin-bottom: .6rem;
    border-bottom:0.01rem solid #E9E9E9
}
.tasksBox .chapter{
    color:#1A1A1A;
    font-size: .32rem;
    font-weight: bold;
    margin-bottom: .4rem;
}

.tasksList {
    padding-left: .3rem;
    margin-left: .18rem;
    position: relative;
}
.tasksList::after{
    position: absolute;
    left: .02rem;
    top:.25rem;
    bottom: .25rem;
    width: .01rem;
    background: #BCC0CF;
    content: '';
}
.tasksList li{
    position: relative;
    line-height: .4rem;
    margin-bottom: .4rem;
}
.tasksList li .dot{
    width: .16rem;
    height: .16rem;
    border-radius: 50%;
    background: #BCC0CF;
    display: block;
    position: absolute;
    top: .14rem;
    left: -0.36rem;
    z-index: 3;
    border: .04rem solid #f4f5f7;
}
.tasksList li .icon-play{
    width: .36rem;
    height: .36rem;
    position: absolute;
    top: .02rem;
    left: -0.46rem;
    background: #fff;
    font-size:.36rem ;
    z-index: 2;
    border-radius: 50%;
}
.tasksList li a{
    font-size: .28rem;
    color:#BCC0CF;
    line-height: .4rem;
    display: block;
}
.tasksList li.active i{
    color:#673BB7
}
.tasksList li.active a{
    color:#1A1A1A
}

/* ppt */
.pptList{
    background: #fff;
    padding-top: .12rem;
}
.pptList li{
    margin-bottom: .24rem;
}
.pptList li img{
    max-width: 100%;
}

/* 项目详情 */

.panel .courseTile{
    background: url(../images/cDetail.png) no-repeat;
    background-size: contain;
    padding: 1.9rem .28rem .1rem;
    margin-bottom: .4rem;
}
.courseTile h2{
    text-align: center;
    font-size:.8rem ;
    color:#fff;
    visibility: hidden;
    margin-bottom: .54rem;
}
.courseTile .tile{
    background: #fff;
    border-radius: .1rem;
    padding: .28rem;
    box-shadow:0px .05rem .2rem  rgba(230,229,236,0.4);
}
.courseTile .text{
    font-size: .28rem;
    color:#666;
    line-height: .48rem;
}
.courseTile .title{
    font-size: .32rem;
    color:#1A1A1A;
    line-height: .44rem;
    position: relative;
    margin-bottom: .12rem;
} 
.courseTile .text ~.title{
    margin-top: .48rem;
}
.tTile {
    display: flex;
    margin-top: .28rem;
}
.tTile .avatar{
    width: .72rem;
    display: inline-block;
}
.tTile .avatar img{
    width: .72rem;
    height: .72rem;
}
.tTile .avatar img{
    font-size: .26rem;
    color:#1A1A1A;
}
.tTile .avatar p{
    font-size: .24rem;
    color:#1A1A1A;
    white-space: nowrap;
    margin-top: .12rem;
}
.tTile .info{
    width: 5.42rem;
    display: inline-block;
    margin-left: .36rem;
}
.tTile .text{
    text-align: justify;
    font-size: .24rem;
    line-height: .4rem;
}
.courseAction{
    height: 1.2rem;
    background: #fff;
    border-top:1px solid #E9E9E9;
    padding: .2rem .28rem;
    display: flex;
}
.courseAction .state {
    color: #FE615A;
    font-size: .28rem;
    margin-right: .7rem;
    line-height:.8rem;
    vertical-align:middle;
}
.courseAction .btn {
    color: #fff;
    font-size: .28rem;
    line-height:.8rem;
    display: inline-block;
    width: 5.35rem;
    border-radius: .8rem;;
    background: #BCC0CF;
    text-align: center;
    vertical-align:middle;
}

.review.courseAction .btn{
    background: #e62129;
}
.review.courseAction .state{
    color: #BCC0CF;
}
.active.courseAction .btn{
    background: #01A99D;
}
.active.courseAction .state{
    color: #01A99D;
}

/* 课程详情 */
.coursePanel{
    background: #fff;
}
.coursePoster{
    width: 100%;
    height: 4.2rem;
    background: #000;
}
.coursePoster img{
    width: 100%;
    height: 4.2rem;
    vertical-align: top;
}


.courseTit{
    background: #fff;
    padding: .28rem; 
}
.courseTit .view{
    float: right;
    font-size: .24rem;
    color:#999;
}
.courseTit .view i{
    font-size: .28rem;
    color:#999;
    vertical-align: middle;
}

.courseMain{
    display: none;
}
.courseMain .content{
    padding: .28rem;
    box-sizing: border-box;
}
.courseMain.info .content {
  padding-bottom: 1.3rem;
}
.courseMain.show{
    display: block;
}
.courseMain h3.caption,
.courseTit h3.caption{
    font-size: .36rem;
    color:#1a1a1a;
    line-height: .5rem;
    text-align: left;
    margin-bottom: .16rem;
    font-weight: bold;
}
.courseMain .cover{
    margin:0;
}
.courseMain .cover img{
    max-width: 100%;
}

.courseMain .list li{
    border-bottom: 0.01rem solid #E9E9E9;
}
.courseMain .list li:last-child{
    border-bottom:0 none;
}
.courseMain .list li a{
    font-size:.28rem ;
    color:#1A1A1A;
    line-height: .4rem;
    padding:.36rem 1.1rem .36rem .52rem;
    position: relative;
    display: block;
}
.courseMain .list li .icon-play{
    font-size: .32rem;
    color: #757B99;
    position: absolute;
    left: 0;
    top:.42rem;
}
.courseMain .list li .state{
    color:#e62129;
    font-size: .24rem;
    width: 1.1rem;
    text-align: right;
    line-height: .4rem;
    position: absolute;
    right: 0;
    top:.36rem;
}
.courseMain .list li .txt{
    display: inline-block;
}
.courseMain .list li.active .txt,
.courseMain .list li.active .icon-play{
    color:#e62129;
}

.courseComment li{
    display: flex;
    margin-bottom: .4rem;
}
.courseComment li .avatar{
    width:.56rem ;
    margin-right: .16rem;
}
.courseComment li .avatar img{
    width:.56rem ;
    height:.56rem ;
    border-radius: 50%;
}
.courseComment li .box{
    width: 6.25rem;
}
.courseComment .name{
    font-size: .24rem;
    color:#999;
    line-height: .34rem;
}
.courseComment .text{
    font-size: .28rem;
    color:#1A1A1A;
    line-height: .4rem;
    margin: .24rem 0;
    text-align: justify;
}
.courseComment .time{
    font-size: .24rem;
    color:#BCC0CF;
    line-height: .24rem;
}
.courseMain.comment{
    padding-bottom: 1rem;
}
.commentLink{
    line-height: 1rem;
    background: #e62129;
    font-size: .32rem;
    color:#fff;
    text-align: center;
    display: block;
    cursor: pointer;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
}

.fieldsetLine{
    color:#BCC0CF;
    font-size:.28rem ;
    text-align: center;
    border-top:1px solid #ececec;
    width: 60%;
    margin:0 auto .2rem;
}
.fieldsetLine legend{
    padding: 0 .2rem;
}


.commentPanel {
    padding: .7rem .28rem;
    height: calc(100% - .88rem);
    box-sizing: border-box;
    position: relative;
}
.commentPanel h3{
    font-size: .4rem;
    color:#1A1A1A;
}
.commentPanel .starsBox{
    font-size: .48rem;
    text-align: center;
    padding: .6rem 0;
    margin: 0;
}
.commentPanel .starsBox .icon-star{
    font-size:.48rem ;
    color:#DDDFE7;
    cursor: pointer;
}
.commentPanel .starsBox .icon-star.on{
    color: #FFD54D;
}
.commentPanel .txa{
    height: 2.6rem;
    background: #fff;
    border:0 none;
    resize: none;
    outline: none;
    padding: .2rem;
    font-size: .28rem;
    color:#1A1A1A;
    border-radius: .06rem;
}
.commentBtn{
    line-height: 1rem;
    background: #e62129;
    font-size: .32rem;
    color:#fff;
    text-align: center;
    display: block;
    cursor: pointer;
    border:0 none;
    width: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
}

.centerTips{
    text-align: center;
    padding: 1.45rem .66rem 0;
}
.centerTips img{
    width: 2.4rem;
    height: 2.77rem;
}
.centerTips .text{
    font-size: .28rem;
    color:#757B99;
    margin:.6rem 0 .8rem;
    line-height: .4rem;
}
.centerTips .btn{
    line-height: .96rem;
    background: #e62129;
    font-size: .36rem;
    color:#fff;
    text-align: center;
    display: block;
    width: 100%;
    border-radius: .96rem;
}



.classBox{
    margin-bottom: .56rem;
    background: #fff;
    box-shadow:0px 0.04rem .2rem  rgba(230,229,236,0.6);
    position: relative;
}
.classBox .cover{
   width: 100%;
   height: 3rem;
}
.classBox  img{
    width: 6.94rem;
    height:3rem;
    border-radius:.06rem .06rem 0 0;
}
.classBox .box{
    padding: .26rem .28rem;
}
.classBox .caption{
    font-size: .32rem;
    color:#2A3041;
    font-weight: bold;
    line-height: .44rem;
}
.classBox .num{
    font-size: .24rem;
    color:#e62129;
    line-height: .34rem;
}
.classBox .ctrl{
    display: flex;
    justify-content: space-between;
}
.classBox .total{
    font-size: .24rem;
    color:#2A3041;
    line-height: .34rem;
}
.classBox .tagBox{
    margin:.04rem 0 .24rem
}

.classLists { 
    border-radius:.06rem;
    background: #fff; 
    overflow: hidden;
    box-shadow:0px 0.04rem .2rem  rgba(230,229,236,0.6);
}
.classLists img {
    width: 100%;
    height: 2.3rem;
}
.classLists .title{
    font-size: 0.26rem;
    color:#666;
    line-height: .36rem;
    padding: .28rem 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin:0 .26rem;
}




.tList li {
    padding: .34rem 0;
    margin-bottom: 0;
    border-bottom: 1px solid #F1F1F1;
    display: flex;
    justify-content: space-between;
    width: 100%;
}
 
.tList li .cover{
    width: 1.6rem;
    height: 2rem;
    border-radius:.06rem;
    margin-right: .28rem;
    position: relative;
}
.tList li .cover img{
    width: 1.6rem;
    height: 2rem;
    border-radius: .06rem;
}
.tList li .box{
    width: 5.2rem;
    height: 2rem;
    position: relative; 
}
.tList li .view{
    font-size: .24rem;
    color:#999;
    margin:.12rem 0; 
}
.tList li .caption{
    font-size: .3rem;
    color:#1A1A1A;
    line-height: .42rem; 
}
.tList li .txt{
    font-size: .26rem;
    color: #666; 
    line-height: .36rem;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    margin-top: .12rem;
}
.tList li .state{
    position: absolute;
	top: -.02rem;
	right: -.05rem;
	line-height: .28rem;
	background:#FF4F33;
	border-radius:0 .08rem;
	padding: 0 .05rem;
	font-size: .18rem; 
	transform: scale(0.83333333);
	color:#fff;
}
.tList li .state p{
    font-size: .2rem;
    color:#fff; 
}
.tList li .btn {
    position: absolute;
    bottom: 0; 
    color:#e62129;
    font-size: .24rem;
    line-height: .54rem;
    right: 0;
    width: 1.3rem;
    border:1px solid #e62129;
    border-radius: .54rem;
    display: block;
    text-align: center;
}
.tList li .info {
    position: absolute;
    bottom: 0;
    left: 0;
    color:#666;
    font-size: .26rem;
    line-height: .36rem; 
}
.yxPanel{
    padding: 0 .28rem;
    overflow: hidden;
    background: #fff;
}
.yxPanel h3.title{
    color:#1a1a1a;
    font-size: .36rem;
    line-height: .5rem;
    margin:.5rem 0 0;
}
.yxPanel .classLists{
    margin-top: .28rem;
}


.bottomFixed{
    position: fixed;
    bottom: 0;
    left:0;
    height: 1.12rem;
    line-height:1.12rem;
    background: #fff;
    display: flex;
    justify-content: space-between;
    width: 100%;
    z-index: 99;
    text-align: center;
}
.bottomFixed .classPrice{
	font-size: .32rem;
	color:#1a1a1a;
	padding:0 .28rem ;
}
.bottomFixed .price{ 
	color:#e62129;
}
.bottomFixed a{
    font-size: 0.32rem;
    line-height:1.12rem;
    color:#1a1a1a; 
	flex: 1;
}
.bottomFixed i{
    width: .38rem;
    height: .38rem;
    display: inline-block;
    vertical-align: middle;
    background: url('../images/yx/sprites2.png') no-repeat -.38rem 0;
    background-size: cover;
    margin-right: .12rem;
}
.bottomFixed .btn{
    text-align: center; 
    color:#fff;
    background: #e62129;
    font-size: .32rem; 
	flex: 1.2;
}




.couponInfo{
    display: flex;
    justify-content: space-between; 
    background: #fff;
    border-bottom: .2rem solid #F7F7F7;
    padding:.2rem .28rem;
    border-top:1px solid #E3E5EC;
}
.couponInfo p{
    font-size: .26rem;
    color:#1a1a1a;
    line-height: .44rem;
    padding-top: .03rem;
}
.couponInfo .tag{
    line-height: .38rem;
    padding: 0 .05rem;
    background: #F95359;
    color:#fff;
    display: inline-block;
    font-size: .26rem;
    margin-right: .12rem;
    border-radius: .04rem;
    vertical-align: middle;
}
.couponInfo .btn{
    line-height: .44rem;
    padding: 0 .28rem;
    border:1px solid #F95359;
    color:#F95359;
    display: inline-block;
    font-size: .26rem; 
    border-radius: .04rem;
    cursor: pointer;
}
.couponInfo .btn.disable{ 
    border-color: #D9D9D9;
    background: #D9D9D9;
    color:#fff; 
    cursor: default;
}
.layui-m-layer .couponPop .layui-m-layercont {
    text-align: left;
}
.couponPop{
    display: none;
}
.couponPop .tit{
    font-size: .4rem;
    color:#e62129;
    line-height: .44rem;
}
.couponPop .tit::before{
    width: .5rem;
    height: .5rem;
    display: inline-block;
    content: '';
    margin-right: .14rem;;
    background: url(../images/yes1.png) no-repeat;
    background-size: contain;
    vertical-align: middle;
}
.couponPop .text{
    font-size: .3rem;
    color:#666;
    margin: .1rem 0 .16rem; 
    line-height: .52rem;
}
.couponTile{
    display: flex;
    justify-content: space-between; 
    background: #F7F7F7; 
    border-radius: .08rem;
    padding: .2rem .28rem;
}
.couponTile .num{
    width: 1.34rem;
    height: .54rem;
    line-height: .54rem;
    text-align: center;
    font-size: 0.28rem;
    color:#fff;
    text-align: center; 
    background: url(../images/coupon7.png) no-repeat;
    background-size: contain;
    margin-top: 0.05rem;
}
.couponTile .num::before{ 
    content: '¥';
    font-size: 0.28rem;
    color:#fff;  
}
.couponTile .box{
    padding-left: .2rem;
}
.couponTile .txt{ 
    font-size: .28rem;
    color:#1a1a1a; 
    margin-right: .24rem;
}
.couponTile .state{ 
    font-size: .22rem;
    color:#F95359; 
    line-height: .32rem;
    display: inline-block;
    background: #FFE3E4;
    padding: 0 .05rem;
    vertical-align: middle;
}
.couponTile .time{ 
    font-size: .24rem;
    color:#999; 
    margin-top: .08rem;
}