@charset "UTF-8";
html {
  font-size: 16px;
}

@font-face {
  font-family: "微软雅黑";
  font-style: normal;
  font-weight: 600;
  font-display: auto;
  src: local("微软雅黑粗体"), local("Microsoft Yahei UI Bold"), local("Microsoft Yahei Bold");
}
@font-face {
  font-family: "微软雅黑";
  font-style: normal;
  font-weight: 400;
  font-display: auto;
  src: local("微软雅黑"), local("Microsoft Yahei");
}
@font-face {
  font-family: "Noto Sans SC";
  font-style: normal;
  font-weight: 400;
  font-display: auto;
  src: url(../fonts/noto-sans-sc-regular.woff2) format("woff2");
  src: local(""), url(../fonts/noto-sans-sc-regular.woff2) format("woff2");
}
@font-face {
  font-family: "Noto Sans SC";
  font-style: normal;
  font-weight: 500;
  font-display: auto;
  src: url(../fonts/noto-sans-sc-500.woff2) format("woff2");
  src: local(""), url(../fonts/noto-sans-sc-500.woff2) format("woff2");
}
@font-face {
  font-family: "Noto Sans SC";
  font-style: normal;
  font-weight: 700;
  font-display: auto;
  src: url(../fonts/noto-sans-sc-700.woff2) format("woff2");
  src: local(""), url(../fonts/noto-sans-sc-700.woff2) format("woff2");
}
@font-face {
  font-family: "Noto Sans SC";
  font-style: normal;
  font-weight: 900;
  font-display: auto;
  src: url(../fonts/noto-sans-sc-900.woff2) format("woff2");
  src: local(""), url(../fonts/noto-sans-sc-900.woff2) format("woff2");
}
a {
  transition: all 0.2s cubic-bezier(0.785, 0.135, 0.15, 0.86);
  transition-timing-function: cubic-bezier(0.785, 0.135, 0.15, 0.86);
}

[class*=alert-] {
  margin: 0.5rem 0 0;
  padding: 0.5rem 0.75rem;
  border-radius: 12px;
  font-size: 0.75rem;
  display: flex;
  justify-content: flex-start;
  align-items: baseline;
}
[class*=alert-] i {
  margin-right: 10px;
}

.alert-default {
  color: #aaa;
  background-color: #eee;
}

.alert-primary {
  color: #0b73d3;
  background-color: #e6f3ff;
}

.alert-danger {
  color: #fff;
  background-color: #ff7a7a;
}

.alert-warning {
  color: #e04847;
  background-color: #fff5da;
}

.alert-success {
  color: #1bdc68;
  background-color: #cfffe2;
}

.text-blue {
  color: #196ed0;
}

.label-blue {
  color: #fff;
  background-color: #196ed0;
  padding: 2px 6px;
}

.text-red {
  color: #ea4444;
}

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

.label-red {
  color: #fff;
  background-color: #ea4444;
  padding: 2px 6px;
}

.text-green {
  color: #4c8c82;
}

.label-green {
  color: #fff;
  background-color: #4c8c82;
  padding: 2px 6px;
}

.text-grey {
  color: #eee;
}

.label-grey {
  color: #aaa;
  background-color: #eee;
  padding: 2px 6px;
}

.text-orange {
  color: #ffeecd;
}

.label-orange {
  color: #ffa723;
  background-color: #ffeecd;
  padding: 2px 6px;
}

/*!
 * Font Awesome Free 5.11.2 by @fontawesome - https://fontawesome.com
 * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
 */
.fa,
.fab,
.fad,
.fal,
.far,
.fas {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  line-height: 1;
}

.fa-lg {
  font-size: 1.3333333333em;
  line-height: 0.75em;
  vertical-align: -0.0667em;
}

.fa-xs {
  font-size: 0.75em;
}

.fa-sm {
  font-size: 0.875em;
}

.fa-1x {
  font-size: 1em;
}

.fa-2x {
  font-size: 2em;
}

.fa-3x {
  font-size: 3em;
}

.fa-4x {
  font-size: 4em;
}

.fa-5x {
  font-size: 5em;
}

.fa-6x {
  font-size: 6em;
}

.fa-7x {
  font-size: 7em;
}

.fa-8x {
  font-size: 8em;
}

.fa-9x {
  font-size: 9em;
}

.fa-10x {
  font-size: 10em;
}

.fa-fw {
  text-align: center;
  width: 1.25em;
}

.fa-stack {
  display: inline-block;
  height: 2em;
  line-height: 2em;
  position: relative;
  vertical-align: middle;
  width: 2.5em;
}

.fa-stack-1x,
.fa-stack-2x {
  left: 0;
  position: absolute;
  text-align: center;
  width: 100%;
}

.fa-stack-1x {
  line-height: inherit;
}

.fa-stack-2x {
  font-size: 2em;
}

.fa-inverse {
  color: #fff;
}

.fa-angle-left:before {
  content: "\f104";
}

.fa-angle-right:before {
  content: "\f105";
}

.fa-angle-up:before {
  content: "\f106";
}

.fa-arrow-left:before {
  content: "\f060";
}

.fa-arrow-right:before {
  content: "\f061";
}

.fa-circle:before {
  content: "\f111";
}

.fa-cloud-upload-alt:before {
  content: "\f382";
}

.fa-copyright:before {
  content: "\f1f9";
}

.fa-edit:before {
  content: "\f044";
}

.fa-envelope:before {
  content: "\f0e0";
}

.fa-exclamation:before {
  content: "\f12a";
}

.fa-exclamation-circle:before {
  content: "\f06a";
}

.fa-exclamation-triangle:before {
  content: "\f071";
}

.fa-eye:before {
  content: "\f06e";
}

.fa-eye-slash:before {
  content: "\f070";
}

.fa-facebook:before {
  content: "\f09a";
}

.fa-facebook-f:before {
  content: "\f39e";
}

.fa-facebook-messenger:before {
  content: "\f39f";
}

.fa-facebook-square:before {
  content: "\f082";
}

.fa-fax:before {
  content: "\f1ac";
}

.fa-handshake:before {
  content: "\f2b5";
}

.fa-home:before {
  content: "\f015";
}

.fa-instagram:before {
  content: "\f16d";
}

.fa-line:before {
  content: "\f3c0";
}

.fa-long-arrow-alt-left:before {
  content: "\f30a";
}

.fa-long-arrow-alt-right:before {
  content: "\f30b";
}

.fa-map-marked-alt:before {
  content: "\f5a0";
}

.fa-map-marker-alt:before {
  content: "\f3c5";
}

.fa-minus:before {
  content: "\f068";
}

.fa-phone:before {
  content: "\f095";
}

.fa-phone-alt:before {
  content: "\f879";
}

.fa-plus:before {
  content: "\f067";
}

.fa-quote-left:before {
  content: "\f10d";
}

.fa-quote-right:before {
  content: "\f10e";
}

.fa-redo-alt:before {
  content: "\f2f9";
}

.fa-search:before {
  content: "\f002";
}

.fa-search-plus:before {
  content: "\f00e";
}

.fa-sitemap:before {
  content: "\f0e8";
}

/*!
 * Font Awesome Free 5.11.2 by @fontawesome - https://fontawesome.com
 * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
 */
@font-face {
  font-family: "Font Awesome 5 Free";
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url(../fonts/fa-solid-900.woff);
  src: url(../fonts/fa-solid-900.woff) format("woff"), url(../fonts/fa-solid-900.woff2) format("woff2");
}
.fa,
.fas {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
}

@font-face {
  font-family: swiper-icons;
  src: url("data:application/font-woff;charset=utf-8;base64, d09GRgABAAAAAAZgABAAAAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAAGRAAAABoAAAAci6qHkUdERUYAAAWgAAAAIwAAACQAYABXR1BPUwAABhQAAAAuAAAANuAY7+xHU1VCAAAFxAAAAFAAAABm2fPczU9TLzIAAAHcAAAASgAAAGBP9V5RY21hcAAAAkQAAACIAAABYt6F0cBjdnQgAAACzAAAAAQAAAAEABEBRGdhc3AAAAWYAAAACAAAAAj//wADZ2x5ZgAAAywAAADMAAAD2MHtryVoZWFkAAABbAAAADAAAAA2E2+eoWhoZWEAAAGcAAAAHwAAACQC9gDzaG10eAAAAigAAAAZAAAArgJkABFsb2NhAAAC0AAAAFoAAABaFQAUGG1heHAAAAG8AAAAHwAAACAAcABAbmFtZQAAA/gAAAE5AAACXvFdBwlwb3N0AAAFNAAAAGIAAACE5s74hXjaY2BkYGAAYpf5Hu/j+W2+MnAzMYDAzaX6QjD6/4//Bxj5GA8AuRwMYGkAPywL13jaY2BkYGA88P8Agx4j+/8fQDYfA1AEBWgDAIB2BOoAeNpjYGRgYNBh4GdgYgABEMnIABJzYNADCQAACWgAsQB42mNgYfzCOIGBlYGB0YcxjYGBwR1Kf2WQZGhhYGBiYGVmgAFGBiQQkOaawtDAoMBQxXjg/wEGPcYDDA4wNUA2CCgwsAAAO4EL6gAAeNpj2M0gyAACqxgGNWBkZ2D4/wMA+xkDdgAAAHjaY2BgYGaAYBkGRgYQiAHyGMF8FgYHIM3DwMHABGQrMOgyWDLEM1T9/w8UBfEMgLzE////P/5//f/V/xv+r4eaAAeMbAxwIUYmIMHEgKYAYjUcsDAwsLKxc3BycfPw8jEQA/gZBASFhEVExcQlJKWkZWTl5BUUlZRVVNXUNTQZBgMAAMR+E+gAEQFEAAAAKgAqACoANAA+AEgAUgBcAGYAcAB6AIQAjgCYAKIArAC2AMAAygDUAN4A6ADyAPwBBgEQARoBJAEuATgBQgFMAVYBYAFqAXQBfgGIAZIBnAGmAbIBzgHsAAB42u2NMQ6CUAyGW568x9AneYYgm4MJbhKFaExIOAVX8ApewSt4Bic4AfeAid3VOBixDxfPYEza5O+Xfi04YADggiUIULCuEJK8VhO4bSvpdnktHI5QCYtdi2sl8ZnXaHlqUrNKzdKcT8cjlq+rwZSvIVczNiezsfnP/uznmfPFBNODM2K7MTQ45YEAZqGP81AmGGcF3iPqOop0r1SPTaTbVkfUe4HXj97wYE+yNwWYxwWu4v1ugWHgo3S1XdZEVqWM7ET0cfnLGxWfkgR42o2PvWrDMBSFj/IHLaF0zKjRgdiVMwScNRAoWUoH78Y2icB/yIY09An6AH2Bdu/UB+yxopYshQiEvnvu0dURgDt8QeC8PDw7Fpji3fEA4z/PEJ6YOB5hKh4dj3EvXhxPqH/SKUY3rJ7srZ4FZnh1PMAtPhwP6fl2PMJMPDgeQ4rY8YT6Gzao0eAEA409DuggmTnFnOcSCiEiLMgxCiTI6Cq5DZUd3Qmp10vO0LaLTd2cjN4fOumlc7lUYbSQcZFkutRG7g6JKZKy0RmdLY680CDnEJ+UMkpFFe1RN7nxdVpXrC4aTtnaurOnYercZg2YVmLN/d/gczfEimrE/fs/bOuq29Zmn8tloORaXgZgGa78yO9/cnXm2BpaGvq25Dv9S4E9+5SIc9PqupJKhYFSSl47+Qcr1mYNAAAAeNptw0cKwkAAAMDZJA8Q7OUJvkLsPfZ6zFVERPy8qHh2YER+3i/BP83vIBLLySsoKimrqKqpa2hp6+jq6RsYGhmbmJqZSy0sraxtbO3sHRydnEMU4uR6yx7JJXveP7WrDycAAAAAAAH//wACeNpjYGRgYOABYhkgZgJCZgZNBkYGLQZtIJsFLMYAAAw3ALgAeNolizEKgDAQBCchRbC2sFER0YD6qVQiBCv/H9ezGI6Z5XBAw8CBK/m5iQQVauVbXLnOrMZv2oLdKFa8Pjuru2hJzGabmOSLzNMzvutpB3N42mNgZGBg4GKQYzBhYMxJLMlj4GBgAYow/P/PAJJhLM6sSoWKfWCAAwDAjgbRAAB42mNgYGBkAIIbCZo5IPrmUn0hGA0AO8EFTQAA") format("woff");
  font-weight: 400;
  font-style: normal;
}
.swiper-container {
  margin-left: auto;
  margin-right: auto;
  position: relative;
  overflow: hidden;
  list-style: none;
  padding: 0;
  z-index: 1;
}

.swiper-container-vertical > .swiper-wrapper {
  flex-direction: column;
}

.swiper-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 1;
  display: flex;
  transition-property: transform;
  box-sizing: content-box;
}

.swiper-container-android .swiper-slide,
.swiper-wrapper {
  transform: translate3d(0, 0, 0);
}

.swiper-container-multirow > .swiper-wrapper {
  flex-wrap: wrap;
}

.swiper-container-multirow-column > .swiper-wrapper {
  flex-wrap: wrap;
  flex-direction: column;
}

.swiper-container-free-mode > .swiper-wrapper {
  transition-timing-function: ease-out;
  margin: 0 auto;
}

.swiper-container-pointer-events {
  touch-action: pan-y;
}

.swiper-container-pointer-events.swiper-container-vertical {
  touch-action: pan-x;
}

.swiper-slide {
  flex-shrink: 0;
  width: 100%;
  position: relative;
  transition-property: transform;
}

.swiper-slide-invisible-blank {
  visibility: hidden;
}

.swiper-container-autoheight,
.swiper-container-autoheight .swiper-slide {
  height: auto;
}

.swiper-container-autoheight .swiper-wrapper {
  align-items: flex-start;
  transition-property: transform, height;
}

.swiper-container-3d {
  perspective: 1200px;
}

.swiper-container-3d .swiper-cube-shadow,
.swiper-container-3d .swiper-slide,
.swiper-container-3d .swiper-slide-shadow-bottom,
.swiper-container-3d .swiper-slide-shadow-left,
.swiper-container-3d .swiper-slide-shadow-right,
.swiper-container-3d .swiper-slide-shadow-top,
.swiper-container-3d .swiper-wrapper {
  transform-style: preserve-3d;
}

.swiper-container-3d .swiper-slide-shadow-bottom,
.swiper-container-3d .swiper-slide-shadow-left,
.swiper-container-3d .swiper-slide-shadow-right,
.swiper-container-3d .swiper-slide-shadow-top {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 10;
}

