.x-modal .close {
    position: absolute;
    top: 2px;
    right: 2px;
    z-index: 5;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    opacity: .9
}

.x-modal .main {
    opacity: 1
}
.x-modal .deposit {
    opacity: 1
}
.x-modal .withdraw {
    opacity: 1
}
.x-modal .luckywheel {
    opacity: 1
}
.x-modal .freeluckywheel {
    opacity: 1
}
.x-modal .cashback {
    opacity: 1
}
.x-modal .affiliate {
    opacity: 1
}
.x-modal .promotion {
    opacity: 1
}
.x-modal .history {
    opacity: 1
}
.x-modal .bonus {
    opacity: 1
}

.x-modal .close .fa-times {
    font-size: 1.25rem
}

.x-modal .close.-in-tab {
    right: -50px;
    border-radius: 50%;
    background-color: #3b6a96;
    opacity: 1
}

@media (max-width:991.98px) {
    .x-modal .close.-in-tab {
        top: 4.5rem;
        right: .75rem;
        width: 36px;
        height: 36px
    }
}

@media (max-width:767.98px) {
    .x-modal .close.-in-tab .fa-times {
        font-size: 1rem
    }
}

.x-modal .-modal-size {
    transition: max-width .6s
}

@media (max-width:991.98px) {
    .x-modal .-modal-size {
        max-width: 100%;
        width: 100%;
        margin: 0
    }
}

.x-modal .-modal-size.-modal-big {
    max-width: 800px
}

@media (max-width:991.98px) {
    .x-modal .-modal-size.-modal-big {
        max-width: 100%
    }
}

.x-modal .-modal-size.-modal-medium {
    max-width: 600px
}

@media (max-width:991.98px) {
    .x-modal .-modal-size.-modal-medium {
        max-width: 100%
    }
}

.x-modal .-modal-size.-modal-bigger {
    max-width: 900px
}

@media (max-width:991.98px) {
    .x-modal .-modal-size.-modal-bigger {
        max-width: 100%
    }
}

@media (max-width:991.98px) {
    .x-modal .-modal-size.-no-fixed-button .-modal-content .-modal-body {
        bottom: 0
    }
}

.x-modal .-modal-content {
    background: linear-gradient(140deg, #23406a, #0c2347 95%);
    border-radius: 15px;
    border: 2px solid #cfcfcf;
    box-shadow: none
}

@media (max-width:991.98px) {
    .x-modal .-modal-content {
        border-radius: 0;
        border: none;
        border-top: 1px solid #0c2347
    }
}

@media (max-width:375px) {
    .x-modal .-modal-content {
        border: none;
        box-shadow: none
    }
}

.x-modal .-modal-content .-modal-header {
    padding: 2.5rem 2rem 1rem;
    color: #fff;
    border-bottom: none;
    text-align: center;
    font-weight: 400;
    font-size: 2rem
}

@media (max-width:991.98px) {
    .x-modal .-modal-content .-modal-header {
        padding: 2rem 2rem 1rem;
        font-size: 1.5rem;
        margin: 0 auto
    }
}

.x-modal .-modal-content .-modal-body {
    padding: 0 4rem 1.5rem
}

.x-modal .-modal-content .-modal-body::-webkit-scrollbar-track {
    background-color: hsla(0, 0%, 76.9%, .1);
    border-radius: 6px
}

.x-modal .-modal-content .-modal-body::-webkit-scrollbar {
    width: 6px;
    height: 6px;
    background-color: hsla(0, 0%, 76.9%, .25);
    border-radius: 6px
}

.x-modal .-modal-content .-modal-body::-webkit-scrollbar-thumb {
    background-color: hsla(0, 0%, 76.9%, .25);
    border-radius: 6px
}

@media (max-width:575.98px) {
    .x-modal .-modal-content .-modal-body {
        padding: 0 1rem 1.5rem
    }
}

.x-modal .-modal-content .-modal-body .-submit {
    width: 100%;
    padding: .8rem 2.5rem;
    color: #fff;
    border-radius: 9px;
    font-weight: 300;
    text-shadow: 1px 1px 5px rgba(0, 0, 0, .5);
    background: linear-gradient(180deg, #fe538b, #851a20);
    transition: all .2s ease-in-out
}

@media (prefers-reduced-motion:reduce) {
    .x-modal .-modal-content .-modal-body .-submit {
        transition: none
    }
}

@media (min-width:992px) {
    .x-modal .-modal-content .-modal-body .-submit:not([disabled]):hover {
        color: #fff;
        background: linear-gradient(180deg, #fe3a7a, #70161b)
    }
}

@media (max-width:991.98px) {
    .x-modal .-modal-content .-modal-body .-submit {
        height: 60px;
        font-size: 1.25rem;
        border-radius: 0;
        display: block;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100%;
        z-index: 1
    }
}

@media (max-width:767.98px) {
    .x-modal .-modal-content .-modal-body .-submit {
        height: 56px;
        font-size: 1.125rem
    }
}

.x-modal .-modal-main-account .-modal-content {
    background: linear-gradient(140deg, #23406a, #0c2347 95%);
    padding-top: 2.5rem
}

.x-modal .-modal-main-account .-modal-content .-modal-body {
    min-height: 410px;
    padding: 0 1.5rem 1.5rem;
    display: flex;
    flex-direction: row
}

.x-modal .-modal-main-account .-modal-content .-modal-body .-layout-account {
    background-color: #0d2547;
    width: 100%;
    padding: 1rem 1.5rem 1.5rem
}

.x-modal .-modal-main-account .-modal-content .close {
    top: .5rem;
    right: .5rem
}

.x-modal .-modal-deposit-promotion .-modal-content .-modal-body {
    background-color: transparent!important
}

.x-modal .-modal-deposit-promotion .-modal-content .x-text-with-link-component {
    display: block
}

.x-modal .-modal-social-share .-modal-content .close {
    top: .75rem;
    right: .75rem
}

@media (max-width:991.98px) {
    .x-modal .-modal-social-share .-modal-content .-social-share-header {
        position: relative;
        z-index: 1
    }
}

.x-modal .-modal-social-share .-modal-content .-social-share-header .-img-container {
    padding: 0 1.5rem;
    text-align: center;
    z-index: 2
}

.x-modal .-modal-social-share .-modal-content .-social-share-header .-img-container .-img {
    width: 100%;
    height: auto;
    transition: all .2s
}

.x-modal .-modal-social-share .-modal-content .-social-share-header .-title-container {
    text-align: center;
    margin-top: 2.5rem
}

@media (max-width:991.98px) {
    .x-modal .-modal-social-share .-modal-content .-social-share-header .-title-container {
        margin-top: 0
    }
}

.x-modal .-modal-social-share .-modal-content .-social-share-header .-title-container .-title {
    font-size: 2rem;
    text-shadow: 0 0 5px rgba(155, 225, 255, .5)
}

@media (max-width:991.98px) {
    .x-modal .-modal-social-share .-modal-content .-social-share-header .-title-container .-title {
        font-size: 1.5rem
    }
}

@media screen and (max-width:321px) {
    .x-modal .-modal-social-share .-modal-content .-social-share-header .-title-container .-title {
        font-size: 1.25rem
    }
}

.x-modal .-modal-social-share .-modal-content .-social-share-header .-title-container .-sub-title {
    font-size: 1.25rem;
    font-weight: 400;
    text-shadow: 0 0 5px rgba(155, 225, 255, .5);
    padding: 0 1rem
}

.x-modal .-modal-social-share .-modal-content .-modal-body {
    padding: 0 1rem
}

@media (max-width:991.98px) {
    .x-modal .-modal-social-share .-modal-content .-modal-body {
        background: transparent!important
    }
}

@media (max-width:767.98px) {
    .x-modal .-modal-social-share .-modal-content .-modal-body {
        padding: 0
    }
}

.x-modal .-modal-social-share .-modal-content .-modal-body .-social-share-form {
    padding: 1rem 1.5rem
}

.x-modal .-modal-social-share .-modal-content .-modal-body .-social-share-form .-text-link {
    color: #ef6363
}

.x-modal .-modal-social-share .-modal-content .-modal-body .-social-share-form .x-hr-border-primary {
    border: 1px solid hsla(0, 0%, 100%, .2)
}

.x-modal .-modal-social-share .-modal-content .-modal-body .-social-share-form .-social-share-detail-container .-text-step-container .-text-step-container-wrapper {
    display: flex;
    align-items: flex-start;
    height: 100%
}

.x-modal .-modal-social-share .-modal-content .-modal-body .-social-share-form .-social-share-detail-container .-text-step-container .-text-step-container-wrapper .-number-container {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    margin-right: 10px;
    font-size: 1.5rem;
    color: #fff;
    background-color: #ef6363;
    border-radius: 50%
}

.x-modal .-modal-social-share .-modal-content .-modal-body .-social-share-form .-social-share-detail-container .-text-step-container .-text-step-container-wrapper .-text-step-detail {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    padding-right: 0
}

.x-modal .-modal-social-share .-modal-content .-modal-body .-social-share-form .-social-share-detail-container .-text-step-container .-text-step-container-wrapper .-text-step-detail .-social-share-btn {
    background: linear-gradient(180deg, #fe538b, #851a20)
}

@media (min-width:992px) {
    .x-modal .-modal-social-share .-modal-content .-modal-body .-social-share-form .-social-share-detail-container .-text-step-container .-text-step-container-wrapper .-text-step-detail .-social-share-btn:hover {
        background: linear-gradient(180deg, #fe3a7a, #70161b)
    }
}

.x-modal .-modal-social-share .-modal-content .-modal-body .-social-share-form .-form-container .-x-input-icon .-icon,
.x-modal .-modal-social-share .-modal-content .-modal-body .-social-share-form .-form-container .-x-input-icon .-icon.is-valid {
    color: #ddd
}

.x-modal .-modal-social-share .-modal-content .-modal-body .-social-share-form .-form-container .-x-input-icon .form-control.is-valid {
    background-size: 1rem;
    color: #ddd
}

.x-modal .-modal-social-share .-modal-content .-modal-body .-social-share-form .-btn-wrapper {
    margin-top: 1.5rem;
    margin-bottom: 1rem
}

.x-modal .-modal-social-share .-modal-content .x-text-with-link-component {
    display: block;
    padding: .25rem
}

.x-modal .-modal-social-share .-modal-content .x-text-with-link-component .-text-message {
    margin-bottom: 0
}

.x-modal .-modal-social-share .-modal-content .-social-share-form .alert {
    margin-top: 1rem
}

.x-modal .-dialog-in-tab .x-title-modal {
    margin: 0 auto
}

.x-modal .-modal-mobile .x-modal-mobile-header {
    width: 100%
}

.x-modal .-modal-mobile .x-modal-mobile-header .x-title-modal {
    text-align: center
}

@media (max-width:991.98px) {
    .x-modal .-modal-mobile .x-modal-mobile-header .x-title-modal {
        margin: 0
    }
}

@media (max-width:991.98px) {
    .x-modal .-modal-mobile.-register-index-dialog .-modal-content .-modal-body {
        padding: 0;
        background: transparent;
        margin: .75rem
    }
    .x-modal .-modal-mobile.-register-index-dialog .-modal-content .-modal-body .-fake-inner-body {
        margin: 1rem 0;
        padding: 1rem 1rem .75rem;
        background: #0d2547;
        height: calc(100% - 84px);
        width: 100%
    }
    .x-modal .-modal-mobile.-modal-social-share .-modal-content .-modal-body {
        margin-top: 2.8rem;
        padding: 0!important
    }
    .x-modal .-modal-mobile.-modal-social-share .-modal-content .-modal-body .x-social-share-card::-webkit-scrollbar-track {
        background-color: hsla(0, 0%, 76.9%, .1);
        border-radius: 6px
    }
    .x-modal .-modal-mobile.-modal-social-share .-modal-content .-modal-body .x-social-share-card::-webkit-scrollbar {
        width: 6px;
        height: 6px;
        background-color: hsla(0, 0%, 76.9%, .25);
        border-radius: 6px
    }
    .x-modal .-modal-mobile.-modal-social-share .-modal-content .-modal-body .x-social-share-card::-webkit-scrollbar-thumb {
        background-color: hsla(0, 0%, 76.9%, .25);
        border-radius: 6px
    }
}

@media (max-width:767.98px) {
    .x-modal .-modal-mobile.-modal-social-share .-modal-content .-modal-body {
        margin-top: 0
    }
}

.x-modal .x-form-register .-success-ic,
.x-modal .x-form-success .-success-ic {
    width: 150px
}

.x-modal .x-form-register .-content .-sub-title .-text,
.x-modal .x-form-success .-content .-sub-title .-text {
    color: #78c5fc
}

.x-modal#resetPasswordModal .-img-container .-ic-register,
.x-modal#resetPasswordModal .-img-container .-ic-set-password {
    width: 150px
}

@media (max-width:575.98px) {
    .x-modal#resetPasswordModal .-img-container .-ic-register,
    .x-modal#resetPasswordModal .-img-container .-ic-set-password {
        width: 120px
    }
}

.x-modal#resetPasswordModal .-img-container .-ic-otp {
    width: 150px
}

@media (max-width:575.98px) {
    .x-modal#resetPasswordModal .-img-container .-ic-otp {
        width: 120px
    }
}

@media (max-width:375px) {
    .x-modal.-promotion-detail-modal .modal-dialog {
        padding-top: 0!important
    }
}

.x-modal.-promotion-detail-modal .modal-dialog .modal-content {
    position: relative;
    background-color: linear-gradient(140deg, #23406a, #0c2347 95%)
}

.x-modal.-promotion-detail-modal .modal-dialog .modal-content .modal-body {
    position: relative
}

.x-modal.-promotion-detail-modal .modal-dialog .modal-content .modal-body .-back-btn .-text,
.x-modal.-promotion-detail-modal .modal-dialog .modal-content .modal-body .-back-btn .fas {
    color: #fff
}

.x-admin-contact {
    position: relative;
    margin-top: .5rem;
    padding: 5px 0;
    text-align: center
}

.x-admin-contact label {
    margin-bottom: 0
}

@media (max-width:991.98px) {
    .x-admin-contact.-no-fixed {
        position: static!important;
        -webkit-transform: none!important;
        transform: none!important
    }
}

.x-slide-left-content {
    transition: all .6s;
    align-self: flex-start
}

.x-slide-left-content.-hide {
    height: 0;
    width: 0;
    flex-grow: 0;
    padding: 0;
    flex-basis: 0;
    overflow: hidden
}

.x-slide-left-content.-hide .x-title-modal {
    display: none!important
}

@media (max-width:991.98px) {
    .x-slide-left-content.-hide .-submit {
        display: none!important
    }
}

#loginModal .modal-dialog-scrollable .-modal-body,
#registerModal .modal-dialog-scrollable .-modal-body {
    overflow: unset
}

.x-modal.-v2 {
    font-weight: 300;
    font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji
}

.x-modal.-v2 .close {
    color: #566b8b;
    text-shadow: none
}

.x-modal.-v2 .close.-in-tab {
    color: #566b8b;
    background: #192e4c
}

@media (max-width:991.98px) {
    .x-modal.-v2 .close.-in-tab {
        top: -3rem;
        color: #566b8b;
        background: #192e4c
    }
}

.x-modal.-v2 .-modal-content {
    background: #192e4c;
    border: none
}

.x-modal.-v2 .-modal-content .-modal-body .-submit {
    background: linear-gradient(180deg, #fd528a, #861b21);
    text-shadow: none;
    border-radius: 8px
}

@media (min-width:992px) {
    .x-modal.-v2 .-modal-content .-modal-body .-submit:hover:not([disabled]) {
        background: linear-gradient(180deg, #b3305b, #730e14)
    }
}

.x-modal.-v2 .-modal-main-account .-modal-content {
    background: #192e4c
}

.x-modal.-v2 .-modal-main-account .-modal-content .-modal-body .-layout-account {
    border-radius: 14px;
    background-color: #14253d
}

@media (max-width:991.98px) {
    .x-modal.-v2.-with-half-size .modal-dialog {
        justify-content: flex-start
    }
}

@media (max-width:991.98px) {
    .x-modal.-v2.-with-half-size .modal-dialog.-clear-half .modal-content {
        height: 100%;
        min-height: 0;
        border-top-left-radius: 0;
        border-top-right-radius: 0
    }
}

@media (max-width:991.98px) {
    .x-modal.-v2.-with-half-size .-modal-content {
        height: unset;
        margin-top: auto
    }
}

@media (max-width:991.98px) {
    .x-modal.-v2.-with-backdrop .modal-body {
        padding-right: 0;
        padding-left: 0;
        padding-bottom: 0
    }
}

@media (max-width:991.98px) {
    .x-modal.-v2.-with-backdrop .-modal-content {
        background: #11223a
    }
}

@media (max-width:991.98px) {
    .x-modal.-v2.-with-backdrop .-fake-bg-top-wrapper {
        padding: 0 10rem 1rem
    }
}

@media (max-width:767.98px) {
    .x-modal.-v2.-with-backdrop .-fake-bg-top-wrapper {
        padding-left: 4rem;
        padding-right: 4rem
    }
}

@media (max-width:575.98px) {
    .x-modal.-v2.-with-backdrop .-fake-bg-top-wrapper {
        padding-left: 1.5rem;
        padding-right: 1.5rem
    }
}

@media (max-width:991.98px) {
    .x-modal.-v2.-with-backdrop .-fake-bg-bottom-wrapper {
        flex: 1;
        padding: 1rem 10rem;
        background: #192e4c;
        border-top-left-radius: 1rem;
        border-top-right-radius: 1rem
    }
}

@media (max-width:767.98px) {
    .x-modal.-v2.-with-backdrop .-fake-bg-bottom-wrapper {
        padding-left: 4rem;
        padding-right: 4rem
    }
}

@media (max-width:575.98px) {
    .x-modal.-v2.-with-backdrop .-fake-bg-bottom-wrapper {
        padding-left: 1.5rem;
        padding-right: 1.5rem
    }
}

.x-modal.-v2 .form-control,
.x-modal.-v2 .x-form-control {
    padding-left: .75rem;
    padding-right: .75rem;
    text-align: center;
    border-radius: 8px;
    border: 1px solid transparent;
    color: #f2f2f2;
    background-color: #05153a;
    font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji
}

@media (max-width:767.98px) {
    .x-modal.-v2 .form-control,
    .x-modal.-v2 .x-form-control {
        font-size: .875rem
    }
}

.x-modal.-v2 .form-control::-webkit-input-placeholder,
.x-modal.-v2 .x-form-control::-webkit-input-placeholder {
    color: #bdbdbd
}

.x-modal.-v2 .form-control:-ms-input-placeholder,
.x-modal.-v2 .x-form-control:-ms-input-placeholder {
    color: #bdbdbd
}

.x-modal.-v2 .form-control::-ms-input-placeholder,
.x-modal.-v2 .x-form-control::-ms-input-placeholder {
    color: #bdbdbd
}

.x-modal.-v2 .form-control::placeholder,
.x-modal.-v2 .x-form-control::placeholder {
    color: #bdbdbd
}

@media (max-width:767.98px) {
    .x-modal.-v2 .form-control::-webkit-input-placeholder,
    .x-modal.-v2 .x-form-control::-webkit-input-placeholder {
        font-size: .875rem
    }
    .x-modal.-v2 .form-control:-ms-input-placeholder,
    .x-modal.-v2 .x-form-control:-ms-input-placeholder {
        font-size: .875rem
    }
    .x-modal.-v2 .form-control::-ms-input-placeholder,
    .x-modal.-v2 .x-form-control::-ms-input-placeholder {
        font-size: .875rem
    }
    .x-modal.-v2 .form-control::placeholder,
    .x-modal.-v2 .x-form-control::placeholder {
        font-size: .875rem
    }
}

.x-modal.-v2 .form-control:focus,
.x-modal.-v2 .x-form-control:focus {
    border-color: transparent
}

.x-modal.-v2 .form-control+.invalid-feedback,
.x-modal.-v2 .x-form-control+.invalid-feedback {
    color: #ef4444
}

.x-modal.-v2 .form-control.is-invalid,
.x-modal.-v2 .x-form-control.is-invalid {
    border-color: #ef4444
}

.x-modal.-v2 .x-form-control.-text-big::-webkit-input-placeholder {
    font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji
}

.x-modal.-v2 .x-form-control.-text-big:-ms-input-placeholder {
    font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji
}

.x-modal.-v2 .x-form-control.-text-big::-ms-input-placeholder {
    font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji
}

.x-modal.-v2 .x-form-control.-text-big::placeholder {
    font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji
}

@media (max-width:767.98px) {
    .x-modal.-v2 .x-form-control.-text-big {
        font-size: 1.25rem
    }
}

.x-modal.-v2 .-x-input-icon .-icon {
    top: 18px
}

@media (max-width:991.98px) {
    .x-modal.-v2 .-x-input-icon .-icon {
        left: 20px
    }
}

@media (max-width:575.98px) {
    .x-modal.-v2 .-x-input-icon .-icon {
        left: 15px
    }
}

.x-modal.-v2 .x-title-modal {
    color: #f2f2f2;
    font-weight: 300;
    line-height: 1.5;
    font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji
}

#registerModal.-v2 .-img-container,
#resetPasswordModal.-v2 .-img-container {
    margin-bottom: 1rem
}

#registerModal.-v2 .-img-container .-ic-otp,
#registerModal.-v2 .-img-container .-ic-register,
#registerModal.-v2 .-img-container .-ic-set-password,
#resetPasswordModal.-v2 .-img-container .-ic-otp,
#resetPasswordModal.-v2 .-img-container .-ic-register,
#resetPasswordModal.-v2 .-img-container .-ic-set-password {
    width: 100px;
    height: auto;
    margin: 1rem 0
}

@media (max-width:991.98px) {
    #depositModal.-v2 .modal-dialog.-in-pending-dialog .-modal-content {
        background: #11223a
    }
}

@media (max-width:991.98px) {
    #depositModal.-v2 .-modal-content {
        background: #192e4c;
        border-top-left-radius: 15px;
        border-top-right-radius: 15px
    }
}

#depositModal.-v2 .-modal-content .modal-body {
    padding-left: 0;
    padding-right: 0
}

@media (max-width:991.98px) {
    #depositModal.-v2 .-modal-content .modal-body {
        position: relative;
        padding-top: 0!important;
        padding-bottom: 0
    }
}

@media (max-width:991.98px) {
    #depositModal.-v2.-with-backdrop .-fake-bg-bottom-wrapper {
        padding: 1rem 0
    }
}

@media (max-width:991.98px) {
    #depositModal.-v2 .-clear-half .-modal-content {
        border-top-left-radius: 0;
        border-top-right-radius: 0
    }
}

#depositModal.-v2 .-spacer {
    padding-right: 4rem;
    padding-left: 4rem
}

@media (max-width:575.98px) {
    #depositModal.-v2 .-spacer {
        padding-left: 1.5rem;
        padding-right: 1.5rem
    }
}

#depositModal.-v2 .-liner {
    margin-top: .25rem;
    margin-bottom: 1.25rem;
    border-top: 1px solid rgba(114, 187, 241, .5)
}

#loginModal .-ic-login {
    width: 160px
}

@media (max-width:767.98px) {
    #loginModal .-ic-login {
        width: 140px
    }
}

.x-login-form .-animatable-container {
    text-align: center
}

.x-login-form .-animatable-container .-img-container .-ic-login {
    width: 150px
}

@media (max-width:575.98px) {
    .x-login-form .-animatable-container .-img-container .-ic-login {
        width: 120px
    }
}

.x-login-form .-not-yet-member-container {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 2rem 0 .5rem
}

.x-login-form .-not-yet-member-container .-text-message {
    margin: 0;
    color: #ddd
}

.x-login-form .-not-yet-member-container .btn {
    margin-left: 15px
}

.x-login-form .x-reset-pw-text-container {
    width: 100%;
    margin: .75rem auto 1.5rem;
    text-align: right
}

.x-login-form .x-reset-pw-text-container.-v2 {
    margin: 1.25rem auto 1.75rem;
    text-align: center
}

.x-login-form .x-reset-pw-text-container.-v2 a {
    color: #f46e95
}

@media (min-width:992px) {
    .x-login-form .x-reset-pw-text-container.-v2 a:hover {
        color: #f686a6
    }
}

.x-login-form .x-reset-pw-text-container a {
    display: inline-block;
    color: #78c5fc;
    font-size: .875rem;
    font-weight: 300
}

@media (min-width:992px) {
    .x-login-form .x-reset-pw-text-container a:hover {
        color: #91d0fd
    }
}

@media (max-width:991.98px) {
    .x-register-already-form,
    .x-register-already-form .-animatable-container {
        height: 100%
    }
}

.x-register-already-form .-animate-img {
    height: 100px;
    text-align: center;
    overflow: hidden
}

.x-register-already-form .-animate-img .-icon-raspberry {
    width: 150px;
    height: auto
}

.x-register-already-form .-already-description {
    width: 100%;
    margin-bottom: 1rem;
    padding: 1rem;
    text-align: center;
    background: #05173a;
    border-radius: 5px
}

.x-register-already-form .x-reset-pw-text-container {
    width: 100%;
    margin: 1rem auto;
    text-align: center
}

.x-register-already-form .x-reset-pw-text-container a {
    display: inline-block;
    color: #fbc844
}

@media (min-width:992px) {
    .x-register-already-form .x-reset-pw-text-container a:hover {
        color: #fccf5d
    }
}

.x-deposit-promotion {
    max-height: 480px
}

@media (max-width:991.98px) {
    .x-deposit-promotion {
        max-height: unset
    }
}

