.swiper-fixed-header {
    height: 2.9688rem
}

.swiper-fixed-header .fixed-style {
    position: fixed;
    left: 50%;
    -webkit-transform: translate(-50%);
    transform: translate(-50%);
    top: 0;
    z-index: 9999
}

.swiper-fixed-header-in1 {
    font-size: .75rem;
    height: 2.9688rem;
    line-height: 1.35rem;
    color: #fff;
    background-color: #fff;
    text-align: center;
    width: 23.4375rem
}

@media (min-width:750px) {
    .swiper-fixed-header-in1 {
        width: 30rem;
        font-size: .6875rem;
        line-height: 1.125rem
    }
}

.swiper-fixed-header .swiper-container {
    height: 100%
}

.swiper-fixed-header .swiper-slide {
    width: 3.875rem !important;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    margin: .375rem auto;
    padding: .375rem .2188rem .3125rem .3125rem;
    height: auto;
    cursor: pointer;
    background-size: cover;
    position: relative
}

@media (min-width:750px) {
    .swiper-fixed-header .swiper-slide {
        width: 4.9594rem !important
    }
}

.swiper-fixed-header .swiper-slide:nth-last-child(2):after {
    content: "HOT"
}

.swiper-fixed-header .swiper-slide:last-child:after,
.swiper-fixed-header .swiper-slide:nth-last-child(2):after {
    padding: 2px 5px;
    height: .4375rem;
    line-height: .4375rem;
    font-size: .5rem;
    font-weight: 500;
    color: #fff;
    background: #e72f2f;
    border-radius: 4px;
    position: absolute;
    top: -.25rem;
    right: -.4375rem
}

.swiper-fixed-header .swiper-slide:last-child:after {
    content: "NEW"
}

