body{
    background: #f5f8fa;
}

/*crumb-main*/
.crumb-main .breadcrumb{
    margin: 12px 0;
}
.crumb-main .breadcrumb a{
    color: grey;
    font-size: 14px;
    text-underline: none;
}
.crumb-main .breadcrumb a:hover{
    color: #26caac;
}


/*加入学习弹出框*/
.join-learn{
    width: 600px;
    margin-top: 140px;
}
.join-learn-con{

}
.join-learn-con > ul{
    padding: 20px 0;
}
.join-learn-con li{
    height: 30px;
    line-height: 30px;
    position: relative;
    margin: 10px;
    padding-left: 100px;
    color: #999;
}
.join-learn-con li > label.title{
    position: absolute;
    height: 30px;
    line-height: 30px;
    width: 80px;
    text-align: right;
    top: 0;
    left: 0;
}
.join-learn-con li > .price{
    font-size: 20px;
    color: #e74c3c;
}
.join-learn-con li > .free{
    font-size: 24px;
    color: #26caac;
}
.join-learn-con > div{
    margin-top: 20px;
    border-top: 1px solid #eeeeee;
    text-align: right;
    padding: 12px 0 0 0;
}
@media (max-width: 767px) {
    .join-learn{
        width: 90%;
        margin-top: 100px;
    }
}

/*退出学习弹出框*/
.signout-learn{
    width: 600px;
    margin-top: 140px;
}
.signout-learn-con > div.btns{
    margin-top: 20px;
    border-top: 1px solid #eeeeee;
    text-align: right;
    padding: 12px 0 0 0;
}
.signout-reason{
    width: 100%;
    margin: 0 0 50px 0;
    padding: 0 50px 0 100px;
    position: relative;
}
.signout-reason label{
    position: absolute;
    top: 8px;
    left: 0;
    text-align: right;
    width: 90px;
    font-weight: normal;
    color: #999;
}
.signout-reason select.form-control:focus{
    border: 1px solid #26caac;
}
@media (max-width: 767px) {
    .signout-learn{
        width: 90%;
        margin-top: 100px;
    }
}


/*课程上部分*/
.course-section{
    margin-bottom: 20px;
}
.course-section-top{
    width: 100%;
    background: #ffffff;
    border-radius: 5px;
    padding: 30px;
    box-shadow: 0 7px 14px 0 rgba(0,36,100,.08);
}
.course-details{
    width: 100%;
}
.course-details-img{
    float: left;
    position: relative;
    width: 480px;
}
.course-details-img > .img-text{
    width: 100%;
    /*height: 100%;*/
    position: absolute;
    /*top: 0;*/
	bottom: 0;
    left: 0;
    z-index: 3;
}

.course-details-img > .img-text > span,.course-details-img > .img-text > div{
    padding: 0 12px;
    height: 28px;
    line-height: 28px;
    border-radius: 30px;
    background: rgba(0,0,0,.3);
    color: #ffffff;
    font-size: 12px;
    position: absolute;
    bottom: 10px;
}
.course-details-img > .img-text > span{
    display: inline-block;
    left: 10px;
}
.course-details-img > .img-text > div{
    right: 10px;
}
.course-details-img > .img-text > div > i{
    font-size: 12px;
    color: #ea742c;
}
.course-details-img > .img-text > div > span{
    margin-left: 10px;
}

.course-details-info{
    position: relative;
    margin-left: 480px;
    padding-left: 24px;
    min-height: 270px;
    font-size: 12px;
    padding-bottom: 50px;
}
.course-details-info > h2{
    margin: 0 0 6px 0;
    font-size: 20px;
    color: #333;
}
.course-details-info > p{
    font-size: 12px;
    color: #999;
    margin: 0 0 10px 0;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    word-break: break-all;
}
.course-details-info > label{
    font-weight: normal;
    color: #999;
    margin: 0;

}
.course-details-info > label > .free{
    font-size: 24px;
    color: #26caac;
    margin-left: 10px;
}
.course-details-info > label > span{
    text-decoration: line-through;
    margin: 0 10px;
}
.course-details-info > label > .prices{
    font-size: 20px;
    color: #ff5656;
    margin-left: 10px;
}

.course-details-info > .info-item{
    width: 100%;
    padding: 15px;
    background: #f8fafc;
    margin-top: 10px;
}
.info-item-list{
    width: 100%;
    position: relative;
    padding-left: 100px;
    font-size: 12px;
}
.info-item-list > .titles{
    position: absolute;
    top: 0;
    left: 0;
    height: 28px;
    line-height: 28px;
    color: #bbb;
}
.info-item-list > .contents{
    display: inline-block;
    height: 28px;
    line-height: 28px;
    color: #999;
}
.info-item-list > ul{
    overflow: hidden;
}
.info-item-list li{
    height: 28px;
    line-height: 26px;
    border: 1px solid #eeeeee;
    padding: 0 10px;
    float: left;
    color: #999;
    margin: 0 5px 5px 0;
    cursor: pointer;
    text-overflow: ellipsis;
    overflow: hidden;
    word-break: break-all;
}
.info-item-list li:hover,.info-item-list li.active{
    border: 1px solid #26caac;
    color: #26caac;
}