.x-deposit-promotion .-promotion-container {
    overflow-x: hidden;
    overflow-y: auto
}

@media (min-width:768px) {
    .x-deposit-promotion .-promotion-container {
        padding: 1rem .25rem
    }
}

.x-deposit-promotion .-promotion-container::-webkit-scrollbar-track {
    background-color: #503c76
}

.x-deposit-promotion .-promotion-container::-webkit-scrollbar {
    width: 6px;
    height: 6px;
    background-color: #26114b;
    border-radius: 0
}

.x-deposit-promotion .-promotion-container::-webkit-scrollbar-thumb {
    background-color: #26114b;
    border-radius: 0
}

.x-deposit-promotion .-promotion-container .-promotion-card-link {
    margin: 3rem 0 1rem
}

@media (min-width:992px) {
    .x-deposit-promotion .-promotion-container .-promotion-card-link {
        padding: 0 8px
    }
}

@media (max-width:767.98px) {
    .x-deposit-promotion .-promotion-container .-promotion-card-link {
        margin-top: 4rem
    }
}

@media (max-width:575.98px) {
    .x-deposit-promotion .-promotion-container .-promotion-card-link {
        margin-top: 0;
        margin-bottom: 0
    }
    .x-deposit-promotion .-promotion-container .-promotion-card-link.-real-content {
        margin-top: 1rem
    }
}

@media (max-width:375px) {
    .x-deposit-promotion .-promotion-container .-promotion-card-link {
        margin: 0
    }
}

.x-deposit-promotion.-v2.-slide {
    display: flex;
    position: relative;
    max-height: unset;
    overflow: unset;
    width: 100%;
    padding-left: 8rem;
    right: 4rem
}

@media (max-width:991.98px) {
    .x-deposit-promotion.-v2.-slide {
        background: transparent
    }
}

@media (max-width:575.98px) {
    .x-deposit-promotion.-v2.-slide {
        padding-left: 3rem;
        right: 1.5rem
    }
}

.x-deposit-promotion.-v2.-slide .-no-result {
    width: 100%;
    margin-top: 1rem;
    padding: .7rem .5rem;
    font-size: 1rem;
    font-weight: 300;
    background: #473a29;
    border-radius: 5px
}

@media (min-width:992px) {
    .x-deposit-promotion.-v2.-slide .-no-result {
        max-height: 47px
    }
}

.x-deposit-promotion.-v2.-slide .-promotion-box-wrapper {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: calc(33.33333% - 6px);
    max-width: calc(33.33333% - 6px);
    padding: 12px 5px;
    background: #26436d;
    border-radius: 5px;
    border: 1px solid #72bbf1
}

@media (min-width:576px) and (max-width:991.98px) {
    .x-deposit-promotion.-v2.-slide .-promotion-box-wrapper {
        min-width: calc(25% - 6px);
        max-width: calc(25% - 6px)
    }
}

@media (max-width:575.98px) {
    .x-deposit-promotion.-v2.-slide .-promotion-box-wrapper {
        min-width: 100px;
        max-width: 100px
    }
}

.x-deposit-promotion.-v2.-slide .-promotion-box-wrapper:not(:last-child) {
    margin-right: 10px
}

.x-deposit-promotion.-v2.-slide .-promotion-box-wrapper:last-child {
    margin-right: 2rem
}

.x-deposit-promotion.-v2.-slide .-promotion-box-wrapper.-active {
    background: #3d5e8d;
    border-color: #72bbf1!important
}

.x-deposit-promotion.-v2.-slide .-promotion-box-apply-btn {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 0;
    font-size: .75rem;
    font-weight: 300;
    color: #72bbf1;
    text-align: center;
    border: none;
    line-height: 1.5
}

.x-deposit-promotion.-v2.-slide .-promotion-box-apply-btn .-img {
    width: 26px;
    height: auto;
    margin-bottom: 8px;
    opacity: 1
}

.x-deposit-promotion.-v2.-slide .-promotion-box-apply-btn:focus {
    box-shadow: none
}

.x-deposit-promotion.-v2.-slide .-promotion-box-cancel-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 5px;
    right: 5px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    font-size: .75rem;
    font-weight: 300;
    color: #fff;
    background: #ef4444
}

.x-deposit-promotion.-v2.-slide .-promotion-box-cancel-btn:not(.-show) {
    display: none
}

.x-modal.-alert-modal {
    padding-right: 0!important
}

.x-modal.-alert-modal .modal-dialog {
    margin-right: 0!important;
    padding-top: 0!important;
    color: #fff;
    width: 350px;
    transition: .6s linear
}

@media (max-width:991.98px) {
    .x-modal.-alert-modal .modal-dialog {
        height: 130px;
        right: 0
    }
}

.x-modal.-alert-modal .modal-dialog .-modal-content {
    max-width: 350px;
    margin-left: auto;
    transition: all .7s ease;
    overflow: hidden;
    min-height: auto;
    background: linear-gradient(140deg, #23406a, #0c2347 95%);
    border: 1px solid transparent
}

@media (max-width:991.98px) {
    .x-modal.-alert-modal .modal-dialog .-modal-content {
        border-radius: 8px;
        max-width: 270px
    }
}

@media (max-width:375px) {
    .x-modal.-alert-modal .modal-dialog .-modal-content {
        height: calc(100% - 60px)
    }
}

.x-modal.-alert-modal .modal-dialog .-modal-content .close {
    font-size: 2rem!important;
    border: none;
    border-radius: 0;
    top: 20px;
    right: 2px;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff
}

@media (max-width:991.98px) {
    .x-modal.-alert-modal .modal-dialog .-modal-content .close {
        top: 16px
    }
}

.x-modal.-alert-modal .modal-dialog .-modal-content .close span {
    width: 100%;
    padding-top: 5px
}

.x-modal.-alert-modal .modal-dialog .-modal-content:before {
    content: "";
    position: absolute;
    left: -100%;
    bottom: 0;
    width: 100%;
    height: 4px;
    background: #f3f3f3;
    transition: 2.4s linear 1s
}

.x-modal.-alert-modal .modal-dialog .-modal-content .modal-body {
    padding: 1rem;
    display: flex;
    align-items: center
}

.x-modal.-alert-modal .modal-dialog .-modal-content .modal-body.-modal-body {
    margin: 0;
    background-color: transparent
}

@media (max-width:991.98px) {
    .x-modal.-alert-modal .modal-dialog .-modal-content .modal-body.-modal-body {
        bottom: 0
    }
}

@media (max-width:991.98px) {
    .x-modal.-alert-modal .modal-dialog .-modal-content .modal-body {
        padding: 0 1rem
    }
}

@media (min-width:992px) {
    .x-modal.-alert-modal .modal-dialog .-modal-content .modal-body .-alert-body {
        padding-right: 1.2rem
    }
}

.x-modal.-alert-modal .modal-dialog .-modal-content .modal-body .-alert-body .-alert-body-wrapper {
    margin: auto
}

.x-modal.-alert-modal .modal-dialog .-modal-content .modal-body .-alert-body .-alert-body-wrapper .-img-alert {
    width: 47px;
    border-radius: 8px
}

@media (max-width:575.98px) {
    .x-modal.-alert-modal .modal-dialog .-modal-content .modal-body .-alert-body .-alert-body-wrapper .-img-alert {
        width: 42px
    }
}

.x-modal.-alert-modal .modal-dialog .-modal-content .modal-body .-alert-body .-title {
    font-size: 1rem;
    color: #f3f3f3
}

.x-modal.-alert-modal.show .modal-dialog .-modal-content:before {
    left: 0
}

.x-modal.-alert-modal.-hide-alert .modal-dialog .-modal-content {
    -webkit-transform: translate(105%);
    transform: translate(105%)
}

#loginModal .modal-dialog-scrollable .modal-content,
#registerModal .modal-dialog-scrollable .modal-content {
    overflow: unset
}

@media (max-width:991.98px) {
    #loginModal .-modal-content .-modal-body,
    #registerModal .-modal-content .-modal-body {
        position: relative;
        padding-bottom: 60px
    }
}

.x-modal-account-security-tabs {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    margin-bottom: 1.5rem;
    overflow: hidden
}

@media (min-width:992px) {
    .x-modal-account-security-tabs {
        border-top-left-radius: 13px;
        border-top-right-radius: 13px
    }
}

.x-modal-account-security-tabs.-v2 {
    margin-bottom: 1rem
}

.x-modal-account-security-tabs.-v2 .-btn {
    font-weight: 300;
    color: #fafafa;
    background: linear-gradient(180deg, #0c1b30, #152843)
}

.x-modal-account-security-tabs.-v2 .-btn.-active {
    color: #fafafa
}

@media (min-width:992px) {
    .x-modal-account-security-tabs.-v2 .-btn:hover {
        background: linear-gradient(180deg, #091526, #122239)
    }
}

.x-modal-account-security-tabs .-btn {
    flex: 1;
    padding: 1rem;
    font-size: 1.25rem;
    font-weight: 500;
    color: #fff;
    background: linear-gradient(180deg, #0c1a2f, #152843);
    border: none;
    outline: none;
    text-align: center;
    transition: background-color .2s
}

.x-modal-account-security-tabs .-btn.-active {
    background: transparent;
    color: #fff
}

@media (min-width:992px) {
    .x-modal-account-security-tabs .-btn:hover {
        background: linear-gradient(180deg, rgba(12, 26, 47, .8), rgba(21, 40, 67, .8))
    }
    .x-modal-account-security-tabs .-btn.-active:hover {
        background: transparent
    }
}

@media (max-width:767.98px) {
    .x-modal-account-security-tabs .-btn {
        font-size: 1.125rem
    }
}

.x-modal-separator-container {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%
}

#notificationCenterModal .-modal-content .modal-header {
    margin-top: 0!important;
    padding-top: 0!important;
    padding-bottom: 1.5rem!important
}

@media (max-width:991.98px) {
    #notificationCenterModal .-modal-content .modal-header {
        padding-bottom: 2.5rem!important
    }
}

#notificationCenterModal .-modal-content .modal-header .-outer-wrapper {
    position: relative;
    margin: auto
}

#notificationCenterModal .-modal-content .modal-header .-outer-wrapper .-title-bg {
    width: 300px;
    height: auto;
    -webkit-filter: drop-shadow(2px 2px 6px rgba(0, 0, 0, .75));
    filter: drop-shadow(2px 2px 6px rgba(0, 0, 0, .75))
}

@media (max-width:575.98px) {
    #notificationCenterModal .-modal-content .modal-header .-outer-wrapper .-title-bg {
        width: 260px
    }
}

@media screen and (max-width:360px) {
    #notificationCenterModal .-modal-content .modal-header .-outer-wrapper .-title-bg {
        width: 250px
    }
}

#notificationCenterModal .-modal-content .modal-body {
    overflow: hidden;
    padding: 1rem 0 3rem
}

@media (max-width:991.98px) {
    #notificationCenterModal .-modal-content .modal-body {
        padding-top: 0;
        padding-bottom: 2rem
    }
}

#notificationCenterModal .x-title-modal {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    margin: 0;
    -webkit-transform: translate(-50%, -55%);
    transform: translate(-50%, -55%)
}

#notificationCenterModal .x-title-modal .-ic-title {
    width: 40px;
    height: auto;
    -webkit-filter: drop-shadow(4px 2px 6px rgba(0, 0, 0, .75));
    filter: drop-shadow(4px 2px 6px rgba(0, 0, 0, .75))
}

@media (max-width:767.98px) {
    #notificationCenterModal .x-title-modal .-ic-title {
        width: 30px
    }
}

#notificationCenterModal .x-title-modal .-text {
    display: inline-block;
    position: relative;
    margin-left: 10px;
    background: radial-gradient(#fff, #d9d9d9);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    -webkit-filter: drop-shadow(2px 2px 2px #000);
    filter: drop-shadow(2px 2px 2px #000)
}

@media (max-width:767.98px) {
    #notificationCenterModal .x-title-modal .-text {
        font-size: 1.5rem
    }
}

.x-notification-center-render-container {
    position: relative
}

.x-notification-center-render-container .-no-result-with-reload {
    text-align: center
}

.x-notification-center-render-container .-delete-all-btn {
    position: absolute;
    bottom: -36px;
    left: 50%;
    background: transparent;
    border: none;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%)
}

.x-notification-center-render-container .-delete-all-btn:focus {
    outline: none
}

@media (max-width:991.98px) {
    .x-notification-center-render-container .-delete-all-btn {
        position: fixed;
        top: 70px;
        bottom: unset;
        right: 2rem;
        left: unset;
        -webkit-transform: unset;
        transform: unset;
        z-index: 0
    }
}

@media (max-width:767.98px) {
    .x-notification-center-render-container .-delete-all-btn {
        top: 60px
    }
}