.swiper-fixed-header .swiper-slide .text {
    -webkit-flex: 1 1;
    -ms-flex: 1 1;
    flex: 1 1;
    text-align: start;
    font-weight: 500;
    font-size: .6875rem;
    color: #fff;
    line-height: .75rem;
    height: 1.5rem;
    word-break: break-all;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

.swiper-fixed-header .swiper-slide .jiantou {
    margin-top: auto;
    margin-bottom: 3px;
    width: .5625rem;
    height: .5625rem
}

.swiper-slide {
    -webkit-transition: opacity .3s ease;
    transition: opacity .3s ease
}

.swiper-slide:hover {
    opacity: .8
}

.recently-order {
    padding: .2813rem .75rem;
    height: 3.125rem;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    background: -webkit-gradient(linear, left bottom, left top, from(#ffe7c6), to(#f9f2ea));
    background: -webkit-linear-gradient(bottom, #ffe7c6, #f9f2ea);
    background: linear-gradient(0deg, #ffe7c6, #f9f2ea)
}

.recently-order .recently-order-icon {
    margin-right: .5313rem;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: .25rem
}

.recently-order .recently-order-content {
    margin-right: .5313rem;
    -webkit-flex: 1 1;
    -ms-flex: 1 1;
    flex: 1 1;
    min-width: 0
}

.recently-order .recently-order-content-title {
    font-weight: 700;
    font-size: .9375rem;
    color: #502e1f;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.recently-order .recently-order-content-status {
    margin-top: .2813rem;
    font-weight: 400;
    font-size: .875rem;
    color: #502e1f
}

.recently-order .recently-order-btn {
    width: 6.25rem;
    height: 2.625rem
}

.query-latest-order {
    line-height: 3.125rem
}

.query-latest-order,
.query-latest-order .query-lo-wrapper {
    height: 3.125rem;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex
}

.query-latest-order .query-lo-wrapper {
    background: #23110f;
    width: 100%;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center
}

.query-latest-order .query-lo-wrapper .tips {
    color: #d2a771;
    font-size: .8438rem
}

.query-latest-order .query-lo-wrapper .close {
    width: 1.3125rem;
    height: 1.3125rem;
    border: 1px solid #d2a771;
    border-radius: 50%;
    margin: 0 .9375rem 0 .625rem;
    position: relative;
    cursor: pointer
}

.query-latest-order .query-lo-wrapper .close:after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    width: .7188rem;
    height: .7188rem;
    background: url(../images/close.939dae2.png) no-repeat 50%;
    background-size: 100% 100%
}

.query-latest-order .right {
    width: 7.1875rem;
    background: #c71f1c;
    text-align: center;
    font-size: .9375rem;
    color: #d2a771;
    cursor: pointer
}

.fixed-logo {
    position: absolute;
    top: .625rem;
    right: .3125rem;
    z-index: 40
}

.fixed-logo img {
    width: 6.4063rem;
    height: 1.75rem
}

@media (min-width:750px) {
    .fixed-logo img {
        width: 7.6875rem;
        height: 2.0938rem
    }
}

.line_fixed {
    position: fixed;
    bottom: 18%;
    right: 3%;
    z-index: 11;
    cursor: pointer
}

@media (min-width:750px) {
    .line_fixed {
        width: 10% !important
    }
}

@font-face {
    font-family: "iconfont";
    src: url("data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAMoAAsAAAAABtwAAALbAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCDBgqBRIFMATYCJAMMCwgABCAFhG0HOBsUBhHVk2tkn5B0jh22foAsTTOkhAhkdd2o8eSbdgQmbSzpw9p5ttqRwwMiTeufrignII+8TATf73235577X2pTiSpVZWJLG98boDACi+pCg5FgFINQ3Yjn85zrbxPYm41Ga/C4sojQouNrrcLDE7y2LL4GKOCiFwBbm3YNYyIUS3IefJf/kV+McCF0uLrBaZBFkSeC/WI3wzGztwZYYAyXW/X7hffYVWeO0fohQktQGkKS98BJHbrOiFmUlRExgDl0QPU/h0ublgUyP1AucwxqUy/AOKCAxl5kBXKCfsPYTQQOYTuBXjN4xH5jc6BbBfoF4nVMR9Gdc6qqFekWmpqpVbyn7vK2BHjHfx//ocaJopPA0INXWgLbv/yr/LdHEVwI6uwOEqugEne1wQspLDylV1jbExtVKHN52pYzQ34D/+FRBNEA6f1gUQsVfoGZqUiVfddbJWhQsQYuANy4I0P29vcPs0e7v7jS2lHa9+Qwp6c7P+4N4p8JepZW8cT7hKvT+PxmgnZzyu7gy1aaCWae7fq6PTavX/NnziCN0klRGnsbF6Wt03S6Lil68w301F66dTadsuwkx3EX8QD0zO/kEmjPkt/7N37cYRKs4GfO7e2Vfql0K/Rm/UxWz4oacoAqq8/EzNicFm9MX1DptkULsI56jpdO3HA4dJtIoegyDanbLLJiV6Gjzzo0um1BrxXG7D5jclLUHiwrKxCGzaEY9A3SsB2yYh/QMekPjeHYQq+z0JJ95gONF4xK0IL+QTQ0OqSRi8i8oV96xVkOJ7yQ5+iBMiuKkRZH5DlGzG9fiThwTAM0ym7Y9wQTU0IjWRCZ6jx3dR/KDA2rywqjErSgfxANjY7Wlkvp+zf0S6+4pWxA/UKeY+NQZkUPZCsce5Xdyy3z21ciDhzTAI2ixx4GCab6TgmNZGGEf6pzrZrrK8zWFw/ftw56V2DdXJfIqPK0fBc17o6mW60AAA==") format("woff2")
}

.iconfont {
    font-family: "iconfont" !important;
    font-size: inherit;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

.icon-gouxuan:before {
    content: "\e631"
}

.icon-Tick:before {
    content: "\e619"
}

.common-privacy-tips {
    font-size: .8125rem;
    padding: .625rem;
    text-align: center
}

.common-privacy {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    padding: .3125rem 0
}

.common-privacy-label {
    display: inline-block;
    width: .8125rem;
    height: .8125rem;
    border: 1px solid #f8c003;
    border-radius: .8125rem;
    margin-right: .375rem;
    color: #f8c003
}

.common-privacy-label i {
    display: block;
    text-align: center;
    font-size: .8125rem;
    line-height: .8125rem;
    cursor: pointer
}

.common-privacy-text {
    font-size: .8125rem;
    color: #fff;
    text-align: center
}

.common-privacy-text a {
    color: #f8c003
}

.zxcs-form-common {
    border: 1px solid #eed0aa;
    border-radius: .25rem;
    overflow: hidden
}

.zxcs-form-common .zxcs-form-field {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    height: 2.1875rem;
    background-color: #fff;
    border-top: 1px solid #eed0aa;
    border-color: inherit;
    -webkit-box-sizing: content-box;
    box-sizing: content-box
}

.zxcs-form-common .zxcs-form-field:first-of-type {
    border-top: none
}

.zxcs-form-common .zxcs-form-field .zxcs-label {
    width: 4.8438rem;
    font-size: .875rem;
    color: #6f0011;
    text-align: center;
    line-height: 2.1875rem
}

.zxcs-form-common .zxcs-form-field .zxcs-input {
    height: 100%;
    padding: .4688rem 0
}

.zxcs-form-common .zxcs-form-field .zxcs-input-el {
    border: none;
    width: 100%;
    height: 100%;
    font-size: .875rem;
    line-height: 1.4
}

.zxcs-form-common .zxcs-form-field .zxcs-input-el::-webkit-input-placeholder {
    color: #666;
    font-size: .875rem;
    line-height: 1.4
}

.zxcs-form-common .zxcs-form-field .zxcs-input-el:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 9.375rem #fff inset;
    box-shadow: inset 0 0 0 9.375rem #fff
}

.zxcs-form-common .zxcs-form-field .zxcs-input-control {
    -webkit-flex: 1 1;
    -ms-flex: 1 1;
    flex: 1 1;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center
}

.zxcs-form-common .zxcs-form-field .zxcs-radio {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-justify-content: flex-start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center
}

.zxcs-form-common .zxcs-form-field .zxcs-radio input {
    display: none
}

.zxcs-form-common .zxcs-form-field .zxcs-picker {
    font-size: .875rem;
    line-height: 2.1875rem;
    color: #666
}

.zxcs-form-common .zxcs-form-field .radio-option {
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    border: 1px solid #eedbcb;
    background-color: #fffbf2;
    text-align: center;
    color: #666;
    line-height: 1.625rem;
    font-size: .875rem;
    margin-right: .8125rem
}

.zxcs-form-common .zxcs-form-field .radio-option.checked {
    background-color: #9d2e41;
    color: #fff
}

.zxcs-form-en .enform-item {
    padding: .5625rem;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    height: 4.3125rem;
    margin-bottom: .75rem;
    border-radius: .625rem;
    overflow: hidden;
    background-color: #fff;
    position: relative;
    border: 1px solid #ffb934;
    font-size: 1.0625rem
}

.zxcs-form-en .enform-item .enform-title {
    color: #bf9c7b;
    padding-bottom: .3125rem;
    font-size: 1rem
}

.zxcs-form-en .enform-item .enform-input {
    width: 100%;
    border: none;
    border-radius: 0;
    outline: none;
    color: #b16318;
    font-weight: 700;
    background: hsla(0, 0%, 100%, 0)
}

.zxcs-form-en .enform-item .enform-input::-webkit-input-placeholder {
    color: #7e7d7d !important;
    font-weight: 400 !important
}

.zxcs-form-en .enform-item .enform-input::-moz-placeholder {
    color: #7e7d7d !important;
    font-weight: 400 !important
}

.zxcs-form-en .enform-item .enform-input:-ms-input-placeholder {
    color: #7e7d7d !important;
    font-weight: 400 !important
}

.zxcs-form-en .enform-item .enform-input::-ms-input-placeholder {
    color: #7e7d7d !important;
    font-weight: 400 !important
}

.zxcs-form-en .enform-item .enform-input::placeholder {
    color: #7e7d7d !important;
    font-weight: 400 !important
}

.zxcs-form-en .enform-item .date-name {
    color: #b16318;
    font-weight: 700
}

.zxcs-form-en .enform-item .date-placeholder {
    color: #ccc !important;
    font-weight: 400 !important
}

.zxcs-form-en .enform-item .arrow-icon {
    width: .875rem;
    height: .5625rem;
    position: absolute;
    right: .9375rem;
    top: 50%;
    margin-top: -.375rem
}

.zxcs-form-en .engender-item .gender-box {
    width: 100%;
    -webkit-justify-content: flex-end;
    -ms-flex-pack: end;
    justify-content: flex-end;
    line-height: 1.8125rem;
    margin-top: -.625rem
}

.zxcs-form-en .engender-item .gender-box,
.zxcs-form-en .engender-item .gender-box>div {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center
}

.zxcs-form-en .engender-item .gender-box>div {
    margin: 0 .625rem;
    cursor: pointer
}

.zxcs-form-en .engender-item .gender-box .gender-text {
    color: #333
}

.zxcs-form-en .engender-item .gender-box span {
    width: 1.625rem;
    height: 1.625rem;
    display: inline-block;
    margin-right: .25rem;
    background-color: #fff;
    border: 2px solid #bd5e00;
    border-radius: 50%
}

.zxcs-form-en .engender-item .gender-box span.active {
    background-color: #bd5e00;
    background-image: url(../images/icon_active.f18604f.png);
    background-size: 100% 100%
}

.pop-order-section {
    position: fixed;
    left: 50%;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 99;
    width: 100%;
    max-width: 30rem;
    -webkit-transform: translate(-50%);
    transform: translate(-50%)
}

.pop-order-section .pop-mask {
    position: absolute;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, .8);
    z-index: 99
}

.pop-order-section .pop-centent {
    position: absolute;
    bottom: 0;
    width: 100%;
    z-index: 100
}

.pop-order-section .pop-centent .close {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    margin-bottom: .7813rem
}

.pop-order-section .pop-centent .close .close-btn {
    width: 1.875rem;
    height: 1.875rem;
    cursor: pointer
}

.pop-order-section .pop-centent .title {
    text-align: center;
    padding: .9375rem 0 1.5625rem;
    font-size: .9375rem;
    color: #c67f34;
    font-weight: 700;
    letter-spacing: .05rem
}

.pop-order-section .pop-centent .form {
    padding: 0 1.875rem
}

.pop-order-section .pop-centent .form .zxcs-form {
    border: none !important
}

.pop-order-section .pop-centent .form .zxcs-form .zxcs-form-field {
    background: #fff;
    border-radius: 1.5625rem;
    margin-bottom: .625rem;
    overflow: hidden;
    color: #898989;
    border-top: none
}

.pop-order-section .pop-centent .form .zxcs-form .zxcs-form-field input::-webkit-input-placeholder {
    color: #898989 !important;
    font-family: Microsoft YaHei, "微软雅黑", Helvetica, STHeiti, "Droid Sans Fallback", sans-serif
}

.pop-order-section .pop-centent .form .zxcs-form .zxcs-form-field input::-moz-placeholder {
    color: #898989 !important;
    font-family: Microsoft YaHei, "微软雅黑", Helvetica, STHeiti, "Droid Sans Fallback", sans-serif
}

.pop-order-section .pop-centent .form .zxcs-form .zxcs-form-field input:-ms-input-placeholder {
    color: #898989 !important;
    font-family: Microsoft YaHei, "微软雅黑", Helvetica, STHeiti, "Droid Sans Fallback", sans-serif
}

.pop-order-section .pop-centent .form .zxcs-form .zxcs-form-field input::-ms-input-placeholder {
    color: #898989 !important;
    font-family: Microsoft YaHei, "微软雅黑", Helvetica, STHeiti, "Droid Sans Fallback", sans-serif
}

.pop-order-section .pop-centent .form .zxcs-form .zxcs-form-field input::placeholder {
    color: #898989 !important;
    font-family: Microsoft YaHei, "微软雅黑", Helvetica, STHeiti, "Droid Sans Fallback", sans-serif
}

.pop-order-section .pop-centent .form .zxcs-form .zxcs-form-field .zxcs-input-el {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #898989;
    font-family: Microsoft YaHei, "微软雅黑", Helvetica, STHeiti, "Droid Sans Fallback", sans-serif
}

.pop-order-section .pop-centent .form .zxcs-form .zxcs-form-field .zxcs-picker {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #898989 !important
}

.pop-order-section .pop-centent .form .zxcs-form-en .enform-input::-webkit-input-placeholder {
    color: #ccc;
    font-weight: 400
}

.pop-order-section .pop-centent .form .zxcs-form-en .enform-input::-moz-placeholder {
    color: #ccc;
    font-weight: 400
}

.pop-order-section .pop-centent .form .zxcs-form-en .enform-input:-ms-input-placeholder {
    color: #ccc;
    font-weight: 400
}

.pop-order-section .pop-centent .form .zxcs-form-en .enform-input::-ms-input-placeholder {
    color: #ccc;
    font-weight: 400
}

.pop-order-section .pop-centent .form .zxcs-form-en .enform-input::placeholder {
    color: #ccc;
    font-weight: 400
}

.pop-order-section .pop-centent .button {
    margin: 1.0938rem auto 0;
    text-align: center;
    background: -webkit-gradient(linear, left top, right top, from(#ce8b4d), to(#bb712e));
    background: -webkit-linear-gradient(left, #ce8b4d, #bb712e);
    background: linear-gradient(90deg, #ce8b4d, #bb712e);
    color: #fff;
    font-size: .9375rem;
    padding: .7813rem 0;
    border-radius: .3125rem;
    width: 80%;
    font-weight: 700
}

.pop-order-section .pop-centent .empty {
    height: 3.75rem
}

@media (min-width:750px) {
    .pop-order-section .pop-centent .empty {
        height: 1.5625rem
    }
}

.picker-main {
    -webkit-transform: translateX(-50%) !important;
    transform: translateX(-50%) !important
}

.zxcs-index-query {
    font-size: .8438rem;
    text-align: center;
    padding: 3px 0 .8125rem
}

.zxcs-index-query-text {
    color: #fe7929;
    text-decoration: underline;
    display: inline-block
}

.index-page {
    overflow: hidden
}

.index-page .agreement-box {
    position: absolute;
    margin-top: -8.125rem
}

@media (min-width:750px) {
    .index-page .agreement-box {
        margin-top: -10rem
    }
}

.index-page .agreement-box .common-privacy-container {
    padding-bottom: 0
}

.index-page .zxcs-index-query {
    padding: 0 0 .3125rem
}

.index-page .zxcs-index-query .zxcs-index-query-text {
    color: #ffe779
}

.index-page .banner-box-btn {
    -webkit-animation: btnAnimate 1.5s linear infinite;
    animation: btnAnimate 1.5s linear infinite
}

.index-page .teachers-recommend {
    position: relative
}

.index-page .teachers-recommend .bg {
    width: 100%
}

.index-page .teachers-recommend .content {
    position: absolute;
    top: 8.5625rem;
    left: 0
}

@media (min-width:750px) {
    .index-page .teachers-recommend .content {
        margin-top: -.3125rem;
        top: 11.5625rem
    }
}

@-webkit-keyframes bottomTagActive {
    0% {
        -webkit-transform: translate(-50%, -50%) scale(1.2);
        transform: translate(-50%, -50%) scale(1.2)
    }

    to {
        -webkit-transform: translate(-50%, -50%) scale(1);
        transform: translate(-50%, -50%) scale(1)
    }
}

@keyframes bottomTagActive {
    0% {
        -webkit-transform: translate(-50%, -50%) scale(1.2);
        transform: translate(-50%, -50%) scale(1.2)
    }

    to {
        -webkit-transform: translate(-50%, -50%) scale(1);
        transform: translate(-50%, -50%) scale(1)
    }
}

@-webkit-keyframes lanternSwing {
    0% {
        -webkit-transform: rotate(-8deg);
        transform: rotate(-8deg)
    }

    50% {
        -webkit-transform: rotate(8deg);
        transform: rotate(8deg)
    }

    to {
        -webkit-transform: rotate(-8deg);
        transform: rotate(-8deg)
    }
}

@keyframes lanternSwing {
    0% {
        -webkit-transform: rotate(-8deg);
        transform: rotate(-8deg)
    }

    50% {
        -webkit-transform: rotate(8deg);
        transform: rotate(8deg)
    }

    to {
        -webkit-transform: rotate(-8deg);
        transform: rotate(-8deg)
    }
}

.banner-box {
    position: relative
}

.banner-box .bottom-tags-container {
    position: absolute;
    bottom: 9.375rem;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    width: 100%;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    padding: 0 .7813rem
}

@media (min-width:750px) {
    .banner-box .bottom-tags-container {
        bottom: 12.5rem
    }
}

.banner-box .bottom-tags-container .bottom-tag-item {
    width: 3.6563rem;
    height: 3.875rem;
    position: relative
}

.banner-box .bottom-tags-container .bottom-tag-item .bottom-tag-item-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1
}

.banner-box .bottom-tags-container .bottom-tag-item .bottom-tag-item-active {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    width: 6.25rem;
    height: 6.25rem;
    z-index: 2;
    opacity: 0;
    -webkit-transition: opacity .3s ease;
    transition: opacity .3s ease
}

.banner-box .bottom-tags-container .bottom-tag-item .bottom-tag-item-active.active {
    opacity: 1;
    -webkit-animation: bottomTagActive .5s ease-out;
    animation: bottomTagActive .5s ease-out
}

.banner-box .title {
    position: absolute;
    top: 0;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    width: 17.4688rem;
    height: 2.4688rem;
    z-index: 3
}

.banner-box img {
    pointer-events: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

.banner-box .house-box {
    position: absolute;
    top: 6.9375rem;
    right: 3.125rem;
    width: 13.75rem;
    height: 18.2188rem;
    z-index: 1
}

@media (min-width:750px) {
    .banner-box .house-box {
        right: 5rem
    }
}

.banner-box .tag-box {
    position: absolute;
    top: 23.75rem;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    width: 20.1563rem;
    height: 5.0938rem;
    z-index: 3
}

@media (min-width:750px) {
    .banner-box .tag-box {
        top: 31.25rem
    }
}

.banner-box .teacher-box {
    position: absolute;
    top: 5.0313rem;
    right: 0;
    width: 13.4688rem;
    height: 23.125rem;
    z-index: 2
}

.banner-box .lantern1 {
    left: 0;
    width: 4.125rem;
    height: 9.6563rem;
    -webkit-animation: lanternSwing 3s ease-in-out infinite;
    animation: lanternSwing 3s ease-in-out infinite
}

.banner-box .lantern1,
.banner-box .lantern2 {
    position: absolute;
    top: 0;
    -webkit-transform-origin: 50% 0;
    transform-origin: 50% 0
}

.banner-box .lantern2 {
    left: 3.8125rem;
    width: 2.5625rem;
    height: 6rem;
    -webkit-animation: lanternSwing 2.5s ease-in-out infinite;
    animation: lanternSwing 2.5s ease-in-out infinite;
    -webkit-animation-delay: .5s;
    animation-delay: .5s
}

.banner-box .lantern3 {
    position: absolute;
    top: 0;
    right: 0;
    width: 3.0938rem;
    height: 7.2813rem;
    -webkit-transform-origin: 50% 0;
    transform-origin: 50% 0;
    -webkit-animation: lanternSwing 3.5s ease-in-out infinite;
    animation: lanternSwing 3.5s ease-in-out infinite;
    -webkit-animation-delay: 1s;
    animation-delay: 1s
}

.banner-box .show-tag-item {
    position: absolute;
    bottom: 15.625rem;
    left: 54%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    z-index: 4;
    opacity: 0;
    width: 9.6875rem;
    -webkit-transition: opacity .3s ease;
    transition: opacity .3s ease;
    will-change: opacity, transform;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden
}

@media (min-width:750px) {
    .banner-box .show-tag-item {
        bottom: 25rem
    }
}

.banner-box .show-tag-item.active {
    opacity: 1
}

@-webkit-keyframes scalePulse {
    0% {
        -webkit-transform: scale(.8);
        transform: scale(.8)
    }

    10% {
        -webkit-transform: scale(1.2);
        transform: scale(1.2)
    }

    to {
        -webkit-transform: scale(1.1);
        transform: scale(1.1)
    }
}

@keyframes scalePulse {
    0% {
        -webkit-transform: scale(.8);
        transform: scale(.8)
    }

    10% {
        -webkit-transform: scale(1.2);
        transform: scale(1.2)
    }

    to {
        -webkit-transform: scale(1.1);
        transform: scale(1.1)
    }
}

.mll-written {
    background: url(../images/bg_repeat.8228590.png) repeat-y;
    background-size: 100% .9375rem;
    font-size: .875rem
}

.mll-written .shengxiao-box {
    position: relative;
    width: 100%;
    height: 44.375rem
}

@media (min-width:750px) {
    .mll-written .shengxiao-box {
        height: 56.25rem
    }
}

.mll-written .shengxiao-box .shengxiao-ma {
    position: absolute;
    top: 8.125rem;
    left: .3125rem;
    width: 4.9688rem;
    height: 4.9063rem;
    -webkit-animation: scalePulse 4s ease-in-out infinite;
    animation: scalePulse 4s ease-in-out infinite;
    -webkit-animation-delay: 0s;
    animation-delay: 0s
}

@media (min-width:750px) {
    .mll-written .shengxiao-box .shengxiao-ma {
        top: 11.25rem
    }
}

.mll-written .shengxiao-box .shengxiao-niu {
    position: absolute;
    top: 19.6875rem;
    width: 4.9688rem;
    height: 4.9063rem;
    left: .3125rem;
    -webkit-animation: scalePulse 4s ease-in-out infinite;
    animation: scalePulse 4s ease-in-out infinite;
    -webkit-animation-delay: 2s;
    animation-delay: 2s
}

@media (min-width:750px) {
    .mll-written .shengxiao-box .shengxiao-niu {
        top: 25.625rem
    }
}

.mll-written .shengxiao-box .shengxiao-shu {
    position: absolute;
    top: 8.125rem;
    left: 10.625rem;
    width: 4.9688rem;
    height: 4.9063rem;
    -webkit-animation: scalePulse 4s ease-in-out infinite;
    animation: scalePulse 4s ease-in-out infinite;
    -webkit-animation-delay: 1s;
    animation-delay: 1s
}

@media (min-width:750px) {
    .mll-written .shengxiao-box .shengxiao-shu {
        top: 11.25rem;
        left: 13.75rem
    }
}

.mll-written .shengxiao-box .shengxiao-tu {
    position: absolute;
    top: 19.6875rem;
    width: 4.9688rem;
    height: 4.9063rem;
    left: 10.625rem;
    -webkit-animation: scalePulse 4s ease-in-out infinite;
    animation: scalePulse 4s ease-in-out infinite;
    -webkit-animation-delay: 3s;
    animation-delay: 3s
}

@media (min-width:750px) {
    .mll-written .shengxiao-box .shengxiao-tu {
        top: 25.625rem;
        left: 13.75rem
    }
}

.mll-written .dh-bg {
    width: 100%;
    height: 27.5rem;
    background: url(../images/pan_bg.58d2d0f.png) no-repeat 50%;
    background-size: 100% 100%
}

@media (min-width:750px) {
    .mll-written .dh-bg {
        height: 31.25rem
    }
}

.mll-written .white-box {
    background: url(../images/7.3ea6447.png) no-repeat 50%;
    background-size: 100% 100%;
    width: 100%;
    height: 25.9375rem;
    padding-top: 5.3125rem
}

@media (min-width:750px) {
    .mll-written .white-box {
        height: 31.25rem
    }
}

.mll-written .white-box .white-title {
    width: 14.0625rem;
    height: 2.0625rem;
    background: #ffeaac;
    border-radius: 1.0313rem;
    font-weight: 700;
    color: #7f2200;
    font-size: 1rem;
    line-height: 2.0625rem;
    text-align: center;
    margin: 1.3438rem auto
}

.mll-written .white-box .white-pic {
    width: 20.25rem;
    margin: 0 auto;
    padding-bottom: .9375rem;
    display: block
}

.mll-written-1 {
    position: relative
}

.mll-written-1 .text {
    position: absolute;
    top: 28%;
    left: 6%;
    width: 58%;
    color: #3a3a3a
}

.mll-written-1 .p1 {
    width: 12.25rem;
    height: 1.5625rem;
    background: #6c9ada;
    border-radius: .7813rem;
    font-size: .9375rem;
    color: #fff;
    text-align: center;
    line-height: 1.5625rem;
    margin: 0 auto .4063rem
}

.mll-written-1 .p2 {
    text-align: center;
    font-size: .9375rem;
    line-height: 1.125rem;
    border-bottom: 1px solid #cbb287;
    padding-bottom: .5rem;
    margin-bottom: .5625rem
}

@media (min-width:750px) {
    .mll-written-1 .p2 {
        line-height: 1.7188rem;
        font-size: .9688rem
    }
}

.mll-written-1 .p2 span {
    color: #b92700;
    background: #ffe868;
    height: .4063rem;
    display: inline-block;
    line-height: 1px;
    font-weight: 700
}

.mll-written-1 .p3 {
    line-height: 1.375rem;
    color: #3a3a3a;
    text-shadow: 3px 0 3px #fff7e1;
    text-align: justify
}

@media (min-width:750px) {
    .mll-written-1 .p3 {
        line-height: 1.875rem;
        font-size: .9375rem
    }
}

.mll-written-1 .p3 span {
    color: #b92700
}

.teacher-intro-section {
    background: url(../images/bg.1da6e20.png) no-repeat 50%;
    background-size: 100% 100%;
    width: 23.4375rem;
    height: 14.6875rem
}

.teacher-intro-section .index-banner-carousel {
    width: 80%;
    padding-top: .9375rem
}

.zxcs-video {
    width: 80%;
    margin: 1.0938rem auto 0
}

.zxcs-video video {
    width: 100%;
    border-radius: .3125rem
}

.teacher-intro-section {
    width: 100%;
    position: relative;
    overflow: hidden;
    margin-top: -1px
}

.teacher-intro-section .img-intro {
    pointer-events: none
}

.teacher-intro-section .index-banner-carousel {
    width: 90%;
    margin: 0 auto;
    overflow: hidden
}

.teacher-intro-section .index-banner-carousel .carousel-swiper {
    margin: 0 auto
}

.teacher-intro-section .index-banner-carousel .carousel-swiper .swiper-slide {
    width: 16.9375rem
}

.teacher-intro-section .index-banner-carousel .carousel-swiper .swiper-slide p {
    display: none;
    text-align: center;
    font-size: .875rem;
    font-weight: 400;
    color: #3a3a3a;
    line-height: .875rem
}

.teacher-intro-section .index-banner-carousel .carousel-swiper .swiper-slide.swiper-slide-active {
    z-index: 2
}

.teacher-intro-section .index-banner-carousel .carousel-swiper .swiper-slide.swiper-slide-active p {
    display: block
}

.dh-pan {
    position: relative;
    width: 23.4375rem;
    height: 23.4375rem
}

.dh-pan li {
    position: absolute;
    z-index: 2;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%)
}

.dh-pan li img {
    width: 10.625rem
}

.dh-pan .li0 {
    -webkit-animation: ani1 2s cubic-bezier(.1, .59, 1, 1) 1s infinite;
    animation: ani1 2s cubic-bezier(.1, .59, 1, 1) 1s infinite;
    --num1: 40%;
    --num2: 20%
}

@-webkit-keyframes ani1 {
    0% {
        opacity: 0;
        top: 70%;
        left: 50%;
        -webkit-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%)
    }

    30% {
        opacity: 1;
        top: var(--num1);
        left: var(--num2);
        -webkit-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%)
    }

    to {
        opacity: 1;
        top: var(--num1);
        left: var(--num2);
        -webkit-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%)
    }
}

@media (min-width:750px) {
    .dh-pan .li0 {
        -webkit-animation: ani1 2s cubic-bezier(.1, .59, 1, 1) 1s infinite;
        animation: ani1 2s cubic-bezier(.1, .59, 1, 1) 1s infinite;
        --num1: 50%;
        --num2: 20%
    }
}

.dh-pan .li1 {
    -webkit-animation: ani1 2s cubic-bezier(.1, .59, 1, 1) 1s infinite;
    animation: ani1 2s cubic-bezier(.1, .59, 1, 1) 1s infinite;
    --num1: 40%;
    --num2: 80%
}

@media (min-width:750px) {
    .dh-pan .li1 {
        -webkit-animation: ani1 2s cubic-bezier(.1, .59, 1, 1) 1s infinite;
        animation: ani1 2s cubic-bezier(.1, .59, 1, 1) 1s infinite;
        --num1: 50%;
        --num2: 110%
    }
}

.dh-pan .li2 {
    -webkit-animation: ani1 2s cubic-bezier(.1, .59, 1, 1) 1s infinite;
    animation: ani1 2s cubic-bezier(.1, .59, 1, 1) 1s infinite;
    --num1: 104%;
    --num2: 20%
}

@media (min-width:750px) {
    .dh-pan .li2 {
        -webkit-animation: ani1 2s cubic-bezier(.1, .59, 1, 1) 1s infinite;
        animation: ani1 2s cubic-bezier(.1, .59, 1, 1) 1s infinite;
        --num1: 120%;
        --num2: 20%
    }
}

.dh-pan .li3 {
    -webkit-animation: ani1 2s cubic-bezier(.1, .59, 1, 1) 1s infinite;
    animation: ani1 2s cubic-bezier(.1, .59, 1, 1) 1s infinite;
    --num1: 104%;
    --num2: 80%
}

@keyframes ani1 {
    0% {
        opacity: 0;
        top: 70%;
        left: 50%;
        -webkit-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%)
    }

    30% {
        opacity: 1;
        top: var(--num1);
        left: var(--num2);
        -webkit-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%)
    }

    to {
        opacity: 1;
        top: var(--num1);
        left: var(--num2);
        -webkit-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%)
    }
}

