*{
        font-family: "微軟正黑體", "微软雅黑","Helvetica Neue", Helvetica, Arial, "メイリオ", sans-serif;
    }
    
    body{
        padding:0px;
        margin:0px;
        min-width:350px;
        background-image:url('/2023/images/bg.jpg');
        background-size: cover;
        background-repeat: no-repeat;
        background-attachment: fixed;
        overflow-x: hidden;
    }
    
    body.noscroll{
        overflow-y:hidden;
    }
    
    ::-webkit-scrollbar {
        width: 7px;
    }

    ::-webkit-scrollbar-button {
        background: transparent;
        border-radius: 4px;
    }

    ::-webkit-scrollbar-track-piece {
        background: transparent;
    }

    ::-webkit-scrollbar-thumb {
        border-radius: 4px;
        background-color: rgba(0, 0, 0, 0.4);
        border: 1px solid slategrey;
    }
    ::-webkit-scrollbar-track {
        box-shadow: transparent;
    }
    
    .main.content{
        padding-top:65px;
        background-color:rgba(255, 255, 255, 0.2);
    }
    .main-width{
        max-width:1200px;
        min-width:540px;
        margin:auto auto;
    }
    .main.content.main-width{
        overflow-x: hidden;
    }
    
/*nav start*/
    nav.top{
        position:fixed;
        z-index:9999;
        width:100%;
        height:65px;
        background-color: transparent;
        border-bottom: #d2d2d2;
        border-top: 1px solid rgba(210,172,101,.3)!important;
        background: linear-gradient(180deg,#fff,#fff 10%,#fff 33%,#f2f2f2 71%,#e0e0e0);
    }
    nav.top .main-width{
        height:65px;
    }
    nav.top .logo{
        float:left;
    }
    nav.top .right_div{
        float:right;
    }
    
    nav.top .service{
        text-align:right;
        padding-right:5px;
    }
    nav.top .service .btn{
        padding:5px;
        font-size:16px;
        font-weight:bold;
    }
    
    nav.top .menu{
        margin:0px;
        padding:0px;
        list-style:none;
        text-align:right;
        
        padding-right:10px;
    }
    nav.top a{
        color:black;
    }
    
    nav.top .member_wallet{
        text-align:right;
    }
    nav.top .menu li{
        display:inline;
        min-width:50px;
        width:100%;
        cursor:pointer;
        margin-left:5px;
        text-align:right;
        font-weight:bold;
        font-size:16px;
    }
    nav.top .menu li.btn-default,nav.top .menu li.btn-danger{
        margin-right:5px;
    }
    nav.top .menu li.s{
        min-width:80px;
    }
    nav.top .menu li.ha{
        min-width:40px;
    }
    .ghr{
        content: "";
        height: 2px;
        width: 100%;
        margin-top:4px;
        background: linear-gradient(90deg,rgba(247,134,94,0),#ffaf7e 50%,rgba(247,132,88,0));
    }
/*nav end*/

.app_tools{
    display:none;
    column-gap:8px;
    row-gap: 2px;
    margin:3px;
}
.app_tools .app{
    flex:1 1;
    border:1px solid #ccc;
    padding:3px;
    text-align:center;
    background-color:rgba(255,255,255,0.8);
}

.app_tools .app:hover{
    background-color:rgba(115,30,88,0.8);
    color:white;
}

/*left menu*/
    .content .left_menu{
        z-index:999;
        width:100%;
        list-style:none;
        margin:0px;
        padding:0px;
        margin-top:5px;
        padding-left:5px;
        padding-right:5px;
        display:flex;
        column-gap:8px;
        row-gap: 5px;
    }
    
    .content .left_menu .item{
        box-sizing: border-box;
        flex:200px 1;
        color: rgba(0,0,0,.87);
        background-color:rgba(255, 255, 255, 0.5);
        border-radius:10px;
        display:inline;
        padding:10px;
        cursor:pointer;
        box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;
    }

    .content .left_menu .item:hover,
    .content .left_menu .item.active{
        background: linear-gradient(168deg,#a15288,#5c255a);
        box-shadow: 0 2px 2px rgb(0 0 0 / 15%);
        color:white;
    }
    .content .left_menu .item:hover .pic,
    .content .left_menu .item.active .pic{
        border-left: 4px solid #fbc844;
    }
    
    .content .left_menu .item .pic{
        float:left;
        width:44px;
        padding-left:5px;
        border-left: 4px solid #b4455f;
    }
    .content .left_menu .item .info{
        float:left;
        margin-left:8px;
        
    }
    .content .left_menu .item .cname{
        font-weight: bold;
        font-size:16px;
    }
    .content .left_menu .item .ename{
        font-size:12px;
        color:#666;
    }
    .content .left_menu .item.active .ename{
        font-size:12px;
        color:#eee;
    }

/*game list*/
.content .game{
    width:100%;
    padding:10px;
    display:flex;
    flex-flow: row wrap;
    column-gap:8px;
    row-gap: 8px;
    justify-content:center;
    align-content: center;
}

.content .game .item{
    box-sizing: border-box;
    flex:250px 1;
    max-width:350px;
    box-shadow: 0 3px 1px -2px rgb(0 0 0 / 30%), 0 2px 2px 0 rgb(0 0 0 / 20%), 0 1px 5px 0 rgb(0 0 0 / 10%);
    border-radius:5px;
    overflow:hidden;
    cursor:pointer;
}
.content .game .item[status="M"]{
    background-color:black;
}

.content .game .item[status="M"]:before{
    content: '維護中';
    position: absolute;
    z-index:1;
    margin-top: 5px;
    margin-left: 5px;
    border-radius: 3px;
    background-color: #8f0222;
    padding: 2px;
    padding-right: 5px;
    padding-left: 5px;
    font-size: 14px;
    color: white;
    /*transform: rotate(-20deg);*/
}

.content .game .item[status="M"] img{
    opacity:0.4;
}

.content .game .item img{
    position:relative;
}

.content .game .item .gname{
    position:relative;
    z-index:10;
    text-align:center;
    padding:2px;
    background-color:white;
    border-bottom-right-radius:5px;
    border-bottom-left-radius:5px;
    opacity:0.85;
    font-size:14px;
    font-weight:bold;
}

.content .member_load_game_div{
    background-size:contain;
    background-repeat:no-repeat;
    background-position:center center;
    text-align:center;
    margin:auto auto;
    width:50vw;
    height:400px;
    min-width:300px;
    min-height:150px;
}
.content .member_load_game_div .game_info{
    min-width:300px;
    padding-top:20px;
    width:100%;
    margin:auto auto;
}

@keyframes bg-spin {
    to {
        --border-angle: 1turn;
    }
}
@property --border-angle {
  syntax: "<angle>";
  inherits: true;
  initial-value: 0turn;
}

/*game list end*/

/*news*/
.content .news_box{
    display:flex;
    flex-flow: row wrap;
    box-sizing: border-box;
}
.content .news_box .news{
    flex:1;
    min-width:335px;
    box-sizing: border-box;
}
.content .news_box .news .title{
    margin-left:10px;
    margin-right:10px;
    padding-bottom:10px;
    font-weight: 400;
    text-align:center;
    border-bottom: 1px solid #e89f57;
}
.content .news_box .news .title_en{
    color: #e89f57;
    letter-spacing: 10px;
    font-size:16px;
    margin-left:10px;
}

.content .news_box .news .info{
    font-weight: bold;
    padding-left:30px;
    line-height: 28px;
}

.content .news_box .news .info ul{
    display:flex;
    flex-flow: row wrap;
}
.content .news_box .news .info li{
    flex:1 1;
    min-width:300px;
    
}
.content .news_box .news.toggle .info li{
    cursor:pointer;
}

.content .news_box .news.toggle .data{
    display:none;
    padding-left:12px;
    color:#666;
}

.content .news_box .news .info .info_title{
    color: #365a97;
    font-weight: bold;
    font-size:20px;
}
/*news end*/

/*廣告*/
.aadd img{
    border-radius:5px;
}
.aadd.hide{
    display:none;
}

ul.marquee{
    padding:5px;
    margin-left:200px;
}
ul.marquee li{
    color:black;
    font-size:16px;
}

/*下方導覽*/
nav.bottom_fix{
    min-width:350px;
    width:100%;
    height:85px;
    position:fixed;
    bottom:0px;
    z-index:9999;
    background: linear-gradient(0deg,#eee 5%,#fff 33%,#f2f2f2 71%,#e0e0e0);
    box-shadow: 0 3px 1px -2px rgb(0 0 0 / 30%), 0 2px 2px 0 rgb(0 0 0 / 20%), 0 1px 5px 0 rgb(0 0 0 / 10%);
    display:none;
    padding-top:10px;
    padding-bottom:25px;
}
nav.bottom_fix .item{
    flex:1 1;
    text-align:center;
    cursor:pointer;
    position:relative;
    top:0px;
    opacity:0.8;
    font-weight:bold;
    margin-top:3px;
}
nav.bottom_fix .item.on{
    top:-10px;
    color:#b4455f;
    opacity:1;
}
nav.bottom_fix .item:hover{
    color:#b4455f;
    opacity:1;
}

nav.bottom_fix .item .box{
    border: 1px solid #e0e0e0;
    height:80px;
    width:80px;
    margin:auto auto;
    border-radius:100%;
    padding-top:12px;
    margin-top:-35px;
    background: linear-gradient(0deg,#eee 5%,#fff 33%,#f2f2f2 71%,#e0e0e0);
    box-shadow: 0 3px 1px -2px rgb(0 0 0 / 30%), 0 2px 2px 0 rgb(0 0 0 / 20%), 0 1px 5px 0 rgb(0 0 0 / 10%);
    cursor:pointer;
}

nav.bottom_fix .item i{
    margin-bottom:5px;
    font-size:30px;
}

/*event539*/
.content .event539btn{
    position:fixed;
    background-color:#f29049;
    color:white;
    font-weight:bold;
    text-align:center;
    border-radius:100%;
    border:3px solid white;
    width:85px;
    height:85px;
    overflow:hidden;
    right:5px;
    bottom:90px;
    z-index:999;
    box-shadow: 0 3px 1px -2px rgb(0 0 0 / 30%), 0 2px 2px 0 rgb(0 0 0 / 20%), 0 1px 5px 0 rgb(0 0 0 / 10%);
}

.rotated {
  transform: rotate(90deg);
  -ms-transform: rotate(90deg); /* IE 9 */
  -moz-transform: rotate(90deg); /* Firefox */
  -webkit-transform: rotate(90deg); /* Safari and Chrome */
  -o-transform: rotate(90deg); /* Opera */
}

/*footer*/
footer{
    padding-bottom:20px;
}
footer .brand{
    background-color:#505050;
    display:flex;
    flex-flow: row wrap;
    column-gap:10px;
    justify-content: flex-start;
    opacity: 0.7;
    box-sizing: border-box;
    padding-bottom:10px;
    
}
footer .brand .item{
    box-sizing: border-box;
    flex:1 1;
    padding-top:20px;
}
footer .brand img{
    height:50px;
}
/*footer end*/

@media only screen and (max-width:900px){
    .content .left_menu{
        flex-flow: row wrap;
    }
    .app_tools{
        display:flex;
    }
}
@media only screen and (max-width:685px){
    .content .news_box .news .title{
        text-align:left;
    }
    footer{
        padding-bottom:70px;
    }
    nav.bottom_fix{
        display:flex;
    }
}

@media only screen and (max-width:645px){
    nav.top .menu .ha{
        display:none;
    }
    .content .mid_content{
        display:flex;
    }
    .content .left_menu{
        flex:88px 1;
        min-width:88px;
        height:88px;
    }
    .content .left_menu .pic img{
        margin-left:10px;
    }
    .content .left_menu .cname{
        margin-top:0px;
        margin-left:-8px;
        border-left: 4px solid #b4455f;
        padding-left:5px;
    }
    .content .left_menu .item:hover .cname,
    .content .left_menu .item.active .cname{
        border-left: 4px solid #fbc844;
    }
    .content .left_menu .ename{
        display:none;
    }
    .content .game{
        padding:0px;
        padding-top:5px;
    }
    .content .game .item{
        flex:200px 1;
    }
    .content .left_menu.fixed{
        position:fixed;
        width:78px;
        top:65px;
    }
    .content .game.fixed{
        margin-left:88px;
    }
    .content .news_box{
        margin-left:88px;
    }
    .content .news_box .news{
        width:100%;
        min-width:auto;
    }
    .content .news_box .news .info{
        width:100%;
        padding-left:5px;
    }
    .content .news_box .news .info ul{
         list-style:none;
         padding:0px;
         margin:0px;
    }
    .content .news_box .news .info li{
        word-break: keep-all;
        min-width:100%;
    }
}
@media only screen and (max-width:550px){
    .main-width{
        max-width:100%;
        min-width:350px;
    }
    nav.top .logo img{
        width:160px;
    }
    ul.marquee{
        margin-left:5px !important;
    }
    .content .game .item{
        flex:48% 1;
    }
}

@media only screen and (max-width:460px){
    .content .game .item{
        flex:48% 1;
        min-width:100px;
    }
    .content .member_load_game_div .game_info{
        padding-top:5vw;
    }
}

@media only screen and (max-width:430px){
    .content .game .item{
        flex:48% 1;
        min-width:100px;
    }
}

@media only screen and (max-width:800px){
    nav.bottom{
        position:fixed;
    }
}