@charset "UTF-8";
:root {
  --color-black-070: #6D695F99;
}

ul, li {
  padding: 0;
  margin: 0;
  list-style: none;
}

body {
  min-width: 1456px;
}
body.fold {
  min-width: 1276px;
}

#popup-container-ant-web {
  backdrop-filter: blur(3px);
  background: rgba(109, 105, 95, 0.6);
}

/*------------ 共用遊戲 ------------*/
.game-item-top {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding: 10px 15px 0 15px;
}
.live-sports .game-item-top, .latest-round-race .game-item-top {
  padding: 8px 0 0 0;
}
.game-list .game-item-top {
  padding: 20px 0 0 0;
}
.game-lobby .game-item-top {
  padding: 15px 0 0 0;
}

.game-item-title {
  display: flex;
  align-items: center;
  font-size: 24px;
  font-weight: bold;
}
.live-sports .game-item-title, .latest-round-race .game-item-title {
  font-size: 16px;
}
.game-lobby .game-item-title {
  font-size: 20px;
  padding: 0 0 0 38px;
}
.game-list .game-item-title {
  font-size: 20px;
  gap: 10px;
  padding: 0;
  text-transform: uppercase;
}

.game-item-btn {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  gap: 4px;
}
.game-item-btn .btn-refresh {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 32px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
}
.game-item-btn .btn-all {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 43px;
  height: 32px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: bold;
  padding: 0 12px;
  margin-right: 8px;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
}
.game-item-btn .btn-all.hidden {
  display: none;
}
.game-item-btn .btn-all:after {
  font-family: "Font Awesome 6 Free";
  font-weight: bold;
  content: "\f105";
  display: flex;
  font-size: 12px;
}
.game-item-btn .btn-arrow {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 32px;
  height: 32px;
  font-size: 12px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
}
.game-item-btn .btn-arrow.hidden {
  opacity: 0.5;
  cursor: not-allowed;
}

.game-list-wrap {
  display: flex;
  flex-direction: row;
  gap: 10px;
  padding: 10px;
}
.game-list .game-list-wrap {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 10px 7px;
  padding: 10px 0 20px 0;
}
.game-list.hot .game-list-wrap {
  padding: 15px 0 20px 0;
}

.game-list-item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-width: 145px;
  width: 145px;
  height: 193px;
  border-radius: 16px;
  cursor: pointer;
  overflow: hidden;
  transition: all 0.3s ease-in-out;
}
.game-list-item.jp .game-jp {
  display: block;
}
.game-list-item.new .game-new {
  display: block;
}
.game-list-item.recommend .game-recommend {
  display: block;
}
.game-list-item:hover {
  transform: translateY(-4px);
}
.game-list-item.default img {
  width: 64px;
}

.game-new {
  display: none;
  background-size: cover;
  position: absolute;
  left: 8px;
  top: 8px;
  padding: 1px 10px;
  font-size: 9px;
  font-weight: bold;
  border: 1px solid transparent;
  border-radius: 6px 0;
}
.game-new:before {
  content: "New";
  display: block;
}

.game-recommend {
  display: none;
  border: 1px solid transparent;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  position: absolute;
  right: 8px;
  top: 8px;
}

.game-logo {
  position: absolute;
  display: flex;
  width: 30px;
  height: 21px;
  bottom: 4px;
  left: 50%;
  transform: translateX(-50%);
}

/*------------ 維護 ------------*/
.maintain {
  position: absolute;
  display: flex;
  width: 100%;
  height: 100%;
  border-radius: 10px;
  justify-content: center;
  align-items: center;
  gap: 6px;
  z-index: 3;
  cursor: not-allowed;
}

/*------------ TABLE ------------*/
.table {
  gap: 0;
  border-top: 1px solid transparent;
  border-left: 1px solid transparent;
}
.table .row {
  min-height: 40px;
}
#bonus-all-agent-popup .table .row {
  min-height: 40px;
}
.table .row .colum {
  border-right: 1px solid transparent;
  border-bottom: 1px solid transparent;
}
#bonus-all-agent-popup .table .row .colum {
  height: 40px;
}
.table .row .colum.data-remark {
  height: 50px;
}
.table .row.title {
  height: auto;
}
.table .row:last-child .colum:first-child {
  border-radius: 0 0 0 8px;
}
.table .row:last-child .colum:last-child {
  border-radius: 0 0 8px 0;
}

.list-table {
  border: 1px solid transparent;
}
.list-table .row .colum {
  border-right: 1px solid transparent;
  border-bottom: 1px solid transparent;
}
.list-table .row .colum:last-child {
  border-right: 0;
}
.list-table .row:last-child .colum {
  border-bottom: 0;
}
.list-table .table-colum-title .row {
  border-right: 1px solid transparent;
  border-bottom: 1px solid transparent;
}
.list-table .table-colum-title .row:last-child {
  border-bottom: 0;
  border-radius: 0 0 0 8px;
}
.list-table .table-colum-title .row.title:first-child {
  border-radius: 8px 0 0 0;
}
.list-table .table-content {
  position: relative;
  border-radius: 0 8px 8px 0;
}
.list-table .table-content:before {
  content: "";
  display: block;
  position: absolute;
  width: 10px;
  height: 100%;
  left: 0;
  z-index: 1;
}

/*------------ 輸入框 ------------*/
.input-area .input-text {
  border-radius: 8px;
}
.input-area .input-upload .input-text {
  border-radius: 8px;
}

.dropdown-btn {
  border-radius: 8px;
}

.list-option .option {
  border: 2px solid transparent;
  border-radius: 12px;
}

.btn-option {
  border-radius: 8px;
}

.input-time {
  border-radius: 8px;
}

.btn-one-click {
  border-radius: 8px !important;
}

/*------------ 共同頁面 ------------*/
.content-wrap, .page-content-default {
  position: relative;
  padding: 60px 0 0 240px;
  min-width: 1216px;
  transition: all 0.3s ease-in-out;
}
.fold .content-wrap, .fold .page-content-default {
  padding-left: 60px;
}

.container {
  width: 1216px;
  margin: 0 auto;
}

.page-content-default {
  min-width: auto;
  width: 1456px;
  margin: 0 auto;
}
.fold .page-content-default {
  width: 1276px;
}