@media (min-width:750px) {
    .dh-pan .li3 {
        -webkit-animation: ani1 2s cubic-bezier(.1, .59, 1, 1) 1s infinite;
        animation: ani1 2s cubic-bezier(.1, .59, 1, 1) 1s infinite;
        --num1: 120%;
        --num2: 110%
    }

    @-webkit-keyframes ani1 {
        0% {
            opacity: 0;
            top: 70%;
            left: 50%;
            -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%)
        }

        30% {
            opacity: 1;
            top: var(--num1);
            left: var(--num2);
            -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%)
        }

        to {
            opacity: 1;
            top: var(--num1);
            left: var(--num2);
            -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%)
        }
    }

    @keyframes ani1 {
        0% {
            opacity: 0;
            top: 70%;
            left: 50%;
            -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%)
        }

        30% {
            opacity: 1;
            top: var(--num1);
            left: var(--num2);
            -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%)
        }

        to {
            opacity: 1;
            top: var(--num1);
            left: var(--num2);
            -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%)
        }
    }
}

.dh-charts {
    width: 19.5313rem;
    height: 13.1563rem;
    margin: 0 auto;
    position: relative
}

.dh-charts .line {
    width: .3125rem;
    height: 6.5rem;
    background: url(../images/chart_line.0bc18af.png) no-repeat 0 0;
    background-size: 16.6563rem 6.5rem;
    position: absolute;
    left: 2.2813rem;
    top: 3.3125rem;
    -webkit-animation: showline 4s linear infinite;
    animation: showline 4s linear infinite
}

