.bar-total {
  position: absolute;
  top: 0;
  border: 1px solid #0066aa;
  height: calc(100vh * (12 / var(--body-height)));
}
.bar-new {
  position: absolute;
  top: 0;
  background-image: linear-gradient(to right, #0066aa, #0E8AF2);
  height: calc(100vh * (12 / var(--body-height)));
}

.newDiscovery-scrollbar::-webkit-scrollbar {
  width: calc(100vw * (5 / var(--body-width)));
}
.newDiscovery-scrollbar::-webkit-scrollbar-track {
  background-color: #658195;
}
.newDiscovery-scrollbar::-webkit-scrollbar-thumb {
  background-color: #0066aa;
}

.newDiscovery:first-child {
  color: #00FCFF !important;
}
.newDiscovery:first-child .bar-total {
  border: 1px solid #009194;
}
.newDiscovery:first-child .bar-new {
  background-image: linear-gradient(to right, #009194, #00E2F7);
}
#weatherPic  {
  width: calc(100vw * (28 / var(--body-width)));
  height: calc(100vw * (28 / var(--body-width)));
  margin-right: 10px;
  vertical-align: middle;
}
#weatherTemperature,
#weatherQuality {
  color: #4eb9ff;
  margin-right: 10px;
  vertical-align: middle;
}
#weatherText {
  padding-right: 10px;
  border-right: 2px solid #0066aa;
  color: #fff;
  vertical-align: middle;
}

#weatherLevel {
  background-color: #00b860;
  padding: 0 10px;
  border-radius: 10px;
  vertical-align: middle;
}

