* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.box {
    width: 100%;
    display: flex;
    flex-direction: column;
    background: #000;
}

.banner {
    width: 100%;
    display: flex;
    flex-direction: column;
}

.inner {
    width: 62.5%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
}

.mode {
    width: 100%;
    display: flex;
    flex-direction: column;
}

.banner img {
    width: 100%;
    z-index: 9;
}

.bt1 {
    width: 1030px;
    margin: 64px auto 22px auto;
}

.s1-box {
    width: 100%;
    display: flex;
    flex-direction: column;
    background: url(../img/mode1-bg.png)no-repeat;
    background-size: 100% 100%;
    margin-bottom: 201px;
}

.s1-box img {
    width: 90%;
    margin: 60px auto 37px auto;
}

.bt2 {
    width: 756px;
    margin: 11px auto 30px auto;
}

.yell-bg {
    background: #fbe86b;
    border-bottom-left-radius: 150px;
    border-bottom-right-radius: 150px;
}

.shujia-box {
    width: 100%;
    display: flex;
    flex-direction: column;
    padding: 80px 80px 0 80px;
    background: url(../img/shujia-bg.png)no-repeat;
    background-size: 100% 100%;
    margin-bottom: 42px;
}

.shujia-inner {
    width: 100%;
    display: flex;
    flex-direction: column;
    background: url(../img/shujia-inner-bg.png)no-repeat;
    background-size: 100% 100%;
    padding: 37px;
}

.tab-btn {
    width: 100%;
    display: flex;
}

.tab-btn span {
    display: block;
    background: url(../img/tab-bg-hover.png)no-repeat;
    background-size: 100% 100%;
    width: 271px;
    text-align: center;
    font-size: 22px;
    color: #fff;
    font-weight: bold;
    padding: 1% 0 1.2% 0;
    margin-right: 2%;
}

.tab-btn span:hover {
    background: url(../img/tab-bg.png)no-repeat;
    background-size: 100% 100%;
}

.tab-active {
    background: url(../img/tab-bg.png)no-repeat !important;
    background-size: 100% 100% !important;
}

.book-box {
    width: 100%;
    display: flex;
    justify-content: space-between;
    margin-top: 90px;
    margin-bottom: 20px;
}

.book {
    width: 29%;
    display: flex;
    flex-direction: column;
}

.book img {
    width: 90%;
    height: 262px;
    margin: 0 auto;
}

.book span {
    display: block;
    width: 100%;
    background: url(../img/book-bottom.png)no-repeat;
    background-size: 100% 100%;
    text-align: center;
    font-size: 24px;
    font-weight: bold;
    color: #fff;
    padding: 8% 0 3% 0;
    margin-top: -5%;
}

.book p {
    text-align: center;
    padding: 17px 0 0 0;
    color: #333333;
    font-size: 18px;
}

.book2 {
    display: none;
}

.tiao {
    width: 100%;
}

.lb-btn {
    width: 470px;
    height: 62px;
    margin: 2% auto;
}

.bt3 {
    width: 888px;
    margin: 49px auto 65px auto;
}

.blt-box {
    width: 100%;
    display: flex;
    flex-direction: column;
    background: url(../img/mode1-bg.png)no-repeat;
    background-size: 100% 100%;
    padding: 42px 60px 62px 60px;
    margin-bottom: 185px;

}

.tab-btn11 {
    width: 100%;
    display: flex;
}

.tab-btn11 span {
    display: block;
    background: url(../img/tab-bg-hover.png)no-repeat;
    background-size: 100% 100%;
    /* width: 271px; */
    text-align: center;
    font-size: 22px;
    color: #fff;
    font-weight: bold;
    padding: 1% 2% 1.2% 2%;
    margin-right: 2%;
}

.tab-btn1 span:hover {
    background: url(../img/tab-bg.png)no-repeat;
    background-size: 100% 100%;
}

.tab-active1 {
    background: url(../img/tab-bg-hover.png)no-repeat !important;
    background-size: 100% 100% !important;
}

.blt-img {
    width: 90%;
    margin: 2% auto;
}

.bt4 {
    width: 907px;
    margin: 0 auto 50px auto;
}

.zy-box {
    width: 100%;
    display: flex;
    justify-content: space-between;
    background: url(../img/mode1-bg.png)no-repeat;
    background-size: 100% 100%;
    padding: 120px 60px 62px 60px;
    margin-bottom: 42px;
}

.zy {
    width: 22%;
    display: flex;
    flex-direction: column;
    background: url(../img/zy-bg.png)no-repeat;
    background-size: 100% 100%;
    position: relative;
}

.zy-icon {
    width: 60%;
    margin: -30% auto 0 auto;
}

