/*//vip//*/
:root 
{
    /* MAROON */
    --maroon-vip-text-color1: #000;
    --maroon-vip-text-color2: #000;
    --maroon-vip-background-color1: #a9493a;
    --maroon-vip-background-color2: #9c9dc1;
    --maroon-vip-background-color3: #ff4a3d;
    --maroon-vip-gradient-color1: #a9493a;
    --maroon-vip-gradient-color2: #bc974c;
    --maroon-vip-gradient-color3: #a9493a;
    --maroon-vip-gradient-color4: #a9493a;
    --maroon-vip-border-color1: #a9493a;
    --maroon-vip-stroke-color1: #a9493a;
    --maroon-vip-stroke-color2: #ebdab8;
    --maroon-vip-border-table-color1: #ffebc4;

    /* whitegreen */
    --whitegreen-vip-text-color1: #fff;
    --whitegreen-vip-text-color2: #fff;
    --whitegreen-vip-background-color1: #006a4c;
    --whitegreen-vip-background-color2: #cfb595;
    --whitegreen-vip-background-color3: #ff4a3d;
    --whitegreen-vip-gradient-color1: #012f21;
    --whitegreen-vip-gradient-color2: #00976c;
    --whitegreen-vip-gradient-color3: #027f5f;
    --whitegreen-vip-gradient-color4: #027f5f;
    --whitegreen-vip-border-color1: #004531;
    --whitegreen-vip-stroke-color1: #012f21;
    --whitegreen-vip-stroke-color2: #36a488;
    --whitegreen-vip-border-table-color1: #004531;
    
    /* blackgreen */
    --blackgreen-vip-text-color1: #fff;
    --blackgreen-vip-text-color2: #fff;
    --blackgreen-vip-background-color1: #006a4c;
    --blackgreen-vip-background-color2: #cfb595;
    --blackgreen-vip-background-color3: #ff4a3d;
    --blackgreen-vip-gradient-color1: #012f21;
    --blackgreen-vip-gradient-color2: #00976c;
    --blackgreen-vip-gradient-color3: #027f5f;
    --blackgreen-vip-gradient-color4: #027f5f;
    --blackgreen-vip-border-color1: #004531;
    --blackgreen-vip-stroke-color1: #012f21;
    --blackgreen-vip-stroke-color2: #36a488;
    --blackgreen-vip-border-table-color1: #004531;

    /* green */
    --green-vip-text-color1: #fff;
    --green-vip-text-color2: #fff;
    --green-vip-background-color1: #006a4c;
    --green-vip-background-color2: #cfb595;
    --green-vip-background-color3: #ff4a3d;
    --green-vip-gradient-color1: #012f21;
    --green-vip-gradient-color2: #00976c;
    --green-vip-gradient-color3: #027f5f;
    --green-vip-gradient-color4: #027f5f;
    --green-vip-border-color1: #004531;
    --green-vip-stroke-color1: #012f21;
    --green-vip-stroke-color2: #36a488;
    --green-vip-border-table-color1: #004531;

    /* blue */
    --blue-vip-text-color1:#fff;
    --blue-vip-text-color2:#bebdf7;
    --blue-vip-background-color1:#17194A;
    --blue-vip-background-color2:#8889b7;
    --blue-vip-background-color3:#ff4a3d;
    --blue-vip-gradient-color1:#18194b;
    --blue-vip-gradient-color2:#393868;
    --blue-vip-gradient-color3:#f09637;
    --blue-vip-gradient-color4:#ec6d2d;
    --blue-vip-border-color1:#18194b;
    --blue-vip-stroke-color1:#272859;
    --blue-vip-stroke-color2:#575594;
    --blue-vip-border-table-color1:#40426b;

    /* orange */
    --orange-vip-text-color1: #fff;
    --orange-vip-text-color2: #fff;
    --orange-vip-background-color1: #ffbd38;
    --orange-vip-background-color2: #673ab7;
    --orange-vip-background-color3: #ff4a3d;
    --orange-vip-gradient-color1: #ffab00;
    --orange-vip-gradient-color2: #ffae0b;
    --orange-vip-gradient-color3: #673ab7;
    --orange-vip-gradient-color4: #28006f;
    /* --orange-vip-border-color1: #3f2e0c; */
    --orange-vip-stroke-color1: #673ab7;
    --orange-vip-stroke-color2:#575594;
    --orange-vip-border-table-color1:#40426b;

    /* black */
    --black-vip-text-color1: #fff;
    --black-vip-text-color2: #fff;
    --black-vip-background-color1: #000000;
    --black-vip-background-color2: #cfb595;
    --black-vip-background-color3: #ff4a3d;
    --black-vip-gradient-color1: #1d1d1d;
    --black-vip-gradient-color2: #373737;
    --black-vip-gradient-color3: #757575;
    --black-vip-gradient-color4: #757676;
    --black-vip-border-color1: #3c3c3c;
    --black-vip-stroke-color1: #2b2b2b;
    --black-vip-stroke-color2: #97a09e;
    --black-vip-border-table-color1: #373636;

    /* redwhite */
    --redwhite-vip-text-color1: #424242;
    --redwhite-vip-text-color2: #424242;
    --redwhite-vip-background-color1: #fff;
    --redwhite-vip-background-color2: #f75051;
    --redwhite-vip-background-color3: #fff;
    --redwhite-vip-gradient-color1: #f29293;
    --redwhite-vip-gradient-color2: #ffe8e9;
    --redwhite-vip-gradient-color3: #ffe8e9;
    --redwhite-vip-gradient-color4: #f29293;
    --redwhite-vip-border-color1: #3c3c3c;
    --redwhite-vip-stroke-color1: #2b2b2b;
    --redwhite-vip-stroke-color2: #97a09e;
    --redwhite-vip-border-table-color1: #373636;

    /* rosegold */
    --rosegold-vip-text-color1: #424242;
    --rosegold-vip-text-color2: #424242;
    --rosegold-vip-background-color1: rgba(255, 255, 255, 0.8);
    --rosegold-vip-background-color2: #896a4b;
    --rosegold-vip-background-color3: #fff;
    --rosegold-vip-gradient-color1: rgb(186, 162, 143);
    --rosegold-vip-gradient-color2: #ffe8e9;
    --rosegold-vip-gradient-color3: #ffe8e9;
    --rosegold-vip-gradient-color4: rgb(186, 162, 143);
    --rosegold-vip-border-color1: #c5af9d;
    --rosegold-vip-stroke-color1: #8a684c;
    --rosegold-vip-stroke-color2: #d5baa5;
    --rosegold-vip-border-table-color1: #c5af9d;

    /* blackgold */
    --blackgold-vip-text-color1: #fff;
    --blackgold-vip-text-color2: #fff;
    --blackgold-vip-background-color1: #2c2b2f;
    --blackgold-vip-background-color2: #e7bc27;
    --blackgold-vip-background-color3: #ff4a3d;
    --blackgold-vip-gradient-color1: #1d1d1d;
    --blackgold-vip-gradient-color2: #373737;
    --blackgold-vip-gradient-color3: #757575;
    --blackgold-vip-gradient-color4: #757676;
    --blackgold-vip-border-color1: #3c3c3c;
    --blackgold-vip-stroke-color1: #2b2b2b;
    --blackgold-vip-stroke-color2: #97a09e;
    --blackgold-vip-border-table-color1: #373636;
}

