* {
    box-sizing: border-box;
}

html {
    font-size: 62.5%;
}

body {
    font-family: Arial, Microsoft Yahei;
    background: #fff;
    font-size: 1.2rem;
    line-height: 175%;
    color: #35323a;
}

html,
body {
    width: 100%;
    height: 100%;
}

article {
    max-width: 850px;
    margin: auto;
    height: 100%;
    position: relative;
}

a {
    display: inline-block;
    text-decoration: none;
}

.red {
    color: #f00;
}

.hide {
    display: none;
}

.btn_01.full {
    width: 23rem;
    left: 9rem;
}

.btn_03.full {
    width: 23rem;
    left: 39rem;
}

.swiper-container {
    width: 100%;
    height: 100%;
}

.swiper-container-vertical>.swiper-pagination {
    left: 10px;
    bottom: 8%;
    top: auto;
    width: 5%;
}

.swiper-pagination-bullet-active {
    background: #078CFF;
}

.swiper-slide {
    background-size: cover;
}

.page1 {
    background: url(../img/bg1.png) no-repeat;
    background-size: cover;
}

.page2 {
    background: #fff;
    background-size: cover;
}

.page3 {
    background: url(../img/bg3.png) no-repeat;
    background-size: cover;
}

.page4 {
    background: #fff;
    background-size: cover;
}

.page5 {
    background: url(../img/bg5.png) no-repeat;
    background-size: cover;
}

.page6 {
    background: url(../img/bg6.png) no-repeat;
    background-size: cover;
}
.page7 {
    background: url(../img/bg7.png) no-repeat;
    background-size: cover;
}
.tit1 {
    width: 100%;
    font-size: 1.3rem;
    text-align: center;
    position: absolute;
    left: 0;
    line-height: 166%;
}

.tit1 p {
    font-size: 2.4rem;
    line-height: 166%;
}
.tit1 p.linebottom{
    width: 98px;
    height: 4px;
    background: #FFFFFF;
    opacity: 0.39;
    border-radius: 2px;
    margin:18px auto;
}
.page1 .tit1 {
    color: #fff;
    letter-spacing: 0.4rem;
    top: 16%;
    font-family: "Microsoft YaHei", "Arial Narrow", HELVETICA;
}
.page1 .logo{
    width: 20rem;
    margin: 1.5rem 3rem;
}
.page1 .logo img{
   width: 100%;
}
.swiper-slide-active.page1 .tit1 {
    -webkit-animation: fadeInDown 1s 0.2s linear both;
    -moz-animation: fadeInDown 1s 0.2s linear both;
    animation: fadeInDown 1s 0.2s linear both;
}

@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translate3d(0, -10%, 0);
    }

    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

@keyframes scale {
    20% {
        transform: translate(0.5rem, 0) scale(0.9);
    }

    60% {
        transform: translate(0) scale(1.1);
    }

    100% {
        transform: translate(0) scale(1);
    }
}

.page1 .tit1 p {
    letter-spacing: 0;
}

/* .page1 img {
    position: absolute;
} */

.page1-img {
    opacity: 0;
    width: 75.2%;
    top: 28.48%;
    left: 12%;
    z-index: 1;
}

.swiper-slide-active .page1-img {
    opacity: 1;
    transition: all 1s ease;
}

.swiper-slide-active .page1-img.banner1 {
    top: 36.48%;
}

.a_down1 {
    display: inline-block;
    position: absolute;
    width: 47.73%;
    bottom: 16.9%;
    left: 27.33%;
    background: #078CFF;
    border-radius: 0.5rem;
    color: #fff;
    font-size: 1.6rem;
    line-height: 250%;
    text-align: center;
    z-index: 9;
    display: none;
}

.a_down1 img {
    display: inline-block;
    height: 1.8rem;
    margin-right: 5.5%;
    vertical-align: middle;
    position: static !important;
    margin-top: -0.2rem;
}

.page2 .tit1 {
    color:#2B2B2B;
    top:0rem;
    opacity: 0;
}
.page2 .tit1 p{
    color:#2B2B2B;
}
.page2 .tit1 span{
    color:#585858;
}
.page2 .tips{
    padding-top: 45rem;
}
.tips{
    display: flex;
    height: 200px;
    justify-content: center;
    align-items: center;
    margin-left: 15%;
    padding-top: 50rem;
}
.tips .tipone{
    flex: 1;
    height: 100px;
}
.tips .tipone img{
   width: 5rem;
}

.swiper-slide-active.page2 .tit1 {
    opacity: 1;
    top: 33rem;
    transition: all 1.2s ease;
}

.swiper-slide-active.page2 .page2_span span {
    display: inline-block;
    opacity: 0;
    transform: translate(-15rem, 0) scale(0);
    animation: page2_span .5s forwards;
}