@-webkit-keyframes showline {
    0% {
        width: .3125rem
    }

    90% {
        width: 16.6563rem
    }

    to {
        width: 16.6563rem
    }
}

@keyframes showline {
    0% {
        width: .3125rem
    }

    90% {
        width: 16.6563rem
    }

    to {
        width: 16.6563rem
    }
}

.dh-charts .text-list li {
    position: absolute;
    top: 2.6563rem;
    left: 2.5625rem;
    width: 4.3438rem;
    height: 1.9375rem;
    line-height: 1.5313rem;
    text-align: center;
    background: url(../images/chart_text1.a239ec4.png) no-repeat 50%;
    background-size: 100% 100%;
    color: #fff;
    font-size: .875rem;
    opacity: 0
}

.dh-charts .text-list .li0 {
    -webkit-animation: showtext 4s linear infinite;
    animation: showtext 4s linear infinite
}

@-webkit-keyframes showtext {
    0% {
        opacity: 0
    }

    35% {
        opacity: 1
    }

    to {
        opacity: 1
    }
}

@keyframes showtext {
    0% {
        opacity: 0
    }

    35% {
        opacity: 1
    }

    to {
        opacity: 1
    }
}

.dh-charts .text-list .li1 {
    top: 1.0625rem;
    left: 8.5938rem;
    background: url(../images/chart_text2.124261d.png) no-repeat 50%;
    background-size: 100% 100%;
    -webkit-animation: showtext1 4s linear infinite;
    animation: showtext1 4s linear infinite
}

