/*------------------------------------------------页面公共样式----------------------------------------------*/
*,
html,
body {
  font-family: "微软雅黑" !important;
}

/*主体背景*/
.spb-bg {
  background-repeat  : no-repeat;
  background-position: center top;
  background-size    : 100% 100%;
  overflow           : hidden;
  width              : 100%;
  height             : 100%;
  position           : fixed;
  top                : 0;
}

/*头部样式*/
.spb-header {
  width              : 100%;
  height             : 0.8rem;
  background-image   : url(../img/bg_header.png);
  background-repeat  : no-repeat;
  background-position: center top;
  background-size    : 100% 100%;
  padding-top        : 0.1rem;
}

.spb-header-nav {
  width : 80%;
  margin: auto;
  clear : both;
}

.spb-header-nav-left {
  float      : left;
  margin-left: 0.5rem;
}

.spb-header-nav-right {
  float       : right;
  margin-right: 0.8rem;
}

.spb-header-nav-center {
  font-weight: bold;
  font-size  : 0.4rem;
  text-align : center;
  color      : #00fff6;
}

.spb-header-nav-item {
  width           : 1.35rem;
  height          : 0.4rem;
  line-height     : 0.4rem;
  background-color: #050d49;
  display         : inline-block;
  border          : 0.05rem solid #15307a;
  cursor          : pointer;
}

.spb-header-nav-item:hover {
  border: 4px solid #62e6ff;
}

.spb-header-nav-item-active {
  border: 4px solid #62e6ff;
}

.spb-header-nav-left .spb-header-nav-item {
  transform  : skew(45deg);
  margin-left: 0.2rem;
}

.spb-header-nav-right .spb-header-nav-item:nth-child(1) {}

.spb-header-nav-right .spb-header-nav-item {
  transform  : skew(-45deg);
  margin-left: 0.2rem;
}

.spb-header-nav-item p {
  text-align : center;
  color      : #62e6ff;
  font-weight: bold;
  font-size  : 0.24rem;
}

.spb-header-nav-left .spb-header-nav-item p {
  transform: skew(-45deg);
}

.spb-header-nav-right .spb-header-nav-item p {
  transform: skew(45deg);
}

/*内容样式*/
.spb-container {
  position: relative;
  padding : 0.1875rem 0.125rem;
  height  : 90%;
}

.spb-fluid {
  width     : 100%;
  height    : 97%;
  margin-top: 0.1875rem;
}

/*左边容器*/
.spb-left-t {
  height             : 59.5%;
  width              : 100%;
  background-image   : url(../img/bg_box1.png);
  background-repeat  : no-repeat;
  background-position: center top;
  background-size    : 100% 100%;
}

.spb-left-b {
  height             : 40%;
  width              : 100%;
  background-image   : url(../img/bg_box2.png);
  background-repeat  : no-repeat;
  background-position: center top;
  background-size    : 100% 100%;
  margin-top         : 0.1rem;
}

.spb-left-t:hover {
  background-image: url(../img/bg_box1_active.png);
}

.spb-left-b:hover {
  background-image: url(../img/bg_box2_active.png);
}

/*中间容器*/
.spb-center-t {
  height: 69.5%;
}

.spb-center-b {
  height             : 30%;
  width              : 100%;
  background-image   : url(../img/bg_box3.png);
  background-repeat  : no-repeat;
  background-position: center top;
  background-size    : 100% 100%;
  margin-top         : 0.1rem;
}

.spb-center-b:hover {
  background-image: url(../img/bg_box3_active.png);
}

.spb-center-t-cir img {
  height  : 50%;
  width   : 50%;
  position: absolute;
  left    : 0;
  right   : 0;
  margin  : auto;
  /* 有了这个就自动居中了 */
}

.spb-center-t-box {
  position     : absolute;
  top          : 0;
  z-index      : 100000;
  width        : 93%;
  padding-left : 0.2rem;
  padding-right: 0.2rem;
  padding-top  : 0.2rem;
}

.spb-center-t-card {
  width              : 100%;
  height             : 1.1rem;
  background-image   : url(../img/bg_center_card.png);
  background-repeat  : no-repeat;
  background-position: center;
  background-size    : 100% 100%;
  text-align         : center;
}

