/*禁止雙擊放大*/
html {
    touch-action: manipulation;
}

/*--- 狗來富CSS ---*/
.golifu_Box {
    background-color: #fef7e4;
}
/*---  輪播  ---*/
.carousel-inner img {
    width: 100%;
    height: 100%;
}

.carousel .banner-mask {
    width: 100%;
    height: auto;

    position: absolute;
    bottom: -1px;
}

/*---  抬頭  ---*/
.line_pict{
    width: 87%;
    height: auto;
    border-radius: 50%;
    box-shadow: 4px 4px 15px 0px rgb(0 0 0 / 88%);
}
.golifu_Box .golifuTop {
    width: 100%;
    height: 120px;
    margin: 5px 0 0 0;
    padding: 0 3%;
    position: absolute;
    top: 0;
    /*background-color: #0b0b0a;*/
    z-index: 9;
}

.golifu_Box .golifuTop .topBoxA {
    float: left;
    width: 53%;
    height: 100%;
    margin: 0;
    padding: 0;
}
.topBoxA_index{
    width: 60% !important;
}
.topBoxB_index {
    width: 40% !important;
}
.golifu_Box .golifuTop .topBoxA .avatarA {
    width: auto;
    height: 100%;
    position: absolute;
    top: 0;
    left: 20px;
    z-index: 1;
    /*background-color: #0c5460;*/
}

.golifu_Box .golifuTop .topBoxA .avatarA img {
    width: auto;
    height: 100%;
}

.golifu_Box .golifuTop .topBoxA .maneBoxA {
    width: auto;
    height: 50%;
    font-size: 2rem;
    color: #FFF;
    text-shadow: -1px 0px 3px #3c3c3c, 0px 1px 3px #3c3c3c, 1px 0px 3px #3c3c3c, 0px -1px 3px #3c3c3c;
    margin: 0 0 0 90px;
    padding: 0 0 0 20px;

    display: flex;
    align-items: center;
    justify-content: flex-start;

    position: relative;
    z-index: 9;
}

.golifu_Box .golifuTop .topBoxA .myBoxA {
    width: auto;
    height: 46%;
    font-size: 2rem;
    margin: 0 0 0 80px;
    padding: 0;

    position: relative;
    z-index: 9;
}


.golifu_Box .golifuTop .topBoxA .myBoxA img {
    width: auto;
    height: 100%;
    margin: 0;
    padding: 0;

    position: relative;
    z-index: 9;
}

.golifu_Box .golifuTop .topBoxA .myDetail {
    float: left;
    width: auto;
    height: 100%;
    margin: 0;
    padding: 0;

    position: relative;

}
.golifu_Box .golifuTop .topBoxA .myDetail a{
    width: 100%;
    color: #000000;
    margin: 0;
    padding: 0;
}

.golifu_Box .golifuTop .topBoxA .myDetail span {
    position: absolute;
    top: 0.6rem;
    left: 10px;
    margin: 0 20px 0 0;
    padding: 0;
    z-index: 10;
}
.golifu_Box .golifuTop .topBoxA .myDetail strong {
    position: absolute;
    top: 7px;
    left: 45px;
    font-size: 28px;
    margin: 0;
    padding: 0;
    z-index: 10;
}
.golifu_Box .golifuTop .topBoxA .signOut {
    float: left;
    width: 28%;
    height: 100%;
    margin: 0 0 0 1%;
    padding: 0;

    position: relative;

}
.golifu_Box .golifuTop .topBoxA .signOut a{
    width: 80%;
    color: #000000;
    margin: 0;
    padding: 0;
}
/*.golifu_Box .golifuTop .topBoxA .signOut a img{
    width: 80%;
    height: auto;
}*/

.golifu_Box .golifuTop .topBoxA .signOut span {
    position: absolute;
    top: 0.6rem;
    left: 10px;
    margin: 0 20px 0 0;
    padding: 0;
    z-index: 10;
}
.golifu_Box .golifuTop .topBoxA .signOut strong {
    position: absolute;
    top: 7px;
    left: 45px;
    font-size: 28px;
    margin: 0;
    padding: 0;
    z-index: 10;
}

.golifu_Box .golifuTop .topBoxA .signOut a{
    width: 80%;
    color: #000000;
    margin: 0;
    padding: 0;
}

.golifu_Box .golifuTop .topBoxA .myVip {
    float: left;
    width: auto;
    height: 100%;
    margin: 0;
    padding: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    position: relative;

}

.golifu_Box .golifuTop .topBoxA .myVip a {
    width: 100%;
    height: 100%;
    text-align: center;
    font-size: 1.5rem;
    color: #000;
    display: inline-block;
    margin: 0;
    padding: 0;
    position: relative;
    z-index: 10;
}
.golifu_Box .golifuTop .topBoxA .myVip a strong {
    width: 100%;
    height: 100%;
    top: 10px;
    text-align: center;
    position: absolute;
    font-size: 1.5rem;
    margin: 0;
    padding: 0 0 0 10px;
    z-index: 10;
}
.golifu_Box .golifuTop .topBoxB {
    float: right;
    width: 45%;
    height: 100%;
    margin: 0;
    padding: 0;
    position: relative;
    z-index: 1;
}

.golifu_Box .golifuTop .topBoxB .gold {
    width: auto;
    height: 73%;
    margin: 4% 0;
    padding: 0;
    position: absolute;
    top: 0;
    left: 26px;
    z-index: 9;
}

.golifu_Box .golifuTop .topBoxB .refresh {
    float: left;
    width: 15%;
    height: 55%;
    font-size: 33px;
    color: #FFF;
    margin: 8% 0;
    padding: 0 3% 0 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background-image: url(../img/refreshBg.png);
    background-repeat: no-repeat;
    background-size: auto 100%;
    background-position: right;
}

.golifu_Box .golifuTop .topBoxB .overage {
    float: left;
    width: 40%;
    height: 55%;
    font-size: 30px;
    color: #FFF;
    margin: 8% 0 9.5% 20%;
    padding: 0 3% 0 10%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    background-image: url(../img/overageBg.png);
    background-repeat: repeat-x;
    background-size: auto 100%;
    background-position: right;
}