:root {
  --body-width: 1920;
  --body-height: 1080;
  --top-height: 125;
  --contain-height: 955;
  --topbg-width: 1182;
  --topbg-height: 97;
  --toptitle-width: 434;
  --toptitle-height: 39;
  --center-item-1-height: calc(100vh * (112 / var(--body-height)));
}
* {
  padding: 0;
  margin: 0;
}
.bg {
  width: calc(100vw);
  height: calc(100vh);
  background-image: url(../image/bg.png);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  overflow: hidden;
}
.top {
  width: 100%;
  height: calc(100vh * (var(--top-height) / var(--body-height)));
  display: flex;
  justify-content : space-between;
}
.top-title {
  width: calc(100vw * (var(--toptitle-width) / var(--body-width)));
  height: calc(100vh * (var(--toptitle-height) / var(--body-height)));
  background-image: url(../image/title.png);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  margin: 0 auto;
  position: relative;
  top: calc(100vh * (10 / var(--body-height)));
}
.top-bg {
  width: calc(100vw * (var(--topbg-width) / var(--body-width)));
  height: calc(100vh * (var(--topbg-height) / var(--body-height)));
  background-image: url(../image/top-bg.png);
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.top-left {
  padding-left: calc(100vw * (54 / var(--body-width)));
  flex: 1;
}
.top-right {
  padding-right: calc(100vw * (54 / var(--body-width)));
  flex: 1;
  text-align: right;
}
.top-left, .top-right {
  color: #fff;
  padding-top: calc(100vh * (20 / var(--body-height)));
}
.contain-left {
  width: calc(100vw * ((303 - 20) / var(--body-width)));
  height: calc(100vh * ((var(--contain-height) - 42) / var(--body-height)));
  padding-left: calc(100vw * (20 / var(--body-width)));
  background-image: url(../image/line.png);
  background-size: calc(100vh * (11 / var(--body-height))) calc(100vw * (58 / var(--body-width)));
  background-repeat: repeat-y;
  background-position: bottom left;
  overflow-x: hidden;
  overflow-y: auto;
}
.contain-left::-webkit-scrollbar {
  width: 0;
}
.contain-left::-webkit-scrollbar-thumb {
  width: 0;
}
.contain-center {
  flex: 1;
  position: relative;
}
#mapBtn {
  position: absolute;
  right: calc(100vw * (20 / var(--body-width)));
  top: calc(100vh * (120 / var(--body-height)));
  width: calc(100vw * (34 / var(--body-width)));
  height: calc(100vw * (20 / var(--body-width)));
  line-height: calc(100vw * (20 / var(--body-width)));
  text-align: center;
  border-radius: calc(100vw * (10 / var(--body-width)));
  background-image: linear-gradient(to right, #0C76CD, #6BCEF0);
  cursor: pointer;
  z-index: 10;
}
.contain-right {
  width: calc(100vw * (490 / var(--body-width)));
}
.contain {
  display: flex;
  justify-content: space-between;
  margin: 0 calc(100vw * (14 / var(--body-width))) calc(100vh * (42 / var(--body-height))) calc(100vw * (14 / var(--body-width))) ;
  height: calc(100vh * ((var(--contain-height) - 42) / var(--body-height)));
}
.contain-left-item {
  display: flex;
  /* width: calc(100vw * (287 / var(--body-width))); */
  height: calc(100vh * (86 / var(--body-height)));
  padding: calc(100vh *(8 / var(--body-height))) calc(100vw *(8 / var(--body-width))) calc(100vh *(8 / var(--body-height))) calc(100vw *(8 / var(--body-width)));
  background-image: url(../image/left-bg.png);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  margin-bottom: calc(100vh * (13 / var(--body-height)));
}
.item-pic {
  position: relative;
}
.item-pic {
  width: calc(100vh * (86 / var(--body-height)));
  height: calc(100vh * (86 / var(--body-height)));
  margin-right: 8px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.item-pic-bg {
  position: absolute;
  top: 0;
  width: calc(100vh * (86 / var(--body-height)));
  height: calc(100vh * (86 / var(--body-height)));
  border-radius: 50%;

  background-image: url(../image/circle.png);
  background-size: 100% 100%;
  
}
.item-pic-img {
  display: block;
  border-radius: 50%;
  width: calc(100vh * (65 / var(--body-height)));
  height: calc(100vh * (65 / var(--body-height)));
  object-fit: cover;
}
.item-content {
  flex: 1;
}
.item-content-title {
  color: #fff;
  font-size: calc(100vw * (16 / var(--body-width)));
  padding-left: calc(100vw * (7 / var(--body-width)));
  line-height: calc(100vh * (28 / var(--body-height)));
  width: calc(100vw * (140 / var(--body-width)));
  height: calc(100vh * (28 / var(--body-height)));
  background-image: url(../image/left-title.png);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  margin-bottom: calc(100vh * (7 / var(--body-height)));
}
.item-content-number {
  display: flex;
  justify-content: space-between;
}
.item-content-cou {
  font-size: calc(100vw * (26 / var(--body-width)));
  background-image: linear-gradient(to top, rgb(0, 216, 255) 1%, #fff 90%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.item-content-per {
  position: relative;
  top: calc(100vh * (8 / var(--body-height)));
  color: #7aafc8;
  width: calc(100vw * (80 / var(--body-width)));
  height: calc(100vh * (24 / var(--body-height)));
  background-color: #263d76;
  border-radius: calc(100vh * (24 / var(--body-height)) / 2);
  text-align: center;
  font-size: calc(100vh * (14 / var(--body-height)));
  line-height: calc(100vh * (24 / var(--body-height)));
}

.contain-right-item {
  background-image: url(../image/echart-bg.png);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  width: calc(100vw * (420 / var(--body-width)));
  height: calc(100vh * (249 / var(--body-height)));
  margin-bottom: calc(100vh * (22 / var(--body-height)));
  padding: calc(100vh * (20 / var(--body-height)));
}

.right-item-title {
  color: #fff;
  display: inline-block;
  font-weight: bold;
  /* background-image: url(../image/echarts-title.png); */
  background-repeat: no-repeat;
  font-size: calc(100vh * (14 / var(--body-height)));
  height: calc(100vh * (30 / var(--body-height)));
  line-height: calc(100vh * (26 / var(--body-height)));
  padding: 0 calc(100vw * (8 / var(--body-width)));
}
.center-item-1 {
  position: absolute;
  top: calc(100vh * (-20 / var(--body-height)));
  left: calc(100vw - ((100vw * ((303 - 20) / var(--body-width))) + (100vw * (490 / var(--body-width))) + (100vw * (854 / var(--body-width))) + (100vw * (854 / var(--body-width)))*(1/14)));
  width: calc(100vw * (854 / var(--body-width)));
  height: var(--center-item-1-height);
  background-image: url(../image/count-bg.png);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  text-align: center;
}

.center-item-2 {
  position: absolute;
  top: calc(var(--center-item-1-height) + (100vh * (-20 / var(--body-height))));
  left: calc(100vw * (10 / var(--body-width)));
  width: calc(100% - (100vw * (20 / var(--body-width))));
  height: calc(100vh - (100vh * (360 / var(--body-height))));
}

.center-item-3 {
  display: flex;
  justify-content: space-around;
  position: absolute;
  top: calc(var(--center-item-1-height) + (100vh * (-5 / var(--body-height))) + (100vh - (100vh * (360 / var(--body-height)))));
  left: calc(100vw * (10 / var(--body-width)));
  width: calc(100% - (100vw * (20 / var(--body-width))));
}

.item-1-title {
  position: relative;
  top: calc(100vh * (-10 / var(--body-height)));
  color: #fff;
  font-size: calc(100vw * (23 / var(--body-width)));
}

.item-1-count {
  position: relative;
  top: calc(100vh * (-10 / var(--body-height)));
  color: #fff;
  font-size: calc(100vw * (44 / var(--body-width)));
}

.item-3-level {
  width: calc(100vw * (60 / var(--body-width)));
  height: calc(100vw * (60 / var(--body-width)));
  line-height: calc(100vw * (60 / var(--body-width)));
  font-size: calc(100vw * (14 / var(--body-width)));
  text-align: center;
  color: #a0d1fe;
  border-radius: 50%;
  background-image: url(../image/level-bg.png);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  cursor: pointer;
  position: relative;
}
@keyframes FadeIn {
  0% {
    opacity: 0;
    height: initial;
  }
  100% {
    opacity: 1;
    height: initial;
  }
}
@keyframes FadeOut {
  0% {
    opacity: 1;
    height: initial !important;
  }
  99% {
    opacity: 0;
    height: initial !important;
  }
  100% {
    height: 0;
    display: none !important;
    opacity: 0;
  }
}
.dailog {
  opacity: 0;
  display: none !important;
  animation: FadeOut 1s ease-in-out;
}

.item-3-level:hover[data-level='1'],
.selected-1 {
  background-image: url(../image/1.png) !important;
  color: transparent;
}
.item-3-level:hover[data-level='1'] .dailog {
  display: block !important;
  opacity: 1;
  animation: FadeIn 1s ease-in-out;
}
.item-3-level:hover[data-level='2'],
.selected-2 {
  background-image: url(../image/2.png) !important;
  color: transparent;
}
.item-3-level:hover[data-level='2'] .dailog {
  display: block !important;
  opacity: 1;
  animation: FadeIn 1s ease-in-out;
}
.item-3-level:hover[data-level='3'],
.selected-3 {
  background-image: url(../image/3.png) !important;
  color: transparent;
}
.item-3-level:hover[data-level='3'] .dailog {
  display: block !important;
  opacity: 1;
  animation: FadeIn 1s ease-in-out;
}
.item-3-level:hover[data-level='4'],
.selected-4 {
  background-image: url(../image/4.png) !important;
  color: transparent;
}
.item-3-level:hover[data-level='4'] .dailog {
  display: block !important;
  opacity: 1;
  animation: FadeIn 1s ease-in-out;
}
.item-3-level:hover[data-level='5'],
.selected-5 {
  background-image: url(../image/5.png) !important;
  color: transparent;
}
.item-3-level:hover[data-level='5'] .dailog {
  display: block !important;
  opacity: 1;
  animation: FadeIn 1s ease-in-out;
}
.item-3-level:hover[data-level='6'],
.selected-6 {
  background-image: url(../image/6.png) !important;
  color: transparent;
}
.item-3-level:hover[data-level='6'] .dailog {
  display: block !important;
  opacity: 1;
  animation: FadeIn 1s ease-in-out;
}

#coordinate {
  vertical-align: middle;
  width: calc(100vw * (14 / var(--body-width)));
  height: calc(100vh * (16 / var(--body-height)));
}
#address, #date, #time, .top-right {
  vertical-align: middle;
  font-size: calc(100vw * (16 / var(--body-width)));
}

#resourceClassify,
#newDiscovery,
#newLevel {
  width: 100%;
  height: calc(100vh * (220 / var(--body-height)));
  overflow: hidden;
}