.swiper-container-3d .swiper-slide-shadow-left {
  background-image: linear-gradient(to left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
}

.swiper-container-3d .swiper-slide-shadow-right {
  background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
}

.swiper-container-3d .swiper-slide-shadow-top {
  background-image: linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
}

.swiper-container-3d .swiper-slide-shadow-bottom {
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
}

.swiper-container-css-mode > .swiper-wrapper {
  overflow: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.swiper-container-css-mode > .swiper-wrapper::-webkit-scrollbar {
  display: none;
}

.swiper-container-css-mode > .swiper-wrapper > .swiper-slide {
  scroll-snap-align: start start;
}

.swiper-container-horizontal.swiper-container-css-mode > .swiper-wrapper {
  scroll-snap-type: x mandatory;
}

.swiper-container-vertical.swiper-container-css-mode > .swiper-wrapper {
  scroll-snap-type: y mandatory;
}

.swiper-pagination {
  text-align: center;
  transition: 0.3s opacity;
  transform: translate3d(0, 0, 0);
  z-index: 10;
}

.swiper-pagination.swiper-pagination-hidden {
  opacity: 0;
}

.swiper-container-horizontal > .swiper-pagination-bullets,
.swiper-pagination-custom,
.swiper-pagination-fraction {
  bottom: 10px;
  left: 0;
  width: 100%;
}

.swiper-pagination-bullets-dynamic {
  overflow: hidden;
  font-size: 0;
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
  transform: scale(0.33);
  position: relative;
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active {
  transform: scale(1);
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-main {
  transform: scale(1);
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev {
  transform: scale(0.66);
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev {
  transform: scale(0.33);
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next {
  transform: scale(0.66);
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next {
  transform: scale(0.33);
}

.swiper-pagination-bullet {
  width: 8px;
  height: 8px;
  display: inline-block;
  border-radius: 50%;
  background: #000;
  opacity: 0.2;
}

button.swiper-pagination-bullet {
  border: none;
  margin: 0;
  padding: 0;
  box-shadow: none;
  -webkit-appearance: none;
  -moz-appearance: none;
       appearance: none;
}

.swiper-pagination-clickable .swiper-pagination-bullet {
  cursor: pointer;
}

.swiper-pagination-bullet-active {
  opacity: 1;
  background: var(--swiper-pagination-color, var(--swiper-theme-color));
}

.swiper-container-vertical > .swiper-pagination-bullets {
  right: 10px;
  top: 50%;
  transform: translate3d(0, -50%, 0);
}

.swiper-container-vertical > .swiper-pagination-bullets .swiper-pagination-bullet {
  margin: 6px 0;
  display: block;
}

.swiper-container-vertical > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
  top: 50%;
  transform: translateY(-50%);
  width: 8px;
}

.swiper-container-vertical > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
  display: inline-block;
  transition: 0.2s transform, 0.2s top;
}

.swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet {
  margin: 0 4px;
}

.swiper-container-horizontal > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
}

.swiper-container-horizontal > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
  transition: 0.2s transform, 0.2s left;
}

.swiper-container-horizontal.swiper-container-rtl > .swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
  transition: 0.2s transform, 0.2s right;
}

.swiper-pagination-progressbar {
  background: rgba(0, 0, 0, 0.25);
  position: absolute;
}

.swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
  background: var(--swiper-pagination-color, var(--swiper-theme-color));
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  transform: scale(0);
  transform-origin: left top;
}

.swiper-container-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
  transform-origin: right top;
}

.swiper-container-horizontal > .swiper-pagination-progressbar,
.swiper-container-vertical > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite {
  width: 100%;
  height: 4px;
  left: 0;
  top: 0;
}

.swiper-container-horizontal > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite,
.swiper-container-vertical > .swiper-pagination-progressbar {
  width: 4px;
  height: 100%;
  left: 0;
  top: 0;
}

.swiper-pagination-white {
  --swiper-pagination-color: #ffffff;
}

.swiper-pagination-black {
  --swiper-pagination-color: #000000;
}

.swiper-pagination-lock {
  display: none;
}

.category-list {
  display: flex;
  align-items: center;
  background: var(--greyBlue);
  border-radius: 6px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
  padding: 1.125rem 1.5rem;
  position: relative;
  margin-bottom: 20px;
}

.category-list:after {
  content: url(../..images/img_arrowRight.svg);
  position: absolute;
  right: 1rem;
  top: 50%;
  bottom: auto;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
}

.category-list:last-child {
  margin-bottom: 0;
}

.category-icon {
  width: 36px;
  margin-right: 1.25rem;
}

.category-name {
  font-size: 1.0625rem;
  font-weight: 500;
  line-height: 25px;
  margin: 0;
}

.account-section {
  position: relative;
}

.account-section {
  position: relative;
}

.rotate {
  transform: rotate(90deg);
  transition: transform 0.5s ease-in-out;
}

.account-wallet {
  margin-top: 0.5rem;
  padding: 1rem 0;
  background: #fff;
  border-radius: 6px;
  display: flex;
  padding: 1rem;
  flex-direction: column;
  align-items: center;
  box-shadow: 0 2px 8px 0 rgba(80, 94, 131, 0.08);
  position: relative;
}

.account-wallet > .d-flex {
  flex: 1;
}

.account-wallet .accountItemBox {
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  width: 100%;
}

.account-wallet .accountItemBox a {
  color: var(--mainColor);
  font-size: 16px;
  font-weight: bold;
}
.account-wallet .accountItemBox a::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 20px;
  background-color: var(--mainColor);
  vertical-align: middle;
  border-radius: 4px;
  margin-right: 7px;
}

.account-wallet .accountItemBox div {
  text-align: right;
  color: #2a2a2a;
  font-size: 16px;
  font-weight: 500;
}
.account-wallet .accountItemBox div span {
  font-size: 18px;
  font-weight: bold;
}

.account-wallet .accountItemBox .accountItemButtons {
  display: flex;
}

.account-wallet .accountItemBox .accountItemButtons > input {
  background: #ffba01;
  border: none;
  border-radius: 5px;
  font-weight: bold;
  color: #fff;
  padding: 10px 20px;
  margin-top: 8px;
  width: 50%;
}

.account-wallet .accountItemBox .accountItemButtons > input:first-child {
  margin-right: 15px;
}

.account-wallet .see-more {
  position: absolute;
  top: 15px;
  right: 20px;
  color: var(--mainColor);
}

.account-wallet .fund_num {
  display: flex;
}
.account-wallet .fund_num span {
  font-size: 12px;
  color: #888;
}

.accountItemGroup {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.accountItemGroup ul {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  list-style: none;
  padding: 0;
  margin: 20px 0 0;
}
.accountItemGroup ul li {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
.accountItemGroup ul li .text-small {
  font-size: 14px;
  color: #888;
}
.accountItemGroup ul li:nth-child(1)::before {
  background-image: url(../images/icon_users_class_w.svg);
}
.accountItemGroup ul li:nth-child(2)::before {
  background-image: url(../images/icon_tittle_money_w.svg);
}
.accountItemGroup ul li:nth-child(3)::before {
  background-image: url(../images/icon_money_w.svg);
}
.accountItemGroup ul li::before {
  content: "";
  display: inline-block;
  width: 60px;
  height: 60px;
  background-color: var(--mainColor);
  border-radius: 50%;
  margin-bottom: 5px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 50%;
  margin-bottom: 10px;
}

.account-logout {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 2rem 0;
}

.account-amount {
  padding: 1.25rem;
  background: var(--content-Bg);
  border-radius: 6px;
  max-width: 85%;
  margin: 0 auto 1.5rem;
}

.account-amount img {
  width: 44px;
  height: 44px;
  margin-right: 20px;
}

.account-amount .walletName {
  font-size: 15px;
  line-height: 21px;
}

.account-amount .wallet {
  font-size: 24px;
  line-height: 35px;
  padding: 0;
}

.account-amount.nonStyle {
  padding: 0;
  background: #fff;
  border-radius: none;
  max-width: 90%;
  margin: 0 auto;
}

.account-amount.nonStyle .form-group {
  width: 100%;
}

.account-amount.nonStyle .form-group .form-control {
  text-indent: 0;
}

.account-amount.nonStyle > hr {
  margin: 1rem 0;
}

.account-amount.content-text {
  width: 85%;
  max-width: 100%;
}

.userName {
  color: var(--text-black);
  font-size: 28px;
  font-weight: 700;
  line-height: 25px;
}

.userID {
  font-size: 16px;
  font-weight: 400;
  line-height: 29px;
  color: #000;
  margin: 0.2rem 0 0;
}

.date-period {
  border-bottom: 1px solid #eee;
  margin-bottom: 15px;
}

.date-list {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 5px 0;
}

.date-list:first-child {
  border-bottom: 1px solid #eee;
}

.date-list > div {
  font-size: 14px;
  width: 50%;
}

.date-list input[type=text]:-moz-read-only {
  width: auto;
  background: 0 0;
  border: none;
  color: var(--mainColor);
  background: none !important;
  box-shadow: none !important;
  text-align: right;
  padding: 0;
}

.date-list input[type=text]:read-only {
  width: auto;
  background: 0 0;
  border: none;
  color: var(--mainColor);
  background: none !important;
  box-shadow: none !important;
  text-align: right;
  padding: 0;
}

.date-list:after {
  content: url(../images/icon_arrowRight-grey.svg);
  right: 0;
  top: 0;
  position: relative;
  width: 20px;
  height: 20px;
}

/* 
.status {
    border-bottom: 1px solid #eee;
    margin-bottom: 15px
}

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

.status li {
    padding: 2px;
    margin-bottom: 5px;
    position: relative
}

.status li a {
    font-size: 13px;
    color: var(--text-black);
    display: block
}

.status li:after {
    position: absolute;
    top: 50%;
    bottom: auto;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    right: 2px
}

.status li.selected {
    background: var(--content-Bg)
}

.status li.selected a {
    color: var(--lightBlue)
}

.status li.selected:after {
    content: url(../images/icon_filter_checked.svg)
} */
.withdraw {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.withdraw-icon {
  width: 52px;
  height: 52px;
  margin-right: 15px;
}

.withdraw-list {
  width: calc(100% - 52px);
}

.withdraw-list .filter-item .item-status img {
  height: 20px;
}

.withdraw .label-blue {
  color: #0b73d3;
  background-color: #e6f3ff;
}

.withdraw .label-red {
  color: #ea4444;
  background-color: #e3b4b4;
}

.withdraw .label-green {
  color: #1bdc68;
  background-color: #cfffe2;
}

.withdraw .label-grey {
  color: #aaa;
  background-color: #eee;
}

.withdraw .label-orange {
  color: #ffa723;
  background-color: #ffeecd;
}

:root {
  --blue: #292c6a;
  --lightBlue: #767bff;
  --lightBlueRGB: rgba(118, 123, 255, 0.1);
  --greyBlue: #2d3252;
  --greyBlueRGB: rgb(45, 50, 82);
  --skyBlue: #5cb6f8;
  --blue-gradient-1: #27c3fd;
  --blue-gradient-2: #50a4f8;
  --lightOrange: #ffcc6a;
  --orange-gradient-1: #ffcc6a;
  --orange-gradient-2: #ff9548;
  --labelColor: #8b90b6;
  --mainColor: #ff3c3c;
  --text-black: #000;
  --mainBlackColor: #fff;
  --content-Bg: #fff6ef;
  --inputBg: #fff;
  --content-width: 500px;
  --border-radius: 5px;
  --gutter: 10px;
  --stock-filter: #434786;
  --stock-filter-lighten: lighten(#434786, 10%);
  --tab-active: #6189e6;
  --stock-greyBlue: #343963;
  --stock-lightBlue: #8b90b6;
  --green: #35ce97;
}

body {
  font-family: "Noto Sans SC", "微软雅黑", "Microsoft Yahei", -apple-system, BlinkMacSystemFont, Roboto, Arial, sans-serif;
  margin: 0;
  -webkit-overflow-scrolling: touch;
  -webkit-font-smoothing: antialiased;
  -webkit-touch-callout: none;
  -webkit-text-size-adjust: none;
  -webkit-user-select: none;
  -webkit-highlight: none;
  -webkit-tap-highlight-color: transparent;
  overflow-x: hidden;
  color: var(--text-black);
  max-width: var(--content-width);
  margin: 0 auto;
  background: var(--content-Bg);
}

@media screen and (max-width: var(--content-width)) {
  body {
    max-width: 100%;
  }
}
body.toast_open {
  overflow-y: hidden;
}

.box-shadow {
  box-shadow: 0px 1px 9px rgba(0, 0, 0, 0.01);
}

a {
  cursor: pointer;
  text-decoration: none;
}

a:focus,
a:hover {
  outline: 0;
  outline-offset: 0;
}

.left-align {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
}

.right-align {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: flex-end;
}

.center-align {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.vertical-align {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

button,
input[type=button],
input[type=reset],
input[type=submit] {
  -webkit-appearance: none;
  -moz-appearance: none;
       appearance: none;
}

hr {
  border: none;
  height: 1px;
  background: #ddd;
}

small {
  font-size: 85%;
}

img {
  max-inline-size: 100%;
  block-size: auto;
}

.page--main {
  background: var(--content-Bg);
  box-sizing: border-box;
}

.login-section {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.welcome-section {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  height: 100%;
}

.login_bg {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  min-height: 200px;
}

.login_bg:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: bottom center;
  width: 100%;
  height: 100%;
  mix-blend-mode: overlay;
  opacity: 0.7;
  transform: rotate(-180deg);
}

.login_logo img {
  width: 240px;
}

.main-control {
  background: var(--content-Bg);
  position: fixed;
  top: 0;
  width: 100%;
  max-width: var(--content-width);
  z-index: 2;
}

.main-head {
  background: var(--mainBlackColor);
  position: fixed;
  top: 0;
  width: 100%;
  max-width: var(--content-width);
  z-index: 2;
}

.homeHead {
  background-image: url(../images/logo.png);
  background-repeat: no-repeat;
  background-size: 15%;
  background-position: center 8px;
}

.topHeading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 65px;
  margin: 0 auto;
  padding: 0 5%;
  position: relative;
  background: var(--mainColor);
}
.topHeading > a {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  z-index: 2;
}
.topHeading > div {
  position: absolute;
  right: 0;
}
.topHeading > .pageName {
  color: #fff;
  font-size: 1rem;
  font-weight: 500;
  width: 100%;
  display: block;
  text-align: center;
  transform: translateX(-10px);
}
.topHeading .topRight {
  padding-right: 5%;
}

.topMainHeading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 90%;
  margin: 0 auto;
  padding: 10px 0;
}

.homeHead > .pageName {
  color: transparent !important;
}

.contentDetail .main-control {
  background: 0 0;
  border-radius: none;
}

.main-nav {
  position: fixed;
  bottom: 0;
  background: #fff;
  border-top: 2px solid #f0f0f0;
  width: 100%;
  max-width: var(--content-width);
}
.main-nav .nav-items {
  display: flex;
  justify-content: center;
  align-items: center;
}
.main-nav .nav-items a {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: 0.75rem;
  color: #9f9f9f;
  padding-top: 15px;
  padding-bottom: 18px;
}
.main-nav .nav-items a img {
  width: 30px;
  height: 30px;
}

.nav-items a.active,
.nav-items a:focus,
.nav-items a:hover {
  color: var(--mainColor);
}

.main-nav-pay {
  position: fixed;
  bottom: 0;
  background: #fff;
  box-shadow: 0 -0.5px 8px 0 rgba(0, 0, 0, 0.08);
  width: 100%;
  border-top-left-radius: 15px;
  border-top-right-radius: 15px;
  z-index: 3;
  max-width: var(--content-width);
}

.nav-pay-items {
  padding: 1.25rem 1rem;
}

.nav-pay-left {
  display: flex;
  flex-direction: column;
}

.nav-pay-left small {
  color: #aaa;
}

.nav-pay-left strong {
  font-size: 1.0625rem;
}

.main-slide {
  width: 100%;
  margin: 0 auto;
  overflow: hidden;
}
.main-slide .slide-img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.main-slide .slide-video {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.main-slide .swiper-pagination {
  position: absolute;
  bottom: 20px;
  left: 50%;
  right: auto;
  transform: translateX(-50%);
}
.main-slide .swiper-pagination-bullet {
  width: 4px;
  height: 4px;
  background: #fff;
  opacity: 1;
  margin: 0 3px;
  border-radius: 5px;
}
.main-slide .swiper-pagination-bullet-active {
  width: 12px;
  background: var(--mainColor);
}

.posterBg {
  background-size: cover;
  border-radius: 2px;
}

.posterBg > img.play-icon {
  width: 13px;
  height: 13px;
  position: absolute;
  left: 50%;
  top: 50%;
  bottom: auto;
  right: auto;
  transform: translateX(-50%) translateY(-50%);
  z-index: 1;
}

.posterBg:after {
  position: absolute;
  content: "";
  left: 50%;
  top: 50%;
  bottom: auto;
  right: auto;
  transform: translateX(-50%) translateY(-50%);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.8);
}

.main-section {
  position: relative;
  background: var(--content-Bg);
}

.page-title {
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 25px;
}

.content {
  padding: 0 5%;
}

.content-title {
  position: relative;
  font-size: 0.9375rem;
  font-weight: 500;
  text-indent: 12px;
  margin: 2rem 0 1rem;
}

.content-title:before {
  content: "";
  position: absolute;
  display: block;
  width: 4px;
  height: 100%;
  background: var(--lightBlue);
  top: 50%;
  bottom: auto;
  transform: translateY(-50%);
}

.content-text {
  font-size: 0.8125rem;
  color: #666;
}

.content-nodata {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 80vh;
  margin: 0 5%;
  font-size: 13px;
  color: #888;
}

.content-gutter0 {
  margin: 0 -1rem;
}

.content p {
  font-size: 0.8125rem;
}

.info-detail-video,
.content .content-gutter0 > img {
  width: 90%;
  margin: 0 5%;
}

.alert-tooltip {
  color: #fff;
  font-size: 13px;
  position: absolute;
  bottom: 2rem;
  left: 50%;
  right: auto;
  transform: translateX(-50%);
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0.75rem 1rem;
  background: rgba(0, 0, 0, 0.8);
  border-radius: 6px;
  visibility: hidden;
}

.alert-tooltip.show {
  visibility: visible;
}

.scroller-content {
  overflow: auto;
  box-sizing: border-box;
  padding-bottom: 80px;
  min-height: calc(100vh - 130px);
}
.scroller-content::-webkit-scrollbar {
  display: none;
}

.totalData {
  font-size: 0.875rem;
  color: #888;
  padding: 5px 10px;
  width: calc(100% - 20px);
  background: var(--content-Bg);
  z-index: 1;
}

.toast_body {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.toast_body > * {
  transition: 0.3s ease;
}

.toast_show {
  display: block;
  z-index: 3;
}

.toast_content {
  background-color: #fff;
  border-radius: 15px;
}

.toast_show .toast_main .toast_inner {
  animation: fadein 0.3s;
}

.toast_back {
  background: rgba(0, 0, 0, 0.6);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.toast_main {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.toast_main .toast_inner {
  position: relative;
  background-color: #fff;
  width: 350px;
  max-width: 85vw;
  padding: 20px 0 0;
  border-radius: 10px;
}

.toast_close.times {
  position: absolute;
  right: 20px;
  top: 12px;
}

#popUps .toast_inner {
  position: relative;
  background-color: #fff6f6;
}

#popUps .toast_inner::before {
  content: "";
  width: 70px;
  height: 75px;
  display: block;
  background: url(../images/bg_news_title.png) no-repeat top;
  background-size: contain;
  position: absolute;
  top: -30px;
  left: 50%;
  transform: translateX(-53%);
}

#popUps .alertToast {
  flex-direction: column;
  padding: 25px 25px 15px;
}

#popUps .alertToast > p {
  text-align: left;
  width: 100%;
  color: #5b5b5b;
  line-height: 30px;
}

#buyCardDetail .toast_main .toast_inner {
  width: 100%;
  max-width: 100vw;
}

.alertToast {
  flex-direction: column;
  padding: 15px;
}

.alertToast > img {
  margin-top: 10px;
}

.alertToast > p {
  margin: 10px 0;
}

.alertToast .alertTitle {
  margin-top: -1.25rem;
  margin-bottom: 1.5rem;
  text-align: center;
}

.alertToast.center-align h4 {
  margin: 0.75rem 0;
  font-size: 20px;
}

.qtySelector {
  display: flex;
  justify-content: center;
  align-items: center;
}

.qtySelector .fa {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 22px;
  height: 22px;
  cursor: pointer;
  color: #fff;
  font-size: 12px;
  border-radius: 50%;
}

.qtySelector .fa.clicked {
  font-size: 14px;
  background: var(--lightBlue);
}

.qtySelector .fa.decreaseQty {
  background: var(--lightBlue);
}

.qtySelector .fa.increaseQty {
  background: var(--lightBlue);
}

.qtySelector .qtyValue {
  border: none;
  padding: 5px;
  width: 35px;
  text-align: center;
}

.slideToast {
  width: 100%;
  max-width: var(--content-width);
  position: fixed;
  bottom: 0;
  background: #fff;
  z-index: 3;
  opacity: 0;
  display: none;
  padding-bottom: 10px;
  border-top-right-radius: 12px;
  border-top-left-radius: 12px;
}

.slideToast > * {
  transition: 0.3s ease;
}

.slideToast-control {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--gutter);
}

.slideToast-control > * {
  line-height: 1;
}

.slideToast-content {
  padding: var(--gutter);
}

.slideToast .toastTitle {
  width: 100%;
  font-size: 15px;
  font-weight: 500;
  text-align: center;
  margin: 8px 0;
}

.slideToast-back {
  background: rgba(0, 0, 0, 0.6);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  display: none;
}

.slideToast .notice {
  font-size: 0.8rem;
  color: red;
}

.slideDown .slideToast {
  display: block;
  animation: slideIn 0.15s ease-in both;
}

.slideDown .slideToast-back {
  display: block;
}
@keyframes slideIn {
  from {
    transform: translate3d(0, 100%, 0);
    opacity: 0;
  }
  to {
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}
@keyframes fadein {
  from {
    transform: scale(0);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}
@keyframes fadeout {
  from {
    transform: scale(1);
    opacity: 1;
  }
  to {
    transform: scale(0);
    opacity: 0;
  }
}
.pay-password {
  width: 260px;
  height: 40px;
  margin: 0 auto;
  position: relative;
}
.pay-password .real-ipt {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 40px;
  line-height: 40px;
  opacity: 0;
  z-index: 3;
  border: none;
  padding: 0;
}
.pay-password .surface-ipts {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 50px;
  line-height: 40px;
  z-index: 4;
  overflow: hidden;
}
.pay-password .surface-ipts .surface-ipt {
  height: 40px;
  line-height: 40px;
  display: flex;
  justify-content: space-between input;
  justify-content-width: 16.6666666667%;
  justify-content-height: 40px;
  justify-content-line-height: 40px;
  justify-content-font-size: 12px;
  justify-content-text-align: center;
  justify-content-padding: 0;
  justify-content-background: 0 0;
  justify-content-border: none;
  justify-content-margin: 0 5px;
  justify-content-border-radius: 0;
  justify-content-color: var(--blue);
  justify-content-border-bottom: 1px solid var(--blue);
}
.pay-password .surface-ipts .surface-ipt input::-webkit-input-placeholder {
  color: #888;
  font-size: 15px;
}
.pay-password .surface-ipts .surface-ipt input:-moz-placeholder {
  color: #888;
  font-size: 15px;
}
.pay-password .surface-ipts .surface-ipt input::-moz-placeholder {
  color: #888;
  font-size: 15px;
}
.pay-password .surface-ipts .surface-ipt input:-ms-input-placeholder {
  color: #888;
  font-size: 15px;
}
.pay-password .surface-ipts .surface-ipt input:disabled {
  color: #ddd;
  border-color: #ddd;
}
.pay-password .surface-ipts .surface-ipt input:disabled {
  color: #ddd;
  border-color: #ddd;
}

.productDetail .nav-items {
  position: relative;
}

.productDetail .claimNow {
  position: absolute;
  right: 0;
  bottom: 0;
  background-color: var(--mainColor);
  width: -moz-max-content;
  width: max-content;
  height: 67px;
  border-radius: 0;
  padding: 0 5%;
}

#onBuy .btn {
  color: var(--mainColor);
}

.isPrice {
  margin: 10px 0 0;
  width: 100%;
  text-align: center;
  border-bottom: 1px solid #f0f0f0;
  padding-bottom: 10px;
  margin-bottom: 10px;
}
.isPrice h3 {
  font-size: 30px;
  color: var(--mainColor);
  margin: 0;
  padding: 0;
  position: relative;
  display: inline-block;
}
.isPrice h3::before {
  content: "支付金额";
  font-size: 12px;
  color: #b1b1b1;
  position: absolute;
  top: -12px;
  left: 0;
  margin: 0;
  padding: 0;
}

.isCoinPrice {
  margin: 10px 0 0;
  width: 100%;
  text-align: center;
  border-bottom: 1px solid #f0f0f0;
  padding-bottom: 10px;
  margin-bottom: 10px;
}
.isCoinPrice h3 {
  font-size: 30px;
  color: var(--mainColor);
  margin: 0;
  padding: 0;
  position: relative;
  display: inline-block;
  margin-top: 10px;
}
.isCoinPrice h3::before {
  content: "支付金币";
  font-size: 12px;
  color: #b1b1b1;
  position: absolute;
  top: -12px;
  left: 0;
  margin: 0;
  padding: 0;
}

.numBlock {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin: 20px 0 10px;
}

.numBlock .buyNum {
  display: flex;
}

.buyNum button {
  background: none;
  border: none;
}

.buyNum p {
  color: var(--mainColor);
  font-size: 30px;
  font-weight: bold;
  margin: 0 13px;
}

.payMethods {
  display: flex;
  flex-direction: column;
  margin-bottom: 20px;
}
.payMethods .label {
  font-size: 14px;
  color: var(--mainColor) !important;
}

.payMethods .radio-container {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}

.payMethods .radio-container > p {
  margin: 0;
  font-size: 14px;
}

.numBlock > p,
.payMethods > p {
  font-size: 14px;
  color: #b1b1b1;
}

/* 當單選按鈕選中時，修改樣式 */
.radio-container input:checked ~ .checkmark {
  background-color: #000;
}

.passcode-wrapper {
  display: flex;
  justify-content: center;
  margin: 12px 0 20px;
}

.passcode-wrapper input {
  margin: 0 5px;
  text-align: center;
  color: var(--mainColor);
  background-color: #ececec;
}

.payPasswordTitle {
  position: relative;
  width: 100%;
  text-align: center;
  padding: 0;
  margin: 0;
}

.payPasswordTitle .closePayPasswordToast {
  position: absolute;
  right: 0;
  top: 0;
}

#accountSecurity .account-wrap {
  box-shadow: none;
}

#accountSecurity .account-wrap .content > div {
  background-color: #fff;
  border-radius: 15px;
  margin-bottom: 15px;
  padding: 0 15px;
}