.info-bottom{
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding-left: 24px;
}
.info-bottom .info-market{
    float: left;
}
.info-bottom .info-market ul{
    overflow: hidden;
}
.info-bottom .info-market li{
    position: relative;
    float: left;
    width: 34px;
    height: 34px;
    border-radius: 2px;
    border: 1px solid #eeeeee;
    background: #f8fafc;
    text-align: center;
    line-height: 32px;
    margin-right: 5px;
}
.info-bottom .info-market li:hover{
    background: #edf2f6;
}
.info-bottom .info-market li > a{
    color: #999;
    text-decoration: none;
    display: block;
}
.info-bottom .info-market li > a > i{
    font-size: 12px;
}
.info-bottom .info-market li .ewm{
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;
    width: 140px;
    padding: 10px;
    background: #ffffff;
    border: 1px solid #eeeeee;
    box-shadow: 0 0 5px rgba(0,36,100,.08);
    display: none;
}
.info-bottom .info-market li .ewm > img{
    width: 100%;
}
.info-bottom .info-market li .ewm > p{
    margin-bottom: 0;
}
.info-bottom .info-market li.sc.active i{
    color: #26caac;
}


/*微信分享到朋友圈弹窗*/
.wechat-fx{
    margin-top: 100px;
    width: 520px;
}
.wechat-fx .wechat-con{
    width: 100%;
    text-align: center;
    padding: 30px 0;
}
.wechat-fx .wechat-con img{
   width: 200px;
}
.wechat-fx .wechat-con > p{
    margin: 20px;
    font-size: 12px;
    color: #999;
    line-height: 170%;
}
@media (max-width: 767px) {
    .wechat-fx{
        width: 90%;
    }
    .wechat-fx .wechat-con{
        width: 100%;
        text-align: center;
        padding: 30px 0;
    }
    .wechat-fx .wechat-con img{
        width: 70%;
    }
    .wechat-fx .wechat-con > p{
        margin: 20px;
        font-size: 12px;
        color: #999;
        line-height: 170%;
    }
}



.info-bottom .info-btns{
    float: right;
    text-align: right;
}
.info-bottom .info-btns > button.gre{
    padding: 0 15px;
    height: 34px;
    line-height: 34px;
    border-radius: 2px;
    background: #26caac;
    color: #ffffff;
    font-size: 14px;
    border: 0;
    margin-left: 10px;
}
.info-bottom .info-btns > button.def{
    padding: 0 15px;
    height: 34px;
    line-height: 32px;
    border-radius: 2px;
    background: #f8fafc;
    color: #777;
    font-size: 14px;
    border: 1px solid #eeeeee;
}
.info-bottom .info-btns > button.def:hover{
    background: #e0e8f0;
    color: #777;
}
.info-bottom .info-btns > span{
    height: 34px;
    line-height: 34px;
    color: #999;
    font-size: 12px;
}

@media (max-width: 990px) {
    .course-details-img{
        float: none;
        width: 100%;
    }
    .course-details-info{
        margin-left: 0;
        margin-top: 15px;
        padding-left: 0;
    }
}
@media (max-width: 767px) {
    .course-section-top{
        padding: 15px;
        box-shadow: 0 7px 14px 0 rgba(0,36,100,.08);
    }
    .course-details-info{
        margin-left: 0;
        margin-top: 15px;
        padding-left: 0;
        min-height: inherit;
    }
    .course-details-info > h2{
        font-size: 16px;
    }
    .course-details-info > label > .free{
        font-size: 18px;
    }
    .course-details-info > label > .price{
        font-size: 18px;
    }

    .course-details-info > .info-item{
        padding: 12px;
        margin-top: 5px;
    }
    .info-bottom{
        padding-left: 0;
        position: inherit;
        margin-top: 20px;
    }


    .info-bottom .info-btns > button{
         font-size: 12px;
     }
}



/*加入学习后的课程上部分*/
.course-join-top{
    width: 100%;
    background: #ffffff;
    border-radius: 5px;
    padding: 20px 0 20px 0;
    box-shadow: 0 7px 14px 0 rgba(0,36,100,.08);
	border:1px solid #e4ecf3;
}
.course-join-list{
    width: 100%;
    min-height: 10px;
    padding: 0 30px;
}
.course-join-list > .e-code{
    float: left;
    cursor: pointer;
    position: relative;
}

.course-join-list > .e-code .ewm{
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;
    width: 140px;
    padding: 10px;
    background: #ffffff;
    border: 1px solid #eeeeee;
    box-shadow: 0 0 5px rgba(0,36,100,.08);
    display: none;
}
.course-join-list > .e-code .ewm > img{
    width: 100%;
}
.course-join-list > .e-code .ewm > p{
    margin-bottom: 0;
}

.course-join-list > .cj-title{
    float:left;
    font-size: 22px;
    margin-right: 8px;
    line-height: 24px;
    max-width: 75%;
}
@media (max-width: 992px) {
    .course-join-list > .cj-title{
        max-width: 95%;
    }
}
@media (max-width: 767px) {
    .course-join-list > .cj-title{
        max-width: 100%;
        font-size: 15px;
        height: auto;
        line-height: 20px;
    }
    .course-join-list > .e-code{
        display: none;
    }
}


