* {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
   -ms-user-select: none;
       user-select: none;
  padding: 0;
  margin: 0;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}
html,
body {
  width: 100%;
  height: 100vh;
  font-size: 12px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.btn-back {
  top: 0.7rem !important;
  z-index: 10 !important;
}
.refresh {
  position: absolute;
  top: 46%;
  left: 50%;
  -webkit-transform: translate3d(-50%, -50%, 0);
          transform: translate3d(-50%, -50%, 0);
  background: #fff;
  width: 4.6rem;
  height: 0.8rem;
  line-height: 0.8rem;
  font-size: 0.32rem;
  text-align: center;
  border-radius: 4px;
  color: #413297;
  -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
          box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  display: none;
}
.refresh:active {
  background: rgba(255, 255, 255, 0.6);
}
.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.1);
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  z-index: 99;
  display: none;
}
.modal-wrapper {
  position: relative;
  width: 8.2rem;
  margin: 0 auto;
  height: 76%;
  padding: 0.3rem 0.4rem 0.5rem;
  border-radius: 0.3rem;
  background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#e0532e));
  background: linear-gradient(#fff, #e0532e);
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}
.modal-content {
  position: relative;
  padding: 0.7rem 0.3rem 0.3rem;
  height: calc(100% - 2rem);
  border-radius: 0.3rem;
  background-color: #fff;
  line-height: 1.5;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
}
.modal-title {
  text-align: center;
  font-size: 0.56rem;
  color: #fff;
  text-shadow: 0 0 3px #000;
  font-weight: bold;
  height: 1rem;
  line-height: 1rem;
  border-radius: 0.1rem;
  z-index: 1;
}
.modal-close {
  position: absolute;
  top: 0.2rem;
  right: 0.2rem;
  width: 0.8rem;
  height: 0.8rem;
  background: url(data:image/png;base64,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) no-repeat;
  background-size: 100%;
  z-index: 1;
}
.modal-item {
  position: relative;
  margin-bottom: 0.5rem;
  font-size: 0.36rem;
}
.modal-item-title {
  color: #000;
  font-weight: 500;
  font-size: 0.4rem;
}
.modal-item-desc {
  color: #000;
  margin-bottom: 0.1rem;
}
.modal-notice {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.3);
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  z-index: 99;
  display: none;
}
.modal-notice-text {
  font-size: 0.4rem;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
.loading_container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 99;
  display: none;
  background-color: #fff;
}
.loading_container .circular_spinner {
  position: absolute;
  top: 30%;
  left: 50%;
  width: 60px;
  height: 60px;
  padding: 10px;
  background: #fff;
  border-radius: 50%;
  -webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
          box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  -webkit-transform: translate3d(-50%, -50%, 0);
          transform: translate3d(-50%, -50%, 0);
}
.loading_container .circular_spinner .circular {
  display: inline-block;
  height: 40px;
  width: 40px;
  -webkit-animation: loading-rotate 2s linear infinite;
          animation: loading-rotate 2s linear infinite;
}
.loading_container .circular_spinner .path {
  -webkit-animation: loading-dash 1.5s ease-in-out infinite;
          animation: loading-dash 1.5s ease-in-out infinite;
  stroke-dasharray: 80, 120;
  stroke-dashoffset: 0;
  stroke-width: 8;
  stroke: #f66b60;
  stroke-linecap: round;
}
@-webkit-keyframes loading-dash {
  0% {
    stroke-dasharray: 0, 120;
    stroke-dashoffset: 0;
  }
  50% {
    stroke-dasharray: 80, 120;
    stroke-dashoffset: -45;
  }
  to {
    stroke-dasharray: 40, 160;
    stroke-dashoffset: -120;
  }
}
@keyframes loading-dash {
  0% {
    stroke-dasharray: 0, 120;
    stroke-dashoffset: 0;
  }
  50% {
    stroke-dasharray: 80, 120;
    stroke-dashoffset: -45;
  }
  to {
    stroke-dasharray: 40, 160;
    stroke-dashoffset: -120;
  }
}
@-webkit-keyframes loading-rotate {
  to {
    -webkit-transform: rotate(1turn);
            transform: rotate(1turn);
  }
}
@keyframes loading-rotate {
  to {
    -webkit-transform: rotate(1turn);
            transform: rotate(1turn);
  }
}
.loading_container .circular_loading {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 200px;
  height: 200px;
  padding: 10px;
  -webkit-transform: translate3d(-50%, -50%, 0);
          transform: translate3d(-50%, -50%, 0);
}
.loading_container .circular_loading .path {
  fill: #f66b60;
}
.loading_container .circular_loading .path.point1 {
  -webkit-animation: loading-scale 1s cubic-bezier(0.3, 0, 0.7, 1) infinite 0s;
          animation: loading-scale 1s cubic-bezier(0.3, 0, 0.7, 1) infinite 0s;
}
.loading_container .circular_loading .path.point2 {
  -webkit-animation: loading-scale 1s cubic-bezier(0.3, 0, 0.7, 1) infinite 0.125s;
          animation: loading-scale 1s cubic-bezier(0.3, 0, 0.7, 1) infinite 0.125s;
}
.loading_container .circular_loading .path.point3 {
  -webkit-animation: loading-scale 1s cubic-bezier(0.3, 0, 0.7, 1) infinite 0.25s;
          animation: loading-scale 1s cubic-bezier(0.3, 0, 0.7, 1) infinite 0.25s;
}
.loading_container .circular_loading .path.point4 {
  -webkit-animation: loading-scale 1s cubic-bezier(0.3, 0, 0.7, 1) infinite 0.375s;
          animation: loading-scale 1s cubic-bezier(0.3, 0, 0.7, 1) infinite 0.375s;
}
@-webkit-keyframes loading-scale {
  0% {
    -webkit-transform: scale3d(0, 0, 1);
            transform: scale3d(0, 0, 1);
  }
  50% {
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
  }
  to {
    -webkit-transform: scale3d(0, 0, 1);
            transform: scale3d(0, 0, 1);
  }
}
@keyframes loading-scale {
  0% {
    -webkit-transform: scale3d(0, 0, 1);
            transform: scale3d(0, 0, 1);
  }
  50% {
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
  }
  to {
    -webkit-transform: scale3d(0, 0, 1);
            transform: scale3d(0, 0, 1);
  }
}
html,
body {
  background-color: rgba(156, 19, 27, 0.9);
}
.game {
  display: block;
  margin: auto;
}