@charset "UTF-8";
@font-face {
    /* 给自定义字体取个名字，后面可以用这个名字引用字体 */
    font-family: 'Tomorrow';
    /* 字体文件的路径，这里假设字体文件在当前目录下 */
    src: url("../font/Tomorrow-Bold.ttf");
    /* 可选的字体样式，如 normal 或 italic */
    font-style: normal;
    /* 可选的字体粗细，如 normal 或 bold */
    font-weight: normal;
}

@font-face {
    /* 给自定义字体取个名字，后面可以用这个名字引用字体 */
    font-family: 'Roboto';
    /* 字体文件的路径，这里假设字体文件在当前目录下 */
    src: url("../font/Roboto-Bold.ttf");
    /* 可选的字体样式，如 normal 或 italic */
    font-style: normal;
    /* 可选的字体粗细，如 normal 或 bold */
    font-weight: normal;
}

::-webkit-scrollbar {
    width: 0px;
    background-color: transparent;
}

body {
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
    background-color: #282929;
    color: #ffffff !important;
}

.flex_box_none {
    display: flex;
    /* justify-content: space-between; */
    /* align-items: center; */
}

.nav-detail {
    max-width: 1400px;
    margin: 0 auto;
    padding-top: 160px;
}

/* 基础布局 */
.personal-container {
    max-width: 1400px;
    margin: 0 auto;
    gap: 70px;
    margin-top: 40px;
    margin-bottom: 100px;
}

.side-nav {
    width: 250px;
    background: #1d1d1d;
    border-radius: 8px;
    height: 550px;
}

.nav-list {
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 16px;
}

.nav-item {
    padding: 25px 30px;
    /* margin: 8px 0; */
    /* border-radius: 6px; */
    cursor: pointer;
    transition: all 0.3s;
    border-bottom: 1px solid #FFFFFF33;
}

