/*! Copyright © 2011 - 2020 miHoYo. All Rights Reserved */
.home {
    position: relative;
    margin: 0 auto;
    width: 100%;
    min-width: 1280px;
    height: 100vh
}

.home img {
    image-rendering: -o-crisp-edges;
    image-rendering: -webkit-optimize-contrast;
    -ms-interpolation-mode: nearest-neighbor
}

.home .sidebar {
    position: fixed;
    left: 0;
    top: 77px;
    z-index: 9;
    padding: 50px 0;
    width: 10%;
    height: 100%;
    text-align: center;
    background: rgba(0, 0, 0, .8);
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    opacity: 0;
    -webkit-transform: translate(-100%);
    -ms-transform: translate(-100%);
    transform: translate(-100%);
    -webkit-transition: opacity .5s ease-out, -webkit-transform .5s ease-out;
    transition: opacity .5s ease-out, -webkit-transform .5s ease-out;
    -o-transition: opacity .5s ease-out, transform .5s ease-out;
    transition: opacity .5s ease-out, transform .5s ease-out;
    transition: opacity .5s ease-out, transform .5s ease-out, -webkit-transform .5s ease-out
}

.home .sidebar--anim {
    opacity: 1;
    -webkit-transform: translate(0);
    -ms-transform: translate(0);
    transform: translate(0)
}

.home .sidebar .logo {
    display: block;
    margin: 0 auto;
    width:80%;
}

.home .sidebar .logo img {
    width: 100%
}

.home .sidebar .nav {
    overflow-y: auto;
    margin: 50px auto 0
}

.home .sidebar .nav__item {
    position: relative;
    margin: 0 auto 50px;
    cursor: pointer
}

.home .sidebar .nav__item:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    margin: 0 auto;
    /*width: .74rem;*/
    /*height: .74rem;*/
    border-radius: 50%;
    background-color: rgba(0, 0, 0, .5);
    opacity: 1;
    -webkit-transition: opacity .3s;
    -o-transition: opacity .3s;
    transition: opacity .3s;
    will-change: opacity
}

.home .sidebar .nav__icon {
    display: block;
    margin: 0 auto 6px;
       width: 80%;
    /*height: 50px;*/
    /*border-radius: 50%;*/
    border: 2px solid transparent;
    -webkit-transition: border .3s;
    -o-transition: border .3s;
    transition: border .3s;
    will-change: border
}

.home .sidebar .nav__name {
    font-size: 14px;
    font-weight: 700;
    color: #787878;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-transition: color .3s;
    -o-transition: color .3s;
    transition: color .3s;
    will-change: color
}

.home .sidebar .nav__item.active:after,
.home .sidebar .nav__item:hover:after {
    opacity: 0
}

/*.home .sidebar .nav__item.active .nav__icon,
.home .sidebar .nav__item:hover .nav__icon {
    border: 2px solid #4cd7e9
}
*/
.home .sidebar .nav__item.active .nav__name,
.home .sidebar .nav__item:hover .nav__name {
    color: #4cd7e9
}

.home .wrapper {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%
}

.home .wrapper .parallax-bg {
    position: absolute;
    top: 77px;
    left: 0;
    width: 100%;
    height: 150%;
    background-repeat: repeat;
    background-size: 88px 88px;
    background-position: top;
    background-image: url(../image/cpbk.png);
}

.home .wrapper .swiper-slide {
    width: 100%;
    height: auto;
}

.home .wrapper .swiper-slide:last-child {
    /*height: auto !important;*/
}

.home .wrapper .swiper-slide:first-child .role {
    bottom: .43rem
}

.home .wrapper .swiper-slide:first-child .decoration {
    width: 17.29rem;
    height: 8.03rem
}

.home .wrapper .swiper-slide:nth-child(2) .role {
    right: -34%
}

.home .wrapper .swiper-slide:nth-child(2) .decoration {
    width: 17.03rem;
    height: 7.17rem;
    left: -2.2rem;
    bottom: .4rem
}

.home .wrapper .swiper-slide:nth-child(3) .decoration {
    width: 15.11rem;
    height: 8.14rem;
    left: -3.43rem
}

.home .wrapper .swiper-slide:nth-child(3) .decoration:last-child {
    width: 16.11rem;
    height: 9.1rem;
    left: -.8rem;
    bottom: -.1rem
}

.home .wrapper .swiper-slide:nth-child(4) .role {
    right: -4%
}

.home .wrapper .swiper-slide:nth-child(4) .decoration {
    width: 18.55rem;
    height: 9.72rem;
    left: -3.4rem;
    bottom: -1rem
}

.home .wrapper .swiper-slide:nth-child(4) .decoration:last-child {
    width: 17.31rem;
    height: 8.3rem;
    left: -2.2rem;
    bottom: -.1rem
}

.home .wrapper .swiper-slide:nth-child(5) .desc {
    width: 5rem;
    margin-top: .2rem
}

.home .wrapper .swiper-slide:nth-child(5) .link {
    display: block
}

.home .wrapper .swiper-slide:nth-child(5) .link--ys {
    margin-top: 10px
}

.home .wrapper .swiper-slide:nth-child(5) .decoration {
    width: 15.26rem;
    height: 4.31rem;
    top: -2.4rem;
    left: -1.8rem;
    bottom: auto
}

.home .wrapper .swiper-slide:nth-child(6) .decoration {
    width: 18.77rem;
    height: 8.98rem;
    left: -3.5rem;
    bottom: -.66rem
}

.home .section {
    width: 100%;
    height: 100%;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    position: relative;
}

.home .section .motion {
    -webkit-transition: opacity .5s ease-out, -webkit-transform .5s ease-out;
    transition: opacity .5s ease-out, -webkit-transform .5s ease-out;
    -o-transition: opacity .5s ease-out, transform .5s ease-out;
    transition: opacity .5s ease-out, transform .5s ease-out;
    transition: opacity .5s ease-out, transform .5s ease-out, -webkit-transform .5s ease-out
}

.home .section .container {
    position: absolute;
    top: 25%;
    width: 80% !important;
    padding: 0;
    height: 60%;
    right: 0;
  /*  width: 11.43rem;
    height: 5.1rem;*/
}
.nswiper{box-sizing: border-box;width: 100%;padding-right: 0%;position: relative;}

.home .section .decoration {
    position: absolute;
    left: -1.76rem;
    bottom: -.33rem;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 0 0;
    pointer-events: none;
    opacity: 1
}