.spb-center-t-card p:nth-child(1) {
  color      : #fff;
  font-weight: bold;
  font-size  : 0.24rem;
  padding-top: 0.15rem;
}

.spb-center-t-card p:nth-child(2) {
  color      : #fff;
  font-weight: bold;
  font-size  : 0.35rem;
}

.spb-center-t-rot {
  width              : 100%;
  height             : 1.15rem;
  background-image   : url(../img/bg_center_rot.png);
  background-repeat  : no-repeat;
  background-position: center;
  background-size    : 100% 100%;
  text-align         : center;
}

.spb-center-t-rot p:nth-child(1) {
  color      : #fff;
  font-size  : 0.16rem;
  padding-top: 0.3rem;
}

.spb-center-t-rot p:nth-child(2) {
  color      : #fff;
  font-weight: bold;
  font-size  : 0.2rem;
}

/*右边容器*/
.spb-right-t,
.spb-right-c,
.spb-right-b {
  height             : 32.8%;
  width              : 100%;
  background-image   : url(../img/bg_box4.png);
  background-repeat  : no-repeat;
  background-position: center top;
  background-size    : 100% 100%;
}

.spb-right-c,
.spb-right-b {
  margin-top: 0.1rem;
}

.spb-right-t:hover {
  background-image: url(../img/bg_box4_active.png);
}

.spb-right-c:hover {
  background-image: url(../img/bg_box4_active.png);
}

.spb-right-b:hover {
  background-image: url(../img/bg_box4_active.png);
}

/*标题*/
.sp-card-title {
  color      : #00fff6;
  font-size  : 0.22rem;
  font-weight: bold;
  text-align : center;
  line-height: 0.5rem;
}

.sp-card-title-all {
  color      : #00fff6;
  font-size  : 0.22rem;
  font-weight: bold;
  text-align : center;
  line-height: 0.6rem;
}

/*单位样式*/
.spb-unit {
  font-size   : 0.14rem;
  color       : #fff;
  text-align  : right;
  margin-right: 0.2rem;
}

/*------------------------------------------------工作页面样式----------------------------------------------*/
.spb-work-center-t-box {
  width     : 90%;
  margin    : auto;
  margin-top: 0.8rem;
}

.spb-work-center-t-rot {
  width              : 90%;
  height             : 1.6rem;
  background-image   : url(../img/bg_center_rot.png);
  background-repeat  : no-repeat;
  background-position: center;
  background-size    : 100% 100%;
  text-align         : center;
}

.spb-work-center-t-rot p:nth-child(1) {
  color      : #fff;
  font-size  : 0.18rem;
  padding-top: 0.5rem;
}

.spb-work-center-t-rot p:nth-child(2) {
  color      : #00fff6;
  font-weight: bold;
  font-size  : 0.3rem;
}

@keyframes donghua {
  0% {
    background-position: 50% -500%;
  }

  100% {
    background-position: 50% 500%;
  }
}

@keyframes imgdonghua {
  0% {
    transform: translateY(-0.125rem);
  }

  50% {
    transform: translateY(0.125rem);
  }

  100% {
    transform: translateY(-0.125rem);
  }
}

.spb-work-center-ball {
  width              : 125%;
  height             : 100%;
  background-image   : url(../img/4242.png);
  background-position: center;
  background-repeat  : repeat-y;
  position           : absolute;
  text-align         : center;
  left               : -12%;
  animation          : donghua 10s linear infinite;
}

.spb-work-center-ball img {
  animation: imgdonghua 5s linear infinite;
  display  : block;
  margin   : 0 auto;
}

.spb-work-center-ball-all {
  width              : 145%;
  height             : 100%;
  background-image   : url(../img/4242.png);
  background-position: center;
  background-repeat  : repeat-y;
  position           : absolute;
  left               : -23%;
  animation          : donghua 10s linear infinite;
}

.spb-work-center-ball-all img {
  animation: imgdonghua 5s linear infinite;
  display  : block;
  margin   : 0 auto;
}

/*------------------------------------------------城管页面样式----------------------------------------------*/
.spb-city-bottom-l {
  width              : 45%;
  height             : 96%;
  background-image   : url(../img/bg_city_box2.png);
  background-repeat  : no-repeat;
  background-position: center;
  background-size    : 100% 100%;
  float              : left;
}

