@charset "UTF-8";
/*
 * @Author: whj 
 * @Date: 2021-08-06 14:06:03 
 * @Last Modified by: whj
 * @Last Modified time: 2022-08-31 12:50:48
 */
* {
  padding: 0;
  margin: 0;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  cursor: default;
}
a,
button {
  -webkit-tap-highlight-color: transparent;
  outline: none;
}
img {
  vertical-align: top;
}
mark {
  background-color: transparent;
}
ul,
li {
  list-style: none;
}
html {
  font-size: 100px;
}
@font-face {
  font-family: 'iconfont';
  /* Project id 2719783 */
  src: url("//at.alicdn.com/t/font_2719783_y8ayte8sed.woff2?t=1628499125153") format("woff2"), url("//at.alicdn.com/t/font_2719783_y8ayte8sed.woff?t=1628499125153") format("woff"), url("//at.alicdn.com/t/font_2719783_y8ayte8sed.ttf?t=1628499125153") format("truetype");
}
.iconfont {
  font-family: "iconfont";
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.d-bg {
  position: fixed;
  z-index: 99;
  width: 100vw;
  height: 100vh;
  left: 0;
  top: 0;
  background-color: rgba(0, 0, 0, 0.85);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.d-bar {
  position: relative;
  width: 4.36rem;
  margin-top: -.2rem;
  -webkit-animation: aniDialog 0.1s ease;
          animation: aniDialog 0.1s ease;
  background: no-repeat 0 0;
  background-size: 100% 100%;
}
.d-hd {
  text-align: center;
  padding: 0.2rem 0;
}
.d-ft {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  padding: 0.2rem 0;
}
.d-close {
  position: absolute;
  z-index: 5;
  top: .02rem;
  right: .02rem;
  width: 0.4rem;
  height: 0.4rem;
  font-size: 0.4rem;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.d-close:hover {
    -webkit-animation: aniRotateHalf .3s 1 ease-out;
            animation: aniRotateHalf .3s 1 ease-out;
}
.d-btn {
  width: 0.74rem;
  height: 0.4rem;
}
.area-bar {
  width: 5.8rem;
}
.area-item {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  height: 0.86rem;
  margin: 0 auto .26rem;
  position: relative;
}
.area-item, .area-select {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 5rem;
  background-color: #eee;
}
.area-label {
  width: 1.28rem;
  text-align: right;
  margin-right: 0.18rem;
}
.area-ipt {
  width: 3.5rem;
  height: 0.8rem;
  line-height: 0.8rem;
}
.area-side {
  position: relative;
}
.area-side::after {
    content: "\25BC";
    position: absolute;
    right: .2rem;
    top: 0;
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
    -webkit-transition: all .5s ease-out;
    transition: all .5s ease-out;
}
.area-side.is-down::after {
    -webkit-transform: rotate(-180deg);
            transform: rotate(-180deg);
}
.area-select {
  z-index: 2;
  position: absolute;
  left: 0;
  top: 0.64rem;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  padding: 0.16rem .2rem;
}
.area-option {
  width: 46%;
  text-align: center;
  padding: 0.1rem 0;
  margin: 0 2%;
  border-radius: .06rem;
}
.area-option:hover {
    background-color: rgba(0, 0, 0, 0.1);
}
.area-select, .area-option {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.area-tips {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  color: #bc5316;
}
.area-tips__icon {
    margin-right: 0.1rem;
}
.d-msg {
  position: fixed;
  left: 50%;
  top: -100vh;
  z-index: 201;
  max-width: 7.2rem;
  padding: 0.1rem 0.2rem;
  border: 1px solid;
  border-radius: 0.1rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  word-break: break-all;
  -webkit-transform: translate(-50%);
          transform: translate(-50%);
  transition: all 0.3s ease-out;
  -moz-transition: all 0.3s ease-out;
  -webkit-transition: all 0.3s ease-out;
}
.d-msg__icon {
    margin-right: 0.1rem;
}
.d-msg__success {
    color: #67c23a;
    background-color: #f0f9eb;
    border-color: #e1f3d8;
}
.d-msg__warning {
    color: #e6a23c;
    background-color: #fdf6ec;
    border-color: #faecd8;
}
.d-msg__error {
    color: #f56c6c;
    background-color: #fef0f0;
    border-color: #fde2e2;
}
.d-msg__ua {
    font-size: 24px;
    color: #f56c6c;
    background-color: rgba(0, 0, 0, 0.9);
    width: 100%;
    max-width: 100%;
    height: 100%;
    border-radius: 0;
    border: 0;
    top: 0 !important;
}
.d-msg__info {
    color: #fff;
    background-color: rgba(0, 0, 0, 0.8);
}
#fn-loading {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 200;
  background-color: rgba(0, 0, 0, 0.75);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -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;
  width: 100vw;
  height: 100vh;
  color: #e28b69;
}
#fn-loading__pic {
    font-size: 0.36rem;
    -webkit-animation: aniRotate 1.5s linear infinite;
            animation: aniRotate 1.5s linear infinite;
}
.m-eq {
  display: inline-block;
  background: no-repeat 0 0;
  background-size: 100% 100%;
  width: 46px;
  height: 46px;
  position: relative;
}
.m-eq.is-lock::before {
    position: absolute;
    content: "";
    left: 0;
    top: 0;
    width: 46px;
    height: 46px;
    background: url("https://web-resource.17m3.com/cdn/m3-eq/ic-lock.png") no-repeat 0 0;
    background-size: 100% 100%;
}
.m-eq.is-num::after {
    position: absolute;
    content: attr(data-num);
    right: 1px;
    bottom: 1px;
    background-color: #111322;
    color: #d5d5d3;
    padding: 0 2px;
    font-size: 12px;
    line-height: 1;
    border: 0.01rem solid #a7966b;
}
.fn-tips {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 101;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  color: #fff;
}
.fn-tips__desc {
    width: 375px;
    font-size: 12px;
    background-color: #1b1a18;
    padding: 10px;
    background-color: #1f1c1a;
    border: 1px solid #76582a;
    -webkit-box-shadow: 0 0 1px #3d301c inset;
            box-shadow: 0 0 1px #3d301c inset;
}
.preload-bar {
  position: fixed;
  z-index: 100;
  left: 0;
  top: 0;
  width: 100%;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.8);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  color: #af4217;
  font-size: .32rem;
}
#fn-error {
  position: fixed;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.8);
  color: #fff;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -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;
  text-align: center;
  font-size: .48rem;
}
@media screen and (max-width: 639px) {
html {
    font-size: 50px;
}
.m-eq {
    width: 0.68rem;
    height: 0.68rem;
}
.m-eq.is-lock::before {
      width: 0.68rem;
      height: 0.68rem;
}
.m-eq.is-num::after {
      padding: 1px;
      font-size: 9px;
      line-height: 0.8;
}
.fn-tips {
    left: 0 !important;
    top: 0 !important;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.8);
}
.fn-tips__bd {
      width: 100%;
      max-width: 7.5rem;
}
.fn-tips__desc {
      font-size: 0.2rem;
      padding: 0.2rem;
      max-width: 7.5rem;
}
.fn-tips__pic {
      max-width: 100%;
      display: block;
      margin: 0 auto;
}
}
@-webkit-keyframes aniDialog {
0% {
    -webkit-transform: scale(0);
            transform: scale(0);
    opacity: 0;
}
100% {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 1;
}
}
@keyframes aniDialog {
0% {
    -webkit-transform: scale(0);
            transform: scale(0);
    opacity: 0;
}
100% {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 1;
}
}
@-webkit-keyframes aniRotate {
from {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
}
to {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
}
}
@keyframes aniRotate {
from {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
}
to {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
}
}
@-webkit-keyframes aniRotateHalf {
0% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
}
100% {
    -webkit-transform: rotate(90deg);
            transform: rotate(90deg);
}
}
@keyframes aniRotateHalf {
0% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
}
100% {
    -webkit-transform: rotate(90deg);
            transform: rotate(90deg);
}
}
/*
 * @Author: whj 
 * @Date: 2021-06-24 15:03:46 
 * @Last Modified by: whj
 * @Last Modified time: 2022-08-30 14:11:43
 */
