@charset "UTF-8";
/*
 * @Author: whj 
 * @Date: 2021-08-06 14:06:03 
 * @Last Modified by: whj
 * @Last Modified time: 2023-06-23 17:49:46
 */
* {
  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, .d-close::before {
  font-family: "iconfont";
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.d-bg {
  position: fixed;
  z-index: 99;
  width: 100%;
  height: 100%;
  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;
  border: 1px solid #ccc;
  background-color: #fff;
  border-radius: 0.1rem;
}
.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::before {
    content: "\E643";
}
.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-bottom: 0.26rem;
  position: relative;
}
.area-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;
}
.area-item, .area-select {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 5rem;
  color: #f45e2a;
  background-color: #fffaed;
  border: .02rem solid #ecd2b4;
  border-radius: .1rem;
}
.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 {
    position: absolute;
    top: .2rem;
    right: .2rem;
    content: "";
    width: .4rem;
    height: .4rem;
    -webkit-transition: all .3s ease-out;
    transition: all .3s ease-out;
}
.area-side.is-down::after {
    -webkit-transform: rotate(-180deg);
            transform: rotate(-180deg);
}
.area-select {
  z-index: 2;
  position: absolute;
  left: -.02rem;
  top: 0.64rem;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  padding: 0.16rem .2rem;
  border-top: 0;
  border-radius: 0 0 .1rem .1rem;
}
.area-option {
  width: 46%;
  text-align: center;
  padding: 0.1rem 0;
  margin: 0 2%;
  border-radius: .06rem;
}
.area-option:hover {
    color: #fff;
    background-color: #f86e4e;
}
.area-select, .area-option {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.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: #ffdb6f;
}
.area-tip::before {
    content: "";
    width: .18rem;
    height: .18rem;
    background-image: url("https://web-resource.17m3.com/m3guo/202209/preheat/ic-tip.png");
}
.d-msg {
  position: fixed;
  left: 50%;
  top: -100%;
  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: 100%;
  height: 100%;
  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: 100%;
    height: 100%;
    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 .02rem;
    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;
    padding: 10px;
    background-color: rgba(31, 28, 26, 0.9);
    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: 100%;
  background-color: rgba(255, 255, 255, 0.9);
  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: #2472bd;
  font-size: .32rem;
}
#fn-error {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  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;
}
.slider-bar {
  position: relative;
  height: 2.87rem;
  width: 856px;
}
.slider-page {
  position: absolute;
  z-index: 5;
  width: 100%;
  left: 0;
  bottom: .2rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.slider-page__prev, .slider-page__next {
    position: absolute;
    z-index: 6;
    top: 50%;
}
.slider-page__prev {
    left: 0;
}
.slider-page__next {
    right: 0;
}
@media screen and (max-width: 639px) {
html {
    font-size: 50px;
}
.m-eq {
    width: 0.68rem;
    height: 0.68rem;
}
.m-eq.is-num::after {
      font-size: .2rem;
}
.fn-tips {
    left: 0 !important;
    top: 0 !important;
    width: 100%;
    height: 100%;
    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);
}
}
@-webkit-keyframes fadeIn {
0% {
    opacity: 0;
}
100% {
    opacity: 1;
}
}
@keyframes fadeIn {
0% {
    opacity: 0;
}
100% {
    opacity: 1;
}
}
/*
 * @Author: whj 
 * @Date: 2021-06-24 15:03:46 
 * @Last Modified by: whj
 * @Last Modified time: 2023-06-29 14:33:30
 */
html {
  font-size: 100px;
}
body {
  color: #efc676;
  background-color: #1d3140;
}
.bg-none, .area-side::after, .area-tip::before, a,
button, .d-bar, .d-hd, .rule-label, .skill-name::after {
  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;
}
.fc-mark,
mark {
  color: #954c15;
}
@font-face {
  font-family: 'song';
  src: url("https://web-resource.17m3.com/m3guo/202307/version-7b39/HYChangLiSongKeBenJ.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;
}
.d-bar {
  background-color: #faf2dc;
  border: 3px solid #21536c;
  -webkit-box-shadow: 0 0 1px #49a0a8 inset;
          box-shadow: 0 0 1px #49a0a8 inset;
  width: 6.66rem;
  padding-top: .16rem;
  font-size: .2rem;
  color: #21536c;
}
.d-hd {
  width: 5.08rem;
  height: .52rem;
  color: transparent;
  margin: 0 auto;
}
.d-close {
  color: #21536c;
  font-size: .26rem;
  font-weight: bold;
}
.d-btn {
  width: 2.62rem;
  height: .62rem;
  background-image: url("https://web-resource.17m3.com/m3guo/202307/version-7b39/d-sure.webp");
  color: transparent;
  margin: 0 .1rem;
}
.d-btn__bind {
    background-image: url("https://web-resource.17m3.com/m3guo/202307/version-7b39/d-bind.webp");
}
.d-btn__cancel {
    background-image: url("https://web-resource.17m3.com/m3guo/202307/version-7b39/d-cancel.webp");
}
.d-btn__copy {
    width: 3.02rem;
    background-image: url("https://web-resource.17m3.com/m3guo/202307/version-7b39/d-copy.webp");
}
.d-alert .d-hd {
  background-image: url("https://web-resource.17m3.com/m3guo/202307/version-7b39/d-systen.webp");
}
.d-alert .d-bd {
  height: 1.5rem;
  padding: 0 .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;
}
.rule-bd {
  padding: .3rem 0 .54rem;
}
.rule-title {
  background-image: url("https://web-resource.17m3.com/m3guo/202307/version-7b39/d-rule.webp");
}
.rule-item {
  width: 5.78rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  margin: 0 auto .2rem;
}
.rule-label {
  width: .26rem;
  height: .26rem;
  background-image: url("https://web-resource.17m3.com/m3guo/202307/version-7b39/d-label.webp");
  margin-top: .04rem;
  color: #faf2dc;
  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;
}
.rule-desc {
  width: 5.3rem;
  font-family: 'song';
  color: #308488;
  font-size: .22rem;
}
.area-title {
  background-image: url("https://web-resource.17m3.com/m3guo/202307/version-7b39/d-area.webp");
  margin-bottom: .1rem;
}
.area-item {
  border-color: #c2c9bf;
  color: #21536c;
  background-color: #faf2dc;
}
.area-side::after {
  top: .24rem;
  width: .3rem;
  height: .3rem;
  background-image: url("https://web-resource.17m3.com/m3guo/202307/version-7b39/d-select.webp");
}
.area-select {
  background-color: #faf2dc;
  border-color: #c2c9bf;
  color: #21536c;
}
.area-option:hover {
  color: #faf2dc;
  background-color: #70aba6;
}
.area-tip {
  color: #b7392a;
}
.area-tip::before {
    width: .2rem;
    height: .2rem;
    background-image: url("https://web-resource.17m3.com/m3guo/202307/version-7b39/d-warning.webp");
    margin-right: .1rem;
}
.area-confirm .d-hd {
  background-image: url("https://web-resource.17m3.com/m3guo/202307/version-7b39/d-again.webp");
}
.area-confirm .d-bd {
  text-align: center;
  padding: .4rem 0 .6rem;
}
.copy-bar {
  padding-bottom: 0.2rem;
}
.copy-bar .d-bd {
    text-align: center;
    height: 2.05rem;
    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;
    padding: 0 .4rem;
}
.skill-bar {
  margin-top: -1rem;
  border: 0;
  border-radius: 0;
  padding-bottom: .4rem;
  width: 6.4rem;
  min-height: 7.4rem;
  background-image: url("https://web-resource.17m3.com/m3guo/202307/version-7b39/d-skill-bg.jpg");
  padding-top: 0;
  color: #fff4e2;
  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;
}
.skill-bar .d-close {
    top: auto;
    right: 50%;
    margin-right: -.2rem;
    bottom: -.6rem;
    font-size: .36rem;
    color: white;
}
.skill-gif {
  width: 6.4rem;
  height: 3.6rem;
  border: .01rem solid #195263;
}
.skill-name {
  position: relative;
  font-family: 'song';
  font-size: .32rem;
  margin-bottom: .26rem;
  line-height: 1.8;
}
.skill-name::after {
    content: "";
    position: absolute;
    width: 5.08rem;
    height: .07rem;
    background-image: url("https://web-resource.17m3.com/m3guo/202307/version-7b39/skill-line.webp");
    left: 50%;
    margin-left: -2.54rem;
    bottom: -.1rem;
}
.skill-desc {
  width: 5.6rem;
  text-align: justify;
}
.slider-page__item {
  width: .16rem;
  height: .06rem;
  background-color: #24595b;
  color: transparent;
  border-radius: .03rem;
  margin: 0 .04rem;
}
.slider-page__item.is-crt {
    background-color: #418b8d;
}
@-webkit-keyframes aniMouseLeft {
0%,
  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
            transform: translateX(0);
}
50% {
    opacity: 1;
    -webkit-transform: translateX(-20px);
            transform: translateX(-20px);
}
90% {
    opacity: 0;
    -webkit-transform: translateX(-20px);
            transform: translateX(-20px);
}
91% {
    opacity: 0;
    -webkit-transform: translateX(0);
            transform: translateX(0);
}
}
@keyframes aniMouseLeft {
0%,
  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
            transform: translateX(0);
}
50% {
    opacity: 1;
    -webkit-transform: translateX(-20px);
            transform: translateX(-20px);
}
90% {
    opacity: 0;
    -webkit-transform: translateX(-20px);
            transform: translateX(-20px);
}
91% {
    opacity: 0;
    -webkit-transform: translateX(0);
            transform: translateX(0);
}
}
@-webkit-keyframes aniMouseRight {
0%,
  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
}
50% {
    -webkit-transform: translateX(20px);
            transform: translateX(20px);
}
90% {
    opacity: 0;
    -webkit-transform: translateX(20px);
            transform: translateX(20px);
}
91% {
    opacity: 0;
    -webkit-transform: translateX(0);
            transform: translateX(0);
}
}
@keyframes aniMouseRight {
0%,
  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
}
50% {
    -webkit-transform: translateX(20px);
            transform: translateX(20px);
}
90% {
    opacity: 0;
    -webkit-transform: translateX(20px);
            transform: translateX(20px);
}
91% {
    opacity: 0;
    -webkit-transform: translateX(0);
            transform: translateX(0);
}
}
@-webkit-keyframes aniMouseDown {
0%,
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
}
50% {
    -webkit-transform: translateY(10px);
            transform: translateY(10px);
}
90% {
    opacity: 0;
    -webkit-transform: translateY(10px);
            transform: translateY(10px);
}
91% {
    opacity: 0;
    -webkit-transform: translateY(0);
            transform: translateY(0);
}
}
@keyframes aniMouseDown {
0%,
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
}
50% {
    -webkit-transform: translateY(10px);
            transform: translateY(10px);
}
90% {
    opacity: 0;
    -webkit-transform: translateY(10px);
            transform: translateY(10px);
}
91% {
    opacity: 0;
    -webkit-transform: translateY(0);
            transform: translateY(0);
}
}
@-webkit-keyframes aniBtnBack {
0%,
  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
}
80% {
    -webkit-transform: translateX(10px);
            transform: translateX(10px);
}
}
@keyframes aniBtnBack {
0%,
  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
}
80% {
    -webkit-transform: translateX(10px);
            transform: translateX(10px);
}
}
@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: 2023-07-03 14:32:46
 */