.home .section .scene {
    bottom: .3rem;
    width: 15.3rem;
    height: 5.74rem;
    -webkit-transform: translateY(-20%);
    -ms-transform: translateY(-20%);
    transform: translateY(-20%)
}

.home .section .blackboard,
.home .section .scene {
    position: absolute;
    -o-object-fit: cover;
    object-fit: cover;
    opacity: 0
}

.home .section .blackboard {
    top: 0;
    left: 0;
    width: 11.43rem;
    height: 5.1rem;
    -webkit-transform: translateY(20%);
    -ms-transform: translateY(20%);
    transform: translateY(20%)
}

.home .section .role {
    position: absolute;
    bottom: .52rem;
    width: auto;
    height: 7.46rem
}

.home .section .box {
    position: absolute;
    top: .54rem;
    font-size: 0;
    opacity: 0;
    -webkit-transform: translateY(20%);
    -ms-transform: translateY(20%);
    transform: translateY(20%)
}

.home .section .header {
    position: absolute;
    top: -2.46rem
}

.home .section .header .icon {
    margin-right: .2rem;
    max-width: 100%;
    width: auto;
    height: .64rem;
    vertical-align: middle
}

.home .section .header .logo {
    /*height: 1.2rem;*/
    vertical-align: middle
}

.home .section .pv {
    display: inline-block;
    width: 3rem;
    height: 1.46rem;
    text-align: center;
    line-height: 1.46rem;
    background-size: cover;
    cursor: pointer
}

.home .section .pv__btn {
    position: relative;
    width: .64rem;
    height: .64rem;
    vertical-align: middle;
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAVCAYAAABPPm7SAAAA/klEQVQ4T6XTvStGYRiA8ev6rwz+E/KRFAObUgYzgzDYWQx6V5MsrBYZbAyUIsqgJB7uOk/p9H48z3nv8XTu3zmd81ymlCaBHrAHbKnfVIwppWXgoNm5BGbUu1KjDcTeO7CqHpYg/YC8dwIsqa/DoGFA7D0Cc+rZIGQUEHs/wD6wrn62oRIg79wAU+r1f6QGiL14gw1gR01xoRbIDz8HZtWHrkBAb8DiOEAgL+MAz8B8V+AUWFCfaoEPYE3N7VT9hStgWr2tPQeR9zawqX7VnsT7Ju+LLi0cAStq5D1w+n3EyDcyjpxHThuIbCPfyLhoApgAjptkd3MkRdt/N/0Cw5x+ls8SjaIAAAAASUVORK5CYII=) no-repeat 50%/.16rem .21rem;
    cursor: pointer
}

.home .section .pv__btn .circle {
    display: block;
    width: .64rem;
    height: .64rem;
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAMAAACdt4HsAAACglBMVEVHcEz///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////+LjJrKAAAA1nRSTlMAAhv69PL9AfzzCRoQ9ecIDPjxEffrDQQc++rwCidwHfkFhhQqD9cm7LdxhOm1xJUr4N3h/u7QCym4LNXlrxUSOPYljavIsaAiueg+QcAogC4DxYIyxmMt1AcXv1iK5Id+rCOuFqjW2EhsrWrLwUriiSBLId5/WVbRc4xePe8GYFeDVJ7OtOM8b3kYeI6wqjdAz5jmup/CRce7SSTfkslpe0dtWraFDoHSfXVfdrKavhkwP7MxZ4s7nMN0zWUTVaWdlptD7TY53KLZHoiRvE+XfJTTzJB3Sr9RtQAABAZJREFUGBmdwQN7XFkABuDv8pw7thXbtm1WUZsmKYLatm23a9u2vft/Nptt+6TtJHPnvi+CYsz1zffSGn74Wms0auPHfjnna64vYyDXInayP3XKKjmpUStJFQHq5OOnak5M+vMgj7dEpxWF8991jry6ravrxPtLxzOSBbFCV3O00AY5ova7bqTcubxMHWWOMRhiykrZ6F9/T8lwZ5ti90arEBpZ8FLh4jyCWZi8xW8kLkmmUm6ig2BODP5HIhCESr3voEvcWbJDjzmYV6gxL/vr21N5Z+zqMgTlXzO2Uo/5RcT1D4iNgw48iVz/XuBOmRFKzL5xp1B3neBxlSNGLqGcQUj2bw4GLCOVeIy/zhJYlc5ABpJfHTDW/YhHfDJo4qq9kMm7ipOqojCL/raOXkiHXCQ9gSavVOEhcjhWPFBOIBv59qw4dobgAccwPfRpB8Jg33NIfMuP+1S+HL5fg7Bo3uV3Jqowg+TniqmVCJO3h25pxQxbkuTaHYEwRWy3SkMGTCPRo/QVNcKmfpoujMY0z3EheXMHwmbf4zJ9qALg76GvsVCAXUInHACzrtHt00MBvc+tu8bAXKXNbIciCzK1azSov0Jrl0OR5bV0Yj2ap4SjHiji+ceU1Ywj8boVBIqQuzrrSvzGZ1ZCobgNwk1cdV5RQyH1LS4BsbQ6CgpFVTtHEW9J00AhTZrFCp6PtEEhWyTPwyhtNEAhQ5tkhFHaaIBChjbJAp6PtEEhWyQvId6SpoFC5i+MVsQ6T0VBodKltAgJ3C01FFLXcA34WdgQB4XiMqU0rLbq7hIoQiYb4+/hTJZw3ANFPHeErCasnaC1y6HIsQQxdT1iftJmtkOR7gztGg2Yazq3Tw8FVFtNuhUMwLbQFgcUcLTQDxwAVFtNrk12hK1js8udqMK0/IW0QI2wsSm0yIv/5L0gWHdHIEy7eq18kg0zvLm0xoswtfaIW9IJZuh9OdoqDcKiqdLm+FS4z3GSDvTZEQZ73wBdyuIB0jQq5h4mkI2cPisWvUfw0KLeYnq1kEAmUthAz3+8CLOYI01cST7kIdElnDvJjEf46yyB4XQCGZgFJwMVn7N4zLLPLFzB6QiExJRf4LQX6/GEZftNzo/6NAhF38abvlyPINgkXXbxtrhdmB8pv7SXRVDmd2Kd2s5etR3z8rwdgzno36zNybambPJ7EITejpAYx5EDEnV1vth9zEAwCzEs7k58SoXQVK3PFZmy3VkNQ+vi2FLzszabpqyU9a4bKshwP98OOQzRL6cWS6Kg2zC+6tzgM5E3Lw7/dUMniFJxwQ4GsnjYr7ouZVkljhp5nq8IiJzgyliSdFmth1wkZm3T6j8S/kwWLBahcWHK37eb1moIgvkXiifDWD4BL0sAAAAASUVORK5CYII=) no-repeat 50%/100% 100%
}

