.homePage {
  width: 100%;
  /* height: 100vh; */
  background: url(/homeBg.png) center center no-repeat;
  background-color: #163f88;
}

.homePage .header {
  width: 100%;
  height: 100px;
  background: url(/headerBg.png) center center no-repeat;
  background-size: 100% 100%;
  position: relative;
}

.homePage .header .time {
  font-size: 16px;
  color: #70d7fd;
  padding: 26px 0 0 3%;
}

.homePage .header .home {
  font-size: 16px;
  color: #00ffc0;
  position: absolute;
  top: 20%;
  left: 22%;
}

.homePage .header .province {
  font-size: 16px;
  color: #00ffc0;
  position: absolute;
  top: 19%;
  right: 23%;
}

.homePage .header .city {
  font-size: 16px;
  color: #64ebff;
  position: absolute;
  top: 21%;
  right: 14%;
}

.homePage .header .userInfo {
  font-size: 16px;
  color: #70d7fd;
  position: absolute;
  top: 21%;
  right: 3%;
}

.homePage .main {
  display: flex;
  justify-content: space-between;
  padding: 1%;
}

.mainLeftBox {
  width: 24.5%;
}

.mainLeftBox .infoBox {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}

.mainLeftBox .infoBox .info {
  flex: 0 0 50%
}

.mainLeftBox .infoBox .info .infoT {
  font-size: 16px;
  color: #fff;
  display: flex;
  align-items: center;
}

.mainLeftBox .infoBox .info .infoT span:nth-child(1) {
  width: 10px;
  height: 10px;
  display: block;
  margin-right: 5px;
}

.mainLeftBox .infoBox .info .infoB {
  font-size: 18px;
  padding-left: 14px;
}

.mainLeftBox .infoBox .info .color1 {
  background: #007cf3;
}

.mainLeftBox .infoBox .info .color2 {
  background: #ffab13;
}

.mainLeftBox .infoBox .info .color3 {
  background: #ff5050;
}

.mainLeftBox .infoBox .info .color4 {
  background: #4dffd1;
}

.mainLeftBox .infoBox .info .infoB1 {
  color: #007cf3;
}

.mainLeftBox .infoBox .info .infoB2 {
  color: #ffab13;
}

.mainLeftBox .infoBox .info .infoB3 {
  color: #ff5050;
}

.mainLeftBox .infoBox .info .infoB4 {
  color: #4dffd1;
}

.mainCenterBox {
  width: 50%;
}

.mainCenterBox .headerList {
  display: flex;
  justify-content: space-between;
  color: #FFF;
}

.mainCenterBox .headerList .box {
  width: 19%;
  background: url(/mainCenterBoxBg1.png) center center no-repeat;
  background-size: 100% 100%;
  padding: 10px 0 10px 10px;

}

.mainCenterBox .headerList .box P {
  font-size: 16px;
  margin-bottom: unset;
}

.mainCenterBox .headerList .box P span {
  font-size: 32px;
  margin-right: 5px;
}

.mainCenterBox .headerListB {
  margin-top: 10px;
  display: flex;
  justify-content: space-between
}

.mainCenterBox .headerListB .box {
  width: 19%;
  display: flex;
  align-items: center;
  background: url(/mainCenterBoxBg2.png) center center no-repeat;
  background-size: 100% 100%;
  padding: 10px 0 10px 10px;
}

.mainCenterBox .headerListB .box img {
  width: auto;
  height: 100%;
}

.mainCenterBox .headerListB .box .boxR {}

.mainCenterBox .headerListB .box .boxR p:nth-child(1) {
  font-size: 15px;
  color: #fff;
  margin-bottom: unset;
}

.mainCenterBox .headerListB .box .boxR p:nth-child(2) {
  font-size: 12px;
  color: #55baff;
  margin-bottom: unset;
}

.mainCenterBox .headerListB .box .boxR span {
  font-size: 20px;
}

.mainCenterBottom {
  width: 100%;
  display: flex;
}

.mainCenterBottom .left {
  width: 50%;
}

.mainCenterBottom .right {
  width: 50%;
}

.mainRightBox {
  width: 24.5%;
}

.mainRightBox .totalNum {
  font-size: 16px;
  color: #fff;
  text-align: center;
}

.mainRightBox .totalNum span {
  color: #7dd1ff;
}