@import url('theme-vars.css?3');

* {
    margin: 0;
    padding: 0;
}

*,
*::before,
*::after {
    box-sizing: border-box
}

html {
    height: 100%;
    overflow-x: hidden;
}

a {
    text-decoration: none;
}

a:link,
a:hover,
a:visited {
    color: unset;
}

em {
    font-style: normal;
}

li {
    list-style: none;
}

body {
    font-size: 0;
    color: #fff;
    font-family: "微軟正黑體";
    height: 100%;
    overflow-x: hidden;
    background-color: #e2d5f9;
    position: relative;
    overflow-x: hidden;
}

.hide {
    display: none;
}

@font-face {
    font-family: 'DialogTitleFont';
    src: url('../css/fonts/W9/W9.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

.header {
    width: 100%;
    height: 3.5rem;
    /*background-color: var(--bg-white);*/
    position: relative;
    /* overflow: hidden; */
}

.header .swiper-container {
    width: 96%;
    /*height: 100%;*/
    margin-top: .1rem;
    border-radius: .6rem;
}

.header .swiper-container img {
    width: 100%;
    /*height: 100%;*/
}

.header .header-icons {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 1rem;
    z-index: 2;
    pointer-events: visibleStroke;
    display: flex;
    justify-content: center;
    align-items: center;
}

.header .header-icons .profile {
    position: relative;
    width: 100%;
    height: 1rem;
    /* background-image: url('../images/index/header_bg.png'); */
    background-size: 100% 100%;
}

.header .header-icons .profile .personal {
    /* margin-left: .2rem; */
    /* margin-top: .2rem; */
    display: flex;
    justify-content: start;
    position: absolute;
    top: .2rem;
    left: .3rem;
}

.header .header-icons .profile .personal .avatar {
    width: .8rem;
    height: .8rem;
    /* border: 2px goldenrod solid; */
    background-color: lightblue;
    border-radius: 1rem;
    overflow: hidden;
    margin-left: 6px;
    margin-top: -6px;
}

.header .header-icons .profile .personal .avatar img {
    width: 100%;
    height: 100%;
}

.header .header-icons .profile .personal .nickname {
    font-size: .3rem;
    font-weight:bold;
    color: #413303;
    line-height: .4rem;
    height: .4rem;
    /*text-shadow: #4b1a02 1px 1px 1px;*/
    position: absolute;
    left: 1rem;
    top: -.1rem;
    /* 限制文字宽度，假设3个字符宽度大概为 1.2rem */
    max-width: 1.2rem;

    /* 处理过长文字 */
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}


.header .header-icons .profile .personal .my-container{
    background-image: url(../images/index/kuang_di.png?2);
    background-size: 100% 100%;
    width: 2.2rem;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size:12px;
    margin-top: .3rem;
}


.header .header-icons .profile .personal .my {
     
    background-image: url(../images/index/icon_my.png?v=4);
   font-size:12px;
    width: 53px;
    height: 25px;
    line-height: .4rem;
    background-size: 100% 100%;
    bottom: -0.1rem;
    left: 0.9rem;
    color: #523705;
    font-weight: bolder;
    padding-left: .45rem;
}

.header .header-icons .profile .personal .vip {
    
    background-image: url(../images/index/05.png?v=3);
    font-size: .25rem;
    width: 53px;
    height: 20px;
    line-height: .4rem;
    background-size: 100% 100%;
    bottom: -.5rem;
    left: .1rem;
    color: #523705;
    font-weight: bolder;
    padding-left: .2rem;
}


.header .header-icons .profile .balance-area {
    
    background-image: url(../images/index/kuang_top.png?1);
    background-size: 100% 100%;
    width: 100%;
    height: 1.2rem;
    margin-top: 0rem;
}

.header .header-icons .profile .balance {
    position: absolute;
    top: .1rem;
    right: 1rem;
    height: .8rem;
    line-height: .6rem;
    font-size: .3rem;
    min-width: 2.5rem;
    color: #6e2d6f;
    text-shadow: #fc0 -1px 0 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-right: .12rem;
    background-image: url(../images/index/kuang_money.png);
    background-size: 100% 100%;
    
}

.header .header-icons .profile .balance img {
    height: .6rem;
    width: .6rem;
}

.header .header-icons .profile .balance .refresh {
    height: .3rem;
    width: .3rem;
}

.header .header-icons .profile .recharge {
    text-shadow: 1px 1px 2px black;
    font-weight: 300;
    font-size: .25rem;
    color: white;
    height: .65rem;
    width: 1rem;
    display: flex;
    justify-content: center;
    align-items: center;
    /* background: url(../images/index/recharge.png); */
    /* background-size: cover; */
    background: linear-gradient(180deg, #c596fe 0%, #af63f3 100%);
    border-radius: 110px;
    position: absolute;
    right: 0.65rem;
    top: 7.5px;
}

.header .header-icons .profile .setting {
    position: absolute;
    right: .4rem;
    top: .3rem;
    background-image: url(../images/index/icon_setting.png?1);
    background-size: 100% 100%;
    width: .5rem;
    height: .5rem;
}

.header .notice {
    position: absolute;
    display: flex;
    font-size: .2rem;
    /* color: var(--text-white); */
    color: #fff;
    bottom: .6rem;
    z-index: 3;
    left: 2.5%;
    width: 95%;
    display: flex;
    justify-content: start;
    flex-direction: row;
    align-items: center;

    /*background: rgba(0, 0, 0, 0.7);*/
    border-radius: 99px;
    padding: 0 10px;
}

.header .notice .icon {
    width: .4rem;
    height: .4rem;
}

.notice-box {
    width: 95%;
    position: relative;
    height: .4rem;
    overflow: hidden;
}

.scroll {
    /*width的大小是根据下面li的长度和多少个li而定的，需注意！*/
    position: absolute;
    left: 0;
    top: 0px;
    display: flex;
}

.scroll li {
    flex: 1;
    float: left;
    display: block;
    line-height: .4rem;
    text-align: center;
    margin-right: .2rem;
    word-break: keep-all;
    white-space: nowrap;
    font-size: .3rem;
}

.scroll li a {
    color: var(--text-white);
    font-size: 15px;
    display: block;
    word-break: keep-all;
    white-space: nowrap;
}

.game-class {
    position: absolute;
    width: 100%;
    /* left: 5%;
    right: 5%; */
    height: 1.2rem;
    top: 4.8rem;
    background-image: url('../images/index/kuang_gametype.png');
    background-size: 100% 100%;
    z-index: 3;
    display: flex;
    justify-content: center;
    align-items: center;
   
}

.game-class .wrapper {
    width: 98%;
    display: flex;
    justify-content: center;
    align-items: center;
    justify-content: space-evenly;
    font-size: .25rem;
    color: black;
    height: 1.1rem;
    line-height: .8rem;
    font-weight: bold;
    border-radius: 30px;
    /* background-color: white; */
 
}

.game-class .wrapper div {
    /* flex: 1; */
    display: flex;
    height: .7rem;
    justify-content: center;
    align-items: center;
    width: .9rem;
    margin-top: -.2rem;
}

.game-class .wrapper .active {

    /*background: linear-gradient(90deg, #37C0FB 0%, #1D70DD 100%);
border-radius: 30px;*/
    background-image: url('../images/index/icon_selected.png?v=21');
    color: var(--text-white);
    background-size: 100% 100%; 
    /*background: linear-gradient(180deg, #c596fe 0%, #af63f3 100%);
    box-shadow: inset 0px 1px 2px #37C0FB;*/
    
}

.game-class-2 {
    position: absolute;
    left: 5%;
    right: 5%;
    height: .8rem;
    top: 3.9rem;
    background-image: url('../images/index/11.png?v=1');
    background-size: 100% 100%;
    z-index: 4;
    display: flex;
    justify-content: center;
    align-items: center;
}

.game-class-2 .wrapper {
    width: 98%;
    display: flex;
    justify-content: center;
    align-items: center;

    justify-content: space-evenly;

    font-size: .25rem;
    color: #4b1a02;
    height: .8rem;
    line-height: .8rem;
    font-weight: bold;
}

.game-class-2 .wrapper div {
    flex: 1;
    display: flex;
    height: .7rem;
    width: .3rem;
    justify-content: center;
    align-items: center;
}

.game-class-2 .wrapper .active {
    background-image: url('../images/index/icon_selected.png?21');
    color: var(--text-white);
    background-size: 100% 100%;
}



.index-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: calc(100vh - 5.3rem);
    max-height: calc(100% - 5.3rem);
    /*padding-top: .6rem;*/
    overflow-x: scroll;
    /* background-image: url('../images/index/bg.jpg'); */
    background-size: 100% 100%;
    padding-bottom: 1.5rem;
    margin-top: 1rem;
}

.index-games-icons-row {
    display: flex;
    width: 95%;
}

.index-center.search .index-games-icons-row {
    margin-top: 1.4rem;
}


.index-games-icons-row div img {
    width: 100%;
    height: 100%;
}

.recommend{
    background-image: url(/static/blue/wap/sgo/images/index/rec-bg.png?1);
    background-size: 100% 100%;
    width: 100%;
    /* margin-top: .5rem; */
    padding-top: .8rem;
    display: flex
;
    justify-content: center;
    height: 4.5rem;
}

.rec-title{
    position: absolute;
    
    z-index: 11;
    top: 5.3rem;
    width: 4rem;
    height: 1.5rem;
    left: 1.8rem;

}

.first-row-right {
    display: flex;
    flex-direction: column;
}

.index-games-icons-row .game-icon {
    padding: .15rem;
    margin-top:10px;
}

.index-games-icons-row.col3 .game-icon {
    width: 33%;
}

.game-icon {
    position: relative;
}

.game-icon .show-jackpot {
    position: absolute;
    z-index: 2;
    width: 80%;
    height: 24%;
    left: 10%;
    background-size: 100% 100%;
}

.game-icon .show-jackpot {
    background-image: url('../images/index/jackpot.png');
}

.game-icon .show-jackpot .count {
    width: 100%;
    height: 100%;
    padding: 0 0 0.15rem 0;
    font-size: .2rem;
    display: flex;
    align-items: center;
    justify-content: center;
}
.game-icon.big .show-jackpot .count {
    font-size: .4rem;
}

.game-icon .left-top {
    position: absolute;
    z-index: 3;
    background-size: 100% 100%;
    width: .6rem;
    height: .6rem;
    background-size: 100% 100%;
}

.game-icon .left-top.hot {
    background-image: url('../images/index/hot.png');
}

.game-icon .left-top.recommend {
    background-image: url('../images/index/recommend.png');
}

.game-icon .left-top.new {
    background-image: url('../images/index/new.png');
}

.game-icon .right-top {
    background-image: url('../images/index/14.png?2');
    position: absolute;
    z-index: 3;
    width: .5rem;
    height: .5rem;
    right: 0;
    background-size: 100% 100%;
}

.game-icon.big .right-top{
    width: .8rem;
    height: .8rem;
}

.game-icon.big .left-top {
    width: 1rem;
    height: 1rem;
}

.game-icon .right-top.active {
    background-image: url('../images/index/13.png');
}

.game-icon .right-bottom {
    position: absolute;
    z-index: 3;
    bottom: 0;
    right: 0;
    color: #4b1a02;
    font-size: .3rem;
    background-color: #fc0;
    font-weight: bolder;

    display: flex;
    justify-content: center;
    align-items: center;
    width: 1.2rem;
    height: .4rem;
    border-radius: .2rem;
}

.game-icon .jackpot {
    position: relative;
}

.right-icon,
.left-icon {
    position: fixed;
    z-index: 4;
    width: 1.2rem;
    height: 1.2rem;
    background-size: 100% 100%;
    font-size: .22rem;
    display: flex;
    justify-content: center;
    padding-top: .85rem;
    color: #4b1a02;
    font-weight: bolder;
}

.left-icon {
    left: 0;
}

.right-icon {
    right: 0;
}

.icon-prop {
    background-image: url('../images/index/16.png');
    bottom: 50vh
}

.icon-recharge {
    background-image: url('../images/index/btn_topup_v2.png?7');
    top: 6.5rem;
    position:fixed;
    width:62px;
    height:83px;
    scale: .7;
}

.icon-task {
    background-image: url('../images/index/icon_mission.png?1');
    top: 6rem;
    position:fixed;
    width:55px;
    height: 55px;
    z-index: 20;
}

.left-icon.icon-line {
    background-image: url('../images/index/icon_share.png?1');
    top: 8.6rem;
    position:fixed;
    width:55px;
    height: 55px;
    z-index: 20;
}


.icon-chatx {
    background-image: url('../images/index/icon_chat.png?1x');
    top: 7.3rem;
    position:fixed;
    width:55px;
    height: 55px;
    z-index: 20;
}

.icon-chatx .chat-unread-notify {
    width: 0.4rem;
    height: 0.4rem;
    position: absolute;
    top: .2rem;
    background-color: yellow;
    border-radius: 50%;
}

.icon-wheelx {
    background-image: url('../images/index/icon-wheel.png');
     top: 9.9rem;
    color: white;
}

.icon-csp {
    background-image: url('../images/index/12.png');
    bottom: 20vh;
    color: white;
}

.icon-switch{
    
    top: 10.6rem;
    color: white;
}


.footer {
    /*background-color: var(--bg-white);*/
    height: 1.1rem;
    display: flex;
    justify-content: space-evenly;
    bottom: 0;
    position: absolute;
    width: 7.5rem;
}

.footer .block {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    height: 100%;
    position: relative;
}

.footer .block .tag {
    font-size: .25rem;
    height: 0.5rem;
    line-height: .5rem;
    color: #000000;
    font-weight: bold;
}

.footer .block .icon {
    position: absolute;
    bottom: .5rem;
    font-weight: bolder;
    background-size: 100% 100%;
}

.footer .menu-bg{
    padding-top: .5rem;
    left: 0;
    bottom: 0;
    position: absolute;
    width: 142px;
    overflow: hidden;
    height: 361px;
    background-image: url(../images/index/menu_bg.png);

     .item {
        width:142px;
        height:40px;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;
        justify-content:center;
        margin-right: .2rem;
        
        .text {
            margin-left:.2rem;
            font-size: .25rem;
            height: 0.5rem;
            line-height: .5rem;
            color: #fff;
            font-weight: bold;
        }
    }

    .line {
        width:100%;
        height:1px;
        background-image: url(../images/index/line.png);
    }
}

.footer .block .icon.activity {
    background-image: url('../images/index/icon_activity.png?v=2');
    width: .9rem;
    height: .9rem;
}

.footer .block .icon.rank {
    background-image: url('../images/index/icon_rank.png?v=2');
    width: .9rem;
    height: .9rem;
}

.footer .block .icon.shop {
    background-image: url('../images/index/icon_shop.png?v=2');
    width: 1.9rem;
    height: 1.8rem;
    margin-top: 1rem;
    bottom: -0.1rem;
}

.footer .block .icon.gift {
    background-image: url('../images/index/icon_gift.png?v=2');
    width: .9rem;
    height: .9rem;
}

.footer .block .icon.society {
    background-image: url('../images/index/22.png?v=2');
    width: .9rem;
    height: .9rem;
}
.footer .block .icon.icon-service {
    background-image: url('../images/index/services.png');
    width: .4rem;
    height: .4rem;
}

/*****页面对话框*****/
#page-dialog {
    font-size: .5rem;
    color: black;
}

#page-dialog .page-dialog-header {
    background-image: url('../images/index/heading.png');
    height: 3rem;
    background-size: 100% 100%;
    color: white;
    display: flex;
    justify-content: center;
    font-size: .25rem;
    position: absolute;
    top: 0;
    width: 100%;
}

