@charset "utf-8";
blockquote,
body,
button,
caption,
dd,
div,
dl,
dt,
fieldset,
figure,
form,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
html,
input,
legend,
li,
menu,
ol,
p,
pre,
table,
td,
textarea,
th,
ul {
    margin: 0;
    padding: 0
}

body {
    padding: 0;
    margin: 0;
    background: #000
}

abbr,
body,
fieldset,
html,
iframe,
img {
    border: 0
}

li {
    list-style: none
}

textarea {
    overflow: auto;
    resize: none
}

input {
    outline: 0
}

a,
button {
    cursor: pointer
}

b,
em,
h1,
h2,
h3,
h4,
h5,
h6,
strong {
    font-weight: 700
}

a,
a:hover {
    text-decoration: none
}

body,
button,
input,
textarea {
    color: #62a1c9
}

body,
html {
    width: 100%;
    min-height: 930px;
    height: auto;
    font-family: "Microsoft YaHei", "Helvetica Neue", Arial, HelveticaNeue, Helvetica, "BBAlpha Sans", sans-serif;
    background: #fff
}

#NIE-topBar {
    width: 100%;
    min-width: 1420px!important;
    height: 55px;
    z-index: 997!important
}

#NIE-topBar #NIE-topBar-main {
    z-index: 997!important
}

#NIE-copyRight {
    width: 100%;
    min-width: 1420px;
    background: #000
}

#NIE-copyRight a,
#NIE-copyRight p,
#NIE-copyRight span {
    color: #fff
}

#NIE-copyRight #ncp-l3 {
    display: inline-block
}

.hide {
    display: none
}

.zzc {
    -webkit-transition: all .5s;
    -moz-transition: all .5s;
    -ms-transition: all .5s;
    -o-transition: all .5s;
    transition: all .5s;
    position: fixed;
    _position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #000;
    -webkit-opacity: 0;
    -moz-opacity: 0;
    opacity: 0;
    filter: alpha(opacity=0);
    z-index: -1
}

video {
    position: absolute;
    left: 50%;
    top: 0px;
    transform: translate(-50%);
    object-fit: contain;
    overflow: hidden;
}

.zzc.on {
    -webkit-opacity: .8;
    -moz-opacity: .8;
    opacity: .8;
    filter: alpha(opacity=80);
    z-index: 9998
}

@-webkit-keyframes hx-show2 {
    0% {
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        -ms-transform: scale(1);
        -o-transform: scale(1);
        transform: scale(1)
    }
    50% {
        -webkit-transform: scale(0.6);
        -moz-transform: scale(0.6);
        -ms-transform: scale(0.6);
        -o-transform: scale(0.6);
        transform: scale(0.6)
    }
    100% {
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        -ms-transform: scale(1);
        -o-transform: scale(1);
        transform: scale(1)
    }
}

@-moz-keyframes hx-show2 {
    0% {
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        -ms-transform: scale(1);
        -o-transform: scale(1);
        transform: scale(1)
    }
    50% {
        -webkit-transform: scale(0.6);
        -moz-transform: scale(0.6);
        -ms-transform: scale(0.6);
        -o-transform: scale(0.6);
        transform: scale(0.6)
    }
    100% {
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        -ms-transform: scale(1);
        -o-transform: scale(1);
        transform: scale(1)
    }
}

@-ms-keyframes hx-show2 {
    0% {
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        -ms-transform: scale(1);
        -o-transform: scale(1);
        transform: scale(1)
    }
    50% {
        -webkit-transform: scale(0.6);
        -moz-transform: scale(0.6);
        -ms-transform: scale(0.6);
        -o-transform: scale(0.6);
        transform: scale(0.6)
    }
    100% {
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        -ms-transform: scale(1);
        -o-transform: scale(1);
        transform: scale(1)
    }
}

@-o-keyframes hx-show2 {
    0% {
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        -ms-transform: scale(1);
        -o-transform: scale(1);
        transform: scale(1)
    }
    50% {
        -webkit-transform: scale(0.6);
        -moz-transform: scale(0.6);
        -ms-transform: scale(0.6);
        -o-transform: scale(0.6);
        transform: scale(0.6)
    }
    100% {
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        -ms-transform: scale(1);
        -o-transform: scale(1);
        transform: scale(1)
    }
}

@keyframes hx-show2 {
    0% {
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        -ms-transform: scale(1);
        -o-transform: scale(1);
        transform: scale(1)
    }
    50% {
        -webkit-transform: scale(0.6);
        -moz-transform: scale(0.6);
        -ms-transform: scale(0.6);
        -o-transform: scale(0.6);
        transform: scale(0.6)
    }
    100% {
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        -ms-transform: scale(1);
        -o-transform: scale(1);
        transform: scale(1)
    }
}

.cont-all {
    position: fixed;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: -100;
    visibility: hidden;
    -webkit-transition: .3s;
    -moz-transition: .3s;
    -ms-transition: .3s;
    -o-transition: .3s;
    transition: .3s
}

.cont-all.on {
    -webkit-transition: .3s;
    -moz-transition: .3s;
    -ms-transition: .3s;
    -o-transition: .3s;
    transition: .3s;
    z-index: 200;
    visibility: visible
}

.cont-all .cont-bg {
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0);
    -webkit-transition: .3s;
    -moz-transition: .3s;
    -ms-transition: .3s;
    -o-transition: .3s;
    transition: .3s
}

.cont-all .cont-bg.on {
    -webkit-transition: .5s;
    -moz-transition: .5s;
    -ms-transition: .5s;
    -o-transition: .5s;
    transition: .5s;
    background: rgba(0, 0, 0, .7)
}


/* .cont-all .cont-bg .alert-close {
    position: absolute;
    width: 39px;
    height: 39px;
    top: 50%;
    left: 50%;
    margin-left: 420px;
    margin-top: -226px;
    background: url(../images/btn-close_e16a645.png) center no-repeat;
    -webkit-transition: .3s;
    -moz-transition: .3s;
    -ms-transition: .3s;
    -o-transition: .3s;
    transition: .3s
} */

.cont-all .cont-bg .alert-close:hover {
    -webkit-transition: .5s;
    -moz-transition: .5s;
    -ms-transition: .5s;
    -o-transition: .5s;
    transition: .5s;
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transform: rotate(180deg)
}

.cont-all .cont-bg .video-all {
    position: absolute;
    width: 800px;
    height: 450px;
    left: 50%;
    top: 50%;
    margin-left: -400px;
    -webkit-transform: translate(0, -50%);
    -moz-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    -o-transform: translate(0, -50%);
    transform: translate(0, -50%)
}

.cont-all .cont-bg .video-all .video-show {
    width: 100%;
    height: auto
}

.cont-all .cont-bg .pop-all {
    position: absolute;
    width: 800px;
    height: 450px;
    left: 50%;
    top: 50%
}

.cont-all .cont-bg .pop-all .alert-close {
    top: 20px;
    left: auto;
    right: -50px;
    margin: 0
}

.cont-all .cont-bg .pop-all.bigImg {
    width: 1197px;
    height: 685px;
    margin: -342.5px 0 0 -598.5px
}

.cont-all .cont-bg .pop-all.bigImg i {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;
    background: url(../images/pop-img-cont_3ec8139.png) center no-repeat
}

.cont-all .cont-bg .pop-all.bigImg img {
    width: 1170px;
    height: 660px;
    margin: 14px auto 0
}

.cont-all .cont-bg .pop-all.coming {
    width: 598px;
    height: 344px;
    margin: -172px 0 0 -299px;
    background: url(../images/pop-coming_3316c52.png) center no-repeat
}

.cont-all .cont-bg .pop-all.coming .alert-close {
    top: 10px
}

.cont-all .cont-bg .pop-all.coming .pop-btn-confirm {
    width: 223px;
    height: 80px;
    display: block;
    margin: 220px auto 0;
    background: url(../images/pop-btn-qr_e947dbe.png) center no-repeat
}

.cont-all .cont-bg .pop-all.pop_pc_down,
.cont-all .cont-bg .pop-all.pop_ios_down {
    width: 600px;
    height: 330px;
    margin: -165px 0 0 -300px
}

.cont-all .cont-bg .pop-all.pop_pc_down .alert-close,
.cont-all .cont-bg .pop-all.pop_ios_down .alert-close {
    top: 10px
}

.show-SF302-btns #NIE-SF302 {
    height: 22px;
    text-align: center;
    margin: 4px 0 0 20px
}

.show-SF302-btns #NIE-SF302 .NIE-SF302-more {
    top: 35px;
    right: 20px
}

.show-SF302-btns #NIE-SF302 .NIE-SF302-txt {
    height: 22px;
    line-height: 22px;
    font-size: 12px;
    color: #fff;
    margin-right: 6px;
    font-family: auto;
    display: none
}

.show-SF302-btns #NIE-SF302 .NIE-SF302-iconBtn a {
    width: auto;
    padding-right: 4px;
    margin-right: 0;
    line-height: 22px;
    font-size: 22px;
    color: #fff
}

.show-SF302-btns #NIE-SF302 .NIE-SF302-iconBtn a span {
    height: 22px;
    line-height: 22px;
    font-size: 22px
}

.show-SF302-btns #NIE-SF302 .NIE-SF302-iconBtn a:hover {
    color: #fff664
}

.show-SF302-btns #NIE-SF302 .NIE-SF302-iconBtn a em {
    font-size: 12px;
    height: 22px;
    line-height: 22px;
    margin-left: 5px
}

.show-SF302-btns.news #NIE-SF302 {
    height: 22px;
    text-align: center;
    margin: 4px 0 0 20px
}

.show-SF302-btns.news #NIE-SF302 .NIE-SF302-more {
    top: 35px;
    right: 20px
}

.show-SF302-btns.news #NIE-SF302 .NIE-SF302-txt {
    height: 22px;
    line-height: 22px;
    font-size: 12px;
    color: #7b7b7b;
    margin-right: 6px;
    font-family: auto;
    display: none
}

.show-SF302-btns.news #NIE-SF302 .NIE-SF302-iconBtn a {
    width: auto;
    padding-right: 4px;
    margin-right: 0;
    line-height: 22px;
    font-size: 22px;
    color: #7b7b7b
}

.show-SF302-btns.news #NIE-SF302 .NIE-SF302-iconBtn a span {
    height: 22px;
    line-height: 22px;
    font-size: 22px
}

.show-SF302-btns.news #NIE-SF302 .NIE-SF302-iconBtn a:hover {
    color: #3b3b3b
}

.show-SF302-btns.news #NIE-SF302 .NIE-SF302-iconBtn a em {
    font-size: 12px;
    height: 22px;
    line-height: 22px;
    margin-left: 5px
}

body,
html {
    font-family: "microsoft yahei"
}

@media screen and (max-width:1900px) {
    .swiper-box {
        -webkit-transform: scale(0.8);
        -moz-transform: scale(0.8);
        -ms-transform: scale(0.8);
        -o-transform: scale(0.8);
        transform: scale(0.8);
        -webkit-transform-origin: center top;
        -moz-transform-origin: center top;
        -ms-transform-origin: center top;
        -o-transform-origin: center top;
        transform-origin: center top
    }
}

@media screen and (max-width:1500px) {
    .swiper-box {
        margin-left: -50px
    }
    .p1 .left {
        margin-left: -30px
    }
    .p1 .right {
        margin-left: -50px
    }
}

.dg.ac {
    display: none
}

.wrap {
    overflow: hidden;
    max-width: 1920px;
    min-width: 1420px;
    margin: 0 auto;
    position: relative
}

.wrap a:focus {
    outline: 0
}

.wrap .kv {
    width: 100%;
    height: 999px;
    background: url(../images/bg_01.jpg) center top no-repeat;
    padding-top: 1px;
    box-sizing: border-box;
    position: relative
}

.wrap .kv .stage {
    position: fixed;
    left: 0;
    top: 0
}

.wrap .kv .gw.on {
    background: 0 0
}

.wrap .kv .gw:hover {
    filter: brightness(105%)
}

.wrap .kv .slogan .v-btn {
    position: absolute;
    right: 0;
    top: 0;
    width: 135px;
    height: 135px
}

.wrap .kv .slogan .v-btn .videobtn-box {
    width: 138px;
    height: 138px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-top: -67.5px;
    margin-left: -67.5px
}

@-webkit-keyframes video-rotate {
    0% {
        -webkit-transform: rotate(0);
        -moz-transform: rotate(0);
        -ms-transform: rotate(0);
        -o-transform: rotate(0);
        transform: rotate(0)
    }
    100% {
        -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg)
    }
}

@-moz-keyframes video-rotate {
    0% {
        -webkit-transform: rotate(0);
        -moz-transform: rotate(0);
        -ms-transform: rotate(0);
        -o-transform: rotate(0);
        transform: rotate(0)
    }
    100% {
        -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg)
    }
}

@-ms-keyframes video-rotate {
    0% {
        -webkit-transform: rotate(0);
        -moz-transform: rotate(0);
        -ms-transform: rotate(0);
        -o-transform: rotate(0);
        transform: rotate(0)
    }
    100% {
        -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg)
    }
}

