html,body {
  color: #444;
  height: 100%;
  font-size: 100%;
  padding: 0;
  margin: 0;
  font-family: STHeiti-Light,HelveticaNeue,sans-serif;
}
  .clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden}
  .clearfix{zoom:1}
  .font30 {font-size: 30px;}
  .font24 {font-size: 24px;}
  .font22 {font-size: 22px;}
  .font18 {font-size: 18px;}
  .font14 {font-size: 14px;}
  .font16 {font-size: 16px;}
  .font12 {font-size: 12px;}
  .font10 {font-size: 10px;}
  .block {display: block;}
  .center {text-align: center;}
  .hide {display: none;}
  .strong {font-weight: bold;}
  ul {list-style: none;padding: 0; margin: 0;}
  p,h1 {margin: 0;padding: 0;}
  i,em {font-style: normal;}
  @font-face {
      font-family: 'dinmedium';
      src: url('../font/dinregular.otf');
      font-weight: normal;
      font-style: normal;
  }
  .font-dinmedium {
      font-family: dinmedium;
  }
.page {
  max-width: 440px;
  margin: 0 auto;
  padding-top: 28px;
}

.share {
  padding: 16px 10px 12px;
}
.share li {
  float: left;
  width: 50%;
  text-align: center;
  font-size: 10px;
}
  .share .li-qzone {
      display: none;
  }
  .share .ul-show-qzone li {
      width: 33.3%;
  }
  .share .ul-show-qzone .li-qzone {
      display: block;
  }
  .share li a {
  display: block;
  margin: 0 auto;
  width: 30px;
  height: 30px;
  overflow: hidden;
  line-height: 1000;
  }
  .share li .weibo {
      background: url(../img/share_wb.png) no-repeat center center;
      background-size: 29px 29px;
  }
  .share li .weibo:active {
      background: url(../img/share_wb_active.png) no-repeat center center;
      background-size: 29px 29px;
  }
  .share li .miliao {
      background: url(../img/share_ml.png) no-repeat center center;
      background-size: 29px 29px;
  }
  .share li .miliao:active {
      background: url(../img/share_ml_active.png) no-repeat center center;
      background-size: 29px 29px;
  }
  .share li .weixin {
      background: url(../img/share_wx.png) no-repeat center center;
      background-size: 29px 29px;
  }
  .share li .weixin:active {
      background: url(../img/share_wx_active.png) no-repeat center center;
      background-size: 29px 29px;
  }
  .share li .qzone {
      background: url(../img/share_qzone.png) no-repeat center center;
      background-size: 29px 29px;
  }
  .share li .qzone:active {
      background: url(../img/share_qzone_active.png) no-repeat center center;
      background-size: 29px 29px;
  }
