/*-----------------------------共用元件-----------------------------*/
/*--------------- 頁面內容layout -------------*/
.page-content-default {
    display: flex;
    flex-direction: column;
    gap: .8rem;
    margin-top: 72px;
    padding: 1rem 12%;
}

.page-content-default .page-content-list {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    gap: .6rem;
}

.page-content-default .page-content-list .area-menu {
    display: flex;
    flex-direction: column;
    width: 20%;
    height: 100%;
    min-width: 200px;
    justify-content: flex-start;
    align-items: flex-start;
    gap: .2rem;
    padding: .6rem;
    border-radius: 12px;

}

.page-content-default .area-content {
    width: 100%;
    /* height: 100%; */
    padding: 2rem;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    gap: 1.6rem;
    align-self: stretch;
}

.page-content-default .area-content.article {
    line-height: 32px;
    gap: .6rem;
    .btn-tabs {
        line-height: normal;
    }
}

.page-content-default .area-content .content-title {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: space-between;
    width: 100%;
    gap: 1rem;
}

.page-content-default .area-content .content-title .item {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.page-content-default .content-title .list-function {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    gap: .6rem;
}

.page-content-default .list-function .dropdown {
    width: 200px;
}

.page-content-default .area-content .list-content {
    display: flex;
    flex-direction: row;
    gap: 2rem;
}

.page-content-default .area-content .list-content .item {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-width: 200px;
}

.page-content-list .area-menu .btn-menu {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: .6rem;
    width: 100%;
    padding: .6rem .8rem;
    position: relative;
    cursor: pointer;
}

.page-content-list .area-menu .btn-menu .icon {
    width: 28px;
    height: 28px;
}

.page-content-list .area-menu .btn-menu.active,
.page-content-list .area-menu .btn-menu:hover {
    .text {
        font-weight: bold;
    }
}

@media (max-width: 1280px) {
    .page-content-default {
        padding: 1rem 4%;
    }

    .page-content-default .area-content .list-content {
        gap: 1rem;
    }
}

/* 版本號 */
.page-content-default .area-menu .version {
    display: flex;
    justify-content: center;
    width: 100%;
    padding: .6rem;
}

/*--------------------- 頁面標題 -------------------*/
.page-title {
    display: flex;
    align-items: center;
    position: relative;
    font-size: 1.5rem;
    font-weight: 700;
    margin-top: 1.8rem;
}
.page-back {
    cursor: pointer;
}

/*--------------------- 頁籤 ----------------------*/
.page-tabs {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 1rem;
    width: 100%;
    min-height: 44px;
}

.page-tabs .btn-tabs {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: .4rem;
    min-width: 100px;
    cursor: pointer;
}

.page-tabs .btn-tabs .text {
    font-size: 1.1rem;
    font-weight: bold;
}


/*---------------- 備註文字 -----------------*/
.remark {
    font-size: .9rem;
    padding: .2rem 0;
    text-align: center;
}


/*---------------- icon ----------------*/
/* Copy */
.icon-copy {
    width: 24px;
    height: 24px;
    cursor: pointer;
}

/*--------------- 無資料 ---------------*/
.nodata {
    display: flex;
    width: 100%;
    opacity: 50%;
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
    padding: 6rem 0;
}

.nodata .nodata-icon {
    font-size: 1.6rem;
}

/*-------------- 分頁元件 --------------*/
.pagination {
    width: 100%;
    display: flex;
    flex-direction: row;
    gap: .3rem;
    align-items: center;
    justify-content: center;
}

.pagination .btn {
    min-width: 24px;
    height: 24px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: .9rem;
    border-radius: 4px;
    cursor: pointer;
}

.pagination .btn.active {
    font-weight: bold;
}

.pagination .btn.last-page .icon,
.pagination .btn.first-page .icon {
    width: 24px;
    height: 24px;
}

/*----------------- 表格類 ------------------*/
/* 最外層 */
.table {
    margin: 0;
}

table {
    border-spacing: 0;
}

table td {
    min-width: 2em;
    padding: .4rem;
}

.table {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    overflow-x: auto;
    font-size: .85rem;
    gap: .4rem;
}

.table .row {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    min-height: 58px;
    width: 100%;
    border-radius: 4px;
}

.table .row.title {
    font-weight: bold;
    height: 2rem;
}

.table .row .colum {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: .2rem;
    width: 100%;
    height: 100%;
    overflow: hidden;
    text-align: center;
    gap: .2rem;
}

.table .row .colum.data-remark {
    align-items: flex-start;
    justify-content: flex-start;
    text-align: left;
    overflow-y: auto;
    padding-right: .4rem;
}

.table .row .colum.data-remark::-webkit-scrollbar {
    width: 6px;
    border-radius: 5rem;
}

.table .row .colum.data-remark::-webkit-scrollbar-thumb {
    border-radius: 5rem;
}

@media (max-width: 1280px) {
    .table {
        font-size: .8rem;
    }
}

/*--------------------- 分隔線 ---------------------*/
/* 水平 */
.hr {
    width: 100%;
    height: 1px;
}

/* 垂直 */
.hr-vertical {
    width: 1px;
}


/*---------------------checkbox---------------------*/
.checkbox {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: .4rem;
    height: 2rem;
}

.checkbox .btn-check {
    width: 1.2rem;
    height: 1.2rem;
    border-radius: 4px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

.btn-check .icon {
    display: none;
}

.btn-check.active .icon {
    display: block;
    font-size: .9rem;
}


/*---------------------Input---------------------*/
input[type=file] {
    display: none;
}

.input-area {
    width: 100%;
    display: flex;
    gap: .4rem;
    flex-direction: column;
}

/* 輸入框內容 */
.input-area .input-content {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: .4rem;
    width: 100%;
}

/* 欄位標題 */
.input-area .field-title {
    display: flex;
    flex-direction: row;
    gap: .2rem;
    font-size: 1rem;
    font-weight: bold;
}

.field-title .required {
    font-size: 1rem;
}

/* 輸入框 */
.input-area .input-text {
    width: 100%;
    height: 2.8rem;
    border-radius: 4px;
}

/*輸入框禁用*/
.input-area .input-text.disabled {
    pointer-events: none;
    cursor: default;
    opacity: 0.4;
}

/* 輸入規則 */
.input-area .input-hint {
    font-size: .9rem;
}

/* 錯誤提示 */
.input-area .error-hint {
    font-size: .9rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

/* 備註 */
.input-area .input-remark {
    font-size: .9rem;
}

/*---------------Input (選擇類)--------------*/
/* 輸入框 */
.input-area .input-content {
    width: 100%;
    height: 2.8rem;
    border-radius: 4px;
    display: flex;
    align-items: center;
    flex-direction: row;
}

.input-area .input-content .input-text {
    display: flex;
    align-items: center;
}

.input-area .input-content .input-text.disable {
    pointer-events: none;
    cursor: default;
    opacity: 0.4;
}
/*---------------Input (上傳)--------------*/
.input-area .input-upload {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: .4rem;
    width: 100%;
}

.input-area .input-upload .input-text {
    width: 100%;
    height: 2.8rem;
    border-radius: 4px;
    display: flex;
    align-items: center;
    padding: .6rem;
}

.input-area .input-upload .input-text .file-name {
    text-align: left;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.input-area .input-upload .btn-function {
    width: 6rem;
    cursor: pointer;
}

/*----------------Input (時間)---------------*/
.input-time {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: .2rem;
    font-size: .9rem;
    justify-content: space-between;
    border-radius: 4px;
    padding: .6rem 0 .6rem .6rem;
    height: 2.8rem;
    cursor: pointer;
}

.input-time .input-date {
    font-size: .9rem;
}

/*----------------Input (密碼)---------------*/
.input-content.password {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: .4rem;
    border-radius: 4px;
    width: 100%;
    padding: 0 1rem 0 0;
    height: 2.5rem;
}

.input-content.password .password-icon {
    font-size: 1.1rem;
}

/*------------ 密碼 顯示/關閉 ------------*/
.input-content.password .password-icon {
    font-size: 20px;
}
.login-pwd-icon {
    display: flex;
    flex-direction: column;
    height: 16px;
    overflow: hidden;
    cursor: pointer;
    .password-icon {
        min-height: 16px;
    }
    &.is-show {
        justify-content: flex-end;
    }
}


/*---------------- 下拉選單 ----------------*/
.dropdown {
    height: 2.8rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .4rem;
    position: relative;
    border-radius: 4px;
    width: 100%;
    font-size: .9rem;
}

.dropdown .dropdown-btn {
    display: flex;
    align-items: center;
    width: 100%;
    height: 2.8rem;
    padding: .6rem;
    cursor: pointer;
}

.dropdown-btn .option {
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.dropdown-btn .icon {
    font-size: .9rem;
}

.dropdown .list-option {
    width: 100%;
    border-radius: 4px;
    padding: .6rem;
    position: absolute;
    top: 3.2rem;
    max-height: 300px;
    overflow: hidden;
    overflow-y: auto;
    z-index: 999;
}

.list-option .option {
    width: 100%;
    padding: .6rem 0;
    display: flex;
    justify-content: center;
    border-radius: 4px;
    cursor: pointer;
    text-align: center;
    line-height: 20px;
    word-break: break-word;
}

/*-------------下拉選單 (手機國碼)-----------*/
.dropdown.phone {
    width: 8rem;
}

/*下拉選單 (手機國碼台灣站無法選擇)*/
.dropdown.phone.disabled {
    pointer-events: none;
    cursor: default;
}


/*----------------- 按鈕 -----------------*/
/* 一般按鈕 */
.button {
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 10rem;
    padding: .3rem;
    cursor: pointer;
}

/* 按鈕-純文字 */
.btn-text {
    font-weight: 400;
    font-size: 1rem;
    cursor: pointer;
}

/* 按鈕-文字link */
.btn-text-link {
    font-size: 1rem;
    font-weight: 400;
    text-decoration: underline;
    cursor: pointer;
}

/* 按鈕-確認(正向選項) */
.btn-confirm {
    width: 100%;
    font-size: 1rem;
    font-weight: 700;
    padding: .8rem 0;
    border-radius: 4px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    border: 1px solid transparent;
    color: #fff;
    &.disable {
        opacity: .4;
    }
}

/* 按鈕-送出(正向選項) */
.btn-send {
    width: 100%;
    font-size: 1rem;
    font-weight: 700;
    padding: .8rem 0;
    border-radius: 4px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    &.disable, &:disabled {
        pointer-events: none;
    }
}

/* 按鈕-取消(反向選項) */
.btn-cancel {
    width: 100%;
    font-size: 1rem;
    font-weight: 700;
    padding: .8rem 0;
    border-radius: 4px;
    display: flex;
    justify-content: center;
    cursor: pointer;
}

/* 功能按鈕 */
.btn-function {
    font-weight: bold;
    border-radius: 4px;
    width: 60%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    height: 2.8rem;
    align-items: center;
    overflow: hidden;
    text-align: center;
    gap: .4rem;
    cursor: pointer;
}

.btn-function .countdown {
    display: none;
}

/* 功能按鈕 禁能狀態 */
.btn-function.disable {
    width: 66%;
    cursor: default;
    pointer-events: none;
}

.btn-function.disable .countdown {
    display: block;
    font-size: .9rem;
}

/* 選項按鈕 */
.btn-option {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    padding: 0.4rem 0.8rem;
    border-radius: 10px;
    font-size: .8rem;
    font-weight: bold;
    min-width: 80px;
    cursor: pointer;
}
.popup-content {
    .btn-option {
        padding: .8rem;
        border-radius: 4px;
        font-size: 1rem;
    }
}

/* 選擇按鈕 */
.input-content .btn-edit,
.input-content .btn-select {
    font-weight: bold;
    text-align: center;
    border-radius: 6rem;
    padding: .2rem .6rem;
    cursor: pointer;
}


/*---------------------彈窗---------------------*/
.popup {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 420px;
    min-width: 360px;
}

/* 彈窗標題 */
.popup .popup-title {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: .4rem 1rem;
    border-radius: 12px 12px 0 0;
}

.popup-title .title-text {
    width: 100%;
    font-size: 1.4rem;
    font-weight: bold;
    display: flex;
    justify-content: center;
}

/* 關閉按鈕 */
.popup-title .btn-close {
    position: absolute;
    right: .6rem;
    cursor: pointer;
}

.btn-close .icon-close {
    font-size: 2rem;
}

/* 彈窗內容 */
.popup .popup-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1.2rem;
    border-radius: 0 0 12px 12px;
    gap: 1.6rem;
    height: 100%;
    overflow-y: auto;
}

/* 彈窗按鈕 */
.popup .popup-btn {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width: 100%;
    font-size: 1rem;
    font-weight: bold;
    gap: .6rem;
    margin-top: 1rem;
}



/*------------------------------遊戲介面-----------------------------*/
#game-surface {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

#game-surface .game-header {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 1rem;
    height: 52px;
}

#game-surface .game-header .btn-list {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: .4rem;
}

#game-surface .game-header .btn {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    padding: .4rem .8rem;
    border-radius: 50rem;
    font-weight: bold;
    cursor: pointer;
}

#game-surface .game-header .btn.screen {
    width: 40px;
}

#game-surface .game-iframe {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

#game-surface .game-iframe .iframe {
    position: relative;
    width: 100%;
    height: 100%;
}

/* 優惠活動：Jackpot獎池 */
#game-surface .jp {
    display: flex;
    flex-direction: row;
    align-items: center;
    position: absolute;
    left: 4px;
    top: -4px;
    padding-left: 84px;

    .img-title {
        width: 110px;
        height: 30px;
        background: url(../../../images/common/jackpot/discount-jp-title.webp) no-repeat center;
        background-size: cover;
        position: absolute;
        top: 11px;
        left: 0;
    }

    .img-bg {
        width: 186px;
        height: 44px;
        background: url(../../../images/common/jackpot/discount-jp-amount-bg.webp) no-repeat center;
        background-size: cover;
        display: flex;
        align-items: center;
        justify-content: center;
        padding-top: 2px;
    }

    .amount {
        color: #FFFFFF;
        font-size: 1.1rem;
    }
}

/*---------------------------彈窗-多檯遊戲---------------------------*/
#game-surface-popup-multi .popup {
    width: fit-content;
    max-width: none;
    border-radius: 12px;
}

#game-surface-popup-multi .popup .popup-content {
    width: fit-content;
    padding: 0;
    border-radius: 0;
    max-height: 400px;
}

#game-surface-popup-multi .list-game {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1rem;
    padding: 2rem;
}

#game-surface-popup-multi .list-game .game-icon {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .4rem;
    position: relative;
    max-width: 100px;
}

#game-surface-popup-multi .game-icon .icon-border {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2px;
    border-radius: 8px;
    height: 100px;
    width: 100px;
    overflow: hidden;
    cursor: pointer;
}

#game-surface-popup-multi .game-icon:hover {
    .icon-border {
        transform: scale(1.1);
        transition: all 0.3s ease-in-out;
    }
}

#game-surface-popup-multi .game-icon .game-name {
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    text-align: center;
}

/* 選擇狀態 */
#game-surface-popup-multi .game-icon .tag-select {
    display: none;
}

#game-surface-popup-multi .game-icon.select .tag-select {
    position: absolute;
    right: -8px;
    top: -8px;
    display: block;
    width: 30px;
    height: 30px;
}

/* 選擇介面 */
#game-surface-popup-multi .surface-select {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 1.2rem 2rem;
    gap: 1.2rem;
    border-radius: 0 0 12px 12px;
}

#game-surface-popup-multi .surface-select .remark {
    font-size: 1rem;
    font-weight: bold;
}

#game-surface-popup-multi .surface-select .list-select {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width: 100%;
    gap: 2rem;
}

#game-surface-popup-multi .surface-select .list-select .item {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: .4rem;
    position: relative;
    width: 100px;
}

#game-surface-popup-multi .list-select .item .icon-border {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100px;
    height: 100px;
    border-radius: 8px;
    padding: 1px;
}

#game-surface-popup-multi .item .icon-border .icon-img {
    border-radius: 8px;
    width: 100%;
    height: 100%;
}

#game-surface-popup-multi .item.unselect .btn-delete,
#game-surface-popup-multi .item.unselect .icon-border .icon-img {
    display: none;
}

#game-surface-popup-multi .list-select .item.select .btn-delete {
    width: 28px;
    height: 28px;
    position: absolute;
    right: -8px;
    top: -8px;
    border-radius: 50rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

#game-surface-popup-multi .list-select .item .btn-delete .icon {
    width: 20px;
    height: 20px;
}

#game-surface-popup-multi .list-select .item .game-name {
    text-align: center;
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    text-align: center;
}

#game-surface-popup-multi .surface-select .popup-btn {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: .6rem;
}

#game-surface-popup-multi .popup-btn .btn-cancel,
#game-surface-popup-multi .popup-btn .btn-send {
    max-width: 164px;
}

/*---------------------------彈窗-遊戲內儲值---------------------------*/
#game-surface-popup-deposit .popup {
    max-width: fit-content;
    max-height: calc(100dvh - 5rem);
}
#game-surface-popup-deposit .popup-content {
    overflow-y: scroll;
}
#game-surface-popup-deposit .popup-content::-webkit-scrollbar {
    width: 6px;
    border-radius: 5rem;
}

#game-surface-popup-deposit .popup-content::-webkit-scrollbar-thumb {
    border-radius: 5rem;
}

#game-surface-popup-deposit .popup-content .list-content {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 1.4rem;
    position: relative;
    width: 800px;
}

#game-surface-popup-deposit .popup-btn .btn-cancel,
#game-surface-popup-deposit .popup-btn .btn-send {
    max-width: 164px;
}

#game-surface-popup-deposit .popup-content .hr-vertical {
    position: absolute;
    left: 50%;
    height: 100%;
}

#game-surface-popup-deposit .popup-content .list-content .item {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: .6rem;
    min-width: 200px;
}

/* 渠道資訊 */
#game-surface-popup-deposit .channel-info .info-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 1rem .4rem 1rem;
}

#game-surface-popup-deposit .channel-info .info-content .item {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: .4rem;
    height: 40px;
    padding: 0 .2rem;
    width: 100%;
}

#game-surface-popup-deposit .input-area .input-remark,
#game-surface-popup-deposit .item .text,
#game-surface-popup-deposit .input-area .field-title {
    font-size: .92rem;
}

#game-surface-popup-deposit .channel-info .item .text {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* QR Code */
#game-surface-popup-deposit .info-content .qrcode {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    padding: .4rem 0;
}

#game-surface-popup-deposit .qrcode .img-qrcode {
    width: 9rem;
    border-radius: 4px;
}

/* 上傳憑證 */
#game-surface-popup-deposit .input-upload .input-text .file-name {
    width: 280px;
}

/* 金額快捷 */
#game-surface-popup-deposit .list-content .item .area-amount .amount-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    width: 100%;
    gap: .4rem;
}

/* 彈窗按鈕 */
#game-surface-popup-deposit .popup-content .content-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: .6rem;
    width: 100%;
}

#game-surface-popup-deposit .popup-content .content-btn .btn-cancel,
#game-surface-popup-deposit .popup-content .content-btn .btn-send {
    max-width: 164px;
}



/*-------------------------------註冊------------------------------*/
#signup .popup {
    max-width: fit-content;

    .popup-content {

        .list-content {
            display: flex;
            flex-direction: row;
            gap: 1rem;

            .item {
                display: flex;
                flex-direction: column;
                gap: 1.4rem;
                width: 360px;
            }
        }

        .list-popup-btn {
            display: flex;
            flex-direction: column;
            gap: 1rem;

            .checkbox {
                justify-content: center;
            }

            .popup-btn {
                margin: 0;

                .btn-cancel,
                .btn-send {
                    min-width: 164px;
                }
            }

            .btn-text {
                text-align: center;
            }
        }
    }
}

/*-----------------------------登入註冊-----------------------------*/
#login-register {
    min-width: 1400px;
    background: url(../images/login-register/login-register-bg.webp) no-repeat center;
    background-size: cover;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    @media (max-height: 815px){
        overflow: hidden;
    }
}
.login-register-wrap {
    width: 1400px;
    height: 815px;
    display: flex;
    padding: 6px;
    background: rgba(255, 255, 255, .5);
    border-radius: 12px;
    @media (max-width: 1400px){
        padding: 0;
    }
}
.login-register-img {
    width: 600px;
    background: url(../images/login-register/login-register-img.webp) no-repeat left top;
    border-radius: 12px 0 0 12px;
}
.login-register-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 800px;
    padding: 4.375rem 5rem 0 5rem;
    gap: 1.75rem;
    @media (max-height: 815px){
        height: 100%;
    }
    .input-area {
        gap: .25rem;
        .field-title {
            font-size: .875rem;
        }
    }
}
.login-register-logo {
    width: 180px;
}
.login-register-container {
    display: flex;
    flex-direction: column;
    gap: 1.75rem;
    width: 100%;
    height: 100vh;
    align-items: center;
}
.login-register-tab {
    display: flex;
    flex-direction: row;
    gap: .6rem;
    padding: .4rem;
    border-radius: 12px;
    width: fit-content;
    .login-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 1rem 2rem;
        min-width: 139px;
        height: 46px;
        border-radius: 8px;
        font-size: 1rem;
        font-weight: bold;
        cursor: pointer;
    }
}

/* 登入 */
.login-container {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    padding: 0 1rem;
    .btn-function {
        max-width: 2.5rem;
        height: 2.5rem;
        font-size: 1.4rem;
        border: none;
    }
    .input-area {
        .input-content, .input-text  {
            height: 2.5rem;
        }
    }
}
.login-function {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width: 100%;
    .btn-forgot {
        display: flex;
        justify-content: flex-end;
        width: 100%;
        cursor: pointer;
    }
}
.graphic-verify-code {
    height: 2.5rem;
    img {
        width: auto;
        height: 2.5rem;
    }
}
.login-register-btn {
    display: flex;
    flex-direction: row;
    width: 380px;
    padding-top: 1rem;
    gap: .6rem;
}

/* 註冊 */
.register {
    display: flex;
    flex-direction: column;
    gap: .4rem;
    width: 100%;
    height: 100%;
    padding: 0 1rem;
}
.register-container {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: .9375rem;
    .input-area {
        .input-text {
            height: 2.5rem;
        }
    }
    .input-hint {
        font-size: .8rem;
    }
}
.register-function-btn {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    .checkbox {
        justify-content: center;
    }
}

.instant-messaging {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: .375rem;
    width: 100%;
    margin: auto 0 4.375rem 0;
    &:after, &:before {
        content: '';
        display: flex;
        width: 100%;
        height: 1px;
        background: #3F3F3F;
    }
    .item {
        display: flex;
        align-items: center;
        justify-content: center;
        min-width: 40px;
        height: 40px;
        border: 1px solid #424242;
        border-radius: 6px;
        cursor: pointer;
        transition: filter ease-in-out .3s;
        &.telegram {
            background: url(/common/desktop/images/icon-white/icon-im-telegram.svg) no-repeat center;
        }
        &.google {
            background: url(/common/desktop/images/icon-white/icon-im-google.svg) no-repeat center;
        }
        &.line {
            background: url(/common/desktop/images/icon-white/icon-im-line.svg) no-repeat center;
        }
        &:hover {
            filter: brightness(1.1);
        }
    }
}