.x-notification-center-render-container .-delete-all-btn .-text,
.x-notification-center-render-container .-delete-all-btn .fas {
    font-size: 1rem;
    background: linear-gradient(180deg, #e8e8e8, #858585);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent
}

.x-notification-center-render-container .-delete-all-btn .-text {
    display: inline-block
}

.x-notification-center-render-container .-delete-all-btn:hover .-text,
.x-notification-center-render-container .-delete-all-btn:hover .fas {
    background: linear-gradient(180deg, #fff, #9f9f9f);
    -webkit-background-clip: text
}

.x-notification-history-list-container {
    position: relative;
    z-index: 1;
    max-height: 500px;
    overflow-y: auto;
    border-radius: 1rem;
    padding: 0 1rem
}

.x-notification-history-list-container::-webkit-scrollbar-track {
    background-color: hsla(0, 0%, 76.9%, .1);
    border-radius: 6px
}

.x-notification-history-list-container::-webkit-scrollbar {
    width: 6px;
    height: 6px;
    background-color: hsla(0, 0%, 76.9%, .25);
    border-radius: 6px
}

.x-notification-history-list-container::-webkit-scrollbar-thumb {
    background-color: hsla(0, 0%, 76.9%, .25);
    border-radius: 6px
}

@media (max-width:991.98px) {
    .x-notification-history-list-container {
        max-height: 75vh
    }
}

@media (max-width:575.98px) {
    .x-notification-history-list-container {
        padding-bottom: 3rem
    }
}

.x-notification-history-list-container .-loading-wrapper {
    margin-top: 1rem;
    text-align: center;
    opacity: 0;
    visibility: hidden;
    transition: all .2s
}

.x-notification-history-list-container .-loading-wrapper.-visible {
    opacity: 1;
    visibility: visible
}

.x-notification-history-list-container .wg-more {
    display: none
}

.x-notification-list-item-wrapper {
    position: relative;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    padding: .8rem 1rem;
    background: hsla(0, 0%, 83.9%, .08);
    border-radius: 1rem
}

@media screen and (max-width:360px) {
    .x-notification-list-item-wrapper {
        padding: 1rem .5rem .5rem
    }
}

.x-notification-list-item-wrapper:not(:first-child) {
    margin-top: 1rem
}

.x-notification-list-item-wrapper.-unread {
    background: hsla(0, 0%, 83.9%, .3)
}

.x-notification-list-item-wrapper.-unread .-details-wrapper {
    opacity: 1
}

.x-notification-list-item-wrapper .-badge {
    position: absolute;
    top: 18px;
    left: 0;
    padding: 5px 15px 5px 10px;
    font-size: .875rem;
    font-weight: 500;
    color: #fff;
    border-radius: 0 20px 20px 0;
    box-shadow: 0 4px 4px rgba(0, 0, 0, .25)
}

@media (max-width:767.98px) {
    .x-notification-list-item-wrapper .-badge {
        padding: 4px 10px 4px 8px;
        font-size: .875rem
    }
}

.x-notification-list-item-wrapper .-badge.-new {
    background: linear-gradient(180deg, #d8206c 28%, #7c0941)
}

.x-notification-list-item-wrapper .-ic-img {
    width: 70px;
    height: auto
}

@media (max-width:575.98px) {
    .x-notification-list-item-wrapper .-ic-img {
        width: 60px
    }
}

.x-notification-list-item-wrapper .-details-wrapper {
    flex: 1 1 auto;
    padding-left: 1rem;
    opacity: .7
}

@media screen and (max-width:360px) {
    .x-notification-list-item-wrapper .-details-wrapper {
        padding-left: .5rem
    }
}

.x-notification-list-item-wrapper .-details-wrapper .-title {
    font-size: 1.125rem;
    font-weight: 500;
    color: #43c4ff
}

@media screen and (max-width:360px) {
    .x-notification-list-item-wrapper .-details-wrapper .-title {
        font-size: 1.125rem
    }
}

.x-notification-list-item-wrapper .-details-wrapper .-description {
    margin-bottom: 0;
    font-size: 1rem;
    font-weight: 300;
    color: #ececec
}

.x-notification-list-item-wrapper .-details-wrapper .-datetime {
    display: inline-block;
    margin-top: 10px;
    margin-bottom: 0;
    color: #ececec;
    font-size: .875rem
}

.x-notification-list-item-wrapper .-details-wrapper .-apply-promotion-btn {
    display: inline-block;
    margin-right: 5px;
    padding: 4px 10px;
    font-size: .875rem;
    color: #fff;
    background: linear-gradient(180deg, #d8206c 28%, #7c0941);
    border: none
}

@media (max-width:575.98px) {
    .x-notification-list-item-wrapper .-details-wrapper .-apply-promotion-btn {
        padding: 4px 6px
    }
}

.x-notification-list-item-wrapper .-coupon-code {
    font-size: 1rem;
    color: #ececec
}

.x-notification-list-item-wrapper .-coupon-code .-label {
    display: inline-block;
    margin-right: 5px
}

.x-notification-list-item-wrapper .-coupon-code .-copy-coupon-wrapper {
    display: inline-block;
    color: #e3be7a
}

.x-notification-list-item-wrapper .-coupon-code .fas {
    margin-left: 3px;
    font-size: 14px
}

.x-notification-list-item-wrapper .-actions-wrapper {
    text-align: right;
    flex: 0 0 25px
}

.x-notification-list-item-wrapper .-actions-wrapper .-delete-btn {
    padding: 0 .25rem
}

.x-notification-list-item-wrapper .-actions-wrapper .-delete-btn .fas {
    font-size: 1rem;
    background: linear-gradient(180deg, #e8e8e8, #858585);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent
}

.x-notification-list-item-wrapper .-actions-wrapper .-delete-btn:hover .fas {
    background: linear-gradient(180deg, #fff, #9f9f9f);
    -webkit-background-clip: text
}

.x-notification-badge-container {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    margin-left: 8px;
    font-size: 1rem;
    font-weight: 700;
    background: linear-gradient(180deg, #e60000 28%, #a70000);
    border-radius: 50%
}

.x-notification-badge-container .-text {
    color: #fff
}

.x-promotion-index {
    padding: 3rem 0;
    background-size: cover;
    background-position: top
}

@media (max-width:767.98px) {
    .x-promotion-index {
        padding: 2rem 0
    }
}

.x-promotion-index .-row-wrapper {
    margin-top: 1rem
}

.x-promotion-list-item {
    display: block;
    border-radius: 18px;
    overflow: hidden
}

.x-promotion-list-item .-cover-img {
    width: 100%;
    height: auto;
    border-radius: 20px;
    transition: all .2s ease-in-out
}

@media (prefers-reduced-motion:reduce) {
    .x-promotion-list-item .-cover-img {
        transition: none
    }
}

.x-promotion-list-item:hover .-cover-img {
    -webkit-transform: scale(1.025);
    transform: scale(1.025)
}

.x-promotion-return-by-user-container {
    font-weight: 300
}

.x-promotion-return-by-user-container .-promotion-return-btn {
    margin-bottom: 1rem;
    padding: .75rem 2.5rem;
    color: #fff;
    background: linear-gradient(180deg, #fe538b, #851a20)
}

@media (min-width:992px) {
    .x-promotion-return-by-user-container .-promotion-return-btn:hover {
        background: linear-gradient(180deg, #fe3a7a, #70161b)
    }
}

.x-promotion-return-by-user-container .-group-round-container {
    display: flex;
    justify-content: space-between;
    margin-bottom: 1rem;
    flex-direction: row
}

@media (max-width:991.98px) {
    .x-promotion-return-by-user-container .-group-round-container {
        flex-direction: column
    }
}

.x-promotion-return-by-user-container .-group-round-container.-expired,
.x-promotion-return-by-user-container .-group-round-container.-no-data {
    justify-content: center
}

.x-promotion-return-by-user-container .-group-round-container.-expired .-date-range-container,
.x-promotion-return-by-user-container .-group-round-container.-no-data .-date-range-container {
    flex: 1
}

.x-promotion-return-by-user-container .-group-round-container .-date-range-container {
    padding-top: 5px
}

@media (max-width:991.98px) {
    .x-promotion-return-by-user-container .-group-round-container .-date-range-container {
        text-align: center
    }
}

.x-promotion-return-by-user-container .-group-round-container .-bonus {
    display: flex;
    color: #fbc844
}

@media (max-width:991.98px) {
    .x-promotion-return-by-user-container .-group-round-container .-bonus {
        justify-content: center;
        margin-top: 1rem
    }
}

.x-promotion-return-by-user-container .-group-round-container .-bonus .-dollar-sign {
    display: flex;
    justify-content: center;
    background-color: #fbc844;
    align-items: center;
    width: 20px;
    height: 20px;
    margin-top: 1px;
    margin-right: 4px;
    color: #000;
    border-radius: 50%
}

.x-promotion-return-by-user-container .-group-round-container .-bonus .-dollar-sign .-dollar-sign-inner {
    position: relative;
    top: 4px;
    font-size: 1.125rem
}

.x-promotion-return-by-user-container .-description-container {
    font-size: 1.125rem;
    text-align: center
}

@media (max-width:767.98px) {
    .x-promotion-return-by-user-container .-description-container {
        font-size: 1rem
    }
}

.x-promotion-return-by-user-container .-description-container .-text-description {
    color: #fbc844
}

.x-promotion-return-by-user-container .-description-container button[disabled] {
    opacity: .5;
    pointer-events: none
}

.x-promotion-return-by-user-container .-condition-container {
    margin-top: .7rem;
    border-top: 1px solid #656565;
    overflow-y: auto
}

.x-promotion-return-by-user-container .-condition-container::-webkit-scrollbar-track {
    background-color: hsla(0, 0%, 76.9%, .1);
    border-radius: 6px
}

.x-promotion-return-by-user-container .-condition-container::-webkit-scrollbar {
    width: 6px;
    height: 6px;
    background-color: hsla(0, 0%, 76.9%, .25);
    border-radius: 6px
}

.x-promotion-return-by-user-container .-condition-container::-webkit-scrollbar-thumb {
    background-color: hsla(0, 0%, 76.9%, .25);
    border-radius: 6px
}

@media (min-width:992px) {
    .x-promotion-return-by-user-container .-condition-container {
        height: 230px
    }
}

.x-promotion-return-by-user-container .-condition-container .-condition-title {
    margin: 1rem 0 .7rem;
    color: #fff
}

@media (max-width:991.98px) {
    .x-promotion-return-by-user-container .x-admin-contact {
        border-top: 1px solid #656565
    }
}

.x-base-ranking-reward-list-wrapper {
    display: flex;
    flex-flow: column wrap;
    align-content: space-between
}

.x-base-ranking-reward-list-wrapper .-list-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 60px;
    width: calc(50% - 5px);
    margin-bottom: 10px;
    padding: 0 10px;
    background: hsla(0, 0%, 100%, .1);
    border-radius: 3px;
    transition: all .2s
}

@media (max-width:575.98px) {
    .x-base-ranking-reward-list-wrapper .-list-item {
        width: 100%
    }
}

@media (min-width:992px) {
    .x-base-ranking-reward-list-wrapper .-list-item:hover {
        background: hsla(0, 0%, 100%, .2)
    }
}

.x-base-ranking-reward-list-wrapper .-list-item .-position-wrapper {
    font-size: 1.125rem;
    font-weight: 400;
    color: #f3f3f3
}

.x-base-ranking-reward-list-wrapper .-list-item .-position-wrapper span {
    display: inline-block;
    position: relative
}

@media (max-width:767.98px) {
    .x-base-ranking-reward-list-wrapper .-list-item .-position-wrapper {
        font-size: 1rem
    }
}

.x-base-ranking-reward-list-wrapper .-list-item .-reward-wrapper {
    font-size: 1.25rem;
    font-weight: 600;
    color: #f3f3f3
}

.x-base-ranking-reward-list-wrapper .-list-item .-reward-wrapper .-ic {
    width: 36px;
    height: auto
}

.x-base-ranking-reward-list-wrapper .-list-item .-reward-wrapper span {
    display: inline-block;
    position: relative;
    top: 0;
    min-width: 50px
}

@media (min-width:576px) {
    .x-base-ranking-reward-list-wrapper.-board-credit,
    .x-base-ranking-reward-list-wrapper.-board-win {
        max-height: 210px
    }
}

.x-base-ranking-reward-list-wrapper.-competition .-list-item .-position-wrapper {
    display: flex;
    align-items: center
}

.x-base-ranking-reward-list-wrapper.-competition .-list-item .-position-wrapper .-position-img {
    width: 50px;
    height: auto
}

.x-base-ranking-reward-list-wrapper.-competition .-list-item .-position-wrapper span {
    margin-left: 5px
}

@media (min-width:992px) {
    .x-base-ranking-reward-list-wrapper.-competition {
        max-height: 280px
    }
    .x-base-ranking-reward-list-wrapper.-competition .-list-item {
        width: calc(33% - 5px)
    }
    .x-base-ranking-reward-list-wrapper.-competition .-list-item .-position-wrapper span {
        margin-left: 10px
    }
}

@media (min-width:576px) and (max-width:991.98px) {
    .x-base-ranking-reward-list-wrapper.-competition {
        max-height: 420px
    }
    .x-base-ranking-reward-list-wrapper.-competition .-list-item {
        width: calc(50% - 5px)
    }
}

.x-base-ranking-container {
    position: relative;
    padding: 2rem 0;
    background-size: contain;
    background-repeat: repeat;
    background-position: top;
    background: #000
}

@media (max-width:575.98px) {
    .x-base-ranking-container {
        padding-top: 0;
        padding-bottom: 0
    }
}

@media (max-width:575.98px) {
    .x-base-ranking-container .-custom-container {
        padding: 0
    }
}

.x-base-ranking-container .-ranking-separated-section {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap
}

.x-base-ranking-container .-ranking-separated-section .-inner-wrapper {
    width: 49.4%
}

@media (max-width:991.98px) {
    .x-base-ranking-container .-ranking-separated-section .-inner-wrapper {
        width: 100%
    }
}

.x-base-ranking-container .-ranking-container-wrapper {
    position: relative;
    top: -3px;
    z-index: 1;
    border-width: 3px;
    border-style: solid;
    -o-border-image: radial-gradient(#fff 50%, #0f87ad) 1;
    border-image: radial-gradient(#fff 50%, #0f87ad) 1;
    border-radius: 0;
    box-shadow: 0 0 10px rgba(230, 255, 253, .5)
}

.x-base-ranking-container .-ranking-container-wrapper .-slided {
    overflow: auto
}

@media (max-width:575.98px) {
    .x-base-ranking-container .-ranking-container-wrapper {
        top: 0;
        padding: 0;
        border: none;
        box-shadow: none;
        border-radius: 0
    }
}

.x-base-ranking-container .-ranking-table-outer-container {
    padding: 2rem;
    background: radial-gradient(58.52% 75.14% at 50% 50.08%, rgba(1, 76, 137, .5) 0, rgba(1, 74, 134, .5) 30%, rgba(1, 68, 125, .5) 50%, rgba(1, 56, 109, .5) 68%, rgba(1, 41, 88, .5) 85%, rgba(2, 17, 60, .5) 100%)
}

@media (max-width:991.98px) {
    .x-base-ranking-container .-ranking-table-outer-container {
        padding: 1rem
    }
}

@media (max-width:575.98px) {
    .x-base-ranking-container .-ranking-table-outer-container {
        padding: 0 15px 15px
    }
}

.x-base-ranking-container .-no-result {
    text-align: center
}

@media (max-width:991.98px) {
    .x-base-ranking-container .-no-result {
        padding-top: 1rem;
        padding-bottom: 1rem
    }
}

@media (max-width:575.98px) {
    .x-base-ranking-container .-no-result {
        padding-top: 2rem
    }
}

.x-base-ranking-container .-no-result .-title {
    font-size: 1.5rem
}

@media (max-width:991.98px) {
    .x-base-ranking-container .-no-result .-title {
        font-size: 1.25rem
    }
}

@media (max-width:575.98px) {
    .x-base-ranking-container .-no-result .-title {
        font-size: 1.125rem
    }
}

.x-base-ranking-container .-no-result .-description {
    margin-bottom: 0;
    font-size: 1.25rem
}

@media (max-width:991.98px) {
    .x-base-ranking-container .-no-result .-description {
        font-size: 1.125rem
    }
}

@media (max-width:575.98px) {
    .x-base-ranking-container .-no-result .-description {
        font-size: 1rem
    }
}

.x-base-ranking-tabs-menu-container {
    position: relative;
    flex-direction: row;
    justify-content: center;
    z-index: 2
}

.x-base-ranking-tabs-menu-container .nav-item {
    position: relative;
    width: 350px
}

.x-base-ranking-tabs-menu-container .nav-item:first-child:after {
    content: "";
    position: absolute;
    top: 50%;
    right: 0;
    width: 2px;
    height: 60%;
    background: #fafafa;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%)
}

.x-base-ranking-tabs-menu-container .nav-item:first-child .nav-link {
    border-top-left-radius: 10px
}

.x-base-ranking-tabs-menu-container .nav-item:last-child .nav-link {
    border-top-right-radius: 10px
}

@media (max-width:991.98px) {
    .x-base-ranking-tabs-menu-container .nav-item {
        width: 280px
    }
}

@media (max-width:767.98px) {
    .x-base-ranking-tabs-menu-container .nav-item {
        width: 220px
    }
}

@media (max-width:575.98px) {
    .x-base-ranking-tabs-menu-container .nav-item {
        width: 50%
    }
    .x-base-ranking-tabs-menu-container .nav-item:first-child .nav-link {
        border-top-left-radius: 0
    }
    .x-base-ranking-tabs-menu-container .nav-item:last-child .nav-link {
        border-top-right-radius: 0
    }
}

.x-base-ranking-tabs-menu-container .nav-link {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    padding: .5rem 1rem;
    background: linear-gradient(180deg, #143862, #05173b);
    transition: all .2s
}

.x-base-ranking-tabs-menu-container .nav-link .-ic {
    width: 40px;
    height: auto;
    -webkit-filter: grayscale(1);
    filter: grayscale(1);
    transition: all .2s
}

.x-base-ranking-tabs-menu-container .nav-link .-text {
    position: relative;
    top: 0;
    margin-left: 10px;
    font-size: 1.125rem;
    font-weight: 600;
    background: linear-gradient(180deg, #e5fffd, #76c5ff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    -webkit-filter: drop-shadow(0 1px 3px hsla(0, 0%, 100%, .5));
    filter: drop-shadow(0 1px 3px rgba(255, 255, 255, .5))
}

.x-base-ranking-tabs-menu-container .nav-link .-line-glow {
    display: none;
    position: absolute;
    left: 50%;
    bottom: -30px;
    width: 230px;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%)
}

.x-base-ranking-tabs-menu-container .nav-link.-active {
    background: linear-gradient(180deg, #143862, #05173b)
}

.x-base-ranking-tabs-menu-container .nav-link.-active:hover {
    -webkit-filter: brightness(1);
    filter: brightness(1)
}

.x-base-ranking-tabs-menu-container .nav-link.-active:hover .-ic {
    -webkit-filter: grayscale(0);
    filter: grayscale(0)
}

.x-base-ranking-tabs-menu-container .nav-link.-active .-ic {
    -webkit-filter: grayscale(0);
    filter: grayscale(0);
    -webkit-transform: scale(1.5) translate(-5px, -8px);
    transform: scale(1.5) translate(-5px, -8px)
}

.x-base-ranking-tabs-menu-container .nav-link.-active .-text {
    background: linear-gradient(180deg, #e5fffd, #76c5ff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    -webkit-animation: x-ranking-tab-saturate 2.5s infinite;
    animation: x-ranking-tab-saturate 2.5s infinite
}

.x-base-ranking-tabs-menu-container .nav-link.-active .-line-glow {
    display: block
}

@media (min-width:992px) {
    .x-base-ranking-tabs-menu-container .nav-link:hover {
        -webkit-filter: brightness(1.25);
        filter: brightness(1.25)
    }
    .x-base-ranking-tabs-menu-container .nav-link:hover .-ic {
        -webkit-filter: grayscale(.5);
        filter: grayscale(.5);
        -webkit-transform: scale(1.5) translate(-5px, -8px);
        transform: scale(1.5) translate(-5px, -8px)
    }
}

@media (max-width:767.98px) {
    .x-base-ranking-tabs-menu-container .nav-link {
        padding: .5rem
    }
    .x-base-ranking-tabs-menu-container .nav-link .-behind {
        display: block
    }
    .x-base-ranking-tabs-menu-container .nav-link.-active .-ic {
        -webkit-transform: scale(1.5) translate(-2px, -2px);
        transform: scale(1.5) translate(-2px, -2px)
    }
}

@media (max-width:575.98px) {
    .x-base-ranking-tabs-menu-container .nav-link,
    .x-base-ranking-tabs-menu-container .nav-link.-active {
        background: linear-gradient(180deg, #143862, #05173b)
    }
    .x-base-ranking-tabs-menu-container .nav-link.-active .-text {
        font-weight: 600
    }
    .x-base-ranking-tabs-menu-container .nav-link .-text {
        font-size: 1rem;
        font-weight: 500
    }
    .x-base-ranking-tabs-menu-container .nav-link .-line-glow {
        bottom: -27px;
        width: 200px
    }
}

@media screen and (max-width:360px) {
    .x-base-ranking-tabs-menu-container .nav-link .-line-glow {
        bottom: -21px;
        width: 160px
    }
}

@-webkit-keyframes x-ranking-tab-saturate {
    0% {
        -webkit-filter: drop-shadow(0 1px 3px hsla(0, 0%, 100%, .5)) saturate(1);
        filter: drop-shadow(0 1px 3px rgba(255, 255, 255, .5)) saturate(1)
    }
    50% {
        -webkit-filter: drop-shadow(0 1px 3px hsla(0, 0%, 100%, .5)) saturate(3);
        filter: drop-shadow(0 1px 3px rgba(255, 255, 255, .5)) saturate(3)
    }
    to {
        -webkit-filter: drop-shadow(0 1px 3px hsla(0, 0%, 100%, .5)) saturate(1);
        filter: drop-shadow(0 1px 3px rgba(255, 255, 255, .5)) saturate(1)
    }
}

@keyframes x-ranking-tab-saturate {
    0% {
        -webkit-filter: drop-shadow(0 1px 3px hsla(0, 0%, 100%, .5)) saturate(1);
        filter: drop-shadow(0 1px 3px rgba(255, 255, 255, .5)) saturate(1)
    }
    50% {
        -webkit-filter: drop-shadow(0 1px 3px hsla(0, 0%, 100%, .5)) saturate(3);
        filter: drop-shadow(0 1px 3px rgba(255, 255, 255, .5)) saturate(3)
    }
    to {
        -webkit-filter: drop-shadow(0 1px 3px hsla(0, 0%, 100%, .5)) saturate(1);
        filter: drop-shadow(0 1px 3px rgba(255, 255, 255, .5)) saturate(1)
    }
}

.x-ranking-container {
    padding-top: 75px
}

@media (max-width:991.98px) {
    .x-ranking-container {
        padding-top: 65px
    }
}

.x-ranking-content-class-container {
    margin-top: 0!important
}

.x-ranking-round-container {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 0 2rem;
    background: #05173b
}

.x-ranking-round-container .-btn {
    position: relative;
    width: 33.33333%;
    padding: 1.2rem 0;
    text-align: center;
    font-size: 1.125rem;
    color: hsla(0, 0%, 100%, .5);
    background: transparent;
    transition: color .2s
}

.x-ranking-round-container .-btn:before {
    display: none;
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 40px;
    height: 4px;
    background: #43c0f9;
    border-radius: 5px;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%)
}

.x-ranking-round-container .-btn:hover {
    text-decoration: none;
    color: hsla(0, 0%, 100%, .75)
}

.x-ranking-round-container .-btn.-active {
    font-weight: 600;
    color: #fff
}

.x-ranking-round-container .-btn.-active:before {
    display: block
}

@media (max-width:767.98px) {
    .x-ranking-round-container .-btn {
        font-size: 1.1rem
    }
}

@media (max-width:575.98px) {
    .x-ranking-round-container {
        padding: 0 15px
    }
    .x-ranking-round-container .-btn {
        font-size: .875rem
    }
}

.x-cover-ranking-container {
    position: relative;
    background-image: url(build/images/ranking-cover-bg.09dab4c8.png);
    background-size: cover;
    background-position: top;
    background-repeat: no-repeat;
    overflow: hidden
}

.x-cover-ranking-container:before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, .2), #000)
}

.x-cover-ranking-container .-ranking-inner-wrapper {
    position: relative;
    padding: 4rem 1.5rem 0
}

@media (max-width:575.98px) {
    .x-cover-ranking-container .-ranking-inner-wrapper {
        padding-right: 0;
        padding-left: 0
    }
}

.x-cover-ranking-container .-ranking-inner-wrapper .-contents-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    text-align: center
}

.x-cover-ranking-container .-ranking-inner-wrapper .-contents-wrapper .-heading-title {
    position: absolute;
    top: -9999px;
    left: -9999px
}

.x-cover-ranking-container .-ranking-inner-wrapper .-contents-wrapper .-logo {
    position: relative;
    z-index: 2;
    width: 150px;
    height: auto;
    margin-top: -1rem
}

@media (max-width:991.98px) {
    .x-cover-ranking-container .-ranking-inner-wrapper .-contents-wrapper .-logo {
        width: 140px
    }
}

@media (max-width:767.98px) {
    .x-cover-ranking-container .-ranking-inner-wrapper .-contents-wrapper .-logo {
        width: 130px;
        margin-top: -2rem
    }
}

@media (max-width:575.98px) {
    .x-cover-ranking-container .-ranking-inner-wrapper .-contents-wrapper .-logo {
        width: 100px
    }
}

.x-cover-ranking-container .-ranking-inner-wrapper .-title-image-wrapper {
    position: relative;
    width: 450px;
    margin-bottom: 3rem
}

@media (max-width:991.98px) {
    .x-cover-ranking-container .-ranking-inner-wrapper .-title-image-wrapper {
        width: 400px
    }
}

@media (max-width:767.98px) {
    .x-cover-ranking-container .-ranking-inner-wrapper .-title-image-wrapper {
        width: 350px;
        margin-bottom: 2rem
    }
}

@media (max-width:575.98px) {
    .x-cover-ranking-container .-ranking-inner-wrapper .-title-image-wrapper {
        width: 250px
    }
}

.x-cover-ranking-container .-ranking-inner-wrapper .-title-image-wrapper .-text-img {
    position: relative;
    z-index: 2;
    width: 100%;
    height: auto;
    margin-top: -.5rem
}

.x-cover-ranking-container .-ranking-inner-wrapper .-title-image-wrapper .-line-img {
    position: absolute;
    bottom: -22%;
    right: 0;
    z-index: 1;
    width: 90%;
    height: auto
}

.x-cover-ranking-container .-ranking-inner-wrapper .-title-image-wrapper .-effect-img {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 0;
    width: 170%;
    height: auto;
    opacity: .6;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%)
}

.x-cover-ranking-container .-ranking-inner-wrapper .-rules-btn {
    position: absolute;
    bottom: 20px;
    right: 0
}

.x-cover-ranking-container .-ranking-inner-wrapper .-rules-btn .-box-img {
    width: 140px;
    height: auto;
    transition: -webkit-transform .2s;
    transition: transform .2s;
    transition: transform .2s, -webkit-transform .2s
}

@media (max-width:991.98px) {
    .x-cover-ranking-container .-ranking-inner-wrapper .-rules-btn .-box-img {
        width: 100px
    }
}

@media (max-width:575.98px) {
    .x-cover-ranking-container .-ranking-inner-wrapper .-rules-btn .-box-img {
        width: 60px
    }
}

.x-cover-ranking-container .-ranking-inner-wrapper .-rules-btn:hover .-box-img {
    -webkit-transform: scale(1.05) rotate(5deg);
    transform: scale(1.05) rotate(5deg)
}

.x-cover-ranking-container .-ranking-inner-wrapper .-timer-wrapper {
    margin-top: 2rem;
    font-size: 2rem
}

@media (min-width:576px) {
    .x-ranking-customer-own-wrapper {
        margin-bottom: 2rem
    }
}

.x-ranking-customer-own-wrapper .-title-wrapper {
    margin-bottom: 5px;
    padding-left: 7.2%
}

@media (max-width:991.98px) {
    .x-ranking-customer-own-wrapper .-title-wrapper {
        padding-left: 40px
    }
}

@media (max-width:767.98px) {
    .x-ranking-customer-own-wrapper .-title-wrapper {
        padding-left: 15px
    }
}

@media (max-width:575.98px) {
    .x-ranking-customer-own-wrapper .-title-wrapper {
        padding-top: 1rem;
        padding-left: 12px
    }
}

.x-ranking-customer-own-wrapper .-title-wrapper .-title {
    display: inline-block;
    font-size: 1.125rem;
    font-weight: 600;
    background: -webkit-linear-gradient(#fff, #9ff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent
}

@media (max-width:575.98px) {
    .x-ranking-customer-own-wrapper .-title-wrapper .-title {
        font-size: 1rem
    }
}

@media screen and (max-width:360px) {
    .x-ranking-customer-own-wrapper .-title-wrapper .-title {
        font-size: .9rem
    }
}

.x-ranking-heading-column-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 5px;
    padding: 0 20px
}

.x-ranking-heading-column-wrapper .-column-wrapper {
    width: 25%;
    text-align: center
}

.x-ranking-heading-column-wrapper .-column-wrapper .-text {
    display: inline-block;
    font-size: 1.125rem;
    font-weight: 600;
    background: -webkit-linear-gradient(#fff, #9ff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent
}

.x-ranking-heading-column-wrapper .-column-wrapper.-position {
    width: 15%
}

.x-ranking-heading-column-wrapper .-column-wrapper.-profile {
    width: 35%
}

@media (max-width:1199.98px) {
    .x-ranking-heading-column-wrapper {
        padding: 0 15px
    }
}

@media (max-width:991.98px) {
    .x-ranking-heading-column-wrapper .-column-wrapper.-profile {
        min-width: 190px
    }
}

@media (max-width:767.98px) {
    .x-ranking-heading-column-wrapper {
        padding: 0 10px
    }
    .x-ranking-heading-column-wrapper .-column-wrapper.-position {
        width: 50px
    }
    .x-ranking-heading-column-wrapper .-column-wrapper.-profile {
        width: auto;
        min-width: 120px
    }
}

@media (max-width:575.98px) {
    .x-ranking-heading-column-wrapper {
        padding: 1.5rem 10px 0
    }
    .x-ranking-heading-column-wrapper .-column-wrapper.-profile {
        width: 90px;
        min-width: unset
    }
    .x-ranking-heading-column-wrapper .-column-wrapper.-position {
        width: 40px
    }
    .x-ranking-heading-column-wrapper .-column-wrapper.-result {
        width: auto;
        max-width: 180px;
        flex: 1
    }
    .x-ranking-heading-column-wrapper .-column-wrapper.-reward {
        width: 70px
    }
    .x-ranking-heading-column-wrapper .-column-wrapper .-text {
        font-size: 1rem
    }
}

@media screen and (max-width:380px) {
    .x-ranking-heading-column-wrapper .-column-wrapper.-profile {
        width: 70px
    }
}

@media screen and (max-width:360px) {
    .x-ranking-heading-column-wrapper .-column-wrapper .-text {
        font-size: .9rem
    }
}

.x-ranking-item-full-size-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 10px;
    background: hsla(0, 0%, 100%, .05);
    border: 2px solid transparent;
    padding: 8px 20px
}

@media (max-width:1199.98px) {
    .x-ranking-item-full-size-container {
        padding-right: 15px;
        padding-left: 15px
    }
}

@media (max-width:767.98px) {
    .x-ranking-item-full-size-container {
        padding-right: 10px;
        padding-left: 10px
    }
}

@media screen and (max-width:360px) {
    .x-ranking-item-full-size-container {
        padding-right: 5px;
        padding-left: 5px
    }
}

.x-ranking-item-full-size-container .-profile-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 35%;
    color: #fff
}

.x-ranking-item-full-size-container .-profile-wrapper .-group-img {
    width: 55px;
    height: auto;
    margin-right: 8px
}

@media (max-width:1199.98px) {
    .x-ranking-item-full-size-container .-profile-wrapper {
        flex: 0 0 32%
    }
}

@media (max-width:991.98px) {
    .x-ranking-item-full-size-container .-profile-wrapper .-group-img {
        width: 50px
    }
}

@media (max-width:767.98px) {
    .x-ranking-item-full-size-container .-profile-wrapper {
        align-items: center;
        min-width: 120px
    }
    .x-ranking-item-full-size-container .-profile-wrapper .-group-img {
        width: 40px;
        margin-right: 5px
    }
}

@media (max-width:575.98px) {
    .x-ranking-item-full-size-container .-profile-wrapper {
        padding-left: 3px;
        flex: 0 0 25%;
        min-width: 85px
    }
    .x-ranking-item-full-size-container .-profile-wrapper .-group-img {
        width: 30px
    }
}

@media screen and (max-width:380px) {
    .x-ranking-item-full-size-container .-profile-wrapper {
        flex: 0 0 10%;
        min-width: 55px;
        padding-left: 5px
    }
    .x-ranking-item-full-size-container .-profile-wrapper .-group-img {
        display: none
    }
}

.x-ranking-item-full-size-container .-profile-info-wrapper {
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    min-width: 112px
}

.x-ranking-item-full-size-container .-profile-info-wrapper .-phone-number {
    font-size: 1.125rem;
    font-weight: 500
}

.x-ranking-item-full-size-container .-profile-info-wrapper .-group-title {
    font-size: .875rem;
    font-weight: 300
}

@media (max-width:1199.98px) {
    .x-ranking-item-full-size-container .-profile-info-wrapper {
        min-width: 100px
    }
    .x-ranking-item-full-size-container .-profile-info-wrapper .-phone-number {
        font-size: 1rem
    }
}

@media (max-width:767.98px) {
    .x-ranking-item-full-size-container .-profile-info-wrapper {
        position: relative
    }
    .x-ranking-item-full-size-container .-profile-info-wrapper .-phone-number {
        position: relative;
        font-size: .9rem
    }
    .x-ranking-item-full-size-container .-profile-info-wrapper .-phone-number .-hidden {
        position: relative;
        display: inline-block
    }
}

@media (max-width:575.98px) {
    .x-ranking-item-full-size-container .-profile-info-wrapper {
        min-width: unset
    }
    .x-ranking-item-full-size-container .-profile-info-wrapper .-phone-number {
        font-size: .75rem;
        font-weight: 400
    }
    .x-ranking-item-full-size-container .-profile-info-wrapper .-group-title {
        display: none
    }
}

.x-ranking-item-full-size-container .-position-wrapper {
    flex: 0 0 15%;
    text-align: center
}

.x-ranking-item-full-size-container .-position-wrapper .-ic {
    width: 50px;
    height: auto
}

.x-ranking-item-full-size-container .-position-wrapper .-text {
    position: relative;
    top: 0;
    margin-right: 15px;
    font-size: 1.25rem;
    font-weight: 600;
    color: #fff
}

@media (max-width:1199.98px) {
    .x-ranking-item-full-size-container .-position-wrapper .-text {
        font-size: 1rem
    }
}

@media (max-width:991.98px) {
    .x-ranking-item-full-size-container .-position-wrapper {
        flex: 0 0 10%
    }
}

@media (max-width:767.98px) {
    .x-ranking-item-full-size-container .-position-wrapper .-ic {
        width: 100%
    }
    .x-ranking-item-full-size-container .-position-wrapper .-text {
        margin-right: unset
    }
}

@media (max-width:575.98px) {
    .x-ranking-item-full-size-container .-position-wrapper {
        flex: 0 0 8%
    }
}

@media screen and (max-width:360px) {
    .x-ranking-item-full-size-container .-position-wrapper {
        min-width: 26px
    }
}

.x-ranking-item-full-size-container .-result-wrapper {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex: 1 1 25%;
    padding-right: 40px;
    text-align: center;
    color: #fff
}

.x-ranking-item-full-size-container .-result-wrapper .-round-diff {
    font-size: .875rem;
    font-weight: 300;
    color: #c4c4c4
}

@media (max-width:991.98px) {
    .x-ranking-item-full-size-container .-result-wrapper .-round-diff {
        font-size: .9rem
    }
}

@media (max-width:767.98px) {
    .x-ranking-item-full-size-container .-result-wrapper .-round-diff {
        font-size: .75rem
    }
}

@media (max-width:575.98px) {
    .x-ranking-item-full-size-container .-result-wrapper .-round-diff {
        font-size: .7rem
    }
}

.x-ranking-item-full-size-container .-result-wrapper .-value-wrapper {
    text-align: right
}

.x-ranking-item-full-size-container .-result-wrapper .-value {
    display: inline-block;
    position: relative;
    top: 0;
    font-size: 1.25rem;
    font-weight: 500
}

.x-ranking-item-full-size-container .-result-wrapper .-value.-own {
    font-size: 1.25rem
}

.x-ranking-item-full-size-container .-result-wrapper .-ic-provider-wrapper {
    margin-left: 10px;
    width: 40px
}

.x-ranking-item-full-size-container .-result-wrapper .-ic-provider-wrapper .-img {
    width: 100%;
    height: auto
}

@media (min-width:992px) {
    .x-ranking-item-full-size-container .-result-wrapper .-value.-own {
        margin-left: 5px
    }
}

@media (max-width:1199.98px) {
    .x-ranking-item-full-size-container .-result-wrapper {
        padding-right: 20px
    }
    .x-ranking-item-full-size-container .-result-wrapper .-value {
        font-size: 1.25rem
    }
    .x-ranking-item-full-size-container .-result-wrapper .-ic-provider-wrapper {
        width: 34px
    }
}

@media (max-width:991.98px) {
    .x-ranking-item-full-size-container .-result-wrapper {
        padding-right: 0
    }
    .x-ranking-item-full-size-container .-result-wrapper .-value {
        font-size: 1.125rem
    }
    .x-ranking-item-full-size-container .-result-wrapper .-value.-own {
        display: block;
        font-size: 1.125rem
    }
}

@media (max-width:767.98px) {
    .x-ranking-item-full-size-container .-result-wrapper .-value,
    .x-ranking-item-full-size-container .-result-wrapper .-value.-own {
        font-size: 1rem
    }
    .x-ranking-item-full-size-container .-result-wrapper .-ic-provider-wrapper {
        width: 30px;
        margin-left: 3px
    }
}

@media (max-width:575.98px) {
    .x-ranking-item-full-size-container .-result-wrapper {
        width: auto;
        max-width: 180px;
        flex: 1;
        justify-content: flex-end
    }
    .x-ranking-item-full-size-container .-result-wrapper .-value {
        top: 0
    }
    .x-ranking-item-full-size-container .-result-wrapper .-ic-provider-wrapper {
        width: 25px
    }
}

@media screen and (max-width:360px) {
    .x-ranking-item-full-size-container .-result-wrapper .-value {
        font-size: .9rem
    }
    .x-ranking-item-full-size-container .-result-wrapper .-value.-own {
        font-size: .7rem
    }
    .x-ranking-item-full-size-container .-result-wrapper .-ic-provider-wrapper {
        width: 20px
    }
}

.x-ranking-item-full-size-container .-reward-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    flex: 0 0 20%;
    text-align: center;
    color: #fff
}

.x-ranking-item-full-size-container .-reward-wrapper .-reward-text {
    display: inline-block;
    position: relative;
    top: 0;
    font-size: 1.25rem;
    font-weight: 600;
    min-width: 52px;
    margin-left: 5px;
    text-align: left
}

@media (max-width:1199.98px) {
    .x-ranking-item-full-size-container .-reward-wrapper .-reward-text {
        font-size: 1.25rem
    }
}

@media (max-width:991.98px) {
    .x-ranking-item-full-size-container .-reward-wrapper .-reward-text {
        min-width: 40px;
        font-size: 1.125rem
    }
}

@media (max-width:767.98px) {
    .x-ranking-item-full-size-container .-reward-wrapper .-reward-text {
        font-size: 1rem
    }
}

@media (max-width:575.98px) {
    .x-ranking-item-full-size-container .-reward-wrapper .-reward-text {
        min-width: 32px;
        margin-left: 2px
    }
}

.x-ranking-item-full-size-container .-reward-wrapper .-ic {
    width: 40px;
    height: auto;
    margin: 0 5px
}

.x-ranking-item-full-size-container .-reward-wrapper .-ic.-highlight {
    width: 50px
}

@media (max-width:1199.98px) {
    .x-ranking-item-full-size-container .-reward-wrapper {
        flex: 0 0 22%
    }
}

@media (max-width:991.98px) {
    .x-ranking-item-full-size-container .-reward-wrapper {
        justify-content: flex-end
    }
    .x-ranking-item-full-size-container .-reward-wrapper .-ic,
    .x-ranking-item-full-size-container .-reward-wrapper .-ic.-highlight {
        width: 34px
    }
}

@media (max-width:767.98px) {
    .x-ranking-item-full-size-container .-reward-wrapper {
        flex: 0 0 26%
    }
    .x-ranking-item-full-size-container .-reward-wrapper .-ic {
        width: 30px;
        margin: 0 2px
    }
    .x-ranking-item-full-size-container .-reward-wrapper .-ic.-highlight {
        width: 30px
    }
}

@media (max-width:575.98px) {
    .x-ranking-item-full-size-container .-reward-wrapper {
        flex: 0 0 0%;
        min-width: 85px
    }
    .x-ranking-item-full-size-container .-reward-wrapper .-ic,
    .x-ranking-item-full-size-container .-reward-wrapper .-ic.-highlight {
        width: 20px
    }
}

@media screen and (max-width:360px) {
    .x-ranking-item-full-size-container .-reward-wrapper .-ic,
    .x-ranking-item-full-size-container .-reward-wrapper .-ic.-highlight {
        width: 20px
    }
}

.x-ranking-item-full-size-container.-top-item {
    margin-top: 0;
    background: hsla(0, 0%, 100%, .2);
    border: 2px solid;
    border-image-slice: 1;
    border-image-source: #b1fff1
}

.x-ranking-item-full-size-container.-top-item .-profile-wrapper {
    color: #fff
}

.x-ranking-item-full-size-container.-top-item .-position-wrapper .-ic {
    margin: 0 6px;
    -webkit-transform: scale(1.3);
    transform: scale(1.3)
}

.x-ranking-item-full-size-container.-top-item .-result-wrapper .-value {
    background: -webkit-linear-gradient(#fff, #9ff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent
}

.x-ranking-item-full-size-container.-top-item .-result-wrapper .-round-diff {
    color: #c4c4c4
}

.x-ranking-item-full-size-container.-top-item .-reward-wrapper .-reward-text {
    background: -webkit-linear-gradient(#fff, #9ff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent
}

@media (max-width:1199.98px) {
    .x-ranking-item-full-size-container.-top-item .-position-wrapper .-ic {
        -webkit-transform: scale(1.2);
        transform: scale(1.2)
    }
}

@media (max-width:991.98px) {
    .x-ranking-item-full-size-container.-top-item .-position-wrapper .-ic {
        margin: 0 3px;
        -webkit-transform: scale(1);
        transform: scale(1)
    }
}

@media (max-width:767.98px) {
    .x-ranking-item-full-size-container.-top-item .-position-wrapper .-ic {
        margin: 0
    }
}

.x-ranking-item-full-size-container.-second-item,
.x-ranking-item-full-size-container.-third-item {
    background: hsla(0, 0%, 100%, .1);
    border: 2px solid transparent
}

.x-ranking-item-full-size-container.-second-item .-profile-wrapper,
.x-ranking-item-full-size-container.-third-item .-profile-wrapper {
    color: #fff
}

.x-ranking-item-full-size-container.-second-item .-position-wrapper .-ic,
.x-ranking-item-full-size-container.-third-item .-position-wrapper .-ic {
    margin: 0 6px;
    -webkit-transform: scale(1.25);
    transform: scale(1.25)
}

.x-ranking-item-full-size-container.-second-item .-result-wrapper .-value,
.x-ranking-item-full-size-container.-third-item .-result-wrapper .-value {
    background: #fff;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent
}

.x-ranking-item-full-size-container.-second-item .-result-wrapper .-round-diff,
.x-ranking-item-full-size-container.-third-item .-result-wrapper .-round-diff {
    color: #c4c4c4
}

.x-ranking-item-full-size-container.-second-item .-reward-wrapper .-reward-text,
.x-ranking-item-full-size-container.-third-item .-reward-wrapper .-reward-text {
    background: #fff;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent
}

@media (max-width:1199.98px) {
    .x-ranking-item-full-size-container.-second-item .-position-wrapper .-ic,
    .x-ranking-item-full-size-container.-third-item .-position-wrapper .-ic {
        -webkit-transform: scale(1.1);
        transform: scale(1.1)
    }
}

@media (max-width:991.98px) {
    .x-ranking-item-full-size-container.-second-item .-position-wrapper .-ic,
    .x-ranking-item-full-size-container.-third-item .-position-wrapper .-ic {
        margin: 0 3px;
        -webkit-transform: scale(1);
        transform: scale(1)
    }
}

@media (max-width:767.98px) {
    .x-ranking-item-full-size-container.-second-item .-position-wrapper .-ic,
    .x-ranking-item-full-size-container.-third-item .-position-wrapper .-ic {
        margin: 0
    }
}

@media (min-width:1200px) {
    .x-ranking-item-full-size-container.-small-item .-profile-info-wrapper .-phone-number {
        font-size: 1rem
    }
    .x-ranking-item-full-size-container.-small-item .-result-wrapper {
        padding-right: 20px
    }
    .x-ranking-item-full-size-container.-small-item .-result-wrapper .-round-diff {
        font-size: .875rem
    }
}

@media (min-width:992px) {
    .x-ranking-item-full-size-container.-small-item .-position-wrapper {
        flex: 0 1 10%
    }
    .x-ranking-item-full-size-container.-small-item .-result-wrapper {
        padding-right: unset
    }
    .x-ranking-item-full-size-container.-small-item .-result-wrapper .-value {
        font-size: 1rem
    }
    .x-ranking-item-full-size-container.-small-item .-result-wrapper .-ic-provider-wrapper {
        width: 34px
    }
    .x-ranking-item-full-size-container.-small-item .-result-wrapper .-ic-provider-wrapper .-img {
        width: 100%
    }
    .x-ranking-item-full-size-container.-small-item .-reward-wrapper {
        flex: 0 1 20%
    }
    .x-ranking-item-full-size-container.-small-item .-reward-wrapper .-reward-text {
        min-width: auto;
        font-size: 1rem
    }
}

@media (min-width:992px) and (max-width:1199.98px) {
    .x-ranking-item-full-size-container.-small-item .-profile-wrapper .-group-img {
        width: 40px
    }
    .x-ranking-item-full-size-container.-small-item .-profile-info-wrapper .-phone-number {
        font-size: .9rem
    }
    .x-ranking-item-full-size-container.-small-item .-reward-wrapper .-ic {
        width: 32px
    }
    .x-ranking-item-full-size-container.-small-item .-result-wrapper .-round-diff {
        font-size: .75rem
    }
}

.x-ranking-item-full-size-container.-is-own {
    background: hsla(0, 0%, 100%, .1);
    border: 2px solid;
    border-image-slice: 1;
    border-image-source: linear-gradient(180deg, #fbc844, #fbc844)
}

.x-ranking-item-full-size-container.-is-own .-position-wrapper .-text,
.x-ranking-item-full-size-container.-is-own .-profile-info-wrapper,
.x-ranking-item-full-size-container.-is-own .-result-wrapper,
.x-ranking-item-full-size-container.-is-own .-reward-wrapper {
    color: #fbc844
}

.x-ranking-item-full-size-container.-is-own .-result-wrapper .-round-diff {
    color: hsla(0, 0%, 100%, .75)
}

.x-ranking-item-full-size-container.-my-item {
    margin-top: 0;
    background: hsla(0, 0%, 100%, .1);
    border: 2px solid;
    border-image-slice: 1;
    border-image-source: linear-gradient(180deg, #fbc844, #fbc844)
}

#rankingWeeklyDetailModal .modal-body {
    padding-left: 2rem;
    padding-right: 2rem
}

@media (max-width:575.98px) {
    #rankingWeeklyDetailModal .modal-body {
        padding-left: 1rem;
        padding-right: 1rem
    }
}

#rankingWeeklyDetailModal .x-title-modal {
    margin-top: 0;
    text-align: center
}

.x-ranking-weekly-modal-detail-container {
    margin-top: 1rem
}

.x-ranking-weekly-modal-detail-container .-provider-list-wrapper {
    flex-direction: row;
    margin: 2rem auto
}

@media (max-width:575.98px) {
    .x-ranking-weekly-modal-detail-container .-provider-list-wrapper {
        flex-wrap: wrap;
        justify-content: center
    }
}

.x-ranking-weekly-modal-detail-container .-provider-list-wrapper .nav-item {
    width: 70px;
    margin-right: 10px
}

.x-ranking-weekly-modal-detail-container .-provider-list-wrapper .nav-item .-provider-img {
    width: 100%;
    height: auto;
    transition: -webkit-transform .2s;
    transition: transform .2s;
    transition: transform .2s, -webkit-transform .2s
}

@media (min-width:992px) {
    .x-ranking-weekly-modal-detail-container .-provider-list-wrapper .nav-item:hover .-provider-img {
        -webkit-transform: scale(1.1);
        transform: scale(1.1)
    }
}

@media (max-width:991.98px) {
    .x-ranking-weekly-modal-detail-container .-provider-list-wrapper .nav-item {
        width: 60px;
        margin-right: 5px
    }
}

@media (max-width:575.98px) {
    .x-ranking-weekly-modal-detail-container .-provider-list-wrapper .nav-item {
        width: 20%;
        max-width: 70px;
        margin-right: 2px
    }
}

.x-ranking-weekly-modal-detail-container .-heading-title {
    margin-bottom: .75rem;
    font-size: 1.3rem;
    font-weight: 600;
    background: -webkit-linear-gradient(#fff, #9ff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent
}

.x-ranking-weekly-modal-detail-container .-promotion-detail-wrapper {
    overflow: auto;
    font-weight: 300
}

.x-ranking-weekly-modal-detail-container .-promotion-detail-wrapper::-webkit-scrollbar-track {
    background-color: hsla(0, 0%, 76.9%, .1);
    border-radius: 6px
}

.x-ranking-weekly-modal-detail-container .-promotion-detail-wrapper::-webkit-scrollbar {
    width: 6px;
    height: 6px;
    background-color: hsla(0, 0%, 76.9%, .25);
    border-radius: 6px
}

.x-ranking-weekly-modal-detail-container .-promotion-detail-wrapper::-webkit-scrollbar-thumb {
    background-color: hsla(0, 0%, 76.9%, .25);
    border-radius: 6px
}

@media (min-width:992px) {
    .x-ranking-weekly-modal-detail-container .-promotion-detail-wrapper {
        max-height: 200px
    }
}

.x-ranking-weekly-modal-detail-container .-promotion-detail-wrapper p {
    margin-bottom: 0
}

.x-ranking-weekly-modal-detail-container .-rewards-detail-wrapper {
    margin-top: 2rem
}

@media (max-width:991.98px) {
    .x-ranking-weekly-modal-detail-container .-rewards-detail-wrapper {
        margin-top: 1rem
    }
}

.x-ranking-weekly-modal-detail-container .-no-result {
    padding: 2rem 1rem;
    text-align: center;
    background: hsla(0, 0%, 100%, .1)
}

.x-ranking-weekly-modal-detail-container .-no-result .-img {
    width: 50px;
    height: auto
}

.x-ranking-weekly-modal-detail-container .-no-result .-title {
    margin-top: .75rem;
    margin-bottom: 0;
    font-size: 1.3rem
}

.x-ranking-weekly-modal-detail-container .-no-result .-description {
    margin-top: .5rem;
    margin-bottom: 0;
    font-size: 1.1rem
}

.x-theme-switcher .nav {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    width: 450px;
    margin: auto
}

@media (max-width:575.98px) {
    .x-theme-switcher .nav {
        align-items: flex-start;
        width: 100%;
        max-width: 350px
    }
}

.x-theme-switcher .nav-item {
    width: 33.33333%;
    text-align: center
}

.x-theme-switcher .nav-item.-active .nav-link .-logo {
    -webkit-filter: drop-shadow(0 0 6px rgba(245, 234, 245, .5));
    filter: drop-shadow(0 0 6px rgba(245, 234, 245, .5))
}

.x-theme-switcher .nav-item.-active .nav-link .-text {
    font-weight: 600;
    color: #f3f3f3
}

.x-theme-switcher .nav-link {
    display: inline-block;
    text-align: center
}

@media (max-width:767.98px) {
    .x-theme-switcher .nav-link {
        padding: .5rem
    }
}

.x-theme-switcher .nav-link .-logo {
    width: 110px;
    height: auto;
    transition: all .2s ease-in-out
}

@media (prefers-reduced-motion:reduce) {
    .x-theme-switcher .nav-link .-logo {
        transition: none
    }
}

@media (max-width:575.98px) {
    .x-theme-switcher .nav-link .-logo {
        width: 85%
    }
}

.x-theme-switcher .nav-link .-text {
    margin-top: .25rem;
    font-weight: 300;
    color: #c4c4c4;
    transition: all .2s ease-in-out
}

@media (prefers-reduced-motion:reduce) {
    .x-theme-switcher .nav-link .-text {
        transition: none
    }
}

@media (max-width:575.98px) {
    .x-theme-switcher .nav-link .-text {
        font-size: .875rem
    }
}

@media (min-width:768px) {
    .x-theme-switcher .nav-link:hover .-logo {
        -webkit-filter: drop-shadow(0 0 6px rgba(245, 234, 245, .5));
        filter: drop-shadow(0 0 6px rgba(245, 234, 245, .5));
        -webkit-transform: scale(1.05);
        transform: scale(1.05)
    }
    .x-theme-switcher .nav-link:hover .-text {
        font-weight: 600;
        color: #f3f3f3
    }
}

#themeSwitcherModal {
    background: rgba(0, 0, 0, .7)
}

#themeSwitcherModal .-modal-body,
#themeSwitcherModal .-modal-content {
    background: transparent
}

@media (max-width:991.98px) {
    #themeSwitcherModal .-modal-body,
    #themeSwitcherModal .-modal-content {
        position: relative;
        padding: 0
    }
}

#themeSwitcherModal .-modal-content {
    border: none;
    box-shadow: none
}

#themeSwitcherModal .-modal-body {
    padding: 0;
    overflow: unset
}

#themeSwitcherModal .-modal-size {
    padding: 0!important
}

@media (max-width:991.98px) {
    #themeSwitcherModal .-modal-size {
        position: relative;
        width: auto;
        height: auto
    }
}

#vipEventModal .-modal-body {
    padding-left: 2rem;
    padding-right: 2rem
}

@media (max-width:767.98px) {
    #vipEventModal .-modal-body {
        padding-left: 1rem;
        padding-right: 1rem
    }
}

