* {
  margin: 0;
  padding: 0;
}
html,
body {
  width: 100%;
  overflow: hidden;
  height: 100%;
}
a{ text-decoration:none;}
body {
  background: url(../images/53bg.png) no-repeat;
  background-size: 100%;
}
ul,
li {
  list-style: none;
}

.main {
  width: 100%;
  height: 78%;
  padding: 0 2.5%;
  box-sizing: border-box;
  position: relative;
}
.main .top5 {
  width: 17.5%;
  height: 70%;
  float: left;
}
.main .top5 .top5-title {
  width: 100%;
  height: 10%;
  background: url(../images/title.png) no-repeat center;
  background-size: 100%;
  color: #fff;
  text-align: center;
  display: table;
  font-size: 0.9rem;
}
.main .top5 .top5-title span {
  display: table-cell;
  vertical-align: middle;
}
.main .top5 .top5-content {
  width: 100%;
  height: 80%;
}
.main .top5 .top5-content ul {
  width: 100%;
  height: 100%;
}
.main .top5 .top5-content ul li {
  width: 100%;
  height: 15%;
  margin-top: 5%;
  position: relative;
}
.main .top5 .top5-content ul li .li-content {
  width: 90%;
  height: 100%;
  margin-left: 5%;
  background: url(../images/border.png) no-repeat center;
  background-size: contain;
  font-size: 0.7rem;
  padding-left: 15%;
  padding-top: 6%;
  color: #fff;
  box-sizing: border-box;
}
.main .top5 .top5-content ul li .li-content span {
  margin-right: 2%;
}
.main .top5 .top5-content ul li .cicle {
  content: '';
  display: block;
  position: absolute;
  width: 1.7rem;
  height: 1.7rem;
  background: url(../images/green.png) no-repeat center;
  background-size: 100%;
  left: 0;
  bottom: 0;
}
.main .top5 .top5-content ul li:nth-of-type(1) .li-content {
  background: url(../images/border2.png) no-repeat center;
  background-size: contain;
}
.main .top5 .top5-content ul li:nth-of-type(1) .cicle {
  background: url(../images/orange.png) no-repeat center;
  background-size: 100%;
}
.main .total {
  width: 65%;
  height: 100%;
  float: left;
  position: relative;
  margin:0 17.5%;
}
.main .total .rain {
  position: absolute;
  left: 0;
  top: 0;
  z-index: -1;
}
.main .total .data1,
.main .total .data2,
.main .total .data3,
.main .total .data4 {
  width: 8rem;
  height: 4rem;
  position: absolute;
}
.main .total .data1 span,
.main .total .data2 span,
.main .total .data3 span,
.main .total .data4 span {
  color: #0ac1c7;
  font-size: 0.8rem;
  font-family: '瀹嬩綋';
}
.main .total .data1 p,
.main .total .data2 p,
.main .total .data3 p,
.main .total .data4 p {
  font-family: 'LCdd';
  font-size: 1.5rem;
  color: #f29701;
}
.main .total .data1 {
  left: 10%;
  top: 12%;
}
.main .total .data2 {
  left: 42%;
  top: 3%;
}
.main .total .data3 {
  left: 62%;
  top: 5%;
}
.main .total .data4 {
  left: 73%;
  top: 28%;
}
.main .total .dashed {
  position: absolute;
  left: 0;
  top: 0;
}
.main .total .sphere {
  width: 30rem;
  height: 30rem;
  position: relative;
  margin: 14% auto 0;
  z-index: 1;
}
.main .total .sphere .sphere-bg {
  position: absolute;
  z-index: 100;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  /*background: url(../images/53earth.png) no-repeat center;*/
  background-size: contain;
}
.main .total .sphere .sum {
  position: absolute;
  z-index: 100;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  /*background: url(../images/53cloud.png) no-repeat center;*/
  background-size: 55%;
  z-index:1;
}
.main .total .sphere .sum .sum01{width:46%; height:46%; background:none; margin:25% auto; border-radius:100%; text-align:center;}
.main .total .sphere .sum .sum01 img{ padding-top:35%;}
.main .total .sphere .sum span {
  display: block;
  margin-top: 44%;
  padding-left: 32%;
  color: #005a79;
  font-size: 1.4rem;
}
.main .total .sphere .sum p {
  margin-top: 2%;
  text-align: center;
  color: #003c63;
  font-size: 1rem;
}
.main .total .cicle3 {
  width:44rem;
  height:44rem;
  background: url(../images/circle.png) no-repeat center;
  background-size: 100%;
  position: absolute;
  top:0%;
  left: 50%;
  transform-style: preserve-3d;
  transform: translateX(-50%) rotateX(75deg);
  animation: rotate3 20s linear infinite;
}
.main .total .cicle4 {
  width: 15rem;
  height: 15rem;
  position: absolute;
  top: 82%;
  left: 50%;
  transform-style: preserve-3d;
  background: url(../images/53gqleft.png) no-repeat center;
  background-size: 100%;
  transform: translateX(-50%) rotateX(75deg);
  animation: rotate4 2s linear infinite;
}
.main .total .cicle5 {
  width: 15rem;
  height: 15rem;
  position: absolute;
  top: 82%;
  left: 50%;
  transform-style: preserve-3d;
  background: url(../images/53gqleft.png) no-repeat center;
  background-size: 100%;
  transform: translateX(-50%) rotateX(75deg);
  animation: rotate4 2s linear infinite;
}
.main .total .cicle6 {
  width: 12rem;
  height: 12rem;
  position: absolute;
  top: 90%;
  left: 50%;
  transform-style: preserve-3d;
  background: url(../images/535gqbottomright.png) no-repeat center;
  background-size: 100%;
  transform: translateX(-50%) rotateX(75deg);
  animation: rotate3 2s linear infinite;
}
.main .total .cicle7 {
  width: 12rem;
  height: 12rem;
  position: absolute;
  top: 92%;
  left: 50%;
  transform-style: preserve-3d;
  background: url(../images/53gqbottomleft.png) no-repeat center;
  background-size: 100%;
  transform: translateX(-50%) rotateX(75deg);
  animation: rotate4 2s linear infinite;
}
.main .total .cicle8{width:9rem;height:9rem;position: absolute; top: 25%; left: -0%; z-index: 9999; text-align:center;}
.main .total .cicle9{width:9rem;height:9rem;position: absolute; top: 63%; left:-2%; z-index: 9999; text-align:center;}
.main .total .cicle10{width:9rem;height:9rem;position: absolute; top: 25%; left:78%; z-index: 9999; text-align:center;}
.main .total .cicle11{width:9rem;height:9rem;position: absolute; top: 0%; left:39%; z-index: 9999; text-align:center;}
.main .total .cicle12{width:9rem;height:9rem;position: absolute; top: 63%; left:82%; z-index: 9999; text-align:center;}
.main .total .cicle13{width:9rem;height:9rem;position: absolute; top: 25%; left:78%; z-index: 9999; text-align:center;}
.main .total .cicle14{width:9rem;height:9rem;position: absolute; top:95%; left:14%; z-index: 9999; text-align:center;}
.main .total .cicle15{width:9rem;height:9rem;position: absolute; top:95%; left:67%; z-index: 9999; text-align:center;}
.main .total .cicle8 a span,.main .total .cicle10 a span,.main .total .cicle12 a span,.main .total .cicle14 a span {display: block; font-size: 1.2rem; margin-top: 34%; text-align:center; display:block;color: #0ac1c7; }
.main .total .cicle9 a span,.main .total .cicle11 a span,.main .total .cicle13 a span,.main .total .cicle15 a span{display: block; font-size: 1.2rem; margin-top: 34%; text-align:center; display:block; color: #f29701;}

.main .total .cicle8 a .help,.main .total .cicle9 a .help,.main .total .cicle10 a .help,.main .total .cicle11 a .help,.main .total .cicle12 a .help,.main .total .cicle13 a .help,.main .total .cicle14 a .help,.main .total .cicle15 a .help{vertical-align: middle; padding-top:36%;}			

.main .total .cicle8 dl,.main .total .cicle9 dl,.main .total .cicle10 dl,.main .total .cicle11 dl,.main .total .cicle12 dl,.main .total .cicle13 dl,.main .total .cicle14 dl,.main .total .cicle15 dl{ display:none;}
.main .total .cicle8:hover dl,.main .total .cicle9:hover dl,.main .total .cicle10:hover dl,.main .total .cicle11:hover dl,.main .total .cicle12:hover dl,.main .total .cicle13:hover dl,.main .total .cicle14:hover dl,.main .total .cicle15:hover dl{ display:block; position:absolute;left:-18%;top:100%; font-size:14px;width:200px; background:url(../images/voice1.png) no-repeat; background-size:100%; height:150px; padding:10%; color:#fff;}

.main .total .cicle8:hover dl{ display:block; position:absolute;left:-50%;top:80%; font-size:14px;width:200px; background:url(../images/voice1.png) no-repeat; background-size:100%; height:150px; padding:10%; color:#fff;}
.main .total .cicle9:hover dl{ display:block; position:absolute;left:30%;top:90%; font-size:14px;width:200px; background:url(../images/voice2.png) no-repeat; background-size:100%; height:150px; padding:10%; color:#fff;}
.main .total .cicle10:hover dl{ display:block; position:absolute;left:40%;top:80%; font-size:14px;width:200px; background:url(../images/voice1.png) no-repeat; background-size:100%; height:150px; padding:10%; color:#fff;}
.main .total .cicle11:hover dl{ display:block; position:absolute;left:-100%;top:50%; font-size:14px;width:200px; background:url(../images/voice2.png) no-repeat; background-size:100%; height:150px; padding:10%; color:#fff;}
.main .total .cicle12:hover dl{ display:block; position:absolute;left:80%;top:50%; font-size:14px;width:200px; background:url(../images/voice1.png) no-repeat; background-size:100%; height:150px; padding:10%; color:#fff;}
.main .total .cicle13:hover dl{ display:block; position:absolute;left:70%;top:70%; font-size:14px;width:200px; background:url(../images/voice2.png) no-repeat; background-size:100%; height:150px; padding:10%; color:#fff;}
.main .total .cicle14:hover dl{ display:block; position:absolute;left:-100%;top:40%; font-size:14px;width:200px; background:url(../images/voice1.png) no-repeat; background-size:100%; height:150px; padding:10%; color:#fff;}
.main .total .cicle15:hover dl{ display:block; position:absolute;left:90%;top:40%; font-size:14px;width:200px; background:url(../images/voice2.png) no-repeat; background-size:100%; height:150px; padding:10%; color:#fff;}


.main .total .cicle8 a p,.main .total .cicle10 a p,.main .total .cicle12 a p,.main .total .cicle14 a p {text-align: center; font-size: 0.7rem; color:#0ac1c7}
.main .total .cicle9 a p,.main .total .cicle11 a p,.main .total .cicle13 a p,.main .total .cicle15 a p{text-align: center; font-size: 0.7rem; color:#f29701}


.main .total .cicle8 { background: url(../images/circle2.png) no-repeat; background-size: 100% 100%;-webkit-transition:all 0.2s linear;transition:all 0.2s linear;}
.main .total .cicle9 {background: url(../images/circle1.png) no-repeat;background-size: 100%;-webkit-transition:all 0.2s linear;transition:all 0.2s linear;}
.main .total .cicle10 {background: url(../images/circle2.png) no-repeat;background-size: 100%;-webkit-transition:all 0.2s linear;transition:all 0.2s linear;}
.main .total .cicle11 {background: url(../images/circle1.png) no-repeat;background-size: 100%;-webkit-transition:all 0.2s linear;transition:all 0.2s linear;}
.main .total .cicle12 {background: url(../images/circle1.png) no-repeat;background-size: 100%;-webkit-transition:all 0.2s linear;transition:all 0.2s linear;}
.main .total .cicle13 {background: url(../images/circle1.png) no-repeat;background-size: 100%;-webkit-transition:all 0.2s linear;transition:all 0.2s linear;}
.main .total .cicle14 {background: url(../images/circle2.png) no-repeat;background-size: 100%;-webkit-transition:all 0.2s linear;transition:all 0.2s linear;}
.main .total .cicle15 {background: url(../images/circle2.png) no-repeat;background-size: 100%;-webkit-transition:all 0.2s linear;transition:all 0.2s linear;}



.main .total .cicle8:hover,.main .total .cicle9:hover,.main .total .cicle10:hover,.main .total .cicle11:hover,.main .total .cicle12:hover,.main .total .cicle13:hover,.main .total .cicle14:hover,.main .total .cicle15:hover{z-index:2;-webkit-box-shadow:0 15px 30px rgba(0,0,0,0.1);box-shadow:0 15px 30px rgba(0,0,0,0.1);-webkit-transform:translate3d(0, -6px, 0);transform:translate3d(0, -6px, 0)}

@keyframes rotate {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes rotate2 {
  0% {
    transform: rotateX(75deg) rotateZ(0);
  }
  100% {
    transform: rotateX(75deg) rotateZ(360deg);
  }
}
@keyframes rotate3 {
  0% {
    transform: translateX(-50%) rotateX(0deg) rotateZ(0);
  }
  100% {
    transform: translateX(-50%) rotateX(0deg) rotateZ(360deg);
  }
}
@keyframes rotate4 {
  0% {
    transform: translateX(-50%) rotateX(75deg) rotateZ(0);
  }
  100% {
    transform: translateX(-50%) rotateX(75deg) rotateZ(-360deg);
  }
}