@import url("https://fonts.googleapis.com/css2?family=Noto+Serif+Display:wght@400;600&display=swap");

/* 基本設定 */
body {
    font-family: "Be Vietnam";
    color: #fff;
    position: relative;
    letter-spacing: 0.5px;
    height: 100%;
    /* font-family: 'Noto Serif Display', serif; */
    background: #00000014;
}

main {
    position: absolute;
    top: 55px;
    left: 0;
    width: 100%;
}

iframe {
    border: none;
}

::-webkit-scrollbar {
    width: 11px;
    height: 11px;
}

::-webkit-scrollbar-track {
    background: #1b1e2480;
}

::-webkit-scrollbar-thumb {
    background-color: #2d609f;
}

a {
    color: #333;
    text-decoration: none;
    transition: color 0.5s ease-in-out;
}

a:hover,
a:active,
a.active {
    color: #00aeef;
    text-decoration: none;
}

.fa p {
    font-family: "Be Vietnam";
}

input,
select,
textarea,
.userphone,
#bankSelect,
#bank-account,
#bank-name {
    height: 38px;
    padding: 0 8px;
    background-color: #fff;
    border: 1px solid #d1d1d1;
    color: #000;
}

.svg-icon {
    height: 14px;
}

.mobile-icon {
    height: 25px;
}

.dashboard-icon {
    height: 22px;
    filter: drop-shadow(0 1px 8px black);
}

.title-icon {
    height: 22px;
}

label {
    display: inline-block;
    margin-bottom: 8px;
    color: #e8e8e8;
}

.form label {
    color: #000000;
    font-weight: 600;
}

input,
select {
    width: 100%;
    box-sizing: border-box;
}

textarea {
    height: 31vh;
    width: calc(100% - 19px);
    overflow-y: scroll;
    padding: 8px;
}

option {
    width: 50px !important;
}

input[placeholder],
[placeholder],
*[placeholder] {
    font: 400 15px "Be Vietnam";
}

input[type="file"] {
    background-color: transparent;
    border: none;
    padding: 0;
    height: 30px;
    color: #fff;
}

.input-block {
    margin: 0 0 20px 0;
    text-align: left;
}

/* 輸入框點擊後外框顏色 */
#options2 {
    font-size: 12px;
    height: 22px;
    margin-top: 0;
}

#options {
    font-size: 18px;
    height: 22px;
    margin: 20px auto auto auto;
    width: auto;
}

#options3 {
    font-size: 18px;
    height: 22px;
    margin: 20px auto auto auto;
    width: auto;
}

/* 輸入框點擊後外框顏色 */

input:focus,
textarea:focus {
    border: 1px solid #2d609f;
    box-shadow: 0 0 3px #2d609f, 0 1px 8px #2d609f;
    -moz-box-shadow: 0 0 3px #2d609f, 0 1px 8px #2d609f;
    -webkit-box-shadow: 0 0 3px #2d609f, 0 1px 8px #2d609f;
}

input:focus,
textarea:focus,
select:focus {
    outline-offset: 0px;
    outline: none;
}

::placeholder {
    color: #ff0;
}

::-webkit-input-placeholder {
    color: #496087;
}

:-ms-input-placeholder {
    color: #496087;
}

::-moz-placeholder {
    color: #496087;
    opacity: 1;
}

span {
    font-size: 13px;
    color: #88b8dc;
}

.btn {
    padding: 10px 30px;
    background-color: #88b8dc;
    border: none;
    transition: all 0.5s ease-in-out;
    cursor: pointer;
    color: #000000;
    border-radius: 10px;
}

.btn:hover,
.btn:active,
.btn.active {
    background-color: #0b2039;
    color: #fff;
}

.btn1 {
    padding: 10px 30px;
    background-color: #52b848;
    border: none;
    font-weight: bold;
    transition: all 0.5s ease-in-out;
    cursor: pointer;
    color: #fff;
    border-radius: 10px;
}

.btn1:hover,
.btn1:active {
    background-color: #387b31;
    color: #fff;
}

.btn2 {
    padding: 15px 25px;
    background-color: transparent;
    border: 1px solid #ff693b;
    color: #333;
    transition: all 0.5s ease-in-out;
}

.btn2:hover,
.btn2:active {
    background-color: #88b8dc;
    color: #fff;
}

.submit {
    display: block;
    width: 200px;
    margin: 0 auto;
    margin-bottom: 30px;
}

.desktop-show {
    display: none;
}

.mobile-show {
    display: unset;
}

/* 文字顏色 */
.font-green {
    color: #068485;
}

/* 顯示排列 */
.display-flex {
    display: flex;
}

/* 圖片顯示 */
img {
    width: auto;
    vertical-align: middle;
}

#page_about .page .text-area img {
    width: 50px;
    margin-bottom: -11px;
}

#egame .page .text-area img {
    width: 50px;
    margin-bottom: -11px;
}

#bulletin .page .text-area img {
    width: 50px;
    margin-bottom: -11px;
}

/* 獲取手機驗證碼按鈕樣式 */
.verification-code-block {
    display: flex;
    justify-content: center;
}

.verification-code {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 10px 0;
    border-radius: 5px;
    border: none;
    background-color: #087b33;
    color: #fff;
    box-shadow: 3px 3px 0px #084820;
    transition: all 0.5s ease-in-out;
    max-width: 250px;
    margin-bottom: 20px;
    cursor: pointer;
}

.verification-code:hover,
.verification-code:active {
    background-color: #0d9c41;
}

.verification-code .btn-img {
    width: 16px;
    color: #fff;
    margin-right: 8px;
}

.verification-code .link-btn-svg {
    width: 100%;
    height: 100%;
}

.verification-code-block .verification-code h3 {
    margin: 0;
    font-size: 20px;
}

/* header區 */
#web {
    display: none;
}

header {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 10000;
    background: #fff;
    padding: 0 0 10px;
}

.nav {
    background-color: transparent;
    padding: 0 !important;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 50px;
    box-sizing: border-box;
    align-items: flex-end;
}

#headMobile .main-item h3 {
    margin: 0;
    color: #000000;
}

.nav a img {
    width: 130px;
    margin-left: 10px;
}

.nav .btn1 {
    padding: 8px 23px !important;
}

.current-page-title {
    text-align: center;
    position: fixed;
    width: 210px;
    padding: 10px;
    background: #88b8dc;
    border-radius: 8px;
    left: 23px;
    top: 176px;
    box-shadow: 0 3px 10px #151f36;
}

.current-page-title p {
    color: white;
    font-size: 14px;
    margin: 0;
}

button {
    outline: none;
}

.hamburger-inner,
.hamburger-inner::before,
.hamburger-inner::after {
    background-color: #333;
}

.hamburger.is-active .hamburger-inner,
.hamburger.is-active .hamburger-inner::before,
.hamburger.is-active .hamburger-inner::after {
    background-color: #333;
}

.hamburger:hover,
.hamburger.is-active:hover {
    opacity: 1;
}

.index-link-block {
    display: none;
    width: 100%;
    height: 100vh;
    padding: 0 30px;
    background-color: #21295a;
    position: fixed;
    top: 55px;
    box-sizing: border-box;
}

