/*初始化样式*/
body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td { margin:0; padding:0; }
body, button, input, select, textarea { font:12px/1.5tahoma, arial, \5b8b\4f53; }
h1, h2, h3, h4, h5, h6{ font-size:100%; }
address, cite, dfn, em, var { font-style:normal; }
code, kbd, pre, samp { font-family:couriernew, courier, monospace; }
small{ font-size:12px; }
ul, ol { list-style:none; }
a { text-decoration:none; }
a:hover { text-decoration:underline; }
sup { vertical-align:text-top; }
sub{ vertical-align:text-bottom; }
legend { color:#000; }
fieldset, img { border:0; }
button, input, select, textarea { font-size:100%; }
table { border-collapse:collapse; border-spacing:0; }
html,body{width: 100%;height: 100%;margin: 0 auto;     background:#ebf1fa;}
@media screen {
    .course-box{
        width: 7.5rem;
        height: 100%;
        margin: 0 auto;
        background:#ebf1fa;
        clear: both;
        position: relative;
        overflow: auto;
        position: absolute;
        top:0;right: 0;bottom: 0;left: 0;
        margin: auto;
    }
    .bg-course{
        width: 7.5rem;
        height: auto;
        margin: 0 auto;
    }
    .course-main{
        width: 7.5rem;
        height: 100%;
        margin: 0 auto;
        /*position: absolute;*/
        /*top:0;bottom: 0;right: 0;left: 0;*/
        /*margin: auto;*/
        float: right;
    }
    .course-banner{
        width: 100%;
        height: 5.92rem;
        float: left;
        position: relative;
    }
    .course-banner img{
        width: 7.5rem;
        height: 5.92rem;
        position: absolute;
        top:0;right: 0;bottom: 0;left: 0;
        margin: auto;
    }
    .course-nianka{
        width: 6.86rem;
        height: 2.64rem;
        margin: 0 auto;
        margin-top: 4.48rem;
        position: relative;
        border-radius: 4px;
        box-shadow:0 2px 8px 0 rgba(0,0,0,0.08);
        background: #fafafa;
        margin-bottom: 0.64rem;
    }
    .course-nianka:after {
        content: "\0020";
        display: block;
        height: 0;
        clear: both;
    }
    .course-bg{
        width: 6.54rem;
        height: auto;
        margin:0 auto;
        background: #fff;
        float: left;
        margin-left: 0.16rem;
        margin-top: 0.16rem;
    }
    .course-nianka-main{
        width: 6.86rem;
        height: 1.92rem;
        margin: 0 auto;
        background:#fff;
        float: left;
        position: absolute;
        top:0;left:0;right: 0;
        margin: 0 auto;
        border-top-left-radius: 4px;
        border-top-right-radius: 4px;
    }
    .course-nianka-main-img{
        width: 1.28rem;
        height: 1.28rem;
        float: left;
        margin-top: 0.32rem;
        margin-left: 0.4rem;
        float: left;
        position: relative;
    }
    .course-nianka-main-img img{
        position: absolute;
        top:0;right: 0;bottom: 0;left: 0;
        margin: auto;
        width: 1.28rem;
        height: 1.28rem;
    }
    .course-nianka-main-med{
        width: 3.7rem;
        height: auto;
        float: left;
        margin-top: 0.58rem;
        margin-left: 0.32rem;
    }
    .course-nianka-mian-title{
        font-family:PingFangSC-Medium;
        font-size:18px;
        color:#eebe5f;
        letter-spacing:0;
        line-height:18px;
        text-align:left;
        float: left;
    }
    .course-nianka-main-price{
        font-family:PingFangSC-Regular;
        font-size:14px;
        color:#f27a83;
        letter-spacing:0;
        line-height:16px;
        text-align:left;
        float: left;
        margin-top: 4px;
    }
    .on-prices{
        font-family:PingFangSC-Regular;
        font-size:14px;
        color:#333333;
        letter-spacing:0;
        line-height:16px;
        text-align:left;
        text-decoration: line-through;
    }
    .course-nianka-Discount{
        width: 6.06rem;
        height: auto;
        margin: 0 auto;
        background: #fafafa;
        padding-bottom: 0.24rem;
    }
    .course-discount-head{
        width: 6.06rem;
        height: 18px;
        margin: 0 auto;
        margin-top: 0.24rem;
    }
    .course-discount-title{
        font-family:PingFangSC-Medium;
        font-size:16px;
        color:#0096ff;
        letter-spacing:0;
        line-height:18px;
        text-align:left;
        float: left;
    }
    .course-discount-during{
        width: 4rem;
        float: right;
    }
    .course-discount-during-title{
        width: auto;
        float: left;
        font-family:PingFangSC-Regular;
        font-size:12px;
        color:#9ca0b5;
        letter-spacing:0;
        line-height:18px;
        text-align:left;
    }
    .course-discount-during-prices{
        font-family:PingFangSC-Regular;
        font-size:12px;
        color:#9ca0b5;
        letter-spacing:0;
        line-height:18px;
        text-align:right;
        float: right;
    }
    .course-discount-bottom{
        width: 6.06rem;
        font-family:PingFangSC-Regular;
        font-size:14px;
        color:#333333;
        letter-spacing:0;
        line-height:16px;
        text-align:left;
        margin: 0 auto;
    }
    .course-again{
        width: 6.06rem;
        font-family:PingFangSC-Regular;
        font-size:12px;
        color:#f27a83;
        letter-spacing:0;
        line-height:14px;
        text-align:left;
        margin: 0 auto;
        background: #fafafa;
    }
    .course-interest{
        width: 6.86rem;
        height: 42px;
        margin: 0 auto;
        position: relative;
    }
    .course-interest-left,.course-interest-right{
        position: absolute;
        top:0;bottom: 0;
        margin: auto 0;
        background:#eebe5f;
        width:1.46rem;
        height:1px;
    }
    .course-interest-left{
        left: 0;
    }
    .course-interest-right{
        right: 0;
    }
    .on-bg{
        margin-bottom: 0.08rem;
    }
    .course-nianka-mian-top{
        width: 2.24rem;
        height: 0.64rem;
        position: absolute;
        top:0;right: 0;
    }
    .course-nianka-mian-top img{
        width: 2.24rem;
        height: 0.64rem;
        position: absolute;
        top:0;right: 0;left: 0;bottom: 0;
        margin: auto;
    }
    .course-interest-title{
        font-family:PingFangSC-Medium;
        font-size:16px;
        color:#d1a247;
        letter-spacing:0;
        line-height:18px;
        text-align:center;
        line-height: 40px;
    }
    .course-interest-boxs{
        width: 6.86rem;
        height:auto;
        margin: 0 auto;
        background:#ffffff;
        border-radius:4px;
        padding-top: 0.32rem;
        padding-bottom: 0.3rem;
    }
    .course-interest-boxs-title{
        width: 100%;
        margin: 0 auto;
        font-family:PingFangSC-Regular;
        font-size:14px;
        color:#333333;
        letter-spacing:0;
        line-height:16px;
        text-align:left;
        margin-bottom: 8px;
    }
    .course-interest-boxs-title:last-child{
        margin-bottom: 12px;
    }
    .on-position{
        position: relative;
    }
    .course-interests-boxs{
        width: 6.86rem;
        height: auto;
        background: #eaf0fa;
        border-radius: 4px;
        margin: 0 auto;position: relative;
        margin-bottom: 0.14rem;
        height: 2.08rem;
    }
    .course-interest-boxs-img{
        width: 1.04rem;
        height: 1.04rem;
        position: absolute;
        top:0;left: 0;
    }
    .course-interest-boxs-img img{
        width: 1.04rem;
        height: 1.04rem;
        position: absolute;
        top:0;left: 0;right: 0;bottom: 0;
        margin: 0 auto;
    }
    .course-interest-boxss-img{
        width: 0.4rem;
        height: 0.4rem;
        position: absolute;
        top:0.32rem;left: 0.32rem;
    }
    .course-interest-boxss-img img{
        width: 0.4rem;
        height: 0.4rem;
        position: absolute;
        top:0;left: 0;right: 0;bottom: 0;
        margin: 0 auto;
    }
    .course-interest-bos-main{
        width: 5.6rem;
        height: auto;
        float: right;
        margin-top: 0.32rem;
        margin-right: 0.38rem;
    }
    .course-interest-mian-head{
        font-family:PingFangSC-Regular;
        font-size:16px;
        color:#333333;
        letter-spacing:0;
        line-height:20px;
        text-align:left;
    }
    .course-interest-main-liebiao{
        display: -webkit-flex; /* Safari */
        display: flex;
        flex-wrap:wrap;
        justify-content: space-between;
        margin-top: 0.08rem;
    }
    .course-interest-main-liebiao li{
        font-family:PingFangSC-Regular;
        font-size:14px;
        color:#333333;
        letter-spacing:0;
        line-height:16px;
        text-align:left;
        margin-right: 0.18rem;
    }
    .courses-img{
        width: 100%;
        height: 4px;
        position: absolute;
        left:0;right: 0;
        margin: 0 auto;
        bottom: -4px;
    }
    .courses-img img{
        width: 100%;
        height: 4px;
        position: absolute;
        top:0;right: 0;bottom: 0;left: 0;
        margin: auto;
    }
    .course-bgs{
        width: 7.5rem;
        margin: 0 auto;
        height: 0.96rem;
        background: red;
        position: absolute;
        left:-0.32rem;bottom: 0;
        z-index: -1;
        background: url("../img/excessive.png") bottom center no-repeat;
        background-size: 7.5rem 0.96rem;
    }
    .course-value{
        width: 7.5rem;
        height: auto;
        margin: 0 auto;
        background: #031571;
        padding-bottom: 1.8rem;
    }
    .course-value-box{
        background:#b8bdd7;
        width:6.86rem;
        height:auto;
        margin: 0 auto;
    }
    .course-value-box-li{
        width: 6.22rem;
        height: 1.84rem;
        border-bottom: 1px solid #a9b0cf;
        margin: 0 auto;
        position: relative;
    }
    .course-value-img{
        width: 0.88rem;
        height: 0.88rem;
        float: left;
        margin-top: 0.48rem;
        position: relative;
    }
    .course-value-img img{
        position: absolute;
        top:0;left: 0;right: 0;bottom: 0;
        margin: auto;
        width: 0.88rem;height: 0.88rem;
    }
    .course-value-title{
        position: absolute;
        top:0;bottom: 0;
        margin: auto 0;
        left: 1.2rem;
        width: 5rem;
        float: right;
        margin-top: 0.48rem;
        font-family:PingFangSC-Regular;
        font-size:14px;
        color:#031571;
        letter-spacing:0;
        line-height:20px;
        text-align:left;
    }
    .on-rights{
        float: right;
    }
    .on-rightss{
        left: 0;
    }
    .value-center-boxs{
        width: 6.86rem;
        height: auto;
        margin: 0 auto;
        margin-top: 0.6rem;
    }
    .value-center-icon{
        width: 100%;
        height: 20px;
        text-align: center;
        margin: 0 auto;
    }
    .value-center-img{
        width:0.32rem;
        position: relative;
        height: 0.32rem;
        float: left;
        margin-left: 2.32rem;
    }
    .value-center-img img{
        width:0.32rem;
        height: 0.32rem;
        position: absolute;
        top:0;left: 0;right: 0;bottom: 0;margin: auto
    }
    .value-center-title{
        font-family:PingFangSC-Regular;
        font-size:16px;
        color:#ffffff;
        letter-spacing:0;
        line-height:16px;
        text-align:center;
        float: left;
        margin-left: 4px;
    }
    .center-title1{
        width: 100%;
        font-family:PingFangSC-Regular;
        font-size:14px;
        color:#ffffff;
        letter-spacing:0;
        line-height:16px;
        text-align:center;
        margin-top: 8px;
    }
    .on-color{
        color:#ebcb8e;
    }
    .course-buttons{
        background:#171613;
        border-radius:30px;
        height:48px;
        width: 6.86rem;
        margin:  0 auto;
        font-family:PingFangSC-Medium;
        font-size:16px;
        color:#ebcb8e;
        letter-spacing:0;
        line-height:16px;
        text-align:center;
        position: absolute;
        left:0 ;right: 0;
        line-height: 46px;
        bottom: 8px;
        margin: 0 auto;
        z-index: 11;
    }
    .card-list{
        width: 100%;
        height: 0.72rem;
        position: absolute;
        left:0;right: 0;
        margin: 0 auto;
        bottom: 0;
        font-family:PingFangSC-Regular;
        font-size:14px;
        color:#0096ff;
        letter-spacing:0;
        line-height:16px;
        text-align:center;
        line-height: 0.7rem;
    }
    .card-list-img{
        width: 0.24rem;
        height: 0.24rem;
        position: absolute;
        top:0;bottom: 0;
        margin: auto 0;
        right: 2.12rem;
    }
    .card-list-img img{
        width: 0.24rem;
        height: 0.24rem;
        position: absolute;
        top:0;right: 0;bottom: 0;left: 0;
        margin: auto;
    }
    .card-list-title{
        position: absolute;
        top:0;bottom: 0;
        margin: auto 0;
        left: 2.12rem;
    }
    .cards-teach-box{
        width: 100%;
        height: 0.8rem;
        margin: 0 auto;
        position: relative;
        margin-bottom: 0.16rem;
    }
    .cards-teach-box img{
        width: 100%;
        height: 0.8rem;
        position: absolute;
        top:0;right: 0;bottom: 0;left: 0;
        margin: auto;
    }
    .crads-box-bg{
        width: 100%;
        height: auto;
        margin: 0 auto;
    }
    .cards-box-bg-top,.cards-box-bg-bottom{
        width: 100%;
        height: 0.4rem;
        margin: 0 auto;
        position: relative;
    }
    .cards-box-bg-top img{
         width: 100%;
         height: 0.4rem;
         position: absolute;
         top:0;right: 0;bottom: 0;left: 0;
         margin: auto;
     }
    .cards-box-bg-bottom img{
        width: 100%;
        height: 0.4rem;
        position: absolute;
        top:0;right: 0;bottom: 0;left: 0;
        margin: auto;
    }
    .person-lectuer{
        width: 100%;
        height: auto;
        margin: 0 auto;
    }
    .cards-box-main{
        width: 100%;
        height: auto;
        background-image:linear-gradient(90deg, #f8fbff 0%, #ebf1fa 100%);
        margin: 0 auto;
    }
    .cards-person-main{
        width:6.22rem ;
        height: auto;
        margin: 0 auto;
    }
    .cards-person-head{
        width: 100%;
        height: 0.64rem;
        margin-top: 0.16rem;
        float: left;
    }
    .cards-person-main:after{
        content: " ";
        clear: both;
        display: block;
        visibility: hidden;
    }
    .cards-person-name{
        font-family:PingFangSC-Medium;
        font-size:16px;
        color:#333333;
        letter-spacing:0;
        line-height:0.64rem;
        text-align:left;
        float: left;
    }
    .cards-person-img{
        width: 0.64rem;
        height: 100%;
        float: right;
        border-radius: 50%;
        position: relative;
        overflow: hidden;
    }
    .cards-person-img img{
        width: 0.64rem;
        height: 0.64rem;
        border-radius: 50%;
        position: absolute;
        top:0;right: 0;bottom: 0;left: 0;
        margin: auto;
    }
    .cards-person-des{
        width: 6.22rem;
        height: auto;
        float: left;
        margin-top: 0.16rem;
        font-family:PingFangSC-Regular;
        font-size:14px;
        color:#9ca0b5;
        letter-spacing:0;
        line-height:16px;
        text-align:left;
    }
    .cards-person-course{
        width: 6.22rem;
        height: auto;
        float: left;
        margin-top: 0.34rem;
        margin-bottom: 0.16rem;
    }
    .cards-person-course-list{
        font-family:PingFangSC-Medium;
        font-size:14px;
        color:#d29755;
        letter-spacing:0;
        line-height:16px;
        text-align:left;
    }
    .card-mores{

    }
    .cards-course-system{
        width: 100%;
        height: auto;
        margin: 0 auto;
        background:#521db3;
        padding-bottom: 0.32rem;
    }
    .cards-course-more{
        width: 100%;
        height: 0.96rem;
        margin: 0 auto;
        position: relative;
    }
    .cards-course-more img{
        width: 100%;
        height: 0.96rem;
        position: absolute;
        top:0;right: 0;bottom: 0;left: 0;
        margin: auto;
    }
    .box-title2{
        margin-top: 0.66rem;
        margin-bottom: 0.3rem;
    }
    .cards-student{
        width: 100%;
        height: auto;
        margin: 0 auto;
    }
    .cards-student-bg{
        width: 100%;
        height: 2.88rem;
        margin: 0 auto;
        position: relative;
    }
    .cards-student-bg img{
        width: 100%;
        height: 2.88rem;
        position: absolute;
        top:0;right: 0;bottom: 0;left: 0;
        margin: auto;
        z-index: 1;
    }
    .box-title3{
        float: left;
        margin-top: 0.3rem;
    }
    .box-title3 .titles_3{
        width: 100%;
        height: 0.8rem;
        position: absolute;
        top:0;right: 0;bottom: 0;left: 0;
        margin: auto;
    }
    .cards-student-navs{
        width: 100%;
        height: 330px;
        margin: 0 auto;
        margin-top: -75px;
        position: relative;
        z-index: 10;
    }
    .cards-student-lists{
        width: 5.92rem;
        height: 80px;
        background:#ffffff;
        box-shadow:0 2px 8px 0 rgba(0,0,0,0.08);
        border-radius:8px;
        margin: 0 auto;
        margin-bottom: 12px;
        position: relative;
    }
    .cards-student-img{
        width: 46px;
        height: 46px;
        position: absolute;
        border:1px solid #d7e0ee;
        border-radius:8px;
        top:0;bottom: 0;
        margin: auto 0;
        left: 16px;
        overflow: hidden;
    }
    .cards-student-img img{
        width: 46px;
        height: 46px;
        position: absolute;
        top:0;right: 0;bottom: 0;left: 0;
        margin: auto;
    }
    .cards-student-name-box{
        float: right;
        margin-top: 13px;
        margin-right: 16px;
        width: 204px;
        height: auto;
    }
    .cards-student-name{
        width: 100%;
        font-family:PingFangSC-Medium;
        font-size:16px;
        color:#333333;
        letter-spacing:0;
        line-height:18px;
        text-align:left;
        float: left;
    }
    .cards-student-dec{
        margin-top: 4px;
        font-family:PingFangSC-Regular;
        font-size:14px;
        color:#9ca0b5;
        letter-spacing:0;
        line-height:16px;
        text-align:left;
        float: left;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
    }
    .cards-value{
        width: 100%;
        height: auto;
        margin: 0 auto;
    }
    .cards-value-title{
        width: 5.9rem;
        height: auto;
        margin: 0 auto;
        background:#ffffff;
        box-shadow:0 2px 8px 0 rgba(0,0,0,0.08);
        border-radius:8px;
        padding: 0.48rem;
        position: relative;
        z-index: 10;
    }
    .box-title4{
        margin-bottom: 0.32rem;
    }
    .course-value-tishi{
        font-family:PingFangSC-Regular;
        font-size:12px;
        color:#9ca0b5;
        letter-spacing:0;
        line-height:16px;
        text-align:center;
    }
    .on-cards-bg{
        margin-top: -129px;
        position: relative;
        z-index: 1;
    }
    .cards-notice{
        width: 100%;
        height: auto;
        margin: 0 auto;
        background:#521db3;
        padding-top: 0.52rem;
        padding-bottom: 96px;
    }
    .cards-notice-box{
        background:#ffffff;
        box-shadow:0 2px 8px 0 rgba(0,0,0,0.08);
        border-radius:24px;
        width:303px;
        height:220px;
        margin: 0 auto;
        position: relative;
    }
    .cards-notice-bg{
        border:1px solid #c69c6d;
        border-radius:16px;
        width:269px;
        height:158px;
        margin: 0 auto;
        position: absolute;
        top:0.48rem;
        left:0;right: 0;
        padding-top: 0.4rem;
    }
    .cards-buy-notice{
        position: absolute;
        left:0;right: 0;
        margin: 0 auto;
        top:-10px;
        background:#ffffff;
        width:99px;
        height:16px;
        font-family:NotoSansHans-Medium;
        font-size:16px;
        color:#c69c6d;
        letter-spacing:0;
        text-align:center;
    }
    .cards-notice-title{
        font-family:PingFangSC-Regular;
        font-size:12px;
        color:#666666;
        letter-spacing:0;
        line-height:16px;
        text-align:left;
        margin: 0 auto;
        width: 4.78rem;
        height: auto;
        margin-bottom: 0.16rem;
    }
    /*修改轮播*/
    .swiper-container {
        width: 100%;
        height: 290px;
        margin: 0 auto;
    }
    .swiper-slide {
        text-align: center;
        font-size: 18px;
        width: 5.92rem;
        height: 284px;
    }
    .swiper-container-horizontal>.swiper-scrollbar{
        background: #fff;
        margin: 0 auto;
        position: absolute;
        left:0;right: 0;
        width: 60%;
    }
    .swiper-scrollbar-drag{
        background:#0096ff;
    }
    /*课程列表*/
    .course-lists{
        background:#242522;
        box-shadow:0 2px 8px 0 rgba(0,0,0,0.50);
        border-radius:32px;
        width:6.22rem;
        height:471px;
        position: absolute;
        top:32px;right: 0;left: 0;
        margin: 0 auto;
        z-index: 120;
        overflow: hidden;
    }
    .course-lists-head{
        width: 100%;
        height: 56px;
        position: absolute;
        top:0;
        left:0;right: 0;
        margin: 0 auto;
    }
    .course-lists-main{
        width: 100%;
        height: 383px;
        position: absolute;
        top:56px;bottom: 32px;
        left:0;right: 0;
        margin: 0 auto;
        border-bottom: 1px solid #323232;
        overflow: scroll;
    }
    .course-list-time{
        font-family:NotoSansHans-Medium;
        font-size:16px;
        color:#ffffff;
        letter-spacing:0;
        line-height: 18px;
        text-align:left;
        float: left;
        margin-left: 0.64rem;
        margin-top: 24px;
    }
    .course-close{
        width: 20px;
        height: 20px;
        float: right;
        position: relative;
        margin-top: 24px;
        margin-right: 24px;
    }
    .course-close img{
        width: 20px;
        height: 20px;
        position: absolute;
        top:0;right: 0;bottom: 0;left: 0;
        margin: auto;
    }
    .course-list{
        width: 5.42rem;
        height: auto;
        margin: 0 auto;
        background:#272826;
        border-radius:12px;
        margin-bottom: 12px;
    }
    .course-list:after{
        content: " ";
        clear: both;
        display: block;
        visibility: hidden;
    }
    .course-list-head{
        width: 4.7rem;
        float: left;
        margin-top: 0.32rem;
        margin-left: 0.32rem;
        font-family:NotoSansHans-Medium;
        font-size:14px;
        color:#ffffff;
        letter-spacing:0;
        text-align:left;
        margin-bottom: 0.32rem;
    }
    .course-person-boxs{
        width: 4.7rem;
        height: auto;
        float: left;
        margin-left: 0.32rem;
    }
    .course-person-img{
        width: 18px;
        height: 18px;
        float: left;
        position: relative;
        border:1px solid #c69c6d;
        border-radius:4px;
        overflow: hidden;
    }
    .course-person-img img{
        width: 18px;
        height: 18px;
        position: absolute;
        top:0;right: 0;bottom: 0;left: 0;
        margin: auto;
        border-radius:4px;
    }
    .course-person-name{
        float: left;
        font-family:NotoSansHans-Regular;
        font-size:14px;
        color:#9ca0b5;
        letter-spacing:0;
        text-align:left;
        float: left;
        margin-left: 8px;
        line-height: 20px;
    }
    .course-person-book{
        width: 100%;
        float: left;
        font-family:NotoSansHans-Regular;
        font-size:14px;
        color:#c69c6d;
        letter-spacing:0;
        text-align:left;
        margin-top: 8px;
        margin-bottom: 16px;
    }
}