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

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

.banner {
    width: 100%;
    display: flex;
    background: url(../img/banner1.png)no-repeat;
    background-size: 100% 100%;
    flex-direction: column;
}

.b-box {
    width: 51.9%;
    margin: 0 auto;
    display: flex;
    position: relative;
    flex-direction: column;
}

.banner-img {
    width: 100%;
    margin-top: 73px;
}

.banner-img1 {
    width: 95%;
    margin: -8% auto 0 auto;
}

.title1 {
    width: 439px;
    margin: 29px auto 0 auto;
}

.banner-mode {
    width: 62.5%;
    display: flex;
    justify-content: space-around;
    background: url(../img/mode1-bg.png)no-repeat;
    background-size: 100% 100%;
    margin: 20px auto 0 auto;
    padding: 61px 71px 0 71px;
    align-items: center;
}

.pen {
    display: block;
    width: 33%;
}

.pen-txt {
    width: 50%;
    border-width: 2px;
    border-color: rgb(0, 0, 0);
    border-style: solid;
    border-radius: 18px;
    background-image: -moz-linear-gradient(0deg, rgb(255, 238, 124) 0%, rgb(255, 254, 203) 100%);
    background-image: -webkit-linear-gradient(0deg, rgb(255, 238, 124) 0%, rgb(255, 254, 203) 100%);
    background-image: -ms-linear-gradient(0deg, rgb(255, 238, 124) 0%, rgb(255, 254, 203) 100%);
    text-align: center;
    font-size: 20px;
    font-family: "FZLanTingHeiS-B-GB";
    color: rgb(0, 0, 0);
    line-height: 1.645;
    padding: 30px 37px;

}

.dibu {
    width: 100%;
    display: flex;
    flex-direction: column;
    background: url(../img/bgbg.png)no-repeat;
    background-size: 100% 100%;
}

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

.inner {
    width: 62.5%;
    display: flex;
    flex-direction: column;
    background: url(../img/mode2-bg.png)no-repeat;
    background-size: 100% 100%;
    padding: 0 71px;
    margin: 18px auto 0 auto;
}

.title2 {
    width: 439px;
    margin: 87px auto 0 auto;
}

.jc-box {
    width: 100%;
    padding: 0 30px;
    margin-top: 163px;
    display: flex;
    flex-direction: column;
    border-width: 1px;
    border-color: rgb(0, 0, 0);
    border-style: solid;
    border-radius: 18px;
    background-image: -moz-linear-gradient(0deg, rgb(255, 238, 124) 0%, rgb(255, 254, 203) 100%);
    background-image: -webkit-linear-gradient(0deg, rgb(255, 238, 124) 0%, rgb(255, 254, 203) 100%);
    background-image: -ms-linear-gradient(0deg, rgb(255, 238, 124) 0%, rgb(255, 254, 203) 100%);
    margin-bottom: 31px;

}

.jc-t {
    width: 90%;
    margin: -4% auto 0 auto;
    border-width: 1px;
    border-color: rgb(0, 0, 0);
    border-style: solid;
    background-image: -moz-linear-gradient(0deg, rgb(255, 238, 124) 0%, rgb(255, 254, 203) 100%);
    background-image: -webkit-linear-gradient(0deg, rgb(255, 238, 124) 0%, rgb(255, 254, 203) 100%);
    background-image: -ms-linear-gradient(0deg, rgb(255, 238, 124) 0%, rgb(255, 254, 203) 100%);
    border-radius: 50px;
    text-align: center;
    font-size: 22px;
    font-family: "FZLanTingHeiS-B-GB";
    color: #000;
    padding: 19px 0;

}

.jc-t span {
    color: rgb(255, 74, 121);
    font-size: 26px;
}

.gg {
    width: 100%;
    display: flex;
    justify-content: space-between;
    margin-top: 23px;
    margin-bottom: 23px;
}

.gg1 {
    width: 23%;
    border-width: 1px;
    border-color: rgb(0, 0, 0);
    border-style: solid;
    border-radius: 18px;
    background-image: -moz-linear-gradient(0deg, rgb(255, 156, 182) 0%, rgb(255, 233, 239) 100%);
    background-image: -webkit-linear-gradient(0deg, rgb(255, 156, 182) 0%, rgb(255, 233, 239) 100%);
    background-image: -ms-linear-gradient(0deg, rgb(255, 156, 182) 0%, rgb(255, 233, 239) 100%);
    display: flex;
    flex-direction: column;
    text-align: center;
    padding: 28px 0 0 0;
}

