:root {

  /* 黑色 */
  --color-black-004: rgba(0, 0, 0, 0.04);
  --color-black-006: rgba(0, 0, 0, 0.06);
  --color-black-008: rgba(0, 0, 0, 0.08);
  --color-black-012: rgba(0, 0, 0, 0.12);
  --color-black-016: rgba(0, 0, 0, 0.16);
  --color-black-020: rgba(0, 0, 0, 0.2);
  --color-black-032: rgba(0, 0, 0, 0.32);
  --color-black-048: rgba(0, 0, 0, 0.48);
  --color-black-070: rgba(0, 0, 0, 0.7);

  /* 白色 */
  --color-white: #ffffff;
  --color-white-008: rgba(255, 255, 255, 0.08);
  --color-white-012: rgba(255, 255, 255, 0.12);
  --color-white-030: rgba(255, 255, 255, 0.3);
  --color-white-045: rgba(255, 255, 255, 0.45);
  --color-white-064: rgba(255, 255, 255, 0.64);
  --color-white-070: rgba(255, 255, 255, 0.7);
  --color-white-080: rgba(255, 255, 255, 0.8);

  /* 白灰色 */
  --color-white-gray-01: #fefefe;

  /* 灰色 */
  --color-gray-01: #e4e4e4;
  --color-gray-02: #d1d1d1;
  --color-gray-03: #b6b6b6;
  --color-gray-04: #595959;

   /* 漸層色 */
   --color-gradient-white-01: linear-gradient(to bottom, #ffffff 0%, #e6e6e6 20%, #eeeeee 70%, #ffffff 100%);
   --color-gradient-white-02: linear-gradient(to bottom, #ffffff 0%, #ffffff 50%, #f8f8f8 50%, #efefef 100%);
   --color-gradient-red-01: linear-gradient(to bottom, #ff5151 0%, #ff9595 32%, #ff2323 100%);
   --color-gradient-blue-01: linear-gradient(to bottom, #4b6aff 0%, #8197ff 32%, #2a4fff 100%);
   --color-gradient-blue-02: linear-gradient(to bottom, #91a4ff 0%, #5774ff 50%, #2c50ff 100%);
   --color-gradient-blue-03: linear-gradient(to bottom, #738bff 0%, #8197ff 32%, #0025d7 100%);
   --color-gradient-gray-01: linear-gradient(to bottom, #bec1d6 0%, #a6a9bf 50%, #8689a4 100%);
   --color-gradient-blue-gray-01: linear-gradient(to bottom, #8b99b2 0%, #b0bace 32%, #74849f 100%);
   --color-gradient-blue-gray-02: linear-gradient(to bottom, #b4becd 0%, #b0bace 32%, #516280 100%);
   --color-gradient-blue-white-01: linear-gradient(to bottom, #ffffff 0%, #dde0ec 20%, #f3f6ff 60%, #ffffff 100%);
   --color-gradient-blue-white-02: linear-gradient(to bottom, #ffffff 0%, #e9ebf5 20%, #f3f6ff 60%, #ffffff 100%);
   --color-gradient-blue-white-03: linear-gradient(to bottom, #ffffff 0%, #dadef0 20%, #e1e8ff 60%, #ffffff 100%);
 
   /* 藍色 */
   --color-blue-01: #4b6aff;
   --color-blue-01-012: rgba(75, 106, 255, 0.12);
   --color-blue-01-012: rgba(75, 106, 255, 0.12);
   --color-blue-01-020: rgba(75, 106, 255, 0.2);
   --color-blue-01-048: rgba(75, 106, 255, 0.48);
   --color-blue-02: #2b45c9;
   --color-blue-03: #001998;
   --color-blue-04: #6784C6;
   --color-blue-05: #4E6D9C;
 
   /* 藍灰色 */
   --color-blue-gray-01: #9ea7b6;
   --color-blue-gray-02: #8994a7;
   --color-blue-gray-03: #9ea7b6;
   --color-blue-gray-04: #58667d;
   --color-blue-gray-05: #3c485d;
   --color-blue-gray-06: #eef2f5;
 
   /* 紅色 */
   --color-red-01: #ff5151;
   --color-red-02: #cb0000;
   --color-red-03: #FF3E48;
   --color-red-04: #FF7D83;
 
   /* 橘色 */
   --color-orange-01: #ff9900;
   --color-orange-02: #DE9E00;
 
   /* 綠色 */
   --color-green-01: #1ed700;
   --color-green-02: #04b300;
 }

/*-----------------------------Basic-----------------------------*/
body {
  background: var(--color-white-gray-01);
  color: var(--color-black-070);
}

a,
a span,
input {
  color: var(--color-black-070);
}

input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(1) hue-rotate(180deg);
  color-scheme: dark;
  opacity: .5;
}

/* 表格 */
table {
  border-top: 1px solid var(--color-black-012);
  border-left: 1px solid var(--color-black-012);
}
table td {
  border-right: 1px solid var(--color-black-012);
  border-bottom: 1px solid var(--color-black-012);
}

::placeholder {
  color: var(--color-black-032);
}

::-ms-input-placeholder {
  color: var(--color-black-032);
}

/*-----------------------------共用元件-----------------------------*/
/*------------------ 頁面內容layout ----------------*/
.page-content-default .area-content,
.page-content-default .page-content-list .area-menu {
  background: var(--color-white);
  box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.06) inset, 0px 0px 20px 0px #E5F0F8 inset;
  border: 2px solid var(--color-black-006);
}

.page-content-list .area-menu .btn-menu {
  color: var(--color-black-048);
  opacity: .8;
  font-weight: bold;

  &:hover {
    opacity: 1;
  }

  &:active {
    opacity: .7;
  }

  .unread {
    background: var(--color-red-01);
    filter: drop-shadow(0px 1px 1px rgba(0, 0, 0, 0.20));
  }
}

.page-content-list .area-menu .btn-menu.active {
  color: var(--color-blue-01);
  opacity: 1;
}

/*------------------ 頁面內容背景圖 ----------------*/
.page-content-default {
  background: url(../images/blue/page-content-bg.webp) no-repeat bottom;
  background-size: cover;
}

/*--------------------- 頁面標題 -------------------*/
.page-title:after {
  background: var(--color-gradient-blue-01);
}

.page-title .title-text::before {
  color: var(--color-black-070);
}

.page-title .page-back {
  background: var(--color-gradient-blue-white-01);
  box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.20) inset, 0px 2px 4px 0px rgba(0, 0, 0, 0.20);
  color: #7A7C81;
  transition: all 0.3s ease-in-out;
}
.page-title .page-back svg {
  color: #7A7C81;
  transition: all 0.3s ease-in-out;
}
.page-title .page-back:hover {
  background: var(--color-gradient-blue-white-03);
}

/*--------------------- 分隔線 ---------------------*/
.hr {
  border-top: 1px solid var(--color-black-008);
}

.hr-vertical {
  background: var(--color-black-008);
}

/*-------------------- 彈窗 ----------------------*/
.popup { 

  /* 彈窗標題 */
  .popup-title {
    background: var(--color-gradient-blue-02);
    color: var(--color-white);
  }
  
  /* 彈窗內容 */
  .popup-content {
    background: var(--color-white-gray-01);
    border-bottom: 4px solid var(--color-blue-gray-01);
    box-shadow: 0px 8px 12px 0px rgba(0, 0, 0, 0.08);
  }
}

/*------------------ Checkbox -------------------*/
.checkbox {
  
  .btn-check {
    background: var(--color-blue-gray-06);
    box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.12) inset;

    .icon {
      color: var(--color-white);
    }

    &:active {
      opacity: .7;
    }

    &:hover {
      outline: 2px solid var(--color-blue-01-048);
    }
  }

  .btn-check.active {
    background: var(--color-blue-gray-01);
    border-bottom: 2px solid var(--color-blue-gray-04);
    box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.20) inset, 0px 2px 4px 0px rgba(0, 0, 0, 0.20);
  }

  .checkbox-content,
  .check-text {
    color: var(--color-black-070);
    #index-popup-news & {
      color: var(--color-white-070);
    }
  }
}

/*------------------- Input -------------------*/
/* 欄位名稱 */
.input-area .field-title {
  
  .field-text {
    color: var(--color-black-070);
  }

  /* 必填 */
  .required {
    color: var(--color-red-01);
  }

  /* 選填 */
  .optional {
    color: var(--color-black-032);
  }
}

/* 輸入框 */
.chat-surface .input-text,
.input-content.select,
.input-content.password,
.input-time,
.input-area .input-text {
  background: var(--color-black-004);
  box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.12) inset;

  &:hover {
    background: var(--color-black-006);
  }

  &:focus {
    background: var(--color-black-006);
    outline: 2px solid var(--color-blue-01-048);
  }
}

.input-content.select.disable,
.input-content.password.disable,
.input-time.disable,
.input-area .input-text.disable {
  opacity: .6;
}

.input-content.select .input-text {
  background: none;
  box-shadow: none;
}

input[type=text]::placeholder {
  color: var(--color-black-032);
}

/* 密碼顯示隱藏icon */
.input-content.password .password-icon {
  color: var(--color-black-032);
}

/* 輸入規則 */
.input-area .input-hint {
  color: var(--color-black-048);
}

/* 錯誤狀態 */
.input-area .error {
  border: 1px solid var(--color-red-01);
}

/* 錯誤提示 */
.input-area .error-hint, .error-hint {
  color: var(--color-red-01);
}

/* 輸入提示 */
.input-area .input-remark {
  color: var(--color-black-048);
}

/* 時間輸入框 */
.input-time {

  .field-title {
    color: var(--color-black-048);
  }
}

/*------------------- 備註文字 -------------------*/
.remark {
  color: var(--color-black-048);
}

/*-------------------- 按鈕 ---------------------*/
/* 純文字 */
.btn-text {
  color: var(--color-black-048);

  span {
    color: var(--color-black-048);
  }

  &:active {
    opacity: .7;
  }

  &:hover {
    color: var(--color-black-070);

    span {
      color: var(--color-black-070);
    }
  }
}

/* 送出、編輯、選擇、一鍵領取 (正向選項) */
.btn-one-click,
.btn-more,
.header .list-function .btn-login,
.btn-edit,
.btn-select,
.btn-send {
  color: var(--color-white);
  background: var(--color-gradient-blue-01);
  border-bottom: 3px outset var(--color-blue-02);
  box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.20) inset, 0px 2px 4px 0px rgba(0, 0, 0, 0.20);

  &:active {
    opacity: .7;
  }

  &:hover {
    background: var(--color-gradient-blue-03);
    border-bottom: 3px outset var(--color-blue-03);
    box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.20) inset, 0px 2px 2px 0px rgba(0, 0, 0, 0.24);
  }
  &.disable, &:disabled {
    background: var(--color-black-012);
    color: var(--color-black-032);
    box-shadow: none;
    border: none;
    &:hover {
      filter: brightness(.95);
    }
  }

  .text,
  span {
    color: var(--color-white);
  }
}

/* 取消(反向選項) */
.btn-sort-by,
.btn-refresh,
.btn-cancel {
  color: var(--color-black-048);
  background: var(--color-gradient-blue-white-01);
  border-bottom: 3px solid var(--color-gray-01);
  box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.20) inset, 0px 2px 4px 0px rgba(0, 0, 0, 0.20);

  &:hover {
    background: var(--color-gradient-blue-white-01);
    border-bottom: 3px solid var(--color-gray-02);
    box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.20) inset, 0px 2px 2px 0px rgba(0, 0, 0, 0.24);
  }

  &:active {
    opacity: .7;
  }

  span {
    color: var(--color-black-048);
  }
}

/* 功能按鈕 */
header .list-function .btn-signup,
.btn-function {
  background: var(--color-gradient-blue-gray-01);
  border-bottom: 3px solid var(--color-blue-gray-04);
  color: var(--color-white);
  box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.20) inset, 0px 2px 4px 0px rgba(0, 0, 0, 0.20);

  &:active {
    opacity: .7;
  }

  &:hover {
    background: var(--color-gradient-blue-gray-02);
    border-bottom: 3px solid var(--color-blue-gray-05);
    box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.20) inset, 0px 2px 2px 0px rgba(0, 0, 0, 0.24);
  }
}

/* 底線按鈕 */
.btn-text-link {
  color: var(--color-blue-01);

  &:active {
    opacity: .7;
  }

  &:hover {
      font-weight: bold;
  }
}

/* 選項按鈕 */
.btn-option {
  background: var(--color-black-004);
  box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.12) inset;
  color: var(--color-black-048);

  &:active {
    opacity: .7;
  }

  &:hover {
    background: var(--color-black-006);
    outline: 2px solid var(--color-blue-01-048);
  }
}

.btn-option.active {
  color: var(--color-white);
  background: var(--color-gradient-blue-01);
  border-bottom: 3px outset var(--color-blue-02);
  box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.20) inset, 0px 2px 4px 0px rgba(0, 0, 0, 0.20);

  &:hover {
    outline: none;
  }

  p {
    color: var(--color-white);
  }
}

.btn-option.disable,
.btn-function.disable,
.btn-cancel.disable,
.btn-send.disabled {
  background: var(--color-black-012);
  color: var(--color-black-032);
  box-shadow: none;
  border: none;

  span {
    color: var(--color-black-032);
  }

  .countdown {
    color: var(--color-black-048);
  }

  &:hover {
    outline: none;
  }
}

/* 返回按鈕 */
.btn-back {
  color: var(--color-black-048);

  &:active {
    opacity: .7;
  }

  &:hover {
    color: var(--color-black-070);
  }
}

.btn-confirm {
    background: var(--color-gradient-blue-02);
    border: 0;
    color: #FFF;
}

/*------------------- 下拉選單 -------------------*/
.dropdown {
  background: var(--color-black-004);
  box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.12) inset;

  .icon {
    color: var(--color-black-032);
  }

  &:hover {
    background: var(--color-black-006);
    outline: 2px solid var(--color-blue-01-048);
    font-weight: bold;
    border-radius: 4px;
  }

  .list-option {
    background: var(--color-white);
    border: 1px inset var(--color-black-012);
    box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.20);

    .option {

      &:hover {
        background: var(--color-black-006);
      }
    }
  }
  &.disabled {
    color: var(--color-black-048);
    opacity: .6;
  }
}

/*-------------------跑馬燈--------------------*/
.marquee {
  background: var(--color-white);
  box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.18) inset;
  
  .icon-marquee {
    background: url(../images/blue/icon-marquee.svg) no-repeat center;
    background-size: cover;
  }

  .marquee-list {
    color: var(--color-black-048);
  }
}

/*------------------ 頁面Tabs -------------------*/
.page-tabs .btn-tabs {
  color: var(--color-black-048);

  .line-bottom {
    background: none repeat scroll 0 0 transparent;
    width: 0;
    height: 2px;
    left: 50%;
    border-radius: 50rem;
    background: var(--color-blue-01);
    transition: width 0.3s ease 0s, left 0.3s ease 0s;
  }

  &:active,
  &:hover {

    .text {
      color: var(--color-blue-01);
      transition: 0.5s;
    }

    .line-bottom {
      width: 100%;
      height: 2px;
    }
  }
}

.page-tabs .btn-tabs.active {

  .text {
    color: var(--color-blue-01);
  }

  .line-bottom {
    width: 100%;
    height: 2px;
  }
}

/*--------------------- icon ---------------------*/
/* copy */
.icon-copy {
  background: url(../images/blue/icon-copy.svg) no-repeat center;
  opacity: .4;

  &:active {
    opacity: .24;
  }

  &:hover {
    opacity: .6;
    background-size: 1.4rem;
    transition: 0.3s;
  }
}

/* 關閉 */
.btn-close {

  .icon-close {
    color: var(--color-white);
  }

  &:hover {
    transform: rotate(90deg);
    transform-origin: center;
    transition: 0.5s;
  }

  &:active {
    opacity: .7;
  }
}

/*----------------------無資料----------------------*/
.nodata {
  opacity: 1;
  color: var(--color-black-084);
}

/*--------------------- 分頁元件 ---------------------*/
.pagination .btn {
  background: var(--color-black-004);
  box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.18) inset;
  color: var(--color-black-032);
  font-weight: bold;

  &:active {
    opacity: .7;
  }

  &:hover {
    background: var(--color-black-006);
    color: var(--color-black-048);
  }
}

.pagination .btn.active {
  background: var(--color-gradient-blue-white-02);
  border-bottom: 2px solid var(--color-gray-01);
  color: var(--color-black-048);
  box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.20) inset, 0px 2px 4px 0px rgba(0, 0, 0, 0.20);
}

.pagination .btn.first-page {

  .icon {
    background: url(../images/blue/pagination-first-page.svg) no-repeat center;
    background-size: cover;
    opacity: .32;
  }

  &:hover {

    .icon {
      opacity: .48;
    }
  }
}

.pagination .btn.last-page {

  .icon {
    background: url(../images/blue/pagination-last-page.svg) no-repeat center;
    background-size: cover;
    opacity: .32;
  }

  &:hover {

    .icon {
      opacity: .48;
    }
  }
}

/*----------------------- 表格類 -----------------------*/
.table .row {

  .colum.state {
    color: var(--color-orange-01);
  }
}