.nav-item:first-child {
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

.nav-item:last-child {
    border-bottom-right-radius: 10px;
    border-bottom-left-radius: 10px;
    border-bottom: none;
}

.nav-item:hover {
    background: #3A3A3A;
}

.nav-item.active {
    background: linear-gradient(270deg, rgba(234, 101, 25, 0) 0%, rgba(234, 101, 25, 0.8) 100%);
    color: white;
    position: relative;
}

.main-content {
    flex: 1;
    background: #282929;
    border-radius: 8px;
    /* padding: 0 25px; */
}

.content-section {
    display: none;
}

.content-section.active {
    display: block;
}

.logout {
    /* color: #FF4444; */
    /* margin-top: 20px; */
}

.profile-photo {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: #D9D9D9;
}

.part-name {
    font-family: 'Tomorrow';
    font-weight: 700;
    font-size: 34px;
}

.information {
    display: flex;
    align-items: center;
    gap: 20px;
}

.account-level {
    margin-top: 20px;
    font-size: 14px;
    margin-bottom: 10px;
}

.garde-box {
    background: linear-gradient(89.65deg, #FF8742 0.08%, #FF6710 99.46%);
    padding: 20px 75px;
    border-radius: 10px;
    height: 200px;
    box-sizing: border-box;
}

.garde-box .number {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 22px;
    line-height: 120%;
    text-align: center;
    position: relative;
    margin-bottom: 50px;
}

.decoration-item {
    width: 20%;
    transform: translate(-50%, 0);
}

.star_box{
    margin-top:8px;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 1px;
}
.star_box img{
    width:18px;
    height: 18px;
}

.number-item {
    width: 20%;
    transform: translate(-50%, 0);
}

.garde-box .decoration {
    display: flex;
    justify-content: space-between;
    align-items: center;
    line-height: 120%;
    text-align: center;
    position: relative;
    font-size: 14px;
    margin-top: 30px;
}

.decoration-item:nth-child(1), .number-item:nth-child(1) {
    position: absolute;
    left: 2%;
    top: 0px;
}

.decoration-item:nth-child(2), .number-item:nth-child(2) {
    position: absolute;
    left: 25%;
    top: 0px;
}

.decoration-item:nth-child(3), .number-item:nth-child(3) {
    position: absolute;
    left: 50%;
    top: 0px;
}

.decoration-item:nth-child(4), .number-item:nth-child(4) {
    position: absolute;
    left: 75%;
    top: 0px;
}

.decoration-item:nth-child(5), .number-item:nth-child(5) {
    position: absolute;
    left: 98%;
    top: 0px;
}

.progress-bar {
    height: 8px;
    background: #1d1d1d;
    border-radius: 4px;
    margin: 30px auto;
    position: relative;
}

.progress {
    height: 100%;
    background: linear-gradient(97.39deg, #B17F3A 0%, #D0B365 61.8%, #B17F3A 123.59%);
    position: relative;
    border-radius: 4px;
    transition: width 0.5s ease;
}

.current-progress {
    position: absolute;
    right: 0px;
    top: -8px;
    color: #fff;
    padding: 3px 10px;
    border-radius: 60px;
    background: linear-gradient(97.39deg, #B17F3A 0%, #D0B365 61.8%, #B17F3A 123.59%);
    font-weight: bold;
    font-size: 14px;
    border: 1px solid #fff;
}

.line {
    width: 2px;
    height: 100%;
    background: #FFFFFF4D;
}

.line:nth-child(2) {
    position: absolute;
    left: 25%;
    top: 0;
}

.line:nth-child(3) {
    position: absolute;
    left: 50%;
    top: 0;
}

.line:nth-child(4) {
    position: absolute;
    left: 75%;
    top: 0;
}

.introduce-text {
    font-size: 14px;
    margin-top: 30px;
    line-height: 150%;
    width: 80%;
}

.account-Profile {
    margin-top: 75px;
}

.account-Profile-title {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 20px;
    font-family: 'Tomorrow';
}

.profile-form {
    margin-top: 20px;
    /* gap: 30px; */
}

.form-row {
    gap: 30px;
    margin-bottom: 20px;
}

.form-group {
    flex: 1;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    color: #FFFFFFCC;
}

.form-group input,
.form-group select {
    width: 100%;
    padding: 12px;
    background: #3d3d3d;
    border: 1px solid #444;
    border-radius: 6px;
    color: white;
    transition: all 0.3s;
    box-sizing: border-box;
    height: 45px;
}

.form-group select option:checked {
    background: #3d3d3d;
    color: white;
}

.form-group select {
    appearance: none;
    background-image: url("../img/country-select.png");
    background-repeat: no-repeat;
    background-position: right 15px center;
    background-size: 12px;
    padding-right: 35px;
}

.form-group input:focus,
.form-group select:focus {
    border-color: #1d1d1d !important;
    /* box-shadow: 0 0 0 2px #EA651933; */
    background-color: #1d1d1d;
}

@media (max-width: 768px) {
    .form-row {
        flex-direction: column;
        gap: 15px;
    }
}

.submit-btn {
    width: 180px;
    height: 50px;
    background-image: url("../img/faq-active.png");
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.3s;
    margin-top: 20px;
    margin-bottom: 30px;
    font-weight: bold;
    background-color: #2a2a2a;
}

.order-title {
    font-family: 'Tomorrow';
    font-size: 34px;
    font-weight: 700;
    margin-bottom: 30px;
}

.order-select {
    display: flex;
    gap: 30px;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 30px;
}

.order-select select {
    padding: 12px;
    background: #3d3d3d;
    border: 1px solid #444;
    border-radius: 6px;
    color: white;
    transition: all 0.3s;
    box-sizing: border-box;
    height: 45px;
    width: 250px;
    appearance: none;
    background-image: url("../img/country-select.png");
    background-repeat: no-repeat;
    background-position: right 15px center;
    background-size: 12px;
    padding-right: 35px;
}

.order-left {
    gap: 20px;
}

.order-right {
    align-items: center;
    gap: 20px;
}

.sort-by {
    cursor: pointer;
}

.table-heard {
    height: 50px;
    background: linear-gradient(267.71deg, #FF8742 0%, #F25800 100%);
    display: flex;
    align-items: center;
    padding: 0 30px;
    border-radius: 6px;
    font-size: 14px;
    gap: 20px;
}

.table-heard2 {
    height: 50px;
    background: linear-gradient(267.71deg, #FF8742 0%, #F25800 100%);
    display: flex;
    align-items: center;
    /* padding: 0 30px; */
    border-radius: 6px;
    font-size: 14px;
    gap: 20px;
}

.heard1 {
    width: 200px;
}

.heard2 {
    width: 200px;
}

.heard3 {
    width: 10%;
}

.heard4 {
    width: 15%;
}

.heard5 {
    width: 20%;
}

.heard6 {
    width: 20%;
}

.heard7 {
    width: 22%;
    padding-left: 30px;
    box-sizing: border-box;
}

.heard8 {
    width: 12%;
    /* text-align: center; */
}

.heard9 {
    width: 22%;
}

.heard10 {
    width: 22%;
    text-emphasis: none;
}

.heard11 {
    width: 22%;
}

.item7 {
    padding-left: 0;
}

.item11 {
    display: flex;
    gap: 20px;
    align-items: center;
    /* justify-content: center */
}

.table-item {
    font-size: 14px;
    display: flex;
    padding: 20px 30px;
    align-items: center;
    gap: 20px;
    border-bottom: 1px solid #FFFFFF33;
}

.table-item2 {
    font-size: 14px;
    display: flex;
    padding: 20px 0px;
    gap: 20px;
    align-items: center;
    border-bottom: 1px solid #FFFFFF33;
}

.item3 {
    color: #FF6812;
}

.item6 {
    display: flex;
    gap: 20px;
    align-items: center;
    /* justify-content: center */
}

.item7 {
    display: flex;
    gap: 15px;
    /* align-items: center; */
}

.item7 img {
    width: 70px;
    height: 70px;
    border-radius: 6px;
}

.order-item-details {
    width: 72px;
    height: 40px;
    background-image: url("../img/item-details.png");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.item-pay-now {
    width: 90px;
    height: 40px;
    background-image: url("../img/item-pay-now.png");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-weight: 600;
}

.pagination {
    margin: 30px 0;
    gap: 15px;
    justify-content: start;
    align-items: center;
}

.page-numbers {
    gap: 15px;
    display: flex;
}

.page-btn, .prev-btn, .next-btn {
    width: 36px;
    height: 36px;
    /* padding: 8px 12px; */
    background: #2A2A2A;
    /* border: 1px solid #3A3A3A; */
    color: #EA6519;
    border-radius: 4px;
    border: none;
    cursor: pointer;
    background-image: url("../img/prev-img.png");
    /* background-size: 20px; */
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

.page-btn.active {
    background: #EA6519;
    border-color: #EA6519;
    color: #fff;
}

.page-btn:hover:not(.active) {
    background: #555;
}

.prev-btn:disabled, .next-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.table-container {
    margin-bottom: 20px;
}

.back-btn {
    font-size: 22px;
    cursor: pointer;
}

.bay-again {
    width: 112px;
    height: 46px;
    background-image: url("../img/bg112.png");
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.live-chat {
    width: 112px;
    height: 46px;
    background-image: url("../img/active-bg112.png");
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.flex_box_center {
    display: flex;
    align-items: center;
    gap: 15px;
    justify-content: space-between;
}

.flex_box_center_15 {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 15px;
}

.order-details {
    display: none;
}

.order-details-box {
    display: flex;
    gap: 30px;
    justify-content: space-between;
    margin-top: 40px;
}

.order-details-left {
    width: 65%;
}

.order-details-right {
    width: 34%;
}

.left-top, .right-top, .right-bottom {
    background-color: #1d1d1d;
    border-radius: 10px;
    padding: 25px;
    box-sizing: border-box;
    margin-bottom: 20px;
}

.information-item {
    width: 48%;
    padding: 15px 0;
}

.detail-title {
    border-bottom: 1px solid #FFFFFF33;
    padding-bottom: 25px;
}

.left-top-contant {
    padding: 20px 30px;
}

.information-item-label {
    font-size: 14px;
    color: #FFFFFF80;
    margin-bottom: 10px;
}

.left-bottom {
    background-color: #1d1d1d;
    border-radius: 10px;
    padding: 25px;
    box-sizing: border-box;
}

.screenshot-img {
    width: 120px;
    height: 120px;
    border-radius: 10px;
}

.order-status {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 10px;
}

.order-hint {
    font-size: 14px;
}

.offers-item-text {
    font-size: 14px;
    color: #FFFFFFB2;
    margin-top: 10px;
}

.offers-item-name {
    font-size: 14px;
}

.agree {
    color: #00B67A;
    margin-bottom: 10px;
}

.item-pay-now2 {
    width: 180px;
    height: 40px;
    background-image: url("../img/buy-new.png");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-weight: 600;
}

.refuse {
    color: #EA6519;
    margin-bottom: 10px;
    text-decoration: underline;
    cursor: pointer;
    position: relative;
}

.del-img {
    width: 22px;
    height: 22px;
    cursor: pointer;
}

.feedback-box {
    /* position: relative; */
}

.refuse-cause {
    width: 300px;
    position: absolute;
    top: 25px;
    left: 0;
    padding: 20px;
    box-shadow: 0px 0px 10px 0px #EA651980;
    background-color: #1d1d1d;
    border-radius: 10px;
    color: #fff;
    display: none;
    /* opacity: 0; */
}

.refuse:hover .refuse-cause {
    display: block;
    /* opacity: 1; */
}

.password-title {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 20px;
    font-family: 'Tomorrow';
}

input {
    transition: border-color 0.15s ease-in-out 0s, box-shadow 0.15s ease-in-out 0s;
    /* &:focus {
          border: 1px solid #48C2A9;
      } */
}

input:focus, select:focus {
    outline: none;
    border: 1px solid #EA6519;
    box-shadow: 0 0 0 1px #EA6519;
}

.password-box .form-group {
    width: 750px;
    margin-bottom: 20px;
}

.pwd-save {
    width: 180px;
    height: 50px;
    background-image: url("../img/faq-active.png");
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-weight: 600;
    font-size: 16px;
    -webkit-appearance: none;
    /* 移除默认外观 */
    appearance: none;
    background-color: transparent;
    /* 透明背景 */
    border: none;
    /* 移除边框 */
    padding: 0;
    /* 保持原有padding */
    margin: 0;
    /* 保持原有margin */
    color: #fff;
}

.email-box {
    margin-top: 30px;
}

.notifi-order, .notifi-offer, .notifi-msg, .coupon-all, .coupon-availble, .coupon-expired {
    padding: 15px 25px;
    background: #3D3D3D;
    font-size: 16px;
    border-radius: 60px;
    cursor: pointer;
}

.notifi-active {
    background: linear-gradient(267.71deg, #FF8742 0%, #F25800 100%);
}

.view-order {
    width: 111px;
    height: 46px;
    background-image: url("../img/bg112.png");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.notifi-list {
    margin-top: 30px;
}

.notifi-list-item {
    padding: 20px;
    border: 1px solid #FFFFFF1A;
    margin-top: 20px;
    border-radius: 6px;
    gap: 40px;
}

.notifi-list-item:hover {
    border-color: #EA6519;
    box-shadow: 0px 0px 15px 0px #EA651980;
}

.notifi-text-box {
    flex: 1;
}

.notifi-time {
    margin: 20px 0 0;
}

.notifi-img {
    width: 88px;
    height: 88px;
}

.coupon-list {
    margin-top: 30px;
    gap: 40px;
    flex-wrap: wrap;
}

.coupon-item {
    width: calc(50% - 20px);
    background: #2A2A2A;
    border-radius: 8px;
    padding: 20px;
    height: 140px;
    box-sizing: border-box;
    display: flex;
    /* justify-content: space-between; */
    align-items: center;
    background: linear-gradient(97.39deg, #B17F3A 0%, #D0B365 61.8%, #B17F3A 123.59%);
    position: relative;
    gap: 90px;
}

.coupon-item::after {
    position: absolute;
    content: '';
    width: 20px;
    height: 20px;
    background-color: #282929;
    border-radius: 50%;
    left: 155px;
    top: -10px;
}

.coupon-item::before {
    position: absolute;
    content: '';
    width: 20px;
    height: 20px;
    background-color: #282929;
    border-radius: 50%;
    left: 155px;
    bottom: -10px;
}

.dotted-line {
    position: absolute;
    height: 100%;
    border-right: 1px dotted #6D2800;
    left: 165px;
}

.discount {
    font-size: 26px;
    font-weight: bold;
    font-family: 'Roboto';
}

.valid-date {
    color: #FFFFFFFF;
    font-size: 16px;
}

.coupon-right {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.use-btn {
    background: #B17F3A;
    border-radius: 4px;
    text-align: center;
    cursor: pointer;
    margin-top: 10px;
    width: 70px;
    box-sizing: border-box;
    line-height: 34px;
}

.card-row {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    margin-bottom: 15px;
}

.card-item {
    width: calc((100% - 180px) / 4);
    /* 6个元素 * 15px间距 */
    background: #100f12;
    border-radius: 8px;
    padding: 20px;
    text-align: center;
    height: 460px;
    box-sizing: border-box;
    padding-top: 10px;
}

.card-item .goods-img {
    width: 155px;
    object-fit: cover;
    border-radius: 6px;
}

.card-title {
    margin-top: 20px;
    margin-bottom: 30px;
    font-size: 16px;
    font-weight: 600;
    color: #EAEAEA;
}

/* 悬停效果 */
.card-item:hover {
    /* transform: translateY(-3px); */
    box-shadow: 0px 0px 30px 0px #EA651999;
    transition: transform 0.2s ease;
}

.card-item {
    /* 保持原有样式 */
    position: relative;
    padding-bottom: 40px;
}

.card-item:hover .btn-offer {
    background-image: url("../img/make-offer-active.png");
}

.card-price-rdeuce {
    justify-content: center;
    margin: 20px 0;
    align-items: end;
}

.card-price {
    color: #EA6519;
    font-size: 24px;
    margin: 20px 0;
}

.card-now-price {
    color: #EA6519;
    font-size: 24px;
}

.card-now-price {
    color: #00B67A;
}

.card-old-price {
    text-decoration: line-through;
    color: #FFFFFFB2;
    /* margin-bottom: 10px; */
    height: 20px;
    font-size: 14px;
}

.button-row {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-bottom: 12px;
}

.btn-offer {
    /* flex: 1; */
    color: #fff;
    background-color: #100f12;
    border: none;
    cursor: pointer;
    background-image: url("../img/make-offer.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    height: 44px;
    width: 130px;
}

.cart-icon {
    width: 44px;
    height: 44px;
    cursor: pointer;
}

.btn-buy {
    background-image: url("../img/buy-new.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    width: 180px;
    height: 44px;
    background-color: #100f12;
    border: none;
    color: #fff;
    cursor: pointer;
}

.btn-buy:hover, .btn-offer:hover {
    opacity: 0.9;
}

.quantity-control {
    display: flex;
    align-items: center;
}

.btn-quantity {
    width: 40px;
    height: 40px;
    background: #404245;
    border: none;
    color: white;
    font-size: 32px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-quantity:first-child {
    border-radius: 6px 0 0 6px;
}

.btn-quantity:last-child {
    border-radius: 0 6px 6px 0;
}

.quantity-input-cart {
    width: 60px;
    padding: 6px;
    box-sizing: border-box;
    height: 40px;
    text-align: center;
    background: #2A2A2A;
    border: 1px solid #3A3A3A;
    -webkit-inner-spin-button: none;
    color: #fff;
    flex: 1;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
}

input[type="number"] {
    -moz-appearance: textfield;
}

.add-heart {
    position: absolute;
    right: 10px;
    top: 10px;
    width: 30px;
    height: 30px;
}

.goods-discounts {
    position: absolute;
    left: 10px;
    top: 10px;
    /* width: 100px; */
    height: 30px;
    text-align: center;
    line-height: 30px;
    background: linear-gradient(97.39deg, #B17F3A 0%, #D0B365 61.8%, #B17F3A 123.59%);
    border-radius: 60px;
    padding: 0 10px;
    font-size: 12px;
}

.goods-hot-discounts {
    position: absolute;
    left: 10px;
    top: 10px;
    height: 30px;
    line-height: 30px;
    background: linear-gradient(180deg, #D65206 0%, #D81E06 100%);
    border-radius: 60px;
    padding: 0 10px;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
}

.reduce-price {
    font-size: 14px;
    color: #00B67A;
    position: absolute;
    padding: 5px 10px;
    border: 1px solid #00B67A;
    border-radius: 60px;
    top: 140px;
    left: 59px;
}

.eval-modal {
    display: none;
    position: fixed;
    top: 0px;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    z-index: 999;
}

.eval-content {
    width: 650px;
    background: #1D1D1D;
    margin: 50px auto;
    padding: 20px 70px;
    border-radius: 8px;
    margin-top: 10%;
    box-sizing: border-box;
    position: relative;
    border: 1px solid #EA6519;
    box-shadow: 0px 0px 20px 0px #EA65194D;
}

.eval-header {
    padding-bottom: 15px;
}

.eval-title {
    font-size: 34px;
    font-weight: 700;
    font-family: 'Tomorrow';
}

.close-btn {
    /* float: right; */
    position: absolute;
    right: 20px;
    top: 20px;
    color: white;
    cursor: pointer;
    font-size: 28px;
}

.eval-info {
    line-height: 40px;
}

#evalOrderNo, #evalGame {
    margin-left: 20px;
}

#evalGame {
    margin-left: 40px;
}

.rating-section {
    margin: 10px 0 20px;
    display: flex;
    gap: 20px;
    align-items: center;
}

.stars {
    display: flex;
    gap: 10px;
    margin-top: 10px;
}

.star {
    color: #FFFFFF4D;
    cursor: pointer;
    font-size: 24px;
    transition: color 0.2s;
}

.star:hover, .star.active {
    color: #FFD700;
}

.eval-textarea {
    width: 100%;
    height: 150px;
    margin: 10px 0 20px;
    padding: 15px;
    box-sizing: border-box;
    background: #2A2A2A;
    border: 1px solid #FFFFFF1A;
    color: white;
    box-sizing: border-box;
}

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

.submit-eval {
    width: 500px;
    height: 46px;
    background: #1d1d1d;
    border: none;
    color: white;
    cursor: pointer;
    font-size: 16px;
    background-image: url("../img/active500.png");
}

.success-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    z-index: 1000;
    justify-content: center;
    align-items: center;
}

.success-content {
    background: #1D1D1D;
    padding: 40px;
    border-radius: 8px;
    text-align: center;
    box-sizing: border-box;
    width: 650px;
    position: relative;
}

.success-icon {
    width: 200px;
    height: 200px;
    margin-bottom: 20px;
}

.success-title {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 15px;
}

.success-text {
    /* color: #FFFFFF99; */
    margin-bottom: 30px;
}

.success-buttons {
    display: flex;
    gap: 20px;
    justify-content: center;
}

.btn-ok, .btn-order {
    padding: 12px 24px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
    font-weight: 600;
    height: 50px;
}

.btn-ok {
    background: #1d1d1d;
    background-image: url("../img/default154.png");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    width: 266px;
    border: none;
    color: white;
}

.btn-order {
    border: none;
    /* background: transparent; */
    /* border: 1px solid #EA6519; */
    background: #1d1d1d;
    color: #fff;
    background-image: url("../img/active266.png");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    width: 266px;
}

.information_mb {
    display: none;
}

.nav-current, .logout_mb {
    display: none;
}

@media screen and (max-width: 768px) {
    .nav-current {
        display: inline-block;
    }

    .logout_mb {
        width: 100%;
        height: auto;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        margin-top: 8vw;
    }

    .logout_mb a {
        display: inline-block;
        width: 88vw;
        height: 11.73333vw;
        background: url("/static/img/logout_mb.png") no-repeat;
        background-size: 100% 100%;
        color: #FFF;
        text-align: center;
        font-size: 3.73333vw;
        font-style: normal;
        font-weight: 600;
        line-height: 11.73333vw;
    }

    .flex_box_none {
        display: flex;
        /* justify-content: space-between; */
        /* align-items: center; */
    }

    .nav-detail {
        padding-top: 160px;
        width: 92%;
        margin: 0 auto;
        text-align: left;
        font-size: 12px;
    }

    .main-nav {
        height: 60px;
    }

    /* 基础布局 */
    .personal-container {
        max-width: 92%;
        margin: 0 auto;
        gap: 0px;
        margin-top: 40px;
        margin-bottom: 100px;
        flex-direction: column;
    }

    .information_mb {
        display: flex;
        width: 100%;
        height: auto;
        align-items: center;
        margin-bottom: 5.33333vw;
    }

    .information_mb img {
        width: 16vw;
        height: 16vw;
    }

    .information_mb .part-name {
        margin-left: 2.26667vw;
        color: #FFF;
        font-family: "Tomorrow";
        font-size: 5.33333vw;
        font-style: normal;
        font-weight: 700;
        line-height: 5.33333vw;
        /* 100% */
    }

    .information_mb.active {
        display: none;
    }

    .side-nav {
        width: 100%;
        background: transparent;
        border-radius: 0px;
        height: auto;
    }

    .side-nav.active {
        display: none;
    }

    .nav-list {
        list-style: none;
        padding: 0;
        margin: 0;
        font-size: 16px;
    }

    .nav-list .nav-item {
        padding: 4vw 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.2);
        font-size: 4.26667vw;
        position: relative;
    }

    .nav-list .nav-item:last-child {
        display: none;
    }

    .nav-list .nav-item::after {
        content: '';
        width: 12px;
        height: 16px;
        background: url("/static/img/nav_icon.png") no-repeat;
        background-size: 100% 100%;
        position: absolute;
        top: 50%;
        right: 0;
        transform: translateY(-50%);
    }

    .nav-item {
        padding: 0;
        /* margin: 8px 0; */
        /* border-radius: 6px; */
        cursor: pointer;
        transition: all 0.3s;
        border-bottom: none;
    }

    .nav-item:first-child {
        border-top-left-radius: 0px;
        border-top-right-radius: 0px;
    }

    .nav-item:last-child {
        border-bottom-right-radius: 0px;
        border-bottom-left-radius: 0px;
        border-bottom: none;
    }

    .nav-item:hover {
        background: #3A3A3A;
    }

    .nav-item.active {
        background: transparent;
        color: white;
        position: relative;
    }

    .main-content {
        display: none;
        flex: 1;
        background: #282929;
        border-radius: 8px;
        /* padding: 0 25px; */
    }

    .main-content.active {
        display: block;
    }

    .content-section {
        display: none;
    }

    .content-section.active {
        display: block;
    }

    .logout {
        /* color: #FF4444; */
        /* margin-top: 20px; */
    }

    .profile-photo {
        width: 80px;
        height: 80px;
        border-radius: 50%;
        background: #D9D9D9;
    }

    .part-name {
        font-family: 'Tomorrow';
        font-weight: 700;
        font-size: 34px;
    }

    .information {
        display: flex;
        align-items: center;
        gap: 0px;
    }

    .information img {
        width: 16vw;
        height: 16vw;
    }

    .information .part-name {
        margin-left: 2.26667vw;
        color: #FFF;
        font-family: "Tomorrow";
        font-size: 5.33333vw;
        font-style: normal;
        font-weight: 700;
        line-height: 5.33333vw;
        /* 100% */
    }

    .account-level {
        margin-top: 20px;
        font-size: 14px;
        margin-bottom: 10px;
    }

    .garde-content {
        width: 100%;
        height: auto;
        display: flex;
        flex-direction: row;
        overflow: hidden;
        overflow-x: auto;
        padding-bottom: 5.33333vw;
    }

    .garde-content::-webkit-scrollbar {
        height: 4px;
        width: 4px;
    }

    .garde-content::-webkit-scrollbar-track:horizontal {
        background: #1D1D1D;
        border-radius: 4px;
    }

    .garde-content::-webkit-scrollbar-thumb:horizontal {
        background: #EA6519;
        border-radius: 4px;
    }

    .garde-content::-webkit-scrollbar-thumb:horizontal:hover {
        background: #EA6519;
    }

    .garde-box {
        width: 160%;
        flex-shrink: 0;
        background: linear-gradient(89.65deg, #FF8742 0.08%, #FF6710 99.46%);
        padding: 2.66667vw 10.66667vw;
        border-radius: 10px;
        height: 200px;
        box-sizing: border-box;
    }

    .garde-box .number {
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 22px;
        line-height: 120%;
        text-align: center;
        position: relative;
        margin-bottom: 50px;
    }

    .decoration-item {
        width: 20%;
        transform: translate(-50%, 0);
    }

    .number-item {
        width: 20%;
        transform: translate(-50%, 0);
    }

    .garde-box .decoration {
        display: flex;
        justify-content: space-between;
        align-items: center;
        line-height: 120%;
        text-align: center;
        position: relative;
        font-size: 14px;
        margin-top: 30px;
    }

    .decoration-item:nth-child(1), .number-item:nth-child(1) {
        position: absolute;
        left: 2%;
        top: 0px;
    }

    .decoration-item:nth-child(2), .number-item:nth-child(2) {
        position: absolute;
        left: 25%;
        top: 0px;
    }

    .decoration-item:nth-child(3), .number-item:nth-child(3) {
        position: absolute;
        left: 50%;
        top: 0px;
    }

    .decoration-item:nth-child(4), .number-item:nth-child(4) {
        position: absolute;
        left: 75%;
        top: 0px;
    }

    .decoration-item:nth-child(5), .number-item:nth-child(5) {
        position: absolute;
        left: 98%;
        top: 0px;
    }

    .progress-bar {
        height: 8px;
        background: #1d1d1d;
        border-radius: 4px;
        margin: 30px auto;
        position: relative;
    }

    .progress {
        height: 100%;
        background: linear-gradient(97.39deg, #B17F3A 0%, #D0B365 61.8%, #B17F3A 123.59%);
        position: relative;
        border-radius: 4px;
        transition: width 0.5s ease;
    }

    .current-progress {
        position: absolute;
        right: 0px;
        top: -8px;
        color: #fff;
        padding: 3px 10px;
        border-radius: 60px;
        background: linear-gradient(97.39deg, #B17F3A 0%, #D0B365 61.8%, #B17F3A 123.59%);
        font-weight: bold;
        font-size: 14px;
        border: 1px solid #fff;
    }

    .line {
        width: 2px;
        height: 100%;
        background: #FFFFFF4D;
    }

    .line:nth-child(2) {
        position: absolute;
        left: 25%;
        top: 0;
    }

    .line:nth-child(3) {
        position: absolute;
        left: 50%;
        top: 0;
    }

    .line:nth-child(4) {
        position: absolute;
        left: 75%;
        top: 0;
    }

    .introduce-text {
        font-size: 14px;
        margin-top: 30px;
        line-height: 150%;
        width: 100%;
    }

    .account-Profile {
        margin-top: 75px;
    }

    .account-Profile-title {
        font-size: 22px;
        font-weight: 700;
        margin-bottom: 20px;
        font-family: 'Tomorrow';
    }

    .profile-form {
        margin-top: 20px;
        /* gap: 30px; */
    }

    .form-row {
        gap: 30px;
        margin-bottom: 20px;
    }

    .form-group {
        margin-bottom: 3.73333vw;
        flex: 1;
    }

    .form-group label {
        display: block;
        margin-bottom: 8px;
        color: #FFFFFFCC;
    }

    .form-group input,
    .form-group select {
        width: 100%;
        padding: 12px;
        background: #3d3d3d;
        border: 1px solid #444;
        border-radius: 6px;
        color: white;
        transition: all 0.3s;
        box-sizing: border-box;
        height: 45px;
    }

    .form-group select option:checked {
        background: #3d3d3d;
        color: white;
    }

    .form-group select {
        appearance: none;
        background-image: url("../img/country-select.png");
        background-repeat: no-repeat;
        background-position: right 15px center;
        background-size: 12px;
        padding-right: 35px;
    }

    .form-group input:focus,
    .form-group select:focus {
        border-color: #1d1d1d !important;
        /* box-shadow: 0 0 0 2px #EA651933; */
        background-color: #1d1d1d;
    }
}

@media screen and (max-width: 768px) and (max-width: 768px) {
    .form-row {
        flex-direction: column;
        gap: 15px;
    }
}

@media screen and (max-width: 768px) {
    .submit-btn {
        width: 180px;
        height: 50px;
        background-image: url("../img/faq-active.png");
        color: white;
        border: none;
        border-radius: 6px;
        cursor: pointer;
        transition: all 0.3s;
        margin-top: 20px;
        margin-bottom: 30px;
        font-weight: bold;
        background-color: #2a2a2a;
    }

    .order-title {
        font-family: 'Tomorrow';
        font-size: 5.86667vw;
        font-weight: 700;
        margin-bottom: 5.86667vw;
    }

    .order-select {
        display: flex;
        gap: 30px;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 30px;
    }

    .order-select select {
        padding: 12px;
        background: #3d3d3d;
        border: 1px solid #444;
        border-radius: 6px;
        color: white;
        transition: all 0.3s;
        box-sizing: border-box;
        height: 45px;
        width: 250px;
        appearance: none;
        background-image: url("../img/country-select.png");
        background-repeat: no-repeat;
        background-position: right 15px center;
        background-size: 12px;
        padding-right: 35px;
    }

    .order-left {
        gap: 20px;
    }

    .order-right {
        align-items: center;
        gap: 20px;
    }

    .sort-by {
        cursor: pointer;
    }

    .order-select {
        width: 100%;
        height: auto;
        gap: 0;
        flex-direction: column;
    }

    .order-select .order-left {
        flex-direction: row;
    }

    .order-select .order-left select {
        width: 42.66667vw;
        padding: 12px;
        background: #3d3d3d;
        border: 1px solid #444;
        border-radius: 6px;
        color: white;
        transition: all 0.3s;
        box-sizing: border-box;
        height: 10.66667vw;
        appearance: none;
        background-image: url(../img/country-select.png);
        background-repeat: no-repeat;
        background-position: right 15px center;
        background-size: 1.6vw;
        padding-right: 70 0.13333vw;
    }

    .order-select .order-right {
        margin-top: 5.06667vw;
    }

    .order-select .order-right select {
        width: 73.86667vw;
        padding: 12px;
        background: #3d3d3d;
        border: 1px solid #444;
        border-radius: 6px;
        color: white;
        transition: all 0.3s;
        box-sizing: border-box;
        height: 10.66667vw;
        appearance: none;
        background-image: url(../img/country-select.png);
        background-repeat: no-repeat;
        background-position: right 15px center;
        background-size: 1.6vw;
        padding-right: 70 0.13333vw;
    }

    .table-container {
        width: 100%;
        height: auto;
    }

    .table-container .table_item {
        width: 100%;
        height: auto;
        margin-bottom: 3.2vw;
        border-radius: 1.6vw;
        background: #000;
        overflow: hidden;
    }

    .table-container .table_item .item_order {
        width: 100%;
        height: 9.6vw;
        background: #EA6519;
        padding: 0 3.73333vw;
        box-sizing: border-box;
        color: #FFF;
        font-size: 3.46667vw;
        line-height: 9.6vw;
        font-style: normal;
        font-weight: 400;
    }

    .table-container .table_item .item_date {
        width: 100%;
        height: auto;
        padding: 3.2vw 3.73333vw;
        box-sizing: border-box;
        border-bottom: 0.13333vw solid rgba(255, 255, 255, 0.2);
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }

    .table-container .table_item .item_date .date {
        color: #FFF;
        font-size: 3.2vw;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
    }

    .table-container .table_item .item_date .status_text {
        color: #FFF;
        font-size: 3.46667vw;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
    }

    .table-container .table_item .item_info {
        width: 100%;
        height: auto;
        padding: 3.2vw 3.73333vw;
        box-sizing: border-box;
        display: flex;
        flex-direction: row;
        align-items: flex-start;
    }

    .table-container .table_item .item_info .info_img {
        width: 8vw;
        height: 8vw;
        border-radius: 50%;
    }

    .table-container .table_item .item_info .info_img img {
        width: 100%;
        height: 100%;
    }

    .table-container .table_item .item_info .info_box {
        width: calc(100% - 9.86667vw);
        height: auto;
        margin-left: 1.86667vw;
    }

    .table-container .table_item .item_info .info_box .info_name {
        color: #FFF;
        font-size: 3.46667vw;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
    }

    .table-container .table_item .item_info .info_box .info_price_box {
        width: 100%;
        height: auto;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        margin-top: 1.06667vw;
    }

    .table-container .table_item .item_info .info_box .info_price_box .info_serve {
        width: 75%;
        height: auto;
        text-align: left;
        color: rgba(255, 255, 255, 0.7);
        font-size: 3.2vw;
        font-style: normal;
        font-weight: 400;
        line-height: 1.625;
    }

    .table-container .table_item .item_info .info_box .info_price_box .info_price {
        color: #FF6812;
        font-size: 3.73333vw;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
    }

    .table-container .table_item .item_detail_box {
        width: 100%;
        height: auto;
        padding: 3.2vw 3.73333vw;
        box-sizing: border-box;
        margin-top: 0.53333vw;
    }

    .table-container .table_item .item_detail_box .status_box {
        width: 100%;
        height: auto;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }

    .table-container .table_item .item_detail_box .status_box .item_status {
        width: 49%;
        color: #FFDFAB;
        font-size: 3.46667vw;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
    }

    .table-container .table_item .item_detail_box .status_box .btn_box {
        display: flex;
        flex-direction: row;
        align-items: center;
    }

    .table-container .table_item .item_detail_box .status_box .btn_box .item_detail {
        width: 17.06667vw;
        height: 9.6vw;
        background: url("/static/img/item-details.png") no-repeat;
        background-size: 100% 100%;
        color: #FFF;
        text-align: center;
        font-size: 3.46667vw;
        font-style: normal;
        font-weight: 500;
        line-height: 9.6vw;
    }

    .table-container .table_item .item_detail_box .status_box .btn_box .item_paynow {
        margin-left: 2.93333vw;
        width: 21.33333vw;
        height: 9.6vw;
        background: url("/static/img/item-pay-now.png") no-repeat;
        background-size: 100% 100%;
        color: #FFF;
        text-align: center;
        font-size: 3.46667vw;
        font-style: normal;
        font-weight: 500;
        line-height: 9.6vw;
    }

    .table-heard {
        height: 50px;
        background: linear-gradient(267.71deg, #FF8742 0%, #F25800 100%);
        display: flex;
        align-items: center;
        padding: 0 30px;
        border-radius: 6px;
        font-size: 14px;
        gap: 20px;
    }

    .table-heard2 {
        height: 50px;
        background: linear-gradient(267.71deg, #FF8742 0%, #F25800 100%);
        display: flex;
        align-items: center;
        /* padding: 0 30px; */
        border-radius: 6px;
        font-size: 14px;
        gap: 20px;
    }

    .heard1 {
        width: 200px;
    }

    .heard2 {
        width: 200px;
    }

    .heard3 {
        width: 10%;
    }

    .heard4 {
        width: 15%;
    }

    .heard5 {
        width: 20%;
    }

    .heard6 {
        width: 20%;
    }

    .heard7 {
        width: 22%;
        padding-left: 30px;
        box-sizing: border-box;
    }

    .heard8 {
        width: 12%;
        /* text-align: center; */
    }

    .heard9 {
        width: 22%;
    }

    .heard10 {
        width: 22%;
        text-emphasis: none;
    }

    .heard11 {
        width: 22%;
    }

    .item7 {
        padding-left: 0;
    }

    .item11 {
        display: flex;
        gap: 20px;
        align-items: center;
        /* justify-content: center */
    }

    .table-item {
        font-size: 14px;
        display: flex;
        padding: 20px 30px;
        align-items: center;
        gap: 20px;
        border-bottom: 1px solid #FFFFFF33;
    }

    .table-item2 {
        font-size: 14px;
        display: flex;
        padding: 20px 0px;
        gap: 20px;
        align-items: center;
        border-bottom: 1px solid #FFFFFF33;
    }

    .item3 {
        color: #FF6812;
    }

    .item6 {
        display: flex;
        gap: 20px;
        align-items: center;
        /* justify-content: center */
    }

    .item7 {
        display: flex;
        gap: 15px;
        /* align-items: center; */
    }

    .item7 img {
        width: 70px;
        height: 70px;
        border-radius: 6px;
    }

    .order-item-details {
        width: 72px;
        height: 40px;
        background-image: url("../img/item-details.png");
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
    }

    .item-pay-now {
        width: 90px;
        height: 40px;
        background-image: url("../img/item-pay-now.png");
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        font-weight: 600;
    }

    .pagination {
        margin: 30px 0;
        gap: 15px;
        justify-content: start;
        align-items: center;
    }

    .page-numbers {
        gap: 15px;
        display: flex;
    }

    .page-btn, .prev-btn, .next-btn {
        width: 36px;
        height: 36px;
        /* padding: 8px 12px; */
        background: #2A2A2A;
        /* border: 1px solid #3A3A3A; */
        color: #EA6519;
        border-radius: 4px;
        border: none;
        cursor: pointer;
        background-image: url("../img/prev-img.png");
        /* background-size: 20px; */
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
    }

    .page-btn.active {
        background: #EA6519;
        border-color: #EA6519;
        color: #fff;
    }

    .page-btn:hover:not(.active) {
        background: #555;
    }

    .prev-btn:disabled, .next-btn:disabled {
        opacity: 0.5;
        cursor: not-allowed;
    }

    .table-container {
        margin-bottom: 20px;
    }

    .back-btn {
        font-size: 22px;
        cursor: pointer;
    }

    .bay-again {
        width: 112px;
        height: 46px;
        background-image: url("../img/bg112.png");
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
    }

    .live-chat {
        width: 112px;
        height: 46px;
        background-image: url("../img/active-bg112.png");
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
    }

    .flex_box_center {
        display: flex;
        align-items: center;
        gap: 15px;
        justify-content: space-between;
    }

    .flex_box_center_15 {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 15px;
    }

    .order-details {
        display: none;
    }

    .order-details-box {
        display: flex;
        gap: 30px;
        justify-content: space-between;
        margin-top: 40px;
    }

    .order-details-left {
        width: 65%;
    }

    .order-details-right {
        width: 34%;
    }

    .left-top, .right-top, .right-bottom {
        background-color: #1d1d1d;
        border-radius: 10px;
        padding: 25px;
        box-sizing: border-box;
        margin-bottom: 20px;
    }

    .information-item {
        width: 48%;
        padding: 15px 0;
    }

    .detail-title {
        border-bottom: 1px solid #FFFFFF33;
        padding-bottom: 25px;
    }

    .left-top-contant {
        padding: 20px 30px;
    }

    .information-item-label {
        font-size: 14px;
        color: #FFFFFF80;
        margin-bottom: 10px;
    }

    .left-bottom {
        background-color: #1d1d1d;
        border-radius: 10px;
        padding: 25px;
        box-sizing: border-box;
    }

    .screenshot-img {
        width: 120px;
        height: 120px;
        border-radius: 10px;
    }

    .order-status {
        font-size: 20px;
        font-weight: 700;
        margin-bottom: 10px;
    }

    .order-hint {
        font-size: 14px;
    }

    .offers-item-text {
        font-size: 14px;
        color: #FFFFFFB2;
        margin-top: 10px;
    }

    .offers-item-name {
        font-size: 14px;
    }

    .agree {
        color: #00B67A;
        margin-bottom: 10px;
    }

    .item-pay-now2 {
        width: 180px;
        height: 40px;
        background-image: url("../img/buy-new.png");
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        font-weight: 600;
    }

    .refuse {
        color: #EA6519;
        margin-bottom: 10px;
        text-decoration: underline;
        cursor: pointer;
        position: relative;
    }

    .del-img {
        width: 22px;
        height: 22px;
        cursor: pointer;
    }

    .feedback-box {
        /* position: relative; */
    }

    .refuse-cause {
        width: 300px;
        position: absolute;
        top: 25px;
        left: 0;
        padding: 20px;
        box-shadow: 0px 0px 10px 0px #EA651980;
        background-color: #1d1d1d;
        border-radius: 10px;
        color: #fff;
        display: none;
        /* opacity: 0; */
    }

    .refuse:hover .refuse-cause {
        display: block;
        /* opacity: 1; */
    }

    .order-details {
        width: 100%;
        height: auto;
    }

    .order-details .order-details-top {
        display: flex;
        gap: 0;
        flex-direction: column;
        align-items: flex-start;
    }

    .order-details .order-details-top .back-btn {
        color: #FFF;
        font-size: 4vw;
        font-style: normal;
        font-weight: 400;
        line-height: 120%;
        /* 18px */
    }

    .order-details .order-details-top .flex_box_center {
        width: 100%;
        height: auto;
        margin-top: 4vw;
        justify-content: inherit;
    }

    .order-details .order-details-top .flex_box_center .bay-again {
        width: 29.86667vw;
        height: 12.26667vw;
        font-size: 3.73333vw;
    }

    .order-details .order-details-top .flex_box_center .live-chat {
        width: 29.86667vw;
        height: 12.26667vw;
        font-size: 3.73333vw;
    }

    .order-details .order-details-box {
        margin-top: 6.13333vw;
        gap: 0;
        flex-direction: column-reverse;
    }

    .order-details .order-details-box .order-details-right {
        width: 100%;
    }

    .order-details .order-details-box .order-details-right .right-top {
        padding: 4.26667vw;
    }

    .order-details .order-details-box .order-details-right .right-top .order-status {
        font-size: 4.26667vw;
    }

    .order-details .order-details-box .order-details-right .right-top .order-hint {
        font-size: 3.46667vw;
    }

    .order-details .order-details-box .order-details-right .right-bottom {
        box-shadow: 0px 0px 2.66667vw 0px rgba(234, 101, 25, 0.3);
        padding: 4.26667vw;
        border: 1px solid rgba(234, 101, 25, 0.5);
    }

    .order-details .order-details-box .order-details-left {
        width: 100%;
    }

    .order-details .order-details-box .order-details-left .left-top {
        padding: 4.26667vw;
    }

    .order-details .order-details-box .order-details-left .left-top .left-top-contant {
        padding-left: 0;
        padding-right: 0;
        gap: 0;
    }

    .order-details .order-details-box .order-details-left .left-top .left-top-contant .information-item {
        width: 100%;
        padding: 10px 0;
    }

    .order-details .order-details-box .order-details-left .left-bottom {
        padding: 4.26667vw;
    }

    .order-details .order-details-box .order-details-left .left-bottom .information2 {
        padding: 0;
        margin-top: 0;
    }

    .password-title {
        font-size: 18px;
        font-weight: 700;
        margin-bottom: 20px;
        font-family: 'Tomorrow';
    }

    input {
        transition: border-color 0.15s ease-in-out 0s, box-shadow 0.15s ease-in-out 0s;
        /* &:focus {
                border: 1px solid #48C2A9;
            } */
    }

    input:focus, select:focus {
        outline: none;
        border: 1px solid #EA6519;
        box-shadow: 0 0 0 1px #EA6519;
    }

    .password-box .form-group {
        width: 750px;
        margin-bottom: 20px;
    }

    .pwd-save {
        width: 180px;
        height: 50px;
        background-image: url("../img/faq-active.png");
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        font-weight: 600;
        font-size: 16px;
        -webkit-appearance: none;
        /* 移除默认外观 */
        appearance: none;
        background-color: transparent;
        /* 透明背景 */
        border: none;
        /* 移除边框 */
        padding: 0;
        /* 保持原有padding */
        margin: 0;
        /* 保持原有margin */
        color: #fff;
    }

    .email-box {
        margin-top: 30px;
    }

    .notifi-order, .notifi-offer, .notifi-msg, .coupon-all, .coupon-availble, .coupon-expired {
        padding: 15px 25px;
        background: #3D3D3D;
        font-size: 16px;
        border-radius: 60px;
        cursor: pointer;
    }

    .notifi-active {
        background: linear-gradient(267.71deg, #FF8742 0%, #F25800 100%);
    }

    .view-order {
        width: 111px;
        height: 46px;
        background-image: url("../img/bg112.png");
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
    }

    .notifi-list {
        margin-top: 30px;
    }

    .notifi-list-item {
        padding: 20px;
        border: 1px solid #FFFFFF1A;
        margin-top: 20px;
        border-radius: 6px;
        gap: 40px;
    }

    .notifi-list-item:hover {
        border-color: #EA6519;
        box-shadow: 0px 0px 15px 0px #EA651980;
    }

    .notifi-text-box {
        flex: 1;
    }

    .notifi-time {
        margin: 20px 0 0;
    }

    .notifi-img {
        width: 88px;
        height: 88px;
    }

    .coupon-list {
        margin-top: 30px;
        gap: 40px;
        flex-wrap: wrap;
    }

    .coupon-item {
        width: calc(50% - 20px);
        background: #2A2A2A;
        border-radius: 8px;
        padding: 20px;
        height: 140px;
        box-sizing: border-box;
        display: flex;
        /* justify-content: space-between; */
        align-items: center;
        background: linear-gradient(97.39deg, #B17F3A 0%, #D0B365 61.8%, #B17F3A 123.59%);
        position: relative;
        gap: 90px;
    }

    .coupon-item::after {
        position: absolute;
        content: '';
        width: 20px;
        height: 20px;
        background-color: #282929;
        border-radius: 50%;
        left: 155px;
        top: -10px;
    }

    .coupon-item::before {
        position: absolute;
        content: '';
        width: 20px;
        height: 20px;
        background-color: #282929;
        border-radius: 50%;
        left: 155px;
        bottom: -10px;
    }

    .dotted-line {
        position: absolute;
        height: 100%;
        border-right: 1px dotted #6D2800;
        left: 165px;
    }

    .discount {
        font-size: 26px;
        font-weight: bold;
        font-family: 'Roboto';
    }

    .valid-date {
        color: #FFFFFFFF;
        font-size: 16px;
    }

    .coupon-right {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .use-btn {
        background: #B17F3A;
        border-radius: 4px;
        text-align: center;
        cursor: pointer;
        margin-top: 10px;
        width: 70px;
        box-sizing: border-box;
        line-height: 34px;
    }

    .card-row {
        display: flex;
        flex-wrap: wrap;
        gap: 15px;
        margin-bottom: 15px;
    }

    .card-item {
        width: calc((100% - 180px) / 4);
        /* 6个元素 * 15px间距 */
        background: #100f12;
        border-radius: 8px;
        padding: 20px;
        text-align: center;
        height: 460px;
        box-sizing: border-box;
        padding-top: 10px;
    }

    .card-item .goods-img {
        width: 155px;
        object-fit: cover;
        border-radius: 6px;
    }

    .card-title {
        margin-top: 20px;
        margin-bottom: 30px;
        font-size: 16px;
        font-weight: 600;
        color: #EAEAEA;
    }

    /* 悬停效果 */
    .card-item:hover {
        /* transform: translateY(-3px); */
        box-shadow: 0px 0px 30px 0px #EA651999;
        transition: transform 0.2s ease;
    }

    .card-item {
        /* 保持原有样式 */
        position: relative;
        padding-bottom: 40px;
    }

    .card-item:hover .btn-offer {
        background-image: url("../img/make-offer-active.png");
    }

    .card-price-rdeuce {
        justify-content: center;
        margin: 20px 0;
        align-items: end;
    }

    .card-price {
        color: #EA6519;
        font-size: 24px;
        margin: 20px 0;
    }

    .card-now-price {
        color: #EA6519;
        font-size: 24px;
    }

    .card-now-price {
        color: #00B67A;
    }

    .card-old-price {
        text-decoration: line-through;
        color: #FFFFFFB2;
        /* margin-bottom: 10px; */
        height: 20px;
        font-size: 14px;
    }

    .button-row {
        display: flex;
        gap: 10px;
        align-items: center;
        margin-bottom: 12px;
    }

    .btn-offer {
        /* flex: 1; */
        color: #fff;
        background-color: #100f12;
        border: none;
        cursor: pointer;
        background-image: url("../img/make-offer.png");
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        height: 44px;
        width: 130px;
    }

    .cart-icon {
        width: 44px;
        height: 44px;
        cursor: pointer;
    }

    .btn-buy {
        background-image: url("../img/buy-new.png");
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        width: 180px;
        height: 44px;
        background-color: #100f12;
        border: none;
        color: #fff;
        cursor: pointer;
    }

    .btn-buy:hover, .btn-offer:hover {
        opacity: 0.9;
    }

    .quantity-control {
        display: flex;
        align-items: center;
    }

    .btn-quantity {
        width: 40px;
        height: 40px;
        background: #404245;
        border: none;
        color: white;
        font-size: 32px;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .btn-quantity:first-child {
        border-radius: 6px 0 0 6px;
    }

    .btn-quantity:last-child {
        border-radius: 0 6px 6px 0;
    }

    .quantity-input-cart {
        width: 60px;
        padding: 6px;
        box-sizing: border-box;
        height: 40px;
        text-align: center;
        background: #2A2A2A;
        border: 1px solid #3A3A3A;
        -webkit-inner-spin-button: none;
        color: #fff;
        flex: 1;
    }

    input::-webkit-outer-spin-button,
    input::-webkit-inner-spin-button {
        -webkit-appearance: none;
    }

    input[type="number"] {
        -moz-appearance: textfield;
    }

    .add-heart {
        position: absolute;
        right: 10px;
        top: 10px;
        width: 30px;
        height: 30px;
    }

    .goods-discounts {
        position: absolute;
        left: 10px;
        top: 10px;
        /* width: 100px; */
        height: 30px;
        text-align: center;
        line-height: 30px;
        background: linear-gradient(97.39deg, #B17F3A 0%, #D0B365 61.8%, #B17F3A 123.59%);
        border-radius: 60px;
        padding: 0 10px;
        font-size: 12px;
    }

    .goods-hot-discounts {
        position: absolute;
        left: 10px;
        top: 10px;
        height: 30px;
        line-height: 30px;
        background: linear-gradient(180deg, #D65206 0%, #D81E06 100%);
        border-radius: 60px;
        padding: 0 10px;
        font-size: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 5px;
    }

    .reduce-price {
        font-size: 14px;
        color: #00B67A;
        position: absolute;
        padding: 5px 10px;
        border: 1px solid #00B67A;
        border-radius: 60px;
        top: 140px;
        left: 59px;
    }

    .eval-modal {
        display: none;
        position: fixed;
        top: 0px;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.7);
        z-index: 999;
    }

    .eval-content {
        width: 650px;
        background: #1D1D1D;
        margin: 50px auto;
        padding: 20px 70px;
        border-radius: 8px;
        margin-top: 10%;
        box-sizing: border-box;
        position: relative;
        border: 1px solid #EA6519;
        box-shadow: 0px 0px 20px 0px #EA65194D;
    }

    .eval-header {
        padding-bottom: 15px;
    }

    .eval-title {
        font-size: 34px;
        font-weight: 700;
        font-family: 'Tomorrow';
    }

    .close-btn {
        /* float: right; */
        position: absolute;
        right: 20px;
        top: 20px;
        color: white;
        cursor: pointer;
        font-size: 28px;
    }

    .eval-info {
        line-height: 40px;
    }

    #evalOrderNo, #evalGame {
        margin-left: 20px;
    }

    #evalGame {
        margin-left: 40px;
    }

    .rating-section {
        margin: 10px 0 20px;
        display: flex;
        gap: 20px;
        align-items: center;
    }

    .stars {
        display: flex;
        gap: 10px;
        margin-top: 10px;
    }

    .star {
        color: #FFFFFF4D;
        cursor: pointer;
        font-size: 24px;
        transition: color 0.2s;
    }

    .star:hover, .star.active {
        color: #FFD700;
    }

    .eval-textarea {
        width: 100%;
        height: 150px;
        margin: 10px 0 20px;
        padding: 15px;
        box-sizing: border-box;
        background: #2A2A2A;
        border: 1px solid #FFFFFF1A;
        color: white;
        box-sizing: border-box;
    }

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

    .submit-eval {
        width: 500px;
        height: 46px;
        background: #1d1d1d;
        border: none;
        color: white;
        cursor: pointer;
        font-size: 16px;
        background-image: url("../img/active500.png");
    }

    .success-modal {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.7);
        z-index: 1000;
        justify-content: center;
        align-items: center;
    }

    .success-content {
        background: #1D1D1D;
        padding: 40px;
        border-radius: 8px;
        text-align: center;
        box-sizing: border-box;
        width: 650px;
        position: relative;
    }

    .success-icon {
        width: 200px;
        height: 200px;
        margin-bottom: 20px;
    }

    .success-title {
        font-size: 24px;
        font-weight: 700;
        margin-bottom: 15px;
    }

    .success-text {
        /* color: #FFFFFF99; */
        margin-bottom: 30px;
    }

    .success-buttons {
        display: flex;
        gap: 20px;
        justify-content: center;
    }

    .btn-ok, .btn-order {
        padding: 12px 24px;
        border-radius: 4px;
        cursor: pointer;
        font-size: 16px;
        font-weight: 600;
        height: 50px;
    }

    .btn-ok {
        background: #1d1d1d;
        background-image: url("../img/default154.png");
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
        width: 266px;
        border: none;
        color: white;
    }

    .btn-order {
        border: none;
        /* background: transparent; */
        /* border: 1px solid #EA6519; */
        background: #1d1d1d;
        color: #fff;
        background-image: url("../img/active266.png");
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
        width: 266px;
    }

    .card-row {
        gap: 0;
        margin-bottom: 3.2vw;
    }

    .card-row .card-item {
        width: 49%;
        height: auto;
        padding: 2.4vw;
    }

    .card-row .card-item .reduce-price {
        white-space: nowrap;
        left: 50%;
        transform: translateX(-50%);
        padding: 1.6vw 3.2vw;
        font-size: 3.73333vw;
    }

    .card-row .card-item .btn-offer {
        width: 27.2vw;
        height: 10.66667vw;
        font-size: 4vw;
        background-size: 100% 100%;
    }

    .card-row .card-item .cart-icon {
        width: 10.66667vw;
        height: 10.66667vw;
    }

    .card-row .card-item .btn-buy {
        width: 100%;
        height: 10.66667vw;
        background-size: 100% 100%;
    }

    .offers_container {
        width: 100%;
        height: auto;
    }

    .offers_container .offer_item {
        background: #000;
        width: 100%;
        height: auto;
        margin-bottom: 3.73333vw;
        border-radius: 1.6vw;
        overflow: hidden;
    }

    .offers_container .offer_item .item_date_box {
        width: 100%;
        height: 9.6vw;
        background: #EA6519;
        padding: 0 4.26667vw;
        box-sizing: border-box;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }

    .offers_container .offer_item .item_date_box .date {
        color: #FFF;
        font-size: 3.2vw;
        font-style: normal;
        font-weight: 400;
    }

    .offers_container .offer_item .item_date_box .status {
        color: #FFF;
        font-size: 3.73333vw;
        font-style: normal;
        font-weight: 400;
    }

    .offers_container .offer_item .item_price_box {
        width: 100%;
        height: auto;
        padding: 3.2vw 4.26667vw;
        box-sizing: border-box;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        border-bottom: 0.13333vw solid rgba(255, 255, 255, 0.2);
    }

    .offers_container .offer_item .item_price_box .price_title {
        color: #FFF;
        font-size: 3.2vw;
        font-style: normal;
        font-weight: 400;
    }

    .offers_container .offer_item .item_price_box .price_text {
        color: #EA6519;
        font-size: 3.73333vw;
        font-style: normal;
        font-weight: 400;
    }

    .offers_container .offer_item .item_info_box {
        width: 100%;
        height: auto;
        padding: 3.2vw 4.26667vw;
        box-sizing: border-box;
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        justify-content: space-between;
    }

    .offers_container .offer_item .item_info_box .item_info {
        width: 80%;
        height: auto;
        display: flex;
        flex-direction: row;
        align-items: flex-start;
    }

    .offers_container .offer_item .item_info_box .item_info .item_img {
        width: 13.33333vw;
        height: 13.33333vw;
        border-radius: 1.6vw;
        overflow: hidden;
    }

    .offers_container .offer_item .item_info_box .item_info .item_img img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .offers_container .offer_item .item_info_box .item_info .item_name_box {
        margin-left: 2.66667vw;
    }

    .offers_container .offer_item .item_info_box .item_info .item_name_box .name {
        color: #FFF;
        font-size: 3.46667vw;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
    }

    .offers_container .offer_item .item_info_box .item_info .item_name_box .ser_name {
        color: rgba(255, 255, 255, 0.7);
        font-size: 3.2vw;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
    }

    .offers_container .offer_item .item_info_box .del-img {
        width: 5.86667vw;
        height: 5.86667vw;
    }

    .offers_container .offer_item .item_comment {
        width: 100%;
        height: auto;
        padding: 3.2vw 4.26667vw;
        box-sizing: border-box;
    }

    .offers_container .offer_item .item_comment .comment_title, .offers_container .offer_item .item_comment .comment_text {
        color: #FFF;
        font-size: 3.46667vw;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
    }

    .offers_container .offer_item .item_btn_box {
        width: 100%;
        height: auto;
        width: 100%;
        height: auto;
        padding: 0vw 4.26667vw 4.26667vw;
        box-sizing: border-box;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-end;
    }

    .offers_container .offer_item .item_btn_box .cart {
        width: 32vw;
        height: 9.6vw;
        background: url("/static/img/item-pay-now-mb.png") no-repeat;
        background-size: 100% 100%;
        color: #FFF;
        text-align: center;
        font-size: 3.46667vw;
        font-style: normal;
        font-weight: 500;
        line-height: 9.6vw;
    }

    .offers_container .offer_item .item_replay {
        width: 100%;
        height: auto;
        padding: 3.2vw 4.26667vw;
        box-sizing: border-box;
        border-top: 0.13333vw solid rgba(255, 255, 255, 0.2);
        color: #FFDFAB;
        font-size: 3.46667vw;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
    }

    .offers_container .offer_item .item_replay.none {
        display: none;
    }

    #coupons .flex_box {
        gap: 4vw;
        flex-wrap: wrap;
    }

    #coupons .flex_box .coupon-all, #coupons .flex_box .coupon-availble, #coupons .flex_box .coupon-expired {
        width: 44vw;
        height: 10.66667vw;
        padding: 0;
        font-size: 3.73333vw;
        text-align: center;
        line-height: 10.66667vw;
    }

    #coupons .coupon-list {
        gap: 0;
    }

    #coupons .coupon-list .coupon-item {
        width: 100%;
        margin-bottom: 4vw;
        padding: 2.66667vw;
        height: auto;
        gap: 0;
    }

    #coupons .coupon-list .coupon-item::after {
        width: 3.46667vw;
        height: 3.46667vw;
        left: 20vw;
    }

    #coupons .coupon-list .coupon-item::before {
        width: 3.46667vw;
        height: 3.46667vw;
        left: 20vw;
    }

    #coupons .coupon-list .coupon-item .discount {
        font-size: 8vw;
    }

    #coupons .coupon-list .coupon-item .discount span:last-child {
        font-size: 5.86667vw !important;
    }

    #coupons .coupon-list .coupon-item .dotted-line {
        left: 21.6vw;
    }

    #coupons .coupon-list .coupon-item .coupon-right {
        margin-left: 6.4vw;
        font-size: 3.73333vw;
    }

    #notifications .flex_box {
        gap: 3.46667vw;
        flex-wrap: wrap;
    }

    #notifications .flex_box .notifi-order, #notifications .flex_box .notifi-offer, #notifications .flex_box .notifi-msg {
        width: 28.26667vw;
        height: 10.66667vw;
        padding: 0;
        font-size: 3.73333vw;
        text-align: center;
        line-height: 10.66667vw;
    }

    #notifications .notifi-list {
        width: 100%;
        height: auto;
    }

    #notifications .notifi-list .notifi_list_item {
        width: 100%;
        height: auto;
        padding: 3.73333vw 4.26667vw;
        box-sizing: border-box;
        border-radius: 1.6vw;
        border: 0.13333vw solid rgba(255, 255, 255, 0.1);
        background: #2D2D2D;
        gap: 0;
        flex-direction: column;
    }

    #notifications .notifi-list .notifi_list_item .item_info {
        width: 100%;
        height: auto;
        display: flex;
        flex-direction: row;
        align-items: center;
    }

    #notifications .notifi-list .notifi_list_item .item_info .notifi-img {
        width: 13.33333vw;
        height: 13.33333vw;
    }

    #notifications .notifi-list .notifi_list_item .item_info .notifi_text_box {
        margin-left: 2.66667vw;
    }

    #notifications .notifi-list .notifi_list_item .item_info .notifi_text_box .item_title {
        color: #FFF;
        font-size: 4.26667vw;
        font-style: normal;
        font-weight: 500;
        line-height: 5.86667vw;
        /* 137.5% */
    }

    #notifications .notifi-list .notifi_list_item .item_info .notifi_text_box .notifi_time {
        color: rgba(255, 255, 255, 0.7);
        font-size: 3.46667vw;
        font-style: normal;
        font-weight: 400;
        line-height: 150%;
        /* 19.5px */
    }

    #notifications .notifi-list .notifi_list_item .cart_server {
        margin-top: 4vw;
        color: rgba(255, 255, 255, 0.7);
        font-size: 3.73333vw;
        font-style: normal;
        font-weight: 400;
        line-height: 140%;
        /* 19.6px */
    }

    #notifications .notifi-list .notifi_list_item .btn_box {
        width: 100%;
        height: auto;
        margin-top: 3.2vw;
        display: flex;
        flex-direction: row;
        justify-content: flex-end;
        align-items: center;
    }

    #notifications .notifi-list .notifi_list_item .btn_box .view_order {
        width: 26.66667vw;
        height: 9.6vw;
        background: url("/static/img/item-details-mb.png") no-repeat;
        background-size: 100% 100%;
        color: #FFF;
        text-align: center;
        font-size: 3.46667vw;
        font-style: normal;
        font-weight: 500;
        line-height: 9.6vw;
    }

    #security .password-box .form-group {
        width: 92vw;
    }
}