.spb-city-bottom-r {
  width              : 45%;
  height             : 96%;
  background-image   : url(../img/bg_city_box2.png);
  background-repeat  : no-repeat;
  background-position: center;
  background-size    : 100% 100%;
  float              : right;
}

.spb-city-bottom-l:hover {
  background-image: url(../img/bg_city_box2_active.png);
}

.spb-city-bottom-r:hover {
  background-image: url(../img/bg_city_box2_active.png);
}

.spb-city-top-l,
.spb-city-top-r {
  width              : 100%;
  height             : 66%;
  background-image   : url(../img/bg_box1.png);
  background-repeat  : no-repeat;
  background-position: center;
  background-size    : 100% 100%;
}

.spb-city-top-l:hover {
  background-image: url(../img/bg_box1_active.png);
}

.spb-city-top-r:hover {
  background-image: url(../img/bg_box1_active.png);
}

.spb-city-top-c-ball {
  position : absolute;
  left     : 50%;
  top      : 58%;
  transform: translate(-50%, -50%);
}

@keyframes donghua6 {
  0% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(10%);
  }

  100% {
    transform: translateY(0%);
  }
}

.spb-city-top-c ul li {
  position           : absolute;
  background-position: 49% 96%;
  height             : 1.8rem;
  animation          : donghua6 3s linear infinite;
  width              : 1.52rem;
  text-align         : center;
}

.spb-city-top-c ul li:first-child {
  list-style-type: none;
  width          : 1.52rem;
  left           : 1.7rem;
}

.spb-city-top-c ul li:nth-child(2) {
  list-style-type: none;
  width          : 1.32rem;
  top            : 0.5rem;
  left           : 7rem;
}

.spb-city-top-c ul li:nth-child(3) {
  list-style-type: none;
  width          : 1.52rem;
  top            : 2.7rem;
  left           : 0.5rem;
}

.spb-city-top-c ul li:nth-child(4) {
  list-style-type: none;
  width          : 1.5rem;
  top            : 3rem;
  right          : 1.9rem;
}

.spb-city-top-c ul li:nth-child(5) {
  top    : 3.1rem;
  left   : 1.1rem;
  opacity: 0.67;
}

.spb-city-top-c ul li:nth-child(5) {
  list-style-type: none;
  width          : 0.67rem;
  height         : 0.59rem;
  background     : url(../img/city_zhu2.png) no-repeat;
  background-size: 100% 100%;
  position       : absolute;
}

.spb-city-top-c ul li:nth-child(6) {
  top    : 2.6rem;
  left   : 1.9rem;
  opacity: 0.5;
}

.spb-city-top-c ul li:nth-child(6) {
  list-style-type: none;
  width          : 0.67rem;
  height         : 0.59rem;
  background     : url(../img/city_zhu2.png) no-repeat;
  background-size: 100% 100%;
  position       : absolute;
}

.spb-city-top-c ul li:nth-child(7) {
  top    : 3.8rem;
  left   : 8.5rem;
  opacity: 0.52;
}

.spb-city-top-c ul li:nth-child(7) {
  list-style-type: none;
  width          : 0.67rem;
  height         : 0.59rem;
  background     : url(../img/city_zhu2.png) no-repeat;
  background-size: 100% 100%;
  position       : absolute;
}

.spb-city-top-c ul li:nth-child(8) {
  top    : 0.6rem;
  right  : 0.2rem;
  opacity: 0.23;
}

.spb-city-top-c ul li:nth-child(8) {
  list-style-type: none;
  width          : 0.67rem;
  height         : 0.59rem;
  background     : url(../img/city_zhu2.png) no-repeat;
  background-size: 100% 100%;
  position       : absolute;
}

.spb-city-top-c-p p {
  text-align: center;
}

.spb-city-top-c-p p:nth-child(1) {
  color      : #00fff6;
  font-size  : 0.3rem;
  font-weight: bold;
}

.spb-city-top-c-p p:nth-child(2) {
  color    : #ffffff;
  font-size: 0.16rem;
}

/*------------------------------------------------民生页面样式----------------------------------------------*/
/* 中间 */
.spb-people_center_t {
  position: relative;
  height  : 59.9%;
  width   : 100%;
}