.ggtt {
    font-size: 21px;
    font-weight: bold;
}

.gg-b {
    width: 100%;
    display: flex;
    flex-direction: column;
    border-width: 1px;
    border-color: rgb(0, 0, 0);
    border-style: solid;
    border-radius: 18px;
    background: #fff;
    padding: 15px;
    height: 134px;
    justify-content: center;
    align-items: center;
    margin-top: 20px;
}

.gg-b span {
    font-size: 16px;
    height: 100%;
    border-width: 1px;
    border-color: rgb(0, 0, 0);
    border-style: solid;
    border-radius: 20px;
    background-color: rgb(161, 243, 251);
    display: block;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    line-height: 29px;
}

.gg-b p {
    width: 100%;
    border-radius: 20px;
    background-color: rgb(161, 243, 251);
    border-width: 1px;
    border-color: rgb(0, 0, 0);
    border-style: solid;
    font-size: 16px;
    padding: 2px 0;
    margin-bottom: 4%;
}

.gg-b p:last-child {
    margin-bottom: 0;
}
.title3 {
    width: 439px;
    margin: 87px auto 0 auto;
}
.small-tit{
    width: 361px;
    display: block;
    margin: 115px auto 0 auto;
}
.rr-box{
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 27px;
    margin-bottom: 52px;
}
.zuo{
    width: 5%;
}
.rr1{
    width: 19%;
    display: flex;
    flex-direction: column;
        border-width: 1px;
        border-color: rgb(0, 0, 0);
        border-style: solid;
        border-radius: 21px;
        background-color: rgb(255, 252, 237);

      
}
.rr-top{
    background: url(../img/rr-top.png)no-repeat;
    background-size: 100% 100%;
    width: 100%;
    text-align: center;
    font-size: 18px;
    padding: 8% 0;
}
.rr1 img{
    width: 70%;
    margin:10% auto
    ;
}
.title4 {
    width: 439px;
    margin: 87px auto 0 auto;
}
.bb-box {
    border-width: 1px;
    border-color: rgb(0, 0, 0);
    border-style: solid;
    border-radius: 23px;
    background-color: rgb(161, 243, 251);
    width: 100%;
    margin: 150px 0 60px 0;
    padding: 32px 47px;
    display: flex;

    flex-direction: column;
    justify-content: center;
  }
  .arx{
      background: url(../img/ar-bg.png)no-repeat;
      background-size: 100% 100%;
      text-align: center;
      padding: 1% 0;
      font-size: 18px;
  }
  .xia{
      width: 4%;
      margin: 1% auto;
  }
  .title5 {
    width: 439px;
    margin: 87px auto 0 auto;
}
.pp-box{
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 162px;
}
.pp1{
    width: 17%;
    display: flex;
    flex-flow: column;
    background: url(../img/pp-bg.png)no-repeat;
    background-size: 100% 100%;
    padding: 25px 18px 18px 18px;
}
.jia{
    width: 3%;
    margin-top: 12%;
}
.pp1 img{
    width: 70%;
    margin: 0 auto;
}
.pp1 span{
        border-width: 1px;
        border-color: rgb(0, 0, 0);
        border-style: solid;
        border-radius: 11px;
        background-color: rgb(161, 243, 251);
      font-size: 18px;
      margin-top: 10%;
      text-align: center;
      padding: 5% 0;
}
.pp-tip {
    border-width: 1px;
    border-color: rgb(0, 0, 0);
    border-style: solid;
    background-color: rgb(246, 255, 166);
    width: 60%;
    margin: 50px auto;
    border-radius: 50px;
    text-align: center;
    font-size: 18px;
    font-weight: bold;
    padding: 1% 0;
  }
  .title6 {
    width: 439px;
    margin: 87px auto 0 auto;
}
.sk{
    width: 100%;
    margin: 146px 0 67px 0;
}
.si{
    width: 100%;
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    margin: 162px 0 68px 0;
}
.si img{
    width: 40%;
}
.nine{
    width: 62.5%;
    margin: 62px auto 245px auto;
}
/* 通用头部 */
.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: 100%;
    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;
}

/* 通用底部 */

.footer {
    clear: both;
    position: relative;
    /* padding: 30px 0; */
    text-align: center;
}

