.swiper-container{
    height: 100vh;
}
.swiper-slide {
    overflow: hidden;
}
.slide-1{
    background: url(../images/page1Bg.jpg) left top repeat;
}
.slide-black{
    background: #000 ;
}
.slide-1 .round{
    height: 802px;
    width: 802px;
    position: absolute;
    left: 50%;
    margin-left: -400px;
    bottom: -128px;
    animation: rotate360 20s linear infinite;
}
.slide-1 .round1{
    height: 873px;
    width: 873px;
    position: absolute;
    left: 50%;
    margin-left: -436px;
    bottom: -553px;
    animation: rotate-360 20s linear infinite;
}
.videobox{
    position: absolute;
    bottom: 190px;
    right: 50%;
    margin-right: -250px;
    width: 500px;
    border: 8px solid #85BF27;
    font-size: 0;
}
/* .pos{
    position: fixed;
    bottom: 40px;
    right: 40px;
    width: 400px;
    margin-right: -0;
    height: 225px;
} */
.downBtn{
    position: fixed;
    bottom: 65px;
    left: 50%;
    height: 76px;
    width: 76px;
    margin-left: -38px;
    z-index: 10;
    cursor: pointer
}
.downRound{
    height: 76px;
    width: 76px;
    background: url(../images/down.png) center center no-repeat;
    /* animation: qbounce 2s ease infinite; */
    border-radius: 50%;
}
.downRound::after,
.downBtn::before,
.downBtn::after{
    content: "";
    display: block;
    height: 74px;
    width: 74px;
    border: 1px solid #FFF;
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 50%;
    z-index: 1;
}
.downBtn::before{
    animation: roundScale 2s  ease infinite;
}
.downBtn::after{
    animation: roundScale 2s .4s ease infinite;
}
.downRound::after{
    animation: roundScale 2s .8s ease infinite;
}
.slide-1 .font{
    height: 93px;
    width: 93px;
    position: absolute;
}
.common{
    width: 1070px;
    height: 100%;
    margin: 0 auto;
    position: relative;
}
.slide-1 .font1{
    bottom: 508px;
    left: 176px;
    background: url(../images/fontimg1.png) center center no-repeat;
}
.slide-1 .font2{
    bottom: 508px;
    left: 280px;
    background: url(../images/fontimg2.png) center center no-repeat;
}
.slide-1 .font7{
    height: 30px;
    width: 24px;
    bottom: 508px;
    left: 380px ;
    background: url(../images/fontimg7.png) center center no-repeat;
}
.slide-1 .font3{
    bottom: 508px ;
    left: 470px;
    background: url(../images/fontimg3.png) center center no-repeat;
}
.slide-1 .font4{
    bottom: 508px ;
    left: 566px;
    background: url(../images/fontimg4.png) center center no-repeat;
}
.slide-1 .font5{
    bottom: 508px ;
    left: 665px;
    background: url(../images/fontimg5.png) center center no-repeat;
}
.slide-1 .font6{
    bottom: 508px ;
    left: 770px;
    background: url(../images/fontimg6.png) center center no-repeat;
}

