html {
  font-size: 100px;
  font-size: 13.33333vw;
}

@media screen and (max-width: 320px) {
  html {
    font-size: 42.66667px;
    font-size: 13.33333vw;
  }
}

@media screen and (min-width: 321px) and (max-width: 360px) {
  html {
    font-size: 48px;
    font-size: 13.33333vw;
  }
}

@media screen and (min-width: 361px) and (max-width: 375px) {
  html {
    font-size: 50px;
    font-size: 13.33333vw;
  }
}

@media screen and (min-width: 376px) and (max-width: 393px) {
  html {
    font-size: 52.4px;
    font-size: 13.33333vw;
  }
}

@media screen and (min-width: 394px) and (max-width: 412px) {
  html {
    font-size: 54.93333px;
    font-size: 13.33333vw;
  }
}

@media screen and (min-width: 413px) and (max-width: 414px) {
  html {
    font-size: 55.2px;
    font-size: 13.33333vw;
  }
}

@media screen and (min-width: 415px) and (max-width: 480px) {
  html {
    font-size: 64px;
    font-size: 13.33333vw;
  }
}

@media screen and (min-width: 481px) and (max-width: 540px) {
  html {
    font-size: 72px;
    font-size: 13.33333vw;
  }
}

@media screen and (min-width: 541px) and (max-width: 640px) {
  html {
    font-size: 85.33333px;
    font-size: 13.33333vw;
  }
}

@media screen and (min-width: 641px) and (max-width: 720px) {
  html {
    font-size: 96px;
    font-size: 13.33333vw;
  }
}

@media screen and (min-width: 721px) and (max-width: 750px) {
  html {
    font-size: 100px;
    font-size: 13.33333vw;
  }
}

@media screen and (min-width: 751px) {
  html {
    font-size: 100px;
  }
}

body {
  background-color: #f7f7f9;
}

.box {
  width: 7.5rem;
  margin: 0 auto;
}

.head {
  padding-top: 0.6rem;
  width: 7.5rem;
  margin: 0 auto 0.3rem;
}

.head p {
  text-align: center;
}

.head p:nth-child(1) {
  font-size: 0.38rem;
  color: #333333;
}

.head p:nth-child(2) {
  font-size: 0.24rem;
  color: #666666;
}

.trea-box {
  width: 6.9rem;
  margin: 0 auto;
  background-color: #ffffff;
  overflow: hidden;
  border-radius: 0.2rem 0.2rem 0 0;
}

.trea-box .tr-title {
  font-size: 0.3rem;
  color: #333333;
  font-weight: bold;
  margin-top: 0.3rem;
  margin-left: 0.3rem;
}

.trea-box .tr-icon {
  display: flex;
  margin-top: 0.2rem;
  flex-wrap: wrap;
}

.trea-box .tr-icon a {
  width: 1.4rem;
  margin: 0 0.4rem 0.3rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.trea-box .tr-icon a img {
  width: 1.24rem;
  height: 1.24rem;
}

.trea-box .tr-icon a p {
  white-space: nowrap;
  font-size: 0.24rem;
  color: #666666;
}

.trea2 {
  border-radius: 0;
  margin-top: 0.03rem;
}

.trea3 {
  border-radius: 0 0 0.2rem 0.2rem;
  margin-top: 0.03rem;
}

.bom-tips {
  text-align: center;
  font-size: 0.24rem;
  color: #999999;
  margin-top: 0.2rem;
}