/*------------ 頁籤 ------------*/
.page-tabs {
  width: fit-content;
  min-height: 45px;
  padding: 0 5px;
  border-radius: 8px;
  gap: 0;
}
.page-tabs .btn-tabs {
  min-width: 128px;
  min-height: 35px;
  border-radius: 8px;
  padding: 0 8px;
}
.page-tabs .btn-tabs .text {
  font-size: 14px;
}

/*------------ 標題 ------------*/
.page-title {
  font-size: 20px;
}
.page-title .page-back {
  display: flex;
  align-items: center;
  gap: 10px;
}
.page-title .page-back svg {
  font-size: 14px;
  padding: 9px 12px;
  border-radius: 8px;
  width: 8px;
}

/*------------ 頁數 ------------*/
.pagination .btn {
  font-size: 14px;
  font-weight: bold;
}

/*------------ 彈窗 ------------*/
.popup .popup-title {
  min-height: 56px;
}
.popup .popup-title .title-text {
  font-size: 16px;
  font-weight: bold;
}
.popup .popup-title .btn-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 6px;
}
.popup .popup-title .btn-close .icon-close {
  font-size: 15px;
  font-weight: bold;
}

.ReactModal__Overlay {
  backdrop-filter: blur(3px);
}

/*------------ 功能按鈕 ------------*/
.btn-send, .btn-cancel {
  border-radius: 8px;
}

.upload .btn-function {
  font-weight: normal;
  border: 1px solid transparent;
  border-radius: 8px;
}

#index-welcome .btn-close, #index-popup-news .btn-close {
  width: 32px;
  height: 32px;
  border-radius: 8px;
}
#index-welcome .btn-close .icon-close, #index-popup-news .btn-close .icon-close {
  font-size: 18px;
}

/*------------ 浮動按鈕 ------------*/
.float-btn {
  position: fixed;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  z-index: 99;
  right: 20px;
  bottom: 20px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all 0.4s ease 0.3s;
  z-index: 100;
}
.float-btn.move {
  bottom: 70px;
}

.float-btn-item {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  border: 1px solid transparent;
  cursor: pointer;
}
.float-btn-item.zalo .float-btn-text.zalo {
  flex-direction: column;
  height: auto;
  bottom: 0;
  width: 107px;
  height: 120px;
  gap: 0.2rem;
}
.float-btn-item.zalo .float-btn-text.zalo:after {
  bottom: 20px;
}
.float-btn-item .float-btn-icon {
  position: relative;
  width: 26px;
  height: 26px;
  background-position: left top;
  background-repeat: no-repeat;
  background-size: cover;
}
.float-btn-item .float-btn-text {
  display: none;
  position: absolute;
  align-items: center;
  justify-content: center;
  bottom: 52px;
  padding: 0 0.6rem;
  height: 40px;
  border-radius: 6px;
  font-size: 0.9rem;
  font-weight: bold;
  white-space: nowrap;
}
.float-btn-item .float-btn-text:after {
  content: "";
  display: block;
  position: absolute;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  bottom: -6px;
}
.float-btn-item .float-btn-app {
  display: none;
  flex-direction: column;
  gap: 8px;
  position: absolute;
  left: -56px;
  bottom: 0;
  padding: 2px;
  border-radius: 16px;
  padding: 7px 5px;
}
.float-btn-item .float-btn-app .float-app-item {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
}
.float-btn-item .float-btn-app .float-app-item .float-app-icon {
  width: 32px;
  height: 32px;
  background-position: center;
  background-repeat: no-repeat;
}
.float-btn-item .float-btn-app .float-app-item .float-app-text {
  display: none;
  position: absolute;
  align-items: center;
  justify-content: center;
  right: 60px;
  padding: 0 10px;
  height: 40px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: bold;
  white-space: nowrap;
}
.float-btn-item .float-btn-app .float-app-item .float-app-text:after {
  content: "";
  display: block;
  position: absolute;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  right: -6px;
}
.float-btn-item .float-btn-app .float-app-item .float-app-text.qrcode {
  width: 107px;
  height: 120px;
  flex-direction: column;
  gap: 3px;
}
.float-btn-item .float-btn-app .float-app-item .float-app-text.qrcode img {
  border-radius: 4px;
}
.float-btn-item .float-btn-app .float-app-item:hover .float-app-text {
  display: flex;
}
.float-btn-item.show .float-btn-icon {
  background-position: left bottom;
}
.float-btn-item.show .float-btn-app {
  display: flex;
}
.float-btn-item:hover .float-btn-icon {
  background-position: bottom center;
}
.float-btn-item:hover.online-cs .float-btn-text.online-cs {
  display: flex;
}
.float-btn-item:hover.line .float-btn-text.line {
  display: flex;
}
.float-btn-item:hover.telegram .float-btn-text.telegram {
  display: flex;
}
.float-btn-item:hover.teams .float-btn-text.teams {
  display: flex;
}
.float-btn-item:hover.whatsapp .float-btn-text.whatsapp {
  display: flex;
}
.float-btn-item:hover.messenger .float-btn-text.messenger {
  display: flex;
}
.float-btn-item:hover.instagram .float-btn-text.instagram {
  display: flex;
}
.float-btn-item:hover.zalo .float-btn-text.zalo {
  display: flex;
}
.float-btn-item:hover.meiqia .float-btn-text.meiqia {
  display: flex;
}
.float-btn-item .float-btn-arrow {
  display: none;
}
.float-btn-item:active {
  animation: 0.2s Click;
}

/*------------ GoTop ------------*/
.gotop {
  position: fixed;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  z-index: 99;
  right: 20px;
  bottom: 20px;
  border: 1px solid transparent;
  opacity: 1;
  cursor: pointer;
  transition: all 0.4s ease 0.3s;
}
.gotop.hide {
  opacity: 0;
}
.gotop:active {
  animation: 0.2s Click;
}

@keyframes Click {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0, 2px);
  }
  100% {
    transform: translate(0, 0);
  }
}
.header {
  position: relative;
  z-index: 999;
}