#mobile .index-link-block a {
    width: 75%;
    margin: 10px 2%;
    border: 1px solid #88b8dc;
    border-radius: 10px;
    margin-bottom: 9px;
    color: #f1f1f1;
    text-align-last: center;
}

#mobile .index-link-block a:hover {
    background: #88b8dc;
    color: #000000;
}

#mobile .index-link-block a:focus {
    background: #88b8dc;
    color: #000000;
}

#mobile .secondary-item.show {
    display: flex !important;
    width: 100%;
    z-index: 1000;
    flex-direction: column;
    align-items: center;
}

.index-link-block.show {
    display: block;
    /* right: 0; */
    z-index: 1000;
    text-align: center;
}

.index-link-block .group {
    padding: 30px 0;
}

.index-link-block .group:nth-child(2) {
    padding-top: 0;
}

.group .main-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 5px;
    border-bottom: 1px solid #f1f1f1;
}

.main-item {
    font-weight: bold;
    /* font-size: 18px; */
}

.unfold-btn .open,
.unfold-btn .close {
    display: none;
    width: 18px;
}

.unfold-btn .show {
    display: block;
}

.secondary-item {
    display: none;
}

.secondary-item.show {
    display: block;
}

.secondary-item a {
    display: block;
    padding: 10px 0;
}

#mobile .index-link-block .btn2 {
    display: block;
    text-align: center;
    border-width: 2px;
    margin: 0 auto;
    background: transparent;
    padding: 10px 15px;
}

.mobile-title {
    position: fixed;
    left: 0;
    right: 0;
    top: 55px;
    display: flex;
    flex-wrap: wrap;
    padding: 8px 12px 8px 80px;
    z-index: 9;
    background: #88b8dc;
    color: white;
    justify-content: center;
    box-shadow: 0 0 10px #333333;
}

.mobile-title h2 {
    margin: 5px 0;
    font-size: 20px;
}

.mobile-title a {
    font-size: 24px;
    position: absolute;
    left: 13px;
    top: 9px;
}

@media screen and (min-width: 1024px) {
    .header-web {
        width: 100%;
        height: 60px;
        background-color: #1b1e24;
        position: fixed;
        top: 0;
    }
}

/* footer區 */
footer {
    text-align: center;
    background-color: #000;
    display: none;
}

footer p {
    font-size: 12px;
    padding: 12px 0;
    color: #ffffff;
}

@media screen and (min-width: 768px) {
    .footer {
        display: block;
    }
}

.full-page {
    width: 100%;
    height: 100vh;
    display: grid;
    place-items: inherit;
}

/* 內容範圍 */
.container {
    max-width: 1200px;
    padding: 0 15px;
    margin: 0 auto;
}

.container-marquee {
    display: flex;
    max-width: 1200px;
    margin: auto;
    justify-content: center;
    background-color: transparent;
}

/*================================================*/
/* login + register */
.web-left-block,
.web-right-block {
    padding: 0 15px;
}

.web-left-block {
    display: none;
    padding-top: 30px;
    text-align: center;
}

.web-left-block img {
    width: 100%;
    max-width: 150px;
}

.web-right-block {
    width: 90%;
    max-width: 800px;
}

.web-center-block {
    background: #141c4be8;
    padding: 30px;
    max-width: 800px;
    width: 40%;
    height: 100%;
    display: grid;
    place-items: center;
}

@media screen and (min-width: 768px) {
    .web-center-block {
        background: #141c4be8;
        padding: 30px;
        max-width: 800px;
        margin: 0 0 0 auto;
    }
}

@media screen and (max-width: 767px) {
    .web-center-block {
        width: 100%;
    }
}

.web-center-block .enter-frame .enter-logo {
    width: 100%;
    max-width: 180px;
    margin-bottom: 60px;
}

.enter-frame h1 {
    color: #88b8dc;
    font-weight: 700;
    margin-top: 0;
}

.login-btn {
    margin-top: 30px;
}

.link-area {
    /* max-width: 400px; */
    margin: 20px auto 30px;
    padding-top: 15px;
    display: flex;
    justify-content: space-evenly;
    border-top: 1px solid #fafbff;
}

.login-logo {
    display: block;
    width: 200px;
    margin: 0 auto;
    margin-bottom: 20px;
}

.introduction {
    display: none;
}

.web-center-block .text-block {
    margin-bottom: 20px;
    line-height: 1.5rem;
}

/* register */
.communication-software {
    margin: 0;
}

.register_form .img-block {
    display: flex;
    margin-top: 5px;
    align-items: center;
}

.change {
    background-image: url(./img/waner/icon_change.png);
    width: 32px;
    height: 32px;
    cursor: pointer;
    margin-left: 15px;
}

.input-verification-code-block .display-flex .img-block {
    margin-right: 10px;
}

[type="checkbox"] {
    width: 21px;
    height: 21px;
    margin-right: 5px;
    margin-top: 0;
}

.withdraw_form h2 {
    font-size: 18px;
    margin-bottom: 3px;
    color: #000000;
}

.input-block span {
    margin-left: 8px;
    display: inline-block;
    display: inline-block;
    color: #f00;
    margin: 3% 0;
    line-height: 1rem;
}

/*================================================*/
/* 會員中心共同 */

.area .container {
    /* padding: 0 15px; */
    box-sizing: border-box;
}

.area .container-marquee {
    padding: 0 15px;
    box-sizing: border-box;
}

.area .main-title {
    height: 150px;
    background-image: url(./img/waner/login_bg.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    display: flex;
    align-items: center;
}

.area .main-title h1 {
    color: #ff693b;
}

.area .content {
    padding-top: 75px;
    padding-bottom: 65px;
    padding-left: 15px;
    padding-right: 15px;
}

.area h3 {
    margin-bottom: 20px;
}

@media screen and (min-width: 425px) {
    .area .content {
        padding-bottom: 90px;
    }
}

@media screen and (min-width: 768px) {
    .area .content {
        padding-bottom: 70px;
    }
}

/*================================================*/
/* member */
#member .phone {
    position: relative;
}

/* 手機驗證提示 */
#valid {
    min-width: 70px;
    height: 25px;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 11px;
    right: 8px;
    padding: 1px 8px;
    border-radius: 8px;
    color: #fff !important;
}

.label-danger {
    background-color: #b61b00;
}

.label-success {
    background-color: #0c7c1b;
}

/*================================================*/
/* verify */
.userphone {
    display: flex;
    align-items: center;
}

/*================================================*/
/* è¡¨æ ¼ */
#gameItem {
    /* width: 100%; */
    background-color: #fff;
    /* border: 1px solid #333; */
    border-spacing: 0;
    margin-bottom: 20px;
}

#gameItem thead th {
    border-bottom: 2px solid #333;
    background-color: #333;
    color: #fff;
}

#gameItem tbody td {
    border-bottom: 1px solid #333;
}

#gameItem tbody tr:last-child td {
    border-bottom: none;
}

.gameItem-title {
    width: 70%;
    padding: 5px 10px;
    text-align: left;
}

.wallet-frame {
    background: #ffffffcc !important;
    display: flex;
    flex-wrap: wrap;
    margin-top: 15px;
    padding: 10px;
    border-radius: 3px;
}

.money {
    font-size: 14px;
    text-align: right;
    padding-left: 20px;
}

/*================================================*/
/* transfer */
.money i {
    cursor: pointer;
}

