.star-container {
    position: fixed;
    z-index: -1;
    width: 100vw;
    height: 100vh;
    background: no-repeat top / cover url(../images/pc-background.d2a73e39.png)
}

.star-container .meteor {
    width: 1px;
    display: block;
    position: absolute;
    background-color: transparent transparent transparent rgba(255, 255, 255, .5);
    opacity: 0;
    animation: meteor 15s linear infinite
}

.star-container .change {
    width: 50px;
    height: 50px;
    border: none;
    position: absolute;
    left: 81.8%;
    top: 169px;
    animation: myChange 8s linear
}

.star-container .meteor:after {
    content: "";
    display: block;
    border: 1px solid #fff;
    border-width: 0px 90px 2px 90px;
    border-color: transparent transparent transparent rgba(255, 255, 255, .5);
    transform: rotate(-45deg)
}

.star-container2 {
    background: none
}

@keyframes meteor {
    0% {
        opacity: 0
    }

    30% {
        opacity: 1
    }

    to {
        opacity: 0;
        transform: translate(-800px, 100vh)
    }
}

@keyframes myChange {
    0% {
        left: 41.8%;
        top: 669px;
        opacity: 0
    }

    1% {
        left: 42.8%;
        top: 629px;
        opacity: 0
    }

    10% {
        left: 45.8%;
        top: 619px;
        opacity: .1
    }

    20% {
        left: 49.8%;
        top: 569px;
        opacity: .2
    }

    30% {
        left: 53.8%;
        top: 519px;
        opacity: .3
    }

    40% {
        left: 57.8%;
        top: 469px;
        opacity: .4
    }

    50% {
        left: 61.8%;
        top: 419px;
        opacity: .5
    }

    60% {
        left: 65.8%;
        top: 369px;
        opacity: .6
    }

    70% {
        left: 69.8%;
        top: 319px;
        opacity: .7
    }

    80% {
        left: 73.8%;
        top: 269px;
        opacity: .8
    }

    90% {
        left: 77.8%;
        top: 219px;
        opacity: .9
    }

    to {
        left: 81.8%;
        top: 169px;
        opacity: 1
    }
}

@font-face {
    font-family: iconfont;
    src: url(../font/iconfont.407a95e9.woff2) format("woff2"), url(../fonts/iconfont.e7187704.woff) format("woff"), url(../fonts/iconfont.e7187704.ttf) format("truetype")
}

.iconfont {
    font-family: iconfont !important;
    font-size: 16px;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

.icon {
    display: inline-grid;
    grid-auto-flow: column;
    place-items: center;
    gap: var(--gap);
    position: relative;
    line-height: 1
}

.icon.iconfont {
    font-size: inherit
}

.button--outline:not(:disabled):hover {
    background-color: currentColor
}

.button--outline:not(:disabled):hover>span {
    color: #fff !important
}

@media (any-hover: hover) {
    .hx-button:not(:disabled):hover {
        opacity: .9
    }
}

@media screen and (max-width: 1120px) {}

@supports (-webkit-touch-callout:none) {}

:focus-visible {
    outline: none
}

*,
:before,
:after {
    box-sizing: border-box;
    border-width: 0;
    border-style: solid;
    border-color: #e5e7eb
}

:before,
:after {
    --tw-content: ""
}

html {
    line-height: 1.5;
    -webkit-text-size-adjust: 100%;
    -moz-tab-size: 4;
    -o-tab-size: 4;
    tab-size: 4;
    font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", Segoe UI Symbol, "Noto Color Emoji";
    font-feature-settings: normal
}

body {
    margin: 0;
    line-height: inherit
}

abbr:where([title]) {
    -webkit-text-decoration: underline dotted;
    text-decoration: underline dotted
}

button {
    font-family: inherit;
    font-size: 100%;
    font-weight: inherit;
    line-height: inherit;
    color: inherit;
    margin: 0;
    padding: 0
}

button {
    -webkit-appearance: button;
    background-color: transparent;
    background-image: none
}

:-moz-focusring {
    outline: auto
}

:-moz-ui-invalid {
    box-shadow: none
}

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
    height: auto
}

::-webkit-search-decoration {
    -webkit-appearance: none
}

h2,
h5,
p {
    margin: 0
}

ul {
    list-style: none;
    margin: 0;
    padding: 0
}

button {
    cursor: pointer
}

:disabled {
    cursor: default
}

img {
    display: block;
    vertical-align: middle
}

img {
    max-width: 100%;
    height: auto
}

html {
    font-size: 14px
}

html {
    line-height: 1.15;
    -webkit-text-size-adjust: 100%
}

body {
    margin: 0
}

button {
    font-family: inherit;
    font-size: 100%;
    line-height: 1.15;
    margin: 0
}

@font-face {
    font-family: swiper-icons;
    src: url(../fonts/iconfont.407a95e9.woff);
    font-weight: 400;
    font-style: normal
}

:root {
    --swiper-theme-color: #007aff
}

:root {
    --swiper-navigation-size: 44px
}

:root {
    --animate-duration: 1s;
    --animate-delay: 1s;
    --animate-repeat: 1
}

