@charset "utf-8";
/* CSS Document */
html,
body,
h1,
h2,
h3,
h4,
h5,
h6,
div,
dl,
dt,
dd,
ul,
ol,
li,
p,
blockquote,
pre,
hr,
figure,
table,
caption,
th,
td,
form,
fieldset,
legend,
input,
button,
textarea,
menu {
  margin: 0;
  padding: 0;
}
body {
  padding: 0;
  margin: 0;
  width: 100%;
  min-width: 1400px;
}
html,
body,
fieldset,
img,
iframe,
abbr {
  border: 0;
}
li {
  list-style: none;
}
textarea {
  overflow: auto;
  resize: none;
}
input {
  outline: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
a,
button {
  cursor: pointer;
}
h1,
h2,
h3,
h4,
h5,
h6,
em,
strong,
b {
  font-weight: normal;
  font-style: normal;
}
input,
textarea,
a,
div,
button,
select {
  margin: 0;
  padding: 0;
  border: 0;
  outline: none;
}
a,
a:hover {
  text-decoration: none;
}
body,
textarea,
input,
button {
  color: #62a1c9;
}
html,
body {
  width: 100%;
  min-width: 1500px;
  max-width: 1920px;
  height: auto;
  font-family: "Microsoft YaHei", "Helvetica Neue", Helvetica, STHeiTi, sans-serif;
  background: #fff;
  line-height: 1.5;
}
html.oh,
body.oh {
  overflow-y: hidden;
}
::-webkit-input-placeholder {
  /* WebKit browsers */
  color: #454545;
}
:-moz-placeholder {
  /* Mozilla Firefox 4 to 18 */
  color: #454545;
}
:-ms-input-placeholder {
  /* Internet Explorer 10+ */
  color: #454545;
}
/* 宽度限制板块 */
.wbox {
  width: 1200px;
  display: block;
  position: relative;
  margin: 0 auto;
  clear: both;
}
.wbox::after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}
/* Hides from IE-mac \ */
* html .wbox {
  zoom: 1;
}
/* End hide from IE-mac */
select {
  appearance: none;
  -moz-appearance: none;
  -webkit-appearance: none;
}
.hide {
  display: none;
}
/**** DEMO单行
.text-overflow-ellipsis(1);
多行
 .text-overflow-ellipsis(2);
****/
@font-face {
  font-family: 'fzqkbys';
  src: url('https://nie.res.netease.com/comm/js/nie/ref/fonts/fzqkbys.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}
.font-fz {
  font-family: 'fzqkbys';
}
.noSize {
  font-size: 0;
  text-indent: -9999em;
}
.flex {
  display: -webkit-box;
  /* OLD - iOS 6-, Safari 3.1-6 */
  display: -moz-box;
  /* OLD - Firefox 19- (buggy but mostly works) */
  display: -ms-flexbox;
  /* TWEENER - IE 10 */
  display: -webkit-flex;
  /* NEW - Chrome */
  display: flex;
  /* NEW, Spec - Opera 12.1, Firefox 20+ */
}
.fade-enter-active,
.fade-leave-active {
  -webkit-transition: opacity 0.3s;
  transition: opacity 0.3s;
}
.fade-enter,
.fade-leave-active {
  opacity: 0;
}
.vux-fade-enter-active,
.vux-fade-leave-active {
  opacity: 1;
  -webkit-transition: opacity linear 0.2s;
  transition: opacity linear 0.2s;
}
.vux-fade-enter,
.vux-fade-leave-to {
  opacity: 0;
}
.vux-dialog-enter-active,
.vux-dialog-leave-active {
  opacity: 1;
  -webkit-transition-duration: 400ms;
          transition-duration: 400ms;
  -webkit-transform: translate(-50%, -50%) scale(1) !important;
          transform: translate(-50%, -50%) scale(1) !important;
  -webkit-transition-property: opacity, -webkit-transform !important;
  transition-property: opacity, -webkit-transform !important;
  transition-property: transform, opacity !important;
  transition-property: transform, opacity, -webkit-transform !important;
}
.vux-dialog-leave-active {
  -webkit-transition-duration: 300ms;
          transition-duration: 300ms;
  opacity: 0;
  -webkit-transform: translate(-50%, -50%) scale(0.85) !important;
          transform: translate(-50%, -50%) scale(0.85) !important;
}
.vux-dialog-enter {
  opacity: 0;
  -webkit-transform: translate(-50%, -50%) scale(1.185) !important;
          transform: translate(-50%, -50%) scale(1.185) !important;
}
.vux-mask-enter,
.vux-mask-leave-active {
  opacity: 0;
}
.vux-mask-leave-active,
.vux-mask-enter-active {
  -webkit-transition: opacity 300ms;
  transition: opacity 300ms;
}
.home-page {
  height: 1080px;
  background: url(https://qn.res.netease.com/pc/zt/20200911175236/img/bg_425ee273.jpg) no-repeat center top;
}
.home-page .video-bg {
  width: 100%;
  height: 1080px;
  overflow: hidden;
  position: relative;
}
.home-page .video-bg video {
  width: 1920px;
  height: 1080px;
  position: absolute;
  left: 50%;
  margin-left: -960px;
  top: 0;
}
.home-page .media-subtitle {
  width: 90px;
  height: 34px;
  background: url(https://qn.res.netease.com/pc/zt/20200911175236/img/sprite-dd5db3_dd5db3d9.png) no-repeat;background-size:915px 786px;
background-position:-812px -57px;

  position: absolute;
  top: 460px;
  left: 50%;
  margin-left: 20px;
}
.home-page .nav {
  position: absolute;
  top: 0;
  left: 50%;
}
.home-page .nav-link {
  display: block;
  position: absolute;
}
.home-page .nav-link:hover {
  -webkit-filter: brightness(1.1);
  -o-filter: brightness(1.1);
  -moz-filter: brightness(1.1);
  filter: brightness(1.1);
}
@-webkit-keyframes rotate-anim {
  100% {
    transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
  }
}
@-moz-keyframes rotate-anim {
  100% {
    transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
  }
}
@-ms-keyframes rotate-anim {
  100% {
    transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
  }
}
@-o-keyframes rotate-anim {
  100% {
    transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
  }
}
@keyframes rotate-anim {
  100% {
    transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
  }
}
@-webkit-keyframes rotate-anim {
  100% {
    transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
  }
}
@-moz-keyframes rotate-anim {
  100% {
    transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
  }
}
@-ms-keyframes rotate-anim {
  100% {
    transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
  }
}
@-o-keyframes rotate-anim {
  100% {
    transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
  }
}
@keyframes rotate-anim {
  100% {
    transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
  }
}
.home-page .nav-link::before {
  content: '';
  display: block;
  width: 168px;
  height: 190px;
  background: url(https://qn.res.netease.com/pc/zt/20200911175236/img/btn-bg_3544ec0b.png);
}
.home-page .nav-link span {
  position: absolute;
  color: #8e601e;
  font-size: 26px;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
  line-height: 30px;
}
.home-page .nav-link-pic {
  top: 250px;
  left: -545px;
}
.home-page .nav-link-pic::before {
  -webkit-animation: rotate-anim 10s 0.1s infinite linear 300ms 0 ease;
  -moz-animation: rotate-anim 10s 0.1s infinite linear 300ms 0 ease;
  -ms-animation: rotate-anim 10s 0.1s infinite linear 300ms 0 ease;
  animation: rotate-anim 10s 0.1s infinite linear 300ms 0 ease;
  -o-animation: rotate-anim 10s 0.1s infinite linear;
  -webkit-animation: rotate-anim 10s 0.1s infinite linear;
  -moz-animation: rotate-anim 10s 0.1s infinite linear;
  -ms-animation: rotate-anim 10s 0.1s infinite linear;
  animation: rotate-anim 10s 0.1s infinite linear;
}
.home-page .nav-link-video {
  top: 90px;
  left: 315px;
}
.home-page .nav-link-video::before {
  -webkit-animation: rotate-anim 10s 0.2s infinite linear 300ms 0 ease;
  -moz-animation: rotate-anim 10s 0.2s infinite linear 300ms 0 ease;
  -ms-animation: rotate-anim 10s 0.2s infinite linear 300ms 0 ease;
  animation: rotate-anim 10s 0.2s infinite linear 300ms 0 ease;
  -o-animation: rotate-anim 10s 0.2s infinite linear;
  -webkit-animation: rotate-anim 10s 0.2s infinite linear;
  -moz-animation: rotate-anim 10s 0.2s infinite linear;
  -ms-animation: rotate-anim 10s 0.2s infinite linear;
  animation: rotate-anim 10s 0.2s infinite linear;
}
.home-page .nav-link-music {
  top: 695px;
  left: 170px;
}
.home-page .nav-link-music::before {
  -webkit-animation: rotate-anim 10s 0.3s infinite linear 300ms 0 ease;
  -moz-animation: rotate-anim 10s 0.3s infinite linear 300ms 0 ease;
  -ms-animation: rotate-anim 10s 0.3s infinite linear 300ms 0 ease;
  animation: rotate-anim 10s 0.3s infinite linear 300ms 0 ease;
  -o-animation: rotate-anim 10s 0.3s infinite linear;
  -webkit-animation: rotate-anim 10s 0.3s infinite linear;
  -moz-animation: rotate-anim 10s 0.3s infinite linear;
  -ms-animation: rotate-anim 10s 0.3s infinite linear;
  animation: rotate-anim 10s 0.3s infinite linear;
}
.video-page {
  width: 100%;
  height: 100vh;
  overflow-y: hidden;
  position: relative;
}
.video-page .global-nav .nav-link {
  width: 30px;
  position: relative;
  color: #4257a6;
  text-align: center;
}
.video-page .global-nav .nav-link::before {
  display: inline-block;
  content: '';
  width: 4px;
  height: 4px;
  position: absolute;
  border: 1px solid #4257a6;
  border-radius: 50%;
  left: 13px;
  top: -10px;
}
.video-page .global-nav .nav-link span {
  position: relative;
}
.video-page .global-nav .nav-link.active span,
.video-page .global-nav .nav-link:hover span {
  color: #4857ac;
}
.video-page .global-nav .nav-link.active::before,
.video-page .global-nav .nav-link:hover::before {
  display: block;
  content: '';
  width: 61px;
  height: 132px;
  border-radius: 0;
  border: none;
  background: url(https://qn.res.netease.com/pc/zt/20200911175236/img/nav-link-bg-2_676cca7b.png) no-repeat;
  position: absolute;
  top: -20px;
  left: -6px;
}
.video-page .video-home {
  width: 100%;
  height: 100%;
  background: url(https://qn.res.netease.com/pc/zt/20200911175236/img/bg-1_1eaf200c.jpg) no-repeat center top;
  background-size: cover;
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
}
.video-page .video-home h2 {
  width: 533px;
  height: 600px;
  background: url(https://qn.res.netease.com/pc/zt/20200911175236/img/title_ea8916e4.png);
  position: absolute;
  top: 0;
  left: 50%;
  margin-left: -266px;
  pointer-events: none;
}
.video-page .video-home .video-recommend {
  position: absolute;
  top: 0;
  left: 50%;
}
.video-page .video-home .video-recommend .item {
  position: absolute;
}
.video-page .video-home .video-recommend .item img {
  width: 100%;
  height: 100%;
}
.video-page .video-home .video-recommend .item:hover .cover {
  -webkit-opacity: 1;
  -moz-opacity: 1;
  opacity: 1;
}
.video-page .video-home .video-recommend .item:hover .cover .tl::before,
.video-page .video-home .video-recommend .item:hover .cover .br::before {
  transform: translate(0, 0);
  -webkit-transform: translate(0, 0);
  -moz-transform: translate(0, 0);
  -ms-transform: translate(0, 0);
  -o-transform: translate(0, 0);
}
.video-page .video-home .video-recommend .item:hover .cover .tl::after,
.video-page .video-home .video-recommend .item:hover .cover .br::after {
  transform: translate(0, 0);
  -webkit-transform: translate(0, 0);
  -moz-transform: translate(0, 0);
  -ms-transform: translate(0, 0);
  -o-transform: translate(0, 0);
}
.video-page .video-home .video-recommend .item .cover {
  transition: all 0.3s;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -ms-transition: all 0.3s;
  -o-transition: all 0.3s;
  -webkit-opacity: 0;
  -moz-opacity: 0;
  opacity: 0;
  background: rgba(0, 0, 0, 0.5);
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
.video-page .video-home .video-recommend .item .cover .tl,
.video-page .video-home .video-recommend .item .cover .br {
  position: absolute;
  top: 10px;
  left: 10px;
  right: 10px;
  bottom: 10px;
  overflow: hidden;
}
.video-page .video-home .video-recommend .item .cover .tl::before {
  display: block;
  content: '';
  width: 100%;
  height: 1px;
  border-top: 1px solid #906d1f;
  position: absolute;
  left: 0;
  top: 0;
  transform: translate(-100%, 0);
  -webkit-transform: translate(-100%, 0);
  -moz-transform: translate(-100%, 0);
  -ms-transform: translate(-100%, 0);
  -o-transform: translate(-100%, 0);
  transition: all 0.2s linear;
  -webkit-transition: all 0.2s linear;
  -moz-transition: all 0.2s linear;
  -ms-transition: all 0.2s linear;
  -o-transition: all 0.2s linear;
}
.video-page .video-home .video-recommend .item .cover .tl::after {
  display: block;
  content: '';
  height: 100%;
  width: 1px;
  border-left: 1px solid #906d1f;
  position: absolute;
  right: 0;
  top: 0;
  transform: translate(0, -100%);
  -webkit-transform: translate(0, -100%);
  -moz-transform: translate(0, -100%);
  -ms-transform: translate(0, -100%);
  -o-transform: translate(0, -100%);
  transition: all 0.2s 0.2s linear;
  -webkit-transition: all 0.2s 0.2s linear;
  -moz-transition: all 0.2s 0.2s linear;
  -ms-transition: all 0.2s 0.2s linear;
  -o-transition: all 0.2s 0.2s linear;
}
.video-page .video-home .video-recommend .item .cover .br::before {
  display: block;
  content: '';
  width: 100%;
  height: 1px;
  border-top: 1px solid #906d1f;
  position: absolute;
  bottom: 0;
  right: 0;
  transform: translate(100%, 0);
  -webkit-transform: translate(100%, 0);
  -moz-transform: translate(100%, 0);
  -ms-transform: translate(100%, 0);
  -o-transform: translate(100%, 0);
  transition: all 0.2s 0.4s linear;
  -webkit-transition: all 0.2s 0.4s linear;
  -moz-transition: all 0.2s 0.4s linear;
  -ms-transition: all 0.2s 0.4s linear;
  -o-transition: all 0.2s 0.4s linear;
}
.video-page .video-home .video-recommend .item .cover .br::after {
  display: block;
  content: '';
  height: 100%;
  width: 1px;
  border-left: 1px solid #906d1f;
  position: absolute;
  left: 0;
  bottom: 0;
  transform: translate(0, 100%);
  -webkit-transform: translate(0, 100%);
  -moz-transform: translate(0, 100%);
  -ms-transform: translate(0, 100%);
  -o-transform: translate(0, 100%);
  transition: all 0.2s 0.6s linear;
  -webkit-transition: all 0.2s 0.6s linear;
  -moz-transition: all 0.2s 0.6s linear;
  -ms-transition: all 0.2s 0.6s linear;
  -o-transition: all 0.2s 0.6s linear;
}
.video-page .video-home .video-recommend .item .cover .video-btn {
  display: block;
  width: 113px;
  height: 110px;
  background: url(https://qn.res.netease.com/pc/zt/20200911175236/img/sprite-dd5db3_dd5db3d9.png);background-size:915px 786px;
background-position:-0px -446px;

  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transition: -webkit-transform 0.3s;
  transition: -webkit-transform 0.3s;
  transition: transform 0.3s;
  transition: transform 0.3s, -webkit-transform 0.3s;
  -webkit-transition: transform 0.3s;
  -moz-transition: transform 0.3s;
  -ms-transition: transform 0.3s;
  -o-transition: transform 0.3s;
  margin-left: -56px;
  margin-top: -55px;
}
.video-page .video-home .video-recommend .item .cover .video-btn:hover {
  width: 113px;
  height: 110px;
  background: url(https://qn.res.netease.com/pc/zt/20200911175236/img/sprite-dd5db3_dd5db3d9.png);background-size:915px 786px;
background-position:-115px -446px;

  transform: scale(1.1);
  -webkit-transform: scale(1.1);
  -moz-transform: scale(1.1);
  -ms-transform: scale(1.1);
  -o-transform: scale(1.1);
}
.video-page .video-home .video-recommend .item .name {
  position: absolute;
  right: -25px;
  bottom: -23px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  padding: 40px 0 0 5px;
  color: #3e4998;
}
.video-page .video-home .video-recommend .item .name span {
  width: 174px;
  display: block;
  text-align: center;
}
.video-page .video-home .video-recommend .item-1 {
  width: 440px;
  height: 249px;
  top: 124px;
  right: 163px;
}
.video-page .video-home .video-recommend .item-1 .name {
  width: 463px;
  height: 56px;
  background: url(https://qn.res.netease.com/pc/zt/20200911175236/img/sprite-dd5db3_dd5db3d9.png);background-size:915px 786px;
background-position:-234px -115px;

}
.video-page .video-home .video-recommend .item-1 .cover::before {
  width: 420px;
  height: 229px;
}
.video-page .video-home .video-recommend .item-2 {
  width: 552px;
  height: 319px;
  top: 452px;
  right: 163px;
}
.video-page .video-home .video-recommend .item-2 .name {
  width: 576px;
  height: 56px;
  background: url(https://qn.res.netease.com/pc/zt/20200911175236/img/sprite-dd5db3_dd5db3d9.png);background-size:915px 786px;
background-position:-234px -57px;

}
.video-page .video-home .video-recommend .item-2 .cover::before {
  width: 532px;
  height: 299px;
}
.video-page .video-home .video-recommend .item-3 {
  width: 651px;
  height: 374px;
  top: 222px;
  left: 163px;
}
.video-page .video-home .video-recommend .item-3 .name {
  width: 681px;
  height: 55px;
  background: url(https://qn.res.netease.com/pc/zt/20200911175236/img/sprite-dd5db3_dd5db3d9.png);background-size:915px 786px;
background-position:-234px -0px;

}
.video-page .video-home .video-recommend .item-3 .cover::before {
  width: 631px;
  height: 354px;
}
.video-page .video-home .video-recommend .item-4 {
  width: 405px;
  height: 230px;
  top: 674px;
  left: 163px;
}
.video-page .video-home .video-recommend .item-4 .name {
  width: 436px;
  height: 56px;
  background: url(https://qn.res.netease.com/pc/zt/20200911175236/img/sprite-dd5db3_dd5db3d9.png);background-size:915px 786px;
background-position:-234px -173px;

}
.video-page .video-home .video-recommend .item-4 .cover::before {
  width: 385px;
  height: 210px;
}
.video-page .video-home .down {
  cursor: pointer;
  position: absolute;
  bottom: 40px;
  left: 50%;
  margin-left: -64px;
  width: 115px;
  height: 364px;
  background: url(https://qn.res.netease.com/pc/zt/20200911175236/img/sprite-dd5db3_dd5db3d9.png);background-size:915px 786px;
background-position:-0px -0px;

  -webkit-animation: float-anim 1s 0.1s infinite linear 300ms 0 ease;
  -moz-animation: float-anim 1s 0.1s infinite linear 300ms 0 ease;
  -ms-animation: float-anim 1s 0.1s infinite linear 300ms 0 ease;
  animation: float-anim 1s 0.1s infinite linear 300ms 0 ease;
  -o-animation: float-anim 1s 0.1s infinite linear;
  -webkit-animation: float-anim 1s 0.1s infinite linear;
  -moz-animation: float-anim 1s 0.1s infinite linear;
  -ms-animation: float-anim 1s 0.1s infinite linear;
  animation: float-anim 1s 0.1s infinite linear;
}
.video-page .video-home .down:hover {
  width: 115px;
  height: 364px;
  background: url(https://qn.res.netease.com/pc/zt/20200911175236/img/sprite-dd5db3_dd5db3d9.png);background-size:915px 786px;
background-position:-117px -0px;

}
@-webkit-keyframes float-anim {
  0% {
    transform: translate(0, -10px);
    -webkit-transform: translate(0, -10px);
    -moz-transform: translate(0, -10px);
    -ms-transform: translate(0, -10px);
    -o-transform: translate(0, -10px);
  }
  50% {
    transform: translate(0, 0);
    -webkit-transform: translate(0, 0);
    -moz-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    -o-transform: translate(0, 0);
  }
  100% {
    transform: translate(0, -10px);
    -webkit-transform: translate(0, -10px);
    -moz-transform: translate(0, -10px);
    -ms-transform: translate(0, -10px);
    -o-transform: translate(0, -10px);
  }
}
@-moz-keyframes float-anim {
  0% {
    transform: translate(0, -10px);
    -webkit-transform: translate(0, -10px);
    -moz-transform: translate(0, -10px);
    -ms-transform: translate(0, -10px);
    -o-transform: translate(0, -10px);
  }
  50% {
    transform: translate(0, 0);
    -webkit-transform: translate(0, 0);
    -moz-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    -o-transform: translate(0, 0);
  }
  100% {
    transform: translate(0, -10px);
    -webkit-transform: translate(0, -10px);
    -moz-transform: translate(0, -10px);
    -ms-transform: translate(0, -10px);
    -o-transform: translate(0, -10px);
  }
}
@-ms-keyframes float-anim {
  0% {
    transform: translate(0, -10px);
    -webkit-transform: translate(0, -10px);
    -moz-transform: translate(0, -10px);
    -ms-transform: translate(0, -10px);
    -o-transform: translate(0, -10px);
  }
  50% {
    transform: translate(0, 0);
    -webkit-transform: translate(0, 0);
    -moz-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    -o-transform: translate(0, 0);
  }
  100% {
    transform: translate(0, -10px);
    -webkit-transform: translate(0, -10px);
    -moz-transform: translate(0, -10px);
    -ms-transform: translate(0, -10px);
    -o-transform: translate(0, -10px);
  }
}
@-o-keyframes float-anim {
  0% {
    transform: translate(0, -10px);
    -webkit-transform: translate(0, -10px);
    -moz-transform: translate(0, -10px);
    -ms-transform: translate(0, -10px);
    -o-transform: translate(0, -10px);
  }
  50% {
    transform: translate(0, 0);
    -webkit-transform: translate(0, 0);
    -moz-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    -o-transform: translate(0, 0);
  }
  100% {
    transform: translate(0, -10px);
    -webkit-transform: translate(0, -10px);
    -moz-transform: translate(0, -10px);
    -ms-transform: translate(0, -10px);
    -o-transform: translate(0, -10px);
  }
}
@keyframes float-anim {
  0% {
    transform: translate(0, -10px);
    -webkit-transform: translate(0, -10px);
    -moz-transform: translate(0, -10px);
    -ms-transform: translate(0, -10px);
    -o-transform: translate(0, -10px);
  }
  50% {
    transform: translate(0, 0);
    -webkit-transform: translate(0, 0);
    -moz-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    -o-transform: translate(0, 0);
  }
  100% {
    transform: translate(0, -10px);
    -webkit-transform: translate(0, -10px);
    -moz-transform: translate(0, -10px);
    -ms-transform: translate(0, -10px);
    -o-transform: translate(0, -10px);
  }
}
@-webkit-keyframes float-anim {
  0% {
    transform: translate(0, -10px);
    -webkit-transform: translate(0, -10px);
    -moz-transform: translate(0, -10px);
    -ms-transform: translate(0, -10px);
    -o-transform: translate(0, -10px);
  }
  50% {
    transform: translate(0, 0);
    -webkit-transform: translate(0, 0);
    -moz-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    -o-transform: translate(0, 0);
  }
  100% {
    transform: translate(0, -10px);
    -webkit-transform: translate(0, -10px);
    -moz-transform: translate(0, -10px);
    -ms-transform: translate(0, -10px);
    -o-transform: translate(0, -10px);
  }
}
@-moz-keyframes float-anim {
  0% {
    transform: translate(0, -10px);
    -webkit-transform: translate(0, -10px);
    -moz-transform: translate(0, -10px);
    -ms-transform: translate(0, -10px);
    -o-transform: translate(0, -10px);
  }
  50% {
    transform: translate(0, 0);
    -webkit-transform: translate(0, 0);
    -moz-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    -o-transform: translate(0, 0);
  }
  100% {
    transform: translate(0, -10px);
    -webkit-transform: translate(0, -10px);
    -moz-transform: translate(0, -10px);
    -ms-transform: translate(0, -10px);
    -o-transform: translate(0, -10px);
  }
}
@-ms-keyframes float-anim {
  0% {
    transform: translate(0, -10px);
    -webkit-transform: translate(0, -10px);
    -moz-transform: translate(0, -10px);
    -ms-transform: translate(0, -10px);
    -o-transform: translate(0, -10px);
  }
  50% {
    transform: translate(0, 0);
    -webkit-transform: translate(0, 0);
    -moz-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    -o-transform: translate(0, 0);
  }
  100% {
    transform: translate(0, -10px);
    -webkit-transform: translate(0, -10px);
    -moz-transform: translate(0, -10px);
    -ms-transform: translate(0, -10px);
    -o-transform: translate(0, -10px);
  }
}
@-o-keyframes float-anim {
  0% {
    transform: translate(0, -10px);
    -webkit-transform: translate(0, -10px);
    -moz-transform: translate(0, -10px);
    -ms-transform: translate(0, -10px);
    -o-transform: translate(0, -10px);
  }
  50% {
    transform: translate(0, 0);
    -webkit-transform: translate(0, 0);
    -moz-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    -o-transform: translate(0, 0);
  }
  100% {
    transform: translate(0, -10px);
    -webkit-transform: translate(0, -10px);
    -moz-transform: translate(0, -10px);
    -ms-transform: translate(0, -10px);
    -o-transform: translate(0, -10px);
  }
}
@keyframes float-anim {
  0% {
    transform: translate(0, -10px);
    -webkit-transform: translate(0, -10px);
    -moz-transform: translate(0, -10px);
    -ms-transform: translate(0, -10px);
    -o-transform: translate(0, -10px);
  }
  50% {
    transform: translate(0, 0);
    -webkit-transform: translate(0, 0);
    -moz-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    -o-transform: translate(0, 0);
  }
  100% {
    transform: translate(0, -10px);
    -webkit-transform: translate(0, -10px);
    -moz-transform: translate(0, -10px);
    -ms-transform: translate(0, -10px);
    -o-transform: translate(0, -10px);
  }
}
.video-page .video-list {
  width: 100%;
  height: 100%;
  background: url(https://qn.res.netease.com/pc/zt/20200911175236/img/bg-2_ba643208.jpg) no-repeat center top;
  background-size: cover;
  position: absolute;
  top: 100%;
  left: 0;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  padding-top: 75px;
  overflow: hidden;
}
.video-page .video-list .tab-links {
  width: 1300px;
  height: 52px;
  margin: 0 auto;
  border-bottom: 1px solid #4f5c90;
  line-height: 52px;
}
.video-page .video-list .tab-links .tab-link {
  color: #afbae2;
  display: inline-block;
  width: 117px;
  position: relative;
  text-align: center;
  margin-right: 10px;
}
.video-page .video-list .tab-links .tab-link:last-child::after {
  display: none;
}
.video-page .video-list .tab-links .tab-link span {
  position: relative;
}
.video-page .video-list .tab-links .tab-link::after {
  content: '';
  display: inline-block;
  width: 1px;
  height: 28px;
  background: #858ec4;
  transform: rotate(30deg);
  -webkit-transform: rotate(30deg);
  -moz-transform: rotate(30deg);
  -ms-transform: rotate(30deg);
  -o-transform: rotate(30deg);
  position: absolute;
  right: -10px;
  top: 10px;
}
.video-page .video-list .tab-links .tab-link.active,
.video-page .video-list .tab-links .tab-link:hover {
  color: #feeaac;
}
.video-page .video-list .tab-links .tab-link.active::before,
.video-page .video-list .tab-links .tab-link:hover::before {
  display: block;
  content: '';
  width: 117px;
  height: 79px;
  background: url(https://qn.res.netease.com/pc/zt/20200911175236/img/sprite-dd5db3_dd5db3d9.png) no-repeat;background-size:915px 786px;
background-position:-662px -446px;

  position: absolute;
  left: 0;
  top: -14px;
}
.video-page .video-list .content {
  width: 1350px;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
  position: absolute;
  top: 177px;
  left: 50%;
  margin-left: -650px;
  bottom: 20px;
  overflow-y: auto;
}
.video-page .video-list .content .item {
  width: 397px;
  height: 227px;
  position: relative;
  margin-right: 54px;
  margin-bottom: 50px;
}
.video-page .video-list .content .item img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.video-page .video-list .content .item:nth-child(3n) {
  margin-right: 0;
}
.video-page .video-list .content .item:hover .cover {
  display: block;
  transition: opacity 0.3s;
  -webkit-transition: opacity 0.3s;
  -moz-transition: opacity 0.3s;
  -ms-transition: opacity 0.3s;
  -o-transition: opacity 0.3s;
  -webkit-opacity: 1;
  -moz-opacity: 1;
  opacity: 1;
}
.video-page .video-list .content .item:hover .cover .tl::before,
.video-page .video-list .content .item:hover .cover .br::before {
  transform: translate(0, 0);
  -webkit-transform: translate(0, 0);
  -moz-transform: translate(0, 0);
  -ms-transform: translate(0, 0);
  -o-transform: translate(0, 0);
}
.video-page .video-list .content .item:hover .cover .tl::after,
.video-page .video-list .content .item:hover .cover .br::after {
  transform: translate(0, 0);
  -webkit-transform: translate(0, 0);
  -moz-transform: translate(0, 0);
  -ms-transform: translate(0, 0);
  -o-transform: translate(0, 0);
}
.video-page .video-list .content .item .cover {
  position: absolute;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  top: 0;
  left: 0;
  -webkit-opacity: 0;
  -moz-opacity: 0;
  opacity: 0;
}
.video-page .video-list .content .item .cover .tl,
.video-page .video-list .content .item .cover .br {
  position: absolute;
  top: 10px;
  left: 10px;
  right: 10px;
  bottom: 10px;
  overflow: hidden;
}
.video-page .video-list .content .item .cover .tl::before {
  display: block;
  content: '';
  width: 100%;
  height: 1px;
  border-top: 1px solid #906d1f;
  position: absolute;
  left: 0;
  top: 0;
  transform: translate(-100%, 0);
  -webkit-transform: translate(-100%, 0);
  -moz-transform: translate(-100%, 0);
  -ms-transform: translate(-100%, 0);
  -o-transform: translate(-100%, 0);
  transition: all 0.2s linear;
  -webkit-transition: all 0.2s linear;
  -moz-transition: all 0.2s linear;
  -ms-transition: all 0.2s linear;
  -o-transition: all 0.2s linear;
}
.video-page .video-list .content .item .cover .tl::after {
  display: block;
  content: '';
  height: 100%;
  width: 1px;
  border-left: 1px solid #906d1f;
  position: absolute;
  right: 0;
  top: 0;
  transform: translate(0, -100%);
  -webkit-transform: translate(0, -100%);
  -moz-transform: translate(0, -100%);
  -ms-transform: translate(0, -100%);
  -o-transform: translate(0, -100%);
  transition: all 0.2s 0.2s linear;
  -webkit-transition: all 0.2s 0.2s linear;
  -moz-transition: all 0.2s 0.2s linear;
  -ms-transition: all 0.2s 0.2s linear;
  -o-transition: all 0.2s 0.2s linear;
}
.video-page .video-list .content .item .cover .br::before {
  display: block;
  content: '';
  width: 100%;
  height: 1px;
  border-top: 1px solid #906d1f;
  position: absolute;
  bottom: 0;
  right: 0;
  transform: translate(100%, 0);
  -webkit-transform: translate(100%, 0);
  -moz-transform: translate(100%, 0);
  -ms-transform: translate(100%, 0);
  -o-transform: translate(100%, 0);
  transition: all 0.2s 0.4s linear;
  -webkit-transition: all 0.2s 0.4s linear;
  -moz-transition: all 0.2s 0.4s linear;
  -ms-transition: all 0.2s 0.4s linear;
  -o-transition: all 0.2s 0.4s linear;
}
.video-page .video-list .content .item .cover .br::after {
  display: block;
  content: '';
  height: 100%;
  width: 1px;
  border-left: 1px solid #906d1f;
  position: absolute;
  left: 0;
  bottom: 0;
  transform: translate(0, 100%);
  -webkit-transform: translate(0, 100%);
  -moz-transform: translate(0, 100%);
  -ms-transform: translate(0, 100%);
  -o-transform: translate(0, 100%);
  transition: all 0.2s 0.6s linear;
  -webkit-transition: all 0.2s 0.6s linear;
  -moz-transition: all 0.2s 0.6s linear;
  -ms-transition: all 0.2s 0.6s linear;
  -o-transition: all 0.2s 0.6s linear;
}
.video-page .video-list .content .item .cover .video-btn {
  width: 94px;
  height: 94px;
  display: block;
  background: url(https://qn.res.netease.com/pc/zt/20200911175236/img/sprite-dd5db3_dd5db3d9.png) no-repeat;background-size:915px 786px;
background-position:-0px -558px;

  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -47px;
  margin-top: -47px;
  -webkit-transition: -webkit-transform 0.3s;
  transition: -webkit-transform 0.3s;
  transition: transform 0.3s;
  transition: transform 0.3s, -webkit-transform 0.3s;
  -webkit-transition: transform 0.3s;
  -moz-transition: transform 0.3s;
  -ms-transition: transform 0.3s;
  -o-transition: transform 0.3s;
}
.video-page .video-list .content .item .cover .video-btn:hover {
  background: url(https://qn.res.netease.com/pc/zt/20200911175236/img/sprite-dd5db3_dd5db3d9.png) no-repeat;background-size:915px 786px;
background-position:-96px -558px;
width:94px;
height:94px;

  transform: scale(1.05);
  -webkit-transform: scale(1.05);
  -moz-transform: scale(1.05);
  -ms-transform: scale(1.05);
  -o-transform: scale(1.05);
}
.video-page .video-list .content .item .name {
  display: block;
  width: 278px;
  height: 37px;
  line-height: 37px;
  text-align: center;
  color: #f9efc7;
  position: absolute;
  bottom: 12px;
  right: -24px;
  background: url(https://qn.res.netease.com/pc/zt/20200911175236/img/sprite-dd5db3_dd5db3d9.png) no-repeat;background-size:915px 786px;
background-position:-459px -231px;

}
.video-page .video-list .top-btn {
  display: block;
  width: 106px;
  height: 107px;
  background: url(https://qn.res.netease.com/pc/zt/20200911175236/img/sprite-dd5db3_dd5db3d9.png) no-repeat;background-size:915px 786px;
background-position:-446px -446px;

  position: absolute;
  left: 50%;
  margin-left: 640px;
  z-index: 9;
  bottom: 20px;
}
.video-page .video-list .top-btn:hover {
  background: url(https://qn.res.netease.com/pc/zt/20200911175236/img/sprite-dd5db3_dd5db3d9.png) no-repeat;background-size:915px 786px;
background-position:-554px -446px;
width:106px;
height:107px;

}
@media screen and (max-height: 900px) {
  .video-page .video-home .video-recommend .item-3 {
    transform: scale(0.8);
    -webkit-transform: scale(0.8);
    -moz-transform: scale(0.8);
    -ms-transform: scale(0.8);
    -o-transform: scale(0.8);
    top: 120px;
    left: 80px;
  }
  .video-page .video-home .video-recommend .item-4 {
    top: 500px;
  }
}
@media screen and (max-height: 815px) {
  .video-page .video-home .video-recommend .item-3 {
    transform: scale(0.7);
    -webkit-transform: scale(0.7);
    -moz-transform: scale(0.7);
    -ms-transform: scale(0.7);
    -o-transform: scale(0.7);
    top: 120px;
    left: 80px;
  }
  .video-page .video-home .video-recommend .item-4 {
    top: 470px;
  }
  .video-page .video-home .video-recommend .item-2 {
    transform: scale(0.7);
    -webkit-transform: scale(0.7);
    -moz-transform: scale(0.7);
    -ms-transform: scale(0.7);
    -o-transform: scale(0.7);
    top: 370px;
  }
}
.pic-page {
  width: 100%;
  height: 100vh;
  overflow-y: hidden;
  background: url(https://qn.res.netease.com/pc/zt/20200911175236/img/bg_d3aab1c3.jpg) no-repeat center top;
}
.pic-page .title {
  display: block;
  width: 531px;
  height: 380px;
  background: url(https://qn.res.netease.com/pc/zt/20200911175236/img/title_62f80fa4.png) no-repeat;
  position: absolute;
  top: 77px;
  left: 50%;
  margin-left: -640px;
}
.pic-page .pic-cnt {
  width: 1300px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  padding-left: 180px;
  padding-top: 228px;
  margin: 0 auto;
}
.pic-page .pic-cnt .tab-links {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
  -webkit-justify-content: flex-end;
      -ms-flex-pack: end;
          justify-content: flex-end;
}
.pic-page .pic-cnt .tab-links .tab-link {
  display: block;
  width: 163px;
  height: 52px;
  cursor: pointer;
  margin-left: 30px;
  position: relative;
  text-indent: -9999px;
}
.pic-page .pic-cnt .tab-links .tab-link-bz {
  background: url(https://qn.res.netease.com/pc/zt/20200911175236/img/sprite-dd5db3_dd5db3d9.png) no-repeat;background-size:915px 786px;
background-position:-699px -115px;
width:163px;
height:52px;

}
.pic-page .pic-cnt .tab-links .tab-link-bz:hover::after,
.pic-page .pic-cnt .tab-links .tab-link-bz.active::after {
  display: block;
  content: '';
  width: 163px;
  height: 78px;
  background: url(https://qn.res.netease.com/pc/zt/20200911175236/img/sprite-dd5db3_dd5db3d9.png) no-repeat;background-size:915px 786px;
background-position:-0px -366px;

  position: absolute;
  top: -16px;
}
.pic-page .pic-cnt .tab-links .tab-link-jt {
  background: url(https://qn.res.netease.com/pc/zt/20200911175236/img/sprite-dd5db3_dd5db3d9.png) no-repeat;background-size:915px 786px;
background-position:-672px -173px;
width:163px;
height:52px;

}
.pic-page .pic-cnt .tab-links .tab-link-jt:hover::after,
.pic-page .pic-cnt .tab-links .tab-link-jt.active::after {
  display: block;
  content: '';
  width: 163px;
  height: 78px;
  background: url(https://qn.res.netease.com/pc/zt/20200911175236/img/sprite-dd5db3_dd5db3d9.png) no-repeat;background-size:915px 786px;
background-position:-165px -366px;

  position: absolute;
  top: -16px;
}
.pic-page .pic-cnt .pic-list {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
  position: absolute;
  top: 307px;
  bottom: 20px;
  overflow-y: auto;
  width: 1140px;
  -webkit-align-content: flex-start;
      -ms-flex-line-pack: start;
          align-content: flex-start;
}
.pic-page .pic-cnt .pic-list .item {
  margin-right: 35px;
  margin-bottom: 32px;
  height: 210px;
  cursor: pointer;
  transition: all 0.3s;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -ms-transition: all 0.3s;
  -o-transition: all 0.3s;
}
.pic-page .pic-cnt .pic-list .item:hover {
  -webkit-opacity: 0.8;
  -moz-opacity: 0.8;
  opacity: 0.8;
}
.pic-page .pic-cnt .pic-list .item img {
  display: block;
  width: 350px;
  height: 210px;
  -o-object-fit: cover;
     object-fit: cover;
}
.pic-page .pic-cnt .pic-list .item:nth-child(3n) {
  margin-right: 0;
}
.pic-page .pic-cnt .top-btn {
  display: block;
  width: 106px;
  height: 107px;
  background: url(https://qn.res.netease.com/pc/zt/20200911175236/img/sprite-dd5db3_dd5db3d9.png) no-repeat;background-size:915px 786px;
background-position:-446px -446px;

  position: absolute;
  left: 50%;
  margin-left: 640px;
  z-index: 9;
  bottom: 20px;
}
.pic-page .pic-cnt .top-btn:hover {
  background: url(https://qn.res.netease.com/pc/zt/20200911175236/img/sprite-dd5db3_dd5db3d9.png) no-repeat;background-size:915px 786px;
background-position:-554px -446px;
width:106px;
height:107px;

}
.music-page {
  width: 100%;
  height: 100vh;
  background: url(https://qn.res.netease.com/pc/zt/20200911175236/img/bg_fc3f549c.jpg) no-repeat center top;
  min-height: 860px;
}
.music-page .left {
  width: 27%;
  height: 100%;
  background: url(https://qn.res.netease.com/pc/zt/20200911175236/img/left-bg_b21b5b00.jpg) no-repeat center top;
}
.music-page .right {
  width: 73%;
  height: 100%;
  position: absolute;
  left: 27%;
  top: 0;
  overflow: hidden;
}
.music-page .right .cnt {
  position: absolute;
  left: 50%;
  top: 200px;
}
.music-page .right .cnt .player {
  width: 525px;
  height: 723px;
  background: url(https://qn.res.netease.com/pc/zt/20200911175236/img/current-list_09b3153a.png) no-repeat;
  position: absolute;
  left: -262px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  padding-top: 220px;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}
.music-page .right .cnt .player .cd {
  width: 245px;
  height: 245px;
  background: url(https://qn.res.netease.com/pc/zt/20200911175236/img/player_82bd217e.png) no-repeat;
  position: absolute;
  left: 50%;
  margin-left: -122px;
  top: -44px;
}
.music-page .right .cnt .player .cd-cover {
  width: 87px;
  height: 87px;
  background: url(https://qn.res.netease.com/pc/zt/20200911175236/img/sprite-dd5db3_dd5db3d9.png) no-repeat;background-size:915px 786px;
background-position:-192px -558px;

  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -43.5px;
  margin-top: -43.5px;
  color: transparent;
}
@-webkit-keyframes cover-anim {
  100% {
    transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
  }
}
@-moz-keyframes cover-anim {
  100% {
    transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
  }
}
@-ms-keyframes cover-anim {
  100% {
    transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
  }
}
@-o-keyframes cover-anim {
  100% {
    transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
  }
}
@keyframes cover-anim {
  100% {
    transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
  }
}
@-webkit-keyframes cover-anim {
  100% {
    transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
  }
}
@-moz-keyframes cover-anim {
  100% {
    transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
  }
}
@-ms-keyframes cover-anim {
  100% {
    transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
  }
}
@-o-keyframes cover-anim {
  100% {
    transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
  }
}
@keyframes cover-anim {
  100% {
    transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
  }
}
.music-page .right .cnt .player .cd-cover.playing {
  -webkit-animation: cover-anim 10s 0.1s infinite linear 300ms 0 ease;
  -moz-animation: cover-anim 10s 0.1s infinite linear 300ms 0 ease;
  -ms-animation: cover-anim 10s 0.1s infinite linear 300ms 0 ease;
  animation: cover-anim 10s 0.1s infinite linear 300ms 0 ease;
  -o-animation: cover-anim 10s 0.1s infinite linear;
  -webkit-animation: cover-anim 10s 0.1s infinite linear;
  -moz-animation: cover-anim 10s 0.1s infinite linear;
  -ms-animation: cover-anim 10s 0.1s infinite linear;
  animation: cover-anim 10s 0.1s infinite linear;
}
.music-page .right .cnt .player .current-music {
  width: 440px;
  height: 80px;
  border: 1px solid #7c7544;
  margin: 0 auto;
  position: relative;
}
.music-page .right .cnt .player .current-music .btn {
  width: 58px;
  height: 58px;
  border: 1px solid #c3b870;
  border-radius: 50%;
  position: absolute;
  top: 11px;
  left: 11px;
  cursor: pointer;
}
.music-page .right .cnt .player .current-music .btn.pause::after {
  display: block;
  content: '';
  width: 14px;
  height: 16px;
  background: url(https://qn.res.netease.com/pc/zt/20200911175236/img/sprite-dd5db3_dd5db3d9.png) no-repeat;background-size:915px 786px;
background-position:-832px -93px;

  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -7px;
  margin-top: -8px;
}
.music-page .right .cnt .player .current-music .btn.playing::after {
  display: block;
  content: '';
  width: 20px;
  height: 20px;
  border-left: 6px solid #c3b870;
  border-right: 6px solid #c3b870;
  position: absolute;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  top: 50%;
  left: 50%;
  margin-left: -10px;
  margin-top: -10px;
}
.music-page .right .cnt .player .current-music .bar-cnt {
  width: 326px;
  height: 2px;
  background: #656052;
  position: absolute;
  top: 42px;
  left: 92px;
}
.music-page .right .cnt .player .current-music .bar-cnt .bar {
  width: 0%;
  height: 2px;
  background: #a7a281;
  position: absolute;
}
.music-page .right .cnt .player .current-music .name {
  color: #656052;
  position: absolute;
  top: 15px;
  right: 22px;
}
.music-page .right .cnt .player .current-music .time {
  color: #656052;
  position: absolute;
  top: 54px;
  right: 22px;
}
.music-page .right .cnt .player .list {
  width: 408px;
  height: 300px;
  overflow-y: auto;
  margin: 30px auto 0;
  padding-right: 20px;
}
.music-page .right .cnt .player .list .item {
  height: 58px;
  border-bottom: 1px solid #36395f;
  line-height: 58px;
  color: #b3b9e8;
}
.music-page .right .cnt .player .list .item .player-btn {
  display: inline-block;
  width: 33px;
  height: 33px;
  background: url(https://qn.res.netease.com/pc/zt/20200911175236/img/sprite-dd5db3_dd5db3d9.png) no-repeat;background-size:915px 786px;
background-position:-864px -115px;

  vertical-align: middle;
  margin-right: 16px;
  cursor: pointer;
  position: relative;
}
.music-page .right .cnt .player .list .item .player-btn.active {
  background: none;
}
.music-page .right .cnt .player .list .item .player-btn.active .line {
  position: absolute;
  width: 2px;
  min-height: 10px;
  -webkit-transition: .5s;
  transition: .5s;
  vertical-align: middle;
  bottom: 10 !important;
  -webkit-box-shadow: inset 0px 0px 16px -2px rgba(0, 0, 0, 0.15);
          box-shadow: inset 0px 0px 16px -2px rgba(0, 0, 0, 0.15);
}
.music-page .right .cnt .player .list .item .player-btn.active .line1 {
  left: 20%;
  bottom: 10px;
  background-color: #c3b870;
}
.music-page .right .cnt .player .list .item .player-btn.active .line2 {
  left: 40%;
  height: 20px;
  bottom: 10px;
  background-color: #c3b870;
}
.music-page .right .cnt .player .list .item .player-btn.active .line3 {
  left: 60%;
  height: 10px;
  bottom: 10px;
  background-color: #c3b870;
}
.music-page .right .cnt .player .list .item .player-btn.active .line4 {
  left: 80%;
  height: 10px;
  bottom: 10px;
  background-color: #c3b870;
}
.music-page .right .cnt .player .list .item .player-btn.active .line5 {
  left: 70%;
  height: 60px;
  bottom: -12px;
  background-color: #cc60b5;
}
.music-page .right .cnt .player .list .item .player-btn.active.playing .line {
  -webkit-animation: equalize 4s 0s infinite;
          animation: equalize 4s 0s infinite;
  -webkit-animation-timing-function: linear;
          animation-timing-function: linear;
}
.music-page .right .cnt .player .list .item .player-btn.active.playing .line1 {
  -webkit-animation-delay: -1.9s;
          animation-delay: -1.9s;
}
.music-page .right .cnt .player .list .item .player-btn.active.playing .line2 {
  -webkit-animation-delay: -2.9s;
          animation-delay: -2.9s;
}
.music-page .right .cnt .player .list .item .player-btn.active.playing .line3 {
  -webkit-animation-delay: -3.9s;
          animation-delay: -3.9s;
}
.music-page .right .cnt .player .list .item .player-btn.active.playing .line4 {
  -webkit-animation-delay: -4.9s;
          animation-delay: -4.9s;
}
.music-page .right .cnt .player .list .item .player-btn.active.playing .line5 {
  -webkit-animation-delay: -5.9s;
          animation-delay: -5.9s;
}
@-webkit-keyframes equalize {
  0% {
    height: 16px;
  }
  4% {
    height: 14px;
  }
  8% {
    height: 13.33333333px;
  }
  12% {
    height: 10px;
  }
  16% {
    height: 6.66666667px;
  }
  20% {
    height: 10px;
  }
  24% {
    height: 13.33333333px;
  }
  28% {
    height: 3.33333333px;
  }
  32% {
    height: 13.33333333px;
  }
  36% {
    height: 16px;
  }
  40% {
    height: 6.66666667px;
  }
  44% {
    height: 13.33333333px;
  }
  48% {
    height: 16px;
  }
  52% {
    height: 10px;
  }
  56% {
    height: 3.33333333px;
  }
  60% {
    height: 10px;
  }
  64% {
    height: 16px;
  }
  68% {
    height: 10px;
  }
  72% {
    height: 16px;
  }
  76% {
    height: 6.66666667px;
  }
  80% {
    height: 16px;
  }
  84% {
    height: 12.66666667px;
  }
  88% {
    height: 16px;
  }
  92% {
    height: 6.66666667px;
  }
  96% {
    height: 16px;
  }
  100% {
    height: 16px;
  }
}
@keyframes equalize {
  0% {
    height: 16px;
  }
  4% {
    height: 14px;
  }
  8% {
    height: 13.33333333px;
  }
  12% {
    height: 10px;
  }
  16% {
    height: 6.66666667px;
  }
  20% {
    height: 10px;
  }
  24% {
    height: 13.33333333px;
  }
  28% {
    height: 3.33333333px;
  }
  32% {
    height: 13.33333333px;
  }
  36% {
    height: 16px;
  }
  40% {
    height: 6.66666667px;
  }
  44% {
    height: 13.33333333px;
  }
  48% {
    height: 16px;
  }
  52% {
    height: 10px;
  }
  56% {
    height: 3.33333333px;
  }
  60% {
    height: 10px;
  }
  64% {
    height: 16px;
  }
  68% {
    height: 10px;
  }
  72% {
    height: 16px;
  }
  76% {
    height: 6.66666667px;
  }
  80% {
    height: 16px;
  }
  84% {
    height: 12.66666667px;
  }
  88% {
    height: 16px;
  }
  92% {
    height: 6.66666667px;
  }
  96% {
    height: 16px;
  }
  100% {
    height: 16px;
  }
}
.music-page .right .cnt .player .list .item .name {
  width: 166px;
  display: inline-block;
  vertical-align: middle;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.music-page .right .cnt .player .list .item .type {
  width: 124px;
  display: inline-block;
  vertical-align: middle;
}
.music-page .right .cnt .player .list .item .download {
  display: inline-block;
  vertical-align: middle;
  width: 18px;
  height: 18px;
  background: url(https://qn.res.netease.com/pc/zt/20200911175236/img/sprite-dd5db3_dd5db3d9.png) no-repeat;background-size:915px 786px;
background-position:-812px -93px;

  margin-right: 30px;
}
.music-page .right .cnt .player .list .item .time {
  display: inline-block;
  vertical-align: middle;
}
.music-page .right .cnt .change-btn {
  position: absolute;
  font-size: 36px;
  cursor: pointer;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  color: #f9e9a9;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  padding: 0 140px;
  text-align: center;
  line-height: 42px;
  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;
}
.music-page .right .cnt .change-btn-1 {
  width: 338px;
  height: 563px;
  background: url(https://qn.res.netease.com/pc/zt/20200911175236/img/btn-1_77ba51d6.png) no-repeat;
  top: 62px;
  right: 345px;
}
.music-page .right .cnt .change-btn-2 {
  width: 338px;
  height: 563px;
  background: url(https://qn.res.netease.com/pc/zt/20200911175236/img/btn-1_77ba51d6.png) no-repeat;
  top: 62px;
  left: 345px;
}
.pop-wallpaper {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: 999;
}
.pop-wallpaper .mask {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
}
.pop-wallpaper .pop-cnt {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
}
.pop-wallpaper .pop-cnt img {
  max-width: 90vw;
  max-height: 90vh;
}
.pop-wallpaper .pop-cnt .wallpaper-list {
  font-size: 18px;
  color: #afbae2;
}
.pop-wallpaper .pop-cnt .wallpaper-list a {
  color: #afbae2;
  margin-right: 20px;
}
.pop-wallpaper .pop-cnt .wallpaper-list a:hover {
  text-decoration: underline;
}
.pop-wallpaper .pop-cnt .close {
  display: block;
  color: #fff;
  width: 50px;
  height: 50px;
  transition: all 0.3s;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -ms-transition: all 0.3s;
  -o-transition: all 0.3s;
  position: absolute;
  top: 0;
  right: -60px;
}
.pop-wallpaper .pop-cnt .close:hover {
  transform: rotate(180deg);
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  -o-transform: rotate(180deg);
}
.pop-wallpaper .pop-cnt .close::before {
  display: block;
  content: '';
  border: 1px solid #fff;
  width: 40px;
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -20px;
}
.pop-wallpaper .pop-cnt .close::after {
  display: block;
  content: '';
  border: 1px solid #fff;
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  width: 40px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -20px;
}
body {
  color: red;
}
#wrap {
  position: relative;
}
#art {
  text-align: center;
}
#leihuo_top {
  position: relative;
  z-index: 9;
}
#leihuo_top #logo {
  display: block;
  width: 223px;
  height: 58px;
  background: url(https://qn.res.netease.com/pc/zt/20200911175236/img/sprite-dd5db3_dd5db3d9.png) no-repeat;background-size:915px 786px;
background-position:-234px -231px;

  text-indent: -9999px;
  position: absolute;
  top: 27px;
  left: 27px;
}
#leihuo_top #leihuo_top_content {
  position: absolute;
  right: 29px;
  top: 27px;
  width: 200px;
}
#leihuo_top.home #logo {
  left: 50%;
  margin-left: -111.5px;
}
#leihuo_top.home #leihuo_top_content.pc > a {
  color: #9ba2da !important;
}
#leihuo_top.home #leihuo_top_content.pc > a .border {
  color: #9ba2da !important;
}
#leihuo_top.home #leihuo_top_content.pc > a:hover {
  color: #c4caf5 !important;
}
#leihuo_top.home #leihuo_top_content.pc > a:hover .border {
  color: #c4caf5 !important;
}
#leihuo_top.home #leihuo_top_content.pc > a .iconfont {
  color: #9ba2da !important;
}
#leihuo_top.home #leihuo_top_content.pc > a .iconfont:hover {
  color: #c4caf5 !important;
}
.footer {
  background: rgba(255, 255, 255, 0.6);
}
.global-nav {
  position: absolute;
  width: 240px;
  top: 37px;
  right: 300px;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
.global-nav .nav-link {
  width: 30px;
  position: relative;
  color: #cfd8fc;
  text-align: center;
  line-height: 20px;
  display: block;
}
.global-nav .nav-link::before {
  display: inline-block;
  content: '';
  width: 4px;
  height: 4px;
  position: absolute;
  border: 1px solid #bdc7f3;
  border-radius: 50%;
  left: 13px;
  top: -10px;
}
.global-nav .nav-link span {
  position: relative;
}
.global-nav .nav-link.active span,
.global-nav .nav-link:hover span {
  color: #fff5bd;
}
.global-nav .nav-link.active::before,
.global-nav .nav-link:hover::before {
  display: block;
  content: '';
  width: 61px;
  height: 132px;
  border-radius: 0;
  border: none;
  background: url(https://qn.res.netease.com/pc/zt/20200911175236/img/sprite-dd5db3_dd5db3d9.png) no-repeat;background-size:915px 786px;
background-position:-0px -654px;

  position: absolute;
  top: -20px;
  left: -6px;
}
.leihuo-img-pop .swiper-pagination,
.leihuo-img-pop .swiper-button-prev,
.leihuo-img-pop .swiper-button-next {
  display: none;
}
.anim-cnt {
  width: 100%;
  height: 100vh;
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
}
.anim-cnt .anim {
  width: 1920px;
  height: 1080px;
  position: absolute;
  background: url(https://qn.res.netease.com/pc/zt/20200911175236/img/anim_41019052.png) no-repeat;
  -webkit-animation: public-anim 2s steps(20) infinite 300ms 0 ease;
  -moz-animation: public-anim 2s steps(20) infinite 300ms 0 ease;
  -ms-animation: public-anim 2s steps(20) infinite 300ms 0 ease;
  animation: public-anim 2s steps(20) infinite 300ms 0 ease;
  -o-animation: public-anim 2s steps(20) infinite;
  -webkit-animation: public-anim 2s steps(20) infinite;
  -moz-animation: public-anim 2s steps(20) infinite;
  -ms-animation: public-anim 2s steps(20) infinite;
  animation: public-anim 2s steps(20) infinite;
}
@-webkit-keyframes public-anim {
  100% {
    background-position: 0 -21600px;
  }
}
@-moz-keyframes public-anim {
  100% {
    background-position: 0 -21600px;
  }
}
@-ms-keyframes public-anim {
  100% {
    background-position: 0 -21600px;
  }
}
@-o-keyframes public-anim {
  100% {
    background-position: 0 -21600px;
  }
}
@keyframes public-anim {
  100% {
    background-position: 0 -21600px;
  }
}
@-webkit-keyframes public-anim {
  100% {
    background-position: 0 -21600px;
  }
}
@-moz-keyframes public-anim {
  100% {
    background-position: 0 -21600px;
  }
}
@-ms-keyframes public-anim {
  100% {
    background-position: 0 -21600px;
  }
}
@-o-keyframes public-anim {
  100% {
    background-position: 0 -21600px;
  }
}
@keyframes public-anim {
  100% {
    background-position: 0 -21600px;
  }
}