/*@font-face {
    font-family: "Noto";
    src: url("../fonts/NotoSansCJKtc-Regular.otf");
}*/


/*@import url(http://fonts.googleapis.com/earlyaccess/notosanssc.css);

* {
    font-family: 'Noto Sans SC', sans-serif;
}
*/

body {
    font-size: 15px;
}

.login_bg {
    /*background: url(../images/login_cover.jpg);
    background-size: 100%;*/
}

.trans350 {
    transition: all 350ms;
}

.mobile_title {
    background-color: #37474f;
    position: fixed;
    width: 100%;
    z-index: 9999;
    top: 0;
}

.mobile_bar {
    display: block;
    position: fixed;
    width: 260px;
    height: 100%;
    left: -300px;
    top: 45px;
    overflow: scroll;
}

.mobile_bar_show {
    display: block;
    position: fixed;
    width: 260px;
    height: 100%;
    transform: translate3d(300px, 0px, 0px);
    -webkit-transition-duration: 300ms;
    transition-duration: 300ms;
    z-index: 103;
}

.mobile_bar_mask {
    display: none;
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 102;
    background-color: rgba(0, 0, 0, 0.8);
}

.moblie_bar_mask_show {
    display: block;
}

.mobile_margin {
    margin-top: 40px;
}

.flow_hide {
    overflow: hidden;
    position: fixed;
}

.login-container .login-form {
    width: 346px;
}

.content {
    padding: 20px 14px;
}

.agent {
    font-size: 16px;
}

.ver {
    text-align: center;
    padding: 10px 0 10px 0;
    letter-spacing: 2px;
    font-style: italic;
    color: #5b6d75;
    font-size: 13px;
}

.hide {
    display: none;
}

.div_center {
    justify-content: center;
    align-items: center;
    display: -webkit-flex;
}

.sidebar_logo {
    height: 100px;
    width: 100px;
    background: url(../images/logo.png) no-repeat center center;
    background-size: 100px;
}

.sidebar_logo_xs {
    height: 50px;
    width: 50px;
    background-size: 50px;
}


/*datatable fix*/

.dataTable thead .sorting:before,
.dataTable thead .sorting:after {
    color: #FFF;
}

.ui-datepicker {
    font-size: 15px;
}

.ui-timepicker-div dd+dt {
    margin: 0px;
}

.load_mask {
    position: fixed;
    width: 100%;
    height: 105%;
    z-index: 1051;
    background-color: rgba(0, 0, 0, 0.63);
    display: none;
    text-align: center;
    top: -20px;
    color: #fff;
}

.load_mask_show {
    display: table;
}

.navbar-inverse {
    z-index: 100;
}

.msg {
    display: none;
    margin-left: 25%;
    padding: 5px;
    width: 50%;
    position: fixed;
    z-index: 9000;
    top: 180px;
    text-align: center;
    border-radius: 3px;
}

.reel {
    display: -webkit-inline-box;
    display: -moz-inline-box;
    display: inline-block;
    background-repeat: no-repeat !important;
    position: relative;
    max-height: 225px;
}

.reel_new {
    display: -webkit-inline-box;
    display: -moz-inline-box;
    display: inline-block;
    background-repeat: no-repeat;
    position: relative;
    max-height: 225px;
}

.reel_coin_master {
    display: -webkit-inline-box;
    display: -moz-inline-box;
    display: inline-block;
    background-repeat: no-repeat !important;
    position: relative;
    max-height: 415px;
}

.pstm_reel {
    display: -webkit-inline-box;
    display: -moz-inline-box;
    display: inline-block;
    background-repeat: no-repeat;
    position: relative;
}

.img_dv {
    justify-content: center;
    align-items: center;
    position: relative;
    height: 225px;
}

.img_dv2 {
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 15px;
    bottom: 0px;
    left: 0px;
    opacity: 0;
    right: 0px;
    -webkit-transition: all 1s;
    transition: all 1s;
}

.img_coin_master_dv {
    justify-content: center;
    align-items: center;
    position: relative;
    width: 234px;
    height: 415px;
}

.img_dv2_show {
    opacity: 1;
}

.pss_pic1 {
    justify-content: center;
    align-items: center;
    position: relative;
    height: 225px;
    opacity: 0;
    -webkit-transition: all 1s;
    transition: all 1s;
}

.pss_pic2 {
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: 0px;
    opacity: 0;
    right: 0px;
    -webkit-transition: all 1s;
    transition: all 1s;
}


/* 消消樂相關 */

.pic_show {
    opacity: 1!important;
    -webkit-transition: all 1s;
    transition: all 1s;
}

.two_pic1,
.two_pic2,
.three_pic1,
.three_pic2,
.three_pic3 {
    position: absolute;
    top: 105px;
    left: 23px;
    opacity: 0;
    -webkit-transition: all 1s;
    transition: all 1s;
}

.bigcoin_img_div {
    border-radius: 5px;
    border: 2px solid #444444;
    padding: 0;
    margin: 5px;
    font-size: 16px;
}

.bigcoin_img_div_2 {
    border-radius: 5px;
    border: 2px solid #ff9800;
    padding: 0;
    margin: 5px;
    font-size: 16px;
}

.bigcoin_img_div>.table>thead>tr>th,
.bigcoin_img_div>.table>tbody>tr>th,
.bigcoin_img_div>.table>tfoot>tr>th,
.bigcoin_img_div>.table>thead>tr>td,
.bigcoin_img_div>.table>tbody>tr>td,
.bigcoin_img_div>.table>tfoot>tr>td {
    padding: 5px 0;
    border: 0;
}

.bigcoin_img_div>.table tr>td[class*=bg-],
.bigcoin_img_div>.table tr>th[class*=bg-] {
    border-right: 1px solid;
    border-color: #444444;
}