.golifu_Box .golifuTop .topBoxB .settings {
    float: left;
    width: 10%;
    height: 60%;
    font-size: 44px;
    color: #FFF;
    text-shadow: -1px 0px 3px #3c3c3c, 0px 1px 3px #3c3c3c, 1px 0px 3px #3c3c3c, 0px -1px 3px #3c3c3c;
    margin: 6% 0 6% 1%;
    padding: 0.4rem 0 0 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.mp3_laba{ 
    float: right;
    width: 25%;
    height: auto;
    padding: 0.4rem 0 0 0;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 6% 0 9.5% 3%;
}
.mp3_laba img{
    width: 100%;
    height: auto;
}
/*---  跑馬燈 ---*/
.golifu_Box .marqueeGolifu {
    width: 96%;
    margin: 0 2% 0 2%;
    padding: 0;

    /*text-shadow: -1px 0px 3px #3c3c3c, 0px 1px 3px #3c3c3c, 1px 0px 3px #3c3c3c, 0px -1px 3px #3c3c3c;*/

    position: absolute;
    /*top: 19%;*/
    bottom: 2%;
    z-index: 9;
}

.golifu_Box .marqueeGolifu span {
    font-size: 3.5rem;
    color: #FFF;
    display: inline-block;
    margin: 0;
    padding: 0;
    position: absolute;
    top: 3px;
    left: 0;
}

.golifu_Box .marqueeGolifu .marquee {
    float: right;
    width: 99%;
    height: 3.5rem;
    line-height: 3.5rem;
    font-size: 1.5rem;
    display: inline-block;
    margin: 0 0 0 5%;
    padding: 0;
    /* overflow: visible; */
    position: relative;
    z-index: 8;
    font-size: 41px;
}

.golifu_Box .marqueeGolifu .marquee {
    margin: 0;
    padding: 0;
}

/*---  搜尋/游選 ---*/

.golifu_Box .golifu_Game {
    width: 100%;
    height: auto;
    font-size: 1.8rem;
    margin: 1% 0 0 0;
    padding: 0 4%;
    position: relative;
    z-index: 9;
}

.golifu_Box .golifu_Game .gameOpt {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 3%;
    border-radius: 10px;

    box-shadow: 0px 0px 10px 2px #8e8b8b;
    -webkit-box-shadow: 0px 0px 10px 2px #8e8b8b;
    -moz-box-shadow: 0px 0px 10px 2px #8e8b8b;
    -o-box-shadow: 0px 0px 10px 2px #8e8b8b;

    position: relative;
    z-index: 9;
    background-color: #D41135;
}
.gameList_title, .gameList_title2, .gameList_title4{
    
    display: flex;
    align-items: center;
    justify-content: center;
}
.gameList_title3{
    margin-right: 0px !important;
}
.gameList_title div, .gameList_title2 div, .gameList_title3 div, .gameList_title4 div{
    color: #FFF;
    padding: 20px 10px 20px 10px;
    background-image: url(../img/allgame-title.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    width: 38%;
    font-size: 36px;
    text-shadow: -1px 0px 3px #3c3c3c, 0px 1px 3px #3c3c3c, 1px 0px 3px #3c3c3c, 0px -1px 3px #3c3c3c;
}
.gameList_title3 div{
    background-image: url(../img/btn-03.png);
    width: 86%;
    padding: 0px;
    height: 80px;
    line-height: 79px;
    float: right;
    background-size: 100% 100%;
}
.gameList_title4 div{
    background-size: 50% 100%;
    width: 100%;
    font-size: 40px;
}
.gameList_title3_no div{
    background-image: url(../img/btn-02.png);
    color: #000;
    text-shadow: none;
    filter: drop-shadow(0px 5px 10px #696969);
    width: 79%;
    padding: 0px;
    height: 68px;
    line-height: 69px;
    float: right;
    background-size: 100% 100%;
}
.gameList_title::before, .gameList_title::after {
    content: '';
    display: block;
    background-color: #817878;
    width: 30%;
    height: 2px;
    margin: 15px 15px 20px 15px;
}

/*---  搜尋列 ---*/
.golifu_Box .golifu_Game .gameOpt .searchBox {
    width: 100%;
    height: 60px;
    margin: 0 0 20px 0;
    padding: 0;

    position: relative;
    z-index: 9;
    /*background-color: #FFF;*/
}

.golifu_Box .golifu_Game .gameOpt .searchBox .inputBoxA {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0 25px;
    color: hsl(9, 40%, 60%);
    text-align: right;

    outline-style: none;
    border: 0px;
    border-radius: 30px;

    position: relative;
    z-index: 9;
    background-color: #f4ebd7 !important;
}

/*輸入框用ICON*/
.golifu_Box .golifu_Game .gameOpt .searchBox .inputBoxA::placeholder {
    font-family: 'icomoon' !important;
    font-weight: normal;
    overflow: visible;
    vertical-align: top;
    display: inline-block !important;
    padding-left: 5px;
    padding-top: 2px;
    color: hsl(9, 40%, 60%);
}

/*---  遊戲選單 ---*/
.golifu_Box .golifu_Game .gameOpt .gameMenu {
    width: 100%;
    height: auto;
    margin: 0;
    padding: 0;

    position: relative;
    z-index: 9;
    /*background-color: #FFF;*/
}

.golifu_Box .golifu_Game .gameOpt .gameMenu .row {
    margin: 0 !important;
}

.golifu_Box .golifu_Game .gameOpt .gameMenu .row .col-2 {
    text-align: center;
}

.golifu_Box .golifu_Game .gameOpt .gameMenu .row .col-2 p {
    width: 100%;
    font-size: 1.8rem;
    margin: 0;
}

.golifu_Box .golifu_Game .gameOpt .gameMenu .row .col-2 p:first-child {
    font-size: 2.5rem;
    line-height: 3rem;
    color: #ffFF;
}

/*---  遊戲內容 ---*/

.golifu_Box .gameCont {
    width: 100%;
    height: auto;
    margin: 35px 0 0 0;

}

.golifu_Box .gameCont .latestBorder {
    width: 100%;
    height: auto;
    margin: 0;
    padding: 2%;
    border-radius: 80px;

    background-image: url("../img/newest_bg.jpg");
    background-repeat: no-repeat;
    background-size: cover;

    box-shadow: -1px -1px 15px #696969;
    -webkit-box-shadow: -1px -1px 15px #696969;
    -moz-box-shadow: -1px -1px 15px #696969;

    position: relative;
    z-index: 1;
}

.golifu_Box .gameCont .latestBorder .latestCont {
    width: 100%;
    height: auto;
    margin: 0;
    padding: 50px 15px 25px 15px;
    border-radius: 60px;
    color: #FFF;

    background: radial-gradient(center, ellipse cover, #fef7e4 35%, #fef7e4 60%);
    background: -moz-radial-gradient(center, ellipse cover, #fef7e4 35%, #fef7e4 60%);
    background: -webkit-radial-gradient(center, ellipse cover, #fef7e4 35%, #fef7e4 60%);
    background: -o-radial-gradient(center, ellipse cover, #fef7e4 35%, #fef7e4 60%);

}

.golifu_Box .gameCont .latestBorder .latestCont .latesTitle {
    width: 94%;
    text-align: center;

    position: absolute;
    top: -80px;
    z-index: 10;
}

.golifu_Box .gameCont .latestBorder .latestCont .latesTitle img {
    width: auto;
    height: 180px;
}

.golifu_Box .gameCont .latestBorder .latestCont .prizePoolA {
    width: 100%;
    height: 85px;
    font-size: 1.8rem;
    color: #FFF;
    padding: 0px 5px 0;
    /*background-image: url("../img/event/number-box.png");
    background-repeat: no-repeat;
    background-size: cover;*/
    display: flex;
    align-items: center;
    justify-content: center;

    position: absolute;
    top: -8px;
    z-index: 9;
}

.golifu_Box .gameCont .latestBorder .latestCont .prizePoolA .prizePoolBg {
    width: 100%;
    height: auto;
    /*透明圖片陰影*/
    filter: drop-shadow(0px 0px 10px #696969);
    top: 0;
    left: 0;
    position: absolute;
    z-index: 1;
}

.golifu_Box .gameCont .latestBorder .latestCont .eventA {
    width: 100%;
    height: auto;
    /*透明圖片陰影*/
    filter: drop-shadow(0px 0px 10px #696969);
    margin: 80px 0 0 0;
    padding: 0;
    position: relative;
    z-index: 1;
}

.golifu_Box .gameCont .latestBorder .latestCont .eventDigitA {
    width: 100%;
    height: auto;
    font-size: 1.8rem;
    font-weight: bolder;
    text-align: center;
    color: #FFF;
    margin: 0;
    padding: 0;
    position: absolute;
    bottom: 5px;
    z-index: 9;
}

.golifu_Box .gameCont .latestBorder .latestCont .eventA .eventAbg {
    width: 100%;
    height: auto;
    margin: 0;
    padding: 0;
    position: relative;
    z-index: 1;
}

.golifu_Box .gameCont .latestBorder .latestCont .gameIcon {
    width: 90%;
    height: auto;
    /*透明圖片陰影*/
    filter: drop-shadow(0px 0px 10px #696969);
    position: relative;
    z-index: 1;
    margin: auto;
}

.golifu_Box .gameCont .latestBorder .latestCont .giMask {
    width: 100%;
    height: auto;
    position: absolute;
    z-index: 8;
}

.golifu_Box .gameCont .latestBorder .latestCont .gIimg {
    width: 100%;
    height: auto;
    position: relative;
    z-index: 1;
}

.golifu_Box .gameCont .latestBorder .latestCont .giTitle {
    width: 100%;
    height: auto;
    position: absolute;
    white-space: nowrap;
    left: 0;
    bottom: 0;
    z-index: 9;

}

.golifu_Box .gameCont .gameList {
    width: 100%;
    height: auto;
    margin: 25px 0 300px 0;
    position: relative;
    z-index: 1;

}

.golifu_Box .gameCont .gameList .prizePoolA {
    width: 90%;
    height: 180px;
    font-size: 3rem;
    color: #FFF;
    margin: 0;
    padding: 0px 25px 30px;

    display: flex;
    align-items: center;
    justify-content: center;

    position: absolute;
    top: 0;
    left: 5%;
    z-index: 9;
}

.golifu_Box .gameCont .gameList .prizePoolA .prizePoolBg {
    width: 100%;
    height: auto;
    /*透明圖片陰影*/
    filter: drop-shadow(0px 0px 10px #696969);
    top: 0;
    position: absolute;
    z-index: 1;
}

.golifu_Box .gameCont .gameList .prizePoolB {
    display: block;
    width: 90%;
    height: 85px;
    font-size: 1.7rem;
    color: #FFF;
    padding: 0px 5% 5px 5%;
    /*background-image: url("../img/event/number-box.png");
    background-repeat: no-repeat;
    background-size: cover;*/
    display: flex;
    align-items: center;
    justify-content: center;

    position: absolute;
    top: -80px;
    left: 8px;
    z-index: 9;
}
.golifu_Box .gameCont .gameList .prizePoolB .prizePoolBg {
    width: 100%;
    height: auto;
    /*透明圖片陰影*/
    filter: drop-shadow(0px 0px 10px #696969);
    top: 0;
    position: absolute;
    z-index: 1;
}

.golifu_Box .gameCont .gameList .gameIcon {
    width: 90%;
    height: auto;
    position: relative;
    /*透明圖片陰影*/
    filter: drop-shadow(0px 0px 10px #696969);
    z-index: 1;
    margin: auto;
}

.golifu_Box .gameCont .gameList .giMask {
    width: 100%;
    height: auto;
    position: absolute;
    z-index: 8;
}

.golifu_Box .gameCont .gameList .gIimg {
    width: 100%;
    height: auto;
    position: relative;
    z-index: 1;
}

.golifu_Box .gameCont .gameList .giTitle {
    width: 100%;
    height: auto;
    position: absolute;
    white-space: nowrap;
    left: 0;
    bottom: 0;
    z-index: 9;

}

/*--- 下選單 ---*/
.golifu_Box .menuBox {
    width: 100%;
    height: auto;
    padding: 10px 20px 60px 20px;
    background-color: #ff8315;
    position: fixed;
    bottom: -5px;
    left: 0;
    z-index: 11;
}

.golifu_Box .menuBox .col-m5 {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    -ms-flex: 0 0 20%;
    flex: 0 0 20%;
    max-width: 20%;
}

.golifu_Box .menuBox .col-m5 .item{
    width: 148px;
    height: 148px;
    color: #FFF;
    border-radius: 50%;
    font-size: 1.1em;
    text-align: center;
}
.golifu_Box .menuBox .col-m5 .item a{
    width:100%;
    height: 100%;
    color: #FFF;
    text-decoration: none;
    display: inline-block;
}
.golifu_Box .menuBox .col-m5 .item span{
    width: 100%;
    height: 50px;
    line-height: 50px;
    padding-top: 30px;
    font-size: 60px;
    text-align: center;
    display: inline-block;
}
.golifu_Box .menuBox .col-m5 .item b{
    width: 100%;
    height: 50px;
    line-height: 50px;
    font-size: 29px;
    text-align: center;
    display: inline-block;
}
.golifu_Box .menuBox .col-m5 .item.on{
    color: #ff4c4c;
    background-color: #FFF;
    border-radius: 50%;
}
.golifu_Box .menuBox .col-m5 .item.on a{
    color: #ff4c4c;
}
/*--- 小選單 ---*/
.Checklist {
    width:300px;
    height:625px;
    padding: 0px;
    background:#FFF ;

    border-top-left-radius: 25px;
    border-top-right-radius: 25px;
    border-top: 0.8em solid #ff821b;
    border-left: 0.8em solid #ff821b;
    border-right: 0.8em solid #ff821b;
    display: none;

    position: absolute;
    bottom:0;
    left:50px;
    /*overflow:hidden;*/

    transition:left .2s ease-in;
    transition: all 0.5s;
    opacity: 0;

    z-index:10;
}
.Checklist .item{
    width:100%;
    height:auto;
    padding: 0px;
    margin-bottom: -1px;
    border-bottom: 0.2em solid #d4d4d4;
    overflow: hidden;
    position: relative;
    z-index: 1;
}
.Checklist .item .iconImg{
    float: left;
    width:50%;
    text-align: center;
    height:120px;
    padding: 0px;
    position: relative;
    z-index: 1;
}
.Checklist .item .iconImg img{
    width:auto;
    height:100px;
    padding: 0px;
    margin: 10px 0;
    position: relative;
    z-index: 1;
}
.Checklist .item .CheckTxt{
    float: left;
    width:50%;
    font-size: 2.3rem;
    font-weight: bolder;
    line-height:100px;
    height:auto;
    padding: 0px;
    margin: 10px 0;
    position: relative;
    z-index: 1;
}

.Checklist_listTo{
    /*bottom:239px !important;*/
    bottom: 179px !important;
    /*display: unset !important;*/
    transition: all 0.5s;
    opacity: 1;
    display: block;
}

/*--- 分享 ---*/
.golifu_Box .shareBox{
    width: 120px;
    height: auto;
    position: absolute;
    left: 10px;
    bottom: 270px;
    z-index: 9;

    /*background-color: #00acac;*/
}
.golifu_Box .shareBox img{
    width: 100%;
    height: auto;
}

/*--- 聊天 ---*/
.golifu_Box .chatBox{
    width: 120px;
    height: auto;
    position: absolute;
    right: 10px;
    bottom: 470px;
    z-index: 9;

    /*background-color: #00acac;*/
}
.golifu_Box .chatBox .digit{
    width: 50px;
    height: 50px;
    line-height: 50px;
    font-size: 2rem;
    text-align: center;
    color: #FFF;
    font-weight: bolder;
    display: inline-block;
    border-radius: 50%;
    background-color: #fc6820;
    position: absolute;
    top: -2px;
    right: -8px;
    z-index: 9;

    /*background-color: #00acac;*/
}
/*--- 小選單遮罩 ---*/
.CheckMask {
    width:100%;
    height:100%;
    background:#FFF ;

    position: absolute;
    bottom:0px;
    left:0;
    display: none;

    transition:left .2s ease-in;
    transition: all 0.5s;
    opacity: 0;

    z-index:9;
}
.CheckMask_listTo{
    transition: all 0.5s;
    opacity: 0.01%;
}


.golifu_Box .chatBox img{
    width: 100%;
    height: auto;
}

/*--- 跳出視窗 ---*/
.golifu_Box .modal-dialog, .modal-dialog-game {
    width:100%;
    height: 100%;
    margin: 0;
    /* overflow-y: scroll; */
}
.modal {
    z-index: 16 !important;
}
.modal-backdrop {
    z-index: 15 !important;
}
@media (min-width: 800px) {
    .golifu_Box .modal-dialog,  .modal-dialog-game{
        max-width:100% !important;
        height: 100%;

        margin: 0;
    }
}
.golifu_Box .modal-dialog .modal-content, .modal-dialog-game .modal-content{
    position: relative;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    width: 101%;
    height: 100%;

    pointer-events: auto;
    background-color:rgba(255, 255, 255, 0);
    /*background:  radial-gradient(transparent, #FFF 20px);*/
    /*backdrop-filter:blur(10px);*/
    background-clip: unset;
    border:none;
    border-radius:0;
    outline: 0;
}
.golifu_Box .modal-header {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: start;
    align-items: flex-start;
    -ms-flex-pack: justify;
    justify-content: space-between;
    padding:0;
    border-bottom:0;
    border-top-left-radius:0;
    border-top-right-radius:0;
}
.golifu_Box .modal-body, .modal-dialog-game .modal-body{
    /* display: flex; */
    padding: 0px;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: url(../img/modalBg.png) no-repeat;
    background-size: 100%;
    background-color: unset;
    /*overflow-y: auto;*/
}

/*--- 頁籤選單 ---*/
.golifu_Box .modal-body .titleHeader {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: start;
    align-items: flex-start;
    -ms-flex-pack: justify;
    justify-content: space-between;
    padding:0;
    border-bottom:0;
    border-top-left-radius:0;
    border-top-right-radius:0;
    position: relative;
    top:2em;
    z-index: 1;
}
.golifu_Box .modal-body .titleHeader img{
    width: 100%;
    height: auto;
}

.golifu_Box .modal-body .titleHeader .tabMenu{
    width: 80%;
    height: auto;
    margin: 0 10%;
    font-size: 2rem;
    position: absolute;
    left: 0;
    bottom: 0.2rem;
    z-index: 9;

}
.golifu_Box .modal-body .titleHeader .tabMenu.titleBox {
    line-height: 7rem;
    font-size: 2.5rem;
    font-weight: 600;
    color: #FFFFFF;
    text-shadow: -1px 0px 3px #3c3c3c, 0px 1px 3px #3c3c3c, 1px 0px 3px #3c3c3c, 0px -1px 3px #3c3c3c;
    text-align: center;
}
.golifu_Box .modal-body .titleHeader .tabMenu ul li{
    flex: 1;
    height: 100px;
    line-height: 100px;
    text-align: center;
    font-size: 2.2rem;
    text-shadow: -1px 0px 3px #3c3c3c,
    0px 1px 3px #3c3c3c,
    1px 0px 3px #3c3c3c,
    0px -1px 3px #3c3c3c;
    background-image: url("../img/ranking/line.png");
    background-size: 4px auto;
    background-repeat: no-repeat;
    background-position: right center;
    position:relative;
    z-index: 9;
}
.golifu_Box .modal-body .titleHeader .tabMenu ul li:last-child{
    background: none;
}

.golifu_Box .modal-body .titleHeader .tabMenu ul li a{
    color: #FFF;
}
.golifu_Box .modal-body .titleHeader .tabMenu .nav-tabs ,
.golifu_Box .modal-body .titleHeader .tabMenu .nav-link {
    border:none ;
    border-radius:unset ;
    padding: 0 ;

}
.golifu_Box .modal-body .titleHeader .tabMenu .nav-tabs .nav-link.active {
    color: #FFF;
    border: none;
    border-color: rgba(255, 255, 255, 0) !important;
    background-color:rgba(255, 255, 255, 0) !important;
    background-image: url("../img/ranking/ranking-tab.png?t=20241001") ;
    background-size: 70% 100%;
    background-repeat: no-repeat;
    background-position: center;
}
.special_title{
    background-image: none !important;
    font-size: 45px !important;
}

.golifu_Box .modal-body .titleHeader .tabMenu .nav>li>a:focus,
.golifu_Box .modal-body .titleHeader .tabMenu .nav>li>a:hover {
    color: #fff !important;
    background-color:rgba(255, 255, 255, 0) !important;
}
.golifu_Box .modal-body .titleHeader .tabMenu .nav-tabs .nav-link:focus,
.golifu_Box .modal-body .titleHeader .tabMenu  .nav-tabs .nav-link:hover {
    border-color: rgba(255, 255, 255, 0) !important;
}
/*--- 彈窗內容 ---*/
.golifu_Box .modal-body .modalCont {
    width: 100%;
    height: 87%;
    padding:0;

    background-image: url("../img/inner-convo.png?t=20240821");
    background-size: 100% 100%;
    background-repeat: repeat-y;
    position: relative;
    top: 2em;
    z-index: 1;
    background-position-x: -2px;

}
.golifu_Box .modal-body .modalCont .tabCont {
    width: 100% !important;
    height: auto;
    margin: auto;
    font-size: 2rem;
    position:relative;
    z-index: 9;
}
/*--- 內容 ---*/
.golifu_Box .modal-body .modalCont .container {
    max-width: 88%;
    height: 85vh;
    padding: 35px 0 20rem 0;
    overflow-y: auto;
    overflow-x: hidden;
    /*overflow: hidden;*/
}
@media (min-width: 768px){
    .golifu_Box .modal-body .modalCont .container {
        max-width: 88%;
        height: 85vh;
        padding: 35px 0 20rem 0;
        overflow-y: auto;
        overflow-x: hidden;
    }
}
/*--- 頁籤選單 ---*/
.golifu_Box .modal-body .modalCont .container .list-group-item{
    border:none;
    background: unset;
}

.golifu_Box .modal-body .modalCont .container .list-group-item .medalBox{
    float: left;
    width: auto;
    height: 80px;
    line-height: 80px;
    margin: 10px 10px 0 0;

    border:none;
}
.golifu_Box .modal-body .modalCont .container .list-group-item .medalA{
    width: 100%;
    height: auto;
    position: absolute;
    top: -10px;
    left: 20px;
    z-index: 8;
}
.golifu_Box .modal-body .modalCont .container .list-group-item .avatarA{
    float: left;
    width: auto;
    height: 80px;
    line-height: 80px;
    margin: 20px 20px 0 10px;
    position: relative;
    z-index: 8;
    border-radius: 50%;
}
.golifu_Box .modal-body .modalCont .container .list-group-item .goldcoinsA{
    float: left;
    width: auto;
    height: 60px;
    line-height: 80px;
    margin: 30px 10px 0 0;
    position: relative;
    z-index: 8;
}
.golifu_Box .modal-body .modalCont .container .list-group-item strong{
    float: left;
    font-size: 1.9rem;
    line-height: 130px;
    letter-spacing: -2px;
    position: relative;
    z-index: 8;

}
.golifu_Box .modal-body .modalCont .container .list-group-item .pointsA{
    float: left;
    font-size: 1.5rem;
    line-height: 130px;
    text-align: center;
    letter-spacing: -3px;
    position: relative;
    z-index: 8;

}
.pointsA-font{
    font-size: 2.2rem !important;
    font-weight: 700 !important;
}
.golifu_Box .modal-body .modalCont .container .list-group-item .Ri-digit{
    float: left;
    width: 100%;
    font-size: 2.8rem;
    color: #ff703b;
    line-height: 130px;
    padding: 0 0 0 0;
    margin: 0 -2rem 0 0;
    text-align: center;
    letter-spacing: -0.5rem;
    position: relative;
    z-index: 8;

}

.golifu_Box .modal-body .modalCont .container .list-group-item .r-listBgA{
    width: 100%;
    height: auto;
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    z-index: 1;
}
.golifu_Box .modal-body .modalCont .container .list-group-item,
.golifu_Box .modal-body .modalCont .container .list-group-item:first-child{
    padding: 0;
}
.golifu_Box .modal-body .modalCont .container .list-group-item .row {
    margin-right: 0;
    margin-left: 0;
}

/*--- ---*/
.golifu_Box .modal-body .modalCont .container .mallBtnBox {
    width: 100%;
    position: relative;
    z-index: 9;
}
.golifu_Box .modal-body .modalCont .container .mallBtnBox img{
    width: 100%;
    height: auto;
    position: relative;
    z-index: 1;
}
.golifu_Box .modal-body .modalCont .container .mallBtnBox a,
.golifu_Box .modal-body .modalCont .container .mbrCardBox a{
    width: 100%;
    height: 100%;
    display: inline-block;
    text-align: center;
    position: relative;
    z-index: 1;
}
.golifu_Box .modal-body .modalCont .container .mallBtnBox .mall-btn01 {
    float:left;
    width: 60%;
    height: 6.7rem;
    position: relative;
    z-index: 1;
}
.golifu_Box .modal-body .modalCont .container .mallBtnBox .mall-btn02 {
    float:left;
    width: 40%;
    height: 7rem;
    position: relative;
    z-index: 1;
}
.golifu_Box .modal-body .modalCont .container .mbrCardBox{
    width: 100%;
    height: auto;
    background-image: url("../img/mall/mall-btn03-light.png");
    background-size: 100% 80%;
    background-position: -3rem 6rem;
    background-repeat: no-repeat;
    position: relative;
    z-index: 1;

}
.golifu_Box .modal-body .modalCont .container .mbrCardBox img{
    width: 100%;
    height: auto;
    position: relative;
    z-index: 1;

}
.golifu_Box .modal-body .modalCont .container .mallTitle{
    width: 100%;
    height: 6.5rem;
    margin: -1rem 0 2.5rem 0;
    background-image: url("../img/mall/mall-btn04-line.png");
    background-size: 100%;
    background-position:center;
    background-repeat: no-repeat;
    position: relative;
    z-index: 1;
}
.golifu_Box .modal-body .modalCont .container .mallTitle img{
    width: auto;
    height:100%;
    position: relative;
    z-index: 1;

}
/*--- 快速儲值 ---*/
.golifu_Box .modal-body .modalCont .container .pointCard{
    margin: 0 0 2rem 0;
    position: relative;
    z-index: 1;
}
.golifu_Box .modal-body .modalCont .container .pointCard .col-4{
    width: 100%;
    margin-bottom: 2rem;
    position: relative;
    z-index: 1;
}
.golifu_Box .modal-body .modalCont .container .pointCard .col-4.cashBGA{
    background-image: url("../img/mall/mall-mdse-bg03.png") ;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    position: relative;
    z-index: 1;
}

.golifu_Box .modal-body .modalCont .container .pointCard .col-4 .pointFirm{
    width: 100%;
    margin-top: 0.8rem;
    border-bottom: 0.3rem solid #dadada;
    position: relative;
    z-index: 1;
}
.golifu_Box .modal-body .modalCont .container .pointCard .col-4 .pointFirm img{
    width: 100%;
    height: auto;
    position: relative;
    z-index: 1;
}
.golifu_Box .modal-body .modalCont .container .pointCard .col-4 .cashA{
    width: 100%;
    height: 4.5rem;
    font-size: 2rem;
    margin-bottom:-0.8rem;
    text-align: center;
    position: relative;
    z-index: 1;
}
.golifu_Box .modal-body .modalCont .container .pointCard .col-4 .cashA img{
    width:auto;
    height:70%;
    margin-top: -1.2rem;
    position: relative;
    z-index: 1;
}

.golifu_Box .modal-body .modalCont .container .pointCard .col-4 .cashA strong{
    line-height: 5rem;
    font-size: 2.5rem;
    display: inline-block;
    text-align: center;
    position: relative;
    z-index: 1;
    color: #000000;
}
.golifu_Box .modal-body .modalCont .container .pointCard .col-4 .buyBtn{
    width: 100%;
    height: 7rem;
    line-height: 7rem ;
    font-size: 2.8rem;
    font-weight: bolder;
    margin-bottom: 1rem;
    color: #FFF;
    text-align: center;
    text-shadow: -1px 0px 3px #9e4a00, 0px 1px 3px #9e4a00, 1px 0px 3px #9e4a00, 0px -1px 3px #9e4a00;

    background-image: url("../img/mall/mall-mdse-btn.png") ;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    position: relative;
    z-index: 1;
}
.golifu_Box .modal-body .modalCont .container .pointCard .col-4 .cdtCard{
    width: auto;
    height: 5rem;
    position: absolute;
    top: -2.5rem;
    right: -0.5rem;
    z-index: 9;
}
.golifu_Box .modal-body .modalCont .container .pointCard .col-4 .cdtCard img{
    width:auto;
    height:100%;

    position: relative;
    z-index: 9;
}
/*--- 一般儲值 ---*/
.golifu_Box .modal-body .modalCont .container .pointCard .col-4.cashBGB{
    background-image: url("../img/mall/mall-mdse-bg02.png") ;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    position: relative;
    z-index: 1;
}
.golifu_Box .modal-body .modalCont .container .pointCard .col-4.cashBGB img{
    width: 100%;
    height: auto;
    margin-top: 1rem;
    position: relative;
    z-index: 1;
}
.golifu_Box .modal-body .modalCont .container .pointCard .col-3.cashBGC{
    background-image: url("../img/mall/mall-mdse-bg03.png") ;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    position: relative;
    z-index: 1;
}
.golifu_Box .modal-body .modalCont .container .pointCard .col-3.cashBGC img{
    width: 100%;
    height: auto;
    /* margin-top: 1.8rem; */
    position: relative;
    z-index: 1;
    padding-top: 15%;
    padding-bottom: 5%;
}
.golifu_Box .modal-body .modalCont .extraDisplay{
    width:98%;
    height:18.5rem;
    margin: 0 1%;
    padding: 2rem;
    border-top-left-radius: 2rem;
    border-top-right-radius: 2rem;
    position: absolute;
    bottom: -40rem;
    left: 0;
    z-index: 9;
    background-color: #FFF;
    box-shadow: inset 0px 7px 54px -15px #2B2B2B;
    -webkit-box-shadow: inset 0px 7px 54px -15px #2B2B2B;
    -moz-box-shadow: inset 0px 7px 54px -15px #2B2B2B;
    -o-box-shadow: inset 0px 7px 54px -15px #2B2B2B;
}

.golifu_Box .modal-body .modalCont .extraDisplay .col-2 img{
    width:auto;
    height:9rem;
    position: relative;
    z-index: 1;
}
.golifu_Box .modal-body .modalCont .extraDisplay .col-9 strong{
    width:100%;
    line-height: 5rem;
    font-size: 2.3rem;
    display: inline-block;
    position: relative;
    z-index: 1;
}
.golifu_Box .modal-body .modalCont .extraDisplay .col-9 h2{
    width:100%;
    font-size: 3rem;
    line-height: 2rem;
    font-weight: bolder;
    color: #FF6E00;
    display: inline-block;
    position: relative;
    z-index: 1;
}
.golifu_Box .modal-body .modalCont .extraDisplay .col-6 h1{
    float: left;
    font-size: 3rem;
    line-height:10rem;
    font-weight: bolder;
    letter-spacing: 0.2rem;
    margin-right: 1rem;
    color: #FF6E00;
    position: relative;
    z-index: 1;
}
.golifu_Box .modal-body .modalCont .extraDisplay .col-6 span{
    float: left;
    font-size: 2rem;
    line-height:10rem;
    font-weight: bolder;
    /*color: #FF6E00;*/
    position: relative;
    z-index: 1;
}
.golifu_Box .modal-body .modalCont .extraDisplay .col-4 button{
    float: right;
    margin-top: 1rem;
    background: unset;
    border: unset;
    outline:none;
    position: relative;
    z-index: 1;
}

.golifu_Box .modal-body .modalCont .extraDisplay .col-4 button img{
    width: auto;
    height: 8rem;
    position: relative;
    z-index: 1;
}
/*--- 禮物 ---*/
.golifu_Box .modal-body .modalCont .container .giftBox{
    width: 96%;
    height: auto;
    margin: 0 2%;
    overflow: hidden;
    position: relative;
    z-index: 1;
}
.golifu_Box .modal-body .modalCont .container .giftBox .myPoint{
    width: 100%;
    height: auto;
    margin-bottom: 1.5rem;
    overflow: hidden;
    position: relative;
    z-index: 1;
}
.golifu_Box .modal-body .modalCont .container .giftBox .myPoint .goldImg{
    float: left;
    width: 15%;
    height: auto;
    position: relative;
    z-index: 1;
}
.golifu_Box .modal-body .modalCont .container .giftBox .myPoint .goldImg img{
    width: 100%;
    height: auto;
    position: relative;
    z-index: 1;
}

.golifu_Box .modal-body .modalCont .container .giftBox .myPoint .pointOver{
    float: left;
    width: 50%;
    height: auto;
    padding: 0 0 0 1rem;
    position: relative;
    z-index: 1;
}
.golifu_Box .modal-body .modalCont .container .giftBox .myPoint .pointOver strong{
    font-size: 2.2rem;
    line-height: 2rem;
    display: inline-block;
    margin:1rem 0 0 0;
    position: relative;
    z-index: 1;
}
.golifu_Box .modal-body .modalCont .container .giftBox .myPoint .pointOver p{
    font-size: 2.8rem;
    line-height: 3rem;
    font-weight: bolder;
    color: #ff7200;
    display: inline-block;
    padding:0;
    position: relative;
    z-index: 1;
}
.golifu_Box .modal-body .modalCont .container .giftBox .myPoint .explainBox{
    float: left;
    width: 35%;
    height: 5rem;
    line-height: 5rem ;
    margin: 1rem 0;
    position: relative;
    z-index: 1;
}
.golifu_Box .modal-body .modalCont .container .giftBox .myPoint .explainBox img{
    width:auto;
    height: 100%;
    position: relative;
    z-index: 1;
}
.golifu_Box .modal-body .modalCont .container .giftBox .detailsBox{
    width: 100%;
    height: auto;
    margin:0;
    padding: 2.5rem;
    border-radius: 3rem;
    box-shadow: inset 0px 0px 25px 0px #1A1A1A;
    -webkit-box-shadow: inset 0px 0px 25px 0px #1A1A1A;
    -moz-box-shadow: inset 0px 0px 25px 0px #1A1A1A;
    -o-box-shadow: inset 0px 0px 25px 0px #1A1A1A;
    position: relative;
    z-index: 1;
}
.golifu_Box .modal-body .modalCont .container .giftBox .detailsBox .list-group-item{
    font-size: 2.2rem;
    line-height: 6rem;
    font-weight: bolder;
    border-bottom: 0.2rem solid #6d767f;

    display: flex;

    position: relative;
    z-index: 1;
}
.golifu_Box .modal-body .modalCont .container .giftBox .detailsBox .list-group-item .itemBox{
    flex:1;
    position: relative;
    z-index: 1;
}
.golifu_Box .modal-body .modalCont .container .giftBox .detailsBox .list-group-item .itemBox span{
    float: left;
    width: auto;
    display: inline-block;
    position: relative;
    z-index: 1;
}
.golifu_Box .modal-body .modalCont .container .giftBox .detailsBox .list-group-item .itemBox a{
    float: left;
    width: auto;
    display: inline-block;
    position: relative;
    z-index: 1;
}
.golifu_Box .modal-body .modalCont .container .giftBox .detailsBox .list-group-item .itemDigit{
    flex:1;
    font-size: 2.5rem;
    padding: 0 2rem 0 0;
    text-align: right;
    position: relative;
    z-index: 1;
}
.golifu_Box .modal-body .modalCont .container .giftBox .detailsBox .list-group-item .itemBox img{
    width: auto;
    height: 5rem;
    margin: 0.5rem 0 0.5rem 1rem;
    position: relative;
    z-index: 1;
}

.golifu_Box .modal-body .modalCont .container .giftBox .detailsBox .list-group-item .itemBox img{
    width: auto;
    height: 5rem;
    margin: 0.5rem 0 0.5rem 1rem;
    position: relative;
    z-index: 1;
}
.golifu_Box .modal-body .modalCont .container .giftBox .inputBoxG{
    width: 100%;
    height: auto;
    margin:0;
    padding: 1rem 1rem 0rem 1rem;
    border-radius: 3rem;
    position: relative;
    z-index: 1;
}
.golifu_Box .modal-body .modalCont .container .giftBox .inputBoxG h3 {
    width: 100%;
    line-height: 5rem;
    display: inline-block;
    font-size: 2.2rem;
    font-weight: bold;
    padding: 0 1rem;
    position: relative;
    z-index: 9;
}

.golifu_Box .modal-body .modalCont .container .giftBox .inputBoxG .inputBoxA {
    width: 100%;
    height: 7rem;
    font-size: 2.5rem;
    margin: 0;
    padding: 0 25px;
    border: 0.2rem solid #cfc7b2;
    color: hsl(9, 40%, 60%);
    text-align: left;

    outline-style: none;
    border-radius: 30px;

    position: relative;
    z-index: 9;
    background-color: #FFF !important;
}

/*輸入框用ICON*/
.golifu_Box .modal-body .modalCont .container .giftBox .inputBoxG .inputBoxA::placeholder {
    font-family: 'icomoon' !important;
    font-weight: normal;
    overflow: visible;
    vertical-align: top;
    display: inline-block !important;
    padding-left: 5px;
    padding-top: 2px;
    color: #878787;
}

.golifu_Box .modal-body .modalCont .container .giftBox .inputBoxG .inputBoxB {
    width: 100%;
    height: 7rem;
    font-size: 3rem;
    margin: 0;
    padding: 0 25px;
    border: 0.2rem solid #cfc7b2;
    color: hsl(9, 40%, 60%);
    text-align: left;

    outline-style: none;
    border-radius: 30px;

    position: relative;
    z-index: 9;
    background-color: #FFF !important;
}

.golifu_Box .modal-body .modalCont .container .giftBox .btnBoxA{
    width: 100%;
    height: auto;
    margin:0;
    padding: 1rem 2.5rem 0rem 2.5rem;
    text-align: center;
    border-radius: 3rem;
    position: relative;
    z-index: 1;
}
.golifu_Box .modal-body .modalCont .container .giftBox .btnBoxA h4 {
    width: 100%;
    line-height: 5rem;
    display: inline-block;
    font-size: 2rem;
    text-align: center;
    font-weight: bold;
    padding: 0 1rem;
    margin: 0 0 0.3rem 0;
    position: relative;
    z-index: 9;
}
.golifu_Box .modal-body .modalCont .container .giftBox .btnBoxA button {
    width: 85%;
    line-height: 10rem;
    display: inline-block;
    font-size: 2.5rem;
    letter-spacing: 1rem;
    text-align: center;
    font-weight: bold;
    text-shadow: -1px 0px 3px #3c3c3c, 0px 1px 3px #3c3c3c, 1px 0px 3px #3c3c3c, 0px -1px 3px #3c3c3c;
    color: #FFF;
    padding: 0 1rem;
    border: none;
    outline:none;
    background-image: url("../img/gift/gift-btn03.png");
    background-size: cover;
    background-repeat: no-repeat;
    background-color: unset;
    position: relative;
    z-index: 9;
}
/*--- 贈禮中心 ---*/
.golifu_Box .modal-body .modalCont .container .giftMenu {
    width: 90%;
    margin: 0 5%;
    padding: 0 1.5rem;
    font-size: 2rem;
    font-weight: bolder;
    letter-spacing: 0.3rem;
    border-radius: 10rem;
    box-shadow: inset 0px 0px 25px 0px #1A1A1A;
    -webkit-box-shadow: inset 0px 0px 25px 0px #1A1A1A;
    -moz-box-shadow: inset 0px 0px 25px 0px #1A1A1A;
    -o-box-shadow: inset 0px 0px 25px 0px #1A1A1A;

    position: relative;
    z-index:1;
}
.golifu_Box .modal-body .modalCont .container .giftMenu .nav-tabs {
    display: flex;
    border-bottom:none;
}
.golifu_Box .modal-body .modalCont .container .giftMenu .nav-tabs .nav-item{
    line-height: 6rem;
    text-align: center;
    flex:1;
    position: relative;
    z-index:1;
}
.golifu_Box .modal-body .modalCont .container .giftMenu .nav-tabs .nav-link {
    border:none;
    border-top-left-radius:unset;
    border-top-right-radius:unset;
}
.golifu_Box .modal-body .modalCont .container .giftMenu .nav>li>a{
    color: #000 !important;
}
.golifu_Box .modal-body .modalCont .container .giftMenu .nav>li>a:hover {
    color: #000 !important;
    background-color:unset;
}
.golifu_Box .modal-body .modalCont .container .giftMenu .nav-tabs .nav-item.show .nav-link,
.golifu_Box .modal-body .modalCont .container .giftMenu .nav-tabs .nav-link.active,
.golifu_Box .modal-body .modalCont .container .giftMenu .nav>li>a.active{
    color: #fff !important;
    text-shadow: -1px 0px 3px #3c3c3c, 0px 1px 3px #3c3c3c, 1px 0px 3px #3c3c3c, 0px -1px 3px #3c3c3c;
    background-image: url("../img/gift/gift-tb01.png");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 40% 50%;

    background-color:unset;
    border-color:unset;
}
.golifu_Box .modal-body .modalCont .container .gcItemBox{
    width: 100%;
    display: flex;
    margin-top: 1rem;
    background-color: #fed77a;
}
.golifu_Box .modal-body .modalCont .container .gcItemBox .gcItem{
    flex: 1;
    width: 100%;
    font-size: 2rem;
    font-weight: bolder;
    text-align: center;
    color: #5f5f5f;
    padding:0.8rem 0;
    border-right:0.2rem solid #ffffff;
}
.golifu_Box .modal-body .modalCont .container .gcItemBox .gcItem:last-child{
    border-right: none;
}
.golifu_Box .modal-body .modalCont .container .gcNoData{
    width: 100%;
    height: 50vh;
    background-image: url("../img/no-file.png");
    background-size: 40% auto;
    background-repeat: no-repeat;
    background-position: center 50%;
    position: relative;
    z-index:1;
}
/*--- 公會 ---*/
.golifu_Box .modal-body .modalCont .container .gbFind {
    width: 100%;
    margin: 0;
    padding: 1rem;
    overflow: hidden;
    position:relative;
    z-index: 8;
}
.golifu_Box .modal-body .modalCont .container .gbFind .inputGb {
    float: left;
    width: 60%;
    padding: 0.5rem 0;

    display: flex;
    align-items: center;
    justify-content: center;

    position: relative;
    z-index: 9;
}
.golifu_Box .modal-body .modalCont .container .gbFind .inputGb .inputBoxGb {
    width: 100%;
    height: 7rem;
    font-size: 2rem;
    margin: 0;
    padding: 0 25px;
    border: 0.2rem solid #cfc7b2;
    color:rgba(31, 11, 0, 1);
    text-align: left;

    outline-style: none;
    border-radius: 30px;

    position: relative;
    z-index: 9;
    background-color: #FFF !important;
}
.golifu_Box .modal-body .modalCont .container .gbFind .inputGb .inputBoxGb::placeholder {
    color: rgba(31, 11, 0, 0.916);
}

.golifu_Box .modal-body .modalCont .container .gbFind .gBtn {
    float: left;
    width: 40%;

    display: flex;
    align-items: center;
    justify-content: center;

    position: relative;
    z-index: 9;
}
.golifu_Box .modal-body .modalCont .container .gbFind .gBtn a{
    display: inline-block;
    width:100%;
    height: 100%;
    font-size: 2rem;
    font-weight: bolder;
    color: #fff;
    text-shadow: -1px 0px 3px #753b00,
    0px 1px 3px #753b00,
    1px 0px 3px #753b00,
    0px -1px 3px #753b00;
    line-height:1;
    position: relative;
    z-index: 8;
}
.golifu_Box .modal-body .modalCont .container .gbFind .gBtn img{
    width: 100%;
    position: relative;
    z-index: 8;
}
.golifu_Box .modal-body .modalCont .container .gbFind .gBtn strong{
    display: inline-block;
    width:100%;
    height: 100%;
    line-height:3.5;
    text-align: center;
    position: absolute;
    z-index: 9;
}
.golifu_Box .modal-body .modalCont .container .list-group-item .gbBox {
    width: 100%;
    height: 12.5rem;
    margin: 0;
    padding: 1rem;
    position:absolute;
    top: 0;
    left: 0;
    z-index: 8;
}

.golifu_Box .modal-body .modalCont .container .list-group-item .badgeA {
    float: left;
    width: 35%;
    height: 100%;
    margin:0;
    padding:0;

    display: flex;
    align-items: center;
    justify-content: center;

    position:relative;
    z-index: 1;
}
.golifu_Box .modal-body .modalCont .container .list-group-item .badgeA img{
    width: 8.5rem;
    height: 8.5rem;
    filter: drop-shadow(0px 0px 10px #696969);
    margin: 0;
    padding: 0;
    position: relative;
    z-index: 1;
    margin-bottom: 5%;
}
.golifu_Box .modal-body .modalCont .container .list-group-item .gbData {
    float: left;
    width: 63%;
    height: 100%;
    margin: 0 0 0 2%;
    padding: 0;
    position: relative;
    z-index: 1;
    position: absolute;
    top: 59%;
    left: 67%;
    transform: translate(-50%, -50%);
}
.golifu_Box .modal-body .modalCont .container .list-group-item .gbData .gbName{
    width: 90%;
    line-height: 1;
    font-size: 2rem;
    color: #452201;
    font-weight: bolder;
    margin: 0;
    padding: 1% 0 1% 0.6rem;
    position: relative;
    z-index: 1;
}
.golifu_Box .modal-body .modalCont .container .list-group-item .gbData .gbGrade{
    width: 90%;
    line-height: 3.2rem;
    font-size: 2rem;
    color: #452201;
    font-weight: bolder;
    margin: 0;
    padding: 0 0 0 0.6rem;
    position: relative;
    z-index: 1;
}
.golifu_Box .modal-body .modalCont .container .list-group-item .gbData .gbGold{
    width: 90%;
    line-height: 3.9rem;
    font-size: 35px;
    color: #452201;
    font-weight: bolder;
    margin: 0 0 0 4rem;
    padding: 0;
    position: relative;
    z-index: 1;
}
.golifu_Box .modal-body .modalCont .container .list-group-item .gbData .gbGold img{
    display: block;
    width: 13%;
    line-height: 1;
    filter: drop-shadow(0px 0px 10px #696969);
    margin: 0;
    padding: 0;
    position: absolute;
    top: 0;
    left: -4rem;
    z-index: 1;
}
.golifu_Box .modal-body .modalCont .container .list-group-item .guildBg {
    width: 100%;
    height: auto;
    position:relative;
    z-index: 1;
}
.golifu_Box .modal-body .modalCont .container .guildTitle{
    width: 100%;
    height: 6.5rem;
    margin: -1rem 0 0 0;

    display: flex;
    align-items: center;
    justify-content: center;

    background-image: url("../img/mall/mall-btn04-line.png");
    background-size: 100%;
    background-position:center;
    background-repeat: no-repeat;
    position: relative;
    z-index: 1;
}
.golifu_Box .modal-body .modalCont .container .guildTitle strong{
    display: inline-block;
    width:100%;
    height: 100%;
    line-height:3;
    color: #FFF;
    text-align: center;
    position: absolute;
    z-index: 9;
}

.golifu_Box .modal-body .modalCont .container .guildTitle img {
    width: auto;
    height: 80%;
    position: relative;
    z-index: 1;
}
.golifu_Box .modal-body .modalCont .container .guildText{
    width: 100%;
    font-size: 2rem;
    margin:0;
    padding: 2rem;
    position: relative;
    z-index: 1;
}
.golifu_Box .modal-body .modalCont .container .guildText p{
    width: 100%;
}
.my-gbName{
    width: 90%;
    line-height: 1;
    font-size: 2.2rem;
    color: #452201;
    font-weight: bolder;
    margin: 0;
    padding: 1% 0 1% 0.6rem;
    position: relative;
    z-index: 1;
}
.gbName.my{
    color: #f72b2b !important;
    line-height: normal !important;
}
.gbGold.my{
    margin-left: 0px !important;
    line-height: normal !important;
}
.badgeA.my{
    font-weight: bolder !important;
}
/*--- 活動與公告 ----*/
.golifu_Box .modal-body .modalCont .container .activity{
    width: 100%;
    height: 27rem;

    margin-bottom: 2rem;

    border-radius: 2rem;
    overflow: hidden;
    position: relative;
    z-index: 1;

}
.golifu_Box .modal-body .modalCont .container .activity a{
    width: 100%;
    height: 100%;

    display: flex;
    align-items: center;
    justify-content: center;

    position: relative;
    z-index: 1;

}
.golifu_Box .modal-body .modalCont .container .activity a .maskEvent{
    width:100%;
    height: 100%;

    background:
            linear-gradient(to bottom,
            rgba(0,0,0,0.8) 0%,
            rgba(255, 255, 255, 0.2) 25%,
            rgba(255, 255, 255, 0.2) 60%,
            rgba(0,0,0,0.9) 100%
            );

    position: absolute;
    z-index: 8;
}
.golifu_Box .modal-body .modalCont .container .activity a .maskEvent .textBox{
    width:100%;
    padding: 0 1.5rem;
    position: absolute;
    bottom: 1rem;
    left: 0;
    z-index: 9;
}
.golifu_Box .modal-body .modalCont .container .activity a .maskEvent .textBox h2{
    width:100%;
    line-height:3rem;
    font-size: 2.5rem;
    color: #FFF;
}
.golifu_Box .modal-body .modalCont .container .activity a .maskEvent .textBox strong{
    width:100%;
    line-height:3.5rem;
    font-size: 2rem;
    color: #e0a538;
}
.golifu_Box .modal-body .modalCont .container .activity a img{
    width:auto;
    height: 100%;
}

/*--- 公告新聞 ---*/
.golifu_Box .modal-body .modalCont .newsBox{
    width: 100%;
    height:75vh;
    position: relative;
    z-index: 1;

}
.golifu_Box .modal-body .modalCont .container .newsBox .col-5{
    width: 100%;
    height:100%;
    border-right: 0.2rem solid #ece8de;
    padding-right: 0;
    padding-bottom: 6rem;

    overflow-y: auto;

    position: relative;
    z-index: 1;
}
.golifu_Box .modal-body .modalCont .container .newsBox .col-7{
    width: 100%;
    height: 100%;
    overflow-y: auto;

    position: relative;
    z-index: 1;
}
.golifu_Box .modal-body .modalCont .newsBox .col-5 .nav-tabs .nav-item{
    width: 100%;
    color: #452201;
    margin-bottom: 0.5rem;
    position: relative;
    z-index: 1;

}
.golifu_Box .modal-body .modalCont .newsBox .col-5 .nav-tabs .nav-item a{
    width: 100%;
    height: 100%;
    display: inline-block;
    color: #452201;
    padding: 1.5rem;
    position: relative;
    z-index: 1;
}
.golifu_Box .modal-body .modalCont .newsBox .col-5 .nav-tabs .nav-item .nav-link.active{
    width: 100%;
    height: 100%;
    padding: 0.5rem;
    position: relative;
    z-index: 1;
}
.golifu_Box .modal-body .modalCont .newsBox .col-5 .nav-tabs .nav-item .nav-link.active span{
    width: 100%;
    height: 100%;
    display: inline-block;
    color: #452201;
    border-radius: 2rem;
    padding: 1.5rem;

    background-color: #ddd7d2;

    box-shadow: inset 0px 0px 25px 0px #424242;
    -webkit-box-shadow: inset 0px 0px 25px 0px #424242;
    -moz-box-shadow: inset 0px 0px 25px 0px #424242;
    -o-box-shadow: inset 0px 0px 25px 0px #424242;

    position: relative;
    z-index: 1;
}

.golifu_Box .modal-body .modalCont .newsBox .col-5 .nav-tabs .nav-item.show .nav-link,
.golifu_Box .modal-body .modalCont .newsBox .col-5 .nav-tabs .nav-link.active {
    color: #495057;
    background-color:unset;
    border-right: 0.2rem solid #ceb6a0 !important;
    border:unset;
}
.golifu_Box .modal-body .modalCont .newsBox .col-5 .nav>li>a:focus,
.golifu_Box .modal-body .modalCont .newsBox .col-5 .nav>li>a:hover {
    color: #495057 !important;
    background-color: unset;
}
.golifu_Box .modal-body .modalCont .newsBox .col-5 .nav-tabs {
    border-bottom:unset;
}
.golifu_Box .modal-body .modalCont .newsBox .col-7 .newsCont{
    height: unset;
    min-height: 70vh;
    padding-bottom:  10rem;
    /*margin-bottom: 10rem;*/
    position: absolute;
    z-index: 9;
}
.golifu_Box .modal-body .modalCont .newsBox .col-7 .newsCont h2{
    font-size: 2.8rem;
    font-weight: bolder;
    color: #7f3f02;
}
.golifu_Box .modal-body .modalCont .newsBox .col-7 .newsCont h3{
    font-size: 2.8rem;
    font-weight: bolder;
    color: #452201;
}
.golifu_Box .modal-body .modalCont .newsBox .col-7 .newsCont h4{
    font-size: 2.3rem;
    font-weight: bolder;
    color:#fb8d23;
}

.golifu_Box .modal-body .modalCont .newsBox .col-7 .newsCont h5{
    font-size: 2.3rem;
    font-weight: bolder;
    color: #ff0000;
}

.golifu_Box .modal-body .modalCont #newsA.container {
    overflow-y: unset !important;
    /*overflow: hidden;*/
}
@media (min-width: 768px){
    .golifu_Box .modal-body .modalCont #newsA.container {
        overflow-y: unset !important;
    }
}

/*--- 任務 ---*/

.golifu_Box .modal-body .modalCont .taskBox{
    width: 100%;
    position: relative;
    z-index: 1;

}
.golifu_Box .modal-body .modalCont .taskBox .col-6 .imgBtn{
    width: auto;
    height: 6rem;
    filter: drop-shadow(0px 10px 10px #696969);

    position: relative;
    z-index: 1;
}

.golifu_Box .modal-body .modalCont .taskBox .taskTitle {
    width: 100%;
    height: 4.5rem;
    margin: 2.5rem 0 0rem 0;
    background-image: url(../img/mall/mall-btn04-line.png);
    background-size: 100%;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    z-index: 1;
}
.golifu_Box .modal-body .modalCont .taskBox .taskTitle img {
    width: auto;
    height: 100%;
    position: relative;
    z-index: 1;
}
.golifu_Box .modal-body .modalCont .taskBox h4 {
    width: 100%;
    line-height:4rem;
    display: inline-block;
    font-size: 1.8rem;
    text-align: center;
    margin: 0.2rem 0 2rem 0;
    position: relative;
    z-index: 1;
}
.golifu_Box .modal-body .modalCont .taskBox .taskTheme{
    width: 98%;
    height: 23rem;
    margin: 0 1% 2rem 1%;
    padding: 2rem;
    box-shadow:
            0px 10px 12px rgba(0,0,0,0.2),
            inset 6px 7px 18px rgba(255,255,255,0.1),
            inset 0px 0px 10px rgba(255,255,255,0.5),
            inset 0px -10px 10px 5px rgba(183, 183, 183, 0.25)
;
    background-color: #FFF;
    border-radius:2rem;
    /*border:1px solid #566963;*/
    display:inline-block;
    position: relative;
}
.golifu_Box .modal-body .modalCont .taskBox .taskTheme.Hot{
    border: 0.2rem solid #ff4d00;
}
.golifu_Box .modal-body .modalCont .taskBox .taskTheme .limited{
    width: 7rem;
    height: auto;
    border-top-left-radius: 2rem;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 9;
}
.golifu_Box .modal-body .modalCont .taskBox .taskTheme .limited img{
    width:100%;
    height:100%;
    border-top-left-radius: 2rem;
    position: relative;
}
.golifu_Box .modal-body .modalCont .taskBox .taskTheme.ready{
    pointer-events: none;
    cursor: default;
    filter: grayscale(80%);
    opacity: 0.8;
}
.golifu_Box .modal-body .modalCont .taskBox .taskTheme .col-5{
    height: 19rem;
    /*background-color: #6d767f;*/
    position: relative;
    z-index: 1;
}
.golifu_Box .modal-body .modalCont .taskBox .taskTheme .col-5 img{
    width:auto;
    height: 19rem;
    display: inline-block;
    position: absolute;
    bottom: 0.2rem;
    left: -2rem;
    z-index: 1;
}
.golifu_Box .modal-body .modalCont .taskBox .taskTheme .col-5 .taskPoints{
    width:100%;
    height: 5rem;
    text-align: center;
    display: inline-block;
    position: absolute;
    bottom: 2rem;
    left: -0.2rem;
    z-index: 9;
}
.golifu_Box .modal-body .modalCont .taskBox .taskTheme .col-5 .taskPoints img{
    width:auto;
    height: 5rem;
    margin-right: 0.3rem;
    position: relative;
    bottom:1.2rem;
    left: unset;
}
.golifu_Box .modal-body .modalCont .taskBox .taskTheme .col-5 .taskPoints strong{
    text-shadow:
            0px 5px 3px rgba(141, 141, 141, 0.4),
            4px 5px 3px rgba(141, 141, 141, 0.4),
            -4px 6px 3px rgba(141, 141, 141, 0.4);
    font-size: 3rem;
    color: #FFF;
    margin-left: 0.2rem;
    padding-bottom: 0rem;
    display: inline-block;
    line-height: 3rem;
    position: relative;
    bottom: 0.5rem;
}
.golifu_Box .modal-body .modalCont .taskBox .taskTheme .col-7 .taskContA{
    width:100%;
    height: 12rem;
    line-height: 3.5rem;
    font-size: 2rem;
    position: relative;
}
.golifu_Box .modal-body .modalCont .taskBox .taskTheme .col-7 span{
    color: #ff9000;
}
.golifu_Box .modal-body .modalCont .taskBox .taskTheme .col-7 .taskContB{
    width:100%;
    height: 7rem;
    position: relative;
}
.golifu_Box .modal-body .modalCont .taskBox .taskTheme .col-7 .taskContB .col-4 img{
    width:auto;
    height: 7rem;
    left:0.8rem;
    position: relative;
}

.golifu_Box .modal-body .modalCont .taskBox .taskTheme .col-7 .taskContB .col-8 img{
    width:auto;
    height: 7rem;
    left: -1rem;
    position: relative;
}
/*--- 道具 ---*/
.golifu_Box .modal-body .modalCont .propsBox{
    width: 100%;
    position: relative;
    z-index: 1;

}
.golifu_Box .modal-body .modalCont .propsBox #propsA .col-4{
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}
.golifu_Box .modal-body .modalCont .propsBox #propsA .row{
    width: 98%;
    margin:0 auto 13rem auto;
}
.golifu_Box .modal-body .modalCont .propsBox #propsA .col-4 .propsBox{
    width: 15rem;
    height: 15rem;
    display: block;
    margin: 0.5rem;
    border-radius: 5rem;
    box-shadow: inset 0px 0px 20px 3px rgba(141, 141, 141, 0.2);
    background-image: url("../img/no-props.png");
    background-color: #e9e5e2;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;
}
.golifu_Box .modal-body .modalCont .propsBox #propsA .col-4 .propsBox img{
    width:100%;
    height:auto;
    display: block;
    position: relative;
    z-index: 1;
}

.golifu_Box .modal-body .modalCont .propsBox #propsB .inputProps {
    width: 100%;
    padding: 0.5rem 0;

    display: flex;
    align-items: center;
    justify-content: center;

    position: relative;
    z-index: 9;
}
.golifu_Box .modal-body .modalCont .propsBox #propsB .inputProps .inputBoxProps {
    width: 80%;
    height: 7rem;
    font-size: 2rem;
    margin: 0 auto;
    padding: 0 25px;
    border: 0.2rem solid #cfc7b2;
    color: rgba(31, 11, 0, 1);
    text-align: left;

    outline-style: none;
    border-radius: 30px;

    position: relative;
    z-index: 9;
    background-color: #FFF !important;
}
.golifu_Box .modal-body .modalCont .propsBox #propsB .inputProps .inputBoxProps::placeholder {
    color: rgba(31, 11, 0, 0.3);
}

.golifu_Box .modal-body .modalCont .propsBox #propsB .noProps {
    width: 100%;
    min-height: 50vh;
    background-image: url("../img/no-file.png");
    background-repeat: no-repeat;
    background-size: 40% auto;
    background-position: center;
    position: relative;
    z-index: 9;
}
.golifu_Box .modal-body .modalCont .propsBox #propsB .col-4{
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}
.golifu_Box .modal-body .modalCont .propsBox #propsB .row{
    width: 98%;
    margin:0 auto 13rem auto;
}
.golifu_Box .modal-body .modalCont .propsBox #propsB .col-4 .propsBox{
    width: 15rem;
    height: 15rem;
    display: block;
    margin: 0.5rem;
    border-radius: 5rem;
    box-shadow: inset 0px 0px 20px 3px rgba(141, 141, 141, 0.2);
    background-image: url("../img/no-props.png");
    background-color: #e9e5e2;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;
}
.golifu_Box .modal-body .modalCont .propsBox #propsB .col-4 .propsBox img{
    width:100%;
    height:auto;
    display: block;
    position: relative;
    z-index: 1;
}

/*--- VIP ---*/
.golifu_Box .modal-body .modalCont .vipBox{
    width: 100%;
    position: relative;
    z-index: 1;

}
.golifu_Box .modal-body .modalCont .vipBox h2{
    width: 100%;
    line-height: 5rem;
    display: inline-block;
    font-size: 2.3rem;
    font-weight: bolder;
    text-align: center;
    color: #452201;
    position: relative;
    z-index: 1;

}
.golifu_Box .modal-body .modalCont .vipBox span{
    font-size: 3rem;
    font-weight: bolder;
    color: #ffa600;
    position: relative;
    z-index: 1;

}
.golifu_Box .modal-body .modalCont .vipBox .vipBtnBox{
    width: 100%;
    height: 15rem;
    padding: 2rem 13rem;
    margin-bottom: 2rem;
    display:block;
    background-image: url("../img/vipBtn.png");
    background-repeat: no-repeat;
    background-size:100%;
    background-position: center;
    position: relative;
    z-index: 1;
}
.golifu_Box .modal-body .modalCont .vipBox .vipBtnBox h3{
    width: 100%;
    line-height: 5rem;
    display: inline-block;
    font-size: 2rem;
    font-weight: bolder;
    text-align: center;
    color: #452201;
    position: relative;
    z-index: 1;
}
.golifu_Box .modal-body .modalCont .vipBox .vipBtnBox .vipBtnA{
    width: 100%;
    height: 4rem;
    font-size: 1.8rem;
    color: #FFF;
    font-weight: bolder;
    text-shadow: 2px 0px 2px rgba(103, 103, 103, 0.8);
    background-image: url(../img/btn-03.png);
    background-color: unset;
    background-repeat: no-repeat;
    background-size: auto 100%;
    background-position: center;
    filter: drop-shadow(0px 5px 10px #696969);
    margin-bottom: 2rem;
    border: none;
    /*right: 2rem;*/
    position: relative;
    z-index: 1;
}
.golifu_Box .modal-body .modalCont .vipBox .vipBtnBox .vipBtnB{
    width: 100%;
    height: 4rem;
    font-size: 1.8rem;
    color: #FFF;
    font-weight: bolder;
    text-shadow: 2px 0px 2px rgba(103, 103, 103, 0.8);
    background-image: url(../img/btn-04.png);
    background-color: unset;
    background-repeat: no-repeat;
    background-size: auto 100%;
    background-position: center;
    filter: drop-shadow(0px 5px 10px #696969);
    margin-bottom: 2rem;
    border: none;
    /*right: 2rem;*/
    position: relative;
    z-index: 1;
}
.golifu_Box .modal-body .modalCont .vipBox .vipText {
    width: 100%;
    margin: 0;
    /*padding: 2rem;*/
    position: relative;
    z-index: 1;
}
.golifu_Box .modal-body .modalCont .vipBox .vipText .table {
    width: 100%;
    font-size: 1.8rem !important;
    border-collapse: unset;
    position: relative;
}
.golifu_Box .modal-body .modalCont .vipBox .table-bordered{
    /*background-color: #ff9000;*/
    border: none;
}
.golifu_Box .modal-body .modalCont .vipBox .vipText .table th{
    width: 20%;
    text-align: center;
    white-space: pre-wrap;
    word-break: break-all;
    vertical-align:middle;
    background-color: #452201;
    color: #FFF;
    border: none;
}
.golifu_Box .modal-body .modalCont .vipBox .vipText .table td{
    width: 20%;
    font-size: 2rem;
    white-space: pre-wrap;
    word-break: break-all;
    text-align: center;
    vertical-align:middle;
    border: none;
}
.golifu_Box .modal-body .modalCont .vipBox .vipText .table td strong{
    width: 100%;
    display: inline-block;
    text-align: center;
    font-size: 1.8rem;
    font-weight: bold;
}
.golifu_Box .modal-body .modalCont .vipBox .vipText .table th img,
.golifu_Box .modal-body .modalCont .vipBox .vipText .table td img{
    width: 100%;
    height: auto;
}
.golifu_Box .modal-body .modalCont .vipBox .vipText .table td:nth-child(2){
    background-color: #F9EBC4;
}

/*--- myBox ---*/
.golifu_Box .modal-body .modalCont .myBoxCont{
    width: 100%;
    position: relative;
    z-index: 1;
}
.golifu_Box .modal-body .modalCont .myBoxCont .myAvatar{
    width: 100%;
    position: relative;
    z-index: 1;
}
.golifu_Box .modal-body .modalCont .myBoxCont .myAvatar .col-4 img{
    width: 100%;
    height: auto;
    filter: drop-shadow(0px 5px 10px rgba(103, 103, 103, 0.5));
    position: relative;
    z-index: 1;
}
.golifu_Box .modal-body .modalCont .myBoxCont .myAvatar .col-6{
    padding: 0 5px;
}
.golifu_Box .modal-body .modalCont .myBoxCont .myAvatar .col-6 strong{
    width: 100%;
    height: auto;
    line-height: 4rem;
    font-size: 2rem;
    color: #ff6200;
    display: inline-block;
    position: relative;
    z-index: 1;
}
.golifu_Box .modal-body .modalCont .myBoxCont .myAvatar .col-6 span{
    line-height: 4rem;
    font-size: 2.5rem;
    margin-right: 0.5rem;
    color: #ff6200;
    position: relative;
    top: 0.2rem;
    z-index: 1;
}
.golifu_Box .modal-body .modalCont .myBoxCont .myAvatar .col-6 h2{
    width: 100%;
    height: auto;
    font-size: 3.8rem;
    font-weight: bold;
    color: #000000;
    display: inline-block;
    position: relative;
    z-index: 1;
}
.golifu_Box .modal-body .modalCont .myBoxCont .myAvatar .myBtn {
    width: 100%;
    height: 5rem;
    line-height: 5rem;
    font-size: 1.8rem;
    color: #000;
    /*font-weight: bolder;*/
    vertical-align: text-top;
    /*text-shadow: 2px 0px 2px rgba(103, 103, 103, 0.5);*/
    background-image: url(../img/btn-01.png);
    background-color: unset;
    background-repeat: no-repeat;
    background-size: auto 100%;
    background-position: center;
    filter: drop-shadow(0px 5px 10px rgba(103, 103, 103, 0.5));
    margin-bottom: 2rem;
    border: none;
    /* right: 2rem; */
    position: relative;
    z-index: 1;
}
.golifu_Box .modal-body .modalCont .myBoxCont .myAvatar .myShare {
    width: 100%;
    height: 5rem;
    line-height: 5rem;
    font-size: 1.8rem;
    color: #000;
    /*font-weight: bolder;*/
    vertical-align: text-top;
    /*text-shadow: 2px 0px 2px rgba(103, 103, 103, 0.5);*/
    filter: drop-shadow(0px 5px 10px rgba(103, 103, 103, 0.5));
    margin-bottom: 2rem;
    border: none;
    border-radius: 50%;
    background: unset;
    /* right: 2rem; */
    position: relative;
    z-index: 1;
}
.golifu_Box .modal-body .modalCont .myBoxCont .myAvatar .myShare img{
    width: 100%;
    height: auto;
    position: relative;
    z-index: 1;
}
/*-- signBox --*/
.golifu_Box .modal-body .modalCont .myBoxCont .signBox{
    width: 100%;
    height: auto;
    position: relative;
    z-index: 1;
}
.golifu_Box .modal-body .modalCont .myBoxCont .signBox .signText{
    width: 100%;
    height: 8rem;
    border-radius:2rem;
    padding: 1.3rem;
    margin-bottom: 2rem;
    color:rgba(70, 35, 0, 0.8);
    letter-spacing: 0.2rem;
    background-color: #D6CFC8;
    box-shadow: inset 0px 7px 54px -15px rgba(103, 103, 103, 0.5);
    -webkit-box-shadow: inset 0px 7px 54px -15px rgba(103, 103, 103, 0.5);
    -moz-box-shadow: inset 0px 7px 54px -15px rgba(103, 103, 103, 0.5);
    -o-box-shadow: inset 0px 7px 54px -15px rgba(103, 103, 103, 0.5);
    position: relative;
    z-index: 1;
}
.golifu_Box .modal-body .modalCont .myBoxCont .signBox .signText .penBox{
    width: 5rem;
    height: 5rem;
    filter: drop-shadow(0px 5px 10px rgba(103, 103, 103, 0.5));
    position: absolute;
    right: 1rem;
    bottom: 1rem;
    z-index:5;
}
/*-- evevtBox --*/
.golifu_Box .modal-body .modalCont .myBoxCont .evevtBox{
    width: 100%;
    margin-bottom: 2rem;
    border-radius:2rem;
    padding:0;
    overflow: hidden;
    box-shadow: inset 0px 7px 54px -15px rgba(103, 103, 103, 0.5);
    -webkit-box-shadow: inset 0px 7px 54px -15px rgba(103, 103, 103, 0.5);
    -moz-box-shadow: inset 0px 7px 54px -15px rgba(103, 103, 103, 0.5);
    -o-box-shadow: inset 0px 7px 54px -15px rgba(103, 103, 103, 0.5);
    position: relative;
    z-index: 1;
}
.golifu_Box .modal-body .modalCont .myBoxCont .evevtBox a{
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    position: relative;
    z-index: 1;
}

.golifu_Box .modal-body .modalCont .myBoxCont .evevtBox img{
    width: 100%;
    height: auto;
    position: relative;
    z-index: 1;
}
.golifu_Box .modal-body .modalCont .myBoxCont .evevtBox .comingSoon{
    width: 100%;
    height: auto;
    top: 0;
    left: 0;
    position: absolute;
    z-index: 5;
}
/*-- cardBox --*/
.golifu_Box .modal-body .modalCont .myBoxCont .cardBox{
    width: 100%;
    height: auto;
    margin-bottom: 2rem;
    border-radius:2rem;
    padding:0;

    position: relative;
    z-index: 1;
}
.golifu_Box .modal-body .modalCont .myBoxCont .cardBox a{
    color: #000000;
}
.golifu_Box .modal-body .modalCont .myBoxCont .cardBox .cardImg{
    width: auto;
    height:15rem;
    position: relative;
    left: -1rem;
    z-index: 5;
}
.golifu_Box .modal-body .modalCont .myBoxCont .cardBox .cardBtn {
    width: 100%;
    margin: 3.5rem 0;
    background: unset;
    border: none;
    /* right: 2rem; */
    top: 0;
    left: 0;
    position: absolute;
    z-index: 1;
}
.golifu_Box .modal-body .modalCont .myBoxCont .cardBox .cardBtn img{
    width: 100%;
    height: auto;
    position: relative;
    left: 0;
    z-index: 1;
}
.golifu_Box .modal-body .modalCont .myBoxCont .cardBox .buyInfo {
    width: 100%;
    font-size: 2rem;
    font-weight: bold;
    margin: 5.5rem 0;
    padding-left: 19rem;
    background: unset;
    border: none;
    /* right: 2rem; */
    top: 0;
    left: 0;
    position: absolute;
    z-index: 6;
}

.golifu_Box .modal-body .modalCont .myBoxCont .cardBox .buyInfo strong{
    font-size: 2.5rem;
    font-weight: bold;
    color: #ff0000;
}
/*-- cardBox --*/
.golifu_Box .modal-body .modalCont .myBoxCont .vipCont{
    width: 96%;
    height:auto;
    margin: 0 2% 4.5rem 2%;
    /*border: 1rem solid #FFFFFF;*/
    border-radius:2rem;
    padding:1rem;
    background-color: #FFFFFF;
    box-shadow: 5px 8px 16px 11px rgba(103, 103, 103, 0.5);
    /*background-image: linear-gradient(to top, rgba(240, 200, 150, 1)35%, rgba(241, 230, 200, 1)70%);*/

    position: relative;
    z-index: 1;
}
.golifu_Box .modal-body .modalCont .myBoxCont .vipCont .vipContBox{
    width: 100%;
    height:auto;
    margin:0;
    border-radius:2rem;
    padding:1rem;
    /*box-shadow: 5px 8px 16px 11px rgba(103, 103, 103, 0.5);*/
    background-image: linear-gradient(to top, rgba(240, 200, 150, 1)25%, rgba(241, 230, 200, 1)80%);

    position: relative;
    z-index: 1;
}

.golifu_Box .modal-body .modalCont .myBoxCont .vipCont .vipContBox .badgeBox{
    width: 100%;
    height: 14.5rem;
    margin: 0;
    padding: 0;
    text-align: center;
    position: relative;
    z-index: 1;
}
.golifu_Box .modal-body .modalCont .myBoxCont .vipCont .vipContBox .badgeBox img{
    width: 100%;
    margin: 0;
    padding: 0;
    top: -5rem;
    position: relative;
    z-index: 1;
}
.golifu_Box .modal-body .modalCont .myBoxCont .vipCont .vipContBox .badgeBox .levelBox{
    width: 100%;
    font-size: 2.3rem;
    font-weight: bold;
    margin: 0;
    padding: 0;
    text-align: center;
    bottom: 0;
    position: absolute;
    z-index: 2;
}
.golifu_Box .modal-body .modalCont .myBoxCont .vipCont .vipContBox .badgeBox .levelBox strong{
    font-size: 5rem;
    color: #FFFFFF;
    text-shadow: 0px 5px 5px rgba(58, 58, 58, 1);
    margin: 0 0.6rem;
    padding: 0;
    text-align: center;
    bottom: 0;
    position: relative;
    z-index: 2;
}

.golifu_Box .modal-body .modalCont .myBoxCont .vipCont .vipContBox .vipExplain {
    width: 100%;
    height: 6rem;
    line-height: 5rem;
    font-size: 2rem;
    font-weight: bold;
    color: #000;
    /*font-weight: bolder;*/
    vertical-align: text-top;
    /*text-shadow: 2px 0px 2px rgba(103, 103, 103, 0.5);*/
    background-image: url(../img/btn-02.png);
    background-color: unset;
    background-repeat: no-repeat;
    background-size: auto 100%;
    background-position: center;
    filter: drop-shadow(0px 5px 10px rgba(103, 103, 103, 0.5));
    margin: 1rem 0;
    border: none;
    /* right: 2rem; */
    position: relative;
    z-index: 1;
}
/*-- evevtBox --*/
/*.golifu_Box .modal-body .modalCont .myBoxCont .levelCont{
    display: flex;
    flex-direction: column;
}
.golifu_Box .modal-body .modalCont .myBoxCont .levelCont .list-Level{
    flex: auto;
    border-bottom: 1px solid #252525;
}*/
.golifu_Box .modal-body .modalCont .myBoxCont .list-Level{
    width: 100%;
    height: 7rem;
    line-height: 7rem;
    font-size: 2rem;
    font-weight: bold;
    display: flex;
    border-bottom: 1px solid #252525;
    position: relative;
    z-index: 1;
}
.golifu_Box .modal-body .modalCont .myBoxCont .list-Level .levelDetail {
    flex: 1;
    height: 100%;
    position: relative;
    z-index: 1;
}

/*-- cardBox --*/
.golifu_Box .modal-body .modalCont .myBoxCont .offerBox{
    width: 100%;
    height:auto;
    margin:0;
    position: relative;
    z-index: 1;
}
.golifu_Box .modal-body .modalCont .myBoxCont .offerBox .col-6 .giveImg{
    width: auto;
    height: 6.5rem;
    bottom: -4rem;
    left: 3rem;
    position: absolute;
    z-index: 6;

}
/*-- Passbook --*/
.golifu_Box .modal-body .modalCont .container .tabMenuB {
    width: 60%;
    height: auto;
    margin: 0 20%;
    padding: 0 1rem;
    font-size: 2rem;
    font-weight: bolder;
    letter-spacing: 0.3rem;
    border-radius: 10rem;
    box-shadow: inset 0px 0px 25px 0px #1A1A1A;
    -webkit-box-shadow: inset 0px 0px 25px 0px #1A1A1A;
    -moz-box-shadow: inset 0px 0px 25px 0px #1A1A1A;
    -o-box-shadow: inset 0px 0px 25px 0px #1A1A1A;

    position: relative;
    z-index:1;
}
.golifu_Box .modal-body .modalCont .container .tabMenuB .nav-tabs {
    display: flex;
    border-bottom:none;
}
.golifu_Box .modal-body .modalCont .container .tabMenuB .nav-tabs .nav-item{
    line-height: 6rem;
    text-align: center;
    flex:1;
    position: relative;
    z-index:1;
}
.golifu_Box .modal-body .modalCont .container .tabMenuB .nav-tabs .nav-link {
    border:none;
    border-top-left-radius:unset;
    border-top-right-radius:unset;
}
.golifu_Box .modal-body .modalCont .container .tabMenuB .nav>li>a{
    color: #000 !important;
}
.golifu_Box .modal-body .modalCont .container .tabMenuB .nav>li>a:hover {
    color: #000 !important;
    background-color:unset;
}
.golifu_Box .modal-body .modalCont .container .tabMenuB .nav-tabs .nav-item.show .nav-link,
.golifu_Box .modal-body .modalCont .container .tabMenuB .nav-tabs .nav-link.active,
.golifu_Box .modal-body .modalCont .container .tabMenuB .nav>li>a.active{
    color: #fff !important;
    text-shadow: -1px 0px 3px #3c3c3c, 0px 1px 3px #3c3c3c, 1px 0px 3px #3c3c3c, 0px -1px 3px #3c3c3c;
    background-image: url("../img/gift/gift-tb01.png");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 40% 50%;

    background-color:unset;
    border-color:unset;
}
/*--- 存摺myBox2用內框 ---*/
@media (min-width: 768px){
    .golifu_Box .modal-body .modalCont #myBox2.container {
        max-width: 83%;
        height: 75vh;
        padding: 35px 0 25rem 0;
        overflow-y: auto;
    }
}
.golifu_Box .modal-body .modalCont #myBox2.container.tabCont {
    width: 83% !important;
    height: auto;
    margin:0 auto;
    font-size: 2rem;
    position: relative;
    z-index: 9;
}
/*--- 存摺myBox2用內框END ---*/

/*--- 存摺 ---*/
.golifu_Box .modal-body .modalCont .myBoxCont .safeBox{
    width: 100%;
    height: 12rem;
    padding: 1rem 4rem;
    filter: drop-shadow(0px 5px 10px rgba(103, 103, 103, 0.5));
    background: url("../img/safeBg.png");
    background-repeat: no-repeat;
    background-size: auto 100%;
    background-position: center;
    position: relative;
    z-index: 9;
}

.golifu_Box .modal-body .modalCont .myBoxCont .safeBox .safeImg{
    width:  100%;
    margin: 2rem 0;
    height: auto;
    left: 1rem;
    position: relative;
    z-index: 9;
}
.golifu_Box .modal-body .modalCont .myBoxCont .safeBox .col-8 strong{
    width: 100%;
    height: 3rem ;
    line-height: 3rem ;
    margin-top: 1rem;
    display: inline-block;
    font-size: 2rem;
    font-weight: bold;
    color: #F4B63F;
    position: relative;
    z-index: 9;
}
.golifu_Box .modal-body .modalCont .myBoxCont .safeBox .col-8 h3{
    width: 100%;
    height: 3.5rem ;
    line-height: 4rem ;
    display: inline-block;
    font-size: 4rem;
    font-weight: bold;
    color: #1f0b00;
    position: relative;
    z-index: 9;
}
.golifu_Box .modal-body .modalCont .myBoxCont .safeBox .col-2 button{
    background: unset;
    border: unset;
    position: relative;
    z-index: 9;
}
.golifu_Box .modal-body .modalCont .myBoxCont .tabItem{
    width: 100%;
    height: 5rem;
    line-height: 4.5rem;
    font-size:1.9rem;
    color: #FFFFFF;
    padding:0 1rem;
    border-bottom: 0.8rem solid #6d767f;
    background-color: #2b2c31;
    position: relative;
    z-index: 9;
}
.golifu_Box .modal-body .modalCont .myBoxCont .tabItemCont{
    width: 100%;
    height: 70rem;
    line-height: 3rem;
    font-size:1.9rem;
    color: #1f0b00;
    padding:0 1rem;
    overflow-y: auto;
    position: relative;
    z-index: 9;
}
.golifu_Box .modal-body .modalCont .myBoxCont .tabItemCont table{
    width: 100%;
    position: relative;
    z-index: 9;
}
.golifu_Box .modal-body .modalCont .myBoxCont .tabItemCont table tr{
    width: 100%;
    padding: 1.3rem 0;
    position: relative;
    z-index: 9;
}
.golifu_Box .modal-body .modalCont .myBoxCont .tabItemCont .row:last-child{
    margin-bottom: 8rem;
}
/*--- 信箱 ---*/
.golifu_Box .modal-body .modalCont .myBoxCont .tmbCont{
    width:100% !important;
    max-width: unset !important;
    height: 75vh;
    margin: 0 !important;
    padding: 2rem 0 0 0  ;
    overflow-y: unset !important;
}

.golifu_Box .modal-body .modalCont .myBoxCont .tmbCont .noProps,
.golifu_Box .modal-body .modalCont .myBoxCont #myBox4 .noProps{
    width: 100%;
    min-height: 50vh;
    background-image: url("../img/no-file.png");
    background-repeat: no-repeat;
    background-size: 40% auto;
    background-position: center;
    position: relative;
    z-index: 9;
}

.golifu_Box .modal-body .modalCont .myBoxCont #myBox4 .inputProps {
    width: 100%;
    padding: 0.5rem 0;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 9;
}
.golifu_Box .modal-body .modalCont .myBoxCont #myBox4 .inputProps .inputBoxProps {
    width: 80%;
    height: 7rem;
    font-size: 2rem;
    margin: 0 auto;
    padding: 0 25px;
    border: 0.2rem solid #cfc7b2;
    color: #1f0b00;
    text-align: left;
    outline-style: none;
    border-radius: 30px;
    position: relative;
    z-index: 9;
    background-color: #FFF !important;
}
.golifu_Box .modal-body .modalCont .myBoxCont #myBox4 .inputProps .inputBoxProps::placeholder {
    color: rgba(31, 11, 0, 0.3);
}
.golifu_Box .modal-body .modalCont .myBoxCont .tmbCont .mailCont{
    width:100%;
    height: 65vh;
    margin: 0;
    padding:0;
    overflow-y:auto;
}
.golifu_Box .modal-body .modalCont .container .list-group-item .mailImg {
    float: left;
    width: auto;
    height: 7rem;
    margin:0 1.5rem;
    bottom: 0.2rem;
    position: relative;
    z-index: 8;
}
.golifu_Box .modal-body .modalCont .container .list-group-item .mailBtnCancel {
    width: 100%;
    height:8rem;
    font-size: 4rem;
    border: unset !important;
    outline: unset !important;
    box-shadow: unset !important;
    background: unset !important ;
    bottom: -0.1rem;
    position: relative;
    z-index: 9;
}
.golifu_Box .modal-body .modalCont .container .mailCont .list-group-item:last-child {
    margin-bottom: 12rem;
}
.golifu_Box .modal-body .modalCont .container .mailCont .editBtn{
    width:7rem;
    height:7rem;
    border: unset !important;
    outline: unset !important;
    box-shadow: unset !important;
    background: unset !important ;
    top: 75rem;
    right: 0rem;
    position: absolute;
    z-index: 10;
}
.golifu_Box .modal-body .modalCont .container .mailCont .editBtn img{
    width:100%;
    height:100%;
}


