@charset "UTF-8";
.box {
  /*background: url("../image/visual/visual-bg.jpg") no-repeat center top;*/
  background-color: #073f7d;
  background-size: cover;
  margin: 0;
  font: normal 1vh/1.2 "Microsoft YaHei UI", sans-serif;
}
.title {
  display: flex;
  height: 10vh;
}
.title-left {
  flex: 1 40%;
  height: 100%;
  background: url("../image/visual/left-title.png") no-repeat right center;
  background-size: 100% 100%;
}
.title-middle {
  display: flex;
  flex: 0 20%;
  width: 20%;
  height: 100%;
  line-height: 100%;
  font-weight: normal;
  margin: 0;
  color: #fff;
  font-size: 26px;
  align-items: center;
  justify-content: center;
  letter-spacing: 2px;
}
.title-right {
  flex: 1 40%;
  height: 100%;
  background: url("../image/visual/right-title.png") no-repeat left center;
  background-size: 100% 100%;
}
.data-item-01,
.data-item-04,
.data-item-05-1,
.data-item-05 {
  position: relative;
  padding: 8% 10%;
  box-sizing: border-box;
  background: url("../image/visual/data-01.png") no-repeat center center;
  height: 8.5vh;
  width: 100%;
}
.data-item-01 {
  background: url("../image/visual/data-01.png") no-repeat center center;
  background-size: 100% 100%;
}
.data-item-04 {
  background: url("../image/visual/data-04.png") no-repeat center center;
  background-size: 100% 100%;
}
.data-item-05 {
  background: url("../image/visual/data-05.png") no-repeat center center;
  background-size: 100% 100%;
}

.data-item-05-1 {
  background: url("../image/visual/data-06.png") no-repeat center center;
  background-size: 100% 100%;
}

.data-item-02,
.data-item-03 {
  padding: 8% 0;
  box-sizing: border-box;
  height: 100%;
  max-height: 115px;
  width: 257px;
}
.data-item-02 {
  background: url("../image/visual/data-02.png") no-repeat center center;
  background-size: 100% 100%;
}
.data-item-03 {
  background: url("../image/visual/data-03.png") no-repeat center center;
  background-size: 100% 100%;
}
.count-01,
.count-02,
.count-03 {
  height: 100%;
  width: 60%;
  margin: 0 10% 0 40%;
}
.count-01 td,
.count-02 td,
.count-03 td {
  text-align: center;
  color: #fff;
  font-size: 2.7vh;
}
.count-01 td {
  background: url("../image/visual/grid-01.png") no-repeat center top;
  background-size: 100% 100%;
}
.count-02 td {
  background: url("../image/visual/grid-02.png") no-repeat center top;
  background-size: 100% 100%;
}
.count-03 td {
  background: url("../image/visual/grid-03.png") no-repeat center top;
  background-size: 100% 100%;
}
.count-title {
  position: absolute;
  bottom: 5%;
  font-size: 1.2vh;
  font-weight: normal;
  right: 15%;
  color: #70c5f7;
  margin: 0;
}
.data-item-06 {
  height: 100%;
  width: 100%;
  background: url("../image/visual/light-01.png") no-repeat center top, url("../image/visual/light-02.png") no-repeat center bottom;
}
.data-item-07 {
  background-color: #00000020;
  border: 1px solid #3566d6;
  position: relative;
  padding: 0px;
}
.arrow {
  position: absolute;
  width: 3vh;
  height: 3vh;
  border-left: 0.3vh solid #609df9;
  border-top: 0.3vh solid #609df9;
}
.count-title-02 {
  text-align: center;
  line-height: 36px;
  font-size: 14px;
  font-weight: normal;
  color: #fff;
  margin: 0;
}
.count-04 {
  height: calc(100% - 36px);
  width: 100%;
}
.count-04 td {
  text-align: center;
}
.data-label {
  color: #fff;
  font-size: 1.5vh;
  font-weight: normal;
  text-align: center;
}
.data-01,
.data-02,
.data-03,
.data-04,
.data-05,
.data-06 {
  color: #fff;
  width: 11vh;
  height: 11vh;
  font-size: 2vh;
  display: flex;
  justify-content: center;
  align-items: center;
}
.data-01 {
  background: url("../image/visual/orange.png") no-repeat center center;
  background-size: 100% 100%;
}
.data-02 {
  background: url("../image/visual/yellow.png") no-repeat center center;
  background-size: 100% 100%;
}
.data-03 {
  background: url("../image/visual/green.png") no-repeat center center;
  background-size: 100% 100%;
}

.data-04 {
  background: url("../image/visual/cyan.png") no-repeat center center;
  background-size: 100% 100%;
}
.data-05 {
  background: url("../image/visual/blue.png") no-repeat center center;
  background-size: 100% 100%;
}
.data-06 {
  background: url("../image/visual/deepblue.png") no-repeat center center;
  background-size: 100% 100%;
}

@-webkit-keyframes spin {
  from {
    -webkit-transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
  }
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes no-spin {
  from {
    transform: rotate(360deg);
  }
  to {
    transform: rotate(0deg);
  }
}


.run-bg {
  -webkit-animation: spin 1s linear 1s 1 alternate;
  animation: spin 1s linear infinite;
}

.no-run-bg {
  -webkit-animation: no-spin 1s linear 1s 1 alternate;
  animation: no-spin 1s linear infinite;
}


.data-item-08 {
  height: 100%;
  max-height: 330px;
  width: 85%;
  background-color: #00000020;
  border: 1px solid #3566d6;
  position: relative;
}
.data-item-09 {
  width: 100%;
  background: url("../image/visual/light-03.png") no-repeat center top, url("../image/visual/light-04.png") no-repeat center bottom;
  background-size: 100% 50%;
}
.data-item-10 {
  height: 100%;
  max-height: 565px;
  width: 100%;
  max-width: 547px;
}
.center {
  text-align: -webkit-center;
}
.footer {
  color: rgba(255, 255, 255, 0.3);
  text-align: right;
  box-sizing:  border-box;
  padding-right: 30px;
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 40px;
  line-height: 40px;
}

.chart-row {
  margin-bottom: 3vh;
}

.chart-item {
  height: 30vh;
}

.chart-item-half {
  height: 15vh;
}

.chart-area {
  padding: 1vh;
}

.chart-map {
  height:75vh;
}

.project-charts {
  text-align: center;
  font-size: 12px;
  width: 100%;
  height: 5vh;
}

.report-area {
  padding: 2vh 10vh 0 10vh;
  margin-top: 1vh;
}