.bigcoin_img_div_2>.table>thead>tr>th,
.bigcoin_img_div_2>.table>tbody>tr>th,
.bigcoin_img_div_2>.table>tfoot>tr>th,
.bigcoin_img_div_2>.table>thead>tr>td,
.bigcoin_img_div_2>.table>tbody>tr>td,
.bigcoin_img_div_2>.table>tfoot>tr>td {
    padding: 5px 0;
    border: 0;
}

.bigcoin_img_div_2>.table tr>td[class*=bg-],
.bigcoin_img_div_2>.table tr>th[class*=bg-] {
    border-right: 1px solid;
    border-color: #ff9800;
}

.bigcoin_bonus_img_div {
    border-radius: 5px;
    border: 2px solid #ffa726;
    padding: 0;
    margin: 5px;
    font-size: 16px;
}

.bigcoin_bonus_img_div>.table>thead>tr>th,
.bigcoin_bonus_img_div>.table>tbody>tr>th,
.bigcoin_bonus_img_div>.table>tfoot>tr>th,
.bigcoin_bonus_img_div>.table>thead>tr>td,
.bigcoin_bonus_img_div>.table>tbody>tr>td,
.bigcoin_bonus_img_div>.table>tfoot>tr>td {
    padding: 5px 0;
    border: 0;
}

.bigcoin_bonus_img_div>.table tr>td[class*=bg-],
.bigcoin_bonus_img_div>.table tr>th[class*=bg-] {
    border-right: 1px solid;
    border-color: #ffa726;
}


/* ./消消樂相關 */

.img_run {
    display: -webkit-inline-box;
    display: -moz-inline-box;
    /*display: inline-block;*/
    background-repeat: no-repeat;
    position: relative;
    margin-right: 1px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.img_run_2 {
    display: -webkit-inline-box;
    display: -moz-inline-box;
    display: inline-block;
    background-repeat: no-repeat;
    background-color: rgba(0, 0, 0, 0.66);
    background-blend-mode: color;
}

.card_img_run {
    display: -webkit-inline-box;
    display: -moz-inline-box;
    /*display: inline-block;*/
    background-repeat: no-repeat;
    position: absolute;
    margin-right: 1px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.img_div>.table>thead>tr>th,
.img_div>.table>tbody>tr>th,
.img_div>.table>tfoot>tr>th,
.img_div>.table>thead>tr>td,
.img_div>.table>tbody>tr>td,
.img_div>.table>tfoot>tr>td {
    padding: 5px 0;
    border: 0;
}

.img_div_2>.table>thead>tr>th,
.img_div_2>.table>tbody>tr>th,
.img_div_2>.table>tfoot>tr>th,
.img_div_2>.table>thead>tr>td,
.img_div_2>.table>tbody>tr>td,
.img_div_2>.table>tfoot>tr>td {
    padding: 5px 0;
    border: 0;
}

.img_div>.table tr>td[class*=bg-],
.img_div>.table tr>th[class*=bg-] {
    border-right: 1px solid;
    border-color: #009688;
}

.img_div_2>.table tr>td[class*=bg-],
.img_div_2>.table tr>th[class*=bg-] {
    border-right: 1px solid;
    border-color: #ff9800;
}

.img_div {
    border-radius: 5px;
    border: 2px solid #009688;
    padding: 0;
    margin: 5px;
    font-size: 16px;
}

.img_div_2 {
    border-radius: 5px;
    border: 2px solid #ff9800;
    padding: 0;
    margin: 5px;
    font-size: 16px;
}

.img_td {
    padding: 0px;
}

.number {
    font-size: 20px;
    font-weight: bold;
    text-align: left;
    padding: 3px
}

.pstm_number {
    font-size: 20px;
    font-weight: bold;
    text-align: left;
    padding: 3px 15px;
    /*position: absolute;*/
}

.double_tag {
    position: absolute;
    padding: 5px;
    background-color: rgba(0, 0, 0, 0.58);
    color: #FFF;
    /*  right: 0;
    bottom: 0;*/
}

.double_tag_coin_master_div {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 183px;
    left: 0;
    right: 0;
    text-align: center;
}

.double_tag_coin_master {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 23px;
    padding: 10px;
    background-color: rgba(0, 0, 0, 0.58);
    color: #FFF;
}

.auth .checkbox {
    margin-top: 0px;
}

.navbar-brand{
    padding: 0 20px;
}

.navbar-brand>img {
    margin-top: 2px;
    height: auto;
    width: 95px;
}

.table-responsive {
    overflow-x: auto;
    min-height: .01%;
}

.btn-float>span {
    display: block;
    padding-top: 5px;
    margin-bottom: -6px;
}

.btn-float.btn-float-lg i {
    font-size: 22px;
    padding: 0 5px;
}

.btn-float-export {
    padding: 8px 12px;
}


/*
tbody > tr > td:first-child {
    position: absolute;
    background: #FFF;
    width:100px ;
}*/

.blur {
    transition: all 350ms;
    moz-filter: blur(3px);
    -webkit-filter: blur(3px);
    -o-filter: blur(3px);
    -ms-filter: blur(3px);
    filter: blur(3px);
}

.bg-coffee-400 {
    background-color: #9c6a58;
    border-color: #9c6a58;
    color: #fff;
}

.bg-coffee-800 {
    background-color: #674134;
    border-color: #674134;
    color: #fff;
}

.DTFC_LeftWrapper,
.DTFC_RightWrapper {
    display: block;
}

#myModal_2 .form-group div[class*="col-lg-"]:not(.control-label)+div[class*="col-lg-"] {
    margin-top: 0px;
}

#myModal_1 .form-group {
    margin-bottom: 10px;
}

.search-input {
    margin-bottom: 5px;
}

.img_animation {
    -webkit-animation-duration: 12s;
    animation-delay: 3s;
    animation-iteration-count: infinite;
}