.verifiedSuccess {
  background-color: #2f9400;
  border-radius: 5px;
  color: #fff;
  padding: 10px 15px;
  display: flex;
  align-items: center;
}

.verifiedFailed {
  background-color: #eb0000;
  border-radius: 5px;
  color: #fff;
  padding: 10px 15px;
  display: flex;
  align-items: center;
}

#accountVerifiedIdentity .verifiedSuccess img {
  margin-right: 10px;
}

#accountVerifiedIdentity .userInfoBox {
  background-color: #fff;
  border-radius: 5px;
  list-style: none;
  padding: 10px 15px;
}

#accountVerifiedIdentity .userInfoBox li {
  display: flex;
  justify-content: space-between;
  border-top: 1px solid #e0e0e0;
  padding-top: 15px;
  margin-bottom: 15px;
}

#accountVerifiedIdentity .userInfoBox li:first-child {
  border: none;
}

#accountVerifiedIdentity .userInfoBox li p {
  margin: 0;
}

#accountOpenWallet .bankList {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
}

#accountOpenWallet .bankList li {
  border-radius: 15px;
  background-color: #fff;
  font-size: 14px;
  width: 37%;
  padding: 5%;
  display: flex;
  flex-direction: column;
  margin-bottom: 15px;
}

#accountOpenWallet .bankList li img {
  width: 47px;
  height: 47px;
  margin-bottom: 20px;
}

input[type=date],
input[type=datetime-local],
input[type=datetime],
input[type=email],
input[type=month],
input[type=number],
input[type=password],
input[type=search],
input[type=tel],
input[type=text],
input[type=time],
input[type=week] {
  width: -webkit-fill-available;
  width: -moz-fill-available;
  width: -moz-available;
  width: fill-available;
  display: block;
  height: 50px;
  padding: 0.25rem 0.5rem;
  color: #000;
  border: none;
  box-shadow: 0px -2px 0px 0px #f0f0f0 inset !important;
  font-size: 14px;
  background: var(--inputBg) !important;
  box-shadow: none;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

input[type=date]::-webkit-input-placeholder,
input[type=datetime-local]::-webkit-input-placeholder,
input[type=datetime]::-webkit-input-placeholder,
input[type=email]::-webkit-input-placeholder,
input[type=month]::-webkit-input-placeholder,
input[type=number]::-webkit-input-placeholder,
input[type=password]::-webkit-input-placeholder,
input[type=search]::-webkit-input-placeholder,
input[type=tel]::-webkit-input-placeholder,
input[type=text]::-webkit-input-placeholder,
input[type=time]::-webkit-input-placeholder,
input[type=week]::-webkit-input-placeholder {
  color: #9f9f9f;
}

input[type=date]:-moz-placeholder,
input[type=datetime-local]:-moz-placeholder,
input[type=datetime]:-moz-placeholder,
input[type=email]:-moz-placeholder,
input[type=month]:-moz-placeholder,
input[type=number]:-moz-placeholder,
input[type=password]:-moz-placeholder,
input[type=search]:-moz-placeholder,
input[type=tel]:-moz-placeholder,
input[type=text]:-moz-placeholder,
input[type=time]:-moz-placeholder,
input[type=week]:-moz-placeholder {
  color: #9f9f9f;
}

input[type=date]::-moz-placeholder,
input[type=datetime-local]::-moz-placeholder,
input[type=datetime]::-moz-placeholder,
input[type=email]::-moz-placeholder,
input[type=month]::-moz-placeholder,
input[type=number]::-moz-placeholder,
input[type=password]::-moz-placeholder,
input[type=search]::-moz-placeholder,
input[type=tel]::-moz-placeholder,
input[type=text]::-moz-placeholder,
input[type=time]::-moz-placeholder,
input[type=week]::-moz-placeholder {
  color: #9f9f9f;
}

input[type=date]:-ms-input-placeholder,
input[type=datetime-local]:-ms-input-placeholder,
input[type=datetime]:-ms-input-placeholder,
input[type=email]:-ms-input-placeholder,
input[type=month]:-ms-input-placeholder,
input[type=number]:-ms-input-placeholder,
input[type=password]:-ms-input-placeholder,
input[type=search]:-ms-input-placeholder,
input[type=tel]:-ms-input-placeholder,
input[type=text]:-ms-input-placeholder,
input[type=time]:-ms-input-placeholder,
input[type=week]:-ms-input-placeholder {
  color: #9f9f9f;
}

input[type=date]:focus,
input[type=date]:focus-visible,
input[type=date]:focus-within,
input[type=datetime-local]:focus,
input[type=datetime-local]:focus-visible,
input[type=datetime-local]:focus-within,
input[type=datetime]:focus,
input[type=datetime]:focus-visible,
input[type=datetime]:focus-within,
input[type=email]:focus,
input[type=email]:focus-visible,
input[type=email]:focus-within,
input[type=month]:focus,
input[type=month]:focus-visible,
input[type=month]:focus-within,
input[type=number]:focus,
input[type=number]:focus-visible,
input[type=number]:focus-within,
input[type=password]:focus,
input[type=password]:focus-visible,
input[type=password]:focus-within,
input[type=search]:focus,
input[type=search]:focus-visible,
input[type=search]:focus-within,
input[type=tel]:focus,
input[type=tel]:focus-visible,
input[type=tel]:focus-within,
input[type=text]:focus,
input[type=text]:focus-visible,
input[type=text]:focus-within,
input[type=time]:focus,
input[type=time]:focus-visible,
input[type=time]:focus-within,
input[type=week]:focus,
input[type=week]:focus-visible,
input[type=week]:focus-within {
  color: #000;
  border-bottom: 1px solid var(--mainColor);
  outline: 0;
}

input[type=date]:-moz-read-only, input[type=datetime-local]:-moz-read-only, input[type=datetime]:-moz-read-only, input[type=email]:-moz-read-only, input[type=month]:-moz-read-only, input[type=number]:-moz-read-only, input[type=password]:-moz-read-only, input[type=search]:-moz-read-only, input[type=tel]:-moz-read-only, input[type=text]:-moz-read-only, input[type=time]:-moz-read-only, input[type=week]:-moz-read-only {
  color: #222;
  background: #ddd;
  border-color: #ddd;
}

input[type=date]:disabled,
input[type=date]:read-only,
input[type=datetime-local]:disabled,
input[type=datetime-local]:read-only,
input[type=datetime]:disabled,
input[type=datetime]:read-only,
input[type=email]:disabled,
input[type=email]:read-only,
input[type=month]:disabled,
input[type=month]:read-only,
input[type=number]:disabled,
input[type=number]:read-only,
input[type=password]:disabled,
input[type=password]:read-only,
input[type=search]:disabled,
input[type=search]:read-only,
input[type=tel]:disabled,
input[type=tel]:read-only,
input[type=text]:disabled,
input[type=text]:read-only,
input[type=time]:disabled,
input[type=time]:read-only,
input[type=week]:disabled,
input[type=week]:read-only {
  color: #222;
  background: #ddd;
  border-color: #ddd;
}

input[type=date]:-moz-submit-invalid,
input[type=date]:-moz-ui-invalid,
input[type=date]:invalid,
input[type=datetime-local]:-moz-submit-invalid,
input[type=datetime-local]:-moz-ui-invalid,
input[type=datetime-local]:invalid,
input[type=datetime]:-moz-submit-invalid,
input[type=datetime]:-moz-ui-invalid,
input[type=datetime]:invalid,
input[type=email]:-moz-submit-invalid,
input[type=email]:-moz-ui-invalid,
input[type=email]:invalid,
input[type=month]:-moz-submit-invalid,
input[type=month]:-moz-ui-invalid,
input[type=month]:invalid,
input[type=number]:-moz-submit-invalid,
input[type=number]:-moz-ui-invalid,
input[type=number]:invalid,
input[type=password]:-moz-submit-invalid,
input[type=password]:-moz-ui-invalid,
input[type=password]:invalid,
input[type=search]:-moz-submit-invalid,
input[type=search]:-moz-ui-invalid,
input[type=search]:invalid,
input[type=tel]:-moz-submit-invalid,
input[type=tel]:-moz-ui-invalid,
input[type=tel]:invalid,
input[type=text]:-moz-submit-invalid,
input[type=text]:-moz-ui-invalid,
input[type=text]:invalid,
input[type=time]:-moz-submit-invalid,
input[type=time]:-moz-ui-invalid,
input[type=time]:invalid,
input[type=week]:-moz-submit-invalid,
input[type=week]:-moz-ui-invalid,
input[type=week]:invalid {
  border: #e04847;
  box-shadow: none;
}

input[type=date]:-webkit-autofill,
input[type=date]:-webkit-autofill:focus,
input[type=date]:-webkit-autofill:hover,
input[type=datetime-local]:-webkit-autofill,
input[type=datetime-local]:-webkit-autofill:focus,
input[type=datetime-local]:-webkit-autofill:hover,
input[type=datetime]:-webkit-autofill,
input[type=datetime]:-webkit-autofill:focus,
input[type=datetime]:-webkit-autofill:hover,
input[type=email]:-webkit-autofill,
input[type=email]:-webkit-autofill:focus,
input[type=email]:-webkit-autofill:hover,
input[type=month]:-webkit-autofill,
input[type=month]:-webkit-autofill:focus,
input[type=month]:-webkit-autofill:hover,
input[type=number]:-webkit-autofill,
input[type=number]:-webkit-autofill:focus,
input[type=number]:-webkit-autofill:hover,
input[type=password]:-webkit-autofill,
input[type=password]:-webkit-autofill:focus,
input[type=password]:-webkit-autofill:hover,
input[type=search]:-webkit-autofill,
input[type=search]:-webkit-autofill:focus,
input[type=search]:-webkit-autofill:hover,
input[type=tel]:-webkit-autofill,
input[type=tel]:-webkit-autofill:focus,
input[type=tel]:-webkit-autofill:hover,
input[type=text]:-webkit-autofill,
input[type=text]:-webkit-autofill:focus,
input[type=text]:-webkit-autofill:hover,
input[type=time]:-webkit-autofill,
input[type=time]:-webkit-autofill:focus,
input[type=time]:-webkit-autofill:hover,
input[type=week]:-webkit-autofill,
input[type=week]:-webkit-autofill:focus,
input[type=week]:-webkit-autofill:hover {
  color: #fff;
  border: 1px solid var(--inputBg);
  background: var(--inputBg);
}

.form-group {
  display: flex;
  flex-direction: column;
  width: 100%;
  margin: 0 auto;
  margin-bottom: 0.75rem;
}

.form-group label {
  font-size: 0.75rem;
  display: inline-block;
  margin-bottom: 0.25rem;
  text-align: left;
  color: #2a2a2a;
}

.form-group .form-control {
  text-indent: 45px;
}

.recharge label {
  font-size: 1rem !important;
  font-weight: bold !important;
  color: #000 !important;
  margin-top: 10px;
  margin-bottom: 10px !important;
}

.recharge > .topup-input {
  display: flex;
  align-items: center;
}

.recharge > .topup-input > span {
  font-size: 30px;
  color: var(--mainColor);
  margin-right: 10px;
}

.recharge > .topup-input input {
  height: 35px;
  font-weight: bold;
  font-size: 16px;
}

.account-invite-link > .topup-input > span {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.input-group {
  position: relative;
}

.input-group.account:before {
  background-image: url(../images/icon_user.png);
}

.input-group.password:before {
  background-image: url(../images/icon_lock_alt.png);
}

.input-group.paycode:before {
  background-image: url(../images/icon_money_register.svg);
}

.input-group.invite:before {
  background-image: url(../images/icon_envelope.svg);
}

.input-group.admin:before {
  background-image: url(../images/icon_user.svg);
}

.input-group.card:before {
  background-image: url(../images/icon_card.svg);
}

.input-group.bank:before {
  background-image: url(../images/icon_landmark.svg);
}

.input-group.phone:before {
  background-image: url(../images/icon_phone.svg);
}

.input-group.code:before {
  background-image: url(../images/icon_barcode_read.svg);
}

.input-group .showPW {
  position: absolute;
  top: 50%;
  bottom: auto;
  transform: translateY(-50%);
  right: 15px;
  color: #fff;
}

.Error {
  color: #e04847;
  font-size: 0.875rem;
}

.password-forget {
  font-size: 0.875rem;
  color: var(--mainColor);
  width: 90%;
  margin: 0 auto;
}

.notice {
  font-size: 0.75rem;
  color: #8b8b8b;
}

.notice a {
  color: var(--mainColor);
}

.btn {
  font-size: 0.875rem;
  color: #fff;
  border-radius: 6px;
  width: 100%;
  height: 50px;
  padding: 0.65rem 0;
  text-align: center;
  border: none;
}

.alert-btn {
  border-top: 1px solid #f0f0f0;
  display: flex;
}

#doubleAlert .alert-btn .btn:first-child {
  border-right: 1px solid #f0f0f0;
  color: #9f9f9f;
  border-radius: 10px 0 0 10px;
}

#signAlert .alert-btn .btn:first-child {
  width: 100%;
}