/* 手機驗證 */
.register-mobile-verify {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.4375rem;
    width: 100%;
    .btn-function {
        width: auto;
        min-width: max-content;
        padding: 0 .5rem;
    }
}

.verify-title {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.625rem;
    font-weight: bold;
    min-height: 48px;
    border-bottom: 4px solid transparent;
}

/* 銀行卡驗證 */
.register-bankcard-verify {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .375rem;
    width: 100%;
    .input-area {
        gap: .125rem;
    }
    .input-content {
        height: 2.25rem;
    }
    .input-text {
        height: 2.25rem;
    }
    .dropdown {
        height: 2.25rem;
        .dropdown-btn {
            height: 2.25rem;
        }
    }
}

.bankcard-verify-bottom {
    display: flex;
    flex-direction: row;
    width: 100%;
    gap: 1.25rem;
    .item {
        width: 100%;
    }
    .input-upload {
        height: 2.25rem;
        padding: 0 10px;
        border-radius: 4px;
        justify-content: space-between;
        .upload-text {
            width: 225px;
            overflow:hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            align-items: flex-start;
            padding: 0;
            font-weight: bold;
        }
        label {
            height: 1.75rem;
            min-width: max-content;
            width: auto !important;
            padding: 0 .625rem;
        }
    }
}

/*-----------------------------彈窗-登入-----------------------------*/
#index-popup-login .popup-btn .btn-forgot {
    display: flex;
    justify-content: flex-end;
    width: 100%;
    cursor: pointer;
}

/*---------------------------彈窗-忘記密碼---------------------------*/
#index-popup-forgot .popup-btn .btn-login {
    display: flex;
    justify-content: flex-start;
    width: 100%;
    cursor: pointer;
}

#index-popup-forgot .popup-btn .btn-signup {
    display: flex;
    justify-content: flex-end;
    width: 100%;
    cursor: pointer;
}

/*---------------------------彈窗-每日簽到---------------------------*/
#index-popup-check .popup {
    max-width: fit-content;
}

#index-popup-check .popup-content .area {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .8rem;
    width: 100%;
}

#index-popup-check .area .area-title {
    font-size: 1.1rem;
    font-weight: bold;
}

#index-popup-check .area .list {
    width: 100%;
    gap: .4rem;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
}

#index-popup-check .area .list .btn-check {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: .4rem;
    height: 6rem;
    border-radius: 8px;
    font-size: .9rem;
    min-width: 66px;
    max-width: 170px;
}

#index-popup-check .list .btn-check .btn-img {
    width: 2rem;
    height: 1.8rem;
}

#index-popup-check .list .btn-check .btn-text {
    font-size: .9rem;
}

#index-popup-check .btn-check.confirmed .btn-text .award {
    display: none;
}

#index-popup-check .list .btn-check.today,
#index-popup-check .list .btn-check.today .btn-text {
    font-weight: bold;
}

#index-popup-check .area .total-day {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: .6rem;
    width: 100%;
    font-size: .9rem;
}

#index-popup-check .area .total-day .day {
    font-size: 1.1rem;
    font-weight: bold;
}

/* 適用遊戲大類 */
#index-popup-check {
    .popup {
        .popup-content {
            .game-category {
                display: flex;
                flex-direction: row;
                margin-right: auto;
                gap: .625rem;
                font-weight: bold;
                .game-category-title {
                    display: flex;
                    flex-direction: row;
                    &:after {
                        content: ':';
                        display: block;
                    }
                }
                .game-category-list {
                    display: flex;
                    flex-direction: row;
                    align-items: center;
                    flex-wrap: wrap;
                    list-style-type: none;
                    max-width: 400px;
                    margin: 0;
                    padding: 0;
                    li {
                        display: flex;
                        flex-direction: row;
                        align-items: center;
                        &:after {
                            content: '、';
                            display: block;
                        }
                        &:nth-last-of-type(1) {
                            &:after {
                                display: none;
                            }
                        }
                    }
                }
            }
        }
    }
}

/* 簽到按鈕 */
#index-popup-check .popup .popup-btn {
    justify-content: space-between;
}

#index-popup-check .popup .popup-btn .checkbox {
    width: fit-content;
    cursor: pointer;
}

#index-popup-check .popup-btn .btn-send {
    border-radius: 50vw;
    padding: .8rem 1rem;
    text-align: center;
    min-width: 96px;
    max-width: 170px;
}

/*-------------------------------設定------------------------------*/
#popup-set .list-function {
    width: 100%;
    display: flex;
    flex-direction: column;
}

#popup-set .list-function .item {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;

    .text {
        font-weight: bold;
    }
}

#popup-set .popup-content .version {
    font-size: .9rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
}

/*-------------------- Switch --------------------*/
.switch {
    border-radius: 50rem;
    padding: .4rem;
    width: 54px;
    display: flex;
    flex-direction: row;
    align-items: center;
    cursor: pointer;
}

.switch.on {
    justify-content: flex-end;
}

.switch.off {
    justify-content: flex-start;
}

.switch .btn-switch {
    width: 20px;
    height: 20px;
    border-radius: 50rem;
}


/*---------------------------彈窗-活動公告---------------------------*/
#index-popup-news .popup-content {
    display: flex;
    position: relative;
    width: 100%;
    min-width: 320px;
    max-width: 400px;
    flex-direction: column;
    justify-content: center;
    padding: 1rem;
}

#index-popup-news .popup-content .popup-btn {
    padding: 1rem 0;
    display: flex;
    justify-content: center;
}

#index-popup-news .popup-btn .checkbox {
    width: fit-content;
}

/*-----------------Tabs------------------*/
#index-popup-news .tabs {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: .1rem;
    position: relative;
}

#index-popup-news .tabs .tab-title {
    width: 5.4rem;
    font-size: 1rem;
    padding: .8rem 1.5rem;
    border-radius: 12px 12px 0 0;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: .1rem;
    font-weight: bold;
    cursor: pointer;
}

/* 關閉按鈕 */
#index-popup-news .btn-close {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10rem;
    position: absolute;
    bottom: 10px;
    right: 0;
    cursor: pointer;
}

#index-popup-news .btn-close .icon-close {
    font-size: 1.6rem;
}

#index-popup-news .tab-content {
    height: 500px;
    border-radius: 0 12px 12px 12px;
    padding: 1.2rem;
    overflow: hidden;
    overflow-y: auto;
    max-width: 368px;
    min-width: 368px;
}

/*-------------------活動-------------------*/
#index-popup-news .tab-content .discount {
    display: flex;
    flex-direction: column;
    gap: .6rem;
}

/* 活動清單 */
#index-popup-news .discount .item {
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    border-radius: 8px;
    &:hover {
        img {
            transform: scale(1.1);
        }
    }
}

#index-popup-news .item .info-content {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: .4rem;
}

#index-popup-news .item .img {
    display: flex;
    overflow: hidden;
    align-items: center;
    justify-content: center;
    width: 100%;
    aspect-ratio: 1920 / 700;
    object-fit: cover;
    border-radius: 8px 8px 0 0;
    img {
        transition: all 0.3s;
    }
}

#index-popup-news .info-content .btn-more {
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50rem;
    min-width: 78px;
    height: 32px;
    text-align: center;
    cursor: pointer;
}

#index-popup-news .info-content .content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: row;
    gap: 0.2rem;
    width: 100%;
    padding: .6rem;
    border-radius: 0 0 8px 8px;
}

#index-popup-news .content .title {
    font-weight: bold;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

#index-popup-news .content .date {
    min-width: 200px;
    font-size: .7rem;
    font-style: italic;
}

/*-------------------公告-------------------*/
#index-popup-news .notify {
    height: 100%;
}

#index-popup-news .notify .notify-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.6rem;
    height: 100%;
}

#index-popup-news .notify-item .notify-title {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.2rem;
}

#index-popup-news .notify-title .notify-text {
    font-size: 1.2rem;
    font-weight: bold;
}

#index-popup-news .notify-title .notify-date {
    font-size: .9rem;
    font-style: italic;
}

#index-popup-news .notify-item .notify-content {
    font-size: 1rem;
    line-height: 24px;
    margin-bottom: .6rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.4rem;
    height: 100%;
}

#index-popup-news .notify-item .notify-btn {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width: 100%;
    font-size: 1rem;
    font-weight: bold;
    gap: .6rem;
}

#index-popup-news .notify-btn .notify-btn-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 40px;
    padding: .4rem .2rem;
    border-radius: .4rem;
    cursor: pointer;
}

#index-popup-news .notify-btn .notify-btn-next {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 40px;
    padding: .4rem .2rem;
    border-radius: .4rem;
    cursor: pointer;
}

/*-------------------其他-------------------*/
#index-popup-news .other {
    width: 100%;
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: .6rem;
}

#index-popup-news .other .other-img {
    display: flex;
    align-items: center;
    width: 320px;
    height: 120px;
    position: relative;
    cursor: pointer;
}

#index-popup-news .other-img .text {
    padding-left: 1.8rem;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    font-size: 1.4rem;
    font-weight: bold;
    width: 12rem;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

/*----------------------------彈窗-歡迎----------------------------*/
#index-welcome .popup-content {
    width: fit-content;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 1rem;
}

/* 關閉按鈕 */
#index-welcome .btn-close {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10rem;
    bottom: 10px;
    right: 0;
    cursor: pointer;
}

#index-welcome .btn-close .icon-close {
    font-size: 1.6rem;
}

/* 圖片 */
#index-welcome .popup-content .img-welcome {
    max-width: 500px;
    max-height: 500px;
}

/*----------------------------優惠清單---------------------------*/
#discount .area-content .list-discount {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    justify-content: center;
    gap: 1rem;
}

#discount-detail .area-other .list .item,
#discount .area-content .list-discount .item {
    display: flex;
    flex-direction: column;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
}

#discount-detail .area-other .list .item:hover,
#discount .area-content .list-discount .item:hover {
    .img img {
        width: 110%;
    }
}

#discount-detail .area-other .list .item .img,
#discount .area-content .item .img {
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    width: 100%;
    aspect-ratio: 1920 / 700;
    object-fit: cover;
    transition: all .3s ease-in-out;
    img {
        transition: all .3s ease-in-out;
    }
}

#discount-detail .area-other .list .item .info-content,
#discount .area-content .item .info-content {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: .4rem;
    padding: .6rem .6rem .6rem 1rem;
    width: 100%;
}

#discount .item .info-content .text {
    font-weight: bold;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
#discount-detail .item .info-content .title {
    width: 18rem;
    font-weight: bold;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#discount .item .info-content .date {
    font-size: .7rem;
    font-style: italic;
    min-width: 200px;
}
#discount-detail .item .info-content .date {
    font-size: .6rem;
    font-style: italic;
    min-width: 170px;
}

/*---------------------------優惠詳情---------------------------*/
#discount-detail .area-other {
    display: flex;
    flex-direction: column;
    width: 32%;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    border-radius: 12px;
    @media (max-width:1400px) {
        min-width: 350px;
    }

    .area-title {
        font-size: 1.2rem;
        font-weight: bold;
    }

    .list {
        display: flex;
        flex-direction: column;
        width: 100%;
        justify-content: center;
        align-items: flex-start;
        gap: .8rem;
    }

    .btn-more {
        border-radius: 50rem;
        padding: .6rem 1rem;
        text-align: center;
        cursor: pointer;
    }
}

#discount-detail .area-content {

    /* 按鈕-返回列表 */
    .btn-back {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        gap: .6rem;
        font-weight: bold;
        cursor: pointer;
        width: fit-content;
    }

    /* 標題 */
    .discount-title {
        width: 100%;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: flex-start;
        gap: 1rem;

        .content {
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            gap: .2rem;
            width: 100%;

            .title {
                font-weight: bold;
                font-size: 1.6rem;
            }

            .date {
                font-style: italic;
            }
        }

        .btn-apply {
            padding: .6rem 1rem;
            border-radius: 50rem;
            /* min-width: 130px; */
            height: 46px;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            cursor: pointer;
            white-space:nowrap;
        }

        .btn-apply.ineligible,
        .btn-apply.applied {
            cursor: default;
        }
    }

    /* Banner */
    .img-banner {
        border-radius: 8px;
    }

    /* 活動內容 */
    .content-text {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        line-height: 32px;
        gap: 1.2rem;

        /* 文案類 */
        .area-copywriter {
            width: 100%;
            display: flex;
            flex-direction: column;
            gap: .4rem;
        }

        /* 內文附圖 */
        figure {
            margin: 1em 0;
        }
        img {
            width: auto;
        }
    }
}

/*------- 優惠詳情 > 優惠活動：Jackpot中獎清單 --------*/
#discount-detail .discount-jp {
    width: 100%;
    display: flex;
    flex-direction: column;
    padding: .2rem;
    border-radius: 12px;

    /* 標題 */
    .area-title {
        display: flex;
        flex-direction: row;
        position: relative;
        align-items: center;
        border-radius: 10px 10px 0 0;
        overflow: hidden;

        .img-bg {
            background: url(../../../images/common/jackpot/discount-jp-area-bg.webp) no-repeat center;
            background-size: cover;
            position: absolute;
            width: 100%;
            height: 46px;
            top: 0;
            left: 0;
            z-index: 0;
        }

        .list-text {
            display: flex;
            flex-direction: row;
            align-items: center;
            position: relative;
            height: 46px;
            padding-left: 152px;

            .img-text-jp {
                width: 152px;
                height: 46px;
                background: url(../../../images/common/jackpot/discount-jp-title.webp) no-repeat center;
                background-size: cover;
                position: absolute;
                left: 8px;
                z-index: 1;
            }

            .text {
                font-family: "Noto Sans";
                font-size: 1.1rem;
                font-weight: bold;
                z-index: 2;
            }
        }

        .jp {
            width: 228px;
            height: 48px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: url(../../../images/common/jackpot/discount-jp-amount-bg.webp) no-repeat center;
            background-size: cover;
            position: absolute;
            right: 0;
            bottom: 2px;
            z-index: 1;
            padding-top: 6px;

            .amount {
                font-size: 1.3rem;
                font-weight: bold;
                color: #FFFFFF;
            }
        }
    }

    /* 資料清單 */
    .area-data {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        column-gap: 1.2rem;
        border-radius: 0 0 10px 10px;
        padding: .4rem;
        position: relative;
        justify-items: center;

        .hr-vertical {
            background: red;
            position: absolute;
            width: 3px;
            height: 100%;
        }

        .item {
            width: 100%;
            display: flex;
            flex-direction: row;
            align-items: center;

            .awards {
                min-width: 120px;
                padding: .4rem;
                line-height: 22px;
            }

            .user {
                width: 100%;
                padding: .4rem;
                display: flex;
                flex-direction: row;
                align-items: center;
                gap: .6rem;

                .avatar {
                    width: 34px;
                    height: 34px;
                    overflow: hidden;
                    border-radius: 50rem;
                    display: flex;
                    align-items: center;
                    justify-content: center;

                    img {
                        width: 34px;
                        height: 34px;
                    }
                }
            }

            .amount {
                font-weight: bold;
                text-align: right;
                padding: .4rem;
            }
        }
    }
}

/*-------- 優惠詳情 > 優惠活動：搶紅包活動資訊 ---------*/
#discount-detail .discount-red-envelope {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;

    .area {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        position: relative;
        padding-top: 19px;

        .title {
            width: 260px;
            height: 32px;
            background: url(../../../images/common/red-envelope/discounts-area-title.webp) no-repeat center;
            background-size: cover;
            display: flex;
            align-items: center;
            justify-content: center;
            padding-bottom: .2rem;
            position: absolute;
            top: 0;
            font-size: .94rem;
            color: #FFFFFF;
        }

        .content {
            width: 100%;
            border-radius: 12px;
            border: 2px solid rgba(255, 153, 0, 0.16);
            background: #FFF8F0;
            box-shadow: 0px 0px 4px 0px #FFDFC6 inset;
            padding: 1.2rem .8rem .8rem .8rem;
        }
    }

    /* 活動資訊 */
    .area.info {

        .content {
            display: flex;
            flex-direction: row;
            gap: .4rem;

            .item {
                width: 100%;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                padding: .2rem;

                .amount {
                    color: #FE013A;
                    font-size: 1.2rem;
                    font-weight: bold;
                }

                .text {
                    color: #5E5A57;
                    font-size: .8rem;
                    line-height: normal;
                }
            }

            .item.amount {
                border-radius: 8px;
                border: 2px solid rgba(255, 61, 0, 0.12);
                background: rgba(255, 61, 0, 0.12);
            }

            .list-count {
                width: 100%;
                display: flex;
                flex-direction: row;
                align-items: center;
                border-radius: 8px;
                background: #F6EFE7;
                padding: .6rem 0;

                .hr-vertical {
                    height: 100%;
                    background: #E8D7D0;
                }
            }
        }
    }

    /* 中獎清單 */
    .area.list-winning {

        .content {
            display: flex;
            flex-direction: column;
            gap: 1rem;

            .list-user {
                display: grid;
                grid-template-columns: repeat(5, 1fr);
                gap: .2rem;

                .user {
                    display: flex;
                    flex-direction: row;
                    align-items: center;
                    justify-content: flex-start;
                    border-radius: 4px;
                    background: rgba(255, 153, 0, 0.12);
                    color: #502700;
                    gap: .4rem;
                    padding: .4rem;

                    .avatar {
                        width: 32px;
                        height: 32px;
                        border-radius: 50rem;
                        overflow: hidden;
                        border: 2px solid #FFB800;
                    }

                    .user-id {
                        font-size: .8rem;
                    }
                }
            }

            /* 分頁元件 */
            .pagination {
                padding: .4rem;
                align-items: flex-start;

                .list-page {
                    display: flex;
                    flex-direction: row;
                    flex-wrap: wrap;
                    gap: .4rem;
                    max-width: 664px;
                    justify-content: center;
                }

                .btn {
                    max-width: 24px;
                    background: #F6EFE7;
                    border: 1px outset rgba(94, 90, 87, 0.24);
                    color: rgba(94, 90, 87, 0.64);
                    font-weight: bold;

                    &:hover {
                        border: 2px outset rgba(94, 90, 87, 0.24);
                        color: rgba(94, 90, 87, 0.84);
                    }
                }

                .btn.active {
                    border: 2px solid rgba(255, 61, 0, 0.64);
                    background: rgba(255, 61, 0, 0.24);
                    color: rgba(94, 90, 87, 1);
                }

                .btn.disable {
                    border: none;
                    background: rgba(0, 0, 0, 0.06);
                    color: rgba(94, 90, 87, 0.32);
                }
            }
        }
    }
}


/*----------------------------- 聊天室 -----------------------------*/
.page-content-list .area-content.chatroom {
    padding: 0;
    gap: 0;
}

/* 未讀提示 */
.page-content-list .btn-menu.upper-agent .unread,
.page-content-list .btn-menu.upper-member .unread {
    position: absolute;
    right: 8%;
    top: 40%;
    border-radius: 10rem;
    width: 10px;
    height: 10px;
}

/* 聊天內容 */
.page-content-list .area-content.chatroom .chat-content {
    display: flex;
    padding: 1rem 1.4rem;
    flex-direction: column;
    gap: .6rem;
    height: 600px;
    overflow-y: auto;
}

.area-content.chatroom .chat-content .msg {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    width: 100%;
    gap: .6rem;
}

.area-content.chatroom .chat-content .msg.time {
    justify-content: center;
}

.area-content.chatroom .chat-content .msg.other-side {
    justify-content: left;
    text-align: left;
}

.area-content.chatroom .chat-content .msg.own {
    justify-content: right;
    text-align: right;
}

.area-content.chatroom .chat-content .msg .avatar {
    width: 2rem;
    height: 2rem;
    border-radius: 50rem;
}

.area-content.chatroom .chat-content .msg.time .text-time {
    padding: .2rem .6rem;
    border-radius: 10rem;
    font-size: .9rem;
}

.area-content.chatroom .chat-content .msg .msg-area {
    display: flex;
    flex-direction: column;
    gap: .3rem;
}

.area-content.chatroom .msg-area .msg-content .msg-time {
    font-size: .8rem;
}

.area-content.chatroom .chat-content .msg .msg-area .user-name {
    font-size: .8rem;
}

.area-content.chatroom .chat-content .msg-area .msg-content {
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    gap: .6rem;
    max-width: 500px;
}

.area-content.chatroom .msg.other-side .msg-content .msg-text {
    padding: .4rem .6rem;
    border-radius: 0px 8px 8px 8px;
    word-break: break-word;
}

.area-content.chatroom .msg.own .msg-content .msg-text {
    padding: .4rem .6rem;
    border-radius: 8px 0px 8px 8px;
    word-break: break-word;
}

/* 圖片上傳 */
.area-content.chatroom .msg-area .msg-content .msg-img {
    max-width: 500px;
}

.area-content.chatroom .msg-area .msg-content .msg-img .img {
    border-radius: 8px;
}

/* 操作介面 */
.area-content.chatroom .chat-surface {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    padding: .4rem .6rem;
    border-radius: 8px;
    margin: 0 1rem 1rem 1rem;
}

.area-content.chatroom .chat-surface .btn-upload-img {
    width: 2rem;
    height: 2rem;
    cursor: pointer;
}

.area-content.chatroom .chat-surface .input-text {
    height: 2.8rem;
}

.area-content.chatroom .chat-surface .btn-send {
    width: 6rem;
    height: 2.8rem;
}

/*-------------------客服中心--------------------*/
#support-service .chat-content .msg-welcome {
    text-align: center;
    font-size: .9rem;
    margin: .6rem 0;
}

/* 等待接聽中狀態 */
#support-service .page-content-list .chat-state-wait {
    font-size: .9rem;
    display: flex;
    width: 100%;
    opacity: 50%;
    flex-direction: column;
    align-items: center;
    gap: .4rem;
    padding: 2rem 0;
    text-align: center;
    line-height: 22px;
}

#support-service .page-content-list .chat-state-wait .img {
    width: 100%;
    height: 72px;
}

#support-service .page-content-list .chat-state-wait .remark {
    font-size: 1rem;
}

/*--------------客服中心 > 彈窗( 離開 & 結束 )-------------*/
#support-service-popup-end .popup-content .popup-text,
#support-service-popup-leave .popup-content .popup-text {
    margin: 1rem 0;
}

#support-service-popup-end .popup-btn .btn-send {
    max-width: 100px;
}