.page-dialog-menu-wrapper {
    display: flex;
    width: 80%;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}


.page-dialog-menu-wrapper .title {
    font-family: 'DialogTitleFont', sans-serif;
    font-size: .5rem;
    font-weight: bold;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 45%;
    height: 1rem;
    background: linear-gradient(to top, #FEFF9B, #F8AE41);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-fill-color: transparent;

    /* 文字描邊 */
    /*-webkit-text-stroke: 1px #840BA5;*/
    text-stroke: 1px #840BA5;
    /*text-shadow: -1px -1px 0 #840BA5, 1px -1px 0 #840BA5, -1px 1px 0 #840BA5, 1px 1px 0 #840BA5;*/
  

    /*background: linear-gradient(to bottom, #FEFF9B, #F8AE41);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke: 1px #C22400; */


}

.page-dialog-menu-wrapper .title  font {
    background: linear-gradient(180deg, #FEFF9B 0%, #F8AE41 100%);
    border: 2px solid #840BA5;
    box-shadow: 0px 2px 4px 0px #00000080;

}

.page-dialog-menu-wrapper .buttons {
    position: absolute;
    top: 2.9rem;
    width: 343px;
    height: 46px;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    /*background-image: url('../images/index/dialog-menu-bg.png?2');
    background-size: 100% 100%;*/
}

.page-dialog-menu-wrapper .buttons>div {
    width: 110px;
    height: 30px;
    font-size: 14px;
    margin: 0 5px;
    display: flex;
    justify-content: center;
    align-items: center;
   background-image: url('../images/index/btn_c2.png');
    background-size: 100% 100%;
    color: #000;

    /*background: linear-gradient(180deg, #E5A86E 0%, #8F603F 100%);
    box-shadow: 1px 2px 0px rgba(0, 0, 0, 0.5);
    border-radius: 5px;

    transform: skewX(15deg);*/ /* 平行四边形的效果 */
     
    /*background: linear-gradient(180deg, #E5A86E 0%, #8F603F 100%);
    clip-path: polygon(0% 0%, 90% 0%, 100% 100%, 10% 100%);
    filter: drop-shadow(4px 4px 8px rgba(0, 0, 0, 0.3));
    border-radius: 5px;*/

}

.page-dialog-menu-wrapper .buttons>div span {
    /*transform: skewX(-15deg);*/ /* 平行四边形的效果 */
    /*background-image: url('../images/index/button-bg.png?n=1');
    background-size: 100% 100%; */
    width:79px;
    height:28px;
    text-align: center;
    background-size: 100% 100%; 
    color: #000;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-bottom: 3px;
}

.page-dialog-menu-wrapper .buttons>div.page-dialog-menu-active {
     color: #fff;
    background-image: url('../images/index/btn_c1.png');
     background-size: 100% 100%;
     
}

.page-dialog-menu-wrapper .buttons>div.page-dialog-menu-red-active {
     color: #fff;
     /*background-image: url('../images/index/button-bg.png?n=1');
     background-size: 100% 100%;*/
     background: linear-gradient(180deg, #FF5736 0%, #7D2526 100%);
     clip-path: polygon(0% 0%, 90% 0%, 100% 100%, 10% 100%);
     filter: drop-shadow(4px 4px 8px rgba(0, 0, 0, 0.3));
}

#page-dialog .page-dialog-body-wrapper {
    /* background-color: var(--bg-white); */
    background-image: url('../images/common/page-dialog-body-bg2.png?4');
    background-size: 100% 100%;
    position: absolute;
    top: 1.5rem;
    left: 0;
    right: 0;
    bottom: .5rem;
    z-index: -1;
    max-height: calc(100vh - 0rem);
    overflow-y: hidden;
    display: flex;
    justify-content: center;
    align-items: start;
    padding-top: 2.3rem;
}

#page-dialog .page-dialog-body {
    width: 95%;
    max-height: calc(100vh - 5rem);
    overflow-y: scroll;
    position: relative;
    padding-bottom: 2rem;
}

#page-dialog .page-dialog-footer {
    background-color: rgba(0, 0, 0, 0);
    position: absolute;
    left: 0;
    right: 0;
    height: 1.1rem;
    bottom: 0rem;
    z-index: 100;
}
#page-dialog .page-dialog-footer img:nth-child(1) {
    height: 1.1rem;
}