.alert-btn .btn {
  color: var(--mainColor);
  background: #fff;
  border-radius: 0px;
  height: 45px;
  border-radius: 0 0 10px 10px;
}

.btn-sm {
  font-size: 0.75rem;
  min-width: 120px;
}

.btn-red,
.btn-cancel {
  background: var(--mainColor);
}

.register {
  background: transparent;
  color: var(--mainColor);
  border: 1px solid var(--mainColor);
}

.btn-info {
  background: #fff;
  color: #000;
  border: 1px solid #c8c8c8;
}

.btn-buy {
  min-width: auto;
  width: auto;
  padding: 0.5rem 1.75rem;
}

.btn-logout {
  background: 0 0;
  color: #aaa;
  border: 1px solid #ddd;
}

.btn-logout:focus,
.btn-logout:hover {
  color: #fff;
  background: #ddd;
}

.btn:disabled {
  color: #fff;
  opacity: 0.5;
}

.stickyBtn {
  width: 90%;
  margin: 0 auto;
}

.rolldate-container {
  font-size: 15px !important;
}

.rolldate-container .rolldate-btn {
  font-size: 14px !important;
  color: var(--mainColor) !important;
}

.rolldate-container header {
  line-height: 40px !important;
  font-size: 14px !important;
  color: #fff;
  border-bottom: none !important;
}


.account-nav {
  padding: 0.5rem 0;
  border-radius: 5px;
  background: #fff;
  margin: 0 5%;
}
.account-nav .nav-items {
  flex-direction: column;
  justify-content: start;
  align-items: start;
  padding: 0;
  border-radius: 5px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 0.5rem;
}
.account-nav .nav-items a {
  position: relative;
  flex: 1;
  font-size: 13px;
  line-height: 19px;
  margin: 0.7rem 0.25rem;
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: center;
}
.account-nav .nav-items a:last-child {
  box-shadow: none;
  border-bottom: none;
}
.account-nav .nav-items a.pointer {
  margin: 0;
  position: absolute;
  right: 15px;
  top: 50%;
  margin-top: -8px;
}
.account-nav .nav-items a img {
  margin-bottom: 10px;
}
.account-nav .nav-items a span.title {
  font-weight: bold;
  font-size: 13px;
  line-height: 22px;
  color: #000;
}

.account-nav .nav-items a:focus span.title,
.account-nav .nav-items a:hover span.title {
  color: var(--mainColor);
}

.account-logout {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 2rem 0;
}

.account-amount {
  padding: 1.25rem;
  background: var(--account-greyBlue);
  border-radius: 6px;
  max-width: 85%;
  margin: 0 auto 1.5rem;
}

.account-amount img {
  width: 44px;
  height: 44px;
  margin-right: 20px;
}

.account-amount .walletName {
  font-size: 15px;
  line-height: 21px;
}

.account-amount .wallet {
  font-size: 24px;
  line-height: 35px;
  padding: 0;
}

.account-amount.nonStyle {
  padding: 0;
  border-radius: none;
  max-width: 90%;
  margin: 0 auto;
}

.account-amount.nonStyle .form-group {
  width: 100%;
}

.account-amount.nonStyle .form-group .form-control {
  text-indent: 0;
}

.account-amount.nonStyle > hr {
  margin: 1rem 0;
}

.account-amount.content-text {
  width: 85%;
  max-width: 100%;
  margin-bottom: 10px;
}

.account-amount-beans {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: url(../images/bg_card.png);
  background-repeat: no-repeat;
  background-size: 100%;
  background-position-y: -15px;
  box-shadow: 0 0 12px 0 rgba(0, 0, 0, 0.2);
  border-radius: 8px;
  margin-bottom: 1.5rem;
  padding: 1.25rem 1.5rem;
  color: #fff;
}

.account-amount-beans span.small-text {
  font-weight: 500;
  font-size: 11px;
  line-height: 16px;
}

.account-amount-beans span.large-text {
  font-weight: bold;
  font-size: 24px;
  line-height: 25px;
}

.account-amount-beans img {
  opacity: 0.3;
}

.account-topup .topup-method {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.account-topup .topup-method .btn-topup {
  display: flex;
  justify-content: center;
  align-items: center;
  background: #fff;
  border: 1px solid var(--mainColor);
  border-radius: 5px;
  color: var(--mainColor);
  flex: 1;
  min-width: auto;
  padding: 10px 0;
}

.account-topup .topup-method .btn-topup img {
  margin-right: 5px;
}

.account-topup .topup-method button.active,
.account-topup .topup-method button:active,
.account-topup .topup-method button:focus,
.account-topup .topup-method button:hover,
.account-topup .topup-method button:visited {
  background: var(--mainColor);
  border-color: var(--mainColor);
  color: #fff;
  font-weight: bold;
}

.account-topup .topup-method button:disabled {
  background: var(--account-lightBlue);
  border-color: var(--account-lightBlue);
  color: #ccc;
}

/* 默认情况下隐藏hover图片 */
.account-topup .topup-method .btn-topup img.hover {
  display: none;
}

/* 鼠标悬停或者按钮处于激活状态时隐藏normal图片，显示hover图片 */
.account-topup .topup-method .btn-topup:hover img.normal,
.account-topup .topup-method .btn-topup.active img.normal {
  display: none;
}

.account-topup .topup-method .btn-topup:hover img.hover,
.account-topup .topup-method .btn-topup.active img.hover {
  display: inline;
}

.account-topup .form-group {
  width: 100%;
}

.account-topup .form-group .form-control {
  text-indent: 0;
}

.accountLink {
  font-weight: 500;
  font-size: 11px;
  color: var(--skyBlue);
  margin-bottom: 8px;
}

.accountLink img {
  margin-left: 5px;
}

.accountBox {
  display: flex;
  flex-direction: column;
}

.accountBox span.large-text {
  font-weight: 700;
  font-size: 13px;
  line-height: 19px;
  color: #fff;
  text-align: center;
  margin-bottom: 5px;
}

.accountBox span.text-green,
.accountBox span.text-red {
  font-weight: 500;
  font-size: 11px;
  line-height: 16px;
}

.accountBox span.text-red {
  color: var(--red);
}

.accountBox span.text-green {
  color: var(--green);
}

.accountBox .userCode {
  margin: 0;
}

.account-stock {
  display: flex;
  justify-content: center;
  flex-direction: column;
  margin: 1.25rem 0;
  background-image: url(../images/bg_card.png);
  background-repeat: no-repeat;
  background-size: cover;
  width: 82%;
  margin: 20px 5%;
  border-radius: 10px;
  padding: 1rem 4%;
  gap: 15px;
}

.account-stock > .d-flex {
  flex: 1;
  text-align: center;
  align-items: center;
}

.account-stock-icon {
  width: 40px;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: var(--inputBg);
  border-radius: 50%;
  margin-right: 10px;
}

.account-stock-number .large-text {
  font-weight: bold;
  font-size: 14px;
  color: #fff;
}

.account-stock-note .small-text {
  font-weight: 600;
  font-size: 14px;
  color: #fff;
}

.account-stock-info {
  padding: 0.5rem 1rem;
  background: var(--account-greyBlue);
  border-radius: 4px;
}

.account-stock-info .small-text {
  font-weight: 500;
  font-size: 11px;
  color: var(--labelColor);
}

.account-content {
  padding-top: 1rem;
  background-color: #fff;
  width: 90%;
  margin: 0 auto;
  border-radius: 15px;
}

.account-content > .tab {
  border-bottom: 1px solid #eaeaea;
  padding-bottom: 16px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  width: 100%;
}

.account-content > .tab button {
  border: none;
  background: none;
  padding: 0 15px;
  position: relative;
}

.account-content > .tab button > span {
  font-size: 14px;
  font-weight: bold;
}

.account-content > .tab button.active::after {
  content: "";
  position: absolute;
  left: 6px;
  bottom: -16px;
  border: 1px solid var(--mainColor);
  background: var(--mainColor);
  border-radius: 5px;
  width: 81px;
  height: 3px;
}

.account-content > .tabcontent {
  height: inherit;
}

.account-content .account-without-data {
  position: relative;
  text-align: center;
  color: #c8c8c8;
}

.account-stock-pass {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: var(--account-greyBlue);
  border-radius: 6px;
  margin: 0 1rem;
  margin-top: 3rem;
  padding-top: 40px;
  padding-bottom: 25px;
}

.account-stock-pass .account-pass-icon {
  position: absolute;
  top: -30px;
}

.account-stock-pass-number .large-text {
  font-weight: 700;
  font-size: 1.5rem;
  line-height: 36px;
  text-align: center;
}

.account-stock-pass-note .small-text {
  font-weight: 500;
  font-size: 15px;
  line-height: 22px;
}

.table-shadow {
  box-shadow: 0 -8px 10px 0 var(--greyBlue);
  border-top: 1px solid rgba(0, 0, 0, 0.025);
}

.account-stock-table table tbody td,
.account-stock-table table thead th {
  width: 33.3333333333%;
}

.account-stock-table table tbody td:first-child,
.account-stock-table table thead th:first-child {
  text-align: left;
  padding-left: 1rem;
}

.account-stock-table table tbody td:last-child,
.account-stock-table table thead th:last-child {
  text-align: right;
  padding-right: 1rem;
}

.team-list {
  padding: 0 1.5rem;
  margin: 0;
}

.team-list li {
  list-style: none;
  margin-bottom: 1rem;
  justify-content: space-between;
  border-bottom: 1px solid #eaeaea;
  padding-bottom: 15px;
}

.team-list li:first-child {
  margin-top: 15px;
}

.team-list li:last-child {
  margin-bottom: 15px;
  border-bottom: none;
}

.team-list li > img.team-user-image {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  margin-right: 15px;
}

.team-list li span {
  font-weight: 400;
  font-size: 15px;
  line-height: 22px;
}

.team-list li span.small-text {
  font-weight: 400;
  font-size: 11px;
  line-height: 16px;
  color: #808080;
}

.bind-credit-card-text {
  padding: 0 10px;
}

.bind-credit-card-text > h3 {
  margin: 0 0 10px;
  font-size: 14px;
}

.bind-credit-card-text > p {
  font-size: 12px;
  color: #555;
  margin: 0;
}

.bind-credit-card {
  position: relative;
  width: 100%;
  aspect-ratio: 16/9;
  border-radius: 10px;
  background: url(../images/bg_card.png) no-repeat 0 0;
  background-size: cover;
  border: 1px solid transparent;
}

.card-account,
.card-name,
.card-number {
  position: absolute;
  left: 22px;
  color: #fff;
}

.card-account span:after,
.card-name span:after,
.card-number span:after {
  content: attr(data-placeholder);
  color: #fff;
  opacity: 0.4;
}

.card-account span.hideData:after,
.card-name span.hideData:after,
.card-number span.hideData:after {
  content: "";
}

.card-name {
  font-size: 22px;
  font-weight: bold;
  line-height: 24px;
  top: 30px;
}

.card-name > span {
  font-size: 1rem;
}

.card-number {
  bottom: 35px;
  font-size: 24px;
  line-height: 35px;
  letter-spacing: 4%;
}

.card-number input[type=text] {
  background: 0 0;
  border: none;
  box-shadow: none;
  color: var(--mainColor);
  font-size: 25px;
  font-weight: bold;
  line-height: 35px;
  letter-spacing: 4%;
  padding: 0 0 0 20px;
}

.bank-card {
  position: relative;
  width: 100%;
  aspect-ratio: 332/196;
  border-radius: 10px;
  overflow: hidden;
}

.bank-card.not-active {
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px dashed #9f9f9f;
  background: #fff;
}

.bank-card.is-active {
  background-size: cover;
  border: 1px solid transparent;
}

.bank-account,
.bank-name,
.bank-number {
  position: absolute;
  left: 22px;
  color: #fff;
}

.bank-account span:after,
.bank-name span:after,
.bank-number span:after {
  content: attr(data-placeholder);
  color: #fff;
  opacity: 0.4;
}

.bank-account span.hideData:after,
.bank-name span.hideData:after,
.bank-number span.hideData:after {
  content: "";
}

.bank-name {
  font-size: 1rem;
  font-weight: 500;
  line-height: 24px;
  top: 22px;
}

.bank-number {
  bottom: 52px;
  font-size: 24px;
  line-height: 35px;
  letter-spacing: 4%;
  width: 100%;
}

.bank-number input[type=text] {
  background: none !important;
  border: none;
  box-shadow: none !important;
  color: #fff;
  font-size: 24px;
  line-height: 35px;
  letter-spacing: 4%;
  padding: 0;
}

.bank-img {
  width: 100%;
  height: 100%;
}
.bank-img img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.bank-account {
  font-size: 1rem;
  line-height: 24px;
  bottom: 22px;
}

.filter {
  display: flex;
  align-items: center;
  flex: 1;
  padding: 10px 15px;
  position: relative;
  background: #fff;
  border-radius: 4px;
}

.filter-group {
  display: flex;
  background: var(--inputBg);
  border-radius: 4px;
}

.filter span {
  font-size: 0.875rem;
  color: #000;
  margin-left: 6px;
}

.filter img.position-right {
  position: absolute;
  right: 15px;
}

.filter:first-child:after {
  content: "";
  width: 1px;
  height: calc(100% - 10px);
  background: var(--account-hr);
  position: absolute;
  right: 0;
}

.filter:focus span,
.filter:hover span {
  color: var(--mainColor);
}

.filter-date {
  font-size: 0.7rem;
  font-weight: 700;
  color: #fff;
}

.filter-wrap {
  padding: 10px 15px;
  background: #fff;
  margin: 6px 0;
  border-radius: 15px;
}

.filterData {
  color: #9f9f9f;
  font-size: 12px;
}

.filter-wrap:last-child {
  margin-bottom: 30px;
}

.filter-wrap:last-child:after {
  display: none;
}

.filter-icon {
  width: 48px;
  height: 48px;
  background: var(--inputBg);
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
}

.filter-list-info {
  display: flex;
  flex-direction: column;
  align-items: space-between;
  width: 100%;
}
.filter-list-info .item-status {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  font-weight: 500;
  color: #b9b9b9;
}

.filter-item {
  display: flex;
  flex-direction: column;
}
.filter-item > .text-red {
  color: red !important;
}
.filter-item .text-green {
  color: green !important;
}
.filter-item:first-child {
  margin-bottom: 5px;
}
.filter-item .item-name {
  font-size: 16px;
  font-weight: 700;
}
.filter-item .item-reward {
  font-size: 14px;
  font-weight: 500;
  color: var(--mainColor);
  text-align: right;
}
.filter-item .item-time {
  font-size: 12px;
  color: #b9b9b9;
}

.moneyList {
  padding: 15px;
}
.moneyList .filter-list-info {
  padding: 0;
  width: 100%;
}
.moneyList .filter-item .item-reward {
  font-size: 1rem;
  font-weight: bold;
  color: #18d314;
}
.moneyList .filter-item .item-reward.text_red {
  color: #ff4e4c !important;
}
.moneyList .filter-item .item-name {
  font-size: 1rem;
  display: block;
}
.moneyList .filter-item .item-status {
  width: 100%;
  justify-content: space-between;
}
.moneyList .item-time {
  font-size: 13px;
  color: #b9b9b9;
}
.moneyList .small-text {
  font-size: 13px;
  color: #b9b9b9;
}

.status {
  margin-bottom: 15px;
}

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

.status li {
  padding: 10px 20px;
  position: relative;
}

.status li a {
  font-size: 15px;
  color: var(--text-black);
  display: block;
}

.status li:after {
  position: absolute;
  top: 50%;
  bottom: auto;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  right: 20px;
}

.status li.selected {
  background: var(--content-Bg);
}

.status li.selected a {
  color: var(--mainColor);
}

.contentDetail .account_bg {
  border-bottom: 2px solid #f0f0f0;
  height: 64px;
}

.account-invite-box {
  background: url(../images/bg_card_01.png);
  background-size: cover;
  box-shadow: 0 0 12px rgba(0, 0, 0, 0.2);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 0.5rem;
  padding-bottom: 1.75rem;
  margin: 0 0.5rem;
  margin-top: -4rem;
  position: relative;
  overflow: hidden;
  margin-top: 120px;
}
.account-invite-box > h3 {
  font-weight: 700;
  font-size: 12px;
  line-height: 25px;
  color: #fff;
  margin: 0;
}
.account-invite-box > span {
  font-weight: 400;
  font-size: 13px;
  line-height: 19px;
  text-align: center;
  margin: 0 35px;
}
.account-invite-box .invite-code {
  font-weight: 700;
  font-size: 32px;
  line-height: 47px;
  letter-spacing: 0.1em;
  color: #fff;
}
.account-invite-box .account-invite-link {
  margin: 0 0.5rem;
  width: 80%;
}
.account-invite-box .account-invite-link span.small-text {
  font-weight: 400;
  font-size: 13px;
  line-height: 19px;
  text-align: center;
  color: #fff;
  display: block;
  margin-bottom: 15px;
}

.input-group:before {
  content: "";
  width: 18px;
  height: 18px;
  position: absolute;
  left: 15px;
  top: 50%;
  bottom: auto;
  transform: translateY(-50%);
  background-repeat: no-repeat;
  background-position: center;
}

.account-invite-link .input-group.hasBtn {
  position: relative;
  height: 25px;
}

.account-invite-link .input-group.hasBtn .input-group-text {
  position: absolute;
  height: 100%;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  right: 95px;
  width: 80px;
  background: #fff;
  color: var(--mainColor);
  border: 1px solid var(--mainColor);
  border-radius: 5px;
}

.aboutusBox {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 30px 0;
}

.aboutusBox img {
  width: 98px;
  height: 98px;
}

.aboutusBox p {
  font-size: 20px;
  margin: 0;
}

.aboutusBox span {
  font-size: 14px;
  color: #9f9f9f;
}

.announcementBox {
  list-style: none;
  padding: 0;
}

.announcementBox li {
  background-color: #fff;
  border-radius: 10px;
  padding: 5%;
}

.announcementBox li img {
  width: 100%;
}

.announcementBox li p {
  margin: 0;
  color: #b1b1b1;
  margin: 5px 0;
}

.announcementBox li h4 {
  margin: 0;
}

.account-deposit-withdrawal .item {
  border-radius: 10px;
  background: #fff;
  overflow: hidden;
}

.account-deposit-withdrawal .item-img {
  border-radius: 10px;
  width: 60px;
  height: 60px;
}

.account-deposit-withdrawal .item-title {
  color: var(--labelColor);
  font-size: 14px;
}

.account-deposit-withdrawal .item-number {
  color: var(--mainColor);
  font-weight: bold;
  font-size: 20px;
}

.account-deposit-withdrawal .item button {
  width: 60px;
  height: 40px;
  border-radius: 4px;
  border: 1px solid var(--mainColor);
  color: #fff;
  background-color: var(--mainColor);
  font-weight: bold;
}

.account-deposit-withdrawal .item button.withdrawed {
  border: 1px solid #fff;
  color: #fff;
  background-color: #ccc;
  font-weight: bold;
}

@media (min-width: 750px) {
  .servicePage .accountInfoBlock {
    padding: 21rem 5% 0;
  }
}
#welcome_page {
  background: #fff;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 100dvh;
}
#welcome_page .welcome_logo {
  width: 100%;
  text-align: center;
  height: 60dvh;
  display: flex;
  justify-content: center;
  align-items: center;
}
#welcome_page .welcome_logo img {
  width: 250px;
  height: auto;
}
#welcome_page .btn_group {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 40px;
}
#welcome_page .btn_group .btn {
  width: 80%;
  height: 48px;
  border-radius: 5px;
  background: #fff;
  font-size: 16px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  text-align: center;
  cursor: pointer;
  color: var(--mainColor);
  border: 1px solid var(--mainColor);
}
#welcome_page .btn_group .btn.register {
  background: var(--mainColor);
  color: #fff;
  border: 1px solid #fff;
}
#welcome_page .btn_group p {
  color: var(--mainColor);
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}
#welcome_page .btn_group p a {
  color: var(--mainColor);
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  text-decoration-line: underline;
}

