*,
html,
body {
  margin: 0;
  padding: 0;
}

#app {
  height: 100vh;
  box-sizing: border-box;
  margin: 0 auto;
  position: relative;
  font-family: 'charter_regular' !important;
}

@media screen and (min-width: 1026px) {
  #app {
    width: 375px;
  }

  #app .header {
    width: 100%;
    height: 135.5px;
    position: absolute;
    left: 0;
    top: 0;
  }
  #app .share {
    width: 26px;
    height: 26px;
    position: absolute;
    right: 14px;
    top: 14px;
    z-index: 2;
  }
  #app .center {
    padding: 135.5px 0 48px;
  }

  #app .footer {
    width: 375px;
    position: fixed;
    left: 50%;
    margin-left: -187.5px;
    bottom: 0;
    background-color: #bd864e;
    text-align: center;
  }

  #app .footer,
  .footer_height {
    height: 38px;
  }
  #app .footer p {
    color: #fff;
    line-height: 38px;
    font-size: 14px;
  }
  #app .center td {
    padding: 8px 0;
  }
  #app .center th {
    height: 48px;
    font-size: 16px;
    line-height: 48px;
  }
  #app .center td {
    font-size: 14px;
  }
  #app .center th img {
    width: 24px;
    height: 28px;
  }
  .sys-error-tips {
    margin-top: 40%;
    text-align: center;
    color: #6f6f6f;
    font-size: 18px;
    white-space: nowrap;
  }
  .sys-error-tips img {
    display: block;
    width: 180px;
    margin: 0 auto 30px;
  }
}

@media (max-width: 1024px) {
  #app {
    font-size: 0.36rem;
  }

  #app .header {
    width: 100vw;
    height: 2.72rem;
    position: absolute;
    left: 0;
    top: 0;
  }
  #app .share {
    width: 0.52rem;
    height: 0.52rem;
    position: absolute;
    right: 0.28rem;
    top: 0.28rem;
    z-index: 2;
  }
  #app .center {
    padding: 2.72rem 0 0.96rem;
  }
  #app .footer {
    width: 100%;
    position: fixed;
    left: 0;
    bottom: 0;
    background-color: #967650;
    text-align: center;
  }
  #app .footer,
  .footer_height {
    height: 0.88rem;
  }
  #app .footer p {
    color: #fff;
    line-height: 0.88rem;
    font-size: 0.28rem;
    transform: scale(0.8);
  }
  #app .center td {
    padding: 0.16rem 0;
  }
  #app .center th {
    height: 0.96rem;
    font-size: 0.32rem;
    line-height: 0.96rem;
  }
  #app .center td {
    font-size: 0.28rem;
  }
  #app .center th img {
    width: 0.48rem;
    height: 0.56rem;
  }
  .sys-error-tips {
    margin-top: 40%;
    text-align: center;
    color: #6f6f6f;
    font-size: 0.32rem;
    white-space: nowrap;
  }
  .sys-error-tips img {
    display: block;
    width: 3.6rem;
    margin: 0 auto 0.6rem;
  }
}

#app .center {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  overflow: hidden;
  text-align: center;
}

#app .center table {
  width: 100%;
  height: 100%;
  /*设置相邻单元格的边框间的距离*/
  border-spacing: 0;
  /*表格设置合并边框模型*/
  border-collapse: collapse;
  text-align: center;
  border: none;
  table-layout: fixed;
  word-wrap: break-word;
  margin: 0;
  padding: 0;
}

/*关键设置 tbody出现滚动条*/
table tbody {
  background: #ffffff;
  display: block;
  height: 100%;
  overflow-y: scroll;
}

table tbody::-webkit-scrollbar {
  display: none;
}

table thead,
tbody tr {
  display: table;
  width: 100%;
  table-layout: fixed;
}

table thead {
  color: #ffffff;
  background: #967650;
}

