/** mixins **/

/* MiSans */

@font-face {
  font-family: 'MiSans-regular';
  src: url('https://nie.res.netease.com/comm/js/leihuo/fonts/MiSans-Regular.woff2') format('woff2'), url('https://nie.res.netease.com/comm/js/leihuo/fonts/MiSans-Regular.woff') format('woff');
  font-weight: 330;
}

.sns-wrapper {
  position: relative;
  z-index: 10;
  font-family: 'MiSans-regular', sans-serif;
  background: #000;
  width: 100%;
  padding: 0.5rem 0 0.3rem;
}

.sns-wrapper .sns-bg {
  margin: 0 auto;
  width: 6.92rem;
  height: 0.58rem;
  background: url(https://one.res.netease.com/pc/zt/20250414102908/assets/sns-bg_d113772a.png);
  background-size: 100% 100%;
  padding: 0 0.3rem 0 0.3rem;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
}

.sns-wrapper .sns-bg a {
  position: relative;
}

.sns-wrapper .sns-bg a .qrcode {
  display: none;
  position: absolute;
  top: -0.28rem;
  left: 50%;
  -webkit-transform: translate(-50%, -100%);
  transform: translate(-50%, -100%);
  width: 1.56rem;
  height: 1.56rem;
}

.sns-wrapper .sns-bg a:hover::before {
  content: "";
  position: absolute;
  top: -0.18rem;
  left: 50%;
  -webkit-transform: translate(-50%, -100%);
  transform: translate(-50%, -100%);
  width: 1.76rem;
  height: 1.76rem;
  background: url(https://one.res.netease.com/pc/zt/20250414102908/assets/qr-bg_6bbd9fe9.png) no-repeat;
  background-size: 100% 100%;
}

.sns-wrapper .sns-bg a:hover::after {
  content: "";
  position: absolute;
  top: 0;
  left: calc(50% - 0.18rem);
  -webkit-transform: translate(-50%, -100%);
  transform: translate(-50%, -100%);
  height: 2.3rem;
  width: 2.78rem;
  opacity: 0;
  -webkit-transform-origin: 50% 50%;
  transform-origin: 50% 50%;
  -webkit-animation: z_texiao_000_anim 0.7s linear, sprite_z_texiao_000 0.7s 0.05s steps(1) normal;
  animation: z_texiao_000_anim 0.7s linear, sprite_z_texiao_000 0.7s 0.05s steps(1) normal;
  background: url(https://one.res.netease.com/pc/zt/20250414102908/assets/sprite_z_texiao_000_36862aa9.png) no-repeat;
  background-size: 19.46rem 13.8rem;
}

.sns-wrapper .sns-bg a:hover .qrcode {
  display: block;
}

.sns-wrapper .follow-us {
  color: #fff;
  font-size: 0.18rem;
}

.sns-wrapper .icon-qq {
  background: url(https://one.res.netease.com/pc/zt/20250414102908/assets/sprite-8148b0_8148b02f.png);
  background-size: 2.05rem 1.61rem;
  background-position: -0 -0;
  width: 0.38rem;
  height: 0.38rem;
}

.sns-wrapper .icon-qq .qrcode {
  background: url(https://one.res.netease.com/pc/zt/20250414102908/assets/qq-qrcode_b76d3007.png) no-repeat;
  background-size: 100% 100%;
}

.sns-wrapper .icon-qq:hover {
  background: url(https://one.res.netease.com/pc/zt/20250414102908/assets/sprite-8148b0_8148b02f.png);
  background-size: 2.05rem 1.61rem;
  background-position: -0.42rem -0;
  width: 0.38rem;
  height: 0.38rem;
}

.sns-wrapper .icon-wx {
  background: url(https://one.res.netease.com/pc/zt/20250414102908/assets/sprite-8148b0_8148b02f.png);
  background-size: 2.05rem 1.61rem;
  background-position: -0 -0.42rem;
  width: 0.38rem;
  height: 0.38rem;
}

.sns-wrapper .icon-wx .qrcode {
  background: url(https://one.res.netease.com/pc/zt/20250414102908/assets/wx-qrcode_01400b62.png) no-repeat;
  background-size: 100% 100%;
}

.sns-wrapper .icon-wx:hover {
  background: url(https://one.res.netease.com/pc/zt/20250414102908/assets/sprite-8148b0_8148b02f.png);
  background-size: 2.05rem 1.61rem;
  background-position: -0.42rem -0.42rem;
  width: 0.38rem;
  height: 0.38rem;
}

.sns-wrapper .icon-wb {
  background: url(https://one.res.netease.com/pc/zt/20250414102908/assets/sprite-8148b0_8148b02f.png);
  background-size: 2.05rem 1.61rem;
  background-position: -0.84rem -0;
  width: 0.38rem;
  height: 0.38rem;
}

.sns-wrapper .icon-wb .qrcode {
  background: url(https://one.res.netease.com/pc/zt/20250414102908/assets/wb-qrcode_9d6f074b.png) no-repeat;
  background-size: 100% 100%;
}

.sns-wrapper .icon-wb:hover {
  background: url(https://one.res.netease.com/pc/zt/20250414102908/assets/sprite-8148b0_8148b02f.png);
  background-size: 2.05rem 1.61rem;
  background-position: -0.84rem -0.42rem;
  width: 0.38rem;
  height: 0.38rem;
}

.sns-wrapper .icon-blbl {
  background: url(https://one.res.netease.com/pc/zt/20250414102908/assets/sprite-8148b0_8148b02f.png);
  background-size: 2.05rem 1.61rem;
  background-position: -0 -0.84rem;
  width: 0.38rem;
  height: 0.38rem;
}

.sns-wrapper .icon-blbl .qrcode {
  background: url(https://one.res.netease.com/pc/zt/20250414102908/assets/blbl-qrcode_87eccdf0.png) no-repeat;
  background-size: 100% 100%;
}

.sns-wrapper .icon-blbl:hover {
  background: url(https://one.res.netease.com/pc/zt/20250414102908/assets/sprite-8148b0_8148b02f.png);
  background-size: 2.05rem 1.61rem;
  background-position: -0.42rem -0.84rem;
  width: 0.38rem;
  height: 0.38rem;
}

.sns-wrapper .icon-dy {
  background: url(https://one.res.netease.com/pc/zt/20250414102908/assets/sprite-8148b0_8148b02f.png);
  background-size: 2.05rem 1.61rem;
  background-position: -0.84rem -0.84rem;
  width: 0.38rem;
  height: 0.38rem;
}

.sns-wrapper .icon-dy .qrcode {
  background: url(https://one.res.netease.com/pc/zt/20250414102908/assets/dy-qrcode_8b556714.png) no-repeat;
  background-size: 100% 100%;
}

.sns-wrapper .icon-dy:hover {
  background: url(https://one.res.netease.com/pc/zt/20250414102908/assets/sprite-8148b0_8148b02f.png);
  background-size: 2.05rem 1.61rem;
  background-position: -1.26rem -0;
  width: 0.38rem;
  height: 0.38rem;
}

.sns-wrapper .icon-xhs {
  background: url(https://one.res.netease.com/pc/zt/20250414102908/assets/sprite-8148b0_8148b02f.png);
  background-size: 2.05rem 1.61rem;
  background-position: -1.68rem -0.74rem;
  width: 0.31rem;
  height: 0.31rem;
}

.sns-wrapper .icon-xhs .qrcode {
  background: url(https://one.res.netease.com/pc/zt/20250414102908/assets/xhs-qrcode_82dd3c17.png) no-repeat;
  background-size: 100% 100%;
}

.sns-wrapper .icon-xhs:hover {
  background: url(https://one.res.netease.com/pc/zt/20250414102908/assets/sprite-8148b0_8148b02f.png);
  background-size: 2.05rem 1.61rem;
  background-position: -1.68rem -1.09rem;
  width: 0.31rem;
  height: 0.31rem;
}

.sns-wrapper .icon-ds {
  background: url(https://one.res.netease.com/pc/zt/20250414102908/assets/sprite-8148b0_8148b02f.png);
  background-size: 2.05rem 1.61rem;
  background-position: -1.26rem -0.42rem;
  width: 0.38rem;
  height: 0.38rem;
}

.sns-wrapper .icon-ds .qrcode {
  background: url(https://one.res.netease.com/pc/zt/20250414102908/assets/ds-qrcode_057e364f.png) no-repeat;
  background-size: 100% 100%;
}

.sns-wrapper .icon-ds:hover {
  background: url(https://one.res.netease.com/pc/zt/20250414102908/assets/sprite-8148b0_8148b02f.png);
  background-size: 2.05rem 1.61rem;
  background-position: -1.26rem -0.84rem;
  width: 0.38rem;
  height: 0.38rem;
}

.sns-wrapper .icon-qw {
  background: url(https://one.res.netease.com/pc/zt/20250414102908/assets/sprite-8148b0_8148b02f.png);
  background-size: 2.05rem 1.61rem;
  background-position: -0 -1.26rem;
  width: 0.38rem;
  height: 0.31rem;
}

.sns-wrapper .icon-qw .qrcode {
  background: url(https://one.res.netease.com/pc/zt/20250414102908/assets/qw-qrcode_89818f1a.jpg) no-repeat;
  background-size: 100% 100%;
}

.sns-wrapper .icon-qw:hover {
  background: url(https://one.res.netease.com/pc/zt/20250414102908/assets/sprite-8148b0_8148b02f.png);
  background-size: 2.05rem 1.61rem;
  background-position: -0.42rem -1.26rem;
  width: 0.38rem;
  height: 0.31rem;
}

.sns-wrapper .icon-steam {
  background: url(https://one.res.netease.com/pc/zt/20250414102908/assets/sprite-8148b0_8148b02f.png);
  background-size: 2.05rem 1.61rem;
  background-position: -1.68rem -0;
  width: 0.33rem;
  height: 0.33rem;
}

.sns-wrapper .icon-steam::before {
  display: none !important;
}

.sns-wrapper .icon-steam::after {
  display: none !important;
}

.sns-wrapper .icon-steam:hover {
  background: url(https://one.res.netease.com/pc/zt/20250414102908/assets/sprite-8148b0_8148b02f.png);
  background-size: 2.05rem 1.61rem;
  background-position: -1.68rem -0.37rem;
  width: 0.33rem;
  height: 0.33rem;
}

@-webkit-keyframes z_texiao_000_anim {
  0% {
    opacity: 0;
  }

  4% {
    opacity: 1;
  }

  100% {
    opacity: 1;
  }
}

@keyframes z_texiao_000_anim {
  0% {
    opacity: 0;
  }

  4% {
    opacity: 1;
  }

  100% {
    opacity: 1;
  }
}

@-webkit-keyframes sprite_z_texiao_000 {
  0% {
    background-position: 0 0;
  }

  2.4% {
    background-position: -2.78rem 0;
  }

  4.8% {
    background-position: -5.56rem 0;
  }

  7.1% {
    background-position: -8.34rem 0;
  }

  9.5% {
    background-position: -11.12rem 0;
  }

  11.9% {
    background-position: -13.9rem 0;
  }

  14.3% {
    background-position: -16.68rem 0;
  }

  16.7% {
    background-position: 0 -2.3rem;
  }

  19% {
    background-position: -2.78rem -2.3rem;
  }

  21.4% {
    background-position: -5.56rem -2.3rem;
  }

  23.8% {
    background-position: -8.34rem -2.3rem;
  }

  26.2% {
    background-position: -11.12rem -2.3rem;
  }

  28.6% {
    background-position: -13.9rem -2.3rem;
  }

  31% {
    background-position: -16.68rem -2.3rem;
  }

  33.3% {
    background-position: 0 -4.6rem;
  }

  35.7% {
    background-position: -2.78rem -4.6rem;
  }

  38.1% {
    background-position: -5.56rem -4.6rem;
  }

  40.5% {
    background-position: -8.34rem -4.6rem;
  }

  42.9% {
    background-position: -11.12rem -4.6rem;
  }

  45.2% {
    background-position: -13.9rem -4.6rem;
  }

  47.6% {
    background-position: -16.68rem -4.6rem;
  }

  50% {
    background-position: 0 -6.9rem;
  }

  52.4% {
    background-position: -2.78rem -6.9rem;
  }

  54.8% {
    background-position: -5.56rem -6.9rem;
  }

  57.1% {
    background-position: -8.34rem -6.9rem;
  }

  59.5% {
    background-position: -11.12rem -6.9rem;
  }

  61.9% {
    background-position: -13.9rem -6.9rem;
  }

  64.3% {
    background-position: -16.68rem -6.9rem;
  }

  66.7% {
    background-position: 0 -9.2rem;
  }

  69% {
    background-position: -2.78rem -9.2rem;
  }

  71.4% {
    background-position: -5.56rem -9.2rem;
  }

  73.8% {
    background-position: -8.34rem -9.2rem;
  }

  76.2% {
    background-position: -11.12rem -9.2rem;
  }

  78.6% {
    background-position: -13.9rem -9.2rem;
  }

  81% {
    background-position: -16.68rem -9.2rem;
  }

  83.3% {
    background-position: 0 -11.5rem;
  }

  85.7% {
    background-position: -2.78rem -11.5rem;
  }

  88.1% {
    background-position: -5.56rem -11.5rem;
  }

  90.5% {
    background-position: -8.34rem -11.5rem;
  }

  92.9% {
    background-position: -11.12rem -11.5rem;
  }

  95.2% {
    background-position: -13.9rem -11.5rem;
  }

  97.6% {
    background-position: -16.68rem -11.5rem;
  }

  100% {
    background-position: -16.68rem -11.5rem;
  }
}

@keyframes sprite_z_texiao_000 {
  0% {
    background-position: 0 0;
  }

  2.4% {
    background-position: -2.78rem 0;
  }

  4.8% {
    background-position: -5.56rem 0;
  }

  7.1% {
    background-position: -8.34rem 0;
  }

  9.5% {
    background-position: -11.12rem 0;
  }

  11.9% {
    background-position: -13.9rem 0;
  }

  14.3% {
    background-position: -16.68rem 0;
  }

  16.7% {
    background-position: 0 -2.3rem;
  }

  19% {
    background-position: -2.78rem -2.3rem;
  }

  21.4% {
    background-position: -5.56rem -2.3rem;
  }

  23.8% {
    background-position: -8.34rem -2.3rem;
  }

  26.2% {
    background-position: -11.12rem -2.3rem;
  }

  28.6% {
    background-position: -13.9rem -2.3rem;
  }

  31% {
    background-position: -16.68rem -2.3rem;
  }

  33.3% {
    background-position: 0 -4.6rem;
  }

  35.7% {
    background-position: -2.78rem -4.6rem;
  }

  38.1% {
    background-position: -5.56rem -4.6rem;
  }

  40.5% {
    background-position: -8.34rem -4.6rem;
  }

  42.9% {
    background-position: -11.12rem -4.6rem;
  }

  45.2% {
    background-position: -13.9rem -4.6rem;
  }

  47.6% {
    background-position: -16.68rem -4.6rem;
  }

  50% {
    background-position: 0 -6.9rem;
  }

  52.4% {
    background-position: -2.78rem -6.9rem;
  }

  54.8% {
    background-position: -5.56rem -6.9rem;
  }

  57.1% {
    background-position: -8.34rem -6.9rem;
  }

  59.5% {
    background-position: -11.12rem -6.9rem;
  }

  61.9% {
    background-position: -13.9rem -6.9rem;
  }

  64.3% {
    background-position: -16.68rem -6.9rem;
  }

  66.7% {
    background-position: 0 -9.2rem;
  }

  69% {
    background-position: -2.78rem -9.2rem;
  }

  71.4% {
    background-position: -5.56rem -9.2rem;
  }

  73.8% {
    background-position: -8.34rem -9.2rem;
  }

  76.2% {
    background-position: -11.12rem -9.2rem;
  }

  78.6% {
    background-position: -13.9rem -9.2rem;
  }

  81% {
    background-position: -16.68rem -9.2rem;
  }

  83.3% {
    background-position: 0 -11.5rem;
  }

  85.7% {
    background-position: -2.78rem -11.5rem;
  }

  88.1% {
    background-position: -5.56rem -11.5rem;
  }

  90.5% {
    background-position: -8.34rem -11.5rem;
  }

  92.9% {
    background-position: -11.12rem -11.5rem;
  }

  95.2% {
    background-position: -13.9rem -11.5rem;
  }

  97.6% {
    background-position: -16.68rem -11.5rem;
  }

  100% {
    background-position: -16.68rem -11.5rem;
  }
}