#index {
  background-size: 100% auto;
  background-repeat: no-repeat;
  background-position: top center;
}
#index .content {
  padding: 0;
}
#index .title_box {
  margin: 0 5%;
}
#index .title_box h2 {
  color: var(--mainColor);
  font-size: 1.2rem;
}
#index .title_box a img {
  width: 25px;
  height: 25px;
}
#index .title_box a svg {
  width: 25px;
  height: 25px;
  fill: var(--mainColor);
}
#index .tab_top {
  list-style-type: none;
  display: flex;
  gap: 0;
}
#index .tab_top li {
  flex: 2;
  background-color: #fff;
}
#index .tab_top li a {
  display: flex;
  justify-content: center;
  align-items: center;
  color: #000;
}
#index .tab_top li a img {
  width: 60px;
  height: 60px;
}
#index .tab_top li a .text {
  line-height: 1;
}
#index .tab_top li a .text span {
  font-size: 12px;
  color: #999;
}
#index .roulette_box a {
  width: 100%;
  display: block;
}
#index .full-section {
  display: flex;
  flex-direction: column;
}
#index .full-section .online_store {
  width: 100%;
  height: 74px;
  display: block;
  background-image: url(../images/bg_store.png);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-color: #fff;
  overflow: hidden;
  position: relative;
}
#index .full-section .online_store::before {
  content: "";
  position: absolute;
  top: 10px;
  left: 5%;
  width: 70px;
  height: 67px;
  background-image: url(../images/bg_img_book.png);
  background-repeat: no-repeat;
  background-size: contain;
}
#index .full-section .online_store h2 {
  font-size: 20px;
  font-weight: bold;
  margin: 13px 0 0 calc(5% + 85px);
  line-height: 1.3;
  color: #ffb829;
}
#index .full-section .online_store p {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  top: 50%;
  transform: translateY(-50%);
  right: 5%;
  background: linear-gradient(90deg, #ff3c3c, #ffcc5d);
  width: 70px;
  height: 25px;
  color: #fff;
  border-radius: 5px;
  font-size: 12px;
  text-align: center;
}
#index .full-section ul {
  padding: 0 5%;
  background-color: #fff;
}
#index .full-section ul li {
  width: 90%;
  margin: 0 auto;
  flex-shrink: 0;
  background: #fefefe;
  border-radius: 5px;
  border: 1px solid #fff;
}
#index .full-section ul li .img_box {
  flex: 1;
  height: 85px;
  margin-right: 15px;
  border-radius: 5px;
  overflow: hidden;
}
#index .full-section ul li .img_box img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
#index .full-section ul li .text_box {
  flex: 2;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
#index .full-section ul li .text_box h4 {
  font-size: 15px;
}
#index .full-section ul li .text_box span {
  color: #888;
  font-size: 12px;
}
#index .full-section ul li .text_box a {
  color: #ff9c1b;
  font-size: 14px;
}

#index_detail .title_block {
  display: flex;
  margin: 0;
  background: #fff;
  padding: 20px 5%;
}
#index_detail .title_block .img_block {
  padding: 10px;
  width: 100px;
  height: 100px;
  border-radius: 5px;
  background: #fff;
  margin-right: 15px;
}
#index_detail .title_block .text_block {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
#index_detail .title_block .text_block h4 {
  color: #2a2a2a;
  font-size: 20px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  margin: 0;
}
#index_detail .title_block .text_block p {
  color: #2a2a2a;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  margin: 0;
}
#index_detail .title_block .text_block p b {
  color: var(--mainColor);
  font-size: 20px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  margin-left: 20px;
}
#index_detail .content {
  padding-top: 20px;
}
#index_detail .content .form-group .form-control {
  text-indent: 0;
}

#passwordToast .cancel {
  color: #8b8b8b !important;
}

.sub_title {
  color: var(--mainColor);
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
}
.sub_title span {
  width: 5px;
  height: 15px;
  border-radius: 4px;
  background: var(--mainColor);
  display: inline-block;
}
.sub_title .total_profit {
  color: var(--mainColor);
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
}

#index_detail_finish .title_block {
  display: flex;
  margin: 0;
  background: #fff;
  padding: 20px 5%;
}
#index_detail_finish .title_block .img_block {
  padding: 10px;
  width: 100px;
  height: 100px;
  border-radius: 5px;
  background: #fff;
  margin-right: 15px;
}
#index_detail_finish .title_block .text_block {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
#index_detail_finish .title_block .text_block h4 {
  color: #2a2a2a;
  font-size: 20px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  margin: 0;
}
#index_detail_finish .title_block .text_block p {
  color: #2a2a2a;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  margin: 0;
}
#index_detail_finish .title_block .text_block p b {
  color: var(--mainColor);
  font-size: 20px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  margin-left: 20px;
}
#index_detail_finish .main-section .sub_title {
  padding: 0 5%;
}
#index_detail_finish .main-section ul {
  background: #fff;
  padding: 0;
}
#index_detail_finish .main-section ul li {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid #f0f0f0;
  padding: 17px 5%;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 100%;
  color: #2a2a2a;
}
#index_detail_finish .main-section .finish {
  background: #d2d2d2;
  color: #8b8b8b;
}

#quantify_ai {
  background-color: #f8f8f8;
}
#quantify_ai .scroller-content {
  padding-bottom: 0px;
}
#quantify_ai .content {
  padding: 0;
}
#quantify_ai .tab {
  border-bottom: 1px solid #eaeaea;
  padding: 20px 0 20px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  width: 100%;
  background-color: #fff;
}
#quantify_ai .tab button {
  border: none;
  background: none;
  padding: 0 15px;
  position: relative;
  width: 50%;
}
#quantify_ai .tab button span {
  font-size: 14px;
  font-weight: bold;
}
#quantify_ai .tab button.active {
  color: var(--mainColor);
}
#quantify_ai .tab button.active::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: -20px;
  border: 1px solid var(--mainColor);
  background: var(--mainColor);
  border-radius: 5px;
  width: 81px;
  height: 3px;
}
#quantify_ai .items {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  padding: 20px 5% 30px;
}
#quantify_ai .items .item {
  background: #fff;
  display: block;
  padding: 16px;
  width: 90%;
  box-shadow: 0 0 12px 0 rgba(152, 152, 152, 0.1);
  position: relative;
}
#quantify_ai .items .item .tag {
  position: absolute;
  top: 50%;
  right: 14px;
  width: 100px;
  height: 45px;
  transform: translateY(-50%) translateX(7px);
}
#quantify_ai .items .item .img_block {
  overflow: hidden;
  border-radius: 4px;
}
#quantify_ai .items .item .img_block img {
  width: 100%;
  height: auto;
}
#quantify_ai .items .item h4 {
  text-align: center;
  margin: 17px 0;
  padding: 0;
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  color: var(--mainColor);
}
#quantify_ai .items .item ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
#quantify_ai .items .item ul li {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}
#quantify_ai .items .item ul li .label,
#quantify_ai .items .item ul li .value {
  font-size: 14px;
  font-style: normal;
  line-height: normal;
  color: #2a2a2a;
  font-weight: bold;
}
#quantify_ai .items .item ul li .label {
  display: flex;
  align-items: center;
  justify-content: center;
}
#quantify_ai .items .item ul li .label::before {
  content: "";
  display: inline-block;
  width: 4px;
  height: 16px;
  background-size: 100%;
  background: var(--mainColor);
  border-radius: 4px;
  margin-right: 5px;
}