/*.golifu_Box .modal-body .modalCont .container .list-group-item button {
    width: 100%;
    height: 100%;
    font-size: 4rem;
    border: unset !important;
    outline: unset !important;
    box-shadow: unset !important;
    background: unset !important ;
    position: relative;
    z-index: 9;
}*/


/*
.golifu_Box .modal-body .modalCont .container .list-group-item .icon-cancel:before{
    display: block;
    width: 3rem;
    height: 3rem;
    color: #FF0000;
    margin: 0;
    bottom: 0;
    font-family: "icomoon" !important;
    position: relative;
    z-index: 9;
}
*/



/*--- 設定 ---*/
.golifu_Box .modal-body .modalCont .myBoxCont .setHeader {
    width: 100%;
}
.golifu_Box .modal-body .modalCont.setListBox {
    width: 100%;
}
.golifu_Box .modal-body .modalCont .container .setBtnBox {
    width: 100%;
}
.golifu_Box .modal-body .modalCont .container .setBtnBox .col-6 a{
    display: inline-block;
    width: 100%;
    height: 12rem;
    font-size: 1.8rem;
    text-align: center;
    color: #1f0b00;
    padding: 1rem 4rem;
    background-image: url("../img/settings/set-btn.png");
    background-size: 95% 100%;
    background-position: center;
    background-repeat: no-repeat;
    filter: drop-shadow(0px 5px 10px #696969);
    position: relative;
    z-index: 1;
}
.golifu_Box .modal-body .modalCont .container .setBtnBox .col-6 a strong{
    display: inline-block;
    width: 100%;
    position: relative;
    z-index: 1;
}
.golifu_Box .modal-body .modalCont .container .setBtnBox .col-6 a img{
    display: inline-block;
    width: auto;
    height: 7rem;
    position: relative;
    z-index: 1;
}
/*--- setList  ---*/
.golifu_Box .modal-body .modalCont .container .setList {
    width: 100%;
    margin-top: 3rem;
    font-size: 2rem;
}
.golifu_Box .modal-body .modalCont .container .setList .card {
    position: relative;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    background-color: unset;
    background-clip: border-box;
    border:unset;
    border-radius: 0.25rem;
}
.golifu_Box .modal-body .modalCont .container .setList .card-header:first-child {
    border-radius: calc(0.25rem - 1px) calc(0.25rem - 1px) 0 0;
}
.golifu_Box .modal-body .modalCont .container .setList .card-header {
    width: 100%;
    height: 56px;
    padding: 2rem 1.25rem;
    margin-bottom: 0;
    color: #1f0b00;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: row;
    background-color:unset;
    border-bottom: 0.2rem solid rgba(0,0,0,.125);
    position: relative;
    z-index: 1;
}
.golifu_Box .modal-body .modalCont .container .setList .card-header a{
    width: 100%;
    display: inline-block;
    color: #1f0b00;
    position: relative;
    z-index: 1;
}
.golifu_Box .modal-body .modalCont .container .setList .card-header  {
    width: 100%;
    height: 8rem;
    border-bottom: 0.2rem solid rgba(205, 194, 162, 0.48);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: row;
}
.golifu_Box .modal-body .modalCont .container .setList .card-body {
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    padding: 1.25rem;
    margin: 0 0.5rem;
    background-color: rgba(231, 231, 231, 0.4);
    border-bottom: 0.2rem solid rgba(205, 194, 162, 0.48);
}
.golifu_Box .modal-body .modalCont .container .setList .itemName {
    font-size: 2rem;
    font-weight: 800;
    font-stretch: 90%;
    color: #452201;
    text-shadow: 1px 1px 0 #fff8e4;
    text-align: left;
}
.golifu_Box .modal-body .modalCont .container .setList .itemTab {
    width: 100%;
    height: 8rem;
    border-bottom: 0.2rem solid rgba(205, 194, 162, 0.48);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: row;
}
.golifu_Box .modal-body .modalCont .container .setList .itemTab:last-child {
    border-bottom:unset !important;
}

/*設定按鈕*/
.golifu_Box .modal-body .modalCont .container .setList .switch-box {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
}
.golifu_Box .modal-body .modalCont .container .setList .switch-box input[type=checkbox]:checked {
    background-color: #F4B63F;
    box-shadow: inset 0 0 0 15px #F4B63F;
    transition: 250ms all;
}
.golifu_Box .modal-body .modalCont .container .setList .switch-box input[type=checkbox] {
    width: 8rem;
    height: 4.5rem;
    -webkit-appearance: none;
    -moz-appearance: none;
    transition: 100ms all;
    margin: 0 auto 0 auto;
    display: block;
    border-radius: 50px;
    background-color: rgba(205, 194, 162, 0.48);
    outline: 0;
    position: relative;
    -webkit-user-select: none;
    user-select: none;
}
.golifu_Box .modal-body .modalCont .container .setList .switch-box input[type=checkbox]::before {
    width: 4rem;
    height: 4rem;

    content: "";
    transition: 100ms all;
    position: absolute;
    left: 2px;
    top: 2px;
    bottom: 2px;
    right: auto;
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
    display: block;
    border-radius: 50%;
    background-color: #fafafa;
    box-shadow: 0 8px 16px 0 rgba(127, 63, 2, 0.32);
    -webkit-animation: button 3s ease-out;
    animation: button 3s ease-out;
}
.golifu_Box .modal-body .modalCont .container .setList .switch-box input[type=checkbox]:checked::before {
    -webkit-transform: translate(3.8rem, 0);
    transform: translate(3.8rem, 0);
}

/*設定下拉箭頭反應*/
.golifu_Box .modal-body .modalCont .container .setList .card-header.collapsed .icon-chevron-right {
    display: block;
    width: 3rem;
    height: 3rem;
    font-size: 3rem;
    color: #F4B63F;
}
.golifu_Box .modal-body .modalCont .container .setList .card-header.open .icon-chevron-right:before {
    display: block;
    width: 3rem;
    height: 3rem;
    font-size: 3rem;
    color: #F4B63F;
    content: "\e92a";
    font-family: "icomoon" !important;
}
.golifu_Box .modal-body .modalCont .container .setList .card-header .icon-chevron-right:before {
    display: block;
    width: 3rem;
    height: 3rem;
    font-size: 3rem;
    color: #F4B63F;
    content: "\e90f";
    font-family: "icomoon" !important;
}
.icon-chevron-right:before {
    display: block;
    width: 3rem;
    height: 3rem;
    font-size: 3rem;
    color: #F4B63F;
    content: "\e90f";
    font-family: "icomoon" !important;
}
.icon-chevron-rightB:before {
    display: block;
    width: 3rem;
    height: 3rem;
    font-size: 3rem;
    color: #F4B63F;
    content: "\e90f";
    font-family: "icomoon" !important;
}

/*--- 條款 ---*/
.golifu_Box .modal-body .modalCont .container .termsBox {
    width: 100%;
}
.golifu_Box .modal-body .modalCont .container .termsBox h2{
    font-size: 2.5rem;
    font-weight: bold;
}
.golifu_Box .modal-body .modalCont .container .termsBox h3{
    font-size: 2.2rem;
    font-weight: bold;
}
.golifu_Box .modal-body .modalCont .container .termsBox p{
    font-size: 2rem;
}

/*--- 標題樣式 ---*/
.golifu_Box .modal-body .modalCont .container .contTitle {
    width: 100%;
    height: 6.5rem;
    margin: -1rem 0 0 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background-image: url(../img/mall/mall-btn04-line.png);
    background-size: 100%;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    z-index: 1;
}
.golifu_Box .modal-body .modalCont .container .contTitle strong {
    display: inline-block;
    width: 100%;
    height: 100%;
    line-height: 3;
    color: #FFF;
    text-align: center;
    position: absolute;
    z-index: 9;
}
.golifu_Box .modal-body .modalCont .container .contTitle img {
    width: auto;
    height: 80%;
    position: relative;
    z-index: 1;
}
.golifu_Box .modal-body .modalCont .container .contText {
    width: 100%;
    font-size: 2rem;
    margin: 0;
    padding: 2rem;
    position: relative;
    z-index: 1;
}
.golifu_Box .modal-body .modalCont .container .contText p {
    width: 100%;
}
/*--- 底部及關閉 ---*/
.golifu_Box .modal-dialog .modal-content .modal-footer {
    width: 100%;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: end;
    justify-content: center;
    padding: 0;
    border: none;
    position: absolute;
    bottom: 0;
    z-index: 9;
}
.golifu_Box .modal-dialog .modal-content .modal-footer img{
    width: 100%;
    height: auto;
}
.golifu_Box .modal-dialog .modal-content .modal-footer>:not(:first-child) {
    margin-left:0;
}
.golifu_Box .modal-dialog .modal-content .modal-footer .closeBtn{
    width: 120px;
    height: 120px;
    border-radius: 50%;
    position: absolute;
    margin: 0 auto;
    border: none;
    background: none;
    box-shadow: none;
    z-index: 10;
}
.modal-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1040;
    width: 100vw;
    height: 102vh;
    background: url("../img/modalBg.png") no-repeat;
    background-size: cover;
    /*background-color: rgba(255, 255 , 255, 0) !important ;*/
}
.modal-backdrop.show {
    opacity: 1;
}
/*--- 底部及關閉 END---*/