.course-join-right{
    float: right;
    margin-top: 0;
}
.course-join-right > span{
    margin-right: 10px;
    color: #868f97;
    float: left;
    height: 34px;
    line-height: 34px;
}
.course-join-right > ul{
    float: left;
}
.course-join-right li{
    position: relative;
    float: left;
    width: 34px;
    height: 34px;
    border-radius: 2px;
    border: 1px solid #eeeeee;
    background: #f8fafc;
    text-align: center;
    line-height: 32px;
    margin-left: 10px;
}
.course-join-right li:hover{
    background: #edf2f6;
}
.course-join-right li > a{
    color: #999;
    text-decoration: none;
    display: block;
}
.course-join-right li:first-child > a > i{
    font-size: 12px;
}

.course-join-right li.fx .fx-pup,.info-bottom .info-market li.fx .fx-pup{
    width: 140px;
    height: 32px;
    background: #323232;
    position: absolute;
    bottom:40px;
    left: 50%;
    margin-left: -70px;
    border-radius: 32px;
    text-align: center;
    display: none;
}
.course-join-right li.fx .fx-pup > a,.info-bottom .info-market li.fx .fx-pup > a{
    color: rgba(255,255,255,.6);
    margin: 0 4px;
    display: inline-block;
    height: 14px;
    line-height: 14px;
}

.course-join-right li.fx .fx-pup > a:hover,.info-bottom .info-market li.fx .fx-pup > a:hover{
    color: rgba(255,255,255,1);
}
.course-join-right li.fx .fx-pup > a.kj > img,.info-bottom .info-market li.fx .fx-pup > a.kj > img{
    opacity: .6;
    vertical-align: bottom;
}
.course-join-right li.fx .fx-pup > a.kj:hover > img,.info-bottom .info-market li.fx .fx-pup > a.kj:hover > img{
    opacity: 1;
}
.course-join-right li.fx .fx-pup:before,.info-bottom .info-market li.fx .fx-pup:before{
    content: '';
    position: absolute;
    bottom: -6px;
    left: 50%;
    margin-left: -5px;
    z-index: 10;
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 6px solid #323232;
}


@media (max-width: 990px) {
    .course-join-top{
        padding-bottom: 0;
    }
    .course-join-right{
        display: none;
    }
    .info-bottom .info-market li.fx{
        display: none;
    }
}


.course-join-learn{
    border-right: 1px solid #ffffff;
    border-left: 1px solid #ffffff;
    background-color: #f8fafc;
    margin: 65px 0 20px;
    padding: 33px 15px;
}

.course-progress-con{
    width: 100%;
    height: 90px;
    position: relative;
}
.course-progress-bar{
    position: absolute;
    top: -60px;
    left: 50%;
    margin-left: -80px;
    width: 160px;
    height: 160px;
    box-shadow: 0 0 14px 0 rgba(0,36,100,.08);
    border-radius: 50%;
    overflow: hidden;
    background: #ffffff;
}
.course-progress{
    position: absolute;
    left: 7.5px;
    top: 7.5px;
    width: 145px;
    height: 145px;
}
.course-progress > span{
    color: #999;
    display: inline-block;
    width: 100%;
    text-align: center;
    position: absolute;
    top: 40px;
    left: 0;
    z-index: 8;
}
.course-progress > span > em{
    font-style: normal;
    color: #26caac;
    font-size: 24px;
    font-weight: bold;
}

.course-join-som{
    width: 100%;
}
.course-join-som > li{
    float: left;
    width: 33.33%;
}
.course-join-som > li p{
    font-size: 12px;
    color: #999;
}
.course-join-som > li p > i{
    margin-right: 4px;
}

.course-join-learn a.release{
    height: 38px;
    line-height: 38px;
    margin-top: 10px;
    margin-left: 0;
}



.course-join-wap{
    width: 100%;
    border-right: 1px solid #ffffff;
    border-left: 1px solid #ffffff;
    background-color: #f8fafc;
    padding: 20px;
    display: none;
}
.course-join-wap > .wap-fx{
    position: relative;
    float: left;
}
.course-join-wap > .wap-fx > a{
    display: inline-block;
    width: 40px;
    text-align: center;
    color: #868f97;
    font-size: 12px;
    text-decoration: none;
}
.course-join-wap > .wap-fx > a > span{
    display: block;
}
.course-join-wap > .wap-fx .fx-pup{
    width: 130px;
    height: 34px;
    line-height: 34px;
    background: #323232;
    position: absolute;
    top:50% ;
    margin-top: -17px;
    left: 46px;
    border-radius: 3px;
    text-align: center;
    display: none;
}
.course-join-wap > .wap-fx .fx-pup > a{
    color: rgba(255,255,255,.6);
    margin: 0 4px;
}
.course-join-wap > .wap-fx .fx-pup > a:hover{
    color: rgba(255,255,255,1);
}
.course-join-wap > .wap-fx .fx-pup:before{
    content: '';
    position: absolute;
    top: 50%;
    margin-top: -5px;
    left: -6px;
    z-index: 10;
    width: 0;
    height: 0;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-right: 6px solid #323232;
}


.course-join-wap > .btn-con{
    float: right;
}
.course-join-wap > .btn-con > span{
    color: #868f97;
    font-size: 12px;
}