.precautions {
    background: #000000b8;
    padding: 15px;
    border-radius: 15px;
    margin-bottom: 10px;
}

.precautions h4 {
    margin-bottom: 20px;
}

.precautions ol {
    padding-inline-start: 20px;
    font-size: 12px;
    line-height: 1.5;
}

.precautions li {
    margin-bottom: 16px;
    list-style: outside decimal;
}

.precautions p {
    font-size: 12px;
}

/*================================================*/
/* bank */
.precautions img {
    width: 100%;
    max-width: 550px;
}

/*================================================*/
/* link-btn-block */
#list-content .link-btn {
    padding: 10px 15px;
    background-color: #5b5b5b80;
    border-radius: 15px;
    color: #fff;
    transition: all 0.3s ease-in-out;
    box-sizing: border-box;
    margin-bottom: 10px;
}

#list-content .link-btn:hover {
    background-color: #88b8dc;
}

#list-content .link-btn.active {
    background-image: linear-gradient(to right, #88b8dc 0%, #2d609f 100%);
}

#list-content .link-btn .btn-img {
    width: 24px;
    height: 24px;
    color: #fff;
    margin: 0 15px;
}

#list-content .link-btn p {
    font-size: 1em;
    line-height: 1em;
    margin-top: -5px;
}

.link-btn-svg {
    fill: currentColor;
}

#list-content .link-btn .link-btn-img {
    width: 50px;
    height: 50px;
    margin: auto;
    margin-bottom: 10px;
}

#list-content .link-btn .btn-img-1 {
    background-image: url(./img/waner/icon_center-1.svg);
    transition: all 0.3s ease-in-out;
}

#list-content .link-btn.active .btn-img-1,
#list-content .link-btn:hover .btn-img-1 {
    background-image: url(./img/waner/icon_center-1-hover.svg);
}

#list-content .link-btn .btn-img-2 {
    background-image: url(./img/waner/icon_center-2.svg);
    transition: all 0.3s ease-in-out;
}

#list-content .link-btn.active .btn-img-2,
#list-content .link-btn:hover .btn-img-2 {
    background-image: url(./img/waner/icon_center-2-hover.svg);
}

#list-content .link-btn .btn-img-3 {
    background-image: url(./img/waner/icon_center-3.svg);
    transition: all 0.3s ease-in-out;
}

#list-content .link-btn.active .btn-img-3,
#list-content .link-btn:hover .btn-img-3 {
    background-image: url(./img/waner/icon_center-3-hover.svg);
}

#list-content .link-btn .btn-img-4 {
    background-image: url(./img/waner/icon_center-4.svg);
    transition: all 0.3s ease-in-out;
}

#list-content .link-btn.active .btn-img-4,
#list-content .link-btn:hover .btn-img-4 {
    background-image: url(./img/waner/icon_center-4-hover.svg);
}

#list-content .link-btn .btn-img-5 {
    background-image: url(./img/waner/icon_center-5.svg);
    transition: all 0.3s ease-in-out;
}

#list-content .link-btn.active .btn-img-5,
#list-content .link-btn:hover .btn-img-5 {
    background-image: url(./img/waner/icon_center-5-hover.svg);
}

/*================================================*/
/* ä¸Šä¸‹é */
.next-page-block {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
}

.next-page-block a,
.next-page-block span {
    color: #2d609f;
    font-size: 14px;
    margin: 0 8px;
}

.pagination {
    display: flex;
    list-style-type: none;
    padding-inline-start: unset;
}

.pagination .disabled span {
    color: #212121;
}

.next-page-block a:hover {
    color: #ffc711;
}

/*================================================*/
/* no-information */
.no-information {
    background-color: rgba(255, 255, 255, 0.7);
    padding: 100px;
    border-radius: 10px;
}

.no-information p {
    text-align: center;
}

/*================================================*/
/* message */
/* 歷史訊息表 */
.message-block {
    background-color: #00000066;
    margin-bottom: 20px;
    word-break: break-all;
    border-radius: 15px;
    color: #fff;
}

.massage-title {
    padding: 10px 15px;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    font-size: 14px;
}

.massage-title-block {
    margin-bottom: 0;
}

.massage-title-block:last-child {
    margin-bottom: 0;
}

.massage-title-block p {
    margin: 0;
    min-width: 50px;
}

.content-text {
    color: #2e2e2e;
    margin-top: 5px !important;
}

.Reply {
    color: green;
}

.reply-content {
    display: none;
    padding-bottom: 15px;
    margin: 30px 15px 0;
}

.reply-content.show {
    display: block;
}

.detail-show {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 5px 0;
    background-color: #3c3c3c;
    color: #fff;
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
}

.detail-show:hover {
    background-color: #2d609f;
}

.detail-show p {
    margin-block-start: 0;
    margin-block-end: 0;
}

.detail-show i {
    margin-left: 10px;
    padding-top: 5px;
}

.member-message {
    border-bottom: 1px solid #fff;
    padding-bottom: 15px;
}

.member-message h3,
.customer-service h3 {
    font-size: 20px;
}

/*================================================*/
/* record */
.form-block {
    background-color: #000000c0;
    padding: 15px;
    border-radius: 5px;
    margin-bottom: 20px;
    color: #fff;
}

.form-block:hover {
    background-color: #22436c;
    box-shadow: 0 3px 15px #333;
}

.form-block .form-top {
    padding-bottom: 8px;
    border-bottom: 1px solid #ffffff;
}

.form-block .form-block-title {
    color: #88b8dc;
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 8px;
}

.form-block .form-top span {
    margin: 0;
    font-size: 12px;
    font-weight: 300;
    color: #cddcf1;
}

.form-content p {
    margin-bottom: 4px;
}

/*================================================*/
/* store */
.wallet-address-title {
    margin-top: 0;
    margin-bottom: 0;
    font-size: 16px;
    padding-right: 10px;
}

.wallet-address {
    list-style-type: none;
    padding-inline-start: 0px;
    font-weight: bold;
    margin-top: 0;
    font-size: 16px;
}

/*================================================*/
/* withdraw */
#bankSelect,
#bank-account,
#bank-name {
    display: flex;
    align-items: center;
}

.text-block h2 {
    color: #88b8dc;
}

@media screen and (max-width: 1024px) {
    header {
        background: #fff !important;
    }

    .title-icon {
        display: none;
    }

    #list-content .link-btn img {
        display: none;
    }

    .area .content {
        background: #00000014;
        /* min-height: 80vh; */
    }
}

.mobile-fixed {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #67bada;
    box-shadow: 0 0 12px #000000bb;
    display: flex;
}

@media screen and (min-width: 1024px) {
    .mobile-fixed {
        position: absolute;
        top: 0;
        bottom: unset;
    }

    .link-btn {
        height: 65px;
    }
}

.linkGroup {
    display: flex;
}

.link-btn {
    flex: 1;
    text-align: center;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    transition: all 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
    flex-direction: row;
}

.link-btn:hover {
    background-color: #00000036;
}

.link-btn a {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding: 15px 0;
    color: #fff;
    display: grid;
    place-items: center;
}

.link-btn.active a {
    color: #000000;
}

.mobile-icon {
    width: 24px;
    height: 24px;
    transition: all 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
}

