#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: auto;
        width: 100%;
        height: calc(100vh - 112px);
        /* flex: 1; */
        max-height: 100%;
        position: relative;
        z-index: 1;
      }

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

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

      .swipe-container {
        height: 4.10667rem;
      }

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

      .login-nav {
        background: #fff;
        border-radius: 0 0 .32rem .32rem;
      }

      .notice-container {
        background: #f3f8fe;
        color: #ffffff;
        border: 1px solid hsla(0, 0%, 100%, 0);
        border-radius: .4rem;
        box-shadow: inset 0 1px 1px #bbb4b440;
        height: .533rem;
        line-height: .533rem;
        margin: 0 .427rem;
        padding: 0 .107rem;
        display: flex;
        margin-bottom: .213rem;
      }

      .notice-icon-pmd {
        height: .5333rem;
        width: .5333rem;
        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;
      }

      .bottom-menus-wrap {
        position: relative;
        width: 100%;
      }

      .bottom-menus__bg {
        height: 1.627rem;
        width: 100%;
        margin-bottom: calc(-.013rem + env(safe-area-inset-bottom));
      }

      .tabbar {
        /* background-color: #141417; */
        position: absolute;
        bottom: 0;
        width: 100%;
        z-index: 101;
      }

      .footer-main {
        width: 100%;
        height: 100%;
        position: relative;
      }

      .ui-tabs__navs {
        display: flex;
        width: 100%;
        align-items: flex-end;
        padding-bottom: env(safe-area-inset-bottom);
      }

      .ui-tab {
        padding-bottom: .107rem;
        flex: 1;
        font-weight: 400;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
      }

      .itemContent {}

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

      .bottom-menus-item__selected {
        background: linear-gradient(0deg, #3066ff, #3066ff), radial-gradient(268.47% 208.93% at 50.82% -64.29%, #5dcaf9 0, #2283f6 45.16%, #0038ff 86.78%);
        border: .04rem solid #30b4f9;
        box-shadow: 0 0 .32rem #2283f6cc;
        border-radius: .827rem;
        color: #f7fbff;
        height: 1.653rem;
        margin-bottom: .48rem;
        margin-right: -.053rem;
        width: 1.653rem;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
      }

      @keyframes ratate_bb {
        0% {
          transform: rotateY(0);
        }

        100% {
          transform: rotateY(1turn);
        }
      }

      .recharge_ani {
        animation: ratate_bb 3s linear 1;
        transform-origin: center;
        transform-style: preserve-3d;
      }

      .inactive-icon {
        height: .907rem;
        width: .907rem;
      }

      .item .text {
        text-align: center;
        margin: 0px;
        color: #6d7693;
        font-weight: 500;
        font-size: .267rem;
      }

      .bottom-menus-item__selected .text {
        text-align: center;
        margin: 0px;
        color: #fff;
        font-weight: 500;
        font-size: .267rem;
      }

      .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;
      }


      /* loading层样式 */
      .loading_popup {
        z-index: 2100;
        align-items: center;
        background: linear-gradient(180deg, rgba(58, 58, 58, .6), hsla(0, 0%, 8%, .6));
        border-radius: 3px;
        box-sizing: content-box;
        color: #fff;
        display: flex;
        flex-direction: column;
        font-size: 12px;
        justify-content: center;
        line-height: normal;
        max-width: 70%;
        min-height: 85px;
        padding: 14px;
        text-align: center;
        transition: all .2s;
        width: 85px;
        word-break: break-all;
        max-height: 100%;
        overflow-y: auto;
        position: fixed;
        left: 0;
        margin: 0 auto;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
      }

      .toast_loading {
        color: #fff;
        padding: 4px;
        position: relative;
        vertical-align: middle;
        font-size: 0;
      }

      @keyframes van-rotate {
        0% {
          transform: rotate(0);
        }

        100% {
          transform: rotate(1turn);
        }
      }

      .toast_spinner {
        animation: van-rotate .8s linear infinite;
        animation-duration: 2s;
        display: inline-block;
        height: 29px;
        max-height: 100%;
        max-width: 100%;
        width: 29px;
        position: relative;
        vertical-align: middle;
      }

      .toast_text {
        margin-top: 8px;
        font-size: 14px;
      }

      .download-wrap {
        background: #fff;
        height: 1.44rem;
        width: 100%;
        position: sticky;
        top: 0;
        transform: translateZ(0);
        z-index: 1200;
      }

      .dowloadBox {
        align-items: center;
        box-sizing: border-box;
        display: flex;
        justify-content: center;
        overflow: hidden;
        padding: .16rem .427rem;
      }

      .dowloadBox>img {
        height: .427rem;
        margin-right: .227rem;
        width: .427rem;
      }

      .download-left {
        align-items: center;
        display: flex;
        flex: 1;
      }

      .download-left>.logo {
        background-size: 100% 100% !important;
        border: 1px solid #dddfe5;
        border-radius: .2rem;
        height: 1.067rem;
        overflow: hidden;
        width: 1.067rem;
        background: url("https://xhtd888.oss-accelerate.aliyuncs.com/m6/images/common/logo2.png") no-repeat;
      }

      .download-left>.adress {
        align-items: flex-start;
        display: flex;
        flex-direction: column;
        justify-content: center;
        margin-left: .24rem;
      }

      .download-left .text {
        color: #30303d;
        font-family: PingFang SC;
        font-size: .453rem;
        font-style: normal;
        font-weight: 600;
        margin-bottom: .133rem;
        text-align: center;
      }

      .download-left .des {
        color: #6d7693;
        font-family: PingFang SC;
        font-size: .293rem;
        font-style: normal;
        font-weight: 400;
        line-height: .213rem;
        text-align: center;
      }

      .btn-wrap {
        background-image: url("https://xhtd888.oss-accelerate.aliyuncs.com/m6/images/common/down.webp");
        background-repeat: no-repeat;
        background-size: 100% 100%;
        display: flex;
        height: .907rem;
        margin-right: .213rem;
        position: relative;
        width: 1.813rem;
      }

      .btn-text {
        color: #fff;
        font-family: PingFang SC;
        font-size: 12px;
        font-weight: 500;
        left: 50%;
        position: absolute;
        text-shadow: 0 2px 4px rgba(0, 0, 0, .32);
        top: 50%;
        transform: translate(-50%, -50%);
        white-space: nowrap;
      }

      .header-wrap {
        background: url("https://xhtd888.oss-accelerate.aliyuncs.com/m6/images/common/header_bg.webp") no-repeat 50%;
        background-size: cover;
        width: 100%;
      }

      .wrap-page-head-content {
        align-items: center;
        box-sizing: border-box;
        display: flex;
        height: 1.2rem;
        justify-content: space-between;
        margin: 0 auto;
        padding: .167rem .427rem;
        width: 100%;
      }

      .logo-wrap {
        align-items: center;
        display: flex;
        flex-direction: row;
      }

      .logo-icon {
        background-image: url("https://xhtd888.oss-accelerate.aliyuncs.com/m6/images/common/U8188.png");
        background-repeat: no-repeat;
        background-size: 100% 100%;
        height: .604rem;
        width: 2.4rem;
      }

      .tg_box {
        margin-left: .1333rem;
        width: 2.267rem;
      }

      .tg_title {
        width: 2.267rem;
      }

      .head-right {
        height: 54px;
        position: relative;
        width: 54px;
      }

      @keyframes shake-bell {
        10% {
          transform: rotate(15deg);
        }

        20% {
          transform: rotate(-10deg);
        }

        30% {
          transform: rotate(5deg);
        }

        40% {
          transform: rotate(-5deg);
        }

        50%,
        100% {
          transform: rotate(0);
        }
      }

      .bell {
        animation: shake-bell 1s linear infinite;
        background: url("https://xhtd888.oss-accelerate.aliyuncs.com/m6/images/common/notice.webp") no-repeat 50%;
        background-size: 73px;
        height: 100%;
        width: 100%;
      }

      .dot {
        background-color: #f63b39;
        border-radius: 6px;
        color: #fff;
        display: inline-block;
        font-size: 10px;
        line-height: 12px;
        padding: 0 3px;
        position: absolute;
        right: 4px;
        top: 6px;
      }

      .login-nav-sub {
        background: #fff;
        display: flex;
        flex-wrap: nowrap;
        height: 1.32rem;
        padding-left: .64rem;
      }

      .login-wrap {
        align-items: center;
        display: flex;
        flex: 1;
      }

      .un-login {
        display: flex;
        flex-direction: column;
      }

      .login-txt {
        font-family: PingFang SC;
        font-weight: 400;
        line-height: .453rem;
      }

      .login-txt1 {
        color: #30303d;
        font-size: .453rem;
        margin-bottom: .067rem;
        font-weight: 400;
      }

      .login-txt2 {
        color: #6d7693;
        font-size: .32rem;
        font-weight: 400;
      }

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

      .vip-name {
        display: flex;
        height: 15px;
        margin-bottom: 6px
      }

      .vip-name>.name {
        color: #6d7693;
        font-family: PingFang SC;
        font-size: 12px;
        font-weight: 500;
        height: 14px;
        line-height: 14px;
        margin-right: 5px;
        max-width: 78px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .vip-box {
        height: 14px;
        margin-right: 4px;
        width: 40px;
        border-radius: 7px;
        background-color: #9aa8cd;
        font-size: 10px;
        color: #fff;
        font-weight: 700;
        padding-left: 5px;
        font-style: italic;
      }

      .vip-name>.icon {
        width: 15px;
        height: 15px;
      }

      #closeEye {
        display: none;
      }

      .money-wrap {
        align-items: center;
        display: flex;
        height: 24px;
      }

      .money {
        color: #30303d;
        font-family: D-DIN-PRO;
        font-size: 22px;
        font-weight: 700;
        margin-right: 4px;
      }

      .refresh-icon {
        color: #6d7693;
        height: 12px;
        width: 12px;
        stroke: #6d7693;
      }

      @keyframes rotate {
        0% {
          transform: rotate(0);
        }

        100% {
          transform: rotate(1turn);
        }
      }

      .g-refreshRe {
        -webkit-animation: rotate .5s linear infinite;
      }

      .nav-line {
        height: 1.06667rem;
        width: .02667rem;
      }

      .nav-wrap {
        display: flex;
        justify-content: flex-end;
        margin: 0 .64rem 0 .533rem;
        overflow-x: initial;
        width: 4.24rem;
      }

      .nav-item2 {
        margin-bottom: .10666rem;
        width: .8rem;
        align-items: center;
        display: flex;
        flex-direction: column;
        position: relative;
      }

      .nav-item2:nth-child(2) {
        margin-left: .5333rem;
      }

      .nav-item2:last-child {
        margin-left: .6133rem;
        margin-right: .16rem;
      }

      .item-icon {
        margin-bottom: .10666rem;
        width: .8rem;
      }

      .nav-item2>span {
        color: #3066ff;
        white-space: nowrap;
        font-size: .267rem;
      }

      .nav-item2>span>i {
        color: #6d7693;
        font-family: PingFang SC;
        font-size: .267rem;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
        margin-right: .027rem;
      }

      .nav-bottom-wrap {
        height: 15px;
        overflow: hidden;
        width: 100%;
        background: url("https://xhtd888.oss-accelerate.aliyuncs.com/m6/images/common/nav-bottom.webp") no-repeat 50%;
        background-position: 50%;
        background-size: 100% 100%;
        border-bottom-left-radius: 12px;
        border-bottom-right-radius: 12px;
        box-shadow: 0 2px 2px #3584d033;
        box-sizing: border-box;
      }

      .game-lobby {
        display: flex;
        flex: 1;
        flex-direction: column;
        overflow-y: hidden;
        padding: .133rem .347rem calc(1.493rem + 0.40962rem);
      }

      .header-main {
        display: flex;
        height: 5.613rem;
        justify-content: space-between;
        margin-bottom: .1333rem;
      }

      .sticky-header {
        background: url("https://xhtd888.oss-accelerate.aliyuncs.com/m6/images/common/bg-1.png") no-repeat 50%;
        background-size: 100% 100%;
        border-radius: .32rem;
        position: relative;
        width: 4.54667rem;
      }

      .main-header {
        --background: url("https://xhtd888.oss-accelerate.aliyuncs.com/m6/images/common/shixun.webp") no-repeat center center;
        background: var(--background);
        background-size: 100% 100%;
        height: 3.6267rem;
        width: 4.54667rem;
      }

      .name-des {
        align-items: center;
        bottom: .2933rem;
        display: flex;
        flex-direction: column;
        justify-content: center;
        left: 50%;
        position: absolute;
        transform: translate(-50%);
        width: 3.24rem;
      }

      .name-wrap {
        align-items: center;
        display: flex;
        position: relative;
        z-index: 1;
      }

      .icon-line {
        background: radial-gradient(106.07% 84.72% at 50% 15.28%, #5dcaf9 0, #3066ff 90.4%);
        border-radius: 1px;
        display: inline-block;
        height: .4rem;
        margin-right: .06667rem;
        width: .08rem;
      }

      .name-wrap>.name {
        color: #30303d;
        font-family: PingFang SC;
        font-size: .42667rem;
        font-weight: 600;
        height: .4rem;
        line-height: .4rem;
      }

      .en-name {
        background: linear-gradient(180deg, #bde3f5, #ebf4ff);
        -webkit-background-clip: text;
        font-family: Inter;
        font-size: .4933rem;
        font-style: italic;
        font-weight: 700;
        left: 0;
        position: absolute;
        top: -.34667rem;
        z-index: -1;
        -webkit-text-fill-color: transparent;
      }

      .name-des>.des {
        color: #6d7693;
        font-family: PingFang SC;
        font-size: .2667rem;
        font-weight: 400;
        text-align: center;
      }

      .main-area {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-content: space-between;
        width: 4.5466rem;
      }

      .main-area-item {
        margin-bottom: .1333rem;
        align-items: center;
        background: url("https://xhtd888.oss-accelerate.aliyuncs.com/m6/images/common/bg-2.png") no-repeat 50%;
        background-size: 100% 100%;
        border-radius: .32rem;
        box-shadow: 0 .0533rem .06667rem #3584d033;
        display: flex;
        flex: 1;
        max-height: 2.8rem;
        width: 100%;
      }

      .main-ares-item-l {
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding-left: .3733rem;
        width: 40%;
      }

      .main-ares-item-l>.des {
        color: #6d7693;
        font-family: PingFang SC;
        font-size: .26667rem;
        font-weight: 400;
        text-align: left;
      }

      .main-ares-item-r {
        background: var(--background);
        background-size: 100% 100%;
        height: 2.4rem;
        width: 2.4rem;
      }

      .other-area {
        display: flex;
        justify-content: center;
        max-height: 2.68rem;
      }

      .other-area-item {
        align-items: center;
        background: url("https://xhtd888.oss-accelerate.aliyuncs.com/m6/images/common/bg-3.png") no-repeat 50%;
        background-size: 100% 100%;
        border-radius: .32rem;
        box-shadow: 0 .0533rem .0666rem #3584d033;
        display: flex;
        flex: 1;
        flex-direction: column;
        height: 2.6667rem;
        position: relative;
        width: 2.1333rem;
      }

      .other-area-item:not(:last-child) {
        margin-right: .26667rem;
      }

      .other-area-item>.img {
        background: var(--background);
        background-size: 100% 100%;
        height: 1.6rem;
        margin-bottom: .1066rem;
        width: 1.6rem;
      }

      .title-wrap {
        z-index: 1;
      }

      .title-wrap>.title {
        color: #30303d;
        font-size: .34667rem;
        font-weight: 500;
        position: relative;
      }

      .en-title {
        background: linear-gradient(180deg, #bde3f5, #ebf4ff);
        background-clip: text;
        font-family: Inter;
        font-size: .4933rem;
        font-style: italic;
        font-weight: 700;
        left: 50%;
        position: absolute;
        text-align: center;
        top: -.3333rem;
        transform: translate(-50%);
        z-index: -1;
        -webkit-text-fill-color: transparent;
      }