.card_border {
  overflow: hidden;
  pointer-events: none;
  position: absolute;
  width: calc(100% - 30px);
  height: calc(100% - 10px);
  top: 4px;
  left: 4px;
  z-index: 1;
  opacity: 1;
}
.card_border.fadeout {
  opacity: 0;
}
.card_border.fadeout .border_top,
.card_border.fadeout .border_left,
.card_border.fadeout .border_bottom,
.card_border.fadeout .border_right {
  -webkit-transition: none;
  transition: none;
}
.card_border.animate .border_top,
.card_border.animate .border_left,
.card_border.animate .border_bottom,
.card_border.animate .border_right,
.card_border.animate .border_left:after {
  -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
}
.card_border.animate .border_left:before {
  height: 30px;
}
.no-webp .card_border .border {background:#c3c5e5}
.webp .card_border .border {background:#c3c5e5}
.card_border .border {
  -webkit-transition: -webkit-transform 0.15s linear;
  transition: -webkit-transform 0.15s linear;
  transition: transform 0.15s linear;
  transition: transform 0.15s linear, -webkit-transform 0.15s linear;
}
.no-webp .card_border .border:before, 
.no-webp .card_border .border:after {background:#c3c5e5}
.webp .card_border .border:before, 
.webp .card_border .border:after {background:#c3c5e5}
.card_border .border:before,
.card_border .border:after {
  -webkit-transition: all 0.05s linear;
  transition: all 0.05s linear;
}
.card_border .border_top,
.card_border .border_bottom {
  position: absolute;
  width: 100%;
  height: 2px;
  left: 0;
}
.card_border .border_left,
.card_border .border_right {
  position: absolute;
  height: 100%;
  width: 2px;
  top: 0;
}
.card_border .border_top {
  top: 0;
  -webkit-transform: translate3d(-100%, 0, 0);
          transform: translate3d(-100%, 0, 0);
  -webkit-transition-delay: 0.05s;
          transition-delay: 0.05s;
}
.card_border .border_left {
  left: 0;
}
.no-webp .card_border .border_left {background:none}
.webp .card_border .border_left {background:none}
.card_border .border_left {
  left: 0;
}
.card_border .border_left:before {
  content: '';
  width: 2px;
  height: 0;
  position: absolute;
  left: 0;
  bottom: 89px;
  -webkit-transition-delay: 0s;
          transition-delay: 0s;
}
.card_border .border_left:after {
  content: '';
  width: 2px;
  height: 30px;
  position: absolute;
  left: 0;
  bottom: 0;
  -webkit-transform: translate3d(0, 100%, 0);
          transform: translate3d(0, 100%, 0);
  -webkit-transition-delay: 0.5s;
          transition-delay: 0.5s;
}
.card_border .border_bottom {
  bottom: 0;
  -webkit-transform: translate3d(100%, 0, 0);
          transform: translate3d(100%, 0, 0);
  -webkit-transition-delay: 0.35s;
          transition-delay: 0.35s;
}
.card_border .border_right {
  right: 0;
  -webkit-transform: translate3d(0, -100%, 0);
          transform: translate3d(0, -100%, 0);
  -webkit-transition-delay: 0.2s;
          transition-delay: 0.2s;
}
.wanfa {
  width: 836px;
  height: 280px;
  margin-left: 120px;
}
.wanfa > div {
  float: left;
  width: 255px;
  height: 129px;
  margin-right: 30px;
  margin-bottom: 15px;
}
.wanfa > div:nth-of-type(3n+3) {
  margin-right: 0;
}
.no-webp .wanfa .wanfa-title {background:url(https://qn.res.netease.com/pc/gw/20200824105157/img/title_wanfa_65893d12.png) no-repeat}
.webp .wanfa .wanfa-title {background:url(https://qn.res.netease.com/pc/gw/20200824105157/img/title_wanfa_65893d12.webp) no-repeat}
.wanfa .wanfa-title {
  position: relative;
  left: -25px;
}
.no-webp .wanfa .list {background:url(https://qn.res.netease.com/pc/gw/20200824105157/img/bg_card_8e04c0e3.png) no-repeat}
.webp .wanfa .list {background:url(https://qn.res.netease.com/pc/gw/20200824105157/img/bg_card_8e04c0e3.webp) no-repeat}
.wanfa .list {
  position: relative;
}
.wanfa .list a {
  display: block;
  width: 100%;
  height: 100%;
}
.wanfa .list .name {
  position: relative;
  z-index: 2;
  left: -30px;
  top: 40px;
  color: #3d3d57;
  font-size: 18px;
  line-height: 1.5;
}
.wanfa .list .name.active strong {
  -webkit-transform: translateX(10px);
          transform: translateX(10px);
}
.no-webp .wanfa .list .name.active i {background:url(https://qn.res.netease.com/pc/gw/20200824105157/img/arrow2_7afa2a96.png) no-repeat}
.webp .wanfa .list .name.active i {background:url(https://qn.res.netease.com/pc/gw/20200824105157/img/arrow2_7afa2a96.webp) no-repeat}
.wanfa .list .name.active i {
}
.wanfa .list .name strong {
  display: block;
  -webkit-transition: all 0.5s ease;
  transition: all 0.5s ease;
}
.no-webp .wanfa .list .name i {background:url(https://qn.res.netease.com/pc/gw/20200824105157/img/arrow_b6e7d71e.png) no-repeat}
.webp .wanfa .list .name i {background:url(https://qn.res.netease.com/pc/gw/20200824105157/img/arrow_b6e7d71e.webp) no-repeat}
.wanfa .list .name i {
  display: inline-block;
  width: 18px;
  height: 18px;
  position: relative;
  margin-left: 3px;
  top: 2px;
}
.wanfa .list .name p {
  color: #888baf;
  font-size: 14px;
}
.wanfa .list .avatar {
  width: 66px;
  height: 66px;
  position: absolute;
  right: 50px;
  top: 50%;
  margin-top: -33px;
  border: 1px dashed #8489b9;
  border-radius: 50%;
}
.no-webp .wanfa .list1 .avatar {background:url(https://qn.res.netease.com/pc/gw/20200824105157/img/p1_cd47d396.png) no-repeat center center}
.webp .wanfa .list1 .avatar {background:url(https://qn.res.netease.com/pc/gw/20200824105157/img/p1_cd47d396.webp) no-repeat center center}
.wanfa .list1 .avatar {
}
.no-webp .wanfa .list2 .avatar {background:url(https://qn.res.netease.com/pc/gw/20200824105157/img/p2_e2b3ac6f.png) no-repeat center center}
.webp .wanfa .list2 .avatar {background:url(https://qn.res.netease.com/pc/gw/20200824105157/img/p2_e2b3ac6f.webp) no-repeat center center}
.wanfa .list2 .avatar {
}
.no-webp .wanfa .list3 .avatar {background:url(https://qn.res.netease.com/pc/gw/20200824105157/img/p3_acdf4739.png) no-repeat center center}
.webp .wanfa .list3 .avatar {background:url(https://qn.res.netease.com/pc/gw/20200824105157/img/p3_acdf4739.webp) no-repeat center center}
.wanfa .list3 .avatar {
}
.no-webp .wanfa .list4 .avatar {background:url(https://qn.res.netease.com/pc/gw/20200824105157/img/p4_b8f9582c.png) no-repeat center center}
.webp .wanfa .list4 .avatar {background:url(https://qn.res.netease.com/pc/gw/20200824105157/img/p4_b8f9582c.webp) no-repeat center center}
.wanfa .list4 .avatar {
}
.no-webp .wanfa .list5 .avatar {background:url(https://qn.res.netease.com/pc/gw/20200824105157/img/p5_6cdee3c7.png) no-repeat center center}
.webp .wanfa .list5 .avatar {background:url(https://qn.res.netease.com/pc/gw/20200824105157/img/p5_6cdee3c7.webp) no-repeat center center}
.wanfa .list5 .avatar {
}