.body_contain:has(#vip),
.body_contain:has(#vipinfo){
    background: var(--vip-background-color1);
}

#vip .vip_wrap
{
    color: var(--vip-text-color1);
}

#vip .top-wrap 
{
    position: relative;
}

#vip .vip_wrap .vip_user_wrap
{
    display: flex;
    flex-direction: column;
    padding: 0 5vw;
    padding-top: 1vw;
    padding-bottom: 3vw;
    border-radius: 12px;
    background: linear-gradient(180deg,var(--vip-gradient-color2) 0,var(--vip-gradient-color1) 100%) padding-box,linear-gradient(60deg,var(--vip-stroke-color1) 14%,var(--vip-stroke-color2) 47%,var(--vip-stroke-color1) 82%,var(--vip-stroke-color2) 100%) border-box;
    border: .5vw solid transparent;
    box-shadow: 0px 8px 24px rgba(17,17,26,0.1), 0px 16px 56px rgba(17,17,26,0.1), 0px 24px 80px rgba(17,17,26,0.1);
}


#vip .vip_user_wrap .vip_grade
{
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 3vw;
    box-sizing: border-box;
    position: relative;
}

#vip .vip_user_wrap .username
{
    font-size: 5vw;
    background: linear-gradient(180deg,var(--vip-background-color1) 0,var(--vip-background-color1) 100%) padding-box, linear-gradient(60deg,var(--vip-stroke-color1) 10%,var(--vip-stroke-color2) 35%,var(--vip-stroke-color1) 80%) border-box;
    border-bottom-right-radius: 45px;
    display: inline-flex;
    align-items: center;
    padding-block: 4%;
    padding-left: 7%;
    padding-right: 12%;
    position: absolute;
    left: 0;
    top: 0;
    border-top-left-radius: 8px;
    border-top-left-radius: 8px;
    border: .5vw solid transparent;
    border-left: none;
    border-top: none;
    box-shadow: 0px 8px 24px rgba(17,17,26,0.1), 0px 16px 56px rgba(17,17,26,0.1), 0px 24px 80px rgba(17,17,26,0.1);
}

#vip .vip_user_wrap .vip_column
{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding-top: 14%;
}

#vip .vip_user_wrap .vip_grade .usergrade
{
    display: flex;
    font-size: 3vw;
    position: relative;
    right: 0;
    top: -38%;
    background: var(--vip-background-color1);
    border-radius: 50%;
    padding: 10%;
    width: 27vw;
    height: 28vw;

}

#vip .vip_user_wrap .vip_grade .usergrade .icon-member2
{
    font-size: 4vw;
    display: flex;
    flex: 0 0 6vw;
    color: #fff;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background-color: #24b3ee;
}

#vip .vip_user_wrap .vip_grade .user-currentGrade
{
    display: flex;
    flex: 1;
    justify-content: center;
    align-items: center;
    padding: 1vw;
    text-align: center;
    background: url(/image/mobile/vip/default_vip_icon.png?v1) no-repeat;
    background-size: 100% 100%;
    color: transparent;  /*hide the word*/
}

#vip .vip_user_wrap .vip_bar
{
    position: relative;
    display: flex;
    align-items: center;
    margin-top: 2vw;
    flex-direction: column;
    width: 75%;
}

#vip .vip_user_wrap .vip_bar .vip_lvl_progress
{
    flex: 1;
    background-color: #dbdbdb;
    margin: 0 2vw;
    overflow: hidden;
    height: 5vw;
    line-height: 5vw;
    border-radius: 5vw;
    width: 100%;
    margin-block: 2vw;
}

#vip .vip_user_wrap .vip_bar .vip_lvl_progress .progress
{
    width:0;
    font-size: 3vw;
    height: 100%;
    background-color: var(--vip-background-color1);
    display: flex;
    align-items: center;
    padding-left: 5vw;
    justify-content: flex-end;
    box-sizing:border-box;
    border-radius: 5vw;
}
#vip .vip_user_wrap .vip_bar .grade
{
    font-size: 15vw;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 3vw;
    font-style: italic;
    justify-content: flex-start;
    width: 100%;

}

#vip .vip_user_wrap .vip_bar .currentGrade.grade
{
    color: var(--vip-text-color1) !important;
}

#vip .vip_user_wrap .vip_grade .nextGrade.grade
{
    background: var(--vip-background-color2);
    border-radius: 8px;
    padding: 1vw;
    padding-inline: 2vw;
    margin-top: 1vw;
    font-size: 4vw;
    color: var(--vip-background-color1);
    font-weight: bold;
    position: absolute;
    bottom: 4%;
}

#vip .vip_user_wrap .vip_requirement1, #vip .vip_user_wrap .vip_requirement2
{
    flex:0 0 13%;
    display: flex;
    align-items: center;
    font-size: 4vw;
    justify-content: center;
    padding-block: 2vw;
}

#vip .vip_user_wrap .vip_requirement_container
{
    background: linear-gradient(180deg,var(--vip-gradient-color1) 0,var(--vip-gradient-color2) 100%) padding-box,linear-gradient(60deg,var(--vip-stroke-color1) 14%,var(--vip-stroke-color2) 47%,var(--vip-stroke-color1) 82%,var(--vip-stroke-color2) 100%) border-box;
    border: .5vw solid transparent;
    position: relative;
    border-radius: 8px;
    margin-top: 3%;
    box-shadow: 0px 8px 24px rgba(17,17,26,0.1), 0px 16px 56px rgba(17,17,26,0.1), 0px 24px 80px rgba(17,17,26,0.1);
}

#vip .vip_user_wrap .vip_requirement2
{
    border-top: .5vw solid var(--vip-border-color1);
}

#vip .vip_user_wrap .vip_requirement label
{
    color: var(--vip-text-color1);
}

#vip .vip_user_wrap .vip_requirement .vip_req_list span
{
    color: var(--common-vip-use-color);
    margin: 0 2vw;
}


#vip .vip_get_promo 
{
    display: flex;
    flex: 0 0 25%;
    justify-content: space-around;
    padding-top: 4vw;
}

#vip .vip_get_promo .vip_bonus_wrap{
    width: 30%;
    word-break: break-word;
    font-size: 3vw;
}