@media (max-width: 990px) {
    .course-join-learn{
        background: #ffffff;
        margin: 45px 0 0 0;
    }
    .course-join-wap{
        display: block;
    }
}


/*下部分*/
.courseDetail-main{
    width: 100%;
    margin-top: 20px;
    margin-bottom: 20px;
}

.course-d-left{
    width: 100%;
    background: #ffffff;
    border-radius: 5px;
    padding: 0 20px 30px 20px;
    box-shadow: 0 7px 14px 0 rgba(0,36,100,.08);
    margin-bottom: 20px;
	border: 1px solid #e4ecf3
}

.course-d-left-nav{
    width: 100%;
    border-bottom: 1px solid #eeeeee;
    overflow: hidden;
}
.course-d-left-nav li{
    float: left;
    height: 56px;
    line-height: 56px;
    font-size: 15px;
    padding: 0 20px;
    margin-right: 10px;
}
.course-d-left-nav li > a{
    color: #333;
    text-decoration: none;
}
.course-d-left-nav li:hover,.course-d-left-nav li.active{
    border-bottom: 2px solid #26caac;
}
.course-d-left-nav li:hover > a,.course-d-left-nav li.active > a{
    color: #26caac;
}
.course-d-left-nav li > a em{
    font-size: 12px;
    font-style:normal;
    margin-left: 3px;
    color: #bbb7b7;
}


.course-d-main{
    padding: 0 10px;
}
.course-d-intro{
    width: 100%;
}
.course-d-intro > div{
    margin-top: 20px;
    padding-left: 10px;
    position: relative;
}
.course-d-intro > div:before{
    content: '';
    position: absolute;
    width: 3px;
    height: 15px;
    left: -4px;
    top: 3px;
    background: #26caac;
}
.course-d-intro > div > label{
    margin: 0;
    font-size: 14px;
    font-weight: normal;
    color: #333;
}
.course-d-intro > div > p{
    font-size: 13px;
    color: #777;
    line-height: 170%;
    padding-left: 20px;
    margin: 20px 0;
}
.course-d-intro > div > ul{
    margin: 20px 0;
}
.course-d-intro > div li{
    height: 40px;
    line-height: 40px;
    border-bottom: 1px solid #f5f5f5;
    color: #777;
    position: relative;
    padding-left: 30px;
}
.course-d-intro > div li:before{
    content: '';
    position: absolute;
    width: 4px;
    height: 4px;
    border-radius: 4px;
    background: #777;
    top: 18px;
    left: 10px;
}
.course-d-intro p > a{
    color: #26caac;
    text-decoration: none;
}


/*目录*/
.course-d-list{
    margin: 20px 0;
}
.course-d-list li{
    /*height: 46px;*/
    /*line-height: 46px;*/
    width: 100%;
    /*padding: 0 40px;*/
    position: relative;
    margin-bottom: 5px;
    overflow: hidden;
}
/*.course-d-list li > a{
    overflow: hidden;
    white-space:nowrap;
    text-overflow: ellipsis;
}*/
.course-d-list li.course-list-chapter{
    background: #f8fafc;
    /*padding-right: 100px;*/
}
.course-d-list li.course-list-chapter > a{
    padding: 15px 100px 15px 40px;
    display: block;
    color: #777;
    text-decoration: none;
}
.course-d-list li.course-list-chapter i.icon-bars{
    position: absolute;
    left: 16px;
    top: 17px;
}
.course-d-list li.course-list-chapter i.icon-caret-down{
    position: absolute;
    right: 16px;
    top: 17px;
    z-index: 10;
    transition: transform .5s ease;
}
.course-d-list li.course-list-chapter i.icon-caret-down.active{
    transform: rotate(180deg);

}

.course-d-list li.course-list-section{
    padding-right: 100px;
    background: #f8fafc;
    /*transition: height .5s ease,marin-bottom 0s ease .5s;*/
}
.course-d-list li.course-list-section > a{
    display: block;
    padding: 15px 100px 15px 40px;
    color: #999;
    text-decoration: none;
}
.course-d-list li.course-list-c{
    /*transition: height .5s ease,marin-bottom 0s ease .5s;*/
}
.course-d-list li.course-list-c:hover{
    background: rgba(38,202,172,.05);
}
.course-d-list li.course-list-c > a{
    padding: 15px 100px 15px 40px;
    display: block;
    color: #999;
    text-decoration: none;
}
.course-d-list li.course-list-c > a > div{
    position: absolute;
    top: 12px;
    height: 22px;
    line-height: 22px;
    right: 10px;
    z-index: 9;
}
.course-d-list li.course-list-c > a > .f1{
    display: inline-block;
    position: absolute;
    top: 17px;
    left: 16px;
    width: 14px;
    height: 14px;
    border-radius: 12px;
    border: 1px solid #999999;
    overflow: hidden;
}
.course-d-list li.course-list-c > a > .f1 > i{
    position: absolute;
    left: 0;
    display: inline-block;
    width: 14px;
    height: 14px;
    background: #26caac;
}
.course-d-list li.course-list-c > a > .f1.wc{
    border: 1px solid #26caac;
}