.table .row.title {
  color: var(--color-black-032);

  .colum.state {
    color: var(--color-black-032);
  }
}

.table .row.even {
  background: var(--color-black-004);
}

/*----------------------- QR code -----------------------*/
.img-qrcode {
  border: 20px solid #FFF;
}

/*----------------------- Switch ------------------------*/
.switch {
  box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.12) inset;
}

.switch.on {
  background: var(--color-green-01);
}

.switch.off {
  background: var(--color-black-008);
}

.switch .btn-switch {
  background: var(--color-white);
  box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.32);
}

/*---------------------- Scrollbar -----------------------*/
::-webkit-scrollbar {
  background-color: var(--color-black-008);
}

::-webkit-scrollbar-thumb {
  background-color: var(--color-black-016);
}

/*------------------------------Header------------------------------*/
header {
  background: var(--color-gradient-blue-white-02);
  border-bottom: 1px solid var(--color-black-008);
  box-shadow: 0px 1px 12px 0px rgba(0, 0, 0, 0.08);
}

.home header {
  background: linear-gradient(180deg, #FFF 0%, #E9EBF5 20%, #EEF1FA 86.5%, rgba(243, 246, 255, 0.60) 93.5%, rgba(255, 255, 255, 0.00) 100%);
  border-bottom: none;
  background-color: #F3F6FF;
}

.header .list-btn-page {

  .btn {

    .text {
      color: var(--color-black-048);
    }

    .line-bottom {
      background: none repeat scroll 0 0 transparent;
      width: 0;
      height: 2px;
      left: 50%;
      border-radius: 50rem;
      background: var(--color-gradient-blue-02);
      transition: width 0.3s ease 0s, left 0.3s ease 0s;
    }

    &:active,
    &:hover {

      .text {
        color: var(--color-blue-01);
        transition: 0.5s;
      }

      .line-bottom {
        width: 24px;
        height: 2px;
      }
    }
  }

  .btn.active {

    .text {
      color: var(--color-blue-01);
    }

    .line-bottom {
      background: var(--color-gradient-blue-02);
      width: 24px;
      height: 2px;
    }
  }
}

.header .list-btn-function {

  .btn {

    .text {
      color: var(--color-black-048);
      font-weight: bold;
    }

    &:active,
    &:hover {

      .text {
        color: var(--color-blue-01);
        transition: 0.5s;
      }
    }
  }

  .btn.chatroom {

    .img {
      background: url(../images/blue/header-chatroom-default.svg) no-repeat center;
      background-size: 32px;
    }

    &:active,
    &:hover {

      .img {
        background: url(../images/blue/header-chatroom-hover.svg) no-repeat center;
        transform: scale(1);
        transition: 0.5s;
      }
    }
  }

  .btn.deposit {

    .img {
      background: url(../images/blue/header-deposit-default.svg) no-repeat center;
      background-size: 32px;
    }

    &:active,
    &:hover {

      .img {
        background: url(../images/blue/header-deposit-hover.svg) no-repeat center;
        transform: scale(1);
        transition: 0.5s;
      }
    }
  }

  .btn.withdraw {

    .img {
      background: url(../images/blue/header-withdraw-default.svg) no-repeat center;
      background-size: 32px;
    }

    &:active,
    &:hover {

      .img {
        background: url(../images/blue/header-withdraw-hover.svg) no-repeat center;
        transform: scale(1);
        transition: 0.5s;
      }
    }
  }
}

/* 頭像 */
.page-content-list .area-menu .my-user-info .avatar,
.header .area-user .user-info .avatar {
  padding: 0;
  border: 2px solid var(--color-blue-gray-02);
}

/* VIP */
.page-content-list .area-menu .my-user-info .vip,
.header .user-info .user-name .vip {
  background: var(--color-gradient-red-01);
  color: var(--color-white);
  border-bottom: 1px inset var(--color-red-02);
  box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.20) inset, 0px 2px 4px 0px rgba(0, 0, 0, 0.20);
}

.header .area-user {

  .menu {
    background: var(--color-white);
    border: 1px solid var(--color-black-012);
    box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.20) inset, 0px 2px 4px 0px rgba(0, 0, 0, 0.20);

    .btn {
      opacity: .7;

      .text {
        color: var(--color-black-070);
        font-weight: bold;
      }

      &:hover {
        opacity: 1;
      }
    }

    .btn.my-info-basic {

      .icon {
        background: url(../images/blue/icon-account-default.webp) no-repeat center;
        background-size: cover;
      }
    }

    .btn.deal-detail {

      .icon {
        background: url(../images/blue/icon-deal-record-default.webp) no-repeat center;
        background-size: cover;
      }
    }

    .btn.bet-record {

      .icon {
        background: url(../images/blue/icon-bet-record-default.webp) no-repeat center;
        background-size: cover;
      }
    }

    .btn.bonus-record {

      .icon {
        background: url(../images/blue/icon-bonus-record-default.webp) no-repeat center;
        background-size: cover;
      }
    }

    .btn.promote {

      .icon {
        background: url(../images/blue/icon-promote-default.webp) no-repeat center;
        background-size: cover;
      }
    }

    .btn.red-envelope-code {

      .icon {
        background: url(../images/blue/icon-red-envelope.webp) no-repeat center;
        background-size: cover;
      } 
    }   

    .btn.all-agent {

      .icon {
        background: url(../images/blue/icon-all-agent-default.svg) no-repeat center;
        background-size: cover;
      } 
    }   

    .btn.bankcard-info {

      .icon {
        background: url(../images/blue/icon-bankcard-info-default.svg) no-repeat center;
        background-size: cover;
      } 
    }   

    .btn.check {

      .icon {
        background: url(../images/blue/icon-check-default.svg) no-repeat center;
        background-size: cover;
      } 
    }   

    .btn.my-info-member {

      .icon {
        background: url(../images/blue/icon-vip-default.webp) no-repeat center;
        background-size: cover;
      } 
    }   

    .btn.qa {

      .icon {
        background: url(../images/blue/icon-support-qa-default.webp) no-repeat center;
        background-size: cover;
      } 
    }  

    .btn.logout {

      .icon {
        background: url(../images/blue/icon-logout-default.webp) no-repeat center;
        background-size: cover;
      }
    }
  }
}

.header .dropdown-language .dropdown-btn,
.header .list-user-info .balance,
.header .list-user-info .mailbox,
.header .list-user-info .area-user .user-info,
.header .list-function .btn-set {
  background: var(--color-gradient-white-02);
  border-bottom: 2px solid var(--color-gray-02);
  box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.20) inset, 0px 2px 4px 0px rgba(0, 0, 0, 0.20);

  &:active {
    opacity: .7;
  }

  &:hover {
    border-bottom: 3px solid var(--color-gray-03);
    box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.20) inset, 0px 2px 2px 0px rgba(0, 0, 0, 0.24);
  }
}

.header .list-user-info .area-user .user-info {

  .icon {
    color: var(--color-black-032);
  }
}

.header .list-user-info .balance {

  .icon-balance {
    background: url(../images/blue/icon-balance.webp) no-repeat center;
    background-size: cover;
  }

  .icon-refresh {
    color: var(--color-black-032);
  }
}

.header .list-user-info .mailbox {

  .img {
    background: url(../images/blue/icon-mailbox.webp) no-repeat center;
    background-size: cover;
  }

  .unread-count {
    background: var(--color-red-01);
    color: var(--color-white);
  }
}

.header .dropdown-language .list-option .country .flag,
.header .dropdown-language .dropdown-btn .flag {
  box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.32);
}

.header .dropdown-language .list-option .country.en .flag,
.header .dropdown-language .list-option .country.en-US .flag,
.header .dropdown-language .dropdown-btn .flag.us,
.header .dropdown-language .dropdown-btn .flag.en {
  background: url(../../../images/common/language-en-US.webp) no-repeat center;
  background-size: cover;
}

.header .dropdown-language .list-option .country.zh .flag,
.header .dropdown-language .list-option .country.zh-TW .flag,
.header .dropdown-language .dropdown-btn .flag.tw,
.header .dropdown-language .dropdown-btn .flag.zh {
  background: url(../../../images/common/language-zh-TW.webp) no-repeat center;
  background-size: cover;
}

.header .dropdown-language .list-option .country.cn .flag,
.header .dropdown-language .list-option .country.zh-CN .flag,
.header .dropdown-language .dropdown-btn .flag.cn {
  background: url(../../../images/common/language-zh-CN.webp) no-repeat center;
  background-size: cover;
}

.header .dropdown-language .list-option .country.pt .flag,
.header .dropdown-language .list-option .country.pt-BR .flag,
.header .dropdown-language .dropdown-btn .flag.br,
.header .dropdown-language .dropdown-btn .flag.pt {
  background: url(../../../images/common/language-pt-BR.webp) no-repeat center;
  background-size: cover;
}

.header .dropdown-language .list-option .country.jp .flag,
.header .dropdown-language .list-option .country.ja-JP .flag,
.header .dropdown-language .dropdown-btn .flag.jp {
  background: url(../../../images/common/language-ja-JP.webp) no-repeat center;
  background-size: cover;
}

.header .dropdown-language .list-option .country.vi .flag,
.header .dropdown-language .list-option .country.vi-VN .flag,
.header .dropdown-language .dropdown-btn .flag.vn,
.header .dropdown-language .dropdown-btn .flag.vi {
  background: url(../../../images/common/language-vi-VN.webp) no-repeat center;
  background-size: cover;
}

.header .dropdown-language .list-option .country.th .flag,
.header .dropdown-language .list-option .country.th-TH .flag,
.header .dropdown-language .dropdown-btn .flag.th {
  background: url(../../../images/common/language-th-TH.webp) no-repeat center;
  background-size: cover;
}

.header .dropdown-language .dropdown-btn .icon {
  color: var(--color-black-032);
}

.header .dropdown-language .list-option {
  background: var(--color-white);
  border: 1px solid var(--color-black-012);
  box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.20) inset, 0px 2px 4px 0px rgba(0, 0, 0, 0.20);

  .country {
    background: var(--color-black-004);
    box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.18) inset;

    &:hover {
      background: var(--color-black-006);
      outline: 2px solid var(--color-blue-01-048);
    }
  }

  .country.active {
    background: var(--color-gradient-gray-01);
    border-bottom: 3px solid var(--color-blue-gray-04);
    color: var(--color-white);
    box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.20) inset, 0px 2px 4px 0px rgba(0, 0, 0, 0.20);
  }
}

/* 設定按鈕 */
.header .list-function .btn-set {
  color: var(--color-black-048);

  .tooltip {
    background: var(--color-black-048);
    color: var(--color-white);
  }
}

/* 音效 */
.music {
  background: var(--color-gradient-white-02);
  border-bottom: 2px solid var(--color-gray-02);
  box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.20) inset, 0px 2px 4px 0px rgba(0, 0, 0, 0.20);
  .on {
    color: var(--color-blue-01);
  }
  .off {
    color: var(--color-white-024);
  }
}

/*------------------------------Footer------------------------------*/
.footer {
  background: var(--color-black-004);
}

.footer .copyright {

  .content-text {
    color: var(--color-black-032);
  }

  .btn-back-top {
    background: var(--color-black-004);
    box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.18) inset;
    color: var(--color-black-020);
    font-weight: bold;

    &:active {
      opacity: .7;
    }

    &:hover {
      background: var(--color-black-006);
      color: var(--color-black-048);
    }
  }
}

.footer .nav .area-info .info {
  color: var(--color-black-032);

  .img-limited18 {
    background: url(../images/blue/footer-18+.svg) no-repeat center;
    background-size: 36px;
  }
}

.area-nav .list {

  .title-text {
    color: var(--color-blue-gray-02);

    .item-icon {
      background: var(--color-blue-gray-02);
    }
  }

  .list-btn {

    .btn {
      color: var(--color-black-048);

      &:active {
        opacity: .7;
      }

      &:hover {
        color: var(--color-black-070);
        font-weight: bold;
      }
    }
  }
}

.footer .list-license {

  .item {

    .text {
      color: var(--color-black-048);
    }
  }
}
/*------------------- 版本號 -----------------*/
.version {
  color: var(--color-black-032);
}

/*-------------------------------首頁-------------------------------*/
/*-----------------Banner------------------*/
#home .banner-area .banner-mask {
  background: linear-gradient(180deg, rgba(254, 254, 254, 0.00) 0%, #FEFEFE 42%);
}

#home .banner-area .btn-chang-page {
  background: var(--color-black-032);
  color: var(--color-white);
}

#home .banner-area .list-dots {

  .dots {
    background: var(--color-black-032);

    &:active {
      opacity: .7;
    }

    &:hover {
      background: var(--color-black-048);
    }
  }

  .dots.active {
    background: var(--color-black-048);
  }
}

/*-----------------區域標題------------------*/
#home .area .area-title:after {
  background: var(--color-gradient-blue-01);
}

#home .area .area-title .title-text::before {
  color: var(--color-black-070);
}

#home .area .area-title .sub-title-text::before {
  color: var(--color-black-032);
}

/*----------------遊戲館清單-----------------*/
#home .area.game .area-game {
  background: linear-gradient(270deg, rgba(255, 255, 255, 0.00) 0%, #E9EBF5 20%, #F3F6FF 59.89%, rgba(255, 255, 255, 0.00) 100%);
  border-radius: 0px 24px 24px 0px;
}

#home .area-game .list-game-type .btn {
  background: var(--color-gradient-blue-white-01);
  border-bottom: 4px solid var(--color-gray-02);
  box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.20) inset, 0px 2px 4px 0px rgba(0, 0, 0, 0.20);
  color: var(--color-black-048);

  &:active {
    opacity: .7;
  }

  &:hover {
    border-bottom: 4px solid var(--color-gray-03);
    box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.20) inset, 0px 2px 2px 0px rgba(0, 0, 0, 0.24);
  }
}

#home .area-game .list-game-type .btn.active {
  background: var(--color-gradient-blue-02);
  border-bottom: 6px solid var(--color-blue-03);
  box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.20) inset, 0px 2px 4px 0px rgba(0, 0, 0, 0.20);
  color: var(--color-white);
}

#home .list-game-type .btn.hot .icon {
  background: url(../images/blue/gametype-hot-default.svg) no-repeat center;
  background-size: cover;
}

#home .list-game-type .btn.hot.active .icon {
  background: url(../images/blue/gametype-hot-active.svg) no-repeat center;
  background-size: cover;
}

#home .list-game-type .btn.slot .icon {
  background: url(../images/blue/gametype-slot-default.svg) no-repeat center;
  background-size: cover;
}

#home .list-game-type .btn.slot.active .icon {
  background: url(../images/blue/gametype-slot-active.svg) no-repeat center;
  background-size: cover;
}

#home .list-game-type .btn.poker .icon {
  background: url(../images/blue/gametype-poker-default.svg) no-repeat center;
  background-size: cover;
}

#home .list-game-type .btn.poker.active .icon {
  background: url(../images/blue/gametype-poker-active.svg) no-repeat center;
  background-size: cover;
}

#home .list-game-type .btn.live .icon {
  background: url(../images/blue/gametype-live-default.svg) no-repeat center;
  background-size: cover;
}

#home .list-game-type .btn.live.active .icon {
  background: url(../images/blue/gametype-live-active.svg) no-repeat center;
  background-size: cover;
}

#home .list-game-type .btn.esports .icon {
  background: url(../images/blue/gametype-esports-default.svg) no-repeat center;
  background-size: cover;
}

#home .list-game-type .btn.esports.active .icon {
  background: url(../images/blue/gametype-esports-active.svg) no-repeat center;
  background-size: cover;
}

#home .list-game-type .btn.sports .icon {
  background: url(../images/blue/gametype-sports-default.svg) no-repeat center;
  background-size: cover;
}

#home .list-game-type .btn.sports.active .icon {
  background: url(../images/blue/gametype-sports-active.svg) no-repeat center;
  background-size: cover;
}

#home .list-game-type .btn.fishing .icon {
  background: url(../images/blue/gametype-fishing-default.svg) no-repeat center;
  background-size: cover;
}

#home .list-game-type .btn.fishing.active .icon {
  background: url(../images/blue/gametype-fishing-active.svg) no-repeat center;
  background-size: cover;
}

#home .list-game-type .btn.cockfight .icon {
  background: url(../images/blue/gametype-cockfight-default.svg) no-repeat center;
  background-size: cover;
}

#home .list-game-type .btn.cockfight.active .icon {
  background: url(../images/blue/gametype-cockfight-active.svg) no-repeat center;
  background-size: cover;
}

#home .list-game-type .btn.lottery .icon {
  background: url(../images/blue/gametype-lottery-default.svg) no-repeat center;
  background-size: cover;
}

#home .list-game-type .btn.lottery.active .icon {
  background: url(../images/blue/gametype-lottery-active.svg) no-repeat center;
  background-size: cover;
}

#home .list-game-type .btn.egames .icon {
  background: url(../images/blue/gametype-egames-default.svg) no-repeat center;
  background-size: cover;
}

#home .list-game-type .btn.egames.active .icon {
  background: url(../images/blue/gametype-egames-active.svg) no-repeat center;
  background-size: cover;
}

