.container-design .bg-design{
    position: fixed; top: 0; right: 0; left: 0; z-index: -1; width: 100%; max-width: 10rem; margin: 0 auto;
}
.container-design .bg-design img{
    display: block; width: 100%; pointer-events: none
}
.container-design .head{
    box-sizing: border-box; height: 13.333333rem; padding-top: 8.88rem;
}
.container-design .head-tit img{
    display: block; width: auto; height: .973333rem; margin: 0 auto;
}
.container-design .head-cycle{
    margin-top: .4rem;
}
.container-design .head-cycle .num{
    position: relative; height: .8rem; padding: 0 .2rem; margin-left: .16rem; font-size: .48rem; font-weight: 700; line-height: .8rem; color: #010101; background-image: url('../images/bg-repeat.png'); background-repeat: no-repeat; background-position: -0.2rem 0; background-size: 4.8rem;
}
.container-design .head-cycle .num::before,
.container-design .head-cycle .num::after{
    position: absolute; content: ''; width: .16rem; height: .8rem; background: url('../images/bg-repeat.png') no-repeat; background-size: 4.8rem;
}
.container-design .head-cycle .num::before{
    left: -0.12rem; top: 0; background-position: left top;
}
.container-design .head-cycle .num::after{
    right: -0.12rem; bottom: 0; background-position: right top;
}
.container-design .head-cycle .txt{
    margin-left: .32rem; font-size: .64rem; font-weight: 100; line-height: .72rem; color: #fff;
}
.container-design .head-btn a{
    box-sizing: border-box; width: 3.066667rem; height: .96rem; margin: .6rem auto 0; font-size: .32rem; font-weight: 700; color: #fff; border: 1px solid #fff; border-radius: .96rem; transition: all 0.1s ease;
}
.container-design .head-btn a i{
    width: .413333rem; height: .186667rem; margin-left: .2rem; background-position: -0.48rem 0;
}
.container-design .head-btn a:active{
    background-color: #18d8b6; border-color: #18d8b6;
}

.container-design .content-intro{
    padding: .56rem 0;
}
.container-design .content-intro .intro-item{
    padding: .533333rem 0; margin: 0 .4rem; border-bottom: 1px solid #cdcdcd;
}
.container-design .content-intro .label{
    position: relative; z-index: 1; width: 1.813333rem; height: .613333rem; padding-top: 1.2rem; font-size: .293333rem; font-weight: 700; color: #fff; text-align: center; overflow: hidden;
}
.container-design .content-intro .label img{
    position: absolute; top: 0; left: 0; z-index: -1; width: 100%; height: 100%; pointer-events: none;
}
.container-design .content-intro .label .icon{
    position: absolute; bottom: .746667rem; left: 50%; z-index: 2; transform: translateX(-50%); -webkit-transform: translateX(-50%);
}
.container-design .content-intro .label .icon-1{
    width: .693333rem; height: .706667rem; background-position: 0 -0.96rem;
}
.container-design .content-intro .label .icon-2{
    width: .693333rem; height: .733333rem; background-position: -0.8rem -0.96rem;
}
.container-design .content-intro .label .icon-3{
    width: .76rem; height: .786667rem; background-position: 0 -1.76rem;
}
.container-design .content-intro .label .icon-4{
    width: .653333rem; height: .653333rem; background-position: -0.8rem -1.76rem;
}
.container-design .content-intro .list{
    padding-top: .106667rem; margin-left: .773333rem; font-size: .293333rem; line-height: .533333rem; color: #808080;
}
.container-design .content-intro .list i{
    width: .24rem; height: .24rem; margin: .146667rem .32rem 0 0; background-position: -0.32rem -0.48rem;
}
.container-design .content-intro .list strong{
    margin-left: .32rem; font-weight: 700;
}
.container-design .content-intro .list em{
    font-style: normal; font-weight: 700;
}