/*---------- 左側選單 ----------*/
.header-left {
  position: fixed;
  top: 0;
  left: 0;
  width: 240px;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px;
  border-right: 1px solid transparent;
  font-size: 14px;
  font-weight: bold;
  z-index: 1;
  transition: all 0.3s ease-in-out;
}
.fold .header-left {
  width: 60px;
  padding: 16px 8px;
}
.fold .header-left .menu-content:before {
  width: 44px;
}
.fold .header-left .menu-list {
  position: relative;
  display: flex;
  justify-content: center;
  width: 42px;
  height: 42px;
  padding: 0;
}
.fold .header-left .menu-list:hover .menu-list-text {
  display: flex;
}
.fold .header-left .menu-list-text {
  display: none;
  position: absolute;
  padding: 8px 15px;
  left: 62px;
  width: max-content;
  border-radius: 6px;
  align-items: center;
}
.fold .header-left .menu-list-text:after {
  content: "";
  display: block;
  position: absolute;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  left: -6px;
}
@media screen and (max-height: 768px) {
  .fold .header-left {
    padding: 10px 8px;
  }
}
@media screen and (max-height: 768px) {
  .header-left {
    padding: 10px 16px;
  }
}

.menu {
  animation: 0.5s slideIn;
}
.fold .menu {
  animation: 0.5s slideOut;
}

