.body {
  display: grid;
  /*grid布局*/
  /*设置行*/
  margin: 0;
}
.header {
  color: #00fff0;
  background: url('../image/title.png') no-repeat;
  background-size: 100% 100%;
  background-position: left bottom;
  position: relative;
}
.header span.title {
  display: block;
  text-align: center;
  font-size: 1.82291667vw;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.close {
  position: absolute;
  font-size: 0.9375vw;
  left: 1.04166667vw;
  top: 1.85185185vh;
  padding-left: 1.04166667vw;
  cursor: pointer;
}
.close .icon-close {
  width: 0.88541667vw;
  height: 0.9375vw;
  display: inline-block;
  background: url('../image/images/close.png') no-repeat;
  background-size: 100% 100%;
  background-position: center left;
  position: relative;
  top: 0.15625vw;
}
.main {
  padding: 0.9375vw 1.04166667vw;
  display: grid;
  grid-template-columns: 26% 48% 26%;
  color: #fff;
}
.rangeGird {
  display: grid;
  /*grid布局*/
  grid-template-columns: 40% auto;
  /*设置列*/
  grid-column-gap: 0.78125vw;
}
.main > div {
  padding: 0 0.6vw;
  overflow-y: hidden;
  overflow-x: hidden;
}
.scrollbox,
.scrollbox2 {
  padding-right: 15px;
  height: 27.77777778vh;
  overflow-y: auto;
}
.main > div table {
  width: 100% !important;
  text-align: center;
  border-collapse: collapse;
  border-spacing: 0;
  table-layout: fixed;
}
.main > div table tr:nth-child(1) {
  background-image: linear-gradient(to right, #0162ba, #001347);
}
.main > div table.table2 tr:nth-child(1) {
  background-image: linear-gradient(to right, #a88154, #001347);
}
.main > div table th {
  font-size: 0.83333333vw;
  line-height: 2.60416667vw;
  text-align: center;
}
.main > div table td {
  font-size: 0.72916667vw;
  line-height: 2.08333333vw;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.main > div table tr:nth-child(odd) {
  background-color: #334268;
}
.main-left {
  background: url('../image/borderLeft.png') no-repeat;
  background-size: 100% 100%;
}
.main-left > div {
  width: 100%;
}
.subtitle {
  font-size: 0.9375vw;
  color: #fff;
  background: url('../image/subtitle.png') no-repeat;
  background-size: auto 100%;
  line-height: 3.02083333vw;
  padding: 0 0 0 1.04166667vw;
  margin: 1.04166667vw 0;
  position: relative;
}
.subtitle span.icon {
  display: inline-block;
  width: 1.5625vw;
  height: 1.5625vw;
  background: url('../image/images/icon1.png') no-repeat;
  background-size: 100% 100%;
  background-position: center center;
  position: relative;
  padding-right: 0.52083333vw;
}
.subtitle span.icon2 {
  background-image: url('../image/images/icon2.png');
}
.subtitle span.icon3 {
  background-image: url('../image/images/icon3.png');
}
.subtitle span.icon4 {
  background-image: url('../image/images/icon4.png');
}
.subtitle span.icon5 {
  background-image: url('../image/images/icon5.png');
}
.subtitle span.icon6 {
  background-image: url('../image/images/icon6.png');
}
.subtitle span.icon7 {
  background-image: url('../image/images/icon7.png');
}
.subtitle span.icon8 {
  background-image: url('../image/images/icon8.png');
}
.subtitle span.icon9 {
  background-image: url('../image/images/icon9.png');
}
.main-center {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.main .map {
  text-align: center;
  position: relative;
  background: url('../image/map.jpg') no-repeat;
  background-position: center;
  background-size: 100% auto;
  margin-bottom: 20px;
  height: 30%;
  width: 100%;
  overflow: hidden;
  animation: scaleDaw 4s ease-in-out 1;
}
@keyframes scaleDaw {
  0% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}
.main .map span {
  font-size: 2.08333333vw;
  color: #00fff0;
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.map-bottom {
  background: url('../image/borderCenter.png') no-repeat;
  background-size: 100% 100%;
  padding: 1px 20px;
}
.main-right {
  background: url('../image/borderRight.png') no-repeat;
  background-size: 100% 100%;
}
.circleMap {
  display: grid;
  /*grid布局*/
  grid-template-rows: 1fr 1fr;
  /*设置行*/
}
#map1 {
  height: 100%;
}
#map2 {
  height: 100%;
}
.mapMore {
  display: grid;
  height: 100%;
  /*grid布局*/
  grid-template-columns: 1fr 1fr;
}
#map3 {
  height: 100%;
}
.circleMap > div {
  display: inline-block;
  width: 50%;
}
.select_box {
  font-family: '宋体';
  font-size: 0.625vw;
  color: #999999;
  width: 9.27083333vw;
  line-height: 1.04166667vw;
  margin: 2.60416667vw auto;
}
.select_showbox {
  border: 1px solid #b0a296;
  height: 1.04166667vw;
  padding-left: 5px;
  /*background: url(img/icon.png) no-repeat 156px 0;可以替换成想要的下拉三角*/
  background: #ccc;
}
.select_option {
  border: 1px solid #b0a296;
  border-top: none;
  display: none;
}
.select_option li {
  padding-left: 5px;
}
.select_option li.selected {
  background-color: #f3f3f3;
  color: #999;
}
.select_option li.hover {
  background: #7b6959;
  color: #fff;
}
.select.option {
  display: inline-block;
  width: auto;
  /*清除select的边框样式*/
  border: none;
  /*清除select聚焦时候的边框颜色*/
  outline: none;
  /*将select的宽高等于div的宽高*/
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  border-radius: 1.04166667vw;
  right: 0.52083333vw;
  border: 1px solid #19bdce;
  /*隐藏select的下拉图标*/
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  /*通过padding-left的值让文字居中*/
  padding: 0.36458333vw 1.04166667vw;
  background-color: transparent;
  color: #fff;
  font-size: 0.72916667vw;
  border-color: #19bdce;
  padding-right: 1.5625vw;
  background: url('../image/images/down.png') no-repeat scroll right center transparent;
  background-position: 93% center;
}
.select.option option {
  background-color: #001443;
}
.tooltip-div,
.tooltip-div1,
.tooltip,
.tooltip1 {
  /* border: 1px solid rgba(41, 52, 86, .5); */
  z-index: 111;
  padding: 0.52083333vw;
  background-color: transparent;
  font-size: 0.52083333vw;
  text-align: left;
  width: 7.8125vw;
  border-radius: 3px;
  color: #fff;
  white-space: normal;
  word-break: break-all;
  overflow: hidden;
}
.tooltip-div :after {
  content: '';
  position: absolute;
  border: 10px solid transparent;
  border-top-color: rgba(41, 52, 86, 0.5);
  top: 101%;
  left: 1.45833333vw;
}
.tooltip :after {
  content: '';
  position: absolute;
  border: 10px solid transparent;
  border-left-color: rgba(41, 52, 86, 0.5);
  top: 50%;
  left: 100%;
  transform: translateY(-50%);
}
.tooltip1 :after {
  content: '';
  position: absolute;
  border: 10px solid transparent;
  border-right-color: rgba(41, 52, 86, 0.5);
  top: 50%;
  right: 100%;
  transform: translateY(-50%);
}
.rangeGird .text {
  font-size: 0.625vw;
  margin-bottom: 0.78125vw;
}
.rangeGird .text:last-child {
  text-align: right;
}
.procress {
  width: 100%;
  height: 0.78125vw;
  background-color: #0289fa;
  border-radius: 30px;
  position: relative;
  margin-bottom: 1.04166667vw;
}
.right {
  background-color: #fcba62;
  border-radius: 30px;
  height: 0.78125vw;
  width: 20%;
  position: absolute;
  right: 0;
  top: 0;
}
.protext {
  font-size: 12px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin-bottom: 0.52083333vw;
}
.protext .bar {
  display: inline-block;
  width: 12px;
  height: 7px;
  background-color: #0289fa;
  border-radius: 10px;
}
.protext .bar.color1 {
  background-color: #fcba62;
}
.protext .bar.color1 {
  background-color: #00fff0;
}
.protext .bar.color1 {
  background-color: #d75154;
}
.procress1 {
  background-color: #00fff0;
}
.procress1 .right {
  background-color: #d75154;
  width: 30%;
}
#map7 {
  height: 100%;
}
/*滚动条样式*/
.scrollbox::-webkit-scrollbar {
  width: 4px;
}
.scrollbox::-webkit-scrollbar-thumb {
  border-radius: 10px;
  box-shadow: inset 0 0 5px #0289fc;
  background: #0289fc;
}
.scrollbox::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px #33426d;
  border-radius: 0;
  background: #33426d;
}
.scrollbox2::-webkit-scrollbar {
  width: 4px;
}
.scrollbox2::-webkit-scrollbar-thumb {
  border-radius: 10px;
  box-shadow: inset 0 0 5px #fcba62;
  background: #fcba62;
}
.scrollbox2::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px #33426d;
  border-radius: 0;
  background: #33426d;
}
.body {
  height: 100vh;
  display: grid;
  grid-template-rows: 6.48148148vh calc(100% - 70*0.09259259vh);
}
.main-left {
  display: grid;
  grid-template-rows: calc(35% - 0.6vw) calc(35% - 0.6vw) calc(30% - 0.6vw);
  grid-gap: 0.6vw;
}
.main-right {
  display: grid;
  grid-template-rows: calc(16% - 0.6vw) calc(22% - 0.6vw) calc(27% - 0.6vw) calc(35% - 0.6vw);
  grid-gap: 0.6vw;
}
.gird {
  display: grid;
  padding-top: 0.6vw;
  grid-template-rows: 5.09259259vh calc(100% - (55 * 0.09259259vh));
  grid-gap: 0.6vw;
}
.map-bottom {
  height: 70%;
  display: grid;
  grid-template-rows: 54% 46%;
}
.main > div {
  padding: 0 0.6vw;
}
.scrollbox,
.scrollbox2 {
  height: 100%;
}
.subtitle {
  margin: 0;
  display: flex;
  align-items: center;
}