/* 房間底注用 */
.room_bet_box {
    display: -webkit-inline-box;
    display: -moz-inline-box;
    display: inline-block;
    position: absolute;
    background: #009688;
    color: white;
    text-align: left;
    right: 17px;
    top: 7px;
    padding: 8px;
}

.room_bet_box_bonus {
    display: -webkit-inline-box;
    display: -moz-inline-box;
    display: inline-block;
    position: absolute;
    background: #ff9800;
    color: white;
    text-align: left;
    right: 17px;
    top: 7px;
    padding: 8px;
}

/* u4 注單css */
.u4_outer_layer {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: start;
}

.u4_top_div {
    width: 100%;
    margin-top: 15px;
    display: flex;
    align-items: center;
}

.u4_room_id {
    width: 35%;
    color: white;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-left: 25px;
}

.u4_bet {
    width: 30%;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
}

.u4_special_rule {
    width: 35%;
}

.u4_card_div{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}

.u4_card {
    margin: 5px 2px;
    width: 47%;
}

.u4_card_top {
    display: flex;
    align-items: start;
    justify-content: space-between;
    padding-top: 7px;
    padding-left: 5px;
    padding-bottom: 5px;
}

.u4_member_top_img_div {
    display: flex;
    justify-content: left;
    align-items: center;
}

.u4_member_top_member_id_div {
    display: flex;
    justify-content: left;
    align-items: center;
    color: white;
    font-size: 12px;
}

.u4_member_rank {
    /* width: 20%; */
}

.u4_member_avatar {
    /* width: 20%; */
}

.member_remaining_amount {
    font-size: 12px;
    color: white;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.member_score_outer {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 17px;
}

.member_score {
    font-size: 12px;
    color: white;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-right: 5px;
}

.special_img_div {
    padding-bottom: 5px;
}

.u4_card_bottom {
    display: flex;
    align-items: center;
    justify-content: left;
}

.hand_card {
    width: 100%;
    min-height: 40px;
    margin-left: 5px;
}

@media (max-width: 545px) {
    #rank_img {
        width: 26px !important;
        height: 20px !important;
    }

    #avatar_img {
        width: 26px !important;
        height: 20px !important;
    }

    .u4_card_top {
        margin-top: 2px;
        padding-top: 0px;
        padding-bottom: 0px;
        align-items: start;
        /* justify-content: space-evenly; */
        justify-content: center;
    }

    .u4_member_top_img_div {
        display: block;
        position: relative;
        left: 10px;
    }

    .member_score_outer {
        width: 100%;
        padding-top: 33px;
    }

    .member_score {
        display: inline-block;
        position: relative;
        margin-right: 0px;
        left: -15px;
    }

    .u4_member_top_member_id_div {
        width: 100%;
        display: inline-block;
        position: relative;
        left: 10px;
    }
}

@media (max-width: 374px) {
    .u4_member_top_img_div {
        left: 12px;
    }

    .u4_member_top_member_id_div {
        left: 12px;
    }

    .member_score {
        margin-right: 0px;
        left: -18px;
    }
}

#bacth_action_modal input.form-check-input{
    margin: 0 5px 0 10px;
}

#bacth_action_modal #games_menu, #bacth_action_modal #hosts_menu{
    width: 100%;
    height: 360px;
    overflow: auto;
    padding: 0;
}

/* game_maintenance 多選下拉選單與tag樣式 */
.checkbox-menu li label{
    display: block;
    padding: 3px 10px;
    clear: both;
    font-weight: normal;
    line-height: 1.42857143;
    color: #333;
    white-space: nowrap;
    margin:0;
    transition: background-color .4s ease;
}

#bacth_action_modal #input_search_games, #bacth_action_modal #input_search_hosts{
    border-right: 0;
    border-radius: 5px 0 0 0;
}

#bacth_action_modal .input-group-addon{
    background: transparent;
    color: #169bd5;
    cursor: pointer;
    border-radius: 0 5px 0 0;
}

#bacth_action_modal .bootstrap-tagsinput {
    border-radius: 0 0 5px 5px;
}

#bacth_action_modal .bootstrap-tagsinput input{
    height: 30px;
    padding: 0 8px 2px;
}

#bacth_action_modal .bootstrap-tagsinput .tag{
    width: 45%;
    text-align: left;
    border-radius: 15px;
}
/* 多選下拉選單樣式end */

/* game_maintenance 狀態啟用關閉樣式 */
.game_maintenance_table .switch {
    display: inline-block;
    height: 25px;
    position: relative;
    width: 50px;
}

.game_maintenance_table .switch input {
    /* opacity: 0; */
    width: 40px;
    height: 20px;
}

.game_maintenance_table .switch .slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    -webkit-transition: .4s;
    transition: .4s;
}

.game_maintenance_table .switch .slider:before {
    position: absolute;
    content: "";
    height: 21px;
    width: 21px;
    left: 2px;
    bottom: 2px;
    background-color: white;
    -webkit-transition: .4s;
    transition: .4s;
}

.game_maintenance_table .switch input:checked + .slider {
    background-color: #2196f3;
    box-shadow: inset 0px 0px 10px rgb(0 0 0 / 15%);
}

.game_maintenance_table .switch input:checked + .slider:before {
    -webkit-transform: translateX(26px);
    -ms-transform: translateX(26px);
    transform: translateX(26px);
}

.game_maintenance_table .switch .slider.round {
    border-radius: 34px;
}

.game_maintenance_table .switch .slider.round:before {
    border-radius: 50%;
}
/* game_maintenance 狀態啟用關閉樣式end */

.selected_games{
    width: 100%;
    height: 100px;
    border: 1px solid #e2e2e2;
    border-radius: 0 0 3px 3px;
}