@keyframes slideIn {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  50% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes slideOut {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  50% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
.menu-content {
  padding: 10px 0;
  transition: all 0.3s ease-in-out;
}
.menu-content:before {
  content: "";
  display: block;
  position: relative;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 190px;
  height: 1px;
}
@media screen and (max-height: 768px) {
  .menu-content {
    padding: 6px 0;
  }
}

.menu-list {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  padding: 10px 20px;
  border-radius: 12px;
  transition: all 0.3s ease-in-out;
  cursor: pointer;
}
.menu-list.toggle {
  animation: 0.3s fadeIn;
}
.fold .menu-list.toggle {
  min-height: 42px;
  animation: 0.3s fadeOut;
}
@media screen and (max-height: 768px) {
  .menu-list {
    padding: 9px 20px;
  }
}

.menu-list-icon {
  width: 24px;
  height: 24px;
}

@keyframes fadeIn {
  0% {
    opacity: 0;
    transform: translateX(-50px);
  }
  50% {
    opacity: 0;
    transform: translateX(-50px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes fadeOut {
  0% {
    opacity: 0;
    transform: translateX(50px);
  }
  50% {
    opacity: 0;
    transform: translateX(50px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}
.submenu {
  position: absolute;
  left: 234px;
  width: 232px;
  max-height: 520px;
  padding: 10px;
  border-radius: 10px;
  display: none;
  flex-direction: column;
  gap: 16px;
  overflow-y: auto;
}
.submenu.active {
  display: flex;
}
.fold .submenu {
  display: none !important;
}
.submenu::-webkit-scrollbar {
  width: 5px;
}
.submenu::-webkit-scrollbar-track {
  margin: 6px 0;
  border-radius: 999px;
}
.submenu::-webkit-scrollbar-thumb {
  border-radius: 999px;
}
@media screen and (max-height: 900px) {
  .submenu {
    position: fixed;
    top: 50%;
    left: 250px;
    transform: translateY(-50%);
  }
}

.submenu-list {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  border: 2px solid transparent;
  border-radius: 12px;
}
.submenu-list:after {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 1px;
  left: 50%;
  bottom: -10px;
  transform: translateX(-50%);
}
.submenu-list:last-of-type:after {
  display: none;
}

.submenu-icon {
  display: flex;
  align-items: center;
  width: 70px;
}

.menu-float-list {
  display: none;
  flex-direction: column;
  gap: 4px;
  position: absolute;
  right: -214px;
  bottom: 0;
  padding: 2px;
  border-radius: 8px;
}
.menu-float-list.service-center {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  position: absolute;
  right: -71px;
  width: 55px;
  border-radius: 16px;
  padding: 7px 5px;
}
.menu-float-list.service-center .float-app-item {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  cursor: pointer;
}
.menu-float-list.service-center .float-app-item .float-app-icon {
  width: 32px;
  height: 32px;
  background-position: center;
  background-repeat: no-repeat;
}
.menu-float-list.service-center .float-app-item .float-app-text {
  display: none;
  position: absolute;
  align-items: center;
  justify-content: center;
  left: 66px;
  padding: 0 10px;
  height: 40px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: bold;
  white-space: nowrap;
}
.menu-float-list.service-center .float-app-item .float-app-text:after {
  content: "";
  display: block;
  position: absolute;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  left: -6px;
}
.menu-float-list.service-center .float-app-item .float-app-text.qrcode {
  width: 107px;
  height: 120px;
  flex-direction: column;
  gap: 3px;
}
.menu-float-list.service-center .float-app-item .float-app-text.qrcode img {
  border-radius: 4px;
}
.menu-float-list.service-center .float-app-item:hover .float-app-text {
  display: flex;
}
.menu-float-list.language {
  padding: 10px;
  border-radius: 18px;
}
.menu-float-list.language .country {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  width: 180px;
  height: 40px;
  padding: 0 10px;
  border-radius: 8px;
  cursor: pointer;
}
.menu-float-list.language .country .flag {
  min-width: 24px;
  height: 24px;
}
.menu-float-list.language .country .name {
  font-size: 14px;
  font-weight: bold;
}
.menu-float-list.active {
  display: flex;
}

/*---------- 上方選單 ----------*/
.header-top {
  position: fixed;
  width: 100%;
  top: 0;
  padding: 0 0 0 240px;
  transition: all 0.3s ease-in-out;
}
.fold .header-top {
  padding: 0 0 0 60px;
}
.header-top.fixed {
  background: rgba(255, 255, 255, 0.8);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1019607843);
  backdrop-filter: blur(10px);
}

.header-top-wrap {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 30px;
  width: 1216px;
  margin: 0 auto;
  height: 60px;
}
@media screen and (max-width: 1456px) {
  .header-top-wrap {
    width: 100%;
  }
  .fold .header-top-wrap {
    width: 1216px;
  }
}
@media screen and (max-width: 1276px) {
  .fold .header-top-wrap {
    width: 100%;
  }
}

.logo {
  min-width: 120px;
  max-width: 120px;
  cursor: pointer;
}

.news-marquee {
  display: flex;
  flex-direction: row;
  align-items: center;
  max-width: 604px;
  min-width: 604px;
  height: 36px;
  border: 1px solid transparent;
  border-radius: 18px;
  font-size: 12px;
  padding: 0 6px 0 36px;
  cursor: pointer;
}
.news-marquee p {
  display: inline-block;
  padding: 0 20px 0 0;
}
@media screen and (max-width: 1456px) {
  .news-marquee {
    max-width: none;
    min-width: auto;
  }
}

.header-function {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 6px;
  margin-left: auto;
}

.user-info {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 4px;
  height: 32px;
  padding: 4px 4px 4px 6px;
  border-radius: 16px;
  border: 1px solid transparent;
  cursor: pointer;
}
.logout .user-info {
  display: none;
}

.balance {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 4px;
  padding: 0 0 0 22px;
  font-size: 14px;
}

.user-deposit {
  min-width: 52px;
  height: 24px;
  padding: 0 12px;
  font-size: 14px;
  font-weight: bold;
  border-radius: 12px;
  line-height: 24px;
  cursor: pointer;
}

.currency-menu {
  position: absolute;
  display: flex;
  flex-direction: column;
  gap: 13px;
  width: 300px;
  max-height: 520px;
  border: 1px solid transparent;
  border-radius: 8px;
  padding: 10px;
  top: 47px;
  left: 0;
  overflow: auto;
}

.currency-list {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 5px 8px;
  border-radius: 6px;
  border: 2px solid transparent;
  cursor: pointer;
}
.currency-list:after {
  position: absolute;
  content: "";
  display: block;
  width: calc(100% - 16px);
  height: 1px;
  left: 8px;
  bottom: -9px;
}
.currency-list:last-of-type:after {
  display: none;
}

.currency-title {
  font-size: 14px;
  font-weight: bold;
}

.currency-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: bold;
}

.currency-flag {
  min-width: 22px;
  height: 22px;
}

.currency-name {
  min-width: 64px;
}

.currency-amount {
  display: flex;
  flex-direction: row;
  gap: 5px;
}
.currency-amount span {
  min-width: 40px;
}

.function-btn {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 4px;
  border-left: 1px solid transparent;
}
.function-btn:before {
  content: "";
  display: block;
  width: 1px;
  height: 28px;
}

.function-btn-item {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 32px;
  min-height: 32px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 24px;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
}
.logout .function-btn-item.mail {
  display: none;
}
.function-btn-item .unread {
  position: absolute;
  right: 2px;
  top: 5px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.area-user {
  position: relative;
}
.logout .area-user {
  display: none;
}

.photo {
  width: 32px;
  min-height: 32px;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
}

.user-menu {
  position: absolute;
  display: flex;
  flex-direction: column;
  gap: 3px;
  width: 164px;
  border-radius: 8px;
  padding: 6px;
  top: 52px;
  right: 0;
}
.user-menu .user-menu-list {
  position: relative;
  display: flex;
  align-items: center;
  height: 40px;
  padding: 0 0 0 42px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: bold;
  border: 1px solid transparent;
  cursor: pointer;
}

.logout-btn {
  display: flex;
  align-items: center;
  gap: 4px;
}
.logout-btn button {
  border-radius: 10px;
  min-width: 72px;
  height: 32px;
  border: 2px solid transparent;
  cursor: pointer;
}
.login .logout-btn {
  display: none;
}

.dropdown-language {
  position: relative;
}
.dropdown-language .dropdown-btn {
  width: 32px;
  height: 32px;
  border: 0;
  cursor: pointer;
}
.dropdown-language .list-option {
  display: flex;
  flex-direction: column;
  gap: 3px;
  position: absolute;
  right: 0;
  top: 52px;
  min-width: 203px;
  padding: 6px;
  border-radius: 8px;
}
.dropdown-language .list-option .country {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 11px;
  width: 190px;
  min-height: 40px;
  padding: 0 16px;
  border-radius: 8px;
  cursor: pointer;
}
.dropdown-language .list-option .country .flag {
  width: 20px;
  height: 20px;
}
.dropdown-language .list-option .country .name {
  font-size: 14px;
  font-weight: bold;
  transition: all 0.3s ease-in-out;
}
.login .dropdown-language {
  display: none;
}

.music {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
}
.music .off {
  display: none;
}
.music.off .on {
  display: none;
}
.music.off .off {
  display: flex;
}

.footer {
  padding: 15px 0 15px 240px;
  margin: 39px 0 0 0;
  transition: all 0.3s ease-in-out;
}
.fold .footer {
  padding-left: 60px;
}

.footer-wrap {
  display: flex;
  flex-direction: column;
  width: 1216px;
  margin: 0 auto;
}

.footer-providers {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  justify-items: center;
  gap: 10px;
  padding: 0 0 24px 0;
}
.footer-providers img {
  width: 74px;
}

.footer-link {
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: 4px;
  padding: 24px 0 0 0;
  font-size: 12px;
  border-top: 1px solid transparent;
}
.footer-link p {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 4px;
  cursor: pointer;
}
.footer-link p:after {
  content: "";
  display: block;
  width: 1px;
  height: 15px;
}
.footer-link p:last-of-type:after {
  display: none;
}

.copyright {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: center;
  padding: 10px 0 0 0;
  font-size: 12px;
}
.copyright .version {
  position: absolute;
  right: 0;
}

.slider {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.slider-img {
  display: flex;
  height: 309px;
}
.slider-img img {
  border-radius: 12px;
}

.slider-dot {
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: 5px;
}

.list-dot {
  width: 55px;
  height: 5px;
  border-radius: 3px;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
}
.list-dot.active {
  width: 20px;
}

.big-win {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 10px 0;
}
:root:has(.header.logout) .big-win {
  display: none;
}

.big-win-top {
  display: flex;
  flex-direction: row;
  gap: 8px;
}

.big-win-title {
  display: flex;
  flex-direction: row;
  align-items: center;
  font-weight: bold;
}
.big-win-title span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  margin: 0 8px 0 0;
  border-radius: 50%;
  border: 3px solid transparent;
}

.big-win-tab {
  display: flex;
  flex-direction: row;
  gap: 15px;
}
.big-win-tab .tab-list {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  font-size: 12px;
  font-weight: bold;
  min-height: 22px;
  padding: 0 4px;
  cursor: pointer;
}
.big-win-tab .tab-list:after {
  position: absolute;
  content: "";
  display: block;
  width: 0;
  height: 2px;
  bottom: -2px;
}
.big-win-tab .tab-list.active:after {
  width: 100%;
}

.big-win-list {
  display: flex;
  flex-direction: row;
  gap: 14px;
  border-radius: 10px;
  padding: 11px;
}

.big-win-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 57px;
  cursor: pointer;
}

.big-win-pic {
  position: relative;
  display: flex;
  width: 57px;
  height: 75px;
  border-radius: 10px;
  overflow: hidden;
}
.big-win-pic .providers-name {
  top: 66px;
  bottom: auto;
  font-size: 4px;
}

.big-win-img {
  width: 57px;
  height: 75px;
}

.big-win-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-weight: bold;
  gap: 4px;
}

.big-win-name {
  width: 57px;
  font-size: 9px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  text-align: center;
}

.big-win-amount {
  font-size: 7px;
  white-space: nowrap;
}

.copy-reminder {
  position: absolute;
  display: none;
  align-items: center;
  width: 92%;
  height: 0;
  left: 50%;
  top: 60px;
  transform: translateX(-50%);
  padding: 0 10px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: bold;
  overflow: hidden;
}
.copy-reminder.show {
  display: flex;
  animation: closeCopy 6s cubic-bezier(0.36, 0.66, 0.04, 1);
}

@keyframes closeCopy {
  0% {
    height: 0;
  }
  8.3% {
    height: 40px;
  }
  91.7% {
    height: 40px;
  }
  100% {
    height: 0;
  }
}
#betting-slip {
  position: relative;
}
#betting-slip .popup-content {
  gap: 0;
}

.profit {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 384px;
  border-radius: 10px 10px 0 0;
  padding: 12px;
}

.profit-title {
  font-size: 14px;
  font-weight: bold;
}

.profit-amount {
  font-size: 28px;
  font-weight: bold;
  margin: 8px 0 16px 0;
  padding: 0 0 0 24px;
}

.profit-detail {
  display: flex;
  flex-direction: row;
  width: 100%;
  border-radius: 10px;
  padding: 14px;
}

.profit-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  width: 50%;
  font-weight: bold;
}
.profit-item .title {
  font-size: 12px;
}
.profit-item .amount {
  font-size: 14px;
}

.midline {
  position: relative;
  width: 384px;
  height: 20px;
}
.midline .hr {
  position: absolute;
  width: 352px;
  left: 50%;
  top: 50%;
  transform: translate(-50%);
  border: 1px dashed transparent;
}
.midline:before, .midline:after {
  position: absolute;
  content: "";
  display: block;
  width: 16px;
  height: 16px;
  top: 50%;
  transform: translateY(-50%);
  border-radius: 50%;
  z-index: 1;
}
.midline:before {
  left: -11px;
}
.midline:after {
  right: -11px;
}

.betting-slip-info {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  width: 384px;
  padding: 12px 12px 0 12px;
}

.betting-slip-photo {
  width: 44px;
  height: 44px;
  border: 2px solid transparent;
  border-radius: 50%;
}

.betting-slip-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
}

