*{
    margin:0;
    padding:0;
}
html,body{
    height: 100%;
}
.arrowUp{
    position:fixed;
    bottom:0;
    width:12%;
    left:44%;
    z-index:9;
}
.arrowUp img{
    width:100%;
}
.music{
    position:fixed;
    right:0;
    top:0;
    width:50px;
    height:50px;
    background:url(../img/musicBtn.png) no-repeat;
    background-size:100%;
    z-index:15;
}
.swiper-container1{
    height:100%;
    overflow:hidden;
}
.swiper-container1 .swiper-slide{
    position:relative;
}

.swiper-container1 .swiper-slide:nth-of-type(1){background:#3e88fe;}

.swiper-container1 .swiper-slide:nth-of-type(8){background:#87CEFA;}
.swiper-container1 .swiper-slide:nth-of-type(9){background:#3e88fe;}
.swiper-container1 .swiper-slide:nth-of-type(1) .indexTop{
    position:absolute;
    width:100%;
    height:25%;
    top:10%;
    left: 5%;
    z-index: 30;
}
.swiper-container1 .swiper-slide:nth-of-type(1) .indexTop img:nth-of-type(1){
    position:absolute;
    left:20%;
    width:60%;
}
.swiper-container1 .swiper-slide:nth-of-type(1) .indexTop img:nth-of-type(2){
    position:absolute;
    left:10%;
    width:17%;
}
.swiper-container1 .swiper-slide:nth-of-type(1) .indexTop img:nth-of-type(3){
    position:absolute;
    bottom:10%;
    right:20%;
    width:15%;
}
.swiper-container1 .swiper-slide:nth-of-type(1) .indexPlane{
    position:absolute;
    width:100%;
    top:35%;
    height:30%;
    text-align:center;
    animation: indexplane 2s infinite;
}
.inclick{
    animation: indexplane 2s infinite;
}
.inadddclick{
    animation: blueshow 1.5s 1;
}
@keyframes blueshow {
0%{opacity: 0;}33%{opacity: 0;}100%{opacity: 1;}
}
.addanimatetitle{
    animation: titleadd 2s 1;
}
@keyframes titleadd {
    0%{opacity: 0;}100%{opacity: 1;}
}
@keyframes indexplane {
    0%{transform:scale(1);}
    50%{transform:scale(0.95);}
    100%{transform:scale(1);}
}
.swiper-container1 .swiper-slide:nth-of-type(1) .indexPlane img{
    height:80%;
}
.swiper-container1 .swiper-slide:nth-of-type(1) .indexBot{
    position:absolute;
    width:100%;
    top:65%;
    height:35%;
}
.swiper-container1 .swiper-slide:nth-of-type(1) .indexBot img{
    position:absolute;
    width:100%;
    bottom:0;
}
.swiper-container1 .swiper-slide:nth-of-type(1) .indexEle{
    position:absolute;
    width:100%;
    height:100%;
    animation: indexplane 2s infinite;
}
.swiper-container1 .swiper-slide:nth-of-type(1) .indexEle div{
    position:absolute;
    width:100%;
    height: 100%;
}
.swiper-container1 .swiper-slide:nth-of-type(1) .indexEle img{
    position:absolute;
    width:100%;
}
.swiper-container1 .swiper-slide:nth-of-type(1) .indexEle img:nth-of-type(1){
    top:1%;z-index: -1; }
.swiper-container1 .swiper-slide:nth-of-type(1) .indexEle img:nth-of-type(2){
    top:10%;z-index: -1; }
.arrFade{
    animation:arrFade 1s infinite linear;
    opacity:0;
}
@keyframes arrFade{
    from{transform:translateY(0);opacity:0;}
    to{transform:translateY(-10px);opacity:1;}
}
.swiper-container1 .swiper-slide:nth-of-type(2) .center{
    position:absolute;
    top:35%;
    width:100%;
    height:30%;
    z-index:9;
}
.swiper-container1 .swiper-slide:nth-of-type(2) .center .text1 img{
    position:absolute;
    left:20%;
    width:60%;
}
.swiper-container1 .swiper-slide:nth-of-type(2) .center .text2 img{
    position:absolute;
    left:20%;
    top:50%;
    width:60%;
}
.wasEle{
    position:absolute;
    width:100%;
    height:100%;
}
.wasEle img:nth-of-type(1){
    position:absolute;
    height:100%;
    width: 100%;
}
.wasEle img:nth-of-type(2){
    position:absolute;
    left:10%;
    top:10%;
    width:80%;
    /*transform:translateX(300px) translateY(-300px);*/
}
.swiper3-bg{
    position:absolute;
    width:100%;
    height:100%;
}
.swiperearly img:nth-of-type(1),.swiperearly-car img:nth-of-type(1){
    position: absolute;
    top:5%;
    width: 20%;
}
.swiperearly-car img:nth-of-type(1){
    height:5%;
    width: 22%;
}
.swiperearly img:nth-of-type(2),.swiperearly-car img:nth-of-type(2){
    position: absolute;
    bottom:0;
    width:100%;
}
.swiperearly-car2{
    width: 100%;
    height: 50%;
}
.swiperearly-car2 img:nth-of-type(1){
    position: absolute;
    bottom: 5%;
    width: 70%;

}
.swiperearly-car2 img:nth-of-type(2){
    position: absolute;
    bottom: 5%;
    right: 0;
    transform: translateX(100%);
}
.swiper3-bg,.swiper3-bg img{
    width: 100%;
    height: 100%;
}
.swiper3-night {
    width: 100%;
    height: 100%;
}
.swiper3-night img{
    position: absolute;
}
.swiper3-night img:nth-of-type(1){

    width: 100%;
    height: 100%;
}
.swiper3-night img:nth-of-type(2){
    right: 0;
    bottom: 0;
    width: 27%;
}
.swiper3-night img:nth-of-type(3){
    right: 5%;
    top:20%;
    width: 27%;
}
.swiper3-night img:nth-of-type(4){
    left: 11%;
    bottom:60%;
    width: 15%;
}
.swiper3-night img:nth-of-type(5){
    left: 11%;
    bottom:54%;
    width: 19%;
}
.swiper3-night img:nth-of-type(6){
    left: 11%;
    bottom:48%;
    width: 19%;
}
.swiper3-night img:nth-of-type(7){
    left: 11%;
    width: 19%;
    bottom:42%;
}
.swiper3-night img:nth-of-type(8){
    left: 31%;
    width: 45%;
    bottom:2%;
}

.swiper4-bg img{
    position: absolute;
    z-index: 6;
}
.swiper4-bg img:nth-of-type(1){
    width: 100%;
    height: 100%;
}
.swiper4-bg img:nth-of-type(2){
    width: 20%;
    height: 90%;
    bottom:0;
    right: 0;
}
.swiper4-bg img:nth-of-type(3){
    width: 47%;
    top:27%;
    left: 30%;
}
.swiper4-bg img:nth-of-type(4){
    width: 47%;
    top:10%;
    right: 0;
}
.swiper4-bg img:nth-of-type(5){
    height: 85%;
    bottom: 0;
    left:7%;
}
.swiper4-bg2{
    overflow: hidden;
    position: absolute;
    z-index: 5;
    width: 100%;
    height: 100%;
}
.swiper4-bg2 img:nth-of-type(1){
    position: absolute;
    width: 100%;
    height: 100%;
}
.swiper4-bg2 img:nth-of-type(2){
    position: absolute;
    height: 85%;
    bottom: 0;
    left:7%;
}
.swiper4-bg2 img:nth-of-type(3){
    position: absolute;
    height:15%;
    top:88%;
    right:5%;
}
.swiper4-bg2 img:nth-of-type(4){
    position: absolute;
    height:11%;
    top:20%;
    right:5%;
}
.swiper5,.swiper6,.swiper7,.swiper8,.swiper9{
    width: 100%;
    height: 100%;
}
.swiper5 img,.swiper6 img,.swiper7 img,.swiper8 img,.swiper9 img{
    position: absolute;

}
.swiper5 img:nth-of-type(1){
    width:100%;
    height: 100%;
}
.swiper5 img:nth-of-type(2){
    width: 100%;
    top:0%;
}
.swiper5 img:nth-of-type(3){
    width:60%;
    top:24%;
    right:6%;
}
.swiper5 img:nth-of-type(4){
    width:76%;
    top:63%;
    right:15%;
}
.swiper5 img:nth-of-type(5){
    width:76%;
    top:63%;
    right:15%;
}
.swiper6 img:nth-of-type(1){
    width:100%;
    height: 100%;
}
.swiper6 img:nth-of-type(2){
    width:34%;
    top:20%;
    left:5%;
}
.swiper6 img:nth-of-type(3){
    width:76%;
    top:65%;
    right:15%;
}
.swiper6 img:nth-of-type(4){
    width:76%;
    top:65%;
    right:15%;
}
.swiper7{
    background: aquamarine;
}
.swiper7 img:nth-of-type(1){
    width:81%;
    top:5%;
    left:10%;
}
.swiper7 img:nth-of-type(2){
    width:42%;
    top:10%;
    left:26%;
}
.swiper7 img:nth-of-type(3){
    width:76%;
    top:65%;
    right:15%;
}
.swiper7 img:nth-of-type(4){
    width:76%;
    top:65%;
    right:15%;
}
.text{
    overflow: hidden;
    position: absolute;
    top: 14%;
    left: 6%;
    width: 82%;
    height: 66%;
    border: 10px solid red;
    border-radius: 10px;
    background: #CD0A0A;
}
.text p{
    color: #fff;
    font-size: 15px;
    line-height:23px;
    padding: 0 5px;
    text-indent: 2em;
}
.text p:nth-of-type(1){
    margin-top: 22%;
}
.swiper8 img:nth-of-type(1){
    width:22%;
    top:7%;
    left:4%;
}
.swiper8 img:nth-of-type(2){
    width:44%;
    top:11%;
    left:27%;
}
.swiper8 img:nth-of-type(3){
    width:18%;
    top:63%;
    right:38%;
}
.swiper8 img:nth-of-type(4){
    width:42%;
    top:69%;
    right:1%;
}
.swiper8 img:nth-of-type(5){
    width:94%;
    top:12%;
    right:7%;
}
.swiper9 img:nth-of-type(1){
    width:100%;
    height: 100%;
}
.swiper9 img:nth-of-type(2){
    width:100%;
    height: 60%;
    top:11%
}
.swiper9 img:nth-of-type(3){
    width:60%;
    top:11%;
    left:20%;
}
.swiper9 img:nth-of-type(4){
    width:66%;
    top:19%;
    left:17%;
}
.swiper9 img:nth-of-type(5){
    width:66%;
    top:34%;
    left:17%;
}
.swiper9 img:nth-of-type(6){
    width:40%;
    top:41%;
    left:30%;
}
.swiper9 img:nth-of-type(7){
    width:58%;
    top:49%;
    left:21%;
}
.swiper9 img:nth-of-type(8){
    width:40%;
    bottom: 0%;
    left:30%;
}
.early-bg{
    height: 100%;
    position: relative;
}
.early-bg>img{
    position: absolute;
    width:330px;
    height:100%;
}
.totop{
    animation: tonext 4s infinite;
}
@keyframes tonext {
    0%{opacity: 0;}
    50%{opacity: 1;}
    100%{opacity: 0;}
}
.ITFarm{
    position: absolute;
    top:20%;
    width: 260px;
    left:10%;
}
.ITFarm img{
    width: 240px;
    margin-top:30px; ;
}
.ggl{
    position: absolute;
    width: 100%;
    height: 100%;
    margin: 0 0;
    /*background: url(img/ggl.png) no-repeat center center;*/
    /*background-size: 100% 100%;*/
    z-index: 1000;
}
.canvas{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    line-height:50%;
    text-align:center;
    z-index: 900;
}
.inhline{
    width:100%;height: 80%;position: absolute;z-index: 200;padding: 10% 0;
}
.inhline h4,h2{
    padding: 0 10%;
    width: 80%;
    text-align: center;
    color: #1fc0ff;
}
.inbottom{
    width: 30%;
    margin: 0 auto 2%;
    border-bottom: 2px solid gold;
    display: block;
    padding-top: 2%;
}
.inhline span{
    width: 100%;height: 0;
    overflow: hidden;
    display: block;
    transition:all 1s;
}