@charset "utf-8";
/* CSS Document */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap');

body {
    font-family: "Poppins", sans-serif;
    line-height: 1.6;
    font-size: 15px;
    margin: 0 auto;
    color: #788b9d;
    background: #f0f6ff;
}

a {
    text-decoration: none;
    cursor: pointer;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}

a:hover,
a:focus {
    text-decoration: none;
}

img {
    max-width: 100%;
}

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="password"],
input[type="number"],
textarea,
select {
    color: #788b9d;
    width: 100%;
}

::-webkit-scrollbar {
    height: 3px;
}

::-webkit-scrollbar {
    width: 3px;
}

::-webkit-scrollbar-thumb,
::-webkit-scrollbar-thumb:hover {
    background: #adadad;
}

::-webkit-scrollbar-track {
    background: #fff;
}

::placeholder {
    color: #c9d1d8;
}

.container {
    width: 1200px;
}

.forgot_btn_wrap {
    display: flex;
    grid-gap: 10px;
}

.head_navbar {
    /* height: 75px; */
    width: 100%;
    padding: 10px 0;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 10;
    transition: all .4s;
}

.head_navbar .container {
    width: 1400px;
}

.head_navbar.scrolled {
    background-color: #fff;
    box-shadow: 0 0 15px 0 rgba(62, 115, 250, .25);
}

.header_wrap {
    /* display: flex;
    align-items: center;
    justify-content: space-between; */
    display: flex;
    align-items: center;
    max-width: 1400px;
    width: 100%;
    padding: 0;
    margin: 0 auto;
    /* position: relative; */
    z-index: 2;
    gap: 20px;
}

.logo {
    max-width: 130px;
}

.navbar_ul {
    display: flex;
    flex-direction: row;
    list-style-type: none;
    padding: 0;
    margin: 0;
    align-items: center;
    flex: 1;
}

.navbar_ul li {
    padding: 0 0.35rem;
}

.navbar_ul li a {
    display: block;
    position: relative;
    color: #788b9d;
    overflow: hidden;
    font-size: 16px;
}

.navbar_ul li a.active,
.navbar_ul li a:hover {
    color: #2599f8;
}

.navbar_ul li a:after {
    content: "";
    position: absolute;
    bottom: 1px;
    left: 0;
    width: 100%;
    height: 3px;
    background-color: #2599f8;
    opacity: 0;
    transition: opacity .3s, -webkit-transform .3s;
    transition: opacity .3s, transform .3s;
    transition: opacity .3s, transform .3s, -webkit-transform .3s;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
}

.navbar_ul li a.active:after,
.navbar_ul li a:hover:after {
    opacity: 1;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}

.navbar_ul li a.head_icon img {
    width: 35px;
    margin: 0 auto 0.25rem;
}

.navbar_ul li a.head_icon {
    display: grid;
    text-align: center;
    min-width: 45px;
    line-height: 1.1;
}

