#app {
        height: 100vh;
        position: relative;
        overflow: hidden;
        max-width: 28.75rem;
        margin: auto;
      }

      .base-layout {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
        height: 100%;

      }

      .section-content {
        width: 100%;
        flex: 1;
        max-height: 100%;
        position: relative;
        z-index: 1;
        overflow: hidden;
      }

      .home-layout {
        background-color: #1c1e23;
      }

      .base-layout>header {
        flex-shrink: 0;
        width: 100%;
        z-index: 10;
        position: relative;
      }

      .lobby-home-header-container {
        display: flex;
        align-items: center;
        flex-direction: row;
        justify-content: space-between;
        position: relative;
        height: .8rem;
        background-color: #282b30;
      }

      .header_30 {
        color: #787878;
        padding: 0 .6rem;
        border-bottom: 1px solid #f0c059;
        background-color: #282b30;
        height: 2.9rem;
      }

      .lobby-home-header-container__section--left {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        height: 100%;
        z-index: 2;
      }

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

      .isCustomLogo {
        display: block;
        text-align: center;
      }

      .logo {
        height: 2.3rem;
        max-width: 8.15rem;
      }

      .custom-logo_whjvf_36 {
        object-fit: contain;
        cursor: pointer;
        max-width: 100%;
        max-height: 100%;
        vertical-align: middle;
      }

      .lobby-home-header-container__section--right {
        flex: 1;
        width: 100%;
        overflow: hidden;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        height: 100%;
        z-index: 2;
      }

      .switch-currency {
        display: flex;
        margin-right: .1rem;
        margin-left: .2rem;
        justify-content: flex-end;
        flex: 1;
        width: fit-content;
        overflow: hidden;
        padding: 0 .6rem;
        max-width: auto;
      }

      .current-container {
        border: solid thin #313843;
        border-radius: 1rem;
        overflow: hidden;
        display: flex;
        align-items: center;
        width: fit-content;
        height: 1.6rem;
        max-width: auto;
        background-color: transparent;
        margin-right: .3rem;
        padding-right: .4rem;
        color: #787878;
        cursor: pointer;
      }

      .currency-item {
        height: inherit;
        overflow: hidden;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-wrap: nowrap;

      }

      .currency-item__icon {
        width: 1.2rem;
        height: 1.2rem;
        flex: initial;
        flex-shrink: 0;
        background-image: url('https://xhtd888.oss-accelerate.aliyuncs.com/static/images/index/img_hb_frame.avif');
        border-radius: 50%;
        background-size: cover;
        margin: .2rem;
      }

      .currency-item__icon img {
        width: 1.5rem;

      }

      .langText {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        flex: 1;
        line-height: normal;
        font-size: .8rem;
        text-align: left;
        color: #ADB6C3;
        margin-left: .2rem;
      }

      .down-icon {
        margin-top: -.5rem;
        margin-left: .8rem;
      }

      .right_duoj {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        font-size: .7rem;
        height: 100%;
        color: #787878;
        cursor: pointer;
        max-width: 2.02rem;
      }

      .right_duoj img {
        width: 1.5rem;
      }

      .right_duoj span {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        max-width: 2.02rem;
      }

      .body-sect {
        overflow-x: hidden;
        overflow-y: scroll;
        width: 100%;
        flex: 1;
        max-height: 100%;
        position: relative;
        z-index: 1;
      }

      .body-sect::-webkit-scrollbar {
        display: none;
      }

      .home-pattern {
        position: fixed;
        width: 100%;
        height: 100%;
        z-index: -1;
        position: relative;
        margin-bottom: 90px;
      }

      .swipe-container {
        margin-top: .6rem;
        padding: 0 .6rem;
        height: calc(100vh - 85vh);
      }

      .my-swipe {
        border-radius: .5rem;
        width: 100%;
        height: 100%;
      }

      .notice-container {
        margin-top: .6rem;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 0.6rem;
        font-size: .24rem;
        box-shadow: 0 .03rem .09rem rgba(0, 0, 0, 0);
        height: 2rem;
      }

      .notice-icon-pmd {
        width: 1.3rem;
        margin-right: .3rem;
        flex-shrink: 0;
      }

      .van-notice-bar {
        position: relative;
        display: flex;
        align-items: center;
        height: 100%;
        padding: 0 16px;
        color: #ADB6C3 !important;
        font-size: 14px !important;
        line-height: 24px;
        background-color: transparent !important;
        width: 19rem;
      }

      .notice-right {
        width: 2rem;
        flex-shrink: 0;
      }

      .nav-container {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 .6rem;
        margin-top: .6rem;
        scrollbar-color: auto;
      }

      .nav-left {
        display: flex;
        flex-direction: column;
        justify-content: center;
        width: 36%;
        height: 100%;
        padding: 0 .1rem;
      }

      .nav-right {
        width: 60%;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between
      }

      .btn-box {
        display: flex;
        align-items: center;
        height: 2rem;
        width: 100%;
        font-size: .8rem;
        color: #787878;
      }

      .login-btn {
        /* margin: 0 .8rem 0 .05rem; */
        /* background-color: transparent; */
        color: #787878;

      }

      .btns {
        /* width: 5rem; */
        height: calc(100%);
        padding: 0 .1rem;
        white-space: pre-wrap;
        /* border: 1px solid #313843; */
        color: #f0c059;
        border-radius: .2rem;
        display: flex;
        align-items: center;
        justify-content: center;
        background-size: contain;
        background-repeat: no-repeat;
        text-align: center;
        word-wrap: break-word;
      }

      .register-btn {
        /* background-color: #282b30; */
      }

      .home-nav-item {
        display: flex;
        flex: 1;
        flex-direction: column;
        align-items: center;
        justify-content: normal !important;
        /* min-width: 2rem;
        max-width: 2.9rem; */
        margin-right: .05rem;
        position: relative;
        min-height: auto;
        /* height: 1rem; */
      }

      .home-nav-item img {
        position: relative;
        display: inline-block;
        width: 2rem;
        height: 2rem;
        object-fit: contain;
        background-size: cover;
      }

      .home-nav-item div {
        width: 3rem;
        color: #ADB6C3;
        word-wrap: break-word;
        text-align: center;
      }

      .gameContent {
        scrollbar-color: auto;
        padding: 0 .6rem;
        margin-top: .6rem !important;
      }

      .sidebar-tabs {
        display: flex;
        overflow: hidden;
        padding-top: 0;
        position: relative;
      }

      .ui-sticky {
        flex-shrink: 0;
        height: fit-content;
        position: -webkit-sticky;
        position: sticky;
        top: 0;
        z-index: 100;
        width: 96px;
      }

      .ui-sticky .actives {
        z-index: 1;
        width: 88.3906px;
        height: 514.594px;
        top: 46.7969px;
        padding-left: 0px;
        padding-top: .2rem;
        overflow: hidden;
        position: fixed;
        pointer-events: none;
      }

      .ui-tabs__nav {
        position: sticky;
        top: 0;
        z-index: 10;
        width: 5.6rem;
        background-color: #16181f;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: .7rem;
      }




      .sidebar-tabs-title {
        max-height: calc(100vh - 10rem);
        /* min-height: .6rem; */
        height: 100%;
        display: flex;
        width: 6rem;
        flex-direction: column;
      }

      .ui-tabs__content {
        overflow-x: hidden;
        height: fit-content;
        padding-bottom: 0;
        box-sizing: content-box;
        flex-direction: column;
        position: relative;
        display: flex;
        background: transparent;
        user-select: none;
        scrollbar-width: none;
        overflow-y: auto;
        -ms-overflow-style: none;
        height: 640px;
      }

      .sidebar-tabs .ui-tabs__content {
        width: calc(100% - 96px);
      }

      .ui-tabs__content::-webkit-scrollbar {
        display: none;
      }

      .ui-tabs__nav-item {
        height: 3rem;
        /*font-size: .8rem;*/
        letter-spacing: 0.1rem;
        background: url('https://xhtd888.oss-accelerate.aliyuncs.com/static/images/index/tab_btn_zc1_2.avif') no-repeat center center;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        color: #ADB6C3;
        border-radius: .5rem;
        width: 100%;
        transition: background-color 0.3s ease;
        cursor: pointer;
      }

      .ui-tabs__nav-item img {
        width: 2rem;
      }

      .ui-tabs__nav-item div {
        /* color: #787878; */
        /* min-width: 4rem; */
      }

      .ui-tab__panel {
        height: fit-content;
        box-sizing: border-box;
        width: 100%;
      }

      :root {
          --game-img-size: 70px;
          --game-item-width: 90px;
          --game-item-height: 110px; /* 增加高度容纳文字 */
      }

      .game-list {
          display: grid;
          grid-template-columns: repeat(3, 1fr);
          gap: 12px;
          padding: .5rem;
          width: 95%;
          margin: auto;
          justify-items: center;
      }

      .game-item {
          position: relative;
          width: var(--game-item-width);
          height: var(--game-item-height);
          display: flex;
          flex-direction: column;
          align-items: center;
      }

      .item-box {
          position: relative;
          width: 100%;
          height: 100%;
          display: flex;
          flex-direction: column;
          align-items: center;
          padding: 8px 0;
      }

      .itemBg {
          width: var(--game-img-size) !important;
          height: var(--game-img-size) !important;
          object-fit: contain !important;
          border-radius: 8px;
          flex-shrink: 0;
          margin-bottom: 12px; /* 增加图片和文字间距 */
      }

      .favorites {
          position: absolute !important;
          right: 8px !important;
          width: 20px !important;
          height: 20px !important;
          z-index: 2;
      }

      /* 优雅的白色文字样式 */
      .item-box span {
          font-size: 0.8rem !important;
          font-weight: 500 !important; /* 中等字重 */
          font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
          text-align: center;
          line-height: 1.4;
          width: 100%;
          padding: 0 3px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          color: #ffffff !important; /* 纯白色 */
          text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); /* 文字阴影增强可读性 */
          margin-top: 4px; /* 额外间距 */
          flex-shrink: 0;
      }
      /* .item-box span {
        position: absolute;
        z-index: 1;
        bottom: 0;
        left: 40%;
      } */

      .game-list-box {
        padding-top: .6rem;
        padding-bottom: .6rem;
        border-top: thin solid #313843;
        scroll-margin-top: 50px;
        transition: scroll-margin-top 0.5s ease;
      }

      .layout-box {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-top: .6rem;
      }

      .game-headline {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        position: relative;
      }

      ._title_1ux8l_30 {
        display: flex;
        align-items: center;
        color: #ADB6C3;
        min-height: .52rem;
      }

      ._title_1ux8l_30 img {
        position: relative;
        margin-right: .05rem;
        width: 2.5rem;
        padding-right: .2rem;
        font-size: .52rem;
      }

      .click-area {
        color: #787878;
        cursor: pointer;
        font-size: .7rem;
        margin: -.12rem -.2rem;
        padding: .12rem .2rem;
      }

      .list-ordinary {
        margin-top: .3rem;
        width: fit-content;
      }

      .list-ordinary-layout {
        display: flex;
        flex-wrap: wrap;
        width: 16rem;
        /* max-height: 33rem; */
        row-gap: 0.2rem;
        overflow: hidden;
      }

      .poster-box {
        opacity: 1;
        box-shadow: 0 .03rem .07rem 0 #BEA8851F;
        border-radius: .5rem;
        width: 100%;
        background-size: 100% 100%;
        background-repeat: no-repeat;
        background-position: center center;
      }

      .tabbar {
        background-color: #141417;
        position: relative;
        width: 100%;
      }

      .footer-main {
        width: 100%;
        height: 4rem;
        box-shadow: .02rem 0 .06rem rgb(223 215 215);
        background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(84, 84, 84, 0));
        z-index: 2;
        min-height: 2.6rem;
        overflow: hidden;
        position: relative;
      }

      .ui-tabs__navs {
        box-sizing: content-box;
        height: 100%;
        padding-bottom: .15rem;
        position: relative;
        ;
        background: transparent;
        user-select: none;
        scrollbar-width: none;
        display: flex;
        width: 100%;
        justify-content: space-between;
      }

      .ui-tab {
        padding: 0 .05rem;
        color: #787878;
        font-weight: 400;
        position: relative;
        display: flex;
        flex: 1;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;

        font-size: 1rem;
        cursor: pointer;
      }

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

      .itemContent .item {
        height: 100%;
        display: flex;
        flex-direction: column;
        position: relative;
        align-items: center;
        justify-content: flex-end;
        text-align: center;
      }

      .item .text {
        text-overflow: ellipsis;
        vertical-align: middle;
        height: 2rem;
        overflow: hidden;
        margin-top: .5rem;
        z-index: 2;
        font-size: .8rem;
        /* color: #787878; */
      }

      .footer-box {
        padding: .5rem .5rem .5rem;
        background-color: #141417;
        margin-top: .5rem;
        scrollbar-color: auto;
      }

      .link-list-box {
        padding-bottom: .5rem;
        border-bottom: thin solid #787878;
        margin-bottom: .5rem
      }

      .textlink-box {
        display: flex;
        flex-wrap: wrap;
        row-gap: .1rem;
        padding-right: .5rem;
      }


      .textlink-item {
        width: calc(100% / 3);
        overflow: hidden;
      }

      .link-list-title {
        margin-bottom: .5rem;
        color: #787878;
        font-size: .8rem
      }

      .item-list {
        scrollbar-color: auto;
      }

      .link-list-item {
        margin-bottom: .5rem;
        color: #ADB6C3;
        cursor: pointer;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        font-size: .8rem !important;
      }

      .loginlog {
        max-width: 7rem;
      }

      .registerbtn {
        color: #f0c059;
        background: #282b30;
        border: 1px solid #f0c059;
        height: 2rem;
        width: 2.2rem;
        padding: 0 .15rem;
        width: 100%;
        font-size: .7rem;
        border-radius: .5rem;
      }

      .logoArea {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        margin-top: .5rem;
        box-sizing: content-box;
        gap: .12rem;
      }

      .logoArea img {
        width: 4rem;
      }

      .photographArea {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        width: 100%;
        padding: .5rem 0;
        box-sizing: content-box;
        margin: 0 auto;
        margin-bottom: -.2rem;
      }

      .photographArea img {
        width: 4rem;
      }

      .text-activeTab {
        color: #f0c059 !important;
      }

      .tab-indicator {
        height: 2px;
        /* background: linear-gradient(270deg, rgba(140, 197, 212, 0), #3d8ba2); */
        background: #f0c059;
        position: absolute;
        bottom: 0;
        left: 0;
        transition: all 0.3s;
      }

      .tab-content {
        display: none;
      }

      .tab-content.active {
        display: block;
        width: 100%;
      }

      .no-game {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center
      }

      .no-game img {
        width: 8rem;
        /* background-color: #787878; */
      }

      .no-game div {
        color: #787878;
        font-size: .8rem;
        margin-top: .5rem;
      }

      .ui-dialog__main {
        min-height: auto;
        width: 100%;
        background: #282b30;
        border-radius: .5rem;
        backface-visibility: hidden;
        overflow: auto;
        display: flex;
        flex-direction: column;
        justify-content: center;
      }

      .ui-dialog__header {
        position: relative;
        padding: .5rem .5rem;
        background: #282b30;
        color: #ADB6C3;
        border-bottom: thin solid #313843;
        text-align: center;
      }

      .ui-tabs__nav-item.active {
        color: white;
        border: 1px solid #ADB6C3;
        transition: all 1s ease;
      }

      .right-bottom {
        position: absolute;
        right: 1rem;
        bottom: 5rem;
        z-index: 999;
        width: 5rem;
        /* height: 5rem; */
        display: flex;
        flex-direction: column;
        align-items: flex-end;
      }

      .right-bottom-icon {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
      }

      .right-bottom-icon .back {
        width: 1rem;
      }

      .right-bottom-swipe-container {
        position: relative;
        width: 100%;
        overflow: hidden;
      }

      .right-bottom-swipe-container .swipe-wrapper {
        display: flex;
        height: 100%;
        transition: transform 0.3s ease;
      }

      .right-bottom-swipe-container .swipe-slide {
        min-width: 100%;
        display: flex;
        justify-content: center;
        margin: 0;
        height: 100%;
      }

      .right-bottom-swipe-container .swipe-indicators {
        position: absolute;
        bottom: 10px;
        left: 50%;
        transform: translateX(-50%);
        display: flex;
        gap: 8px;
      }

      .right-bottom-swipe-container .swipe-indicator {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background-color: rgba(255, 255, 255, 0.5);
        cursor: pointer;
        transition: background-color 0.3s;
      }

      .right-bottom-swipe-container .swipe-indicator.active {
        background-color: #f0c059;
      }

      .back-to-top {
        /* position: absolute;
        right: 1rem;
        bottom: 5rem; */
        width: 50px;
        height: 50px;
        background-color: #2e3035;
        color: #f0c059;
        border-radius: 1rem;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
        opacity: 1;
        transform: translateY(20px);
        transition: opacity 1s ease, transform 1s ease;
        flex-direction: column
      }

      .back-to-top.show {
        opacity: 1;
        transform: translateY(0);
      }

      .back-to-top i {
        font-size: 1rem;

      }

      .arrow_1neh {
        position: absolute;
        top: -.5rem;
        right: .5rem;
        width: 1rem;
        height: 1rem;
        background: #282b30;
        border-color: #787878;
        border-style: solid;
        border-width: 1px 0 0 1px;
        transform: translate(-50%) rotate(45deg);
      }

      .more-popover {
        overflow: visible;
        border: thin solid #313843;
        background: #282b30;
        box-shadow: 0 .03rem .07rem #eeeae488;
        width: 15rem;
        max-height: 20rem;
      }

      .more-popover>section {
        scrollbar-color: #787878 transparent;
        scrollbar-width: thin;
        overflow-x: hidden;
        overflow-y: scroll;
        /* height: 15rem; */
      }

      .scroll-content {
        scrollbar-color: auto;
        display: flex;
        flex-wrap: wrap;
        padding: .5rem 0rem 0.5rem .5rem;
        height: 100%;
      }

      .scroll-content>.home-nav-item {
        display: flex;
        flex: 1;
        flex-direction: column;
        align-items: center;
        justify-content: normal !important;
        min-width: 2.7rem;
        max-width: 2.7rem;
        margin-right: .8rem;
        position: relative;
      }

      .more-popup {
        z-index: 9;
        position: absolute;
        top: 15rem;
        margin: 0px;
        transform-origin: 100% 0;
        max-height: 100%;
        box-sizing: border-box;
        right: 1rem;
        width: fit-content;
        max-width: calc(100vw - .32rem);
        overflow: visible;
        background-color: transparent;
        pointer-events: auto;
        transform-origin: 100% 0;
      }

      .pop-header {
        display: flex;
        height: 3.5rem;
        justify-content: center;
        align-items: center;
      }

      .pop-header .title {
        width: 50%;
        color: #ADB6C3;
        text-align: end;
      }

      .pop-header .right {
        width: 40%;
        text-align: end;

      }

      .itemBox {
        width: 95%;
        margin: auto;
        background-color: #313843;
        color: #fff;
        padding: 10px;
        border-radius: 15px;
        margin-bottom: 10px;
      }

      .itemHeader {
        display: flex;
        justify-content: space-between;
      }

      .itemBottom {
        font-size: 12px;
        color: #e5e7eb;
      }

      .tabs-panel {
        height: 100%;
        padding: 0 .5rem;
        overflow-y: scroll;
      }

      .tabs-grid {
        display: grid;
        gap: .52rem;
        grid-template-columns: repeat(3, 1fr)
      }

      .tabs-grid-wrapper {
        flex: 1;
        height: 2.5rem;
        border: thin solid #313843;
        border-radius: .5rem;
        position: relative;
        display: inline-flex;
        align-items: center;
        /* border-color: #866638; */
        color: #ADB6C3;
      }

      .tabs-grid-active {
        color: #f0c059;
        border-color: #f0c059;
      }

      .tabs-grid-wrapper img {
        margin-right: .5rem;
        margin-left: .5rem;
        height: 1.3rem;
        width: 1.3em;
      }

      .tabs-grid-text {
        flex: 1;
        display: flex;
        height: 100%;
        align-items: center;
        justify-content: center;
        font-size: .7rem;
        flex-direction: column;
        margin-right: .5rem;
        color: #ADB6C3;
      }

      .corner {
        position: absolute;
        height: 1rem;
        width: 1rem;
        right: -0;
        bottom: -0;
        border-style: solid;
        border-width: 0 0 1rem 1rem;
        border-color: transparent transparent #f0c059 transparent;
        border-bottom-right-radius: .5rem;
      }

      .corner>i {
        display: inline-flex;
        justify-content: center;
        align-items: center;
        position: absolute;
        right: 5px;
        width: 100%;
        height: 100%;
        bottom: -10px;
        color: #f5eded;
      }

      .ui-badge {
        display: inline-block;
        box-sizing: border-box;
        min-width: .8rem;
        padding: 0 .2rem;
        color: #787878;
        height: .8rem;
        text-align: center;
        background: #4e5057;
        border-radius: .5rem .5rem .5rem 0;
        font-size: .5rem;
        font-weight: 400;
        font-stretch: normal;
        font-style: normal;
        line-height: 1rem;
        letter-spacing: normal;
        overflow: visible;
        vertical-align: middle;

        position: absolute;
        transform-origin: 100%;
        right: 0;
        transform: translate(.1rem, -50%);
        top: -4px;
        max-width: 114.156px;
        z-index: 0;
      }

      .ui-badge:before {
        content: "";
        display: inline-block;
        position: absolute;
        bottom: -.06rem;
        z-index: 20;
        left: 0;
        width: 0;
        height: 0;
        border-left: .079rem solid #3e4353;
        border-top: .066rem solid transparent;
        border-bottom: .066rem solid transparent;
        font-size: 0;
      }

      .ui-badge__content {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        position: relative;
        z-index: 1;
        color: #f0c059;
      }

      .fold_om0ej {
        display: flex;
        align-items: baseline;
        justify-content: center;
        color: #ADB6C3;
      }

      ._line_1vtak_30 {
        /* border-width: 1px; */
        width: 100%;
        height: .3rem;
        border-bottom: 1px solid #313843;
        margin-bottom: .8rem;
        margin-top: .8rem;
      }

      ._amount-input_aawmz_30 {
        margin-bottom: .5rem;
      }

      .recommend-amount {
        grid-template-columns: repeat(4, 1fr);
        margin-bottom: .5rem;
        color: #787878;
        display: grid;
        gap: .5rem;
      }

      ._label-container {
        flex: 1;
        display: flex;
        height: 100%;
        align-items: center;
        justify-content: center;
        font-size: .8rem;
        flex-direction: column;
        margin-right: .5rem;
        margin-left: .5rem;
      }

      ._label-container .text {
        text-align: center;
        word-break: break-all;
        display: -webkit-box;
        overflow: hidden;
        text-overflow: ellipsis;
        vertical-align: middle;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
      }

      ._label-container .text1 {
        color: #787878;
        font-size: .7rem;
      }

      .lobby-form-item--style {
        display: flex;
        flex-direction: column;
        position: relative;
        margin-bottom: 0;
      }

      .lobby-form-item__content {
        display: flex;
        flex: 1;
        flex-direction: column;
        justify-content: center;
      }

      .lobby-form-item__input {
        display: flex;
        align-items: center;
        color: #ADB6C3;
      }

      .van-popup {
        background-color: #282b30 !important;

      }

      .van-tabs__nav {
        background-color: #282b30 !important;

      }

      .van-tab {
        color: #ADB6C3 !important;
      }

      .van-tabs__line {
        background-color: #f0c059 !important;
      }

      .van-tab--active {
        color: #f0c059 !important;
      }

      .active {
        color: #f0c059 !important;
      }

      .ui-input {
        padding-bottom: .1rem;
        border: 1px solid #313843;
        height: 2rem;
        width: 100%;
        border-radius: .5rem;
        position: relative;
        display: flex;
        align-items: center;
        background-color: #282b30;
        color: #787878;
        font-size: .7rem;
        padding: 0 .5rem;
      }

      .ui-input input {
        background-color: #282b30;
        color: #ADB6C3;
      }

      .title-img-right {
        background-color:
          color-mix(in srgb, #FFAA09 20%, transparent);
        border: .1rem solid color-mix(in srgb, #FFAA09 24%, transparent);
        border-left: 0;
        height: 1.5rem;
        padding: 0 .8rem 0 0;
        display: inline-block;
        border-radius: 0 .6rem .6rem 0;
        vertical-align: top;
        font-size: .8rem;
        font-weight: 600;
      }

      ._title-img-right-cnt {
        display: flex;
        justify-content: center;
        align-items: center;
        color: #ADB6C3;
        font-size: .7rem;
        height: 100%;
      }

      ._limited-time_43juf_30 {
        border: thin solid #EA4E3D;
        border-left: none;
      }

      ._limited-time_43juf_30>div {
        position: relative;
        left: -.5rem;
        display: flex;
        align-items: center;
        font-size: .6rem;
      }

      ._limited-time_43juf_30>div {
        position: relative;
        left: -.5rem;
        display: flex;
        align-items: center;
        font-size: .6rem;
      }

      ._limited-time {
        height: 1rem;
      }

      ._text_43juf_60 {
        background-color: #EA4E3D;
        color: #ADB6C3;
        line-height: 1rem;
        white-space: nowrap;
      }

      ._rectangle_43juf_44 {
        width: .5rem;
        height: 1rem;
        position: relative;
        left: -.01rem;
        top: -.01rem;
      }

      ._triangle_43juf_51 {
        position: absolute;
        top: 0;
        left: 0;
        width: 70%;
        height: 100%;
        background-color: #EA4E3D;
        clip-path: polygon(0 0, 100% 0, 0 100%);
      }

      ._count-time_43juf_66 {
        color: #EA4E3D;
        font-variant-numeric: tabular-nums;
      }

      ._tab-container_ghupm_37 {
        border: 1px solid color-mix(in srgb, #FFAA09 50%, transparent);
        background:
          color-mix(in srgb, #FFAA09 6%, transparent);
        position: relative;
        margin-bottom: .5rem;
        border-radius: .5rem;
      }

      ._option-item_ghupm_45 {
        position: relative;
        height: 2rem;
        padding: .6rem .4rem;
        cursor: pointer;
        display: flex;
        justify-content: space-between;
        background-color: #282b30;
        align-items: center;
        font-size: .8rem;
        color: #ADB6C3;
      }

      ._option-item_ghupm_45:first-child {
        margin-top: 0;
        border-top-left-radius: .5rem;
        border-top-right-radius: .5rem;
      }

      ._option-item_ghupm_45:last-child {
        border-bottom-left-radius: .5rem;
        border-bottom-right-radius: .5rem;
        border: 0;
      }

      ._select-none_ghupm_108 {
        background: transparent;
      }

      ._left_ghupm_83 {
        display: flex;
        align-items: center;
        flex-shrink: 0;
        width: 80%;
      }

      .download-app {
        display: inline-flex;
        justify-content: center;
        align-items: center;
        color: #ADB6C3;
        font-size: .7rem;
        margin-right: .5rem;
      }

      .ui-button--normal {
        display: block;
        width: 100%;
        height: 2rem;
        padding: 0 .8rem;
        font-size: .8rem;
        color: #ADB6C3;
        background: #282b30;
        border: 1px solid #313843;
        border-radius: .5rem;
      }

      ._btn-changemode_aawmz_80 {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 2rem;
        height: 2rem;
        margin-left: .5rem;
        background-color: #282b30;
        border: thin solid #313843;
        border-radius: .5rem;
        color: #ADB6C3;
        font-size: .8rem;
      }

      .channel-exchange-rate {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: .2rem 0 .5rem;
        font-size: .7rem;
      }

      ._left_lkpl2_36 {

        display: flex;
        align-items: center;
      }

      ._label_lkpl2_48 {
        color: #ADB6C3;
        margin-right: .5rem;
      }

      ._left_lkpl2_36>div {
        display: flex;
        align-items: center;
      }

      ._rate_lkpl2_53 {
        margin-right: .5rem;
      }

      ._title_tlnrj_34 {
        font-size: .7rem;
        margin-bottom: .5rem;
        color: #ADB6C3;
        font-weight: 700;
        text-align: center;
      }

      .lobby-form-item__label {
        margin-bottom: .1rem;
        display: flex;
        align-items: center;
        overflow: hidden;
        font-size: .7rem;
        width: auto;
      }

      .lobby-form-item__required-sign {
        color: #EA4E3D;
        padding-right: .04rem;
        display: flex;
        height: 100%;
        align-items: center;
      }

      .lobby-form-item__label-text {
        word-wrap: break-word;
      }

      .ui-input__input-wrap {
        flex: 1;
        height: 100%;
        line-height: .7rem;
        display: flex;
        overflow: hidden;
      }

      .filter-select-index {
        width: 4rem;
        height: 1.5rem;
        border-radius: 1rem;
        font-size: .8rem;
        color: #ADB6C3;
        margin-left: 1rem;
        background-color: #282b30;
        border: 1px solid #313843;
      }

      .content-none {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 10px;
        padding: 40px;
        height: 100%;
      }

      .content-none>img {
        width: 8.1rem;
        height: 8.1rem;
      }

      .content-none>span {
        color: #ADB6C3;
        font-size: .8rem;
      }

      .dialog-body {
        height: 100%;
        display: flex;
        flex-direction: column;
      }

      .dialog-body .body-header {
        margin: 0 .8rem .8rem;
        display: flex;
        flex-direction: column;
        gap: .5rem;
        padding: .5rem;
        background: #282b30 !important;
        border-radius: .5rem;
        box-shadow: 0 .3rem .9rem rgba(63, 61, 61, 0.6)
      }

      .dialog-body .body-header .info-item {
        display: flex;
        gap: .5rem;
        justify-content: space-between;
        width: 100%;
        font-size: .7rem;
        color: #cad2dd;
      }

      .lobby-scroll {
        scrollbar-color: #313843 transparent;
        scrollbar-width: thin;
        padding-bottom: 0;
        overflow-x: hidden;
        /* overflow-y: scroll; */
        padding: 0 .5rem 0 .8rem;
        margin-right: .0rem;
        height: 70vh;
      }

      .lobby-scroll .signIn {
        scrollbar-color: auto;
        margin: 0;
        display: flex;
        flex-wrap: wrap;
        padding: .5rem 0 .1rem .5rem;
        background-color: #282b30;
        border-radius: .14rem;
        justify-content: space-between
      }

      .sign-item {
        margin-right: .5rem;
        position: relative;
        z-index: 1;
        width: 6rem;
        height: 8rem;
        margin-right: .5rem;
        margin-bottom: .5rem;
        background-color: #282b30;
        border: 1px solid #313843;
        border-radius: .5rem;
        box-shadow: 0 .1rem .9rem rgba(68, 68, 68, .1);
      }

      .sign-item img {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 4rem;
        height: 4rem;
        margin: .2rem auto 0;
      }

      .sign-text {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        position: relative;
        width: 100%;
        height: 1rem;
        margin-bottom: .2rem;
        font-size: .7rem;
        line-height: 1rem;
        text-align: center;
        color: #f0c059;
      }

      .sign-caption {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 1rem;
        padding-top: 0;
        color: #999999;
        font-size: .7rem;
        line-height: 1;
        height: 1rem;
      }

      .sign-caption button {
        width: 4rem;
        height: 1.2rem;
        font-size: .6rem;
        border-radius: .2rem;
        padding: 0 .5rem;
        color: #fff;
        background: #04BE02;
        border: 1px solid #04BE02;
      }

      .introduction {
        scrollbar-color: auto;
        margin-top: .5rem;
        padding: 0;
      }

      .introduction-box {
        padding: .5rem;
        font-size: .8rem;
        line-height: 1rem;

        border-radius: .5rem;
        box-shadow: 0 .3rem .9rem rgba(0, 0, 0, .06);
      }

      .close {
        /* position: absolute; */
        width: 35px;
        height: 35px;
        background: #000;
        border-radius: 50%;
        border: 1px solid #e4cd9f;
        box-sizing: border-box;
        right: 0;
        bottom: 0;
        /* transform: translate(50%, -50%); */
        cursor: pointer;
      }

      .close:after,
      .close:before {
        position: absolute;
        content: "";
        width: 1px;
        height: 23px;
        background: #e4cd9f;
        left: 0;
        right: 0;
        bottom: 0;
        top: 0;
        margin: auto;
      }

      .close:before {
        transform: rotate(45deg);
      }

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


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

      .rec-content {
        scrollbar-color: #E3E3E3 transparent;
        scrollbar-width: thin;
        flex: 1;
        padding: .4rem .5rem .6rem;
        overflow-y: auto;
        margin-right: .6rem;
      }

      .status-container {
        display: flex;
        flex-direction: column;
        text-align: center;
        align-items: center;
        margin-bottom: 5rem;
        scrollbar-color: auto;
      }

      .bg-warning {
        height: 3rem;
        width: 3rem;
        border-radius: 50%;
        margin-bottom: .5rem;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: #FFAA09;
      }

      .state-pay-text {
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: .8rem;
      }

      .receive-list {
        border-top: thin dashed #313843;
        padding: .6rem 0;
        scrollbar-color: auto;
      }

      .receive-list li {
        display: flex;
        align-items: center;
        justify-content: space-between;
        min-height: .5rem;
        margin-bottom: .5rem;
        font-size: .7rem;
      }

      .realNameForm {
        border-top: thin dashed #313843;
        padding-top: .6rem;
        scrollbar-color: auto;
        display: flex;
        flex-direction: column;
        margin-bottom: .5rem;
        position: relative;
      }

      .tips {
        font-size: .7rem;
        margin-bottom: .3rem;
        width: 100%;
      }

      .real-footer {
        position: fixed;
        bottom: 0;
        width: 100%;
        display: flex;
        padding: .5rem .5rem 1.8rem
      }

      .pop-container {
        --ui-overlay-z-index: 1;
        --ui-overlay-background: rgba(0, 0, 0, .7);
        position: fixed;
        top: 0;
        left: 0;
        z-index: var(--ui-overlay-z-index);
        width: 100%;
        height: 100%;
        background-color: var(--ui-overlay-background);
        overflow: hidden;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
      }

      .pop-containers {
        --ui-overlay-z-index: 1;
        --ui-overlay-background: rgba(0, 0, 0, .7);
        position: fixed;
        top: 0;
        left: 0;
        z-index: var(--ui-overlay-z-index);
        width: 100%;
        height: 100%;
        background-color: var(--ui-overlay-background);
        overflow: hidden;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
      }

      .rece-dialog {
        width: 85%;
        font-size: .8rem;
        transform-origin: center center;
        background-color: transparent;
        overflow-y: visible;
        /* height: 10rem; */
        max-height: 100vh;
        background-color: #282b30;
        border-radius: .5rem;

      }

      .rece-dialog__header {
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        font-size: 1rem;
        font-weight: 400;
        font-stretch: normal;
        font-style: normal;
        letter-spacing: normal;
        color: #ADB6C3;
        padding: .5rem .6rem .6rem;
        box-sizing: border-box;
      }

      .rece-dialog__content {
        max-height: 50vh;
        overflow: auto;
        flex: 1;
        padding: 0 .6rem .5rem;
        box-sizing: border-box;
        color: #ADB6C3;
      }

      .fiance-content {
        margin: 0 auto;
        height: 3rem;
        width: 3rem;
        border-radius: 50%;
        margin-bottom: .15rem;
        background-color: #999;
      }

      .layui-table {
        background-color: #282b30;
        color: #ADB6C3;
      }

      .layui-table td,
      .layui-table th {
        border-color: #313843;
      }