.spb-people_center_t ul li {
  position       : absolute;
  list-style-type: none;
}

.spb-people_center_t ul li:nth-child(1) {
  top : 0.5rem;
  left: 1.3rem;
}

.spb-people_center_t ul li:nth-child(2) {
  top : 0.1rem;
  left: 2.7rem;
}

.spb-people_center_t ul li:nth-child(3) {
  top : 0.1rem;
  left: 3.75rem;
}

.spb-people_center_t ul li:nth-child(4) {
  top : 0.4rem;
  left: 5.3rem;
}

.spb-people_center_t ul li:nth-child(5) {
  top : 0.3rem;
  left: 7rem;
}

@keyframes donghua3 {
  0% {
    background-position: 50% 0.2rem;
    ;
  }

  50% {
    background-position: 50% 0rem;
  }

  100% {
    background-position: 50% 0.2rem;
    ;
  }
}

.spb-people_center_t .live {
  width              : 100%;
  margin-top         : 0.5rem;
  margin-left        : 0rem;
  background-image   : url(../img/minsheng.png);
  height             : 100%;
  background-size    : 82% 95%;
  background-position: 58% 0.2rem;
  background-repeat  : no-repeat;
  animation          : donghua3 3s linear infinite;
}

.color-5c9dff {
  color: #5c9dff;
}

.f-17em-cur {
  font-size: 0.17rem !important;
}

.f-28em-cur {
  font-size: 0.28rem !important;
}

.pull-left {
  float: left;
}

.pull-right {
  float: right;
}

.clearfix {
  clear   : both;
  overflow: hidden;
}

.spb-people_center_b {
  background-image   : url(../img/bg_box3.png);
  background-size    : 100% 100%;
  background-repeat  : no-repeat;
  background-position: center;
  height             : 32.8%;
  width              : 100%;
  margin-top         : 0.2rem;
}

.spb-people_center_b p {
  color      : #00fff6;
  font-size  : 0.22rem;
  font-weight: bold;
  text-align : center;
  line-height: 0.5rem;
}

.spb-people_center_b_l {
  height         : 100%;
  width          : 48.5%;
  background     : url("../img/bg_people_center.png") no-repeat;
  background-size: 100% 100%;
  position       : relative;
  cursor         : pointer;
}

.spb-people_center_b_l:hover {
  height         : 100%;
  width          : 48.5%;
  background     : url("../img/bg_people_center.png") no-repeat;
  background-size: 100% 100%;
}

.spb-people_center_b_r {
  height         : 100%;
  width          : 48.5%;
  background     : url("../img/bg_people_center.png") no-repeat;
  background-size: 100% 100%;
  position       : relative;
}

.spb-people_center_b_r:hover {
  height         : 100%;
  width          : 48.5%;
  background     : url("../img/bg_people_center.png") no-repeat;
  background-size: 100% 100%;
}

/*------------------------------------------------党建页面样式----------------------------------------------*/
/*中间容器*/
.spb-party-center-t-p {
  height: 68.5%;
}

.spb-party-center-b-p {
  height             : 32%;
  width              : 100%;
  background-image   : url(../img/bg_box3.png);
  background-repeat  : no-repeat;
  background-position: center top;
  background-size    : 100% 100%;
}

.spb-party-center-t-cir-p img {
  height  : 70%;
  width   : 85%;
  position: absolute;
  left    : 0;
  right   : 0;
  margin  : auto;
  /* 有了这个就自动居中了 */
}

.spb-party-center-t-rot-p p:nth-child(1) {
  color      : #fff;
  font-size  : 0.16rem;
  padding-top: 0.3rem;
}

.spb-party-center-t-rot-p p:nth-child(2) {
  color      : #fff;
  font-weight: bold;
  font-size  : 0.2rem;
}

.spb_party_center_t {
  position: relative;
}

.spb_party_center_t ul li {
  list-style-type: none;
  width          : 2.28rem;
  height         : 0.89rem;
  background     : url("../img/kuang.png") no-repeat;
  background-size: 100% 100%;
  position       : absolute;
  top            : 1.3rem;
  right          : 0rem;
}

