body{
    margin: 0;
    padding: 0;
}
.minH100{
    min-height: 100vh;
}
.minH{
    min-height: calc(100vh - 100px);
}
.minH60{
    min-height: calc(100vh - 60px);
}
.minHig{
    min-height: 60vh;
}
.min50Hig{
    min-height: 50vh;
}
.badge {
    position: absolute;
    color: white;
    padding: 0 16px;
    transform: rotate(-45deg);
    margin: -5px 0 0 -24px;
    z-index: 1990;
}
.badgea {
    text-align: center;
    width: 121px;
    height: 24px;
    line-height: 25px;
    font-size: 12px;
    font-weight: 700;
    transform: rotate(-45deg);
    margin: -90px 0 0 -140px;
}
.badgea-a {
    text-align: center;
    width: 121px;
    height: 24px;
    line-height: 25px;
    font-size: 12px;
    font-weight: 700;
    transform: rotate(45deg);
    margin: -85px 0 0 140px;
}
.web-content{
    padding: 15px;
}
.top-65{
    top: 65px;
}
.top-80{
    top: 80px;
}
.top-85{
    top: 85px;
}
.top-90{
    top: 90px;
}
.padding-top-65{
    padding-top: 65px !important;
}
.padding-5-15{
    padding: 5px 15px;
}
.padding-0-15{
    padding: 0 15px;
}
.padding-10-0{
    padding: 10px 0;
}
.padding-30-40{
    padding: 30px 40px;
}
.padding-10-20{
    padding: 10px 20px;
}
.padding-10-15{
    padding: 10px 15px;
}
.padding-20-10{
    padding: 20px 10px;
}
.padding-5-3-30{
    padding: 5px 10px 5px 30px;
}
.padding-1-6{
    padding: 1px 6px;
}
.padding-2-4{
    padding: 2px 4px;
}
.padding-0-4{
    padding: 0 4px;
}
.padding-2{
    padding: 2px;
}
.padding-5{
    padding: 5px;
}
.padding-5-30{
    padding: 5px 30px;
}
.padding-10{
    padding: 10px;
}
.padding-10-20-10-10{
    padding: 10px 20px 10px 10px;
}
.padding-20{
    padding: 20px;
}
.padding-40{
    padding: 40px;
}
.padding-0-40{
    padding: 0 40px;
}
.padding-40-0{
    padding: 40px 0;
}
.padding-0-10{
    padding: 0 15%;
}
.padding-0-20px{
    padding: 0 20px;
}
.padding-0-20{
    padding: 0 20px;
}
.padding-1-8{
    padding: 1px 8px;
}
.padding-2-8{
    padding: 2px 8px;
}
.padding-4-8{
    padding: 4px 8px;
}
.padding-7-10{
    padding: 7px 10px;
}
.content{
    padding: 0 15px;
}
.search-clear {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    width: 15px;
    height: 15px;
    line-height: 15px;
    text-align: center;
    font-size: 10px;
    color: #999;
    border-radius: 50%;
    background: #f2f3f5;
}
.dome-between-sb {
    display: flex;
    justify-content: space-between;
}