.share li p {
  padding-top: 7px;
}
.hd {
  margin: 0 20px 0;
  position: relative;
  line-height: 68px;
  text-align: center;
}
.hd .bor {
  border-top: 1px solid #fff;
  border-bottom: 1px solid #fff;
  filter: alpha(opacity=40);
  opacity: 0.4;
  position: absolute;
  width: 100%;
  height: 100%;
}
.hd img {
  vertical-align: middle;
  width: 32px;
  height: 32px;
  padding: 3px;
  border: 2px solid #fff;
  border-radius: 50%;
  position: relative;
  z-index: 2;
  background: #B5BEC7;
  margin-right: 10px;
}
.hd .name {
  font-weight: bold;
  vertical-align: middle;
  color: #fff;
  font-size: 32px;
  white-space:nowrap;
  max-width: 240px;
  overflow: hidden;
  text-overflow:ellipsis;
  display: inline-block;
}
.hd .title {
  position: absolute;
  color: #fff;
  left: 50%;
  top: -7px;
  -webkit-transform: translate(-50%, 0);
  transform: translate(-50%, 0);
  line-height: 1;
}
.hd .title1 {
  position: absolute;
  color: #fff;
  left: 50%;
  top: -7px;
  -webkit-transform: translate(-50%, 0);
  transform: translate(-50%, 0);
  line-height: 1;
}
.hd .time {
  position: absolute;
  /*color: #1F9DE7;*/
  left: 50%;
  bottom: -11px;
  -webkit-transform: translate(-50%, 0);
  transform: translate(-50%, 0);
  background: url(../img/name.png) no-repeat center center;
  background-size: 70px 14px;
  font-size: 12px;
  width: 80px;
  height: 16px;
  padding-top: 5px;
  line-height: 1;
}
.animate-warp {
  text-align: center;
}
.animate-img {
  width: 65%;
  margin: 0 auto;
}
.animate-text {
  margin-top: -10px;
}
.animate-text img {
  width: 70%;
  position: relative;
  bottom: -15px;
}
.animate-text .p1 {
  color: #fff;
  font-size: 14px;
}
.animate-text .p2 {
  color: #fff;
  font-size: 12px;
  filter: alpha(opacity=50);
  opacity: 0.5;
}
.mygold-wrap {
  text-align: center;
  padding: 5px 0  20px;
  position: relative;
  bottom: -2px;
  z-index: 2;
}
.mygold-wrap .title img {
  width: 200px;
  min-height: 30px;
}
.mygold-wrap .list {
  min-height: 95px;
  padding-bottom: 24px;
}
.mygold-wrap .list img {
  width: 30px;
  margin: 0 5px;
}
.chart {
  padding: 0 10px 10px 0;
  min-height: 200px;
}
.chart-text {
  color: #fff;
  text-align: center;
  padding-top: 5px;
}
.chart-text .p1 {
  font-size: 20px;
  line-height: 1;
}
.chart-text .p2 {
  font-size: 12px;
  filter: alpha(opacity=80);
  opacity: 0.8;
}
.bgfff {
  background: #fff;
  padding-top: 20px;
  color: #676E76;
  max-width: 360px;
  margin: 0 auto;
}
.chart-legen .l {
  float: left;
  width: 49%;
  text-align: right;
}
.chart-legen .split-line {
  float: left;
  width: 1px;
  height: 32px;
  background: #949EA9;
  margin: 7px 0 0;
}
.chart-legen .r {
  float: left;
  width: 48%;
  text-align: left;
}
.chart-legen .inner {
  padding: 0 16px;
  display: inline-block;
}
.chart-legen .b {
  font-weight: 500;
  font-size: 28px;
  display: block;
  line-height: 1;
  color: #000;
}
.item .text strong {
  font-weight: 500;
  display: block;
  padding-top: 3px;
  line-height: 1;
  font-size: 18px;
}
.item {
  position: relative;
  height: 100px;
  border-top: 1px solid #eaeef2;
  margin: 0 20px;
  font-family: dinmedium;
}
.item .text span {
  color: #000;
}
.type1 .text {
  float: right;
  margin: 30px 10px 0 0;
}
.type2 .text {
  padding: 30px 0 0 30px;
}
.item1 img {
  position: absolute;
  left: 10px;
  top: 10px;
  width: 112px;
  height: 76px;
}
.item2 img {
  position: absolute;
  top: 20px;
  right: 10px;
  width: 94px;
  height: 66px;
}
.item3 img {
  position: absolute;
  left: 10px;
  bottom: 0;
  width: 120px;
  height: 68px;
}
.item4 img {
  position: absolute;
  right: 5px;
  bottom: 0;
  width: 136px;
  height: 70px;
}
.rank-hd {
  text-align: center;
  border-top: 1px solid #eaeef2;
  border-bottom: 1px solid #eaeef2;
  margin: 0 10px;
  height: 160px;
}
.rank-hd img {
  width: 208px;
}
.rank-list {
  padding: 0 30px;
}
.rank-list .list-item {
  border-bottom: 1px solid #eaeef2;
}
.rank-list .list-item .icon {
  width: 17px;
  float: left;
  margin: 26px 5px 0 5px;
}
.rank-list .list-item .label {
  float: left;
  margin: 24px 0 0 0;
  width: 125px;
}
.rank-list .list-item .pic {
  float: left;
  width: 44px;
  height: 68px;
  margin-right: 10px;
  text-align: center;
  position: relative;
}
.rank-list .list-item .pic .d {
  width: 40px;
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
.rank-list .list-item .pic .me {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  position: absolute;
  left: -1px;
  top: 12px;
  display: none;
}
.rank-list .is-me .pic .me {
  display: block;
}
.rank-list .list-item .text {
  font-size: 14px;
  line-height: 1;
}
.rank-list .list-item .text p {
  /*width: 100%;*/
  overflow: hidden;
  text-overflow:ellipsis;
  padding: 18px 0 4px 0;
}
.rank-list .list-item .text em {
  font-family: dinmedium;
  color: #000;
  padding-right: 3px;
}
.store-hd {
  text-align: center;
  margin: 0 10px;
  border-bottom: 1px solid #eaeef2;
  height: 160px;
}
.store-hd img {
  width: 230px;
}
.store-list {
  padding: 0 10px;
}
.store-list .list-item {
  height: 88px;
}
.store-list .icon {
  float: left;
  width: 60px;
  margin: 18px 0 0 24px;
}
.store-list .text {
  margin: 0 0 0 120px;
  padding-top: 20px;
  height: 68px;
  border-bottom: 1px solid #eaeef2;
  line-height: 1;
}
.store-list .text p {
  padding: 0 0 5px;
}
.store-list .text span {
  font-family: dinmedium;
  color: #000;
  font-size: 22px;
}
.store-list .text span em {
  padding: 0 5px 0 0;
  font-size: 24px;
}
.tool-hd {
  text-align: center;
  margin: 0 10px;
  border-top: 1px solid #eaeef2;
  border-bottom: 1px solid #eaeef2;
  height: 150px;
  padding-top: 10px;
}
.tool-hd img {
  width: 255px;
}
.tool-list {
  padding: 0 10px;
}
.tool-list .list-item {
  border-bottom: 1px solid #eaeef2;
}
.tool-list .icon {
  float: left;
  width: 60px;
  margin: 18px 0 0 24px;
}
.tool-list .list-item-resource .icon {
  width: 100px;
  margin: 25px 0 0 12px;
}
.tool-list .text {
  padding: 20px 0 10px 130px;
}
.tool-list .text .name {
  font-size: 16px;
  padding-bottom: 10px;
}
.tool-list .list-item-resource .name {
  font-weight: bold;
  padding-bottom: 0;
}
.tool-list .text p {
  font-size: 12px;
  line-height: 1.5;
}
.tool-list .list-item-resource .sc {
  border-bottom: 1px solid #BEC9D5;
}
.tool-list .list-item-resource .sc span {
  font-weight: bold;
  color: #1782DD;
  font-size: 18px;
  font-family: dinmedium;
}
.tool-list .list-item-resource .sc em {
  font-size: 11px;
}
.tool-list .list-item-resource ul {
  padding-top: 5px;
}
.tool-list .list-item-resource li {
  font-size: 12px;
  line-height: 18px;
}
.tool-list .list-item-resource li span {
  font-weight: bold;
}
.end {
  /*background: #F8F8F8;*/
  position: relative;
  min-height: 112px;
  border-bottom: 1px solid #eaeef2;
}
.end .icon {
  position: absolute;
  left: 0px;
  bottom: 0;
  width: 130px;
}
.end .text {
  padding: 25px 0 25px 140px;
  font-size: 12px;
  line-height: 1.5;
}
.end .text p .num {
  font-family: dinmedium;
  color: #000;
}
  @-webkit-keyframes cloudMove {
    0% {
      background-position: 0 0;
    }

    100% {
      background-position: -964px 0;
    }
  }
  @keyframes cloudMove {
    0% {
      background-position: 0 0;
    }

    100% {
      background-position: -964px 0;
    }
  }
  .animate-cloud {
    height: 22px;
    position: relative;
    bottom: -1px;
    z-index: 1;
      -webkit-animation:cloudMove 20s infinite linear;
      animation:cloudMove 20s infinite linear;
      background: #fff url(../img/bg_cloud_1928.png) repeat-x 0 0;
      background-size: auto 22px;
  }
@-webkit-keyframes spin {
  from {
    -webkit-transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
  }
}
@-moz-keyframes spin {
  from {
    -moz-transform: rotate(0deg);
  }
  to {
    -moz-transform: rotate(360deg);
  }
}
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
.pop-spin-move {
  position: absolute;
  left: 0;
  top: 22px;
  width: 100%;
  height: 100%;
  background:  url(../img/light.png) center center;
  background-size: 100% auto;
    -webkit-animation-duration: 20s;
    -moz-animation-duration: 20s;
    animation-duration: 20s;
    -webkit-animation-iteration-count:infinite;
    -moz-animation-iteration-count:infinite;
    animation-iteration-count:infinite;
    -webkit-animation-name: spin;
    -moz-animation-name: spin;
    animation-name: spin;
    -webkit-animation-timing-function: linear;
    -moz-animation-timing-function: linear;
    animation-timing-function: linear
}
  .badge-pop {
    border-radius: 5px;
    width: 270px;
    background: #fff;
    overflow: hidden;
    position: fixed;
    z-index: 30;
    left: 50%;
    top: 50%;
    margin: -150px 0 0 -135px;
  /*-webkit-transform: translate(-50%, -50%); */
  /*transform: translate(-50%, -50%);    */
  text-align: center;
  font-size: 12px;
  }
  .badge-pop .bd {
    background: #FFB100 url(../img/badge_bg.jpg) center center;
    background-size: 100% 100%;
    padding: 15px;
    color: #C44500;
    border-radius: 5px 5px 0 0;
    min-height: 150px;
    width: 240px;
    position: relative;
    overflow: hidden;
  }
  .badge-pop .bd img {
    width: 50%;
    position: relative;
    /*top: -3px;*/
    /*left: -1px;*/
    z-index: 11;
  }
  .badge-pop .bd .t {
    padding-bottom: 10px;
    min-height: 30px;
    font-size: 14px;
    padding-top: 15px;
  }
  .badge-pop .bd .b {
    font-size: 11px;
    line-height: 1.5;
    padding-top: 20px;
    min-height: 33px;
    margin: 0 20px;
  }
  .badge-pop .ft {
    padding: 15px;
  }
  .badge-pop .ft span {
    border: 1px solid #b7c1ce;
    border-radius: 20px;
    padding: 10px 0;
    display: block;
    color: #676E76;
    cursor: pointer;
  }
.animate-warp .gif {
  width: 50%;
  overflow: hidden;
  margin: 0 auto;
  min-height: 140px;
}
body.speed-rocket{}
.speed-rocket .page {
  background: #fff url(../img/bg_rocket.png) repeat-x;
  background-size: auto 630px;
}
.speed-rocket .hd .title {
  background: url(../img/bg_rocket.png) repeat-x 0 -20px;
  background-size: 15px 420px;
}
.speed-rocket .hd .time {
  color: #1f9de7;
}
.speed-rocket .mygold-wrap {
  background: url(../img/bg_rocket_yun.png) repeat-x left bottom;
  background-size: 100% auto;
}
.speed-rocket .animate-warp .gif {
  width: 45%;
}
.speed-rocket .animate-text {
  margin-top: -35px;
}
body.speed-car{}
.speed-car .page {
  background: #fff url(../img/bg_car.png) repeat-x;
  background-size: auto 630px;
}
.speed-car .hd .title {
  background: url(../img/bg_car.png) repeat-x 0 -20px;
  background-size: 15px 420px;
}
.speed-car .hd .time {
  color: #f9bd05;
}
.speed-car .mygold-wrap {
  background: url(../img/bg_car_city.png) repeat-x left bottom;
  background-size: 100% auto;
}
.speed-car .animate-warp .gif {
  padding: 80px 0 0;
  width: 75%;
  min-height: 100px;
}
body.speed-bike{}
.speed-bike .page {
  background: #fff url(../img/bg_bike.png) repeat-x;
  background-size: auto 630px;
}
.speed-bike .hd .title {
  background: url(../img/bg_bike.png) repeat-x 0 -20px;
  background-size: 15px 420px;
}
.speed-bike .hd .time {
  color: #31b166;
}
.speed-bike .mygold-wrap {
  background: url(../img/bg_bike_shu.png) repeat-x left bottom;
  background-size: 100% auto;
}
.speed-bike .animate-warp .gif {
  padding: 30px 0 0;
  width: 60%;
  min-height: 90px;
}
@media screen and (max-width: 320px) {
  .hd {
    margin: 0 10px;
  }
  .mygold-wrap {
    padding-bottom: 10px;
  }
  .item {
    margin: 0 10px;
  }
  .item .text strong {
    padding-top: 0;
  }
  .rank-list {
    padding: 0 10px;
  }
  .rank-list .list-item .icon {
    margin-left: 15px;
  }
  .rank-list .list-item .label {
    width: 115px;
  }
  .rank-list .list-item .text p {
    padding-top: 19px;
  }
  .tool-list .text {
    padding-left: 120px;
  }
  .end .icon {
    left: 0px;
    width: 110px;
  }
  .end .text {
    padding: 25px 0 25px 130px;
    font-size: 12px;
  }
  .speed-rocket .page {
    background-size: auto 555px;
  }
  .speed-car .page {
    background-size: auto 555px;
  }
  .speed-bike .page {
    background-size: auto 555px;
  }
}
.mask {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  background: #000;
  filter: alpha(opacity=50);
  opacity: 0.5;
  z-index: 5;
}
html.noscroll,body.noscroll {
  height: : 100%;
  overflow: hidden;
}
/*loading*/
#loadingMask {
  left: 0;
  top: 0;
  width: 100%;
  z-index: 40;
  background: #fff;
  height: 100%;
  position: absolute;
}
#circularG{
  position:fixed;
  width:58px;
  height:58px;
  left: 50%;
  top: 50%;
  margin: -29px 0 0 -29px;
  z-index: 50;
}

