#bannerbox .swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet {
    margin: 20px 24px;
}

.banner {
    position: relative;
}

.banner .net {
    position: absolute;
    right: 0;
    top: 0;
    animation: netsc 3s linear infinite alternate;
}

.banner img {
    position: absolute;
}

.banner .line1 {
    top: 0;
    right: 160px;
    z-index: 1;
    opacity: 0.2;
    transition: all 0.4s;
}

.banner .line2 {
    z-index: 1;
    opacity: 0.2;
    top: 175px;
    /* top: -500px; */
    right: 577px;
    transition: all 0.4s;
    /* animation: downpic 3s linear 1 normal;
    animation-fill-mode: forwards; */
}

.banner .line3 {
    z-index: 1;
    opacity: 0.2;
    top: 320px;
    right: 780px;
    transition: all 0.4s;
}

.banner .linee {
    animation: light 3.5s linear infinite alternate;
    z-index: 2;
}

.banner .logo {
    top: 40px;
    left: 134px;
    animation-name: zoomIn;
    visibility: visible;
}

.banner .title1 {
    top: 200px;
    left: 200px;
    animation: waters 8s linear infinite normal;
}

.banner .title2 {
    top: 460px;
    left: 200px;
    animation-name: zoomInLeft;
    visibility: visible;
}

.banner .title3 {
    left: 200px;
    top: 720px;
    animation-name: zoomInRight;
    visibility: visible;
}

.banner .linebox {
    width: 1015px;
    height: 866px;
    position: relative;
    float: right;
    overflow: hidden;
    margin: -890px 0 0 0;
    animation: lienbox 5s linear 1 normal;
    animation-fill-mode: forwards;
}

@keyframes downpic {
    from {
        top: -500px;
    }
    to {
        top: 175px;
    }
}

