{
    --main-border-color: #FFE1E8;
    --main-bg-color: #F81536;
    --main-text-color: #ff0042;
    --main-footer-color: #fed2dd;
    --main-shadow-color: rgba(248, 21, 54, 0.45);
}

.bg-292929{background-color: #292929;}
.bg-333{background-color: #333333;}
/*页面banner轮播图*/

    .carousel-inner {
        position: relative;
        width: 600px;
        overflow: hidden;
        left: 50%;
        margin-left: -300px;
    }

@media (min-width: 992px) {
    .carousel-inner {
        position: relative;
        width: 1920px;
        overflow: hidden;
        left: 50%;
        margin-left: -960px;
    }
}

/*顶部导航*/
.navbar-nav {
    flex-direction: row;
}
.navbar {
    padding: 0.5rem 0rem;
}
@media (min-width: 992px) {
    .navbar-expand-lg .navbar-nav .nav-link {
        padding-right: 1rem;
        padding-left: 1rem;
        font-size: 20px;
        font-weight: 400;
        line-height: 2.5;
    }
    .only-m{ display: none; }
}

.navbar-expand-lg  img{
    height: 32px;
}
.navbar-light .navbar-nav .active>.nav-link, .navbar-light .navbar-nav .nav-link.active, .navbar-light .navbar-nav .nav-link.show, .navbar-light .navbar-nav .show>.nav-link {
    /*color: rgba(0, 0, 0, .9);*/
    color: #ff0042;
    font-weight: 600;
}
.navbar-light .navbar-nav .nav-link:hover, .navbar-light .navbar-nav .nav-link:focus {
    color: #ff0042;
}
.logo-white{
    display: none;
}
@media (max-width: 575.98px) {
    .navbar-expand-lg .navbar-nav .nav-link {
        padding-right: 10px;
        padding-left: 10px;
        font-size: 12px;
        font-weight: 400;
        line-height: 2.5;
    }
    .navbar-light .navbar-nav .active > .nav-link, .navbar-light .navbar-nav .nav-link.active, .navbar-light .navbar-nav .nav-link.show, .navbar-light .navbar-nav .show > .nav-link {
        /* color: rgba(0, 0, 0, .9); */
        color: #ffffff;
        font-weight: 600;
        background-color: #ff0042;
    }
    .navbar {
        padding: 0.5rem 0rem 0rem 0rem;
    }
    .nav-link {
        display: block;
        padding: 0rem 1rem;
        margin-top: 10px;
        text-align: center;
    }
    .navbar-light .navbar-nav .nav-item {
        flex: 1 1 auto;
    }
    .navbar-light .navbar-brand {
        margin: auto;
    }
}

/*底部版权*/
.n-footer {
    position: relative;
    color: #fff;
    z-index: 999;
}
.n-footer .footer-main {
    padding: 30px 0 10px;
}
.n-footer .footer-main .title {
    font-size: 16px;
    color: #fff
}
.n-footer .footer-main .detail {
    margin-top: 20px
}
.n-footer .footer-main .detail .phone {
    margin: 0;
    padding-left: 40px;
    background: url('/static/home/img/zuoji.png') no-repeat left center;
    background-size: contain;
    font-size: 30px;
    line-height: 30px;
    color: #fff
}
.n-footer .footer-main .detail .phone-time {
    margin-top: 10px;
    font-size: 18px;
    color: #999
}

.n-footer .footer-main .detail ul {
    width: 100%;
    padding: 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
}
.n-footer .footer-main .detail ul li {
    margin: 0px 20px 10px 0px;
    list-style-type: none
}
.n-footer .footer-main .detail ul li a {
    font-size: 14px;
    color: #999;
    text-decoration: none
}
.n-footer .footer-main .detail ul li a:hover {
    color: #fff
}
.n-footer .footer-main .detail .qrcode {
    margin-bottom: 10px;
    width: 94px;
    height: 94px;
    display: block
}
.n-footer .footer-main .detail .qrcode-hint {
    padding: 0;
    font-size: 12px;
    color: #999;
    margin-bottom: 5px;
}
.n-footer .footer-other {
    background-color: #292929;
    line-height: 66px;
}
.n-footer .footer-other .secure-icons {
    /*margin-left: 20px;*/
    height: 32px;
    vertical-align: middle;
}
.n-footer .footer-other .copyright {
    text-decoration: none;
    margin-left: 10px;
    margin-right: 10px;
}
.n-footer .footer-other .detail {
    margin-top: 17px;
    display: inline-block;
    vertical-align: middle;
    text-align: end;
    font-size: 12px;
    color: #777;
    line-height: 16px;
    word-break: keep-all;
    white-space: nowrap;
}
.n-footer .footer-other .detail p{
    margin-bottom: 10px;
}
.n-footer .footer-other .detail a {
    color: #777;
    text-decoration: none;
    margin-left: 10px;
    margin-right: 10px;
}
.n-footer .footer-other .detail a:hover {
    color: #fff
}

@media (max-width: 575.98px) {
    .n-footer .footer-main .follow-us {
        display: none;
    }
    .n-footer .footer-main .contact-us {
        margin-bottom: 10px;
    }
    .n-footer .footer-other .secure-icons{
        display:none;
    }
    .n-footer .footer-other .detail{
        text-align: center;
        padding: 0px;
    }
    .only-pc{ display: none; }
}



/*内容模块*/
.content_box{
    box-sizing: border-box;
    box-shadow: 0 0 10px 2px #eee;
    border-radius: 6px;
    overflow: hidden;
    transition: all .3s linear;
    -webkit-transition: all .3s linear;
    -moz-transition: all .3s linear;
    -o-transition: all .3s linear;
    -ms-transition: all .3s linear;
    padding: 20px 20px;
}

@media (max-width: 575.98px) {
    .content_box{
        padding: 20px 10px;
    }
}

.breadcrumb {
    background-color: #ffffff;
    padding-left:0px;
    color: #666;
    font-size: 18px;
    margin: 3px 0px;
}
.breadcrumb a {
    color: #666;
    cursor: pointer;
    text-decoration: none;
}
.breadcrumb a:hover {
    color: #e90c2f;
}
.breadcrumb .first_item{position: relative;padding-left: 15px;}
.breadcrumb .first_item:before {
    background: #e90c2f;
    content: "";
    display: block;
    height: 20px;
    left: 0px;
    position: absolute;
    top: 4px;
    width: 5px;
}


.secondly {
    background-color: #fff;
    border-radius: 3px;
    box-shadow: 0 0 14px 1px hsla(0, 0%, 78%, .21);
}

.secondly-title {
    color: #262626;
    font-size: 24px;
    height: 23px;
    line-height: 23px;
    margin-left: 14px;
    position: relative;
    margin-bottom: 10px;
}

.secondly-title:before {
    background: #e90c2f;
    content: "";
    display: block;
    height: 23px;
    left: -14px;
    position: absolute;
    top: 0;
    width: 4px;
}

/*新闻资讯*/

.list-content  {
    padding: 0px;
    margin-bottom: 0px;
}

.list-content .reading-item {
    border-bottom: 1px solid #e3e3e3;
    list-style: none;
    padding: 10px 0
}
.list-content .reading-item:last-child {
    border-bottom: none
}
.list-content .reading-item .reading-item-link {
    /*display: block;*/
    text-decoration: none
}
.list-content .reading-item .item-img {
    display: inline-block;
    vertical-align: top;
    width:100%;
    height: 100%;
}
.list-content .reading-item  .item-info {
    display: inline-block;
    position: relative;
    vertical-align: top;
    padding-left: 10px;
}
.list-content .reading-item  .name {
    color: #262626;
    font-size: 18px;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.list-content .reading-item .title {
    color: #262626;
    font-size: 18px;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
}
.list-content .reading-item  .description {
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    box-orient: vertical;
    color: #999;
    display: -webkit-box;
    font-size: 14px;
    height: 44px;
    margin-top: 10px;
    margin-bottom: 0px;
    overflow: hidden;
    text-overflow: ellipsis
}
.list-content .reading-item  .time {
    bottom: 0;
    color: #a7a7a7;
    font-size: 16px;
    left: 10px;
    position: absolute;
}
.list-content .reading-item .tags {
    color: #262626;
    font-size: 14px;
    margin-top: 30px;
    text-align: right;
    bottom: 0;
    right: 10px;
    position: absolute;
}
.list-content .reading-item .tags .tag {
    background-color: #eee;
    border-radius: 16px;
    color: #888;
    cursor: pointer;
    display: inline-block;
    margin-left: 8px;
    padding: 0 10px;
    text-decoration: none;
    vertical-align: middle
}


.news-content .news-title {
    color: #262626;
    font-size: 24px;
    font-weight: 700;
    word-break: break-word;
}
.news-content .news-info {
    color: #999;
    font-size: 16px;
    padding-top: 10px;
}
.news-content .news-info .time {
    background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAcCAYAAAByDd+UAAACLUlEQVRIS73WR6sUURAF4O+ZMYAKgi5MYARzwIALFVcuDLgQf6TocyEIoi5EFMwKPgMYwQQiGDArBXVlnJnunhadu2umpk6FU6dqRPObigWYi5mYjHH4gc94ixd4go9N7kZqDKZjDeYnQJj+TJDvGJ/gxUcE8BS38K7KbxXgcqxNp1/xEM/wBvFd3kTMzqAWYhIimBu42w+0GzC+t2BxluwebneBVAUf4KuwLCsSQV7Kqvz+Tzfg1gT7hPN43dSTPr/PwQ5Mycpc7LTpBIwybkCAna7pw6wkSvSz6s3AngS92lneAhgE2Yv4PlOT2SJswxVEueteZLo7S3oS78O4AG5HNP0Ortd4if5sTCZGb5veOqzEY1wogDFn+/ANow0EaQsYRNqPCTgRcxoZrsB63MflhpDbAoa7TViKaxgLwJ2Yl717+R8AQ6F24TnOBeCBZNPRAebtbzKMsh5K9o8G4GF8wbEmBuRQtyFNcXkwVeh4AB7Bh2xqE2bJMEr/qsI4BP1Bl8IEKacFKdtmuASbm6LCqdTdvhm26WFsiNDZWE9VL9rzqOPHnh4Wlp7NvTZAAq1MeljaZg5bIaVxzxy2UZq2gH2VJpwULR1LRWjruMo+FCwq+IeWhvGg26JNILXbIhyVGWvah4OANu7D4mSoG7+sq6HeNCXT7qstBjlOwH9+tXX2J4i0Oo/goiyD3KU3yznRr9l1h3CxH9rlXRVgHLuhqXHwhm7WXW89Pn4ByhOlNxwydAMAAAAASUVORK5CYII=") no-repeat 0;
    background-size: 14px 14px;
    display: inline-block;
    padding-left: 20px;
    vertical-align: middle
}
.news-content .news-info .view-count {
    background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAcCAYAAAByDd+UAAAE8klEQVRIS62WXWxURRTH/2fuXbtWWhEwVKjBWMtXINpIYsQXfZAgQgyi696ZpUsLkUACJj7gB4QsCiQkJCYN0WzSgvtxZ5dttERI0Cc16hNIRFRURBBEECiQrFbq7t5jZrNLlrbbFul5271z5jdz5n/+M4RRRCQSuaOpqWmWEGICgKu9vb3H169f3z+K1EFDaLikWCw20efzbQLQCsDAisHM1wC4hULhrdbW1ou3Aq4KTKfTczzPOwigEcC/AA4z8xkiMr/nAfADuMDMi5VSX48WOiRQaz0ZwBEAU5h5P4B1SqnfypNmMpmpuVzuHSJ6EcAlInrU87y/iKgHwLe5XG5XOBz+eahFVAN2AWgnom7LspxAIFAYmMzMlEql9gAIA8hIKV/SWq8D0AHgHwBrpJSxgXmDgK7r3kNE5wAUrl+//mB7e/ulauWKRqN319XVnWLmcZ7nTaupqbmWz+cjAF4FYOZeLKX8uDJ/EDCZTC4QQnwCYJ+UculIZ6O1TgJQzLxMKfWhGe+67stEFAVwvKenZ253d/eNCg0FDAsh3mfmDqXUKyMBk8nkViHERmZeq5R6r6Ri0lr/QEQzmblFKfVNeZ6hgIuFEEYoKSmlHAnoum4nEa1kZkcplS6P11rvBtBWuXPzbRAwkUjcZ1nWGdPg2Wz2gdWrV/dVg3Z0dNRMmjTpF2aeAqBZKfVreazruvuI6DkhxKJgMGjaqxjVVHoAwLNEtMNxnNerAbXWmwFsAfCZlPKpirZpyOfzJwD4crnc1HA43DssMJlMziaiQ0R0J4Dtly9ffrvSyqLRqK++vv41z/O2EFGuUCjMX758uelbdHZ2Tqitrf0AwJMAdkspVw6r0oqSLCKivQDGMfPvAMyu/yCiBmY2u59GRH3M3CqlNACkUqn5zLwPwL1mLDPPUUpdHRGYyWSsQqGw1PO8rUQ0YxjhnCSizZZl7TXmEI/Hl9i2nSnZnkn7lIjaHcc5XbWkWuuZphQAHi8N+hPA58z8ExFdYebxAGYQkSlZQ6kNjjDzilAodCyTyUzI5/PPAzBn38TMFy3LWhAMBo8OEk0ikVhoVgugHsB3ACK2be8PBALGvG8Kc461tbXPWJZlnKWFmfuEECHHcYyfIh6P32Xbtml+BeBcf3//vLa2tgs3VJpIJJ62LOsjADUAdtq2vWko0EBwJBKxm5ubNxPRRmOHAJZJKU0fIxKJiOnTp5sNvMDMe5VSwSIwFotN9fl8xg0mMvMGpdTOkRp+4PdkMrlWCLELQLbkLsWeNN4M4AQRjfc8r6UIdF03RURBw5ZSrrhVWIWy3yWiNcx8QCm1pPy/1no7gDeYeTvF4/FZtm0fM87S19c3Y9WqVVf+L7Crq6vO7/cbcU0mosccxzls5kokEvMty/oKwBfGZHcA2OB53rZQKGSeE7cVruu+SUTbmHmXUsrcjygp17jNSQM0cp3red7DRta3RQOQTqebPM8zt/0pKeVDpqdN++TzeWMeZ8l13b+JKO84zngi4tsFmnyt9QXz6LJtuyGbzfr9fv9ZIhJFoNbaQI5LKWePBawEPGQeWoVCobmxsfH0+fPnv2dmHzMfLAOPSikfGSug67pfEtETAGZJKX+snLcMNCXYQzTsM3VU62EunkoIwP3VgMYdTH3HOti27aZAIHBq4A4XApg21jQhxLlgMGiutJviPz3uKHMeOQwtAAAAAElFTkSuQmCC") no-repeat 0;
    background-size: 14px 14px;
    display: inline-block;
    margin-left: 20px;
    padding-left: 20px;
    vertical-align: middle
}
.news-content .news-detail {
    margin-top: 30px
}
.news-content .news-detail, .news-content .news-detail *, .news-content .news-detail p {
    word-wrap: break-word;
    color: #444;
    font-size: 16px;
    line-height: 32px;
    text-align: justify;
    word-break: break-all
}
.news-content .news-detail p {
    margin-bottom: 20px
}
.news-content .news-detail img {
    max-width: 100%
}
.news-content .tags {
    color: #262626;
    font-size: 16px;
    margin-top: 30px;
    text-align: right
}
.news-content .tags .tag {
    background-color: #eee;
    border-radius: 16px;
    color: #888;
    cursor: pointer;
    display: inline-block;
    margin-left: 8px;
    padding: 0 10px;
    text-decoration: none;
    vertical-align: middle
}

.tag-wrapper {
    display: flex;
    justify-content: end;
}
.tag-wrapper .tag {
    background-color: #b6b6b6;
    border-radius: 5px;
    color: #fff;
    cursor: pointer;
    display: inline-block;
    font-size: 16px;
    height: 26px;
    line-height: 26px;
    margin-right: 12px;
    text-align: center;
    text-decoration: none;
    padding: 0px 12px;
}
.tag-wrapper .tag.active {
    background-color: #e90c2f;
}

@media (max-width: 575.98px) {
    .tag-wrapper .tag {
        font-size: 14px;
        height: 22px;
        line-height: 22px;
        margin-right: 6px;
        padding: 0px 6px;
    }
}

.pagination {
    margin-top: 20px;
    text-align: center;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
    justify-content: center;
}
.pagination .operation {
    border: 1px solid #b6b6b6;
    color: #999;
    cursor: pointer;
    display: inline-block;
    font-size: 16px;
    line-height: 1.25;
    margin-right: 5px;
    margin-left: 5px;
    padding: 0.5rem 0.75rem;;
    text-decoration: none;
    vertical-align: middle
}
.pagination .operation.current {
    background-color: #e90c2f;
    border: 1px solid #e90c2f;
    color: #fff
}
.pagination .dot {
    font-size: 14px;
    line-height: 22px;
    border: 0px;
    vertical-align: middle
}


.course-content .list-content {
    *zoom: 1
}
.course-content .list-content:after, .course-content .list-content:before {
    content: "";
    display: table;
    line-height: 0
}
.course-content .list-content:after {
    clear: both
}
.course-content .list-content .course-item {
    margin-top: 20px;
    box-shadow: 6px 6px 6px 0 #eee;
}
.course-content .list-content .course-item .course-item-core {
    margin: 0 auto;
}
.course-content .list-content .course-item .course-item-core .main-img {
    border-radius: 10px;
    display: block;
    position: relative;
    padding-top: 15px;
}

.course-content .list-content .course-item .course-item-core .main-img img {
    width: 100%;
}
.course-content .list-content .course-item .course-item-core .main-img .appoint-number {
    background: rgba(51, 51, 51, .36);
    border-radius: 10px 0 10px 0;
    bottom: 0;
    color: #fff;
    font-size: 12px;
    height: 32px;
    line-height: 32px;
    position: absolute;
    right: 0;
    text-align: center;
    width: 111px
}
.course-content .list-content .course-item .course-item-core .course-title {
    margin-top: 0px;
    overflow: hidden;
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.course-content .list-content .course-item .course-item-core .course-title a {
    color: #333;
    cursor: pointer;
    font-size: 18px;
    font-weight: 700;
    line-height: 19px;
    text-decoration: none;
}



@media (max-width: 575.98px) {
    .course-content .list-content .course-item .course-item-core .main-img {
        padding-left: 0px;
        padding-right: 0px;
    }
    .course-content .list-content .course-item .course-item-core .course-title a {
        color: #333;
        cursor: pointer;
        font-size: 16px;
        font-weight: 700;
        line-height: 19px;
        text-decoration: none;
    }


}
.course-content .list-content .course-item .course-item-core .course-tag {
    margin-top: 10px
}
.course-content .list-content .course-item .course-item-core .course-tag .tag {
    background-color: #eee;
    border-radius: 3px;
    color: #333;
    font-size: 14px;
    margin-left: 10px;
    overflow: hidden;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin: 0px 5px;
    padding: 0px 10px;
}
.course-content .list-content .course-item .course-item-core .course-tag .tag:first-child {
    margin-left: 0
}
.course-content .list-content .course-item .course-item-core .bottom {
    *zoom: 1;
    margin-top: 10px;
    margin-bottom: 10px;
}
.course-content .list-content .course-item .course-item-core .bottom:after, .course-content .list-content .course-item .course-item-core .bottom:before {
    content: "";
    display: table;
    line-height: 0
}
.course-content .list-content .course-item .course-item-core .bottom:after {
    clear: both
}
.course-content .list-content .course-item .course-item-core .bottom .btn-appoint {
    background: #e90c2f;
    border: none;
    border-radius: 5px;
    color: #fff;
    cursor: pointer;
    float: right;
    font-size: 16px;
    height: 30px;
    line-height: 30px;
    outline: none;
    text-align: center;
    text-decoration: none;
    width: 110px
}


.course-intro-detail img {
    max-width: 100%;
}

.course-intro-detail .container {
    margin: 20px 0px 10px 0px;
    box-shadow: 0 0.78vw 0.78125vw 0 rgba(255, 159, 181, .45);
}

@media (min-width: 768px) {
    .dl-horizontal dt {
        float: left;
        width: 120px;
        clear: left;
        text-align: right;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        text-align: left ;
    }
}

@media (min-width: 768px) {
    .dl-horizontal dd {
        margin-left: 130px;
    }
}

@media (max-width: 768px) {
    .dl-horizontal dt {
        text-align: left ;
    }
}
.course-intro-detail .container dl {
    padding: 5px 0px;
    margin-top: 0;
    font-size: 14px;
    margin-bottom: 0px;
}

.course-intro-detail .container dt {
    font-weight: 700;
    font-size: 16px !important;;
    color: #ff0042 !important;
    text-align: right ;
}

.course-intro-detail .container dd {
    font-size: 14px !important;
    /*margin-left: 20px;*/
}

.course-intro-detail .container dd, dt {
    line-height: 1.42857143 !important;
}

.course-intro-detail .list-unstyled {
    padding-left: 0;
    list-style: none;
}

.course-intro-detail .container ul {
    margin: 0px;
}

.course-intro-detail .container ul li {
    border-bottom: 1px #FFE1E8 DASHED;
    padding-bottom: 5px;
    margin-bottom: 5px;
}


.course-intro-detail .container dl:nth-child(odd) { /* 奇数行背景色 */
    background-color: #ffffff;
    /*background-color: #ffe4d9;*/
}

.course-intro-detail .container dl:nth-child(even) { /* 偶数行背景色 */
    background-color: #FFE1E8;
}



.course-info .course-name {
    font-size: 28px;
    font-weight: 600;
    line-height: 38px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.course-info .course-tags {
    *zoom: 1;
    margin-top: 20px
}

.course-info .course-tags:after,  .course-info .course-tags:before {
    content: "";
    display: table;
    line-height: 0
}

.course-info .course-tags:after {
    clear: both
}

.course-info .course-tags .tag {
    background: #eee;
    border-radius: 3px;
    color: #333;
    float: left;
    font-size: 14px;
    height: 20px;
    line-height: 20px;
    margin-left: 8px;
    text-align: center;
    padding: 0px 10px;
    margin-bottom: 10px;
}

.course-info .course-tags .tag:first-child {
    /*margin-left: 0*/
}

.course-info .course-detail {
    margin-top: 20px;
    padding-left: 0px;
}

.course-info .course-detail li {
    color: #262626;
    font-size: 16px;
    list-style: none;
    margin-top: 8px
}

.course-info .course-detail li .text1 {
    font-weight: 700
}

.course-info .course-detail li:first-child {
    margin-top: 0
}

.course-info .free-try {
    color: #e90c2f;
    font-size: 24px;
    font-weight: 600;
    line-height: 38px;
    margin-top: 28px
}

/*===================*/
.animated {
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}
#reservation-mixin-0 {
    float: right;
    width: 300px;
    margin: 0px 50px 100px 0;
    height: 306px;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
}
@media (max-width: 992px) {
    #reservation-mixin-0 {display: none;}
}
#reservation-mixin-0 .l1 {
    margin-top: 35px;
    font-size: 24px;
    color: #323232;
    text-align: center;
    line-height: 30px;
    font-weight: 700;
}
#reservation-mixin-0 .l1 .red {
    color: #e32d34
}
#reservation-mixin-0 .l2 {
    font-size: 24px;
    color: #323232;
    text-align: center;
    line-height: 30px;
    font-weight: 700;
}
#reservation-mixin-0 .l2 .red {
    color: #e32d34;
}
#reservation-mixin-0 #mixinAppointForm0 {
    margin-top: 24px
}
#reservation-mixin-0 #mixinAppointForm0 .input-wrapper {
    position: relative;
    margin: 0 auto;
    width: 241px;
    height: 45px;
    border-radius: 23px;
    background-color: #eee;
    line-height: 45px
}
#reservation-mixin-0 #mixinAppointForm0 .input-wrapper .area-selector .opt-mask {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 0
}
#reservation-mixin-0 #mixinAppointForm0 .input-wrapper .area-selector .opt-wrapper {
    display: none;
    position: absolute;
    left: 0;
    top: 50px;
    padding: 10px 6px;
    width: 241px;
    box-sizing: border-box;
    z-index: 20;
    background: #fff;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
    border-radius: 12px
}
#reservation-mixin-0 #mixinAppointForm0 .input-wrapper .area-selector .area-optgroup {
    width: 100%;
    max-height: 256px;
    overflow-y: scroll;
    scrollbar-width: thin;
    scrollbar-color: #d9d9d9 transparent
}
#reservation-mixin-0 #mixinAppointForm0 .input-wrapper .area-selector .area-optgroup::-webkit-scrollbar {
    width: 3px;
    height: 24px
}
#reservation-mixin-0 #mixinAppointForm0 .input-wrapper .area-selector .area-optgroup::-webkit-scrollbar-thumb {
    background-color: #d9d9d9
}
#reservation-mixin-0 #mixinAppointForm0 .input-wrapper .area-selector .area-optgroup::-webkit-scrollbar-track {
    background-color: transparent
}
#reservation-mixin-0 #mixinAppointForm0 .input-wrapper .area-selector .area-optgroup .area-opt {
    padding-left: 10px;
    height: 28px;
    font-size: 13px;
    line-height: 28px;
    color: #333;
    cursor: pointer
}
#reservation-mixin-0 #mixinAppointForm0 .input-wrapper .area-selector .area-optgroup .area-opt:hover {
    background-color: rgba(243, 39, 53, .08);
    color: #f81536
}
#reservation-mixin-0 #mixinAppointForm0 .input-wrapper .dash {
    position: absolute;
    left: 72px;
    font-size: 16px;
    line-height: 45px;
    color: #ddd
}
#reservation-mixin-0 #mixinAppointForm0 .input-wrapper .ui-input {
    padding: 10px 0;
    width: 100%;
    height: 45px;
    box-sizing: border-box;
    border: 0;
    outline: 0;
    font-size: 14px;
    color: #333;
    line-height: 30px;
    background-color: transparent
}
#reservation-mixin-0 #mixinAppointForm0 .input-wrapper .ui-input:-ms-input-placeholder {
    font-size: 14px;
    color: #999
}
#reservation-mixin-0 #mixinAppointForm0 .input-wrapper .ui-input::-webkit-input-placeholder {
    font-size: 14px;
    color: #999
}
#reservation-mixin-0 #mixinAppointForm0 .input-wrapper .ui-input::-moz-placeholder {
    font-size: 14px;
    color: #999
}
#reservation-mixin-0 #mixinAppointForm0 .input-wrapper .ui-input::placeholder {
    font-size: 14px;
    color: #999
}
#reservation-mixin-0 #mixinAppointForm0 .input-wrapper .ui-input.areacode {
    position: absolute;
    left: 16px;
    width: 50px;
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAMCAYAAABm+U3GAAABHklEQVQ4T6WSXU6DQBSFzwXDCtRVWNeg1i34aELCMIm6ICtDyquL8GcV6hakG/ABwjEXCxlpIW16n4BJPr6554i19ofk0jn3gMNHrLULALf6UAI4Jblwzt0dwJY0TZ2IJAC+FTwj+SoiJ2v4PQDu+QPlZABMCxWZiwKMMeci8qJwAI9ZluladoWLMSYLgkChJcm5c+6jBeuoOYA3AMd7wANr7dPadFVV1WVRFJ/K68H6kiTJWRiG7zvC/euvmqa5yPP8qxP9B9aPcRzPoihqzSd2PgndMPbXMgjUb0ufPsmyruur7vp+4BvG3aEfqGcOv1IkrzWobQ0aBW9rC8kjEUm1UlPQ0VX4BoMq6lFfqamuTxoPqvjMv7nx0x+D/wKZJK2tJyLVIwAAAABJRU5ErkJggg==');
    background-position: center right;
    background-repeat: no-repeat;
    background-size: auto 6px
}
#reservation-mixin-0 #mixinAppointForm0 .input-wrapper .ui-input.mobile {
    padding-left: 82px
}
#reservation-mixin-0 #mixinAppointForm0 .btn-wrapper {
    margin-top: 15px;
    text-align: center
}
#reservation-mixin-0 #mixinAppointForm0 .btn-wrapper .btn-reserve {
    width: 241px;
    height: 45px;
    background: #e32d34;
    border: 0;
    outline: 0;
    border-radius: 23px;
    font-size: 18px;
    color: #fff;
    line-height: 45px;
    text-align: center;
    cursor: pointer
}
#reservation-mixin-0 #mixinAppointForm0 .btn-wrapper .protocol-agreement {
    margin-top: 20px;
    line-height: 14px;
    color: #333;
    white-space: nowrap;
    word-break: keep-all
}
#reservation-mixin-0 #mixinAppointForm0 .btn-wrapper .protocol-agreement .btn-check {
    padding-left: 15px;
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAAnUlEQVQ4T2NsaGhg0dLSCv7//78FIyMjFwMZ4P///98YGRlPXLt2bS3jqlWrwhkYGJzIMAebln2MK1eu7Ie6rCMsLOw+OQavWrVKkYGBoQLs0lWrVs0EGRIWFpZOjmEwPTBzRg0kPxRHw3A0HZKReoZQslmxYsUEJiYmTgYGBqoVX9QtYGFVwL9//yyhLiU5Sv79+/ediYnpOKgKAAAtNJUdXzwNbwAAAABJRU5ErkJggg==');
    background-position: left center;
    background-repeat: no-repeat;
    background-size: 10px 10px;
    user-select: none;
    cursor: pointer
}
#reservation-mixin-0 #mixinAppointForm0 .btn-wrapper .protocol-agreement .btn-check.checked {
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAABfUlEQVQ4T7XVu07CUBgH8P/XewxETMAFJ2dXJ+A9nFQCq24OOLk7iQ8gGl1MJFGeARN0ERdGQbwsSjURYiv0mJMWtVIuafXMp7/z3U4PbR0zxZDa2wRaBhCBn0XQmYXDt/uHDcoVOzsEtu7H+f0NA+Vps9jWfUc2GMULB1mQ6KYUwLKA966tBAKjIUI2paHZ6uGoYgYD+5gqAYVzA41nyz8YCxEyKQ2KBOz/wFwpz0cFqDJQe7RPGrZiYUI2qUH2wFzg0qKChbiI0ysTl/Wep+fCygYarcHDv5qiyUA6oSIeEXBW/cDFjdM2h54N22nKIlAoG7j1wAa6/I2KKFVNVByUY7ybkmA3YBjmOTaaBKSTPFIRpWsT9aceMkkNooM1h0TWr5HnHHJ0NaFibkaE0bXnnqfZ1Ec3bORg8/niNY2FBeyVDdxNgI29KTxNDnfsSzDRCnT1vE74F/Bvf1+5k3aeCGsTFWjMJsawS/0nAAwrRDTtB2aMvQJ0wJ+ATwaWuNL+FOGUAAAAAElFTkSuQmCC')
}
#reservation-mixin-0 #mixinAppointForm0 .btn-wrapper .protocol-agreement p {
    margin: 3px 0
}
#reservation-mixin-0 #mixinAppointForm0 .btn-wrapper .protocol-agreement p a {
    color: #08c
}
#reservation-mixin-0 #mixinAppointForm0 .btn-wrapper .protocol-agreement p a:visited {
    color: #08c
}