html {
    font-size: 50px;
}
html,
  body {
    width: 100%;
    height: 100%;
    overflow: hidden;
}
body {
    font: 0.24rem/1.6 '\5FAE\8F6F\96C5\9ED1';
    padding-top: 0 !important;
}
.bg-no, #app, .m-title, .banner-logo, .banner-scroll, .trip-list, .trip-check, .trip-check.is-true::before, .trip-ft__gift, .trip-ft__btn::before, .level-item, .level-item::before, .level-item__title, .level-item__digest, .level-page, .level-page__point, .award-nav__item, .award-bd, .award-item__title, .award-item__summary, .pet-item, .pet-item__pic, .hero-bd, .hero-bd::before, .follow-list::before, .follow-item, .page-bar, .page-back::before, .page-item::before, .page-box, .page-title, .page-chapter::after, .page-level, .nav-desc, .nav-desc.is-crt::after, .nav-sub, .nav-sub::before, .nav-sub::after, .nav-sub__item::before, .skill-tab::before {
    background: no-repeat 0 0;
    background-size: 100% 100%;
}
#app {
    width: 100vw;
    height: 100vh;
    min-width: 350px;
    max-width: 750px;
    overflow: hidden;
    background-image: url("https://web-resource.17m3.com/m3guo/202307/version-7b39/app-trip-bg.jpg");
}
.part {
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -3.75rem;
    margin-top: -6.67rem;
    width: 7.5rem;
    height: 13.34rem;
    padding-bottom: 1rem;
    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;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-transition: all 1s;
    transition: all 1s;
    -webkit-transform-origin: center center;
            transform-origin: center center;
}
.part.is-hide {
      opacity: 0;
      -webkit-transform: translateY(100%) scale(1) !important;
              transform: translateY(100%) scale(1) !important;
}
.part.is-show {
      opacity: 1;
}
.m-title {
    width: 7.5rem;
    height: 1.28rem;
    color: transparent;
}
.banner-bar {
    width: 7.5rem;
    height: 20rem;
    margin-top: -10rem;
    background: url("https://web-resource.17m3.com/m3guo/202307/version-7b39/app-banner-white.jpg") no-repeat center center;
    background-size: 100% auto;
    z-index: 30;
}
.banner-bar.is-king {
      background-image: url("https://web-resource.17m3.com/m3guo/202307/version-7b39/app-banner-king.jpg");
}
.banner-logo {
    position: absolute;
    z-index: 19;
    left: .3rem;
    top: 50%;
    margin-top: -5rem;
    width: 1.31rem;
    height: 1.08rem;
    background-image: url("https://web-resource.17m3.com/m3guo/202307/version-7b39/app-logo.webp");
    color: transparent;
}
.banner-scroll {
    width: .76rem;
    height: .39rem;
    background-image: url("https://web-resource.17m3.com/m3guo/202307/version-7b39/app-down.webp");
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -.38rem;
    margin-top: 4.8rem;
    -webkit-animation: aniMouseDown infinite 1s linear;
            animation: aniMouseDown infinite 1s linear;
}
.trip-title {
    background-image: url("https://web-resource.17m3.com/m3guo/202307/version-7b39/app-trip-title.webp");
}
.trip-list {
    width: 100%;
    height: 5.46rem;
    background-image: url("https://web-resource.17m3.com/m3guo/202307/version-7b39/app-trip-bd.webp");
    margin-top: .58rem;
    margin-bottom: 2.1rem;
    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;
    position: relative;
}
.trip-item {
    width: 2.4rem;
    height: 2.4rem;
    position: relative;
}
.trip-item__1, .trip-item__2, .trip-item__3 {
      margin: 0 .02rem .4rem;
}
.trip-item__4, .trip-item__5 {
      margin: 0 .24rem;
}
.trip-pic {
    color: transparent;
}
.trip-check {
    position: absolute;
    top: 2.54rem;
    left: 50%;
    margin-left: -.2rem;
    width: .4rem;
    height: .4rem;
    background-image: url("https://web-resource.17m3.com/m3guo/202307/version-7b39/ic-box.webp");
}
.trip-check.is-true::before {
      content: "";
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      background-image: url("https://web-resource.17m3.com/m3guo/202307/version-7b39/ic-true.webp");
}
.trip-ft {
    position: relative;
}
.trip-ft__gift {
      position: absolute;
      top: -1.85rem;
      left: 50%;
      margin-left: -1.49rem;
      width: 2.98rem;
      height: 1.85rem;
      background-image: url("https://web-resource.17m3.com/m3guo/202307/version-7b39/app-trip-gift.webp");
      padding-left: 1.09rem;
      padding-top: .6rem;
}
.trip-ft__btn {
      position: relative;
      width: 3.26rem;
      height: .77rem;
      color: transparent;
}
.trip-ft__btn::before {
        position: absolute;
        content: "";
        top: .35rem;
        left: 50%;
        margin-left: -2.42rem;
        width: 4.83rem;
        height: .07rem;
        background-image: url("https://web-resource.17m3.com/m3guo/202307/version-7b39/trip-btn-line.webp");
}
.trip-ft__btn.is-success {
        background-image: url("https://web-resource.17m3.com/m3guo/202307/version-7b39/trip-success.webp");
}
.trip-ft__btn.is-receive {
        background-image: url("https://web-resource.17m3.com/m3guo/202307/version-7b39/trip-receive.webp");
}
.trip-ft__btn.is-share {
        background-image: url("https://web-resource.17m3.com/m3guo/202307/version-7b39/trip-share.webp");
}
.user-bar {
    height: .62rem;
    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: #efc676;
    position: relative;
}
.user-link {
    color: #efc676;
}
.user-rule {
    position: absolute;
    bottom: -.36rem;
    left: 50%;
    margin-left: -.67rem;
    width: 1.35rem;
    height: .36rem;
    background-image: url("https://web-resource.17m3.com/m3guo/202307/version-7b39/app-trip-rule.webp");
    font-family: 'song';
    color: #ffebcd;
    font-size: .2rem;
}
.level-title {
    background-image: url("https://web-resource.17m3.com/m3guo/202307/version-7b39/app-level-title.webp");
    margin-bottom: .7rem;
}
.level-bd {
    position: relative;
    width: 7.5rem;
    height: 7.72rem;
}
.level-item {
    width: 7.5rem;
    height: 7.72rem;
    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: .5rem;
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0;
    pointer-events: none;
    -webkit-transform: rotateY(180deg);
            transform: rotateY(180deg);
    -webkit-transition: all 1s;
    transition: all 1s;
}
.level-item.is-show {
      pointer-events: all;
      opacity: 1;
      -webkit-transform: rotateY(0);
              transform: rotateY(0);
}
.level-item::before {
      content: "";
      pointer-events: none;
      position: absolute;
      width: 4.9rem;
      height: 6.5rem;
      background-image: url("https://web-resource.17m3.com/m3guo/202307/version-7b39/app-level-before.webp");
}
.level-item__title {
      width: 3.68rem;
      height: .4rem;
      color: transparent;
      margin: .1rem 0 .22rem;
}
.level-item__digest {
      width: 3.24rem;
      height: .36rem;
      color: transparent;
}
.level-pic {
    width: 4.92rem;
    height: 3.04rem;
}
.level-trip {
    background-image: url("https://web-resource.17m3.com/m3guo/202307/version-7b39/app-level-weapon.webp");
}
.level-trip__title {
      background-image: url("https://web-resource.17m3.com/m3guo/202307/version-7b39/level-trip-title.webp");
}
.level-trip__award {
      background-image: url("https://web-resource.17m3.com/m3guo/202307/version-7b39/app-level-award.webp");
      margin-bottom: .26rem;
}
.level-gift {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    width: 4.9rem;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
}
.level-gift__item {
      width: .86rem;
      height: .86rem;
      background-color: rgba(24, 33, 48, 0.35);
      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-radius: .1rem;
      border: .04rem solid #205657;
      margin: 0 .17rem .2rem;
}
.level-map {
    background-image: url("https://web-resource.17m3.com/m3guo/202307/version-7b39/app-level-flower.webp");
}
.level-map__title {
      background-image: url("https://web-resource.17m3.com/m3guo/202307/version-7b39/level-map-title.webp");
}
.level-map__time {
      background-image: url("https://web-resource.17m3.com/m3guo/202307/version-7b39/app-level-time.webp");
}
.level-map__time + .level-map__desc {
        text-align: center;
}
.level-map__play {
      background-image: url("https://web-resource.17m3.com/m3guo/202307/version-7b39/app-level-play.webp");
}
.level-map__desc {
      padding-top: .14rem;
      min-height: .7rem;
      width: 4.48rem;
      color: #d8fff9;
      font-family: 'song';
      font-size: .22rem;
}
.level-slider {
    width: 4.94rem;
    height: 3.05rem;
}
.level-slider .slider-pic {
      width: 100%;
}
.level-slider .slider-page__prev, .level-slider .slider-page__next {
      width: .35rem;
      height: .35rem;
      color: transparent;
      top: 1.4rem;
}
.level-slider .slider-page__prev {
      left: .1rem;
      background-image: url("https://web-resource.17m3.com/m3guo/202307/version-7b39/app-slider-prev.webp");
}
.level-slider .slider-page__next {
      right: .1rem;
      background-image: url("https://web-resource.17m3.com/m3guo/202307/version-7b39/app-slider-next.webp");
}
.level-page {
    margin-top: 7.6rem;
    width: 7.5rem;
    height: .8rem;
    background-image: url("https://web-resource.17m3.com/m3guo/202307/version-7b39/app-level-page.webp");
    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;
}
.level-page__prev, .level-page__next {
      width: .99rem;
      height: .38rem;
      color: transparent;
}
.level-page__prev {
      background-image: url("https://web-resource.17m3.com/m3guo/202307/version-7b39/app-level-left.webp");
      -webkit-animation: aniMouseLeft infinite 1s linear;
              animation: aniMouseLeft infinite 1s linear;
}
.level-page__next {
      background-image: url("https://web-resource.17m3.com/m3guo/202307/version-7b39/app-level-right.webp");
      -webkit-animation: aniMouseRight infinite 1s linear;
              animation: aniMouseRight infinite 1s linear;
}
.level-page__point {
      width: .1rem;
      height: .1rem;
      background-image: url("https://web-resource.17m3.com/m3guo/202307/version-7b39/app-level-point.webp");
      margin: 0 .1rem;
}
.award-title {
    background-image: url("https://web-resource.17m3.com/m3guo/202307/version-7b39/app-award-title.webp");
    margin-bottom: .24rem;
}
.award-nav {
    position: relative;
    z-index: 3;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
}
.award-nav__item {
      width: 1.98rem;
      height: .67rem;
      color: transparent;
      -webkit-box-shadow: 0 0 0.1rem rgba(46, 50, 48, 0.85);
              box-shadow: 0 0 0.1rem rgba(46, 50, 48, 0.85);
}
.award-nav__pet {
      background-image: url("https://web-resource.17m3.com/m3guo/202307/version-7b39/app-award-nav-1-gray.webp");
}
.award-nav__pet.is-crt {
        background-image: url("https://web-resource.17m3.com/m3guo/202307/version-7b39/app-award-nav-1.webp");
}
.award-nav__hero {
      background-image: url("https://web-resource.17m3.com/m3guo/202307/version-7b39/app-award-nav-2-gray.webp");
}
.award-nav__hero.is-crt {
        background-image: url("https://web-resource.17m3.com/m3guo/202307/version-7b39/app-award-nav-2.webp");
}
.award-nav__follow {
      background-image: url("https://web-resource.17m3.com/m3guo/202307/version-7b39/app-award-nav-3-gray.webp");
}
.award-nav__follow.is-crt {
        background-image: url("https://web-resource.17m3.com/m3guo/202307/version-7b39/app-award-nav-3.webp");
}
.award-bd {
    position: relative;
    z-index: 2;
    margin-top: -.5rem;
    width: 7.2rem;
    height: 8.15rem;
    background-image: url("https://web-resource.17m3.com/m3guo/202307/version-7b39/app-award-item.webp");
    padding-top: 1.06rem;
}
.award-item {
    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;
}
.award-item__title {
      width: 6.35rem;
      height: .53rem;
      color: transparent;
      margin-bottom: .2rem;
}
.award-item__summary {
      width: 5.94rem;
      height: .71rem;
      background-image: url("https://web-resource.17m3.com/m3guo/202307/version-7b39/app-award-summary.webp");
      color: #3d3523;
      font-size: .22rem;
      font-family: 'song';
      text-align: center;
      padding: 0 .48rem;
      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;
      line-height: 1.2;
}
.pet-title {
    background-image: url("https://web-resource.17m3.com/m3guo/202307/version-7b39/app-pet-title.webp");
}
.pet-list {
    position: relative;
    height: 5.5rem;
    width: 6rem;
    overflow: hidden;
}
.pet-item {
    position: absolute;
    top: .2rem;
    left: 50%;
    margin-left: -1.85rem;
    padding-top: 2.58rem;
    width: 3.69rem;
    height: 5.28rem;
    background-image: url("https://web-resource.17m3.com/m3guo/202307/version-7b39/app-pet-item.webp");
    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;
    -webkit-transition: all .5s linear;
    transition: all .5s linear;
    z-index: 5;
}
.pet-item.is-next, .pet-item.is-prev {
      z-index: 2;
      opacity: 0;
      pointer-events: none;
}
.pet-item.is-prev {
      left: -100%;
}
.pet-item.is-next {
      left: 100%;
}
.pet-item__pic {
      position: absolute;
      left: .26rem;
      top: -.2rem;
      width: 3.05rem;
      height: 2.98rem;
}
.pet-item__pic.is-red {
        background-image: url("https://web-resource.17m3.com/m3guo/202307/version-7b39/app-pet-red.webp");
}
.pet-item__pic.is-purple {
        background-image: url("https://web-resource.17m3.com/m3guo/202307/version-7b39/app-pet-purple.webp");
}
.pet-item__pic.is-orange {
        background-image: url("https://web-resource.17m3.com/m3guo/202307/version-7b39/app-pet-orange.webp");
}
.pet-item__eq {
      width: .86rem;
      height: .86rem;
      background-color: rgba(197, 197, 180, 0.35);
      border: .05rem solid #8c8b7e;
      border-radius: .1rem;
      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: .04rem;
}
.pet-item__name {
      color: #f6f5e2;
      font-family: 'song';
      margin-bottom: .1rem;
}
.pet-item__desc {
      width: 1.9rem;
      color: #757160;
      font-size: .22rem;
}
.pet-item__desc.is-0 {
        width: 1.6rem;
}
.pet-page__prev, .pet-page__next {
    position: absolute;
    width: .61rem;
    height: .61rem;
    color: transparent;
    top: 2.6rem;
}
.pet-page__prev {
    left: .5rem;
    background-image: url("https://web-resource.17m3.com/m3guo/202307/version-7b39/app-pet-prev.webp");
    -webkit-animation: aniMouseLeft infinite 1s linear;
            animation: aniMouseLeft infinite 1s linear;
}
.pet-page__next {
    right: .5rem;
    background-image: url("https://web-resource.17m3.com/m3guo/202307/version-7b39/app-pet-next.webp");
    -webkit-animation: aniMouseRight infinite 1s linear;
            animation: aniMouseRight infinite 1s linear;
}
.pet-ft {
    color: rgba(222, 222, 204, 0.35);
    font-family: 'song';
    font-weight: bold;
    font-size: .18rem;
}
.hero-title {
    background-image: url("https://web-resource.17m3.com/m3guo/202307/version-7b39/app-hero-title.webp");
}
.hero-bd {
    width: 6.56rem;
    height: 5.24rem;
    background-image: url("https://web-resource.17m3.com/m3guo/202307/version-7b39/app-hero-bg.webp");
    margin-top: .12rem;
    font-family: 'song';
    padding-left: 1.94rem;
    position: relative;
}
.hero-bd::before {
      content: "";
      position: absolute;
      left: -3.1rem;
      top: -.2rem;
      width: 5.82rem;
      height: 6.83rem;
      background-image: url("https://web-resource.17m3.com/m3guo/202307/version-7b39/app-hero-person.webp");
      pointer-events: none;
}
.hero-plus, .hero-skill {
    color: #f9f4e4;
}
.hero-plus {
    font-size: .2rem;
    line-height: 1.2;
}
.hero-skill {
    line-height: 1.4;
    margin-bottom: .2rem;
}
.hero-desc {
    width: 4.2rem;
    font-size: .22rem;
    color: #f8eac1;
    margin-bottom: .16rem;
}
.hero-desc__item {
      margin-bottom: .16rem;
}
.hero-gif {
    width: 4.1rem;
    height: 2.63rem;
}
.follow-title {
    background-image: url("https://web-resource.17m3.com/m3guo/202307/version-7b39/app-follow-title.webp");
}
.follow-list {
    padding-top: .96rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    position: relative;
}
.follow-list::before {
      content: "";
      pointer-events: none;
      position: absolute;
      top: 0;
      left: 50%;
      margin-left: -3.75rem;
      width: 7.5rem;
      height: 5.6rem;
      background-image: url("https://web-resource.17m3.com/m3guo/202307/version-7b39/app-award-before.webp");
}
.follow-item {
    width: 1.82rem;
    height: 3.02rem;
    background-image: url("https://web-resource.17m3.com/m3guo/202307/version-7b39/app-follow-item.webp");
    margin: 0 .03rem;
    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;
    font-size: .28rem;
    color: #e7cda1;
    font-family: 'song';
    padding-top: .18rem;
}
.follow-item__pic {
      margin-top: .54rem;
      width: 1.44rem;
      height: 1.44rem;
}
.page-bar {
    position: absolute;
    left: 0;
    top: 120%;
    z-index: 10;
    width: 7.5rem;
    height: 100%;
    background-image: url("https://web-resource.17m3.com/m3guo/202307/version-7b39/app-page.jpg");
    -webkit-transition: all .5s;
    transition: all .5s;
    -webkit-transform-origin: left top;
            transform-origin: left top;
    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;
}
.page-bar.is-show {
      top: 0;
}
.page-back {
    width: 1.44rem;
    height: .68rem;
    background-image: url("https://web-resource.17m3.com/m3guo/202307/version-7b39/page-back-side.webp");
    position: absolute;
    z-index: 15;
    left: .18rem;
    top: .2rem;
    color: transparent;
}
.page-back::before {
      content: "";
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      background-image: url("https://web-resource.17m3.com/m3guo/202307/version-7b39/page-back.webp");
      -webkit-animation: aniBtnBack infinite 1s linear;
              animation: aniBtnBack infinite 1s linear;
}
.page-item {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 13.34rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}
.page-item::before {
      content: "";
      position: absolute;
      z-index: 1;
      left: 0;
      width: 7.5rem;
}
.page-item.is-t01::before {
      top: .6rem;
      height: 6.44rem;
      background-image: url("https://web-resource.17m3.com/m3guo/202307/version-7b39/app-t01-person.webp");
}
.page-item.is-t02::before {
      top: -1.2rem;
      height: 10.5rem;
      background-image: url("https://web-resource.17m3.com/m3guo/202307/version-7b39/app-t02-person.webp");
}
.page-item.is-t03::before {
      top: -.12rem;
      height: 7.21rem;
      background-image: url("https://web-resource.17m3.com/m3guo/202307/version-7b39/app-t03-person.webp");
}
.page-item.is-t04::before {
      top: -.18em;
      height: 7.62rem;
      background-image: url("https://web-resource.17m3.com/m3guo/202307/version-7b39/app-t04-person.webp");
}
.page-item.is-t05::before {
      top: 0;
      height: 7.1rem;
      background-image: url("https://web-resource.17m3.com/m3guo/202307/version-7b39/app-t05-person.webp");
}
.page-person {
    position: absolute;
    z-index: 2;
    width: 50%;
    height: 3.6rem;
    top: 1.57rem;
    left: 0;
}
.page-person .page-skill {
      top: 3rem;
}
.page-person.is-hwd .page-skill, .page-person.is-xq .page-skill, .page-person.is-gn .page-skill, .page-person.is-cp .page-skill, .page-person.is-zc .page-skill {
      left: .42rem;
}
.page-person.is-xq, .page-person.is-cp, .page-person.is-lx {
      left: 50%;
}
.page-person.is-cc, .page-person.is-md {
      width: 100%;
}
.page-person.is-cc .page-skill, .page-person.is-md .page-skill {
        left: 2.45rem;
}
.page-skill {
    position: absolute;
    width: 2.62rem;
    height: .62rem;
    color: transparent;
    background-image: url("https://web-resource.17m3.com/m3guo/202307/version-7b39/app-page-btn.webp");
}
.page-box {
    position: absolute;
    left: 0;
    top: 5.26rem;
    z-index: 3;
    width: 7.5rem;
    height: 8.75rem;
    background-image: url("https://web-resource.17m3.com/m3guo/202307/version-7b39/app-page-bd.webp");
    padding-top: .6rem;
    color: #308488;
    font-family: 'song';
    font-size: .22rem;
}
.page-box__scroll {
      width: 6.6rem;
      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;
      height: 4.8rem;
      overflow: auto;
}
.page-box__scroll::-webkit-scrollbar {
        width: .03rem;
        background-color: #f9e5d2;
}
.page-box__scroll::-webkit-scrollbar-thumb {
        background-color: #56a4a2;
}
.page-title {
    width: 5.8rem;
    height: 1.52rem;
    margin: 0 auto;
    color: transparent;
}
.page-title.is-t01 {
      background-image: url("https://web-resource.17m3.com/m3guo/202307/version-7b39/app-t01-title.webp");
}
.page-title.is-t02 {
      background-image: url("https://web-resource.17m3.com/m3guo/202307/version-7b39/app-t02-title.webp");
}
.page-title.is-t03 {
      background-image: url("https://web-resource.17m3.com/m3guo/202307/version-7b39/app-t03-title.webp");
}
.page-title.is-t04 {
      background-image: url("https://web-resource.17m3.com/m3guo/202307/version-7b39/app-t04-title.webp");
}
.page-title.is-t05 {
      background-image: url("https://web-resource.17m3.com/m3guo/202307/version-7b39/app-t05-title.webp");
}
.page-chapter {
    width: 5.8rem;
    position: relative;
    margin-bottom: .3rem;
}
.page-chapter::after {
      content: "";
      position: absolute;
      left: 50%;
      bottom: -.14rem;
      margin-left: -2.82rem;
      width: 5.64rem;
      height: .07rem;
      background-image: url("https://web-resource.17m3.com/m3guo/202307/version-7b39/app-page-line.webp");
}
.page-info {
    width: 5.8rem;
}
.page-level {
    width: 1.09rem;
    height: .29rem;
    background-image: url("https://web-resource.17m3.com/m3guo/202307/version-7b39/app-page-level.webp");
    color: transparent;
    margin-bottom: .06rem;
}
.page-desc {
    line-height: 2;
}
.page-pic {
    width: 6.12rem;
    height: 3.92rem;
}
.nav-bar {
    position: absolute;
    z-index: 20;
    left: 0;
    top: 100%;
    width: 7.5rem;
    -webkit-transition: all .5s linear;
    transition: all .5s linear;
    -webkit-transform-origin: left center;
            transform-origin: left center;
}
.nav-bar.is-show {
      margin-top: -.9rem;
}
.nav-bar.is-sub {
      margin-top: -.06rem;
}
.nav-list {
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}
.nav-item {
    position: relative;
    width: 25%;
}
.nav-item:last-child {
      display: none;
}
.nav-desc {
    position: relative;
    width: 1.86rem;
    height: .83rem;
    color: transparent;
}
.nav-desc.is-crt::after {
      content: "";
      position: absolute;
      right: -.2rem;
      bottom: 0;
      width: .41rem;
      height: .8rem;
      background-image: url("https://web-resource.17m3.com/m3guo/202307/version-7b39/app-nav-town.webp");
}
.nav-desc__0 {
      background-image: url("https://web-resource.17m3.com/m3guo/202307/version-7b39/app-nav-home.webp");
}
.nav-desc__1 {
      background-image: url("https://web-resource.17m3.com/m3guo/202307/version-7b39/app-nav-trip.webp");
}
.nav-desc__1.is-crt {
        background-image: url("https://web-resource.17m3.com/m3guo/202307/version-7b39/app-nav-trip-crt.webp");
}
.nav-desc__2 {
      background-image: url("https://web-resource.17m3.com/m3guo/202307/version-7b39/app-nav-level.webp");
}
.nav-desc__2.is-crt {
        background-image: url("https://web-resource.17m3.com/m3guo/202307/version-7b39/app-nav-level-crt.webp");
}
.nav-desc__3 {
      background-image: url("https://web-resource.17m3.com/m3guo/202307/version-7b39/app-nav-award.webp");
}
.nav-desc__3.is-crt {
        background-image: url("https://web-resource.17m3.com/m3guo/202307/version-7b39/app-nav-award-crt.webp");
}
.nav-sub {
    position: absolute;
    left: -1.86rem;
    top: 1.6rem;
    width: 7.5rem;
    height: 1.22rem;
    overflow: hidden;
    -webkit-transition: all .5s;
    transition: all .5s;
    background-image: url("https://web-resource.17m3.com/m3guo/202307/version-7b39/app-nav-sub.webp");
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: end;
        -ms-flex-align: end;
            align-items: flex-end;
    color: #4e7362;
    font-family: 'song';
    font-size: .22rem;
}
.nav-sub.is-open {
      top: -1.1rem;
}
.nav-sub::before, .nav-sub::after {
      content: "";
      position: absolute;
      width: .63rem;
      height: .01rem;
      pointer-events: none;
      bottom: .43rem;
}
.nav-sub::before {
      left: .45rem;
      background-image: url("https://web-resource.17m3.com/m3guo/202307/version-7b39/app-nav-hd.webp");
}
.nav-sub::after {
      right: .45rem;
      background-image: url("https://web-resource.17m3.com/m3guo/202307/version-7b39/app-nav-ft.webp");
}
.nav-sub__item {
      width: 1.26rem;
      text-align: center;
      position: relative;
      margin-bottom: .5rem;
}
.nav-sub__item::before {
        content: "";
        position: absolute;
        bottom: -.3rem;
        left: 50%;
        margin-left: -.115rem;
        width: .23rem;
        height: .27rem;
        background-image: url("https://web-resource.17m3.com/m3guo/202307/version-7b39/app-nav-diamond.webp");
}
.nav-sub__item.is-crt {
        font-size: .24rem;
        color: #77c2af;
        text-shadow: 0 0 0.13rem rgba(189, 228, 219, 0.75);
}
.nav-sub__item.is-crt::before {
          background-image: url("https://web-resource.17m3.com/m3guo/202307/version-7b39/app-nav-flower.webp");
}
.nav-sub__item::after {
        content: "";
        position: absolute;
        left: .76rem;
        bottom: -.07rem;
        width: 1rem;
        height: .01rem;
        background: url("https://web-resource.17m3.com/m3guo/202307/version-7b39/app-nav-point.webp");
        pointer-events: none;
}
.nav-sub__item:last-child::after {
        display: none;
}
.skill-bar .d-close {
    bottom: -.8rem;
}
.skill-tab {
    position: absolute;
    top: -.6rem;
    left: 0;
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
}
.skill-tab::before {
      content: "";
      position: absolute;
      pointer-events: none;
      width: 5.78rem;
      height: .07rem;
      background-image: url("https://web-resource.17m3.com/m3guo/202307/version-7b39/app-zc-tab-line.webp");
      top: .2rem;
      left: 50%;
      margin-left: -2.89rem;
}
.skill-tab__item {
      width: 1.69rem;
      height: .41rem;
      color: transparent;
      margin: 0 .2rem;
      -webkit-transition: all .5s;
      transition: all .5s;
}
.skill-tab__item.is-1 {
        background-image: url("https://web-resource.17m3.com/m3guo/202307/version-7b39/app-zc-tab-white.webp");
}
.skill-tab__item.is-1.is-crt {
          background-image: url("https://web-resource.17m3.com/m3guo/202307/version-7b39/app-zc-tab-white-crt.webp");
}
.skill-tab__item.is-2 {
        background-image: url("https://web-resource.17m3.com/m3guo/202307/version-7b39/app-zc-tab-king.webp");
}
.skill-tab__item.is-2.is-crt {
          background-image: url("https://web-resource.17m3.com/m3guo/202307/version-7b39/app-zc-tab-king-crt.webp");
}
.rule-desc {
    font-size: .24rem;
}
}
@media screen and (min-width: 751px) {
  /*
 * @Author: whj 
 * @Date: 2021-06-24 15:04:20 
 * @Last Modified by: whj
 * @Last Modified time: 2023-06-29 14:26:16
 */
.topBar,
  #M3-footer {
    display: block;
}
body,
  html {
    width: 100%;
    height: 100%;
    overflow: hidden;
}
body {
    font: 16px/1.6 '\5FAE\8F6F\96C5\9ED1';
}
#M3-footer {
    position: absolute;
    left: 0;
    width: 100%;
    z-index: 10;
    -webkit-transition: all .5s;
    transition: all .5s;
}
#M3-footer::before {
      content: "";
      position: absolute;
      width: 133px;
      height: 30px;
      background-image: url("https://web-resource.17m3.com/m3guo/202307/version-7b39/copyright-bg.webp");
      right: 0;
      top: -30px;
}
#M3-footer::after {
      content: "";
      position: absolute;
      width: 22px;
      height: 22px;
      background: url("https://web-resource.17m3.com/m3guo/202307/version-7b39/copyright-icon.webp") no-repeat 0 0;
      right: 96px;
      top: -25px;
      -webkit-transition: all .5s;
      transition: all .5s;
}
#M3-footer.is-show {
      margin-top: -160px;
}
#M3-footer.is-show::after {
        -webkit-transform: rotate(-180deg);
                transform: rotate(-180deg);
}
#app {
    position: relative;
    width: 1920px;
    height: 1080px;
    -webkit-transform-origin: left top;
            transform-origin: left top;
    overflow: hidden;
}
.part {
    position: absolute;
    left: 0;
    top: 0;
    width: 1920px;
    height: 1080px;
    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: 20px;
    -webkit-transition: all 1s;
    transition: all 1s;
    -webkit-filter: blur(0.1);
            filter: blur(0.1);
}
.part.is-hide {
      opacity: 0;
      -webkit-transform: scale(2);
              transform: scale(2);
      pointer-events: none;
}
.part.is-show {
      -webkit-transform: scale(1);
              transform: scale(1);
      -webkit-filter: blur(1);
              filter: blur(1);
}
.m-title {
    width: 1155px;
    height: 128px;
    background: no-repeat 0 0;
    text-indent: -999rem;
}
.banner-logo, .banner-home, .banner-download {
    position: absolute;
    z-index: 9;
    background: no-repeat 0 0;
    text-indent: -999rem;
}
.banner-logo {
    width: 124px;
    height: 98px;
    left: 54px;
    top: 20px;
    background-image: url("https://web-resource.17m3.com/m3guo/202307/version-7b39/logo.webp");
}
.banner-home, .banner-download {
    top: 60px;
    width: 114px;
    background-size: 100% auto;
    -webkit-filter: drop-shadow(0 0 10px rgba(17, 22, 22, 0.59));
            filter: drop-shadow(0 0 10px rgba(17, 22, 22, 0.59));
    -webkit-transition: all .5s;
    transition: all .5s;
}
.banner-home:hover, .banner-download:hover {
      -webkit-filter: drop-shadow(0 0 10px rgba(17, 22, 22, 0));
              filter: drop-shadow(0 0 10px rgba(17, 22, 22, 0));
}
.banner-home {
    right: 194px;
    height: 32px;
    background-image: url("https://web-resource.17m3.com/m3guo/202307/version-7b39/btn-home.webp");
}
.banner-download {
    right: 68px;
    height: 30px;
    background-image: url("https://web-resource.17m3.com/m3guo/202307/version-7b39/btn-download.webp");
}
.banner-video {
    position: absolute;
    left: 0;
    top: 0;
    width: 1920px;
    height: 1080px;
    background: no-repeat center top;
    cursor: url("https://web-resource.17m3.com/m3guo/202307/version-7b39/pointer.png"), pointer;
}
.banner-video__king {
      z-index: 1;
      background-image: url("https://web-resource.17m3.com/m3guo/202307/version-7b39/banner-king.jpg");
}
.banner-video__white {
      z-index: 2;
      background-image: url("https://web-resource.17m3.com/m3guo/202307/version-7b39/banner-white.jpg");
      opacity: 1;
      -webkit-transition: all 1s;
      transition: all 1s;
}
.banner-video__white.is-next {
        opacity: 0;
}
.banner-scroll {
    position: absolute;
    z-index: 5;
    top: 828px;
    left: 50%;
    margin-left: -379px;
    width: 758px;
    height: 83px;
    background: url("https://web-resource.17m3.com/m3guo/202307/version-7b39/scroll-bg.webp") no-repeat 0 0;
}
.banner-scroll::before, .banner-scroll::after {
      position: absolute;
      content: "";
      top: 18px;
      left: 50%;
      width: 38px;
      height: 38px;
      background: no-repeat 0 0;
}
.banner-scroll::before {
      margin-left: -120px;
      background-image: url("https://web-resource.17m3.com/m3guo/202307/version-7b39/scroll-prev.webp");
      -webkit-animation: aniMouseLeft infinite 1.5s linear;
              animation: aniMouseLeft infinite 1.5s linear;
}
.banner-scroll::after {
      margin-left: 78px;
      background-image: url("https://web-resource.17m3.com/m3guo/202307/version-7b39/scroll-next.webp");
      -webkit-animation: aniMouseRight infinite 1.5s linear;
              animation: aniMouseRight infinite 1.5s linear;
}
.banner-scroll__down {
      position: absolute;
      width: 24px;
      height: 34px;
      background: url("https://web-resource.17m3.com/m3guo/202307/version-7b39/scroll-down.webp") no-repeat 0 0;
      left: 50%;
      margin-left: -12px;
      top: 66px;
      -webkit-animation: aniMouseDown infinite 1.5S linear;
              animation: aniMouseDown infinite 1.5S linear;
}
.user-bar {
    position: relative;
    z-index: 5;
    height: 88px;
    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: #efc676;
    font-size: 16px;
}
.user-rule {
    position: absolute;
    bottom: -26px;
    left: 50%;
    margin-left: -67px;
    width: 135px;
    height: 36px;
    background-image: url("https://web-resource.17m3.com/m3guo/202307/version-7b39/trip-rule.webp");
    color: #ffebcd;
    font-size: 20px;
    font-family: 'song';
}
.trip-bar {
    background-image: url("https://web-resource.17m3.com/m3guo/202307/version-7b39/trip-bg.jpg");
}
.trip-title {
    background-image: url("https://web-resource.17m3.com/m3guo/202307/version-7b39/trip-title.webp");
}
.trip-list {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    margin-top: -10px;
}
.trip-item {
    width: 232px;
    height: 560px;
    position: relative;
    margin: 0 35px;
}
.trip-item::before {
      content: "";
      position: absolute;
      z-index: 2;
      top: 0;
      left: 50%;
      margin-left: -122px;
      width: 232px;
      height: 472px;
      background: url("https://web-resource.17m3.com/m3guo/202307/version-7b39/trip-light.webp") no-repeat 0 0;
      pointer-events: none;
      opacity: 0;
      -webkit-transform: translateY(150px);
              transform: translateY(150px);
      -webkit-transition: all .3s linear;
      transition: all .3s linear;
}
.trip-item:hover::before {
      opacity: 1;
      -webkit-transform: translateY(0);
              transform: translateY(0);
}
.trip-item:not(:last-child):after {
      content: "";
      position: absolute;
      top: 204px;
      left: 205px;
      width: 73px;
      height: 1px;
      background: url("https://web-resource.17m3.com/m3guo/202307/version-7b39/trip-point.webp") no-repeat 0 0;
      -webkit-animation: aniMouseRight infinite 2s linear;
              animation: aniMouseRight infinite 2s linear;
}
.trip-pic {
    position: absolute;
    z-index: 5;
    top: 40px;
    left: 50%;
    margin-left: -150px;
    width: 300px;
    height: 300px;
    background: no-repeat 0 0;
    text-indent: -999rem;
    cursor: pointer;
}
.trip-pic__1 {
      background-image: url("https://web-resource.17m3.com/m3guo/202307/version-7b39/trip-1.webp");
}
.trip-pic__2 {
      background-image: url("https://web-resource.17m3.com/m3guo/202307/version-7b39/trip-2.webp");
}
.trip-pic__3 {
      background-image: url("https://web-resource.17m3.com/m3guo/202307/version-7b39/trip-3.webp");
}
.trip-pic__4 {
      background-image: url("https://web-resource.17m3.com/m3guo/202307/version-7b39/trip-4.webp");
}
.trip-pic__5 {
      background-image: url("https://web-resource.17m3.com/m3guo/202307/version-7b39/trip-5.webp");
}
.trip-check {
    position: absolute;
    z-index: 4;
    top: 320px;
    left: 50%;
    margin-left: -20px;
    width: 40px;
    height: 40px;
    background: url("https://web-resource.17m3.com/m3guo/202307/version-7b39/ic-box.webp") no-repeat 0 0;
}
.trip-check.is-true::after {
      content: "";
      position: absolute;
      width: 100%;
      height: 100%;
      background: url("https://web-resource.17m3.com/m3guo/202307/version-7b39/ic-true.webp") no-repeat 0 0;
}
.trip-ft {
    position: relative;
    z-index: 2;
}
.trip-ft__gift {
      position: absolute;
      top: -185px;
      left: 50%;
      margin-left: -142px;
      width: 285px;
      height: 185px;
      background: url("https://web-resource.17m3.com/m3guo/202307/version-7b39/trip-gift.webp") no-repeat 0 0;
      padding-top: 73px;
      padding-left: 120px;
}
.trip-ft__btn {
      width: 326px;
      height: 77px;
      text-indent: -999rem;
      position: relative;
}
.trip-ft__btn.is-share {
        background-image: url("https://web-resource.17m3.com/m3guo/202307/version-7b39/trip-share.webp");
}
.trip-ft__btn.is-receive {
        background-image: url("https://web-resource.17m3.com/m3guo/202307/version-7b39/trip-receive.webp");
}
.trip-ft__btn.is-success {
        background-image: url("https://web-resource.17m3.com/m3guo/202307/version-7b39/trip-success.webp");
}
.trip-ft__btn::before {
        content: "";
        position: absolute;
        width: 483px;
        height: 7px;
        background: url("https://web-resource.17m3.com/m3guo/202307/version-7b39/trip-btn-line.webp") no-repeat 0 0;
        left: 50%;
        margin-left: -241px;
        top: 35px;
}
.trip-ft__btn.is-share:hover::before, .trip-ft__btn.is-receive:hover::before {
        -webkit-animation: aniBtnHover infinite 1s ease-in;
                animation: aniBtnHover infinite 1s ease-in;
}
.trip-ft__btn.is-success::before {
        -webkit-filter: grayscale(0.9);
                filter: grayscale(0.9);
}
.level-bar {
    background-image: url("https://web-resource.17m3.com/m3guo/202307/version-7b39/level-bg.jpg");
}
.level-title {
    background-image: url("https://web-resource.17m3.com/m3guo/202307/version-7b39/level-title.webp");
}
.level-bd {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    padding-top: 20px;
    -webkit-animation: aniToTop 1 .8s ease-out;
            animation: aniToTop 1 .8s ease-out;
}
.level-item {
    width: 590px;
    height: 712px;
    background: url("https://web-resource.17m3.com/m3guo/202307/version-7b39/level-item.webp") 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: 50px;
    position: relative;
    margin: 0 37px;
}
.level-item::before, .level-item::after {
      content: "";
      position: absolute;
      z-index: 3;
      pointer-events: none;
      background: no-repeat 0 0;
}
.level-item::before {
      left: 50px;
      top: 51px;
      width: 490px;
      height: 610px;
      background-image: url("https://web-resource.17m3.com/m3guo/202307/version-7b39/level-before.webp");
}
.level-item__title {
      width: 368px;
      height: 40px;
      background: no-repeat 0 0;
      text-indent: -999rem;
      margin: 7px 0 16px;
}
.level-item__digest {
      width: 324px;
      height: 36px;
      background: no-repeat 0 0;
      text-indent: -999rem;
      margin-bottom: 20px;
}
.level-trip::after {
    left: -280px;
    top: 100px;
    width: 387px;
    height: 569px;
    background-image: url("https://web-resource.17m3.com/m3guo/202307/version-7b39/level-weapon.webp");
}
.level-trip__title {
    background-image: url("https://web-resource.17m3.com/m3guo/202307/version-7b39/level-trip-title.webp");
}
.level-trip__award {
    background-image: url("https://web-resource.17m3.com/m3guo/202307/version-7b39/level-award.webp");
}
.level-gift {
    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;
}
.level-gift__item {
      width: 73px;
      height: 73px;
      background-color: rgba(24, 33, 48, 0.35);
      border: 5px solid #205957;
      border-radius: 10px;
      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 25px 20px;
}
.level-map::after {
    right: -197px;
    top: 137px;
    width: 304px;
    height: 569px;
    background-image: url("https://web-resource.17m3.com/m3guo/202307/version-7b39/level-flower.webp");
}
.level-map__title {
    background-image: url("https://web-resource.17m3.com/m3guo/202307/version-7b39/level-map-title.webp");
}
.level-map__time {
    background-image: url("https://web-resource.17m3.com/m3guo/202307/version-7b39/level-time.webp");
}
.level-map__time + p {
      text-align: center;
      margin-bottom: 16px;
}
.level-map__play {
    background-image: url("https://web-resource.17m3.com/m3guo/202307/version-7b39/level-play.webp");
}
.level-map__desc {
    color: #d8fff9;
    font-family: 'song';
    font-size: 20px;
    width: 430px;
}
.level-slider {
    width: 492px;
    height: 304px;
}
.level-slider .slider-page__prev, .level-slider .slider-page__next {
      width: 35px;
      height: 35px;
      text-indent: -999rem;
      top: 140px;
}
.level-slider .slider-page__prev {
      left: 14px;
      background-image: url("https://web-resource.17m3.com/m3guo/202307/version-7b39/slider-prev.webp");
}
.level-slider .slider-page__next {
      right: 14px;
      background-image: url("https://web-resource.17m3.com/m3guo/202307/version-7b39/slider-next.webp");
}
.award-bar {
    background-image: url("https://web-resource.17m3.com/m3guo/202307/version-7b39/award-bg.jpg");
}
.award-title {
    background-image: url("https://web-resource.17m3.com/m3guo/202307/version-7b39/award-title.webp");
    margin-bottom: 30px;
}
.award-nav {
    position: absolute;
    top: 160px;
    width: 100%;
    z-index: 9;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
}
.award-nav__item {
      width: 276px;
      height: 112px;
      background: no-repeat 0 0;
      text-indent: -999rem;
      margin: 0 30px;
      -webkit-transition: all .5s;
      transition: all .5s;
}
.award-nav__pet {
      background-image: url("https://web-resource.17m3.com/m3guo/202307/version-7b39/award-nav-1-gray.webp");
}
.award-nav__pet.is-crt {
        background-image: url("https://web-resource.17m3.com/m3guo/202307/version-7b39/award-nav-1.webp");
}
.award-nav__hero {
      background-image: url("https://web-resource.17m3.com/m3guo/202307/version-7b39/award-nav-2-gray.webp");
}
.award-nav__hero.is-crt {
        background-image: url("https://web-resource.17m3.com/m3guo/202307/version-7b39/award-nav-2.webp");
}
.award-nav__follow {
      background-image: url("https://web-resource.17m3.com/m3guo/202307/version-7b39/award-nav-3-gray.webp");
}
.award-nav__follow.is-crt {
        background-image: url("https://web-resource.17m3.com/m3guo/202307/version-7b39/award-nav-3.webp");
}
.award-bd {
    position: relative;
    z-index: 1;
    width: 1285px;
    height: 716px;
    background: url("https://web-resource.17m3.com/m3guo/202307/version-7b39/award-item.webp") no-repeat 0 0;
    padding-top: 92px;
}
.award-item {
    width: 100%;
    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;
}
.award-item__title {
      width: 968px;
      height: 50px;
      background: no-repeat 0 0;
      text-indent: -999rem;
      margin-bottom: 10px;
      -webkit-animation: aniToTop 1 .5s ease-out;
              animation: aniToTop 1 .5s ease-out;
}
.award-item__summary {
      width: 688px;
      height: 61px;
      background: url("https://web-resource.17m3.com/m3guo/202307/version-7b39/award-summary.webp") no-repeat 0 0;
      font-size: 20px;
      font-family: 'song';
      color: #3d3523;
      text-align: center;
      line-height: 1.2;
      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;
      padding: 0 70px;
      -webkit-animation: aniToTop 1 .7s ease-out;
              animation: aniToTop 1 .7s ease-out;
}
.pet-title {
    background-image: url("https://web-resource.17m3.com/m3guo/202307/version-7b39/pet-title.webp");
}
.pet-list {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    padding-top: 5px;
    -webkit-animation: aniToTop 1 1s ease-out;
            animation: aniToTop 1 1s ease-out;
}
.pet-item {
    width: 316px;
    height: 448px;
    margin: 0 12px;
    background: url("https://web-resource.17m3.com/m3guo/202307/version-7b39/pet-item.webp") no-repeat 0 0;
    padding-top: 220px;
    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;
}
.pet-item__pic {
      position: absolute;
      left: 25px;
      top: -11px;
      width: 254px;
      height: 248px;
      background: no-repeat 0 0;
}
.pet-item__pic.is-red {
        background-image: url("https://web-resource.17m3.com/m3guo/202307/version-7b39/pet-red.webp");
}
.pet-item__pic.is-purple {
        background-image: url("https://web-resource.17m3.com/m3guo/202307/version-7b39/pet-purple.webp");
}
.pet-item__pic.is-orange {
        background-image: url("https://web-resource.17m3.com/m3guo/202307/version-7b39/pet-orange.webp");
}
.pet-item__eq {
      width: 72px;
      height: 72px;
      background-color: rgba(197, 197, 180, 0.35);
      border: 4px solid rgba(106, 105, 95, 0.45);
      border-radius: 10px;
      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: 5px;
}
.pet-item__name {
      color: #f6f5e2;
      font-family: 'song';
      font-size: 20px;
      width: 270px;
      height: 34px;
      background: url("https://web-resource.17m3.com/m3guo/202307/version-7b39/pet-name.webp") no-repeat center center;
      text-align: center;
      margin-bottom: 5px;
}
.pet-item__desc {
      width: 150px;
      color: #757160;
}
.pet-ft {
    margin-top: 20px;
    font-family: 'song';
    color: rgba(222, 222, 204, 0.35);
    font-size: 14px;
    font-weight: bold;
    -webkit-animation: aniToTop 1 1.2s ease-out;
            animation: aniToTop 1 1.2s ease-out;
}
.hero-bar::before, .hero-bar::after {
    content: "";
    position: absolute;
    background: no-repeat 0 0;
    z-index: 5;
}
.hero-bar::before {
    top: 121px;
    left: 10px;
    width: 539px;
    height: 695px;
    background-image: url("https://web-resource.17m3.com/m3guo/202307/version-7b39/hero-person.webp");
    -webkit-animation: aniToTop 1 1.5s ease-out;
            animation: aniToTop 1 1.5s ease-out;
}
.hero-bar::after {
    top: 65px;
    right: 35px;
    width: 346px;
    height: 743px;
    background-image: url("https://web-resource.17m3.com/m3guo/202307/version-7b39/hero-weapon.webp");
    -webkit-animation: aniToTop 1 1.2s ease-out;
            animation: aniToTop 1 1.2s ease-out;
}
.hero-title {
    background-image: url("https://web-resource.17m3.com/m3guo/202307/version-7b39/hero-title.webp");
}
.hero-bd {
    margin-top: 13px;
    width: 939px;
    height: 534px;
    background: url("https://web-resource.17m3.com/m3guo/202307/version-7b39/hero-bg.webp") no-repeat 0 0;
    padding-left: 325px;
    -webkit-animation: aniToTop 1 1s ease-out;
            animation: aniToTop 1 1s ease-out;
}
.hero-plus, .hero-skill, .hero-desc {
    padding-left: 20px;
    font-family: 'song';
}
.hero-plus, .hero-skill {
    line-height: 1.2;
    color: #f9f4e4;
}
.hero-plus {
    padding-top: 3px;
    font-size: 20px;
}
.hero-skill {
    font-size: 24px;
    margin-bottom: 5px;
}
.hero-desc {
    color: #f8eac1;
    font-size: 18px;
    width: 410px;
    height: 200px;
    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;
}
.hero-desc__item {
      margin-bottom: 10px;
}
.follow-bar::before {
    content: "";
    position: absolute;
    top: 220px;
    left: 50%;
    margin-left: -658px;
    width: 1336px;
    height: 468px;
    background: url("https://web-resource.17m3.com/m3guo/202307/version-7b39/award-before.webp") no-repeat 0 0;
    -webkit-animation: aniScalLight 1 1s linear;
            animation: aniScalLight 1 1s linear;
    pointer-events: none;
}
.follow-title {
    background-image: url("https://web-resource.17m3.com/m3guo/202307/version-7b39/follow-title.webp");
}
.follow-list {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    padding-top: 58px;
    -webkit-animation: aniToTop 1 .3s ease-out;
            animation: aniToTop 1 .3s ease-out;
}
.follow-item {
    width: 222px;
    height: 302px;
    background: url("https://web-resource.17m3.com/m3guo/202307/version-7b39/follow-item.webp") no-repeat 0 0;
    margin: 0 49px;
    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;
}
.follow-item__title {
      color: #e7cda1;
      font-size: 28px;
      font-family: 'song';
      padding: 20px 0 30px;
}
.page-bar {
    position: absolute;
    z-index: 30;
    left: 0;
    top: 100%;
    width: 1920px;
    height: 1080px;
    background: url("https://web-resource.17m3.com/m3guo/202307/version-7b39/page-bg.jpg") no-repeat 0 0;
    -webkit-transition: all .3s linear;
    transition: all .3s linear;
    opacity: 0;
    -webkit-filter: blur(0.5);
            filter: blur(0.5);
}
.page-bar.is-show {
      opacity: 1;
      -webkit-filter: blur(1);
              filter: blur(1);
      top: 0;
}
.page-bar::before {
      content: "";
      position: absolute;
      z-index: 20;
      left: 0;
      bottom: 0;
      width: 1920px;
      height: 321px;
      background: url("https://web-resource.17m3.com/m3guo/202307/version-7b39/page-before.webp") no-repeat 0 0;
      pointer-events: none;
}
.page-back {
    width: 144px;
    height: 68px;
    background-image: url("https://web-resource.17m3.com/m3guo/202307/version-7b39/page-back-side.webp");
    position: absolute;
    z-index: 15;
    left: 80px;
    top: 32px;
    text-indent: -999rem;
}
.page-back::before {
      content: "";
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      background: url("https://web-resource.17m3.com/m3guo/202307/version-7b39/page-back.webp") no-repeat 0 0;
      -webkit-animation: aniBtnBack infinite 1s linear;
              animation: aniBtnBack infinite 1s linear;
}
.page-box {
    position: absolute;
    z-index: 10;
    top: 100px;
    left: 50%;
    margin-left: -272px;
    width: 544px;
    height: 875px;
    background: url("https://web-resource.17m3.com/m3guo/202307/version-7b39/page-box.webp") 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: 60px;
    color: #308488;
    font-family: 'song';
    -webkit-animation: aniToTop 1 .6s linear;
            animation: aniToTop 1 .6s linear;
}
.page-box__scroll {
      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;
}
.page-title {
    width: 412px;
    height: 160px;
    background: no-repeat 0 0;
    text-indent: -999rem;
}
.page-title.is-t01 {
      background-image: url("https://web-resource.17m3.com/m3guo/202307/version-7b39/t01-title.webp");
}
.page-title.is-t02 {
      background-image: url("https://web-resource.17m3.com/m3guo/202307/version-7b39/t02-title.webp");
}
.page-title.is-t03 {
      background-image: url("https://web-resource.17m3.com/m3guo/202307/version-7b39/t03-title.webp");
}
.page-title.is-t04 {
      background-image: url("https://web-resource.17m3.com/m3guo/202307/version-7b39/t04-title.webp");
}
.page-title.is-t05 {
      background-image: url("https://web-resource.17m3.com/m3guo/202307/version-7b39/t05-title.webp");
}
.page-chapter, .page-info {
    width: 380px;
}
.page-chapter {
    font-size: 18px;
    padding: 8px 0;
    position: relative;
    margin-bottom: 20px;
}
.page-chapter::after {
      content: "";
      position: absolute;
      width: 381px;
      height: 7px;
      background: url("https://web-resource.17m3.com/m3guo/202307/version-7b39/page-line.webp") no-repeat 0 0;
      left: 50%;
      margin-left: -190px;
      bottom: -5px;
}
.page-level {
    width: 89px;
    height: 26px;
    text-indent: -999rem;
    background: url("https://web-resource.17m3.com/m3guo/202307/version-7b39/page-level.webp") no-repeat 0 0;
    margin-bottom: 5px;
}
.page-desc {
    font-size: 18px;
    margin-bottom: 6px;
}
.page-skill {
    width: 259px;
    height: 62px;
    background-image: url("https://web-resource.17m3.com/m3guo/202307/version-7b39/page-btn.webp");
    text-indent: -999rem;
    position: absolute;
}
.page-skill::before {
      content: "";
      position: absolute;
      top: 0;
      left: 50%;
      margin-left: -194px;
      width: 387px;
      height: 62px;
      background: url("https://web-resource.17m3.com/m3guo/202307/version-7b39/page-btn-line.webp") no-repeat 0 0;
}
.page-digest {
    position: absolute;
    background: no-repeat 0 0;
}
.page-person {
    position: absolute;
    z-index: 2;
    background: no-repeat 0 0;
    bottom: 0;
}
.page-person:hover .page-skill::before {
      -webkit-animation: aniBtnHover 1s infinite linear;
              animation: aniBtnHover 1s infinite linear;
}
.page-person.is-hwd {
      width: 1216px;
      height: 1048px;
      left: 0;
      background-image: url("https://web-resource.17m3.com/m3guo/202307/version-7b39/hwd-person.webp");
      -webkit-animation: aniToHwd 1 .5s linear;
              animation: aniToHwd 1 .5s linear;
}
.page-person.is-hwd .page-skill {
        left: 278px;
        bottom: 320px;
}
.page-person.is-hwd .page-digest {
        left: 410px;
        top: 280px;
        width: 247px;
        height: 103px;
        background-image: url("https://web-resource.17m3.com/m3guo/202307/version-7b39/hwd-digest.webp");
}
.page-person.is-hwd:hover .page-digest {
        -webkit-transform-origin: left top;
                transform-origin: left top;
        -webkit-animation: aniTalk infinite 1s linear;
                animation: aniTalk infinite 1s linear;
}
.page-person.is-xq {
      width: 955px;
      height: 871px;
      right: 0;
      background-image: url("https://web-resource.17m3.com/m3guo/202307/version-7b39/xq-person.webp");
      -webkit-animation: aniToXq 1 .5s linear;
              animation: aniToXq 1 .5s linear;
}
.page-person.is-xq .page-skill {
        right: 246px;
        bottom: 320px;
}
.page-person.is-xq .page-digest {
        right: 392px;
        top: -30px;
        width: 300px;
        height: 112px;
        background-image: url("https://web-resource.17m3.com/m3guo/202307/version-7b39/xq-digest.webp");
}
.page-person.is-xq:hover .page-digest {
        -webkit-transform-origin: right bottom;
                transform-origin: right bottom;
        -webkit-animation: aniTalk infinite 1s linear;
                animation: aniTalk infinite 1s linear;
}
.page-person.is-cc {
      width: 991px;
      height: 1050px;
      left: 312px;
      bottom: 30px;
      background-image: url("https://web-resource.17m3.com/m3guo/202307/version-7b39/cc-person.webp");
      -webkit-animation: aniToCc 1 .5s linear;
              animation: aniToCc 1 .5s linear;
}
.page-person.is-cc + .page-box {
        margin-left: 94px;
}
.page-person.is-cc .page-skill {
        left: 224px;
        bottom: 290px;
}
.page-person.is-cc .page-digest {
        left: 92px;
        top: 310px;
        width: 310px;
        height: 105px;
        background-image: url("https://web-resource.17m3.com/m3guo/202307/version-7b39/cc-digest.webp");
}
.page-person.is-cc:hover .page-digest {
        -webkit-transform-origin: right top;
                transform-origin: right top;
        -webkit-animation: aniTalk infinite 1s linear;
                animation: aniTalk infinite 1s linear;
}
.page-person.is-gn {
      z-index: 11;
      width: 876px;
      height: 1005px;
      left: 0;
      bottom: 20px;
      background-image: url("https://web-resource.17m3.com/m3guo/202307/version-7b39/gn-person.webp");
      -webkit-animation: aniToGn 1 .5s linear;
              animation: aniToGn 1 .5s linear;
}
.page-person.is-gn .page-skill {
        left: 310px;
        bottom: 300px;
}
.page-person.is-gn .page-digest {
        left: 450px;
        top: 270px;
        width: 280px;
        height: 105px;
        background-image: url("https://web-resource.17m3.com/m3guo/202307/version-7b39/gn-digest.webp");
}
.page-person.is-gn:hover .page-digest {
        -webkit-transform-origin: left top;
                transform-origin: left top;
        -webkit-animation: aniTalk infinite 1s linear;
                animation: aniTalk infinite 1s linear;
}
.page-person.is-cp {
      width: 874px;
      height: 968px;
      right: 0;
      bottom: 48px;
      background-image: url("https://web-resource.17m3.com/m3guo/202307/version-7b39/cp-person.webp");
      -webkit-animation: aniToCp 1 .5s linear;
              animation: aniToCp 1 .5s linear;
}
.page-person.is-cp .page-skill {
        right: 246px;
        bottom: 320px;
}
.page-person.is-cp .page-digest {
        right: 490px;
        top: 260px;
        width: 210px;
        height: 112px;
        background-image: url("https://web-resource.17m3.com/m3guo/202307/version-7b39/cp-digest.webp");
}
.page-person.is-cp:hover .page-digest {
        -webkit-transform-origin: right top;
                transform-origin: right top;
        -webkit-animation: aniTalk infinite 1s linear;
                animation: aniTalk infinite 1s linear;
}
.page-person.is-md {
      width: 1224px;
      height: 1080px;
      left: 0;
      background-image: url("https://web-resource.17m3.com/m3guo/202307/version-7b39/md-person.webp");
      -webkit-animation: aniToMd 1 .5s linear;
              animation: aniToMd 1 .5s linear;
}
.page-person.is-md + .page-box {
        margin-left: 100px;
}
.page-person.is-md .page-skill {
        left: 532px;
        bottom: 312px;
}
.page-person.is-md .page-digest {
        left: 758px;
        top: 256px;
        width: 310px;
        height: 105px;
        background-image: url("https://web-resource.17m3.com/m3guo/202307/version-7b39/md-digest.webp");
}
.page-person.is-md:hover .page-digest {
        -webkit-transform-origin: left top;
                transform-origin: left top;
        -webkit-animation: aniTalk infinite 1s linear;
                animation: aniTalk infinite 1s linear;
}
.page-person.is-zc {
      z-index: 11;
      width: 769px;
      height: 1003px;
      left: 0;
      background-image: url("https://web-resource.17m3.com/m3guo/202307/version-7b39/zc-person.webp");
      -webkit-animation: aniToZc 1 .5s linear;
              animation: aniToZc 1 .5s linear;
}
.page-person.is-zc .page-skill {
        left: 312px;
        bottom: 320px;
}
.page-person.is-zc .page-digest {
        left: 416px;
        top: 400px;
        width: 280px;
        height: 105px;
        background-image: url("https://web-resource.17m3.com/m3guo/202307/version-7b39/zc-digest.webp");
}
.page-person.is-zc:hover .page-digest {
        -webkit-transform-origin: left top;
                transform-origin: left top;
        -webkit-animation: aniTalk infinite 1s linear;
                animation: aniTalk infinite 1s linear;
}
.page-person.is-lx {
      width: 721px;
      height: 869px;
      right: 90px;
      bottom: 86px;
      background-image: url("https://web-resource.17m3.com/m3guo/202307/version-7b39/lx-person.webp");
      -webkit-animation: aniTolx 1 .5s linear;
              animation: aniTolx 1 .5s linear;
}
.page-person.is-lx .page-skill {
        right: 190px;
        bottom: 220px;
}
.page-person.is-lx .page-digest {
        right: 370px;
        top: 210px;
        width: 240px;
        height: 112px;
        background-image: url("https://web-resource.17m3.com/m3guo/202307/version-7b39/lx-digest.webp");
}
.nav-bar {
    position: absolute;
    right: -400px;
    top: 290px;
    z-index: 31;
    font-family: 'song';
    text-align: right;
    -webkit-transition: all .5s linear;
    transition: all .5s linear;
}
.nav-bar::before, .nav-bar::after {
      content: "";
      position: absolute;
      right: 0;
      width: 3px;
      height: 76px;
      background: no-repeat 0 0;
}
.nav-bar::before {
      top: -76px;
      background-image: url("https://web-resource.17m3.com/m3guo/202307/version-7b39/nav-hd.webp");
}
.nav-bar::after {
      bottom: -76px;
      background-image: url("https://web-resource.17m3.com/m3guo/202307/version-7b39/nav-ft.webp");
}
.nav-bar.is-show {
      right: 24px;
}
.nav-item {
    position: relative;
}
.nav-item:not(:last-child) {
      position: relative;
      margin-bottom: 78px;
}
.nav-item:not(:last-child)::after {
        content: "";
        position: absolute;
        right: -4px;
        top: 24px;
        height: 78px;
        width: 7px;
        background: url("https://web-resource.17m3.com/m3guo/202307/version-7b39/nav-point.webp") repeat-y 0 0;
}
.nav-item:not(:last-child).is-task {
        margin-bottom: 0;
}
.nav-item:not(:last-child).is-task::after {
          opacity: 0;
}
.nav-item:last-child::before {
      content: "";
      position: absolute;
      left: 35px;
      top: 6px;
      width: 16px;
      height: 16px;
      background: url("https://web-resource.17m3.com/m3guo/202307/version-7b39/nav-home.webp") no-repeat 0 0;
      -webkit-transition: all .3s;
      transition: all .3s;
}
.nav-item:last-child:hover::before {
      -webkit-transform: rotate(-90deg);
              transform: rotate(-90deg);
}
.nav-desc {
    font-size: 18px;
    color: #4e8879;
    padding-right: 20px;
    position: relative;
}
.nav-desc::before {
      content: "";
      position: absolute;
      right: -2px;
      top: 50%;
      margin-top: -4px;
      width: 7px;
      height: 7px;
      background: url("https://web-resource.17m3.com/m3guo/202307/version-7b39/nav-diamond.webp") no-repeat 0 0;
}
.nav-desc::after {
      content: "";
      position: absolute;
      z-index: 2;
      width: 205px;
      height: 46px;
      right: -13px;
      top: -14px;
      background: no-repeat 0 0;
      -webkit-transition: all .3s linear;
      transition: all .3s linear;
      opacity: 0;
}
.nav-desc:hover:after, .nav-desc.is-crt::after {
      opacity: 1;
}
.nav-desc__1:hover:after, .nav-desc__1.is-crt::after {
      background-image: url("https://web-resource.17m3.com/m3guo/202307/version-7b39/nav-trip.webp");
}
.nav-desc__2:hover:after, .nav-desc__2.is-crt::after {
      background-image: url("https://web-resource.17m3.com/m3guo/202307/version-7b39/nav-level.webp");
}
.nav-desc__3:hover:after, .nav-desc__3.is-crt::after {
      background-image: url("https://web-resource.17m3.com/m3guo/202307/version-7b39/nav-award.webp");
}
.nav-sub {
    position: relative;
    height: 0;
    overflow: hidden;
    width: 156px;
    font-size: 18px;
    background: -webkit-gradient(linear, right top, left top, from(rgba(17, 21, 21, 0.4)), to(rgba(17, 21, 21, 0)));
    background: linear-gradient(to left, rgba(17, 21, 21, 0.4), rgba(17, 21, 21, 0));
    -webkit-transition: all .5s linear;
    transition: all .5s linear;
}
.nav-sub::after {
      content: "";
      position: absolute;
      right: -4px;
      top: 0;
      width: 7px;
      height: 0;
      background: url("https://web-resource.17m3.com/m3guo/202307/version-7b39/nav-point.webp") repeat-y 0 0;
      -webkit-transition: all .5s linear;
      transition: all .5s linear;
}
.nav-sub.is-open {
      height: 150px;
      margin-bottom: 10px;
}
.nav-sub.is-open::after {
        height: 100%;
}
.nav-sub__item {
      padding-right: 25px;
      line-height: 30px;
      color: #485a52;
      position: relative;
}
.nav-sub__item::before {
        content: "";
        position: absolute;
        left: 25px;
        top: 8px;
        width: 23px;
        height: 15px;
        background: url("https://web-resource.17m3.com/m3guo/202307/version-7b39/nav-flower.webp") no-repeat 0 0;
        -webkit-transform: scale(0);
                transform: scale(0);
        -webkit-transition: all .5s;
        transition: all .5s;
}
.nav-sub__item.is-crt, .nav-sub__item:hover {
        color: #77c2af;
        background: -webkit-gradient(linear, right top, left top, from(rgba(17, 21, 21, 0.4)), to(rgba(17, 21, 21, 0)));
        background: linear-gradient(to left, rgba(17, 21, 21, 0.4), rgba(17, 21, 21, 0));
}
.nav-sub__item.is-crt::before, .nav-sub__item:hover::before {
          -webkit-transform: scale(1);
                  transform: scale(1);
}
#cloud {
    position: absolute;
    z-index: 99;
    width: 1920px;
    height: 1080px;
    left: 0;
    top: 0;
    -webkit-animation: aniCloud 1 1.5s linear;
            animation: aniCloud 1 1.5s linear;
    background-size: 100% 100%;
}
.skill-bar {
    font-size: 18px;
}
.skill-tab {
    position: absolute;
    top: 0;
    right: -.75rem;
    width: .58rem;
}
.skill-tab__item {
      width: .58rem;
      height: 1.27rem;
      text-indent: -999rem;
      margin-bottom: .1rem;
      -webkit-transition: all .5s;
      transition: all .5s;
}
.skill-tab__item.is-1 {
        background-image: url("https://web-resource.17m3.com/m3guo/202307/version-7b39/zc-tab-white.webp");
}
.skill-tab__item.is-1.is-crt {
          background-image: url("https://web-resource.17m3.com/m3guo/202307/version-7b39/zc-tab-white-crt.webp");
}
.skill-tab__item.is-2 {
        background-image: url("https://web-resource.17m3.com/m3guo/202307/version-7b39/zc-tab-king.webp");
}
.skill-tab__item.is-2.is-crt {
          background-image: url("https://web-resource.17m3.com/m3guo/202307/version-7b39/zc-tab-king-crt.webp");
}
@-webkit-keyframes aniBtnHover {
0% {
      -webkit-transform: rotateX(0);
              transform: rotateX(0);
}
50% {
      -webkit-transform: rotateX(0.5turn);
              transform: rotateX(0.5turn);
}
100% {
      -webkit-transform: rotateX(1turn);
              transform: rotateX(1turn);
}
}
@keyframes aniBtnHover {
0% {
      -webkit-transform: rotateX(0);
              transform: rotateX(0);
}
50% {
      -webkit-transform: rotateX(0.5turn);
              transform: rotateX(0.5turn);
}
100% {
      -webkit-transform: rotateX(1turn);
              transform: rotateX(1turn);
}
}
@-webkit-keyframes aniPet {
0%,
    100% {
      -webkit-transform: rotate(0);
              transform: rotate(0);
}
25% {
      -webkit-transform: rotate(-5deg);
              transform: rotate(-5deg);
}
75% {
      -webkit-transform: rotate(3deg);
              transform: rotate(3deg);
}
}
@keyframes aniPet {
0%,
    100% {
      -webkit-transform: rotate(0);
              transform: rotate(0);
}
25% {
      -webkit-transform: rotate(-5deg);
              transform: rotate(-5deg);
}
75% {
      -webkit-transform: rotate(3deg);
              transform: rotate(3deg);
}
}
@-webkit-keyframes aniToTop {
0% {
      opacity: 0;
      -webkit-transform: translateY(120px);
              transform: translateY(120px);
}
100% {
      opacity: 1;
      -webkit-transform: translateY(0);
              transform: translateY(0);
}
}
@keyframes aniToTop {
0% {
      opacity: 0;
      -webkit-transform: translateY(120px);
              transform: translateY(120px);
}
100% {
      opacity: 1;
      -webkit-transform: translateY(0);
              transform: translateY(0);
}
}
@-webkit-keyframes aniScalLight {
0% {
      opacity: 0;
      -webkit-transform: scale(0.8);
              transform: scale(0.8);
      -webkit-filter: blur(0.9);
              filter: blur(0.9);
}
100% {
      opacity: 1;
      -webkit-transform: scale(1);
              transform: scale(1);
}
}
@keyframes aniScalLight {
0% {
      opacity: 0;
      -webkit-transform: scale(0.8);
              transform: scale(0.8);
      -webkit-filter: blur(0.9);
              filter: blur(0.9);
}
100% {
      opacity: 1;
      -webkit-transform: scale(1);
              transform: scale(1);
}
}
@-webkit-keyframes aniTalk {
0%,
    100% {
      -webkit-transform: rotate(0);
              transform: rotate(0);
}
25% {
      -webkit-transform: rotate(-10deg);
              transform: rotate(-10deg);
}
75% {
      -webkit-transform: rotate(5deg);
              transform: rotate(5deg);
}
}
@keyframes aniTalk {
0%,
    100% {
      -webkit-transform: rotate(0);
              transform: rotate(0);
}
25% {
      -webkit-transform: rotate(-10deg);
              transform: rotate(-10deg);
}
75% {
      -webkit-transform: rotate(5deg);
              transform: rotate(5deg);
}
}
@-webkit-keyframes aniToHwd {
0% {
      opacity: 0;
      -webkit-transform: translate(-120px, 50px);
              transform: translate(-120px, 50px);
}
100% {
      opacity: 1;
      -webkit-transform: translate(0, 0);
              transform: translate(0, 0);
}
}
@keyframes aniToHwd {
0% {
      opacity: 0;
      -webkit-transform: translate(-120px, 50px);
              transform: translate(-120px, 50px);
}
100% {
      opacity: 1;
      -webkit-transform: translate(0, 0);
              transform: translate(0, 0);
}
}
@-webkit-keyframes aniToXq {
0% {
      opacity: 0;
      -webkit-transform: translate(120px, -50px);
              transform: translate(120px, -50px);
}
100% {
      opacity: 1;
      -webkit-transform: translate(0, 0);
              transform: translate(0, 0);
}
}
@keyframes aniToXq {
0% {
      opacity: 0;
      -webkit-transform: translate(120px, -50px);
              transform: translate(120px, -50px);
}
100% {
      opacity: 1;
      -webkit-transform: translate(0, 0);
              transform: translate(0, 0);
}
}
@-webkit-keyframes aniToCc {
0% {
      opacity: 0;
      -webkit-transform: translate(120px, 50px);
              transform: translate(120px, 50px);
}
100% {
      opacity: 1;
      -webkit-transform: translate(0, 0);
              transform: translate(0, 0);
}
}
@keyframes aniToCc {
0% {
      opacity: 0;
      -webkit-transform: translate(120px, 50px);
              transform: translate(120px, 50px);
}
100% {
      opacity: 1;
      -webkit-transform: translate(0, 0);
              transform: translate(0, 0);
}
}
@-webkit-keyframes aniToGn {
0% {
      opacity: 0;
      -webkit-transform: translate(120px, 50px);
              transform: translate(120px, 50px);
}
100% {
      opacity: 1;
      -webkit-transform: translate(0, 0);
              transform: translate(0, 0);
}
}
@keyframes aniToGn {
0% {
      opacity: 0;
      -webkit-transform: translate(120px, 50px);
              transform: translate(120px, 50px);
}
100% {
      opacity: 1;
      -webkit-transform: translate(0, 0);
              transform: translate(0, 0);
}
}
@-webkit-keyframes aniToCp {
0% {
      opacity: 0;
      -webkit-transform: translate(-120px, -50px);
              transform: translate(-120px, -50px);
}
100% {
      opacity: 1;
      -webkit-transform: translate(0, 0);
              transform: translate(0, 0);
}
}
@keyframes aniToCp {
0% {
      opacity: 0;
      -webkit-transform: translate(-120px, -50px);
              transform: translate(-120px, -50px);
}
100% {
      opacity: 1;
      -webkit-transform: translate(0, 0);
              transform: translate(0, 0);
}
}
@-webkit-keyframes aniToMd {
0% {
      opacity: 0;
      -webkit-transform: translate(-150px, -100px);
              transform: translate(-150px, -100px);
}
100% {
      opacity: 1;
      -webkit-transform: translate(0, 0);
              transform: translate(0, 0);
}
}
@keyframes aniToMd {
0% {
      opacity: 0;
      -webkit-transform: translate(-150px, -100px);
              transform: translate(-150px, -100px);
}
100% {
      opacity: 1;
      -webkit-transform: translate(0, 0);
              transform: translate(0, 0);
}
}
@-webkit-keyframes aniToZc {
0% {
      opacity: 0;
      -webkit-transform: translate(120px, 50px);
              transform: translate(120px, 50px);
}
100% {
      opacity: 1;
      -webkit-transform: translate(0, 0);
              transform: translate(0, 0);
}
}
@keyframes aniToZc {
0% {
      opacity: 0;
      -webkit-transform: translate(120px, 50px);
              transform: translate(120px, 50px);
}
100% {
      opacity: 1;
      -webkit-transform: translate(0, 0);
              transform: translate(0, 0);
}
}
@-webkit-keyframes aniTolx {
0% {
      opacity: 0;
      -webkit-transform: translate(-120px, 50px);
              transform: translate(-120px, 50px);
}
100% {
      opacity: 1;
      -webkit-transform: translate(0, 0);
              transform: translate(0, 0);
}
}
@keyframes aniTolx {
0% {
      opacity: 0;
      -webkit-transform: translate(-120px, 50px);
              transform: translate(-120px, 50px);
}
100% {
      opacity: 1;
      -webkit-transform: translate(0, 0);
              transform: translate(0, 0);
}
}
@-webkit-keyframes aniCloud {
0% {
      background-image: url("https://web-resource.17m3.com/m3guo/202307/version-7b39/cloud-0.webp");
}
4% {
      background-image: url("https://web-resource.17m3.com/m3guo/202307/version-7b39/cloud-1.webp");
}
9% {
      background-image: url("https://web-resource.17m3.com/m3guo/202307/version-7b39/cloud-2.webp");
}
13% {
      background-image: url("https://web-resource.17m3.com/m3guo/202307/version-7b39/cloud-3.webp");
}
18% {
      background-image: url("https://web-resource.17m3.com/m3guo/202307/version-7b39/cloud-4.webp");
}
22% {
      background-image: url("https://web-resource.17m3.com/m3guo/202307/version-7b39/cloud-5.webp");
}
27% {
      background-image: url("https://web-resource.17m3.com/m3guo/202307/version-7b39/cloud-6.webp");
}
31% {
      background-image: url("https://web-resource.17m3.com/m3guo/202307/version-7b39/cloud-7.webp");
}
36% {
      background-image: url("https://web-resource.17m3.com/m3guo/202307/version-7b39/cloud-8.webp");
}
40% {
      background-image: url("https://web-resource.17m3.com/m3guo/202307/version-7b39/cloud-9.webp");
}
45% {
      background-image: url("https://web-resource.17m3.com/m3guo/202307/version-7b39/cloud-10.webp");
}
50% {
      background-image: url("https://web-resource.17m3.com/m3guo/202307/version-7b39/cloud-11.webp");
}
54% {
      background-image: url("https://web-resource.17m3.com/m3guo/202307/version-7b39/cloud-12.webp");
}
59% {
      background-image: url("https://web-resource.17m3.com/m3guo/202307/version-7b39/cloud-13.webp");
}
63% {
      background-image: url("https://web-resource.17m3.com/m3guo/202307/version-7b39/cloud-14.webp");
}
68% {
      background-image: url("https://web-resource.17m3.com/m3guo/202307/version-7b39/cloud-15.webp");
}
72% {
      background-image: url("https://web-resource.17m3.com/m3guo/202307/version-7b39/cloud-16.webp");
}
77% {
      background-image: url("https://web-resource.17m3.com/m3guo/202307/version-7b39/cloud-17.webp");
}
81% {
      background-image: url("https://web-resource.17m3.com/m3guo/202307/version-7b39/cloud-18.webp");
}
86% {
      background-image: url("https://web-resource.17m3.com/m3guo/202307/version-7b39/cloud-19.webp");
}
91% {
      background-image: url("https://web-resource.17m3.com/m3guo/202307/version-7b39/cloud-20.webp");
}
95% {
      background-image: url("https://web-resource.17m3.com/m3guo/202307/version-7b39/cloud-21.webp");
}
100% {
      background-image: url("https://web-resource.17m3.com/m3guo/202307/version-7b39/cloud-22.webp");
}
}
@keyframes aniCloud {
0% {
      background-image: url("https://web-resource.17m3.com/m3guo/202307/version-7b39/cloud-0.webp");
}
4% {
      background-image: url("https://web-resource.17m3.com/m3guo/202307/version-7b39/cloud-1.webp");
}
9% {
      background-image: url("https://web-resource.17m3.com/m3guo/202307/version-7b39/cloud-2.webp");
}
13% {
      background-image: url("https://web-resource.17m3.com/m3guo/202307/version-7b39/cloud-3.webp");
}
18% {
      background-image: url("https://web-resource.17m3.com/m3guo/202307/version-7b39/cloud-4.webp");
}
22% {
      background-image: url("https://web-resource.17m3.com/m3guo/202307/version-7b39/cloud-5.webp");
}
27% {
      background-image: url("https://web-resource.17m3.com/m3guo/202307/version-7b39/cloud-6.webp");
}
31% {
      background-image: url("https://web-resource.17m3.com/m3guo/202307/version-7b39/cloud-7.webp");
}
36% {
      background-image: url("https://web-resource.17m3.com/m3guo/202307/version-7b39/cloud-8.webp");
}
40% {
      background-image: url("https://web-resource.17m3.com/m3guo/202307/version-7b39/cloud-9.webp");
}
45% {
      background-image: url("https://web-resource.17m3.com/m3guo/202307/version-7b39/cloud-10.webp");
}
50% {
      background-image: url("https://web-resource.17m3.com/m3guo/202307/version-7b39/cloud-11.webp");
}
54% {
      background-image: url("https://web-resource.17m3.com/m3guo/202307/version-7b39/cloud-12.webp");
}
59% {
      background-image: url("https://web-resource.17m3.com/m3guo/202307/version-7b39/cloud-13.webp");
}
63% {
      background-image: url("https://web-resource.17m3.com/m3guo/202307/version-7b39/cloud-14.webp");
}
68% {
      background-image: url("https://web-resource.17m3.com/m3guo/202307/version-7b39/cloud-15.webp");
}
72% {
      background-image: url("https://web-resource.17m3.com/m3guo/202307/version-7b39/cloud-16.webp");
}
77% {
      background-image: url("https://web-resource.17m3.com/m3guo/202307/version-7b39/cloud-17.webp");
}
81% {
      background-image: url("https://web-resource.17m3.com/m3guo/202307/version-7b39/cloud-18.webp");
}
86% {
      background-image: url("https://web-resource.17m3.com/m3guo/202307/version-7b39/cloud-19.webp");
}
91% {
      background-image: url("https://web-resource.17m3.com/m3guo/202307/version-7b39/cloud-20.webp");
}
95% {
      background-image: url("https://web-resource.17m3.com/m3guo/202307/version-7b39/cloud-21.webp");
}
100% {
      background-image: url("https://web-resource.17m3.com/m3guo/202307/version-7b39/cloud-22.webp");
}
}
}

.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;
}