.course-d-list li.course-list-c > a > .l1{
    display: inline-block;
    height: 24px;
    line-height: 24px;
    font-size: 12px;
    border-radius: 12px;
    background: #ff5656;
    color: #ffffff;
    padding: 0 12px;
    margin-right: 10px;
}
.course-d-list li.course-list-c > a > button{
    position: absolute;
    right: 10px;
    height: 32px;
    line-height: 32px;
    color: #ffffff;
    top: 7px;
    padding: 0 12px;
    z-index: 12;
    border-radius: 2px;
    display: none;
}
.course-d-list li.course-list-c > a > button.buy{
    border: 1px solid #d36623;
    background: #ea742c;
}
.course-d-list li.course-list-c > a > button.preview{
    border: 1px solid #21aa91;
    background: #26caac;
}
.course-d-list li.course-list-c:hover > a > button{
    display: block;
}



@media (max-width: 767px) {

    .course-d-left{
        padding: 0 10px 20px 10px;

    }


    .course-d-left-nav li{
        float: left;
        height: 45px;
        line-height: 45px;
        font-size: 13px;
        padding: 0 12px;
        margin-right: 0;
    }
    .course-d-left-nav li > a{
        color: #555;
        text-decoration: none;
    }
    .course-d-left-nav li:hover{
        border-bottom: 0;
    }
    .course-d-left-nav li:hover > a{
        color: #777;
    }


    .course-d-list li.course-list-chapter,.course-d-list li.course-list-section{
        padding-right: 40px;
    }
    .course-d-list li.course-list-c:hover > a > button{
        display: none;
    }

}

/*资料区*/
.course-d-data{
    margin: 20px 0;
}
.course-d-data .data-list{
    border-bottom: 1px solid #efefef;
    margin-bottom: 20px;
}
.course-d-data .data-list:last-child{
    border-bottom: 0;
}
.course-d-data .data-list .bt > a,.course-d-data .data-list .text-con .links{
    color: #26caac;
    text-decoration: none;
}
.course-d-data .data-list .text-con{
    margin: 5px 0 14px 0;
    font-size: 14px;
    color: #999;
}
.course-d-data .data-list .text-con .bullet{
    color: #CCCCCC;
    margin: 0 4px;
}


/*评论部分*/
.course-d-comment{
    margin: 20px 0;
}
.course-d-comment .fill-comment{
    width: 100%;
}

.course-d-comment .star-raty{
    margin-bottom: 12px;
    position: relative;
    padding-left: 45px;
}
.course-d-comment .star-raty > span{
    position: absolute;
    top: 2px;
    left: 0;
    color: #999;
}
.course-d-comment .fill-comment textarea{
    width: 100%;
    height: 120px;
    border-radius: 5px;
    border: 1px solid #eeeeee;
    padding: 10px;
}
.course-d-comment .fill-comment textarea:focus{
    border: 1px solid #26caac;
}
.course-d-comment .comment-btn{
    margin-top: 10px;
    text-align: right;
}
.course-d-comment .comment-btn > a{
    color: #26caac;
    text-decoration: none;
    margin-right: 10px;
}
.course-d-comment .comment-btn > button{
    height: 32px;
    line-height: 32px;
    border: 1px solid #21ae94;
    border-radius: 2px;
    padding: 0 10px;
    background: #26caac;
    color: #ffffff;
    transition: background .5s ease;
}
.course-d-comment .comment-btn > button:hover{
    background: #23b89d;
}

.course-d-comment .comment-list{
    width: 100%;
}
.course-d-comment .comment-item{
    position: relative;
    padding-left: 60px;
    border-bottom: 1px solid #efefef;
    margin-top: 20px;
    padding-bottom: 20px;
}
.course-d-comment .comment-item:last-child{
    border-bottom: 0;
}
.course-d-comment .comment-item > .tx{
    position: absolute;
    top: 0;
    left: 0;
    width: 46px;
    height: 46px;
}
.course-d-comment .comment-item > .tx img{
    width: 46px;
    height: 46px;
    border-radius: 50%;
}

.course-d-comment .comment-item > .title{
    color: #999;
    margin-bottom: 4px;
}
.course-d-comment .comment-item > .title > span{
    display: inline-block;
}
.course-d-comment .comment-item > .title > a{
    display: inline-block;
    color: #26caac;
    margin-right: 6px;
}
.course-d-comment .comment-item > .score{
    margin-bottom: 6px;
}
.course-d-comment .comment-item > .score > i{
    color: #ea742c;
    font-size: 12px;
}
.course-d-comment .comment-item > .content{
    color: #777;
    line-height: 160%;
}


/*问答区*/
.course-d-question{
    margin: 20px 0;
}
.question-title{
    width: 100%;
    height: 34px;
    line-height: 34px;
    background: #f8fafc;
    border-radius: 3px;
    padding: 0 15px;
    color: #868f97;
    margin-bottom: 15px;
}
.question-title > a{
    color: #868f97;
    text-decoration: none;
}
.question-title > a:hover{
    color: #26caac;
}

.ask-questions > input{
    width: 100%;
    height: 32px;
    padding: 0 10px;
    border: 1px solid #eeeeee;
    border-radius: 3px;
    margin-bottom: 15px;
    font-size: 12px;
}
.ask-questions > input:focus{
    border: 1px solid #26caac;
}

