/** 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;
  font-family: 'MiSans-regular', sans-serif;
  background: #000;
  width: 100%;
  padding: 0.8rem 0 0.2rem;
}

.sns-wrapper .sns-bg {
  padding: 0 0.5rem;
  position: relative;
  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 .icon-qq {
  background: url(https://one.res.netease.com/pc/zt/20250414102908/assets/sprite-924965_9249656d.png);
  background-size: 2.25rem 1.52rem;
  background-position: -1.83rem -0;
  width: 0.38rem;
  height: 0.44rem;
}

.sns-wrapper .icon-wx {
  background: url(https://one.res.netease.com/pc/zt/20250414102908/assets/sprite-924965_9249656d.png);
  background-size: 2.25rem 1.52rem;
  background-position: -0.5rem -0.56rem;
  width: 0.5rem;
  height: 0.42rem;
}

.sns-wrapper .icon-wb {
  background: url(https://one.res.netease.com/pc/zt/20250414102908/assets/sprite-924965_9249656d.png);
  background-size: 2.25rem 1.52rem;
  background-position: -1.29rem -0;
  width: 0.5rem;
  height: 0.42rem;
}

.sns-wrapper .icon-blbl {
  background: url(https://one.res.netease.com/pc/zt/20250414102908/assets/sprite-924965_9249656d.png);
  background-size: 2.25rem 1.52rem;
  background-position: -0 -1.06rem;
  width: 0.44rem;
  height: 0.42rem;
}

.sns-wrapper .icon-dy {
  background: url(https://one.res.netease.com/pc/zt/20250414102908/assets/sprite-924965_9249656d.png);
  background-size: 2.25rem 1.52rem;
  background-position: -1.83rem -0.48rem;
  width: 0.36rem;
  height: 0.42rem;
}

.sns-wrapper .icon-xhs {
  background: url(https://one.res.netease.com/pc/zt/20250414102908/assets/sprite-924965_9249656d.png);
  background-size: 2.25rem 1.52rem;
  background-position: -1.29rem -0.46rem;
  width: 0.44rem;
  height: 0.44rem;
}

.sns-wrapper .icon-ds {
  background: url(https://one.res.netease.com/pc/zt/20250414102908/assets/sprite-924965_9249656d.png);
  background-size: 2.25rem 1.52rem;
  background-position: -0.48rem -1.06rem;
  width: 0.54rem;
  height: 0.32rem;
}

.sns-wrapper .icon-qw {
  background: url(https://one.res.netease.com/pc/zt/20250414102908/assets/sprite-924965_9249656d.png);
  background-size: 2.25rem 1.52rem;
  background-position: -0.72rem -0;
  width: 0.53rem;
  height: 0.44rem;
}

.sns-wrapper .icon-steam {
  background: url(https://one.res.netease.com/pc/zt/20250414102908/assets/sprite-924965_9249656d.png);
  background-size: 2.25rem 1.52rem;
  background-position: -0 -0.56rem;
  width: 0.46rem;
  height: 0.46rem;
}

.sns-pop-mask {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 999;
  background: rgba(0, 0, 0, 0.8);
}

.sns-pop-mask.active {
  display: block;
}

.sns-pop-mask .wx-pop,
.sns-pop-mask .qw-pop {
  font-family: 'MiSans-regular', sans-serif;
  display: none;
  font-size: 0.3rem;
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  width: 5.14rem;
  height: 5.4rem;
  background: url(https://one.res.netease.com/pc/zt/20250414102908/assets/pop-bg_8ebf62de.png);
  background-size: 100% 100%;
}

.sns-pop-mask .wx-pop.active,
.sns-pop-mask .qw-pop.active {
  display: block;
}

.sns-pop-mask .wx-pop .pop-title,
.sns-pop-mask .qw-pop .pop-title {
  position: absolute;
  top: 0.42rem;
  left: 50%;
  -webkit-transform: translate(-50%);
  transform: translate(-50%);
  font-weight: bold;
  height: 0.72rem;
  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: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  color: #ceffe0;
}

.sns-pop-mask .wx-pop .btn-close,
.sns-pop-mask .qw-pop .btn-close {
  z-index: 1;
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  background: url(https://one.res.netease.com/pc/zt/20250414102908/assets/sprite-924965_9249656d.png);
  background-size: 2.25rem 1.52rem;
  background-position: -0 -0;
  width: 0.68rem;
  height: 0.52rem;
}

.sns-pop-mask .wx-pop .qrcode,
.sns-pop-mask .qw-pop .qrcode {
  position: absolute;
  top: calc(50% + 0.34rem);
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  width: 2.62rem;
  height: 2.62rem;
  background: url(https://one.res.netease.com/pc/zt/20250414102908/assets/wx-qrcode_c73fb71c.png);
  background-size: 100% 100%;
}

.sns-pop-mask .wx-pop .qrcode .qrcode-bg,
.sns-pop-mask .qw-pop .qrcode .qrcode-bg {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  width: 2.66rem;
  height: 2.66rem;
  background: url(https://one.res.netease.com/pc/zt/20250414102908/assets/qr-bg_687737c3.png);
  background-size: 100% 100%;
}

.sns-pop-mask .qw-pop .qrcode {
  width: 2.54rem;
  height: 2.54rem;
  background: url(https://one.res.netease.com/pc/zt/20250414102908/assets/qw-qrcode_89818f1a.jpg);
  background-size: 100% 100%;
}