/*--- 第二跳窗 ---*/
.golifu_Box .modal-body.MBody2nd, .modal-dialog-game .modal-body.MBody2nd{
    display: flex;
    align-items: center;
    justify-content: center;
    background: url(../img/modalBg.png) no-repeat;
    background-size: cover;
}

.golifu_Box .modal-body.MBody2nd .mbContBox, .modal-dialog-game .modal-body.MBody2nd .mbContBox{
    width: 85%;
    min-height: 25rem;
    padding: 5rem 1rem 2rem 1rem;
    border: 1rem solid #d71337;
    border-radius: 3rem;
    background-color: #fef7e4;
    box-shadow: 0px 10px 25px 4px #242424;
    -webkit-box-shadow: 0px 10px 25px 4px rgba( 133, 133, 133, 0.8);
    -moz-box-shadow: 0px 10px 25px 4px rgba( 133, 133, 133, 0.8);
    -o-box-shadow: 0px 10px 25px 4px rgba( 133, 133, 133, 0.8);
    position: relative;
    top: -20%;
    z-index: 1;
}

.golifu_Box .modal-body.MBody2nd .mbContBox .mbTitle, .modal-dialog-game .modal-body.MBody2nd .mbContBox .mbTitle{
    width: 96%;
    min-height: 180px;
    line-height: 103px;
    font-size: 2.8rem;
    font-weight: bolder;
    color: #FFF;
    text-align: center;
    text-shadow: 2px 0px 2px rgba(103, 103, 103, 0.8);
    background-image: url(../img/mbTitle.png);
    background-size: auto 100%;
    background-repeat: no-repeat;
    background-position: center;
    position: absolute;
    top: -6rem;
    z-index: 1;
}
.golifu_Box .modal-body.MBody2nd .mbContBox .mbTitle img, .modal-dialog-game .modal-body.MBody2nd .mbContBox .mbTitle img{
    width: 100%;
    height:auto;
    position: relative;
    z-index: 1;
}
.golifu_Box .modal-body.MBody2nd .mbContBox .mbCont, .modal-dialog-game .modal-body.MBody2nd .mbContBox .mbCont{
    width: 100%;
    min-height:7rem;
    font-size: 2.3rem;
    text-align: center;
    margin: 1rem 0;
    position: relative;
    z-index: 1;
}
.golifu_Box .modal-body.MBody2nd .mbContBox .mbCont .textbox, .modal-dialog-game .modal-body.MBody2nd .mbContBox .mbCont .textbox{
    width: 90%;
    height:15rem;
    font-size: 2.3rem;
    border-radius: 2rem;
    padding: 1.5rem;
    margin: 1rem 5%;
    background-color: #FFF8E4;
    position: relative;
    z-index: 1;
}
.golifu_Box .modal-body.MBody2nd .mbContBox .mbCont .textboxB, .modal-dialog-game .modal-body.MBody2nd .mbContBox .mbCont .textboxB{
    width: 90%;
    height:6rem;
    line-height:3rem;
    font-size: 2.3rem;
    border: 0.2rem solid rgb(143, 143, 143);
    border-radius: 2rem;
    padding: 1.5rem;
    margin: 1rem 5%;
    background-color: #FFF8E4;
    position: relative;
    z-index: 1;
}
.golifu_Box .modal-body.MBody2nd .mbContBox .mbCont .mailContent, .modal-dialog-game .modal-body.MBody2nd .mbContBox .mbCont .mailContent{
    width: 90%;
    height:15rem;
    font-size: 2rem;
    border-radius: 2rem;
    padding: 1.5rem;
    margin: 1rem 5%;
    background-color: #FFF8E4;
    position: relative;
    z-index: 1;
}
.golifu_Box .modal-body.MBody2nd .mbContBox .mbCont .mailTitle, .modal-dialog-game .modal-body.MBody2nd .mbContBox .mbCont .mailTitle{
    width: 90%;
    height: 6rem;
    line-height: 3rem;
    font-size: 2rem;
    border: 0.2rem solid rgb(143, 143, 143);
    border-radius: 2rem;
    padding: 1.5rem;
    margin: 1rem 5%;
    background-color: #FFF8E4;
    position: relative;
    z-index: 1;
}