.link-btn p {
    font-size: 0.7rem;
    padding-top: 4px;
    margin-top: 4px;
    line-height: 1;
}

/* RWD */
/* 桌機版 */

@media screen and (min-width: 1024px) {
    .area .container {
        padding: 0 15px;
        box-sizing: border-box;
    }

    .area .index-page {
        padding: 100px 0;
        margin: 0 15px;
    }

    .desktop-show {
        display: unset;
    }

    .mobile-show {
        display: none;
    }

    /* header區 */
    #mobile {
        display: none;
    }

    #web {
        display: block;
    }

    #web .right-index-link-block {
        /* width: 750px; */
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    #web .right-index-link-block a {
        font-size: 14px;
        margin: 0 12px;
    }

    footer {
        text-align: center;
        background-color: #000000;
        display: block;
        /* position: fixed;
    bottom: 0;
    left: 0;
    right: 0; */
    }

    .web-left-block img {
        margin-top: 32vh;
    }

    /* login + register */

    .web-right-block {
        /* border-left: 1px solid #fff; */
        padding: 0 50px;
    }

    .full-page .flex {
        display: flex;
    }

    .full-page .flex form {
        width: 65%;
    }

    .login-logo {
        margin-left: 0;
    }

    /* login */

    .full-page .web-left-block {
        display: block;
        width: 20%;
        background: #0a65adb8;
        box-shadow: 1px 0px 15px black;
        background-image: url(./img/waner/login_bg_r.jpg);
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
    }

    .full-page .web-right-block {
        width: 80%;
    }

    .introduction {
        display: block;
        width: 35%;
        padding-right: 80px;
    }

    /* register */
    .input-block-area {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .input-block-area .input-block {
        width: calc(50% - 5px);
    }

    .input-verification-code-block {
        padding: 20px 0;
    }

    .verification {
        display: flex;
        align-items: center;
    }

    .register_form .img-block {
        margin-left: 15px;
    }

    /*================================================*/
    /* 會員中心共同 */
    /* .area .index-page {
        padding: 15px;
    } */

    .area #web .container {
        position: absolute;
        left: 0;
        right: 0;
        display: flex;
        justify-content: center;
        padding: 50px 15px 0;
        max-width: 1200px;
        margin: 0 auto;
    }

    #web .container.navibar {
        z-index: 99999;
        position: fixed;
        left: 18px;
        top: 0px;
        background: -webkit-linear-gradient(143deg, #424242, #222222);
        background: linear-gradient(143deg, #424242, #222222);
        display: grid;
        height: 162px;
        overflow: hidden;
        width: 220px;
        right: unset;
        flex-wrap: unset;
        border-radius: 0 0 10px 10px;
        /* height: 100vh; */
        box-shadow: 0 3px 10px #151f36;
        padding-top: 30px;
        padding-bottom: 30px;
        transition: all 0.3s ease-in-out;
    }

    #web .container.navibar:hover {
        height: 540px;
        background: -webkit-linear-gradient(143deg, #5e5e5e, #353535);
        background: linear-gradient(143deg, #5e5e5e, #353535);
        transition: all 0.3s ease-in-out;
    }

    #web .container.navibar h3 {
        color: white;
        margin-top: 0;
        font-size: 15px;
        margin-bottom: 20px;
    }

    #web .container.navibar a {
        /* text-align: left !important; */
    }

    .user-icon {
        width: 118px;
    }

    #web .member-center-title {
        background: rgba(255, 255, 255, 0.5);
    }

    #web .member-center-title .block-content {
        position: relative;
        height: 100px;
    }

    #web .member-center-title .position {
        display: flex;
        align-items: flex-start;
        position: absolute;
        top: 18px;
        left: 0;
    }

    #web .member-center-title .position h1 {
        margin: 0;
        margin-top: 25px;
        margin-left: 20px;
        color: #fff;
    }

    .block-content {
        max-width: 1200px;
        margin: 0 auto;
    }

    .area #web .container-marquee {
        display: flex;
        justify-content: center;
        padding: 50px 0 0;
    }

    .area #web .container a {
        width: 220px;
        margin: 5px 3px 0 3px;
        text-align: center;
        padding: 10px 0;
        /* border-top-left-radius: 15px;
        border-top-right-radius: 15px; */
        transition: all 0.3s ease-in-out;
    }

    .area #web .container a:hover {
        background-color: #ff693b;
        color: #fff;
    }

    .area #web .container a.active {
        background-color: #88b8dc;
        color: #fff;
    }

    .area .form {
        display: flex;
    }

    .area .form .right,
    .area .form .left {
        padding: 0 10px;
        width: 50%;
    }

    .area .form .right {
        border-right: 1px solid #7a7a7a8e;
        /* padding-right: 30px; */
    }

    .area .form .right .input-block:first-child {
        margin-top: 0;
    }

    .area .form .left {
        padding-left: 30px;
        padding-right: 15px;
    }

    /* .area .form .left h4 {
        margin-top: 0;
        font-size: 12px;
    } */

    .area .content {
        background-image: url(./img/waner/member-bg.jpg);
        background-size: cover;
        background-repeat: no-repeat;
        background-attachment: fixed;
        padding: 40px 15px 40px 40px;
        border-radius: 20px;
        box-shadow: 0 3px 15px rgba(0, 0, 0, 0.322);
    }

    .precautions {
        background: #000000b8;
        padding: 15px;
        border-radius: 15px;
    }

    /*================================================*/
    /* list-content */
    #list-content .form .right {
        width: 20%;
    }

    #list-content .form .left {
        width: 80%;
    }

    /*================================================*/
    /* message */
    /* 歷史訊息表 */
    .massage-title-block {
        display: flex;
        align-items: center;
    }

    .massage-title-block .content-text {
        margin-top: 0 !important;
    }

    /*================================================*/
    /* record */
    .form-block {
        display: flex;
    }

    .form-block .form-top,
    .form-block .form-content {
        /* width: 30%; */
        padding: 0 15px;
    }

    .form-block .form-content {
        padding: 0 15px 0 40px;
    }

    .form-block .form-top {
        border-bottom: none;
        padding-bottom: 0px;
        border-right: 1px solid transparent;
    }
}

@media screen and (max-width: 1024px) {
    .main .control-panel,
    .main .game-panel {
        height: calc(100vh - 59.5px);
    }
}

@media screen and (max-width: 419.9px) {
    .main .game-panel {
        display: none;
    }

    ::-webkit-scrollbar {
        width: 0;
        height: 0;
    }

    .precautions {
        margin-bottom: 30px;
    }

    .main .control-panel {
        width: 100%;
        margin-left: 0;
        overflow-y: hidden;
    }

    .mobile-fixed {
        top: unset;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 55px;
        padding: 4px;
        display: flex;
        justify-content: space-evenly;
    }

    .mobile-fixed .link-btn {
        height: unset;
    }

    .mobile-fixed .link-btn br,
    .mobile-fixed .link-btn p {
        display: none;
    }

    .mobile-title {
        padding: 8px;
    }

    .link-btn[data-info~="hidden"] {
        display: none;
    }
}
@import url("https://fonts.googleapis.com/css2?family=Noto+Serif+Display:wght@400;600&display=swap");