/* 遊戲類型圖片 */
#home .area-game .list-game-lobby.hot .img-game-lobby {
  background: url(../images/blue/home-game/home-game-hot.webp) no-repeat center;
  background-size: 100%;
}

#home .area-game .list-game-lobby.slot .img-game-lobby {
  background: url(../images/blue/home-game/home-game-slot.webp) no-repeat center;
  background-size: 100%;
}

#home .area-game .list-game-lobby.poker .img-game-lobby {
  background: url(../images/blue/home-game/home-game-poker.webp) no-repeat center;
  background-size: 100%;
}

#home .area-game .list-game-lobby.live .img-game-lobby {
  background: url(../images/blue/home-game/home-game-live.webp) no-repeat center;
  background-size: 100%;
}

#home .area-game .list-game-lobby.esports .img-game-lobby {
  background: url(../images/blue/home-game/home-game-esports.webp) no-repeat center;
  background-size: 100%;
}

#home .area-game .list-game-lobby.sports .img-game-lobby {
  background: url(../images/blue/home-game/home-game-sports.webp) no-repeat center;
  background-size: 100%;
}

#home .area-game .list-game-lobby.fishing .img-game-lobby {
  background: url(../images/blue/home-game/home-game-fishing.webp) no-repeat center;
  background-size: 100%;
}

#home .area-game .list-game-lobby.cockfight .img-game-lobby {
  background: url(../images/blue/home-game/home-game-cockfight.webp) no-repeat center;
  background-size: 100%;
}

#home .area-game .list-game-lobby.lottery .img-game-lobby {
  background: url(../images/blue/home-game/home-game-lottery.webp) no-repeat center;
  background-size: 100%;
}

#home .area-game .list-game-lobby.egames .img-game-lobby {
  background: url(../images/blue/home-game/home-game-egames.webp) no-repeat center;
  background-size: 100%;
}

#home .area-game .list-game-lobby .content .content-title {
  color: var(--color-black-048);
}

#home .list-game-lobby .content .list-btn .btn {
  background: var(--color-black-004);
  box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.12) inset;
  color: var(--color-black-032);

  &:hover {
    background: var(--color-black-008);
    color: var(--color-black-048);
  }

  &:active {
    opacity: .7;
  }
}

/* 熱門 */
#home .list-game-hot {

  .game-icon {

    .area-img {
      background: var(--color-blue-01-020);
      border: 4px solid var(--color-blue-01);

      .img-icon {
        border-radius: 4px;
      }
    }
  }

  .game-icon.no-img {

    .area-img {
      background: var(--color-gradient-white-01);
      border: 4px solid var(--color-gray-01);
    }
  }
}

/*--------- 遊戲館入口按鈕 ---------*/
#home .list-game .btn-game-hall {
  border-bottom: 4px solid var(--color-blue-04);
  background-image: url(../images/blue/index-btn-bg-material.webp), linear-gradient(180deg, #BDCDFF 0%, #E8EEFF 20%, #94AEFF 100%);
  box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.24), 0px 1px 1px 0px #EBF0FF inset;

  .info {
    background: linear-gradient(90deg, rgba(99, 145, 251, 0.84) 0%, rgba(99, 145, 251, 0.00) 100%);

    .providers-name {
      color: var(--color-white);
    }
  }

  .maintain {
    background: var(--color-black-048);
    color: var(--color-white);
  }

  &:active {
    opacity: .7;
  }

  &:hover {
    border-bottom: 4px solid var(--color-blue-02);
    background-image: url(../images/blue/index-btn-bg-material.webp), linear-gradient(180deg, #BDCDFF 0%, #E8EEFF 20%, #94AEFF 100%);
    box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.24), 0px 1px 1px 0px #EBF0FF inset;
    transition: 0.5s;

    .info {
      background: linear-gradient(90deg, rgba(51, 113, 255, 0.84) 0%, rgba(51, 113, 255, 0.00) 100%);
    }
  }
}

/*---------------------------彈窗-每日簽到---------------------------*/
#index-popup-check .popup .popup-title {
  color: var(--color-white);
}

/* 簽到清單 */
#index-popup-check .area .list {

  .btn-check {
    background: var(--color-gradient-blue-white-01);
    border-bottom: 3px solid var(--color-gray-01);
    box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.20) inset, 0px 2px 4px 0px rgba(0, 0, 0, 0.20);
    color: var(--color-black-048);

    .btn-text {
      color: var(--color-black-048);
    }
  }

  /* 今天 */
  .btn-check.today {
    background: var(--color-gradient-blue-02);
    border-bottom: 3px solid var(--color-blue-02);
    box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.20) inset, 0px 2px 4px 0px rgba(0, 0, 0, 0.20);
    color: var(--color-white);

    .btn-text {
      color: var(--color-white);
    }
  }

  .btn-check.confirmed .btn-img {
    background: url(../images/blue/popup-check-confirmed.svg) no-repeat center;
    background-size: cover;
    filter: none;
  }
}

/* 簽到按鈕-圖片-每日 */
#index-popup-check .area.check-day .btn-check .btn-img {
  background: url(../images/blue/popup-check-coin-disable.webp) no-repeat center;
  background-size: cover;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.32));
}

#index-popup-check .area.check-day .btn-check.today .btn-img {
  background: url(../images/blue/popup-check-coin-default.webp) no-repeat center;
  background-size: cover;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.32));
}

/* 簽到按鈕-圖片-連續 */
#index-popup-check .area.check-continuous .btn-check .btn-img {
  background: url(../images/blue/popup-check-gift-disable.webp) no-repeat center;
  background-size: cover;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.32));
}

#index-popup-check .area.check-continuous .btn-check.today .btn-img {
  background: url(../images/blue/popup-check-gift-default.webp) no-repeat center;
  background-size: cover;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.32));
}

/* 連續簽到總天數 */
#index-popup-check .area .total-day {
  color: var(--color-black-048);
}

#index-popup-check .area .total-day .day {
  color: var(--color-red-01);
}

/* 簽到按鈕(已簽到) */
#index-popup-check .btn-send.clicked {
  background: var(--color-black-012);
  color: var(--color-black-032);
  box-shadow: none;
  border: none;
}

/*---------------------------彈窗-活動公告---------------------------*/
/* 關閉按鈕 */
#index-popup-news .btn-close {
  background: var(--color-black-012);
}

/* Tabs */
#index-popup-news .tabs .tab-title {
  background: var(--color-gray-01);
  border: 1px solid var(--color-black-008);
  color: var(--color-black-048);

  &:active {
    opacity: .7;
  }
}

#index-popup-news .tabs .tab-title.active, #index-popup-news .tabs .tab-title:hover {
  background: var(--color-gradient-blue-white-01);
  border-top: 1px inset var(--color-black-012);
  border-bottom: 0px;
  border-left: 1px inset var(--color-black-012);
  border-right: 1px inset var(--color-black-012);
}

/* Tabs內容 */
#index-popup-news .tab-content {
  background: var(--color-white-gray-01);
  border-bottom: 4px solid var(--color-blue-gray-01);
  box-shadow: 0px 8px 12px 0px rgba(0, 0, 0, 0.08);
}

/*-------------------活動-------------------*/
#index-popup-news .discount .item {
  background: var(--color-white);
  border-bottom: 3px solid var(--color-gray-02);
  box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.20) inset, 0px 2px 4px 0px rgba(0, 0, 0, 0.20);
  transition: all .3s;
  .btn-more {
    background: linear-gradient(to bottom, #4b6aff, #8197ff 12%, #2a4fff 30%, #738bff, #8197ff, #0025d7);
    background-size: 100% 300%;
    border-bottom: 3px outset var(--color-blue-02);
    transition: all .3s;
  }
  .info-content {

    .content {

      .title {
        color: var(--color-black-070);
      }

      .date {
        color: var(--color-black-048);
      }
    }
  }
  &:hover {
    background: var(--color-gradient-blue-white-02);
    border-bottom: 3px solid var(--color-gray-03);
    box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.20) inset, 0px 2px 2px 0px rgba(0, 0, 0, 0.24);
    .btn-more {
      background-position: 0 100%;
    }
  }
}

/*-------------------公告-------------------*/
#index-popup-news .notify .notify-item {

  .notify-title {

    .notify-text {
      color: var(--color-black-070);
    }

    .notify-date {
      color: var(--color-black-048);
    }
  }

  .notify-btn {

    .notify-btn-close {
      color: var(--color-black-048);
      background: var(--color-gradient-blue-white-01);
      border-bottom: 3px solid var(--color-gray-01);
      box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.20) inset, 0px 2px 4px 0px rgba(0, 0, 0, 0.20);

      &:active {
        opacity: .7;
      }

      &:hover {
        background: var(--color-gradient-blue-white-01);
        border-bottom: 3px solid var(--color-gray-02);
        box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.20) inset, 0px 2px 2px 0px rgba(0, 0, 0, 0.24);
      }
    }

    .notify-btn-next {
      color: var(--color-white);
      background: var(--color-gradient-blue-01);
      border-bottom: 3px solid var(--color-blue-02);
      box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.20) inset, 0px 2px 4px 0px rgba(0, 0, 0, 0.20);

      &:active {
        opacity: .7;
      }

      &:hover {
        background: var(--color-gradient-blue-03);
        border-bottom: 3px outset var(--color-blue-03);
        box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.20) inset, 0px 2px 2px 0px rgba(0, 0, 0, 0.24);
      }
    }
  }
}

/*--------------------- 其他 ---------------------*/
#index-popup-news .other .other-img {
.text {
  color: var(--color-white);
}
  &:active {
    opacity: .7;
  }
}

#index-popup-news .other .other-img.rule-gaming {
  background: url(../images/blue/btn-rule-gaming.webp) no-repeat center;
  background-size: cover;
}

#index-popup-news .other .other-img.rule-service {
  background: url(../images/blue/btn-rule-service.webp) no-repeat center;
  background-size: cover;
}

/*-------------------------------遊戲館-------------------------------*/
/*----------------- 廠商資訊 ------------------*/
#game .providers-info {
  background: url(../images/blue/game-info-bg-material.webp) no-repeat center;
  background-size: cover;
  background-color: var(--color-white);
  box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.06) inset, 0px 0px 20px 0px #E5F0F8 inset;
  border: 2px solid var(--color-black-006);

  .avatar {
    border-bottom: 4px solid var(--color-gray-02);
    background: var(--color-gradient-white-01);
    box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.20) inset, 0px 2px 4px 0px rgba(0, 0, 0, 0.20);
  }
}

/* 篩選按鈕 */
#game .list-function .list-btn .btn-filter {
  background: var(--color-gradient-blue-gray-01);
  border-bottom: 3px solid var(--color-blue-gray-04);
  color: var(--color-white);
  box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.20) inset, 0px 2px 4px 0px rgba(0, 0, 0, 0.20);

  &:active {
    opacity: .7;
  }

  &:hover {
    background: var(--color-gradient-blue-gray-02);
    border-bottom: 3px solid var(--color-blue-gray-05);
    box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.20) inset, 0px 2px 2px 0px rgba(0, 0, 0, 0.24);
  }
}

#game .list-function .list-btn .btn-filter.all-game .icon {
  background: url(../images/blue/game-filter-all.webp) no-repeat center;
  background-size: cover;
}

#game .list-function .list-btn .btn-filter.hot-game .icon {
  background: url(../images/blue/game-filter-hot.webp) no-repeat center;
  background-size: cover;
}

/* 遊戲搜尋 */
#game .list-function .input-search {
  background: var(--color-black-004);
  box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.12) inset;

  .icon-search {
    color: var(--color-black-032);
  }

  &:hover {
    background: var(--color-black-006);
  }
}

/*-----------------遊戲清單------------------*/
#game .list-game {

  .game-icon {

    .area-img {
      background: var(--color-blue-01-020);
      border: 4px solid var(--color-blue-01);

      .img-icon {
        border-radius: 4px;
      }
    }
  }

  .game-icon.no-img {

    .area-img {
      background: var(--color-gradient-white-01);
      border: 4px solid var(--color-gray-01);
    }
  }
}

/* Loading狀態 */
#game .list-game .game-icon.loading {
  background: linear-gradient(100deg,
      rgba(71, 101, 243, 0) 40%,
      rgba(71, 101, 243, .12) 50%,
      rgba(71, 101, 243, 0) 60%) var(--color-blue-01-012);
  background-size: 200% 100%;
  background-position-x: 180%;
  animation: 1s loading ease-in-out infinite;
}

@keyframes loading {
  to {
    background-position-x: -20%;
  }
}

/*------------------------------遊戲介面-----------------------------*/
#game-surface .game-header {
  background: #1E1E1E;
}

#game-surface .btn {
  border: 2px solid rgba(255, 255, 255, 0.32);
  background: linear-gradient(0deg, #55586B 0%, #8E90AA 100%);
  color: var(--color-white);

  &:hover {
    background: linear-gradient(180deg, #6D6F83 0%, #4B4E5E 100%);
  }

  &:active {
    opacity: .7;
  }
}

#game-surface .btn.deposit,
#game-surface .btn.multi-game {
  background: linear-gradient(180deg, #FFEACC 0%, #EEAC4E 100%);
  color: #5B411B;

  &:hover {
    background: linear-gradient(180deg, #FFDBA8 0%, #FF9A0B 100%);
  }
}

/*---------------------------彈窗-多檯遊戲---------------------------*/
#game-surface-popup-multi .popup {
  border-bottom: 4px solid var(--color-blue-gray-01);
  box-shadow: 0px 8px 12px 0px rgba(0, 0, 0, 0.08);

  .popup-content {
    box-shadow: none;
    border: none;
  }
}

#game-surface-popup-multi .game-icon .icon-border {
  background: var(--color-blue-01-020);
  border: 3px solid var(--color-blue-01);
  padding: 0;

  .icon-img {
    border-radius: 4px;
  }
}

#game-surface-popup-multi .game-icon.no-img .icon-border {
  background: var(--color-gradient-white-01);
  border: 3px solid var(--color-gray-01);
}

#game-surface-popup-multi .game-icon .game-name {
  color: var(--color-black-070);
}

/* 選擇狀態 */
#game-surface-popup-multi .game-icon.select .tag-select {
  background: url(../images/blue/game-select.webp) no-repeat center;
  background-size: cover;
}

/* 選擇介面 */
#game-surface-popup-multi .surface-select {
  background: var(--color-white-gray-01);
  border-top: 2px solid var(--color-black-008);
  box-shadow: 0px -2px 12px 0px rgba(0, 0, 0, 0.12);

  .remark {
    color: var(--color-black-032);
  }
}

#game-surface-popup-multi .item.select {

  .icon-border {
    padding: 0;
    background: var(--color-blue-01-020);
    border: 3px solid var(--color-blue-01);

    .icon-img {
      border-radius: 4px;
    }
  }

  .game-name {
    color: var(--color-black-070);
  }
}

#game-surface-popup-multi .item.unselect {

  .icon-border {
    background: var(--color-black-004);
    border: 3px dotted var(--color-black-020);
  }

  .game-name {
    color: var(--color-black-032);
  }
}

#game-surface-popup-multi .list-select .item .btn-delete {
  background: var(--color-red-03);
  border: 2px solid var(--color-red-04);

  .icon {
    background: url(../images/blue/game-delete.svg) no-repeat center;
    background-size: cover;
  }

  &:hover {

    .icon {
      background-size: 24px;
      transition: .5s;
    }
  }
}

/*------------------------------我的帳戶-----------------------------*/
/*----------------------頁面選單---------------------*/
.area-menu .my-user-info .list-field .field {
  background: var(--color-black-004);
  color: var(--color-blue-01);
  box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.12) inset;
  border-radius: 8px;

  .title {
    color: var(--color-black-048);
  }
}

.area-menu .btn-menu.my-info-member .icon {
  background: url(../images/blue/icon-vip-default.webp) no-repeat center;
  background-size: cover;
}

.area-menu .btn-menu.my-info-member.active {

  .icon {
    background: url(../images/blue/icon-vip-active.webp) no-repeat center;
  }

  .text {
    color: var(--color-blue-01);
  }
}

.area-menu .btn-menu.my-info-basic .icon {
  background: url(../images/blue/icon-account-default.webp) no-repeat center;
  background-size: cover;
}

.area-menu .btn-menu.my-info-basic.active {

  .icon {
    background: url(../images/blue/icon-account-active.webp) no-repeat center;
  }

  .text {
    color: var(--color-blue-01);
  }
}

.area-menu .btn-menu.bankcard-info .icon {
  background: url(../images/blue/icon-bankcard-info-default.svg) no-repeat center;
  background-size: cover;
}

.area-menu .btn-menu.bankcard-info.active {

  .icon {
    background: url(../images/blue/icon-bankcard-info-active.svg) no-repeat center;
  }

  .text {
    color: var(--color-blue-01);
  }
}

.area-menu .btn-menu.modify-password .icon {
  background: url(../images/blue/icon-modify-pw-default.webp) no-repeat center;
  background-size: cover;
}

.area-menu .btn-menu.modify-password.active {

  .icon {
    background: url(../images/blue/icon-modify-pw-active.webp) no-repeat center;
  }

  .text {
    color: var(--color-blue-01);
  }
}