.page-dialog-footer-close {
    position: fixed;
    left: calc(50vw - 0.5rem);
    bottom: .5rem;
    width: 1rem;
}

#page-dialog .page-dialog-footer .nav{
    background-image: url(../images/index/page-dialog-foolter-bg.png);
    background-size: 100% 100%;
    position: absolute;
    color:white;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
#page-dialog .page-dialog-footer .nav .home{
    background-image: url(../images/index/footer-home.png?21);
    background-size: 100% 100%;
    width: 44px;
    height: 45px;
}

#page-dialog .page-dialog-footer .nav .list{
    background-image: url(../images/index/footer-list.png);
    background-size: 100% 100%;
    width: 64px;
    height: 45px;
}

#page-dialog .page-dialog-footer .nav .back{
    background-image: url(../images/index/footer-back.png?11);
    background-size: 100% 100%;
    width: 50px;
    height: 45px;
}

.dialog-header {
    background-image: url(../images/index/heading.png?4);
    height: 3rem;
    background-size: 100% 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: .4rem;
    padding-bottom: 15px;
    width: 98vw;
    position: absolute;
    top: 2vh;
  }

.dialog-header div {
    font-family: 'DialogTitleFont', sans-serif;
    font-size: .5rem;
    font-weight: bold;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 45%;
    height: 1rem;
    background: linear-gradient(to top, #FEFF9B, #F8AE41);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    /*font-size: 35px;
    font-weight: bold;
    background: linear-gradient(to bottom, #FEFF9B, #F8AE41);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke: 1px #C22400;*/
}
  
  .dialog-header-without-title { 
    background-image: url(../images/index/004-2.png);
    height: .5rem;
    background-size: 100% 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: .4rem;
    padding-bottom: .3rem;
    position: absolute;
    top: 1rem;
    width: 100%;
    border-radius: .55rem .55rem 0 0;
  }
  
  .dialog-footer {
    /*background-image: url(../images/index/23-0.png);
    background-size: 100% 100%;*/
    height: 1.1rem;
    bottom: 0;
    width: 100%;
    position: fixed;
  }

  .dialog-border {
    position: absolute; width: 9px; height: 96%;
  }
  .dialog-border.top {
    border-radius: .55rem .55rem 0 0;
    width: 100%;
    height: 15px;
    top: 0;
  }
  .dialog-border.left {
    left: 0;
  }
  .dialog-border.right {
    right: 0;
  }

  .dialog-body-wrapper {
    background-image: url(../images/common/page-dialog-body-bg.png);
    background-size: 100% 100%;
    position: absolute;
    bottom: .3rem;
    overflow-y: hidden;
    height: calc(100vh - 1.7rem);
    z-index: -1;
    color: #4b1a02;
    width: 94%;
    margin: 0 auto;
    padding-top: 2.4rem;
  }
  .dialog-body {
    padding: .5rem;
    height: 100%;
    font-size: .3rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow-y: auto;
  }

/****** vant *******/
.van-overlay {
    background-color: rgba(0, 0, 0, 0.6) !important;
    backdrop-filter: blur(5px) !important;
}

.primary-button {
   
    width: 100%;
    height: 100%;
    margin: 0 5px;
    
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: .4rem;
    text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
    background-image: url(../images/common/btn_purple.png?2); 
    background-size: 100% 100%; 
    /*background: linear-gradient(180deg, #D62900 0%, #560E03 100%);*/
    /*background: linear-gradient(180deg, #BD73E8 0%, #36056A 100%);
    box-shadow: inset 0px 1px 2px #F8A51F;
    border-radius: 6px;
    text-shadow: 
        -1px -1px 0 #000,  
         1px -1px 0 #000,
        -1px  1px 0 #000,
         1px  1px 0 #000;*/

}
.danger-button {
    
    width: 100%;
    height: 100%;
    margin: 0 5px;
    
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: .4rem;

     
    /*background: linear-gradient(180deg, #BD73E8 0%, #36056A 100%);
    box-shadow: inset 0px 1px 2px #F8A51F;
    border-radius: 6px;*/
    text-shadow: 
        -1px -1px 0 #000,  
         1px -1px 0 #000,
        -1px  1px 0 #000,
         1px  1px 0 #000;

    background-image: url(../images/common/btn_purple.png); 
    background-size: 100% 100%; 
}
.warm-button {
    width: 90%;
    height: 100%;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: .35rem;
    text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
    background: linear-gradient(180deg, #c596fe 0%, #af63f3 100%);
    box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.5);
    border-radius: 25px;
}
.cancel-button {
    width: 100%;
    height: 100%;
    margin: 0 5px;
    background-size: 100% 100%;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: .4rem;
    text-shadow: 
        -1px -1px 0 #000,  
         1px -1px 0 #000,
        -1px  1px 0 #000,
         1px  1px 0 #000;
    /* background: linear-gradient(180deg, #D62900 0%, #560E03 100%);
    box-shadow: inset 0px 1px 2px #F8A51F;
    border-radius: 6px; */

    background: linear-gradient(180deg, #F4F4F4 0%, #E4E4E4 52%, #CECECE 55%, #C0C0C0 100%);
    border: 2px solid #FFFFFF;
    box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.5);
    border-radius: 6px;
}

.pay-button {
    width: 100%;
    height: 100%;
    margin: 0 5px;
    background-size: 100% 100%;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: .4rem;
    text-shadow: 
        -1px -1px 0 #000,  
         1px -1px 0 #000,
        -1px  1px 0 #000,
         1px  1px 0 #000;
    /* background: linear-gradient(180deg, #D62900 0%, #560E03 100%);
    box-shadow: inset 0px 1px 2px #F8A51F;
    border-radius: 6px; */

     background-image: url(../images/common/btn_purple.png); 
    background-size: 100% 100%; 
    border: 2px solid #FFFFFF;
    box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.5);
    border-radius: 6px;
}

.text-title-block {
    font-size: .25rem;
    text-align: center;
    margin:.3rem 0;
}
.text-title-block span{
    width:186px;
    background-image: url(../images/common/kuang_heading.png);
    background-size: 100% 100%;
    padding: 0.2rem 1rem;
    color: black;
}
.text-title-block hr{
    position: relative;
    top: 0.22rem;
    z-index: -1;
}

.chat-unread-notify {
    width: 0.4rem;
    height: 0.4rem;
    background-image: url(/static/blue/wap/sgo/images/index/warning.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

.msg-unread-notify {
    width: 0.4rem;
    height: 0.4rem;
    background-image: url(/static/blue/wap/sgo/images/index/warning.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

.van-popup {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
}

.van-popup--center {
    border-radius: 0 !important;
    background: transparent !important;
}

.close-button {
    min-width: 86px;
    padding: 0 10px;
    height: 40px;
    font-size: .3rem;
    font-weight: bold;
    margin: 0 auto;
    box-sizing: border-box;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(180deg, #c596fe 0%, #af63f3 100%);
    box-shadow: inset 0px 1px 2px #F8A51F;
    border-radius: 6px;
}

.dialog-body-wrapper.confirm {
    width: 90%;
    height: 7.5rem;
    max-height: calc(100%);
    background-image: url(/static/blue/wap/sgo/images/index/confirm_bg.png?2);
    background-size: 100% 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: unset;
}

.dialog-body-wrapper.confirm .confirm-header{
    height: .9rem; 
    width: 100%;
    font-size: .5rem;
    font-weight: bold;
    text-align:center;
    color: #e56222;
    border-bottom: 1px solid purple;
}

.dialog-body-wrapper.confirm .confirm-body{
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-direction: column;
    color: #000;
    height: 4rem;
}

.dialog-body-wrapper.confirm .confirm-body div{
    font-weight: 500;
    font-size: .3rem;
    margin: 5px;
}

.dialog-body-wrapper.confirm .confirm-body .custom-input{
    /*background-color: purple;*/
     background-size: 100% 100%;
    background-image: url(/static/blue/wap/sgo/images/index/kuang.png?12);
    border: 1px solid #e0e0e0;
    border-radius: 0.2rem;
    padding: 0.2rem;
    font-size: .4rem;
    outline: none;
    width: 60%;
    height: 1rem;
    margin-left: 10px;
    box-sizing: border-box;
    color:black;
}

.dialog-body-wrapper.confirm .cancel-button  {
    background-size: 100% 100%;
    background-image: url(/static/blue/wap/sgo/images/index/btn_cancel.png?12);
    box-shadow: unset;
}

.dialog-body-wrapper.confirm .cancel-button-img  {
    background-size: 100% 100%;
    background-image: url(/static/blue/wap/sgo/images/index/btn_cancel.png?12);
    box-shadow: unset;
}

.dialog-body-wrapper.confirm .primary-button {
    background-size: 100% 100%;
    background-image: url(/static/blue/wap/sgo/images/index/btn_confirm.png?12);
    box-shadow: unset;
}


.menu {
    width: 1.3rem;
    height: 28px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    bottom: 1.5rem;
    right: 8px;
    position:fixed;
    background-image: url(/static/blue/wap/sgo/images/index/btn_menu_bg.png?xy);
    background-size: 100% 100%;
    z-index: 888;
     pointer-events: auto;
}



.menu .bar {
    height: 50%;
    width: 35%;
    background-size: 100% 100%;
}

.menu .bar.open {
    background-image: url(/static/blue/wap/sgo/images/index/menu_open.png?x);
}

.menu .bar.close {
    background-image: url(/static/blue/wap/sgo/images/index/menu_close.png?x);
}

.menu-panel {
    position: fixed;
    bottom: 2.2rem;    /* 在 menu 按鈕下方 */
    right: 8px;
    width: 1.3rem;
    overflow: hidden;
    background-image: url(/static/blue/wap/sgo/images/index/menu_panel_bg.png);
    background-size: 100% 100%;

    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    z-index: 999;

    opacity: 0;
    transform: translateY(10px); /* 稍微在下方，準備往上滑 */
    pointer-events: none;        /* 隱藏時不能點擊 */
    transition: all 0.3s ease;

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

.menu-panel.open {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.menu-panel a {
    display: block;
    height: 1rem;
    width: 1rem;
    margin: 5px 0;
    background-size: 100% 100%;
}

.menu-panel a.icon-mission {
    background-image: url(/static/blue/wap/sgo/images/index/icon_mission.png);
}

.menu-panel a.icon-share {
    background-image: url(/static/blue/wap/sgo/images/index/icon_share.png);
}

.menu-panel a.icon-chat {
    background-image: url(/static/blue/wap/sgo/images/index/icon_chat.png?x);
}

.menu-panel a.icon-window {
    background-image: url(/static/blue/wap/sgo/images/index/icon_join.png);
}

.menu-panel a.icon-phone {
    background-image: url(/static/blue/wap/sgo/images/index/icon_phone.png);
}

.menu-panel a.icon-wheel {
    background-image: url(/static/blue/wap/sgo/images/index/icon_wheel.png?xy);
}

.menu-panel a.icon-wheel2 {
    background-image: url(/static/blue/wap/sgo/images/index/icon_wheel2.png?x);
}

.ruby_shining {
    width: .25rem;
    position: absolute;
    right: -0.2rem;
    top: -0.1rem;
}

/*
textarea::placeholder {
  color: #b4f0ff;
}
 
textarea::-webkit-input-placeholder { 
  color: #b4f0ff;
}
textarea::-moz-placeholder {  
  color: #b4f0ff;
}
textarea:-ms-input-placeholder {  
  color: #b4f0ff;
}*/