@-webkit-keyframes showtext1 {
    0% {
        opacity: 0
    }

    30% {
        opacity: 0
    }

    40% {
        opacity: 1
    }

    to {
        opacity: 1
    }
}

@keyframes showtext1 {
    0% {
        opacity: 0
    }

    30% {
        opacity: 0
    }

    40% {
        opacity: 1
    }

    to {
        opacity: 1
    }
}

.dh-charts .text-list .li2 {
    top: 5.3125rem;
    left: 9.7188rem;
    background: url(../images/chart_text3.e3f162a.png) no-repeat 50%;
    background-size: 100% 100%;
    -webkit-animation: showtext2 4s linear infinite;
    animation: showtext2 4s linear infinite
}

@-webkit-keyframes showtext2 {
    0% {
        opacity: 0
    }

    50% {
        opacity: 0
    }

    60% {
        opacity: 1
    }

    to {
        opacity: 1
    }
}

@keyframes showtext2 {
    0% {
        opacity: 0
    }

    50% {
        opacity: 0
    }

    60% {
        opacity: 1
    }

    to {
        opacity: 1
    }
}

.dh-charts .text-list .li3 {
    top: 2.4063rem;
    left: 14.9688rem;
    background: url(../images/chart_text4.e044e2a.png) no-repeat 50%;
    background-size: 100% 100%;
    -webkit-animation: showtext3 4s linear infinite;
    animation: showtext3 4s linear infinite
}