.area-menu .btn-menu.deal-detail .icon {
  background: url(../images/blue/icon-deal-record-default.webp) no-repeat center;
  background-size: cover;
}

.area-menu .btn-menu.deal-detail.active {

  .icon {
    background: url(../images/blue/icon-deal-record-active.webp) no-repeat center;
  }

  .text {
    color: var(--color-blue-01);
  }
}

.area-menu .btn-menu.bet-record .icon {
  background: url(../images/blue/icon-bet-record-default.webp) no-repeat center;
  background-size: cover;
}

.area-menu .btn-menu.bet-record.active {

  .icon {
    background: url(../images/blue/icon-bet-record-active.webp) no-repeat center;
  }

  .text {
    color: var(--color-blue-01);
  }
}

.area-menu .btn-menu.bonus-record .icon {
  background: url(../images/blue/icon-bonus-record-default.webp) no-repeat center;
  background-size: cover;
}

.area-menu .btn-menu.bonus-record.active {

  .icon {
    background: url(../images/blue/icon-bonus-record-active.webp) no-repeat center;
  }

  .text {
    color: var(--color-blue-01);
  }
}

.area-menu .btn-menu.promote .icon {
  background: url(../images/blue/icon-promote-default.webp) no-repeat center;
  background-size: cover;
}

.area-menu .btn-menu.promote.active {

  .icon {
    background: url(../images/blue/icon-promote-active.webp) no-repeat center;
  }

  .text {
    color: var(--color-blue-01);
  }
}

.area-menu .btn-menu.news .icon {
  background: url(../images/blue/icon-news-default.webp) no-repeat center;
  background-size: cover;
}

.area-menu .btn-menu.news.active {

  .icon {
    background: url(../images/blue/icon-news-active.webp) no-repeat center;
  }

  .text {
    color: var(--color-blue-01);
  }
}

.area-menu .btn-menu.red-envelope-code {
  opacity: .7;

  .icon {
    background: url(../images/blue/icon-red-envelope.webp) no-repeat center;
    background-size: cover;
  }

  .text {
    color: rgba(0, 0, 0, 0.48);
    font-weight: bold;
  }
}

.area-menu .btn-menu.red-envelope-code.active,
.area-menu .btn-menu.red-envelope-code:hover {
  opacity: 1;
}

.area-menu .btn-menu.logout .icon {
  background: url(../images/blue/icon-logout-default.webp) no-repeat center;
  background-size: cover;
}

.area-menu .btn-menu.logout.active {

  .icon {
    background: url(../images/blue/icon-logout-active.webp) no-repeat center;
  }

  .text {
    color: var(--color-blue-01);
  }
}

.area-menu .btn-menu.all-agent {
  opacity: .7;
  .icon {
    background: url(../images/blue/icon-all-agent-default.svg) no-repeat center;
    background-size: cover;
  }
}

.area-menu .btn-menu.all-agent.active,
.area-menu .btn-menu.all-agent:hover {
  .icon {
    background: url(../images/blue/icon-all-agent-default.svg) no-repeat center;
    background-size: cover;
  }

  .text {
    color: rgba(0, 0, 0, 0.48);
    font-weight: bold;
  }
}

.area-menu .btn-menu.check {
  opacity: .7;
  .icon {
    background: url(../images/blue/icon-check-default.svg) no-repeat center;
    background-size: cover;
  }
}

.area-menu .btn-menu.check.active,
.area-menu .btn-menu.check:hover {
  .icon {
    background: url(../images/blue/icon-check-default.svg) no-repeat center;
    background-size: cover;
  }

  .text {
    color: rgba(0, 0, 0, 0.48);
    font-weight: bold;
  }
}

.area-menu .btn-menu.qa {
  opacity: .7;
  .icon {
    background: url(../images/blue/icon-support-qa-default.webp) no-repeat center;
    background-size: cover;
  }
}

.area-menu .btn-menu.qa.active,
.area-menu .btn-menu.qa:hover {
  .icon {
    background: url(../images/blue/icon-support-qa-default.webp) no-repeat center;
    background-size: cover;
  }

  .text {
    color: rgba(0, 0, 0, 0.48);
    font-weight: bold;
  }
}

/* 版本號 */
.area-menu .version {
  color: var(--color-black-032);
}

/*-------------------------我的帳戶 > 會員等級------------------------*/
#my-info-member .area-content .area-title {
  color: var(--color-blue-01);
}

/* 進度條 */
.info-bar-area {
  background: linear-gradient(#91A4FF, #5774FF, #2C50FF);
  .info-bar-item {
      .info-bar-title {
          color: #FFF;
          span {
              color: #FFDC62;
          }
      }
      .info-bar-percent {
          background: #000;
          .info-bar-bg {
              background: linear-gradient(to right, #FF0053, #FFC71C);
              box-shadow: inset 0 0 4px rgba(255, 255, 255, .7);
              .info-bar-number {
                  color: #FFDC62;
              }
              &.inside {
                  .info-bar-number {
                      color: #000;
                  }
              }
          }
      }
  }
  .hr-vertical {
      background: rgba(255, 255, 255, .3);
  }
}

/* VIP Card */
#my-info-member .area-content .vip-card {
  position: relative;
  background-repeat: no-repeat;
  background-position: left top;
  width: 320px;
  min-width: 320px;
  height: 130px;
  overflow: initial;
  background: #EEE;
  border: 1px solid #DBDBDB;
  @media (max-width: 1280px) {
      align-self: center;
  }

  .tag {
    background: rgba(0, 0, 0, .1);
    color: #aaa;
  }

  .level-text {
    width: 190px;
    padding: 1rem 0 0 1.6rem;
    font-size: 1.6rem;
    font-weight: bold;
    -webkit-text-stroke-width: 6px;
    paint-order: stroke fill;
    color: #EEE;
    -webkit-text-stroke-color: #CCC;
  }
}

#my-info-member .area-content .vip-card.now {
  min-width: 320px;
  max-height: 130px;
  border: 0;
  background: linear-gradient(135deg, #0057E3, #FF3BB3);

  .tag {
    border-radius: 7px 0 18px 0;
    background: linear-gradient(#FFF, #C2D8F3);
    border: 1px solid #DBDBDB;
    color: #7384D1;
  }
  .level-text {
      color: #0062FF;
      -webkit-text-stroke-color: #FFF;
  }
}
#my-info-member .area-content .vip-card::after {
  position: absolute;
  right: 20px;
  top: -40px;
  content: '';
  width: 140px;
  min-height: 140px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
#my-info-member .area-content .vip-card::before{
  content: '';
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-image: url("../images/common/vip-card-bg.webp");
  pointer-events: none;
  opacity: .14;
}
#my-info-member .area-content .vip-card.now.level-1::after {
  background-image: url(../images/blue/vip-icon/level-1-now.webp);
}
#my-info-member .area-content .vip-card.now.level-2::after {
  background-image: url(../images/blue/vip-icon/level-2-now.webp);
}
#my-info-member .area-content .vip-card.now.level-3::after {
  background-image: url(../images/blue/vip-icon/level-3-now.webp);
}
#my-info-member .area-content .vip-card.now.level-4::after {
  background-image: url(../images/blue/vip-icon/level-4-now.webp);
}
#my-info-member .area-content .vip-card.now.level-5::after {
  background-image: url(../images/blue/vip-icon/level-5-now.webp);
}
#my-info-member .area-content .vip-card.now.level-6::after {
  background-image: url(../images/blue/vip-icon/level-6-now.webp);
}
#my-info-member .area-content .vip-card.now.level-7::after {
  background-image: url(../images/blue/vip-icon/level-7-now.webp);
}
#my-info-member .area-content .vip-card.now.level-8::after {
  background-image: url(../images/blue/vip-icon/level-8-now.webp);
}
#my-info-member .area-content .vip-card.now.level-9::after {
  background-image: url(../images/blue/vip-icon/level-9-now.webp);
}
#my-info-member .area-content .vip-card.now.level-10::after {
  background-image: url(../images/blue/vip-icon/level-10-now.webp);
}
#my-info-member .area-content .vip-card.now.level-11::after {
  background-image: url(../images/blue/vip-icon/level-11-now.webp);
}
#my-info-member .area-content .vip-card.now.level-12::after {
  background-image: url(../images/blue/vip-icon/level-12-now.webp);
}
#my-info-member .area-content .vip-card.now.level-13::after {
  background-image: url(../images/blue/vip-icon/level-13-now.webp);
}
#my-info-member .area-content .vip-card.now.level-14::after {
  background-image: url(../images/blue/vip-icon/level-14-now.webp);
}
#my-info-member .area-content .vip-card.now.level-15::after {
  background-image: url(../images/blue/vip-icon/level-15-now.webp);
}
#my-info-member .area-content .vip-card.now.level-16::after {
  background-image: url(../images/blue/vip-icon/level-16-now.webp);
}

#my-info-member .area-content .vip-card.old {
  background:linear-gradient(#FFF, #C2D8F3);
  border: 1px solid #C5CEFF;
  .tag {
      background: rgba(0, 0, 0, .1);
      border-color: transparent;
      color: #6E7971;
  }
  .level-text{
      color: #e8ecff;
      -webkit-text-stroke-color: #b6bcd9;
  }
}

#my-info-member .area-vip-now .content .info-content {

  .list-total {
    background: var(--color-gradient-white-02);
    border-bottom: 4px solid var(--color-gray-02);
    box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.20) inset, 0px 2px 4px 0px rgba(0, 0, 0, 0.20);

    .item {

      .title {
        color: var(--color-black-048);
      }

      .amount {
        color: var(--color-blue-01);
      }
    }
  }

  .list-gift {

    .item {
      background: var(--color-gradient-white-02);
      border-bottom: 4px solid var(--color-gray-02);
      box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.20) inset, 0px 2px 4px 0px rgba(0, 0, 0, 0.20);
      @media (max-width: 1280px) {
          height: auto;
      }
      .text {
        .title {
            color: #848484;
        }
        .amount {
          color: var(--color-blue-01);
        }
      }
    }

    .item.level-up .img {
      background: url(../images/blue/vip-info-gift-level-up.webp) no-repeat center;
      background-size: cover;
    }

    .item.week .img {
      background: url(../images/blue/vip-info-gift-week.webp) no-repeat center;
      background-size: cover;
    }

    .item.month .img {
      background: url(../images/blue/vip-info-gift-month.webp) no-repeat center;
      background-size: cover;
    }
  }
}
#my-info-member .area-vip-info .list {
  padding-top: 1.4rem;
}

#my-info-member .area-vip-info .list .item-vip {

  .list-info {
    background: var(--color-black-004);
    box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.12) inset;

    .item-title {
      color: var(--color-blue-gray-02);
    }

    .list-data {

      .field {

        .field-title {
          color: var(--color-black-048);
        }

        .field-amount {
          color: var(--color-blue-01);
          font-weight: bold;
        }
      }
    }
  }
}

#my-info-member .area-content .list .item-vip:nth-last-of-type(1) .vip-card:after {
  background-image: url("../images/blue/vip-icon/level-16.webp");
}
#my-info-member .area-content .list .item-vip:nth-last-of-type(1) .vip-card.old:after {
  background-image: url("../images/blue/vip-icon/level-16-old.webp");
}
#my-info-member .area-content .list .item-vip:nth-last-of-type(1) .vip-card.now:after {
  background-image: url("../images/blue/vip-icon/level-16-now.webp");
}
#my-info-member .area-content .list .item-vip:nth-last-of-type(2) .vip-card:after {
  background-image: url("../images/blue/vip-icon/level-15.webp");
}
#my-info-member .area-content .list .item-vip:nth-last-of-type(2) .vip-card.old:after {
  background-image: url("../images/blue/vip-icon/level-15-old.webp");
}
#my-info-member .area-content .list .item-vip:nth-last-of-type(2) .vip-card.now:after {
  background-image: url("../images/blue/vip-icon/level-15-now.webp");
}
#my-info-member .area-content .list .item-vip:nth-last-of-type(3) .vip-card:after {
  background-image: url("../images/blue/vip-icon/level-14.webp");
}
#my-info-member .area-content .list .item-vip:nth-last-of-type(3) .vip-card.old:after {
  background-image: url("../images/blue/vip-icon/level-14-old.webp");
}
#my-info-member .area-content .list .item-vip:nth-last-of-type(3) .vip-card.now:after {
  background-image: url("../images/blue/vip-icon/level-14-now.webp");
}
#my-info-member .area-content .list .item-vip:nth-last-of-type(4) .vip-card:after {
  background-image: url("../images/blue/vip-icon/level-13.webp");
}
#my-info-member .area-content .list .item-vip:nth-last-of-type(4) .vip-card.old:after {
  background-image: url("../images/blue/vip-icon/level-13-old.webp");
}
#my-info-member .area-content .list .item-vip:nth-last-of-type(4) .vip-card.now:after {
  background-image: url("../images/blue/vip-icon/level-13-now.webp");
}
#my-info-member .area-content .list .item-vip:nth-last-of-type(5) .vip-card:after {
  background-image: url("../images/blue/vip-icon/level-12.webp");
}
#my-info-member .area-content .list .item-vip:nth-last-of-type(5) .vip-card.old:after {
  background-image: url("../images/blue/vip-icon/level-12-old.webp");
}
#my-info-member .area-content .list .item-vip:nth-last-of-type(5) .vip-card.now:after {
  background-image: url("../images/blue/vip-icon/level-12-now.webp");
}
#my-info-member .area-content .list .item-vip:nth-last-of-type(6) .vip-card:after {
  background-image: url("../images/blue/vip-icon/level-11.webp");
}
#my-info-member .area-content .list .item-vip:nth-last-of-type(6) .vip-card.old:after {
  background-image: url("../images/blue/vip-icon/level-11-old.webp");
}
#my-info-member .area-content .list .item-vip:nth-last-of-type(6) .vip-card.now:after {
  background-image: url("../images/blue/vip-icon/level-11-now.webp");
}
#my-info-member .area-content .list .item-vip:nth-last-of-type(7) .vip-card:after {
  background-image: url("../images/blue/vip-icon/level-10.webp");
}
#my-info-member .area-content .list .item-vip:nth-last-of-type(7) .vip-card.old:after {
  background-image: url("../images/blue/vip-icon/level-10-old.webp");
}
#my-info-member .area-content .list .item-vip:nth-last-of-type(7) .vip-card.now:after {
  background-image: url("../images/blue/vip-icon/level-10-now.webp");
}
#my-info-member .area-content .list .item-vip:nth-last-of-type(8) .vip-card:after {
  background-image: url("../images/blue/vip-icon/level-9.webp");
}
#my-info-member .area-content .list .item-vip:nth-last-of-type(8) .vip-card.old:after {
  background-image: url("../images/blue/vip-icon/level-9-old.webp");
}
#my-info-member .area-content .list .item-vip:nth-last-of-type(8) .vip-card.now:after {
  background-image: url("../images/blue/vip-icon/level-9-now.webp");
}
#my-info-member .area-content .list .item-vip:nth-last-of-type(9) .vip-card:after {
  background-image: url("../images/blue/vip-icon/level-8.webp");
}
#my-info-member .area-content .list .item-vip:nth-last-of-type(9) .vip-card.old:after {
  background-image: url("../images/blue/vip-icon/level-8-old.webp");
}
#my-info-member .area-content .list .item-vip:nth-last-of-type(9) .vip-card.now:after {
  background-image: url("../images/blue/vip-icon/level-8-now.webp");
}
#my-info-member .area-content .list .item-vip:nth-last-of-type(10) .vip-card:after {
  background-image: url("../images/blue/vip-icon/level-7.webp");
}
#my-info-member .area-content .list .item-vip:nth-last-of-type(10) .vip-card.old:after {
  background-image: url("../images/blue/vip-icon/level-7-old.webp");
}
#my-info-member .area-content .list .item-vip:nth-last-of-type(10) .vip-card.now:after {
  background-image: url("../images/blue/vip-icon/level-7-now.webp");
}
#my-info-member .area-content .list .item-vip:nth-last-of-type(11) .vip-card:after {
  background-image: url("../images/blue/vip-icon/level-6.webp");
}
#my-info-member .area-content .list .item-vip:nth-last-of-type(11) .vip-card.old:after {
  background-image: url("../images/blue/vip-icon/level-6-old.webp");
}
#my-info-member .area-content .list .item-vip:nth-last-of-type(11) .vip-card.now:after {
  background-image: url("../images/blue/vip-icon/level-6-now.webp");
}
#my-info-member .area-content .list .item-vip:nth-last-of-type(12) .vip-card:after {
  background-image: url("../images/blue/vip-icon/level-5.webp");
}
#my-info-member .area-content .list .item-vip:nth-last-of-type(12) .vip-card.old:after {
  background-image: url("../images/blue/vip-icon/level-5-old.webp");
}
#my-info-member .area-content .list .item-vip:nth-last-of-type(12) .vip-card.now:after {
  background-image: url("../images/blue/vip-icon/level-5-now.webp");
}
#my-info-member .area-content .list .item-vip:nth-last-of-type(13) .vip-card:after {
  background-image: url("../images/blue/vip-icon/level-4.webp");
}
#my-info-member .area-content .list .item-vip:nth-last-of-type(13) .vip-card.old:after {
  background-image: url("../images/blue/vip-icon/level-4-old.webp");
}
#my-info-member .area-content .list .item-vip:nth-last-of-type(13) .vip-card.now:after {
  background-image: url("../images/blue/vip-icon/level-4-now.webp");
}
#my-info-member .area-content .list .item-vip:nth-last-of-type(14) .vip-card:after {
  background-image: url("../images/blue/vip-icon/level-3.webp");
}
#my-info-member .area-content .list .item-vip:nth-last-of-type(14) .vip-card.old:after {
  background-image: url("../images/blue/vip-icon/level-3-old.webp");
}
#my-info-member .area-content .list .item-vip:nth-last-of-type(14) .vip-card.now:after {
  background-image: url("../images/blue/vip-icon/level-3-now.webp");
}
#my-info-member .area-content .list .item-vip:nth-last-of-type(15) .vip-card:after {
  background-image: url("../images/blue/vip-icon/level-2.webp");
}
#my-info-member .area-content .list .item-vip:nth-last-of-type(15) .vip-card.old:after {
  background-image: url("../images/blue/vip-icon/level-2-old.webp");
}
#my-info-member .area-content .list .item-vip:nth-last-of-type(15) .vip-card.now:after {
  background-image: url("../images/blue/vip-icon/level-2-now.webp");
}
#my-info-member .area-content .list .item-vip:nth-last-of-type(16) .vip-card:after {
  background-image: url("../images/blue/vip-icon/level-1.webp");
}
#my-info-member .area-content .list .item-vip:nth-last-of-type(16) .vip-card.old:after {
  background-image: url("../images/blue/vip-icon/level-1-old.webp");
}
#my-info-member .area-content .list .item-vip:nth-last-of-type(16) .vip-card.now:after {
  background-image: url("../images/blue/vip-icon/level-1-now.webp");
}