@-o-keyframes video-rotate {
    0% {
        -webkit-transform: rotate(0);
        -moz-transform: rotate(0);
        -ms-transform: rotate(0);
        -o-transform: rotate(0);
        transform: rotate(0)
    }
    100% {
        -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg)
    }
}

@keyframes video-rotate {
    0% {
        -webkit-transform: rotate(0);
        -moz-transform: rotate(0);
        -ms-transform: rotate(0);
        -o-transform: rotate(0);
        transform: rotate(0)
    }
    100% {
        -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg)
    }
}

.wrap .kv .slogan .v-btn .videobtn-box .video-btn {
    position: absolute;
    display: block;
    z-index: 3;
    left: 50%;
    top: 50%;
    width: 85px;
    height: 85px;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%)
}

.wrap .kv .download-box {
    width: 1126px;
    height: 196px;
    background: url(../images/download_bg_06933b1.png) no-repeat;
    position: absolute;
    top: 840px;
    left: 50%;
    margin-left: -640px;
    z-index: 4
}

.wrap .kv .download-box .friend {
    width: 184px;
    height: 129px;
    background: url(../images/friend_5313f75.png) no-repeat;
    background-size: 100%;
    position: absolute;
    top: 30px;
    left: 105px
}

.wrap .kv .download-box .friend:hover {
    width: 184px;
    height: 129px;
    background: url(../images/friend_5313f7501.png) no-repeat;
    background-size: 100%;
    position: absolute;
    top: 30px;
    left: 105px
}

.wrap .kv .download-box .frienddown {
    width: 184px;
    height: 129px;
    background: url(../images/friend_5313f751.png) no-repeat;
    background-size: 100%;
    position: absolute;
    top: 30px;
    left: 345px
}

.wrap .kv .download-box .frienddown:hover {
    width: 184px;
    height: 129px;
    background: url(../images/friend_5313f75101.png) no-repeat;
    background-size: 100%;
    position: absolute;
    top: 30px;
    left: 345px
}

.wrap .kv .download-box .friendsc {
    width: 184px;
    height: 129px;
    background: url(../images/friend_5313f752.png) no-repeat;
    background-size: 100%;
    position: absolute;
    top: 30px;
    left: 590px
}

.wrap .kv .download-box .friendsc:hover {
    width: 184px;
    height: 129px;
    background: url(../images/friend_5313f75201.png) no-repeat;
    background-size: 100%;
    position: absolute;
    top: 30px;
    left: 590px
}

.wrap .kv .download-box .friendshow {
    width: 184px;
    height: 129px;
    background: url(../images/friend_5313f753.png) no-repeat;
    background-size: 100%;
    position: absolute;
    top: 30px;
    left: 835px
}

.wrap .kv .download-box .friendshow:hover {
    width: 184px;
    height: 129px;
    background: url(../images/friend_5313f75301.png) no-repeat;
    background-size: 100%;
    position: absolute;
    top: 30px;
    left: 835px
}

.wrap .kv .download-box .NIE-qrcode {
    position: absolute;
    left: 280px;
    top: 36px;
    width: 118px;
    height: 118px
}

.wrap .kv .download-box .NIE-qrcode img {
    width: 100%
}

.wrap .kv .download-box .download-btn {
    width: 403px;
    height: 130px;
    position: absolute;
    top: 36px;
    left: 455px
}

.wrap .kv .download-box .download-btn a {
    float: left;
    margin-right: 14px;
    margin-bottom: 10px
}

.wrap .kv .download-box .download-btn a:hover {
    -webkit-opacity: .8;
    -moz-opacity: .8;
    opacity: .8;
    filter: alpha(opacity=80)
}

.wrap .kv .page0-cl-all {
    position: absolute;
    height: 700px;
    right: 10px;
    top: 50%;
    margin-top: -360px;
    z-index: 30
}

.wrap .kv .page0-cl-all .cl-bot-icon {
    position: absolute;
    right: 0;
    bottom: -142px;
    width: 42px;
    height: 349px;
    background: url(../img/page0-right-bot-icon.png) center no-repeat
}

.wrap .kv .page0-cl-all .show-SF302-btns {
    position: absolute;
    width: 150px;
    height: 60px;
    top: 60px;
    right: 50px;
    z-index: -1;
    overflow: hidden
}

.wrap .kv .page0-cl-all .show-SF302-btns #NIE-SF302 {
    -webkit-transition: .4s;
    -moz-transition: .4s;
    -ms-transition: .4s;
    -o-transition: .4s;
    transition: .4s;
    -webkit-transform: translate(150px, 0);
    -moz-transform: translate(150px, 0);
    -ms-transform: translate(150px, 0);
    -o-transform: translate(150px, 0);
    transform: translate(150px, 0)
}

.wrap .kv .page0-cl-all .show-SF302-btns #NIE-SF302:hover {
    -webkit-transition: .4s;
    -moz-transition: .4s;
    -ms-transition: .4s;
    -o-transition: .4s;
    transition: .4s
}

.wrap .kv .page0-cl-all .show-SF302-btns.on #NIE-SF302 {
    -webkit-transform: translate(0, 0);
    -moz-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    -o-transform: translate(0, 0);
    transform: translate(0, 0)
}

.wrap .kv .page0-cl-all .p0-cl-btn {
    position: relative;
    width: 58px;
    height: 50px;
    display: block;
    margin: 20px 0 0;
    -webkit-transition: .4s;
    -moz-transition: .4s;
    -ms-transition: .4s;
    -o-transition: .4s;
    transition: .4s
}

.wrap .kv .page0-cl-all .p0-cl-btn:hover {
    -webkit-transition: .4s;
    -moz-transition: .4s;
    -ms-transition: .4s;
    -o-transition: .4s;
    transition: .4s
}

