@charset "UTF-8";
.ceil-block .left .circle, .fastdown, .tools-content .title {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -o-box;
  display: box;
  -webkit-box-orient: horizontal;
  -moz-box-orient: horizontal;
  display: flex;
  display: -webkit-flex;
  flex-direction: row;
  -webkit-box-pack: center;
  -moz-box-pack: center;
  -ms-flex-pack: center;
  -o-box-pack: center;
  box-pack: center;
  -webkit-box-align: center;
  -moz-box-align: center;
  -ms-flex-align: center;
  -o-box-align: center;
  box-align: center;
  align-items: center;
  justify-content: center;
  -webkit-align-items: center;
  -webkit-justify-content: center; }

.pop, .mask, .mobile-wrap .phone {
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%); }

.top-banner .pop-banner, .top-banner .logo, .pack-content button, .pack-content p {
  -webkit-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  -o-transform: translateX(-50%);
  transform: translateX(-50%); }

html {
  font-size: 62.5%; }

@media only screen and (min-width: 320px) {
  html {
    font-size: 75% !important;
    /* 12÷16=73.4% */ } }
@media only screen and (min-width: 360px) {
  html {
    font-size: 84.375% !important;
    /* 12÷16=73.4% */ } }
@media only screen and (min-width: 375px) {
  html {
    font-size: 87.890625% !important;
    /* 14.0625÷16=73.2% */ } }
@media only screen and (min-width: 410px) {
  html {
    font-size: 97.03% !important;
    /* 15.525÷16=94% */ } }
@media only screen and (min-width: 480px) {
  html {
    font-size: 112.5% !important;
    /* 18÷16=94% */ } }
@media only screen and (min-width: 560px) {
  html {
    font-size: 131.25% !important;
    /* 21÷16=109% */ } }
@media only screen and (min-width: 640px) {
  html {
    font-size: 150% !important;
    /* 24÷16=125% */ } }
@media only screen and (min-width: 720px) {
  html {
    font-size: 168.75% !important;
    /* 27÷16=146.43% */ } }
@media only screen and (min-width: 750px) {
  html {
    font-size: 131.25% !important;
    /* 28.125÷16=146.43% */ } }
@media only screen and (min-width: 800px) {
  html {
    font-size: 131.25% !important;
    /* 30÷16=187.5% */ } }
@media only screen and (min-width: 960px) {
  html {
    font-size: 131.25% !important;
    /* 36÷16=225% */ } }
@media only screen and (min-width: 1080px) {
  html {
    font-size: 131.25% !important;
    /* 40.5÷16=253.125% */ } }
@media only screen and (orientation: landscape) {
  html {
    font-size: 87.890625% !important;
    /* 14.0625÷16=73.2% */ } }
* {
  padding: 0;
  margin: 0;
  outline: none;
  border: 0;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  background-repeat: no-repeat; }

