@charset "utf-8";body,div,h1,h2,h3,h4,h5,html,i,iframe,li,p,span,ul {
    margin: 0;
    padding: 0
}

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

li,ol,ul {
    list-style: none
}

img {
    border: 0;
    font-size: 0;
    -webkit-user-select: none;
    vertical-align: middle
}

a,img {
    -webkit-user-drag: none
}

body {
    word-wrap: break-word;
    font-family: system-ui,Microsoft YaHei,微软雅黑,Open Sans,calibri,Roboto,verdana,PingFang SC,Hiragino Sans GB,Microsoft YaHei UI,sans-serif;
    font-size: 12px;
    line-height: 1.5;
    user-select: none
}

*,:after,:before {
    box-sizing: border-box
}

::-webkit-scrollbar {
    width: 6px!important;
    height: 6px!important
}

::-webkit-resizer,::-webkit-scrollbar {
    background: transparent
}

::-webkit-scrollbar-corner {
    background: transparent
}

::-webkit-scrollbar-thumb {
    border-radius: 6px;
    background-color: hsla(0,0%,100%,.5)!important
}

::-webkit-scrollbar-thumb:hover {
    background-color: hsla(0,0%,100%,.8)!important
}

html {
    font-size: 5.20833vw
}

body {
    min-width: 1200px;
    background: #070809;
    overflow-x: hidden;
    overflow-y: scroll
}

.page-scroll-section {
    height: 100vh;
    width: 100vw;
    overflow: hidden
}

.page-scroll-inner {
    width: 100%;
    height: 100%;
    transition: transform .6s cubic-bezier(.74,.16,.3,.98);
    will-change: transform;
    position: relative
}

@media screen and (max-aspect-ratio: 6/5) {
    body .page-scroll-inner {
        transform:none!important
    }
}

.page-wrap {
    position: relative;
    display: flex;
    align-items: center
}

.page-section {
    width: 100%;
    height: 100%;
    background: #070809;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    opacity: 0;
    transition: opacity .5s ease-in-out
}

.page-section.current {
    opacity: 1;
    z-index: 11
}

.page-section-inner {
    overflow: hidden
}

.page-section-inner,.page-section-main {
    position: relative;
    z-index: 10;
    height: 100%;
    width: 100%
}

.page-section-main {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: .16rem;
    line-height: normal
}

.page-section-bg,.page-section-bg img {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -1
}

.page-section-bg img {
    z-index: 2
}

.page-section-bg video {
    position: relative;
    z-index: 1
}

.page-section-bg img,.page-section-bg video {
    width: 100%;
    height: 100%;
    object-fit: cover
}


@media screen and (max-width: 1200px) {
    html.lite-version {
        font-size:52.08333px
    }
}

@media screen and (min-width: 1600px) and (min-aspect-ratio:2/1) {
    html {
        font-size:4.34783vw
    }

    .frame-block {
        max-width: 55vw!important
    }
}

.section-kv {
    --animation-delay: 0.1s
}

.kv-slogan {
    position: absolute;
    width: 10.24rem;
    aspect-ratio: 1024/160;
    bottom: 2.3rem;
    opacity: 0;
    background: url(../slogan-2.0.da4b18d4.svg) no-repeat;
    background-size: contain;
    animation: 1s sloganFadeOut var(--animation-delay) ease-in-out;
    z-index: 10
}

.kv-slogan.new {
    opacity: 1;
    background: url(https://wegame.gtimg.com/g.55555-r.c4663/wegame-home/slogan-3.0.7edc8e92.svg) no-repeat;
    background-size: contain;
    animation: 1s sloganFadeIn var(--animation-delay) ease-in-out
}

.kv-download {
    position: absolute;
    width: 2.6rem;
    aspect-ratio: 2.6/.64;
    bottom: 1.2rem;
    z-index: 10
}

.button-download:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background-size: contain;
    border-radius: 50px;
    z-index: 2
}

.button-download:before {
    content: "";
    padding-top: 22.22222%;
    display: block
}

.button-dowload-inner {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    text-align: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 700;
    transition: all .3s ease-in-out;
    overflow: hidden;
    font-size: .2rem;
    background: hsla(0,0%,100%,.1);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50px;
}

.button-dowload-inner:after,.button-dowload-inner:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 130%;
    background: linear-gradient(90deg,#ff8433,#cc4100);
    clip-path: polygon(0 0,90% 0,100% 50%,90% 100%,0 100%,10% 50%);
    transform: translate3d(100%,0,0);
    z-index: -1
}

.button-dowload-inner:before {
    transform: translate3d(-100%,0,0);
    z-index: 2
}

.button-dowload-inner:after {
    z-index: 1;
    transition: all .3s ease-in-out
}

.button-download:hover .button-dowload-inner:before {
    transform: translate3d(-10%,0,0);
    transition: all .3s ease-in-out
}

.button-download:hover .button-dowload-inner:after {
    transform: translate3d(-10%,0,0);
    transition: all .3s ease-in-out .3s
}