#app .center tr[data-rank='1'],
#app .center tr[data-rank='2'],
#app .center tr[data-rank='3'] {
  font-weight: bold;
}
@font-face {
  font-family: 'charter_bold_italic';
  src: url('./fonts/charter_bold_italic-webfont.eot');
  src: url('./fonts/charter_bold_italic-webfont.eot?#iefix') format('embedded-opentype'), url('./fonts/charter_bold_italic-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'charter_bold';
  src: url('./fonts/charter_bold-webfont.eot');
  src: url('./fonts/charter_bold-webfont.eot?#iefix') format('embedded-opentype'), url('./fonts/charter_bold-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'charter_italic';
  src: url('./fonts/charter_italic-webfont.eot');
  src: url('./fonts/charter_italic-webfont.eot?#iefix') format('embedded-opentype'), url('./fonts/charter_italic-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'charter_regular';
  src: url('./fonts/charter_regular-webfont.eot');
  src: url('./fonts/charter_regular-webfont.eot?#iefix') format('embedded-opentype'), url('./fonts/charter_regular-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}
*,
html,
body {
  margin: 0;
  padding: 0;
}

#app {
  height: 100vh;
  box-sizing: border-box;
  margin: 0 auto;
  position: relative;
  font-family: 'charter_regular' !important;
}

@media screen and (min-width: 1026px) {
  #app {
    width: 375px;
  }

  #app .header {
    width: 100%;
    height: 135.5px;
    position: absolute;
    left: 0;
    top: 0;
  }
  #app .share {
    width: 26px;
    height: 26px;
    position: absolute;
    right: 14px;
    top: 14px;
    z-index: 2;
  }
  #app .center {
    padding: 135.5px 0 48px;
  }

  #app .footer {
    width: 375px;
    position: fixed;
    left: 50%;
    margin-left: -187.5px;
    bottom: 0;
    background-color: #bd864e;
    text-align: center;
  }

  #app .footer,
  .footer_height {
    height: 38px;
  }
  #app .footer p {
    color: #fff;
    line-height: 38px;
    font-size: 14px;
  }
  #app .center td {
    padding: 8px 0;
  }
  #app .center th {
    height: 48px;
    font-size: 16px;
    line-height: 48px;
  }
  #app .center td {
    font-size: 14px;
  }
  #app .center th img {
    width: 24px;
    height: 28px;
  }
  .sys-error-tips {
    margin-top: 40%;
    text-align: center;
    color: #6f6f6f;
    font-size: 18px;
    white-space: nowrap;
  }
  .sys-error-tips img {
    display: block;
    width: 180px;
    margin: 0 auto 30px;
  }
}

@media (max-width: 1024px) {
  #app {
    font-size: 0.36rem;
  }

  #app .header {
    width: 100vw;
    height: 2.72rem;
    position: absolute;
    left: 0;
    top: 0;
  }
  #app .share {
    width: 0.52rem;
    height: 0.52rem;
    position: absolute;
    right: 0.28rem;
    top: 0.28rem;
    z-index: 2;
  }
  #app .center {
    padding: 2.72rem 0 0.96rem;
  }
  #app .footer {
    width: 100%;
    position: fixed;
    left: 0;
    bottom: 0;
    background-color: #967650;
    text-align: center;
  }
  #app .footer,
  .footer_height {
    height: 0.88rem;
  }
  #app .footer p {
    color: #fff;
    line-height: 0.88rem;
    font-size: 0.28rem;
    transform: scale(0.8);
  }
  #app .center td {
    padding: 0.16rem 0;
  }
  #app .center th {
    height: 0.96rem;
    font-size: 0.32rem;
    line-height: 0.96rem;
  }
  #app .center td {
    font-size: 0.28rem;
  }
  #app .center th img {
    width: 0.48rem;
    height: 0.56rem;
  }
  .sys-error-tips {
    margin-top: 40%;
    text-align: center;
    color: #6f6f6f;
    font-size: 0.32rem;
    white-space: nowrap;
  }
  .sys-error-tips img {
    display: block;
    width: 3.6rem;
    margin: 0 auto 0.6rem;
  }
}

#app .center {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  overflow: hidden;
  text-align: center;
}

#app .center table {
  width: 100%;
  height: 100%;
  /*设置相邻单元格的边框间的距离*/
  border-spacing: 0;
  /*表格设置合并边框模型*/
  border-collapse: collapse;
  text-align: center;
  border: none;
  table-layout: fixed;
  word-wrap: break-word;
  margin: 0;
  padding: 0;
}

/*关键设置 tbody出现滚动条*/
table tbody {
  background: #ffffff;
  display: block;
  height: 100%;
  overflow-y: scroll;
}

table tbody::-webkit-scrollbar {
  display: none;
}

table thead,
tbody tr {
  display: table;
  width: 100%;
  table-layout: fixed;
}

table thead {
  color: #ffffff;
  background: #967650;
}

#app .center tr[data-rank='1'],
#app .center tr[data-rank='2'],
#app .center tr[data-rank='3'] {
  font-weight: bold;
}
@font-face {
  font-family: 'charter_bold_italic';
  src: url('./fonts/charter_bold_italic-webfont.eot');
  src: url('./fonts/charter_bold_italic-webfont.eot?#iefix') format('embedded-opentype'), url('./fonts/charter_bold_italic-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'charter_bold';
  src: url('./fonts/charter_bold-webfont.eot');
  src: url('./fonts/charter_bold-webfont.eot?#iefix') format('embedded-opentype'), url('./fonts/charter_bold-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'charter_italic';
  src: url('./fonts/charter_italic-webfont.eot');
  src: url('./fonts/charter_italic-webfont.eot?#iefix') format('embedded-opentype'), url('./fonts/charter_italic-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'charter_regular';
  src: url('./fonts/charter_regular-webfont.eot');
  src: url('./fonts/charter_regular-webfont.eot?#iefix') format('embedded-opentype'), url('./fonts/charter_regular-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}