* {
  padding: 0 0;
  margin: 0 0;
  font-family: SourceHanSansCN;
}

[v-cloak] {
  display: none !important;
}

html,
body {
  width: 100vw;
  height: 100vh;
}

html {
  font-size: 62.5%;
}

body {
  overflow: hidden;
  background: url(../images/bg.png) no-repeat;
  background-size: 100% 100%;
  background-position: center;
  /* background: url(../images/bg.png) repeat-y; */
}

h3 {
  font-size: 4rem;
  font-family: SourceHanSansCN;
  font-weight: 500;
  color: #FFFFFF;
  line-height: 3.75rem;
  background: linear-gradient(0deg, #1B4CC2 0%, #05DCF8 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-align: center;
  padding-top: 1rem;
}

/* h3:before {
  content: attr(text);
  position: absolute;
  z-index: 10;
  color: #BCBCBC;
  -webkit-mask: linear-gradient(to bottom, #04123C, transparent);
} */

.subTitle {
  font-size: 2rem;
  font-family: SourceHanSansCN;
  font-weight: 300;
  color: #BDEEFC;
  line-height: 1.34rem;
  background: url(../images/titleLine.png) no-repeat;
  background-position: top;
  text-align: center;
  height: 5rem;
  line-height: 4.5rem;
}




.left .part,
.right .part {
  width: 100%;
  background: url(../images/bgTop.png), url(../images/partBg.png), url(../images/bgBottom.png);
  background-repeat: no-repeat, no-repeat;
  background-size: 100%;
  background-position: left top, center, left bottom;
  overflow: hidden;
}
.center {
  position: relative;
  height: 100%;
  width: 50%;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-content: center;
  /* align-items: center; */
}

#container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}

.content {
  width: 100%;
  padding: 0 2.5rem;

  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  /* margin-top: 11rem; */
}

.left,.right {
  /* flex: 1; */
  width: 25%;
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: calc(100vh - 12rem);
  flex-direction: column;
}




#lineChart,
#lineChart10,
#piePeople,
#bottomlineChart {
  height: 190px;
  width: 100%;
}

#lineChart10 {
  transform: scale(1.1);
}

#piePeople {
  width: 100%;
  height: 20rem;
}

#bottomlineChart {
  height: 240px;
}

.blockDiv {
  height: auto;
  padding: 1rem 2rem;
}
.roll .name {
  width: 15%;
}
.roll .sex {
  width: 15%;
}
.roll .age {
  width: 12%;
}
.roll .item {
  width: 40%;
}
.roll .date {
  width: 20%;
}
.m-t15 {
  margin-top: 1.5rem;
}

.fl {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  flex: 1;
  margin-top: 1rem;
  margin-bottom: 1rem;
  padding-left: 1rem;
}

.wrapper {
  color: #ffffffbf;
  margin-top: 1.8rem;
  display: flex;
  width: 100%;

  justify-content: center;
  align-items: center;
}

.carname {
  display: inline-block;
  width: 30%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 1.4rem;
  vertical-align: middle;
}

.progress1 {
  color: #fff;
}

progress {
  border-radius: 0.2rem;
  background: #26419940;
  flex: 1;
  vertical-align: middle;
  height: 0.58rem;
}

progress::-webkit-progress-bar {
  border-radius: 0.2rem;
  background: #26419940;

}

.progress1::-webkit-progress-value,
.progress2::-webkit-progress-value,
.progress3::-webkit-progress-value,
.progress4::-webkit-progress-value,
.progress5::-webkit-progress-value {

  background: linear-gradient(#0167E8 0, #12ABE8 75%);

  border-radius: 0.2rem;
}


.box {
  position: relative;
  width: 100%;
  overflow: hidden;
  color: #fff;
  height: 10rem;  
}


@keyframes roll {
  0%{
    transform: translateY(0px);
  }
  100%{
    transform: translateY(-50%);
  }
}

.col1{
  width: 100%;
  padding-bottom: 0;
  animation: roll 8s linear infinite;
}


.col1 li:nth-child(even) {
  background: rgba(13, 52, 125, 0.66);
}

.ulTitle {
  display: flex;
  margin-top: 0rem;
  height: auto;
  background: rgba(120, 179, 255, 0.3);
}

.ulTitle li {
  width: 18%;
  color: #07DBFF;
  list-style: none;
  text-align: center;
  height: 3rem;
  line-height: 3rem;
  font-size: 1.4rem;
}

#box li {
  line-height: 2.8rem;
  list-style: none;
  color: #BDEEFC;
  display: flex;
  justify-content: space-between;
}