/*---------------聊天室 > 下層會員----------------*/
#chatroom-under-member .page-content-list .area-page-content {
    width: 100%;
    padding: 1.2rem;
    border-radius: 12px;
    display: flex;
    flex-direction: row;
    gap: 1rem;
    height: 600px;
}

#chatroom-under-member .area-content.chatroom .chat-content {
    padding: 0;
    padding-bottom: 1rem;
}

#chatroom-under-member .area-content.chatroom .chat-surface {
    margin: 0;
}

/* 清單 */
#chatroom-under-member .area-page-content .list-msg {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: .2rem;
    width: 260px;
    min-width: 260px;
    overflow-y: auto;
    padding-right: .4rem;

    &::-webkit-scrollbar {
        width: 6px;
        border-radius: 5rem;
    }

    &::-webkit-scrollbar-thumb {
        border-radius: 5rem;
    }
}

#chatroom-under-member .area-page-content .list-msg .msg-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: .6rem;
    border-radius: 4px;
    padding: .4rem .6rem;
    width: 100%;
    cursor: pointer;
}

#chatroom-under-member .list-msg .msg-item .avatar {
    max-width: 42px;
    max-height: 42px;
    border-radius: 10rem;
}

#chatroom-under-member .list-msg .msg-item .item {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: .2rem;
}

#chatroom-under-member .msg-item .item .item-content {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: .2rem;
    width: 100%;

    .msg-time {
        font-size: .8rem;
        text-align: right;
        min-width: 62px;
    }
}

#chatroom-under-member .msg-item .item-content .user-name {
    font-weight: bold;
    font-size: .9rem;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    max-width: 104px;
}

#chatroom-under-member .msg-item .item-content .msg-count {
    font-weight: bold;
    border-radius: 10rem;
    padding: .1rem .4rem;
    min-width: 22px;
    text-align: center;
    font-size: .8rem;
}

#chatroom-under-member .msg-item .item-content .msg-text {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: .8rem;
    max-width: 132px;
}


/*------------------------ 遊戲清單上的jp ----------------------*/

#game .list-game {
    .game-icon {
        .jp {
            display: none;
            background: url(../../../images/common/jackpot/gameicon-jp-bg-1.webp) no-repeat center;
            background-size: cover;
            position: absolute;
            top: -44px;
            align-items: center;
            justify-content: center;
            width: 160px;
            height: 52px;
            animation-name: bg-jp;
            animation-duration: 3s;
            animation-iteration-count: infinite;

            .amount {
                position: absolute;
                font-weight: bold;
                bottom: .55rem;
                width: 100%;
                text-align: center;
                color: #FFFFFF;
                margin-bottom: .1rem;
            }
        }
    }
    .game-icon.jp {
        .jp {
            display: flex;
        }
    }
}

#jackpot-winning-popup {
    width: 400px;
    height: 400px;
    background: url(../../../images/common/jackpot/jp-winning-popup.webp) left top;
    animation: jp-winning 8s steps(200) infinite;
}

@keyframes jp-winning {
    from {
        background-position: 0 0;
    }

    to {
        background-position: 0 -80000px;
    }
}

.jackpot-winning-amount {
    text-align: center;
    font-size: 2.2rem;
    color: #feca27;
    padding-top: 210px;
}

/*------------------------ 首頁 - 遊戲清單上的jp ----------------------*/

#home .list-game-hot {
    .game-icon {
        .jp {
            display: none;
            background: url(../../../images/common/jackpot/gameicon-jp-bg-1.webp) no-repeat center;
            background-size: cover;
            position: absolute;
            top: -44px;
            align-items: center;
            justify-content: center;
            width: 160px;
            height: 52px;
            animation-name: bg-jp;
            animation-duration: 3s;
            animation-iteration-count: infinite;

            .amount {
                position: absolute;
                font-weight: bold;
                bottom: .55rem;
                width: 100%;
                text-align: center;
                color: #FFFFFF;
                margin-bottom: .1rem;
            }
        }
    }
    .game-icon.jp {
        .jp {
            display: flex;
        }
    }
}

#jackpot-winning-popup {
    width: 400px;
    height: 400px;
    background: url(../../../images/common/jackpot/jp-winning-popup.webp) left top;
    animation: jp-winning 8s steps(200) infinite;
}

@keyframes jp-winning {
    from {
        background-position: 0 0;
    }

    to {
        background-position: 0 -80000px;
    }
}

.jackpot-winning-amount {
    text-align: center;
    font-size: 2.2rem;
    color: #feca27;
    padding-top: 210px;
}


/*------------------------ 優惠活動：搶紅包活動 ----------------------*/
/*------------- 入口按鈕 -------------*/
.btn-red-envelope {
    position: fixed;
    top: 6rem;
    right: 0;
    width: 84px;
    height: 84px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    overflow: hidden;
    cursor: pointer;

    .content {
        width: 100%;
        height: 100%;
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;

        .img-bg-light {
            width: 100px;
            height: 100px;
            background: url(../../../images/common/red-envelope/icon/light-bg.webp) no-repeat center;
            background-size: cover;
            position: absolute;
            animation-name: red-envelope-bg-light;
            animation-duration: 3s;
            animation-iteration-count: infinite;
            animation-timing-function: ease-out;
        }

        .lottery {
            position: absolute;
            filter: drop-shadow(0px 0px 4px #FFCA64) drop-shadow(0px 0px 1px #FFF1DC);
        }

        .lottery.upper {
            background: url(../../../images/common/red-envelope/icon/lottery-upper.webp) no-repeat center;
            background-size: cover;
            width: 66px;
            height: 66px;
            right: -8px;
            top: 19px;
            transform: rotate(-4deg);
        }

        .lottery.under {
            background: url(../../../images/common/red-envelope/icon/lottery-under.webp) no-repeat center;
            background-size: cover;
            width: 72px;
            height: 72px;
            right: -6px;
            top: 6px;
            transform: rotate(-12deg);
            animation-name: red-envelope-halo;
            animation-duration: 1.5s;
            animation-iteration-count: infinite;
            animation-timing-function: ease-out;
        }

        .star {
            position: absolute;
            background: url(../../../images/common/red-envelope/icon/star.webp) no-repeat center;
            background-size: cover;
            width: 32px;
            height: 32px;
        }

        .envelope {
            width: 100px;
            height: 100px;
            background: url(../../../images/common/red-envelope/icon/envelop.webp) no-repeat center;
            background-size: cover;
            position: absolute;
            left: -14px;
            top: -4px;
            filter: drop-shadow(0px 0px 8px #FFCA64) drop-shadow(0px 0px 1px #FFF1DC);
            animation-name: red-envelope-halo;
            animation-duration: 1.5s;
            animation-iteration-count: infinite;
            animation-timing-function: ease-out;

            .star {
                left: 26px;
                top: 20px;
                animation-name: red-envelope-star-1;
                animation-duration: 1.5s;
                animation-iteration-count: infinite;
            }
        }

        .gold-ingot {
            width: 66px;
            height: 66px;
            background: url(../../../images/common/red-envelope/icon/gold-ingot.webp) no-repeat center;
            background-size: cover;
            position: absolute;
            bottom: -12px;
            right: 0;
            filter: drop-shadow(0px 0px 8px #FFCA64) drop-shadow(0px 0px 1px #FFF1DC);
            animation-name: red-envelope-halo;
            animation-duration: 1.5s;
            animation-iteration-count: infinite;
            animation-timing-function: ease-out;

            .star {
                right: 22px;
                bottom: 26px;
                animation-name: red-envelope-star-2;
                animation-duration: 1.5s;
                animation-iteration-count: infinite;
            }
        }

        .hint-finger {
            width: 34px;
            height: 34px;
            background: url(../../../images/common/red-envelope/icon/finger.webp) no-repeat center;
            background-size: cover;
            position: absolute;
            bottom: 0;
            left: 8px;
            animation-name: red-envelope-hint-finger;
            animation-duration: 1.5s;
            animation-iteration-count: infinite;
        }
    }
    .btn-red-envelope-close {
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        right: 6px;
        top: 6px;
        width: 18px;
        height: 18px;
        border-radius: 50%;
        background: rgba(0, 0, 0, .4);
        z-index: 99;
        font-size: .8rem;
        color: #fff;
    }
}

@keyframes red-envelope-bg-light {
    0% {
        opacity: 1;
    }

    50% {
        opacity: .6;
    }

    100% {
        opacity: 1;
    }
}

@keyframes red-envelope-halo {
    0% {
        filter: drop-shadow(0px 0px 2px #FFCA64) drop-shadow(0px 0px 1px #FFF1DC);
    }

    50% {
        filter: drop-shadow(0px 0px 4px #FFA800) drop-shadow(0px 0px 1px #FFF1DC);
    }

    100% {
        filter: drop-shadow(0px 0px 2px #FFCA64) drop-shadow(0px 0px 1px #FFF1DC);
    }
}

@keyframes red-envelope-hint-finger {
    0% {
        background-size: 100%;
    }

    50% {
        background-size: 110%;
    }

    100% {
        background-size: 100%;
    }
}

@keyframes red-envelope-star-1 {
    0% {
        background-size: 100%;
        opacity: 1;
    }

    50% {
        background-size: 110%;
        opacity: .2;
    }

    100% {
        background-size: 100%;
        opacity: 1;
    }
}

@keyframes red-envelope-star-2 {
    0% {
        background-size: 110%;
        opacity: .2;
    }

    50% {
        background-size: 100%;
        opacity: 1;
    }

    100% {
        background-size: 110%;
        opacity: .2;
    }
}

/*------------- 操作彈窗 -------------*/
#discount-popup-red-envelope {

    .popup {
        width: 320px;
        max-width: 320px;
        min-width: 320px;
        height: 500px;
        position: relative;
        background: linear-gradient(180deg, #EC863C 0%, #F4C052 48.14%, #FAF6DD 100%);
        border-radius: 24px;
        box-shadow: 0px 0px 12px 0px rgba(255, 255, 255, 0.32) inset, 0px 8px 32px 0px rgba(0, 0, 0, 0.12);
        padding: 0;
        display: flex;
        align-items: center;
        overflow: hidden;

        .btn-close {
            color: #FFFFFF;
            font-size: 1.4rem;
            position: absolute;
            top: 12px;
            right: 12px;
            cursor: pointer;
            z-index: 900;
        }

        .popup-name {
            color: #FFFFFF;
            text-shadow: 0px 2px 12px #CB1800;
            font-size: 1.4rem;
            font-weight: bold;
            text-align: center;
            position: absolute;
            top: 1.4rem;
            z-index: 900;
            width: 240px;
        }

        .content-img {
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;

            /* 背景-圓形裝飾 */
            .list-bg-round {
                display: flex;
                align-items: center;
                justify-content: center;
                position: absolute;

                .round-l {
                    width: 420px;
                    height: 420px;
                    border-radius: 50rem;
                    background: linear-gradient(0deg, rgba(255, 237, 123, 0.00) 0%, #FFC265 32%, rgba(255, 184, 79, 0.12) 100%);
                }

                .round-m {
                    width: 340px;
                    height: 340px;
                    border-radius: 50rem;
                    background: linear-gradient(215deg, rgba(255, 168, 67, 0.80) 15%, rgba(255, 237, 123, 0.12) 90%);
                    position: absolute;
                }

                .round-s {
                    width: 260px;
                    height: 260px;
                    border-radius: 50rem;
                    background: linear-gradient(146deg, #FFB84F 14.89%, #FFD466 52.41%, rgba(255, 237, 123, 0.12) 86.35%);
                    box-shadow: -2px -2px 32px 0px rgba(215, 168, 0, 0.12) inset, 0px 4px 32px 0px rgba(233, 98, 0, 0.32) inset;
                    position: absolute;
                }
            }

            /* 背景-紅包裝飾 */
            .list-bg-envelope {
                width: 100%;
                height: 100%;
                position: absolute;

                .img-envelope {
                    width: 100%;
                    height: 100%;
                    background: url(../../../images/common/red-envelope/popup/small-envelop.webp) no-repeat center;
                    background-size: cover;
                }

                .item-1 {
                    width: 36px;
                    height: 64px;
                    transform: rotate(-34deg);
                    position: absolute;
                    top: 68px;
                    left: 46px;
                }

                .item-2 {
                    width: 38px;
                    height: 68px;
                    transform: rotate(54deg);
                    position: absolute;
                    top: 100px;
                    right: 24px;
                }

                .item-3 {
                    width: 26px;
                    height: 46px;
                    transform: rotate(-74deg);
                    position: absolute;
                    top: 194px;
                    left: 14px;
                }

                .item-4 {
                    width: 32px;
                    height: 56px;
                    transform: rotate(136deg);
                    position: absolute;
                    top: 330px;
                    right: 24px;
                }

                .item-5 {
                    width: 48px;
                    height: 86px;
                    transform: rotate(-128deg);
                    position: absolute;
                    top: 308px;
                    left: 0x;
                }
            }

            /* 背景-流星裝飾 */
            .list-bg-star {
                position: absolute;
                width: 240px;
                height: 340px;
                opacity: .64;
                display: grid;
                grid-template-columns: repeat(5, 1fr);
                align-items: center;
                justify-content: center;

                .star {
                    position: absolute;
                    height: 2px;
                    background: linear-gradient(-45deg, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
                    border-radius: 50rem;
                    filter: drop-shadow(0 0 6px rgba(255, 255, 255, 1));
                    animation: popup-star-tail 3000ms ease-in-out infinite,
                        popup-star-shooting 3000ms ease-in-out infinite;
                }

                .rotate-none {
                    opacity: 0;
                }

                .rotate-0 {
                    transform: rotate(0deg);

                    .star {
                        animation-delay: 2s;
                        animation-duration: 1s;
                    }
                }

                .rotate-15-plus {
                    transform: rotate(15deg);

                    .star {
                        animation-delay: 1s;
                        animation-duration: 3s;
                    }
                }

                .rotate-15-minus {
                    transform: rotate(-15deg);

                    .star {
                        animation-delay: 0;
                        animation-duration: 2s;
                    }
                }

                .rotate-45-plus {
                    transform: rotate(45deg);
                }

                .rotate-45-minus {
                    transform: rotate(-45deg);

                    .star {
                        animation-delay: 1s;
                        animation-duration: 3s;
                    }
                }

                .rotate-75-plus {
                    transform: rotate(75deg);
                }

                .rotate-75-minus {
                    transform: rotate(-75deg);

                    .star {
                        animation-delay: 1s;
                        animation-duration: 3s;
                    }
                }

                .rotate-90-plus {
                    transform: rotate(90deg);
                }

                .rotate-90-minus {
                    transform: rotate(-90deg);
                }

                .rotate-105-plus {
                    transform: rotate(105deg);

                    .star {
                        animation-delay: 1s;
                        animation-duration: 3s;
                    }
                }

                .rotate-105-minus {
                    transform: rotate(-105deg);

                    .star {
                        animation-delay: 2s;
                        animation-duration: 1s;
                    }
                }

                .rotate-135-plus {
                    transform: rotate(135deg);
                }

                .rotate-135-minus {
                    transform: rotate(-135deg);

                    .star {
                        animation-delay: 1s;
                        animation-duration: 3s;
                    }
                }

                .rotate-165-plus {
                    transform: rotate(165deg);

                    .star {
                        animation-delay: 1s;
                        animation-duration: 3s;
                    }
                }

                .rotate-165-minus {
                    transform: rotate(-165deg);
                }

                .rotate-180 {
                    transform: rotate(180deg);

                    .star {
                        animation-delay: 1s;
                        animation-duration: 3s;
                    }
                }
            }

            /* 背景-放射光芒裝飾 */
            .img-bg-light {
                display: none;
            }

            /* 紅包本體 */
            .envelope {
                width: 160px;
                height: 196px;
                background: url(../../../images/common/red-envelope/popup/envelope.webp) no-repeat center;
                background-size: cover;
                position: absolute;
                animation-name: popup-envelope-halo;
                animation-duration: 3s;
                animation-iteration-count: infinite;
                display: flex;
                justify-content: center;

                .text {
                    max-width: 140px;
                    position: absolute;
                    font-size: 1.2rem;
                    font-weight: bold;
                    bottom: 1rem;
                    color: #FFFFFF;
                    text-shadow: 0px 3px 1px #A10200;
                    cursor: pointer;
                    text-align: center;
                    line-height: 22px;
                }
            }

            .envelope-open {
                display: none;
            }
        }

        .content-text {
            max-width: 280px;
            width: 100%;
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: center;
            gap: .4rem;
            font-size: .9rem;
            font-weight: bold;
            text-align: center;
            position: absolute;
            bottom: 1.6rem;

            .text {
                color: #DA441D;
            }

            .count {
                font-size: 1.1rem;
                padding: .2rem .4rem;
                background: #FB3E28;
                color: #FFFFFF;
                border-radius: 6px;
            }
        }

        .btn-close-popup {
            display: none;
        }
    }

    /*--- 點擊開啟紅包 ---*/
    .popup.open {

        .content-img {

            .list-bg-round {

                .round-l {
                    animation-name: popup-open-bg-round-l;
                    animation-duration: 2s;
                    animation-fill-mode: forwards;
                }

                .round-m {
                    animation-name: popup-open-bg-round-m;
                    animation-duration: 2s;
                    animation-fill-mode: forwards;
                }

                .round-s {
                    animation-name: popup-open-bg-round-s;
                    animation-duration: 2s;
                    animation-fill-mode: forwards;
                }
            }

            .list-bg-envelope {

                .img-envelope {
                    animation-name: popup-open-bg-envelope-img;
                    animation-duration: 5s;
                    animation-fill-mode: forwards;
                }
            }

            /* 背景-放射光芒裝飾 */
            .img-bg-light {
                position: absolute;
                display: block;
                width: 480px;
                height: 480px;
                background: url(../../../images/common/red-envelope/popup/light-bg.webp) no-repeat center;
                background-size: cover;
                animation-name: popup-open-bg-light;
                animation-duration: 3s;
                animation-iteration-count: infinite;
            }

            .envelope {
                animation-name: popup-open-envelope;
                animation-duration: 1s;
                animation-iteration-count: 1;
                animation-fill-mode: forwards;

                .text {
                    animation: popup-open-hide-info 0.5s ease-in-out forwards;
                }
            }

            .envelope-open {
                width: 0px;
                height: 0px;
                opacity: 0;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: flex-end;
                padding-bottom: 3.2rem;
                gap: .4rem;
                background: url(../../../images/common/red-envelope/popup/result-bg.webp) no-repeat center;
                background-size: cover;
                z-index: 900;
                animation: popup-envelope-halo 3s ease-in-out infinite,
                    popup-open-envelope-open 1s ease-in-out forwards;
                animation-delay: 0.8s;
                position: relative;

                .text-award {
                    max-width: 170px;
                    height: 64px;
                    opacity: 0;
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    justify-content: center;
                    gap: .2rem;
                    transform: rotate(-12deg);
                    position: absolute;
                    top: 70px;
                    width: 100%;
                    animation: popup-open-show-info 2s ease-in-out forwards;
                    animation-delay: 1.2s;

                    .text {
                        font-size: .9rem;
                        color: #99350E;
                        text-align: center;
                        line-height: 20px;
                    }

                    .success-amount {
                        font-size: 1.2rem;
                        font-weight: bold;
                        color: #F05F54;
                    }
                }

                .remark {
                    max-width: 200px;
                    height: 88px;
                    opacity: 0;
                    color: #FFF9E0;
                    padding-left: .6rem;
                    font-size: .84rem;
                    animation: popup-open-show-info 2s ease-in-out forwards;
                    animation-delay: 1.2s;

                    display: flex;
                    flex-direction: column;
                    justify-content: center;

                    text-wrap: auto;
                    margin-bottom: 0;
                }

                .btn-discount-detail {
                    opacity: 0;
                    color: #FFFFFF;
                    display: flex;
                    flex-direction: row;
                    align-items: center;
                    gap: .2rem;
                    padding: .2rem .6rem .3rem .6rem;
                    margin-left: .6rem;
                    font-size: .8rem;
                    border-radius: 50rem;
                    background: #DC3426;
                    box-shadow: 2px 3px 4px 0px rgba(0, 0, 0, 0.12) inset;
                    animation: popup-open-show-info 2s ease-in-out forwards;
                    animation-delay: 1.2s;
                    cursor: pointer;

                    .fa-angles-right {
                        font-size: .6rem;
                    }
                }
            }
        }

        .content-text {
            animation: popup-open-hide-info 0.5s ease-in-out forwards;
        }

        .btn-close-popup {
            opacity: 0;
            position: absolute;
            display: block;
            color: #99350E;
            border: 2px solid rgba(153, 53, 14, 0.32);
            border-radius: 50rem;
            padding: .2rem .8rem;
            z-index: 900;
            bottom: 1.2rem;
            animation: popup-open-show-info 2s ease-in-out forwards;
            animation-delay: 1.2s;
            cursor: pointer;
        }
    }

    /*--- 紅包開啟狀態：領取成功 ---*/
    .popup.success {

        .content-img {

            .envelope-open {

                .text-award {

                    .text.fail {
                        display: none;
                    }
                }
            }
        }
    }

    /*--- 紅包開啟狀態：領取失敗 ---*/
    .popup.fail {

        .content-img {

            .envelope-open {

                .text-award {

                    .text.success,
                    .success-amount {
                        display: none;
                    }
                }

                .remark {
                    display: none;
                }
            }
        }
    }
}

@keyframes popup-star-tail {
    0% {
        width: 0;
    }

    30% {
        width: 100px;
    }

    100% {
        width: 0;
    }
}

@keyframes popup-star-shooting {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(300px);
    }
}

@keyframes popup-envelope-halo {
    0% {
        filter: drop-shadow(0px 0px 4px #FFE55E);
    }

    50% {
        filter: drop-shadow(0px 0px 32px #FFE55E);
    }

    100% {
        filter: drop-shadow(0px 0px 4px #FFE55E);
    }
}

@keyframes popup-open-bg-round-l {
    from {
        width: 420px;
        height: 420px;
    }

    to {
        width: 600px;
        height: 600px;
        transform: rotate(360deg);
    }
}

@keyframes popup-open-bg-round-m {
    from {
        width: 340px;
        height: 340px;
    }

    to {
        width: 460px;
        height: 460px;
        transform: rotate(360deg);
    }
}

@keyframes popup-open-bg-round-s {
    from {
        width: 260px;
        height: 260px;
    }

    to {
        width: 380px;
        height: 380px;
        transform: rotate(360deg);
    }
}

@keyframes popup-open-bg-envelope-img {
    0% {
        transform: translateY(0px);
    }

    100% {
        transform: translateY(-300px);
    }
}

@keyframes popup-open-bg-light {
    0% {
        opacity: 1;
    }

    50% {
        opacity: .6;
    }

    100% {
        opacity: 1;
    }
}

@keyframes popup-open-envelope {
    0% {
        width: 160px;
        height: 196px;
    }

    30% {
        width: 180px;
        height: 212px;
    }

    50% {
        width: 160px;
        height: 196px;
    }

    80% {
        width: 180px;
        height: 212px;
    }

    90% {
        width: 160px;
        height: 196px;
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

@keyframes popup-open-envelope-open {
    0% {
        width: 0px;
        height: 0px;
        opacity: 0;
    }

    100% {
        width: 300px;
        height: 360px;
        opacity: 1;
    }
}

@keyframes popup-open-show-info {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes popup-open-hide-info {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}



/*------------------------------存取款------------------------------*/
/* 存取款類型下拉選單 */
#game-surface-popup-deposit .input-area .dropdown .list-option,
#deposit .input-area .dropdown .list-option,
#withdraw-popup-add .input-area .dropdown .list-option,
#withdraw .filter .dropdown .list-option {
    top: 3.2rem;
    padding: .4rem;
}

#game-surface-popup-deposit .dropdown .option,
#deposit .dropdown .option,
#withdraw-popup-add .dropdown .option,
#withdraw .dropdown .option {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: .6rem;
    justify-content: flex-start;
    padding: .6rem;
}

#game-surface-popup-deposit .dropdown .dropdown-btn .option,
#deposit .dropdown .dropdown-btn .option,
#withdraw-popup-add .dropdown .dropdown-btn .option,
#withdraw .dropdown .dropdown-btn .option {
    padding: 0;
}

#game-surface-popup-deposit .dropdown .option,
#deposit .dropdown .option,
#withdraw-popup-add .dropdown .option,
#withdraw .dropdown .option {
    &.bank-card {
        .img {
            background: url("/images/common/deposit-icon-bank-card.webp") no-repeat center;
            background-size: cover;
        }
    }
    &.bank-transfer {
        .img {
            background: url("/images/common/deposit-icon-bank-transfer.webp") no-repeat center;
            background-size: cover;
        }
    }
    &.crypto {
        .img {
            background: url("/images/common/deposit-icon-crypto.webp") no-repeat center;
            background-size: cover;
        }
    }
    &.third-parties {
        .img {
            background: url("/images/common/deposit-icon-third-parties.webp") no-repeat center;
            background-size: cover;
        }
    }
    &.abn {
        .img {
            background: url("/images/common/bankcard/abn.webp") no-repeat center;
            background-size: cover;
        }
    }
    &.baac {
        .img {
            background: url("/images/common/bankcard/baac.webp") no-repeat center;
            background-size: cover;
        }
    }
    &.bay {
        .img {
            background: url("/images/common/bankcard/bay.webp") no-repeat center;
            background-size: cover;
        }
    }
    &.bbl {
        .img {
            background: url("/images/common/bankcard/bbl.webp") no-repeat center;
            background-size: cover;
        }
    }
    &.cimb {
        .img {
            background: url("/images/common/bankcard/cimb.webp") no-repeat center;
            background-size: cover;
        }
    }
    &.citi {
        .img {
            background: url("/images/common/bankcard/citi.webp") no-repeat center;
            background-size: cover;
        }
    }
    &.db {
        .img {
            background: url("/images/common/bankcard/db.webp") no-repeat center;
            background-size: cover;
        }
    }
    &.exim {
        .img {
            background: url("/images/common/bankcard/exim.webp") no-repeat center;
            background-size: cover;
        }
    }
    &.ghb {
        .img {
            background: url("/images/common/bankcard/ghb.webp") no-repeat center;
            background-size: cover;
        }
    }
    &.gsb {
        .img {
            background: url("/images/common/bankcard/gsb.webp") no-repeat center;
            background-size: cover;
        }
    }
    &.hsbc {
        .img {
            background: url("/images/common/bankcard/hsbc.webp") no-repeat center;
            background-size: cover;
        }
    }
    &.ibank {
        .img {
            background: url("/images/common/bankcard/ibank.webp") no-repeat center;
            background-size: cover;
        }
    }
    &.icbc {
        .img {
            background: url("/images/common/bankcard/icbc.webp") no-repeat center;
            background-size: cover;
        }
    }
    &.kbank {
        .img {
            background: url("/images/common/bankcard/kbank.webp") no-repeat center;
            background-size: cover;
        }
    }
    &.kkp {
        .img {
            background: url("/images/common/bankcard/kkp.webp") no-repeat center;
            background-size: cover;
        }
    }
    &.ktb {
        .img {
            background: url("/images/common/bankcard/ktb.webp") no-repeat center;
            background-size: cover;
        }
    }
    &.lhbank {
        .img {
            background: url("/images/common/bankcard/lhbank.webp") no-repeat center;
            background-size: cover;
        }
    }
    &.mhcb {
        .img {
            background: url("/images/common/bankcard/mhcb.webp") no-repeat center;
            background-size: cover;
        }
    }
    &.scb {
        .img {
            background: url("/images/common/bankcard/scb.webp") no-repeat center;
            background-size: cover;
        }
    }
    &.scbt {
        .img {
            background: url("/images/common/bankcard/scbt.webp") no-repeat center;
            background-size: cover;
        }
    }
    &.smbc {
        .img {
            background: url("/images/common/bankcard/smbc.webp") no-repeat center;
            background-size: cover;
        }
    }
    &.sme {
        .img {
            background: url("/images/common/bankcard/sme.webp") no-repeat center;
            background-size: cover;
        }
    }
    &.tcrb {
        .img {
            background: url("/images/common/bankcard/tcrb.webp") no-repeat center;
            background-size: cover;
        }
    }
    &.tisco {
        .img {
            background: url("/images/common/bankcard/tisco.webp") no-repeat center;
            background-size: cover;
        }
    }
    &.ttb {
        .img {
            background: url("/images/common/bankcard/ttb.webp") no-repeat center;
            background-size: cover;
        }
    }
    &.uob {
        .img {
            background: url("/images/common/bankcard/uob.webp") no-repeat center;
            background-size: cover;
        }
    }
    .img {
        width: 28px;
        height: 28px;
        border-radius: 4px;
        background: url("/images/common/deposit-icon-bank-card.webp") no-repeat center;
        background-size: cover;
    }
}

#withdraw .dropdown .option.all .img {
    display: none;
}

/* 輸入框-選擇 */
#game-surface-popup-deposit .input-area .input-content.select,
#withdraw-popup-add .input-area .input-content.select,
#deposit .input-area .input-content.select {
    padding: 0 .4rem 0 .6rem;
    font-weight: bold;
}

#game-surface-popup-deposit .input-content .btn-select,
#withdraw-popup-add .input-content .btn-select,
#deposit .input-content .btn-select {
    width: 4rem;
}

/* 存款方式按鈕 */
#deposit, #game-surface-popup-deposit {
    .deposit-btn {
        display: grid;
        grid-template-columns: repeat(7, 1fr);
        gap: .6rem;
        width: 100%;
        .btn-list {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            min-height: 110px;
            gap: .4rem;
            border-radius: 10px;
            cursor: pointer;
            .btn-img {
                width: 32px;
                height: 32px;
                background-size: cover;
            }
            .btn-text {
                display: flex;
                align-items: center;
                font-size: .8rem;
                min-height: 51px;
                font-weight: bold;
                text-align: center;
                padding: 0 .4rem;
            }
        }
    }
    .input-content {
        position: relative;
        .clear-btn {
            position: absolute;
            width: 24px;
            height: 24px;
            border-radius: 50%;
            right: 1rem;
            cursor: pointer;
        }
    }
    .card {
        display: flex;
        flex-direction: column;
        width: 380px;
        height: 172px;
        padding: 1.4rem 1rem;
        margin-top: .6rem;
        gap: 1rem;
        border-radius: 18px;
        cursor: pointer;
        .card-title {
            position: relative;
            display: flex;
            flex-direction: row;
            .card-top {
                display: flex;
                flex-direction: row;
                align-items: center;
                gap: 1rem;
                .title-text {
                    .bank-code {
                        font-size: .8rem;
                    }
                }
            }
            .tag {
                position: absolute;
                top: -16px;
                right: 0;
                font-size: .8rem;
                padding: 0 .7rem;
                min-width: 90px;
                height: 32px;
                display: flex;
                align-items: center;
                justify-content: center;
                border-radius: 16px;
            }
        }
        .card-content {
            display: flex;
            flex-direction: column;
            gap: .6rem;
            .card-account {
                display: flex;
                align-items: center;
                font-size: 1.8rem;
                font-weight: bold;
                min-height: 52px;
                word-break: break-all;
                &.long {
                    font-size: 1.2rem;
                }
            }
            .card-name {
                font-size: .8rem;
            }
        }
        &.bank-card {
            .img {
                background: url("/images/common/deposit-icon-bank-card.webp") no-repeat center;
                background-size: cover;
            }
        }
        &.bank-transfer {
            .img {
                background: url("/images/common/deposit-icon-bank-transfer.webp") no-repeat center;
                background-size: cover;
            }
        }
        &.crypto {
            .img {
                background: url("/images/common/deposit-icon-crypto.webp") no-repeat center;
                background-size: cover;
            }
        }
        &.third-parties {
            .img {
                background: url("/images/common/deposit-icon-third-parties.webp") no-repeat center;
                background-size: cover;
            }
        }
        &.abn {
            .img {
                background: url("/images/common/bankcard/abn.webp") no-repeat center;
                background-size: cover;
            }
        }
        &.baac {
            .img {
                background: url("/images/common/bankcard/baac.webp") no-repeat center;
                background-size: cover;
            }
        }
        &.bay {
            .img {
                background: url("/images/common/bankcard/bay.webp") no-repeat center;
                background-size: cover;
            }
        }
        &.bbl {
            .img {
                background: url("/images/common/bankcard/bbl.webp") no-repeat center;
                background-size: cover;
            }
        }
        &.cimb {
            .img {
                background: url("/images/common/bankcard/cimb.webp") no-repeat center;
                background-size: cover;
            }
        }
        &.citi {
            .img {
                background: url("/images/common/bankcard/citi.webp") no-repeat center;
                background-size: cover;
            }
        }
        &.db {
            .img {
                background: url("/images/common/bankcard/db.webp") no-repeat center;
                background-size: cover;
            }
        }
        &.exim {
            .img {
                background: url("/images/common/bankcard/exim.webp") no-repeat center;
                background-size: cover;
            }
        }
        &.ghb {
            .img {
                background: url("/images/common/bankcard/ghb.webp") no-repeat center;
                background-size: cover;
            }
        }
        &.gsb {
            .img {
                background: url("/images/common/bankcard/gsb.webp") no-repeat center;
                background-size: cover;
            }
        }
        &.hsbc {
            .img {
                background: url("/images/common/bankcard/hsbc.webp") no-repeat center;
                background-size: cover;
            }
        }
        &.ibank {
            .img {
                background: url("/images/common/bankcard/ibank.webp") no-repeat center;
                background-size: cover;
            }
        }
        &.icbc {
            .img {
                background: url("/images/common/bankcard/icbc.webp") no-repeat center;
                background-size: cover;
            }
        }
        &.kbank {
            .img {
                background: url("/images/common/bankcard/kbank.webp") no-repeat center;
                background-size: cover;
            }
        }
        &.kkp {
            .img {
                background: url("/images/common/bankcard/kkp.webp") no-repeat center;
                background-size: cover;
            }
        }
        &.ktb {
            .img {
                background: url("/images/common/bankcard/ktb.webp") no-repeat center;
                background-size: cover;
            }
        }
        &.lhbank {
            .img {
                background: url("/images/common/bankcard/lhbank.webp") no-repeat center;
                background-size: cover;
            }
        }
        &.mhcb {
            .img {
                background: url("/images/common/bankcard/mhcb.webp") no-repeat center;
                background-size: cover;
            }
        }
        &.scb {
            .img {
                background: url("/images/common/bankcard/scb.webp") no-repeat center;
                background-size: cover;
            }
        }
        &.scbt {
            .img {
                background: url("/images/common/bankcard/scbt.webp") no-repeat center;
                background-size: cover;
            }
        }
        &.smbc {
            .img {
                background: url("/images/common/bankcard/smbc.webp") no-repeat center;
                background-size: cover;
            }
        }
        &.sme {
            .img {
                background: url("/images/common/bankcard/sme.webp") no-repeat center;
                background-size: cover;
            }
        }
        &.tcrb {
            .img {
                background: url("/images/common/bankcard/tcrb.webp") no-repeat center;
                background-size: cover;
            }
        }
        &.tisco {
            .img {
                background: url("/images/common/bankcard/tisco.webp") no-repeat center;
                background-size: cover;
            }
        }
        &.ttb {
            .img {
                background: url("/images/common/bankcard/ttb.webp") no-repeat center;
                background-size: cover;
            }
        }
        &.uob {
            .img {
                background: url("/images/common/bankcard/uob.webp") no-repeat center;
                background-size: cover;
            }
        }
        .img {
            width: 36px;
            height: 36px;
            border-radius: 6px;
            background: url("/images/common/deposit-icon-bank-card.webp") no-repeat center;
            background-size: cover;
        }
    }
}

/*-------------  新增取款備註  -------------*/
#withdraw-popup-add {
    .remark {
        max-width: 448px;
    }
}

/*-------------------------------存款-------------------------------*/
#deposit .list-content .item .content-btn {
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    height: 100%;
}

#deposit .item .content-btn .btn-send {
    width: fit-content;
    min-width: 170px;
    padding: 1rem 1.4rem;
}

#deposit .input-upload .input-text .file-name {
    width: 400px;
}

@media (max-width: 1440px) {

    #deposit .input-upload .input-text .file-name {
        width: 300px;
    }
}

/* 存款實名驗證狀態 */
#deposit .page-state {
    font-size: .9rem;
    display: flex;
    width: 100%;
    opacity: 50%;
    flex-direction: column;
    align-items: center;
    gap: .4rem;
    padding: 2rem 0;
    text-align: center;
    line-height: 22px;
}