/* VIP返水率 */
#my-info-member .area-vip-cashback {

  /*-- 返水限制 --*/
  .list-cashback-limit {

    .item {
      background: var(--color-gradient-white-02);
      border-bottom: 4px solid var(--color-gray-02);
      box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.20) inset, 0px 2px 4px 0px rgba(0, 0, 0, 0.20);

      .text {
        color: var(--color-black-048);
      }

      .amount {
        color: var(--color-blue-01);
      }
    }
  }

  /*-- 遊戲返水率 --*/
  .list-table {
    border: 1px solid var(--color-black-012);

    .colum {
      border: 1px solid var(--color-black-004);
    }

    .table-colum-title {
      border-right: 1px solid var(--color-black-020);

      .row {
        background: var(--color-white);
        border: 1px solid var(--color-black-004);
      }

      .row.even {
        background: var(--color-black-004);
      }

      .row.title {
        background: var(--color-black-004);
        color: var(--color-black-048);
      }
    }

    .table-content {

      .content {

        .row {

          .colum {
            background: var(--color-white);
          }

          .colum.now-level {
            background: var(--color-blue-01-020);
          }
        }

        .row.title {

          .colum {
            background: var(--color-black-004);
            color: var(--color-black-048);
          }

          .colum.now-level {
            background: var(--color-blue-01);
            color: var(--color-white);
          }
        }

        .row.even {

          .colum {
            background: var(--color-black-004);
          }

          .colum.now-level {
            background: var(--color-blue-01-020);
          }
        }
      }
    }
  }
}

/*-------------------------我的帳戶 > 基本資料------------------------*/
#my-info-basic .item-field {

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

    .field-name {
      color: var(--color-black-050);
    }
  }

  /* 欄位內容 */
  .field-content {
    background: var(--color-black-004);
    box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.12) inset;

    .data {
      color: var(--color-black-070);
    }

    .no-data {
      color: var(--color-black-032);
    }
  }

  /* 欄位狀態 */
  .field-state.review {
    color: var(--color-orange-01);
  }

  .field-state.success {
    color: var(--color-green-02);
  }

  .field-state.reject {
    color: var(--color-red-01);
  }
}

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

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

    .data {
      color: var(--color-black-048);
    }
  }
}

/*-------------------------------存取款-------------------------------*/
/*-------------------------------存款-------------------------------*/
#deposit .page-state {

  .remark {
    color: var(--color-black-070);
  }
}

/* 實名驗證審核中狀態 */
#deposit .page-state.review .verify-item-review .img {
  background: url(../images/blue/icon-review.gif) no-repeat center;
  background-size: 72px;
  opacity: .48;
}

/* 實名驗證已拒絕狀態 */
#deposit .page-state.reject .verify-item-reject .img {
  background: url(../images/blue/icon-reject.gif) no-repeat center;
  background-size: 72px;
  opacity: .48;
}

/*------------------銀行卡 & 三方存款-------------------*/
/* 渠道資訊 */
.input-area .channel-info {
  background: var(--color-black-004);
  box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.12) inset;

  .field-title {

    .field-name {
      color: var(--color-black-032);
    }
  }
}

/*-----------------------虛擬貨幣-----------------------*/
/* 平台錢包資訊 */
.wallet-info {
  background: var(--color-black-004);
  box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.12) inset;

  .field-title {

    .field-name {
      color: var(--color-black-032);
    }
  }

  .text {
    font-weight: bold;
  }
}

#withdraw-popup-amount .input-remark .rate,
#game-surface-popup-deposit .input-remark .rate,
#deposit .input-remark .rate {

  .amount-convert {
    color: var(--color-blue-01);
  }
}
/* 存款方式按鈕 */
#deposit .deposit-btn .btn-list, #game-surface-popup-deposit .deposit-btn .btn-list {
  background: var(--color-black-004);
  box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.12) inset;
}
#deposit .deposit-btn .btn-list.bank-transfer .btn-img, #game-surface-popup-deposit .deposit-btn .btn-list.bank-transfer .btn-img {
  background: url(../images/blue/deposit-icon-bank-transfer.svg) no-repeat center top;
}
#deposit .deposit-btn .btn-list.atm .btn-img, #game-surface-popup-deposit .deposit-btn .btn-list.atm .btn-img {
  background: url(../images/blue/deposit-icon-atm.svg) no-repeat center top;
}
#deposit .deposit-btn .btn-list.crypto .btn-img, #game-surface-popup-deposit .deposit-btn .btn-list.crypto .btn-img {
  background: url(../images/blue/deposit-icon-crypto.svg) no-repeat center top;
}
#deposit .deposit-btn .btn-list.credit-card .btn-img, #game-surface-popup-deposit .deposit-btn .btn-list.credit-card .btn-img {
  background: url(../images/blue/deposit-icon-credit-card.svg) no-repeat center top;
}
#deposit .deposit-btn .btn-list.store-pay .btn-img, #game-surface-popup-deposit .deposit-btn .btn-list.store-pay .btn-img {
  background: url(../images/blue/deposit-icon-store-pay.svg) no-repeat center top;
}
#deposit .deposit-btn .btn-list.qr-code .btn-img, #game-surface-popup-deposit .deposit-btn .btn-list.qr-code .btn-img {
  background: url(../images/blue/deposit-icon-qr-code.svg) no-repeat center top;
}
#deposit .deposit-btn .btn-list.direct-connection .btn-img, #game-surface-popup-deposit .deposit-btn .btn-list.direct-connection .btn-img {
  background: url(../images/blue/deposit-icon-direct-connection.svg) no-repeat center top;
}
#deposit .deposit-btn .btn-list .btn-text, #game-surface-popup-deposit .deposit-btn .btn-list .btn-text {
  color: var(--color-blue-gray-03);
}
#deposit .deposit-btn .btn-list:hover, #deposit .deposit-btn .btn-list.active, #game-surface-popup-deposit .deposit-btn .btn-list:hover, #game-surface-popup-deposit .deposit-btn .btn-list.active {
  background: var(--color-gradient-blue-01);
}
#deposit .deposit-btn .btn-list:hover .btn-img, #deposit .deposit-btn .btn-list.active .btn-img, #game-surface-popup-deposit .deposit-btn .btn-list:hover .btn-img, #game-surface-popup-deposit .deposit-btn .btn-list.active .btn-img {
  background-position: center bottom;
}
#deposit .deposit-btn .btn-list:hover .btn-text, #deposit .deposit-btn .btn-list.active .btn-text, #game-surface-popup-deposit .deposit-btn .btn-list:hover .btn-text, #game-surface-popup-deposit .deposit-btn .btn-list.active .btn-text {
  color: #FFF;
}
#deposit .input-content input.input-text, #game-surface-popup-deposit .input-content input.input-text {
  color: var(--color-yellow-02);
}
#deposit .input-content .clear-btn, #game-surface-popup-deposit .input-content .clear-btn {
  background: var(--color-black-008);
  color: #000;
  transition: all 0.3s ease-in-out;
}
#deposit .input-content .clear-btn:hover, #game-surface-popup-deposit .input-content .clear-btn:hover {
  opacity: 0.8;
}

#deposit .card,
#game-surface-popup-deposit .card {
  background: url(../images/blue/card-bank.webp) no-repeat center;
  background-size: cover;
  color: #FFF;
}
#deposit .card .card-title .tag,
#game-surface-popup-deposit .card .card-title .tag {
  color: #FFF;
}
#deposit .card .card-title .tag.success,
#game-surface-popup-deposit .card .card-title .tag.success {
  background: #009865;
}
#deposit .card .card-title .tag.fail,
#game-surface-popup-deposit .card .card-title .tag.fail {
  background: #B41D1D;
}
#deposit .card .card-title .tag.review,
#game-surface-popup-deposit .card .card-title .tag.review {
  background: #F95B00;
}
#deposit .card .card-content .card-account,
#game-surface-popup-deposit .card .card-content .card-account {
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.4);
}

/* 參加存款優惠 */
#deposit, #game-surface-popup-deposit {
  .deposit-offers {
      .info-content {
          background: var(--color-black-004);
          box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.12) inset;
          border-radius: 4px;
          .offers-list {
              border-color: var(--color-black-008);
              .offers-title {
                  color: var(--color-blue-gray-03);
                  transition: all .3s;
                  input {
                      background: #FFF;
                      border-color: var(--color-blue-01-020);
                      &:checked {
                          border-color: var(--color-blue-01);
                          &:before {
                              background: var(--color-gradient-blue-02);
                          }
                      }
                  }
              }
              .offers-remark {
                  color: #A4A4A4;
              }
              .offers-amount {
                  color: var(--color-orange-02);
              }f
              &:hover, &.active {
                  .offers-title {
                      color: var(--color-blue-02);
                  }
              }
          }
      }
  }
}

/*-------------------------------取款-------------------------------*/
#withdraw .wallet {
  background: var(--color-black-004);
  box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.12) inset;
}
#withdraw .wallet .wallet-text {
  color: #9B9B9B;
}
#withdraw .wallet .wallet-text:before {
  content: "";
  display: block;
  width: 20px;
  height: 20px;
  background: url(../images/blue/icon-wallet-balance.svg) no-repeat left center;
  background-size: cover;
}
#withdraw .wallet .wallet-amount {
  color: var(--color-blue-01);
}

#withdraw .list-function .btn-refresh {
  background: var(--color-white-008);
}

#withdraw .list-function .btn-refresh:hover {
  background: var(--color-white-012);
}

#withdraw .card-list {
  color: var(--color-white-048);
}

/* 無資料狀態 */
#withdraw .verity-state.nodata .img {
  background: url(../images/blue/icon-nodata.gif) no-repeat center;
  background-size: 72px;
  opacity: .48;
}

#withdraw .verity-state {

  .remark {
    color: var(--color-black-070);
  }
}

/* 實名驗證審核中狀態 */
#withdraw .verity-state.review .img {
  background: url(../images/blue/icon-review.gif) no-repeat center;
  background-size: 72px;
  opacity: .48;
}

/* 實名驗證已拒絕狀態 */
#withdraw .verity-state.reject .img {
  background: url(../images/blue/icon-reject.gif) no-repeat center;
  background-size: 72px;
  opacity: .48;
}

/* 按鈕 - 新增取款方式 */
#withdraw .content-title .list-function .btn-function {
  color: var(--color-white);
  background: var(--color-gradient-blue-01);
  border-bottom: 3px outset var(--color-blue-02);
  box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.20) inset, 0px 2px 4px 0px rgba(0, 0, 0, 0.20);

  &:active {
    opacity: .7;
  }

  &:hover {
    background: var(--color-gradient-blue-03);
    border-bottom: 3px outset var(--color-blue-03);
    box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.20) inset, 0px 2px 2px 0px rgba(0, 0, 0, 0.24);
  }
  &.disable {
    background: var(--color-black-012);
    color: var(--color-black-032);
    box-shadow: none;
    border: none;
  }
}

/* 取款方式 */
#withdraw-popup-amount .popup-content .card {
  background: var(--color-white);
  border-bottom: 3px solid var(--color-gray-01);
  border-top: 1px solid var(--color-black-008);
  box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.20) inset, 0px 2px 4px 0px rgba(0, 0, 0, 0.20);

  .card-title {
    background: var(--color-gradient-white-02);
    border-bottom: 1px solid var(--color-black-008);

    .icon {
      color: var(--color-black-032);
    }
  }

  .field {

    .field-title {
      color: var(--color-black-048);
    }

    /* 審核中 */
    .tag-review {
      color: var(--color-orange-01);
      font-weight: bold;
      padding: 0;
    }

    /* 審核失敗 */
    .tag-fail {
      color: var(--color-red-01);
      font-weight: bold;
      padding: 0;
    }

    /* 審核成功 */
    .tag-success {
      color: var(--color-green-02);
      font-weight: bold;
      padding: 0;
    }
  }
}

#withdraw .card-list .card {

  &:hover {
    border-bottom: 3px solid var(--color-gray-03);
    box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.20) inset, 0px 2px 2px 0px rgba(0, 0, 0, 0.24);
  }
}

/* 銀行卡資訊 */
#withdraw.bankcard .card-list .card:hover {
  border-bottom: 3px solid var(--color-gray-01);
  box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.20) inset, 0px 2px 4px 0px rgba(0, 0, 0, 0.20);
}


#withdraw .card {
  background: url(../images/blue/card-bank.webp) no-repeat center;
  background-size: cover;
  color: #FFF;
}
#withdraw .card .card-title .tag {
  color: #FFF;
}
#withdraw .card .card-title .tag.success {
  background: #009865;
}
#withdraw .card .card-title .tag.fail {
  background: #B41D1D;
}
#withdraw .card .card-title .tag.review {
  background: #F95B00;
}
#withdraw .card .card-content .card-account {
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.4);
}
#withdraw .input-content .input-text {
  color: var(--color-blue-01);
}
#withdraw .input-content .clear-btn {
  background: var(--color-white-048);
  color: #000;
  transition: all 0.3s ease-in-out;
}
#withdraw .input-content .clear-btn:hover {
  opacity: 0.8;
}
#withdraw .input-remark {
  color: #aaa;
}
#withdraw .input-remark .amount-convert {
  color: var(--color-blue-01);
}

/*-------------------------彈窗-實名驗證-------------------------*/
#withdraw-popup-verify .input-upload {
  background: var(--color-black-004);
  box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.12) inset;

  .upload-number {
    color: var(--color-black-048);
  }

  .upload-text {
    color: var(--color-black-070);
  }

  .upload-text.nodata {
    color: var(--color-black-032);
  }
}

/*------------------------彈窗-添加取款方式-----------------------*/
#withdraw-popup-add .remark {
  color: var(--color-red-01);
}

/*------------------------------聊天室-----------------------------*/
.area-menu .btn-menu.upper-agent {

  .icon {
    background: url(../images/blue/icon-upper-agent-default.webp) no-repeat center;
    background-size: cover;
  }
}

.area-menu .btn-menu.upper-agent.active {

  .icon {
    background: url(../images/blue/icon-upper-agent-active.webp) no-repeat center;
  }

  .text {
    color: var(--color-blue-01);
  }
}

.area-menu .btn-menu.upper-member {

  .icon {
    background: url(../images/blue/icon-upper-member-default.webp) no-repeat center;
    background-size: cover;
  }
}

.area-menu .btn-menu.upper-member.active {

  .icon {
    background: url(../images/blue/icon-upper-member-active.webp) no-repeat center;
  }

  .text {
    color: var(--color-blue-01);
  }
}

.area-menu .btn-menu.under-member {

  .icon {
    background: url(../images/blue/icon-under-member-default.webp) no-repeat center;
    background-size: cover;
  }
}

.area-menu .btn-menu.under-member.active {

  .icon {
    background: url(../images/blue/icon-under-member-active.webp) no-repeat center;
  }

  .text {
    color: var(--color-blue-01);
  }
}

.area-menu .btn-menu.support-service {

  .icon {
    background: url(../images/blue/icon-support-service-default.webp) no-repeat center;
    background-size: cover;
  }
}

.area-menu .btn-menu.support-service.active {

  .icon {
    background: url(../images/blue/icon-support-service-active.webp) no-repeat center;
  }

  .text {
    color: var(--color-blue-01);
  }
}