.spb_party_center_t ul li:first-child {
  top : 0.1rem;
  left: 1.8rem;
}

.spb_party_center_t ul li:nth-child(2) {
  top : 0.1rem;
  left: 4.8rem;
}

.spb_party_center_t ul li:nth-child(3) {
  top : 1.3rem;
  left: 0rem;
}

.con_center_t ul li:nth-child(4) {
  top  : 1.3rem;
  right: 0rem;
}

/* 动图 */
.spb_party_center_c {
  width          : 8.03rem;
  height         : 6.02rem;
  background     : url(../img/danghui.gif) no-repeat;
  background-size: 100% 100%;
  margin-top     : 0.3rem;
  margin-left    : -0.6rem;
}

.w-05em-cur {
  width: 0.5rem;
}

.w-05em-cur1 {
  width      : 0.6rem;
  margin-top : 0.17rem;
  margin-left: -0.1rem;
}

.f-19em-cur {
  font-size: 0.17rem !important;
}

.pl-33em-cur {
  padding-left: 0.33rem;
}

.pt-15em-cur {
  padding-top: 0.2rem;
}

.color-fffd47 {
  color: #fffd47;
}

.pl-2em-cur {
  font-size   : 0.36rem;
  padding-left: 0.2rem;
  padding-top : 0.2rem;
}

/*------------------------------------------------综治页面样式----------------------------------------------*/
/*——中间——*/
.color-00f6ff {
  color: #00f6ff;
}

.color-00f6ff1 {
  color: #00c4ff;
}

.con_center {
  position: absolute;
  top     : 0.95rem;
  left    : 6.26rem;
  width   : 7rem;
  height  : 10.16rem;
}

.con_center_t {
  position: relative;
}

.c_tu1 {
  position       : absolute;
  width          : 2.28rem;
  height         : 2.28rem;
  line-height    : 2.5rem;
  text-align     : center;
  background     : url("../img/c_tu1.png") no-repeat;
  background-size: 100% 100%;
  top            : 2.1rem;
  left           : 3.6rem;
  z-index        : 999;
}

.c_tu1 .tit {
  font-size: 0.42rem;
}

.c_tu1 .tit2 {
  font-size: 0.43rem;
  position : absolute;
  top      : -0.05rem;
  left     : 0.73rem;
}

.c_tu2 {
  position       : absolute;
  width          : 3.06rem;
  height         : 2.22rem;
  text-align     : center;
  background     : url("../img/c_tu2.png") no-repeat;
  background-size: 100% 100%;
  top            : 0.6rem;
  left           : 1.45rem;
  z-index        : 222;
}

.c_tu2 .tit {
  font-size: 0.3rem;
  position : absolute;
  top      : 0.33rem;
  left     : 0.7rem;
}

.c_tu2 .tit2 {
  width      : 0.6rem;
  font-size  : 0.22rem;
  position   : absolute;
  top        : 1.2rem;
  left       : 0.78rem;
  line-height: 0.28rem;
}

.c_tu3 {
  position       : absolute;
  width          : 3.07rem;
  height         : 2.17rem;
  text-align     : center;
  background     : url("../img/c_tu3.png") no-repeat;
  background-size: 100% 100%;
  top            : 1.7rem;
  left           : 5.49rem;
  z-index        : 222;
}

.c_tu3 .tit {
  font-size: 0.3rem;
  position : absolute;
  top      : 0.33rem;
  left     : 1.5rem;
}

.c_tu3 .tit2 {
  text-align : center;
  width      : 0.8rem;
  font-size  : 0.22rem;
  position   : absolute;
  top        : 1.2rem;
  left       : 1.55rem;
  line-height: 0.28rem;
}

.c_tu4 {
  position       : absolute;
  width          : 2.55rem;
  height         : 3.69rem;
  text-align     : center;
  background     : url("../img/c_tu4.png") no-repeat;
  background-size: 100% 100%;
  top            : 3.6rem;
  left           : 1.65rem;
}

.c_tu4 .tit {
  font-size: 0.3rem;
  position : absolute;
  top      : 2.95rem;
  left     : 0.75rem;
}

.c_tu4 .tit2 {
  text-align : center;
  width      : 0.6rem;
  font-size  : 0.22rem;
  position   : absolute;
  top        : 1.75rem;
  left       : 0.85rem;
  line-height: 0.28rem;
}

