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
}

.h5-share {
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;
    width: 0;
    height: 0;
    overflow: hidden
}

::-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
}

body {
    --design-width: 1920;
    background: #0c0c0c;
    overflow-x: hidden;
    overflow-y: scroll
}

@media screen and (max-width:1200px) {
    body {
        overflow-x: auto
    }
}

.page-section {
    position: relative;
    background-color: #0c0c0c;
    height: 100vh;
    z-index: 1;
    overflow: hidden
}

.section-game {
    z-index: 20
}

.page-section-inner {
    position: relative;
    z-index: 10;
    height: 100vh;
    overflow: hidden;
}

.page-section-main {
    position: relative;
    z-index: 8;
    max-height: 100%;
    top: 50%;
    transform: translate3d(0, -50%, 0);
}

.page-section-main:before {
    content: "";
    padding-top: calc(1080/var(--design-width)*100%);
    display: block;
    pointer-events: none
}

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

.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
}

.button-download-mac {
    display: none
}

.mac-env .button-download-mac {
    display: block
}

.mac-env .button-download-pc {
    display: none
}

.button-download-mac .mac-popup {
    display: none;
    border-radius: 0
}

.button-download-mac .mac-popup.mac-popup--top {
    left: 50%;
    transform: translate3d(-50%, calc(-100% - 70px), 0)
}

.button-download-mac .mac-popup.mac-popup--right {
    left: calc(100% + 10px);
    top: -100%
}

.button-download-mac .mac-popup.mac-popup--right:before {
    content: "";
    position: absolute;
    top: 0;
    left: -20px;
    bottom: 0;
    height: 100%;
    width: 30px
}

.button-download-mac .mac-popup.mac-popup--top:before {
    content: "";
    position: absolute;
    top: auto;
    left: 0;
    right: 0;
    bottom: -30px;
    height: 30px
}

.button-download-mac:hover .mac-popup {
    display: block
}

.button-download-mac .mac-popup-button {
    border-radius: 0
}

.button-download-mac .mac-popup.mac-popup--right:after {
    top: 80px;
    bottom: auto;
    left: -4px;
    transform: rotate(90deg)
}

.section-more .button-download-mac .mac-popup.mac-popup--top {
    left: 50%;
    transform: translate3d(-50%, calc(-100% - 80px), 0)
}

@media screen and (min-width:300px) and (max-width:360px) {
    .in-mobile .widget-login {
        transform: scale(.5)
    }
}

@media screen and (min-width:360px) {
    .in-mobile .widget-login {
        transform: scale(.6)
    }
}

.lite-version .games-inner::-webkit-scrollbar,
.lite-version .section-ui::-webkit-scrollbar {
    width: 6px !important;
    height: 6px !important;
    background: transparent
}

.lite-version .games-inner::-webkit-resizer,
.lite-version .games-inner::-webkit-scrollbar-corner,
.lite-version .section-ui::-webkit-resizer,
.lite-version .section-ui::-webkit-scrollbar-corner {
    background: transparent
}

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

.lite-version .games-inner::-webkit-scrollbar-thumb:hover,
.lite-version .section-ui::-webkit-scrollbar-thumb:hover {
    background-color: hsla(0, 0%, 100%, .8) !important
}

.kv-logo-ele {
    width: calc(900/var(--design-width)*100%);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate3d(-50%, -50%, 0);
    z-index: 20
}

.kv-logo {
    width: 100%;
    display: block;
    position: relative;
    z-index: 10
}

.kv-logo:before {
    content: "";
    padding-top: 25%;
    display: block
}

.kv-logo video {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0
}

.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
    }
}

.kv-logo:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url(../../static/image/banner-title.4ad31a65.png) no-repeat;
    background-size: 100% 100%;
    opacity: 0
}

.button-download {
    position: relative;
    width: 35.29412%;
    margin: 5vw auto 0;
    border: 1px solid hsla(0, 0%, 100%, .5);
    cursor: pointer;
    background: hsla(0, 0%, 100%, .05);
    backdrop-filter: blur(10px);
    transition: all .3s ease-in-out;
    opacity: 0
}

.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;
    font-size: 1.2vw;
    color: #fff;
    font-weight: 700;
    transition: all .3s ease-in-out;
    overflow: hidden
}

.button-dowload-inner:after,
.button-dowload-inner:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 130%;
    background: linear-gradient(272deg, #ff973a 3.18%, #ff8939 35.98%, #ff5a21 96.26%) no-repeat;
    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-row {
    width: 8.05556%;
    padding-top: 8.05556%;
    background: url(../image/icon-down.cb272fc9.svg) no-repeat;
    background-size: 100% 100%;
    margin-right: .8vw;
    opacity: .8;
    transition: all .3s ease-in-out
}

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

.button-download:hover {
    border-color: #ff8f00
}

.button-download:hover .button-dowload-inner {
    color: #000
}

.button-download:hover .button-download-row {
    filter: invert(1)
}

.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(../image/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(../image/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
    }
}

.section-kv .page-section-bg {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1
}

.section-kv .page-section-bg:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    background-color: #000;
    animation: fadeOutMask 5s linear 0s 1 both
}

@keyframes fadeOutMask {
    0% {
        opacity: 1
    }

    to {
        opacity: .5
    }
}

.kv-slogan {
    position: absolute;
    top: 0;
    left: 50%;
    z-index: 10;
    width: 70%;
    transform: translate3d(-50%, 5vh, 0);
    animation: sloganIn 1s cubic-bezier(.36, .1, .16, 1) 2.4s 1 both;
    pointer-events: none
}

.kv-slogan:after {
    content: "";
    display: block;
    padding-top: 56.85714%
}

.kv-slogan img {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    animation: fadeOut .2s linear 2s 1 both
}

.kv-slogan:before {
    content: "";
    display: block;
    position: absolute;
    top: 37.55%;
    left: 23.1%;
    width: 54%;
    height: 30%;
    background: url(../../static/image/banner-title.4ad31a65.png) no-repeat;
    background-size: 100% auto;
    z-index: 100;
    opacity: 0;
    animation: fadeIn .2s linear 1s 1 both
}

.section-kv .button-download {
    animation: buttonfadeIn 1s cubic-bezier(.36, .1, .16, 1) 2.3s 1 both
}