/*===================*/

.section-wrapper {
    overflow: hidden;
    padding: 60px 0;
}
@media (min-width: 992px) {
    .section-wrapper .layout {
        padding: 90px 0;
        width: 1100px !important
    }
}
.section-wrapper .section-title {
    text-align: center;
    font-size: 28px;
    line-height: 76px;
    font-weight: 500;
    color: #333;
    opacity: .1
}
.section-wrapper .section-title.animated {
    -moz-animation: fadeInUp .5s linear;
    -webkit-animation: fadeInUp .5s linear;
    animation: fadeInUp .5s linear;
    -ms-animation: fadeInUp .5s linear;
    -o-animation: fadeInUp .5s linear;
    animation-fill-mode: forwards
}
.section-wrapper .section-subtitle {
    text-align: center;
    font-size: 20px;
    line-height: 28px;
    font-weight: 500;
    color: #666;
    opacity: .1;
    margin-bottom: 70px;
    margin-top: 16px
}
.section-wrapper .section-subtitle.animated {
    -moz-animation: fadeInUp .5s linear;
    -webkit-animation: fadeInUp .5s linear;
    animation: fadeInUp .5s linear;
    -ms-animation: fadeInUp .5s linear;
    -o-animation: fadeInUp .5s linear;
    animation-fill-mode: forwards
}
.section-wrapper .item-title {
    font-size: 20px;
    font-weight: 500;
    line-height: 32px;
    color: #333;
    text-align: center;
}
.section-wrapper .item-desc {
    font-size: 16px;
    line-height: 24px;
    color: #999;
    text-align: center;
    margin-bottom: 0px;
}
.section-wrapper .btn-wrapper {
    width: 100%;
    margin: 40px auto 20px;
    text-align: center
}
.section-wrapper .btn-wrapper .btn {
    background-color: #e90c2f;
    font-size: 22px;
    line-height: 30px;
    padding: 10px 30px;
    color: #fff;
    text-align: center;
    border-radius: 30px;
    /*width: 240px;*/
    margin: 0 auto;
    cursor: pointer;
    transition: all .3s ease;
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -o-transition: all .3s ease;
    -ms-transition: all .3s ease
}
.section-wrapper .btn-wrapper .btn:hover {
    box-shadow: 0 0 10px 2px #fac2ba;
    transform: scale(1.1);
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -o-transform: scale(1.1);
    -ms-transform: scale(1.1)
}
/*===================*/

.course-wrapper .course-box {
    height: auto;
    padding: 0 10px;
}
.course-wrapper .course-box .course-item {
    float: left;
    width: 100%;
    margin: 10px  0;
    height: auto;

    box-sizing: border-box;
    box-shadow: 0 0 10px 2px #eee;
    border-radius: 6px;
    overflow: hidden;
    transition: all .3s linear;
    -webkit-transition: all .3s linear;
    -moz-transition: all .3s linear;
    -o-transition: all .3s linear;
    -ms-transition: all .3s linear;
    transform: translate(0, 200px);
    -webkit-transform: translate(0, 200px);
    -moz-transform: translate(0, 200px);
    -o-transform: translate(0, 200px);
    -ms-transform: translate(0, 200px);
    opacity: .2;
    position: relative
}
.course-wrapper .course-box .course-item .item-info {
    float: left;
    width: 50%;
    padding: 10px 5px 0px 5px;
}
.course-wrapper .course-box .course-item .item-info:nth-of-type(odd) {
    /*float: right;*/
}

.course-wrapper .course-box .course-item .item-info .item-title {
    font-size: 18px;
    font-weight: 500;
    line-height: 26px;
    color: #333;
    text-align: center;
}