.golifu_Box .modal-body.MBody2nd .mbContBox button .goldImg, .modal-dialog-game .modal-body.MBody2nd .mbContBox button .goldImg{
    height: 4rem;
    margin-right: 1rem;
    top: -0.5rem;
    position: relative;
}
.golifu_Box .modal-body.MBody2nd .mbContBox button .strong, .modal-dialog-game .modal-body.MBody2nd .mbContBox button .strong{
    font-size: 3.3rem;
}
.golifu_Box .modal-body.MBody2nd .mbContBox h4, .modal-dialog-game .modal-body.MBody2nd .mbContBox h4{
    width: 88%;
    line-height: 2rem;
    margin: 0 6% 1.5rem 6%;
    font-size: 1.9rem;
}
.golifu_Box .modal-body.MBody2nd .mbContBox h3, .modal-dialog-game .modal-body.MBody2nd .mbContBox h3{
    width: 88%;
    line-height: 2.5rem;
    margin: 0 6% 1.5rem 6%;
    font-size: 1.9rem;
}
.golifu_Box .modal-body.MBody2nd .mbContBox h2, .modal-dialog-game .modal-body.MBody2nd .mbContBox h2{
    font-size: 2rem;
    font-weight: bold;
}
.golifu_Box .modal-body.MBody2nd .mbContBox .mbBtn, .modal-dialog-game .modal-body.MBody2nd .mbContBox .mbBtn{
    width: 100%;
    height: 8rem;
    font-size: 2.5rem;
    color: #FFF;
    font-weight: bolder;
    text-shadow: 2px 0px 2px rgba(103, 103, 103, 0.8);
    background-image: url(../img/guildBtn.png);
    background-color: unset;
    background-repeat: no-repeat;
    background-size: auto 100%;
    background-position: center;
    margin-bottom: 2rem;
    border: none;
    position: relative;
    z-index: 1;
}
.golifu_Box .modal-body .confirmBtn, .modal-dialog-game .modal-body .confirmBtn{
    width: 100%;
    height: 100px;
    font-size: 2.3rem;
    color: #FFF;
    font-weight: bolder;
    text-shadow: 2px 0px 2px rgba(103, 103, 103, 0.8);
    background-image: url(../img/btn-03.png);
    background-color: unset;
    background-repeat: no-repeat;
    background-size: auto 100%;
    background-position: center;
    filter: drop-shadow(0px 5px 10px #696969);
    margin-bottom: 2rem;
    border: none;
    right: 2.5rem;
    position: static;
    z-index: 1;
}
.golifu_Box .modal-body .confirmBtn.send, .modal-dialog-game .modal-body .confirmBtn.send{
    font-size:2rem !important;
    color: #0b0b0a;
    background-size: 86% 100% !important;
    text-shadow: 2px 0px 2px rgba(255, 255, 255, 0.8);
    left: -1rem;
}
.golifu_Box .modal-body .confirmBtnB, .modal-dialog-game .modal-body .confirmBtnB{
    width: 100%;
    height: 100px;
    font-size: 2.3rem;
    color: #FFF;
    font-weight: bolder;
    text-shadow: 2px 0px 2px rgba(103, 103, 103, 0.8);
    background-image: url(../img/btn-04.png);
    background-color: unset;
    background-repeat: no-repeat;
    background-size: auto 100%;
    background-position: center;
    filter: drop-shadow(0px 5px 10px #696969);
    margin-bottom: 2rem;
    border: none;
    /*right: 2rem;*/
    position: static;
    z-index: 1;
}

.golifu_Box .modal-body .cancelBtn, .modal-dialog-game .modal-body .cancelBtn{
    width: 100%;
    height: 100px;
    font-size: 2.3rem;
    color: #414141;
    font-weight: bolder;
    text-shadow: 2px 0px 2px rgba(103, 103, 103, 0.8);
    background-image: url(../img/btn-02.png);
    background-color: unset;
    background-repeat: no-repeat;
    background-size: auto 100%;
    background-position: center;
    filter: drop-shadow(0px 5px 10px #696969);
    margin-bottom: 2rem;
    border: none;
    left: 2rem;
    position: static;
    z-index: 1;
}
.golifu_Box .modal-body .cancelBtn.mailBtn,
.golifu_Box .modal-body .confirmBtn.mailBtn,
.modal-dialog-game .modal-body .cancelBtn.mailBtn,
.modal-dialog-game .modal-body .confirmBtn.mailBtn{
    height: 5.5rem;
    font-size: 2rem;
    left: 0;
    right: 0;
}
/*--- 第二跳窗 END---*/


/*--- 消除按鈕執行後的邊框與陰影 ---*/
.golifu_Box .modal-content button:focus, .golifu_Box .modal-body button:active {
    border: unset !important;
    outline: unset !important;
    box-shadow: unset !important;
    /*filter:unset;*/
}
.golifu_Box .modal-content button:focus-visible {
    border: unset !important;
    outline: unset !important;
    box-shadow: unset !important;
    /*filter:unset;*/
}



/*--- 消除滾動條 ---*/
::-webkit-scrollbar {
    display: none;
}

/*--- 數字A ---*/
.digitalA {
    width: 100%;
    height: auto;
    text-align: center;
    letter-spacing: -3px;
    position: relative;
    top: 0;
    z-index: 9;

}

/*--- 收藏按鈕小 ---*/
.checkbox-group {
    width: 30%;
    display: inline-block;
    margin-bottom: 1rem;
    position: absolute;
    z-index: 9;
}

.checkbox-input {
    visibility: hidden; /* 把原本的input藏起來 */
}

.checkbox-label {
    font-size: 1.6em;
    cursor: pointer;
    position: relative;
    padding-left: 3rem;
}

.checkbox-button {
    /* 自定義樣式的span */
    height: 2em;
    width: 2em;
    background-image: url("../img/heart-off.png");
    background-repeat: no-repeat;
    background-size: cover;


    /*border: 5px solid green;*/
    /*border-radius: 50%;*/
    display: inline-block;
    position: absolute;
    left: -4px;
    top: -10px;
}

.checkbox-button::after { /* 中間點點 */
    content: "";
    display: block;
    height: 1.6em;
    width: 1.6em;
    /*border-radius: 50%;*/
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-image: url("../img/heart-on.png");
    background-repeat: no-repeat;
    background-size: cover;


    /*background-color: green;*/
    opacity: 0;
    transition: opacity 0.2s;
}

.checkbox-input:checked ~ .checkbox-label .checkbox-button::after {
    /* 選中checkbox時 才顯示中間點點 */
    opacity: 1;
}

/*--- 收藏按鈕大 ---*/
.checkboxB-group {
    width: 30%;
    display: inline-block;
    margin-bottom: 1rem;
    position: absolute;
    z-index: 9;
}

.checkboxB-input {
    visibility: hidden; /* 把原本的input藏起來 */
}

.checkboxB-label {
    font-size: 2.3em;
    cursor: pointer;
    position: relative;
    padding-left: 3rem;
}

.checkboxB-button {
    /* 自定義樣式的span */
    height: 2.3em;
    width: 2.3em;
    background-image: url("../img/heart-off.png");
    background-repeat: no-repeat;
    background-size: cover;


    /*border: 5px solid green;*/
    /*border-radius: 50%;*/
    display: inline-block;
    position: absolute;
    left: 0;
    top: 0;
}

.checkboxB-button::after { /* 中間點點 */
    content: "";
    display: block;
    height: 2.3em;
    width: 2.3em;
    /*border-radius: 50%;*/
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-image: url("../img/heart-on.png");
    background-repeat: no-repeat;
    background-size: cover;


    /*background-color: green;*/
    opacity: 0;
    transition: opacity 0.2s;
}

.checkboxB-input:checked ~ .checkboxB-label .checkboxB-button::after {
    /* 選中checkbox時 才顯示中間點點 */
    opacity: 1;
}
/*-------- 控制設定 --------*/
/*---置中---*/
.flex-center {
    display: flex;
    align-items: center;
    justify-content: center;
}

/*---置上---*/
.flex-start {
    display: flex;
    align-items: start;
    justify-content: center;
}
/*---置下---*/
.flex-start {
    display: flex;
    align-items: end;
    justify-content: center;
}
/*---置中左---*/
.flex-left {
    display: flex;
    align-items: center;
    justify-content: start;
}
/*---置中右---*/
.flex-right {
    display: flex;
    align-items: center;
    justify-content: end;
}
/*---置上左---*/
.flex-start-left {
    display: flex;
    align-items: start;
    justify-content: start;
}
/*---置上右---*/
.flex-start-right {
    display: flex;
    align-items: start;
    justify-content: end;
}
/*---置下左---*/
.flex-end-left {
    display: flex;
    align-items: end;
    justify-content: start;
}
/*---置下右---*/
.flex-end-right {
    display: flex;
    align-items: end;
    justify-content: end;
}
/*--- 字色 ---*/
.red{
    color: #FF0000;
}

/*--- margin-0 ---*/
.m0{
    margin: 0 !important;
}
/*--- margin-right-right ---*/
.mrl0{
    margin-right: 0rem !important;
    margin-left: 0rem !important;
}
.mrl1{
    margin-right: 1rem !important;
    margin-left: 1rem !important;
}
.mrl2{
    margin-right: 2rem !important;
    margin-left: 2rem !important;
}
.mrl3{
    margin-right: 3rem !important;
    margin-left: 3rem !important;
}
.mrl4{
    margin-right: 4rem !important;
    margin-left: 4rem !important;
}
.mrl5{
    margin-right: 5rem !important;
    margin-left: 5rem !important;
}
.mrl6{
    margin-right: 6rem !important;
    margin-left: 6rem !important;
}
.mrl7{
    margin-right: 7rem !important;
    margin-left: 7rem !important;
}
.mrl8{
    margin-right: 8rem !important;
    margin-left: 8rem !important;
}
.mrl9{
    margin-right: 9rem !important;
    margin-left: 9rem !important;
}
.mrl10{
    margin-right: 10rem !important;
    margin-left: 10rem !important;
}
.mrl11{
    margin-right: 11rem !important;
    margin-left: 11rem !important;
}
.mrl12{
    margin-right: 12rem !important;
    margin-left: 12rem !important;
}
.mrl13{
    margin-right: 13rem !important;
    margin-left: 13rem !important;
}
.mrl14{
    margin-right: 14rem !important;
    margin-left: 14rem !important;
}
.mrl15{
    margin-right: 15rem !important;
    margin-left: 15rem !important;
}
.mrl16{
    margin-right: 16rem !important;
    margin-left: 16rem !important;
}
.mrl17{
    margin-right: 17rem !important;
    margin-left: 17rem !important;
}
.mrl18{
    margin-right: 18rem !important;
    margin-left: 18rem !important;
}
.mrl19{
    margin-right: 19rem !important;
    margin-left: 19rem !important;
}
.mrl120{
    margin-right: 20rem !important;
    margin-left: 20rem !important;
}
/*--- padding-top-bottom ---*/
.mtb0{
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/*--- margin-bottom ---*/
.mb1{
    margin-bottom: 1rem !important;
}
.mb2{
    margin-bottom: 2rem !important;
}
.mb3{
    margin-bottom: 3rem !important;
}
.mb4{
    margin-bottom: 4rem !important;
}
.mb5{
    margin-bottom: 5rem !important;
}
.mb6{
    margin-bottom: 6rem !important;
}
.mb7{
    margin-bottom: 7rem !important;
}
.mb8{
    margin-bottom: 8rem !important;
}
.mb9{
    margin-bottom: 9rem !important;
}
.mb10{
    margin-bottom: 10rem !important;
}
.mb11{
    margin-bottom: 11rem !important;
}
.mb12{
    margin-bottom: 12rem !important;
}
.mb13{
    margin-bottom: 13rem !important;
}
.mb14{
    margin-bottom: 14rem !important;
}
.mb15{
    margin-bottom: 15rem !important;
}
.mb16{
    margin-bottom: 16rem !important;
}
.mb17{
    margin-bottom: 17rem !important;
}
.mb18{
    margin-bottom: 18rem !important;
}
.mb19{
    margin-bottom: 19rem !important;
}
.mb20{
    margin-bottom: 20rem !important;
}
/*--- margin-top ---*/
.mt1{
    margin-top: 1rem !important;
}
.mt2{
    margin-top: 2rem !important;
}
.mt3{
    margin-top: 3rem !important;
}
.mt4{
    margin-top: 4rem !important;
}
.mt5{
    margin-top: 5rem !important;
}
.mt6{
    margin-top: 6rem !important;
}
.mt7{
    margin-top: 7rem !important;
}
.mt8{
    margin-top: 8rem !important;
}
.mt9{
    margin-top: 9rem !important;
}
.mt10{
    margin-top: 10rem !important;
}
.mt11{
    margin-top: 11rem !important;
}
.mt12{
    margin-top: 12rem !important;
}
.mt13{
    margin-top: 13rem !important;
}
.mt14{
    margin-top: 14rem !important;
}
.mt15{
    margin-top: 15rem !important;
}
.mt16{
    margin-top: 16rem !important;
}
.mt17{
    margin-top: 17rem !important;
}
.mt18{
    margin-top: 18rem !important;
}
.mt19{
    margin-top: 19rem !important;
}
.mt20{
    margin-top: 20rem !important;
}
/*--- margin-left ---*/
.ml1{
    margin-left: 1rem !important;
}
.ml2{
    margin-left: 2rem !important;
}
.ml3{
    margin-left: 3rem !important;
}
.ml4{
    margin-left: 4rem !important;
}
.ml5{
    margin-left: 5rem !important;
}
.ml6{
    margin-left: 6rem !important;
}
.ml7{
    margin-left: 7rem !important;
}
.ml8{
    margin-left: 8rem !important;
}
.ml9{
    margin-left: 9rem !important;
}
.ml10{
    margin-left: 10rem !important;
}
.ml11{
    margin-left: 11rem !important;
}
.ml12{
    margin-left: 12rem !important;
}
.ml13{
    margin-left: 13rem !important;
}
.ml14{
    margin-left: 14rem !important;
}
.ml15{
    margin-left: 15rem !important;
}
.ml16{
    margin-left: 16rem !important;
}
.ml17{
    margin-left: 17rem !important;
}
.ml18{
    margin-left: 18rem !important;
}
.ml19{
    margin-left: 19rem !important;
}
.ml20{
    margin-left: 20rem !important;
}
/*--- margin-right ---*/
.mr1{
    margin-right: 1rem !important;
}
.mr2{
    margin-right: 2rem !important;
}
.mr3{
    margin-right: 3rem !important;
}
.mr4{
    margin-right: 4rem !important;
}
.mr5{
    margin-right: 5rem !important;
}
.mr6{
    margin-right: 6rem !important;
}
.mr7{
    margin-right: 7rem !important;
}
.mr8{
    margin-right: 8rem !important;
}
.mr9{
    margin-right: 9rem !important;
}
.mr10{
    margin-right: 10rem !important;
}
.mr11{
    margin-right: 11rem !important;
}
.mr12{
    margin-right: 12rem !important;
}
.mr13{
    margin-right: 13rem !important;
}
.mr14{
    margin-right: 14rem !important;
}
.mr15{
    margin-right: 15rem !important;
}
.mr16{
    margin-right: 16rem !important;
}
.mr17{
    margin-right: 17rem !important;
}
.mr18{
    margin-right: 18rem !important;
}
.mr19{
    margin-right: 19rem !important;
}
.mr20 {
    margin-right: 20rem !important;
}
/*--- padding-0 ---*/
.p0{
    padding: 0 !important;
}
/*--- padding-left-right ---*/
.prl0{
    padding-right: 0 !important;
    padding-left: 0 !important;
}
/*--- padding-top-bottom ---*/
.ptb0{
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/*--- padding-bottom ---*/
.pb1{
    padding-bottom: 1rem !important;
}
.pb2{
    padding-bottom: 2rem !important;
}
.pb3{
    padding-bottom: 3rem !important;
}
.pb4{
    padding-bottom: 4rem !important;
}
.pb5{
    padding-bottom: 5rem !important;
}
.pb6{
    padding-bottom: 6rem !important;
}
.pb7{
    padding-bottom: 7rem !important;
}
.pb8{
    padding-bottom: 8rem !important;
}
.pb9{
    padding-bottom: 9rem !important;
}
.pb10{
    padding-bottom: 10rem !important;
}
.pb11{
    padding-bottom: 11rem !important;
}
.pb12{
    padding-bottom: 12rem !important;
}
.pb13{
    padding-bottom: 13rem !important;
}
.pb14{
    padding-bottom: 14rem !important;
}
.pb15{
    padding-bottom: 15rem !important;
}
.pb16{
    padding-bottom: 16rem !important;
}
.pb17{
    padding-bottom: 17rem !important;
}
.pb18{
    padding-bottom: 18rem !important;
}
.pb19{
    padding-bottom: 19rem !important;
}
.pb20{
    padding-bottom: 20rem !important;
}
/*--- margin-top ---*/
.pt1{
    padding-top: 1rem !important;
}
.pt2{
    padding-top: 2rem !important;
}
.pt3{
    padding-top: 3rem !important;
}
.pt4{
    padding-top: 4rem !important;
}
.pt5{
    padding-top: 5rem !important;
}
.pt6{
    padding-top: 6rem !important;
}
.pt7{
    padding-top: 7rem !important;
}
.pt8{
    padding-top: 8rem !important;
}
.pt9{
    padding-top: 9rem !important;
}
.pt10{
    padding-top: 10rem !important;
}
.pt11{
    padding-top: 11rem !important;
}
.pt12{
    padding-top: 12rem !important;
}
.pt13{
    padding-top: 13rem !important;
}
.pt14{
    padding-top: 14rem !important;
}
.pt15{
    padding-top: 15rem !important;
}
.pt16{
    padding-top: 16rem !important;
}
.pt17{
    padding-top: 17rem !important;
}
.pt18{
    padding-top: 18rem !important;
}
.pt19{
    padding-top: 19rem !important;
}
.pt20{
    padding-top: 20rem !important;
}
/*--- padding-left ---*/
.pl1{
    padding-left: 1rem !important;
}
.pl2{
    padding-left: 2rem !important;
}
.pl3{
    padding-left: 3rem !important;
}
.pl4{
    padding-left: 4rem !important;
}
.pl5{
    padding-left: 5rem !important;
}
.pl6{
    padding-left: 6rem !important;
}
.pl7{
    padding-left: 7rem !important;
}
.pl8{
    padding-left: 8rem !important;
}
.pl9{
    padding-left: 9rem !important;
}
.pl10{
    padding-left: 10rem !important;
}
.pl11{
    padding-left: 11rem !important;
}
.pl12{
    padding-left: 12rem !important;
}
.pl13{
    padding-left: 13rem !important;
}
.pl14{
    padding-left: 14rem !important;
}
.pl15{
    padding-left: 15rem !important;
}
.pl16{
    padding-left: 16rem !important;
}
.pl17{
    padding-left: 17rem !important;
}
.pl18{
    padding-left: 18rem !important;
}
.pl19{
    padding-left: 19rem !important;
}
.pl20{
    padding-left: 20rem !important;
}
/*--- padding-right ---*/
.pr1{
    padding-right: 1rem !important;
}
.pr2{
    padding-right: 2rem !important;
}
.pr3{
    padding-right: 3rem !important;
}
.pr4{
    padding-right: 4rem !important;
}
.pr5{
    padding-right: 5rem !important;
}
.pr6{
    padding-right: 6rem !important;
}
.pr7{
    padding-right: 7rem !important;
}
.pr8{
    padding-right: 8rem !important;
}
.pr9{
    padding-right: 9rem !important;
}
.pr10{
    padding-right: 10rem !important;
}
.pr11{
    padding-right: 11rem !important;
}
.pr12{
    padding-right: 12rem !important;
}
.pr13{
    padding-right: 13rem !important;
}
.pr14{
    padding-right: 14rem !important;
}
.pr15{
    padding-right: 15rem !important;
}
.pr16{
    padding-right: 16rem !important;
}
.pr17{
    padding-right: 17rem !important;
}
.pr18{
    padding-right: 18rem !important;
}
.pr19{
    padding-right: 19rem !important;
}
.pr20 {
    padding-right: 20rem !important;
}

/*9宮格 開始*/
.Jiugongge_div img{
    width: 60%;
    height: auto;
}
.Jiugongge_div p{
    font-size: 32px;
    font-weight: bold;
    color: black !important;
    display: block;
}
/*.Jiugongge_btn{
    color: black !important;
    filter: drop-shadow(0px 5px 10px #696969);
    width: 100% !important;
    height: 110px !important;
    background-image: none !important;
    margin: 0px !important;
    text-shadow: none !important;
}*/
.Jiugongge_btn_div{
    background-image: url('../img/btn-02.png?t=20240829');
    background-color: unset;
    background-repeat: no-repeat;
    background-size: auto 90%;
    background-position: center;
    text-align: center;
    font-size: 2.3rem;
    font-weight: bolder;
    display: flex;
    justify-content: center;
    align-items: center;
    color: black !important;
    filter: drop-shadow(0px 5px 10px #696969);
    width: 100% !important;
    height: 110px !important;
    margin: 0px !important;
    text-shadow: 2px 0px 2px rgb(212 212 212 / 80%);
}
.Jiugongge_btn_div2{
    background-image: url(../img/btn-06.png);
    margin-bottom: 1.5rem !important;
}
.Jiugongge_btn_div img{
    width: 23%;
    height: auto;
    margin-right: 2%;
}
.Jiugongge_gold{
    float: left;
    width: 14%;
    z-index: 999;
    position: absolute;
    top: 0;
    left: 6px;
}
.Jiugongge_gold img{
    width: 100%;
    height: auto;
}
.Jiugongge_money{
    float: left;
    width: 88%;
    height: auto;
    font-size: 33px;
    color: #FFF;
    margin: 2.5% 0% 1% 0%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    background-image: url('../img/overageBg.png?t=20240829');
    background-repeat: repeat-x;
    background-size: auto 100%;
    background-position: right;
}
.Jiugongge_money2{
    float: left;
    width: 10%;
    height: auto;
    font-size: 33.1px;
    color: #fff0;
    margin: 2.5% 0% 1% 0%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-image: url('../img/refreshBg.png?t=20240829');
    background-repeat: no-repeat;
    background-size: auto 100%;
    background-position: right;
}
.refresh_point_div{
    width: 60px;
    height: 60px;
    background: #f88526;
    border-radius: 50%;
    line-height: 2.1em;
    border-width: 5px;
    border-style: solid;
    border-color: #fad322;
    box-shadow: 0px 0px 4px 2px #7f7f7f69;
    font-size: 28px;
}
.Jiugongge_user_img{
    width: 100%;
    height: auto;
    border-radius: 50%;
    box-shadow: 4px 4px 15px 0px rgb(0 0 0 / 88%);
}
/*9宮格 結束*/
/*報表 開始*/
.report_content{
    font-size: 35px;
    background-color: #fff;
    margin-left: 10px;
    margin-right: 10px;
    padding-top: 10px;
    border-top-left-radius: 18px;
    border-top-right-radius: 18px;
    padding-left: 15px;
    padding-right: 15px;
    height: initial;
    padding-bottom: 100px;
}
.report_content .title{
    border-bottom-color: #fbf6e8;
    border-bottom-style: solid;
    padding-bottom: 21px;
}
.report_content .p1{
    color: #898989;
}
.report_content .p2{
    color: red;
}
.data_div{
    margin-top: 20px;
    margin-bottom: 20px;
    border-bottom-color: #fbf6e8;
    border-bottom-style: solid;
    padding-bottom: 21px;
}
.data_div .title1{
    color: #898989;
}
.data_div .title2{
    color: #ff872e;
    font-size: 37px;
}
.data_div .content{
    float: right;
}
/*報表 結束*/
/*修改密碼 開始*/
.chn_passForm_modal_input{
    border-style: solid;
    font-size: 35px;
    height: 100px;
    border-radius: 14px;
    width: 88%;
    margin: 0 6% 1.5rem 6%;
    padding-top: 16px;
    padding-bottom: 10px;
    padding-left: 10px;
    padding-right: 16px;
    background-color: #fff !important;
    border-color: #a5a5a5;
}
.chn_passForm_modal_p{
    width: 88%;
    margin: 0 6% 1rem 6%;
    font-size: 35px;
    font-weight: bolder;
}

/*修改密碼 結束*/
/*會員互傳 開始*/
.gameList_title4 button{
    color: #FFF;
    padding: 20px 10px 20px 10px;
    width: 100%;
    font-size: 40px;
    text-shadow: -1px 0px 3px #3c3c3c, 0px 1px 3px #3c3c3c, 1px 0px 3px #3c3c3c, 0px -1px 3px #3c3c3c;
    background: none;
}
.chn_passForm_modal_small_span{
    float: right;
    color: red;
}
.gameList_title4{
    background-image: url(../img/allgame-title.png);
    background-repeat: no-repeat;
    background-size: 50% 100%;
    background-position: center;
}
#b2b_gif {
    opacity: 0;
    animation: fadeIn_b2b_gif 0.5s ease-in 0.2s forwards; /* 0.2s 延遲顯示 */
  }
  
  @keyframes fadeIn_b2b_gif {
    to {
      opacity: 1;
    }
  }
.is-valid{
    border-style: solid;
    border-color: green;
}
.is-invalid{
    border-style: solid;
    border-color: red;
}
.report_content2{
    font-size: 35px;
    margin-left: 10px;
    margin-right: 10px;
    padding-top: 10px;
    border-top-left-radius: 18px;
    border-top-right-radius: 18px;
    padding-left: 15px;
    padding-right: 15px;
    height: initial;
    padding-bottom: 100px;
}
.report_content2 .div_title_modal_convey{
    background: linear-gradient(to bottom, #fffada 0%, #fef2ac 100%);
    padding-top: 2%;
    padding-bottom: 2%;
    padding-left: 14%;
    padding-right: 5%;
    border-radius: 50px;
    border-color: #ff703b;
    border-width: 5px;
    border-style: solid;
    color: #000;
    font-weight: bolder;
}
.div_title_modal_convey .content, .data_div_modal_convey .content{
    float: right;
}
.modal_convey_img{
    width: 14%;
    height: auto;
    position: absolute;
    top: -48%;
    left: -15%;
}
.data_div_modal_convey{
    background: linear-gradient(to bottom, #feda76 0%, #ffefbd 100%);
    padding-top: 3%;
    padding-bottom: 3%;
    padding-left: 5%;
    padding-right: 5%;
    border-radius: 50px;
    border-color: #ff703b;
    border-width: 5px;
    border-style: solid;
    color: #000;
    font-weight: bolder;
    margin-top: 5%;
}
.data_div_modal_convey .title{
    background-color: #fff;
    color: #fe4b00;
    padding: 1% 1% 1% 3%;
    border-radius: 50px;
}
.data_div_modal_convey .content2{
    border-bottom-color: #8e8e8e;
    border-bottom-width: 1px;
    border-bottom-style: solid;
}
/*會員互傳 結束*/
/*問與答 開始*/
.qa_title{
    padding-top: 20px;
    padding-bottom: 20px;
    background-color: #9d031e;
    color: #fff;
    border-radius: 60px;
    border-style: solid;
    border-width: 6px;
    border-color: #d21235;
    margin: auto;
    margin-top: 30px;
}
.qa_content{
    border-style: solid;
    border-width: 6px;
    border-color: #d21235;
    border-top-style: none;
    border-bottom-left-radius: 31px;
    border-bottom-right-radius: 31px;
    max-width: 92%;
    padding-top: 10px;
    background-color: #f9d9df;
}
/*問與答 結束*/
/*聊天室 開始*/
.chatroom-style{
    max-width: 84% !important;
    height: 75vh !important;
    padding: 25px 0 25rem 0 !important;
    overflow-y: auto !important;
    margin-left: 8% !important;
    overflow-x: hidden;
}
/*.chatroom-btn-bg{
    background-image: url(../img/gift/gift-tab02.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: center;
    padding-top: 17px;
    padding-bottom: 21px;
    max-width:75.666667%;
    margin-bottom: 22px !important;
}
.chatroom-btn{
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: center;
    text-align: center;
    font-size: 31px;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
    max-width: 48%;
    background-image: url(../img/chatroom/tb-off.png); 
}
.chatroom-btn.on{
    background-image: url(../img/chatroom/tb-on.png) !important;
    color: #fff;
    text-shadow: -1px 0px 3px #3c3c3c, 0px 1px 3px #3c3c3c, 1px 0px 3px #3c3c3c, 0px -1px 3px #3c3c3c;
}*/


.chatroom-title{
    text-align: center;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 0px;
    padding-right: 0px;
    background-color: #d71337;
    color: #fff;
    letter-spacing: 6px;
}
.arrowbox1-left,.arrowbox1-right {
    padding: 10px 20px;
    color: #555;
    font-size: 30px;
    background: #FFF;
    word-break: break-all;
    border-radius: 19px;
    margin-bottom: 1.5rem !important;
  }
  .arrowbox1-left{
    margin-left: 20px !important;
  }
  .arrowbox1-right{
    margin-right: 20px !important;
  }
  
  .arrowbox1-left:before {
    content: "";
    position: absolute;
    top: 50%;
    left: -30px;
    margin-top: -15px;
    border: 15px solid transparent;
    border-right: 15px solid #FFF;
  }
  .arrowbox1-right:before {
    content: "";
    position: absolute;
    top: 50%;
    left: 100%;
    margin-top: -15px;
    border: 15px solid transparent;
    border-left: 15px solid #FFF;
  }
  
  .arrowbox1-left p,.arrowbox1-right p {
    margin: 0;
    padding: 0;
    word-break: break-all;
  }
.user_img{
    max-width: 12.666667%;
}
.user_img img{
    width: 100%;
    height: auto;
        border-radius: 50%;
}
.user_name{
    color: #f88d1c;
    font-weight: bolder;
}
.welcome_p{
    margin-bottom: 1.5rem !important;
    padding: 10px 30px;
    background-color: #dedfdf;
    color: #858585;
    border-radius: 41px;
}
.user_talk{
    position: fixed;
    bottom: 1%;
    left: 2.15%;
    width: 96%;
    z-index: 9;
    font-size: 2rem;
}
.user_talk .bg{
    width: 100%;
    height: auto;
}
.user_talk .row{
    position: absolute;
    bottom: 33.9%;
    left: 6.15%;
    width: 92%;
}
.user_talk input{
    border-color: #5d5b5b;
    border-style: solid;
    border-width: 2px;
    height: 72px;
    width: 100%;
    border-radius: 17px;
    background-color: #fff8e5;
    text-align: left;
    padding: 10px 20px;
}
.user_talk .btn{
    /*background-image: url(../img/btn-03.png); */
    /* background-repeat: no-repeat; */
    /* background-position: center; */
    /* text-align: center; */
    font-size: 34px;
    padding-top: 0px !important;
    padding-bottom: 10px !important;
    background-size: 100% 100%;
    padding-left: 0px;
    padding-right: 0px;
}
.user_talk button{
    background-color: #ec981c;
    width: 100%;
    color: #fff;
    text-shadow: -1px 0px 3px #3c3c3c, 0px 1px 3px #3c3c3c, 1px 0px 3px #3c3c3c, 0px -1px 3px #3c3c3c;
    border-radius: 38px;
    border-color: #f1e0be;
    border-style: solid;
    border-width: 7px;
    height: 70px;
}
.user_talk .span{
    margin-bottom: 0px;
    font-size: 26px;
    color: #979494;
}
.user_talk_chatroom1, .user_talk_chatroom2{
    bottom: -1.5%;
    width: 98%;
    left: 1.15%;
}
.user_talk_chatroom1 .row, .user_talk_chatroom2 .row{
    bottom: 42.9% !important;
}
.user_talk_chatroom1 .span, .user_talk_chatroom2 .span{
    color: white !important;
}
#public_channel_msg, #grp_channel_msg{
    width: 100%;
    margin: auto;
}
#id_chat_report_user_account, .chat_report_user_account{
    border-color: #5d5b5b;
    border-style: solid;
    border-width: 2px;
    height: 92px;
    width: 84%;
    border-radius: 17px;
    background-color: #fff;
    padding: 10px 20px;
    text-align: center;
}
#blockade1 .row, #blockade2 .row{
    width: 100%;
    margin: auto;
}
#blockade1 .row .col-12{
    background-image: url(../img/chatroom/btn03.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: center;
    padding: 4% 10px 4% 30px;
    font-size: 2rem;
    color: white;
}
#blockade2 .row .col-12{
    background-image: url(../img/chatroom/btn04.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: center;
    padding: 4% 10px 4% 30px;
    font-size: 2rem;
    color: white;
}
.chatroom_row{
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-right: -15px;
    margin-left: -15px;
    margin-bottom: 7px;
}
.chatroom_row_img{
    width: 37%;
    height: auto;
}
/*聊天室 結束*/

/* 前進旺旺來 開始 */
.slot_flex {
    display: flex;
    align-items: baseline;
    padding: 15px 15px 0 15px;
}

.slot_style_count {
    display: flex;
    padding: 15px;
    border: 5px solid #FF873E;
    border-radius: 50px;
    font-size: 36px;
    background: linear-gradient(to bottom, #FFFBD8, #FEF2AA);
    align-items: center;
}

.slot_count_title {
    font-weight: bold;
    color: #FF873E;
}

.slot_count_img {
    background-image: url(../img/btn-03.png);
    width: 86%;
    height: 80px;
    line-height: 79px;
    float: right;
    background-size: 100% 100%;
    font-weight: 700;
    color: white;
}

.slot_count_no {
    background-image: url(../img/btn-02.png);
    width: 86%;
    height: 80px;
    line-height: 79px;
    float: right;
    background-size: 100% 100%;
    font-weight: 700;
    color: black;
}

.slot_lineHeight {
    line-height: 30px;
}

.font-bold {
    font-weight: bold;
}

table.slot_count_table {
    border-collapse: collapse;
    font-weight: bold;
}
.slot_count_table th, .slot_count_table td {
    position: relative;
    padding: 1px;
    text-align: center;
}

.slot_count_table th:not(:first-child)::after, .slot_count_table td:not(:first-child)::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 100%;
    height: 30px;
    width: 3px; 
    background-color: #FF7615;
    transform: translateY(-50%);
}

.slot_count_table {
    width: 100%;
    text-align: center;
}

.slot_count_small {
    color: #8e8b8b;
    font-size: 24px;
    line-height: 15px;
}
.first_data-row{
    width: 97%;
    margin: auto;
}
.first_data-row p{
    font-size: 1.8rem;
    color: #8e8b8b;
}
/* 前進旺旺來 結束 */
/*loading動畫 開始*/
.demo1_loading_list {
    width: 100%;
    height: 81px;
    position: absolute;
    top: 269px;
    right: 0;
    bottom: 0;
    left: -76px;
    margin: auto;
}
.demo1_loading_list > div {
    width: 33px;
    margin: 0px 0px;
    display: inline-block;
}
.loading-list .col {
    float: left;
    width: 33.333333%;
}
.loading-list .col .col-content {
    position: relative;
    padding-bottom: 100%;
}
.loading-list .col .loading-wrap {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
@-webkit-keyframes dots {
    20% {
        box-shadow: 0em 0 rgba(140, 199, 89, 0.2), 1em 0 transparent, 2em 0 rgba(229,188,76, 0), 3em 0 transparent, 4em 0 rgba(229,188,76, 0.2), 5em 0 transparent, 6em 0 rgba(229,188,76, 0.4), 7em 0 transparent, 8em 0 rgba(229,188,76, 0.6), 9em 0 transparent, 10em 0 rgba(229,188,76, 0.8);
    }
    40% {
        box-shadow: 0em 0 rgba(140, 199, 89, 0.4), 1em 0 transparent, 2em 0 rgba(229,188,76, 0.2), 3em 0 transparent, 4em 0 rgba(229,188,76, 0), 5em 0 transparent, 6em 0 rgba(229,188,76, 0.2), 7em 0 transparent, 8em 0 rgba(229,188,76, 0.4), 9em 0 transparent, 10em 0 rgba(229,188,76, 0.6);
    }
    60% {
        box-shadow: 0em 0 rgba(140, 199, 89, 0.6), 1em 0 transparent, 2em 0 rgba(229,188,76, 0.4), 3em 0 transparent, 4em 0 rgba(229,188,76, 0.2), 5em 0 transparent, 6em 0 rgba(229,188,76, 0), 7em 0 transparent, 8em 0 rgba(229,188,76, 0.2), 9em 0 transparent, 10em 0 rgba(229,188,76, 0.4);
    }
    80% {
        box-shadow: 0em 0 rgba(140, 199, 89, 0.8), 1em 0 transparent, 2em 0 rgba(229,188,76, 0.6), 3em 0 transparent, 4em 0 rgba(229,188,76, 0.4), 5em 0 transparent, 6em 0 rgba(229,188,76, 0.2), 7em 0 transparent, 8em 0 rgba(229,188,76, 0), 9em 0 transparent, 10em 0 rgba(229,188,76, 0.2);
    }
}
  
@keyframes dots {
    20% {
        box-shadow: 0em 0 rgba(229,188,76,0.2), 1em 0 transparent, 2em 0 rgba(229,188,76, 0), 3em 0 transparent, 4em 0 rgba(229,188,76, 0.2), 5em 0 transparent, 6em 0 rgba(229,188,76, 0.4), 7em 0 transparent, 8em 0 rgba(229,188,76, 0.6), 9em 0 transparent, 10em 0 rgba(229,188,76, 0.8);
    }
    40% {
        box-shadow: 0em 0 rgba(229,188,76,0.4), 1em 0 transparent, 2em 0 rgba(229,188,76, 0.2), 3em 0 transparent, 4em 0 rgba(229,188,76, 0), 5em 0 transparent, 6em 0 rgba(229,188,76, 0.2), 7em 0 transparent, 8em 0 rgba(229,188,76, 0.4), 9em 0 transparent, 10em 0 rgba(229,188,76, 0.6);
    }
    60% {
        box-shadow: 0em 0 rgba(229,188,76,0.5), 1em 0 transparent, 2em 0 rgba(229,188,76, 0.4), 3em 0 transparent, 4em 0 rgba(229,188,76, 0.2), 5em 0 transparent, 6em 0 rgba(229,188,76, 0), 7em 0 transparent, 8em 0 rgba(229,188,76, 0.2), 9em 0 transparent, 10em 0 rgba(229,188,76, 0.4);
    }
    80% {
        box-shadow: 0em 0 rgba(229,188,76,0.8), 1em 0 transparent, 2em 0 rgba(229,188,76, 0.6), 3em 0 transparent, 4em 0 rgba(229,188,76, 0.4), 5em 0 transparent, 6em 0 rgba(229,188,76, 0.2), 7em 0 transparent, 8em 0 rgba(229,188,76, 0), 9em 0 transparent, 10em 0 rgba(229,188,76, 0.2);
    }
}
.dot-loading-wrapper {
    font-size: 36px;
    width: 11em;
}
  
.dot-loading {
    background: none;
    height: 1em;
    width: 1em;
    border-radius: 1em;
    box-shadow: 0em 0 rgb(229,188,76), 1em 0 transparent, 2em 0 rgb(229,188,76), 3em 0 transparent, 4em 0 rgb(229,188,76), 5em 0 transparent, 6em 0 rgb(229,188,76), 7em 0 transparent, 8em 0 rgb(229,188,76), 9em 0 transparent, 10em 0 #fbef5a;
    -webkit-animation: dots infinite 1.2s;
            animation: dots infinite 1.2s;
}

#loader-bg {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    overflow: hidden;
    position: fixed;
    background: rgb(0 0 0 / 54%);
    opacity: 1;
}
#loader {
    height: 100%;
    overflow: hidden;
    position: relative;
}
.main {
    height: 100%;
    overflow: hidden;
    position: relative;
}
.box1 {
    width: 80%;
    height: 30%;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}
.demo1 {
    width: 100%;
    height: 60%;
    position: absolute;
    top: 0px;
    left: 0;
}
.animation-container {
    width: 343px;
    height: 477px;
    background-size: cover;
    
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
}
@keyframes frameAnimation {
    0% {
        background-image: url('../img/loading/0001.png'); /* 第一張圖片 */
    }
    5% {
        background-image: url('../img/loading/0002.png');
    }
    10% {
        background-image: url('../img/loading/0003.png');
    }
    15% {
        background-image: url('../img/loading/0004.png');
    }
    20% {
        background-image: url('../img/loading/0005.png');
    }
    25% {
        background-image: url('../img/loading/0006.png');
    }
    30% {
        background-image: url('../img/loading/0007.png');
    }
    35% {
        background-image: url('../img/loading/0008.png');
    }
    40% {
        background-image: url('../img/loading/0009.png');
    }
    45% {
        background-image: url('../img/loading/0010.png');
    }
    50% {
        background-image: url('../img/loading/0011.png');
    }
    55% {
        background-image: url('../img/loading/0012.png');
    }
    60% {
        background-image: url('../img/loading/0013.png');
    }
    65% {
        background-image: url('../img/loading/0014.png');
    }
    70% {
        background-image: url('../img/loading/0015.png');
    }
    75% {
        background-image: url('../img/loading/0016.png');
    }
    80% {
        background-image: url('../img/loading/0017.png');
    }
    85% {
        background-image: url('../img/loading/0018.png');
    }
    90% {
        background-image: url('../img/loading/0019.png');
    }
    95% {
        background-image: url('../img/loading/0020.png');
    }
    100% {
        background-image: url('../img/loading/0001.png'); /* 返回第一張圖片 */
    }
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-10px); /* 調低彈跳高度 */
    }
    60% {
        transform: translateY(-2px); /* 輕微彈跳 */
    }
}

.demo1_span {
    width: 100%;
    height: 73%;
    position: absolute;
    top: 0px;
    left: 0;
}
.loading_animation_rwd {
    width: 100%;
    height: 81px;
    position: absolute;
    top: 269px;
    right: 0;
    bottom: 0;
    left: 3px;
    margin: auto;
}
.bounce {
    width: 72px;
    margin: 0px 5px;
   
    animation: bounce 1.5s infinite; /* 調整整體動畫時間 */
    display: inline-block;
}
.bounce img{
    width: 100%;
    height: auto;
}
.bounce:nth-child(1) {
    animation-delay: 0s;
}

.bounce:nth-child(2) {
    animation-delay: 0.3s; /* 調整每個字的間隔 */
}

.bounce:nth-child(3) {
    animation-delay: 0.6s; /* 調整每個字的間隔 */
}

.bounce:nth-child(4) {
    animation-delay: 0.9s; /* 調整每個字的間隔 */
}

.bounce:nth-child(5) {
    animation-delay: 1.2s; /* 調整每個字的間隔 */
}


/*loading動畫 結束*/

/*遊戲彈框 開始*/
.ifram_menu_btn{
    width: 100%;
    font-size: 33px;
    /*background-color: #ec981c;*/
    color: #ffffff00;
    background-image: url(../img/gameFrameTile.png?t=20200526);
    background-color: unset;
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: center;
    height: 108px;
}
.ifram_menu_btn_url{
        height: 60px;
}
.ifram_menu_url{
        margin-top: 0px;
    position: fixed;
    top: 0%;
    z-index: 999;
    width: 100%;
}
.ifram_menu_btn_2{
    position: fixed;
    top: 0px;
    z-index: 999;
    /*display: none;*/
}
.ifram_menu_btn_3{
    z-index: 0 !important;
}
body, html {
    height: 100%;
    margin: 0;
    overflow: hidden;
  }
  #iframe_box, #iframe_url_box{
    width: 100%;
    height: 100%;
    position: relative;
    background-color: #000;
  }

  #gameF,#urlF {
    /*width: 100%;
    height: 100%;*/
    
    border: 0;
    transition: transform 0.3s ease-in-out;
    transform-origin: center center;
  }
