* {
  padding: 0 0;
  margin: 0 0;
  font-family: "PingFang SC",miui,system-ui,-apple-system,BlinkMacSystemFont,Helvetica Neue,Helvetica,sans-serif;
}

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

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

html {
  font-size: 62.5%;
}

body {
  overflow: hidden;
  background: url('../images/bg.png');
  background-color:#000b3b;
  /* linear-gradient(rgba(0,11,59,0.4), rgba(0,11,59, 0.5)), */
  background-size: 100%;
  background-position: center;
  background-repeat: no-repeat;
}

h3 {
  letter-spacing: 3px;
  font-size: 4rem;
  font-family: SourceHanSansCN;
  font-weight: 500;
  color: #ffffff;
  text-align: center;
  text-shadow: 0 0 2px #fff,
              0 0 10px #2173ff,
              0 0 15px #2173ff,
              0 0 25px #2173ff;
}

.subTitle {
  font-size: 2rem;
  font-weight: 300;
  color: #bdeefc;
  line-height: 1.34rem;
  background: url(../images/titleLine2.png) no-repeat;
  background-position: center 30%;
  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%;

  /* 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;
}
#oldPeopleLine {
  width: 100%;
  height: 18rem;
}

#bottomlineChart {
  height: 240px;
}

.blockDiv {
  height: auto;
  padding: 1rem;
}

.blockDiv .oldMedical {
  color: #98d7f6;
  display: flex;
  justify-content: space-around;
  background-image: linear-gradient(
    to bottom right,
    rgba(6, 60, 146, 0.3),
    rgba(120, 179, 255, 0.3)
  );
  border-radius: 10px;
  width: 100%;
}
.blockDiv .oldMedical .box1 {
  padding: 5px 2px;
  text-align: center;
  width: 33%;
  font-size: 13px;
}
.blockDiv .oldMedical .box1 .numbox {
  font-size: 20px;
  color: #e1bd84;
}
.blockDiv .oldMedical .box1:nth-child(2) {
  border-left: 1px solid #0088c6;
  border-right: 1px solid #0088c6;
}
.box {
  position: relative;
  width: 100%;
  overflow: hidden;
  color: #fff;
  height: 10rem;
}


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

.f {display: flex;}
.fr{flex-direction: row;} .fc{flex-direction: column;}
.rw{flex-direction: row; flex-wrap: wrap;} .rn{flex-direction: row;flex-wrap: nowrap;}
.cw{flex-direction: column;flex-wrap: wrap;} .cn{flex-direction: column; flex-wrap: nowrap;}
.f1{flex: 1;} .f2{flex: 2;} .f3{flex: 3;} .f4{flex: 4;}
.yc{align-items: center;} .ac{align-content: center;}
.xc {justify-content: center;} .xa {justify-content: space-around;} .xb {justify-content: space-between;} .xs{justify-content: flex-start;} .xe{justify-content: flex-end;}
.w100 {width: 100%;}
.h18r{height: 18rem;}
.tc {text-align: center;}
.fs14r{font-size: 1.4rem;} .fs16r{font-size: 1.6rem;} .fs18r{font-size: 1.8rem;}  .fs20r{font-size: 2rem;} 
.gf{color: #fff;} .gFFC23D{color: #ffc23d;} .gBDEEFC{color: #bdeefc;} .g07DBFF{color: #07DBFF;}
.bgt{background:transparent;} .bg5624FA{background-color: rgba(86,36,250,0.3);} .bg78B3FF{background-color: rgba(120,179,255,0.3);}
.op8{opacity: 0.8;} .op9{opacity: 0.9;}
.b{font-weight: bold;}
.rel{position: relative} .abs{position: absolute}
.auto{margin: auto;}
.b1r{bottom: 1rem;}
.ml10{margin-left: 10px;} .ml15{margin-left: 15px;} .ml20{margin-left: 20px;} .ml30{margin-left: 30px;}
.mr10{margin-right: 10px;} .mr15{margin-right: 15px;} .mr20{margin-right: 20px;} .mr30{margin-right: 30px;}
.mt2{margin-top: 2px;} .mt3{margin-top: 3px;} .mt5{margin-top: 5px;} .mt10{margin-top: 10px;} .mt20{margin-top: 20px;} .mt30{margin-top: 30px;} .mt50{margin-top: 50px;}
.mb5{margin-bottom: 5px;} .mb10{margin-bottom: 10px;} .mb15{margin-bottom: 15px;} .mb20{margin-bottom: 20px;} .mb30{margin-bottom: 30px;}
.pl5{padding-left: 5px;}
.pr5{padding-right: 5px;}
.pt5{padding-top: 5px;}
.pb5{padding-bottom: 5px;}
.bdr50{border-radius: 50%;}
.bd1{border: 1px solid;} .bd2{border: 2px solid;}
.rds2{border-radius: 2px;} .rds3{border-radius: 3px;} .rds4{border-radius: 4px;} .rds5{border-radius: 5px;} .rds10{border-radius: 10px;}
.bdcf{border-color: #fff;}
.z100{z-index: 100;}
.weatherTxt {
  padding: 5px;
}
.numBg1{background-color: #13D6D3; color: #fff;}
.numBg2{background-color: #DBD33A; color: #fff;}
.numBg3{background-color: #FF9702; color: #fff;}


.box-item {
  position: relative;
  font-size: 4rem;
  font-weight: 800;
  color: #fff;
  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; */
}

/* 默认逗号设置 */

/*滚动数字设置*/
.number-item {
  text-align: center;
  width: 40px;
  height: 60px;
  list-style: none;
  margin-left: 15px;
  position: relative;
  border: 2px solid;
  border-image: linear-gradient(to bottom, #87cefa, #1e90ff) 1;
}

.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: 40px;
  position: absolute;
  top: 10px;
  left: 63%;
  transform: translate(-50%, 0%);
  transition: transform 1s ease-in-out;
  letter-spacing: 30px;
  color: #fff;
}

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

#map {
  position: absolute;
  height: calc(100% - 20rem);
  width: 100%;
  z-index: 1;
}


.banner {
  width: 100%;
  display: flex;
  padding: 0 2.5rem;
  justify-content: space-between;
  align-items: center;
  height: 8rem;
  /* float: left; */
  color: linear-gradient(0deg, #1b4cc2 0%, #05dcf8 100%);
  background-image: url(../images/centerBg2.png);
  background-repeat: no-repeat;
  background-size: 100%;
  background-position: 50% 70%;
}

.banner .leftbanner,
.banner .rightbanner {
  margin-top: 23px;
  flex: 1;
  display: flex;
  justify-content: space-around;
  flex-wrap: nowrap;
  align-items: center;
}

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