.navbar_ul li .head_icon.login_btn {
    color: #fff;
    text-shadow: 1px 1px 1px #00000066;
    background: linear-gradient(135deg, #3ee9e4 0%, #2599f8 95%);
    box-shadow: 0 3px 6px 2px #2599f852;
    min-height: 33px;
    border-radius: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 25px;
    min-width: 85px;
    cursor: pointer;
}

.navbar_ul li a.head_icon.reg_btn {
    text-shadow: 1px 1px 1px #00000066;
    background: linear-gradient(135deg, #ffffff 0%, #f0f6ff 95%);
    box-shadow: 0 3px 6px 2px #4a89fc2b;
    min-height: 33px;
    border-radius: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 0px;
    min-width: 100px;
}

.navbar_ul li a.head_icon:after,
.navbar_ul li a.head_icon:hover:after {
    opacity: 0;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}

.slider_main .slider-track {
    transition: all 1s cubic-bezier(0.7, 0, 0.3, 1);
}

.slider_main .item {
    height: 100%;
    position: relative;
    z-index: 1;
}

.slider_main .item img {
    width: 100%;
    transition: all 1s cubic-bezier(0.7, 0, 0.3, 1);
    transform: scale(1.2);
}

.slider_main .slick-active .item img {
    transform: scale(1);
}

.slider_main .slick-arrow {
    position: absolute;
    z-index: 1;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    width: 100%;
    display: flex;
    justify-content: space-between;
    pointer-events: none;
}

.slider_main .slick-arrow .slick-arrow-btn {
    cursor: pointer;
    pointer-events: visible;
    opacity: .65;
    background-color: #788b9d;
    transition: all .3s ease-in-out;
    width: 35px;
    height: 70px;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
}

.slider_main .slick-arrow .slick-arrow-btn:hover {
    background-color: #2599f8;
}

.slider_main {
    position: relative;
}

.dropdown-menu-list {
    width: 100%;
    position: absolute;
    top: 0;
    -webkit-transform: translateY(-150%);
    transform: translateY(-150%);
    left: 0;
    /* background: linear-gradient(180deg, hsla(0, 0%, 100%, .95), rgba(214, 227, 246, .95)); */
    background: url(../images/header_icon/menu-bg.png) no-repeat;
    box-shadow: 0 4px 12px 0 rgba(107, 123, 168, .25);
    transition: all 1s ease-in-out;
    z-index: -1;
    overflow: hidden;
    padding: 1rem;
    background-position: bottom;
    background-size: 100% 100%;
    transition: transform 1s ease;
    max-height: 700px;
    overflow-y: scroll;
    margin-top: -10px;
}

.navbar_ul li:hover .dropdown-menu-list {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    transition: transform 1s ease;
}

.dropdown_list_expand {
    margin-top: 75px;
}

.drop-wrap {
    text-align: center;
    margin: 0 auto;
}

.header-swiper .swiper-button-next::after,
.header-swiper .swiper-button-prev::after {
    content: "";
}

.header-swiper .swiper-button-next {
    content: "";
    background-image: none;
    font-size: 28px;
    color: #d3d4d6;
    /* border: 1px solid #2599f8;
    border-radius: 50px; */
    z-index: 0;
    right: 0px;
}

.header-swiper .swiper-button-prev {
    content: "";
    background-image: none;
    font-size: 28px;
    color: #d3d4d6;
    /* border: 1px solid #2599f8;
    border-radius: 50px; */
    z-index: 0;
    left: 0px;
}

.header-swiper-container,
.header-swiper-container-1 {
    margin: 0 auto;
    position: relative;
    overflow: hidden;
    list-style: none;
    padding: 0;
    z-index: 0;
}

.swiper.header-swiper {
    position: relative;
    text-align: center;
    padding: 10px 30px;
    z-index: 0;
}

/* .header-swiper .swiper-slide{
    max-width: 30%;
} */

.header-swiper .swiper-slide:hover .dropdown-product-img {
    transition: all 300ms ease;
    transform: scale(1.05);
}

.header-swiper .swiper-slide:hover .prod-title {
    background: url(../images/dropdown/Dropdown_Select.png) no-repeat;
    background-size: 100% 100%;
    color: #fff;
}

.header_dropdown_wrap {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
}

.dropdown_product {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

.dropdown_title {
    width: 100%;
    display: flex;
    align-items: center;
    color: #788b9d;
    transition: all .3s ease-in-out;
    grid-gap: 10px;
    margin-bottom: 10px;
    justify-content: center;
}

.dropdown_title_icon {
    /* background-image: url(../images/header_icon/btn-normal.png);
    background-size: cover;
    background-repeat: no-repeat;
    padding: 0.2rem;
    box-shadow: 0px 3px 2px 0px #00000014; */
    width: 48px;
    height: 48px;
    flex: none;
    border-radius: 8px;
    background: linear-gradient(180deg, #fff, #ebedfb);
    border-bottom: 2px solid #fff;
    box-shadow: 0 5px 10px rgba(0, 0, 0, .1);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* .dropdown_product:hover .dropdown_title_icon {
    background-image: url(../images/header_icon/btn-active.png);
}

.dropdown_product:hover .dropdown_title_icon img {
    filter: brightness(10.5);
} */

.dropdown_product .dropdown_title_icon img {
    width: 38px;
    margin: auto;
    max-width: 100%;
    filter: invert(30%);
}

.dropdown_product p {
    margin: 0;
    color: #788b9d;
    text-transform: uppercase;
    font-weight: 500;
}

.dropdown_product:hover p {
    color: #788b9d;
}

.dropdown_product img {
    max-width: 60%;
    margin: auto;
}

.nav-row {
    margin-right: 20px;
    display: flex;
    align-items: center;
    width: 360px;
    flex: none;
}

.nav-row .left {
    width: 160px;
    cursor: pointer;
}

.nav-row .img {
    transition: all .4s;
    position: relative;
    width: 100%;
}

.nav-row:hover .img {
    transform: scale(1.05);
}

.nav-row .right {
    display: flex;
    flex-direction: column;
    padding-left: 10px;
}

.nav-game-icon {
    display: flex;
    align-items: center;
}

.nav-game-icon .icon {
    width: 48px;
    height: 48px;
    flex: none;
    border-radius: 8px;
    background: linear-gradient(180deg, #fff, #ebedfb);
    border-bottom: 2px solid #fff;
    box-shadow: 0 5px 10px rgba(0, 0, 0, .1);
    display: flex;
    align-items: center;
    justify-content: center;
}

.nav-game-icon .icon img {
    width: 80%;
    filter: invert(30%);
}

.nav-game-icon .text {
    margin-left: 10px;
}

.nav-game-icon .text span {
    font-size: 16px;
    font-weight: 700;
    white-space: nowrap;
}

.nav-game-icon .text p {
    font-size: 12px;
    white-space: nowrap;
}

.nav-row .right .link {
    margin-top: 16px;
}

.nav-row .right .link .btn-blue {
    /* height: 36px;
    width: 110px; */
    padding: 10px;
    color: #fff;
}

.btn-blue {
    border: none;
    background: url(../images/index/btn-blue.png) no-repeat 50%;
    background-size: 100% 100%;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 140px;
    /* height: 40px; */
    box-shadow: 0 2px 4px rgba(93, 167, 235, .8);
    border-radius: 20px;
    font-size: 16px;
    cursor: pointer;
}

.navbar_ul li a.btn-blue:after {
    background: transparent;
}

.login_li_wrap {
    position: relative;
}

.login_f_wrap {
    position: absolute;
    top: 48px;
    z-index: 9;
    right: 0;
}

.login_f_wrapping {
    width: 300px;
    min-height: 50px;
    background-color: #ffffff;
    border: 1px solid #ffffff;
    border-radius: 15px;
    position: relative;
    padding: 12px;
    box-shadow: 0px 0px 5px 4px #8383830f;
}

.login_f_wrapping.top::after {
    content: '';
    height: 16px;
    width: 16px;
    position: absolute;
    background-color: #ffffff;
    top: -9px;
    right: 13%;
    border-top: #ffffff solid 1px;
    border-left: #ffffff solid 1px;
    transform: rotate(45deg);
}

.login_m_title {
    color: #fff;
    font-size: 17px;
    text-transform: uppercase;
    font-weight: 500;
    text-align: left;
}

.login_w {
    position: relative;
}

.login_input_g {
    margin: 15px 0px 15px 0;
    display: flex;
    align-items: center;
}

.login_input_g_sec {
    margin: 15px 0px 10px 0;
    display: flex;
    align-items: center;
}

input.login_input {
    background-color: #e7eff8;
    border-radius: 3px;
    border: none;
    height: 42px;
    color: #788b9d;
    padding: 0 10px;
}

.signin_btn {
    color: #fff;
    font-weight: 500;
    text-transform: uppercase;
    border: none;
    border-radius: 4px;
    width: 100%;
    height: 36px;
    margin-top: 10px;
    text-shadow: 1px 1px 1px #00000066;
    background: linear-gradient(135deg, #3ee9e4 0%, #2599f8 95%);
    box-shadow: 0 3px 6px 2px #2599f852;
}

.signin_btn a {
    color: #fff !Important;
    font-size: 14px !important;
}

.signin_btn:hover a {
    color: #fff;
}

.login_f_wrap {
    display: none;
}

.login_input_g_user {
    color: #fff;
    background-color: #ffa96e;
    height: 42px;
    min-width: 42px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.forgot-link {
    text-align: center;
}

.navbar_ul li .forgot-link a {
    margin-top: 10px;
}

.navbar_ul li .forgot-link a:after,
.navbar_ul li .signin_btn a:after {
    content: unset;
}

.slider_main .slick-dots li button {
    position: relative;
    border-radius: 50%;
    background-color: #fff;
    box-shadow: 0 3px 5px rgba(107, 123, 168, .25);
    width: 1.25rem;
    height: 1.25rem;
}

.slider_main .slick-dots li button:before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    width: 0.75rem;
    height: 0.75rem;
    color: transparent;
    background-color: initial;
    border-radius: 50%;
    opacity: 1;
}

.slider_main .slick-dots li.slick-active button:before {
    background-color: #2599f8;
    color: #2599f8;
}

.slider_main .slick-dots li.slick-active button {
    border: 1px solid #2599f8;
}

.slider_main .slick-dots {
    bottom: 6px;
}

.marquee_bg {
    display: flex;
    align-items: center;
    height: 40px;
    border-radius: 20px;
    border: 1px solid #d1d5f5;
    padding: 0 10px 0 18px;
    background: linear-gradient(180deg, #fff, #e7f0ff);
    box-shadow: 0 4px 8px rgba(136, 149, 205, .2), inset 0 0 12px hsla(0, 0%, 100%, .72);
    margin-top: 31px;
}

.marquee_icon {
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 60px;
    height: 35px;
    border-radius: 100px;
    font-size: 18px;
}

marquee {
    cursor: pointer;
    margin: 0 0.75rem;
    display: flex;
    color: #788b9d;
}

.btn_more_marquee {
    position: relative;
    border: none;
    background-color: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 75px;
    height: 26px;
    line-height: 26px;
    margin-left: 10px;
    font-size: 14px;
    text-align: center;
    border: 1px solid #2599f8;
    border-radius: 13px;
    cursor: pointer;
    transition: all .2s;
}

.btn_more_marquee p {
    margin: 0;
    position: absolute;
    color: #2599f8;
}

.btn_more_marquee:hover {
    background-color: #2599f8;
}

.btn_more_marquee:hover p {
    color: #fff;
}

.btn_more_marquee img {
    max-width: 100px;
}

.home-ad-img {
    text-align: center;
    margin-top: 36px;
    cursor: pointer;
}

.home-ad-img img {
    transition: all .4s;
}

.home-ad-img img:hover {
    transition: all 300ms ease;
    transform: scale(1.05);
}

.section-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 3rem;
    padding-top: 4%;
}

.section-header h2 {
    color: #ff8633;
    font-size: 2.25rem;
    font-weight: 600;
    text-transform: uppercase;
    text-shadow: rgba(74, 137, 252, .2) 0 3px 6px;
}

.section-header p {
    color: #788b9d;
    font-size: 1.125rem;
    text-align: center;
    padding: 0 6rem;
    margin: 0;
}

.home-load-flex {
    display: flex;
    align-items: center;
}

.home-load-flex .flex-left {
    flex: 1;
}

.home-load-flex .flex-left .img {
    width: 115%;
    margin-left: -15%;
}

.home-load-flex .flex-right {
    background: url(../images/index/load/home-load-bg.png) no-repeat;
    background-size: 100% 100%;
    width: 456px;
    height: 580px;
    box-shadow: 0 6px 20px 3px rgba(201, 211, 237, .5);
    border-radius: 24px;
    flex: none;
    padding: 36px 24px;
}

.home-load-flex .flex-right .load-tab ul {
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: transparent;
}

.home-load-flex .flex-right .load-tab li {
    width: 132px;
    height: 44px;
    background: url(../images/index/load/load-btn.png) no-repeat;
    background-size: 100% 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #788b9d;
    font-size: 16px;
    cursor: pointer;
    margin: 0 10px;
}

.home-load-flex .flex-right .load-tab li.active {
    color: #fff;
    background: url(../images/index/load/load-btn-h.png) no-repeat;
    background-size: 100% 100%;
}

.home-load-flex .flex-right .load-sec strong {
    font-size: 40px;
    margin-top: 32px;
    display: block;
}

.home-load-flex .flex-right .load-sec p {
    line-height: 28px;
    font-size: 18px;
    margin-top: 12px;
    text-align: justify;
}

.home-load-flex .flex-right .load-add {
    display: flex;
    align-items: center;
    padding: 24px 10px 0;
}

.home-load-flex .flex-right .load-add-code,
.home-load-flex .flex-right .load-add-web {
    background: #f4faff;
    border: 1px solid #fff;
    border-radius: 12px;
    padding: 23px 31px 12px;
    height: 224px;
    width: 182px;
    flex-direction: column;
    display: flex;
    align-items: center;
    justify-content: center;
}

.home-load-flex .flex-right .load-add-code .text,
.home-load-flex .flex-right .load-add-web .text {
    text-align: center;
    line-height: 22px;
}

.home-load-flex .flex-right .load-add-code .text span,
.home-load-flex .flex-right .load-add-web .text span {
    font-size: 16px;
    margin-top: 20px;
    display: block;
}

.home-load-flex .flex-right .load-add-code .text p,
.home-load-flex .flex-right .load-add-web .text p {
    font-size: 12px;
    margin-top: 2px;
    white-space: nowrap;
}

.home-load-flex .flex-right .load-add-web {
    margin-left: 22px;
}

.home-load-flex .flex-right .load-add-web .add {
    width: 120px;
    height: 120px;
}

.home-load-flex .flex-right .load-add-web .add a {
    color: #2599f8;
    word-wrap: break-word;
}

.home-live-tab .live-row,
.home-live-tab {
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: transparent;
}

.home-live-tab .live-row {
    width: 120px;
    height: 40px;
    background: url(../images/index/live/live-btn.png) no-repeat;
    background-size: 100% 100%;
    font-size: 16px;
    color: #788b9d;
    box-shadow: 0 4px 8px rgba(184, 208, 255, 0.3);
    border-radius: 30px;
    margin: 0 8px;
    cursor: pointer;
}

.home-live-tab .live-row.active {
    background: url(../images/index/live/live-btn-h.png) no-repeat;
    background-size: 100% 100%;
    color: #fff;
}

.live-view {
    position: relative;
    display: flex;
    justify-content: end;
}

.live-view-img {
    width: 50%;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-42%);
    z-index: 3;
}

.live-view-img img {
    width: 700px;
    /* height: 590px; */
}

.live-view-sec {
    width: 700px;
    min-height: 454px;
    position: relative;
    margin-top: 35px;
    background-color: none;
    border: none;
    box-shadow: 0 6px 20px 3px rgba(201, 211, 237, 0.5);
    background: url(../images/index/view/view-bg.png) no-repeat 50%/100%;
    background-size: 100% 100%;
    border-radius: 24px;
    z-index: 2;
    padding-left: 180px;
    padding-top: 60px;
    padding-bottom: 30px;
}

.live-view-sec .title {
    height: 116px;
}

.live-view-sec p {
    padding-right: 2rem;
    text-align: justify;
    /* min-height: 72px; */
    margin-top: 11px;
    line-height: 1.5;
    font-size: 16px;
}

.live-view-sec ul {
    display: flex;
    align-items: center;
    margin: 0;
    padding: 0;
    list-style-type: none;
    margin-top: 10px;
    flex-wrap: wrap;
}

.live-view-sec ul li {
    margin: 0 12px 8px 0;
}

.live-view-sec ul li .icon {
    width: 58px;
    height: 58px;
    margin: 0 4px;
    border-radius: 12px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background-image: linear-gradient(180deg, #fff, #e8ebfa);
    box-shadow: 0 4px 8px 0 rgba(112, 146, 215, 0.14);
    border-bottom: 3px solid #fff;
    cursor: pointer;
}

.live-view-sec ul li .icon:hover {
    background-image: linear-gradient(180deg, #93edfc, #468cf7);
    border-bottom: 1px solid #468cf7;
}

.live-view-sec ul li .icon:hover .mr {
    display: none;
}

.live-view-sec ul li .icon:hover .xz {
    display: block;
}

.live-view-sec ul li .icon img {
    width: 80%;
}

.live-view-sec ul li .icon img.mr {
    filter: invert(30%);
}

.live-view-sec ul li .icon .xz {
    display: none;
}

.live-view-sec ul li span {
    display: block;
    text-align: center;
    margin-top: 6px;
}

.content_section {
    margin: 100px 0 0 0;
}

.slider_product_main {
    position: relative;
    z-index: 1;
    margin-bottom: 90px;
}

.stage_bg {
    z-index: -1;
    position: absolute;
    bottom: -6%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.slider_product_main .slider {
    height: 300px;
}

.slider_product_main .slider.slider-for {
    height: 180px;
    padding-top: 65px;
}

.slider_product_main .slider2.slider-nav02 {
    padding: 5px 5px;
    width: 100%;
    background: linear-gradient(to bottom, #ffffff 0%, #ebf0ff 60%, #ffffff 100%);
    border-radius: 50px;
    box-shadow: 0 0 2px inset white;
    filter: drop-shadow(0 4px 0 #ebf0ff) drop-shadow(0 5px 6px #788b9d55);
}

.slider_product_main .slider2.slider-nav02 .slick-list {
    width: 100%;
}

.slider_product_main .slider2.slider-single02 .slick-slide img {
    width: 210px;
    cursor: pointer;
    padding-top: 40px;
}

.slider_product_main .slider2.slider-single02 img.img_main {
    opacity: 0.6;
    transition: all 300ms ease;
    transform: scale(1.3);
    -moz-transform: scale(1.3);
    -ms-transform: scale(1.3);
    -o-transform: scale(1.3);
    -webkit-transform: scale(1.5);
}

.slider_product_main .slider2.slider-single02 .slick-center img.img_main {
    opacity: 1;
    transform: scale(1.6);
    -moz-transform: scale(1.6);
    -ms-transform: scale(1.6);
    -o-transform: scale(1.6);
    -webkit-transform: scale(2.4);
}

.slider_product_main .slider.slider-for .slick-slide .game_products_inner:hover img.img_hover_product {
    display: block;
    filter: hue-rotate(-9deg);
}

.game_wrap {
    width: 100%;
    display: flex;
    justify-content: center;
}

.game_wrap .game_products_inner {
    width: 190px;
    background-color: #126e51;
    margin: 0 10px;
    border-radius: 42px;
    height: 57px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 7px;
}

.slider_product_main .slider2.slider-single02 .slick-slide {
    min-height: 500px;
    margin: 0px 20px;
    text-align: -webkit-center;
    /* height: 100%; */
}

.slider_product_main .slider2.slider-nav02 .slick-slide {
    cursor: pointer;
    /* float: left; */
    display: flex;
    height: 100%;
    min-height: 1px;
    padding-top: 0px;
    margin: auto;
    justify-content: center;
}

.slider_product_main .slider2.slider-nav02 .slick-slide .game_tab {
    min-width: 86px;
    /* opacity: 0; */
    display: flex;
    justify-content: center;
    margin: 0 4px;
    width: 100%;
    padding: 0 10px;
}

.slider_product_main .slider2.slider-nav02 .slick-slide.slick-current .game_tab,
.slider_product_main .slider2.slider-nav02 .slick-slide:hover .game_tab {
    opacity: 1;
    /* filter: drop-shadow(0px 3px 3px #af9772); */
    background-image: url(../images/index/btn-more.png);
    border-radius: 35px;
}

.slider_product_main .slider2.slider-nav02 .slick-slide.slick-current .game_tab,
.slider_product_main .slider2.slider-nav02 .slick-slide:hover .game_tab .game_tab_info {
    color: #ffffff;
    /* text-shadow: 0px 4px 4px #907c5d; */
}

.slider_product_main .slider2.slider-nav02 .slick-slide .game_tab .game_tab_info .img_slide_icon {
    display: block;
}

.slider_product_main .slider2.slider-nav02 .slick-slide .game_tab .game_tab_info .img_slide_icon_hover {
    display: none;
}

.slider_product_main .slider2.slider-nav02 .slick-slide.slick-current .game_tab .game_tab_info .img_slide_icon_hover {
    display: block;
}

.slider_product_main .slider2.slider-nav02 .slick-slide.slick-current .game_tab .game_tab_info .img_slide_icon {
    display: none;
}

.slider_product_main .slider2.slider-nav02 .slick-slide:hover .game_tab .game_tab_info .img_slide_icon_hover {
    display: block;
}

.slider_product_main .slider2.slider-nav02 .slick-slide:hover .game_tab .game_tab_info .img_slide_icon {
    display: none;
}

.slider_product_main .slider2.slider-nav02 .slick-slide.slick-current .game_tab .game_tab_info {
    color: #ffffff;
    /* text-shadow: 0px 4px 4px #907c5d; */
}

.slider_product_main .slider2.slider-single02 .slick-slide[aria-hidden="true"]:not(.slick-cloned)~.slick-cloned[aria-hidden="true"] {}

.slider_product_main .slider2.slider-single02 .slick-slide[aria-hidden="true"]:not([tabindex="-1"])+.slick-cloned[aria-hidden="true"] img.img_main {
    opacity: 1;
    transform: scale(1.3);
    -moz-transform: scale(1.3);
    -ms-transform: scale(1.3);
    -o-transform: scale(1.3);
    -webkit-transform: scale(1.3);
    transition: all 300ms ease;
}

.slider-nav02 .slick-track {
    transform: translate3d(0, 0, 0) !important;
}

.slider_product_main .slider2.slider-single02 .index_product_wrap {
    background: url(../images/index/product.png)no-repeat top center;
    background-size: cover;
    /* overflow: hidden; */
    width: 243px;
    height: 299px;
    border-radius: 12px;
    width: 17.75rem;
    height: 17.6875rem;
    margin-top: 3rem;
}

.slider_product_main .slider2.slider-single02 .slick-center .index_product_wrap {
    overflow: visible;
}

.game_tab_info {
    display: flex;
    bottom: 0;
    justify-content: center;
    justify-items: center;
    text-align: center;
    align-items: center;
    padding: 3px 0px;
    font-size: 11px;
    font-weight: 700;
    color: #425878;
    text-transform: uppercase;
    margin: 3px 0;
    width: 100%;
}

.slider2 {
    margin: 30px auto 30px auto;
}

.control-c {
    width: 34px !important;
    height: 68px !important;
}

.slider_product_main .slick-arrow {
    position: absolute;
    z-index: 1;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    width: 100%;
    display: flex;
    justify-content: space-between;
    pointer-events: none;
}

.slider_product_main .slick-arrow .slick-arrow-btn {
    cursor: pointer;
    pointer-events: visible;
    opacity: .65;
    background-color: #2599f8;
    transition: all .3s ease-in-out;
    width: 45px;
    height: 87px;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 10px 0 0 10px;
}

.slider_product_main .slick-arrow .slick-arrow-btn i {
    font-size: 30px;
}

.slider_product_main .slick-arrow .slick-arrow-btn.rightp {
    border-radius: 0 10px 10px 0;
}

.slider_product_main .slick-arrow {
    position: absolute;
    z-index: 1;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    width: 100%;
    display: flex;
    justify-content: space-between;
    pointer-events: none;
}

.section_whoweare {
    position: relative;
    margin-bottom: 140px;
}

.section_whoweare_box {
    background-image: url(../images/general-bg.jpg);
    background-size: cover;
    border-radius: 20px;
    box-shadow: 0 0 3px 3px #fff inset;
    filter: drop-shadow(0 5px 0 #ebf0ff) drop-shadow(0 5px 6px #788b9d55);
    width: 100%;
    height: 30rem;
    display: flex;
    justify-content: end;
    align-items: center;
    position: relative;
    margin-left: auto;
    padding: 1rem;
}

.section_whoweare_content {
    max-width: 58%;
    /* height: 74%; */
}

.section_whoweare_content h2 {
    color: #ff8633;
    font-weight: 600;
    text-shadow: rgba(74, 137, 252, .2) 0 3px 6px;
    /* white-space: break-spaces; */
    margin-bottom: 1rem;
    font-size: 1.75rem;
}

.section_whoweare_content p {
    max-height: 85%;
    color: #788b9d;
    overflow: auto;
    padding-bottom: 1rem;
    padding-right: 1rem;
}

.section_whoweare_img {
    position: absolute;
    left: -12%;
    top: 0;
    z-index: 1;
}

.section_whoweare_img img {
    width: 90%;
}

.gauge-container {
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    left: 50%;
    width: 164px;
    height: 150px;
    display: block;
    padding: 10px;
    top: 0;
}

.gauge-col .col-3 .gauge-wrapper {
    position: relative;
    width: 100%;
    margin: 0 auto 1rem;
    text-align: center;
}

.lazy-load-image-background.blur {
    -webkit-filter: blur(15px);
    filter: blur(15px);
}

.lazy-load-image-background.blur.lazy-load-image-loaded {
    -webkit-filter: blur(0);
    filter: blur(0);
    transition: -webkit-filter .3s;
    transition: filter .3s;
    transition: filter .3s, -webkit-filter .3s;
}

.gauge-col .col-3 .gauge-wrapper .gauge-content {
    position: absolute;
    width: 125px;
    height: 125px;
    top: 13.5%;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
}

.gauge-col .col-3 .gauge-wrapper .gauge-content .gauge-body {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 70%;
    position: absolute;
    left: 50%;
    top: 52.5%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

.gauge-col .col-3 .gauge-wrapper .gauge-content .gauge-body p {
    font-size: 0.5rem;
    white-space: nowrap;
    margin-bottom: 0;
    color: #788b9d;
    font-weight: 700;
}

.gauge-col .col-3 .h5,
.gauge-col .col-3 h5 {
    font-size: .875rem;
    color: #788b9d;
    text-align: center;
}

.service-section-content {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-image: url(../images/index/serv.png);
    background-position: bottom;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    padding: 0.75rem 1.25rem;
}

.service-section-content .h4,
.service-section-content h4 {
    color: #788b9d;
    margin: 1rem 0;
}

.service-section-content p {
    height: 100%;
    text-align: center;
    color: #788b9d;
    padding: 0 1rem 1rem;
    overflow: auto;
}

.section_service02 {
    padding-bottom: 100px;
}

.footer_main {
    background: #30383f;
    color: #878ea6;
}

.footer_ul_link {
    flex-direction: row;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    list-style: none;
    padding: 0;
    display: flex;
    padding: 18px 0;
}

.footer_ul_link li {
    margin: 0 10px;
}

.footer_ul_link span {
    width: 2px;
    height: 15px;
    background-color: #d6e2f3;
}

.footer_ul_link li a {
    color: #c0c4d0;
    text-transform: uppercase;
    font-size: 15px;
}

.footer_ul_link li a:hover {
    color: #2599f8;
}

.f_providerhead {
    color: #788b9d;
    text-align: center;
}

.f_provider {
    border-top: 1px solid rgba(113, 128, 153, .2);
    ;
    padding: 20px 0 0px;
    text-align: center;
}

.footer_btm {
    background-color: #30383f;
    color: #7c8797;
    padding: 0px 0 10px;
    text-align: center;
}

.f_lic {
    padding: 18px 0;
    text-align: center;
}

ul.link-list {
    list-style: none;
    padding: 10px 0px;
    margin: 0px;
    gap: 10px;
}

.link-list {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px 0;
    position: relative;
    flex-wrap: wrap;
}

.link-list li:hover .mr {
    display: none
}

.link-list li:hover .move {
    display: block
}

.link-list img {
    max-width: 85px;
}

.link-list img.move {
    display: none
}

.rz-list {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px 0 0px;
    margin: 0px;
}

.rz-list li {
    margin: 0 60px;
    cursor: pointer;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
}

.rz-list li:hover p,
.rz-list li:hover {
    color: #fff
}

.rz-list li span {
    width: 165px;
    height: 34px;
    display: block;
    background: url(../images/footer/license.png) no-repeat;
    background-size: 958px 41px;
    background-position: 0 0;
}

.rz-list li:hover span {
    background-position: -167px 0
}

.rz-list li:nth-child(2) span {
    width: 171px;
    height: 41px;
    background-position: -334px 0;
}

.rz-list li:nth-child(2):hover span {
    background-position: -507px 0
}

.rz-list li:nth-child(3) span {
    width: 138px;
    height: 41px;
    background-position: -680px 0;
}

.rz-list li:nth-child(3):hover span {
    background-position: -820px 0
}

.rz-list li p {
    font-size: 14px;
    color: #878ea6;
    margin-top: 8px;
}


.right_fixed_btn {
    position: fixed;
    min-height: 40%;
    max-width: 6rem;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    z-index: 10;
    bottom: 0;
    right: 0;
    pointer-events: none;
}

.right_fixed_btn a {
    background: linear-gradient(180deg, #fff, #f0f6ff);
    box-shadow: 0 3px 5px rgba(107, 123, 168, .25);
    display: block;
    pointer-events: auto;
    /* height: 5rem; */
    width: 6rem;
    padding: 0.75rem;
    margin-left: auto;
    margin-bottom: 1rem;
    border-radius: 10px;
    border-top-right-radius: unset;
    border-bottom-right-radius: unset;
    text-align: center;
}

.right_fixed_btn p {
    color: #788b9d;
    font-size: 11px;
    margin: 0;
    margin-top: 10px;
}

.sports_bg {
    background-image: url(../images/bg/bg-sports.jpg);
    background-repeat: no-repeat;
    background-size: cover;
}

.productpage_grid {
    display: grid;
    grid-template-columns: 40% 59%;
    padding-top: 12%;
    padding-bottom: 10%;
    justify-content: space-between;
    align-items: center;
}

.tabcontentproduct {
    display: none;
}

.product_content {
    color: #788b9d;
    margin: 20px 0;
}

.product_logo_icon {
    border-radius: 12px;
    background: linear-gradient(180deg, #fff, #ebedfb);
    border-bottom: 4px solid #fff;
    box-shadow: 0 5px 10px rgba(0, 0, 0, .1);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0px 10px 8px;
    padding: 5px 10px;
}

.product_img_icon img {
    max-height: 80px;
}

.tablinksproduct.active .product_logo_icon {
    background-image: linear-gradient(180deg, #93edfc, #468cf7);
    border-bottom: 7px solid #468cf7;
}

.tablinksproduct.active .product_logo_icon img {
    filter: brightness(10.5);
    opacity: 1;
}

.product_logo_icon img {
    max-width: 70px;
    filter: brightness(0.5);
    opacity: 0.2;
}

.prod-logo-name {
    text-align: center;
    font-size: 16px;
    color: #788b9d;
}

.tablinksproduct {
    border: none;
    background-color: transparent;
    padding: 0;
}

.btn_enter {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    border: none;
    background-color: transparent;
}

.btn_enter p {
    margin: 0;
    position: absolute;
    color: #fff;
    font-size: 20px;
    font-weight: 500;
    text-shadow: 1px 1px #8b8b8b;
    /* margin-top: -10px; */
}

.tabproduct {
    margin: 25px 0 25px 0;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-gap: 15px;
}

/* .product_img_title img {
    width: 300px;
} */

.home-service-list {
    margin-top: 24px;
    position: relative;
    padding-bottom: 64px;
}

.home-service-list .container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.home-service-list .row {
    position: relative;
    width: 540px;
    height: 140px;
    border-radius: 24px;
    background: url(../images/index/service-bg.png) no-repeat 50% / 100%;
    padding: 24px 24px 0 120px;
    margin-top: 24px;
    box-shadow: 0 10px 20px 0 rgba(205, 210, 221, .6);
}

.home-service-list .row img {
    position: absolute;
    width: 88px;
    top: 50%;
    left: 24px;
    transform: translateY(-50%);
}

.home-service-list .row span {
    font-weight: 500;
    font-size: 18px;
    color: #30383f;
    line-height: 25px;
}

.home-service-list .row p {
    font-weight: 400;
    line-height: 22px;
    margin-top: 6px;
    font-size: 16px;
    color: #788b9d;
}

/*casino*/
.casino_bg {
    background-image: url(../images/bg/bg-casino.jpg);
    background-repeat: no-repeat;
    background-size: cover;
}

/*esport*/
.esport_bg {
    background-image: url(../images/bg/bg-esports.jpg);
    background-repeat: no-repeat;
    background-size: cover;
}

/*games*/
.games_bg {
    background-image: url(../images/bg/bg-esports.jpg);
    background-repeat: no-repeat;
    background-size: cover;
}

.slots_bg_banner {
    background-image: url(../images/bg/banner-slots.jpg);
    background-repeat: no-repeat;
    /* background-size: cover; */
    max-height: 800px;
    min-height: 800px;
    background-position: top center;
    position: relative;
}

.fish_bg {
    background-image: url(../images/bg/bg-fishing.jpg);
    background-repeat: no-repeat;
    background-size: cover;
}

.flip_number {
    position: absolute;
    z-index: 10;
    bottom: 25%;
    left: 51%;
    -webkit-transform: translate(-50%);
    transform: translate(-50%);
}

.flip_number_img {
    position: absolute;
    width: auto;
    height: auto;
    bottom: 14%;
    left: 52%;
    -webkit-transform: translate(-50%);
    transform: translate(-50%);
}

.flip_wrap {
    display: flex;
    align-items: center;
    justify-content: center;
}

.flip_wrap span {
    width: 40px;
    height: 70px;
    perspective: 500px;
    overflow: hidden;
    display: inline-block;
    text-align: left;
    background-image: url(../images/product/slots/jp-num.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: 50%;
    font-size: 37px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #788b9d;
    font-weight: 500;
    margin: 0 2px;
}

.flip_wrap span.span_custom {
    background-image: none;
    color: #fff;
    width: 20px;
}

.slots_bg {
    background-color: #f0f6ff;
}

.slot_product_bg {
    background-color: #fff;
    box-shadow: 0px 0px 3px 3px #0000000a;
    padding: 25px;
    margin: 30px 0;
    border-radius: 15px;
}

.slot_product_icon_wrap {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    grid-gap: 15px;
}

.slot_product_box {
    background-image: url(../images/product/slots/prov-bgnormal.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    padding: 0.2rem;
    /* box-shadow: 0px 3px 2px 0px #00000014; */
    display: grid;
    align-items: center;
    grid-template-columns: 25% 75%;
    width: 100%;
    height: 53px;
    cursor: pointer;
    grid-gap: 5px;
    padding: 0 10px;
    text-align: center;
    justify-content: center;
}

.slot_product_box:hover,
.slot_product_box.active {
    background-image: url(../images/product/slots/prov-bgactive.png);
}

.slot_product_box img {
    margin: auto;
}

.slot_product_box:hover img,
.slot_product_box.active img {
    filter: brightness(10.5);
}

.slot_product_box:hover .slot_product_txt,
.slot_product_box.active .slot_product_txt {
    color: #fff;
}

.slot_product_txt {
    color: #788b9d;
    text-transform: uppercase;
    line-height: 1.1;
    font-weight: 600;
    font-size: 12px;
}

.slot_product_games_wrap {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-gap: 15px;
    margin: 25px 0 0 0;
}

.slot_product_games_title {
    color: #788b9d;
    font-weight: 600;
    font-size: 12px;
    padding: 10px;
}

.slot_product_games_box {
    border: 1px solid #2599f8;
    border-radius: 13px;
    overflow: hidden;
    cursor: pointer;
}

.mobiledw_bg {
    padding: 10% 0 5% 0;
}

.section_downloadapp_box {
    background-image: url(../images/general-bg.jpg);
    background-size: cover;
    border-radius: 20px;
    box-shadow: 0 0 3px 3px #fff inset;
    filter: drop-shadow(0 5px 0 #ebf0ff) drop-shadow(0 5px 6px #788b9d55);
    width: 100%;
    height: 30rem;
    display: flex;
    justify-content: end;
    /* align-items: center; */
    position: relative;
    margin-left: auto;
    padding: 2rem 1rem 1rem 1rem;
}

.section_downloadapp_img {
    position: absolute;
    left: -6%;
    top: -4%;
    z-index: 1;
}

.section_downloadapp_img img {
    width: 90%;
}

.section_downloadapp_content {
    max-width: 58%;
    width: 50%;
}

.section_downloadapp_content h2 {
    color: #ff8633;
    font-size: 2.25rem;
    font-weight: 600;
    text-transform: uppercase;
    text-shadow: rgba(74, 137, 252, .2) 0 3px 6px;
}

.section_downloadapp_content p {
    color: #788b9d;
    font-size: 1.125rem;
    /* padding: 0 6rem; */
    margin: 0;
    text-align: left;
}

.section_qr_wrap {
    display: flex;
    justify-content: left;
    margin: 25px 0 0 0;
    grid-gap: 30px;
}

.section_qr_img {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    /* height: 11.25rem; */
    border-radius: 5%;
    background-color: #fff;
    box-shadow: 0 4px 12px 0 rgba(107, 123, 168, .25);
    margin: auto;
    margin-bottom: 20px;
    padding: 15px;
}

.section_btn {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.section_btn .section_btn_content {
    position: absolute;
    display: flex;
    align-items: center;
    grid-gap: 10px;
    color: #788b9d;
}

.section_qr_img img {
    width: 100%;
}

.section_downloadgames_box {
    background: linear-gradient(90deg, #828ea1 0%, #32353a 100%);
    background-size: cover;
    border-radius: 20px;
    /* box-shadow: 0 0 3px 3px #fff inset; */
    /* filter: drop-shadow(0 5px 0 #ebf0ff) drop-shadow(0 5px 6px #788b9d55); */
    width: 90%;
    /* height: 30rem; */
    /*    display: flex;*/
    /*    justify-content: end;*/
    /* align-items: center; */
    position: relative;
    margin-left: auto;
    padding: 2rem 1rem 2rem 1rem;
    box-shadow: 0px 0px 3px 4px #0000001a;
    margin-top: 130px;
}

.section_downloadgames_box_grip {
    display: grid;
    grid-template-columns: 45% 55%;
    align-items: center;
}

.section_downloadgames_box_grip .tab_dw {
    display: none;
}

.section_downloadgames_box_grip .tab-active {
    display: block;
}

.tab-menu {
    position: absolute;
    left: -16%;
    top: 16%;
}

.tab-menu ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    background-image: url(../images/mobile/menu.png);
    background-size: 100% 100%;
    min-height: 320px;
    background-repeat: no-repeat;
    width: 210px;
    filter: drop-shadow(0 1px 0 #ebf0ff) drop-shadow(0 3px 6px #788b9d55);
    height: 100%;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    grid-gap: 10px;
}

.tab-menu ul li a {
    color: #788b9d;
    font-size: 15px;
    font-weight: 600;
    display: flex;
    width: 100%;
    text-align: center;
    padding: 11px;
    align-items: center;
}

.tab-menu ul li a.active-a,
.tab-menu ul li a:hover {
    background-image: url(../images/index/btn-more.png);
    background-size: contain;
    color: #fff;
    background-repeat: no-repeat;
    background-position: center;
}

.section_downloadgames_box_img {
    z-index: 1;
}

.section_downloadgames_box_content h2 {
    color: #ff8633;
    font-size: 2.25rem;
    font-weight: 600;
    text-transform: uppercase;
    text-shadow: rgba(74, 137, 252, .2) 0 3px 6px;
}

.section_downloadgames_box_content .section_qr_img {
    width: 85%;
}

.section_downloadgames_box_content .section_qr_wrap {
    display: flex;
    justify-content: left;
    margin: 10px 0 0 0;
    grid-gap: 30px;
}

.dl {
    margin: 15px 0 0 0;
}

.dl table {
    width: 100%;
}

.dl table th {
    background: linear-gradient(180deg, #ffd3b5 0%, #ffa567 50%, #ffd3b5 100%);
    padding: 0.5rem;
}

.dl table tr {
    border: 1px solid #000;
}

.dl table tr td {
    background: #212121;
    color: #fdbd2a;
    padding: 0.5rem;
}

.dl table tr td:first-child {
    color: #788b9d;
}

/*wheel*/
.wheel_bg {
    background-image: url(../images/wheel/fw-bg.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: top center;
    min-height: 900px;
}

.fortune_btn_wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    grid-gap: 10px;
}

.token_wrap {
    background-color: #fff;
    color: #ff8633;
    border-radius: 40px;
    width: 70px;
    height: 70px;
    display: block;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-size: 16px;
    padding: 13px;
    /* border: 1px solid #caa23f; */
    font-weight: 700;
    box-shadow: 0px 0px 3px 2px #00000017;
}

.token_wrap span {
    display: block;
    line-height: 1.2;
    /* align-items: center; */
    /* justify-content: center; */
}

.fortune_btn_wrap button {
    background: transparent;
    border: none;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.fortune_btn_wrap button:focus {
    outline: unset
}

.fortune_btn_wrap button img {
    /* height: 45px; */
    filter: drop-shadow(0px 2px 3px #fff);
}

.fortune_btn_wrap button .spinbtn_txt {
    position: absolute;
    font-weight: 700;
    color: white;
    font-size: 22px;
    text-shadow: -1px 1px 0 #00000047, 1px 1px 0 #00000054, 1px -1px 0 #0003, -1px -1px 0 #0000002b;
    z-index: 1;
}

.fortune_btn_wrap button .spinbtn_txt2 {
    color: #788b9d;
    font-size: 19px;
    background: #fff;
    border-radius: 34px;
    font-weight: 600;
    padding: 10px 20px;
    height: 57px;
    width: 90px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.fortune_wrap {
    height: 100%;
    min-height: 781px;
    display: flex;
    align-items: end;
    justify-content: center;
}

.modal-dialog.promo {
    max-width: 800px !important;
    border-radius: 20px;
}

.modal-content.promo {
    border: none;
    background: #191b1e;
    border-radius: 20px;
    /* border: 1px solid #d9353d; */
}

button.close-promo {
    background: none;
    border: none;
    font-size: 25px;
    padding: 11px;
    line-height: 1.4;
    font-weight: 600;
    position: absolute;
    right: 0;
    top: 0;
    color: #ffffff;
}

.grlist {
    color: var(--text-color);
}

.pm-title-wrapper {
    font-size: 21px;
    font-weight: 700;
    background: #179cff;
    color: #ffffff;
    padding: 10px 20px;
    border-radius: 20px 20px 0px 0px;
}

.pmtable-wrapper {}

table.promo-table tr th {
    color: #fff;
    background: #d9353d;
    padding: 4px;
    text-align: center;
    border: 1px solid var(--text-color);
}

table.promo-table tr td {
    border: 1px solid var(--text-color);
    padding: 5px;
    color: var(--text-color);
    text-align: center;
}

.gr-title {
    margin-top: 20px;
    font-weight: 700;
    font-size: 16px;
    color: #d9353d;
}

.grlist ul {
    padding-left: 20px;
    margin-top: 5px;
}

.grlist ul li {
    padding-bottom: 8px;
    font-size: 14px;
    list-style: disc;
}

.promo-pop-cont {
    padding: 15px;
    border: 1px solid #d9353d;
    border-radius: 0px 0px 20px 20px;
}

.promo-nav button {
    background: #1e2024;
    padding: 10px 30px;
    color: #fff;
    border-radius: 20px;
}

.promo-modal-tnc {
    font-size: 14px;
    color: #788b9d;
    list-style: disc;
    padding: 0;
    margin: 0;
    padding-left: 17px;
}

.promo-modal-tnc li span {
    color: orangered;
    margin-right: 10px;

}

.promo_table tr th {
    background: #2599f8;
    padding: 10px;
    border: 1px solid #000;
    text-align: center;
    font-size: 12px;
    color: #fff;
}

.promo_table tr td {
    font-size: 12px;
    color: #000;
    padding: 10px;
    border: 1px solid #000;
    background: #d7d7d7;
    text-align: center;
}

.basic-text {
    font-size: 12px;
    color: #788b9d;
}

.promo_table {
    width: 100%;
}

.promo-text {
    padding: 20px;
    background-color: #fff;
    border-radius: 0px 0px 10px 10px;
}

.red-underline {
    margin: 10px 0 0 0;
}

.promo_bg_banner {
    background-image: url(../images/bg/banner-promotion.jpg);
    background-repeat: no-repeat;
    /* background-size: cover; */
    max-height: 800px;
    min-height: 800px;
    background-position: top center;
    position: relative;
}

.promo_wrap {
    display: grid;
    grid-template-columns: 200px auto;
    padding: 40px 0;
}

.promo_menu {
    /* list-style-type: none;
    margin: 0;
    padding: 0;
    background-image: url(../images/mobile/menu.png);
    background-size: 100% 100%;
    min-height: 320px;
    background-repeat: no-repeat;
    width: 250px;
    filter: drop-shadow(0 1px 0 #ebf0ff) drop-shadow(0 3px 6px #788b9d55);
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    grid-gap: 10px;
    padding: 2rem;
    max-height: 500px; */
    border-radius: 10px;
    background-color: #fff;
    box-shadow: 0 2px 15px hsla(30, 77%, 91%, .5);
    padding: 40px 0 19px;
    height: 580px;
    background-color: #f0f6ff;
    box-shadow: 0 6px 10px #d6dff4;
    border: 1px solid #fff;
}

.promo_menu .filter {
    /* color: #788b9d;
    font-size: 15px;
    font-weight: 600;
    display: flex;
    width: 100%;
    text-align: center;
    padding: 11px;
    align-items: center;
    cursor: pointer; */
    width: 160px;
    height: 44px;
    line-height: 44px;
    margin: 0 auto 32px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
}

.promo_menu .filter.active {
    /* background-image: url(../images/index/btn-more.png);
    background-size: 100% 100%;
    color: #fff;
    background-repeat: no-repeat;
    background-position: center; */
    background: linear-gradient(359.63deg, #1f99ff .32%, #187eef 17.57%, #00bfff 65.12%, #41ede2 97.73%);
    box-shadow: inset 0 1px 2px #129fd9, inset 0 -1px 3px rgba(62, 234, 228, .8);
    filter: drop-shadow(0 4px 4px rgba(25, 128, 241, .22));
    border-radius: 22px;
    background-repeat: no-repeat;
    background-position: 50%;
    background-size: cover;
    color: #fff;
}

.promoicon_h {
    display: none;
}

.promo_menu .filter.active .promoicon_n {
    display: none;
}

.promo_menu .filter.active .promoicon_h {
    display: block;
}

.promo_menu .filter img {
    margin-right: 10px;
    max-width: 35px;
}

.mix {
    display: none;
}

.promo_banner_boxes {
    cursor: pointer;
    border-radius: 15px;
    overflow: hidden;
    min-height: 30px;
    box-shadow: 0px 0px 0px 1px #00000012;
}

.promo_banner_boxes img {
    width: 100%;
}

.promo-boxes {

    padding-left: 20px;
}


.vip_bg_banner {
    background-image: url(../images/bg/banner-vip.jpg);
    background-repeat: no-repeat;
    /* background-size: cover; */
    max-height: 800px;
    min-height: 800px;
    background-position: top center;
    position: relative;
}

.vip-img img {
    width: 70px;
}

.vip-img {
    color: #ff8633;
    font-size: 12px;
}

.vip-img {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.vip-in-table {
    padding: 20px;
    margin-bottom: 20px;
}

.vip-all {
    /* background: #fff; */
    /* box-shadow: 0px 1px 4px 5px #ababab24; */
    margin: 35px 0 0 0;
}

.vip-all tbody {
    box-shadow: 0px 1px 4px 5px #ababab24;
}

.vip-all tr td {
    text-align: center;
    padding: 5px;
    background: #ffffff;
    border-bottom: 1px solid #d2d2d2;
}

.vip-all tr td h3 {
    text-align: left;
    color: #ffffff;
}

.vip-all tr td:first-child {
    text-align: left;
    background: #a0abc9;
    color: #fff;
    font-weight: bold;
    width: 20%;
    font-size: 12px;
}

table.vip-all tr:first-child td {
    background: none;
}

tr.titleRow td {
    background: #2599f8 !important;
    color: #000 !important;
    border-bottom: 2px solid #ffd1b3 !important;
    border-top: 2px solid #ffd1b3 !important;
}

tr.titleRow p {
    margin: 0px;
    color: #b54a00;
}

.vip-all tr:first-child td {
    border: none;
}

table.vip-all tr td:nth-child(2) .vip-cell {
    text-transform: uppercase;
    font-weight: bold;
}

.vip-cell {
    text-transform: uppercase;
    font-weight: bold;
}

table.vip-all tr td:nth-child(3) .vip-cell {
    text-transform: uppercase;
    font-weight: bold;
}

table.vip-all tr td:nth-child(4) .vip-cell {
    text-transform: uppercase;
    font-weight: bold;
}

table.vip-all tr td:nth-child(5) .vip-cell {
    color: #ffffff;
    text-transform: uppercase;
    font-weight: bold;
}

table.vip-all tr td:nth-child(6) .vip-cell {
    text-transform: uppercase;
    font-weight: bold;
}

table.vip-all tr td {
    width: 8%;
    font-size: 13px;
}

.vip-wrap {
    background: rgb(0 0 0 / 70%);
    border-radius: 10px;
    margin-top: 20px;
    padding: 20px;
    margin-bottom: 20px;
}

.vip-tnc {
    padding: 0px 20px;
    color: #fff;
}

.vip-tnc h4 {
    font-size: 16px;
    font-weight: bold;
}

.vip-tnc ul {
    margin-bottom: 20px;
}

.vip-container {
    width: 1300px;
    margin: 0px auto;
}

tr.titleRow-last td {
    background: #b27ed0 !important;
    border: none !important;
    color: #fff;
}

.vip-tnc ol li {
    margin-bottom: 5px;
    padding-left: 10px;
}

.vip-tnc {
    color: #788b9d;
}

.info_bg {
    padding: 6% 0 5% 0;
}

.info_grid {
    display: flex;
    grid-gap: 20px;
}

.info_grid_menu {
    list-style-type: none;
    margin: 0;
    padding: 0;
    background-image: url(../images/mobile/menu.png);
    background-size: contain;
    /* min-height: 320px; */
    background-repeat: no-repeat;
    width: 285px;
    filter: drop-shadow(0 1px 0 #ebf0ff) drop-shadow(0 3px 6px #788b9d55);
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    grid-gap: 10px;
    padding: 20px;
    /* max-height: 365px; */
    height: 100%;
}

.info_grid_menu a {
    color: #788b9d;
    font-size: 14px;
    font-weight: 500;
    display: block;
    /* width: 100%; */
    text-align: center;
    padding: 11px;
    align-items: center;
    cursor: pointer;
    text-transform: uppercase;
    min-width: 150px;
}

.info_grid_menu a.active {
    background-image: url(../images/index/btn-enter.png);
    background-size: 100% 100%;
    color: #fff;
    background-repeat: no-repeat;
    background-position: center;
    font-weight: 600;
}

.info_grid_content {
    background-image: url(../images/general-bg.jpg);
    background-size: 100% 100%;
    border-radius: 20px;
    box-shadow: 0 0 3px 3px #fff inset;
    filter: drop-shadow(0 5px 0 #ebf0ff) drop-shadow(0 5px 6px #788b9d55);
    width: 100%;
    /* height: 30rem; */
    /* display: flex; */
    /* justify-content: left; */
    position: relative;
    margin-left: auto;
    padding: 2rem 1rem 1rem 1rem;
}

.inf-content h4 {
    margin-bottom: 20px;
    margin-top: 5px;
    color: #ff8633;
    font-size: 2.25rem;
    font-weight: 600;
    text-transform: uppercase;
    text-shadow: rgba(74, 137, 252, .2) 0 3px 6px;
}

.inf-content p {
    margin-bottom: 20px;
    opacity: 1;
    color: #788b9d;
}

.contact_row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 20px;
    max-width: 500px;
    margin: auto;
}

.contact_row a {
    display: block;
    position: relative;
    margin: auto;
}

.contact_row_container {
    width: 100%;
    height: auto;
    position: absolute;
    top: 0;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    padding: 2rem 1rem;
    text-align: center;
}

.contact_row_container h4 {
    font-size: 1.3125rem;
}

.contact_row_container img {
    width: 60px;
}

button.btn-tnc {
    background: linear-gradient(to bottom, #2599f8 0%, #e87b30 100%);
    width: 100%;
    text-align: left;
    font-size: 16px;
    padding: 8px 15px;
    color: #000;
    border: none;
    border-radius: 5px;
    position: relative;
}

button.btn-tnc.collapsed {
    background: linear-gradient(to bottom, #ffc299 0%, #2599f8 60%);
    color: #fff;
}

button.btn-tnc:focus {
    outline: none;
}

.tnc-card {
    margin-bottom: 5px;
}

.tnc-body {
    background: #f0f6ff;
    padding: 20px 20px 10px;
    border-radius: 4px;
    margin-top: 2px;
    line-height: 1.3;
}

.tnc-body ol {
    padding-left: 15px;
}

.tnc-body ol li {
    padding-bottom: 8px;
}

button.btn-tnc::after {
    content: '>';
    font-size: 16px;
    line-height: 1;
    position: absolute;
    right: 17px;
    top: 10px;
    transform: rotate(270deg);
    transition: all 0.3s;
}

button.btn-tnc.collapsed::after {
    content: '>';
    transform: rotate(90deg);
    transition: all 0.3s;
}

.table-second {
    margin: 20px 0px;
}

.table-second>tbody>tr>th {
    border: 1px solid #ff6700;
    background: linear-gradient(to bottom, #ffc299 0%, #2599f8 60%);
    color: #fff;
    text-align: center;
    padding: 5px;
}

.table-second>tbody>tr>td {
    border: 1px solid #788b9d;
    background: #f0f6ff;
    padding: 5px;
    color: #788b9d;
}

.afterlogin_bg {
    padding: 6% 0 5% 0;
}

.afterlogin_body_grid {
    display: grid;
    grid-template-columns: 220px auto 180px;
    grid-gap: 20px;
}

.afterlogin_body_grid1 {
    display: grid;
    grid-template-columns: 220px auto;
    grid-gap: 20px;
}

.afterlogin_left_menu {
    width: 100%;
    margin-right: 1rem;
    border-radius: 1.5rem;
    background: #fff;
    box-shadow: 0 4px 16px rgba(152, 161, 182, .04);
}

.afleft_menu_top {
    padding: 1rem;
}

.ps-user-details {
    display: grid;
    justify-content: center;
    grid-gap: 0.25rem;
    gap: 0.25rem;
    text-align: center;
}

.ps-user-details img {
    max-width: 60px;
    margin: auto;
}

.ps_navbar {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    margin-top: 20px;
}

.ps_navbar_box {
    display: block;
    text-align: center;
    color: #788b9d;
    transition: all .3s ease-in-out;
    font-size: 12px;
}

.ps_navbar_box img {
    display: block;
    max-width: 40px;
    margin: 0 auto;
    width: 100%;
    height: auto;
}

.ps-user-name {
    font-weight: 600;
}

.afleft_menu_btm {
    padding: 0 0 1rem
}

.afleft_menu_btm ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.afleft_menu_btm ul li a.menu_btm_navlink {
    color: #788b9d;
    transition: all .3s ease-in-out;
    font-size: 15px;
    display: flex;
    align-items: center;
    transition: all .3s ease-in-out;
    padding: 0.75rem 1rem;
}

.afleft_menu_btm ul li a.menu_btm_navlink img {
    max-width: 25px;
    margin: 0 auto;
    width: 100%;
    height: auto;
}

.afleft_menu_btm ul li a.menu_btm_navlink p {
    font-size: .875rem;
    color: #788b9d;
    width: 75%;
    margin: 0;
}

.afleft_menu_btm ul hr {
    border: none;
    height: 1px;
    opacity: 1;
    background-color: #becaec;
    margin: 1rem;
}

.afterlogin_right_menu {
    padding: 1.25rem;
    border-radius: 1.25rem;
    background: #fff;
    box-shadow: 0 4px 16px rgba(152, 161, 182, .04);
}

.afterloginpage_title {
    color: #414755;
    font-weight: 600;
    margin-bottom: 20px;
}

.form-group label {}

.select_bank_opt {
    display: grid;
    grid-template-columns: repeat(5, calc(20% - 0.4rem));
    grid-gap: 0.5rem;
    gap: 0.5rem;
    border-radius: 0.25rem;
    border-bottom-right-radius: 0.25rem !important;
    border-bottom-left-radius: 0.25rem !important;
    border-color: #becaec;
}

.form-check .btn-check {
    border-color: #becaec;
}

.form-check .btn-check:checked {
    background-color: #4a89fc;
    border-color: #4a89fc;
}

.select_bank_opt .form-check-inline .form-check-label {
    font-size: .75rem;
    width: 100%;
    max-width: unset;
    flex-direction: column;
    height: 4.5rem;
    grid-gap: 0.15rem;
    gap: 0.15rem;
    overflow: hidden;
    border: 1px solid #cecece;
    display: flex;
    justify-content: center;
    align-items: center;
}

.form-check .btn-check:checked+.form-check-label {
    color: #4a89fc !important;
    border: 0.0625rem solid #788b9d;
    position: relative;
    overflow: hidden;
}

.select_bank_opt .form-check-inline .form-check-label img {
    height: 24px;
}

.form-check .btn-check:checked+.form-check-label:after {
    content: "";
    position: absolute;
    background: url(../images/afterlogin/checked.svg);
    background-repeat: no-repeat;
    background-size: contain;
    bottom: -0.0625rem;
    right: -0.0625rem;
    width: 1.5625rem;
    height: 1.5625rem;
}

.select_bank_opt .form-check-inline {
    margin: 0;
    padding: 0;
}

.form-check-label p {
    margin: 0;
}

.content-section {
    display: none;
}

.tabcontent_custom_dep {
    padding-top: 0px;
}

.row_form {
    margin: 15px 0;
    display: flex;
    flex-wrap: nowrap;
    /* align-items: center; */
}

.tabcontent_custom_dep {
    margin-right: calc(-.5 * var(--bs-gutter-x));
    margin-left: calc(-.5 * var(--bs-gutter-x));
}

.form-control {
    color: #414755;
    border: 1px solid #becaec;
    min-height: 2.5rem;
}

.amt_input {
    display: flex;
    align-items: center;
}

.amt_input .input-group-text {
    color: #414755;
    background: transparent;
    position: relative;
    border-right: 0;
    border-right: 0 !important;
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    min-height: 2.5rem;
}

.amt_input input {
    margin-left: calc(var(--bs-border-width)*-1);
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.select_bank_opt_amt .select_bank_opt .form-check-inline .form-check-label {
    height: 2.5rem;
    width: 100%;
}

.select_bank_opt_amt .select_bank_opt {
    display: grid;
    grid-template-columns: repeat(7, calc(14% - 0.4rem));
    grid-gap: 0.5rem;
    gap: 0.5rem;
    border-radius: 0.25rem;
    border-bottom-right-radius: 0.25rem !important;
    border-bottom-left-radius: 0.25rem !important;
    border-color: #becaec;
    margin-top: 10px;
}

.uploader {
    display: block;
    /* clear: both; */
    /* margin: 0 auto; */
    width: 100%;
    /* max-width: 600px; */
}

.uploader label {
    float: left;
    clear: both;
    width: 100%;
    padding: 2rem 1.5rem;
    text-align: center;
    background: #fff;
    border-radius: 7px;
    border: 1px solid #becaec;
    transition: all 0.2s ease;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.uploader label:hover {
    border-color: #becaec;
}

.uploader label.hover {
    border: 3px solid #454cad;
    box-shadow: inset 0 0 0 6px #eee;
}

.uploader label.hover #start i.fa {
    transform: scale(0.8);
    opacity: 0.3;
}

.uploader #start {
    float: left;
    clear: both;
    width: 100%;
}

.uploader #start.hidden {
    display: none;
}

.uploader #start i.fa {
    font-size: 50px;
    margin-bottom: 1rem;
    transition: all 0.2s ease-in-out;
}

.uploader #response {
    float: left;
    clear: both;
    width: 100%;
}

.uploader #response.hidden {
    display: none;
}

.uploader #response #messages {
    margin-bottom: 0.5rem;
}

.uploader #file-image {
    display: inline;
    margin: 0 auto 0.5rem auto;
    width: auto;
    height: auto;
    max-width: 180px;
}

.uploader #file-image.hidden {
    display: none;
}

.uploader #notimage {
    display: block;
    float: left;
    clear: both;
    width: 100%;
}

.uploader #notimage.hidden {
    display: none;
}

.uploader progress,
.uploader .progress {
    display: inline;
    clear: both;
    margin: 0 auto;
    width: 100%;
    max-width: 180px;
    height: 8px;
    border: 0;
    border-radius: 4px;
    background-color: #eee;
    overflow: hidden;
}

.uploader .progress[value]::-webkit-progress-bar {
    border-radius: 4px;
    background-color: #eee;
}

.uploader .progress[value]::-webkit-progress-value {
    background: linear-gradient(to right, #393f90 0%, #454cad 50%);
    border-radius: 4px;
}

.uploader .progress[value]::-moz-progress-bar {
    background: linear-gradient(to right, #393f90 0%, #454cad 50%);
    border-radius: 4px;
}

.uploader input[type=file] {
    display: none;
}

.uploader div {
    margin: 0 0 0.5rem 0;
    color: #5f6982;
}

.uploader .btn {
    display: inline-block;
    margin: 0.5rem 0.5rem 1rem 0.5rem;
    clear: both;
    font-family: inherit;
    font-weight: 700;
    font-size: 14px;
    text-decoration: none;
    text-transform: initial;
    border: none;
    border-radius: 0.2rem;
    outline: none;
    padding: 0 1rem;
    height: 36px;
    line-height: 36px;
    color: #fff;
    transition: all 0.2s ease-in-out;
    box-sizing: border-box;
    background: linear-gradient(135deg, #3ee9e4 0%, #2599f8 95%);
    /* border-color: #454cad; */
    cursor: pointer;
}

.button_sub {
    color: #fff;
    text-shadow: 1px 1px 1px #00000066;
    background: linear-gradient(135deg, #3ee9e4 0%, #2599f8 95%);
    box-shadow: 0 3px 6px 2px #2599f852;
    min-height: 33px;
    border-radius: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 25px;
    min-width: 85px;
    cursor: pointer;
    border: none;
}

.table-share tr th {
    background-color: #788b9d;
    padding: 10px 5px;
    font-size: 12px;
    text-align: center;
    border: 1px solid #788b9d;
    color: #fff;
}

.table-share tr td {
    padding: 5px;
    border: 1px solid #788b9d;
    text-align: center;
}

.filters-col {
    display: grid;
    grid-gap: 0.75rem;
    gap: 0.75rem;
    margin-top: 1rem;
}

.filters-tp-panel {
    display: flex;
    justify-content: space-between;
}

.filters-tp-col {
    display: flex;
    align-items: center;
}

.col-form-label {
    font-size: .75rem;
    white-space: nowrap;
    margin-right: 1rem;
}

.filters-group {
    display: flex;
}

.filters-group .form-check-label {
    height: 2.5rem;
    min-width: 4.5rem;
    max-width: 8.75rem;
    line-height: 1.25;
    border: 0.0625rem solid #becaec;
    color: #414755;
    background-color: initial;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .3s ease-in-out;
    cursor: pointer;
    border-radius: 0;
    font-size: .75rem;
}

.filters-group .form-check-label.active,
.filters-group .form-check-label:hover {
    color: #4a89fc;
    border: 0.0625rem solid #4a89fc;
    position: relative;
    overflow: hidden;
    line-height: 1.25;
    font-size: .75rem;
}

.filters-group .form-check-label.active:after {
    content: "";
    position: absolute;
    background: url(../images/afterlogin/checked.svg);
    background-repeat: no-repeat;
    background-size: contain;
    bottom: -0.0625rem;
    right: -0.0625rem;
    width: 1.5625rem;
    height: 1.5625rem;
}

.filters-group .form-check-inline:first-child .form-check-label {
    border-radius: 0.25rem 0 0 0.25rem;
}

.filters-group .form-check-inline:last-child .form-check-label {
    border-radius: 0 .25rem .25rem 0;
}

.filters-group .form-check-inline {
    margin: 0;
    padding: 0;
}

.filters-tp-col_date {
    grid-gap: 10px;
}

.history_table {}

.history_table tr th {
    padding: 0 5px;
}

.history_table tr td {
    padding: 3px 5px;
}

tr.unread td {
    font-weight: bold;
    color: #fff;
}

.history_table tr th:last-child {
    text-align: right;
}

.history_table tr td:last-child {
    color: #f4ba00;
    text-align: right;
}

.afterlogin_right_menu_historytable {
    min-height: 500px;
}

.time_h {
    font-size: .75rem;
    white-space: nowrap;
    margin-right: 1rem;
}

.btn-df {
    border: none;
    background: #ed1d49;
    color: #fff;
    border-radius: 5px;
    font-size: 12px;
}

.addbank_form {
    display: none;
}

.addbankbtn {
    background: transparent;
    border: none;
    color: #788b9d;
    margin-top: 40px;
}

.addbankbtn i {
    margin-right: 10px;
}

.wallet_grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 20px;
}

.my-wallet-content {
    height: 100%;
    display: flex;
    padding: 1rem;
    border: 1px solid #becaec;
    border-radius: 0.5rem;
}

.wallet-container {
    display: flex;
    align-items: center;
    grid-gap: 10px;
}

.interest-tnc {
    width: max-content;
    /* min-width: 10rem; */
    display: flex;
    align-items: center;
    border: 0.0625rem solid #4a89fc;
    border-radius: 1rem;
    font-size: .75rem;
    padding: 0.125rem 0.25rem;
    line-height: 1;
    color: #4a89fc;
    font-weight: 500;
    background: #f6faff;
    margin-right: 0.5rem;
    cursor: pointer;
}

.wallet-container_content p {
    color: #414755;
    font-weight: 500;
    margin: 0;
}

.wallet-container_content span {
    font-size: 1.25rem;
    word-break: break-all;
}

.wallet-container img {
    width: 60px;
}

.afterlogin_right_menu_bank {
    min-height: 523px;
}

.amt-box {
    position: relative;
}

button.btn-cpy {
    position: absolute;
    right: 24px;
    top: 9px;
    border: none;
    padding: 0px;
    color: #636363;
    background: transparent;
}

.qr-code img {
    display: block;
    margin: 0px auto;
    max-width: 200px;
    /* margin-top: 20px; */
}

.msg-tabs-col .nav-tabs {
    border-bottom: 0;
}

.msg-tabs-col .nav-tabs .nav-item .nav-link {
    position: relative;
    color: #414755;
    background: transparent;
    font-weight: 600;
    border: 0;
    border-bottom: 0.1875rem solid transparent;
    transition: all .3s ease-in-out;
}

.msg-tabs-col .nav-tabs .nav-item .nav-link.active {
    color: #4a89fc;
    border-bottom: 0.1875rem solid #4a89fc;
}

.notify-num {
    right: -2.5%;
    top: -7.5%;
    width: 1.0625rem;
    height: 1.0625rem;
    border-radius: 50%;
    color: #fff;
    background-image: linear-gradient(0deg, #ea4e3d, #f7778c);
    font-size: .63rem;
    font-weight: 500;
    line-height: 1.0625rem;
}

.notify-num,
.notify-red-dot {
    position: absolute;
    display: inline-block;
}

.afterlogin_right_menu_msg {
    padding-bottom: 0;
}

.msg-edit-panel {
    display: flex;
    align-items: center;
    grid-gap: 15px;
}

.msg-edit-panel i {
    margin-right: 5px;
}

.box_delete {
    color: red;
}

.box_mark {
    color: #4a89fc;
}

.list-group-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem;
    border-bottom: 0;
    border-left: 0;
    border-right: 0;
    border-radius: 0;
    border-color: #becaec;
    cursor: pointer;
    transition: background-color .3s ease-in-out;
}

.msg-icon-col img {
    width: 30px;
}

.list-group-item .h6,
.list-group-item h6 {
    display: flex;
    align-items: center;
    margin-bottom: 0;
    width: 17%;
    /* line-height: 1; */
}

.list-group-item .h6>span,
.list-group-item h6>span,
.list-group-item p,
.list-group-item span {
    font-size: .75rem;
    margin-bottom: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.list-group-item p {
    color: #788b9d;
    width: 65%;
}

.list-group-item>span:not(h6):not(.h6) {
    color: #abb8d6;
}

.reg-box {
    width: 100%;
}

.reg_bg {
    background-image: url(../images/general-bg.jpg);
    background-size: 100% 100%;
    border-radius: 20px;
    box-shadow: 0 0 3px 3px #fff inset;
    filter: drop-shadow(0 5px 0 #ebf0ff) drop-shadow(0 5px 6px #788b9d55);
    width: 100%;
    position: relative;
    margin-left: auto;
    padding: 2rem 1rem 1rem 1rem;
}

.content_section_reg {
    margin: 50px 0;
}

.reg-wrp {
    display: grid;
    justify-content: space-between;
    grid-gap: 10px;
    grid-template-columns: 34% 59%;
}

.reg-step {
    background: url("../images/register/rtep-1.png") no-repeat top center;
    width: 658px;
}

.reg-step2 {
    background: url("../images/register/rtep-2.png") no-repeat top center;
    width: 658px;
}

.reg-step3 {
    background: url("../images/register/rtep-3.png") no-repeat top center;
    width: 658px;
}

.reg-step4 {
    background: url("../images/register/rtep-4.png") no-repeat top center;
    width: 658px;
}

.reg-wrap .container {
    width: 1120px;
    max-width: 1120px;
}

.reg-step ul li {
    list-style: none;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.reg-step ul {
    padding: 0px;
    display: grid;
    height: 44px;
    grid-template-columns: repeat(4, 1fr);
    margin: 0;
}


.ttl-reg {
    padding-left: 8px;
    color: #fff;
    font-weight: bold;
    font-size: 14px;
}

.ttl-nm {
    color: #fff;
    font-weight: bold;
    padding-right: 8px;
    position: relative;
    top: 2px;
}

.reg-step ul li.active .ttl-reg,
.reg-step ul li.active .ttl-nm {
    color: #666666;
}

.reg-step ul li {
    padding-right: 14px;
    background: url("../images/register/silver-arrow.png") no-repeat;
    width: 184px;
}

.reg-step ul li:hover,
.reg-step ul li.active {
    padding-right: 16px;
    background: url("../images/register/gold-arrow.png") no-repeat;

}

.reg-step ul li:first-child {
    z-index: 3;
}

.reg-step ul li:nth-child(2) {
    padding-right: 11px;
    background: url("../images/register/silver-arrow.png") no-repeat;
    position: relative;
    margin-left: -20px;
    padding-left: 25px;
    /*    filter: grayscale(1);*/
    z-index: 2;
}

.reg-step ul li:nth-child(3) {
    padding-right: 12px;
    background: url(../images/register/silver-arrow.png) no-repeat;
    position: relative;
    margin-left: -23px;
    /*    filter: grayscale(1);*/
    padding-left: 25px;
    z-index: 1;
}

.reg-step ul li:last-child {
    padding-right: 9px;
    background: url("../images/register/silver-last.png") no-repeat;
    position: relative;
    margin-left: -27px;
    /* filter: grayscale(1); */
    padding-left: 29px;
}

.reg-step ul li a {
    display: flex;
    justify-content: space-between;
    width: 100%;
    padding: 10px;
}

.reg-step ul li.active:nth-child(3),
.reg-step ul li:hover:nth-child(3) {
    background: url(../images/register/gold-arrow-middle.png) no-repeat;
}

.reg-step ul li.active:nth-child(2),
.reg-step ul li:hover:nth-child(2) {
    background: url(../images/register/gold-arrow-middle.png) no-repeat;
}

.reg-step ul li.active:last-child,
.reg-step ul li:hover:last-child {
    background: url("../images/register/gold-end.png") no-repeat;
}

.form-wrap {
    display: flex;
    align-items: center;
    border: 1px solid #a7b3d6;
    border-radius: 5px;
    margin-bottom: 20px;
    padding: 5px;
}

.inp-txt {
    width: 210px;
    padding-left: 15px;
    text-transform: uppercase;
}

.inp-box input {
    margin: 0px;
    width: 100%;
    height: 40px;
    border: 1px solid #a7b3d6;
    background: #a7b3d6;
    color: #000;
}

.inp-box {
    width: 100%;
    display: flex;
}

.reg-box img {
    margin-bottom: 10px;
}

.reg-box2 {
    margin: 20px 0px;
}


.btn-sub {
    display: flex;
    justify-content: center;
    margin-top: 25px;
}

.btn-sub .jms-link {
    height: 38px;
    font-size: 16px;
    color: #fff;
    text-shadow: 1px 1px 1px #00000066;
    background: linear-gradient(135deg, #3ee9e4 0%, #2599f8 95%);
    box-shadow: 0 3px 6px 2px #2599f852;
    min-height: 33px;
    border-radius: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 25px;
    min-width: 85px;
    cursor: pointer;
    border: none;
}

.wrap-reg {
    margin-top: 29px;
}

select.form-nm {
    background: #a7b3d6;
    color: #000;
    border: none;
    padding: 0px 20px;
    margin-right: 10px;
    width: 25%;
}

.form-field {
    display: block;
    padding: 10px;
    border: 1px solid #cacaca;
    border-radius: 5px;
    height: 53px;
}

.red-mi {
    color: #FF0004;
}

.field {
    float: left;
    padding: 7px;
    font-weight: 800;
    font-size: 17px;
    line-height: 1;
    width: 20%;
    vertical-align: middle;
    color: #292929;
}

.value {
    float: left;
    padding: 3px;
    width: 75%;
    position: relative;
}

.form-field .value input {
    border: none;
    background: transparent;
    color: #fff;
    font-size: 16px;
}

.form-field .value input:focus {
    outline: 0;
}

.value.vercode {
    width: 60%;
}

.vcode {
    float: left;
    padding: 3px;
    width: 16%;
}

.vcode img {
    max-width: 110px;
}

select.telco {
    width: 100px;
    border: none;
    color: #fff;
    background: none;
    font-size: 16px;
    background: #a7b3d6;
}

.value.tel-num {
    display: flex;
}

input.tel-input {
    margin-left: 15px;
}

.phone-verify {
    max-width: 300px;
    margin: auto;
    background: #a7b3d6;
}

input.num-verify {
    height: 45px;
    width: 45px;
    margin: 0 5px;
    font-size: 24px;
    text-align: center;
    padding: 5px;
    border: 1px solid #cacaca;
    border-radius: 5px;
}

.code-field {
    text-align: center;
}

.field-label {
    font-size: 17px;
    font-weight: 800;
    margin-bottom: 10px;
}

.code-issue {
    padding: 10px 0;
    text-align: center;
    font-size: 14px;
}

.congrazt-title {
    font-size: 24px;
    font-weight: 800;
}

.congrazt-title-2 {
    font-size: 18px;
    font-weight: 700;
}

.tick-success {
    font-size: 130px;
    line-height: 1;
    color: #ffc299;
    padding: 10px 0;
}

select.telco:focus {
    border: none;
    outline: none;
}

button.jms-link,
button.jms-link2 {
    height: 38px;
    font-size: 16px;
    color: #fff;
    text-shadow: 1px 1px 1px #00000066;
    background: linear-gradient(135deg, #3ee9e4 0%, #2599f8 95%);
    box-shadow: 0 3px 6px 2px #2599f852;
    min-height: 33px;
    border-radius: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 25px;
    min-width: 85px;
    cursor: pointer;
    border: none;
}

.jms_btn_all {
    display: flex;
    align-items: center;
    justify-content: center;
    grid-gap: 10px;
}

/*language*/

.lang-box {
    align-self: center;
    background: #fff;
    /* margin-left: 10px; */
    /* width: 55px; */
    border-radius: 25px;
    min-height: 33px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.lang-btn {
    background: transparent;
    border: 1px solid transparent;
}

.lang-btn:focus {
    outline: none;
}

.lang-btn.dropdown-toggle::after {
    display: none;
}

.lang-arrow {
    transition: transform 0.3s ease;
}

.rotate {
    transform: rotate(180deg);
}

.dropdown-menu.language {
    padding: 0px;
    /* background: rgb(0 0 0); */
    min-width: 100px;
    border: none;
    top: 6px !important;
    box-shadow: 0 0 1px #fff;
    background: #fff;
    box-shadow: 0 3px 6px 2px #4a89fc2b;
}

.dropdown-menu.language:before {
    content: "";
    position: absolute;
    top: -6px;
    right: 40%;
    border-bottom: 6px solid #fff;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    z-index: 1;
}

.navbar_ul li .lang-box a:after {
    background-color: transparent;
}

.navbar_ul li .lang-box a.active,
.navbar_ul li .lang-box a:hover {
    color: #788b9d;
    background: #f0f6ff;
}

.lang-btn {
    background: none;
    border: none;
    color: #788b9d;
    padding: 5px 10px;
    display: flex;
    align-items: center;
}

.lang-menu {
    padding: 15px;
    /* min-width: 250px; */
    background: #010205;
    border: 1px solid #516997;
}

.lang-drop-menu {
    color: #fff;
}

.region-wrap {
    display: flex;
    justify-content: unset;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid #516997;
}

.lang-drop-menu i {
    font-size: 30px;
    color: #005fa0;
}

.bb-none {
    border-bottom: none;
}

.reginItem {
    margin-bottom: 4px;
}

.language-sec {
    height: 100vh;
    background-size: cover;
    padding: 10px;
    background: #023431 url(../images/bg-index.jpg)no-repeat center;
}

.lang-title {
    font-size: 25px;
    color: #ffe001;
    padding: 5px;
    text-align: center;
    background: #001315;
    text-transform: uppercase;
    border-radius: 5px;
    margin-bottom: 20px;
}

.region_box .reginItem .iconsAndText {
    margin-top: 4px;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    padding-left: 0.1rem;
    justify-content: space-between;
}

.region_box .reginItem .iconsAndText>ul {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    padding-left: 0;
    margin-bottom: 0;
}

.region_box .reginItem .iconsAndText>ul>li {
    height: 0.72rem;
    border-right: 0.02rem solid #cccccc;
    padding: 0 5px;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
}

.region_box .reginItem .iconsAndText>ul>li:last-child {
    border-right: none;
}

.iconsAndText img {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    padding-left: 0;
}

.region_box .reginItem .title {
    font-size: 11px;
    color: #929292;
    line-height: 100%;
}

.region_box {}

.mainFont {
    color: #788b9d;
    font-size: 11px;
}

.region-text {
    margin-left: 15px;
    text-transform: uppercase;
}

.lang-btn img {
    max-width: 20px;
}

.dropdown-menu.language a {
    padding: 10px;
    text-align: center;
    font-size: 15px;
}

.dropdown-menu.language a:hover {
    background: transparent;
}

.dropdown-menu.language a:hover img {
    filter: drop-shadow(0px 0px 2px #fff);
}

/* end */

/* TRANSFER BALANCE */
.prov-bx {
    padding-bottom: 30px;
    display: flex;
    flex-direction: column;
}

.bld-detail {
    display: flex;
    /* background: #292825;
    width: 100%; */
}

.bld-detail-in {
    display: flex;
    justify-content: center;
    border: 1px solid #2599f8;
    padding: 20px;
    justify-content: center;
    align-items: end;
    /* background: #292825;
    color: #fff; */
}

.am-box {
    padding: 5px 20px;
    border-radius: 5px;
    width: 180px;
    text-align: right;
    padding-right: 5px;
    color: #2599f8;
    border: 1px solid #2599f8 !important;
}

.amt-detail {
    margin-right: 10px;
}

.user-detail {
    margin-right: 20%;
}

.ttl-bln {
    text-align: right;
}

.prov-in ul {
    display: grid;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
    align-content: stretch;
    padding: 0px;
    grid-template-columns: repeat(6, 1fr);
    margin: 0px;
}

.prov-in ul li {
    list-style: none;
    border: 1px solid #ffd1b3;
    padding: 10px;
    text-align: center;
    cursor: pointer;
    text-transform: uppercase;
    height: 100%;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    align-content: stretch;
    margin-left: -1px;
}

.prov-in ul li a {
    display: flex;
    width: 100%;
    height: 100%;
    flex-direction: column;
    grid-gap: 10px;
    justify-content: center;
}

.prov-in ul li:nth-child(7n+1) {}

.prov-in ul li p {
    color: #2599f8;
    margin: 0px;
    font-size: 12px;
    border: 1px solid #ffd1b3;
    border-radius: 30px;
    padding: 0px 10px;
}

.prov-in ul li h5 {
    margin: 0px;
    font-size: 14px;
    color: #788b9d;
}

.prov-in ul li:hover {
    /* background: #9d9d9d;
    color: #fff; */
    background: #000;
}

.in-all {
    background: #06cb24f2;
    color: #fff;
}

.inout button {
    border: none;
    border-radius: 5px;
}

.out-all {
    background: #f00;
    color: #fff;
}

.in-all:hover {
    background: #048b19f2;
}

.out-all:hover {
    background: #b70303;
}

.out-all:focus {
    border: none;
    outline: none;
    box-shadow: none;
}

.out-in:focus {
    border: none;
    outline: none;
    box-shadow: none;
}

.amt-wrap {
    border: 1px solid #fcd25e;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 8px;
}

.yll-txt {
    font-size: 10px;
    color: #2599f8;
}

.mw-wrap button {
    border: none;
    margin-bottom: 10px;
    padding: 5px 20px;
    font-size: 16px;
    border-radius: 5px;
}

.mw-wrap {
    display: flex;
    flex-direction: column;
}

.amt-ttl {
    color: #2599f8;
    font-size: 17px;
    font-weight: bold;
    margin-bottom: 20px;
}

.restore-box {
    /* width: 20%; */
    text-align: end;
    color: #7682a5;
    margin-bottom: 10px;
}

.restore-box div {
    display: flex;
    align-items: center;
    justify-content: center;
    grid-gap: 10px;
}

.restore-box div img {
    max-width: 30px;
}

/* AFTERLOGIN HEADER */
.user-balance-container {
    display: flex;
    flex-direction: column;
}

.user-balance-container .profile-dropdown {
    width: 225px;
    position: absolute;
    top: 60px;
    right: 0;
    list-style-type: none;
    background-color: #fff;
    box-shadow: 0 4px 12px 0 rgba(107, 123, 168, .25);
    border-radius: 10px;
    padding: 1rem 0;
    opacity: 0;
    transition: all .3s ease-in-out;
    pointer-events: none;
}

.user-balance-container .profile-dropdown:before {
    content: "";
    position: absolute;
    top: -6px;
    right: 8%;
    border-bottom: 6px solid #fff;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    z-index: 1;
}

.user-balance-container .profile-dropdown li {
    padding: 1rem;
}

.user-balance-container .user-balance {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-weight: 500;
    color: #414755;
    cursor: pointer;
}

.user-balance-container .profile-dropdown:after {
    content: "";
    position: absolute;
    top: -10px;
    left: 0;
    right: 0;
    height: 22px;
}

.user-balance-container .user-balance .coin-balance span {
    padding-left: 0.25rem;
}

.user-balance-container .user-balance .coin-balance img {
    width: 100%;
    max-width: 1.25rem;
    height: auto;
}

.user-balance-container .user-balance .coin-balance {
    display: flex;
    align-items: center;
    justify-content: end;
    position: relative;
    padding-right: 0.25rem;
}

.user-balance-container .user-balance .header-arrow {
    transition: -webkit-transform .3s ease-in-out;
    transition: transform .3s ease-in-out;
    transition: transform .3s ease-in-out, -webkit-transform .3s ease-in-out;
    color: #788b9d;
    transition: all .4s;
}

.afterlogin-details:hover .header-arrow {
    transform: rotate(-180deg);
}

.user-balance-container .profile-dropdown li a {
    display: flex;
    align-items: center;
}

.vip-icon {
    width: 2.125rem;
    min-width: 2.125rem;
    height: 1.0625rem;
    background: linear-gradient(90deg, #ffe5b4, #ffaa09);
    color: #f0f6ff;
    text-align: center;
    font-weight: 700;
    font-size: .63rem;
    font-style: italic;
    line-height: 1.1rem;
    border-radius: 0.3125rem;
    z-index: 1;
    margin: 0;
}

.user-profile-container .vip-icon {
    position: absolute;
    bottom: 0;
    right: -22%;
    background: #8b9ccb;
    z-index: 2;
}

.user-profile-container .user-profile-img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    object-position: center;
    overflow: hidden;
}

.user-profile-container {
    position: relative;
    width: 3.125rem;
    height: 3.125rem;
}

.user-balance-container p {
    margin-bottom: 0;
    line-height: 16px;
    color: #788b9d;
    display: flex;
    align-items: center;
    margin-top: 4px;
}

.user-balance-container .profile-dropdown.active {
    pointer-events: visible;
    opacity: 1;
}

.user-balance-container .profile-dropdown li a p {
    padding: 0 0.5rem;
    color: #000;
    font-size: 15px;
}

.user-balance-container .profile-dropdown li a p:hover {
    color: #2599f8;
}

.user-balance-container .menu_btm_navlink img {
    max-width: 25px;
}

.user-balance-container .user-balance .coin-balance:after {
    content: "";
    height: 1.25rem;
    width: 0.0625rem;
    position: absolute;
    right: -0.03125rem;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    background-color: #414755;
}

.navbar_ul ul.afterlogin li a:after {
    background-color: transparent;
}

.menu-icon-h {
    display: none;
}

.profile-dropdown.afterlogin li:hover .menu-icon {
    display: none;
}

.profile-dropdown.afterlogin li:hover .menu-icon-h {
    display: block;
}

.btn-signout {
    background-color: #fff;
    width: 100%;
    border: none;
    padding: 5px;
    border-radius: 10px;
    color: #788b9d;
    border: 1px solid #788b9d;
}

.btn-signout:hover {
    color: #2599f8;
    border: 1px solid #2599f8;
}

.floating img {
    width: 50%;
}

.floating {
    animation-name: floating;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
    margin-left: 30px;
    margin-top: 5px;
    bottom: 10%;
    position: fixed;
    z-index: 1000;
}

@keyframes floating {
    from {
        transform: translate(0, 0px);
    }

    65% {
        transform: translate(0, 15px);
    }

    to {
        transform: translate(0, -0px);
    }
}

.floating-all img {
    width: 70%;
}

.floating_modal .modal-content {
    background: none;
    border: none;
}

.floating-wrap img {
    display: block;
    margin: 0px auto;
    opacity: 1;
}

.floating-wrap .close {
    color: #fff;
    opacity: 1;
}

.floating_modal .close {
    color: #fff;
    opacity: 1;
    font-size: 50px;
    position: absolute;
    right: 0px;
    z-index: 10;
}

.floating-wrap a {
    position: relative;
}

.floating-text {
    position: absolute;
    top: 25%;
    left: 0;
    right: 0;
    margin: 0px auto;
    text-align: center;
    padding: 16px;
    color: #000;
    font-weight: bold;
}

.floating-pop {
    display: inline-flex;
    padding: 10px 20px;
    color: #fff;
    font-size: 50px;
    text-shadow: 3px 3px black;
    line-height: 30px;
}

#closeButton {
    right: 0;
    top: 0px;
    color: #2599f8;
    opacity: 1;
    position: absolute;
    z-index: 111;
    text-align: center;
    left: 48%;
    font-size: 20px;
    font-weight: 100;
    border-radius: 100%;
    width: 30px;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: none;
    border: none;
    font-weight: 900;
}

.btn-group-transfer {

    display: flex;

    justify-content: end;

    grid-gap: 10px;
}

.btn-group-transfer button {
    border: none;
    border-radius: 5px;
    padding: 5px;
    color: #fff;
    font-size: 12px;
    cursor: pointer;
    flex: 1;
}

.btn-in-transfer {
    background: #13ce2f;
}

.btn-out-transfer {
    background: #ff0000;
}

/* agent dropdown */
.help-nav {
    display: flex;
    align-items: center;
    width: 100%;
    justify-content: space-between;
    padding-top: 100px;
}

.help-nav .left {
    display: flex;
    align-items: center;
}

.help-nav .left img.link {
    transition: all .3s;
}

.help-nav .left img.link:hover {
    transform: scale(1.04);
}

.help-nav .left img {
    width: 240px;
    cursor: pointer;
}

.help-nav .left .title {
    margin-left: 50px;
}

.help-nav .left .title span {
    font-size: 40px;
    font-weight: 700;
}


.help-nav .left .title p {
    font-size: 24px;
    margin: 10px 0 20px;
}

.help-nav .left .title img {
    width: 400px;
}

.help-nav .right {
    display: flex;
    align-items: center;
}

.help-nav .right .row {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-left: 16px;
}

.help-nav .right .row span {
    font-size: 18px;
    font-weight: 700;
    display: block;
    margin-bottom: 10px;
}

.help-nav .right .row p {
    text-align: center;
    font-size: 12px;
    margin-top: 10px;
    line-height: 20px;
}

.navbar_ul li .help-nav a:after {
    background-color: transparent;
}

/* end agent dropdown */


/* promo dropdown */
.help-nav-discount {
    display: flex;
    align-items: center;
}

.help-nav-discount ul {
    list-style-type: none;
}

.help-nav-discount li {
    display: flex;
    flex-direction: column;
}

.help-nav-discount li .img1 {
    width: 300px;
}

.help-nav-discount li .link-img {
    width: 290px;
}

.link-img {
    transition: all .3s;
    cursor: pointer;
}

.link-img:hover {
    transform: scale(1.04);
}

/*  end promo dropdown */

/* app dropdown */
.help-nav-download {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.help-nav-download .row {
    display: flex;
    align-items: center;
    margin: 0 30px;
    flex-wrap: nowrap;
}

.help-nav-download .row .left {
    width: 240px;
    margin-right: 16px;
    flex-shrink: initial;

}

.help-nav-download .row .right {
    display: flex;
    flex-direction: column;
    flex-shrink: initial;
}

.help-nav-download .row .right .title {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 10px;
}

.help-nav-download .row .right p {
    text-align: center;
    margin-top: 8px;
    font-size: 12px;
}

.help-nav-download .row .right .small {
    white-space: nowrap;
    display: block;
}

.help-nav-download .row .right a {
    color: #2599f8;
}

/* new afterlogin layout */
.user-left {
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(152, 161, 182, .04);
    background-color: #fff;
    width: 220px;
    height: auto;
    padding-top: 24px;
    margin-right: 16px;
    flex: none;
}

.userInfo {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.userInfo .photo {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    overflow: hidden;
    position: relative;
    cursor: pointer;
}

.userInfo .photo img {
    width: 100%;
    height: 100%;
}

.userInfo .name {
    display: flex;
    align-items: center;
    margin-top: 12px;
}

.userInfo .name .text {
    height: 20px;
    line-height: 20px;
    font-size: 14px;
    color: #788b9d;
    font-weight: 400;
}

.userInfo .name .level {
    display: inline-block;
    vertical-align: middle;
    margin-left: 5px;
    cursor: pointer;
    width: 52px;
    height: 24px;
}

.userInfo .name .level img {
    width: 100%;
    height: 100%;
}

.userInfo .time {
    height: 17px;
    line-height: 17px;
    font-size: 12px;
    margin-top: 4px;
    color: #788b9d;
}

.userInfo ul {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 16px 24px;
    margin: 0px;
}

.userInfo ul li {
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
}

.userInfo ul li .icon {
    position: relative;
    width: 32px;
    height: 32px;
}

.userInfo ul li.hover .icon .mr,
.userInfo ul li:hover .icon .mr {
    display: none;
}

.userInfo ul li.hover .icon .xz,
.userInfo ul li:hover .icon .xz {
    display: block;
}

.userInfo ul li .icon .xz {
    display: none;
}

.userInfo ul li .icon img {
    width: 100%;
}

.userInfo ul li.hover p,
.userInfo ul li:hover p {
    color: #2599f8;
}

.user-nav {
    padding: 0 12px;
}

.user-nav ul {
    padding: 16px 0;
    border-bottom: 1px solid #e4e8eb;
    margin: 0px;
}

.user-nav ul li {
    position: relative;
    overflow: hidden;
    background: transparent;
    border-left: 3px solid transparent;
    display: flex;
    align-items: center;
    cursor: pointer;
    color: #788b9d;
    height: 52px;
}

.user-nav ul li.hover,
.user-nav ul li:hover {
    background: #f4faff;
    border-radius: 12px
}

.user-nav ul li.hover .icon .xz,
.user-nav ul li:hover .icon .xz {
    display: block
}

.user-nav ul li.hover .icon .mr,
.user-nav ul li:hover .icon .mr {
    display: none
}

.user-nav ul li.hover .text,
.user-nav ul li:hover .text {
    color: #2599f8
}

.user-nav ul li .icon {
    width: 20px;
    margin: 0 10px 0 16px;
}

.user-nav ul li .icon img {
    width: 100%;
}

.user-nav ul li .icon .xz {
    display: none;
}

.user-main {
    display: flex;
    flex-direction: column;
    flex: 1 1;
    min-height: inherit;
    z-index: 2;
    overflow: hidden
}

.finance-box {
    box-shadow: 0 4px 16px rgba(152, 161, 182, .04);
    width: 100%;
    background: #fff;
    border-radius: 12px;
    padding: 16px 24px;
    display: flex;
    align-items: center;
    margin-bottom: 16px;
    justify-content: space-between
}

.finance-title {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.finance-box .left {
    font-weight: 500;
    font-size: 24px;
    color: #30383f
}

.finance-box .right {
    display: flex;
    align-items: center;
    cursor: pointer
}

.finance-box .right .icon {
    width: 24px;
    height: 24px
}

.finance-box .right span {
    color: #606f7e;
    font-size: 14px
}

.user-box {
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(152, 161, 182, .04);
    background-color: #fff;
    padding: 16px 20px 24px;
    margin-bottom: 16px;
    overflow: visible;
    width: 100%;
}

.user-box-title {
    font-weight: 700;
    color: #30383f;
    font-size: 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}

.pay-list ul {
    margin: 0;
    margin-top: 16px;
    display: flex;
    flex-wrap: wrap;
    list-style-type: none;
}

.pay-list li {
    position: relative;
    width: 130.4px;
    height: 74px;
    border: 1px solid #f4faff;
    text-align: center;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-flow: column nowrap;
    margin: 0 12px 12px 0;
    cursor: pointer;
    background: #f4faff;
}

.hover-target,
.pay-list .nav-tabs li.active,
.usdt-type-list.nav-tabs li.active {
    border: 1px solid #2599f8 !important;
}

.hover-target:before,
.pay-list .nav-tabs li.active:before,
.usdt-type-list.nav-tabs li.active:before {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    border: 10px solid transparent;
    border-right: 10px solid #2599f8;
    border-bottom: 10px solid #2599f8;
    border-radius: 0 0 6px 0;
}

.pay-list .nav-tabs,
.usdt-type-list.nav-tabs {
    border-bottom: 0px;
}

.pay-list li .img {
    width: 32px;
    height: 32px;
}

.pay-list li .name {
    line-height: 1.5;
    max-width: 120px;
    overflow: hidden;
    font-size: 14px;
    color: #788b9d;
}

.pay-list li .gift {
    font-size: 12px;
    height: 16px;
    line-height: 16px;
    max-width: 100px;
    overflow: hidden;
    color: #e95b5b;
    margin: 0px;
}

.hover-target:after,
.pay-list .nav-tabs li.active:after,
.usdt-type-list.nav-tabs li.active:after {
    content: "";
    position: absolute;
    right: 3px;
    bottom: 3px;
    width: 5px;
    height: 10px;
    border-right: 2px solid #fff;
    border-bottom: 2px solid #fff;
    transform: rotate(45deg);
    z-index: 2;
    border-radius: 2px;
}

.pay-list li .hots {
    width: 28px;
    height: 16px;
    position: absolute;
    right: -5px;
    top: -5px;
}

.usdt-step {
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(152, 161, 182, .04);
    background-color: #fff;
    padding: 16px 24px;
    margin-bottom: 16px;
    flex: none;
}

.usdt-step strong {
    font-weight: 400;
    font-size: 14px;
    color: #179cff;
    margin-bottom: 10px;
    display: block;
}

.usdt-step ul {
    width: 580px;
    height: 32px;
    background: url(../images/afterlogin/deposit/step.png) no-repeat 0;
    background-size: cover;
    background-size: contain;
    display: flex;
    align-items: center;
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.usdt-step ul li {
    color: #179cff;
    font-size: 12px;
    width: 140px;
    text-align: center;
}

.user-box-title .sec {
    display: flex;
    align-items: center;
    font-size: 14px;
    font-weight: 400;
    cursor: pointer;
    color: #30383f;
}

.user-box-title .sec img {
    width: 20px;
    margin-right: 2px;
}

.usdt-type-list {
    display: flex;
    align-items: center;
    margin: 0px;
    padding: 0px;
    margin-top: 12px;
}

.usdt-type-list li {
    width: 166px;
    height: 40px;
    border-radius: 8px;
    background: #f3faff;
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position: relative;
    margin-right: 16px;
}

.user-pay-money {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    padding: 0px;
    margin-top: 12px;
    margin-bottom: -12px;
}

.user-pay-money li {
    margin-bottom: 12px;
    margin-right: 8px;
    width: 110px;
    height: 36px;
    border-radius: 8px;
    border: 1px solid #f4faff;
    background-color: #f4faff;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    color: #30383f;
    position: relative;
    font-style: normal;
    font-weight: 500;
    font-size: 16px;
    line-height: 20px;
}

.pay-input {
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 56px;
    width: 344px;
    height: 56px;
    background: #f4faff !important;
    border-radius: 12px;
    margin: 12px 0;
    color: #30383f;
    border: 1px solid #f4faff !important;
}

.pay-input i {
    color: #788b9d;
}

input.pay-input {
    border: none;
    padding: 0 12px;
}

.pay-gray-tips,
.pay-red-tips {
    min-height: 16px;
    font-style: normal;
    font-weight: 400;
    font-size: 12px;
    line-height: 16px;
    color: #788b9d;
    margin-bottom: 12px;
}

.text-blue {
    color: #2599f8;
}

/* .el-button--primary.is-disabled,
.el-button--primary.is-disabled:active,
.el-button--primary.is-disabled:focus,
.el-button--primary.is-disabled:hover {
    color: #fff;
    background-color: #a0cfff;
    border-color: #a0cfff;
}

.el-button--primary {
    color: #fff;
    background-color: #409eff;
    border-color: #409eff;
}

.el-button--default:hover {
    color: #409eff;
    background: #ecf5ff;
    border-color: #c6e2ff;
}

.el-button {
    display: inline-block;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    background: #fff;
    border: 1px solid #dcdfe6;
    color: #606266;
    -webkit-appearance: none;
    text-align: center;
    box-sizing: border-box;
    outline: 0;
    margin: 0;
    transition: .1s;
    font-weight: 500;
    padding: 12px 20px;
    font-size: 14px;
    border-radius: 4px;
} */

.blue-btn {
    color: #fff;
    background-color: #409eff;
    border: 1px solid #409eff;
    display: inline-block;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    -webkit-appearance: none;
    text-align: center;
    box-sizing: border-box;
    outline: 0;
    margin: 0;
    transition: .1s;
    font-weight: 500;
    padding: 12px 20px;
    font-size: 14px;
    border-radius: 4px;
}

.blue-btn:hover {
    color: #fff;
    background: #66b1ff;
    border-color: #66b1ff;
}

.blue-btn.is-disabled,
.blue-btn.is-disabled:active,
.blue-btn.is-disabled:focus,
.blue-btn.is-disabled:hover {
    color: #fff;
    background-color: #a0cfff;
    border-color: #a0cfff;
}

.white-btn {
    display: inline-block;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    background: #fff;
    border: 1px solid #dcdfe6;
    color: #606266;
    -webkit-appearance: none;
    text-align: center;
    box-sizing: border-box;
    outline: 0;
    margin: 0;
    transition: .1s;
    font-weight: 500;
    padding: 12px 20px;
    font-size: 14px;
    border-radius: 4px;
}

.white-btn:hover {
    color: #409eff;
    background: #ecf5ff;
    border-color: #c6e2ff;
}

.pay-red-tips {
    color: #e95b5b;
    margin-top: 12px;
}

.three-load {
    width: 320px;
    height: 61px;
    padding: 8px;
    display: flex;
    align-items: center;
    font-size: 12px;
    position: relative;
    background: url(../images/afterlogin/main/yi-bg.png) no-repeat 50%;
    background-size: cover;
}

.three-load img {
    width: 30px;
    margin-right: 6px;
}

.three-load .sec {
    flex: 1;
}

.three-load .sec span {
    font-weight: 500;
    font-size: 14px;
    height: 20px;
    line-height: 20px;
    color: #303442;
}

.three-load .sec p {
    height: 21px;
    margin: 0px;
    margin-top: 4px;
    font-weight: 500;
    font-size: 12px;
    line-height: 21px;
    padding: 0 8px;
    background: rgba(23, 156, 255, .15);
    color: #179cff;
    border-radius: 19px;
    display: inline-block;
}

.three-load .load {
    cursor: pointer;
    width: 64px;
    height: 24px;
    background: #179cff;
    border-radius: 4px;
    font-family: PingFang SC;
    font-style: normal;
    font-weight: 500;
    font-size: 12px;
    line-height: 24px;
    text-align: center;
    color: #fff;
}

.dir-step .dir-row-step {
    text-align: center;
    font-size: 18px;
    color: #30383f;
    font-weight: 700;
    padding: 10px 0;
}

.dep-tooltip {
    visibility: hidden;
    position: absolute;
    z-index: 2;
    min-width: 310px;
    color: white;
    font-size: 12px;
    line-height: 1.2;
    word-wrap: break-word;
    background-color: #000;
    border-radius: 10px;
    padding: 10px 15px 10px 15px;
}

.dep-tooltip::before {
    content: "";
    position: absolute;
    transform: rotate(45deg);
    background-color: #000;
    padding: 5px;
    z-index: 1;
}

.hover-text:hover .dep-tooltip {
    visibility: visible;
}

#dep-bottom {
    top: 25px;
    right: -15%;
}

#dep-bottom::before {
    top: -6%;
    right: 12%;
}

.fades {
    opacity: 0;
    transition: opacity 0.5s;
}

.hover-text:hover .fades {
    opacity: 1;
}

.hover-text {
    position: relative;
    display: inline-block;
    text-align: left;
}

.user-right {
    display: flex;
    flex-direction: column;
    flex: none;
    z-index: 1;
}

.user-jv {
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(152, 161, 182, .04);
    background-color: #fff;
    width: 200px;
    height: auto;
    min-height: 360px;
    padding: 16px 14px;
}

.user-jv .title {
    display: flex;
    justify-content: space-between;
}

.user-jv .title .text {
    color: #30383f;
    text-align: justify;
    font-size: 14px;
    font-weight: 500;
    line-height: 22px;
}

.user-jv .title .more {
    color: #2599f8;
    font-size: 12px;
    display: flex;
    align-items: center;
    cursor: pointer;
}

.user-jv .title .more i {
    width: 7px;
    height: 7px;
    transform: rotate(45deg);
    border-top: 1px solid #2599f8;
    border-right: 1px solid #2599f8;
}

.user-jv-node {
    font-size: 12px;
    line-height: 17px;
    margin-top: 150px;
    text-align: center;
    color: #788b9d;
}

.user-jv:last-child {
    flex: 1 1;
}

.user-cark {
    margin-top: 16px;
    min-height: 460px;
    flex: 1 1;
}

.discount-list {
    margin-top: 12px;
}

.discount-list ul {
    list-style-type: none;
    margin: 0px;
    padding: 0px;
}

.discount-list li {
    width: 100%;
    margin-bottom: 12px;
    cursor: pointer;
}

.discount-list li img {
    width: 100%;
}

.help-list {
    margin-top: 20px;
}

.help-list ul {
    list-style-type: none;
    margin: 0px;
    padding: 0px;
}

.help-list li {
    height: 44px;
    line-height: 44px;
    font-size: 14px;
    cursor: pointer;
    margin-bottom: 16px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #48535e;
}

/* end new afterlogin layout  */

/* how to deposit modal */
#how-dep-modal .modal-dialog {
    max-width: 900px;
}

#how-dep-modal .modal-content {
    background: #fff;
    border: none;
    border-radius: 12px;
}

.how-dep-header {
    padding: 20px 10px;
    background: #fff;
    border-radius: 10px 10px 0px 0px;
    border-bottom: 1px solid #f2f2f6;
}

.how-dep-header h5 {
    color: #000;
    text-align: center;
    margin: 0px;
}

.how-dep-header .btn-close {
    position: absolute;
    top: 8px;
    right: 10px;
    background: none;
    font-size: 25px;
    color: #adadad;
}

.how-dep-content .nav {
    margin-bottom: 10px;
}

.how-dep-content .dropdown-toggle {
    background-color: #fff;
    border: 1px solid #f1f3f5;
    width: 250px;
    text-align: left;
    position: relative;
}

.how-dep-content .dropdown-toggle::after {
    position: absolute;
    right: 9px;
    top: 6px;
    content: "\f078";
    font-family: 'Font Awesome 5 Free';
    color: #adadad;
    border: none;
    font-weight: 900;
}

.how-dep-content .dropdown-item {
    display: flex;
    gap: 5px;
    align-items: center;
}

.how-dep-content .dropdown-item img {
    max-width: 20px;
}

.how-dep-content .dropdown-menu {
    width: 250px;
}

.how-dep-content .dropdown-menu .nav-link {
    padding: 10px;
    color: #606266;
}

.how-dep-content .dropdown-toggle img {
    display: none;
}

.how-dep-content .dropdown-item.active,
.how-dep-content .dropdown-item:active {
    background: #f5f7fa;
    color: #409eff;
    border-radius: 0px;
}

.how-dep-wrap {
    max-height: 500px;
    overflow-y: scroll;
    padding: 0px 10px;
}

/* end how to deposit modal */


/* deposit tutorial page */
.user-main1 {
    flex: 1;
    background: #fff;
    border-radius: 14px;
    padding: 16px 36px
}

.defalut-reture {
    margin-bottom: 0;
    font-size: 20px;
    line-height: 28px;
    font-weight: 500;
    color: #303442;
    display: flex;
    align-items: center;
    cursor: pointer
}

.defalut-reture img {
    height: 20px
}

.intro-title {
    width: 100%;
    text-align: center;
    margin: 30px auto
}

.intro-title img {
    height: 40px
}

.intro-li ul {
    list-style-type: none;
    margin: 0px;
    padding: 0px;
}

.intro-li li {
    text-align: left;
    font-size: 14px;
    color: #494d62;
    margin-bottom: 18px;
    padding: 5px 0 5px 32px;
    position: relative
}

.intro-li li:before {
    content: "";
    position: absolute;
    left: 10px;
    top: 10px;
    width: 10px;
    height: 10px;
    background-image: url(../images/afterlogin/deposit/tutorial/link.png);
    background-size: cover;
    background-position: 50%
}

.intro-url li,
.intro-url ul {
    display: flex;
    align-items: center
}

.intro-url ul {
    justify-content: space-between;
    list-style-type: none;
    margin: 0px;
    padding: 0px;
    gap: 5px;
}

.intro-url li {
    width: 290px;
    height: 250px;
    background: #f7f9fb;
    padding: 13px 24px 0;
    flex-direction: column
}

.intro-url li img {
    width: 114px;
    height: 114px
}

.intro-url li span {
    font-weight: 700;
    font-size: 18px;
    color: #494d62;
    padding: 3px 0
}

.intro-url li p {
    font-size: 12px;
    line-height: 1.5;
    text-align: justify;
    color: #494d62;
    margin-top: 16px
}

.intro-info {
    justify-content: space-between;
    padding: 40px
}

.intro-info,
.intro-info-row {
    display: flex;
    align-items: center
}

.intro-info-row .img {
    display: flex;
    flex-direction: column;
    font-size: 24px;
    font-weight: 400;
    text-align: center;
    color: #494d62
}

.intro-info-row .img img {
    /* width: 72px;
    height: 72px; */
    margin-bottom: 10px
}

.intro-info-row .main img {
    height: 24px;
    margin-top: 8px
}

.intro-playte {
    background: #f7f9fb;
    height: 100px;
    justify-content: space-between;
    padding: 0 50px
}

.intro-playte,
.intro-playte .left {
    display: flex;
    align-items: center
}

.intro-playte .icon {
    width: 36px;
    height: 36px;
    margin-right: 12px;
    background-size: 166px 40px;
    background-image: url(../images/afterlogin/deposit/tutorial/usdt.png);
    background-position: -42px 0
}

.intro-playte .name {
    font-size: 18px;
    font-weight: 700;
    color: #494d62
}

.intro-playte .sec {
    width: 444px;
    font-size: 14px;
    line-height: 1.71;
    color: #494d62;
    text-align: left;
    margin-left: 30px
}

.intro-playte .view {
    text-align: center;
    width: 120px;
    height: 40px;
    border: none;
    color: #fff;
    border-radius: 4px;
    cursor: pointer;
    background: #179cff;
    border-radius: 22px;
    display: flex;
    align-items: center;
    justify-content: center
}

.intro-text {
    width: 100%;
    text-align: center;
    font-size: 14px;
    color: #494d62;
    padding: 16px 0 30px 0
}

/* end deposit tutorial page */

/* transfer page */
.transfer-list ul {
    display: flex;
    align-items: center;
    justify-content: space-between;
    list-style-type: none;
    margin: 0px;
    padding: 0px;
    margin-top: 12px
}

.transfer-list li {
    position: relative;
    height: 100%;
    flex: 1 1;
    height: 107px;
    padding: 20px 12px;
    background: #f4faff;
    border-radius: 12px;
    margin-right: 12px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border: 1px solid transparent
}

.transfer-list li:last-child {
    margin-right: 0
}

.transfer-list li .row {
    display: flex;
    align-items: center;
    justify-content: space-between
}

.transfer-list li .row .left {
    font-family: PingFang SC;
    font-size: 16px;
    line-height: 24px;
    color: #788b9d;
    width: auto;
}

.transfer-list li .row .right {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #e9f5fe;
    border-radius: 20px;
    width: auto;
    height: 24px;
    cursor: pointer;
    color: #2599f8;
    font-size: 12px
}

.transfer-list li .row .right:hover {
    background: #2599f8;
    color: #fff
}

.transfer-list li .row .right:hover .mr {
    display: none
}

.transfer-list li .row .right:hover .xz {
    display: block
}

.transfer-list li .row .right img {
    width: 16px;
    height: 16px
}

.transfer-list li .row .right img.xz {
    display: none
}

.transfer-list li .money {
    font-weight: 500;
    font-size: 28px;
    line-height: 35px;
    color: #30383f;
    display: flex;
    align-items: center
}

.transfer-list li .money i {
    width: 12px;
    height: 20px;
    margin-right: 2px;
    background: url(../images/afterlogin/transfer/yen.png) no-repeat;
    background-size: 100% 100%
}

.transfer-list li .money img {
    width: 12px;
    height: 20px
}

.pay-input {
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 56px;
    width: 344px;
    height: 56px;
    background: #f4faff;
    border-radius: 12px;
    margin: 12px 0;
    color: #30383f;
    border: 1px solid #f4faff
}

.pay-input::-moz-placeholder {
    color: #c9d1d8;
    font-size: 14px
}

.pay-input::placeholder {
    color: #c9d1d8;
    font-size: 14px
}

.pay-input:focus {
    border: 1px solid #2599f8
}

.pay-gray-tips,
.pay-red-tips {
    min-height: 16px;
    font-family: PingFang SC;
    font-style: normal;
    font-weight: 400;
    font-size: 12px;
    line-height: 16px;
    color: #788b9d;
    margin-bottom: 12px
}

.pay-red-tips {
    color: #e95b5b;
    margin-top: 12px
}

.user-pay-money {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    margin-top: 12px;
    margin-bottom: -12px
}

.user-pay-money li {
    margin-bottom: 12px;
    margin-right: 8px;
    width: 110px;
    height: 36px;
    border-radius: 8px;
    border: 1px solid #f4faff;
    background-color: #f4faff;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    color: #30383f;
    position: relative;
    font-style: normal;
    font-weight: 500;
    font-size: 16px;
    line-height: 20px;
}

.transfer-title {
    justify-content: space-between;
    font-weight: 700;
    color: #30383f;
    font-size: 16px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 16px
}

.transfer-title .right {
    display: flex;
    align-items: center;
    font-weight: 400;
    color: #788b9d
}

.transfer-title .right span {
    margin-right: 4px;
    font-size: 14px
}

.transfer-money-list ul {
    display: flex;
    align-items: center;
    flex-flow: wrap;
    list-style-type: none;
    padding: 0;
    margin: 0;
    margin-top: 16px
}

.transfer-money-list ul li {
    width: 150px;
    height: 88px;
    border-radius: 12px;
    margin-right: 12px;
    margin-bottom: 16px;
    padding: 16px 12px;
    position: relative;
    background: #f4faff;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border: 1px solid transparent
}

.transfer-money-list ul li:hover {
    border: 1px solid #2599f8
}

.transfer-money-list ul li:nth-child(4n+4) {
    margin-right: 0
}

.transfer-money-list ul li .name {
    font-size: 14px;
    line-height: 20px;
    display: flex;
    align-items: center;
    color: #788b9d
}

.transfer-money-list ul li .money {
    font-weight: 500;
    font-size: 20px;
    line-height: 24px;
    color: #aeb9c4;
    margin: 0px;
    margin-left: 2px
}

.transfer-money-list ul li .link {
    position: absolute;
    right: 12px;
    top: 14px;
    width: 24px;
    height: 24px;
    background-color: rgba(37, 153, 248, .1);
    background-image: url(../images/afterlogin/transfer/transfer.png);
    background-repeat: no-repeat;
    background-size: 16px 16px;
    background-position: 50% 50%;
    border: none;
    border-radius: 50%;
    cursor: pointer
}

.transfer-money-list ul li .link:hover {
    width: 60px;
    height: 24px;
    border-radius: 20px;
    background: #2599f8;
    transition: all .3s;
    outline: none;
    border: none;
    text-align: center
}

.transfer-money-list ul li .link:hover:before {
    content: "一键回收";
    color: #fff;
    font-size: 12px;
    line-height: 24px
}

.transfer-auto {
    display: flex;
    align-items: center
}

.transfer-auto-row {
    flex: 1;
    padding: 0 11px;
    display: flex;
    align-items: center
}

.transfer-auto-row .in,
.transfer-auto-row .out {
    display: inline-block;
    width: 32px;
    height: 20px;
    line-height: 20px;
    background: rgba(37, 153, 248, .1);
    border-radius: 2px;
    text-align: center;
    color: #2599f8;
    font-size: 12px;
    margin-right: 8px
}

.transfer-auto-row .in {
    color: #77c48f;
    background: rgba(119, 196, 143, .1)
}

.transfer-auto-row .main {
    flex: 1
}

.transfer-auto-img {
    width: 28px;
    height: 28px;
    margin: 0 14px;
    cursor: pointer;
    background: url(../images/afterlogin/transfer/to.png) no-repeat;
    background-size: 100% 100%
}

.transfer-auto-img:hover {
    background: url(../images/afterlogin/transfer/to-h.png) no-repeat;
    background-size: 100% 100%
}

.transfer-input-money {
    position: relative;
    display: inline-block
}

.transfer-input-money .all-in {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    font-family: PingFang SC;
    font-size: 16px;
    line-height: 24px;
    color: #2599f8;
    cursor: pointer
}

.transfer-input-money .unit {
    position: absolute;
    right: 56px;
    top: 50%;
    padding-right: 12px;
    transform: translateY(-50%)
}

.transfer-input-money .unit:before {
    position: absolute;
    content: "";
    right: 0;
    top: 50%;
    width: 1px;
    height: 14px;
    background: #dcdcdc;
    transform: translateY(-50%)
}

.el-select .el-input__inner {
    background: transparent;
    border: none;
    padding: 0
}

.el-input__suffix {
    display: none
}

.text-black {
    color: #2a2b2c !important
}

.form-select.tf-from {
    background-image: none;
    background: transparent;
    border: transparent;
}

select.form-select:focus {
    box-shadow: none !important;
}

.switch {
    position: relative;
    display: inline-block;
    width: 40px;
    height: 20px;
}

.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.tf-switch .switch-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    -webkit-transition: .4s;
    transition: .4s;
}

.tf-switch .switch-slider:before {
    position: absolute;
    content: "";
    width: 16px;
    height: 16px;
    top: 2px;
    left: 2px;
    background-color: white;
    transition: all .3s;
}

input:checked+.switch-slider {
    background-color: #2196F3;
}

input:focus+.switch-slider {
    box-shadow: 0 0 1px #2196F3;
}

input:checked+.switch-slider:before {
    -webkit-transform: translateX(17px);
    -ms-transform: translateX(17px);
    transform: translateX(17px);
}

.switch-slider.round {
    border-radius: 34px;
}

.switch-slider.round:before {
    border-radius: 50%;
}

.tf-modal-header {
    padding: 10px 10px;
    background: #179cff;
    border-radius: 10px 10px 0px 0px;
    border-bottom: 1px solid #f2f2f6;
}

.tf-modal-header h5 {
    color: #fff;
    text-align: center;
    margin: 0px;
}

.tf-modal-header .btn-close {
    position: absolute;
    top: -2px;
    right: 10px;
    background: none;
    font-size: 25px;
    color: #fff;
}

.tf-modal .modal-dialog {
    max-width: 640px;
}

.tf-modal .modal-content {
    background: #fff;
    border: none;
    border-radius: 12px;
}

.check-main {
    max-height: 500px;
    overflow-y: scroll;
    padding: 0px 10px;
}

.check-main h3 {
    margin: 20px 0 10px;
    font-size: 18px;
    font-weight: 600;
}

/* end transfer page */


/* withdrawal page */
.add-bank-list {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 16px;
}

.add-bank-row {
    border-radius: 12px;
    flex-direction: column;
    font-size: 14px;
    color: #fff;
    cursor: pointer;
    background-image: linear-gradient(298deg, #d0d2db, #e6e9f3);
    box-shadow: 0 4px 10px 0 rgba(228, 232, 235, 0.4);
    width: 226px;
    height: 102px;
    margin-bottom: 12px;
    background: linear-gradient(180deg, #f3faff, #e8f5ff);
    box-shadow: none;
    color: #788b9d;
    font-weight: 500;
    justify-content: center;
}

.add-bank-row .name,
.add-bank-row {
    display: flex;
    align-items: center;
}

.add-bank-row .name img {
    width: 16px;
    height: 16px;
    margin-right: 5px;
}

.add-bank-row .sec {
    font-size: 12px;
    margin-top: 4px;
}

.add-bank-row.usdt {
    background: linear-gradient(180deg, #58f1c6, #47c19f);
}

.add-bank-row.ebpay {
    background: linear-gradient(0deg, #548de0, #92b8ee);
}

.add-bank-row.koipay {
    background: linear-gradient(314.81deg, #32bdbc 3.14%, #86e1cd 97%);
}

.bank-bg {
    background-image: linear-gradient(315deg, #d57074, #f7acaf);
    margin-bottom: 12px;
    box-shadow: none;
    color: #788b9d;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 15px;
    padding: 16px;
    position: relative;
}

.bank-bg:nth-child(3n + 3) {
    margin-right: 0;
}

.bank-bg .gou {
    position: absolute;
    top: 6px;
    right: 6px;
    background: hsla(0, 0%, 100%, 0.4);
    border-radius: 100%;
    width: 18px;
    height: 18px;
    opacity: 0.3;
}

.bank-bg .gou:before {
    content: "";
    position: absolute;
    width: 4px;
    height: 7px;
    border-right: 2px solid #fff;
    border-bottom: 2px solid #fff;
    border-radius: 2px;
    top: 50%;
    left: 50%;
    transform: translate(-45%, -54%) rotate(45deg);
}

.bank-bg .bank-name {
    display: flex;
    text-align: left;
    width: 100%;
    flex: 1;
}

.bank-bg .bank-name .icon {
    width: 20px;
    height: 20px;
    background-color: #fff;
    border-radius: 50%;
    margin-right: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.bank-bg .bank-name .icon img {
    width: 80%;
    border-radius: 100%;
    overflow: hidden;
}

.bank-bg .bank-name .info {
    color: #fff;
}

.bank-bg .bank-name .info-name {
    font-size: 14px;
}

.bank-bg .bank-name .info-type {
    font-size: 12px;
    opacity: 0.5;
}

.bank-bg .bank-number {
    color: #fff;
    text-align: left;
    width: 100%;
    padding-left: 24px;
}

.bank-bg .name {
    display: flex;
    align-items: center;
}

.bank-bg .name img {
    width: 16px;
    height: 16px;
    margin-right: 5px;
}

.bank-bg .sec {
    font-size: 12px;
    margin-top: 4px;
}

.bank-bg.hover .gou {
    opacity: 1;
    background: hsla(0, 0%, 100%, 0.8);
}

.bank-bg.hover .gou:before {
    border-right: 2px solid #409eff;
    border-bottom: 2px solid #409eff;
}

.withdrawal-list {
    display: flex;
    align-items: center;
    margin-top: 12px;
}

.withdrawal-list li {
    position: relative;
    padding: 0;
    margin-right: 12px;
    width: 166px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 36px;
    font-size: 14px;
    color: #30383f;
    background: #f4faff;
    border-radius: 10px;
    border: 1px solid transparent;
    cursor: pointer;
}

.withdrawal-list li .small {
    font-size: 12px;
}

.withdrawal-list li .discount {
    background: #e95b5b;
    border-radius: 10px 10px 10px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 18px;
    padding: 1px 4px;
    position: absolute;
    top: -9px;
    right: -6px;
    color: #fff;
}

.withdrawal-list.nav-tabs li.active {
    color: #2599f8;
    border: 1px solid #2599f8;
}

.withdrawal-list.nav-tabs li.active:before {
    content: "";
    position: absolute;
    bottom: 0;
    right: 0;
    width: 20px;
    height: 20px;
    background: url(../images/afterlogin/withdraw/tick.png) no-repeat;
    background-size: 100% 100%;
    background-position: 100% 100%;
}

.withdrawal-list.nav-tabs {
    border-bottom: 0px;
}

.add-bank-list {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 16px;
}

.add-bank-row {
    border-radius: 12px;
    flex-direction: column;
    font-size: 14px;
    color: #fff;
    cursor: pointer;
    background-image: linear-gradient(298deg, #d0d2db, #e6e9f3);
    box-shadow: 0 4px 10px 0 rgba(228, 232, 235, 0.4);
    width: 226px;
    height: 102px;
    margin-bottom: 12px;
    background: linear-gradient(180deg, #f3faff, #e8f5ff);
    box-shadow: none;
    color: #788b9d;
    font-weight: 500;
    justify-content: center;
}

.add-bank-row .name,
.add-bank-row {
    display: flex;
    align-items: center;
}

.add-bank-row .name img {
    width: 16px;
    height: 16px;
    margin-right: 5px;
}

.add-bank-row .sec {
    font-size: 12px;
    margin-top: 4px;
}

.add-money-number {
    padding: 0 40px;
    align-items: flex-start;
}

.add-money-number .sec {
    font-size: 20px;
    color: #30383f;
}

.user-money-list ul {
    display: flex;
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
    list-style-type: none;
    margin-top: 16px;
}

.user-money-list li {
    margin-bottom: 12px;
    margin-right: 8px;
    width: 110px;
    height: 36px;
    border-radius: 8px;
    border: 1px solid #f3faff;
    background-color: #f3faff;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    color: #303442;
    position: relative;
    font-style: normal;
    font-weight: 500;
    font-size: 16px;
    line-height: 20px;
}

.user-money-list li:last-child {
    margin-right: 0;
}

.withModeInfo {
    background-image: linear-gradient(180deg, #f3faff, #e8f5ff);
    border-radius: 12px;
    height: 102px;
    display: inline-block;
    margin-bottom: 16px;
    padding: 24px 0;
    display: flex;
}

.withModeInfo .add-money-number {
    height: 100%;
    background: none;
    box-shadow: none;
    border-radius: 0;
    border-right: 1px solid rgba(0, 0, 0, 0.1);
}

.withModeInfo .add-money-number:last-child {
    border-right: 0;
}


.usdtTransfer {
    margin: 0 0 16px;
    font-size: 12px;
}

.usdtTransfer p {
    margin-top: 6px;
}

.usdtTransfer-sxf {
    padding-left: 10px;
    border-left: 1px solid #eee;
    margin-left: 10px;
}

.wd-content .user-box:last-child {
    margin-bottom: 0px;
}

.mail-detail {
    display: flex;
    align-items: center;
    cursor: pointer;
    margin-bottom: 28px;
}

.mail-detail .icon {
    display: inline-block;
    margin-right: 8px;
    width: 20px;
    height: 20px;
    background: url(../images/afterlogin/inbox/left-arrow.png) no-repeat;
    background-size: 20px 20px;
}

.mail-detail .text {
    line-height: 28px;
    font-size: 20px;
    font-weight: 500;
    color: #48535e;
    margin: 0;
    color: #30383f;
}

.xn-add {
    width: 560px;
    height: 120px;
    border-radius: 12px;
    box-shadow: 0 4px 20px 0 rgba(228, 229, 235, 0.4);
    background: linear-gradient(270deg, #d0d2db, #e6e9f3);
    margin: 30px auto 0;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.xn-add i {
    margin-right: 6px;
    width: 16px;
    height: 16px;
    display: inline-block;
    background-size: cover;
    background-image: url(../images/afterlogin/withdraw/icon-add.png);
}

.xn-add p {
    font-size: 14px;
    color: #fff;
    margin: 0px;
}

.wd-msg-content {
    text-align: center;
    margin: 0 30px;
}

.wd-msg-content p {
    margin: 0px;
    color: #606266;
}

.wd-msg-wrap {
    display: flex;
    padding: 16px 32px;
    align-items: center;
    justify-content: center;
}

.wd-msg-btn {
    width: 80%;
    border-radius: 6px;
    padding: 12px;
    color: #fff;
    background-color: #409eff;
    border: 1px solid #409eff;
}

.addBank {
    width: 560px;
    border: 1px solid #f1f3f5;
    background: #fff;
    border-radius: 4px;
    padding: 28px 56px;
    margin: 0 auto;
}

.wd-label {
    text-align: right;
    vertical-align: middle;
    float: left;
    font-size: 14px;
    color: #606266;
    line-height: 40px;
    padding: 0 12px 0 0;
    box-sizing: border-box;
    width: 120px;
}

.wd-form {
    position: relative;
    font-size: 14px;
    width: 256px;
    align-content: center;
}

.wd-form input,
.pass-form input,
.wd-form select {
    border-radius: 4px;
    box-sizing: border-box;
    color: #606266;
    display: inline-block;
    height: 40px;
    line-height: 40px;
    outline: 0;
    padding: 0 15px;
    transition: border-color .2s cubic-bezier(.645, .045, .355, 1);
    width: 100%;
    border: 1px solid #f1f3f5;
    border-radius: 8px;
}

.input-tips {
    font-size: 12px;
    color: #c9d1d8;
    line-height: 1.5;
    margin-top: 8px;
}

.select-list ul,
.select-list ul li {
    display: flex;
    align-items: center;
    margin: 0;
    padding: 0;
    list-style-type: none;
}

.select-list ul li {
    width: 112px;
    height: 40px;
    line-height: 40px;
    border: 1px solid #f2f2f6;
    border-radius: 8px;
    margin-right: 16px;
    justify-content: center;
    position: relative;
    cursor: pointer;
}

.select-list ul li img {
    width: 20px;
    margin-right: 6px;
}

.wd-phone {
    padding-top: 10px;
    display: block;
}

/* withdrawal page */


/* profile page */
.user-state {
    width: 100%;
    height: 142px;
    border-radius: 4px;
    background-color: #fff;
    padding: 14px 24px;
    margin-top: 16px;
    border: 1px solid #f1f3f5;
    border-radius: 8px;
}

.user-state .big {
    line-height: 20px;
    font-size: 14px;
    color: #30383f;
}

.user-state .small {
    font-size: 12px;
    line-height: 17px;
    margin: 8px 0 0;
    color: #788b9d;
}

.user-state .list {
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid #f2f2f6;
    display: flex;
}

.user-state .list-row {
    display: flex;
    align-items: center;
    margin-right: 24px;
}

.user-state .list-row img {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 6px;
    position: relative;
}

.user-state .list-row span {
    color: #788b9d;
}

.form-box {
    width: 300px;
    margin-top: 26px;
}

.user-secure {
    margin-top: 16px;
}

.user-secure-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 60px;
    border: 1px solid #f2f2f6;
    padding: 12px;
    border-radius: 8px;
    margin-bottom: 24px;
}

.user-secure-row:last-child {
    margin-bottom: 0;
}

.user-secure-row .left img {
    width: 36px;
    height: 36px;
    margin-right: 10px;
}

.user-secure-row .left .text {
    color: #48535e;
}

.user-secure-row .state {
    color: #aeb9c4;
    margin-left: -140px;
}

.user-secure-row .state.set {
    color: #30383f;
}

.user-secure-row .link {
    width: 80px;
    text-align: center;
}

.user-secure-row .link-a {
    width: 80px;
    height: 36px;
    background: #2599f8;
    border-radius: 8px;
    font-weight: 500;
    font-size: 14px;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.text-red {
    color: #e95b5b;
}

.pf-gender {
    width: 70%;
    position: relative;
    font-size: 14px;
    align-content: center;
    display: flex;
    align-items: center;
    gap: 10px;
}

.pf-gender .form-check {
    margin-bottom: 0px;
}

.pf-gender .form-check-input:checked {
    background-color: #409eff;
    border-color: #409eff;
}

.wd-form.pf-date input {
    padding-left: 30px;
}

.wd-form i {
    position: absolute;
    left: 20px;
    top: 12px;
    font-size: 15px;
    color: #c9d1d8;
}

input[type="date"]::-webkit-calendar-picker-indicator {
    background: transparent;
    bottom: 0;
    cursor: pointer;
    height: auto;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    width: auto;
}

.cark-title ul {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.cark-title ul li {
    color: #48535e;
    text-align: center;
    height: 30px;
    padding: 2px 0 12px;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.cark-title ul li.active {
    color: #2599f8;
    border-bottom: 2px solid #2599f8;
}

.bankList-right {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 12px;
    padding: 10px 0;
}

.bankList-right span {
    cursor: pointer;
}

.text-blue {
    color: #2599f8;
}

.user-jv-node span {
    color: #2599f8;
    cursor: pointer;
}

.wid-256 {
    width: 256px;
}

.pf-check-main {
    min-height: 400px;
    overflow-y: scroll;
    padding: 30px 100px;
}

.pf-modal .modal-content {
    background: #fff;
    border: none;
    border-radius: 12px;
}

.pf-modal .blue-btn {
    width: 100%;
    margin-top: 20px;
}

.pf-label {
    font-size: 14px;
    color: #606266;
    line-height: 40px;
}

.pass-form {
    position: relative;
    font-size: 14px;
    align-content: center;
}

.toggle-password {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
}

.pf-form-wrap {
    margin-bottom: 10px;
}

.link-step-text {
    text-align: center;
    margin-top: 16px;
}

/* end profile page */


/* welfare page */
.wf-box-title {
    font-weight: 700;
    color: #30383f;
    font-size: 16px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}


.wf-box-title p {
    font-weight: 400;
    color: #788b9d;
    font-size: 12px;
    width: 100%;
    display: block;
    margin-top: 8px;
}

.yx-wid {
    width: 100%;
}

.search-list {
    margin-top: 16px;
}

.search-list li.search-box {
    width: 100%;
    display: flex;
    align-items: center;
    flex-flow: wrap;
    justify-content: space-between;
}

.search-list ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center;
    flex-flow: wrap;
}

.search-list li {
    width: 360px;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
}

.search-list .input-wid {
    width: 300px;
    display: inline-block;
    position: relative;
}

.search-list li.search-box .left {
    display: flex;
    align-items: center;
}

.tabDate {
    display: flex;
    align-items: center;
    margin-left: 16px;
}

.tabDate-row:first-child {
    border-radius: 4px 0 0 4px;
}

.tabDate-row {
    height: 40px;
    width: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #f1f3f5;
    margin-right: -1px;
    cursor: pointer;
    position: relative;
}

.tabDate-row:last-child {
    border-radius: 0 4px 4px 0;
}

.tabDate-row.hover {
    color: #2599f8;
    border: 1px solid #2599f8;
    z-index: 2;
}

.wd-form.wf-daterange {
    width: 300px;
}

.wd-form.wf-daterange input {
    padding-left: 30px;
}

.wf-daterange i {
    position: absolute;
    left: 10px;
    top: 12px;
    font-size: 15px;
    color: #c9d1d8;
}

.order-tj {
    display: flex;
    box-sizing: border-box;
    border-radius: 12px;
    margin-bottom: 12px;
    padding: 10px 20px;
    background-color: initial;
    border: 1px solid #2599f8;
    align-items: center;
    color: #30383f;
}

.order-tj img {
    width: 20px;
    height: 20px;
    margin-right: 8px;
}

.order-tj span {
    color: #2599f8;
    margin: 0 4px;
}

.wf-table thead {
    color: #909399;
    font-weight: 500;
}

.wf-table thead tr th {
    background: #f4faff;
    font-size: 12px;
    padding: 8px;
    font-weight: 400;
    border-bottom: 0;
    vertical-align: middle;
    color: #909399;
}

.wf-table tbody tr {
    background-color: #fff;
}

.wf-table tbody tr td {
    border-bottom: 0;
    color: #606266;
    vertical-align: middle;
}

.wf-no-data {
    color: #909399;
    font-size: 14px;
    text-align: center;
}

.user-box:last-child {
    margin-bottom: 0;
    flex: 1 1;
}

/* end welfare page */


/* bet record page */
.order-tj-bet {
    box-sizing: border-box;
    border-radius: 12px;
    margin-bottom: 12px;
    padding: 10px 20px;
    background-color: initial;
    border: 1px solid #2599f8;
    color: #30383f;
}

.bet-wrap {
    justify-content: space-between;
    display: flex;
}


.order-tj-bet img {
    width: 20px;
    height: 20px;
    margin-right: 8px;
}

.order-tj-bet .left {
    display: flex;
    align-items: center;
}

.order-tj-bet .right {
    cursor: pointer;
}

.order-tj-bet .right img {
    margin-right: 0;
}

.order-tj-bet span {
    color: #2599f8;
    margin: 0 4px;
}

.bet-num {
    display: none;
    padding-left: 27px;
    margin: 0;
}

/* end bet record page */


/* gift record page */
.gift-img {
    margin-top: 16px;
}

.gift-img .wid {
    width: 100%;
}

.gift-img .gift-tips {
    display: flex;
    align-items: center;
    margin-top: 16px;
    font-size: 12px;
    color: #30383f;
}

.gift-img .gift-tips .link {
    cursor: pointer;
}

.gift-img .gift-tips img {
    width: 18px;
}

/* end gift record page */


/* wallet page */
.my-nav {
    margin: 16px 0;
}

.my-nav-left,
.my-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.my-nav-left {
    border: 1px solid #f1f3f5;
    background-color: #fff;
    border-radius: 4px;
    height: 96px;
    flex: 1;
}

.my-nav-left .row1 {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
}

.my-nav-left .row1:before {
    position: absolute;
    content: "";
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 54px;
    background: #f2f2f6;
}

.my-nav-left .row1:last-child {
    cursor: pointer;
}

.my-nav-left .row1:last-child:before {
    display: none;
}

.my-nav-left .row-top {
    display: flex;
    align-items: center;
}

.my-nav-left .row-top .icon {
    width: 24px;
    height: 24px;
}

.my-nav-left .row-top .text {
    font-size: 12px;
    line-height: 17px;
    margin-left: 4px;
}

.my-nav-left .row-top .link {
    color: #2599f8;
    font-size: 12px;
    cursor: pointer;
    border: 1px solid #2599f8;
    border-radius: 9.5px;
    width: 56px;
    height: 20px;
    line-height: 20px;
    text-align: center;
    margin-left: 10px;
}

.my-nav-left .money {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 6px;
}

.my-nav-left .money .small {
    font-size: 12px;
    margin-right: 2px;
    color: #30383f;
}

.my-nav-left .money .number {
    color: #30383f;
    font-weight: 600;
    font-size: 24px;
}

.my-nav-right {
    margin-left: 12px;
}

.my-nav-right ul {
    border: 1px solid #f1f3f5;
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0;
    padding: 0;
    list-style-type: none;
    border-radius: 4px;
    height: 96px;
    padding: 0 12px;
}

.my-nav-right li {
    text-align: center;
    color: #30383f;
    cursor: pointer;
    margin: 0 2px;
    width: 64px;
}

.my-nav-right li:hover {
    color: #2599f8;
}

.my-nav-right li img {
    width: 40px;
    height: 40px;
}

.my-nav-right li p {
    font-weight: 400;
    line-height: 22px;
    margin: 0px;
    margin-top: 4px;
    text-align: center;
    cursor: pointer;
    font-size: 16px;
    white-space: nowrap;
}

.my-game-list ul {
    display: flex;
    flex-flow: row wrap;
    justify-content: flex-start;
    align-items: flex-start;
    margin: 0;
    padding: 0;
    list-style-type: none;
    margin-top: 12px;
}

.my-game-list ul.hidemenu {
    margin-top: 0px;
}

.my-game-list ul.overHei {
    height: 112px;
    overflow: hidden;
}

.my-game-list li {
    width: 150px;
    height: 84px;
    border-radius: 8px;
    margin-right: 12px;
    margin-bottom: 16px;
    border: 1px solid #f1f3f5;
    padding: 16px 12px;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.my-game-list li:nth-child(4n + 4) {
    margin-right: 0;
}

.my-game-list li .name {
    font-size: 14px;
    line-height: 22px;
    display: flex;
    align-items: center;
    color: #788b9d;
    justify-content: space-between;
}

.my-game-list li p {
    display: flex;
    align-items: center;
}

.my-game-list li p .fh {
    margin-top: 5px;
    color: #30383f;
    font-size: 12px;
}

.my-game-list li p .number {
    margin-left: 4px;
    color: #303442;
    font-weight: 600;
    font-size: 24px;
}

.my-game-list li .link {
    font-size: 12px;
    width: 56px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    text-align: center;
    background-color: initial;
    outline: none;
    border: 1px solid #2599f8;
    color: #2599f8;
}

.my-ss-link {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #2599f8;
    cursor: pointer;
}

.my-ss-link.hover img {
    transform: rotate(180deg);
    transition: all 0.4s;
}

.my-ss-link img {
    width: 16px;
    margin-left: 6px;
    position: relative;
}

.wallet-add-tab .nav {
    overflow: hidden;
    width: 100%;
    display: flex;
    align-items: center;
    position: relative;
    margin-bottom: 16px;
}

.wallet-add-tab li {
    color: #48535e;
    text-align: center;
    height: 30px;
    padding: 8px 0 14px;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 32px;
    cursor: pointer;
    border-bottom: 2px solid transparent;
}

.wallet-add-tab li:first-child {
    margin-left: 0;
}

.wallet-add-tab li.active {
    position: relative;
    z-index: 2;
    color: #2599f8;
    border-bottom: 2px solid #2599f8;
    text-shadow: 0 0 .25px currentColor;
}

/* end wallet page */


/* inbox page */
.mail-tab .nav {
    display: flex;
    flex-wrap: nowrap;
    justify-content: left;
    width: 242px;
    height: 35px;
    background-color: #f4faff;
    padding: 1px;
    border-radius: 8px;
}

.mail-tab .nav .nav-item {
    text-align: center;
    width: 50%;
    height: 33px;
    line-height: 33px;
    color: #788b9d;
    font-weight: 500;
    font-size: 18px;
    border-radius: 8px;
    position: relative;
    cursor: pointer;
}

.mail-tab .nav .nav-item.active {
    color: #30383f;
    background-color: #fff;
}

.mail-tab-list .nav {
    display: flex;
    justify-content: left;
    border-bottom: 1px solid #f1f3f5;
    height: 46px;
    margin-top: 16px;
    position: relative;
}

.mail-tab-list .nav .nav-item {
    height: 46px;
    font-size: 16px;
    padding: 12 0;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    position: relative;
    margin-right: 35px;
    color: #30383f;
    cursor: pointer;
}

.mail-tab-list .nav .nav-item.active {
    color: #2599f8;
}

.mail-tab-list .nav .nav-item.active:after {
    transition: 0.2s;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    content: "";
    height: 2px;
    background-color: rgba(255, 0, 0, 0);
    width: 100%;
    background-color: #2599f8;
}

.red-number {
    position: absolute;
    top: 2px;
    right: 0;
    width: auto;
    display: block;
    white-space: nowrap;
    padding: 0 5px;
    color: #fff;
    font-size: 11px;
    height: 16px;
    border-radius: 8px;
    background: #e95b5b;
    line-height: 16px;
    transform: translateX(60%);
    z-index: 10;
}

.mail-list {
    margin-top: 16px;
    min-height: 680px;
}

.mail-list-row {
    display: flex;
    align-items: center;
    border-bottom: 1px solid #efeff4;
    cursor: pointer;
    font-size: 14px;
    height: 77px;
}

.mail-list-row .checkbox {
    margin-right: 16px;
}

.mail-list-row .icon {
    width: 28px;
    height: 28px;
    background: url(/img/icon71.6cdf24d3.png) no-repeat;
    background-size: 100% 100%;
    margin-right: 16px;
    position: relative;
}

.mail-list-row .icon .red {
    position: absolute;
    top: 0;
    right: 0;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: #e95b5b;
}

.mail-list-row .show {
    margin-right: 10px;
}

.mail-list-row .main {
    flex: 1 1;
}

.mail-list-row .main p,
.mail-list-row .main span {
    word-break: break-all;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #30383f;
    white-space: nowrap;
}

.mail-list-row .main p {
    width: 704px;
    color: #788b9d;
    margin-top: 8px;
}

.mail-list-row .time {
    color: #788b9d;
    text-align: right;
    margin-bottom: 22px;
}

.mail-opear {
    position: absolute;
    right: 0;
    top: 50%;
    display: flex;
    align-items: center;
    transform: translateY(-50%);
}

.mail-opear .span {
    display: flex;
    align-items: center;
    margin-left: 16px;
    cursor: pointer;
}

.mail-opear img {
    width: 24px;
    height: 24px;
    margin-right: 4px;
}

.mail-opear a {
    color: #788b9d;
}

.mail-opear .link {
    cursor: pointer;
    background-color: #2599f8;
    display: flex;
    flex-direction: row;
    justify-content: center;
    color: #fff;
    padding: 4px 12px;
    border-radius: 8px;
    width: 48px;
    height: 28px;
    font-size: 12px;
}

.div2 {
    display: none;
}

.msg-tab-content {
    padding-top: 20px;
}

.msg-tab-box {
    gap: 10px;
    padding: 10px 0px 15px;
    border-bottom: 1px solid #bed0c8;
}

.msg-tab-box.edit {
    display: grid;
    grid-template-columns: 2% auto;
    align-items: center;
}

.msg-tab-left {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
}

.msg-left-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
}

.msg-icon {
    position: relative;
    font-size: 20px;
}

.msg-red-dot {
    position: absolute;
    right: -2px;
    top: 3px;
}

.msg-title {
    color: #2599f8;
    font-weight: bold;
}

.msg-text {
    color: #616c76;
    font-size: 13px;
    padding-top: 5px;
    max-width: 700px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.msg-tab-date {
    color: #616c76;
    font-size: 13px;
}

.unread {
    filter: opacity(50%);
}

.msg-no-more {
    text-align: center;
    padding: 30px 0px;
    color: #616c76;
}

.msg-checkbox {
    position: relative;
    font-size: 14px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    height: 15px;
    width: 15px;
    color: rgb(97, 97, 97);
}

.msg-checkbox::before {
    content: " ";
    display: inline-block;
    vertical-align: middle;
    height: 15px;
    width: 15px;
    background-color: #fff;
    border: 1px solid #616c76;
    border-radius: 2px;
    box-shadow: none;
}

.msg-checkbox:checked::after {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: 0px;
    left: 0px;
    top: 0px;
    text-align: center;
    background-color: transparent;
    font-size: 10px;
    height: 15px;
    width: 15px;
    content: "\f00c";
    font-family: FontAwesome;
    background-color: rgb(67, 176, 42);
    border: 1px solid #616c76;
    color: #fff;
}

.msg-checkbox-1 {
    position: relative;
    font-size: 14px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    height: 15px;
    width: 15px;
    color: rgb(97, 97, 97);
    appearance: none;
    -webkit-appearance: none;
}

.msg-checkbox-1::before {
    content: " ";
    display: inline-block;
    vertical-align: middle;
    height: 15px;
    width: 15px;
    background-color: #fff;
    border: 1px solid #616c76;
    border-radius: 50px;
    box-shadow: none;
}

.msg-checkbox-1:checked::after {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: 0px;
    left: 0px;
    top: 0px;
    text-align: center;
    background-color: transparent;
    font-size: 6px;
    height: 16px;
    width: 16px;
    content: "\f111";
    font-family: FontAwesome;
    background-color: rgb(67, 176, 42);
    border: 1px solid rgb(55, 148, 36);
    color: #fff;
    border-radius: 50px;
}

.msg-select-all {
    display: flex;
    align-items: center;
    gap: 5px;
}

a.msg-submit-btn {
    background: url(../images/inbox/Button_Submit.png) no-repeat;
    background-position: center bottom;
    background-size: 100% 100%;
    padding: 3px 12px;
    color: #fff;
    display: block;
}

a.msg-submit-btn:hover {
    color: #ffe418;
}

.msg-detail-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #949595;
    padding-bottom: 15px;
}

.msg-detail-info h5 {
    color: #2599f8;
    font-weight: bold;
    font-size: 18px;
    margin-bottom: 3px;
}

.msg-detail-info span {
    color: #bcc0d1;
    font-size: 13px;
}

.msg-detail-icon {
    display: flex;
    align-items: center;
    gap: 30px;
}

.msg-detail-icon a {
    color: #616c76;
    display: flex;
    align-items: center;
    gap: 5px
}

.msg-detail-icon a:hover {
    color: #32ab5c;
}

.msg-detail-icon a:hover img {
    filter: invert(59%) sepia(9%) saturate(3097%) hue-rotate(88deg) brightness(92%) contrast(80%);
}

.msg-detail-content {
    padding: 30px 0px 20px;
}

.msg-detail-content p {
    color: #808ea8;
}

.msg-space {
    text-indent: 30px;
}

/* end inbox page */


/* new vip page */
.vip-one {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.vip-one-left {
    display: flex;
    align-items: center;
    margin: -20px 0 0 -14px;
}

.vip-one-left .level {
    width: 128px;
    height: 128px;
}

.vip-one-left .info span {
    line-height: 28px;
    margin-bottom: 8px;
    font-size: 20px;
    color: #48535e;
    font-family: PingFang SC;
    color: #30383f;
    display: block;
}

.vip-one-left .info p {
    line-height: 20px;
    font-size: 14px;
    color: #788b9d;
}

.vip-one-right .vip-row-a {
    outline: none;
    border: none;
    line-height: 40px;
    text-align: center;
    font-size: 14px;
    cursor: pointer;
    color: #fff;
    width: 200px;
    height: 40px;
    border-radius: 4px;
    background-image: linear-gradient(269.71deg, #2599f8 0.3%, #51adf9 99.8%);
    width: 137px;
    /* height: 44px; */
    border-radius: 8px;
    font-size: 16px;
    display: inline-block;
}

.vip-level {
    padding: 56px 24px 0;
}

.vip-level ul {
    height: 12px;
    background: url(../images/vip/vip-level.png) no-repeat;
    background-size: 100% 100%;
    display: flex;
    align-items: center;
    margin: 0;
    padding: 0;
    list-style-type: none;
}

.vip-level ul li {
    flex: 1;
    text-align: right;
    position: relative;
}

.vip-level ul li:first-child {
    width: 1px;
    flex: none;
}

.vip-level ul li:first-child span {
    left: 0;
    right: auto;
    transform: translateX(-50%);
}

.vip-level ul li:first-child span.hover {
    left: 0;
    right: auto;
}

.vip-level ul li span {
    position: absolute;
    bottom: 14px;
    right: 0;
    transform: translateX(50%);
    color: #48535e;
    font-size: 12px;
    cursor: pointer;
    font-weight: 700;
}

.vip-level ul li span.hover {
    width: 36px;
    height: 36px;
    line-height: 15px;
    text-align: center;
    font-size: 12px;
    font-family: DinProBold;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #2599f8;
    border-radius: 100%;
}

.vip-level ul li span.hover:before {
    position: absolute;
    content: "";
    bottom: -6px;
    border: 6px solid transparent;
    border-bottom: 0;
    border-top: 8px solid #2599f8;
}

.vip-level-next {
    box-sizing: border-box;
    border-radius: 12px;
    background-color: #f6f9fb;
    margin: 12px 0 0;
    overflow: hidden;
    background: #f4faff;
    padding: 24px 24px 0;
    display: flex;
    flex-direction: column;
}

.vip-level-next .text {
    font-size: 14px;
    color: #2599f8;
    margin-bottom: 10px;
}

.vip-level-next .level-load {
    display: flex;
    align-items: center;
    margin-bottom: 16px;
}

.vip-level-next .level-load .bg {
    width: 300px;
    height: 8px;
    margin: 0 12px;
    border-radius: 4px;
    vertical-align: middle;
    background-color: #e9f5fe;
    position: relative;
}

.vip-level-next .level-load .bg .loading {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    background: #2599f8;
    border-radius: 4px;
    transition: all 0.2s;
    width: 0;
}

.vip-level-next .level-load .unit {
    color: #2599f8;
}

.user-zx ul {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0;
    padding: 0;
    list-style-type: none;
    padding-top: 24px;
}

.user-zx ul li {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
}

.user-zx ul li .icon {
    width: 60px;
    height: 60px;
}

.user-zx ul li span {
    font-size: 24px;
    color: #30383f;
    font-weight: 600;
    line-height: 34px;
    margin: 8px 0;
}

.user-zx ul li p {
    font-size: 14px;
}

.vip-ing ul {
    display: flex;
    align-items: center;
    padding: 25px 0 28px;
}

.vip-ing ul li {
    flex: 1;
    text-align: center;
    position: relative;
}

.vip-ing ul li:after {
    content: "";
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 36px;
    background-color: #ebedf0;
}

.vip-ing ul li:last-child:after {
    display: none;
}

.vip-ing ul li span {
    line-height: 26px;
    margin-bottom: 7px;
    font-size: 20px;
    font-weight: 500;
    color: #2599f8;
    display: block;
}

.vip-ing ul li p {
    line-height: 20px;
    font-size: 14px;
    color: #788b9d;
}

.vip-ing .vip-cg {
    display: flex;
    flex-direction: column;
    width: 240px;
}

.vip-ing .vip-cg span {
    line-height: 20px;
    margin-bottom: 12px;
    font-size: 14px;
    color: #48535e;
}

.vip-ing .vip-cg .link {
    margin-top: 12px;
}

.vip0-ing {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 50px 0;
}

.vip0-ing span {
    display: block;
    /* margin-bottom: 10px; */
}

.user-box-title.vip {
    justify-content: initial;
}

.user-box-title .title-icon {
    width: 14px;
    height: 14px;
    margin-left: 4px;
}

.blue-btn-1 {
    color: #409eff;
    background: #ecf5ff;
    border: 1px solid #b3d8ff;
    display: inline-block;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    -webkit-appearance: none;
    text-align: center;
    box-sizing: border-box;
    outline: 0;
    margin: 0;
    transition: .1s;
    font-weight: 500;
    padding: 12px 20px;
    font-size: 14px;
    border-radius: 4px;
}

.blue-btn-1:hover {
    color: #fff;
    background-color: #409eff;
    border: 1px solid #409eff;
}

button.vip-tooltip {
    border: transparent;
    background: transparent;
    padding: 0;
    margin: 0;
}

.vip-slide {
    background: url(../images/vip/bg.png)top center no-repeat;
    /* min-height: 525px; */
    padding-bottom: 50px;
    /* padding-top: 30px; */
    background-size: cover;
}

.vip-slider {
    margin: 0 auto;
    position: relative;
    max-width: 1170px;
    max-height: 235px;
    margin-top: 30px;
    overflow: hidden;
    min-height: 260px;
}

.vip-slider a.vip-box {
    position: absolute;
    left: 50%;
    top: 50%;
    justify-content: center;
    text-align: center;
    width: 64%;
    border-radius: 10px;
    height: 100%;
    transition: all 0.3s ease-in-out;
    transform: translate(-41%, -50%)scale(1);
    z-index: 0;
    color: #fff;
    opacity: 0;
}

.vip-slider a.vip-box.left,
.vip-slider a.vip-box.center,
.vip-slider a.vip-box.right {
    /* display: inline-block; */
    opacity: 1;
}

.vip-slider a.vip-box.left {
    transform: translate(-85%, -56%)scale(0.8);
    z-index: 1;
    opacity: 1;
}

.vip-slider a.vip-box.center {
    z-index: 9;
    transform: translate(-50%, -50%) scale(1.0);
    opacity: 1;
}

.vip-slider a.vip-box.right {
    transform: translate(-15%, -56%) scale(0.8);
    z-index: 1;
    opacity: 1;
}

.vip-slider a.vip-box.left .vip-des {
    opacity: 0;
}

.vip-slider a.vip-box.right .vip-des {
    opacity: 0;
}

.vip-slider>.navContainer {
    width: 49%;
    height: 33%;
    position: relative;
    display: inline-block;
    z-index: 500;
    /* filter:drop-shadow(1px 2px 3px black) */
}

.vip-slider>.navContainer>.rightClass {
    right: 7%;
    height: 35%;
    width: 20px;
    background: url(../images/vip/right.png) no-repeat center;
    background-position-x: 0;
    position: absolute;
    opacity: 1;
    z-index: 999;
    bottom: -40%;
    background-size: 100% 100%;
    cursor: pointer;
}

.vip-slider>.navContainer>.leftClass {
    left: 9%;
    height: 35%;
    width: 20px;
    background: url(../images/vip/left.png) no-repeat center;
    background-position-x: 0;
    background-size: 100% 100%;
    position: absolute;
    opacity: 1;
    z-index: 999;
    bottom: -40%;
    cursor: pointer;
}

.vip-slider .vip-box .vip-des {
    display: block;
    width: 100%;
    padding: 13px;
}

.vip-box div {
    display: block;
    width: 100%;
    border-radius: 10px;
    min-height: 140px;
}

.level-row-bg {
    width: 100%;
    height: 100%;
    background: url(../images/vip/bg.png) no-repeat;
    background-size: 100% 100%;
}

.level-row-bg .name {
    line-height: 28px;
    padding: 47px 0 50px 42px;
    font-size: 36px;
    font-weight: 700;
    color: #fff;
    text-align: left;
}

.level-row-bg .level {
    position: absolute;
    top: 0;
    right: 30px;
    width: 128px;
    height: 128px;
}

.level-row-bg .level img,
.level-row-bg .list {
    width: 100%;
}

.level-row-bg .list ul {
    display: flex;
    align-items: center;
    width: 100%;
    margin: 0;
    padding: 0;
    list-style-type: none;
    padding: 0 10%;
}

.level-row-bg .list ul li {
    text-align: center;
    flex: 1;
    color: #fff;
}

.level-row-bg .list ul span {
    font-weight: 700;
}

.level-row-bg .list ul p {
    margin-top: 8px;
}

.vip-table thead {
    color: #909399;
    font-weight: 500;
}

.vip-table tr {
    background-color: #fff;
}

.vip-table thead tr th,
.vip-table tbody tr td {
    padding: 12px 0;
    min-width: 0;
    box-sizing: border-box;
    text-overflow: ellipsis;
    vertical-align: middle;
    position: relative;
    border-bottom: 1px solid #ebeef5;
    text-align: center;
}

.vip-table thead tr th {
    background-color: #ebeff7;
    color: #303442;
}

.vip-table tr .cell {
    display: inline-block;
    box-sizing: border-box;
    position: relative;
    vertical-align: middle;
    /* padding-left: 10px;
    padding-right: 10px; */
    width: 100%;
}

.vip-table tbody tr td.vip-table-active,
.vip-table thead tr th.vip-table-active {
    background: #d3ebfe;
    color: #2599f8;
    border-bottom: 1px solid #d3ebfe;
}

.vip-table .table-hover tbody tr:hover td {
    background: #f5f7fa;
}

.detail-main ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
    margin-top: 26px;
}

.detail-main li {
    width: 100%;
    height: auto;
    margin-bottom: 18px;
    counter-increment: my-awesome-counter;
    padding-left: 24px;
    position: relative;
    line-height: 22px;
    font-size: 14px;
    color: #48535e;
}

.detail-main li:before {
    content: counter(my-awesome-counter);
    width: 16px;
    height: 16px;
    font-size: 12px;
    line-height: 16px;
    text-align: center;
    border-radius: 50%;
    color: #fff;
    background: #2599f8;
    position: absolute;
    top: 3px;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

.detail-main li p {
    margin-top: 16px;
}

/* end new vip page */


/* before login header  */
.hdr-login .input input {
    background: #788b9d80;
    height: 28px;
    width: 100px;
    border-radius: 15px;
    padding: 0 10px;
    position: relative;
    z-index: 2;
    border: transparent;
    color: #fff;
}

.hdr-login .input input:focus,
.login .input input:hover {
    outline: none;
    background: #788b9d;
}

.hdr-login .input input::placeholder {
    color: #fff;
}

.btn-log,
.btn-reg {
    width: 54px;
    height: 28px;
    border-radius: 14px;
    background: #fff;
    color: #6c7ba8;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 8px 0 rgba(194, 211, 222, .67), inset 0 1px 7px 0 #fff, inset 0 -3px 4px 0 rgba(175, 194, 230, .16);
    cursor: pointer;
}

.btn-log {
    background: url(../images/header_icon/register.png);
    background-size: 100% 100%;
    color: #fff;
    box-shadow: none;
    filter: drop-shadow(0 2px 4px rgba(93, 167, 235, .8));
}

/* before login header */


/* register page */
.login {
    width: 100vw;
    height: 100vh;
    background: url(../images/register/bg-1.jpg) no-repeat;
    background-size: cover;
    overflow: hidden;
    position: relative;
}

.login_video {
    min-height: 100%;
    min-width: 100%;
}

.login-box {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
    width: 360px;
    text-align: center;
}

.login-box .blue {
    width: 100%;
    background: #3f4955;
    border-radius: 20px;
}

.login-box .login-zzhb {
    position: relative;
    line-height: 20px;
    height: 20px;
    width: 100%;
    font-size: 14px;
    font-weight: 400;
    margin: 20px auto 8px;
    color: #000;
    text-align: center;
}

.login-box .login-zzhb:after,
.login-box .login-zzhb:before {
    content: "";
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 115px;
    height: 1px;
    background-color: hsl(0deg 0% 0% / 50%);
}

.login-box .login-zzhb:before {
    left: 20.5px;
}

.login-box .login-zzhb:after {
    right: 20px;
}

.from {
    display: flex;
    flex-direction: column;
    margin: 0 30px;
}

.from-row {
    margin: 20px 0 0;
    height: 40px;
    line-height: 44px;
    width: 100%;
    display: flex;
    border-radius: 5px;
    border-radius: 20px;
    position: relative;
    box-shadow: inset 0 1px 15px 0 #fff;
    background-color: hsl(0deg 0% 0% / 50%);
    align-items: center;
    flex-direction: row;
    box-sizing: border-box;
    overflow: hidden;
}

.from-row .icon {
    width: 25px;
    height: 25px;
    margin: 0 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 100%;
    background: linear-gradient(45deg,
            hsla(0, 0%, 100%, 0.3),
            hsla(0, 0%, 100%, 0.8));
    flex: none;
}

.from-row .icon img {
    width: 60%;
}

.from-row input {
    flex: 1;
    background: none;
    padding: 0;
    color: #fff;
    border: transparent;
}

.from-row input:focus {
    outline: none;
}

.from-row .codeimg {
    width: 90px;
    height: 100%;
    cursor: pointer;
}

.from-xy {
    margin-top: 20px;
    display: flex;
    align-items: center;
    color: #000;
}

.from-xy span {
    cursor: pointer;
    color: #2599f8;
    margin: 0 4px;
}

.from .from-link {
    margin-top: 24px;
    font-size: 14px;
    width: 300px;
    text-align: center;
    height: 40px;
    line-height: 40px;
    margin-bottom: 10px;
    background-color: #2599f8;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    color: #fff;
    border-radius: 4px;
    border: none;
    cursor: pointer;
    border-radius: 20px;
    box-shadow: 0 4px 8px 4px hsla(27, 47%, 65%, 0.2);
    box-shadow: none;
}

.from .from-tips {
    margin-top: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.from .from-tips .left {
    color: #000;
}

.from .from-tips .left span {
    color: #2599f8;
    cursor: pointer;
}

.from .from-tips .right {
    color: #000;
    cursor: pointer;
}

.from .from-contact {
    color: #000;
    margin-top: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.from .from-contact img, .from .from-contact i {
    margin-right: 8px;
}

.from-row select {
    background: transparent;
    border: 1px solid transparent;
    padding: 0 0px 0 0;
    color: #fff;
}

.from-row select option {
    color: #788b9d;
}

.from-row select#reg-num {
    width: 35%;
}

.from-row select:focus {
    outline: none;
}

.reg-check-box,
.reg-check-input.is-checked+.reg-check-label {
    color: #000;
}

.reg-check-inner {
    background: hsla(0, 0%, 100%, 0.4);
}

.reg-tnc {
    text-decoration: underline;
}

.reg-modal-content {
    height: 500px;
    overflow-y: auto;
    text-align: left;
    padding: 0 30px;
}

.reg-logo {
    max-width: 200px;
}

/* end register page */


/* new slots page */
.egame-list ul {
    width: 100%;
    flex-flow: row wrap;
    justify-content: flex-start;
    align-items: flex-start;
    display: flex;
    margin: 0;
    padding: 0;
    list-style-type: none;
}

.egame-list li {
    width: 188px;
    height: 290px;
    margin: 0;
    border: none;
    box-shadow: 0 4px 8px rgba(136, 149, 205, 0.2);
    border-radius: 12px;
    overflow: hidden;
    background-color: #fff;
    margin-right: 16px;
    margin-top: 24px;
}

.egame-list li:nth-child(5n + 5) {
    margin-right: 0;
}

.egame-list li:hover .img-bg {
    transform: translateY(0);
}

.egame-list li .img {
    position: relative;
    height: 251px;
    background: #788b9d;
    overflow: hidden;
}

.egame-list li .img img {
    width: 100%;
    /* height: 100%; */
}

.egame-list li .img img[lazy="error"] {
    opacity: 0.2;
}

.egame-list li .img-bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    transform: translateY(-100%);
    transition: all 0.4s;
}

.egame-list li .img-bg .img-link {
    cursor: pointer;
    border: none;
    text-align: center;
    line-height: 30px;
    color: #fff;
    width: 107px;
    height: 30px;
    font-size: 12px;
    background: #2599f8;
    border-radius: 4px;
}

.egame-list li .name {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 48px;
    padding: 0 10px;
}

.egame-list li .name .text {
    width: 155px;
    font-size: 14px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.egame-list li .name .icon {
    width: 16px;
    height: 16px;
    background: url(../images/product/slots/icon-love.png) no-repeat 50%;
    background-size: cover;
}

.egame-list li .name .icon .img {
    width: 100%;
    height: 100%;
}

.egame-list li .name .icon.hover,
.egame-list li .name .icon:hover {
    background: url(../images/product/slots/icon-love-h.png) no-repeat 50%;
    background-size: cover;
}

.egame-type {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.egame-type-left.nav-tabs {
    border-bottom: transparent;
}

.egame-type-left span {
    margin-right: 24px;
    font-size: 16px;
    position: relative;
    cursor: pointer;
}

.egame-type-left span.active {
    color: #2599f8;
}

.egame-type-left span.active:before {
    position: absolute;
    content: "";
    bottom: -6px;
    border-bottom: 2px solid #2599f8;
    left: 0;
    right: 0;
}

.egame-type-search {
    width: 190px;
    height: 40px;
    position: relative;
}

.egame-type-search input {
    width: 100%;
    height: 100%;
    height: 38px;
    line-height: 36px;
    padding: 0 40px 0 18px;
    box-sizing: border-box;
    border-radius: 8px;
    font-size: 12px;
    color: #788b9d;
    background: #fff;
    border: 1px solid #e4e8eb;
}

.egame-type-search input::-moz-placeholder {
    color: #a5aabc;
}

.egame-type-search input::placeholder {
    color: #a5aabc;
}

.egame-type-search input:focus {
    border: 1px solid #2599f8;
}

.egame-type-search span {
    width: 16px;
    height: 16px;
    background: url(../images/product/slots/search.png) no-repeat 50%;
    background-size: 100% 100%;
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-55%);
    cursor: pointer;
}

.egame-menus {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

.egame-menus-a {
    width: 134px;
    height: 48px;
    border-radius: 24px;
    margin-left: 16px;
    background: url(../images/product/slots/white-btn.png) no-repeat 50%;
    background-size: 100% 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    cursor: pointer;
    box-shadow: 0 4px 8px rgba(194, 211, 222, 0.3);
    margin-bottom: 16px;
}

.egame-menus-a:first-child,
.egame-menus-a:nth-child(7n + 8) {
    margin-left: 0;
}

.egame-menus-a .icon {
    width: 32px;
    height: 32px;
    background-size: 86%;
    background-repeat: no-repeat;
    background-position: 50%;
    margin-right: 6px;
}

.egame-menus-a .icon .img {
    width: 100%;
    height: 100%;
    filter: invert(40%);
}

.egame-menus-a.hover,
.egame-menus-a:hover {
    background-image: url(../images/product/slots/blue-btn.png);
    color: #fff;
}

.egame-menus-a.hover .img,
.egame-menus-a:hover .img {
    width: 100%;
    height: 100%;
    filter: invert(0);
}

.egame-box {
    padding: 28px 38px;
    background: #f5f9ff;
    border: 2px solid #fff;
    box-shadow: 0 6px 20px 3px rgba(201, 211, 237, 0.5),
        inset 0 0 10px rgba(155, 180, 216, 0.6);
    border-radius: 24px;
}

.egame-top {
    padding: 84px 0px 50px;
}

.banner {
    height: 470px;
    width: 100%;
    background: url(../images/product/slots/slots-bg.png) no-repeat 100% 100%;
    background-size: auto 100%;
    position: relative;
}

.banner .slogin {
    width: 45%;
}

.number {
    display: flex;
    align-items: center;
}

.number .span-bg {
    width: 67px;
    height: 98px;
    background: url(../images/product/slots/num-bg.png) no-repeat 50%;
    background-size: 100% 100%;
    position: relative;
    margin-right: 6px;
}

.number .span-bg:nth-last-child(4n + 4) {
    width: 20px;
    height: 98px;
    background-image: url(../images/product/slots/num-comma.png);
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: 50%;
}

.number .span-bg:nth-last-child(4) {
    width: 20px;
    height: 98px;
    background-image: url(../images/product/slots/num-dot.png);
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: 50%;
}

.number .em-number {
    top: 0;
    left: 0;
    margin: 4px 14px 6px;
    width: 39px;
    height: 88px;
    background-size: 39px 880px;
    position: absolute;
    overflow: hidden;
    background-image: url(../images/product/slots/num.png);
    background-repeat: no-repeat;
    transition: background 1s;
}

.number .dian,
.number .qian {
    width: 20px;
    height: 98px;
    background-image: url(../images/product/slots/num-dot.png);
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: 50%;
}

.number .qian {
    background-image: url(../images/product/slots/num-comma.png);
}

.el-pagination.is-background .btn-next,
.el-pagination.is-background .btn-prev,
.el-pagination.is-background .el-pager li {
    background: #fff;
}

.egame-page {
    text-align: center;
    padding-top: 24px;
    justify-content: center;
}

.egame-page .pagination {
    justify-content: center;
    gap: 10px;
}

.egame-page .page-item:first-child .page-link,
.egame-page .page-item:last-child .page-link {
    border-radius: 0px;
}

.egame-page .page-link {
    background-color: #fff;
    color: #606266;
    border: transparent;
    font-weight: 600;
}

.egame-page .page-link:hover {
    background-color: #2599f8;
    color: #fff;
}

/* end new slots page */


/* lotto page */

@keyframes moveleft-7a97cb8a {
    0% {
        opacity: 0;
        transform: translateX(10%);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes hideleft-7a97cb8a {
    0% {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

@keyframes domhide-7a97cb8a {
    0% {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

@keyframes realbetbg-7a97cb8a {
    0% {
        transform: translate(-20%);
        opacity: 0;
    }

    to {
        transform: translate(0);
        opacity: 1;
    }
}

@keyframes realbetren-7a97cb8a {
    0% {
        transform: translateX(-10%);
        opacity: 0;
    }

    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes realbetrenhide-7a97cb8a {
    0% {
        transform: translateX(0);
        opacity: 1;
    }

    to {
        transform: translateX(10%);
        opacity: 0;
    }
}

@keyframes sportbg-7a97cb8a {
    0% {
        transform: translate(-50%, -30%);
        opacity: 0;
    }

    to {
        transform: translate(-50%);
        opacity: 1;
    }
}

@keyframes sportren-7a97cb8a {
    0% {
        transform: scaleY(90%);
        opacity: 0;
    }

    to {
        transform: scaleY(100%);
        opacity: 1;
    }
}

@keyframes lotteryren-7a97cb8a {
    0% {
        transform: translateY(15%);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes lotteryrenhide-7a97cb8a {
    0% {
        transform: translateY(0);
        opacity: 1;
    }

    to {
        transform: translateY(15%);
        opacity: 0;
    }
}

.btn-default {
    border: none;
    background: url(../images/product/lotto/btn-default.png) no-repeat 50%;
    background-size: 100% 100%;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 140px;
    height: 40px;
    box-shadow: 0 2px 4px rgba(93, 167, 235, .8);
    border-radius: 20px;
    font-size: 16px;
    cursor: pointer;
}

.replaceimgdetect img {
    animation: lotteryren-7a97cb8a 0.4s ease-in;
}

.tabcontentproduct {
    animation: moveleft-7a97cb8a .8s forwards;
}

/* end lotto page */


/* fish page  */
.banner.fish {
    background: url(../images/product/fish/fish-bg.png) no-repeat 100% 100%;
    background-size: auto 100%;
}

/* end fish page  */


/* agent page */
body.agent-bg {
    background: url(../images/agent/bg.jpeg) no-repeat 50%;
    background-size: cover;
}

.agent-swiper {
    height: 100vh;
    padding-top: 10%;
}

.agent-scroll {
    width: 100%;
    height: 100vh;
    overflow: hidden;
}

.agent-inline {
    transition: all 0.8s ease-out;
}

.agent-box {
    width: 100%;
    background: url(/img/bg.727d6fb0.jpeg) no-repeat 50%;
    background-size: cover;
}

.agent-box .yx-wid-12 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* height: 100vh; */
}

.agent-left {
    text-align: center;
    width: 550px;
    margin: 0 77px 0 43px;
    display: flex;
    flex-direction: column;
}

.agent-left .agent-card,
.agent-left .title {
    width: 100%;
}

.agent-left .agent-card {
    margin: 36px 0;
}

.agent-left .box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 5px;
}

.agent-left .box .rows {
    width: 162px;
    height: 140px;
    border-radius: 24px;
    position: relative;
    overflow: hidden;
    background: url(../images/agent/feature-box.png) no-repeat 50%/100%;
    box-shadow: 0 6px 20px 3px rgba(201, 211, 237, 0.5);
    padding: 16px 16px 6px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.agent-left .box .rows .icon {
    width: 42px;
    height: 42px;
}

.agent-left .box .rows .small {
    margin-top: 6px;
    font-size: 12px;
}

.agent-left .box .rows .sec {
    font-size: 14px;
    color: #30383f;
    margin-top: 2px;
    width: 90%;
    overflow: hidden;
    text-overflow: ellipsis;
}

.agent-left .box .rows .link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 80%;
    margin: 6px 0;
}

.agent-left .box .rows .link a {
    flex: 1;
    height: 22px;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    max-width: 70px;
    margin-right: 8px;
    box-shadow: 0 4px 8px rgba(29, 146, 255, 0.2);
}

.agent-left .box .rows .link a:last-child {
    margin-right: 0;
}

.agent-left .box .rows .link a.link-blue {
    background: url(../images/agent/btn-blue.png) no-repeat;
    background-size: 100% 100%;
    color: #fff;
}

.agent-left .box .rows .link a.link-white {
    background: url(../images/agent/btn-white.png) no-repeat;
    background-size: 100% 100%;
    color: #30383f;
}

.agent-link-a {
    margin-top: 48px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.agent-link-a .btn-default {
    width: 160px;
    height: 50px;
    border-radius: 25px;
    cursor: pointer;
}

.agent-right {
    width: 630px;
    height: 660px;
    cursor: inherit;
}

.agent-right img {
    width: 100%;
}

.agent-hy {
    margin-top: 20px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.agent-hy .row {
    background: #fff;
    position: relative;
    overflow: hidden;
    width: 310px;
    height: 230px;
    border-radius: 12px;
    box-shadow: 0 4px 10px rgba(121, 129, 164, 0.1);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
}

.agent-hy .row span {
    line-height: 25px;
    text-align: center;
    font-size: 18px;
    font-weight: 600;
    color: #30383f;
}

.agent-hy .row p {
    line-height: 17px;
    text-align: center;
    font-size: 12px;
    color: #788b9d;
    font-weight: 400;
    margin-top: 4px;
}

.agent-hy .row img {
    width: 100%;
}

.two .agent-left {
    width: 640px;
}

.two .agent-right {
    width: 307px;
    margin-top: 30px;
}

.agent-three-title {
    background: url(../images/agent/line.png) no-repeat 50%;
    background-size: 100% auto;
    margin: 20px 0;
    color: #30383f;
    font-family: PingFang SC;
    font-style: normal;
    font-weight: 700;
    font-size: 16px;
    line-height: 20px;
    text-align: center;
}

.agent-fixed {
    z-index: 9999;
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    left: 50%;
    margin-left: 586px;
}

.agent-fixed span {
    display: block;
    opacity: 1 !important;
    height: 27px;
    width: 27px;
    margin: 0 0 8px;
    cursor: pointer;
    position: relative;
}

.agent-fixed span.hover:before {
    background: #fff;
}

.agent-fixed span.hover:after {
    border: 1px solid #fff;
    width: 24px;
    height: 24px;
}

.agent-fixed span.hover:after,
.agent-fixed span:before {
    border-radius: 100%;
    position: absolute;
    content: "";
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.agent-fixed span:before {
    width: 16px;
    height: 16px;
    background: hsla(0, 0%, 100%, 0.5);
}

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

.agent-swiper .swiper-pagination-bullet-active {
    background: #fff;
    position: relative;
}

.agent-swiper .swiper-pagination-bullet-active:after {
    border-radius: 50%;
    padding: 5px;
    border: 1px solid #fff;
    position: absolute;
    content: '';
    top: -6px;
    left: -6px;
    bottom: -6px;
    right: -6px;
}

.agent-swiper .swiper-pagination-vertical.swiper-pagination-bullets .swiper-pagination-bullet,
.agent-swiper .swiper-vertical>.swiper-pagination-bullets .swiper-pagination-bullet {
    margin: 15px 0px;
}

/* end agent page */


/* promo page */
.promo-banner {
    padding-top: 84px;
}

.activity-menu-title {
    width: 80%;
    margin: 0 auto;
}

/* end promo page */


/* download page */
body.dl-bg {
    background: url(../images/promotion/bg.jpeg) no-repeat 50%;
    background-size: cover;
}

.download-menu {
    width: 160px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translateY(-50%);
    z-index: 89;
    margin: 0 0 0 -600px;
}

.download-menu ul {
    width: 100%;
    margin: 0;
    padding: 0;
    list-style-type: none;
}

.download-menu li {
    background: url(../images/download/download-btn.png) no-repeat;
    background-size: 100% 100%;
    cursor: pointer;
    box-shadow: 0 4px 8px rgba(194, 211, 222, 0.67);
    text-align: center;
    font-size: 18px;
    width: 100%;
    height: 50px;
    line-height: 50px;
    border-radius: 26px;
    color: #788b9d;
    margin-top: 12px;
}

.download-menu li:first-child {
    margin-top: 0;
}

.download-menu li.active {
    background: url(../images/download/download-btn-h.png) no-repeat;
    background-size: 100% 100%;
    color: #fff;
}

.download-one {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.download-one .left {
    width: 480px;
    height: 480px;
    margin-top: 120px;
    margin-left: 191px;
    margin-right: 12px;
}

.download-one .right {
    width: 456px;
    height: 526px;
    padding: 36px 36px 0;
    margin-top: 20px;
    /* margin-right: -35px; */
    border-radius: 24px;
    background: #f5f9ff;
    border: 2px solid #fff;
    box-shadow: inset 0 0 10px rgba(155, 180, 216, 0.6);
    display: flex;
    flex-direction: column;
}

.download-one .right .title {
    font-family: PingFang SC;
    font-style: normal;
    height: 48px;
    font-size: 40px;
    line-height: 48px;
    font-weight: 700;
    text-align: left;
    color: #788b9d;
}

.download-one .right .sec {
    font-family: PingFang SC;
    font-style: normal;
    font-size: 16px;
    line-height: 26px;
    text-align: justify;
    color: #788b9d;
    min-height: 112px;
    margin-top: 12px;
}

.download-one .right .main {
    display: flex;
    justify-content: space-between;
    margin-top: 24px;
}

.download-one .right .main .row {
    width: 182px;
    height: 258px;
    border: 1px solid #fff;
    border-radius: 12px;
    background: #f4faff;
}

.download-one .right .main .row-zw {
    margin: 16px 16px 0;
    height: 166px;
}

.download-one .right .main .row-zw img {
    width: 100%;
}

.download-one .right .main .row-zw span {
    color: #179cff;
    display: block;
    word-break: break-all;
}

.download-one .right .main .row-text {
    text-align: center;
}

.download-one .right .main .row-text span {
    font-weight: 500;
    font-size: 16px;
    line-height: 22px;
    text-align: center;
    color: #788b9d;
}

.download-one .right .main .row-text p {
    margin-top: 2px;
    font-weight: 400;
    font-size: 12px;
    line-height: 22px;
    text-align: center;
    color: #788b9d;
}

.main-gf {
    width: 100%;
    margin-top: 40px;
    display: flex;
    justify-content: space-between;
}

.main-gf-row {
    font-size: 14px;
    text-align: center;
    width: 120px;
    height: 168px;
    border: 2px solid #fff;
    box-sizing: border-box;
    border-radius: 12px;
    background: #f4faff;
}

.main-gf-row img {
    margin: 16px 25px 0;
    width: 70px;
    height: 70px;
}

.main-gf-row div {
    margin: 16px auto 0;
    line-height: 22px;
    height: 22px;
    width: 68px;
    font-size: 12px;
    font-weight: 400;
    background: url(../images/download/download-btn-h.png) no-repeat;
    background-size: 100% 100%;
    box-shadow: 0 2px 4px rgba(93, 167, 235, 0.8);
    border-radius: 11px;
    cursor: pointer;
    color: #fff;
}

/* end download page */


/* help page */
.help {
    position: relative;
    margin: 120px auto 50px;
    min-height: 616px;
    height: auto;
    display: flex;
}

.help-left {
    position: sticky;
    top: 120px;
    height: -moz-max-content;
    height: max-content;
    width: 220px;
    min-width: 220px;
    float: left;
    margin-right: 16px;
    border-radius: 4px;
    background-color: #fff;
    padding: 12px 0;
}

.help-right {
    padding: 24px;
    width: 964px;
    height: auto;
    overflow-y: auto;
    background-color: #fff;
    float: left;
    border-radius: 4px;
    box-sizing: border-box;
    flex: 1 1;
    min-height: calc(100vh - 260px);
}

.help-right-row {
    margin-bottom: 24px;
}

.help-right h3 {
    font-size: 16px;
    font-weight: 700;
    text-align: justify;
    margin-bottom: 9px;
    line-height: 22px;
    color: #788b9d;
}

.help-right p {
    line-height: 22px;
    text-align: justify;
    font-size: 14px;
    color: #788b9d;
    min-height: 20px;
    margin: 0px;
}

.help-right div {
    margin-bottom: 24px;
}

.help-menu-a {
    display: flex;
    align-items: center;
    padding: 0 30px;
    height: 46px;
    line-height: 46px;
    margin: 0;
    box-sizing: border-box;
    cursor: pointer;
}

.help-menu-a .icon {
    width: 20px;
    height: 20px;
    position: relative;
    display: block;
}

.help-menu-a .icon img {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
}

.help-menu-a .icon img.xz {
    display: none;
}

.help-menu-a .text {
    flex: 1;
    margin-left: 8px;
    color: #788b9d;
}

.help-menu-a .arrow {
    width: 12px;
    height: 12px;
    background: url(../images/help/right-arrow.png) no-repeat 50%/100%;
}

.help-menu-a.hover .mr,
.help-menu-a:hover .mr {
    display: none !important;
}

.help-menu-a.hover .xz,
.help-menu-a:hover .xz {
    display: block !important;
}

.help-menu-a.hover .text,
.help-menu-a:hover .text {
    color: #2599f8;
}

.menu-list {
    margin: 0;
    padding: 0;
    list-style-type: none;
    display: block;
    border-bottom: transparent;
}

.menu-list li {
    font-family: PingFang SC;
    font-weight: 500;
    font-size: 14px;
    background: none;
    margin: 0;
    padding-left: 68px;
    height: 35px;
    line-height: 35px;
    cursor: pointer;
    color: #788b9d;
}

.menu-list li.active,
.menu-list li:hover {
    color: #2599f8;
}

.help-navs {
    width: 100%;
}

.help-navs ul {
    display: flex;
    align-items: center;
    width: 100%;
    box-shadow: inset 0 -1px 0 0 #e4e6ed;
}

.help-navs ul li {
    display: inline-block;
    margin: 0 30px;
    line-height: 50px;
    height: 50px;
    font-size: 14px;
    text-align: center;
    color: #7981a4;
    position: relative;
    cursor: pointer;
    text-decoration: none !important;
}

.help-navs ul li.hover {
    color: #179cff;
}

.help-navs ul li.hover:before {
    content: " ";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 4px;
    border-radius: 2px;
    background-color: #179cff !important;
}

.table-help {
    width: 100%;
    table-layout: fixed;
    border: 1px solid #a5aabc;
}

.table-help ol,
.table-help ul {
    background: #dddfe6;
    list-style-type: none;
    border-bottom: 1px solid #a5aabc;
    display: flex;
    align-items: center;
}

.table-help ol li,
.table-help ul li {
    border-right: 1px solid #a5aabc;
    flex: 1;
    text-align: center;
    height: 36px;
    line-height: 36px;
}

.table-help ol li:last-child,
.table-help ul li:last-child {
    border-right: none;
}

.table-help ul {
    background: #fff;
}

.table-help ul:last-child {
    border-bottom: none;
}

.table-zrqa {
    width: 100%;
}

.table-zrqa tr:first-child {
    background: rgba(108, 123, 168, 0.2);
    border-bottom: 1px solid rgba(108, 123, 168, 0.2);
}

.table-zrqa tr:nth-child(2n + 2) {
    background: rgba(108, 123, 168, 0.1);
}

.table-zrqa td {
    padding: 10px 12px;
    text-align: center;
    box-shadow: inset -0.5px 0 0 rgba(0, 0, 0, 0.25);
}

.table-zrqa td:last-child {
    box-shadow: none;
    border-right: none;
}

.help-banner {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

.help-banner-row {
    width: 48%;
    border-radius: 8px;
    box-shadow: 0 4px 10px 0 rgba(137, 154, 193, 0.2);
    background-color: #fff;
    position: relative;
    margin-right: 4%;
    padding: 0 0 80px;
    text-align: center;
}

.help-banner-row:nth-child(2n + 2) {
    margin-right: 0;
}

.help-carousel{
    width: 250px;
    margin: 0 auto;
    position: relative;
    overflow: inherit;
    padding: 11px;
}

.help-carousel:before {
    content: "";
    background: url(../images/help/dep/mobile.png) no-repeat 50%;
    background-size: 100% 100%;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
}

.help-banner-type {
    width: 100px;
    height: 100px;
    box-shadow: 0 4px 10px 0 rgba(137, 154, 193, 0.2);
    background-color: #fff;
    line-height: 100px;
    text-align: center;
    border-radius: 50%;
    position: relative;
    top: -20px;
    font-size: 16px;
    font-weight: 700;
    margin: 0 auto;
    color: #7981a4;
}

.help-banner-span {
    box-shadow: none;
    padding-top: 40px;
}

.help-data {
    margin-bottom: 16px;
}

.help-carousel .carousel-indicators{
    z-index: 4;
}

.help-carousel .carousel-indicators [data-bs-target] {
    background-color: #818181;
}

.help-carousel .carousel-control-prev-icon, .help-carousel .carousel-control-next-icon{
    background-image: none;
    color: #929292;
    font-size: 30px;
}

/* end help page */