/** mixins **/
#head-bar {
  position: absolute;
  top: 0;
  z-index: 9;
  width: 100%;
  height: 71px;
  background: rgba(223, 249, 255, 0.9);
  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: end;
  -webkit-justify-content: flex-end;
      -ms-flex-pack: end;
          justify-content: flex-end;
}
#head-bar #logo {
  position: absolute;
  top: 10px;
  left: 26px;
  display: block;
  z-index: 2;
}
#head-bar .nav-list {
  height: 100%;
  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: end;
  -webkit-justify-content: flex-end;
      -ms-flex-pack: end;
          justify-content: flex-end;
}
#head-bar .nav-list .nav-item {
  position: relative;
  width: 97px;
  height: 100%;
  text-align: center;
  font-size: 20px;
  color: #596a80;
  line-height: 71px;
  font-weight: bold;
  margin-right: 91px;
}
#head-bar .nav-list .nav-item::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  height: 6px;
  width: 0;
  background: #ff9539;
}
#head-bar .nav-list .nav-item a {
  display: inline-block;
  width: 100%;
  height: 100%;
  color: #596a80;
}
#head-bar .nav-list .nav-item.ugc-star {
  width: 110px;
}
#head-bar .nav-list .nav-item:last-of-type {
  margin-right: 31px;
}
#head-bar .nav-list .nav-item.active,
#head-bar .nav-list .nav-item:hover {
  color: #ff9539;
}
#head-bar .nav-list .nav-item.active a,
#head-bar .nav-list .nav-item:hover a {
  color: #ff9539;
}
#head-bar .nav-list .nav-item.active::after,
#head-bar .nav-list .nav-item:hover::after {
  -webkit-transition: width 0.3s;
  transition: width 0.3s;
  width: 100%;
}
#head-bar .media-list {
  width: 208px;
  right: 45px;
  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;
  z-index: 2;
  margin-right: 46px;
}
#head-bar .media-list a {
  display: block;
}
#head-bar .media-list .nav-qr {
  position: relative;
}
#head-bar .media-list .nav-qr .qrcode {
  display: none;
}
#head-bar .media-list .nav-qr:hover .qrcode {
  display: block;
}
#head-bar .media-list .qrcode {
  position: absolute;
  left: 50%;
  top: calc(100% + 10px);
  -webkit-transform: scale(2) translateX(-50%);
          transform: scale(2) translateX(-50%);
  -webkit-transform-origin: top left;
          transform-origin: top left;
  background: url(https://qmx.res.netease.com/pc/gw/20230811152837/assets/sprite-15a123_15a123de.png) no-repeat;background-size:243px 162px;
background-position:-0px -0px;
width:73px;
height:76px;

}
#head-bar .media-list .qrcode .code {
  position: absolute;
  left: 50%;
  top: calc(50% + 2px);
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
#head-bar .media-list .qrcode .wx {
  background: url(https://qmx.res.netease.com/pc/gw/20230811152837/assets/code-wx_6d024552.jpg) no-repeat;
  width: 67px;
  height: 67px;
  background-size: contain;
}
#head-bar .media-list .qrcode .qw {
  background: url(https://qmx.res.netease.com/pc/gw/20230811152837/assets/code-qw_33e2a186.jpg) no-repeat;
  width: 67px;
  height: 67px;
  background-size: contain;
}
#head-bar .media-list .icon-bilibili {
  background: url(https://qmx.res.netease.com/pc/gw/20230811152837/assets/sprite-15a123_15a123de.png) no-repeat;background-size:243px 162px;
background-position:-0px -80px;
width:37px;
height:37px;

}
#head-bar .media-list .icon-bilibili:hover {
  background: url(https://qmx.res.netease.com/pc/gw/20230811152837/assets/sprite-15a123_15a123de.png) no-repeat;background-size:243px 162px;
background-position:-41px -80px;
width:37px;
height:37px;

}
#head-bar .media-list .icon-wx {
  background: url(https://qmx.res.netease.com/pc/gw/20230811152837/assets/sprite-15a123_15a123de.png) no-repeat;background-size:243px 162px;
background-position:-82px -80px;
width:37px;
height:37px;

}
#head-bar .media-list .icon-wx:hover {
  background: url(https://qmx.res.netease.com/pc/gw/20230811152837/assets/sprite-15a123_15a123de.png) no-repeat;background-size:243px 162px;
background-position:-161px -0px;
width:37px;
height:37px;

}
#head-bar .media-list .icon-qw {
  background: url(https://qmx.res.netease.com/pc/gw/20230811152837/assets/sprite-15a123_15a123de.png) no-repeat;background-size:243px 162px;
background-position:-161px -41px;
width:37px;
height:37px;

}
#head-bar .media-list .icon-qw:hover {
  background: url(https://qmx.res.netease.com/pc/gw/20230811152837/assets/sprite-15a123_15a123de.png) no-repeat;background-size:243px 162px;
background-position:-0px -121px;
width:37px;
height:37px;

}
#head-bar .media-list .icon-dy {
  background: url(https://qmx.res.netease.com/pc/gw/20230811152837/assets/sprite-15a123_15a123de.png) no-repeat;background-size:243px 162px;
background-position:-77px -0px;
width:38px;
height:37px;

}
#head-bar .media-list .icon-dy:hover {
  background: url(https://qmx.res.netease.com/pc/gw/20230811152837/assets/sprite-15a123_15a123de.png) no-repeat;background-size:243px 162px;
background-position:-119px -0px;
width:38px;
height:37px;

}
#head-bar .media-list .icon-wb {
  background: url(https://qmx.res.netease.com/pc/gw/20230811152837/assets/sprite-15a123_15a123de.png) no-repeat;background-size:243px 162px;
background-position:-41px -121px;
width:37px;
height:37px;

}
#head-bar .media-list .icon-wb:hover {
  background: url(https://qmx.res.netease.com/pc/gw/20230811152837/assets/sprite-15a123_15a123de.png) no-repeat;background-size:243px 162px;
background-position:-82px -121px;
width:37px;
height:37px;

}
#head-bar .media-list .icon-tap {
  background: url(https://qmx.res.netease.com/pc/gw/20230811152837/assets/sprite-15a123_15a123de.png) no-repeat;background-size:243px 162px;
background-position:-123px -121px;
width:37px;
height:37px;

}
#head-bar .media-list .icon-tap:hover {
  background: url(https://qmx.res.netease.com/pc/gw/20230811152837/assets/sprite-15a123_15a123de.png) no-repeat;background-size:243px 162px;
background-position:-202px -0px;
width:37px;
height:37px;

}