/*遊戲彈框 結束*/
/*18+提醒彈框 開始*/
.Restricted_level_img{
    width: 20%;
    height: auto;
    margin-bottom: 30px;
}
#Restricted_level .cancelBtn{
    background-image: url(../img/btn-03.png);
    color: #fff;
}
#Restricted_level .confirmBtn{
    background-image: url(../img/btn-04.png);
}
/*18+提醒彈框 結束*/

/*遊戲報表 開始*/
.time_div{
    width: 100%;
    float: left;
    text-align: center;
    font-size: 2.3em;
    margin-top: 17px !important;
    margin-bottom: 30px !important;
    box-shadow: 0px 0px 10px 2px #d4d4d49c;
    -webkit-box-shadow: 0px 0px 10px 2px #d4d4d49c;
    -moz-box-shadow: 0px 0px 10px 2px #3c3c3c;
    -o-box-shadow: 0px 0px 10px 2px #3c3c3c;
   
}
.time_btn{
    width: 20%;
    float: left;
    padding-top: 10px;
    padding-bottom: 10px;
}
.time_btn:nth-child(odd) {
    color: #fff;
    background-color: #ce0000;
}
.time_btn:nth-child(even) {
    color: #ce0000;
    background-color: white;
}
.time_div2{
    float: left;
    width: 71%;
    text-align: center;
    font-size: 2.3em;
    border-radius: 17px;
    border-style: solid;
    border-color: #a6a6a6;
    border-width: 1px;
    margin-left: 2%;
    background-color: #fff;
    box-shadow: 0px 0px 10px 2px #d4d4d49c;
    -webkit-box-shadow: 0px 0px 10px 2px #d4d4d49c;
    -moz-box-shadow: 0px 0px 10px 2px #3c3c3c;
    -o-box-shadow: 0px 0px 10px 2px #3c3c3c;
}
.time_start,.time_end{
    float: left;
    width: 41%;
    padding-top: 10px;
    padding-bottom: 10px;
}
.time_to{
    float: left;
    width: 18%;
    padding-top: 10px;
    padding-bottom: 10px;
    border-left-style: solid;
    border-right-style: solid;
    border-color: #a6a6a6;
    border-width: 1px;
    color: #c81111;
}
.time_search{
    float: left;
    width: 23%;
    text-align: center;
    font-size: 2.3em;
    padding-top: 10px;
    padding-bottom: 10px;
    margin-left: 2%;
    margin-right: 2%;
    background-color: #c81111;
    color: #fff;
    border-radius: 17px;
    box-shadow: 0px 0px 10px 2px #d4d4d49c;
    -webkit-box-shadow: 0px 0px 10px 2px #d4d4d49c;
    -moz-box-shadow: 0px 0px 10px 2px #3c3c3c;
    -o-box-shadow: 0px 0px 10px 2px #3c3c3c;
}
.return_btn{
    float: left;
    width: 28%;
    margin-top: 18px;
}
.return_btn .btn{
    font-size: 2.3em;
    width: 84%;
    background-color: #ff5601;
    color: #fff;
    border-radius: 17px;
    text-align: center;
    margin-left: 7%;
    box-shadow: 0px 0px 10px 2px #d4d4d49c;
    -webkit-box-shadow: 0px 0px 10px 2px #d4d4d49c;
    -moz-box-shadow: 0px 0px 10px 2px #3c3c3c;
    -o-box-shadow: 0px 0px 10px 2px #3c3c3c;
}
.remind_span{
    width: 100%;
    text-align: center;
    font-size: 2.3em;
    margin-top: 27px;
    margin-right: 3%;
    color: #898989;
    float: left;
    background-color: #fdf6e4;
    padding: 9px 2px 9px 2px;
}

