@charset "utf-8";

[v-cloak] {
    display: none;
}


@font-face {
    font-family: MicrosoftJhengHei-Bold;
    src: url("../font/JhengHei-Bold.woff") format('truetype');
    font-weight: bold;
}

@font-face {
    font-family: MicrosoftJhengHei;
    src: url("../font/JhengHei-Regular.woff") format('truetype');
    font-weight: initial;
}

@font-face {
    font-family: 'HelveticaNeueLTStd';
    src: url("../font/HelveticaNeueLTStd-Roman.woff") format('truetype');
    font-weight: normal;
}


html {
    overflow: hidden;
    max-width: 750px;
    font-size: 100px;
    margin: 0 auto;
    position: fixed;
    left: 0;
    top: 0;
}

@media screen and (max-width:751px) {
    html {
        font-size: calc(100vw / 7.5);
    }
}

html,
body,
button,
input,
select,
textarea {
    font-family: MicrosoftJhengHei;
}

body,
html {
    width: 100%;
    height: 100%;
    overflow: hidden;
    -webkit-text-size-adjust: 100% !important;
    text-size-adjust: 100% !important;
    -moz-text-size-adjust: 100% !important;
}

.app {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

ul,
ol,
li,
dl,
dd,
dt {
    list-style-type: none;
    line-height: normal;
}

body,
button,
input,
select,
textarea {
    font-family: MicrosoftJhengHei;
    font-size: 12px;
}

code,
kbd,
pre,
samp {
    font-family: MicrosoftJhengHei;
}

address,
caption,
cite,
code,
dfn,
em,
th,
var {
    font-style: normal;
    font-weight: normal;
}

a {
    text-decoration: none;
    color: #333;
    transition: all 0.5s linear;
    -moz-transition: all 0.5s linear;
    -webkit-transition: all 0.5s linear;
    -o-transition: all 0.5s linear;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    -webkit-tap-highlight-color: transparent;
}

img {
    border: 0;
    max-width: 100%;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0;
    font-weight: normal;
}

input,
table,
tr,
td {
    margin: 0;
    padding: 0;
    border: none;
}

button,
table {
    border: none;
    background: none;
    margin: 0;
    padding: 0;
}

select {
    margin: 0;
    padding: 0;
}

textarea {
    resize: none;
    outline: 0;
}

input {
    outline: 0;
}

.w690 {
    width: 6.9rem;
    margin: 0 auto;
}

.w710 {
    width: 7.1rem;
    margin: 0 auto;
}


.main-content {
    width:100%;
    height:100%;
    overflow:hidden;
}

.en-bold {
    font-family: HelveticaNeueLTStd;
    font-weight: bold;
}

.en {
    font-family: HelveticaNeueLTStd;
    font-weight: normal;
}


.page {
    position: relative;
    width: 100%;
    height: 100%;
    background: linear-gradient(225deg, #7F31A6 0%, #0F069F 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.logo {
    position: absolute;
    width: 1.71rem;
    top: .48rem;
    right: .48rem;
}

.page-cut-scenes video {
    width: 100vw;
    height: 100vh;
    object-fit: cover;
}

.page1 .zi {
    width: 5.74rem;
}

.page1 .poss {
    position: relative;
    width: 5.99rem;
    height: .32rem;
    padding: .04rem .25rem;
}

.page1 .poss .kuang {
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
}

.page1 .poss .poss-value {
    height: .24rem;
    overflow: hidden;
}

.page1 .poss .poss-value img {
    max-width: none;
    height: 100%;
    width: 5.48rem;
}

.page1 .poss .dot {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: .48rem;
    height: .48rem;
    z-index: 10;
}

.page1 .poss .dot .xing {
    width: 100%;
    height: 100%;
    display: block;
    position: relative;
}

.page1 .poss .dot .guang {
    width: 2.41rem;
    height: .69rem;
    display: block;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    max-width: none;
    transform-origin: 100% 50%;
    animation: options 1.5s infinite;
    -webkit-animation: options 1.5ss infinite;
    /*Safari and Chrome*/
}


.poss-text {
    font-weight: 400;
    font-size: .24rem;
    color: #FFFFFF;
    line-height: .29rem;
    text-align: center;
    margin-top: .3rem;
    width: 100%;
}

.zuoshang {
    position: absolute;
    width: 7.5rem;
    left: -1.95rem;
    top: 50%;
    margin-top: -7.77rem;
}
.zhong {
    position: absolute;
    width:4.7rem;
    left: 3.19rem;
    top: 50%;
    margin-top: -1.97rem;
    display: block;
}

.youxia {
    position: absolute;
    width: 8.25rem;
    left: -.24rem;
    top: 50%;
    max-width: none;
}

.main-content .music {
    width: .78rem;
    height: .78rem;
    position: absolute;
    top: .33rem;
    left: .33rem;
    z-index: 14;
}

.main-content .music .ico1 {
    width: 100%;
    height: 100%;
    display: block;
}

.main-content .music .ico2 {
    width: .4rem;
    height: .4rem;
    display: block;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.page .dot1 {
    width: .24rem;
    height: .24rem;
    left: 2.08rem;
    top: 50%;
    margin-top: -5.63rem;
    position: absolute;
    z-index: 2;
    animation: fadeIn 3.5s infinite ease-in-out;

}

.page .dot2 {
    width: .29rem;
    height: .29rem;
    left: 3.94rem;
    top: 50%;
    margin-top: -5.3rem;
    position: absolute;
    z-index: 2;
    animation: fadeIn 2.5s infinite ease;
}

.page .dot3 {
    width: .18rem;
    height: .18rem;
    left: 1.09rem;
    top: 50%;
    margin-top: -4.53rem;
    position: absolute;
    z-index: 2;
    animation: fadeIn 2.8s infinite ease;
}

.page .dot4 {
    width: .29rem;
    height: .29rem;
    left: 2.46rem;
    top: 50%;
    margin-top: -2.98rem;
    position: absolute;
    z-index: 2;
    animation: zoomIn 3s infinite ease;
}

.page .dot5 {
    width: .29rem;
    height: .29rem;
    left: 1.18rem;
    top: 50%;
    margin-top: -2.46rem;
    position: absolute;
    z-index: 2;
    animation: bounceIn 2.5s infinite ease;
}

.page .dot6 {
    width: .14rem;
    height: .14rem;
    left: 2.81rem;
    top: 50%;
    margin-top: 1.87rem;
    position: absolute;
    z-index: 2;
    animation: fadeIn 2.8s infinite ease;
}

.page .dot7 {
    width: .2rem;
    height: .2rem;
    left: 5.35rem;
    top: 50%;
    margin-top: 3.19rem;
    position: absolute;
    z-index: 2;
    animation: fadeIn 2.5s infinite ease;
}

.page .dot8 {
    width: .29rem;
    height: .29rem;
    left: 1.78rem;
    top: 50%;
    margin-top: 3.78rem;
    position: absolute;
    z-index: 2;
    animation: bounceIn 2.5s infinite ease;
}

.page .dot9 {
    width: .29rem;
    height: .29rem;
    left: 2.73rem;
    top: 50%;
    margin-top: 3.71rem;
    position: absolute;
    z-index: 2;
    animation: fadeIn 1.5s infinite ease;
}

.page .dot10 {
    width: .29rem;
    height: .29rem;
    left: .59rem;
    top: 50%;
    margin-top: 4.6rem;
    position: absolute;
    z-index: 2;
    animation: zoomIn 3s infinite ease;
}

.page .dot11 {
    width: .24rem;
    height: .24rem;
    left: 1.56rem;
    top: 50%;
    margin-top: 5.07rem;
    position: absolute;
    z-index: 2;
    animation: bounceIn 6.5s infinite ease;
}

.page .dot12 {
    width: .18rem;
    height: .18rem;
    left: 4.81rem;
    top: 50%;
    margin-top: 6.29rem;
    position: absolute;
    z-index: 2;
    animation: bounceIn 2.5s infinite ease;
}

.page2-main {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.75rem .47rem 0 .35rem;
    position: relative;
    z-index: 3;
    flex-direction: column;
}

.page2-main h2 {
    font-weight: 700;
    font-size: .82rem;
    color: #FFFFFF;
    line-height: .98rem;
    text-align: right;
    font-style: normal;
    text-transform: none;
    width: 100%;
}

.page2-main .tx {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    width: 100%;
    margin: .23rem 0 .87rem 0;
}

.page2-main .tx img {
    display: block;
    width: .61rem;
    height: .61rem;
    margin-right: .22rem;
}

.page2-main .tx div {
    width: 3.29rem;
    height: .63rem;
    border-radius: .63rem;
    border: 1px solid #FFFFFF;

    font-weight: 400;
    font-size: .32rem;
    color: #FFFFFF;
    text-align: right;
    font-style: normal;
    text-transform: none;
    display: flex;
    align-items: center;
    justify-content: center;
}

.page2-main .ren {
    position: relative;
    padding-left: 1.36rem;
    width: 100%;
}

.page2-main .ren .ren-1 {
    display: block;
    width: 2.82rem;
}
.page2-main .ren .ren-xing {
    display: block;
    width: 1.23rem;
    position: absolute;
    top: .06rem;
    left: 1.54rem;
    z-index: 3;
    animation: zoomInScale 2.5s infinite ease-in-out;
}

.page2-main .ren div {
    font-weight: 400;
    font-size: .33rem;
    color: #FFFFFF;
    line-height: .4rem;
    text-align: left;
    font-style: normal;
    text-transform: none;
    margin-top: -.87rem;
    margin-left: -1.36rem;
}

.page2-main .start {
    width: 3.22rem;
    height: .92rem;
    background: radial-gradient(61% 56% at 61% 56%, rgba(255, 255, 255, 0) 0%, #FFFFFF 100%);
    border-radius: 46px 46px 46px 46px;
    border: 1px solid #FFFFFF;

    font-weight: 700;
    font-size: .4rem;
    color: #FFFFFF;
    text-shadow: 2px 2px 6px #FF8B00;
    text-align: center;
    font-style: normal;
    text-transform: none;
    display: flex;
    align-items: center;
    justify-content: center;
    /*margin-top: 1.83rem;*/
    margin-top: 1.3rem;
}

.notice {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
}

.close-bg {
    width: 100%;
    height: 100%;
    position: absolute;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(3px);
}

.notice-main {
    width: 6.9rem;
    padding: 1.15rem .8rem 1.56rem .8rem;
    position: relative;
    height: auto;
    background: url(../images/xz-kuang.png) no-repeat center top / cover;
}

.notice-main h2 {

    font-weight: 700;
    font-size: .38rem;
    color: #000000;
    line-height: .46rem;
    font-style: normal;
    text-transform: none;
    text-align: center;
    margin-bottom: .49rem;
}

.notice-txt {
    width: 100%;
    height: auto;
}

.notice-txt h3 {
    font-weight: 700;
    font-size: .32rem;
    color: #000000;
    line-height: .38rem;
    text-align: justify;
    font-style: normal;
    text-transform: none;
    margin-bottom: .16rem;
}

.notice-txt p {
    font-weight: 400;
    font-size: .3rem;
    color: #000000;
    line-height: .4rem;
    text-align: justify;
    font-style: normal;
    text-transform: none;
    margin-bottom: .4rem;
}

.notice-close {
    position: absolute;
    right: .1rem;
    top: -1.3rem;
    width: .68rem;
    height: .68rem;
    z-index: 10;
}

.notice-close img {
    display: block;
    width: 100%;
}

.notice-btn {
    position: absolute;
    width: 5.48rem;
    left: 50%;
    transform: translateX(-50%);
}

.page3-bg {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0.5;
}

.page .ico9 {
    position: absolute;
    right: 0;
    top: 0;
    width: .42rem;
    z-index: 3;
}

.page .ico12 {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 3.12rem;
    z-index: 3;
}

.page .ico13 {
    position: absolute;
    right: .48rem;
    bottom: .15rem;
    width: .96rem;
    z-index: 3;
}

.page3-mian {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: auto;
    position: relative;
    z-index: 5;
    padding-top: .94rem;
}

.page3-main-top {
    width: 100%;
    padding: 0 .48rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.page3-main-top>.imgs {
    display: block;
    width: 2.48rem;
    height: 3.2rem;
}
.page3-main-top>.imgs img{
    display: block;
    width: 100%;
    transform: scaleX(-1);
}

.page3-main-top>div {
    height: 3.2rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-end;
}

.page3-main-top>div h2 {

    font-weight: 700;
    font-size: .7rem;
    color: #FFFFFF;
    line-height: .98rem;
    text-align: right;
    font-style: normal;
    text-transform: none;
    margin-bottom: .24rem;
}

.page3-main-top>div div {
    width: 3.52rem;
    height: .6rem;
    position: relative;
}

.page3-main-top>div div img {
    display: block;
    width: 100%;
}

.page3-main-top>div div span {
    position: absolute;
    left: .32rem;

    font-weight: 700;
    font-size: .32rem;
    color: #3B17A2;
    line-height: .59rem;
    letter-spacing: 1px;
    text-align: left;
    font-style: normal;
    text-transform: none;
    top: 0;
}

.page3-mian-bottom {
    width: 100%;
    background: url(../images/ico10.png) no-repeat center top/ cover;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1.08rem .96rem 1rem .96rem;
    margin-top: .33rem;
}

.page3-mian-bottom .item {
    width: 100%;
    margin-bottom: .48rem;
}

.page3-mian-bottom .item h3 {

    font-weight: 400;
    font-size: .32rem;
    color: #FFFFFF;
    line-height: .44rem;
    text-align: left;
    font-style: normal;
    text-transform: none;
    margin-bottom: .19rem;
}


.page3-mian-bottom .tips {
    font-weight: 400;
    font-size: .25rem;
    color: #FFFFFF;
    width:100%;
    text-align:left;
}

.page3-mian-bottom .item div {
    position: relative;
    width: 100%;
}

.page3-mian-bottom .item div input {
    width: 5.58rem;
    height: .88rem;
    background: rgba(255, 255, 255, 0.5);
    border-radius: .88rem;
    border: 1px solid rgba(255, 255, 255, 0.2);
    padding: 0 .32rem;

    font-weight: 400;
    font-size: .3rem;
    color: #000000;
    text-align: left;
    font-style: normal;
    text-transform: none;
}

.page3-mian-bottom .item div input::placeholder {
    color: #FFFFFF;
}

.page3-mian-bottom .item div span.err {
    position: absolute;
    top: 100%;
    font-size: .26rem;
    color: #FF6813;
    line-height: 2;
    left: 0;
}

.page3-mian-bottom .btn-ico11 {
    width: 5.48rem;
    display: block;
}

.barrage-main {
    width: 100%;
    position: relative;
    height: 100%;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    flex-direction: column;
    padding: 0 .49rem;
}
.barrage-main .add-ico1{
    width: 3.73rem;
    position: absolute;
    left: 0;
    top: 0;
}
 
.barrage-main .add-ico3{
    width: 1.88rem;
    position: absolute;
    left: 0;
    bottom: .19rem;
}
.barrage-main .add-ico3 img{
    display: block;
    width: 100%;
}


.barrage-main h2 {
    width: 100%;
    font-family: MicrosoftJhengHei-Bold;
    font-weight: 800;
    font-size: .7rem;
    color: #FFFFFF;
    line-height: .97rem;
    text-align: right;
}



.barrage-main h3 {
    font-family: MicrosoftJhengHei;
    font-weight: 400;
    font-size: .54rem;
    color: #FFFFFF;
    line-height: .97rem;
    text-align: right;
    width: auto;
}


.barrage-main .bt-line {
    position: relative;
    margin-bottom:1.5rem;
}

.barrage-main .bt-line::after {
    content: "";
    display: block;
    width: 4.9rem;
    height: 0.2rem;
    position: absolute;
    right: 0;
    background: url(../images/tiao.png) no-repeat center top/cover;
    bottom: -0.1rem;
}

.yx-div{
    opacity: 0.5;
}
.bar-dot{
    position: absolute;
    top: 50%;
    display: block;
}
.bar-dot1{
    animation: fadeIn 3.5s infinite ease-in-out;
    width: .29rem;
    left: 3.93rem;
    margin-top: -5.3rem;
}

.bar-dot2{
    animation: fadeIn 2.5s infinite ease;
    width: .29rem;
    left: 3.2rem;
    margin-top: -2.97rem;
}

.bar-dot3{
    animation: fadeIn 2.8s infinite ease;
    width: .26rem;
    left: 4.48rem;
    margin-top: -4rem;
}

.bar-dot4{
    animation: zoomIn 3s infinite ease;
    width: .15rem;
    left: 6.03rem;
    margin-top: -3.11rem;
}

.bar-dot5{
    animation: bounceIn 2.5s infinite ease;
    width: .29rem;
    left: .6rem;
    margin-top: .19rem;
}

.bar-dot6{
    animation: fadeIn 2.8s infinite ease;
    width: .18rem;
    left: 1.15rem;
    margin-top: 2.13rem;
}

.bar-dot7{
    animation: fadeIn 2.5s infinite ease;
    width: .26rem;
    left: 1.55rem;
    margin-top: .64rem;
}

.bar-dot8{
    animation: bounceIn 2.5s infinite ease;
    width: .15rem;
    left: 2.8rem;
    margin-top: 1.98rem;
}

.bar-dot9{
    animation: fadeIn 1.5s infinite ease;
    width: .29rem;
    left: 6.79rem;
    margin-top: 1.69rem;
}

.bar-dot10{
    animation: zoomIn 3s infinite ease;
    width: .22rem;
    left: 5.31rem;
    margin-top: 2.72rem;
}

.bar-dot11{
    animation: bounceIn 6.5s infinite ease;
    width: .18rem;
    left: 4.84rem;
    top: auto;
    bottom: .22rem;
}





.barrage-btn {
    width: 5.33rem;
    position: absolute;
    left: 1.1rem;
    bottom:1.63rem;
    z-index: 10;
}

.barrage-btn img {
    display: block;
    width: 100%;
    height: auto;
}

.page4-mian {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: auto;
    position: relative;
    z-index: 5;
    padding-top: .93rem;
}

.page4-mian h2 {
    width: 100%;

    font-weight: 700;
    font-size: .82rem;
    color: #FFFFFF;
    line-height: .98rem;
    text-align: right;
    font-style: normal;
    text-transform: none;
    padding-right: .49rem;
}

.barrage-box {
    height: 7.42rem;
    width: 100%;
    padding-top: 1.1rem;
}

.page4-mian h3 {

    font-weight: 400;
    font-size: .28rem;
    color: #FFFFFF;
    line-height: .4rem;
    text-align: center;
    font-style: normal;
    text-transform: none;
}

.page4-mian .keep-btn {
    width: 4.78rem;
}

.page4-mian .keep-btn img {
    width: 100%;
    display: block;
}

.dm-box {
    width: auto;
    height: .74rem;
    background: radial-gradient(0% 70% at 0% 50%, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 100%);
    border-radius: .74rem;
    border: .02rem solid rgba(255, 255, 255, 0.25);
    padding: 0 .24rem;

    font-weight: 400;
    font-size: .3rem;
    color: #FFFFFF;
    text-align: center;
    font-style: normal;
    text-transform: none;
    display: flex;
    align-items: center;
    justify-content: center;
}

.vue-danmaku {
    width: 100%;
    height: 100%;
}

.page5-mian {
    padding-top: .41rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    flex-direction: column;
    position: relative;
    z-index: 10;
}

.page5-mian h2 {

    font-weight: 700;
    font-size: .82rem;
    color: #FFFFFF;
    line-height: .98rem;
    text-align: right;
    font-style: normal;
    text-transform: none;
    width: 100%;
    padding-right: .48rem;
}

.page5-mian>img {
    display: block;
    width: 100%;
    margin: .69rem 0 .25rem 0;
}

.page5-box {
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 0 .48rem;
    align-items: center;
    justify-content: center;
}

.page5-box .top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.page5-box .top .top-lt {
    width: 3.16rem;
    height: 4.08rem;
    position: relative;
}
.page5-box .top .top-lt div,.page5-box .top .top-lt a{
    width: 100%;
    height: 100%;
    padding: .19rem .24rem;
    display:block;
    background: url(../images/ico24.png) no-repeat center top/cover;
}

.page5 .mask {
    width: 100%;
    height: 100%;
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    backdrop-filter: blur(3px);
    z-index:998;
}

.page5 .bqb {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-flow:column;
    background: #fff;
    border-radius: .5rem;
    position: absolute;
    width: 60%;
    z-index:999;
    box-shadow: 10px 10px 15px rgba(0, 0, 0, 0.5);
}
.page5 .bqb .box{
    padding:.3rem;
}
.page5 .bqb .img-qrcode{
    padding: .2rem;
}
.page5 .bqb .box .close{
    width:100%;
    text-align:right;
}
.page5 .bqb .box .close img{
    width:.5rem;
}
.page5 .bqb .box .txt{
    text-align:center;
    font-size:.3rem;
    font-weight:bold;
}


.page5-box h4 {
    height: .84rem;

    font-weight: 700;
    font-size: .3rem;
    color: #FFFFFF;
    line-height: .42rem;
    text-align: left;
    font-style: normal;
    text-transform: none;
    margin-bottom: .16rem;
}

.page5-box h6 {
    width: .92rem;
    height: .43rem;
    background: #FFFFFF;
    border-radius: .22rem;
    display: flex;
    align-items: center;
    justify-content: center;
}
.page5-box h6 span{
    font-size: .24rem;
    font-weight: 400;
    font-style: normal;
    text-transform: none;
    color: #FF8600;
    display: block;
    height: .43rem;
    line-height: .44rem;
}

.page5-box h6 img {
    display: block;
    width: .26rem;
}

.page5-box .ico19 {
    position: absolute;
    right: .19rem;
    width: 1.58rem;
    display: block;
    bottom: .2rem;
}

.page5-box .img-01 {
    position: absolute;
    right: 0;
    width: 100%;
    display: block;
    bottom: 0;
}

.page5-box .top .top-rt {
    width: 3.17rem;
    height: 4.08rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
}

.page5-box .top .top-rt .top-rt-dl {
    width: 3.17rem;
    height: 1.94rem;
    background: url(../images/ico25.png) no-repeat center top/cover;
    padding: .19rem .24rem;
    position: relative;
}

.page5-box .top .top-rt .top-rt-dl+.top-rt-dl {
    background: url(../images/ico26.png) no-repeat center top/cover;
}

.page5-box .ico20 {
    position: absolute;
    right: .19rem;
    width: 1.08rem;
    display: block;
    bottom: .1rem;
}

.page5-box .img-02 {
    position: absolute;
    right: 0;
    height: 100%;
    display: block;
    bottom: 0;
}

.page5-box .ico21 {
    position: absolute;
    right: .24rem;
    width: .83rem;
    display: block;
    bottom: .25rem;
}

.page5-box .bt {
    width: 100%;
    height: 1.94rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: .2rem;
}

.page5-box .bt .bt-dl {
    width: 3.17rem;
    height: 1.94rem;
    background: url(../images/ico27.png) no-repeat center top/cover;
    padding: .19rem .24rem;
    position: relative;
}

.page5-box .bt .bt-dl+.bt-dl {
    background: url(../images/ico28.png) no-repeat center top/cover;
}

.page5-box .ico22 {
    position: absolute;
    right: .24rem;
    width: .87rem;
    display: block;
    bottom: .25rem;
}

.page5-box .ico23 {
    position: absolute;
    right: .24rem;
    width: .88rem;
    display: block;
    bottom: .25rem;
}

.page5-box h6 span.c1 {
    color: #0C86FB;
}

.page5-box h6 span.c2 {
    color: #3B17A2;
}

.page5-box h6 span.c3 {
    color: #00D9CA;
}

.page5-box h6 span.c4 {
    color: #FFD100;
}

.page6-mian {
    width: 100%;
    display: flex;
    position: relative;
    align-items: center;
    padding: 1.26rem 0 0 0;
    flex-direction: column;
    z-index: 10;
}

.page6-mian h2 {

    font-weight: 700;
    font-size: .58rem;
    color: #FFFFFF;
    line-height: .75rem;
    text-align: center;
    font-style: normal;
    text-transform: none;
    width: 100%;
}

.page6-mian h3 {
    font-weight: 400;
    font-size: .28rem;
    color: #FFFFFF;
    line-height: .75rem;
    text-align: center;
    font-style: normal;
    text-transform: none;
    width: 100%;
}

.page6-mian h3 .txt1 {
    font-family: HelveticaNeueLTStd;
    margin-left: .1rem;
}

.page6-mian .poster img {
    width: auto;
    height: 7rem;
    background: radial-gradient(0% 70% at 0% 50%, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 100%);
    border-radius: 16px 16px 16px 16px;
    border: 2px solid rgba(255, 255, 255, 0.5);
    margin: .48rem 0 .35rem 0;
    box-shadow: 0 12px 16px rgba(0, 0, 0, 0.7), 0 1px 3px rgba(0, 0, 0, 0.7);
}

.page6-mian .dwn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;

    font-weight: 400;
    font-size: .28rem;
    color: #FFFFFF;
    line-height: .4rem;
    text-align: center;
    font-style: normal;
    text-transform: none;
}

.page6-mian .dwn img {
    display: block;
    width: .32rem;
    margin-right: .12rem;
}

.page6-btn-box {
    display:flex;
}

.page6-btn {
    display: block;
    width: 3.5rem;
}

.page6-btn img {
    display: block;
    width: 100%;
}

.page7-mian {
    padding-top: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    flex-direction: column;
    position: relative;
    z-index: 10;
}

.page7-mian h2 {

    font-weight: 700;
    font-size: .82rem;
    color: #FFFFFF;
    line-height: .98rem;
    text-align: right;
    font-style: normal;
    text-transform: none;
    width: 100%;
    padding-right: .48rem;
}

.page7-mian>img {
    display: block;
    width: 100%;
    margin: .69rem 0 0rem 0;
}

.page7-btns {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.page7-btns .btn1 {
    width: 7.28rem;
    margin: -.2rem;
}

.page7-btns .btn2 {
    width: 6.3rem;
    margin-bottom: .28rem;
}

.page7-btns .btn2 img,
.page7-btns .btn1 img {
    display: block;
    width: 100%;
}

.page7-btns .or {
    width: 6.3rem;
    display: flex;
    align-items: center;
    justify-content: space-between;

    font-weight: 700;
    font-size: .32rem;
    color: #FFFFFF;
    line-height: .44rem;
    text-align: center;
    font-style: normal;
    text-transform: none;
    margin: .05rem 0 .32rem 0;
}

.page7-btns .or img {
    display: block;
    width: 2.6rem;
}

.page8-mian {
    padding-top: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    flex-direction: column;
    position: relative;
    z-index: 10;
}

.page8-mian h2 {

    font-weight: 700;
    font-size: .82rem;
    color: #FFFFFF;
    line-height: .98rem;
    text-align: right;
    font-style: normal;
    text-transform: none;
    width: 100%;
    padding-right: .48rem;
}

.page8-video {
    width: 100%;
    height: 4.86rem;
    padding: .41rem .16rem;
    background: url(../images/v-kuang.png) no-repeat center top/cover;
    margin: .72rem 0;
}

.page8-video video {
    width: 100%;
    height: 100%;
}

.page8-btn {
    width: 5.31rem;
}

.page8-btn img {
    display: block;
    width: 100%;
}

.video-js {
    width: 100%;
    height: 100%;
}

.video-js .vjs-big-play-button {
    font-size: 0;
    line-height: 0;
    height: 1.9rem;
    width: 1.9rem;
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    padding: 0;
    cursor: pointer;
    opacity: 1;
    border: none;
    background: url(../images/v-play.png) no-repeat center top/cover;
    border-radius: 0;
    transition: all .4s;
    transform: translate(-50%, -50%);
}

.vjs-has-started .vjs-big-play-button {
    display: none;
}

.vjs-poster {
    background-size: cover;
}

.video-js .vjs-tech {
    object-fit: cover;
}

.audio {
    position: fixed;
    left: -100%;
    top: -100%;
}
.sys-main{
    width: 7.27rem;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    background: url(../images/tt-k.png) no-repeat center top/cover;
    position: relative;
    padding: 2rem 0;
}
.sys-main h2{
    font-weight: 700;
    font-size: .38rem;
    color: #000000;
    line-height: .46rem;
    text-align: center;
    font-style: normal;
    text-transform: none;
    text-align: center;
}
.sys-main h3{
    font-weight: 400;
    font-size: .32rem;
    color: #000000;
    line-height: .38rem;
    text-align: center;
    font-style: normal;
    text-transform: none;
    text-align: center;
    margin-top: .4rem;
}
.sys-btn{
    width: 5.48rem;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom:0;
    margin-bottom: -.73rem;
}
.sys-btn img{
    display: block;
    width: 100%;
}

.suc-notice{
    background: linear-gradient(225deg, #7F31A6 0%, #0F069F 100%);
}
.suc-notice .close-bg{
    background-color: transparent;
}