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



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



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



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

.ms-font {
    font-family: system-ui;
}

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

.home-top-entry .game-wrapper .ms-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;
}

.ms-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 .ms-card-img {
    width: 164px;
    border-radius: 16px
}

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

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

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

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

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

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

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

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

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

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

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

.home-top-entry .game-wrapper .ms-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 .ms-card-arrow span {
    transform: rotate(90deg);
    color: #7b7b9d;
    font-size: 24px
}

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

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

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

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

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

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

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

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

@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 .ms-card {
        padding: 25px 0 25px 16px;
        height: 130px;
    }
}

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

    .home-top-entry .game-wrapper .ms-card-content ul,.home-top-entry .game-wrapper .ms-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;
}

.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,#F87700 0%,#0CDDDD 100%);
}

.home_page .game_item_6 {
    background: no-repeat right / auto 100% url(../images/sport-item-bg.png),linear-gradient(90deg,#3CE768 0%,#0CDDDD 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;
    }
}



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

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

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

.home-top-entry .game-wrapper .ms-card1,.home-top-entry .game-wrapper .ms-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 .ms-card1:hover {
    background-color: #60159b;
}

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

@media screen and (max-width: 960px) {
    .home-top-entry .game-wrapper .game-wrapper_msbox {
        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 .ms-card-img {
            width:106px
        }

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

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

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

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

.home-top-entry .game-wrapper_ms {
    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_ms-list {
    display: flex;
    color: #f9f5f3;
    line-height: 28px
}

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

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

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

.home-top-entry .game-wrapper_ms-join {
    margin-top: 3px
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@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_msbox {
        height:329px
    }

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

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

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

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

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

    .home-top-entry .game-wrapper_ms-join h2 {
        font-size: 18px;
        padding-left: 16px;
        line-height: 1.5
    }

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

    .home-top-entry .game-wrapper_ms-list {
        padding: 0;
        margin-top: 8px;
        flex-direction: column-reverse;
        padding-left: 16px;
    }

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

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

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

    .home-top-entry .game-wrapper_ms button {
        margin-top: 41px;
    }
}

@media screen and (max-width: 468px) {
    .home-top-entry .game-wrapper .game-wrapper_ms {
    background: no-repeat right / contain url(../images/ms-66.png), no-repeat top , 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 .ms-card-content h5 {
        font-size: 18px;
        line-height: 26px
    }

    .home-top-entry .game-wrapper .ms-card-content ul,.home-top-entry .game-wrapper .ms-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%
    }
}