.box_shadow{
    box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.18) !important;
    -webkit-box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.18) !important;
    -moz-box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.18) !important;
    margin-bottom: 1.5rem !important;
}
.time_div2 input{
    border: none;
    width: 100%;
    text-align: center;
}
.ui-widget.ui-widget-content{
    font-size: 2em !important;
}

.pagination li {
    border: 1px solid #7c7c7c;
}
.pagination .disabled {
    color: #000;
}
.pagination>li>a {
    display: inline;
    color: #000;
    margin-left: 0px;
    padding: 0px 0px;
    line-height: 1.42857143;
    border: 0px solid #ddd;
    border-radius: 0px !important;
}
.games_table{
    width: 100%;
    font-size: 2.3rem;
    text-align: center;
}
.games_table th{
    padding: 9px 2px 9px 2px;
    background-color: #c81111;
    color: white;
    border-left: 1px solid #fdf6e4; /* 垂直格線 */
    border-right: 1px solid #fdf6e4; /* 垂直格線 */
    border-top: 1px solid transparent; /* 水平格線透明 */
    border-bottom: 1px solid transparent; /* 水平格線透明 */
}
.games_table td{
    padding: 9px 2px 9px 2px;
    border-left: 1px solid #fdf6e4; /* 垂直格線 */
    border-right: 1px solid #fdf6e4; /* 垂直格線 */
    border-top: 1px solid transparent; /* 水平格線透明 */
    border-bottom: 1px solid transparent; /* 水平格線透明 */
}
.games_table tr:nth-child(even) {
    background-color: #fdf6e4;
}
.games_table tr:nth-child(odd) {
    background-color: #fefefe;
}
.games_footer{
    width: 100%;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: end;
    justify-content: center;
    padding: 0;
    border: none;
    position: absolute;
    bottom: 0;
    z-index: 9;
}
.games_footer img{
    width: 100%;
    height: auto;
    z-index: 99;
}
.games_footer button{
    width: 120px;
    height: 120px;
    border-radius: 50%;
    position: absolute;
    margin: 0 auto;
    border: none;
    background: none;
    box-shadow: none;
    z-index: 999;
}
.games_row{
    top: 16% !important;
    position: absolute !important;
    bottom: auto !important;
    left: 6.15% !important;
    width: 92% !important;
    font-size: 2rem;
}
.games_total_title_span{
    font-size: 2.5rem;
    font-weight: 700;
    border-bottom: 1px solid #000000;
}
.games_total_span{
    text-align: right;
    font-size: 2rem;
    border-bottom: 1px solid #000000;
}
/*遊戲報表 結束*/
/*index menu */
.menu_btn_bg{
    background-image: url(../img/btn-05.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: center;
    padding: 25px 10px 25px 10px;
    text-align: center;
    color: #ffff;
    font-size: 37px;
    max-width: 31.333333%;
    margin: auto;
}
.menu_btn_bg .icon.icon-bullhorn, .menu_btn_bg .icon.icon-trophy, .menu_btn_bg .icon.icon-assoc{
    margin-right: 9px;
    font-size: 41px;
    vertical-align: baseline;
}
.category_btn{
    margin: auto;
    max-width: 48.333333%;
    padding: 0px;
}
.category_btn img{
    width: 100%;
    height: auto;
}
/*game 內容*/
.game_content{
    margin: 5% 0 0 0 !important;
}
/*game 內容 end*/
/*金幣旺旺來 & 玩家傳送狗狗幣*/
.bonusShow_bg, .bonusShow_bg2{
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    overflow: hidden;
    position: fixed;
    background: rgb(0 0 0 / 72%);
}
.bonusShow_bg2 .chn_passForm_modal_input{
    margin: 0 0% 1.5rem 0% !important;
    width: 100% !important;
}
.bonusShow_bg .row2{
    margin-top: 3rem !important;
}
.bonusShow_bg2 .row2{
    margin-top: 0rem !important;
}
.bonusShow_Pop-upbox{
    padding: 5rem 6rem 2rem 6rem;
    border: 1rem solid #ff4d00;
    border-radius: 3rem;
    background-color: #fef7e4;
    font-size: 2.5rem;
    text-align: center;
    font-weight: 700;

    /* 新增這些來防止 iOS 灰線問題 */
    box-sizing: border-box;
    background-clip: padding-box;
    -webkit-background-clip: padding-box;
    transform: translateZ(0); /* 強制 GPU 繪製消除線條 */
    -webkit-transform: translateZ(0);
    border-collapse: separate; /* 若有表格作用 */
}
.bonusShow_title{
    width: 103%;
    min-height: 180px;
    line-height: 103px;
    font-size: 3rem;
    font-weight: bolder;
    color: #FFF;
    text-align: center;
    text-shadow: 2px 0px 2px rgba(103, 103, 103, 0.8);
    background-image: url(../img/mbTitle.png);
    background-size: auto 100%;
    background-repeat: no-repeat;
    background-position: center;
    position: absolute;
    top: -6rem;
    z-index: 1;
}
.bonusShow_bg_box{
    width: 100%;
    height: 69%;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}
.bonusShow_hidden{
    opacity: 0;
    animation: bonusShow_fadeIn 0.5s forwards;
    animation-delay: 2.5s; 
}
@keyframes bonusShow_fadeIn {
    to {
        opacity: 1;
    }
}
.bonusShow_bg2_span{
    font-size: 2.5em;
    color: #fff;
    margin-bottom: 14px;
}
/*金幣旺旺來 end*/
/*商城 gash */
.gash_row{
    width: 99%;
    margin: auto;
    background-image: url(../img/mall/bg01.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
}
.gash_row .img{
    width: 89%;
    height: auto;
}
.gash_input{
    background: linear-gradient(to bottom, #fae57d 0%, #f99e26 100%);
    padding-top: 10px;
    padding-bottom: 10px;
    border-radius: 34px;
    box-shadow: 0px 7px 0px #dc6424;
    margin-bottom: 25px !important;
}
.gash_input input{
    width: 62%;
    float: left;
    height: 60px;
    background-color: #fff;
    border-radius: 34px;
    margin-left: 3%;
    margin-right: 3%;
}
.gash_input .plus, .gash_input .minus{
    width: 60px;
    float: left;
    height: 60px;
    color: #ea7929;
    background-color: #fff;
    line-height: 4rem;
    font-size: 47px;
    border-radius: 50%;
    margin: auto;
}
.gash_row .col-5{
    margin-right: 0px !important;
    margin-top: 30px !important;
    margin-bottom: 30px !important;
    text-align: center;
}
.gash_row .col-7{
    max-width: 54.333333%;
    margin-left: 0px !important;
}
.gash_m_s{
    color: #f88d1c;
    font-size: 1.2em;
    font-weight: bolder;
}
.Stored_value_method{
    width: 97%;
    margin: auto;
    border-style: solid;
    border-color: #f88d1c;
    border-radius: 20px;
    padding: 20px 0px 20px 0px;
    font-size: 33px;
    margin-bottom: 2.5rem;
}
.Stored_value_method .row.col-8 .col-12 .img{
    width: 13%;
    height: auto;
}
.Stored_value_method .col-4 .img{
    width: 100%;
    height: auto;
}
.Membership_gash_btn_div{
    background-color: #ec981c;
    width: 100%;
    color: #fff;
    text-shadow: -1px 0px 3px #3c3c3c, 0px 1px 3px #3c3c3c, 1px 0px 3px #3c3c3c, 0px -1px 3px #3c3c3c;
    border-radius: 48px;
    border-color: #f1e0be;
    border-style: solid;
    border-width: 7px;
    text-align: center;
    padding-top: 20px;
    padding-bottom: 20px;
    box-shadow: -1px 3px 12px #a9a9a9a3;
    font-size: 2.3rem;
}
.Membership_gash_btn_div2{
    background-color: #edf2f5;
    width: 100%;
    color: #000;
    border-radius: 48px;
    border-color: #bbbbbb;
    border-style: solid;
    border-width: 7px;
    text-align: center;
    padding-top: 20px;
    padding-bottom: 20px;
    box-shadow: -1px 3px 12px #a9a9a9a3;
    font-size: 2.3rem;
    font-weight: bolder;
}
.Membership_gash_row{
    margin-top: 50px;
}
.Stored_value_method_btn{
    background: linear-gradient(to bottom, #fadf7d 0%, #f99326 100%);
    padding-top: 10px;
    padding-bottom: 10px;
    border-radius: 34px;
    box-shadow: 0px 7px 0px #dc6424;
    margin-bottom: 25px !important;
    font-size: 2rem;
    color: white;
    padding-left: 20px;
    padding-right: 20px;
}
/*商城 gash end*/
.closeBtn_img{
    width: 120px;
    height: 120px;
    border-radius: 50%;
    position: absolute;
    margin: 0 auto;
    border: none;
    background: none;
    box-shadow: none;
    z-index: 10;
    right: 41%;
    top: 97%;
}
/*點數中心*/
.refresh_point_list_rd3_row{
    background-color: #fff;
    max-width: 94%;
    font-size: 2.3rem;
    border-radius: 62px;
    box-shadow: 0px 7px 10px 0px #5251513b;
    padding-top: 14px;
    padding-bottom: 14px;
    margin-bottom: 1.5rem !important;
}
.refresh_point_list_rd3_row .game_name{
    font-size: 2.3rem;
    font-style: italic;
    font-weight: 700;
}
.refresh_point_list_rd3_row .game_contents{
    font-size: 2rem;
}
/*點數中心end*/
/*優惠活動*/
.list_promotions_gf_div{
    max-width: 96% !important;
    margin-top: 3rem !important;
    border-style: solid;
    border-color: #fff;
    border-width: 6px;
    border-radius: 74px;
    box-shadow: 1px 0px 12px 3px rgb(0 0 0 / 53%);
    padding: 0px;
}
.list_promotions_gf-row{
    width: 100%;
    margin: auto;
}
.list_promotions_gf-row img{
    width: 100%;
    height: auto;
    border-radius: 74px;
}
.list_promotions_gf-row .mask{
    position: absolute;
    top: 0px;
    z-index: 99999;
    left: 8px;
    width: 97%;
}
.list_promotions_gf-row .btn{
    position: absolute;
    top: -28px;
    z-index: 99999;
    right: -6px;
    width: 25%;
    height: auto;
    border-radius: 0px;
}
.list_promotions_gf-row .btn_coin{
    position: absolute;
    top: -28px;
    z-index: 99999;
    left: 31px;
    width: 11%;
    height: auto;
    border-radius: 0px;
}
.list_promotions_gf-row .span{
    width: 95%;
    position: absolute;
    bottom: 4px;
    z-index: 99999;
    left: 49px;
    height: auto;
    color: white;
}
.list_promotions_gf-row .span .title{
    display: block;
    margin-bottom: 0;
    line-height: 37px;
}
.list_promotions_gf-row .span .day{
    display: block;
    margin-bottom: 0;
    font-size: 30px;
}
#discountA{
    max-width: 90% !important;
    padding: 0 !important;
}
.discountA-img{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    overflow-y: hidden;
}
/*優惠活動 end*/
/*登入頁*/
#pc_mode, #quick{
    height: 27px !important;
    margin-right: 8px !important;
}
.init-input{
    text-shadow: -1px -1px 0 #ffff, 1px -1px 0 #ffff, -1px 1px 0 #ffff, 1px 1px 0 #ffff;
    color: #881701 !important;
    font-weight: 600;
}
/*登入頁 end*/
.strokeText {
    color: #fff;
    font-size: 2rem;
}
.strokeText::before {
    content: attr(data-storke);
    position: absolute;
    color: #000;
    -webkit-text-stroke: 10px #000;
    text-stroke: 10px #000;
    z-index: -1;
}
.strokeText2{
    color: #fff;
    font-size: 2rem;
}
.strokeText2::before {
    content: attr(data-storke);
    position: absolute;
    color: red;
    -webkit-text-stroke: 10px red;
    text-stroke: 10px red;
    z-index: -1;
}
.ui-widget.ui-widget-content{
    z-index: 99999 !important;
}
.ui-timepicker-div dl dd {
    margin: 0 10px 30px 40% !important;
}
.ui-slider-horizontal {
    height: 29px !important;
}
.ui-slider .ui-slider-handle {
    width: 50px !important;
    height: 50px !important;
}
.icon_notice_style{
    position: absolute;
    font-size: 59px;
    color: red;
    left: 20%;
    text-shadow: 2px 2px 4px rgb(136 114 114 / 58%);
    display: none;
}
.display_yes{
    display: block;
}

/*小螢幕手機
因為initial-scale=0.45
對於 375px 寬度的裝置，當你將 initial-scale=0.45，縮放後的實際寬度應該是
395 / 0.45 ≈ 878px*/
@media only screen and (max-width: 878px) {
    .gash_input input {
        width: 58%;
    }
    .gash_m_s{
        font-size: 1.1em;
    }
    .Stored_value_method{
        font-size: 30px;
    }
    .bonusShow_bg_box {
        height: 80%;
    }
    .list_promotions_gf-row .span .day {
        font-size: 27px;
    }
}
/* 適用於平板 (例如 iPad, Samsung Tab) 由於 initial-scale=0.45 改變了 視口的縮放比例，可以改用 device-width 來判斷 真實裝置寬度 而非 CSS 計算後的值 */
@media (min-device-width: 768px) and (max-device-width: 1024px) {
    .golifu_Box .modal-body.MBody2nd .mbContBox .mbTitle, .modal-dialog-game .modal-body.MBody2nd .mbContBox .mbTitle {
        width: 96%;
        min-height: 142px;
        line-height: 85px;
        font-size: 2.3rem;
        font-weight: bolder;
        color: #FFF;
        text-align: center;
        text-shadow: 2px 0px 2px rgba(103, 103, 103, 0.8);
        background-image: url(../img/mbTitle.png);
        background-size: auto 100%;
        background-repeat: no-repeat;
        background-position: center;
        position: absolute;
        top: -5rem;
        z-index: 1;
    }
    .Jiugongge_div img {
        width: 45%;
        height: auto;
    }
    .Jiugongge_div p {
        font-size: 26px;
        font-weight: bold;
        color: black !important;
        display: block;
    }
    .golifu_Box .modal-body.MBody2nd .mbContBox, .modal-dialog-game .modal-body.MBody2nd .mbContBox {
        width: 85%;
        min-height: 25rem;
        padding: 3rem 1rem 0rem 1rem;;
    }
    .Jiugongge_btn_div {
        background-image: url(../img/btn-02.png?t=20240829);
        background-color: unset;
        background-repeat: no-repeat;
        background-size: auto 80%;
        background-position: center;
        text-align: center;
        font-size: 2rem;
        font-weight: bolder;
        display: flex;
        justify-content: center;
        align-items: center;
        color: black !important;
        filter: drop-shadow(0px 5px 10px #696969);
        width: 100% !important;
        height: 110px !important;
        margin: 0px !important;
        text-shadow: 2px 0px 2px rgb(212 212 212 / 80%);
    }
    .ipad-mb2{
        margin-bottom: .5rem !important;
    }
    .ipad-mb3{
        margin-bottom: 1rem !important;
    }
}