.home .section .pv__btn:hover .circle {
    -webkit-animation: zhuan 1s linear infinite;
    animation: zhuan 1s linear infinite
}

.home .section .title {
    margin: 0;
    font-size: .4rem;
    color: #fefefe
}

.home .section .desc {
    position: relative;
    margin-top: .4rem;
    margin-bottom: .2rem;
    width: 4.6rem;
    font-size: .18rem;
    line-height: 1.5;
    color: #e0e0e0;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

.home .section .desc:after {
    content: "";
    position: absolute;
    top: 2px;
    width: 3px;
    height: 22px;
    background: #228bd3
}

.home .section .link-con {
    position: absolute;
    bottom: .76rem
}

.home .section .link {
    position: relative;
    display: block;
    padding: .1rem .6rem .1rem .4rem;
    font-size: 16px;
    color: #fff;
    background: #19a3ff
}

.home .section .link:after {
    content: "";
    position: absolute;
    top: 50%;
    right: 20px;
    display: block;
    width: 14px;
    height: 14px;
    margin-top: -7px;
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAANCAYAAACZ3F9/AAAAuElEQVQoU52SOwoCQRAF64knMTQwUWNPoigK6iU8hrGsgUfSyB/+Mg9g8GRgVnRhd8AJe7poul+Jkme7B/SBhaRbsU0VYAfYAFtgKun+3VsKhibbXSADTsBY0jWHK8EIt4EVECZOJJ1DPQlGuAWsgScwlHSU7SZQK9s11g00gCWwB2YBfAH1BFj8zv6dOP9nx5GkQxK0nV/1ESNJX7WQY4jikszRdm7OLprzo12VcsHVQXT1Y0w+8Q1Iw0r5SDkkeAAAAABJRU5ErkJggg==) no-repeat 50% 50%/100% 100%
}

.home .section .link:hover:after {
    -webkit-animation: move .5s ease-out forwards;
    animation: move .5s ease-out forwards
}

.home .section[data-layout=right] .scene {
    left: .2rem
}

.home .section[data-layout=right] .role {
    left: 0;
    opacity: 0;
    -webkit-transform: translateX(-20%);
    -ms-transform: translateX(-20%);
    transform: translateX(-20%);
    -webkit-transform-origin: center bottom;
    -ms-transform-origin: center bottom;
    transform-origin: center bottom
}

.home .section[data-layout=right] .box {
    right: .25rem;
    text-align: right
}

.home .section[data-layout=right] .header {
    right: .5rem;
    opacity: 0;
    -webkit-transform: translateX(20%);
    -ms-transform: translateX(20%);
    transform: translateX(20%);
    -webkit-transform-origin: center bottom;
    -ms-transform-origin: center bottom;
    transform-origin: center bottom
}

.home .section[data-layout=right] .pv {
    margin-right: -.5rem
}

.home .section[data-layout=right] .desc:after,
.home .section[data-layout=right] .title:after {
    right: -14px
}

.home .section[data-layout=right] .link-con {
    right: .25rem
}

.home .section[data-layout=left] .scene {
    right: .2rem
}

.home .section[data-layout=left] .role {
    right: 0;
    opacity: 0;
    -webkit-transform: translateX(20%);
    -ms-transform: translateX(20%);
    transform: translateX(20%);
    -webkit-transform-origin: center bottom;
    -ms-transform-origin: center bottom;
    transform-origin: center bottom
}

.home .section[data-layout=left] .box {
    left: .25rem;
    text-align: left
}

.home .section[data-layout=left] .header {
    left: .5rem;
    opacity: 0;
    -webkit-transform: translateX(-20%);
    -ms-transform: translateX(-20%);
    transform: translateX(-20%);
    -webkit-transform-origin: center bottom;
    -ms-transform-origin: center bottom;
    transform-origin: center bottom
}

.home .section[data-layout=left] .pv {
    margin-left: -.5rem
}

.home .section[data-layout=left] .desc:after,
.home .section[data-layout=left] .title:after {
    left: -14px
}

.home .section[data-layout=left] .link-con {
    left: .25rem
}

.home .swiper-slide-active.animated .blackboard,
.home .swiper-slide-active.animated .box,
.home .swiper-slide-active.animated .scene {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0)
}

.home .swiper-slide-active.animated .header,
.home .swiper-slide-active.animated .role {
    opacity: 1;
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
    -webkit-transition-delay: .8s;
    -o-transition-delay: .8s;
    transition-delay: .8s
}

.home .swiper-slide-active.animated .decoration {
    opacity: 1;
    -webkit-transition-delay: .3s;
    -o-transition-delay: .3s;
    transition-delay: .3s
}

.home .section.bbs .container {
    height: 5.46rem;
    -webkit-transform: translate(-50%, -24%);
    -ms-transform: translate(-50%, -24%);
    transform: translate(-50%, -24%)
}

.home .section.bbs .scene {
    top: 0;
    bottom: auto;
    right: 0;
    left: 50%;
    width: 19.2rem;
    height: 5.46rem;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%)
}

.home .section.bbs .blackboard {
    left: auto;
    right: 2rem;
    top: -.31rem;
    bottom: auto;
    width: 13.34rem;
    height: 4.85rem;
    opacity: 0;
    -webkit-transform: translate(0);
    -ms-transform: translate(0);
    transform: translate(0)
}

.home .section.bbs .role {
    width: auto;
    height: 7.68rem;
    bottom: 0;
    right: -.8rem
}

.home .section.bbs .box {
    left: auto;
    right: 5rem;
    height: calc(100% - .54rem);
    text-align: right;
    opacity: 1;
    -webkit-transform: translate(-20%);
    -ms-transform: translate(-20%);
    transform: translate(-20%)
}

.home .section.bbs .header {
    top: -1.66rem;
    height: .84rem
}