.dome-between {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.dome-between-top {
    display: flex;
    align-items: start;
    justify-content: space-between;
}
.h5-invite-empty-user-icon {
    position: relative;
    width: 48px;
    height: 48px;
    margin-bottom: 8px;
}
.h5-invite-empty-user-icon:before {
    content: "";
    position: absolute;
    left: 13px;
    top: 4px;
    width: 18px;
    height: 18px;
    border: 3px solid #D0D0D0;
    border-radius: 50%;
}
.h5-invite-empty-user-icon:after {
    content: "";
    position: absolute;
    left: 5px;
    top: 29px;
    width: 32px;
    height: 18px;
    border: 3px solid #D0D0D0;
    border-bottom: 0;
    border-radius: 28px 28px 0 0;
}
.dome-center {
    display: flex;
    align-items: center;
    justify-content: center;
}
.dome-center-end {
    display: flex;
    align-items: end;
    justify-content: center;
}

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

.dome-left-top {
    display: flex;
    justify-content: left;
}

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

.dome-top-right {
    display: flex;
    justify-content: right;
}

.dome-top-left {
    display: flex;
    justify-content: left;
}

.dome-wrap {
    flex-wrap: wrap; /*可以换行*/
}
.text-1h{
    white-space: nowrap; /* 防止文本换行 */
    overflow: hidden; /* 隐藏超出容器的内容 */
    text-overflow: ellipsis; /* 显示省略号来表示被截断的文本 */
}
.text-2h {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}
.text-3h {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
}
.text-center {
    text-align: center;
}
.text-left{
    text-align: left;
}
.text-wrap {
    flex-wrap: wrap;
}
.gap-2{
    gap: 2px;
}
.gap-5 {
    gap: 5px;
}

.gap-10 {
    gap: 10px;
}
.gap-15 {
    gap: 15px;
}
.gap-20 {
    gap: 20px;
}
.gap-48 {
    gap: 48px;
}
.gap10 {
    gap: 10%;
}
.gap-200 {
    gap: 200px;
}
.border-top{
    border-top: 1px solid rgba(224, 227, 234, 1);
}
.border-top-start{
    border-top: 1px dashed #D1D5DB;
}
.border-bottom{
    border-bottom: 1px solid rgba(224, 227, 234, 1);
}
.border-bottom-dashed{
    border-bottom: 1px dashed rgba(224, 227, 234, 1);
}
.border{
    border-radius: 2px;
    border: 1px solid rgba(52, 127, 215, 1);
}
.border-1v{
    border: 1px solid rgba(52, 188, 145, 1);
}
.border-199{
    border: 1px solid rgba(199, 142, 86, 0.3)
}
.bg-52188{
    background-color: rgba(52, 188, 145, 1);
}
.bg-qian{
    background: rgba(255, 252, 239, 1);
}
.border-radius-50{
    border-radius: 50%;
}
.border-radius-20{
    border-radius: 20px;
}
.border-radius-40{
    border-radius: 40px;
}
.border-radius-0-20{
    border-radius: 0px 0px 20px 20px;
}
.border-radius-2{
    border-radius: 2px;
}
.border-radius-4{
    border-radius: 4px;
}
.border-radius-8{
    border-radius: 8px;
}
.border-hui{
    border-width: 1px;
    border-style: solid;
    border-color: rgba(224, 227, 234, 1);
}
.border-F59{
    border-width: 1px;
    border-style: solid;
    border-color: #F59A23;
}
.border-hui-top{
    border-width: 1px;
    border-style: solid;
    border-color: rgba(224, 227, 234, 1);
    border-top: none;
}
.border-A36717{
    border-width: 1px;
    border-style: solid;
    border-color: #F5DBB8;
    border-radius: 2px
}
.border-999999{
    border: 1px solid #999999;
}
.border-lv{
    border-width: 1px;
    border-style: solid;
    border-color: #34BC91;
    border-radius: 2px
}
.border-hong{
    border-width: 1px;
    border-style: solid;
    border-color: rgb(247, 104, 82);
    border-radius: 2px
}
.button{
    height: 40px !important;
    line-height: 40px !important;
    border-radius: 2px !important;
}
.fixed{
    position: fixed;
    transform: translateZ(0);
    contain: layout;
    z-index: 999;
}
.new-chat-dome-2{
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(calc((100% / 2 - 10px)), 1fr));
    row-gap: 10px;
    align-items: start;
}
.new-chat-dome-3{
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(calc((100% / 3 - 10px)), 1fr));
    row-gap: 0;
    align-items: start;
}
.top-cat-list-1{
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(calc((100% / 1) - 20px), 1fr));
    row-gap: 0;
    align-items: start;
}
.w-200{
    width: 200px;
}
.w-170{
    width: 170px;
}
.w-300{
    width: 300px;
}
.w-600{
    width: 600px;
}
.w-100-80{
    width: calc(100% - 80px);
}
.w-100-100{
    width: calc(100% - 100px);
}
.w-100{
    width: 100%;
}
.w-20{
    width: 20%;
}
.w-25{
    width: 25%;
}
.w-33{
    width: 33.33%;
}
.w-30{
    width: 30%;
}
.w-70{
    width: 70%;
}
.w-70vw{
    width: 70vw;
}
.w-90{
    width: 90%;
}
.w-91px{
    width: 91px;
}
.w-120px{
    width: 120px;
}
.w-140px{
    width: 140px;
}
.w100-91px{
    width: calc(100% - 91px);
}
.w-50{
    width: 50%;
}
.w-55{
    width: 55%;
}
.w-55px{
    width: 55px;
}
.w-45{
    width: 45%;
}
.w-24px{
    width: 24px;
}
.w-240px{
    width: 240px;
}
.w-28px{
    width: 28px;
}
.w-30px{
    width: 30px;
}
.border-right{
    border-right:  1px solid rgba(224, 227, 234, 1);
}
.border-left{
    border-left:  1px solid rgba(224, 227, 234, 1);
}
.w-156px{
    width: 156px;
}
.w-100px{
    width: 100px;
}
.w-70px{
    width: 70px;
}
.w-60px{
    width: 60px;
}
.w-50px{
    width: 50px;
}
.w-90px{
    width: 90px;
}
.w-100-70px{
    width: calc(100% - 80px);;
}
.w-100-90px{
    width: calc(100% - 90px);;
}
.w-100-64px{
    width: calc(100% - 64px);;
}
.w-48px{
    width: 48px;
}
.w-52px{
    width: 52px;
}
.w-64px{
    width: 64px;
}
.w-40px{
    width: 40px;
}
.w-36px{
    width: 36px;
}
.w-32px{
    width: 32px;
}
.w-20px{
    width: 20px;
}
.w-16px{
    width: 16px;
}
.w-12px{
    width: 12px;
}
.w-8px{
    width: 8px;
}
.w-14px{
    width: 14px;
}
.h-14px{
    height: 14px;
}
.h-8px{
    height: 8px;
}
.h-12px{
    height: 12px;
}
.h-16px{
    height: 16px;
}
.h-20px{
    height: 20px;
}
.h-24px{
    height: 24px;
}
.h-28px{
    height: 28px;
}
.h-32{
    height: 32px;
}
.h-36{
    height: 36px;
}
.h-38{
    height: 38px;
}
.h-40{
    height: 40px;
}
.h-44{
    height: 44px;
}
.h-48{
    height: 48px;
}
.h-64{
    height: 64px;
}
.h-50{
    height: 50px;
}
.h-56{
    height: 56px;
}
.h-60{
    height: 60px;
}
.h-68{
    height: 68px;
}
.h-72{
    height: 72px;
}
.h-80{
    height: 80px;
}
.h-160{
    height: 160px;
}
.h-180{
    height: 180px;
}
.h-100{
    height: 100px;
}
.h-115{
    height: 115px;
}
.h-120{
    height: 120px;
}
.h-140px{
    height: 140px;
}
.h-200{
    height: 200px;
}
.h-250{
    height: 250px;
}
.h-300{
    height: 300px;
}
.h-470{
    height: 470px;
}
.h-700{
    height: 700px;
}
.h-400{
    height: 400px;
}
.h-500{
    height: 500px;
}
.h-570{
    height: 570px;
}
.h-600{
    height: 600px;
}
.h-650{
    height: 650px;
}
.h-800{
    height: 800px;
}
.h-dd0{
    height: calc(100vh - 350px);
}
.line-h-20{
    line-height: 20px;
}
.line-h-22{
    line-height: 22px;
}
.line-h-24{
    line-height: 24px;
}
.line-h-25{
    line-height: 25px;
}
.line-h-20{
    line-height: 20px;
}
.line-h-30{
    line-height: 30px;
}
.line-h-40{
    line-height: 40px;
}
.line-h-32{
    line-height: 32px;
}
.line-h-36{
    line-height: 36px;
}
.line-h-48{
    line-height: 48px;
}
.line-h-64{
    line-height: 64px;
}
.line-h-72{
    line-height: 72px;
}
.line-h-80{
    line-height: 80px;
}
.line-h-51{
    line-height: 51px;
}
.left-10{
    left: 10px;
}
.top-10{
    top: 10px;
}
.top-12{
    top: 12px;
}
.top-8{
    top: 8px;
}
.top-20{
    top: 20px;
}
.margin-top-1{
    margin-top: -1px;
}
.m-0-auto{
    margin: 0 auto;
}
.m-top-3{
    margin-top: 3px;
}
.m-top-5{
    margin-top: 5px;
}
.m-top-8{
    margin-top: 8px;
}
.m-top-12{
    margin-top: 12px;
}
.m-top-10{
    margin-top: 10px;
}
.m-top-15{
    margin-top: 15px;
}
.m-top-20{
    margin-top: 20px;
}
.m-top-28{
    margin-top: 28px;
}
.m-top-30{
    margin-top: 30px;
}
.m-top-40{
    margin-top: 40px;
}
.m-top-50{
    margin-top: 50px;
}
.m-top-60{
    margin-top: 60px;
}
.m-top-65{
    margin-top: 65px;
}
.m-top-80{
    margin-top: 80px;
}
.m-top-100{
    margin-top: 100px;
}
.m-top-150{
    margin-top: 150px;
}
.m-top-200{
    margin-top: 200px;
}
.m-bottom-5{
    margin-bottom: 5px;
}
.m-bottom-10{
    margin-bottom: 10px;
}
.m-bottom-20{
    margin-bottom: 20px;
}
.m-bottom-50{
    margin-bottom: 50px;
}
.m-bottom-90{
    margin-bottom: 90px;
}
.text-10{
    font-size: 10px;
}
.text-12{
    font-size: 12px;
}
.text-13{
    font-size: 13px;
}
.text-14{
    font-size: 14px !important;
}
.text-16{
    font-size: 16px;
}
.text-18{
    font-size: 18px;
}
.text-20{
    font-size: 20px;
}
.text-24{
    font-size: 24px;
}
.text-28{
    font-size: 28px;
}
.text-32{
    font-size: 32px;
}
.text-48{
    font-size: 48px;
}
.font-700{
    font-weight: 700;
}
.font-400{
    font-weight: 400;
}
.font-300{
    font-weight: 300;
}
.lan{
    color: #234369;
}
.qianlan{
    color: #6B819B;
}
.red{
    color: red;
}
.F9383C{
    color: #F9383C;
}
.seF85E5E{
    color: #F85E5E;
}
.hui{
    color: #333333;;
}
.E5686{
    color: #2E5686;
}
.se177{
    color:rgba(177, 102, 27, 1)
}
.seDF384C{
    color:#DF384C
}
.seF59{
    color: #F59A23;
}
.se33{
    color: #333333;;
}
.se61{
    color: #111111;;
}
.seA6{
    color: #AAAAAA;;
}
.se66{
    color: #666666;
}
.se88{
    color: #888888;
}
.seff{
    color: #FFFFFF;;
}
.se7f{
    color: #7F7F7F;;
}
.seF8{
    color: #F8F8F8;;
}
.se55{
    color: #555555;
}
.seD7{
    color: #D7D7D7;
}
.seD08{
    color: #D08B03;
}
.shenlan{
    color: rgb(46, 86, 134);
}
.lianglan{
    color: #2591FE;
}
.blue{
    color: #347FD7;
}
.juse{
    color: #F7700A;
}
.heihui{
    color: #7F7F7F;;
}
.white{
    color: white;
}
.huise{
    color: #555555;
}
.lv{
    color: #34BC91;
}
.A36717{
    color: #A36717;
}
.A6{
    color: #AAAAAA;;
}
.hong{
    color: rgb(247, 104, 82);
}
.home-bg2{
    background-image: url('/assets/img/bg2.svg');
    /*height: 560px;/*/
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.home-bg1{
    background-image: url('/assets/img/bg1.svg');
    /*height: 560px;/*/
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.bg-DF384C{
    background: #DF384C;
}
.bg-red-new{
    background: rgba(223, 56, 76, 1);
}
.bg-green{
    background: rgba(51, 51, 51, 1);
}
.bg-0E0611{
    background: #0E0611;
}
.bg-F8F8F8{
    background: #F8F8F8;
}
.bg-hei{
    background: #7F7F7F;
}
.bg-qianlan{
    background: rgba(52, 127, 215, 0.09803921568627451);
}
.bg-hui{
    background-color: rgba(245, 246, 248, 1);
}
.bg-170{
    background-color: rgba(170, 170, 170, 1);
}
.bg-an{
    background-color: rgba(242, 242, 242, 1)
}
.bg-back{
    background-color: rgba(31, 41, 55, 1);
}
.bg-jine{
    background-color: rgba(52, 127, 215, 1);
}
.bg52127{
    background-color: rgba(52, 127, 215, 0.09803921568627451);
}
.bg_FFF8EE{
    background-color: #FFF8EE;
}
.bg-huang{
    background-color: rgba(245, 154, 35, 1);
}
.bg-blue{
    background: #347FD7;
}
.bg-lan{
    background: linear-gradient(93.42586291774008deg, rgba(74, 176, 234, 1) 3%, rgba(88, 160, 245, 1) 99%);
}
.bg-red{
    background: red;
}
.huitou{
    background: rgba(105, 147, 196, 0.09803921568627451);
}
.bg-white{
    background: white;
}
.bg-huilan{
    background-color: rgba(52, 127, 215, 0.09803921568627451);
}
.bg-newlan{
    background-color: rgba(14, 165, 233, 1);
}
.bg-newlv{
    background-color: rgba(34, 197, 94, 1);
}
.bg-lv{
    background-color: rgba(52, 188, 145, 0.09803921568627451);
}
.drawer-content{
    padding: calc( (10% - 5px)/2 );
}
.box{
    box-sizing: border-box;
}
.float-left{
    float: left;
}
.word-break-all{
    word-break: break-all
}
.flex-shrink{
    flex-shrink: 0;
}
.position-relative{
    position: relative;
}
.position-absolute{
    position: absolute;
}
.z-9{
    z-index: 9;
}
.right-20{
    right: 20px;
}
.right-15{
    right: 15px;
}
.right-10{
    right: 10px;
}
.bottom-70{
    bottom: 70px;
}
.position-fixed{
    position: fixed;
}
.radius20{
    border-radius: 20px;
}
.radius8{
    border-radius: 8px;
}

.modal-mask{
    background-color: rgba(0, 0, 0, 0.1) !important;
}

.aliyun-captcha-mask {
    display: none;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 9999;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    align-items: center;
    justify-content: center;
}
.aliyun-captcha-mask.show {
    display: flex;
}
.aliyun-captcha-card {
    width: 502px;
    max-width: calc(100vw - 40px);
    min-height: 338px;
    padding: 48px 44px 36px;
    background: #fff;
    border-radius: 6px;
    box-sizing: border-box;
    position: relative;
}
.aliyun-captcha-title {
    font-size: 18px;
    line-height: 24px;
    font-weight: 700;
    color: #333;
}
.aliyun-captcha-close {
    position: absolute;
    right: 34px;
    top: 45px;
    width: 28px;
    height: 28px;
    cursor: pointer;
}
.aliyun-captcha-close:before,
.aliyun-captcha-close:after {
    content: "";
    position: absolute;
    left: 13px;
    top: 0;
    width: 3px;
    height: 30px;
    background: #999;
    border-radius: 2px;
}
.aliyun-captcha-close:before {
    transform: rotate(45deg);
}
.aliyun-captcha-close:after {
    transform: rotate(-45deg);
}
.aliyun-captcha-desc {
    margin-top: 46px;
    font-size: 16px;
    line-height: 22px;
    color: #888;
    font-weight: 700;
}
.aliyun-captcha-wrap {
    width: 100%;
    min-height: 35px;
    margin-top: 18px;
    background: #eee;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    overflow: hidden;
}
.aliyun-captcha-status {
    margin-top: 20px;
    font-size: 14px;
    line-height: 20px;
    color: #999;
    font-weight: 700;
}

.pc-toast {
    position: fixed;
    left: 50%;
    top: 50%;
    z-index: 10000;
    transform: translate(-50%, -50%);
    max-width: 420px;
    padding: 12px 22px;
    background: rgba(0, 0, 0, 0.78);
    color: #fff;
    border-radius: 4px;
    font-size: 14px;
    line-height: 22px;
    text-align: center;
    box-sizing: border-box;
    display: none;
}
.pc-toast.show {
    display: block;
}

.pc-forgot-container {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: calc(100vh - 140px);
    padding: 80px 15%;
    box-sizing: border-box;
}
.pc-forgot-card {
    display: flex;
    width: 100%;
    max-width: 1030px;
    min-height: 600px;
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}
.pc-forgot-intro {
    width: 55%;
    min-height: 600px;
    padding: 70px 50px;
    color: #fff;
    background: linear-gradient(90deg, rgba(223, 56, 76, 0.92) 0%, rgba(255, 144, 97, 0.72) 100%), url('/assets/img/bg1.png') center/cover no-repeat;
    box-sizing: border-box;
}
.pc-forgot-intro-text {
    max-width: 520px;
    margin-top: 40px;
    font-size: 16px;
    line-height: 30px;
}
.pc-forgot-feature-line {
    margin-top: 10px;
    border-bottom: 1px dashed rgba(255, 255, 255, 0.7);
}
.pc-forgot-form-panel {
    width: 45%;
    min-height: 600px;
    padding: 34px 40px;
    box-sizing: border-box;
}
.pc-forgot-title-row {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-top: 5px;
    color: #333;
}
.pc-forgot-back {
    color: #333;
    font-size: 25px;
    line-height: 26px;
    text-decoration: none;
    transform: rotate(180deg);
}
.pc-forgot-form {
    margin-top: 34px;
}
.pc-forgot-email-row {
    display: flex;
    align-items: center;
    gap: 16px;
}
.pc-forgot-input-wrap {
    position: relative;
    flex: 1;
    min-width: 0;
}
.pc-forgot-input-icon {
    position: absolute;
    left: 16px;
    top: 50%;
    width: 16px;
    height: 16px;
    object-fit: contain;
    transform: translateY(-50%);
}
.pc-forgot-input {
    width: 100%;
    height: 40px;
    padding: 0 16px 0 46px;
    color: #333;
    border: 1px solid rgba(224, 227, 234, 1);
    border-radius: 4px;
    outline: none;
    box-sizing: border-box;
    font-size: 16px;
}
.pc-forgot-input::placeholder {
    color: #999;
}
.pc-forgot-send {
    flex: 0 0 112px;
    height: 40px;
    color: #DF384C;
    border: 1px solid #DF384C;
    border-radius: 4px;
    line-height: 40px;
    text-align: center;
    text-decoration: none;
    box-sizing: border-box;
}
.pc-forgot-send.disabled {
    color: #666;
    border-color: #999;
    pointer-events: none;
}
.pc-forgot-msg {
    display: block;
    min-height: 22px;
    padding-top: 2px;
    color: #F85E5E;
    font-size: 12px;
    line-height: 20px;
    box-sizing: border-box;
}
.pc-forgot-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 34px;
}
.pc-forgot-cancel,
.pc-forgot-submit {
    height: 40px;
    border-radius: 4px;
    border: 0;
    font-size: 16px;
    line-height: 40px;
    text-align: center;
    box-sizing: border-box;
}
.pc-forgot-cancel {
    width: 50%;
    color: #666;
    background: #F1F1F1;
    text-decoration: none;
}
.pc-forgot-submit {
    width: 50%;
    color: #fff;
    background: #DF384C;
}
.user-profile-level {
    position: absolute;
    left: 50%;
    bottom: -6px;
    transform: translateX(-50%);
    min-width: 44px;
    height: 22px;
    padding: 0 8px;
    line-height: 22px;
    background: #DF384C;
    color: #fff;
    border-radius: 11px;
    font-size: 14px;
    font-weight: 700;
    box-sizing: border-box;
    text-align: center;
}
.user-home-container {
    min-height: calc(100vh - 140px);
    padding: 40px 15%;
    box-sizing: border-box;
}
.user-home-card {
    display: flex;
    /*min-height: 1068px;*/
    border-radius: 12px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.07);
    overflow: hidden;
}
.user-side {
    width: 200px;
    padding: 12px 11px;
    border-right: 1px solid rgba(224, 227, 234, 1);
    box-sizing: border-box;
}
.user-side-item {
    display: flex;
    align-items: center;
    gap: 12px;
    height: 56px;
    padding: 0 13px;
    color: #333;
    font-size: 16px;
    text-decoration: none;
    border-radius: 4px;
    box-sizing: border-box;
    margin-bottom: 7px;
}
.user-side-item:hover,
.user-side-item.active {
    color: #2F8CFF;
    background: #EAF4FF;
    border: 1px solid #BBD8FF;
    text-decoration: none;
}
.user-side-icon {
    width: 18px;
    height: 18px;
    object-fit: contain;
    flex-shrink: 0;
}
@media (max-width: 1380px) {
    .user-home-container {
        padding-left: 15%;
        padding-right: 15%;
    }
    .user-side {
        width: 72px;
        padding: 12px 9px;
    }
    .user-side-item {
        justify-content: center;
        gap: 0;
        padding: 0;
        font-size: 0;
    }
    .user-side-icon {
        width: 20px;
        height: 20px;
    }
}
@media (min-width: 1381px) {
    .user-side {
        width: 200px;
    }
    .user-side-item {
        justify-content: flex-start;
        gap: 12px;
        padding: 0 13px;
        font-size: 16px;
    }
}
.user-main {
    flex: 1;
    min-width: 0;
    padding: 32px 30px 20px;
}
.user-main-line {
    height: 1px;
    margin: 21px 0 20px;
    background: rgba(224, 227, 234, 1);
}
.gap-30 {
    gap: 30px;
}
.user-profile-panel {
    position: relative;
    width: 280px;
    /*min-height: 938px;*/
    padding: 1px 20px 30px;
}
.user-profile-avatar {
    width: 120px;
    height: 120px;
    object-fit: cover;
}
.user-profile-bottom {
    position: absolute;
    left: 20px;
    right: 20px;
    bottom: 20px;
    text-align: center;
}
.user-logout-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 40px;
    color: #333;
    border: 1px solid #D7D7D7;
    border-radius: 4px;
    font-size: 16px;
    box-sizing: border-box;
}
.user-dashboard {
    flex: 1;
    min-width: 0;
}
.user-balance-card {
    min-height: 238px;
    padding: 36px 30px 24px;
    border-radius: 4px;
}
.address-main {
    min-height: 1068px;
}
.address-add-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 96px;
    height: 40px;
    padding: 0 16px;
    color: #fff;
    background: #2F8CFF;
    border-radius: 4px;
    font-size: 16px;
    text-decoration: none;
    box-sizing: border-box;
}
.address-add-btn:hover {
    color: #fff;
    text-decoration: none;
}
.address-breadcrumb {
    height: 58px;
    color: #999;
    font-size: 16px;
    line-height: 36px;
}
.address-breadcrumb a {
    color: #999;
    text-decoration: none;
}
.address-breadcrumb span {
    margin: 0 10px;
}
.address-breadcrumb strong {
    color: #333;
    font-weight: 700;
}
.address-add-layout {
    display: grid;
    grid-template-columns: 350px minmax(420px, 1fr);
    gap: 110px;
    margin-top: 20px;
}
.address-add-layout.single {
    grid-template-columns: 350px;
}
.address-form-label {
    display: block;
    margin-top: 26px;
    margin-bottom: 10px;
    color: #333;
    font-size: 16px;
    line-height: 24px;
    font-weight: 400;
}
.address-form-label:first-child,
.address-example-title + .address-example-row {
    margin-top: 0;
}
.address-form-label b,
.address-example-title {
    color: #F85E5E;
    font-weight: 400;
}
.address-form-input,
.address-form-textarea {
    display: block;
    width: 350px;
    padding: 0 12px;
    color: #333;
    background: #fff;
    border: 1px solid #D6DCE5;
    border-radius: 4px;
    outline: none;
    font-size: 16px;
    box-sizing: border-box;
}
.address-form-input {
    height: 48px;
}
.address-form-textarea {
    height: 80px;
    margin-top: 12px;
    padding-top: 12px;
    resize: none;
}
.address-area-picker {
    width: 350px;
}
.address-area-picker .checkout-area-panel {
    top: 52px;
    width: 350px;
}
.address-default-check {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    margin-top: 20px;
    color: #333333;
    font-size: 16px;
    line-height: 22px;
    cursor: pointer;
}
.address-default-check input {
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: #2F8CFF;
}
.address-save-btn {
    width: 120px;
    height: 40px;
    margin-top: 32px;
    color: #fff;
    background: #2F8CFF;
    border: 0;
    border-radius: 4px;
    font-size: 16px;
    cursor: pointer;
}
.address-example {
    padding-top: 18px;
}
.address-example-title {
    margin-bottom: 16px;
    font-size: 16px;
    line-height: 24px;
}
.address-example-row {
    position: relative;
    margin-bottom: 48px;
}
.address-example-picker {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 350px;
    height: 48px;
    padding: 0 12px;
    color: #333;
    background: #fff;
    border: 1px solid #D6DCE5;
    border-radius: 4px;
    font-size: 16px;
    box-sizing: border-box;
}
.address-example-picker i {
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 6px solid #999;
}
.address-example-panel {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    width: 350px;
    padding: 0;
    background: #fff;
    border: 1px solid #D6DCE5;
    border-top: 0;
    border-radius: 0 0 4px 4px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    box-sizing: border-box;
}
.address-example-panel div {
    height: 36px;
    padding: 0 12px;
    color: #333;
    border-right: 1px solid #ECEFF3;
    font-size: 16px;
    line-height: 36px;
    box-sizing: border-box;
}
.address-example-panel div:nth-child(3n) {
    border-right: 0;
}
.address-example-flex {
    display: flex;
    align-items: flex-start;
    gap: 30px;
}
.address-example-main {
    width: 350px;
}
.address-example-tips {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 10px 18px;
    width: 360px;
    padding-top: 0;
}
.address-example-tips span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    padding: 0 12px;
    color: #fff;
    background: #444;
    border-radius: 4px;
    font-size: 16px;
    white-space: nowrap;
}
.address-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 780px;
    color: #BDBDBD;
    font-size: 14px;
}
.address-empty-icon {
    position: relative;
    width: 46px;
    height: 46px;
    margin-bottom: 12px;
    border: 4px solid #C9C9C9;
    border-radius: 50% 50% 50% 0;
    transform: rotate(-45deg);
    box-sizing: border-box;
}
.address-empty-icon:before {
    content: "";
    position: absolute;
    left: 11px;
    top: 11px;
    width: 16px;
    height: 16px;
    border: 4px solid #C9C9C9;
    border-radius: 50%;
    box-sizing: border-box;
}
.address-empty-icon:after {
    content: "";
    position: absolute;
    left: -9px;
    bottom: -16px;
    width: 58px;
    height: 14px;
    border: 4px solid #C9C9C9;
    border-top: 0;
    border-radius: 50%;
    transform: rotate(45deg);
    box-sizing: border-box;
}
.address-card-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(260px, 1fr));
    gap: 20px;
    margin-top: 32px;
}
.address-card {
    min-height: 184px;
    padding: 18px 20px 16px;
    border: 1px solid #D6DCE5;
    border-radius: 4px;
    box-sizing: border-box;
}
.address-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    color: #333;
    font-size: 18px;
    line-height: 28px;
}
.address-card-head strong {
    font-size: 20px;
    font-weight: 700;
    white-space: nowrap;
}
.address-card-text {
    min-height: 54px;
    margin-top: 8px;
    color: #888;
    font-size: 16px;
    line-height: 27px;
}
.address-card-line {
    height: 1px;
    margin: 14px 0 16px;
    background: #E3E6EC;
}
.address-card-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}
.address-card-actions,
.address-card-actions a {
    color: #666;
    font-size: 16px;
    line-height: 24px;
    text-decoration: none;
}
.address-card-actions a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.address-card-actions a.active {
    color: #2F8CFF;
}
.address-card-actions > div {
    display: flex;
    align-items: center;
    gap: 24px;
}
.address-check {
    position: relative;
    width: 20px;
    height: 20px;
    background: #999;
    border-radius: 50%;
    flex-shrink: 0;
}
.address-card-actions a.active .address-check {
    background: #2F8CFF;
}
.address-check:after {
    content: "";
    position: absolute;
    left: 5px;
    top: 5px;
    width: 8px;
    height: 5px;
    border-left: 2px solid #fff;
    border-bottom: 2px solid #fff;
    transform: rotate(-45deg);
}
.address-edit-icon,
.address-delete-icon {
    position: relative;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}
