@font-face {
  font-family: 'LCdd';
  src: url('../../fonts/LCdd.TTF');
}
body {
  background: url(../../img/index/bg.png);
}
.contenter {
  width: 100%;
  height: 85%;
  padding: 0 2.5%;
  box-sizing: border-box;
  display: flex;
}
.contenter .top5 {
  width: 17.5%;
  height: 100%;
}
.contenter .top5 .top5-title {
  width: 100%;
  height: 5%;
  padding: 1% 0;
  background: url(../../img/index/title.png) no-repeat center;
  background-size: 100%;
  color: #fff;
  text-align: center;
  display: table;
  font-size: 0.9rem;
  color: #0ac1c7;
}
.contenter .top5 .top5-title span {
  display: table-cell;
  vertical-align: middle;
}
.contenter .top5 .top5-content {
  width: 100%;
  height: 50%;
}
.contenter .top5 .top5-content ul {
  width: 100%;
  height: 100%;
  overflow-y: scroll;
  padding-left: 2%;
}
.contenter .top5 .top5-soli {
  width: 24%;
  height: 35%;
  z-index: 999;
  position: absolute;
}
.contenter .top5 ::-webkit-scrollbar {
  width: 0px;
  height: 10px;
}

.contenter .top5::-webkit-scrollbar-track {
  width: 6px;
  background: rgba(#101f1c, 0.1);
  -webkit-border-radius: 2em;
  -moz-border-radius: 2em;
  border-radius: 2em;
}

.contenter .top5::-webkit-scrollbar-thumb {
  background-color: rgba(144, 147, 153, 0.5);
  background-clip: padding-box;
  min-height: 28px;
  -webkit-border-radius: 2em;
  -moz-border-radius: 2em;
  border-radius: 2em;
  transition: background-color 0.3s;
  cursor: pointer;
}

.contenter .top5::-webkit-scrollbar-thumb:hover {
  background-color: rgba(144, 147, 153, 0.3);
}

.contenter .top5 .top5-content ul li {
  width: 100%;
  height: 17%;
  margin-top: 10%;
  position: relative;
}
.contenter .top5 .top5-content ul li:nth-child(1) {
  margin-top: 2%;
}

.contenter .top5 .top5-content ul li .li-content {
  width: 100%;
  height: 100%;
  margin-left: 5%;
  background: url(../../img/index/border.png) no-repeat center;
  background-size: contain;
  font-size: 0.6rem;
  padding-left: 17%;
  padding-top: 6%;
  color: #fff;
  box-sizing: border-box;
}
.contenter .top5 .top5-content ul li .li-content span {
  margin-right: 2%;
}
.contenter .top5 .top5-content ul li .cicle {
  content: '';
  display: block;
  position: absolute;
  width: 2.1rem;
  height: 2.1rem;
  background: url(../../img/index/green.png) no-repeat center;
  background-size: 100%;
  left: 0;
  bottom: 0;
}
.contenter .top5 .top5-content ul li:nth-of-type(1) .li-content {
  background: url(../../img/index/border2.png) no-repeat center;
  background-size: contain;
}
.contenter .top5 .top5-content ul li:nth-of-type(1) .cicle {
  background: url(../../img/index/orange.png) no-repeat center;
  background-size: 100%;
}
.contenter .total {
  width: 65%;
  height: 100%;
  position: relative;
  margin-top: 2%;
}
.contenter .total .rain {
  position: absolute;
  left: 0;
  top: 0;
  z-index: -1;
}
.contenter .total .data1,
.contenter .total .data2,
.contenter .total .data3,
.contenter .total .data4,
.contenter .total .data5,
.contenter .total .data6 {
  width: 8rem;
  height: 4rem;
  position: absolute;
}
.contenter .total .data1 span,
.contenter .total .data2 span,
.contenter .total .data3 span,
.contenter .total .data4 span,
.contenter .total .data5 span,
.contenter .total .data6 span {
  color: #0ac1c7;
  font-size: 0.8rem;
  font-family: '宋体';
}
.contenter .total .data1 p,
.contenter .total .data2 p,
.contenter .total .data3 p,
.contenter .total .data4 p,
.contenter .total .data5 p,
.contenter .total .data6 p {
  font-family: 'LCdd';
  font-size: 1.3rem;
  color: #f29701;
}
.contenter .total .data6 p {
  font-size: 1.1rem;
  width: 280px;
}
.contenter .total .data1 {
  left: 15%;
  top: 12%;
}
.contenter .total .data2 {
  left: 27%;
  top: 22%;
}
.contenter .total .data3 {
  left: 43%;
  top: 3%;
}
.contenter .total .data4 {
  left: 59%;
  top: 17%;
}
.contenter .total .data5 {
  left: 73%;
  top: 28%;
}
.contenter .total .data6 {
  left: 63%;
  top: 6%;
}
.contenter .total .dashed {
  position: absolute;
  left: 0;
  top: 0;
}
.contenter .total .sphere {
  width: 20rem;
  height: 20rem;
  position: relative;
  margin: 11% auto 0;
}
.contenter .total .sphere .sphere-bg {
  position: absolute;
  z-index: 100;
  left: 10px;
  top: 0;
  width: 100%;
  height: 100%;
}
.contenter .total .sphere .sphere-bg img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.contenter .total .cicle3 {
  width: 790px;
  height: 790px;
  position: absolute;
  background: url(../../img/index/circle.png) no-repeat;
  background-position: center;
  background-size: 100% 100%;
  top: 20%;
  left: 52%;
  transform-style: preserve-3d;
  transform: translateX(-50%) rotateX(75deg);
  animation: rotate3 20s linear infinite;
}
.contenter .total .cicle4 {
  width: 15rem;
  height: 15rem;
  position: absolute;
  top: 60%;
  left: 50%;
  transform-style: preserve-3d;
  background: url(../../img/index/gqright.png) no-repeat center;
  background-size: 100%;
  transform: translateX(-50%) rotateX(75deg);
  animation: rotate3 2s linear infinite;
}
.contenter .total .cicle5 {
  width: 15rem;
  height: 15rem;
  position: absolute;
  top: 62%;
  left: 50%;
  transform-style: preserve-3d;
  background: url(../../img/index/gqleft.png) no-repeat center;
  background-size: 100%;
  transform: translateX(-50%) rotateX(75deg);
  animation: rotate4 2s linear infinite;
}
.contenter .total .cicle6 {
  width: 12rem;
  height: 12rem;
  position: absolute;
  top: 70%;
  left: 50%;
  transform-style: preserve-3d;
  background: url(../../img/index/gqbottomleft.png) no-repeat center;
  background-size: 100%;
  transform: translateX(-50%) rotateX(75deg);
  animation: rotate3 2s linear infinite;
}
.contenter .total .cicle7 {
  width: 12rem;
  height: 12rem;
  position: absolute;
  top: 72%;
  left: 50%;
  transform-style: preserve-3d;
  background: url(../../img/index/gqbottomleft.png) no-repeat center;
  background-size: 100%;
  transform: translateX(-50%) rotateX(75deg);
  animation: rotate4 2s linear infinite;
}
.contenter .total .cicle8,
.contenter .total .cicle9,
.contenter .total .cicle10,
.contenter .total .cicle11 {
  width: 5rem;
  height: 5rem;
  position: absolute;
  top: 50%;
  left: 52%;
  z-index: 100;
  margin-left: -2.5rem;
  border-radius: 50%;
}
.contenter .total .cicle8 span,
.contenter .total .cicle9 span,
.contenter .total .cicle10 span,
.contenter .total .cicle11 span {
  font-family: 'LCdd';
  display: block;
  margin-left: 8%;
  font-size: 1.3rem;
  margin-top: 20%;
}
.contenter .total .cicle8 p,
.contenter .total .cicle9 p,
.contenter .total .cicle10 p,
.contenter .total .cicle11 p {
  text-align: center;
  font-size: 0.8rem;
}
.contenter .total .cicle8 {
  background: url(../../img/index/circle1.png) no-repeat;
  background-size: 100%;
  animation: rotate5 20s linear infinite;
  color: #f29701;
}
.contenter .total .cicle9 {
  background: url(../../img/index/circle2.png) no-repeat;
  background-size: 100%;
  animation: rotate6 20s linear infinite;
  color: #0ac1c7;
}
.contenter .total .cicle10 {
  background: url(../../img/index/circle1.png) no-repeat;
  background-size: 100%;
  animation: rotate7 20s linear infinite;
  color: #f29701;
}
.contenter .total .cicle11 {
  background: url(../../img/index/circle2.png) no-repeat;
  background-size: 100%;
  color: #0ac1c7;
  animation: rotate8 20s linear infinite;
}
.contenter .analyse {
  width: 17.5%;
  height: 100%;
}

.contenter .analyse .analyse-title {
  width: 100%;
  height: 5%;
  padding: 1% 0;
  background: url(../../img/index/title.png) no-repeat center;
  background-size: 100%;
  color: #fff;
  text-align: center;
  color: #0ac1c7;
  display: table;
  font-size: 0.9rem;
}
.contenter .analyse .analyse-title span {
  display: table-cell;
  vertical-align: middle;
}
.contenter .analyse #airEcharts {
  width: 22%;
  height: 35%;
  right: 2%;
  z-index: 999;
  position: absolute;
}
.contenter .analyse .execution {
  width: 100%;
  height: 30%;
  background: url(../../img/index/execution.png) no-repeat;
  background-size: contain;
  overflow: hidden;
  margin-top: 8%;
  position: relative;
}
.contenter .analyse .execution .title {
  writing-mode: vertical-lr;
  font-size: 0.7rem;
  margin-left: 5%;
  margin-top: 9%;
  color: #fff;
}
.contenter .analyse .execution .cicle1,
.contenter .analyse .execution .cicle2 {
  position: absolute;
  width: 4rem;
  height: 4rem;
  background: url(../../img/index/circular.png) no-repeat center;
  background-size: 100%;
  transform-style: preserve-3d;
  transform: rotateX(75deg);
  animation: rotate2 1s linear infinite;
}
.contenter .analyse .execution .cicle1 {
  top: 47%;
  left: 20%;
}
.contenter .analyse .execution .cicle2 {
  top: 47%;
  left: 63%;
}
.contenter .analyse .execution .waterChart1,
.contenter .analyse .execution .waterChart2 {
  position: absolute;
  width: 4rem;
  height: 5rem;
}
.contenter .analyse .execution .waterChart1 .chart-title,
.contenter .analyse .execution .waterChart2 .chart-title {
  height: 20%;
  font-size: 0.6rem;
  text-align: center;
  color: #fff;
}
.contenter .analyse .execution .waterChart1 .chart1,
.contenter .analyse .execution .waterChart2 .chart1,
.contenter .analyse .execution .waterChart1 .chart2,
.contenter .analyse .execution .waterChart2 .chart2 {
  width: 100%;
  height: 80%;
}
.contenter .analyse .execution .waterChart1 {
  top: 0%;
  left: 20%;
}
.contenter .analyse .execution .waterChart2 {
  top: 0%;
  left: 63%;
}
.contenter .sale {
  width: 27.5%;
  height: 30%;
  position: absolute;
  bottom: 0;
  left: 2.5%;
}
.contenter .sale ul {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.contenter .sale ul li {
  width: 100%;
  height: 30%;
  margin-top: 1%;
}
.contenter .sale ul li .showImg {
  float: left;
  width: 10%;
  height: 100%;
  text-align: center;
}
.contenter .sale ul li .showImg img {
  vertical-align: 0%;
  width: 70%;
  margin-top: 30%;
}
.contenter .sale ul li .data {
  float: left;
  width: 10%;
  height: 100%;
  text-align: center;
}
.contenter .sale ul li .data span {
  color: #fff;
  font-size: 0.6rem;
}
.contenter .sale ul li .data span:nth-of-type(2) {
  color: #0ac1c7;
}
.contenter .sale ul li .shoeChart,
.contenter .sale ul li .clothesChart,
.contenter .sale ul li .mzChart {
  height: 100%;
  width: 75%;
  float: left;
}
.analyse-describe {
  padding: 20px 10px;
  height: 13%;
  font-size: 0.8rem;
  color: #f29701;
}
/* 下拉框代码 */
.select {
  position: absolute;
  left: 28%;
  top: 11%;
  display: flex;
  z-index: 999;
}
.dropdown {
  position: relative;
  display: inline-block;
  margin: 0 10px;
}

.dropbtn {
  background-color: transparent;
  color: white;
  padding: 6px 10px;
  border: none;
  cursor: pointer;
  width: 115px;
  text-align: left;
  border: 1px solid #0cced1;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  background-image: url('data:image/svg+xml;charset=US-ASCII,<svg%20xmlns="http://www.w3.org/2000/svg"%20width="20"%20height="20"%20viewBox="0%200%2024%2024"><path%20fill="none"%20stroke="%23fff"%20stroke-width="2"%20d="M2%207l10%2010L22%207"/></svg>');
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 10px;
  border-radius: 5px;
  transition: border-color 0.3s, box-shadow 0.3s;
}
.dropbtn:hover {
  border-color: #00bcd4;
  box-shadow: 0 10px 12px rgba(0, 188, 212, 0.2);
  border-radius: 5px;
}
.dropbtn:focus {
  outline: none;
  box-shadow: 0 10px 12px rgba(0, 188, 212, 0.2);
}

.dropdown-content {
  display: none;
  position: absolute;
  background: rgba(0, 0, 0, 0.8);
  min-width: 114px;
  z-index: 999;
  list-style: none;
  color: #fff;
  padding: 0;
  margin: 0;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.dropdown-content li {
  padding: 6px 10px;
  padding-left: 10px;
  cursor: pointer;
  font-size: 14px;
  transition: background-color 0.1s;
}

.dropdown-content li:hover {
  background-color: #0cced1;
}

.show {
  display: block;
}

@media screen and (min-width: 2560px) {
  .contenter .total .cicle3 {
    width: 1100px;
    height: 1100px;
    position: absolute;
    background: url(../../img/index/circle.png) no-repeat;
    background-position: center;
    background-size: 100% 100%;
    top: 20%;
    left: 52%;
    transform-style: preserve-3d;
    transform: translateX(-50%) rotateX(75deg);
    animation: rotate3 20s linear infinite;
  }
}