.ask-questions > .ask-text{
    width: 100%;
    height: 200px;
    font-size: 12px;
    background: #f8fafc;
    margin-bottom: 15px;
}

.ask-questions > .ask-upload{
    width: 100%;
    margin-bottom: 15px;
}
.ask-questions > .ask-upload > a{
    text-decoration: none;
    display: inline-block;
    line-height: 32px;
    height: 32px;
    padding: 0 20px;
    border: 1px solid #21ae94;
    background: #26caac;
    color: #FFFFFF;
    border-radius: 3px;
    transition: background .3s ease;
}
.ask-questions > .ask-upload > a:hover{
    background: #23b89d;
}
.ask-questions > .ask-upload li {
    padding: 10px;
    background: #f8fafc;
    border: 1px solid #eeeeee;
    border-radius: 3px;
}
.ask-questions > .ask-upload li > img{
    max-height: 60px;
    margin-right: 10px;
}
.ask-questions > .ask-upload li > a{
    color: #868f97;
    text-decoration: none;
    float: right;
    margin-top: 20px;
}
.ask-questions > .ask-upload li > a:hover{
    color: #26caac;
}

.ask-questions > .ask-btns{
    width: 100%;
    text-align: right;
}
.ask-questions > .ask-btns > a{
    display: inline-block;
    height: 32px;
    line-height: 32px;
    margin-right: 10px;
    color: #999;
    text-decoration: none;
}
.ask-questions > .ask-btns > button{
    height: 32px;
    padding: 0 20px;
    border: 1px solid #21ae94;
    background: #26caac;
    color: #FFFFFF;
    border-radius: 3px;
    transition: background .3s ease;
}
.ask-questions > .ask-btns > button:hover{
    background: #23b89d;
}

.ask-question-item{
    width: 100%;
    margin-top: 20px;
    border-top: 1px solid #eeeeee;
}
.ask-question-list{
    width: 100%;
    position: relative;
    border-bottom: 1px solid #eeeeee;
    padding: 0 110px 18px 60px;
    margin-top: 18px;
}
.ask-question-list:last-child{
    border-bottom: 0;
}
.ask-question-list > div.tx{
    width: 46px;
    height: 46px;
    position: absolute;
    top: 2px;
    left: 2px;
}
.ask-question-list > div.tx img{
    width: 46px;
    height: 46px;
    border-radius: 50%;
    overflow: hidden;
}
.ask-question-list > p{
    line-height: 170%;
    margin-bottom: 12px;
}
.ask-question-list > p > a{
    color: #555;
    text-decoration: none;
}
.ask-question-list > p > a:hover{
    color: #26caac;
}
.ask-question-list > p > i{
    color: #d53520;
    margin-right: 5px;
}
.ask-question-list > div.xq{
    color: #bbb7b7;
    font-size: 12px;
}
.ask-question-list > div.xq > a{
    text-decoration: none;
    color: #26caac;
}
.ask-question-list > ul{
    position: absolute;
    right: 0;
    top: 2px;
}
.ask-question-list > ul > li{
    float: left;
    height: 50px;
    width: 45px;
    text-align: center;
    padding-top: 6px;
    font-size: 12px;
    color: #999;
}
.ask-question-list > ul > li:first-child{
    border-right: 1px solid #eeeeee;
}
.ask-question-list > ul > li > label{
    width: 100%;
    font-weight: normal;
}


.ask-q-details{
    width: 100%;
    margin-top: 34px;
    position: relative;
    padding: 0 60px 40px 0;
}
.ask-q-details > p.title{
    font-size: 16px;
    color: #555;
    line-height: 170%;
}
.ask-q-details > p.title >span{
    display: inline-block;
    height: 18px;
    line-height: 18px;
    padding: 0 5px;
    font-size: 12px;
    background: #278bf5;
    color: #FFFFFF;
    vertical-align: text-top;
    border-radius: 3px;
    margin-right: 5px;
}
.ask-q-details > .xq{
    color: #bbb7b7;
    font-size: 12px;
}
.ask-q-details > .xq > a{
    color: #26caac;
    text-decoration: none;
}
.ask-q-details > .content{
    margin-top: 12px;
    line-height: 170%;
    font-size: 12px;
    color: #999;
}

.ask-q-details > div.tx{
     width: 46px;
     height: 46px;
     position: absolute;
     top: 2px;
    right: 2px;
 }
.ask-q-details > div.tx img{
    width: 46px;
    height: 46px;
    border-radius: 50%;
    overflow: hidden;
}

.ask-q-details > .bj{
    position: absolute;
    bottom:40px;
    right: 0;
    color: #868f97;
}