.zy span {
    font-size: 18px;
    padding: 0 3% 0 8%;
    margin-bottom: 50%;
}

.zy-po {
    position: absolute;
    bottom: 5%;
    left: -7%;
    width: 100%;
}

.ts span {
    font-size: 16px !important;
}

.bt5 {
    width: 1015px;
    margin: 71px auto 28px auto;
}

.blue-bg {
    background: #0002e3;
    border-radius: 150px 150px 0 0;
}

.big-inner {
    width: 100%;
    display: flex;
    flex-direction: column;
    background: url(../img/big-inner-bg.png)no-repeat;
    background-size: 100% 100%;
    padding: 20px 40px;
}

.iner-bt1 {
    width: 627px;
    margin: 0 auto;
}

.ms-box {
    width: 100%;
    display: flex;
    justify-content: space-between;
    margin-top: 30px;
}

.ms {
    width: 30%;
    display: flex;
    flex-direction: column;
}

.ms-tt {
    width: 100%;
    background: #0002e3;
    text-align: center;
    font-size: 20px;
    color: #fff;
    font-weight: bold;
    padding: 2% 0;
}

.ms-img {
    width: 100%;
    display: flex;
    flex-direction: column;
    position: relative;
    align-items: center;
    justify-content: center;
    background: url(../img/ms-book-bg.png)no-repeat;
    margin-top: 4%;
    background-size: 100% 100%;
    height: 311px;
}

.ms-img img {
    margin: 10% auto;
}

.ms-price {
    background: url(../img/ms-price.png)no-repeat;
    background-size: 100% 100%;
    position: absolute;
    width: 148px;
    height: 148px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    right: -15%;
    bottom: -1%;

}

.ms-price span {
    color: #333333;
    font-size: 13px;
}

.ms-price p {
    color: #333333;

}

.ms-price p span {
    text-decoration: line-through;
}

.jg {
    font-size: 25px !important;
    font-weight: bold;
}

.nowbuy {
    background: url(../img/ms-btn.png)no-repeat;
    background-size: 100% 100%;
    display: block;
    width: 191px;
    margin: 2% auto;
    color: #fff;
    text-decoration: none;
    font-weight: bold;
    font-size: 20px;
    text-align: center;
    padding: 3% 0 4% 0;
}

.iner-bt2 {
    width: 773px;
    margin: 31px auto 0 auto;
}

.ks-rl {
    width: 100%;
    margin: 2% 0 0 0;
}

.sl-box {
    width: 100%;
    display: flex;
    justify-content: space-between;
    background: url(../img/sl-bg.png)no-repeat;
    background-size: 100% 100%;
    padding: 17px 54px;
    margin-top: 4%;
}

.sl {
    width: 25%;
    background: url(../img/sl-bg1.png)no-repeat;
    background-size: 100% 100%;
    display: flex;
    flex-direction: column;
    margin-bottom: 3%;

}

.sl p {
    text-align: center;
    color: #333333;
    -webkit-text-stroke: 0.5px #fff;
    font-size: 24px;
    padding: 36px 0 0 8%;
}

.sl span {
    background: #0002e3;
    text-align: center;
    display: block;
    width: 35%;
    margin: 30px auto 14px auto;
    color: #fff;
    font-size: 16px;
    border-radius: 50px;
    padding: 1% 0 1% 0;
}

.bt6 {
    width: 771px;
    margin: 0 auto;
}

.yll {
    background: #fbe86b;
}

.box03 {
    width: 100%;
    display: flex;
    flex-direction: column;
    margin-top: 5%;
}

.region {
    width: 100%;
    flex-wrap: wrap;
    display: flex;
}

.region a {
    display: block;
    width: 14.285%;
    display: flex;
    margin-bottom: 1%;
}

.region a span {
    display: block;
    background: #0002e3;
    width: 95%;
    margin: 0 auto;
    text-align: center;
    padding: 10% 0;
    font-size: 18px;
    color: #fff;
    border-radius: 10px;
}

.box04_bottom {
    width: 100%;
    display: flex;
    justify-content: space-between;
}

.zx-left {
    width: 70%;
}

.zx-left h2 {
    font-size: 24px;
    font-weight: bold;
    color: #d5584b;
    padding: 3% 0;
}

.link_container,
.zx-left p,
.zx-left p a {
    font-size: 18px !important;
    color: #333;
    text-decoration: none;
}

.service {
    background: #d02f21;
    color: #fff !important;
    margin-left: 15%;
    font-size: 16px;
    border-radius: 50px;
    padding: 0 2%;

}

.zx-right {
    width: 30%;
}

.zx-right img {
    width: 45%;
}

/* 通用头部 */
.ht_top {
    width: 100%;
    background: #fafafa url(https://www.huatu.com/z/topfooter/images/nav_bg.gif) repeat-x 0 0;
    line-height: 41px;
    overflow: hidden;
}

