html, body {
  background: #fff; }

.topBg {
  background: #f8f8f8;
  height: 45px;
  border-top: #aeadad; }

.topBg a {
  display: block;
  height: 40px;
  width: 50px;
  position: relative; }

.right-icon {
  padding-left: 20px;
  padding-top: 10px; }
  .right-icon span {
    width: 16px;
    height: 2px;
    background: #b7b7b7;
    margin-top: 5px;
    display: block; }

.pull_left {
  float: left; }

.pull_right {
  float: right; }

.arrow-left {
  border-top: solid #b7b7b7 1px;
  border-left: solid #b7b7b7 1px;
  display: inline-block;
  width: 15px;
  height: 15px;
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  margin-top: 15px;
  margin-left: 20px; }

.grid-top-icon {
  background-position: 0 0; }

.header_titleName {
  height: 30px;
  font-size: 16px;
  color: #333;
  text-align: center;
  position: absolute;
  left: 50%;
  margin-left: -3em;
  width: 6em;
  top: 9px;
  line-height: 26px; }

.marT {
  margin-top: 10px; }

.marR {
  margin-right: 10px; }

.rank-top-tab {
  height: 40px;
  display: block;
  border-top: solid 1px #b7b7b7;
  border-bottom: solid 1px #b7b7b7; }
  .rank-top-tab li {
    font-size: 14px;
    font-color: #000;
    height: 40px;
    text-align: center;
    display: inline-block;
    width: 59.6875%;
    float: left;
    line-height: 40px; }
  .rank-top-tab li:nth-of-type(2) {
    font-size: 14px;
    height: 40px;
    text-align: center;
    display: inline-block;
    width: 40.15625%;
    background: #f77f7f; }
    .rank-top-tab li:nth-of-type(2) a {
      color: #fff; }

.h1-titles {
  position: relative;
  height: 40px;
  line-height: 40px;
  border-bottom: solid 1px #b7b7b7;
  padding-left: 20px; }
  .h1-titles span {
    position: absolute;
    right: 20px;
    height: 10px;
    width: 10px;
    display: inline-block;
    border-top: solid 1px #b7b7b7;
    border-right: solid 1px #b7b7b7;
    transform: rotate(135deg);
    -webkit-transform: rotate(135deg);
    margin-top: 15px; }
  .h1-titles span.actives {
    border-top: solid 1px #01af63;
    border-right: solid 1px #01af63;
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg); }

div.active {
  color: #01af63;
  border-bottom: solid 1px #01af63; }

.ranklist-content {
  color: #595757;
  display: none; }
  .ranklist-content ol {
    height: 40px;
    line-height: 40px;
    color: #595757;
    background: #fffef2; }
    .ranklist-content ol li {
      height: 40px;
      text-align: center;
      float: left;
      font-size: 14px; }
    .ranklist-content ol li:nth-of-type(1) {
      width: 16%; }
    .ranklist-content ol li:nth-of-type(2) {
      width: 40%;
      text-align: left; }
    .ranklist-content ol li:nth-of-type(3) {
      width: 20%;
      text-align: center; }
    .ranklist-content ol li:nth-of-type(4) {
      width: 24%;
      text-align: center; }
  .ranklist-content ul li {
    border-bottom: dashed 1px #b7b7b7;
    height: 40px;
    line-height: 40px; }
    .ranklist-content ul li span {
      border: solid 1px #ff6969;
      color: #fc6b7b;
      text-align: center;
      display: block;
      height: 20px;
      line-height: 20px;
      width: 20px;
      margin-top: 8px;
      margin-left: 30%;
      border-radius: 10px; }
    .ranklist-content ul li div, .ranklist-content ul li h1, .ranklist-content ul li p, .ranklist-content ul li i {
      float: left; }
  .ranklist-content ul li:last-child {
    border: none;
    border-bottom: solid 1px #b7b7b7; }
  .ranklist-content .ranklist div {
    width: 16%;
    height: 40px;
    font-size: 12px;
    line-height: 40px; }
  .ranklist-content .ranklist h1 {
      height: 40px;
      overflow: hidden;
      display: block;
    width: 40%;
    font-size: 12px; }
  .ranklist-content .ranklist p {
    width: 20%;
    font-size: 12px;
    text-align: center; }
  .ranklist-content .ranklist i {
    width: 24%;
    font-size: 12px;
    text-align: center; }

.ranking-button {
  text-align: center;
  padding: 17px 0; }
  .ranking-button input {
    width: 124px;
    border: none;
    -webkit-appearance: none;
    height: 34px; }
  .ranking-button input {
    outline: none;
    margin-right: 8px;
    background: #ececf0;
    color: #000;
    font-size: 16px;
    font-family: arial; }
  .ranking-button input.active-rank-btn {
    background-color: #01af63;
    color: #fff; }

.side-content {
    width: 68.125%;
    background: #fff;
    position: fixed;
    top: 0;
    right: -68.125%;
    /*percentage( -436 / 640)*/
    z-index: 13;
    height: 100%;
    overflow-x: hidden;
    overflow-y: scroll;}
  .side-content span {
    display: none;
    position: fixed;
    height: 30px;
    width: 30px;
    color: #fff;
    font-size: 14px;
    border-radius: 15px;
    border: #fff 2px solid;
    background: #7c7c7c;
    line-height: 25px;
    text-align: center;
    top: 50%;
    left: 27%;
    /*27%;*/ }
  .side-content .show-hidden {
    background: #7c7c7c;
    height: 30px;
    width: 30px; }
  .side-content h2 {
    font-size: 14px;
    font-weight: bold;
    width: 87%;
    border-bottom: solid 1px #b7b7b7;
    height: 30px;
    line-height: 30px;
    margin: 5px 13px 0 15px; }
    .side-content h2 a {
      color: #01af63; }
  .side-content ul {
    margin-bottom: 15px; }
  .side-content ol {
    margin-left: 15px; }
.side-content ol a {
    display: inline-block;
    height: 35px;
    width: 43.75%;
    font-size: 12px;
    text-align: center;
    background: #eee;
    line-height: 35px;
    margin: 10px 8px 0 0;
    overflow: hidden;
}
.side-content ol a:visited  {
    color: #333;
}
.side-mask {
  display: none;
  background: rgba(0, 0, 0, 0.5);
  height: 100%;
  width: 100%;
  position: fixed;
  top: 0;
  z-index: 12; }

.ranking-target {
  display: none; }

.active-ranking-target {
  display: block; }