html, body {
    width: 100%;
    height: 100%;
    padding: 0px;
    margin: 0px;
    font-size: 62.5%;
}
*{
	margin: 0;
	padding: 0;
}
.quanP{
  position: fixed;
  top: 2rem;
  left: 2rem;
  z-index: 999;
  color: #FCFF00;
  font-size: 1.6rem;
}
#data-view::-webkit-scrollbar {
  display: none; /* Chrome Safari */
}
#data-view{
	width: 100%;
    height: 100%;
    background-color: #030409;
    color: #fff;
    -ms-overflow-style: none; /* IE 10+ */
    scrollbar-width: none; /* Firefox */
}
#dv-full-screen-container{
	/*position: fixed;*/
    /*top: 0px; */
    /*left: 0px; */
    overflow: hidden;
    width: 100%;
    -webkit-transform-origin: left top; 
    transform-origin: left top;
    /*z-index: 999;*/
    background-image: url('../img/bg.png');
    background-size: 100% 100%;
}
.main-header {
    height: 18%;
    display: block;
    background-image: url('../img/bg_top.png');
    background-size: 100% auto;
    text-align: center;
 }
.mh-middle {
  font-size: 3rem;
  padding-top: 1.8%;
  font-family: Adobe Heiti Std;
  /*font-weight: bold;*/
  letter-spacing: 5px;
  color: #FFFFFF;
  background: linear-gradient(92deg, #0072FF 0%, #00EAFF 48.8525390625%, #01AAFF 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.mh-text{
  font-size: 2.5rem;
  padding-top: 0.3%;
  font-family: Digital-7 Mono;
  font-weight: bold;
  color: #01C4F7;
  letter-spacing: 3px;
}
.main-container {
    height: 82%;
    width: 100%;
    display: flex;
    justify-content: space-between;
}
.border-box-content {
  padding: 20px;
  box-sizing: border-box;
  display: flex;
}
.left-chart-container {
    width: 30%;
    height: 100%;
    padding: 20px;
    box-sizing: border-box;
    position: relative;
    z-index: 999999;
}
.cont-chart-container{
    width: 40%;
    height: 100%;
    position: relative;
}
.right-main-container {
    width: 30%;
    height: 100%;
    padding: 20px;
    box-sizing: border-box;
    position: relative;
    z-index: 999999;
}
.cont-chart{
  width: 100%;
  margin-top: calc(10% - 0.25rem);
  margin-bottom: 10%;
  height: 0.5rem;
  background-image: url('../img/contChart.png');
  background-size: 100% 100%;
}
.cont-chart1{
  width: 100%;
  height: 5%;
}
.cc-right-details{
  width: 100%;
  height: 10%;
  overflow: hidden;
  text-align: center;
}
.cc-right-details-list{
	float: left;
	width: 33%;
}
.cc-right-details-name{
	font-size: 1.6rem;
	font-family: Adobe Heiti Std;
	font-weight: normal;
	color: #28F7FF;
	letter-spacing: 1px;
}
.cc-right-details-num{
	font-size: 2.4rem;
	font-family: Adobe Heiti Std;
	font-weight: bold;
	color: #FCFF00;
	letter-spacing: 0px;
}
.left-chart-2 {
  width: 100%;
  height: 40%;
  /*display: flex;*/
  /*flex-direction: column;*/
  /*background: rgba(13, 53, 123,0.55);*/
  background-image: url('../img/leftChartBj.png');
  background-size: 100% 100%;
}
.left-chart-cont{
	/*background: rgba(8, 37, 183, 0.2);*/
	height: 3rem;
	line-height: 3.5rem;
	width: 100%;
}
.lc2-header {
  font-size: 1.6rem;
  text-indent: 20px;
  font-weight: normal;
  /*width: 60%;*/
  color: #2AA7D3;
  background: linear-gradient(92deg, #0072FF 0%, #00EAFF 48.8525390625%, #01AAFF 100%);
  -webkit-background-clip: text;
  /*-webkit-text-fill-color: transparent;*/
}
.lc2-header span{
  /*display: inline-block;*/
  font-size: 1.3rem;
  font-weight: bold;
  color: #DDE61E;
}
.lc2-header span img{
  height: 2rem;
  vertical-align: middle;
}
.lc2-chart{
	width: 100%;
	height: calc(100% - 3rem) !important;
	text-align: center;
	position: relative;
}
.lc2-chart-config{
  height: calc(100% - 4rem);
}
.lc2-chart-text{
  font-size: 2.4rem;
  padding: 0.5rem 1.5rem;
}
.lc2-chart-text1{
  position: absolute;
  top: 3rem;
  left: 1rem;
  border-bottom: 2px solid #32DBF0;
}
.lc2-chart-text1:before{
  position: absolute;
  bottom: 0;
  right: -5px;
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #32DBF0;
}
.lc2-chart-text2{
  position: absolute;
  top: 12rem;
  left: 1rem;
  border-bottom: 2px solid #DC5374;
}
.lc2-chart-text2:before{
  position: absolute;
  bottom: 0;
  right: -5px;
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #DC5374;
}
.lc2-chart-text3{
  position: absolute;
  top: 3rem;
  right: 1rem;
  border-bottom: 2px solid #4283F2;
}
.lc2-chart-text3:before{
  position: absolute;
  bottom: 0;
  left: -5px;
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #4283F2;
}
.lc2-chart-text4{
  position: absolute;
  top: 12rem;
  right: 1rem;
  border-bottom: 2px solid #FED750;
}
.lc2-chart-text4:before{
  position: absolute;
  bottom: 0;
  left: -5px;
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #FED750;
}

.dv-active-ring-chart .active-ring-info{
	display: none !important;
}

.cc-header{
  position: relative;
  width: 100%;
  /*height: 30rem;*/
  height: 100%;
}
.cc-header h4{
  text-align: center;
  font-size: 2.2rem;
  font-family: Adobe Heiti Std;
  font-weight: normal;
  color: #28F7FF;
}
.cc-header-zong{
    text-align: center;
    width: 40rem;
    margin: 0.5rem auto;
    height: 8rem;
    line-height: 7.6rem;
    font-size: 3rem;
    font-family: Adobe Heiti Std;
    font-weight: bold;
    color: #FCFF00;
}

.cc-header-ball{
  position: absolute;
  width: 16rem;
  height: 16rem;
  top: 13rem;
  left: calc(50% - 8rem);
  animation: example 40s infinite linear;
  z-index: 999;
}
@keyframes example {
  from {transform: rotate(0);}
  to {transform: rotate(360deg);}
}
.cc-header-phone{
  position: absolute;
  width: 10rem;
  top: 5.5rem;
  left: calc(50% - 5rem);
  z-index: 9999;
}
.cc-header-light{
  position: absolute;
  width: 64rem;
  /*height: 21rem;*/
  top: 9rem;
  left: calc(50% - 32rem);
  z-index: 99;
}
.cc-middle-circular{
  position: absolute;
  width: 66rem;
  top: 15rem;
  left: calc(50% - 33rem);
  z-index: 9;
}
.cc-middle-mountain{
  position: absolute;
  width: 55rem;
  top: 29.5rem;
  height: 22.4rem;
  left: calc(50% - 27.5rem);
  z-index: 8;
  animation: example1 4s infinite linear;
}
/*@keyframes example1 {
  from {transform: rotate(0);}
  to {transform: rotateZ(90deg);}
}*/
@keyframes example1 {
  0% {height: 22.4rem;}
  25% {height: 22rem;}
  50% {height: 21.5rem;}
  75% {height: 22rem;}
  100% {height: 22.4rem;}

  /*25% {transform: translateY(-20px);}
  50% {transform: translateY(-40px);}
  75% {transform: translateY(-30px);}
  100% {transform: translateY(0px);}*/
}
.cc-foot-beam{
  /* position: absolute;
  width: 135rem;
  top: 33rem;
  left: -40rem;
  z-index: 8; */
  left: -1.8%;
  position: absolute;
    width: 100%;
    /* top: 33
rem
; */
    /* left: -40
rem
; */
    z-index: 8;
    bottom: -30%;
}
.cc-details{
  width: 100%;
  position: absolute;
  top: 28rem;
  z-index: 999999;
  text-align: center;
}
.cc-details-list{
    float: left;
    width: 33%;
  }
.cc-details-icon{
  width: 4rem;
}
.cc-details-name{
  font-size: 1.8rem;
  font-family: Adobe Heiti Std;
  font-weight: normal;
  color: #28F7FF;
  letter-spacing: 1px;
}
.cc-details-num{
  font-size: 2.6rem;
  font-family: Adobe Heiti Std;
  font-weight: bold;
  color: #FCFF00;
  letter-spacing: 0px;
}
.cc-details-list:nth-child(2){
  padding-top: 3rem;
}

.cc-details-list.zjh{
  position: absolute;
  top: 16rem;
  z-index: 9999;
  width: 40%;
  left: 0;
  text-align: center;
}
.cc-details-list.ztd{
  position: absolute;
  top: 16rem;
  z-index: 9999;
  width: 40%;
  right: 0;
  text-align: center;
}

.cc-details-list.jybs{
  position: absolute;
  top: 26rem;
  z-index: 9999;
  width: 35%;
  left: 15%;
  text-align: center;
}
.cc-details-list.tjjy{
  position: absolute;
  top: 26rem;
  z-index: 9999;
  width: 35%;
  right: 15%;
  text-align: center;
}
.centerChart{
  height: 100%;
}
.mainFoot{
  position: absolute;
  top: 53%;
  /*bottom: 9.5%;*/
  height: 37.5%;
  z-index: 999;
}