.course-wrapper .course-box .course-item .img-box {
    float: left;
    width: 50%;
    height: auto;
    overflow: hidden;
    margin-bottom: 0px;
}
.course-wrapper .course-box .course-item:nth-of-type(odd) .img-box {
    float: right;
}
.course-wrapper .course-box .course-item .img-box img {
    width: 100%;
    height: auto;
    transition: all .3s linear;
    -webkit-transition: all .3s linear;
    -moz-transition: all .3s linear;
    -o-transition: all .3s linear;
    -ms-transition: all .3s linear
}
.course-wrapper .course-box .course-item .desc-new {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    box-sizing: border-box;
    display: none;
    border-radius: 6px;
    background: #f81536;
    padding: 76px 30px
}
.course-wrapper .course-box .course-item .desc-new .item-title {
    text-align: left;
    color: #fff;
    margin-bottom: 30px
}
.course-wrapper .course-box .course-item .desc-new .item-desc {
    text-align: left;
    color: #fff;
    line-height: 28px;
    margin-bottom: 0px;
}
.course-wrapper .course-box .course-item:hover .img-box img {
    transform: scale(1.1);
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -o-transform: scale(1.1);
    -ms-transform: scale(1.1)
}
.course-wrapper .course-box .course-item:hover .desc-new {
    display: block;
    opacity: 1;
    filter: alpha(opacity=100)
}
.course-wrapper .course-box .course-item:nth-child(3n) {
    margin-right: 0
}
.course-wrapper .course-box .course-item.animated {
    transform: translate(0);
    -webkit-transform: translate(0);
    -moz-transform: translate(0);
    -o-transform: translate(0);
    -ms-transform: translate(0);
    opacity: 1
}

@media (min-width: 992px) {
.course-wrapper .course-box {
    height: 680px;
    padding: 0;
}
.course-wrapper .course-box .course-item {
    float: left;
    width: 340px;
    margin: 40px 40px 0 0;
    height: 300px;
}

    .course-wrapper .course-box .course-item .item-info {
        float: left;
        width: 100%;
        padding: 5px;
    }
    .course-wrapper .course-box .course-item .item-info .item-title {
        font-size: 20px;
        font-weight: 500;
        line-height: 32px;
    }
    .course-wrapper .course-box .course-item .img-box {
        float: left;
        width: 100%;
        height: 200px;
        overflow: hidden;
        margin-bottom: 20px
    }

}



/*===================*/

.online-wrapper .bg-content {
   /* background: url(/static/home/img/teachericon.png) no-repeat center bottom;
    background-size: 70%;
    height: 450px;*/
}
.online-wrapper .bg-content .tag-wrapper .tag-box {
    /*width: 230px;*/
    width: 100%;
    height: 110px;
    position: relative;
    padding: 18px 0 0 65px;
    box-sizing: border-box;
    margin-top: 20px;
    transition: all .6s linear;
    -webkit-transition: all .6s linear;
    -moz-transition: all .6s linear;
    -o-transition: all .6s linear;
    -ms-transition: all .6s linear;
    opacity: .2;
}

.online-wrapper .bg-content .tag-wrapper.left-wrapper .tag-box {
    padding: 18px 1px 0 12px;
}
.online-wrapper .bg-content .tag-wrapper .tag-box .tag-icon {
    position: absolute;
    /*left: 12px;*/
    right: 18px;
    top: 50%;
    margin-top: -25px;
    width: 50px;
    height: 50px;
    background: url(/static/home/ck/icons.png) no-repeat center top;
    background-size: cover;
}
.online-wrapper .bg-content .tag-wrapper .tag-box .item-title {
    text-align: left;
    margin-bottom: 5px;
    font-size: 18px;
    line-height: 20px;
}
.online-wrapper .bg-content .tag-wrapper .tag-box p {
    line-height: 24px;
    font-size: 14px;
    color: #999;
}
.online-wrapper .bg-content .tag-wrapper .tag-box p.tag {
    color: #e90c2f;
    line-height: 24px;
    background: transparent;
    padding: 0px;
    margin-bottom: 5px;
}
.online-wrapper .bg-content .tag-wrapper.left-wrapper {
    float: left;
    padding-left: 0px;
    display: block;
    margin-top: 0px;
    width: 50%;
}
.online-wrapper .bg-content .tag-wrapper.left-wrapper .tag-box {
    background: url(/static/home/ck/shape-icon-bg.png) no-repeat -45px center;
    background-size: cover;
    transform: translate(-100px, 0);
    -webkit-transform: translate(-100px, 0);
    -moz-transform: translate(-100px, 0);
    -o-transform: translate(-100px, 0);
    -ms-transform: translate(-100px, 0);
    list-style: none;
}
.online-wrapper .bg-content .tag-wrapper.left-wrapper .tag-box.animated {
    opacity: 1;
    transform: translate(0, 0);
    -webkit-transform: translate(0, 0);
    -moz-transform: translate(0, 0);
    -o-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
}
.online-wrapper .bg-content .tag-wrapper.left-wrapper .tag-box:last-child .tag-icon {
    background: url(/static/home/ck/icons.png) no-repeat center -130px;
    background-size: cover;
}
.online-wrapper .bg-content .tag-wrapper.left-wrapper .tag-box:hover {
    transform: translateX(4px);
    -webkit-transform: translateX(4px);
    -moz-transform: translateX(4px);
    -o-transform: translateX(4px);
    -ms-transform: translateX(4px);
}
.online-wrapper .bg-content .tag-wrapper.right-wrapper {
    float: right;
    padding-left: 0px;
    display: block;
    margin-top: 0px;
    width: 50%;
}
.online-wrapper .bg-content .tag-wrapper.right-wrapper .tag-box {
    background: url(/static/home/ck/shape-icon-bg.png) no-repeat -250px center;
    background-size: cover;
    transform: translate(100px, 0);
    -webkit-transform: translate(100px, 0);
    -moz-transform: translate(100px, 0);
    -o-transform: translate(100px, 0);
    -ms-transform: translate(100px, 0);
    list-style: none;
}
.online-wrapper .bg-content .tag-wrapper.right-wrapper .tag-box.animated {
    opacity: 1;
    transform: translate(0, 0);
    -webkit-transform: translate(0, 0);
    -moz-transform: translate(0, 0);
    -o-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
}
.online-wrapper .bg-content .tag-wrapper.right-wrapper .tag-box:first-child .tag-icon {
    background: url(/static/home/ck/icons.png) no-repeat center -60px;
    background-size: cover;
    left: 12px;
}
.online-wrapper .bg-content .tag-wrapper.right-wrapper .tag-box:last-child .tag-icon {
    background: url(/static/home/ck/icons.png) no-repeat center -196px;
    background-size: cover;
    left: 12px;
}
.online-wrapper .bg-content .tag-wrapper.right-wrapper .tag-box:hover {
    transform: translateX(-4px);
    -webkit-transform: translateX(-4px);
    -moz-transform: translateX(-4px);
    -o-transform: translateX(-4px);
    -ms-transform: translateX(-4px);
}
@media (min-width: 992px) {
    .online-wrapper .bg-content {
        background: url(/static/home/img/teachericon.png) no-repeat center bottom;
        background-size: 70%;
        height: 450px;
    }
    .online-wrapper .bg-content .tag-wrapper.left-wrapper {
        float: left;
        padding-left: 40px;
        display: block;
        margin-top: 60px;
        width: auto;
    }
    .online-wrapper .bg-content .tag-wrapper.right-wrapper {
        float: right;
        padding-left: 40px;
        display: block;
        margin-top: 60px;
        width: auto;
    }
    .online-wrapper .bg-content .tag-wrapper .tag-box {
        width: 320px;
        height: 154px;
        position: relative;
        padding: 30px 0 0 125px;
        box-sizing: border-box;
        margin-top: 20px;

    }
    .online-wrapper .bg-content .tag-wrapper.left-wrapper .tag-box {
        background: url(/static/home/ck/shape-icon-bg.png) no-repeat -10px center;
        background-size: cover;
        padding: 30px 0 0 125px;
    }
    .online-wrapper .bg-content .tag-wrapper.right-wrapper .tag-box {
        background: url(/static/home/ck/shape-icon-bg.png) no-repeat -348px center;
        background-size: cover;
    }

    .online-wrapper .bg-content .tag-wrapper .tag-box .tag-icon {
        position: absolute;
        left: 25px;
        top: 50%;
        margin-top: -40px;
        width: 80px;
        height: 80px;
    }


    .online-wrapper .bg-content .tag-wrapper.left-wrapper .tag-box:first-child .tag-icon {
        position: absolute;
        left: 12px;

    }

    .online-wrapper .bg-content .tag-wrapper.left-wrapper .tag-box:last-child .tag-icon {
        position: absolute;
        left: 12px;
        background: url(/static/home/ck/icons.png) no-repeat center -205px;
        background-size: cover;
    }

    .online-wrapper .bg-content .tag-wrapper.right-wrapper .tag-box:first-child .tag-icon {
        position: absolute;
        left: 25px;
        background: url(/static/home/ck/icons.png) no-repeat center -98px;
        background-size: cover;
    }
    .online-wrapper .bg-content .tag-wrapper.right-wrapper .tag-box:last-child .tag-icon {
        position: absolute;
        left: 25px;
        background: url(/static/home/ck/icons.png) no-repeat center -315px;
        background-size: cover;
    }
    .online-wrapper .bg-content .tag-wrapper .tag-box .item-title {
        text-align: left;
        margin-bottom: 5px;
        font-size: 18px;
        line-height: 28px;
    }
    .online-wrapper .bg-content .tag-wrapper .tag-box p {
        line-height: 24px;
        font-size: 14px;
        color: #999;
    }
    .online-wrapper .bg-content .tag-wrapper .tag-box p.tag {
        color: #e90c2f;
        line-height: 24px;
        background: transparent;
        padding: 0px;
        margin-bottom: 5px;
    }
}

/*===================*/


.plan-wrapper .plan-box {
    margin-top: 30px;
    position: relative;
    padding: 8px;
}
.plan-wrapper .plan-box .img-box{
    margin-bottom: 20px;
}
.plan-wrapper .plan-box .img-box .img-item {
    width: 75px;
    height: 75px;
    overflow: hidden;
    float: left;
}
.plan-wrapper .plan-box  .img-box .img-item img {
    width: 100%;
    height: auto;
}
.plan-wrapper .plan-box .img-box p {
    text-align: center;
    font-size: 18px;
    line-height: 22px;
}

.plan-wrapper .plan-box  .img-box .title-item {
    float: left;
    margin: 0 15px;
}

.plan-wrapper .plan-box  .img-box .title-item .item-title{
    text-align: left;
}
.plan-wrapper .plan-box .img-box  .btn-wrapper {
    width: 130px;
    margin-top: 20px;
    text-align: center;
    float: right;
}


.plan-wrapper .plan-box .img-box  .btn-wrapper   .btn {
    background-color: #e90c2f;
    font-size: 16px;
    line-height: 20px;
    padding: 10px ;

    color: #fff;
    text-align: center;
    border-radius: 30px;
     width: 100%;
    margin: 0 auto;
    cursor: pointer;
    transition: all .3s ease;
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -o-transition: all .3s ease;
    -ms-transition: all .3s ease;
}



.plan-wrapper .plan-box .canvas-bg-box .item-box {
    position: static;
    width: 50%;
    height: auto;
    float: left;

    border-radius: 4px;
    box-shadow: 0 0 10px 0px #ddd;
    box-sizing: border-box;
    text-align: right;
    padding: 4px 10px 4px 8px;
    z-index: 2;
    transition: all .3s linear;
    -webkit-transition: all .3s linear;
    -moz-transition: all .3s linear;
    -o-transition: all .3s linear;
    -ms-transition: all .3s linear;
}
.plan-wrapper .plan-box .canvas-bg-box .item-box .item-title {
    font-size: 20px;
    line-height: 32px;
    font-weight: 600;
}
.plan-wrapper .plan-box .canvas-bg-box .item-box p {
    position: static;
    /*left: -76px;*/
    width: 100%;
    text-align: left;
    line-height: 22px;
    font-size: 14px;
    opacity:1;
    height: auto;

    padding-top: 15px;
    color: #999;
    transition: all .3s linear;
    -webkit-transition: all .3s linear;
    -moz-transition: all .3s linear;
    -o-transition: all .3s linear;
    -ms-transition: all .3s linear;

}
.plan-wrapper .plan-box .canvas-bg-box .item-box::after {
    position: absolute;
    width: 20px;
    height: 20px;
    border-radius: 20px;
    text-align: center;
    vertical-align: middle;
    font-size: 14px;
    border: 1px solid #bebebe;
    color: #bebebe;
    background: #fff;
}
.plan-wrapper .plan-box .canvas-bg-box .item-box::before {
    content: '';
    width: 0;
    height: 0;
    position: absolute;
    right: -16px;
    top: 50%;
    margin: -4px 0 0 0;
    border: 8px solid transparent;
    border-left-color: #fff;
}
.plan-wrapper .plan-box .canvas-bg-box .item-box.item01 {
    left: -122px;
    bottom: 202px;
    box-shadow: -2px -2px 6px 0px #7f8efb;
}
.plan-wrapper .plan-box .canvas-bg-box .item-box.item01 .item-title{
    background: #fff url(/static/home/img/iconplan.png) no-repeat 5px 8px;
    background-size: 28px;
    padding-left: 43px;
    text-align: left;
}
.plan-wrapper .plan-box .canvas-bg-box .item-box.item01:hover {
    transform: translateX(-4px);
    -webkit-transform: translateX(-4px);
    -moz-transform: translateX(-4px);
    -o-transform: translateX(-4px);
    -ms-transform: translateX(-4px);
}
.plan-wrapper .plan-box .canvas-bg-box .item-box.item01:after {
    content: '1';
    right: -61px;
    bottom: 14px;
    border-color: #7f8efb;
    color: #7f8efb;
}
.plan-wrapper .plan-box .canvas-bg-box .item-box.item02 {
    left: 24px;
    bottom: 346px;
    box-shadow: 2px -2px 6px 0px #f4a200;
}
.plan-wrapper .plan-box .canvas-bg-box .item-box.item02 .item-title{
    background: #fff url(/static/home/img/iconplan.png)  no-repeat 5px -60px;
    background-size: 28px;
    padding-left: 43px;
    text-align: left;
}
.plan-wrapper .plan-box .canvas-bg-box .item-box.item02:hover {
    transform: translateX(-4px);
    -webkit-transform: translateX(-4px);
    -moz-transform: translateX(-4px);
    -o-transform: translateX(-4px);
    -ms-transform: translateX(-4px);
}
.plan-wrapper .plan-box .canvas-bg-box .item-box.item02:after {
    content: '2';
    right: -106px;
    bottom: -4px;
    border-color: #f4a200;
    color: #f4a200;
}
}
.plan-wrapper .plan-box .canvas-bg-box .item-box.item02 p {
    left: -125px;
}
.plan-wrapper .plan-box .canvas-bg-box .item-box.item03 {
    right: 14px;
    bottom: 332px;
    box-shadow: -2px 2px 6px 0px #f17e00;
}
.plan-wrapper .plan-box .canvas-bg-box .item-box.item03 .item-title{
    background: #fff url(/static/home/img/iconplan.png)  no-repeat 5px -175px;
    background-size: 28px;
    padding-left: 43px;
    text-align: left;
}
.plan-wrapper .plan-box .canvas-bg-box .item-box.item03:hover {
    transform: translateX(4px);
    -webkit-transform: translateX(4px);
    -moz-transform: translateX(4px);
    -o-transform: translateX(4px);
    -ms-transform: translateX(4px);
}
.plan-wrapper .plan-box .canvas-bg-box .item-box.item03:before {
    right: none;
    left: -16px;
    border-color: transparent;
    border-right-color: #fff;
}
.plan-wrapper .plan-box .canvas-bg-box .item-box.item03:after {
    content: '3';
    left: -67px;
    bottom: -5px;
    border-color: #f17e00;
    color: #f17e00;
}
.plan-wrapper .plan-box .canvas-bg-box .item-box.item03 p {
    left: 100px;
    text-align: left;
}
.plan-wrapper .plan-box .canvas-bg-box .item-box.item04 {
    right: -148px;
    bottom: 165px;
    box-shadow: 2px 2px 6px 0px #89bc1c;
}
.plan-wrapper .plan-box .canvas-bg-box .item-box.item04 .item-title{
    background: #fff url(/static/home/img/iconplan.png)  no-repeat 5px -120px;
    background-size: 28px;
    padding-left: 43px;
    text-align: left;
}
.plan-wrapper .plan-box .canvas-bg-box .item-box.item04:hover {
    transform: translateX(4px);
    -webkit-transform: translateX(4px);
    -moz-transform: translateX(4px);
    -o-transform: translateX(4px);
    -ms-transform: translateX(4px);
}
.plan-wrapper .plan-box .canvas-bg-box .item-box.item04:before {
    right: none;
    left: -16px;
    border-color: transparent;
    border-right-color: #fff;
}
.plan-wrapper .plan-box .canvas-bg-box .item-box.item04:after {
    content: '4';
    left: -61px;
    bottom: 13px;
    border-color: #89bc1c;
    color: #89bc1c;
}
.plan-wrapper .plan-box .canvas-bg-box .item-box.item04 p {
    left: 20px;
    text-align: left;
}
.plan-wrapper .plan-box .canvas-bg-box .item-box.active::after {
    border-color: #e90c2f;
    color: #e90c2f;
}
.plan-wrapper .plan-box .canvas-bg-box .item-box.active p {
    opacity: 1;
    height: auto;
}