.home .section.bbs .header img {
    height: 100%;
    width: auto
}

.home .section.bbs .desc {
    position: absolute;
    right: .16rem;
    bottom: 0;
    width: 5.2rem;
    font-size: .18rem;
    text-align: right;
    color: #fff
}

.home .section.bbs .desc:after {
    left: auto;
    right: -14px;
    background-color: #fff
}

.home .section.bbs .link-con {
    left: auto;
    right: 5rem;
    bottom: 1.25rem
}

.home .section.bbs .tags {
    width: 7rem;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

.home .section.bbs .tags dl {
    display: inline-block;
    margin: .2rem 0 0 .4rem;
    line-height: 2
}

.home .section.bbs .tags dt {
    font-size: .24rem;
    color: hsla(0, 0%, 100%, .8)
}

.home .section.bbs .tags dd {
    font-size: .18rem;
    color: hsla(0, 0%, 100%, .5)
}

.home .swiper-slide-active.animated .section.bbs .blackboard,
.home .swiper-slide-active.animated .section.bbs .box {
    opacity: 1;
    -webkit-transform: translate(0);
    -ms-transform: translate(0);
    transform: translate(0)
}

.home .swiper-slide-active.animated .section.bbs .role {
    opacity: 1;
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0)
}

.home .section.ip .container {
    margin: 0 auto;
    width: 11rem;
    height: auto;
    text-align: center;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%)
}

.home .section.ip .shape {
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: -1;
    width: 5.06rem;
    height: 4.35rem
}

.home .section.ip .title {
    margin: 0 auto;
    font-size: .54rem;
    font-weight: 700;
    letter-spacing: .2em;
    color: #fff
}

.home .section.ip .title:after {
    content: "";
    display: block;
    margin: .24rem auto;
    width: .32rem;
    height: 4px;
    background: #fff
}

.home .section.ip .desc {
    margin: 0 auto;
    width: 80%;
    font-size: .18rem;
    line-height: 1.5;
    color: #e0e0e0;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

.home .section.ip .desc:after {
    display: none;
    content: ""
}

.home .section.ip .comic {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    margin-top: .3rem
}

.home .section.ip .comic__item {
    width: 3rem;
    opacity: 0;
    -webkit-transform: translateY(30%);
    -ms-transform: translateY(30%);
    transform: translateY(30%);
    -webkit-transition: all 1s ease-out;
    -o-transition: all 1s ease-out;
    transition: all 1s ease-out
}

.home .section.ip .comic__cover {
    position: relative;
    display: block;
    width: 4.32rem;
    height: 5.5rem;
    left: 50%;
    -webkit-transform: translateX(-52%);
    -ms-transform: translateX(-52%);
    transform: translateX(-52%)
}

.home .section.ip .comic__link {
    position: relative;
    display: block;
    margin: .24rem auto 0;
    width: 1.66rem;
    height: .36rem;
    text-align: left;
    line-height: .36rem;
    font-size: .16rem;
    text-indent: 2.6em;
    color: #fff;
    border: 1px solid #fff
}

.home .section.ip .comic__link:after {
    content: "";
    position: absolute;
    top: 50%;
    right: 20px;
    display: block;
    width: .14rem;
    height: .14rem;
    margin-top: -7px;
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAANCAYAAACZ3F9/AAAAuElEQVQoU52SOwoCQRAF64knMTQwUWNPoigK6iU8hrGsgUfSyB/+Mg9g8GRgVnRhd8AJe7poul+Jkme7B/SBhaRbsU0VYAfYAFtgKun+3VsKhibbXSADTsBY0jWHK8EIt4EVECZOJJ1DPQlGuAWsgScwlHSU7SZQK9s11g00gCWwB2YBfAH1BFj8zv6dOP9nx5GkQxK0nV/1ESNJX7WQY4jikszRdm7OLprzo12VcsHVQXT1Y0w+8Q1Iw0r5SDkkeAAAAABJRU5ErkJggg==) no-repeat 50% 50%/100% 100%
}

.home .section.ip .comic__link:hover:after {
    -webkit-animation: move .5s ease-out forwards;
    animation: move .5s ease-out forwards
}

.home .swiper-slide-active.animated .section.ip .comic__item:first-child {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
    -webkit-transition-delay: .4s;
    -o-transition-delay: .4s;
    transition-delay: .4s
}

.home .swiper-slide-active.animated .section.ip .comic__item:nth-child(2) {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
    -webkit-transition-delay: .8s;
    -o-transition-delay: .8s;
    transition-delay: .8s
}

.home .swiper-slide-active.animated .section.ip .comic__item:nth-child(3) {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
    -webkit-transition-delay: 1.2s;
    -o-transition-delay: 1.2s;
    transition-delay: 1.2s
}

.home .pv__modal {
    overflow: visible !important;
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    z-index: 9999;
    background: rgba(0, 0, 0, .8);
    font-size: 0;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%)
}

.home .pv__modal video {
    outline: none
}

.home .pv__modal button,
.home .pv__modal img {
    position: absolute
}

.home .pv__modal img {
    display: block;
    left: -72px;
    bottom: -40px;
    z-index: 1;
    width: auto;
    height: 106px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    pointer-events: none
}

.home .pv__modal button {
    right: 8px;
    top: 2px;
    width: 19px;
    height: 19px;
    font-size: 0;
    border: 0;
    outline: none;
    background-position: 0 0;
    cursor: pointer
}

.home .pv__modal button:hover {
    background-position: 0 -19px
}

.home .pv__modal .pv__video--modal {
    background-color: transparent
}

@media screen and (min-width:1921px) and (max-width:3328px) {
    .wrapper .section .container {
        -webkit-transform: translate(-50%, -50%) !important;
        -ms-transform: translate(-50%, -50%) !important;
        transform: translate(-50%, -50%) !important
    }
}

#frame {
    overflow: hidden
}

.h5 {
    position: relative;
    margin: 0 auto;
    height: 100%
}

.h5 .header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 10;
    padding: 0 .3rem;
    width: 100%;
    height: .8rem;
    font-size: 0;
    background: #33333a;
    -webkit-box-sizing: border-box;
    box-sizing: border-box
}

.h5 .header .logo {
    display: block;
    width: 1.42rem
}

.h5 .header .logo img {
    width: 100%;
    vertical-align: middle
}

.h5 .header .menu {
    width: .4rem;
    height: .32rem;
    background-color: transparent
}

