@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: var(--bg-white);
    position: relative;
    overflow-x: hidden;
}

.hide {
    display: none;
}

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

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

.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: 98%;
    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: .1rem;
}

.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;
    color: var(--text-white);
    line-height: .4rem;
    height: .4rem;
    text-shadow: #4b1a02 1px 1px 1px;
    position: absolute;
    left: 1rem;

    /* 限制文字宽度，假设3个字符宽度大概为 1.2rem */
    max-width: 1.2rem;

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

.header .header-icons .profile .personal .vip {
    position: absolute;
    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 .personal .my {
    position: absolute;
    background-image: url(../images/index/04.png?v=4);
    font-size: .25rem;
    width: 53px;
    height: 20px;
    line-height: .4rem;
    background-size: 100% 100%;
    bottom: .1rem;
    left: 0.9rem;
    color: #523705;
    font-weight: bolder;
    padding-left: .35rem;
}

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

.header .header-icons .profile .balance {
    position: absolute;
    top: .3rem;
    right: 0.8rem;
    height: .6rem;
    line-height: .6rem;
    font-size: .3rem;
    min-width: 2.5rem;
    color: var(--text-white);
    text-shadow: #fc0 -1px 0 10px;
    /* background-image: url(../images/index/06.png);
    background-size: 100% 100%; */
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-right: .12rem;
    background: rgba(0, 0, 0, 0.75);
    box-shadow: 0px 0px 4px #000000;
    border-radius: 299px;
}

.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, #E0AA71 0%, #8B6241 100%);
    border-radius: 110px;
    position: absolute;
    right: 0.65rem;
    top: 7.5px;
}

.header .header-icons .profile .setting {
    position: absolute;
    right: .22rem;
    top: .3rem;
    background-image: url(../images/index/08.png?3);
    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.6rem;
    background-image: url('../images/index/11.png?v=2');
    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: #ffffff;
    height: .8rem;
    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;
}

.game-class .wrapper .active {

    /*background: linear-gradient(90deg, #37C0FB 0%, #1D70DD 100%);
border-radius: 30px;*/
    background-image: url('../images/index/10.png?v=2');
    color: var(--text-white);
    background-size: 100% 100%; 
    /*background: linear-gradient(180deg, #E0AA71 0%, #8B6241 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/10.png?v=1');
    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;
}

.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?7');
    top: 6rem;
    position:fixed;
    width:46px;
    height: 47px;
}

.left-icon.icon-line {
    background-image: url('../images/index/icon_share.png?7');
    top: 9rem;
    position:fixed;
    width:46px;
    height: 47px;
}


.icon-chat {
    background-image: url('../images/index/icon_chat.png?7');
    top: 7.5rem;
    position:fixed;
    width:46px;
    height: 47px;
}

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

.icon-csp {
    background-image: url('../images/index/12.png');
    bottom: 20vh;
    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: #fff;
    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/19.png?v=2');
    width: .7rem;
    height: .7rem;
}

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

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

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

.footer .block .icon.society {
    background-image: url('../images/index/22.png?v=2');
    width: .7rem;
    height: .7rem;
}
.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/24.png?4');
    height: 3.7rem;
    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-size: .5rem;
    font-weight: bold;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 33%;
    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/26.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);*/ /* 平行四边形的效果 */
    overflow: hidden;
    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%; */
    color: #fff;
    width:79px;
    height:28px;
    text-align: center;
    background-size: 100% 100%; 
    color: #fff;
    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/button-bg.png?n=1');
     background-size: 100% 100%;*/
     background: linear-gradient(180deg, #ca8ccb 0%, #700569 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-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-bg.png?3');
    background-size: 100% 100%;
    position: absolute;
    top: 1.5rem;
    left: 0;
    right: 0;
    bottom: .5rem;
    z-index: -1;
    max-height: calc(100vh - 3.7rem);
    overflow-y: hidden;
    display: flex;
    justify-content: center;
    align-items: start;
    padding-top: 2.35rem;
}

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

#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);
    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?1);
    background-size: 100% 100%;
    width: 50px;
    height: 45px;
}

.dialog-header {
    background-image: url(../images/index/24.png?4);
    height: 3.7rem;
    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-size: .5rem;
    font-weight: bold;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 33%;
    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: 2.3rem;
    overflow-y: hidden;
    height: calc(100vh - 3.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 {
    /* background-image: url(../images/index/35.png); */
    width: 100%;
    height: 100%;
    margin: 0 5px;
    /* background-size: 100% 100%; */
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: .4rem;

    /*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 {
    /* background-image: url(../images/index/34.png); */
    width: 100%;
    height: 100%;
    margin: 0 5px;
    /* background-size: 100% 100%; */
    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;

}
.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, #E0AA71 0%, #8B6241 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;
}

.text-title-block {
    font-size: .25rem;
    text-align: center;
    margin:.3rem 0;
}
.text-title-block span{
    width:186px;
    background-image: url(../images/common/hr_block_bg.png?2);
    background-size: 100% 100%;
    padding: 0.2rem 1rem;
    color: white;
}
.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, #E0AA71 0%, #8B6241 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?1);
    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 #004b7f;
}

.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?1);
    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:white;
}

.dialog-body-wrapper.confirm .cancel-button {
    background-size: 100% 100%;
    background-image: url(/static/blue/wap/sgo/images/index/btn_cancel.png?1);
    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?1);
    box-shadow: unset;
}