#deposit .page-state .img {
    width: 100%;
    height: 72px;
}

#deposit .page-state .remark {
    font-size: 1rem;
}

#deposit .page-state.review .verify-item-reject {
    display: none;
}

#deposit .page-state.reject .verify-item-review {
    display: none;
}


/*------------------銀行卡 & 三方存款-------------------*/
/* 存款渠道 */
#game-surface-popup-deposit .input-content.channel .active,
#deposit .input-content.channel .active {
    font-size: 1.1rem;
    font-weight: bold;
}

/* 金額快捷 */
#withdraw-popup-amount .popup-content .area-amount,
#game-surface-popup-deposit .list-content .item .area-amount,
#withdraw-popup-amount .list-content .area-amount,
#deposit .list-content .item .area-amount {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    width: 100%;
}

#deposit .list-content .item .area-amount .amount-list {
    width: 100%;
    gap: .4rem;
    display: flex;
    flex-direction: row;
    align-items: center;
}

/* 渠道資訊 */
#game-surface-popup-deposit .input-area .channel-info,
#deposit .input-area .channel-info {
    display: flex;
    flex-direction: column;
    border-radius: 4px;
    gap: .4rem;
}

#game-surface-popup-deposit .channel-info .info-title,
#deposit .channel-info .info-title {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0 1rem;
    height: 2.8rem;
}

#game-surface-popup-deposit .channel-info .info-title .title-text,
#deposit .channel-info .info-title .title-text {
    width: 100%;
    font-size: 1rem;
    font-weight: bold;
}

#game-surface-popup-deposit .channel-info .info-title .icon,
#deposit .channel-info .info-title .icon {
    font-size: 1.4rem;
}

#deposit .channel-info .info-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 1rem .4rem 1rem;
}

#deposit .channel-info .info-content .item {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: .4rem;
    height: 52px;
    padding: 0 .2rem;
    width: 100%;
    font-size: 1rem;
}

/* 渠道資訊-欄位標題 */
#game-surface-popup-deposit .channel-info .item .field-title,
#deposit .channel-info .item .field-title {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.6rem;
}

/* 渠道資訊-欄位名稱 */
#game-surface-popup-deposit .channel-info .item .field-name,
#deposit .channel-info .item .field-name {
    width: 72px;
}

/* 渠道資訊-欄位內容 */
#game-surface-popup-deposit .channel-info .item .text,
#deposit .channel-info .item .text {
    width: 100%;
}

#deposit .channel-info .item .text.scrollbar-y {
    overflow-y: auto;
}

/* QR Code */
#deposit .info-content .qrcode {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    padding: 1rem 0;
}

#deposit .qrcode .img-qrcode {
    width: 10rem;
    border-radius: 4px;
}

/* 渠道資訊-Remark */
#game-surface-popup-deposit .info-content .remark,
#deposit .info-content .remark {
    font-size: .9rem;
    width: 100%;
    text-align: left;
}

@media (max-width: 1500px) {

    #deposit .list-content .item .area-amount .amount-list {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
    }
}

/*-----------------------虛擬貨幣-----------------------*/
/* 平台錢包資訊 */
#game-surface-popup-deposit .list-content .item .wallet-info,
#deposit .list-content .item .wallet-info {
    display: flex;
    flex-direction: column;
    border-radius: 4px;
    gap: .4rem;
}

#game-surface-popup-deposit .wallet-info .info-content,
#deposit .wallet-info .info-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: .4rem 1rem .4rem 1rem;
}

#game-surface-popup-deposit .wallet-info .info-content .item,
#deposit .wallet-info .info-content .item {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: .4rem;
    height: 52px;
    padding: 0 .2rem;
    width: 100%;
    font-size: 1rem;

    .field-title {
        width: 30%;
    }

    .text {
        width: 100%;
        word-break: break-all;
    }
}

#withdraw-popup-amount .input-remark .rate,
#game-surface-popup-deposit .input-remark .rate,
#deposit .input-remark .rate {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: .4rem;

    .amount-convert {
        font-weight: bold;
    }
}

/*-------------------存款類型顯示切換-------------------*/
/* 銀行卡 */
#game-surface-popup-deposit .list-content.third-parties .input-area.network,
#game-surface-popup-deposit .list-content.bank-card .input-area.network,
#game-surface-popup-deposit .list-content.third-parties .wallet-info,
#game-surface-popup-deposit .list-content.bank-card .wallet-info,
#game-surface-popup-deposit .list-content.third-parties .input-area.coin,
#game-surface-popup-deposit .list-content.bank-card .input-area.coin,
#game-surface-popup-deposit .list-content.bank-card .input-area.upload .optional,
#deposit .list-content.third-parties .input-area.network,
#deposit .list-content.bank-card .input-area.network,
#deposit .list-content.third-parties .wallet-info,
#deposit .list-content.bank-card .wallet-info,
#deposit .list-content.third-parties .input-area.coin,
#deposit .list-content.bank-card .input-area.coin,
#deposit .list-content.bank-card .input-area.upload .optional, 
#deposit .list-content.bank-card .input-area.third-party {
    display: none;
}

/* 三方存款 */
#game-surface-popup-deposit .list-content.third-parties .input-area.channel .channel-info,
#game-surface-popup-deposit .list-content.third-parties .input-area.upload .required,
#deposit .list-content.third-parties .input-area.channel .channel-info,
#deposit .list-content.third-parties .input-area.upload .required,
#deposit .list-content.third-parties .input-area.third-party {
    display: none;
}

/* 虛擬貨幣 */
#game-surface-popup-deposit .list-content.crypto .input-area.remark,
#game-surface-popup-deposit .list-content.crypto .input-area.upload,
#game-surface-popup-deposit .list-content.crypto .input-area.channel,
#deposit .list-content.crypto .input-area.remark,
#deposit .list-content.crypto .input-area.upload,
#deposit .list-content.crypto .input-area.channel {
    display: none;
}

/*---------------------------存取款彈窗---------------------------*/
#popup-crypto-network .popup,
#popup-third-parties .popup,
#popup-crypto-coin .popup,
#popup-bank-channel .popup,
#popup-vietnam-channel .popup,
#popup-crypto-thirdparty .popup {
    min-width: 680px;
    max-height: 560px;
}

#popup-third-parties .popup .popup-content,
#popup-crypto-coin .popup .popup-content,
#popup-bank-channel .popup .popup-content {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: .4rem;
}

#popup-crypto-network .popup .popup-content,
#popup-vietnam-channel .popup .popup-content,
#popup-crypto-thirdparty .popup .popup-content {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: .4rem;
}


/*-----------------------------存取優惠-----------------------------*/
.deposit-offers {
    padding: 1rem .4rem;
    .deposit-offers-content {
        display: flex;
        flex-direction: column;
        gap: .8rem;
        padding: 0 1rem;
        .offers-list {
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: space-between;
            padding: .8rem 0;
            border-bottom: 1px solid transparent;
            .offers-content {
                display: flex;
                flex-direction: column;
                gap: .2rem;
                padding: 0 .4rem;
                .offers-title {
                    display: flex;
                    flex-direction: row;
                    align-items: center;
                    gap: .4rem;
                    font-weight: bold;
                    cursor: pointer;
                    word-break: break-all;
                    input {
                        appearance: none;
                        width: 1rem;
                        height: 1rem;
                        border: 2px solid transparent;
                        border-radius: 50%;
                        display: inline-block;
                        position: relative;
                        padding: .5rem;
                        &:before {
                            content: '';
                            width: 10px;
                            height: 10px;
                            border-radius: 50%;
                            position: absolute;
                            top: 50%;
                            left: 50%;
                            transform: translate(-50%, -50%);
                        }
                    }
                }
                .offers-remark {
                    margin-left: 2.2rem;
                    font-size: .9rem;
                }
            }
            .offers-amount {
                font-weight: bold;
            }
        }
        &:last-of-type {
            .offers-list {
                border: 0;
            }
        }
    }
}

/*-------------------------------取款-------------------------------*/
#withdraw .dropdown .option.all {
    .img {
        display: none;
    }
}

#withdraw .list-function .btn-function {
    width: fit-content;
    padding: 0 1rem;
}

#withdraw .list-function .btn-refresh {
    height: 2.8rem;
    width: 2.8rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    border-radius: 4px;
    cursor: pointer;
}

/* 實名驗證狀態 */
#withdraw .verity-state {
    font-size: .9rem;
    display: flex;
    width: 100%;
    opacity: 50%;
    flex-direction: column;
    align-items: center;
    gap: .4rem;
    padding: 2rem 0;
}

#withdraw .verity-state .remark {
    font-size: 1rem;
}

#withdraw .verity-state.nodata .page-state-review,
#withdraw .verity-state.nodata .page-state-reject,
#withdraw .verity-state.review .page-state-nodata,
#withdraw .verity-state.review .page-state-reject,
#withdraw .verity-state.reject .page-state-nodata,
#withdraw .verity-state.reject .page-state-review {
    display: none;
}

/* 取款方式(卡片) */
#withdraw-popup-amount .popup-content .card {
    display: flex;
    flex-direction: column;
    width: 100%;
    border-radius: 8px;
    overflow: hidden;
}

#withdraw-popup-amount .card .card-title {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: .6rem;
    justify-content: space-between;
}

#withdraw-popup-amount .card-title .title-text {
    font-size: 1rem;
    font-weight: bold;
}

