/*通用版面*/
    body{
        background-color: #000;
            /*下方RWD移除更動屬性 20201023*/
            overflow-x: hidden;
            overflow-y: hidden;
            width: 1600px;
            height: 900px;
    }
    @media (max-width: 767px) { /*版面調整 手機板*/
        body{
                /*下方RWD移除更動屬性 20201023*/
                width: 506px;
        }
    }


    /*最外層 帳號衝突介面*/
    #account_conflict_fog{
        width: 100%; height: 100%; background-color: rgba(0,0,0,0.5); position: absolute; z-index: 110;
    }
    #account_conflict_msg{
        margin: 350px auto; background-color: rgba(0,0,0,0.8); width: 400px; color: white; padding: 20px; word-wrap:break-word; border-radius: 5px; font-size: 24px; font-weight: 900;
    }

    /*最外層 手機打橫介面*/
    #mobile_traverse_fog{
        width: 100%; height: 100%; background-color: rgba(0,0,0,0.5); position: absolute; z-index: 110;
    }
    #mobile_traverse_msg{
        margin: 350px auto; background-color: rgba(0,0,0,0.8); width: 400px; color: white; padding: 20px; word-wrap:break-word; border-radius: 5px; font-size: 24px; font-weight: 900;
    }

    /*最外層 全平台維護介面*/
    #all_maintain_fog{
        width: 100%; height: 100%; background-color: rgba(0,0,0,0.5); position: absolute; z-index: 110;
    }
    #all_maintain_msg{
        text-align: center;
        margin: 0 auto;
        width: 550px;
        font-weight: 900;
        font-size: 120%;
        margin-top: 25vh;
    }
    #all_maintain_msg .card-header{
        background: -webkit-linear-gradient(300deg, #BF6E1D 0,#F3C63D 20%, #F3C63D 50%,#BF6E1D 100%);
        background: -moz-linear-gradient(300deg, #BF6E1D 0,#F3C63D 20%, #F3C63D 50%,#BF6E1D 100%);
        background: -ms-linear-gradient(300deg, #BF6E1D 0,#F3C63D 20%, #F3C63D 50%,#BF6E1D 100%);
        background: -o-linear-gradient(300deg, #BF6E1D 0,#F3C63D 20%, #F3C63D 50%,#BF6E1D 100%);
        background: linear-gradient(300deg, #BF6E1D 0,#F3C63D 20%, #F3C63D 50%,#BF6E1D 100%);
    }


    /*-------------------------------------------------------------------*/
    /*抬頭介面*/
    /*-------------------------------------------------------------------*/
    .game_header{
        height: 50px;
        background-color: #222;
        border-bottom: solid 1px #111;
        box-shadow:0px 0px 10px 0px #111;
        color: #DDD;
        fill: #231815;
        z-index: 100;
        user-select: none; -moz-user-select: none;
            /*下方RWD移除更動屬性 20201023*/
            /*width: 100%;*/
            /*position: fixed;*/
            width: 1600px;
            position: absolute;
    }

    /*抬頭 - 左上*/
    .game_header>.h_left{
        position: absolute; 
        padding: 3px;
    }
    .game_header>.h_left>.h_icon{
        height: 34px; width: 34px; margin: 5px; float: left;
    }
    .game_header #h_icon{
        height: 34px; width: 34px; margin: 5px; float: left; cursor: pointer;
    }
    .game_header #h_title{
        width: fit-content; float: left; line-height: 44px; font-size: 110%;
    }

    /*抬頭 - 右上*/
    .game_header>.h_right{
        position: absolute; 
        padding: 3px; 
        right: 0px;
    }
    .game_header>.h_right>.infodiv{
        float: right; margin-right: 7px;
    }
    .game_header>.h_right>.buttondiv{
        float: right; line-height: 44px;
    }
    .game_header>.h_right #usermoney{
        cursor: pointer;
    }

    /*抬頭 - 中上*/
    .game_header>.h_center{
        margin-left: auto; 
        margin-right: auto; 
        /*width: 86px;*/
        width: 150px;
        line-height: 50px;
        font-size: 130%;
        color: #F3C63D;
    }

    @media (max-width: 767px) {
        .game_header>.h_center{
            font-size: 120%;
            margin-left: calc(50% - 140px);
        }
    }

    /*-------------------------------------------------------------------*/
    /*內容介面*/
    /*-------------------------------------------------------------------*/

    /*內容 - 主區*/
    .game_body{
        padding-top: 50px;

        /*下方RWD移除更動屬性 20201023*/
        /*min-height: calc(100vh - 50px);*/
        height: 850px;
    }

    /*內容 - 左選單*/
    .game_body>.b_left{/*左邊(menu)*/

        background-color: #333; 
        width: 320px; 
        z-index: 90; 
        box-shadow:0px 0px 10px 0px #111;
        color: #FFF;
        left: 0px;
        overflow-y: auto;
        padding: 5px;

        /*下方RWD移除更動屬性 20201023*/
        /*min-height: calc(100vh - 50px);
        height: calc(100vh - 50px);
        position: fixed; */
        height: 850px;
        position: absolute;
    }
    .game_body>.b_left .nav_div{
        width: 100%;
        height: 70px;
    }
    .game_body>.b_left .nav_div ul{
        padding: 0;
        margin: 15px 0 0 0;
        color: #000000;
        font-size: 10pt;
        font-weight: normal;
        cursor: pointer;
    }
    .game_body>.b_left .nav_div ul li{
        display: inline-block;
        border-radius: 50em;
        background-color: #796F47;
        padding: 5px 8px;
        margin-right: 5px;
        text-align: center;   
    }
    .game_body>.b_left .nav_div>.sort_div li{
        width: 70px; 
    }
    .game_body>.b_left .nav_div>.LuTu_div li{
        width: 50px; 
    }
    .game_body>.b_left .nav_div ul li:hover{
        background-color: #F3C63D;
        color: #ffffff;
    }
    .game_body>.b_left .nav_div ul li.achive{
        background-color: #F5A414;
        color: #ffffff;
    }
    .game_body>.b_left .nav_div>.sort_div{
        position: absolute;
        left: 10px;
        top: 10px;
    }
    .game_body>.b_left .nav_div>.sort_div #haoLuSum{
        position: absolute;
        right: -1px;
        top: 8px;
    }
    .game_body>.b_left .nav_div>.LuTu_div{
        position: absolute;
        top: 10px;
        right: 5px
    }
    .game_body>.b_left .room_card{
        margin: 0px;
    }
    .game_body>.b_left .room_card .card_div{
        padding-right: 0;
        padding-left: 0;
        padding-top: 5px;
    }
    .game_body>.b_left .room_card .card{/*房間card*/
        background-color: #171717;
        border: none;
        cursor: pointer;
        background: -webkit-linear-gradient(300deg, #BF6E1D 0,#F3C63D 20%, #F3C63D 50%,#BF6E1D 100%);
        background: -moz-linear-gradient(300deg, #BF6E1D 0,#F3C63D 20%, #F3C63D 50%,#BF6E1D 100%);
        background: -ms-linear-gradient(300deg, #BF6E1D 0,#F3C63D 20%, #F3C63D 50%,#BF6E1D 100%);
        background: -o-linear-gradient(300deg, #BF6E1D 0,#F3C63D 20%, #F3C63D 50%,#BF6E1D 100%);
        background: linear-gradient(300deg, #BF6E1D 0,#F3C63D 20%, #F3C63D 50%,#BF6E1D 100%);
    }
    .game_body>.b_left .room_card .card>.card-header{
        background-color: transparent;
        border: none;
        height: 60px;
        display: flex;
        align-items: center;
    }
    .game_body>.b_left .room_card .card .cover-img-border{
        position: absolute;
        border-radius: 100%;
        width: 60px;
        height: 60px;
        top: -7px;
        left: 3px;
        box-shadow: black 0.1em 0.1em 0.2em;
        background: -webkit-linear-gradient(315deg, #BF6E1D 0,#F3C63D 50%,#BF6E1D 100%);
        background: -moz-linear-gradient(315deg, #BF6E1D 0,#F3C63D 50%,#BF6E1D 100%);
        background: -ms-linear-gradient(315deg, #BF6E1D 0,#F3C63D 50%,#BF6E1D 100%);
        background: -o-linear-gradient(315deg, #BF6E1D 0,#F3C63D 50%,#BF6E1D 100%);
        background: linear-gradient(315deg,#BF6E1D 0,#F3C63D 50%,#BF6E1D 100%);
    }
    .game_body>.b_left .room_card .card .cover-img{
        position: absolute;
        border-radius: 100%;
        width: 54px;
        height: 54px;
        top: 3px;
        left: 3px;
        overflow: hidden;
    }
    .game_body>.b_left .room_card .card .cover-img img {
        max-width: 100%;
        max-height: 100%;
    }
    .game_body>.b_left .room_card .card .name{
        display: inline-block;
        position: absolute;
        left: 70px;
        top: 10px;
        color: #ffffff;
        font-size: 12pt;
        font-weight: bold;
        text-shadow: black 0.1em 0.1em 0.2em;
    }
    .game_body>.b_left .room_card .card .kjtime{
        display: inline-block;
        position: absolute;
        left: 220px;
        top: 35px;
        width: 70px;
        border-radius: 10pt;
        color: #ffffff;
        text-align: center;
        font-weight: normal;    
    }
    .game_body>.b_left .room_card .card .LuTustr{
        display: inline-block;
        position: absolute;
        left: 70px;
        top: 35px;
        color: #ffffff;
        font-size: 10pt;
        font-style: italic;
        font-weight: bold;
        background: -webkit-linear-gradient(150deg, #FF0000 0, #DF2323 50%,#C40000 100%);
        background: -moz-linear-gradient(150deg, #FF0000 0, #DF2323 50%,#C40000 100%);
        background: -ms-linear-gradient(150deg, #FF0000 0, #DF2323 50%,#C40000 100%);
        background: -o-linear-gradient(150deg, #FF0000 0, #DF2323 50%,#C40000 100%);
        background: linear-gradient(150deg, #FF0000 0, #DF2323 50%,#C40000 100%);
        background-clip: text;
        text-fill-color: transparent;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        -moz-background-clip: text;
        -moz-text-fill-color: transparent;
        -ms-background-clip: text;
        -ms-text-fill-color: transparent;
        -o-background-clip: text;
        -o-text-fill-color: transparent;
    }
    .game_body>.b_left .room_card .card .card-body{
        padding: 0;
        width: 100%;
    }
    .canvas_border{
        background-color: #000000;
        margin: 0 auto; 
    }
    .game_body>.b_left .room_card .card .card-body .limit{
        color: #000;
        margin-left: 5px;
        font-weight: 700;
    }
    .game_body>.b_left .room_card .card .card-body canvas{
        width: 100%;
    }

    .game_body>#menufog.fog_menuclose{
        display: none;
    }
    @media (min-width: 768px) { /*菜單調整 電腦版*/
        /* 20201027電腦版菜單改成無法關閉
        #bottom_div.bd_menuclose{ 
            width: 100%;
            width: 1600px;
        }
        .game_body>.b_right.r_menuclose{ 
            left: 0px; 
            width: 100%;
            width: 1600px;
        }
        .game_body>.b_left.l_menuclose{
            left: -320px;
        }*/
    }
    @media (max-width: 767px) { /*版面調整 手機板*/
        .game_body>.b_left.l_menuclose{/*菜單關閉的class*/
            left: -320px;
        }
    }

    .menumove_animate{ /*menu動畫*/
        transition: -webkit-left 0.3s, -webkit-width 0.3s;
        transition: left 0.3s, width 0.3s;
        transition: left 0.3s, -webkit-left 0.3s, width 0.3s, -webkit-width 0.3s;
    }

    /*內容 - 右區域*/
    .game_body>.b_right{/*右邊*/
        position: absolute; 
        z-index: 10; 
        left:320px;
        background-position: center;
        background-size: cover;
            /*下方RWD移除更動屬性 20201023*/
            /*width: calc(100% - 320px);*/
            /*min-height: calc(100vh - 50px); */
            width: 1280px;
            height: 850px;
    }
    .game_body>#menufog{/*菜單FOG(手機板用的)*/
        background-color: rgba(0,0,0,0.5);
        position: fixed;
        z-index: 89;
        width: 100%;
            /*下方RWD移除更動屬性 20201023*/
            /*min-height: calc(100vh - 50px);*/
            height: 850px;
    }
    #bottom_div{/*下DIV 外寬 也要設置*/
        z-index: 20;
            /*下方RWD移除更動屬性 20201023*/
            /*width: calc(100% - 320px);
            position: fixed; bottom: 0px;*/
            width: 1280px;
            position: absolute;
            top: 630px;
    }
    @media (min-width: 768px) { /*版面調整 電腦板*/
        .game_body>#menufog{ /*電腦版不顯示菜單fog*/
            display: none;
        }
    }
    @media (max-width: 767px) { /*版面調整 手機板*/
        .game_body>.b_right{/*手機板右邊不適應寬度*/
            left:0px;
                /*下方RWD移除更動屬性 20201023*/
                /*width: 100%; */
                width: 506px;
        }
        #bottom_div{/*下DIV 外寬 也要設置*/
                /*下方RWD移除更動屬性 20201023*/
                /*width: 100%; */
                width: 506px;
                top: 280px;
        }
        .game_header{
                /*下方RWD移除更動屬性 20201023*/
                width: 506px;
        }
    }

    #b_right_canvas{/*右邊物件專用畫布*/
        pointer-events: none;
        z-index: 13;
        position: absolute;
        width: 100%; height: 100%;
        overflow-x: hidden;
        overflow-y: hidden;
    }
    #b_right_pop_instmsg, #b_right_pop_instmsg2{/*b_right彈出瞬間訊息*/
        position: absolute; height: 100%; width: 100%; pointer-events: none; z-index: 22;
    }
    #b_right_pop_recordmsg {
        position: relative; height: 100%; width: 100%; z-index: 45;
    }
    #b_right_pop_recorddetail {
        position: absolute; height: 100%; width: 100%; z-index: 45; padding-top: 25vh;
    }
    #b_right_pop_instmsg>#pop_instmsg, #b_right_pop_instmsg2>#pop_instmsg2, #b_right_pop_recordmsg>#pop_recordmsg, #loading_instmsg, #logout_instmsg{
        padding: 20px; text-align: center; margin: 0 auto; border-radius: 5px; background-color: rgba(0,0,0,0.7); color: white; width: 240px; font-weight: 900; font-size: 120%; margin-top: 35vh;
    }
    #announce_instmsg{
        text-align: center;
        margin: 0 auto;
        width: 550px;
        font-weight: 900;
        font-size: 120%;
        margin-top: 25vh;
    }
    #announce_instmsg .card-header{
        background: -webkit-linear-gradient(300deg, #BF6E1D 0,#F3C63D 20%, #F3C63D 50%,#BF6E1D 100%);
        background: -moz-linear-gradient(300deg, #BF6E1D 0,#F3C63D 20%, #F3C63D 50%,#BF6E1D 100%);
        background: -ms-linear-gradient(300deg, #BF6E1D 0,#F3C63D 20%, #F3C63D 50%,#BF6E1D 100%);
        background: -o-linear-gradient(300deg, #BF6E1D 0,#F3C63D 20%, #F3C63D 50%,#BF6E1D 100%);
        background: linear-gradient(300deg, #BF6E1D 0,#F3C63D 20%, #F3C63D 50%,#BF6E1D 100%);
    }
    #maintain_instmsg{
        text-align: center;
        margin: 0 auto;
        width: 550px;
        font-weight: 900;
        font-size: 120%;
        margin-top: 25vh;
    }
    #maintain_instmsg .card-header{
        background: -webkit-linear-gradient(300deg, #BF6E1D 0,#F3C63D 20%, #F3C63D 50%,#BF6E1D 100%);
        background: -moz-linear-gradient(300deg, #BF6E1D 0,#F3C63D 20%, #F3C63D 50%,#BF6E1D 100%);
        background: -ms-linear-gradient(300deg, #BF6E1D 0,#F3C63D 20%, #F3C63D 50%,#BF6E1D 100%);
        background: -o-linear-gradient(300deg, #BF6E1D 0,#F3C63D 20%, #F3C63D 50%,#BF6E1D 100%);
        background: linear-gradient(300deg, #BF6E1D 0,#F3C63D 20%, #F3C63D 50%,#BF6E1D 100%);
    }
    @media (max-width: 767px) {
        #announce_instmsg, #maintain_instmsg {
            width: 95%;
        }
    }
    #b_right_pop_recorddetail>#pop_recorddetail{
        position: relative; padding: 20px; text-align: center; margin: 0 auto; border-radius: 5px; background-color: rgba(0,0,0,0.7); color: white; width: 450px; font-weight: 900; font-size: 120%;
    }
    #pop_recorddetail img.trans{
        -webkit-transform:rotate(-270deg);
        -moz-transform:rotate(-270deg);
        -ms-transform:rotate(-270deg);
        -o-transform:rotate(-270deg);
    }
    .RCdetail_closebtn{
        position: absolute;
        right: 10px;
        top: 10px;
        width: 30px;
        font-size: 20px;
        line-height: 30px;
        background-color: #e55353;
        border-radius: 100%;
        cursor: pointer;
        user-select: none;
        text-shadow: none;
        font-weight: 400;
        z-index: 46;
    }
    .RCdetail_closebtn:hover{
        background-color: red;
    }
    @media (max-width: 767px){
        .RCdetail_closebtn{
            right: 30px;
        }
    }
    #b_right_loading{/*b_right讀取FOG*/
        position: absolute; height: 100%; width: 100%; z-index: 21; background-color: rgba(0,0,0,0.5); 
        background-image: url('../img/loading2.gif'); background-repeat: no-repeat; background-position: center; background-size: 12vh;
    }
    #b_right_record{/*紀錄用滿版*/
        position: absolute; height: 100%; width: 100%; z-index: 40; background-color: #414141; color: #F0E9C8;
    }
    #b_right_record .daterangepicker{
        color: #000;
    }
    #b_right_record>.card{
        max-height: 100%;
        margin: 0px;
        background-color: #414141;
        border-color: #F0E9C8;
    }
    #b_right_record>.card>.card-header{
        background-color: #414141;
        border-color: #F0E9C8;
        padding: 0;
        border-bottom: none;
    }
    #b_right_record>.card>.card-header .record_nav{
        border-bottom: 1px solid;
        border-color: #F0E9C8;
        padding-top: 0.5rem;
    }
    #b_right_record>.card>.card-header .record_nav #game_record{
        display: inline-block;
        padding: 0.5rem 1.25rem;
        margin-left: 1rem;
        border: 1px solid;
        border-color: #F0E9C8;
        border-radius: 10px 10px 0 0;
        border-bottom: none;
        cursor: pointer;
    }
    #b_right_record>.card>.card-header .record_nav #money_record{
        display: inline-block;
        padding: 0.5rem 1.25rem;
        margin-left: 1rem;
        border: 1px solid;
        border-color: #F0E9C8;
        border-radius: 10px 10px 0 0;
        border-bottom: none;
        cursor: pointer;
    }
    #b_right_record>.card>.card-header .record_nav .achive{
        background-color: #F0E9C8;
        color: #414141;
    }
    #b_right_record>.card>.card-body{
        overflow-y: auto;
        background-color: #414141;
    }
    #b_right_record>.card>.card-body form{
        margin: 0;
    }
    #b_right_record>.card>.card-body input,#b_right_record>.card>.card-body select{
        background-color: #414141;
        color: #F0E9C8;
        border-color: #F0E9C8;
    }
    #b_right_record>.card>.card-body .table-bordered {
        border: none;
        color: #F0E9C8;
        padding: 5px;
        display: table;
    }
    #b_right_record>.card>.card-body .table-bordered thead{
        min-width: 100%;
    }
    #b_right_record>.card>.card-body .table-bordered th {
        border-color: #F0E9C8;
    }
    #b_right_record>.card>.card-body .table-bordered tbody td {
        border-color: #F0E9C8;
        cursor: pointer;
    }
    #b_right_record>.card>.card-body .table-bordered tbody tr{
        color: #ffffff;
    }
    #b_right_record>.card>.card-body .table-bordered tbody tr:hover {
        background-color: #F0E9C8;
        color: #414141;
    }
    #pageDiv{
        width: 100%;
    }
    .page-link {
        background-color: #636f83;
        color: #F0E9C8;
    }
    .page-item.active .page-link {
        background-color: #ced2d8;
        color: #000;
        border-color: #ced2d8;
    }
    #b_right_logout{/*登出用fog*/
        position: absolute; height: 100%; width: 100%; z-index: 50; background-color: rgba(0,0,0,0.5); 
    }
    #b_right_announce{/*公告用fog*/
        position: fixed; height: 120%; width: 100%; z-index: 100; background-color: rgba(0,0,0,0.8); 
    }
    #b_right_maintain{/*遊戲維護用fog*/
        position: absolute; height: 100%; width: 100%; z-index: 35; background-color: rgba(0,0,0,0.8); 
    }
    .b_right_msg{/*右邊物件專用說明區域*/
        z-index: 30;
        position: absolute;
        width: 100%; height: 100%;
        overflow-x: hidden;
        overflow-y: hidden;
        background-color: rgba(0,0,0,0.5);
    }
    .br_msg_closebtn{/*右邊說明關閉按鈕*/
        position: absolute; right:20px; top:12px; width:30px; line-height: 30px; text-align: center; background-color: #e55353; border-radius: 100%; color: #fff; font-size: 20px; cursor: pointer; user-select: none; -moz-user-select: none;
    }
    .br_msg_closebtn:hover{
        background-color: #e03232;
    }
    .b_right_msg>.card{ /*右邊物件專用說明區域 卡樣式*/
        max-width:767px; margin:5% auto; box-shadow: 0 0 6px 0 #000; /*max-height: 80%; overflow-y: auto;*/
    }
    @media (max-width: 767px) { /*手機板*/
        .b_right_msg>.card{
            margin:20px; max-height: calc(100% - 50px);
        }
        .half-w {
            width: 46.5% !important;
        }
        .date-half-w{
            width: 46.8% !important;
        }
    }
    .b_right_msg>.card>.card-body{
        max-height: 70vh; 
        overflow-y: auto;
    }
    @media (max-width: 767px) { /*手機板*/
        .b_right_msg>.card>.card-body{
            max-height: 90vh; 
        }
    }
    .b_right_msg>.card>.card-body p{
        margin-left:20px;
    }


    /*-------------------------------------------------------------------*/
    /*其他全版通用樣式*/
    /*-------------------------------------------------------------------*/
    @media (min-width: 768px) { /*電腦板*/
        .computerhidden{
            display: none;
        }
    }
    @media (max-width: 767px) { /*手機板*/
        .mobilehidden{
            display: none;
        }
    }
    .whitecolor{color: #ffffff;}
    .orangecolor{color: #ed7c0f;}
    .redcolor{color: #ed0606;}
    .bluecolor{color: #005af9;}
    .greencolor{color: #3db200;}
    .greencolor2{color: #689977;}
    .wincolor{color: #1F9E0D;}
    .losecolor{color: #FF0000;}
    .orangecolor_bg{background-color: #ed7c0f;}
    .redcolor_bg{background-color: #ed0606;}
    .bluecolor_bg{background-color: #005af9;}
    .greencolor_bg{background-color: #3db200;}
    .fontborder_white{
        text-shadow: 0 0 1px white,0 0 1px white,0 0 1px white,0 0 1px white,0 0 1px white,0 0 1px white,0 0 1px white,0 0 1px white,0 0 1px white,0 0 1px white,0 0 1px white,0 0 1px white,0 0 1px white,0 0 1px white,0 0 1px white,0 0 1px white;
    }
    .fontborder_white2{
        text-shadow: 0 0 2px white,0 0 2px white,0 0 2px white,0 0 2px white,0 0 2px white,0 0 2px white,0 0 2px white,0 0 2px white,0 0 2px white,0 0 2px white,0 0 2px white,0 0 2px white,0 0 2px white,0 0 2px white,0 0 2px white,0 0 2px white;
    }
    .fontborder_black{
        text-shadow: 0 0 1px black,0 0 1px black,0 0 1px black,0 0 1px black,0 0 1px black,0 0 1px black,0 0 1px black,0 0 1px black,0 0 1px black,0 0 1px black,0 0 1px black,0 0 1px black,0 0 1px black,0 0 1px black,0 0 1px black,0 0 1px black;
    }
    .fontborder_black2{
        text-shadow: 0 0 2px black,0 0 2px black,0 0 2px black,0 0 2px black,0 0 2px black,0 0 2px black,0 0 2px black,0 0 2px black,0 0 2px black,0 0 2px black,0 0 2px black,0 0 2px black,0 0 2px black,0 0 2px black,0 0 2px black,0 0 2px black;
    }
    .fontborder_black3{
        text-shadow: 0 0 3px black,0 0 3px black,0 0 3px black,0 0 3px black,0 0 3px black,0 0 3px black,0 0 3px black,0 0 3px black,0 0 3px black,0 0 3px black,0 0 3px black,0 0 3px black,0 0 3px black,0 0 3px black,0 0 3px black,0 0 3px black;
    }
    input::-webkit-outer-spin-button, /*去除number框的自帶箭頭*/
    input::-webkit-inner-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }
    input[type="number"]{
      -moz-appearance: textfield;
    }
    .displaynone{
        display: none;
    }
    .clone_animate{ /*clone體動畫 transform left top width height opacity*/
        transition: -webkit-transform 0.3s, -webkit-left 0.3s, -webkit-top 0.3s, -webkit-width 0.3s, -webkit-height 0.3s, -webkit-opacity 0.3s;
        transition: transform 0.3s, left 0.3s, top 0.3s, width 0.3s, height 0.3s, opacity 0.3s;
        transition: transform 0.3s, -webkit-transform 0.3s, left 0.3s, -webkit-left 0.3s, top 0.3s, -webkit-top 0.3s, width 0.3s, -webkit-width 0.3s, height 0.3s, -webkit-height 0.3s, opacity 0.3s, -webkit-opacity 0.3s;
    }
    .bluelink{
        cursor: pointer; color: #0d86ff; text-decoration:underline; user-select: none; -moz-user-select: none;
    }
    .bluelink:hover{
        color: #e03232;
    }

    /*only for IOS safari*/
    @supports (-webkit-touch-callout: none) {
        .game_body{
            min-height: calc(100vh - 200px);
        }

        .game_body>.b_right{/*右邊*/
            min-height: calc(100vh - 200px);
        }
    }

    .roomlink{
        color: #ffffff; text-decoration:none; user-select: none; -moz-user-select: none;
    }
    .roomlink:hover{
        color: #ffffff;
    }

    .canvas-maintain-fog{
        position: absolute;
        z-index: 35;
        margin: 0 auto;
        background-color: rgba(0,0,0,0.8);
        display: flex;
        align-items: center;
        align-content: center;
        justify-content: center;
        color: #ed0606;
    }
    .canvas-maintain-fog>p{
        font-size: 200%;
        font-weight: 900;
        text-shadow: 0 0 2px white,0 0 2px white,0 0 2px white,0 0 2px white,0 0 2px white,0 0 2px white,0 0 2px white,0 0 2px white,0 0 2px white,0 0 2px white,0 0 2px white,0 0 2px white,0 0 2px white,0 0 2px white,0 0 2px white,0 0 2px white;
    }

    html {
        scrollbar-3dlight-color: #666;
        scrollbar-arrow-color: #666;
        scrollbar-base-color: #666;
        scrollbar-darkshadow-color: #666;
        scrollbar-face-color: #666;
        scrollbar-highlight-color: #666;
        scrollbar-shadow-color: #000000;
        scrollbar-track-color: #222;
    }

    /* 捲軸底色 */
    ::-webkit-scrollbar{
        background-color:#222;
    }
    /* 捲軸上方的箭頭 
    ::-webkit-scrollbar-button:vertical:decrement{
    background-image: url("上方箭頭圖片網址");
    background-repeat: no-repeat;
    }*/
    /* 捲軸下方的箭頭 
    ::-webkit-scrollbar-button:vertical:increment {
    background-image: url("下方箭頭圖片網址") ;
    background-repeat: no-repeat;
    }*/
    /* 捲軸拉的軸軌的顏色 */
    ::-webkit-scrollbar-thumb{
        background-color:#666;  
    }
    /* 捲軸拉的垂直軸軌設成圓角及顏色 */
    ::-webkit-scrollbar-thumb:vertical {
        height: 50px;
        background-color:#666;  
        -webkit-border-radius: 6px; 
    }
    /* 捲軸拉的橫向軸軌設成圓角及顏色 */
    ::-webkit-scrollbar-thumb:horizontal {
        width: 50px;
        background-color:#666;
        -webkit-border-radius: 3px; 
    }
    /*滾動軸上下左右的最上端角*/
        ::-webkit-scrollbar-corner{
        background-color: #222;  
    }

    /*金色按鈕*/
    .btn-gold{
        background: -webkit-linear-gradient(300deg, #BF6E1D 0,#F3C63D 20%, #F3C63D 50%,#BF6E1D 100%);
        background: -moz-linear-gradient(300deg, #BF6E1D 0,#F3C63D 20%, #F3C63D 50%,#BF6E1D 100%);
        background: -ms-linear-gradient(300deg, #BF6E1D 0,#F3C63D 20%, #F3C63D 50%,#BF6E1D 100%);
        background: -o-linear-gradient(300deg, #BF6E1D 0,#F3C63D 20%, #F3C63D 50%,#BF6E1D 100%);
    }