@media (max-width:575.98px) {
    #vipEventModal .-modal-body {
        padding-left: .5rem;
        padding-right: .5rem
    }
}

.x-vip-event-modal-container .x-no-result-component {
    margin-bottom: 1rem
}

.x-vip-event-modal-container .x-no-result-component .-inner-wrapper .-img {
    width: 150px
}

.x-vip-event-modal-container .x-no-result-component .-inner-wrapper .-title {
    font-size: 1.75rem
}

.x-vip-event-modal-container .-title-wrapper {
    margin-bottom: 1rem;
    text-align: center
}

.x-vip-event-modal-container .-title-wrapper .-img {
    width: 90%;
    height: auto
}

.x-vip-event-modal-container .-title-wrapper .-welcome {
    margin-top: .5rem;
    margin-bottom: 0;
    font-size: 1.125rem;
    color: #fff
}

@media (max-width:991.98px) {
    .x-vip-event-modal-container .-title-wrapper .-img {
        width: 450px
    }
}

@media (max-width:575.98px) {
    .x-vip-event-modal-container .-title-wrapper .-img {
        width: 100%
    }
}

.x-vip-event-modal-container .-list-item-wrapper {
    margin-top: 2rem
}

@media (max-width:575.98px) {
    .x-vip-event-modal-container .-list-item-wrapper {
        margin-top: 1.5rem
    }
}

.x-vip-event-list-item {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .5rem 1rem;
    border: 1px solid rgba(155, 225, 255, .5);
    border-radius: 10px;
    overflow: hidden
}

@media (max-width:575.98px) {
    .x-vip-event-list-item {
        min-height: 110px
    }
}

@media screen and (max-width:360px) {
    .x-vip-event-list-item {
        align-items: flex-start
    }
}

.x-vip-event-list-item:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url(build/images/vip-event-item-bg.fb8af362.png);
    background-size: cover;
    background-position: 50%;
    background-repeat: no-repeat;
    -webkit-filter: contrast(.75);
    filter: contrast(.75)
}

.x-vip-event-list-item:not(:last-child) {
    margin-bottom: 1.25rem
}

@media (max-width:575.98px) {
    .x-vip-event-list-item:not(:last-child) {
        margin-bottom: 1rem
    }
}

.x-vip-event-list-item .-left-wrapper {
    position: relative;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: flex-start
}

.x-vip-event-list-item .-left-wrapper .-icon-wrapper {
    position: relative;
    width: 100px;
    min-width: 100px;
    margin-right: 8px
}

@media (max-width:575.98px) {
    .x-vip-event-list-item .-left-wrapper .-icon-wrapper {
        width: 80px;
        min-width: 80px
    }
}

.x-vip-event-list-item .-left-wrapper .-icon-wrapper .-ic {
    position: relative;
    width: 100%;
    height: auto;
    transition: -webkit-transform .3s;
    transition: transform .3s;
    transition: transform .3s, -webkit-transform .3s
}

.x-vip-event-list-item .-left-wrapper .-icon-wrapper .-ic-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: auto
}

.x-vip-event-list-item .-left-wrapper .-icon-wrapper .-ic-check {
    display: none;
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 1;
    width: 55%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%)
}

.x-vip-event-list-item .-left-wrapper .-outer-detail-wrapper {
    flex: 1;
    display: flex;
    justify-content: space-between;
    align-items: center
}

@media screen and (max-width:360px) {
    .x-vip-event-list-item .-left-wrapper .-outer-detail-wrapper {
        flex-direction: column;
        align-items: flex-start
    }
}

.x-vip-event-list-item .-left-wrapper .-detail-wrapper {
    flex: 1;
    padding-right: 10px
}

@media screen and (max-width:360px) {
    .x-vip-event-list-item .-left-wrapper .-detail-wrapper {
        width: 100%;
        padding-right: 0
    }
}

.x-vip-event-list-item .-left-wrapper .-title {
    font-size: 1.25rem;
    font-weight: 600
}

.x-vip-event-list-item .-left-wrapper .-title .-remaining {
    color: #00c1fd
}

@media (max-width:991.98px) {
    .x-vip-event-list-item .-left-wrapper .-title {
        font-size: 1.125rem
    }
}

@media screen and (max-width:360px) {
    .x-vip-event-list-item .-left-wrapper .-title br {
        display: none
    }
}

.x-vip-event-list-item .-left-wrapper .-description {
    font-size: 1rem
}

.x-vip-event-list-item .-left-wrapper .-description:not(.-normal) {
    color: #c4c4c4
}

@media (max-width:991.98px) {
    .x-vip-event-list-item .-left-wrapper .-description {
        font-size: .875rem
    }
}

.x-vip-event-list-item:hover .-left-wrapper .-icon-wrapper .-ic {
    -webkit-transform: scale(1.1);
    transform: scale(1.1)
}

.x-vip-event-list-item.-active {
    border: 2px solid #9be1ff;
    box-shadow: 0 0 10px #9be1ff
}

.x-vip-event-list-item.-active:before {
    -webkit-filter: contrast(1);
    filter: contrast(1)
}

.x-vip-event-list-item.-finished {
    justify-content: center
}

.x-vip-event-list-item.-finished:before {
    -webkit-filter: contrast(1.25);
    filter: contrast(1.25)
}

.x-vip-event-list-item.-finished .-left-wrapper {
    justify-content: center
}

.x-vip-event-list-item.-finished .-left-wrapper .-icon-wrapper .-ic {
    mix-blend-mode: luminosity
}

.x-vip-event-list-item.-finished .-left-wrapper .-icon-wrapper .-ic-check {
    display: inline-block
}

.x-vip-event-list-item.-finished .-left-wrapper .-outer-detail-wrapper {
    flex: unset
}