.address-edit-icon:before {
    content: "";
    position: absolute;
    left: 3px;
    top: 10px;
    width: 11px;
    height: 3px;
    border-left: 2px solid #777;
    border-bottom: 2px solid #777;
    transform: rotate(-45deg);
}
.address-edit-icon:after {
    content: "";
    position: absolute;
    left: 2px;
    bottom: 2px;
    width: 14px;
    height: 2px;
    background: #777;
}
.address-delete-icon:before {
    content: "";
    position: absolute;
    left: 4px;
    top: 6px;
    width: 10px;
    height: 10px;
    border: 2px solid #777;
    border-top: 0;
    box-sizing: border-box;
}
.address-delete-icon:after {
    content: "";
    position: absolute;
    left: 3px;
    top: 3px;
    width: 12px;
    height: 2px;
    background: #777;
    box-shadow: 4px -2px 0 -1px #777;
}
@media (max-width: 1500px) {
    .address-card-grid {
        grid-template-columns: repeat(2, minmax(260px, 1fr));
    }
}
.user-balance-number {
    color: #3D97F5;
    font-size: 34px;
    line-height: 40px;
    font-weight: 700;
}
.user-primary-btn,
.user-outline-btn,
.user-small-outline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 48px;
    padding: 0 38px;
    border-radius: 4px;
    font-size: 16px;
    text-decoration: none;
    box-sizing: border-box;
}
.user-primary-btn {
    color: #fff;
    background: #3D97F5;
    border: 1px solid #3D97F5;
}
.user-outline-btn,
.user-small-outline {
    color: #2F8CFF;
    background: #fff;
    border: 1px solid #2F8CFF;
}
.user-small-outline {
    height: 32px;
    padding: 0 18px;
}
.user-dashed-line {
    height: 1px;
    margin: 26px 0 28px;
    border-top: 1px dashed #D7D7D7;
}
.user-money-icon {
    width: 56px;
    height: 56px;
    line-height: 52px;
    color: #AEB7C3;
    font-size: 26px;
    font-weight: 700;
    text-align: center;
    box-sizing: border-box;
}
.user-vertical-line {
    width: 1px;
    height: 58px;
    border-left: 1px dashed #D7D7D7;
}
.user-level-tip {
    margin-top: 20px;
    min-height: 56px;
    padding: 0 16px;
    color: #103A8C;
    background: #EAF4FF;
    box-sizing: border-box;
}
.user-level-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 16px;
    color: #333;
}
.user-level-table th {
    height: 40px;
    color: #999;
    background: #F6F6F6;
    font-weight: 400;
    text-align: left;
    padding: 0 6px;
}
.user-level-table td {
    height: 40px;
    border-bottom: 1px solid #E6E6E6;
    padding: 0 6px;
}
.header-user-h5 {
    height: 72px;
    display: flex;
    align-items: center;
}
.header-user {
    height: 80px;
    display: flex;
    align-items: center;
}
.pc-fixed-head {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 9998;
    width: 100%;
}
.pc-fixed-head-spacer {
    height: 80px;
}
.header-user-trigger-h5 {
    height: 72px;
    cursor: pointer;
}
.header-user-trigger {
    height: 80px;
    cursor: pointer;
}
.header-user-level {
    position: absolute;
    left: 50%;
    bottom: 32px;
    transform: translateX(-50%);
    min-width: 34px;
    height: 18px;
    padding: 0 6px;
    line-height: 18px;
    background: #DF384C;
    color: #fff;
    border-radius: 9px;
    font-size: 12px;
    font-weight: 700;
    text-align: center;
    box-sizing: border-box;
}
.header-user-menu {
    display: none;
    position: absolute;
    right: 0;
    top: 72px;
    z-index: 9999;
    width: 238px;
    padding: 10px 0 16px;
    border-radius: 4px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.14);
    box-sizing: border-box;
}
.header-user:hover .header-user-menu {
    display: block;
}
.header-user-h5:hover .header-user-menu {
    display: block;
}
.header-user-menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 56px;
    padding: 0 18px;
    color: #333;
    font-size: 16px;
    line-height: 56px;
    text-decoration: none;
    box-sizing: border-box;
}
.header-user-menu-item:hover,
.header-user-menu-item.active {
    color: #2F8CFF;
    background: #EAF4FF;
    text-decoration: none;
}
.header-menu-icon {
    width: 18px;
    height: 18px;
    object-fit: contain;
    flex-shrink: 0;
}
.header-logout-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    margin: 10px 16px 0;
    color: #333;
    border: 1px solid #D7D7D7;
    border-radius: 4px;
    font-size: 16px;
    line-height: 40px;
    text-decoration: none;
    box-sizing: border-box;
}
.header-logout-btn:hover {
    color: #333;
    text-decoration: none;
}