.slide-4 .menu{
    right: 15px;
}
.slide-4 .logo{
    left: 15px;
}
.linebg{
    height: 100%;
    width: 294px;
    position: absolute;
    top: 0;
    left: 544px;
}
.line{
    background: #85BF27;
    transform: skew(-33deg);
    width: 100%;
    height: 100%;
}
.cku{
    height: 150px;
    width: 396px;
    position: absolute;
    top: 161px;
    left: 84px;
}
.slide-2 .left{
    position: absolute;
    top: 198px;
    left: 84px;
}
.swiper-slide .g{
    height: 4px;
    width: 48px;
    background: #3c3c3c;
    margin-bottom: 48px;
}
.slide-2 p{
    font-size: 60px;
    color: #333333;
    line-height: 72px;
}
.slide-2 .text{
    font-size: 16px;
    color: #333333;
    width: 360px;
    line-height: 22px;
    margin-top: 31px;
}
.quan{
    position: absolute;
    top: -6px;
    left: 66px;
    font-size: 12px;
}
.slide-2 .btn{
    height: 54px;
    width: 179px;
    position: relative;
    background: url(../images/btn1.png) center center no-repeat;
    margin-top: 73px;
    cursor: pointer
}
.slide-2 .icon{
    height: 10px;
    width: 16px;
    background: url(../images/arraw1.png) center center no-repeat;
    position: absolute;
    top: 50%;
    right: 36px;
    margin-top: -5px;
    animation: toRight 2s  ease infinite;
}
.book{
    position: absolute;
    top: 129px;
    right: -18px;
}
.slide-3{
    background-color: #31a739;
}
.slide-3 .imgbox{
    position: absolute;
    top: 100px;
    left: 16px;
}
.slide-3 .right{
    width: 313px;
    position: absolute;
    top: 232px;
    right: 0;
    color: #FFFFFF;
    z-index: 2;
}
.slide-3 .round{
    height: 249px;
    width: 249px;
    position: absolute;
    top: 108px;
    right: 77px;
    animation: rotate360 20s linear infinite;
}
.slide-3 .g{
    background: #FFFFFF;
}
.slide-3 p{
    font-size: 60px;
    font-weight: 500;
    line-height: 72px;
}
.slide-3 .text{
    font-size: 16px;
    line-height: 22px;
    margin-top: 30px;
    margin-bottom: 40px;
}
.slide-3 .btn{
    height: 54px;
    width: 215px;
    position: relative;
    background: url(../images/btn2.png) center center no-repeat;
    cursor: pointer
}
.slide-3 .icon{
    height: 10px;
    width: 16px;
    background: url(../images/arraw2.png) center center no-repeat;
    position: absolute;
    top: 50%;
    right: 34px;
    margin-top: -5px;
    animation: toRight 2s  ease infinite;
}
.slide-4 .leftbg{
    width: 50%;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background: #85BF27;
    overflow: hidden;
}
.slide-4 .rightbg{
    width: 50%;
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    background: #FFFFFF;
}
.slide-4 .round{
    position: absolute;
    bottom: -234px;
    left: -70px;
    background: url(../images/roundBg1.png) center center no-repeat;
    background-size: 100% 100%;
    height: 873px;
    width: 873px;
    animation: rotate360 20s linear infinite;
}  
.slide-4 .btn{
    height: 48px;
    width: 173px;
    position: absolute;
    top: 630px;
    right: 102px;
    background: url(../images/btn4.png) center center no-repeat;
    z-index: 100;
    cursor: pointer
}
.slide-4 .icon{
    height: 10px;
    width: 16px;
    background: url(../images/arraw3.png) center center no-repeat;
    position: absolute;
    top: 50%;
    right: 24px;
    margin-top: -5px;
    animation: toRight 2s  ease infinite;
}
.slide-4 .left{
    padding-top: 333px;
    width: 50%;
}
.slide-4 .right{
    margin-top: 105px;
    width: 50%;
}
.slide-4 .flex{
    display: flex;
}
.slide-4 .textbox h3{
    font-size: 60px;
    font-weight: 500;
    color: #333333;
    line-height: 72px;
    margin-bottom: 20px;
    padding-left: 83px;
    color: #FFFFFF;
}
.slide-4 .textbox{
    position: absolute;
    top: 95px;
}
.slide-4 .textbox .g{
    margin-left: 83px;
    background-color: #ffffff;
}
.slide-4 .textbox p{
    font-size: 20px;
    color: #333333;
    margin-bottom: 70px;
    padding-left: 83px;
    color: #ffffff;
}
.slide-4 .right .imgbox,
.slide-4 .left .imgbox{
    opacity:0;
    transition:all .4s;
    position: relative;
}
.slide-4 .left .imgbox{
    margin-left: auto;
    height: 382px;
    width: 527px;
    text-align: right;
    transform:translateX(-200px);
}
.slide-4 .right .imgbox{
    margin-top: 66px;
    transform:translateX(200px);
    height: 363px;
    width: 505px;
}
.slide-4 .imgbox img,
.slide-4 .imgbox img{
    position: relative;
    z-index: 20;
}
.slide-4 .imgbox .border{
    height: 100%;
    width: 100%;
    box-sizing: border-box;
    position: absolute;
    top: 0;
    left: 0;
    transition: .45s .5s;
}
.slide-4 .left .border{
    border: 4px solid #19964A;
}
.slide-4 .right .border{
    border: 4px solid #85BF27;
}
.swiper-pagination{
    position: static;
    text-align: left;
    padding-left: 45px;
    font-weight: bold;
    color: #000;
    font-size: 0;
}
.swiper-pagination span{
    font-size: 24px;
}
.swiper-pagination-total{
    color: #BEBEC3;
}
.swiper-pagination-total::before{
    content: "/";
    display: inlin-block;
}
.slide-4 .ani-slide .imgbox{
    transform:translateX(0);
    opacity:1;
}
.slide-4 .ani-slide .left .border{
    top: -20px;
    left: -20px;
}
.slide-4 .ani-slide .right .border{
    top: -20px;
    left: 20px;
}

