@charset "UTF-8";
.fugong-box {
  margin-top: 0.8rem;
  border-bottom: 0.26667rem solid #181f34;
  padding-bottom: 0.26667rem;
}

.fugong-box .text-box {
  width: 8.89333rem;
  margin: 0.6rem auto 0;
  padding: 0rem 0.53333rem;
}

.fugong-box .text-box > p {
  border-top: 0.01333rem solid #4a5067;
  padding-top: 0.5rem;
  margin-top: 0.5rem;
  text-align: justify;
  color: #bcbec3;
  text-shadow: 0 0 0;
  font-size: 0.34rem;
  line-height: 0.6rem;
}

.fugong-box .text-box > p abbr {
  display: inline-block;
  background: #376fc4;
  padding: 0rem 0.2rem;
  color: #fff;
  margin-right: 0.3rem;
  text-shadow: 0 0 0;
  font-size: 0.36rem;
  position: relative;
}

.fugong-box .text-box > p abbr:after {
  content: "";
  display: inline-block;
  position: absolute;
  width: 0;
  height: 0;
  border-width: 0.12rem;
  border-style: solid;
  top: 0.19rem;
  left: 1.82rem;
  border-color: transparent  transparent transparent #376fc4;
}

.fugong-box .text-tips {
  text-align: center;
  font-size: 0.21333rem;
  color: #aeb0b7;
  margin: 0.26667rem 0;
}

.fugong-box .title-box {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  height: 0.45333rem;
  line-height: 0.45333rem;
  margin: 0.26667rem 0;
}

.fugong-box .title-box .title-label {
  font-size: 0.37333rem;
  font-weight: bold;
  color: #fff;
  padding-left: 0.6rem;
  border-left: 0.10667rem solid #ff9704;
}

.fugong-box .title-box .title-time {
  font-size: .32rem;
  color: #abadb4;
  padding-right: .6rem;
  text-shadow: 0 0 0;
}

.fugong-box .title-box .r-btn-block {
  width: 2.4rem;
  height: 0.53333rem;
  font-size: 0.26667rem;
  line-height: 0.53333rem;
  border-radius: 0.05333rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  background-color: #f2f2f2;
  color: #0fa5e8;
  text-align: center;
  margin-right: 0.6rem;
}

.fugong-box .title-box .r-btn-block .btn-item {
  width: 50%;
}

.fugong-box .title-box .r-btn-block .btn-item.active {
  background-color: #376fc4;
  color: #fff;
  border-top-left-radius: 0.05333rem;
  border-bottom-left-radius: 0.05333rem;
}

.fugong-box .fugong-chart {
  width: 9.13333rem;
  height: 7.06667rem;
  margin: 0 auto;
}

.fugong-box .fugong-chart > .echarts {
  width: 9.13333rem;
  height: 7.06667rem;
}

.fugong-box .top-label {
  text-align: center;
}

.fugong-box .top-label > img {
  display: block;
  width: 0.6rem;
  height: 0.56rem;
  margin: 0.13333rem auto;
}

.fugong-box .top-label > span {
  text-align: center;
  display: block;
  font-size: 0.32rem;
  color: #000000;
}

.fugong-box .rank-list {
  width: 8.34667rem;
  margin: 0.53333rem auto;
  font-size: 0.32rem;
  background-image: #1b243b;
  background-size: 0.25333rem 4.8rem;
  background-repeat: no-repeat;
  background-repeat: repeat-x;
}

.fugong-box .rank-list .list-header {
  width: 8.34667rem;
  height: 0.66667rem;
  line-height: 0.66667rem;
  text-align: center;
  color: #fff;
  background-color: #376fc4;
  border-radius: 0.05333rem;
}

.fugong-box .rank-list .list-item {
  width: 8.34667rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  color: #dfe0e2;
  padding: 0.26667rem 0;
}

.fugong-box .rank-list .list-item .item-number {
  width: 1.2rem;
  text-align: center;
}

.fugong-box .rank-list .list-item .item-text {
  width: 5.86667rem;
  text-align: left;
}

.fugong-box .rank-list .list-item .item-score {
  width: 1.28rem;
  text-align: left;
}

.footer {
  width: 10rem;
}

.footer > img {
  width: 100%;
}

.circle-box {
  width: 8.89333rem;
  margin: 0.6rem auto 0;
  padding: 0.66667rem 0.53333rem 0;
}

.circle-box .inner-tab {
  width: 8.4rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  font-size: 0.32rem;
  line-height: 0.82667rem;
  height: 0.82667rem;
  color: #bbbdc4;
  margin: 0.66667rem auto 0.26667rem;
}

.circle-box .inner-tab .inner-tab-item {
  width: 50%;
  text-align: center;
}

.circle-box .inner-tab .inner-tab-item.active {
  background-color: #376fc4;
  color: #fff;
}

.circle-box .last-tips {
  font-size: 0.21333rem;
  color: #bbbdc4;
  text-align: center;
  margin: 0.4rem auto;
}

.circle-box .table {
  border: 0.01333rem solid #376fc4;
}

.circle-box .table .table-item {
  height: 1.09333rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  font-size: 0.32rem;
  border-bottom: 0.01333rem solid #376fc4;
}

.circle-box .table .table-item:last-child {
  border: 0;
}

.circle-box .table .table-item .table-head {
  width: 1.70667rem;
  color: #fff;
  text-align: center;
  line-height: 1.09333rem;
  border-right: 0.01333rem solid #376fc4;
}

.circle-box .table .table-item .table-body {
  width: 6.58667rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
}

.circle-box .table .table-item .table-body .inner-item {
  width: 1.31733rem;
  text-align: center;
  line-height: 0.54667rem;
}

