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

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

#meiqia-container {
    display: none;
    opacity: 0;
    visibility: hidden;
    user-select: 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
    }
}

.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(data:application/font-woff;charset=utf-8;base64,\ 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);
    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(../style/fonts/font_1434092639_4910953.eot);
    src: url(../style/fonts/font_1434092639_4910953.eot) format("embedded-opentype"), url(../style/fonts/font_1434092639_4910953.woff) format("woff"), url(../style/fonts/font_1434092639_4910953.ttf) format("truetype"), url(../style/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
}

body {
    font-size: 14px;
    color: var(--app-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;
    /*background: linear-gradient(90deg, #c1d5f5 0%, #e4edf4bf 100%);*/
    background:#d3e1f4;
}

@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: #fff
}

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

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

.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;
    padding: 16px 0 16px 16px;
    overflow: hidden;
    cursor: pointer;
    height: 156px;
    border: 1px solid var(--swiper-theme-color);

}

.home-top-entry .game-wrapper .ag-card-img {
    width: 125px;
    border-radius: 16px
}

.home-top-entry .game-wrapper .ag-card-img_qs {
    background: no-repeat center / 85% url('../images/code1.png') rgba(28, 156, 255, 1)
}

.home-top-entry .game-wrapper .ag-card-img_182 {
    background: no-repeat center / 85% url('../images/code2.png') rgba(28, 156, 255, 1)
}

.home-top-entry .game-wrapper .ag-card-img_2028 {
    background: no-repeat center / 85% url('../images/code3.png') rgba(28, 156, 255, 1)
}


.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: #abacfd
}

.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: linear-gradient(90deg, #4f8df5 0%, #3ca5f2 100%);
    border: 1px solid #fff;
}

.home-top-entry .game-wrapper .ag-card-arrow span {
    transform: rotate(0deg);
    color: #ffffff;
    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: 16px;
    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;

}

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

@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 {
    max-width: 1424px;
    margin: 0 auto;
    margin-top: 1%;
}

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

.home_page .game_item:hover {
    transform: scale(1.05);
    z-index: 1;
    box-shadow: 0px 0px 16px rgba(0, 0, 0, 0.2);
}

.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, #2E7BFF 0%, #4DA3FF 100%);
}

.home_page .game_item_2 {
    background: no-repeat right / auto 100% url(../images/sport-item-bg.png), linear-gradient(90deg, #169BFF 0%, #4CCBFF 100%);
}

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

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

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

.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: 0px;
    }
    .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,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');
    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;
}

body {
    font-size: 14px;
    color: #000000;
    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: 40px;
    grid-template-columns: 1fr 1fr 1fr
}

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

.home-top-entry .game-wrapper .ag-card1:hover .ag-card-arrow {
    background-color: #146bc9;
}

@media screen and (max-width: 960px) {
    .home-top-entry .game-wrapper .game-wrapper_agbox {
        height: 329px
    }
    .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: 80px
        }
        .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 16px;
        height: 130px;
		
    }
}