#withdraw-popup-amount .card .card-content {
    display: flex;
    flex-direction: column;
    gap: .6rem;
    padding: .8rem 1rem;
    font-size: .9rem;

    .field {

        .field-content {
            word-break: break-all;
        }
    }
}

#withdraw-popup-amount .card .field {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 1rem;
    width: 100%;
}

#withdraw-popup-amount .card .card-title .card-name {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: .6rem;
}

#withdraw-popup-amount {
    .card {
        &.bank-card {
            .img {
                background: url("/images/common/deposit-icon-bank-card.webp") no-repeat center;
                background-size: cover;
            }
        }
        &.bank-transfer {
            .img {
                background: url("/images/common/deposit-icon-bank-transfer.webp") no-repeat center;
                background-size: cover;
            }
        }
        &.crypto {
            .img {
                background: url("/images/common/deposit-icon-crypto.webp") no-repeat center;
                background-size: cover;
            }
        }
        &.third-parties {
            .img {
                background: url("/images/common/deposit-icon-third-parties.webp") no-repeat center;
                background-size: cover;
            }
        }
        &.abn {
            .img {
                background: url("/images/common/bankcard/abn.webp") no-repeat center;
                background-size: cover;
            }
        }
        &.baac {
            .img {
                background: url("/images/common/bankcard/baac.webp") no-repeat center;
                background-size: cover;
            }
        }
        &.bay {
            .img {
                background: url("/images/common/bankcard/bay.webp") no-repeat center;
                background-size: cover;
            }
        }
        &.bbl {
            .img {
                background: url("/images/common/bankcard/bbl.webp") no-repeat center;
                background-size: cover;
            }
        }
        &.cimb {
            .img {
                background: url("/images/common/bankcard/cimb.webp") no-repeat center;
                background-size: cover;
            }
        }
        &.citi {
            .img {
                background: url("/images/common/bankcard/citi.webp") no-repeat center;
                background-size: cover;
            }
        }
        &.db {
            .img {
                background: url("/images/common/bankcard/db.webp") no-repeat center;
                background-size: cover;
            }
        }
        &.exim {
            .img {
                background: url("/images/common/bankcard/exim.webp") no-repeat center;
                background-size: cover;
            }
        }
        &.ghb {
            .img {
                background: url("/images/common/bankcard/ghb.webp") no-repeat center;
                background-size: cover;
            }
        }
        &.gsb {
            .img {
                background: url("/images/common/bankcard/gsb.webp") no-repeat center;
                background-size: cover;
            }
        }
        &.hsbc {
            .img {
                background: url("/images/common/bankcard/hsbc.webp") no-repeat center;
                background-size: cover;
            }
        }
        &.ibank {
            .img {
                background: url("/images/common/bankcard/ibank.webp") no-repeat center;
                background-size: cover;
            }
        }
        &.icbc {
            .img {
                background: url("/images/common/bankcard/icbc.webp") no-repeat center;
                background-size: cover;
            }
        }
        &.kbank {
            .img {
                background: url("/images/common/bankcard/kbank.webp") no-repeat center;
                background-size: cover;
            }
        }
        &.kkp {
            .img {
                background: url("/images/common/bankcard/kkp.webp") no-repeat center;
                background-size: cover;
            }
        }
        &.ktb {
            .img {
                background: url("/images/common/bankcard/ktb.webp") no-repeat center;
                background-size: cover;
            }
        }
        &.lhbank {
            .img {
                background: url("/images/common/bankcard/lhbank.webp") no-repeat center;
                background-size: cover;
            }
        }
        &.mhcb {
            .img {
                background: url("/images/common/bankcard/mhcb.webp") no-repeat center;
                background-size: cover;
            }
        }
        &.scb {
            .img {
                background: url("/images/common/bankcard/scb.webp") no-repeat center;
                background-size: cover;
            }
        }
        &.scbt {
            .img {
                background: url("/images/common/bankcard/scbt.webp") no-repeat center;
                background-size: cover;
            }
        }
        &.smbc {
            .img {
                background: url("/images/common/bankcard/smbc.webp") no-repeat center;
                background-size: cover;
            }
        }
        &.sme {
            .img {
                background: url("/images/common/bankcard/sme.webp") no-repeat center;
                background-size: cover;
            }
        }
        &.tcrb {
            .img {
                background: url("/images/common/bankcard/tcrb.webp") no-repeat center;
                background-size: cover;
            }
        }
        &.tisco {
            .img {
                background: url("/images/common/bankcard/tisco.webp") no-repeat center;
                background-size: cover;
            }
        }
        &.ttb {
            .img {
                background: url("/images/common/bankcard/ttb.webp") no-repeat center;
                background-size: cover;
            }
        }
        &.uob {
            .img {
                background: url("/images/common/bankcard/uob.webp") no-repeat center;
                background-size: cover;
            }
        }
        .img {
            width: 32px;
            height: 32px;
            border-radius: 4px;
            background: url("/images/common/deposit-icon-bank-card.webp") no-repeat center;
            background-size: cover;
        }
    }
}

/* 20250211 - 新版取款 */
#withdraw {
    &.bankcard {
        .card-list {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 1rem;
            .card {
                width: 100%;
                cursor: pointer;
            }
        }
    }
    .withdraw-wrap {
        display: flex;
        flex-direction: column;
        .wallet {
            display: flex;
            flex-direction: row;
            align-items: center;
            gap: .6rem;
            width: 100%;
            padding: 1.2rem;
            border-radius: 10px;
            .wallet-text {
                display: flex;
                flex-direction: row;
                align-items: center;
                font-size: .7rem;
                gap: .6rem;
            }
            .wallet-amount {
                font-size: 1.2rem;
                font-weight: bold;
            }
        }
        .withdraw-content {
            display: none;
            flex-direction: row;
            width: 100%;
            gap: 2em;
            .withdraw-item {
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                width: 100%;
                gap: .6rem;
                &:first-child {
                    .input-area {
                        padding: 5rem 0 0 0;
                    }
                }
                .input-content {
                    position: relative;
                    .clear-btn {
                        position: absolute;
                        width: 24px;
                        height: 24px;
                        border-radius: 50%;
                        right: 1rem;
                        cursor: pointer;
                    }
                }
                .input-remark {
                    font-size: .9rem;
                }
                .content-btn {
                    display: flex;
                    flex-direction: row;
                    gap: .6rem;
                    justify-content: flex-end;
                    .btn-send, .btn-cancel {
                        width: 170px;
                    }
                }
            }
        }
        &.add-card {
            position: relative;
            min-height: 67px;
            .wallet {
                width: calc(50% - 2rem);
                position: absolute;
            }
            .withdraw-content {
                display: flex;
            }
        }
        &.has-state {
            flex-direction: row;
            .wallet {
                position: relative;
                display: flex;
                max-height: 70px;
                width: 50%;
                margin-right: 1rem;
            }
            .verity-state {
                display: flex;
                width: 50%;
                margin-left: 1rem;
                border-left: 1px solid #E5E5E5;
                padding: 0;
            }
        }
    }
    .verity-state {
        display: flex;
        .page-state-nodata {
            .img {
                min-width: 128px;
                height: 128px;
            }
        }
        .page-state-reject, .page-state-review {
            .img {
                width: 100%;
                height: 72px;
            }
        }
    }
    .card {
        display: flex;
        flex-direction: column;
        width: 380px;
        padding: 1.4rem 1rem;
        border-radius: 18px;
        cursor: pointer;
        .card-title {
            position: relative;
            display: flex;
            flex-direction: row;
            min-height: 60px;
            .card-top {
                display: flex;
                flex-direction: row;
                align-items: center;
                gap: 1rem;
                .title-text {
                    word-break: break-word;
                    .bank-code {
                        font-size: .8rem;
                    }
                }
            }
            .tag {
                position: absolute;
                top: -16px;
                right: -8px;
                font-size: .8rem;
                padding: 0 .7rem;
                min-width: 90px;
                height: 32px;
                display: flex;
                align-items: center;
                justify-content: center;
                border-radius: 16px;
            }
        }
        .card-content {
            display: flex;
            flex-direction: column;
            gap: .6rem;
            .card-account {
                display: flex;
                align-items: center;
                font-size: 1.8rem;
                font-weight: bold;
                min-height: 52px;
                word-break: break-all;
                &.long {
                    font-size: 1.2rem;
                }
            }
            .card-name {
                font-size: .8rem;
            }
        }
        &.bank-card {
            .img {
                background: url("/images/common/deposit-icon-bank-card.webp") no-repeat center;
                background-size: cover;
            }
        }
        &.bank-transfer {
            .img {
                background: url("/images/common/deposit-icon-bank-transfer.webp") no-repeat center;
                background-size: cover;
            }
        }
        &.crypto {
            .img {
                background: url("/images/common/deposit-icon-crypto.webp") no-repeat center;
                background-size: cover;
            }
        }
        &.third-parties {
            .img {
                background: url("/images/common/deposit-icon-third-parties.webp") no-repeat center;
                background-size: cover;
            }
        }
        &.abn {
            .img {
                background: url("/images/common/bankcard/abn.webp") no-repeat center;
                background-size: cover;
            }
        }
        &.baac {
            .img {
                background: url("/images/common/bankcard/baac.webp") no-repeat center;
                background-size: cover;
            }
        }
        &.bay {
            .img {
                background: url("/images/common/bankcard/bay.webp") no-repeat center;
                background-size: cover;
            }
        }
        &.bbl {
            .img {
                background: url("/images/common/bankcard/bbl.webp") no-repeat center;
                background-size: cover;
            }
        }
        &.cimb {
            .img {
                background: url("/images/common/bankcard/cimb.webp") no-repeat center;
                background-size: cover;
            }
        }
        &.citi {
            .img {
                background: url("/images/common/bankcard/citi.webp") no-repeat center;
                background-size: cover;
            }
        }
        &.db {
            .img {
                background: url("/images/common/bankcard/db.webp") no-repeat center;
                background-size: cover;
            }
        }
        &.exim {
            .img {
                background: url("/images/common/bankcard/exim.webp") no-repeat center;
                background-size: cover;
            }
        }
        &.ghb {
            .img {
                background: url("/images/common/bankcard/ghb.webp") no-repeat center;
                background-size: cover;
            }
        }
        &.gsb {
            .img {
                background: url("/images/common/bankcard/gsb.webp") no-repeat center;
                background-size: cover;
            }
        }
        &.hsbc {
            .img {
                background: url("/images/common/bankcard/hsbc.webp") no-repeat center;
                background-size: cover;
            }
        }
        &.ibank {
            .img {
                background: url("/images/common/bankcard/ibank.webp") no-repeat center;
                background-size: cover;
            }
        }
        &.icbc {
            .img {
                background: url("/images/common/bankcard/icbc.webp") no-repeat center;
                background-size: cover;
            }
        }
        &.kbank {
            .img {
                background: url("/images/common/bankcard/kbank.webp") no-repeat center;
                background-size: cover;
            }
        }
        &.kkp {
            .img {
                background: url("/images/common/bankcard/kkp.webp") no-repeat center;
                background-size: cover;
            }
        }
        &.ktb {
            .img {
                background: url("/images/common/bankcard/ktb.webp") no-repeat center;
                background-size: cover;
            }
        }
        &.lhbank {
            .img {
                background: url("/images/common/bankcard/lhbank.webp") no-repeat center;
                background-size: cover;
            }
        }
        &.mhcb {
            .img {
                background: url("/images/common/bankcard/mhcb.webp") no-repeat center;
                background-size: cover;
            }
        }
        &.scb {
            .img {
                background: url("/images/common/bankcard/scb.webp") no-repeat center;
                background-size: cover;
            }
        }
        &.scbt {
            .img {
                background: url("/images/common/bankcard/scbt.webp") no-repeat center;
                background-size: cover;
            }
        }
        &.smbc {
            .img {
                background: url("/images/common/bankcard/smbc.webp") no-repeat center;
                background-size: cover;
            }
        }
        &.sme {
            .img {
                background: url("/images/common/bankcard/sme.webp") no-repeat center;
                background-size: cover;
            }
        }
        &.tcrb {
            .img {
                background: url("/images/common/bankcard/tcrb.webp") no-repeat center;
                background-size: cover;
            }
        }
        &.tisco {
            .img {
                background: url("/images/common/bankcard/tisco.webp") no-repeat center;
                background-size: cover;
            }
        }
        &.ttb {
            .img {
                background: url("/images/common/bankcard/ttb.webp") no-repeat center;
                background-size: cover;
            }
        }
        &.uob {
            .img {
                background: url("/images/common/bankcard/uob.webp") no-repeat center;
                background-size: cover;
            }
        }
        .img {
            min-width: 36px;
            height: 36px;
            border-radius: 6px;
            background: url("/images/common/deposit-icon-bank-card.webp") no-repeat center;
            background-size: cover;
        }
    }
}

/*-----------------彈窗-取款輸入金額-----------------*/
#withdraw-popup-amount .popup {
    width: 400px;
}

#withdraw-popup-amount .area-amount .amount-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    align-items: center;
    gap: .4rem;
}

#withdraw-popup-amount .popup-content.bank-card {
    .card.crypto,
    .area-amount .input-area .input-remark .rate {
        display: none;
    }
}

#withdraw-popup-amount .popup-content.crypto {

    .card.bank-card {
        display: none;
    }
}

/*-------------------彈窗-實名驗證-------------------*/
#withdraw-popup-verify .popup {
    max-width: 480px;
    min-width: 480px;
}

/* 上傳憑證 */
#withdraw-popup-verify .input-area .list-upload {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: .4rem;
    width: 100%;
}

#withdraw-popup-verify .list-upload .input-upload {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: .4rem .4rem .4rem .6rem;
    gap: .6rem;
    width: 100%;
    border-radius: .4rem;

    .upload-number {
        font-size: .9rem;
        min-width: 2.6rem;
    }
}

#withdraw-popup-verify .input-upload .upload-text {
    text-align: left;
    width: 100%;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    font-size: .9rem;
}

#withdraw-popup-verify .input-upload .input-text {
    width: 100%;
    height: 2.8rem;
    border-radius: 4px;
    display: flex;
    align-items: center;
}

#withdraw-popup-verify .input-upload .btn-upload {
    max-width: 6rem;
    min-width: 3.6rem;
    height: 2.8rem;
}

#withdraw-popup-verify .input-upload .upload-text.nodata {
    justify-content: center;
    padding: 0;
}

#withdraw-popup-verify .input-area .remark.upload {
    text-align: left;
}

/*----------------彈窗-添加取款方式----------------*/
#withdraw-popup-add .popup {
    max-width: fit-content;
}

#withdraw-popup-add .popup-content.crypto .list-content {
    width: 100%;
}

#withdraw-popup-add .popup-content .list-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1.4rem;
}

#withdraw-popup-add .popup-content.bank-card .list-content {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    position: relative;
}

#withdraw-popup-add .popup-content.bank-card .hr-vertical {
    position: absolute;
    left: 50%;
    height: 100%;
}

#withdraw-popup-add .remark {
    width: 100%;
    font-weight: bold;
    text-align: left;
}

#withdraw-popup-add .popup-btn .btn-cancel,
#withdraw-popup-add .popup-btn .btn-send {
    max-width: 164px;
}

/* 取款類型顯示切換 */
#withdraw-popup-add .popup-content.bank-card .input-area.coin,
#withdraw-popup-add .popup-content.bank-card .input-area.network,
#withdraw-popup-add .popup-content.bank-card .input-area.wallet-address,
#withdraw-popup-add .popup-content.bank-card .input-area.qrcode-upload {
    display: none;
}

#withdraw-popup-add .popup-content.crypto .hr-vertical,
#withdraw-popup-add .popup-content.crypto .input-area.bank,
#withdraw-popup-add .popup-content.crypto .input-area.bank-province,
#withdraw-popup-add .popup-content.crypto .input-area.bank-city,
#withdraw-popup-add .popup-content.crypto .input-area.bank-branch,
#withdraw-popup-add .popup-content.crypto .input-area.bank-name,
#withdraw-popup-add .popup-content.crypto .input-area.bank-number,
#withdraw-popup-add .popup-content.crypto .input-area.phone {
    display: none;
}

#withdraw-popup-add .input-upload .input-text .file-name {
    width: 200px;
}


/*----------------------------Loading----------------------------*/
#loading .img-loading {
    z-index: 1002;
}

#loading .img-loading {
    width: 150px;
    height: 150px;
}


/*-------------------------我的帳戶 > 基本資料------------------------*/
#my-info-basic .item {
    gap: 1.6rem;
}

#my-info-basic .item-field {
    display: flex;
    flex-direction: column;
    gap: .6rem;

    /* 欄位標題 */
    .field-title {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        height: 32px;

        .field-name {
            display: flex;
            flex-direction: row;
            align-items: center;
            gap: .4rem;
            font-weight: bold;

            .icon {
                font-size: 1.1rem;
            }
        }

        .btn-edit {
            border-radius: 50rem;
            padding: .4rem .8rem;
            font-weight: bold;
            min-width: 58px;
            max-width: 210px;
            cursor: pointer;
        }
    }

    /* 欄位內容 */
    .field-content {
        height: 2.8rem;
        display: flex;
        align-items: center;
        padding: .4rem .8rem;
        border-radius: 4px;

        .data {
            font-weight: bold;
            font-size: 1.1rem;
        }

        .no-data {
            display: none;
        }
    }

    /* 欄位狀態 */
    .field-state {
        display: flex;
        flex-direction: row;
        gap: .4rem;
        align-items: center;
        font-weight: bold;
    }
}

#my-info-basic .item-field.no-data {

    /* 欄位內容 */
    .field-content {

        .data {
            display: none;
        }

        .no-data {
            display: block;
        }
    }
}

/* 實名驗證 - 狀態切換 */
#my-info-basic .item-field.verify-name.no-data {

    /* 欄位標題 */
    .field-title {

        .btn-edit.anew {
            display: none;
        }
    }

    /* 欄位狀態 */
    .field-state {
        display: none;
    }
}

#my-info-basic .item-field.verify-name.review {

    /* 欄位標題 */
    .field-title {

        .btn-edit {
            display: none;
        }
    }

    /* 欄位內容 */
    .field-content {

        .data {
            display: block;
        }

        .no-data {
            display: none;
        }
    }

    /* 欄位狀態 */
    .field-state.reject,
    .field-state.success {
        display: none;
    }
}

#my-info-basic .item-field.verify-name.success {

    /* 欄位標題 */
    .field-title {

        .btn-edit {
            display: none;
        }
    }

    /* 欄位內容 */
    .field-content {

        .data {
            display: block;
        }

        .no-data {
            display: none;
        }
    }

    /* 欄位狀態 */
    .field-state.review,
    .field-state.reject {
        display: none;
    }
}

#my-info-basic .item-field.verify-name.reject {

    /* 欄位標題 */
    .field-title {

        .btn-edit.default {
            display: none;
        }
    }

    /* 欄位內容 */
    .field-content {

        .data {
            display: block;
        }

        .no-data {
            display: none;
        }
    }

    /* 欄位狀態 */
    .field-state.review,
    .field-state.success {
        display: none;
    }
}


/*------------------------------我的帳戶-----------------------------*/
/*---------------------頁面選單---------------------*/
.page-content-list .area-menu .my-user-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    width: 100%;
}

/* 分隔線 */
.page-content-list .area-menu .hr {
    margin: 1rem 0;
}

/* 頭像 */
.page-content-list .area-menu .my-user-info .avatar {
    width: 100px;
    height: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 2px;
    border-radius: 50%;
}

.page-content-list .area-menu .my-user-info .info-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .6rem;
    width: 100%;
}

/* 用戶暱稱、VIP */
.area-menu .my-user-info .user-name {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    max-width: 180px;
    flex-wrap: wrap;
    width: 100%;
}

.area-menu .my-user-info .user-name .text {
    font-size: 1.3rem;
    font-weight: bold;
    text-align: center;
}

.area-menu .my-user-info .info-content .vip {
    padding: .2rem .4rem;
    border-radius: 1rem;
    font-weight: bold;
    text-align: center;
}

/* 帳號、餘額 */
.area-menu .my-user-info .list-field {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .2rem;
    width: 100%;
}

.area-menu .my-user-info .list-field .field {
    display: flex;
    border-radius: 4px;
    width: 100%;
    flex-direction: column;
    align-items: flex-start;
    padding: .6rem .8rem;
    gap: .2rem;
}

.area-menu .my-user-info .list-field .field .title {
    min-width: 30px;
    font-size: .9rem;
}

.area-menu .my-user-info .list-field .field .text {
    font-weight: bold;
}

/* 頁面按鈕清單 */
.page-content-list .area-menu .list-btn {
    display: flex;
    flex-direction: column;
    width: 100%;
}

@media (max-width: 1440px) {

    .area-menu .my-user-info .user-name .text {
        font-size: 1.2rem;
    }

    .page-content-list .area-menu .my-user-info .info-content {
        font-size: .9rem;
    }

    .page-content-list .area-menu .hr {
        margin: .6rem 0;
    }
}


/*-------------------------我的帳戶 > 會員等級------------------------*/
/* 當前VIP資訊 */
#my-info-member .area-content .area-vip-now {
    display: flex;
    flex-direction: column;
    justify-self: center;
    gap: .6rem;
}

#my-info-member .area-content .area-vip-now .content {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: .6rem;
}

#my-info-member .area-content .area-vip-now .remark {
    text-align: right;
}

#my-info-member .area-vip-now .content .info-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: .6rem;
    width: 100%;
}
#my-info-member .content .info-content .list-total {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 1rem;
    border-radius: 8px;
    padding: .6rem 1rem;
}

#my-info-member .content .info-content .list-total .item {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

#my-info-member .content .info-content .list-total .hr-vertical {
    height: 28px;
}

#my-info-member .info-content .list-total .item .amount {
    font-weight: bold;
    font-size: 1.1rem;
}
#my-info-member {
    .info-bar-area {
        display: flex;
        flex-direction: row;
        align-items: center;
        width: 100%;
        gap: 1rem;
        padding: .4rem 1rem;
        border-radius: 8px;
        .info-bar-item {
            display: flex;
            flex-direction: column;
            width: 100%;
            gap: .4rem;
            .info-bar-title {
                display: flex;
                flex-direction: row;
                gap: .4rem;
                font-size: .8rem;
                .info-bar-text {
                    display: flex;
                    flex-direction: row;
                    gap: .4rem;
                    &:after {
                        content: ':';
                        display: block;
                    }
                }
            }
            .info-bar-percent {
                display: flex;
                flex-direction: row;
                align-items: center;
                gap: .2rem;
                width: 100%;
                height: 14px;
                border-radius: 7px;
                .info-bar-bg {
                    display: flex;
                    align-items: center;
                    justify-content: flex-end;
                    height: 14px;
                    border-radius: 7px;
                    .info-bar-number {
                        position: relative;
                        font-size: .8rem;
                        right: -3.2rem;
                    }
                    &.inside {
                        .info-bar-number {
                            right: .6rem;
                        }
                    }
                }
            }
        }
        .hr-vertical {
            width: 1px;
            height: 24px;
        }
        @media (max-width: 1280px) {
            flex-direction: column;
            .hr-vertical {
                width: 100%;
                height: 1px;
            }
        }
    }
}