/* 遊戲配置 棋牌 */
/*-- 外頁籤 --*/
.tab-content-outer {
    padding: 20px;
    background-color: #f2f2f2;
}
.tab-content-outer .baseSetting {
    background-color: #f2f2f2;
}
.tab-content-outer .subgameSetting {
    background-color: #fff;
}
.outer-tabs.nav-tabs {
    padding: 0;
    border: 0;
}
.outer-tabs.nav-tabs:before, .inner-tabs.nav-tabs:before {
    content: none;
}
.outer-tabs.nav-tabs > li, .inner-tabs.nav-tabs > li {
    float: left;
}
.outer-tabs .nav-item a {
    border-top-right-radius: 10px;
    border-top-left-radius: 10px;
    width: 100px;
    text-align: center;
    background-color: #37484f;
    color: #f2f2f2;
}
.outer-tabs .nav-item a, .outer-tabs .nav-item a:focus, .outer-tabs .nav-item a:not(.active):hover{
    background-color: #f2f2f2;
    color: #333;
}
.outer-tabs .nav-item.active{
    border-top-right-radius: 15px;
    border-top-left-radius: 15px;
    background-color: #f2f2f2;
    color: #37484f;
    width: 100px;
}
.outer-tabs .nav-item.active a, .outer-tabs .nav-item.active:focus a{
    background-color: #37484f!important;
    color: #fff!important;
    border-left-color: transparent;
}
/*-- 外頁籤end --*/
/*-- 內頁籤 --*/
.subgameSetting.tab-pane .nav-tabs .nav-item{
    width: 16.6666%;
    text-align: center;
    background-color: #fff;
    color: #333;
}
.subgameSetting.tab-pane .nav-tabs .nav-item.active a,.subgameSetting.tab-pane .role_tabs .nav-item a{
    text-align: center;
    background-color: #fff;
    color: #333;
    width: 100%;
}
.subgameSetting.tab-pane .role_tabs .nav-item a{
    border-bottom-width: 1px;
    border-color: transparent;
    border-bottom-color: #797979;
    background-color: transparent;
}
.subgameSetting.tab-pane .role_tabs .nav-item.active a{
    border-bottom-width: 1px;
    border-color: transparent;
    border-bottom-color: #f44336;
    background-color: transparent;
}
.subgameSetting.tab-pane .role_tabs .nav-item a:hover{
    background-color: #e5e5e5;
    color: #333;
}
/*-- 內頁籤end --*/
.tab-content-inner {
    padding: 20px;
    background-color: #fff;
}
.modify_modal .panel-heading{
    background-color: #fff;
}
.room_switch_area {
    background-color: #f8f8f8;
    padding: 1px 5px;
    border-radius: 20px;
}
.modify_modal .icon-question4{
    font-size: 12px;
    color: #169bd5;
}
/* 棋牌 廳房開關樣式 */
.room_switch_area .switch {
    display: inline-block;
    height: 19px;
    position: relative;
    width: 35px;
    top: 3px;
}

.room_switch_area .switch input {
    /* opacity: 0; */
    width: 25px;
    height: 10px;
}

.room_switch_area .switch .slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    -webkit-transition: .4s;
    transition: .4s;
}

.room_switch_area .switch .slider:before {
    position: absolute;
    content: "";
    height: 15px;
    width: 15px;
    left: 2px;
    bottom: 2px;
    background-color: white;
    -webkit-transition: .4s;
    transition: .4s;
}

.room_switch_area .switch input:checked + .slider {
    background-color: #b6d99d;
    box-shadow: inset 0px 0px 10px rgb(0 0 0 / 15%);
}

.room_switch_area .switch input:checked + .slider:before {
    -webkit-transform: translateX(16px);
    -ms-transform: translateX(16px);
    transform: translateX(16px);
}

.room_switch_area .switch .slider.round {
    border-radius: 34px;
}

.room_switch_area .switch .slider.round:before {
    border-radius: 50%;
}
/* 棋牌 廳房開關樣式end */

/* 棋牌 底色標籤樣式 */
.subgameSetting .bg-blue-800 {
    border-radius: 3px;
}
.subgameSetting .bg-orange-400 {
    padding: 0px 7px 2px 5px;
    margin-right: 5px;
    line-height: 2;
    border-radius: 3px;
}
/* 棋牌 底色標籤樣式end */

/* 拉密設定 */
.dummy_game_setting_table .bg-green-400, .dummy_game_setting_table .bg-orange-400 {
    padding: 0px 7px 2px 5px;
    margin-right: 5px;
    line-height: 2;
    border-radius: 3px;
}
/* 拉密設定 */

/* 遊戲配置 棋牌end */


@keyframes img_run_0 {
    0% {
        left: 0px;
        top: 0px;
    }
    2% {
        left: 47px;
        top: 0px;
    }
    4% {
        left: 97px;
        top: 0px;
    }
    6% {
        left: 145px;
        top: 0px;
    }
    8% {
        left: 145px;
        top: 35px;
    }
    10% {
        left: 145px;
        top: 70px;
    }
    12% {
        left: 145px;
        top: 105px;
    }
    50% {
        left: 145px;
        top: 105px;
    }
    52% {
        left: 97px;
        top: 105px;
    }
    54% {
        top: 105px;
        left: 47px;
    }
    56% {
        top: 105px;
        left: 0px;
    }
    58% {
        left: 0px;
        top: 70px;
    }
    60% {
        left: 0px;
        top: 35px;
    }
    62% {
        left: 0px;
        top: 0px;
    }
    100% {
        left: 0px;
        top: 0px;
    }
}

@keyframes img_run_1 {
    0% {
        left: 0px;
        top: 0px;
    }
    2% {
        left: 47px;
        top: 0px;
    }
    4% {
        left: 95px;
        top: 0px;
    }
    6% {
        left: 95px;
        top: 35px;
    }
    8% {
        left: 95px;
        top: 70px;
    }
    10% {
        left: 95px;
        top: 105px;
    }
    12% {
        left: 47px;
        top: 105px;
    }
    50% {
        left: 47px;
        top: 105px;
    }
    52% {
        left: 0px;
        top: 105px;
    }
    54% {
        top: 105px;
        left: -48px;
    }
    56% {
        top: 70px;
        left: -48px;
    }
    58% {
        left: -48px;
        top: 35px;
    }
    60% {
        left: -48px;
        top: 0px;
    }
    62% {
        left: 0px;
        top: 0px;
    }
    100% {
        left: 0px;
        top: 0px;
    }
}