.ask-q-hd{
    margin-bottom: 20px;
}
.ask-q-hd > label,.ask-q-add > label{
    font-weight: normal;
    border-bottom: 2px solid #eeeeee;
    height: 40px;
    line-height: 40px;
    font-size: 16px;
    width: 100%;
    color: #888;
}
.ask-q-hd > label > i,.ask-q-add > label > i{
    margin-right: 4px;
}
.ask-q-hd-item{
    width: 100%;
}
.ask-q-hd-list{
    position: relative;
    padding: 0 20px 18px 60px;
    margin-top: 18px;
    border-bottom: 1px solid #eeeeee;
}
.ask-q-hd-list:last-child{
    border-bottom: 0;
}
.ask-q-hd-list > div.tx{
    width: 46px;
    height: 46px;
    position: absolute;
    top: 2px;
    left: 2px;
}
.ask-q-hd-list > div.tx img{
    width: 46px;
    height: 46px;
    border-radius: 50%;
    overflow: hidden;
}
.ask-q-hd-list > .xq{
    font-size: 12px;
    color: #bbb7b7;
}
.ask-q-hd-list > .xq > a{
    text-decoration: none;
    color: #26caac;
}
.ask-q-hd-list > .content{
    line-height: 170%;
    color: #868f97;
    margin: 0;
}
.ask-q-hd-list > .bj{
    position: absolute;
    top: 0;
    right: 0;
    color: #868f97;
}


.ask-q-hd-list > .bj > ul,.ask-q-details > .bj > ul{
    position: absolute;
    top: 16px;
    right: 0;
    background: #ffffff;
    width: 120px;
    box-shadow: 0 7px 14px 0 rgba(0,36,100,.08);
    border: 1px solid #f1f1f1;
    border-radius: 3px;
    padding: 5px 0;
    display: none;
    z-index: 1;
}
.ask-q-hd-list > .bj li,.ask-q-details > .bj li{
    padding: 10px;
}
.ask-q-hd-list > .bj li >a,.ask-q-details > .bj li >a{
    display: block;
    color: #868f97;
    text-decoration: none;
}
.ask-q-hd-list > .bj li:hover,.ask-q-details > .bj li:hover{
    background: #26caac;
}
.ask-q-hd-list > .bj li:hover >a,.ask-q-details > .bj li:hover >a{
    color: #FFFFFF;
}

@media (max-width: 767px) {
    .ask-questions > .ask-upload li{
        font-size: 12px;
    }
    .ask-questions > .ask-upload li > img{
        max-height: 34px;
        margin-right: 4px;
    }
    .ask-questions > .ask-upload li > a{
        margin-top: 8px;
    }

    .ask-question-list{
        padding: 0 14px 18px 60px;
    }
    .ask-question-list > ul{
        display: none;
    }
}



/*上传附件弹出框*/
.upload-fj{
    width: 900px;
}

.upload-fj .upload-fj-con{
    width: 100%;
    text-align: center;
    padding: 20px;
}
.upload-fj-c{
    width: 100%;
    background: #f8fafc;
    border-radius: 3px;
    padding: 30px 30px 10px 30px;
}
.upload-fj-c > .upload-box{
    width: 100%;
    border: 1px dashed #eeeeee;
    margin-bottom: 20px;
}
.upload-fj-c > .upload-box > .step1{
    margin: 80px 0;
    text-align: center;
}
.upload-fj-c > .upload-box > .step1 > button{
    height: 32px;
    padding: 0 20px;
    border: 1px solid #21ae94;
    background: #26caac;
    color: #FFFFFF;
    border-radius: 3px;
    transition: background .3s ease;
    margin-left: 10px;
}
.upload-fj-c > .upload-box > .step1 > button:hover{
    background: #23b89d;
}

.upload-fj-c > .upload-box > .step2{
    margin: 45px 0;
    position: relative;
    padding: 0 130px 0 14px;
    text-align: left;
}
.upload-fj-c > .upload-box > .step2 > h5{
    margin: 0;
    color: #868f97;
}

.upload-fj-c > .upload-box > .step2 > .jdt{
    background: #d9e0e8;
    height: 12px;
    width: 100%;
    border-radius: 6px;
    overflow: hidden;
    margin: 30px 0;
}
.upload-fj-c > .upload-box > .step2 > .jdt > div{
    background: #26caac;
    border-radius: 6px;
    height: 12px;
}
.upload-fj-c > .upload-box > .step2 > .loading{
    color: #26caac;
    font-size: 12px;
}
.upload-fj-c > .upload-box > .step2 > .btns{
    position: absolute;
    right: 14px;
    top: 38px;
    width: 110px;
}
.upload-fj-c > .upload-box > .step2 > .btns > span{
    font-size: 16px;
    color: #868f97;
}
.upload-fj-c > .upload-box > .step2 > .btns > i{
    color: #bbb7b7;
    margin-left: 10px;
}


.upload-fj-c > .upload-explain{
    border-top: 1px solid #eeeeee;
    padding: 12px 0 12px 30px;
}
.upload-fj-c > .upload-explain > ul{
    list-style: disc;
    text-align: left;
}
.upload-fj-c > .upload-explain li{
    padding: 5px 0 5px 0;
    font-size: 12px;
    color: #868f97;
}
.upload-fj-c > .upload-explain li > span{
    font-weight: bold;
}






@media (max-width: 767px) {
    .upload-fj{
        width: 90%;
    }
    .upload-fj .upload-fj-con{
        padding: 15px;
    }
    .upload-fj-c{
        width: 100%;
        background: #f8fafc;
        border-radius: 3px;
        padding: 20px 20px 0 20px;
    }

    .upload-fj-c > .upload-box > .step2{
        padding: 0 110px 0 14px;
        margin: 40px 0;
    }
    .upload-fj-c > .upload-box > .step2 > .jdt{
        margin: 20px 0;
    }
    .upload-fj-c > .upload-box > .step2 > .btns{
        width: 90px;
        top: 31px;
    }
    .upload-fj-c > .upload-box > .step2 > .btns > span{
        font-size: 12px;
    }
    .upload-fj-c > .upload-box > .step2 > .btns > i{
        margin-left: 6px;
    }

}