@media (min-width: 992px) {
    .plan-wrapper {
        padding-bottom: 270px;
    }
    .plan-wrapper .plan-box {
        margin-top: 0px;
        position: relative;
        height: 480px;
    }
    .plan-wrapper .plan-box .canvas-bg-box {
        width: 720px;
        height: 400px;
        background: url(/static/home/img/ellipse100.png) no-repeat center 32px;
        background-size: 708px 354px;
        left: 50%;
        bottom: 20px;
        margin-left: -360px;
        position: absolute;
    }


    .plan-wrapper .plan-box .canvas-bg-box .item-box.item01 {
        left: -122px;
        bottom: 202px;
        box-shadow: 0 0 10px 0px #7f8efb;
    }
    .plan-wrapper .plan-box .canvas-bg-box .item-box.item02 {
        left: 24px;
        bottom: 346px;
        box-shadow: 0 0 10px 0px #f4a200;
    }
    .plan-wrapper .plan-box .canvas-bg-box .item-box.item03 {
        right: 14px;
        bottom: 332px;
        box-shadow: 0 0 10px 0px #f17e00;
    }
    .plan-wrapper .plan-box .canvas-bg-box .item-box.item04 {
        right: -148px;
        bottom: 165px;
        box-shadow: 0 0 10px 0px #89bc1c;
    }

    .plan-wrapper .plan-box .img-box {
        position: absolute;
        /*bottom: 28px;*/
        bottom: -52px;
        left: 50%;
        margin-left: -125px;
        width: 250px;
        height: 270px;
    }
    .plan-wrapper .plan-box  .img-box .img-item {
        margin: 0 auto 10px;
        width: 146px;
        height: 146px;
        overflow: hidden;
        float: none;
    }
    .plan-wrapper .plan-box  .img-box .title-item {
        float: none;
    }
    .plan-wrapper .plan-box  .img-box .title-item .item-title{
        text-align: center;
    }
    .plan-wrapper .plan-box  .img-box  .btn-wrapper {
        width: 100%;
        margin: 40px auto 20px;
        text-align: center;
    }
    .plan-wrapper .plan-box  .img-box  .btn-wrapper .btn {
        background-color: #e90c2f;
        font-size: 22px;
        line-height: 30px;
        padding: 10px 50px;
        color: #fff;
        text-align: center;
        border-radius: 30px;
        /* width: 240px; */
        margin: 0 auto;
        cursor: pointer;
        transition: all .3s ease;
        -webkit-transition: all .3s ease;
        -moz-transition: all .3s ease;
        -o-transition: all .3s ease;
        -ms-transition: all .3s ease;
    }

    .plan-wrapper .plan-box .canvas-bg-box .item-box {
        position: absolute;
        width: 150px;
        height: 40px;
        float: none;
    }
    .plan-wrapper .plan-box .canvas-bg-box .item-box p {
         position: absolute;
        left: -76px;
        width: 180px;
        text-align: right;
        line-height: 22px;
        font-size: 14px;
        opacity: 1;
        height: 0;
    }

}

.plan-wrapper .plan-box.not-canvas {
    background: url(/static/home/ck/t.png) no-repeat center -182px;
    width: 100%;
    background-size: 2001px;
}
.plan-wrapper .plan-box.not-canvas .canvas-bg-box {
    display: none;
}
.plan-wrapper .plan-box.not-canvas .canvas-box {
    display: none;
}
.plan-wrapper .plan-box.not-canvas .img-box {
    display: none;
}
.plan-wrapper .plan-box .canvas-box {
    width: 640px;
    height: 400px;
    position: absolute;
    bottom: 20px;
    left: 50%;
    margin-left: -320px;
    z-index: 1;
}
.plan-wrapper .plan-box.not-canvas {
    background: url(/static/home/ck/t.png) no-repeat center -182px;
    width: 100%;
    background-size: 2001px;
}
.plan-wrapper .plan-box.not-canvas .canvas-bg-box {
    display: none;
}
.plan-wrapper .plan-box.not-canvas .canvas-box {
    display: none;
}
.plan-wrapper .plan-box.not-canvas .img-box {
    display: none;
}
.plan-wrapper .plan-box .canvas-box {
    width: 640px;
    height: 400px;
    position: absolute;
    bottom: 20px;
    left: 50%;
    margin-left: -320px;
    z-index: 1;
}
.plan-wrapper .btn-wrapper .btn {
    /*width: 135px*/
}

@media (max-width: 767.98px){
    .section-wrapper .section-title {
        line-height: 1.5;
    }
}
/*===================*/

#reservation2 {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 19999;
    display: none;
}
#reservation2 .dialog {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -230px;
    margin-left: -422px;
    width: 900px;
    height: 500px;
    border-radius: 20px;
    background-color: #fff;
}
#reservation2 .dialog .login-banner {
    width: 420px;
    height: 500px;
    border-radius: 20px 0 0 20px;
    object-position: center;
    object-fit: cover;
}
#reservation2 .dialog .close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 23px;
    height: 23px;
    background: url(/static/home/img/icon_close.png) no-repeat center;
    cursor: pointer;
}
#reservation2 .dialog .form-wrapper {
    width: 480px;
    height: 500px;
    float: right;
}
#reservation2 .dialog .form-wrapper .logo {
    margin: 40px auto;
    width: 121px;
    display: block;
}
#reservation2 .dialog .form-wrapper .ui-form-item {
    position: relative;
    margin: 20px auto;
    width: 360px;
}
#reservation2 .dialog .form-wrapper .ui-form-item .area-selector .opt-mask {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 0;
}
#reservation2 .dialog .form-wrapper .ui-form-item .area-selector .opt-wrapper {
    display: none;
    position: absolute;
    left: 0;
    top: 46px;
    padding: 10px 6px;
    width: 280px;
    box-sizing: border-box;
    z-index: 20;
    background: #fff;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
    border-radius: 12px;
}
#reservation2 .dialog .form-wrapper .ui-form-item .area-selector .area-optgroup {
    width: 100%;
    max-height: 256px;
    overflow-y: scroll;
    scrollbar-width: thin;
    scrollbar-color: #d9d9d9 transparent;
}
#reservation2 .dialog .form-wrapper .ui-form-item .area-selector .area-optgroup::-webkit-scrollbar {
    width: 3px;
    height: 24px;
}
#reservation2 .dialog .form-wrapper .ui-form-item .area-selector .area-optgroup::-webkit-scrollbar-thumb {
    background-color: #d9d9d9;
}
#reservation2 .dialog .form-wrapper .ui-form-item .area-selector .area-optgroup::-webkit-scrollbar-track {
    background-color: transparent;
}
#reservation2 .dialog .form-wrapper .ui-form-item .area-selector .area-optgroup .area-opt {
    padding-left: 10px;
    height: 28px;
    font-size: 13px;
    line-height: 28px;
    color: #333;
    cursor: pointer;
}
#reservation2 .dialog .form-wrapper .ui-form-item .area-selector .area-optgroup .area-opt:hover {
    background-color: rgba(243, 39, 53, .08);
    color: #f81536;
}
#reservation2 .dialog .form-wrapper .ui-form-item .ui-input {
    padding: 5px 0;
    width: 100%;
    height: 50px;
    box-sizing: border-box;
    border: 0;
    outline: 0;
    font-size: 14px;
    color: #333;
    line-height: 30px;
    background-color: transparent;
}
#reservation2 .dialog .form-wrapper .ui-form-item .ui-input:-ms-input-placeholder {
    font-size: 14px;
    color: #999;
}
#reservation2 .dialog .form-wrapper .ui-form-item .ui-input::-webkit-input-placeholder {
    font-size: 14px;
    color: #999;
}
#reservation2 .dialog .form-wrapper .ui-form-item .ui-input::-moz-placeholder {
    font-size: 14px;
    color: #999;
}
#reservation2 .dialog .form-wrapper .ui-form-item .ui-input::placeholder {
    font-size: 14px;
    color: #999;
}
#reservation2 .dialog .form-wrapper .ui-form-item .ui-input.mobile, #reservation2 .dialog .form-wrapper .ui-form-item .ui-input.verify-code, #reservation2 .dialog .form-wrapper .ui-form-item .ui-input.password, #reservation2 .dialog .form-wrapper .ui-form-item .ui-input.first-name {
    border: 0;
    border-radius: 5px;
    background-color: #f3f3f3;
}
#reservation2 .dialog .form-wrapper .ui-form-item .ui-input.areacode {
    position: absolute;
    left: 16px;
    width: 52px;
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAMCAYAAABm+U3GAAABHklEQVQ4T6WSXU6DQBSFzwXDCtRVWNeg1i34aELCMIm6ICtDyquL8GcV6hakG/ABwjEXCxlpIW16n4BJPr6554i19ofk0jn3gMNHrLULALf6UAI4Jblwzt0dwJY0TZ2IJAC+FTwj+SoiJ2v4PQDu+QPlZABMCxWZiwKMMeci8qJwAI9ZluladoWLMSYLgkChJcm5c+6jBeuoOYA3AMd7wANr7dPadFVV1WVRFJ/K68H6kiTJWRiG7zvC/euvmqa5yPP8qxP9B9aPcRzPoihqzSd2PgndMPbXMgjUb0ufPsmyruur7vp+4BvG3aEfqGcOv1IkrzWobQ0aBW9rC8kjEUm1UlPQ0VX4BoMq6lFfqamuTxoPqvjMv7nx0x+D/wKZJK2tJyLVIwAAAABJRU5ErkJggg==');
    background-position: center right;
    background-repeat: no-repeat;
    background-size: auto 6px;
}
#reservation2 .dialog .form-wrapper .ui-form-item .ui-input.mobile {
    padding-left: 82px;
}
#reservation2 .dialog .form-wrapper .ui-form-item .ui-input.first-name, #reservation2 .dialog .form-wrapper .ui-form-item .ui-input.verify-code, #reservation2 .dialog .form-wrapper .ui-form-item .ui-input.password {
    padding-left: 16px;
}
#reservation2 .dialog .form-wrapper .ui-form-item .dash {
    position: absolute;
    left: 72px;
    font-size: 16px;
    line-height: 50px;
    color: #aaa;
}
#reservation2 .dialog .form-wrapper .ui-form-item .verify-code-btn {
    position: absolute;
    right: 16px;
    border: 0;
    background-color: transparent;
    outline: 0;
    font-size: 14px;
    color: #ccc;
    line-height: 50px;
    user-select: none;
    color: #333;
    cursor: pointer;
}
#reservation2 .dialog .form-wrapper .ui-form-item .password-status {
    position: absolute;
    top: 15px;
    right: 16px;
    width: 22px;
    height: 22px;
    background: url(/static/home/img/icon_eye_close.png) no-repeat center;
    background-size: cover;
    cursor: pointer;
}
#reservation2 .dialog .form-wrapper .ui-form-item .password-status.open {
    background-image: url(/static/home/img/icon_eye_open.png);
}
#reservation2 .dialog .form-wrapper .ui-form-item .forgot-password {
    padding: 10px 16px 0;
    display: inline-block;
    font-size: 14px;
    color: #ccc;
    text-decoration: none;
}
#reservation2 .dialog .form-wrapper .ui-button {
    margin: 10px auto;
    width: 360px;
    height: 50px;
    display: block;
    background-color: #f81536;
    border-radius: 5px;
    border: 0;
    outline: 0;
    line-height: 50px;
    text-align: center;
    font-size: 22px;
    color: #fff;
    cursor: pointer;
}
#reservation2 .dialog .form-wrapper .ui-button:hover {
    background-color: #ff5b5e;
}
#reservation2 .dialog .form-wrapper .free-get {
    margin: 47px auto 0;
    display: block;
}
#reservation2 .dialog .form-wrapper .get-course {
    margin-top: -8px;
}
#reservation2 .dialog .form-wrapper .free-get, #reservation2 .dialog .form-wrapper .get-course {
    font-size: 34px;
    color: #333;
    text-align: center;
    font-weight: 700;
}
#reservation2 .dialog .form-wrapper #mainAppointForm .select-wrap {
    display: inline-block;
}
#reservation2 .dialog .form-wrapper #mainAppointForm .select-wrap.subject {
    margin-left: 5px;
}
#reservation2 .dialog .form-wrapper #mainAppointForm .select-wrap .ui-select {
    padding: 0 12px;
    width: 175px;
    height: 50px;
    border-radius: 5px;
    border: 0;
    box-sizing: border-box;
    outline: 0;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background: #f3f3f3 url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABsAAAAQCAYAAADnEwSWAAACU0lEQVQ4T63US2sUQRAH8PrPw11cdmd2dkAkEBRF8SAIOQgeRDYaUCQgAQVFzMGD+QR+Ca8exBwComBABBGVhETwIHgQBA9CiAQCISA9vbO7URznUdJSkRjz2ET71t1V9RtqigYRUaPR6GPmO0VRjMVxHJuz/7GCIKhZlnUvz/PbrVZrEWEY7iei10R0lJnfp2k61Ol09L9ivu/7tm2/AnCSiOaZ+QyCILgC4BEAS4APSZKc63a7ardgrVYLXNedAjBgajBzURTFDUgbR4loHIAtlx+TJDm7srLyZadgtVoNS6XSNBGdWIWY+ZbW+v4vzKwwDK8x8wQAR4I+ARhUSi33ClYqlX3lcnkawHGpkRPRzSiKJsz+N2Y20tIHAFwB5pi5GUXR0nag+ffMPAPgmEAZgFGl1MPV3D8wAUfkH+6RoPk8zwfNNG0GmmkGMEtERwRKmfm61vrx2py/MGnpMBFNElFJghfSNB1st9sL68F6vd5v2/YMER0W6AczX9VaP1kfuyFmgur1+gXbtk1CWYosZlnWbLfbn1eLeJ530HGcWQAH5CwhostKqWcbdWFTTFo6ZFnWUyLaK+ASgKZSas7zvEMC9Uvh73mej7RarRebtXtLzCQ1Go0mAPOlFSmyzMxjRHQXQJ+cfSuK4pLWemqrQdoWM8m+7592HOc5EVU3KPaVmYejKDIDsuXqCZOWngLwEkBtTcVulmUX4zh+sx1k7nvGpKXmnTPvnc/MHWY+r7V+2wu0Y8wkeJ434LrupBnvKIre9QrtCpPi5knLdgKZ2J8xwPr0zGmEOAAAAABJRU5ErkJggg==') no-repeat right 12px center;
    background-size: auto 8px;
}
#reservation2 .dialog .form-wrapper #mainAppointForm .select-wrap .ui-select::-ms-expand {
    display: none;
}
#reservation2 .dialog .form-wrapper .protocol-agreement {
    text-align: center;
}
#reservation2 .dialog .form-wrapper .protocol-agreement .btn-check {
    padding-left: 20px;
    height: 12px;
    display: inline-block;
    background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMBAMAAACkW0HUAAAAIVBMVEUAAADV1dXq6urj4+Pc3Nze3t7f39/e3t7e3t7d3d3d3d3Gr4MYAAAAC3RSTlMABgwbQWx5ssfP8g4hZeYAAAA4SURBVAjXY2AQ7VoRyMDAPN1JpdKAQTKBgYFtIkM4AxCUMrSAKA+GRSBKC0ZBBaFKoBqg2iGGAQA0Pw1rA7DQXgAAAABJRU5ErkJggg==') no-repeat;
    line-height: 14px;
    user-select: none;
    cursor: pointer;
}
#reservation2 .dialog .form-wrapper .protocol-agreement .btn-check.checked {
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAMAAABhq6zVAAAAYFBMVEUAAABV1QBVxhxTxhpSxBpTxBpSxBpSxBpWxR9YxiJYxiNZxiRfyCtkyjJoyzhszT1xzkR80lKB1FmM12eW23S556O856bG67TI7LbY8czZ8cza8s3f9NXu+eny+u/4/PatLCh6AAAAB3RSTlMABhtsx8/ybsw/GQAAAFxJREFUCB0FwYUBwzAAAzCnAa1jZvj/y0lJSm1jtFqSZOpAn5LSAXpJBZx2ahpw/O21DLD9nhkZDtd5+b5gpFm/nrfHAi2V+f7ZQE3pWEEvydSBPiVJqW2MVkvyB0GJBDdinA1CAAAAAElFTkSuQmCC');
}
#reservation2 .dialog .form-wrapper .protocol-agreement a {
    color: #08c;
}
#reservation2 .dialog .form-wrapper .protocol-agreement a:visited {
    color: #08c;
}
#reservation2 .dialog .form-wrapper #mainVerifyForm {
    margin-top: 50px;
}
#reservation2 .dialog .form-wrapper .bottom-hint {
    margin-top: 30px;
    text-align: center;
    font-size: 12px;
    color: #999;
}
#reservation2 .retry-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 529px;
    height: 428px;
    background: url(/static/home/ck/background_retry.png) no-repeat center;
    background-size: cover;
}
#reservation2 .retry-container .get-back {
    position: absolute;
    top: 334px;
    left: 195px;
    width: 140px;
    height: 38px;
    background: linear-gradient(180deg, #fff354 0, #feb20a 100%);
    box-shadow: 0 2px 8px 0 #fc4026;
    border-radius: 27px;
    font-size: 16px;
    color: #fb542a;
    line-height: 38px;
    text-align: center;
    cursor: pointer;
}
#reservation2 .retry-container .give-up {
    position: absolute;
    top: 380px;
    left: 237px;
    font-size: 14px;
    font-weight: 400;
    color: #ffa18a;
    cursor: pointer;
}
#reservation2 .success-container {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -220px;
    margin-left: -300px;
    width: 600px;
    height: 440px;
    border-radius: 16px;
    background-color: #fff;
}
#reservation2 .success-container .close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 23px;
    height: 23px;
    background: url(/static/home/img/icon_close.png) no-repeat center;
    cursor: pointer;
}
#reservation2 .success-container .success-img {
    margin: 25px auto;
    width: 168px;
    height: 102px;
    display: block;
}
#reservation2 .success-container .success-title {
    height: 28px;
    font-size: 20px;
    color: #333;
    line-height: 28px;
    text-align: center;
}
#reservation2 .success-container .success-subtitle {
    margin-top: 8px;
    font-size: 12px;
    color: #999;
    text-align: center;
}
#reservation2 .success-container .more-info {
    margin: 43px 86px 0;
}
#reservation2 .success-container .more-info .success-qrcode {
    float: left;
    width: 140px;
    height: 140px;
    background-color: #666;
}
#reservation2 .success-container .more-info .description {
    float: left;
    margin-top: 12px;
    margin-left: 30px;
}
#reservation2 .success-container .more-info .description .desc-title {
    margin-bottom: 14px;
    font-size: 16px;
    color: #999;
}
#reservation2 .success-container .more-info .description .desc-detail-list {
    list-style-type: disc;
    padding-left: 20px;
}
#reservation2 .success-container .more-info .description .desc-detail-list li {
    margin-bottom: 10px;
    height: 20px;
    line-height: 20px;
    color: #f81536;
}
#reservation2 .success-container .more-info .description .desc-detail-list li::marker {
    font-size: 20px
}
#reservation2 .success-container .more-info .description .desc-detail-list li .desc-detail {
    font-size: 14px;
    color: #333;
}
#reservation2.show {
    display: block;
}
#reservation2.show:after {
    background: rgba(0, 0, 0, .6);
}
#reservation2:after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    background: rgba(0, 0, 0, 0);
}
#reservation2 .close-btn {
    position: absolute;
    width: 26px;
    height: 26px;
    line-height: 26px;
    text-align: center;
    font-size: 26px;
    right: 10px;
    top: 10px;
    font-weight: 400;
    text-decoration: none;
    color: #999;
    transition: all ease .2s;
    -webkit-transition: all ease .2s;
}
#reservation2 .close-btn:hover {
    color: #666;
}