#my-info-member .content .info-content .list-gift {
    display: flex;
    flex-direction: row;
    gap: .6rem;
    width: 100%;
}

#my-info-member .content .info-content .list-gift .item {
    width: 100%;
    height: 70px;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: .8rem;
    border-radius: 8px;
    padding: 0 1rem;
    position: relative;
}

#my-info-member .info-content .list-gift .item .img {
    min-width: 45px;
    height: 45px;
}

#my-info-member .info-content .list-gift .item .text {
    display: flex;
    flex-direction: column;
    gap: .2rem;
    width: 100%;
}

#my-info-member .info-content .list-gift .item .state {
    position: absolute;
    top: .6rem;
    right: .8rem;
    font-size: .9rem;
    text-align: center;
}

#my-info-member .info-content .list-gift .item .text .title,
#my-info-member .info-content .list-gift .item .text .amount {
    font-weight: bold;
}

/* VIP Card */
#my-info-member .area-content .vip-card {
    width: 360px;
    min-width: 360px;
    height: 140px;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    overflow: hidden;
}

#my-info-member .area-content .vip-card.now {
    height: 156px;
    min-width: 260px;
}


#my-info-member .area-content .vip-card .tag {
    text-align: center;
    font-weight: bold;
    padding: .4rem .8rem .4rem .6rem;
    border-radius: 7px 0 18px 0;
    font-size: .9rem;
}

#my-info-member .area-content .vip-card .level-text {
    font-size: 2rem;
    width: 100%;
    height: 100%;
    padding: 1rem 1.6rem;
    line-height: 36px;
    word-wrap: break-word;
}

/* VIP資訊清單 */
#my-info-member .area-content .area-vip-info {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    height: 540px;
}

#my-info-member .area-content .area-vip-info .area-title {
    font-size: 1.1rem;
    font-weight: bold;
}

#my-info-member .area-content .area-vip-info .area-list {
    width: 100%;
    position: relative;
}

#my-info-member .area-vip-info .area-list .list {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-start;
    align-self: center;
    gap: .6rem;
    overflow-y: auto;
    width: 100%;
    position: absolute;
    left: 0;
    top: 0;
    padding-bottom: .4rem;
}

#my-info-member .area-vip-info .area-list .list::-webkit-scrollbar {
    height: 6px;
    border-radius: 5rem;
}

#my-info-member .area-vip-info .area-list .list::-webkit-scrollbar-thumb {
    border-radius: 5rem;
}

#my-info-member .area-vip-info .list .item-vip {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: .6rem;
}

#my-info-member .area-vip-info .list .item-vip .vip-card.now {
    height: 140px;
}

#my-info-member .area-vip-info .list .item-vip .list-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1rem;
    padding: 1.2rem;
    border-radius: 8px;
}

#my-info-member .area-vip-info .list .item-vip .list-info .item {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: .6rem;
}

#my-info-member .area-vip-info .item-vip .list-info .item .item-title {
    font-weight: bold;
}

#my-info-member .item-vip .list-info .list-data.limit,
#my-info-member .area-vip-info .item-vip .list-info .item .list-data {
    display: flex;
    flex-direction: column;
    gap: .6rem;
    width: 100%;
}

#my-info-member .item-vip .list-info .list-data.limit .field,
#my-info-member .area-vip-info .item-vip .item .list-data .field {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    font-size: .9rem;
}

#my-info-member .list-info .item-vip .field .field-title {
    font-weight: normal;
}

#my-info-member .list-info .item-vip .field .field-amount {
    font-weight: bold;
}

/* VIP返水率 */
#my-info-member .area-vip-cashback {
    display: flex;
    flex-direction: column;
    gap: .8rem;

    .area-title {
        font-weight: bold;
        font-size: 1.1rem;
    }

    /*-- 返水限制 --*/
    .list-cashback-limit {
        width: 100%;
        display: flex;
        flex-direction: row;
        gap: .4rem;

        .item {
            display: flex;
            flex-direction: column;
            gap: .2rem;
            align-items: center;
            justify-content: center;
            width: 100%;
            padding: .4rem;
            border-radius: 8px;

            .text {
                font-weight: bold;
                font-size: .9rem;
            }

            .amount {
                font-weight: bold;
                font-size: 1.3rem;
            }
        }
    }

    /*-- 遊戲返水率 --*/
    .list-table {
        width: 100%;
        display: flex;
        flex-direction: row;
        gap: 0;
        border-radius: 8px;

        .table-colum-title {
            width: 150px;
            font-weight: bold;

            .row {
                display: flex;
                align-items: center;
                justify-content: center;
                padding: .4rem;
                height: 40px;
                font-size: .9rem;
                font-weight: bold;
            }

            .row.title {
                font-weight: 400;
            }
        }

        .table-content {
            width: 100%;
            position: relative;

            .content {
                overflow-x: auto;
                width: 100%;
                position: absolute;
                left: 0;
                top: 0;
                padding-bottom: .4rem;

                .row {
                    display: flex;
                    flex-direction: row;

                    .colum {
                        width: 100%;
                        min-width: 100px;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        padding: .4rem;
                        height: 40px;
                        font-size: .9rem;
                    }

                    .colum.now-level {
                        font-weight: bold;
                    }
                }
            }
        }
    }
}

#my-info-member .area-vip-cashback .table-content .content {

    &::-webkit-scrollbar {
        height: 6px;
        border-radius: 5rem;
    }

    &::-webkit-scrollbar-thumb {
        border-radius: 5rem;
    }
}

@media (max-width: 1280px) {

    #my-info-member .info-content .list-total .item .title {
        font-size: .9rem;
    }

    #my-info-member .content .info-content .list-total {
        gap: .4rem;
    }

    #my-info-member .area-vip-now .content .info-content {
        gap: .4rem;
    }

    #my-info-member .content .info-content .list-gift {
        flex-direction: column;
        gap: .2rem;
    }

    #my-info-member .content .info-content .list-total .item {
        flex-direction: column;

        .amount {
            font-size: .9rem;
        }
    }

    #my-info-member .content .info-content .list-gift .item {
        padding: .6rem;
        flex-direction: row;
        gap: 1rem;
    }

    #my-info-member .info-content .list-gift .item .text {
        flex-direction: row;
        justify-content: space-between;

        .title {
            font-size: .9rem;
        }

        .amount {
            text-align: right;
            font-size: .9rem;
        }
    }

    #my-info-member .info-content .list-gift .item .img {
        display: none;
    }

    #my-info-member .info-content .list-gift .item .state {
        position: unset;
        min-width: 12%;
    }

    #my-info-member .area-vip-info .list .item-vip .list-info,
    #my-info-member .area-content .area-vip-info {
        gap: .6rem;
    }

    #my-info-member .area-vip-info .area-list .list {
        gap: .4rem;
    }
}

@media (max-width: 1680px) {

    #my-info-member .area-content .vip-card.now {
        height: 100%;
    }

    #my-info-member .area-content .vip-card .level-text {
        font-size: 1.6rem;
    }

    #my-info-member .area-content .area-vip-now .content {
        gap: .4rem;
    }

    #my-info-member .area-vip-now .content .info-content {
        font-size: .9rem;
        gap: .4rem;

        .list-gift {
            gap: .4rem;
        }
    }

    #my-info-member .content .info-content .list-gift .item {
        padding: .6rem .8rem;
    }
}

/*-------------------彈窗-修改生日-------------------*/
#my-popup-modify-birthday .popup-content .select-date {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: .4rem;
    width: 100%;
}

#my-popup-modify-birthday .popup .popup-content {
    overflow-y: initial;
}


/*-------------------------------帳戶明細----------------------------*/
/* 欄位寬度 */
#deal-detail .table .colum.order-id {
    width: 40%;
    word-break: break-all;
    text-align: center;
}

#deal-detail .table .colum.state {
    width: 10%;
    font-weight: bold;
}

#deal-detail .table .colum.time {
    width: 30%;
    text-align: center;
}

#deal-detail .table .colum.type {
    width: 30%;
}

#deal-detail .table .colum.detail {
    width: 20%;
    text-align: center;
}

#deal-detail .table .colum.amount {
    width: 20%;
    word-break: break-all;
    text-align: center;
}

#deal-detail .table .colum.data-remark {
    width: 30%;
}

#deal-detail .table .row.title .colum.data-remark {
    justify-content: center;
    align-items: center;
}


/*-----------------------------投注紀錄-----------------------------*/
#bet-record .area-content .content-title {
    flex-direction: column;
    gap: 1rem;
    justify-content: center;
}

#bet-record .area-content .content-title .list-total {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: .8rem;
    width: 100%;
    border-radius: 8px;
    padding: .6rem 1rem;
}

#bet-record .content-title .list-total .item {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

#bet-record .content-title .list-total .hr-vertical {
    height: 26px;
}

#bet-record .list-total .item .field-title {
    width: 60%;
    font-size: 1rem;
}

#bet-record .list-total .item .field-content {
    width: 100%;
    text-align: center;
    font-size: 1.2rem;
    font-weight: bold;
}

#bet-record .area-content .content-title .area-function {
    display: flex;
    flex-direction: column;
    gap: .6rem;
    width: 100%;
}

#bet-record .content-title .area-function .list-btn-function {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: .4rem;
    width: 100%;
}

#bet-record .area-function .list-btn-function .dropdown {
    width: 20%;
}

#bet-record .area-function .list-btn-function .input-time {
    width: 30%;

    .field-title {
        width: 32%;
    }

    .input-date {
        width: 70%;
    }
}

/* 搜尋遊戲單號 */
#bet-record .area-function .list-btn-function .input-search {
    display: flex;
    flex-direction: row;
    align-items: center;
    font-size: 1rem;
    border-radius: 4px;
    padding: 0 0 0 .8rem;
    width: 30%;
    height: 2.8rem;
}

#bet-record .list-btn-function .input-search .input-text {
    width: 100%;
    height: 100%;
}

#bet-record .list-btn-function .input-search .icon-search {
    display: flex;
    align-items: center;
}

#bet-record .content-title .list-remark {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    width: 100%;
}

#bet-record .content-title .list-remark .data-count {
    font-size: .9rem;
    font-weight: bold;
    text-align: center;
}

#bet-record .area-content .table-bet-record {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .6rem;
}

#bet-record .area-content .table-bet-record .item {
    display: flex;
    flex-direction: column;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
}

#bet-record .table-bet-record .item .item-title {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: .6rem 1rem;
}

#bet-record .table-bet-record .item .item-title .game-name {
    font-weight: bold;
}

#bet-record .table-bet-record .item .item-title .data-count {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: .8rem;
    font-size: .9rem;
}

#bet-record .table-bet-record .item .item-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: .8rem;
    padding: 1rem;
    font-size: .9rem;
}

#bet-record .table-bet-record .item .item-content .field {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

#bet-record .item .item-content .field .amount {
    font-weight: bold;
}

@media (max-width: 1500px) {
    #bet-record .area-content .content-title .list-total {
        gap: .6rem;
        padding: .4rem .6rem;

        .item .field-title {
            font-size: .9rem;
        }

        .item .field-content {
            font-size: 1rem;
        }
    }

    #bet-record .area-function .list-btn-function .input-time {
        width: 30%;
        min-width: 167px;
        gap: 0;
        .field-title {
            width: 24%;
        }

        .input-date {
            width: 76%;
            padding: .2rem;
        }
    }
}

/*-----------------------------投注詳情-----------------------------*/
#bet-record-detail .content-title .game-name {
    font-size: 1.4rem;
    font-weight: bold;
    text-align: center;
}

#bet-record-detail .content-title .btn-back {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: .6rem;
    font-weight: bold;
    cursor: pointer;
}

#bet-record-detail .content-title .data-count {
    font-weight: bold;
    text-align: center;
}

#bet-record-detail .table .row .colum.winlose {
    font-weight: bold;
}

/* 欄位寬度 */
#bet-record-detail .table .row .colum.game {
    width: 30%;
    word-break: break-all;
    text-align: center;
}

#bet-record-detail .table .row .colum.state {
    width: 12%;
    text-align: center;
    font-weight: bold;
}

#bet-record-detail .table .row .colum.time {
    width: 20%;
    text-align: center;
}

#bet-record-detail .table .row .colum.winlose,
#bet-record-detail .table .row .colum.bet,
#bet-record-detail .table .row .colum.bet-valid {
    width: 20%;
    word-break: break-all;
    text-align: center;
}

#bet-record-detail .table .row .colum.order-id {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: .2rem;
    width: 30%;
    word-break: break-all;
    text-align: center;
}

@media (max-width: 1080px) {
    #bet-record .content-title .area-function .list-btn-function {
        display: grid;
        grid-template-columns: repeat(3, 1fr);

        .input-search,
        .input-time,
        .dropdown {
            width: 100%;
        }
    }

    #bet-record .table-bet-record .item .item-content .field {
        flex-direction: column;
        align-items: flex-start;
    }
}


/*-----------------------------即時返水-----------------------------*/
#instant-rebate {
    .area-content {
        .content-title {
            .item {
                flex-direction: column;
                align-items: flex-start;
                gap: .6rem;
                .list-total {
                    display: flex;
                    flex-direction: row;
                    align-items: center;
                    justify-content: center;
                    gap: .8rem;
                    width: 100%;
                    border-radius: 8px;
                    padding: .6rem 1rem;
                    .item {
                        display: flex;
                        flex-direction: row;
                        align-items: center;
                        justify-content: space-between;
                        width: 100%;
                        .field-title {
                            width: 100%;
                            font-size: 1rem;
                        }
                        .field-content {
                            width: 100%;
                            text-align: center;
                            font-size: 1.2rem;
                            font-weight: bold;
                        }
                    }
                    .hr-vertical  {
                        height: 26px;
                    }
                }
                .list-function {
                    width: 100%;
                    justify-content: space-between;
                    padding: 0 0 1rem 0;
                    .dropdown {
                        width: 385px;
                        padding: 0 .6rem;
                        .dropdown-btn {
                            display: flex;
                            align-items: center;
                            width: 100%;
                            height: 2.8rem;
                            padding: .6rem;
                            cursor: pointer;
                            .option {
                                padding-left: .6rem;
                            }
                        }
                    }
                }
                .remark {
                    text-align: left;
                }
            }
        }
        .table-instant-rebate {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: .6rem;
            .item {
                display: flex;
                flex-direction: column;
                border-radius: 8px;
                overflow: hidden;
                .item-title {
                    display: flex;
                    flex-direction: row;
                    align-items: center;
                    justify-content: space-between;
                    padding: .6rem 1rem;
                    .game-name {
                        font-weight: bold;
                    }
                }
                .item-content {
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    gap: .8rem;
                    padding: 1rem;
                    font-size: .9rem;
                    .field {
                        display: flex;
                        flex-direction: row;
                        justify-content: space-between;
                        align-items: center;
                        .amount {
                            font-weight: bold;
                        }
                    }
                }
            }
        }
    }
}

@media (max-width: 1500px) {
    #instant-rebate .area-content .content-title .item .list-total {
        gap: .6rem;
        padding: .4rem .6rem;

        .item .field-title {
            font-size: .9rem;
        }

        .item .field-content {
            font-size: 1rem;
        }
    }
}

#instant-rebate-popup {
    .popup {
        .popup-text {
            padding: 1rem 0 0 0;
            text-align: center;
            line-height: 1.4rem;
            span {
                display: block;
            }
        }
    }
}


/*-----------------------------優惠紀錄-----------------------------*/
#bonus-record-vip .area-content .content-title,
#bonus-record-cashback .area-content .content-title,
#bonus-record-offer .area-content .content-title,
#bonus-all-agent  .area-content .content-title,
#instant-rebate  .area-content .content-title {
    flex-direction: column;
    gap: 1rem;
    justify-content: center;
}

/* 一鍵領取按鈕 */
#bonus-record-vip .content-title .item .btn-one-click,
#bonus-record-cashback .content-title .item .btn-one-click,
#bonus-record-offer .content-title .item .btn-one-click,
#instant-rebate .content-title .item .btn-one-click,
#bonus-all-agent .content-title .item .btn-one-click  {
    font-weight: bold;
    text-align: center;
    border-radius: 6rem;
    padding: .4rem .8rem;
    cursor: pointer;
}

/* 一鍵領取按鈕(禁用) */
#bonus-record-vip .content-title .item .btn-one-click.disabled,
#bonus-record-cashback .content-title .item .btn-one-click.disabled,
#bonus-record-offer .content-title .item .btn-one-click.disabled,
#bonus-all-agent .content-title .item .btn-one-click.disabled,
#instant-rebate .content-title .item .btn-one-click.disabled,
#bonus-all-agent .content-title .item .btn-one-click.disabled {
    cursor: not-allowed;
    opacity: 0.5;
}

/* 欄位寬度 */
#bonus-record-vip .table .colum.order-id,
#bonus-record-cashback .table .colum.order-id,
#bonus-record-offer .table .colum.order-id,
#bonus-all-agent .table .colum.order-id {
    width: 28%;
    word-break: break-all;
    text-align: center;
}

#bonus-record-vip .table .colum.name,
#bonus-record-cashback .table .colum.name,
#bonus-record-offer .table .colum.name,
#bonus-all-agent .table .colum.name {
    width: 18%;
    word-break: break-all;
    text-align: center;
}

#bonus-record-vip .table .colum.state,
#bonus-record-cashback .table .colum.state,
#bonus-record-offer .table .colum.state,
#bonus-all-agent .table .colum.state {
    width: 10%;
    font-weight: bold;
}

#bonus-record-vip .table .colum.deal-time,
#bonus-record-cashback .table .colum.deal-time,
#bonus-record-offer .table .colum.deal-time,
#bonus-all-agent .table .colum.deal-time {
    width: 16%;
    text-align: center;
}

#bonus-record-vip .table .colum.deal-time-review,
#bonus-record-offer .table .colum.deal-time-review,
#bonus-all-agent .table .colum.deal-time-review {
    width: 16%;
    text-align: center;
}

#bonus-record-vip .table .colum.deal-amount,
#bonus-record-cashback .table .colum.deal-amount,
#bonus-record-offer .table .colum.deal-amount,
#bonus-all-agent .table .colum.deal-amount {
    width: 16%;
    word-break: break-all;
    text-align: center;
}

#bonus-record-vip .table .colum.deal-time-receive,
#bonus-record-cashback .table .colum.deal-time-receive,
#bonus-record-offer .table .colum.deal-time-receive,
#bonus-all-agent .table .colum.deal-time-receive {
    width: 16%;
    text-align: center;
}

#bonus-record-cashback .table .colum.data-remark,
#bonus-record-offer .table .colum.data-remark,
#bonus-all-agent .table .colum.data-remark {
    width: 28%;
    align-items: center;
}

#bonus-record-vip .table .row.title .colum.data-remark,
#bonus-record-cashback .table .row.title .colum.data-remark,
#bonus-record-offer .table .row.title .colum.data-remark,
#bonus-all-agent .table .row.title .colum.data-remark {
    justify-content: center;
    align-items: center;
}

#bonus-record-cashback .table .colum.type {
    width: 10%;
}
#bonus-all-agent .table .colum.type {
    width: 28%;
}
#bonus-all-agent .table .colum.cashbacktype {
    width: 28%;
    cursor: pointer;
}
#bonus-record-vip .table {
    .row {
        justify-content: space-between;
    }
    .colum {
        &.order-id, &.deal-time, &.deal-time-review, &.deal-amount {
            width: 100%;
        }
    }
}
/* 全民代理獎金彈窗 */
#bonus-all-agent-popup {
    .popup {
        max-width: none;
        width: 1080px;
    }
    .table {
        gap: 0;
        border-radius: 6px;
        .row {
            border-radius: 0;
        }
        .title {
            min-height: 46px;
        }
        .colum {
            &.order-d {
                word-break: break-all;
                text-align: center;
            }
        }
    }
    .btn-send {
        max-width: 140px;
    }
}


/*---------------------------我的推廣------------------------------*/
.area-menu.promote .btn-back-my {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: .6rem;
    font-weight: bold;
    padding: .6rem .8rem;
    cursor: pointer;
}

.area-menu.promote .list-btn-page .list-team,
.area-menu.promote .list-btn-page {
    display: flex;
    flex-direction: column;
}

.area-menu.promote .list-team .btn-menu.team-report,
.area-menu.promote .list-team .btn-menu.team-overview {

    margin-left: 1.8rem;
    gap: .4rem;
    padding: .4rem .8rem;

    .icon {
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: .4rem;
        width: .4rem;
        height: .4rem;
    }
}

/*------------------------我的推廣 > 推廣總覽------------------------*/
#promote-overview .area-content .area-receive-award {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 1.2rem;
    padding: .4rem 1rem;
    border-radius: 8px;
}

#promote-overview .area-content .area-receive-award .img-icon {
    width: 60px;
    height: 60px;
}

#promote-overview .area-content .area-receive-award .content {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    font-weight: bold;

    .amount {
        font-weight: bold;
        font-size: 1.2rem;
    }
}

#promote-overview .area-content .area-receive-award .btn-receive {
    font-weight: bold;
    text-align: center;
    border-radius: 6rem;
    width: 8%;
    padding: .4rem .8rem;
    cursor: pointer;
    white-space:nowrap;
}
#promote-overview .area-content .area-receive-award .hr-vertical {
    height: 100%;
}

/* 推廣統計 */
#promote-overview .area-content .area-total,
#promote-overview .area-content .area-promote-method {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 1rem;

    .area-title {
        font-weight: bold;
        font-size: 1.4rem;
    }
}

#promote-overview .area-content .area-total .list-data {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: .6rem;
    align-items: flex-start;
}

#promote-overview .area-content .area-total .list-data .item {
    display: flex;
    flex-direction: column;
    width: 100%;
    border-radius: 4px;
    overflow: hidden;
}

#promote-overview .area-total .list-data .item .item-title {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: .8rem 1.2rem;
    font-weight: bold;

    .content-text {
        font-size: 1.1rem;
    }
}

#promote-overview .list-data .item .item-content {
    display: flex;
    flex-direction: column;
    padding: 1.2rem;
    gap: 1rem;
}

#promote-overview .list-data .item .item-content .field {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;

    .field-content {
        font-weight: bold;
    }
}

/* 推廣方式 */
#promote-overview .area-content .area-promote-method .content {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    gap: .4rem;
}

#promote-overview .area-promote-method .content .list-method {
    display: flex;
    flex-direction: column;
    gap: .4rem;
    width: 100%;
}

