div,
span,
p,
ul,
ol,
li,
img {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

ul,
ol {
  list-style: none;
}

a {
  color: #004B96;
  text-decoration: none;
}
body {
  max-width: 640px;
  min-width: 320px;
  margin: 0 auto;
  background-color: #f7f8f9;
  color: #14191e;
  font-size: 12px;
  line-height: 1.5;
  font-family: -apple-system, Hiragino Sans GB, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif;
  overflow-x: hidden;
}

@media (max-width: 640px) {
  body {
    -webkit-tap-highlight-color: transparent;
  }
}

.hide {
  display: none !important;
}
.fix-border-top,
.fix-border-bottom {
  position: relative;
}
.fix-border-top:after,
.fix-border-bottom:after {
  position: absolute;
  display: block;
  content: '';
  left: 0;
  right: 0;
  height: 1px;
  background: #f7f8f9;
  -webkit-transform: scaleY(0.5);
  transform: scaleY(0.5);
}
.fix-border-top:after {
  top: 0;
  -webkit-transform-origin: 0% 0%;
  transform-origin: 0% 0%;
}
.fix-border-bottom:after {
  bottom: 0;
  -webkit-transform-origin: 0% 100%;
  transform-origin: 0% 100%;
}

/* S loading */
.init-loading {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  background: #fff;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  position: fixed;
  z-index: 1000;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.init-loading-wrapper {
  width: 40px;
  height: 40px;
}
.init-loading-circle {
  width: 100%;
  height: 100%;
  border: 2px solid rgba(0, 0, 0, 0.1);
  border-top-color: rgba(0, 0, 0, 0.6);
  border-radius: 100%;
}
.fa-spin-round {
  -webkit-animation: fa-spin-round 0.9s infinite linear;
  animation: fa-spin-round 0.9s infinite linear;
}
@-webkit-keyframes fa-spin-round {
  0% {
    -webkit-transform: rotate(0);
    transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes fa-spin-round {
  0% {
    -webkit-transform: rotate(0);
    transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
.init-loading .init-loading-msg {
  line-height: 40px;
  text-align: center;
}
/* E loading */

.hb-footer {
  position: relative;
  width: 100%;
  text-align: center;
  height: 60px;
  line-height: 60px;
  font-size: 14px;
  color: rgba(0, 0, 0, 0.25);
}
.hb-footer p {
  margin: 0;
}
.hb-footer img {
  height: 20px;
  vertical-align: middle;
}
.btn-open-app {
  display: block;
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  line-height: 40px;
  text-align: center;
  border-radius: 4px;
  background: #14191e;
}
.primary-grd {
  background-image: -webkit-linear-gradient(325deg, #32bffe, #329afe);
  background-image: linear-gradient(125deg, #32bffe, #329afe);
}

.max-lv-1, .max-lv-2, .max-lv-3, .max-lv-4 {
  background-color: #4FC3F7;
} 
.max-lv-5, .max-lv-6, .max-lv-7, .max-lv-8, .max-lv-9 {
  background-color: #3BC995;
} 
.max-lv-10, .max-lv-11, .max-lv-12, .max-lv-13, .max-lv-14 {
  background-color: #FF9900;
} 
.max-lv-15, .max-lv-16, .max-lv-17, .max-lv-18, .max-lv-19 {
  background-color: #EB4D4B;
}
.max-lv-20, .max-lv-21, .max-lv-22, .max-lv-23, .max-lv-24, .max-lv-25, .max-lv-26, .max-lv-27, .max-lv-28, .max-lv-29, .max-lv-30, .max-lv-31, .max-lv-32, .max-lv-33, .max-lv-34 , .max-lv-35, .max-lv-36, .max-lv-37, .max-lv-38, .max-lv-39, .max-lv-40 {
  background-color: #14191E;
}

.level {
  overflow: hidden;
  transform: scale(0.5);
  -webkit-transform: scale(0.5);
  -moz-transform: scale(0.5);
  -ms-transform: scale(0.5);
  transform-origin: left;
  -webkit-transform-origin: left;
  -moz-transform-origin: left;
  -ms-transform-origin: left;
}
/* 账号等级渐变背景 */
.hb-lv-1, .hb-lv-2, .hb-lv-3 {
  background-image: -webkit-linear-gradient(315deg, rgb(232, 232, 232), rgb(208, 208, 208));
  background-image: linear-gradient(135deg, rgb(232, 232, 232), rgb(208, 208, 208))
}
.hb-lv-4, .hb-lv-5, .hb-lv-6 {
  background-image: -webkit-linear-gradient(315deg, rgb(150, 225, 38), rgb(128, 209, 91));
  background-image: linear-gradient(135deg, rgb(150, 225, 38), rgb(128, 209, 91))
}
.hb-lv-7, .hb-lv-8, .hb-lv-9 {
  background-image: -webkit-linear-gradient(315deg, rgb(50, 191, 254), rgb(50, 154, 254));
  background-image: linear-gradient(135deg, rgb(50, 191, 254), rgb(50, 154, 254))
}
.hb-lv-10, .hb-lv-11, .hb-lv-12 {
  background-image: -webkit-linear-gradient(315deg, rgb(247, 70, 254), rgb(214, 70, 254));
  background-image: linear-gradient(135deg, rgb(247, 70, 254), rgb(214, 70, 254))
}
.hb-lv-13, .hb-lv-14, .hb-lv-15 {
  background-image: -webkit-linear-gradient(315deg, rgb(254, 168, 37), rgb(254, 146, 37));
  background-image: linear-gradient(135deg, rgb(254, 168, 37), rgb(254, 146, 37))
}
.hb-lv-16, .hb-lv-17, .hb-lv-18 {
  background-image: -webkit-linear-gradient(315deg, rgb(254, 50, 126), rgb(238, 67, 96));
  background-image: linear-gradient(135deg, rgb(254, 50, 126), rgb(238, 67, 96))
}
.hb-lv-19, .hb-lv-20, .hb-lv-21 {
  background-image: -webkit-linear-gradient(315deg, rgb(50, 55, 60), rgb(20, 25, 30));
  background-image: linear-gradient(135deg, rgb(50, 55, 60), rgb(20, 25, 30))
}
.hb-lv-22, .hb-lv-23, .hb-lv-24, .hb-lv-25, .hb-lv-26, .hb-lv-27 {
  background-repeat: no-repeat;
  background-position: left;
  background-size: auto 100%;
  -webkit-animation: lv22-animate 7s linear infinite;
  -moz-animation: lv22-animate 7s linear infinite;
  -ms-animation: lv22-animate 7s linear infinite;
  animation: lv22-animate 7s linear infinite;
  -webkit-transform: translate3d(0,0,0) scale(0.5);
  -moz-transform: translate3d(0,0,0) scale(0.5);
  -ms-transform: translate3d(0,0,0) scale(0.5);
  transform: translate3d(0,0,0) scale(0.5);
}
.hb-lv-22, .hb-lv-23 {
  background-image: url('https://cdn.max-c.com/heybox/dailynews/img/8871d14fe5f364b219e8047e63f0a673.png?uri_type=image');
}
.hb-lv-24, .hb-lv-25 {
  background-image: url('https://cdn.max-c.com/heybox/dailynews/img/d49945ff8f3c19055014617a138fa142.png?uri_type=image');
}
.hb-lv-26, .hb-lv-27 {
  background-image: url('https://imgheybox.max-c.com/oa/2022/05/27/7d3e467ec7a37cf4e2dad81bdff8c07e.png?uri_type=image');
}
.hb-lv-28, .hb-lv-29 {
  position: relative;
}
.hb-lv-28::before,
.hb-lv-29::before {
  content: '';
  width: 184px;
  height: 184px;
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  background-repeat: no-repeat;
  background-position: left;
  background-size: 184px 184px;
  background-position: center center;
  background-image: url('https://imgheybox.max-c.com/oa/2023/04/07/82e09812538e029fd3046e56d32a311a.png?uri_type=image');
  -webkit-animation: lv28-animate 6s linear infinite;
  -moz-animation: lv28-animate 5s linear infinite;
  -ms-animation: lv28-animate 5s linear infinite;
  animation: lv28-animate 5s linear infinite;
  -webkit-transform-origin: center;
  -moz-transform-origin: center;
  -ms-transform-origin: center;
  transform-origin: center;
  z-index: 0;
}


@-webkit-keyframes lv28-animate {
  0% {
    transform: translate3d(-50%, -50%, 0) rotate(0);
  }
  100% {
    transform: translate3d(-50%, -50%, 0) rotate(1turn);
  }
}
@-moz-keyframes lv28-animate {
  0% {
    transform: translate3d(-50%, -50%, 0) rotate(0);
  }
  100% {
    transform: translate3d(-50%, -50%, 0) rotate(1turn);
  }
}
@-ms-keyframes lv28-animate {
  0% {
    transform: translate3d(-50%, -50%, 0) rotate(0);
  }
  100% {
    transform: translate3d(-50%, -50%, 0) rotate(1turn);
  }
}
@keyframes lv28-animate {
  0% {
    transform: translate3d(-50%, -50%, 0) rotate(0);
  }
  100% {
    transform: translate3d(-50%, -50%, 0) rotate(1turn);
  }
}

@-webkit-keyframes lv22-animate {
  0% {
    background-position: left;
  }
  100% {
    background-position: right;
  }
}
@-moz-keyframes lv22-animate {
  0% {
    background-position: left;
  }
  100% {
    background-position: right;
  }
}
@-ms-keyframes lv22-animate {
  0% {
    background-position: left;
  }
  100% {
    background-position: right;
  }
}
@keyframes lv22-animate {
  0% {
    background-position: left;
  }
  100% {
    background-position: right;
  }
}