html, body {
        height: 100%;
        overflow: hidden;
        margin: 0px;
        padding: 0px;
    }

    html {
        min-width: 1200px;
    }

    .home-top-banner {
        height: 164px;;
        background-image: url("/statics/images/new_images/home_v3/hometopbanner.png");
        width: 100%;
        background-position: center center;
        background-repeat: no-repeat;
        position: fixed;
        z-index: 99;
        background-position: 0 0;
    }

    .hasTopBanner {
        top: 164px !important;
    }

    .hasTopBanner .bg {
        opacity: .3 !important;
    }

    .section {
        width: 100%;
        height: 100vh;
        position: relative;
        overflow: hidden;
    }

    .section .video {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        z-index: 1;
    }

    .data-env-block {
        position: relative;
        perspective: 900;
        -webkit-perspective: 900;
    }

    .data-env-block .item-view {
        text-align: center;
        position: absolute;
        top: 0;
        left: 50%;
        z-index: 2;
        /* animation: moveitem 1s linear 0 infinite alternate both;
        -webkit-animation: moveitem 1s linear 0 infinite alternate both; */
        -webkit-animation-duration: 3s;
        animation-duration: 3s;
        -webkit-animation-fill-mode: both;
        animation-fill-mode: both;
        animation-iteration-count: infinite;
        -webkit-animation-iteration-count: infinite;
    }

    .data-env-block .item-view2 {
        text-align: center;
        position: absolute;
        top: 0;
        z-index: 2;
        margin-left: 352px;
        /* animation: moveitem 1s linear 0 infinite alternate both;
        -webkit-animation: moveitem 1s linear 0 infinite alternate both; */
        -webkit-animation-duration: 3s;
        animation-duration: 3s;
        -webkit-animation-fill-mode: both;
        animation-fill-mode: both;
        animation-iteration-count: infinite;
        -webkit-animation-iteration-count: infinite;
    }

    .data-env-block .item-view3 {
        text-align: center;
        position: absolute;
        top: 0;
        z-index: 2;
        margin-left: 182px;
        /* animation: moveitem 1s linear 0 infinite alternate both;
        -webkit-animation: moveitem 1s linear 0 infinite alternate both; */
        -webkit-animation-duration: 3s;
        animation-duration: 3s;
        -webkit-animation-fill-mode: both;
        animation-fill-mode: both;
        animation-iteration-count: infinite;
        -webkit-animation-iteration-count: infinite;
    }

    .data-env-block .item1 {
        top: 124px;
        margin-left: -952px;
        animation-name: moveitem1;
        -webkit-animation-name: moveitem1;
        /* -webkit-animation-duration: 3s;
        animation-duration: 3s; */
    }

    .data-env-block .item2 {
        top: 141px;
        margin-left: -250px;
        animation-name: moveitem2;
        -webkit-animation-name: moveitem2;
        /* -webkit-animation-duration: 3.2s;
        animation-duration: 3.2s; */
    }

    .data-env-block .item3 {
        top: 108px;
        margin-left: 123px;
        animation-name: moveitem3;
        -webkit-animation-name: moveitem3;
        /* -webkit-animation-duration: 2.8s;
        animation-duration: 2.8s; */
    }

    .data-env-block .item4 {
        top: 138px;
        margin-left: 493px;
        animation-name: moveitem4;
        -webkit-animation-name: moveitem4;
        /* -webkit-animation-duration: 2.6s;
        animation-duration: 2.6s; */
    }

    .data-env-block .item-view .item-title {
        height: 24px;
        line-height: 24px;
        font-size: 24px;
        margin-top: 6px;

    }

    .data-env-block .item-view .item-number {
        margin-top: 6px;
    }

    .data-env-block .item-view .item-number .number-text {
        font-size: 54px;
        line-height: 65px;
    }

    .data-env-block .item-view .item-number .unit-text {

    }

    .css3-color {
        color: #E2DDD2;
        background: -webkit-linear-gradient(top, #EEE1C7 0%, #A08C64 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background: -moz-linear-gradient(top, #EEE1C7 0%, #A08C64 100%);
        background-clip: text;
        -moz-text-fill-color: transparent;
        background: -o-linear-gradient(top, #EEE1C7 0%, #A08C64 100%);
        -o-background-clip: text;
        -o-text-fill-color: transparent;
        background: -ms-linear-gradient(top, #EEE1C7 0%, #A08C64 100%);
        -ms-background-clip: text;
        -ms-text-fill-color: transparent;
    }

    @keyframes moveitem1 {
        from {
            top: 308px;
        }
        50% {
            top: 408px;
        }
        to {
            top: 308px;
        }

    }

    @-weblit-keyframes moveitem1 {
        from {
            top: 308px;
        }

    50% {
        top: 408px;
    }
        to {
            top: 308px;
        }
    }

    @keyframes moveitem2 {
        from {
            top: 288px;
        }
        50% {
            top: 248px;
        }
        to {
            top: 288px;
        }

    }

    @-weblit-keyframes moveitem2 {
        from {
            top: 288px;
        }

    50% {
        top: 248px;
    }
        to {
            top: 288px;
        }
    }

    @keyframes moveitem3 {
        from {
            top: 338px;
        }
        50% {
            top: 268px;
        }
        to {
            top: 338px;
        }

    }

    @-weblit-keyframes moveitem3 {
        from {
            top: 338px;
        }

    50% {
        top: 268px;
    }
        to {
            top: 338px;
        }
    }

    @keyframes moveitem4 {
        from {
            top: 298px;
        }
        50% {
            top: 368px;
        }
        to {
            top: 298px;
        }

    }

    @-weblit-keyframes moveitem4 {
        from {
            top: 298px;
        }

    50% {
        top: 368px;
    }
        to {
            top: 298px;
        }
    }


    @keyframes movearrow {
        from {
            bottom: 30px;
        }
        50% {
            bottom: 15px;
        }
        to {
            bottom: 30px;
        }

    }

    @-weblit-keyframes movearrow {
        from {
            bottom: 30px;
        }

    50% {
        bottom: 15px;
    }
        to {
            bottom: 30px;
        }
    }

    #fp-nav ul li a span, .fp-slidesNav ul li a span {
        height: 16px !important;
        width: 16px !important;
        margin: -8px 0 0 -8px !important;
        border-radius: 100% !important;
        opacity: .6;
    }

    .fp-slidesNav ul li a:hover span {
        background: #4168e4;
    }

    .fp-slidesNav ul li a.active span {
        background: #4168e4;
    }

    .toggle-video-voice {
        position: absolute;
        bottom: 122px;
        right: 24px;
        height: 90px;
        width: 90px;
        color: #fff;
        z-index: 99999;
        background-repeat: no-repeat;
        background-position: center center;
        background-image: url('/statics/images/new_images/home_v3/home_open_voice.png');
    }

    .voice-is-open {
        background-image: url('/statics/images/new_images/home_v3/home_close_voice.png');
    }


    /*登录样式*/
    .main {
        position: fixed;
        text-align: center;
        top: 280px;
        left: 60%;
        width: 400px;
        height: auto;
        /* display: flex; */
        justify-content: center;
    }

    .main2 {
        position: fixed;
        text-align: center;
        top: 35%;
        /*top:280px;  */

        /* justify-content: center; */
    }

    .login {
        width: 320px;
        height: 420px;

        animation: dynamics 6s ease infinite;
        -webkit-animation: dynamics 6s ease infinite;
        -moz-animation: dynamics 6s ease infinite;
        opacity: 0.9;
        border: solid 1px #13a1fc;
        background-color: #ffffff;
        /* background-size:1400% 300%; */
        border-radius: 25px;


    }

    .log-con {
        /* background: linear-gradient(#13a1fc, #13a1fc) left top, linear-gradient(#13a1fc, #13a1fc) left top,
        linear-gradient(#13a1fc, #13a1fc) right top, linear-gradient(#13a1fc, #13a1fc) right top,
        linear-gradient(#13a1fc, #13a1fc) left bottom, linear-gradient(#13a1fc, #13a1fc) left bottom,
        linear-gradient(#13a1fc, #13a1fc) right bottom, linear-gradient(#13a1fc, #13a1fc) right bottom; */
        border-radius: 25px;
        background-repeat: no-repeat;
        background-size: 3px 20px, 20px 3px;
        height: 100%;
        margin: -2px;
        padding: 3px 1px 1px 0;
        border-radius: 3px;
    }

    .log-con > span {
        font-size: 30px;
        font-weight: bold;
        line-height: 24px;
        letter-spacing: 2px;
        display: block;
        margin: 20px 0 44px 0;
    }

    .log-con > span::after {
        display: block;
        content: '';
        width: 57px;
        height: 3px;
        background: #ffffff;
        margin-top: 16px;
        justify-content: center;
        position: relative;
        left: 206px;
    }

    .log-con > input {
        display: block;
        margin: 10px 0 32px 70px;
        width: 330px;
        height: 42px;
        background-color: #ffffff;
        border-radius: 4px;
        opacity: 0.9;
        border: 0;
        font-size: 16px;
        outline: none;
        padding-left: 10px;
        color: #000000;
    }

    .log-con > a {
        width: 340px;
        height: 44px;
        background-color: #0090ff;
        border-radius: 4px;
        display: block;
        margin: 10px 0 0 70px;
        text-align: center;
        line-height: 44px;
        cursor: pointer;
        opacity: 1;
    }

    input::-webkit-input-placeholder {
        color: #000000;
        font-size: 16px;
    }

    .log-con > .code {
        width: 216px;
        display: inline-block;
        margin-left: 6px;
    }

    .log-con > #code {
        width: 94px;
        display: inline-block;
        margin-left: 14px;
        cursor: pointer;
    }

    /*logo*/
    .logo {
        width: 168px;
        height: 75px;
        position: fixed;
        left: 150px;
        top: 26px;
    }

    .logo > img {
        max-width: 100%;
        max-height: 100%;
    }

    /*版权样式*/
    .copyright {
        position: absolute;
        bottom: 10px;
        font-size: 16px;
        width: 100%;
        text-align: center;

    }

    .clearfix:before,
    .clearfix:after {
        display: table;
        content: "";
    }

    .clearfix:after {
        clear: both
    }

    .el-input__inner {
        /* background-color: #E7E7E3;

         */
    }

    .box-card {
        opacity: 0.9;
    }

    @media screen and (min-width: 320px) and (max-width: 1400px) {
        .data-env-block .item-view3 {
            text-align: center;
            position: absolute;
            top: 0;
            z-index: 2;
            margin-left: 100px;
            /* animation: moveitem 1s linear 0 infinite alternate both;
            -webkit-animation: moveitem 1s linear 0 infinite alternate both; */
            -webkit-animation-duration: 3s;
            animation-duration: 3s;
            -webkit-animation-fill-mode: both;
            animation-fill-mode: both;
            animation-iteration-count: infinite;
            -webkit-animation-iteration-count: infinite;
        }
    }