.betting-slip-date {
  display: flex;
  flex-direction: row;
  gap: 4px;
  font-size: 12px;
}

.betting-slip-ident {
  display: flex;
  flex-direction: row;
  font-size: 12px;
}
.betting-slip-ident .ident {
  padding: 0 0 0 22px;
}
.betting-slip-ident .copy {
  width: 16px;
  height: 16px;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
}

.quickly-game {
  width: 384px;
  padding: 16px 12px 12px 12px;
}

.quickly-game-list {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  border-radius: 10px;
}

.quickly-game-pic {
  position: relative;
  width: 40px;
  height: 53px;
  border-radius: 5px;
  overflow: hidden;
}
.quickly-game-pic .game-logo {
  width: 8px;
  height: 5px;
  top: 46px;
}
.quickly-game-pic .providers-name {
  top: 47px;
  bottom: auto;
  font-size: 2px;
}

.quickly-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
}
.quickly-info .game-name {
  font-size: 14px;
}
.quickly-info .game-provider {
  font-size: 10px;
}

.play-now {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
}

.first-game {
  display: flex;
  flex-direction: column;
  padding: 335px 0 0 0;
}

.first-game-tab {
  position: sticky;
  top: 60px;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 2px;
  padding-top: 10px;
  z-index: 2;
}
.first-game-tab:before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: calc(100vw - 240px);
  height: 100%;
  transform: translateX(-50%);
  min-width: 1216px;
  z-index: -1;
  transition: all 0.3s ease-in-out;
}
.fold .first-game-tab:before {
  width: calc(100vw - 60px);
}
.first-game-tab .tab-list {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 120px;
  height: 50px;
  cursor: pointer;
}
.first-game-tab .tab-list .tab-list-icon {
  width: 24px;
  height: 24px;
}
.first-game-tab .tab-list .tab-list-text {
  font-weight: bold;
}
.first-game-tab .tab-list.active .tab-list-icon {
  position: relative;
  width: 44px;
  height: 44px;
  top: -6px;
}
.first-game-tab .tab-list.active .tab-list-text {
  display: none;
}
.first-game-tab .tab-list:hover .first-game-submenu {
  display: flex;
}

.first-game-submenu {
  display: none;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  position: absolute;
  left: 0;
  top: 60px;
  width: 100%;
  padding: 24px 10px;
  border-radius: 0 0 24px 24px;
  z-index: -1;
}

.game-submenu-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 32px;
  border-radius: 8px;
}
.game-submenu-arrow.hidden {
  opacity: 0.5;
  cursor: not-allowed;
}

.game-submenu-wrap {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  justify-content: space-between;
  gap: 10px 14px;
}

.game-submenu-list {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  width: 212px;
  height: 69px;
  padding: 0 0 0 14px;
  border: 2px solid transparent;
  border-radius: 12px;
}
.game-submenu-list:after {
  position: absolute;
  right: -10px;
  content: "";
  display: flex;
  align-items: center;
  width: 1px;
  height: 40px;
}
.game-submenu-list:nth-child(5n):after, .game-submenu-list:last-of-type:after {
  display: none;
}

.game-submenu-icon {
  width: 70px;
}

.game-submenu-text {
  font-size: 14px;
  font-weight: bold;
}

.first-game-item {
  display: flex;
  flex-direction: column;
  padding: 5px 0;
  border-radius: 18px;
}

.live-sports {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 15px 0 0 0;
}
.live-sports .game-item-arrow {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  gap: 4px;
}
.live-sports .game-item-arrow .btn-refresh {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 32px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
}
.live-sports .game-item-arrow .btn-all-game {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 43px;
  height: 32px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: bold;
  padding: 0 12px;
  margin-right: 8px;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
}
.live-sports .game-item-arrow .btn-all-game.hidden {
  display: none;
}
.live-sports .game-item-arrow .btn-all-game:after {
  font-family: "Font Awesome 6 Free";
  font-weight: bold;
  content: "\f105";
  display: flex;
  font-size: 12px;
}
.live-sports .game-item-arrow .btn-chang-game {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 32px;
  height: 32px;
  font-size: 12px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
}
.live-sports .game-item-arrow .btn-chang-game.hidden {
  opacity: 0.5;
  cursor: not-allowed;
}