@keyframes fadeIn {
    0% {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

@font-face {
    font-family: anticon;
    src: url(../fonts/font_1434092639_4910953.eot);
    src: url(../fonts/font_1434092639_4910953.eot) format("embedded-opentype"), url(../fonts/font_1434092639_4910953.woff) format("woff"), url(../fonts/font_1434092639_4910953.ttf) format("truetype"), url(../fonts/font_1434092639_4910953.svg) format("svg")
}

:root {
    --app-background-color: #121E36FF;
    --app-color: #fff;
    --hx1-block-background: #25324B;
    --hx1-block-divider-color: #324466FF;
    --hx1-highlight-color: #ffb52f;
    --hx1-tabs-tab-active-color: #fff;
    --hx1-font-1st: #FFFFFF66;
    --hx1-font-2nd: #FFFFFF99;
    --hx1-font-3rd: #FFB01B;
    --hx1-font-4th: #FFFFFF88;
    --hx1-font-5th: #FFFFFF44;
    --hx1-font-tra6: rgba(255, 255, 255, .6);
    --hx1-toast-background: rgba(0, 0, 0, .8);
    --hx1-toast-error-color: #F53F55;
    --hx1-toast-success-color: #3DC37E;
    --hx1-skeleton-bg: #25324BFF;
    --hx1-skeleton-color: #121E36FF;
    --hx1-background-color: #25324BFF;
    --sm: 576px;
    --md: 768px;
    --lg: 992px;
    --xl: 1200px
}

button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    outline: none;
    cursor: pointer;
    background: transparent;
    font-size: inherit;
    color: inherit
}

ul {
    margin: 0;
    padding: 0
}

li {
    list-style-type: none
}

p {
    margin: 0
}

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

@font-face {
    font-family: Montserrat;
    src: url(../fonts/latin.fab57614.woff2), url(../fonts/iconfont.e7187704.woff2);
    font-weight: 100
}

@font-face {
    font-family: Montserrat;
    src: url(../fonts/latin.fab57614.woff2), url(../fonts/iconfont.e7187704.woff2);
    font-weight: 200
}

@font-face {
    font-family: Montserrat;
    src: url(../fonts/latin.fab57614.woff2), url(../fonts/iconfont.e7187704.woff2);
    font-weight: 300
}

@font-face {
    font-family: Montserrat;
    src: url(../fonts/latin.fab57614.woff2), url(../fonts/iconfont.e7187704.woff2);
    font-weight: 400
}

@font-face {
    font-family: Montserrat;
    src: url(../fonts/latin.fab57614.woff2), url(../fonts/iconfont.e7187704.woff2);
    font-weight: 500
}

@font-face {
    font-family: Montserrat;
    src: url(../fonts/latin.fab57614.woff2), url(../fonts/iconfont.e7187704.woff2);
    font-weight: 600
}

@font-face {
    font-family: Montserrat;
    src: url(../fonts/latin.fab57614.woff2), url(../fonts/iconfont.e7187704.woff2);
    font-weight: 700
}

@font-face {
    font-family: Montserrat;
    src: url(../fonts/latin.fab57614.woff2), url(../fonts/iconfont.e7187704.woff2);
    font-weight: 800
}

@font-face {
    font-family: Montserrat;
    src: url(../fonts/latin.fab57614.woff2), url(../fonts/iconfont.e7187704.woff2);
    font-weight: 900
}

@font-face {
    font-family: DINCond-Black;
    src: url(../fonts/iconfont.e7187704.ttf) format("truetype");
    font-style: normal;
    font-weight: 400
}

@font-face {
    font-family: DIN-Bold-Black;
    src: url("../fonts/iconfont.e7187704.ttf") format("truetype");
    font-style: normal;
    font-weight: 400
}

@font-face {
    font-family: D-DIN;
    src: url(https://1dingfa.com/static/media/D-DIN.e04dde36.otf) format("truetype")
}

@font-face {
    font-family: DIN Bold;
    src: url(http://m.jackfacai.com/static/media/DIN/%20Bold.edb190d9.ttf) format("truetype")
}

@font-face {
    font-family: DINAlternate-Bold;
    src: url(../fonts/iconfont.e7187704.ttf)
}

@font-face {
    font-family: Montserrat;
    src: url(../fonts/montserrat-regular.949efd65.ttf)
}

@font-face {
    font-family: Montserrat-Regular;
    src: url(../fonts/montserrat-regular.949efd65.ttf)
}

@font-face {
    font-family: Montserrat-SemiBold;
    src: url(../fonts/iconfont.e7187704.ttf)
}

@font-face {
    font-family: Montserrat-Medium;
    src: url(../fonts/iconfont.e7187704.ttf)
}

@font-face {
    font-family: Montserrat-ExtraBold;
    src: url(../fonts/iconfont.e7187704.ttf)
}

@font-face {
    font-family: Montserrat-Black;
    src: url(../fonts/montserrat-black.be2a4b98.ttf)
}

body {
    font-size: 14px;
    color: var(--app-color);
    background-color: var(--app-background-color);
    font-family: Montserrat, Open Sans, PingFang SC, Microsoft YaHei, Helvetica Neue, Hiragino Sans GB, WenQuanYi Micro Hei, Arial, sans-serif !important;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

@media screen and (min-width: 768px) {
    body {
        padding-bottom: env(safe-area-inset-bottom);
        padding-top: env(safe-area-inset-top)
    }
}

body::-webkit-scrollbar {
    width: 4px;
    height: 4px
}

body::-webkit-scrollbar-thumb {
    border-radius: 8px;
    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, .2);
    background: var(--hx1-background-color)
}

body::-webkit-scrollbar-track {
    border-radius: 0
}

.content-wrapper>div {
    padding-left: 16px;
    padding-right: 16px;
    box-sizing: content-box
}

.page {
    min-height: 100vh;
    display: flex;
    flex-direction: column
}

.content-wrapper {
    flex: 1
}

.bubbly-button {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: none;
    cursor: pointer;
    transition: transform ease-in .25s, box-shadow ease-in .25s
}

.style1 {
    background-color: #ffb01b;
    color: #ffffff !important;
}

.style1:hover {
    background-color: #ffb01b;
    box-shadow: 0 2px 16px #ffb01b;
    transition: background-color .25s;
}

.bubbly-button:focus {
    outline: 0
}

.bubbly-button:before,
.bubbly-button:after {
    position: absolute;
    content: "";
    display: block;
    width: 140%;
    height: 100%;
    left: -20%;
    z-index: -1000;
    transition: all ease-in-out .5s;
    background-repeat: no-repeat
}

.style1:before {
    display: none;
    top: -75%;
    background-image: radial-gradient(circle, #ffb01b 20%, transparent 20%), radial-gradient(circle, transparent 20%, #ffb01b 20%, transparent 30%), radial-gradient(circle, #ffb01b 20%, transparent 20%), radial-gradient(circle, #ffb01b 20%, transparent 20%), radial-gradient(circle, transparent 10%, #ffb01b 15%, transparent 20%), radial-gradient(circle, #ffb01b 20%, transparent 20%), radial-gradient(circle, #ffb01b 20%, transparent 20%), radial-gradient(circle, #ffb01b 20%, transparent 20%), radial-gradient(circle, #ffb01b 20%, transparent 20%);
    background-size: 10% 10%, 20% 20%, 15% 15%, 20% 20%, 18% 18%, 10% 10%, 15% 15%, 10% 10%, 18% 18%
}

.style1:after {
    display: none;
    bottom: -75%;
    background-image: radial-gradient(circle, #ffb01b 20%, transparent 20%), radial-gradient(circle, #ffb01b 20%, transparent 20%), radial-gradient(circle, transparent 10%, #ffb01b 15%, transparent 20%), radial-gradient(circle, #ffb01b 20%, transparent 20%), radial-gradient(circle, #ffb01b 20%, transparent 20%), radial-gradient(circle, #ffb01b 20%, transparent 20%), radial-gradient(circle, #ffb01b 20%, transparent 20%);
    background-size: 15% 15%, 20% 20%, 18% 18%, 20% 20%, 15% 15%, 10% 10%, 20% 20%
}

.style1:active {
    transform: scale(.9);
    background-color: #ffb01b;
    box-shadow: 0 2px 25px #ffb01b33
}

body {
    --red-1: 255, 236, 232;
    --red-2: 253, 205, 197;
    --red-3: 251, 172, 163;
    --red-4: 249, 137, 129;
    --red-5: 247, 101, 96;
    --red-6: 245, 63, 63;
    --red-7: 203, 39, 45;
    --red-8: 161, 21, 30;
    --red-9: 119, 8, 19;
    --red-10: 77, 0, 10;
    --orangered-1: 255, 243, 232;
    --orangered-2: 253, 221, 195;
    --orangered-3: 252, 197, 159;
    --orangered-4: 250, 172, 123;
    --orangered-5: 249, 144, 87;
    --orangered-6: 247, 114, 52;
    --orangered-7: 204, 81, 32;
    --orangered-8: 162, 53, 17;
    --orangered-9: 119, 31, 6;
    --orangered-10: 77, 14, 0;
    --orange-1: 255, 247, 232;
    --orange-2: 255, 228, 186;
    --orange-3: 255, 207, 139;
    --orange-4: 255, 182, 93;
    --orange-5: 255, 154, 46;
    --orange-6: 255, 125, 0;
    --orange-7: 210, 95, 0;
    --orange-8: 166, 69, 0;
    --orange-9: 121, 46, 0;
    --orange-10: 77, 27, 0;
    --gold-1: 255, 252, 232;
    --gold-2: 253, 244, 191;
    --gold-3: 252, 233, 150;
    --gold-4: 250, 220, 109;
    --gold-5: 249, 204, 69;
    --gold-6: 247, 186, 30;
    --gold-7: 204, 146, 19;
    --gold-8: 162, 109, 10;
    --gold-9: 119, 75, 4;
    --gold-10: 77, 45, 0;
    --yellow-1: 254, 255, 232;
    --yellow-2: 254, 254, 190;
    --yellow-3: 253, 250, 148;
    --yellow-4: 252, 242, 107;
    --yellow-5: 251, 232, 66;
    --yellow-6: 250, 220, 25;
    --yellow-7: 207, 175, 15;
    --yellow-8: 163, 132, 8;
    --yellow-9: 120, 93, 3;
    --yellow-10: 77, 56, 0;
    --lime-1: 252, 255, 232;
    --lime-2: 237, 248, 187;
    --lime-3: 220, 241, 144;
    --lime-4: 201, 233, 104;
    --lime-5: 181, 226, 65;
    --lime-6: 159, 219, 29;
    --lime-7: 126, 183, 18;
    --lime-8: 95, 148, 10;
    --lime-9: 67, 112, 4;
    --lime-10: 42, 77, 0;
    --green-1: 232, 255, 234;
    --green-2: 175, 240, 181;
    --green-3: 123, 225, 136;
    --green-4: 76, 210, 99;
    --green-5: 35, 195, 67;
    --green-6: 0, 180, 42;
    --green-7: 0, 154, 41;
    --green-8: 0, 128, 38;
    --green-9: 0, 102, 34;
    --green-10: 0, 77, 28;
    --cyan-1: 232, 255, 251;
    --cyan-2: 183, 244, 236;
    --cyan-3: 137, 233, 224;
    --cyan-4: 94, 223, 214;
    --cyan-5: 55, 212, 207;
    --cyan-6: 20, 201, 201;
    --cyan-7: 13, 165, 170;
    --cyan-8: 7, 130, 139;
    --cyan-9: 3, 97, 108;
    --cyan-10: 0, 66, 77;
    --blue-1: 232, 247, 255;
    --blue-2: 195, 231, 254;
    --blue-3: 159, 212, 253;
    --blue-4: 123, 192, 252;
    --blue-5: 87, 169, 251;
    --blue-6: 52, 145, 250;
    --blue-7: 32, 108, 207;
    --blue-8: 17, 75, 163;
    --blue-9: 6, 48, 120;
    --blue-10: 0, 26, 77;
    --arcoblue-1: 232, 243, 255;
    --arcoblue-2: 190, 218, 255;
    --arcoblue-3: 148, 191, 255;
    --arcoblue-4: 106, 161, 255;
    --arcoblue-5: 64, 128, 255;
    --arcoblue-6: 22, 93, 255;
    --arcoblue-7: 14, 66, 210;
    --arcoblue-8: 7, 44, 166;
    --arcoblue-9: 3, 26, 121;
    --arcoblue-10: 0, 13, 77;
    --purple-1: 245, 232, 255;
    --purple-2: 221, 190, 246;
    --purple-3: 195, 150, 237;
    --purple-4: 168, 113, 227;
    --purple-5: 141, 78, 218;
    --purple-6: 114, 46, 209;
    --purple-7: 85, 29, 176;
    --purple-8: 60, 16, 143;
    --purple-9: 39, 6, 110;
    --purple-10: 22, 0, 77;
    --pinkpurple-1: 255, 232, 251;
    --pinkpurple-2: 247, 186, 239;
    --pinkpurple-3: 240, 142, 230;
    --pinkpurple-4: 232, 101, 223;
    --pinkpurple-5: 225, 62, 219;
    --pinkpurple-6: 217, 26, 217;
    --pinkpurple-7: 176, 16, 182;
    --pinkpurple-8: 138, 9, 147;
    --pinkpurple-9: 101, 3, 112;
    --pinkpurple-10: 66, 0, 77;
    --magenta-1: 255, 232, 241;
    --magenta-2: 253, 194, 219;
    --magenta-3: 251, 157, 199;
    --magenta-4: 249, 121, 183;
    --magenta-5: 247, 84, 168;
    --magenta-6: 245, 49, 157;
    --magenta-7: 203, 30, 131;
    --magenta-8: 161, 16, 105;
    --magenta-9: 119, 6, 79;
    --magenta-10: 77, 0, 52;
    --gray-1: 247, 248, 250;
    --gray-2: 242, 243, 245;
    --gray-3: 229, 230, 235;
    --gray-4: 201, 205, 212;
    --gray-5: 169, 174, 184;
    --gray-6: 134, 144, 156;
    --gray-7: 107, 119, 133;
    --gray-8: 78, 89, 105;
    --gray-9: 39, 46, 59;
    --gray-10: 29, 33, 41;
    --success-1: var(--green-1);
    --success-2: var(--green-2);
    --success-3: var(--green-3);
    --success-4: var(--green-4);
    --success-5: var(--green-5);
    --success-6: var(--green-6);
    --success-7: var(--green-7);
    --success-8: var(--green-8);
    --success-9: var(--green-9);
    --success-10: var(--green-10);
    --primary-1: var(--arcoblue-1);
    --primary-2: var(--arcoblue-2);
    --primary-3: var(--arcoblue-3);
    --primary-4: var(--arcoblue-4);
    --primary-5: var(--arcoblue-5);
    --primary-6: var(--arcoblue-6);
    --primary-7: var(--arcoblue-7);
    --primary-8: var(--arcoblue-8);
    --primary-9: var(--arcoblue-9);
    --primary-10: var(--arcoblue-10);
    --danger-1: var(--red-1);
    --danger-2: var(--red-2);
    --danger-3: var(--red-3);
    --danger-4: var(--red-4);
    --danger-5: var(--red-5);
    --danger-6: var(--red-6);
    --danger-7: var(--red-7);
    --danger-8: var(--red-8);
    --danger-9: var(--red-9);
    --danger-10: var(--red-10);
    --warning-1: var(--orange-1);
    --warning-2: var(--orange-2);
    --warning-3: var(--orange-3);
    --warning-4: var(--orange-4);
    --warning-5: var(--orange-5);
    --warning-6: var(--orange-6);
    --warning-7: var(--orange-7);
    --warning-8: var(--orange-8);
    --warning-9: var(--orange-9);
    --warning-10: var(--orange-10);
    --link-1: var(--arcoblue-1);
    --link-2: var(--arcoblue-2);
    --link-3: var(--arcoblue-3);
    --link-4: var(--arcoblue-4);
    --link-5: var(--arcoblue-5);
    --link-6: var(--arcoblue-6);
    --link-7: var(--arcoblue-7);
    --link-8: var(--arcoblue-8);
    --link-9: var(--arcoblue-9);
    --link-10: var(--arcoblue-10)
}

body {
    --color-white: #ffffff;
    --color-black: #000000;
    --color-border: rgb(var(--gray-3));
    --color-bg-popup: var(--color-bg-5);
    --color-bg-1: #fff;
    --color-bg-2: #fff;
    --color-bg-3: #fff;
    --color-bg-4: #fff;
    --color-bg-5: #fff;
    --color-bg-white: #fff;
    --color-neutral-1: rgb(var(--gray-1));
    --color-neutral-2: rgb(var(--gray-2));
    --color-neutral-3: rgb(var(--gray-3));
    --color-neutral-4: rgb(var(--gray-4));
    --color-neutral-5: rgb(var(--gray-5));
    --color-neutral-6: rgb(var(--gray-6));
    --color-neutral-7: rgb(var(--gray-7));
    --color-neutral-8: rgb(var(--gray-8));
    --color-neutral-9: rgb(var(--gray-9));
    --color-neutral-10: rgb(var(--gray-10));
    --color-text-1: var(--color-neutral-10);
    --color-text-2: var(--color-neutral-8);
    --color-text-3: var(--color-neutral-6);
    --color-text-4: var(--color-neutral-4);
    --color-border-1: var(--color-neutral-2);
    --color-border-2: var(--color-neutral-3);
    --color-border-3: var(--color-neutral-4);
    --color-border-4: var(--color-neutral-6);
    --color-fill-1: var(--color-neutral-1);
    --color-fill-2: var(--color-neutral-2);
    --color-fill-3: var(--color-neutral-3);
    --color-fill-4: var(--color-neutral-4);
    --color-primary-light-1: rgb(var(--primary-1));
    --color-primary-light-2: rgb(var(--primary-2));
    --color-primary-light-3: rgb(var(--primary-3));
    --color-primary-light-4: rgb(var(--primary-4));
    --color-secondary: var(--color-neutral-2);
    --color-secondary-hover: var(--color-neutral-3);
    --color-secondary-active: var(--color-neutral-4);
    --color-secondary-disabled: var(--color-neutral-1);
    --color-danger-light-1: rgb(var(--danger-1));
    --color-danger-light-2: rgb(var(--danger-2));
    --color-danger-light-3: rgb(var(--danger-3));
    --color-danger-light-4: rgb(var(--danger-4));
    --color-success-light-1: rgb(var(--success-1));
    --color-success-light-2: rgb(var(--success-2));
    --color-success-light-3: rgb(var(--success-3));
    --color-success-light-4: rgb(var(--success-4));
    --color-warning-light-1: rgb(var(--warning-1));
    --color-warning-light-2: rgb(var(--warning-2));
    --color-warning-light-3: rgb(var(--warning-3));
    --color-warning-light-4: rgb(var(--warning-4));
    --color-link-light-1: rgb(var(--link-1));
    --color-link-light-2: rgb(var(--link-2));
    --color-link-light-3: rgb(var(--link-3));
    --color-link-light-4: rgb(var(--link-4));
    --border-radius-none: 0;
    --border-radius-small: 2px;
    --border-radius-medium: 4px;
    --border-radius-large: 8px;
    --border-radius-circle: 50%;
    --color-tooltip-bg: rgb(var(--gray-10));
    --color-spin-layer-bg: rgba(255, 255, 255, .6);
    --color-menu-dark-bg: #232324;
    --color-menu-light-bg: #ffffff;
    --color-menu-dark-hover: rgba(255, 255, 255, .04);
    --color-mask-bg: rgba(29, 33, 41, .6)
}

html,
body {
    line-height: 1.5;
    -webkit-text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-family: Inter, -apple-system, BlinkMacSystemFont, PingFang SC, Hiragino Sans GB, noto sans, Microsoft YaHei, Helvetica Neue, Helvetica, Arial, sans-serif
}

body {
    margin: 0;
    padding: 0
}

img {
    border-style: none
}

button {
    font-family: inherit;
    line-height: 1.15;
    margin: 0
}

button {
    overflow: visible
}

button {
    text-transform: none
}

button {
    -webkit-appearance: button
}

button::-moz-focus-inner {
    border-style: none;
    padding: 0
}

button:-moz-focusring {
    outline: 1px dotted ButtonText
}

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

* {
    outline: none
}

@-webkit-keyframes fadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes fadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

.button--outline:not(:disabled):hover {
    background-color: currentColor;
}

.button--outline:not(:disabled):hover>span {
    color: #fff !important;
}

@media (any-hover: hover) {
    .hx-button:not(:disabled):hover {
        opacity: 0.9;
    }
}

@font-face {
    font-family: "iconfont";
    src: url(../fonts/iconfont.599951c1.woff2) format('woff2'), url(../fonts/iconfont.e7187704.woff) format('woff'), url(../fonts/iconfont.e7187704.ttf) format('truetype');
}

:focus-visible {
    outline: none;
}

:focus-visible {
    outline: none;
}

.star-container {
    position: fixed;
    z-index: -1;
    width: 100vw;
    height: 100vh;
    background: no-repeat top / cover url(../images/background.png);
}

.star-container .meteor {
    width: 1px;
    display: block;
    position: absolute;
    background-color: transparent transparent transparent rgba(255, 255, 255, 0.5);
    opacity: 0;
    -webkit-animation: meteor 15s linear infinite;
    animation: meteor 15s linear infinite;
}

.star-container .change {
    width: 50px;
    height: 50px;
    border: none;
    position: absolute;
    left: 81.8%;
    top: 169px;
    -webkit-animation: myChange 8s linear;
    animation: myChange 8s linear;
}

.star-container .meteor::after {
    content: '';
    display: block;
    border: 1px solid #fff;
    border-width: 0px 90px 2px 90px;
    border-color: transparent transparent transparent rgba(255, 255, 255, 0.5);
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

.star-container2 {
    background: none;
}

@-webkit-keyframes meteor {
    0% {
        opacity: 0;
    }

    30% {
        opacity: 1;
    }

    100% {
        opacity: 0;
        -webkit-transform: translate(-800px, 100vh);
        transform: translate(-800px, 100vh);
    }
}

@keyframes meteor {
    0% {
        opacity: 0;
    }

    30% {
        opacity: 1;
    }

    100% {
        opacity: 0;
        -webkit-transform: translate(-800px, 100vh);
        transform: translate(-800px, 100vh);
    }
}

@-webkit-keyframes myChange {
    0% {
        left: 41.8%;
        top: 669px;
        opacity: 0;
    }

    1% {
        left: 42.8%;
        top: 629px;
        opacity: 0;
    }

    10% {
        left: 45.8%;
        top: 619px;
        opacity: 0.1;
    }

    20% {
        left: 49.8%;
        top: 569px;
        opacity: 0.2;
    }

    30% {
        left: 53.8%;
        top: 519px;
        opacity: 0.3;
    }

    40% {
        left: 57.8%;
        top: 469px;
        opacity: 0.4;
    }

    50% {
        left: 61.8%;
        top: 419px;
        opacity: 0.5;
    }

    60% {
        left: 65.8%;
        top: 369px;
        opacity: 0.6;
    }

    70% {
        left: 69.8%;
        top: 319px;
        opacity: 0.7;
    }

    80% {
        left: 73.8%;
        top: 269px;
        opacity: 0.8;
    }

    90% {
        left: 77.8%;
        top: 219px;
        opacity: 0.9;
    }

    100% {
        left: 81.8%;
        top: 169px;
        opacity: 1;
    }
}

@keyframes myChange {
    0% {
        left: 41.8%;
        top: 669px;
        opacity: 0;
    }

    1% {
        left: 42.8%;
        top: 629px;
        opacity: 0;
    }

    10% {
        left: 45.8%;
        top: 619px;
        opacity: 0.1;
    }

    20% {
        left: 49.8%;
        top: 569px;
        opacity: 0.2;
    }

    30% {
        left: 53.8%;
        top: 519px;
        opacity: 0.3;
    }

    40% {
        left: 57.8%;
        top: 469px;
        opacity: 0.4;
    }

    50% {
        left: 61.8%;
        top: 419px;
        opacity: 0.5;
    }

    60% {
        left: 65.8%;
        top: 369px;
        opacity: 0.6;
    }

    70% {
        left: 69.8%;
        top: 319px;
        opacity: 0.7;
    }

    80% {
        left: 73.8%;
        top: 269px;
        opacity: 0.8;
    }

    90% {
        left: 77.8%;
        top: 219px;
        opacity: 0.9;
    }

    100% {
        left: 81.8%;
        top: 169px;
        opacity: 1;
    }
}

.game-swiper {
    position: relative;
}

.ag-font {
    font-family: system-ui;
    color: #ffffff;
}

.home-top-entry .game-wrapper {
    margin-top: 64px;
    grid-template-columns: 950px 1fr;
}

.home-top-entry .game-wrapper .ag-card {
    position: relative;
    display: flex;
    background: #1765bf no-repeat right / auto 100%;
    padding: 16px 0 16px 16px;
    overflow: hidden;
    cursor: pointer;
    height: 173px;
    transition: all 300ms ease-out;
}

.ag-card1 {
    position: relative;
    display: flex;
    background-color: rgb(255 255 255 / 4%);
    padding: 16px 0 16px 16px;
    overflow: hidden;
    cursor: pointer;
    height: 156px;
}

.home-top-entry .game-wrapper .ag-card-img {
    width: 164px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(255, 255, 255, 0.05);
}

.home-top-entry .game-wrapper .ag-card-img img {
    width: 95%;
}

.home-top-entry .game-wrapper .ag-card-img_ag {
    background: no-repeat center / 85% url('../images/leyulogo.png') rgba(255, 255, 255, .05)
}

.home-top-entry .game-wrapper .ag-card-img_evo {
    background: no-repeat center / 85% url('../images/kaiyunlogo.png') rgba(255, 255, 255, .05)
}


.home-top-entry .game-wrapper .ag-card-img_hth {
    background: no-repeat center / 85% url('../images/hthlogo.png') rgba(255, 255, 255, .05)
}

.home-top-entry .game-wrapper .ag-card-img_ayx {
    background: no-repeat center / 85% url('../images/ayxlogo.png') rgba(255, 255, 255, .05)
}

.home-top-entry .game-wrapper .ag-card-img_aty {
    background: no-repeat center / 85% url('../images/mklogo.png') rgba(255, 255, 255, .05)
}

.home-top-entry .game-wrapper .ag-card-img_ltt {
    background: no-repeat center / 85% url('../images/lttlogo.png') rgba(255, 255, 255, .05)
}


.home-top-entry .game-wrapper .ag-card-img_xk {
    background: no-repeat center / 85% url('../images/xk.png') rgba(255, 255, 255, .05)
}

.home-top-entry .game-wrapper .ag-card-content1 {
    flex: 1;
    padding-left: 16px;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly
}

.home-top-entry .game-wrapper .ag-card-content1 h5 {
    font-size: 24px;
    line-height: 32px
}

.home-top-entry .game-wrapper .ag-card-content1 ul {
    display: flex
}

.home-top-entry .game-wrapper .ag-card-content1 ul li {
    white-space: pre-wrap;
    margin-right: 8px
}

.home-top-entry .game-wrapper .ag-card-content1 p {
    font-size: 12px;
    color: #fdabab
}

.home-top-entry .game-wrapper .ag-card-arrow {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 100%;
    right: 0;
    top: 0;
    background-color: rgb(255 255 255 / 4%);
}

.home-top-entry .game-wrapper .ag-card-arrow span {
    color: #7b7b9d;
    font-size: 24px
}

.home-top-entry .game-wrapper .ag-card:hover {
    background-size: auto 120%;
}

.home-top-entry .game-wrapper .ag-card.ag-qj {
    background-image: url(../images/ag-qj.png);
}

.home-top-entry .game-wrapper .ag-card.ag-in {
    background-image: url(../images/ag-in.png);
}

.home-top-entry .game-wrapper .ag-card-content {
    flex: 1 1;
    padding-left: 10px;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
}

.home-top-entry .game-wrapper .ag-card-content h5 {
    font-size: 24px;
    line-height: 32px;
}

.home-top-entry .game-wrapper .ag-card-content ul {
    display: flex;
}

.home-top-entry .game-wrapper .ag-card-content ul li {
    white-space: pre-wrap;
    margin-right: 8px;
}

.home-top-entry .game-wrapper .ag-card-content p {
    font-size: 12px;
    color: #fdabab;
}

@media screen and (max-width: 1300px) {
    .home-top-entry .game-wrapper {
        grid-template-columns: 9.5fr 3.5fr;
    }
}

@media screen and (max-width: 960px) {
    .home-top-entry .game-wrapper {
        margin-top: 45px;
        margin-top: 0px;
        height: auto;
        grid-template-columns: 1fr;
    }

    .home-top-entry .game-wrapper .ag-card {
        padding: 25px 0 25px 16px;
        height: 130px;
    }
}

@media screen and (max-width: 468px) {
    .home-top-entry .game-wrapper .ag-card-content h5 {
        font-size: 18px;
        line-height: 26px;
    }

    .home-top-entry .game-wrapper .ag-card-content ul,
    .home-top-entry .game-wrapper .ag-card-content p {
        font-size: 12px;
    }
}

.home-top-entry {
    margin: 0 auto;
    max-width: 1430px;
}

.home-top-entry .game-wrapper {
    display: grid;
    grid-gap: 16px;
    gap: 16px;
}

@media screen and (max-width: 960px) {
    .home-top-entry {}
}

.home {
    background: transparent;
}

.home_page {
    padding-top: 16px;
    max-width: 1424px;
    margin: 0 auto;
}

.home_page>section .game-swiper {
    margin-bottom: 64px;
}

.home_page .game_item {
    width: 100%;
    height: 200px;
    overflow: hidden;
    border-radius: 16px;
    position: relative;
    margin-bottom: 16px;
    background-repeat: no-repeat;
    background-size: cover;
    cursor: pointer;
    flex: 1 1;
    transition: all linear 150ms;
}

.home_page .game_item .img-right {
    display: none;
    -webkit-animation: fadeIn 250ms linear;
    animation: fadeIn 250ms linear;
}

.home_page .game_item_active {
    flex: 1.97 1;
}

.home_page .game_item_active .img-right {
    display: block;
}

.home_page .game_item .game_item_maintenance_icon {
    display: none;
}

.home_page .game_item_maintenance_icon {
    display: inline-block;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    height: 100%;
    z-index: 2;
}

.home_page .game_item>img {
    position: absolute;
    right: 0;
    bottom: 0;
    height: 100%;
    transition: -webkit-transform 200ms linear;
    transition: transform 200ms linear;
    transition: transform 200ms linear, -webkit-transform 200ms linear;
}

.home_page .game_item_1 {
    background: no-repeat right / auto 100% url(../images/sport-item-bg.png), linear-gradient(90deg, #F87700 0%, #F2D53C 100%);
}

.home_page .game_item_2 {
    background: no-repeat right / auto 100% url(../images/sport-item-bg.png), linear-gradient(90deg, #201E93 0%, #5621ED 100%);
}

.home_page .game_item_3 {
    background: no-repeat right / auto 100% url(../images/sport-item-bg.png), linear-gradient(90deg, #931E1E 0%, #ED215E 100%);
}

.home_page .game_item_4 {
    background: no-repeat right / auto 100% url(../images/sport-item-bg.png), linear-gradient(90deg, #0C71AA 0%, #0CDDDD 100%);
}


.home_page .game_item_5 {
    background: no-repeat right / auto 100% url(../images/sport-item-bg.png), linear-gradient(90deg, #1a6529 0%, #21ed50 100%);
}

.home_page .game_item_6 {
    background: no-repeat right / auto 100% url(../images/sport-item-bg.png), linear-gradient(90deg, #a82aac 0%, #9121ed 100%);
}

.home_page .game_item_7 {
    background: no-repeat right / auto 100% url(../images/sport-item-bg.png), linear-gradient(90deg, #1a6529 0%, #21ed50 100%);
}

.home_page .game_item_8 {
    background: no-repeat right / auto 100% url(../images/sport-item-bg.png), linear-gradient(90deg, #1a6529 0%, #21ed50 100%);
}



.home_page .sports-and-lottery {
    display: flex;
}

.home_page .sports-and-lottery .home_sports_game {
    margin-bottom: 64px;
}

.home_page .sports-and-lottery .home_sports_game {
    width: 100%;
}

.home_page .sports-and-lottery .home_sports_game .home_sports_game-content {
    display: flex;
    grid-gap: 16px;
    gap: 16px;
}

.home_page .sports-and-lottery .home_sports_game .top_game_tit {
    position: absolute;
    max-width: 100%;
    left: 7%;
    top: 50% !important;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}

.home_page .sports-and-lottery .home_sports_game .top_game_tit h5 {
    font-family: Montserrat-Black, sans-serif;
    font-size: 24px;
    line-height: 1.2;
    -webkit-background-clip: text;
    color: #fff;
}

.home_page .sports-and-lottery .home_sports_game .top_game_tit p {
    font-family: Montserrat, sans-serif;
    max-width: 250px;
    margin-top: 8px;
    font-size: 16px;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.8);
}

.home_page .sports-and-lottery .home_sports_game .buttons_box {
    position: absolute;
    top: 180px;
    left: 40px;
}

@media screen and (max-width: 960px) {
    .home {}

    .home2 {}

    .home_page .sports-and-lottery .home_sports_game .top_game_tit h5 {
        font-size: 18px;
        padding-left: 16px
    }

    .home_page .sports-and-lottery .home_sports_game .top_game_tit p {
        font-size: 12px;
        padding-left: 16px
    }

    .home_page .sports-and-lottery .home_sports_game .game_item {
        height: 159.6px;
    }

    .home_page .sports-and-lottery .home_sports_game .game_item .top_game_tit {
        font-size: 26px;
        left: 20.8px;
        top: 29.2px;
    }

    .home_page .sports-and-lottery .home_sports_game .game_item .buttons_box {
        left: 20.8px;
        top: 101.6px;
    }

    .home_page>section .game-swiper {
        margin-bottom: 24px;
    }
}

@media screen and (max-width: 768px) {
    .home_page .sports-and-lottery {
        display: block;
    }

    .home_page .sports-and-lottery .home_sports_game {
        flex: initial;
        margin-right: 0;
        margin-bottom: 32px;
    }

    .home_page .sports-and-lottery .home_sports_game .home_sports_game-content {
        display: inherit;
    }

    .home_page .sports-and-lottery .home_sports_game .game_item {
        height: 130px;
    }

    .home_page .sports-and-lottery .home_sports_game .game_item .img-right {
        display: block;
    }

    .home_page .sports-and-lottery .home_sports_game .game_item .top_game_tit {
        font-size: 18px;
        top: 24px;
        left: 16px;
    }

    .home_page .sports-and-lottery .home_sports_game .game_item .buttons_box {
        left: 16px;
        top: 82px;
    }
}

@font-face {
    font-family: swiper-icons;
    src: url('data:application/font-woff;charset=utf-8;base64,d09GRgABAAAAAAZgABAAAAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAAGRAAAABoAAAAci6qHkUdERUYAAAWgAAAAIwAAACQAYABXR1BPUwAABhQAAAAuAAAANuAY7+xHU1VCAAAFxAAAAFAAAABm2fPczU9TLzIAAAHcAAAASgAAAGBP9V5RY21hcAAAAkQAAACIAAABYt6F0cBjdnQgAAACzAAAAAQAAAAEABEBRGdhc3AAAAWYAAAACAAAAAj//wADZ2x5ZgAAAywAAADMAAAD2MHtryVoZWFkAAABbAAAADAAAAA2E2+eoWhoZWEAAAGcAAAAHwAAACQC9gDzaG10eAAAAigAAAAZAAAArgJkABFsb2NhAAAC0AAAAFoAAABaFQAUGG1heHAAAAG8AAAAHwAAACAAcABAbmFtZQAAA/gAAAE5AAACXvFdBwlwb3N0AAAFNAAAAGIAAACE5s74hXjaY2BkYGAAYpf5Hu/j+W2+MnAzMYDAzaX6QjD6/4//Bxj5GA8AuRwMYGkAPywL13jaY2BkYGA88P8Agx4j+/8fQDYfA1AEBWgDAIB2BOoAeNpjYGRgYNBh4GdgYgABEMnIABJzYNADCQAACWgAsQB42mNgYfzCOIGBlYGB0YcxjYGBwR1Kf2WQZGhhYGBiYGVmgAFGBiQQkOaawtDAoMBQxXjg/wEGPcYDDA4wNUA2CCgwsAAAO4EL6gAAeNpj2M0gyAACqxgGNWBkZ2D4/wMA+xkDdgAAAHjaY2BgYGaAYBkGRgYQiAHyGMF8FgYHIM3DwMHABGQrMOgyWDLEM1T9/w8UBfEMgLzE////P/5//f/V/xv+r4eaAAeMbAxwIUYmIMHEgKYAYjUcsDAwsLKxc3BycfPw8jEQA/gZBASFhEVExcQlJKWkZWTl5BUUlZRVVNXUNTQZBgMAAMR+E+gAEQFEAAAAKgAqACoANAA+AEgAUgBcAGYAcAB6AIQAjgCYAKIArAC2AMAAygDUAN4A6ADyAPwBBgEQARoBJAEuATgBQgFMAVYBYAFqAXQBfgGIAZIBnAGmAbIBzgHsAAB42u2NMQ6CUAyGW568x9AneYYgm4MJbhKFaExIOAVX8ApewSt4Bic4AfeAid3VOBixDxfPYEza5O+Xfi04YADggiUIULCuEJK8VhO4bSvpdnktHI5QCYtdi2sl8ZnXaHlqUrNKzdKcT8cjlq+rwZSvIVczNiezsfnP/uznmfPFBNODM2K7MTQ45YEAZqGP81AmGGcF3iPqOop0r1SPTaTbVkfUe4HXj97wYE+yNwWYxwWu4v1ugWHgo3S1XdZEVqWM7ET0cfnLGxWfkgR42o2PvWrDMBSFj/IHLaF0zKjRgdiVMwScNRAoWUoH78Y2icB/yIY09An6AH2Bdu/UB+yxopYshQiEvnvu0dURgDt8QeC8PDw7Fpji3fEA4z/PEJ6YOB5hKh4dj3EvXhxPqH/SKUY3rJ7srZ4FZnh1PMAtPhwP6fl2PMJMPDgeQ4rY8YT6Gzao0eAEA409DuggmTnFnOcSCiEiLMgxCiTI6Cq5DZUd3Qmp10vO0LaLTd2cjN4fOumlc7lUYbSQcZFkutRG7g6JKZKy0RmdLY680CDnEJ+UMkpFFe1RN7nxdVpXrC4aTtnaurOnYercZg2YVmLN/d/gczfEimrE/fs/bOuq29Zmn8tloORaXgZgGa78yO9/cnXm2BpaGvq25Dv9S4E9+5SIc9PqupJKhYFSSl47+Qcr1mYNAAAAeNptw0cKwkAAAMDZJA8Q7OUJvkLsPfZ6zFVERPy8qHh2YER+3i/BP83vIBLLySsoKimrqKqpa2hp6+jq6RsYGhmbmJqZSy0sraxtbO3sHRydnEMU4uR6yx7JJXveP7WrDycAAAAAAAH//wACeNpjYGRgYOABYhkgZgJCZgZNBkYGLQZtIJsFLMYAAAw3ALgAeNolizEKgDAQBCchRbC2sFER0YD6qVQiBCv/H9ezGI6Z5XBAw8CBK/m5iQQVauVbXLnOrMZv2oLdKFa8Pjuru2hJzGabmOSLzNMzvutpB3N42mNgZGBg4GKQYzBhYMxJLMlj4GBgAYow/P/PAJJhLM6sSoWKfWCAAwDAjgbRAAB42mNgYGBkAIIbCZo5IPrmUn0hGA0AO8EFTQAA');
    font-weight: 400;
    font-style: normal
}

:root {
    --swiper-theme-color: #007aff
}

:root {
    --swiper-navigation-size: 44px
}

:root {
    --animate-duration: 1s;
    --animate-delay: 1s;
    --animate-repeat: 1;
}

@-webkit-keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@media screen and (max-width: 767px) {
    :root {
        --app-background-color: #05061a !important;
    }
}

@-webkit-keyframes fadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes fadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

html {
    line-height: 1.15;
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
}

img {
    border-style: none;
}

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

ul {
    margin: 0;
    padding: 0;
}

li {
    list-style-type: none;
}

p {
    margin: 0;
}

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

@font-face {
    font-family: "Montserrat";
    src: url(../fonts/latin.fab57614.woff2), url(../fonts/iconfont.e7187704.woff2);
    font-weight: 100;
}

@font-face {
    font-family: "Montserrat";
    src: url(../fonts/latin.fab57614.woff2), url(../fonts/iconfont.e7187704.woff2);
    font-weight: 200;
}

@font-face {
    font-family: "Montserrat";
    src: url(../fonts/latin.fab57614.woff2), url(../fonts/iconfont.e7187704.woff2);
    font-weight: 300;
}

@font-face {
    font-family: "Montserrat";
    src: url(../fonts/latin.fab57614.woff2), url(../fonts/iconfont.e7187704.woff2);
    font-weight: 400;
}

@font-face {
    font-family: "Montserrat";
    src: url(../fonts/latin.fab57614.woff2), url(../fonts/iconfont.e7187704.woff2);
    font-weight: 500;
}

@font-face {
    font-family: "Montserrat";
    src: url(../fonts/latin.fab57614.woff2), url(../fonts/iconfont.e7187704.woff2);
    font-weight: 600;
}

@font-face {
    font-family: "Montserrat";
    src: url(../fonts/latin.fab57614.woff2), url(../fonts/iconfont.e7187704.woff2);
    font-weight: 700;
}

@font-face {
    font-family: "Montserrat";
    src: url(../fonts/latin.fab57614.woff2), url(../fonts/iconfont.e7187704.woff2);
    font-weight: 800;
}

@font-face {
    font-family: "Montserrat";
    src: url(../fonts/latin.fab57614.woff2), url(../fonts/iconfont.e7187704.woff2);
    font-weight: 900;
}

@font-face {
    font-family: "DINCond-Black";
    src: url(../fonts/iconfont.e7187704.ttf) format('truetype');
    font-style: normal;
    font-weight: normal;
}

@font-face {
    font-family: "DIN-Bold-Black";
    src: url("../fonts/iconfont.e7187704.ttf") format('truetype');
    font-style: normal;
    font-weight: normal;
}

@font-face {
    font-family: "D-DIN";
    src: url(https://1dingfa.com/static/media/D-DIN.otf) format('truetype');
}

@font-face {
    font-family: "DIN Bold";
    src: url("../font/iconfont.407a95e9.ttf") format('truetype');
}

@font-face {
    font-family: "DINAlternate-Bold";
    src: url(../fonts/iconfont.e7187704.ttf);
}

@font-face {
    font-family: 'Montserrat';
    src: url(../fonts/montserrat-regular.949efd65.ttf);
}

@font-face {
    font-family: 'Montserrat-Regular';
    src: url(../fonts/montserrat-regular.949efd65.ttf);
}

@font-face {
    font-family: 'Montserrat-SemiBold';
    src: url(../fonts/iconfont.e7187704.ttf);
}

@font-face {
    font-family: 'Montserrat-Medium';
    src: url(../fonts/iconfont.e7187704.ttf);
}

@font-face {
    font-family: 'Montserrat-ExtraBold';
    src: url(../fonts/iconfont.e7187704.ttf);
}

@font-face {
    font-family: 'Montserrat-Black';
    src: url(../fonts/montserrat-black.be2a4b98.ttf);
}

body {
    background: no-repeat top / cover url(../images/background.png);
    font-size: 14px;
    color: #fff;
    color: var(--app-color);
    background-color: #121E36FF;
    background-color: var(--app-background-color);
    font-family: 'Montserrat', "Open Sans", "PingFang SC", "Microsoft YaHei", "Helvetica Neue", "Hiragino Sans GB", "WenQuanYi Micro Hei", Arial, sans-serif;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

@media screen and (min-width: 768px) {
    body {
        padding-bottom: env(safe-area-inset-bottom);
        padding-top: env(safe-area-inset-top);
    }
}

body::-webkit-scrollbar {
    width: 4px;
    height: 4px;
}

body::-webkit-scrollbar-thumb {
    border-radius: 8px;
    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    background: #25324BFF;
    background: var(--hx1-background-color);
}

body::-webkit-scrollbar-track {
    border-radius: 0;
}

.content-wrapper>div {
    padding-left: 16px;
    padding-right: 16px;
    box-sizing: content-box;
}

.page {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.content-wrapper {
    flex: 1 1;
}

.ag-font {
    font-family: system-ui
}

.ag-font1 {
    font-family: system-ui
}

.home-top-entry .game-wrapper .ag-card1,
.home-top-entry .game-wrapper .ag-card-arrow {
    transition: all .15s ease-in-out;
}

.home-top-entry .game-wrapper {
    margin-top: 64px;
    grid-template-columns: 950px 1fr
}

.home-top-entry .game-wrapper .ag-card1:hover {
    background-color: #60159b;
}

.home-top-entry .game-wrapper .ag-card1:hover .ag-card-arrow {
    background-color: #702ca1
}

@media screen and (max-width: 960px) {
    .home-top-entry .game-wrapper .game-wrapper_agbox {
        height: 349px
    }

    .home-top-entry .game-wrapper {
        margin-top: 24px;
        height: auto;
        grid-template-columns: 1fr
    }

    @media screen and (max-width: 468px) {
        .home-top-entry .game-wrapper .ag-card-img {
            width: 126px
        }

        .home-top-entry .game-wrapper .ag-card-content1 h5 {
            font-size: 18px;
            line-height: 26px
        }

        .home-top-entry .game-wrapper .ag-card-content ul,
        .home-top-entry .game-wrapper .ag-card-content1 p {
            font-size: 12px
        }
    }

    .home-top-entry .game-wrapper .ag-card1 {
        padding: 25px 0 25px 8px;
        height: 130px
    }
}

.home-top-entry .game-wrapper .game-wrapper_agbox {
    grid-row: span 3;
    position: relative
}

.home-top-entry .game-wrapper_ag {
    border-radius: 16px 42px 16px 16px !important;
    padding: 32px;
    cursor: pointer;
    position: absolute;
    z-index: 1;
    width: 100%;
    background: transparent;
    height: 100%;
}

.home-top-entry .game-wrapper_ag-list {
    display: flex;
    color: #f9f5f3;
    line-height: 28px
}

.home-top-entry .game-wrapper_ag-list ul {
    display: flex
}

.home-top-entry .game-wrapper_ag-list ul li {
    margin-right: 12px
}

.home-top-entry .game-wrapper_ag-list ul li i {
    margin-right: 8px;
    font-weight: 900;
    font-style: normal
}

.home-top-entry .game-wrapper_ag-join h2 {
    font-size: 30px;
    line-height: 1.5
}

.home-top-entry .game-wrapper_ag-join p {
    margin-top: 5px;
    font-size: 14px;
    line-height: 18px;
    color: #cbd6ff
}

.home-top-entry .game-wrapper_ag button {
    margin-top: 10px;
    border-radius: 4px;
    padding: 0 24px;
    font-size: 16px;
    line-height: 40px;
    color: #324466
}

.home-top-entry .game-wrapper_ag button .iconfont {
    margin-left: 4px
}

.home-top-entry .game-wrapper_ag button:hover {
    background: #ffb01b;
    color: #071e5e
}

.home-top-entry .game-wrapper .game-wrapper_agbg {
    background: no-repeat right / contain url(../images/ag-in.png), no-repeat top / cover url('../images/bg.png'), linear-gradient(129.67deg, #4A00E0 0%, #6717A6 51%, #220959 100%)
}

.home-top-entry .game-wrapper .ag-card {
    position: relative;
    display: flex;
    background-color: #1765bf;
    padding: 16px 0 16px 16px;
    overflow: hidden;
    cursor: pointer;
    height: 156px
}

.home-top-entry .game-wrapper .ag-card {
    transition: all .15s ease-in-out
}

.home-top-entry .game-wrapper .ag-card:hover {
    background-color: #1765bf;
}

.home-top-entry .game-wrapper .ag-card-content {
    flex: 1;
    padding-left: 10px;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly
}

.home-top-entry .game-wrapper .ag-card-content h5 {
    font-size: 24px;
    line-height: 32px
}

.home-top-entry .game-wrapper .ag-card-content ul {
    display: flex
}

.home-top-entry .game-wrapper .ag-card-content ul li {
    white-space: pre-wrap;
    margin-right: 8px
}

.home-top-entry .game-wrapper .ag-card-content p {
    font-size: 12px;
    color: #fdabab
}

@media screen and (max-width: 1300px) {
    .home-top-entry .game-wrapper {
        grid-template-columns: 9.5fr 3.5fr
    }
}

@media screen and (max-width: 960px) {
    .home-top-entry .game-wrapper .game-wrapper_agbox {
        height: 349px
    }

    .home-top-entry .game-wrapper {
        margin-top: 24px;
        height: auto;
        grid-template-columns: 1fr
    }

    .home-top-entry .game-wrapper .ag-card {
        padding: 25px 0 25px 16px;
        height: 130px
    }
}

@media screen and (max-width: 768px) {
    .home-top-entry .game-wrapper .game-wrapper_agbox {
        height: 270px
    }

    .home-top-entry .game-wrapper_ag {
        display: grid;
        justify-items: start;
        padding: 16px 20px 32px;
        cursor: pointer
    }

    .home-top-entry .game-wrapper_ag-join {
        margin-top: 0;
        grid-row-start: 1
    }

    .home-top-entry .game-wrapper_ag-join h2 {
        font-size: 20px;
        line-height: 1.5
    }

    .home-top-entry .game-wrapper_ag-join p {
        white-space: pre-wrap;
        font-size: 12px
    }

    .home-top-entry .game-wrapper_ag-list {
        padding: 0;
        margin-top: 3px;
        flex-direction: column-reverse;
    }

    .home-top-entry .game-wrapper_ag-list ul {
        display: grid;
        grid-template-columns: 1fr 1fr;
        margin: 0
    }

    .home-top-entry .game-wrapper_ag-list ul li {
        font-size: 13px;
        line-height: 25px;
        color: #A4AAB5;
        margin-right: 8px
    }

    .home-top-entry .game-wrapper_ag-list ul li i {
        margin: 0 8px
    }

    .home-top-entry .game-wrapper_ag button {
        margin-top: 1px;
    }
}

@media screen and (max-width: 468px) {
    .home-top-entry .game-wrapper .game-wrapper_ag {
        background: no-repeat right / contain url(../images/ag-in.png), no-repeat top / cover url(http://m.jackfacai.com/static/images/beijing.png), linear-gradient(129.67deg, rgb(255 255 255 / 5%) 0%, rgb(255 255 255 / 5%) 51%, rgb(0 0 0 / 0%) 100%);
    }


    .home-top-entry .game-wrapper .ag-card-content h5 {
        font-size: 18px;
        line-height: 26px
    }

    .home-top-entry .game-wrapper .ag-card-content ul,
    .home-top-entry .game-wrapper .ag-card-content p {
        font-size: 12px
    }
}

.home-top-entry {
    margin: 0 auto;
    max-width: 1430px
}

.home-top-entry .game-wrapper {
    display: grid;
    gap: 16px
}

.home-top-entry .game-wrapper>div {
    border-radius: 16px
}

.bubbly-button:focus {
    outline: 0
}

.bubbly-button:before,
.bubbly-button:after {
    position: absolute;
    content: "";
    display: block;
    width: 140%;
    height: 100%;
    left: -20%;
    z-index: -1000;
    transition: all ease-in-out .5s;
    background-repeat: no-repeat
}

.page {
    min-height: 100vh;
    display: flex;
    flex-direction: column
}

.content-wrapper {
    flex: 1
}

.bubbly-button {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: none;
    cursor: pointer;
    transition: transform ease-in .25s, box-shadow ease-in .25s
}

.style1 {
    background-color: #ffb01b;
    color: #ffffff !important;
}

.style2 {
    background-color: #ffffff1a;
    color: #fff
}

.style1:hover {
    background-color: #ffb01b;
    box-shadow: 0 2px 16px #ffb01b;
    transition: background-color .25s;
}

.style2:hover {
    background-color: #fff !important;
    color: #324466 !important;
    box-shadow: 0 2px 16px #fff;
    transition: background-color .25s
}

.bubbly-button:focus {
    outline: 0
}

.bubbly-button:before,
.bubbly-button:after {
    position: absolute;
    content: "";
    display: block;
    width: 140%;
    height: 100%;
    left: -20%;
    z-index: -1000;
    transition: all ease-in-out .5s;
    background-repeat: no-repeat
}

.style1:before {
    display: none;
    top: -75%;
    background-image: radial-gradient(circle, #ffb01b 20%, transparent 20%), radial-gradient(circle, transparent 20%, #ffb01b 20%, transparent 30%), radial-gradient(circle, #ffb01b 20%, transparent 20%), radial-gradient(circle, #ffb01b 20%, transparent 20%), radial-gradient(circle, transparent 10%, #ffb01b 15%, transparent 20%), radial-gradient(circle, #ffb01b 20%, transparent 20%), radial-gradient(circle, #ffb01b 20%, transparent 20%), radial-gradient(circle, #ffb01b 20%, transparent 20%), radial-gradient(circle, #ffb01b 20%, transparent 20%);
    background-size: 10% 10%, 20% 20%, 15% 15%, 20% 20%, 18% 18%, 10% 10%, 15% 15%, 10% 10%, 18% 18%
}

.style1:after {
    display: none;
    bottom: -75%;
    background-image: radial-gradient(circle, #ffb01b 20%, transparent 20%), radial-gradient(circle, #ffb01b 20%, transparent 20%), radial-gradient(circle, transparent 10%, #ffb01b 15%, transparent 20%), radial-gradient(circle, #ffb01b 20%, transparent 20%), radial-gradient(circle, #ffb01b 20%, transparent 20%), radial-gradient(circle, #ffb01b 20%, transparent 20%), radial-gradient(circle, #ffb01b 20%, transparent 20%);
    background-size: 15% 15%, 20% 20%, 18% 18%, 20% 20%, 15% 15%, 10% 10%, 20% 20%
}

.style1:active {
    transform: scale(.9);
    background-color: #ffb01b;
    box-shadow: 0 2px 25px #ffb01b33
}

.style1.animate {
    transform: scale(.99);
    background-color: #ffb01b;
    box-shadow: 0 2px 16px #ffb01b;
    transition: background-color .25s;
    background-image: radial-gradient(circle, #ffb01b 20%, transparent 20%), radial-gradient(circle, #ffb01b 20%, transparent 20%), radial-gradient(circle, transparent 10%, #ffb01b 15%, transparent 20%), radial-gradient(circle, #ffb01b 20%, transparent 20%), radial-gradient(circle, #ffb01b 20%, transparent 20%), radial-gradient(circle, #ffb01b 20%, transparent 20%), radial-gradient(circle, #ffb01b 20%, transparent 20%);
    background-size: 15% 15%, 20% 20%, 18% 18%, 20% 20%, 15% 15%, 10% 10%, 20% 20%
}

.style1.animate:before {
    display: block;
    animation: topBubbles ease-in-out .75s forwards
}

.style1.animate:after {
    display: block;
    animation: bottomBubbles ease-in-out .75s forwards
}

@keyframes topBubbles {
    0% {
        background-position: 5% 90%, 10% 90%, 10% 90%, 15% 90%, 25% 90%, 25% 90%, 40% 90%, 55% 90%, 70% 90%
    }

    50% {
        background-position: 0% 80%, 0% 20%, 10% 40%, 20% 0%, 30% 30%, 22% 50%, 50% 50%, 65% 20%, 90% 30%
    }

    to {
        background-position: 0% 70%, 0% 10%, 10% 30%, 20% -10%, 30% 20%, 22% 40%, 50% 40%, 65% 10%, 90% 20%;
        background-size: 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%
    }
}

@keyframes bottomBubbles {
    0% {
        background-position: 10% -10%, 30% 10%, 55% -10%, 70% -10%, 85% -10%, 70% -10%, 70% 0%
    }

    50% {
        background-position: 0% 80%, 20% 80%, 45% 60%, 60% 100%, 75% 70%, 95% 60%, 105% 0%
    }

    to {
        background-position: 0% 90%, 20% 90%, 45% 70%, 60% 110%, 75% 80%, 95% 70%, 110% 10%;
        background-size: 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%
    }
}

/* 电脑端 */
.game-wrapper_contact {
    color: #cbd6ff;
    font-size: 14px;
    line-height: 28px;
    margin-top: 10px;
}

.game-wrapper_contact>img {
    width: 350px;
}

.game-wrapper_contact .cont {
    padding: 5px 0;
}

.game-wrapper_contact .cont .item {
    display: flex;
    align-items: center;
    margin-right: 10px;
}

.game-wrapper_contact .cont .item img {
    width: 20px;
    height: 20px;
    margin-right: 5px;
}

.game-wrapper_contact .cont .item .text {
    font-size: 14px;
}

@media screen and (max-width: 768px) {
    .game-wrapper_contact {
        color: #cbd6ff;
        font-size: 12px;
        line-height: 18px;
        margin-top: 8px;
        margin-bottom: 10px;
    }

    .game-wrapper_contact>img {
        width: 70%;
    }

    .game-wrapper_contact .cont {
        padding: 2px 0px;
    }

    .game-wrapper_contact .cont .item {
        display: flex;
        align-items: center;
        padding: 2px 0;
    }

    .game-wrapper_contact .cont .item img {
        width: 16px;
        height: 16px;
        margin-right: 3px;
    }

    .game-wrapper_contact .cont .item .text {
        font-size: 12px;
    }
}