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

}

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

@font-face {
    font-family: DIN Bold;
    src: url("data:image/gif;base64,R0lGODlhAQABAAAAACwAAAAAAQABAAA=") format("truetype")
}

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
}

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(./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;
    background-color: rgb(255 255 255 / 4%);
    padding: 16px 0 16px 16px;
    overflow: hidden;
    cursor: pointer;
    height: 156px
}

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

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

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

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

.home-top-entry .game-wrapper .ag-card-img_sm {
    background: no-repeat center / 85% /* 404:url("data:image/gif;base64,R0lGODlhAQABAAAAACwAAAAAAQABAAA=") */ rgba(255,255,255,255)
}

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

.home-top-entry .game-wrapper .ag-card-img_hy {
    background: no-repeat center / 85% /* 404:url("data:image/gif;base64,R0lGODlhAQABAAAAACwAAAAAAQABAAA=") */ rgba(255,255,255,255)
}

.home-top-entry .game-wrapper .ag-card-img_mk {
    background: no-repeat center / 85% /* 404:url("data:image/gif;base64,R0lGODlhAQABAAAAACwAAAAAAQABAAA=") */ rgba(255,255,255,0)
}

.home-top-entry .game-wrapper .ag-card-img_jiuyou {
    background: no-repeat center / 85% url('./jiuyoulogo.png') rgba(255,255,255,0)
}

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

.home-top-entry .game-wrapper .ag-card-img_wktiyu {
    background: no-repeat center / 85% /* 404:url("data:image/gif;base64,R0lGODlhAQABAAAAACwAAAAAAQABAAA=") */ rgba(255,255,255,255)
}

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

.home-top-entry .game-wrapper .ag-card-img_jbo {
    background: no-repeat center / 85% /* 404:url("data:image/gif;base64,R0lGODlhAQABAAAAACwAAAAAAQABAAA=") */ rgba(255,255,255,.05)
}

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

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

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

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

.home-top-entry .game-wrapper .ag-card-content1 p {
    font-size: 12px;
    color: #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-color: rgb(255 255 255 / 4%)
}

.home-top-entry .game-wrapper .ag-card-arrow span {
    transform: rotate(90deg);
    color: #7b7b9d;
    font-size: 24px
}

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

.home-top-entry .game-wrapper .ag-card.ag-qj {
    background-image: /* 404:url("data:image/gif;base64,R0lGODlhAQABAAAAACwAAAAAAQABAAA=") */
}

.home-top-entry .game-wrapper .ag-card.ag-in {
    background-image: /* 404:url("data:image/gif;base64,R0lGODlhAQABAAAAACwAAAAAAQABAAA=") */
}