.live-sports-title {
  font-weight: bold;
}

.live-sports-wrap {
  display: flex;
  flex-direction: row;
  gap: 8px;
}

.live-sports-list {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 100%;
  height: 200px;
  border-radius: 12px;
  padding: 10px 12px;
  font-size: 14px;
  font-weight: bold;
  box-sizing: border-box;
  cursor: pointer;
}

.live-sports-top {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 0 0 0 6px;
}

.sports-type {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.sports-type:after {
  content: "・";
  display: block;
}

.live-sports-content {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}

.team-away, .score-state, .team-home {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 33.33%;
}

.score-state {
  gap: 8px;
}
.score-state .score {
  display: flex;
  flex-direction: row;
  gap: 2px;
  font-size: 24px;
}

.team-logo {
  width: 50px;
  height: 50px;
}

.team-name {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  width: 100%;
  text-align: center;
}

.live-sports-odds {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.away-win, .draw, .home-win {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  width: 33.3%;
  min-height: 40px;
  border-radius: 8px;
  gap: 8px;
}

.latest-round-race {
  font-weight: bold;
}

.round-race-tab {
  display: flex;
  flex-direction: row;
  border-radius: 10px;
  font-size: 14px;
  padding: 4px;
}
.round-race-tab .tab-list {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 132px;
  height: 35px;
  border-radius: 8px;
  padding: 0 8px;
  font-weight: bold;
  cursor: pointer;
}

.round-race-content {
  display: flex;
  flex-direction: column;
  width: 100%;
  margin: 12px 0;
  border-radius: 8px;
  font-size: 14px;
  overflow: hidden;
}
.round-race-content .table-top tr, .round-race-content .table-content tr {
  display: flex;
  justify-content: space-between;
  text-align: center;
}
.round-race-content .table-top tr td, .round-race-content .table-content tr td {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 45px;
  padding: 12px 16px;
}
.round-race-content .table-top tr td span, .round-race-content .table-content tr td span {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.round-race-content .table-top tr td:nth-child(1), .round-race-content .table-content tr td:nth-child(1) {
  justify-content: flex-start;
}
.round-race-content .table-top tr td:nth-last-child(1), .round-race-content .table-content tr td:nth-last-child(1) {
  justify-content: flex-end;
  text-align: right;
}
.round-race-content .table-top tr td.profit, .round-race-content .table-content tr td.profit {
  align-items: flex-end;
  flex-direction: row;
}
.round-race-content .table-top tr td.bet-amount, .round-race-content .table-top tr td.profit, .round-race-content .table-content tr td.bet-amount, .round-race-content .table-content tr td.profit {
  gap: 4px;
}
.round-race-content .table-top tr td.bet-amount:after, .round-race-content .table-top tr td.profit:after, .round-race-content .table-content tr td.bet-amount:after, .round-race-content .table-content tr td.profit:after {
  content: "";
  display: block;
  width: 20px;
  height: 20px;
}
.round-race-content .table-content .game-name {
  gap: 4px;
}
.round-race-content .table-content .game-name:before {
  content: "";
  display: block;
  width: 20px;
  height: 20px;
}

/*-------------- 遊戲頁 --------------*/
.game-top-function {
  display: flex;
  flex-direction: column;
  padding: 15px 0 0 0;
}

.function-search {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  width: 100%;
  height: 36px;
  border-radius: 8px;
  padding: 0 10px;
  border: 1px solid transparent;
}
.function-search .search-clear {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
}

.function-category {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 2px;
  padding: 15px 0 0 0;
}
.function-category .btn-category {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  min-width: 90px;
  gap: 5px;
  height: 42px;
  border-radius: 12px;
  padding: 0 15px;
  font-weight: bold;
  cursor: pointer;
  transition: background-color 0.3s ease-in-out;
}
.function-category .btn-category .category-icon {
  width: 24px;
  height: 24px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  transition: background 0.3s ease-in-out;
}

.game-lobby {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 15px 0 0 0;
}

.game-item {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.game-item-content {
  display: flex;
  flex-direction: row;
  gap: 8px;
}

.game-item-list {
  position: relative;
  display: flex;
  width: 145px;
  height: 193px;
  border-radius: 16px;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
}
.game-item-list:hover {
  transform: translateY(-4px);
}

.item-title-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 105px;
  height: 105px;
  border-radius: 16px;
  border: 2px solid transparent;
}
.item-title-icon img {
  object-fit: scale-down;
}

.game-list-provides {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: space-between;
}

.provides-list {
  display: flex;
  flex-direction: row;
  gap: 6px;
}

.provides-list-item {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 65px;
  height: 65px;
  border: 1px solid transparent;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
}
.provides-list-item img {
  width: 50px;
}

.provides-arrow {
  display: flex;
  flex-direction: row;
  gap: 8px;
}
.provides-arrow .btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  font-size: 12px;
  cursor: pointer;
}
.provides-arrow .btn.hidden {
  opacity: 0.5;
  cursor: not-allowed;
}

.game-supplier-list {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0.4rem;
  padding: 1.2rem 0;
}

.game-supplier-item {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 168px;
  height: 70px;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
}
.game-supplier-item img {
  width: 64px;
}

.providers-name {
  position: absolute;
  left: 50%;
  bottom: 6px;
  font-size: 0.6875rem;
  font-weight: bold;
  transform: translateX(-50%);
}

/*------------ 最新消息 - 彈窗 ------------*/
#index-popup-news .other .rule-gaming {
  background: url(../images/common/btn-rule-gaming.webp) no-repeat center;
  background-size: cover;
}
#index-popup-news .other .rule-service {
  background: url(../images/common/btn-rule-service.webp) no-repeat center;
  background-size: cover;
}
#index-popup-news .other .text {
  color: #fff;
}

/*------------ 優惠活動 ------------*/
#discount .area-content {
  padding: 0;
}
#discount .area-content .list-discount {
  gap: 10px;
}
#discount .area-content .list-discount .item {
  border-radius: 12px;
}
#discount .area-content .list-discount .item .info-content {
  font-size: 14px;
  padding: 12px 18px;
}