#quantify_ai_detail .scroller-content {
  padding-bottom: 0px;
  background: #fff;
}
#quantify_ai_detail .title_block {
  width: 90%;
  padding: 20px 5% 0;
  background: #fff;
  z-index: 2;
}
#quantify_ai_detail .title_block .img_block {
  overflow: hidden;
  border-radius: 4px;
  -o-object-fit: cover;
     object-fit: cover;
}
#quantify_ai_detail .title_block .img_block img {
  width: 100%;
  height: auto;
}
#quantify_ai_detail .title_block h4,
#quantify_ai_detail .title_block p {
  margin: 0;
  padding: 0;
  text-align: center;
}
#quantify_ai_detail .title_block h4 {
  font-size: 20px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  color: var(--mainColor);
}
#quantify_ai_detail .title_block p {
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  color: #000;
  background-color: #000;
}
#quantify_ai_detail .title_block p strong {
  font-size: 20px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  color: var(--mainColor);
}
#quantify_ai_detail .title_block .type_block {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: 15px;
}
#quantify_ai_detail .title_block .type_block p {
  border-radius: 4px;
  background-color: #fff;
}
#quantify_ai_detail .content {
  background: #fff;
}
#quantify_ai_detail .content h3 {
  padding: 0;
  margin: 0;
  margin-bottom: 10px;
}
#quantify_ai_detail .content .text {
  margin-bottom: 10px;
}
#quantify_ai_detail .bottom_block {
  background: #fff;
  position: sticky;
  bottom: 0;
  width: 90%;
  padding: 0 5%;
}
#quantify_ai_detail .bottom_block .form-control {
  text-indent: 0;
}
#quantify_ai_detail .bottom_block ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
#quantify_ai_detail .bottom_block ul li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}
#quantify_ai_detail .bottom_block ul li .label,
#quantify_ai_detail .bottom_block ul li .value {
  font-size: 14px;
  font-style: normal;
  line-height: normal;
  color: #2a2a2a;
}
#quantify_ai_detail .bottom_block ul li .value {
  font-weight: bold;
}
#quantify_ai_detail .bottom_block ul li .label h3 {
  margin: 0;
  padding: 0;
}
#quantify_ai_detail .record-table {
  margin: 10px 0;
  width: 100%;
  overflow-x: auto;
}
#quantify_ai_detail .record-table table {
  width: 100%;
  border-collapse: collapse;
  background: #f5f5f5;
  border-radius: 8px;
  overflow: hidden;
}
#quantify_ai_detail .record-table table tbody {
  border-bottom: 1px solid #eee;
}
#quantify_ai_detail .record-table table th {
  background: #ffcc5c;
  padding: 12px 8px;
  font-size: 14px;
  color: #ffffff;
  font-weight: 500;
  text-align: center;
  width: 33%;
}
#quantify_ai_detail .record-table table td {
  padding: 12px 8px;
  font-size: 14px;
  color: #333;
  border-bottom: 1px solid #fff;
  text-align: center;
}
#quantify_ai_detail .record-table table tr:last-child td {
  border-bottom: none;
}
#quantify_ai_detail .record-table table tfoot td {
  font-weight: bold;
  color: #000;
}

#account {
  background: url(../images/bg_account.png) no-repeat top center;
  background-size: 100%;
}
#account .page--main {
  background: none;
}
#account .account-wrap {
  border-radius: 15px;
  margin: 0 0 1rem;
  background-size: cover;
}
#account .account-wrap form .form-group {
  width: 95%;
}
#account .account-wrap form .form-group .form-control {
  text-indent: 0;
}
#account .account-wrap .accountWalletInfo {
  color: #fff;
  position: relative;
}
#account .account-wrap .accountWalletInfo .textBlack span {
  font-size: 14px;
  font-weight: bold;
}
#account .account-wrap .accountWalletInfo h4,
#account .account-wrap .account-wrap .accountWalletInfo h2 {
  margin: 0;
}
#account .account-wrap .accountWalletInfo .saveMoney > input {
  position: absolute;
  right: 0;
  top: 15px;
  background: #fff;
  border: none;
  border-radius: 5px;
  font-weight: bold;
  color: var(--mainColor);
  padding: 8px 27px;
}
#account .userPicBox {
  position: relative;
  position: relative;
  display: flex;
  align-items: center;
  color: #fff;
}
#account .userPicBox .userPic {
  max-width: 60px;
  height: 60px;
  -o-object-fit: cover;
     object-fit: cover;
  aspect-ratio: 1/1;
  margin: 0 1rem 0 0;
  position: relative;
  border-radius: 50%;
  background-color: #fff;
  background-image: url(../images/avatar.png);
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: center;
  border: 1px solid #ffb1b1;
}
#account .userPicBox .user_box {
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
}
#account .userPicBox .user_box .user_code {
  font-size: 20px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
}
#account .userPicBox .user_box .user_status {
  display: flex;
}
#account .userPicBox .user_box .user_status div {
  margin-right: 10px;
  font-size: 14px;
  display: flex;
  align-items: center;
}
#account .userPicBox .user_box .user_status div::before {
  content: "";
  display: inline-block;
  width: 16px;
  height: 16px;
  background-size: 100%;
  background-repeat: no-repeat;
  background-size: contain;
  margin-right: 3px;
}
#account .userPicBox .user_box .user_auth {
  color: #adff79;
}
#account .userPicBox .user_box .user_auth::before {
  background-image: url(../images/icon_circle_check.svg);
}
#account .userPicBox .user_box .user_level_00 {
  color: #fff;
}
#account .userPicBox .user_box .user_level_00::before {
  background-image: url(../images/img_level_00.png);
}
#account .userPicBox .user_box .user_level_01 {
  color: #fff;
}
#account .userPicBox .user_box .user_level_01::before {
  background-image: url(../images/img_level_01.png);
}
#account .userPicBox .user_box .user_level_02 {
  color: #fff;
}
#account .userPicBox .user_box .user_level_02::before {
  background-image: url(../images/img_level_02.png);
}
#account .userPicBox .user_box .user_level_03 {
  color: #fff;
}
#account .userPicBox .user_box .user_level_03::before {
  background-image: url(../images/img_level_03.png);
}
#account .userPicBox .user_box .user_level_04 {
  color: #fff;
}
#account .userPicBox .user_box .user_level_04::before {
  background-image: url(../images/img_level_04.png);
}
#account .userPicBox .user_box .user_level_05 {
  color: #fff;
}
#account .userPicBox .user_box .user_level_05::before {
  background-image: url(../images/img_level_05.png);
}
#account .userPicBox .user_box .user_level_06 {
  color: #fff;
}
#account .userPicBox .user_box .user_level_06::before {
  background-image: url(../images/img_level_06.png);
}
#account .userPicBox .user_box .not_auth {
  color: #fff !important;
}
#account .userPicBox .user_box .not_auth::before {
  background-image: url(../images/icon_circle_minus.svg);
}
#account .account-user {
  display: flex;
  padding: 0 5%;
  align-items: center;
  justify-content: space-between;
}
#account .account_bg {
  position: relative;
  z-index: 0;
  width: 100%;
}
#account .user_info_box {
  color: #fff;
  text-align: right;
}
#account .subsidy-claim {
  display: flex;
  justify-content: space-between;
  flex-direction: row;
}
#account .subsidy-claim div {
  color: var(--mainColor);
  font-weight: bold;
}
#account .subsidy-claim span {
  font-size: 16px;
}

#real_name_auth .form-group .form-control {
  text-indent: 0;
}

#account_bind_card .form-group .form-control {
  text-indent: 0;
}

#account_pwd .form-group .form-control {
  text-indent: 0 !important;
}

#account_paycode .form-group .form-control {
  text-indent: 0 !important;
}

#daily_check_in .scroller-content {
  padding-bottom: 0;
}
#daily_check_in .content {
  background: url(../images/bg_daily.png) no-repeat;
  background-position: bottom;
  background-size: 100% auto;
  min-height: calc(100dvh - 65px);
}
#daily_check_in .week {
  background-color: #fff;
  border-radius: var(--border-radius);
  padding: 15px 10px;
}
#daily_check_in .week .title {
  display: flex;
  justify-content: space-between;
}
#daily_check_in .week .title p {
  padding: 0;
  margin: 0;
  font-size: 15px;
  color: #000;
  margin-bottom: 12px;
}
#daily_check_in .week .title p strong {
  color: #ff3c3c;
}
#daily_check_in .week .title p span {
  font-size: 14px;
  color: #686868;
}
#daily_check_in .week ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 8px;
}
#daily_check_in .week ul li {
  display: flex;
  cursor: pointer;
  border-radius: var(--borderRadius);
  background-color: #f8f8f8;
  color: #686868;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 13px 0;
  font-size: 14px;
  border-radius: var(--border-radius);
}
#daily_check_in .week ul li:first-child {
  grid-column: span 1;
  grid-row: span 2;
  display: flex;
}
#daily_check_in .week ul li img {
  width: 40px;
  height: 40px;
  margin-bottom: 1px;
}
#daily_check_in .week ul li.active {
  background-color: #ff3c3c;
  color: #fff;
}
#daily_check_in .week ul li.checked {
  background-color: #ff6767;
  color: #fff;
}
#daily_check_in .week ul li.gray {
  filter: grayscale(100%);
}

#mission_center {
  background-color: #f8f8f8;
}
#mission_center .tab {
  border-bottom: 1px solid #eaeaea;
  padding: 20px 0 20px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  width: 100%;
  background-color: #fff;
}
#mission_center .tab button {
  border: none;
  background: none;
  padding: 0 15px;
  position: relative;
  width: 50%;
}
#mission_center .tab button span {
  font-size: 14px;
  font-weight: bold;
}
#mission_center .tab button.active {
  color: var(--mainColor);
}
#mission_center .tab button.active::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: -20px;
  border: 1px solid var(--mainColor);
  background: var(--mainColor);
  border-radius: 5px;
  width: 81px;
  height: 3px;
}
#mission_center .tabcontent {
  height: inherit;
}
#mission_center .tabcontent ul {
  padding: 15px;
  margin: 0;
  list-style: none;
  display: grid;
  gap: 15px;
}
#mission_center .tabcontent ul li {
  border: 2px solid var(--mainColor);
  border-left: 8px solid var(--mainColor);
  border-radius: 5px;
  display: flex;
  justify-content: space-between;
  padding: 20px 15px;
}
#mission_center .tabcontent ul li button {
  width: 94px;
  height: 28px;
  border-radius: 28px;
  border: 1px solid var(--mainColor);
  color: #fff;
  background-color: var(--mainColor);
  font-weight: bold;
}
#mission_center .tabcontent ul li button.receive {
  background-color: #ff4e4c;
  border: 1px solid #ff4e4c;
}
#mission_center .tabcontent ul li button.disabled {
  opacity: 0.5;
}
#mission_center .tabcontent ul li h4 {
  font-size: 16px;
  color: #2a2a2a;
  padding: 0;
  margin: 0 0 5px;
}
#mission_center .tabcontent ul li p {
  font-size: 14px;
  color: #888;
  padding: 0;
  margin: 0 0 20px;
}
#mission_center .tabcontent ul li > div > div {
  display: flex;
  align-items: flex-end;
}
#mission_center .tabcontent ul li > div > div span {
  font-size: 12px;
  color: #888;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: row;
}
#mission_center .tabcontent ul li > div > div span.details {
  font-size: 12px;
  color: var(--mainColor);
}
#mission_center .tabcontent ul li > div > div span.reward::before {
  content: "";
  width: 15px;
  height: 15px;
  background: url(../images/icon_coin_mission_center.svg) no-repeat;
  display: inline-block;
  margin-right: 5px;
}
#mission_center .tabcontent ul li > div > div span.dividend::before {
  content: "";
  width: 15px;
  height: 15px;
  background: url(../images/icon_red_envelope_mission_center.svg) no-repeat;
  display: inline-block;
  margin-right: 5px;
}

#mission_success {
  background: url(../images/bg_mission_success.png) no-repeat;
  background-size: cover;
  height: 100dvh;
}
#mission_success .content {
  padding: 0;
}
#mission_success .main-control {
  background: none;
}
#mission_success .main-control .topHeading {
  background: none;
}
#mission_success .page--main {
  background: none;
  background-size: contain;
}
#mission_success .page--main .main-section {
  background: none;
}

#news {
  background-color: #f8f8f8;
}
#news .tab {
  border-bottom: 1px solid #eaeaea;
  padding: 20px 0 20px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  width: 100%;
  background-color: #fff;
}
#news .tab button {
  border: none;
  background: none;
  padding: 0 15px;
  position: relative;
  width: 50%;
}
#news .tab button span {
  font-size: 14px;
  font-weight: bold;
}
#news .tab button.active {
  color: var(--mainColor);
}
#news .tab button.active::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: -20px;
  border: 1px solid var(--mainColor);
  background: var(--mainColor);
  border-radius: 5px;
  width: 81px;
  height: 3px;
}
#news .tabcontent {
  height: inherit;
  padding: 0 15px;
}
#news .tabcontent .info {
  margin-top: 1.5rem;
  margin-bottom: 1rem;
  display: grid;
  gap: 15px;
}
#news .tabcontent .info .info-list {
  padding: 20px 20px;
  background-color: #fff;
  border-radius: 5px;
  box-shadow: 0px 4px 9px rgba(159, 159, 159, 0.1);
}
#news .tabcontent .info-image {
  position: relative;
  width: 120px;
  height: 80px;
  margin-right: 10px;
  border-radius: 3px;
  overflow: hidden;
}
#news .tabcontent .info-image img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
#news .tabcontent .info-content {
  width: calc(100% - 120px - 10px);
}
#news .tabcontent .info-content h4 {
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 22px;
  text-align: left;
  color: var(--text-black);
  max-width: 100%;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  margin: 0 0 1rem;
}
#news .tabcontent .info-content .text-small {
  font-size: 11px;
  font-weight: 400;
  line-height: 16px;
  color: #888;
  width: 100%;
  text-align: right;
}
#news .tabcontent .info-detail-list {
  margin: 1.5rem 0;
}
#news .tabcontent .info-detail-caption {
  color: #fff;
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 22px;
  margin-top: 0.75rem;
}
#news .tabcontent .info-detail-caption .caption {
  max-width: 100%;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  margin-bottom: 0.5rem;
}
#news .tabcontent .info-detail-caption .text-small {
  font-size: 11px;
  font-weight: 400;
  line-height: 16px;
  color: #888;
}
#news .tabcontent .info-detail-image {
  border-radius: 2px;
}
#news .tabcontent .info-detail-image > img {
  width: 100%;
}
#news .tabcontent .info-detail-top-title {
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 25px;
}

#fund .items {
  margin-top: 30px;
}
#fund .items .item {
  width: 95%;
  margin: 0 auto;
  padding: 0 0 15px;
  background: #fff;
  border-radius: 4px;
  box-shadow: 0px 4px 9px rgba(159, 159, 159, 0.1);
  margin-bottom: 20px;
}
#fund .items .item .item-title {
  font-size: 14px;
  font-weight: 900;
  color: var(--mainColor);
  border-bottom: 1px solid #f0f0f0;
  padding: 20px 0;
  text-indent: 10px;
  margin-bottom: 10px;
}
#fund .items .item .item-content {
  display: flex;
  justify-content: space-between;
  padding: 10px 15px;
}

#window .content {
  padding: 0;
  min-height: calc(100dvh - 65px) !important;
}
#window .scroller-content {
  padding-bottom: 0px !important;
  min-height: 100% !important;
}
#window h2 {
  font-size: 20px;
  font-weight: 700;
  color: #9d9d9d;
  margin: 0;
  text-align: center;
  vertical-align: middle;
  height: 100%;
  background-color: #ededed;
}

#lottery_machine .content {
  height: calc(100dvh - 65px - 80px);
  background-image: url(../images/bg_daily.png), url(../images/bg_roulette.png);
  background-size: 100% auto;
  background-repeat: no-repeat;
  background-color: #eb2822;
  background-position: bottom, top;
  padding-top: 80px;
}
#lottery_machine .scroller-content {
  padding-bottom: 0;
}
#lottery_machine .lottery-bg {
  display: flex;
  justify-content: center;
  align-items: flex-start;
}
#lottery_machine .lottery-container {
  display: grid;
  grid-template-rows: repeat(4, 100px);
  grid-template-columns: repeat(4, 100px);
  padding: 30px;
  max-width: 460px; /* 4*100 + 3*20 = 400 + 60 */
  position: relative;
  background: url(../images/bg_game_lottery.png) no-repeat;
  background-size: 100% auto;
  background-position: center;
  /* 邊框獎項格子 */
  /* 中央合併區塊：合併中間 2x2 區域 */
}
#lottery_machine .lottery-container .lottery-cell {
  background: url(../images/bg_ltem_lottery.png) no-repeat;
  background-position: center;
  background-size: contain;
  border-radius: 10px;
  font-size: 12px;
  font-weight: bold;
  text-align: center;
  transition: transform 0.2s, box-shadow 0.2s;
  color: #6b400b;
  width: 80px;
  height: 80px;
  justify-self: center;
  align-self: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  /* 高亮效果：放大與彩色陰影 */
}
#lottery_machine .lottery-container .lottery-cell.active {
  transform: scale(1.1);
  box-shadow: 0 0 20px 10px rgba(255, 235, 59, 0.5);
  border: 1px solid var(--mainColor);
}
#lottery_machine .lottery-container .lottery-center {
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  /* 按鈕樣式 */
}
#lottery_machine .lottery-container .lottery-center #start-btn {
  font-size: 0;
  font-weight: bold;
  background: url(../images/btn_lottery.png) no-repeat;
  background-position: center;
  background-size: 100% 100%;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.3s;
  width: 100%;
  height: 100%;
  margin-left: 6px;
}
#lottery_machine .lottery-container .lottery-center #start-btn:hover {
  opacity: 0.8;
}
@media (max-width: 600px) {
  #lottery_machine .lottery-bg {
    aspect-ratio: 1/1;
    height: auto;
    transform-origin: top center;
  }
}
@media (max-width: 450px) {
  #lottery_machine .lottery-bg {
    scale: 0.8;
  }
}
@media (max-width: 400px) {
  #lottery_machine .lottery-bg {
    scale: 0.7;
    margin-top: 20px;
  }
}