body, html {
  height: 100vh;
  width: 100vw;
  position: relative;
  overflow-y: scroll;
  background: #fff; }
  body .wrap, html .wrap {
    height: auto;
    width: 100%;
    position: relative;
    background-size: 100% auto; }

footer {
  height: auto;
  width: 100%;
  position: relative;
  background-color: rgba(0, 0, 0, 0.8);
  padding: 1.4933333333rem; }
  footer p {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -o-box;
    display: box;
    -webkit-box-orient: horizontal;
    -moz-box-orient: horizontal;
    display: flex;
    display: -webkit-flex;
    flex-direction: row;
    align-items: center;
    -webkit-align-items: center;
    color: #777;
    font-size: 0.7822222222rem;
    font-weight: normal;
    margin-bottom: 0.4977777778rem; }
    footer p a {
      text-decoration: none;
      color: #C29D00;
      white-space: nowrap; }
    footer p span {
      color: #BDBDBD; }
  footer .logo {
    height: 1.6355555556rem;
    width: 7.8933333333rem;
    background-image: url("../image/xiangwan/logo-white.png");
    background-size: 100% 100%;
    margin: 0 auto;
    margin-bottom: 1.1733333333rem; }

.game-info {
  height: auto;
  width: 100%;
  position: relative;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -o-box;
  display: box;
  -webkit-box-orient: horizontal;
  -moz-box-orient: horizontal;
  display: flex;
  display: -webkit-flex;
  flex-direction: row;
  align-items: center;
  -webkit-align-items: center;
  margin-bottom: 1.1733333333rem;
  padding-top: 1.1733333333rem; }
  .game-info .article {
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    -ms-flex: 1;
    -o-box-flex: 1;
    box-flex: 1;
    flex: 1;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -o-box;
    display: box;
    -webkit-box-orient: vertical;
    -moz-box-orient: vertical;
    display: flex;
    display: -webkit-flex;
    flex-direction: column;
    justify-content: center; }
    .game-info .article .tips {
      color: #C29D00;
      font-size: 0.8888888889rem;
      font-weight: normal;
      margin-top: 0.2844444444rem; }
    .game-info .article .name {
      color: #222222;
      font-size: 1.3866666667rem;
      font-weight: bold; }
  .game-info .logo {
    height: 3.9466666667rem;
    width: 3.9466666667rem;
    background-size: 3.9466666667rem;
    margin-right: 0.7466666667rem;
    background-image: url("../image/xiangwan/logo.png"); }

.bar {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -o-box;
  display: box;
  -webkit-box-orient: horizontal;
  -moz-box-orient: horizontal;
  display: flex;
  display: -webkit-flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  margin-bottom: 1.5rem;
  margin-top: 2rem; }
  .bar .l, .bar .r {
    height: 1px;
    width: 3.2711111111rem;
    background-color: #C29D00; }
  .bar span {
    font-size: 0.9955555556rem;
    margin: 0 1.4933333333rem; }

.block {
  height: auto;
  width: 100%;
  position: relative;
  margin-bottom: 1rem; }
  .block img {
    width: 100%;
    height: auto; }
  .block p {
    color: #333;
    font-size: 0.9955555556rem;
    font-weight: normal;
    margin-bottom: 1rem; }

.ceil-block {
  height: auto;
  width: 100%;
  position: relative; }
  .ceil-block .ceil {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -o-box;
    display: box;
    -webkit-box-orient: horizontal;
    -moz-box-orient: horizontal;
    display: flex;
    display: -webkit-flex;
    flex-direction: row;
    height: auto;
    width: 100%;
    position: relative; }
  .ceil-block .right {
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    -ms-flex: 1;
    -o-box-flex: 1;
    box-flex: 1;
    flex: 1; }
    .ceil-block .right img {
      height: auto;
      width: 100%;
      margin-top: 0.4977777778rem;
      margin-bottom: 1.1733333333rem; }
    .ceil-block .right p {
      color: #222222;
      font-size: 1.1022222222rem;
      font-weight: normal; }
  .ceil-block .left {
    position: relative;
    height: auto;
    width: 1.3866666667rem;
    margin-right: 0.3911111111rem;
    min-width: 1.3866666667rem;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -o-box;
    display: box;
    -webkit-box-orient: vertical;
    -moz-box-orient: vertical;
    display: flex;
    display: -webkit-flex;
    flex-direction: column;
    align-items: center; }
    .ceil-block .left .line {
      height: 100%;
      width: auto;
      -webkit-box-flex: 1;
      -moz-box-flex: 1;
      -ms-flex: 1;
      -o-box-flex: 1;
      box-flex: 1;
      flex: 1;
      border-right: 1px dashed rgba(255, 207, 0, 0.3); }
    .ceil-block .left .circle {
      height: 1.3866666667rem;
      width: 1.3866666667rem;
      background-color: #FFCF00;
      border-radius: 0.7111111111rem;
      color: #fff;
      font-size: 0.9955555556rem;
      font-weight: normal; }

.pop {
  height: auto;
  width: 24.6755555556rem;
  background-color: white;
  border-radius: 0.9955555556rem;
  position: relative;
  padding: 0.9955555556rem;
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 200;
  background-image: url("../image/xiangwan/pop-top.png?343534");
  background-size: 100% auto;
  background-position: center top; }

.mask {
  height: 100vh;
  width: 100%;
  position: fixed;
  top: 50%;
  left: 50%;
  background-color: rgba(0, 0, 0, 0.64);
  z-index: 100; }

.mobile-wrap {
  height: auto;
  width: 100%;
  position: relative;
  margin-top: 3.5555555556rem; }
  .mobile-wrap .phone {
    height: 24.8888888889rem;
    width: 11.84rem;
    background-image: url("../image/xiangwan/mobile.png?345346");
    background-size: 100% 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 2; }
    .mobile-wrap .phone .pop-mobile:nth-child(1) {
      position: absolute;
      top: 2.7733333333rem;
      right: 7.3244444444rem; }
    .mobile-wrap .phone .pop-mobile:nth-child(2) {
      position: absolute;
      top: 7.7866666667rem;
      left: 8.8888888889rem; }
    .mobile-wrap .phone .pop-mobile:nth-child(3) {
      position: absolute;
      top: 14.72rem;
      right: 8.3555555556rem; }
    .mobile-wrap .phone .pop-mobile:nth-child(4) {
      position: absolute;
      bottom: 1.4933333333rem;
      left: 7.6444444444rem; }
    .mobile-wrap .phone .pop-mobile {
      height: auto;
      width: 9.92rem;
      background-color: white;
      border-radius: 0.9955555556rem;
      box-shadow: 0px 0.2488888889rem 0.7466666667rem 0px rgba(216, 216, 216, 0.5);
      padding: 0.8888888889rem; }
      .mobile-wrap .phone .pop-mobile section {
        color: #777;
        font-size: 0.7822222222rem;
        font-weight: normal;
        margin-top: 0.2488888889rem; }
      .mobile-wrap .phone .pop-mobile p {
        color: #000;
        font-size: 0.9955555556rem;
        font-weight: normal;
        margin-top: 0.4977777778rem; }
      .mobile-wrap .phone .pop-mobile span {
        height: 0.2488888889rem;
        width: 0.8888888889rem;
        border-radius: 0.1066666667rem;
        background-color: #FFCF00;
        display: block; }
  .mobile-wrap img {
    width: 100%;
    position: relative;
    z-index: 0; }

.fuli-bar {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -o-box;
  display: box;
  -webkit-box-orient: horizontal;
  -moz-box-orient: horizontal;
  display: flex;
  display: -webkit-flex;
  flex-direction: row;
  align-items: center;
  -webkit-align-items: center;
  margin-top: 1.4222222222rem; }
  .fuli-bar .item {
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    -ms-flex: 1;
    -o-box-flex: 1;
    box-flex: 1;
    flex: 1;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -o-box;
    display: box;
    -webkit-box-orient: vertical;
    -moz-box-orient: vertical;
    display: flex;
    display: -webkit-flex;
    flex-direction: column;
    align-items: center; }
    .fuli-bar .item section {
      color: #999;
      font-size: 0.7822222222rem;
      font-weight: normal; }
    .fuli-bar .item p {
      color: #333;
      font-size: 0.7822222222rem;
      font-weight: normal; }
    .fuli-bar .item img {
      height: 2.1333333333rem;
      width: 2.1333333333rem; }

.fuli-content {
  height: auto;
  width: 100%;
  position: relative;
  margin-top: 2.8444444444rem; }
  .fuli-content .title {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -o-box;
    display: box;
    -webkit-box-orient: horizontal;
    -moz-box-orient: horizontal;
    display: flex;
    display: -webkit-flex;
    flex-direction: row;
    align-items: center;
    -webkit-align-items: center;
    text-align: center;
    color: #333333;
    font-size: 1.6355555556rem;
    font-weight: normal;
    justify-content: center;
    width: 100%; }
    .fuli-content .title span {
      background-image: url("../image/xiangwan/bar.png");
      background-size: 7.0044444444rem 1.4933333333rem;
      background-position: center;
      margin-right: 0.5688888889rem;
      font-size: 1.6355555556rem;
      font-weight: bold; }

.fastdown {
  height: 3.2rem;
  width: 14.8266666667rem;
  background-color: #FFCF00;
  font-size: 1.3511111111rem;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -o-box;
  display: box;
  -webkit-box-orient: vertical;
  -moz-box-orient: vertical;
  display: flex;
  display: -webkit-flex;
  flex-direction: column;
  margin: 0.6755555556rem auto;
  color: #000;
  border-radius: 1.6rem; }

.top-banner {
  height: auto;
  width: 100%;
  position: relative;
  z-index: 0; }
  .top-banner .pop-banner {
    height: 15.7511111111rem;
    width: 25.3866666667rem;
    background-image: url("../image/xiangwan/pop.png");
    background-size: 100%;
    position: absolute;
    top: 4.48rem;
    left: 50%; }
  .top-banner .logo {
    height: 2.0266666667rem;
    width: 9.8844444444rem;
    background-image: url("../image/xiangwan/logo-black.png");
    background-size: 100%;
    position: absolute;
    top: 2.4533333333rem;
    left: 50%; }
  .top-banner img {
    height: auto;
    width: 100%;
    position: relative;
    z-index: 1;
    margin-top: -3.1288888889rem; }

.download {
  height: 4.9422222222rem;
  width: 100%;
  background-color: white;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 50;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -o-box;
  display: box;
  -webkit-box-orient: horizontal;
  -moz-box-orient: horizontal;
  display: flex;
  display: -webkit-flex;
  flex-direction: row;
  align-items: center;
  -webkit-align-items: center;
  padding: 0 0.9955555556rem;
  border-bottom: 1px solid #ececec; }
  .download .article {
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    -ms-flex: 1;
    -o-box-flex: 1;
    box-flex: 1;
    flex: 1; }
    .download .article .tips {
      color: #888;
      font-size: 0.7822222222rem;
      font-weight: normal; }
      .download .article .tips a {
        text-decoration: none;
        color: #C29D00; }
  .download button {
    height: 2.1333333333rem;
    width: 4.9422222222rem;
    border-radius: 1.5644444444rem;
    color: #333;
    font-size: 0.9955555556rem;
    font-weight: normal;
    background-color: #FFCF00; }
  .download .name {
    color: #333;
    font-size: 1.1733333333rem;
    font-weight: normal;
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    -ms-flex: 1;
    -o-box-flex: 1;
    box-flex: 1;
    flex: 1; }
  .download .logo {
    height: 3.9466666667rem;
    width: 3.9466666667rem;
    background-image: url("../image/xiangwan/logo.png");
    margin-right: 0.4977777778rem;
    background-size: 100% 100%; }

.tools-content {
  height: 10.5244444444rem;
  width: 25.1733333333rem;
  border-radius: 1.1733333333rem;
  background: linear-gradient(180deg, #FFFFFF 0%, #FFF8E4 100%);
  border: 1px solid #fff;
  margin: 1rem auto; }
  .tools-content .fuli-bar {
    margin-top: 1.4933333333rem; }
  .tools-content .title {
    height: 2.3111111111rem;
    width: 13.3333333333rem;
    pointer-events: revert;
    background-image: url("../image/xiangwan/tag.png");
    background-size: 100%;
    color: #6E0A0A;
    font-size: 1.1733333333rem;
    font-weight: normal;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -o-box;
    display: box;
    -webkit-box-orient: horizontal;
    -moz-box-orient: horizontal;
    display: flex;
    display: -webkit-flex;
    flex-direction: row;
    align-items: center;
    -webkit-align-items: center;
    margin: 0 auto;
    margin-top: -1px; }

.pack-content {
  height: auto;
  width: 25.1733333333rem;
  position: relative;
  margin: 0 auto; }
  .pack-content button {
    height: 4.3377777778rem;
    width: 21.44rem;
    background-image: url("../image/xiangwan/button.png");
    background-size: 100%;
    position: absolute;
    bottom: 1.5644444444rem;
    left: 50%;
    z-index: 2;
    background-color: transparent; }
    .pack-content button span {
      height: 1.9911111111rem;
      width: 5.6888888889rem;
      background-image: url("../image/xiangwan/is-new.png");
      background-size: 100%;
      position: absolute;
      top: -0.9244444444rem;
      right: -0.6755555556rem; }
  .pack-content p {
    white-space: nowrap;
    color: #000000;
    font-size: 0.9955555556rem;
    font-weight: normal;
    position: absolute;
    top: 0.7822222222rem;
    left: 50%;
    z-index: 2; }
  .pack-content img {
    display: block;
    width: 100%;
    position: relative;
    z-index: 0; }

.banner-top {
  height: auto;
  width: 100%;
  position: relative; }
  .banner-top .user-card {
    height: 3.3422222222rem;
    width: 13.44rem;
    background-image: url("../image/xiangwan/user-card.png");
    background-size: 100% 100%;
    padding: 0.2488888889rem;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -o-box;
    display: box;
    -webkit-box-orient: horizontal;
    -moz-box-orient: horizontal;
    display: flex;
    display: -webkit-flex;
    flex-direction: row;
    align-items: center;
    position: absolute;
    bottom: 1.5644444444rem;
    left: 0.8888888889rem; }
    .banner-top .user-card .article {
      display: -webkit-box;
      display: -moz-box;
      display: -ms-flexbox;
      display: -o-box;
      display: box;
      -webkit-box-orient: vertical;
      -moz-box-orient: vertical;
      display: flex;
      display: -webkit-flex;
      flex-direction: column;
      justify-content: space-between; }
      .banner-top .user-card .article .tips {
        color: #D8812F;
        font-size: 0.9955555556rem;
        font-weight: normal; }
        .banner-top .user-card .article .tips span {
          color: #FD3A3A;
          font-size: 1.1733333333rem;
          font-weight: bold;
          margin-top: 0.1777777778rem; }
      .banner-top .user-card .article .name {
        color: #D8812F;
        font-size: 0.9955555556rem;
        font-weight: normal; }
    .banner-top .user-card .user-icon {
      height: 2.9511111111rem;
      width: 2.9511111111rem;
      background-image: url("../image/xiangwan/user-icon.png");
      margin-right: 0.3555555556rem;
      background-size: 100%; }
  .banner-top img {
    display: block;
    width: 100%;
    position: relative;
    z-index: 0;
    margin-top: -3rem; }

/*# sourceMappingURL=xiangwan.css.map */