/* 基本設定 */
body {
    font-family: "Be Vietnam";
    color: #fff;
    position: relative;
    letter-spacing: 0.5px;
    height: 100%;
    /* font-family: 'Noto Serif Display', serif; */
    background: #00000014;
}

main {
    position: absolute;
    top: 55px;
    left: 0;
    width: 100%;
}

iframe {
    border: none;
}

::-webkit-scrollbar {
    width: 11px;
    height: 11px;
}

::-webkit-scrollbar-track {
    background: #1b1e2480;
}

::-webkit-scrollbar-thumb {
    background-color: #2d609f;
}

a {
    color: #333;
    text-decoration: none;
    transition: color 0.5s ease-in-out;
}

a:hover,
a:active,
a.active {
    color: #00aeef;
    text-decoration: none;
}

.fa p {
    font-family: "Be Vietnam";
}

input,
select,
textarea,
.userphone,
#bankSelect,
#bank-account,
#bank-name {
    height: 38px;
    padding: 0 8px;
    background-color: #fff;
    border: 1px solid #d1d1d1;
    color: #000;
}

.svg-icon {
    height: 14px;
}

.mobile-icon {
    height: 25px;
}

.dashboard-icon {
    height: 22px;
    filter: drop-shadow(0 1px 8px black);
}

.title-icon {
    height: 22px;
}

label {
    display: inline-block;
    margin-bottom: 8px;
    color: #e8e8e8;
}

.form label {
    color: #000000;
    font-weight: 600;
}

input,
select {
    width: 100%;
    box-sizing: border-box;
}

textarea {
    height: 31vh;
    width: calc(100% - 19px);
    overflow-y: scroll;
    padding: 8px;
}

option {
    width: 50px !important;
}

input[placeholder],
[placeholder],
*[placeholder] {
    font: 400 15px "Be Vietnam";
}

input[type="file"] {
    background-color: transparent;
    border: none;
    padding: 0;
    height: 30px;
    color: #fff;
}

.input-block {
    margin: 0 0 20px 0;
    text-align: left;
}

/* 輸入框點擊後外框顏色 */
#options2 {
    font-size: 12px;
    height: 22px;
    margin-top: 0;
}

#options {
    font-size: 18px;
    height: 22px;
    margin: 20px auto auto auto;
    width: auto;
}

#options3 {
    font-size: 18px;
    height: 22px;
    margin: 20px auto auto auto;
    width: auto;
}

/* 輸入框點擊後外框顏色 */

input:focus,
textarea:focus {
    border: 1px solid #2d609f;
    box-shadow: 0 0 3px #2d609f, 0 1px 8px #2d609f;
    -moz-box-shadow: 0 0 3px #2d609f, 0 1px 8px #2d609f;
    -webkit-box-shadow: 0 0 3px #2d609f, 0 1px 8px #2d609f;
}

input:focus,
textarea:focus,
select:focus {
    outline-offset: 0px;
    outline: none;
}

::placeholder {
    color: #ff0;
}

::-webkit-input-placeholder {
    color: #496087;
}

:-ms-input-placeholder {
    color: #496087;
}

::-moz-placeholder {
    color: #496087;
    opacity: 1;
}

span {
    font-size: 13px;
    color: #88b8dc;
}

.btn {
    padding: 10px 30px;
    background-color: #88b8dc;
    border: none;
    transition: all 0.5s ease-in-out;
    cursor: pointer;
    color: #000000;
    border-radius: 10px;
}

.btn:hover,
.btn:active {
    background-color: #0b2039;
    color: #fff;
}

.btn1 {
    padding: 10px 30px;
    background-color: #52b848;
    border: none;
    font-weight: bold;
    transition: all 0.5s ease-in-out;
    cursor: pointer;
    color: #fff;
    border-radius: 10px;
}

.btn1:hover,
.btn1:active {
    background-color: #387b31;
    color: #fff;
}

.btn2 {
    padding: 15px 25px;
    background-color: transparent;
    border: 1px solid #ff693b;
    color: #333;
    transition: all 0.5s ease-in-out;
}

.btn2:hover,
.btn2:active {
    background-color: #88b8dc;
    color: #fff;
}

.submit {
    display: block;
    width: 200px;
    margin: 0 auto;
    margin-bottom: 30px;
}

.desktop-show {
    display: none;
}

.mobile-show {
    display: unset;
}

/* 文字顏色 */
.font-green {
    color: #068485;
}

/* 顯示排列 */
.display-flex {
    display: flex;
}

/* 圖片顯示 */
img {
    width: auto;
    vertical-align: middle;
}

#page_about .page .text-area img {
    width: 50px;
    margin-bottom: -11px;
}

#egame .page .text-area img {
    width: 50px;
    margin-bottom: -11px;
}

#bulletin .page .text-area img {
    width: 50px;
    margin-bottom: -11px;
}

/* 獲取手機驗證碼按鈕樣式 */
.verification-code-block {
    display: flex;
    justify-content: center;
}

.verification-code {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 10px 0;
    border-radius: 5px;
    border: none;
    background-color: #087b33;
    color: #fff;
    box-shadow: 3px 3px 0px #084820;
    transition: all 0.5s ease-in-out;
    max-width: 250px;
    margin-bottom: 20px;
    cursor: pointer;
}

.verification-code:hover,
.verification-code:active {
    background-color: #0d9c41;
}

.verification-code .btn-img {
    width: 16px;
    color: #fff;
    margin-right: 8px;
}

.verification-code .link-btn-svg {
    width: 100%;
    height: 100%;
}

.verification-code-block .verification-code h3 {
    margin: 0;
    font-size: 20px;
}

/* header區 */
#web {
    display: none;
}

header {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 10000;
    background: #fff;
    padding: 0 0 10px;
}

.nav {
    background-color: transparent;
    padding: 0 !important;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 50px;
    box-sizing: border-box;
    align-items: flex-end;
}

#headMobile .main-item h3 {
    margin: 0;
    color: #000000;
}

.nav a img {
    width: 130px;
    margin-left: 10px;
}

.nav .btn1 {
    padding: 8px 23px !important;
}

.current-page-title {
    text-align: center;
    position: fixed;
    width: 210px;
    padding: 10px;
    background: #88b8dc;
    border-radius: 8px;
    left: 23px;
    top: 176px;
    box-shadow: 0 3px 10px #151f36;
}

.current-page-title p {
    color: white;
    font-size: 14px;
    margin: 0;
}

button {
    outline: none;
}

.hamburger-inner,
.hamburger-inner::before,
.hamburger-inner::after {
    background-color: #333;
}

.hamburger.is-active .hamburger-inner,
.hamburger.is-active .hamburger-inner::before,
.hamburger.is-active .hamburger-inner::after {
    background-color: #333;
}

.hamburger:hover,
.hamburger.is-active:hover {
    opacity: 1;
}

.index-link-block {
    display: none;
    width: 100%;
    height: 100vh;
    padding: 0 30px;
    background-color: #21295a;
    position: fixed;
    top: 55px;
    box-sizing: border-box;
}

#mobile .index-link-block a {
    width: 75%;
    margin: 10px 2%;
    border: 1px solid #88b8dc;
    border-radius: 10px;
    margin-bottom: 9px;
    color: #f1f1f1;
    text-align-last: center;
}

#mobile .index-link-block a:hover {
    background: #88b8dc;
    color: #000000;
}