#taskCenter {
  background-image: url(../images/bg_top_index.png);
  background-size: 100% auto;
  background-repeat: no-repeat;
  background-position: top center;
  padding-top: 20px;
  /* 領取按鈕 */
  /* 領取資訊文字 */
}
#taskCenter .scroller-content {
  min-height: calc(100dvh - 50px);
}
#taskCenter .scroller-content .main-section {
  background: none;
}
#taskCenter .ambassador-card {
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  padding: 16px;
  position: relative;
  margin-top: 65px;
  margin-bottom: 85px;
}
#taskCenter .ambassador-card:last-child {
  margin-bottom: 0;
}
#taskCenter .header {
  position: absolute;
  top: -75px;
  left: 50%;
  transform: translateX(-50%);
}
#taskCenter .header .medal-icon {
  width: 150px;
  height: 150px;
  background-size: contain;
  margin: 0 auto;
}
#taskCenter .section .title {
  display: flex;
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 8px;
  color: #000;
  align-items: center;
}
#taskCenter .section .title::before {
  content: "";
  display: block;
  background-color: var(--mainColor);
  width: 5px;
  height: 16px;
  border-radius: 5px;
  margin-right: 5px;
}
#taskCenter .section .title .status {
  display: flex;
  align-items: center;
  margin-left: 10px;
  color: #cfcfcf;
}
#taskCenter .section .title .status.completed {
  color: #28a745;
}
#taskCenter .section .title .status img {
  width: 18px;
  margin-right: 5px;
}
#taskCenter .section .info {
  font-size: 14px;
  color: #666;
  margin: 0;
}
#taskCenter .section .info .progress {
  color: red;
  font-weight: bold;
}
#taskCenter .section .info .progress.completed {
  color: #28a745;
}
#taskCenter .claim-button {
  display: block;
  width: 100%;
  margin-top: 16px;
  padding: 12px 0;
  font-size: 16px;
  font-weight: 600;
  color: #fff;
  background: #ff9f2a;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  outline: none;
}
#taskCenter .claim-info {
  margin-top: 8px;
  text-align: center;
  font-size: 14px;
  color: #000;
  background-color: #cfcfcf;
  padding: 12px 0;
  border-radius: 6px;
}
#taskCenter .completed-card {
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  padding: 16px;
  position: relative;
}
#taskCenter .completed-card ul li {
  background-color: #f6f6f6;
  border-radius: var(--border-radius);
  padding: 10px 20px;
}
#taskCenter .completed-card ul li span {
  font-size: 14px;
  color: #a6a6a6;
}

#taskExam .ambassador-card {
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  padding: 16px;
  position: relative;
}
#taskExam .title {
  display: flex;
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 8px;
  color: #000;
  align-items: center;
}
#taskExam .title::before {
  content: "";
  display: block;
  background-color: var(--mainColor);
  width: 5px;
  height: 16px;
  border-radius: 5px;
  margin-right: 5px;
}
#taskExam .section .question {
  padding: 0;
  margin: 0;
  font-size: 16px;
}
#taskExam .section ul {
  list-style: none;
}
#taskExam .section ul li {
  background-color: #f6f6f6;
  border-radius: var(--border-radius);
  padding: 10px 20px;
}
#taskExam .section ul li input[type=radio] {
  color: var(--mainColor);
}
#taskExam .section ul li input[type=radio]:checked {
  accent-color: var(--mainColor);
}

#market .scroller-content {
  min-height: auto;
}
#market .select-dropdown {
  position: relative;
  width: 100%;
  border-radius: 4px;
}
#market .select-dropdown__button {
  font-size: 15px;
  padding: 6px 20px 6px 24px;
  background: #fff6ef;
  border: none;
  color: #000;
  border-radius: 4px;
  width: 100%;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
#market .select-dropdown__button:focus {
  outline: 0;
}
#market .select-dropdown__list {
  position: absolute;
  display: block;
  left: 0;
  right: 0;
  max-height: 300px;
  overflow: auto;
  margin: 0;
  padding: 0;
  margin-top: 5px;
  list-style-type: none;
  opacity: 0;
  pointer-events: none;
  transform-origin: top left;
  transform: scale(1, 0);
  -webkit-transition: all ease-in-out;
  -webkit-transition-delay: 0.3s;
  transition: all ease-in-out 0.3s;
  z-index: 2;
  border-radius: 4px;
}
#market .select-dropdown__list.active {
  opacity: 1;
  pointer-events: auto;
  transform: scale(1, 1);
}
#market .select-dropdown__list-item {
  display: block;
  list-style-type: none;
  padding: 8px 24px;
  background: #fff6ef;
  border-top: 1px solid var(--stock-filter-lighten);
  font-size: 15px;
  line-height: 22px;
  cursor: pointer;
  color: #000;
  -webkit-transition: all ease-in-out;
  -webkit-transition-delay: 0.3s;
  transition: all ease-in-out 0.3s;
}
#market .select-dropdown__list-item:hover {
  background: #ffecde;
}
#market .select-dropdown__list-item:first-child {
  border-top: none;
}
#market .btn-group {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
  margin-bottom: 15px;
}
#market .stock-filter {
  background: var(--mainColor);
  padding: 8px 28px 12px 28px;
  position: relative;
}
#market .stock-filter .my_stock_btn {
  background: linear-gradient(to right, #ffd476, #ffb700);
  color: #791c05;
  border: 1px solid var(--mainColor);
  padding: 0 10px;
  position: absolute;
  right: 0;
  top: 1.3rem;
  width: 130px;
  height: 40px;
  border-radius: 25px 0 0 25px;
  font-weight: 500;
}
#market .stock-content {
  background: #fff;
  border-bottom: 1px solid #efefef;
}
#market .stock-info .large-text {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 36px;
  color: #fff;
}
#market .stock-info .large-text span {
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 19px;
}
#market .stock-info .stock-green-text, #market .stock-info .stock-red-text {
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 19px;
}
#market .stock-info .stock-red-text {
  color: var(--mainColor);
  padding: 5px 15px;
  background-color: #fff;
  border-radius: var(--border-radius);
}
#market .stock-info .stock-green-text {
  color: var(--green);
}
#market .stock-detail {
  display: flex;
  justify-content: space-between;
  align-items: stretch;
}
#market .stock-detail .gutter-line {
  width: 0.5px;
  background: #8b8eb1;
  margin: 0 10px;
}
#market .stock-detail > .d-flex {
  flex: 0 1 50%;
}
#market .stock-detail > .d-flex > .d-flex {
  font-size: 11px;
  font-weight: 400;
  line-height: 16px;
  text-align: left;
}
#market .stock-detail > .d-flex > .d-flex span {
  color: var(--mainColor);
}
#market .stock-detail > .d-flex > .d-flex * {
  margin: 5px 0;
}
#market .stock-charts {
  height: 100%;
  max-height: 500px;
  position: relative;
}
#market .stock-data {
  position: relative;
  background: #fff;
  padding-top: 0.75rem;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
  border-top: 1px solid #efefef;
  border-bottom: 1px solid #efefef;
}
#market .stock-data .btn {
  width: auto;
  height: auto;
}
#market .stock-data > .tab {
  border-top: 1px solid #eee;
  border-bottom: 1px solid #eee;
}
#market .stock-data .tabcontent .stock-buttons {
  position: absolute;
  top: 24px;
  left: 0;
  width: 100%;
}
#market .stock-data-table table,
#market .stock-data-table td,
#market .stock-data-table th,
#market .stock-data-table tr {
  margin: auto;
  border: none;
  border-spacing: 0;
}
#market .stock-data-table table {
  width: 100%;
  border-top: 1px solid #efefef;
}
#market .stock-data-table table thead tr {
  background: #fff;
  border-bottom: 1px solid #efefef;
}
#market .stock-data-table table thead th {
  font-weight: 500;
  font-size: 11px;
  line-height: 16px;
  color: var(--mainColor);
  padding: 3px 0;
}
#market .stock-data-table table tbody td {
  text-align: center;
  padding: 5px 0;
}
#market .stock-data-table table tbody td span {
  font-weight: 400;
  font-size: 11px;
  color: #000;
}
#market .stock-data-table table tbody td span.text-red {
  color: var(--red);
}
#market .stock-data-table table tbody td span.text-green {
  color: var(--green);
}
#market .stock-data-holder {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  margin: 1rem;
  background: var(--stock-greyBlue);
  border-radius: 4px;
}
#market .stock-data-holder > .d-flex {
  padding: 0.875rem 0;
  flex: 1;
}
#market .stock-data-holder > .d-flex:not(:last-child) {
  border-right: 1px solid #565980;
}
#market .stock-data-holder > .d-flex span {
  font-weight: 500;
  font-size: 15px;
  line-height: 22px;
  color: #fff;
}
#market .stock-data-holder > .d-flex span.small-text {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 11px;
  color: var(--stock-lightBlue);
  margin-bottom: 3px;
}
#market .stock-data-holder > .d-flex span.small-text > img {
  margin-right: 5px;
}
#market .stock-switch-tool {
  display: flex;
  justify-content: center;
  align-items: center;
  background: var(--content-Bg);
  border-radius: 6px;
  padding: 4px;
  position: relative;
  height: 28px;
}
#market .stock-switch-tool .switch {
  position: absolute;
  z-index: 1;
  display: block;
  padding: 0;
  width: 50%;
  height: calc(100% - 8px);
  background: var(--mainColor);
  border-radius: 6px;
  transition: all 0.2s ease-out;
  animation: webkitSiblingBugfix infinite 1s;
  right: calc(50% - 4px);
}
#market .stock-switch-tool .switch.sell-mode {
  background: var(--green);
}
#market .stock-switch-tool input {
  position: absolute;
  opacity: 0;
  z-index: 2;
}
#market .stock-switch-tool input:checked ~ .switch {
  right: 4px;
}
#market .stock-switch-tool .toggler {
  position: absolute;
  flex: 1;
  width: 50%;
  font-weight: 500;
  font-size: 13px;
  line-height: 19px;
  text-align: center;
  color: #000;
  padding: 5px 0;
  z-index: 2;
}
#market .stock-switch-tool .toggler.left {
  left: 0;
}
#market .stock-switch-tool .toggler.right {
  right: 0;
}
#market .stock-switch-tool .toggler--is-active {
  color: #fff;
}
#market .stock-switch-box.hide {
  display: none;
}
#market .stock-buy-content h3 {
  font-weight: 700;
  font-size: 1.0625rem;
  line-height: 25px;
  color: #000;
}
#market .stock-buy-content span.small-text {
  font-weight: 500;
  font-size: 11px;
  line-height: 16px;
  color: var(--mainColor);
}
#market .stock-buy-content .stock-buy-input {
  background: var(--inputBg);
  border: 1px solid #eee;
  border-radius: var(--border-radius);
  margin-top: 3px;
}
#market .stock-buy-content .stock-buy-input > input {
  font-weight: 700;
  font-size: 1.5rem;
  text-align: center;
  line-height: 28px;
  box-shadow: none !important;
}
#market .stock-buy-content .stock-buy-input > input::-webkit-input-placeholder {
  font-weight: 700;
  font-size: 1.5rem;
  text-align: center;
  color: #fff;
}
#market .stock-buy-content .stock-buy-input > input:-moz-placeholder {
  font-weight: 700;
  font-size: 1.5rem;
  text-align: center;
  color: #fff;
}
#market .stock-buy-content .stock-buy-input > input::-moz-placeholder {
  font-weight: 700;
  font-size: 1.5rem;
  text-align: center;
  color: #fff;
}
#market .stock-buy-content .stock-buy-input > input:-ms-input-placeholder {
  font-weight: 700;
  font-size: 1.5rem;
  text-align: center;
  color: #fff;
}
#market .stock-buy-content .icon-switch {
  display: flex;
  margin: 0 auto;
}
#market .stock-buy-detail {
  padding: 5px 15px;
  background: var(--content-Bg);
  border-radius: 6px;
}
#market .stock-chart-control {
  background: #fff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
  border-bottom: 1px solid #eaeaea;
}
#market .stock-chart-control li,
#market .stock-chart-control ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
#market .stock-chart-control ul {
  display: flex;
}
#market .stock-chart-control ul li {
  flex: 1;
  text-align: center;
  position: relative;
  font-weight: 400;
  font-size: 13px;
  line-height: 19px;
  text-align: center;
  color: #000;
  padding: 10px 0;
  cursor: pointer;
}
#market .stock-chart-control ul li:after {
  content: "";
  position: absolute;
  width: 14px;
  height: 2px;
  background: 0 0;
  left: 50%;
  right: auto;
  transform: translateX(-50%);
  bottom: 0;
}
#market .stock-chart-control ul li:focus,
#market .stock-chart-control ul li:hover {
  color: var(--mainColor);
}
#market .stock-chart-control ul li.active {
  color: var(--mainColor);
}
#market .stock-chart-control ul li.active:after {
  background: var(--mainColor);
}
#market .soldStock-rate {
  margin-top: 5px;
  margin-bottom: 10px;
}
#market .soldStock-rate-item {
  font-weight: 500;
  font-size: 13px;
  line-height: 19px;
  text-align: center;
  color: var(--stock-lightBlue);
  min-width: 58px;
  border-radius: 50px;
  background: var(--inputBg);
  border: 1px solid #434866;
  padding: 3px 0;
}
#market .soldStock-rate-item:not(:first-child) {
  margin: 0 6px;
}
#market .soldStock-rate-item.active {
  background: var(--tab-active);
  border-color: var(--tab-active);
  color: #fff;
}
#market .stock-topup .topup-input input {
  text-indent: 10px !important;
}
#market .stock-topup .topup-input::before {
  display: none;
}
#market .tab {
  display: flex;
  justify-content: center;
  align-items: center;
}
#market .tab > button {
  flex: 1;
  border: none;
  outline: 0;
  cursor: pointer;
  color: #000;
  background: #fff;
  transition: all 0.3s;
}
#market .tab > button span {
  padding: 8px 0;
  position: relative;
  display: inline-block;
  font-weight: 700;
  font-size: 0.9375rem;
  line-height: 22px;
  text-align: center;
}
#market .tab > button span:after {
  content: "";
  position: absolute;
  width: 28px;
  height: 3px;
  background: 0 0;
  left: 50%;
  right: auto;
  transform: translateX(-50%);
  bottom: -2px;
}
#market .tab > button:hover span {
  color: var(--mainColor);
}
#market .tab > button.active span {
  color: var(--mainColor);
}
#market .tab > button.active span:after {
  background: var(--mainColor);
}
#market .tabcontent {
  display: none;
  padding: 0;
  border: none;
  background: #fff;
}
#market .tabcontent .subtablinks {
  background: var(--stock-greyBlue);
  border-radius: 50px;
  border: none;
  padding: 5px 15px;
}
#market .tabcontent .subtablinks:not(:first-child) {
  margin-left: 10px;
}
#market .tabcontent .subtablinks span {
  font-style: normal;
  font-weight: 500;
  font-size: 13px;
  line-height: 19px;
  text-align: center;
  color: var(--stock-lightBlue);
}
#market .tabcontent .subtablinks.active {
  background: var(--stock-lightBlue);
}
#market .tabcontent .subtablinks.active span {
  color: #fff;
}
#market .btn-green {
  background: var(--green);
}
#market .stock-data-table table {
  width: 100%;
  border-top: 1px solid #efefef;
}
#market .stock-data-table table tbody {
  display: block;
  max-height: 120px;
  overflow-y: auto;
}
#market .stock-data-table table thead,
#market .stock-data-table table tbody tr {
  display: table;
  width: 100%;
  table-layout: fixed;
}
#market .stock-data-table table thead tr {
  background: #fff;
  border-bottom: 1px solid #efefef;
}

.marquee-container {
  position: relative;
  overflow: hidden;
  background: #fff;
  padding: 8px 0;
  margin-bottom: 15px;
  transition: all 0.3s ease-out;
  display: flex;
  width: 90%;
  margin: 0 auto 15px;
  border-radius: 10px;
}
.marquee-container .marquee-icon {
  width: 20px;
  height: 20px;
  fill: var(--mainColor);
  background-color: #fff;
  margin-right: 8px;
  flex-shrink: 0;
  padding-left: 10px;
  padding-right: 5px;
}
.marquee-container.hide {
  transform: translateY(-100%);
  opacity: 0;
  height: 0;
  margin: 0;
  padding: 0;
  pointer-events: none;
}

.marquee-wrapper {
  overflow: hidden;
  position: relative;
  flex: 1;
}

.marquee {
  display: inline-block;
  white-space: nowrap;
  padding-left: 100%;
}
.marquee span {
  display: inline-block;
  padding-right: 50px;
  color: #333;
  font-size: 14px;
}