#promote-overview .area-promote-method .content .list-method .item {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 1rem;
    border-radius: 4px;
    height: 70px;
}

#promote-overview .area-promote-method .list-method .item .title {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: .6rem;

    .icon {
        width: 24px;
        height: 24px;
    }

    .text {
        font-weight: bold;
    }
}

#promote-overview .area-promote-method .list-method .item .content {
    display: flex;
    flex-direction: row;
    gap: .4rem;
    align-items: center;
    justify-content: flex-end;
}

#promote-overview .area-promote-method .list-method .item .content .text {
    font-size: .9rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#promote-overview .list-method .item.qrcode .list-btn-function {
    display: flex;
    flex-direction: row;
    align-items: center;
    width: fit-content;
    gap: .4rem;
}

#promote-overview .item.qrcode .list-btn-function .btn-option {
    gap: .6rem;
    height: 2.8rem;
    min-width: 100px;

    .btn-text {
        font-weight: bold;
    }
}

#promote-overview .area-promote-method .content .area-qrcode {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: .6rem;
    border-radius: 4px;
    width: 24%;
}

#promote-overview .area-promote-method .content .area-qrcode .img-qrcode {
    background-position: center;
    background-size: cover;
}

@media (max-width: 1500px) {
    #promote-overview .area-content .area-receive-award .btn-receive {
        width: 12%;
    }

    #promote-overview .area-promote-method .list-method .item .title {
        width: 32%;
    }

    #promote-overview .list-method .item .content .text {
        width: 320px;
        white-space: nowrap;
        text-overflow: ellipsis;
        text-align: right;
        overflow: hidden;
    }

    #promote-overview .area-promote-method .content .area-qrcode {
        width: 32%;
    }
}

/*-------------------我的推廣 > 推廣教程-------------------*/
#promote-tutorial .area-content .item-content {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 1rem;
}

#promote-tutorial .area-content .item-content .title {
    font-size: 1.4rem;
    font-weight: bold;
}

#promote-tutorial .area-content .item-content .list-qa {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: .6rem;
}

#promote-tutorial .item-content .list-qa .item-qa {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 1rem;
    padding: 1rem 1.2rem;
    border-radius: 8px;
    cursor: pointer;
}

#promote-tutorial .item-content .list-qa .item-qa .qa-title {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

#promote-tutorial .list-qa .item-qa .qa-title .text {
    font-size: 1rem;
}

#promote-tutorial .list-qa .item-qa .content {
    font-size: .9rem;
    word-break: break-all;
    word-wrap: break-word;
    white-space: pre-wrap;
    line-height: 2rem;
}

/* 同步前端pre標籤設定 */
#promote-tutorial .list-qa .item-qa .qa-content-sub pre {
    word-break: break-all;
    word-wrap: break-word;
    white-space: pre-wrap;
    line-height: 1rem;
}

/*-------------------我的推廣 > 獎勵規則-------------------*/
#promote-rule .area-content .item-content {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 1rem;
}

#promote-rule .area-content .item-content .title {
    font-size: 1.4rem;
    font-weight: bold;
}

#promote-rule .area-content .item-content .list-qa {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: .6rem;
}

#promote-rule .item-content .list-qa .item-qa {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 1rem;
    padding: 1rem 1.2rem;
    border-radius: 8px;
    cursor: pointer;
}

#promote-rule .item-content .list-qa .item-qa .qa-title {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

#promote-rule .list-qa .item-qa .qa-title .text {
    font-size: 1rem;
}

#promote-rule .list-qa .item-qa .content {
    font-size: .9rem;
    word-break: break-all;
    word-wrap: break-word;
    white-space: pre-wrap;
    line-height: 2rem;
}

/* 同步前端pre標籤設定 */
#promote-rule .list-qa .item-qa .qa-content-sub pre {
    word-break: break-all;
    word-wrap: break-word;
    white-space: pre-wrap;
    line-height: 1rem;
}

/*------------------------我的推廣 > 推廣業績------------------------*/
#promote-achievement .list-function .btn-sort-by {
    width: 2.8rem;
    height: 2.8rem;
    font-size: 1.2rem;
    border-radius: 4px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

/* 欄位寬度 */
#promote-achievement .table .colum.award-amount,
#promote-achievement .table .colum.time-receive,
#promote-achievement .table .colum.settlement-date {
    word-break: break-all;
    text-align: center;
}

#promote-achievement .table .colum.state {
    font-weight: bold;
}


/*-------------------我的推廣 > 線下會員-------------------*/
#promote-offline-member {
    .area-content {
        .list-content {
            display: flex;
            flex-direction: column;
            gap: 1.2rem;
            .area-title {
                display: flex;
                flex-direction: row;
                align-items: center;
                justify-content: space-between;
                .text {
                    font-size: 1.4rem;
                    font-weight: bold;
                }
                .list-remark {
                    display: flex;
                    flex-direction: column;
                    align-items: flex-end;
                    font-size: .9rem;
                }
            }
            .list-total {
                display: flex;
                flex-direction: row;
                align-items: center;
                padding: .6rem 1rem;
                gap: 1rem;
                border-radius: 4px;
                .hr-vertical {
                    height: 28px;
                }
                .item {
                    display: flex;
                    flex-direction: row;
                    align-items: center;
                    justify-content: space-between;
                    width: 100%;
                }
                .count {
                    font-size: 1.1rem;
                    font-weight: bold;
                }
            }
            .offline-content {
                display: grid;
                grid-template-columns: repeat(2, 1fr);
                gap: 0.5rem;
                .list-total {
                    display: flex;
                    flex-direction: row;
                    align-items: center;
                    padding: .6rem 1rem;
                    gap: 1.2rem;
                    border-radius: 4px;
                    .hr-vertical {
                        height: 28px;
                    }
                    .item {
                        display: flex;
                        flex-direction: row;
                        align-items: center;
                        gap: 1rem;
                        width: 100%;
                    }
                    .count {
                        font-size: 0.9rem;
                        font-weight: bold;
                    }
                    .total-people-under {
                        .title {
                            min-width: 70px;
                        }
                        .count {
                            width: 155px;
                        }
                    }
                }
                .area-promote-method {
                    display: flex;
                    flex-direction: column;
                    width: 100%;
                    gap: 1rem;
                    .content {
                        display: flex;
                        flex-direction: row;
                        align-items: flex-start;
                        justify-content: flex-start;
                        gap: .4rem;
                    }
                    .list-method {
                        display: flex;
                        flex-direction: column;
                        gap: .4rem;
                        width: 100%;
                        .item {
                            display: flex;
                            flex-direction: row;
                            align-items: center;
                            justify-content: space-between;
                            padding: 1rem;
                            border-radius: 4px;
                            height: 70px;
                            .title {
                                display: flex;
                                flex-direction: row;
                                align-items: center;
                                gap: .6rem;
                                .icon {
                                    width: 24px;
                                    height: 24px;
                                }
                            
                                .text {
                                    font-weight: bold;
                                }
                            }
                            .content {
                                display: flex;
                                flex-direction: row;
                                gap: .4rem;
                                align-items: center;
                                justify-content: flex-end;
                                .text {
                                    font-size: .9rem;
                                    text-overflow: ellipsis;
                                    white-space: nowrap;
                                }
                            }
                        }
                        .item.qrcode {
                            .list-btn-function {
                                display: flex;
                                flex-direction: row;
                                align-items: center;
                                width: fit-content;
                                gap: .4rem;
                                .btn-option {
                                    gap: .6rem;
                                    height: 2.8rem;
                                    min-width: 100px;
                                    .btn-text {
                                        font-weight: bold;
                                    }
                                }
                            }
                        }
                    }
                    .content {
                        .area-qrcode {
                            display: flex;
                            justify-content: center;
                            align-items: center;
                            padding: .6rem;
                            border-radius: 4px;
                            width: 24%;
                            .img-qrcode {
                                background-position: center;
                                background-size: cover;
                            }
                        }
                    }
                }
            }
        }
    }
}

@media (max-width: 1500px) {
    #allagent-offline-member .area-content .offline-content {
        display: flex;
        flex-direction: column;
    }
}

/*-------------------我的推廣 > 團隊查詢 > 團隊總覽-------------------*/
#promote-team-overview .area-content .list-total {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: .6rem 1rem;
    gap: 1rem;
    border-radius: 4px;
}

#promote-team-overview .area-content .list-total .hr-vertical {
    height: 28px;
}

#promote-team-overview .area-content .list-total .item {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: 100%;

    .count {
        font-size: 1.1rem;
        font-weight: bold;
    }
}

#promote-team-overview .area-content .list-content {
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
}

/* 篩選時間 */
#promote-team-report .area-content .content-title .area-function,
#promote-team-overview .area-content .list-content .area-function {
    display: flex;
    flex-direction: column;
    gap: .4rem;
}

#promote-team-report .content-title .area-function .list-filter,
#promote-team-overview .list-content .area-function .list-filter {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: .6rem;
}

#promote-team-report .area-function .list-filter .input-time,
#promote-team-overview .area-function .list-filter .input-time {
    width: 240px;

    .field-title {
        width: 40%;
    }

    .input-date {
        width: 60%;
    }
}

/* 資料顯示 */
#promote-team-overview .area-content .list-content .list-data {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: .2rem;
}

#promote-team-overview .list-content .list-data .item {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: .8rem 1rem;
    border-radius: 4px;
    font-size: .9rem;

    .field-content {
        font-weight: bold;
    }
}

#promote-team-report .area-content .remark,
#promote-team-overview .area-content .remark {
    text-align: left;
    line-height: 22px;
}

@media (max-width: 1500px) {
    #promote-team-overview .area-content .list-content .list-data {
        grid-template-columns: repeat(3, 1fr);
    }
}

/*-------------------我的推廣 > 團隊查詢 > 團隊報表-------------------*/
#promote-team-report .area-content .list-my-total {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: .8rem;
    border-radius: 4px;
}

#promote-team-report .area-content .list-my-total .item {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: .2rem;
    width: 100%;
    font-weight: bold;
    text-align: center;

    .field-title {
        font-size: .9rem;
    }

    .field-content {
        font-size: 1.1rem;
    }
}

@media (max-width: 1500px) {

    #promote-team-report .area-content .content-title {
        flex-direction: column;

        .remark,
        .area-function {
            width: 100%;
        }
    }

    #promote-team-report .area-content .list-my-total .item {
        gap: .2rem;

        .field-title,
        .field-content {
            font-size: .9rem;
        }
    }

}


/*-------------------我的推廣 > 成就獎勵-------------------*/
#promote-achievement, #promote-team-report, #promote-achievement-rewards {
    .table {
        gap: 0;
        border-radius: 8px;
        .row {
            height: 46px;
            border-radius: 0;
            .colum {
                &.no {
                    width: 40%;
                }
            }
        }
    }
}


/*---------------------------全民代理------------------------------*/
.area-menu.allagent .btn-back-my {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: .6rem;
    font-weight: bold;
    padding: .6rem .8rem;
    cursor: pointer;
}

.area-menu.allagent .list-btn-page .list-team,
.area-menu.allagent .list-btn-page {
    display: flex;
    flex-direction: column;
}

.area-menu.allagent .list-team .btn-menu.team-report,
.area-menu.allagent .list-team .btn-menu.team-overview {

    margin-left: 1.8rem;
    gap: .4rem;
    padding: .4rem .8rem;

    .icon {
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: .4rem;
        width: .4rem;
        height: .4rem;
    }
}

/* 個人中心 */
#allagent-personal-center {
    .area-title {
        font-weight: bold;
        font-size: 1.4rem;
    }
    .area-content {
        .list-total {
            display: flex;
            flex-direction: row;
            align-items: center;
            padding: .6rem 1rem;
            gap: 1rem;
            border-radius: 4px;
            .hr-vertical {
                height: 28px;
            }
            .item {
                display: flex;
                flex-direction: row;
                align-items: center;
                justify-content: space-between;
                width: 100%;
            }
            .count {
                font-size: 1.1rem;
                font-weight: bold;
            }
        }
        .area-promote-method {
            display: flex;
            flex-direction: column;
            width: 100%;
            gap: 1rem;
            .content {
                display: flex;
                flex-direction: row;
                align-items: flex-start;
                justify-content: flex-start;
                gap: .4rem;
            }
            .list-method {
                display: flex;
                flex-direction: column;
                gap: .4rem;
                width: 100%;
                .item {
                    display: flex;
                    flex-direction: row;
                    align-items: center;
                    justify-content: space-between;
                    padding: 1rem;
                    border-radius: 4px;
                    height: 70px;
                    .title {
                        display: flex;
                        flex-direction: row;
                        align-items: center;
                        gap: .6rem;
                    
                        .icon {
                            width: 24px;
                            height: 24px;
                        }
                    
                        .text {
                            font-weight: bold;
                        }
                    }
                    .content {
                        display: flex;
                        flex-direction: row;
                        gap: .4rem;
                        align-items: center;
                        justify-content: flex-end;
                        .text {
                            font-size: .9rem;
                            text-overflow: ellipsis;
                            white-space: nowrap;
                        }
                    }
                }
                .item.qrcode {
                    .list-btn-function {
                        display: flex;
                        flex-direction: row;
                        align-items: center;
                        width: fit-content;
                        gap: .4rem;
                        .btn-option {
                            gap: .6rem;
                            height: 2.8rem;
                            min-width: 100px;
                            .btn-text {
                                font-weight: bold;
                            }
                        }
                    }
                }
            }
            .content {
                .area-qrcode {
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    padding: .6rem;
                    border-radius: 4px;
                    width: 24%;
                    .img-qrcode {
                        background-position: center;
                        background-size: cover;
                    }
                }
            }
        }
    }
}
@media (max-width: 1500px) {
    #allagent-personal-center .area-content .area-receive-award .btn-receive {
        width: 12%;
    }

    #allagent-personal-center .area-promote-method .list-method .item .title {
        width: 32%;
    }

    #allagent-personal-center .list-method .item .content .text {
        width: 320px;
        white-space: nowrap;
        text-overflow: ellipsis;
        text-align: right;
        overflow: hidden;
    }

    #allagent-personal-center .area-promote-method .content .area-qrcode {
        width: 32%;
    }
}

/* 代理進度 */
#allagent-progress .area-content .list-content {
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
    .list-total {
        display: flex;
        flex-direction: row;
        align-items: center;
        padding: .6rem 1rem;
        gap: 1rem;
        border-radius: 4px;
        .hr-vertical {
            height: 28px;
        }
        .item {
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: space-between;
            width: 100%;
        }
        .count {
            font-size: 1.1rem;
            font-weight: bold;
        }
    }
}
#allagent-progress .area-content .list-content .area-title {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    .text {
        font-size: 1.4rem;
        font-weight: bold;
    }
    .last-updata {
        font-size: 0.9rem;
    }
}

#allagent-progress .area-content .list-content .area-function {
    display: flex;
    flex-direction: column;
    gap: .4rem;
}


#allagent-progress .list-content .area-function .dropdown  {
    width: 345px;
    padding: 0 .6rem;
    .option {
        padding-left: .6rem;
    }
}

#allagent-progress .list-content .area-function .list-filter {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: .6rem;
    .list-btn-function {
        .btn-text {
            font-weight: bold;
        }
    }
}

#allagent-progress .area-function .list-filter .input-time {
    width: 240px;

    .field-title {
        width: 40%;
    }

    .input-date {
        width: 60%;
    }
}

#allagent-progress .area-content .remark {
    text-align: left;
    line-height: 22px;
}

/* 線下會員 */
#allagent-offline-member {
    .area-content {
        .list-content {
            display: flex;
            flex-direction: column;
            gap: 1.2rem;
            .area-title {
                display: flex;
                flex-direction: row;
                align-items: center;
                justify-content: space-between;
                .text {
                    font-size: 1.4rem;
                    font-weight: bold;
                }
                .list-remark {
                    display: flex;
                    flex-direction: column;
                    align-items: flex-end;
                    font-size: .9rem;
                }
            }
            .list-total {
                display: flex;
                flex-direction: row;
                align-items: center;
                padding: .6rem 1rem;
                gap: 1rem;
                border-radius: 4px;
                .hr-vertical {
                    height: 28px;
                }
                .item {
                    display: flex;
                    flex-direction: row;
                    align-items: center;
                    justify-content: space-between;
                    width: 100%;
                }
                .count {
                    font-size: 1.1rem;
                    font-weight: bold;
                }
            }
            .offline-content {
                display: grid;
                grid-template-columns: repeat(2, 1fr);
                gap: 0.5rem;
                .list-total {
                    display: flex;
                    flex-direction: row;
                    align-items: center;
                    padding: .6rem 1rem;
                    gap: 1.2rem;
                    border-radius: 4px;
                    .hr-vertical {
                        height: 28px;
                    }
                    .item {
                        display: flex;
                        flex-direction: row;
                        align-items: center;
                        gap: 1rem;
                        width: 100%;
                    }
                    .count {
                        font-size: 0.9rem;
                        font-weight: bold;
                    }
                    .total-people-under {
                        .title {
                            min-width: 70px;
                        }
                        .count {
                            width: 155px;
                        }
                    }
                }
                .area-promote-method {
                    display: flex;
                    flex-direction: column;
                    width: 100%;
                    gap: 1rem;
                    .content {
                        display: flex;
                        flex-direction: row;
                        align-items: flex-start;
                        justify-content: flex-start;
                        gap: .4rem;
                    }
                    .list-method {
                        display: flex;
                        flex-direction: column;
                        gap: .4rem;
                        width: 100%;
                        .item {
                            display: flex;
                            flex-direction: row;
                            align-items: center;
                            justify-content: space-between;
                            padding: 1rem;
                            border-radius: 4px;
                            height: 70px;
                            .title {
                                display: flex;
                                flex-direction: row;
                                align-items: center;
                                gap: .6rem;
                                .icon {
                                    width: 24px;
                                    height: 24px;
                                }
                            
                                .text {
                                    font-weight: bold;
                                }
                            }
                            .content {
                                display: flex;
                                flex-direction: row;
                                gap: .4rem;
                                align-items: center;
                                justify-content: flex-end;
                                .text {
                                    font-size: .9rem;
                                    text-overflow: ellipsis;
                                    white-space: nowrap;
                                }
                            }
                        }
                        .item.qrcode {
                            .list-btn-function {
                                display: flex;
                                flex-direction: row;
                                align-items: center;
                                width: fit-content;
                                gap: .4rem;
                                .btn-option {
                                    gap: .6rem;
                                    height: 2.8rem;
                                    min-width: 100px;
                                    .btn-text {
                                        font-weight: bold;
                                    }
                                }
                            }
                        }
                    }
                    .content {
                        .area-qrcode {
                            display: flex;
                            justify-content: center;
                            align-items: center;
                            padding: .6rem;
                            border-radius: 4px;
                            width: 24%;
                            .img-qrcode {
                                background-position: center;
                                background-size: cover;
                            }
                        }
                    }
                }
            }
        }
    }
}

@media (max-width: 1500px) {
    #allagent-offline-member .area-content .offline-content {
        display: flex;
        flex-direction: column;
    }
}

/* 等級制度 */
#allagent-level-system {
    .area-content {
        gap: 2.4rem;
        .area-level-info {
            display: flex;
            flex-direction: column;
            gap: 1rem;
            .area-list {
                .list {
                    display: flex;
                    flex-direction: row;
                    justify-content: flex-start;
                    align-items: flex-start;
                    gap: .6rem;
                    overflow-y: auto;
                    width: 100%;
                    left: 0;
                    top: 0;
                    padding-bottom: .4rem;
                    .item-level {
                        display: flex;
                        flex-direction: column;
                        justify-content: center;
                        gap: .6rem;
                        .level-card {
                            position: relative;
                            width: 330px;
                            min-width: 330px;
                            height: 140px;
                            border-radius: 8px;
                            display: flex;
                            flex-direction: column;
                            align-items: flex-end;
                            overflow: hidden;
                            .level-text {
                                display: flex;
                                flex-direction: row;
                                align-items: center;
                                justify-content: flex-start;
                                font-size: 1.6rem;
                                font-weight: bold;
                                gap: 1rem;
                                width: 100%;
                                height: 100%;
                                padding: 0 1.6rem;
                                line-height: 36px;
                                word-wrap: break-word;
                                .level-icon {
                                    min-width: 84px;
                                    height: 68px;
                                }
                            }
                            .tag {
                                position: absolute;
                                text-align: center;
                                font-weight: bold;
                                padding: .4rem .5rem .4rem .7rem;
                                border-radius: 0 0 0 18px;
                                font-size: .9rem;
                            }
                        }
                        .list-info {
                            display: flex;
                            flex-direction: column;
                            justify-content: center;
                            gap: 1.6rem;
                            padding: 2rem 1.2rem;
                            border-radius: 8px;
                            .item {
                                display: flex;
                                flex-direction: column;
                                justify-content: center;
                                align-items: center;
                                gap: 1rem;
                                .item-title {
                                    font-weight: bold;
                                }
                                .list-data {
                                    display: flex;
                                    flex-direction: column;
                                    gap: 1rem;
                                    width: 100%;
                                    .field {
                                        display: flex;
                                        flex-direction: row;
                                        justify-content: space-between;
                                        align-items: center;
                                        font-size: .8rem;
                                        &.deposit {
                                            .field-title {
                                                max-width: 154px;
                                            }
                                        }
                                    }
                                }
                            }
                        }
                    }
                    &::-webkit-scrollbar {
                        height: 6px;
                        border-radius: 5rem;
                    }
                
                    &::-webkit-scrollbar-thumb {
                        border-radius: 5rem;
                    }
                }
            }
        }
    }
    .area-level-cashback {
        display: flex;
        flex-direction: column;
        gap: .8rem;
        .area-title {
            font-size: 1.2rem;
            font-weight: bold;
        }
        .list-table {
            width: 100%;
            display: flex;
            flex-direction: row;
            gap: 0;
            border-radius: 8px;
            .table-colum-title {
                width: 150px;
                font-weight: bold;
                .row {
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    padding: .4rem;
                    height: 40px;
                    font-size: .9rem;
                    font-weight: bold;
                    text-align: center;
                    &.ratio {
                        min-height: 60px;
                    }
                }
            }
            .table-content {
                position: relative;
                width: 100%;
                .content {
                    overflow-x: auto;
                    width: 100%;
                    position: absolute;
                    left: 0;
                    top: 0;
                    padding-bottom: .4rem;
                    .row {
                        display: flex;
                        flex-direction: row;
                        &.title {
                            .colum {
                                min-width: 320px;
                            }
                        }
                        .colum {
                            width: 100%;
                            min-width: 160px;
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            padding: .4rem;
                            height: 40px;
                            font-size: .9rem;
                        }
                        &.multiplier {
                            .colum {
                                min-width: 160px;
                            }
                        }
                        &.ratio {
                            .colum {
                                height: 60px;
                            }
                        }
                    }
                    &::-webkit-scrollbar {
                        height: 6px;
                        border-radius: 5rem;
                    }
                
                    &::-webkit-scrollbar-thumb {
                        border-radius: 5rem;
                    }
                }
            }
        }
    }
}