@keyframes img_run_2 {
    0% {
        left: 0px;
        top: 0px;
    }
    2% {
        left: 47px;
        top: 0px;
    }
    4% {
        left: 47px;
        top: 35px;
    }
    6% {
        left: 47px;
        top: 70px;
    }
    8% {
        left: 47px;
        top: 105px;
    }
    10% {
        left: 0px;
        top: 105px;
    }
    12% {
        left: -48px;
        top: 105px;
    }
    50% {
        left: -48px;
        top: 105px;
    }
    52% {
        left: -95px;
        top: 105px;
    }
    54% {
        top: 70px;
        left: -95px;
    }
    56% {
        top: 35px;
        left: -95px;
    }
    58% {
        left: -95px;
        top: 0px;
    }
    60% {
        left: -48px;
        top: 0px;
    }
    62% {
        left: 0px;
        top: 0px;
    }
    100% {
        left: 0px;
        top: 0px;
    }
}

@keyframes img_run_3 {
    0% {
        left: 0px;
        top: 0px;
    }
    2% {
        left: 0px;
        top: 35px;
    }
    4% {
        left: 0px;
        top: 70px;
    }
    6% {
        left: 0px;
        top: 105px;
    }
    8% {
        left: -47px;
        top: 105px;
    }
    10% {
        left: -96px;
        top: 105px;
    }
    12% {
        left: -144px;
        top: 105px;
    }
    50% {
        left: -144px;
        top: 105px;
    }
    52% {
        left: -144px;
        top: 70px;
    }
    54% {
        top: 35px;
        left: -144px;
    }
    56% {
        top: 0px;
        left: -144px;
    }
    58% {
        left: -96px;
        top: 0px;
    }
    60% {
        left: -47px;
        top: 0px;
    }
    62% {
        left: 0px;
        top: 0px;
    }
    100% {
        left: 0px;
        top: 0px;
    }
}

@keyframes img_run_4 {
    0% {
        left: 0px;
        top: -5px;
    }
    2% {
        left: 0px;
        top: -40px;
    }
    4% {
        left: 48px;
        top: -40px;
    }
    6% {
        left: 96px;
        top: -40px;
    }
    8% {
        left: 144px;
        top: -40px;
    }
    10% {
        left: 144px;
        top: 0px;
    }
    12% {
        left: 144px;
        top: 30px;
    }
    50% {
        left: 144px;
        top: 30px;
    }
    52% {
        left: 144px;
        top: 65px;
    }
    54% {
        top: 65px;
        left: 96px;
    }
    56% {
        top: 65px;
        left: 48px;
    }
    58% {
        left: 0px;
        top: 65px;
    }
    60% {
        left: 0px;
        top: 30px;
    }
    62% {
        left: 0px;
        top: -5px;
    }
    100% {
        left: 0px;
        top: -5px;
    }
}

@keyframes img_run_5 {
    0% {
        left: 0px;
        top: -5px;
    }
    6% {
        left: 47px;
        top: -5px;
    }
    12% {
        left: 47px;
        top: 30px;
    }
    50% {
        left: 47px;
        top: 30px;
    }
    56% {
        left: 0px;
        top: 30px;
    }
    62% {
        left: 0px;
        top: -5px;
    }
    100% {
        left: 0px;
        top: -5px;
    }
}

@keyframes img_run_6 {
    0% {
        left: 0px;
        top: -5px;
    }
    6% {
        left: 0px;
        top: 30px;
    }
    12% {
        left: -47px;
        top: 30px;
    }
    50% {
        left: -47px;
        top: 30px;
    }
    56% {
        left: -47px;
        top: -5px;
    }
    62% {
        left: 0px;
        top: -5px;
    }
    100% {
        left: 0px;
        top: -5px;
    }
}

@keyframes img_run_7 {
    0% {
        left: 0px;
        top: -5px;
    }
    2% {
        left: 0px;
        top: 30px;
    }
    4% {
        left: 0px;
        top: 65px;
    }
    6% {
        left: -47px;
        top: 65px;
    }
    8% {
        left: -95px;
        top: 65px;
    }
    10% {
        left: -144px;
        top: 65px;
    }
    12% {
        left: -144px;
        top: 30px;
    }
    50% {
        left: -144px;
        top: 30px;
    }
    52% {
        left: -144px;
        top: -5px;
    }
    54% {
        left: -144px;
        top: -40px;
    }
    56% {
        left: -95px;
        top: -40px;
    }
    58% {
        left: -47px;
        top: -40px;
    }
    60% {
        left: 0px;
        top: -40px;
    }
    62% {
        left: 0px;
        top: -5px;
    }
    100% {
        left: 0px;
        top: -5px;
    }
}

@keyframes img_run_8 {
    0% {
        left: 0px;
        top: -10px;
    }
    2% {
        left: 0px;
        top: -45px;
    }
    4% {
        left: 0px;
        top: -80px;
    }
    6% {
        left: 48px;
        top: -80px;
    }
    8% {
        left: 95px;
        top: -80px;
    }
    10% {
        left: 144px;
        top: -80px;
    }
    12% {
        left: 144px;
        top: -45px;
    }
    50% {
        left: 144px;
        top: -45px;
    }
    52% {
        left: 144px;
        top: -10px;
    }
    54% {
        left: 144px;
        top: 25px;
    }
    56% {
        left: 95px;
        top: 25px;
    }
    58% {
        left: 48px;
        top: 25px;
    }
    60% {
        left: 0px;
        top: 25px;
    }
    62% {
        left: 0px;
        top: -10px;
    }
    100% {
        left: 0px;
        top: -10px;
    }
}