.box li span {
  text-align: center;
  width: 18%;
}

.box .date,
.ulTitle .date {
  flex: 1
}


.centerTop {
  width: 80%;
  display: flex;
 
  background: url(../images/centerBg.png) no-repeat;
  background-size: 100% 100%;
  text-align: center;
  margin: 0 auto;
}

.centerTop .flex1 {
  flex: 1;
  padding-top: 1rem;
}



.items {
  font-size: 1.6rem;
  color: #8FF0FF;
  line-height: 35px;
  padding-bottom: 5px;
}

.itemNumber {
  width: 147px;
  font-size: 3rem;
  font-weight: 800;
  color: #FEF00A;
  overflow: hidden;
  line-height: 64px;
  height: 50px;
}

.f {
  display: flex;
  flex-direction: row;
}

.xc {
  justify-content: center;
}

.xa {
  justify-content: space-around;
}

.xb {
  justify-content: space-between;
}

.fw {
  flex-wrap: wrap;
}

.box-item {
  margin: 12px auto 0;
  position: relative;
  font-size: 3rem;
  font-weight: 800;
  color: #FEF00A;
  line-height: 50px;
  text-align: center;
  list-style: none;
  writing-mode: vertical-lr;
  text-orientation: upright;
  /*文字禁止编辑*/
  -moz-user-select: none;
  /*火狐*/
  -webkit-user-select: none;
  /*webkit浏览器*/
  -ms-user-select: none;
  /*IE10*/
  -khtml-user-select: none;
  /*早期浏览器*/
  user-select: none;
  /* overflow: hidden; */

}

/* 默认逗号设置 */

.mark-item {
  width: 10px;
  height: 100px;
  margin-right: 5px;
  line-height: 10px;
  font-size: 48px;
  position: relative;
}

.mark-item>span {
  position: absolute;
  width: 100%;
  bottom: 0;
  writing-mode: vertical-rl;
  text-orientation: upright;
}

/*滚动数字设置*/
.number-item {
  text-align: center;
  width: 33px;
  height: 36px;
  list-style: none;
  /* margin-right: -5px; */
  /* background: url(./number-bg.png) no-repeat center center;
  background-size: 100% 100%; */
  border-radius: 4px;
  position: relative;
  margin-right: -6px;
}

.number-item>span {
  position: relative;
  display: inline-block;
  width: 100%;
  height: 100%;
  writing-mode: vertical-rl;
  text-orientation: upright;
  overflow: hidden;
}

.number-item i {
  width: 35px;
  position: absolute;
  top: 2px;
  left: 50%;
  transform: translate(-50%, 0%);
  transition: transform 1s ease-in-out;
  letter-spacing: 10px;
  color: #FEF00A;
}

.number-item:last-child {
  margin-right: 0;
}




#map {
  position: relative;
  height: calc(100% - 30rem);
  margin-top: 3rem;
}

.carNumber {
  display: inline-block;
  width: 20%;
  text-align: right;
  font-size: 1.4rem;
}

#waterChart,
#waterChart1 {
  height: 16rem;
  display: inline-block;
  width: 16rem;
}

.waterSDiv {
  height: 20rem;
  text-align: right;
  padding-right: 4rem;
}

.leftBottom {
  display: inline-block;
}

.colorWhite {
  color: #fff;
  text-align: center;
  padding-left: 2rem;
  font-size: 1.4rem;
  margin-top: -3rem;
}