.circularG{
  position:absolute;
  background-color:rgb(193,201,209);
  width:14px;
  height:14px;
  border-radius:9px;
    -webkit-border-radius:9px;
    -moz-border-radius:9px;
  animation-name:bounce_circularG;
    -webkit-animation-name:bounce_circularG;
    -moz-animation-name:bounce_circularG;
  animation-duration:0.478s;
    -webkit-animation-duration:0.478s;
    -moz-animation-duration:0.478s;
  animation-iteration-count:infinite;
    -webkit-animation-iteration-count:infinite;
    -moz-animation-iteration-count:infinite;
  animation-direction:normal;
    -webkit-animation-direction:normal;
    -moz-animation-direction:normal;
}

#circularG_1{
  left:0;
  top:23px;
  animation-delay:0.178s;
    -webkit-animation-delay:0.178s;
    -moz-animation-delay:0.178s;
}

#circularG_2{
  left:6px;
  top:6px;
  animation-delay:0.244s;
    -webkit-animation-delay:0.244s;
    -moz-animation-delay:0.244s;
}

#circularG_3{
  top:0;
  left:23px;
  animation-delay:0.3s;
    -webkit-animation-delay:0.3s;
    -moz-animation-delay:0.3s;
}

#circularG_4{
  right:6px;
  top:6px;
  animation-delay:0.356s;
    -webkit-animation-delay:0.356s;
    -moz-animation-delay:0.356s;
}

#circularG_5{
  right:0;
  top:23px;
  animation-delay:0.422s;
    -webkit-animation-delay:0.422s;
    -moz-animation-delay:0.422s;
}

#circularG_6{
  right:6px;
  bottom:6px;
  animation-delay:0.478s;
    -webkit-animation-delay:0.478s;
    -moz-animation-delay:0.478s;
}

#circularG_7{
  left:23px;
  bottom:0;
  animation-delay:0.544s;
    -webkit-animation-delay:0.544s;
    -moz-animation-delay:0.544s;
}

#circularG_8{
  left:6px;
  bottom:6px;
  animation-delay:0.6s;
    -webkit-animation-delay:0.6s;
    -moz-animation-delay:0.6s;
}



@keyframes bounce_circularG{
  0%{
    transform:scale(1);
  }

  100%{
    transform:scale(.3);
  }
}

@-webkit-keyframes bounce_circularG{
  0%{
    -webkit-transform:scale(1);
  }

  100%{
    -webkit-transform:scale(.3);
  }
}

@-moz-keyframes bounce_circularG{
  0%{
    -moz-transform:scale(1);
  }

  100%{
    -moz-transform:scale(.3);
  }
}
/*loading end*/