.footer p {
    position: relative;
    z-index: 2;
    color: #000;
    font-size: 16px;
    line-height: 30px;
	/* margin-bottom: 15%; */
}

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

.footer p a {
    color: #000;
}
.Width{
    width: 62.5%;
}
@media screen and (max-width:1720px) {
    .arx{
        font-size: 16px;
    }
    .inner,.banner-mode,.nine{
        width: 70%;
    }
}
@media screen and (max-width:1460px) {
    .inner,.banner-mode,.nine{
        width: 80%;
    }
}
@media screen and (max-width:1400px) {
    .inner,.nine,.banner-mode{
        width: 85%;
    }
}
@media screen and (max-width:1300px) {
    .ggtt{
        font-size: 16px;
    }
    .gg-b{
        padding: 8px;
    }
    .gg-b span{
        font-size: 15px;
    }
    .gg-b p{
        font-size: 15px;
    }
    .jc-box{
        padding: 0 10px;
    }
    .bb-box{
        padding: 20px;
    }
    .arx{
        font-size: 15px;
    }
    .inner{
        padding: 0 20px;
    }
}
@media screen and (max-width:1080px) {
    .inner,.nine,.banner-mode,.Width{
        width: 95%;
    }
    .inner{
        padding: 0 0.2rem;
    }
    .b-box{
        width: 95%;
    }
    .title1{
        width: 4.39rem;
    }
    .banner-img{
        margin-top: 0.73rem;
        margin-top: 0.29rem;
    }
    .banner-mode{
        margin-top: 0.2rem;
        padding: 0.61rem 0.5rem 0 0.5rem;
    }
    .pen-txt{
        font-size: 0.2rem;
        padding: 0.2rem 0;
        border-width: 0.02rem;
        margin-bottom: 0.2rem;
        margin-top: 0.2rem;
    }
    .title2,.title4,.title5{
        width: 4.39rem;
        margin-top: 0.87rem;
    }
    .jc-t{
        font-size: 0.18rem;
        padding: 0.19rem 0;
        width: 100%;
    }
    .jc-t span{
        font-size: 0.18rem;
    }
    .jc-box{
        margin-top: 1rem;
        padding: 0 0.2rem;
        margin-bottom: 0.31rem;
    }
    .gg1{
        padding-top: 0.28rem;
        width: 49%;
        margin-bottom: 0.2rem;
    }
    .ggtt{
        font-size: 0.21rem;
    }
    .gg-b{
        padding: 0.1rem;
        height: 1.34rem;
        margin-top: 0.2rem;
    }.gg-b span{
        font-size: 0.16rem;
        line-height: 0.29rem;
    }
    .gg{
        flex-wrap: wrap;
        margin: 0.23rem 0;
    }
    .gg-b p{
        font-size: 0.16rem;
        margin-bottom: 2%;
    }
    .title3,.title6{
        width: 4.39rem;
        margin-top: 0.87rem;
    }
    .small-tit{
        width: 3.61rem;
        margin-top: 1.15rem;
    }
    .rr-top{
        font-size: 0.24rem;
    }
    .rr1{
        border-radius: 10%;
        width: 49%;
        margin-bottom: 2%;
    }
    .rr-box{
        margin-top: 0.27rem;
        margin-bottom: 0.15rem;
        flex-wrap: wrap;
    }
    .zuo{
        display: none;
    }
    .bb-box{
        margin: 1.5rem 0 0.6rem 0;
        padding: 0.32rem 0.05rem;
    }
    .arx{
        font-size: 0.18rem;
        background: #ffffff;
        border-radius: 50px;
        border: 0.01rem solid #000;
        padding: 1% 2%;
    }
    .pp-box{
        margin-top: 1.62rem;
        flex-wrap: wrap;
        justify-content: space-around;
    }
    .jia{
        display: none;
    }
    .pp1{
        width:32%;
        margin-bottom: 2%;
    }
    .pp1 span{
        font-size: 0.18rem;
        border-radius: 0.11rem;
    }
    .pp-tip{
        font-size: 0.2rem;
        width: 100%;
        margin: 0.2rem 0;
    }
    .sk{
        margin: 1rem 0 0.4rem 0;
    }
    .si{
        margin: 1rem 0 0.4rem 0;
    }
    .nine{
        margin: 0.4rem auto 1rem auto;
    }
}