@-webkit-keyframes showtext3 {
    0% {
        opacity: 0
    }

    70% {
        opacity: 0
    }

    80% {
        opacity: 1
    }

    to {
        opacity: 1
    }
}

@keyframes showtext3 {
    0% {
        opacity: 0
    }

    70% {
        opacity: 0
    }

    80% {
        opacity: 1
    }

    to {
        opacity: 1
    }
}

.show-tag {
    background: url(../images/bg2.c818663.png) no-repeat 50%;
    background-size: 100% 100%;
    width: 100%;
    height: 14.0625rem
}

.show-tag ul {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    padding: 1.875rem .9375rem 1.25rem;
    -webkit-justify-content: space-around;
    -ms-flex-pack: distribute;
    justify-content: space-around
}

.show-tag ul li {
    position: relative;
    top: 0
}

.show-tag ul li img {
    width: 2.625rem
}

.show-tag ul li:nth-child(2n) {
    top: .625rem
}

.show-tag ul li:first-child {
    -webkit-animation: updown 4s linear 1s infinite;
    animation: updown 4s linear 1s infinite;
    --top1: 0;
    --top2: -0.625rem
}

.show-tag ul li:nth-child(2) {
    -webkit-animation: updown 4s linear 1.5s infinite;
    animation: updown 4s linear 1.5s infinite;
    --top1: 0.625rem;
    --top2: 0
}

.show-tag ul li:nth-child(3) {
    -webkit-animation: updown 4s linear 2s infinite;
    animation: updown 4s linear 2s infinite;
    --top1: 0;
    --top2: -0.625rem
}

.show-tag ul li:nth-child(4) {
    -webkit-animation: updown 4s linear 2.5s infinite;
    animation: updown 4s linear 2.5s infinite;
    --top1: 0.625rem;
    --top2: 0
}

.show-tag ul li:nth-child(5) {
    -webkit-animation: updown 4s linear 3s infinite;
    animation: updown 4s linear 3s infinite;
    --top1: 0;
    --top2: -0.625rem
}

.show-tag ul li:nth-child(6) {
    -webkit-animation: updown 4s linear 3.5s infinite;
    animation: updown 4s linear 3.5s infinite;
    --top1: 0.625rem;
    --top2: 0
}

.show-tag ul li:nth-child(7) {
    -webkit-animation: updown 4s linear 4s infinite;
    animation: updown 4s linear 4s infinite;
    --top1: 0;
    --top2: -0.625rem
}

.show-tag ul li:nth-child(8) {
    -webkit-animation: updown 4s linear 4.5s infinite;
    animation: updown 4s linear 4.5s infinite;
    --top1: 0.625rem;
    --top2: 0
}

.dh-fw {
    background: url(../images/bg.358412e.png) no-repeat 50%;
    background-size: 100% 100%;
    width: 100%;
    height: 25rem
}

@media (min-width:750px) {
    .dh-fw {
        height: 31.25rem
    }
}

.dh-fw-box {
    position: relative;
    width: 20.25rem;
    height: 14.4375rem;
    margin: 0 auto
}

.dh-fw-box .fw_taohua {
    width: 8rem;
    position: absolute;
    top: 60%;
    left: -2%;
    -webkit-animation: fangda 3s linear 1s infinite;
    animation: fangda 3s linear 1s infinite
}