.c_tu5 {
  position       : absolute;
  width          : 2.3rem;
  height         : 3.69rem;
  text-align     : center;
  background     : url("../img/c_tu5.png") no-repeat;
  background-size: 100% 100%;
  top            : 4rem;
  left           : 3.67rem;
}

.c_tu5 .tit {
  font-size: 0.3rem;
  position : absolute;
  top      : 3.05rem;
  left     : 0.85rem;
}

.c_tu5 .tit2 {
  text-align : center;
  width      : 0.9rem;
  font-size  : 0.22rem;
  position   : absolute;
  top        : 1.95rem;
  left       : 0.65rem;
  line-height: 0.28rem;
}

.c_tu6 {
  position       : absolute;
  width          : 2.69rem;
  height         : 4.64rem;
  text-align     : center;
  background     : url("../img/c_tu6.png") no-repeat;
  background-size: 100% 100%;
  top            : 3.75rem;
  left           : 5.15rem;
}

.c_tu6 .tit {
  font-size: 0.3rem;
  position : absolute;
  top      : 3.93rem;
  left     : 1.15rem;
}

.c_tu6 .tit2 {
  text-align : center;
  width      : 0.9rem;
  font-size  : 0.22rem;
  position   : absolute;
  top        : 2.9rem;
  left       : 1.1rem;
  line-height: 0.28rem;
}

/*------------------------------------------------事件详情页面样式----------------------------------------------*/
.spb-event-left-t,
.spb-event-left-b {
  height             : 45%;
  width              : 100%;
  background-image   : url(../img/bg_event_box1.png);
  background-repeat  : no-repeat;
  background-position: center top;
  background-size    : 100% 100%;
}

.spb-event-left-b {
  margin-top: 0.9rem;
}

.spb-event-center {
  height             : 100%;
  width              : 85%;
  background-image   : url(../img/bg_event_box2.png);
  background-repeat  : no-repeat;
  background-position: center top;
  background-size    : 100% 100%;
  margin             : auto;
  margin-top         : 0.1rem;
}

.spb-event-right {
  height             : 100%;
  width              : 100%;
  background-image   : url(../img/bg_event_box3.png);
  background-repeat  : no-repeat;
  background-position: center top;
  background-size    : 100% 100%;
}

.spb-event-left-t:hover {
  height             : 45%;
  width              : 100%;
  background-image   : url(../img/bg_event_box1_active.png);
  background-repeat  : no-repeat;
  background-position: center top;
  background-size    : 100% 100%;
}

.spb-event-left-b:hover {
  height             : 45%;
  width              : 100%;
  background-image   : url(../img/bg_event_box1_active.png);
  background-repeat  : no-repeat;
  background-position: center top;
  background-size    : 100% 100%;
}

.spb-event-center:hover {
  height             : 100%;
  width              : 85%;
  background-image   : url(../img/bg_event_box2_active.png);
  background-repeat  : no-repeat;
  background-position: center top;
  background-size    : 100% 100%;
  margin             : auto;
  margin-top         : 0.1rem;
}

.spb-event-right:hover {
  height             : 100%;
  width              : 100%;
  background-image   : url(../img/bg_event_box3_active.png);
  background-repeat  : no-repeat;
  background-position: center top;
  background-size    : 100% 100%;
}

.progress_box_t {
  margin-left: 0.1rem;
  padding-top: 1rem;
}

.progress_box_t_img {
  margin-left: 0.3rem;
  width      : 85%;
  margin-top : 0.1rem;
}

.progress_text {
  width      : 18%;
  font-family: shs-Normal;
  font-size  : 0.18rem;
  color      : #ffffff;
  display    : inline-block;
}

.progress_box {
  height: 90%;
}

.progress_box_b {
  margin-top : 0.4rem;
  margin-left: 0.2rem;
  height     : 80%;
  overflow-y : auto;
  width      : 90%;
}

/*滚动条样式*/
.progress_box_b::-webkit-scrollbar {
  /*滚动条整体样式*/
  width : 0.05rem;
  /*高宽分别对应横竖滚动条的尺寸*/
  height: 0.05rem;
}