/* 訊息 - 時間 */
.area-content.chatroom .msg .text-time {
  background: var(--color-black-006);
  color: var(--color-black-032);
}

/* 訊息 - 對方 */
.area-content.chatroom .msg.other-side .msg-content .msg-text {
  background: var(--color-white);
  border: 2px inset var(--color-black-012);
  color: var(--color-black-070);
}

/* 訊息 - 自己 */
.area-content.chatroom .msg.own .msg-content .msg-text {
  background: var(--color-black-008);
  color: var(--color-black-070);
}

.area-content.chatroom .msg .msg-area .user-name {
  color: var(--color-black-048);
}

.area-content.chatroom .msg-area .msg-content .msg-time {
  color: var(--color-black-032);
}

#chatroom-under-member .list-msg .msg-item .avatar,
.area-content.chatroom .avatar {
  outline: 2px solid var(--color-black-012);
}

/* 操作介面 */
.area-content.chatroom .chat-surface {
  background: var(--color-gradient-blue-white-02);
  border: 1px solid var(--color-black-008);
  box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.20) inset, 0px 2px 4px 0px rgba(0, 0, 0, 0.20);
}

.area-content.chatroom .chat-surface.disable {
  opacity: .6;
}

.area-content.chatroom .chat-surface .btn-upload-img {
  background: url(../images/blue/chatroom-upload-image.webp) no-repeat center;
  background-size: cover;

  &:hover {
    opacity: .8;
  }
}

/*--------------------客服中心--------------------*/
#support-service .msg.other-side .avatar {
  background: url(../../../images/common/service-avatar.webp) no-repeat center;
  background-size: cover;
}

#support-service .chat-content .msg-welcome {
  color: var(--color-black-70);
}

#support-service .page-content-list .chat-state-wait .img {
  background: url(../images/blue/support-service-wait.gif) no-repeat center;
  background-size: 72px;
  opacity: .48;
}

#support-service .page-content-list .chat-state-wait .remark {
  color: var(--color-black-070);
}

/*---------------聊天室 > 下層會員----------------*/
#chatroom-under-member .page-content-list .area-page-content {
  background: var(--color-white);
  box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.06) inset, 0px 0px 20px 0px #E5F0F8 inset;
  border: 2px solid var(--color-black-006);

  .area-content {
    background: none;
    box-shadow: none;
    border: 0;
  }
}

#chatroom-under-member .area-page-content .list-msg {
  padding: .2rem .4rem .2rem .2rem;
}

#chatroom-under-member .area-page-content .list-msg .msg-item {
  background: var(--color-black-004);
  box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.12) inset;

  &:hover {
    background: var(--color-black-006);
    box-shadow: -2px -2px 0px 0px rgba(75, 106, 255, 0.48) inset, 2px 2px 0px 0px rgba(75, 106, 255, 0.48) inset, 0px 0px 6px 0px rgba(0, 0, 0, 0.12) inset;
  }

  .msg-text,
  .msg-time {
    color: var(--color-black-032);
  }

  .msg-count {
    background: var(--color-red-01);
    color: var(--color-white);
  }
}

#chatroom-under-member .area-page-content .list-msg .msg-item.active {
  background: var(--color-gradient-blue-white-01);
  border-bottom: 2px solid var(--color-gray-01);
  box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.20) inset, 0px 2px 4px 0px rgba(0, 0, 0, 0.20);
}

/*----------------------------優惠清單----------------------------*/
#discount-detail .area-other .list .item,
#discount .area-content .list-discount .item {
  background: var(--color-white);
  border-bottom: 3px solid var(--color-gray-02);
  box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.20) inset, 0px 2px 4px 0px rgba(0, 0, 0, 0.20);
  transition: all .3s;
  .btn-more {
    background: linear-gradient(to bottom, #4b6aff, #8197ff 12%, #2a4fff 30%, #738bff, #8197ff, #0025d7);
    background-size: 100% 300%;
    transition: all .3s;
  }
  &:hover {
    background: var(--color-gradient-blue-white-02);
    border-bottom: 3px solid var(--color-gray-03);
    box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.20) inset, 0px 2px 2px 0px rgba(0, 0, 0, 0.24);
    .btn-more {
      background-position: 0 100%;
    }
  }

  .info-content {

    .date {
      color: var(--color-black-048);
    }
  }
}

/*-------------------------------優惠詳情----------------------------*/
#discount-detail .page-content-list .area-other {
  background: var(--color-white);
  box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.06) inset, 0px 0px 20px 0px #E5F0F8 inset;
  border: 2px solid var(--color-black-006);

  .area-title {
    color: var(--color-blue-gray-02);
  }
}

#discount-detail .area-other .btn-more {
  color: var(--color-black-048);
  background: var(--color-gradient-blue-white-01);
  border-bottom: 3px solid var(--color-gray-01);
  box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.20) inset, 0px 2px 4px 0px rgba(0, 0, 0, 0.20);

  &:hover {
    background: var(--color-gradient-blue-white-01);
    border-bottom: 3px solid var(--color-gray-02);
    box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.20) inset, 0px 2px 2px 0px rgba(0, 0, 0, 0.24);
  }

  &:active {
    opacity: .7;
  }
}

#discount-detail .area-content .discount-title {

  .title {
    color: var(--color-black-070);
  }

  .date {
    color: var(--color-black-032);
  }

  .btn-apply {
    color: var(--color-white);
    background: var(--color-gradient-blue-01);
    border-bottom: 3px outset var(--color-blue-02);
    box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.20) inset, 0px 2px 4px 0px rgba(0, 0, 0, 0.20);
    font-weight: bold;

    &:active {
      opacity: .7;
    }

    &:hover {
      background: var(--color-gradient-blue-03);
      border-bottom: 3px outset var(--color-blue-03);
      box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.20) inset, 0px 2px 2px 0px rgba(0, 0, 0, 0.24);
    }
  }

  .btn-apply.applied,
  .btn-apply.ineligible {
    color: var(--color-black-032);
    background: var(--color-black-012);
    box-shadow: none;
    border: none;

    &:active {
      opacity: 1;
    }
  }
}

/*------- 優惠詳情 > 優惠活動：Jackpot中獎清單 --------*/
#discount-detail .discount-jp {
  background: var(--G-blue, linear-gradient(180deg, #8097FF 0%, #95A8FF 2.96%, #4963DF 20.24%, #B1BEFF 48%, #5976FF 73.5%, #4664F2 100%));

  /* 標題 */
  .area-title {
    background: linear-gradient(180deg, #738CFF 0%, #9CADFF 13.62%, #4969FF 48.12%, #4963DC 100%);

    .list-text {

      .text {
        -webkit-text-stroke-width: 5px;
        -webkit-text-stroke-color: white;
        color: #FF8634;
        paint-order: stroke fill;
      }
    }
  }

  /* 資料清單 */
  .area-data {
    background: #F7F7F7;
    color: #502700;

    .hr-vertical {
      background: var(--color-black-008);
    }

    .item {

      .user {

        .avatar {
          outline: 2px solid #FFB800;
        }
      }
    }

    .hr {
      background: var(--color-black-008);
    }
  }
}

/*-------------------------------平台支持----------------------------*/
.area-menu .btn-menu.support-service .icon {
  background: url(../images/blue/icon-support-service-default.webp) no-repeat center;
  background-size: cover;
}

.area-menu .btn-menu.support-service.active {

  .icon {
    background: url(../images/blue/icon-support-service-active.webp) no-repeat center;
  }

  .text {
    color: var(--color-blue-01);
  }
}

.area-menu .btn-menu.support-qa .icon {
  background: url(../images/blue/icon-support-qa-default.webp) no-repeat center;
  background-size: cover;
}

.area-menu .btn-menu.support-qa.active {

  .icon {
    background: url(../images/blue/icon-support-qa-active.webp) no-repeat center;
  }

  .text {
    color: var(--color-blue-01);
  }
}

.area-menu .btn-menu.rule-privacy .icon {
  background: url(../images/blue/icon-rule-privacy-default.webp) no-repeat center;
  background-size: cover;
}

.area-menu .btn-menu.rule-privacy.active {

  .icon {
    background: url(../images/blue/icon-rule-privacy-active.webp) no-repeat center;
  }

  .text {
    color: var(--color-blue-01);
  }
}

.area-menu .btn-menu.rule-service .icon {
  background: url(../images/blue/icon-rule-service-default.webp) no-repeat center;
  background-size: cover;
}

.area-menu .btn-menu.rule-service.active {

  .icon {
    background: url(../images/blue/icon-rule-service-active.webp) no-repeat center;
  }

  .text {
    color: var(--color-blue-01);
  }
}

.area-menu .btn-menu.rule-gaming .icon {
  background: url(../images/blue/icon-rule-gaming-default.webp) no-repeat center;
  background-size: cover;
}

.area-menu .btn-menu.rule-gaming.active {

  .icon {
    background: url(../images/blue/icon-rule-gaming-active.webp) no-repeat center;
  }

  .text {
    color: var(--color-blue-01);
  }
}

/*-----------------------------常見問題------------------------------*/
#support-qa, #support-disclaimer {
  .item-content .list-qa .item-qa {
    background: linear-gradient(180deg, #FFF 0%, #F8F8F8 18.54%, #EFEFEF 100%);
    box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.20) inset, 0px 2px 2px 0px rgba(0, 0, 0, 0.24);
    border-bottom: 4px solid var(--color-gray-02);

    &:hover {
      border-bottom: 4px solid var(--color-gray-03);
    }

    &:active {

      .title {
        opacity: .7;
      }
    }
  }

  .area-content .item-content .title {
    color: var(--color-blue-01);
  }

  .list-qa .item-qa .title .text {
    color: var(--color-black-070);
  }

  .list-qa .item-qa .content {
    color: var(--color-black-048);
  }
}

/*------------------------404 & ip限制 & 維護中----------------------*/
.support-bg {
  background: url(../images/blue/support/support-bg.webp) repeat center;
  background-size: cover;
}

/*----------------404----------------*/
#support-404 .content .img {
  display: flex;
  justify-content: center;
  align-items: center;
}

#support-404 .content .img .woman {
  min-width: 26rem;
  height: 26rem;
  background: url(../images/common/support/woman-404.webp) no-repeat center;
  background-size: 100%;
}

#support-404 .content .img .text {
  background: var(--color-gradient-blue-01);
  background: -webkit-linear-gradient(--color-gradient-blue-01);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  padding: 4rem 0 0 0;
}

#support-404 .content .title-text {
  color: var(--color-blue-05);
}

#support-404 .content .btn-back {
  color: var(--color-black-048);
  background: var(--color-gradient-blue-white-01);
  border-bottom: 3px solid var(--color-gray-01);
  box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.20) inset, 0px 2px 4px 0px rgba(0, 0, 0, 0.20);

  &:hover {
    background: var(--color-gradient-blue-white-01);
    border-bottom: 3px solid var(--color-gray-02);
    box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.20) inset, 0px 2px 2px 0px rgba(0, 0, 0, 0.24);
  }

  &:active {
    opacity: .7;
  }
}

/*----------------IP限制----------------*/
#support-ipban .content .img {
  display: flex;
  justify-content: center;
  align-items: center;
}

#support-ipban .content .img .woman {
  width: 26rem;
  height: 26rem;
  background: url(../images/common/support/woman-ip.webp) no-repeat center;
  background-size: 100%;
}

#support-ipban .content .img .text {
  background: var(--color-gradient-blue-01);
  background: -webkit-linear-gradient(--color-gradient-blue-01);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  padding: 2rem 0 0 0;
}

/*----------------維護中----------------*/
#support-maintain .content .img {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 2rem;
}

#support-maintain .content .img .woman {
  width: 26rem;
  height: 26rem;
  background: url(../images/common/support/woman-in.webp) no-repeat center;
  background-size: 100%;
}

#support-maintain .content .img .text {
  background: var(--color-gradient-blue-01);
  background: -webkit-linear-gradient(--color-gradient-blue-01);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  text-align: center;
  padding: 4rem 0 0 0;
}

#support-maintain .content .title-text {
  color: var(--color-blue-05)
}

/*----------------Error----------------*/
#support-error .content .img {
  display: flex;
  justify-content: center;
  align-items: center;
}

#support-error .content .img .woman {
  width: 26rem;
  height: 26rem;
  background: url(../images/blue/support/woman-error.webp) no-repeat center;
  background-size: 100%;
}

#support-error .content .img .box-text .title {
  background: var(--color-gradient-blue-01);
  background: -webkit-linear-gradient(--color-gradient-blue-01);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  padding: 0rem 0 0 0;
}

#support-error .content .img .box-text .text {
  color: var(--color-blue-05)
}

#support-error .content .btn-back {
  color: var(--color-black-048);
  background: var(--color-gradient-blue-white-01);
  border-bottom: 3px solid var(--color-gray-01);
  box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.20) inset, 0px 2px 4px 0px rgba(0, 0, 0, 0.20);

  &:hover {
    background: var(--color-gradient-blue-white-01);
    border-bottom: 3px solid var(--color-gray-02);
    box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.20) inset, 0px 2px 2px 0px rgba(0, 0, 0, 0.24);
  }

  &:active {
    opacity: .7;
  }
}

/*-----------------------------投注紀錄-----------------------------*/
#bet-record .area-content .content-title .list-total {
  background: var(--color-gradient-white-02);
  border-bottom: 4px solid var(--color-gray-02);
  box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.20) inset, 0px 2px 4px 0px rgba(0, 0, 0, 0.20);

  .item {

    .field-title {
      color: var(--color-black-048);
    }

    .field-content {
      color: var(--color-blue-01);
    }
  }
}

#bet-record .item-content .field.total-winlose.win .amount,
#bet-record .item.total-winlose.win .field-content {
  color: var(--color-green-02);
}

#bet-record .item-content .field.total-winlose.lose .amount,
#bet-record .item.total-winlose.lose .field-content {
  color: var(--color-red-01);
}

/* 搜尋遊戲單號 */
#bet-record .content-title .input-search {
  background: var(--color-black-004);
  box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.12) inset;

  .icon-search {
    color: var(--color-black-032);
  }

  &:hover {
    background: var(--color-black-006);
  }
}

#bet-record .table-bet-record .item {
  background: var(--color-white);
  border-bottom: 3px solid var(--color-gray-01);
  border-top: 1px solid var(--color-black-008);
  box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.20) inset, 0px 2px 4px 0px rgba(0, 0, 0, 0.20);

  .item-title {
    background: var(--color-gradient-white-02);
    border-bottom: var(--color-black-008);

    .data-count {
      color: var(--color-black-048);
    }
  }

  .item-content {

    .field {

      .title {
        color: var(--color-black-048);
      }
    }
  }

  &:active {
    opacity: .7;
  }

  &:hover {
    border-bottom: 3px solid var(--color-gray-03);
    box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.20) inset, 0px 2px 2px 0px rgba(0, 0, 0, 0.24);
  }
}
#bet-record .list-remark .data-count {
  color: var(--color-blue-gray-02);
}

/*-----------------------------投注詳情-----------------------------*/
#bet-record-detail .content-title .game-name {
  color: var(--color-blue-01);
}

#bet-record-detail .content-title .data-count {
  color: var(--color-blue-gray-02);
}

#bet-record-detail .table .row.win .colum.winlose {
  color: var(--color-green-02);
}

#bet-record-detail .table .row.lose .colum.winlose {
  color: var(--color-red-01);
}

/*-----------------------------即時返水-----------------------------*/
#instant-rebate .area-content .content-title .list-total {
  background: var(--color-gradient-white-02);
  border-bottom: 4px solid var(--color-gray-02);
  box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.20) inset, 0px 2px 4px 0px rgba(0, 0, 0, 0.20);

  .item {

    .field-title {
      color: var(--color-black-048);
    }

    .field-content {
      color: var(--color-blue-01);
    }
  }
}


#instant-rebate .table-instant-rebate .item {
  background: var(--color-white);
  border-bottom: 3px solid var(--color-gray-01);
  border-top: 1px solid var(--color-black-008);
  box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.20) inset, 0px 2px 4px 0px rgba(0, 0, 0, 0.20);

  .item-title {
    background: var(--color-gradient-white-02);
    border-bottom: var(--color-black-008);

    .data-count {
      color: var(--color-black-048);
    }
  }

  .item-content {

    .field {

      .title {
        color: var(--color-black-048);
      }
    }
  }

  &:active {
    opacity: .7;
  }

  &:hover {
    border-bottom: 3px solid var(--color-gray-03);
    box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.20) inset, 0px 2px 2px 0px rgba(0, 0, 0, 0.24);
  }
}

/*----------------------------彈窗-歡迎----------------------------*/
/* 關閉按鈕 */
#index-welcome .btn-close {
  background: var(--color-black-012);
}

/*---------------------------消息相關------------------------------*/
.list-news .item {
  background: var(--color-gradient-white-02);
  border-bottom: 3px solid var(--color-gray-01);
  box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.20) inset, 0px 0px 4px 0px rgba(0, 0, 0, 0.20);

  &:hover {
    border-bottom: 3px solid var(--color-gray-03);
    box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.20) inset, 0px 2px 2px 0px rgba(0, 0, 0, 0.24);
  }

  &:active {
    opacity: .7;
  }
}