@keyframes img_run_9 {
    0% {
        left: 0px;
        top: -10px;
    }
    6% {
        left: 0px;
        top: -45px;
    }
    12% {
        top: -45px;
        left: 47px;
    }
    50% {
        top: -45px;
        left: 47px;
    }
    56% {
        top: -10px;
        left: 47px;
    }
    62% {
        left: 0px;
        top: -10px;
    }
    100% {
        left: 0px;
        top: -10px;
    }
}

@keyframes img_run_10 {
    0% {
        left: 0px;
        top: -10px;
    }
    6% {
        left: -47px;
        top: -10px;
    }
    12% {
        top: -45px;
        left: -47px;
    }
    50% {
        top: -45px;
        left: -47px;
    }
    56% {
        top: -45px;
        left: 0px;
    }
    62% {
        left: 0px;
        top: -10px;
    }
    100% {
        left: 0px;
        top: -10px;
    }
}

@keyframes img_run_11 {
    0% {
        left: 0px;
        top: -10px;
    }
    2% {
        left: 0px;
        top: 25px;
    }
    4% {
        left: -48px;
        top: 25px;
    }
    6% {
        left: -95px;
        top: 25px;
    }
    8% {
        left: -144px;
        top: 25px;
    }
    10% {
        left: -144px;
        top: -10px;
    }
    12% {
        left: -144px;
        top: -45px;
    }
    50% {
        left: -144px;
        top: -45px;
    }
    52% {
        left: -144px;
        top: -80px;
    }
    54% {
        left: -95px;
        top: -80px;
    }
    56% {
        left: -48px;
        top: -80px;
    }
    58% {
        left: 0px;
        top: -80px;
    }
    60% {
        left: 0px;
        top: -45px;
    }
    62% {
        left: 0px;
        top: -10px;
    }
    100% {
        left: 0px;
        top: -10px;
    }
}

@keyframes img_run_12 {
    0% {
        left: 0px;
        top: -15px;
    }
    2% {
        left: 0px;
        top: -50px;
    }
    4% {
        left: 0px;
        top: -85px;
    }
    6% {
        left: 0px;
        top: -120px;
    }
    8% {
        left: 48px;
        top: -120px;
    }
    10% {
        left: 95px;
        top: -120px;
    }
    12% {
        left: 144px;
        top: -120px;
    }
    50% {
        left: 144px;
        top: -120px;
    }
    52% {
        left: 144px;
        top: -85px;
    }
    54% {
        left: 144px;
        top: -50px;
    }
    56% {
        left: 144px;
        top: -15px;
    }
    58% {
        left: 95px;
        top: -15px;
    }
    60% {
        left: 48px;
        top: -15px;
    }
    62% {
        left: 0px;
        top: -15px;
    }
    100% {
        left: 0px;
        top: -15px;
    }
}

@keyframes img_run_13 {
    0% {
        left: 0px;
        top: -15px;
    }
    2% {
        left: -48px;
        top: -15px;
    }
    4% {
        left: -48px;
        top: -50px;
    }
    6% {
        left: -48px;
        top: -85px;
    }
    8% {
        left: -48px;
        top: -120px;
    }
    10% {
        left: 0px;
        top: -120px;
    }
    12% {
        left: 48px;
        top: -120px;
    }
    50% {
        left: 48px;
        top: -120px;
    }
    52% {
        left: 95px;
        top: -120px;
    }
    54% {
        left: 95px;
        top: -85px;
    }
    56% {
        left: 95px;
        top: -50px;
    }
    58% {
        left: 95px;
        top: -15px;
    }
    60% {
        left: 48px;
        top: -15px;
    }
    62% {
        left: 0px;
        top: -15px;
    }
    100% {
        left: 0px;
        top: -15px;
    }
}

@keyframes img_run_14 {
    0% {
        left: 0px;
        top: -15px;
    }
    2% {
        left: -48px;
        top: -15px;
    }
    4% {
        left: -95px;
        top: -15px;
    }
    6% {
        left: -95px;
        top: -50px;
    }
    8% {
        left: -95px;
        top: -85px;
    }
    10% {
        left: -95px;
        top: -120px;
    }
    12% {
        left: -48px;
        top: -120px;
    }
    50% {
        left: -48px;
        top: -120px;
    }
    52% {
        left: 0px;
        top: -120px;
    }
    54% {
        left: 48px;
        top: -120px;
    }
    56% {
        left: 48px;
        top: -85px;
    }
    58% {
        left: 48px;
        top: -50px;
    }
    60% {
        left: 48px;
        top: -15px;
    }
    62% {
        left: 0px;
        top: -15px;
    }
    100% {
        left: 0px;
        top: -15px;
    }
}

@keyframes img_run_15 {
    0% {
        left: 0px;
        top: -15px;
    }
    2% {
        left: -48px;
        top: -15px;
    }
    4% {
        left: -95px;
        top: -15px;
    }
    6% {
        left: -144px;
        top: -15px;
    }
    8% {
        left: -144px;
        top: -50px;
    }
    10% {
        left: -144px;
        top: -85px;
    }
    12% {
        left: -144px;
        top: -120px;
    }
    50% {
        left: -144px;
        top: -120px;
    }
    52% {
        left: -95px;
        top: -120px;
    }
    54% {
        left: -48px;
        top: -120px;
    }
    56% {
        left: 0px;
        top: -120px;
    }
    58% {
        left: 0px;
        top: -85px;
    }
    60% {
        left: 0px;
        top: -50px;
    }
    62% {
        left: 0px;
        top: -15px;
    }
    100% {
        left: 0px;
        top: -15px;
    }
}

