@charset "UTF-8";
/*********** header 頁首 ***********/
.header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 3.5rem;
    background: #dcedf6;
}
.top_logo {
    width: 10.5rem;
    height: 2.5rem;
}
/* 登入前 */
.login_box {
    display: flex;
    align-items: center;
}
.login_before,
.login_after {
    display: flex;
    align-items: center;
}
/* 登入後 */
.login_account,
.login_balance {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    min-width: 14rem;
    height: 20px;
    margin: 0 10px 0 0;
    padding: 10px 10px 10px 0;
    font: normal normal 1rem/1.2rem "Century Gothic", Arial, "Microsoft JhengHei", "PMingLiU", sans-serif;
    border: 1px solid #5f7888;
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    -ms-border-radius: 50px;
    -o-border-radius: 50px;
    border-radius: 50px;
}
.login_balance {
    justify-content: space-between;
    color: #666;
    background: #fff;
    border: 1px solid #fff;
}
.login_account .avatar_box,
.login_balance .name_box {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    min-width: 6rem;
    height: 100%;
    padding: 10px 10px 10px 5px;
    margin: 0 5px 0 0;
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    -ms-border-radius: 50px;
    -o-border-radius: 50px;
    border-radius: 50px;
}
.login_account .avatar_box {
    color: #fff;
    background: #777;
}
/* .login_account .username {
    color: #fff;
} */
.login_balance .balance_box {
    display: flex;
    align-items: center;
}
/* 提示訊息框 */
.btn_userinfo,
.btn_sound,
.btn_logout {
    position: relative;
}
.tip_tl {
    display: none;
    position: absolute;
    top: 30px;
    left: -20px;
    width: max-content;
    margin: 10px 0 0 0;
    padding: 6px;
    color: #fff;
    word-break: break-word;
    font: normal normal 13px/15px "Century Gothic", Arial, "Microsoft JhengHei", "PMingLiU", sans-serif;
    background: rgba(0,0,0,.5);
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
    border-radius: 5px;
    z-index: 10;
}
.tip_tl:after {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    top: -10px;
    left: 15px;
    border-width: 0 0 10px 10px;
    border-style: solid;
    border-color: transparent transparent rgba(0,0,0,.5) transparent;
}
.btn_userinfo:hover .tip_tl,
.btn_userinfo:active .tip_tl,
.btn_userinfo:focus .tip_tl,
.btn_sound:hover .tip_tl,
.btn_sound:active .tip_tl,
.btn_sound:focus .tip_tl,
.btn_logout:hover .tip_tl,
.btn_logout:active .tip_tl,
.btn_logout:focus .tip_tl,
.login_after > a:checked .tip_tl {
    display: block;
}
.login_box .login_icon {
    width: 35px;
    margin-right: 5px;
}
.msg_red_point {
    position: absolute;
    top: -8px;
    right: -2px;
    width: 20px;
    height: 20px;
    padding: 1px;
    color: #fff;
    text-align: center;
    font: normal normal 12px/22px "Century Gothic", Arial, "Microsoft JhengHei", "PMingLiU", sans-serif;
    background: red;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%;
}
/* 語系 */
.login_box .btn_superbig,
.login_box .btn_big,
.header_language {
    margin-left: 5px;
}
.header_language {
    position: relative;
    cursor: pointer;
}
.language_btn {
    background: transparent;
    border: 0;
}
.language_nav {
    display: none;
    position: absolute;
    top: 50px;
    min-width: 100px;
    background: #fff;
    -webkit-border-radius:5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
    border-radius: 5px;
    -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, .2);
    -moz-box-shadow: 0 0 10px rgba(0, 0, 0, .2);
    -o-box-shadow: 0 0 10px rgba(0, 0, 0, .2);
    box-shadow: 0 0 10px rgba(0, 0, 0, .2);
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    z-index: 30;
}
.nav_layer {
    padding: .2rem .5rem;
    font: normal normal 1rem/1rem "Century Gothic", Arial, "Microsoft JhengHei", "PMingLiU", sans-serif;
    border-bottom: 1px solid #eee;
}
.nav_layer:last-child {
    border-bottom: 0;
}
.nav_layer:hover {
    color: #fff;
    background-color: #7da8bf;
    -webkit-transition: all .2s ease;
    -moz-transition: all .2s ease;
    -ms-transition: all .2s ease;
    -o-transition: all .2s ease;
    transition: all .2s ease;
}
.nav_layer:hover a {
    color: #fff;
}
.header_language img.nav_flag {
    width: 30px;
    margin: 0 5px;
}
.header_language .lang_icon,
.header_language .icon_tw,
.header_language .icon_cn,
.header_language .icon_vn,
.header_language .icon_th,
.header_language .icon_us {
    display: inline-block;
    width: 35px;
    height: 35px;
    margin-right: .5rem;
}
.lang_icon {
    background: url(../images/index/lang_icon.png?2023102401) no-repeat;
    background-size: 100% auto;
}
.icon_tw {
    background: url(../images/index/taiwan.png?2023102401) no-repeat;
    background-size: 100% auto;
}
.icon_cn {
    background: url(../images/index/china.png?2023102401) no-repeat;
    background-size: 100% auto;
}
.icon_vn {
    background: url(../images/index/vietnam.png?2023102401) no-repeat;
    background-size: 100% auto;
}
.icon_th {
    background: url(../images/index/thailand.png?2023102401) no-repeat;
    background-size: 100% auto;
}
.icon_us {
    background: url(../images/index/usa.png?2023102401) no-repeat;
    background-size: 100% auto;
}
/* 時間 */
.timeset {
    width: 135px;
    font: normal bold 16px/18px "Century Gothic", Arial, "Microsoft JhengHei", "PMingLiU", sans-serif;
}
/*********** footer 頁尾 ***********/
.footer {
    margin-top: 2rem;
    background: #eaf8ff;
}
.license_box {
    margin: 0 auto;
    text-align: center;
    background: #dcedf6;
}
.license_title {
    text-align: center;
    font: normal bold 1.4rem/3.5rem "Century Gothic", Arial, "Microsoft JhengHei", "PMingLiU", sans-serif;
}
.license_logo {
    padding: 1rem;
}
.webtree_box {
    display: flex;
    justify-content: space-evenly;
    align-items: flex-start;
    margin: 0 auto;
    padding: 2rem 0;
}
/* .webtree_box a {
    color: #fff;
} */
.webtree_box .tree_top {
    position: relative;
    width: 100%;
    padding-bottom: 5px;
    margin-bottom: 5px;
    font: normal bold 1rem/1.1rem "Century Gothic", Arial, "Microsoft JhengHei", "PMingLiU", sans-serif;
    border-bottom: 3px solid #d6d6d6;
}
.webtree_box .tree_top:before {
    content: "";
    position: absolute;
    bottom: -3px;
    width: 50px;
    border-bottom: 3px solid #ffc107;
}
.webtree_box .cell {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: flex-start;
    width: 17%;
}
.webtree_box .cell.games {
    width: 22%;
}
.webtree_box .cell.rules {
    width: 24%;
}
.webtree_box .cell.service {
    width: 30%;
}
.webtree_box .cell.games .tree_bottom {
    width: calc((100% - 10%) / 2);
}
.webtree_box .tree_bottom {
    display: flex;
    flex-direction: column;
    line-height: 1.6rem;
}
.webtree_box .tree_bottom li {
    margin-bottom: 10px;
    font: normal normal .85rem/1rem "Century Gothic", Arial, "Microsoft JhengHei", "PMingLiU", sans-serif;
}
.webtree_box .tree_bottom li:last-of-type {
    margin-bottom: 0;
}
.no18 {
    width: 108px;
    height: 50px;
}
.webtree_box .no18_text {
    text-align: justify;
}
.browser_set {
    position: relative;
}
.browser_text {
    display: inline-block;
    margin-right: 5px;
    vertical-align: middle;
}
.popup_browser {
    display: inline-block;
    text-align: center;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -o-border-radius: 5px;
    border-radius: 5px;
    transition: all 0.3s ease-out;
    vertical-align: middle;
}
.popup_browser .chrome,
.popup_browser .firefox {
    display: inline-block;
    width: 30px;
    height: 30px;
    margin: 0 1px 0 0;
    vertical-align: middle;
    cursor: pointer;
}
.chrome {
    background: url(../images/index/hot_browser.png?23080101) no-repeat 0 -30px;
}
.firefox {
    background: url(../images/index/hot_browser.png?23080101) no-repeat -30px -30px;
}
.chrome:hover {
    background: url(../images/index/hot_browser.png?23080101) no-repeat 0 0;
}
.firefox:hover {
    background: url(../images/index/hot_browser.png?23080101) no-repeat -30px 0px;
}
/*********** 右側欄-浮動客服 ***********/
.right_bar {
    position: fixed;
    right: 0;
    top: 50%;
    min-width: 85px;
    min-height: 530px;
    padding: 10px 5px 0 10px;
    background-color: #f1f7fb;
    box-shadow: -2px 2px 3px rgba(0,0,0,.15);
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
    border-radius: 5px;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
    -webkit-transition: transform 0.3s ease;
    -moz-transition: transform 0.3s ease;
    -ms-transition: transform 0.3s ease;
    -o-transition: transform 0.3s ease;
    transition: transform 0.3s ease;
    overflow: visible;
    z-index: 5;
}
.rbar_item {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    max-width: 80px;
    padding: 5px;
    margin: 0 auto;
    text-align: center;
    font: normal normal 1rem/1.2rem "Century Gothic", Arial, "Microsoft JhengHei", "PMingLiU", sans-serif;
    cursor: pointer;
}
.rbar_icon {
    max-width: 70px;
    margin-bottom: 5px;
}
.qrcode_box {
    display: none;
    position: absolute;
    left: -10px;
    top: -10px;
    padding: 20px;
    width: 10rem;
    /* height: 10rem; */
    background-color: #f1f7fb;
    box-shadow: -2px 2px 3px rgba(0,0,0,.15);
    -webkit-border-radius: 5px 0 0 5px;
    -moz-border-radius: 5px 0 0 5px;
    -ms-border-radius: 5px 0 0 5px;
    -o-border-radius: 5px 0 0 5px;
    border-radius: 5px 0 0 5px;
    -webkit-transform: translateX(-100%);
    -moz-transform: translateX(-100%);
    -ms-transform: translateX(-100%);
    -o-transform: translateX(-100%);
    transform: translateX(-100%);
}
.rbar_item:hover .qrcode_box,
.rbar_item:active .qrcode_box,
.rbar_item:focus .qrcode_box {
    display: block;
}
.right_bar .arrow {
    position: absolute;
    top: 105%;
    left: 35%;
    width: 30px;
    height: 30px;
    color: #fff;
    font-size: 16px;
    font-weight: bold;
    background-color: #5f7888;
    box-shadow: -2px 2px 3px rgba(0,0,0,.15);
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    cursor: pointer;
}
.right_bar .arrow i {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}
.right_bar.open {
    -webkit-transform: translate(100%, -50%);
    -ms-transform: translate(100%, -50%);
    transform: translate(100%, -50%);
}
.right_bar.open .arrow {
    top: 50%;
    left: -30px;
    color: #000;
    background-color: #f2f2f2;
    -webkit-border-radius: 5px 0 0 5px;
    -moz-border-radius: 5px 0 0 5px;
    -ms-border-radius: 5px 0 0 5px;
    -o-border-radius: 5px 0 0 5px;
    border-radius: 5px 0 0 5px;
}
/*********** 共用容器 ***********/
.share_container_s {
    width: 85%;
    max-width: 500px;
    margin: 0 auto;
}
.share_container_m {
    width: 85%;
    max-width: 900px;
    margin: 0 auto;
}
.share_container_l {
    width: 85%;
    max-width: 1600px;
    margin: 0 auto;
}
.sharebox_center {
    margin: 0 auto;
    text-align: center;
}
/*********** 共用元件(文字) ***********/
.text_bold {
    font-weight: bold;
}
.text_normal {
    font-weight: normal;
}
.text_italic {
    font-style: italic;
}
.text_right {
    text-align: right;
}
.text_left {
    text-align: left;
}
.text_center {
    text-align: center;
}
.float_r {
    float: right;
}
.float_l {
    float: left;
}
.no_float {
    float: none;
}
h1, h2, h3, h4, h5, h6, p,
.h1, .h2, .h3, .h4, .h5, .p {
    margin: .5rem 0;
}
h1,
.h1 {
    font: normal bold 2rem/2.2rem "Century Gothic", Arial, "Microsoft JhengHei", "PMingLiU", sans-serif;
}
h2,
.h2 {
    font: normal bold 1.8rem/2rem "Century Gothic", Arial, "Microsoft JhengHei", "PMingLiU", sans-serif;
}
h3,
.h3 {
    font: normal bold 1.6rem/1.8rem "Century Gothic", Arial, "Microsoft JhengHei", "PMingLiU", sans-serif;
}
h4,
.h4 {
    font: normal bold 1.4rem/1.6rem "Century Gothic", Arial, "Microsoft JhengHei", "PMingLiU", sans-serif;
}
h5,
.h5 {
    font: normal bold 1.2rem/1.4rem "Century Gothic", Arial, "Microsoft JhengHei", "PMingLiU", sans-serif;
}
h6,
.h6 {
    font: normal bold 1rem/1.2rem "Century Gothic", Arial, "Microsoft JhengHei", "PMingLiU", sans-serif;
}
p,
.p {
    font: normal normal .95rem/1.2rem "Century Gothic", Arial, "Microsoft JhengHei", "PMingLiU", sans-serif;
}
br {
    line-height: 1;
}
.fs_12 {
    font-size: 12px;
}
.fs_14 {
    font-size: 14px;
}
.fs_16 {
    font-size: 16px;
}
.fs_18 {
    font: normal 1.1rem/1.4rem "Century Gothic", Arial, "Microsoft JhengHei", "PMingLiU", sans-serif;
}
.fs_20 {
    font: normal 1.2rem/1.4rem "Century Gothic", Arial, "Microsoft JhengHei", "PMingLiU", sans-serif;
}
.fs_22 {
    font: normal 1.4rem/1.6rem "Century Gothic", Arial, "Microsoft JhengHei", "PMingLiU", sans-serif;
}
.fs_25 {
    font: normal 1.6rem/1.8rem "Century Gothic", Arial, "Microsoft JhengHei", "PMingLiU", sans-serif;
}
.fs_32 {
    font: normal 2rem/2.2rem "Century Gothic", Arial, "Microsoft JhengHei", "PMingLiU", sans-serif;
}
/* 單行省略 */
.text_overflow {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}
/* 多行省略(2行、3行、4行) */
.text_overflow_2,
.text_overflow_3,
.text_overflow_4 {
    display: -webkit-box;
    height: 58px;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    text-overflow: ellipsis;
    overflow: hidden;
}
.text_overflow_3 {
    height: 88px;
    -webkit-line-clamp: 3;
}
.text_overflow_4 {
    height: 116px;
    -webkit-line-clamp: 4;
}
/*********** 共用元件(眼睛) ***********/
.position_r {
    position: relative;
}
.position_a {
    position: absolute;
}
.share_eyes {
    position: absolute;
    top: 5px;
    right: 10px;
}
i.fa-eye,
i.fa-eye-slash {
    font-size: 1rem;
    cursor: pointer;
}
/*********** 共用元件(顏色) ***********/
.text_white {
    color: #fff;
}
.text_yellow {
    color: #ffeb00;
}
a.text_yellow:hover,
a.text_yellow:active,
a.text_yellow:focus {
    color: #d3ab19;
}
.text_orange {
    color: #ff8000;
}
.text_red {
    color: #f22;
}
a.text_red:hover,
a.text_red:active,
a.text_red:focus {
    color: #ff4747;
}
.text_deepred {
    color: #ba0000;
}
.text_brown {
    color: #d7b174;
}
.text_blue {
    color: #0089ff;
}
a.text_blue:hover,
a.text_blue:active,
a.text_blue:focus {
    color: #0074d9;
}
.text_lightblue {
    color: #00c4e3;
}
a.text_lightblue:hover,
a.text_lightblue:active,
a.text_lightblue:focus {
    color: #00a5bf;
}
.text_deepblue {
    color: #4d6479;
}
.text_green {
    color: #00bc00;
}
a.text_green:hover,
a.text_green:active,
a.text_green:focus {
    color: #009300;
}
.text_deepgreen {
    color:#0d562f;
}
.text_pink {
    color: #ff0080;
}
.text_purple {
    color: #b789eb;
}
.text_gray {
    color: #999;
}
.text_lightgray {
    color: #bbb;
}
.text_deepgray {
    color: #444;
}
.text_black {
    color: #000;
}
.bg_white {
    background-color: #fff;
}
.bg_yellow {
    background-color: #efd100;
}
.bg_lightyellow {
    background-color: #ffef88;
}
.bg_deepyellow {
	background-color: #766700;
}
.bg_red {
	background-color: #f00;
}
.bg_pink {
    background-color: #ffbacb;
}
.bg_deepred {
    background-color: #6a1f22;
}
.bg_blue {
    background-color: #d2e5f1;
}
.bg_lightblue {
    background-color: #f2fcfe;
}
.bg_deepblue {
    background-color: #b6d3e5;
}
.bg_green {
    background-color: #36b545;
}
.bg_lightgreen {
    background-color: #98d9a0;
}
.bg_deepgreen {
    background-color: #006c0d;
}
.bg_brown {
    background-color: #bb7925;
}
.bg_lightbrown {
    background-color: #d9b78b;
}
.bg_deepbrown {
    background-color: #784400;
}
.bg_purple {
    background-color: #8d37ff;
}
.bg_lightpurple {
    background-color: #caa3ff;
}
.bg_deeppurple {
    background-color: #3e0091;
}
.bg_gray {
    background-color: #ddd;
}
.bg_lightgray {
    background-color: #f4f4f4;
}
.bg_deepgray {
    background-color: #aaa;
}
.bg_black {
    background-color: #000;
}
/*********** 共用元件(按鈕) ***********/
input.btn20,
a.btn20 {
    width: 20%;
}
input.btn33,
a.btn33 {
    width: 30%;
}
input.btn50,
a.btn50 {
    width: 48%;
}
input.btn100,
a.btn100 {
    width: 100%;
}
input.btn_superbig,
a.btn_superbig {
    padding: 0 1rem;
    margin: 0 .5rem;
    text-align: center;
    font: normal normal 1.2rem/2.6rem "Century Gothic", Arial, "Microsoft JhengHei", "PMingLiU", sans-serif;
}
input.btn_big,
a.btn_big {
    padding: 0 0.6rem;
    margin: 0 .3rem;
    text-align: center;
    font: normal normal 1rem/2.2rem "Century Gothic", Arial, "Microsoft JhengHei", "PMingLiU", sans-serif;
}
input.btn_small,
a.btn_small {
    padding: 0 0.3rem;
    margin: 0 .2rem;
    text-align: center;
    font: normal normal .9rem/1.5rem "Century Gothic", Arial, "Microsoft JhengHei", "PMingLiU", sans-serif;
}
input.btn_orange,
a.btn_orange {
    color: #fff;
    background: linear-gradient(180deg,#FFB94F 0,#DA8F1E 100%);
    box-shadow: 0 1px 0 #aa8650, inset 0 -1px 1px rgba(255,255,255,.5);
}
input.btn_orange:hover,
input.btn_orange:active,
input.btn_orange:focus,
a.btn_orange:hover,
a.btn_orange:active,
a.btn_orange:focus {
    background: linear-gradient(180deg,#f1a83b 0,#d0830f 100%);
}
input.btn_lightblue,
a.btn_lightblue {
    color: #fff;
    background: linear-gradient(180deg, #a6cae2 0, #75acd0 100%);
    box-shadow: 0 1px 0 #568eaf, inset 0 -1px 1px rgba(255,255,255,.5);
}
input.btn_lightblue:hover,
input.btn_lightblue:active,
input.btn_lightblue:focus,
a.btn_lightblue:hover,
a.btn_lightblue:active,
a.btn_lightblue:focus {
    background: linear-gradient(180deg, #99bed6 0, #6195b7 100%);
}
input.btn_blue,
a.btn_blue {
    color: #fff;
    background: linear-gradient(180deg, #75a9cb 0, #507791 100%);
    box-shadow: 0 1px 0 #487793, inset 0 -1px 1px rgba(132,210,255,.5);
}
input.btn_blue:hover,
input.btn_blue:active,
input.btn_blue:focus,
a.btn_blue:hover,
a.btn_blue:active,
a.btn_blue:focus {
    background: linear-gradient(180deg, #5296c2 0, #2f6384 100%);
}
input.btn_deepblue,
a.btn_deepblue {
    color: #fff;
    background: linear-gradient(180deg, #5f7888 0, #86A2B4 100%);
    box-shadow: 0 1px 0 #556E7D, inset 0 -1px 1px rgba(132,210,255,.5);
}
input.deepblue:hover,
input.deepblue:active,
input.deepblue:focus,
a.deepblue:hover,
a.deepblue:active,
a.deepblue:focus {
    background: linear-gradient(180deg, #5f7888 0, #86A2B4 100%);
}
input.btn_red,
a.btn_red {
    color: #fff;
    background: linear-gradient(180deg,#ec8a66 0,#ba2929 100%);
    box-shadow: 0 1px 0 #915d5d, inset 0 -1px 1px rgba(187,43,43,.5);
}
input.btn_red:hover,
input.btn_red:active,
input.btn_red:focus,
a.btn_red:hover,
a.btn_red:active,
a.btn_red:focus {
    background: linear-gradient(180deg,#e85f48 0,#a31111 100%);
}
input.btn_green,
a.btn_green {
    color: #fff;
    background: linear-gradient(180deg,#3ed0c7 0,#179b93 100%);
    box-shadow: 0 1px 0 #3d6f64, inset 0 -1px 1px rgba(43,187,173,.5);
}
input.btn_green:hover,
input.btn_green:active,
input.btn_green:focus,
a.btn_green:hover,
a.btn_green:active,
a.btn_green:focus {
    background: linear-gradient(180deg,#27aea6 0,#167973 100%);
}
input.btn_yellow,
a.btn_yellow {
    color: #fff;
    background: linear-gradient(180deg,#fac370 0,#c98d34 100%);
    box-shadow: 0 1px 0 #c09156, inset 0 -1px 1px rgba(174,123,46,.5);
}
input.btn_yellow:hover,
input.btn_yellow:active,
input.btn_yellow:focus,
a.btn_yellow:hover,
a.btn_yellow:active,
a.btn_yellow:focus {
    background: linear-gradient(180deg,#f0b65f 0,#b77e26 100%);
}
input.btn_white,
a.btn_white {
    color: #666;
    background: linear-gradient(180deg, #eee 0,#fff 100%);
    border: 1px solid rgba(182,182,182,.5);
    box-shadow: 0 1px 0 #e2e2e2, inset 0 -1px 1px rgba(181,181,181,.5);
}
input.btn_white:hover,
input.btn_white:active,
input.btn_white:focus,
a.btn_white:hover,
a.btn_white:active,
a.btn_white:focus {
    color: #666;
    background: linear-gradient(180deg, #e4e4e4 0,#fcfcfc 100%);
}
input.btn_gray,
a.btn_gray {
    color: #fff;
    background: linear-gradient(180deg,#a2a2a2 0,#777 100%);
    box-shadow: 0 1px 0 #777, inset 0 -1px 1px rgba(186,186,186,.25);
}
input.btn_gray:hover,
input.btn_gray:active,
input.btn_gray:focus,
a.btn_gray:hover,
a.btn_gray:active,
a.btn_gray:focus {
    background: linear-gradient(180deg,#939393 0,#666 100%);
}
input.btn_lightgray,
a.btn_lightgray {
    color: #fff;
    background: linear-gradient(180deg,#ccc 0,#999 100%);
    box-shadow: 0 1px 0 #999, inset 0 -1px 1px rgba(186,186,186,.25);
}
input.btn_lightgray:hover,
input.btn_lightgray:active,
input.btn_lightgray:focus,
a.btn_lightgray:hover,
a.btn_lightgray:active,
a.btn_lightgray:focus {
    background: linear-gradient(180deg,#bfbfbf 0,#919191 100%);
}
/*********** 共用元件(圓角) ***********/
.br5 {
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
    border-radius: 5px;
}
.br10 {
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
    border-radius: 10px;
}
.br20 {
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    -ms-border-radius: 20px;
    -o-border-radius: 20px;
    border-radius: 20px;
}
.br30 {
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    -ms-border-radius: 30px;
    -o-border-radius: 30px;
    border-radius: 30px;
}
.br40 {
    -webkit-border-radius: 40px;
    -moz-border-radius: 40px;
    -ms-border-radius: 40px;
    -o-border-radius: 40px;
    border-radius: 40px;
}
.br50 {
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    -ms-border-radius: 50px;
    -o-border-radius: 50px;
    border-radius: 50px;
}
.br-circle {
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%;
}
/*********** 共用元件(陰影) ***********/
.shadow_s {
    -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, .1);
    -moz-box-shadow: 0 0 3px rgba(0, 0, 0, .1);
    -o-box-shadow: 0 0 3px rgba(0, 0, 0, .1);
    box-shadow: 0 0 3px rgba(0, 0, 0, .1);
}
.shadow_m {
    -webkit-box-shadow: 0 0 6px rgba(0, 0, 0, .2);
    -moz-box-shadow: 0 0 6px rgba(0, 0, 0, .2);
    -o-box-shadow: 0 0 6px rgba(0, 0, 0, .2);
    box-shadow: 0 0 6px rgba(0, 0, 0, .2);
}
.shadow_b {
    -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, .3);
    -moz-box-shadow: 0 0 10px rgba(0, 0, 0, .3);
    -o-box-shadow: 0 0 10px rgba(0, 0, 0, .3);
    box-shadow: 0 0 10px rgba(0, 0, 0, .3);
}
/*********** 共用元件(上下左右間距) ***********/
.m5 {
    margin: 5px;
}
.mt5 {
    margin-top: 5px;
}
.mb5 {
    margin-bottom: 5px;
}
.mr5 {
    margin-right: 5px;
}
.ml5 {
    margin-left: 5px;
}
.m10 {
    margin: 10px;
}
.mt10 {
    margin-top: 10px;
}
.mb10 {
    margin-bottom: 10px;
}
.mr10 {
    margin-right: 10px;
}
.ml10 {
    margin-left: 10px;
}
.m20 {
    margin: 20px;
}
.mt20 {
    margin-top: 20px;
}
.mb20 {
    margin-bottom: 20px;
}
.mr20 {
    margin-right: 20px;
}
.ml20 {
    margin-left: 20px;
}
.m30 {
    margin: 30px;
}
.mt30 {
    margin-top: 30px;
}
.mb30 {
    margin-bottom: 30px;
}
.mr30 {
    margin-right: 30px;
}
.ml30 {
    margin-left: 30px;
}
.p5 {
    padding: 5px;
}
.pt5 {
    padding-top: 5px;
}
.pb5 {
    padding-bottom: 5px;
}
.pr5 {
    padding-right: 5px;
}
.pl5 {
    padding-left: 5px;
}
.p10 {
    padding: 10px;
}
.pt10 {
    padding-top: 10px;
}
.pb10 {
    padding-bottom: 10px;
}
.pr10 {
    padding-right: 10px;
}
.pl10 {
    padding-left: 10px;
}
.p20 {
    padding: 20px;
}
.pt20 {
    padding-top: 20px;
}
.pb20 {
    padding-bottom: 20px;
}
.pr20 {
    padding-right: 20px;
}
.pl20 {
    padding-left: 20px;
}
.p30 {
    padding: 30px;
}
.pt30 {
    padding-top: 30px;
}
.pb30 {
    padding-bottom: 30px;
}
.pr30 {
    padding-right: 30px;
}
.pl30 {
    padding-left: 30px;
}
hr {
    height: 2px;
    padding: 0;
    margin: 10px 0;
    background: #e8e8e8;
    border: 0;
}
/*********** 共用樣式(input或select下方的提示訊息) ***********/
.input_tipbox {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    width: 100%;
}
.input_tipset {
    text-align: right;
    margin: 5px 0 0 0;
    font: normal normal .8rem/.8rem "Century Gothic", Arial, "Microsoft JhengHei", "PMingLiU", sans-serif;
}
.input_tipbox .tip_img {
    display: inline-block;
    width: 12px;
    height: 12px;
    vertical-align: middle;
}
.ticon_warning {
    background: url(../images/index/tip_warning.png?230726) no-repeat;
    background-size: 100% auto;
}
.ticon_accept {
    background: url(../images/index/tip_accept.png?230726) no-repeat;
    background-size: 100% auto;
}
.ticon_error {
    background: url(../images/index/tip_error.png?230726) no-repeat;
    background-size: 100% auto;
}
/*********** 共用樣式(頁籤、分頁) ***********/
.tabs-wrap {
    margin-bottom: 2.6667vw;
    height: 10.6667vw;
    overflow: hidden;
}
.tabs-scroll {
    width: 100%;
    height: 10.6667vw;
    overflow-x: auto;
}
.tabs-scroll::-webkit-scrollbar {
    display: none;
}
.share-tab-nav {
    position: relative;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    background-color: #f5f5f5;
    -webkit-user-select: none;
    user-select: none;
}
.tabs-scroll .share-tab-nav {
    min-width: 900px;
}
.share-tab-nav.line {
    height: 100%;
    padding-bottom: 4vw;
    box-sizing: content-box;
}
.share-tab {
    position: relative;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    padding: 0 .5rem;
    color: #666;
    font: normal bold 1rem/1.2rem "Century Gothic", Arial, "Microsoft JhengHei", "PMingLiU", sans-serif;
    cursor: pointer;
}
.share-tab.active {
    color: #1294CC;
    font-weight: bold;
}
.share-tab.active:after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 0.8vw;
    background-color: #1294CC;
    -webkit-border-radius: .8vw;
    -moz-border-radius: .8vw;
    -ms-border-radius: .8vw;
    -o-border-radius: .8vw;
    border-radius: .8vw;
    z-index: 1;
}
.share-tabbox,
.share-tab.active {
    position: relative;
}
.share-tab-panel {
    display: none;
    padding: 10px;
}
.share_content {
    width: 94%;
    color: #666;
    margin: 3% auto;
}
.share_content textarea {
    width: 94%;
    height: 38.6667vw;
    margin-top: 3.2vw;
    padding: 3%;
    color: #000;
    background: #F3F3F3;
    border: none;
    -webkit-border-radius: 1.6vw;
    -moz-border-radius: 1.6vw;
    -ms-border-radius: 1.6vw;
    -o-border-radius: 1.6vw;
    border-radius: 1.6vw;
    outline: none;
}
textarea {
    font: normal normal 1rem/1.2rem "Century Gothic", Arial, "Microsoft JhengHei", "PMingLiU", sans-serif;
}
/*********** 共用列表(注意事項) ***********/
.share_tipbox {
    width: calc(100% - 2rem);
    margin: 1rem auto;
    padding: 1rem;
}
.share_tipbox .tip_title {
    display: flex;
    align-items: center;
    justify-content: center;
    font: normal bold 1.1rem/1.4rem "Century Gothic", Arial, "Microsoft JhengHei", "PMingLiU", sans-serif;
    border-bottom: 1px solid #cbcbcb;
}
.share_tipbox .tip_title i {
    margin-right: 5px;
    color: #ff8f12;
    font-size: 1rem;
}
.share_tipbox .tip_content {
    padding: 1.5rem;
    font: normal normal .95rem/1.2rem "Century Gothic", Arial, "Microsoft JhengHei", "PMingLiU", sans-serif;
}
/*********** 共用元件(備註、解說、注意事項) ***********/
.share_tip {
    padding: 1rem;
}
.share_tip p,
.share_tip div,
.share_tip li {
    margin: 0 0 10px 0;
    font: normal normal .95rem/1.2rem "Century Gothic", Arial, "Microsoft JhengHei", "PMingLiU", sans-serif;
}
/*********** 共用樣式 ***********/
.col_1 {
    width: calc(100% - 10px);
    padding: 5px;
}
.col_flex {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    width: calc(100% - 10px);
    padding: 5px;
    font: normal normal 1rem/1rem "Century Gothic", Arial, "Microsoft JhengHei", "PMingLiU", sans-serif;
}
.col_title,
.col_item {
    display: inline-block;
    width: 30%;
    font: normal normal 1rem/1.2rem "Century Gothic", Arial, "Microsoft JhengHei", "PMingLiU", sans-serif;
    word-break: break-word;
    vertical-align: middle;
}
.col_title {
    padding: 0 .5%;
}
.col_item {
    width: calc(100% - 32%);
}
.col_tip {
    font: normal normal .85rem/1rem "Century Gothic", Arial, "Microsoft JhengHei", "PMingLiU", sans-serif;
}
.col_tip li {
    margin-bottom: 5px;
}
input.input20,
input.input33,
input.input50,
input.input100,
input.input_no_width,
select.select33,
select.select50,
select.select100 {
    display: flex;
    flex-direction: row;
    width: calc(100% - 12px);
    padding: 5px;
    color: #666;
    font: normal normal 1rem/1rem "Century Gothic", Arial, "Microsoft JhengHei", "PMingLiU", sans-serif;
    background-color: #fff;
    border: 1px solid #eee;
    vertical-align: middle;
    cursor: pointer;
}
input.input100 {
    width: calc(100% - 15px);
}
select.select100 {
    width: 100%;
}
input.input50,
select.select50 {
    width: calc(100% / 2 - 15px);
}
input.input33,
select.select33 {
    width: calc(100% / 3 - 15px);
}
input.input_no_width {
    display: inline-block;
    width: auto;
}
.item_title {
    margin: 1vw;
    font: normal bold 1rem/1rem "Century Gothic", Arial, "Microsoft JhengHei", "PMingLiU", sans-serif;
}
.col_inline,
.col_radio,
.col_checkbox {
    display: inline-block;
    margin-right: 15px;
    font: normal normal 1rem/1rem "Century Gothic", Arial, "Microsoft JhengHei", "PMingLiU", sans-serif;
}
.col_radio label,
.col_checkbox label {
    vertical-align: middle;
    cursor: pointer;
}
.btn_box {
    display: flex;
    width: 100%;
    margin: 10px 0;
    padding: 15px 0 0 0;
}
.item_title i,
.btn_box input {
    margin-right: 5px;
}
.item_title i:last-of-type,
.col_radio:last-of-type,
.col_checkbox:last-of-type,
.btn_box input:last-of-type {
    margin-right: 0;
}
.col_checkbox a {
    display: inline-block;
}
/*********** 共用flex ***********/
.flex {
    display: flex;
    align-items: center;
}
.jc_bt {
    justify-content: space-between;
}
.jc_ar {
    justify-content: space-around;
}
.jc_evenly {
    justify-content: space-evenly;
}
.jc_center {
    justify-content: center;
}
.jc_flex-start {
    justify-content: flex-start;
}
.jc_flex_end {
    justify-content: flex-end;
}
.jc_end {
    justify-content: end;
    align-items: stretch;
}
.ai_center {
    align-items: center;
}
.ai_stretch {
    align-items: stretch;
}
.flex_wrap {
    flex-wrap: wrap;
}
.flex_nowrap {
    flex-wrap: nowrap;
}
/*********** 共用元件(ul或 ol 列表) ***********/
/* ul或ol 前面是沒有任何樣式用 list_nostyle */
.list_nostyle,
.list_dot,
.list_number,
.list_roman,
.list_chinese {
    margin-left: 10px;
    padding-left: 15px;
    text-align: left;
    word-wrap: break-word;
    font: normal normal .95rem/1.2rem "Century Gothic", Arial, "Microsoft JhengHei", "PMingLiU", sans-serif;
}
.list_nostyle.mt10,
.list_dot.mt10,
.list_number.mt10,
.list_roman.mt10,
.list_chinese.mt10 {
    margin-top: 10px;
}
.list_nostyle {
    padding: 0;
    margin: 0;
}
.list_nostyle li {
    margin: 0 0 10px 0;
}
.list_nostyle div,
.list_nostyle span,
.list_nostyle a,
.list_dot li div,
.list_dot li span,
.list_dot li a,
.list_number div,
.list_number span,
.list_number a,
.list_roman div,
.list_roman span,
.list_roman a,
.list_chinese div,
.list_chinese span,
.list_chinese a {
    vertical-align: middle;
}
/* ul或ol 前面是 黑點，用 list_dot */
.list_dot {
    list-style: disc;
}
/* ul或ol 前面是 數字，用 list_number */
.list_number {
    list-style: decimal;
}
/* ul或ol 前面是 大寫羅馬數字，用 list_roman */
.list_roman {
    list-style: upper-roman;
}
/* ul或ol 前面是 中文數字，用 list_roman */
.list_chinese {
    /* list-style: trad-chinese-informal; */
    list-style: decimal-leading-zero;
}
.list_dot li,
.list_number li,
.list_roman li,
.list_chinese li {
    margin-bottom: 5px;
    padding-right: 5px;
    text-align:justify;
}
.list_dot li:last-of-type,
.list_number li:last-of-type,
.list_roman li:last-of-type,
.list_chinese :last-of-type {
    margin-bottom: 0;
}
.list_chinese li.share_title {
    margin: 0 0 10px 20px;
    padding: 0;
}
.list_roman li {
    margin: 0 0 10px 12px;
}
.list_number a,
.list_roman a,
.list_chinese a {
    text-decoration: underline;
}
/*********** 共用元件(轉圈圈-讀取動畫) ***********/
.reflash {
    display: inline-block;
    margin-left: 10px;
    font-size: 1.2rem;
    cursor: pointer;
}
.reflash i:hover,
.reflash i:active,
.reflash i:focus {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
    -webkit-transition: transform 1s linear;
    -moz-transition: transform 1s linear;
    -ms-transition: transform 1s linear;
    -o-transition: transform 1s linear;
    transition: transform 1s linear;
}
/*********** 共用消息 ***********/
.winnews_content {
    height: 31.3rem;
    background: #f5fbff;
    overflow-y: auto;
}
.winnews_list {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 3.1rem;
    padding: 0 1rem;
    cursor: pointer;
}
.winnews_list:nth-child(odd) {
    background: #dff4ff;
}
.news_statusbox {
    width: 13%;
    margin: 0 auto;
    text-align: center;
}
.popup-flash .news_statusbox {
    width: 19%;
}
.news_type {
    display: inline-block;
    min-width: 50px;
    padding: 5px;
    color: #fff;
    text-align: center;
    text-shadow: 1px 1px 3px #000;
    font: normal normal .85rem/1rem "Century Gothic", Arial, "Microsoft JhengHei", "PMingLiU", sans-serif;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
    border-radius: 5px;
}
.news_text {
    flex: 1;
    margin: 0 1rem;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}
.news_active {
    background: #fe9528;
    box-shadow: 0 1px 1px rgba(0,0,0,.25), inset 0 -2px 2px #ffb87c;
}
.news_service {
    background: #12B178;
    box-shadow: 0 1px 1px rgba(0,0,0,.25), inset 0 -2px 2px #27ce92;
}
.news_fix {
    background: #f00;
    box-shadow: 0 1px 1px rgba(0,0,0,.25), inset 0 -2px 2px #ff7b30;
}
.news_new {
    background: #d400b0;
    box-shadow: 0 1px 1px rgba(0,0,0,.25), inset 0 -2px 2px #ff76d4;
}
.news_marquee {
    background: #dcc200;
    box-shadow: 0 1px 1px rgba(0,0,0,.25), inset 0 -2px 2px #e7d95c;
}
.news_announcement {
    background: #a3c549;
    box-shadow: 0 1px 1px rgba(0,0,0,.25), inset 0 -2px 2px #bedc6d;
}
.news_win {
    background: #238ddc;
    box-shadow: 0 1px 1px rgba(0,0,0,.25), inset 0 -2px 2px #54b4ff;
}
.news_sports {
    background: #a949c2;
    box-shadow: 0 1px 1px rgba(0,0,0,.25), inset 0 -2px 2px #ce8ada;
}

/*********  以下為 手機畫面_設定  *********/
/* 寬度大於 1024px (電腦)*/
@media screen and (min-width: 1024px) {
}

/* 寬度大於 1920px (電腦)*/
@media screen and (min-width: 1920px) {
}

/* 寬度介於 1301px - 1900px (ipad pro,舊電腦) */
@media screen and (min-width: 1301px) and (max-width: 1900px) {
    /* 頁尾 */
    .footer {
        margin-top: 10px;
        padding: 5px;
    }
}

/* 寬度介於 1024px - 1300px (ipad) */
@media screen and (min-width: 1024px) and (max-width: 1300px) {
    /* 頁首 */
    .login_box .btn_superbig,
    .login_box .btn_big,
    .header_language {
        margin-left: 5px;
    }
    /* 頁尾 */
    .footer {
        margin-top: 10px;
        padding: 5px;
    }
    /* 共用 */
    .share_container_s,
    .share_container_m,
    .share_container_l {
        width: 96%;
    }
}

/* 寬度小於 1023px (平板+手機)*/
@media screen and (max-width: 1023px) {
    /* 頁首 */
    .language_nav {
        right: 0;
    }
    .login_box .btn_superbig,
    .login_box .btn_big,
    .header_language {
        margin-left: 0;
    }
    /* 頁尾 */
    .footer {
        margin-top: 10px;
        padding: 10px;
    }
}

/* 寬度介於 901px - 1023px (ipad) */
@media screen and (min-width: 901px) and (max-width: 1023px) {
}

/* 寬度介於 751px - 900px (iPad, 手機橫放) */
@media screen and (min-width: 751px) and (max-width: 900px) {
    input.btn_big, a.btn_big {
        padding: 0 .5rem;
    }
}