/*===================*/

.section-wrapper .section-content {
    position: relative;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    /*min-width: 1200px;*/
}

.youshi_section1 {
    /*padding-bottom: 104px;*/
}
.youshi_section1 .section-content {
    margin: 40px auto 0;
}
.youshi_section1 .item {
    margin: 10px;
    background-size: 120px 120px;
    background-repeat: no-repeat;
}
.youshi_section1 .item h3 {
    margin-bottom: 5px;
    font-size: 24px;
    color: #262626;
}
.youshi_section1 .item p {
    margin: 2px 0;
    font-size: 16px;
    color: #999;
    white-space: nowrap;
    box-shadow: 0 0 0;
}
.youshi_section1 .item1 {
    background-image: url(/static/home/img/img-efficiency.png);
    padding: 10px 160px 10px 0;
    background-position: center right;
    text-align: right;
    /*border-bottom: 1px solid #aaa;*/
    box-shadow: 2px 2px 6px 0px #7ee49e;
    border-bottom-right-radius: 70px;
    border-top-right-radius: 70px;
}
.youshi_section1 .item2 {
    background-image: url(/static/home/img/img-convenience.png);
    padding: 10px 0 10px 160px;
    background-position: center left;
    box-shadow: -2px 2px 6px 0px #ffcc51;
    border-bottom-left-radius: 70px;
    border-top-left-radius: 70px;
}
.youshi_section1 .item3 {
    background-image: url(/static/home/img/img-intelligence.png);
    padding: 10px 160px 10px 0;
    background-position: center right;
    text-align: right;
    box-shadow: 2px 2px 6px 0px #ff6e6e;
    border-bottom-right-radius: 70px;
    border-top-right-radius: 70px;
}

.youshi_section2 {
    /*padding-bottom: 190px;*/
    background-color: #f8f8f8;
}
.youshi_section2 .section-content {
    /*left: -18px;*/
    margin: 50px auto 0;
    /*width: 701px;*/
    height: 136px;
    background-image: url(/static/home/img/section2.png);
    background-size: contain;
}
.youshi_section2 .item {
    position: absolute;
    left: 50%
}
.youshi_section2 .item h3 {
    font-size: 20px;
    color: #262626;
    margin-bottom: 3px;
}
.youshi_section2 .item p {
    font-size: 13px;
    color: #999;
    white-space: nowrap
}
.youshi_section2 .item1 {
    top: -8px;
    margin-left: -183px
}
.youshi_section2 .item2 {
    top: 16px;
    margin-left: 110px
}
.youshi_section2 .item3 {
    top: 45px;
    margin-left: -138px
}
.youshi_section2 .item4 {
    top: 68px;
    margin-left: 66px
}
.youshi_section2 .item5 {
    top: 98px;
    margin-left: -100px
}
.youshi_section3 .section-content {
    margin-top: 50px;
    text-align: center;
    font-size: 0
}
.youshi_section3 .section-content .item {
    position: relative;
    margin: 5px 0px;
    /*padding-top: 160px;*/
    /*padding-left: 160px;*/
    padding: 0 0 0 160px;
    /*width: 290px;*/
    width: 100%;
    display: inline-block;
    background-size: 130px 130px;
    background-repeat: no-repeat;
    /*background-position: top center;*/
    background-position: center left;
    cursor: pointer;
    /*box-shadow: 0 0 0.16rem 0.01333rem hsla(0,0%,78.4%,.42);*/
    /*box-shadow: 0 0px 2px 0px #f81536;*/
    border-bottom: 2px solid #f81536;
}


.youshi_section3 .section-content .item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 1px;
    height: 279px;
    border-right: 1px solid #aaa;
    opacity: .5
}
.youshi_section3 .section-content .item:first-child::before {
    display: none
}
.youshi_section3 .section-content .item h3 {
    margin-bottom: 10px;
    font-size: 24px;
    color: #262626
}
.youshi_section3 .section-content .item p {
    font-size: 16px;
    color: #999;
    margin-bottom: 3px;
}
.youshi_section3 .section-content .item1 {
    background-image: url(/static/home/img/course1_smart.png);
    background-position: center left;
    padding: 0 0 0 160px;
}
.youshi_section3 .section-content .item1:hover {
    background-image: url(/static/home/img/course1_hover.png);
}
.youshi_section3 .section-content .item2 {
    background-image: url(/static/home/img/course2_smart.png);
    background-position: center right;
    padding: 0 160px 0 0;
}
.youshi_section3 .section-content .item2:hover {
    background-image: url(/static/home/img/course2_hover.png);
}
.youshi_section3 .section-content .item3 {
    background-image: url(/static/home/img/course3_smart.png);
    background-position: center left;
    padding: 0 0 0 160px;
}
.youshi_section3 .section-content .item3:hover {
    background-image: url(/static/home/img/course3_hover.png);
}
.youshi_section3 .section-content .item4 {
    background-image: url(/static/home/img/course4_smart.png);
    background-position: center right;
    padding: 0 160px 0 0;
}
.youshi_section3 .section-content .item4:hover {
    background-image: url(/static/home/img/course4_hover.png);
}


@media (min-width: 992px) {

    .youshi_section1 {
        padding-bottom: 180px
    }

    .youshi_section1 .section-content {
        margin: 40px auto 0;
        width: 788px;
        height: 606px;
        background-image: url(/static/home/img/section1.png);
    }
    .youshi_section1 .item {
        position: absolute;
        left: 50%;
        border-bottom:0px;
        background-image: unset;
        padding: 0px;
        margin: 0px;
    }
    .youshi_section1 .item h3 {
        margin-bottom: 5px;
        font-size: 24px;
        color: #262626;
    }
    .youshi_section1 .item p {
        margin: 2px 0;
        font-size: 16px;
        color: #999;
        white-space: nowrap;
    }
    .youshi_section1 .item1 {
        top: 360px;
        margin-left: -496px;
        text-align: right;
        box-shadow: none;
    }
    .youshi_section1 .item2 {
        top: 28px;
        margin-left: 266px;
        box-shadow: none;
    }
    .youshi_section1 .item3 {
        top: 450px;
        margin-left: 315px;
        text-align: left;
        box-shadow: none;
    }





    .youshi_section2 {
        padding-bottom: 180px;
    }

    .youshi_section2 .section-content {
        /*left: -18px;*/
        margin: 50px auto 0;
        width: 701px;
        height: 358px;
        background-image: url(/static/home/img/section2.png);
    }

    .youshi_section2 .item h3 {
        font-size: 24px;
        color: #262626;
        margin-bottom: 8px;
    }
    .youshi_section2 .item p {
        font-size: 16px;
        color: #999;
        white-space: nowrap;
    }
    .youshi_section2 .item1 {
        top: 25px;
        margin-left: -465px
    }
    .youshi_section2 .item2 {
        top: 88px;
        margin-left: 370px
    }
    .youshi_section2 .item3 {
        top: 168px;
        margin-left: -370px
    }
    .youshi_section2 .item4 {
        top: 233px;
        margin-left: 256px
    }
    .youshi_section2 .item5 {
        top: 308px;
        margin-left: -256px
    }


    .youshi_section3 {
        padding-bottom: 180px
    }
    .youshi_section3 .section-content .item p {
        margin-bottom: 18px;
    }
    .youshi_section3 .section-content .item {
        box-shadow: 0 0 0 0 #f81536;
        border-bottom: 2px solid #f81536;

        /*padding-left: 0px;
        padding-right: 0px;
        padding-top: 160px;*/
        padding: 160px 0 0 0;
        background-position: top center;
    }
    .youshi_section3 .section-content .item1 {
        background-image: url(/static/home/img/course1_smart.png);
        padding: 160px 0 0 0;
        background-position: top center;
    }
    .youshi_section3 .section-content .item1:hover {
        background-image: url(/static/home/img/course1_hover.png);
    }
    .youshi_section3 .section-content .item2 {
        background-image: url(/static/home/img/course2_smart.png);
        padding: 160px 0 0 0;
        background-position: top center;
    }
    .youshi_section3 .section-content .item2:hover {
        background-image: url(/static/home/img/course2_hover.png);
    }
    .youshi_section3 .section-content .item3 {
        background-image: url(/static/home/img/course3_smart.png);
    }
    .youshi_section3 .section-content .item3:hover {
        background-image: url(/static/home/img/course3_hover.png);
    }
    .youshi_section3 .section-content .item4 {
        background-image: url(/static/home/img/course4_smart.png);
    }
    .youshi_section3 .section-content .item4:hover {
        background-image: url(/static/home/img/course4_hover.png);
    }
}

.youshi_section4 {
    background-color: #f8f8f8
}
.youshi_section4 .section-content {
    padding: 60px 0 80px;
    text-align: center
}
.youshi_section4 .section-content .item {
    margin: 0 28px;
    padding-top: 230px;
    width: 330px;
    height: 420px;
    display: inline-block;
    box-sizing: border-box;
    border-radius: 20px;
    background-color: #fff;
    filter: drop-shadow(0 0 10px rgba(153, 153, 153, .42));
    background-repeat: no-repeat;
    background-size: contain;
    background-position: top center
}
.youshi_section4 .section-content .item.item1 {
    background-image: url(/static/home/img/funeng1.png)
}
.youshi_section4 .section-content .item.item2 {
    background-image: url(/static/home/img/funeng2.png)
}
.youshi_section4 .section-content .item.item3 {
    background-image: url(/static/home/img/funeng3.png)
}
.youshi_section4 .section-content .item h3 {
    margin-top: 40px;
    font-size: 24px;
    color: #262626
}
.youshi_section4 .section-content .item .dash {
    margin: 15px auto;
    width: 37px;
    height: 3px;
    background-color: #e90c2f
}
.youshi_section4 .section-content .item p {
    font-size: 16px;
    color: #999
}

.youshi_section5 {
    padding-bottom: 200px;
    margin-bottom: 80px
}
.youshi_section5 .description {
    margin: 40px 0;
    font-size: 16px;
    color: #999;
    text-align: center
}
.youshi_section5 .section-content {
    margin: 0 auto;
    width: 762px;
    height: 522px;
    background-image: url(/static/home/img/section5.png)
}
.youshi_section5 .section-content .item {
    position: absolute;
    left: 50%;
    padding-left: 68px;
    width: 191px;
    height: 80px;
    box-sizing: border-box;
    background-image: url(/static/home/img/smart_bg.png);
    background-size: cover;
    background-repeat: no-repeat;
    font-size: 24px;
    color: #ea1335;
    line-height: 80px;
    white-space: nowrap;
    user-select: none
}
.youshi_section5 .section-content .item .icon {
    position: absolute;
    top: 21px;
    left: 24px;
    width: 40px;
    height: 40px;
    background-size: cover;
    background-repeat: no-repeat
}
.youshi_section5 .section-content .item:hover {
    background-image: url(/static/home/img/smart_bg_hover.png);
    color: #fff;
    cursor: pointer
}
.youshi_section5 .section-content .item1 {
    top: -32px;
    margin-left: -530px
}
.youshi_section5 .section-content .item1 .icon {
    background-image: url(/static/home/img/icon_smart_1.png)
}
.youshi_section5 .section-content .item1:hover .icon {
    background-image: url(/static/home/img/icon_hover_smart_1.png)
}
.youshi_section5 .section-content .item2 {
    top: 64px;
    margin-left: -530px
}
.youshi_section5 .section-content .item2 .icon {
    background-image: url(/static/home/img/icon_smart_2.png)
}
.youshi_section5 .section-content .item2:hover .icon {
    background-image: url(/static/home/img/icon_hover_smart_2.png)
}
.youshi_section5 .section-content .item3 {
    top: 168px;
    margin-left: -530px;
    letter-spacing: -3px
}
.youshi_section5 .section-content .item3 .icon {
    background-image: url(/static/home/img/icon_smart_3.png)
}
.youshi_section5 .section-content .item3:hover .icon {
    background-image: url(/static/home/img/icon_hover_smart_3.png)
}
.youshi_section5 .section-content .item4 {
    top: 268px;
    margin-left: -530px
}
.youshi_section5 .section-content .item4 .icon {
    background-image: url(/static/home/img/icon_smart_4.png)
}
.youshi_section5 .section-content .item4:hover .icon {
    background-image: url(/static/home/img/icon_hover_smart_4.png)
}
.youshi_section5 .section-content .item5 {
    top: -32px;
    margin-left: 376px
}
.youshi_section5 .section-content .item5 .icon {
    background-image: url(/static/home/img/icon_smart_5.png)
}
.youshi_section5 .section-content .item5:hover .icon {
    background-image: url(/static/home/img/icon_hover_smart_5.png)
}
.youshi_section5 .section-content .item6 {
    top: 64px;
    margin-left: 376px;
    letter-spacing: -3px
}
.youshi_section5 .section-content .item6 .icon {
    background-image: url(/static/home/img/icon_smart_6.png)
}
.youshi_section5 .section-content .item6:hover .icon {
    background-image: url(/static/home/img/icon_hover_smart_6.png)
}
.youshi_section5 .section-content .item7 {
    top: 166px;
    margin-left: 376px
}
.youshi_section5 .section-content .item7 .icon {
    background-image: url(/static/home/img/icon_smart_7.png)
}
.youshi_section5 .section-content .item7:hover .icon {
    background-image: url(/static/home/img/icon_hover_smart_7.png)
}
.youshi_section5 .section-content .item8 {
    top: 268px;
    margin-left: 376px
}
.youshi_section5 .section-content .item8 .icon {
    background-image: url(/static/home/img/icon_smart_8.png)
}
.youshi_section5 .section-content .item8:hover .icon {
    background-image: url(/static/home/img/icon_hover_smart_8.png)
}
.youshi_section5 .section-content .item9 {
    top: 368px;
    margin-left: 376px
}
.youshi_section5 .section-content .item9 .icon {
    background-image: url(/static/home/img/icon_smart_9.png)
}
.youshi_section5 .section-content .item9:hover .icon {
    background-image: url(/static/home/img/icon_hover_smart_9.png)
}

/*===================*/