.progress_box_b::-webkit-scrollbar-thumb {
  /*滚动条里面小方块*/
  -webkit-box-shadow: inset 0 0 0.0625rem rgba(0, 0, 0, 0.2);
  background        : #54d2f6;
  border-radius     : 0.02rem;
}

.progress_box_b::-webkit-scrollbar-track {
  /*滚动条里面轨道*/
  -webkit-box-shadow: inset 0 0 0.0625rem rgba(0, 0, 0, 0.2);
  background-color  : #18244c;
  border-radius     : 0.02rem;
}

.progress_box_b_l {
  float: left;
}

.underway .progress_box_b_l_ball {
  width           : 0.1rem;
  height          : 0.1rem;
  background-color: #3df6db;
  border-radius   : 100%;
}

.underway .progress_box_b_l_line {
  width           : 0.01rem;
  height          : 0.8rem;
  background-color: #999999;
  margin-left     : 0.05rem;
}

.underway p {
  font-family: shs-Normal;
  font-size  : 0.16rem;
  color      : #6effea !important;
}

.progress_box_b_l_ball {
  width        : 0.1rem;
  height       : 0.1rem;
  border       : 0.0125rem solid #6effea;
  border-radius: 100%;
}

.progress_box_b_l_line {
  width           : 0.01rem;
  height          : 0.8rem;
  background-color: #999999;
  margin-left     : 0.05rem;
}

.progress_box_b_r {
  float              : left;
  width              : 85%;
  /* background-color: rgba(0,0,0,0.1);
  */
  padding            : 0.1rem;
  border             : 0.0125rem solid rgba(4, 206, 244, 1);
  margin-left        : 0.2rem;
}

.progress_box_b_r p {
  font-family: shs-Normal;
  font-size  : 0.16rem;
  color      : #6effea;
}

.pl-10 {
  padding-left: 0.1rem;
}

/*------------------------------------------------人口----------------------------------------------*/
.people_dong {
  animation                     : people_dongtai 2s ease-out 0s infinite;
  -moz-animation                : people_dongtai 2s ease-out 0s infinite;
  /* Firefox */
  -webkit-animation             : people_dongtai 2s ease-out 0s infinite;
  /* Safari 鍜� Chrome */
  -o-animation                  : people_dongtai 2s ease-out 0s infinite;
  /* Opera */
  /* animation-direction        : alternate;
  */
  -moz-animation-direction      : alternate;
  /* -webkit-animation-direction: alternate;
  */
  -o-animation-direction        : alternate;
}

@keyframes people_dongtai {
  0% {
    top: 10%;
  }

  50% {
    top: 50%;
  }

  100% {
    top: 80%;
  }
}

@-moz-keyframes people_dongtai

/* Firefox */
  {
  0% {
    top: 10%;
  }

  50% {
    top: 50%;
  }

  100% {
    top: 80%;
  }
}

@-webkit-keyframes people_dongtai

/* Safari 鍜� Chrome */
  {
  0% {
    top: 10%;
  }

  50% {
    top: 50%;
  }

  100% {
    top: 80%;
  }
}

@-o-keyframes people_dongtai

/* Opera */
  {
  0% {
    top: 10%;
  }

  50% {
    top: 50%;
  }

  100% {
    top: 80%;
  }
}

@keyframes circle1 {
  0% {
    opacity  : 1;
    transform: rotate(0deg);
  }

  50% {
    opacity: 0.9;
  }

  100% {
    transform: rotate(180deg);
    opacity  : 0;
    z-index  : -99;
  }
}

.openInit {
  z-index : 999;
  position: relative;
}

.img-gif {
  width           : 2.5rem;
  border-radius   : 50%;
  height          : 2.5rem;
  border-color    : transparent;
  border-top-color: red;
  border-style    : solid;
  border-width    : 0.05rem;
  position        : fixed;
  top             : 50%;
  left            : 50%;
  margin-top      : -1.25rem;
  margin-left     : -1.25rem;
  animation       : circle1 1s ease-in;
  opacity         : 0;
}

.img-gif::after {
  width            : 2rem;
  border-radius    : 50%;
  height           : 2rem;
  border-color     : transparent;
  border-left-color: #00cc66;
  border-style     : solid;
  border-width     : 0.05rem;
  position         : fixed;
  top              : 50%;
  left             : 50%;
  content          : "";
  margin-top       : -1rem;
  margin-left      : -1rem;
  animation        : circle1 1s ease-in;
}