#discount .page-title, #discount-detail .page-title {
  gap: 0.8rem;
}
#discount .page-title:before, #discount-detail .page-title:before {
  content: "";
  width: 6px;
  height: 32px;
  border-radius: 4px;
}
#discount .area-content .btn-back svg, #discount-detail .area-content .btn-back svg {
  width: 12px;
  height: 12px;
  border-radius: 8px;
  padding: 0.6rem;
}
#discount .area-content .discount-title .btn-apply, #discount-detail .area-content .discount-title .btn-apply {
  height: 38px;
  border-radius: 8px;
  font-weight: bold;
}
#discount .area-other .area-title, #discount-detail .area-other .area-title {
  display: flex;
  align-items: center;
  gap: 0.8em;
}
#discount .area-other .area-title:before, #discount .area-other .area-title:after, #discount-detail .area-other .area-title:before, #discount-detail .area-other .area-title:after {
  content: "";
  display: flex;
  width: 90px;
  height: 2px;
}
#discount .area-other .list .item, #discount-detail .area-other .list .item {
  border-radius: 10px;
}
#discount .area-other .btn-more, #discount-detail .area-other .btn-more {
  font-size: 14px;
  font-weight: bold;
  min-width: 80px;
  height: 36px;
  border-radius: 8px;
}

#quickpay-qrcode .time-left {
  display: flex;
  flex-direction: row;
  gap: 0.3125rem;
}
#quickpay-qrcode .qrcode-img {
  width: 200px;
  height: 200px;
  padding: 0.85rem;
  border-radius: 0.625rem;
}

/*------------ 存取款 ------------*/
#withdraw-popup-amount .btn-option, #game-surface-popup-deposit .btn-option {
  font-size: 0.8rem;
  padding: 0.4rem 0.8rem;
  border-radius: 10px;
}

#deposit .list-content .hr-vertical {
  display: none;
}

#deposit .input-content.select, #game-surface-popup-deposit .input-content.select, #withdraw-popup-add .input-content.select {
  border-radius: 8px;
}
#deposit .input-content.select .btn-select, #game-surface-popup-deposit .input-content.select .btn-select, #withdraw-popup-add .input-content.select .btn-select {
  border-radius: 8px;
}
#deposit .input-content .clear-btn, #game-surface-popup-deposit .input-content .clear-btn, #withdraw-popup-add .input-content .clear-btn {
  border-radius: 6px;
}

#game-surface .game-header .btn-list .btn {
  border-radius: 8px;
}
#game-surface .game-header .btn-list .btn.close-game {
  border: 2px solid transparent;
}
#game-surface .game-header .btn.screen {
  border: 2px solid transparent;
}

#game-surface-popup-deposit .deposit-btn {
  width: 800px;
}
#game-surface-popup-deposit .list-content .hr-vertical {
  display: none;
}

#withdraw .withdraw-wrap .withdraw-content .withdraw-item .input-content .clear-btn {
  border-radius: 6px;
}
#withdraw .wallet-text:before {
  content: "";
  display: block;
  width: 20px;
  height: 20px;
}

/*------------ 聊天室 ------------*/
#chatroom-under-member .page-content-list .area-page-content .chat-surface .input-text {
  border-radius: 8px;
}

/*------------ 投注紀錄 ------------*/
#bet-record .area-function .list-btn-function .input-search {
  border-radius: 8px;
}

/*------------ 我的推廣 ------------*/
#promote-overview .area-content .area-receive-award .btn-receive {
  border-radius: 8px;
}

/*------------ 簽到彈窗 ------------*/
#index-popup-check .popup-content .area {
  align-items: start;
}
#index-popup-check .popup-content .area .list .btn-check .btn-img {
  height: 33px;
}
#index-popup-check .popup-content .area .list .btn-check.confirmed .btn-img {
  background-position: center top;
}
#index-popup-check .popup-btn .btn-send {
  border-radius: 4px;
}

/*------------ 其他頁面 ------------*/
#support-404 .content .title-text, #support-error .content .title-text {
  align-items: center;
}
#support-404 .content .btn-back, #support-error .content .btn-back {
  display: flex;
  align-items: center;
  justify-content: center;
}