@media (min-width:750px) {
    .dh-fw-box .fw_taohua {
        top: 90%;
        left: -8%
    }
}

.dh-fw-box .fw_guiren {
    width: 8rem;
    position: absolute;
    top: 100%;
    left: -2%;
    -webkit-animation: fangda 3s linear 1.75s infinite;
    animation: fangda 3s linear 1.75s infinite
}

@media (min-width:750px) {
    .dh-fw-box .fw_guiren {
        top: 130%;
        left: -8%
    }
}

.dh-fw-box .fw_wang {
    width: 8rem;
    position: absolute;
    top: 137%;
    left: -2%;
    -webkit-animation: fangda 3s linear 2.5s infinite;
    animation: fangda 3s linear 2.5s infinite
}

@media (min-width:750px) {
    .dh-fw-box .fw_wang {
        top: 169%;
        left: -8%
    }
}

.dh-fw-box .fw_wenchang {
    width: 8rem;
    position: absolute;
    top: 100%;
    left: 30%;
    -webkit-animation: fangda 3s linear 3.25s infinite;
    animation: fangda 3s linear 3.25s infinite
}

@media (min-width:750px) {
    .dh-fw-box .fw_wenchang {
        top: 134%;
        left: 32%
    }
}

.index3-page {
    background: #fff2cd
}

.index3-page .index-btn {
    width: 90%;
    margin: 0 auto .625rem;
    -webkit-animation: btnAnimate 1.5s linear infinite;
    animation: btnAnimate 1.5s linear infinite
}

.scroll-wrapper .am-wingblank.am-wingblank-lg {
    top: 82%
}

.index-banner {
    position: relative;
    overflow: hidden
}

.index-banner-light {
    width: 100%;
    height: auto;
    position: absolute;
    top: 0;
    left: 0;
    right: 0
}

.index-banner-top-title {
    width: 48%;
    position: absolute;
    top: -1.3%;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%)
}

.index-banner-dragon {
    position: absolute;
    top: 80%;
    width: 100%;
    left: 0;
    -webkit-animation: dragon-appear-ani 1s ease-in forwards, dragon-float-ani 1.5s linear 1s infinite;
    animation: dragon-appear-ani 1s ease-in forwards, dragon-float-ani 1.5s linear 1s infinite
}

@-webkit-keyframes dragon-appear-ani {
    0% {
        top: 80%
    }

    to {
        top: -10%
    }
}

@keyframes dragon-appear-ani {
    0% {
        top: 80%
    }

    to {
        top: -10%
    }
}

@-webkit-keyframes dragon-float-ani {

    0%,
    to {
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }

    50% {
        -webkit-transform: translateY(.3125rem);
        transform: translateY(.3125rem)
    }
}

@keyframes dragon-float-ani {

    0%,
    to {
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }

    50% {
        -webkit-transform: translateY(.3125rem);
        transform: translateY(.3125rem)
    }
}

.index-banner-mll {
    width: 60%;
    position: absolute;
    right: 0;
    top: 20%
}

.index-banner-title {
    width: 43%;
    position: absolute;
    top: 19%;
    right: 45%
}

.index-banner-star {
    position: absolute;
    top: 3%;
    width: 86%;
    right: 0
}

.index-banner-overlay {
    width: 100%;
    height: auto;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0
}

.index-banner-tags {
    position: absolute;
    bottom: 10%;
    width: 108%;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%)
}

.index-banner-tags-main {
    position: absolute;
    top: 27%;
    left: 0;
    right: 0;
    padding: 0 3%
}

.index-banner-tips {
    width: 20.625rem;
    height: 1.4375rem;
    position: absolute;
    bottom: 2%;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%)
}