.banner {
  width: 100%;
  display: flex;
  padding:0 2.5rem;
  justify-content: space-between;
  align-items: center;
  height: 11rem;
  /* float: left; */
  color: linear-gradient(0deg, #1B4CC2 0%, #05DCF8 100%);
  background-image: url(../images/centerBg1.png);
  background-repeat: no-repeat;
  background-size: 100%;
  background-size: 100% 16rem;
  background-position: top;
}

.banner span {
  font-size: 3rem;
  color: #2AA7D3;
  /* color: #6a938e; */
  padding: 5px;
  padding-right: 15px;
}
.weatherTxt {
  font-size: 3rem;
  color: #2AA7D3;
  padding: 5px;
}
.banner .leftbanner,
.banner .rightbanner {
  width: 25%;
  display: flex;
  justify-content: space-around;
  flex-wrap: nowrap;
  align-items: center;
}


.banner .leftbanner>img {
  margin-right: 30px;
}

.banner .rightbanner {
  justify-content: flex-end;
}

.banner .rightbanner .cityweather {
  width: 60px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin: 10px;
}

.mt-10 {
  margin-top: -10px;
}
.rightbanner .weathercondition {
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.rightbanner .temperature {
  font-size: 35px;
}
.rightbanner .tempcondition  div {
 margin-bottom: 5px;
}
.rightbanner .windcondition,
.rightbanner .tempcondition,
.rightbanner .windcondition {
  width: 23%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  margin: 10px;
}


.maplegend {
  position: absolute;
  top: 25rem;
  left: 5rem;
  background: rgba(45, 173, 255, 0.24);
  padding: 0 35px;
  border-radius: 4px;
}

.maplegend .li {
  position: relative;
  list-style: none;
  color: #fff;
  font-size: 2rem;
  font-family: Adobe Heiti Std;
  font-weight: normal;
  color: #8FF0FF;
  line-height: 40px;
}

.maplegend .li span {
  letter-spacing: 4px;
}



.maplegend .li ::before {
  content: '';
  position: absolute;
  width: 10px;
  height: 10px;
  top: 16px;
  left: -10px;
  border-radius: 50%;
}

.maplegend .li:nth-child(1) ::before {
  content: '';
  background: #3AC7F6;
}

.maplegend .li:nth-child(2) ::before {
  content: '';
  background: #FABCBC;
}

.maplegend .li:nth-child(3) ::before {
  content: '';
  background: #F1BCFA;
}

.maplegend .li:nth-child(4) ::before {
  content: '';
  background: #D5FABC;
}

.maplegend .li:nth-child(5) ::before {
  content: '';
  background: #D2BCFA;
}

.lead {
  margin: 0 12px;
}

.percent {
  display: flex;
  justify-content: space-around;
  text-align: center;
  margin-top: -15px;
  color: #FFFFFF;
}

.bar {
  /*小圆环的颜色*/
  width: 21px;
  height: 21px;
  border-radius: 50%;
  background-color: red;
}

.progressfun {
  display: flex;
  align-items: center;
  flex: 1;
  width: 60%;
}


#circleSign {
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.w100 {
  width: 100%;
}
.tc {
  text-align: center;
}
#circleSign .circle {
  width: 100%;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  color: #BDEEFC;
  font-size: 20px;
}

.circlenumber :first-of-type {
  color: orange;
}

.progressfun {
  width: 200px;
  height: 10px;
  background: #264199;
  border-radius: 5px;
  line-height: 10px;
}

.progressfun .bar {
  width: 90%;
  height: 10px;
  background: linear-gradient(90deg, #0167E8, #12ABE8);
  box-shadow: 0px 8px 10px 0px rgba(168, 117, 221, 0.32);
  border-radius: 5px;
}

.progressfun .bar .spot {
  float: right;
  margin-top: -3px;
  width: 15px;
  height: 15px;
  background: radial-gradient(#7ed1e2 10%, #83d0e5 80%);
  box-shadow: 1px 1px 20px 7px rgb(169 213 238 / 80%);
  border-radius: 50%
}