/*--------- RoadMap ----------*/
#roadmap .roadmap-top, #roadmap .roadmap-content {
  width: 1216px;
  margin: 0 auto;
}
#roadmap .user-photo {
  border-radius: 50%;
  border: 2px solid transparent;
}
#roadmap .user-vip {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.2rem;
  border-radius: 4px;
  padding: 0.1em 0.8rem 0.1rem 1.4rem;
  transform: skewX(-15deg);
  width: fit-content;
  font-size: 0.8rem;
  font-weight: bold;
  margin-bottom: 0.6rem;
}
#roadmap .user-vip:before {
  content: "";
  display: block;
  position: absolute;
  min-width: 26px;
  height: 26px;
  left: -10px;
  top: 50%;
  transform: translateY(-50%) skewX(15deg);
}
#roadmap .user-account {
  font-size: 1.2rem;
  font-weight: bold;
}
#roadmap .user-amount {
  display: flex;
  flex-direction: row;
  align-items: center;
  font-size: 1.2rem;
  font-weight: bold;
  gap: 0.4rem;
  padding: 0 0 0 24px;
}
#roadmap .flow-audit {
  padding: 0 0 0 1rem;
  gap: 0.625rem;
}
#roadmap .flow-audit .flow-audit-btn {
  font-size: 0.875rem;
  font-weight: bold;
  padding: 0.375rem 1rem;
  border-radius: 20px;
}
#roadmap .flow-audit .flow-audit-btn:before {
  width: 24px;
  height: 24px;
}
#roadmap .flow-audit .flow-audit-info .flow-audit-icon {
  width: 26px;
  height: 26px;
}
#roadmap .flow-audit .flow-audit-info .flow-audit-direction {
  padding: 1.25rem 42px;
  border-radius: 0.625rem;
  min-width: 230px;
  right: -18px;
  top: 50px;
}
#roadmap .flow-audit .flow-audit-info .flow-audit-direction span {
  font-weight: bold;
}
#roadmap .flow-audit .flow-audit-info .flow-audit-direction li {
  list-style-type: decimal;
  font-size: 0.875rem;
  margin: 0 0 0 1.2rem;
}
#roadmap .flow-audit .flow-audit-info .flow-audit-direction:before {
  top: -16px;
  right: 20px;
}
#roadmap .acc-function-bar {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  width: 100%;
  gap: 1rem;
  padding: 0.4rem 1rem;
  border-radius: 8px;
}
#roadmap .acc-function-bar .bar-item {
  display: flex;
  flex-direction: column;
  width: 100%;
  gap: 0.4rem;
}
#roadmap .acc-function-bar .bar-item .bar-title {
  display: flex;
  flex-direction: row;
  gap: 0.4rem;
  font-size: 0.8rem;
}
#roadmap .acc-function-bar .bar-item .bar-title .bar-text {
  display: flex;
  flex-direction: row;
  gap: 0.4rem;
}
#roadmap .acc-function-bar .bar-item .bar-title .bar-text:after {
  content: ":";
  display: block;
}
#roadmap .acc-function-bar .bar-item .bar-percent {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.2rem;
  width: 100%;
  height: 16px;
  border-radius: 16px;
  border: 1px solid transparent;
  padding: 0 0.2rem;
}
#roadmap .acc-function-bar .bar-item .bar-percent .bar-bg {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  height: 8px;
  border-radius: 16px;
}
#roadmap .acc-function-bar .bar-item .bar-percent .bar-bg .bar-number {
  position: relative;
  font-size: 10px;
  font-weight: bold;
  right: -3.2rem;
}
#roadmap .acc-function-bar .bar-item .bar-percent .bar-bg.inside .bar-number {
  right: 0.6rem;
}
#roadmap .function-link .function-link-item {
  border-radius: 14px;
  transition: all 0.3s ease-in-out;
}
#roadmap .function-link .function-link-item .link-icon {
  width: 52px;
  height: 52px;
  border-radius: 16px;
  background-repeat: no-repeat;
  background-position: center;
}
#roadmap .function-link .function-link-item .link-text {
  font-weight: bold;
}
#roadmap .roadmap-link-item {
  border-radius: 12px;
  gap: 0.75rem;
  padding: 0.45rem 0.5rem !important;
}
#roadmap .roadmap-link-item .link-title {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  font-weight: bold;
  padding: 0 0 0 0.2rem;
}
#roadmap .roadmap-link-item .link-content {
  gap: 0.4rem;
}
#roadmap .roadmap-link-item .link-content .link-list {
  width: 50%;
  gap: 0.5rem;
}
#roadmap .roadmap-link-item .link-content .link-list .link-item {
  position: relative;
  min-height: 40px;
  border-radius: 8px;
  padding-left: 2.6rem !important;
  padding-right: 0.6rem !important;
}
#roadmap .roadmap-link-item .link-content .link-list .link-item.no-data .verify-text.no-data {
  display: flex;
}
#roadmap .roadmap-link-item .link-content .link-list .link-item.review .verify-text.review {
  display: flex;
}
#roadmap .roadmap-link-item .link-content .link-list .link-item.success .verify-text.success {
  display: flex;
}
#roadmap .roadmap-link-item .link-content .link-list .link-item.reject .verify-text.reject {
  display: flex;
}
#roadmap .roadmap-link-item .link-content .link-list .link-item .link-item-text {
  font-size: 0.875rem;
}
#roadmap .roadmap-link-item .link-content .link-list .link-item .link-item-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  min-width: 24px;
  height: 24px;
  border-radius: 8px;
  font-size: 10px;
}

/*----------- 流水稽查提示彈窗 -----------*/
#popup-flow-audit .flow-audit {
  gap: 0.375rem;
}
#popup-flow-audit .flow-audit .flow-audit-title {
  font-size: 1.5rem;
  font-weight: bold;
  padding: 4.3754rem 0 0 0;
  background-repeat: no-repeat;
  background-position: top center;
}
#popup-flow-audit .flow-audit .flow-audit-text {
  font-size: 0.875rem;
}

/*------------ 會員等級 ------------*/
#my-info-member .area-content .vip-card {
  position: relative;
  background-repeat: no-repeat;
  background-position: left top;
  width: 320px;
  min-width: 320px;
  height: 130px;
  border: 1px solid transparent;
  overflow: initial;
}
#my-info-member .area-content .vip-card .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;
}
#my-info-member .area-content .vip-card.now {
  min-width: 320px;
  max-height: 130px;
}
#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%;
  pointer-events: none;
  opacity: 0.4;
}
#my-info-member .area-content .vip-card .tag {
  font-size: 0.875rem;
  font-weight: normal;
}
#my-info-member .area-content .info-content .info-bar-area .info-bar-item .info-bar-percent {
  padding: 0 0.2rem;
  border: 1px solid transparent;
}
#my-info-member .area-content .info-content .info-bar-area .info-bar-item .info-bar-percent .info-bar-bg {
  height: 8px;
}
#my-info-member .area-content .info-content .info-bar-area .info-bar-item .info-bar-percent .info-bar-bg .info-bar-number {
  font-size: 0.675rem;
  font-weight: bold;
}
#my-info-member .area-vip-now .content .info-content {
  gap: 0.3em;
}
#my-info-member .area-vip-now .content .info-content .list-total {
  height: 41px;
}
@media (max-width: 1280px) {
  #my-info-member .area-vip-now .content .vip-card {
    align-self: center;
  }
}
#my-info-member .area-vip-info .area-list .list {
  padding-top: 1.4rem;
}

/*------------ 會員等級 ------------*/
#my-info-basic .item-field .field-title .btn-edit {
  border-radius: 8px;
}
#my-info-basic .item-field .field-content {
  border-radius: 8px;
}

/*------------ 公告 / 站內信 ------------*/
#news-notify .reset, #news-mailbox .reset {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 6px;
}
#news-notify .btn-back, #news-notify .btn-page-prev, #news-notify .btn-page-next, #news-mailbox .btn-back, #news-mailbox .btn-page-prev, #news-mailbox .btn-page-next {
  border-radius: 6px;
}

/*------------ 登入註冊 ------------*/
.register-bankcard-verify .dropdown-btn {
  border-radius: 8px;
}

/*------------ 讀取 ------------*/
#loading .img-loading {
  display: block;
  opacity: 0.85;
  text-align: left;
  box-sizing: border-box;
  background-clip: padding-box;
  border-radius: 50%;
  width: 80px;
  height: 80px;
  background: none;
}

.img-loading:after, .img-loading:before {
  content: "";
  position: absolute;
  margin: -6px;
  box-sizing: inherit;
  width: inherit;
  height: inherit;
  border-radius: inherit;
  opacity: 1;
  border: inherit;
}/*# sourceMappingURL=style.css.map */