@keyframes marquee {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%);
  }
}
#my_stock .assets-card {
  background: #ffffff;
  border-radius: 16px;
  padding: 24px;
  color: #333;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}
#my_stock .assets-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}
#my_stock .assets-title {
  font-size: 16px;
  color: #666;
}
#my_stock .assets-value {
  font-size: 32px;
  font-weight: 600;
  margin-bottom: 8px;
  color: var(--mainColor);
}
#my_stock .assets-change {
  display: flex;
  align-items: center;
  font-size: 14px;
}
#my_stock .change-positive {
  color: #4caf50;
}
#my_stock .change-icon {
  margin-right: 4px;
}
#my_stock .assets-details {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}
#my_stock .detail-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
#my_stock .detail-label {
  font-size: 14px;
  color: #666;
}
#my_stock .detail-value {
  font-size: 16px;
  font-weight: 500;
}
#my_stock .quick-actions {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 24px;
}
#my_stock .action-button {
  display: flex;
  align-items: center;
  padding: 16px;
  background: #ffffff;
  border-radius: 12px;
  text-decoration: none;
  color: #333;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}
#my_stock .action-icon {
  width: 24px;
  height: 24px;
  margin-right: 12px;
}
#my_stock .action-text {
  font-size: 16px;
  font-weight: 500;
}

/* 禁用狀態的樣式 */
.disabled-radio {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

.disabled-label {
  color: #999;
  cursor: not-allowed;
}

/* 確保禁用狀態的樣式優先級高於其他樣式 */
input[type=radio].disabled-radio:checked + label {
  color: #999;
}

/* 選錯答案的樣式 */
.incorrect-answer {
  color: #ff7a7a;
  text-decoration: line-through;
}

/* 正確答案的樣式 */
.correct-answer {
  font-weight: bold;
}
.correct-answer input[type=radio].disabled-radio:checked + label {
  color: var(--mainColor) !important;
}
.correct-answer input[type=radio].disabled-radio:checked {
  color: var(--mainColor) !important;
}

/* 確保正確答案的樣式優先於禁用狀態 */
.disabled-label.correct-answer {
  color: #1bdc68 !important;
}
.disabled-label.correct-answer input[type=radio].disabled-radio:checked {
  color: var(--mainColor) !important;
}

/* 福利中心樣式 */
#welfare_center .welfare-container {
  padding: 20px 16px;
  background-image: url("../images/bg_welfare_center.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  min-height: calc(100vh - 140px);
}
#welfare_center .welfare-card {
  background: #ffffff;
  border-radius: 16px;
  margin-bottom: 20px;
  padding: 20px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
#welfare_center .welfare-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}
#welfare_center .welfare-card .card-content {
  display: flex;
  align-items: flex-start;
  margin-bottom: 16px;
}
#welfare_center .welfare-card .card-icon {
  margin-right: 16px;
  flex-shrink: 0;
}
#welfare_center .welfare-card .card-info {
  flex: 1;
}
#welfare_center .welfare-card .card-info h3 {
  font-size: 18px;
  font-weight: bold;
  margin: 0 0 8px 0;
  color: var(--mainColor);
}
#welfare_center .welfare-card .card-info p {
  font-size: 14px;
  color: #666;
  margin: 0;
  line-height: 1.4;
}
#welfare_center .welfare-card .welfare-btn {
  width: 100%;
  background: linear-gradient(90deg, #ff4757 0%, #ff3742 100%);
  color: white;
  border: none;
  border-radius: 10px;
  padding: 12px 0;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s ease;
}
#welfare_center .welfare-card .welfare-btn:hover {
  background: linear-gradient(90deg, #ff3742 0%, #ff2837 100%);
  transform: translateY(-1px);
}
#welfare_center .welfare-card .welfare-btn:active {
  transform: translateY(0);
}
#welfare_center .title_box {
  padding: 16px;
  background: white;
  border-bottom: 1px solid #f0f0f0;
}
#welfare_center .title_box h2 {
  font-size: 18px;
  font-weight: bold;
  color: #333;
  margin: 0;
}
#welfare_center .title_box img {
  width: 24px;
  height: 24px;
}

/* 追夢流程頁面樣式 */
#dream_chasing_process .scroller-content {
  background-image: url("../images/bg_welfare_center.jpg");
  background-color: var(--content-Bg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
#dream_chasing_process .scroller-content .main-section {
  background-color: transparent;
}
#dream_chasing_process .notice-section {
  background: #ffffff;
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
#dream_chasing_process .notice-section .notice-header {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
}
#dream_chasing_process .notice-section .notice-header .notice-icon {
  width: 4px;
  height: 18px;
  background: #ff4757;
  color: white;
  border-radius: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  margin-right: 8px;
  font-size: 16px;
}
#dream_chasing_process .notice-section .notice-header h4 {
  font-size: 18px;
  font-weight: bold;
  color: #ff4757;
  margin: 0;
}
#dream_chasing_process .notice-section .notice-content p {
  font-size: 14px;
  color: #333;
  line-height: 1.5;
  margin: 0 0 12px 0;
}
#dream_chasing_process .notice-section .notice-content p:last-child {
  margin-bottom: 0;
}
#dream_chasing_process .form-section .form-group .form-control {
  text-indent: 10px;
}
#dream_chasing_process .submit-section {
  padding: 20px 0;
}
#dream_chasing_process .submit-section .submit-btn {
  width: 100%;
  background: linear-gradient(90deg, #ff4757 0%, #ff3742 100%);
  color: white;
  border: none;
  border-radius: 10px;
  padding: 16px 0;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(255, 71, 87, 0.3);
}
#dream_chasing_process .submit-section .submit-btn:hover {
  background: linear-gradient(90deg, #ff3742 0%, #ff2837 100%);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(255, 71, 87, 0.4);
}
#dream_chasing_process .submit-section .submit-btn:active {
  transform: translateY(0);
}
#dream_chasing_process .main-control .topHeading {
  background: linear-gradient(90deg, #ff4757 0%, #ff3742 100%);
}
#dream_chasing_process .main-control .topHeading .pageName {
  color: white;
  font-size: 18px;
  font-weight: bold;
}
#dream_chasing_process .page--main {
  min-height: 100vh;
}

/* 退休金兌換頁面樣式 */
#pension_exchange .scroller-content {
  background-image: url("../images/bg_welfare_center.jpg");
  background-color: var(--content-Bg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
#pension_exchange .scroller-content .main-section {
  background-color: transparent;
}
#pension_exchange .position-group {
  background: rgba(255, 255, 255, 0.15);
  margin: 15px 0;
  border-radius: 15px;
  padding: 15px;
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}
#pension_exchange .position-group .group-title {
  font-size: 18px;
  font-weight: bold;
  color: white;
  margin-bottom: 15px;
  padding: 10px 15px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 10px;
  border-left: 4px solid #fff;
  display: block;
}
#pension_exchange .position-group .pension-card {
  margin: 10px 0;
}
#pension_exchange .position-group .pension-card:first-of-type {
  margin-top: 0;
}
#pension_exchange .position-group .pension-card:last-of-type {
  margin-bottom: 0;
}
#pension_exchange .pension-card {
  background: #ffffff;
  border-radius: 12px;
  margin-bottom: 16px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
#pension_exchange .pension-card:first-child {
  margin-top: 20px;
}
#pension_exchange .pension-card .card-header {
  background: linear-gradient(90deg, #ff4757 0%, #ff3742 100%);
  padding: 12px 16px;
  display: flex;
  align-items: center;
}
#pension_exchange .pension-card .card-header .icon-wrapper {
  margin-right: 8px;
}
#pension_exchange .pension-card .card-header .position-title {
  color: white;
  font-size: 16px;
  font-weight: bold;
}
#pension_exchange .pension-card .card-body {
  padding: 16px;
}
#pension_exchange .pension-card .card-body .small-text {
  font-size: 12px;
  color: #999;
  margin-bottom: 8px;
}
#pension_exchange .pension-card .card-body .salary-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}
#pension_exchange .pension-card .card-body .salary-row span:first-child {
  font-size: 14px;
  color: #333;
}
#pension_exchange .pension-card .card-body .salary-row .amount {
  font-size: 16px;
  color: #ff4757;
  font-weight: bold;
}
#pension_exchange .pension-card .card-body .total-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 12px 0 16px 0;
  padding-top: 8px;
  border-top: 1px solid #f0f0f0;
}
#pension_exchange .pension-card .card-body .total-row span:first-child {
  font-size: 16px;
  color: #333;
  font-weight: bold;
}
#pension_exchange .pension-card .card-body .total-row .total-amount {
  font-size: 18px;
  color: #ff4757;
  font-weight: bold;
}
#pension_exchange .pension-card .card-body .exchange-btn {
  width: 100%;
  background: linear-gradient(90deg, #ff3d3d 0%, #ff8c00 100%);
  color: white;
  border: none;
  border-radius: 10px;
  padding: 10px 0;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s ease;
}
#pension_exchange .pension-card .card-body .exchange-btn.disabled {
  background: linear-gradient(-180deg, #5b5b5b 0%, #8c8c8c 100%);
  cursor: not-allowed;
}
#pension_exchange .pension-card .card-body .exchange-btn:hover {
  background: linear-gradient(90deg, #ff8c00 0%, #ff7f00 100%);
  transform: translateY(-1px);
}
#pension_exchange .pension-card .card-body .exchange-btn:active {
  transform: translateY(0);
}
#pension_exchange .notice-section {
  background: #ffffff;
  border-radius: 12px;
  padding: 16px;
  margin-top: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
#pension_exchange .notice-section .notice-header {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
}
#pension_exchange .notice-section .notice-header .notice-icon {
  width: 20px;
  height: 20px;
  background: #ff4757;
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  margin-right: 8px;
  font-size: 14px;
}
#pension_exchange .notice-section .notice-header span {
  font-size: 16px;
  font-weight: bold;
  color: #ff4757;
}
#pension_exchange .notice-section .notice-content p {
  font-size: 12px;
  color: #666;
  line-height: 1.4;
  margin: 0 0 8px 0;
}
#pension_exchange .notice-section .notice-content p:last-child {
  margin-bottom: 0;
}

.statusModal .toast_content .alertToast {
  position: relative;
  padding-top: 40px;
}
.statusModal .toast_content .alertToast img {
  position: absolute;
  top: -100px;
  left: 50%;
  transform: translateX(-50%);
  width: 100px;
}
.statusModal .toast_content .alertToast h3 {
  color: #ff3c3c;
  font-size: 25px;
  font-weight: bold;
}
.statusModal .toast_content .alertToast p {
  font-size: 14px;
  color: #000;
  padding: 0;
  margin: 0;
}
.statusModal .toast_content .alertToast ul {
  padding-left: 0;
  list-style: none;
  width: 100%;
  border-bottom: 1px solid #f0f0f0;
}
.statusModal .toast_content .alertToast ul li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}
.statusModal .toast_content .alertToast ul li p {
  font-size: 16px;
  color: var(--mainColor);
  font-weight: bold;
  padding: 0;
  margin: 0;
}
.statusModal .toast_content .alert-btn {
  border-top: none;
  padding-top: 0;
  margin-top: 0;
}
.statusModal .toast_content .alert-btn .btn {
  background: #ff3c3c;
  color: #fff;
  border-radius: 10px;
  margin-bottom: 10px;
}

#exclusive_benefits .scroller-content {
  background-image: url("../images/bg_welfare_center.jpg");
  background-color: var(--content-Bg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
#exclusive_benefits .scroller-content .main-section {
  background-color: transparent;
}
#exclusive_benefits .info-section {
  background: #ffffff;
  margin: 20px 0;
  border-radius: 10px;
  padding: 10px;
}
#exclusive_benefits .info-section .info-title {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 10px;
  color: var(--mainColor);
  display: flex;
  align-items: center;
  justify-content: start;
}
#exclusive_benefits .info-section .info-title::before {
  content: "";
  width: 4px;
  background-color: var(--mainColor);
  height: 16px;
  border-radius: 10px;
  margin-right: 5px;
}
#exclusive_benefits .info-section .info-content {
  font-size: 14px;
  line-height: 1.5;
  color: #000;
}
#exclusive_benefits .package-group {
  background: rgba(255, 255, 255, 0.15);
  margin: 0 0 15px;
  border-radius: 0 0 15px 15px;
  padding: 15px;
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}
#exclusive_benefits .package-group .package-card {
  margin: 10px 0;
}
#exclusive_benefits .package-group .package-card:first-child {
  margin-top: 0;
}
#exclusive_benefits .package-group .package-card:last-child {
  margin-bottom: 0;
}
#exclusive_benefits .package-card {
  margin: 15px 20px;
  border-radius: 15px;
  overflow: hidden;
  box-shadow: 0 4px 15px rgba(255, 71, 87, 0.3);
}
#exclusive_benefits .package-card .package-header {
  background: linear-gradient(135deg, #ff4757 0%, #ff3742 100%);
  display: flex;
  align-items: center;
  padding: 15px 20px;
}
#exclusive_benefits .package-card .package-header .package-icon {
  width: 24px;
  height: 24px;
  background: #ffd700;
  border-radius: 50%;
  margin-right: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: bold;
  color: #ff4757;
}
#exclusive_benefits .package-card .package-header .package-title {
  font-size: 16px;
  font-weight: bold;
  margin: 0;
  color: white;
}
#exclusive_benefits .package-card .package-details {
  background: white;
  padding: 15px 20px;
}
#exclusive_benefits .package-card .package-details .detail-row {
  display: flex;
  justify-content: space-between;
  margin: 8px 0;
  font-size: 16px;
}
#exclusive_benefits .package-card .package-details .detail-row:first-child {
  border-bottom: 1px solid #f0f0f0;
  padding-bottom: 10px;
}
#exclusive_benefits .package-card .package-details .detail-row .detail-label {
  color: #666;
}
#exclusive_benefits .package-card .package-details .detail-row .detail-value {
  font-weight: bold;
  color: #333;
}
#exclusive_benefits .package-card .invest-btn {
  width: 100%;
  background: linear-gradient(135deg, #ff9f43 0%, #ff6348 100%);
  border: none;
  border-radius: 0;
  padding: 12px;
  color: white;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s ease;
}
#exclusive_benefits .package-card .invest-btn:hover {
  background: linear-gradient(135deg, #ff8c00 0%, #ff5722 100%);
  transform: translateY(-1px);
}
#exclusive_benefits .package-card .invest-btn:active {
  transform: scale(0.98);
}
#exclusive_benefits .special-info {
  background: var(--mainColor);
  border-radius: 10px 10px 0 0;
  padding: 15px;
}
#exclusive_benefits .special-info .info-title {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 10px;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: start;
}
#exclusive_benefits .special-info .info-title::before {
  content: "";
  width: 4px;
  background-color: #fff383;
  height: 16px;
  border-radius: 10px;
  margin-right: 5px;
  display: block;
}
#exclusive_benefits .special-info .info-content {
  font-size: 14px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.9);
}
#exclusive_benefits .limit-info {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.7);
  text-align: right;
  margin-top: 5px;
}

#investment_record {
  min-height: 100vh;
  padding: 0% 5%;
  padding-top: 30px;
}
#investment_record .purchased-section {
  background: #fff;
  border-radius: 10px;
  margin-bottom: 1cqi;
  padding: 10px;
}
#investment_record .purchased-section .section-title {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 10px 10px 0 0;
  padding: 15px 0;
  font-size: 16px;
  font-weight: bold;
  color: #000;
  margin-bottom: 0;
  display: flex;
  align-items: center;
  justify-content: start;
}
#investment_record .purchased-section .section-title::before {
  content: "";
  width: 4px;
  background-color: var(--mainColor);
  height: 16px;
  border-radius: 10px;
  display: block;
  margin-right: 5px;
}
#investment_record .purchased-section .product-item {
  background: #f6f6f6;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  margin-bottom: 10px;
}
#investment_record .purchased-section .product-item .product-info {
  flex: 1;
}
#investment_record .purchased-section .product-item .product-info .product-name {
  font-size: 16px;
  font-weight: 500;
  color: #333;
  margin-bottom: 8px;
  line-height: 1.4;
}
#investment_record .purchased-section .product-item .product-info .purchase-time {
  font-size: 12px;
  color: #999;
}
#investment_record .purchased-section .product-item .status-badge {
  padding: 6px 8px;
  border-radius: 15px;
  font-size: 14px;
  font-weight: bold;
  min-width: 50px;
  text-align: center;
}
#investment_record .purchased-section .product-item .status-badge.active {
  background: #4cd137;
  color: white;
}
#investment_record .purchased-section .product-item .status-badge.expired {
  background: #ff4757;
  color: white;
}/*# sourceMappingURL=style.css.map */