.x-vip-event-get-promotion-button {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    min-width: 100px;
    padding: .5rem .75rem;
    font-size: .875rem;
    color: #fff;
    background: linear-gradient(180deg, #b5b0f0, #857fbc);
    border: none;
    border-radius: 3px;
    transition: all .3s
}

@media (max-width:575.98px) {
    .x-vip-event-get-promotion-button {
        min-width: 90px;
        padding: .5rem .25rem
    }
}

@media screen and (max-width:360px) {
    .x-vip-event-get-promotion-button {
        margin-top: .5rem;
        margin-bottom: .5rem
    }
}

.x-vip-event-get-promotion-button:hover {
    text-decoration: none;
    color: #fff
}

.x-vip-event-get-promotion-button .-ic-arrow {
    width: 20px;
    height: auto;
    margin-left: 10px;
    -webkit-animation: x-item-moving-to-right .5s infinite alternate;
    animation: x-item-moving-to-right .5s infinite alternate
}

.x-vip-event-get-promotion-button:not(.-active) {
    cursor: none;
    pointer-events: none
}

.x-vip-event-get-promotion-button.-active {
    background: linear-gradient(180deg, #fbc844, #f88012);
    border: 1px solid #fff0bc;
    box-shadow: 0 0 8px rgba(255, 196, 45, .8)
}

.x-vip-event-get-promotion-button.-active:hover {
    background: linear-gradient(180deg, #fab912, #d16706);
    box-shadow: 0 0 12px rgba(255, 196, 45, .8)
}

.x-withdraw-form {
    position: relative;
    margin-top: 2rem
}

@media (max-width:991.98px) {
    .x-withdraw-form,
    .x-withdraw-form .-animatable-container,
    .x-withdraw-form form {
        height: 100%
    }
}

@media (max-width:991.98px) {
    .x-withdraw-form {
        margin-top: 0
    }
}

.x-withdraw-form .-ic-withdraw {
    width: 150px
}

.x-withdraw-form.-v2 {
    margin-top: 1rem
}

.x-zean-notify-index-container {
    height: 100%;
    padding: 3rem 0;
    background-size: cover;
    background-position: 50%;
    background-repeat: no-repeat;
    overflow: hidden
}

.x-zean-notify-index-container .-col-heading {
    text-align: center
}

.x-zean-notify-index-container .-coin {
    position: absolute;
    -webkit-animation: x-floating 6s ease-in-out infinite;
    animation: x-floating 6s ease-in-out infinite
}

.x-zean-notify-index-container .-coin.-item-1 {
    -webkit-animation-delay: 1s;
    animation-delay: 1s;
    position: absolute;
    bottom: -90px;
    right: -80px;
    width: 250px;
    height: auto
}

@media (max-width:1199.98px) {
    .x-zean-notify-index-container .-coin.-item-1 {
        right: -40px;
        width: 200px
    }
}

@media (max-width:991.98px) {
    .x-zean-notify-index-container .-coin.-item-1 {
        bottom: -70px;
        width: 160px
    }
}

@media (max-width:767.98px) {
    .x-zean-notify-index-container .-coin.-item-1 {
        bottom: -60px;
        width: 120px
    }
}

@media (max-width:575.98px) {
    .x-zean-notify-index-container .-coin.-item-1 {
        bottom: -40px;
        width: 20%;
        right: 10px
    }
}

.x-zean-notify-index-container .-coin.-item-2 {
    top: -20px;
    left: -80px;
    width: 200px
}

@media (max-width:1199.98px) {
    .x-zean-notify-index-container .-coin.-item-2 {
        left: -40px;
        width: 180px
    }
}

@media (max-width:991.98px) {
    .x-zean-notify-index-container .-coin.-item-2 {
        top: 0;
        width: 120px
    }
}

@media (max-width:767.98px) {
    .x-zean-notify-index-container .-coin.-item-2 {
        top: -20px;
        left: -60px;
        width: 80px
    }
}

@media (max-width:575.98px) {
    .x-zean-notify-index-container .-coin.-item-2 {
        top: unset;
        bottom: -10px;
        left: 10px;
        width: 16%
    }
}

.x-zean-notify-index-container .-table-btn {
    position: relative;
    padding-left: 1.75rem;
    padding-right: 1.75rem;
    font-weight: 400;
    text-shadow: 0 2px 5px rgba(0, 0, 0, .55);
    color: #fff;
    background: linear-gradient(180deg, #ffd733 0, #d2872d);
    border: none;
    border-radius: 5px;
    transition: -webkit-filter .2s;
    transition: filter .2s;
    transition: filter .2s, -webkit-filter .2s
}

.x-zean-notify-index-container .-table-btn:after,
.x-zean-notify-index-container .-table-btn:before {
    content: "";
    position: absolute;
    left: 50%;
    z-index: 1;
    width: 80%;
    height: 3px;
    background: linear-gradient(90deg, hsla(0, 0%, 100%, 0), hsla(0, 0%, 100%, .8), hsla(0, 0%, 100%, 0));
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%)
}

.x-zean-notify-index-container .-table-btn:before {
    top: 0
}

.x-zean-notify-index-container .-table-btn:after {
    bottom: 0
}

@media (min-width:992px) {
    .x-zean-notify-index-container .-table-btn:hover {
        -webkit-filter: saturate(1.5);
        filter: saturate(1.5)
    }
}

.x-zean-notify-index-container .-navbar-container {
    justify-content: center;
    margin-top: 2rem;
    padding: 2rem 1rem 1rem;
    background: rgba(0, 0, 0, .5);
    border-radius: 10px
}

@media (max-width:575.98px) {
    .x-zean-notify-index-container .-navbar-container {
        padding: .5rem .25rem 1rem
    }
}

.x-zean-notify-index-container .-navbar-container .nav-item {
    width: 25%;
    margin-top: 1rem;
    padding: 0 .5rem
}

@media (max-width:1199.98px) {
    .x-zean-notify-index-container .-navbar-container .nav-item {
        width: 33.33333%
    }
}

@media (max-width:767.98px) {
    .x-zean-notify-index-container .-navbar-container .nav-item {
        width: 50%
    }
}

.x-zean-notify-index-container .-title-img {
    width: 500px;
    height: auto
}

@media (max-width:991.98px) {
    .x-zean-notify-index-container .-title-img {
        width: 450px
    }
}

@media (max-width:575.98px) {
    .x-zean-notify-index-container .-title-img {
        width: 100%;
        max-width: 350px
    }
}

.x-zean-card-item {
    position: relative;
    height: 100%;
    text-align: center
}

.x-zean-card-item .-title {
    margin-top: 1rem;
    margin-bottom: .25rem;
    font-size: 1.125rem;
    font-weight: 500;
    color: #fff
}

@media (max-width:575.98px) {
    .x-zean-card-item .-title {
        font-size: 1rem
    }
}

.x-zean-card-item .-score-rank {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    left: 50%;
    width: 250px;
    height: 32px;
    margin-top: 10px;
    margin-bottom: .875rem;
    font-size: .875rem;
    font-weight: 300;
    color: #f1c423;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%)
}

.x-zean-card-item .-score-rank .-left,
.x-zean-card-item .-score-rank .-right {
    flex: 1 1 30%;
    position: relative;
    top: 0;
    color: #fff
}

.x-zean-card-item .-score-rank .-right {
    text-align: left
}

.x-zean-card-item .-score-rank .-left {
    text-align: right
}

.x-zean-card-item .-score-rank .-percent {
    position: relative;
    flex: 0 0 32.5%;
    font-size: 1.1rem;
    font-weight: 700;
    color: #69430b
}

@media (max-width:991.98px) {
    .x-zean-card-item .-score-rank {
        width: 100%;
        height: 34px
    }
    .x-zean-card-item .-score-rank .-left,
    .x-zean-card-item .-score-rank .-right {
        flex: 1 1 32.5%
    }
    .x-zean-card-item .-score-rank .-percent {
        flex: 0 0 35%
    }
}

@media (max-width:575.98px) {
    .x-zean-card-item .-score-rank {
        width: 165px;
        height: 30px;
        font-size: .75rem
    }
    .x-zean-card-item .-score-rank .-percent {
        font-size: .875rem
    }
}

@media screen and (max-width:360px) {
    .x-zean-card-item .-score-rank {
        width: 150px
    }
}

.x-zean-card-item .-description {
    font-size: 1rem;
    font-weight: 300;
    color: #f3f3f3
}

@media (max-width:575.98px) {
    .x-zean-card-item .-description {
        font-size: .875rem
    }
}

.x-zean-card-item .-profile-img-wrapper {
    position: relative;
    width: 90%;
    max-width: 200px;
    margin: auto
}

.x-zean-card-item .-profile-img-wrapper .-img {
    width: 100%;
    height: auto;
    border-radius: 10px;
    transition: -webkit-filter .2s;
    transition: filter .2s;
    transition: filter .2s, -webkit-filter .2s
}

@media (max-width:991.98px) {
    .x-zean-card-item .-profile-img-wrapper {
        max-width: 180px
    }
}

.x-zean-card-item .-rank-ic {
    position: absolute;
    top: 10px;
    left: 0;
    z-index: 1;
    width: 70px;
    height: auto;
    -webkit-transform: translateX(-25%);
    transform: translateX(-25%)
}

@media (max-width:575.98px) {
    .x-zean-card-item .-rank-ic {
        width: 60px
    }
}

.x-zean-card-item .-join-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 140px;
    padding: 8px 1rem;
    font-size: 1rem;
    color: #fff;
    background: linear-gradient(180deg, #43e279, #22a045);
    border-radius: 6px;
    transition: all .2s;
    text-decoration: none
}

.x-zean-card-item .-join-btn .-line-ic {
    margin-right: 5px
}

.x-zean-card-item .-join-btn .-text {
    position: relative
}

.x-zean-card-item .-join-btn:hover {
    background: linear-gradient(180deg, #22dd61, #1b8037)
}

@media (min-width:992px) {
    .x-zean-card-item .-join-btn {
        position: absolute;
        top: 50%;
        left: 50%;
        opacity: 0;
        visibility: hidden;
        -webkit-transform: translate(-50%, calc(-50% + 10px));
        transform: translate(-50%, calc(-50% + 10px))
    }
}

@media (max-width:991.98px) {
    .x-zean-card-item .-join-btn {
        margin: auto
    }
}

@media (max-width:575.98px) {
    .x-zean-card-item .-join-btn {
        padding: 8px .5rem;
        font-size: .875rem
    }
}

.x-zean-card-item:hover .-profile-img-wrapper .-img {
    -webkit-filter: drop-shadow(0 0 15px rgba(251, 200, 68, .75));
    filter: drop-shadow(0 0 15px rgba(251, 200, 68, .75))
}

@media (min-width:992px) {
    .x-zean-card-item:hover .-join-btn {
        opacity: 1;
        visibility: visible;
        -webkit-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%)
    }
}


#promotionSuggestionModal.-hello-popup {
    line-height: 1.5
}

@media (max-width:991.98px) {
    #promotionSuggestionModal.-hello-popup {
        background: rgba(0, 0, 0, .75)!important
    }
}

#promotionSuggestionModal.-hello-popup .modal-header {
    margin-top: -6.5rem
}

#promotionSuggestionModal.-hello-popup .modal-header .-logo {
    width: 600px;
    height: auto
}

@media (max-width:991.98px) {
    #promotionSuggestionModal.-hello-popup .modal-header {
        margin-top: -6rem
    }
    #promotionSuggestionModal.-hello-popup .modal-header .-logo {
        width: 500px
    }
}

@media (max-width:767.98px) {
    #promotionSuggestionModal.-hello-popup .modal-header {
        margin-top: -5.5rem
    }
    #promotionSuggestionModal.-hello-popup .modal-header .-logo {
        width: 450px
    }
}

@media (max-width:575.98px) {
    #promotionSuggestionModal.-hello-popup .modal-header {
        margin-top: -7.25rem;
        padding-top: 0
    }
    #promotionSuggestionModal.-hello-popup .modal-header .-logo {
        width: 350px
    }
}

@media screen and (max-width:370px) {
    #promotionSuggestionModal.-hello-popup .modal-header {
        margin-top: -6.25rem
    }
    #promotionSuggestionModal.-hello-popup .modal-header .-logo {
        width: 300px
    }
}
/*Mochi ปรับตำแหน่งรูป header*/
@media (max-width:991.98px) {
    #promotionSuggestionModal.-hello-popup .modal-dialog { /*PC F12 ครึ่งจอ*/
        padding-top: 0rem
    }
}

@media (max-width:767.98px) {
    #promotionSuggestionModal.-hello-popup .modal-dialog {
        padding-top: 0rem
    }
}

@media (max-width:575.98px) {
    #promotionSuggestionModal.-hello-popup .modal-dialog {  /*PC F12 Mobile size*/
        padding-top: 0rem
    }
}

@media screen and (max-width:370px) {
    #promotionSuggestionModal.-hello-popup .modal-dialog {
        padding-top: 0rem
    }
}

#promotionSuggestionModal.-hello-popup .modal-content {
    border: 3px solid transparent;
    border-radius: 15px;
    /*เปลี่ยนสี bg popup*/
    background: radial-gradient(80% 80% at 50% 0, #6473ff 0, #2c4097 47%, #000552 100%), linear-gradient(205deg, #eee 1%, #d9d9d9 25%, #fff 50%, #eee 74%, #d9d9d9); /*เปลี่ยนสี bg popup*/
    background-origin: border-box;
    background-clip: content-box, border-box;
    /*background-image: url(../images/popup/bg2.jpg); /*เปลี่ยนรูป bg หลังสุด โปรโมชั่น*/ */
    background-size: cover;
    background-position: 50%;
    background-repeat: no-repeat
}

@media (max-width:991.98px) {
    #promotionSuggestionModal.-hello-popup .modal-content {
        border-width: 3px 0 0;
        border-radius: 0
    }
    #promotionSuggestionModal.-hello-popup .modal-content:before {
        display: none
    }
}

@media (max-width:575.98px) {
    #promotionSuggestionModal.-hello-popup .modal-content .close {
        top: -2.5rem
    }
}

#promotionSuggestionModal.-hello-popup .modal-body {
    margin-top: -.5rem
}

@media (max-width:767.98px) {
    #promotionSuggestionModal.-hello-popup .modal-body {
        margin-top: -1.5rem
    }
}

@media (max-width:575.98px) {
    #promotionSuggestionModal.-hello-popup .modal-body {
        margin-top: 2px;
        padding-top: .25rem
    }
}

.x-promotion-hello-modal-body .-promotion-list-wrapper { /*Mochi แก้ตำแหน่งรูป*/
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    margin-top: 20px;
    max-width: fit-content;
}

@media (max-width:575.98px) {
    .x-promotion-hello-modal-body .-promotion-list-wrapper {
        padding: 0 1.5rem
    }
}

@media screen and (max-width:370px) {
    .x-promotion-hello-modal-body .-promotion-list-wrapper {
        padding: 0
    }
}

.x-promotion-hello-modal-body .-promotion-list-item {
    position: relative;
    margin-top: 1rem
}

@media (min-width:576px) {
    .x-promotion-hello-modal-body .-promotion-list-item {
        width: calc(50% - .5rem)
    }
}

@media (max-width:575.98px) {
    .x-promotion-hello-modal-body .-promotion-list-item {
        width: 100%
    }
}

.x-promotion-hello-modal-body .-promotion-list-item .-badge-wrapper {
    position: absolute;
    top: -4.8px;
    left: 20px;
    z-index: 1
}

@media (max-width:767.98px) {
    .x-promotion-hello-modal-body .-promotion-list-item .-badge-wrapper {
        top: -4px;
        left: 25px
    }
}

.x-promotion-hello-modal-body .-promotion-list-item .-badge-wrapper .-img {
    width: 120px;
    height: auto;
    -webkit-filter: drop-shadow(0 3px 2px rgba(0, 0, 0, .4));
    filter: drop-shadow(0 3px 2px rgba(0, 0, 0, .4))
}

@media (max-width:767.98px) {
    .x-promotion-hello-modal-body .-promotion-list-item .-badge-wrapper .-img {
        width: 110px
    }
}

.x-promotion-hello-modal-body .-promotion-list-item .-badge-wrapper .-title {
    display: inline-block;
    position: absolute;
    top: 50%;
    left: 50%;
    background: linear-gradient(180deg, #fff 37%, #ddd 67%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 1rem;
    font-weight: 400;
    -webkit-transform: translate(-50%, -55%);
    transform: translate(-50%, -55%)
}

@media (max-width:575.98px) {
    .x-promotion-hello-modal-body .-promotion-list-item .-badge-wrapper .-title {
        font-size: .925rem
    }
}

.x-promotion-hello-modal-body .-promotion-list-item .-btn {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    position: relative;
    z-index: 1;
    width: 100%;
    padding: .5rem .75rem;
    border-radius: 15px;
    line-height: 1.5
}

.x-promotion-hello-modal-body .-promotion-list-item .-btn.-disabled {
    pointer-events: none;
    cursor: default
}

.x-promotion-hello-modal-body .-promotion-list-item .-btn.-disabled:after,
.x-promotion-hello-modal-body .-promotion-list-item .-btn.-disabled:before {
    -webkit-filter: brightness(.75);
    filter: brightness(.75)
}

@media (max-width:575.98px) {
    .x-promotion-hello-modal-body .-promotion-list-item .-btn {
        justify-content: center;
        padding: .25rem .75rem
    }
}

.x-promotion-hello-modal-body .-promotion-list-item .-btn:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 15px;
    background: linear-gradient(108deg, #d0d1d4 2%, #fff 47%, #d0d1d4); /*เปลี่ยนสีกรอบโปรโมชั่นแนะนำ*/
    box-shadow: 0 0 14px rgba(197, 209, 255, .5);
    transition: -webkit-filter .3s;
    transition: filter .3s;
    transition: filter .3s, -webkit-filter .3s
}

.x-promotion-hello-modal-body .-promotion-list-item .-btn:after {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: calc(100% - 6px);
    height: calc(100% - 6px);
    background-color: #153b7c;
    border-radius: 12px;
    transition: -webkit-filter .3s;
    transition: filter .3s;
    transition: filter .3s, -webkit-filter .3s;
    background-image: url(../images/popup/bg2.png); /*เปลี่ยนรูป bg โปรโมชั่นแนะนำ*/
    background-size: cover;
    background-position: 50%;
    background-repeat: no-repeat
}

.x-promotion-hello-modal-body .-promotion-list-item .-btn .-light {
    position: absolute;
    z-index: 1
}

.x-promotion-hello-modal-body .-promotion-list-item .-btn .-light.-top {
    top: -5px;
    right: 0;
    width: 180px
}

.x-promotion-hello-modal-body .-promotion-list-item .-btn .-light.-bottom {
    bottom: -5px;
    left: 0;
    width: 205px
}

.x-promotion-hello-modal-body .-promotion-list-item .-btn .-thumbnail {
    width: 140px;
    height: auto;
    margin-top: 10px;
    z-index: 1
}

@media (max-width:767.98px) {
    .x-promotion-hello-modal-body .-promotion-list-item .-btn .-thumbnail {
        width: 100px
    }
}

@media (max-width:575.98px) {
    .x-promotion-hello-modal-body .-promotion-list-item .-btn .-thumbnail {
        width: 120px;
        margin-top: 15px
    }
}

.x-promotion-hello-modal-body .-promotion-list-item .-btn .-content {
    flex: 1;
    z-index: 1;
    margin-top: .5rem;
    color: #fff
}

@media (max-width:575.98px) {
    .x-promotion-hello-modal-body .-promotion-list-item .-btn .-content {
        flex: unset;
        margin-left: 1rem
    }
}

.x-promotion-hello-modal-body .-promotion-list-item .-btn .-text {
    display: block
}

.x-promotion-hello-modal-body .-promotion-list-item .-btn .-text.-deposit {
    font-size: 1.6rem;
    font-weight: 500
}

@media (max-width:767.98px) {
    .x-promotion-hello-modal-body .-promotion-list-item .-btn .-text.-deposit {
        font-size: 1.5rem
    }
}

.x-promotion-hello-modal-body .-promotion-list-item .-btn .-text.-description {
    margin-top: -2px;
    font-size: 1.25rem
}

@media (max-width:767.98px) {
    .x-promotion-hello-modal-body .-promotion-list-item .-btn .-text.-description {
        font-size: 1.125rem
    }
}

.x-promotion-hello-modal-body .-promotion-list-item .-btn .-text.-bonus {
    position: relative;
    margin-top: -13px;
    margin-left: -5px;
    font-family: Kanit, "sans-serif";
    font-weight: 700;
    font-size: 3.75rem;
    background: linear-gradient(180deg, #fef8b4 30%, #cf9978 80%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    -webkit-filter: drop-shadow(2px 4px 0 rgba(0, 0, 0, .4));
    filter: drop-shadow(2px 4px 0 rgba(0, 0, 0, .4))
}

.x-promotion-hello-modal-body .-promotion-list-item .-btn .-text.-bonus .-ic-star {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-52%, -52%);
    transform: translate(-52%, -52%);
    width: 120px
}

@media (max-width:767.98px) {
    .x-promotion-hello-modal-body .-promotion-list-item .-btn .-text.-bonus {
        margin-top: -8px;
        font-size: 2.75rem
    }
    .x-promotion-hello-modal-body .-promotion-list-item .-btn .-text.-bonus .-ic-star {
        width: 90px
    }
}

.x-promotion-hello-modal-body .-promotion-list-item .-btn:active,
.x-promotion-hello-modal-body .-promotion-list-item .-btn:focus {
    box-shadow: none
}

@media (min-width:992px) {
    .x-promotion-hello-modal-body .-promotion-list-item .-btn:hover:after,
    .x-promotion-hello-modal-body .-promotion-list-item .-btn:hover:before {
        -webkit-filter: brightness(.75);
        filter: brightness(.75)
    }
}

.x-promotion-hello-modal-body .-promotion-list-item.-long {
    width: 100%
}

.x-promotion-hello-modal-body .-promotion-list-item.-long .-btn {
    justify-content: center
}

.x-promotion-hello-modal-body .-promotion-list-item.-long .-btn:after {
    background-image: url(../images/popup/bg2.jpg) /*Mochi ไม่รู้ตรงไหน*/
}

@media (min-width:576px) {
    .x-promotion-hello-modal-body .-promotion-list-item.-long .-btn .-content {
        flex: unset;
        margin-left: 1.5rem
    }
}

.x-promotion-hello-modal-body .-service-list-container {
    margin-top: 1.5rem;
    padding-bottom: 1rem
}

@media (min-width:576px) and (max-width:767.98px) {
    .x-promotion-hello-modal-body .-service-list-container {
        margin-top: 1rem
    }
}

@media (max-width:575.98px) {
    .x-promotion-hello-modal-body .-service-list-container {
        flex-wrap: wrap;
        padding: 0 1rem 2rem
    }
}

@media screen and (max-width:370px) {
    .x-promotion-hello-modal-body .-service-list-container {
        padding: 0 0 2rem
    }
}

.x-promotion-hello-modal-body .-service-list-item {
    flex: 1;
    background: transparent;
    border: none;
    text-align: center;
    padding: .75rem
}

@media (min-width:576px) and (max-width:767.98px) {
    .x-promotion-hello-modal-body .-service-list-item {
        padding: 1rem .5rem
    }
}

@media (max-width:575.98px) {
    .x-promotion-hello-modal-body .-service-list-item {
        flex: unset;
        width: 50%;
        padding: .5rem
    }
}

.x-promotion-hello-modal-body .-service-list-item .-thumbnail {
    height: auto;
    transition: -webkit-transform .3s;
    transition: transform .3s;
    transition: transform .3s, -webkit-transform .3s;
    -webkit-transform-origin: bottom center;
    transform-origin: bottom center;
    width: 86%
}

@media (min-width:576px) and (max-width:767.98px) {
    .x-promotion-hello-modal-body .-service-list-item .-thumbnail {
        max-width: 100px
    }
}

@media (max-width:575.98px) {
    .x-promotion-hello-modal-body .-service-list-item .-thumbnail {
        max-width: 140px
    }
}

.x-promotion-hello-modal-body .-service-list-item .-text {
    display: block;
    margin-top: 1rem;
    color: #c4c4c4;
    font-size: 1rem
}

@media (min-width:992px) {
    .x-promotion-hello-modal-body .-service-list-item:hover .-thumbnail {
        -webkit-transform: scale(1.05);
        transform: scale(1.05)
    }
}

@-webkit-keyframes x-welcome-back-vertical-effect {
    0% {
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }
    to {
        -webkit-transform: translateY(-30px);
        transform: translateY(-30px)
    }
}

#promotionSuggestionModal .modal-header {
    justify-content: center;
    margin-top: -8.5rem;
    padding-bottom: 0
}

#promotionSuggestionModal .modal-header .-logo {
    width: 550px;
    height: auto
}

@media (max-width:991.98px) {
    #promotionSuggestionModal .modal-header {
        height: unset;
        margin-top: -7.75rem
    }
    #promotionSuggestionModal .modal-header .-logo {
        width: 500px
    }
}

@media (max-width:767.98px) {
    #promotionSuggestionModal .modal-header {
        z-index: 2;
        margin-top: -7rem
    }
    #promotionSuggestionModal .modal-header .-logo {
        width: 450px
    }
}

@media (max-width:575.98px) {
    #promotionSuggestionModal .modal-header {
        margin-top: -5.75rem
    }
    #promotionSuggestionModal .modal-header .-logo {
        width: 340px
    }
}

@media screen and (max-width:370px) {
    #promotionSuggestionModal .modal-header {
        margin-top: -5rem
    }
    #promotionSuggestionModal .modal-header .-logo {
        width: 300px
    }
}

#promotionSuggestionModal .modal-dialog {
    max-width: 850px
}

@media (max-width:991.98px) {
    #promotionSuggestionModal .modal-dialog {
        max-width: 100%;
        min-height: calc(100% - 1px);
        padding-top: 5rem
    }
}

@media (max-width:575.98px) {
    #promotionSuggestionModal .modal-dialog {
        padding-top: 4rem
    }
}

#promotionSuggestionModal .modal-content {
    margin-top: 10rem;
    background: linear-gradient(205deg, rgba(33, 62, 104, .9) .97%, rgba(13, 36, 72, .9));
    border: 4px solid #eee;
    border-radius: 15px
}

@media (max-width:991.98px) {
    #promotionSuggestionModal .modal-content {
        margin-top: 0;
        border: none;
        border-top: 4px solid #eee;
        border-radius: 0
    }
}

@media (max-width:767.98px) {
    #promotionSuggestionModal .modal-content:before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        z-index: 2;
        width: 100%;
        height: 100px;
        background-image: linear-gradient(180deg, #213e68 50%, rgba(33, 62, 104, 0) 80%)
    }
    #promotionSuggestionModal .modal-content .close {
        z-index: 3
    }
}

@media (max-width:575.98px) {
    #promotionSuggestionModal .modal-content:before {
        height: 90px
    }
}

@media screen and (max-width:370px) {
    #promotionSuggestionModal .modal-content:before {
        height: 80px
    }
}

#promotionSuggestionModal .modal-body {
    margin-top: -2.75rem;
    padding: 0 6rem 1rem
}

#promotionSuggestionModal .modal-body .-one-time-img {
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 1;
    width: 110px;
    height: auto;
    -webkit-transform: translate(-30%, 30%);
    transform: translate(-30%, 30%)
}

@media (max-width:991.98px) {
    #promotionSuggestionModal .modal-body {
        height: unset;
        padding-right: 4rem;
        padding-left: 4rem
    }
    #promotionSuggestionModal .modal-body .-one-time-img {
        display: none
    }
}

@media (max-width:767.98px) {
    #promotionSuggestionModal .modal-body {
        margin-top: -3rem;
        padding-top: 1.25rem;
        padding-right: 2rem;
        padding-left: 2rem
    }
}

@media (max-width:575.98px) {
    #promotionSuggestionModal .modal-body {
        margin-top: -2rem;
        padding-right: 1rem;
        padding-left: 1rem
    }
}

#promotionSuggestionModal .modal-dialog-scrollable .modal-content {
    overflow: unset
}

@media (min-width:992px) {
    #promotionSuggestionModal .modal-dialog-scrollable .modal-body {
        overflow: unset
    }
}

@media (max-width:991.98px) {
    #promotionSuggestionModal .-effect {
        display: none
    }
}

.x-promotion-welcome-back-modal-body {
    margin-bottom: 3rem
}