.h5 .header .menu img {
    width: 100%
}

.h5 .sidebar {
    position: absolute;
    right: 0;
    top: 0;
    z-index: 9;
    width: 0;
    height: 100%;
    text-align: center;
    background: rgba(0, 0, 0, .5);
    opacity: 0;
    -webkit-transition: opacity .5s ease-out;
    -o-transition: opacity .5s ease-out;
    transition: opacity .5s ease-out
}

.h5 .sidebar .nav {
    float: right;
    width: 3.48rem;
    height: 100%;
    margin: .8rem 0 0;
    background-color: #33333a;
    -webkit-transform: translate(100%);
    -ms-transform: translate(100%);
    transform: translate(100%);
    -webkit-transition: -webkit-transform .5s ease-out;
    transition: -webkit-transform .5s ease-out;
    -o-transition: transform .5s ease-out;
    transition: transform .5s ease-out;
    transition: transform .5s ease-out, -webkit-transform .5s ease-out
}

.h5 .sidebar .nav__item {
    position: relative;
    margin: 0 auto;
    width: 2.66rem;
    height: 1.44rem;
    font-size: 0;
    line-height: 1.44rem;
    text-align: left;
    border-bottom: 1px solid #3d3d48;
    cursor: pointer
}

.h5 .sidebar .nav__item:after {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    z-index: 2;
    width: .74rem;
    height: .74rem;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, .5);
    -webkit-transform: translateY(-54%);
    -ms-transform: translateY(-54%);
    transform: translateY(-54%);
    opacity: 1;
    -webkit-transition: opacity .3s;
    -o-transition: opacity .3s;
    transition: opacity .3s;
    will-change: opacity
}

.h5 .sidebar .nav__icon {
    margin: 0 0 .06rem;
    vertical-align: middle;
    width: .7rem;
    height: .7rem;
    border-radius: 50%;
    border: 1px solid transparent;
    -webkit-transition: border .3s;
    -o-transition: border .3s;
    transition: border .3s;
    will-change: border
}

.h5 .sidebar .nav__name {
    vertical-align: middle;
    margin-left: .2rem;
    font-size: .3rem;
    color: #e0e0e0;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-transition: color .3s;
    -o-transition: color .3s;
    transition: color .3s;
    will-change: color
}

.h5 .sidebar .nav__item.active:after,
.h5 .sidebar .nav__item:hover:after {
    opacity: 0
}

.h5 .sidebar .nav__item.active .nav__icon,
.h5 .sidebar .nav__item:hover .nav__icon {
    border: 1px solid #4cd7e9
}

.h5 .sidebar .nav__item.active .nav__name,
.h5 .sidebar .nav__item:hover .nav__name {
    color: #4cd7e9
}

.h5 .sidebar--anim {
    width: 100%;
    opacity: 1
}

.h5 .sidebar--anim .nav {
    -webkit-transform: translate(0);
    -ms-transform: translate(0);
    transform: translate(0)
}

.h5 .more {
    position: absolute;
    left: 50%;
    bottom: 1.2rem;
    z-index: 9;
    width: .64rem;
    height: .34rem;
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAAAiCAMAAADYiy+9AAACBFBMVEVHcEz///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////8/SOCYAAAAq3RSTlMA+vkFDPz7/v0IAawHCgMOEQYSFBUX1Nja+Pce3vYg4PUtQeL0LyQm5PLs8OoEbYeuqJOIq4ylkLh/hLd5sbZ4u326gbR7CXB1vcJqDXTBbsULcr++w8hmx8ZpEGcPzWDMsl+Dy2PKYtDPXVzS0VpZVlUY1qLVl1NSGUxQTxsaHRxN3EpJ3UdGQzciIUQ8MTo/Pufx5jY75e8r6fM0Oe0pArCemid+fIqpmR8Y32OrAAABoklEQVQYGaXBA3cjYQCG0Tf8Jklt21zbtm3bttq1bXufP7k9PT09RTKZmd6rH7GfUXnU2v7nn2Lw7Ys8CcTgr34Bp9LkQeZXoE3R78CYNLmWsh34LSl6BhjeKpciU4B2dRsBjArIlcg4YKd6jAWGBeRC6jRgvHqNBiZnyrHlq4DZ6mMkMCtFDgWXgJmqfiYAEyNyZNFqMIs1wExgxhw5kL4ezFwNMh2Yn6qkNq4B06Y4JhlYGVQSGbvA2qC45hlYEJStrC1grVUCKwwsS5eN7H1g7VVCSw2s26yEcg5BaIdsLDSwJ0MJ5OZB+KBsbbJgW5biOn8SwkeVxG4L9mcrjsv54DuupLaG4HCOBrlaAP5zcuBACPJyNUDxTfBfkiNHwnD6hPopK4HCC3LomA/yr6iPe+VQ1CnHzvqg4Jp61VVD6W25cNEPN4rVo74BKu7IleuFUFKmbp9fQE2VXOoogvL76vL2GTQ+lWu3SqG6Tqp8B89fyYMHFdBQX9sCzR/lSVUNvG6CNy/l0ZP3dPn0QZ49bISmRxqCx80ttRqSu5Wy9x+b/Jnafu7xhgAAAABJRU5ErkJggg==) no-repeat 50%/cover;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
    -webkit-animation: anim__more 2s infinite linear;
    animation: anim__more 2s infinite linear
}

.h5 .wrapper {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%
}

.h5 .wrapper .swiper-slide {
    width: 100%
}

.h5 .wrapper .swiper-slide:last-child {
    height: auto
}

.h5 .section {
    position: relative;
    width: 100%;
    height: 100%;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 50%
}

.h5 .section .motion {
    -webkit-transition: opacity, -webkit-transform 1s ease-out;
    transition: opacity, -webkit-transform 1s ease-out;
    -o-transition: opacity, transform 1s ease-out;
    transition: opacity, transform 1s ease-out;
    transition: opacity, transform 1s ease-out, -webkit-transform 1s ease-out
}

.h5 .section .sign {
    position: absolute;
    left: .3rem;
    top: .9rem
}

.h5 .section .sign .logo {
    width: auto;
    height: 1.16rem;
    vertical-align: middle
}

.h5 .section .box {
    position: absolute;
    bottom: 2.15rem;
    background: rgba(51, 51, 58, .6);
    font-size: 0;
    opacity: .6;
    -webkit-transform: translateY(20%);
    -ms-transform: translateY(20%);
    transform: translateY(20%)
}