#mobile .index-link-block a:focus {
    background: #88b8dc;
    color: #000000;
}

#mobile .secondary-item.show {
    display: flex !important;
    width: 100%;
    z-index: 1000;
    flex-direction: column;
    align-items: center;
}

.index-link-block.show {
    display: block;
    /* right: 0; */
    z-index: 1000;
    text-align: center;
}

.index-link-block .group {
    padding: 30px 0;
}

.index-link-block .group:nth-child(2) {
    padding-top: 0;
}

.group .main-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 5px;
    border-bottom: 1px solid #f1f1f1;
}

.main-item {
    font-weight: bold;
    /* font-size: 18px; */
}

.unfold-btn .open,
.unfold-btn .close {
    display: none;
    width: 18px;
}

.unfold-btn .show {
    display: block;
}

.secondary-item {
    display: none;
}

.secondary-item.show {
    display: block;
}

.secondary-item a {
    display: block;
    padding: 10px 0;
}

#mobile .index-link-block .btn2 {
    display: block;
    text-align: center;
    border-width: 2px;
    margin: 0 auto;
    background: transparent;
    padding: 10px 15px;
}

.mobile-title {
    position: fixed;
    left: 0;
    right: 0;
    top: 55px;
    display: flex;
    flex-wrap: wrap;
    padding: 8px 12px 8px 80px;
    z-index: 9;
    background: #88b8dc;
    color: white;
    justify-content: center;
    box-shadow: 0 0 10px #333333;
}

.mobile-title h2 {
    margin: 5px 0;
    font-size: 20px;
}

.mobile-title a {
    font-size: 24px;
    position: absolute;
    left: 13px;
    top: 9px;
}

@media screen and (min-width: 1024px) {
    .header-web {
        width: 100%;
        height: 60px;
        background-color: #1b1e24;
        position: fixed;
        top: 0;
    }
}

/* footer區 */
footer {
    text-align: center;
    background-color: #000;
    display: none;
}

footer p {
    font-size: 12px;
    padding: 12px 0;
    color: #ffffff;
}

@media screen and (min-width: 768px) {
    .footer {
        display: block;
    }
}

.full-page {
    width: 100%;
    height: 100vh;
    display: grid;
    place-items: inherit;
}

/* 內容範圍 */
.container {
    max-width: 1200px;
    padding: 0 15px;
    margin: 0 auto;
}

.container-marquee {
    display: flex;
    max-width: 1200px;
    margin: auto;
    justify-content: center;
    background-color: transparent;
}

/*================================================*/
/* login + register */
.web-left-block,
.web-right-block {
    padding: 0 15px;
}

.web-left-block {
    display: none;
    padding-top: 30px;
    text-align: center;
}

.web-left-block img {
    width: 100%;
    max-width: 150px;
}

.web-right-block {
    width: 90%;
    max-width: 800px;
}

.web-center-block {
    background: #141c4be8;
    padding: 30px;
    max-width: 800px;
    width: 40%;
    height: 100%;
    display: grid;
    place-items: center;
}

@media screen and (min-width: 768px) {
    .web-center-block {
        background: #141c4be8;
        padding: 30px;
        max-width: 800px;
        margin: 0 0 0 auto;
    }
}

@media screen and (max-width: 767px) {
    .web-center-block {
        width: 100%;
    }
}

.web-center-block .enter-frame .enter-logo {
    width: 100%;
    max-width: 180px;
    margin-bottom: 60px;
}

.enter-frame h1 {
    color: #88b8dc;
    font-weight: 700;
    margin-top: 0;
}

.login-btn {
    margin-top: 30px;
}

.link-area {
    /* max-width: 400px; */
    margin: 20px auto 30px;
    padding-top: 15px;
    display: flex;
    justify-content: space-evenly;
    border-top: 1px solid #fafbff;
}

.login-logo {
    display: block;
    width: 200px;
    margin: 0 auto;
    margin-bottom: 20px;
}

.introduction {
    display: none;
}

.web-center-block .text-block {
    margin-bottom: 20px;
    line-height: 1.5rem;
}

/* register */
.communication-software {
    margin: 0;
}

.register_form .img-block {
    display: flex;
    margin-top: 5px;
    align-items: center;
}

.change {
    background-image: url(./img/waner/icon_change.png);
    width: 32px;
    height: 32px;
    cursor: pointer;
    margin-left: 15px;
}

.input-verification-code-block .display-flex .img-block {
    margin-right: 10px;
}

[type="checkbox"] {
    width: 21px;
    height: 21px;
    margin-right: 5px;
    margin-top: 0;
}

.withdraw_form h2 {
    font-size: 18px;
    margin-bottom: 3px;
    color: #000000;
}

.input-block span {
    margin-left: 8px;
    display: inline-block;
    display: inline-block;
    color: #f00;
    margin: 3% 0;
    line-height: 1rem;
}

/*================================================*/
/* 會員中心共同 */

.area .container {
    /* padding: 0 15px; */
    box-sizing: border-box;
}

.area .container-marquee {
    padding: 0 15px;
    box-sizing: border-box;
}

.area .main-title {
    height: 150px;
    background-image: url(./img/waner/login_bg.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    display: flex;
    align-items: center;
}

.area .main-title h1 {
    color: #ff693b;
}

.area .content {
    padding-top: 75px;
    padding-bottom: 65px;
    padding-left: 15px;
    padding-right: 15px;
}

.area h3 {
    margin-bottom: 20px;
}

@media screen and (min-width: 425px) {
    .area .content {
        padding-bottom: 90px;
    }
}

@media screen and (min-width: 768px) {
    .area .content {
        padding-bottom: 70px;
    }
}

/*================================================*/
/* member */
#member .phone {
    position: relative;
}

/* 手機驗證提示 */
#valid {
    min-width: 70px;
    height: 25px;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 11px;
    right: 8px;
    padding: 1px 8px;
    border-radius: 8px;
    color: #fff !important;
}

.label-danger {
    background-color: #b61b00;
}

.label-success {
    background-color: #0c7c1b;
}

/*================================================*/
/* verify */
.userphone {
    display: flex;
    align-items: center;
}

/*================================================*/
/* è¡¨æ ¼ */
#gameItem {
    /* width: 100%; */
    background-color: #fff;
    /* border: 1px solid #333; */
    border-spacing: 0;
    margin-bottom: 20px;
}

#gameItem thead th {
    border-bottom: 2px solid #333;
    background-color: #333;
    color: #fff;
}

#gameItem tbody td {
    border-bottom: 1px solid #333;
}

#gameItem tbody tr:last-child td {
    border-bottom: none;
}

.gameItem-title {
    width: 70%;
    padding: 5px 10px;
    text-align: left;
}

.wallet-frame {
    background: #ffffffcc !important;
    display: flex;
    flex-wrap: wrap;
    margin-top: 15px;
    padding: 10px;
    border-radius: 3px;
}

.money {
    font-size: 14px;
    text-align: right;
    padding-left: 20px;
}

/*================================================*/
/* transfer */
.money i {
    cursor: pointer;
}

.precautions {
    background: #000000b8;
    padding: 15px;
    border-radius: 15px;
    margin-bottom: 10px;
}

.precautions h4 {
    margin-bottom: 20px;
}