.x-promotion-welcome-back-modal-body .-title-wrapper {
    display: flex;
    justify-content: center;
    height: 60px;
    max-width: 600px;
    margin: 0 auto;
    border-radius: 50px;
    text-align: center;
    border: 2px solid transparent;
    background-image: linear-gradient(180deg, #fa5287, #881c23);
    background-origin: border-box;
    background-clip: content-box, border-box;
    font-size: 1.25rem
}

@media (max-width:767.98px) {
    .x-promotion-welcome-back-modal-body .-title-wrapper {
        height: 56px;
        background-image: linear-gradient(180deg, #fa5287, #881c23)
    }
}

@media (max-width:575.98px) {
    .x-promotion-welcome-back-modal-body .-title-wrapper {
        height: 74px
    }
}

@media (max-width:767.98px) {
    .x-promotion-welcome-back-modal-body .-title-wrapper {
        font-size: 1.125rem
    }
}

@media (max-width:375px) {
    .x-promotion-welcome-back-modal-body .-title-wrapper {
        font-size: 1rem
    }
}

.x-promotion-welcome-back-modal-body .-title-wrapper .-inner-wrapper {
    margin-top: -4px
}

@media (max-width:767.98px) {
    .x-promotion-welcome-back-modal-body .-title-wrapper .-inner-wrapper {
        margin-top: -3px
    }
}

@media (max-width:575.98px) {
    .x-promotion-welcome-back-modal-body .-title-wrapper .-inner-wrapper {
        margin-top: 3px
    }
}

@media (max-width:375px) {
    .x-promotion-welcome-back-modal-body .-title-wrapper .-inner-wrapper {
        margin-top: 9px
    }
}

.x-promotion-welcome-back-modal-body .-title-wrapper .-text {
    display: inline-block
}

.x-promotion-welcome-back-modal-body .-title-wrapper .-text.-normal {
    color: #fff;
    text-shadow: 0 2px 4px rgba(0, 0, 0, .5);
    position: relative;
    top: -2px
}

@media (max-width:575.98px) {
    .x-promotion-welcome-back-modal-body .-title-wrapper .-text.-normal {
        top: 0;
        display: block
    }
}

.x-promotion-welcome-back-modal-body .-title-wrapper .-text.-highlight {
    background: linear-gradient(180deg, #e6e6e8 30%, #a1a8b1 60%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    -webkit-filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .5));
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .5));
    font-size: 2.25rem;
    font-weight: 600
}

@media (max-width:767.98px) {
    .x-promotion-welcome-back-modal-body .-title-wrapper .-text.-highlight {
        font-size: 2rem
    }
}

@media (max-width:575.98px) {
    .x-promotion-welcome-back-modal-body .-title-wrapper .-text.-highlight {
        margin-top: -8px;
        font-size: 1.75rem
    }
}

@media (max-width:375px) {
    .x-promotion-welcome-back-modal-body .-title-wrapper .-text.-highlight {
        font-size: 1.5rem
    }
}

.x-promotion-welcome-back-modal-body .-title-wrapper .-text.-highlight-main {
    margin-left: 10px;
    margin-right: 5px;
    padding-right: 5px;
    font-style: italic;
    font-size: 2.5rem
}

@media (max-width:767.98px) {
    .x-promotion-welcome-back-modal-body .-title-wrapper .-text.-highlight-main {
        font-size: 2.25rem
    }
}

@media (max-width:575.98px) {
    .x-promotion-welcome-back-modal-body .-title-wrapper .-text.-highlight-main {
        font-size: 2rem
    }
}

@media (max-width:375px) {
    .x-promotion-welcome-back-modal-body .-title-wrapper .-text.-highlight-main {
        font-size: 1.75rem
    }
}

.x-promotion-welcome-back-modal-body .-promotion-box-wrapper {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-top: .5rem
}

.x-promotion-welcome-back-modal-body .-promotion-box-item {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 160px;
    margin-top: 1rem;
    padding: 1rem;
    text-decoration: none;
    line-height: 1.5
}

@media (max-width:575.98px) {
    .x-promotion-welcome-back-modal-body .-promotion-box-item {
        min-height: 130px;
        padding: .5rem
    }
}

.x-promotion-welcome-back-modal-body .-promotion-box-item:after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    border-radius: 10px;
    transition: -webkit-filter .3s;
    transition: filter .3s;
    transition: filter .3s, -webkit-filter .3s;
    background-color: #153b7c;
    background-image: url(build/images/welcome-back-promotion-long-bg.b3928245.png);
    background-size: cover;
    background-position: 50%;
    background-repeat: no-repeat
}

.x-promotion-welcome-back-modal-body .-promotion-box-item:before {
    content: "";
    position: absolute;
    top: -2px;
    right: -2px;
    width: 100%;
    height: 100%;
    background: linear-gradient(108deg, #d0d1d4, #fff 47%, #d0d1d4);
    border-radius: 10px;
    box-shadow: 0 0 12px rgba(197, 209, 255, .5)
}

.x-promotion-welcome-back-modal-body .-promotion-box-item .-cover {
    position: relative;
    z-index: 1;
    width: 200px;
    height: auto;
    transition: -webkit-transform .3s;
    transition: transform .3s;
    transition: transform .3s, -webkit-transform .3s
}

@media (max-width:575.98px) {
    .x-promotion-welcome-back-modal-body .-promotion-box-item .-cover {
        width: 52%;
        max-width: 170px
    }
}

.x-promotion-welcome-back-modal-body .-promotion-box-item .-content {
    position: relative;
    z-index: 1;
    margin-left: 2rem;
    text-align: center;
    transition: -webkit-transform .3s;
    transition: transform .3s;
    transition: transform .3s, -webkit-transform .3s;
    top: 10px
}

@media (max-width:575.98px) {
    .x-promotion-welcome-back-modal-body .-promotion-box-item .-content {
        margin-left: 1.5rem
    }
}

.x-promotion-welcome-back-modal-body .-promotion-box-item .-text {
    display: block;
    color: #fff;
    font-size: 1.5rem
}

@media (max-width:575.98px) {
    .x-promotion-welcome-back-modal-body .-promotion-box-item .-text {
        font-size: 1.25rem
    }
}

.x-promotion-welcome-back-modal-body .-promotion-box-item .-number {
    background: linear-gradient(180deg, #e6e6e8 30%, #a1a8b1 60%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-top: -12px;
    font-size: 3rem;
    font-weight: 500
}

@media (max-width:575.98px) {
    .x-promotion-welcome-back-modal-body .-promotion-box-item .-number {
        margin-top: -8px;
        font-size: 2.25rem
    }
}

@media (min-width:768px) {
    .x-promotion-welcome-back-modal-body .-promotion-box-item.-dual {
        width: calc(50% - .5rem)
    }
}

.x-promotion-welcome-back-modal-body .-promotion-box-item.-dual:after {
    background-image: url(build/images/welcome-back-promotion-bg.1217f5e3.png)
}

.x-promotion-welcome-back-modal-body .-promotion-box-item.-dual .-cover {
    width: 140px
}

.x-promotion-welcome-back-modal-body .-promotion-box-item.-dual .-content {
    margin-left: 1rem
}

@media (max-width:575.98px) {
    .x-promotion-welcome-back-modal-body .-promotion-box-item.-dual .-cover {
        width: 120px
    }
}

.x-promotion-welcome-back-modal-body .-promotion-box-item:active,
.x-promotion-welcome-back-modal-body .-promotion-box-item:focus {
    box-shadow: none
}

@media (min-width:992px) {
    .x-promotion-welcome-back-modal-body .-promotion-box-item:focus .-content,
    .x-promotion-welcome-back-modal-body .-promotion-box-item:focus .-cover,
    .x-promotion-welcome-back-modal-body .-promotion-box-item:hover .-content,
    .x-promotion-welcome-back-modal-body .-promotion-box-item:hover .-cover {
        -webkit-transform: scale(1.05);
        transform: scale(1.05)
    }
    .x-promotion-welcome-back-modal-body .-promotion-box-item:focus:after,
    .x-promotion-welcome-back-modal-body .-promotion-box-item:hover:after {
        -webkit-filter: brightness(.8);
        filter: brightness(.8)
    }
}

.x-promotion-welcome-back-modal-body .-restrict-text {
    margin-top: 2rem;
    color: #fff;
    text-align: center;
    margin-bottom: 1rem;
    font-size: 1.25rem
}

@media (max-width:767.98px) {
    .x-promotion-welcome-back-modal-body .-restrict-text {
        font-size: 1.125rem
    }
}

@media (max-width:575.98px) {
    .x-promotion-welcome-back-modal-body .-restrict-text {
        font-size: 1rem
    }
}

.x-promotion-welcome-back-modal-body .-no-result {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    min-height: 150px;
    margin-top: 1rem;
    padding: 1rem;
    background-color: hsla(0, 0%, 100%, .1);
    border-radius: 10px;
    text-align: center
}

.x-promotion-welcome-back-modal-body .-no-result .-title {
    font-weight: 500;
    color: #f6f6f6;
    font-size: 1.25rem
}

@media (max-width:575.98px) {
    .x-promotion-welcome-back-modal-body .-no-result .-title {
        font-size: 1.125rem
    }
}

.x-promotion-welcome-back-modal-body .-no-result .-sub-title {
    margin: .5rem 0 0;
    font-weight: 300;
    color: #cbc8c8;
    font-size: 1rem
}

.x-footer-lobby-logo .-casino-wrapper .-nav-container,
.x-footer-lobby-logo .-slot-wrapper .-nav-container,
.x-footer-lobby-logo .-sport-wrapper .-nav-container {
    display: flex;
    flex-wrap: wrap;
    padding: 0;
    list-style: none
}

.x-footer-lobby-logo .-casino-wrapper .-nav-container .-nav-item,
.x-footer-lobby-logo .-slot-wrapper .-nav-container .-nav-item,
.x-footer-lobby-logo .-sport-wrapper .-nav-container .-nav-item {
    padding: 5px;
    text-align: center
}

@media (max-width:767.98px) {
    .x-footer-lobby-logo .-casino-wrapper .-nav-container {
        justify-content: center
    }
}

@media (max-width:767.98px) {
    .x-footer-lobby-logo .-casino-wrapper .-nav-container .-nav-item {
        width: 25%!important
    }
    .x-footer-lobby-logo .-casino-wrapper .-nav-container .-nav-item.-width-mobile {
        width: 20%!important
    }
}

.x-footer-lobby-logo .-casino-wrapper .-nav-container .-nav-item .-logo-circle {
    width: 100%;
    transition: -webkit-transform .2s;
    transition: transform .2s;
    transition: transform .2s, -webkit-transform .2s
}

.x-footer-lobby-logo .-casino-wrapper .-nav-container .-nav-item:hover .-logo-circle {
    -webkit-transform: scale(1.1);
    transform: scale(1.1)
}

@media (max-width:767.98px) {
    .x-footer-lobby-logo .-slot-wrapper .-nav-container {
        justify-content: center
    }
}

@media (max-width:767.98px) {
    .x-footer-lobby-logo .-slot-wrapper .-nav-container .-nav-item {
        width: 25%!important
    }
    .x-footer-lobby-logo .-slot-wrapper .-nav-container .-nav-item.-width-mobile {
        width: 20%!important
    }
}

.x-footer-lobby-logo .-slot-wrapper .-nav-container .-nav-item .-cv-box {
    position: relative;
    overflow: hidden
}

.x-footer-lobby-logo .-slot-wrapper .-nav-container .-nav-item .-cv-box .-cover-vertical {
    width: 100%;
    transition: -webkit-transform .2s;
    transition: transform .2s;
    transition: transform .2s, -webkit-transform .2s
}

.x-footer-lobby-logo .-slot-wrapper .-nav-container .-nav-item .-logo-horizontal {
    width: 80%;
    margin-top: 5px
}

.x-footer-lobby-logo .-slot-wrapper .-nav-container .-nav-item:hover .-cv-box .-cover-vertical {
    -webkit-transform: scale(1.1);
    transform: scale(1.1)
}

@media (max-width:767.98px) {
    .x-footer-lobby-logo .-sport-wrapper .-nav-container {
        justify-content: center
    }
}

.x-footer-lobby-logo .-sport-wrapper .-nav-container .-nav-item {
    width: 14.28571%
}

@media (max-width:767.98px) {
    .x-footer-lobby-logo .-sport-wrapper .-nav-container .-nav-item {
        width: 25%!important
    }
}

.x-footer-lobby-logo .-sport-wrapper .-nav-container .-nav-item .-cv-box {
    position: relative;
    overflow: hidden
}

.x-footer-lobby-logo .-sport-wrapper .-nav-container .-nav-item .-cv-box .-cover-vertical {
    width: 100%;
    transition: -webkit-transform .2s;
    transition: transform .2s;
    transition: transform .2s, -webkit-transform .2s
}

.x-footer-lobby-logo .-sport-wrapper .-nav-container .-nav-item .-logo-horizontal {
    width: 80%;
    margin-top: 5px
}

.x-footer-lobby-logo .-sport-wrapper .-nav-container .-nav-item:hover .-cv-box .-cover-vertical {
    -webkit-transform: scale(1.1);
    transform: scale(1.1)
}

.x-footer-copyright-bg {
    margin-top: 2rem;
    padding: .75rem .5rem .25rem;
    background-color: #4e4a4a
}

@-webkit-keyframes x-wm-primary-light-neon {
    0% {
        box-shadow: 0 0 5px #fff, 0 0 13px #e33f64, 0 0 16px #e33f64, 0 0 28px #e33f64, 0 0 40px #e33f64
    }
    to {
        box-shadow: 0 0 2px #fff, 0 0 10px #e33f64, 0 0 8px #e33f64, 0 0 14px #e33f64, 0 0 20px #e33f64
    }
}

@keyframes x-wm-primary-light-neon {
    0% {
        box-shadow: 0 0 5px #fff, 0 0 13px #e33f64, 0 0 16px #e33f64, 0 0 28px #e33f64, 0 0 40px #e33f64
    }
    to {
        box-shadow: 0 0 2px #fff, 0 0 10px #e33f64, 0 0 8px #e33f64, 0 0 14px #e33f64, 0 0 20px #e33f64
    }
}

.x-main-container .x-main-content .-full-flex-inner-bg.-bg {
    background-position: 0 100%;
    background-attachment: fixed
}

.x-contact-directly {
    margin-top: .5rem;
    margin-left: 0
}

.x-landing .x-index-top-container {
    background: #0e1a29
}

.x-landing .x-index-top-container .-bg-container {
    position: absolute;
    top: 140px;
    left: 0;
    width: 100%;
    height: 600px;
    background: radial-gradient(rgba(58, 95, 146, .3), transparent 65%)
}

.x-landing .x-index-top-container .-bg-container #layers {
    position: relative
}

.x-landing .x-index-top-container .-logo {
    width: 200px
}

@media (max-width:991.98px) {
    .x-landing .x-index-top-container {
        padding-bottom: 2rem
    }
}

.x-landing .x-credit-free-bottom-container {
    text-align: center
}

.x-landing .x-credit-free-bottom-container h3 {
    position: relative;
    display: inline-block;
    margin-bottom: 1rem
}

.x-landing .x-credit-free-bottom-container h3:after {
    content: "";
    position: absolute;
    bottom: -6px;
    left: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, transparent 0, #fff 50%, transparent)
}

.x-landing .x-credit-free-bottom-container .x-wm-hr-line {
    display: none
}

.x-landing .x-register-card-landing {
    position: relative
}

.x-landing .x-register-card-landing .card {
    z-index: 2;
    background: linear-gradient(155deg, rgba(27, 55, 90, .8), rgba(9, 22, 48, .8) 45%, rgba(3, 10, 33, .8));
    border: 1px solid #6cadc4
}

.x-landing .x-register-card-landing .card .-ace-card {
    position: absolute
}

@media (max-width:991.98px) {
    .x-landing .x-register-card-landing .card .-ace-card {
        display: none
    }
}

.x-landing .x-register-card-landing .card .-ace-card.-item-1 {
    bottom: 150px;
    left: -80px;
    -webkit-animation: x-card-mover-1 5s infinite alternate;
    animation: x-card-mover-1 5s infinite alternate
}

.x-landing .x-register-card-landing .card .-ace-card.-item-2 {
    bottom: 60px;
    right: -70px;
    width: 100px;
    -webkit-animation: x-card-mover-2 5s infinite alternate;
    animation: x-card-mover-2 5s infinite alternate
}

.x-landing .x-register-card-landing .card .-ace-card.-item-3 {
    top: 50px;
    right: -80px;
    width: 60px;
    -webkit-animation: x-card-mover-1 5s 1s infinite alternate;
    animation: x-card-mover-1 5s 1s infinite alternate
}

.x-landing .x-register-card-landing .card .card-body .-bg-promotion-active {
    height: auto
}

@media (min-width:992px) {
    .x-landing .x-register-card-landing .card .card-body {
        padding-bottom: 3rem!important
    }
}

@media (max-width:991.98px) {
    .x-landing .x-register-card-landing .card .card-body {
        padding-bottom: 1.25rem!important
    }
}

.x-landing .x-register-card-landing .-logo-title {
    width: 300px
}

.x-landing .x-register-card-landing .-heading-text {
    font-size: 1.5rem;
    font-weight: 400;
    text-shadow: 0 0 5px #5ac3c3
}

@media (max-width:1199.98px) {
    .x-landing .x-register-card-landing .-heading-text {
        font-size: 1.25rem
    }
}

.x-landing .x-register-card-landing .-description-text {
    font-size: 1.125rem;
    font-weight: 300
}

.x-landing .x-register-card-landing .x-wm-hr-line {
    display: none
}

@media (max-width:991.98px) {
    .x-landing .x-register-card-landing .-default-content {
        padding-top: 1rem!important;
        padding-bottom: 2rem!important
    }
}

.x-landing .x-footer-copyright-bg {
    margin-top: 0;
    padding: .5rem
}

.x-landing .x-btn-action {
    position: relative;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    padding: 0;
    transition: all .4s
}

@media (min-width:992px) {
    .x-landing .x-btn-action:hover {
        -webkit-transform: scale(1.02);
        transform: scale(1.02)
    }
}

.x-landing .x-btn-action .-img {
    width: 200px
}

.x-landing .x-btn-action .-text-wrapper {
    height: 77%;
    width: 93%;
    border-radius: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 50%;
    left: 50%;
    font-size: 1.125rem;
    font-weight: 700;
    color: #fff;
    -webkit-transform: translate(-50%, -55%);
    transform: translate(-50%, -55%)
}

.x-landing .x-btn-action .-text-wrapper .-text {
    position: relative;
    -webkit-filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .6));
    filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .6));
    display: inline-block;
    color: #fff;
    background: #fff -webkit-gradient(linear, 100% 0, 0 0, from(#fff), color-stop(.5, #131133), to(#fff));
    background-position: -200px top;
    background-repeat: no-repeat;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    -webkit-animation-name: x-shimmer;
    animation-name: x-shimmer;
    -webkit-animation-duration: 2s;
    animation-duration: 2s;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite
}

@media (max-width:991.98px) {
    .x-landing .x-btn-action .-text-wrapper .-text {
        -webkit-animation-duration: 2s;
        animation-duration: 2s
    }
}

.x-landing .x-btn-action .-text-wrapper .-text.-ma {
    display: none
}

.x-landing .x-btn-action .-text-wrapper .-ic-img {
    width: 36px;
    margin-right: 10px
}

.x-landing .x-btn-action .-text-wrapper .-ic {
    margin-left: 10px;
    font-size: 20px;
    -webkit-animation: x-btn-arrow-mover .3s infinite alternate;
    animation: x-btn-arrow-mover .3s infinite alternate
}

.x-landing .x-btn-action .-img {
    width: 190px
}

.x-landing .x-btn-action .-text-wrapper {
    font-size: 1rem;
    font-weight: 400
}

.x-landing .x-btn-action.-login-btn .-img {
    width: 195px
}

.x-landing .x-btn-action.-login-btn .-fake-bg {
    -webkit-animation: none;
    animation: none
}

.x-landing .x-btn-action.-login-btn .-text-wrapper {
    background: transparent;
    -webkit-transform: translate(-50%, -54%);
    transform: translate(-50%, -54%)
}

.x-landing .x-btn-action.-login-btn .-text-wrapper .-text {
    display: inline-block;
    color: #fff;
    background: #fff -webkit-gradient(linear, 100% 0, 0 0, from(#fff), color-stop(.5, #e3be7a), to(#fff));
    background-position: -200px top;
    background-repeat: no-repeat;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    -webkit-animation-name: x-shimmer;
    animation-name: x-shimmer;
    -webkit-animation-duration: 2s;
    animation-duration: 2s;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite
}

@media (max-width:991.98px) {
    .x-landing .x-btn-action.-login-btn .-text-wrapper .-text {
        -webkit-animation-duration: 2s;
        animation-duration: 2s
    }
}

.x-landing .x-btn-action.-register-btn {
    padding: 0;
    background: transparent;
    box-shadow: none;
    -webkit-animation: none;
    animation: none
}

@media (max-width:767.98px) {
    .x-landing .x-btn-action.-register-btn .-img {
        width: 195px
    }
}

.x-landing .x-btn-action.-register-btn .-fake-bg {
    position: absolute;
    top: 50%;
    left: 50%;
    border-radius: 40px;
    width: 96%;
    height: 88%;
    -webkit-transform: translate(-50%, -53%);
    transform: translate(-50%, -53%);
    z-index: 1;
    -webkit-animation: x-wm-primary-light-neon 1.5s ease-in-out infinite alternate;
    animation: x-wm-primary-light-neon 1.5s ease-in-out infinite alternate
}

.x-landing .x-btn-action.-register-btn .-text-wrapper {
    background: linear-gradient(180deg, #e33f64, #9c0737)
}

.x-landing .x-btn-action.-register-btn .-text-wrapper .-text {
    display: inline-block;
    color: #fff;
    background: #fff -webkit-gradient(linear, 100% 0, 0 0, from(#fff), color-stop(.5, #e33f64), to(#fff));
    background-position: -200px top;
    background-repeat: no-repeat;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    -webkit-animation-name: x-shimmer;
    animation-name: x-shimmer;
    -webkit-animation-duration: 2s;
    animation-duration: 2s;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite
}

@media (max-width:991.98px) {
    .x-landing .x-btn-action.-register-btn .-text-wrapper .-text {
        -webkit-animation-duration: 2s;
        animation-duration: 2s
    }
}

@media (min-width:992px) and (max-width:1199.98px) {
    .x-landing .x-btn-action .-img {
        width: 150px
    }
    .x-landing .x-btn-action.-login-btn .-img {
        width: 155px
    }
}

@media (min-width:768px) and (max-width:991.98px) {
    .x-landing .x-btn-action .-img {
        width: 215px
    }
    .x-landing .x-btn-action.-login-btn .-img {
        width: 210px
    }
}

#promotionSuggestionModal.-hello-popup .-effect.-item-1 {
    top: -30%;
    left: -10%;
    width: 140px
}

#promotionSuggestionModal.-hello-popup .-effect.-item-2 {
    top: 0;
    right: -12%;
    width: 160px
}

#promotionSuggestionModal.-hello-popup .-effect.-item-3 {
    bottom: -20%;
    right: -8%;
    width: 130px
}

@keyframes x-welcome-back-vertical-effect {
    0% {
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }
    to {
        -webkit-transform: translateY(-30px);
        transform: translateY(-30px)
    }
}

#promotionSuggestionModal .-effect {
    position: absolute;
    -webkit-animation: x-welcome-back-vertical-effect 4s infinite alternate;
    animation: x-welcome-back-vertical-effect 4s infinite alternate
}

#promotionSuggestionModal .-effect .-img {
    width: 100%;
    height: auto
}

#promotionSuggestionModal .-effect.-item-1 {
    top: -15%;
    left: -6%;
    width: 130px;
    -webkit-animation-delay: 0s;
    animation-delay: 0s
}

#promotionSuggestionModal .-effect.-item-2 {
    top: 15%;
    right: -10%;
    width: 150px;
    -webkit-animation-delay: .3s;
    animation-delay: .3s;
    -webkit-animation-duration: 6s;
    animation-duration: 6s
}

#promotionSuggestionModal .-effect.-item-3 {
    bottom: -8%;
    right: -6%;
    width: 130px;
    -webkit-animation-delay: .6s;
    animation-delay: .6s;
    -webkit-animation-duration: 5s;
    animation-duration: 5s
}

#layers {
    overflow: hidden;
    top: 45%;
    width: 100%;
    -webkit-transform: rotate(-5deg);
    transform: rotate(-5deg)
}

#layers,
#layers .layer {
    height: 200px;
    left: 0;
    position: absolute
}

#layers .layer {
    background-size: auto 100%;
    background-position: 50% 0;
    background-repeat: repeat-x;
    top: 0;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    width: 200vw
}

@-webkit-keyframes x-shooting-star-1 {
    0% {
        opacity: 1;
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }
    15% {
        opacity: 0;
        -webkit-transform: translate3d(-270px, 180px, 0);
        transform: translate3d(-270px, 180px, 0)
    }
    to {
        opacity: 0
    }
}

@keyframes x-shooting-star-1 {
    0% {
        opacity: 1;
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }
    15% {
        opacity: 0;
        -webkit-transform: translate3d(-270px, 180px, 0);
        transform: translate3d(-270px, 180px, 0)
    }
    to {
        opacity: 0
    }
}

@-webkit-keyframes x-shooting-star-2 {
    0% {
        opacity: 1;
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }
    25% {
        opacity: 0;
        -webkit-transform: translate3d(-270px, 180px, 0);
        transform: translate3d(-270px, 180px, 0)
    }
    to {
        opacity: 0
    }
}

@keyframes x-shooting-star-2 {
    0% {
        opacity: 1;
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }
    25% {
        opacity: 0;
        -webkit-transform: translate3d(-270px, 180px, 0);
        transform: translate3d(-270px, 180px, 0)
    }
    to {
        opacity: 0
    }
}