#vip .vip_get_promo .vip_bonus_wrap>div
{
    height: 9vw;
    background: var(--vip-background-color3);
    border-radius: 16px;
    background-size: 100%;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    color: #fff;
    font-size: 3vw;
}

#vip .vip_get_promo .vip_bonus_wrap>div.redeemed,
#vip .vip_get_promo .vip_bonus_wrap>div.overdue
{
    background: var(--vip-background-color2);
}

#vip .vip_get_promo .vip_bonus_wrap>div.redeemed:after
{
    content: "";
    background-image: url(/image/web/vip/redeem_en.png);
    background-size: 100%;
    background-repeat: no-repeat;
    height: 6vw;
    width: 10vw;
    position: absolute;
    left: 0;
    top: -1vw;
}

html[lang="cn"] #vip .vip_get_promo .vip_bonus_wrap>div.redeemed:after {
    background-image: url(/image/web/vip/redeem_cn.png) !important;
}

#vip .vip_get_promo .vip_bonus_wrap>div.overdue:after
{
    content: "";
    background-image: url(/image/web/vip/overdue_en.png);
    background-size: 100%;
    background-repeat: no-repeat;
    height: 6vw;
    width: 10vw;
    position: absolute;
    left: 0;
    top: -1vw;
}

html[lang="cn"] #vip .vip_get_promo .vip_bonus_wrap>div.overdue:after {
    background-image: url(/image/web/vip/overdue_cn.png) !important;
}

