.content {
   width: 100vw;
   height: 100vh;
   display: flex;
   flex-direction: column;
   color: var(--color-text);
}

.background-block {
   position: absolute;
   z-index: 0;
   left: 0;
   width: 100%;
   height: 100%;
   top: 0;
}

.background-img {
   position: absolute;
   z-index: 1;
   left: 0;
   top: 0;
   width: 100%;
   height: 100%;
}

.back-img {
   width: 100%;
   height: 100%;
   object-fit: cover;
}

.back-mask {
   position: absolute;
   z-index: 1;
   left: 0;
   width: 100%;
   height: 100%;
   top: 0;
   opacity: 0.9;
   object-fit: cover;
}

.head-block {
   min-height: 5.81rem;
   display: flex;
   align-items: flex-end;
}

.back{
   position: absolute;
    left: 0;
    top: 0;
    width: 1.5rem;
    height: 1.5rem;
    padding: 0.5rem 1.25rem;
    z-index: 10;
    cursor: pointer;
    box-sizing: content-box;
}

.back-icon{
   object-fit: cover;
   width: 100%;
   height: 100%;
}

.back:hover{
   filter: brightness(.8);
}

.img-head {
   object-fit: fill;
}

.head-content {
   width: 100%;
   display: flex;
   align-items: flex-end;
   justify-content: space-between;
}

.head-center {
   font-size: 2.5rem;
   font-weight: bold;
   color: var(--color-title);
   text-align: center;
   padding-bottom: 0.625rem;
   width: 36%;
}

.head-left,
.head-right {
   width: 30%;
   font-size: 1.4375rem;
   padding: 0 1.25rem;
}

.content-block {
   flex: 1;
   display: flex;
   overflow: hidden;
   padding: 1.25rem;
}

.content-left,
.content-right {
   width: 30%;
   display: flex;
   flex-direction: column;
   overflow: hidden;
}

.content-center {
   width: 40%;
   padding: 0 1.5rem;
   display: flex;
   flex-direction: column;
   overflow: hidden;
}

.instrument-panel {
   display: flex;
   justify-content: space-between;
}

.panel-item {
   overflow: hidden;
   flex: 1;
   height: 6.6875rem;
   background-color: var(--bg-mask);
   display: flex;
   align-items: center;
   padding: 1.125rem 0.625rem 1.125rem 1.125rem;
   margin-bottom: 1.875rem;
}

.panel-item:not(:last-child) {
   margin-right: 1.875rem;
}

.panel-percent {
   margin-right: 1.125rem;
}

.panel-info {
   overflow: hidden;
   display: flex;
   flex-direction: column;
}

.panel-name {
   font-size: 1.3125rem;
   color: var(--color-text);
   margin-bottom: 0.75rem;
}

.panel-value {
   font-size: 1.25rem;
   color: var(--color-title);
}

.circle {
   width: 4rem;
   height: 4rem;
   border-radius: 50%;
   box-shadow: inset 0 0 0 0.5625rem #2786C7;
}

.circle .ab {
   position: absolute;
   left: 0;
   right: 0;
   top: 0;
   bottom: 0;
   margin: auto;
}

.circle_left {
   border: 0.5625rem solid #E8E8E8;
   border-radius: 50%;
   clip: rect(0, 2rem, 4rem, 0);
}

.circle_right {
   border: 0.5625rem solid #E8E8E8;
   border-radius: 50%;
   clip: rect(0, 4rem, 4rem, 2rem);
}

.circle_text {
   height: 100%;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   color: var(--color-text);
   font-size: 1.25rem;
}

.histogram {
   background-color: var(--bg-mask);
   padding: 0.625rem;
   width: 100%;
   flex: 0.9;
   margin-bottom: 1.875rem;
   display: flex;
   flex-direction: column;
}

#histogram-chart {
   width: 100%;
   height: 100%;
}

.structural-information {
   width: 100%;
   flex: 1.2;
   overflow: hidden;
}

.info-top {
   max-width: 100%;
   object-fit: fill;
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
}

.info-right {
   max-height: 100%;
   object-fit: fill;
   position: absolute;
   top: 0;
   bottom: 0;
   right: 0;
}

.info-bottom {
   max-width: 100%;
   object-fit: fill;
   position: absolute;
   left: 0;
   bottom: 0;
   right: 0;
}

.info-left {
   height: 100%;
    width: 2.3125rem;
   object-fit: fill;
   position: absolute;
   bottom: 0;
   left: 0;
   top: 0;
}

.structural.info-top {
   max-width: calc(100% - 3.25rem);
   left: 2.625rem;
   height: 0.25rem;
}

.structural.info-right {
   width: 0.25rem;
}