.circle-box .table .table-item .table-body .inner-item .inner-city {
  color: #bbbdc4;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}

.circle-box .table .table-item .table-body .inner-item .inner-percent {
  color: #494f61;
  font-size: 0.26667rem;
}

.circle-box .label-title {
  text-align: center;
  color: #fff;
  font-size: 0.32rem;
}

.circle-box .label-title > img {
  display: block;
  width: 0.86667rem;
  height: 0.86667rem;
  margin: 0 auto 0.26667rem;
}

.circle-box .circle-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  width: 8.45333rem;
  margin: 0.26667rem auto;
  padding-bottom: 0.66667rem;
  border-bottom: 0.01333rem solid #4a5067;
  /*
        这里采用clip剪切了圆，实现左右两个半圆，右半圆在后面，因此在更上一层，
        clip的用法参考：http://www.w3school.com.cn/cssref/pr_pos_clip.asp
     */
  /*所有的后代都水平垂直居中，这样就是同心圆了*/
  /*自身以及子元素都是圆*/
}

.circle-box .circle-list .circle-item {
  margin: 0.53333rem 0.53333rem 0 0;
}

.circle-box .circle-list .circle-item:nth-child(5n) {
  margin-right: 0;
}

.circle-box .circle-list .circle-city {
  font-size: 0.26667rem;
  text-align: center;
  margin-top: 0.33333rem;
  color: #fff;
}

.circle-box .circle-list .circle-bar {
  width: 1.2rem;
  height: 1.2rem;
  position: relative;
  background-color: #333;
  font-size: 0.26667rem;
}

.circle-box .circle-list .circle-bar-left,
.circle-box .circle-list .circle-bar-right {
  width: 1.2rem;
  height: 1.2rem;
}

.circle-box .circle-list .circle-bar-right {
  clip: rect(0, auto, auto, 0.6rem);
  background-color: #5d616a;
}

.circle-box .circle-list .circle-bar-left {
  clip: rect(0, 0.6rem, auto, 0);
  background-color: #5d616a;
}

.circle-box .circle-list .mask {
  width: 1.06667rem;
  height: 1.06667rem;
  background-color: #23324f;
  text-align: center;
  line-height: 0.2em;
  color: #fff;
}

.circle-box .circle-list .mask :first-child {
  font-size: 0.26667rem;
  height: 1.06667rem;
  line-height: 1.06667rem;
  display: block;
}

.circle-box .circle-list .circle-bar * {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
}

.circle-box .circle-list .circle-bar, .circle-box .circle-list .circle-bar > * {
  border-radius: 50%;
}

.circle-detail {
  padding: 0 0.53333rem;
  margin: 0 auto;
  /*
      这里采用clip剪切了圆，实现左右两个半圆，右半圆在后面，因此在更上一层，
      clip的用法参考：http://www.w3school.com.cn/cssref/pr_pos_clip.asp
   */
  /*所有的后代都水平垂直居中，这样就是同心圆了*/
  /*自身以及子元素都是圆*/
}

.circle-detail .circle-wrapper {
  padding: 0.66667rem 0;
  border-top: 0.01333rem solid #4a5067;
  margin-top: 0.26667rem;
}

.circle-detail .circle-bar {
  width: 3.24rem;
  height: 3.24rem;
  position: relative;
  background-color: #333;
  margin: 0 auto;
}

.circle-detail .circle-bar-left,
.circle-detail .circle-bar-right {
  width: 3.24rem;
  height: 3.24rem;
}

.circle-detail .circle-bar-right {
  clip: rect(0, auto, auto, 1.62rem);
  background-color: #5d616a;
}

.circle-detail .circle-bar-left {
  clip: rect(0, 1.62rem, auto, 0);
  background-color: #5d616a;
}

.circle-detail .mask {
  width: 2.53333rem;
  height: 2.53333rem;
  background-color: #23324f;
  text-align: center;
  line-height: 0.2em;
  color: #fff;
}

.circle-detail .mask .percent {
  font-size: 0.66667rem;
  color: #376fc4;
  line-height: 2.13333rem;
}

.circle-detail .mask .text {
  font-size: 0.32rem;
  color: #fff;
  line-height: 3.24rem;
}

.circle-detail .circle-bar * {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
}

.circle-detail .circle-bar, .circle-detail .circle-bar > * {
  border-radius: 50%;
}

.renkou-tips {
  font-size: 0.24rem;
  color: #fff;
  margin-bottom: 0.8rem;
}

.progress-box {
  margin-bottom: 0.8rem;
}

.progress-box .top-img {
  display: block;
  width: 8.24rem;
  height: 0.33333rem;
}

.progress-box .progress-list .progress-item {
  margin: 0.4rem 0;
}

.progress-box .progress-list .progress-item .progress-text {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  color: #fff;
  font-size: 0.32rem;
}

.progress-box .progress-list .progress-item .progress-text .city {
  text-align: left;
}

.progress-box .progress-list .progress-item .progress-text .percent {
  text-align: right;
}

.progress-box .progress-list .progress-item .progress-wrapper {
  background-color: #32394e;
  width: 100%;
  height: 0.26667rem;
  border-radius: 0.53333rem;
  margin-top: 0.2rem;
}

.progress-box .progress-list .progress-item .progress-wrapper .progress-bar {
  background-color: #ff9704;
  height: 0.26667rem;
  border-radius: 0.53333rem;
  width: 0;
}

#list-out.progress-list .progress-item .progress-wrapper .progress-bar {
  background-color: #3cb6a7;
}
/*# sourceMappingURL=test.css.map */