#vip .vip_badge
{
    overflow: scroll;
}

#vip .vip_badge_list_wrap
{
    padding: 5vw;
    display: flex;
    justify-content: space-between;
}


#vip .vip_badge_list
{
    text-align: center;
    position: relative;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    font-size: 3vw;
    width: auto;
    white-space: nowrap;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    display: flex;
    justify-content: center;
    align-items: center;

}

#vip .vip_badge_list .title
{
    font-size:3vw;
    border-radius: 5vw;
    background-color: #e7dee0;
    padding: 0.5vw 1.5vw;
}

#vip .vip_wrap .vip_badge .vip_badge_list.active .title
{
    background-color: #24b3ee;
    color: #fff;
    border-color: #24b3ee;
}
#vip .vip_container{
    overflow: hidden;
    margin-block: 2%;
}

#vip .vip_badge_list::after
{
    content: "";
    width: 100%;
    display: block;
    position: absolute;
    border-top: 1px solid #e7dee0;
    right: -100%;
}

#vip .vip_badge_list:last-child::after
{
    border:0;
}

#vip .vip_card_wrap{
    display: flex;
    justify-content: center;
}

#vip .vip_card_wrap .vip_card{
    position: relative;
    flex: 0 0 90%;
    background: linear-gradient(180deg,var(--vip-gradient-color1) 0,var(--vip-gradient-color2) 100%)padding-box,linear-gradient(60deg,var(--vip-stroke-color1) 14%,var(--vip-stroke-color2) 47%,var(--vip-stroke-color1) 82%,var(--vip-stroke-color2) 100%) border-box;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center center;
    color: var(--vip-text-color1);
    border: .5vw solid transparent;
    border-radius: 16px;
    height: 100%;
}