.list-news .item.active {
  background: var(--color-gradient-blue-white-02);
  border-bottom: 3px solid var(--color-blue-gray-03);
  box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.20) inset, 0px 2px 4px 0px rgba(0, 0, 0, 0.20);
}

.list-news .item .date {
  color: var(--color-black-032);
}

.news-content .title {

  .date {
    color: var(--color-black-048);
  }

  .text {
    color: var(--color-blue-01);
  }
}

/*---------------------公告---------------------*/
#news-notify .list-content .list-news .item .icon {
  display: none;
}

/*--------------------站內信--------------------*/
#news-mailbox .list-content .list-news .item .icon {
  background: url(../images/blue/icon-mailbox-unread.webp) no-repeat center;
  background-size: cover;
}

#news-mailbox .list-content .list-news .item.read .icon {
  background: url(../images/blue/icon-mailbox-read.webp) no-repeat center;
  background-size: cover;
}

/*---------------------------我的推廣------------------------------*/
.area-menu.promote .btn-back-my {
  color: var(--color-black-048);

  &:active {
    opacity: .7;
  }

  &:hover {
    color: var(--color-black-070);
  }
}

.area-menu.promote .btn-menu.overview .icon {
  background: url(../images/blue/icon-promote-overview-default.webp) no-repeat center;
  background-size: cover;
}

.area-menu.promote .btn-menu.overview.active {

  .icon {
    background: url(../images/blue/icon-promote-overview-active.webp) no-repeat center;
  }

  .text {
    color: var(--color-blue-01);
  }
}

.area-menu.promote .btn-menu.tutorial .icon {
  background: url(../images/blue/icon-promote-tutorial-default.webp) no-repeat center;
  background-size: cover;
}

.area-menu.promote .btn-menu.tutorial.active {

  .icon {
    background: url(../images/blue/icon-promote-tutorial-active.webp) no-repeat center;
  }

  .text {
    color: var(--color-blue01);
  }
}

.area-menu.promote .btn-menu.rule .icon {
  background: url(../images/blue/icon-promote-rule-default.webp) no-repeat center;
  background-size: cover;
}

.area-menu.promote .btn-menu.rule.active {

  .icon {
    background: url(../images/blue/icon-promote-rule-active.webp) no-repeat center;
  }

  .text {
    color: var(--color-blue-01);
  }
}

.area-menu.promote .btn-menu.achievement .icon {
  background: url(../images/blue/icon-promote-achievement-default.webp) no-repeat center;
  background-size: cover;
}

.area-menu.promote .btn-menu.achievement.active {

  .icon {
    background: url(../images/blue/icon-promote-achievement-active.webp) no-repeat center;
  }

  .text {
    color: var(--color-blue-01);
  }
}

.area-menu.promote .btn-menu.team .icon {
  background: url(../images/blue/icon-promote-team-default.webp) no-repeat center;
  background-size: cover;
}

.area-menu.promote .btn-menu.team.active {

  .icon {
    background: url(../images/blue/icon-promote-team-active.webp) no-repeat center;
  }

  .text {
    color: var(--color-blue-01);
  }
}

/*-----------------------我的推廣 > 推廣總覽------------------------*/
#promote-overview .area-content .area-title {
  color: var(--color-blue-01);
}

#promote-overview .area-content .area-receive-award {
  background: var(--color-gradient-blue-white-03);
  border-bottom: 4px solid var(--color-gray-01);
  box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.20) inset, 0px 2px 4px 0px rgba(0, 0, 0, 0.20);

  .img-icon {
    background: url(../images/blue/promote-icon-award.svg) no-repeat center;
    background-size: contain;
  }

  .content {

    .title {
      color: var(--color-black-070);
    }

    .amount {
      color: var(--color-blue-01);
    }
  }

  .btn-receive {
    color: var(--color-white);
    background: var(--color-gradient-blue-01);
    border-bottom: 3px outset var(--color-blue-02);
    box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.20) inset, 0px 2px 4px 0px rgba(0, 0, 0, 0.20);

    &:active {
      opacity: .7;
    }

    &:hover {
      background: var(--color-gradient-blue-03);
      border-bottom: 3px outset var(--color-blue-03);
      box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.20) inset, 0px 2px 2px 0px rgba(0, 0, 0, 0.24);
    }
    &.disabled {
      pointer-events: none;
      background: var(--color-black-012);
      color: var(--color-black-032);
      box-shadow: none;
      border: none;
    }
  }
}

#promote-overview .area-total .list-data {

  .item {
    background: var(--color-white);
    border-bottom: 3px solid var(--color-gray-01);
    border-top: 1px solid var(--color-black-008);
    box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.20) inset, 0px 2px 4px 0px rgba(0, 0, 0, 0.20);

    .item-title {
      background: var(--color-gradient-white-02);
      border-bottom: 1px solid var(--color-black-008);

      .content-text {
        color: var(--color-blue-01);
      }
    }

    .item-content {

      .field {

        .field-title {
          color: var(--color-black-048);
        }
      }

    }
  }
}

#promote-overview .area-promote-method .list-method {

  .item {
    background: var(--color-black-004);
    box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.18) inset;

    .title {
      color: var(--color-black-048);
    }
  }

  .item.link .title .icon {
    background: url(../images/blue/promote-icon-link.webp) no-repeat center;
    background-size: cover;
  }

  .item.code-number .title .icon {
    background: url(../images/blue/promote-icon-referralcode.webp) no-repeat center;
    background-size: cover;
  }

  .item.qrcode .title .icon {
    background: url(../images/blue/promote-icon-qrcode.webp) no-repeat center;
    background-size: cover;
  }

  .btn-option {
    background: var(--color-gradient-blue-gray-01);
    border-bottom: 3px solid var(--color-blue-gray-04);
    color: var(--color-white);
    box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.20) inset, 0px 2px 4px 0px rgba(0, 0, 0, 0.20);

    .btn-text {
      color: var(--color-white);
    }

    &:active {
      opacity: .7;
    }

    &:hover {
      background: var(--color-gradient-blue-gray-02);
      border-bottom: 3px solid var(--color-blue-gray-05);
      box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.20) inset, 0px 2px 2px 0px rgba(0, 0, 0, 0.24);
    }
  }
}

#promote-overview .area-promote-method .area-qrcode {
  background: var(--color-black-004);
  box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.18) inset;
}

/*-----------------------------我的推廣 > 推廣教程------------------------------*/
#promote-tutorial .item-content .list-qa .item-qa {
  background: linear-gradient(180deg, #FFF 0%, #F8F8F8 18.54%, #EFEFEF 100%);
  box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.20) inset, 0px 2px 2px 0px rgba(0, 0, 0, 0.24);
  border-bottom: 4px solid var(--color-gray-02);

  &:hover {
    border-bottom: 4px solid var(--color-gray-03);
  }

  &:active {

    .title {
      opacity: .7;
    }
  }
}

#promote-tutorial .area-content .item-content .title {
  color: var(--color-blue-01);
}

#promote-tutorial .list-qa .item-qa .title .text {
  color: var(--color-black-070);
}

#promote-tutorial .list-qa .item-qa .content {
  color: var(--color-black-048);
}

/*-----------------------------我的推廣 > 獎勵規則------------------------------*/
#promote-rule .item-content .list-qa .item-qa {
  background: linear-gradient(180deg, #FFF 0%, #F8F8F8 18.54%, #EFEFEF 100%);
  box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.20) inset, 0px 2px 2px 0px rgba(0, 0, 0, 0.24);
  border-bottom: 4px solid var(--color-gray-02);

  &:hover {
    border-bottom: 4px solid var(--color-gray-03);
  }

  &:active {

    .title {
      opacity: .7;
    }
  }
}

#promote-rule .area-content .item-content .title {
  color: var(--color-blue-01);
}

#promote-rule .list-qa .item-qa .title .text {
  color: var(--color-black-070);
}

#promote-rule .list-qa .item-qa .content {
  color: var(--color-black-048);
}

/*-------------------我的推廣 > 團隊查詢 > 團隊總覽-------------------*/
#promote-team-overview .area-content .list-total {
  background: var(--color-gradient-white-02);
  border: 1px solid var(--color-gray-02);
  box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.20) inset, 0px 2px 4px 0px rgba(0, 0, 0, 0.20);

  .item {

    .title {
      color: var(--color-black-048);
    }

    .count {
      color: var(--color-blue-01);
    }
  }
}

#promote-team-overview .list-content .list-data {

  .item {
    background: var(--color-black-004);
    box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.18) inset;

    .field-title {
      color: var(--color-black-048);
    }
  }
}

/*-------------------我的推廣 > 團隊查詢 > 團隊報表-------------------*/
#promote-team-report .area-content .list-my-total {
  background: var(--color-gradient-white-02);
  border-bottom: 4px solid var(--color-gray-02);
  box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.20) inset, 0px 2px 4px 0px rgba(0, 0, 0, 0.20);

  .item {

    .field-title {
      color: var(--color-black-048);
      font-weight: normal;
    }

    .field-content {
      color: var(--color-blue-01);
    }
  }
}

/*-------------------我的推廣 > 表格-------------------*/
#promote-achievement, #promote-team-report, #promote-achievement-rewards {
    .table {
        background: var(--color-white);
        border-left: 1px solid var(--color-black-012);
        border-top: 1px solid var(--color-black-012);
        .row {
            color: var(--color-black-048);
            &.title {
                background: var(--color-black-006);
                color: var(--color-black-070);
                box-shadow: 0px -2px 12px rgba(0, 0, 0, 0.08) inset;
            }
            &.even {
                background: var(--color-black-006);
            }
            .colum {
                border-right: 1px solid var(--color-black-012);
                border-bottom: 1px solid var(--color-black-012);
                &.no {
                    color: var(--color-black-070);
                }
            }
        }
    }
}

/* 線下會員 */
#promote-offline-member .list-remark {
    color: var(--color-blue-gray-02);
}
#promote-offline-member .list-content .list-data .item,
#promote-offline-member .area-content .list-total {
  background: var(--color-black-004);
  box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.18) inset;
}
#promote-offline-member .area-content .list-total .count {
  color: var(--color-blue-01);
}
#promote-offline-member .area-content .remark,
#promote-offline-member .list-data .item .field-title,
#promote-offline-member .list-total .item .title {
  color: var(--color-black-048);
}
#promote-offline-member .area-content .offline-content .list-total .count {
  color: var(--color-black);
}

/*---------------------------全民代理------------------------------*/
.area-menu.allagent .btn-back-my {
  opacity: 70%;

  &:hover {
    opacity: 100%;
  }
}

.area-menu.allagent .btn-back-my:active {
  opacity: .7;
}

.area-menu.allagent .btn-menu.personal .icon {
  background: url(../images/blue/icon-personal-center-default.svg) no-repeat center;
  background-size: cover;
}

.area-menu.allagent .btn-menu.personal.active,
.area-menu.allagent .btn-menu.personal:hover {
  .icon {
    background: url(../images/blue/icon-personal-center-hover.svg) no-repeat center;
  }

  .text {
    color: var(--color-blue-01);
  }
}

.area-menu.allagent .btn-menu.level .icon {
  background: url(../images/blue/icon-level-system-default.svg) no-repeat center;
  background-size: cover;
}

.area-menu.allagent .btn-menu.level.active,
.area-menu.allagent .btn-menu.level:hover {
  .icon {
    background: url(../images/blue/icon-level-system-hover.svg) no-repeat center;
  }

  .text {
    color: var(--color-blue-01);
  }
}

/* 個人中心 */
#allagent-personal-center .list-content .list-data .item,
#allagent-personal-center .area-content .list-total {
  background: var(--color-gradient-white-02);
  border: 1px solid var(--color-gray-02);
  box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.20) inset, 0px 2px 4px 0px rgba(0, 0, 0, 0.20);
}

#allagent-personal-center .area-content .remark,
#allagent-personal-center .list-data .item .field-title,
#allagent-personal-center .list-total .item .title {
  color: var(--color-black-048);
}

#allagent-personal-center .list-total .item .count {
  color: var(--color-blue-01);
}

#allagent-personal-center .area-promote-method .content .area-qrcode,
#allagent-personal-center .area-promote-method .content .list-method .item,
#allagent-personal-center .area-total .list-data .item .item-title,
#allagent-personal-center .area-content .area-total .list-data .item {
  background: var(--color-black-004);
  box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.18) inset;
}

#allagent-personal-center .list-method .item.link .title .icon {
  background: url(../images/blue/promote-icon-link.webp) no-repeat center;
  background-size: cover;
}

#allagent-personal-center .list-method .item.code-number .title .icon {
  background: url(../images/blue/promote-icon-referralcode.webp) no-repeat center;
  background-size: cover;
}

#allagent-personal-center .list-method .item.qrcode .title .icon {
  background: url(../images/blue/promote-icon-qrcode.webp) no-repeat center;
  background-size: cover;
}
#allagent-personal-center .area-promote-method .list-method {
  .btn-option {
    background: var(--color-gradient-blue-gray-01);
    border-bottom: 3px solid var(--color-blue-gray-04);
    color: var(--color-white);
    box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.20) inset, 0px 2px 4px 0px rgba(0, 0, 0, 0.20);
    .btn-text {
      color: var(--color-white);
    }
  }
}


/* 代理進度 */
#allagent-progress .area-function .list-filter .list-btn-function .search {
  background: var(--color-gradient-blue-gray-01);
  border-bottom: 3px solid var(--color-blue-gray-04);
  color: var(--color-white);
  box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.20) inset, 0px 2px 4px 0px rgba(0, 0, 0, 0.20);
  .btn-text {
    color: var(--color-white);
  }
}
#allagent-progress .list-content .list-data .item,
#allagent-progress .area-content .list-total {
  background: var(--color-black-004);
  box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.18) inset;
}

#allagent-progress .area-content .remark,
#allagent-progress .list-data .item .field-title,
#allagent-progress .list-total .item .title {
  color: var(--color-black-048);
}

#allagent-progress .list-total .item .count,
#allagent-progress .list-data .item.deposited-members {
  color: var(--color-blue-01);
}

/* 線下會員 */
#allagent-offline-member .list-remark {
    color: var(--color-blue-gray-02);
}
#allagent-offline-member .list-content .list-data .item,
#allagent-offline-member .area-content .list-total {
  background: var(--color-black-004);
  box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.18) inset;
}
#allagent-offline-member .area-content .list-total .count {
  color: var(--color-blue-01);
}
#allagent-offline-member .area-content .remark,
#allagent-offline-member .list-data .item .field-title,
#allagent-offline-member .list-total .item .title {
  color: var(--color-black-048);
}
#allagent-offline-member .area-content .offline-content .list-total .count {
  color: var(--color-black);
}

/* 等級制度 */
#allagent-level-system {
  .level-card {
    box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.18) inset;
    .tag {
      background: linear-gradient(#6E7083, #41424D);
      color: #fff;
    }
  }
  .level-card.first {
    background: url("../images/common/level-card-first.webp") no-repeat left top;
    color: #502F1A;
    .level-icon {
      background: url("../images/common/level-icon-first.webp") no-repeat left top;
    }
  }
  .level-card.second {
    background: url("../images/common/level-card-second.webp") no-repeat left top;
    color: #6859A7;
    .level-icon {
      background: url("../images/common/level-icon-second.webp") no-repeat left top;
    }
  }
  .level-card.third {
    background: url("../images/common/level-card-third.webp") no-repeat left top;
    color: #497389;
    .level-icon {
      background: url("../images/common/level-icon-third.webp") no-repeat left top;
    }
  }
  .level-card.fourth {
    background: url("../images/common/level-card-fourth.webp") no-repeat left top;
    color: #3654A3;
    .level-icon {
      background: url("../images/common/level-icon-fourth.webp") no-repeat left top;
    }
  }
  .level-card.fifth {
    background: url("../images/common/level-card-fifth.webp") no-repeat left top;
    color: #B62E36;
    .level-icon {
      background: url("../images/common/level-icon-fifth.webp") no-repeat left top;
    }
  }
  .level-card.sixth {
      background: url("../images/common/level-card-sixth.webp") no-repeat left top;
      color: #4C5B61;
      .level-icon {
          background: url("../images/common/level-icon-sixth.webp") no-repeat left top;
      }
  }
  .level-card.seventh {
      background: url("../images/common/level-card-seventh.webp") no-repeat left top;
      color: #CF588F;
      .level-icon {
          background: url("../images/common/level-icon-seventh.webp") no-repeat left top;
      }
  }
  .level-card.eighth {
      background: url("../images/common/level-card-eighth.webp") no-repeat left top;
      color: #2F8A24;
      .level-icon {
          background: url("../images/common/level-icon-eighth.webp") no-repeat left top;
      }
  }
  .level-card.ninth {
      background: url("../images/common/level-card-ninth.webp") no-repeat left top;
      color: #0096BA;
      .level-icon {
          background: url("../images/common/level-icon-ninth.webp") no-repeat left top;
      }
  }
  .level-card.tenth {
      background: url("../images/common/level-card-tenth.webp") no-repeat left top;
      color: #D25819;
      .level-icon {
          background: url("../images/common/level-icon-tenth.webp") no-repeat left top;
      }
  }
  .list-info {
    background: var(--color-black-004);
    box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.12) inset;
    .field-title {
      color: var(--color-black-048);
    }
    .item-title {
      color: var(--color-blue-01);
    }
    &.active {
      border: 2px solid var(--color-blue-01);
    }
  }
  .list-table {
    border: 1px solid var(--color-black-012);
    .colum {
      border: 1px solid var(--color-black-004);
    }
    .table-colum-title {
      border-right: 1px solid var(--color-black-020);
      .row {
        background: var(--color-white);
        border: 1px solid var(--color-black-004);
        &.title {
          background: var(--color-black-004);
          color: var(--color-black-048);
        }
        &.multiplier {
          background: var(--color-white-020);
        }
        &.ratio {
          background: var(--color-white-012);
        }
        &.even {
          background: var(--color-black-004);
        }
      }
    }
    .table-content {
      .content {
        .row {
          .colum {
            background: var(--color-white);
            &.now-level {
              background: var(--color-blue-01-012);
              color: var(--color-black-070);
            }
          }
          &.title {
            .colum {
              background: var(--color-black-004);
              color: var(--color-black-048);
              &.now-level {
                background: var(--color-blue-01);
                color:  var(--color-white);
              }
            }
          }
          &.multiplier {
            .colum {
              background: var(--color-white-020);
              &.now-level {
                color:  var(--color-black-070);
                background: var(--color-blue-01-020);
              }
            }
          }
          &.ratio {
            .colum {
              background: var(--color-white-012);
              &.now-level {
                color:  var(--color-black-070);
                background: var(--color-blue-01-012);
              }
            }
          }
          &.even {
            .colum {
              background: var(--color-black-004);
              &.now-level {
                background: var(--color-blue-01-020);
              }
            }
          }
        }
      }
    }
  }
}