.recharge-main {
    padding: 20px 30px 40px;
}
.recharge-tabs {
    display: flex;
    align-items: center;
    height: 70px;
    border-bottom: 1px solid #E0E3EA;
}
.recharge-tab {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 180px;
    height: 50px;
    color: #666;
    font-size: 20px;
    text-decoration: none;
}
.recharge-tab.active {
    color: #333;
    background: #EEEEEE;
    font-weight: 700;
}
.recharge-tab:hover {
    text-decoration: none;
}
.recharge-panel {
    display: none;
}
.recharge-panel.active {
    display: block;
}
.recharge-notice {
    margin-top: 20px;
    padding: 14px 12px;
    min-height: 100px;
    color: #C7863E;
    background: #FFFCEF;
    border: 1px solid #F5DBB8;
    border-radius: 4px;
    font-size: 14px;
    line-height: 22px;
    box-sizing: border-box;
}
.recharge-summary {
    margin-top: 20px;
    height: 48px;
    padding: 0 12px;
    color: #333;
    background: #F5F5F5;
    font-size: 16px;
    box-sizing: border-box;
}
.recharge-red {
    color: #DF384C;
    font-weight: 700;
}
.recharge-orange {
    color: #F59A23;
    font-weight: 700;
}
.recharge-form {
    margin-top: 30px;
    width: 350px;
}
.recharge-input {
    width: 202px;
    height: 40px;
    padding: 0 12px;
    color: #333;
    border: 1px solid #E0E3EA;
    border-radius: 4px;
    outline: none;
    font-size: 16px;
    box-sizing: border-box;
}
.recharge-input.is-error {
    border-color: #F85E5E;
}
.recharge-input::placeholder {
    color: #999;
}
.recharge-error {
    display: none;
    color: #F85E5E;
    font-size: 14px;
    line-height: 18px;
}
.recharge-error.show {
    display: block;
}
.recharge-pay {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 160px;
    height: 38px;
    padding: 0 12px;
    color: #333;
    border: 1px solid #E0E3EA;
    border-radius: 4px;
    font-size: 16px;
    box-sizing: border-box;
    cursor: pointer;
}
.recharge-pay.active {
    background: #EAF4FF;
    border-color: #A9CEFF;
}
.recharge-pay input {
    display: none;
}
.pay-dot {
    width: 16px;
    height: 16px;
    line-height: 16px;
    border-radius: 50%;
    color: #fff;
    font-size: 10px;
    text-align: center;
    flex-shrink: 0;
}
.pay-alipay {
    background: #5A9BFF;
}
.pay-wechat {
    background: #21C45A;
}
.recharge-submit {
    width: 120px;
    height: 40px;
    color: #fff;
    background: #3D97F5;
    border: none;
    border-radius: 4px;
    font-size: 16px;
    cursor: pointer;
}
.recharge-level-section {
    margin-top: 50px;
    max-width: 910px;
}
.recharge-level-table {
    max-width: 910px;
}
.recharge-pay-page {
    min-height: calc(100vh - 140px);
    padding: 44px 15%;
    box-sizing: border-box;
    position: relative;
}
.recharge-pay-tip {
    position: absolute;
    left: 18.5%;
    top: 48px;
    color: #F85E5E;
    font-size: 16px;
}
.recharge-pay-card {
    width: 60%;
    min-height: 1068px;
    margin: 0 auto;
    padding: 64px 100px;
    background: #fff;
    box-sizing: border-box;
}
.recharge-pay-title {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    color: #333;
    font-size: 28px;
    line-height: 42px;
}
.recharge-pay-title img {
    width: 36px;
    height: 36px;
}
.recharge-pay-line {
    height: 1px;
    margin: 24px 0 44px;
    background: #E6E6E6;
}
.recharge-pay-money {
    color: #000;
    font-size: 44px;
    line-height: 54px;
    font-weight: 700;
    text-align: center;
}
.recharge-pay-countdown {
    margin-top: 34px;
    color: #F23855;
    font-size: 22px;
    line-height: 30px;
    font-weight: 700;
    text-align: center;
}
.recharge-pay-qrcode {
    margin: 22px auto 0;
    width: 320px;
    min-height: 320px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #E6E6E6;
    box-sizing: border-box;
}
.recharge-pay-qrcode img {
    width: 300px;
    height: 300px;
    object-fit: contain;
}
.recharge-pay-info {
    display: grid;
    grid-template-columns: 1fr 1fr;
    row-gap: 16px;
    color: #333;
    font-size: 16px;
    line-height: 24px;
}
.recharge-pay-info div:nth-child(2n) {
    text-align: right;
}
.recharge-pay-help {
    margin-top: 48px;
    color: #666;
    font-size: 14px;
    line-height: 24px;
    text-align: center;
}
.recharge-pay-finish {
    display: block;
    width: 320px;
    height: 48px;
    margin: 20px auto 0;
    color: #fff;
    border: none;
    border-radius: 4px;
    font-size: 18px;
    cursor: pointer;
}
.order-pay-bg {
    background: #f5f5f5;
}
.order-pay-container {
    max-width: 1440px;
    min-height: calc(100vh - 140px);
    margin: 0 auto;
    padding: 34px 60px 44px;
    box-sizing: border-box;
}
.order-pay-breadcrumb {
    display: flex;
    align-items: center;
    gap: 18px;
    color: #999;
    font-size: 16px;
    line-height: 32px;
}
.order-pay-breadcrumb a {
    color: #999;
    text-decoration: none;
}
.order-pay-breadcrumb strong {
    color: #333;
    font-weight: 400;
}
.order-pay-breadcrumb em {
    color: #c9c9c9;
    font-style: normal;
}
.order-pay-title {
    margin: 24px 0 22px;
    color: #000;
    font-size: 30px;
    line-height: 42px;
}
.order-pay-card {
    min-height: 820px;
    padding: 30px;
    background: #fff;
    border-radius: 4px;
    box-sizing: border-box;
}
.order-pay-card h2 {
    margin: 0 0 22px;
    color: #000;
    font-size: 22px;
    line-height: 32px;
}
.order-pay-summary {
    display: grid;
    grid-template-columns: 1.2fr 1.5fr 0.7fr 1fr;
    padding: 22px 16px;
    background: #f8f9fb;
}
.order-pay-summary div {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.order-pay-summary span {
    color: #111;
    font-size: 16px;
}
.order-pay-summary strong {
    color: #333;
    font-size: 18px;
}
.order-pay-summary .red {
    color: #e7354f;
}
.order-pay-scan-tip {
    margin: 44px 0 20px;
    color: #111;
    font-size: 16px;
}
.order-pay-line {
    height: 1px;
    background: #e1e5eb;
}
.order-pay-main {
    padding-top: 34px;
}
.order-pay-qrcode-block {
    width: 320px;
}
.order-pay-countdown {
    margin-bottom: 24px;
    color: #e7354f;
    font-size: 20px;
    font-weight: 700;
    text-align: center;
}
.order-pay-qrcode-wrap {
    position: relative;
    width: 320px;
    height: 320px;
    padding: 16px;
    border: 1px solid #e5e5e5;
    border-radius: 4px;
    box-sizing: border-box;
}
.order-pay-qrcode-wrap #pay-qrcode,
.order-pay-qrcode-wrap #pay-qrcode img,
.order-pay-qrcode-wrap #pay-qrcode canvas {
    width: 288px !important;
    height: 288px !important;
}
.order-pay-expired {
    display: none;
    position: absolute;
    left: 16px;
    top: 16px;
    width: 288px;
    height: 288px;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(6px);
    background: rgba(255, 255, 255, 0.58);
}
.order-pay-qrcode-wrap.expired #pay-qrcode {
    filter: blur(5px);
}
.order-pay-qrcode-wrap.expired .order-pay-expired {
    display: flex;
}
.order-pay-expired button {
    width: 136px;
    height: 40px;
    color: #e7354f;
    font-size: 16px;
    border: 1px solid #e7354f;
    border-radius: 4px;
    background: #fff;
    cursor: pointer;
}
.order-pay-finish {
    width: 320px;
    height: 48px;
    margin-top: 24px;
    color: #fff;
    font-size: 18px;
    border: 0;
    border-radius: 4px;
    background: #e7354f;
}
.order-pay-finish.disabled {
    background: #b5b5b5;
    cursor: not-allowed;
}
.order-pay-button-tip {
    margin-top: 24px;
    color: #ff6d7f;
    font-size: 16px;
    text-align: center;
}
.pc-recharge-pay-page {
    background: #f5f5f5;
}
.pc-recharge-pay-card {
    width: 800px;
    min-height: calc(100vh - 220px);;
    margin: 40px auto;
    padding: 64px 100px 80px;
    background: #fff;
    box-sizing: border-box;
}
.pc-recharge-pay-card .recharge-pay-title {
    font-size: 28px;
    line-height: 42px;
}
.pc-recharge-pay-card .recharge-pay-title img {
    width: 36px;
    height: 36px;
}
.pc-recharge-pay-card .recharge-pay-line {
    margin: 24px 0 44px;
}
.pc-recharge-pay-card .recharge-pay-money {
    font-size: 44px;
    line-height: 54px;
}
.pc-recharge-pay-card .recharge-pay-countdown {
    margin-top: 34px;
}
.pc-recharge-pay-card .recharge-pay-qrcode {
    position: relative;
    width: 320px;
    height: 320px;
    min-height: 320px;
    padding: 16px;
    border-radius: 4px;
}
.pc-recharge-pay-card .recharge-pay-qrcode #pay-qrcode,
.pc-recharge-pay-card .recharge-pay-qrcode #pay-qrcode img,
.pc-recharge-pay-card .recharge-pay-qrcode #pay-qrcode canvas {
    width: 288px !important;
    height: 288px !important;
}
.pc-recharge-pay-card .order-pay-expired {
    left: 16px;
    top: 16px;
}
.pc-recharge-pay-info-line {
    margin: 20px 0 24px !important;
}
.pc-recharge-pay-dashed {
    height: 1px;
    margin-top: 24px;
    border-top: 1px dashed #d7d7d7;
}
.pc-recharge-pay-card .recharge-pay-help {
    margin-top: 22px;
    color: #666;
    font-size: 14px;
    line-height: 24px;
}
.pc-recharge-pay-finish {
    display: block;
    width: 320px;
    height: 48px;
    margin: 20px auto 0;
}
.recharge-record-table {
    margin-top: 20px;
}
.recharge-record-bottom {
    margin-top: 760px;
}