@keyframes page2_span {
    40% {
        transform: translate(2.5rem, 0) scale(.7);
        opacity: 1;
        color: #43b3ff;
    }

    60% {
        color: #44d387;
    }

    80% {
        transform: translate(0) scale(2);
        opacity: 0;
    }

    100% {
        transform: translate(0) scale(1);
        opacity: 1;
    }
}

.page2 .tit1 p {
    font-size: 2.0rem;
}

.page2 img {
    position: absolute;
}

.page2-img1 {
    width: 60%;
    top: 0;
    left: 9%;
}

.page2-img2 {
    width: 46%;
    left: 16.26%;
    top: 2%;
    opacity: 0;
    transition: all 1s ease;
}


.swiper-slide-active .page2-img2 {
    width: 55%;
    left: 38%;
    top: 4%;
    opacity: 1;
    transition: all 1s ease;
}

.page4_main .swiper-slide {
    display: block;
    float: left;
}

@keyframes page2-img2 {
    0% {
        width: 35%;
        left: 16.26%;
        top: 40.38%;
        opacity: 0;
    }

    100% {
        width: 69.73%;
        left: 16.26%;
        top: 40.38%;
        opacity: 1;
    }
}

@keyframes page2-img3 {
    0% {
        width: 35%;
        left: 12.66%;
        top: 58.29%;
        opacity: 0;
    }

    100% {
        width: 67.33%;
        left: 12.66%;
        top: 58.29%;
        opacity: 1;
    }
}

.page3 .tit1 {
    top: 0;
    color: #fff;
    opacity: 0;
}
.page3 .tit1 span{
    color: rgba(255, 255, 255, 0.35);
    letter-spacing: 0.2rem;
}
.titp{
    border-bottom: 2px solid rgba(255, 255, 255, 0.35);
    width: 80%;
    margin: 5px auto;
}
.swiper-slide-active.page3 .tit1 {
    top: 8%;
    opacity: 1;
    transition: all 0.8s ease;
}

.page3 .tit1 p {
    font-size: 2.4rem;
}

.page3 img {
    position: absolute;
}

.swiper-slide-active .page3_span p {
    right: 35px;
    opacity: 1;
    transition: all 1.8s ease;
}

/*page3副标题动画*/
.swiper-slide-active .page3_span span {
    display: inline-block;
    opacity: 0;
    transform: translate(-15rem, 0) scale(0);
    animation: page3_span .5s forwards;
}

@keyframes page3_span {
    60% {
        transform: translate(1rem, 0) scale(1);
        color: #fff;
    }

    80% {
        transform: translate(1rem, 0) scale(1);
        color: #ffd151;
    }

    99% {
        transform: translate(0) scale(1.2);
        color: #ffd151;
    }

    100% {
        transform: translate(0) scale(1);
        opacity: 1;
        color: #fff;
    }
}

.page4 .tit1 {
    top: 0;
    opacity: 0;
}
.page4  img {
    position: absolute;
}

.page4-img1 {
    width: 80%;
    top: 1%;
    left: 12%;
}
.page4 .tit1 {
    color:#2B2B2B;
    top:0rem;
    opacity: 0;
}
.page4 .tit1 p{
    color:#2B2B2B;
}
.page4 .tit1 span{
    color:#585858;
}
.page4 .tips{
    padding-top: 45rem;
}
.swiper-slide-active.page4 .tit1 {
    opacity: 1;
    top: 35rem;
    transition: all 1.2s ease;
}
.page4 .tit1 p {
    font-size: 2.0rem;
}

/*page4副标题动画*/
.swiper-slide-active .page4_span span {
    color: #35323a;
    opacity: 0;
    display: inline-block;
    transform: translate(-7.5rem, 0) scale(.3);
    animation: page4_span 1s forwards;
}

@keyframes page4_span {
    40% {
        transform: translate(2.5rem, 0) scale(.7);
        opacity: 1;
        color: #44d387;
    }

    60% {
        color: #44d387;
    }

    80% {
        transform: translate(0) scale(2);
        opacity: 0;
    }

    100% {
        transform: translate(0) scale(1);
        opacity: 1;
    }
}

.swiper-slide-active .tit1 span:nth-of-type(1) {
    animation-delay: .05s;
}

.swiper-slide-active .tit1 span:nth-of-type(2) {
    animation-delay: .1s;
}

.swiper-slide-active .tit1 span:nth-of-type(3) {
    animation-delay: .15s;
}

.swiper-slide-active .tit1 span:nth-of-type(4) {
    animation-delay: .2s;
}

.swiper-slide-active .tit1 span:nth-of-type(5) {
    animation-delay: .25s;
}

