html,body,#wrapper{
    width: 100%;
    height: 100%;
    overflow: hidden;
}
body{
    font-family: "Microsoft YaHei";
    /*background-image: url(images/navBg2.png);*/
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
header{
    height: 40px;
    padding: 10px 0 25px 0;
    text-align: center;
    color:  #fff;
    font-size: 28px;
    /*background-image:url(images/navHeadBg.png) ;*/
    /*background-position: center;*/
    /*background-size: 100% 100%;*/
    font-weight: 600;
    letter-spacing: 2px;
}
header span{
    color: #ffffff;
    background-image: -webkit-linear-gradient(top,#effbff 30%,#66b3ff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-transform: uppercase;
}
a{text-decoration: none !important;}
.borderBg{
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    /*width: 1920px;*/
    /*height: 1080px;*/
}
.borderA{
    position: absolute;
    left: 0;
    top: 494px;
}
.borderB{
    position: absolute;
    left: 0;
    top: 525px;
}
.borderC{
    position: absolute;
    left: 0;
    top: 551px;
}
.borderD{
    position: absolute;
    right: 0;
    top: 535px;
}
.borderE{
    position: absolute;
    right: -42px;
    top: 525px;
}
.borderF{
    position: absolute;
    right: -42px;
    top: 503px;
}
.borderG{
    position: absolute;
    left: 0;
    bottom: 170px;
    width: 100%;
}
.borderH{
    position: absolute;
    left: 0;
    bottom: 230px;
    width: 100%;
}
.borderI{
    position: absolute;
    left: 0;
    bottom: 290px;
    width: 100%;
}
.borderJ{
    position: absolute;
    left: 0;
    bottom: 350px;
    width: 100%;
}
.border-yd img{
    position: absolute;
    left: 0;
    top: 0;
    display: block;
    offset-distance: 0%;
}
.border-ydA{
    position: absolute;
    right: 70%;
    top: 50%;
}
.border-ydA img{
    offset-path: path('M0.500,258.500 L469.500,119.500 L756.500,34.500 L871.500,0.500');
    animation: yd 3s linear infinite;
}
@keyframes yd {
    from{
        opacity: 0;
    }
    10%,80%{
        opacity: 1;
    }
    to{
        offset-distance: 100%;
        opacity: 0;
    }
}
.border-ydB{
    position: absolute;
    right: 70%;
    top: 50%;
}
.border-ydB img{
    offset-path: path('M0.500,547.500 L457.500,275.500 L919.500,0.500');
    animation: yd 3s linear infinite;
}
.border-ydC{
    position: absolute;
    right: 70%;
    top: 50%;
}
.border-ydC img{
    offset-path: path('M0.500,539.500 L245.500,251.500 L405.500,61.500 L455.500,0.500');
    animation: yd 3s linear infinite;
}
.border-ydD{
    position: absolute;
    left: 30%;
    top: 50%;
}
.border-ydD img{
    offset-path: path('M0.500,539.500 L0.500,157.500 L0.500,0.500');
    animation: yd 3s linear infinite;
}
.border-ydE{
    position: absolute;
    left: 30%;
    top: 50%;
}
.border-ydE img{
    offset-path: path('M462.500,541.156 L230.500,269.156 L56.500,66.156 L0.500,1.156');
    animation: yd 3s linear infinite;
}
.border-ydF{
    position: absolute;
    left: 30%;
    top: 50%;
}
.border-ydF img{
    offset-path: path('M932.500,546.375 L613.500,359.375 L324.500,189.375 L57.500,34.375 L0.500,1.375 ');
    animation: yd 3s linear infinite;
}
.border-ydG{
    position: absolute;
    left: 30%;
    top: 50%;
}
.border-ydG img{
    offset-path: path('M1450.500,474.134 L598.500,196.437 L257.500,86.437 L114.500,40.437 L0.500,1.437 ');
    animation: yd 3s linear infinite;
}
.navtop {
    position: absolute;
    left: 26%;
    top: 42%;
    /*z-index: 1000;*/
    /*width: 120px;*/
    /*height: 120px;*/
    text-align: center;
    perspective: 400px;

}
.navtop-box div{
    width: 180px;
    height: 180px;
    position: absolute;
    top: 0px;
    left: 0px;
    opacity: 0.8;
    /* 	border:1px solid #08b8e7; */
    transform-origin: center center -90px;
}

.navtop-box{
    font: 35px/180px "微软雅黑";
    color: white;
    position: relative;
    transform-style:preserve-3d;
    animation: zizhuang 5s infinite linear running;
    transform-origin: center 100px -100px;
}
.navtop-box:hover{
    animation-play-state:paused;
    -webkit-animation-play-state:paused; /* Safari 和 Chrome */
}
@-ms-keyframes zizhuang {
    0%{
        transform: rotateY(0deg);
    }
    100%{
        transform: rotateY(-360deg);
    }
}
@-moz-keyframes zizhuang {
    0%{
        transform: rotateY(0deg);
    }
    100%{
        transform: rotateY(-360deg);
    }
}
@-webkit-keyframes zizhuang {
    0%{
        transform: rotateY(0deg);
    }
    100%{
        transform: rotateY(-360deg);
    }
}
@-o-keyframes zizhuang {
    0%{
        transform: rotateY(0deg);
    }
    100%{
        transform: rotateY(-360deg);
    }
}
@keyframes zizhuang{
    0%{
        transform: rotateY(0deg);
    }
    100%{
        transform: rotateY(-360deg);
    }

}
.navtop-box div:nth-of-type(5){
    background-image: linear-gradient(#0c5587, #08b8e7);
    transform: rotateX(90deg);
    top: 800px;
    -ms-animation: zxshow 0.5s ease-out 0s forwards;
    -moz-animation: zxshow 0.5s ease-out 0s forwards;
    -webkit-animation: zxshow 0.5s ease-out 0s forwards;
    -o-animation: zxshow 0.5s ease-out 0s forwards;
    animation: zxshow 0.5s ease-out 0s forwards;
}
.navtop-box div:nth-of-type(1){
    background-image: linear-gradient(#0c5587, #08b8e7);
    transform: rotateY(0deg);
    top: 800px;
    -ms-animation: zxshow 0.4s ease-out 0.4s forwards;
    -moz-animation: zxshow 0.4s ease-out 0.4s forwards;
    -webkit-animation: zxshow 0.4s ease-out 0.4s forwards;
    -o-animation: zxshow 0.4s ease-out 0.4s forwards;
    animation: zxshow 0.4s ease-out 0.4s forwards;
}
.navtop-box div:nth-of-type(2){
    background-image: linear-gradient( #08b8e7,#0c5587);
    transform: rotateY(90deg);
    top: 800px;
    -ms-animation: zxshow 0.4s ease-out 0.8s forwards;
    -moz-animation: zxshow 0.4s ease-out 0.8s forwards;
    -webkit-animation: zxshow 0.4s ease-out c forwards;
    -o-animation: zxshow 0.4s ease-out 0.8s forwards;
    animation: zxshow 0.4s ease-out 0.8s forwards;
}
.navtop-box div:nth-of-type(3){
    background-image: linear-gradient(#0c5587, #08b8e7);
    transform: rotateY(180deg);
    top: 800px;
    -ms-animation: zxshow 0.4s ease-out 1.2s forwards;
    -moz-animation: zxshow 0.4s ease-out 1.2s forwards;
    -webkit-animation: zxshow 0.4s ease-out 1.2s forwards;
    -o-animation: zxshow 0.4s ease-out 1.2s forwards;
    animation: zxshow 0.4s ease-out 1.2s forwards;
}
.navtop-box div:nth-of-type(4){
    background-image: linear-gradient( #08b8e7,#0c5587);
    transform: rotateY(270deg);
    top: 800px;
    -ms-animation: zxshow 0.4s ease-out 1.6s forwards;
    -moz-animation: zxshow 0.4s ease-out 1.6s forwards;
    -webkit-animation: zxshow 0.4s ease-out 1.6s forwards;
    -o-animation: zxshow 0.4s ease-out 1.6s forwards;
    animation: zxshow 0.4s ease-out 1.6s forwards;
}

.navtop-box div:nth-of-type(6){
    background-image: linear-gradient( #08b8e7,#0c5587);
    transform: rotateX(270deg);
    top: 800px;
    -ms-animation: zxshow 0.4s ease-out 2s forwards;
    -moz-animation: zxshow 0.4s ease-out 2s forwards;
    -webkit-animation: zxshow 0.4s ease-out 2s forwards;
    -o-animation: zxshow 0.4s ease-out 2s forwards;
    animation: zxshow 0.4s ease-out 2s forwards;
}
@-ms-keyframes zxshow {
    0%{
        opacity: 1;
    }
    100%{
        top: 0;
        opacity: 1;
    }
}
@-moz-keyframes zxshow {
    0%{
        opacity: 1;
    }
    100%{
        top: 0;
        opacity: 1;
    }
}
@-webkit-keyframes zxshow {
    0%{
        opacity: 0;
    }
    100%{
        top: 0;
        opacity: 1;
    }
}
@-o-keyframes zxshow {
    0%{
        opacity: 0;
    }
    100%{
        top: 0;
        opacity: 1;
    }
}
@keyframes zxshow{
    0%{
        opacity: 1;
    }
    100%{
        top: 0;
        opacity: 1;
    }

}
.navbot {
    opacity: 1;
    width: 50%;
    height: 80%;
    margin: 0px;
    left: 5%;
    top: 10%;
    padding-left: 0px;
    position: absolute;
    list-style: none;
    /*z-index: 999;*/
    /*background-image: url(images/navbj2.png);*/
    /*background-size: 80% 80%;*/
    /*background-position: 50% 50%;*/
    /*background-repeat: no-repeat;*/
}
.nav-left{
    position: absolute;
    width: 50%;
    height: 80%;
    left: 5%;
    top: 10%;
    background-image: url(images/navbj1.png);
    background-size: 150% 150%;
    background-position: 50% 50%;
    background-repeat: no-repeat;
}
.nav-right{
    position: absolute;
    width: 40%;
    height: 70%;
    right: 0px;
    top: 15%;
    background-image: url(images/navbj3.png);
    background-size: 100% 80%;
    background-position: 50% 50%;
    background-repeat: no-repeat;
}
.navbot h6 {
    line-height: 46px;
    font-size: 22px;
    color: #ffffff;
    background-image: -webkit-linear-gradient(top,#03c6ff 30%,#1483f4);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-transform: uppercase;
}
.navbot p {
    line-height: 24px;
    font-size: 14px;
    color: #ffffff;
}
.navbot li{
    width: 90px;
    height: 90px;
}
.navbot li:nth-child(1){
    left: 65%;
    top: 10%;
}
.navbot li:nth-child(2) {
    left: 82%;
    top: 40%;
}
.navbot li:nth-child(3) {
    left: 70%;
    top: 72%;
}
.navbot li:nth-child(4) {
    left: 38%;
    top: 80%;
}
.navbot li:nth-child(5) {
    right: 73%;
    top: 65%;
    text-align: right;
}
.navbot li:nth-child(6) {
    right: 80%;
    top: 38%;
    text-align: right;
}
.navbot li:nth-child(7) {
    right: 58%;
    top: 16%;
    text-align: right;
}
.active {animation: show .8s 2.4s forwards;}
.zgbg{
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    width: 1920px;
    height: 1080px;
    background-image: url(images/navbj1.png);
    background-position: center;
    background-size: 1920px 1080px;
    background-repeat: no-repeat;
}
@-ms-keyframes show {
    10%{
        opacity: 1;
    }
    to{
        width: 100%;
        height: 100%;
        margin: 0;
        opacity: 1;
        left: 0;
        top: 0;
    }
}
@-moz-keyframes show {
    10%{
        opacity: 1;
    }
    to{
        width: 100%;
        height: 100%;
        margin: 0;
        opacity: 1;
        left: 0;
        top: 0;
    }
}
@-webkit-keyframes show {
    10%{
        opacity: 1;
    }
    to{
        width: 100%;
        height: 100%;
        margin: 0;
        opacity: 1;
        left: 0;
        top: 0;
    }
}
@-o-keyframes show {
    10%{
        opacity: 1;
    }
    to{
        width: 100%;
        height: 100%;
        margin: 0;
        opacity: 1;
        left: 0;
        top: 0;
    }
}
@keyframes show {
    10%{
        opacity: 1;
    }
    to{
        width: 100%;
        height: 100%;
        margin: 0;
        opacity: 1;
        left: 0;
        top: 0;
    }
}

.navbot li{
    z-index: 1;
    position: absolute;
    text-align: left;
    -ms-animation: clouds 2s 3s ease-in infinite alternate;
    -moz-animation: clouds 2s 3s ease-in infinite alternate;
    -webkit-animation: clouds 2s 3s ease-in infinite alternate;
    -o-animation: clouds 2s 3s ease-in infinite alternate;
    animation: clouds 2s 3s ease-in infinite alternate;
    width: 0;
    height: 0;

}

@-ms-keyframes clouds{
    0%{
        -ms-transform: translateY(0);
    }
    40%{
        opacity: 1;
    }
    60%{
        opacity: 1;
    }
    100%{
        -ms-transform: translateY(-15px);
    }
}
@-moz-keyframes clouds{
    0%{
        -moz-transform: translateY(0);
    }
    40%{
        opacity: 1;
    }
    60%{
        opacity: 1;
    }
    100%{
        -moz-transform: translateY(-15px);
    }
}
@-webkit-keyframes clouds{
    0%{
        -webkit-transform: translateY(0);
    }
    40%{
        opacity: 1;
    }
    60%{
        opacity: 1;
    }
    100%{
        -webkit-transform: translateY(-15px);
    }
}
@-o-keyframes clouds{
    0%{
        -o-transform: translateY(0);
    }
    40%{
        opacity: 1;
    }
    60%{
        opacity: 1;
    }
    100%{
        -o-transform: translateY(-15px);
    }
}
@keyframes clouds{
    0%{
        transform: translateY(0);
    }
    40%{
        opacity: 1;
    }
    60%{
        opacity: 1;
    }
    100%{
        transform: translateY(-15px);
    }
}


.navbot li span{
    display: block;
    width: 90px;
    height: 90px;
    float: left;
    /*background-image: url(../images/qipao.png);*/
    /*background-size: 100%;*/
    /*background-position: center;*/
    /*background-repeat: no-repeat;*/
    position: relative;
    margin-right: 10px;
}

.navbot li:nth-child(5) span,.navbot li:nth-child(6) span,.navbot li:nth-child(7) span{
    float: right;
    margin-left: 10px;
}
.navbot li span:before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    width: 90px;
    height: 90px;
    background-repeat: no-repeat;
    transition: all 1s;
}
/*.navbot li:nth-child(1) span:before {*/
    /*width: 90px;*/
    /*height: 90px;*/
/*}*/
.navbot li:nth-child(1) span:before{
    background-image: url(images/iot-01.png);
    background-size: 100% 100%;
}
.navbot li:nth-child(2) span:before{
    background-image: url(images/iot-02.png);
    background-size: cover;
}
.navbot li:nth-child(3) span:before{
    background-image: url(images/iot-03.png);
    background-size: 100% 100%;
}
.navbot li:nth-child(4) span:before{
    background-image: url(images/iot-04.png);
    background-size: cover;
}
.navbot li:nth-child(5) span:before{
    background-image: url(images/iot-05.png);
    background-size: cover;
}
.navbot li:nth-child(6) span:before{
    background-image: url(images/iot-06.png);
    background-size: 100% 100%;
}
.navbot li:nth-child(7) span:before{
    background-image: url(images/iot-07.png);
    background-size: 100% 100%;
}
.navbot li:hover h6{
    text-decoration: none;
}
.navbot li span:hover::before{
    transform: rotate(360deg);
}
footer{
    width: 100%;
    text-align: center;
    position: absolute;
    bottom: 3.1%;
    color: rgba(236,254,255,.3);
}
/*@media screen and (max-width: 1440px) {*/
    /*.borderBg {*/
        /*transform: scale(.77) translate(-16.3%,0);*/
        /*background-size: cover;*/
    /*}*/
/*}*/

.diqiu{
    width: 150px;
    height: 150px;
    /*-ms-animation: xuanzhuan 18s infinite linear running;*/
    /*-moz-animation: xuanzhuan 18s infinite linear running;*/
    /*-webkit-animation: xuanzhuan 18s infinite linear running;*/
    /*-o-animation: xuanzhuan 18s infinite linear running;*/
    /*animation: xuanzhuan 18s infinite linear running;*/
}
@-ms-keyframes xuanzhuan{
    0%{
        -ms-transform: rotate(0deg);
    }
    40%{
        opacity: 1;
    }
    60%{
        opacity: 1;
    }
    100%{
        -ms-transform:rotate(360deg);
    }
}
@-moz-keyframes xuanzhuan{
    0%{
        -moz-transform: rotate(0deg);
    }
    40%{
        opacity: 1;
    }
    60%{
        opacity: 1;
    }
    100%{
        -moz-transform: rotate(360deg);
    }
}
@-webkit-keyframes xuanzhuan{
    0%{
        -webkit-transform: rotate(0deg);
    }
    40%{
        opacity: 1;
    }
    60%{
        opacity: 1;
    }
    100%{
        -webkit-transform: rotate(360deg);
    }
}
@-o-keyframes xuanzhuan{
    0%{
        -o-transform: rotate(0deg);
    }
    40%{
        opacity: 1;
    }
    60%{
        opacity: 1;
    }
    100%{
        -o-transform: rotate(360deg);
    }
}
@keyframes xuanzhuan{
    0%{
        transform: rotate(0deg);
    }
    40%{
        opacity: 1;
    }
    60%{
        opacity: 1;
    }
    100%{
        transform: rotate(360deg);
    }
}