.user-page-title {
    height: 80px;
    line-height: 80px;
    border-bottom: 1px solid #E0E3EA;
}
.user-filter {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-top: 20px;
    flex-wrap: wrap;
}
.user-filter-input,
.user-filter-select {
    width: 202px;
    height: 38px;
    padding: 0 12px;
    color: #333;
    border: 1px solid #E0E3EA;
    border-radius: 4px;
    outline: none;
    font-size: 16px;
    box-sizing: border-box;
    background: #fff;
}
.user-filter-input::placeholder {
    color: #999;
}
.user-filter-time {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    color: #666;
    font-size: 14px;
    font-weight: 400;
    position: relative;
}
.user-filter-time .user-filter-input {
    width: 210px;
}
.bootstrap-datetimepicker-widget.dropdown-menu {
    position: absolute;
    top: 40px;
    left: auto;
    right: 0;
    display: block;
    width: 260px;
    margin: 0;
    padding: 4px;
    background: #fff;
    border: 1px solid #D8DDE6;
    border-radius: 4px;
    box-shadow: 0 8px 24px rgba(18, 24, 40, 0.16);
    z-index: 3000 !important;
}
.bootstrap-datetimepicker-widget ul,
.bootstrap-datetimepicker-widget li {
    margin: 0;
    padding: 0;
    list-style: none;
}
.bootstrap-datetimepicker-widget .collapse {
    display: none;
}
.bootstrap-datetimepicker-widget .collapse.in {
    display: block;
}
.bootstrap-datetimepicker-widget table {
    width: 100%;
    margin: 0;
    border-collapse: collapse;
    table-layout: fixed;
}
.bootstrap-datetimepicker-widget table th,
.bootstrap-datetimepicker-widget table td {
    width: 34px;
    height: 30px;
    padding: 0;
    color: #666666;
    border: 0;
    text-align: center;
    vertical-align: middle;
    font-size: 14px;
    line-height: 30px;
    cursor: pointer;
}
.bootstrap-datetimepicker-widget table th {
    font-weight: 700;
}
.bootstrap-datetimepicker-widget table td.day:hover,
.bootstrap-datetimepicker-widget table td.hour:hover,
.bootstrap-datetimepicker-widget table td.minute:hover {
    background: #F2F4F7;
    border-radius: 4px;
}
.bootstrap-datetimepicker-widget table td.active,
.bootstrap-datetimepicker-widget table td.active:hover {
    color: #fff;
    background: #337AB7;
    border-radius: 4px;
}
.bootstrap-datetimepicker-widget table td.old,
.bootstrap-datetimepicker-widget table td.new {
    color: #B0B7C3;
}
.bootstrap-datetimepicker-widget .picker-switch {
    text-align: center;
}
.bootstrap-datetimepicker-widget .picker-switch table {
    width: 100%;
    margin: 0;
}
.bootstrap-datetimepicker-widget .picker-switch table td {
    height: 42px;
    line-height: 42px;
}
.bootstrap-datetimepicker-widget a[data-action] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    color: #666666;
    border-radius: 4px;
    text-decoration: none;
}
.bootstrap-datetimepicker-widget a[data-action]:hover {
    background: #F2F4F7;
}
.bootstrap-datetimepicker-widget a[data-action] span {
    display: inline-block;
    color: #666666;
    font-size: 14px;
    line-height: 1;
}
.bootstrap-datetimepicker-widget .glyphicon:before {
    font-family: Arial, sans-serif;
    font-weight: 700;
}
.bootstrap-datetimepicker-widget .glyphicon-chevron-left:before {
    content: "<";
}
.bootstrap-datetimepicker-widget .glyphicon-chevron-right:before {
    content: ">";
}
.bootstrap-datetimepicker-widget .glyphicon-chevron-up:before {
    content: "^";
}
.bootstrap-datetimepicker-widget .glyphicon-chevron-down:before {
    content: "v";
}
.bootstrap-datetimepicker-widget .glyphicon-time:before {
    content: "T";
}
.bootstrap-datetimepicker-widget .glyphicon-calendar:before,
.bootstrap-datetimepicker-widget .glyphicon-screenshot:before {
    content: "D";
}
.bootstrap-datetimepicker-widget .glyphicon-trash:before {
    content: "C";
}
.bootstrap-datetimepicker-widget .glyphicon-remove:before {
    content: "X";
}
.bootstrap-datetimepicker-widget .picker-switch a[data-action="togglePicker"] {
    background: transparent;
}
.bootstrap-datetimepicker-widget .timepicker {
    padding: 8px 0;
}
.bootstrap-datetimepicker-widget .timepicker-picker table td {
    height: 38px;
    line-height: 38px;
}
.bootstrap-datetimepicker-widget .timepicker-hour,
.bootstrap-datetimepicker-widget .timepicker-minute {
    display: inline-block;
    min-width: 40px;
    color: #666666;
    font-size: 18px;
    font-weight: 700;
}
.user-query-btn {
    width: 82px;
    height: 38px;
    color: #2F8CFF;
    background: #fff;
    border: 1px solid #2F8CFF;
    border-radius: 4px;
    font-size: 16px;
    cursor: pointer;
}
.user-notice-box {
    padding: 14px 12px;
    color: #C7863E;
    background: #FFFCEF;
    border: 1px solid #F5DBB8;
    border-radius: 4px;
    font-size: 16px;
    line-height: 28px;
    box-sizing: border-box;
}
.user-data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 16px;
    color: #333;
}
.user-data-table th {
    height: 44px;
    color: #999;
    background: #F6F6F6;
    font-weight: 400;
    text-align: left;
    padding: 0 4px;
    white-space: nowrap;
}
.user-data-table td {
    height: 44px;
    border-bottom: 1px solid #E6E6E6;
    padding: 0 4px;
    white-space: nowrap;
}
.purchase-table-scroll,
.bill-table-scroll,
.withdraw-record-table-scroll {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
}
.purchase-table-scroll .user-data-table {
    min-width: 1280px;
}
.bill-table-scroll .user-data-table {
    min-width: 1080px;
}
.withdraw-record-table-scroll .user-data-table {
    min-width: 1120px;
}
.purchase-table-scroll::-webkit-scrollbar,
.bill-table-scroll::-webkit-scrollbar,
.withdraw-record-table-scroll::-webkit-scrollbar {
    height: 8px;
}
.purchase-table-scroll::-webkit-scrollbar-thumb,
.bill-table-scroll::-webkit-scrollbar-thumb,
.withdraw-record-table-scroll::-webkit-scrollbar-thumb {
    background: #C9CED8;
    border-radius: 4px;
}
.purchase-table-scroll::-webkit-scrollbar-track,
.bill-table-scroll::-webkit-scrollbar-track,
.withdraw-record-table-scroll::-webkit-scrollbar-track {
    background: #F1F3F6;
    border-radius: 4px;
}
.user-row-gray {
    background: #F5F5F5;
}
.user-green-text {
    color: #00A870;
}
.user-red-text {
    color: #FF3355;
}
.user-orange-text {
    color: #D08B03;
}
.user-blue-text {
    color: #2F8CFF;
}
.user-table-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 30px;
    padding: 0 12px;
    color: #2F8CFF;
    background: #EAF4FF;
    border: 1px solid #BBD8FF;
    border-radius: 4px;
    text-decoration: none;
    box-sizing: border-box;
}
.user-table-action.gray {
    color: #666;
    background: #fff;
    border-color: #D7D7D7;
}
.user-bottom-line {
    height: 1px;
    background: #E0E3EA;
}
.user-total-text {
    margin-top: 20px;
    color: #999;
    font-size: 18px;
}
.user-tip-red {
    display: inline-block;
    padding: 12px;
    color: #F85E5E;
    background: #FFF5F5;
    border: 1px solid #FFCACA;
    border-radius: 6px;
    font-size: 16px;
    line-height: 26px;
}
.invite-grid {
    display: grid;
    grid-template-columns: 400px 1fr;
    gap: 60px;
    margin-top: 20px;
}
.invite-panel {
    background: #F5F5F5;
    padding: 22px 20px;
    box-sizing: border-box;
}
.invite-money {
    font-size: 28px;
    line-height: 40px;
    font-weight: 700;
    color: #333;
}
.invite-usdt {
    color: #999;
    font-size: 16px;
    float: right;
    margin-top: 10px;
}
.invite-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 32px;
    padding: 0 16px;
    margin-right: 10px;
    color: #333;
    border: 1px solid #D7D7D7;
    border-radius: 4px;
    background: #fff;
    text-decoration: none;
    font-size: 16px;
}
.invite-btn.primary {
    color: #2F8CFF;
    border-color: #2F8CFF;
}
.invite-copy {
    margin-left: 8px;
    color: #2F8CFF;
    text-decoration: none;
}
.invite-scroll-note {
    text-align: right;
    color: #F85E5E;
    font-size: 16px;
    margin-top: 18px;
}
.invite-table-scroll {
    max-height: 230px;
    overflow-y: auto;
    overflow-x: hidden;
}
.invite-table-scroll .user-data-table th {
    position: sticky;
    top: 0;
    z-index: 1;
}
.invite-detail-main {
    padding: 32px 30px 20px;
}
.invite-detail-breadcrumb {
    height: 58px;
    color: #999;
    font-size: 16px;
    line-height: 36px;
    border-bottom: 1px solid #E0E3EA;
}
.invite-detail-breadcrumb a {
    color: #999;
    text-decoration: none;
}
.invite-detail-breadcrumb span {
    margin: 0 10px;
}
.invite-detail-breadcrumb strong {
    color: #333;
    font-weight: 700;
}
.invite-detail-table th,
.invite-detail-table td {
    padding: 0 12px;
}
.invite-detail-bottom {
    margin-top: 300px;
}
.invite-type-icon {
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-right: 14px;
    border-radius: 3px;
    vertical-align: -3px;
}
.invite-type-icon.orange {
    background: #D08B03;
}
.invite-type-icon.blue {
    background: #3D97F5;
}
.invite-type-icon.green {
    background: #00A870;
}
.invite-avatar-dot {
    display: inline-block;
    width: 24px;
    height: 24px;
    margin-right: 12px;
    border-radius: 50%;
    background: linear-gradient(135deg, #D7CEFF 0%, #FFE1E7 100%);
    vertical-align: -6px;
}
.invite-transfer-mask {
    display: none;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 9990;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.3);
}
.invite-transfer-mask.show {
    display: block;
}
.invite-transfer-modal {
    display: none;
    position: fixed;
    left: 50%;
    top: 50%;
    z-index: 9991;
    width: 720px;
    min-height: 400px;
    transform: translate(-50%, -50%);
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.16);
    overflow: hidden;
}
.invite-transfer-modal.show {
    display: block;
}
.invite-transfer-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 64px;
    padding: 0 30px;
    background: #F5F5F5;
    box-sizing: border-box;
}
.invite-transfer-title {
    color: #333;
    font-size: 22px;
    line-height: 32px;
    font-weight: 700;
}
.invite-transfer-close {
    width: 32px;
    height: 32px;
    padding: 0;
    color: #333;
    background: transparent;
    border: none;
    font-size: 34px;
    line-height: 30px;
    cursor: pointer;
}
.invite-transfer-body {
    padding: 32px 45px 54px;
    box-sizing: border-box;
}
.invite-transfer-label {
    color: #333;
    font-size: 16px;
    line-height: 24px;
    margin-bottom: 14px;
}
.invite-transfer-input {
    width: 100%;
    height: 42px;
    padding: 0 14px;
    color: #333;
    border: 1px solid #DDE2EA;
    border-radius: 4px;
    outline: none;
    font-size: 16px;
    box-sizing: border-box;
}
.invite-transfer-input::placeholder {
    color: #999;
}
.invite-transfer-balance {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 14px;
    color: #333;
    font-size: 16px;
    line-height: 24px;
}
.invite-transfer-balance strong {
    font-weight: 700;
}
.invite-transfer-all {
    color: #2F8CFF;
    text-decoration: none;
}
.invite-transfer-submit {
    width: 100%;
    height: 48px;
    margin-top: 40px;
    color: #fff;
    background: #3D97F5;
    border: none;
    border-radius: 4px;
    font-size: 18px;
    cursor: pointer;
}
.withdraw-page-form {
    margin-top: 22px;
}
.withdraw-form-row {
    display: flex;
    align-items: flex-start;
    margin-bottom: 18px;
}
.withdraw-form-row label {
    width: 100%;
    display: block;
    margin-bottom: 12px;
    color: #333;
    font-size: 16px;
}
.withdraw-row-main {
    width: 630px;
}
.withdraw-input {
    width: 630px;
    height: 42px;
    padding: 0 14px;
    color: #333;
    border: 1px solid #DDE2EA;
    border-radius: 4px;
    outline: none;
    font-size: 16px;
    box-sizing: border-box;
}
.withdraw-form-row {
    flex-wrap: wrap;
}
.withdraw-side-tip {
    margin-left: 35px;
    color: #F85E5E;
    font-size: 16px;
    line-height: 26px;
}
.withdraw-balance {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 12px;
    color: #333;
    font-size: 16px;
}
.withdraw-balance a,
.withdraw-code-row a {
    color: #2F8CFF;
    text-decoration: none;
}
.withdraw-code-row {
    display: flex;
    align-items: center;
    gap: 20px;
}
.withdraw-code-row .withdraw-input {
    flex: 1;
}
.withdraw-notice {
    width: 630px;
    margin-top: 10px;
    padding: 14px 12px;
    color: #666;
    background: #F5F5F5;
    border-radius: 4px;
    font-size: 14px;
    line-height: 24px;
    box-sizing: border-box;
}
.withdraw-submit {
    width: 120px;
    height: 48px;
    margin-top: 36px;
    color: #fff;
    background: #3D97F5;
    border: none;
    border-radius: 4px;
    font-size: 18px;
    cursor: pointer;
}
.withdraw-chain-row td {
    height: auto;
    padding: 12px;
    color: #666;
    background: #F5F5F5;
    line-height: 30px;
}
.withdraw-chain-row a {
    /*color: inherit;*/
    /*text-decoration: none;*/
}
.withdraw-chain-row a:hover,
.withdraw-chain-row a:focus,
.withdraw-chain-row a:visited {
    color: blue;
    /*text-decoration: none;*/
}
.api-token-row {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-top: 10px;
}
.api-switch-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 640px;
    max-width: 100%;
    margin-top: 24px;
    padding: 16px 18px;
    background: #F8F8F8;
    border: 1px solid #E0E3EA;
    border-radius: 4px;
    box-sizing: border-box;
}
.api-switch-copy strong {
    display: block;
    color: #333;
    font-size: 18px;
    line-height: 26px;
}
.api-switch-copy span {
    display: block;
    margin-top: 4px;
    color: #666;
    font-size: 14px;
    line-height: 22px;
}
.api-switch {
    position: relative;
    display: block;
    width: 54px;
    height: 30px;
    flex-shrink: 0;
}
.api-switch input {
    display: none;
}
.api-switch span {
    position: absolute;
    inset: 0;
    background: #C7CED9;
    border-radius: 15px;
    transition: background .2s ease;
    cursor: pointer;
}
.api-switch span:before {
    content: "";
    position: absolute;
    left: 3px;
    top: 3px;
    width: 24px;
    height: 24px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .18);
    transition: transform .2s ease;
}
.api-switch input:checked + span {
    background: #3D97F5;
}
.api-switch input:checked + span:before {
    transform: translateX(24px);
}
.api-token-input {
    width: 480px;
    height: 40px;
    padding: 0 12px;
    color: #333;
    border: 1px solid #E0E3EA;
    border-radius: 4px;
    background: #F0F0F0;
    font-size: 16px;
    box-sizing: border-box;
}
.api-btn {
    height: 40px;
    padding: 0 18px;
    color: #fff;
    background: #3D97F5;
    border: none;
    border-radius: 4px;
    font-size: 16px;
    cursor: pointer;
}
.api-ip-box {
    width: 480px;
    height: 140px;
    margin-top: 10px;
    padding: 12px;
    border: 1px solid #E0E3EA;
    border-radius: 4px;
    font-size: 16px;
    line-height: 28px;
    box-sizing: border-box;
}
.api-panel {
    display: none;
}
.api-panel.active {
    display: block;
}
.api-set-ip {
    min-width: 120px;
}
.api-doc-layout {
    display: flex;
    min-height: 860px;
    margin-top: 20px;
}
.api-doc-menu {
    width: 160px;
    border-right: 1px solid #E0E3EA;
    box-sizing: border-box;
}
.api-doc-menu-item {
    display: flex;
    align-items: center;
    height: 40px;
    padding: 0 16px;
    color: #333;
    font-size: 16px;
    text-decoration: none;
    box-sizing: border-box;
    cursor: pointer;
}
.api-doc-menu-item:hover,
.api-doc-menu-item.active {
    color: #2F8CFF;
    background: #EAF4FF;
    text-decoration: none;
}
.api-doc-content {
    flex: 1;
    min-width: 0;
    padding: 0 30px;
    color: #333;
    font-size: 16px;
    line-height: 32px;
    box-sizing: border-box;
}
.api-doc-title {
    color: #333;
    font-size: 22px;
    line-height: 36px;
    font-weight: 700;
}
.api-doc-content p {
    margin: 18px 0 0;
}
.api-doc-list {
    margin: 16px 0 0;
    padding-left: 22px;
}
.api-doc-list li {
    margin-top: 8px;
}
.api-open-doc {
    min-height: 620px;
    padding-left: 30px;
}
.api-doc-section {
    display: none;
}
.api-doc-section.active {
    display: block;
}
.api-open-doc code {
    padding: 2px 6px;
    color: #2F8CFF;
    background: #EAF4FF;
    border-radius: 3px;
    font-size: 14px;
}
.api-doc-example {
    margin: 12px 0 0;
    padding: 14px 16px;
    color: #243044;
    background: #F7FAFE;
    border: 1px solid #DDE8F5;
    border-radius: 4px;
    font-size: 13px;
    line-height: 22px;
    white-space: pre-wrap;
    word-break: break-all;
}
.api-doc-subtitle {
    margin-top: 18px;
    color: #333;
    font-size: 18px;
    line-height: 28px;
    font-weight: 700;
}
.api-doc-table {
    width: 100%;
    margin-top: 12px;
    border-collapse: collapse;
    table-layout: fixed;
    color: #333;
    font-size: 14px;
    line-height: 22px;
}
.api-doc-table th,
.api-doc-table td {
    padding: 10px 12px;
    border: 1px solid #DDE2EA;
    text-align: left;
    vertical-align: top;
    word-break: break-all;
}
.api-doc-table th {
    background: #F8F8F8;
    font-weight: 700;
}