.swiper-slide-active .tit1 span:nth-of-type(6) {
    animation-delay: .3s;
}

.swiper-slide-active .tit1 span:nth-of-type(7) {
    animation-delay: .35s;
}

.swiper-slide-active .tit1 span:nth-of-type(8) {
    animation-delay: .40s;
}

.swiper-slide-active .tit1 span:nth-of-type(9) {
    animation-delay: .45s;
}

.swiper-slide-active .tit1 span:nth-of-type(10) {
    animation-delay: .50s;
}

.swiper-slide-active .tit1 span:nth-of-type(11) {
    animation-delay: .55s;
}

.swiper-slide-active .tit1 span:nth-of-type(12) {
    animation-delay: .60s;
}

.swiper-slide-active .tit1 span:nth-of-type(13) {
    animation-delay: .65s;
}

.swiper-slide-active .tit1 span:nth-of-type(14) {
    animation-delay: .70s;
}

.swiper-slide-active .tit1 span:nth-of-type(15) {
    animation-delay: .75s;
}

.swiper-slide-active .tit1 span:nth-of-type(16) {
    animation-delay: .80s;
}

.page4_main {
    position: absolute;
    width: 53.6%;
    top: 26%;
    left: 23.2%;
}

.page4_img0 {
    width: 100%;
}


.swiper-button-disabled {
    opacity: 0.5;
}

.page5 .tit1 {
    top: 0;
    opacity: 0;
    color: #fff;
}

.swiper-slide-active.page5 .tit1 {
    top: 8%;
    opacity: 1;
    transition: all 1.8s ease;
}

.page5 .tit1 p {
    font-size: 2.4rem;
}

.page5 img {
    position: absolute;
}

.page5-img1 {
    width: 47.4%;
    top: 27.8%;
    left: 12.26%;
    z-index: 1;
}

.swiper-slide-active .page5_span span {
    opacity: 0;
    display: inline-block;
    transform: translate(0, -100px) rotate(360deg) scale(0);
    animation: page5_span .6s forwards;
}

@keyframes page5_span {
    30% {
        transform: translate(0, -2.5rem) rotate(180deg) scale(1);
        color: #fff;
    }

    60% {
        transform: translate(0, 1rem) scale(.8) rotate(0deg);
        color: #ffd151;
    }

    100% {
        transform: translate(0) scale(1) rotate(0deg);
        color: #fff;
        opacity: 1;
    }
}

.page5-img1 {
    width: 80%;
    top: 28%;
    left: 0%;
    z-index: 2;
}

.swiper-slide-active .page5-img1 {
    opacity: 1;
    left: 10%;
    top: 28%;
    transition: all 1s ease;
    transition-delay: 0.5s;
}

.page6 .tit1 {
    top: 0;
    opacity: 0;
}

.swiper-slide-active.page6 .tit1 {
    color:#000;
    top: 8%;
    opacity: 1;
    transition: all 1.8s ease;
}

.page6 .tit1 p {
    font-size: 2.4rem;
}
.page6 .tit1 span {
    color: #585858;
    letter-spacing: 0.2rem;
}
/*page6副标题动画*/
.swiper-slide-active .page6_span span {
    color: #35323a;
    font-size: 1.5rem;
    opacity: 0;
    display: inline-block;
    transform: rotate(-180deg) translate(7.5rem, 0);
    animation: page6_span .5s forwards;
}

@keyframes page6_span {
    10% {
        opacity: 1;
        color: #43b3ff;
    }

    100% {
        transform: rotate(0deg) translate(0);
        opacity: 1;
    }
}

.page6 img {
    position: absolute;
}

.page6-img1 {
    width: 100%;
    bottom:-20%;
    left: 6%;
    z-index: 1;
}
.page7 .tit1 {
    color: #fff;
    top: 0;
}
.swiper-slide-active.page7 .tit1 {
    top: 8%;
    opacity: 1;
    transition: all 1.8s ease;
}
.page7-img1 {
  padding-top: 22rem;
  text-align: center;
  color: #ffffff;
  font-size:1.5rem;
  font-weight: bold;
}
.page7-img1 img{
    width: 9rem;
}
.p_bottom {
    color: #79767f;
    text-align: center;
    width: 100%;
    position: absolute;
    bottom: 1.2%;
}

@media screen and (min-width:360px) {
    html {
        font-size: 75%;
    }
}

#weiBox_content {
    border-radius: 5px
}

.onlinePay_btn span {
    margin-top: 1rem
}

.onlinePay_tc {
    z-index: 2;
    display: none;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    position: absolute;
    top: 0;
    left: 0;
}