.structural.info-bottom {
   max-width: calc(100% - 0.125rem);
   left: 0.125rem;
   height: 0.25rem;
}

.structural-info .structural-item {
   position: absolute;
}

.structural-img {
   position: absolute;
   width: 7.4375rem;
   height: 7.4375rem;
}

.structural-item {
   display: inline-flex;
   flex-direction: column;
}

.structural-title {
   font-size: 1rem;
   line-height: 1.5rem;
   margin-bottom: 0.25rem;
}

.structural-text {
   font-size: 0.75rem;
   line-height: 15px;
}

.structural-img.structural1 {
   left: 11.8125rem;
   top: 1.0625rem;
}

.structural-item.structural1 {
   left: 19.625rem;
   width: 14.3125rem;
   top: 0.625rem;
}

.structural-img.structural2 {
   left: 5.5rem;
   top: 4.75rem;
}

.structural-item.structural2 {
   left: 0.5rem;
   width: 7.375rem;
   top: 6.125rem;
}

.structural-img.structural3 {
   left: 5.5rem;
   top: 12.125rem;
}

.structural-item.structural3 {
   left: 0.6875rem;
   width: 11.75rem;
   top: 17.125rem;
}

.structural-img.structural4 {
   left: 11.8125rem;
   top: 15.9375rem;
}

.structural-item.structural4 {
   left: 18.4375rem;
   width: 15.5rem;
   top: 20.5625rem;
}

.structural-img.structural5 {
   left: 18.3125rem;
   top: 12.1875rem;
}

.structural-item.structural5 {
   left: 25.8125rem;
   width: 9.25rem;
   top: 13.5625rem;
}

.structural-img.structural6 {
   left: 18.125rem;
   top: 4.8125rem;
}

.structural-item.structural6 {
   left: 25.75rem;
   width: 8.625rem;
   top: 6.6875rem;
}

.map-block {
   width: 100%;
   flex: 1;
   min-height: 39vh;
   display: flex;
   justify-content: center;
   align-items: center;
   overflow: hidden;
}

.enumeration {
   position: absolute;
   right: 1.875rem;
   top: 1.875rem;
   color: var(--color-tips);
}

.enum1,
.enum2 {
   display: flex;
   align-items: center;
   padding: 0.25rem 0;
}

.enum1::before,
.enum2::before {
   content: '';
   display: inline-block;
   width: 1.125rem;
   height: 1.125rem;
   border-radius: 50%;
   margin-right: 0.625rem;
}

.enum1::before {
   background-color: #EC485D;
}

.enum2::before {
   background-color: #15C920;
}

.map-content{
   max-height: 100%;
   max-width: 100%;
}

.map-img {
   object-fit: cover;
   width: 95%;
   height: 95%;
   max-height: calc(45vh - 5.8125rem);
   max-width: 100%;
}

.map-points {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
}

.point {
   width: 2.25rem;
   height: 2.25rem;
   transform: translate3d(-25%, -88%, 0) rotateZ(14deg);
   position: absolute;
}

.pie-chart-block {
   width: 100%;
   flex: .6;
   margin-bottom: 1.25rem;
   display: flex;
   flex-direction: column;
}

#pie-chart {
   width: 100%;
   height: 100%;
}

.pie-chart-title {
   position: absolute;
   left: 1.875rem;
   top: 1.875rem;
   line-height: 1.5625rem;
   font-size: 1.125rem;
   color: #02AEEE;
}

.cooperation-area {
   width: 100%;
   flex: 1;
   overflow: hidden;
   display: flex;
   padding: 1.25rem;
   flex-direction: column;
}

.cooperation-area-content-head{
   transform: translateY(0.125rem);
}
.cooperation-area-content {
   display: flex;
   flex-direction: column;
   overflow: hidden;
}

.cooperation-area-content-head table,
.cooperation-area-content table {
   width: 100%;
   table-layout: fixed;
   word-wrap: break-word;
}

.cooperation-area-content-head td,
.cooperation-area-content td {
   flex: 1;
   overflow: hidden;
   padding: 0.625rem;
   text-align: center;
   background-color: var(--bg-mask);
   font-size: 1.25rem;
   line-height: 1.8125rem;
   white-space: nowrap;
   text-overflow: ellipsis;
}

.cooperation-area-content-head .table-title td,
.cooperation-area-content .table-title td {
   font-size: 1.4375rem;
   line-height: 2.0625rem;
}

.introduce {
   width: 100%;
   flex: .8;
   overflow: hidden;
   margin-bottom: 1.25rem;
}

.introduce-content {
   padding: 0.75rem;
   display: flex;
   height: 100%;
   flex-wrap: wrap;
}