@-webkit-keyframes x-shooting-star-3 {
    0% {
        opacity: 1;
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }
    5% {
        opacity: 0;
        -webkit-transform: translate3d(-270px, 180px, 0);
        transform: translate3d(-270px, 180px, 0)
    }
    to {
        opacity: 0
    }
}

@keyframes x-shooting-star-3 {
    0% {
        opacity: 1;
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }
    5% {
        opacity: 0;
        -webkit-transform: translate3d(-270px, 180px, 0);
        transform: translate3d(-270px, 180px, 0)
    }
    to {
        opacity: 0
    }
}

@-webkit-keyframes twinkle {
    0% {
        opacity: .3
    }
    to {
        opacity: 1
    }
}

@keyframes twinkle {
    0% {
        opacity: .3
    }
    to {
        opacity: 1
    }
}

@-webkit-keyframes layer-1 {
    0% {
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }
    to {
        -webkit-transform: translate3d(-689px, 0, 0);
        transform: translate3d(-689px, 0, 0)
    }
}

@keyframes layer-1 {
    0% {
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }
    to {
        -webkit-transform: translate3d(-689px, 0, 0);
        transform: translate3d(-689px, 0, 0)
    }
}

#layers .layer:first-child {
    -webkit-animation: twinkle 8s ease-in -5s infinite alternate, layer-1 60s linear infinite;
    animation: twinkle 8s ease-in -5s infinite alternate, layer-1 60s linear infinite
}

@-webkit-keyframes layer-2 {
    0% {
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }
    to {
        -webkit-transform: translate3d(-699px, 0, 0);
        transform: translate3d(-699px, 0, 0)
    }
}

@keyframes layer-2 {
    0% {
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }
    to {
        -webkit-transform: translate3d(-699px, 0, 0);
        transform: translate3d(-699px, 0, 0)
    }
}

#layers .layer:nth-child(2) {
    -webkit-animation: twinkle 3s ease-in -3s infinite alternate, layer-2 120s linear infinite;
    animation: twinkle 3s ease-in -3s infinite alternate, layer-2 120s linear infinite
}

@-webkit-keyframes layer-3 {
    0% {
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }
    to {
        -webkit-transform: translate3d(-699px, 0, 0);
        transform: translate3d(-699px, 0, 0)
    }
}

@keyframes layer-3 {
    0% {
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }
    to {
        -webkit-transform: translate3d(-699px, 0, 0);
        transform: translate3d(-699px, 0, 0)
    }
}

#layers .layer:nth-child(3) {
    -webkit-animation: twinkle 3.5s ease-in infinite alternate, layer-3 120s linear infinite;
    animation: twinkle 3.5s ease-in infinite alternate, layer-3 120s linear infinite
}

@-webkit-keyframes layer-4 {
    0% {
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }
    to {
        -webkit-transform: translate3d(-480px, 0, 0);
        transform: translate3d(-480px, 0, 0)
    }
}

@keyframes layer-4 {
    0% {
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }
    to {
        -webkit-transform: translate3d(-480px, 0, 0);
        transform: translate3d(-480px, 0, 0)
    }
}

#layers .layer:nth-child(4) {
    -webkit-animation: twinkle 4s ease-in -2s infinite alternate, layer-4 80s linear infinite;
    animation: twinkle 4s ease-in -2s infinite alternate, layer-4 80s linear infinite
}

@-webkit-keyframes layer-5 {
    0% {
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }
    to {
        -webkit-transform: translate3d(-486px, 0, 0);
        transform: translate3d(-486px, 0, 0)
    }
}

@keyframes layer-5 {
    0% {
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }
    to {
        -webkit-transform: translate3d(-486px, 0, 0);
        transform: translate3d(-486px, 0, 0)
    }
}

#layers .layer:nth-child(5) {
    -webkit-animation: twinkle 5.5s ease-in infinite alternate, layer-5 80s linear infinite;
    animation: twinkle 5.5s ease-in infinite alternate, layer-5 80s linear infinite
}

#layers .-falling-star {
    content: "";
    position: absolute;
    top: -50px;
    z-index: 100;
    width: 72px;
    height: 50px;
    background-image: url(build/images/falling-star.fc090484.png);
    background-size: 72px 50px
}

#layers .-falling-star:nth-child(6) {
    -webkit-animation: x-shooting-star-1 10s infinite;
    animation: x-shooting-star-1 10s infinite;
    -webkit-animation-delay: 1s;
    animation-delay: 1s;
    left: 70%
}

#layers .-falling-star:nth-child(7) {
    -webkit-animation: x-shooting-star-2 10s infinite;
    animation: x-shooting-star-2 10s infinite;
    -webkit-animation-delay: 5s;
    animation-delay: 5s;
    left: 40%
}

#layers .-falling-star:nth-child(8) {
    -webkit-animation: x-shooting-star-2 10s infinite;
    animation: x-shooting-star-2 10s infinite;
    -webkit-animation-delay: 7s;
    animation-delay: 7s;
    left: 90%
}

#layers .-falling-star:nth-child(9) {
    -webkit-animation: x-shooting-star-1 10s infinite;
    animation: x-shooting-star-1 10s infinite;
    -webkit-animation-delay: 9s;
    animation-delay: 9s;
    left: 55%
}

#layers .-falling-star:nth-child(10) {
    -webkit-animation: x-shooting-star-1 10s infinite;
    animation: x-shooting-star-1 10s infinite;
    -webkit-animation-delay: 13s;
    animation-delay: 13s;
    left: 20%
}

@media (min-width:992px) and (max-width:1199.98px) {
    .btn.-btn-header-login .-bg-img {
        width: 140px
    }
}

@media (min-width:992px) and (max-width:1199.98px) {
    .btn.-btn-header-login .-text-btn {
        font-size: .875rem
    }
}

@media (min-width:1200px) {
    .x-btn-register-header {
        margin-right: 1rem
    }
}

@media (min-width:992px) and (max-width:1199.98px) {
    .x-btn-register-header {
        margin-right: .5rem
    }
}

@media (min-width:992px) {
    .x-btn-register-header {
        display: flex;
        justify-content: center;
        align-items: center;
        transition: all .2s
    }
    .x-btn-register-header:hover {
        -webkit-filter: saturate(1.5);
        filter: saturate(1.5);
        -webkit-transform: scale(1.025);
        transform: scale(1.025)
    }
}

.x-btn-register-header .-bg-img {
    height: auto
}

@media (min-width:1200px) {
    .x-btn-register-header .-bg-img {
        width: 148px
    }
}

@media (min-width:992px) and (max-width:1199.98px) {
    .x-btn-register-header .-bg-img {
        width: 131px
    }
}

@media (min-width:992px) {
    .x-btn-register-header .-text-btn {
        font-weight: 300;
        color: #fff;
        -webkit-transform: translate(-50%, -52%);
        transform: translate(-50%, -52%)
    }
}

@media (min-width:1200px) {
    .x-btn-register-header .-text-btn {
        font-size: 1rem
    }
}

@media (min-width:992px) and (max-width:1199.98px) {
    .x-btn-register-header .-text-btn {
        font-size: .875rem
    }
}

.x-footer .-footer-inner-wrapper {
    padding: 2rem 1rem 1.75rem
}

@media (min-width:1200px) {
    .x-footer .-footer-inner-wrapper .-provider-wrapper {
        min-width: 250px;
        max-width: 250px
    }
}

@media (max-width:1199.98px) {
    .x-footer .-footer-inner-wrapper .-provider-wrapper {
        width: 100%
    }
}

.x-footer .-footer-bottom-wrapper {
    display: none
}

.x-index-pre-footer-wrapper {
    overflow: hidden
}

.x-index-pre-footer-wrapper .-top-wrapper {
    background-position: top;
    background-size: cover;
    background-repeat: no-repeat;
    background-image: url(build/images/wm-casino-digital-city-bg.64877642.png);
    padding: 3rem 0;
    position: relative
}

@media screen and (min-width:1500px) {
    .x-index-pre-footer-wrapper .-top-wrapper {
        display: flex;
        flex-direction: row-reverse;
        align-items: center;
        justify-content: center
    }
    .x-index-pre-footer-wrapper .-top-wrapper .container {
        width: auto;
        margin-right: 0
    }
    .x-index-pre-footer-wrapper .-top-wrapper .container-fluid {
        width: auto;
        margin-left: 0
    }
}

@media (max-width:1199.98px) {
    .x-index-pre-footer-wrapper .-top-wrapper {
        padding: 2rem 0
    }
}

@media (max-width:767.98px) {
    .x-index-pre-footer-wrapper .-top-wrapper {
        padding: 1rem 0 2rem
    }
}

.x-index-pre-footer-wrapper .-top-wrapper .-heading-wrapper {
    height: 520px;
    display: flex;
    flex-direction: column;
    position: relative;
    z-index: 1;
    padding: 2.5rem 2rem
}

@media screen and (min-width:1500px) {
    .x-index-pre-footer-wrapper .-top-wrapper .-heading-wrapper {
        height: auto
    }
    .x-index-pre-footer-wrapper .-top-wrapper .-heading-wrapper.-normal {
        display: none
    }
    .x-index-pre-footer-wrapper .-top-wrapper .-heading-wrapper.-custom {
        height: auto;
        padding: 0;
        text-align: center
    }
}

@media screen and (max-width:1500px) {
    .x-index-pre-footer-wrapper .-top-wrapper .-heading-wrapper.-custom {
        display: none
    }
}

@media (max-width:1199.98px) {
    .x-index-pre-footer-wrapper .-top-wrapper .-heading-wrapper {
        height: 450px;
        padding: 1rem 2rem
    }
}

@media (max-width:991.98px) {
    .x-index-pre-footer-wrapper .-top-wrapper .-heading-wrapper {
        height: auto;
        text-align: center
    }
}

@media (max-width:767.98px) {
    .x-index-pre-footer-wrapper .-top-wrapper .-heading-wrapper {
        padding: 2rem 0
    }
}

@media (max-width:575.98px) {
    .x-index-pre-footer-wrapper .-top-wrapper .-heading-wrapper {
        padding: 1rem 0 2rem
    }
}

.x-index-pre-footer-wrapper .-top-wrapper .-heading-wrapper .-title {
    margin-bottom: 0;
    padding: .5rem;
    font-size: 1.5rem;
    font-weight: 400;
    line-height: 1.5;
    color: #fff
}

@media screen and (min-width:1500px) {
    .x-index-pre-footer-wrapper .-top-wrapper .-heading-wrapper .-title {
        font-size: 1.5rem
    }
}

@media (max-width:1199.98px) {
    .x-index-pre-footer-wrapper .-top-wrapper .-heading-wrapper .-title {
        font-size: 1.5rem
    }
}

@media (max-width:767.98px) {
    .x-index-pre-footer-wrapper .-top-wrapper .-heading-wrapper .-title {
        font-size: 1.25rem
    }
}

.x-index-pre-footer-wrapper .-top-wrapper .-ic-chip-01,
.x-index-pre-footer-wrapper .-top-wrapper .-ic-chip-02,
.x-index-pre-footer-wrapper .-top-wrapper .-ic-chip-03,
.x-index-pre-footer-wrapper .-top-wrapper .-ic-chip-04 {
    position: absolute
}

.x-index-pre-footer-wrapper .-top-wrapper .-ic-chip-01 {
    bottom: -110px;
    right: 8%;
    width: 360px
}

@media (min-width:1500px) {
    .x-index-pre-footer-wrapper .-top-wrapper .-ic-chip-01 {
        display: none
    }
}

@media (max-width:1500px) {
    .x-index-pre-footer-wrapper .-top-wrapper .-ic-chip-01 {
        width: 320px
    }
}

@media (max-width:1199.98px) {
    .x-index-pre-footer-wrapper .-top-wrapper .-ic-chip-01 {
        width: 280px
    }
}

@media (max-width:767.98px) {
    .x-index-pre-footer-wrapper .-top-wrapper .-ic-chip-01 {
        z-index: 0;
        opacity: .4;
        right: -50px;
        bottom: 0
    }
}

@media (max-width:575.98px) {
    .x-index-pre-footer-wrapper .-top-wrapper .-ic-chip-01 {
        opacity: .2;
        width: 240px;
        right: -75px
    }
}

.x-index-pre-footer-wrapper .-top-wrapper .-ic-chip-02 {
    top: 90px;
    left: -5%;
    width: 160px
}

@media (max-width:1500px) {
    .x-index-pre-footer-wrapper .-top-wrapper .-ic-chip-02 {
        width: 130px
    }
}

@media (max-width:991.98px) {
    .x-index-pre-footer-wrapper .-top-wrapper .-ic-chip-02 {
        display: none
    }
}

.x-index-pre-footer-wrapper .-top-wrapper .-ic-chip-03 {
    top: 44%;
    right: 17%;
    width: 140px
}

@media (max-width:1700px) {
    .x-index-pre-footer-wrapper .-top-wrapper .-ic-chip-03 {
        right: 12%
    }
}

@media (max-width:1500px) {
    .x-index-pre-footer-wrapper .-top-wrapper .-ic-chip-03 {
        width: 110px
    }
}

@media (max-width:1300px) {
    .x-index-pre-footer-wrapper .-top-wrapper .-ic-chip-03 {
        right: 8%;
        top: 42%
    }
}

@media (max-width:991.98px) {
    .x-index-pre-footer-wrapper .-top-wrapper .-ic-chip-03 {
        top: 32%;
        width: 80px;
        right: -15px
    }
}

@media (max-width:425px) {
    .x-index-pre-footer-wrapper .-top-wrapper .-ic-chip-03 {
        top: 28%;
        width: 60px
    }
}

@media (max-width:320px) {
    .x-index-pre-footer-wrapper .-top-wrapper .-ic-chip-03 {
        top: 26%;
        width: 55px
    }
}

.x-index-pre-footer-wrapper .-top-wrapper .-ic-chip-04 {
    top: 56%;
    left: 5%;
    width: 160px;
    z-index: 2
}

@media (min-width:1500px) {
    .x-index-pre-footer-wrapper .-top-wrapper .-ic-chip-04 {
        display: none
    }
}

@media (max-width:1500px) {
    .x-index-pre-footer-wrapper .-top-wrapper .-ic-chip-04 {
        width: 130px
    }
}

@media (max-width:1300px) {
    .x-index-pre-footer-wrapper .-top-wrapper .-ic-chip-04 {
        left: 0
    }
}

@media (max-width:1199.98px) {
    .x-index-pre-footer-wrapper .-top-wrapper .-ic-chip-04 {
        z-index: 0
    }
}

@media (max-width:991.98px) {
    .x-index-pre-footer-wrapper .-top-wrapper .-ic-chip-04 {
        top: 40%
    }
}

@media (max-width:767.98px) {
    .x-index-pre-footer-wrapper .-top-wrapper .-ic-chip-04 {
        top: 37%;
        left: 0
    }
}

@media (max-width:575.98px) {
    .x-index-pre-footer-wrapper .-top-wrapper .-ic-chip-04 {
        top: 35%;
        left: -20px;
        width: 100px
    }
}

@media (max-width:425px) {
    .x-index-pre-footer-wrapper .-top-wrapper .-ic-chip-04 {
        top: 32%;
        width: 90px
    }
}

@media (max-width:320px) {
    .x-index-pre-footer-wrapper .-top-wrapper .-ic-chip-04 {
        top: 28%;
        width: 75px
    }
}

.x-index-pre-footer-wrapper .-top-wrapper .-top-content-container {
    position: relative
}

@media screen and (min-width:1500px) {
    .x-index-pre-footer-wrapper .-top-wrapper .-top-content-container {
        z-index: 1
    }
}

.x-index-pre-footer-wrapper .-top-wrapper .-top-content-container .-img-middle-element {
    height: auto
}

@media screen and (min-width:1500px) {
    .x-index-pre-footer-wrapper .-top-wrapper .-top-content-container .-img-middle-element {
        max-width: 780px;
        width: 100%
    }
}

@media (max-width:1500px) {
    .x-index-pre-footer-wrapper .-top-wrapper .-top-content-container .-img-middle-element {
        width: 1200px;
        position: absolute;
        top: 0;
        left: 54%;
        -webkit-transform: translateX(-54%);
        transform: translateX(-54%)
    }
}

@media (max-width:1300px) {
    .x-index-pre-footer-wrapper .-top-wrapper .-top-content-container .-img-middle-element {
        width: 1100px
    }
}

@media (max-width:1199.98px) {
    .x-index-pre-footer-wrapper .-top-wrapper .-top-content-container .-img-middle-element {
        width: 950px
    }
}

@media (max-width:991.98px) {
    .x-index-pre-footer-wrapper .-top-wrapper .-top-content-container .-img-middle-element {
        position: relative;
        width: 800px;
        margin-top: -5rem
    }
}

@media (max-width:767.98px) {
    .x-index-pre-footer-wrapper .-top-wrapper .-top-content-container .-img-middle-element {
        width: 700px
    }
}

@media (max-width:575.98px) {
    .x-index-pre-footer-wrapper .-top-wrapper .-top-content-container .-img-middle-element {
        margin-top: -3rem
    }
}

.x-index-pre-footer-wrapper .-top-wrapper .-articles-wrapper {
    display: none;
    justify-content: space-around;
    margin-top: 7rem;
    position: relative;
    z-index: 1;
    padding: 0 2rem
}

@media (min-width:1500px) {
    .x-index-pre-footer-wrapper .-top-wrapper .-articles-wrapper {
        max-width: 800px;
        margin-top: 0;
        padding: 0 1rem
    }
}

@media (min-width:992px) {
    .x-index-pre-footer-wrapper .-top-wrapper .-articles-wrapper {
        display: flex
    }
}

@media (max-width:1500px) {
    .x-index-pre-footer-wrapper .-top-wrapper .-articles-wrapper {
        padding: 0 5rem;
        margin-top: 4rem
    }
}

@media (max-width:1300px) {
    .x-index-pre-footer-wrapper .-top-wrapper .-articles-wrapper {
        padding: 0;
        margin-top: 0;
        justify-content: center
    }
}

@media (max-width:1199.98px) {
    .x-index-pre-footer-wrapper .-top-wrapper .-articles-wrapper {
        margin-top: -4rem
    }
}

.x-index-pre-footer-wrapper .-top-wrapper .-articles-wrapper .-flip-container {
    display: none
}

@media (min-width:992px) {
    .x-index-pre-footer-wrapper .-top-wrapper .-articles-wrapper .-flip-container {
        -webkit-perspective: 1000px;
        perspective: 1000px;
        width: 33%;
        display: block
    }
    .x-index-pre-footer-wrapper .-top-wrapper .-articles-wrapper .-flip-container.animated .-flipper {
        -webkit-animation-play-state: running;
        animation-play-state: running
    }
    .x-index-pre-footer-wrapper .-top-wrapper .-articles-wrapper .-flip-container .-flipper {
        transition: .6s;
        -webkit-transform-style: preserve-3d;
        transform-style: preserve-3d;
        position: relative;
        -webkit-animation: x-article-flip-vertical-right .6s cubic-bezier(.455, .03, .515, .955) both;
        animation: x-article-flip-vertical-right .6s cubic-bezier(.455, .03, .515, .955) both;
        -webkit-animation-play-state: paused;
        animation-play-state: paused
    }
    .x-index-pre-footer-wrapper .-top-wrapper .-articles-wrapper .-flip-container .-flipper.-no-01 {
        -webkit-animation-delay: .8s;
        animation-delay: .8s
    }
    .x-index-pre-footer-wrapper .-top-wrapper .-articles-wrapper .-flip-container .-flipper.-no-02 {
        -webkit-animation-delay: 1s;
        animation-delay: 1s
    }
    .x-index-pre-footer-wrapper .-top-wrapper .-articles-wrapper .-flip-container .-flipper.-no-03 {
        -webkit-animation-delay: 1.2s;
        animation-delay: 1.2s
    }
    .x-index-pre-footer-wrapper .-top-wrapper .-articles-wrapper .-flip-container .-flipper .-back,
    .x-index-pre-footer-wrapper .-top-wrapper .-articles-wrapper .-flip-container .-flipper .-front {
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        position: absolute;
        top: 0;
        left: 0
    }
    .x-index-pre-footer-wrapper .-top-wrapper .-articles-wrapper .-flip-container .-flipper .-front {
        z-index: 2;
        -webkit-transform: rotateY(0deg);
        transform: rotateY(0deg)
    }
    .x-index-pre-footer-wrapper .-top-wrapper .-articles-wrapper .-flip-container .-flipper .-back {
        -webkit-transform: rotateY(180deg);
        transform: rotateY(180deg)
    }
    .x-index-pre-footer-wrapper .-top-wrapper .-articles-wrapper .-back,
    .x-index-pre-footer-wrapper .-top-wrapper .-articles-wrapper .-flip-container,
    .x-index-pre-footer-wrapper .-top-wrapper .-articles-wrapper .-front {
        width: 340px;
        height: 450px
    }
}

@media screen and (min-width:992px) and (min-width:1500px) {
    .x-index-pre-footer-wrapper .-top-wrapper .-articles-wrapper .-back,
    .x-index-pre-footer-wrapper .-top-wrapper .-articles-wrapper .-flip-container,
    .x-index-pre-footer-wrapper .-top-wrapper .-articles-wrapper .-front {
        width: 230px;
        margin: 0 .25rem
    }
}

@media (min-width:992px) and (max-width:1500px) {
    .x-index-pre-footer-wrapper .-top-wrapper .-articles-wrapper .-back,
    .x-index-pre-footer-wrapper .-top-wrapper .-articles-wrapper .-flip-container,
    .x-index-pre-footer-wrapper .-top-wrapper .-articles-wrapper .-front {
        width: 300px
    }
}

@media (min-width:992px) and (max-width:1300px) {
    .x-index-pre-footer-wrapper .-top-wrapper .-articles-wrapper .-back,
    .x-index-pre-footer-wrapper .-top-wrapper .-articles-wrapper .-flip-container,
    .x-index-pre-footer-wrapper .-top-wrapper .-articles-wrapper .-front {
        width: 290px;
        margin: 0 .25rem
    }
}

@media (min-width:992px) and (max-width:1199.98px) {
    .x-index-pre-footer-wrapper .-top-wrapper .-articles-wrapper .-back,
    .x-index-pre-footer-wrapper .-top-wrapper .-articles-wrapper .-flip-container,
    .x-index-pre-footer-wrapper .-top-wrapper .-articles-wrapper .-front {
        height: 410px;
        width: 250px
    }
}

@media (min-width:992px) and (min-width:768px) and (max-width:991.98px) {
    .x-index-pre-footer-wrapper .-top-wrapper .-articles-wrapper .-back,
    .x-index-pre-footer-wrapper .-top-wrapper .-articles-wrapper .-flip-container,
    .x-index-pre-footer-wrapper .-top-wrapper .-articles-wrapper .-front {
        width: 225px;
        height: 295px
    }
}

@media (min-width:992px) {
    .x-index-pre-footer-wrapper .-top-wrapper .-articles-wrapper .-inner-wrapper {
        background-size: contain;
        background-position: 50%;
        background-repeat: no-repeat;
        background-color: transparent;
        border: none
    }
    .x-index-pre-footer-wrapper .-top-wrapper .-articles-wrapper .-inner-wrapper .-ic-article-top-container {
        margin-top: -3rem;
        min-height: 125px;
        text-align: center;
        background-color: transparent;
        border: none
    }
}

@media (min-width:992px) and (min-width:1500px) {
    .x-index-pre-footer-wrapper .-top-wrapper .-articles-wrapper .-inner-wrapper .-ic-article-top-container {
        display: flex;
        align-items: flex-end;
        justify-content: center;
        margin-top: 1rem;
        min-height: 100px;
        padding: 0
    }
}

@media (min-width:992px) and (max-width:1500px) {
    .x-index-pre-footer-wrapper .-top-wrapper .-articles-wrapper .-inner-wrapper .-ic-article-top-container {
        margin-top: -1rem
    }
}

@media (min-width:992px) and (max-width:1199.98px) {
    .x-index-pre-footer-wrapper .-top-wrapper .-articles-wrapper .-inner-wrapper .-ic-article-top-container {
        margin-top: 0;
        min-height: 115px
    }
}

@media (min-width:992px) and (min-width:768px) and (max-width:991.98px) {
    .x-index-pre-footer-wrapper .-top-wrapper .-articles-wrapper .-inner-wrapper .-ic-article-top-container {
        min-height: 90px
    }
}

@media (min-width:992px) {
    .x-index-pre-footer-wrapper .-top-wrapper .-articles-wrapper .-inner-wrapper .-ic-article-top-container .-ic-article-top {
        width: 90px
    }
}

@media (min-width:992px) and (max-width:1199.98px) {
    .x-index-pre-footer-wrapper .-top-wrapper .-articles-wrapper .-inner-wrapper .-ic-article-top-container .-ic-article-top {
        width: 80px
    }
}

@media (min-width:992px) {
    .x-index-pre-footer-wrapper .-top-wrapper .-articles-wrapper .-inner-wrapper .-ic-article-top-container .-ic-article-top.-ic-03 {
        width: 80px
    }
}

@media (min-width:992px) and (max-width:1199.98px) {
    .x-index-pre-footer-wrapper .-top-wrapper .-articles-wrapper .-inner-wrapper .-ic-article-top-container .-ic-article-top.-ic-03 {
        width: 65px
    }
}

@media (min-width:992px) {
    .x-index-pre-footer-wrapper .-top-wrapper .-articles-wrapper .-inner-wrapper .-description-wrapper {
        text-align: center
    }
}