.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;
    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 .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 {
    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% /* 404:url("data:image/gif;base64,R0lGODlhAQABAAAAACwAAAAAAQABAAA=") */, linear-gradient(90deg,#3045d1 0%,#394fe3 100%)
}

.home_page .game_item_2 {
    background: no-repeat right / auto 100% /* 404:url("data:image/gif;base64,R0lGODlhAQABAAAAACwAAAAAAQABAAA=") */, linear-gradient(90deg,#f77502 0%,#faaa64 100%)
}

.home_page .game_item_3 {
    background: no-repeat right / auto 100% /* 404:url("data:image/gif;base64,R0lGODlhAQABAAAAACwAAAAAAQABAAA=") */, linear-gradient(90deg,#00c0de 0%,#8dfcfc 100%)
}

.home_page .game_item_4 {
    background: no-repeat right / auto 100% /* 404:url("data:image/gif;base64,R0lGODlhAQABAAAAACwAAAAAAQABAAA=") */, linear-gradient(90deg,#720dff 0%,#8a41f0 100%)
}

.home_page .game_item_5 {
    background: no-repeat right / auto 100% /* 404:url("data:image/gif;base64,R0lGODlhAQABAAAAACwAAAAAAQABAAA=") */, linear-gradient(90deg,#8ab5ff 0%,#8ab5ff 100%)
}

.home_page .game_item_6 {
    background: no-repeat right / auto 100% /* 404:url("data:image/gif;base64,R0lGODlhAQABAAAAACwAAAAAAQABAAA=") */, linear-gradient(90deg,#1a6529 0%,#21ed50 100%)
}

.home_page .game_item_7 {
    background: no-repeat right / auto 100% /* 404:url("data:image/gif;base64,R0lGODlhAQABAAAAACwAAAAAAQABAAA=") */, linear-gradient(90deg,#1a6529 0%,#21ed50 100%)
}

.home_page .game_item_8 {
    background: no-repeat right / auto 100% /* 404:url("data:image/gif;base64,R0lGODlhAQABAAAAACwAAAAAAQABAAA=") */, linear-gradient(90deg,#1a6529 0%,#21ed50 100%)
}

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

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

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

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

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

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

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

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

@media screen and (max-width:960px) {
    .home_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
}

}

@-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(./background.png);
    font-size: 14px;
    color: #fff;
    color: var(--app-color);
    background-color: #121E36FF;
    background-color: var(--app-background-color);
    font-family: 'Montserrat', "Open Sans", "PingFang SC", "Microsoft YaHei", "Helvetica Neue", "Hiragino Sans GB", "WenQuanYi Micro Hei", Arial, sans-serif;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

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

}

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

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

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

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

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

.content-wrapper {
    flex: 1 1
}

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

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

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

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

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

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

@media screen and (max-width:960px) {
    .home-top-entry .game-wrapper .game-wrapper_agbox {
        height: 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: 106px
}
        .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 .game-wrapper_agbox {
    grid-row: span 2;
    position: relative
}

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

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

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

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

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

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

.home-top-entry .game-wrapper_ag-join h2 {
    font-size: 44px;
    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_ag button {
    margin-top: 32px;
    border-radius: 4px;
    background: #ffffff;
    padding: 0 24px;
    font-size: 16px;
    line-height: 40px;
    color: #324466
}

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

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

.home-top-entry .game-wrapper .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;
    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_agbox {
        height: 329px
}
    .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_ag {
        display: grid;
        justify-items: start;
        padding: 16px 16px 32px;
        cursor: pointer
}
    .home-top-entry .game-wrapper_ag-join {
        margin-top: 0;
        grid-row-start: 1
}
    .home-top-entry .game-wrapper_ag-join h2 {
        font-size: 18px;
        padding-left: 16px;
        line-height: 1.5
}
    .home-top-entry .game-wrapper_ag-join p {
        white-space: pre-wrap;
        padding-left: 16px;
        font-size: 12px
}
    .home-top-entry .game-wrapper_ag-list {
        padding: 0;
        margin-top: 8px;
        flex-direction: column-reverse;
        padding-left: 16px
}
    .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: #fff9;
        margin-right: 8px
}
    .home-top-entry .game-wrapper_ag-list ul li i {
        margin: 0 8px
}
    .home-top-entry .game-wrapper_ag button {
        margin-top: 41px
}

}

@media screen and (max-width:468px) {
    .home-top-entry .game-wrapper .game-wrapper_ag {
        background: no-repeat right / contain url(./ag-66.png), no-repeat top / cover , linear-gradient(129.67deg,rgb(255 255 255 / 5%) 0%,rgb(255 255 255 / 5%) 51%,rgb(0 0 0 / 0%) 100%)
}
    .home-top-entry .game-wrapper .ag-card-content h5 {
        font-size: 18px;
        line-height: 26px
}
    .home-top-entry .game-wrapper .ag-card-content ul,
    .home-top-entry .game-wrapper .ag-card-content p {
        font-size: 12px
}

}

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

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

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

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

}

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

}

.main_footer {
    margin: 20px 0;
    text-align: center;
    font-size: 14px
}