.introduce-item {
   width: 33.33%;
   height: 50%;
   display: flex;
   flex-direction: column;
   padding: 1rem;
   overflow: hidden;
   background: linear-gradient(rgba(26, 122, 188, .8), rgba(26, 122, 122, 0));
}

.introduce-item img {
   object-fit: cover;
}

.introduce-info{
   width: 100%;
}

.introduce-title {
   font-size: 1rem;
    line-height: 16px;
    min-height: 16px;
    margin-bottom: 0.5rem;
    display: block;
    text-indent: 0.75rem;
    overflow: hidden;
}

.introduce-text {
   font-size: 0.75rem;
   line-height: 16px;
   text-indent: 0.75rem;
}

.history {
   width: 100%;
   min-height: 8.375rem;
   overflow: hidden;
}

.history .background-block {
   left: 0.1875rem;
}

.history-content {
   display: flex;
   height: 100%;
   align-items: center;
   justify-content: space-evenly;
}

.history-item {
   overflow: hidden;
   display: flex;
   align-items: center;
}

.history-icon {
   padding: 0 0.625rem 0 1.875rem;
   margin-bottom: 2.5rem;
   height: 4.25rem;
   display: flex;
   flex-direction: column;
   justify-items: center;
   align-items: center;
}

.history-icon::before {
   content: '';
   display: inline-block;
   width: 1.875rem;
   min-height: 1.75rem;
   border-radius: 50%;
   background: radial-gradient(#69c0ea, rgba(26, 122, 122, 0));
}

.history-icon::after {
   content: '';
   display: inline-block;
   width: 0.125rem;
   height: 100%;
   background-color: rgba(105, 192, 234, .67);
}

.history-info {
   flex: 1;
}

.history-text {
   font-size: 0.8125rem;
   line-height: 19px;
}

.history-date {
   padding-top: 0.9375rem;
   font-size: 1.125rem;
   line-height: 18px;
}

.history-line {
   position: absolute;
   left: 1.875rem;
   right: 1.875rem;
   width: calc(100% - 3.75rem);
   top: 4.625rem;
   height: 0.375rem;
}

.history-text,
.introduce-info,
.structural-item,
.structural-info span,
.structural-info {
   transform-origin: 0 0;
   -moz-transform-origin: 0 0;
   -webkit-transform-origin:0 0;
   -o-transform-origin:0 0;
   transform: scale(1);
}

@media only screen and (max-width: 1500px) {
   .structural-info{
      transform: scale(.99);
   }
   .history-text{
      transform: scale(.9);
      width: 112%;
   }
   .introduce-info{
      transform: scale(.9);
      width: 112%;
   }
   .structural-item.structural1{
      width: 15.5rem;
      transform: scale(.9);
   }
   .structural-item.structural2{
      width: 8.5rem;
      transform: scale(.9);
   }
   .structural-item.structural3{
      width: 12.5rem;
      transform: scale(.9);
   }
   .structural-item.structural4{
      width: 19rem;
      transform: scale(.9);
   }
   .structural-item.structural5{
      width: 10rem;
      transform: scale(.9);
   }
   .structural-item.structural6{
      width: 9.6rem;
      transform: scale(.9);
   }
}

@media only screen and (max-width: 1400px) {
   .structural-info{
      transform: scale(.98);
   }
   .history-text{
      transform: scale(.85);
      width: 118%;
   }
   .introduce-info{
      transform: scale(.8);
      width: 128%;
   }
   .structural-item.structural1{
      width: 17.5rem;
      transform: scale(.8);
   }
   .structural-item.structural2{
      width: 9rem;
      transform: scale(.8);
   }
   .structural-item.structural3{
      width: 15rem;
      transform: scale(.8);
   }
   .structural-item.structural4{
      width: 21rem;
      transform: scale(.8);
   }
   .structural-item.structural5{
      width: 12rem;
      transform: scale(.8);
   }
   .structural-item.structural6{
      width: 11.6rem;
      transform: scale(.8);
   }
}

@media only screen and (max-width: 1200px) {
   .structural-info{
      transform: scale(.97);
   }
   .history-text{
      transform: scale(.8);
      width: 122%;
   }
   .introduce-info{
      transform: scale(.7);
      width: 152%;
   }
   .structural-item.structural1{
      width: 19.5rem;
      transform: scale(.7);
   }
   .structural-item.structural2{
      width: 9rem;
      transform: scale(.7);
   }
   .structural-item.structural3{
      width: 15.5rem;
      transform: scale(.7);
   }
   .structural-item.structural4{
      width: 23rem;
      transform: scale(.7);
   }
   .structural-item.structural5{
      width: 14rem;
      transform: scale(.7);
   }
   .structural-item.structural6{
      width: 13.6rem;
      transform: scale(.7);
   }
}