.button-download-icon {
    width: .32rem;
    height: .32rem;
    background: url(https://wegame.gtimg.com/g.55555-r.c4663/wegame-home/icon-download.116ac67d.svg) no-repeat;
    background-size: contain;
    margin-right: .08rem;
    transition: all .3s ease-in-out;
    flex-shrink: 0
}

.button-dowload-inner span,.button-download-icon {
    position: relative;
    z-index: 5
}

.button-download:hover:after {
    opacity: 1
}

.kv-lightbox {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
 
    animation: 1s lightboxSlideIn var(--animation-delay) ease-in-out
}

.kv-lightbox-light {
    position: absolute;
    bottom: -3rem;
    width: 130%;
    left: -15%;
    aspect-ratio: 2376/700;
    background: url(https://wegame.gtimg.com/g.55555-r.c4663/wegame-home/kv-light.82120042.svg) no-repeat;
    background-size: contain
}

.kv-lightbox-code {
    position: absolute;
    bottom: -3rem;
    width: 100%;
    height: 8.64rem;
    background: url(https://wegame.gtimg.com/g.55555-r.c4663/wegame-home/kv-code.a7b15949.svg) no-repeat;
    background-size: contain
}

.kv-lightbox-bg {
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,.3)
}


.kv-guide-icon-inner {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0
}

.kv-guide-icon-inner.show-guide {
    animation: fadeInGuide .2s linear 2s 1 both
}

@keyframes fadeInGuide {
    0% {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

.lite-version .kv-guide-icon {
    opacity: 0;
    pointer-events: none
}


.kv-guide-icon {
    position: fixed;
    left: 50%;
    right: 0;
    bottom: 5vh;
    z-index: 200;
    transform: translate3d(-50%,0,0);
    text-align: center;
    width: 2vw;
    opacity: 1
}

.kv-guide-icon-ele {
    width: 2.29167%;
    display: inline-block
}

.kv-guide-icon-01,.kv-guide-icon-02,.kv-guide-icon-03,.kv-guide-icon-04 {
    padding-top: 54.54545%;
    display: block;
    background: url(https://wegame.gtimg.com/g.55555-r.c4663/wegame-home/icon-row.c09836b1.svg) no-repeat;
    background-size: 100% 100%;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    background: none
}

.kv-guide-icon-01:before,.kv-guide-icon-02:before,.kv-guide-icon-03:before,.kv-guide-icon-04:before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url(https://wegame.gtimg.com/g.55555-r.c4663/wegame-home/icon-row.c09836b1.svg) no-repeat;
    background-size: 100% 100%;
    transform-origin: 50% 0
}

.kv-guide-icon-01 {
    top: -2vh;
    opacity: .5;
    opacity: 1;
    animation: guideIcon0 2s linear 0s infinite both;
    transform-origin: 50% 50%
}

.kv-guide-icon-01:before {
    animation: guideIcon01 2s linear 0s infinite both;
    transform-origin: 50% 50%
}

.kv-guide-icon-02 {
    top: -2vh;
    opacity: .5;
    opacity: 1;
    animation: guideIcon0 2s linear .5s infinite both;
    transform-origin: 50% 50%
}

.kv-guide-icon-02:before {
    animation: guideIcon01 2s linear .5s infinite both;
    transform-origin: 50% 50%
}

.kv-guide-icon-03 {
    top: -2vh;
    opacity: .5;
    opacity: 1;
    animation: guideIcon0 2s linear 1s infinite both;
    transform-origin: 50% 50%
}

.kv-guide-icon-03:before {
    animation: guideIcon01 2s linear 1s infinite both;
    transform-origin: 50% 50%
}

.kv-guide-icon-04 {
    top: -2vh;
    opacity: .5;
    opacity: 1;
    animation: guideIcon0 2s linear 1.5s infinite both;
    transform-origin: 50% 50%
}

.kv-guide-icon-04:before {
    animation: guideIcon01 2s linear 1.5s infinite both;
    transform-origin: 50% 50%
}

.kv-guide-icon-ele:before {
    opacity: 0;
    top: 2vh
}

.kv-guide-icon-ele:after {
    opacity: 0
}

@keyframes guideIcon0 {
    0% {
        opacity: 0;
        transform: translate3d(0,-2vh,0)
    }

    33.333% {
        opacity: 1;
        transform: translateZ(0)
    }

    66.6666% {
        opacity: 0;
        transform: translate3d(0,2vh,0)
    }

    to {
        opacity: 0;
        transform: translate3d(0,2vh,0)
    }
}

@keyframes guideIcon01 {
    0% {
        transform: scale3d(0,0,1)
    }

    20% {
        transform: scaleX(1)
    }

    40% {
        transform: scaleX(1)
    }

    60% {
        transform: scaleX(1)
    }

    to {
        transform: scale3d(0,0,1)
    }
}

@keyframes guideIconMove {
    0% {
        transform: translate3d(-50%,0,0)
    }

    50% {
        transform: translate3d(-50%,2vh,0)
    }

    to {
        transform: translate3d(-50%,0,0)
    }
}

@keyframes guideIcon2 {
    0% {
        opacity: .5
    }

    to {
        opacity: .2
    }
}

@keyframes guideIcon1 {
    0% {
        opacity: 1
    }

    to {
        opacity: .5
    }
}