.kencheng_section1 .section-subtitle {
    margin-bottom: 36px
}
.kencheng_section1 .layout .grade-box {
    height: 50px;
    position: relative;
    margin-bottom: 30px
}
.kencheng_section1 .layout .grade-box .item {
    position: absolute;
    width: 130px;
    height: 50px;
    font-size: 24px;
    line-height: 30px;
    vertical-align: middle;
    box-sizing: border-box;
    padding: 10px 20px;
    text-align: center;
    color: #fff;
    background: #ffc948;
    left: 50%;
    top: 0;
    margin-left: -215px;
    border-radius: 36px;
    cursor: pointer
}
.kencheng_section1 .layout .grade-box .item::after {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    left: 50%;
    bottom: -13px;
    margin: 0 0 0 -5px;
    border: 7px solid transparent
}
.kencheng_section1 .layout .grade-box .item.active::after {
    border-top-color: #ffc948
}
.kencheng_section1 .layout .grade-box .item2 {
    position: absolute;
    width: 130px;
    height: 50px;
    font-size: 24px;
    line-height: 30px;
    vertical-align: middle;
    box-sizing: border-box;
    padding: 10px 20px;
    text-align: center;
    color: #fff;
    background: #ffc948;
    left: 20%;
    top: 0;
    /*margin-left: -215px;*/
    border-radius: 36px;
    cursor: pointer
}
.kencheng_section1 .layout .grade-box .item2::after {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    left: 50%;
    bottom: -13px;
    margin: 0 0 0 -5px;
    border: 7px solid transparent
}
.kencheng_section1 .layout .grade-box .item2.active::after {
    border-top-color: #ffc948
}
.kencheng_section1 .layout .grade-box .item3 {
    position: absolute;
    width: 130px;
    height: 50px;
    font-size: 24px;
    line-height: 30px;
    vertical-align: middle;
    box-sizing: border-box;
    padding: 10px 20px;
    text-align: center;
    color: #fff;
    left: 60%;
    top: 0;
    border-radius: 36px;
    cursor: pointer;
    background: #ff6e6e;
    /*margin-left: 85px*/
}
.kencheng_section1 .layout .grade-box .item3::after {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    left: 50%;
    bottom: -13px;
    margin: 0 0 0 -5px;
    border: 7px solid transparent;
}
.kencheng_section1 .layout .grade-box .item3.active::after {
    border-top-color: #ff6e6e;
}
.kencheng_section1 .layout .grade-box .item:nth-child(2) {
    background: #6bde8f;
    margin-left: -65px
}
.kencheng_section1 .layout .grade-box .item:nth-child(2).active::after {
    border-top-color: #6bde8f
}
.kencheng_section1 .layout .grade-box .item:last-child {
    background: #ff6e6e;
    margin-left: 85px
}
.kencheng_section1 .layout .grade-box .item:last-child.active::after {
    border-top-color: #ff6e6e
}
.kencheng_section1 .layout .content-wrapper {
    position: relative;
    width: 100%;
    height: 506px
}
.kencheng_section1 .layout .content-wrapper .content-box {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    box-sizing: border-box;
    border: 10px solid #ffcc51;
    box-shadow: 0 0 45px 14px rgba(200, 200, 200, .42);
    border-radius: 18px;
    opacity: 0;
    overflow: hidden;
    z-index: 1
}
.kencheng_section1 .layout .content-wrapper .content-box .left-box {
    width: 100%;
    padding: 20px;
    /*position: absolute;*/
    /*left: 20px;*/
    /*top: 20px*/
}
.kencheng_section1 .layout .content-wrapper .content-box .left-box .item-title {
    font-size: 16px;
    line-height: 28px;
    color: #666;
    margin-bottom: 20px
}
.kencheng_section1 .layout .content-wrapper .content-box .left-box p {
    font-size: 16px;
    line-height: 28px;
    color: #999;
    transition: all .6s ease;
    -webkit-transition: all .6s ease;
    -moz-transition: all .6s ease;
    -o-transition: all .6s ease;
    -ms-transition: all .6s ease
}
.kencheng_section1 .layout .content-wrapper .content-box .left-box p.pink-bg {
    /*height: 36px;*/
    line-height: 36px;
    border-radius: 20px;
    background: #fdf3f3;
    color: #e32d34;
    padding: 0 10px;
    margin-bottom: 10px
}
.kencheng_section1 .layout .content-wrapper .content-box .left-box p:hover {
    transform: translateX(4px);
    -webkit-transform: translateX(4px);
    -moz-transform: translateX(4px);
    -o-transform: translateX(4px);
    -ms-transform: translateX(4px)
}
.kencheng_section1 .layout .content-wrapper .content-box .left-box .desc-title {
    background: #e32d34 url(https://web-data.zmlearn.com/image/cWMmV7EPRsb1R3ka3PLxXe/jiejuefangan1-02.png) no-repeat 20px center;
    background-size: 16px;
    color: #fff;
    width: 180px;
    height: 35px;
    line-height: 35px;
    border-radius: 20px;
    border-bottom-left-radius: 0;
    padding: 0 20px 0 45px;
    text-align: center;
    margin: 20px 0
}
.kencheng_section1 .layout .content-wrapper .content-box .right-box {
    width: 440px;
    height: 100%;
    overflow: hidden;
    position: absolute;
    bottom: 0;
    right: 0;
    background: url(/static/home/img/circle.png) no-repeat 50px 145px;
    background-size: 480px;
    text-align: right;
    opacity: .2;
    transform: translateY(100px);
    -webkit-transform: translateY(100px);
    -moz-transform: translateY(100px);
    -o-transform: translateY(100px);
    -ms-transform: translateY(100px);
    transition: all .6s linear;
    -webkit-transition: all .6s linear;
    -moz-transition: all .6s linear;
    -o-transition: all .6s linear;
    -ms-transition: all .6s linear
}
.kencheng_section1 .layout .content-wrapper .content-box .right-box.animated {
    transform: translateY(0px);
    -webkit-transform: translateY(0px);
    -moz-transform: translateY(0px);
    -o-transform: translateY(0px);
    -ms-transform: translateY(0px);
    opacity: 1
}
.kencheng_section1 .layout .content-wrapper .content-box .right-box img {
    width: 270px;
    margin: 84px 161px 0 0;
    /*margin: 84px 111px 0 0;*/
    /*transform: rotateY(180deg);*/
    /*-webkit-transform: rotateY(180deg);*/
    /*-moz-transform: rotateY(180deg);*/
    /*-o-transform: rotateY(180deg);*/
    /*-ms-transform: rotateY(180deg)*/
}
.kencheng_section1 .layout .content-wrapper .content-box.active {
    opacity: 1;
    z-index: 2
}
.kencheng_section1 .layout .content-wrapper .content-box.active.content-box2 {
    border: 10px solid #ffcc51
}
.kencheng_section1 .layout .content-wrapper .content-box.active.content-box1 {
    border: 10px solid #6bde8f
}
.kencheng_section1 .layout .content-wrapper .content-box.active.content-box3 {
    border: 10px solid #ff6e6e
}

.kencheng_section2 {
    background: #f8f8f8
}
.kencheng_section2 .section-subtitle {
    margin-bottom: 36px
}
.kencheng_section2 .item-box {
    /*height: 448px;*/
    /*width: 100%;*/
    list-style: none;
    padding:0px;
}
.kencheng_section2 .item-box .item {
    /*width: calc(535px);*/
    /*height: 198px;*/
    margin: 27px 0px 0 0;
    float: left;
    position: relative;
    transform: translateY(100px);
    -webkit-transform: translateY(100px);
    -moz-transform: translateY(100px);
    -o-transform: translateY(100px);
    -ms-transform: translateY(100px);
    transition: all .6s linear;
    -webkit-transition: all .6s linear;
    -moz-transition: all .6s linear;
    -o-transition: all .6s linear;
    -ms-transition: all .6s linear;
    opacity: .2
}
.kencheng_section2 .item-box .item.animated {
    transform: translateY(0px);
    -webkit-transform: translateY(0px);
    -moz-transform: translateY(0px);
    -o-transform: translateY(0px);
    -ms-transform: translateY(0px);
    opacity: 1
}
.kencheng_section2 .item-box .item .img-box {
    width: 50%;
    height: 100%;
    overflow: hidden
}
.kencheng_section2 .item-box .item .img-box img {
    width: 100%;
    height: auto;
    transition: all .3s linear;
    -webkit-transition: all .3s linear;
    -moz-transition: all .3s linear;
    -o-transition: all .3s linear;
    -ms-transition: all .3s linear
}
.kencheng_section2 .item-box .item .img-box:hover img {
    transform: scale(1.1);
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -o-transform: scale(1.1);
    -ms-transform: scale(1.1)
}
.kencheng_section2 .item-box .item .content-box {
    width: 50%;
    height: 100%;
    position: absolute;
    top: 0;
    box-sizing: border-box;
    padding: 20px;
    color: #fff;
    border-radius: 4px
}
.kencheng_section2 .item-box .item .content-box::after {
    content: '';
    position: absolute;
    border: 7px solid transparent;
    top: 20px
}
.kencheng_section2 .item-box .item .content-box .item-title {
    margin-bottom: 15px;
    color: #fff;
    text-align: left;
}
.kencheng_section2 .item-box .item .content-box p {
    font-size: 16px;
    line-height: 24px;
    margin-bottom: 3px;
}
.kencheng_section2 .item-box .item.item1 .content-box {
    background: #f9c039;
    left: 50%
}
.kencheng_section2 .item-box .item.item1 .content-box::after {
    left: -14px;
    border-right-color: #ffcc51
}
.kencheng_section2 .item-box .item.item2 {
    margin-right: 0
}
.kencheng_section2 .item-box .item.item2 .content-box {
    background: #6bde8f;
    left: 50%
}
.kencheng_section2 .item-box .item.item2 .content-box::after {
    left: -14px;
    border-right-color: #6bde8f
}
.kencheng_section2 .item-box .item.item3 .img-box {
    float: right
}
.kencheng_section2 .item-box .item.item3 .content-box {
    left: 0;
    background: #ff6e6e
}
.kencheng_section2 .item-box .item.item3 .content-box::after {
    right: -14px;
    border-left-color: #ff6e6e
}
.kencheng_section2 .item-box .item.item4 {
    margin-right: 0
}
.kencheng_section2 .item-box .item.item4 .img-box {
    float: right
}
.kencheng_section2 .item-box .item.item4 .content-box {
    left: 0;
    background: #4ce
}
.kencheng_section2 .item-box .item.item4 .content-box::after {
    right: -14px;
    border-left-color: #4ce
}

#lessonSystem .layout {
    padding-top: 0px;
    text-align: center;
    position: relative
}
#lessonSystem .poshelper {
    width: 770px;
    position: relative;
    top: 220px
}
#lessonSystem .gradeList {
    padding-top: 20px;
    text-align: center;
    display: block;
}
#lessonSystem .gradeList li {
    line-height: 38px;
    display: inline-block;
    _zoom: 1;
    *display: inline;
    cursor: pointer;
    color: #e61b28;
}
#lessonSystem .gradeList  .nav-link{
    padding:0px;
    border: 1px solid #e8b4c1;
    width: 90px;
    display: inline-block;
    _zoom: 1;
    cursor: pointer;
    border-radius: 9px;
}
#lessonSystem .gradeList li a {
    display: block;
    border-radius: 5px;
    color: #e61b28;
    font-size: 20px;
    text-align: center;
    width: 100%;
    height: 100%;
    text-decoration: none
}
#lessonSystem .gradeList li.last {
    margin-right: 0
}
#lessonSystem .gradeList .active {
    color: #fff;
    background: #e61b28;
    font-weight: 700
}
#lessonSystem .dashedLine {
    width: 600px;
    border-bottom: 1px dashed #fe5b56;
    margin: 0 auto
}
#lessonSystem .subjects {
    /*padding-top: 19px;*/
    text-align: center;
    display: block;
}
#lessonSystem .subjects li {
    font-size: 16px;
    /*line-height: 38px;*/
    margin-top: 10px;
    margin-right: 10px;
    width: 70px;
    display: inline-block;
    _zoom: 1;
    *display: inline;
    text-align: center;
    cursor: pointer;
    border-radius: 30px;
    background-color: #e6e6e6
}
#lessonSystem .subjects  .nav-link{
    width: 100%;
    padding:0px;
    margin-top: 0px;
    display: inline-block;
    _zoom: 1;
    cursor: pointer;
}
#lessonSystem .subjects li a {
    display: block;
    border-radius: 5px;
    color: #e61b28;
    font-size: 20px;
    text-align: center;
    width: 100%;
    height: 100%;
    text-decoration: none
}
#lessonSystem .subjects li.last {
    margin-right: 0
}
#lessonSystem .subjects .active {
    color: #fff;
    background: #e61b28;
    font-weight: 700;
    border-radius: 30px
}
#lessonSystem .cntBox {
    position: relative;
    /*height: 410px;*/
    overflow: hidden;
    display: grid;

    -webkit-box-pack: start;
    -webkit-box-orient: vertical;
    -webkit-flex-flow: column nowrap;
    flex-flow: column nowrap;
    /*-webkit-justify-content: flex-start;*/
    /*justify-content: flex-start;*/
    position: relative;
}
#lessonSystem .lv {
    /*width: 218px;*/
    width: 100%;
    bottom: 0;
    padding-top: 12px;
    overflow: hidden;
    display: flex;

    /*-webkit-box-direction: normal; */
    display: -webkit-box;
    display: -webkit-flex;
    /* display: flex; */
    /* overflow: hidden;*/

    -webkit-box-pack: justify;
    -webkit-box-orient: horizontal;
    -webkit-flex-flow: row nowrap;
    flex-flow: row nowrap;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    padding-top: 0.33333rem;
    width: 100%;
}
#lessonSystem .lv .level-box {
    position: relative;
    border-radius: 4px;
    border-bottom-left-radius: 8px;
    padding: 10px;


    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-box-pack: center;
    border-radius: 0.05333rem;
    border-bottom-left-radius: 0.10667rem;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
    -webkit-flex-shrink: 0;
    flex-shrink: 0;
    height: 150px;
    -webkit-justify-content: center;
    justify-content: center;
    margin-right: 13px;
    position: relative;
    width: 110px;
}
#lessonSystem .lv .level-box::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: -2px;
    transform: rotate(-3deg);
    transform-origin: left top;
    border-radius: 4px;
    z-index: -1
}
#lessonSystem .lv .level {
    transition: all 2s ease;
    -webkit-transition: all 2s ease;
    -moz-transition: all 2s ease;
    -o-transition: all 2s ease;
    -ms-transition: all 2s ease;
    font-size: 40px;
    color: #fff;
    line-height: 39px;
    font-weight: 700
}
#lessonSystem .lv .score {
    transition: all 2s ease;
    -webkit-transition: all 2s ease;
    -moz-transition: all 2s ease;
    -o-transition: all 2s ease;
    -ms-transition: all 2s ease;
    font-size: 20px;
    color: #fff;
    line-height: 28px
}
#lessonSystem .lv .outer {
    margin-top: 1px;
    *width: 224px;
    position: relative;


    -webkit-box-flex: 1;
    -webkit-flex-grow: 1;
    flex-grow: 1;
    margin-top: 0.01333rem;
    position: relative;
}
#lessonSystem .lv .content {
    padding: 0 14px !important;
    border-radius: 4px;
    border-top-left-radius: 8px;
    height: 100%;
}
#lessonSystem .lv .content p {
    text-align: left;
    margin-bottom: 5px;
}
#lessonSystem .lv1 {
    /*display: inline-block;*/
    display: flex;
    _zoom: 1;
    *display: inline;
    left: 1px
}
#lessonSystem .lv1 .level-box {
    background-color: #fc7e0e
}
#lessonSystem .lv1 .level-box::after {
    background-color: #fc7e0e
}
#lessonSystem .lv1 .content {
    /*height: 0;*/
    padding: 0 24px 0 34px;
    background: #fc7e0e
}
#lessonSystem .lv1 .content p {
    font-size: 14px;
    line-height: 25px;
    color: #fff;
}
#lessonSystem .lv1 .content p:first-child {
    padding-top: 20px;
}
#lessonSystem .lv2 {
    /*display: inline-block;*/
    display: flex;
    _zoom: 1;
    *display: inline;
    left: 221px
}
#lessonSystem .lv2 .level-box {
    background-color: #fc6d0e
}
#lessonSystem .lv2 .level-box::after {
    background-color: #fc6d0e
}
#lessonSystem .lv2 .content {
    /*height: 0;*/
    padding: 0 24px 0 34px;
    background: #fc6d0e;
    position: relative
}
#lessonSystem .lv2 .content p {
    font-size: 14px;
    line-height: 25px;
    color: #fff
}
#lessonSystem .lv2 .content p:first-child {
    /*padding-top: 32px;*/
    padding-top: 20px;
}
#lessonSystem .lv3 {
    /*display: inline-block;*/
    display: flex;
    left: 441px
}
#lessonSystem .lv3 .level-box {
    background-color: #fc4c0e
}
#lessonSystem .lv3 .level-box::after {
    background-color: #fc4c0e
}
#lessonSystem .lv3 .content {
    /*height: 0;*/
    padding: 0 24px 0 34px;
    background: #fc4c0e
}
#lessonSystem .lv3 .content p {
    font-size: 14px;
    line-height: 25px;
    color: #fff
}
#lessonSystem .lv3 .content p:first-child {
    /*padding-top: 44px;*/
    padding-top: 20px;
}
#lessonSystem .lv4 {
    /*display: inline-block;*/
    display: flex;
    left: 661px
}
#lessonSystem .lv4 .level-box {
    background-color: #fc140e
}
#lessonSystem .lv4 .level-box::after {
    background-color: #fc140e
}
#lessonSystem .lv4 .content {
    /*height: 0;*/
    padding: 0 24px 0 34px;
    background: #fc140e
}
#lessonSystem .lv4 .content p {
    font-size: 14px;
    line-height: 25px;
    color: #fff;
}
#lessonSystem .lv4 .content p:first-child {
    /*padding-top: 56px;*/
    padding-top: 20px;
}
#lessonSystem .lv5 {
    /*display: inline-block;*/
    display: flex;
    left: 881px
}
#lessonSystem .lv5 .level-box {
    background-color: #e90c2f
}
#lessonSystem .lv5 .level-box::after {
    background-color: #e90c2f
}
#lessonSystem .lv5 .content {
    /*height: 0;*/
    padding: 0 24px 0 34px;
    background: #e90c2f
}
#lessonSystem .lv5 .content p {
    font-size: 14px;
    line-height: 25px;
    color: #fff
}
#lessonSystem .lv5 .content p:first-child {
    /*padding-top: 68px;*/
    padding-top: 20px;
}
#lessonSystem .small-btn {
    margin: 40px auto 0
}
#lessonSystem .mask {
    display: none
}
#lessonSystem .mask, #lessonSystem .content {
    transition: all 2s ease;
    -webkit-transition: all 2s ease;
    -moz-transition: all 2s ease;
    -o-transition: all 2s ease;
    -ms-transition: all 2s ease
}
#lessonSystem .mask1 {
    position: absolute;
    background: #fff;
    width: 224px;
    height: 185px;
    left: 0;
    top: 0
}
#lessonSystem .mask2 {
    position: absolute;
    background: #fff;
    width: 224px;
    height: 222px;
    left: 0;
    top: 0
}
#lessonSystem .mask3 {
    position: absolute;
    background: #fff;
    width: 224px;
    height: 272px;
    left: 0;
    top: 0
}
#lessonSystem .mask4 {
    position: absolute;
    background: #fff;
    width: 224px;
    height: 321px;
    left: 0;
    top: 0
}
#lessonSystem .mask5 {
    position: absolute;
    background: #fff;
    width: 224px;
    height: 370px;
    left: 0;
    top: 0
}
#lessonSystem .reactive-button {
    border-radius: 5px;
    display: inline-block;
    width: 156px;
    height: 38px;
    text-align: center;
    line-height: 38px;
    font-size: 18px;
    outline: 0;
    cursor: pointer;
    background: #fff;
    color: #c5002f;
    text-decoration: none;
    border: 1px solid #c5002f
}
#lessonSystem .reactive-button:hover {
    color: #fff;
    background: #d7073c
}
#lessonSystem .reactive-button:active {
    color: #fff;
    background: #b4002c
}