.teacher-intro {
    background: -webkit-gradient(linear, left top, left bottom, from(#db4940), to(#f77752));
    background: -webkit-linear-gradient(top, #db4940, #f77752);
    background: linear-gradient(180deg, #db4940, #f77752);
    padding: .625rem;
    position: relative
}

.teacher-intro-outer {
    width: calc(100% - 1.25rem);
    height: calc(100% - 1.25rem);
    background: #ffdb76;
    position: absolute;
    top: 4px;
    -webkit-transform: rotate(-1.5deg);
    transform: rotate(-1.5deg)
}

.teacher-intro-inner {
    background-color: #fff8e2;
    border: 3px solid #ffee8f;
    padding: .9375rem 0;
    position: relative
}

.teacher-intro-mll {
    padding: 0 0 .625rem .3125rem
}

.teacher-intro-swiper {
    width: 80%;
    margin: 0 auto;
    overflow: hidden
}

.teacher-intro-swiper-main {
    margin: 0 auto
}

.teacher-intro-swiper-main .swiper-slide {
    width: 16.9375rem
}

.teacher-intro-swiper-main .swiper-slide p {
    display: none;
    text-align: center;
    font-size: .875rem;
    font-weight: 400;
    color: #3a3a3a;
    line-height: .875rem
}

.teacher-intro-swiper-main .swiper-slide.swiper-slide-active {
    z-index: 2
}

.teacher-intro-swiper-main .swiper-slide.swiper-slide-active p {
    display: block
}

.written3 {
    padding-bottom: 1px
}

.written3 img {
    pointer-events: none
}

.written3 .dh-pan-bg {
    background: -webkit-gradient(linear, left top, left bottom, from(#dd4b41), to(#ec654b));
    background: -webkit-linear-gradient(top, #dd4b41, #ec654b);
    background: linear-gradient(180deg, #dd4b41, #ec654b)
}

.written3 .dh-book-bg {
    background: url(../images/8.04a004c.jpg) no-repeat 50%;
    background-size: 100% 100%;
    padding: 1px
}

.written3 .dh-book .desc {
    position: absolute;
    bottom: 2rem
}

.written3 .listbox1 {
    background: url(../images/10.e9c2c75.jpg) no-repeat 50%;
    background-size: 100% 100%;
    padding: 0 1.5625rem 1px
}

.written3 .listbox1 li {
    position: relative
}

.written3 .listbox1 li img {
    width: 20.3438rem;
    display: block;
    margin: 0 auto .625rem
}

.written3 .listbox1 li p {
    position: absolute;
    top: 37%;
    left: 24%;
    font-size: 1rem;
    font-weight: 700;
    color: #3a3a3a
}

@media (min-width:750px) {
    .written3 .listbox1 li p {
        left: 30%
    }
}

.written3 .listbox1 li p span {
    color: #eb4b4b
}

.written3 .dh-chart-bg {
    background: url(../images/12.a3a1105.jpg) no-repeat 50%;
    background-size: 100% 100%
}

.written3 .listbox2 {
    background-color: #ffeec2
}

.written3 .listbox2 li {
    position: relative
}

.written3 .listbox2 li img {
    width: 21.25rem;
    height: 5.7813rem;
    display: block;
    margin: 0 auto .625rem
}

.written3 .listbox2 li>div {
    position: absolute;
    top: 10%;
    left: 45%;
    font-size: .9375rem;
    font-weight: 500;
    color: #3a3a3a;
    line-height: 1.5625rem
}

.written3 .listbox2 li>div span {
    color: #f23634
}

.dh-book {
    width: 22.1563rem;
    height: 9.2188rem;
    margin: -.3125rem auto 1.0938rem;
    position: relative
}

.dh-book .bg {
    width: 3.5rem;
    height: 9.2188rem;
    background: url(../images/bg.e1225f5.png) no-repeat 0 0;
    background-size: 22.1563rem 9.2188rem;
    -webkit-animation: showbook 4s linear 1s infinite;
    animation: showbook 4s linear 1s infinite
}

@-webkit-keyframes showbook {
    0% {
        width: 3.5rem
    }

    50% {
        width: 22.1563rem
    }

    to {
        width: 22.1563rem
    }
}

@keyframes showbook {
    0% {
        width: 3.5rem
    }

    50% {
        width: 22.1563rem
    }

    to {
        width: 22.1563rem
    }
}

.dh-book .title {
    width: 1.5rem;
    position: absolute;
    top: .9375rem;
    left: .875rem;
    opacity: 0;
    -webkit-animation: showtitle 4s linear 1s infinite;
    animation: showtitle 4s linear 1s infinite
}

@-webkit-keyframes showtitle {
    0% {
        opacity: 0
    }

    5% {
        opacity: 1
    }

    to {
        opacity: 1
    }
}

@keyframes showtitle {
    0% {
        opacity: 0
    }

    5% {
        opacity: 1
    }

    to {
        opacity: 1
    }
}

.dh-book .desc {
    width: 17.4375rem;
    position: absolute;
    bottom: 1.6875rem;
    left: 3.25rem;
    opacity: 0;
    -webkit-animation: showdesc 4s linear 2s infinite;
    animation: showdesc 4s linear 2s infinite
}

@-webkit-keyframes showdesc {
    0% {
        opacity: 0
    }

    30% {
        opacity: 0
    }

    40% {
        opacity: 1
    }

    70% {
        opacity: 1
    }

    75% {
        opacity: 0
    }

    to {
        opacity: 0
    }
}

@keyframes showdesc {
    0% {
        opacity: 0
    }

    30% {
        opacity: 0
    }

    40% {
        opacity: 1
    }

    70% {
        opacity: 1
    }

    75% {
        opacity: 0
    }

    to {
        opacity: 0
    }
}

.dh-fw3 {
    background: -webkit-gradient(linear, left top, left bottom, from(#e05143), to(#f77752));
    background: -webkit-linear-gradient(top, #e05143, #f77752);
    background: linear-gradient(180deg, #e05143, #f77752)
}

.dh-fw3-box {
    position: relative;
    width: 20.25rem;
    margin: 0 auto
}

.dh-fw3-box .tag {
    position: absolute;
    width: 30%
}

@-webkit-keyframes fangda {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1)
    }

    10% {
        -webkit-transform: scale(1.2);
        transform: scale(1.2)
    }

    20% {
        -webkit-transform: scale(1);
        transform: scale(1)
    }

    to {
        -webkit-transform: scale(1);
        transform: scale(1)
    }
}

@keyframes fangda {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1)
    }

    10% {
        -webkit-transform: scale(1.2);
        transform: scale(1.2)
    }

    20% {
        -webkit-transform: scale(1);
        transform: scale(1)
    }

    to {
        -webkit-transform: scale(1);
        transform: scale(1)
    }
}

.dh-fw3-box .tag1 {
    width: 8.25rem;
    right: -2%;
    top: -5%;
    -webkit-animation: fangda 3s linear 1s infinite;
    animation: fangda 3s linear 1s infinite
}

.dh-fw3-box .tag2 {
    width: 8.25rem;
    bottom: 23%;
    left: -2%;
    -webkit-animation: fangda 3s linear 1.75s infinite;
    animation: fangda 3s linear 1.75s infinite
}

.dh-fw3-box .tag3 {
    width: 7.9063rem;
    left: -1%;
    top: -6%;
    -webkit-animation: fangda 3s linear 2.5s infinite;
    animation: fangda 3s linear 2.5s infinite
}

.dh-fw3-box .tag4 {
    width: 7.9063rem;
    right: -3%;
    bottom: 22%;
    -webkit-animation: fangda 3s linear 3.25s infinite;
    animation: fangda 3s linear 3.25s infinite
}

.dh-fw3 .title {
    width: 45%;
    display: block;
    margin: 1.5625rem auto 0
}

.dh-fw3 ul {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    padding: 1.875rem .9375rem .625rem 1.25rem;
    -webkit-justify-content: space-around;
    -ms-flex-pack: distribute;
    justify-content: space-around
}

.dh-fw3 ul li {
    position: relative;
    top: 0
}

.dh-fw3 ul li img {
    width: 2.3125rem
}

.dh-fw3 ul li:nth-child(2n) {
    top: .625rem
}

.dh-fw3 ul li:first-child {
    -webkit-animation: updown 4s linear 1s infinite;
    animation: updown 4s linear 1s infinite;
    --top1: 0;
    --top2: -0.625rem
}

@-webkit-keyframes updown {
    0% {
        top: var(--top1)
    }

    5% {
        top: var(--top1)
    }

    10% {
        top: var(--top2)
    }

    15% {
        top: var(--top1)
    }

    to {
        top: var(--top1)
    }
}

.dh-fw3 ul li:nth-child(2) {
    -webkit-animation: updown 4s linear 1.5s infinite;
    animation: updown 4s linear 1.5s infinite;
    --top1: 0.625rem;
    --top2: 0
}

.dh-fw3 ul li:nth-child(3) {
    -webkit-animation: updown 4s linear 2s infinite;
    animation: updown 4s linear 2s infinite;
    --top1: 0;
    --top2: -0.625rem
}

.dh-fw3 ul li:nth-child(4) {
    -webkit-animation: updown 4s linear 2.5s infinite;
    animation: updown 4s linear 2.5s infinite;
    --top1: 0.625rem;
    --top2: 0
}

.dh-fw3 ul li:nth-child(5) {
    -webkit-animation: updown 4s linear 3s infinite;
    animation: updown 4s linear 3s infinite;
    --top1: 0;
    --top2: -0.625rem
}

.dh-fw3 ul li:nth-child(6) {
    -webkit-animation: updown 4s linear 3.5s infinite;
    animation: updown 4s linear 3.5s infinite;
    --top1: 0.625rem;
    --top2: 0
}

.dh-fw3 ul li:nth-child(7) {
    -webkit-animation: updown 4s linear 4s infinite;
    animation: updown 4s linear 4s infinite;
    --top1: 0;
    --top2: -0.625rem
}

.dh-fw3 ul li:nth-child(8) {
    -webkit-animation: updown 4s linear 4.5s infinite;
    animation: updown 4s linear 4.5s infinite;
    --top1: 0.625rem;
    --top2: 0
}

@keyframes updown {
    0% {
        top: var(--top1)
    }

    5% {
        top: var(--top1)
    }

    10% {
        top: var(--top2)
    }

    15% {
        top: var(--top1)
    }

    to {
        top: var(--top1)
    }
}