.container-design .content-course{
    padding-top: 1rem;
}
.container-design .content-course .content-head{
    padding: 0 .4rem;
}
.container-design .course-nav{
    margin-top: .52rem;
}
.container-design .course-nav .swiper-slide{
    position: relative; z-index: 1; display: flex; align-items: center; width: .4rem; height: .48rem; margin-left: .4rem;
}
.container-design .course-nav .swiper-slide:nth-child(n+2)::before{
    position: absolute; left: -0.4rem; z-index: -1; content: ''; width: .4rem; border-top: 1px dashed #cdcdcd;
}
.container-design .course-nav .swiper-slide:last-of-type{
    margin-right: .4rem;
}
.container-design .course-nav .swiper-slide .base{
    width: .4rem; height: .4rem; font-size: .24rem; color: #b2b2b2; background-color: #fff; border: 1px solid #b2b2b2; border-radius: 100%; overflow: hidden;
}
.container-design .course-nav .swiper-slide .show{
    width: 0; height: 100%; font-size: .266667rem; color: #18d8b6; background-color: #18d8b6; border-radius: .48rem; overflow: hidden;
}
.container-design .course-nav .swiper-slide-thumb-active{
    width: 2rem;
}
.container-design .course-nav .swiper-slide-thumb-active .base{
    display: none;
}
.container-design .course-nav .swiper-slide-thumb-active .show{
    width: 100%; color: #fff; transition: all 0.5s ease;
}
.container-design .course-con{
    position: relative; margin-top: .4rem; padding-bottom: 1rem;
}
.container-design .course-con .tips{
    position: absolute; top: 3.92rem; left: 8.4rem; z-index: 9; width: .426667rem; height: .506667rem; background-position: -1.6rem -1.92rem; animation-duration: 1.5s; animation-iteration-count: infinite;
}
.container-design .course-con .swiper-wrapper{
    align-items: stretch;
}
.container-design .course-con .swiper-slide{
    width: 7.8rem;height: auto; margin: 0 .4rem; padding-bottom: .56rem; background-color: #fff; border-radius: .12rem; box-shadow: 0 .24rem .4rem rgba(0, 0, 0, 0.08); overflow: hidden;
}
.container-design .course-con .cover{
    width: 100%; height: 4.533333rem; overflow: hidden;
}
.container-design .course-con .cover img{
    display: block; width: 100%; height: 100%; object-fit: cover;
}
.container-design .course-con .name{
    padding: 0 .52rem; margin-top: .44rem; font-size: .426667rem; font-weight: 700; line-height: .64rem; color: #333;
}
.container-design .course-con .name span{
    font-size: .293333rem;
}
.container-design .course-con .list{
    padding: 0 .533333rem; margin-top: .08rem;
}
.container-design .course-con .list .row{
    width: 100%; font-size: 0.35rem; line-height: .52rem; color: #808080;
}

.container-design .course-con .list .row .label{
    min-width: .48rem; margin-right: .12rem;
}


.container-design .content-teacher .content-head{
    padding: 0 .4rem;
}
.container-design .teacher{
    min-height: 9.6rem; margin-top: .48rem;
}
.container-design .teacher .swiper-slide{
    width: 4.32rem; height: 7.68rem; margin-left: .4rem; transition: all 0.2s 0.2s ease;
}
.container-design .teacher .swiper-slide a{
    display: block; width: 100%; height: 100%;
}
.container-design .teacher .swiper-slide .cover{
    width: 100%; height: 100%; overflow: hidden;
}
.container-design .teacher .swiper-slide .cover img{
    display: block; width: 100%; height: 100%; object-fit: cover;
}
.container-design .teacher .swiper-slide-active{
    width: 5.4rem; height: 9.6rem;
}
.container-design .teacher .swiper-button-left,
.container-design .teacher .swiper-button-right{
    position: absolute; top: 8.64rem; right: .4rem; z-index: 5; box-sizing: border-box; display: flex; justify-content: center; align-items: center; width: 1.32rem; height: .96rem; border: 1px solid #ccc; cursor: pointer; outline: none; overflow: hidden; transition: all 0.1s ease;
}
.container-design .teacher .swiper-button-left{
    right: 1.72rem; border-right: none;
}
.container-design .teacher .swiper-button-left span,
.container-design .teacher .swiper-button-right span{
    width: .413333rem; height: .186667rem; background: url('../images/sprites.png') no-repeat 0 0; background-size: 2.4rem;
}
.container-design .teacher .swiper-button-left span{
    transform: rotateY(-180deg);
}
.container-design .teacher .swiper-button-left:active,
.container-design .teacher .swiper-button-right:active{
    background-color: #18d8b6; border-color: #18d8b6;
}
.container-design .teacher .swiper-button-left:active span,
.container-design .teacher .swiper-button-right:active span{
    background-position: -0.48rem 0;
}