@media (max-width: 768px) {
    .date_btn {
        margin: 5px;
    }
    .table-responsive {
        -webkit-overflow-scrolling: touch;
    }
    .table>thead>tr>th,
    .table>tbody>tr>th,
    .table>tfoot>tr>th,
    .table>thead>tr>td,
    .table>tbody>tr>td,
    .table>tfoot>tr>td {
        padding: 12px 8px;
        font-size: 12px;
    }
    #export {
        display: none;
    }
    #export_mobile {
        display: block;
    }
}

@media (min-width: 769px) {
    .modal-lg {
        width: 90%;
        margin: 0px auto;
    }
    .date_btn {
        margin: 20px;
    }
    .DTFC_LeftWrapper,
    .DTFC_RightWrapper {
        display: none;
    }
    #export {
        display: block;
    }
    #export_mobile {
        display: none;
    }
}

@media (min-width: 1025px) {
    .modal-lg {
        width: 80%;
    }
    /*遊戲配置 棋牌設定使用*/
    #modify_modal_89 .modal-lg, #modify_modal_52 .modal-lg, #modify_modal_u4 .modal-lg, #modify_modal_fsc .modal-lg{
        width: 1000px;
    }
    .date_btn {
        margin: 10px;
    }
}

@-webkit-keyframes example {
    0% {
        left: calc(50% - 75px);
        top: 40px;
    }
    25% {
        left: calc(50% + 25px);
        top: 40px;
    }
    50% {
        left: calc(50% + 25px);
        top: 125px;
    }
    75% {
        left: calc(50% - 75px);
        top: 125px;
    }
    100% {
        left: calc(50% - 75px);
        top: 40px;
    }
}

@keyframes example {
    0% {
        left: calc(50% - 75px);
        top: 40px;
    }
    25% {
        left: calc(50% + 25px);
        top: 40px;
    }
    50% {
        left: calc(50% + 25px);
        top: 125px;
    }
    75% {
        left: calc(50% - 75px);
        top: 125px;
    }
    100% {
        left: calc(50% - 75px);
        top: 40px;
    }
}

@-webkit-keyframes example2 {
    0% {
        left: calc(50% - 25px);
        top: 40px;
    }
    25% {
        left: calc(50% + 25px);
        top: 85px;
    }
    50% {
        left: calc(50% - 25px);
        top: 125px;
    }
    75% {
        left: calc(50% - 75px);
        top: 85px;
    }
    100% {
        left: calc(50% - 25px);
        top: 40px;
    }
}

@keyframes example2 {
    0% {
        left: calc(50% - 25px);
        top: 40px;
    }
    25% {
        left: calc(50% + 25px);
        top: 85px;
    }
    50% {
        left: calc(50% - 25px);
        top: 125px;
    }
    75% {
        left: calc(50% - 75px);
        top: 85px;
    }
    100% {
        left: calc(50% - 25px);
        top: 40px;
    }
}

@-webkit-keyframes example3 {
    0% {
        left: calc(50% + 25px);
        top: 40px;
    }
    25% {
        left: calc(50% + 25px);
        top: 125px;
    }
    50% {
        left: calc(50% - 75px);
        top: 125px;
    }
    75% {
        left: calc(50% - 75px);
        top: 40px;
    }
    100% {
        left: calc(50% + 25px);
        top: 40px;
    }
}

@keyframes example3 {
    0% {
        left: calc(50% + 25px);
        top: 40px;
    }
    25% {
        left: calc(50% + 25px);
        top: 125px;
    }
    50% {
        left: calc(50% - 75px);
        top: 125px;
    }
    75% {
        left: calc(50% - 75px);
        top: 40px;
    }
    100% {
        left: calc(50% + 25px);
        top: 40px;
    }
}

@-webkit-keyframes example4 {
    0% {
        left: calc(50% + 25px);
        top: 85px;
    }
    25% {
        left: calc(50% - 25px);
        top: 125px;
    }
    50% {
        left: calc(50% - 75px);
        top: 85px;
    }
    75% {
        left: calc(50% - 25px);
        top: 40px;
    }
    100% {
        left: calc(50% + 25px);
        top: 85px;
    }
}

@keyframes example4 {
    0% {
        left: calc(50% + 25px);
        top: 85px;
    }
    25% {
        left: calc(50% - 25px);
        top: 125px;
    }
    50% {
        left: calc(50% - 75px);
        top: 85px;
    }
    75% {
        left: calc(50% - 25px);
        top: 40px;
    }
    100% {
        left: calc(50% + 25px);
        top: 85px;
    }
}

@-webkit-keyframes example5 {
    0% {
        left: calc(50% + 25px);
        top: 125px;
    }
    25% {
        left: calc(50% - 75px);
        top: 125px;
    }
    50% {
        left: calc(50% - 75px);
        top: 40px;
    }
    75% {
        left: calc(50% + 25px);
        top: 40px;
    }
    100% {
        left: calc(50% + 25px);
        top: 125px;
    }
}

@keyframes example5 {
    0% {
        left: calc(50% + 25px);
        top: 125px;
    }
    25% {
        left: calc(50% - 75px);
        top: 125px;
    }
    50% {
        left: calc(50% - 75px);
        top: 40px;
    }
    75% {
        left: calc(50% + 25px);
        top: 40px;
    }
    100% {
        left: calc(50% + 25px);
        top: 125px;
    }
}

@-webkit-keyframes example6 {
    0% {
        left: calc(50% - 25px);
        top: 125px;
    }
    25% {
        left: calc(50% - 75px);
        top: 85px;
    }
    50% {
        left: calc(50% - 25px);
        top: 40px;
    }
    75% {
        left: calc(50% + 25px);
        top: 85px;
    }
    100% {
        left: calc(50% - 25px);
        top: 125px;
    }
}