.precautions ol {
    padding-inline-start: 20px;
    font-size: 12px;
    line-height: 1.5;
}

.precautions li {
    margin-bottom: 16px;
    list-style: outside decimal;
}

.precautions p {
    font-size: 12px;
}

/*================================================*/
/* bank */
.precautions img {
    width: 100%;
    max-width: 550px;
}

/*================================================*/
/* link-btn-block */
#list-content .link-btn {
    padding: 10px 15px;
    background-color: #5b5b5b80;
    border-radius: 15px;
    color: #fff;
    transition: all 0.3s ease-in-out;
    box-sizing: border-box;
    margin-bottom: 10px;
}

#list-content .link-btn:hover {
    background-color: #88b8dc;
}

#list-content .link-btn.active {
    background-image: linear-gradient(to right, #88b8dc 0%, #2d609f 100%);
}

#list-content .link-btn .btn-img {
    width: 24px;
    height: 24px;
    color: #fff;
    margin: 0 15px;
}

#list-content .link-btn p {
    font-size: 1em;
    line-height: 1em;
    margin-top: -5px;
}

.link-btn-svg {
    fill: currentColor;
}

#list-content .link-btn .link-btn-img {
    width: 50px;
    height: 50px;
    margin: auto;
    margin-bottom: 10px;
}

#list-content .link-btn .btn-img-1 {
    background-image: url(./img/waner/icon_center-1.svg);
    transition: all 0.3s ease-in-out;
}

#list-content .link-btn.active .btn-img-1,
#list-content .link-btn:hover .btn-img-1 {
    background-image: url(./img/waner/icon_center-1-hover.svg);
}

#list-content .link-btn .btn-img-2 {
    background-image: url(./img/waner/icon_center-2.svg);
    transition: all 0.3s ease-in-out;
}

#list-content .link-btn.active .btn-img-2,
#list-content .link-btn:hover .btn-img-2 {
    background-image: url(./img/waner/icon_center-2-hover.svg);
}

#list-content .link-btn .btn-img-3 {
    background-image: url(./img/waner/icon_center-3.svg);
    transition: all 0.3s ease-in-out;
}

#list-content .link-btn.active .btn-img-3,
#list-content .link-btn:hover .btn-img-3 {
    background-image: url(./img/waner/icon_center-3-hover.svg);
}

#list-content .link-btn .btn-img-4 {
    background-image: url(./img/waner/icon_center-4.svg);
    transition: all 0.3s ease-in-out;
}

#list-content .link-btn.active .btn-img-4,
#list-content .link-btn:hover .btn-img-4 {
    background-image: url(./img/waner/icon_center-4-hover.svg);
}

#list-content .link-btn .btn-img-5 {
    background-image: url(./img/waner/icon_center-5.svg);
    transition: all 0.3s ease-in-out;
}

#list-content .link-btn.active .btn-img-5,
#list-content .link-btn:hover .btn-img-5 {
    background-image: url(./img/waner/icon_center-5-hover.svg);
}

/*================================================*/
/* ä¸Šä¸‹é */
.next-page-block {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
}

.next-page-block a,
.next-page-block span {
    color: #2d609f;
    font-size: 14px;
    margin: 0 8px;
}

.pagination {
    display: flex;
    list-style-type: none;
    padding-inline-start: unset;
}

.pagination .disabled span {
    color: #212121;
}

.next-page-block a:hover {
    color: #ffc711;
}

/*================================================*/
/* no-information */
.no-information {
    background-color: rgba(255, 255, 255, 0.7);
    padding: 100px;
    border-radius: 10px;
}

.no-information p {
    text-align: center;
}

/*================================================*/
/* message */
/* 歷史訊息表 */
.message-block {
    background-color: #00000066;
    margin-bottom: 20px;
    word-break: break-all;
    border-radius: 15px;
    color: #fff;
}

.massage-title {
    padding: 10px 15px;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    font-size: 14px;
}

.massage-title-block {
    margin-bottom: 0;
}

.massage-title-block:last-child {
    margin-bottom: 0;
}

.massage-title-block p {
    margin: 0;
    min-width: 50px;
}

.content-text {
    color: #2e2e2e;
    margin-top: 5px !important;
}

.Reply {
    color: green;
}

.reply-content {
    display: none;
    padding-bottom: 15px;
    margin: 30px 15px 0;
}

.reply-content.show {
    display: block;
}

.detail-show {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 5px 0;
    background-color: #3c3c3c;
    color: #fff;
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
}

.detail-show:hover {
    background-color: #2d609f;
}

.detail-show p {
    margin-block-start: 0;
    margin-block-end: 0;
}

.detail-show i {
    margin-left: 10px;
    padding-top: 5px;
}

.member-message {
    border-bottom: 1px solid #fff;
    padding-bottom: 15px;
}

.member-message h3,
.customer-service h3 {
    font-size: 20px;
}

/*================================================*/
/* record */
.form-block {
    background-color: #000000c0;
    padding: 15px;
    border-radius: 5px;
    margin-bottom: 20px;
    color: #fff;
}

.form-block:hover {
    background-color: #22436c;
    box-shadow: 0 3px 15px #333;
}

.form-block .form-top {
    padding-bottom: 8px;
    border-bottom: 1px solid #ffffff;
}

.form-block .form-block-title {
    color: #88b8dc;
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 8px;
}

.form-block .form-top span {
    margin: 0;
    font-size: 12px;
    font-weight: 300;
    color: #cddcf1;
}

.form-content p {
    margin-bottom: 4px;
}

/*================================================*/
/* store */
.wallet-address-title {
    margin-top: 0;
    margin-bottom: 0;
    font-size: 16px;
    padding-right: 10px;
}

.wallet-address {
    list-style-type: none;
    padding-inline-start: 0px;
    font-weight: bold;
    margin-top: 0;
    font-size: 16px;
}

/*================================================*/
/* withdraw */
#bankSelect,
#bank-account,
#bank-name {
    display: flex;
    align-items: center;
}

.text-block h2 {
    color: #88b8dc;
}

@media screen and (max-width: 1024px) {
    header {
        background: #fff !important;
    }

    .title-icon {
        display: none;
    }

    #list-content .link-btn img {
        display: none;
    }

    .area .content {
        background: #00000014;
        /* min-height: 80vh; */
    }
}

.mobile-fixed {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #67bada;
    box-shadow: 0 0 12px #000000bb;
    display: flex;
}

@media screen and (min-width: 1024px) {
    .mobile-fixed {
        position: absolute;
        top: 0;
        bottom: unset;
    }

    .link-btn {
        height: 65px;
    }
}

.linkGroup {
    display: flex;
}

.link-btn {
    flex: 1;
    text-align: center;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    transition: all 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
    flex-direction: row;
}

.link-btn:hover {
    background-color: #00000036;
}

.link-btn a {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding: 15px 0;
    color: #fff;
    display: grid;
    place-items: center;
}

.link-btn.active a {
    color: #000000;
}

.mobile-icon {
    width: 24px;
    height: 24px;
    transition: all 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
}

.link-btn p {
    font-size: 0.7rem;
    padding-top: 4px;
    margin-top: 4px;
    line-height: 1;
}

/* RWD */
/* 桌機版 */