@keyframes light {
    0% {
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

@keyframes netsc {
    from {
        transform: scale(1);
    }
    to {
        transform: scale(1.2);
    }
}

@keyframes waters {
    0% {
        transform: scale(0.01);
        opacity: 0.1;
    }
    25% {
        transform: scale(0.5);
        opacity: 0.5;
    }
    75% {
        transform: scale(1);
        opacity: 1;
    }
    100% {
        transform: scale(3.8);
        opacity: 0.1;
    }
}

@keyframes lienbox {
    0% {
        margin: -870px 0 0 0;
    }
    25% {
        margin: -450px 0 0 0;
    }
    75% {
        margin: -20px 0 0 0;
    }
    100% {
        margin: 0 0 0 0;
    }
}


/* banner2效果和动画 */

.banner2 .ab {
    position: absolute;
}

.banner2 {
    position: relative;
    height: 940px;
    overflow: hidden;
}

.banner2 .logo {
    top: 40px;
    left: 30px;
    animation-name: zoomIn;
    visibility: visible;
}

.banner2 .cao1-1 {
    bottom: 2.35rem;
    left: 0;
    z-index: 6;
    width: 0.35rem;
    animation: downup1-1 1s ease-in infinite alternate;
}

.banner2 .cao1-2 {
    bottom: -1.12rem;
    left: 0.5rem;
    width: 2.09rem;
    animation: downup1-2 1.8s ease-in-out infinite alternate;
}

.banner2 .cao1-3 {
    bottom: 0;
    left: 0.5rem;
    z-index: 2;
    width: 3.83rem;
    animation: downup1-3 2.4s ease-in-out infinite alternate;
}

.banner2 .cao1-4 {
    bottom: 0;
    left: 2.74rem;
    z-index: 1;
    width: 2.92rem;
    animation: downup1-4 1.6s ease-in-out infinite alternate;
}

.banner2 .cao1-5 {
    bottom: 0.6rem;
    left: 3.7rem;
    z-index: 6;
    width: 3.09rem;
    animation: downup1-5 2.81s ease-in-out infinite alternate;
}

.banner2 .cao1-6 {
    left: 6.0rem;
    z-index: 6;
    bottom: 0.1rem;
    width: 3.55rem;
    animation: downup1-6 2.41s ease-in-out infinite alternate;
}

.banner2 .cao1-7 {
    width: 0.91rem;
    left: 8rem;
    bottom: 0;
    animation: downup1-7 1.61s ease-in-out infinite alternate;
}

.banner2 .cao1-8 {
    width: 0.68rem;
    left: 9.3rem;
    bottom: 0;
    animation: downup1-8 2.2s ease-in-out infinite alternate;
}

.banner2 .cao1-9 {
    width: 0.93rem;
    left: 6.8rem;
    bottom: 0.5rem;
    animation: downup1-9 2.8s ease-in-out infinite alternate;
}

.banner2 .cao1-10 {
    width: 1.43rem;
    left: 7rem;
    bottom: 1.3rem;
    animation: downup1-10 2.2s ease-in-out infinite alternate;
}

.banner2 .cao1-11 {
    width: 2.14rem;
    left: 6.47rem;
    z-index: 5;
    top: 1.25rem;
    animation: downup1-11 2.6s ease-in-out infinite alternate;
}

@keyframes downup1-1 {
    from {
        bottom: 2.15rem;
    }
    to {
        bottom: 2.35rem;
    }
}

@keyframes downup1-2 {
    from {
        bottom: -1.12rem;
    }
    to {
        bottom: -1.4rem;
    }
}

@keyframes downup1-3 {
    from {
        bottom: 0;
    }
    to {
        bottom: -0.24rem;
    }
}

@keyframes downup1-4 {
    from {
        bottom: 0;
    }
    to {
        bottom: -0.18rem;
    }
}

@keyframes downup1-5 {
    from {
        bottom: 0.6;
    }
    to {
        bottom: 0.88rem;
    }
}

@keyframes downup1-6 {
    from {
        bottom: 0.1rem;
    }
    to {
        bottom: 0.4rem;
    }
}

@keyframes downup1-7 {
    from {
        bottom: 0rem;
    }
    to {
        bottom: -0.28rem;
    }
}

@keyframes downup1-8 {
    from {
        bottom: 0rem;
    }
    to {
        bottom: -0.48rem;
    }
}

@keyframes downup1-9 {
    from {
        bottom: 0.5rem;
    }
    to {
        bottom: 0.28rem;
    }
}

@keyframes downup1-10 {
    from {
        bottom: 1.3rem;
    }
    to {
        bottom: 1.6rem;
    }
}

@keyframes downup1-11 {
    from {
        top: 1.25rem;
    }
    to {
        top: 1.0rem;
    }
}

.banner2 .line1 {
    top: -343px;
    /* left: 189px; */
    left: 0;
    animation: downup6 3s linear infinite alternate;
}

.banner2 .line2 {
    top: 185px;
    /* left: 380px; */
    left: 190px;
    animation: downup5 3s linear infinite alternate;
}

.banner2 .earth {
    left: 0%;
    bottom: 0;
    animation: downup7 9s ease-out infinite alternate;
}

.banner2 .man {
    left: 413px;
    bottom: -192px;
    z-index: 5;
    transition: all 0.4s;
}

.banner2 .title1 {
    left: 54%;
    top: 16%;
    animation-name: zoomInDown;
    visibility: visible;
    animation: waters 8s linear infinite normal;
}

.banner2 .title2 {
    left: 63%;
    top: 41%;
    animation-name: zoomInUp;
    visibility: visible;
}

.banner2 .title3 {
    left: 63%;
    top: 60%;
    animation-name: zoomInUp;
    visibility: visible;
}

.banner2 .title4 {
    right: 5%;
    bottom: 0;
    animation-name: zoomInUp;
    visibility: visible;
}

.banner2 .manbox {
    width: 1000px;
    height: 540px;
    position: absolute;
    bottom: 0;
    animation: manup 3.5s linear 1 normal;
    animation-fill-mode: forwards;
}

.banner2 .manbox .wrap {
    position: relative;
    width: 100%;
    height: 100%;
}

.banner2 .lightbox {
    width: 769px;
    height: 760px;
    position: absolute;
    top: -800px;
    left: 8%;
    animation: lightdw 3.5s linear 1 normal;
    animation-fill-mode: forwards;
}

@keyframes downup3 {
    from {
        bottom: 0;
    }
    to {
        bottom: -10px;
    }
}

@keyframes downup4 {
    from {
        bottom: -192px;
    }
    to {
        bottom: -202px;
    }
}

@keyframes downup5 {
    from {
        opacity: 1;
    }
    to {
        opacity: 0.3;
    }
}


/* @keyframes downup6 {
    from {
        width: 820px;
    }
    to {
        width: 720px;
    }
} */

@keyframes downup7 {
    from {
        transform: scale(1);
    }
    to {
        transform: scale(1.1);
    }
}

@keyframes manup {
    from {
        bottom: -500px;
    }
    to {
        bottom: 0;
    }
}

@keyframes lightdw {
    form {
        top: -500px;
    }
    to {
        top: 0;
    }
}


/* banner3样式和效果 */

.banner3 .ab {
    position: absolute;
    z-index: -1;
}

.banner3 {
    position: relative;
    min-width: 1280px;
    height: 940px;
    overflow: hidden;
}

.banner3 img {
    position: absolute;
}

.banner3 .logo {
    top: 40px;
    left: 30px;
    animation-name: zoomIn;
    visibility: visible;
}

.banner3 .floor {
    width: 1776px;
    height: 281px;
    right: 120px;
    bottom: 0;
}

.banner3 .line1 {
    width: 1027px;
    height: 660px;
    right: 129px;
    bottom: 239px;
    animation: line 9s linear infinite alternate;
}

.banner3 .door {
    right: 120px;
    bottom: 256px;
}

.banner3 .pic1 {
    right: 227px;
    bottom: 64px;
    animation: picmove1 1.2s linear infinite alternate;
}

.banner3 .pic2 {
    right: 400px;
    bottom: 390px;
    animation: picmove2 4s linear infinite alternate;
}

.banner3 .pic3 {
    right: 590px;
    bottom: 590px;
    animation: picmove3 1.6s linear infinite alternate;
}

.banner3 .pic4 {
    right: 740px;
    bottom: 490px;
    animation: picmove4 1.6s linear infinite alternate;
}

.banner3 .pic5 {
    right: 817px;
    bottom: 117px;
    z-index: 3;
    animation: picmove5 2.6s linear infinite alternate;
}

.banner3 .pic6 {
    right: 1050px;
    bottom: 320px;
    animation: picmove6 1.6s linear infinite alternate;
}

.banner3 .woman {
    right: 370px;
    bottom: 124px;
    z-index: 2;
}

.banner3 .shadowicon {
    right: 521px;
    bottom: 36px;
    z-index: 1;
}

.banner3 .title1 {
    left: 7%;
    top: 18%;
    animation-name: zoomInDown;
    visibility: visible;
    animation: waters 8s linear infinite normal;
}

.banner3 .title2 {
    left: 7%;
    top: 43%;
    animation-name: zoomInLeft;
    visibility: visible;
}

.banner3 .title3 {
    left: 7%;
    top: 60%;
    animation-name: zoomInRight;
    visibility: visible;
}

.banner3 .title4 {
    right: 4%;
    bottom: 0;
    animation-name: fadeInUpBig;
    visibility: visible;
}

.banner3 .picbox {
    width: 920px;
    height: 630px;
    position: absolute;
    right: 3%;
    bottom: 0;
    animation: picboxdown 1.2s linear 1 normal;
    animation-fill-mode: forwards;
}

@keyframes line {
    from {
        width: 1027px;
        opacity: 1;
    }
    to {
        width: 728px;
        opacity: 0.1;
    }
}

@keyframes picmove1 {
    from {
        bottom: 50px;
    }
    to {
        bottom: 64px;
    }
}

@keyframes picmove2 {
    from {
        bottom: 375px;
    }
    to {
        bottom: 390px;
    }
}

@keyframes picmove3 {
    from {
        bottom: 150%;
    }
    to {
        bottom: 159%;
    }
}

@keyframes picmove4 {
    from {
        bottom: 470px;
    }
    to {
        bottom: 490px;
    }
}

@keyframes picmove5 {
    from {
        bottom: 5%;
    }
    to {
        bottom: 11%;
    }
}

@keyframes scax {
    from {
        transform: scaleX(0);
    }
    to {
        transform: scaleX(41deg);
    }
}

@keyframes picmove6 {
    from {
        transform: rotate3d(0, 1, 0, 0deg);
    }
    to {
        transform: rotate3d(0, 1, 0, 180deg);
    }
}

@keyframes picboxdown {
    from {
        top: -500px;
    }
    to {
        top: 315px;
    }
}


/* banner4样式和效果 */

.banner4 .ab {
    position: absolute;
    z-index: -1;
}

.banner4 {
    position: relative;
    min-width: 1280px;
    height: 940px;
    overflow: hidden;
}

.banner4 img {
    position: absolute;
}

.banner4 .net {
    top: 0;
    left: 0px;
    animation: netsc 5s linear infinite alternate;
}

.banner4 .logo {
    top: 40px;
    left: 30px;
    animation-name: zoomIn;
    visibility: visible;
}

.banner4 .line1 {
    /* left: 227px; */
    left: 0;
    top: 138px;
    width: 614px;
    height: 751px;
    animation: line1 5s linear infinite alternate;
}

.banner4 .line2 {
    top: 100px;
    /* left: 230px; */
    left: 2px;
}

.banner4 .line3 {
    /* left: 420px; */
    left: 168px;
    top: 156px;
    width: 274px;
    height: 661px;
    animation: line1 5s linear infinite alternate;
}

.banner4 .man {
    /* left: 294px; */
    left: 294px;
    top: 236px;
}

.banner4 .icon1 {
    /* left: 283px; */
    left: 283px;
    top: 264px;
    animation: iconmove 2s linear infinite alternate;
}

.banner4 .icon2 {
    /* left: 264px; */
    left: 264px;
    top: 394px;
    animation: iconmove2 1.5s linear infinite alternate-reverse;
}

.banner4 .icon3 {
    /* left: 295px; */
    left: 295px;
    top: 508px;
    animation: iconmove3 3s linear infinite alternate-reverse;
}

.banner4 .icon4 {
    /* left: 253px; */
    left: 253px;
    top: 582px;
    animation: iconmove4 2.5s linear infinite alternate;
}

.banner4 .icon5 {
    /* left: 740px; */
    left: 740px;
    top: 286px;
    animation: iconmove5 2.1s linear infinite alternate-reverse;
}

.banner4 .icon6 {
    /* left: 768px; */
    left: 768px;
    top: 390px;
    animation: iconmove6 2s linear infinite alternate;
}

.banner4 .icon7 {
    /* left: 751px; */
    left: 751px;
    top: 496px;
    animation: iconmove7 2.5s linear infinite alternate-reverse;
}

.banner4 .icon8 {
    /* left: 843px; */
    left: 843px;
    top: 467px;
    animation: iconmove8 2s linear infinite alternate-reverse;
}

.banner4 .icon9 {
    /* left: 713px; */
    left: 713px;
    top: 705px;
    animation: iconmove9 2s ease-in-out infinite alternate;
}

.banner4 .title1 {
    right: 16%;
    top: 13%;
    animation-name: zoomInLeft;
    visibility: visible;
    animation: waters 8s linear infinite normal;
}

.banner4 .title2 {
    right: 20%;
    top: 40%;
    animation-name: zoomInDown;
    visibility: visible;
}

.banner4 .title3 {
    right: 24%;
    top: 58%;
    animation-name: zoomInRight;
    visibility: visible;
}

.banner4 .title4 {
    right: 5%;
    bottom: 0;
    animation-name: bounceInUp;
    visibility: visible;
}

.banner4 .linebox {
    width: 621px;
    height: 840px;
    top: 0;
    position: absolute;
    left: 255px;
    animation: linedown 5s linear 1 normal;
    animation-fill-mode: forwards;
}

.banner4 .amanbox {
    width: 640px;
    height: 600px;
    position: absolute;
    bottom: 350px;
    left: 0;
    animation: manup 5s linear 1 normal;
    animation-fill-mode: forwards;
}

@keyframes line1 {
    from {
        height: 751px;
        opacity: 1;
    }
    to {
        height: 351px;
        opacity: 0.1;
    }
}

@keyframes line2 {
    from {
        height: 661px;
        opacity: 1;
    }
    to {
        height: 361px;
        opacity: 0.1;
    }
}

@keyframes iconmove {
    from {
        top: 264px;
    }
    to {
        top: 284px;
    }
}

@keyframes iconmove2 {
    from {
        transform: rotate3d(0, 1, 0, 0deg);
        top: 394px;
    }
    to {
        transform: rotate3d(0, 1, 0, 90deg);
        top: 420px;
    }
}

@keyframes iconmove3 {
    from {
        top: 508px;
    }
    to {
        top: 528px;
    }
}

@keyframes iconmove4 {
    from {
        /* transform: rotate3d(0, 1, 0, 0deg); */
        top: 582px;
    }
    to {
        transform: rotate3d(0, 1, 0, 60deg);
        top: 602px;
    }
}

@keyframes iconmove5 {
    from {
        top: 286px;
    }
    to {
        top: 306px;
    }
}

@keyframes iconmove6 {
    from {
        transform: rotate3d(0, 1, 0, 0deg);
        top: 390px;
    }
    to {
        transform: rotate3d(0, 1, 0, 90deg);
        top: 420px;
    }
}

@keyframes iconmove7 {
    from {
        top: 496px;
    }
    to {
        top: 476px;
    }
}

@keyframes iconmove8 {
    from {
        top: 467px;
    }
    to {
        top: 487px;
    }
}

@keyframes iconmove9 {
    from {
        top: 705px;
    }
    to {
        top: 755px;
    }
}

@keyframes netsc {
    from {
        transform: scale(1);
    }
    to {
        transform: scale(0.95);
    }
}

@keyframes linedown {
    from {
        top: -1000px;
    }
    to {
        top: 0;
    }
}

@keyframes manup {
    from {
        bottom: -500px;
    }
    fo {
        bottom: 350px;
    }
}