.onlinePay_content {
    width: 100%;
    padding-top: 1rem;
    background: #fff;
    position: absolute;
    top: 30%;
    height: 100%;
    border-radius: 5px;
}

.onlinePay_massage {
    font-size: 1rem;
    font-weight: normal;
    text-align: center;
    margin-top: -1rem;
}

.onlinePay_btn>span:last-child {
    border-left: 1px solid #fff;
}

.onlinePay_btn>span {
    width: 50%;
    float: left;
    display: block;
    height: 2.25rem;
    line-height: 2.25rem;
    background-color: #f88b00;
    color: #fff;
    font-size: .88em;
    text-align: center;
    box-sizing: border-box;
}

.onlinePay_btn>span:nth-child(2) {
    color: #fff
}

.onlinePay_weixinopen {
    width: 84%;
    margin: 2rem auto 0;
    font-size: 1.25rem;
    color: #fff;
}

.onlinePay_WAndroid>li {
    line-height: 2rem;
}

.onlinePay_weixinopen ul {
    padding-top: 6rem;
}

.onlinePay_weixinopen ul li {
    width: 85%;
    margin: 0 auto;
}

@media screen and (min-width:750px) {
    .a_down1 {
        font-size: 2.2rem;
    }

    .a_down1 img {
        height: 2.5rem;
        margin-top: -0.5rem;
    }

    .swiper-slide-active.page2 .tit1,
    .swiper-slide-active.page4 .tit1,
    .swiper-slide-active.page3 .tit1,
    .swiper-slide-active.page5 .tit1,
    .swiper-slide-active.page6 .tit1 {
        top: 10%;
    }

    .swiper-slide-active .page1-img.banner1 {
        top: 35.48%;
    }

    .tit1 p {
        font-size: 5.2rem;
    }

    .tit1 {
        font-size: 4rem;
    }

    .page2 .tit1 p,
    .page3 .tit1 p,
    .page4 .tit1 p,
    .page5 .tit1 p,
    .page6 .tit1 p {
        font-size: 4.8rem;
    }

    .page2-img1 {
        width: 44.66%;
        top: 26.51%;
        left: 26%;
    }

    .page2-img2 {
        width: 28%;
        left: 21.26%;
        top: 41.38%;
        opacity: 0;
        transition: all 1s ease;
    }

    .swiper-slide-active .page2-img2 {
        width: 53.73%;
        left: 21.26%;
        top: 40.38%;
        opacity: 1;
        transition: all 1s ease;
    }

    .page2-img3 {
        width: 28%;
        left: 18.66%;
        top: 54.29%;
        opacity: 0;
        transition: all 1s ease;
    }

    .swiper-slide-active .page2-img3 {
        width: 53.33%;
        left: 18.66%;
        top: 54.29%;
        opacity: 1;
        transition: all 1s ease;
    }

    @keyframes page2-img2 {
        0% {
            width: 28%;
            left: 21.26%;
            top: 41.38%;
            opacity: 0;
        }

        100% {
            width: 53.73%;
            left: 21.26%;
            top: 40.38%;
            opacity: 1;
        }
    }

    @keyframes page2-img3 {
        0% {
            width: 28%;
            left: 18.66%;
            top: 54.29%;
            opacity: 0;
        }

        100% {
            width: 53.33%;
            left: 18.66%;
            top: 54.29%;
            opacity: 1;
        }
    }

    .page3-img1 {
        width: 43.8%;
        top: 28.91%;
        left: 27.6%;
    }

    .page3-img2,
    .page3-img2 {
        width: 22.46%;
    }

    .swiper-slide-active .page3-img2 {
        width: 49.46%;
        left: 16%;
        top: 42.31%;
    }

    .swiper-slide-active .page3-img3 {
        width: 49.53%;
        left: 33.66%;
        top: 55.55%;
    }

    .page4_main {
        width: 44.6%;
        left: 27.2%;
    }

    .swiper-slide-active .page5-img1 {
        left: 30.26%;
    }

    .page5-img1 {
        width: 39.4%;
        top: 31.8%;
    }

    .page5-img2 {
        width: 28.86%;
        top: 40.32%;
    }

    .page5-img2 {
        width: 30.86%;
        left: 14.8%;
    }

    .page5-img3 {
        width: 26.66%;
        top: 48.4%;
    }

    .swiper-slide-active .page6-img1 {
        left: 27.66%;
    }

    .page6-img1 {
        width: 42.4%;
        bottom: -26.21%;
    }

    .page6-img3 {
        width: 28.26%;
        top: 38.74%;
        left: 57.86%;
    }

    .swiper-slide-active .page6-img2 {
        left: 19.73%;
    }

    .page6-img2 {
        width: 22.46%;
        top: 45.94%;
    }
}