.h5 .section .title {
    margin: 0;
    font-size: .4rem;
    color: #fefefe
}

.h5 .section .desc {
    position: relative;
    margin: .24rem .3rem .54rem;
    width: 5.7rem;
    font-size: .24rem;
    line-height: 1.5;
    letter-spacing: .1em;
    color: #e0e0e0;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

.h5 .section .link-con {
    position: absolute;
    bottom: -.3rem
}

.h5 .section .link {
    position: relative;
    padding: .16rem .7rem .16rem .4rem;
    width: 2.24rem;
    height: .6rem;
    font-size: .28rem;
    color: #fff;
    background: #19a3ff
}

.h5 .section .link:after {
    content: "";
    position: absolute;
    top: 50%;
    right: .3rem;
    display: block;
    width: .21rem;
    height: .2rem;
    margin-top: -.1rem;
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAANCAYAAACZ3F9/AAAAuElEQVQoU52SOwoCQRAF64knMTQwUWNPoigK6iU8hrGsgUfSyB/+Mg9g8GRgVnRhd8AJe7poul+Jkme7B/SBhaRbsU0VYAfYAFtgKun+3VsKhibbXSADTsBY0jWHK8EIt4EVECZOJJ1DPQlGuAWsgScwlHSU7SZQK9s11g00gCWwB2YBfAH1BFj8zv6dOP9nx5GkQxK0nV/1ESNJX7WQY4jikszRdm7OLprzo12VcsHVQXT1Y0w+8Q1Iw0r5SDkkeAAAAABJRU5ErkJggg==) no-repeat 50% 50%/100% 100%
}

.h5 .section .pv {
    display: inline-block;
    width: 3rem;
    height: 1.46rem;
    text-align: center;
    line-height: 1.46rem;
    background-size: cover
}

.h5 .section .pv__btn {
    position: relative;
    width: .64rem;
    height: .64rem;
    vertical-align: middle;
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAVCAYAAABPPm7SAAAA/klEQVQ4T6XTvStGYRiA8ev6rwz+E/KRFAObUgYzgzDYWQx6V5MsrBYZbAyUIsqgJB7uOk/p9H48z3nv8XTu3zmd81ymlCaBHrAHbKnfVIwppWXgoNm5BGbUu1KjDcTeO7CqHpYg/YC8dwIsqa/DoGFA7D0Cc+rZIGQUEHs/wD6wrn62oRIg79wAU+r1f6QGiL14gw1gR01xoRbIDz8HZtWHrkBAb8DiOEAgL+MAz8B8V+AUWFCfaoEPYE3N7VT9hStgWr2tPQeR9zawqX7VnsT7Ju+LLi0cAStq5D1w+n3EyDcyjpxHThuIbCPfyLhoApgAjptkd3MkRdt/N/0Cw5x+ls8SjaIAAAAASUVORK5CYII=) no-repeat 50%/.16rem .21rem
}

.h5 .section .pv__btn .circle {
    display: block;
    width: .64rem;
    height: .64rem;
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAMAAACdt4HsAAACglBMVEVHcEz///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////+LjJrKAAAA1nRSTlMAAhv69PL9AfzzCRoQ9ecIDPjxEffrDQQc++rwCidwHfkFhhQqD9cm7LdxhOm1xJUr4N3h/u7QCym4LNXlrxUSOPYljavIsaAiueg+QcAogC4DxYIyxmMt1AcXv1iK5Id+rCOuFqjW2EhsrWrLwUriiSBLId5/WVbRc4xePe8GYFeDVJ7OtOM8b3kYeI6wqjdAz5jmup/CRce7SSTfkslpe0dtWraFDoHSfXVfdrKavhkwP7MxZ4s7nMN0zWUTVaWdlptD7TY53KLZHoiRvE+XfJTTzJB3Sr9RtQAABAZJREFUGBmdwQN7XFkABuDv8pw7thXbtm1WUZsmKYLatm23a9u2vft/Nptt+6TtJHPnvi+CYsz1zffSGn74Wms0auPHfjnna64vYyDXInayP3XKKjmpUStJFQHq5OOnak5M+vMgj7dEpxWF8991jry6ravrxPtLxzOSBbFCV3O00AY5ova7bqTcubxMHWWOMRhiykrZ6F9/T8lwZ5ti90arEBpZ8FLh4jyCWZi8xW8kLkmmUm6ig2BODP5HIhCESr3voEvcWbJDjzmYV6gxL/vr21N5Z+zqMgTlXzO2Uo/5RcT1D4iNgw48iVz/XuBOmRFKzL5xp1B3neBxlSNGLqGcQUj2bw4GLCOVeIy/zhJYlc5ABpJfHTDW/YhHfDJo4qq9kMm7ipOqojCL/raOXkiHXCQ9gSavVOEhcjhWPFBOIBv59qw4dobgAccwPfRpB8Jg33NIfMuP+1S+HL5fg7Bo3uV3Jqowg+TniqmVCJO3h25pxQxbkuTaHYEwRWy3SkMGTCPRo/QVNcKmfpoujMY0z3EheXMHwmbf4zJ9qALg76GvsVCAXUInHACzrtHt00MBvc+tu8bAXKXNbIciCzK1azSov0Jrl0OR5bV0Yj2ap4SjHiji+ceU1Ywj8boVBIqQuzrrSvzGZ1ZCobgNwk1cdV5RQyH1LS4BsbQ6CgpFVTtHEW9J00AhTZrFCp6PtEEhWyTPwyhtNEAhQ5tkhFHaaIBChjbJAp6PtEEhWyQvId6SpoFC5i+MVsQ6T0VBodKltAgJ3C01FFLXcA34WdgQB4XiMqU0rLbq7hIoQiYb4+/hTJZw3ANFPHeErCasnaC1y6HIsQQxdT1iftJmtkOR7gztGg2Yazq3Tw8FVFtNuhUMwLbQFgcUcLTQDxwAVFtNrk12hK1js8udqMK0/IW0QI2wsSm0yIv/5L0gWHdHIEy7eq18kg0zvLm0xoswtfaIW9IJZuh9OdoqDcKiqdLm+FS4z3GSDvTZEQZ73wBdyuIB0jQq5h4mkI2cPisWvUfw0KLeYnq1kEAmUthAz3+8CLOYI01cST7kIdElnDvJjEf46yyB4XQCGZgFJwMVn7N4zLLPLFzB6QiExJRf4LQX6/GEZftNzo/6NAhF38abvlyPINgkXXbxtrhdmB8pv7SXRVDmd2Kd2s5etR3z8rwdgzno36zNybambPJ7EITejpAYx5EDEnV1vth9zEAwCzEs7k58SoXQVK3PFZmy3VkNQ+vi2FLzszabpqyU9a4bKshwP98OOQzRL6cWS6Kg2zC+6tzgM5E3Lw7/dUMniFJxwQ4GsnjYr7ouZVkljhp5nq8IiJzgyliSdFmth1wkZm3T6j8S/kwWLBahcWHK37eb1moIgvkXiifDWD4BL0sAAAAASUVORK5CYII=) no-repeat 50%/100% 100%
}