.changepwd-main {
    padding: 32px 30px 20px;
}
.changepwd-breadcrumb {
    height: 58px;
    line-height: 36px;
    border-bottom: 1px solid #E0E3EA;
}
.changepwd-form {
    width: 350px;
    margin-top: 25px;
}
.changepwd-field {
    min-height: 108px;
}
.changepwd-field label {
    display: block;
    color: #333;
    font-size: 16px;
    line-height: 24px;
    margin-bottom: 12px;
    font-weight: 700;
}
.changepwd-input-wrap {
    position: relative;
    width: 350px;
}
.changepwd-input-wrap input {
    width: 100%;
    height: 40px;
    padding: 0 46px 0 12px;
    color: #333;
    border: 1px solid #E0E3EA;
    border-radius: 4px;
    outline: none;
    font-size: 16px;
    box-sizing: border-box;
}
.changepwd-input-wrap input::placeholder {
    color: #999;
}
.changepwd-input-wrap input:focus {
    border-color: #99C8FF;
}
.changepwd-toggle {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    cursor: pointer;
}
.changepwd-msg {
    display: block;
    height: 24px;
    color: #F85E5E;
    font-size: 16px;
    line-height: 24px;
    margin-top: 4px;
}
.changepwd-input-wrap.has-error input,
.changepwd-field.has-error input,
.changepwd-input-wrap input.is-invalid {
    border-color: #F85E5E;
}
.changepwd-submit {
    width: 120px;
    height: 40px;
    color: #fff;
    background: #3D97F5;
    border: none;
    border-radius: 4px;
    font-size: 16px;
    cursor: pointer;
}

.purchase-drawer-mask {
    display: none;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 9990;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.3);
}
.purchase-drawer-mask.show {
    display: block;
}
.purchase-drawer {
    position: fixed;
    right: -560px;
    top: 80px;
    z-index: 9991;
    width: 560px;
    height: calc(100vh - 80px);
    padding: 34px 30px;
    background: #fff;
    box-sizing: border-box;
    transition: right 0.24s ease;
    overflow-y: auto;
}
.purchase-drawer.show {
    right: 0;
}
.purchase-drawer-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}
.purchase-drawer-title {
    color: #333;
    font-size: 22px;
    line-height: 30px;
    font-weight: 700;
}
.purchase-drawer-order {
    margin-top: 14px;
    color: #666;
    font-size: 16px;
    line-height: 24px;
}
.purchase-drawer-close {
    width: 30px;
    height: 30px;
    padding: 0;
    color: #333;
    background: transparent;
    border: none;
    font-size: 34px;
    line-height: 28px;
    cursor: pointer;
}
.purchase-drawer-card {
    margin-top: 22px;
    padding: 20px;
    background: #F8F8F8;
    border-radius: 2px;
    box-sizing: border-box;
}
.purchase-card-title {
    margin-bottom: 20px;
    color: #333;
    font-size: 18px;
    line-height: 26px;
    font-weight: 700;
}
.purchase-status-row,
.purchase-info-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #333;
    font-size: 16px;
    line-height: 32px;
}
.purchase-status-tag {
    min-width: 58px;
    height: 24px;
    padding: 0 10px;
    color: #D08B03;
    background: #FFF1CE;
    border-radius: 12px;
    font-size: 14px;
    line-height: 24px;
    text-align: center;
    box-sizing: border-box;
}
.purchase-pay-tip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 20px;
    padding: 12px 14px;
    background: #FFFCEF;
    border: 1px solid #F5DBB8;
    border-radius: 4px;
    box-sizing: border-box;
}
.purchase-pay-title {
    color: #C7863E;
    font-size: 16px;
    line-height: 24px;
}
.purchase-pay-desc {
    color: #C7863E;
    font-size: 14px;
    line-height: 22px;
}
.purchase-pay-btn {
    width: 85px;
    height: 32px;
    color: #fff;
    background: #3D97F5;
    border: none;
    border-radius: 4px;
    font-size: 16px;
    cursor: pointer;
}
.purchase-red {
    color: #FF3355;
    font-weight: 700;
}
.purchase-address-line {
    color: #333;
    font-size: 16px;
    line-height: 32px;
}

.buy-container {
    min-height: calc(100vh - 140px);
    margin: 0 auto;
    padding: 34px 15%;
    box-sizing: border-box;
}
.buy-breadcrumb {
    display: flex;
    align-items: center;
    gap: 18px;
    color: #999;
    font-size: 16px;
    line-height: 32px;
}
.buy-breadcrumb a {
    color: #999;
    text-decoration: none;
}
.buy-breadcrumb a:first-child {
    color: #ff6b86;
}
.buy-breadcrumb strong {
    color: #333;
}
.buy-breadcrumb em {
    color: #c9c9c9;
    font-style: normal;
}
.buy-main {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 68px;
    margin-top: 26px;
}
.buy-gallery {
    position: relative;
    height: 500px;
    border-radius: 18px;
    background: #202938;
}
.buy-sale-tag {
    position: absolute;
    left: 0;
    top: 0;
    height: 35px;
    padding: 0 16px;
    color: #fff;
    font-size: 18px;
    line-height: 35px;
    border-radius: 8px 0 6px 0;
    background: #e63a55;
}
.buy-card-preview {
    position: absolute;
    left: 50%;
    top: 112px;
    width: 360px;
    height: 240px;
    transform: translateX(-50%);
    overflow: hidden;
}
.buy-carousel-track {
    display: flex;
    width: 100%;
    height: 100%;
    transition: transform 0.45s ease;
}
.buy-carousel-img {
    flex: 0 0 100%;
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.buy-arrow {
    position: absolute;
    top: 45%;
    width: 64px;
    height: 64px;
    transform: translateY(-50%);
    color: #fff;
    font-size: 52px;
    line-height: 58px;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.16);
}
.buy-arrow.left {
    left: 40px;
}
.buy-arrow.right {
    right: 40px;
}
.buy-img-tip {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 86px;
    color: #f26b81;
    font-size: 16px;
    text-align: center;
}
.buy-dots {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 34px;
    text-align: center;
}
.buy-dots span {
    display: inline-block;
    width: 12px;
    height: 12px;
    margin: 0 7px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.18);
}
.buy-dots .active {
    background: #fff;
}
.buy-info {
    padding-top: 5px;
}
.buy-info h1 {
    margin: 0;
    color: #000;
    font-size: 36px;
    line-height: 54px;
}
.buy-price {
    margin-top: 22px;
    color: #000;
    font-size: 24px;
    font-weight: 700;
}
.buy-desc {
    margin-top: 24px;
    color: #333;
    font-size: 20px;
    line-height: 36px;
}
.buy-meta-row {
    display: flex;
    align-items: center;
    gap: 22px;
    margin-top: 26px;
    color: #333;
    font-size: 18px;
}
.buy-meta-row .green {
    color: #05ad3c;
    font-weight: 400;
}
.buy-qty {
    display: flex;
    height: 48px;
    border: 1px solid #333;
}
.buy-qty button,
.buy-qty input {
    width: 48px;
    height: 46px;
    color: #000;
    font-size: 18px;
    text-align: center;
    border: 0;
    background: #fff;
    outline: none;
}
.buy-qty input {
    width: 80px;
    border-left: 1px solid #333;
    border-right: 1px solid #333;
}
.buy-total-row {
    display: flex;
    align-items: baseline;
    gap: 22px;
    margin-top: 24px;
    color: #333;
    font-size: 18px;
}
.buy-total-row del {
    color: #999;
    font-size: 18px;
}
.buy-total-row strong {
    color: #df384c;
    font-size: 24px;
}
.buy-level-tip {
    margin-top: 8px;
    color: #333;
    font-size: 18px;
}
.buy-level-tip a {
    color: #2f8cff;
    text-decoration: none;
}
.buy-submit {
    width: 100%;
    height: 64px;
    margin-top: 24px;
    color: #fff;
    font-size: 24px;
    border: 0;
    border-radius: 18px;
    background: #e53950;
}
.buy-line {
    height: 1px;
    margin-top: 68px;
    background: #cfd5df;
}
.buy-description {
    padding-top: 38px;
    color: #333;
}
.buy-description h2 {
    margin: 0 0 30px;
    color: #000;
    font-size: 30px;
}
.buy-description p {
    margin: 0 0 14px;
    font-size: 20px;
    line-height: 28px;
}