#vip .vip_card_wrap .vip_card .card_username{
    position: absolute;
    top: 2%;
    left: 3vw;
    font-size: 5vw;
    color: #fff;
    display: flex;
    height: 10vw;
    align-items: center;
}

#vip .vip_card_wrap .vip_card .card_title {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    right: 7%;
    font-size: 8vw;
    color: #f3e4d5;
    font-style: italic;
    top: 2%;
}

#vip .vip_card_wrap .vip_card .card_detail {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    padding-left: 3vw;
    padding-top: 8vw;
    padding-bottom: 5vw;
    box-sizing: border-box;
    gap: clamp(1rem,4vw,3rem);
    margin-top: 11vw;
    padding-top: 3vw;
    border-top:.5vw solid;
    border-color: var(--vip-border-table-color1);
}

#vip .vip_card_wrap .vip_card .card_detail .detail_list {
    font-size: 4vw;
    display: flex;
    align-items: center;
}

#vip .vip_card_wrap .vip_card .card_detail .detail_list .detail_value{
    color: var(--vip-text-color2);
}

#vip .vip_card_wrap .vip_card .card_detail .detail_list > div{
    display: flex;
    align-items: center;
    flex: 0 0 47%;
    margin-right: 2vw;
    font-size: 3vw;
}

#vip .vip_card_wrap .vip_card .card_detail .detail_list > div > span:first-child{
    flex: 0 0 65%;
}

#vip .vip_badge .vip_detail
{
    display: flex;
}

#vip .vip_badge .vip_detail_list
{
    display: flex;
    flex: 0 0 50%;
    justify-content: center;
}

#vip .vip_badge .vip_detail
{
    padding: 5vw;
    font-size: 4vw;
}

#vip .vip_promo_cash
{
    padding: 5vw;
    font-size: 3vw;
}

#vip .vip_detail table, #vip .vip_promo_table table
{
    width: 100%;
    margin: auto;
    border-collapse: collapse;
    border-radius: 2vw;
}

#vip .vip_promo_table table
{
    width: 100%;
    background: linear-gradient(180deg,var(--vip-gradient-color1) 0,var(--vip-gradient-color2) 100%) padding-box,linear-gradient(60deg,var(--vip-stroke-color1) 14%,var(--vip-stroke-color2) 47%,var(--vip-stroke-color1) 82%,var(--vip-stroke-color2) 100%) border-box;
    border: .5vw solid transparent;
}

#vip .vip_detail table tr:nth-child(even), #vip .vip_promo_table table tr:nth-child(even){
    /* background-color: #fff; */
}

#vip .vip_detail table tr:nth-child(odd), #vip .vip_promo_table table tr:nth-child(odd){
    /* background-color: #ecf0fa; */
}

#vip .vip_detail table tr:nth-child(odd) td.vip_column_title, #vip .vip_promo_table table tr:nth-child(odd) td.promo_name{
    /* background-color: #636e82; */
}

#vip .vip_detail table tr:nth-child(even) td.vip_column_title, #vip .vip_promo_table table tr:nth-child(even) td.promo_name{
    /* background-color: #545c70; */
}

#vip .vip_detail table thead tr td.vip_column_title, #vip .vip_promo_table table thead tr td.promo_name{
    /* background-color: #d7c2b2!important;
    color: #000; */
}

#vip .vip_detail table td, 
#vip .vip_detail table th,
#vip .vip_promo_table table td, 
#vip .vip_promo_table table th {
  text-align: center;
}

#vip .vip_promo_table table td
{
    border-right: .5vw solid;
    border-color: var(--vip-border-table-color1);

}


#vip .vip_promo_table table td:last-child
{
    border-right: 0;
}

#vip .vip_promo_table table tr:first-child
{
    border-color: var(--vip-border-table-color1);
}
#vip .vip_promo_table table tr
{
    border-bottom:.5vw solid;
    border-color: var(--vip-border-table-color1);
}