.Width {
    width: 80%;
    background: red;
    margin: 0 auto;
}

.ht_top .zt_top {
    width: 1070px;
    height: 41px;
    margin: 0 auto;
}

.ht_top h1 {
    float: left;
}

.ht_top h1 a {
    float: left;
    width: 131px;
    height: 40px;
    overflow: hidden;
    text-indent: -100em;
    background: url(http://www.huatu.com/z/topfooter/images/logo.gif) no-repeat;
    font-size: 12px;

}

.ht_top .topnav {
    float: right;
    color: #0d0d0d;
    font-size: 12px;
}

.ht_top .topnav a {
    padding: 0 8px;
}

.ht_top .topnav a:hover {
    color: #e4393c;
    text-decoration: underline;
}

/* end */

* {
    box-sizing: border-box;
}

/* 通用底部 */

.footer {
    clear: both;
    position: relative;
    padding: 30px 0 0 0;
    text-align: center;
    /* padding-bottom: 40px; */
    padding-bottom: 2%;
    background: #fbe86b;
    padding-bottom: 15%;
}

.footer p {
    position: relative;
    z-index: 2;
    font-size: 16px;
    line-height: 30px;
}

.footer p span {
    padding: 0 5px;
}

.footer p a {
    color: #000;
    text-decoration: none;
}

.dibu {
    width: 62.5%;
    position: fixed;
    bottom: 0;
    z-index: 10;
    left: 18.75%;
}

.zxzc {
    width: 8%;
    position: fixed;
    right: 5%;
    top: 40%;
}

.tc {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    background: rgba(0, 0, 0, 0.7);
    position: fixed;
    top: 0;
    z-index: 11;
    align-items: center;
    justify-content: center;
    display: none;

}

.tcinner {
    background: url(../img/tcc-bg.png)no-repeat;
    background-size: 100% 100%;
    width: 60%;
    position: relative;
    padding: 60px 36px 50px 36px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.close {
    width: 3%;
    position: absolute;
    top: -3%;
    right: 0;
}

.tcinner li {
    width: 16.66666666667%;
    display: block;
    margin-bottom: 1%;
}

.tcinner li a {
    text-decoration: none;
    color: #fff;
    font-size: 18px;
    font-weight: bold;
    display: block;
    width: 95%;
    margin: 0 auto;
    text-align: center;
    background: #0002e3;
    border-radius: 10px;
    padding: 8% 0;
}

.tcinner li a:hover {
    background: #fbe86b;
    color: #333;
}
.swiper-slide .book{
    width: 90%;
}
.book1{
    position: relative;
}
@media screen and (max-width: 1600px) {
    .inner{
        width: 85%;
    }
    .book span{
        font-size: 18px;
    }
}
@media screen and (max-width: 1080px) {
    .ht_top h1 a{
        width: 1.31rem;
        height: 0.4rem;
        background-size: 100% 100%;
        margin-top: 0.2rem;
    }
    .inner{
        width: 99%;
    }
    .bt1,.bt2,.bt3,.bt4,.bt5,.bt6{
        width: 95%;
        margin: 2% auto;
    }
    .s1-box{
        margin-bottom: 2rem;
    }
    .shujia-box{
        padding: 0.42rem;
    }
    .shujia-inner{
        padding: 0.37rem;
    }
    .tab-btn span{
        font-size: 0.22rem;
        width: 2.71rem;
        height: 0.72rem;
        padding: 0;
        line-height: 0.72rem;
    }
    .book-box{
        margin-bottom: 0.2rem;
        margin-top: 0.9rem;
    }
    .book img{
        height: 2.62rem;
    }
    .book span{
        font-size: 0.24rem;
    }
    .book p{
        font-size: 0.18rem;
    }
    .book-box{
        flex-wrap: wrap;
    }
    .book{
        width: 48%;
        margin: 0 auto;
        margin-bottom: 2%;
    }
    .lb-btn{
        width: 4.7rem;
        height: 0.62rem;
    }
    .blt-box{
        padding: 0.42rem 0.6rem 0.62rem 0.6rem;
        margin-bottom: 1.85rem;
    }
    .tab-btn1 span{
        font-size: 0.22rem;
    }
    .zy-box{
        padding: 1.2rem 0.6rem 0.62rem 0.6rem;
        flex-wrap: wrap;
        margin-bottom: 0.4rem!important;
    }
    .zy{
        width: 49%;
        margin-bottom: 15%;
    }
    .zy:last-child{
        margin-bottom: 0;
    }
    .zy:nth-child(3){
        margin-bottom: 0;
    }
    .zy span{
        font-size: 0.18rem;
    }
    .zy-po{
        width: 100%;
    }
    .ts span{
        font-size: 0.16rem!important;
    }
    .big-inner{
        padding: 0.2rem 0.4rem;
    }
    .iner-bt1{
        width: 6.27rem;
    }
    .iner-bt2{
        width: 100%;
        margin-top: 0.31rem;
    }
    .ms-tt{
        font-size: 0.2rem;
    }
    .ms-box{
        flex-wrap: wrap;
        margin-top: 0.3rem;
    }
    .ms{
        width: 49%;
        margin: 0 auto;
        margin-bottom: 2%;
    }
    .ms-img img{
        width: 80%;
    }
    .ms-img{
        height: 3.11rem;
    }
    .nowbuy{
        width: 1.91rem;
        font-size: 0.2rem;
    }
    .ms-price{
        width: 1.48rem;
        height: 1.48rem;
        right: 0;
    }
    .ms-price span{
        font-size: 0.13rem;
    }
    .jg{
        font-size: 0.25rem!important;
    }
    .sl-box{
        padding: 0.17rem;
        flex-wrap: wrap;
    }
    .sl{
        width: 49%;
    }
    .sl p{
        font-size: 0.3rem;
        padding: 0.36rem 0 0 8%;
    }
    .sl span{
        margin: 0.3rem auto 0.14rem auto;
        font-size: 0.16rem;
    }
    .region a span{
        font-size: 0.18rem;
        border-radius: 2px;
    }
    .box04_bottom{
        flex-direction: column;
    }
    .zx-left{
        width: 100%;
    }
    .zx-left h2{
        font-size: 0.3rem;
    }
    .link_container, .zx-left p, .zx-left p a{
        font-size: 0.3rem!important;
    }
    .zx-right{
        width: 100%;
    }
    .footer p{
        font-size: 0.16rem;
    }

    .dibu{
        width: 100%;
        left: 0;
    }
    .yell-bg{
        border-radius: 0 0 0.5rem 0.5rem;
    }
    .brwu{
        border-radius:0.5rem 0.5rem 0 0 !important;

    }
    .tcinner{
        width: 100%;
        padding: 0.6rem 0.36rem 0.5rem 0.36rem;
    }
    .tcinner li a{
        font-size: 0.18rem;
    }
    .blt-img{
        width: 100%;
    }
    .zxzc{
        width: 15%;
    }
    .zy-po{
        left: -7%;
    }
    .swiper-slide .book{
        width: 100%;
    }
}
.heartbeat {
	-webkit-animation: heartbeat 1.5s ease-in-out infinite both;
	        animation: heartbeat 1.5s ease-in-out infinite both;
}
/* ----------------------------------------------
 * Generated by Animista on 2023-5-26 14:30:1
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation heartbeat
 * ----------------------------------------
 */
 @-webkit-keyframes heartbeat {
    from {
      -webkit-transform: scale(1);
              transform: scale(1);
      -webkit-transform-origin: center center;
              transform-origin: center center;
      -webkit-animation-timing-function: ease-out;
              animation-timing-function: ease-out;
    }
    10% {
      -webkit-transform: scale(0.91);
              transform: scale(0.91);
      -webkit-animation-timing-function: ease-in;
              animation-timing-function: ease-in;
    }
    17% {
      -webkit-transform: scale(0.98);
              transform: scale(0.98);
      -webkit-animation-timing-function: ease-out;
              animation-timing-function: ease-out;
    }
    33% {
      -webkit-transform: scale(0.87);
              transform: scale(0.87);
      -webkit-animation-timing-function: ease-in;
              animation-timing-function: ease-in;
    }
    45% {
      -webkit-transform: scale(1);
              transform: scale(1);
      -webkit-animation-timing-function: ease-out;
              animation-timing-function: ease-out;
    }
  }
  @keyframes heartbeat {
    from {
      -webkit-transform: scale(1);
              transform: scale(1);
      -webkit-transform-origin: center center;
              transform-origin: center center;
      -webkit-animation-timing-function: ease-out;
              animation-timing-function: ease-out;
    }
    10% {
      -webkit-transform: scale(0.91);
              transform: scale(0.91);
      -webkit-animation-timing-function: ease-in;
              animation-timing-function: ease-in;
    }
    17% {
      -webkit-transform: scale(0.98);
              transform: scale(0.98);
      -webkit-animation-timing-function: ease-out;
              animation-timing-function: ease-out;
    }
    33% {
      -webkit-transform: scale(0.87);
              transform: scale(0.87);
      -webkit-animation-timing-function: ease-in;
              animation-timing-function: ease-in;
    }
    45% {
      -webkit-transform: scale(1);
              transform: scale(1);
      -webkit-animation-timing-function: ease-out;
              animation-timing-function: ease-out;
    }
  }