html {
  font-size: 100px;
}
body {
  color: #5a4d3b;
  background-color: #110803;
}
.bg-none, a,
button {
  background: no-repeat center center transparent;
  background-size: 100% 100%;
}
a,
button {
  border: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  outline: none;
}
img {
  vertical-align: top;
}
mark {
  color: #af4217;
  background-color: transparent;
}
.fc-mark {
  color: #af4217;
}
@font-face {
  font-family: 'jinkai';
  src: url("https://web-resource.17m3.com/m3guo/202209/battle/HYJinKaiJ.ttf");
}
.eq-dom {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  padding-top: 50px;
}
.eq-item {
  margin: 0 10px;
}
.skin-avatar {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  overflow: hidden;
}
.skin-shine {
  position: absolute;
  display: block;
}
.skin-shine.is-1 {
    top: 0;
    left: 0;
    width: 100%;
    height: .04rem;
    background: -webkit-gradient(linear, left top, right top, from(transparent), to(#fff));
    background: linear-gradient(90deg, transparent, #fff);
    -webkit-animation: animate1 1s linear infinite;
            animation: animate1 1s linear infinite;
}
.skin-shine.is-2 {
    top: -100%;
    right: 0;
    width: .04rem;
    height: 100%;
    background: -webkit-gradient(linear, left top, left bottom, from(transparent), to(#fff));
    background: linear-gradient(180deg, transparent, #fff);
    -webkit-animation: animate2 1s linear infinite;
            animation: animate2 1s linear infinite;
    -webkit-animation-delay: 0.25s;
            animation-delay: 0.25s;
}
.skin-shine.is-3 {
    bottom: 0;
    right: 0;
    width: 100%;
    height: .04rem;
    background: -webkit-gradient(linear, right top, left top, from(transparent), to(#fff));
    background: linear-gradient(270deg, transparent, #fff);
    -webkit-animation: animate3 1s linear infinite;
            animation: animate3 1s linear infinite;
    -webkit-animation-delay: 0.50s;
            animation-delay: 0.50s;
}
.skin-shine.is-4 {
    bottom: -100%;
    left: 0;
    width: .04rem;
    height: 100%;
    background: -webkit-gradient(linear, left bottom, left top, from(transparent), to(#fff));
    background: linear-gradient(360deg, transparent, #fff);
    -webkit-animation: animate4 1s linear infinite;
            animation: animate4 1s linear infinite;
    -webkit-animation-delay: 0.75s;
            animation-delay: 0.75s;
}
@-webkit-keyframes animate1 {
0% {
    left: -100%;
}
50%,
  100% {
    left: 100%;
}
}
@keyframes animate1 {
0% {
    left: -100%;
}
50%,
  100% {
    left: 100%;
}
}
@-webkit-keyframes animate2 {
0% {
    top: -100%;
}
50%,
  100% {
    top: 100%;
}
}
@keyframes animate2 {
0% {
    top: -100%;
}
50%,
  100% {
    top: 100%;
}
}
@-webkit-keyframes animate3 {
0% {
    right: -100%;
}
50%,
  100% {
    right: 100%;
}
}
@keyframes animate3 {
0% {
    right: -100%;
}
50%,
  100% {
    right: 100%;
}
}
@-webkit-keyframes animate4 {
0% {
    bottom: -100%;
}
50%,
  100% {
    bottom: 100%;
}
}
@keyframes animate4 {
0% {
    bottom: -100%;
}
50%,
  100% {
    bottom: 100%;
}
}
@-webkit-keyframes aniMoveX {
0%,
  100% {
    -webkit-transform: translate(5px, 0);
            transform: translate(5px, 0);
}
50% {
    -webkit-transform: translate(-20px, -5px);
            transform: translate(-20px, -5px);
}
}
@keyframes aniMoveX {
0%,
  100% {
    -webkit-transform: translate(5px, 0);
            transform: translate(5px, 0);
}
50% {
    -webkit-transform: translate(-20px, -5px);
            transform: translate(-20px, -5px);
}
}
@-webkit-keyframes aniMoveKey {
0%,
  100% {
    -webkit-transform: translate(0, -12px);
            transform: translate(0, -12px);
}
50% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
}
}
@keyframes aniMoveKey {
0%,
  100% {
    -webkit-transform: translate(0, -12px);
            transform: translate(0, -12px);
}
50% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
}
}
@-webkit-keyframes aniShine {
0%,
  100% {
    opacity: 0;
}
50% {
    opacity: 1;
}
}
@keyframes aniShine {
0%,
  100% {
    opacity: 0;
}
50% {
    opacity: 1;
}
}
@media screen and (min-width: 320px) and (max-width: 750px) {
  /*
 * @Author: whj 
 * @Date: 2021-06-24 15:04:24 
 * @Last Modified by: whj
 * @Last Modified time: 2022-09-05 19:42:15
 */
html {
    font-size: 50px;
}
body {
    font: 0.24rem/1.6 '\5FAE\8F6F\96C5\9ED1';
    padding-top: 0 !important;
}
.m-eq {
    width: .68rem;
    height: .68rem;
}
.bg-no, .banner-logo, .banner-year, .user-bar, .container, .m-title, .open-info, .open-info::before, .open-info__hd, .open-info__label, .open-info__key::before, .open-info__key::after, .open-task__hd, .open-task__item, .open-task__label, .open-task__title, .collect-process, .collect-process__item::before, .collect-process__item::after, .collect-process__tip, .collect-box, .collect-box__item, .score-item, .score-my, .total-main, .total-main::before, .total-item, .rule-item::before, .nav-item, .area-tip::before, .area-side::after, .red-ft::before, .flower-label, .skin-item, .invitation-avatar, .pool-hd, .pool-item {
    background: no-repeat 0 0;
    background-size: 100% 100%;
}
.part {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    width: 7.5rem;
    margin: 0 auto;
    position: relative;
}
#app {
    max-width: 428px;
    width: 100%;
    margin: 0 auto;
}
.banner-bar {
    position: relative;
    width: 100%;
}
.banner-bg {
    width: 100%;
    height: 100%;
}
.banner-logo, .banner-year {
    position: absolute;
    text-indent: -999rem;
    z-index: 2;
}
.banner-logo {
    left: .2rem;
    top: .16rem;
    width: 1.47rem;
    height: 1.23rem;
    background-image: url("https://web-resource.17m3.com/m3guo/202209/battle/logo.png");
}
.banner-year {
    left: 1.64rem;
    top: .18rem;
    width: 1.26rem;
    height: 1.22rem;
    background-image: url("https://web-resource.17m3.com/m3guo/202209/battle/logo-2.png");
}
.user-bar {
    position: absolute;
    bottom: 3rem;
    left: 50%;
    margin-left: -3.75rem;
    width: 7.5rem;
    height: .52rem;
    color: #ffd283;
    background-image: url("https://web-resource.17m3.com/m3guo/202209/battle/app-login-bg.png");
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}
.user-link {
    color: #ffd283;
}
.user-link.is-login {
      color: #ffffff;
}
.container {
    padding-top: .16rem;
    height: 83.72rem;
    background-image: url("https://web-resource.17m3.com/m3guo/202209/battle/app-container-bg.jpg");
}
.m-title {
    width: 7.5rem;
    height: 1.44rem;
    text-indent: -999rem;
}
.m-title__next {
      color: #f7dbba;
      width: 6.7rem;
      text-align: center;
}
.open-bar {
    padding-bottom: 2.6rem;
}
.open-title {
    background-image: url("https://web-resource.17m3.com/m3guo/202209/battle/app-open-title.png");
}
.open-preview {
    width: 2.5rem;
    height: .55rem;
    margin-bottom: .34rem;
}
.open-info {
    width: 6.72rem;
    height: 6.45rem;
    margin-bottom: .85rem;
    background-image: url("https://web-resource.17m3.com/m3guo/202209/battle/app-info-bg.png");
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -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;
}
.open-info::before {
      position: absolute;
      content: "";
      left: -.4rem;
      bottom: -.36rem;
      pointer-events: none;
      width: 6.96rem;
      height: 1.02rem;
      background-image: url("https://web-resource.17m3.com/m3guo/202209/battle/app-open-side.png");
}
.open-info__hd {
      width: 4.28rem;
      height: .32rem;
      text-indent: -999rem;
      margin: .08rem 0 .16rem;
      background-image: url("https://web-resource.17m3.com/m3guo/202209/battle/app-info-hd-1.png");
}
.open-info__title {
      font-size: .28rem;
      font-family: 'jinkai';
      text-align: center;
      background: url("https://web-resource.17m3.com/m3guo/202209/battle/app-info-line.png") no-repeat center bottom;
      background-size: 3.22rem .09rem;
      padding-bottom: .14rem;
}
.open-info__desc {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
          -ms-flex-align: center;
              align-items: center;
      margin-bottom: .04rem;
}
.open-info__label {
      width: .46rem;
      height: .45rem;
      background-image: url("https://web-resource.17m3.com/m3guo/202209/battle/app-ic-open.png");
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: center;
          -ms-flex-pack: center;
              justify-content: center;
      -webkit-box-align: center;
          -ms-flex-align: center;
              align-items: center;
      color: #ffeabb;
      font-size: .2rem;
      margin-right: .2rem;
}
.open-info__condition {
      margin-bottom: .16rem;
}
.open-info__key {
      position: absolute;
      top: 2.64rem;
      z-index: 1;
      width: 3.92rem;
      height: 2.86rem;
}
.open-info__key::before, .open-info__key::after {
        position: absolute;
        content: "";
}
.open-info__key::before {
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background-image: url("https://web-resource.17m3.com/m3guo/202209/battle/app-lock-bg.png");
}
.open-info__key::after {
        left: 1.27rem;
        top: .26rem;
        width: 1.31rem;
        height: 2.41rem;
        background-image: url("https://web-resource.17m3.com/m3guo/202209/battle/app-lock.png");
        -webkit-animation: aniMoveKey infinite 2s linear;
                animation: aniMoveKey infinite 2s linear;
}
.open-info__btn {
      position: relative;
      z-index: 3;
      margin-top: 2.6rem;
      width: 3.05rem;
      height: .83rem;
      text-indent: -999rem;
      background-image: url("https://web-resource.17m3.com/m3guo/202209/battle/app-btn-key.png");
}
.open-info__btn.is-gray {
        background-image: url("https://web-resource.17m3.com/m3guo/202209/battle/app-btn-key-gray.png");
}
.open-info__btn.is-success {
        background-image: url("https://web-resource.17m3.com/m3guo/202209/battle/app-btn-key-success.png");
}
.open-task__hd {
    width: 3.78rem;
    height: .3rem;
    text-indent: -999rem;
    background-image: url("https://web-resource.17m3.com/m3guo/202209/battle/app-info-hd-2.png");
    margin-bottom: .3rem;
}
.open-task__list {
    width: 7.08rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
}
.open-task__item {
    width: 2.2rem;
    height: 4.33rem;
    background-image: url("https://web-resource.17m3.com/m3guo/202209/battle/app-task-bg.png");
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    padding-top: .34rem;
}
.open-task__label {
    width: .56rem;
    height: .56rem;
    background-image: url("https://web-resource.17m3.com/m3guo/202209/battle/app-ic-task.png");
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    margin-bottom: .12rem;
}
.open-task__title {
    width: 1.88rem;
    height: .53rem;
    background-image: url("https://web-resource.17m3.com/m3guo/202209/battle/app-task-line.png");
    font-size: .28rem;
    color: #69430e;
    font-family: 'jinkai';
    text-align: center;
    margin-bottom: .16rem;
}
.open-task__desc {
    color: #5a4d3b;
    font-size: .2rem;
    width: 1.6rem;
}
.open-task__btn {
    position: absolute;
    bottom: -.8rem;
    left: 50%;
    margin-left: -.93rem;
    width: 1.86rem;
    height: .68rem;
}
.collect-bar {
    padding-bottom: 3rem;
}
.collect-title {
    background-image: url("https://web-resource.17m3.com/m3guo/202209/battle/app-collect-title.png");
}
.collect-title__next {
      margin-bottom: 1.7rem;
}
.collect-process {
    position: relative;
    width: 7.5rem;
    height: 2.34rem;
    background-image: url("https://web-resource.17m3.com/m3guo/202209/battle/app-process.png");
    margin-bottom: .64rem;
}
.collect-process__item {
      position: absolute;
      width: 1.6rem;
      height: 1.02rem;
      font-size: .24rem;
      font-family: 'jinkai';
      color: #fbe1a9;
      text-align: center;
      padding-top: .74rem;
}
.collect-process__item::before, .collect-process__item::after {
        position: absolute;
        content: "";
        z-index: 2;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
}
.collect-process__item::before {
        background-image: url("https://web-resource.17m3.com/m3guo/202209/battle/app-process-item.png");
}
.collect-process__item::after {
        background-image: url("https://web-resource.17m3.com/m3guo/202209/battle/app-process-flower.png");
}
.collect-process__item.is-light {
        color: #f1b03c;
}
.collect-process__item.is-light::before {
          background-image: url("https://web-resource.17m3.com/m3guo/202209/battle/app-process-item-light.png");
}
.collect-process__item.is-light::after {
          background-image: url("https://web-resource.17m3.com/m3guo/202209/battle/app-process-flower-light.png");
}
.collect-process__item.is-light .collect-process__tip {
          color: #fbe7bc;
          background-image: url("https://web-resource.17m3.com/m3guo/202209/battle/app-process-tip-light.png");
}
.collect-process__item.is-0, .collect-process__item.is-10, .collect-process__item.is-20 {
        top: -.52rem;
}
.collect-process__item.is-40, .collect-process__item.is-60 {
        top: 1.64rem;
}
.collect-process__item.is-0, .collect-process__item.is-40 {
        left: 1.3rem;
}
.collect-process__item.is-10, .collect-process__item.is-60 {
        left: 3.36rem;
}
.collect-process__item.is-20 {
        left: 5.4rem;
}
.collect-process__tip {
      position: absolute;
      left: 50%;
      margin-left: -.8rem;
      width: 1.6rem;
      height: .93rem;
      padding: .1rem .2rem 0;
      background-image: url("https://web-resource.17m3.com/m3guo/202209/battle/app-process-tip.png");
      color: #fbe7bc;
      line-height: 1.3;
      font-size: .2rem;
      font-family: '\5FAE\8F6F\96C5\9ED1';
      overflow: hidden;
      -webkit-transition: all .5s ease-out;
      transition: all .5s ease-out;
      pointer-events: none;
      top: 0;
      z-index: 1;
      opacity: 0;
}
.collect-process__tip.is-show {
        top: -.96rem;
        opacity: 1;
}
.collect-info {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    color: #f7dbba;
    width: 6.2rem;
    margin-bottom: 1.28rem;
}
.collect-info__mark {
      color: #ffc23b;
}
.collect-info__btn {
      position: absolute;
      left: 50%;
      top: .6rem;
      margin-left: -1.25rem;
      width: 2.5rem;
      height: .55rem;
}
.collect-box {
    width: 7.12rem;
    height: 5.03rem;
    background-image: url("https://web-resource.17m3.com/m3guo/202209/battle/app-collect-bg.png");
    padding-top: .16rem;
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
}
.collect-box__item {
      width: 2.48rem;
      height: 4.21rem;
      margin: 0 .25rem;
      padding-top: 1rem;
      background-image: url("https://web-resource.17m3.com/m3guo/202209/battle/app-collect-item.png");
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
          -ms-flex-direction: column;
              flex-direction: column;
      -webkit-box-align: center;
          -ms-flex-align: center;
              align-items: center;
}
.collect-box__title {
      text-align: center;
      width: 100%;
      font-size: .28rem;
      color: #69430e;
      font-family: 'jinkai';
      padding-bottom: .12rem;
      background: url("https://web-resource.17m3.com/m3guo/202209/battle/app-collect-line.png") no-repeat center bottom;
      background-size: 2.1rem .09rem;
      margin-bottom: .25rem;
}
.collect-box__bd {
      width: 1.15rem;
      height: 1.15rem;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: center;
          -ms-flex-pack: center;
              justify-content: center;
      -webkit-box-align: center;
          -ms-flex-align: center;
              align-items: center;
      border: .01rem solid #d5b470;
      margin-bottom: .24rem;
}
.collect-box__bd .m-eq {
        -webkit-transform: scale(1.36);
                transform: scale(1.36);
}
.collect-box__btn {
      width: 2.06rem;
      height: .64rem;
      background-image: url("https://web-resource.17m3.com/m3guo/202209/battle/app-btn-cost.png");
      text-indent: -999rem;
}
.collect-box__btn.is-gray {
        background-image: url("https://web-resource.17m3.com/m3guo/202209/battle/app-btn-cost-gray.png");
}
.collect-box__open {
      position: absolute;
      left: 50%;
      margin-left: -1.52rem;
      bottom: -1.28rem;
      width: 3.05rem;
      height: .83rem;
      background-image: url("https://web-resource.17m3.com/m3guo/202209/battle/app-btn-open.png");
      text-indent: -999rem;
}
.collect-box__open.is-gray {
        cursor: default;
        background-image: url("https://web-resource.17m3.com/m3guo/202209/battle/app-btn-open-gray.png");
}
.score-bar {
    padding-bottom: 1.42rem;
}
.score-title {
    background-image: url("https://web-resource.17m3.com/m3guo/202209/battle/app-point-title.png");
}
.score-bd {
    width: 7.1rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    color: #69430e;
}
.score-item {
    width: 2.26rem;
    height: 6.14rem;
    margin-bottom: .46rem;
    background-image: url("https://web-resource.17m3.com/m3guo/202209/battle/app-point-bg.png");
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}
.score-my {
    position: absolute;
    width: 2.26rem;
    height: 1.86rem;
    left: 0;
    top: 1.82rem;
    background-image: url("https://web-resource.17m3.com/m3guo/202209/battle/app-point-my.png");
    text-align: center;
    padding-top: .6rem;
}
.score-my__num {
      color: #e9894a;
      font-size: .48rem;
      font-weight: bold;
      line-height: 1.1;
}
.score-my__desc {
      color: #cc611a;
      font-size: .2rem;
}
.score-task__title {
    padding-top: .4rem;
    font-size: .28rem;
    margin-bottom: .3rem;
    font-family: 'jinkai';
}
.score-task__desc {
    width: 1.6rem;
    text-align: center;
    font-size: .2rem;
    color: #6e5726;
    margin-bottom: 2.02rem;
}
.score-task__cost {
    height: .9rem;
}
.score-btn {
    width: 1.66rem;
    height: .64rem;
    text-indent: -999rem;
    margin-bottom: .1rem;
    background-image: url("https://web-resource.17m3.com/m3guo/202209/battle/app-btn-point.png");
}
.score-btn.is-gray {
      background-image: url("https://web-resource.17m3.com/m3guo/202209/battle/app-btn-point-gray.png");
}
.score-btn.is-success {
      background-image: url("https://web-resource.17m3.com/m3guo/202209/battle/app-btn-point-success.png");
}
.score-link {
    color: #4d644e;
    font-size: .24rem;
    text-decoration: underline;
}
.total-bar {
    padding-bottom: 1.7rem;
}
.total-title {
    background-image: url("https://web-resource.17m3.com/m3guo/202209/battle/app-total-title.png");
}
.total-main {
    width: 7.15rem;
    height: 8.78rem;
    background-image: url("https://web-resource.17m3.com/m3guo/202209/battle/app-total-bg.png");
    margin-top: 1.12rem;
    position: relative;
    padding-top: 3.22rem;
    color: #6e5726;
}
.total-main::before {
      position: absolute;
      content: "";
      z-index: 1;
      top: -.95rem;
      left: .5rem;
      width: 6.12rem;
      height: 4.9rem;
      background-image: url("https://web-resource.17m3.com/m3guo/202209/battle/app-total-side.png");
}
.total-score {
    position: absolute;
    z-index: 3;
    left: 0;
    top: 1.9rem;
    width: 100%;
    text-align: center;
}
.total-score__count {
      color: #af4217;
      font-size: .32rem;
      line-height: 1.2;
}
.total-bd {
    position: relative;
    z-index: 2;
    width: 6.61rem;
    margin: 0 auto;
}
.total-item {
    width: 6.61rem;
    height: 1.3rem;
    background-image: url("https://web-resource.17m3.com/m3guo/202209/battle/app-total-item.png");
    margin-bottom: .01rem;
    position: relative;
}
.total-item__name {
      display: none;
}
.total-item__title, .total-item__date, .total-item__eq, .total-item__btn, .total-item__ft {
      position: absolute;
}
.total-item__title {
      font-family: 'jinkai';
      color: #ffebaa;
      font-size: .28rem;
      width: .4rem;
      line-height: 1;
      left: .25rem;
      top: .2rem;
}
.total-item__date, .total-item__ft {
      font-size: .2rem;
      width: 2.7rem;
      left: 2rem;
}
.total-item__date {
      top: .34rem;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
}
.total-item__ft {
      top: .7rem;
}
.total-item__eq {
      width: .8rem;
      height: .8rem;
      background-color: #e8c67f;
      border: .01rem solid #debc77;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: center;
          -ms-flex-pack: center;
              justify-content: center;
      -webkit-box-align: center;
          -ms-flex-align: center;
              align-items: center;
      left: 1.05rem;
      top: .25rem;
}
.total-item__btn {
      right: .3rem;
      top: .34rem;
      width: 1.66rem;
      height: .64rem;
      text-indent: -999rem;
      background-image: url("https://web-resource.17m3.com/m3guo/202209/battle/app-btn-total.png");
}
.total-item__btn.is-success {
        background-image: url("https://web-resource.17m3.com/m3guo/202209/battle/app-btn-total-success.png");
}
.total-item__btn.is-gray {
        background-image: url("https://web-resource.17m3.com/m3guo/202209/battle/app-btn-total-gray.png");
}
.rule-title {
    background-image: url("https://web-resource.17m3.com/m3guo/202209/battle/app-rule-title.png");
}
.rule-list {
    width: 7.1rem;
}
.rule-item {
    position: relative;
    padding: 0 .2rem .2rem .54rem;
    color: #f7dbba;
}
.rule-item::before {
      position: absolute;
      content: "";
      width: .3rem;
      height: .3rem;
      background-image: url("https://web-resource.17m3.com/m3guo/202209/battle/app-ic-bird.png");
      left: 0;
      top: -.06rem;
}
.rule-answer {
    color: #ffc23b;
}
.nav-bar {
    position: fixed;
    z-index: 9;
    left: 0;
    width: 100%;
    background-color: #251412;
    border-top: .01rem solid #8d6c53;
    bottom: -5rem;
    -webkit-transition: all .5s ease-out;
    transition: all .5s ease-out;
}
.nav-bar.is-show {
      bottom: 0;
}
.nav-list {
    width: 100%;
    max-width: 414px;
    margin: 0 auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    padding: .06rem;
}
.nav-item {
    width: 1.43rem;
    height: 1.18rem;
    text-indent: -999rem;
    cursor: pointer;
}
.nav-item__5 {
    background-image: url("https://web-resource.17m3.com/m3guo/202209/battle/app-nav-5.png");
}
.nav-item__5.is-crt {
      background-image: url("https://web-resource.17m3.com/m3guo/202209/battle/app-nav-5-crt.png");
}
.nav-item__4 {
    background-image: url("https://web-resource.17m3.com/m3guo/202209/battle/app-nav-4.png");
}
.nav-item__4.is-crt {
      background-image: url("https://web-resource.17m3.com/m3guo/202209/battle/app-nav-4-crt.png");
}
.nav-item__3 {
    background-image: url("https://web-resource.17m3.com/m3guo/202209/battle/app-nav-3.png");
}
.nav-item__3.is-crt {
      background-image: url("https://web-resource.17m3.com/m3guo/202209/battle/app-nav-3-crt.png");
}
.nav-item__2 {
    background-image: url("https://web-resource.17m3.com/m3guo/202209/battle/app-nav-2.png");
}
.nav-item__2.is-crt {
      background-image: url("https://web-resource.17m3.com/m3guo/202209/battle/app-nav-2-crt.png");
}
.nav-item__1 {
    background-image: url("https://web-resource.17m3.com/m3guo/202209/battle/app-nav-1.png");
}
.nav-item__1.is-crt {
      background-image: url("https://web-resource.17m3.com/m3guo/202209/battle/app-nav-1-crt.png");
}
.d-bar {
    width: 6.52rem;
    min-height: 3.35rem;
    background-image: url("https://web-resource.17m3.com/m3guo/202209/battle/app-alert-bg.png");
    padding-top: .46rem;
    padding-bottom: .2rem;
    color: #54431e;
}
.d-btn {
    text-indent: -999rem;
    width: 2.26rem;
    height: .68rem;
    background-image: url("https://web-resource.17m3.com/m3guo/202209/battle/app-btn-sure.png");
    margin: 0 .2rem;
}
.d-hd {
    height: .4rem;
    background: no-repeat center center;
    background-size: auto 100%;
    text-indent: -999rem;
    margin-bottom: .36rem;
}
.d-close {
    text-indent: -999rem;
    width: .72rem;
    height: .72rem;
    top: auto;
    bottom: -1.2rem;
    left: 50%;
    margin-left: -.36rem;
    background-image: url("https://web-resource.17m3.com/m3guo/202209/battle/app-btn-close.png");
}
.alert-bar .d-bd {
    padding: .2rem .7rem 0;
    min-height: 1.4rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}
.area-bar {
    height: 5.15rem;
    background-image: url("https://web-resource.17m3.com/m3guo/202209/battle/app-area-bg.png");
}
.area-title {
    background-image: url("https://web-resource.17m3.com/m3guo/202209/battle/app-area-title.png");
}
.area-item {
    height: .8rem;
    width: 5.52rem;
    background-color: #fff5d4;
    border: .01rem solid #e4d9b6;
    margin-bottom: .2rem;
}
.area-label {
    margin-right: .4rem;
}
.area-tip {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    color: #b32929;
}
.area-tip::before {
      content: "";
      width: .3rem;
      height: .3rem;
      background-image: url("https://web-resource.17m3.com/m3guo/202209/battle/app-ic-tip.png");
      margin-right: .1rem;
}
.area-side::after {
    width: .3rem;
    height: .3rem;
    background-image: url("https://web-resource.17m3.com/m3guo/202209/battle/app-ic-sel.png");
    text-indent: -999rem;
    top: .25rem;
    right: 0;
}
.area-select {
    background-color: #fff5d4;
    width: 5.52rem;
    border: .01rem solid #e4d9b6;
    left: -.01rem;
    top: .8rem;
    z-index: 9;
}
.area-option {
    color: #95896e;
}
.area-option:hover {
      color: #54431e;
}
.buff-bar {
    height: 7.46rem;
    background-image: url("https://web-resource.17m3.com/m3guo/202209/battle/app-buff-bg.png");
}
.buff-bar .d-hd {
      background-image: url("https://web-resource.17m3.com/m3guo/202209/battle/app-buff-title.png");
}
.buff-item {
    border: .01rem solid #dec790;
    margin-bottom: .2rem;
    text-align: center;
}
.buff-label {
    line-height: .58rem;
    background-color: #e6c575;
}
.buff-desc {
    padding: .16rem .36rem;
    line-height: 1.8;
    font-size: .22rem;
}
.red-bar {
    width: 7.12rem;
    height: 7rem;
    background-image: url("https://web-resource.17m3.com/m3guo/202209/battle/app-red-bg.png");
}
.red-bar .d-hd {
      background-image: url("https://web-resource.17m3.com/m3guo/202209/battle/app-red-title.png");
}
.red-bar .d-bd {
      padding: 0 .5rem;
}
.red-hd {
    text-align: center;
    margin-bottom: .2rem;
}
.red-ft {
    width: 100%;
    position: relative;
    background-color: rgba(190, 145, 48, 0.1);
    border: .01rem solid #dcc48a;
    margin: 0 auto;
    padding: .2rem .28rem .2rem 1.7rem;
}
.red-ft::before {
      position: absolute;
      content: "";
      top: .28rem;
      left: .24rem;
      width: 1.21rem;
      height: 1.48rem;
      background-image: url("https://web-resource.17m3.com/m3guo/202209/battle/app-red-bag.png");
}
.red-ft__title {
      font-weight: bold;
      margin-bottom: 5px;
}
.flower-bar {
    width: 7.12rem;
    height: 4.3rem;
}
.flower-bar .d-hd {
      background-image: url("https://web-resource.17m3.com/m3guo/202209/battle/app-flower-title.png");
}
.flower-bar .d-bd {
      padding: 0 .5rem;
}
.flower-item {
    margin-bottom: .2rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    width: 6.14rem;
}
.flower-label {
    width: .46rem;
    height: .45rem;
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAC4AAAAtCAMAAADm86mrAAAAPFBMVEVHcEzKnT/KnT/KnT/KnT/KnT/KnT/KnT/KnT/KnT/KnT/KnT/KnT/KnT/KnT/KnT/KnT/KnT/KnT/KnT+G3Z8vAAAAE3RSTlMAaGouF8/V/hSCaS3QawUTW1qDyY1xWgAAAM1JREFUSMeV1NsSgyAMBNB4QfHS2tb//9cCYosSkmWfz8POTiZEbDZLFdmMqfDWfCbcWzMRwT5o2Ac9t6A/9DhiPup9h/xPQz7RgA+6jVr1N634TIue0YJnddHbldUFX9SsFzTjRZ15RTv/SLyqo18tqBP/9Hu/Fe38y/d5+gNcqB80PvTUjY1vg/i/RnyqdX/Vmr9r2eda8pwue1573zG+pIkaxpc15yWde1nfvaav3ulF1qkPetY+9ukxfXpURw/rw+M6+ArtfY12vqC/c7gyXLA2p0YAAAAASUVORK5CYII=);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    color: #ffeabb;
    font-size: .22rem;
}
.flower-desc {
    width: 5.5rem;
}
.skin-bar {
    width: 7.12rem;
    background-image: url("https://web-resource.17m3.com/m3guo/202209/battle/app-skin-bg.png");
}
.skin-bar .d-hd {
      background-image: url("https://web-resource.17m3.com/m3guo/202209/battle/skin-title.png");
}
.skin-bar .d-bd {
      padding-top: 0;
}
.skin-list {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    width: 5.8rem;
    margin: 0 auto;
}
.skin-item {
    width: 1.24rem;
    height: 1.24rem;
    background-image: url("https://web-resource.17m3.com/m3guo/202209/battle/app-skin-hero-default.png");
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    margin: 0 .1rem .2rem;
    position: relative;
}
.skin-item.is-lock {
      position: relative;
}
.skin-item.is-lock::before {
        position: absolute;
        z-index: 2;
        content: "";
        left: 0;
        top: 0;
        width: 1.24rem;
        height: 1.24rem;
        background: url("https://web-resource.17m3.com/m3guo/202209/battle/skin-lock.png") no-repeat center center;
        background-size: 1rem 1rem;
        pointer-events: none;
}
.skin-avatar {
    width: 1.1rem;
    height: 1.1rem;
}
.skin-avatar__pic {
      width: 1rem;
      height: 1rem;
}
.skin-avatar__eq {
      position: absolute;
      width: 100%;
      height: 100%;
      opacity: 0;
}
.invitation-bar {
    width: 6.52rem;
    height: 6.45rem;
    background-image: url("https://web-resource.17m3.com/m3guo/202209/battle/app-copy-bg.png");
}
.invitation-bar .d-btn {
      width: 2.1rem;
      height: .52rem;
}
.invitation-bar .d-ft {
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
          -ms-flex-direction: column;
              flex-direction: column;
      -webkit-box-align: center;
          -ms-flex-align: center;
              align-items: center;
}
.invitation-title {
    background-image: url("https://web-resource.17m3.com/m3guo/202209/battle/copy-title.png");
}
.invitation-bd {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    margin: 0 auto;
    width: 5rem;
}
.invitation-desc {
    margin-bottom: .24rem;
}
.invitation-list {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    width: 100%;
    margin-bottom: .2rem;
}
.invitation-item {
    width: 33.333%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}
.invitation-avatar {
    width: 1.09rem;
    height: 1.09rem;
    background-image: url("https://web-resource.17m3.com/m3guo/202209/battle/copy-default.png");
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    margin-bottom: .1rem;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}
.invitation-avatar__pic {
      width: .99rem;
      height: .99rem;
      border-radius: 50%;
}
.invitation-nick {
    color: #9d6f23;
}
.invitation-add {
    text-indent: -999rem;
    width: 1.09rem;
    height: 1.09rem;
    background-image: url("https://web-resource.17m3.com/m3guo/202209/battle/copy-add.png");
    margin-bottom: .1rem;
}
.invitation-copy {
    width: 5rem;
    font-size: .2rem;
    margin-bottom: .3rem;
    color: #95896e;
}
.pool-bar {
    width: 7.12rem;
    height: 10.4rem;
    background-image: url("https://web-resource.17m3.com/m3guo/202209/battle/app-pool-bg.png");
}
.pool-title {
    background-image: url("https://web-resource.17m3.com/m3guo/202209/battle/app-pool-title.png");
}
.pool-tip {
    width: 4.6rem;
    margin: 0 auto .3rem;
}
.pool-bd {
    width: 6.7rem;
    height: 7.1rem;
    margin: 0 auto;
    overflow: auto;
}
.pool-bd::-webkit-scrollbar {
      width: .08rem;
}
.pool-bd::-webkit-scrollbar-thumb {
      background-color: #6e5726;
      border-radius: .04rem;
      width: .06rem;
}
.pool-bd::-webkit-scrollbar-track {
      border-radius: .04rem;
      background-color: #e2d5b7;
      border: .01rem solid #dcc48a;
}
.pool-hd {
    width: 3.22rem;
    height: .56rem;
    text-indent: -999rem;
    margin: 0 auto .2rem;
}
.pool-hd.is-skin {
      background-image: url("https://web-resource.17m3.com/m3guo/202209/battle/app-pool-skin-title.png");
}
.pool-hd.is-goods {
      background-image: url("https://web-resource.17m3.com/m3guo/202209/battle/app-pool-goods-title.png");
}
.pool-list {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    width: 6.2rem;
    margin: 0 auto .3rem;
}
.pool-item {
    width: 1.24rem;
    height: 1.24rem;
    background-image: url("https://web-resource.17m3.com/m3guo/202209/battle/skin-hero-default.png");
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}
.pool-item .m-eq {
      -webkit-transform: scale(1.36);
              transform: scale(1.36);
}
.gift-tip {
    text-align: center;
}
.btn-gift {
    text-indent: -999rem;
    background-image: url("https://web-resource.17m3.com/m3guo/202209/battle/app-btn-gift.png");
}
.btn-more {
    text-indent: -999rem;
    background-image: url("https://web-resource.17m3.com/m3guo/202209/battle/app-btn-more.png");
}
.btn-open {
    text-indent: -999rem;
    background-image: url("https://web-resource.17m3.com/m3guo/202209/battle/app-btn-open.png");
}
.btn-preview {
    text-indent: -999rem;
    background-image: url("https://web-resource.17m3.com/m3guo/202209/battle/app-btn-preview.png");
}
.btn-refresh {
    text-indent: -999rem;
    background-image: url("https://web-resource.17m3.com/m3guo/202209/battle/app-btn-refresh.png");
}
.btn-think {
    text-indent: -999rem;
    background-image: url("https://web-resource.17m3.com/m3guo/202209/battle/app-btn-think.png");
}
.btn-copy {
    text-indent: -999rem;
    background-image: url("https://web-resource.17m3.com/m3guo/202209/battle/app-btn-copy.png");
}
}
@media screen and (min-width: 751px) {
  /*
 * @Author: whj 
 * @Date: 2021-06-24 15:04:20 
 * @Last Modified by: whj
 * @Last Modified time: 2022-09-05 19:42:33
 */
.topBar,
  #M3-footer {
    display: block;
}
body {
    font: 16px/1.6 '\5FAE\8F6F\96C5\9ED1';
}
.part {
    width: 100%;
    max-width: 1920px;
    min-width: 1400px;
    margin: 0 auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    position: relative;
}
.m-title {
    width: 1200px;
    height: 148px;
    background: no-repeat center top;
    text-indent: -9999px;
}
.m-title__next {
      color: #f7dbba;
      margin-top: -8px;
}
.banner-bar {
    overflow: hidden;
    height: 917px;
    background: url("https://web-resource.17m3.com/m3guo/202209/battle/banner-bg.jpg") no-repeat center top;
}
.banner-bar::before {
      content: "";
      position: absolute;
      z-index: 2;
      left: 50%;
      bottom: 0;
      margin-left: -960px;
      width: 1920px;
      height: 780px;
      background: url("https://web-resource.17m3.com/m3guo/202209/battle/banner-before.png") no-repeat center top;
      pointer-events: none;
}
.banner-logo, .banner-year, .banner-slogan {
    position: absolute;
    z-index: 5;
    background: no-repeat 0 0;
    text-indent: -9999px;
}
.banner-logo {
    top: 32px;
    left: 32px;
    width: 147px;
    height: 123px;
    background-image: url("https://web-resource.17m3.com/m3guo/202209/battle/logo.png");
}
.banner-year {
    top: 30px;
    left: 170px;
    width: 126px;
    height: 122px;
    background-image: url("https://web-resource.17m3.com/m3guo/202209/battle/logo-2.png");
}
.banner-slogan {
    width: 831px;
    height: 432px;
    left: 50%;
    top: 68px;
    margin-left: -610px;
}
.banner-video {
    position: absolute;
    z-index: 1;
    left: 50%;
    top: 0;
    margin-left: -960px;
}
.user-bar {
    position: absolute;
    z-index: 5;
    left: 50%;
    margin-left: -359px;
    top: 710px;
    width: 718px;
    height: 31px;
    background: url("https://web-resource.17m3.com/m3guo/202209/battle/login-bg.png") no-repeat 0 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    color: #ffd283;
}
.user-link {
    color: #ffd283;
    font-size: 16px;
}
.user-link.is-login {
      color: #ffffff;
}
.container {
    max-width: 1920px;
    margin: 0 auto;
    height: 5035px;
    padding-top: 20px;
    background: url("https://web-resource.17m3.com/m3guo/202209/battle/container-bg.jpg") no-repeat center top;
    position: relative;
}
.container::before, .container::after {
      position: absolute;
      content: "";
      pointer-events: none;
      background: no-repeat 0 0;
}
.container::before {
      top: 408px;
      left: 12px;
      width: 296px;
      height: 436px;
      background-image: url("https://web-resource.17m3.com/m3guo/202209/battle/side-birds.png");
}
.container::after {
      top: 325px;
      left: 0;
      width: 507px;
      height: 448px;
      background-image: url("https://web-resource.17m3.com/m3guo/202209/battle/side-shine.png");
      -webkit-animation: aniShine infinite 2s linear;
              animation: aniShine infinite 2s linear;
}
.open-bar {
    height: 1092px;
}
.open-title {
    background-image: url("https://web-resource.17m3.com/m3guo/202209/battle/open-title.png");
    margin-bottom: 12px;
}
.open-preview {
    position: absolute;
    left: 50%;
    top: 160px;
    margin-left: 474px;
    width: 145px;
    height: 38px;
    text-indent: -9999px;
}
.open-info {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    margin-bottom: 56px;
    width: 1202px;
    height: 275px;
    padding: 46px 70px 0;
    background: url("https://web-resource.17m3.com/m3guo/202209/battle/open-bg.png") no-repeat 0 0;
    position: relative;
}
.open-info::before {
      position: absolute;
      content: "";
      left: -60px;
      bottom: -30px;
      pointer-events: none;
      width: 880px;
      height: 92px;
      background: url("https://web-resource.17m3.com/m3guo/202209/battle/open-side.png") no-repeat 0 0;
      -webkit-animation: aniMoveX infinite 5s linear;
              animation: aniMoveX infinite 5s linear;
}
.open-info__hd {
      width: 427px;
      height: 27px;
      background: url("https://web-resource.17m3.com/m3guo/202209/battle/info-hd-1.png") no-repeat 0 0;
      text-indent: -9999px;
      margin-bottom: 22px;
}
.open-info__item, .open-info__lock {
      width: 278px;
}
.open-info__title {
      font-family: 'jinkai';
      font-size: 24px;
      color: #69430e;
      background: url("https://web-resource.17m3.com/m3guo/202209/battle/info-line.png") no-repeat center bottom;
      padding-bottom: 10px;
      text-align: center;
      margin-bottom: 27px;
}
.open-info__desc {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
          -ms-flex-align: center;
              align-items: center;
      margin-bottom: 12px;
}
.open-info__label {
      width: 30px;
      height: 30px;
      background: url("https://web-resource.17m3.com/m3guo/202209/battle/ic-open.png") no-repeat 0 0;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: center;
          -ms-flex-pack: center;
              justify-content: center;
      -webkit-box-align: center;
          -ms-flex-align: center;
              align-items: center;
      color: #ffeabb;
      font-size: 14px;
      margin-right: 15px;
}
.open-info__key {
      width: 112px;
      height: 212px;
      background: url("https://web-resource.17m3.com/m3guo/202209/battle/lock.png") no-repeat 0 0;
      -webkit-animation: aniMoveKey infinite 2s linear;
              animation: aniMoveKey infinite 2s linear;
}
.open-info__btn {
      margin-top: 20px;
      width: 278px;
      height: 76px;
      text-indent: -9999px;
      background-image: url("https://web-resource.17m3.com/m3guo/202209/battle/btn-key.png");
}
.open-info__btn.is-gray {
        cursor: default;
        background-image: url("https://web-resource.17m3.com/m3guo/202209/battle/btn-key-gray.png");
}
.open-info__btn.is-success {
        background-image: url("https://web-resource.17m3.com/m3guo/202209/battle/btn-key-success.png");
}
.open-task {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    width: 1290px;
}
.open-task__hd {
      width: 377px;
      height: 27px;
      background: url("https://web-resource.17m3.com/m3guo/202209/battle/info-hd-2.png") no-repeat center top;
      text-indent: -9999px;
      margin-bottom: 23px;
}
.open-task__list {
      width: 100%;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: justify;
          -ms-flex-pack: justify;
              justify-content: space-between;
}
.open-task__item {
      width: 411px;
      height: 385px;
      background: url("https://web-resource.17m3.com/m3guo/202209/battle/task-bg.png") no-repeat 0 0;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
          -ms-flex-direction: column;
              flex-direction: column;
      -webkit-box-align: center;
          -ms-flex-align: center;
              align-items: center;
      padding-top: 32px;
}
.open-task__label {
      width: 38px;
      height: 38px;
      background: url("https://web-resource.17m3.com/m3guo/202209/battle/ic-task.png") no-repeat 0 0;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: center;
          -ms-flex-pack: center;
              justify-content: center;
      -webkit-box-align: center;
          -ms-flex-align: center;
              align-items: center;
      color: #ba9547;
      font-size: 14px;
      margin-bottom: 5px;
}
.open-task__title {
      font-size: 24px;
      font-family: 'jinkai';
      height: 53px;
      background: url("https://web-resource.17m3.com/m3guo/202209/battle/task-line.png") no-repeat center top;
      width: 100%;
      text-align: center;
      margin-bottom: 28px;
      color: #69430e;
}
.open-task__desc {
      color: #5a4d3b;
      width: 292px;
      height: 108px;
}
.open-task__btn {
      width: 186px;
      height: 48px;
      text-indent: -9999px;
}
.collect-bar {
    height: 1125px;
}
.collect-title {
    background-image: url("https://web-resource.17m3.com/m3guo/202209/battle/collect-title.png");
}
.collect-process {
    position: absolute;
    left: 50%;
    top: 290px;
    margin-left: -780px;
    width: 1560px;
    height: 19px;
    background: url("https://web-resource.17m3.com/m3guo/202209/battle/process.png") no-repeat 0 0;
}
.collect-process__item {
      position: absolute;
      top: -38px;
      width: 111px;
      height: 82px;
      font-family: 'jinkai';
      font-size: 24px;
      color: #fbdfa8;
      padding-top: 70px;
      text-align: center;
}
.collect-process__item::before, .collect-process__item::after {
        position: absolute;
        content: "";
        left: 0;
        top: 0;
        background: no-repeat 0 0;
        width: 100%;
        height: 100%;
        -webkit-transition: all .5s ease-out;
        transition: all .5s ease-out;
}
.collect-process__item::before {
        background-image: url("https://web-resource.17m3.com/m3guo/202209/battle/process-item.png");
}
.collect-process__item::after {
        background-image: url("https://web-resource.17m3.com/m3guo/202209/battle/process-flower.png");
}
.collect-process__item:hover::after {
        background-image: url("https://web-resource.17m3.com/m3guo/202209/battle/process-flower-light.png");
}
.collect-process__item.is-light {
        color: #f7c14a;
}
.collect-process__item.is-light::before {
          background-image: url("https://web-resource.17m3.com/m3guo/202209/battle/process-item-light.png");
}
.collect-process__item.is-light::after {
          background-image: url("https://web-resource.17m3.com/m3guo/202209/battle/process-flower-light.png");
}
.collect-process__item.is-light .collect-process__tip {
          background-image: url("https://web-resource.17m3.com/m3guo/202209/battle/process-tip-light.png");
}
.collect-process__item.is-0 {
        left: 200px;
}
.collect-process__item.is-10 {
        left: 375px;
}
.collect-process__item.is-20 {
        left: 550px;
}
.collect-process__item.is-40 {
        left: 900px;
}
.collect-process__item.is-60 {
        left: 1250px;
}
.collect-process__tip {
      position: absolute;
      top: 0;
      left: 50%;
      margin-left: -80px;
      width: 160px;
      text-align: center;
      height: 0;
      overflow: hidden;
      -webkit-transition: all .3s ease-out;
      transition: all .3s ease-out;
      background: url("https://web-resource.17m3.com/m3guo/202209/battle/process-tip.png") no-repeat 0 0;
      font-size: 14px;
      font-family: '\5FAE\8F6F\96C5\9ED1';
}
.collect-process__tip.is-show {
        top: -67px;
        height: 63px;
        line-height: 48px;
        color: #fbe7bc;
}
.collect-info {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: end;
        -ms-flex-pack: end;
            justify-content: flex-end;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    width: 1250px;
    margin-top: 217px;
    margin-bottom: 50px;
    color: #f7dbba;
}
.collect-info__item {
      margin-left: 80px;
}
.collect-info__mark {
      color: #ffc23b;
      font-size: 20px;
}
.collect-info__btn {
      width: 145px;
      height: 38px;
      text-indent: -9999px;
      margin-left: 80px;
}
.collect-info__open {
      padding: 5px;
      background-color: palevioletred;
}
.collect-info__open.is-gray {
        cursor: default;
        background-color: #eee;
}
.collect-box {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 1283px;
    height: 433px;
    background: url("https://web-resource.17m3.com/m3guo/202209/battle/collect-bg.png") no-repeat 0 0;
    position: relative;
    padding-left: 506px;
    padding-top: 16px;
}
.collect-box::before {
      position: absolute;
      content: "";
      left: -64px;
      top: -58px;
      width: 548px;
      height: 590px;
      background: url("https://web-resource.17m3.com/m3guo/202209/battle/collect-side.png") no-repeat 0 0;
}
.collect-box__item {
      width: 248px;
      height: 366px;
      background: url("https://web-resource.17m3.com/m3guo/202209/battle/collect-item.png") no-repeat 0 0;
      padding-top: 90px;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
          -ms-flex-direction: column;
              flex-direction: column;
      -webkit-box-align: center;
          -ms-flex-align: center;
              align-items: center;
      margin: 0 46px;
}
.collect-box__title {
      font-weight: 500;
      font-size: 24px;
      font-family: 'jinkai';
      text-align: center;
      padding-bottom: 10px;
      background: url("https://web-resource.17m3.com/m3guo/202209/battle/collect-line.png") no-repeat center bottom;
      margin-bottom: 15px;
      width: 100%;
      color: #69430e;
}
.collect-box__bd {
      margin-bottom: 20px;
      width: 115px;
      height: 115px;
      border: 1px solid #d5b470;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: center;
          -ms-flex-pack: center;
              justify-content: center;
      -webkit-box-align: center;
          -ms-flex-align: center;
              align-items: center;
}
.collect-box__bd .m-eq {
        -webkit-transform: scale(2.173);
                transform: scale(2.173);
}
.collect-box__btn {
      width: 172px;
      height: 48px;
      text-indent: -9999px;
      background-image: url("https://web-resource.17m3.com/m3guo/202209/battle/btn-cost.png");
}
.collect-box__btn:hover {
        background-image: url("https://web-resource.17m3.com/m3guo/202209/battle/btn-cost-hover.png");
}
.collect-box__btn.is-gray {
        cursor: default;
        background-image: url("https://web-resource.17m3.com/m3guo/202209/battle/btn-cost-gray.png");
}
.collect-box__open {
      position: absolute;
      text-indent: -9999px;
      left: 50%;
      bottom: -116px;
      margin-left: -139px;
      width: 278px;
      height: 76px;
      background-image: url("https://web-resource.17m3.com/m3guo/202209/battle/btn-open.png");
}
.collect-box__open:hover {
        background-image: url("https://web-resource.17m3.com/m3guo/202209/battle/btn-open-hover.png");
}
.collect-box__open.is-gray {
        cursor: default;
        background-image: url("https://web-resource.17m3.com/m3guo/202209/battle/btn-open-gray.png");
}
.score-bar {
    height: 845px;
}
.score-title {
    background-image: url("https://web-resource.17m3.com/m3guo/202209/battle/point-title.png");
    margin-bottom: 46px;
}
.score-bd {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    width: 1280px;
}
.score-item {
    width: 203px;
    height: 509px;
    background: url("https://web-resource.17m3.com/m3guo/202209/battle/point-bg.png") no-repeat 0 0;
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    text-align: center;
    padding-top: 34px;
    color: #6e5726;
}
.score-item:nth-child(even) {
      margin-top: 50px;
}
.score-my {
    position: absolute;
    left: 0;
    top: 150px;
    width: 207px;
    height: 171px;
    background: url("https://web-resource.17m3.com/m3guo/202209/battle/point-my.png") no-repeat 0 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -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;
    padding-top: 20px;
}
.score-my__num {
      font-weight: bold;
      font-size: 40px;
      line-height: 1;
      color: #e9894a;
}
.score-my__desc {
      color: #cc611a;
}
.score-task__title {
    font-weight: 400;
    font-family: 'jinkai';
    font-size: 24px;
    margin-bottom: 30px;
    color: #69430e;
}
.score-task__desc {
    font-size: 14px;
    width: 120px;
    margin-bottom: 180px;
}
.score-task__cost {
    height: 66px;
}
.score-btn {
    width: 142px;
    height: 48px;
    text-indent: -9999px;
    background-image: url("https://web-resource.17m3.com/m3guo/202209/battle/btn-point.png");
    margin-bottom: 10px;
}
.score-btn:hover {
      background-image: url("https://web-resource.17m3.com/m3guo/202209/battle/btn-point-hover.png");
}
.score-btn.is-success {
      cursor: default;
      background-image: url("https://web-resource.17m3.com/m3guo/202209/battle/btn-point-success.png");
}
.score-btn.is-gray {
      cursor: default;
      background-image: url("https://web-resource.17m3.com/m3guo/202209/battle/btn-point-gray.png");
}
.score-link {
    color: #4d644e;
    text-decoration: underline;
    font-size: 16px;
}
.total-bar {
    height: 730px;
}
.total-title {
    background-image: url("https://web-resource.17m3.com/m3guo/202209/battle/total-title.png");
}
.total-main {
    position: relative;
    margin-top: 56px;
    width: 1294px;
    height: 377px;
    background: url("https://web-resource.17m3.com/m3guo/202209/battle/total-bg.png") no-repeat 0 0;
}
.total-main::before {
      position: absolute;
      content: "";
      width: 534px;
      height: 535px;
      background: url("https://web-resource.17m3.com/m3guo/202209/battle/total-side.png") no-repeat 0 0;
      left: -125px;
      top: -145px;
      z-index: 1;
}
.total-score {
    position: absolute;
    left: -90px;
    top: 120px;
    z-index: 3;
    width: 478px;
    height: 303px;
    background: url("https://web-resource.17m3.com/m3guo/202209/battle/total-count.png") no-repeat 0 0;
    text-align: center;
    padding-top: 170px;
}
.total-score__count {
      color: #af4217;
      font-size: 24px;
}
.total-bd {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    position: absolute;
    left: 352px;
    top: -10px;
    z-index: 2;
    width: 904px;
}
.total-item {
    width: 211px;
    height: 390px;
    padding-top: 40px;
    background: url("https://web-resource.17m3.com/m3guo/202209/battle/total-item.png") no-repeat 0 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    text-align: center;
    color: #6e5726;
    font-size: 14px;
}
.total-item__title {
      font-family: 'jinkai';
      color: #69430e;
      font-size: 24px;
      padding-bottom: 10px;
      background: url("https://web-resource.17m3.com/m3guo/202209/battle/total-line.png") no-repeat center bottom;
      width: 100%;
      margin-bottom: 10px;
}
.total-item__date {
      margin-bottom: 15px;
      line-height: 1.4;
}
.total-item__eq {
      background-color: #e8c67f;
      border: 1px solid #d5b470;
      width: 66px;
      height: 66px;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: center;
          -ms-flex-pack: center;
              justify-content: center;
      -webkit-box-align: center;
          -ms-flex-align: center;
              align-items: center;
      margin-bottom: 8px;
}
.total-item__name {
      margin-bottom: 15px;
}
.total-item__btn {
      width: 142px;
      height: 48px;
      text-indent: -9999px;
      -webkit-transition: all .5s ease-out;
      transition: all .5s ease-out;
      background-image: url("https://web-resource.17m3.com/m3guo/202209/battle/btn-total.png");
      margin-bottom: 8px;
}
.total-item__btn:hover {
        background-image: url("https://web-resource.17m3.com/m3guo/202209/battle/btn-total-hover.png");
}
.total-item__btn.is-gray {
        cursor: default;
        background-image: url("https://web-resource.17m3.com/m3guo/202209/battle/btn-total-gray.png");
}
.total-item__btn.is-success {
        cursor: default;
        background-image: url("https://web-resource.17m3.com/m3guo/202209/battle/btn-total-success.png");
}
.total-item__ft {
      width: 195px;
      height: 33px;
      line-height: 33px;
      background: url("https://web-resource.17m3.com/m3guo/202209/battle/total-point-bg.png") no-repeat center top;
}
.rule-title {
    background-image: url("https://web-resource.17m3.com/m3guo/202209/battle/rule-title.png");
}
.rule-list {
    padding-top: 20px;
    width: 1160px;
}
.rule-item {
    padding-left: 60px;
    position: relative;
}
.rule-item::before {
      position: absolute;
      left: 0;
      top: 0;
      content: "";
      width: 20px;
      height: 20px;
      background: url("https://web-resource.17m3.com/m3guo/202209/battle/ic-bird.png") no-repeat 0 0;
}
.rule-question {
    color: #f7dbba;
}
.rule-answer {
    color: #ffc23b;
    margin-bottom: 30px;
}
.d-bar {
    width: 542px;
    min-height: 295px;
    background-image: url("https://web-resource.17m3.com/m3guo/202209/battle/alert-bg.png");
    padding-top: 45px;
    padding-bottom: 20px;
    color: #54431e;
}
.d-btn {
    text-indent: -9999px;
    width: 186px;
    height: 48px;
    background-image: url("https://web-resource.17m3.com/m3guo/202209/battle/btn-sure.png");
    margin: 0 20px;
}
.d-btn:hover {
      background-image: url("https://web-resource.17m3.com/m3guo/202209/battle/btn-sure-hover.png");
}
.d-hd {
    height: 31px;
    background: no-repeat center center;
    text-indent: -9999px;
    margin-bottom: 32px;
}
.d-close {
    text-indent: -9999px;
    top: 5px;
    right: -52px;
    width: 40px;
    height: 40px;
    background-image: url("https://web-resource.17m3.com/m3guo/202209/battle/btn-close.png");
}
.alert-bar .d-bd {
    padding: 20px 60px 0;
    min-height: 140px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}
.area-bar {
    width: 582px;
    background-image: url("https://web-resource.17m3.com/m3guo/202209/battle/area-bg.png");
}
.area-title {
    background-image: url("https://web-resource.17m3.com/m3guo/202209/battle/area-title.png");
}
.area-item {
    height: 55px;
    background-color: #fff5d4;
    border: 1px solid #e4d9b6;
    width: 435px;
    margin-bottom: 12px;
}
.area-label {
    margin-right: 40px;
}
.area-tip {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    color: #8d2100;
}
.area-tip::before {
      content: "";
      width: 30px;
      height: 30px;
      background: url("https://web-resource.17m3.com/m3guo/202209/battle/ic-tip.png") no-repeat 0 0;
}
.area-side::after {
    width: 30px;
    height: 30px;
    background: url("https://web-resource.17m3.com/m3guo/202209/battle/ic-sel.png") no-repeat 0 0;
    text-indent: -9999px;
    top: 25px;
}
.area-select {
    background-color: #fff5d4;
    width: 435px;
    border: 1px solid #e4d9b6;
    left: -1px;
    top: 60px;
}
.area-option {
    color: #95896e;
}
.area-option:hover {
      color: #54431e;
}
.buff-bar {
    width: 652px;
    height: 556px;
    background-image: url("https://web-resource.17m3.com/m3guo/202209/battle/buff-bg.png");
}
.buff-bar .d-hd {
      background-image: url("https://web-resource.17m3.com/m3guo/202209/battle/buff-title.png");
      margin-bottom: 10px;
}
.buff-item {
    border: 1px solid #dec790;
    margin-bottom: 20px;
    text-align: center;
}
.buff-label {
    line-height: 42px;
    background-color: #e6c575;
}
.buff-desc {
    padding: 16px 36px;
    line-height: 1.8;
}
.red-bar,
  .flower-bar {
    width: 652px;
    padding-bottom: 30px;
}
.red-bar {
    height: 485px;
    background-image: url("https://web-resource.17m3.com/m3guo/202209/battle/red-bg.png");
}
.red-bar .d-hd {
      background-image: url("https://web-resource.17m3.com/m3guo/202209/battle/red-title.png");
      margin-bottom: 10px;
}
.red-hd {
    text-align: center;
    margin-bottom: 20px;
}
.red-ft {
    width: 518px;
    position: relative;
    background-color: rgba(190, 145, 48, 0.1);
    border: 1px solid #dcc48a;
    margin: 0 auto;
    padding: 16px 35px 18px 112px;
}
.red-ft::before {
      position: absolute;
      content: "";
      top: 18px;
      left: 28px;
      width: 59px;
      height: 72px;
      background: url("https://web-resource.17m3.com/m3guo/202209/battle/red-bag.png") no-repeat 0 0;
}
.red-ft__title {
      font-weight: bold;
      margin-bottom: 5px;
}
.flower-bar {
    background-image: url("https://web-resource.17m3.com/m3guo/202209/battle/flower-bg.png");
}
.flower-bar .d-hd {
      background-image: url("https://web-resource.17m3.com/m3guo/202209/battle/flower-title.png");
      margin-bottom: 6px;
}
.flower-item {
    margin-bottom: 20px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    width: 550px;
}
.flower-label {
    width: 30px;
    height: 30px;
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeBAMAAADJHrORAAAAGFBMVEXKnT/KnT9HcEzKnT/KnT/KnT/KnT/KnT8YBNkeAAAAB3RSTlNN+QBJTkpMq8GreQAAAKdJREFUGNNdkU0OgjAQRj8S47oEkD0NBwAvoBv3cAJNvACrub6dn3aKbJqX9wJ0BpM+dzuhR2zXEy/oao7h0qwVL2gfnXMMDfUaQPVIhwYwTRbANNEhn0DWRIEDZG0BitYARWsA1xLAtQTYvhW/Bsy3Z+H+s2PyIOn0fg+S5v/JAWvmHLCW+2zvMWvhWe/LupqH6Gpeon2eqn3eqss+rsPfvvYTl33+AF2sYLVdsMpFAAAAAElFTkSuQmCC) no-repeat 0 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    color: #ffeabb;
    font-size: 14px;
}
.flower-desc {
    width: 500px;
}
.skin-bar {
    width: 902px;
    height: 535px;
    background-image: url("https://web-resource.17m3.com/m3guo/202209/battle/skin-bg.png");
}
.skin-bar .d-hd {
      background-image: url("https://web-resource.17m3.com/m3guo/202209/battle/skin-title.png");
}
.skin-bar .d-bd {
      padding-top: 0;
}
.skin-list {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
}
.skin-item {
    width: 124px;
    height: 124px;
    background: url("https://web-resource.17m3.com/m3guo/202209/battle/skin-hero-default.png") no-repeat 0 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    margin: 0 15px 30px;
}
.skin-item.is-lock {
      position: relative;
}
.skin-item.is-lock::before {
        position: absolute;
        z-index: 2;
        content: "";
        left: 0;
        top: 0;
        width: 124px;
        height: 124px;
        background: url("https://web-resource.17m3.com/m3guo/202209/battle/skin-lock.png") no-repeat center center;
        pointer-events: none;
}
.skin-avatar {
    width: 110px;
    height: 110px;
}
.skin-avatar__pic {
      width: 100px;
      height: 100px;
}
.skin-avatar__eq {
      position: absolute;
      width: 100%;
      height: 100%;
      opacity: 0;
}
.invitation-bar {
    width: 742px;
    height: 525px;
    background-image: url("https://web-resource.17m3.com/m3guo/202209/battle/copy-bg.png");
}
.invitation-bar .d-btn {
      width: 156px;
      height: 38px;
}
.invitation-bar .d-ft {
      -webkit-box-align: center;
          -ms-flex-align: center;
              align-items: center;
}
.invitation-title {
    background-image: url("https://web-resource.17m3.com/m3guo/202209/battle/copy-title.png");
}
.invitation-bd {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    width: 590px;
    margin: 0 auto;
}
.invitation-desc {
    margin-bottom: 40px;
}
.invitation-list {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    width: 524px;
    margin-bottom: 30px;
}
.invitation-item {
    width: 33.333%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}
.invitation-avatar {
    width: 109px;
    height: 109px;
    background: url("https://web-resource.17m3.com/m3guo/202209/battle/copy-default.png") no-repeat center top;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    margin-bottom: 10px;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}
.invitation-avatar__pic {
      width: 99px;
      height: 99px;
      border-radius: 50%;
}
.invitation-nick {
    color: #9d6f23;
    font-size: 24px;
}
.invitation-add {
    text-indent: -9999px;
    width: 109px;
    height: 109px;
    background-image: url("https://web-resource.17m3.com/m3guo/202209/battle/copy-add.png");
    margin-bottom: 10px;
}
.invitation-copy {
    width: 400px;
    margin-right: 10px;
}
.pool-bar {
    width: 902px;
    height: 725px;
    background-image: url("https://web-resource.17m3.com/m3guo/202209/battle/pool-bg.png");
}
.pool-title {
    margin-bottom: 20px;
    background-image: url("https://web-resource.17m3.com/m3guo/202209/battle/pool-title.png");
}
.pool-tip {
    width: 313px;
    margin: 0 auto 30px;
}
.pool-bd {
    width: 830px;
    height: 465px;
    margin: 0 auto;
    overflow-y: auto;
}
.pool-bd::-webkit-scrollbar {
      width: 8px;
}
.pool-bd::-webkit-scrollbar-thumb {
      background-color: #6e5726;
      border-radius: 4px;
      width: 6px;
}
.pool-bd::-webkit-scrollbar-track {
      border-radius: 4px;
      background-color: #e2d5b5;
      border: 1px solid #dcc48a;
}
.pool-hd {
    width: 322px;
    height: 47px;
    background: no-repeat 0 0;
    text-indent: -9999px;
    margin: 0 auto 15px;
}
.pool-hd.is-skin {
      background-image: url("https://web-resource.17m3.com/m3guo/202209/battle/pool-skin-title.png");
}
.pool-hd.is-goods {
      background-image: url("https://web-resource.17m3.com/m3guo/202209/battle/pool-goods-title.png");
}
.pool-list {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    width: 744px;
    margin: 0 auto 25px;
}
.pool-item {
    width: 124px;
    height: 124px;
    background: url("https://web-resource.17m3.com/m3guo/202209/battle/skin-hero-default.png") no-repeat 0 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}
.pool-item .m-eq {
      -webkit-transform: scale(2.173);
              transform: scale(2.173);
}
.btn-gift {
    -webkit-transition: all .5s ease-out;
    transition: all .5s ease-out;
    background-image: url("https://web-resource.17m3.com/m3guo/202209/battle/btn-gift.png");
}
.btn-gift:hover {
      background-image: url("https://web-resource.17m3.com/m3guo/202209/battle/btn-gift-hover.png");
}
.btn-more {
    -webkit-transition: all .5s ease-out;
    transition: all .5s ease-out;
    background-image: url("https://web-resource.17m3.com/m3guo/202209/battle/btn-more.png");
}
.btn-more:hover {
      background-image: url("https://web-resource.17m3.com/m3guo/202209/battle/btn-more-hover.png");
}
.btn-open {
    -webkit-transition: all .5s ease-out;
    transition: all .5s ease-out;
    background-image: url("https://web-resource.17m3.com/m3guo/202209/battle/btn-open.png");
}
.btn-open:hover {
      background-image: url("https://web-resource.17m3.com/m3guo/202209/battle/btn-open-hover.png");
}
.btn-preview {
    -webkit-transition: all .5s ease-out;
    transition: all .5s ease-out;
    background-image: url("https://web-resource.17m3.com/m3guo/202209/battle/btn-preview.png");
}
.btn-preview:hover {
      background-image: url("https://web-resource.17m3.com/m3guo/202209/battle/btn-preview-hover.png");
}
.btn-refresh {
    -webkit-transition: all .5s ease-out;
    transition: all .5s ease-out;
    background-image: url("https://web-resource.17m3.com/m3guo/202209/battle/btn-refresh.png");
}
.btn-refresh:hover {
      background-image: url("https://web-resource.17m3.com/m3guo/202209/battle/btn-refresh-hover.png");
}
.btn-think {
    -webkit-transition: all .5s ease-out;
    transition: all .5s ease-out;
    background-image: url("https://web-resource.17m3.com/m3guo/202209/battle/btn-think.png");
}
.btn-think:hover {
      background-image: url("https://web-resource.17m3.com/m3guo/202209/battle/btn-think-hover.png");
}
.btn-copy {
    -webkit-transition: all .5s ease-out;
    transition: all .5s ease-out;
    background-image: url("https://web-resource.17m3.com/m3guo/202209/battle/btn-copy.png");
}
.btn-copy:hover {
      background-image: url("https://web-resource.17m3.com/m3guo/202209/battle/btn-copy-hover.png");
}
}

.slider-row {
  position: relative;
  width: 100%;
  overflow: hidden;
  height: 500px;
}
.slider-row__item {
    position: absolute;
    top: 50px;
}
.slider-row__item::before {
      position: absolute;
      z-index: 2;
      content: "";
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      background-color: #000;
      opacity: 0.5;
      -webkit-transition: all 0.3s ease-out;
      transition: all 0.3s ease-out;
}
.slider-row__item.is-max {
      z-index: 3;
}
.slider-row__item.is-max::before {
        opacity: 0;
}
.slider-row__item.is-max .slider-row__pic {
        z-index: 3;
        width: 120%;
        margin-left: -10%;
        margin-top: -18px;
        -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.8);
                box-shadow: 0 0 10px rgba(0, 0, 0, 0.8);
}
.slider-row__pic {
    width: 100%;
    -webkit-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}

html {
  font-size: 100px;
}
@media screen and (max-width: 751px) {
html {
    font-size: 50px;
}
}
.slider-circle {
  position: relative;
  width: 7.5rem;
  height: 4rem;
  margin: 0 auto;
  overflow: hidden;
  padding: 0.4rem 0;
}
.slider-circle__item {
    position: absolute;
    left: 50%;
    top: 0.4rem;
    width: 4.6rem;
    margin-left: -2.3rem;
    -webkit-transform: scale(0.5);
            transform: scale(0.5);
    -webkit-transition: all 0.4s ease-out;
    transition: all 0.4s ease-out;
    opacity: 0;
}
.slider-circle__item.is-crt, .slider-circle__item.is-next, .slider-circle__item.is-prev {
      opacity: 1;
}
.slider-circle__item.is-crt {
      -webkit-transform: scale(1);
              transform: scale(1);
}
.slider-circle__item.is-prev, .slider-circle__item.is-next {
      -webkit-transform: scale(0.8);
              transform: scale(0.8);
}
.slider-circle__item.is-prev {
      margin-left: -7rem;
}
.slider-circle__item.is-next {
      margin-left: 2.4rem;
}
.slider-circle__pic {
    width: 100%;
    pointer-events: none;
}
.slider-circle__preview {
    padding: 0.02rem;
    -webkit-box-shadow: 0 0 0.04rem rgba(255, 165, 0, 0.5);
            box-shadow: 0 0 0.04rem rgba(255, 165, 0, 0.5);
}
.slider-circle__name {
    font-size: 0.24rem;
    padding-top: 0.2rem;
    text-align: center;
}