.home-top-entry .game-wrapper_qsag,.home-top-entry .game-wrapper_182ag,.home-top-entry .game-wrapper_2028ag {
    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 {
    padding: 0;
    margin-top: -10px;
    flex-direction: column-reverse;
    padding-left: 0px;
}

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

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

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

.home-top-entry .game-wrapper_ag-join {
    margin-top: -12px;
}

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

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

.home-top-entry .game-wrapper_qsag button,.home-top-entry .game-wrapper_182ag button,.home-top-entry .game-wrapper_2028ag button {
    margin-top: 30px;
    border-radius: 8px;
    background: #ffd600;
    padding: 0 62px;
    font-size: 18px;
    line-height: 40px;
    color: #324466;
}

.home-top-entry .game-wrapper_qsag button:hover,.home-top-entry .game-wrapper_182ag button:hover,.home-top-entry .game-wrapper_2028ag button:hover {
    background: #ffb01b;
    color: #071e5e;
    transform: scale(1.04)
}

.home-top-entry .game-wrapper .game-wrapper_qsbg {
    background: no-repeat right / contain url(../images/qs.png), no-repeat top / cover url(), linear-gradient(129.67deg, #007aff 0%, #52a0de 51%, #107fd8 100%);
}
.home-top-entry .game-wrapper .game-wrapper_182bg {
    background: no-repeat right / contain url(../images/182.png), no-repeat top / cover url(), linear-gradient(129.67deg, #007aff 0%, #52a0de 51%, #107fd8 100%);
}
.home-top-entry .game-wrapper .game-wrapper_2028bg {
    background: no-repeat right / contain url(../images/2028.png), no-repeat top / cover url(), linear-gradient(129.67deg, #007aff 0%, #52a0de 51%, #107fd8 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: 16px;
    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;
}

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

@media screen and (max-width: 960px) {
    .home-top-entry .game-wrapper .game-wrapper_agbox {
        height: 329px;
        grid-column: inherit;
    }
    .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: 246px
    }
    .home-top-entry .game-wrapper_qsag,.home-top-entry .game-wrapper_182ag,.home-top-entry .game-wrapper_2028ag {
        display: grid;
        justify-items: start;
        padding: 16px 16px 32px;
        cursor: pointer
    }
    .home-top-entry .game-wrapper_ag-join {
        margin-top: -8px;
        grid-row-start: 1
    }
    .home-top-entry .game-wrapper_ag-join h2 {
        font-size: 31px;
        padding-left: 10px;
        line-height: 1.5
    }
    .home-top-entry .game-wrapper_ag-join p {
        white-space: pre-wrap;
        padding-left: 10px;
        font-size: 12px
    }
    .home-top-entry .game-wrapper_ag-list {
        padding: 0;
        margin-top: -36px;
        flex-direction: column-reverse;
        padding-left: 0px;
    }
    .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: 12px;
        line-height: 28px;
        color: #ccc;
        margin-right: 8px
    }
    .home-top-entry .game-wrapper_ag-list ul li i {
        margin: 0 8px
    }
    .home-top-entry .game-wrapper_qsag button,.home-top-entry .game-wrapper_182ag button,.home-top-entry .game-wrapper_2028ag button {
        margin-top: 12px;
        font-size: 16px;
        padding: 0 24px;
        margin-left: 4px;
    }
}

@media screen and (max-width: 468px) {
    .home-top-entry .game-wrapper .game-wrapper_qsag {
        background: no-repeat right / contain url(../images/qs.png), no-repeat top / cover url(), linear-gradient(90deg, #4f8df5 0%, #3ca5f2 100%);;border: 1px solid #fff;
        box-shadow: 0 1.282vw 3.077vw rgba(159, 177, 191, .3);

    }
	.home-top-entry .game-wrapper .game-wrapper_182ag {
        background: no-repeat right / contain url(../images/182.png), no-repeat top / cover url(), linear-gradient(90deg, #4f8df5 0%, #3ca5f2 100%);;border: 1px solid #fff;
        box-shadow: 0 1.282vw 3.077vw rgba(159, 177, 191, .3);

    }
	.home-top-entry .game-wrapper .game-wrapper_2028ag {
        background: no-repeat right / contain url(../images/2028.png), no-repeat top / cover url(), linear-gradient(90deg, #4f8df5 0%, #3ca5f2 100%);;border: 1px solid #fff;
        box-shadow: 0 1.282vw 3.077vw rgba(159, 177, 191, .3);

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

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

.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: #fff
}

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

.event-flex{
    display: flex;
    gap: 16px;
    margin-top: 1%;
}

@media screen and (max-width: 768px){
    .event-flex{
        display: flex;
        flex-direction: column;
    }
}

.Carousel{
    width:100%;
    
}

@media screen and (min-width: 768px) {
    .Carousel{
	grid-row: span 3;
    grid-column: span 2;
    position: relative;
}
}

.Carousel .swiper-slide{

    
}

.Carousel .game-wrapper_agbox{
    width:100%;
}

.swiper-pagination{
    position:relative !important;
    margin-top:10px;
}

.swiper-pagination-bullet{
    width:10px;
    height:10px;
}

.overlay{position:fixed;inset:0;background:rgba(0,0,0,.72);display:flex;justify-content:center;align-items:center;animation:f .35s}
@keyframes f{from{opacity:0}to{opacity:1}}
.wrap{display:flex;flex-direction:column;align-items:center}
.card{width:min(80vw,520px);background:#fff;border-radius:26px;overflow:hidden;box-shadow:0 35px 90px rgba(0,0,0,.45);animation:s .45s cubic-bezier(.2,.9,.2,1)}
@keyframes s{from{transform:translateY(30px) scale(.88);opacity:0}to{transform:none;opacity:1}}
.hero{position:relative;height:180px;background:
radial-gradient(circle at 50% 25%, rgba(255, 210, 90, .22), transparent 120px), linear-gradient(180deg, #7885ff, #104eb8 70%, #3882d0),
linear-gradient(180deg,#5b5b5b,#1b1b1b 70%,#000)}
.hero svg{position:absolute;bottom:-1px;left:0;width:101%;height:90px}
.logo{position:absolute;left:50%;top:26px;transform:translateX(-50%);text-align:center;color:#fff;z-index:2}
.badge{width:74px;height:74px;border-radius:50%;margin:0 auto 12px;background:linear-gradient(#ffd95a,#f0b300);display:flex;align-items:center;justify-content:center;font-size:34px;box-shadow:0 0 30px rgba(255,208,0,.4)}
.brand{font-size:34px;font-weight:800;color:#ffd54d}
.domain{letter-spacing:4px;color:#ddd;font-size:14px;margin-top:4px}
.content{padding: 10px 10px 10px;text-align:center}
.title{font-size:32px;font-weight:800;color:#222;margin-bottom:12px}
.line{font-size:24px;line-height:1.8;color:#333}
.red{color:#ff3b30;font-weight:800}
.tip{margin-top:12px;color:#666}
.btn{display:inline-block;margin-top:28px;padding:18px 80px;border-radius:14px;text-decoration:none;color:#fff;font-size:24px;font-weight:700;
background:linear-gradient(180deg,#ff7b1f,#ff4500);
box-shadow:0 12px 24px rgba(255,87,34,.35), inset 0 2px 0 rgba(255,255,255,.35);
transition:.25s}
.btn:hover{transform:translateY(-2px);filter:brightness(1.05)}
.close{margin-top:22px;width:66px;height:66px;border-radius:50%;border:3px solid rgba(255,255,255,.95);display:flex;align-items:center;justify-content:center;color:#fff;font-size:40px;cursor:pointer;transition:.25s}
.close:hover{transform:rotate(90deg)}
@media(max-width:480px){
.hero{height:80px}.hero svg{height:76px}.badge{width:64px;height:64px;font-size:28px}
.brand{font-size:28px}.content{padding:34px 20px 28px}.title{font-size:26px}.line{font-size:20px}.btn{font-size:20px;padding:10px 36px}
}