.wrap .kv .page0-cl-all .p0-cl-btn .qq_box {
    position: absolute;
    left: -200px;
    top: -80px;
    display: none;
    width: 205px;
    height: 513px;
    background: url(https://hsqsl.res.netease.com/pc/fab/20210728193411/img/qun-bg_a4e4815.png) center no-repeat
}

.wrap .kv .page0-cl-all .p0-cl-btn .qq_box ul {
    width: 180px;
    margin: 5px auto 0
}

.wrap .kv .page0-cl-all .p0-cl-btn .qq_box ul li {
    position: relative;
    font-size: 0;
    width: 1005;
    height: 84px
}

.wrap .kv .page0-cl-all .p0-cl-btn .qq_box ul p {
    font-size: 18px;
    color: #fff;
    line-height: 28px
}

.wrap .kv .page0-cl-all .p0-cl-btn .qq_box ul a {
    position: absolute;
    right: 20px;
    bottom: 10px;
    width: 55px;
    height: 32px;
    background: url(https://hsqsl.res.netease.com/pc/fab/20210728193411/img/iocn-jia_a7ed849.png) center no-repeat
}

.wrap .kv .page0-cl-all .p0-cl-btn .qq_box ul a.dis {
    background: url(../img/iocn-man.png) center no-repeat;
    cursor: default
}

.wrap .kv .page0-cl-all .p0-cl-btn .cl-ewm-cont {
    position: absolute;
    left: -200px;
    top: -70px;
    width: 205px;
    height: 181px;
    display: none;
    background: url(https://hsqsl.res.netease.com/pc/fab/20210728193411/img/ewm-bg_8e62b06.png) center no-repeat
}

.wrap .kv .page0-cl-all .p0-cl-btn .cl-ewm-cont img {
    width: 120px;
    margin: 16px 0 0 30px
}

.wrap .kv .page0-cl-all .p0-cl-btn .cl-ewm-cont p {
    color: #fff;
    width: 120px;
    margin: 10px 0 0 30px;
    text-align: center
}

.wrap .kv .page0-cl-all .p0-cl-btn.cl-SF302 {
    background: url(https://hsqsl.res.netease.com/pc/fab/20210728193411/img/icon_SF302_7d092ae.png) center no-repeat
}

.wrap .kv .page0-cl-all .p0-cl-btn.cl-SF302:hover {
    background: url(https://hsqsl.res.netease.com/pc/fab/20210728193411/img/icon_SF302_on_bedc694.png) center no-repeat
}

.wrap .kv .page0-cl-all .p0-cl-btn.qq {
    background: url(https://hsqsl.res.netease.com/pc/fab/20210728193411/img/icon_qq_fb54b9b.png) center no-repeat
}

.wrap .kv .page0-cl-all .p0-cl-btn.qq::before {
    content: "";
    position: relative;
    top: -10px;
    display: block;
    width: 40px;
    margin: 0 auto;
    height: 2px;
    background: #d9d1ce
}

.wrap .kv .page0-cl-all .p0-cl-btn.qq:hover {
    background: url(https://hsqsl.res.netease.com/pc/fab/20210728193411/img/icon_qq_on_7727ad6.png) center no-repeat
}

.wrap .kv .page0-cl-all .p0-cl-btn.qq:hover .qq_box {
    display: block
}

.wrap .kv .page0-cl-all .p0-cl-btn.wx {
    background: url(https://hsqsl.res.netease.com/pc/fab/20210728193411/img/icon_wx_42fc3fd.png) center no-repeat
}

.wrap .kv .page0-cl-all .p0-cl-btn.wx:hover {
    background: url(https://hsqsl.res.netease.com/pc/fab/20210728193411/img/icon_wx_on_d7519c5.png) center no-repeat
}

.wrap .kv .page0-cl-all .p0-cl-btn.wx:hover .cl-ewm-cont {
    display: block
}

.wrap .kv .page0-cl-all .p0-cl-btn.wb {
    background: url(https://hsqsl.res.netease.com/pc/fab/20210728193411/img/icon_wb_fc0e681.png) center no-repeat
}

.wrap .kv .page0-cl-all .p0-cl-btn.wb:hover {
    background: url(https://hsqsl.res.netease.com/pc/fab/20210728193411/img/icon_wb_on_457ea32.png) center no-repeat
}

.wrap .kv .page0-cl-all .p0-cl-btn.wb:hover a {
    width: 100%;
    height: 100%;
    display: block
}

.wrap .kv .page0-cl-all .p0-cl-btn.tap {
    background: url(https://hsqsl.res.netease.com/pc/fab/20210728193411/img/icon_tap_d01984d.png) center no-repeat
}

.wrap .kv .page0-cl-all .p0-cl-btn.tap:hover {
    background: url(https://hsqsl.res.netease.com/pc/fab/20210728193411/img/icon_tap_on_1f5535a.png) center no-repeat
}

.wrap .p1 {
    width: 100%;
    height: 1059px;
    background: url(../images/bg_02.jpg) center top no-repeat;
    overflow: hidden;
    position: relative;
    z-index: 3
}

.wrap .p1 .main {
    width: 1519px;
    height: 773px;
    margin: 125px auto 0
}


/* 5 */

.w-1500 {
    position: relative;
    width: 1200px;
    left: 50%;
    margin-left: -195px;
    /* margin-top: 170px; */
}


/* 01 */

.pview-showtitle {
    width: 520px;
    height: 160px;
    position: relative;
    display: block;
    /* */
    margin-left: -63px;
    margin-top: -60px;
    background: url(../images/showtitle01.png)no-repeat center;
}

.pview {
    position: relative;
    display: block;
    width: 770px;
    height: 120px;
    margin-left: -120px;
    margin-top: -50px;
}

.pview .items {
    display: block;
    position: absolute;
}

.items a {
    display: block;
    float: left;
    width: 91px;
    height: 91px;
    background: url("../images/011.png") left top no-repeat;
    margin: 50px 20px;
    text-align: center;
    line-height: 91px;
    /* border-radius: 50px; */
}

.items a:hover {
    display: block;
    float: left;
    width: 91px;
    height: 91px;
    background: url("../images/012.png") left top no-repeat;
    margin: 50px 20px;
    text-align: center;
    line-height: 91px;
    /* border-radius: 50px; */
}

.pview .items a:nth-child(10n) {
    margin-right: 100px;
}

.items a img {
    display: inline-block;
    padding: 0px;
    border: 0px;
    vertical-align: middle;
    margin-top: -35px;
    margin-left: -28px;
}


/* 02 */

.pview1-showtitle {
    width: 520px;
    height: 160px;
    position: relative;
    display: block;
    /* */
    margin-left: -63px;
    margin-top: 2px;
    background: url(../images/showtitle02.png)no-repeat center;
}

.pview1 {
    position: relative;
    display: block;
    width: 1070px;
    height: 120px;
    margin-left: -310px;
    margin-top: -50px;
}

.pview1 .items1 {
    display: block;
    position: absolute;
}

.pview1 .items1 a {
    display: block;
    float: left;
    width: 91px;
    height: 91px;
    background: url("../images/011.png") left top no-repeat;
    margin: 50px 20px;
    text-align: center;
    line-height: 91px;
    /* border-radius: 50px; */
}

.pview1 .items1 a:nth-child(10n) {
    margin-right: 100px;
}

.pview1 .items1 a img {
    display: inline-block;
    padding: 0px;
    border: 0px;
    vertical-align: middle;
    margin-top: -35px;
    margin-left: -28px;
}


/* 03 */

.pview2-showtitle {
    width: 520px;
    height: 160px;
    position: relative;
    display: block;
    /* */
    margin-left: -63px;
    margin-top: 2px;
    background: url(../images/showtitle03.png)no-repeat center;
}

.pview2 {
    position: relative;
    display: block;
    width: 930px;
    height: 120px;
    margin-left: -180px;
    margin-top: -50px;
}

.pview2 .items2 {
    display: block;
    position: absolute;
}

.pview2 .items2 a {
    display: block;
    float: left;
    width: 91px;
    height: 91px;
    background: url("../images/011.png") left top no-repeat;
    margin: 50px 20px;
    text-align: center;
    line-height: 91px;
    /* border-radius: 50px; */
}

.pview2 .items2 a:nth-child(10n) {
    margin-right: 100px;
}

.pview2 .items2 a img {
    display: inline-block;
    padding: 0px;
    border: 0px;
    vertical-align: middle;
    margin-top: -35px;
    margin-left: -28px;
}


/* 04 */

.pview3-showtitle {
    width: 520px;
    height: 160px;
    position: relative;
    display: block;
    /* */
    margin-left: -63px;
    margin-top: 2px;
    background: url(../images/showtitle04.png)no-repeat center;
}

.pview3 {
    position: relative;
    display: block;
    width: 930px;
    height: 120px;
    margin-left: -246px;
    margin-top: -50px;
}

.pview3 .items3 {
    display: block;
    position: absolute;
}

.pview3 .items3 a {
    display: block;
    float: left;
    width: 91px;
    height: 91px;
    background: url("../images/011.png") left top no-repeat;
    margin: 50px 20px;
    text-align: center;
    line-height: 91px;
    /* border-radius: 50px; */
}

.pview3 .items3 a:nth-child(10n) {
    margin-right: 100px;
}

.pview3 .items3 a img {
    display: inline-block;
    padding: 0px;
    border: 0px;
    vertical-align: middle;
    margin-top: -35px;
    margin-left: -28px;
}

#preview {
    position: absolute;
    border: 1px solid rgb(97, 70, 53);
    background: rgb(60, 33, 22);
    padding: 5px;
    display: none;
    color: rgb(255, 255, 255);
}

.wrap .p2 {
    width: 100%;
    height: 1053px;
    background: url(../images/bg_03.jpg) center top no-repeat;
    position: relative;
    z-index: 3
}

.wrap .p2.showBefore .before .leftBox {
    -webkit-animation: act-move-l-in .5s ease-out forwards 300ms 0 ease;
    -moz-animation: act-move-l-in .5s ease-out forwards 300ms 0 ease;
    -ms-animation: act-move-l-in .5s ease-out forwards 300ms 0 ease;
    animation: act-move-l-in .5s ease-out forwards 300ms 0 ease;
    -moz-animation: act-move-l-in .5s ease-out forwards;
    -webkit-animation: act-move-l-in .5s ease-out forwards;
    -o-animation: act-move-l-in .5s ease-out forwards;
    -ms-animation: act-move-l-in .5s ease-out forwards;
    animation: act-move-l-in .5s ease-out forwards
}

@-webkit-keyframes act-move-l-in {
    0% {
        -webkit-transform: translate(-1000px, 0);
        -moz-transform: translate(-1000px, 0);
        -ms-transform: translate(-1000px, 0);
        -o-transform: translate(-1000px, 0);
        transform: translate(-1000px, 0);
        -webkit-opacity: 0;
        -moz-opacity: 0;
        opacity: 0;
        filter: alpha(opacity=0)
    }
    100% {
        -webkit-transform: translate(0, 0);
        -moz-transform: translate(0, 0);
        -ms-transform: translate(0, 0);
        -o-transform: translate(0, 0);
        transform: translate(0, 0);
        -webkit-opacity: 1;
        -moz-opacity: 1;
        opacity: 1;
        filter: alpha(opacity=100)
    }
}

@-moz-keyframes act-move-l-in {
    0% {
        -webkit-transform: translate(-1000px, 0);
        -moz-transform: translate(-1000px, 0);
        -ms-transform: translate(-1000px, 0);
        -o-transform: translate(-1000px, 0);
        transform: translate(-1000px, 0);
        -webkit-opacity: 0;
        -moz-opacity: 0;
        opacity: 0;
        filter: alpha(opacity=0)
    }
    100% {
        -webkit-transform: translate(0, 0);
        -moz-transform: translate(0, 0);
        -ms-transform: translate(0, 0);
        -o-transform: translate(0, 0);
        transform: translate(0, 0);
        -webkit-opacity: 1;
        -moz-opacity: 1;
        opacity: 1;
        filter: alpha(opacity=100)
    }
}

@-ms-keyframes act-move-l-in {
    0% {
        -webkit-transform: translate(-1000px, 0);
        -moz-transform: translate(-1000px, 0);
        -ms-transform: translate(-1000px, 0);
        -o-transform: translate(-1000px, 0);
        transform: translate(-1000px, 0);
        -webkit-opacity: 0;
        -moz-opacity: 0;
        opacity: 0;
        filter: alpha(opacity=0)
    }
    100% {
        -webkit-transform: translate(0, 0);
        -moz-transform: translate(0, 0);
        -ms-transform: translate(0, 0);
        -o-transform: translate(0, 0);
        transform: translate(0, 0);
        -webkit-opacity: 1;
        -moz-opacity: 1;
        opacity: 1;
        filter: alpha(opacity=100)
    }
}

@-o-keyframes act-move-l-in {
    0% {
        -webkit-transform: translate(-1000px, 0);
        -moz-transform: translate(-1000px, 0);
        -ms-transform: translate(-1000px, 0);
        -o-transform: translate(-1000px, 0);
        transform: translate(-1000px, 0);
        -webkit-opacity: 0;
        -moz-opacity: 0;
        opacity: 0;
        filter: alpha(opacity=0)
    }
    100% {
        -webkit-transform: translate(0, 0);
        -moz-transform: translate(0, 0);
        -ms-transform: translate(0, 0);
        -o-transform: translate(0, 0);
        transform: translate(0, 0);
        -webkit-opacity: 1;
        -moz-opacity: 1;
        opacity: 1;
        filter: alpha(opacity=100)
    }
}

@keyframes act-move-l-in {
    0% {
        -webkit-transform: translate(-1000px, 0);
        -moz-transform: translate(-1000px, 0);
        -ms-transform: translate(-1000px, 0);
        -o-transform: translate(-1000px, 0);
        transform: translate(-1000px, 0);
        -webkit-opacity: 0;
        -moz-opacity: 0;
        opacity: 0;
        filter: alpha(opacity=0)
    }
    100% {
        -webkit-transform: translate(0, 0);
        -moz-transform: translate(0, 0);
        -ms-transform: translate(0, 0);
        -o-transform: translate(0, 0);
        transform: translate(0, 0);
        -webkit-opacity: 1;
        -moz-opacity: 1;
        opacity: 1;
        filter: alpha(opacity=100)
    }
}

.wrap .p2.showBefore .before .rightBox {
    -webkit-animation: act-move-r-in .5s forwards 300ms 0 ease;
    -moz-animation: act-move-r-in .5s forwards 300ms 0 ease;
    -ms-animation: act-move-r-in .5s forwards 300ms 0 ease;
    animation: act-move-r-in .5s forwards 300ms 0 ease;
    -moz-animation: act-move-r-in .5s forwards;
    -webkit-animation: act-move-r-in .5s forwards;
    -o-animation: act-move-r-in .5s forwards;
    -ms-animation: act-move-r-in .5s forwards;
    animation: act-move-r-in .5s forwards
}

@-webkit-keyframes act-move-r-in {
    0% {
        -webkit-transform: translate(400px, 0);
        -moz-transform: translate(400px, 0);
        -ms-transform: translate(400px, 0);
        -o-transform: translate(400px, 0);
        transform: translate(400px, 0);
        -webkit-opacity: 0;
        -moz-opacity: 0;
        opacity: 0;
        filter: alpha(opacity=0)
    }
    100% {
        -webkit-transform: translate(0, 0);
        -moz-transform: translate(0, 0);
        -ms-transform: translate(0, 0);
        -o-transform: translate(0, 0);
        transform: translate(0, 0);
        -webkit-opacity: 1;
        -moz-opacity: 1;
        opacity: 1;
        filter: alpha(opacity=100)
    }
}

@-moz-keyframes act-move-r-in {
    0% {
        -webkit-transform: translate(400px, 0);
        -moz-transform: translate(400px, 0);
        -ms-transform: translate(400px, 0);
        -o-transform: translate(400px, 0);
        transform: translate(400px, 0);
        -webkit-opacity: 0;
        -moz-opacity: 0;
        opacity: 0;
        filter: alpha(opacity=0)
    }
    100% {
        -webkit-transform: translate(0, 0);
        -moz-transform: translate(0, 0);
        -ms-transform: translate(0, 0);
        -o-transform: translate(0, 0);
        transform: translate(0, 0);
        -webkit-opacity: 1;
        -moz-opacity: 1;
        opacity: 1;
        filter: alpha(opacity=100)
    }
}

@-ms-keyframes act-move-r-in {
    0% {
        -webkit-transform: translate(400px, 0);
        -moz-transform: translate(400px, 0);
        -ms-transform: translate(400px, 0);
        -o-transform: translate(400px, 0);
        transform: translate(400px, 0);
        -webkit-opacity: 0;
        -moz-opacity: 0;
        opacity: 0;
        filter: alpha(opacity=0)
    }
    100% {
        -webkit-transform: translate(0, 0);
        -moz-transform: translate(0, 0);
        -ms-transform: translate(0, 0);
        -o-transform: translate(0, 0);
        transform: translate(0, 0);
        -webkit-opacity: 1;
        -moz-opacity: 1;
        opacity: 1;
        filter: alpha(opacity=100)
    }
}

@-o-keyframes act-move-r-in {
    0% {
        -webkit-transform: translate(400px, 0);
        -moz-transform: translate(400px, 0);
        -ms-transform: translate(400px, 0);
        -o-transform: translate(400px, 0);
        transform: translate(400px, 0);
        -webkit-opacity: 0;
        -moz-opacity: 0;
        opacity: 0;
        filter: alpha(opacity=0)
    }
    100% {
        -webkit-transform: translate(0, 0);
        -moz-transform: translate(0, 0);
        -ms-transform: translate(0, 0);
        -o-transform: translate(0, 0);
        transform: translate(0, 0);
        -webkit-opacity: 1;
        -moz-opacity: 1;
        opacity: 1;
        filter: alpha(opacity=100)
    }
}

@keyframes act-move-r-in {
    0% {
        -webkit-transform: translate(400px, 0);
        -moz-transform: translate(400px, 0);
        -ms-transform: translate(400px, 0);
        -o-transform: translate(400px, 0);
        transform: translate(400px, 0);
        -webkit-opacity: 0;
        -moz-opacity: 0;
        opacity: 0;
        filter: alpha(opacity=0)
    }
    100% {
        -webkit-transform: translate(0, 0);
        -moz-transform: translate(0, 0);
        -ms-transform: translate(0, 0);
        -o-transform: translate(0, 0);
        transform: translate(0, 0);
        -webkit-opacity: 1;
        -moz-opacity: 1;
        opacity: 1;
        filter: alpha(opacity=100)
    }
}

.wrap .p2.showBefore .after {
    -webkit-animation: act-move-big-in .5s forwards 300ms 0 ease;
    -moz-animation: act-move-big-in .5s forwards 300ms 0 ease;
    -ms-animation: act-move-big-in .5s forwards 300ms 0 ease;
    animation: act-move-big-in .5s forwards 300ms 0 ease;
    -moz-animation: act-move-big-in .5s forwards;
    -webkit-animation: act-move-big-in .5s forwards;
    -o-animation: act-move-big-in .5s forwards;
    -ms-animation: act-move-big-in .5s forwards;
    animation: act-move-big-in .5s forwards
}

@-webkit-keyframes act-move-big-in {
    0% {
        -webkit-opacity: 0;
        -moz-opacity: 0;
        opacity: 0;
        filter: alpha(opacity=0);
        display: none
    }
    100% {
        -webkit-opacity: 1;
        -moz-opacity: 1;
        opacity: 1;
        filter: alpha(opacity=100);
        display: block
    }
}

@-moz-keyframes act-move-big-in {
    0% {
        -webkit-opacity: 0;
        -moz-opacity: 0;
        opacity: 0;
        filter: alpha(opacity=0);
        display: none
    }
    100% {
        -webkit-opacity: 1;
        -moz-opacity: 1;
        opacity: 1;
        filter: alpha(opacity=100);
        display: block
    }
}

@-ms-keyframes act-move-big-in {
    0% {
        -webkit-opacity: 0;
        -moz-opacity: 0;
        opacity: 0;
        filter: alpha(opacity=0);
        display: none
    }
    100% {
        -webkit-opacity: 1;
        -moz-opacity: 1;
        opacity: 1;
        filter: alpha(opacity=100);
        display: block
    }
}

@-o-keyframes act-move-big-in {
    0% {
        -webkit-opacity: 0;
        -moz-opacity: 0;
        opacity: 0;
        filter: alpha(opacity=0);
        display: none
    }
    100% {
        -webkit-opacity: 1;
        -moz-opacity: 1;
        opacity: 1;
        filter: alpha(opacity=100);
        display: block
    }
}

@keyframes act-move-big-in {
    0% {
        -webkit-opacity: 0;
        -moz-opacity: 0;
        opacity: 0;
        filter: alpha(opacity=0);
        display: none
    }
    100% {
        -webkit-opacity: 1;
        -moz-opacity: 1;
        opacity: 1;
        filter: alpha(opacity=100);
        display: block
    }
}

.wrap .p2.showAfter .before .leftBox {
    -webkit-animation: act-move-l-out .5s forwards 300ms 0 ease;
    -moz-animation: act-move-l-out .5s forwards 300ms 0 ease;
    -ms-animation: act-move-l-out .5s forwards 300ms 0 ease;
    animation: act-move-l-out .5s forwards 300ms 0 ease;
    -moz-animation: act-move-l-out .5s forwards;
    -webkit-animation: act-move-l-out .5s forwards;
    -o-animation: act-move-l-out .5s forwards;
    -ms-animation: act-move-l-out .5s forwards;
    animation: act-move-l-out .5s forwards
}

@-webkit-keyframes act-move-l-out {
    0% {
        -webkit-transform: translate(0, 0);
        -moz-transform: translate(0, 0);
        -ms-transform: translate(0, 0);
        -o-transform: translate(0, 0);
        transform: translate(0, 0);
        -webkit-opacity: 1;
        -moz-opacity: 1;
        opacity: 1;
        filter: alpha(opacity=100)
    }
    100% {
        -webkit-transform: translate(-1000px, 0);
        -moz-transform: translate(-1000px, 0);
        -ms-transform: translate(-1000px, 0);
        -o-transform: translate(-1000px, 0);
        transform: translate(-1000px, 0);
        -webkit-opacity: 0;
        -moz-opacity: 0;
        opacity: 0;
        filter: alpha(opacity=0)
    }
}

@-moz-keyframes act-move-l-out {
    0% {
        -webkit-transform: translate(0, 0);
        -moz-transform: translate(0, 0);
        -ms-transform: translate(0, 0);
        -o-transform: translate(0, 0);
        transform: translate(0, 0);
        -webkit-opacity: 1;
        -moz-opacity: 1;
        opacity: 1;
        filter: alpha(opacity=100)
    }
    100% {
        -webkit-transform: translate(-1000px, 0);
        -moz-transform: translate(-1000px, 0);
        -ms-transform: translate(-1000px, 0);
        -o-transform: translate(-1000px, 0);
        transform: translate(-1000px, 0);
        -webkit-opacity: 0;
        -moz-opacity: 0;
        opacity: 0;
        filter: alpha(opacity=0)
    }
}

@-ms-keyframes act-move-l-out {
    0% {
        -webkit-transform: translate(0, 0);
        -moz-transform: translate(0, 0);
        -ms-transform: translate(0, 0);
        -o-transform: translate(0, 0);
        transform: translate(0, 0);
        -webkit-opacity: 1;
        -moz-opacity: 1;
        opacity: 1;
        filter: alpha(opacity=100)
    }
    100% {
        -webkit-transform: translate(-1000px, 0);
        -moz-transform: translate(-1000px, 0);
        -ms-transform: translate(-1000px, 0);
        -o-transform: translate(-1000px, 0);
        transform: translate(-1000px, 0);
        -webkit-opacity: 0;
        -moz-opacity: 0;
        opacity: 0;
        filter: alpha(opacity=0)
    }
}

@-o-keyframes act-move-l-out {
    0% {
        -webkit-transform: translate(0, 0);
        -moz-transform: translate(0, 0);
        -ms-transform: translate(0, 0);
        -o-transform: translate(0, 0);
        transform: translate(0, 0);
        -webkit-opacity: 1;
        -moz-opacity: 1;
        opacity: 1;
        filter: alpha(opacity=100)
    }
    100% {
        -webkit-transform: translate(-1000px, 0);
        -moz-transform: translate(-1000px, 0);
        -ms-transform: translate(-1000px, 0);
        -o-transform: translate(-1000px, 0);
        transform: translate(-1000px, 0);
        -webkit-opacity: 0;
        -moz-opacity: 0;
        opacity: 0;
        filter: alpha(opacity=0)
    }
}

@keyframes act-move-l-out {
    0% {
        -webkit-transform: translate(0, 0);
        -moz-transform: translate(0, 0);
        -ms-transform: translate(0, 0);
        -o-transform: translate(0, 0);
        transform: translate(0, 0);
        -webkit-opacity: 1;
        -moz-opacity: 1;
        opacity: 1;
        filter: alpha(opacity=100)
    }
    100% {
        -webkit-transform: translate(-1000px, 0);
        -moz-transform: translate(-1000px, 0);
        -ms-transform: translate(-1000px, 0);
        -o-transform: translate(-1000px, 0);
        transform: translate(-1000px, 0);
        -webkit-opacity: 0;
        -moz-opacity: 0;
        opacity: 0;
        filter: alpha(opacity=0)
    }
}

.wrap .p2.showAfter .before .rightBox {
    -webkit-animation: act-move-r-out .5s forwards 300ms 0 ease;
    -moz-animation: act-move-r-out .5s forwards 300ms 0 ease;
    -ms-animation: act-move-r-out .5s forwards 300ms 0 ease;
    animation: act-move-r-out .5s forwards 300ms 0 ease;
    -moz-animation: act-move-r-out .5s forwards;
    -webkit-animation: act-move-r-out .5s forwards;
    -o-animation: act-move-r-out .5s forwards;
    -ms-animation: act-move-r-out .5s forwards;
    animation: act-move-r-out .5s forwards
}

@-webkit-keyframes act-move-r-out {
    0% {
        -webkit-transform: translate(0, 0);
        -moz-transform: translate(0, 0);
        -ms-transform: translate(0, 0);
        -o-transform: translate(0, 0);
        transform: translate(0, 0);
        -webkit-opacity: 1;
        -moz-opacity: 1;
        opacity: 1;
        filter: alpha(opacity=100)
    }
    100% {
        -webkit-transform: translate(400px, 0);
        -moz-transform: translate(400px, 0);
        -ms-transform: translate(400px, 0);
        -o-transform: translate(400px, 0);
        transform: translate(400px, 0);
        -webkit-opacity: 0;
        -moz-opacity: 0;
        opacity: 0;
        filter: alpha(opacity=0)
    }
}

@-moz-keyframes act-move-r-out {
    0% {
        -webkit-transform: translate(0, 0);
        -moz-transform: translate(0, 0);
        -ms-transform: translate(0, 0);
        -o-transform: translate(0, 0);
        transform: translate(0, 0);
        -webkit-opacity: 1;
        -moz-opacity: 1;
        opacity: 1;
        filter: alpha(opacity=100)
    }
    100% {
        -webkit-transform: translate(400px, 0);
        -moz-transform: translate(400px, 0);
        -ms-transform: translate(400px, 0);
        -o-transform: translate(400px, 0);
        transform: translate(400px, 0);
        -webkit-opacity: 0;
        -moz-opacity: 0;
        opacity: 0;
        filter: alpha(opacity=0)
    }
}

@-ms-keyframes act-move-r-out {
    0% {
        -webkit-transform: translate(0, 0);
        -moz-transform: translate(0, 0);
        -ms-transform: translate(0, 0);
        -o-transform: translate(0, 0);
        transform: translate(0, 0);
        -webkit-opacity: 1;
        -moz-opacity: 1;
        opacity: 1;
        filter: alpha(opacity=100)
    }
    100% {
        -webkit-transform: translate(400px, 0);
        -moz-transform: translate(400px, 0);
        -ms-transform: translate(400px, 0);
        -o-transform: translate(400px, 0);
        transform: translate(400px, 0);
        -webkit-opacity: 0;
        -moz-opacity: 0;
        opacity: 0;
        filter: alpha(opacity=0)
    }
}

@-o-keyframes act-move-r-out {
    0% {
        -webkit-transform: translate(0, 0);
        -moz-transform: translate(0, 0);
        -ms-transform: translate(0, 0);
        -o-transform: translate(0, 0);
        transform: translate(0, 0);
        -webkit-opacity: 1;
        -moz-opacity: 1;
        opacity: 1;
        filter: alpha(opacity=100)
    }
    100% {
        -webkit-transform: translate(400px, 0);
        -moz-transform: translate(400px, 0);
        -ms-transform: translate(400px, 0);
        -o-transform: translate(400px, 0);
        transform: translate(400px, 0);
        -webkit-opacity: 0;
        -moz-opacity: 0;
        opacity: 0;
        filter: alpha(opacity=0)
    }
}

@keyframes act-move-r-out {
    0% {
        -webkit-transform: translate(0, 0);
        -moz-transform: translate(0, 0);
        -ms-transform: translate(0, 0);
        -o-transform: translate(0, 0);
        transform: translate(0, 0);
        -webkit-opacity: 1;
        -moz-opacity: 1;
        opacity: 1;
        filter: alpha(opacity=100)
    }
    100% {
        -webkit-transform: translate(400px, 0);
        -moz-transform: translate(400px, 0);
        -ms-transform: translate(400px, 0);
        -o-transform: translate(400px, 0);
        transform: translate(400px, 0);
        -webkit-opacity: 0;
        -moz-opacity: 0;
        opacity: 0;
        filter: alpha(opacity=0)
    }
}

.wrap .p2.showAfter .after {
    z-index: 9;
    -webkit-animation: act-move-big-in .5s forwards 300ms 0 ease;
    -moz-animation: act-move-big-in .5s forwards 300ms 0 ease;
    -ms-animation: act-move-big-in .5s forwards 300ms 0 ease;
    animation: act-move-big-in .5s forwards 300ms 0 ease;
    -moz-animation: act-move-big-in .5s forwards;
    -webkit-animation: act-move-big-in .5s forwards;
    -o-animation: act-move-big-in .5s forwards;
    -ms-animation: act-move-big-in .5s forwards;
    animation: act-move-big-in .5s forwards
}

@-webkit-keyframes act-move-big-in {
    0% {
        -webkit-opacity: 0;
        -moz-opacity: 0;
        opacity: 0;
        filter: alpha(opacity=0);
        display: none
    }
    100% {
        -webkit-opacity: 1;
        -moz-opacity: 1;
        opacity: 1;
        filter: alpha(opacity=100);
        display: block
    }
}

@-moz-keyframes act-move-big-in {
    0% {
        -webkit-opacity: 0;
        -moz-opacity: 0;
        opacity: 0;
        filter: alpha(opacity=0);
        display: none
    }
    100% {
        -webkit-opacity: 1;
        -moz-opacity: 1;
        opacity: 1;
        filter: alpha(opacity=100);
        display: block
    }
}

@-ms-keyframes act-move-big-in {
    0% {
        -webkit-opacity: 0;
        -moz-opacity: 0;
        opacity: 0;
        filter: alpha(opacity=0);
        display: none
    }
    100% {
        -webkit-opacity: 1;
        -moz-opacity: 1;
        opacity: 1;
        filter: alpha(opacity=100);
        display: block
    }
}

@-o-keyframes act-move-big-in {
    0% {
        -webkit-opacity: 0;
        -moz-opacity: 0;
        opacity: 0;
        filter: alpha(opacity=0);
        display: none
    }
    100% {
        -webkit-opacity: 1;
        -moz-opacity: 1;
        opacity: 1;
        filter: alpha(opacity=100);
        display: block
    }
}

@keyframes act-move-big-in {
    0% {
        -webkit-opacity: 0;
        -moz-opacity: 0;
        opacity: 0;
        filter: alpha(opacity=0);
        display: none
    }
    100% {
        -webkit-opacity: 1;
        -moz-opacity: 1;
        opacity: 1;
        filter: alpha(opacity=100);
        display: block
    }
}

.wrap .p2 .before.on,
.wrap .p2 .after.on {
    display: block
}

.wrap .p2 .before {
    width: 1519px;
    height: 1052px;
    margin: 0 auto;
    display: none
}

.wrap .p2 .before .leftBox {
    width: 827px;
    height: 949px;
    background: url(../images/role_bg_a8d9d26.png) no-repeat;
    float: left
}

.wrap .p2 .before .leftBox img {
    margin-left: -234px;
    margin-top: -50px
}

.wrap .p2 .before .leftBox.on {
    -webkit-animation: act-move-l-in .5s ease-out forwards 300ms 0 ease;
    -moz-animation: act-move-l-in .5s ease-out forwards 300ms 0 ease;
    -ms-animation: act-move-l-in .5s ease-out forwards 300ms 0 ease;
    animation: act-move-l-in .5s ease-out forwards 300ms 0 ease;
    -moz-animation: act-move-l-in .5s ease-out forwards;
    -webkit-animation: act-move-l-in .5s ease-out forwards;
    -o-animation: act-move-l-in .5s ease-out forwards;
    -ms-animation: act-move-l-in .5s ease-out forwards;
    animation: act-move-l-in .5s ease-out forwards
}

@-webkit-keyframes act-move-l-in {
    0% {
        -webkit-transform: translate(-1000px, 0);
        -moz-transform: translate(-1000px, 0);
        -ms-transform: translate(-1000px, 0);
        -o-transform: translate(-1000px, 0);
        transform: translate(-1000px, 0);
        -webkit-opacity: 0;
        -moz-opacity: 0;
        opacity: 0;
        filter: alpha(opacity=0)
    }
    100% {
        -webkit-transform: translate(0, 0);
        -moz-transform: translate(0, 0);
        -ms-transform: translate(0, 0);
        -o-transform: translate(0, 0);
        transform: translate(0, 0);
        -webkit-opacity: 1;
        -moz-opacity: 1;
        opacity: 1;
        filter: alpha(opacity=100)
    }
}

@-moz-keyframes act-move-l-in {
    0% {
        -webkit-transform: translate(-1000px, 0);
        -moz-transform: translate(-1000px, 0);
        -ms-transform: translate(-1000px, 0);
        -o-transform: translate(-1000px, 0);
        transform: translate(-1000px, 0);
        -webkit-opacity: 0;
        -moz-opacity: 0;
        opacity: 0;
        filter: alpha(opacity=0)
    }
    100% {
        -webkit-transform: translate(0, 0);
        -moz-transform: translate(0, 0);
        -ms-transform: translate(0, 0);
        -o-transform: translate(0, 0);
        transform: translate(0, 0);
        -webkit-opacity: 1;
        -moz-opacity: 1;
        opacity: 1;
        filter: alpha(opacity=100)
    }
}

@-ms-keyframes act-move-l-in {
    0% {
        -webkit-transform: translate(-1000px, 0);
        -moz-transform: translate(-1000px, 0);
        -ms-transform: translate(-1000px, 0);
        -o-transform: translate(-1000px, 0);
        transform: translate(-1000px, 0);
        -webkit-opacity: 0;
        -moz-opacity: 0;
        opacity: 0;
        filter: alpha(opacity=0)
    }
    100% {
        -webkit-transform: translate(0, 0);
        -moz-transform: translate(0, 0);
        -ms-transform: translate(0, 0);
        -o-transform: translate(0, 0);
        transform: translate(0, 0);
        -webkit-opacity: 1;
        -moz-opacity: 1;
        opacity: 1;
        filter: alpha(opacity=100)
    }
}

@-o-keyframes act-move-l-in {
    0% {
        -webkit-transform: translate(-1000px, 0);
        -moz-transform: translate(-1000px, 0);
        -ms-transform: translate(-1000px, 0);
        -o-transform: translate(-1000px, 0);
        transform: translate(-1000px, 0);
        -webkit-opacity: 0;
        -moz-opacity: 0;
        opacity: 0;
        filter: alpha(opacity=0)
    }
    100% {
        -webkit-transform: translate(0, 0);
        -moz-transform: translate(0, 0);
        -ms-transform: translate(0, 0);
        -o-transform: translate(0, 0);
        transform: translate(0, 0);
        -webkit-opacity: 1;
        -moz-opacity: 1;
        opacity: 1;
        filter: alpha(opacity=100)
    }
}

@keyframes act-move-l-in {
    0% {
        -webkit-transform: translate(-1000px, 0);
        -moz-transform: translate(-1000px, 0);
        -ms-transform: translate(-1000px, 0);
        -o-transform: translate(-1000px, 0);
        transform: translate(-1000px, 0);
        -webkit-opacity: 0;
        -moz-opacity: 0;
        opacity: 0;
        filter: alpha(opacity=0)
    }
    100% {
        -webkit-transform: translate(0, 0);
        -moz-transform: translate(0, 0);
        -ms-transform: translate(0, 0);
        -o-transform: translate(0, 0);
        transform: translate(0, 0);
        -webkit-opacity: 1;
        -moz-opacity: 1;
        opacity: 1;
        filter: alpha(opacity=100)
    }
}

.wrap .p2 .before .leftBox.on2 {
    -webkit-animation: act-move-l-in2 .5s ease-out forwards 300ms 0 ease;
    -moz-animation: act-move-l-in2 .5s ease-out forwards 300ms 0 ease;
    -ms-animation: act-move-l-in2 .5s ease-out forwards 300ms 0 ease;
    animation: act-move-l-in2 .5s ease-out forwards 300ms 0 ease;
    -moz-animation: act-move-l-in2 .5s ease-out forwards;
    -webkit-animation: act-move-l-in2 .5s ease-out forwards;
    -o-animation: act-move-l-in2 .5s ease-out forwards;
    -ms-animation: act-move-l-in2 .5s ease-out forwards;
    animation: act-move-l-in2 .5s ease-out forwards
}

@-webkit-keyframes act-move-l-in2 {
    0% {
        -webkit-transform: translate(-1000px, 0);
        -moz-transform: translate(-1000px, 0);
        -ms-transform: translate(-1000px, 0);
        -o-transform: translate(-1000px, 0);
        transform: translate(-1000px, 0);
        -webkit-opacity: 0;
        -moz-opacity: 0;
        opacity: 0;
        filter: alpha(opacity=0)
    }
    100% {
        -webkit-transform: translate(0, 0);
        -moz-transform: translate(0, 0);
        -ms-transform: translate(0, 0);
        -o-transform: translate(0, 0);
        transform: translate(0, 0);
        -webkit-opacity: 1;
        -moz-opacity: 1;
        opacity: 1;
        filter: alpha(opacity=100)
    }
}

@-moz-keyframes act-move-l-in2 {
    0% {
        -webkit-transform: translate(-1000px, 0);
        -moz-transform: translate(-1000px, 0);
        -ms-transform: translate(-1000px, 0);
        -o-transform: translate(-1000px, 0);
        transform: translate(-1000px, 0);
        -webkit-opacity: 0;
        -moz-opacity: 0;
        opacity: 0;
        filter: alpha(opacity=0)
    }
    100% {
        -webkit-transform: translate(0, 0);
        -moz-transform: translate(0, 0);
        -ms-transform: translate(0, 0);
        -o-transform: translate(0, 0);
        transform: translate(0, 0);
        -webkit-opacity: 1;
        -moz-opacity: 1;
        opacity: 1;
        filter: alpha(opacity=100)
    }
}

@-ms-keyframes act-move-l-in2 {
    0% {
        -webkit-transform: translate(-1000px, 0);
        -moz-transform: translate(-1000px, 0);
        -ms-transform: translate(-1000px, 0);
        -o-transform: translate(-1000px, 0);
        transform: translate(-1000px, 0);
        -webkit-opacity: 0;
        -moz-opacity: 0;
        opacity: 0;
        filter: alpha(opacity=0)
    }
    100% {
        -webkit-transform: translate(0, 0);
        -moz-transform: translate(0, 0);
        -ms-transform: translate(0, 0);
        -o-transform: translate(0, 0);
        transform: translate(0, 0);
        -webkit-opacity: 1;
        -moz-opacity: 1;
        opacity: 1;
        filter: alpha(opacity=100)
    }
}

@-o-keyframes act-move-l-in2 {
    0% {
        -webkit-transform: translate(-1000px, 0);
        -moz-transform: translate(-1000px, 0);
        -ms-transform: translate(-1000px, 0);
        -o-transform: translate(-1000px, 0);
        transform: translate(-1000px, 0);
        -webkit-opacity: 0;
        -moz-opacity: 0;
        opacity: 0;
        filter: alpha(opacity=0)
    }
    100% {
        -webkit-transform: translate(0, 0);
        -moz-transform: translate(0, 0);
        -ms-transform: translate(0, 0);
        -o-transform: translate(0, 0);
        transform: translate(0, 0);
        -webkit-opacity: 1;
        -moz-opacity: 1;
        opacity: 1;
        filter: alpha(opacity=100)
    }
}

@keyframes act-move-l-in2 {
    0% {
        -webkit-transform: translate(-1000px, 0);
        -moz-transform: translate(-1000px, 0);
        -ms-transform: translate(-1000px, 0);
        -o-transform: translate(-1000px, 0);
        transform: translate(-1000px, 0);
        -webkit-opacity: 0;
        -moz-opacity: 0;
        opacity: 0;
        filter: alpha(opacity=0)
    }
    100% {
        -webkit-transform: translate(0, 0);
        -moz-transform: translate(0, 0);
        -ms-transform: translate(0, 0);
        -o-transform: translate(0, 0);
        transform: translate(0, 0);
        -webkit-opacity: 1;
        -moz-opacity: 1;
        opacity: 1;
        filter: alpha(opacity=100)
    }
}

.wrap .p2 .before .rightBox {
    width: 533px;
    height: 1052px;
    float: right;
    box-sizing: border-box;
    padding-top: 44px
}

.wrap .p2 .before .rightBox .gallery-box {
    width: 425px;
    height: 141px;
    position: relative;
    margin-bottom: 20px
}

.wrap .p2 .before .rightBox .gallery-box .gallery_container {
    width: 289px;
    height: 141px;
    margin: 0 auto
}

.wrap .p2 .before .rightBox .gallery-box .gallery_container .gallery_item {
    cursor: pointer;
    width: 146px;
    height: 146px
}

.wrap .p2 .before .rightBox .gallery-box .gallery_container .gallery_item img {
    width: 109px;
    height: 109px;
    position: absolute;
    border-radius: 50%;
    top: 20px
}

.wrap .p2 .before .rightBox .gallery-box .gallery_container .gallery_item::after {
    content: '';
    width: 109px;
    height: 109px;
    background: #000;
    opacity: .4;
    position: absolute;
    top: 20px;
    left: 18px;
    border: 2px solid #b59c66;
    border-radius: 50%
}

.wrap .p2 .before .rightBox .gallery-box .gallery_container .gallery_right_middle img {
    right: 15px
}

.wrap .p2 .before .rightBox .gallery-box .gallery_container .gallery_left_middle img {
    left: 15px
}

.wrap .p2 .before .rightBox .gallery-box .gallery_container .gallery_active img {
    width: 146px;
    height: 146px;
    margin: 0!important;
    border-radius: 50%;
    border: 2px solid #b59c66;
    box-sizing: border-box;
    top: 0
}

.wrap .p2 .before .rightBox .gallery-box .gallery_container .gallery_active::after {
    display: none
}

.wrap .p2 .before .rightBox .gallery-box .roleprev {
    width: 64px;
    height: 50px;
    background: url(../images/prev_37d8e88.png) no-repeat;
    cursor: pointer;
    position: absolute;
    left: 0;
    top: 50%;
    margin-top: -25px
}

.wrap .p2 .before .rightBox .gallery-box .rolenext {
    width: 64px;
    height: 50px;
    background: url(../images/next_699fde8.png) no-repeat;
    cursor: pointer;
    position: absolute;
    right: 0;
    top: 50%;
    margin-top: -25px
}

.wrap .p2 .before .rightBox .change {
    width: 105px;
    height: 100px;
    background: url(../images/change_d66908a.png) no-repeat;
    display: block;
    margin-left: 155px;
    margin-bottom: 28px
}

.wrap .p2 .before .rightBox .change:hover {
    -webkit-transform: rotateY(360deg);
    -moz-transform: rotateY(360deg);
    -ms-transform: rotateY(360deg);
    -o-transform: rotateY(360deg);
    transform: rotateY(360deg)
}

.wrap .p2 .before .rightBox .roleInfo_bg {
    width: 410px;
    height: 590px;
    background: url(../images/sstitle.png) no-repeat;
    padding-top: 35px;
    margin-bottom: 30px;
    box-sizing: border-box
}

.wrap .p2 .before .rightBox .roleInfo_bg .name {
    width: 390px;
    height: 218px
}

.wrap .p2 .before .rightBox .roleInfo_bg .cv {
    width: 278px;
    height: 52px;
    margin: 0 auto 12px;
    line-height: 52px;
    padding-left: 145px;
    box-sizing: border-box;
    cursor: pointer;
    font-size: 24px;
    display: block
}

.wrap .p2 .before .rightBox .roleInfo_bg .cv p {
    font-size: 20px;
    line-height: 24px
}

.wrap .p2 .before .rightBox .roleInfo_bg .cv-jp {
    background: url(https://hsqsl.res.netease.com/pc/fab/20210728193411/img/cv-jp_22382fb.png) no-repeat;
    color: #957a62
}

.wrap .p2 .before .rightBox .roleInfo_bg .cv-ch {
    background: url(https://hsqsl.res.netease.com/pc/fab/20210728193411/img/cv-ch_8f1b6d8.png) no-repeat;
    color: #76351c
}

.wrap .p2 .after {
    width: 1519px;
    height: 1052px;
    margin: 0 auto;
    padding-top: 120px;
    position: relative;
    display: none
}

.wrap .p2 .after .tit {
    width: 356px;
    height: 194px;
    background: url(../images/tit_612f2d6.png) no-repeat;
    margin-left: 180px
}

.wrap .p2 .after .type {
    width: 350px;
    height: auto;
    margin-top: 200px
}

.wrap .p2 .after .change {
    width: 105px;
    height: 100px;
    background: url(../images/change_d66908a.png) no-repeat;
    display: block;
    margin-top: 300px;
    margin-left: 200px
}

.wrap .p2 .after .buffshow {
    background: url(../images/ss1.png)center top no-repeat;
    width: 1000px;
    height: 800px;
    position: absolute;
    right: -90px;
}

.wrap .p2 .after .bigImg {
    position: absolute;
    right: 97px;
    top: 100px;
    border-radius: 50px;
}

.wrap .p3 {
    width: 100%;
    height: 1140px;
    background: url(../images/bg_04.jpg) center top no-repeat;
    box-sizing: border-box;
    position: relative;
    z-index: 3
}

.wrap .p3 .feature_tit {
    width: 630px;
    height: 212px;
    background: url(../images/featrue_tit__acb2bbc.png) no-repeat;
    margin: 0 auto 20px
}

.wrap .p3 .ball {
    width: 600px;
    height: 760px;
    position: absolute;
    top: 107px;
    left: -340px;
    z-index: 2;
    animation: move 3s ease-in-out infinite alternate
}

@-webkit-keyframes move {
    0% {
        -webkit-transform: translateY(-25px);
        -moz-transform: translateY(-25px);
        -ms-transform: translateY(-25px);
        -o-transform: translateY(-25px);
        transform: translateY(-25px)
    }
    100% {
        -webkit-transform: translateY(25px);
        -moz-transform: translateY(25px);
        -ms-transform: translateY(25px);
        -o-transform: translateY(25px);
        transform: translateY(25px)
    }
}

@-moz-keyframes move {
    0% {
        -webkit-transform: translateY(-25px);
        -moz-transform: translateY(-25px);
        -ms-transform: translateY(-25px);
        -o-transform: translateY(-25px);
        transform: translateY(-25px)
    }
    100% {
        -webkit-transform: translateY(25px);
        -moz-transform: translateY(25px);
        -ms-transform: translateY(25px);
        -o-transform: translateY(25px);
        transform: translateY(25px)
    }
}

@-ms-keyframes move {
    0% {
        -webkit-transform: translateY(-25px);
        -moz-transform: translateY(-25px);
        -ms-transform: translateY(-25px);
        -o-transform: translateY(-25px);
        transform: translateY(-25px)
    }
    100% {
        -webkit-transform: translateY(25px);
        -moz-transform: translateY(25px);
        -ms-transform: translateY(25px);
        -o-transform: translateY(25px);
        transform: translateY(25px)
    }
}

@-o-keyframes move {
    0% {
        -webkit-transform: translateY(-25px);
        -moz-transform: translateY(-25px);
        -ms-transform: translateY(-25px);
        -o-transform: translateY(-25px);
        transform: translateY(-25px)
    }
    100% {
        -webkit-transform: translateY(25px);
        -moz-transform: translateY(25px);
        -ms-transform: translateY(25px);
        -o-transform: translateY(25px);
        transform: translateY(25px)
    }
}

@keyframes move {
    0% {
        -webkit-transform: translateY(-25px);
        -moz-transform: translateY(-25px);
        -ms-transform: translateY(-25px);
        -o-transform: translateY(-25px);
        transform: translateY(-25px)
    }
    100% {
        -webkit-transform: translateY(25px);
        -moz-transform: translateY(25px);
        -ms-transform: translateY(25px);
        -o-transform: translateY(25px);
        transform: translateY(25px)
    }
}

.wrap .p3 .rule {
    width: 368px;
    height: 350px;
    position: absolute;
    right: -120px;
    background: url(../images/rule_3b51c0e.png) no-repeat;
    z-index: 2
}

.wrap .p3 .swiper-box {
    width: 1460px;
    height: 904px;
    background: url(../images/feature_bg_8c0a68c.png) no-repeat;
    position: absolute;
    left: 50%;
    margin-left: -680px;
    top: 288px;
    z-index: 9;
    pointer-events: none;
}

.wrap .p3 .swiper-box .feature {
    width: 1389px;
    height: 730px;
    margin-top: 34px;
    margin-left: 2px;
    /* border-radius: 200px */
}

.wrap .p3 .swiper-box .feature .swiper-slide {
    width: 1389px;
    height: 730px;
    display: flex;
    align-items: center;
    justify-content: center
}

.wrap .p3 .swiper-box .swiper-button-prev {
    background: url(../images/p3_prev_a529492.png);
    left: -80px;
}

.wrap .p3 .swiper-box .swiper-button-next {
    background: url(../images/p3_next_d54a9eb.png);
    right: -10px;
}

.wrap .p3 .swiper-box .swiper-button-prev,
.wrap .p3 .swiper-box .swiper-button-next {
    width: 80px;
    height: 86px;
    position: absolute;
}

.wrap .footer {
    background-color: #000;
    position: relative;
    z-index: 3
}

.wrap .footer .bot-all {
    width: 1200px;
    height: 100px;
    padding-top: 20px;
    box-sizing: border-box;
    margin: 0 auto 40px
}

.wrap .footer .bot-all .bot-l {
    float: left;
    width: 380px;
    height: 100%
}

.wrap .footer .bot-all .bot-l img {
    float: left;
    margin-right: 10px;
    width: 83px
}

.wrap .footer .bot-all .bot-l img.bot-ewm2 {
    margin-right: 0
}

.wrap .footer .bot-all .bot-l img.bot-txt-img {
    margin-top: 10px;
    margin-right: 20px;
    width: 157px
}

.wrap .footer .bot-all .bot-r {
    float: right;
    width: 760px;
    height: 90px;
    margin-top: 10px
}

.wrap .footer .bot-all .bot-r .bot-btn {
    position: relative;
    float: left;
    margin-left: 30px
}

.wrap .footer .bot-all .bot-r .bot-btn.wb:hover .show-ewm,
.wrap .footer .bot-all .bot-r .bot-btn.wx:hover .show-ewm {
    display: block
}

.wrap .footer .bot-all .bot-r .bot-btn .show-ewm {
    position: absolute;
    left: 50%;
    top: 0;
    margin-left: -40px;
    display: none;
    width: 80px
}

.wrap .footer .nie-copyright-new-inner {
    width: 1200px
}

.wrap .page1-cl-all {
    position: fixed;
    z-index: 5;
    /* left: 0; */
    right: -200px;
    top: 50%;
    margin-top: -208px;
    width: 187px;
    height: 416px;
    background: url(../images/side_down_bg_60e4afc.png) left top no-repeat;
    -webkit-transition: .4s;
    -moz-transition: .4s;
    -ms-transition: .4s;
    -o-transition: .4s;
    transition: .4s
}

.wrap .page1-cl-all:hover {
    -webkit-transition: .4s;
    -moz-transition: .4s;
    -ms-transition: .4s;
    -o-transition: .4s;
    transition: .4s
}

.wrap .page1-cl-all.opacity {
    z-index: -1;
    -webkit-opacity: 0;
    -moz-opacity: 0;
    opacity: 0;
    filter: alpha(opacity=0)
}

.wrap .page1-cl-all.hidden {
    /* left:-200px; */
    right: 0px;
}

.wrap .page1-cl-all.hidden .btn_close {
    /* left: 190px */
    right: 50px;
}

.wrap .page1-cl-all.hidden .btn_close i {
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transform: rotate(180deg)
}

.wrap .page1-cl-all .btn_close {
    width: 83px;
    height: 37px;
    position: absolute;
    /* left: 57px; */
    right: 195px;
    bottom: -12px;
    cursor: pointer;
    background: url(../images/btn_bg_09ff7d2.png) left top no-repeat;
    -webkit-transition: .4s;
    -moz-transition: .4s;
    -ms-transition: .4s;
    -o-transition: .4s;
    transition: .4s
}

.wrap .page1-cl-all .btn_close:hover {
    -webkit-transition: .4s;
    -moz-transition: .4s;
    -ms-transition: .4s;
    -o-transition: .4s;
    transition: .4s
}

.wrap .page1-cl-all .btn_close i {
    width: 15px;
    height: 18px;
    display: block;
    position: absolute;
    left: 32px;
    top: 3px;
    background: url(../images/btn_close_7e2767b.png) left top no-repeat;
    -webkit-transition: .4s;
    -moz-transition: .4s;
    -ms-transition: .4s;
    -o-transition: .4s;
    transition: .4s
}

.wrap .page1-cl-all .btn_close i:hover {
    -webkit-transition: .4s;
    -moz-transition: .4s;
    -ms-transition: .4s;
    -o-transition: .4s;
    transition: .4s
}

.wrap .page1-cl-all .nie-download {
    width: 137px;
    margin: 0 auto;
    padding-top: 44px
}

.wrap .page1-cl-all .nie-download .NIE- {
    width: 111px;
    height: 111px;
    margin: 0 auto;
    position: relative
}

.wrap .page1-cl-all .nie-download .NIE-qrcod s {
    width: 187px;
    height: 14px;
    display: block;
    position: absolute;
    left: 1px;
    top: 50px;
    z-index: 2;
    background: url(../images/dow_line_ba54740.png) left top no-repeat;
    -webkit-animation: downLine 3s linear infinite 300ms 0 ease;
    -moz-animation: downLine 3s linear infinite 300ms 0 ease;
    -ms-animation: downLine 3s linear infinite 300ms 0 ease;
    animation: downLine 3s linear infinite 300ms 0 ease;
    -moz-animation: downLine 3s linear infinite;
    -webkit-animation: downLine 3s linear infinite;
    -o-animation: downLine 3s linear infinite;
    -ms-animation: downLine 3s linear infinite;
    animation: downLine 3s linear infinite
}

@-webkit-keyframes downLine {
    0% {
        -webkit-transform: translateY(0);
        -moz-transform: translateY(0);
        -ms-transform: translateY(0);
        -o-transform: translateY(0);
        transform: translateY(0)
    }
    50% {
        -webkit-transform: translateY(110px);
        -moz-transform: translateY(110px);
        -ms-transform: translateY(110px);
        -o-transform: translateY(110px);
        transform: translateY(110px)
    }
    100% {
        -webkit-transform: translateY(0);
        -moz-transform: translateY(0);
        -ms-transform: translateY(0);
        -o-transform: translateY(0);
        transform: translateY(0)
    }
}

@-moz-keyframes downLine {
    0% {
        -webkit-transform: translateY(0);
        -moz-transform: translateY(0);
        -ms-transform: translateY(0);
        -o-transform: translateY(0);
        transform: translateY(0)
    }
    50% {
        -webkit-transform: translateY(110px);
        -moz-transform: translateY(110px);
        -ms-transform: translateY(110px);
        -o-transform: translateY(110px);
        transform: translateY(110px)
    }
    100% {
        -webkit-transform: translateY(0);
        -moz-transform: translateY(0);
        -ms-transform: translateY(0);
        -o-transform: translateY(0);
        transform: translateY(0)
    }
}

@-ms-keyframes downLine {
    0% {
        -webkit-transform: translateY(0);
        -moz-transform: translateY(0);
        -ms-transform: translateY(0);
        -o-transform: translateY(0);
        transform: translateY(0)
    }
    50% {
        -webkit-transform: translateY(110px);
        -moz-transform: translateY(110px);
        -ms-transform: translateY(110px);
        -o-transform: translateY(110px);
        transform: translateY(110px)
    }
    100% {
        -webkit-transform: translateY(0);
        -moz-transform: translateY(0);
        -ms-transform: translateY(0);
        -o-transform: translateY(0);
        transform: translateY(0)
    }
}

@-o-keyframes downLine {
    0% {
        -webkit-transform: translateY(0);
        -moz-transform: translateY(0);
        -ms-transform: translateY(0);
        -o-transform: translateY(0);
        transform: translateY(0)
    }
    50% {
        -webkit-transform: translateY(110px);
        -moz-transform: translateY(110px);
        -ms-transform: translateY(110px);
        -o-transform: translateY(110px);
        transform: translateY(110px)
    }
    100% {
        -webkit-transform: translateY(0);
        -moz-transform: translateY(0);
        -ms-transform: translateY(0);
        -o-transform: translateY(0);
        transform: translateY(0)
    }
}

@keyframes downLine {
    0% {
        -webkit-transform: translateY(0);
        -moz-transform: translateY(0);
        -ms-transform: translateY(0);
        -o-transform: translateY(0);
        transform: translateY(0)
    }
    50% {
        -webkit-transform: translateY(110px);
        -moz-transform: translateY(110px);
        -ms-transform: translateY(110px);
        -o-transform: translateY(110px);
        transform: translateY(110px)
    }
    100% {
        -webkit-transform: translateY(0);
        -moz-transform: translateY(0);
        -ms-transform: translateY(0);
        -o-transform: translateY(0);
        transform: translateY(0)
    }
}

.wrap .page1-cl-all .nie-download .NIE-qrcod img {
    width: 100%
}

.wrap .page1-cl-all .nie-download .button {
    margin-top: 29px
}

.wrap .page1-cl-all .nie-download .button a {
    width: 137px;
    height: 43px;
    display: block;
    background-size: 100%;
    margin-bottom: 5px;
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    -ms-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s
}

.wrap .page1-cl-all .nie-download .button a:hover {
    -webkit-opacity: .5;
    -moz-opacity: .5;
    opacity: .5;
    filter: alpha(opacity=50)
}

.wrap .page1-cl-all .nie-download .button a.link-apple {
    background-image: url(../images/btn_ios_1_3a9a6b3.png)
}

.wrap .page1-cl-all .nie-download .button a.link-android {
    background-image: url(../images/btn_pc_1_55bc366.png)
}

.wrap .page1-cl-all .nie-download .button a.link-pc {
    background-image: url(../images/btn_and_1_b58a9e1.png)
}

.wrap .btn-bgm {
    display: block;
    width: 50px;
    font-size: 0;
    text-align: center;
    margin: 0 auto
}

.wrap .btn-bgm i {
    display: inline-block;
    width: 2px;
    height: 30px;
    background: #fff;
    -webkit-transform-origin: 50% 100%;
    -moz-transform-origin: 50% 100%;
    -ms-transform-origin: 50% 100%;
    -o-transform-origin: 50% 100%;
    transform-origin: 50% 100%;
    margin: 0 3px
}

.wrap .btn-bgm.on i:nth-child(1) {
    -webkit-animation: lineLow 1.5s 0s linear infinite 300ms 0 ease;
    -moz-animation: lineLow 1.5s 0s linear infinite 300ms 0 ease;
    -ms-animation: lineLow 1.5s 0s linear infinite 300ms 0 ease;
    animation: lineLow 1.5s 0s linear infinite 300ms 0 ease;
    -moz-animation: lineLow 1.5s 0s linear infinite;
    -webkit-animation: lineLow 1.5s 0s linear infinite;
    -o-animation: lineLow 1.5s 0s linear infinite;
    -ms-animation: lineLow 1.5s 0s linear infinite;
    animation: lineLow 1.5s 0s linear infinite
}

@-webkit-keyframes lineLow {
    0% {
        -webkit-transform: scale(1, 1);
        -moz-transform: scale(1, 1);
        -ms-transform: scale(1, 1);
        -o-transform: scale(1, 1);
        transform: scale(1, 1)
    }
    50% {
        -webkit-transform: scale(1, 0);
        -moz-transform: scale(1, 0);
        -ms-transform: scale(1, 0);
        -o-transform: scale(1, 0);
        transform: scale(1, 0)
    }
    100% {
        -webkit-transform: scale(1, 1);
        -moz-transform: scale(1, 1);
        -ms-transform: scale(1, 1);
        -o-transform: scale(1, 1);
        transform: scale(1, 1)
    }
}

@-moz-keyframes lineLow {
    0% {
        -webkit-transform: scale(1, 1);
        -moz-transform: scale(1, 1);
        -ms-transform: scale(1, 1);
        -o-transform: scale(1, 1);
        transform: scale(1, 1)
    }
    50% {
        -webkit-transform: scale(1, 0);
        -moz-transform: scale(1, 0);
        -ms-transform: scale(1, 0);
        -o-transform: scale(1, 0);
        transform: scale(1, 0)
    }
    100% {
        -webkit-transform: scale(1, 1);
        -moz-transform: scale(1, 1);
        -ms-transform: scale(1, 1);
        -o-transform: scale(1, 1);
        transform: scale(1, 1)
    }
}

@-ms-keyframes lineLow {
    0% {
        -webkit-transform: scale(1, 1);
        -moz-transform: scale(1, 1);
        -ms-transform: scale(1, 1);
        -o-transform: scale(1, 1);
        transform: scale(1, 1)
    }
    50% {
        -webkit-transform: scale(1, 0);
        -moz-transform: scale(1, 0);
        -ms-transform: scale(1, 0);
        -o-transform: scale(1, 0);
        transform: scale(1, 0)
    }
    100% {
        -webkit-transform: scale(1, 1);
        -moz-transform: scale(1, 1);
        -ms-transform: scale(1, 1);
        -o-transform: scale(1, 1);
        transform: scale(1, 1)
    }
}

@-o-keyframes lineLow {
    0% {
        -webkit-transform: scale(1, 1);
        -moz-transform: scale(1, 1);
        -ms-transform: scale(1, 1);
        -o-transform: scale(1, 1);
        transform: scale(1, 1)
    }
    50% {
        -webkit-transform: scale(1, 0);
        -moz-transform: scale(1, 0);
        -ms-transform: scale(1, 0);
        -o-transform: scale(1, 0);
        transform: scale(1, 0)
    }
    100% {
        -webkit-transform: scale(1, 1);
        -moz-transform: scale(1, 1);
        -ms-transform: scale(1, 1);
        -o-transform: scale(1, 1);
        transform: scale(1, 1)
    }
}

@keyframes lineLow {
    0% {
        -webkit-transform: scale(1, 1);
        -moz-transform: scale(1, 1);
        -ms-transform: scale(1, 1);
        -o-transform: scale(1, 1);
        transform: scale(1, 1)
    }
    50% {
        -webkit-transform: scale(1, 0);
        -moz-transform: scale(1, 0);
        -ms-transform: scale(1, 0);
        -o-transform: scale(1, 0);
        transform: scale(1, 0)
    }
    100% {
        -webkit-transform: scale(1, 1);
        -moz-transform: scale(1, 1);
        -ms-transform: scale(1, 1);
        -o-transform: scale(1, 1);
        transform: scale(1, 1)
    }
}

.wrap .btn-bgm.on i:nth-child(2) {
    -webkit-animation: lineLow 1.5s .3s linear infinite 300ms 0 ease;
    -moz-animation: lineLow 1.5s .3s linear infinite 300ms 0 ease;
    -ms-animation: lineLow 1.5s .3s linear infinite 300ms 0 ease;
    animation: lineLow 1.5s .3s linear infinite 300ms 0 ease;
    -moz-animation: lineLow 1.5s .3s linear infinite;
    -webkit-animation: lineLow 1.5s .3s linear infinite;
    -o-animation: lineLow 1.5s .3s linear infinite;
    -ms-animation: lineLow 1.5s .3s linear infinite;
    animation: lineLow 1.5s .3s linear infinite
}

@-webkit-keyframes lineLow {
    0% {
        -webkit-transform: scale(1, 1);
        -moz-transform: scale(1, 1);
        -ms-transform: scale(1, 1);
        -o-transform: scale(1, 1);
        transform: scale(1, 1)
    }
    50% {
        -webkit-transform: scale(1, 0);
        -moz-transform: scale(1, 0);
        -ms-transform: scale(1, 0);
        -o-transform: scale(1, 0);
        transform: scale(1, 0)
    }
    100% {
        -webkit-transform: scale(1, 1);
        -moz-transform: scale(1, 1);
        -ms-transform: scale(1, 1);
        -o-transform: scale(1, 1);
        transform: scale(1, 1)
    }
}

@-moz-keyframes lineLow {
    0% {
        -webkit-transform: scale(1, 1);
        -moz-transform: scale(1, 1);
        -ms-transform: scale(1, 1);
        -o-transform: scale(1, 1);
        transform: scale(1, 1)
    }
    50% {
        -webkit-transform: scale(1, 0);
        -moz-transform: scale(1, 0);
        -ms-transform: scale(1, 0);
        -o-transform: scale(1, 0);
        transform: scale(1, 0)
    }
    100% {
        -webkit-transform: scale(1, 1);
        -moz-transform: scale(1, 1);
        -ms-transform: scale(1, 1);
        -o-transform: scale(1, 1);
        transform: scale(1, 1)
    }
}

@-ms-keyframes lineLow {
    0% {
        -webkit-transform: scale(1, 1);
        -moz-transform: scale(1, 1);
        -ms-transform: scale(1, 1);
        -o-transform: scale(1, 1);
        transform: scale(1, 1)
    }
    50% {
        -webkit-transform: scale(1, 0);
        -moz-transform: scale(1, 0);
        -ms-transform: scale(1, 0);
        -o-transform: scale(1, 0);
        transform: scale(1, 0)
    }
    100% {
        -webkit-transform: scale(1, 1);
        -moz-transform: scale(1, 1);
        -ms-transform: scale(1, 1);
        -o-transform: scale(1, 1);
        transform: scale(1, 1)
    }
}

@-o-keyframes lineLow {
    0% {
        -webkit-transform: scale(1, 1);
        -moz-transform: scale(1, 1);
        -ms-transform: scale(1, 1);
        -o-transform: scale(1, 1);
        transform: scale(1, 1)
    }
    50% {
        -webkit-transform: scale(1, 0);
        -moz-transform: scale(1, 0);
        -ms-transform: scale(1, 0);
        -o-transform: scale(1, 0);
        transform: scale(1, 0)
    }
    100% {
        -webkit-transform: scale(1, 1);
        -moz-transform: scale(1, 1);
        -ms-transform: scale(1, 1);
        -o-transform: scale(1, 1);
        transform: scale(1, 1)
    }
}

@keyframes lineLow {
    0% {
        -webkit-transform: scale(1, 1);
        -moz-transform: scale(1, 1);
        -ms-transform: scale(1, 1);
        -o-transform: scale(1, 1);
        transform: scale(1, 1)
    }
    50% {
        -webkit-transform: scale(1, 0);
        -moz-transform: scale(1, 0);
        -ms-transform: scale(1, 0);
        -o-transform: scale(1, 0);
        transform: scale(1, 0)
    }
    100% {
        -webkit-transform: scale(1, 1);
        -moz-transform: scale(1, 1);
        -ms-transform: scale(1, 1);
        -o-transform: scale(1, 1);
        transform: scale(1, 1)
    }
}

.wrap .btn-bgm.on i:nth-child(3) {
    -webkit-animation: lineLow 1.5s .6s linear infinite 300ms 0 ease;
    -moz-animation: lineLow 1.5s .6s linear infinite 300ms 0 ease;
    -ms-animation: lineLow 1.5s .6s linear infinite 300ms 0 ease;
    animation: lineLow 1.5s .6s linear infinite 300ms 0 ease;
    -moz-animation: lineLow 1.5s .6s linear infinite;
    -webkit-animation: lineLow 1.5s .6s linear infinite;
    -o-animation: lineLow 1.5s .6s linear infinite;
    -ms-animation: lineLow 1.5s .6s linear infinite;
    animation: lineLow 1.5s .6s linear infinite
}

@-webkit-keyframes lineLow {
    0% {
        -webkit-transform: scale(1, 1);
        -moz-transform: scale(1, 1);
        -ms-transform: scale(1, 1);
        -o-transform: scale(1, 1);
        transform: scale(1, 1)
    }
    50% {
        -webkit-transform: scale(1, 0);
        -moz-transform: scale(1, 0);
        -ms-transform: scale(1, 0);
        -o-transform: scale(1, 0);
        transform: scale(1, 0)
    }
    100% {
        -webkit-transform: scale(1, 1);
        -moz-transform: scale(1, 1);
        -ms-transform: scale(1, 1);
        -o-transform: scale(1, 1);
        transform: scale(1, 1)
    }
}

@-moz-keyframes lineLow {
    0% {
        -webkit-transform: scale(1, 1);
        -moz-transform: scale(1, 1);
        -ms-transform: scale(1, 1);
        -o-transform: scale(1, 1);
        transform: scale(1, 1)
    }
    50% {
        -webkit-transform: scale(1, 0);
        -moz-transform: scale(1, 0);
        -ms-transform: scale(1, 0);
        -o-transform: scale(1, 0);
        transform: scale(1, 0)
    }
    100% {
        -webkit-transform: scale(1, 1);
        -moz-transform: scale(1, 1);
        -ms-transform: scale(1, 1);
        -o-transform: scale(1, 1);
        transform: scale(1, 1)
    }
}

@-ms-keyframes lineLow {
    0% {
        -webkit-transform: scale(1, 1);
        -moz-transform: scale(1, 1);
        -ms-transform: scale(1, 1);
        -o-transform: scale(1, 1);
        transform: scale(1, 1)
    }
    50% {
        -webkit-transform: scale(1, 0);
        -moz-transform: scale(1, 0);
        -ms-transform: scale(1, 0);
        -o-transform: scale(1, 0);
        transform: scale(1, 0)
    }
    100% {
        -webkit-transform: scale(1, 1);
        -moz-transform: scale(1, 1);
        -ms-transform: scale(1, 1);
        -o-transform: scale(1, 1);
        transform: scale(1, 1)
    }
}

@-o-keyframes lineLow {
    0% {
        -webkit-transform: scale(1, 1);
        -moz-transform: scale(1, 1);
        -ms-transform: scale(1, 1);
        -o-transform: scale(1, 1);
        transform: scale(1, 1)
    }
    50% {
        -webkit-transform: scale(1, 0);
        -moz-transform: scale(1, 0);
        -ms-transform: scale(1, 0);
        -o-transform: scale(1, 0);
        transform: scale(1, 0)
    }
    100% {
        -webkit-transform: scale(1, 1);
        -moz-transform: scale(1, 1);
        -ms-transform: scale(1, 1);
        -o-transform: scale(1, 1);
        transform: scale(1, 1)
    }
}

@keyframes lineLow {
    0% {
        -webkit-transform: scale(1, 1);
        -moz-transform: scale(1, 1);
        -ms-transform: scale(1, 1);
        -o-transform: scale(1, 1);
        transform: scale(1, 1)
    }
    50% {
        -webkit-transform: scale(1, 0);
        -moz-transform: scale(1, 0);
        -ms-transform: scale(1, 0);
        -o-transform: scale(1, 0);
        transform: scale(1, 0)
    }
    100% {
        -webkit-transform: scale(1, 1);
        -moz-transform: scale(1, 1);
        -ms-transform: scale(1, 1);
        -o-transform: scale(1, 1);
        transform: scale(1, 1)
    }
}

.wrap .btn-bgm.on i:nth-child(4) {
    -webkit-animation: lineLow 1.5s .9s linear infinite 300ms 0 ease;
    -moz-animation: lineLow 1.5s .9s linear infinite 300ms 0 ease;
    -ms-animation: lineLow 1.5s .9s linear infinite 300ms 0 ease;
    animation: lineLow 1.5s .9s linear infinite 300ms 0 ease;
    -moz-animation: lineLow 1.5s .9s linear infinite;
    -webkit-animation: lineLow 1.5s .9s linear infinite;
    -o-animation: lineLow 1.5s .9s linear infinite;
    -ms-animation: lineLow 1.5s .9s linear infinite;
    animation: lineLow 1.5s .9s linear infinite
}

@-webkit-keyframes lineLow {
    0% {
        -webkit-transform: scale(1, 1);
        -moz-transform: scale(1, 1);
        -ms-transform: scale(1, 1);
        -o-transform: scale(1, 1);
        transform: scale(1, 1)
    }
    50% {
        -webkit-transform: scale(1, 0);
        -moz-transform: scale(1, 0);
        -ms-transform: scale(1, 0);
        -o-transform: scale(1, 0);
        transform: scale(1, 0)
    }
    100% {
        -webkit-transform: scale(1, 1);
        -moz-transform: scale(1, 1);
        -ms-transform: scale(1, 1);
        -o-transform: scale(1, 1);
        transform: scale(1, 1)
    }
}

@-moz-keyframes lineLow {
    0% {
        -webkit-transform: scale(1, 1);
        -moz-transform: scale(1, 1);
        -ms-transform: scale(1, 1);
        -o-transform: scale(1, 1);
        transform: scale(1, 1)
    }
    50% {
        -webkit-transform: scale(1, 0);
        -moz-transform: scale(1, 0);
        -ms-transform: scale(1, 0);
        -o-transform: scale(1, 0);
        transform: scale(1, 0)
    }
    100% {
        -webkit-transform: scale(1, 1);
        -moz-transform: scale(1, 1);
        -ms-transform: scale(1, 1);
        -o-transform: scale(1, 1);
        transform: scale(1, 1)
    }
}

@-ms-keyframes lineLow {
    0% {
        -webkit-transform: scale(1, 1);
        -moz-transform: scale(1, 1);
        -ms-transform: scale(1, 1);
        -o-transform: scale(1, 1);
        transform: scale(1, 1)
    }
    50% {
        -webkit-transform: scale(1, 0);
        -moz-transform: scale(1, 0);
        -ms-transform: scale(1, 0);
        -o-transform: scale(1, 0);
        transform: scale(1, 0)
    }
    100% {
        -webkit-transform: scale(1, 1);
        -moz-transform: scale(1, 1);
        -ms-transform: scale(1, 1);
        -o-transform: scale(1, 1);
        transform: scale(1, 1)
    }
}

@-o-keyframes lineLow {
    0% {
        -webkit-transform: scale(1, 1);
        -moz-transform: scale(1, 1);
        -ms-transform: scale(1, 1);
        -o-transform: scale(1, 1);
        transform: scale(1, 1)
    }
    50% {
        -webkit-transform: scale(1, 0);
        -moz-transform: scale(1, 0);
        -ms-transform: scale(1, 0);
        -o-transform: scale(1, 0);
        transform: scale(1, 0)
    }
    100% {
        -webkit-transform: scale(1, 1);
        -moz-transform: scale(1, 1);
        -ms-transform: scale(1, 1);
        -o-transform: scale(1, 1);
        transform: scale(1, 1)
    }
}

@keyframes lineLow {
    0% {
        -webkit-transform: scale(1, 1);
        -moz-transform: scale(1, 1);
        -ms-transform: scale(1, 1);
        -o-transform: scale(1, 1);
        transform: scale(1, 1)
    }
    50% {
        -webkit-transform: scale(1, 0);
        -moz-transform: scale(1, 0);
        -ms-transform: scale(1, 0);
        -o-transform: scale(1, 0);
        transform: scale(1, 0)
    }
    100% {
        -webkit-transform: scale(1, 1);
        -moz-transform: scale(1, 1);
        -ms-transform: scale(1, 1);
        -o-transform: scale(1, 1);
        transform: scale(1, 1)
    }
}

.shiling_btn {
    display: block;
    width: 99px;
    height: 125px;
    background: url(https://hsqsl.res.netease.com/pc/fab/20210728193411/img/shiling/12+_web_07a9cd4.png) no-repeat;
    background-size: 100% 100%;
    position: absolute;
    left: 50%;
    bottom: 75px;
    margin-left: 308px;
    z-index: 9;
    top: 32px
}

.shiling-layer {
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, .5);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;
    display: none
}

.shiling-layer .shiling-pop {
    width: 795px;
    height: 468px;
    background: url(https://hsqsl.res.netease.com/pc/fab/20210728193411/img/shiling/textarea_web_15229d4.png) no-repeat center;
    background-size: 100% 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding-top: 50px;
    box-sizing: border-box
}

.shiling-layer .shiling-pop .shiling-close {
    display: block;
    width: 39px;
    height: 39px;
    background: url(https://hsqsl.res.netease.com/pc/fab/20210728193411/img/shiling/icon_close_3084884.png) no-repeat;
    background-size: 100% 100%;
    position: absolute;
    top: 9px;
    right: -48px;
    transition: all .3s ease
}

.shiling-layer .shiling-pop .shiling-close:hover {
    transform: rotate(-180deg)
}

.shiling-layer .shiling-pop .shiling-title {
    width: 681px;
    height: 29px;
    background: url(https://hsqsl.res.netease.com/pc/fab/20210728193411/img/shiling/title_web_b58f53b.png) no-repeat center;
    background-size: 100% 100%;
    margin: 0 auto 10px
}

.shiling-layer .shiling-pop .shilin-txt {
    width: 642px;
    height: 314px;
    padding: 20px;
    box-sizing: border-box;
    margin: 0 auto
}

.shiling-layer .shiling-pop .shilin-txt p {
    font-size: 12px;
    color: #98876d;
    letter-spacing: .9px;
    line-height: 16.6px;
    margin-bottom: 12px
}

.shiling-layer .shiling-pop .shilin-txt a {
    color: #98876d;
    text-decoration: underline
}

h1 {
    font-size: 0;
    width: 100%;
    height: 0;
    overflow: hidden
}


/* 04 */

.show {
    width: 1200px;
    height: 900px;
    position: absolute;
    left: 50%;
    margin-left: -580px;
    /* top: 288px; */
    z-index: 9;
    box-sizing: border-box;
    border: 5px solid #47388a;
    border-radius: 20px;
    background: url(../show/terrain_z1.png);
}

.zindshowp1 {
    width: 75px;
    height: 75px;
    position: absolute;
    /* background: url(show/bilgewater.png) no-repeat; */
    margin-left: 895px;
    margin-top: 501px;
    background-size: 100%;
    cursor: pointer;
}

.zindshowp1:hover {
    width: 75px;
    height: 75px;
    position: absolute;
    background: url(../show/bilgewater.png) no-repeat;
    margin-left: 895px;
    margin-top: 501px;
    background-size: 100%;
    cursor: pointer;
}

.zindshowp2 {
    width: 164px;
    height: 164px;
    position: absolute;
    /* background: url(show/demacia.png) no-repeat; */
    margin-left: 152px;
    margin-top: 308px;
    background-size: 100%;
    cursor: pointer;
}

.zindshowp2:hover {
    width: 164px;
    height: 164px;
    position: absolute;
    background: url(../show/demacia.png) no-repeat;
    margin-left: 152px;
    margin-top: 308px;
    background-size: 100%;
    cursor: pointer;
}

.zindshowp3 {
    width: 518px;
    height: 324px;
    position: absolute;
    /* background: url(show/freljord.png) no-repeat; */
    margin-left: -1px;
    margin-top: 33px;
    background-size: 100%;
    cursor: pointer;
}

.zindshowp3:hover {
    width: 518px;
    height: 324px;
    position: absolute;
    background: url(../show/freljord.png) no-repeat;
    margin-left: -1px;
    margin-top: 33px;
    background-size: 100%;
    cursor: pointer;
}

.zindshowp4 {
    width: 351px;
    height: 361px;
    position: absolute;
    /* background: url(show/ionia.png) no-repeat; */
    margin-left: 761px;
    margin-top: 105px;
    background-size: 100%;
    cursor: pointer;
}

.zindshowp4:hover {
    width: 351px;
    height: 361px;
    position: absolute;
    background: url(../show/ionia.png) no-repeat;
    margin-left: 761px;
    margin-top: 105px;
    background-size: 100%;
    cursor: pointer;
}

.zindshowp5 {
    width: 120px;
    height: 107px;
    position: absolute;
    /* background: url(show/ixtal.png) no-repeat; */
    margin-left: 720px;
    margin-top: 614px;
    background-size: 100%;
    cursor: pointer;
}

.zindshowp5:hover {
    width: 120px;
    height: 107px;
    position: absolute;
    background: url(../show/ixtal.png) no-repeat;
    margin-left: 720px;
    margin-top: 614px;
    background-size: 100%;
    cursor: pointer;
}

.zindshowp6 {
    width: 614px;
    height: 462px;
    position: absolute;
    /* background: url(show/noxus.png) no-repeat; */
    margin-left: 294px;
    margin-top: 156px;
    background-size: 100%;
    cursor: pointer;
}

.zindshowp6:hover {
    width: 614px;
    height: 462px;
    position: absolute;
    background: url(../show/noxus.png) no-repeat;
    margin-left: 294px;
    margin-top: 156px;
    background-size: 100%;
    cursor: pointer;
}

.zindshowp7 {
    width: 109px;
    height: 102px;
    position: absolute;
    /* background: url(show/shadow-isles.png) no-repeat; */
    margin-left: 1062px;
    margin-top: 644px;
    background-size: 100%;
    cursor: pointer;
}

.zindshowp7:hover {
    width: 109px;
    height: 102px;
    position: absolute;
    background: url(../show/shadow-isles.png) no-repeat;
    margin-left: 1062px;
    margin-top: 644px;
    background-size: 100%;
    cursor: pointer;
}

.zindshowp8 {
    width: 394px;
    height: 311px;
    position: absolute;
    /* background: url(show/shurima.png) no-repeat; */
    margin-left: 369px;
    margin-top: 554px;
    background-size: 100%;
    cursor: pointer;
}

.zindshowp8:hover {
    width: 394px;
    height: 311px;
    position: absolute;
    background: url(../show/shurima.png) no-repeat;
    margin-left: 369px;
    margin-top: 554px;
    background-size: 100%;
    cursor: pointer;
}

.zindshowp9 {
    width: 117px;
    height: 103px;
    position: absolute;
    /* background: url(show/targon.png) no-repeat; */
    margin-top: 667px;
    margin-left: 345px;
    background-size: 100%;
    cursor: pointer;
}

.zindshowp9:hover {
    width: 117px;
    height: 103px;
    position: absolute;
    background: url(../show/targon.png) no-repeat;
    margin-top: 667px;
    margin-left: 345px;
    background-size: 100%;
    cursor: pointer;
}

.itemstit {
    position: relative;
}

.itemstit img {
    width: 80px;
    height: 80px;
}

.itemstit .itemstitp1 {
    margin-left: 1px;
    margin-top: 1px;
}

.itemstit .itemstitp2 {
    margin-left: 31px;
    margin-top: 38px;
}

.itemstit .itemstitp3 {
    margin-left: 243px;
    margin-top: 144px;
}

.itemstit .itemstitp4 {
    margin-left: 171px;
    margin-top: 120px;
}

.itemstit .itemstitp5 {
    margin-left: 8px;
    margin-top: 18px;
}

.itemstit .itemstitp6 {
    margin-left: 295px;
    margin-top: 177px;
}

.itemstit .itemstitp7 {
    margin-left: 18px;
    margin-top: 10px;
}

.itemstit .itemstitp8 {
    margin-left: 170px;
    margin-top: 85px;
}

.itemstit .itemstitp9 {
    margin-left: 10px;
    margin-top: 16px;
}

#previewer {
    position: absolute;
    /* border: 1px solid rgb(97, 70, 53); */
    /* background: rgb(60, 33, 22); */
    padding: 5px;
    display: none;
    /* color: rgb(255, 255, 255); */
}


/* footer */

.foot {
    margin: 0 0 0 0;
    background: url() top repeat-x rgb(0, 0, 0);
}

.footer {
    margin: 0 auto;
    width: 1200px;
    overflow: hidden;
    font-size: 12px;
    line-height: 24px;
}

.footer img {
    border-radius: 1em;
}

.footer a {
    font-size: 14px;
}

.footer span {
    font-size: 14px;
}

.footer p {
    font-size: 14px;
    color: #FFF;
}