@media (min-width:992px) and (max-width:1199.98px) {
    .x-index-pre-footer-wrapper .-top-wrapper .-articles-wrapper .-inner-wrapper .-description-wrapper {
        padding: 1rem
    }
}

@media (min-width:992px) {
    .x-index-pre-footer-wrapper .-top-wrapper .-articles-wrapper .-inner-wrapper .-description-wrapper .-title {
        margin: 1rem 0 1.5rem;
        font-size: 1.75rem;
        font-weight: 400;
        color: #efefef
    }
}

@media screen and (min-width:992px) and (min-width:1500px) {
    .x-index-pre-footer-wrapper .-top-wrapper .-articles-wrapper .-inner-wrapper .-description-wrapper .-title {
        font-size: 1.25rem
    }
}

@media (min-width:992px) and (max-width:1199.98px) {
    .x-index-pre-footer-wrapper .-top-wrapper .-articles-wrapper .-inner-wrapper .-description-wrapper .-title {
        font-size: 1.5rem;
        margin: 0 0 1rem
    }
}

@media (min-width:992px) {
    .x-index-pre-footer-wrapper .-top-wrapper .-articles-wrapper .-inner-wrapper .-description-wrapper .-detail {
        padding: 0 1rem 3rem;
        font-size: 1.125rem;
        font-weight: 300;
        color: #afafaf
    }
}

@media screen and (min-width:992px) and (min-width:1500px) {
    .x-index-pre-footer-wrapper .-top-wrapper .-articles-wrapper .-inner-wrapper .-description-wrapper .-detail {
        font-size: 1rem
    }
    .x-index-pre-footer-wrapper .-top-wrapper .-articles-wrapper .-inner-wrapper .-description-wrapper .-detail br {
        display: none
    }
}

@media (min-width:992px) and (max-width:1199.98px) {
    .x-index-pre-footer-wrapper .-top-wrapper .-articles-wrapper .-inner-wrapper .-description-wrapper .-detail {
        font-size: 1rem
    }
}

@media (min-width:992px) and (max-width:1300px) {
    .x-index-pre-footer-wrapper .-top-wrapper .-articles-wrapper .-inner-wrapper .-description-wrapper .-detail {
        padding: 0
    }
}

.x-index-pre-footer-wrapper .-top-wrapper .-articles-wrapper-mobile {
    display: none;
    flex-direction: column
}

@media (max-width:991.98px) {
    .x-index-pre-footer-wrapper .-top-wrapper .-articles-wrapper-mobile {
        display: flex;
        margin: 2rem auto;
        max-width: 360px
    }
}

@media (max-width:767.98px) {
    .x-index-pre-footer-wrapper .-top-wrapper .-articles-wrapper-mobile {
        margin: 0 auto;
        padding-top: 2rem
    }
}

@media (max-width:575.98px) {
    .x-index-pre-footer-wrapper .-top-wrapper .-articles-wrapper-mobile .-content-wrapper-mobile {
        padding-left: 1rem
    }
}

.x-index-pre-footer-wrapper .-top-wrapper .-articles-wrapper-mobile .-content-wrapper-mobile .-title {
    position: relative;
    padding-left: .75rem;
    font-size: 1.75rem;
    font-weight: 500;
    color: #fff
}

@media (max-width:767.98px) {
    .x-index-pre-footer-wrapper .-top-wrapper .-articles-wrapper-mobile .-content-wrapper-mobile .-title {
        font-size: 1.5rem
    }
}

@media (max-width:575.98px) {
    .x-index-pre-footer-wrapper .-top-wrapper .-articles-wrapper-mobile .-content-wrapper-mobile .-title {
        font-size: 1.25rem
    }
}

.x-index-pre-footer-wrapper .-top-wrapper .-articles-wrapper-mobile .-content-wrapper-mobile .-title:before {
    content: "";
    border-left: 4px solid #2e7eeb;
    height: 24px;
    position: absolute;
    top: 5px;
    left: 0
}

.x-index-pre-footer-wrapper .-top-wrapper .-articles-wrapper-mobile .-content-wrapper-mobile .-detail {
    font-size: 1.25rem;
    font-weight: 300;
    color: #afafaf
}

@media (max-width:767.98px) {
    .x-index-pre-footer-wrapper .-top-wrapper .-articles-wrapper-mobile .-content-wrapper-mobile .-detail {
        font-size: 1.125rem
    }
}

@media (max-width:575.98px) {
    .x-index-pre-footer-wrapper .-top-wrapper .-articles-wrapper-mobile .-content-wrapper-mobile .-detail {
        font-size: 1rem
    }
}

@media (max-width:991.98px) {
    .x-index-pre-footer-wrapper .-top-wrapper .-button-zone.-desktop {
        display: none
    }
}

.x-index-pre-footer-wrapper .-top-wrapper .-button-zone.-mobile {
    display: none
}

@media (max-width:991.98px) {
    .x-index-pre-footer-wrapper .-top-wrapper .-button-zone.-mobile {
        display: block;
        margin: auto;
        z-index: 1
    }
}

.x-index-pre-footer-wrapper .-top-wrapper .-button-zone .-btn {
    position: relative;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    padding: 0;
    transition: all .4s
}

@media (min-width:992px) {
    .x-index-pre-footer-wrapper .-top-wrapper .-button-zone .-btn:hover {
        -webkit-transform: scale(1.02);
        transform: scale(1.02)
    }
}

.x-index-pre-footer-wrapper .-top-wrapper .-button-zone .-btn .-img {
    width: 200px
}

.x-index-pre-footer-wrapper .-top-wrapper .-button-zone .-btn .-text-wrapper {
    height: 77%;
    width: 93%;
    border-radius: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 50%;
    left: 50%;
    font-size: 1.125rem;
    font-weight: 700;
    color: #fff;
    -webkit-transform: translate(-50%, -55%);
    transform: translate(-50%, -55%)
}

.x-index-pre-footer-wrapper .-top-wrapper .-button-zone .-btn .-text-wrapper .-text {
    position: relative;
    -webkit-filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .6));
    filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .6));
    display: inline-block;
    color: #fff;
    background: #fff -webkit-gradient(linear, 100% 0, 0 0, from(#fff), color-stop(.5, #131133), to(#fff));
    background-position: -200px top;
    background-repeat: no-repeat;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    -webkit-animation-name: x-shimmer;
    animation-name: x-shimmer;
    -webkit-animation-duration: 2s;
    animation-duration: 2s;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite
}

@media (max-width:991.98px) {
    .x-index-pre-footer-wrapper .-top-wrapper .-button-zone .-btn .-text-wrapper .-text {
        -webkit-animation-duration: 2s;
        animation-duration: 2s
    }
}

.x-index-pre-footer-wrapper .-top-wrapper .-button-zone .-btn .-text-wrapper .-text.-ma {
    display: none
}

.x-index-pre-footer-wrapper .-top-wrapper .-button-zone .-btn .-text-wrapper .-ic-img {
    width: 36px;
    margin-right: 10px
}

.x-index-pre-footer-wrapper .-top-wrapper .-button-zone .-btn .-text-wrapper .-ic {
    margin-left: 10px;
    font-size: 20px;
    -webkit-animation: x-btn-arrow-mover .3s infinite alternate;
    animation: x-btn-arrow-mover .3s infinite alternate
}

.x-index-pre-footer-wrapper .-bottom-container {
    padding: 3rem 0 1rem;
    background-position: 50%!important;
    background-size: cover!important;
    background-repeat: no-repeat!important;
    position: relative
}

@media (max-width:991.98px) {
    .x-index-pre-footer-wrapper .-bottom-container {
        padding: 3rem 0 2rem
    }
}

@media (max-width:575.98px) {
    .x-index-pre-footer-wrapper .-bottom-container {
        padding: 2rem 0
    }
}

.x-index-pre-footer-wrapper .-bottom-container:after,
.x-index-pre-footer-wrapper .-bottom-container:before {
    content: "";
    background: linear-gradient(90deg, rgba(102, 108, 117, .1), rgba(102, 108, 117, .6) 10%, #e6e6e6 50%, rgba(102, 108, 117, .6) 90%, rgba(102, 108, 117, .1));
    height: 3px;
    width: 100%;
    position: absolute
}

.x-index-pre-footer-wrapper .-bottom-container:before {
    top: 0
}

.x-index-pre-footer-wrapper .-bottom-container:after {
    bottom: 0
}

.x-index-pre-footer-wrapper .-bottom-container .-sub-description-inner-wrapper .-img-box {
    background-position: 50%;
    background-size: 160% 160%;
    background-repeat: no-repeat;
    text-align: center;
    position: relative;
    display: flex
}

@media (max-width:767.98px) {
    .x-index-pre-footer-wrapper .-bottom-container .-sub-description-inner-wrapper .-img-box {
        justify-content: center
    }
}

.x-index-pre-footer-wrapper .-bottom-container .-sub-description-inner-wrapper .-img-box .-img {
    z-index: 1;
    width: 100%
}

@media (min-width:768px) {
    .x-index-pre-footer-wrapper .-bottom-container .-sub-description-inner-wrapper .-img-box .-img {
        max-width: 470px;
        margin-left: auto
    }
}

@media (max-width:991.98px) {
    .x-index-pre-footer-wrapper .-bottom-container .-sub-description-inner-wrapper .-img-box .-img {
        width: 340px
    }
}

@media (max-width:575.98px) {
    .x-index-pre-footer-wrapper .-bottom-container .-sub-description-inner-wrapper .-img-box .-img {
        width: 320px
    }
}

@media (max-width:375px) {
    .x-index-pre-footer-wrapper .-bottom-container .-sub-description-inner-wrapper .-img-box .-img {
        width: 280px
    }
}

@media (max-width:767.98px) {
    .x-index-pre-footer-wrapper .-bottom-container .-sub-description-inner-wrapper .-img-box .-logo-behind {
        display: none
    }
}

.x-index-pre-footer-wrapper .-bottom-container .-sub-description-inner-wrapper .-img-box .-logo-behind svg {
    position: absolute;
    right: 60px;
    top: 90px;
    z-index: -1;
    width: 150px
}

@media (max-width:1199.98px) {
    .x-index-pre-footer-wrapper .-bottom-container .-sub-description-inner-wrapper .-img-box .-logo-behind svg {
        right: 60px;
        top: 70px;
        width: 130px
    }
}

@media (max-width:991.98px) {
    .x-index-pre-footer-wrapper .-bottom-container .-sub-description-inner-wrapper .-img-box .-logo-behind svg {
        width: 100px;
        top: 55px;
        right: 35px
    }
}

.x-index-pre-footer-wrapper .-bottom-container .-sub-description-inner-wrapper .-content-container {
    display: flex;
    flex-direction: column;
    padding-top: 2rem
}

@media (max-width:991.98px) {
    .x-index-pre-footer-wrapper .-bottom-container .-sub-description-inner-wrapper .-content-container {
        padding-top: 1.5rem
    }
}

@media (max-width:767.98px) {
    .x-index-pre-footer-wrapper .-bottom-container .-sub-description-inner-wrapper .-content-container {
        text-align: center
    }
}

.x-index-pre-footer-wrapper .-bottom-container .-sub-description-inner-wrapper .-content-container .-content-wrapper {
    margin-bottom: 1rem;
    font-weight: 300
}

@media (max-width:991.98px) {
    .x-index-pre-footer-wrapper .-bottom-container .-sub-description-inner-wrapper .-content-container .-content-wrapper {
        margin-bottom: 0
    }
}

.x-index-pre-footer-wrapper .-bottom-container .-sub-description-inner-wrapper .-content-container .-content-wrapper .-sub-title {
    display: block;
    font-size: 1.5rem;
    color: #47aad0
}

@media (max-width:1199.98px) {
    .x-index-pre-footer-wrapper .-bottom-container .-sub-description-inner-wrapper .-content-container .-content-wrapper .-sub-title {
        font-size: 1.25rem
    }
}

.x-index-pre-footer-wrapper .-bottom-container .-sub-description-inner-wrapper .-content-container .-content-wrapper .-description {
    font-size: 1rem;
    color: #afafaf
}

.x-index-pre-footer-wrapper .-bottom-container .-banner-icon-wrapper {
    display: flex;
    justify-content: flex-start;
    align-items: center
}

@media (max-width:767.98px) {
    .x-index-pre-footer-wrapper .-bottom-container .-banner-icon-wrapper {
        justify-content: center
    }
}

.x-index-pre-footer-wrapper .-bottom-container .-banner-icon-wrapper .-ic-banner {
    width: 110px;
    margin-right: 15px
}

@media (max-width:991.98px) {
    .x-index-pre-footer-wrapper .-bottom-container .-banner-icon-wrapper .-ic-banner {
        width: 95px
    }
    .x-index-pre-footer-wrapper .-bottom-container .-banner-icon-wrapper .-ic-banner:last-child {
        margin-right: 0
    }
}

@media (max-width:375px) {
    .x-index-pre-footer-wrapper .-bottom-container .-banner-icon-wrapper .-ic-banner {
        width: 86px
    }
}

.x-pre-footer-base-wrapper {
    padding: 3rem 0
}

@media (max-width:767.98px) {
    .x-pre-footer-base-wrapper {
        padding: 2rem 0
    }
}

.x-pre-footer-base-wrapper .-top-wrapper {
    position: relative;
    padding: 3rem 0;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top;
    background-image: url(build/images/wm-casino-digital-city-bg.64877642.png)
}

.x-pre-footer-base-wrapper .-base-description,
.x-pre-footer-base-wrapper .-base-title {
    text-align: center
}

.x-pre-footer-base-wrapper .-base-title {
    font-size: 1.5rem;
    font-weight: 400
}

@media (max-width:991.98px) {
    .x-pre-footer-base-wrapper .-base-title {
        font-size: 1.25rem
    }
}

@media (max-width:767.98px) {
    .x-pre-footer-base-wrapper .-base-title {
        font-size: 1.125rem
    }
}

@media (max-width:575.98px) {
    .x-pre-footer-base-wrapper .-base-title {
        font-size: 1rem
    }
}

.x-pre-footer-base-wrapper .-base-description {
    font-size: 1.125rem;
    font-weight: 300
}

@media (max-width:991.98px) {
    .x-pre-footer-base-wrapper .-base-description {
        font-size: 1rem
    }
}

@media (max-width:575.98px) {
    .x-pre-footer-base-wrapper .-base-description {
        font-size: .875rem
    }
}

.x-pre-footer-base-wrapper .-base-banner {
    display: block;
    width: 100%;
    height: auto;
    max-width: 750px;
    margin: 0 auto
}

@media (max-width:575.98px) {
    .x-pre-footer-base-wrapper .-base-list {
        padding-left: 1.5rem
    }
}

.x-pre-footer-base-wrapper .-base-list-item {
    margin-top: 1rem;
    font-size: 1rem;
    font-weight: 300
}

@media (max-width:575.98px) {
    .x-pre-footer-base-wrapper .-base-list-item {
        font-size: .875rem
    }
}

.x-pre-footer-base-wrapper.-hot-games {
    padding: 0
}

.x-pre-footer-base-wrapper.-hot-games .-base-banner {
    margin-top: 2rem
}

@media (max-width:767.98px) {
    .x-pre-footer-base-wrapper.-hot-games .-base-banner {
        margin-top: 1rem
    }
}

.x-pre-footer-base-wrapper.-casino {
    padding: 3rem 0
}

@media (min-width:992px) {
    .x-pre-footer-base-wrapper.-casino .-base-description,
    .x-pre-footer-base-wrapper.-casino .-base-title {
        text-align: left
    }
}

@media (min-width:992px) and (max-width:1199.98px) {
    .x-pre-footer-base-wrapper.-casino .-base-title {
        font-size: 1.25rem
    }
}

@media (min-width:992px) and (max-width:1199.98px) {
    .x-pre-footer-base-wrapper.-casino .-base-description {
        font-size: 1rem
    }
}

.x-pre-footer-base-wrapper.-casino .-section-2-wrapper,
.x-pre-footer-base-wrapper.-casino .-section-3-wrapper {
    margin-top: 3rem
}

@media (max-width:991.98px) {
    .x-pre-footer-base-wrapper.-casino .-section-2-wrapper .-content-wrapper,
    .x-pre-footer-base-wrapper.-casino .-section-3-wrapper .-content-wrapper {
        order: 0
    }
}

@media (max-width:991.98px) {
    .x-pre-footer-base-wrapper.-casino .-section-2-wrapper .-img-wrapper,
    .x-pre-footer-base-wrapper.-casino .-section-3-wrapper .-img-wrapper {
        order: 1
    }
}

@media (max-width:991.98px) {
    .x-pre-footer-base-wrapper.-casino .-section-2-wrapper .-base-banner,
    .x-pre-footer-base-wrapper.-casino .-section-3-wrapper .-base-banner {
        max-width: 500px
    }
}

.x-pre-footer-base-wrapper.-slot .-section-2-wrapper {
    margin-top: 3rem
}

@media (min-width:992px) {
    .x-pre-footer-base-wrapper.-slot .-section-2-wrapper .-base-description,
    .x-pre-footer-base-wrapper.-slot .-section-2-wrapper .-base-title {
        text-align: left
    }
}

.x-pre-footer-base-wrapper.-sport .-section-1-wrapper .-base-banner {
    max-width: 800px
}

.x-pre-footer-base-wrapper.-sport .-section-2-wrapper,
.x-pre-footer-base-wrapper.-sport .-section-3-wrapper {
    margin-top: 3rem
}

@media (max-width:767.98px) {
    .x-pre-footer-base-wrapper.-sport .-section-3-wrapper {
        margin-top: 2rem
    }
}

@media (max-width:575.98px) {
    .x-pre-footer-base-wrapper.-sport .-section-3-wrapper {
        margin-top: 1rem
    }
}

.x-pre-footer-base-wrapper.-sport .-section-3-wrapper .-base-title {
    text-align: left
}

.x-pre-footer-base-wrapper.-sport .-section-3-wrapper .-base-banner {
    max-width: 450px
}

.x-pre-footer-base-wrapper.-fishing .-section-1-wrapper .-base-banner {
    max-width: 850px
}

.x-pre-footer-base-wrapper.-fishing .-section-2-wrapper,
.x-pre-footer-base-wrapper.-fishing .-section-3-wrapper {
    margin-top: 2rem
}

@media (max-width:767.98px) {
    .x-pre-footer-base-wrapper.-fishing .-section-2-wrapper,
    .x-pre-footer-base-wrapper.-fishing .-section-3-wrapper {
        margin-top: 1.5rem
    }
}

.x-pre-footer-base-wrapper.-skill-game .-section-2-wrapper,
.x-pre-footer-base-wrapper.-skill-game .-section-3-wrapper {
    margin-top: 2rem
}

@media (max-width:767.98px) {
    .x-pre-footer-base-wrapper.-skill-game .-section-2-wrapper,
    .x-pre-footer-base-wrapper.-skill-game .-section-3-wrapper {
        margin-top: 1.5rem
    }
}

.x-seo-brick-section-container {
    padding: 3rem 0 1rem;
    background-position: 50%!important;
    background-size: cover!important;
    background-repeat: no-repeat!important;
    position: relative
}

@media (max-width:991.98px) {
    .x-seo-brick-section-container {
        padding: 3rem 0 2rem
    }
}

@media (max-width:575.98px) {
    .x-seo-brick-section-container {
        padding: 2rem 0
    }
}

.x-seo-brick-section-container:after,
.x-seo-brick-section-container:before {
    content: "";
    background: linear-gradient(90deg, rgba(102, 108, 117, .1), rgba(102, 108, 117, .6) 10%, #e6e6e6 50%, rgba(102, 108, 117, .6) 90%, rgba(102, 108, 117, .1));
    height: 3px;
    width: 100%;
    position: absolute
}

.x-seo-brick-section-container:before {
    top: 0
}

.x-seo-brick-section-container:after {
    bottom: 0
}

.x-seo-brick-section-container .-sub-description-inner-wrapper .-img-box {
    background-position: 50%;
    background-size: 160% 160%;
    background-repeat: no-repeat;
    text-align: center;
    position: relative;
    display: flex
}

@media (max-width:767.98px) {
    .x-seo-brick-section-container .-sub-description-inner-wrapper .-img-box {
        justify-content: center
    }
}

.x-seo-brick-section-container .-sub-description-inner-wrapper .-img-box .-img {
    z-index: 1;
    width: 100%
}

@media (min-width:768px) {
    .x-seo-brick-section-container .-sub-description-inner-wrapper .-img-box .-img {
        max-width: 470px;
        margin-left: auto
    }
}

@media (max-width:991.98px) {
    .x-seo-brick-section-container .-sub-description-inner-wrapper .-img-box .-img {
        width: 340px
    }
}

@media (max-width:575.98px) {
    .x-seo-brick-section-container .-sub-description-inner-wrapper .-img-box .-img {
        width: 320px
    }
}

@media (max-width:375px) {
    .x-seo-brick-section-container .-sub-description-inner-wrapper .-img-box .-img {
        width: 280px
    }
}

@media (max-width:767.98px) {
    .x-seo-brick-section-container .-sub-description-inner-wrapper .-img-box .-logo-behind {
        display: none
    }
}

.x-seo-brick-section-container .-sub-description-inner-wrapper .-img-box .-logo-behind svg {
    position: absolute;
    right: 60px;
    top: 90px;
    z-index: -1;
    width: 150px
}

@media (max-width:1199.98px) {
    .x-seo-brick-section-container .-sub-description-inner-wrapper .-img-box .-logo-behind svg {
        right: 60px;
        top: 70px;
        width: 130px
    }
}

@media (max-width:991.98px) {
    .x-seo-brick-section-container .-sub-description-inner-wrapper .-img-box .-logo-behind svg {
        width: 100px;
        top: 55px;
        right: 35px
    }
}

.x-seo-brick-section-container .-sub-description-inner-wrapper .-content-container {
    display: flex;
    flex-direction: column;
    padding-top: 2rem
}

@media (max-width:991.98px) {
    .x-seo-brick-section-container .-sub-description-inner-wrapper .-content-container {
        padding-top: 1.5rem
    }
}

@media (max-width:767.98px) {
    .x-seo-brick-section-container .-sub-description-inner-wrapper .-content-container {
        text-align: center
    }
}

.x-seo-brick-section-container .-sub-description-inner-wrapper .-content-container .-content-wrapper {
    margin-bottom: 1rem;
    font-weight: 300
}

@media (max-width:991.98px) {
    .x-seo-brick-section-container .-sub-description-inner-wrapper .-content-container .-content-wrapper {
        margin-bottom: 0
    }
}

.x-seo-brick-section-container .-sub-description-inner-wrapper .-content-container .-content-wrapper .-sub-title {
    display: block;
    font-size: 1.5rem;
    font-weight: 300;
    color: #47aad0
}

@media (max-width:1199.98px) {
    .x-seo-brick-section-container .-sub-description-inner-wrapper .-content-container .-content-wrapper .-sub-title {
        font-size: 1.25rem
    }
}

.x-seo-brick-section-container .-sub-description-inner-wrapper .-content-container .-content-wrapper .-description {
    font-size: 1rem;
    color: #afafaf
}

.x-seo-brick-section-container .-banner-icon-wrapper {
    display: flex;
    justify-content: flex-start;
    align-items: center
}

@media (max-width:767.98px) {
    .x-seo-brick-section-container .-banner-icon-wrapper {
        justify-content: center
    }
}

.x-seo-brick-section-container .-banner-icon-wrapper .-ic-banner {
    width: 110px;
    margin-right: 15px
}

@media (max-width:991.98px) {
    .x-seo-brick-section-container .-banner-icon-wrapper .-ic-banner {
        width: 95px
    }
    .x-seo-brick-section-container .-banner-icon-wrapper .-ic-banner:last-child {
        margin-right: 0
    }
}

@media (max-width:375px) {
    .x-seo-brick-section-container .-banner-icon-wrapper .-ic-banner {
        width: 86px
    }
}

.x-modal .-modal-main-account .-modal-content .-modal-body .-layout-account {
    margin: 0 1.5rem;
    border-radius: 20px
}
.js-profile-account-modal{
    display: none;
}










.showgamepro{
    text-align: center;
}
.showgamepro img{
    width: 100%;
    max-width: 150px;
    border-radius: 10px;
    box-shadow: 0 0 10px black;
}
.selectprogame{
    display:grid;
    width:100%;
    grid-template-columns: 1fr 1fr;
    max-height: 390px;
    overflow: auto;
    box-shadow: inset 0 0 10px #00000066;
    border-radius: 10px;
    background: #132a50;
}
@media(max-width:991px){

.selectprogame{
    display:grid;
    width:100%;
    grid-template-columns: 1fr 1fr 1fr;
}
}
@media(max-width:767px){
    
.selectprogame{
    display:grid;
    width:100%;
    grid-template-columns: 1fr 1fr;
    max-height: none;
}
}
.selectprogame label{
    padding: 5px;
    margin-bottom: 0;
}

.selectprogame img {
  width: 100%;
  height: auto;
  border-radius: 10px;
  filter: grayscale(.7);
}

.selectprogame input[type=radio] {
  display: none;
}

.selectprogame img:hover {
    filter: grayscale(0);
  cursor: pointer;
}

.selectprogame img:active {
  opacity:0.4;
  cursor: pointer;
}

.selectprogame input[type=radio]:checked + label > img {
  border: 6px solid rgb(255 255 255);
  box-shadow: 0 0 5px #2f9fff, 0 0 10px #fcff2e;
  border-radius: 10px;
  filter: grayscale(0);
}

.popupimg {
    display: flex;
    
    height: auto;
    align-content: center;
  
    margin-left: auto;
    margin-right: auto;
    width: 60%;
}