.h5 .section .pv__btn:hover .border {
    -webkit-animation: zhuan 1s linear infinite;
    animation: zhuan 1s linear infinite
}

.h5 .section .comic {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    margin-top: 1rem
}

.h5 .section .comic__item {
    width: 2.16rem;
    height: 4.29rem;
    opacity: 0;
    -webkit-transform: translateY(30%);
    -ms-transform: translateY(30%);
    transform: translateY(30%);
    -webkit-transition: all .5s ease-out;
    -o-transition: all .5s ease-out;
    transition: all .5s ease-out
}

.h5 .section .comic__cover {
    position: relative;
    display: block;
    width: auto;
    height: 4.29rem;
    left: 50%;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%)
}

.h5 .section .comic__link {
    position: relative;
    display: block;
    margin: .3rem auto 0;
    width: 1.54rem;
    height: .41rem;
    text-align: left;
    line-height: .36rem;
    font-size: .2rem;
    text-indent: 1.6em;
    color: #fff;
    border: .01rem solid #fff;
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAANCAYAAACZ3F9/AAAAuElEQVQoU52SOwoCQRAF64knMTQwUWNPoigK6iU8hrGsgUfSyB/+Mg9g8GRgVnRhd8AJe7poul+Jkme7B/SBhaRbsU0VYAfYAFtgKun+3VsKhibbXSADTsBY0jWHK8EIt4EVECZOJJ1DPQlGuAWsgScwlHSU7SZQK9s11g00gCWwB2YBfAH1BFj8zv6dOP9nx5GkQxK0nV/1ESNJX7WQY4jikszRdm7OLprzo12VcsHVQXT1Y0w+8Q1Iw0r5SDkkeAAAAABJRU5ErkJggg==) no-repeat 1.22rem/.14rem .14rem
}

.h5 .section[data-layout=right] .box {
    right: 0;
    text-align: right
}

.h5 .section[data-layout=right] .desc:after,
.h5 .section[data-layout=right] .title:after {
    right: -.12rem
}

.h5 .section[data-layout=right] .link-con {
    right: .25rem
}

.h5 .section[data-layout=left] .box {
    left: 0;
    text-align: left
}

.h5 .section[data-layout=left] .desc:after,
.h5 .section[data-layout=left] .title:after {
    left: -.12rem
}

.h5 .section[data-layout=left] .link-con {
    left: .25rem
}

.h5 .section[data-layout=center] .box {
    top: 0;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    text-align: center;
    background-color: transparent
}

.h5 .section[data-layout=center] .title {
    font-size: .54rem;
    margin-top: 1.1rem
}

.h5 .section[data-layout=center] .title:after {
    content: "";
    display: block;
    margin: .24rem auto;
    width: .32rem;
    height: .04rem;
    background: #fff
}

.h5 .section[data-layout=center] .desc {
    margin: .4rem .6rem;
    width: auto
}

.h5 .section[data-layout=center] .link-con {
    left: 0;
    right: 0;
    margin: 0 auto;
    bottom: 1.7rem
}

.h5 .swiper-slide:nth-child(5) .box .link {
    display: inline-block;
    width: 2.6rem;
    height: .6rem;
    line-height: .6rem;
    padding: 0;
    text-align: left;
    text-indent: .7em
}

.h5 .swiper-slide:nth-child(5) .box .link:after {
    right: .16rem
}

.h5 .swiper-slide:nth-child(5) .box .link--ys {
    margin-left: .6rem;
    text-indent: 1.2em
}

.h5 .swiper-slide:nth-child(5) .box .link--ys:after {
    right: .4rem
}

.h5 .swiper-slide-active.animated .blackboard,
.h5 .swiper-slide-active.animated .box,
.h5 .swiper-slide-active.animated .scene {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0)
}

.h5 .swiper-slide-active.animated .header {
    opacity: 1;
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
    -webkit-transition-delay: .8s;
    -o-transition-delay: .8s;
    transition-delay: .8s
}

.h5 .swiper-slide-active.animated .section.ip .comic__item:first-child {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
    -webkit-transition-delay: .3s;
    -o-transition-delay: .3s;
    transition-delay: .3s
}

.h5 .swiper-slide-active.animated .section.ip .comic__item:nth-child(2) {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
    -webkit-transition-delay: .6s;
    -o-transition-delay: .6s;
    transition-delay: .6s
}

.h5 .swiper-slide-active.animated .section.ip .comic__item:nth-child(3) {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
    -webkit-transition-delay: .9s;
    -o-transition-delay: .9s;
    transition-delay: .9s
}

.h5 .pv__modal {
    overflow: visible !important;
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    z-index: 9999;
    background: rgba(0, 0, 0, .8);
    font-size: 0;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%)
}

.h5 .pv__modal video {
    outline: none
}

.h5 .pv__modal button,
.h5 .pv__modal img {
    position: absolute
}

.h5 .pv__modal img {
    display: block;
    left: -.72rem;
    bottom: -.4rem;
    z-index: 1;
    width: auto;
    height: 1.06rem;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    pointer-events: none
}

.h5 .pv__modal button {
    right: .08rem;
    top: .02rem;
    width: .19rem;
    height: .19rem;
    font-size: 0;
    border: 0;
    outline: none;
    background-position: 0 0;
    cursor: pointer
}

.h5 .pv__modal button:hover {
    background-position: 0 -.19rem
}

.h5 .pv__modal .pv__video--modal {
    background-color: transparent
}