/* 全民代理獎金 */
#bonus-all-agent .table .colum.cashbacktype:hover {
  color: var(--color-blue-01);
}

#bonus-all-agent-popup {
  .table {
    border: 1px solid var(--color-black-012);
    .row {
      background: var(--color-black-004);
      &.event {
        background: transparent;
        border-bottom: 1px solid var(--color-black-012);
      }
      &.title {
        background: var(--color-black-004);
        border-bottom: 1px solid var(--color-black-012);
      }
    }
  }
}

/*----------------------------Loading----------------------------*/
#loading.loading-mask {
  background: var(--color-black-032);
}

#loading .img-loading {
  background: url(../images/blue/loading.svg) no-repeat center;
  background-size: cover;
}

/*-------------------------------設定------------------------------*/
#popup-set .popup-content .version {
  color: var(--color-black-048);
}

/*------------------------------登入註冊-----------------------------*/
.login-register-content {
  background: var(--color-white);
}

.login-register-tab {
  background: var(--color-black-020);
  .login-btn {
    background: var(--color-white);
    color: var(--color-black-048);
    &:hover {
      background: var(--color-white-070);
    }
    &.active {
      color: var(--color-white);
      background: var(--color-gradient-blue-01);
    }
  }
}
.verify-title {
  color: var(--color-blue-01);
  border-color: var(--color-blue-04);
}
.bankcard-verify-bottom {
  .input-upload {
      background: var(--color-black-004);
      box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.12) inset;
      .upload-text {
          &.nodata {
              color: #BBB;
          }
      }
  }
}

/*-----------------浮動按鈕------------------*/
.float-btn {
  background: rgba(199, 204, 228, .2);
  border: 2px solid #fff;
}
.float-btn-item {
    background: linear-gradient(#fff, #CFD3E4);
    border: 0;
    border-bottom: 2px solid var(--color-gray-01);
    box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.20) inset, 0px 0px 1px 0px rgba(0, 0, 0, 0.20), 0px 2px 4px 0px rgba(0, 0, 0, 0.16);
    .float-btn-icon {
      .service & {
        background-image: url(../images/blue/float-btn-service.svg);
      }
      .chatroom & {
        background-image: url(../images/blue/float-btn-chatroom.svg);
      }
    }
    .float-btn-text {
      background: #3155FF;
      color: #fff;
      &:after {
          border-left: 6px solid #3155FF;
      }
    }
    .float-btn-app {
        background: rgba(199, 204, 228, .4);
        border: 1px solid rgba(174, 174, 174, .2);
        backdrop-filter: blur(2px);
        .float-app-item {
            background-color: rgba(255, 255, 255, .4);
            .float-app-text {
                background: #3155FF;
                color: #fff;
                &:after {
                    border-left: 6px solid #3155FF;
                }
            }
            &:hover {
              background: linear-gradient(#002CFF, #A8B7FF);
            }
        }
    }
    &.show, &:hover {
        background: var(--color-gradient-blue-01);
        border-bottom: 3px outset var(--color-blue-02);
        box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.20) inset, 0px 2px 4px 0px rgba(0, 0, 0, 0.20);
    }
}
.instant-messaging {
    &:before, &:after {
        background: #EBEBEB;
    }
    .item {
        border-color: #E1E4EE;
        &.telegram {
            background: url(/common/desktop/images/icon-black/icon-im-telegram.svg) no-repeat center;
        }
        &.google {
            background: url(/common/desktop/images/icon-black/icon-im-google.svg) no-repeat center;
        }
        &.line {
            background: url(/common/desktop/images/icon-black/icon-im-line.svg) no-repeat center;
        }
    }
}


/* RoadMap */
#roadmap:before {
  background: #FFF;
  box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.20) inset, 0px 2px 4px 0px rgba(0, 0, 0, 0.20);
}
#roadmap .roadmap-top {
  background: url(../images/blue/roadmap-bg.webp) no-repeat center;
  background-size: cover;
}
#roadmap .roadmap-top .user-photo {
  background: url(/images/common/photo.webp) no-repeat center;
  background-size: cover;
  border-color: #FF3859;
}
#roadmap .roadmap-top .user-content .user-vip {
  background: linear-gradient(rgba(255, 160, 168, 0.5) 10%, rgba(251, 39, 57, 0.5) 50%, rgba(157, 25, 25, 0.5) 60%, rgba(255, 81, 226, 0.5)), linear-gradient(#D40010, #E05454);
  border: 1px solid #FFDD2E;
  color: #FFDD88;
  text-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
}
#roadmap .roadmap-top .user-content .user-vip:before {
  background: url(../images/blue/vip-badge.webp) no-repeat center;
  background-size: cover;
}
#roadmap .roadmap-top .user-content .user-account {
  color: #FFF;
}
#roadmap .roadmap-top .user-content .user-amount {
  color: #FFBB00;
}
#roadmap .roadmap-top .user-content .user-amount:before {
  color: #FFF;
}
#roadmap .roadmap-top .acc-function-bar .bar-item .bar-title {
  color: #FFF;
}
#roadmap .roadmap-top .acc-function-bar .bar-item .bar-title span {
  color: #FFDC62;
}
#roadmap .roadmap-top .acc-function-bar .bar-item .bar-percent {
  background: #000;
}
#roadmap .roadmap-top .acc-function-bar .bar-item .bar-percent .bar-bg {
  background: linear-gradient(to right, #FF0053, #FFC71C);
  box-shadow: inset 0 0 4px #FFF;
}
#roadmap .roadmap-top .acc-function-bar .bar-item .bar-percent .bar-bg .bar-number {
  color: #FFDC62;
}
#roadmap .roadmap-top .acc-function-bar .bar-item .bar-percent .bar-bg.inside .bar-number {
  color: #000;
}
#roadmap .roadmap-top .function-link .function-link-item {
  background: linear-gradient(#D7F1FF, #FFF);
  box-shadow: 0 2px 0 #A3C1D4;
}
#roadmap .roadmap-top .function-link .function-link-item.deposit .link-icon {
  background-image: url(../images/blue/function-link-deposit.svg);
  background-size: 33px;
}
#roadmap .roadmap-top .function-link .function-link-item.withdraw .link-icon {
  background-image: url(../images/blue/function-link-withdraw.svg);
  background-size: 33px;
}
#roadmap .roadmap-top .function-link .function-link-item.account-record .link-icon {
  background-image: url(../images/blue/function-link-account-record.svg);
  background-size: 33px;
}
#roadmap .roadmap-top .function-link .function-link-item.discount-history .link-icon {
  background-image: url(../images/blue/function-link-discount-history.svg);
  background-size: 33px;
}
#roadmap .roadmap-top .function-link .function-link-item .link-icon {
  background-color: #4255AF;
}
#roadmap .roadmap-top .function-link .function-link-item .link-text {
  color: #4B6AFF;
}
#roadmap .roadmap-top .function-link .function-link-item:hover {
  background: linear-gradient(#FFF, #D7F1FF);
}
#roadmap .roadmap-link-item {
  background: #F4F4F4;
  border: 1px solid #E5E5E5;
}
#roadmap .roadmap-link-item .link-title {
  color: #4C4C4C;
}
#roadmap .roadmap-link-item .link-title:after {
  background: linear-gradient(to right, #5C78FF, #D0DAF9 20%, #DEDEDE);
}
#roadmap .roadmap-link-item .link-content .link-list .link-item.basic-data {
  background: url(../images/blue/roadmap-basic-data.svg) no-repeat left center;
}
#roadmap .roadmap-link-item .link-content .link-list .link-item.verification {
  background: url(../images/blue/roadmap-verification.svg) no-repeat left center;
}
#roadmap .roadmap-link-item .link-content .link-list .link-item.member-level {
  background: url(../images/blue/roadmap-member-level.svg) no-repeat left center;
}
#roadmap .roadmap-link-item .link-content .link-list .link-item.notify {
  background: url(../images/blue/roadmap-notify.svg) no-repeat left center;
}
#roadmap .roadmap-link-item .link-content .link-list .link-item.instant-rebate {
  background: url(../images/blue/roadmap-instant-rebate.svg) no-repeat left center;
}
#roadmap .roadmap-link-item .link-content .link-list .link-item.discount-bonus {
  background: url(../images/blue/roadmap-discount-bonus.svg) no-repeat left center;
}
#roadmap .roadmap-link-item .link-content .link-list .link-item.red-envelope-code {
  background: url(../images/blue/roadmap-red-envelope-code.svg) no-repeat left center;
}
#roadmap .roadmap-link-item .link-content .link-list .link-item.check {
  background: url(../images/blue/roadmap-check.svg) no-repeat left center;
}
#roadmap .roadmap-link-item .link-content .link-list .link-item.deposit {
  background: url(../images/blue/roadmap-deposit.svg) no-repeat left center;
}
#roadmap .roadmap-link-item .link-content .link-list .link-item.bank-card-info {
  background: url(../images/blue/roadmap-bank-card-info.svg) no-repeat left center;
}
#roadmap .roadmap-link-item .link-content .link-list .link-item.withdraw {
  background: url(../images/blue/roadmap-withdraw.svg) no-repeat left center;
}
#roadmap .roadmap-link-item .link-content .link-list .link-item.bet-history {
  background: url(../images/blue/roadmap-bet-history.svg) no-repeat left center;
}
#roadmap .roadmap-link-item .link-content .link-list .link-item.depositing {
  background: url(../images/blue/roadmap-depositing.svg) no-repeat left center;
}
#roadmap .roadmap-link-item .link-content .link-list .link-item.withdrawal {
  background: url(../images/blue/roadmap-withdrawal.svg) no-repeat left center;
}
#roadmap .roadmap-link-item .link-content .link-list .link-item.addBalance {
  background: url(../images/blue/roadmap-addBalance.svg) no-repeat left center;
}
#roadmap .roadmap-link-item .link-content .link-list .link-item.deductBalance {
  background: url(../images/blue/roadmap-deductBalance.svg) no-repeat left center;
}
#roadmap .roadmap-link-item .link-content .link-list .link-item.transferIn {
  background: url(../images/blue/roadmap-transferIn.svg) no-repeat left center;
}
#roadmap .roadmap-link-item .link-content .link-list .link-item.donate {
  background: url(../images/blue/roadmap-donate.svg) no-repeat left center;
}
#roadmap .roadmap-link-item .link-content .link-list .link-item.providerPromotions {
  background: url(../images/blue/roadmap-providerPromotions.svg) no-repeat left center;
}
#roadmap .roadmap-link-item .link-content .link-list .link-item.my-promote {
  background: url(../images/blue/roadmap-my-promote.svg) no-repeat left center;
}
#roadmap .roadmap-link-item .link-content .link-list .link-item.promote-teach {
  background: url(../images/blue/roadmap-promote-teach.svg) no-repeat left center;
}
#roadmap .roadmap-link-item .link-content .link-list .link-item.promote-rule {
  background: url(../images/blue/roadmap-promote-rule.svg) no-repeat left center;
}
#roadmap .roadmap-link-item .link-content .link-list .link-item.promote-history {
  background: url(../images/blue/roadmap-promote-history.svg) no-repeat left center;
}
#roadmap .roadmap-link-item .link-content .link-list .link-item.summary-team {
  background: url(../images/blue/roadmap-summary-team.svg) no-repeat left center;
}
#roadmap .roadmap-link-item .link-content .link-list .link-item.report-team {
  background: url(../images/blue/roadmap-report-team.svg) no-repeat left center;
}
#roadmap .roadmap-link-item .link-content .link-list .link-item.promote-offline-member {
    background: url(../images/blue/roadmap-promote-offline-member.svg) no-repeat left center;
}
#roadmap .roadmap-link-item .link-content .link-list .link-item.achievement-rewards {
    background: url(../images/blue/roadmap-achievement-rewards.svg) no-repeat left center;
}
#roadmap .roadmap-link-item .link-content .link-list .link-item.personal-center {
  background: url(../images/blue/roadmap-personal-center.svg) no-repeat left center;
}
#roadmap .roadmap-link-item .link-content .link-list .link-item.agent-progress {
  background: url(../images/blue/roadmap-agent-progress.svg) no-repeat left center;
}
#roadmap .roadmap-link-item .link-content .link-list .link-item.offline-member {
  background: url(../images/blue/roadmap-offline-member.svg) no-repeat left center;
}
#roadmap .roadmap-link-item .link-content .link-list .link-item.level-system {
  background: url(../images/blue/roadmap-level-system.svg) no-repeat left center;
}
#roadmap .roadmap-link-item .link-content .link-list .link-item.discount-activity {
  background: url(../images/blue/roadmap-discount-activity.svg) no-repeat left center;
}
#roadmap .roadmap-link-item .link-content .link-list .link-item.disclaimer {
  background: url(../images/blue/roadmap-disclaimer.svg) no-repeat left center;
}
#roadmap .roadmap-link-item .link-content .link-list .link-item.qa {
  background: url(../images/blue/roadmap-qa.svg) no-repeat left center;
}
#roadmap .roadmap-link-item .link-content .link-list .link-item.register-gamble {
  background: url(../images/blue/roadmap-register-gamble.svg) no-repeat left center;
}
#roadmap .roadmap-link-item .link-content .link-list .link-item.register-terms {
  background: url(../images/blue/roadmap-register-terms.svg) no-repeat left center;
}
#roadmap .roadmap-link-item .link-content .link-list .link-item.privacy {
  background: url(../images/blue/roadmap-privacy.svg) no-repeat left center;
}
#roadmap .roadmap-link-item .link-content .link-list .link-item.modify-password {
  background: url(../images/blue/roadmap-modify-password.svg) no-repeat left center;
}
#roadmap .roadmap-link-item .link-content .link-list .link-item .link-item-text {
  color: #7A7A7A;
  transition: all 0.3s ease-in-out;
}
#roadmap .roadmap-link-item .link-content .link-list .link-item .verify-text.no-data {
  color: #FF0000;
}
#roadmap .roadmap-link-item .link-content .link-list .link-item .verify-text.review {
  color: #FF8300;
}
#roadmap .roadmap-link-item .link-content .link-list .link-item .verify-text.success {
  color: #46D42F;
}
#roadmap .roadmap-link-item .link-content .link-list .link-item .verify-text.reject {
  color: #E6473F;
}
#roadmap .roadmap-link-item .link-content .link-list .link-item .link-item-arrow {
  color: #B7BDCB;
}
#roadmap .roadmap-link-item .link-content .link-list .link-item:before, #roadmap .roadmap-link-item .link-content .link-list .link-item:after {
  background: #5C78FF;
}
#roadmap .roadmap-link-item .link-content .link-list .link-item:hover .link-item-text {
  color: #4B6AFF;
}
#roadmap .roadmap-link-item .link-content .link-list:first-child {
  border-right: 1px solid #DEDEDE;
}


/* 優惠提醒彈窗 */
.discount-reminder-popup {
  background: rgba(61, 61, 61, .9);
  .reminder-icon {
      background: url(../images/common/icon-discount-reminder.svg) no-repeat center;
  }
  .reminder-title {
      color: #F3477D;
  }
  .reminder-content {
      .reminder-btn {
          border: 0;
          background: linear-gradient(#8CA0FF, #3C5DFF);
      }
  }
  .reminder-bar-bg {
      .reminder-bar {
          background: #7C93FF;
      }
  }
}