@media screen and (min-width: 1024px) {
    .area .container {
        padding: 0 15px;
        box-sizing: border-box;
    }

    .area .index-page {
        padding: 100px 0;
        margin: 0 15px;
    }

    .desktop-show {
        display: unset;
    }

    .mobile-show {
        display: none;
    }

    /* header區 */
    #mobile {
        display: none;
    }

    #web {
        display: block;
    }

    #web .right-index-link-block {
        /* width: 750px; */
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    #web .right-index-link-block a {
        font-size: 14px;
        margin: 0 12px;
    }

    footer {
        text-align: center;
        background-color: #000000;
        display: block;
        /* position: fixed;
        bottom: 0;
        left: 0;
        right: 0; */
    }

    .web-left-block img {
        margin-top: 32vh;
    }

    /* login + register */

    .web-right-block {
        /* border-left: 1px solid #fff; */
        padding: 0 50px;
    }

    .full-page .flex {
        display: flex;
    }

    .full-page .flex form {
        width: 65%;
    }

    .login-logo {
        margin-left: 0;
    }

    /* login */

    .full-page .web-left-block {
        display: block;
        width: 20%;
        background: #0a65adb8;
        box-shadow: 1px 0px 15px black;
        background-image: url(./img/waner/login_bg_r.jpg);
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
    }

    .full-page .web-right-block {
        width: 80%;
    }

    .introduction {
        display: block;
        width: 35%;
        padding-right: 80px;
    }

    /* register */
    .input-block-area {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .input-block-area .input-block {
        width: calc(50% - 5px);
    }

    .input-verification-code-block {
        padding: 20px 0;
    }

    .verification {
        display: flex;
        align-items: center;
    }

    .register_form .img-block {
        margin-left: 15px;
    }

    /*================================================*/
    /* 會員中心共同 */
    /* .area .index-page {
        padding: 15px;
    } */

    .area #web .container {
        position: absolute;
        left: 0;
        right: 0;
        display: flex;
        justify-content: center;
        padding: 50px 15px 0;
        max-width: 1200px;
        margin: 0 auto;
    }

    #web .container.navibar {
        z-index: 99999;
        position: fixed;
        left: 18px;
        top: 0px;
        background: -webkit-linear-gradient(143deg, #424242, #222222);
        background: linear-gradient(143deg, #424242, #222222);
        display: grid;
        height: 162px;
        overflow: hidden;
        width: 220px;
        right: unset;
        flex-wrap: unset;
        border-radius: 0 0 10px 10px;
        /* height: 100vh; */
        box-shadow: 0 3px 10px #151f36;
        padding-top: 30px;
        padding-bottom: 30px;
        transition: all 0.3s ease-in-out;
    }

    #web .container.navibar:hover {
        height: 540px;
        background: -webkit-linear-gradient(143deg, #5e5e5e, #353535);
        background: linear-gradient(143deg, #5e5e5e, #353535);
        transition: all 0.3s ease-in-out;
    }

    #web .container.navibar h3 {
        color: white;
        margin-top: 0;
        font-size: 15px;
        margin-bottom: 20px;
    }

    #web .container.navibar a {
        /* text-align: left !important; */
    }

    .user-icon {
        width: 118px;
    }

    #web .member-center-title {
        background: rgba(255, 255, 255, 0.5);
    }

    #web .member-center-title .block-content {
        position: relative;
        height: 100px;
    }

    #web .member-center-title .position {
        display: flex;
        align-items: flex-start;
        position: absolute;
        top: 18px;
        left: 0;
    }

    #web .member-center-title .position h1 {
        margin: 0;
        margin-top: 25px;
        margin-left: 20px;
        color: #fff;
    }

    .block-content {
        max-width: 1200px;
        margin: 0 auto;
    }

    .area #web .container-marquee {
        display: flex;
        justify-content: center;
        padding: 50px 0 0;
    }

    .area #web .container a {
        width: 220px;
        margin: 5px 3px 0 3px;
        text-align: center;
        padding: 10px 0;
        /* border-top-left-radius: 15px;
        border-top-right-radius: 15px; */
        transition: all 0.3s ease-in-out;
    }

    .area #web .container a:hover {
        background-color: #ff693b;
        color: #fff;
    }

    .area #web .container a.active {
        background-color: #88b8dc;
        color: #fff;
    }

    .area .form {
        display: flex;
    }

    .area .form .right,
    .area .form .left {
        padding: 0 10px;
        width: 50%;
    }

    .area .form .right {
        border-right: 1px solid #7a7a7a8e;
        /* padding-right: 30px; */
    }

    .area .form .right .input-block:first-child {
        margin-top: 0;
    }

    .area .form .left {
        padding-left: 30px;
        padding-right: 15px;
    }

    /* .area .form .left h4 {
        margin-top: 0;
        font-size: 12px;
    } */

    .area .content {
        background-image: url(./img/waner/member-bg.jpg);
        background-size: cover;
        background-repeat: no-repeat;
        background-attachment: fixed;
        padding: 40px 15px 40px 40px;
        border-radius: 20px;
        box-shadow: 0 3px 15px rgba(0, 0, 0, 0.322);
    }

    .precautions {
        background: #000000b8;
        padding: 15px;
        border-radius: 15px;
    }

    /*================================================*/
    /* list-content */
    #list-content .form .right {
        width: 20%;
    }

    #list-content .form .left {
        width: 80%;
    }

    /*================================================*/
    /* message */
    /* 歷史訊息表 */
    .massage-title-block {
        display: flex;
        align-items: center;
    }

    .massage-title-block .content-text {
        margin-top: 0 !important;
    }

    /*================================================*/
    /* record */
    .form-block {
        display: flex;
    }

    .form-block .form-top,
    .form-block .form-content {
        /* width: 30%; */
        padding: 0 15px;
    }

    .form-block .form-content {
        padding: 0 15px 0 40px;
    }

    .form-block .form-top {
        border-bottom: none;
        padding-bottom: 0px;
        border-right: 1px solid transparent;
    }
}

@media screen and (max-width: 1024px) {
    .main .control-panel,
    .main .game-panel {
        height: calc(100vh - 59.5px);
    }
}

@media screen and (max-width: 419.9px) {
    .main .game-panel {
        display: none;
    }

    ::-webkit-scrollbar {
        width: 0;
        height: 0;
    }

    .precautions {
        margin-bottom: 30px;
    }

    .main .control-panel {
        width: 100%;
        margin-left: 0;
        overflow-y: hidden;
    }

    .mobile-fixed {
        top: unset;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 55px;
        padding: 4px;
        display: flex;
        justify-content: space-evenly;
    }

    .mobile-fixed .link-btn {
        height: unset;
    }

    .mobile-fixed .link-btn br,
    .mobile-fixed .link-btn p {
        display: none;
    }

    .mobile-title {
        padding: 8px;
    }

    .link-btn[data-info~="hidden"] {
        display: none;
    }
}

.member-heading {
    background: #06aeef;
    color: #fff;
}
.member-heading span,
.member-heading i {
    color: #fff;
    display: block;
}
.member-heading a {
    display: block;
    text-align: center;
}
.member-heading i {
    margin-bottom: 5px;
}
.member-heading a:hover span,
.member-heading a.active span {
    font-weight: bold;
}

table,
td,
th {
    border: 1px solid;
}
td,
th {
    padding: 10px;
}