.kencheng_section4 {
    /*background: #f8f8f8;*/
}
.kencheng_section4 .content-box {
    /*width: 440px;*/
    width: 160px;
    height: 260px;
    position: relative;
    margin: 60px auto 90px
}
.kencheng_section4 .content-box .img-box {
    position: relative;
    width: 100%;
    height: 100%
}
.kencheng_section4 .content-box .img-box .img-arrow {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
    background: url(/static/home/img/arrow.png) no-repeat center;
    background-size: contain;
    transform: scale(0);
    -webkit-transform: scale(0);
    -moz-transform: scale(0);
    -o-transform: scale(0);
    -ms-transform: scale(0);
    transition: all .7s ease;
    -webkit-transition: all .7s ease;
    -moz-transition: all .7s ease;
    -o-transition: all .7s ease;
    -ms-transition: all .7s ease
}
.kencheng_section4 .content-box .img-box .img-arrow.animated {
    transform: scale(1);
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -o-transform: scale(1);
    -ms-transform: scale(1)
}
.kencheng_section4 .content-box .img-box .img-color {
    width: 96%;
    height: 100%;
    border-radius: 394px;
    position: absolute;
    z-index: 2;
    left: 5px;
    top: 0px;

    background: url(/static/home/img/colorful.png) no-repeat center;
    background-size: contain;
    transform: scale(0);
    -webkit-transform: scale(0);
    -moz-transform: scale(0);
    -o-transform: scale(0);
    -ms-transform: scale(0);
    transition: all .5s ease;
    -webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
    -o-transition: all .5s ease;
    -ms-transition: all .5s ease
}
.kencheng_section4 .content-box .img-box .img-color.animated {
    transform: scale(1);
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -o-transform: scale(1);
    -ms-transform: scale(1)
}
.kencheng_section4 .content-box .img-box .img-mark {
    width: 50%;
    height: 100%;
    border-radius: 180px;
    position: absolute;
    z-index: 3;
    left: 25%;
    top: 0;
     /*margin: -90px 0 0 -90px;*/

    background: url(/static/home/img/neil.png) no-repeat center;
    background-size: contain;
    transform: scale(0);
    -webkit-transform: scale(0);
    -moz-transform: scale(0);
    -o-transform: scale(0);
    -ms-transform: scale(0);
    transition: all .4s ease;
    -webkit-transition: all .4s ease;
    -moz-transition: all .4s ease;
    -o-transition: all .4s ease;
    -ms-transition: all .4s ease
}
.kencheng_section4 .content-box .img-box .img-mark.animated {
    transform: scale(1);
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -o-transform: scale(1);
    -ms-transform: scale(1)
}
.kencheng_section4 .content-box .img-box .img-mark.rote-142 {
    transform: rotate(-142deg);
    -webkit-transform: rotate(-142deg);
    -moz-transform: rotate(-142deg);
    -o-transform: rotate(-142deg);
    -ms-transform: rotate(-142deg)
}
.kencheng_section4 .content-box .img-box .img-mark.rote-88 {
    transform: rotate(-88deg);
    -webkit-transform: rotate(-88deg);
    -moz-transform: rotate(-88deg);
    -o-transform: rotate(-88deg);
    -ms-transform: rotate(-88deg)
}
.kencheng_section4 .content-box .img-box .img-mark.rote-12 {
    transform: rotate(12deg);
    -webkit-transform: rotate(12deg);
    -moz-transform: rotate(12deg);
    -o-transform: rotate(12deg);
    -ms-transform: rotate(12deg)
}
.kencheng_section4 .content-box .img-box .img-mark.rote-55 {
    transform: rotate(55deg);
    -webkit-transform: rotate(55deg);
    -moz-transform: rotate(55deg);
    -o-transform: rotate(55deg);
    -ms-transform: rotate(55deg)
}
.kencheng_section4 .content-box .img-box .img-mark.rote-116 {
    transform: rotate(116deg);
    -webkit-transform: rotate(116deg);
    -moz-transform: rotate(116deg);
    -o-transform: rotate(116deg);
    -ms-transform: rotate(116deg)
}
.kencheng_section4 .content-box .item {
    position: absolute;
    width: 240px;
    box-sizing: border-box;
    padding: 23px;
    transition: all .3s linear;
    -webkit-transition: all .3s linear;
    -moz-transition: all .3s linear;
    -o-transition: all .3s linear;
    -ms-transition: all .3s linear
}
.kencheng_section4 .content-box .item .item-title {
    font-size: 18px;
    font-weight: 600;
    line-height: 25px;
}
.kencheng_section4 .content-box .item p {
    font-size: 14px;
    line-height: 20px;
    margin-bottom: 3px;
}
.kencheng_section4 .content-box .item.item1 {
    left: -190px;
    bottom: -50px;
    transform: translate(-300px, 200px);
    -webkit-transform: translate(-300px, 200px);
    -moz-transform: translate(-300px, 200px);
    -o-transform: translate(-300px, 200px);
    -ms-transform: translate(-300px, 200px);
    opacity: .2
}
.kencheng_section4 .content-box .item.item1.animated {
    transform: translate(0px, 0);
    -webkit-transform: translate(0px, 0);
    -moz-transform: translate(0px, 0);
    -o-transform: translate(0px, 0);
    -ms-transform: translate(0px, 0);
    opacity: 1
}
.kencheng_section4 .content-box .item.item1 .item-title {
    text-align: right
}
.kencheng_section4 .content-box .item.item1 p {
    text-align: right
}
.kencheng_section4 .content-box .item.item2 {
    left: -216px;
    bottom: 138px;
    transform: translate(-300px, -70px);
    -webkit-transform: translate(-300px, -70px);
    -moz-transform: translate(-300px, -70px);
    -o-transform: translate(-300px, -70px);
    -ms-transform: translate(-300px, -70px);
    opacity: .2;
}
.kencheng_section4 .content-box .item.item2.animated {
    transform: translate(0px, 0);
    -webkit-transform: translate(0px, 0);
    -moz-transform: translate(0px, 0);
    -o-transform: translate(0px, 0);
    -ms-transform: translate(0px, 0);
    opacity: 1
}
.kencheng_section4 .content-box .item.item2 .item-title {
    text-align: right
}
.kencheng_section4 .content-box .item.item2 p {
    text-align: right
}
.kencheng_section4 .content-box .item.item3 {
    left: 108px;
    bottom: 183px;
    margin-left: -10px;
    transform: translate(300px, -40px);
    -webkit-transform: translate(300px, -40px);
    -moz-transform: translate(300px, -40px);
    -o-transform: translate(300px, -40px);
    -ms-transform: translate(300px, -40px);
    opacity: .2
}
.kencheng_section4 .content-box .item.item3.animated {
    transform: translate(0px, 0);
    -webkit-transform: translate(0px, 0);
    -moz-transform: translate(0px, 0);
    -o-transform: translate(0px, 0);
    -ms-transform: translate(0px, 0);
    opacity: 1
}
.kencheng_section4 .content-box .item.item3 .item-title {
    text-align: left
}
.kencheng_section4 .content-box .item.item3 p {
    text-align: left
}
.kencheng_section4 .content-box .item.item4 {
    left: 125px;
    bottom: 77px;
    margin-left: 20px;
    transform: translate(280px, 0);
    -webkit-transform: translate(280px, 0);
    -moz-transform: translate(280px, 0);
    -o-transform: translate(280px, 0);
    -ms-transform: translate(280px, 0);
    opacity: .2
}
.kencheng_section4 .content-box .item.item4.animated {
    transform: translate(0px, 0);
    -webkit-transform: translate(0px, 0);
    -moz-transform: translate(0px, 0);
    -o-transform: translate(0px, 0);
    -ms-transform: translate(0px, 0);
    opacity: 1
}
.kencheng_section4 .content-box .item.item4 .item-title {
    text-align: left
}
.kencheng_section4 .content-box .item.item4 p {
    text-align: left
}
.kencheng_section4 .content-box .item.item5 {
    left: 80px;
    bottom: -80px;
    margin: 0px;
    transform: translate(360px, 100px);
    -webkit-transform: translate(360px, 100px);
    -moz-transform: translate(360px, 100px);
    -o-transform: translate(360px, 100px);
    -ms-transform: translate(360px, 100px);
    opacity: .2
}
.kencheng_section4 .content-box .item.item5.animated {
    transform: translate(0px, 0);
    -webkit-transform: translate(0px, 0);
    -moz-transform: translate(0px, 0);
    -o-transform: translate(0px, 0);
    -ms-transform: translate(0px, 0);
    opacity: 1
}
.kencheng_section4 .content-box .item.item5 .item-title {
    text-align: left
}
.kencheng_section4 .content-box .item.item5 p {
    text-align: left
}
.kencheng_section4 .content-box .item:hover {
    background: #fff;
    border-radius: 6px;
    box-shadow: 0 0 29px 2px rgba(200, 200, 200, .29)
}
.kencheng_section4 .btn-wrapper {
    margin-bottom: 0
}
.kencheng_section4 .btn-wrapper .btn {
    /*width: 200px*/
}

.kencheng_section5 {
    padding-bottom: 0
}
.kencheng_section5 .content-box {
    width: 772px;
    height: 440px;
    background: url(/static/home/img/lesson_img1.png) no-repeat 60px bottom;
    background-size: 500px;
    position: relative;
    margin: 140px auto -44px;
    transition: all .4s linear;
    -webkit-transition: all .4s linear;
    -moz-transition: all .4s linear;
    -o-transition: all .4s linear;
    -ms-transition: all .4s linear
}
.kencheng_section5 .content-box.animated {
    background: url(/static/home/img/lesson_img1.png) no-repeat 60px bottom;
    background-size: contain
}
.kencheng_section5 .content-box .item {
    position: absolute;
    width: 128px;
    height: 180px
}
.kencheng_section5 .content-box .item .item-title {
    font-size: 20px;
    font-weight: 700;
    line-height: 32px;
    text-align: center
}
.kencheng_section5 .content-box .item p {
    font-size: 16px;
    line-height: 24px;
    color: #999;
    text-align: center;
    position: absolute;
    left: -68px;
    bottom: 0;
    width: 264px
}
.kencheng_section5 .content-box .item .icon-box {
    width: 150px;
    height: 100px;
    transition: all .3s linear;
    -webkit-transition: all .3s linear;
    -moz-transition: all .3s linear;
    -o-transition: all .3s linear;
    -ms-transition: all .3s linear
}
.kencheng_section5 .content-box .item.item1 {
    left: -100px;
    bottom: 210px;
    transition: all .5s linear;
    -webkit-transition: all .5s linear;
    -moz-transition: all .5s linear;
    -o-transition: all .5s linear;
    -ms-transition: all .5s linear;
    transform: translate(280px, 130px);
    -webkit-transform: translate(280px, 130px);
    -moz-transform: translate(280px, 130px);
    -o-transform: translate(280px, 130px);
    -ms-transform: translate(280px, 130px);
    opacity: .2
}
.kencheng_section5 .content-box .item.item1 .icon-box {
    background: url(/static/home/img/dengpao.png) no-repeat 15px -127px;
    background-size: 100px
}
.kencheng_section5 .content-box .item.item1.animated {
    transform: translate(0px, 0);
    -webkit-transform: translate(0px, 0);
    -moz-transform: translate(0px, 0);
    -o-transform: translate(0px, 0);
    -ms-transform: translate(0px, 0);
    opacity: 1
}
.kencheng_section5 .content-box .item.item2 {
    left: 50%;
    bottom: 360px;
    transition: all .6s linear;
    -webkit-transition: all .6s linear;
    -moz-transition: all .6s linear;
    -o-transition: all .6s linear;
    -ms-transition: all .6s linear;
    transform: translate(-60px, 200px);
    -webkit-transform: translate(-60px, 200px);
    -moz-transform: translate(-60px, 200px);
    -o-transform: translate(-60px, 200px);
    -ms-transform: translate(-60px, 200px);
    opacity: .2
}
.kencheng_section5 .content-box .item.item2 .icon-box {
    background: url(/static/home/img/dengpao.png) no-repeat 15px -296px;
    background-size: 100px
}
.kencheng_section5 .content-box .item.item2.animated {
    transform: translate(0px, 0);
    -webkit-transform: translate(0px, 0);
    -moz-transform: translate(0px, 0);
    -o-transform: translate(0px, 0);
    -ms-transform: translate(0px, 0);
    opacity: 1
}
.kencheng_section5 .content-box .item.item3 {
    left: 100%;
    bottom: 222px;
    margin-left: -75px;
    transition: all .7s linear;
    -webkit-transition: all .7s linear;
    -moz-transition: all .7s linear;
    -o-transition: all .7s linear;
    -ms-transition: all .7s linear;
    transform: translate(-244px, 220px);
    -webkit-transform: translate(-244px, 220px);
    -moz-transform: translate(-244px, 220px);
    -o-transform: translate(-244px, 220px);
    -ms-transform: translate(-244px, 220px);
    opacity: .2
}
.kencheng_section5 .content-box .item.item3 .icon-box {
    background: url(/static/home/img/dengpao.png) no-repeat 15px -454px;
    background-size: 100px
}
.kencheng_section5 .content-box .item.item3.animated {
    transform: translate(0px, 0);
    -webkit-transform: translate(0px, 0);
    -moz-transform: translate(0px, 0);
    -o-transform: translate(0px, 0);
    -ms-transform: translate(0px, 0);
    opacity: 1
}
.kencheng_section5 .content-box .item:hover .icon-box {
    transform: scale(1.1);
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -o-transform: scale(1.1);
    -ms-transform: scale(1.1)
}
.kencheng_section5 .content-box .light-icon {
    position: absolute;
    left: 90px;
    top: -30px;
    width: 60px;
    height: 60px;
    background: url(/static/home/img/dengpao.png) no-repeat 0 0;
    background-size: 100px;
    transition: all .6s linear;
    -webkit-transition: all .6s linear;
    -moz-transition: all .6s linear;
    -o-transition: all .6s linear;
    -ms-transition: all .6s linear;
    opacity: .2
}
.kencheng_section5 .content-box .light-icon.animated {
    opacity: 1;
    -moz-animation: changesize 1.5s infinite;
    -webkit-animation: changesize 1.5s infinite;
    animation: changesize 1.5s infinite;
    -ms-animation: changesize 1.5s infinite;
    -o-animation: changesize 1.5s infinite
}
.kencheng_section5 .btn-wrapper .btn {
    width: 120px
}

.kencheng_section6 {
    background: #f8f8f8;
}
.kencheng_section6 .content-box {
    width: 100%;
    margin: 0 auto ;
    overflow: hidden;
    background-size: contain
}
.kencheng_section6 .content-box .top-box {
    /*width: 1058px;
    height: 427px;
    background: url(/static/home/img/teachers.png) no-repeat center bottom;
    background-size: contain;*/
    margin: 0 auto;
    transition: all .6s linear;
    -webkit-transition: all .6s linear;
    -moz-transition: all .6s linear;
    -o-transition: all .6s linear;
    -ms-transition: all .6s linear;
    opacity: .6
}
.kencheng_section6 .content-box .top-box.animated {
    opacity: 1
}
.kencheng_section6 .content-box .bottom-box {
    background: #fff url(/static/home/img/bg-mp.png) no-repeat center;
    background-size: contain;
    box-shadow: 0 0 29px 2px rgba(200, 200, 200, .29);
    border-radius: 10px;
    width: 100%;
    height: 220px;
    box-sizing: border-box;
    padding: 60px 10px 60px;
    position: relative;
}
.kencheng_section6 .content-box .bottom-box .line {
    position: absolute;
    width: 120px;
    height: 3px;
    background: #f81536;
    top: 26px;
    left: 50%;
    margin-left: -60px;
}
.kencheng_section6 .content-box .bottom-box p {
    color: #666;
    font-size: 16px;
    line-height: 30px;
    text-align: center;
    transition: all .7s linear;
    -webkit-transition: all .7s linear;
    -moz-transition: all .7s linear;
    -o-transition: all .7s linear;
    -ms-transition: all .7s linear;
    transform: translate(0px, 250px);
    -webkit-transform: translate(0px, 250px);
    -moz-transform: translate(0px, 250px);
    -o-transform: translate(0px, 250px);
    -ms-transform: translate(0px, 250px);
    opacity: .2
}
.kencheng_section6 .content-box .bottom-box.animated p {
    transform: translate(0, 0);
    -webkit-transform: translate(0, 0);
    -moz-transform: translate(0, 0);
    -o-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    opacity: 1
}