/*---------------------------消息相關------------------------------*/
#news-notify .area-content .list-content,
#news-mailbox .area-content .list-content {
    gap: 1rem;
    height: 100%;
}

/* 清單 */
#news-notify, #news-mailbox {
    .list-news {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        gap: .2rem;
        overflow-y: auto;
        max-width: 240px;
        min-width: 240px;
        max-height: 750px;
        padding-right: .4rem;
        .list-search {
            display: flex;
            flex-direction: row;
            border: 1px solid transparent;
        }
        .item {
            display: flex;
            flex-direction: row;
            align-items: center;
            gap: .4rem;
            border-radius: 8px;
            width: 100%;
            height: 70px;
            padding: .6rem;
            cursor: pointer;
            .icon {
                min-width: 20px;
                min-height: 20px;
            }
            .content {
                display: flex;
                flex-direction: column;
                width: 100%;
                max-width: 180px;
            }
            .text {
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
            }
            .date {
                font-size: .8rem;
                min-width: 72px;
            }
        }
        &:-webkit-scrollbar {
            width: 6px;
            border-radius: 5rem;
        }
        &:-webkit-scrollbar-thumb {
            border-radius: 5rem;
        }
    }
}

/* 內文 */
#news-notify, #news-mailbox {
    .area-content {
        .list-content {
            .news-content {
                display: flex;
                flex-direction: column;
                justify-content: flex-start;
                align-items: flex-start;
                gap: 1.4rem;
                width: 100%;
                height: 100%;
                word-break: break-word;
                max-height: 750px;
                padding-right: .4rem;
                .function {
                    display: flex;
                    flex-direction: row;
                    justify-content: space-between;
                    width: 100%;
                    .page-text {
                        display: flex;
                        flex-direction: row;
                    }
                    .function-btn {
                        display: flex;
                        flex-direction: row;
                        .btn-delete, .btn-read {
                            cursor: pointer;
                        }
                    }
                }
                .title {
                    display: flex;
                    flex-direction: column;
                    align-items: flex-start;
                    justify-content: flex-start;
                    gap: .4rem;
                    .text {
                        font-size: 1.4rem;
                        font-weight: bold;
                    }
                    .date {
                        font-size: .9rem;
                        font-style: italic;
                    }
                }
                .content-text {
                    line-height: 26px;
                    overflow-y: auto;
                    padding-right: .4rem;
                    &::-webkit-scrollbar {
                        width: 6px;
                        border-radius: 5rem;
                    }
                
                    &::-webkit-scrollbar-thumb {
                        border-radius: 5rem;
                    }
                }
            }
        }
    }
}

@media (max-width: 1280px) {
    #news-notify .area-content .list-content,
    #news-mailbox .area-content .list-content {
        gap: 1rem;
    }
}



/*--------------------------------404--------------------------------*/
body:has(#support-404) header, 
body:has(#support-404) footer, 
body:has(#support-404) .float-btn, 
body:has(#support-404) .btn-red-envelope, 
body:has(#support-404) .discount-reminder-popup, 
body:has(#support-404) .gotop {
    display: none;
}
body:has(#support-404) {
    min-width: 1080px;
}
#support-404 {
    display: flex;
    justify-content: center;
    width: 100%;
    height: 100vh;
    background: url(/common/desktop/images/maintain/404.webp) no-repeat top center;
    font-family: Arial, Helvetica, sans-serif;
    .content {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin: 150px 0 0 15%;
        width: 522px;
        .title {
            font-size: 17.5rem;
            font-weight: bold;
            -webkit-background-clip: text ;
            -webkit-text-fill-color: transparent;
            background-image: linear-gradient(#0029A2, #000F3C);
        }
        .sub-title {
            font-size: 2.8rem;
            font-weight: bold;
            color: #4871AB;
            letter-spacing: .4rem;
        }
        .text {
            font-size: 2rem;
            font-weight: bold;
            text-align: left;
            color: #1C2C43;
            padding: 1.25rem 0 4.375rem 0;
        }
        .btn {
            display: flex;
            align-items: center;
            justify-content: center;
            min-width: 164px;
            height: 52px;
            border-radius: 26px;
            background: linear-gradient(#4B6AFF, #8197FF 32%, #2A4FFF);
            box-shadow: inset 0 -4px 0 #2B45C9, 0 4px 9px rgba(0, 0, 0, .2);
            font-size: 1.5rem;
            font-weight: bold;
            color: #FFF;
            cursor: pointer;
            &:hover {
                filter: brightness(1.05);
            }
        }
    }
}

/*-------------------------------IP限制-------------------------------*/
body:has(#support-ipban) header, 
body:has(#support-ipban) footer, 
body:has(#support-ipban) .float-btn, 
body:has(#support-ipban) .btn-red-envelope, 
body:has(#support-ipban) .discount-reminder-popup, 
body:has(#support-ipban) .gotop {
    display: none;
}
body:has(#support-ipban) {
    min-width: 1080px;
}
#support-ipban {
    display: flex;
    justify-content: center;
    width: 100%;
    height: 100vh;
    background: url(/common/desktop/images/maintain/ipban.webp) no-repeat top center;
    font-family: Arial, Helvetica, sans-serif;
    .content {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin: 235px 0 0 15%;
        width: 552px;
        .title {
            font-size: 11.25rem;
            font-weight: bold;
            -webkit-background-clip: text ;
            -webkit-text-fill-color: transparent;
            background-image: linear-gradient(#0029A2, #000F3C);
        }
        .sub-title {
            font-size: 2.8rem;
            font-weight: bold;
            color: #4871AB;
            margin-top: -1rem;
            letter-spacing: .6rem;
        }
        .text {
            font-size: 2rem;
            font-weight: bold;
            text-align: left;
            color: #1C2C43;
            padding: 2.5rem 2rem 1rem 0;
        }
    }
}

/*-------------------------------維護中-------------------------------*/
body:has(#support-maintain) header, 
body:has(#support-maintain) footer, 
body:has(#support-maintain) .float-btn, 
body:has(#support-maintain) .btn-red-envelope, 
body:has(#support-maintain) .discount-reminder-popup, 
body:has(#support-maintain) .gotop {
    display: none;
}
body:has(#support-maintain) {
    min-width: 1080px;
}
#support-maintain {
    display: flex;
    justify-content: center;
    width: 100%;
    height: 100vh;
    background: url(/common/desktop/images/maintain/maintain.webp) no-repeat top center;
    font-family: Arial, Helvetica, sans-serif;
    .content {
        display: flex;
        flex-direction: column;
        margin: 150px 0 0 25%;
        width: 770px;
        .title {
            font-size: 11.25rem;
            font-weight: bold;
            -webkit-background-clip: text ;
            -webkit-text-fill-color: transparent;
            background-image: linear-gradient(#0029A2, #000F3C);
        }
        .sub-title {
            font-size: 2.8rem;
            font-weight: bold;
            color: #4871AB;
            margin-top: -1rem;
            letter-spacing: 1.2rem;
        }
        .text {
            font-size: 2rem;
            font-weight: bold;
            text-align: left;
            color: #1C2C43;
            padding: 2.5rem 2rem 1rem 0;
        }
        .time {
            font-size: 2rem;
            font-weight: bold;
            text-align: left;
            .time-title {
                color: #4871AB;
            }
            .time-title::after {
                content: ' :';
            }
            .time-interval {
                color: #FF0000;
            }
        }
    }
}

/*-------------------------------Error-------------------------------*/
body:has(#support-error) header, 
body:has(#support-error) footer, 
body:has(#support-error) .float-btn, 
body:has(#support-error) .btn-red-envelope, 
body:has(#support-error) .discount-reminder-popup, 
body:has(#support-error) .gotop {
    display: none;
}
body:has(#support-error) {
    min-width: 1080px;
}
#support-error {
    display: flex;
    justify-content: center;
    width: 100%;
    height: 100vh;
    background: url(/common/desktop/images/maintain/error.webp) no-repeat top center;
    font-family: Arial, Helvetica, sans-serif;
    .content {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin: 150px 0 0 20%;
        width: 733px;
        .title {
            font-size: 17.5rem;
            font-weight: bold;
            -webkit-background-clip: text ;
            -webkit-text-fill-color: transparent;
            background-image: linear-gradient(#0029A2, #000F3C);
        }
        .sub-title {
            font-size: 2.8rem;
            font-weight: bold;
            color: #4871AB;
            margin-top: -1rem;
        }
        .text {
            font-size: 2rem;
            font-weight: bold;
            text-align: left;
            color: #1C2C43;
            margin: 2.5rem 0;
            height: 200px;
            overflow-x: auto;
            &::-webkit-scrollbar {
                width: 8px;
                border-radius: 8px;
                background: rgba(0, 0, 0, .2);
            }
            &::-webkit-scrollbar-thumb {
                border-radius: 8px;
                background: rgba(0, 0, 0, .4);
            }
        }
        .btn {
            display: flex;
            align-items: center;
            justify-content: center;
            min-width: 164px;
            height: 52px;
            border-radius: 26px;
            background: linear-gradient(#4B6AFF, #8197FF 32%, #2A4FFF);
            box-shadow: inset 0 -4px 0 #2B45C9, 0 4px 9px rgba(0, 0, 0, .2);
            font-size: 1.5rem;
            font-weight: bold;
            color: #FFF;
            cursor: pointer;
            &:hover {
                filter: brightness(1.05);
            }
        }
    }
}

/*------------------- 常見問題 / 免責聲明 -------------------*/
#support-qa, #support-disclaimer {
    .page-content-list .area-content {
        gap: 2rem;
    }

    .area-content .item-content {
        display: flex;
        flex-direction: column;
        width: 100%;
        gap: 1rem;
    }

    .area-content .item-content .title {
        font-size: 1.4rem;
        font-weight: bold;
    }

    .area-content .item-content .list-qa {
        display: flex;
        flex-direction: column;
        width: 100%;
        gap: .6rem;
    }

    .item-content .list-qa .item-qa {
        display: flex;
        flex-direction: column;
        width: 100%;
        gap: 1rem;
        padding: 1rem 1.2rem;
        border-radius: 8px;
        cursor: pointer;
    }

    .item-content .list-qa .item-qa .qa-title {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }

    .list-qa .item-qa .qa-title .text {
        font-size: 1rem;
    }

    .list-qa .item-qa .content {
        font-size: .9rem;
        word-break: break-all;
        word-wrap: break-word;
        white-space: pre-wrap;
        line-height: 2rem;
    }

    /* 同步前端pre標籤設定 */
    .list-qa .item-qa .qa-content-sub pre {
        word-break: break-all;
        word-wrap: break-word;
        white-space: pre-wrap;
        line-height: 1rem;
    }
}


/*-------------------------- 紅包兌換碼 ------------------------*/
#red-envelope-code .popup {
    max-width: 325px;
}

/* 兌換成功彈窗 */
#red-envelope-code-popup-success {

    .popup {
        width: 320px;
        max-width: 320px;
        min-width: 320px;
        height: 500px;
        position: relative;
        background: linear-gradient(180deg, #EC863C 0%, #F4C052 48.14%, #FAF6DD 100%);
        border-radius: 24px;
        box-shadow: 0px 0px 12px 0px rgba(255, 255, 255, 0.32) inset, 0px 8px 32px 0px rgba(0, 0, 0, 0.12);
        padding: 0;
        display: flex;
        align-items: center;
        overflow: hidden;

        .btn-close {
            color: #FFFFFF;
            font-size: 1.4rem;
            position: absolute;
            top: 12px;
            right: 12px;
            z-index: 900;
            cursor: pointer;
        }

        .popup-name {
            color: #FFFFFF;
            text-shadow: 0px 2px 12px #CB1800;
            font-size: 1.4rem;
            font-weight: bold;
            text-align: center;
            position: absolute;
            top: 1.4rem;
            z-index: 900;
            width: 240px;
        }

        .content-img {
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;

            /* 背景-圓形裝飾 */
            .list-bg-round {
                display: flex;
                align-items: center;
                justify-content: center;
                position: absolute;

                .round-l {
                    width: 420px;
                    height: 420px;
                    border-radius: 50rem;
                    background: linear-gradient(0deg, rgba(255, 237, 123, 0.00) 0%, #FFC265 32%, rgba(255, 184, 79, 0.12) 100%);
                    animation-name: popup-open-bg-round-l;
                    animation-duration: 2s;
                    animation-fill-mode: forwards;
                }

                .round-m {
                    width: 340px;
                    height: 340px;
                    border-radius: 50rem;
                    background: linear-gradient(215deg, rgba(255, 168, 67, 0.80) 15%, rgba(255, 237, 123, 0.12) 90%);
                    position: absolute;
                    animation-name: popup-open-bg-round-m;
                    animation-duration: 2s;
                    animation-fill-mode: forwards;
                }

                .round-s {
                    width: 260px;
                    height: 260px;
                    border-radius: 50rem;
                    background: linear-gradient(146deg, #FFB84F 14.89%, #FFD466 52.41%, rgba(255, 237, 123, 0.12) 86.35%);
                    box-shadow: -2px -2px 32px 0px rgba(215, 168, 0, 0.12) inset, 0px 4px 32px 0px rgba(233, 98, 0, 0.32) inset;
                    position: absolute;
                    animation-name: popup-open-bg-round-s;
                    animation-duration: 2s;
                    animation-fill-mode: forwards;
                }
            }

            /* 背景-放射光芒裝飾 */
            .img-bg-light {
                position: absolute;
                display: block;
                width: 480px;
                height: 480px;
                background: url(/images/common/red-envelope/popup/light-bg.webp) no-repeat center;
                background-size: cover;
                animation-name: popup-open-bg-light;
                animation-duration: 3s;
                animation-iteration-count: infinite;
            }

            /* 紅包本體 */
            .envelope-open {
                width: 0px;
                height: 0px;
                opacity: 0;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: flex-end;
                padding-bottom: 3.2rem;
                gap: .4rem;
                background: url(/images/common/red-envelope/popup/result-bg.webp) no-repeat center;
                background-size: cover;
                z-index: 900;
                animation: popup-envelope-halo 3s ease-in-out infinite,
                    popup-open-envelope-open 1s ease-in-out forwards;
                animation-delay: 0.8s;
                position: relative;

                .text-award {
                    max-width: 170px;
                    height: 64px;
                    opacity: 0;
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    justify-content: center;
                    gap: .2rem;
                    transform: rotate(-12deg);
                    position: absolute;
                    top: 70px;
                    width: 100%;
                    animation: popup-open-show-info 2s ease-in-out forwards;
                    animation-delay: 1.2s;

                    .text {
                        font-size: .9rem;
                        color: #99350E;
                        text-align: center;
                        line-height: 20px;
                    }

                    .success-amount {
                        font-size: 1.3rem;
                        font-weight: bold;
                        color: #F05F54;
                    }
                }

                .remark {
                    max-width: 200px;
                    height: 88px;
                    opacity: 0;
                    color: #FFF9E0;
                    padding-left: .6rem;
                    padding-bottom: 4rem;
                    font-size: .8rem;
                    animation: popup-open-show-info 2s ease-in-out forwards;
                    animation-delay: 1.2s;

                    display: flex;
                    flex-direction: column;
                    justify-content: center;

                    text-wrap: auto;
                    margin-bottom: 0;
                }

                .btn-discount-detail {
                    opacity: 0;
                    color: #FFFFFF;
                    display: flex;
                    flex-direction: row;
                    align-items: center;
                    gap: .2rem;
                    padding: .2rem .6rem .3rem .6rem;
                    margin-left: .6rem;
                    font-size: .8rem;
                    border-radius: 50rem;
                    background: #DC3426;
                    box-shadow: 2px 3px 4px 0px rgba(0, 0, 0, 0.12) inset;
                    animation: popup-open-show-info 2s ease-in-out forwards;
                    animation-delay: 1.2s;

                    .fa-angles-right {
                        font-size: .6rem;
                    }
                }
            }
        }

        .btn-close-popup {
            opacity: 0;
            position: absolute;
            display: block;
            color: #99350E;
            border: 2px solid rgba(153, 53, 14, 0.32);
            border-radius: 50rem;
            padding: .2rem .8rem;
            z-index: 900;
            bottom: 1.2rem;
            animation: popup-open-show-info 2s ease-in-out forwards;
            animation-delay: 1.2s;
            cursor: pointer;
        }
    }
}

/* 浮動按鈕 */
.float-btn-item {
    .float-btn-icon {
        .online-cs & {
            background-image: url(/common/desktop/images/float-icon/float-icon-online-cs.webp);
        }
        .line & {
            background-image: url(/common/desktop/images/float-icon/float-icon-line.webp);
        }
        .telegram & {
            background-image: url(/common/desktop/images/float-icon/float-icon-telegram.webp);
        }
        .teams & {
            background-image: url(/common/desktop/images/float-icon/float-icon-teams.webp);
        }
        .whatsapp & {
            background-image: url(/common/desktop/images/float-icon/float-icon-whatsapp.webp);
        }
        .messenger & {
            background-image: url(/common/desktop/images/float-icon/float-icon-messenger.webp);
        }
        .instagram & {
            background-image: url(/common/desktop/images/float-icon/float-icon-instagram.webp);
        }
        .zalo & {
            background-image: url(/common/desktop/images/float-icon/float-icon-zalo.webp);
        }
        .meiqia & {
            background-image: url(/common/desktop/images/float-icon/float-icon-meiqia.webp);
        }
    }
    .float-btn-app {
        .float-app-icon {
            background-size: cover;
            .online-cs & {
                background-image: url(/common/desktop/images/float-icon/float-icon-online-cs.webp);
            }
            .line & {
                background-image: url(/common/desktop/images/float-icon/float-icon-line.webp);
            }
            .telegram & {
                background-image: url(/common/desktop/images/float-icon/float-icon-telegram.webp);
            }
            .teams & {
                background-image: url(/common/desktop/images/float-icon/float-icon-teams.webp);
            }
            .whatsapp & {
                background-image: url(/common/desktop/images/float-icon/float-icon-whatsapp.webp);
            }
            .messenger & {
                background-image: url(/common/desktop/images/float-icon/float-icon-messenger.webp);
            }
            .instagram & {
                background-image: url(/common/desktop/images/float-icon/float-icon-instagram.webp);
            }
            .zalo & {
                background-image: url(/common/desktop/images/float-icon/float-icon-zalo.webp);
            }
            .meiqia & {
                background-image: url(/common/desktop/images/float-icon/float-icon-meiqia.webp);
            }
        }
    }
    &.chatroom, &.service {
        &:hover {
            .float-btn-text {
                &.service, &.chatroom {
                    display: flex;
                }
            }
        }
    }
}


/*----------- RoadMap -----------*/
#roadmap {
    display: flex;
    flex-direction: column;
    .roadmap-top {
        display: flex;
        flex-direction: column;
        gap: 1rem;
        padding: 1rem;
        border-radius: 20px;
        .account-info {
           display: flex;
           flex-direction: row;
           gap: 1rem;
        }
        .acc-user-info {
            display: flex;
            flex-direction: row; 
            gap: 1rem;
            .user-photo {
                width: 95px;
                height: 95px;
            }
            .user-content {
                display: flex;
                flex-direction: column;
                justify-content: flex-end;
            }
        }
        
        .function-link {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            gap: .4rem;
            .function-link-item {
                position: relative;
                display: flex;
                flex-direction: row;
                align-items: center;
                justify-content: space-between;
                width: 100%;
                padding: .4rem;
                cursor: pointer;
                .link-text {
                    position: absolute;
                    left: 50%;
                    transform: translateX(-50%);
                }
            }
        }
    }
    .roadmap-content {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        .roadmap-content-left, .roadmap-content-right {
            display: flex;
            flex-direction: column;
            min-width: calc(50% - .25rem);
            gap: .5rem;
        }
        .roadmap-link-item {
            display: flex;
            flex-direction: column;
            padding: 1.2rem 1rem;
            .link-content {
                display: flex;
                flex-direction: row;
                .link-list {
                    display: flex;
                    flex-direction: column;
                    .link-item {
                        display: flex;
                        flex-direction: row;
                        align-items: center;
                        justify-content: space-between;
                        padding: .4rem 1rem .4rem 1.8rem;
                        font-size: .9rem;
                        cursor: pointer;
                        .verify-text {
                            display: none;
                            margin-left: auto;
                            padding: 0 1rem 0 0;
                            font-weight: bold;
                        }
                        .link-item-text {
                            display: flex;
                            justify-self: flex-start;
                        }
                        .link-item-arrow {
                            margin-right: 0;
                        }
                    }
                }
            }
        }
    }
}


/*----------- 優惠提醒彈窗 -----------*/
.discount-reminder-popup {
    display: flex;
    flex-direction: column;
    gap: .2rem;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 360px;
    height: 110px;
    border-radius: 16px;
    overflow: hidden;
    padding: .8rem 1rem;
    z-index: 9999;
    backdrop-filter: blur(2px);
    .close {
        position: absolute;
        top: 10px;
        right: 20px;
        font-size: .9rem;
        font-weight: bold;
        color: #969696;
        cursor: pointer;
        transition: all .3s;
        &:hover {
            color: #AAA;
        }
    }
    .reminder-top {
        display: flex;
        flex-direction: row;
        align-items: flex-end;
        gap: .6rem;
        .reminder-icon {
            width: 32px;
            height: 32px;
        }
        .reminder-title {
            font-size: 1.1rem;
            font-weight: bold;
        }
    }
    .reminder-content {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        padding: 0 0 0 2.6rem;
        .reminder-container {
            display: flex;
            flex-direction: column;
            gap: .2rem;
            .reminder-text {
                width: 190px;
                font-size: .8rem;
                text-overflow: ellipsis;
                white-space: nowrap;
                overflow: hidden;
                color: #969696;
            }
            .reminder-amount {
                font-size: 1.2rem;
                font-weight: bold;
                color: #F1AD00;
            }
        }
        .reminder-btn {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 68px;
            height: 34px;
            border-radius: 16px;
            border: 2px solid transparent;
            font-size: .8rem;
            font-weight: bold;
            color: #FFF;
            cursor: pointer;
            transition: all .3s;
            &:hover {
                opacity: .9;
            }
        }
    }
    .reminder-bar-bg {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 5px;
        background: rgba(0, 0, 0, .3);
        .reminder-bar {
            height: 5px;
            animation: fillProgress 5s linear forwards;
        }
    }
}
@keyframes closePopup {
    0% {
        top: -200px;
    }
    5% {
        top: 2rem;
    }
    8% {
        top: 1rem;
    }
    92% {
        top: 1rem;
    }
    95% {
        top: 2rem;
    }
    100% {
        top: -200px;
    }
}
@keyframes fillProgress {
    from {
        width: 100%;
    }
    to {
        width: 0%;
    }
}