.checkout-bg {
    background: #f5f5f5;
}
.checkout-container {
    min-height: calc(100vh - 140px);
    margin: 0 auto;
    padding: 34px 15%;
    box-sizing: border-box;
}
.checkout-breadcrumb {
    display: flex;
    align-items: center;
    gap: 18px;
    color: #999;
    font-size: 16px;
    line-height: 32px;
}
.checkout-breadcrumb a {
    color: #999;
    text-decoration: none;
}
.checkout-breadcrumb strong {
    color: #333;
}
.checkout-breadcrumb em {
    color: #c9c9c9;
    font-style: normal;
}
.checkout-title {
    margin: 24px 0 22px;
    color: #000;
    font-size: 30px;
    line-height: 42px;
}
.checkout-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
}
.checkout-card {
    min-height: 820px;
    padding: 30px;
    background: #fff;
    border-radius: 4px;
    box-sizing: border-box;
}
.checkout-card h2 {
    margin: 0 0 20px;
    color: #000;
    font-size: 22px;
}
.checkout-section-title {
    display: flex;
    align-items: center;
    gap: 52px;
    color: #111;
    font-size: 18px;
}
.checkout-section-title em,
.checkout-label em {
    color: #ff6b7f;
    font-style: normal;
}
.checkout-label {
    display: block;
    margin-top: 16px;
    color: #333;
    font-size: 14px;
    line-height: 26px;
}
.checkout-label b {
    color: #df384c;
}
.checkout-label em {
    margin-left: 44px;
}
.checkout-input,
.checkout-textarea {
    display: block;
    width: 100%;
    margin-top: 6px;
    padding: 0 12px;
    color: #333;
    font-size: 16px;
    border: 1px solid #dcdfe6;
    border-radius: 4px;
    outline: none;
    box-sizing: border-box;
}
.checkout-input {
    height: 48px;
}
.checkout-textarea {
    height: 94px;
    padding-top: 12px;
    resize: none;
}
.checkout-input + .checkout-input {
    margin-top: 10px;
}
.checkout-address-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 8px;
}
.checkout-address-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    height: 48px;
    color: #333333;
    background: #F4F6FA;
    border-radius: 4px;
    font-size: 16px;
    text-decoration: none;
}
.checkout-address-btn.primary {
    color: #ffffff;
    background: #2F8CFF;
}
.checkout-address-btn > span:first-child {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border: 1px solid currentColor;
    border-radius: 2px;
    line-height: 18px;
    box-sizing: border-box;
}
.checkout-address-grid {
    position: relative;
    width: 18px;
    height: 18px;
    border: 0 !important;
    border-radius: 0 !important;
    background:
        linear-gradient(#999999, #999999) 0 0 / 6px 6px no-repeat,
        linear-gradient(#999999, #999999) 12px 0 / 6px 6px no-repeat,
        linear-gradient(#999999, #999999) 0 12px / 6px 6px no-repeat,
        linear-gradient(#999999, #999999) 12px 12px / 6px 6px no-repeat;
}
.checkout-address-current {
    margin-top: 12px;
    padding: 12px;
    color: #666666;
    background: #F8F8F8;
    border-radius: 4px;
    font-size: 14px;
    line-height: 22px;
}
.checkout-address-current strong,
.checkout-address-current span {
    display: block;
}
.checkout-address-current strong {
    color: #333333;
}
.checkout-area-picker {
    position: relative;
}
.checkout-area-input {
    cursor: pointer;
    background: #fff;
}
.checkout-area-panel {
    display: none;
    position: absolute;
    left: 0;
    top: 56px;
    z-index: 20;
    width: 100%;
    padding: 14px;
    border: 1px solid #dcdfe6;
    border-radius: 6px;
    background: #fff;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    box-sizing: border-box;
}
.checkout-area-panel.show {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}
.checkout-area-title {
    margin-bottom: 8px;
    color: #333;
    font-size: 14px;
    font-weight: 700;
}
.checkout-area-list {
    height: 220px;
    overflow-y: auto;
    border: 1px solid #edf0f5;
    border-radius: 4px;
}
.checkout-area-list button {
    display: block;
    width: 100%;
    min-height: 34px;
    padding: 7px 10px;
    color: #333;
    font-size: 14px;
    text-align: left;
    border: 0;
    background: #fff;
    cursor: pointer;
}
.checkout-area-list button:hover,
.checkout-area-list button.active {
    color: #df384c;
    background: #fff1f3;
}
.checkout-area-empty {
    display: block;
    padding: 12px;
    color: #999;
    font-size: 14px;
}
.checkout-delivery {
    margin-top: 12px;
    color: #333;
    font-size: 14px;
}
.checkout-pay-title {
    margin-top: 38px !important;
}
.checkout-pay {
    display: flex;
    align-items: center;
    height: 56px;
    margin-top: 10px;
    padding: 0 14px;
    border: 1px solid #dcdfe6;
    border-radius: 4px;
    box-sizing: border-box;
    cursor: pointer;
}
.checkout-pay.active {
    border-color: #66a8ff;
    background: #eaf4ff;
}
.checkout-pay input {
    margin-right: 18px;
}
.checkout-pay-icon {
    width: 30px;
    height: 30px;
    margin-right: 14px;
    color: #fff;
    line-height: 30px;
    text-align: center;
    border-radius: 50%;
    font-weight: 700;
}
.checkout-balance-extra {
    margin-left: auto;
    color: #333333;
    font-size: 16px;
}
.checkout-balance-extra a {
    margin-left: 16px;
    color: #2F8CFF;
    text-decoration: none;
}

.checkout-product {
    display: flex;
    gap: 20px;
    margin-top: 24px;
}
.checkout-product-img {
    width: 120px;
    height: 120px;
    padding: 12px;
    background: #202938;
    border-radius: 4px;
    box-sizing: border-box;
}
.checkout-product-img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.checkout-product-main {
    flex: 1;
    padding-top: 4px;
}
.checkout-product-name {
    color: #111;
    font-size: 20px;
    line-height: 32px;
}
.checkout-product-meta {
    display: flex;
    justify-content: space-between;
    margin-top: 62px;
    color: #111;
    font-size: 18px;
}
.checkout-product-meta b {
    font-size: 20px;
}
.checkout-level-tip {
    margin-top: 30px;
    padding: 14px 18px;
    color: #333;
    font-size: 18px;
    text-align: center;
    background: #f5f5f5;
}
.checkout-level-tip a {
    color: #2f8cff;
    text-decoration: none;
}
.checkout-money-row {
    display: flex;
    justify-content: space-between;
    margin-top: 24px;
    color: #333;
    font-size: 18px;
}
.checkout-money-row del {
    margin-right: 16px;
    color: #999;
}
.checkout-money-row strong {
    color: #333;
    font-size: 20px;
}
.checkout-line {
    height: 1px;
    margin-top: 24px;
    background: #d8d8d8;
}
.checkout-total {
    display: flex;
    justify-content: space-between;
    margin-top: 32px;
    color: #111;
    font-size: 18px;
}
.checkout-total strong {
    color: #df384c;
    font-size: 26px;
}
.checkout-agree {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 48px;
    color: #333;
    font-size: 16px;
}
.checkout-agree a {
    color: #2f8cff;
    text-decoration: none;
}
.checkout-submit {
    width: 100%;
    height: 64px;
    margin-top: 24px;
    color: #fff;
    font-size: 20px;
    font-weight: 700;
    border: 0;
    border-radius: 4px;
    background: #df384c;
}
.checkout-warning {
    margin-top: 24px;
    padding: 12px;
    color: #d28b3b;
    font-size: 16px;
    border: 1px solid #f2d2a6;
    border-radius: 4px;
    background: #fff9ec;
}
.checkout-policy-mask {
    display: none;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 1000;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.82);
}
.checkout-policy-mask.show {
    display: block;
}
.checkout-policy-modal {
    display: none;
    position: fixed;
    left: 50%;
    top: 50%;
    z-index: 1001;
    width: 75%;
    max-width: 1440px;
    height: 70vh;
    padding: 40px;
    background: #fff;
    transform: translate(-50%, -50%);
    box-sizing: border-box;
}
.checkout-policy-modal.show {
    display: block;
}
.checkout-policy-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 48px;
    padding-bottom: 14px;
    border-bottom: 1px solid #c9d0dc;
}
.checkout-policy-head strong {
    color: #111;
    font-size: 22px;
}
.checkout-policy-close {
    color: #333;
    font-size: 42px;
    line-height: 42px;
    border: 0;
    background: transparent;
    cursor: pointer;
}
.checkout-policy-body {
    height: calc(70vh - 170px);
    overflow-y: auto;
    padding: 22px 20px 30px 0;
    color: #333;
    font-size: 16px;
    line-height: 34px;
}
.checkout-policy-body::-webkit-scrollbar {
    width: 14px;
}
.checkout-policy-body::-webkit-scrollbar-track {
    background: #ededed;
}
.checkout-policy-body::-webkit-scrollbar-thumb {
    border-radius: 8px;
    background: #b8b8b8;
}
.checkout-policy-body h2 {
    margin: 0 0 18px;
    color: #111;
    font-size: 30px;
    line-height: 42px;
}
.checkout-policy-body h3 {
    margin: 22px 0 12px;
    color: #111;
    font-size: 22px;
    line-height: 32px;
}
.checkout-policy-body p {
    margin: 0 0 8px;
}
.checkout-policy-body ul {
    margin: 0;
    padding-left: 24px;
}
.checkout-policy-body li {
    margin-bottom: 8px;
}

.download-page {
    background: #fff;
}
.download-container {
    min-height: calc(100vh - 140px);
    margin: 0 auto;
    padding: 34px 15%;
    box-sizing: border-box;
}
.download-breadcrumb {
    display: flex;
    align-items: center;
    gap: 18px;
    color: #999;
    font-size: 16px;
    line-height: 32px;
}
.download-breadcrumb a {
    color: #999;
    text-decoration: none;
}
.download-breadcrumb strong {
    color: #333;
    font-weight: 400;
}
.download-breadcrumb em {
    color: #c9c9c9;
    font-style: normal;
}
.download-line {
    height: 1px;
    margin-top: 26px;
    background: #bfc7d3;
}
.download-section {
    padding-top: 30px;
}
.download-section h1 {
    margin: 0;
    color: #000;
    font-size: 30px;
    line-height: 42px;
}
.download-desc {
    margin: 16px 0 70px;
    color: #333;
    font-size: 20px;
    line-height: 32px;
}
.download-section h2 {
    margin: 0 0 28px;
    color: #000;
    font-size: 22px;
    line-height: 32px;
}
.download-android-row {
    display: flex;
    align-items: flex-start;
    gap: 20px;
}
.download-pill {
    display: flex;
    position: relative;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 320px;
    height: 64px;
    padding: 0 40px;
    text-decoration: none;
    border-radius: 32px;
    box-sizing: border-box;
}
.download-pill strong {
    color: #fff;
    font-size: 24px;
    line-height: 30px;
}
.download-pill span {
    position: absolute;
    left: 40px;
    top: 66px;
    color: #ff6d7f;
    font-size: 16px;
    line-height: 20px;
}
.download-pill.red {
    background: #e7354f;
}
.download-pill.dark {
    background: #202020;
}
.download-pc-title {
    margin-top: 64px !important;
}
.download-pc-row {
    display: flex;
    align-items: center;
    gap: 34px;
    margin-top: 4px;
}
.download-pc-row a {
    color: #2f80ed;
    font-size: 20px;
    font-weight: 700;
}
.download-pc-row span {
    color: #ff6d7f;
    font-size: 16px;
}
.download-guide-title {
    margin-top: 108px !important;
}
.download-guide-list {
    width: 100%;
}
.download-guide-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 72px;
    color: #333;
    font-size: 22px;
    text-decoration: none;
    border-bottom: 1px dashed #c9d0dc;
}
.download-guide-item span {
    display: flex;
    align-items: center;
    gap: 14px;
}
.download-guide-item i {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #e7354f;
}
.download-guide-item em {
    color: #aeb4bd;
    font-size: 42px;
    font-style: normal;
    line-height: 1;
}
.download-guide-empty {
    padding: 20px 0;
    color: #999999;
    font-size: 16px;
}
.article-detail-container {
    padding-bottom: 120px;
}
.article-detail-breadcrumb strong {
    max-width: 420px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.article-detail-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 400px;
    gap: 80px;
    padding-top: 30px;
}
.article-detail-main h1 {
    margin: 0 0 20px;
    color: #000000;
    font-size: 30px;
    line-height: 42px;
    font-weight: 700;
}
.article-detail-date {
    margin-bottom: 26px;
    color: #999999;
    font-size: 18px;
    line-height: 28px;
}
.download-article-content {
    color: #333333;
    font-size: 20px;
    line-height: 36px;
    word-break: break-word;
}
.download-article-content p {
    margin: 0 0 24px;
}
.download-article-content img {
    max-width: 100%;
    height: auto;
    border-radius: 4px;
}
.article-related-card {
    margin-top: 0;
    padding: 28px 22px 24px;
    border: 1px solid #D4DAE3;
    border-radius: 4px;
    background: #ffffff;
}
.article-related-card h2 {
    margin: 0 0 16px;
    color: #000000;
    font-size: 24px;
    line-height: 34px;
    font-weight: 700;
}
.article-related-item {
    display: block;
    padding: 16px 12px;
    background: #F8F8F8;
    border-radius: 4px;
    color: #333333;
    text-decoration: none;
}
.article-related-item + .article-related-item {
    margin-top: 12px;
}
.article-related-item strong {
    display: block;
    color: #333333;
    font-size: 18px;
    line-height: 26px;
    font-weight: 500;
}
.article-related-item span {
    display: block;
    margin-top: 10px;
    color: #999999;
    font-size: 16px;
    line-height: 22px;
}
.article-related-item:hover {
    text-decoration: none;
}
.package-page {
    background: #ffffff;
}
.package-container {
    min-height: calc(100vh - 140px);
    padding: 78px 15%;
    box-sizing: border-box;
}
.package-list-container {
    padding-top: 34px;
}
.package-breadcrumb {
    display: flex;
    align-items: center;
    gap: 18px;
    color: #999999;
    font-size: 16px;
    line-height: 24px;
}
.package-breadcrumb a {
    color: #999999;
    text-decoration: none;
}
.package-breadcrumb em {
    color: #C9C9C9;
    font-style: normal;
}
.package-breadcrumb strong {
    color: #333333;
    font-weight: 400;
}
.package-list-line {
    height: 1px;
    margin: 28px 0 34px;
    background: #D8DDE6;
}
.package-section + .package-section {
    margin-top: 82px;
}
.package-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 34px;
}
.package-section-head h1 {
    display: inline-block;
    margin: 0;
    color: #111111;
    font-size: 30px;
    line-height: 40px;
}
.package-section-head span {
    margin-left: 16px;
    color: #777777;
    font-size: 18px;
}
.package-section-head > a {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    color: #333333;
    font-size: 18px;
    text-decoration: none;
}
.package-section-head i {
    width: 12px;
    height: 12px;
    border-right: 3px solid #333333;
    border-bottom: 3px solid #333333;
    transform: rotate(-45deg);
    box-sizing: border-box;
}
.package-card-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(320px, 1fr));
    gap: 20px;
}
.package-card-item {
    display: block;
    min-height: 140px;
    padding: 24px 22px 18px;
    background: #F7F7F7;
    border-radius: 4px;
    box-sizing: border-box;
    color: inherit;
    text-decoration: none;
    cursor: pointer;
}
.package-card-item:hover {
    color: inherit;
    text-decoration: none;
}
.package-card-item h2 {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    color: #333333;
    font-size: 20px;
    line-height: 28px;
}
.package-card-item h2 em {
    display: inline-flex;
    align-items: center;
    height: 28px;
    padding: 0 8px;
    color: #ffffff;
    background: #E7354F;
    border-radius: 3px;
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    flex-shrink: 0;
}
.package-card-item p {
    min-height: 24px;
    margin: 14px 0 0;
    color: #333333;
    font-size: 16px;
    line-height: 24px;
}
.package-card-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 16px;
}
.package-card-foot strong {
    color: #E7354F;
    font-size: 18px;
    line-height: 24px;
}
.package-card-foot a,
.package-card-foot span {
    color: #E7354F;
    font-size: 16px;
    text-decoration: none;
}
.package-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 260px;
    color: #999999;
    background: #F7F7F7;
    border-radius: 4px;
    font-size: 16px;
}
.package-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-top: 34px;
}
.package-pagination a,
.package-pagination span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 30px;
    height: 30px;
    padding: 0 8px;
    color: #333333;
    background: #ffffff;
    border: 1px solid #E6E6E6;
    font-size: 16px;
    text-decoration: none;
    box-sizing: border-box;
}
.package-pagination span {
    color: #999999;
    border-color: transparent;
}
.package-pagination a.active {
    color: #E7354F;
    border-color: #E7354F;
}
.package-detail-container {
    padding-top: 34px;
}
.package-detail-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 64px;
}
.package-detail-main h1 {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    color: #111111;
    font-size: 30px;
    line-height: 42px;
}
.package-detail-main h1 em {
    display: inline-flex;
    align-items: center;
    height: 28px;
    padding: 0 8px;
    color: #ffffff;
    background: #E7354F;
    border-radius: 3px;
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    flex-shrink: 0;
}
.package-detail-meta {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-top: 22px;
    color: #999999;
    font-size: 16px;
}
.package-detail-meta i {
    width: 1px;
    height: 18px;
    background: #E1E1E1;
}
.package-detail-meta a {
    color: #E7354F;
    text-decoration: none;
}
.package-detail-content {
    margin-top: 30px;
    color: #333333;
    font-size: 17px;
    line-height: 32px;
}
.package-detail-content p {
    margin: 0 0 22px;
}
.package-detail-content h1,
.package-detail-content h2,
.package-detail-content h3 {
    margin: 34px 0 18px;
    color: #111111;
    font-size: 24px;
    line-height: 34px;
}
.package-detail-content img {
    max-width: 100%;
    margin: 18px 0;
}
.package-detail-side {
    padding: 22px 20px;
    border: 1px solid #E6E6E6;
    border-radius: 4px;
    align-self: start;
}
.package-detail-side h2 {
    margin: 0 0 14px;
    color: #111111;
    font-size: 22px;
    line-height: 30px;
}
.package-side-item {
    display: block;
    padding: 14px;
    background: #F7F7F7;
    color: inherit;
    text-decoration: none;
    cursor: pointer;
}
.package-side-item:hover {
    color: inherit;
    text-decoration: none;
}
.package-side-item + .package-side-item {
    margin-top: 12px;
}
.package-side-item h3 {
    margin: 0;
    color: #333333;
    font-size: 17px;
    line-height: 24px;
}
.package-side-item p {
    margin: 10px 0 0;
    color: #333333;
    font-size: 15px;
    line-height: 22px;
}
.package-side-item div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 10px;
}
.package-side-item strong,
.package-side-item a,
.package-side-item span {
    color: #E7354F;
    font-size: 16px;
    text-decoration: none;
}
.blog-page {
    background: #ffffff;
}
.blog-container {
    min-height: calc(100vh - 140px);
    padding: 70px 12% 88px;
    box-sizing: border-box;
}
.blog-hero {
    text-align: center;
}
.blog-hero h1 {
    margin: 0;
    color: #111111;
    font-size: 30px;
    line-height: 42px;
}
.blog-hero p {
    margin: 14px 0 0;
    color: #777777;
    font-size: 17px;
    line-height: 26px;
}
.blog-category-tabs {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 46px;
}
.blog-category-tabs a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 96px;
    height: 44px;
    padding: 0 24px;
    color: #777777;
    background: #ffffff;
    border: 1px solid #DDE2EA;
    border-radius: 4px;
    font-size: 16px;
    text-decoration: none;
    box-sizing: border-box;
}
.blog-category-tabs a.active {
    color: #E7354F;
    border-color: #E7354F;
}
.blog-card-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(260px, 1fr));
    gap: 18px 24px;
    margin-top: 32px;
}
.blog-card-item {
    display: block;
    padding-bottom: 16px;
    border-bottom: 1px solid #E6E6E6;
    color: inherit;
    text-decoration: none;
    cursor: pointer;
}
.blog-card-item:hover {
    color: inherit;
    text-decoration: none;
}
.blog-card-image {
    display: block;
    width: 100%;
    aspect-ratio: 2.55 / 1;
    background: #D8D8D8;
    overflow: hidden;
}
.blog-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.blog-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    min-height: 26px;
    margin-top: 10px;
}
.blog-tags span {
    display: inline-flex;
    align-items: center;
    height: 24px;
    padding: 0 7px;
    color: #777777;
    border: 1px solid #DDE2EA;
    border-radius: 3px;
    font-size: 13px;
    line-height: 24px;
}
.blog-card-item h2 {
    margin: 10px 0 0;
    color: #333333;
    font-size: 18px;
    line-height: 28px;
}
.blog-card-item h2 a {
    color: inherit;
    text-decoration: none;
}
.blog-card-item:hover h2 {
    color: #E7354F;
}
.blog-date {
    margin-top: 8px;
    color: #999999;
    font-size: 14px;
    line-height: 22px;
}
.blog-card-item p {
    margin: 10px 0 0;
    color: #333333;
    font-size: 15px;
    line-height: 24px;
}
.blog-pagination {
    margin-top: 44px;
}
.blog-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 280px;
    margin-top: 32px;
    color: #999999;
    background: #F7F7F7;
    border-radius: 4px;
    font-size: 16px;
}
.blog-detail-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 28px;
    margin-top: 28px;
}
.blog-detail-main,
.blog-detail-side {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 8px 22px rgba(18, 24, 40, 0.05);
}
.blog-detail-main {
    padding: 30px;
}
.blog-detail-main h1 {
    margin: 0;
    color: #111111;
    font-size: 28px;
    line-height: 40px;
}
.blog-detail-content {
    margin-top: 18px;
    color: #444444;
    font-size: 16px;
    line-height: 30px;
}
.blog-detail-content img {
    max-width: 100%;
    height: auto;
}
.blog-detail-image {
    display: block;
    width: 100%;
    min-height: 260px;
    margin-top: 24px;
    object-fit: cover;
    background: #D9D9D9;
    border-radius: 6px;
}
.blog-detail-side {
    padding: 24px;
}
.blog-detail-side h2 {
    margin: 0 0 16px;
    color: #111111;
    font-size: 20px;
}
.blog-detail-side a {
    display: block;
    margin-bottom: 12px;
    padding: 14px;
    color: inherit;
    background: #F8F8F8;
    border-radius: 6px;
    text-decoration: none;
}
.blog-detail-side strong,
.blog-detail-side span {
    display: block;
}
.blog-detail-side strong {
    color: #333333;
    font-size: 15px;
    line-height: 23px;
}
.blog-detail-side span {
    margin-top: 8px;
    color: #999999;
    font-size: 13px;
}
.float-service-btn {
    position: fixed;
    right: 24px;
    bottom: 36px;
    z-index: 2600;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    padding: 0;
    color: #F06B7B;
    background: transparent;
    border: 0;
    border-radius: 50%;
    box-shadow: none;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    user-select: none;
}
.float-service-btn.is-raised {
    bottom: 82px;
}
.float-service-btn img {
    width: 54px;
    height: 54px;
    pointer-events: none;
    user-select: none;
}
.float-service-btn:hover,
.float-service-btn:focus {
    color: #F06B7B;
    text-decoration: none;
}
.float-back-top {
    position: fixed;
    right: 24px;
    bottom: 36px;
    z-index: 2600;
    display: none;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 50%;
    cursor: pointer;
}
.float-back-top.show {
    display: flex;
}
.float-back-top img {
    width: 54px;
    height: 54px;
    pointer-events: none;
    user-select: none;
}
.h5-commission-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 230px;
    color: #BDBDBD;
    font-size: 13px;
}