.slide-5 .round{
    height: 249px;
    width: 249px;
    position: absolute;
    top: 108px;
    left: -88px;
    animation: rotate360 20s linear infinite;
}
.slide-5 .left{
    position: absolute;
    top: 226px;
    left: 46px;
}
.slide-5 .left p{
    font-size: 60px;
    font-weight: 500;
    color: #333333;
    line-height: 72px;
}
.slide-5 .text{
    font-size: 16px;
    color: #333333;
    line-height: 22px;
    margin-bottom: 94px;
    margin-top: 30px;
}
.slide-5 .btn{
    height: 48px;
    width: 173px;
    position: relative;
    background: url(../images/btn3.png) center center no-repeat;
    cursor: pointer
}
.slide-5 .icon{
    height: 10px;
    width: 16px;
    background: url(../images/arraw1.png) center center no-repeat;
    position: absolute;
    top: 50%;
    right: 36px;
    margin-top: -5px;
    animation: toRight 2s  ease infinite;
}
.slide-5 .right{
    position: absolute;
    top: 209px;
    right: 30px;
}
.slide-5 .card{
    height: 200px;   
    width: 388px;
    position: relative;
    margin-bottom: 15px;
    color: #FFFFFF;
    font-size: 16px;
    color: #FFFFFF;
    line-height: 22px;
    padding: 34px 0 0 24px;
    box-sizing: border-box;
    overflow: hidden;
}
.slide-5 .card1{
    background: #19964A;
}
.slide-5 .card2 {
    background: #23452C;
}
.slide-5 .card h3{
    font-size: 20px;
    font-weight: bold;
    line-height: 30px;
    margin-bottom: 36px;
}
.slide-5 .cardround{
    position: absolute;
    top: 5px;
    left: 72px;
    height: 517px;
    width: 517px;
    background: url(../images/roundbg4.png) center center no-repeat;
    animation: rotate-360 20s linear infinite;
}
.zindex{
    position: relative;
    z-index: 10;
}
.common1{
    overflow: hidden;
    width: 1100px;
}


.slide-6{
    background: #161816;
}
.slide-6 .img1{
    height: 511px;
    width: 417px;
    position: absolute;
    top: 50%;
    left: 9px;
    transform: translateY(-50%);
}
.slide-6 .img2{
    height: 128px;
    width: 147px;
    position: absolute;
    top: 50%;
    left: 410px;
    transform: translateY(-160%);
}
.slide-6 .img3{
    height: 307px;
    width: 251px;
    position: absolute;
    top: 50%;
    left: 510px;
    transform: translateY(-20%);
}
.slide-6 .img4{
    position: absolute;
    top: 50%;
    left: 268px;
    height: 82px;
    width: 497px;
    padding: 28px 24px 20px 20px;
    box-sizing: border-box;
    background: url(../images/slide-5-4.png) center center no-repeat;
    font-size: 14px;
    color: #CCCCCC;
    line-height: 20px;
    transform: translateY(310%);
}
.slide-6 .right{
    position: absolute;
    top: 50%;
    right: 0;
    width: 296px;
    color: #FFF;
    transform: translateY(-46%);
}
.slide-6 .g{
    background: #FFFFFF;
}
.slide-6 h3{
    font-size: 58px;
    font-weight: 500;
    margin-bottom: 30px;
}
.slide-6 p{
    font-size: 20px;
    margin-bottom: 116px;
}
.slide-6 h4{
    font-size: 16px;
    font-weight: bold;
    color: #E6E6E6;
    margin-bottom: 32px;
    position: relative;
}
.slide-6 h4 div{
    position: absolute;
    top: 50%;
    left: -30px;
    height: 1px;
    width: 26px;
    background: #FFFFFF;
}
.slide-6 .text {
    position: relative;
}
.slide-6 .text span{
    font-size: 10px;
    position: absolute;
    top: -2px;
    left: 34px;
}


.slide-7 .round1{
    height: 575px;
    width: 575px;
    position: absolute;
    top: 132px;
    left: 3px;
    animation: rotate360 20s linear infinite;
}
.slide-7 .round2{
    height: 234px;
    width: 234px;
    position: absolute;
    bottom: 68px;
    right: 38px;
    animation: rotate-360 20s linear infinite;
}
.slide-7 .round3{
    height: 873px;
    width: 873px;
    position: absolute;
    top: -420px;
    right: -390px;
    animation: rotate-360 20s linear infinite;
}
.slide-7 .join{
    position: absolute;
    top: 267px;
    left: 14px;
}
.slide-7 .joinline{
    height: 56px;
    width: 218px;
    position: absolute;
    top: 421px;
    left: 105px;
}
.slide-7 .text{
    font-size: 60px;
    font-weight: 500;
    color: #333333;
    position: absolute;
    bottom: 199px;
    right: 88px;
}
.slide-7 .join img{
    animation: scale2 5s  ease infinite;
}
.slide-7 .joinline img{
    animation: scale2 5s  ease infinite;
}
.footer{
    position: absolute;
    bottom: 0;
    left: 0;
}

@keyframes toRight{
    0%{
        transform: translateX(0);
    }
    50%{
        transform: translateX(10px)
    }
    100%{
        transform: translateX(0);
    }
}
@keyframes scale2{
    0%{
        transform: scale(1);
    }
    50%{
        transform: scale(1.1);
    }
    100%{
        transform: scale(1);
    }
}
@keyframes roundScale{
    0%{
        transform: scale(1);
    }
    100%{
        transform: scale(1.5);
        opacity: 0;
    }
}
@keyframes rotate360{
    0%{
        transform: rotate(0);
    }
    100%{
        transform: rotate(360deg);
    }
}
@keyframes rotate-360{
    0%{
        transform: rotate(0);
    }
    100%{
        transform: rotate(-360deg);
    }
}