@-webkit-keyframes anim__more {

    0%,
    to {
        -webkit-transform: translate(-50%);
        transform: translate(-50%)
    }

    60% {
        -webkit-transform: translate(-50%, .2rem);
        transform: translate(-50%, .2rem)
    }
}

@keyframes anim__more {

    0%,
    to {
        -webkit-transform: translate(-50%);
        transform: translate(-50%)
    }

    60% {
        -webkit-transform: translate(-50%, .2rem);
        transform: translate(-50%, .2rem)
    }
}

/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
html {
    line-height: 1.15;
    -webkit-text-size-adjust: 100%
}

body {
    margin: 0
}

main {
    display: block
}

h1 {
    font-size: 2em;
    margin: .67em 0
}

hr {
    box-sizing: content-box;
    height: 0;
    overflow: visible
}

pre {
    font-family: monospace, monospace;
    font-size: 1em
}

a {
    background-color: transparent
}

abbr[title] {
    border-bottom: none;
    text-decoration: underline;
    text-decoration: underline dotted
}

b,
strong {
    font-weight: bolder
}

code,
kbd,
samp {
    font-family: monospace, monospace;
    font-size: 1em
}

small {
    font-size: 80%
}

sub,
sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline
}

sub {
    bottom: -.25em
}

sup {
    top: -.5em
}

img {
    border-style: none
}

button,
input,
optgroup,
select,
textarea {
    font-family: inherit;
    font-size: 100%;
    line-height: 1.15;
    margin: 0
}

button,
input {
    overflow: visible
}

button,
select {
    text-transform: none
}

[type=button],
[type=reset],
[type=submit],
button {
    -webkit-appearance: button
}

[type=button]::-moz-focus-inner,
[type=reset]::-moz-focus-inner,
[type=submit]::-moz-focus-inner,
button::-moz-focus-inner {
    border-style: none;
    padding: 0
}

[type=button]:-moz-focusring,
[type=reset]:-moz-focusring,
[type=submit]:-moz-focusring,
button:-moz-focusring {
    outline: 1px dotted ButtonText
}

fieldset {
    padding: .35em .75em .625em
}

legend {
    box-sizing: border-box;
    color: inherit;
    display: table;
    max-width: 100%;
    padding: 0;
    white-space: normal
}

progress {
    vertical-align: baseline
}

textarea {
    overflow: auto
}

[type=checkbox],
[type=radio] {
    box-sizing: border-box;
    padding: 0
}

[type=number]::-webkit-inner-spin-button,
[type=number]::-webkit-outer-spin-button {
    height: auto
}

[type=search] {
    -webkit-appearance: textfield;
    outline-offset: -2px
}

[type=search]::-webkit-search-decoration {
    -webkit-appearance: none
}

::-webkit-file-upload-button {
    -webkit-appearance: button;
    font: inherit
}

details {
    display: block
}

summary {
    display: list-item
}

[hidden],
template {
    display: none
}

body,
html {
    background-color: #131217;
    font-size: 14px;
    color: #333;
    font-family: Microsoft YaHei, \\5FAE\8F6F\96C5\9ED1, Source Han Sans CN, Arial, sans-serif;
}

ul {
    list-style: none
}

button,
ul {
    margin: 0;
    padding: 0
}

button {
    border: 0;
    outline: none;
    color: #333
}

a {
    text-decoration: none
}

@-webkit-keyframes zhuan {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg)
    }

    to {
        -webkit-transform: rotate(1turn);
        transform: rotate(1turn)
    }
}

@keyframes zhuan {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg)
    }

    to {
        -webkit-transform: rotate(1turn);
        transform: rotate(1turn)
    }
}

@-webkit-keyframes fadeFromLeft {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(-20%, 0, 0);
        transform: translate3d(-20%, 0, 0)
    }

    to {
        opacity: 1;
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }
}

@keyframes fadeFromLeft {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(-20%, 0, 0);
        transform: translate3d(-20%, 0, 0)
    }

    to {
        opacity: 1;
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }
}

.fadeFromLeft {
    -webkit-animation-name: fadeFromLeft;
    animation-name: fadeFromLeft;
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out
}

@-webkit-keyframes fadeFromRight {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(15%, 0, 0);
        transform: translate3d(15%, 0, 0)
    }

    to {
        opacity: 1;
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }
}

@keyframes fadeFromRight {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(15%, 0, 0);
        transform: translate3d(15%, 0, 0)
    }

    to {
        opacity: 1;
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }
}

.fadeFromRight {
    -webkit-animation-name: fadeFromRight;
    animation-name: fadeFromRight;
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out
}

@-webkit-keyframes fadeFromUp {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, -8%, 0);
        transform: translate3d(0, -8%, 0)
    }

    to {
        opacity: 1;
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }
}

@keyframes fadeFromUp {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, -8%, 0);
        transform: translate3d(0, -8%, 0)
    }

    to {
        opacity: 1;
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }
}

.fadeFromUp {
    -webkit-animation-name: fadeFromUp;
    animation-name: fadeFromUp;
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out
}

@-webkit-keyframes fadeFromDown {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, 8%, 0);
        transform: translate3d(0, 8%, 0)
    }

    to {
        opacity: 1;
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }
}

@keyframes fadeFromDown {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, 8%, 0);
        transform: translate3d(0, 8%, 0)
    }

    to {
        opacity: 1;
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }
}

.fadeFromDown {
    -webkit-animation-name: fadeFromDown;
    animation-name: fadeFromDown;
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out
}

@-webkit-keyframes slideFromRight {
    0% {
        -webkit-transform: translate3d(15%, 0, 0);
        transform: translate3d(15%, 0, 0)
    }

    to {
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }
}

@keyframes slideFromRight {
    0% {
        -webkit-transform: translate3d(15%, 0, 0);
        transform: translate3d(15%, 0, 0)
    }

    to {
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }
}

.slideFromRight {
    -webkit-animation-name: slideFromRight;
    animation-name: slideFromRight;
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out
}

@-webkit-keyframes move {
    0% {
        -webkit-transform: translateX(-80%);
        transform: translateX(-80%)
    }

    to {
        -webkit-transform: translateX(30%);
        transform: translateX(30%)
    }
}

@keyframes move {
    0% {
        -webkit-transform: translateX(-80%);
        transform: translateX(-80%)
    }

    to {
        -webkit-transform: translateX(30%);
        transform: translateX(30%)
    }
}