/*左侧的其他课程列表*/
.course-d-other{
    width: 100%;
    background: #ffffff;
    border-radius: 5px;
    padding: 20px;
    box-shadow: 0 7px 14px 0 rgba(0,36,100,.08);
    margin-bottom: 20px;
}


/*右侧*/
.course-d-right{
    width: 100%;
}
.course-d-right-title{
    width: 100%;
    border-bottom: 1px solid #eeeeee;
    padding: 13px 0;
    color: #333;
    font-size: 15px;
}
/*授课老师*/
.course-d-teacher,.course-d-student,.course-d-dynamic{
    width: 100%;
    background: #ffffff;
    border-radius: 5px;
    padding: 0 20px 30px 20px;
    box-shadow: 0 7px 14px 0 rgba(0,36,100,.08);
    margin-bottom: 20px;
	border: 1px solid #e4ecf3;
}
.course-d-teacher .teacher-info{
    width: 100%;
    position: relative;
    padding-left: 76px;
    padding-top: 5px;
    min-height: 60px;
    margin-top: 16px;
}
.course-d-teacher .teacher-info > .tx{
    position: absolute;
    top: 0;
    left: 0;
}
.course-d-teacher .teacher-info > .tx img{
    width: 60px;
    height: 60px;
    border-radius: 50%;
    overflow: hidden;
}
.course-d-teacher .teacher-info > .name{
    color: #555;
    text-decoration: none;
}
.course-d-teacher .teacher-info > .name:hover{
    color: #26caac;
}
.course-d-teacher .teacher-info > p{
    line-height: 160%;
    color: #777;
    margin-top: 10px;
}


/*最新学员*/
.course-d-student > ul{
    margin-top: 20px;
}
.course-d-student li{
    float: left;
    width: 20%;
    text-align: center;
    margin-bottom: 10px;
}
.course-d-student li > div{
    position: relative;
    width: 40px;
    height: 40px;
}
.course-d-student li a > img{
    width: 40px;
    height: 40px;
    border-radius: 50%;
}

/*学员动态*/
.course-d-dynamic ul{
    margin-top: 10px;
}
.course-d-dynamic li{
    height: 30px;
    line-height: 30px;
    overflow: hidden;
    text-overflow:ellipsis;
    white-space: nowrap;
    color: #bbb;
    margin-bottom: 5px;
}
.course-d-dynamic li > a{
    color: #777;
    text-decoration: none;
}
.course-d-dynamic li > a:hover{
    color: #26caac;
}


/*鼠标移上头像的弹出框*/
.popover-con{
    position: absolute;
    width: 328px;
    min-height: 100px;
    /*bottom: 68px;*/
    /*left: 50%;*/
    /*margin-left: -164px;*/
    border-radius: 4px;
    background: #ffffff;
    box-shadow: 0 7px 14px 0 rgba(0,36,100,.08);
    display: none;
    text-align: left;
    z-index: 9;
}
.popover-icon{
    position: absolute;
    display: inline-block;
    top: -8px;
    left: 50%;
    margin-left: -6px;
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 8px solid #fff;
    display: none;
    z-index: 10;
}
.popover-con-top{
    width: 100%;
    height: 90px;
    background: #f8fafc;
    position: relative;
    padding: 20px 50px 20px 82px;
}
.popover-con-top > .top-img{
    position: absolute;
    top: 16px;
    left: 12px;
}
.popover-con-top > .top-img img{
    width: 60px;
    height: 60px;
    border-radius: 50%;
}
.popover-con-top > a{
    color: #777;
    text-decoration: none;
}
.popover-con-top > a:hover{
    color: #26caac;
}
.popover-con-top > p{
    color: #999;
    line-height: 170%;
}
.popover-con-top > .top-btn{
    position: absolute;
    top: 16px;
    right: 12px;
    font-size: 0;
    width: 38px;
}
.popover-con-top > .top-btn button{
    height: 20px;
    font-size: 12px;
    width: 38px;
}
.popover-con-top > .top-btn button.gz{
    border: 1px solid #21ae94;
    background: #26caac;
    color: #ffffff;
    font-size: 12px;
    margin-bottom: 14px;
}
.popover-con-top > .top-btn button.gz:hover{
    background: #23b89d;
}

.popover-con-top > .top-btn button.sx{
    border: 1px solid #eeeeee;
    background: #ffffff;
    color: #333;
    font-size: 12px;
}

.popover-con-center{
    width: 100%;
    padding: 16px;
    line-height: 170%;
    color: #999;
}

.popover-con-bottom{
    border-top: 1px solid #eeeeee;
    padding: 6px 0;
}
.popover-con-bottom li{
    float: left;
    width: 33.3333%;
    border-right: 1px solid #efefef;
    text-align: center;
    padding: 10px 0;
}
.popover-con-bottom li:last-child{
    border-right: 0;
}
.popover-con-bottom li > h5{
    margin: 0 0 5px 0;
}
.popover-con-bottom li > span{
    color: #999;
}