@keyframes buttonfadeIn {
    0% {
        opacity: 0;
        transform: translate3d(0, 30vh, 0)
    }

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

@keyframes sloganIn {
    0% {
        transform: translate3d(-50%, 10vh, 0)
    }

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

@keyframes fadeIn {
    0% {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

@keyframes fadeOut {
    0% {
        opacity: 1
    }

    to {
        opacity: 0
    }
}

.lite-version .section-kv-clip {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    transform: translateZ(0);
    opacity: 1 !important
}

.lite-version .kv-slogan {
    animation: none;
    top: 10%;
    transform: translate3d(-50%, 0, 0);
    width: 60%
}

.lite-version .section-kv .button-download {
    animation: none;
    opacity: 1
}

.lite-version .kv-logo-ele {
    position: absolute;
    top: auto;
    left: 50%;
    bottom: 30%;
    transform: translate3d(-50%, 0, 0)
}

.lite-version .page-section.section-kv {
    position: relative;
    height: auto
}

.lite-version .page-section.section-kv:after {
    content: "";
    padding-top: 56%;
    display: block
}

.lite-version .page-section.section-kv .page-section-inner {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0
}

.lite-version .page-section.section-kv .page-section-bg {
    position: absolute
}

.lite-version .page-section {
    height: 600px
}

.lite-version .page-section .page-section-inner {
    height: 100%
}

.lite-version .section-game-slogan,
.lite-version .section-game-slogan-ele {
    opacity: 1
}

.lite-version .section-game-slogan-ele {
    opacity: 1 !important;
    transform: none !important
}

.lite-version .section-game {
    height: 920px
}

.lite-version .section-game-slogan {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    bottom: auto;
    height: 300px;
    opacity: 1 !important
}

.lite-version .page-section-main:before {
    display: none
}

.lite-version .section-game-clip .page-section-main {
    transform: none;
    top: auto
}

.lite-version .section-game .arrows-list {
    opacity: 0;
    display: none
}

.lite-version .games,
.lite-version .games-inner {
    opacity: 1
}

.lite-version .games {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    bottom: auto;
    transform: none !important
}

.lite-version .games-inner {
    height: 580px;
    overflow: hidden
}

.lite-version .games-inner,
.lite-version .games-inner-scroll {
    transform: none !important;
    width: 100%;
    display: block;
    opacity: 1 !important
}

.lite-version .games-inner-scroll {
    height: 620px;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 20px 30px 30px 78px
}

.lite-version .slide-menus {
    --slide-gap: 150px
}

.lite-version .slide-menus-group {
    transform: none;
    width: 1800px
}

.lite-version .slide-menu:after {
    display: none
}

.lite-version .slide-menu-li {
    margin: 0 0 0 13px;
    width: 170px
}

.lite-version .slide-menu-li:before {
    padding-top: 155%
}

.lite-version .slide-menus-row {
    width: 300px;
    left: -150px;
    top: 21px
}

.lite-version .slide-menus-row:before {
    content: "";
    padding-top: 174.51404%;
    display: block;
    pointer-events: none
}

.lite-version .page-section.section-feature {
    height: auto;
    background: url(../image/ui-bg.00b3995c.jpg) no-repeat;
    background-color: #000;
    background-size: 100% 1000px;
    background-position: 50% 0
}

.lite-version .page-section-bg-wrap {
    display: none
}

.feature-slogan-title .feature-slogan-title,
.lite-version .feature-game-slogan,
.lite-version .feature-game-slogan-inner {
    opacity: 1 !important;
    transform: none !important
}

.lite-version .feature-arrow-list {
    display: none
}

.lite-version .section-feature-intro {
    height: auto
}

.lite-version .section-feature-intro .page-section-inner {
    height: 300px
}

.lite-version .page-section-ui-inner {
    display: none
}

.lite-version .scrollwrap {
    height: auto;
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    bottom: auto
}

.lite-version .scrollwrap .section-tools {
    height: 350px;
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    bottom: auto;
    opacity: 1;
    pointer-events: auto;
    margin-top: -100px
}

.lite-version .section-tools .page-section-bg {
    background: none
}

.lite-version .section-team,
.lite-version .section-tools-lol,
.lite-version .section-tools-lostark,
.lite-version .section-tools-valorant {
    height: 650px;
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    bottom: auto;
    opacity: 1;
    pointer-events: auto
}

.lite-version .section-team .page-section-bg {
    clip-path: none
}

.lite-version .section-team .page-section-bg-inner,
.lite-version .section-team .page-section-bg-inner-white {
    display: none
}

.lite-version .section-tools-lol .page-section-inner.section-tools--1 .lol-feature-box,
.lite-version .section-tools-lol .page-section-inner.section-tools--1 .lol-feature-box-bg {
    height: 400px;
    margin-top: 100px
}

.lite-version .section-tools-lol .page-section-inner.section-tools--1 .slash-left .tools-feature-title {
    transform: translate3d(-5vw, -100px, 0)
}

.lite-version .section-tools-lol .page-section-inner.section-tools--2 .slash-right .tools-feature-title {
    transform: translate3d(5vw, -170px, 0)
}

.lite-version .section-tools-lol .page-section-inner.section-tools--1 .lol-agent {
    transform: translate3d(0, -50%, 0)
}

.lite-version .section-more-logo {
    top: 40%;
    transform: translate3d(-50%, 0, 0)
}

.lite-version .kv-guide-icon {
    display: none
}

.lite-version .tools-main-cont,
.tools-main,
.tools-main-bg {
    padding: 0
}

.lite-version .scrollwrap .section-tools .arrows-list {
    display: none
}

.lite-version .section-ui {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    bottom: auto;
    width: 100%;
    z-index: 200;
    height: auto;
    margin-bottom: 80px
}

.lite-version .section-ui-mobile {
    width: 400vw;
    position: relative;
    white-space: nowrap
}

.lite-version .section-ui-mobile-scroll {
    width: 100vw;
    overflow: auto;
    overflow-y: hidden;
    position: relative;
    margin-bottom: -20px
}

.lite-version .section-ui-mobile-wrap {
    overflow: hidden
}

.lite-version .section-ui-mobile-item {
    width: 100vw;
    display: inline-block;
    vertical-align: top;
    overflow: hidden;
    padding: 0 80px;
    box-sizing: border-box
}

.lite-version .section-ui-mobile-item:after {
    content: "";
    padding-top: 50%;
    display: block
}

.lite-version.in-mobile .section-ui-mobile-item:after {
    padding-top: 85%;
}

.lite-version .mobile-item-login {
    background: url(../../static/image/mobile-ui-login.a331fa41.png) no-repeat;
    background-size: 100% auto;
    background-position: 50% 0
}

.lite-version .mobile-item-shop {
    background: url(../../static/image/mobile-ui-02.d73e236b.png) no-repeat;
    background-size: 100% auto;
    background-position: 50% 0
}

.lite-version .mobile-item-rank {
    background: url(../../static/image/mobile-ui-01.8dd3a93a.png) no-repeat;
    background-size: 100% auto;
    background-position: 50% 0
}

.lite-version .mobile-item-hot {
    background: url(../../static/image/mobile-ui-03.45977b41.png) no-repeat;
    background-size: 100% auto;
    background-position: 50% 0
}

.lite-version .page-section.section-more {
    height: auto
}

.lite-version .section-more .page-section-main {
    height: 100%
}

.lite-version .page-section.section-more:after {
    content: "";
    padding-top: 56%;
    display: block
}

.lite-version .page-section.section-more .page-section-inner {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0
}

.slideui-arrow {
    width: 70px;
    height: 70px;
    background: url(../image/slide-icon.8edae7c2.svg) no-repeat;
    background-size: 100% auto;
    position: absolute;
    left: 30px;
    top: 50%;
    transform: translate3d(0, calc(-50% - 70px), 0);
    z-index: 200;
    cursor: pointer;
    opacity: .5;
    transition: opacity .2s linear;
    display: none
}

.lite-version .slideui-arrow {
    display: block
}

.in-mobile .slideui-arrow {
    zoom: .5
}

.slideui-arrow:hover {
    opacity: 1
}

.slideui-arrow-right {
    left: auto;
    right: 30px;
    transform: rotateY(180deg) translate3d(0, calc(-50% - 70px), 0)
}

.slideui-dots {
    padding: 10px;
    text-align: center;
    display: none
}

.lite-version .slideui-dots {
    display: block
}

.lite-version.in-mobile .slideui-dots {
    padding: 5px 0 20px;
    zoom: .8
}

.slideui-dot {
    width: 24px;
    height: 24px;
    display: inline-block;
    margin: 0 6px;
    cursor: pointer;
    position: relative
}

.slideui-dot:before {
    content: "";
    width: 10px;
    height: 10px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -5px 0 0 -5px;
    z-index: 1;
    border: 1px solid #fff;
    opacity: .5;
    transform: rotate(45deg)
}

.slideui-dot.current:before {
    opacity: 1;
    background-color: #fff
}

.slideui-dot:hover:before {
    opacity: 1
}

.lite-version.in-mobile .section-game-slogan {
    height: 120px
}

.lite-version.in-mobile .section-game {
    height: 700px
}

.lite-version.in-mobile .section-feature-intro .page-section-inner {
    height: 120px
}

.lite-version.in-mobile .section-ui {
    height: auto
}

.lite-version.in-mobile .scrollwrap .section-tools {
    height: 120px
}

.lite-version.in-mobile .section-team,
.lite-version.in-mobile .section-tools-lol,
.lite-version.in-mobile .section-tools-lostark,
.lite-version.in-mobile .section-tools-valorant {
    height: 300px
}

.lite-version.in-mobile .section-tools-valorant .page-section-inner.section-tools--1 .slash-left .tools-feature-title {
    transform: translate3d(-5vw, -50px, 0)
}

.lite-version.in-mobile .section-tools-valorant .page-section-inner.section-tools--2 .slash-right .tools-feature-title {
    transform: translate3d(5vw, -70px, 0)
}

.lite-version.in-mobile .section-tools-valorant .page-section-inner.section-tools--1 .valorant-score-box {
    transform: translate3d(0, -60px, 0);
    height: 380px;
    margin-top: 180px
}

.lite-version.in-mobile .section-tools-valorant .page-section-inner.section-tools--2 .valorant-score-chat,
.lite-version.in-mobile .section-tools-valorant .valorant-score-chat {
    top: 120px
}

.lite-version.in-mobile .section-tools-valorant .page-section-inner.section-tools--2 .valorant-agent-r {
    transform: translate3d(65vw, -120px, 0)
}

.lite-version.in-mobile .valorant-agent-rbg {
    transform: translate3d(65vw, -150px, 0)
}

.lite-version.in-mobile .section-tools-valorant .page-section-inner.section-tools--1 .valorant-agent {
    transform: translate3d(0, -120px, 0)
}

.lite-version.in-mobile .section-tools-lol .page-section-inner.section-tools--1 .lol-feature-box,
.lite-version.in-mobile .section-tools-lol .page-section-inner.section-tools--1 .lol-feature-box-bg {
    height: 150px;
    margin-top: 50px
}

.lite-version.in-mobile .section-tools-lol .page-section-inner.section-tools--1 .slash-left .tools-feature-title {
    transform: translate3d(-5vw, -30px, 0)
}

.lite-version.in-mobile .section-tools-lol .page-section-inner.section-tools--2 .slash-right .tools-feature-title {
    transform: translate3d(5vw, -70px, 0)
}

.lite-version.in-mobile .section-tools-lol .page-section-inner.section-tools--1 .lol-agent {
    transform: translate3d(0, -50%, 0)
}

.lite-version.in-mobile .section-tools-lol .page-section-inner.section-tools--2 .lol-agent-r {
    transform: translate3d(0, -150px, 0)
}

.lite-version.in-mobile .section-tools-lol .page-section-inner.section-tools--2 .lol-mode-ist {
    transform: translateZ(0)
}

.lite-version.in-mobile .section-tools-lostark .page-section-inner.section-tools--1 .slash-left .tools-feature-title {
    transform: translate3d(-5vw, -30px, 0)
}

.lite-version.in-mobile .section-tools-lostark .page-section-inner.section-tools--2 .slash-right .tools-feature-title {
    transform: translate3d(5vw, -30px, 0)
}

.lite-version.in-mobile .section-tools-lostark .page-section-inner.section-tools--1 .lostark-feature-box {
    transform: translateZ(0);
    margin-top: 50px;
    height: 110px
}

.lite-version.in-mobile .section-tools-lostark .page-section-inner.section-tools--2 .lostark-feature-box-r {
    height: 120px;
    margin-top: 100px
}

.lite-version.in-mobile .page-section.section-feature {
    background: url(../image/ui-bg.00b3995c.jpg) no-repeat;
    background-size: 100% 500px;
    background-position: 50% 0
}

.lite-version.in-mobile .section-kv .kv-slogan video {
    display: none
}

.lite-version.in-mobile .section-kv .kv-slogan:before {
    display: block;
    opacity: 1;
    animation: none !important
}

.lite-version.in-mobile .section-kv .page-section-bg {
    background: url(../image/ui-bg.00b3995c.jpg) no-repeat;
    background-size: 100% 100%;
    background-position: 50% 0
}

.lite-version.in-mobile .section-kv .page-section-bg:after,
.lite-version.in-mobile .section-kv .page-section-bg video {
    display: none
}

.lite-version.in-mobile .slide-menu-bg,
.lite-version.in-mobile .slide-menu-img,
.lite-version.in-mobile .slide-menu-logo {
    filter: brightness(1)
}

.lite-version.in-mobile .scrollwrap .section-tools-lol,
.lite-version.in-mobile .scrollwrap .section-tools-lostark,
.lite-version.in-mobile .scrollwrap .section-tools-valorant {
    display: none
}

.lite-version.in-mobile .mobile-tools {
    background: url(../image/mobile-tools.2efaccae.jpg) no-repeat;
    background-size: 100% auto;
    background-position: 50% 0
}

.lite-version.in-mobile .mobile-tools:after {
    content: "";
    padding-top: 330.83333%;
    display: block
}

.lite-version.in-mobile .kv-logo-ele {
    transform: translate3d(-50%, 52%, 0)
}

.lite-version.in-mobile .button-download {
    width: 40vw
}

.lite-version.in-mobile .button-dowload-inner {
    font-size: 3vw
}

.lite-version.in-mobile .kv-slogan {
    top: 0;
    transform: translate3d(-50%, -10%, 0);
    width: 100%
}

.lite-version.in-mobile .section-more-logo {
    top: 20%;
    width: 65vw
}

.lite-version.in-mobile .section-more .button-download {
    bottom: -120%
}

body:not(.lite-version) .game-clip-show .section-game-slogan {
    animation: gameSlogan1Anim .6s ease-in-out 0s 1 both
}

body:not(.lite-version) .game-clip-show .slide-menus-group {
    animation: gameListAnim1 .6s ease-in-out 0s 1 both
}

body:not(.lite-version) .game-clip-show .arrows-list {
    opacity: 0 !important
}

body:not(.lite-version) .game-clip-show .section-game-slogan {
    opacity: .5 !important
}

body:not(.lite-version) .game-clip-show .arrows2,
body:not(.lite-version) .game-clip-show .arrows4,
body:not(.lite-version) .game-clip-show .arrows5 {
    animation: none !important
}

@keyframes gameSlogan1Anim {
    0% {
        transform: translateZ(0)
    }

    to {
        transform: translate3d(30%, 0, 0)
    }
}

@keyframes gameListAnim1 {
    0% {
        transform: translate3d(-66vw, 0, 0)
    }

    to {
        transform: translate3d(-20vw, 0, 0)
    }
}

body:not(.lite-version) .game-clip-show .slide-menu-li.slide-menu-li-head {
    opacity: 0
}

body:not(.lite-version) .game-clip-show .slide-menu:after {
    animation: hideSlideMenuMask .4s linear .2s 1 both
}

@keyframes hideSlideMenuMask {
    0% {
        opacity: 1
    }

    to {
        opacity: 0
    }
}

.lite-version .feature-slogan-des,
.lite-version .feature-slogan-title,
.lite-version .tools-slogan-des,
.lite-version .tools-slogan-title {
    opacity: 1 !important
}

.games-inner-scrollbar {
    display: none
}

.lite-version .games-inner-scrollbar {
    display: block
}

.lite-version.in-mobile .games-inner-scrollbar {
    display: none
}

.games-inner-scrollbar {
    width: 600px;
    position: relative;
    text-align: center;
    padding: 6px 0;
    border: 1px solid hsla(0, 0%, 100%, .5);
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translate3d(-50%, 0, 0);
    border-radius: 200px;
    overflow: hidden
}

.games-inner-scrollbar-ele {
    height: 100%;
    position: relative;
    cursor: pointer;
    width: 100px;
    position: absolute;
    top: 0;
    left: 0
}

.games-inner-scrollbar-ele:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #fff;
    border: 1px solid #fff;
    opacity: .5
}

.games-inner-scrollbar-ele:hover:before {
    opacity: 1
}

.lite-version .button-download-mac .mac-popup.mac-popup--top {
    transform: translate3d(-50%, calc(-100% - 40px), 0)
}

.lite-version .game-slogan-title {
    width: 400px
}

.lite-version .game-slogan-des {
    font-size: 16px;
    margin: 20px 0 0
}

.lite-version .feature-slogan-title {
    width: 500px
}

.lite-version .feature-slogan-des {
    font-size: 16px;
    margin: 20px 0 0
}

.lite-version .feature-slogan-title:after {
    font-size: 16px;
    top: 131px;
    transform: translate3d(-50%, 0, 0) scale(.6);
    transform-origin: 50% 0;
    letter-spacing: 71px;
    margin-left: 10px
}

.lite-version .tools-slogan-title {
    width: 500px
}

.lite-version .tools-slogan-des {
    font-size: 16px;
    margin: 20px 0 0
}

.lite-version .tools-slogan-title:after {
    font-size: 16px;
    top: 62px;
    transform: translate3d(-50%, 0, 0) scale(.6);
    transform-origin: 50% 0;
    letter-spacing: 71px;
    margin-left: 10px
}

.lite-version.in-mobile .game-slogan-title {
    width: 200px
}

.lite-version.in-mobile .game-slogan-des {
    font-size: 10px;
    margin: 20px 0 0
}

.lite-version .section-game .section-game-slogan .game-slogan-title:after {
    font-size: 8px;
    top: 116px;
    transform: translate3d(-50%, 0, 0);
    transform-origin: 50% 0;
    margin-left: 6px;
    letter-spacing: 34px
}

.lite-version.in-mobile .section-game .section-game-slogan .game-slogan-title:after {
    font-size: 8px;
    top: 60px;
    transform: translate3d(-50%, 0, 0);
    transform-origin: 50% 0;
    margin-left: 6px;
    letter-spacing: 13px
}

.lite-version.in-mobile .feature-slogan-title {
    width: 300px
}

.lite-version.in-mobile .feature-slogan-des {
    font-size: 10px;
    margin: 20px 0 0
}

.lite-version.in-mobile .feature-slogan-title:after {
    font-size: 8px;
    top: 80px;
    transform: translate3d(-50%, 0, 0);
    transform-origin: 50% 0;
    letter-spacing: 23px;
    margin-left: 6px
}

.lite-version.in-mobile .tools-slogan-title {
    width: 240px
}

.lite-version.in-mobile .tools-slogan-des {
    font-size: 10px;
    margin: 20px 0 0
}

.lite-version.in-mobile .tools-slogan-title:after {
    font-size: 8px;
    top: 33px;
    transform: translate3d(-50%, 0, 0);
    transform-origin: 50% 0;
    letter-spacing: 17px;
    margin-left: 5px
}

.placholder {
    position: absolute;
    height: 10px;
    width: 100vw;
    left: 0;
    right: 0;
    z-index: 100
}

.placholder-games {
    top: 100vh
}

.section-game-slogan,
.section-game-slogan-ele {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0
}

.section-game-slogan-ele {
    opacity: 1
}

.game-slogan-title {
    width: calc(590/var(--design-width)*100%);
    position: absolute;
    top: calc(50% - 2vw);
    left: 50%;
    transform: translate3d(-50%, -50%, 0);
    z-index: 3
}

.game-slogan-title:before {
    content: "";
    padding-top: 45.36082%;
    display: block
}

.game-slogan-title-words {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0
}

.game-slogan-title-words:after,
.game-slogan-title-words:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0
}

.game-slogan-title-words:before {
    background: url(../../static/image/section2-title.c3945b3b.svg) no-repeat;
    background-size: 100% 100%;
    opacity: 1;
    z-index: 1
}

.game-slogan-title-words:after {
    background: #ff9d2b;
    -webkit-mask-image: url(../../static/image/section2-title.c3945b3b.svg);
    -webkit-mask-size: 100% 100%;
    z-index: 2;
    opacity: 0
}

/* 第二屏   小浪人游戏盒子小标题 */
.section-game .section-game-slogan .game-slogan-title:after {
    /* content: "COMMODITY"; */
    position: absolute;
    top: 8.6vw;
    left: 50%;
    font-size: .7vw;
    display: block;
    color: #fff;
    letter-spacing: 2.5vw;
    white-space: nowrap;
    opacity: .8;
    transform: translate3d(-50%, 0, 0);
    text-align: justify;
    padding-left: 2.5vw
}

.game-slogan-des {
    font-size: 1.7vw;
    color: #e3e3e3;
    text-align: center;
    letter-spacing: .52vw;
    position: absolute;
    top: calc(50% + 3.5vw);
    left: 50%;
    transform: translate3d(-50%, -50%, 0);
    z-index: 3
}

.games,
.games-inner {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 30;
    display: flex;
    flex-direction: start;
    flex-direction: column;
    align-items: end;
    justify-content: center
}

.games-inner {
    transform: translate3d(-10vw, 0, 0);
    opacity: 0
}

body:not(.lite-version) .games-inner-scroll {
    width: 100%;
    position: relative;
    display: flex;
    flex-direction: start;
    flex-direction: column;
    align-items: end;
    justify-content: center
}

.slide-menus-group {
    width: calc(2926/var(--design-width)*100%);
    transform: translate3d(-72vw, 0, 0)
}

.slide-menus {
    --slide-gap: 12vw;
    width: calc(1260/var(--design-width)*100%)
}

.slide-menus-row {
    width: calc(306/var(--design-width)*100%);
    background: url(../../static/image/games-row-normal.4bc7f01c.png) no-repeat;
    background-size: 100% 100%;
    position: absolute;
    top: 0;
    left: -12%;
    z-index: 60;
    cursor: pointer;
    pointer-events: none
}

.slide-menu-link,
.slide-menus-row:after {
    content: "";
    position: absolute;
    top: 20%;
    left: 0;
    right: 20%;
    bottom: 20%;
    z-index: 1;
    display: block;
    opacity: 0;
    pointer-events: auto
}

.slide-menu-link {
    z-index: 3
}

.slide-menus-row:after {
    opacity: 1;
    left: auto;
    right: 0;
    top: 30%;
    bottom: 30%;
    width: 50%
}

.slide-menus-row:hover {
    background: url(../image/games-row.547ee9e3.png) no-repeat;
    background-size: 100% 100%
}

.slide-menus-row:before {
    content: "";
    padding-top: 170.41037%;
    display: block
}

.slide-menu-list {
    width: 100%
}

.slide-menu-ul {
    font-size: 0;
    width: 100%;
    white-space: nowrap
}

.slide-menu-li {
    width: calc(458/var(--design-width)*100%);
    width: calc(220/var(--design-width)*100%);
    display: inline-block;
    position: relative;
    z-index: 1;
    overflow: hidden;
    margin: 0 0 0 1vw;
    transform: skewX(30deg)
}

.slide-menu-li:before {
    content: "";
    padding-top: 181.81818%;
    display: block;
    pointer-events: none
}

.slide-menu {
    width: 100%;
    overflow: hidden;
    z-index: 2
}

.slide-menu,
.slide-menu-wrap {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0
}

.slide-menu-wrap {
    width: 220%;
    transform: skewX(-30deg) translate3d(-50%, 0, 0);
    transform-origin: 50% 100%
}

.slide-menu-li:first-child {
    z-index: 20
}

.slide-menu-li:nth-child(2) {
    z-index: 19
}

.slide-menu-li:nth-child(3) {
    z-index: 18
}

.slide-menu-li:nth-child(4) {
    z-index: 17
}

.slide-menu-li:nth-child(5) {
    z-index: 16
}

.slide-menu-li:nth-child(6) {
    z-index: 15
}

.slide-menu-li:nth-child(7) {
    z-index: 14
}

.slide-menu-li:nth-child(8) {
    z-index: 13
}

.slide-menu-li:nth-child(9) {
    z-index: 12
}

.slide-menu-li:nth-child(10) {
    z-index: 11
}

.slide-menu-li.slide-menu-li-head {
    z-index: 20;
    opacity: 0;
    pointer-events: none
}

body:not(.in-mobile) .slide-menu-li.slide-menu-li-head {
    opacity: 1;
    pointer-events: none;
    cursor: default;
    overflow: visible;
    transform: translate3d(-28%, 0, 0)
}

.slide-menu-li.slide-menu-li-head .slide-menu-inner {
    width: 100%;
    background: linear-gradient(0deg, #ff9239, #fe6024);
    height: 100%;
    clip-path: polygon(0 0, calc(100% - var(--slide-gap)) 0, 100% 50%, 50% 100%, 0 100%)
}

.slide-menu-li.slide-menu-li-head .slide-menu:after {
    display: none
}

.slide-menu-li.slide-menu-li-head .slide-menu {
    height: 200%;
    width: 200%;
    left: auto;
    right: 0;
    overflow: visible
}

.slide-menu-li.slide-menu-li-head .slide-menu-wrap {
    transform: none;
    width: 100%
}

.slide-menu-inner {
    transition: all .3s ease-in-out
}

.slide-menu-bg,
.slide-menu-img,
.slide-menu-logo {
    filter: brightness(.5)
}

.slide-menu-li:first-child .slide-menu-inner,
.slide-menu-li:nth-child(2) .slide-menu-inner,
.slide-menu-li:nth-child(3) .slide-menu-inner,
.slide-menu-li:nth-child(4) .slide-menu-inner,
.slide-menu-li:nth-child(5) .slide-menu-inner,
.slide-menu-li:nth-child(6) .slide-menu-inner,
.slide-menu-li:nth-child(7) .slide-menu-inner,
.slide-menu-li:nth-child(8) .slide-menu-inner {
    right: auto
}

.slide-menu {
    z-index: 10;
    display: block;
    transform-origin: 50% 100%
}

.slide-menu:after {
    content: "小浪人智能助手";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #fd6c01;
    pointer-events: none;
    z-index: 30;
    opacity: 1;
    transition: opacity .2s linear
}

.slide-menus-bottom {
    margin-top: -1px
}

.slide-menus-bottom .slide-menu-li {
    transform: skewX(-30deg)
}

.slide-menus-bottom .slide-menu-wrap {
    transform: skewX(30deg) translateZ(0)
}

.lite-version .slide-menu-li.slide-menu-li-head {
    opacity: 0;
    display: none
}

.slide-menu-inner {
    width: 100%;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0
}

.slide-menus-bottom .slide-menu-img img {
    object-position: 40% 0
}

.slide-menus-bottom .slide-menu-logo {
    left: 0%
}

.slide-menu-bg,
.slide-menu-img,
.slide-menu-img-open {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0
}

.slide-menu-bg img,
.slide-menu-img-open img,
.slide-menu-img img {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover
}

.slide-menu-img {
    z-index: 5
}

.slide-menu-bg {
    z-index: 3
}

.slide-menu-bg img {
    object-position: -6vw 0;
    transition: all .3s cubic-bezier(.14, .38, .35, .97)
}

.slide-menu-img img {
    transition: all .45s cubic-bezier(.14, .38, .35, .97);
    transform: translate3d(-10%, 0, 0)
}

.slide-menu-img-open {
    opacity: 0
}

.slide-menu-logo {
    width: 64%;
    position: absolute;
    left: 31%;
    bottom: 7%;
    z-index: 20;
    transition: transform .3s cubic-bezier(.14, .38, .35, .97)
}

.slide-menu-logo:before {
    content: "";
    padding-top: 34.375%;
    display: block
}

.slide-menu-logo img {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: 50% 50%
}

.arrows-list {
    --arrow-width: 5vw;
    --arrow-width2: 6.6vw;
    --arrow-item-width: 20vw;
    --arrow-item-height: 100vh;
    pointer-events: none
}

.arrows-list,
.arrows-list-inner {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: var(--arrow-item-height)
}

.arrows-item {
    right: 0;
    overflow: hidden
}

.arrows,
.arrows-item {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0
}

.arrows {
    width: var(--arrow-item-width);
    clip-path: polygon(0 0, var(--arrow-width) 0, 100% 50%, var(--arrow-width) 100%, 0 100%, calc(100% - var(--arrow-width)) 50%);
    background-image: linear-gradient(35deg, #fc6b00, #bb5307, #92470f);
    left: -8vw
}

.arrows1 {
    background: #fd6c01;
    clip-path: polygon(0 0, 25% 0, 100% 50%, 25% 100%, 0 100%);
    z-index: 10
}

.arrows1:after {
    padding-top: 300%
}

.game-slogan-title-arrow-left,
.game-slogan-title-arrow-right {
    width: 10%;
    display: block;
    position: absolute;
    top: 5.2vw;
    left: 0;
    opacity: 0
}

.game-slogan-title-arrow-left:before,
.game-slogan-title-arrow-right:before {
    content: "";
    padding-top: 77.41935%;
    display: block
}

.game-slogan-title-arrow-left:after,
.game-slogan-title-arrow-right:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ff9d2b;
    clip-path: polygon(0 0, 65% 0, 100% 50%, 65% 100%, 0 100%, 35% 50%)
}

.game-slogan-title-arrow-right:after {
    transform: rotateY(180deg)
}

.game-slogan-title-arrow-left {
    transform: translate3d(calc(-100% - 3vw), 0, 0)
}

.game-slogan-title-arrow-right {
    left: auto;
    right: 0;
    transform: translate3d(calc(100% + 3vw), 0, 0)
}

.game-arrow-play .arrows2,
.game-arrow-play .arrows3,
.game-arrow-play .arrows4,
.game-arrow-play .arrows5 {
    opacity: 1;
    left: 0;
    animation: arrowListSlide1 5s linear 0s infinite both
}

.game-arrow-play .arrows-item1 .arrows2,
.game-arrow-play .arrows-item1 .arrows3,
.game-arrow-play .arrows-item1 .arrows4,
.game-arrow-play .arrows-item1 .arrows5 {
    animation: arrowListSlide11 5s linear 0s infinite both
}

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

    33.3333% {
        opacity: .3;
        transform: translateZ(0)
    }

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

    to {
        opacity: 0;
        transform: translateZ(0)
    }
}

@keyframes arrowListSlide1 {
    0% {
        opacity: 0;
        transform: translate3d(-40%, 0, 0)
    }

    33.3333% {
        opacity: .3;
        transform: translateZ(0)
    }

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

    to {
        opacity: 0;
        transform: translateZ(0)
    }
}

.game-arrow-play .arrows3 {
    animation-delay: 1.25s
}

.game-arrow-play .arrows4 {
    animation-delay: 2.5s
}

.game-arrow-play .arrows5 {
    animation-delay: 3.75s
}

.game-arrow-play .arrows-item1 .arrows3 {
    animation-delay: 1.25s
}

.game-arrow-play .arrows-item1 .arrows4 {
    animation-delay: 2.5s
}

.game-arrow-play .arrows-item1 .arrows5 {
    animation-delay: 3.75s
}

.game-arrow-play .section-game-slogan {
    opacity: 1
}

.game-arrow-play .game-slogan-title {
    opacity: 0;
    animation: slideInTitleView .3s ease-in-out 0s 1 both
}

.game-arrow-play .section-game-slogan .game-slogan-title:after {
    opacity: 0;
    animation: slideInDescEnView .8s ease-in-out .3s 1 both;
    white-space: nowrap
}

.game-arrow-play .game-slogan-title-words:before {
    animation: fadeIn .6s linear 0s 1 both
}

.game-arrow-play .game-slogan-title-words:after {
    animation: fadeOut .6s linear 0s 1 both
}

.game-arrow-play .game-slogan-des {
    opacity: 0;
    animation: slideInDescView .8s ease-in-out .3s 1 both;
    white-space: nowrap
}

.game-arrow-play .game-slogan-title-arrow-left {
    animation: slideInTitleArrowLeft .6s ease-in-out 0s 1 both
}

.game-arrow-play .game-slogan-title-arrow-right {
    animation: slideInTitleArrowRight .6s ease-in-out 0s 1 both
}

@keyframes slideInTitleArrowLeft {
    0% {
        opacity: 0;
        transform: translate3d(calc(-100% - 6vw), 0, 0)
    }

    to {
        opacity: 1;
        transform: translate3d(calc(-100% - 3vw), 0, 0)
    }
}

@keyframes slideInTitleArrowRight {
    0% {
        opacity: 0;
        transform: translate3d(calc(100% + 6vw), 0, 0)
    }

    to {
        opacity: 1;
        transform: translate3d(calc(100% + 3vw), 0, 0)
    }
}

@keyframes slideInTitleView {
    0% {
        opacity: 0;
        transform: translate3d(-50%, calc(-50% + 100px), 0)
    }

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

@keyframes slideInDescEnView {
    0% {
        opacity: 0;
        letter-spacing: 4vw
    }

    to {
        opacity: .6;
        letter-spacing: 2.5vw
    }
}

@keyframes slideInDescView {
    0% {
        opacity: 0;
        transform: translate3d(-50%, calc(-50% + 20px), 0);
        letter-spacing: 3vw
    }

    to {
        opacity: 1;
        transform: translate3d(-50%, -50%, 0);
        letter-spacing: .6vw
    }
}

.arrows-item2 {
    transform: rotate(180deg)
}

.arrows-item2 .arrows {
    background-image: linear-gradient(135deg, #71fffa, #8ec9c7, #88a2a1)
}

.arrows-item2 .arrows1 {
    background: #0ff
}

.section-game .arrows-item1 {
    --arrow-width: 11%;
    --arrow-width2: 6.6vw;
    --arrow-item-width: 30vw;
    --arrow-item-height: 150%;
    opacity: 0;
    left: -35vw;
    top: 50%;
    bottom: auto;
    transform: translate3d(0, -50%, 0);
    overflow: visible;
    right: auto;
    width: 50vw
}

.section-game .arrows-item1:before {
    content: "";
    padding-top: 294.34783%;
    display: block
}

.section-game .arrows-item1 .arrows {
    opacity: 0;
    bottom: auto;
    height: 100%;
    width: 100%
}

.game-arrows-inner {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0
}

.section-game .arrows-item1 .arrows1 {
    display: none
}

.section-game .arrows-item2 {
    right: -8vw;
    right: -22vw;
    opacity: 0;
    top: 0;
    bottom: 0
}

.slide-menu-li:hover {
    overflow: visible
}

body:not(.in-mobile) .slide-menu:hover {
    width: 318%
}

body:not(.in-mobile) .slide-menu:hover .slide-menu-wrap {
    width: 140%;
    transform: skewX(-30deg) translate3d(-26%, 0, 0)
}

body:not(.in-mobile) .slide-menu:hover .slide-menu-img {
    transform: translateZ(0);
    filter: brightness(1)
}

body:not(.in-mobile) .slide-menu:hover .slide-menu-bg {
    filter: brightness(1)
}

body:not(.in-mobile) .slide-menu:hover .slide-menu-img img {
    transform: translateZ(0)
}

body:not(.in-mobile) .slide-menu:hover .slide-menu-bg img {
    object-position: 0 0
}

body:not(.in-mobile) .slide-menu:hover .slide-menu-logo {
    left: 36%;
    filter: brightness(1);
    width: 20%;
    transform: scale(2);
    transform-origin: 0 100%
}

body:not(.in-mobile) .slide-menu-li:nth-child(9):hover,
body:not(.in-mobile) .slide-menu-li:nth-child(10):hover {
    z-index: 20
}

body:not(.in-mobile) .slide-menu-li:nth-child(9):hover .slide-menu,
body:not(.in-mobile) .slide-menu-li:nth-child(10):hover .slide-menu {
    left: auto;
    right: 0
}

body:not(.in-mobile) .slide-menu-li:hover .slide-menu-img-open {
    opacity: 1
}

body:not(.in-mobile) .slide-menus-bottom .slide-menu:hover .slide-menu-wrap {
    transform: skewX(30deg) translateZ(0)
}

body:not(.in-mobile) .slide-menus-bottom .slide-menu:hover .slide-menu-logo {
    left: 23%
}



.section-feature {
    height: 280vh;
    height: auto;
    position: relative;
    overflow: hidden
}

.section-feature .page-section-inner {
    height: 150vh;
    overflow: visible
}

.feature-game-slogan,
.feature-game-slogan-inner {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0
}

.section-feature-intro {
    position: relative;
    height: 100vh;
    overflow: hidden
}

.feature-game-slogan-inner {
    opacity: 1
}

.feature-slogan-title {
    width: calc(800/var(--design-width)*100%);
    position: absolute;
    top: calc(50% - 2vw);
    left: 50%;
    transform: translate3d(-50%, -50%, 0);
    z-index: 3
}

.feature-slogan-title:before {
    content: "";
    padding-top: 41.31455%;
    display: block
}

.feature-slogan-title-words {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0
}

.feature-slogan-title-words:after,
.feature-slogan-title-words:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0
}

.feature-slogan-title-words:before {
    background: url(../../static/image/section3-title.83ef7170.svg) no-repeat;
    background-size: 100% 100%;
    opacity: 1;
    z-index: 1
}

.feature-slogan-title-words:after {
    background: #ff9d2b;
    -webkit-mask-image: url(../../static/image/section3-title.83ef7170.svg);
    -webkit-mask-size: 100% 100%;
    z-index: 2;
    opacity: 0
}

/* 小浪人智能开区助手小标题 */
.feature-slogan-title:after {
    /* content: "GAME ASSISTANT"; */
    position: absolute;
    top: 11.6vw;
    left: 50%;
    font-size: 1vw;
    display: block;
    color: #fff;
    letter-spacing: 3.8vw;
    white-space: nowrap;
    opacity: .8;
    transform: translate3d(-50%, 0, 0);
    text-align: justify;
    padding-left: 3.3vw
}

.feature-slogan-des {
    font-size: 1.7vw;
    color: #e3e3e3;
    text-align: center;
    letter-spacing: .52vw;
    position: absolute;
    top: calc(50% + 4.5vw);
    left: 50%;
    transform: translate3d(-50%, -50%, 0);
    z-index: 3
}

.section-feature .feature-arrow-list {
    --arrow-item-width: 30vw;
    --arrow-item-height: 100vh;
    top: -15vw
}

.section-feature .feature-arrow-list .arrows-item {
    height: 80vw;
    width: 80vw;
    left: 50%;
    transform: translate3d(-50%, -18vw, 0) rotate(90deg)
}

.section-feature .feature-arrow-list .arrows {
    background-image: linear-gradient(135deg, #71fffa, #8ec9c7, #88a2a1)
}

.section-feature .feature-arrow-list .arrows1 {
    background: #0ff
}

.feature-slides-inner {
    z-index: 40
}

.feature-slides-inner .page-section-main {
    z-index: 40;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0
}

.feature-slides {
    width: 65vw;
    height: 70vh;
    background-color: #1c1c1c;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate3d(-50%, -50%, 0)
}

.page-section-bg-wrap {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 30
}

.page-section-bg-ele {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 300vh;
    z-index: 1
}

.page-section-bg-ele:before {
    background-color: #e3e3e3;
    clip-path: polygon(0 60vh, 100% 150vh, 100% 100%, 0 100%, 0 60vh)
}

.page-section-bg-ele:after,
.page-section-bg-ele:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1
}

.page-section-bg-ele:after {
    background-color: #ff6f00;
    background: linear-gradient(45deg, #ffcc39 50%, #fe6024);
    clip-path: polygon(100% 60vh, 100% 100%, 0 100%, 0 150vh)
}

.show-feature-ui-title .section-feature-intro .arrows2,
.show-feature-ui-title .section-feature-intro .arrows3,
.show-feature-ui-title .section-feature-intro .arrows4,
.show-feature-ui-title .section-feature-intro .arrows5 {
    opacity: 1;
    left: 0;
    animation: arrowListSlide3 5s linear 0s infinite both
}

.show-feature-ui-title .section-feature-intro .arrows3 {
    animation-delay: 1.25s
}

.show-feature-ui-title .section-feature-intro .arrows4 {
    animation-delay: 2.5s
}

.show-feature-ui-title .section-feature-intro .arrows5 {
    animation-delay: 3.75s
}

@keyframes arrowListSlide3 {
    0% {
        opacity: 0;
        transform: translate3d(-25%, 0, 0)
    }

    33.3333% {
        opacity: .25;
        transform: translateZ(0)
    }

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

    to {
        opacity: 0;
        transform: translateZ(0)
    }
}

.feature-slogan-title-arrow-left,
.feature-slogan-title-arrow-right {
    width: 7%;
    display: block;
    position: absolute;
    top: 7.4vw;
    left: 0;
    opacity: 0
}

.feature-slogan-title-arrow-left:before,
.feature-slogan-title-arrow-right:before {
    content: "";
    padding-top: 77.41935%;
    display: block
}

.feature-slogan-title-arrow-left:after,
.feature-slogan-title-arrow-right:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ff9d2b;
    clip-path: polygon(0 0, 65% 0, 100% 50%, 65% 100%, 0 100%, 35% 50%)
}

.feature-slogan-title-arrow-right:after {
    transform: rotateY(180deg)
}

.feature-slogan-title-arrow-left {
    transform: translate3d(calc(-100% - 3vw), 0, 0)
}

.feature-slogan-title-arrow-right {
    left: auto;
    right: 0;
    transform: translate3d(calc(100% + 3vw), 0, 0)
}

.feature-slogan-title {
    opacity: 0
}

.show-feature-ui-title .feature-slogan-title {
    animation: slideInTitleView .3s ease-in-out 0s 1 both
}

.show-feature-ui-title .feature-slogan-title:after {
    opacity: 0;
    animation: slideInDescEnView2 .8s ease-in-out .3s 1 both;
    white-space: nowrap;
    letter-spacing: 3.6vw
}

@keyframes slideInDescEnView2 {
    0% {
        opacity: 0;
        letter-spacing: 4.2vw
    }

    to {
        opacity: .6;
        letter-spacing: 3.6vw
    }
}

.show-feature-ui-title .feature-slogan-title-words:before {
    opacity: 0;
    animation: fadeIn .6s linear 0s 1 both
}

.show-feature-ui-title .feature-slogan-title-words:after {
    animation: fadeOut .6s linear 0s 1 both
}

.feature-slogan-des {
    opacity: 0
}

.show-feature-ui-title .feature-slogan-des {
    animation: slideInDescView .8s ease-in-out .3s 1 both;
    white-space: nowrap
}

.show-feature-ui-title .feature-slogan-title-arrow-left {
    animation: slideInTitleArrowLeft .6s ease-in-out 0s 1 both
}

.show-feature-ui-title .feature-slogan-title-arrow-right {
    animation: slideInTitleArrowRight .6s ease-in-out 0s 1 both
}

@font-face {
    font-family: zzgf;
    src: url(../font/zzgf.d8c90593.ttf) format("truetype")
}

.scrollwrap {
    position: absolute;
    z-index: 10;
    z-index: 200
}

.scrollwrap,
.section-ui {
    height: 100vh;
    background: none;
    width: 100vw;
    top: 0;
    left: 0;
    right: 0
}

.section-ui {
    position: fixed;
    z-index: 10;
    bottom: 0;
    z-index: 100
}

.section-ui-bg {
    width: 100vw;
    height: 100%;
    background: url(../image/ui-bg.00b3995c.jpg) no-repeat;
    background-color: #000;
    background-size: 100% 102%;
    background-position: 50% 0;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    clip-path: polygon(40% 100%, 60% 100%, 60% 100%, 40% 100%);
    transition: all .6s cubic-bezier(.36, .1, .16, 1)
}

.section-ui-show-init .section-ui-bg {
    clip-path: polygon(20% 90%, 80% 90%, 80% 100%, 20% 100%)
}

.section-ui-show-bg .section-ui-bg {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%)
}

.ui-slogan {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0
}

.ui-video-box,
.ui-video-box-preview {
    width: calc(860/var(--design-width)*100%);
    background-color: #000;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate3d(-50%, -50%, 0);
    z-index: 20
}

.ui-video-box {
    background-color: transparent
}

.ui-video-box-inner {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0
}

.ui-video-box-preview:before,
.ui-video-box:before {
    content: "";
    padding-top: 60%;
    display: block
}

.ui-video-box-preview-inner {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none
}

.ui-video-box-preview {
    background: none;
    opacity: 0;
    z-index: 30
}

.ui-video-box-preview-rect {
    position: absolute;
    top: 0;
    left: 0;
    border: .2vw solid #ff8f00;
    width: 0;
    height: 0
}

.ui-video-box-preview-cursor,
.ui-video-box-preview-cursor2 {
    width: 12%;
    background: url(../../home/img/cursor.a5958352.png) no-repeat;
    background-size: 100% 100%;
    position: absolute;
    top: -.5vw;
    left: 0;
    z-index: 20
}

.section-ui-show-bg .ui-video-box-preview {
    animation: fadeInAnim .2s linear .5s 1 both
}

.section-ui-show-bg .ui-video-box-preview-rect {
    animation: previewRectShow .6s cubic-bezier(.36, .1, .16, 1) 1s 1 both, previewRectHideBg .2s linear 2.2s 1 both
}

@keyframes previewRectHideBg {
    0% {
        background: #000
    }

    to {
        background: transparent
    }
}

.section-ui-show-bg .ui-video-box-preview-cursor {
    animation: cursorShow .6s cubic-bezier(.36, .1, .16, 1) 1s 1 both, fadeOutAnim .2s linear 1.5s 1 both
}

.section-ui-show-bg .ui-video-box {
    animation: fadeInAnimBg .3s linear 2s 1 both
}

.section-ui-show-bg .ui-video-box-inner {
    animation: fadeInAnim .3s linear 2s 1 both
}

.section-ui-show-bg .ui-slogan-title {
    animation: fadeInAnim .3s linear 1.5s 1 both
}

.ui-video-box-preview-cursor2 {
    left: 98%;
    top: 92%;
    opacity: 0
}

.section-ui-show-cursor .section-ui-bg {
    animation: none;
    transition: none;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%)
}

.section-ui-show-cursor .ui-slogan-title,
.section-ui-show-cursor .ui-video-box-inner {
    animation: none !important;
    opacity: 1
}

.section-ui-show-cursor .ui-slogan-title svg {
    animation: none !important
}

.section-ui-show-cursor .ui-slogan-title:first-child svg {
    opacity: 1;
    transform: translate3d(0, calc(-50% - 28vh), 0)
}

.section-ui-show-cursor .ui-slogan-title:nth-child(2) svg {
    opacity: .5;
    transform: translate3d(0, -50%, 0)
}

.section-ui-show-cursor .ui-slogan-title:first-child svg:nth-child(2) {
    opacity: 0;
    animation: none !important
}

.section-ui-show-cursor .ui-slogan-title:nth-child(3) svg {
    opacity: .2;
    transform: translate3d(0, calc(-50% + 28vh), 0)
}

.section-ui-show-cursor .ui-video-box-preview-cursor {
    animation: none !important;
    opacity: 0
}

@keyframes fadeInAnimBg {
    0% {
        background: transparent
    }

    to {
        background: #ff7c30
    }
}

@keyframes cursorShowClick {
    0% {
        opacity: 0;
        left: 98%;
        top: 92%
    }

    to {
        opacity: 1;
        left: 52%;
        top: 72%
    }
}

.ui-slogan-title-lead {
    color: #ff7c30
}

.ui-slogan-title svg {
    width: 100%;
    height: auto;
    stroke-width: .1vw
}

.ui-slogan-title {
    width: calc(1000/var(--design-width)*100%);
    color: #fff;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate3d(-50%, -50%, 0);
    opacity: 0
}

.ui-slogan-title svg {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    transform: translate3d(0, -50%, 0)
}

.ui-slogan-title:before {
    content: "";
    padding-top: 25.11052%;
    display: block
}

.ui-slogan-title:nth-child(2),
.ui-slogan-title:nth-child(3) {
    color: transparent
}

.ui-slogan-title:nth-child(2) path,
.ui-slogan-title:nth-child(2) svg,
.ui-slogan-title:nth-child(3) path,
.ui-slogan-title:nth-child(3) svg {
    color: transparent;
    fill: transparent
}

.ui-slogan-title:first-child {
    z-index: 10
}

.ui-slogan-title:nth-child(2) {
    z-index: 8
}

.ui-slogan-title:nth-child(3) {
    z-index: 7
}

.section-ui-show-bg .ui-slogan-title {
    animation: fadeInAnim .2s linear 1.4s 1 both
}

.section-ui-show-bg .ui-slogan-title:first-child svg:first-child {
    animation: slideInUiSlogan1 .6s cubic-bezier(.36, .1, .16, 1) 1.6s 1 both
}

.section-ui-show-bg .ui-slogan-title:first-child svg:nth-child(2) {
    animation: slideInUiSlogan1-2 .6s cubic-bezier(.36, .1, .16, 1) 1.6s 1 both
}

.section-ui-show-bg .ui-slogan-title:first-child svg:nth-child(2) path {
    fill: #ff7c30
}

.section-ui-show-bg .ui-slogan-title:nth-child(2) svg {
    animation: slideInUiSlogan2 .6s cubic-bezier(.36, .1, .16, 1) 1.65s 1 both
}

.section-ui-show-bg .ui-slogan-title:nth-child(3) svg {
    animation: slideInUiSlogan3 .6s cubic-bezier(.36, .1, .16, 1) 1.7s 1 both
}

@keyframes fadeInAnimColor {
    0% {
        color: #ff7c30
    }

    to {
        color: #fff
    }
}

@keyframes slideInUiSlogan1 {
    0% {
        transform: translate3d(0, calc(-50% + 30vh), 0)
    }

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

@keyframes slideInUiSlogan1-2 {
    0% {
        opacity: 1;
        transform: translate3d(0, calc(-50% + 30vh), 0)
    }

    to {
        opacity: 0;
        transform: translate3d(0, calc(-50% - 28vh), 0)
    }
}

@keyframes slideInUiSlogan2 {
    0% {
        opacity: 0;
        transform: translate3d(0, calc(-50% + 30vh), 0)
    }

    to {
        opacity: .5;
        transform: translate3d(0, -50%, 0)
    }
}

@keyframes slideInUiSlogan3 {
    0% {
        opacity: 0;
        transform: translate3d(0, 30vw, 0)
    }

    to {
        opacity: .2;
        transform: translate3d(0, calc(-50% + 28vh), 0)
    }
}

@keyframes fadeOutAnim {
    0% {
        opacity: 1
    }

    to {
        opacity: 0
    }
}

@keyframes fadeInAnim {
    0% {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

@keyframes previewRectShowBg {
    to {
        background: transparent;
        opacity: 1
    }
}

@keyframes previewRectShow {
    to {
        width: 100%;
        height: 100%
    }
}

@keyframes cursorShow {
    to {
        left: 100%;
        top: 96%
    }
}

.ui-video-box-preview-cursor2:before,
.ui-video-box-preview-cursor:before {
    content: "";
    padding-top: 148.05556%;
    display: block
}

.ui-video-box-dot-l,
.ui-video-box-dot-r {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0
}

.ui-video-box-dot-l:after,
.ui-video-box-dot-l:before,
.ui-video-box-dot-r:after,
.ui-video-box-dot-r:before {
    content: "";
    position: absolute;
    width: 2vw;
    height: 2vw;
    border: .2vw solid #ff8f00;
    background: #fff;
    z-index: 3
}

.ui-video-box-dot-l:before {
    top: -1vw;
    left: -1vw
}

.ui-video-box-dot-l:after {
    bottom: -1vw;
    left: -1vw
}

.ui-video-box-dot-r:before {
    top: -1vw;
    right: -1vw
}

.ui-video-box-dot-r:after {
    bottom: -1vw;
    right: -1vw
}

.ui-video-box video {
    width: 100%;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    overflow: hidden;
    object-fit: cover
}

.ui-login-main,
.ui-video-box video {
    height: 100%;
    position: absolute;
    top: 0
}

.ui-login-main {
    width: 23.56902%;
    left: 50%;
    transform: translate3d(-50%, 0, 0);
    z-index: 2;
    background: url(../../static/image/login.093ac654.png) no-repeat;
    background-size: 100% auto;
    background-position: 50% 50%
}

.ui-login-button {
    position: absolute;
    top: 67.5%;
    top: 74%;
    left: 0;
    right: 0
}

.ui-login-button:after {
    content: "";
    padding-top: 19%;
    display: block
}

.ui-login-button-inner {
    right: 5%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1vw;
    font-weight: 700
}

.ui-login-button-bg,
.ui-login-button-inner {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    background: linear-gradient(272deg, #ff973a 3.18%, #ff8939 35.98%, #ff5a21 96.26%)
}

.ui-login-button-bg {
    right: 0;
    opacity: 0
}

.client {
    right: 0
}

.client,
.client-hd {
    position: absolute;
    left: 0;
    bottom: 0
}

.client-hd {
    width: calc(418/var(--design-width)*100%);
    z-index: 2
}

.client-hd:before {
    content: "";
    padding-top: 236.60287%;
    display: block
}

.client-icon {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0
}

.client-icon:before {
    content: "";
    display: block
}

.client-icon.client-icon1 {
    width: 31.10048%;
    background: url(../image/icon1.501c36e0.svg) no-repeat;
    background-size: 100% 100%;
    position: absolute;
    top: 22%;
    left: 26%
}

.client-icon.client-icon1:before {
    padding-top: 82.30769%
}

.client-icon.client-icon2 {
    width: 31.10048%;
    position: absolute;
    top: 23%;
    left: 26%
}

.client-icon.client-icon2 span {
    background: url(../image/icon2.66c5913c.svg) no-repeat;
    background-size: 100% 100%;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0
}

.client-icon.client-icon2:before {
    padding-top: 63.07692%
}

.client-icon.client-icon2:after {
    content: "";
    height: 1vw;
    background-color: #ff7630;
    display: block;
    position: absolute;
    bottom: -2vw;
    left: 0;
    width: 100%
}

.client-icon.client-icon3 {
    width: 31.10048%;
    background: url(../image/icon3.75c3eb2c.svg) no-repeat;
    background-size: 100% 100%;
    position: absolute;
    top: 23%;
    left: 26%
}

.client-icon.client-icon3:before {
    padding-top: 100%
}

.client-des {
    width: 44.49761%;
    background: url(../image/des.c2e039bd.png) no-repeat;
    background-size: 100% 100%;
    position: absolute;
    top: 40%;
    left: 26%
}

.client-des:before {
    content: "";
    display: block;
    padding-top: 153.76344%
}

.client-title-group {
    width: 168.8172%;
    position: absolute;
    top: 35%;
    left: 0;
    overflow: hidden
}

.client-title {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    opacity: 0
}

.client-title-group:before {
    content: "";
    display: block;
    padding-top: 25.79618%
}

.client-title.client-title1 {
    background: url(../image/title1.536b1c71.png) no-repeat;
    background-size: 100% 100%
}

.client-title.client-title2 {
    background: url(../image/title2.776cd393.png) no-repeat;
    background-size: 100% 100%
}

.client-title.client-title3 {
    background: url(../image/title3.07b2f4de.png) no-repeat;
    background-size: 100% 100%
}

.client-logo {
    width: 31.57895%;
    background: url(../image/wegame.78315f3c.png) no-repeat;
    background-size: 100% 100%;
    position: absolute;
    bottom: 0;
    left: 32%
}

.client-logo:before {
    content: "";
    display: block;
    padding-top: 35.60606%
}

.client-bd {
    width: calc(1600/var(--design-width)*100%);
    background-color: #ccc;
    position: absolute;
    bottom: 0;
    right: -5%;
    background: url(../image/store-ui.cf08d719.png) no-repeat;
    background-size: 100% 100%;
    overflow: hidden
}

.client-bd:before {
    content: "";
    padding-top: 61.8125%;
    display: block
}

.client-slide-box {
    width: 100%;
    height: 93.9%;
    position: absolute;
    bottom: 0;
    left: 0
}

.client-slide-pic {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 50%
}

.section-ui .page-section-inner {
    height: 100%;
    overflow: visible
}

.section-ui .page-section-main {
    height: 100vh;
    overflow: hidden;
    position: absolute;
    top: 50%;
    width: 100%
}

.client {
    height: 100vh;
    display: none
}

.section-ui-show-cursor .ui-login-button-inner span {
    position: relative;
    z-index: 10
}

.section-ui-show-cursor .ui-video-box-preview-cursor2 {
    animation: cursorShowClick .3s cubic-bezier(.36, .1, .16, 1) 0s 1 both, fadeOutAnim .2s cubic-bezier(.36, .1, .16, 1) 1s 1 both
}

.section-ui-show-cursor .ui-login-button-inner span.ui-login-button-bg {
    position: absolute;
    opacity: 1;
    z-index: 1;
    animation: loginButtonScaleOut .3s cubic-bezier(.36, .1, .16, 1) .3s 1 both
}

.section-ui-show-cursor .ui-login-button {
    animation: fadeOutAnim .2s cubic-bezier(.36, .1, .16, 1) .5s 1 both
}

.section-ui-show-cursor .ui-video-box {
    background: #ff7c30 !important
}

.section-ui-show-cursor .ui-video-box-inner {
    animation: fadeOutAnim .3s cubic-bezier(.36, .1, .16, 1) .7s 1 both !important
}

.section-ui-show-cursor .ui-slogan {
    opacity: 0;
    animation: none !important
}

.section-ui-show-cursor .ui-video-box-preview {
    opacity: 0;
    animation: previewScale .6s cubic-bezier(.36, .1, .16, 1) 1s 1 both;
    transform-origin: 50% 100%;
    max-height: 92vh
}

.section-ui-show-cursor .ui-video-box-preview:before {
    background: #ff7c30;
    opacity: 0;
    animation: fadeInAnim .2s cubic-bezier(.36, .1, .16, 1) 1s 1 both
}

.section-ui-show-cursor .ui-video-box {
    opacity: 1;
    z-index: 20;
    animation: fadeOutAnim .2s cubic-bezier(.36, .1, .16, 1) 1s 1 both !important
}

.section-ui-show-cursor .ui-video-box-preview-rect {
    animation: none !important;
    width: 100%;
    height: 100%;
    animation: fadeOutAnim .2s cubic-bezier(.36, .1, .16, 1) 1s 1 both !important
}

@keyframes previewScale {
    0% {
        opacity: 1;
        width: calc(860/var(--design-width)*100%);
        transform: translate3d(-50%, -50%, 0)
    }

    to {
        opacity: 1;
        width: calc(1400/var(--design-width)*100%);
        overflow: hidden;
        transform: translate3d(calc(-50% + 15vw), calc(-50% + 10vh), 0)
    }
}

@keyframes loginButtonScaleOut {
    0% {
        opacity: 1;
        transform: scaleX(1)
    }

    to {
        opacity: 0;
        transform: scale3d(1.3, 1.3, 1)
    }
}

@keyframes uiSloganOut {
    0% {
        opacity: 1;
        transform: translateZ(0)
    }

    to {
        opacity: 0;
        transform: translate3d(0, -10%, 0)
    }
}

.step-clients {
    height: 100%
}

.step-client-bg,
.step-clients {
    position: absolute;
    top: 0;
    left: 0;
    right: 0
}

.step-client-bg {
    bottom: 0;
    background: url(../../static/image/step-client-bg.dce1b6aa.png) no-repeat;
    background-size: 100% auto;
    background-position: 50% 0;
    opacity: 0
}

.section-ui-show-cursor .step-client-bg {
    animation: fadeInAnim .2s linear 1.5s 1 both
}

.step-client-inner {
    position: absolute;
    top: 3.6vw;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden
}

body:not(.in-mobile) .step-client-shop {
    width: 100%;
    background: url(../../static/image/step1-banner-bg.8e51c7e9.png) no-repeat;
    background-size: 100% ;
}

.step-client-rank,
body:not(.in-mobile) .step-client-shop {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0
}

.step-client-rank {
    width: 100%;
    background: url(../../static/image/mask-bg-grey.e9e10690.png) no-repeat;
    background-size: 100% ;
}

.step-client-hot{
    width: 100%;
    background: url(../../static/image/step-client-hot.png) no-repeat;
    background-size: 100% ;
}


.step-client-rank-sort {
    position: absolute;
    width: 25.6%;
    left: 42.2%;
    top: 49%;
    background-color: #36373b;
    opacity: 0
}

.step-client-rank-sort:before {
    content: "";
    display: block;
    padding-top: 20%;
    background-image: url(../image/rank-card-sort.908e5ba1.png);
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-position: 50% 50%
}

.step-client-rank-sort:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    background: linear-gradient(272deg, #ff973a 3.18%, #ff8939 35.98%, #ff5a21 96.26%);
    opacity: 0
}




.client-rank-number {
    width: 2.7%;
    height: 30%;
    top: 40%;
    left: 11%;
    background-image: url(../image/rank-card-number.8ffb4228.png)
}

.client-rank-cover,
.client-rank-number {
    position: absolute;
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-position: 50% 0
}

.client-rank-cover {
    width: 24%;
    height: 74%;
    top: 15%;
    left: 17.2%;
    background-image: url(../image/rank-card-cover.02a14415.png)
}

.client-rank-code {
    width: 10%;
    height: 50%;
    position: absolute;
    top: 6%;
    left: 11%;
    background-image: url(../image/rank-code-img.b7330abb.png);
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-position: 50% 0;
    opacity: 0
}

.section-ui-show-cursor .step-client-shop {
    animation: fadeInAnim .2s linear 1.6s 1 both
}

.step-client-games {
    position: absolute;
    top: 60%;
    left: 10%;
    width: 100%;
    background: url(../image/game-list.59acfec6.png) no-repeat;
    background-size: 100% auto;
    background-position: 50% 0;
    clip-path: polygon(0 0, 0 0, 0 100%, 0 100%)
}

.step-client-games:after {
    content: "";
    display: block;
    padding-top: 17.33333%
}

.section-ui-show-cursor .step-client-games {
    animation: fadeInBannerAnim .8s ease-in-out 1.7s 1 both
}

@keyframes fadeInBannerAnim {
    0% {
        opacity: 0;
        clip-path: polygon(0 0, 0 0, 0 100%, 0 100%)
    }

    to {
        opacity: 1;
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%)
    }
}

.step-client-sidebar {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 25vw;
    height: 100vh;
    opacity: 0
}

.section-ui-show-cursor .step-client-sidebar {
    animation: fadeInSidebarAnim .3s cubic-bezier(.17, .67, .37, 1.02) 1.7s 1 both
}

@keyframes fadeInSidebarAnim {
    0% {
        opacity: 0;
        transform: translate3d(-50%, 0, 0)
    }

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

.games-follow {
    position: absolute;
    left: 82%;
    top: 55%;
    width: 10%;
    background: url(../image/follow-bg.7d281b9e.png) no-repeat;
    background-size: 100% auto;
    background-position: 50% 0;
    opacity: 0;
    z-index: 100
}

.games-follow:after {
    content: "";
    display: block;
    padding-top: 30.68182%
}

.games-follow-icon {
    position: absolute;
    top: 25%;
    left: 12%;
    width: 20%;
    background: url(../image/follow-icon.ba1bfe7d.svg) no-repeat;
    background-size: 100% auto;
    background-position: 50% 0
}

.games-follow-icon:after {
    content: "";
    display: block;
    padding-top: 100%
}

.section-ui-show-cursor .games-follow-icon i {
    width: 100%;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    opacity: 0
}

.section-ui-show-cursor .games-follow-icon i:after,
.section-ui-show-cursor .games-follow-icon i:before {
    content: "";
    background: url(../image/follow-icon.ba1bfe7d.svg) no-repeat;
    background-size: 100% auto;
    background-position: 50% 0;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    display: block;
    animation: followIconAnim 2s linear 2.6s 1 both;
    transform-origin: 50% 40%;
    opacity: .8
}

.section-ui-show-cursor .games-follow-icon i:after {
    animation-duration: 2.5s;
    opacity: .5
}

.section-ui-show-cursor .games-follow-icon i {
    animation: fadeInAnim .3s cubic-bezier(.17, .67, .37, 1.02) 2s 1 both
}

.section-ui-show-cursor .games-follow {
    animation: fadeInFollowBgAnim .3s cubic-bezier(.17, .67, .37, 1.02) 2s 1 both
}

.section-ui-show-cursor .client-icon1,
.section-ui-show-cursor .client-title1 {
    opacity: 1
}

.section-ui-show-cursor .client-icon1 {
    animation: sidebarIconAnim1 3s linear 2.2s infinite both
}

@keyframes sidebarIconAnim1 {
    0% {
        transform: scale(.75)
    }

    5% {
        transform: scale(1)
    }

    10% {
        transform: scale(.75)
    }

    15% {
        transform: scale(1)
    }

    20% {
        transform: scale(.75)
    }

    21% {
        transform: scale(.75)
    }

    to {
        transform: scale(.75)
    }
}

.section-ui-show-cursor .client-icon2,
.section-ui-show-cursor .client-icon3,
.section-ui-show-cursor .client-title2,
.section-ui-show-cursor .client-title3 {
    opacity: 0
}

@keyframes fadeInFollowBgAnim {
    0% {
        opacity: 0;
        transform: translate3d(0, 3vw, 0)
    }

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

@keyframes followIconAnim {
    0% {
        opacity: .8;
        transform: scaleX(1)
    }

    to {
        opacity: 0;
        transform: scale3d(4, 4, 1)
    }
}

.section-ui-show-rank .section-ui-bg {
    animation: none;
    transition: none;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%)
}

.section-ui-show-rank .step-client-sidebar {
    opacity: 1;
    animation: none !important
}

.section-ui-show-rank .ui-video-box-preview {
    opacity: 1;
    animation: none !important;
    width: calc(1400/var(--design-width)*100%);
    overflow: hidden;
    transform: translate3d(calc(-50% + 15vw), calc(-50% + 10vh), 0);
    max-height: 92vh
}

.section-ui-show-rank .ui-video-box-preview-rect {
    animation: none !important;
    opacity: 0
}

.section-ui-show-rank .step-client-bg,
.section-ui-show-rank .step-client-shop {
    opacity: 1;
    animation: none !important
}

.section-ui-show-rank .step-client-games {
    opacity: 1;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    animation: none !important
}

.section-ui-show-rank .ui-video-box,
.section-ui-show-rank .ui-video-box-preview:before {
    opacity: 0;
    animation: none !important
}

.section-ui-show-rank .ui-login-button,
.section-ui-show-rank .ui-login-button-inner span.ui-login-button-bg,
.section-ui-show-rank .ui-video-box-inner {
    animation: none !important;
    opacity: 1
}

.section-ui-show-rank .ui-slogan,
.section-ui-show-rank .ui-video-box-preview-cursor,
.section-ui-show-rank .ui-video-box-preview-cursor2 {
    opacity: 0;
    animation: none !important
}

.section-ui-show-rank .client-icon.client-icon2,
.section-ui-show-rank .client-title2 {
    opacity: 1
}

.section-ui-show-rank .client-title1 {
    animation: titleSlideOut .3s ease-in-out 0s 1 both
}

.section-ui-show-rank .client-title2 {
    animation: titleSlideIn .3s ease-in-out .2s 1 both
}

.section-ui-show-rank .client-icon.client-icon2 span {
    animation: titleRankAnim 3s ease-in-out .2s infinite both
}

@keyframes titleRankAnim {
    0% {
        clip-path: polygon(0 0, 0 0, 0 100%, 0 100%)
    }

    20% {
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%)
    }

    to {
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%)
    }
}

.section-ui-show-rank .client-icon.client-icon1,
.section-ui-show-rank .client-icon.client-icon3,
.section-ui-show-rank .client-title1,
.section-ui-show-rank .client-title3 {
    opacity: 0
}

.section-ui-show-rank .step-client-shop {
    animation: shopScrollOut .8s ease-in-out 0s 1 both !important
}

.section-ui-show-rank .step-client-rank {
    animation: shopScrollIn .8s ease-in-out 0s 1 both
}

.section-ui-show-rank .step-client-rank-sort {
    animation: sortFadeInAnim .6s ease-in-out .6s 1 both
}

.section-ui-show-rank .step-client-rank-sort:after {
    z-index: -1;
    animation: sortFadeInBgAnim .2s ease-in-out .6s 1 both
}

.section-ui-show-rank .client-rank-number {
    animation: fadeOutAnim .2s ease-in-out .8s 1 both
}

.section-ui-show-rank .client-rank-cover {
    animation: coverScaleIn .2s ease-in-out 1.2s 1 both;
    transform-origin: 100% 50%
}

.section-ui-show-rank .client-rank-code {
    animation: fadeInAnim .2s ease-in-out 1.3s 1 both
}

.section-feature-intro.section-ui-hide-mask .page-section-bg-ele {
    opacity: 0 !important
}

@keyframes shopScrollOut {
    0% {
        opacity: 1;
        transform: translateZ(0)
    }

    to {
        opacity: 1;
        transform: translate3d(0, -100%, 0)
    }
}

@keyframes coverScaleIn {
    0% {
        transform: scaleX(1)
    }

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

@keyframes shopScrollIn {
    0% {
        opacity: 0;
        transform: translate3d(0, 100%, 0)
    }

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

@keyframes sortFadeInAnim {
    0% {
        opacity: 0;
        background-color: #36373b
    }

    20% {
        opacity: 1;
        background-color: transparent;
        transform: translateZ(0)
    }

    to {
        opacity: 1;
        background-color: transparent;
        transform: translate3d(0, -10.5vw, 0)
    }
}

@keyframes sortFadeInBgAnim {
    0% {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

.section-ui-show-hot .section-ui-bg {
    animation: none;
    transition: none;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%)
}

.section-ui-show-hot .step-client-sidebar {
    opacity: 1;
    animation: none !important
}

.section-ui-show-hot .ui-video-box-preview {
    opacity: 1;
    animation: none !important;
    width: calc(1400/var(--design-width)*100%);
    overflow: hidden;
    transform: translate3d(calc(-50% + 15vw), calc(-50% + 10vh), 0);
    max-height: 92vh
}

.section-ui-show-hot .ui-video-box-preview-rect {
    animation: none !important;
    opacity: 0
}

.section-ui-show-hot .step-client-bg {
    opacity: 1;
    animation: none !important
}

.section-ui-show-hot .step-client-shop {
    opacity: 1
}

.section-ui-show-hot .step-client-games {
    opacity: 1;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    animation: none !important
}

.section-ui-show-hot .ui-video-box,
.section-ui-show-hot .ui-video-box-preview:before {
    opacity: 0;
    animation: none !important
}

.section-ui-show-hot .ui-login-button,
.section-ui-show-hot .ui-login-button-inner span.ui-login-button-bg,
.section-ui-show-hot .ui-video-box-inner {
    animation: none !important;
    opacity: 1
}

.section-ui-show-hot .ui-slogan,
.section-ui-show-hot .ui-video-box-preview-cursor,
.section-ui-show-hot .ui-video-box-preview-cursor2 {
    opacity: 0;
    animation: none !important
}

.section-ui-show-hot .client-icon.client-icon3,
.section-ui-show-hot .client-title3 {
    opacity: 1
}

.section-ui-show-hot .client-icon3 {
    animation: hotFireTitleIconShow 3s cubic-bezier(.69, .28, .16, 1.5) 0s infinite both;
    transform-origin: 50% 100%
}

@keyframes hotFireTitleIconShow {
    0% {
        opacity: 0;
        transform: scale3d(0, 0, 0)
    }

    20%,
    to {
        opacity: 1;
        transform: scaleX(1)
    }
}

.section-ui-show-hot .client-icon.client-icon1,
.section-ui-show-hot .client-icon.client-icon2,
.section-ui-show-hot .client-title1,
.section-ui-show-hot .client-title2 {
    opacity: 0
}

.section-ui-show-hot .step-client-shop {
    transform: translate3d(0, -100%, 0);
    animation: none !important
}

.section-ui-show-hot .step-client-rank {
    transform: translateZ(0);
    opacity: 1;
    animation: none !important
}

.section-ui-show-hot .step-client-rank-sort {
    animation: none !important;
    opacity: 1;
    background-color: transparent;
    transform: translate3d(0, -10.5vw, 0)
}

.section-ui-show-hot .step-client-rank-sort:after {
    z-index: -1;
    opacity: 1;
    animation: none !important
}

.section-ui-show-hot .client-rank-number {
    opacity: 0;
    animation: none !important
}

.section-ui-show-hot .client-rank-cover {
    opacity: 1;
    animation: none !important;
    transform: scale3d(1.24, 1.24, 1);
    transform-origin: 100% 50%
}

.section-ui-show-hot .client-rank-code {
    opacity: 1;
    animation: none !important
}

.step-client-hot {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 200;
    opacity: 0
}

.step-client-card-list {
    position: absolute;
    top: 5.5%;
    left: 15%;
    bottom: 0;
    background: url(../image/card-list.14304727.png) no-repeat;
    background-size: 100% auto;
    background-position: 50% 0;
    width: 100%
}

.section-ui-show-hot .step-client-rank {
    animation: slideOutRank .6s cubic-bezier(.36, .1, .16, 1) 0s 1 both !important
}

@keyframes slideOutRank {
    0% {
        transform: translateZ(0)
    }

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

.section-ui-show-hot .step-client-hot {
    animation: slideInHot .6s cubic-bezier(.36, .1, .16, 1) 0s 1 both !important
}

@keyframes slideInHot {
    0% {
        opacity: 0;
        transform: translate3d(0, 100%, 0)
    }

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

.section-ui-show-hot .client-title2 {
    animation: titleSlideOut .3s ease-in-out 0s 1 both
}

.section-ui-show-hot .client-title3 {
    animation: titleSlideIn .3s ease-in-out .2s 1 both
}

@keyframes titleSlideIn {
    0% {
        opacity: 0;
        transform: translate3d(0, 100%, 0)
    }

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

@keyframes titleSlideOut {
    0% {
        opacity: 1;
        transform: translateZ(0)
    }

    to {
        opacity: 0;
        transform: translate3d(0, -100%, 0)
    }
}

.step-client-card-game {
    width: 100%;
    position: absolute;
    /* top: 10.7%; */
    left: 0;
    height: 100%;
    background: url(../image/card-normal.6b4a9452.png) no-repeat;
    background-size: 100% auto;
    /* background-position: 50% 0 */
}

.step-client-game-value {
    position: absolute;
    right: 5%;
    bottom: 4%;
    text-align: right
}

.step-client-game-number {
    font-size: 1vw;
    font-weight: 700;
    color: #000;
    position: absolute;
    right: 0;
    bottom: 1.4vw;
    white-space: nowrap;
    opacity: .6
}

.step-client-game-number i {
    display: inline-block;
    font-family: zzgf, system-ui
}

.section-ui-show-hot .number-split-head {
    counter-reset: ms var(--numberHead);
    animation: countHead 1.5s steps(50) 1
}

.section-ui-show-hot .number-split-tail {
    counter-reset: ms var(--numberTail);
    animation: countTail 1.2s steps(50) 1
}

.section-ui-show-hot .number-split-head:after,
.section-ui-show-hot .number-split-tail:after {
    content: counter(ms);
    font-size: 1vw
}

@property --numberHead {
    inherits: false;
    syntax: "<integer>";
    initial-value: 913
}

@keyframes countHead {
    0% {
        --numberHead: 0
    }
}

@property --numberTail {
    inherits: false;
    syntax: "<integer>";
    initial-value: 262
}

@keyframes countTail {
    0% {
        --numberTail: 0
    }
}

@keyframes hotNumberShow {

    0%,
    50% {
        opacity: 0
    }

    51%,
    to {
        opacity: .6
    }
}

@keyframes hotNumberShowLast {
    0% {
        opacity: 0
    }

    to {
        opacity: .6
    }
}

.step-client-game-icon {
    font-size: .8vw;
    color: #fe4358;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: end
}

.hot-icon {
    width: 1.5vw;
    height: 1.5vw;
    display: block;
    background: url(../image/card-hot-icon.4f586216.png) no-repeat;
    background-size: 100% auto;
    background-position: 50% 0
}

.step-client-game-icon {
    opacity: 0
}

.section-ui-show-hot .step-client-game-icon {
    animation: fadeIn .2s linear .2s 1 both
}

.section-ui-show-hot .step-client-game-icon .hot-icon {
    animation: hotFireIconShow .9s cubic-bezier(.69, .28, .16, 1.5) .4s 1 both;
    transform-origin: 50% 100%
}

@keyframes hotFireIconShow {
    0% {
        opacity: 0;
        transform: scale3d(0, 0, 0)
    }

    to {
        opacity: 1;
        transform: scaleX(1)
    }
}

.scrollwrap .section-tools {
    height: 100vh;
    width: 100vw;
    position: fixed;
    z-index: 10;
    background: none;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 101;
    opacity: 0
}

.section-tools {
    z-index: 10;
    pointer-events: none
}

.section-tools.section-tools-show {
    pointer-events: auto
}

.section-tools-lol,
.section-tools-lostark,
.section-tools-valorant {
    --transition1: cubic-bezier(0.36, 0.1, 0.16, 1);
    --transition2: cubic-bezier(.17, .67, .37, 1.02)
}

.section-tools .arrows-list .arrows-item1 .arrows1 {
    background: linear-gradient(0deg, #ff9239, #fe6024)
}

.tools-game-slogan {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0
}

.tools-slogan-title {
    width: calc(700/var(--design-width)*100%);
    position: absolute;
    top: calc(50% - 2vw);
    left: 50%;
    transform: translate3d(-50%, -50%, 0);
    z-index: 3
}

.tools-slogan-title:before {
    content: "";
    padding-top: 14.90385%;
    display: block
}

.tools-slogan-title-words {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0
}

.tools-slogan-title-words:after,
.tools-slogan-title-words:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0
}

.tools-slogan-title-words:before {
    background: url(../../static/image/title.408688cf.png) no-repeat;
    background-size: 100% 100%;
    opacity: 1;
    z-index: 1
}

.tools-slogan-title-words:after {
    background: #ff9d2b;
    -webkit-mask-image: url(../../static/image/title.408688cf.png);
    -webkit-mask-size: 100% 100%;
    z-index: 2;
    opacity: 0
}

.tools-slogan-title:after {
    /* content: "GAME ASSISTANT"; */
    position: absolute;
    top: 4.5vw;
    left: 50%;
    font-size: .7vw;
    display: block;
    color: #fff;
    letter-spacing: 3.1vw;
    white-space: nowrap;
    opacity: .8;
    transform: translate3d(-50%, 0, 0);
    text-align: justify;
    padding-left: 3vw
}

.tools-slogan-des {
    font-size: 1.7vw;
    color: #e3e3e3;
    text-align: center;
    letter-spacing: .52vw;
    position: absolute;
    top: calc(50% + 4.5vw);
    left: 50%;
    transform: translate3d(-50%, -50%, 0);
    z-index: 3
}

.tools-slogan-title-arrow-left,
.tools-slogan-title-arrow-right {
    width: 8%;
    display: block;
    position: absolute;
    top: .9vw;
    left: 0;
    opacity: 0
}

.tools-slogan-title-arrow-left:before,
.tools-slogan-title-arrow-right:before {
    content: " ";
    padding-top: 77.41935%;
    display: block
}

.tools-slogan-title-arrow-left:after,
.tools-slogan-title-arrow-right:after {
    content: " ";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ff9d2b;
    clip-path: polygon(0 0, 65% 0, 100% 50%, 65% 100%, 0 100%, 35% 50%)
}

.tools-slogan-title-arrow-right:after {
    transform: rotateY(180deg)
}

.tools-slogan-title-arrow-left {
    transform: translate3d(calc(-100% - 3vw), 0, 0)
}

.tools-slogan-title-arrow-right {
    left: auto;
    right: 0;
    transform: translate3d(calc(100% + 3vw), 0, 0)
}

.tools-slogan-row {
    width: calc(63/var(--design-width)*100%);
    background: url(../image/icon-row.c538216a.svg) no-repeat;
    background-size: 100% 100%;
    position: absolute;
    top: calc(50% - 3.6vw);
    transform-origin: 50% 50%
}

.tools-slogan-row:before {
    content: "";
    padding-top: 77.77778%;
    display: block
}

.tools-slogan-row1 {
    left: 23%
}

.tools-slogan-row2 {
    right: 23%;
    transform: rotate(-180deg)
}

.slash {
    right: 0
}

.slash,
.slash-left,
.slash-right {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0
}

.slash-left,
.slash-right {
    width: 50%;
    height: 100%;
    overflow: hidden;
    transition: width .5s var(--transition1)
}

.slash-left {
    left: -20vw
}

.slash-left,
.slash-right {
    width: 70%;
    transform: skewX(-22deg);
    transform-origin: 50% 50%
}

.slash-right {
    left: auto;
    right: -20vw
}

.section-tools--1 .slash-left {
    width: 90%
}

.section-tools--1 .slash-right {
    width: 51%
}

.section-tools--2 .slash-right {
    width: 90%
}

.section-tools--2 .slash-left {
    width: 51%
}

.tools-main,
.tools-main-bg,
.tools-main-cont {
    position: absolute;
    top: 0;
    left: 0;
    width: 120vw;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    z-index: 5;
    overflow: hidden;
    transform: skewX(22deg)
}

.tools-main-bg {
    z-index: 6;
    pointer-events: none
}

.tools-main-cont {
    z-index: 10
}

.tools-main:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    pointer-events: none;
    display: block
}

.slash-left .tools-main {
    padding-left: 30vw
}

.slash-right .tools-main {
    padding-right: 35vw;
    left: auto;
    right: 0
}

.slash-right .tools-main-bg,
.slash-right .tools-main-cont {
    left: auto;
    right: 0
}

.page-lol-show .slash-left .tools-main:before,
.page-lostark-show .slash-left .tools-main:before,
.page-valorant-show .slash-left .tools-main:before,
.slash.in-view .slash-left .tools-main:before {
    transform-origin: 0 50%;
    animation: slashInLeft 1.2s var(--transition1) 0s 1 both
}

.page-lol-show .slash-right .tools-main:before,
.page-lostark-show .slash-right .tools-main:before,
.page-valorant-show .slash-right .tools-main:before,
.slash.in-view .slash-right .tools-main:before {
    transform-origin: 100% 50%;
    animation: slashInRight 1.2s var(--transition1) 0s 1 both
}

.page-lol-show .slash-left .tools-main:before,
.page-lol-show .slash-right .tools-main:before,
.page-lostark-show .slash-left .tools-main:before,
.page-lostark-show .slash-right .tools-main:before {
    animation-delay: .5s
}

@keyframes slashInRight {
    0% {
        transform: skewX(-22deg) scaleX(0)
    }

    to {
        transform: skewX(-22deg) scaleX(1)
    }
}

@keyframes slashInLeft {
    0% {
        transform: skewX(-22deg) scaleX(0)
    }

    to {
        transform: skewX(-22deg) scaleX(1)
    }
}

@keyframes slashOutLeft {
    0% {
        transform: skewX(-22deg) scaleX(1)
    }

    to {
        transform: skewX(-22deg) scaleX(0)
    }
}

@keyframes slashIn {
    0% {
        transform: scaleY(0)
    }

    to {
        transform: scaleY(1)
    }
}

.tools-feature-title,
.tools-slogan-cont {
    position: relative;
    z-index: 5
}

.tools-feature-icon {
    width: 2vw;
    display: block;
    margin: 0 1vw 0 0;
    position: relative
}

.tools-feature-icon:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -webkit-mask-image: url(../image/slogan-icon.3782b9c4.svg);
    -webkit-mask-size: 100% 100%
}

.tools-feature-icon:before {
    content: "";
    padding-top: 123.07692%;
    display: block
}

.tools-feature-cont {
    height: 50vh;
    background-color: #0f1a27;
    width: 60vw;
    position: relative;
    z-index: 10;
    display: none
}

.tools-feature-title,
.tools-feature-title-text {
    transition: all .5s var(--transition2)
}

.tools-feature-icon {
    transition: all .2s linear
}

.section-tools .arrows-list {
    overflow: hidden;
    --arrow-item-width: 25vw;
    z-index: 20;
    top: 0
}

.section-tools .arrows-item1 {
    height: 100vh;
    width: 100vw;
    top: -12vw;
    left: -12vw;
    right: auto;
    bottom: auto
}

.section-tools .arrows-item2 {
    height: 100vh;
    width: 100vw;
    bottom: -12vw;
    right: -12vw;
    left: auto;
    top: auto
}

.section-tools.section-tools-show {
    opacity: 1
}

.section-tools .page-section-bg {
    background: #000;
    opacity: 0
}

.section-tools.section-tools-show .page-section-bg {
    animation: fadeIn .2s ease-in-out 0s 1 both
}

.section-tools .page-section-inner {
    height: 100vh
}

.section-tools-show .arrows-item1 {
    animation: slideInLeftTools .6s ease-in-out 0s 1 both;
    transform-origin: 30% 50%
}

.section-tools-show .arrows-item2 {
    animation: slideInRightTools .6s ease-in-out 0s 1 both
}

@keyframes slideInLeftTools {
    0% {
        transform: translate3d(-20vw, 0, 0) scale(1.2)
    }

    to {
        transform: translate3d(8vw, 0, 0) scale(1.2)
    }
}

@keyframes slideInRightTools {
    0% {
        transform: translate3d(20vw, 0, 0) rotate(180deg)
    }

    to {
        transform: translate3d(-3vw, 0, 0) rotate(180deg)
    }
}

.page-valorant {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: #000;
    z-index: 100;
    opacity: 0
}

.page-lol-show .tools-feature-title,
.page-lostark-show .tools-feature-title,
.page-valorant-show .tools-feature-title {
    animation: fadeIn .2s linear .5s 1 both
}

.section-tools-valorant .page-section-main {
    background-color: #000
}

.page-lol-hide .slash .slash-left,
.page-lostark-hide .slash .slash-left,
.page-valorant-hide .slash .slash-left {
    width: 200%
}

.section-tools-lol.page-lol-hide .slash-left .tools-main:before,
.section-tools-lostark.page-lostark-hide .slash-left .tools-main:before,
.section-tools-valorant.page-valorant-hide .slash-left .tools-main:before {
    transform: translate3d(5vw, 0, 0) !important
}

.page-lol-hide .slash .slash-right,
.page-lostark-hide .slash .slash-right,
.page-valorant-hide .slash .slash-right {
    width: 0
}

.section-tools-lol.page-lol-hide .tools-feature-cont,
.section-tools-lol.page-lol-hide .tools-feature-title,
.section-tools-lol.page-lol-hide .tools-main-cont,
.section-tools-lostark.page-lostark-hide .tools-feature-cont,
.section-tools-lostark.page-lostark-hide .tools-feature-title,
.section-tools-lostark.page-lostark-hide .tools-main-cont,
.section-tools-valorant.page-valorant-hide .tools-feature-cont,
.section-tools-valorant.page-valorant-hide .tools-feature-title,
.section-tools-valorant.page-valorant-hide .tools-main-cont {
    opacity: 0 !important;
    animation: none !important
}

.tools-slogan-title {
    opacity: 0
}

.section-tools-show .tools-slogan-title {
    animation: slideInTitleView .3s ease-in-out 0s 1 both
}

.section-tools-show .tools-slogan-title:after {
    opacity: 0;
    animation: slideInDescEnView3 .8s ease-in-out .3s 1 both;
    white-space: nowrap;
    letter-spacing: 3.1vw
}

@keyframes slideInDescEnView3 {
    0% {
        opacity: 0;
        letter-spacing: 4.2vw
    }

    to {
        opacity: .6;
        letter-spacing: 3.1vw
    }
}

.section-tools-show .tools-slogan-title-words:before {
    opacity: 0;
    animation: fadeIn .6s linear 0s 1 both
}

.section-tools-show .tools-slogan-title-words:after {
    animation: fadeOut .6s linear 0s 1 both
}

.tools-slogan-des {
    opacity: 0
}

.section-tools-show .tools-slogan-des {
    animation: slideInDescView .8s ease-in-out .3s 1 both;
    white-space: nowrap
}

.section-tools-show .tools-slogan-title-arrow-left {
    animation: slideInTitleArrowLeft .6s ease-in-out 0s 1 both
}

.section-tools-show .tools-slogan-title-arrow-right {
    animation: slideInTitleArrowRight .6s ease-in-out 0s 1 both
}

.section-tools-show .arrows2,
.section-tools-show .arrows3,
.section-tools-show .arrows4,
.section-tools-show .arrows5 {
    opacity: 1;
    left: 0;
    animation: arrowListSlide2 5s linear 0s infinite both
}

.section-tools-show .arrows3 {
    animation-delay: 1.25s
}

.section-tools-show .arrows4 {
    animation-delay: 2.5s
}

.section-tools-show .arrows5 {
    animation-delay: 3.75s
}

@keyframes arrowListSlide2 {
    0% {
        opacity: 0;
        transform: translate3d(-30%, 0, 0)
    }

    33.3333% {
        opacity: .3;
        transform: translateZ(0)
    }

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

    to {
        opacity: 0;
        transform: translateZ(0)
    }
}

@font-face {
    font-family: tungsten;
    src: url(../font/tungsten.91ab058c.ttf) format("truetype")
}

.section-tools-valorant {
    --color-brand-left: #ff4655;
    --color-brand-right: #0e1720;
    --color-brand-left-border: #1c1c1c;
    --color-brand-right-border: #00f3b5;
    --color-brand-left-arrow: #47ffd0;
    --color-brand-right-arrow: #00f3b5;
}

.section-tools-valorant .page-section-inner {
    height: 100vh;
    position: relative
}

.section-tools-valorant {
    height: 100vh;
    width: 100vw;
    position: fixed;
    z-index: 10;
    background: none;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 300;
    opacity: 0;
    pointer-events: none
}

.page-valorant-hide .page-section-inner:after,
.page-valorant-show .page-section-inner:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 200;
    animation: maskHide .2s linear 1s 1 forwards
}

.page-valorant-show.section-tools-valorant {
    opacity: 1;
    pointer-events: auto
}

.section-tools-valorant .slash-left .tools-main {
    padding-bottom: 10vw
}

.section-tools-valorant .slash-left .tools-main:before {
    background-color: var(--color-brand-left)
}

.section-tools-valorant .slash-left .tools-main:after {
    content: "";
    width: .5vw;
    height: 8vw;
    position: absolute;
    top: 50%;
    left: 20vw;
    z-index: 10;
    background-color: var(--color-brand-left-border);
    transform: translateY(calc(-50% - 4vw))
}

.section-tools-valorant .slash-right .tools-main {
    align-items: end;
    padding-top: 16vw
}

.section-tools-valorant .slash-right .tools-main:before {
    background-color: var(--color-brand-right)
}

.section-tools-valorant .slash-right .tools-main:after {
    content: "";
    width: 3vw;
    height: 8vw;
    border-right: .5vw solid var(--color-brand-right-border);
    position: absolute;
    top: 50%;
    right: 20vw;
    z-index: 10;
    transform: translateY(calc(-50% + 4vw))
}

.section-tools-valorant .slash-left .tools-main-bg:after,
.section-tools-valorant .slash-right .tools-main-bg:after {
    content: "";
    padding-top: 58%;
    display: block;
    background: url(../image/logo-valorant-v.33d4a0c7.svg) no-repeat;
    background-size: 100% auto;
    opacity: .1;
    position: absolute;
    width: 10vw;
    top: 0;
    z-index: 2
}

.section-tools-valorant .slash-left .tools-main-bg:after {
    left: 15vw
}

.section-tools-valorant .slash-right .tools-main-bg:after {
    right: 15vw
}

.section-tools-valorant .slash-right .tools-main-bg:before {
    content: "";
    position: absolute;
    top: 2vw;
    left: 0;
    right: 2vw;
    bottom: 2vw;
    z-index: 1;
    pointer-events: none;
    background: url(../image/bg-valorant.c45ee75e.svg) no-repeat;
    background-size: 100% 100%
}

.section-tools-valorant .tools-feature-logo {
    width: 10vw;
    position: absolute;
    top: 0;
    background: url(../image/slogan-valorant-title.2896f16a.svg) no-repeat;
    background-size: 100% 100%;
    margin-top: -3vw;
    left: 2.8vw;
    opacity: 0
}

.section-tools-valorant .tools-feature-logo:before {
    content: "";
    padding-top: 17.24138%;
    display: block
}

.section-tools-valorant .page-section-main {
    height: 100%
}

.section-tools-valorant .slash-left .tools-feature-icon:after {
    background: var(--color-brand-left-arrow)
}

.section-tools-valorant .slash-right .tools-feature-icon {
    position: absolute;
    right: 0;
    top: 50%;
    margin-right: -3vw;
    transform: translateY(-50%) rotateY(180deg)
}

.section-tools-valorant .slash-right .tools-feature-icon:after {
    background: var(--color-brand-right-arrow)
}

.section-tools-valorant .slash-left .tools-feature-title {
    width: 30vw;
    display: flex;
    flex-direction: row;
    position: absolute;
    top: 0;
    left: 0
}

.section-tools-valorant .slash-left .tools-feature-title-text {
    width: 100%;
    display: block;
   background-image: url(../image/slogan-valorant-1.3aa15970.png);
   background-size: 100%;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    
}

.section-tools-valorant .slash-left .tools-feature-title-text:before {
    content: "";
    padding-top: 15.49755%;
    display: block
}

.section-tools-valorant .slash-right .tools-feature-title {
    width: 22vw;
    display: flex;
    flex-direction: row;
    position: absolute;
    right: 0;
    top: 0;
    transform: translateZ(0)
}

.section-tools-valorant .slash-right .tools-feature-title-text {
    width: 100%;
    display: block;
    background: url(../image/slogan-valorant-2.d78ed41e.png) no-repeat;
    background-size: 100% 100%
}

.section-tools-valorant .slash-right .tools-feature-title-text:before {
    content: "";
    padding-top: 18.60941%;
    display: block
}

.section-tools-valorant .slash-right .tools-feature-logo {
    left: auto;
    right: 0
}

.section-tools-valorant .page-section-inner.section-tools--1 .slash-left .tools-feature-title {
    transform: translate3d(-3vw, calc(-100% + 2vw), 0)
}

.section-tools-valorant .page-section-inner.section-tools--1 .slash-left .tools-feature-logo {
    opacity: .5;
    transition: all .12s linear .15s
}

.section-tools-valorant .page-section-inner.section-tools--1 .slash-left .tools-feature-icon {
    opacity: 0;
    transition: all 0s linear
}

.section-tools-valorant .page-section-inner.section-tools--1 .slash-left .tools-feature-title-text {
    transform: scale(.8);
    transform-origin: 0 0
}

.section-tools-valorant .page-section-inner.section-tools--1 .slash-right .tools-feature-title {
    opacity: .5 !important
}

.section-tools-valorant .page-section-inner.section-tools--1 .slash-left .tools-main:after {
    opacity: 0
}

.section-tools-valorant .page-section-inner.section-tools--2 .slash-right .tools-feature-title {
    transform: translate3d(0, calc(-100% - 2vw), 0)
}

.section-tools-valorant .page-section-inner.section-tools--2 .slash-right .tools-feature-logo {
    opacity: .5;
    transition: all .12s linear .15s
}

.section-tools-valorant .page-section-inner.section-tools--2 .slash-right .tools-feature-icon {
    opacity: 0;
    transition: all 0s linear
}

.section-tools-valorant .page-section-inner.section-tools--2 .slash-right .tools-feature-title-text {
    transform: scale(.8);
    transform-origin: 100% 0
}

.section-tools-valorant .page-section-inner.section-tools--2 .slash-left .tools-feature-title {
    opacity: .5 !important
}

.section-tools-valorant .page-section-inner.section-tools--2 .slash-right .tools-main:after {
    transform: translateZ(0);
    top: auto;
    bottom: 0;
    height: 100vh;
    border-right: 1.5vw solid var(--color-brand-right-border);
    border-bottom: 1.5vw solid var(--color-brand-right-border);
    box-sizing: content-box;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 1.5vw calc(100% - 1.5vw));
    opacity: 0;
    animation: fadeIn .2s linear .1s 1 both
}

.valorant-score-box-wrap {
    width: 70vw;
    margin-left: 30vw;
    position: relative
}

.valorant-score-box-wrap:before {
    content: "";
    padding-top: 10%;
    display: block
}

.valorant-score-box {
    position: absolute;
    top: 5vw;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #0f1a27;
    clip-path: polygon(0 50%, 100% 50%, 100% 50%, 0 50%)
}

.agent-score-bg {
    position: absolute;
    left: 33vw;
    top: -50%;
    padding-top: 60%;
    width: 30vw;
    opacity: .3
}

.agent-score-bg:before {
    -webkit-mask-image: url(../image/Jett_bg-cbe43ccd-daa4-4d16-95bc-7ca35c341bce.png);
    -webkit-mask-size: cover;
    opacity: 1;
    background-color: #fff;
}

.agent-score-bg:before,
.valorant-score-box:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0
}

.valorant-score-box:after {
    background: url(../image/ascent-e59d8462-27a0-441d-be36-675f1aaea490.jpg);
    background-size: cover;
    opacity: .1
}

.valorant-agent,
.valorant-agent-r,
.valorant-agent-rbg {
    position: absolute;
    left: 280px;
    top: 50%;
    padding-top: 60%;
    width: 1920px;
    /* background: url(../image/lostark-agent.a732773e.png) no-repeat; */
    /* background-size: contain; */
    /* background-position: 50% 50%; */
    /* transform: translate3d(15vw, calc(-50% + 10vh), 0); */
    /* transition: transform .5s var(--transition2) 0s; */
    z-index: 999;
    
}

.valorant-agent {
    opacity: 0;
    background: none;
    padding-top: 0;
    right: 0;
    top: 50%;
    transform: translate3d(0, -50%, 0)
}

.valorant-agent:before {
    content: "";
    padding-top: 120%;
    display: block
}

.valorant-agent:after {
    width: 100%;
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url(../image/lostark-agent.a732773e.png) no-repeat;
    background-size: contain;
    background-position: 50% 50%;
}

.valorant-agent-r {
    background: url(../image/lol-agent-1.b0a1face.png) no-repeat;
    transform: translate3d(45vw, calc(-50% + 20vh), 0);
    background-size: contain;  
    left: -65vw;
    top:500px;
    width: 1920px;
    opacity: 0;
    z-index: 999;
}

.valorant-agent-rbg {
    background-image: none;
    /* -webkit-mask-image: url(../image/neon_bg-31415aab-c0a2-4b03-9651-c4cbb7b9ef61.png); */
    -webkit-mask-size: 100% auto;
    -webkit-mask-position: 50% 50%;
    -webkit-mask-repeat: no-repeat;
    background-color: #ff4655;
    transform: translate3d(65vw, calc(-50% + 5vh), 0);
    left: -34vw;
    width: 28vw;
    opacity: 0
}

.section-tools-valorant .page-section-inner.section-tools--1 .valorant-agent {
    opacity: 1;
    transform: translate3d(-25vw, -50%, 0);
    transition: transform .5s var(--transition2) .1s
}

.section-tools-valorant .page-section-inner.section-tools--1 .valorant-score-box-wrap:before {
    padding-top: 40%
}

.section-tools-valorant .page-section-inner.section-tools--1 .valorant-score-box {
    display: block;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    transition: all .5s var(--transition2)
}

.section-tools-valorant .valorant-score-list {
    padding: 5vw 0 0 3vw
}

.valorant-score-item {
    width: 40vw;
    padding-top: 7.5%;
    display: block;
    background: url(../image/tool-msg1.c1bb8f0b.png) no-repeat;
    background-size: 100% auto;
    background-position: 50% 50%;
    display: flex;
    align-items: center;
    position: relative;
    margin-bottom: 2vw;
    opacity: 0
}

.valorant-score-item-text {
    font-size: 1.6vw;
    color: #fff;
    position: absolute;
    left: 13vw;
    top: 1.2vw
}

.section-tools-valorant .page-section-inner.section-tools--2 .valorant-agent-rbg {
    opacity: .15;
    transition: opacity .2s linear 0s
}

.section-tools-valorant .page-section-inner.section-tools--2 .valorant-agent-r {
    opacity: 1;
    transform: translate3d(65vw, calc(-50% + 20vh), 0);
    transition: transform .5s var(--transition2) .1s
}

.valorant-score-chat {
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    z-index: 100;
    background: url(../image/valorant-chat.64377aa4.png) no-repeat;
    background-size: 100% auto;
    background-position: 50% 0;
    opacity: 0;
    transition: all .2s var(--transition2) 0s
}

.valorant-score-chat-number-group {
    position: absolute;
    right: 3.4vw;
    top: 1.5vw;
    z-index: 10;
    color: #00f2b4;
    font-family: tungsten, system-ui;
    font-size: 0;
    white-space: nowrap
}

.valorant-score-chat-number-head {
    font-size: 4.2vw
}

.valorant-score-chat-number:after {
    content: counter(ms);
    font-size: 4.2vw
}

.section-tools-valorant .page-section-inner.section-tools--2 .valorant-score-chat-number {
    counter-reset: ms var(--numberKDA);
    animation: countKDA 1s steps(50) 1
}

@property --numberKDA {
    inherits: false;
    syntax: "<integer>";
    initial-value: 5
}

@keyframes countKDA {
    0% {
        --numberKDA: 0
    }
}

.valorant-score-chat-wrap {
    width: 22vw;
    display: block;
    position: absolute;
    right: 30vw;
    top: 50%;
    transform: translate3d(0, calc(-50% + 2vw), 0)
}

.valorant-score-chat-wrap:after {
    content: "";
    padding-top: 0;
    display: block
}

.section-tools-valorant .page-section-inner.section-tools--2 .valorant-score-chat {
    opacity: 1;
    transform: translateZ(0);
    transition: all .4s var(--transition2) .2s
}

.section-tools-valorant .page-section-inner.section-tools--2 .valorant-score-chat-wrap:after {
    padding-top: 111.76471%
}

.section-tools--1 .valorant-score-item {
    animation: skillSlideInUp .3s ease-in-out 0s 1 both
}

@keyframes skillSlideInUp {
    0% {
        opacity: 0;
        transform: translate3d(0, 50%, 0)
    }

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

.section-tools--1 .valorant-score-item:nth-child(2) {
    animation-delay: .2s
}

.section-tools--1 .valorant-score-item:nth-child(3) {
    animation-delay: .4s
}

.section-tools-lol {
    --color-brand-left: #1cb6c1;
    --color-brand-right: #0e1824;
    --color-brand-left-border: #1c1c1c;
    --color-brand-right-border: #f4c06e;
    --color-brand-left-arrow: linear-gradient(180deg, #e8be5d, #ecd290);
    --color-brand-right-arrow: linear-gradient(180deg, #b79138, #ecd290)
}

.section-tools-lol .page-section-inner {
    height: 100vh;
    position: relative
}

.section-tools-lol {
    height: 100vh;
    width: 100vw;
    position: fixed;
    z-index: 10;
    background: none;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 400;
    opacity: 0;
    pointer-events: none
}

.page-lol-show.section-tools-lol {
    opacity: 1;
    pointer-events: auto
}

.section-tools-lol .slash-left .tools-main {
    padding-bottom: 20vw
}

.section-tools-lol .slash-left .tools-main:before {
    background: linear-gradient(0deg, #36d9d9, #139ba7)
}

.section-tools-lol .slash-right .tools-main:before {
    background-color: var(--color-brand-right)
}

.section-tools-lol .tools-feature-logo {
    width: 10vw;
    position: absolute;
    top: 0;
    background: url(../image/slogan-lol-title.b3925996.svg) no-repeat;
    background-size: 100% 100%;
    margin-top: -3vw;
    left: 2.8vw;
    opacity: 0
}

.section-tools-lol .tools-feature-logo:before {
    content: "";
    padding-top: 17.24138%;
    display: block
}

.section-tools-lol .page-section-main {
    height: 100%
}

.section-tools-lol .slash-left .tools-feature-icon:after {
    background: var(--color-brand-left-arrow);
    top: 50%
}

.section-tools-lol .slash-right .tools-feature-icon {
    position: absolute;
    right: 0;
    top: 50%;
    margin-right: -3vw;
    transform: translateY(-50%) rotateY(180deg)
}

.section-tools-lol .slash-right .tools-feature-icon:after {
    background: var(--color-brand-right-arrow)
}

.section-tools-lol .slash-left .tools-feature-title {
    width: calc(590/var(--design-width)*100%);
    display: flex;
    flex-direction: row
}

.section-tools-lol .slash-left .tools-feature-title-text {
    width: 100%;
    display: block;
    background: url(../image/slogan-lol-1.710ed481.png) no-repeat;
    background-size: 100% auto
}

.section-tools-lol .slash-left .tools-feature-title-text:before {
    content: "";
    padding-top: 16.10169%;
    display: block
}

.section-tools-lol .slash-left .tools-feature-title-text2 {
    width: 62.71186%;
    display: block;
    background: url(../image/slogan-lol-1-1.1b4de884.png) no-repeat;
    background-size: 100% auto;
    position: absolute;
    left: 3vw;
    top: 5vw
}

.section-tools-lol .slash-left .tools-feature-title-text2:before {
    content: "";
    padding-top: 23.75%;
    display: block
}

.section-tools-lol .slash-right .tools-feature-title {
    width: calc(287/var(--design-width)*100%);
    display: flex;
    flex-direction: row;
    margin: 0 0 3vw
}

.section-tools-lol .slash-right .tools-feature-title-text {
    width: 100%;
    display: block;
    background: url(../image/slogan-lol-2.06124fc6.png) no-repeat;
    background-size: 100% 100%
}

.section-tools-lol .slash-right .tools-feature-title-text:before {
    content: "";
    padding-top: 32.05575%;
    display: block
}

.section-tools-lol .slash-right .tools-feature-title-text2 {
    width: 64.80836%;
    display: block;
    background: url(../image/slogan-lol-2-1.b1068afb.png) no-repeat;
    background-size: 100% auto;
    position: absolute;
    right: 0;
    top: 5vw
}

.section-tools-lol .slash-right .tools-feature-title-text2:before {
    content: "";
    padding-top: 48.3871%;
    display: block
}

.section-tools-lol .slash-right .tools-main {
    align-items: end;
    padding-top: 12vw
}

.section-tools-lol .slash-right .tools-feature-logo {
    left: auto;
    right: 0
}

.section-tools-lol .slash-left .tools-main:after {
    content: "";
    width: .5vw;
    height: 8vw;
    position: absolute;
    top: 50%;
    left: 20vw;
    z-index: 10;
    background-color: var(--color-brand-left-border);
    transform: translateY(calc(-50% - 6vw));
    display: none
}

.section-tools-lol .slash-right .tools-main:after {
    content: "";
    width: 3vw;
    height: 8vw;
    border-right: .5vw solid var(--color-brand-right-border);
    position: absolute;
    top: 50%;
    right: 20vw;
    z-index: 10;
    transform: translateY(calc(-50% + 4.5vw));
    opacity: 0
}

.section-tools-lol .page-section-inner.section-tools--1 .slash-left .tools-main:after,
.section-tools-lol .page-section-inner.section-tools--2 .lol-texture-border-right {
    opacity: 0
}

.section-tools-lol .page-section-inner.section-tools--2 .slash-right .tools-main:after {
    transform: translateZ(0);
    top: auto;
    bottom: 0;
    height: 100vh;
    border-right: 1.5vw solid var(--color-brand-right-border);
    border-bottom: 1.5vw solid var(--color-brand-right-border);
    box-sizing: content-box;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 1.5vw calc(100% - 1.5vw));
    opacity: 1
}

.section-tools-lol .page-section-inner.section-tools--1 .slash-left .tools-feature-title {
    transform: translate3d(-5vw, -8vh, 0)
}

.section-tools-lol .page-section-inner.section-tools--1 .slash-left .tools-feature-logo {
    opacity: .5;
    transition: all .12s linear .15s
}

.section-tools-lol .page-section-inner.section-tools--1 .slash-left .tools-feature-icon {
    opacity: 0;
    transition: all 0s linear
}

.section-tools-lol .page-section-inner.section-tools--1 .slash-left .tools-feature-title-text {
    transform: scale(.8);
    transform-origin: 0 0
}

.section-tools-lol .page-section-inner.section-tools--1 .slash-right .tools-feature-title {
    opacity: .5 !important
}

.section-tools-lol .page-section-inner.section-tools--1 .slash-left .tools-feature-title-text {
    animation: showTextAnim .3s linear .2s 1 both
}

@keyframes showTextAnim {
    0% {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

.section-tools-lol .page-section-inner.section-tools--1 .slash-left .tools-feature-title-text2 {
    animation: showTextAnim2 .2s linear .2s 1 both, showTextAnim22 .3s linear .2s 1 both;
    transform-origin: 0 0
}

@keyframes showTextAnim2 {
    0% {
        transform: translate3d(20.5vw, -5.1vw, 0) scale(.8)
    }

    to {
        transform: translate3d(20vw, -5.1vw, 0) scale(.8)
    }
}

@keyframes showTextAnim22 {
    0% {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

.section-tools-lol .page-section-inner.section-tools--2 .slash-right .tools-feature-title {
    transform: translate3d(5vw, -20vh, 0)
}

.section-tools-lol .page-section-inner.section-tools--2 .slash-right .tools-feature-logo {
    opacity: .5;
    transition: all .12s linear .15s
}

.section-tools-lol .page-section-inner.section-tools--2 .slash-right .tools-feature-icon {
    opacity: 0;
    transition: all 0s linear
}

.section-tools-lol .page-section-inner.section-tools--2 .slash-right .tools-feature-title-text {
    transform: translate3d(-7.2vw, 0, 0) scale(.8);
    transform-origin: 100% 0;
    animation: showTextAnim .3s linear .2s 1 both
}

.section-tools-lol .page-section-inner.section-tools--2 .slash-right .tools-feature-title-text2 {
    opacity: 0;
    animation: showTextAnim2R .2s linear .2s 1 both, showTextAnim2R2 .3s linear .2s 1 both;
    transform-origin: 100% 0
}

.section-tools-lol .page-section-inner.section-tools--2 .slash-left .tools-feature-title {
    opacity: .5 !important
}

@keyframes showTextAnim2R {
    0% {
        transform: translate3d(-.2vw, -5vw, 0) scale(.8)
    }

    to {
        transform: translate3d(0, -5vw, 0) scale(.8)
    }
}

@keyframes showTextAnim2R2 {
    0% {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

.lol-agent {
    position: absolute;
    left: 20vw;
    top: 40%;
    padding-top: 100%;
    width: 1920px;
    background: url(../image/neon-17712651-8626-47e7-b824-3ce06815c0a3.png) no-repeat;
    background-size: contain;
    background-position: 50% 50%;
    transform: translate3d(15vw, calc(-50% + 10vh), 0);
    transition: transform .5s var(--transition2) 0s;
    opacity: 0;
    z-index: 999;
}

.section-tools-lol .page-section-inner.section-tools--1 .lol-agent {
    opacity: 1;
    transform: translate3d(0, calc(-50% + 10vh), 0);
    transition: transform .5s var(--transition2) .1s
}

.lol-feature-box,
.lol-feature-box-bg {
    width: 70vw;
    height: 60vh;
    position: relative;
    z-index: 5;
    margin-left: 28vw;
    margin-top: 22vh;
    clip-path: polygon(0 50%, 100% 50%, 100% 50%, 0 50%);
    transform: translate3d(15vw, 0, 0)
}

.lol-feature-box-bg {
    position: absolute;
    background-color: #222;
    z-index: 1
}

.section-tools-lol .page-section-inner.section-tools--1 .lol-feature-box,
.section-tools-lol .page-section-inner.section-tools--1 .lol-feature-box-bg {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    transform: translateZ(0);
    transition: all .5s var(--transition2)
}

.lol-feature-title {
    width: 30vw;
    background: linear-gradient(91deg, rgba(5, 151, 170, .31) -47.92%, rgba(5, 151, 170, .03) 53.88%);
    font-size: 1.4vw;
    color: #30d2d2;
    padding: 1.2vw 2vw;
    margin: 3vw 0 0;
    border-left: .5vw solid #e0a851;
    position: relative;
    overflow: hidden
}

.lol-feature-title:before {
    content: "";
    display: block;
    padding-top: 10%
}

.lol-feature-title .feature-title {
    display: block
}

.lol-feature-title-clip {
    position: absolute;
    left: 8%;
    top: 25%;
    right: 0;
    bottom: 30%;
    overflow: hidden
}

.equip-lol-iconlist {
    padding-top: 20%;
    width: 100%;
    display: block
}

.lol-feature-equip-clip,
.lol-feature-skill-clip {
    position: absolute;
    left: 0;
    top: 10%;
    right: 0;
    bottom: 20%;
    overflow: hidden
}

.skill-lol-iconlist {
    padding-top: 15%;
    width: 100%;
    display: block
}

.skill-lol-1,
.skill-lol-iconlist {
    background: url(../image/skill-1.0fc1cec9.png) no-repeat;
    background-size: contain
}

.skill-lol-2 {
    background: url(../image/skill-2.8662e533.png) no-repeat;
    background-size: contain
}

.skill-lol-3 {
    background: url(../image/skill-3.b5bb056b.png) no-repeat;
    background-size: contain
}

.section-tools-lol .page-section-inner.section-tools--1 .lol-feature-equip-scroll,
.section-tools-lol .page-section-inner.section-tools--1 .lol-feature-skill-scroll,
.section-tools-lol .page-section-inner.section-tools--1 .lol-feature-title-scroll {
    animation: slideInTitleLol1 2s linear 0s 1 both
}

@keyframes slideInTitleLol1 {
    0% {
        transform: translate3d(0, 33.333%, 0)
    }

    7% {
        transform: translateZ(0)
    }

    15% {
        transform: translateZ(0)
    }

    30% {
        transform: translate3d(0, -33.333%, 0)
    }

    45% {
        transform: translate3d(0, -33.333%, 0)
    }

    60% {
        transform: translate3d(0, -66.66%, 0)
    }

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

@keyframes slideInTitleLol2 {
    0% {
        opacity: 0
    }

    50% {
        opacity: 1
    }

    to {
        opacity: 0
    }
}

@keyframes slideInTitleLol3 {
    0% {
        opacity: 0
    }

    50% {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

.page-section-main-texture {
    right: 0;
    pointer-events: none;
    opacity: 0
}

.lol-texture-left,
.page-section-main-texture {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 10
}

.lol-texture-left {
    width: 50%
}

.lol-texture-border-icon {
    position: absolute;
    top: 50%;
    left: 0;
    z-index: 10;
    right: 0;
    height: 20%;
    background: url(../image/lol-border-arrow.31998ae7.png) no-repeat;
    background-size: auto 90%;
    display: block;
    transform: translate3d(0, -97%, 0)
}

.lol-texture-border-right .lol-texture-border-icon {
    transform: translate3d(0, -30%, 0)
}

.lol-texture-border-bg {
    z-index: 10;
    background: url(../image/lol-border.a8a0c24d.png) no-repeat;
    background-size: auto 100%;
    background-position: 0 50%;
    display: block;
    opacity: .08
}

.lol-texture-border,
.lol-texture-border-bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0
}

.lol-texture-border-right {
    transform: rotateY(180deg)
}

.lol-feature-list {
    padding: 2vw
}

.lol-feature-skill {
    margin-top: 2vw
}

.lol-feature-equip .feature-title,
.lol-feature-skill .feature-title {
    font-size: .9vw;
    color: #f4c06e;
    font-weight: 700
}

.feature-equip-list {
    padding-top: 5%;
    display: block;
    width: 18vw;
    margin: 1vw 0 0 .5vw;
    position: relative
}

.equip-lol-1 {
    background: url(../image/equip-1.98f81886.png) no-repeat;
    background-size: contain
}

.equip-lol-2 {
    background: url(../image/equip-2.b74e519a.png) no-repeat;
    background-size: contain
}

.equip-lol-3 {
    background: url(../image/equip-3.2812ef76.png) no-repeat;
    background-size: contain
}

.feature-skill-list {
    padding-top: 5%;
    display: block;
    width: 28vw;
    margin: 1vw 0 0 .5vw;
    position: relative
}

.lol-agent-r {
    left: 0vw;
    padding-top: 60%;
    width:1920px;
    background: url(../image/lol-agent-2.202e0f03.png) no-repeat;
    background-size: contain;
    background-position: 50% 50%;
    transform: translate3d(-15vw, calc(-50% + 5vh), 0);
    transition: transform .5s var(--transition2) 0s;
    z-index: 999
}

.lol-agent-r,
.lol-mode-ist {
    position: absolute;
    top: 50%;
    opacity: 0
}

.lol-mode-ist {
    padding-top: 9%;
    display: block;
    width: 45vw;
    right: 29vw;
    transform: translate3d(0, calc(-50% + 10vh), 0);
    -webkit-mask-image: linear-gradient(90deg, rgba(255, 146, 57, 0) 38%, #fe6024 50%)
}

.lol-mode-ist-inner {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url(../image/lol-mode.503098aa.png) no-repeat;
    background-size: 100% auto
}

.icon-lol-mode,
.icon-lol-mode-hightlight {
    position: absolute;
    top: 5%;
    right: 0;
    width: 14%;
    height: 100%;
    background: url(../image/lol-mode-1.9d657a5d.png) no-repeat 0 0;
    background-size: 100% auto
}

.icon-lol-mode-hightlight {
    background: url(../image/lol-mode-2.eb359070.png) no-repeat;
    background-size: 100% auto
}

.icon-lol-mode-hightlight:after,
.icon-lol-mode:after {
    content: "北极星竞技场";
    position: absolute;
    top: 65%;
    left: 2%;
    font-size: 1vw;
    color: #f4c06e;
    display: block;
    font-weight: 700;
    white-space: nowrap
}

.section-tools-lol .page-section-inner.section-tools--2 .lol-agent-r {
    opacity: 1;
    transform: translate3d(0, calc(-50% + 5vh), 0);
    transition: transform .5s var(--transition2) .1s
}

.section-tools-lol .page-section-inner.section-tools--1 .lol-texture-border-icon {
    opacity: 0
}

.section-tools-lol .page-section-inner.section-tools--2 .lol-mode-ist {
    opacity: 1;
    transform: translate3d(0, calc(-50% + 5vh), 0);
    transition: transform .5s var(--transition2) .1s
}

.page-lol-hide .page-section-inner:after,
.page-lol-show .page-section-inner:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 200;
    animation: maskHide .2s linear 1s 1 forwards
}

.page-lol-show .page-section-main-texture {
    opacity: 1;
    transition: opacity .3s linear .6s
}

.page-lol-hide .page-section-main-texture {
    opacity: 0;
    transition: none
}

.icon-lol-mode-hightlight {
    opacity: 0
}

.section-tools-lol .page-section-inner.section-tools--2 .lol-mode-ist-inner {
    animation: slideInMode .8s ease-in-out .3s 1 both
}

.section-tools-lol .page-section-inner.section-tools--2 .icon-lol-mode-hightlight {
    animation: fadeInMode .6s cubic-bezier(.45, .52, .15, 1.45) 1.3s 1 both
}

.section-tools-lol .page-section-inner.section-tools--2 .icon-lol-mode {
    animation: fadeOutMode .2s linear 1.1s 1 both
}

@keyframes fadeInMode {
    0% {
        opacity: 0;
        transform: scale3d(.6, .6, .6)
    }

    to {
        opacity: 1;
        transform: scaleX(1)
    }
}

@keyframes slideInMode {
    0% {
        transform: translate3d(60%, 0, 0)
    }

    to {
        transform: translateZ(0)
    }
}

@keyframes fadeOutMode {
    0% {
        opacity: 1
    }

    to {
        opacity: 0
    }
}

.section-tools-lostark {
    --color-brand-left: #e1a851;
    --color-brand-right: #161214;
    --color-brand-left-border: #1c1c1c;
    --color-brand-right-border: #815a2f;
    --color-brand-left-arrow: #ffd187;
    --color-brand-right-arrow: #ffd187
}

.section-tools-lostark .page-section-inner {
    height: 100vh;
    position: relative
}

.section-tools-lostark {
    height: 100vh;
    width: 100vw;
    position: fixed;
    z-index: 10;
    background: none;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 500;
    opacity: 0;
    pointer-events: none
}

.page-lostark-hide .page-section-inner:after,
.page-lostark-show .page-section-inner:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 200
}

.page-lostark-show .page-section-inner:after {
    animation: maskHide .2s linear 1s 1 forwards
}

@keyframes maskHide {
    0% {
        transform: translateZ(0)
    }

    to {
        transform: translate3d(0, 100%, 0)
    }
}

.page-lostark-show.section-tools-lostark {
    opacity: 1;
    pointer-events: auto
}

.tools-main-texture {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: url(../image/lostark-front-bg.d9bea2ba.png) no-repeat 50% 50%;
    background-size: 100% auto;
    z-index: 1;
    opacity: 0;
    transition: opacity .2s linear .6s
}

.section-tools-lostark .slash-left .tools-main-texture {
    left: 20vw
}

.section-tools-lostark .slash-left .tools-main {
    padding-bottom: 10vw
}

.section-tools-lostark .slash-left .tools-main:before {
    background: linear-gradient(0deg, #d8a351, #815a2f)
}

.section-tools-lostark .slash-right .tools-main:before {
    background-color: var(--color-brand-right)
}

.section-tools-lostark .tools-feature-logo {
    width: 10vw;
    position: absolute;
    top: 0;
    left: 2.8vw;
    background: url(../image/slogan-lostark-title.9115b2b7.svg) no-repeat;
    background-size: 100% 100%;
    margin-top: -3vw;
    opacity: 0
}

.section-tools-lostark .tools-feature-logo:before {
    content: "";
    padding-top: 17.24138%;
    display: block
}

.section-tools-lostark .page-section-main {
    height: 100%
}

.section-tools-lostark .slash-left .tools-feature-icon:after {
    background: var(--color-brand-left-arrow)
}

.section-tools-lostark .slash-right .tools-feature-icon {
    position: absolute;
    right: 0;
    top: 50%;
    margin-right: -3vw;
    transform: translateY(-50%) rotateY(180deg)
}

.section-tools-lostark .slash-right .tools-feature-icon:after {
    background: var(--color-brand-right-arrow)
}

.section-tools-lostark .slash-left .tools-feature-title {
    width: calc(630/var(--design-width)*100%);
    display: flex;
    flex-direction: row;
    position: absolute;
    top: 0;
    left: 0
}

.section-tools-lostark .slash-left .tools-feature-title-text {
    width: 100%;
    display: block;
    background: url(../image/slogan-lostark-1.8f02bd78.png) no-repeat;
    background-size: 100% 100%
}

.section-tools-lostark .slash-left .tools-feature-title-text:before {
    content: "";
    padding-top: 22.77228%;
    display: block
}

.section-tools-lostark .slash-right .tools-feature-title {
    width: calc(730/var(--design-width)*100%);
    display: flex;
    flex-direction: row;
    position: absolute;
    right: 0;
    top: 0;
    transform: translate3d(0, calc(-100% + 14vw), 0)
}

.section-tools-lostark .slash-right .tools-feature-title-text {
    width: 100%;
    display: block;
    background: url(../image/slogan-lostark-2.3e37217e.png) no-repeat;
    background-size: 100% 100%
}

.section-tools-lostark .slash-right .tools-feature-title-text:before {
    content: "";
    padding-top: 14.86928%;
    display: block
}

.section-tools-lostark .slash-right .tools-main {
    align-items: end;
    padding-top: 12vw
}

.section-tools-lostark .slash-right .tools-feature-logo {
    left: auto;
    right: 0
}

.section-tools-lostark .slash-left .tools-main:after {
    content: "";
    width: .5vw;
    height: 8vw;
    position: absolute;
    top: 50%;
    left: 20vw;
    z-index: 10;
    background-color: var(--color-brand-left-border);
    transform: translateY(calc(-50% - 4vw))
}

.section-tools-lostark .slash-right .tools-main:after {
    content: "";
    width: 3vw;
    height: 8vw;
    border-right: .5vw solid var(--color-brand-right-border);
    position: absolute;
    top: 50%;
    right: 20vw;
    z-index: 10;
    transform: translateY(calc(-50% + 4vw))
}

.section-tools-lostark .page-section-inner.section-tools--1 .slash-left .tools-feature-title {
    transform: translate3d(-3vw, calc(-100% + 2vw), 0)
}

.section-tools-lostark .page-section-inner.section-tools--1 .slash-left .tools-feature-logo {
    opacity: .5;
    transition: all .12s linear .15s
}

.section-tools-lostark .page-section-inner.section-tools--1 .slash-left .tools-feature-icon {
    opacity: 0;
    transition: all 0s linear
}

.section-tools-lostark .page-section-inner.section-tools--1 .slash-left .tools-feature-title-text {
    transform: scale(.8);
    transform-origin: 0 0
}

.section-tools-lostark .page-section-inner.section-tools--1 .slash-right .tools-feature-title {
    opacity: .5 !important
}

.section-tools-lostark .page-section-inner.section-tools--1 .slash-left .tools-main:after {
    opacity: 0
}

.section-tools-lostark .page-section-inner.section-tools--2 .slash-right .tools-feature-title {
    transform: translate3d(5vw, calc(-100% - 3vw), 0)
}

.section-tools-lostark .page-section-inner.section-tools--2 .slash-right .tools-feature-logo {
    opacity: .5;
    transition: all .12s linear .15s
}

.section-tools-lostark .page-section-inner.section-tools--2 .slash-right .tools-feature-icon {
    opacity: 0;
    transition: all 0s linear
}

.section-tools-lostark .page-section-inner.section-tools--2 .slash-right .tools-feature-title-text {
    transform: scale(.8);
    transform-origin: 100% 0
}

.section-tools-lostark .page-section-inner.section-tools--2 .slash-left .tools-feature-title {
    opacity: .5 !important
}

.section-tools-lostark .page-section-inner.section-tools--2 .slash-right .tools-main:after {
    transform: translateZ(0);
    top: auto;
    bottom: 0;
    height: 100vh;
    border-right: 1.5vw solid var(--color-brand-right-border);
    border-bottom: 1.5vw solid var(--color-brand-right-border);
    box-sizing: content-box;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 1.5vw calc(100% - 1.5vw))
}

.lostark-agent {
    position: absolute;
    /* left: 200px; */
    bottom: 0;
    padding-top: 69%;
    left: 480px;
    width: 1920px;
    background: url(../image/lostark-agent-2.8463de0f.png) no-repeat;
    background-size: contain;
    background-position: 50% 100%;
    transform: translate3d(15vw, 0, 0);
    transition: transform .5s var(--transition2) 0s;
    opacity: 0;
    z-index: 9999;
}



.section-tools-lostark .page-section-inner.section-tools--1 .lostark-agent {
    opacity: 1;
    transform: translate3d(-5vw, 0, 0);
    transition: transform .5s var(--transition2) .1s
}

.lostark-feature-box-wrap {
    width: 70vw;
    margin-left: 28vw;
    position: relative
}

.lostark-feature-box-wrap:before {
    content: "";
    padding-top: 10%;
    display: block
}

.lostark-feature-box {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    clip-path: polygon(0 50%, 100% 50%, 100% 50%, 0 50%);
    transform: translate3d(15vw, 10vw, 0);
    background-color: #222
}

.lostark-feature-box:before {
    content: "";
    padding-top: 85%;
    display: block;
    width: 18vw;
    background: url(../image/lostark-tools1.21f23ebb.png) no-repeat;
    background-size: 100% auto;
    position: absolute;
    left: 3vw;
    top: 3vw
}

.section-tools-lostark .page-section-inner.section-tools--1 .lostark-feature-box {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    transform: translate3d(0, 5vw, 0);
    transition: all .5s var(--transition2)
}

.section-tools-lostark .page-section-inner.section-tools--1 .lostark-feature-box-wrap:before {
    padding-top: 42%
}

.lostark-agent-r {
    position: absolute;
    left: 0;
    top: 46%;
    padding-top: 76%;
    width: 1920px;
    background: url(../image/jett-220dd3ab-c218-4e3a-8c3d-5b8c002649df.png) no-repeat;
    background-size: contain;
    background-position: 50% 50%;
    transform: translate3d(-15vw, calc(-50% + 5vh), 0);
    transition: transform .5s var(--transition2) 0s;
    z-index: 99999;
    opacity: 0;
}

.section-tools-lostark .page-section-inner.section-tools--2 .lostark-agent-r {
    opacity: 1;
    transform: translate3d(0, calc(-50% + 5vh), 0);
    transition: transform .5s var(--transition2) .1s
}

.lostark-feature-box-r-wrap {
    position: absolute;
    right: 30vw;
    top: 20vw;
    width: 70vw
}

.lostark-feature-box-r-wrap:before {
    content: "";
    display: block;
    padding-top: 0
}

.lostark-feature-box-r {
    width: 100%;
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 2;
    clip-path: polygon(0 50%, 100% 50%, 100% 50%, 0 50%);
    transform: translate3d(5vw, 0, 0);
    background-color: #181818
}

.section-tools-lostark .page-section-inner.section-tools--2 .lostark-feature-box-r {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    transition: all .5s var(--transition2)
}

.section-tools-lostark .page-section-inner.section-tools--2 .lostark-feature-box-r-wrap:before {
    padding-top: 40%
}

.lostark-feature-box-r:after {
    content: "";
    display: block;
    width: 100%;
    background: url(../image/lostark-tools2.545a2234.png) no-repeat;
    background-size: auto 100%;
    background-position: 100% 100%;
    position: absolute;
    right: 2vw;
    top: 2vw;
    bottom: 2vw
}

.page-lostark-show .tools-main-texture {
    opacity: 1
}

.section-team {
    background: #000
}

.section-team .page-section-inner {
    position: relative
}

.section-team {
    height: 100vh;
    width: 100vw;
    z-index: 10;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 600;
    opacity: 0;
    pointer-events: none
}

.section-team .page-section-inner {
    height: 100vh
}

.section-team .page-section-bg {
    background: url(../image/team-bg-mask.2f29d574.jpg) no-repeat;
    background-size: cover;
    background-position: 50% 0;
    clip-path: polygon(0 0, 40% 0, 10% 100%, 0 100%)
}

.section-team-show.section-team .page-section-bg {
    animation: teamSlideIn .6s cubic-bezier(.95, .14, .61, .99) 0s 1 both
}

@keyframes teamSlideIn {
    0% {
        clip-path: polygon(0 0, 0 0, -30% 100%, 0 100%)
    }

    to {
        clip-path: polygon(0 0, 128% 0, 110% 100%, 0 100%)
    }
}

.page-section-bg-inner,
.page-section-bg-inner-white {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 10
}

.page-section-bg-inner:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #202222;
    z-index: 1
}

.page-section-bg-inner:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #fc6e00;
    z-index: 2
}

.section-team-show .page-section-bg-inner:after {
    animation: teamSlideColorIn .6s cubic-bezier(.95, .14, .61, .99) 0s 1 both, teamSlideColorIn2 .2s cubic-bezier(.95, .14, .61, .99) 1.2s 1 forwards
}

.section-team-show .page-section-bg-inner:before {
    animation: teamSlideColorOrangeIn .6s cubic-bezier(.95, .14, .61, .99) 0s 1 both, teamSlideColorOrangeIn2 .6s cubic-bezier(.95, .14, .61, .99) .6s 1 forwards
}

@keyframes teamSlideColorIn {
    0% {
        clip-path: polygon(-30% 0, 0 0, -30% 100%, -60% 100%)
    }

    to {
        clip-path: polygon(69% 0, 128% 0, 115% 100%, 41% 100%)
    }
}

@keyframes teamSlideColorIn2 {
    0% {
        clip-path: polygon(69% 0, 128% 0, 115% 100%, 41% 100%)
    }

    to {
        clip-path: polygon(130% 0, 190% 0, 185% 100%, 105% 100%)
    }
}

@keyframes teamSlideColorOrangeIn {
    0% {
        clip-path: polygon(-30% 0, 0 0, -30% 100%, -60% 100%)
    }

    to {
        clip-path: polygon(20% 0, 69% 0, 41% 100%, -12% 100%)
    }
}

@keyframes teamSlideColorOrangeIn2 {
    0% {
        clip-path: polygon(20% 0, 69% 0, 41% 100%, -12% 100%)
    }

    to {
        clip-path: polygon(69% 0, 69% 0, 41% 100%, 41% 100%)
    }
}

.page-section-bg-inner-white {
    z-index: 11
}

.page-section-bg-inner-white:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #fff;
    z-index: 2
}

.page-section-bg-inner-white:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #f5cd60;
    z-index: 3
}

.section-team-show .page-section-bg-inner-white:before {
    animation: teamSlideColorOrangeInWhite .6s cubic-bezier(.95, .14, .61, .99) 0s 1 both, teamSlideColorOrangeInWhite2 .6s cubic-bezier(.95, .14, .61, .99) .6s 1 forwards
}

.section-team-show .page-section-bg-inner-white:after {
    animation: teamSlideColorOrangeInYellow .6s cubic-bezier(.95, .14, .61, .99) 0s 1 both, teamSlideColorOrangeInYellow2 .6s cubic-bezier(.95, .14, .61, .99) .6s 1 forwards
}

@keyframes teamSlideColorOrangeInWhite {
    0% {
        clip-path: polygon(-30% 0, 0 0, -30% 100%, -60% 100%)
    }

    to {
        clip-path: polygon(8% 0, 22% 0, -10% 100%, -25% 100%)
    }
}

@keyframes teamSlideColorOrangeInWhite2 {
    0% {
        clip-path: polygon(8% 0, 22% 0, -10% 100%, -25% 100%)
    }

    to {
        clip-path: polygon(69% 0, 69% 0, 41% 100%, 41% 100%)
    }
}

@keyframes teamSlideColorOrangeInYellow {
    0% {
        clip-path: polygon(-30% 0, 0 0, -30% 100%, -60% 100%)
    }

    to {
        clip-path: polygon(21% 0, 22% 0, -10% 100%, -11% 100%)
    }
}

@keyframes teamSlideColorOrangeInYellow2 {
    0% {
        clip-path: polygon(21% 0, 22% 0, -10% 100%, -11% 100%)
    }

    to {
        clip-path: polygon(69% 0, 69% 0, 41% 100%, 41% 100%)
    }
}

.section-team-logo {
    width: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate3d(-40%, -50%, 0)
}

.section-team-logo:before {
    content: "";
    padding-top: 38%;
    display: block
}

.team-title-1 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate3d(-110%, -70%, 0);
    width: 44.44444%;
    background: url(../image/team-title1.dcfa56f4.svg) no-repeat;
    background-size: cover;
    background-position: 50% 0;
    z-index: 5
}

.team-title-1:after {
    content: "";
    padding-top: 25.36585%;
    display: block
}

.team-title-2 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate3d(10%, 50%, 0);
    width: 30%;
    z-index: 2;
    overflow: hidden
}

.team-title-2:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url(../image/team-title2.198980d8.svg) no-repeat;
    background-size: cover;
    background-position: 50% 0
}

.team-title-2:after {
    content: "";
    padding-top: 16.66667%;
    display: block
}

.team-title-3 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate3d(-65%, -50%, 0);
    width: 17.44444%;
    background: url(../image/team-title-arrow.138e6a65.png) no-repeat;
    background-size: cover;
    background-position: 50% 0;
    z-index: 4
}

.team-title-3:after {
    content: "";
    padding-top: 161.78344%;
    display: block
}

.team-title-4 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate3d(-87%, -56%, 0);
    width: 17.44444%;
    background: url(../image/team-title-arrow-line.27c30118.png) no-repeat;
    background-size: cover;
    background-position: 50% 0;
    z-index: 3
}

.team-title-4:after {
    content: "";
    padding-top: 161.78344%;
    display: block
}

.team-title-5 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate3d(15%, 350%, 0);
    width: 36.11111%;
    z-index: 3;
    overflow: hidden
}

.team-title-5:after {
    content: "";
    padding-top: 6.15385%;
    display: block
}

.team-title-5:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url(../image/team-title-line.eef106fc.png) no-repeat;
    background-size: cover;
    background-position: 50% 0
}

.section-team-show {
    opacity: 1;
    pointer-events: auto
}

body:not(.in-mobile) .section-team-show,
body:not(.lite-version) .section-team-show {
    animation: fadeIn 0s linear 0s 1 both
}

body:not(.lite-version) .section-team-show .team-title-1 {
    opacity: 0;
    animation: fadeInTeamTitle .3s cubic-bezier(.36, .1, .16, 1) 1.1s 1 both
}

body:not(.lite-version) .section-team-show .team-title-3 {
    opacity: 0;
    animation: fadeInTeamArrow .2s cubic-bezier(.36, .1, .16, 1) 1.1s 1 both
}

body:not(.lite-version) .section-team-show .team-title-4 {
    opacity: 0;
    animation: fadeInTeamArrow2 .2s cubic-bezier(.36, .1, .16, 1) 1.1s 1 both
}

body:not(.lite-version) .section-team-show .team-title-2:before {
    opacity: 0;
    animation: fadeInTeamSubTitle .21s cubic-bezier(0, .82, .59, 1) 1.5s 1 both
}

body:not(.lite-version) .section-team-show .team-title-5:before {
    opacity: 0;
    animation: fadeInTeamSubTitle .15s cubic-bezier(0, .82, .59, 1) 1.5s 1 both
}

@keyframes fadeInTeamSubTitle {
    0% {
        opacity: 0;
        transform: translate3d(-60%, 0, 0)
    }

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

@keyframes fadeInTeamTitle {
    0% {
        opacity: 0;
        transform: translate3d(-130%, -70%, 0)
    }

    to {
        opacity: 1;
        transform: translate3d(-110%, -70%, 0)
    }
}

@keyframes fadeInTeamArrow {
    0% {
        opacity: 0;
        transform: translate3d(-90%, -50%, 0)
    }

    to {
        opacity: 1;
        transform: translate3d(-65%, -50%, 0)
    }
}

@keyframes fadeInTeamArrow2 {
    0% {
        opacity: 0;
        transform: translate3d(-107%, -56%, 0)
    }

    to {
        opacity: 1;
        transform: translate3d(-87%, -56%, 0)
    }
}

@keyframes fadeInTeamLogo {
    0% {
        opacity: 0;
        transform: translate3d(-40%, 0, 0)
    }

    to {
        opacity: 1;
        transform: translate3d(-40%, -50%, 0)
    }
}

.section-more {
    height: auto
}

.section-more .page-section-inner {
    height: auto;
    background: #131313
}

.section-more .page-section-bg {
    background-color: #f87109;
    clip-path: polygon(0 0, 100% 0, 100% 80%, 50% 100%, 0 80%)
}

.section-more .page-section-bg:after,
.section-more .page-section-bg:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2
}

.section-more .page-section-bg:before {
    background: #161616;
    transform: translate3d(0, -10px, 0);
    clip-path: polygon(0 0, 100% 0, 100% 78%, 50% 100%, 0 78%)
}

.section-more .page-section-bg:after {
    background: url(../image/footer-hero.ebc3ec1d.png) no-repeat;
    background-size: 100% auto;
    background-position: 50% 0
}

.section-more .page-section-main {
    position: relative;
    transform: none;
    top: auto
}

.section-more .page-section-main:before {
    padding-top: 45%
}

.section-more-logo {
    width: 897px;
    height: 700px;
    /* position: absolute;
    top: 50%;
    left: 50%; */
    background-color: red;
    transform: translate3d(-50%, calc(-50% - 4vh), 0);
    /* background: url(../../static/pic/more-logo.5f29b19b.svg) no-repeat; */
    /* background-size: 100% auto */
}

.section-more-logo:before {
    content: "";
    padding-top: 18%;
    display: block
}

.section-more .button-download {
    width: 318px;
    height: 72px;
    /* position: absolute; */
    /* left: 50%; */
    transform: translate3d(-50%, 0, 0);
    margin: 0 auto;
    /* bottom: -50%; */
    opacity: 1
}
.button-download-pc{
    width: 318px;
    height: 90px;
    margin: 520px auto;
}

.section-more .button-dowload-inner {
    font-size: 1vw
}

.section-introduce {
    background: url(../image/introduce-bg.jpg) 50% no-repeat;
    background-size: cover;
    z-index: 601
}

.lite-version .page-section.section-introduce {
    height: 860px
}

.lite-version.in-mobile .page-section.section-introduce {
    height: 120vw
}

.section-introduce .section-bd {
    position: absolute;
    width: 60vw;
    left: 50%;
    top: 50%;
    padding-top: 160px;
    transform: translate(-50%, -50%);
}

.section-introduce .introduce-hd {
    padding-top: 4vw;
}

.section-introduce .introduce-title {
    position: absolute;
    width: 31vw;
    height: 3.5vw;
    text-align: center;
    left: calc(50% - 15.5vw);
    top: 0
}

.section-introduce .introduce-title-center {
    position: absolute;
    width: 40vw;
    height: 3.5vw;
    left: calc(50% - 20vw);
    top: 0;
    transition: all .5s cubic-bezier(.33, 1, .68, 1)
}

.section-introduce .introduce-title-center img {
    height: 100%;
    width: auto
}

.introduce-title-arrow-left,
.introduce-title-arrow-right {
    width: 8%;
    display: block;
    position: absolute;
    top: .8vw;
    left: 0;
    transition: all .5s cubic-bezier(.33, 1, .68, 1)
}

.introduce-title-arrow-left:before,
.introduce-title-arrow-right:before {
    content: "";
    padding-top: 77.41935%;
    display: block
}

.introduce-title-arrow-left:after,
.introduce-title-arrow-right:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ff9d2b;
    clip-path: polygon(0 0, 65% 0, 100% 50%, 65% 100%, 0 100%, 35% 50%)
}

.introduce-title-arrow-right:after {
    transform: rotateY(180deg)
}

.introduce-title-arrow-left {
    transform: translate3d(calc(-100% - 3vw), 0, 0)
}

.introduce-title-arrow-right {
    left: auto;
    right: 0;
    transform: translate3d(calc(100% + 3vw), 0, 0)
}

.section-introduce .introduce-slogan {
    font-size: .7vw;
    color: #fff;
    letter-spacing: 2.6vw;
    position: absolute;
    left: 50%;
    transform: translateX(-45.5%)
}

.section-introduce .introduce-desc {
    font-size: 1.7vw;
    color: #e3e3e3;
    text-align: center;
    letter-spacing: .52vw;
    z-index: 3;
    padding-bottom: 4vw;
    transition: all .5s cubic-bezier(.33, 1, .68, 1);
    margin-top: 1.8vw;
    position: relative
}

.section-introduce .introduce-list {
    margin-top: var(--padding-2)
}

.section-introduce .introduce-list ul {
    display: flex;
    flex-direction: row;
    justify-content: space-between
}

.section-introduce .introduce-list li {
    width: 14vw
}

.section-introduce .introduce-list-pic {
    width: 14vw;
    height: 14vw;
    box-sizing: border-box;
    border: 1px solid #ff8f00;
    display: flex;
    align-items: center;
    justify-content: center
}

.section-introduce .introduce-list-pic img {
    width: 13vw;
    height: auto
}

.section-introduce .introduce-list-title {
    font-size: 1.2vw;
    color: #fff;
    text-align: center;
    padding: 1vw 0 .5vw
}

.section-introduce .introduce-list-description {
    font-size: .8vw;
    text-indent: 2em;
    color: hsla(0, 0%, 100%, .6);
    line-height: 2;
    text-align: justify
}

.section-introduce .introduce-list-description span {
    display: inline-block;
    line-height: 1.2;
    border-bottom: 1px solid;
    cursor: pointer
}

.section-introduce .introduce-list-description strong {
    color: var(--color-brand-1)
}

.section-introduce .introduce-tips {
    width: 1.1rem;
    height: 1.1rem;
    cursor: pointer;
    display: inline-block;
    vertical-align: middle;
    position: relative;
    margin-left: .24rem
}

.in-mobile .section-introduce .introduce-tips {
    width: .45rem;
    height: .45rem;
    margin-left: .12rem
}

.section-introduce .introduce-tips-hd {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    color: hsla(0, 0%, 100%, .6)
}

.section-introduce .introduce-tips-hd svg {
    width: 100%;
    height: 100%;
    display: block
}

.section-introduce .introduce-tips-bd {
    position: absolute;
    left: calc(50% + 1.6rem);
    top: -5.7rem;
    width: 14.6rem;
    color: hsla(0, 0%, 100%, .8);
    background-color: #2f2f2f;
    padding: .5rem .75rem;
    font-size: .78rem;
    visibility: hidden;
    opacity: 0;
    transform: translateY(10px);
    transition: all .2s ease .1s;
    border: 1px solid hsla(0, 0%, 100%, .1);
    z-index: 10
}

.in-mobile .section-introduce .introduce-tips-bd {
    padding: .3rem .4rem;
    width: 14rem;
    left: -10.2rem;
    top: -12.6rem;
    font-size: .6rem
}

.in-mobile .section-introduce .introduce-tips-icon {
    bottom: .75rem;
    right: .6rem;
    width: .9rem;
    height: .9rem
}

.in-mobile .section-introduce .introduce-tips-img:hover .introduce-tips-preview {
    visibility: hidden
}

.in-mobile .protocol-popbox {
    transition: none
}

.section-introduce .introduce-tips-img,
.section-introduce .introduce-tips-img img {
    width: 100%;
    height: auto
}

.section-introduce .introduce-tips-preview {
    position: absolute;
    width: 64.1rem;
    height: 41rem;
    bottom: 7rem;
    right: 10rem;
    visibility: hidden;
    opacity: 0;
    transition: all .3s ease
}

.section-introduce .introduce-tips-icon {
    position: absolute;
    bottom: .75rem;
    right: 1rem;
    width: 1.7rem;
    height: 1.7rem;
    color: #fff
}

.section-introduce .introduce-tips-img:hover .introduce-tips-icon {
    color: var(--color-brand)
}

.section-introduce .introduce-tips-img:hover .introduce-tips-preview {
    visibility: visible;
    opacity: 1
}

.section-introduce .introduce-tips-icon svg {
    width: 100%;
    height: 100%
}

.section-introduce .introduce-tips:hover .introduce-tips-bd {
    visibility: visible;
    opacity: 1;
    transform: translateY(0)
}

.introduce-desc,
.introduce-slogan,
.introduce-title-arrow-left,
.introduce-title-arrow-right,
.introduce-title-center {
    visibility: hidden
}

.lite-version .introduce-desc,
.lite-version .introduce-slogan,
.lite-version .introduce-title-arrow-left,
.lite-version .introduce-title-arrow-right,
.lite-version .introduce-title-center {
    visibility: visible
}

.section-introduce-show .introduce-slogan {
    visibility: visible;
    animation: slideInDescEnView4 .6s ease-in-out .2s 1 both;
    white-space: nowrap;
    letter-spacing: 3.1vw
}

.section-introduce-show .introduce-title-center {
    visibility: visible;
    opacity: 0;
    animation: fadeIn .6s linear 0s 1 both
}

.section-introduce-show .introduce-desc {
    visibility: visible;
    animation: slideInDescView5 .4s ease-in-out .3s 1 both;
    white-space: nowrap
}

.section-introduce-show .introduce-title-arrow-left {
    visibility: visible;
    animation: slideInTitleArrowLeft .4s ease-in-out 0s 1 both
}

.section-introduce-show .introduce-title-arrow-right {
    visibility: visible;
    animation: slideInTitleArrowRight .4s ease-in-out 0s 1 both
}

@keyframes slideInDescEnView4 {
    0% {
        opacity: 0;
        letter-spacing: 4.2vw
    }

    to {
        opacity: .6;
        letter-spacing: 2.6vw
    }
}

@keyframes slideInDescView5 {
    0% {
        opacity: 0;
        letter-spacing: 3vw
    }

    to {
        opacity: 1;
        letter-spacing: .6vw
    }
}

@media screen and (max-width:1200px) {
    .section-introduce .section-bd {
        width: 60vw
    }

    .section-introduce .introduce-list ul {
        flex-wrap: wrap
    }

    .section-introduce .introduce-list li {
        width: 24vw;
        margin-bottom: 2vw
    }

    .section-introduce .introduce-list-pic {
        width: 24vw;
        height: 24vw
    }

    .section-introduce .introduce-list-pic img {
        width: 20vw
    }

    .section-introduce .introduce-list-title {
        font-size: 2.5vw
    }

    .section-introduce .introduce-list-description {
        font-size: 1.8vw
    }
}

.in-mobile .protocol-popbox-main.is-show .protocol-popbox {
    zoom: .54
}

.in-mobile .protocol-popbox-close {
    width: 32px;
    height: 32px;
    top: 14px;
    right: 14px
}

.in-mobile .protocol-popbox-close:after,
.in-mobile .protocol-popbox-close:before {
    height: 24px
}

.in-mobile .protocol-popbox-bd {
    padding: 25px 20px 20px
}

.protocol-popbox-main {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    align-items: center;
    background-color: rgba(0, 0, 0, .5);
    display: flex;
    height: 100%;
    justify-content: center;
    left: 0;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 200;
    width: 100vw;
    visibility: hidden
}

.protocol-popbox-main.is-show {
    visibility: visible
}

.protocol-popbox-main.is-show .protocol-popbox {
    opacity: 1;
    transform: translateZ(0)
}

.protocol-popbox {
    width: 680px;
    display: block;
    background-color: #141414;
    position: relative;
    opacity: 0;
    transform: translate3d(0, 30px, 0);
    transition: all .24s ease-out
}

.protocol-popbox-hd {
    height: auto;
    position: absolute;
    width: 100%
}

.protocol-popbox-close {
    cursor: pointer;
    height: 24px;
    opacity: .8;
    position: absolute;
    right: 8px;
    top: 8px;
    width: 24px;
    z-index: 3
}

.protocol-popbox-close:after,
.protocol-popbox-close:before {
    background-color: #999;
    bottom: 0;
    content: "";
    height: 12px;
    left: 0;
    margin: auto;
    position: absolute;
    right: 0;
    top: 0;
    width: 2px
}

.protocol-popbox-close:before {
    transform: rotate(45deg)
}

.protocol-popbox-close:hover {
    opacity: 1
}

.protocol-popbox-close:after {
    transform: rotate(-45deg)
}

.protocol-popbox-bd {
    flex: 1;
    font-size: 14px;
    overflow: hidden;
    overflow-y: auto;
    -webkit-box-flex: 0;
    -ms-flex: none;
    min-height: 180px;
    padding: 45px 40px 40px
}

.protocol-popbox-tit {
    font-size: 20px;
    padding: 0 0 8px;
    color: #fff
}

.protocol-cont {
    height: 386px;
    overflow: hidden;
    overflow-y: auto;
    padding: 15px;
    background-color: #0b0b0b;
    border: 1px solid hsla(0, 0%, 100%, .05);
    margin: 10px 0 0
}

.protocol-cont::-webkit-scrollbar-thumb {
    display: none
}

.protocol-cont h5.tit {
    font-size: 20px;
    color: hsla(0, 0%, 100%, .8);
    margin-bottom: 15px
}

.protocol-cont h5.tit span {
    font-size: 12px
}

.protocol-cont ul li {
    margin-bottom: 10px;
    color: hsla(0, 0%, 100%, .8)
}

.protocol-cont p {
    color: hsla(0, 0%, 100%, .8);
    line-height: 1.8
}

.policy-cont-list li {
    margin-left: 3.3em;
    list-style: disc
}

.policy-cont-title {
    margin-top: 1.5em;
    margin-bottom: .5em;
    font-weight: 700
}

.protocol-cont .protocol-game-detail>h6,
.protocol-cont ul li>h6 {
    color: #fff;
    padding-bottom: 5px;
    font-size: 15px
}