.offer-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    z-index: 1000;
    justify-content: center;
    align-items: center;
}

.offer-content {
    width: 650px;
    background: #1D1D1D;
    padding: 30px 75px;
    border-radius: 8px;
    box-sizing: border-box;
}

.offer-header {
    border-bottom: 1px solid #FFFFFF1A;
    padding-bottom: 15px;
    margin-bottom: 20px;
    position: relative;
    box-sizing: border-box;
}

.offer-title {
    font-size: 36px;
    font-weight: 700;
    font-family: 'Tomorrow';
}
.label-text{
    margin-top: 20px;
    margin-bottom: 10px;
}
.close-btn {
    position: absolute;
    top: -10px;
    right: -40px;
    font-size: 28px;
    cursor: pointer;
}

.price-input {
    width: 100%;
    padding: 12px;
    margin: 15px 0;
    background: #2A2A2A;
    border: 1px solid #FFFFFF1A;
    color: white;
    box-sizing: border-box;
    border-radius: 6px;
}

.comment-textarea {
    width: 100%;
    height: 120px;
    padding: 12px;
    background: #2A2A2A;
    border: 1px solid #FFFFFF1A;
    color: white;
    resize: vertical;
    box-sizing: border-box;
    border-radius: 6px;


}
.offer-notice{
    margin: 20px 0 40px;
}
.btn-submit {
    width: 100%;
    padding: 12px;
    font-size: 14px;
    font-weight: 600;
    border: none;
    color: white;
    cursor: pointer;
    margin-top: 20px;
    height: 46px;
    background-color: #1D1D1D;
    background-image: url("../img/active500.png");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    /* border-radius: 6px; */
}