#vip .vip_promo_table table tbody tr:last-child
{
    border-bottom: 0;
}


#vip .vip_detail table td.vip_column_title, #vip .vip_promo_table table td.promo_name{
    color: var(--vip-text-color1);
}

#vip .vip_detail .title, #vip .vip_promo_cash .title
{
    font-size: 7vw;
    margin-bottom: 2vw;
}

#vip .vip_detail .title .icon, #vip .vip_promo_cash .title .icon
{
    color: var(--vip-more-info-text-color);
    margin-right: 1vw;
}

#vip .more_vip{
    text-align: center;
    color: var(--vip-more-info-text-color);
    font-size: 4vw;
    margin: 5vw auto;
    width: 50%;
    border-radius: 16px;
    background: linear-gradient(180deg,var(--vip-gradient-color3) 0,var(--vip-gradient-color4) 100%);
    padding: 4%;
}
#vip .swiper-slide{
    padding: 9px;
    margin-right: unset!important;
}

#vip .vip-list{
    color: #fff;
    background: linear-gradient(180deg,var(--vip-gradient-color3) 0,var(--vip-gradient-color4) 100%);
    border-radius: 2vw;
    text-align: center;
    position: relative;
    z-index: 10;
    padding-block: 3vw;
    height: 5vw;
    font-size: 3vw;
    display: flex;
    align-items: center;
    justify-content: center;
}
#vip .vip-list-wrap.active .vip-list
{
    color: #fff;
    background: var(--vip-background-color2);
}
#vipinfo .viptitle{
    font-size: 8.5vw;
    display: flex;
    align-items: center;
    padding: 2vw;
    height: 10vw;
    box-sizing: border-box;
    justify-content: center;
}   
#vipinfo .title_logo{
    width: 0.5vw;
    background: linear-gradient(to bottom, var(--vip-gradient1-color), var(--vip-gradient2-color));
    height: 3vw;
    display: flex;
    flex: 0 0 0.5vw;
    margin: 0 1vw;
}
#vipinfo .title_word{
    display: flex;
    margin: unset;
}

#vipinfo .title_word h4{
    margin: 0;
    color: var(--vip-text-color1);
}
#vipinfo table{
    border-spacing: 0;
    border-collapse: collapse;
    width: 95%;
    margin: 20px auto;
    background: linear-gradient(180deg,var(--vip-gradient-color1) 0,var(--vip-gradient-color2) 100%) padding-box,linear-gradient(60deg,var(--vip-stroke-color1) 14%,var(--vip-stroke-color2) 47%,var(--vip-stroke-color1) 82%,var(--vip-stroke-color2) 100%) border-box;
    border: .5vw solid transparent;
    border-radius: 16px;
    font-size: 3vw;
    box-shadow: 0px 8px 24px rgba(17,17,26,0.1), 0px 16px 56px rgba(17,17,26,0.1), 0px 24px 80px rgba(17,17,26,0.1);
}
#vipinfo tr 
{
    border-bottom:.5vw solid;
    border-color: var(--vip-border-table-color1);
}
#vipinfo td {
    height: 12vw;
    text-align: center;
    color: var(--vip-text-color1);
    border-right:.5vw solid;
    border-color: var(--vip-border-table-color1);
    width: 20%;
}
#vipinfo tbody tr:last-child
{
    border-bottom: 0;
}
#vipinfo td:last-child
{
    border-right: 0;
}
#vipinfo .vip_list .vip_level
{
    width: 19vw;
    font-weight: bold;
}
#vipinfo .vip_list .vip_title
{
    font-weight: bold;
}
#vipinfo table tr:nth-child(odd) .vip
{
  font-weight: bold;
}
#vipinfo table tr:nth-child(odd) .vip_content
{
  /* background-color: var(--vip-table-td-color); */
}
#vipinfo table tr:nth-child(even) .vip
{
  font-weight: bold;
}
#vipinfo .vip_rules{
    font-size: 4vw;
    padding: 4vw 6vw;
    overflow: auto;
}
#vipinfo p{
    margin: 0;
    color: var(--vip-info-p-color);
}
#vipinfo .vip_rules span{
    color: #858686;
}