.pre-loader-enter-active,
    .pre-loader-leave-active {
        transition: opacity .3s
    }

    .pre-loader-enter-from,
    .pre-loader-leave-to {
        opacity: 0
    }

    .g4loader {
        z-index: 999;
        background-color: #161921;
        justify-content: center;
        align-items: center;
        width: 100vw;
        height: 100vh;
        display: flex;
        position: fixed;
        top: 0;
        left: 0;
        overflow: hidden
    }

    .g4loader svg {
        width: 300px
    }

    @keyframes stroke-rot {
        0% {
            transform: rotate(0)
        }

        to {
            transform: rotate(1turn)
        }
    }

    .g4loader svg {
        fill: #3b4049
    }

    @keyframes stroke-load {
        0% {
            fill: #3b4049;
            stroke-dasharray: 0 396.769
        }

        12.5% {
            fill: #30353e
        }

        25% {
            fill: #3b4049
        }

        37.5% {
            fill: #30353e
        }

        50% {
            fill: #3b4049;
            stroke-dasharray: 793.538 396.769
        }

        62.5% {
            fill: #30353e
        }

        75% {
            fill: #3b4049
        }

        87.5% {
            fill: #30353e
        }

        to {
            fill: #3b4049;
            stroke-dasharray: 0 396.769
        }
    }

    .g4loader svg linearGradient {
        animation: 3.5s linear infinite stroke-rot
    }

    .g4loader svg path {
        stroke-width: 2px;
        animation: 7s linear infinite stroke-load;
        stroke: url(#grad1) !important
    }


    .grid {
        flex-wrap: wrap;
        align-content: flex-start;
        align-items: flex-end;
        width: 100%
    }

    .grid,
    .grid .slot.flex {
        display: flex
    }

    .grid .slot.md-0 {
        width: 0
    }

    .grid .slot.md-1 {
        width: 8.33333%
    }

    .grid .slot.md-2 {
        width: 16.6667%
    }

    .grid .slot.md-3 {
        width: 25%
    }

    .grid .slot.md-4 {
        width: 33.3333%
    }

    .grid .slot.md-5 {
        width: 41.6667%
    }

    .grid .slot.md-6 {
        width: 50%
    }

    .grid .slot.md-7 {
        width: 58.3333%
    }

    .grid .slot.md-8 {
        width: 66.6667%
    }

    .grid .slot.md-9 {
        width: 75%
    }

    .grid .slot.md-10 {
        width: 83.3333%
    }

    .grid .slot.md-11 {
        width: 91.6667%
    }

    .grid .slot.md-12 {
        width: 100%
    }

    @media only screen and (width<=1200px) {
        .grid .slot.sm-0 {
            width: 0
        }

        .grid .slot.sm-1 {
            width: 8.33333%
        }

        .grid .slot.sm-2 {
            width: 16.6667%
        }

        .grid .slot.sm-3 {
            width: 25%
        }

        .grid .slot.sm-4 {
            width: 33.3333%
        }

        .grid .slot.sm-5 {
            width: 41.6667%
        }

        .grid .slot.sm-6 {
            width: 50%
        }

        .grid .slot.sm-7 {
            width: 58.3333%
        }

        .grid .slot.sm-8 {
            width: 66.6667%
        }

        .grid .slot.sm-9 {
            width: 75%
        }

        .grid .slot.sm-10 {
            width: 83.3333%
        }

        .grid .slot.sm-11 {
            width: 91.6667%
        }

        .grid .slot.sm-12 {
            width: 100%
        }
    }

    @media only screen and (width<=800px) {
        .grid .slot.xs-0 {
            width: 0
        }

        .grid .slot.xs-1 {
            width: 8.33333%
        }

        .grid .slot.xs-2 {
            width: 16.6667%
        }

        .grid .slot.xs-3 {
            width: 25%
        }

        .grid .slot.xs-4 {
            width: 33.3333%
        }

        .grid .slot.xs-5 {
            width: 41.6667%
        }

        .grid .slot.xs-6 {
            width: 50%
        }

        .grid .slot.xs-7 {
            width: 58.3333%
        }

        .grid .slot.xs-8 {
            width: 66.6667%
        }

        .grid .slot.xs-9 {
            width: 75%
        }

        .grid .slot.xs-10 {
            width: 83.3333%
        }

        .grid .slot.xs-11 {
            width: 91.6667%
        }

        .grid .slot.xs-12 {
            width: 100%
        }
    }

    .container {
        width: 1500px;
        max-width: calc(100% - 40px);
        margin: 0 auto
    }

    .full {
        width: 100%
    }

    .v-popper--theme-dropdown .v-popper__wrapper,
    .v-popper--theme-image-tooltip .v-popper__wrapper,
    .v-popper--theme-super-drop .v-popper__wrapper {
        transition: transform .2s ease-out, opacity .15s ease-out
    }

    .v-popper--theme-dropdown.v-popper__popper--show-from .v-popper__wrapper,
    .v-popper--theme-image-tooltip.v-popper__popper--show-from .v-popper__wrapper,
    .v-popper--theme-super-drop.v-popper__popper--show-from .v-popper__wrapper {
        opacity: 0;
        transform: scale(.75)
    }

    .v-popper--theme-dropdown.v-popper__popper--show-to .v-popper__wrapper,
    .v-popper--theme-image-tooltip.v-popper__popper--show-to .v-popper__wrapper,
    .v-popper--theme-super-drop.v-popper__popper--show-to .v-popper__wrapper {
        opacity: 1;
        transform: none
    }

    .v-popper--theme-dropdown.v-popper__popper--hide-to .v-popper__wrapper,
    .v-popper--theme-image-tooltip.v-popper__popper--hide-to .v-popper__wrapper,
    .v-popper--theme-super-drop.v-popper__popper--hide-to .v-popper__wrapper {
        opacity: 0;
        transform: scale(.75)
    }

    .v-popper--theme-dropdown .v-popper__arrow-container,
    .v-popper--theme-image-tooltip .v-popper__arrow-container,
    .v-popper--theme-super-drop .v-popper__arrow-container {
        pointer-events: none
    }

    .v-popper--theme-dropdown .v-popper__inner,
    .v-popper--theme-image-tooltip .v-popper__inner,
    .v-popper--theme-super-drop .v-popper__inner {
        box-shadow: none;
        background: 0 0;
        border: none;
        border-radius: 0
    }

    .v-popper--theme-dropdown .v-popper__arrow-outer,
    .v-popper--theme-image-tooltip .v-popper__arrow-outer,
    .v-popper--theme-super-drop .v-popper__arrow-outer {
        display: none
    }

    .v-popper--theme-dropdown .v-popper__arrow-inner,
    .v-popper--theme-image-tooltip .v-popper__arrow-inner,
    .v-popper--theme-super-drop .v-popper__arrow-inner {
        visibility: visible;
        z-index: -1;
        background-color: #4b5280;
        border: none;
        border-radius: 2px;
        width: 10px;
        height: 10px;
        position: absolute
    }

    .v-popper--theme-dropdown[data-popper-placement^=top] .v-popper__wrapper,
    .v-popper--theme-image-tooltip[data-popper-placement^=top] .v-popper__wrapper,
    .v-popper--theme-super-drop[data-popper-placement^=top] .v-popper__wrapper {
        transform-origin: bottom
    }

    .v-popper--theme-dropdown[data-popper-placement^=top] .v-popper__arrow-inner,
    .v-popper--theme-image-tooltip[data-popper-placement^=top] .v-popper__arrow-inner,
    .v-popper--theme-super-drop[data-popper-placement^=top] .v-popper__arrow-inner {
        top: -5px;
        left: 50%;
        transform: translate(-50%)rotate(45deg)
    }

    .v-popper--theme-dropdown[data-popper-placement=top-start] .v-popper__wrapper,
    .v-popper--theme-image-tooltip[data-popper-placement=top-start] .v-popper__wrapper,
    .v-popper--theme-super-drop[data-popper-placement=top-start] .v-popper__wrapper {
        transform-origin: 0 100%
    }

    .v-popper--theme-dropdown[data-popper-placement=top-end] .v-popper__wrapper,
    .v-popper--theme-image-tooltip[data-popper-placement=top-end] .v-popper__wrapper,
    .v-popper--theme-super-drop[data-popper-placement=top-end] .v-popper__wrapper {
        transform-origin: 100% 100%
    }

    .v-popper--theme-dropdown[data-popper-placement^=bottom] .v-popper__wrapper,
    .v-popper--theme-image-tooltip[data-popper-placement^=bottom] .v-popper__wrapper,
    .v-popper--theme-super-drop[data-popper-placement^=bottom] .v-popper__wrapper {
        transform-origin: top
    }

    .v-popper--theme-dropdown[data-popper-placement^=bottom] .v-popper__arrow-inner,
    .v-popper--theme-image-tooltip[data-popper-placement^=bottom] .v-popper__arrow-inner,
    .v-popper--theme-super-drop[data-popper-placement^=bottom] .v-popper__arrow-inner {
        bottom: -5px;
        left: 50%;
        transform: translate(-50%)rotate(45deg)
    }

    .v-popper--theme-dropdown[data-popper-placement=bottom-start] .v-popper__wrapper,
    .v-popper--theme-image-tooltip[data-popper-placement=bottom-start] .v-popper__wrapper,
    .v-popper--theme-super-drop[data-popper-placement=bottom-start] .v-popper__wrapper {
        transform-origin: 0 0
    }

    .v-popper--theme-dropdown[data-popper-placement=bottom-end] .v-popper__wrapper,
    .v-popper--theme-image-tooltip[data-popper-placement=bottom-end] .v-popper__wrapper,
    .v-popper--theme-super-drop[data-popper-placement=bottom-end] .v-popper__wrapper {
        transform-origin: 100% 0
    }

    .v-popper--theme-dropdown[data-popper-placement^=left] .v-popper__wrapper,
    .v-popper--theme-image-tooltip[data-popper-placement^=left] .v-popper__wrapper,
    .v-popper--theme-super-drop[data-popper-placement^=left] .v-popper__wrapper {
        transform-origin: 100%
    }

    .v-popper--theme-dropdown[data-popper-placement^=left] .v-popper__arrow-inner,
    .v-popper--theme-image-tooltip[data-popper-placement^=left] .v-popper__arrow-inner,
    .v-popper--theme-super-drop[data-popper-placement^=left] .v-popper__arrow-inner {
        top: 50%;
        left: -5px;
        transform: translateY(-50%)rotate(45deg)
    }

    .v-popper--theme-dropdown[data-popper-placement=left-start] .v-popper__wrapper,
    .v-popper--theme-image-tooltip[data-popper-placement=left-start] .v-popper__wrapper,
    .v-popper--theme-super-drop[data-popper-placement=left-start] .v-popper__wrapper {
        transform-origin: 100% 100%
    }

    .v-popper--theme-dropdown[data-popper-placement=left-end] .v-popper__wrapper,
    .v-popper--theme-image-tooltip[data-popper-placement=left-end] .v-popper__wrapper,
    .v-popper--theme-super-drop[data-popper-placement=left-end] .v-popper__wrapper {
        transform-origin: 100% 0
    }

    .v-popper--theme-dropdown[data-popper-placement^=right] .v-popper__wrapper,
    .v-popper--theme-image-tooltip[data-popper-placement^=right] .v-popper__wrapper,
    .v-popper--theme-super-drop[data-popper-placement^=right] .v-popper__wrapper {
        transform-origin: 0
    }

    .v-popper--theme-dropdown[data-popper-placement^=right] .v-popper__arrow-inner,
    .v-popper--theme-image-tooltip[data-popper-placement^=right] .v-popper__arrow-inner,
    .v-popper--theme-super-drop[data-popper-placement^=right] .v-popper__arrow-inner {
        top: 50%;
        right: -5px;
        transform: translateY(-50%)rotate(45deg)
    }

    .v-popper--theme-dropdown[data-popper-placement=right-start] .v-popper__wrapper,
    .v-popper--theme-image-tooltip[data-popper-placement=right-start] .v-popper__wrapper,
    .v-popper--theme-super-drop[data-popper-placement=right-start] .v-popper__wrapper {
        transform-origin: 0 100%
    }

    .v-popper--theme-dropdown[data-popper-placement=right-end] .v-popper__wrapper,
    .v-popper--theme-image-tooltip[data-popper-placement=right-end] .v-popper__wrapper,
    .v-popper--theme-super-drop[data-popper-placement=right-end] .v-popper__wrapper {
        transform-origin: 0 0
    }

    .v-popper--theme-super-drop .v-popper__arrow-inner {
        background: #6e6115
    }

    .v-popper--theme-image-tooltip .v-popper__arrow-inner {
        background: #202736
    }

    @font-face {
        font-display: swap;
        font-family: Switzer;
        font-style: normal;
        font-weight: 100;
        src: url(/fonts/Switzer-Thin.woff2)format("woff2"), url(/fonts/Switzer-Thin.ttf)format("truetype")
    }

    @font-face {
        font-display: swap;
        font-family: Switzer;
        font-style: italic;
        font-weight: 100;
        src: url(/fonts/Switzer-ThinItalic.woff2)format("woff2"), url(/fonts/Switzer-ThinItalic.ttf)format("truetype")
    }

    @font-face {
        font-display: swap;
        font-family: Switzer;
        font-style: normal;
        font-weight: 200;
        src: url(/fonts/Switzer-Extralight.woff2)format("woff2"), url(/fonts/Switzer-Extralight.ttf)format("truetype")
    }

    @font-face {
        font-display: swap;
        font-family: Switzer;
        font-style: italic;
        font-weight: 200;
        src: url(/fonts/Switzer-ExtralightItalic.woff2)format("woff2"), url(/fonts/Switzer-ExtralightItalic.ttf)format("truetype")
    }

    @font-face {
        font-display: swap;
        font-family: Switzer;
        font-style: normal;
        font-weight: 300;
        src: url(/fonts/Switzer-Light.woff2)format("woff2"), url(/fonts/Switzer-Light.ttf)format("truetype")
    }

    @font-face {
        font-display: swap;
        font-family: Switzer;
        font-style: italic;
        font-weight: 300;
        src: url(/fonts/Switzer-LightItalic.woff2)format("woff2"), url(/fonts/Switzer-LightItalic.ttf)format("truetype")
    }

    @font-face {
        font-display: swap;
        font-family: Switzer;
        font-style: normal;
        font-weight: 400;
        src: url(/fonts/Switzer-Regular.woff2)format("woff2"), url(/fonts/Switzer-Regular.ttf)format("truetype")
    }

    @font-face {
        font-display: swap;
        font-family: Switzer;
        font-style: italic;
        font-weight: 400;
        src: url(/fonts/Switzer-Italic.woff2)format("woff2"), url(/fonts/Switzer-Italic.ttf)format("truetype")
    }

    @font-face {
        font-display: swap;
        font-family: Switzer;
        font-style: normal;
        font-weight: 500;
        src: url(/fonts/Switzer-Medium.woff2)format("woff2"), url(/fonts/Switzer-Medium.ttf)format("truetype")
    }

    @font-face {
        font-display: swap;
        font-family: Switzer;
        font-style: italic;
        font-weight: 500;
        src: url(/fonts/Switzer-MediumItalic.woff2)format("woff2"), url(/fonts/Switzer-MediumItalic.ttf)format("truetype")
    }

    @font-face {
        font-display: swap;
        font-family: Switzer;
        font-style: normal;
        font-weight: 600;
        src: url(/fonts/Switzer-Semibold.woff2)format("woff2"), url(/fonts/Switzer-Semibold.ttf)format("truetype")
    }

    @font-face {
        font-display: swap;
        font-family: Switzer;
        font-style: italic;
        font-weight: 600;
        src: url(/fonts/Switzer-SemiboldItalic.woff2)format("woff2"), url(/fonts/Switzer-SemiboldItalic.ttf)format("truetype")
    }

    @font-face {
        font-display: swap;
        font-family: Switzer;
        font-style: normal;
        font-weight: 700;
        src: url(/fonts/Switzer-Bold.woff2)format("woff2"), url(/fonts/Switzer-Bold.ttf)format("truetype")
    }

    @font-face {
        font-display: swap;
        font-family: Switzer;
        font-style: italic;
        font-weight: 700;
        src: url(/fonts/Switzer-BoldItalic.woff2)format("woff2"), url(/fonts/Switzer-BoldItalic.ttf)format("truetype")
    }

    @font-face {
        font-display: swap;
        font-family: Switzer;
        font-style: normal;
        font-weight: 800;
        src: url(/fonts/Switzer-Extrabold.woff2)format("woff2"), url(/fonts/Switzer-Extrabold.ttf)format("truetype")
    }

    @font-face {
        font-display: swap;
        font-family: Switzer;
        font-style: italic;
        font-weight: 800;
        src: url(/fonts/Switzer-ExtraboldItalic.woff2)format("woff2"), url(/fonts/Switzer-ExtraboldItalic.ttf)format("truetype")
    }

    @font-face {
        font-display: swap;
        font-family: Switzer;
        font-style: normal;
        font-weight: 900;
        src: url(/fonts/Switzer-Black.woff2)format("woff2"), url(/fonts/Switzer-Black.ttf)format("truetype")
    }

    @font-face {
        font-display: swap;
        font-family: Switzer;
        font-style: italic;
        font-weight: 900;
        src: url(/fonts/Switzer-BlackItalic.woff2)format("woff2"), url(/fonts/Switzer-BlackItalic.ttf)format("truetype")
    }

    :root {
        --app-height: 100%;
        --event_a_active: 255, 255, 255;
        --event_b_active: 255, 255, 255;
        --event_main_active: 255, 255, 255;
        --event_a: 255, 255, 255;
        --event_b: 255, 255, 255;
        --event_main: 255, 255, 255
    }

    body.creator-mode [data-creator-hide] {
        visibility: hidden !important
    }

    body.creator-mode [data-creator-hide=remove] {
        display: none !important
    }

    @media only screen and (width<=900px) {
        body:has(.global-inv.show) {
            padding-right: var(--scrollbar-width);
            overflow: hidden
        }
    }

    @media only screen and (width<=900px) and (hover:none) {
        body:has(.global-inv.show) {
            padding-right: 0 !important
        }
    }

    @media (hover:none) {
        :is(body:has(.navigation-bottom-bar-menu), body:has(.popup_box)) {
            padding-right: 0 !important
        }
    }

    @media only screen and (width<=900px) {
        body:has(.notifications) {
            padding-right: var(--scrollbar-width);
            overflow: hidden
        }
    }

    @media only screen and (width<=900px) and (hover:none) {
        body:has(.notifications) {
            padding-right: 0 !important
        }
    }

    * {
        box-shadow: none;
        box-sizing: border-box;
        font-optical-sizing: auto;
        text-rendering: geometricprecision;
        -webkit-tap-highlight-color: transparent;
        background: 0 0;
        border: none;
        outline: none;
        margin: 0;
        padding: 0;
        text-decoration: none;
        list-style: none
    }

    a,
    b,
    body,
    button,
    p,
    span {
        color: #fff
    }

    html {
        background-color: #191e2a
    }

    body {
        color: #fff;
        touch-action: manipulation;
        background-color: #101319;
        min-height: 100vh;
        padding-right: 0;
        font-family: "Exo 2", sans-serif;
        font-size: 14px;
        font-style: normal;
        font-weight: 400;
        text-decoration: none;
        overflow-x: hidden
    }

    @media only screen and (width<=800px) {
        body {
            margin-right: 0
        }
    }

    body:has(#__nuxt .website.lock) {
        overflow: hidden
    }

    input[type=number] {
        -moz-appearance: textfield
    }

    .tooltip-text,
    .tooltip-text b {
        letter-spacing: .01px;
        font-size: 14px;
        font-weight: 600;
        line-height: 20px
    }

    .tooltip-text b {
        color: #b055ff
    }

    .v-popper__inner {
        box-shadow: none;
        background: 0 0;
        border-radius: 0;
        border: none !important
    }

    .v-popper--theme-dropdown .v-popper__arrow-container {
        pointer-events: none
    }

    .v-popper--theme-dropdown .v-popper__arrow-outer {
        display: none
    }

    .v-popper--theme-dropdown .v-popper__arrow-inner {
        z-index: -1;
        background-color: #4b5280;
        border: none;
        border-radius: 2px;
        width: 10px;
        height: 10px;
        position: absolute
    }

    .v-popper--theme-dropdown[data-popper-placement^=top] .v-popper__arrow-inner {
        top: -5px;
        left: 50%;
        transform: translate(-50%)rotate(45deg)
    }

    .v-popper--theme-dropdown[data-popper-placement^=bottom] .v-popper__arrow-inner {
        bottom: -5px;
        left: 50%;
        transform: translate(-50%)rotate(45deg)
    }

    .v-popper--theme-dropdown[data-popper-placement^=left] .v-popper__arrow-inner {
        top: 50%;
        left: -5px;
        transform: translateY(-50%)rotate(45deg)
    }

    .v-popper--theme-dropdown[data-popper-placement^=right] .v-popper__arrow-inner {
        top: 50%;
        right: -5px;
        transform: translateY(-50%)rotate(45deg)
    }

    .v-popper__popper--no-positioning {
        z-index: 9999;
        align-items: flex-end;
        width: 100%;
        height: 100%;
        display: flex;
        position: fixed;
        top: 0;
        left: 0
    }

    .v-popper__popper--no-positioning .v-popper__backdrop {
        background: #05060fbf;
        display: block
    }

    .v-popper__popper--no-positioning .v-popper__wrapper {
        pointer-events: auto;
        width: 100%;
        transition: transform .3s ease-in-out
    }

    .v-popper__popper--no-positioning.v-popper__popper--hidden .v-popper__wrapper {
        transform: translateY(100%)
    }


    .PAGE_ERROR {
        background-blend-mode: luminosity;
        background-color: #101319;
        background-image: none;
        background-position: top;
        background-size: 100%;
        height: 100vh;
        position: relative
    }

    .PAGE_ERROR,
    .PAGE_ERROR .maintenance-view {
        background-repeat: no-repeat;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 100%;
        display: flex
    }

    .PAGE_ERROR .maintenance-view {
        background-image: url(/img/technical_break.jpeg?v=2);
        background-position: 50%;
        background-size: cover;
        height: 100%
    }

    @media only screen and (width<=900px) {
        .PAGE_ERROR .maintenance-view {
            background-image: url(/img/technical_break_mobile.png)
        }
    }

    .PAGE_ERROR .maintenance-view .maintenance-view-container {
        border-radius: 12px;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 24px;
        display: flex
    }

    .PAGE_ERROR .maintenance-view .maintenance-view-container>img {
        width: 289px;
        height: 52px;
        margin-top: -76px;
        margin-bottom: 24px
    }

    @media only screen and (width<=900px) {
        .PAGE_ERROR .maintenance-view .maintenance-view-container>img {
            width: 222px;
            height: 40px;
            margin-top: -46px;
            margin-bottom: 16px
        }
    }

    .PAGE_ERROR .maintenance-view .maintenance-view-container h1,
    .PAGE_ERROR .maintenance-view .maintenance-view-container p {
        text-align: center;
        font-family: Switzer, sans-serif
    }

    .PAGE_ERROR .maintenance-view .maintenance-view-container h1 {
        letter-spacing: -.01px;
        margin-bottom: 16px;
        font-size: 40px;
        font-weight: 700;
        line-height: 52px
    }

    @media only screen and (width<=900px) {
        .PAGE_ERROR .maintenance-view .maintenance-view-container h1 {
            letter-spacing: -.01px;
            margin-bottom: 8px;
            font-size: 32px;
            font-weight: 700;
            line-height: 44px
        }
    }

    .PAGE_ERROR .maintenance-view .maintenance-view-container p {
        letter-spacing: .01px;
        margin-bottom: 24px;
        font-size: 16px;
        font-weight: 500;
        line-height: 24px
    }

    @media only screen and (width<=900px) {
        .PAGE_ERROR .maintenance-view .maintenance-view-container p {
            margin-bottom: 16px
        }

        .PAGE_ERROR .maintenance-view .maintenance-view-container p br {
            display: none
        }
    }

    .PAGE_ERROR .maintenance-view .maintenance-view-container footer {
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        gap: 8px;
        width: 100%;
        display: flex
    }

    .PAGE_ERROR .maintenance-view .maintenance-view-container footer b {
        cursor: pointer;
        transition: color .3s
    }

    .PAGE_ERROR .maintenance-view .maintenance-view-container footer b:hover {
        color: #31bbff
    }

    .PAGE_ERROR .maintenance-view .maintenance-view-container footer>img {
        height: 32px;
        margin-bottom: 24px
    }

    .PAGE_ERROR .maintenance-view .maintenance-view-container footer button {
        cursor: pointer;
        border-radius: 8px;
        align-items: center;
        gap: 12px;
        height: 44px;
        min-height: 44px;
        padding: 12px 20px;
        transition: transform .15s, filter .3s;
        display: flex
    }

    .PAGE_ERROR .maintenance-view .maintenance-view-container footer button i {
        background-color: #fff;
        width: 20px;
        height: 20px;
        display: block;
        -webkit-mask-position: 50%;
        mask-position: 50%;
        -webkit-mask-size: 16px;
        mask-size: 16px;
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat
    }

    .PAGE_ERROR .maintenance-view .maintenance-view-container footer button span {
        color: #fff;
        letter-spacing: .01px;
        font-size: 14px;
        font-weight: 600;
        line-height: 20px
    }

    .PAGE_ERROR .maintenance-view .maintenance-view-container footer button {
        background-color: #b055ff
    }

    .PAGE_ERROR .maintenance-view .maintenance-view-container footer button:active {
        transform: scale(.975)translateZ(0)
    }

    .PAGE_ERROR .maintenance-view .maintenance-view-container footer button:hover {
        filter: brightness(1.075)
    }

    .PAGE_ERROR:not(:has(.maintenance-view)) img {
        width: 160px;
        margin-bottom: 40px
    }

    .PAGE_ERROR:not(:has(.maintenance-view)) img.img_404 {
        width: 771px;
        max-width: 100%;
        margin-bottom: 0
    }

    .PAGE_ERROR:not(:has(.maintenance-view)) img.error-500 {
        width: 420px;
        max-width: 100%;
        margin-bottom: 0
    }

    .PAGE_ERROR:not(:has(.maintenance-view)) img.error-maintenance {
        width: 128px;
        max-width: 100%;
        margin-bottom: 0
    }

    .PAGE_ERROR:not(:has(.maintenance-view)) .G_Text.error-title {
        margin-bottom: 24px;
        position: relative
    }

    .PAGE_ERROR:not(:has(.maintenance-view)) .G_Text.error-title .G_Text-content {
        font-size: 32px;
        font-weight: 700
    }

    .PAGE_ERROR:not(:has(.maintenance-view)):has(.img_404) {
        background-image: none !important
    }

    .PAGE_ERROR:not(:has(.maintenance-view)):has(.img_404) .G_Text.error-title {
        margin-bottom: 24px
    }

    .PAGE_ERROR:not(:has(.maintenance-view)):has(.img_404) .G_Text.error-title .G_Text-content {
        font-size: 32px;
        font-weight: 700
    }

    .PAGE_ERROR:not(:has(.maintenance-view)):has(.img_404) .G_Text.error-desc .G_Text-content {
        color: #8892a5;
        font-size: 20px;
        font-weight: 500
    }

    .PAGE_ERROR:not(:has(.maintenance-view)) .G_Text.error-desc {
        max-width: 520px;
        margin-bottom: 20px;
        position: relative
    }

    .PAGE_ERROR:not(:has(.maintenance-view)) .G_Text.error-desc .G_Text-content {
        color: #8892a5;
        font-size: 20px;
        font-weight: 500
    }

    .PAGE_ERROR:not(:has(.maintenance-view)) nav {
        margin-bottom: 0
    }

    .PAGE_ERROR:not(:has(.maintenance-view)) nav {
        background-color: #101319;
        border-radius: 16px;
        margin: 12px;
        position: relative;
        padding: 0 !important
    }


    .info-bar-bonus {
        background: linear-gradient(90deg, #da22ff, #9733ee);
        justify-content: center;
        align-items: center;
        gap: 24px;
        width: 100%;
        height: 54px;
        display: flex;
        overflow: hidden
    }

    @media only screen and (width<=900px) {
        .info-bar-bonus {
            gap: 8px;
            height: 52px;
            padding: 0 10px
        }
    }

    .info-bar-bonus .info-bar-bonus-asset-left .info-bar-bonus-asset-img,
    .info-bar-bonus .info-bar-bonus-asset-right .info-bar-bonus-asset-img {
        height: 54px;
        display: flex
    }

    @media only screen and (width<=1100px) {

        .info-bar-bonus .info-bar-bonus-asset-left,
        .info-bar-bonus .info-bar-bonus-asset-right {
            display: none
        }
    }

    .info-bar-bonus .info-bar-bonus-asset-logo {
        height: 22px
    }

    @media only screen and (width<=900px) {
        .info-bar-bonus .info-bar-bonus-asset-logo {
            height: 10px;
            margin-right: auto
        }
    }

    .info-bar-bonus .info-bar-bonus-bonus {
        align-items: center;
        gap: 16px;
        display: flex
    }

    .info-bar-bonus .info-bar-bonus-bonus .info-bar-bonus-bonus-text:not(.__bold) .G_Text-content {
        color: #fff;
        font-size: 16px;
        font-weight: 700
    }

    .info-bar-bonus .info-bar-bonus-bonus .info-bar-bonus-bonus-text.__bold .G_Text-content {
        color: #fccb13;
        font-size: 32px;
        font-style: italic;
        font-weight: 900
    }

    @media only screen and (width<=1100px) {
        .info-bar-bonus .info-bar-bonus-bonus {
            display: none
        }
    }

    .info-bar-bonus .info-bar-bonus-asset-timer {
        align-items: center;
        gap: 12px;
        display: flex
    }

    .info-bar-bonus .info-bar-bonus-asset-timer .info-bar-bonus-asset-timer-box {
        border: 1px solid #fff;
        border-radius: 6px;
        align-items: center;
        gap: 8px;
        width: 80px;
        height: 36px;
        padding: 0 8px;
        display: flex
    }

    @media only screen and (width<=900px) {
        .info-bar-bonus .info-bar-bonus-asset-timer .info-bar-bonus-asset-timer-box {
            flex-direction: column;
            justify-content: center;
            gap: 4px;
            width: 32px;
            height: 32px;
            padding: 0
        }
    }

    .info-bar-bonus .info-bar-bonus-asset-timer .info-bar-bonus-asset-timer-box .info-bar-bonus-asset-timer-box-value .G_Text-content {
        font-size: 20px;
        font-weight: 700
    }

    @media only screen and (width<=900px) {
        .info-bar-bonus .info-bar-bonus-asset-timer .info-bar-bonus-asset-timer-box .info-bar-bonus-asset-timer-box-value .G_Text-content {
            font-size: 14px
        }
    }

    .info-bar-bonus .info-bar-bonus-asset-timer .info-bar-bonus-asset-timer-box .info-bar-bonus-asset-timer-box-title .G_Text-content {
        font-size: 12px;
        font-weight: 600
    }

    @media only screen and (width<=900px) {
        .info-bar-bonus .info-bar-bonus-asset-timer .info-bar-bonus-asset-timer-box .info-bar-bonus-asset-timer-box-title .G_Text-content {
            font-size: 8px;
            font-weight: 700
        }

        .info-bar-bonus .info-bar-bonus-asset-timer {
            gap: 8px
        }
    }


    .info-bar-discord-wrapper {
        width: 100%;
        height: 54px
    }

    @media only screen and (width<=1100px) {
        .info-bar-discord-wrapper {
            height: 52px
        }
    }

    .info-bar-discord-wrapper {
        transition: height .3s
    }

    .info-bar-discord {
        background-color: #101319;
        background-image: linear-gradient(#4770ff29, #4770ff29);
        justify-content: center;
        align-items: center;
        gap: 12px;
        width: 100%;
        height: 54px;
        min-height: 54px;
        padding: 0 50px 0 10px;
        display: flex;
        position: relative
    }

    @media only screen and (width<=900px) {
        .info-bar-discord {
            padding-right: 10px
        }
    }

    @media only screen and (width<=1100px) {
        .info-bar-discord {
            height: 52px;
            min-height: 52px
        }
    }

    .info-bar-discord .info-bar-discord-icon {
        background-color: #88a2ff;
        width: 16px;
        min-width: 16px
    }

    .info-bar-discord .info-bar-discord-close {
        justify-content: center;
        align-items: center;
        width: 40px;
        height: 40px;
        display: flex;
        position: absolute;
        top: 50%;
        right: 10px;
        transform: translateY(-50%)
    }

    .info-bar-discord .info-bar-discord-close .G_Icon {
        background-color: #fff;
        width: 12px;
        transition: background-color .3s
    }

    .info-bar-discord .info-bar-discord-close:hover .G_Icon {
        background-color: #31bbff
    }

    @media only screen and (width<=900px) {
        .info-bar-discord .info-bar-discord-close {
            display: none
        }
    }

    .info-bar-discord .info-bar-discord-desc .G_Text-content,
    .info-bar-discord .info-bar-discord-desc .G_Text-content b {
        font-size: 14px;
        font-weight: 600
    }

    @media only screen and (width<=1100px) {

        .info-bar-discord .info-bar-discord-desc .G_Text-content,
        .info-bar-discord .info-bar-discord-desc .G_Text-content b {
            font-size: 11px
        }
    }

    @media only screen and (width>=1101px) {
        .info-bar-discord .info-bar-discord-desc .G_Text-content br {
            display: none
        }
    }

    .info-bar-discord .info-bar-discord-desc .G_Text-content b {
        color: #88a2ff
    }

    .info-bar-discord .info-bar-discord-cta-mobile {
        color: #31bbff;
        white-space: nowrap;
        margin-left: auto;
        font-size: 12px;
        font-style: normal;
        font-weight: 600;
        text-decoration-line: underline;
        transition: opacity .3s
    }

    .info-bar-discord .info-bar-discord-cta-mobile:hover {
        opacity: .75
    }


    .info-bar-pass {
        background-image: url(/img/pass/info-bar-pass-2.webp?v=2);
        background-position: 50%;
        background-repeat: no-repeat;
        background-size: cover;
        justify-content: center;
        align-items: center;
        gap: 32px;
        width: 100%;
        height: 54px;
        padding: 0 58px;
        display: flex;
        overflow: hidden
    }

    .info-bar-pass__logo {
        height: 38px
    }

    @media only screen and (width<=1300px) {
        .info-bar-pass__logo {
            height: 24px
        }
    }

    @media only screen and (width<=900px) {
        .info-bar-pass__logo {
            height: 16px
        }
    }

    .info-bar-pass__desc {
        font-family: "Exo 2", sans-serif;
        font-size: 14px;
        font-style: normal;
        font-weight: 600
    }

    @media only screen and (width<=1300px) {
        .info-bar-pass__desc {
            font-size: 12px
        }
    }

    @media only screen and (width<=900px) {
        .info-bar-pass__desc {
            font-size: 11px
        }
    }

    .info-bar-pass__close {
        justify-content: center;
        align-items: center;
        width: 40px;
        height: 40px;
        display: flex;
        top: 50%;
        right: 10px;
        transform: translateY(-50%);
        position: absolute !important
    }

    .info-bar-pass__close .G_Icon {
        background-color: #fff;
        width: 12px;
        transition: opacity .3s
    }

    .info-bar-pass__close:hover .G_Icon {
        opacity: .75
    }

    @media only screen and (width<=900px) {
        .info-bar-pass__close {
            display: none
        }

        .info-bar-pass__cta {
            background-color: #0000 !important;
            height: auto !important;
            padding: 0 !important
        }

        .info-bar-pass__cta .button_text {
            text-transform: capitalize;
            font-size: 12px;
            font-weight: 600;
            text-decoration: underline;
            transition: filter .3s;
            color: #fff !important;
            letter-spacing: unset !important
        }

        .info-bar-pass__cta:hover .button_text {
            filter: brightness(1.1)
        }
    }

    @media only screen and (width<=1300px) {
        .info-bar-pass {
            gap: 16px
        }
    }

    @media only screen and (width<=900px) {
        .info-bar-pass {
            background-image: url(/img/pass/info-bar-pass-2-mobile.webp);
            gap: 10px;
            height: 52px;
            padding: 0 12px
        }
    }


    @media only screen and (width<=1100px) {
        .info-bar-limit {
            height: 52px
        }
    }

    .info-bar-limit {
        background-color: #fccb13;
        justify-content: center;
        align-items: center;
        gap: 12px;
        width: 100%;
        height: 54px;
        min-height: 54px;
        padding: 0 52px 0 12px;
        transition: height .3s;
        display: flex;
        position: relative
    }

    @media only screen and (width<=900px) {
        .info-bar-limit {
            padding-right: 12px
        }
    }

    .info-bar-limit .info-bar-limit-icon {
        color: #13161f;
        width: 20px;
        min-width: 20px;
        height: 20px
    }

    .info-bar-limit .button {
        width: max-content;
        min-width: 100px
    }

    @media only screen and (width<=900px) {
        .info-bar-limit .button {
            min-width: unset;
            margin-left: auto
        }
    }

    .info-bar-limit .info-bar-limit-close {
        justify-content: center;
        align-items: center;
        width: 40px;
        height: 40px;
        display: flex;
        position: absolute;
        top: 50%;
        right: 10px;
        transform: translateY(-50%)
    }

    .info-bar-limit .info-bar-limit-close .G_Icon {
        background-color: #13161f;
        width: 12px;
        transition: background-color .3s
    }

    .info-bar-limit .info-bar-limit-close:hover .G_Icon {
        background-color: #fff
    }

    @media only screen and (width<=900px) {
        .info-bar-limit .info-bar-limit-close {
            display: none
        }
    }

    .info-bar-limit .info-bar-limit-desc {
        color: #13161f;
        letter-spacing: .01px;
        font-size: 14px;
        font-weight: 600;
        line-height: 20px
    }

    @media only screen and (width<=900px) {
        .info-bar-limit .info-bar-limit-desc {
            letter-spacing: .02px;
            font-size: 12px;
            font-weight: 600;
            line-height: 16px
        }
    }


    .info-bar {
        overflow: hidden
    }

    .info-bar-enter-active,
    .info-bar-leave-active {
        transition: transform .3s
    }

    .info-bar-enter-from {
        transform: translateY(100%)
    }

    .info-bar-leave-to {
        transform: translateY(-100%)
    }

    .info-bar-clear {
        cursor: pointer;
        z-index: 100;
        justify-content: center;
        align-items: center;
        gap: 8px;
        height: 54px;
        padding: 10px;
        display: flex;
        position: absolute;
        top: 0;
        left: 0
    }

    .info-bar-clear .info-bar-clear__icon * {
        transition: fill .3s;
        fill: #9ba7bf !important
    }

    .info-bar-clear:hover .info-bar-clear__icon * {
        fill: #31bbff !important
    }

    @media only screen and (width<=900px) {
        .info-bar-clear {
            display: none
        }
    }

    .info-bar {
        flex-direction: column;
        width: 100%;
        transition: all .3s;
        display: flex;
        position: relative
    }

    .info-bar:has(div) {
        height: 54px
    }

    @media only screen and (width<=900px) {
        .info-bar:has(div) {
            height: 52px
        }
    }

    .info-bar:has(.info-bar-default) {
        height: 0
    }

    .info-bar .info-bar-default {
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 54px;
        display: flex
    }

    @media only screen and (width<=1100px) {
        .info-bar .info-bar-default {
            height: 52px
        }
    }

    .info-bar>* {
        backface-visibility: hidden;
        position: absolute;
        top: 0;
        left: 0
    }


    .livedrop-navigation__online {
        background-color: #191e2a;
        border-radius: 4px 4px 0 0;
        justify-content: center;
        align-items: center;
        gap: 6px;
        width: 100%;
        height: 48px;
        display: flex
    }

    .livedrop-navigation__online-icon {
        color: #64eb49
    }

    .livedrop-navigation__online-text {
        letter-spacing: .01px;
        font-size: 14px;
        font-weight: 600;
        line-height: 20px
    }


    .livedrop-navigation__mode-element {
        cursor: pointer;
        background-color: #191e2a;
        border-radius: 4px;
        flex: 1;
        justify-content: center;
        align-items: center;
        height: 48px;
        transition: background-color .3s ease-in-out, transform .2s ease-in-out;
        display: flex
    }

    .livedrop-navigation__mode-element-icon {
        color: #8892a5;
        width: 20px;
        height: 20px;
        transition: color .3s ease-in-out
    }

    .livedrop-navigation__mode-element:active {
        transform: scale(.95)
    }

    .livedrop-navigation__mode-element:hover {
        background-color: #31bbff29
    }

    .livedrop-navigation__mode-element.--active {
        background-color: #31bbff33
    }

    .livedrop-navigation__mode-element.--active .livedrop-navigation__mode-element-icon,
    .livedrop-navigation__mode-element:hover .livedrop-navigation__mode-element-icon {
        color: #31bbff
    }


    .livedrop-navigation__mode {
        gap: 4px;
        display: flex
    }


    .livedrop-navigation {
        flex-direction: column;
        gap: 4px;
        width: 100%;
        display: flex
    }

    .livedrop-navigation * {
        font-family: Switzer, sans-serif
    }


    .livedrop-slider-element__front {
        background-color: #13161f;
        width: 100%;
        height: 100%;
        padding: 8px;
        transition: transform .2s;
        position: absolute;
        top: 0;
        left: 0;
        overflow: hidden;
        transform: translateY(0)
    }

    .livedrop-slider-element__front-signet {
        aspect-ratio: 527/334;
        justify-content: center;
        align-items: center;
        width: calc(100% - 24px);
        display: flex;
        position: absolute;
        top: 18px;
        left: 12px
    }

    .livedrop-slider-element__front-signet-icon {
        aspect-ratio: 1;
        width: 100%;
        height: max-content;
        display: block;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translateY(-50%)translate(-50%)
    }

    .livedrop-slider-element.--hovered .livedrop-slider-element__front {
        transform: translateY(-100%)
    }

    .livedrop-slider-element__front-image {
        -o-object-fit: contain;
        object-fit: contain;
        -o-object-position: center;
        object-position: center;
        width: 100%;
        position: relative
    }

    .livedrop-slider-element__front-name {
        letter-spacing: 0;
        text-align: center;
        text-overflow: ellipsis;
        font-size: 10px;
        font-weight: 500;
        line-height: 14px;
        display: inline-block;
        position: absolute;
        bottom: 8px;
        left: 4px;
        right: 4px;
        overflow: hidden
    }

    .livedrop-slider-element__front-count {
        color: #9ba7bf;
        left: 6px
    }

    .livedrop-slider-element__front-count,
    .livedrop-slider-element__front-stattrack {
        letter-spacing: 0;
        font-size: 10px;
        font-weight: 500;
        line-height: 14px;
        position: absolute;
        top: 6px
    }

    .livedrop-slider-element__front-stattrack {
        color: #fccb13;
        right: 6px
    }

    .livedrop-slider-element.--size-sm .livedrop-slider-element__front {
        transform: unset;
        padding: 4px 12px
    }

    .livedrop-slider-element.--size-sm .livedrop-slider-element__front-signet {
        width: calc(100% - 36px);
        height: 100%;
        top: 0;
        left: 16px
    }

    .livedrop-slider-element.--size-sm .livedrop-slider-element__front-signet-icon {
        opacity: .5
    }

    .livedrop-slider-element.--size-sm .livedrop-slider-element__front-image {
        height: 100%
    }

    .livedrop-slider-element.--size-sm .livedrop-slider-element__front-count,
    .livedrop-slider-element.--size-sm .livedrop-slider-element__front-name,
    .livedrop-slider-element.--size-sm .livedrop-slider-element__front-stattrack {
        display: none
    }

    @media only screen and (width<=560px) {
        .livedrop-slider-element .livedrop-slider-element__front {
            transform: unset;
            padding: 4px 12px
        }

        .livedrop-slider-element .livedrop-slider-element__front-signet {
            width: calc(100% - 36px);
            height: 100%;
            top: 0;
            left: 16px
        }

        .livedrop-slider-element .livedrop-slider-element__front-signet-icon {
            opacity: .5
        }

        .livedrop-slider-element .livedrop-slider-element__front-image {
            height: 100%
        }

        .livedrop-slider-element .livedrop-slider-element__front-count,
        .livedrop-slider-element .livedrop-slider-element__front-name,
        .livedrop-slider-element .livedrop-slider-element__front-stattrack {
            display: none
        }
    }


    .livedrop-slider-element__back {
        background-color: #13161f;
        background-image: var(--v65d08ef8);
        flex-direction: column;
        justify-content: flex-end;
        gap: 4px;
        width: 100%;
        height: 100%;
        padding: 8px;
        display: flex;
        position: absolute;
        top: 0;
        left: 0
    }

    .livedrop-slider-element__back-status {
        width: 14px;
        height: 14px;
        position: absolute;
        top: 8px;
        left: 8px
    }

    .livedrop-slider-element__back-render {
        height: 70px;
        position: absolute;
        bottom: 0;
        right: 0
    }

    .livedrop-slider-element__back-username {
        letter-spacing: .02px;
        text-overflow: ellipsis;
        white-space: nowrap;
        width: 100%;
        font-size: 12px;
        font-weight: 600;
        line-height: 16px;
        position: relative;
        overflow: hidden
    }


    .livedrop-back-enter-active,
    .livedrop-back-leave-active {
        transition: transform .2s
    }

    .livedrop-back-enter-from,
    .livedrop-back-leave-to {
        transform: translateY(100%)
    }

    .livedrop-slider-element {
        contain: layout style paint;
        border-radius: 4px;
        flex-shrink: 0;
        width: 100px;
        min-width: 100px;
        position: relative;
        overflow: hidden
    }

    .livedrop-slider-element:active {
        opacity: .8
    }

    .livedrop-slider-element.--size-md {
        cursor: pointer;
        height: 100px
    }

    .livedrop-slider-element.--size-sm {
        pointer-events: none;
        height: 64px
    }

    @media only screen and (width<=560px) {
        .livedrop-slider-element {
            contain-intrinsic-size: 100px 64px;
            height: 64px;
            perspective: unset;
            pointer-events: none
        }

        .livedrop-slider-element .livedrop-slider-element__inner {
            transform: unset;
            transform-style: unset
        }
    }

    .livedrop-slider-element__inner {
        width: 100%;
        height: 100%;
        position: relative
    }


    .livedrop-item-enter-active {
        transition: opacity var(--slide-duration, .2s) ease, transform var(--slide-duration, .2s) ease
    }

    .livedrop-item-enter-from {
        opacity: 0;
        transform: scale(.8)
    }

    .livedrop-slider {
        contain: layout style paint;
        will-change: transform;
        height: 100px;
        position: relative;
        overflow: hidden
    }

    @media only screen and (width<=560px) {
        .livedrop-slider {
            height: 64px
        }
    }

    .livedrop-slider__list {
        flex-direction: row-reverse;
        justify-content: flex-end;
        gap: 4px;
        display: flex
    }

    .livedrop-slider__list.is-sliding {
        transition: transform var(--slide-duration, .7s) cubic-bezier(.25, .46, .45, .94);
        will-change: transform
    }


    .livedrop-pause {
        pointer-events: none;
        z-index: 2;
        background-color: #13161f99;
        border-radius: 0 4px 4px 0;
        justify-content: center;
        align-items: center;
        width: 44px;
        height: 100%;
        display: flex;
        position: absolute;
        top: 0;
        left: 0
    }

    .livedrop-pause-icon {
        color: #9ba7bf;
        width: 24px;
        height: 24px
    }

    .livedrop-pause-enter-active,
    .livedrop-pause-leave-active {
        transition: transform .3s
    }

    .livedrop-pause-enter-from,
    .livedrop-pause-leave-to {
        transform: translate(-100%)
    }


    .livedrop-banners__centered {
        contain: layout style paint;
        contain-intrinsic-size: 100px 100px;
        content-visibility: auto;
        cursor: pointer;
        background-color: #13161f;
        background-image: linear-gradient(#138bea, #3eadf2);
        border-radius: 4px;
        flex-direction: column;
        align-items: center;
        width: 100px;
        height: 100px;
        padding: 8px 6px;
        display: flex;
        position: relative;
        overflow: hidden;
        box-shadow: inset 0 0 21.9px 6px #b1fda114
    }

    .livedrop-banners__centered-video {
        pointer-events: none;
        z-index: 2;
        width: 100%;
        height: 100%;
        position: absolute;
        top: 25%;
        left: 0
    }

    .livedrop-banners__centered-video video {
        -o-object-fit: cover;
        object-fit: cover;
        width: 100%;
        height: 100%
    }

    .livedrop-banners__centered-title {
        letter-spacing: .01px;
        text-align: center;
        width: 100%;
        font-family: Switzer, sans-serif;
        font-size: 10px;
        font-weight: 700;
        line-height: 12px;
        display: inline-block;
        position: relative
    }

    .livedrop-banners__centered-title span {
        color: #64eb49
    }

    .livedrop-banners__centered-render {
        width: 84px;
        transition: transform .4s cubic-bezier(.47, 1.64, .41, .8)
    }

    .livedrop-banners__centered-cta {
        width: calc(100% - 12px);
        position: absolute;
        bottom: 8px;
        left: 6px;
        height: 24px !important;
        min-height: 24px !important
    }

    .livedrop-banners__centered:hover .livedrop-banners__centered-render {
        transform: scale(1.3)rotate(-5deg)
    }


    .livedrop-banners__badge {
        contain: layout style paint;
        contain-intrinsic-size: 100px 100px;
        content-visibility: auto;
        cursor: pointer;
        background-image: url(/img/live/banners/gift-backgorund.webp?v=3);
        background-position: 100%;
        background-size: 100%;
        border-radius: 4px;
        flex-direction: column;
        justify-content: flex-end;
        gap: 6px;
        width: 100px;
        height: 100px;
        padding: 8px 6px;
        transition: background-size .3s cubic-bezier(.47, 1.64, .41, .8);
        display: flex;
        position: relative;
        overflow: hidden
    }

    .livedrop-banners__badge:hover {
        background-size: 110%
    }

    .livedrop-banners__badge-video {
        pointer-events: none;
        z-index: 0;
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0
    }

    .livedrop-banners__badge-cylinder-wrap {
        perspective: 220px;
        pointer-events: none;
        z-index: 0;
        width: 50%;
        height: 300%;
        position: absolute;
        top: 0;
        left: 25%;
        transform: translate(-50%, -50%)rotate(20deg)rotateY(30deg)
    }

    .livedrop-banners__badge-cylinder,
    .livedrop-banners__badge-cylinder-wrap .livedrop-banners__badge-cylinder {
        transform-style: preserve-3d;
        animation: 14s linear infinite badge-cylinder-rotate;
        position: absolute;
        inset: 0
    }

    .livedrop-banners__badge-beam {
        background: radial-gradient(100% 45%, #c37eff 0, #c37eff66 40%, #0000 72%);
        height: 100%;
        animation: linear infinite badge-beam-pulse;
        position: absolute;
        top: 0;
        left: 50%
    }

    .livedrop-banners__badge-beam:first-child {
        width: 16.9px;
        margin-left: -8.45px;
        animation-duration: 2.3s;
        animation-delay: 0s;
        transform: rotateY(0)translateZ(85px)
    }

    .livedrop-banners__badge-beam:nth-child(2) {
        width: 33.8px;
        margin-left: -16.9px;
        animation-duration: 3.7s;
        animation-delay: -.6s;
        transform: rotateY(27.6923deg)translateZ(85px)
    }

    .livedrop-banners__badge-beam:nth-child(3) {
        width: 10.4px;
        margin-left: -5.2px;
        animation-duration: 1.9s;
        animation-delay: -1.2s;
        transform: rotateY(55.3846deg)translateZ(85px)
    }

    .livedrop-banners__badge-beam:nth-child(4) {
        width: 26px;
        margin-left: -13px;
        animation-duration: 3.1s;
        animation-delay: -1.8s;
        transform: rotateY(83.0769deg)translateZ(85px)
    }

    .livedrop-banners__badge-beam:nth-child(5) {
        width: 14.3px;
        margin-left: -7.15px;
        animation-duration: 2.8s;
        animation-delay: -2.4s;
        transform: rotateY(110.769deg)translateZ(85px)
    }

    .livedrop-banners__badge-beam:nth-child(6) {
        width: 31.2px;
        margin-left: -15.6px;
        animation-duration: 4.1s;
        animation-delay: -3s;
        transform: rotateY(138.462deg)translateZ(85px)
    }

    .livedrop-banners__badge-beam:nth-child(7) {
        width: 11.7px;
        margin-left: -5.85px;
        animation-duration: 2.1s;
        animation-delay: -3.6s;
        transform: rotateY(166.154deg)translateZ(85px)
    }

    .livedrop-banners__badge-beam:nth-child(8) {
        width: 23.4px;
        margin-left: -11.7px;
        animation-duration: 3.4s;
        animation-delay: -4.2s;
        transform: rotateY(193.846deg)translateZ(85px)
    }

    .livedrop-banners__badge-beam:nth-child(9) {
        width: 15.6px;
        margin-left: -7.8px;
        animation-duration: 2.6s;
        animation-delay: -4.8s;
        transform: rotateY(221.538deg)translateZ(85px)
    }

    .livedrop-banners__badge-beam:nth-child(10) {
        width: 28.6px;
        margin-left: -14.3px;
        animation-duration: 1.8s;
        animation-delay: -5.4s;
        transform: rotateY(249.231deg)translateZ(85px)
    }

    .livedrop-banners__badge-beam:nth-child(11) {
        width: 13px;
        margin-left: -6.5px;
        animation-duration: 3.9s;
        animation-delay: -6s;
        transform: rotateY(276.923deg)translateZ(85px)
    }

    .livedrop-banners__badge-beam:nth-child(12) {
        width: 26px;
        margin-left: -13px;
        animation-duration: 2.4s;
        animation-delay: -6.6s;
        transform: rotateY(304.615deg)translateZ(85px)
    }

    .livedrop-banners__badge-beam:nth-child(13) {
        width: 18.2px;
        margin-left: -9.1px;
        animation-duration: 3.2s;
        animation-delay: -7.2s;
        transform: rotateY(332.308deg)translateZ(85px)
    }

    .livedrop-banners__badge-badge {
        position: absolute;
        top: 8px;
        left: 6px
    }

    .livedrop-banners__badge-title {
        color: #e6e9ef;
        letter-spacing: 0;
        z-index: 2;
        font-size: 10px;
        font-weight: 700;
        line-height: 14px;
        display: block;
        position: relative
    }

    .livedrop-banners__badge-render {
        z-index: 2;
        width: 90px;
        transition: transform .4s cubic-bezier(.47, 1.64, .41, .8);
        position: absolute;
        top: 0;
        right: 0;
        transform: translate(20%)translateY(5%)
    }

    .livedrop-banners__badge-cta {
        z-index: 3;
        width: 100%;
        height: 24px !important;
        min-height: 24px !important
    }

    .livedrop-banners__badge:hover .livedrop-banners__badge-render {
        transform: scale(1.15)rotate(-10deg)translateY(20%)translate(5%)
    }

    @keyframes badge-cylinder-rotate {
        0% {
            transform: rotateY(0)
        }

        to {
            transform: rotateY(1turn)
        }
    }

    @keyframes badge-beam-pulse {

        0%,
        to {
            opacity: 1;
            scale: 1
        }

        50% {
            opacity: .25;
            scale: .88 .92
        }
    }


    .livedrop-banners__hide {
        cursor: pointer;
        background-color: #353a5a;
        border-radius: 0 4px 4px 0;
        justify-content: center;
        align-items: center;
        width: 26px;
        height: 100px;
        margin-left: -8px;
        padding-left: 4px;
        transition: background-color .2s ease-in-out, width .2s ease-in-out;
        display: flex
    }

    .livedrop-banners__hide-label {
        color: #fff;
        letter-spacing: 0;
        text-orientation: mixed;
        writing-mode: vertical-rl;
        font-size: 10px;
        font-weight: 700;
        line-height: 14px;
        display: block;
        transform: rotate(180deg)
    }

    .livedrop-banners__hide:hover {
        background-color: #4b5280;
        width: 24px
    }


    .livedrop-banners-enter-active,
    .livedrop-banners-leave-active {
        transition: opacity .3s, transform .3s
    }

    .livedrop-banners-enter-from,
    .livedrop-banners-leave-to {
        opacity: 0;
        transform: translate(-100%)
    }

    .livedrop-banners {
        background-color: #13161f;
        border-radius: 0 4px 4px 0;
        align-items: center;
        gap: 4px;
        display: flex;
        position: absolute;
        top: 0;
        left: 0
    }


    .livedrop-mode-enter-active,
    .livedrop-mode-leave-active {
        width: 100%;
        transition: transform .3s;
        position: absolute
    }

    .livedrop-mode-enter-from.__slider-all,
    .livedrop-mode-leave-to.__slider-all {
        transform: translateY(-100%)
    }

    .livedrop-mode-enter-from.__slider-best,
    .livedrop-mode-leave-to.__slider-best {
        transform: translateY(100%)
    }

    .livedrop {
        grid-template-columns: 120px 1fr;
        gap: 4px;
        padding: 4px 0 4px 4px;
        display: grid
    }

    @media only screen and (width<=560px) {
        .livedrop {
            pointer-events: none;
            grid-template-columns: 1fr
        }

        .livedrop__navigation {
            display: none
        }
    }

    .livedrop__slider {
        min-height: 100px;
        position: relative;
        overflow: hidden
    }

    @media only screen and (width<=560px) {
        .livedrop__slider {
            min-height: 64px
        }
    }

    .livedrop * {
        font-family: Switzer, sans-serif
    }


    .animated-number {
        color: inherit;
        font-family: inherit;
        font-size: inherit;
        font-weight: inherit;
        letter-spacing: inherit;
        line-height: inherit;
        vertical-align: bottom;
        white-space: nowrap;
        display: inline-block
    }


    .navigation-balance__amount-piggy-tooltip {
        color: #fff;
        letter-spacing: .02px;
        font-size: 12px;
        font-weight: 600;
        line-height: 16px
    }

    .navigation-balance {
        background: #64eb491f;
        border: 1px solid #0000;
        border-radius: 8px;
        height: 42px;
        transition: background-color .2s;
        position: relative;
        overflow: hidden
    }

    .navigation-balance__container {
        border-radius: 7px;
        justify-content: space-between;
        align-items: center;
        gap: 12px;
        height: 100%;
        padding: 6px 6px 6px 8px;
        display: flex;
        position: relative;
        overflow: hidden
    }

    .creator-mode .navigation-balance__container {
        filter: blur(5px);
        transition: filter .2s
    }

    .creator-mode .navigation-balance__container:hover {
        filter: blur()
    }

    .navigation-balance__amount-piggy,
    .navigation-balance__amount-wallet {
        align-items: center;
        display: flex
    }

    .navigation-balance__amount-wallet {
        gap: 4px
    }

    .navigation-balance__amount-piggy {
        color: #c1c8d7;
        cursor: pointer;
        gap: 2px
    }

    .navigation-balance__amount-piggy:hover {
        color: #fff;
        text-decoration: underline
    }

    .navigation-balance__amount-wallet-icon {
        color: #64eb49;
        width: 15px;
        height: 15px
    }

    @media only screen and (width<=900px) {
        .navigation-balance__amount-wallet-icon {
            display: none
        }
    }

    .navigation-balance__amount-wallet-value {
        color: #64eb49;
        letter-spacing: .01px;
        white-space: nowrap;
        font-size: 14px;
        font-weight: 600;
        line-height: 20px
    }

    @media only screen and (width<=900px) {
        .navigation-balance__amount-wallet-value {
            letter-spacing: .01px;
            font-size: 14px;
            font-weight: 600;
            line-height: 20px
        }
    }

    .navigation-balance__amount-piggy-icon {
        color: inherit;
        width: 10px;
        height: 10px
    }

    .navigation-balance__amount-piggy-value {
        color: inherit;
        white-space: nowrap;
        font-family: Switzer, sans-serif;
        font-size: 10px;
        font-style: normal;
        font-weight: 600
    }

    .navigation-balance__amount-piggy-arrow {
        color: #9ba7bf;
        width: 12px;
        height: 12px;
        margin-left: -2px
    }

    .navigation-balance__amount:has(.navigation-balance__amount-piggy) .navigation-balance__amount-wallet-icon {
        width: 9.5px;
        height: 9.5px
    }

    .navigation-balance__amount:has(.navigation-balance__amount-piggy) .navigation-balance__amount-wallet-value {
        letter-spacing: .01px;
        font-size: 14px;
        font-weight: 600;
        line-height: 20px
    }

    .navigation-balance__add-funds {
        --btn-shine-opacity: .32
    }

    .navigation-balance:has(.button:hover) {
        background-color: #64eb4933
    }

    @keyframes nav-cylinder-rotate {
        0% {
            transform: rotateY(0)
        }

        to {
            transform: rotateY(1turn)
        }
    }

    @keyframes nav-beam-pulse {

        0%,
        to {
            opacity: 1;
            scale: 1
        }

        50% {
            opacity: .25;
            scale: .88 .92
        }
    }


    .navigation-tokens {
        cursor: pointer;
        background: #b055ff29;
        border-radius: 6px;
        align-items: center;
        gap: 4px;
        padding: 6px 6px 6px 8px;
        transition: background-color .2s;
        display: flex
    }

    .navigation-tokens__image {
        width: 16px;
        height: 16px
    }

    .navigation-tokens__amount {
        color: #d32ee6;
        letter-spacing: .01px;
        font-size: 14px;
        font-weight: 600;
        line-height: 20px
    }

    .navigation-tokens:hover {
        background: #b055ff3d
    }


    .navigation-hamburger {
        pointer-events: none;
        width: 100%;
        height: 100%;
        position: relative
    }

    .navigation-hamburger__line {
        background-color: #9ba7bf;
        width: 15px;
        height: 2px;
        transition: width .3s, opacity .3s, transform .3s;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%)
    }

    .navigation-hamburger__line:first-child {
        transform: translate(-50%, calc(-50% - 5px))
    }

    .navigation-hamburger__line:nth-child(2) {
        transform: translate(-50%, calc(5px - 50%))
    }

    .navigation-hamburger.--active .navigation-hamburger__line:first-child {
        transform: translate(-50%, -50%)rotate(45deg)
    }

    .navigation-hamburger.--active .navigation-hamburger__line:nth-child(2) {
        transform: translate(-50%, -50%)rotate(-45deg)
    }

    .navigation-hamburger.--active .navigation-hamburger__line:nth-child(3) {
        opacity: 0
    }


    .navigation-top-bar__user-options-notifications path:last-of-type {
        transition: fill .3s ease-out
    }

    .navigation-top-bar__user-options-notifications.--has-new path:last-of-type {
        fill: #ff3d33 !important
    }


    .navigation-top-bar {
        z-index: 10;
        background-color: #191e2a;
        justify-content: space-between;
        align-self: stretch;
        align-items: center;
        height: 68px;
        padding: 12px 16px;
        display: flex;
        position: sticky;
        top: 0
    }

    .navigation-top-bar * {
        font-family: Switzer, sans-serif
    }

    .navigation-top-bar__left {
        align-items: center;
        gap: 32px;
        display: flex
    }

    .navigation-top-bar__left-logo {
        align-items: center;
        height: 28px;
        display: flex
    }

    @media only screen and (width<=560px) {
        .navigation-top-bar__left-logo {
            height: 68px;
            margin-left: -12px;
            padding: 12px
        }
    }

    .navigation-top-bar__left-logo-image {
        height: 100%;
        display: block
    }

    .navigation-top-bar__left-logo-signet {
        width: 37px;
        display: block
    }

    .navigation-top-bar__left-links-item,
    .navigation-top-bar__left-links-list {
        align-items: center;
        gap: 8px;
        display: flex
    }

    .navigation-top-bar__left-links-item {
        border-radius: 8px;
        padding: 10px;
        transition: background-color .2s ease-out;
        position: relative
    }

    .navigation-top-bar__left-links-item.router-link-active .navigation-top-bar__left-links-item-bar,
    .navigation-top-bar__left-links-item:hover .navigation-top-bar__left-links-item-bar {
        opacity: 1
    }

    .navigation-top-bar__left-links-item.router-link-active .navigation-top-bar__left-links-item-icon,
    .navigation-top-bar__left-links-item:hover .navigation-top-bar__left-links-item-icon {
        color: #b055ff
    }

    .navigation-top-bar__left-links-item.router-link-active .navigation-top-bar__left-links-item-label,
    .navigation-top-bar__left-links-item:hover .navigation-top-bar__left-links-item-label {
        color: #fff
    }

    .navigation-top-bar__left-links-item-bar {
        opacity: 0;
        pointer-events: none;
        z-index: 0;
        background-color: #b055ff;
        width: 100%;
        height: 1px;
        transition: opacity .2s ease-out;
        display: flex;
        position: absolute;
        top: -14px;
        left: 0
    }

    .navigation-top-bar__left-links-item-bar:before {
        content: "";
        background: radial-gradient(50% 80% at 50% 0, #b055ff66, #b055ff00);
        width: 100%;
        height: 30px;
        display: flex
    }

    .navigation-top-bar__left-links-item-icon {
        color: #9ba7bf;
        width: 20px;
        height: 20px;
        transition: color .2s ease-out
    }

    .navigation-top-bar__left-links-item-label {
        color: #c1c8d7;
        letter-spacing: .02px;
        text-transform: uppercase;
        font-size: 12px;
        font-weight: 700;
        line-height: 16px
    }

    .navigation-top-bar__right {
        position: relative
    }

    .navigation-top-bar__right,
    .navigation-top-bar__user {
        justify-content: center;
        align-items: center;
        gap: 8px;
        display: flex
    }

    .navigation-top-bar__user-wallets {
        gap: 8px;
        display: flex
    }

    .navigation-top-bar__user-options {
        justify-content: center;
        align-items: center;
        gap: 8px;
        display: flex
    }

    .navigation-top-bar__user-options-avatar {
        cursor: pointer
    }

    .navigation-top-bar__user-options-avatar .avatar-with-level__img {
        transition: transform .3s ease-in-out
    }

    .navigation-top-bar__user-options-avatar:hover .avatar-with-level__img {
        transform: scale(.95)
    }

    .navigation-top-bar__user-options-dropdown {
        position: relative
    }

    .navigation-top-bar__user-options-menu {
        cursor: pointer;
        background-color: #202736;
        border-radius: 8px;
        flex-direction: column;
        gap: 3px;
        width: 44px;
        height: 44px;
        transition: background-color .3s;
        display: flex;
        position: relative;
        overflow: hidden
    }

    .navigation-top-bar__user-options-menu.--active,
    .navigation-top-bar__user-options-menu:hover {
        background-color: #353a5a
    }


    .navigation-bottom-bar-bottom {
        min-height: 26px;
        padding-bottom: env(safe-area-inset-bottom, 0);
        pointer-events: none;
        z-index: 9;
        background-color: #191e2a;
        width: 100%;
        display: flex;
        position: fixed;
        bottom: -1px;
        left: 0
    }

    .navigation-bottom-bar {
        z-index: 100;
        width: 100%;
        height: 71px;
        position: fixed;
        bottom: -1px;
        left: 0
    }

    .navigation-bottom-bar * {
        font-family: Switzer, sans-serif
    }

    .navigation-bottom-bar__bg {
        pointer-events: none;
        position: absolute;
        top: 0;
        left: 0
    }

    .navigation-bottom-bar__bg path {
        fill: #191e2a
    }

    .navigation-bottom-bar__pay {
        height: 62px;
        left: calc(50% + var(--scrollbar-width)/2);
        z-index: 3;
        border-radius: 14px;
        justify-content: center;
        align-items: center;
        width: 62px;
        display: flex;
        position: absolute;
        top: 42px;
        transform: translate(-50%, -100%)
    }

    .navigation-bottom-bar__pay .button {
        box-shadow: 0 0 0 3px #64eb4929
    }

    .navigation-bottom-bar__links {
        z-index: 2;
        height: 100%;
        position: relative
    }

    .navigation-bottom-bar__links-list {
        -webkit-user-select: none;
        user-select: none;
        justify-content: center;
        gap: 10px;
        width: 100%;
        height: 100%;
        display: flex
    }

    .navigation-bottom-bar__links-item {
        touch-action: manipulation;
        flex-direction: column;
        align-items: center;
        gap: 10px;
        width: 25%;
        height: 100%;
        padding-top: 14px;
        display: flex;
        position: relative
    }

    .navigation-bottom-bar__links-item:after {
        content: "";
        opacity: 0;
        background-color: #b055ff;
        width: 58px;
        height: 3px;
        transition: opacity .3s;
        display: flex;
        position: absolute;
        top: 0;
        left: 50%;
        transform: translate(-50%)
    }

    .navigation-bottom-bar__links-item-icon {
        color: #9ba7bf;
        width: 20px;
        height: 20px
    }

    .navigation-bottom-bar__links-item-hamburger {
        pointer-events: none;
        width: 20px;
        height: 20px;
        position: relative
    }

    .navigation-bottom-bar__links-item--menu {
        cursor: pointer;
        -webkit-tap-highlight-color: transparent
    }

    .navigation-bottom-bar__links-item--menu:active {
        opacity: .6
    }

    .navigation-bottom-bar__links-item.router-link-active:after {
        opacity: 1
    }

    .navigation-bottom-bar__links-item.router-link-active .navigation-bottom-bar__links-item-label {
        color: #e6e9ef
    }

    .navigation-bottom-bar__links-item.router-link-active .navigation-bottom-bar__links-item-icon {
        color: #b055ff
    }

    .navigation-bottom-bar__links-item-label {
        color: #9ba7bf;
        letter-spacing: 0;
        text-transform: uppercase;
        font-size: 10px;
        font-weight: 700;
        line-height: 14px
    }

    .nbbm-enter-active,
    .nbbm-leave-active {
        pointer-events: none;
        transition: transform .25s
    }

    .nbbm-enter-from,
    .nbbm-leave-to {
        transform: translate(100%)
    }

    .nbbm-enter-to,
    .nbbm-leave-from {
        transform: translate(0)
    }


    .fade-subnav-banner-enter-active {
        transition: transform .3s
    }

    .fade-subnav-banner-enter-from {
        transform: translateY(100%)
    }

    .navigation-top-sub-bar {
        background-color: #191e2a;
        border-top: 1px solid #353a5a;
        align-items: center;
        gap: 20px;
        width: 100%;
        height: 54px;
        padding: 0 20px;
        display: flex;
        overflow: hidden
    }

    .navigation-top-sub-bar * {
        font-family: Switzer, sans-serif
    }

    .navigation-top-sub-bar__links,
    .navigation-top-sub-bar__links-item {
        align-items: center;
        gap: 8px;
        display: flex
    }

    .navigation-top-sub-bar__links-item {
        cursor: pointer;
        border-radius: 8px;
        padding: 10px;
        transition: background-color .3s, filter .3s
    }

    .navigation-top-sub-bar__links-item:hover {
        background-color: #202736
    }

    .navigation-top-sub-bar__links-item.router-link-active {
        filter: brightness(1.2)
    }

    .navigation-top-sub-bar__links-item-icon {
        color: #9ba7bf;
        flex-shrink: 0;
        width: 14px;
        height: 14px;
        transition: color .2s ease-out
    }

    .navigation-top-sub-bar__links-item-label {
        color: #c1c8d7;
        letter-spacing: .02px;
        text-transform: uppercase;
        white-space: nowrap;
        font-size: 12px;
        font-weight: 600;
        line-height: 16px;
        transition: color .2s ease-out
    }

    .navigation-top-sub-bar__socials {
        align-items: center;
        gap: 8px;
        margin-left: auto;
        display: flex
    }

    .navigation-top-sub-bar__socials-item {
        background-color: #202736;
        border-radius: 4px;
        justify-content: center;
        align-items: center;
        width: 32px;
        height: 32px;
        transition: background-color .25s ease-out;
        display: flex
    }

    .navigation-top-sub-bar__socials-item:hover {
        background-color: #353a5a
    }

    .navigation-top-sub-bar__socials-item:hover .navigation-top-sub-bar__socials-item-icon {
        background-color: #e6e9ef
    }

    .navigation-top-sub-bar__socials-item-icon {
        background-color: #9ba7bf;
        width: 16px;
        height: 16px;
        transition: background-color .25s ease-out;
        -webkit-mask-position: 50%;
        mask-position: 50%;
        -webkit-mask-size: contain;
        mask-size: contain;
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat
    }

    .navigation-top-sub-bar__banners {
        align-items: center;
        gap: 8px;
        display: flex
    }

    .navigation-top-sub-bar__socials-dropdown {
        display: inline-flex
    }

    .navigation-top-sub-bar__socials-trigger {
        cursor: pointer;
        background: 0 0;
        border: none;
        padding: 0
    }

    .navigation-top-sub-bar__socials-popover {
        background-color: #191e2a;
        border-radius: 8px;
        flex-direction: column;
        min-width: 160px;
        padding: 8px 0;
        display: flex;
        overflow: hidden
    }

    .navigation-top-sub-bar__socials-popover-item {
        align-items: center;
        gap: 10px;
        padding: 8px 12px;
        transition: background-color .15s ease-out;
        display: flex
    }

    .navigation-top-sub-bar__socials-popover-item .navigation-top-sub-bar__socials-item-icon {
        width: 20px;
        height: 20px
    }

    .navigation-top-sub-bar__socials-popover-item:hover {
        background-color: #202736
    }

    .navigation-top-sub-bar__socials-popover-item:hover .navigation-top-sub-bar__socials-item-icon {
        background-color: #e6e9ef
    }

    .navigation-top-sub-bar__socials-popover-item:hover .navigation-top-sub-bar__socials-popover-item-label {
        color: #fff
    }

    .navigation-top-sub-bar__socials-popover-item-label {
        color: #9ba7bf;
        letter-spacing: .01px;
        font-size: 14px;
        font-weight: 400;
        line-height: 20px;
        transition: color .15s ease-out
    }


    #layout_default {
        width: 100%;
        transition: opacity .5s
    }

    #layout_default.banned #layout_content>:not(.ban-info) {
        pointer-events: none !important
    }

    #layout_default:not(.loaded) {
        opacity: 0;
        overflow: hidden
    }

    #layout_default .beta-icon-active {
        cursor: pointer;
        z-index: 99;
        background-color: #161921;
        border-radius: 10px 10px 0 0;
        justify-content: center;
        align-items: center;
        height: 44px;
        padding: 0 24px;
        transition: all .3s;
        display: flex;
        position: fixed;
        bottom: 0;
        left: 20px;
        overflow: hidden
    }

    #layout_default .beta-icon-active .G_Text {
        z-index: 9;
        position: relative
    }

    #layout_default .beta-icon-active .G_Text .G_Text-content {
        font-size: 16px;
        font-weight: 700
    }

    #layout_default .beta-icon-active .G_Text {
        margin-right: 8px
    }

    @media only screen and (width<=900px) {
        #layout_default .beta-icon-active .G_Text {
            display: none
        }
    }

    #layout_default .beta-icon-active:before {
        content: "";
        opacity: .5;
        background-image: linear-gradient(to bottom left, #b055ff, #31bbff);
        width: 100%;
        height: 100%;
        transition: all .3s;
        display: flex;
        position: absolute;
        top: 0;
        left: 0
    }

    #layout_default .beta-icon-active:after {
        content: "";
        background-color: #fff;
        width: 18px;
        height: 18px;
        transition: all .3s;
        display: flex;
        -webkit-mask-image: url(/img/icon/lab.svg);
        mask-image: url(/img/icon/lab.svg);
        -webkit-mask-position: 50%;
        mask-position: 50%;
        -webkit-mask-size: contain;
        mask-size: contain;
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat
    }

    #layout_default .beta-icon-active:active {
        transform: scale(.975)
    }

    #layout_default .beta-icon-active:hover:before {
        opacity: .65
    }

    #layout_default .bg {
        z-index: -1;
        background-position: top;
        background-repeat: no-repeat;
        background-size: 100%;
        width: 100%;
        height: 100vh;
        position: fixed;
        top: 0;
        left: 0
    }

    #layout_default #layout_content {
        z-index: 2;
        flex-direction: column;
        display: flex;
        position: relative
    }

    #layout_default #layout_content .Navigation,
    #layout_default #layout_content .navigation-top-bar {
        order: 0
    }

    #layout_default #layout_content .livedrop,
    #layout_default #layout_content .the-livedrop {
        order: 1
    }

    #layout_default #layout_content .SubNavigation,
    #layout_default #layout_content .navigation-top-sub-bar {
        order: 2
    }

    @media only screen and (width<=900px) {

        #layout_default #layout_content .Navigation,
        #layout_default #layout_content .navigation-top-bar {
            order: 1
        }

        #layout_default #layout_content .livedrop,
        #layout_default #layout_content .the-livedrop {
            order: 0
        }

        #layout_default #layout_content .SubNavigation,
        #layout_default #layout_content .navigation-top-sub-bar {
            order: 2
        }
    }

    #layout_default #layout_content .page_content {
        order: 4
    }

    #layout_default #layout_content .Footer,
    #layout_default #layout_content .page-footer,
    #layout_default #layout_content .the-footer {
        order: 5
    }

    #layout_default #layout_content>header h1 {
        margin-top: 20px;
        font-size: 16px;
        font-weight: 500
    }

    #layout_default #layout_content>header h1,
    #layout_default #layout_content>header p {
        color: #2e394f;
        letter-spacing: .5px;
        text-align: center;
        text-transform: uppercase;
        width: 100%
    }

    #layout_default #layout_content>header p {
        font-size: 13px;
        font-weight: 600
    }

    #layout_default #layout_content .page_content {
        order: 5;
        width: 100%;
        min-height: calc(100vh - 302px)
    }


    .g-image-fallback[data-v-278412fa] {
        width: 100%;
        height: 100%;
        display: block;
        -webkit-mask-position: 50%;
        mask-position: 50%;
        -webkit-mask-size: contain;
        mask-size: contain;
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat
    }


    .button {
        --btn-shine-opacity: .25;
        cursor: pointer;
        justify-content: center;
        align-items: center;
        width: max-content;
        transition: background-color .3s, border .3s, filter .3s, opacity .3s, transform .3s;
        display: flex;
        position: relative;
        overflow: visible
    }

    .button:active {
        filter: brightness(1.2) !important
    }

    .button .button-icon {
        aspect-ratio: 1;
        position: relative;
        transform: translateZ(0);
        -webkit-mask-position: 50%;
        -webkit-mask-size: contain;
        -webkit-mask-repeat: no-repeat
    }

    .button .button-icon path {
        transition: fill .3s;
        fill: var(--btn-color) !important
    }

    .button .button-label {
        color: var(--btn-color);
        text-align: left;
        text-transform: uppercase;
        -webkit-user-select: none;
        user-select: none;
        font-family: Switzer, sans-serif;
        transition: color .3s
    }

    @keyframes shine-button {
        0% {
            transform: translate(-100%)
        }

        17.8082%,
        to {
            transform: translate(100%)
        }
    }

    @keyframes pulse-button {
        0% {
            opacity: 0;
            outline-offset: -16px
        }

        15% {
            opacity: .4
        }

        70%,
        to {
            opacity: 0;
            outline-offset: 0
        }
    }

    .button .button-fx-shine {
        border-radius: inherit;
        pointer-events: none;
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        overflow: hidden
    }

    .button .button-fx-shine:after {
        background: linear-gradient(120deg, transparent, rgba(255, 255, 255, var(--btn-shine-opacity)), transparent);
        content: "";
        width: 100%;
        height: 100%;
        animation: 3s ease-in-out infinite shine-button;
        position: absolute;
        top: 0;
        left: 0
    }

    .button .button-fx-ring {
        border-radius: inherit;
        outline: 16px solid var(--pulse-color, currentColor);
        outline-offset: -16px;
        pointer-events: none;
        z-index: -1;
        animation: 2s ease-out infinite pulse-button;
        position: absolute;
        inset: 0
    }

    .button.--block {
        opacity: .5
    }

    .button.--block,
    .button.--lock {
        pointer-events: none
    }

    .button.--icon-pos-right {
        flex-direction: row-reverse
    }

    .button.--size-none {
        border-radius: 4px;
        gap: 8px;
        padding: 8px
    }

    .button.--size-none .button-icon {
        width: 16px;
        min-width: 16px;
        height: 16px
    }

    .button.--size-none .button-label {
        letter-spacing: .02px;
        font-size: 12px;
        font-weight: 600;
        line-height: 16px
    }

    .button.--size-xs {
        border-radius: 4px;
        gap: 8px;
        height: 32px;
        min-height: 32px;
        padding: 8px
    }

    .button.--size-xs.--rect {
        width: 32px;
        max-width: 32px
    }

    .button.--size-xs .button-icon {
        width: 16px;
        min-width: 16px;
        height: 16px
    }

    .button.--size-xs .button-label {
        letter-spacing: .02px;
        font-size: 12px;
        font-weight: 600;
        line-height: 16px
    }

    .button.--size-sm {
        border-radius: 8px;
        gap: 12px;
        height: 36px;
        min-height: 36px;
        padding: 0 16px
    }

    .button.--size-sm.--rect {
        width: 36px;
        max-width: 36px;
        padding: 0
    }

    .button.--size-sm .button-icon {
        width: 16px;
        min-width: 16px;
        height: 16px
    }

    .button.--size-sm .button-label {
        letter-spacing: .01px;
        white-space: nowrap;
        font-size: 14px;
        font-weight: 600;
        line-height: 20px
    }

    .button.--size-md {
        border-radius: 8px;
        gap: 12px;
        height: 44px;
        min-height: 44px;
        padding: 12px 20px
    }

    .button.--size-md.--rect {
        width: 44px;
        max-width: 44px;
        padding: 12px
    }

    .button.--size-md .button-icon {
        width: 20px;
        min-width: 20px;
        height: 20px
    }

    .button.--size-md .button-label {
        letter-spacing: .01px;
        font-size: 14px;
        font-weight: 600;
        line-height: 20px
    }

    .button.--size-lg {
        border-radius: 8px;
        gap: 12px;
        height: 52px;
        min-height: 52px;
        padding: 16px 24px
    }

    .button.--size-lg.--rect {
        width: 52px;
        max-width: 52px;
        padding: 16px
    }

    .button.--size-lg .button-icon {
        width: 20px;
        min-width: 20px;
        height: 20px
    }

    .button.--size-lg .button-label {
        letter-spacing: .01px;
        font-size: 14px;
        font-weight: 600;
        line-height: 20px
    }

    .button.full {
        width: 100%
    }

    .button.--color-brand.--pulse {
        --pulse-color: #b055ff
    }

    .button.--color-brand.--style-fill {
        --btn-color: #fff;
        background-color: #b055ff;
        border: 1px solid #b055ff;
        transition: filter .15s
    }

    .button.--color-brand.--style-fill.--hover,
    .button.--color-brand.--style-fill:hover {
        filter: brightness(1.075);
        background-color: #b055ff
    }

    .button.--color-brand.--style-outline-primary,
    .button.--color-brand.--style-outline-secondary {
        border: 1px solid #b055ff
    }

    .button.--color-brand.--style-alpha-primary,
    .button.--color-brand.--style-alpha-secondary,
    .button.--color-brand.--style-outline-primary,
    .button.--color-brand.--style-outline-secondary {
        background-color: #5c178c4d
    }

    .button.--color-brand.--style-alpha-primary,
    .button.--color-brand.--style-outline-primary {
        --btn-color: #fff
    }

    .button.--color-brand.--style-alpha-secondary,
    .button.--color-brand.--style-ghost,
    .button.--color-brand.--style-outline-secondary {
        --btn-color: #b055ff
    }

    .button.--color-brand.--style-alpha-primary.--hover,
    .button.--color-brand.--style-alpha-primary:hover,
    .button.--color-brand.--style-outline-primary.--hover,
    .button.--color-brand.--style-outline-primary:hover {
        --btn-color: #fff;
        background-color: #b055ff;
        border-color: #b055ff
    }

    .button.--color-green.--pulse {
        --pulse-color: #64eb49
    }

    .button.--color-green.--style-fill {
        --btn-color: #13161f;
        background-color: #64eb49;
        border: 1px solid #64eb49;
        transition: filter .15s
    }

    .button.--color-green.--style-fill.--hover,
    .button.--color-green.--style-fill:hover {
        filter: brightness(1.075);
        background-color: #64eb49
    }

    .button.--color-green.--style-outline-primary,
    .button.--color-green.--style-outline-secondary {
        border: 1px solid #64eb49
    }

    .button.--color-green.--style-alpha-primary,
    .button.--color-green.--style-alpha-secondary,
    .button.--color-green.--style-outline-primary,
    .button.--color-green.--style-outline-secondary {
        background-color: #64eb494d
    }

    .button.--color-green.--style-alpha-primary,
    .button.--color-green.--style-outline-primary {
        --btn-color: #fff
    }

    .button.--color-green.--style-alpha-secondary,
    .button.--color-green.--style-ghost,
    .button.--color-green.--style-outline-secondary {
        --btn-color: #64eb49
    }

    .button.--color-green.--style-alpha-primary.--hover,
    .button.--color-green.--style-alpha-primary:hover,
    .button.--color-green.--style-outline-primary.--hover,
    .button.--color-green.--style-outline-primary:hover {
        --btn-color: #13161f;
        background-color: #64eb49;
        border-color: #64eb49
    }

    .button.--color-dark.--pulse {
        --pulse-color: #13161f
    }

    .button.--color-dark.--style-fill {
        --btn-color: #9ba7bf;
        background-color: #13161f;
        border: 1px solid #13161f;
        transition: filter .15s
    }

    .button.--color-dark.--style-fill.--hover,
    .button.--color-dark.--style-fill:hover {
        filter: brightness(1.075);
        background-color: #191e2a
    }

    .button.--color-dark.--style-outline-primary,
    .button.--color-dark.--style-outline-secondary {
        border: 1px solid #191e2a
    }

    .button.--color-dark.--style-alpha-primary,
    .button.--color-dark.--style-alpha-secondary,
    .button.--color-dark.--style-outline-primary,
    .button.--color-dark.--style-outline-secondary {
        background-color: #191e2a4d
    }

    .button.--color-dark.--style-alpha-primary,
    .button.--color-dark.--style-outline-primary {
        --btn-color: #fff
    }

    .button.--color-dark.--style-alpha-secondary,
    .button.--color-dark.--style-ghost,
    .button.--color-dark.--style-outline-secondary {
        --btn-color: #13161f
    }

    .button.--color-dark.--style-alpha-primary.--hover,
    .button.--color-dark.--style-alpha-primary:hover,
    .button.--color-dark.--style-outline-primary.--hover,
    .button.--color-dark.--style-outline-primary:hover {
        --btn-color: #9ba7bf;
        background-color: #13161f;
        border-color: #13161f
    }

    .button.--color-yellow.--pulse {
        --pulse-color: #fccb13
    }

    .button.--color-yellow.--style-fill {
        --btn-color: #13161f;
        background-color: #fccb13;
        border: 1px solid #fccb13;
        transition: filter .15s
    }

    .button.--color-yellow.--style-fill.--hover,
    .button.--color-yellow.--style-fill:hover {
        filter: brightness(1.075);
        background-color: #fccb13
    }

    .button.--color-yellow.--style-outline-primary,
    .button.--color-yellow.--style-outline-secondary {
        border: 1px solid #fccb13
    }

    .button.--color-yellow.--style-alpha-primary,
    .button.--color-yellow.--style-alpha-secondary,
    .button.--color-yellow.--style-outline-primary,
    .button.--color-yellow.--style-outline-secondary {
        background-color: #a261064d
    }

    .button.--color-yellow.--style-alpha-primary,
    .button.--color-yellow.--style-outline-primary {
        --btn-color: #fff
    }

    .button.--color-yellow.--style-alpha-secondary,
    .button.--color-yellow.--style-ghost,
    .button.--color-yellow.--style-outline-secondary {
        --btn-color: #fccb13
    }

    .button.--color-yellow.--style-alpha-primary.--hover,
    .button.--color-yellow.--style-alpha-primary:hover,
    .button.--color-yellow.--style-outline-primary.--hover,
    .button.--color-yellow.--style-outline-primary:hover {
        --btn-color: #13161f;
        background-color: #fccb13;
        border-color: #fccb13
    }

    .button.--color-red.--pulse {
        --pulse-color: #ff3d33
    }

    .button.--color-red.--style-fill {
        --btn-color: #13161f;
        background-color: #ff3d33;
        border: 1px solid #ff3d33;
        transition: filter .15s
    }

    .button.--color-red.--style-fill.--hover,
    .button.--color-red.--style-fill:hover {
        filter: brightness(1.075);
        background-color: #ff3d33
    }

    .button.--color-red.--style-outline-primary,
    .button.--color-red.--style-outline-secondary {
        border: 1px solid #ff3d33
    }

    .button.--color-red.--style-alpha-primary,
    .button.--color-red.--style-alpha-secondary,
    .button.--color-red.--style-outline-primary,
    .button.--color-red.--style-outline-secondary {
        background-color: #881a144d
    }

    .button.--color-red.--style-alpha-primary,
    .button.--color-red.--style-outline-primary {
        --btn-color: #fff
    }

    .button.--color-red.--style-alpha-secondary,
    .button.--color-red.--style-ghost,
    .button.--color-red.--style-outline-secondary {
        --btn-color: #ff3d33
    }

    .button.--color-red.--style-alpha-primary.--hover,
    .button.--color-red.--style-alpha-primary:hover,
    .button.--color-red.--style-outline-primary.--hover,
    .button.--color-red.--style-outline-primary:hover {
        --btn-color: #13161f;
        background-color: #ff3d33;
        border-color: #ff3d33
    }

    .button.--color-blue.--pulse {
        --pulse-color: #06a2f1
    }

    .button.--color-blue.--style-fill {
        --btn-color: #13161f;
        background-color: #06a2f1;
        border: 1px solid #06a2f1;
        transition: filter .15s
    }

    .button.--color-blue.--style-fill.--hover,
    .button.--color-blue.--style-fill:hover {
        filter: brightness(1.075);
        background-color: #31bbff
    }

    .button.--color-blue.--style-outline-primary,
    .button.--color-blue.--style-outline-secondary {
        border: 1px solid #31bbff
    }

    .button.--color-blue.--style-alpha-primary,
    .button.--color-blue.--style-alpha-secondary,
    .button.--color-blue.--style-outline-primary,
    .button.--color-blue.--style-outline-secondary {
        background-color: #31bbff4d
    }

    .button.--color-blue.--style-alpha-primary,
    .button.--color-blue.--style-outline-primary {
        --btn-color: #fff
    }

    .button.--color-blue.--style-alpha-secondary,
    .button.--color-blue.--style-ghost,
    .button.--color-blue.--style-outline-secondary {
        --btn-color: #31bbff
    }

    .button.--color-blue.--style-alpha-primary.--hover,
    .button.--color-blue.--style-alpha-primary:hover,
    .button.--color-blue.--style-outline-primary.--hover,
    .button.--color-blue.--style-outline-primary:hover {
        --btn-color: #13161f;
        background-color: #06a2f1;
        border-color: #06a2f1
    }

    .button.--color-event.--pulse {
        --pulse-color: rgb(var(--event_main))
    }

    .button.--color-event.--style-fill {
        background-color: rgb(var(--event_main));
        border: 1px solid rgb(var(--event_main));
        --btn-color: #fff;
        transition: filter .15s
    }

    .button.--color-event.--style-fill.--hover,
    .button.--color-event.--style-fill:hover {
        background-color: rgb(var(--event_main));
        filter: brightness(1.075)
    }

    .button.--color-event.--style-outline-primary,
    .button.--color-event.--style-outline-secondary {
        border: 1px solid rgb(var(--event_main))
    }

    .button.--color-event.--style-alpha-primary,
    .button.--color-event.--style-alpha-secondary,
    .button.--color-event.--style-outline-primary,
    .button.--color-event.--style-outline-secondary {
        background-color: rgba(var(--event_main), .3)
    }

    .button.--color-event.--style-alpha-primary,
    .button.--color-event.--style-outline-primary {
        --btn-color: #fff
    }

    .button.--color-event.--style-alpha-secondary,
    .button.--color-event.--style-ghost,
    .button.--color-event.--style-outline-secondary {
        --btn-color: rgb(var(--event_main))
    }

    .button.--color-event.--style-alpha-primary.--hover,
    .button.--color-event.--style-alpha-primary:hover,
    .button.--color-event.--style-outline-primary.--hover,
    .button.--color-event.--style-outline-primary:hover {
        background-color: rgb(var(--event_main));
        border-color: rgb(var(--event_main));
        --btn-color: #fff
    }

    .button.--color-pink.--pulse {
        --pulse-color: #ff9195
    }

    .button.--color-pink.--style-fill {
        --btn-color: #13161f;
        background-color: #ff9195;
        border: 1px solid #ff9195;
        transition: filter .15s
    }

    .button.--color-pink.--style-fill.--hover,
    .button.--color-pink.--style-fill:hover {
        filter: brightness(1.075);
        background-color: #ff9195
    }

    .button.--color-pink.--style-outline-primary,
    .button.--color-pink.--style-outline-secondary {
        border: 1px solid #ff9195
    }

    .button.--color-pink.--style-alpha-primary,
    .button.--color-pink.--style-alpha-secondary,
    .button.--color-pink.--style-outline-primary,
    .button.--color-pink.--style-outline-secondary {
        background-color: #ff91954d
    }

    .button.--color-pink.--style-alpha-primary,
    .button.--color-pink.--style-outline-primary {
        --btn-color: #fff
    }

    .button.--color-pink.--style-alpha-secondary,
    .button.--color-pink.--style-ghost,
    .button.--color-pink.--style-outline-secondary {
        --btn-color: #ff9195
    }

    .button.--color-pink.--style-alpha-primary.--hover,
    .button.--color-pink.--style-alpha-primary:hover,
    .button.--color-pink.--style-outline-primary.--hover,
    .button.--color-pink.--style-outline-primary:hover {
        --btn-color: #13161f;
        background-color: #ff9195;
        border-color: #ff9195
    }

    .button.--color-gray.--pulse {
        --pulse-color: #9ba7bf
    }

    .button.--color-gray.--style-fill {
        background-color: #202736;
        border: 1px solid #202736
    }

    .button.--color-gray.--style-outline-primary,
    .button.--color-gray.--style-outline-secondary {
        border: 1px solid #353a5a
    }

    .button.--color-gray.--style-alpha-primary,
    .button.--color-gray.--style-alpha-secondary,
    .button.--color-gray.--style-outline-primary,
    .button.--color-gray.--style-outline-secondary {
        background-color: #191e2a4d
    }

    .button.--color-gray.--style-alpha-primary,
    .button.--color-gray.--style-outline-primary {
        --btn-color: #fff
    }

    .button.--color-gray.--style-alpha-secondary,
    .button.--color-gray.--style-fill,
    .button.--color-gray.--style-ghost,
    .button.--color-gray.--style-outline-secondary {
        --btn-color: #9ba7bf
    }

    .button.--color-gray.--hover,
    .button.--color-gray:hover {
        --btn-color: #fff;
        background-color: #353a5a
    }

    .button.--color-dark {
        --btn-color: #9ba7bf;
        background-color: #191e2a
    }

    .button.--color-white {
        --btn-color: #13161f;
        background-color: #fff
    }

    .button.--color-white.--pulse {
        --pulse-color: #fff
    }

    .button.--color-white.--style-ghost {
        --btn-color: #fff
    }

    .button.--color-steam {
        position: relative
    }

    .button.--color-steam:before {
        border-radius: inherit;
        content: "";
        background: linear-gradient(93deg, #549600, #407300);
        width: 100%;
        height: 100%;
        transition: filter .3s;
        position: absolute;
        top: 0;
        left: 0
    }

    .button.--color-steam.--pulse {
        --pulse-color: #549600
    }

    .button.--color-steam .button-icon path {
        transition: fill .3s;
        fill: #fff !important
    }

    .button.--color-steam .button-label {
        color: #fff;
        position: relative
    }

    .button.--color-steam.--hover:before,
    .button.--color-steam:hover:before {
        filter: brightness(1.1)
    }

    .button.--color-gold {
        --btn-color: #13161f;
        position: relative
    }

    .button.--color-gold:before {
        border-radius: inherit;
        content: "";
        background: linear-gradient(91deg, #f2cb39, #ffed68 25%, #ffdc59 50%, #ffe17e 75%, #f2cb39);
        width: 100%;
        height: 100%;
        transition: filter .3s;
        position: absolute;
        top: 0;
        left: 0
    }

    .button.--color-gold.--pulse {
        --pulse-color: #ffed68
    }

    .button.--color-gold .button-icon,
    .button.--color-gold .button-label {
        position: relative
    }

    .button.--color-gold.--hover:before,
    .button.--color-gold:hover:before {
        filter: brightness(1.1)
    }

    .button.--style-ghost {
        background-image: unset;
        border: none;
        border-radius: 0;
        height: auto;
        padding: 0;
        background-color: #0000 !important
    }

    .button.--style-ghost:before {
        content: none
    }

    .button.--style-ghost .button-icon {
        font-size: 20px
    }

    .button.--style-ghost .button-label {
        letter-spacing: .01px;
        font-size: 14px;
        font-weight: 600;
        line-height: 20px
    }


    .event-banner {
        width: 1500px;
        max-width: calc(100% - 40px);
        margin: 0 auto;
        padding-top: 16px;
        position: relative
    }

    .event-banner .banner-nav {
        border-radius: 16px;
        margin-bottom: 16px;
        overflow: hidden
    }

    .event-banner .banner-nav ul {
        width: calc(100% + 16px);
        margin: -8px;
        display: flex
    }

    .event-banner .banner-nav ul li {
        background-color: #0c0e14;
        background-image: linear-gradient(90deg, #2e394f80, #1b1f2b);
        border-radius: 16px;
        width: 100%;
        height: 80px;
        margin: 8px
    }

    .event-banner .banner-nav ul li>a,
    .event-banner .banner-nav ul li>div {
        cursor: pointer;
        border-radius: 16px;
        align-items: center;
        width: 100%;
        height: 100%;
        display: flex;
        position: relative;
        overflow: hidden
    }

    .event-banner .banner-nav ul li>a .nav_link_gradient,
    .event-banner .banner-nav ul li>div .nav_link_gradient {
        opacity: 0;
        will-change: opacity;
        background-image: linear-gradient(94deg, #606d8704, #606d8726);
        border-radius: 8px;
        width: 100%;
        height: 100%;
        transition: opacity .3s;
        position: absolute;
        top: 0;
        left: 0
    }

    .event-banner .banner-nav ul li>a :not(.nav_link_gradient),
    .event-banner .banner-nav ul li>div :not(.nav_link_gradient) {
        z-index: 2;
        position: relative
    }

    .event-banner .banner-nav ul li>a .nav_link_sash,
    .event-banner .banner-nav ul li>div .nav_link_sash {
        background-color: #64eb4933;
        border-radius: 6px;
        margin-left: 24px;
        margin-right: -12px;
        padding: 12px 16px
    }

    .event-banner .banner-nav ul li>a .nav_link_sash .G_Text .G_Text-content,
    .event-banner .banner-nav ul li>div .nav_link_sash .G_Text .G_Text-content {
        color: #64eb49;
        font-size: 12px;
        font-weight: 700
    }

    .event-banner .banner-nav ul li>a .nav_link_icon,
    .event-banner .banner-nav ul li>div .nav_link_icon {
        z-index: 2;
        width: 28px;
        min-height: 28px;
        margin-left: 32px;
        margin-right: 12px;
        position: relative
    }

    .event-banner .banner-nav ul li>a .nav_link_title,
    .event-banner .banner-nav ul li>div .nav_link_title {
        z-index: 2;
        padding-left: 24px;
        position: relative
    }

    .event-banner .banner-nav ul li>a .nav_link_title .G_Text-content,
    .event-banner .banner-nav ul li>div .nav_link_title .G_Text-content {
        font-size: 18px;
        font-weight: 700
    }

    .event-banner .banner-nav ul li>a .link-render,
    .event-banner .banner-nav ul li>div .link-render {
        -o-object-fit: contain;
        object-fit: contain;
        will-change: transform;
        width: 140px;
        height: 80px;
        transition: transform .3s;
        position: absolute;
        bottom: -8px;
        right: 24px
    }

    .event-banner .banner-nav ul li>a .nav_link_bg,
    .event-banner .banner-nav ul li>div .nav_link_bg {
        width: 80px;
        min-width: 80px;
        margin-left: auto;
        transition: all .3s;
        position: absolute;
        bottom: calc(50% - 40px);
        right: 0;
        transform: translate(30%, 30%)scale(1.2)rotate(-45deg)
    }

    .event-banner .banner-nav ul li>a:hover .link-render,
    .event-banner .banner-nav ul li>div:hover .link-render {
        transform: rotate(4deg)scale(1.1)
    }

    .event-banner .banner-nav ul li>a:hover .nav_link_gradient,
    .event-banner .banner-nav ul li>div:hover .nav_link_gradient {
        opacity: 1
    }

    .event-banner .banner-nav ul li>a:hover .nav_link_bg,
    .event-banner .banner-nav ul li>div:hover .nav_link_bg {
        margin-right: 24px;
        transform: translate(0)scale(.8)
    }

    @media only screen and (width<=750px) {

        .event-banner .banner-nav ul li>a,
        .event-banner .banner-nav ul li>div {
            flex-wrap: wrap;
            align-content: center;
            padding: 20px 12px 20px 20px
        }

        .event-banner .banner-nav ul li>a .nav_link_sash,
        .event-banner .banner-nav ul li>div .nav_link_sash {
            z-index: 3;
            margin-bottom: 4px;
            margin-left: 0;
            margin-right: 100%;
            padding: 6px 8px;
            position: relative
        }

        .event-banner .banner-nav ul li>a .nav_link_title,
        .event-banner .banner-nav ul li>div .nav_link_title {
            z-index: 3;
            position: relative
        }

        .event-banner .banner-nav ul li>a .nav_link_icon,
        .event-banner .banner-nav ul li>a .nav_link_title,
        .event-banner .banner-nav ul li>div .nav_link_icon,
        .event-banner .banner-nav ul li>div .nav_link_title {
            margin: 4px 0;
            padding-left: 0
        }
    }

    @media only screen and (width<=399px) {

        .event-banner .banner-nav ul li>a .nav_link_title .G_Text-content,
        .event-banner .banner-nav ul li>div .nav_link_title .G_Text-content {
            font-size: 12px !important
        }
    }

    .event-banner .banner-nav ul li.disabled {
        filter: grayscale(.5);
        opacity: .75;
        transition: all .3s
    }

    .event-banner .banner-nav ul li.disabled:hover {
        filter: grayscale(0);
        opacity: 1
    }

    .event-banner .banner-frame {
        background-position: 50%;
        background-repeat: no-repeat;
        background-size: cover;
        border-radius: 16px 16px 0 0;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 250px;
        display: flex;
        position: relative
    }

    .event-banner .banner-frame .frame-canvas {
        -webkit-user-select: none;
        user-select: none;
        user-focus: none;
        user-drag: none;
        user-zoom: none;
        border-radius: inherit;
        cursor: default;
        transform-origin: 0 0;
        position: absolute;
        top: 0;
        left: 0;
        transform: scale(.5)
    }

    .event-banner .banner-frame .frame-canvas.--hover {
        cursor: pointer
    }

    .event-banner .banner-frame .frame-render {
        pointer-events: none;
        -webkit-user-select: none;
        user-select: none;
        height: 270px;
        min-height: 270px;
        position: absolute;
        bottom: 0
    }

    .event-banner .banner-frame .frame-render.__1 {
        left: 0
    }

    .event-banner .banner-frame .frame-render.__2 {
        right: 0
    }

    .event-banner .banner-frame .frame-radial {
        background-image: radial-gradient(37.2% 149.2% at 50% 146.93%, #0006 35%, #0000 100%);
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0
    }

    .event-banner .banner-frame .frame-content {
        flex-direction: column;
        justify-content: center;
        align-items: center;
        display: flex;
        position: relative
    }

    .event-banner .banner-frame .frame-content .content-find {
        max-width: 100%;
        padding: 8px 18px;
        position: absolute;
        top: calc(100% + 8px);
        left: 50%;
        transform: translate(-50%)
    }

    @media only screen and (width<=900px) {
        .event-banner .banner-frame .frame-content .content-find {
            display: none
        }
    }

    .event-banner .banner-frame .frame-content .content-find .G_Text-content {
        color: #ffffffb3;
        text-align: center;
        white-space: nowrap;
        font-size: 14px;
        font-weight: 600
    }

    .event-banner .banner-frame .frame-content .content-logo {
        aspect-ratio: 376/86;
        -o-object-fit: contain;
        object-fit: contain;
        -o-object-position: bottom center;
        object-position: bottom center;
        width: 376px;
        max-width: 100%;
        margin-bottom: 32px
    }

    .event-banner .banner-frame .frame-content .content-info {
        display: flex
    }

    .event-banner .banner-frame .frame-content .content-info .info-timer {
        align-items: center;
        margin-right: 20px;
        display: flex
    }

    .event-banner .banner-frame .frame-content .content-info .info-timer .timer-box {
        -webkit-backdrop-filter: blur(12px);
        backdrop-filter: blur(12px);
        background: #0c0e1480;
        border-radius: 8px;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 52px;
        height: 52px;
        display: flex
    }

    .event-banner .banner-frame .frame-content .content-info .info-timer .timer-box .box-value .G_Text-content {
        font-size: 24px;
        font-weight: 700
    }

    .event-banner .banner-frame .frame-content .content-info .info-timer .timer-box .box-title {
        margin-top: 4px
    }

    .event-banner .banner-frame .frame-content .content-info .info-timer .timer-box .box-title .G_Text-content {
        color: #bfbfbf;
        font-size: 12px;
        font-weight: 600
    }

    .event-banner .banner-frame .frame-content .content-info .info-timer .timer-space {
        padding: 0 4px 8.5px;
        font-size: 24px;
        font-weight: 700;
        line-height: 2px
    }

    @media only screen and (width<=1200px) {
        .event-banner .banner-frame .frame-render {
            display: none
        }
    }

    @media only screen and (width<=650px) {
        .event-banner .banner-frame {
            background-size: cover;
            height: max-content
        }

        .event-banner .banner-frame .frame-content {
            flex-direction: column;
            padding: 24px
        }

        .event-banner .banner-frame .frame-content .content-info {
            justify-content: center;
            align-items: center;
            display: flex
        }
    }

    @media only screen and (width<=560px) {
        .event-banner .banner-frame .frame-content {
            padding: 32px
        }

        .event-banner .banner-frame .frame-content .content-logo {
            margin-bottom: 16px
        }

        .event-banner .banner-frame .frame-content .content-info {
            flex-direction: column
        }

        .event-banner .banner-frame .frame-content .content-info .G_Button,
        .event-banner .banner-frame .frame-content .content-info .info-timer {
            width: 250px
        }

        .event-banner .banner-frame .frame-content .content-info .info-timer {
            margin-bottom: 16px;
            margin-right: 0
        }
    }

    @media only screen and (width<=900px) {
        .event-banner {
            flex-direction: column-reverse;
            max-width: 100%;
            padding-top: 0;
            display: flex
        }

        .event-banner .banner-frame {
            border-radius: 0
        }

        .event-banner .banner-nav {
            width: calc(100% - 40px);
            margin: 16px auto
        }

        .event-banner .banner-nav ul {
            overflow: auto
        }

        .event-banner .banner-nav ul li {
            width: 240px;
            min-width: 240px;
            height: 64px
        }

        .event-banner .banner-nav ul li a .nav_link_icon {
            width: 24px;
            min-width: 24px;
            margin-right: 8px
        }

        .event-banner .banner-nav ul li a .link-render {
            -o-object-position: center right;
            object-position: center right;
            width: 120px;
            height: 64px;
            right: 12px
        }

        .event-banner .banner-nav ul li a .nav_link_title .G_Text-content {
            font-weight: 700;
            font-size: 16px !important
        }

        .event-banner .banner-nav ul li a .nav_link_bg {
            opacity: .2
        }

        .event-banner .banner-nav ul li a:hover .nav_link_bg {
            margin-right: 8px
        }
    }


    .event-banner2 {
        flex-direction: column;
        gap: 16px;
        width: 1500px;
        max-width: calc(100% - 40px);
        margin: 0 auto;
        display: flex;
        position: relative
    }

    .event-banner2 * {
        font-family: Switzer, sans-serif
    }

    .event-banner2 .banner-nav {
        border-radius: 16px;
        width: 100%;
        margin: 0 auto
    }

    .event-banner2 .banner-nav .nav-list {
        justify-content: space-between;
        gap: 16px;
        display: flex;
        overflow: auto
    }

    @media only screen and (width<=1200px) {
        .event-banner2 .banner-nav .nav-list {
            justify-content: flex-start
        }
    }

    .event-banner2 .banner-nav .nav-list .list-element {
        border-radius: 8px;
        width: calc(33.3333% - 10.6667px);
        height: 76px;
        position: relative;
        overflow: hidden
    }

    .event-banner2 .banner-nav .nav-list .list-element .element-link {
        align-items: center;
        display: flex
    }

    .event-banner2 .banner-nav .nav-list .list-element .element-link .link-icon {
        color: #e6e9ef;
        z-index: 2;
        width: 24px;
        min-width: 24px;
        margin-right: 8px;
        position: relative
    }

    .event-banner2 .banner-nav .nav-list .list-element .element-link .link-text {
        z-index: 2;
        flex-direction: column;
        display: flex;
        position: relative
    }

    .event-banner2 .banner-nav .nav-list .list-element .element-link .link-text .text-title {
        letter-spacing: 0;
        text-transform: uppercase;
        font-size: 18px;
        font-weight: 700;
        line-height: 28px
    }

    .event-banner2 .banner-nav .nav-list .list-element .element-link .link-text .text-login {
        color: #64eb49;
        letter-spacing: .01px;
        text-transform: uppercase;
        white-space: nowrap;
        font-size: 14px;
        font-weight: 700;
        line-height: 20px
    }

    .event-banner2 .banner-nav .nav-list .list-element .element-link .link-render {
        -o-object-fit: contain;
        object-fit: contain;
        width: 140px;
        height: 80px;
        transition: all .3s;
        position: absolute;
        bottom: -8px;
        right: 24px
    }

    .event-banner2 .banner-nav .nav-list .list-element.__mode {
        background-color: #13161f;
        background-image: linear-gradient(#353a5a52, #353a5a52);
        align-items: center;
        padding: 24px;
        display: flex
    }

    .event-banner2 .banner-nav .nav-list .list-element.__mode .element-active-bg {
        background-image: linear-gradient(94deg, rgba(var(--event_main), 0) 0, rgba(var(--event_main), .24) 100%);
        opacity: 0;
        border-radius: 8px;
        width: 100%;
        height: 100%;
        transition: all .3s;
        position: absolute;
        top: 0;
        left: 0
    }

    .event-banner2 .banner-nav .nav-list .list-element.__mode:hover .element-active-bg {
        opacity: 1
    }

    .event-banner2 .banner-nav .nav-list .list-element.__mode:has(.element-link.router-link-exact-active) .element-active-bg {
        opacity: 1
    }

    .event-banner2 .banner-nav .nav-list .list-element.__mode:hover .element-link .link-render {
        transform: rotate(4deg)scale(1.1)
    }

    .event-banner2 .banner-nav .nav-list .list-element.__mode:has(.element-link.router-link-exact-active) .element-link .link-render {
        transform: rotate(4deg)scale(1.1)
    }

    .event-banner2 .banner-nav .nav-list .list-element.__mode.lock {
        pointer-events: none
    }

    .event-banner2 .banner-nav .nav-list .list-element.__mode.lock .link-render {
        opacity: .3
    }

    .event-banner2 .banner-nav .nav-list .list-element.__about {
        background: #606d871a;
        border-radius: 8px;
        width: 60px;
        height: 76px;
        position: relative
    }

    .event-banner2 .banner-nav .nav-list .list-element.__about .element-active-bg {
        background: linear-gradient(94deg, rgba(var(--event_main), .15) 0, rgba(var(--event_main), .4) 100%);
        opacity: 0;
        border-radius: 8px;
        width: 100%;
        height: 100%;
        transition: all .3s;
        position: absolute;
        top: 0;
        left: 0
    }

    .event-banner2 .banner-nav .nav-list .list-element.__about .element-link {
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 100%;
        display: flex
    }

    .event-banner2 .banner-nav .nav-list .list-element.__about .element-link .link-icon {
        color: #c1c8d7;
        width: 24px;
        min-width: 24px;
        margin-right: 0;
        transition: all .3s;
        position: relative
    }

    .event-banner2 .banner-nav .nav-list .list-element.__about:hover .element-active-bg {
        opacity: 1
    }

    .event-banner2 .banner-nav .nav-list .list-element.__about:has(.element-link.router-link-exact-active) .element-active-bg {
        opacity: 1
    }

    .event-banner2 .banner-nav .nav-list .list-element.__about:hover .element-link .link-icon {
        color: #e6e9ef
    }

    .event-banner2 .banner-nav .nav-list .list-element.__about:has(.element-link.router-link-exact-active) .element-link .link-icon {
        color: #e6e9ef
    }

    .event-banner2 .banner-frame {
        background-position: 50%;
        background-repeat: no-repeat;
        background-size: cover;
        border-radius: 16px 16px 0 0;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 250px;
        display: flex;
        position: relative
    }

    .event-banner2 .banner-frame .frame-canvas {
        -webkit-user-select: none;
        user-select: none;
        user-focus: none;
        user-drag: none;
        user-zoom: none;
        border-radius: inherit;
        cursor: default;
        transform-origin: 0 0;
        position: absolute;
        top: 0;
        left: 0;
        transform: scale(.5)
    }

    .event-banner2 .banner-frame .frame-canvas.--hover {
        cursor: pointer
    }

    .event-banner2 .banner-frame .frame-render {
        pointer-events: none;
        -webkit-user-select: none;
        user-select: none;
        height: 270px;
        min-height: 270px;
        position: absolute;
        bottom: 0
    }

    .event-banner2 .banner-frame .frame-render.__1 {
        left: 0
    }

    .event-banner2 .banner-frame .frame-render.__2 {
        right: 0
    }

    .event-banner2 .banner-frame .frame-content {
        flex-flow: wrap;
        justify-content: center;
        align-items: center;
        gap: 24px;
        width: 100%;
        display: flex;
        position: relative
    }

    .event-banner2 .banner-frame .frame-content .content-logo {
        justify-content: center;
        width: 100%;
        height: max-content;
        margin: 0 auto auto;
        display: flex
    }

    .event-banner2 .banner-frame .frame-content .content-logo img {
        aspect-ratio: 376/86;
        -o-object-fit: contain;
        object-fit: contain;
        -o-object-position: bottom center;
        object-position: bottom center;
        width: 360px;
        max-width: 100%;
        display: flex
    }

    .event-banner2 .banner-frame .frame-content .info-timer {
        justify-content: center;
        width: max-content;
        display: flex
    }

    .event-banner2 .banner-frame .frame-content .info-timer .timer-space {
        flex-direction: column;
        justify-content: center;
        align-items: center;
        height: 52px;
        margin: 0 2px;
        display: flex
    }

    .event-banner2 .banner-frame .frame-content .info-timer .timer-space:after,
    .event-banner2 .banner-frame .frame-content .info-timer .timer-space:before {
        content: "";
        background-color: #fff;
        border-radius: 50%;
        width: 4px;
        height: 4px;
        margin: 2px;
        display: flex
    }

    .event-banner2 .banner-frame .frame-content .info-timer .timer-box {
        -webkit-backdrop-filter: blur(9px);
        backdrop-filter: blur(9px);
        background-color: #13161fa3;
        border-radius: 8px;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 52px;
        min-width: 52px;
        height: 52px;
        display: flex
    }

    .event-banner2 .banner-frame .frame-content .info-timer .timer-box .box-value {
        letter-spacing: .01px;
        font-size: 24px;
        font-weight: 700;
        line-height: 24px
    }

    .event-banner2 .banner-frame .frame-content .info-timer .timer-box .box-title {
        color: #c1c8d7;
        letter-spacing: .02px;
        text-transform: lowercase;
        font-size: 12px;
        font-weight: 600;
        line-height: 12px
    }

    .event-banner2 .banner-frame .frame-content .content-find {
        color: #9ba7bf;
        letter-spacing: .01px;
        text-align: center;
        width: 100%;
        font-size: 14px;
        font-weight: 600;
        line-height: 20px
    }

    @media only screen and (width<=900px) {
        .event-banner2 .banner-frame .frame-content .content-find {
            display: none
        }
    }

    @media only screen and (width<=1200px) {
        .event-banner2 .banner-frame .frame-render {
            display: none
        }
    }

    @media only screen and (width<=560px) {
        .event-banner2 .banner-frame {
            height: max-content
        }

        .event-banner2 .banner-frame .frame-canvas {
            display: none
        }

        .event-banner2 .banner-frame .frame-content {
            justify-content: space-between;
            gap: 12px 0;
            padding: 16px
        }

        .event-banner2 .banner-frame .frame-content:before {
            content: "";
            background-color: #13161f;
            width: 100%;
            height: 100%;
            display: flex;
            position: absolute;
            top: 0;
            left: 0
        }

        .event-banner2 .banner-frame .frame-content .content-bg-mobile {
            opacity: .64;
            background-position: 50%;
            background-size: cover;
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0
        }

        .event-banner2 .banner-frame .frame-content .content-logo {
            width: max-content;
            margin: 0;
            position: relative
        }

        .event-banner2 .banner-frame .frame-content .content-logo img {
            aspect-ratio: unset;
            height: 34px;
            width: unset
        }

        .event-banner2 .banner-frame .frame-content .info-timer {
            -webkit-backdrop-filter: blur(9px);
            backdrop-filter: blur(9px);
            background: #ffffff1f;
            border-radius: 4px;
            height: 36px;
            margin: 0;
            padding: 0 16px
        }

        .event-banner2 .banner-frame .frame-content .info-timer .timer-space {
            height: unset;
            min-width: unset;
            width: unset
        }

        .event-banner2 .banner-frame .frame-content .info-timer .timer-space:before {
            display: none
        }

        .event-banner2 .banner-frame .frame-content .info-timer .timer-space:after {
            background-color: unset;
            content: ":";
            height: unset;
            letter-spacing: .01px;
            width: unset;
            border-radius: 0;
            margin: 0;
            font-size: 16px;
            font-weight: 700;
            line-height: 24px
        }

        .event-banner2 .banner-frame .frame-content .info-timer .timer-box {
            -webkit-backdrop-filter: none;
            backdrop-filter: none;
            background-color: unset;
            height: unset;
            min-width: unset;
            width: unset;
            flex-direction: row;
            gap: 4px
        }

        .event-banner2 .banner-frame .frame-content .info-timer .timer-box .box-title,
        .event-banner2 .banner-frame .frame-content .info-timer .timer-box .box-value {
            color: #fff;
            letter-spacing: .01px;
            text-transform: uppercase;
            font-size: 16px;
            font-weight: 700;
            line-height: 24px;
            margin: 0 !important
        }

        .event-banner2 .banner-frame .frame-content .info-timer .timer-box.__day {
            margin-right: 20px
        }

        .event-banner2 .banner-frame .frame-content .info-timer .timer-box.__day+.timer-space,
        .event-banner2 .banner-frame .frame-content .info-timer .timer-box:not(.__day) .box-title {
            display: none
        }

        .event-banner2 .banner-frame .frame-content>.button {
            width: 100%
        }
    }

    @media only screen and (width<=1200px) {
        .event-banner2 {
            margin-bottom: 16px
        }

        .event-banner2 .banner-frame {
            border-radius: 16px
        }
    }

    @media only screen and (width<=900px) {
        .event-banner2 {
            flex-direction: column-reverse;
            gap: 0;
            margin-bottom: 0
        }

        .event-banner2 .banner-frame {
            border-radius: 0
        }

        .event-banner2 .banner-nav {
            background-color: unset;
            border-radius: 0;
            width: calc(100% - 40px);
            margin: 0 auto;
            padding: 16px 0
        }

        .event-banner2 .banner-nav .nav-list {
            gap: 16px;
            width: 100%
        }

        .event-banner2 .banner-nav .nav-list .list-element {
            height: 48px !important;
            padding: 0 !important
        }

        .event-banner2 .banner-nav .nav-list .list-element .element-link {
            width: 50%
        }

        .event-banner2 .banner-nav .nav-list .list-element .element-link .link-text {
            gap: 2px
        }

        .event-banner2 .banner-nav .nav-list .list-element .element-link .link-text .text-title {
            letter-spacing: 0;
            font-size: 10px;
            font-weight: 700;
            line-height: 14px
        }

        .event-banner2 .banner-nav .nav-list .list-element .element-link .link-text .text-login {
            letter-spacing: 0;
            font-size: 8px;
            font-weight: 700;
            line-height: normal
        }

        .event-banner2 .banner-nav .nav-list .list-element.__mode {
            background-color: #191e2a;
            background-image: linear-gradient(#353a5a1f, #353a5a1f);
            width: calc(33.3333% - 10.6667px);
            padding: 0 12px !important
        }

        .event-banner2 .banner-nav .nav-list .list-element.__mode .link-render {
            width: 70px;
            height: 46px;
            top: 1px;
            right: -10px
        }
    }

    @media only screen and (width<=560px) {
        .event-banner2 {
            flex-direction: column-reverse;
            gap: 0;
            max-width: 100%;
            padding-top: 0;
            display: flex
        }

        .event-banner2 .banner-frame {
            border-radius: 0
        }

        .event-banner2 .banner-nav .nav-list {
            gap: 8px
        }

        .event-banner2 .banner-nav .nav-list .list-element.__mode {
            width: calc(33.3333% - 5.33333px)
        }
    }


    .home-hero .home-hero-container {
        flex-direction: column;
        gap: 16px;
        width: 1500px;
        max-width: calc(100% - 40px);
        margin: 0 auto;
        padding-top: 16px;
        display: flex
    }

    .home-hero .home-hero-container>* {
        width: 100%;
        max-width: 100%
    }

    @media only screen and (width<=900px) {
        .home-hero .home-hero-container .alert-banner {
            border-radius: 0
        }

        .home-hero .home-hero-container {
            gap: 0;
            max-width: 100%;
            padding-top: 0
        }
    }


    .home-filter-mobile {
        z-index: 9;
        align-items: center;
        gap: 8px;
        display: none;
        position: fixed;
        bottom: 122px;
        left: 50%;
        transform: translate(-50%)
    }

    @media only screen and (width<=750px) {
        .home-filter-mobile {
            display: flex
        }
    }

    .home-filter-mobile .home-filter-mobile-pill {
        color: #e6e9ef;
        cursor: pointer;
        letter-spacing: .02px;
        text-transform: uppercase;
        background-color: #353a5a;
        border-radius: 8px;
        align-items: center;
        gap: 8px;
        height: 32px;
        padding: 0 12px;
        font-size: 12px;
        font-weight: 600;
        line-height: 16px;
        display: flex;
        position: relative
    }

    .home-filter-mobile .home-filter-mobile-pill .home-filter-mobile-pill-icon {
        color: #e6e9ef;
        width: 16px;
        height: 16px
    }


    .home-sort-popup-modal * {
        font-family: Switzer, sans-serif
    }

    .home-sort-popup-modal .popup_box-container-box .popup_box-container {
        background-color: #191e2a;
        border-radius: 0
    }

    .home-sort-popup {
        flex-direction: column;
        gap: 24px;
        display: flex
    }

    .home-sort-popup .home-sort-popup-title {
        align-items: center;
        gap: 12px;
        height: 40px;
        display: flex
    }

    .home-sort-popup .home-sort-popup-title .home-sort-popup-title-icon {
        color: #b055ff;
        width: 24px;
        height: 24px
    }

    .home-sort-popup .home-sort-popup-title .home-sort-popup-title-text {
        color: #fff;
        letter-spacing: 0;
        text-transform: uppercase;
        font-size: 18px;
        font-weight: 600;
        line-height: 28px
    }

    .home-sort-popup .home-sort-popup-list {
        flex-direction: column;
        gap: 16px;
        width: 100%;
        display: flex
    }

    .home-sort-popup .home-sort-popup-list .radio-button {
        flex-direction: row-reverse;
        justify-content: space-between;
        width: 100%
    }

    .home-sort-popup .home-sort-popup-list .home-sort-popup-option {
        align-items: center;
        gap: 8px;
        display: flex
    }

    .home-sort-popup .home-sort-popup-list .home-sort-popup-option .home-sort-popup-option-icon {
        color: #b055ff;
        width: 24px;
        height: 24px
    }

    .home-sort-popup .home-sort-popup-list .home-sort-popup-option .home-sort-popup-option-label {
        color: #fff;
        letter-spacing: .01px;
        font-size: 14px;
        font-weight: 500;
        line-height: 20px
    }

    .home-sort-popup .home-sort-popup-list .home-sort-popup-option .home-sort-popup-option-label .home-sort-popup-option-label-suffix {
        color: #9ba7bf
    }

    .home-sort-popup .home-sort-popup-actions {
        gap: 8px;
        display: flex
    }

    .home-sort-popup .home-sort-popup-actions .button {
        flex: 1 0 0
    }


    .form-error {
        padding-left: 18px;
        position: relative
    }

    .form-error,
    .form-error * {
        color: #ff3d33;
        letter-spacing: .02px;
        font-size: 12px;
        font-weight: 500;
        line-height: 16px
    }

    .form-error:before {
        content: "";
        background-color: currentColor;
        width: 14px;
        height: 14px;
        display: block;
        position: absolute;
        top: 50%;
        left: 0;
        transform: translateY(-50%);
        -webkit-mask-image: url(/img/icon/info.svg);
        mask-image: url(/img/icon/info.svg);
        -webkit-mask-position: 50%;
        mask-position: 50%;
        -webkit-mask-size: contain;
        mask-size: contain;
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat
    }


    .radio-button-group {
        gap: 32px;
        display: flex
    }

    .radio-button-group__label {
        color: #e6e9ef;
        letter-spacing: .01px;
        margin-bottom: 8px;
        font-size: 16px;
        font-weight: 500;
        line-height: 24px
    }

    .radio-button-group__error {
        margin-top: 4px
    }


    .home-filters-popup-modal * {
        font-family: Switzer, sans-serif
    }

    .home-filters-popup-modal .popup_box-container-box .popup_box-container {
        background-color: #191e2a;
        border-radius: 0
    }

    .home-filters-popup {
        flex-direction: column;
        gap: 24px;
        display: flex
    }

    .home-filters-popup .home-filters-popup-title {
        align-items: center;
        gap: 12px;
        height: 40px;
        display: flex
    }

    .home-filters-popup .home-filters-popup-title .home-filters-popup-title-icon {
        color: #b055ff;
        width: 24px;
        height: 24px
    }

    .home-filters-popup .home-filters-popup-title .home-filters-popup-title-text {
        color: #fff;
        letter-spacing: 0;
        text-transform: uppercase;
        font-size: 18px;
        font-weight: 600;
        line-height: 28px
    }

    .home-filters-popup .radio-button-group {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
        width: 100%
    }

    .home-filters-popup .home-filters-popup-actions {
        gap: 8px;
        display: flex
    }

    .home-filters-popup .home-filters-popup-actions .button {
        flex: none
    }

    .home-filters-popup .home-filters-popup-actions .button:first-of-type {
        padding: 0 16px
    }

    .home-filters-popup .home-filters-popup-actions .button:last-of-type {
        padding: 0 12px
    }

    .home-filters-popup .home-filters-popup-actions .button .button-label {
        text-transform: unset
    }

    .home-filters-popup .home-filters-popup-actions .button:last-child {
        flex: 1 0 0
    }


    .home-filter-mobile-fade-enter-active,
    .home-filter-mobile-fade-leave-active {
        transition: opacity .3s, transform .3s
    }

    .home-filter-mobile-fade-enter-from,
    .home-filter-mobile-fade-leave-to {
        opacity: 0;
        transform: translate(-50%, 16px)
    }

    .case-filter {
        z-index: 9;
        background-color: #1b1f2b;
        border-radius: 0 0 16px 16px;
        margin: 0 auto;
        transition: all .3s;
        position: sticky;
        top: 66px
    }

    @media only screen and (width<=1200px) {
        .case-filter {
            border-radius: 16px
        }
    }

    .case-filter {
        width: 1500px;
        max-width: calc(100% - 40px)
    }

    @media only screen and (width<=750px) {
        .case-filter {
            border-radius: 0;
            width: 100%;
            max-width: 100%
        }
    }

    .case-filter.full {
        border-radius: 16px
    }

    .case-filter.full:after {
        content: "";
        opacity: 0;
        pointer-events: none;
        z-index: -1;
        background-color: #1b1f2b;
        width: 100vw;
        height: 100%;
        transition: all .3s;
        display: flex;
        position: absolute;
        top: 0;
        left: 50%;
        transform: translate(-50%)
    }

    .case-filter .filter-box {
        width: 1500px;
        max-width: calc(100% - 40px);
        margin: 0 auto;
        padding: 24px 0;
        transition: all .3s;
        display: flex
    }

    .case-filter .filter-box .filter-box-content {
        width: calc(100% + 16px);
        margin: -8px;
        display: flex
    }

    .case-filter .filter-box .fav-btn,
    .case-filter .filter-box .filter-box-available,
    .case-filter .filter-box .filter-box-clear,
    .case-filter .filter-box .filter-box-low,
    .case-filter .filter-box .filter-box-name,
    .case-filter .filter-box .filter-box-price,
    .case-filter .filter-box .filter-box-type {
        align-items: center;
        margin: 8px;
        display: flex
    }

    .case-filter .filter-box .filter-box-low .G_Select {
        width: 208px
    }

    .case-filter .filter-box .filter-box-type {
        width: 440px
    }

    .case-filter .filter-box .fav-btn {
        cursor: pointer;
        background: #606d871a;
        border: 1px solid #606d87;
        border-radius: 8px;
        justify-content: center;
        align-items: center;
        width: 44px;
        height: 44px;
        transition: all .3s;
        display: flex
    }

    .case-filter .filter-box .fav-btn .fav-btn-icon {
        width: 16px;
        height: 16px;
        -webkit-mask-position: 50%;
        mask-position: 50%;
        -webkit-mask-size: contain;
        mask-size: contain;
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat
    }

    .case-filter .filter-box .fav-btn .fav-btn-icon path {
        fill: #606d8700;
        stroke: #606d87;
        transition: all .3s
    }

    .case-filter .filter-box .fav-btn:hover {
        background: #fccb131a;
        border: 1px solid #fccb13
    }

    .case-filter .filter-box .fav-btn:hover .fav-btn-icon path {
        stroke: #fccb13
    }

    .case-filter .filter-box .fav-btn:hover:hover {
        background: #fccb134d
    }

    .case-filter .filter-box .fav-btn.__active,
    .case-filter .filter-box .fav-btn:active {
        border: 1px solid #fccb13;
        background: #fccb1366 !important
    }

    .case-filter .filter-box .fav-btn.__active .fav-btn-icon path,
    .case-filter .filter-box .fav-btn:active .fav-btn-icon path {
        stroke: #fff;
        fill: #fff !important
    }

    .case-filter .filter-box .low-btn {
        cursor: pointer;
        background: #606d871a;
        border: 1px solid #606d87;
        border-radius: 8px;
        justify-content: center;
        align-items: center;
        width: 44px;
        height: 44px;
        transition: all .3s;
        display: flex
    }

    .case-filter .filter-box .low-btn .img {
        background-color: #606d87;
        width: 16px;
        height: 16px;
        transition: all .3s;
        -webkit-mask-position: 50%;
        mask-position: 50%;
        -webkit-mask-size: contain;
        mask-size: contain;
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat
    }

    .case-filter .filter-box .low-btn:hover {
        background: #fccb131a;
        border: 1px solid #fccb13
    }

    .case-filter .filter-box .low-btn:hover .img {
        background-color: #fccb13
    }

    .case-filter .filter-box .low-btn:hover:hover {
        background: #fccb134d
    }

    .case-filter .filter-box .low-btn.__active,
    .case-filter .filter-box .low-btn:active {
        border: 1px solid #fccb13;
        background: #fccb1366 !important
    }

    .case-filter .filter-box .low-btn.__active .img,
    .case-filter .filter-box .low-btn:active .img {
        background-color: #fff
    }

    .case-filter .filter-box .filter-box-name {
        width: 230px
    }

    .case-filter .filter-box .filter-box-name,
    .case-filter .filter-box .filter-box-price {
        width: 240px
    }

    .case-filter .filter-box .filter-box-price .price-space {
        background-color: #2e394f;
        width: 6px;
        min-width: 6px;
        height: 1.5px;
        margin: 0 8px
    }

    .case-filter .filter-box .filter-box-clear {
        margin-left: auto
    }

    .case-filter .filter-box .filter-box-clear .clear-button {
        cursor: pointer;
        align-items: center;
        min-height: 44px;
        display: flex
    }

    .case-filter .filter-box .filter-box-clear .clear-button .clear-text {
        margin-right: 12px
    }

    .case-filter .filter-box .filter-box-clear .clear-button .clear-text .G_Text-content {
        color: #606d87;
        font-size: 12px;
        font-weight: 600;
        transition: all .3s
    }

    .case-filter .filter-box .filter-box-clear .clear-button .clear-icon {
        color: #606d87;
        width: 20px;
        min-width: 20px;
        height: 20px;
        transition: color .3s;
        -webkit-mask-position: 50%;
        mask-position: 50%;
        -webkit-mask-size: contain;
        mask-size: contain;
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat
    }

    .case-filter .filter-box .filter-box-clear .clear-button:hover .clear-icon,
    .case-filter .filter-box .filter-box-clear .clear-button:hover .clear-text .G_Text-content {
        color: #31bbff
    }

    .case-filter.__top {
        border-radius: 0;
        width: 100%;
        max-width: 100%
    }

    .case-filter.__top .filter-box {
        padding: 16px 0
    }

    .case-filter.__top.full:after {
        opacity: 1
    }

    @media only screen and (width<=1440px) {
        .case-filter {
            position: static
        }

        .case-filter .filter-box .filter-box-content {
            flex-wrap: wrap
        }

        .case-filter .filter-box .filter-box-content .filter-box-type {
            width: calc(100% - 16px)
        }

        .case-filter .filter-box .filter-box-content .filter-box-low {
            order: 1;
            width: calc(50% - 16px)
        }

        .case-filter .filter-box .filter-box-content .filter-box-low .G_Select {
            width: 100%
        }

        .case-filter .filter-box .filter-box-content .filter-box-name {
            order: 2;
            width: calc(50% - 16px)
        }

        .case-filter .filter-box .filter-box-content .filter-box-fav {
            order: 4
        }

        .case-filter .filter-box .filter-box-content .filter-box-available {
            order: 5
        }

        .case-filter .filter-box .filter-box-content .filter-box-clear {
            order: 6
        }

        .case-filter .filter-box .filter-box-content .filter-box-price {
            order: 3;
            width: calc(50% - 16px)
        }
    }

    @media only screen and (width<=560px) {
        .case-filter .filter-box .filter-box-content .filter-box-price {
            width: calc(100% - 16px)
        }
    }

    @media only screen and (width<=750px) {
        .case-filter .filter-box {
            display: none
        }
    }


    .case-category-type-default {
        width: 1500px;
        max-width: calc(100% - 40px);
        margin: 0 auto;
        padding-bottom: 8px;
        position: relative;
        overflow: hidden
    }

    .case-category-type-default .section-title {
        cursor: pointer;
        margin: 44px 0 0
    }

    .case-category-type-default .section-title .title-nav {
        gap: 16px
    }

    .case-category-type-default .section-title .title-box .title-box-text {
        margin: 0 12px
    }

    @media only screen and (width<=900px) {
        .case-category-type-default .section-title .title-box .title-box-text {
            max-width: calc(100% - 60px) !important
        }
    }

    .case-category-type-default .section-title .category-arrow {
        transition: transform .3s;
        transform: rotate(180deg)
    }

    .case-category-type-default .section-title .category-arrow.__active {
        transform: rotate(0)
    }

    .case-category-type-default .category-list {
        flex-wrap: wrap;
        width: calc(100% + 16px);
        margin: -8px;
        padding-top: 32px;
        display: flex
    }

    .case-category-type-default .category-list .CaseBox {
        width: calc(16.6667% - 24px);
        margin: 12px
    }

    @media only screen and (width<=1300px) {
        .case-category-type-default .category-list .CaseBox {
            width: calc(20% - 16px);
            margin: 8px
        }
    }

    @media only screen and (width<=1100px) {
        .case-category-type-default .category-list .CaseBox {
            width: calc(25% - 16px);
            margin: 8px
        }
    }

    @media only screen and (width<=750px) {
        .case-category-type-default .category-list .CaseBox {
            width: calc(33.3333% - 16px);
            margin: 8px
        }
    }

    @media only screen and (width<=570px) {
        .case-category-type-default .category-list .CaseBox {
            width: calc(50% - 16px);
            margin: 8px
        }
    }


    .case-category-type-1_3 {
        background-color: #101319;
        background-size: cover;
        border: 1px solid #2e394f;
        border-radius: 24px;
        width: 1500px;
        max-width: calc(100% - 40px);
        margin: 28px auto -4px;
        position: relative
    }

    .case-category-type-1_3 .special-box {
        border-radius: 24px;
        width: 100%;
        height: 100%;
        display: flex;
        position: absolute;
        top: 0;
        left: 0
    }

    @media only screen and (width<=570px) {
        .case-category-type-1_3 {
            border: none;
            border-radius: 0;
            max-width: 100%;
            overflow: hidden
        }

        .case-category-type-1_3 .special-box {
            border-radius: 0
        }
    }

    .case-category-type-1_3 .special-container {
        display: flex;
        position: relative
    }

    .case-category-type-1_3 .special-container .special-info {
        z-index: 2;
        flex-direction: column;
        justify-content: center;
        width: max-content;
        height: 100%;
        padding: 24px 56px;
        display: flex;
        position: absolute;
        top: 0;
        left: 0
    }

    .case-category-type-1_3 .special-container .special-info .info-logo {
        width: 250px
    }

    .case-category-type-1_3 .special-container .special-info .info-time-title {
        margin: 0 auto 8px
    }

    .case-category-type-1_3 .special-container .special-info .info-time-title .G_Text-content {
        color: #bfbfbf;
        font-size: 16px;
        font-weight: 600
    }

    .case-category-type-1_3 .special-container .special-info .info-timer {
        align-items: center;
        display: flex
    }

    .case-category-type-1_3 .special-container .special-info .info-timer .timer-box {
        border-radius: 8px;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 52px;
        height: 52px;
        display: flex
    }

    .case-category-type-1_3 .special-container .special-info .info-timer .timer-box .box-value .G_Text-content {
        font-size: 24px;
        font-weight: 700
    }

    .case-category-type-1_3 .special-container .special-info .info-timer .timer-box .box-title {
        margin-top: 4px
    }

    .case-category-type-1_3 .special-container .special-info .info-timer .timer-box .box-title .G_Text-content {
        color: #bfbfbf;
        font-size: 12px;
        font-weight: 600
    }

    .case-category-type-1_3 .special-container .special-info .info-timer .timer-space {
        padding: 0 4px 8.5px;
        font-size: 24px;
        font-weight: 700;
        line-height: 2px
    }

    .case-category-type-1_3 .special-container .special-info:has(.info-time-title) .info-logo {
        margin-bottom: 16px
    }

    .case-category-type-1_3 .special-container .special-render {
        height: 300px;
        max-height: calc(100% + 20px);
        position: absolute;
        bottom: 0;
        right: 50%
    }

    .case-category-type-1_3 .special-container .special-cases {
        width: 100%;
        height: max-content;
        margin-left: auto;
        padding: 12px
    }

    .case-category-type-1_3 .special-container .special-cases .cases-list {
        flex-wrap: wrap;
        padding-left: calc(50% - 21px);
        display: flex
    }

    .case-category-type-1_3 .special-container .special-cases .cases-list .g_case {
        width: calc(33.3333% - 24px);
        margin: 12px
    }

    @media only screen and (width<=1300px) {
        .case-category-type-1_3 .special-container .special-cases .cases-list {
            padding-left: calc(40% - 41.2px)
        }

        .case-category-type-1_3 .special-container .special-cases .cases-list .g_case {
            width: calc(33.3333% - 16px);
            margin: 8px
        }
    }

    @media only screen and (width<=1100px) {
        .case-category-type-1_3 .special-container {
            flex-direction: column
        }

        .case-category-type-1_3 .special-container .special-info {
            align-items: center;
            width: 100%;
            position: relative
        }

        .case-category-type-1_3 .special-container .special-render {
            height: 400px;
            display: none;
            right: 0
        }

        .case-category-type-1_3 .special-container .special-cases {
            position: relative
        }

        .case-category-type-1_3 .special-container .special-cases .cases-list {
            padding-left: calc(12.5% - 23.755px);
            padding-right: calc(12.5% - 23.755px)
        }
    }

    @media only screen and (width<=750px) {
        .case-category-type-1_3 .special-container .special-cases {
            position: relative
        }

        .case-category-type-1_3 .special-container .special-cases .cases-list {
            padding-left: 0;
            padding-right: 0
        }
    }

    @media only screen and (width<=570px) {
        .case-category-type-1_3 .special-container .special-info {
            padding-bottom: 0
        }

        .case-category-type-1_3 .special-container .special-cases {
            padding: 12px
        }

        .case-category-type-1_3 .special-container .special-cases .cases-list {
            padding-left: 0;
            padding-right: 0
        }

        .case-category-type-1_3 .special-container .special-cases .cases-list .g_case {
            width: calc(50% - 16px);
            margin: 8px
        }

        .case-category-type-1_3 .special-container .special-cases .cases-list .g_case:first-of-type {
            margin-left: calc(25% + 8px);
            margin-right: calc(25% + 8px)
        }
    }

    .case-category-type-1_3.long .special-container {
        flex-direction: column
    }

    .case-category-type-1_3.long .special-container .special-info {
        flex-direction: row;
        width: 100%;
        padding: 24px 24px 12px;
        position: relative
    }

    @media only screen and (width<=1300px) {
        .case-category-type-1_3.long .special-container .special-info {
            padding: 20px 20px 12px
        }
    }

    .case-category-type-1_3.long .special-container .special-info .info-logo {
        -o-object-fit: contain;
        object-fit: contain;
        width: auto;
        max-width: 100%;
        height: 52px;
        margin-bottom: 0
    }

    .case-category-type-1_3.long .special-container .special-info .info-time-title {
        display: none
    }

    .case-category-type-1_3.long .special-container .special-info .info-logo {
        margin-right: auto
    }

    .case-category-type-1_3.long .special-container .special-info .info-timer .timer-box {
        background: #0c0e1480
    }

    @media only screen and (width<=750px) {
        .case-category-type-1_3.long .special-container .special-info {
            flex-direction: column;
            justify-content: center;
            align-items: center
        }

        .case-category-type-1_3.long .special-container .special-info .info-logo {
            margin: 0 0 12px
        }
    }

    .case-category-type-1_3.long .special-container .special-cases {
        padding-top: 0
    }

    @media only screen and (width<=1300px) {
        .case-category-type-1_3.long .special-container .special-cases {
            padding: 0 12px 12px
        }
    }

    .case-category-type-1_3.long .special-container .special-cases .cases-list {
        width: 100%;
        padding-left: 0 !important;
        padding-right: 0 !important
    }

    .case-category-type-1_3.long .special-container .special-cases .cases-list .g_case {
        width: calc(16.6667% - 24px)
    }

    @media only screen and (width<=1300px) {
        .case-category-type-1_3.long .special-container .special-cases .cases-list .g_case {
            width: calc(20% - 16px);
            margin: 8px
        }
    }

    @media only screen and (width<=1100px) {
        .case-category-type-1_3.long .special-container .special-cases .cases-list .g_case {
            width: calc(25% - 16px)
        }
    }

    @media only screen and (width<=750px) {
        .case-category-type-1_3.long .special-container .special-cases .cases-list .g_case {
            width: calc(33.3333% - 16px)
        }
    }

    @media only screen and (width<=570px) {
        .case-category-type-1_3.long .special-container .special-cases .cases-list .g_case {
            width: calc(50% - 16px)
        }
    }


    .case-category-type-1_4 {
        background-color: #101319;
        background-size: cover;
        border-radius: 24px;
        width: 1500px;
        max-width: calc(100% - 40px);
        margin: 28px auto -4px;
        position: relative
    }

    @media only screen and (width<=1100px) {
        .case-category-type-1_4 {
            overflow: hidden
        }
    }

    .case-category-type-1_4 .special-box {
        border-radius: 24px;
        width: 100%;
        height: 100%;
        display: flex;
        position: absolute;
        top: 0;
        left: 0;
        overflow: hidden
    }

    .case-category-type-1_4 .special-box-image {
        -o-object-fit: cover;
        object-fit: cover;
        width: 100%;
        height: 100%
    }

    .case-category-type-1_4 .special-container {
        justify-content: space-between;
        align-items: center;
        width: 100%;
        display: flex;
        position: relative
    }

    .case-category-type-1_4 .special-container .special-info {
        z-index: 2;
        flex-direction: column;
        justify-content: center;
        width: 340px;
        height: 100%;
        padding: 24px 0 24px 36px;
        display: flex
    }

    @media only screen and (width<=1100px) {
        .case-category-type-1_4 .special-container .special-info {
            justify-content: flex-end;
            padding-bottom: 12px
        }
    }

    .case-category-type-1_4 .special-container .special-info .info-logo {
        z-index: 2;
        width: 205px;
        height: 90px;
        margin-bottom: 24px;
        position: relative
    }

    .case-category-type-1_4 .special-container .special-info .info-logo img {
        -o-object-fit: contain;
        object-fit: contain;
        -o-object-position: left center;
        object-position: left center;
        width: 100%;
        height: 100%
    }

    .case-category-type-1_4 .special-container .special-info .G_Button {
        z-index: 2;
        margin-bottom: 12px;
        position: relative
    }

    .case-category-type-1_4 .special-container .special-info .info-event {
        z-index: 2;
        background: #191e2acc;
        border-radius: 8px;
        align-items: center;
        gap: 10px;
        width: max-content;
        padding: 8px 12px;
        display: flex;
        position: relative;
        overflow: hidden
    }

    @media only screen and (width<=1100px) {
        .case-category-type-1_4 .special-container .special-info .info-event {
            max-width: calc(100% - 24px)
        }
    }

    .case-category-type-1_4 .special-container .special-info .info-event .event-icon {
        width: 20px
    }

    .case-category-type-1_4 .special-container .special-info .info-event .event-desc {
        width: max-content
    }

    .case-category-type-1_4 .special-container .special-info .info-event .event-desc .G_Text-content {
        color: #d2a0ff;
        font-size: 13px;
        font-weight: 700
    }

    .case-category-type-1_4 .special-container .special-render {
        pointer-events: none;
        height: calc(100% + 43px);
        min-height: calc(100% + 43px);
        position: absolute;
        bottom: 0;
        left: 190px
    }

    .case-category-type-1_4 .special-container .special-render img {
        width: auto;
        height: 100%;
        min-height: 100%;
        display: block
    }

    .case-category-type-1_4 .special-container .special-cases {
        width: 66.6667%;
        height: max-content;
        margin-left: auto;
        padding: 12px
    }

    .case-category-type-1_4 .special-container .special-cases .cases-list {
        flex-wrap: wrap;
        width: 100%;
        display: flex
    }

    .case-category-type-1_4 .special-container .special-cases .cases-list .g_case {
        width: calc(25% - 24px);
        margin: 12px
    }

    @media only screen and (width<=1100px) {
        .case-category-type-1_4 .special-container {
            flex-direction: column-reverse
        }

        .case-category-type-1_4 .special-container .special-info {
            z-index: 3;
            justify-content: flex-end;
            align-items: flex-start;
            width: 100%;
            min-height: 240px;
            padding-left: 24px;
            position: relative
        }

        .case-category-type-1_4 .special-container .special-info .info-event {
            margin-bottom: 12px
        }

        .case-category-type-1_4 .special-container .special-render {
            height: 235px;
            left: unset;
            z-index: 2;
            min-height: 235px;
            right: -100px
        }

        .case-category-type-1_4 .special-container .special-cases {
            width: 100%;
            margin-bottom: -16px;
            position: relative
        }
    }

    @media only screen and (width<=750px) {
        .case-category-type-1_4 .special-container .special-cases {
            position: relative
        }

        .case-category-type-1_4 .special-container .special-cases .cases-list {
            padding-left: 0;
            padding-right: 0
        }
    }

    @media only screen and (width<=570px) {
        .case-category-type-1_4 .special-container .special-info {
            padding-bottom: 0
        }

        .case-category-type-1_4 .special-container .special-cases {
            padding: 12px
        }

        .case-category-type-1_4 .special-container .special-cases .cases-list {
            padding-left: 0;
            padding-right: 0
        }

        .case-category-type-1_4 .special-container .special-cases .cases-list .g_case {
            width: calc(50% - 16px);
            margin: 8px
        }
    }

    .case-category-type-1_4.long .special-container {
        flex-direction: column
    }

    .case-category-type-1_4.long .special-container .special-info {
        flex-direction: row;
        width: 100%;
        padding: 24px 24px 12px;
        position: relative
    }

    @media only screen and (width<=1300px) {
        .case-category-type-1_4.long .special-container .special-info {
            padding: 20px 20px 12px
        }
    }

    .case-category-type-1_4.long .special-container .special-info .info-logo {
        -o-object-fit: contain;
        object-fit: contain;
        width: auto;
        max-width: 100%;
        height: 52px;
        margin-bottom: 0
    }

    .case-category-type-1_4.long .special-container .special-info .info-time-title {
        display: none
    }

    .case-category-type-1_4.long .special-container .special-info .info-logo {
        margin-right: auto
    }

    .case-category-type-1_4.long .special-container .special-info .info-timer .timer-box {
        background: #0c0e1480
    }

    @media only screen and (width<=750px) {
        .case-category-type-1_4.long .special-container .special-info {
            flex-direction: column;
            justify-content: center;
            align-items: center
        }

        .case-category-type-1_4.long .special-container .special-info .info-logo {
            margin: 0 0 12px
        }
    }

    .case-category-type-1_4.long .special-container .special-cases {
        padding-top: 0
    }

    @media only screen and (width<=1300px) {
        .case-category-type-1_4.long .special-container .special-cases {
            padding: 0 12px 12px
        }
    }

    .case-category-type-1_4.long .special-container .special-cases .cases-list {
        width: 100%;
        padding-left: 0 !important;
        padding-right: 0 !important
    }

    .case-category-type-1_4.long .special-container .special-cases .cases-list .g_case {
        width: calc(16.6667% - 24px)
    }

    @media only screen and (width<=1300px) {
        .case-category-type-1_4.long .special-container .special-cases .cases-list .g_case {
            width: calc(20% - 16px);
            margin: 8px
        }
    }

    @media only screen and (width<=1100px) {
        .case-category-type-1_4.long .special-container .special-cases .cases-list .g_case {
            width: calc(25% - 16px)
        }
    }

    @media only screen and (width<=750px) {
        .case-category-type-1_4.long .special-container .special-cases .cases-list .g_case {
            width: calc(33.3333% - 16px)
        }
    }

    @media only screen and (width<=570px) {
        .case-category-type-1_4.long .special-container .special-cases .cases-list .g_case {
            width: calc(50% - 16px)
        }
    }


    .case-category-type-1_6 {
        background-color: #101319;
        background-size: cover;
        border: 1px solid #2e394f;
        border-radius: 24px;
        width: 1500px;
        max-width: calc(100% - 40px);
        margin: 28px auto -4px;
        position: relative
    }

    .case-category-type-1_6 .special-box {
        opacity: .4;
        border-radius: 24px;
        width: 100%;
        height: 100%;
        display: flex;
        position: absolute;
        top: 0;
        left: 0
    }

    @media only screen and (width<=570px) {
        .case-category-type-1_6 {
            border: none;
            border-radius: 0;
            max-width: 100%;
            overflow: hidden
        }

        .case-category-type-1_6 .special-box {
            border-radius: 0
        }
    }

    .case-category-type-1_6 .special-container {
        display: flex;
        position: relative
    }

    .case-category-type-1_6 .special-container .special-info {
        z-index: 2;
        flex-direction: column;
        justify-content: center;
        width: max-content;
        height: 100%;
        padding: 24px 56px;
        display: flex;
        position: absolute;
        top: 0;
        left: 0
    }

    .case-category-type-1_6 .special-container .special-info .info-logo {
        width: 250px
    }

    .case-category-type-1_6 .special-container .special-info .info-time-title {
        margin: 0 auto 8px
    }

    .case-category-type-1_6 .special-container .special-info .info-time-title .G_Text-content {
        color: #bfbfbf;
        font-size: 16px;
        font-weight: 600
    }

    .case-category-type-1_6 .special-container .special-info .info-timer {
        align-items: center;
        display: flex
    }

    .case-category-type-1_6 .special-container .special-info .info-timer .timer-box {
        border-radius: 8px;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 52px;
        height: 52px;
        display: flex
    }

    .case-category-type-1_6 .special-container .special-info .info-timer .timer-box .box-value .G_Text-content {
        font-size: 24px;
        font-weight: 700
    }

    .case-category-type-1_6 .special-container .special-info .info-timer .timer-box .box-title {
        margin-top: 4px
    }

    .case-category-type-1_6 .special-container .special-info .info-timer .timer-box .box-title .G_Text-content {
        color: #bfbfbf;
        font-size: 12px;
        font-weight: 600
    }

    .case-category-type-1_6 .special-container .special-info .info-timer .timer-space {
        padding: 0 4px 8.5px;
        font-size: 24px;
        font-weight: 700;
        line-height: 2px
    }

    .case-category-type-1_6 .special-container .special-info:has(.info-time-title) .info-logo {
        margin-bottom: 16px
    }

    .case-category-type-1_6 .special-container .special-render {
        height: 300px;
        max-height: calc(100% + 20px);
        position: absolute;
        bottom: 0;
        right: 50%
    }

    .case-category-type-1_6 .special-container .special-cases {
        width: 100%;
        height: max-content;
        margin-left: auto;
        padding: 12px
    }

    .case-category-type-1_6 .special-container .special-cases .cases-list {
        flex-wrap: wrap;
        padding-left: calc(50% - 21px);
        display: flex
    }

    .case-category-type-1_6 .special-container .special-cases .cases-list .g_case {
        width: calc(33.3333% - 24px);
        margin: 12px
    }

    @media only screen and (width<=1300px) {
        .case-category-type-1_6 .special-container .special-cases .cases-list {
            padding-left: calc(40% - 41.2px)
        }

        .case-category-type-1_6 .special-container .special-cases .cases-list .g_case {
            width: calc(33.3333% - 16px);
            margin: 8px
        }
    }

    @media only screen and (width<=1100px) {
        .case-category-type-1_6 .special-container {
            flex-direction: column
        }

        .case-category-type-1_6 .special-container .special-info {
            align-items: center;
            width: 100%;
            position: relative
        }

        .case-category-type-1_6 .special-container .special-render {
            height: 400px;
            display: none;
            right: 0
        }

        .case-category-type-1_6 .special-container .special-cases {
            position: relative
        }

        .case-category-type-1_6 .special-container .special-cases .cases-list {
            padding-left: calc(12.5% - 23.755px);
            padding-right: calc(12.5% - 23.755px)
        }
    }

    @media only screen and (width<=750px) {
        .case-category-type-1_6 .special-container .special-cases {
            position: relative
        }

        .case-category-type-1_6 .special-container .special-cases .cases-list {
            padding-left: 0;
            padding-right: 0
        }
    }

    @media only screen and (width<=570px) {
        .case-category-type-1_6 .special-container .special-info {
            padding-bottom: 0
        }

        .case-category-type-1_6 .special-container .special-cases {
            padding: 12px
        }

        .case-category-type-1_6 .special-container .special-cases .cases-list {
            padding-left: 0;
            padding-right: 0
        }

        .case-category-type-1_6 .special-container .special-cases .cases-list .g_case {
            width: calc(50% - 16px);
            margin: 8px
        }

        .case-category-type-1_6 .special-container .special-cases .cases-list .g_case:first-of-type {
            margin-left: calc(25% + 8px);
            margin-right: calc(25% + 8px)
        }
    }

    .case-category-type-1_6 .special-container {
        flex-direction: column
    }

    .case-category-type-1_6 .special-container .special-info {
        flex-direction: row;
        width: 100%;
        padding: 24px 24px 12px;
        position: relative
    }

    @media only screen and (width<=1300px) {
        .case-category-type-1_6 .special-container .special-info {
            padding: 20px 20px 12px
        }
    }

    .case-category-type-1_6 .special-container .special-info .info-logo {
        -o-object-fit: contain;
        object-fit: contain;
        width: auto;
        max-width: 100%;
        height: 52px;
        margin-bottom: 0
    }

    .case-category-type-1_6 .special-container .special-info .info-time-title {
        display: none
    }

    .case-category-type-1_6 .special-container .special-info .info-logo {
        margin-right: auto
    }

    .case-category-type-1_6 .special-container .special-info .info-timer .timer-box {
        background: #0c0e1480
    }

    @media only screen and (width<=750px) {
        .case-category-type-1_6 .special-container .special-info {
            flex-direction: column;
            justify-content: center;
            align-items: center
        }

        .case-category-type-1_6 .special-container .special-info .info-logo {
            margin: 0 0 12px
        }
    }

    .case-category-type-1_6 .special-container .special-cases {
        padding-top: 0
    }

    @media only screen and (width<=1300px) {
        .case-category-type-1_6 .special-container .special-cases {
            padding: 0 12px 12px
        }
    }

    .case-category-type-1_6 .special-container .special-cases .cases-list {
        width: 100%;
        padding-left: 0 !important;
        padding-right: 0 !important
    }

    .case-category-type-1_6 .special-container .special-cases .cases-list .g_case {
        width: calc(16.6667% - 24px)
    }

    @media only screen and (width<=1300px) {
        .case-category-type-1_6 .special-container .special-cases .cases-list .g_case {
            width: calc(20% - 16px);
            margin: 8px
        }
    }

    @media only screen and (width<=1100px) {
        .case-category-type-1_6 .special-container .special-cases .cases-list .g_case {
            width: calc(25% - 16px)
        }
    }

    @media only screen and (width<=750px) {
        .case-category-type-1_6 .special-container .special-cases .cases-list .g_case {
            width: calc(33.3333% - 16px)
        }
    }

    @media only screen and (width<=570px) {
        .case-category-type-1_6 .special-container .special-cases .cases-list .g_case {
            width: calc(50% - 16px)
        }
    }


    .case-category-type-2_6 {
        background-color: #101319;
        border: 1px solid #0000;
        border-radius: 24px;
        width: 1500px;
        max-width: calc(100% - 40px);
        margin: 28px auto -4px;
        position: relative
    }

    .case-category-type-2_6 .special-bg {
        border-radius: 24px;
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        overflow: hidden
    }

    .case-category-type-2_6 .special-bg-image {
        -o-object-fit: cover;
        object-fit: cover;
        -o-object-position: bottom center;
        object-position: bottom center;
        width: 100%;
        height: 100%
    }

    .case-category-type-2_6 .special-container {
        justify-content: space-between;
        padding: 24px;
        display: flex;
        position: relative
    }

    @media only screen and (width<=1300px) {
        .case-category-type-2_6 .special-container {
            padding: 16px 16px 16px 24px
        }
    }

    @media only screen and (width<=1100px) {
        .case-category-type-2_6 .special-container {
            flex-direction: column-reverse;
            padding: 16px
        }
    }

    .case-category-type-2_6 .special-container .special-hero {
        flex-direction: column;
        justify-content: flex-end;
        align-items: center;
        width: 50%;
        margin: -24px 0;
        display: flex;
        position: relative
    }

    @media only screen and (width<=1300px) {
        .case-category-type-2_6 .special-container .special-hero {
            margin: -16px 0
        }
    }

    @media only screen and (width<=1100px) {
        .case-category-type-2_6 .special-container .special-hero {
            border-radius: 0 0 24px 24px;
            width: calc(100% + 32px);
            height: 370px;
            margin: 0 -16px -16px;
            overflow: hidden
        }
    }

    .case-category-type-2_6 .special-container .special-hero .hero-render {
        width: calc(300% + 48px);
        height: calc(100% + 32px);
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translate(-50%)
    }

    .case-category-type-2_6 .special-container .special-hero .hero-render img {
        -o-object-fit: contain;
        object-fit: contain;
        -o-object-position: center bottom;
        object-position: center bottom;
        width: 100%;
        height: 100%;
        display: block
    }

    @media only screen and (width<=1100px) {
        .case-category-type-2_6 .special-container .special-hero .hero-render {
            height: 100%
        }
    }

    .case-category-type-2_6 .special-container .special-hero .hero-info {
        flex-direction: column;
        justify-content: flex-end;
        align-items: center;
        width: 100%;
        height: calc(50% + 36px);
        padding-bottom: 24px;
        display: flex
    }

    @media only screen and (width<=1300px) {
        .case-category-type-2_6 .special-container .special-hero .hero-info {
            justify-content: flex-start;
            padding-bottom: 16px
        }
    }

    @media only screen and (width<=1100px) {
        .case-category-type-2_6 .special-container .special-hero .hero-info {
            justify-content: flex-end;
            padding-bottom: 24px
        }
    }

    .case-category-type-2_6 .special-container .special-hero .hero-info .info-row {
        align-items: center;
        gap: 32px;
        display: flex
    }

    @media only screen and (width<=900px) {
        .case-category-type-2_6 .special-container .special-hero .hero-info .info-row {
            flex-direction: column;
            gap: 16px
        }
    }

    .case-category-type-2_6 .special-container .special-hero .hero-info .info-logo {
        width: 84%;
        height: 42%;
        margin-bottom: 24px;
        position: relative
    }

    .case-category-type-2_6 .special-container .special-hero .hero-info .info-logo img {
        -o-object-fit: contain;
        object-fit: contain;
        -o-object-position: center;
        object-position: center;
        width: 100%;
        height: 100%
    }

    .case-category-type-2_6 .special-container .special-hero .hero-info .info-timer {
        align-items: center;
        display: flex;
        position: relative
    }

    .case-category-type-2_6 .special-container .special-hero .hero-info .info-timer .timer-box {
        border-radius: 8px;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 52px;
        height: 52px;
        display: flex
    }

    .case-category-type-2_6 .special-container .special-hero .hero-info .info-timer .timer-box .box-value .G_Text-content {
        font-size: 24px;
        font-weight: 700
    }

    .case-category-type-2_6 .special-container .special-hero .hero-info .info-timer .timer-box .box-title {
        margin-top: 4px
    }

    .case-category-type-2_6 .special-container .special-hero .hero-info .info-timer .timer-box .box-title .G_Text-content {
        color: #bfbfbf;
        font-size: 12px;
        font-weight: 600
    }

    .case-category-type-2_6 .special-container .special-hero .hero-info .info-timer .timer-space {
        padding: 0 4px 8.5px;
        font-size: 24px;
        font-weight: 700;
        line-height: 2px
    }

    @media only screen and (width<=900px) {
        .case-category-type-2_6 .special-container .special-hero .hero-info .info-timer .timer-box {
            width: 32px;
            height: 32px
        }

        .case-category-type-2_6 .special-container .special-hero .hero-info .info-timer .timer-box .box-value .G_Text-content {
            font-size: 16px;
            font-weight: 700
        }

        .case-category-type-2_6 .special-container .special-hero .hero-info .info-timer .timer-box .box-title .G_Text-content {
            font-size: 12px;
            font-weight: 600
        }
    }

    .case-category-type-2_6 .special-container .special-hero .hero-info .info-default {
        height: 48px;
        margin-top: 16px
    }

    .case-category-type-2_6 .special-container .special-hero .hero-info .info-event {
        border-radius: 8px;
        align-items: center;
        height: 48px;
        margin-top: 16px;
        padding: 8px 16px;
        display: flex;
        position: relative
    }

    .case-category-type-2_6 .special-container .special-hero .hero-info .info-event .event-icon {
        width: 25px;
        margin-right: 12px
    }

    .case-category-type-2_6 .special-container .special-hero .hero-info .info-event .event-desc .G_Text-content {
        color: #d2a0ff;
        font-size: 12px;
        font-weight: 700
    }

    @media only screen and (width<=1300px) {

        .case-category-type-2_6 .special-container .special-hero .hero-info .info-default,
        .case-category-type-2_6 .special-container .special-hero .hero-info .info-event {
            display: none
        }
    }

    .case-category-type-2_6 .special-container .special-cases {
        z-index: 2;
        width: calc(50% - 12px);
        position: relative
    }

    @media only screen and (width<=1100px) {
        .case-category-type-2_6 .special-container .special-cases {
            width: 75%;
            margin: 0 auto 16px
        }
    }

    @media only screen and (width<=750px) {
        .case-category-type-2_6 .special-container .special-cases {
            width: 100%
        }
    }

    .case-category-type-2_6 .special-container .special-cases .cases-list {
        flex-wrap: wrap;
        width: calc(100% + 24px);
        margin: -12px;
        display: flex;
        padding-left: 0 !important;
        padding-right: 0 !important
    }

    @media only screen and (width<=1300px) {
        .case-category-type-2_6 .special-container .special-cases .cases-list {
            width: calc(100% + 16px);
            margin: -8px
        }
    }

    .case-category-type-2_6 .special-container .special-cases .cases-list .g_case {
        background-color: #10131980;
        width: calc(33.3333% - 24px);
        margin: 12px
    }

    @media only screen and (width<=1300px) {
        .case-category-type-2_6 .special-container .special-cases .cases-list .g_case {
            width: calc(33.3333% - 16px);
            margin: 8px
        }
    }

    @media only screen and (width<=1100px) {
        .case-category-type-2_6 .special-container .special-cases .cases-list .g_case {
            width: calc(33.3333% - 16px)
        }
    }

    @media only screen and (width<=750px) {
        .case-category-type-2_6 .special-container .special-cases .cases-list .g_case {
            width: calc(33.3333% - 16px)
        }
    }

    @media only screen and (width<=570px) {
        .case-category-type-2_6 .special-container .special-cases .cases-list .g_case {
            width: calc(50% - 16px)
        }
    }


    .case-category-type-3_6 {
        background-size: cover;
        width: 100%;
        margin-top: 20px;
        padding-top: 24px;
        padding-bottom: 24px;
        position: relative;
        overflow: hidden
    }

    .case-category-type-3_6 .special-box {
        background-position: top;
        background-repeat: no-repeat;
        background-size: cover;
        width: 100%;
        height: 100%;
        display: flex;
        position: absolute;
        top: 0;
        left: 0
    }

    .case-category-type-3_6 .special-container {
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 24px;
        display: flex;
        position: relative
    }

    .case-category-type-3_6 .special-container .special-cases,
    .case-category-type-3_6 .special-container .special-info {
        width: 1500px;
        max-width: calc(100% - 40px);
        height: max-content
    }

    .case-category-type-3_6 .special-container .special-info {
        z-index: 2;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 14px;
        padding: 0 24px;
        display: flex
    }

    .case-category-type-3_6 .special-container .special-info .info-logo {
        width: 320px;
        max-width: 100%
    }

    .case-category-type-3_6 .special-container .special-info .info-desc {
        max-width: 100%
    }

    .case-category-type-3_6 .special-container .special-info .info-desc .G_Text-content {
        font-size: 14px;
        font-weight: 700
    }

    .case-category-type-3_6 .special-container .special-cases {
        flex-wrap: wrap;
        gap: 24px;
        display: flex
    }

    @media only screen and (width<=1300px) {
        .case-category-type-3_6 .special-container .special-cases {
            gap: 16px
        }
    }

    .case-category-type-3_6 .special-container .special-cases .g_case {
        background-color: #16192180;
        width: calc(16.6667% - 20px);
        border: none !important
    }

    @media only screen and (width<=1300px) {
        .case-category-type-3_6 .special-container .special-cases .g_case {
            width: calc(20% - 12.8px)
        }
    }

    @media only screen and (width<=1100px) {
        .case-category-type-3_6 .special-container .special-cases .g_case {
            width: calc(25% - 12px)
        }
    }

    @media only screen and (width<=750px) {
        .case-category-type-3_6 .special-container .special-cases .g_case {
            width: calc(33.3333% - 10.6667px)
        }
    }

    @media only screen and (width<=570px) {
        .case-category-type-3_6 .special-container .special-cases .g_case {
            width: calc(50% - 8px)
        }
    }


    .section-extras {
        width: 1500px;
        max-width: calc(100% - 40px);
        margin: 32px auto 0
    }

    .section-extras .extras-container {
        flex-wrap: wrap;
        width: calc(100% + 20px);
        margin: -10px;
        display: flex;
        overflow-x: auto
    }

    @media only screen and (width<=900px) {
        .section-extras .extras-container {
            gap: 16px;
            width: 100%;
            margin: 0
        }
    }

    .section-extras .extras-container .extras-box {
        aspect-ratio: 1;
        contain: layout style paint;
        contain-intrinsic-size: auto 200px;
        content-visibility: auto;
        border-radius: 24px;
        width: calc(25% - 20px);
        margin: 10px;
        padding: 2px
    }

    @media only screen and (width<=900px) {
        .section-extras .extras-container .extras-box {
            border-radius: 16px;
            width: calc(50% - 8px);
            min-width: calc(50% - 8px);
            margin: 0
        }
    }

    .section-extras .extras-container .extras-box {
        background-image: linear-gradient(#606d87, #606d8700)
    }

    .section-extras .extras-container .extras-box .box-content {
        background-color: #1b1f2b;
        border-radius: 24px;
        width: 100%;
        height: 100%;
        position: relative;
        overflow: hidden
    }

    @media only screen and (width<=900px) {
        .section-extras .extras-container .extras-box .box-content {
            border-radius: 16px
        }
    }

    .section-extras .extras-container .extras-box .box-content .G_Button {
        position: absolute;
        bottom: 24px;
        right: 24px;
        z-index: 3 !important
    }

    @media only screen and (width<=900px) {
        .section-extras .extras-container .extras-box .box-content .G_Button {
            bottom: 20px;
            right: 20px
        }
    }

    .section-extras .extras-container .extras-box .box-content .extras-title {
        z-index: 3;
        width: calc(100% - 48px);
        position: absolute;
        top: 32px;
        left: 32px
    }

    @media only screen and (width<=900px) {
        .section-extras .extras-container .extras-box .box-content .extras-title {
            top: 20px;
            left: 20px
        }
    }

    .section-extras .extras-container .extras-box .box-content .extras-title .G_Text-content {
        font-size: 28px;
        font-weight: 700
    }

    @media only screen and (width<=1100px) {
        .section-extras .extras-container .extras-box .box-content .extras-title .G_Text-content {
            font-size: 18px;
            font-weight: 700
        }
    }

    .section-extras .extras-container .extras-box .extras-asset_1 {
        z-index: 2;
        width: 100%;
        position: absolute;
        bottom: 0;
        right: 0
    }

    .section-extras .extras-container .extras-box .extras-asset_1.fallback {
        transform-origin: bottom;
        transform: translate(10%)scale(1.25)
    }

    .section-extras .extras-container .extras-box.__event .box-content {
        background-position: 50%;
        background-size: auto 100%
    }

    .section-extras .extras-container .extras-box.__event .box-content .extras-asset_6 {
        z-index: 1;
        height: calc(100% - 100px);
        position: absolute;
        bottom: 0;
        right: 0
    }

    .section-extras .extras-container .extras-box.__daily .box-content .extras-asset_2 {
        background-image: linear-gradient(#1b1f2b -10.17%, #5a6687 107.42%);
        width: 340px;
        height: 340px;
        position: absolute;
        top: 50%;
        left: 8px;
        transform: translateY(calc(12px - 50%))translate(-20%)
    }

    @media only screen and (width<=1100px) {
        .section-extras .extras-container .extras-box.__daily .box-content .extras-asset_2 {
            max-width: 40%
        }
    }

    @media only screen and (width<=900px) {
        .section-extras .extras-container .extras-box.__daily .box-content .extras-asset_2 {
            width: 180px;
            max-width: 75%;
            position: absolute;
            top: 100%;
            left: 0;
            transform: translateY(-65%)
        }
    }

    .section-extras .extras-container .extras-box.__battle .box-content .extras-asset_3,
    .section-extras .extras-container .extras-box.__code .box-content .extras-asset_4 {
        height: calc(100% - 100px);
        position: absolute;
        bottom: 0;
        right: 0
    }

    .section-extras .extras-container .extras-box.__earn .box-content .extras-asset_7 {
        width: calc(100% - 40px);
        position: absolute;
        bottom: 0
    }

    @media only screen and (width<=1100px) {
        .section-extras .extras-container .extras-box.__earn .box-content .extras-asset_7 {
            transform: translate(-100%)
        }
    }


    .home-categories .empty-list {
        padding: 64px 0 24px
    }

    .home-categories .banner {
        width: 1500px;
        max-width: calc(100% - 40px);
        margin-top: 40px;
        margin-bottom: 40px
    }

    .home-categories .home-categories-container {
        width: 100%;
        margin: 0 auto
    }

    .home-categories .home-categories-container>* {
        width: 1500px;
        max-width: calc(100% - 40px);
        margin-top: 40px;
        margin-bottom: 40px
    }


    .page-home-debug {
        gap: 12px;
        padding: 20px;
        display: flex
    }


    .page_content:has(.page-home) {
        background-color: #161921 !important
    }

    .page_content:has(.page-home)+:is(.the-footer, .page-footer) {
        margin-top: 0;
        background-color: #1b1f2b !important
    }

    .page_content:has(.page-home)+:is(.the-footer, .page-footer) .footer-stats {
        background-color: #2e394f40 !important
    }

    .page_content:has(.page-home)+:is(.the-footer, .page-footer) .footer-note div.__hide:after {
        background-image: linear-gradient(#1b1f2b00, #1b1f2b) !important
    }

    .page-home {
        padding-bottom: 24px
    }

    .main-page-heading {
        width: 100%
    }

    .main-page-heading h1 {
        margin-bottom: 20px;
        font-size: 24px;
        font-weight: 700
    }


    .fadeList-enter-active,
    .fadeList-leave-active {
        transition: all .3s
    }

    .fadeList-enter-from,
    .fadeList-leave-to {
        opacity: 0;
        transform: translateY(20px)
    }

    .G_Select {
        cursor: pointer;
        flex-direction: column;
        width: 100%;
        display: flex;
        position: relative
    }

    .G_Select.mobile select {
        display: block
    }

    .G_Select.lock {
        pointer-events: none
    }

    .G_Select .content {
        z-index: 2;
        background-color: #0c0e144d;
        border: 1px solid #2e394f;
        border-radius: 8px;
        align-items: center;
        width: 100%;
        height: 44px;
        transition: all .3s;
        display: flex;
        position: relative
    }

    .G_Select .content>.placeholder {
        align-items: center;
        width: calc(100% - 55px);
        height: 100%;
        display: flex;
        position: absolute;
        top: 0;
        left: 0
    }

    .G_Select .content>.placeholder .placeholder-text {
        color: #2e394f;
        text-overflow: ellipsis;
        white-space: nowrap;
        margin-left: 15px;
        padding-bottom: 2px;
        font-size: 15px;
        font-weight: 500;
        line-height: 13px;
        transition: all .3s;
        overflow: hidden
    }

    .G_Select .content:hover .placeholder .placeholder-text {
        color: #606d87
    }

    .G_Select .content .value {
        color: #fff;
        text-overflow: ellipsis;
        -webkit-user-select: none;
        user-select: none;
        white-space: nowrap;
        width: calc(100% - 55px);
        max-height: 15px;
        margin-left: 15px;
        padding-bottom: 2px;
        font-size: 15px;
        font-weight: 600;
        line-height: 13px;
        overflow: hidden
    }

    @media only screen and (width<=900px) {
        .G_Select .content .value {
            margin-left: 12px
        }
    }

    .G_Select .content .value {
        position: relative
    }

    .G_Select .content .value .ico {
        width: 20px;
        position: absolute;
        top: 50%;
        left: 0;
        transform: translateY(-50%)
    }

    .G_Select .content .value:has(img) {
        overflow: visible
    }

    .G_Select .content .value:has(.ico) {
        padding-left: 32px;
        overflow: visible
    }

    .G_Select .content .value:has(.G_Text) {
        line-height: unset;
        padding-bottom: 0;
        overflow: visible
    }

    .G_Select .content .value .G_Text .G_Text-content {
        font-size: 15px;
        font-weight: 600
    }

    .G_Select .content .value p.placeholder {
        color: #2e394f;
        font-size: 15px;
        font-weight: 500;
        line-height: 13px;
        transition: all .3s
    }

    .G_Select .content .arrow {
        cursor: pointer;
        z-index: 2;
        width: 10px;
        min-width: 10px;
        height: 10px;
        min-height: 10px;
        max-height: 10px;
        position: absolute;
        right: 15px;
        top: 50% !important;
        transform: translateY(-50%) !important
    }

    .G_Select .content .arrow:after {
        content: "";
        border: 0 solid #606d87;
        border-width: 1px 0 0 1px;
        transition: top .3s, transform .3s, border-color .3s;
        display: flex;
        position: absolute;
        top: calc(50% - 2px);
        left: 50%;
        transform: translate(-50%, -50%)rotate(-135deg);
        width: 6px !important;
        height: 6px !important
    }

    .G_Select .list {
        z-index: 9;
        background: #0b0d10;
        border-radius: 8px;
        width: 100%;
        max-height: 352px;
        position: absolute;
        top: calc(100% + 10px);
        left: 0;
        overflow: auto
    }

    .G_Select .list * {
        -webkit-user-select: none;
        user-select: none
    }

    .G_Select .list .element {
        cursor: pointer;
        align-items: center;
        width: 100%;
        height: 44px;
        padding: 0 16px;
        transition: all .3s;
        display: flex
    }

    .G_Select .list .element .check {
        background-color: #606d87;
        border-radius: 2px;
        width: 12px;
        height: 12px;
        margin-right: 10px;
        transition: all .3s
    }

    .G_Select .list .element .value {
        color: #fff;
        align-items: center;
        font-weight: 500;
        display: flex
    }

    .G_Select .list .element .value .ico {
        width: 20px;
        margin-right: 12px
    }

    .G_Select .list .element.active .check {
        background-color: #31bbff;
        border-color: #31bbff
    }

    .G_Select .list .element.active .value {
        color: #31bbff
    }

    .G_Select .list .element:hover {
        background-color: #161921
    }

    .G_Select.list-top .list {
        bottom: calc(100% + 10px);
        top: unset
    }

    .G_Select:hover .content {
        background-color: #0c0e1499;
        border: 1px solid #606d87
    }

    .G_Select:hover .content .arrow:after {
        border-color: #31bbff
    }

    .G_Select.open .content {
        background-color: #0c0e1499;
        border: 1px solid #31bbff
    }

    .G_Select.open .content .arrow:after {
        border-color: #31bbff;
        top: calc(50% + 1px);
        transform: translate(-50%, -50%)rotate(45deg)
    }

    .G_Select.block {
        opacity: .5;
        pointer-events: none
    }

    .G_Select.max {
        width: 250px
    }

    .G_Select.big .list .element .value {
        height: 60px
    }

    .G_Select.big .list .element .value img {
        max-height: 100%
    }

    .G_Select .list {
        background: #1b1f2b;
        top: calc(100% + 18px);
        box-shadow: 0 20px 20px #0c0e1480
    }

    .G_Select .list .element {
        padding: 0 14px
    }

    .G_Select .list .element .value,
    .G_Select .list .element .value .G_Text .G_Text-content {
        font-size: 15px;
        font-weight: 600;
        transition: all .3s
    }

    .G_Select .list .element.active,
    .G_Select .list .element:hover {
        background-color: #2e394f
    }

    .G_Select .list .element.active .value,
    .G_Select .list .element.active .value .G_Text .G_Text-content,
    .G_Select .list .element:hover .value,
    .G_Select .list .element:hover .value .G_Text .G_Text-content {
        color: #31bbff;
        font-size: 15px;
        font-weight: 600
    }

    .G_Select.search.open .content {
        border: 1px solid #606d87
    }

    .G_Select.search .list {
        background: #1b1f2b;
        max-height: 289px;
        top: calc(100% + 18px);
        overflow-y: scroll;
        box-shadow: 0 20px 20px #0c0e1480
    }

    .G_Select.search .list .list-search {
        background: #1b1f2b;
        justify-content: center;
        align-items: center;
        padding: 14px;
        display: flex;
        position: sticky;
        top: 0
    }

    .G_Select.search .list .list-search .G_Input {
        height: 40px
    }

    .G_Select.search .list .list-search .G_Input .close {
        top: 14px;
        right: 14px
    }

    .G_Select.search .list .list_empty {
        padding: 14px
    }

    .G_Select.search .list .list_empty .G_Text {
        margin: 0 auto
    }

    .G_Select.search .list .list_empty .G_Text .G_Text-content {
        color: #8892a5;
        font-size: 14px;
        font-weight: 600
    }


    .G_Input {
        cursor: text;
        background-color: #0c0e144d;
        border: 1px solid #2e394f;
        border-radius: 8px;
        align-items: center;
        width: 100%;
        height: 44px;
        transition: background-color .3s;
        display: flex;
        position: relative
    }

    @keyframes shakeError {
        0% {
            transform: translate(0)
        }

        25% {
            transform: translate(5px)
        }

        50% {
            transform: translate(-5px)
        }

        75% {
            transform: translate(5px)
        }

        to {
            transform: translate(0)
        }
    }

    .G_Input.error {
        animation: .5s shakeError
    }

    .G_Input .input_area,
    .G_Input .parser {
        -moz-appearance: textfield;
        color: #fff;
        padding-bottom: 2px;
        font-size: 15px;
        font-weight: 500;
        line-height: 13px;
        transition: all .3s;
        display: flex
    }

    @media only screen and (width<=900px) {

        .G_Input .input_area,
        .G_Input .parser {
            padding-left: 12px;
            padding-right: 12px
        }
    }

    .G_Input .input_area,
    .G_Input .parser {
        width: 100%;
        height: 100%;
        padding-left: 15px;
        padding-right: 40px
    }

    .G_Input .input_area::-webkit-inner-spin-button {
        -webkit-appearance: none;
        margin: 0
    }

    .G_Input .input_area::-webkit-outer-spin-button {
        -webkit-appearance: none;
        margin: 0
    }

    .G_Input .parser::-webkit-inner-spin-button {
        -webkit-appearance: none;
        margin: 0
    }

    .G_Input .parser::-webkit-outer-spin-button {
        -webkit-appearance: none;
        margin: 0
    }

    .G_Input .input_area::-moz-placeholder {
        color: #2e394f;
        font-size: 15px;
        font-weight: 500;
        line-height: 13px;
        transition: all .3s
    }

    .G_Input .parser::-moz-placeholder {
        color: #2e394f;
        font-size: 15px;
        font-weight: 500;
        line-height: 13px;
        transition: all .3s
    }

    .G_Input .input_area::placeholder,
    .G_Input .parser::placeholder {
        color: #2e394f;
        font-size: 15px;
        font-weight: 500;
        line-height: 13px;
        transition: all .3s
    }

    :-webkit-any(.G_Input .input_area:-webkit-autofill, .G_Input .parser:-webkit-autofill) {
        -webkit-text-fill-color: #fff;
        -webkit-background-clip: text
    }

    :is(.G_Input .input_area:autofill, .G_Input .parser:autofill) {
        -webkit-text-fill-color: #fff;
        -webkit-background-clip: text
    }

    .G_Input .input_area {
        opacity: 0
    }

    .G_Input .icon {
        background-color: #606d87;
        width: 16px;
        min-width: 16px;
        height: 16px;
        position: absolute;
        top: 50%;
        left: 14px;
        transform: translateY(-50%);
        -webkit-mask-position: 50%;
        mask-position: 50%;
        -webkit-mask-size: contain;
        mask-size: contain;
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat
    }

    .G_Input .icon.image {
        background-color: #0000;
        background-position: 50%;
        background-repeat: no-repeat;
        background-size: contain
    }

    .G_Input .icon+.parser,
    .G_Input .icon+.parser+.input_area {
        padding-left: 38px
    }

    .G_Input .parser {
        pointer-events: none;
        position: absolute;
        top: 50%;
        left: 0;
        transform: translateY(-50%)
    }

    .G_Input .parser.hide {
        opacity: 0
    }

    .G_Input .parser.hide+.input_area {
        opacity: 1
    }

    .G_Input .close {
        cursor: pointer;
        z-index: 2;
        width: 10px;
        height: 10px;
        transition: all .3s;
        position: absolute;
        top: 16px;
        right: 15px
    }

    @media only screen and (width<=900px) {
        .G_Input .close {
            display: none
        }
    }

    .G_Input .close.hide {
        opacity: 0;
        pointer-events: none
    }

    .G_Input .close:after,
    .G_Input .close:before {
        content: "";
        background-color: #606d87;
        border-radius: 3px;
        width: 14px;
        height: 1px;
        transition: all .3s;
        display: flex;
        position: absolute;
        top: 50%;
        left: 50%
    }

    .G_Input .close:after {
        transform: translate(-50%, -50%)rotate(-45deg)
    }

    .G_Input .close:before {
        transform: translate(-50%, -50%)rotate(45deg)
    }

    .G_Input .close:hover:after,
    .G_Input .close:hover:before {
        background-color: #31bbff
    }

    .G_Input.not_close .close {
        display: none
    }

    .G_Input.lock input.parser {
        pointer-events: all;
        z-index: 2
    }

    .G_Input.focus,
    .G_Input.hover,
    .G_Input:hover:not(.lock) {
        background-color: #0c0e1499
    }

    .G_Input.focus .input_area {
        opacity: 1
    }

    .G_Input.focus .parser {
        opacity: 0
    }

    .G_Input.focus,
    .G_Input.focus:not(.lock) {
        background-color: #0c0e1499;
        border: 1px solid #31bbff
    }

    .G_Input.focus .input_area::-moz-placeholder {
        color: #606d8740
    }

    .G_Input.focus:not(.lock) .input_area::-moz-placeholder {
        color: #606d8740
    }

    .G_Input.focus .input_area::placeholder,
    .G_Input.focus:not(.lock) .input_area::placeholder {
        color: #606d8740
    }

    .G_Input.event.focus {
        border: 1px solid rgb(var(--event_main));
        background-color: #0c0e1499
    }

    .G_Input.event.focus .input_area::placeholder {
        color: #606d8740
    }

    .G_Input.max {
        width: 250px
    }

    .G_Input.big {
        height: 52px
    }

    .G_Input.big .close {
        top: 20px
    }

    .G_Input.block {
        opacity: .6;
        pointer-events: none
    }


    @keyframes shake-modal {
        0% {
            transform: translate(0)
        }

        25% {
            transform: translate(5px)
        }

        50% {
            transform: translate(-5px)
        }

        75% {
            transform: translate(5px)
        }

        to {
            transform: translate(0)
        }
    }

    .pass_reward-fade-enter-active,
    .pass_reward-fade-leave-active {
        transition: opacity .3s
    }

    .pass_reward-fade-enter-active .popup_box-container-box,
    .pass_reward-fade-leave-active .popup_box-container-box {
        backface-visibility: hidden;
        transition: transform .3s
    }

    @media only screen and (width<=900px) {

        .pass_reward-fade-enter-from .popup_box-container-box,
        .pass_reward-fade-leave-to .popup_box-container-box {
            transform: translate(-50%, 100%)translateZ(0) !important
        }
    }

    .pass_reward-fade-enter-from,
    .pass_reward-fade-leave-to {
        opacity: 0
    }

    .popup_box-fade-enter-active,
    .popup_box-fade-leave-active {
        transition: opacity .3s
    }

    .popup_box-fade-enter-active .popup_box-container-box,
    .popup_box-fade-leave-active .popup_box-container-box {
        transition: transform .3s
    }

    .popup_box-fade-enter-from .popup_box-container-box {
        transform: translate(-50%, calc(-50% - 44px))translateZ(0) !important
    }

    @media only screen and (width<=900px) {
        .popup_box-fade-enter-from .popup_box-container-box {
            transform: translate(-50%, 100%) !important
        }
    }

    .popup_box-fade-leave-to .popup_box-container-box {
        transform: translate(-50%, calc(44px - 50%))translateZ(0) !important
    }

    @media only screen and (width<=900px) {
        .popup_box-fade-leave-to .popup_box-container-box {
            transform: translate(-50%, 100%)translateZ(0) !important
        }
    }

    .close-modal-enter-active,
    .close-modal-leave-active {
        transition: all .3s
    }

    .close-modal-enter-from,
    .close-modal-leave-to {
        opacity: 0;
        transform: scale(.5)
    }

    .popup_box-fade-enter-from,
    .popup_box-fade-leave-to {
        opacity: 0
    }

    .popup_box {
        z-index: 101;
        width: 100%;
        height: 100dvh;
        position: fixed;
        bottom: 0;
        left: 0
    }

    .popup_box .popup_box-mask {
        background-color: #000000b3;
        width: 100%;
        height: 100%;
        position: relative
    }

    @media (hover:hover) and (pointer:fine) {
        .popup_box * ::-webkit-scrollbar {
            width: 6px;
            height: 6px
        }

        .popup_box * ::-webkit-scrollbar-track {
            background: #2e394f
        }

        .popup_box * ::-webkit-scrollbar-thumb {
            background: #8892a5
        }
    }

    .popup_box.--shake .popup_box-container-box .popup_box-container {
        animation: .4s shake-modal
    }

    .popup_box.--size-xs {
        --popup-width: 420px
    }

    .popup_box.--size-sm {
        --popup-width: 580px
    }

    .popup_box.--size-md {
        --popup-width: 640px
    }

    .popup_box.--size-mlg {
        --popup-width: 740px
    }

    .popup_box.--size-lg {
        --popup-width: 770px
    }

    .popup_box.--size-xl {
        --popup-width: 900px
    }

    .popup_box.--size-xxl {
        --popup-width: 1100px
    }

    @keyframes rotateGlowModal {
        0% {
            --gradient-angle: 0deg
        }

        to {
            --gradient-angle: 360deg
        }
    }

    .popup_box .popup_box-container-box {
        justify-content: center;
        align-items: center;
        max-width: 100%;
        height: 100%;
        display: flex;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%)translateZ(0)
    }

    @media only screen and (width<=900px) {
        .popup_box .popup_box-container-box {
            align-items: flex-end;
            height: -webkit-fill-available;
            max-height: max-content !important
        }
    }

    .popup_box .popup_box-container-box .popup_box-container-back {
        pointer-events: none;
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0
    }

    .popup_box .popup_box-container {
        max-width: 100%;
        max-height: calc(100dvh - 48px);
        width: var(--popup-width);
        background-color: #101319;
        border-radius: 16px;
        grid-template: "content" 1fr/100%;
        transition: transform .3s;
        display: grid;
        position: relative
    }

    .popup_box .popup_box-container .popup_box-container-content {
        border-radius: 16px;
        grid-area: content;
        width: 100%;
        height: 100%;
        min-height: 120px;
        max-height: 100%;
        position: relative;
        overflow: auto
    }

    .popup_box .popup_box-container .popup_box-container-close {
        z-index: 10;
        position: absolute;
        top: 16px;
        right: 16px
    }

    .popup_box .popup_box-container .fooos1,
    .popup_box .popup_box-container .fooos2 {
        width: 50%;
        height: 1100px;
        min-height: 1100px
    }

    .popup_box .popup_box-container .fooos1 {
        background-color: #f003
    }

    .popup_box .popup_box-container .fooos2 {
        background-color: #80000033
    }

    .popup_box.close-gap-40 .popup_box-container .popup_box-container-close {
        top: 40px;
        right: 40px
    }

    .popup_box.close-gap-32 .popup_box-container .popup_box-container-close {
        top: 32px;
        right: 32px
    }

    .popup_box.close-gap-16 .popup_box-container .popup_box-container-close {
        top: 16px;
        right: 16px
    }

    .popup_box.close-gap-12 .popup_box-container .popup_box-container-close {
        top: 12px;
        right: 12px
    }

    .popup_box.close-small .popup_box-container .popup_box-container-close {
        width: 32px
    }

    .popup_box.content-gap-40 .popup_box-container .popup_box-container-content {
        padding: 40px
    }

    .popup_box.content-gap-32 .popup_box-container .popup_box-container-content {
        padding: 32px
    }

    .popup_box.content-gap-16 .popup_box-container .popup_box-container-content {
        padding: 16px
    }

    .popup_box.content-gap-12 .popup_box-container .popup_box-container-content {
        padding: 12px
    }

    .popup_box.content-gap-0 .popup_box-container .popup_box-container-content {
        padding: 0
    }

    @media only screen and (width<=900px) {
        .popup_box:not(.mobile-center) .popup_box-container-box {
            max-height: calc(100% - 64px);
            bottom: 0;
            top: unset;
            border-radius: 0;
            transform: translate(-50%)
        }
    }

    @media only screen and (width<=900px) and (orientation:landscape) {
        .popup_box:not(.mobile-center) .popup_box-container-box {
            max-height: 100%
        }
    }

    @media only screen and (width<=900px) {
        .popup_box:not(.mobile-center) .popup_box-container-box .popup_box-container-close {
            top: 16px;
            right: 16px
        }

        .popup_box:not(.mobile-center) .popup_box-container-content {
            border-radius: 16px 16px 0 0
        }

        .popup_box.mobile-center .popup_box-container-box {
            width: calc(100% - 32px);
            height: 100%
        }

        .popup_box.mobile-center .popup_box-container {
            border-radius: 12px
        }

        .popup_box.mobile-center .popup_box-container .popup_box-container-close {
            top: 12px;
            right: 12px
        }
    }


    .case-category-type-event {
        width: 1500px;
        max-width: calc(100% - 40px);
        margin: 0 auto;
        padding-bottom: 8px;
        position: relative;
        overflow: hidden
    }

    @media only screen and (width<=900px) {
        .case-category-type-event {
            contain: layout style paint;
            contain-intrinsic-size: auto 400px;
            content-visibility: auto
        }
    }

    .case-category-type-event .section-title {
        cursor: pointer;
        margin: 44px 0 0
    }

    .case-category-type-event .section-title .category-arrow {
        transition: all .3s
    }

    .case-category-type-event .section-title .category-arrow.__active {
        transform: rotate(180deg)
    }

    .case-category-type-event .category-list {
        flex-wrap: wrap;
        width: calc(100% + 16px);
        margin: -8px;
        padding-top: 32px;
        display: flex
    }

    .case-category-type-event .category-list .CaseBox {
        width: calc(16.6667% - 24px);
        margin: 12px
    }

    @media only screen and (width<=1300px) {
        .case-category-type-event .category-list .CaseBox {
            width: calc(20% - 16px);
            margin: 8px
        }
    }

    @media only screen and (width<=1100px) {
        .case-category-type-event .category-list .CaseBox {
            width: calc(25% - 16px);
            margin: 8px
        }
    }

    @media only screen and (width<=750px) {
        .case-category-type-event .category-list .CaseBox {
            width: calc(33.3333% - 16px);
            margin: 8px
        }
    }

    @media only screen and (width<=570px) {
        .case-category-type-event .category-list .CaseBox {
            width: calc(50% - 16px);
            margin: 8px
        }
    }

    .case-category-type-event .category-banner {
        background-color: #101319;
        border-radius: 16px;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 88px;
        margin-top: 24px;
        display: flex;
        overflow: hidden
    }

    .case-category-type-event .category-banner .banner-bg {
        opacity: 1;
        background-image: linear-gradient(#0000, #0000), url(https://static.g4skins.com/public/events/rouge-waves/header.png?v=1);
        background-position: 50%;
        background-size: cover;
        width: 120%;
        min-width: 120%;
        height: 150%;
        min-height: 150%
    }


    .section-title {
        cursor: pointer;
        grid-template-columns: 1fr auto;
        align-items: center;
        margin: 40px 0 32px;
        display: grid
    }

    .section-title:has(.title-adult-marker) {
        grid-template-columns: 1fr auto auto
    }

    .section-title:has(.title-adult-marker).center {
        padding-left: 56px
    }

    @media only screen and (width<=900px) {
        .section-title:has(.title-adult-marker).center {
            padding-left: 0
        }
    }

    .section-title .title-box {
        align-items: center;
        display: flex;
        overflow: hidden
    }

    .section-title .title-box .title-box-back {
        margin-right: 12px
    }

    .section-title .title-box .title-box-bar {
        border-radius: 2px;
        height: 1.5px
    }

    .section-title .title-box .title-box-bar.__short-bar {
        background-color: #2e394f;
        width: 40px;
        min-width: 40px
    }

    .section-title .title-box .title-box-bar.__long-bar {
        background-image: linear-gradient(90deg, #2e394f, #2e394f, #2e394f00);
        width: 100%
    }

    .section-title .title-box .title-box-image {
        justify-content: center;
        align-items: center;
        height: 36px;
        display: flex;
        -webkit-mask-position: 50%;
        mask-position: 50%;
        -webkit-mask-size: contain;
        mask-size: contain;
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat
    }

    .section-title .title-box .title-box-image img {
        height: 100px
    }

    .section-title .title-box .title-box-icon-image {
        margin-left: 16px;
        display: flex
    }

    .section-title .title-box .title-box-icon-image img {
        height: 32px
    }

    .section-title .title-box .title-box-icon {
        background-color: #fff;
        margin-left: 16px;
        display: flex;
        -webkit-mask-position: 50%;
        mask-position: 50%;
        -webkit-mask-size: contain;
        mask-size: contain;
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat
    }

    .section-title .title-box .title-box-icon img {
        opacity: 0;
        width: 36px;
        height: 36px
    }

    .section-title .title-box .title-box-text {
        letter-spacing: 2px;
        white-space: nowrap;
        flex-direction: column;
        max-width: calc(100% - 138px);
        margin: -4px 16px -4px 12px;
        display: flex
    }

    .section-title .title-box .title-box-text .title-box-text-main,
    .section-title .title-box .title-box-text .title-box-text-sub {
        margin: 5px 0
    }

    .section-title .title-box .title-box-text .title-box-text-main .G_Text-content,
    .section-title .title-box .title-box-text .title-box-text-sub .G_Text-content {
        text-transform: uppercase
    }

    :is(.section-title .title-box .title-box-text .title-box-text-main .G_Text-content:has(b), .section-title .title-box .title-box-text .title-box-text-sub .G_Text-content:has(b)) {
        align-items: center;
        gap: 16px;
        display: flex
    }

    .section-title .title-box .title-box-text .title-box-text-main .G_Text-content b,
    .section-title .title-box .title-box-text .title-box-text-sub .G_Text-content b {
        color: #fccb13;
        text-transform: none;
        font-size: 16px;
        font-weight: 600
    }

    .section-title .title-box .title-box-text .title-box-text-main .G_Text-content {
        font-size: 20px;
        font-weight: 700
    }

    .section-title .title-box .title-box-text .title-box-text-sub .G_Text-content {
        color: #8892a5;
        white-space: normal;
        font-size: 12px;
        font-weight: 600
    }

    .section-title .title-box .title-box-text .title-box-text-sub .G_Text-content b {
        color: #31bbff;
        font-size: 12px;
        font-weight: 600
    }

    .section-title .title-box .title-box-text .title-box-text-sub .G_Text-content span {
        color: #64eb49;
        font-size: 12px;
        font-weight: 600
    }

    .section-title .title-box .title-box-text .title-box-text-sub .G_Text-content span.gray {
        color: #606d87
    }

    .section-title .title-box .title-box-text .title-box-text-sub .G_Text-content i {
        color: #fccb13;
        font-size: 12px;
        font-weight: 600
    }

    .section-title .title-box .title-box-text:has(.dotted.title-box-text-sub) {
        margin-left: 16px
    }

    .section-title .title-box .title-box-text:has(.dotted.title-box-text-sub) .title-box-text-main .G_Text-content {
        font-size: 24px
    }

    .section-title .title-box:has(.title-box-icon) .title-box-text .title-box-text-main .G_Text-content {
        font-size: 24px
    }

    .section-title .title-box:has(.title-box-image) .G_Button {
        margin-right: 0
    }

    .section-title .title-box .title-box-image+.title-box-text {
        margin-left: 0 !important
    }

    .section-title .title-adult-marker {
        margin-left: 16px;
        display: flex
    }

    .section-title .title-adult-marker img {
        width: 40px;
        min-width: 40px;
        transition: all .3s
    }

    .section-title .title-nav {
        align-items: center;
        display: flex
    }

    .section-title .title-nav>.G_Text .G_Text-content {
        color: #8892a5;
        font-size: 12px;
        font-weight: 600
    }

    .section-title .title-nav .G_Text,
    .section-title .title-nav a,
    .section-title .title-nav button {
        margin-left: 16px
    }

    .section-title.smaller .title-box .title-box-bar {
        width: 0
    }

    .section-title.smaller .title-box .title-box-bar.__short-bar {
        width: 0;
        min-width: 0;
        margin-right: -12px;
        display: none
    }

    .section-title.smaller .title-box .title-box-icon,
    .section-title.smaller .title-box .title-box-icon-image {
        margin-left: 0
    }

    .section-title.smaller .title-box .title-box-icon img,
    .section-title.smaller .title-box .title-box-icon-image img {
        opacity: 0;
        height: 24px
    }

    .section-title.smaller .title-box .title-box-text {
        margin-left: 8px
    }

    .section-title.smaller .title-box .title-box-text .title-box-text-main .G_Text-content {
        font-size: 16px;
        font-weight: 700
    }

    .section-title.smaller .title-box .title-box-text:has(.dotted.title-box-text-sub) {
        margin-left: 16px
    }

    .section-title.smaller .title-box .title-box-text:has(.dotted.title-box-text-sub) .title-box-text-main .G_Text-content {
        font-size: 24px
    }

    .section-title.fill .title-box .title-box-bar {
        border-radius: 2px;
        height: 1.5px
    }

    .section-title.fill .title-box .title-box-bar.__short-bar {
        background-color: #2e394f;
        width: 40px;
        min-width: 40px
    }

    .section-title.fill .title-box .title-box-bar.__long-bar {
        width: 100%;
        background-image: linear-gradient(90deg, #2e394f, #2e394f, #2e394f) !important
    }

    .section-title.empty .title-box .title-box-icon {
        margin-left: 0
    }

    .section-title.empty .title-box .title-box-bar.__short-bar {
        background-color: #0000;
        background-image: linear-gradient(270deg, #2e394f, #2e394f, #2e394f00);
        display: none
    }

    .section-title.empty .title-box .title-box-bar.__long-bar {
        opacity: 0
    }

    .section-title.center .title-box .title-box-bar.__short-bar {
        background-color: #0000;
        background-image: linear-gradient(270deg, #2e394f, #2e394f, #2e394f00)
    }

    .section-title.center .title-box .title-box-bar.__long-bar,
    .section-title.center .title-box .title-box-bar.__short-bar {
        width: 100%
    }

    .section-title.center.fill .title-box .title-box-bar.__short-bar {
        background-color: #2e394f
    }

    .section-title.small .title-box .title-box-bar.__short-bar {
        width: 0;
        min-width: 0;
        margin-right: -20px;
        display: none
    }

    .section-title.small .title-box .title-box-icon,
    .section-title.small .title-box .title-box-icon-image {
        margin-left: 0
    }

    .section-title.event .title-box .title-box-image {
        padding: 0 24px
    }

    .section-title.event .title-box .title-box-image img {
        border-radius: 8px;
        height: 200%;
        overflow: hidden
    }

    @media only screen and (width<=900px) {
        .section-title.empty .title-adult-marker img {
            width: 28px;
            min-width: 28px
        }

        .section-title.empty .title-box-icon img {
            width: 24px;
            height: 24px
        }

        .section-title .title-box .title-box-bar.__short-bar {
            display: none
        }

        .section-title .title-box .title-box-icon,
        .section-title .title-box .title-box-icon-image {
            margin-left: 0
        }

        .section-title .title-box .title-box-text .title-box-text-main .G_Text-content {
            font-weight: 700;
            font-size: 18px !important
        }

        .section-title .title-box .title-box-text .title-box-text-sub .G_Text-content {
            color: #8892a5;
            font-size: 10px;
            font-weight: 600
        }

        .section-title .title-box .title-box-text:not(:has(.dotted.title-box-text-sub)) .title-box-text-main .G_Text-content {
            font-size: 18px !important
        }
    }


    .G_Text {
        width: max-content;
        max-width: 100%;
        height: max-content;
        display: grid
    }

    .G_Text .G_Text-content {
        letter-spacing: normal;
        width: 100%;
        margin-top: -.3em;
        margin-bottom: -.197em;
        font-family: "Exo 2", sans-serif;
        display: block
    }

    .G_Text.full {
        width: 100%
    }

    .G_Text.upper .G_Text-content {
        text-transform: uppercase
    }

    .G_Text.nowrap .G_Text-content {
        white-space: nowrap
    }

    .G_Text.dotted .G_Text-content {
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden
    }

    .G_Text.left .G_Text-content {
        text-align: left
    }

    .G_Text.right .G_Text-content {
        text-align: right
    }

    .G_Text.center .G_Text-content {
        text-align: center
    }


    .G_Button {
        cursor: pointer;
        white-space: nowrap;
        border-radius: 8px;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 44px;
        min-height: 44px;
        padding: 0 20px;
        transition: all .3s;
        display: inline-flex;
        position: relative;
        overflow: visible;
        z-index: unset !important
    }

    @keyframes shine {
        0% {
            transition-property: left;
            left: -100%
        }

        17.8082%,
        to {
            transition-property: left;
            left: 100%
        }
    }

    @keyframes pulse22 {
        0% {
            opacity: 0;
            outline-offset: -16px
        }

        15% {
            opacity: .6
        }

        70%,
        to {
            opacity: 0;
            outline-offset: 0
        }
    }

    .G_Button .g-ring {
        border-radius: inherit;
        outline-offset: -16px;
        pointer-events: none;
        z-index: -1;
        outline: 16px solid #549600;
        display: none;
        position: absolute;
        inset: 0
    }

    .G_Button .g-shine {
        border-radius: inherit;
        pointer-events: none;
        display: none;
        overflow: hidden
    }

    .G_Button .g-shine,
    .G_Button .g-shine:after {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0
    }

    .G_Button .g-shine:after {
        content: "";
        background: linear-gradient(120deg, #0000, #ffffff40, #0000);
        animation: 3s ease-in-out infinite shine
    }

    .G_Button.shine .g-ring {
        animation: 1.5s ease-out infinite pulse22;
        display: block
    }

    .G_Button.shine2 .g-ring {
        animation: 2s ease-out infinite pulse22;
        display: block
    }

    .G_Button.shine2 .g-shine {
        display: block
    }

    .G_Button .button_icon {
        width: 14px;
        min-width: 14px;
        height: 14px;
        margin-right: 10px;
        display: flex;
        -webkit-mask-position: 50%;
        mask-position: 50%;
        -webkit-mask-size: contain;
        mask-size: contain;
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat
    }

    .G_Button .button_icon-image {
        margin-right: 4px;
        display: flex
    }

    .G_Button .button_icon-image img {
        pointer-events: none;
        height: 20px;
        display: flex
    }

    .G_Button .button_text {
        color: #fff;
        letter-spacing: 1px;
        opacity: 1;
        text-align: center;
        text-transform: uppercase;
        white-space: nowrap;
        padding-bottom: 1px;
        font-family: "Exo 2", sans-serif;
        font-size: 14px;
        font-weight: 600;
        line-height: 9px;
        display: inline-flex
    }

    @keyframes rotate_load {
        0% {
            transform: rotate(0)
        }

        to {
            transform: rotate(1turn)
        }
    }

    .G_Button .button_load {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%)
    }

    .G_Button .button_load .anim_load {
        border: 2px solid #fff;
        border-color: #fff #fff0;
        border-radius: 50%;
        width: 22px;
        height: 22px;
        animation: 1s linear infinite rotate_load
    }

    .G_Button:has(.button_load) {
        pointer-events: none
    }

    .G_Button:has(.button_load) .button_icon {
        opacity: 0
    }

    .G_Button:has(.button_load) .button_text {
        opacity: 0
    }

    .G_Button.lower .button_text {
        text-transform: none
    }

    .G_Button.max {
        width: max-content;
        min-width: max-content
    }

    .G_Button.full {
        width: 100%
    }

    .G_Button.square {
        width: 44px;
        min-width: 44px;
        padding: 0 !important
    }

    .G_Button.square .button_icon {
        margin-left: 0 !important;
        margin-right: 0 !important
    }

    .G_Button.square.big {
        width: 52px;
        min-width: 52px
    }

    .G_Button.flip {
        flex-direction: row-reverse
    }

    .G_Button.flip .button_icon-image {
        margin-left: 4px;
        margin-right: 0
    }

    .G_Button.flip .button_icon {
        margin-left: 10px;
        margin-right: 0
    }

    .G_Button.small {
        height: 36px;
        min-height: 36px;
        padding: 0 15px
    }

    .G_Button.small.padding2 {
        padding: 0 10px
    }

    .G_Button.small .button_icon {
        width: 12px;
        min-width: 12px;
        height: 12px;
        margin-right: 8px
    }

    .G_Button.small .button_text {
        font-size: 12px
    }

    .G_Button.small.square {
        width: 36px;
        min-width: 36px
    }

    .G_Button.small.flip .button_icon {
        margin-left: 8px;
        margin-right: 0
    }

    .G_Button.smaller {
        height: 32px;
        min-height: 32px;
        padding: 0 15px
    }

    .G_Button.smaller.padding2 {
        padding: 0 10px
    }

    .G_Button.smaller .button_icon {
        width: 12px;
        min-width: 12px;
        height: 12px;
        margin-right: 8px
    }

    .G_Button.smaller .button_text {
        font-size: 12px
    }

    .G_Button.smaller.square {
        width: 32px;
        min-width: 32px
    }

    .G_Button.smaller.flip .button_icon {
        margin-left: 8px;
        margin-right: 0
    }

    .G_Button.normal {
        height: 44px;
        min-height: 44px;
        padding: 0 20px
    }

    .G_Button.normal .button_icon {
        width: 14px;
        min-width: 14px;
        height: 14px;
        margin-right: 10px
    }

    .G_Button.normal .button_text {
        font-size: 14px
    }

    .G_Button.normal.square {
        width: 44px
    }

    .G_Button.normal.flip .button_icon {
        margin-left: 10px;
        margin-right: 0
    }

    .G_Button.big {
        height: 52px;
        min-height: 52px;
        padding: 0 25px
    }

    .G_Button.big .button_icon {
        width: 16px;
        min-width: 16px;
        height: 16px;
        margin-right: 12px
    }

    .G_Button.big .button_text {
        font-size: 14px
    }

    .G_Button.big.square {
        width: 52px
    }

    .G_Button.big.flip .button_icon {
        margin-left: 12px;
        margin-right: 0
    }

    .G_Button.biger {
        height: 56px;
        min-height: 56px;
        padding: 0 25px
    }

    .G_Button.biger .button_icon {
        width: 16px;
        min-width: 16px;
        height: 16px;
        margin-right: 12px
    }

    .G_Button.biger .button_text {
        letter-spacing: 1px;
        font-size: 14px;
        font-weight: 500
    }

    .G_Button.biger.square {
        width: 56px
    }

    .G_Button.biger.flip .button_icon {
        margin-left: 12px;
        margin-right: 0
    }

    .G_Button.bigger {
        border-radius: 12px;
        height: 72px;
        min-height: 72px;
        padding: 0 34px
    }

    .G_Button.bigger .button_icon {
        width: 24px;
        min-width: 24px;
        height: 24px;
        margin-right: 12px
    }

    .G_Button.bigger .button_text {
        font-size: 18px;
        font-weight: 700
    }

    .G_Button.bigger.square {
        width: 72px
    }

    .G_Button.bigger.flip .button_icon {
        margin-left: 12px;
        margin-right: 0
    }

    .G_Button.biggest {
        border-radius: 16px;
        height: 80px;
        min-height: 80px;
        padding: 0 34px
    }

    .G_Button.biggest .button_icon {
        width: 24px;
        min-width: 24px;
        height: 24px;
        margin-right: 12px
    }

    .G_Button.biggest .button_text {
        font-size: 20px;
        font-weight: 700
    }

    .G_Button.biggest.square {
        width: 80px
    }

    .G_Button.biggest.flip .button_icon {
        margin-left: 12px;
        margin-right: 0
    }

    .G_Button.event {
        background-color: rgba(var(--event_main), .1);
        border: 1px solid rgb(var(--event_main))
    }

    .G_Button.event:hover {
        background-color: rgba(var(--event_main), .3)
    }

    .G_Button.event.active {
        background-color: rgba(var(--event_main), 1)
    }

    .G_Button.event_dark {
        background-color: #606d871a;
        border: 1px solid #606d87
    }

    .G_Button.event_dark:hover {
        background-color: rgba(var(--event_main), .3);
        border: 1px solid rgba(var(--event_main), 1)
    }

    .G_Button.event_dark.active {
        background-color: rgba(var(--event_main), 1);
        border: 1px solid rgba(var(--event_main), 1)
    }

    .G_Button.event_fill {
        background-color: rgba(var(--event_main), 1);
        border: 0 solid rgb(var(--event_main));
        will-change: opacity;
        transition: opacity .3s
    }

    .G_Button.event_fill .button_icon {
        background-color: #fff
    }

    .G_Button.event_fill .button_text {
        color: #fff
    }

    .G_Button.event_fill:hover {
        background-color: rgba(var(--event_main), 1);
        opacity: .9
    }

    .G_Button.steam {
        border: none;
        overflow: hidden;
        background-color: #549600 !important
    }

    .G_Button.steam:before {
        content: "";
        background-image: linear-gradient(93deg, #549600, #407300);
        width: 100%;
        height: 100%;
        transition: all .3s;
        position: absolute;
        top: 0;
        left: 0
    }

    .G_Button.steam .button_icon,
    .G_Button.steam .button_text {
        z-index: 2;
        position: relative
    }

    .G_Button.steam.active:before,
    .G_Button.steam:hover:before {
        opacity: 0
    }

    .G_Button.event_a {
        background-color: rgba(var(--event_a), .1);
        border: 1px solid rgb(var(--event_a))
    }

    .G_Button.event_a:hover {
        background-color: rgba(var(--event_a), .3)
    }

    .G_Button.event_a.active {
        background-color: rgba(var(--event_a), 1)
    }

    .G_Button.event_b .button_icon {
        background-color: #fff
    }

    .G_Button.event_b:active {
        background-color: #ff3d3366
    }

    .G_Button.event_b {
        background-color: rgba(var(--event_b), .1);
        border: 1px solid rgb(var(--event_b))
    }

    .G_Button.event_b:hover {
        background-color: rgba(var(--event_b), .3)
    }

    .G_Button.event_b.active {
        background-color: rgba(var(--event_b), 1)
    }

    .G_Button.empty {
        background-color: #31bbff00;
        border: 1px solid #1b1f2b
    }

    .G_Button.empty:hover {
        background-color: #31bbff4d;
        border: 1px solid #31bbff
    }

    .G_Button.empty.active {
        background-color: rgba(var(--event_a), 1)
    }

    .G_Button {
        background-color: #31bbff1a;
        border: 1px solid #31bbff
    }

    .G_Button .button_icon {
        background-color: #fff
    }

    .G_Button:hover {
        background-color: #31bbff4d
    }

    .G_Button:active {
        background-color: #31bbff66
    }

    .G_Button.active {
        background-color: #31bbff4d
    }

    .G_Button.blank {
        background-color: #0000;
        border: 1px solid #0000
    }

    .G_Button.blank .button_icon {
        background-color: #fff
    }

    .G_Button.blank .button_text {
        transition: all .3s
    }

    .G_Button.blank:hover .button_text {
        color: #bfbfbf
    }

    .G_Button.blank:hover .button_icon {
        background-color: #31bbff
    }

    .G_Button.ct {
        background-color: #2896ff1a;
        border: 1px solid #2896ff
    }

    .G_Button.ct .button_icon {
        background-color: #fff
    }

    .G_Button.ct:hover {
        background-color: #2896ff4d
    }

    .G_Button.ct:active {
        background-color: #2896ff66
    }

    .G_Button.ct.active {
        background-color: #2896ff4d
    }

    .G_Button.tt {
        background-color: #ff9c281a;
        border: 1px solid #ff9c28
    }

    .G_Button.tt .button_icon {
        background-color: #fff
    }

    .G_Button.tt:hover {
        background-color: #ff9c284d
    }

    .G_Button.tt:active {
        background-color: #ff9c2866
    }

    .G_Button.tt.active {
        background-color: #ff9c284d
    }

    .G_Button.blue {
        background-color: #31bbff1a;
        border: 1px solid #31bbff
    }

    .G_Button.blue .button_icon {
        background-color: #fff
    }

    .G_Button.blue:hover {
        background-color: #31bbff4d
    }

    .G_Button.blue:active {
        background-color: #31bbff66
    }

    .G_Button.blue.active {
        background-color: #31bbff4d
    }

    .G_Button.orange2 {
        background-color: #ff9c281a;
        border: 1px solid #ff9c28
    }

    .G_Button.orange2 .button_icon {
        background-color: #fff
    }

    .G_Button.orange2:hover {
        background-color: #ff9c284d
    }

    .G_Button.orange2:active {
        background-color: #ff9c2866
    }

    .G_Button.orange2.active {
        background-color: #ff9c284d
    }

    .G_Button.green {
        background-color: #64eb491a;
        border: 1px solid #64eb49
    }

    .G_Button.green .button_icon {
        background-color: #fff
    }

    .G_Button.green:hover {
        background-color: #64eb494d
    }

    .G_Button.green:active {
        background-color: #64eb4966
    }

    .G_Button.green.active {
        background-color: #64eb494d
    }

    .G_Button.green_fill {
        background-color: #64eb49;
        border: none
    }

    .G_Button.green_fill:hover {
        background-color: #64eb49bf
    }

    .G_Button.green_fill:active {
        background-color: #64eb4980
    }

    .G_Button.green_fill.active {
        background-color: #64eb49cc
    }

    .G_Button.green_fill .button_icon {
        background-color: #0c0e14
    }

    .G_Button.green_fill .button_text {
        color: #0c0e14
    }

    .G_Button.green_fill .button_load .anim_load {
        border: 2px solid #0c0e14;
        border-color: #0c0e14 #0c0e1400
    }

    .G_Button.yellow_fill {
        background-color: #fccb13;
        border: none
    }

    .G_Button.yellow_fill:hover {
        background-color: #fccb13bf
    }

    .G_Button.yellow_fill:active {
        background-color: #fccb1380
    }

    .G_Button.yellow_fill.active {
        background-color: #fccb13cc
    }

    .G_Button.yellow_fill .button_icon {
        background-color: #0c0e14
    }

    .G_Button.yellow_fill .button_text {
        color: #0c0e14
    }

    .G_Button.yellow_fill .button_load .anim_load {
        border: 2px solid #0c0e14;
        border-color: #0c0e14 #0c0e1400
    }

    .G_Button.purple_fill {
        background-color: #b055ff;
        border: none
    }

    .G_Button.purple_fill:hover {
        background-color: #b055ffbf
    }

    .G_Button.purple_fill:active {
        background-color: #b055ff80
    }

    .G_Button.purple_fill.active {
        background-color: #b055ffcc
    }

    .G_Button.purple_fill .button_icon {
        background-color: #0c0e14
    }

    .G_Button.purple_fill .button_text {
        color: #0c0e14
    }

    .G_Button.purple_fill .button_load .anim_load {
        border: 2px solid #0c0e14;
        border-color: #0c0e14 #0c0e1400
    }

    .G_Button.pink_fill {
        background-color: #ff9195;
        border: none
    }

    .G_Button.pink_fill:hover {
        background-color: #ff9195bf
    }

    .G_Button.pink_fill:active {
        background-color: #ff919580
    }

    .G_Button.pink_fill.active {
        background-color: #ff9195cc
    }

    .G_Button.pink_fill .button_icon {
        background-color: #0c0e14
    }

    .G_Button.pink_fill .button_text {
        color: #0c0e14
    }

    .G_Button.pink_fill .button_load .anim_load {
        border: 2px solid #0c0e14;
        border-color: #0c0e14 #0c0e1400
    }

    .G_Button.purple_fill2 {
        background-color: #b055ff;
        border: none
    }

    .G_Button.purple_fill2:hover {
        background-color: #b055ffbf
    }

    .G_Button.purple_fill2:active {
        background-color: #b055ff80
    }

    .G_Button.purple_fill2.active {
        background-color: #b055ffcc
    }

    .G_Button.purple_fill2 .button_icon {
        background-color: #fff
    }

    .G_Button.purple_fill2 .button_text {
        color: #fff
    }

    .G_Button.purple_fill2 .button_load .anim_load {
        border: 2px solid #fff;
        border-color: #fff #fff0
    }

    .G_Button.orange_fill2 {
        background-color: #ff553a;
        border: none
    }

    .G_Button.orange_fill2:hover {
        background-color: #ff553abf
    }

    .G_Button.orange_fill2:active {
        background-color: #ff553a80
    }

    .G_Button.orange_fill2.active {
        background-color: #ff553acc
    }

    .G_Button.orange_fill2 .button_icon {
        background-color: #fff
    }

    .G_Button.orange_fill2 .button_text {
        color: #fff
    }

    .G_Button.orange_fill2 .button_load .anim_load {
        border: 2px solid #fff;
        border-color: #fff #fff0
    }

    .G_Button.red_fill {
        background-color: #ff3d33;
        border: none
    }

    .G_Button.red_fill:hover {
        background-color: #ff3d33bf
    }

    .G_Button.red_fill:active {
        background-color: #ff3d3380
    }

    .G_Button.red_fill.active {
        background-color: #ff3d33cc
    }

    .G_Button.red_fill .button_icon {
        background-color: #fff
    }

    .G_Button.red_fill .button_text {
        color: #fff
    }

    .G_Button.red_fill .button_load .anim_load {
        border: 2px solid #fff;
        border-color: #fff #fff0
    }

    .G_Button.blue_fill {
        background-color: #31bbff;
        border: none
    }

    .G_Button.blue_fill:hover {
        background-color: #31bbffbf
    }

    .G_Button.blue_fill:active {
        background-color: #31bbff80
    }

    .G_Button.blue_fill.active {
        background-color: #31bbffcc
    }

    .G_Button.blue_fill .button_icon {
        background-color: #fff
    }

    .G_Button.blue_fill .button_text {
        color: #fff
    }

    .G_Button.blue_fill .button_load .anim_load {
        border: 2px solid #fff;
        border-color: #fff #fff0
    }

    .G_Button.white_primary {
        background-color: #fff;
        border: 1px solid #fff
    }

    .G_Button.white_primary .button_icon {
        background-color: #101319
    }

    .G_Button.white_primary .button_text {
        color: #101319
    }

    .G_Button.white_primary:hover {
        opacity: .75
    }

    .G_Button.dark_primary {
        background-color: #191e2a4d;
        border: 1px solid #353a5a
    }

    .G_Button.dark_primary .button_icon {
        transition: background-color .3s
    }

    .G_Button.dark_primary .button_text {
        transition: color .3s
    }

    .G_Button.dark_primary:hover .button_icon {
        background-color: #9ba7bf
    }

    .G_Button.dark_primary:hover .button_text {
        color: #9ba7bf
    }

    .G_Button.dark_tertiary {
        background-color: #191e2a4d;
        border: 1px solid #353a5a
    }

    .G_Button.dark_tertiary .button_icon {
        transition: background-color .3s
    }

    .G_Button.dark_tertiary .button_text {
        color: #9ba7bf;
        transition: color .3s
    }

    .G_Button.dark_tertiary:hover .button_icon {
        background-color: #9ba7bf
    }

    .G_Button.dark_tertiary:hover .button_text {
        color: #fff
    }

    .G_Button.dark_fill {
        background-color: #101319;
        border: none
    }

    .G_Button.dark_fill:hover {
        background-color: #101319bf
    }

    .G_Button.dark_fill:active {
        background-color: #10131980
    }

    .G_Button.dark_fill.active {
        background-color: #101319cc
    }

    .G_Button.dark_fill .button_icon {
        background-color: #fff
    }

    .G_Button.dark_fill .button_text {
        color: #fff
    }

    .G_Button.dark_fill .button_load .anim_load {
        border: 2px solid #fff;
        border-color: #fff #fff0
    }

    .G_Button.dark_fill3 {
        background-color: #101319;
        border: none
    }

    .G_Button.dark_fill3:hover {
        background-color: #101319bf
    }

    .G_Button.dark_fill3:active {
        background-color: #10131980
    }

    .G_Button.dark_fill3.active {
        background-color: #101319cc
    }

    .G_Button.dark_fill3 .button_icon {
        background-color: #8892a5
    }

    .G_Button.dark_fill3 .button_text {
        color: #8892a5
    }

    .G_Button.dark_fill3 .button_load .anim_load {
        border: 2px solid #8892a5;
        border-color: #8892a5 #8892a500
    }

    .G_Button.dark2_fill {
        background-color: #0003;
        border: none
    }

    .G_Button.dark2_fill:hover {
        background-color: #00000080
    }

    .G_Button.dark2_fill:active {
        background-color: #0006
    }

    .G_Button.dark2_fill.active {
        background-color: #000c
    }

    .G_Button.dark2_fill .button_icon {
        background-color: #bfbfbf
    }

    .G_Button.dark2_fill .button_text {
        color: #bfbfbf
    }

    .G_Button.gray_fill {
        background-color: #20232b;
        border: none
    }

    .G_Button.gray_fill:hover {
        background-color: #20232bbf
    }

    .G_Button.gray_fill:active {
        background-color: #20232b80
    }

    .G_Button.gray_fill.active {
        background-color: #20232bcc
    }

    .G_Button.gray_fill .button_icon {
        background-color: #8892a5
    }

    .G_Button.gray_fill .button_text {
        color: #8892a5
    }

    .G_Button.gray_fill .button_load .anim_load {
        border: 2px solid #8892a5;
        border-color: #8892a5 #8892a500
    }

    .G_Button.gray2_fill {
        background-color: #2e394f;
        border: none
    }

    .G_Button.gray2_fill:hover {
        background-color: #2e394fbf
    }

    .G_Button.gray2_fill:active {
        background-color: #2e394f80
    }

    .G_Button.gray2_fill.active {
        background-color: #2e394fcc
    }

    .G_Button.gray2_fill .button_icon {
        background-color: #fff
    }

    .G_Button.gray2_fill .button_text {
        color: #fff
    }

    .G_Button.gray2_fill .button_load .anim_load {
        border: 2px solid #fff;
        border-color: #fff #fff0
    }

    .G_Button.gray3_fill {
        background-color: #1b1f2b;
        border: none
    }

    .G_Button.gray3_fill:hover {
        background-color: #1b1f2bbf
    }

    .G_Button.gray3_fill:active {
        background-color: #1b1f2b80
    }

    .G_Button.gray3_fill.active {
        background-color: #1b1f2bcc
    }

    .G_Button.gray3_fill .button_icon {
        background-color: #fff
    }

    .G_Button.gray3_fill .button_text {
        color: #fff
    }

    .G_Button.gray3_fill .button_load .anim_load {
        border: 2px solid #fff;
        border-color: #fff #fff0
    }

    .G_Button.gray_tertiary_fill {
        background-color: #202736;
        border: none
    }

    .G_Button.gray_tertiary_fill:hover {
        background-color: #202736bf
    }

    .G_Button.gray_tertiary_fill:active {
        background-color: #20273680
    }

    .G_Button.gray_tertiary_fill.active {
        background-color: #202736cc
    }

    .G_Button.gray_tertiary_fill .button_icon {
        background-color: #9ba7bf
    }

    .G_Button.gray_tertiary_fill .button_text {
        color: #9ba7bf
    }

    .G_Button.gray_tertiary_fill .button_load .anim_load {
        border: 2px solid #9ba7bf;
        border-color: #9ba7bf #9ba7bf00
    }

    .G_Button.white_fill {
        background-color: #fff;
        border: none
    }

    .G_Button.white_fill:hover {
        background-color: #ffffffbf
    }

    .G_Button.white_fill:active {
        background-color: #ffffff80
    }

    .G_Button.white_fill.active {
        background-color: #fffc
    }

    .G_Button.white_fill .button_icon {
        background-color: #0c0e14
    }

    .G_Button.white_fill .button_text {
        color: #0c0e14
    }

    .G_Button.white_fill .button_load .anim_load {
        border: 2px solid #0c0e14;
        border-color: #0c0e14 #0c0e1400
    }

    .G_Button.gray4_fill {
        background-color: #2e394f;
        border: none
    }

    .G_Button.gray4_fill:hover {
        background-color: #2e394fbf
    }

    .G_Button.gray4_fill:active {
        background-color: #2e394f80
    }

    .G_Button.gray4_fill.active {
        background-color: #2e394fcc
    }

    .G_Button.gray4_fill .button_icon {
        background-color: #9ba7bf
    }

    .G_Button.gray4_fill .button_text {
        color: #9ba7bf
    }

    .G_Button.gray4_fill .button_load .anim_load {
        border: 2px solid #9ba7bf;
        border-color: #9ba7bf #9ba7bf00
    }

    .G_Button.gray_blur {
        background-color: #606d871a;
        border: 1px solid #606d87
    }

    .G_Button.gray_blur:hover {
        background-color: #606d8740
    }

    .G_Button.gray_blur .button_icon {
        background-color: #fff
    }

    .G_Button.gray_blur .button_text {
        color: #fff
    }

    .G_Button.dark_fill2 {
        background-color: #161921;
        border: none
    }

    .G_Button.dark_fill2:active .button_icon,
    .G_Button.dark_fill2:hover .button_icon {
        background-color: #31bbff !important
    }

    .G_Button.dark_fill2.active {
        background-color: #161921cc
    }

    .G_Button.dark_fill2 .button_icon,
    .G_Button.dark_fill2.big .button_icon {
        background-color: #606d87;
        transition: all .3s
    }

    .G_Button.dark_fill2.big .button_icon {
        width: 18px;
        min-width: 18px;
        height: 18px
    }

    .G_Button.dark_fill2 .button_text {
        color: #606d87
    }

    .G_Button.red {
        background-color: #ff3d331a;
        border: 1px solid #ff3d33
    }

    .G_Button.red .button_icon {
        background-color: #fff
    }

    .G_Button.red:hover {
        background-color: #ff3d334d
    }

    .G_Button.red:active {
        background-color: #ff3d3366
    }

    .G_Button.red.active {
        background-color: #ff3d334d
    }

    .G_Button.yellow {
        background-color: #fccb131a;
        border: 1px solid #fccb13
    }

    .G_Button.yellow .button_icon {
        background-color: #fff
    }

    .G_Button.yellow:hover {
        background-color: #fccb134d
    }

    .G_Button.yellow:active {
        background-color: #fccb1366
    }

    .G_Button.yellow.active {
        background-color: #fccb134d
    }

    .G_Button.pink {
        background-color: #ff91951a;
        border: 1px solid #ff9195
    }

    .G_Button.pink .button_icon {
        background-color: #fff
    }

    .G_Button.pink:hover {
        background-color: #ff91954d
    }

    .G_Button.pink:active {
        background-color: #ff919566
    }

    .G_Button.pink.active {
        background-color: #ff91954d
    }

    .G_Button.orange {
        background-color: #ff553a1a;
        border: 1px solid #ff553a
    }

    .G_Button.orange .button_icon {
        background-color: #fff
    }

    .G_Button.orange:hover {
        background-color: #ff553a4d
    }

    .G_Button.orange:active {
        background-color: #ff553a66
    }

    .G_Button.orange.active {
        background-color: #ff553a4d
    }

    .G_Button.purple {
        background-color: #b055ff1a;
        border: 1px solid #b055ff
    }

    .G_Button.purple .button_icon {
        background-color: #fff
    }

    .G_Button.purple:hover {
        background-color: #b055ff4d
    }

    .G_Button.purple:active {
        background-color: #b055ff66
    }

    .G_Button.purple.active {
        background-color: #b055ff4d
    }

    .G_Button.dark {
        background-color: #606d871a;
        border: 1px solid #606d87
    }

    .G_Button.dark .button_icon {
        background-color: #fff
    }

    .G_Button.dark:hover {
        background-color: #606d874d
    }

    .G_Button.dark:active {
        background-color: #606d8766
    }

    .G_Button.dark.active {
        background-color: #606d874d
    }

    .G_Button.block {
        opacity: .6;
        pointer-events: none
    }

    .G_Button.block:has(.button_load) {
        opacity: 1
    }

    .G_Button.lock {
        pointer-events: none
    }


    .g_case {
        aspect-ratio: 1;
        cursor: pointer;
        background-color: #1013194d;
        border: 1px solid #2e394f;
        border-radius: 16px;
        transition: border .3s, background-color .3s;
        display: block;
        position: relative
    }

    .g_case:hover {
        background-color: #10131999;
        border: 1px solid #31bbff
    }

    .g_case:hover .g_case-box .header-name:not(.__hover) {
        opacity: 0;
        transform: translateY(-100%)rotateX(90deg)
    }

    .g_case:hover .g_case-box .header-name.__hover {
        opacity: 1;
        transform: translateY(0)
    }

    .g_case:hover .g_case-box .g_case-box-fav .g_case-box-fav-btn {
        transform: translate(0)
    }

    .g_case:hover .g_case-box .g_case-box-background {
        transform: translate(-50%)scale(.985)translateZ(0)
    }

    .g_case.event-rotate:not(.neutral-hover):hover {
        border: 1px solid rgb(var(--event_main))
    }

    .g_case.neutral-hover:hover {
        border: 1px solid #606d87
    }


    .g_case-box {
        top: 0
    }

    .g_case-box,
    .g_case-box .g_case-box-header {
        width: 100%;
        height: 100%;
        position: absolute;
        left: 0
    }

    .g_case-box .g_case-box-header {
        border-radius: 15px;
        justify-content: space-between;
        align-items: flex-end;
        padding: 16px 16px 12px;
        display: flex;
        bottom: 0;
        overflow: hidden
    }

    .g_case-box .g_case-box-header:before {
        content: "";
        pointer-events: none;
        background: linear-gradient(#16192100, #161921);
        width: 100%;
        height: 64px;
        position: absolute;
        bottom: 0;
        left: 0
    }

    @media only screen and (width<=750px) {
        .g_case-box .g_case-box-header {
            flex-direction: column;
            justify-content: flex-end;
            align-items: center
        }

        .g_case-box .g_case-box-header * {
            text-align: center
        }
    }

    .g_case-box .g_case-box-header:has(.g_case-box-tokens)+.g_case-box-fav {
        top: 44px
    }


    .g_case-box .g_case-box-background,
    .g_case-box-battle .g_case-box-background {
        contain: layout style paint;
        contain-intrinsic-size: 306px 248px;
        content-visibility: auto;
        pointer-events: none;
        transform-origin: bottom;
        width: 135%;
        transition: all .3s;
        position: absolute;
        bottom: -4%;
        left: 50%;
        transform: translate(-50%)translateZ(0)
    }

    .g_case-box .g_case-box-background img,
    .g_case-box-battle .g_case-box-background img {
        -webkit-user-select: none;
        user-select: none;
        width: 100%;
        height: auto
    }

    .g_case-box-battle.g_case-box-battle,
    .g_case-box.g_case-box-battle {
        pointer-events: none
    }

    .g_case-box-battle.g_case-box-battle .g_case-box-background,
    .g_case-box.g_case-box-battle .g_case-box-background {
        bottom: unset;
        top: unset;
        width: calc(100% - 14px);
        position: relative
    }


    .g_case-box .header-new,
    .g_case-box-battle .header-new {
        color: #0b0d10;
        z-index: 2;
        background-color: #31bbff;
        border-radius: 4px;
        justify-content: center;
        align-items: center;
        width: max-content;
        height: 22px;
        margin-bottom: 12px;
        padding: 0 8px;
        font-size: 10px;
        font-weight: 800;
        display: flex;
        position: absolute;
        top: 16px;
        left: 16px
    }


    .g_case-box .g_case-box-tokens,
    .g_case-box-battle .g_case-box-tokens {
        color: #d32ee6;
        background: #0b0d10cc;
        border-radius: 4px;
        justify-content: center;
        align-items: center;
        padding: 4px 8px;
        font-size: 14px;
        font-weight: 700;
        display: flex;
        position: absolute;
        top: 16px;
        right: 16px
    }

    .g_case-box .g_case-box-tokens img,
    .g_case-box-battle .g_case-box-tokens img {
        width: 14px;
        margin-bottom: -2px;
        margin-right: 4px
    }


    .g_case-box .header-name-box,
    .g_case-box-battle .header-name-box {
        z-index: 2;
        position: relative
    }

    @media only screen and (width<=750px) {

        .g_case-box .header-name-box,
        .g_case-box-battle .header-name-box {
            word-break: break-all;
            justify-content: center;
            width: 100%;
            display: flex;
            position: relative
        }
    }

    .g_case-box .header-name,
    .g_case-box-battle .header-name {
        letter-spacing: 1px;
        transform-origin: bottom;
        font-size: 14px;
        font-weight: 700;
        line-height: 19px;
        transition: all .4s cubic-bezier(.47, 1.64, .41, .8)
    }

    .g_case-box .header-name.g_case-box-battle,
    .g_case-box-battle .header-name.g_case-box-battle {
        z-index: 5;
        position: relative
    }

    .g_case-box .header-name.break-world,
    .g_case-box-battle .header-name.break-world {
        word-break: break-all
    }

    .g_case-box .header-name.__hover,
    .g_case-box-battle .header-name.__hover {
        opacity: 0;
        transform-origin: top;
        margin-top: 4px;
        position: absolute;
        bottom: 0;
        left: 0;
        transform: translateY(100%)rotateX(-90deg)
    }

    @media only screen and (width<=750px) {

        .g_case-box .header-name.__hover,
        .g_case-box-battle .header-name.__hover {
            text-align: center;
            width: 100%;
            bottom: 0;
            left: 0
        }
    }


    .g_case-box .header-price,
    .g_case-box-battle .header-price {
        color: #64eb49;
        letter-spacing: 1px;
        text-align: right;
        white-space: nowrap;
        z-index: 2;
        font-size: 14px;
        font-weight: 700;
        line-height: 19px;
        position: relative
    }

    @media only screen and (width<=570px) {

        .g_case-box .header-price,
        .g_case-box-battle .header-price {
            font-size: 13px
        }
    }

    .g_case-box .header-tokens,
    .g_case-box-battle .header-tokens {
        color: #d32ee6;
        z-index: 1;
        align-items: center;
        height: 17px;
        max-height: 17px;
        font-size: 14px;
        font-weight: 700;
        display: flex
    }

    .g_case-box .header-tokens img,
    .g_case-box-battle .header-tokens img {
        width: 20px;
        min-width: 20px;
        margin-bottom: -2px;
        margin-right: 4px
    }


    .seo-text-v3 {
        contain-intrinsic-size: auto 600px;
        content-visibility: auto;
        flex-direction: column;
        place-items: center;
        gap: 32px;
        margin-top: 75px;
        margin-bottom: -24px;
        display: flex;
        position: relative;
        overflow: hidden
    }

    @media (width<=1200px) {
        .seo-text-v3 {
            margin-top: 48px
        }
    }

    @media (width<=900px) {
        .seo-text-v3 {
            margin-top: 32px
        }
    }

    @media (width<=600px) {
        .seo-text-v3 {
            margin-top: 24px
        }
    }

    .seo-text-v3__wrapper {
        width: 100%;
        padding-bottom: 180px
    }

    .seo-text-v3__content {
        -moz-column-count: 2;
        column-count: 2;
        -moz-column-gap: 32px;
        opacity: 0;
        column-gap: 32px;
        max-width: min(1392px, 100%);
        margin: 0 auto;
        padding-inline: 24px;
        animation: .6s ease-out .1s forwards fadeIn
    }

    .seo-text-v3__content:empty {
        display: none
    }

    .seo-text-v3__item {
        -moz-column-break-inside: avoid;
        break-inside: avoid;
        page-break-inside: avoid;
        border-bottom: 1px solid #202736;
        flex-direction: column;
        gap: 20px;
        padding-block: 20px;
        display: flex
    }

    .seo-text-v3__title {
        color: #fff;
        font-size: 20px;
        font-weight: 600
    }

    .seo-text-v3__description {
        color: #9ba7bf;
        letter-spacing: .01px;
        font-size: 14px;
        font-weight: 500;
        line-height: 20px
    }

    .seo-text-v3__description :where(*) {
        color: inherit;
        font-size: inherit;
        font-weight: inherit;
        letter-spacing: inherit;
        line-height: inherit
    }

    .seo-text-v3__description :where(strong) {
        font-size: inherit;
        font-weight: inherit;
        letter-spacing: inherit;
        font-weight: 700;
        line-height: inherit
    }

    .seo-text-v3__description :where(h3) {
        color: #fff;
        margin-top: 16px;
        margin-bottom: 8px;
        font-size: 17px;
        font-weight: 600;
        line-height: 24px
    }

    .seo-text-v3__description :where(h3):first-child {
        margin-top: 0
    }

    .seo-text-v3__description :where(h4) {
        color: #fff;
        margin-top: 14px;
        margin-bottom: 6px;
        font-size: 15px;
        font-weight: 600;
        line-height: 22px
    }

    .seo-text-v3__description :where(h4):first-child {
        margin-top: 0
    }

    .seo-text-v3__description :where(ol) {
        flex-direction: column;
        gap: 8px;
        margin-top: 8px;
        margin-bottom: 8px;
        display: flex
    }

    .seo-text-v3__description :where(ol) :where(li) {
        margin-left: 20px;
        list-style-type: decimal
    }

    .seo-text-v3__description :where(ul) {
        flex-direction: column;
        gap: 8px;
        margin-top: 8px;
        margin-bottom: 8px;
        display: flex
    }

    .seo-text-v3__description :where(ul) :where(li) {
        margin-left: 20px;
        list-style-type: disc
    }

    .seo-text-v3__shadow-gradient {
        background: linear-gradient(#13161f00, #13161f 76.3%);
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 206px;
        display: flex;
        position: absolute;
        bottom: 0;
        left: 0
    }

    .seo-text-v3__gradient-action {
        transition: transform .2s ease-out;
        position: absolute;
        bottom: 64px;
        transform: translateY(0)
    }

    .seo-text-v3__gradient-action:hover {
        transform: translateY(-3px)
    }

    .seo-text-v3__toggle-btn {
        width: 200px;
        position: relative;
        overflow: hidden
    }

    .seo-text-v3__toggle-btn:after {
        background: inherit;
        content: "";
        opacity: 0;
        transition: opacity .3s;
        position: absolute;
        inset: 0
    }

    .seo-text-v3__padding {
        padding-bottom: 256px
    }

    @keyframes fadeIn {
        0% {
            opacity: 0;
            transform: translateY(10px)
        }

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

    @media (width<=1024px) {
        .seo-text-v3__content {
            -moz-column-count: 1;
            column-count: 1
        }
    }


    .page-footer {
        background: #191e2a;
        margin-top: 24px
    }

    .page-footer * {
        font-family: Switzer, sans-serif
    }

    .page-footer__container {
        width: 1500px;
        max-width: calc(100% - 48px);
        margin: 0 auto
    }

    .page-footer__main {
        border-bottom: 1px solid #202736;
        align-items: center;
        gap: 62px;
        margin-bottom: 30px;
        display: flex
    }

    .page-footer__main-content {
        flex-direction: column;
        flex-grow: 1;
        gap: 32px;
        padding-block: 60px;
        display: flex
    }

    @media (width<=1300px) {
        .page-footer__main-content {
            align-items: center
        }
    }

    .page-footer__main-img-container {
        align-self: flex-end;
        font-size: 0
    }

    @media (width<=1300px) {
        .page-footer__main-img-container {
            display: none
        }
    }

    .page-footer__main-img-container img {
        width: auto;
        max-width: 100%;
        height: auto;
        max-height: 324px
    }

    .page-footer__bottom {
        background: #13161f;
        padding-bottom: 64px
    }

    .page-footer__top-row {
        display: flex
    }

    @media (width<=900px) {
        .page-footer__top-row {
            flex-direction: column;
            align-items: center;
            gap: 24px
        }
    }

    .page-footer__logo {
        max-height: 40px
    }

    .page-footer__socials-list {
        border-left: 1px solid #202736;
        border-right: 1px solid #202736;
        align-items: center;
        gap: 20px;
        margin-inline: 32px;
        padding-inline: 32px;
        display: flex
    }

    .page-footer__social-link {
        background-color: #9ba7bf;
        width: 18px;
        height: 18px;
        display: block;
        -webkit-mask-size: cover;
        mask-size: cover
    }

    .page-footer__social-link:hover {
        background-color: #b055ff
    }

    .page-footer__description {
        color: #9ba7bf;
        letter-spacing: .01px;
        font-size: 14px;
        font-weight: 500;
        line-height: 20px
    }

    .page-footer__stats {
        flex-wrap: wrap;
        align-items: center;
        gap: 64px;
        display: flex
    }

    @media (width<=1024px) {
        .page-footer__stats {
            gap: 32px
        }
    }

    @media (width<=560px) {
        .page-footer__stats {
            gap: 24px
        }
    }

    .page-footer__stat {
        flex-direction: column;
        gap: 4px;
        display: flex
    }

    @media (width<=560px) {
        .page-footer__stat {
            flex-basis: calc(50% - 24px)
        }
    }

    .page-footer__stat-top {
        align-items: center;
        gap: 8px;
        display: flex
    }

    .page-footer__stat-icon {
        background-color: #b055ff;
        width: 24px;
        height: 24px;
        display: block;
        -webkit-mask-position: 50%;
        mask-position: 50%;
        -webkit-mask-size: contain;
        mask-size: contain;
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat
    }

    .page-footer__stat-value {
        color: #fff;
        letter-spacing: .01px;
        font-size: 24px;
        font-weight: 600;
        line-height: 30px
    }

    .page-footer__stat-label {
        color: #9ba7bf;
        letter-spacing: .02px;
        text-transform: uppercase;
        font-size: 12px;
        font-weight: 600;
        line-height: 16px
    }

    .page-footer__payments {
        padding-top: 40px
    }

    .page-footer__payments-header {
        align-items: center;
        gap: 12px;
        margin-bottom: 28px;
        display: flex
    }

    .page-footer__payments-title {
        color: #c1c8d7;
        letter-spacing: .02px;
        text-transform: uppercase;
        font-size: 12px;
        font-weight: 700;
        line-height: 16px
    }

    .page-footer__payments-list-wrapper {
        scrollbar-width: none;
        border-bottom: 1px solid #202736;
        max-width: 100%;
        margin-bottom: 24px;
        padding-bottom: 20px;
        overflow-x: auto
    }

    .page-footer__payments-list-wrapper::-webkit-scrollbar {
        display: none
    }

    .page-footer__payments-list {
        justify-content: space-between;
        align-items: center;
        gap: 16px;
        display: flex
    }

    @media (width<=1200px) {
        .page-footer__payments-list {
            gap: 48px
        }
    }

    .page-footer__subject-info {
        padding-bottom: 24px
    }

    .page-footer__subject-info-top {
        justify-content: space-between;
        margin-bottom: 8px;
        display: flex
    }

    @media (width<=900px) {
        .page-footer__subject-info-top {
            flex-direction: column;
            gap: 20px
        }
    }

    .page-footer__subject-info-left {
        color: #9ba7bf;
        letter-spacing: .02px;
        font-size: 12px;
        font-weight: 500;
        line-height: 16px
    }

    .page-footer__subject-info-sponsored {
        color: #9ba7bf;
        letter-spacing: .02px;
        text-transform: uppercase;
        font-size: 12px;
        font-weight: 700;
        line-height: 16px
    }

    .page-footer__subject-info-right {
        align-items: center;
        gap: 12px;
        display: flex
    }

    .page-footer__copyright {
        color: #e6e9ef;
        letter-spacing: .02px;
        margin-bottom: 4px;
        font-size: 12px;
        font-weight: 700;
        line-height: 16px
    }

    .page-footer__subject-info-bottom {
        color: #9ba7bf;
        letter-spacing: 0;
        opacity: .2;
        font-size: 10px;
        font-weight: 400;
        line-height: 14px
    }


    .page-footer-lang-select {
        min-width: 234px
    }

    .page-footer-lang-select__option {
        color: #c1c8d7;
        letter-spacing: .01px;
        text-align: left;
        white-space: nowrap;
        gap: 8px;
        font-size: 14px;
        font-weight: 400;
        line-height: 20px;
        display: flex
    }

    .page-footer-lang-select__label {
        align-items: center;
        gap: 8px;
        display: flex
    }

    .page-footer-lang-select__label,
    .page-footer-lang-select__label * {
        color: #fff;
        letter-spacing: .01px;
        font-size: 14px;
        font-weight: 400;
        line-height: 20px
    }

    .page-footer-lang-select__icon {
        width: 20px;
        height: 20px
    }

    .page-footer-lang-select__container .ds-select__dropdown {
        background: #202736
    }


    .ds-select {
        flex-direction: column;
        display: flex;
        position: relative
    }

    .ds-select--disabled {
        opacity: .5;
        pointer-events: none
    }

    .ds-select__label {
        color: #e6e9ef;
        cursor: pointer;
        letter-spacing: .01px;
        font-size: 14px;
        font-weight: 400;
        line-height: 20px
    }

    .ds-select__wrapper {
        flex-direction: column;
        gap: 8px;
        display: flex
    }

    .ds-select__trigger {
        cursor: pointer;
        background-color: #202736;
        border: 1px solid #0000;
        border-radius: 8px;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        min-width: 200px;
        transition: border-color .15s ease-in-out, background-color .15s ease-in-out;
        display: flex
    }

    .ds-select__trigger:hover:not(:disabled) {
        border-color: #353a5a
    }

    .ds-select__trigger--open,
    .ds-select__trigger--open:hover:not(:disabled) {
        border-color: #b055ff
    }

    .ds-select__trigger:disabled {
        cursor: not-allowed
    }

    .ds-select--md .ds-select__trigger {
        padding: 12px 16px
    }

    .ds-select--lg .ds-select__trigger {
        padding: 16px
    }

    .ds-select__trigger-content {
        flex: 1;
        align-items: center;
        gap: 8px;
        min-width: 0;
        display: flex
    }

    .ds-select__trigger-icon {
        color: #9ba7bf
    }

    .ds-select__trigger-text {
        color: #fff;
        letter-spacing: .01px;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 14px;
        font-weight: 400;
        line-height: 20px;
        overflow: hidden
    }

    .ds-select__trigger-text--placeholder {
        color: #9ba7bf;
        opacity: .5
    }

    .ds-select__chevron {
        color: #9ba7bf;
        flex-shrink: 0;
        transition: transform .2s ease-in-out
    }

    .ds-select__chevron--open {
        transform: rotate(180deg)
    }

    .ds-select__dropdown {
        background-color: #191e2a;
        border-radius: 8px;
        width: 100%;
        min-width: 200px;
        overflow: hidden
    }

    .ds-select__dropdown.ds-select__dropdown::-webkit-scrollbar {
        width: 8px
    }

    .ds-select__dropdown.ds-select__dropdown::-webkit-scrollbar-track {
        background: 0 0;
        margin: 6px 0
    }

    .ds-select__dropdown.ds-select__dropdown::-webkit-scrollbar-thumb {
        background-color: #353a5a;
        background-clip: padding-box;
        border: 2px solid #0000;
        border-radius: 999px;
        min-height: 24px
    }

    .ds-select__dropdown.ds-select__dropdown::-webkit-scrollbar-thumb:hover {
        background-color: #4b5280
    }

    .ds-select__search {
        background-color: #191e2a;
        padding: 12px 16px 6px
    }

    .ds-select__search .input {
        width: 100%
    }

    .ds-select__search .input .input-content {
        width: auto
    }

    .ds-select__option {
        cursor: pointer;
        background: 0 0;
        border: none;
        align-items: center;
        gap: 10px;
        width: 100%;
        padding: 12px 16px;
        transition: background-color .15s ease-in-out, color .15s ease-in-out;
        display: flex
    }

    .ds-select__option:focus-visible,
    .ds-select__option:hover {
        background-color: #353a5a;
        outline: none
    }

    .ds-select__option:hover .ds-select__option-label {
        color: #b055ff
    }

    .ds-select__option-label {
        color: #9ba7bf;
        letter-spacing: .01px;
        white-space: nowrap;
        font-size: 14px;
        font-weight: 400;
        line-height: 20px
    }

    .ds-select__option--selected .ds-select__option-label {
        color: #b055ff
    }

    .ds-select__checkbox {
        background-color: #191e2a;
        border: 1px solid #353a5a;
        border-radius: 2px;
        flex-shrink: 0;
        justify-content: center;
        align-items: center;
        width: 20px;
        height: 20px;
        transition: background-color .15s ease-in-out, border-color .15s ease-in-out;
        display: flex
    }

    .ds-select__checkbox--checked {
        background-color: #b055ff;
        border-color: #b055ff
    }

    .ds-select__checkbox-icon {
        color: #fff
    }

    .ds-select__empty {
        color: #9ba7bf;
        letter-spacing: .01px;
        padding: 12px 16px;
        font-size: 14px;
        font-weight: 400;
        line-height: 20px
    }

    .v-popper--theme-select .v-popper__arrow-container {
        display: none
    }

    .v-popper--theme-select .v-popper__wrapper {
        box-shadow: 0 6px 10px 3px #00000052
    }


    .page-footer-nav {
        padding-bottom: 64px;
        position: relative
    }

    .page-footer-nav__categories {
        flex-wrap: wrap;
        justify-content: space-between;
        gap: 32px;
        display: flex;
        position: relative
    }

    @media (width<=560px) {
        .page-footer-nav__categories {
            flex-direction: column;
            align-items: stretch;
            gap: 20px;
            width: 100%
        }
    }

    .page-footer-nav .page-footer-nav__category:has(.page-footer-nav__links--open) .page-footer-nav__category-title .page-footer-nav__category-title-icon-container {
        transform: rotate(180deg)
    }

    .page-footer-nav__category-title {
        justify-content: space-between;
        align-items: center;
        gap: 16px;
        width: 100%;
        margin-bottom: 16px;
        display: flex
    }

    .page-footer-nav__category-title,
    .page-footer-nav__category-title * {
        color: #c1c8d7;
        letter-spacing: .01px;
        font-size: 14px;
        font-weight: 700;
        line-height: 20px
    }

    .page-footer-nav__category-title-icon-container {
        border: 1px solid #353a5a;
        border-radius: 4px;
        justify-content: center;
        align-items: center;
        width: 32px;
        height: 32px;
        padding: 8px;
        transition: transform .3s;
        display: flex
    }

    @media (width>=561px) {
        .page-footer-nav__category-title-icon-container {
            display: none
        }
    }

    .page-footer-nav__links {
        flex-direction: column;
        gap: 12px;
        display: flex
    }

    @media (width<=560px) {
        .page-footer-nav__links {
            opacity: 0;
            visibility: hidden;
            max-height: 0;
            transition: max-height .3s, opacity .3s, visibility .3s, transform .3s;
            overflow: hidden;
            transform: translateY(8px)
        }

        .page-footer-nav__links--open {
            opacity: 1;
            visibility: visible;
            max-height: 320px;
            transform: translateY(0)
        }
    }

    .page-footer-nav__item {
        align-items: center;
        gap: 8px;
        display: flex
    }

    .page-footer-nav__link {
        color: #e6e9ef;
        letter-spacing: .01px;
        font-size: 14px;
        font-weight: 600;
        line-height: 20px
    }

    .page-footer-nav__link:hover {
        color: #b055ff
    }


    .badge[data-v-f4fd3494] {
        text-transform: uppercase;
        white-space: nowrap;
        justify-content: center;
        align-items: center;
        gap: 0;
        display: inline-flex
    }

    .badge--with-icon[data-v-f4fd3494] {
        gap: var(--badge-gap, 4px)
    }

    .badge__icon[data-v-f4fd3494] {
        background-color: var(--icon-color);
        height: var(--icon-size, 20px);
        width: var(--icon-size, 20px);
        flex-shrink: 0;
        display: block;
        -webkit-mask-position: 50%;
        mask-position: 50%;
        -webkit-mask-size: contain;
        mask-size: contain;
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat
    }

    .badge__content[data-v-f4fd3494] {
        color: inherit;
        font-family: Switzer, sans-serif;
        font-size: inherit;
        font-weight: inherit;
        letter-spacing: inherit;
        line-height: inherit
    }

    .badge--lg[data-v-f4fd3494] {
        --icon-size: 20px;
        --badge-gap: 8px;
        letter-spacing: .01px;
        border-radius: 8px;
        font-size: 14px;
        line-height: 20px
    }

    .badge--lg[data-v-f4fd3494],
    .badge--md[data-v-f4fd3494] {
        padding: 8px 12px;
        font-weight: 700
    }

    .badge--md[data-v-f4fd3494] {
        --icon-size: 16px;
        --badge-gap: 8px;
        letter-spacing: .02px;
        border-radius: 4px;
        font-size: 12px;
        line-height: 16px
    }

    .badge--sm[data-v-f4fd3494] {
        --icon-size: 20px;
        --badge-gap: 8px;
        letter-spacing: .01px;
        border-radius: 4px;
        padding: 4px 8px;
        font-size: 14px;
        font-weight: 700;
        line-height: 20px
    }

    .badge--xs[data-v-f4fd3494] {
        letter-spacing: .02px;
        padding: 2px 4px;
        font-size: 12px;
        line-height: 16px
    }

    .badge--2xs[data-v-f4fd3494],
    .badge--xs[data-v-f4fd3494] {
        --icon-size: 10px;
        --badge-gap: 6px;
        border-radius: 2px;
        font-weight: 700
    }

    .badge--2xs[data-v-f4fd3494] {
        letter-spacing: 0;
        height: 16px;
        padding: 0 6px;
        font-size: 8px;
        line-height: normal
    }

    .badge--green-alpha[data-v-f4fd3494] {
        --icon-color: #64eb49;
        color: #64eb49;
        background: #64eb494d
    }

    .badge--green-fill[data-v-f4fd3494] {
        --icon-color: #13161f;
        color: #13161f;
        background: #64eb49
    }

    .badge--primary-fill[data-v-f4fd3494] {
        --icon-color: #13161f;
        color: #13161f;
        background: #b055ff
    }

    .badge--blue-alpha[data-v-f4fd3494] {
        --icon-color: #31bbff;
        color: #31bbff;
        background: #31bbff4d
    }

    .badge--blue-fill[data-v-f4fd3494] {
        --icon-color: #13161f;
        color: #13161f;
        background: #06a2f1
    }

    .badge--yellow-alpha[data-v-f4fd3494] {
        --icon-color: #fccb13;
        color: #fccb13;
        background: #a261064d
    }

    .badge--yellow-fill[data-v-f4fd3494] {
        --icon-color: #13161f;
        color: #13161f;
        background: #fccb13
    }

    .badge--red-alpha[data-v-f4fd3494] {
        --icon-color: #ff3d33;
        color: #ff3d33;
        background: #881a144d
    }

    .badge--red-fill[data-v-f4fd3494] {
        --icon-color: #13161f;
        color: #13161f;
        background: #ff3d33
    }

    .badge--red-fill-white[data-v-f4fd3494] {
        --icon-color: #13161f;
        color: #fff;
        background: #ff3d33
    }

    .badge--gray-alpha[data-v-f4fd3494] {
        --icon-color: #9ba7bf;
        color: #9ba7bf;
        background: #2027364d
    }

    .badge--gray-fill[data-v-f4fd3494] {
        --icon-color: #9ba7bf;
        color: #9ba7bf;
        background: #202736
    }

    .badge--neutral[data-v-f4fd3494] {
        color: #fff;
        --icon-color: #fff
    }


    .draggable-scroll {
        overflow-x: auto
    }

    .draggable-scroll--draggable {
        cursor: grab;
        -webkit-user-select: none;
        user-select: none
    }

    .draggable-scroll--draggable.draggable-scroll--dragging {
        cursor: grabbing
    }


    .text-canvas[data-v-763aa200] {
        -webkit-user-select: none;
        user-select: none;
        z-index: 2;
        user-drag: none;
        pointer-events: none;
        width: 100%;
        position: relative
    }

    .text-canvas canvas[data-v-763aa200] {
        transform-origin: 0 0;
        position: absolute;
        top: 0;
        left: 0;
        transform: scale(.5)
    }

    .text-canvas.--inline[data-v-763aa200] {
        vertical-align: middle;
        width: auto;
        display: inline-block;
        overflow: hidden
    }


    .debug-log .popup_box-container-box .popup_box-container .popup_box-container-content {
        flex-direction: column;
        gap: 16px;
        padding: 16px;
        display: flex
    }

    .debug-log ul {
        flex-direction: column;
        gap: 12px;
        display: flex;
        overflow: auto
    }

    .debug-log ul li {
        border-radius: 12px;
        padding: 12px;
        position: relative
    }

    .debug-log ul li>.G_Text b.G_Text-content {
        margin-bottom: 6px;
        font-size: 16px;
        font-weight: 600
    }

    .debug-log ul li>.G_Text span.G_Text-content {
        color: #8892a5;
        margin-bottom: 12px;
        font-size: 13px;
        font-weight: 600
    }

    .debug-log ul li .G_Icon {
        cursor: pointer;
        width: 16px;
        position: absolute;
        top: 12px;
        right: 12px
    }

    .debug-log ul li .args .G_Text {
        margin-bottom: 12px
    }

    .debug-log ul li .args .G_Text:last-of-type {
        margin-bottom: 0
    }

    .debug-log ul li .args .G_Text p.G_Text-content {
        word-break: break-all;
        font-size: 13px;
        font-weight: 400
    }

    .debug-log ul li:not(odd) {
        background-color: #161921
    }


    .navigation-top-bar-menu__profile {
        align-items: stretch;
        gap: 6px;
        display: flex
    }

    .navigation-top-bar-menu__profile-user {
        background-color: #202736;
        border-radius: 8px;
        flex: 1;
        align-items: center;
        gap: 8px;
        min-width: 0;
        max-height: 52px;
        padding: 4px 8px 4px 4px;
        display: flex;
        overflow: auto hidden
    }

    .navigation-top-bar-menu__profile-user::-webkit-scrollbar {
        width: 4px;
        height: 4px
    }

    .navigation-top-bar-menu__profile-user::-webkit-scrollbar-track {
        background: 0 0
    }

    .navigation-top-bar-menu__profile-user::-webkit-scrollbar-thumb {
        background: #353a5a;
        border-radius: 2px
    }

    .navigation-top-bar-menu__profile-user-avatar {
        flex-shrink: 0
    }

    .navigation-top-bar-menu__profile-user-info {
        flex-direction: column;
        min-width: 0;
        display: flex
    }

    .navigation-top-bar-menu__profile-user-info-name {
        color: #fff;
        letter-spacing: .01px;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 14px;
        font-weight: 600;
        line-height: 20px;
        overflow: hidden
    }

    .navigation-top-bar-menu__profile-user-info-wallets {
        align-items: center;
        gap: 8px;
        display: flex
    }

    .navigation-top-bar-menu__profile-user-info-wallets-balance {
        align-items: center;
        gap: 4px;
        display: flex
    }

    .creator-mode .navigation-top-bar-menu__profile-user-info-wallets-balance {
        filter: blur(8px)
    }

    .creator-mode .navigation-top-bar-menu__profile-user-info-wallets-balance:hover {
        filter: blur()
    }

    .navigation-top-bar-menu__profile-user-info-wallets-balance-icon {
        color: #64eb49;
        width: 14px;
        height: 14px
    }

    .navigation-top-bar-menu__profile-user-info-wallets-balance-value {
        color: #64eb49;
        letter-spacing: .01px;
        white-space: nowrap;
        font-size: 14px;
        font-weight: 600;
        line-height: 20px
    }

    .navigation-top-bar-menu__profile-user-info-wallets-tokens {
        align-items: center;
        gap: 4px;
        display: flex
    }

    .navigation-top-bar-menu__profile-user-info-wallets-tokens-icon {
        width: 14px;
        height: 14px
    }

    .navigation-top-bar-menu__profile-user-info-wallets-tokens-value {
        color: #d32ee6;
        letter-spacing: .01px;
        font-size: 14px;
        font-weight: 600;
        line-height: 20px
    }

    .navigation-top-bar-menu__profile-kyc {
        cursor: pointer;
        background-color: #202736;
        border-radius: 8px;
        flex-direction: column;
        justify-content: center;
        align-self: stretch;
        align-items: center;
        width: 52px;
        transition: background-color .2s;
        display: flex;
        position: relative
    }

    .navigation-top-bar-menu__profile-kyc:hover {
        background-color: #353a5a
    }

    .navigation-top-bar-menu__profile-kyc.--new {
        background-color: #a261064d;
        border-color: #fccb13
    }

    .navigation-top-bar-menu__profile-kyc-icon {
        color: #9ba7bf;
        width: 20px;
        height: 20px
    }

    .--new .navigation-top-bar-menu__profile-kyc-icon {
        color: #fccb13
    }

    .navigation-top-bar-menu__profile-kyc-level {
        color: #191e2a;
        letter-spacing: .02px;
        font-size: 12px;
        font-weight: 700;
        line-height: 16px;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%)
    }

    .navigation-top-bar-menu__profile-logout {
        align-self: stretch;
        width: 52px;
        height: 100%
    }


    .navigation-top-bar__right-menu {
        position: absolute;
        top: calc(100% + 28px);
        right: 0
    }

    .ntbm-enter-active,
    .ntbm-leave-active {
        transition: opacity .3s, transform .3s
    }

    .ntbm-enter-from,
    .ntbm-leave-to {
        opacity: 0;
        transform: scale(.98)
    }

    .ntbm-enter-to,
    .ntbm-leave-from {
        opacity: 1;
        transform: scale(1)
    }

    .navigation-top-bar-menu {
        background-color: #13161f;
        border-radius: 12px;
        flex-direction: column;
        gap: 8px;
        width: 420px;
        padding: 12px;
        display: flex
    }

    .navigation-top-bar-menu * {
        font-family: Switzer, sans-serif
    }

    .navigation-top-bar-menu .navigation-bottom-bar-menu__banners {
        gap: 4px;
        margin-bottom: -4px
    }

    .navigation-top-bar-menu__level {
        background-color: #202736;
        border-radius: 12px;
        padding: 4px;
        transition: opacity .2s;
        display: block
    }

    .navigation-top-bar-menu__level:hover {
        opacity: .85
    }

    .navigation-top-bar-menu__buy {
        display: flex
    }

    .navigation-top-bar-menu__buy-btn {
        width: 100%
    }