.container-design .content-cost{
    padding: 1rem .4rem 0;
}
.container-design .cost{
    margin-top: .533333rem;
}
.container-design .cost-tit{
    height: 2.933333rem; background-color: #18d8b6; border-top-left-radius: .12rem; border-top-right-radius: .12rem; box-shadow: 0 .24rem .24rem rgba(0, 0, 0, 0.02);
}
.container-design .cost-tit .label{
    box-sizing: border-box; width: 3.466667rem; height: 1.2rem; font-size: .64rem; font-weight: 700; color: #fff; border: 1px solid #fff; border-top-left-radius: .12rem; border-bottom-left-radius: .12rem;
}
.container-design .cost-tit .txt{
    width: 3.466667rem; height: 1.2rem; font-size: .853333rem; font-weight: 700; color: #18d8b6; background-color: #fff; border-top-right-radius: .12rem; border-bottom-right-radius: .12rem;
}
.container-design .cost-tit .txt i{
    margin: .36rem .08rem 0 0; font-family: 'SimHei'; font-size: .32rem; font-style: normal;
}
.container-design .cost .discount{
    padding: 0 .933333rem .84rem; border: 1px dashed #ccc; border-top: none; border-bottom-left-radius: .12rem; border-bottom-right-radius: .12rem;
}
.container-design .cost .discount .desc{
    padding: .48rem 0 .44rem; font-size: .266667rem; line-height: .44rem; color: #808080;
}
.container-design .cost .discount .desc strong{
    font-weight: 700;
}
.container-design .cost .type-tit{
    font-size: .266667rem; color: #808080;
}
.container-design .cost .type-list{
    margin-top: .48rem;
}
.container-design .cost .type-list .item{
    position: relative; z-index: 1; width: 2rem; height: .72rem; padding-top: 1.28rem; font-size: .293333rem; font-weight: 700; color: #fff; text-align: center; overflow: hidden;
}
.container-design .cost .type-list .item:nth-child(n+2){
    margin-left: .666667rem;
}
.container-design .cost .type-list .item img{
    position: absolute; top: 0; left: 0; z-index: -1; width: 100%; height: 100%; pointer-events: none;
}
.container-design .cost .type-list .item .icon{
    position: absolute; bottom: .92rem; left: 50%; z-index: 2; transform: translateX(-50%); -webkit-transform: translateX(-50%);
}
.container-design .cost .type-list .item .icon-1{
    width: .546667rem; height: .56rem; background-position: -1.6rem 0;
}
.container-design .cost .type-list .item .icon-2{
    width: .533333rem; height: .533333rem; background-position: -1.6rem -0.64rem;
}
.container-design .cost .type-list .item .icon-3{
    width: .493333rem; height: .56rem; background-position: -1.6rem -1.28rem;
}

.container-design .content-question{
    padding: 1rem .4rem .4rem;
}
.container-design .question{
    margin-top: .64rem;
}
.container-design .question .row{
    border-bottom: 1px solid #fff;
}
.container-design .question .q{
    position: relative; padding: .293333rem 1.066667rem .293333rem .533333rem; font-size: .32rem; font-weight: 700; line-height: .48rem; color: #18d8b6; background-color: #f7f7f7;
}
.container-design .question .q .label{
    font-size: .426667rem;
}
.container-design .question .q::after{
    position: absolute; top: 50%; right: .533333rem; content: ''; width: .28rem; height: .173333rem; margin-top: -0.08rem; background: url('../images/sprites.png') no-repeat -0.32rem -0.24rem; background-size: 2.4rem; transition: transform 0.5s ease;
}
.container-design .question .q.open::after{
    transform: rotate(-180deg);
}
.container-design .question .a{
    height: 0; overflow: hidden; transition: height 0.5s ease;
}
.container-design .question .a .box{
    padding: .24rem .533333rem .48rem; font-size: .32rem; line-height: .64rem; color: #808080;
}
.container-design .question .a .box .label{
    margin-top: .04rem; font-size: .426667rem; font-weight: 700; color: #404040;
}