.img-gif::before {
  width              : 1.5rem;
  border-radius      : 50%;
  height             : 1.5rem;
  border-color       : transparent;
  border-bottom-color: #3399ff;
  border-style       : solid;
  border-width       : 0.05rem;
  position           : fixed;
  top                : 50%;
  left               : 50%;
  content            : "";
  margin-top         : -0.75rem;
  margin-left        : -0.75rem;
  animation          : circle1 1s ease-in;
}

.openInit::after {
  display         : block;
  content         : "";
  position        : fixed;
  height          : 100vh;
  width           : 50%;
  left            : 0;
  background-color: rgb(0, 7, 49);
  top             : 0;
  z-index         : -1;
}

.openInit::before {
  display         : block;
  content         : "";
  position        : fixed;
  height          : 100vh;
  width           : 50%;
  right           : 0;
  background-color: rgb(0, 7, 49);
  top             : 0;
  z-index         : -1;
}

.openInit.active::after {
  transition: 1s;
  left      : -50%;
}

.openInit.active::before {
  transition: 1s;
  right     : -50%;
}

.online-event {
  height    : 66%;
  margin-top: 0.1rem;
}

.online-event_li {
  float              : left;
  height             : 0.3125rem;
  font-family        : Microsoft YaHei;
  font-weight        : 400;
  color              : rgba(255, 255, 255, 1);
  line-height        : 0.3125rem;
  text-align         : center;
  margin-bottom      : 3%;
  font-size          : 0.175rem;
  position           : relative;
  background-image   : url(../img/4243.png);
  background-size    : 100% 100%;
  background-position: center;
}

.online-event_li span {
  position: absolute;
  right   : 0.2rem;
}

#online_echart {
  height: 96%;
}

.dangjian {
  height             : 100%;
  background-image   : url(../img/dangjian1.png);
  background-size    : 60%;
  background-position: center 100%;
  background-repeat  : no-repeat;
}

@keyframes imgDon {
  0% {
    top: 15%;
  }

  50% {
    top: 18%;
  }

  100% {
    top: 16%;
  }
}

.dangjian img {
  position : absolute;
  top      : 16%;
  left     : 50%;
  transform: translate(-50%, 0);
  animation: imgDon 5s linear infinite;
}

#bg {
  position: fixed;
}

.spb-bg:after {
  display         : block;
  content         : '';
  background-color: rgba(0, 1, 44, 1);
  position        : fixed;
  top             : 0;
  width           : 100%;
  height          : 100vh;
  z-index         : -1;
  opacity         : 0.5;
}

.goback {
  position     : absolute;
  z-index      : 999;
  color        : #fff;
  border       : 0.05rem solid #15307a;
  color        : #62e6ff;
  width        : 0.8rem;
  height       : 0.25rem;
  font-size    : 0.14rem;
  line-height  : 0.25rem;
  text-align   : center;
  top          : 0.15rem;
  left         : 0.1rem;
  border-radius: 0.04rem;
}

.goback:hover {
  border: 4px solid #62e6ff;
}

#zaixianbanshi {
  padding: 0 10%;
}

@keyframes donghua61 {
  0% {
    transform: translate(-50%, -50%);
  }

  50% {
    transform: translate(-50%, -60%);
  }

  100% {
    transform: translate(-50%, -50%);
  }
}

.renkouimg {
  position : absolute;
  left     : 50%;
  top      : 70%;
  transform: translate(-50%, -50%);
  animation: donghua61 3s linear infinite;
}

.ul_li_styles {
  display        : flex;
  justify-content: space-around;
  align-items    : center;
}

.ul_li_styles li {
  height          : 1.6rem;
  width           : 1.6rem;
  background-image: url(../img/pre.png);
  background-size : 100% 100%;
  text-align      : center;
  padding-top     : 0.5rem;
  box-sizing      : border-box;
}

.xinzengde {
  height    : 100%;
  margin-top: 0;
  padding   : 0.125rem;
  box-sizing: border-box;
}

.spb-zhongjian {
  height: 66%;
}