@media (min-width: 992px) {
    .kencheng_section1 .layout .content-wrapper .content-box .left-box {
        width: 454px;
        position: absolute;
        left: 100px;
        top: 40px;
        padding: 0px;
    }
    .kencheng_section1 .layout .content-wrapper .content-box .left-box p.pink-bg {
        height: 36px;
        padding: 0 40px;
    }
    .kencheng_section1 .layout .content-wrapper {
        position: relative;
        width: 100%;
        height: 506px
    }

    .kencheng_section2 .item-box .item .content-box {
        padding: 50px;
    }
    .kencheng_section2 .item-box .item .content-box p {
        font-size: 16px;
        line-height: 24px;
        margin-bottom: 1rem;
    }

    #lessonSystem .gradeList li {
        margin: 0px 10px;
        line-height: 46px;
        font-size: 20px;
    }
    #lessonSystem .gradeList  .nav-link{
        width: 158px;
        border-radius: 30px;
    }
    #lessonSystem .gradeList {
        padding-top: 30px;
        text-align: center;
        display: block;
    }

    #lessonSystem .subjects li {
        font-size: 18px;
        line-height: 38px;
        margin-top: 19px;
        margin-right: 10px;
        width: 98px;

    }
    #lessonSystem .subjects  .nav-link{
        width: 100%;
        padding:0px;
        display: inline-block;
        _zoom: 1;
        cursor: pointer;
    }

    #lessonSystem .cntBox {
        position: relative;
        /*height: 410px;*/
        overflow: hidden;
        display: ruby;
    }
    #lessonSystem .lv {
        width: 19%;
        bottom: 0;
        padding-top: 25px;
        overflow: hidden;
        display: flow;
    }
    #lessonSystem .lv .level-box {
        position: relative;
        border-radius: 4px;
        border-bottom-left-radius: 8px;
        padding: 10px;

        height: auto;
        margin-right: 0px;
        width: 100%;
    }
    #lessonSystem .lv .outer {
        margin-top: 1px;
        *width: 224px;
        position: relative;

    }

    #lessonSystem .lv1 {
        display: inline-block;
        _zoom: 1;
        *display: inline;
        left: 1px
    }
    #lessonSystem .lv2 {
        display: inline-block;
        _zoom: 1;
        *display: inline;
        left: 221px
    }
    #lessonSystem .lv3 {
        display: inline-block;
        left: 441px
    }
    #lessonSystem .lv4 {
        display: inline-block;
        left: 661px
    }
    #lessonSystem .lv5 {
        display: inline-block;
        left: 881px
    }

    #lessonSystem .lv1 .content {
        height: 205px;
    }
    #lessonSystem .lv2 .content {
        height: 217px;
    }
    #lessonSystem .lv3 .content {
        height: 229px;
    }
    #lessonSystem .lv4 .content {
        height: 241px;
    }
    #lessonSystem .lv5 .content {
        height: 253px;
    }

    #lessonSystem .lv .content p {
        margin-bottom: 20px;
    }

    #lessonSystem .lv1 .content p:first-child {
        padding-top: 20px;
    }
    #lessonSystem .lv2 .content p:first-child {
        padding-top: 32px;
    }
    #lessonSystem .lv3 .content p:first-child {
        padding-top: 44px;
    }
    #lessonSystem .lv4 .content p:first-child {
        padding-top: 56px;
    }
    #lessonSystem .lv5 .content p:first-child {
        padding-top: 68px;
    }


    .kencheng_section4 .content-box {
        width: 440px;
        height: 425px;
        position: relative;
        margin: 60px auto 90px
    }
    .kencheng_section4 .content-box .img-box {
        position: relative;
        width: 100%;
        height: 100%
    }

    .kencheng_section4 .content-box .img-box .img-arrow {
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
    }

    .kencheng_section4 .content-box .img-box .img-color {
        width: 394px;
        height: 394px;
        left: 22px;
        top: 15px;
    }
    .kencheng_section4 .content-box .img-box .img-mark {
        width: 180px;
        height: 180px;
        border-radius: 180px;
        position: absolute;
        z-index: 3;
        left: 50%;
        top: 50%;
        margin: -90px 0 0 -90px;
    }
    .kencheng_section4 .content-box .item .item-title {
        font-size: 20px;
        font-weight: 600;
        line-height: 32px;
    }
    .kencheng_section4 .content-box .item p {
        font-size: 16px;
        line-height: 24px;
        margin-bottom: 5px;
    }
    .kencheng_section4 .content-box .item.item1 {
        left: -250px;
        bottom: 45px;
    }
    .kencheng_section4 .content-box .item.item2 {
        left: -230px;
        bottom: 300px;
    }
    .kencheng_section4 .content-box .item.item3 {
        left: 100%;
        bottom: 328px;
        margin-left: -10px;
    }
    .kencheng_section4 .content-box .item.item4 {
        left: 100%;
        bottom: 100px;
        margin-left: 20px;
    }
    .kencheng_section4 .content-box .item.item5 {
        left: 100%;
        bottom: -145px;
        margin: 0 0 0 -70px;
    }



    .kencheng_section6 .content-box .bottom-box {
        height: 300px;
        padding: 100px 144px 60px;
    }
    .kencheng_section6 .content-box .bottom-box .line {
        top: 54px;
    }
    .kencheng_section6 .content-box .bottom-box p {
        font-size: 18px;
        line-height: 36px;
    }


}

/*===================*/
#wrapper {
    background: #F7F7F7
}
#wrapper .layout h1 {
    font-size: 36px;
    padding-top: 10px;
    background-color: #fff
}
#wrapper .layout h1 a {
    text-decoration: underline;
    color: inherit;
    font-size: 36px;
    line-height: 1.5;
}
#wrapper .layout .protocol-box {
    background: #FFF;
    padding: 10px;
}
#wrapper .layout .protocol-box .title {
    margin: 10px auto
}
#wrapper .layout .protocol-box .protocol-page {
    margin-top: 8px;
}
#wrapper .layout .protocol-box .protocol-page .introduction {
    margin-top: 12px
}
#wrapper .layout .protocol-box .footer {
    padding: 15px 0
}
#wrapper .layout .protocol-box h2 {
    font-size: 30px;
    color: #333;
    margin: 18px auto
}
#wrapper .layout .protocol-box h3,#wrapper .layout .protocol-box h4,#wrapper .layout .protocol-box h5 {
    font-weight: 600;
    margin-top: 6px
}
#wrapper .layout .protocol-box h3 {
    font-size: 26px;
    line-height: 1.5;
    margin-top: 16px
}
#wrapper .layout .protocol-box h4 {
    font-size: 22px;
    line-height: 2;
    margin-top: 8px
}
#wrapper .layout .protocol-box p,#wrapper .layout .protocol-box h5,#wrapper .layout .protocol-box span {
    font-size: 18px;
    line-height: 2;
    color: #333
}
#wrapper .layout .protocol-box p {
    margin-bottom: 5px
}
#wrapper .layout .protocol-box .content-right p {
    text-align: right!important
}
#wrapper .layout .protocol-box .bold {
    font-weight: 600;
    text-decoration: underline
}
#wrapper .layout .protocol-box ol {
    font-size: 16px;
}

#wrapper .layout .protocol-box table {
    border: 1px solid #ccc;
    margin: 0;
    padding: 0;
    border-collapse: collapse;
    border-spacing: 0;
    table-layout: fixed!important;
    border: 0
}
#wrapper .layout .protocol-box table td,#wrapper .layout .protocol-box table th {
    padding: 10px;
    white-space: nowrap;
    word-break: keep-all;
    border: solid #676767 1px;
    text-align: left;
    white-space: pre-line;
    word-break: break-all!important;
    word-wrap: break-word!important;
    vertical-align: middle!important;
    white-space: normal!important;
    height: auto;
    vertical-align: text-top;
    padding: 6px;
    display: table-cell;
    font-size: 16px;
}
#wrapper .layout .protocol-box table td.new,#wrapper .layout .protocol-box table th.new {
    font-size: 18px;
}
#wrapper .layout .protocol-box table td.bold,#wrapper .layout .protocol-box table th.bold {
    text-decoration: none!important
}
#wrapper .layout .protocol-box table td:nth-child(1),#wrapper .layout .protocol-box table th:nth-child(1) {
    width: 20%;
}
#wrapper .layout .protocol-box table td:nth-child(2),#wrapper .layout .protocol-box table th:nth-child(2) {
    width: 30%;
}
#wrapper .layout .protocol-box table td:nth-child(3),#wrapper .layout .protocol-box table th:nth-child(3) {
    width:  30%;
}
#wrapper .layout .protocol-box table td:nth-child(4),#wrapper .layout .protocol-box table th:nth-child(4) {
    width: 20%;
}
#wrapper .layout .protocol-box table th {
    text-transform: uppercase;
    letter-spacing: 1px
}
/*===================*/


.us_layout .box img {
    float: left;
    margin-right: 50px
}
.us_layout {
    margin: 60px 0px;
    font-size: 16px;
    line-height: 26px;
}
.us_layout .title {
    display: inline-block;
    font-size: 28px;
    color: #373737;
    font-weight: 700;
}
.us_layout .title::before {
    content: '';
    display: inline-block;
    position: relative;
    margin-right: 10px;
    top: 4px;
    width: 6px;
    height: 30px;
    background: #c70031;
}
.us_layout .box {
    *zoom: 1;
}
.us_layout .box .tip {
    margin: 20px 0;
    padding: 0 13px;
    height: 34px;
    line-height: 34px;
    font-size: 22px;
    background: #c70031;
    color: #fff;
}
.us_layout .box:before, .us_layout .box:after {
    display: table;
    content: "";
    line-height: 0
}
.us_layout .box:after {
    clear: both
}
.us_layout .box .desc {
    /*position: relative;*/
    /*float: left;*/
    /*padding: 20px 32px;*/
    /*!*width: 726px;*!*/
    /*width: 100%;*/
    /*height: 140px;*/
    /*border-radius: 8px;*/
    /*background: #fff*/
}
.us_layout .box .desc::before {
    /*content: '';*/
    /*position: absolute;*/
    /*width: 0;*/
    /*height: 0;*/
    /*border: 15px solid transparent;*/
    /*border-right-color: #fff;*/
    /*left: -30px;*/
    /*top: 26%*/
}
.us_layout .box .desc h3 {
    font-weight: 700;
    float: left;
    padding: 5px 10px;
    /*margin: 5px;*/
    /* width: 26%; */
    /* height: 160px; */
    border-radius: 8px;
    font-size: 22px;
    background: #c70031;
    color: #fff;
}
.us_layout .box .desc p {
    /*font-size: 16px;*/
    /*line-height: 26px;*/
    /*padding: 10px 20px;*/
    /*margin: 5px;*/
    /*border-radius: 8px;*/
}
.us_layout .box .desc .tj span {
    font-size: 16px;
    font-weight: 700;
    /*margin: 10px;*/
    color: #c70031;
    text-shadow: 3px 1px 1px rgba(235, 28, 0, 0);
}
.us_layout .box .desc p span {
    font-size: 30px;
    font-weight: 700;
    margin: 10px;
    color: #c70031;
    text-shadow: 3px 1px 1px rgba(235, 28, 0, .6);
}
.us_layout p {
    margin-top: 20px;
    font-size: 16px;
    line-height: 26px;
}

/*===================*/


.head-top {
    background: #ce3735;
    color: #ffffff;
}
.teachers-list .teachers-item {
    /*position: relative;*/
    /*float: left;*/
    /*padding: 40px 0;*/
    /*width: 50%;*/
    box-sizing: border-box;
    border-radius: 10px;
    background: #fff;
    text-align: center
}

.teachers-list .teachers-item .teachers-img {
    margin: 0 auto;
    margin-right: 20px;
    width: 220px;
    height: 293px;
    float: left;
    border-radius: 20px 0px 20px 10px;
    border: 10px solid #e32d34;
    border-top: 0px;
    border-right: 0px;
}

.teachers-list .teachers-item .teachers-mark {
    width: 80px;
    position: absolute;
    top: 44px;
    left: 30px;
}
.teachers-list .teachers-item .teachers-des {

    font-size: 16px;
    padding: 20px;
    text-align: left;
}
.teachers-list .teachers-item .teachers-name {
    color: #353638;
    text-align: right;
    font-size: 20px;
    padding: 20px;
    font-weight: 700;
    margin-top: 4px
}
/*===================*/


.contact-head-top {
    height: 450px;
    background: url(https://web-data.zmlearn.com/image/cAjYWTN1f5wGHdebRcEStd/banner.png) no-repeat center;
    color: #424242;
}
.contact-box{
    margin-top: 120px;
}
.contact-box .item {
    /*float: left;*/
    /*width: 390px;*/
    /*height: 200px;*/
    margin-bottom: 116px;
    text-align: center
}
.contact-box .item .top {
    margin-bottom: 82px
}
.contact-box .item .icon {
    display: inline-block
}
.contact-box .item .icon.icon1 {
    background: url(https://web-data.zmlearn.com/image/6B4RoZjsRsjfKn46P4LW3d/icon1.png) no-repeat center;
    background-size: 75px 83px;
    width: 75px;
    height: 83px;
    margin-bottom: 11px
}
.contact-box .item .icon.icon2 {
    background: url(https://web-data.zmlearn.com/image/oyj2iKBHZCewPmUEcShT4K/icon2.png) no-repeat center;
    background-size: 73px 75px;
    width: 73px;
    height: 75px;
    margin-bottom: 19px
}
.contact-box .item .icon.icon3 {
    background: url(https://web-data.zmlearn.com/image/eT53vCxHDFqmSorxjmLhPD/icon3.png) no-repeat center;
    background-size: 105px 74px;
    width: 105px;
    height: 74px;
    margin-bottom: 20px
}
.contact-box .item .icon.icon4 {
    background: url(https://web-data.zmlearn.com/image/qYjVEuGDYEp3UjLpiMWLKP/icon4.png) no-repeat center;
    background-size: 95px 82px;
    width: 95px;
    height: 82px;
    margin-bottom: 16px
}
.contact-box .item .icon.icon5 {
    background: url(https://web-data.zmlearn.com/image/3ZgTzEoNG4kTEAabDqEjqB/icon5.png) no-repeat center;
    background-size: 87px 87px;
    width: 87px;
    height: 87px;
    margin-bottom: 11px
}
.contact-box .item .icon.icon6 {
    background: url(https://web-data.zmlearn.com/image/tvJbZyjqTcUzvyPxvFPdpH/icon6.png) no-repeat center;
    background-size: 97px 88px;
    width: 97px;
    height: 88px;
    margin-bottom: 9px
}
.contact-box .item .icon.icon7 {
    background: url(https://web-data.zmlearn.com/image/58hkkAA36WRxPwo9VYTrUc/icon7.png) no-repeat center;
    background-size: 75px 83px;
    width: 75px;
    height: 83px;
    margin-bottom: 11px
}
.contact-box .item h2 {
    font-size: 24px;
    color: #373737;
    line-height: 44px
}
.contact-box .item  p {
    font-size: 18px;
    color: #9e9e9e;
    line-height: 24px
}
/*===================*/

.homePage .quick-appoint-area {
    background-color: #f8f8f8;
    padding: .4rem
}
.homePage .quick-appoint-area .quick-appoint-box {
    background: #fff;
    border-radius: .13333rem;
    box-shadow: 0 0 .18667rem .01333rem hsla(0,0%,78.4%,.31);
    padding-bottom: .66667rem
}
.homePage .quick-appoint-area .quick-appoint-box .dialog-title {
    -webkit-box-align: center;
    -webkit-box-pack: center;
    -webkit-align-items: center;
    align-items: center;
    color: #333;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    font-size: 22px;
    font-weight: 500;
    -webkit-justify-content: center;
    justify-content: center;
    line-height:1.5;
    margin-bottom: 5px;
    padding-top: 15px;
    text-align: center;
    text-shadow: 1px 1px 2px rgba(235,28,0,.44)
}
.homePage .quick-appoint-area .quick-appoint-box .dialog-title .highlight {
    color: #f80000;
    font-size: 30px;
    font-weight: 700;
    line-height: 1.5
}
.homePage .quick-appoint-area .homepageAppointForm {
    margin: 15px 10px 10px 10px;
}
.homePage .quick-appoint-area .homepageAppointForm .form-control {
    border-radius: 2rem;
}
.homePage .quick-appoint-area .homepageAppointForm .input-group-text {
    border-radius: 2rem;
}
.homePage .quick-appoint-area .homepageAppointForm .btn {
    border-radius: 2rem;
}
.homePage .quick-appoint-area .homepageAppointForm .input-group>.form-control:not(:first-child) {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}
.homePage .quick-appoint-area .homepageAppointForm .input-group>.input-group-prepend>.input-group-text {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

/*===================*/
/*===================*/
/*===================*/
/*===================*/
/*===================*/
/*===================*/