@keyframes example6 {
    0% {
        left: calc(50% - 25px);
        top: 125px;
    }
    25% {
        left: calc(50% - 75px);
        top: 85px;
    }
    50% {
        left: calc(50% - 25px);
        top: 40px;
    }
    75% {
        left: calc(50% + 25px);
        top: 85px;
    }
    100% {
        left: calc(50% - 25px);
        top: 125px;
    }
}

@-webkit-keyframes example7 {
    0% {
        left: calc(50% - 75px);
        top: 125px;
    }
    25% {
        left: calc(50% - 75px);
        top: 40px;
    }
    50% {
        left: calc(50% + 25px);
        top: 40px;
    }
    75% {
        left: calc(50% + 25px);
        top: 125px;
    }
    100% {
        left: calc(50% - 75px);
        top: 125px;
    }
}

@keyframes example7 {
    0% {
        left: calc(50% - 75px);
        top: 125px;
    }
    25% {
        left: calc(50% - 75px);
        top: 40px;
    }
    50% {
        left: calc(50% + 25px);
        top: 40px;
    }
    75% {
        left: calc(50% + 25px);
        top: 125px;
    }
    100% {
        left: calc(50% - 75px);
        top: 125px;
    }
}

@-webkit-keyframes example8 {
    0% {
        left: calc(50% - 75px);
        top: 85px;
    }
    25% {
        left: calc(50% - 25px);
        top: 40px;
    }
    50% {
        left: calc(50% + 25px);
        top: 85px;
    }
    75% {
        left: calc(50% - 25px);
        top: 125px;
    }
    100% {
        left: calc(50% - 75px);
        top: 85px;
    }
}

@keyframes example8 {
    0% {
        left: calc(50% - 75px);
        top: 85px;
    }
    25% {
        left: calc(50% - 25px);
        top: 40px;
    }
    50% {
        left: calc(50% + 25px);
        top: 85px;
    }
    75% {
        left: calc(50% - 25px);
        top: 125px;
    }
    100% {
        left: calc(50% - 75px);
        top: 85px;
    }
}


/*@-webkit-keyframes example {
    0%   {left:75px; top:40px;}
    25%  {left:185px; top:40px;}
    50%  {left:185px; top:140px;}
    75%  {left:75px; top:140px;}
    100% {left:75px; top:40px;}
}


@keyframes example {
    0%   {left:75px; top:40px;}
    25%  {left:185px; top:40px;}
    50%  {left:185px; top:140px;}
    75%  {left:75px; top:140px;}
    100% {left:75px; top:40px;}
}

@-webkit-keyframes example2 {
    0%   {left:130px; top:40px;}
    25%  {left:185px; top:90px;}
    50%  {left:130px; top:140px;}
    75%  {left:75px; top:90px;}
    100% {left:130px; top:40px;}
}


@keyframes example2 {
    0%   {left:130px; top:40px;}
    25%  {left:185px; top:90px;}
    50%  {left:130px; top:140px;}
    75%  {left:75px; top:90px;}
    100% {left:130px; top:40px;}
}

@-webkit-keyframes example3 {
    0%   {left:185px; top:40px;}
    25%  {left:185px; top:140px;}
    50%  {left:75px; top:140px;}
    75%  {left:75px; top:40px;}
    100% {left:185px; top:40px;}
}


@keyframes example3 {
    0%   {left:185px; top:40px;}
    25%  {left:185px; top:140px;}
    50%  {left:75px; top:140px;}
    75%  {left:75px; top:40px;}
    100% {left:185px; top:40px;}
}

@-webkit-keyframes example4 {
    0%   {left:130px; top:40px;}
    25%  {left:185px; top:90px;}
    50%  {left:130px; top:140px;}
    75%  {left:75px; top:90px;}
    100% {left:130px; top:40px;}
}


@keyframes example4 {
    0%   {left:185px; top:90px;}
    25%  {left:130px; top:140px;}
    50%  {left:75px; top:90px;}
    75%  {left:130px; top:40px;}
    100% {left:185px; top:90px;}
}

@-webkit-keyframes example5 {
    0%   {left:185px; top:140px;}
    25%  {left:75px; top:140px;}
    50%  {left:75px; top:40px;}
    75%  {left:185px; top:40px;}
    100% {left:185px; top:140px;}
}

@keyframes example5 {
    0%   {left:185px; top:140px;}
    25%  {left:75px; top:140px;}
    50%  {left:75px; top:40px;}
    75%  {left:185px; top:40px;}
    100% {left:185px; top:140px;}
}

@-webkit-keyframes example6 {
    0%   {left:130px; top:140px;}
    25%  {left:75px; top:90px;}
    50%  {left:130px; top:40px;}
    75%  {left:185px; top:90px;}
    100% {left:130px; top:140px;}
}

@keyframes example6 {
    0%   {left:130px; top:140px;}
    25%  {left:75px; top:90px;}
    50%  {left:130px; top:40px;}
    75%  {left:185px; top:90px;}
    100% {left:130px; top:140px;}
}

@-webkit-keyframes example7 {
    0%   {left:75px; top:140px;}
    25%  {left:75px; top:40px;}
    50%  {left:185px; top:40px;}
    75%  {left:185px; top:140px;}
    100% {left:75px; top:140px;}
}

@keyframes example7 {
    0%   {left:75px; top:140px;}
    25%  {left:75px; top:40px;}
    50%  {left:185px; top:40px;}
    75%  {left:185px; top:140px;}
    100% {left:75px; top:140px;}
}

@-webkit-keyframes example8 {
    0%   {left:75px; top:90px;}
    25%  {left:130px; top:40px;}
    50%  {left:185px; top:90px;}
    75%  {left:130px; top:140px;}
    100% {left:75px; top:90px;}
}

@keyframes example8 {
    0%   {left:75px; top:90px;}
    25%  {left:130px; top:40px;}
    50%  {left:185px; top:90px;}
    75%  {left:130px; top:140px;}
    100% {left:75px; top:90px;}
}*/