/* ============================================
   输入框通用样式
   ============================================ */
.input-bg {
    background: var(--max-3-bg);
    border: 1px solid var(--max-txt-border);
    color: var(--max-txt-color);
    transition: all 0.3s ease;
}

.input-bg:focus {
    border-color: var(--btn-gray, #2163e8);
    background: var(--max-2-bg);
    outline: none;
}

.input-textarea {
    background: var(--max-3-bg);
    border: 1px solid var(--max-txt-border);
    color: var(--max-txt-color);
    resize: vertical;
    min-height: 100px;
    transition: all 0.3s ease;
}

.input-textarea:focus {
    border-color: var(--btn-gray, #2163e8);
    background: var(--max-2-bg);
    outline: none;
}

/* ============================================
   按钮基类 - 只定义结构和行为
   ============================================ */
.btn {
    /* 布局样式 - 固定不变 */
    display: inline-block;
    padding: 8px 15px;
    font-weight: 400;
    font-size: 0.85rem;
    line-height: 1.5;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    user-select: none;
    border: 1px solid var(--btn-border-color);
    border-radius: 5px;
    color: var(--btn-color);
    background-color: var(--btn-bg);
    background-image: var(--btn-bg-image, none);
    transition: all 0.15s ease-in-out;
    cursor: pointer;
}

/* 悬停状态 */
.btn:hover {
    color: var(--btn-hover-color);
    background-color: var(--btn-hover-bg);
    border-color: var(--btn-hover-border-color);
    background-image: var(--btn-hover-bg-image, none);
}

/* 点击状态 */
.btn:active {
    color: var(--btn-active-color);
    background-color: var(--btn-active-bg);
    border-color: var(--btn-active-border-color);
    background-image: var(--btn-active-bg-image, none);
    transform: translateY(1px);
}

/* 禁用状态 */
.btn:disabled,
.btn.disabled {
    /*opacity: 0.65;*/
    pointer-events: none;
    /*color: var(--btn-disabled-color);*/
    /*background-color: var(--btn-disabled-bg);*/
    border-color: var(--btn-disabled-border-color);
}

/* 焦点状态 */
/*.btn:focus {*/
/*    outline: 0;*/
/*    box-shadow: 0 0 0 0.2rem rgba(var(--btn-focus-shadow-rgb), 0.5);*/
/*}*/

/*.btn:focus:not(:active) {*/
/*    box-shadow: 0 0 0 0.2rem rgba(var(--btn-focus-shadow-rgb), 0.5);*/
/*}*/

/* ============================================
   具体按钮颜色定义
   ============================================ */

/* 蓝色系 - 主按钮 (原 .btn-primary) */
.btn-primary {
    --btn-color: #fff;
    --btn-bg-image: linear-gradient(135deg, #1a4ce8 0%, #3b7aff 90%, #2f6eff 100%);
    --btn-border-color: #2f6eff;
    --btn-hover-color: #fff;
    --btn-hover-bg-image: linear-gradient(135deg, #1442d1 0%, #2d66e6 50%, #2660e6 100%);
    --btn-hover-border-color: #2660e6;
    --btn-active-color: #fff;
    --btn-active-bg-image: linear-gradient(135deg, #0f3aba 0%, #2055cc 50%, #1c4fcc 100%);
    --btn-active-border-color: #1c4fcc;
    --btn-focus-shadow-rgb: 47,110,255;
}

/* 深蓝色 */
.btn-primary-deep {
    --btn-color: #fff;
    --btn-bg: #2b5aff;
    --btn-border-color: #2b5aff;
    --btn-hover-color: #fff;
    --btn-hover-bg: #1843d4;
    --btn-hover-border-color: #1843d4;
    --btn-active-color: #fff;
    --btn-active-bg: #1238b8;
    --btn-active-border-color: #1238b8;
    --btn-focus-shadow-rgb: 30,77,240;
}

/* 天空蓝 (原 .btn-light-primary) */
/*.btn-skyblue {*/
/*    --btn-color: #fff;*/
/*    --btn-bg: #1a88ff;*/
/*    --btn-border-color: #1a88ff;*/
/*    --btn-hover-color: #fff;*/
/*    --btn-hover-bg: #0e75e6;*/
/*    --btn-hover-border-color: #0e75e6;*/
/*    --btn-active-color: #fff;*/
/*    --btn-active-bg: #0c66cc;*/
/*    --btn-active-border-color: #0c66cc;*/
/*    --btn-focus-shadow-rgb: 26,136,255;*/
/*}*/
.btn-skyblue {
    --btn-color: #fff;
    --btn-bg: #007bff;
    --btn-border-color: #007bff;
    --btn-hover-color: #fff;
    --btn-hover-bg: #0069d9;
    --btn-hover-border-color: #0069d9;
    --btn-active-color: #fff;
    --btn-active-bg: #005cbf;
    --btn-active-border-color: #005cbf;
    --btn-focus-shadow-rgb: 0,123,255;
}

/* 灰色/次要按钮 (原 .btn-secondary) */
.btn-secondary {
    --btn-color: #fff;
    --btn-bg: #6c757d;
    --btn-border-color: #6c757d;
    --btn-hover-color: #fff;
    --btn-hover-bg: #5a6268;
    --btn-hover-border-color: #545b62;
    --btn-active-color: #fff;
    --btn-active-bg: #4e555b;
    --btn-active-border-color: #4e555b;
    --btn-focus-shadow-rgb: 108,117,125;
}

/* 绿色渐变 (原 .btn-succe) */
.btn-success-gradient {
    --btn-color: #fff;
    --btn-bg-image: linear-gradient(-125deg, #22d945 0%, #15b868 100%);
    --btn-border-color: #15b868;
    --btn-hover-color: #fff;
    --btn-hover-bg-image: linear-gradient(-125deg, #1dc43d 0%, #12a35c 100%);
    --btn-hover-border-color: #12a35c;
    --btn-active-color: #fff;
    --btn-active-bg-image: linear-gradient(-125deg, #18ad35 0%, #0e8c4f 100%);
    --btn-active-border-color: #0e8c4f;
    --btn-focus-shadow-rgb: 34,217,69;
}

/* 紫色 (原 .btn-purple) */
.btn-purple {
    --btn-color: #fff;
    --btn-bg: #9d1de8;
    --btn-border-color: #9d1de8;
    --btn-hover-color: #fff;
    --btn-hover-bg: #8718cc;
    --btn-hover-border-color: #7a16b8;
    --btn-active-color: #fff;
    --btn-active-bg: #6e13a3;
    --btn-active-border-color: #6e13a3;
    --btn-focus-shadow-rgb: 157,29,232;
}

/* 翠绿色 (原 .btn-success) */
.btn-success {
    --btn-color: #fff;
    --btn-bg: #2ecc71;
    --btn-border-color: #2ecc71;
    --btn-hover-color: #fff;
    --btn-hover-bg: #27ae60;
    --btn-hover-border-color: #229954;
    --btn-active-color: #fff;
    --btn-active-bg: #1e8449;
    --btn-active-border-color: #1e8449;
    --btn-focus-shadow-rgb: 46,204,113;
}

/* 青绿色 (原 .btn-success-1) */
.btn-teal {
    --btn-color: #fff;
    --btn-bg: #14cc72;
    --btn-border-color: #14cc72;
    --btn-hover-color: #fff;
    --btn-hover-bg: #11b362;
    --btn-hover-border-color: #0fa358;
    --btn-active-color: #fff;
    --btn-active-bg: #0d8f4d;
    --btn-active-border-color: #0d8f4d;
    --btn-focus-shadow-rgb: 20,204,114;
}
/* 翠绿深色*/
.btn-emerald {
    --btn-color: #fff;
    --btn-bg-image: linear-gradient(135deg, #059669 0%, #10b981 100%);
    --btn-border-color: #059669;
    --btn-hover-color: #fff;
    --btn-hover-bg-image: linear-gradient(135deg, #047857 0%, #059669 100%);
    --btn-hover-border-color: #047857;
    --btn-active-color: #fff;
    --btn-active-bg-image: linear-gradient(135deg, #065f46 0%, #047857 100%);
    --btn-active-border-color: #065f46;
    --btn-focus-shadow-rgb: 5,150,105;
}
/* 紫红渐变 (原 .btn-zihong) */
.btn-crimson {
    --btn-color: #fff;
    --btn-bg-image: linear-gradient(-125deg, #d6451e 0%, #b015c4 100%);
    --btn-border-color: #b015c4;
    --btn-hover-color: #fff;
    --btn-hover-bg-image: linear-gradient(-125deg, #c03d1a 0%, #9a12ae 100%);
    --btn-hover-border-color: #9a12ae;
    --btn-active-color: #fff;
    --btn-active-bg-image: linear-gradient(-125deg, #a83516 0%, #850f98 100%);
    --btn-active-border-color: #850f98;
    --btn-focus-shadow-rgb: 208,69,30;
}

/* 红色/危险按钮 (原 .btn-danger) */
.btn-danger {
    --btn-color: #fff;
    --btn-bg: #e72c2c;
    --btn-border-color: #e72c2c;
    --btn-hover-color: #fff;
    --btn-hover-bg: #d12424;
    --btn-hover-border-color: #d12424;
    --btn-active-color: #fff;
    --btn-active-bg: #b01e1e;
    --btn-active-border-color: #b01e1e;
    --btn-focus-shadow-rgb: 231,44,44;
}

/* 亮红色按钮 */
.btn-red {
    --btn-color: #fff;
    --btn-bg: #ff0202;
    --btn-border-color: #ff0202;
    --btn-hover-color: #fff;
    --btn-hover-bg: #cc0202;
    --btn-hover-border-color: #b30202;
    --btn-active-color: #fff;
    --btn-active-bg: #990101;
    --btn-active-border-color: #990101;
    --btn-focus-shadow-rgb: 255,2,2;
}

/* 橙色 (原 .btn-orange) */
.btn-orange {
    --btn-color: #fff;
    --btn-bg: #ff8015;
    --btn-border-color: #ff8015;
    --btn-hover-color: #fff;
    --btn-hover-bg: #e06b0f;
    --btn-hover-border-color: #cc610d;
    --btn-active-color: #fff;
    --btn-active-bg: #b8550b;
    --btn-active-border-color: #b8550b;
    --btn-focus-shadow-rgb: 253,126,20;
}
.btn-warning {
    --btn-color: #000;
    --btn-bg: #ffc107;
    --btn-border-color: #ffc107;
    --btn-hover-color: #000;
    --btn-hover-bg: #ffca2c;
    --btn-hover-border-color: #ffc720;
    --btn-active-color: #000;
    --btn-active-bg: #ffcd39;
    --btn-active-border-color: #ffc720;
    --btn-focus-shadow-rgb: 255, 193, 7;
}
 /*深色/黑色*/
.btn-dark {
    --btn-color: #fff;
    --btn-bg: #1a1a2e;
    --btn-border-color: #1a1a2e;
    --btn-hover-color: #fff;
    --btn-hover-bg: #2d2d44;
    --btn-hover-border-color: #2d2d44;
    --btn-active-color: #fff;
    --btn-active-bg: #0f0f1a;
    --btn-active-border-color: #0f0f1a;
    --btn-focus-shadow-rgb: 26,26,46;
}

/* 信息蓝 (原 .btn-info) */
.btn-info {
    --btn-color: #fff;
    --btn-bg: #17a2b8;
    --btn-border-color: #17a2b8;
    --btn-hover-color: #fff;
    --btn-hover-bg: #138496;
    --btn-hover-border-color: #117a8b;
    --btn-active-color: #fff;
    --btn-active-bg: #0e6b7a;
    --btn-active-border-color: #0e6b7a;
    --btn-focus-shadow-rgb: 23,162,184;
}

/* 浅色/白色按钮 (原 .btn-light) */
.btn-light {
    --btn-color: #212529;
    --btn-bg: #f8f9fa;
    --btn-border-color: #f8f9fa;
    --btn-hover-color: #212529;
    --btn-hover-bg: #e2e6ea;
    --btn-hover-border-color: #dae0e5;
    --btn-active-color: #212529;
    --btn-active-bg: #d3d9df;
    --btn-active-border-color: #c8d0d6;
    --btn-focus-shadow-rgb: 248,249,250;
}

/* 链接按钮 (原 .btn-link) */
.btn-link {
    --btn-color: #0d6efd;
    --btn-bg: transparent;
    --btn-border-color: transparent;
    --btn-hover-color: #0a58ca;
    --btn-hover-bg: transparent;
    --btn-hover-border-color: transparent;
    --btn-active-color: #084298;
    --btn-active-bg: transparent;
    --btn-active-border-color: transparent;
    text-decoration: none;
}

.btn-link:hover {
    text-decoration: underline;
}

/* 白色按钮（带边框） */
.btn-white {
    --btn-color: #212529;
    --btn-bg: #fff;
    --btn-border-color: #dee2e6;
    --btn-hover-color: #212529;
    --btn-hover-bg: #f8f9fa;
    --btn-hover-border-color: #cbd3da;
    --btn-active-color: #212529;
    --btn-active-bg: #e9ecef;
    --btn-active-border-color: #cbd3da;
    --btn-focus-shadow-rgb: 222,226,230;
}
/* 轮廓按钮 - 蓝色 */
.btn-outline-primary {
    --btn-color: #2f6eff;
    --btn-bg: transparent;
    --btn-border-color: #2f6eff;
    --btn-hover-color: #2f6eff;
    --btn-hover-bg: #f3f9ff;
    --btn-hover-border-color: #2f6eff;
    --btn-active-color: #2f6eff;
    --btn-active-bg: #e6f0ff;
    --btn-active-border-color: #2f6eff;
    --btn-focus-shadow-rgb: 47,110,255;
}

/* 轮廓按钮 - 红色 */
.btn-outline-danger {
    --btn-color: #dc3545;
    --btn-bg: transparent;
    --btn-border-color: #dc3545;
    --btn-hover-color: #fff;
    --btn-hover-bg: #dc3545;
    --btn-hover-border-color: #dc3545;
    --btn-active-color: #fff;
    --btn-active-bg: #a71d2a;
    --btn-active-border-color: #a71d2a;
    --btn-focus-shadow-rgb: 220,53,69;
}
/* 轮廓按钮 - 青绿色 */
.btn-outline-teal {
    --btn-color: #14cc72;
    --btn-bg: transparent;
    --btn-border-color: #14cc72;
    --btn-hover-color: #fff;
    --btn-hover-bg: #14cc72;
    --btn-hover-border-color: #14cc72;
    --btn-active-color: #fff;
    --btn-active-bg: #0d8f4d;
    --btn-active-border-color: #0d8f4d;
    --btn-focus-shadow-rgb: 20,204,114;
}

/* 轮廓按钮 - 天空蓝 (skyblue) */
.btn-outline-skyblue {
    --btn-color: #007bff;
    --btn-bg: transparent;
    --btn-border-color: #007bff;
    --btn-hover-color: #fff;
    --btn-hover-bg: #007bff;
    --btn-hover-border-color: #007bff;
    --btn-active-color: #fff;
    --btn-active-bg: #005cbf;
    --btn-active-border-color: #005cbf;
    --btn-focus-shadow-rgb: 0,123,255;
}
/* 轮廓按钮 - 橙色 (warning) */
.btn-outline-warning {
    --btn-color: #f59e0b;
    --btn-bg: transparent;
    --btn-border-color: #f59e0b;
    --btn-hover-color: #fff;
    --btn-hover-bg: #f59e0b;
    --btn-hover-border-color: #f59e0b;
    --btn-active-color: #fff;
    --btn-active-bg: #d97706;
    --btn-active-border-color: #d97706;
    --btn-focus-shadow-rgb: 245,158,11;
}

/* 轮廓按钮 - 灰色 (secondary) */
.btn-outline-secondary {
    --btn-color: #6c757d;
    --btn-bg: transparent;
    --btn-border-color: #6c757d;
    --btn-hover-color: #fff;
    --btn-hover-bg: #6c757d;
    --btn-hover-border-color: #6c757d;
    --btn-active-color: #fff;
    --btn-active-bg: #4e555b;
    --btn-active-border-color: #4e555b;
    --btn-focus-shadow-rgb: 108,117,125;
}

/* 轮廓按钮 - 浅灰 (light) */
.btn-outline-light {
    --btn-color: #6c757d;
    --btn-bg: transparent;
    --btn-border-color: #dee2e6;
    --btn-hover-color: #212529;
    --btn-hover-bg: #f8f9fa;
    --btn-hover-border-color: #dee2e6;
    --btn-active-color: #212529;
    --btn-active-bg: #e9ecef;
    --btn-active-border-color: #dee2e6;
    --btn-focus-shadow-rgb: 222,226,230;
}

/* 轮廓按钮 - 黑色 (dark) */
.btn-outline-dark {
    --btn-color: #343a40;
    --btn-bg: transparent;
    --btn-border-color: #343a40;
    --btn-hover-color: #fff;
    --btn-hover-bg: #343a40;
    --btn-hover-border-color: #343a40;
    --btn-active-color: #fff;
    --btn-active-bg: #1a1a2e;
    --btn-active-border-color: #1a1a2e;
    --btn-focus-shadow-rgb: 52,58,64;
}
/*透明毛玻璃按钮*/
.btn-glass {
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #fff;
}

/*.btn-glass:hover {*/
/*    background: rgba(255, 255, 255, 0.3);*/
/*    color: #fff;*/
/*}*/
/* 小尺寸按钮 */
.btn-sm {
    padding: 4px 10px;
    font-size: 0.75rem;
}
.btn-sm2 {
    padding: 4px 16px;
    font-size: 0.85rem;
}
.btn-sm3 {
    padding: 8px 16px;
    font-size: 0.95rem;
}

/* 大尺寸按钮 */
.btn-lg {
    padding: 12px 24px;
    font-size: 1rem;
}

/* 圆角按钮 */
.btn-rounded {
    border-radius: 50px;
}

/* 块级按钮（占满宽度） */
.btn-block {
    display: block;
    width: 100%;
}

/* 带图标的按钮 */
.btn-icon {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.btn-icon svg {
    width: 1.1em;
    height: 1.1em;
}

/* 加载状态 */
.btn-loading {
    position: relative;
    color: transparent !important;
    pointer-events: none;
}

.btn-loading::after {
    content: '';
    position: absolute;
    width: 1em;
    height: 1em;
    top: calc(50% - 0.5em);
    left: calc(50% - 0.5em);
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: btn-loading-spin 0.6s linear infinite;
}

@keyframes btn-loading-spin {
    to { transform: rotate(360deg); }
}

/* 按钮组 */
.btn-group {
    display: inline-flex;
    gap: 8px;
}

.btn-group-vertical {
    display: inline-flex;
    flex-direction: column;
    gap: 8px;
}


/* ============================================
   提示框 (Alert) 样式
   ============================================ */
.alert {
    padding: 15px 20px;
    border-radius: 8px;
    border: 1px solid transparent;
    font-size: 0.95rem;
    line-height: 1.6;
}

/* ===== 实心模式（参考按钮色系） ===== */
.alert-primary {
    color: #fff;
    background: linear-gradient(135deg, #1a4ce8 0%, #3b7aff 90%, #2f6eff 100%);
    border-color: #2f6eff;
}

.alert-skyblue {
    color: #fff;
    background: #007bff;
    border-color: #007bff;
}

.alert-success {
    color: #fff;
    background: linear-gradient(135deg, #059669, #10b981);
    border-color: #15b868;
}

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

.alert-warning {
    color: #fff;
    background: #ff8015;
    border-color: #ff8015;
}

.alert-secondary {
    color: #fff;
    background: #6c757d;
    border-color: #6c757d;
}

.alert-dark {
    color: #fff;
    background: #1a1a2e;
    border-color: #1a1a2e;
}

/* ===== 浅色模式 ===== */
.alert-primary-light {
    color: #004085;
    background-color: #cce5ff;
    border-color: #b8daff;
}

.alert-skyblue-light {
    color: #0056b3;
    background-color: #e1f0ff;
    border-color: #b8daff;
}

.alert-success-light {
    color: #155724;
    background-color: #d4edda;
    border-color: #c3e6cb;
}

.alert-danger-light {
    color: #721c24;
    background-color: #f8d7da;
    border-color: #f5c6cb;
}

.alert-warning-light {
    color: #856404;
    background-color: #fff3cd;
    border-color: #ffeeba;
}

.alert-secondary-light {
    color: #6c757d;
    background-color: #f8f9fa;
    border-color: #dee2e6;
}

.alert-dark-light {
    color: #1b1e21;
    background-color: #d6d8d9;
    border-color: #c6c8ca;
}
/* 按钮组内边框合并（相邻按钮） */
/*.btn-group > .btn:not(:first-child) {*/
/*    margin-left: -1px;*/
/*    border-top-left-radius: 0;*/
/*    border-bottom-left-radius: 0;*/
/*}*/

/*.btn-group > .btn:not(:last-child) {*/
/*    border-top-right-radius: 0;*/
/*    border-bottom-right-radius: 0;*/
/*}*/

/* ============================================
   排名数字徽标
   ============================================ */
.rank-sm {
    min-width: 20px;
    height: 20px;
    line-height: 20px;
    border-radius: 4px;
    color: #fff;
    text-align: center;
    display: inline-block;
    font-weight: 600;
    font-size: 0.75rem;
    padding: 0 4px;
}
.rank-lg {
    min-width: 24px;
    height: 24px;
    line-height: 24px;
    border-radius: 4px;
    color: #fff;
    text-align: center;
    display: inline-block;
    font-weight: 600;
    font-size: 0.75rem;
    padding: 0 4px;
}
.rank-2g {
    min-width: 28px;
    height: 28px;
    line-height: 28px;
    border-radius: 4px;
    color: #fff;
    text-align: center;
    display: inline-block;
    font-weight: 600;
    font-size: 0.75rem;
    padding: 0 4px;
}

/* ============================================
   排名1-6 背景色
   ============================================ */
.rank-1 { background: linear-gradient(135deg, #ff6b6b 0%, #ff0016 100%); }  /* 橙色 */
.rank-2 { background: linear-gradient(135deg, #009bff 0%, #0080ff 100%); }  /* 蓝 */
.rank-3 { background: #2ecc71; }  /* 绿色 */
.rank-4 { background: #9d1de8; }  /* 紫色 */
.rank-5 { background: #ff198b; }  /* 粉色 */
.rank-6 { background: #17a2b8; }  /* 青色 */
.rank-default { background: #f5f5f5;color: #666; }  /* 默认灰色 */

.z-0 { z-index: 0; }
.z-1 { z-index: 1; }
.z-10 { z-index: 10; }
.z-20 { z-index: 20; }
.z-30 { z-index: 30; }
.z-40 { z-index: 40; }
.z-50 { z-index: 50; }
.z-100 { z-index: 100; }
.z-200 { z-index: 200; }
.z-300 { z-index: 300; }
.z-400 { z-index: 400; }
.z-500 { z-index: 500; }
.z-600 { z-index: 600; }
.z-700 { z-index: 700; }
.z-800 { z-index: 800; }
.z-900 { z-index: 900; }
.z-1000 { z-index: 1000; }


.min-70{min-width: 70px;}
.min-100{min-width: 100px;}

.w-0 { width: 0px; }
.w-10 { width: 10px; }
.w-15 { width: 15px; }
.w-18 { width: 18px; }
.w-20 { width: 20px; }
.w-25 { width: 25px; }
.w-28 { width: 28px; }
.w-30 { width: 30px; }
.w-31 { width: 31px; }
.w-35 { width: 35px; }
.w-40 { width: 40px; }
.w-45 { width: 45px; }
.w-50 { width: 50px; }
.w-55 { width: 55px; }
.w-60 { width: 60px; }
.w-65 { width: 65px; }
.w-70 { width: 70px; }
.w-75 { width: 75px; }
.w-80 { width: 80px; }
.w-85 { width: 85px; }
.w-90 { width: 90px; }
.w-95 { width: 95px; }
.w-100 { width: 100px; }
.w-115 { width: 115px; }
.w-120 { width: 120px; }
.w-150 { width: 150px; }
.w-200 { width: 200px; }
.w-220 { width: 220px; }
.w1-100 { width: 100%; }


.lh-28 { line-height: 28px; }
.lh-24 { line-height: 24px; }
.lh-20 { line-height: 20px; }
.lh-30 { line-height: 30px; }
.lh-50 { line-height: 50px; }
.lh-57 { line-height: 57px; }



.h-0 {height: 0;}
.h-10 {height: 10px;}
.h-18 { height: 18px; }
.h-20 { height: 20px; }
.h-25 { height: 25px; }
.h-28 { height: 28px; }
.h-30 { height: 30px; }
.h-31 { height: 31px; }
.h-35 { height: 35px; }
.h-40 { height: 40px; }
.h-45 { height: 45px; }
.h-50 { height: 50px; }
.h-55 { height: 55px; }
.h-57 { height: 57px; }
.h-58 { height: 58px; }
.h-60 { height: 60px; }
.h-70 { height: 70px; }
.h-75 { height: 75px; }
.h-80 { height: 80px; }
.h-100 { height: 100px; }
.h-115 { height: 115px; }
.h-120 { height: 120px; }
.h-150 { height: 150px; }
.h-170 { height: 170px; }
.h-190 { height: 190px; }
.h-200 { height: 200px; }
.h-230 { height: 230px; }
.h-250 { height: 250px; }
.h-260 { height: 260px; }
.h-280 { height: 280px; }
.h-300 { height: 300px; }
.h-330 { height: 330px; }
.h-350 { height: 350px; }
.h-360 { height: 360px; }
.h-365 { height: 365px; }
.h-370 { height: 370px; }
.h-400 { height: 400px; }
.h-450 { height: 450px; }
.h-500 { height: 500px; }
.h-550 { height: 550px; }
.h-600 { height: 600px; }
.h-n30 { height: 30%; }
.h-n33 { height: 33.333333%; }
.h-n70 { height: 70%; }
.h-n100 { height: 100%; }
/* 最小高度 */
.min-h-0 { min-height: 0; }
.min-h-10 { min-height: 10px; }
.min-h-15 { min-height: 15px; }
.min-h-20 { min-height: 20px; }
.min-h-25 { min-height: 25px; }
.min-h-30 { min-height: 30px; }
.min-h-40 { min-height: 40px; }
.min-h-45 { min-height: 45px; }
.min-h-50 { min-height: 50px; }
.min-h-60 { min-height: 60px; }
.min-h-70 { min-height: 70px; }
.min-h-75 { min-height: 75px; }
.min-h-80 { min-height: 80px; }
.min-h-85 { min-height: 85px; }
.min-h-90 { min-height: 90px; }
.min-h-100 { min-height: 100px; }
.min-h-120 { min-height: 120px; }
.min-h-150 { min-height: 150px; }
.min-h-180 { min-height: 180px; }
.min-h-200 { min-height: 200px; }
.min-h-220 { min-height: 220px; }
.min-h-250 { min-height: 250px; }
.min-h-280 { min-height: 280px; }
.min-h-300 { min-height: 300px; }
.min-h-350 { min-height: 350px; }
.min-h-400 { min-height: 400px; }
.min-h-450 { min-height: 450px; }
.min-h-500 { min-height: 500px; }

.min-w-65 { min-width: 65%; }
/* 最大高度 */
.max-h-0 { max-height: 0; }
.max-h-100 { max-height: 100px; }
.max-h-200 { max-height: 200px; }
.max-h-188 { max-height: 188px; }
.max-h-300 { max-height: 300px; }
.max-h-400 { max-height: 400px; }
.max-h-500 { max-height: 500px; }
/* 1. 溢出隐藏 */
.oh { overflow: hidden; }
/* 2. 溢出自动滚动 */
.oa { overflow: auto; }
/* 3. 溢出横向滚动 */
.oxa { overflow-x: auto; }
.oxh { overflow-x: hidden; }
/* 4. 溢出纵向滚动 */
.oya { overflow-y: auto;-webkit-overflow-scrolling: touch; }
.oyh { overflow-y: hidden; }
.oh-revert{ overflow: revert;}
/* 5. 文字溢出省略号（需配合宽度） */
.ell { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nowrap { white-space: nowrap; }/*文字不换行*/
/* 6. 多行文字溢出省略（webkit 内核） */
.ell1 { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.ell2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ell3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* ============================================
   横向滚动容器 - 用于移动端卡片/标签横向滑动
   ============================================ */
.scroll-x {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    margin: 0;
}

/* 滚动条样式 - 可选 */
.scroll-x::-webkit-scrollbar {
    height: 3px;
}
/*.scroll-x::-webkit-scrollbar-track {*/
/*    background: transparent;*/
/*}*/
/*.scroll-x::-webkit-scrollbar-thumb {*/
/*    background: #ddd;*/
/*    border-radius: 4px;*/
/*}*/

/* 子项吸附滚动 - 需要时使用 */
.scroll-x > * {
    scroll-snap-align: start;
    flex-shrink: 0;
}

/* ============================================
   竖向滚动容器 - 用于移动端列表上下滑动
   ============================================ */
.scroll-y {
    display: block;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    max-height: 100%;
}

/* 滚动条样式 - 可选 */
.scroll-y::-webkit-scrollbar {
    width: 3px;
}
.scroll-y::-webkit-scrollbar-track {
    background: transparent;
}
.scroll-y::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.3);
    border-radius: 4px;
}
/* 行类 */
.row {
    display: flex;
    flex-wrap: wrap;
    margin-right: 0px;
    margin-left: 0px;
}
.row-0{
    display: flex;
    flex-wrap: wrap;
    margin-right: calc(-.5 * 1.5rem);
    margin-left: calc(-.5 * 1.5rem);
}
.row-0>* {
    flex-shrink: 0;
    padding-right: calc(1.5rem * .5);
    padding-left: calc(1.5rem * .5);
}
.row-3{
    padding-right: 15px;
    padding-left: 15px;
}
/* 列类 */
.col {
    flex: 1 0 0%;
    padding-right: 15px;
    padding-left: 15px;
}




.w-n100 {width: 100%;}
.w-n90 {width: 90%;}
.w-n80 {width: 80%;}
.w-n78 {width: 78%;}
.w-n75 {width: 75%;}
.w-n72 {width: 72%;}
.w-n70 {width: 70%;}
.w-n65{width: 65%;}
.w-n64{width: 64%;}
.w-n62{width: 62%;}
.w-n60{width: 60%;}
.w-n50 {width: 50%;}
.w-n45{width: 45%;}
.w-n40{width: 40%;}
.w-n30 {width: 30%;}
.w-n33 {width: 33.33333333%;}
.w-n35 {width: 35%;}
.w-n32 {width: 32%;}
.w-n28 {width: 28%;}
.w-n26 {width: 26%;}
.w-n25 {width: 25%;}
.w-n24 {width: 24%;}
.w-n23 {width: 23%;}
.w-n22 {width: 22%;}
.w-n20 {width: 20%;}
.w-n19 {width: 19%;}
.w-n18 {width: 18%;}
.w-n17 {width: 17%;}
.w-n16 {width: 16%;}
.w-n15 {width: 15%;}
.w-n14 {width: 14%;}
.w-n13 {width: 13%;}
.w-n12 {width: 12%;}
.w-n11 {width: 11%;}
.w-n10 {width: 10%;}
.w-nauto {width: auto;}
.w-n100vw {width: 100vw;}


/* ============================================
   最大宽度工具类
   ============================================ */
.mw-0 { max-width: 0; }
.mw-50 { max-width: 50px; }
.mw-60 { max-width: 60px; }
.mw-70 { max-width: 70px; }
.mw-80 { max-width: 80px; }
.mw-90 { max-width: 90px; }
.mw-90 { max-width: 100px; }
.mw-600 { max-width: 600px; }
.mw-650 { max-width: 650px; }
.mw-700 { max-width: 700px; }
.mw-750 { max-width: 750px; }
.mw-800 { max-width: 800px; }
.mw-850 { max-width: 850px; }
.mw-900 { max-width: 900px; }
.mw-950 { max-width: 950px; }
.mw-1000 { max-width: 1000px; }

/* 百分比最大宽度 */
.mw-n100 { max-width: 100%; }
.mw-n90 { max-width: 90%; }
.mw-n80 { max-width: 80%; }
.mw-n75 { max-width: 75%; }
.mw-n70 { max-width: 70%; }
.mw-n60 { max-width: 60%; }
.mw-n50 { max-width: 50%; }
.mw-n40 { max-width: 40%; }
.mw-n30 { max-width: 30%; }
.mw-n25 { max-width: 25%; }
.mw-n20 { max-width: 20%; }
.mw-nauto { max-width: none; }

/* 最大宽度 + 居中（常用组合） */
.mw-center { margin-left: auto; margin-right: auto; }
/* 固定宽度列 */
/*.col-1 { flex: 0 0 8.33333333%; max-width: 8.33333333%; }*/
/*.col-2 { flex: 0 0 16.66666667%; max-width: 16.66666667%; }*/
/*.col-3 { flex: 0 0 25%; max-width: 25%; }*/
/*.col-4 { flex: 0 0 33.33333333%; max-width: 33.33333333%; }*/
/*.col-5 { flex: 0 0 41.66666667%; max-width: 41.66666667%; }*/
/*.col-6 { flex: 0 0 50%; max-width: 50%; }*/
/*.col-7 { flex: 0 0 58.33333333%; max-width: 58.33333333%; }*/
/*.col-8 { flex: 0 0 66.66666667%; max-width: 66.66666667%; }*/
/*.col-9 { flex: 0 0 75%; max-width: 75%; }*/
/*.col-10 { flex: 0 0 83.33333333%; max-width: 83.33333333%; }*/
/*.col-11 { flex: 0 0 91.66666667%; max-width: 91.66666667%; }*/
/*.col-12 { flex: 0 0 100%; max-width: 100%; }*/
/*.col-15 { flex: 0 0 15%; max-width: 15%; }*/
/*.col-02 { flex: 0 0 20%; max-width: 20%; }*/
/*.col-55 { flex: 0 0 55%; max-width: 55%; }*/
/*.col-60 { flex: 0 0 60%; max-width: 60%; }*/
.col-auto { width: auto; }
.col-5 { width: 5%; }
.col-10 { width: 10%; }
.col-15 { width: 15%; }
.col-20 { width: 20%; }
.col-25 { width: 25%; }
.col-30 { width: 30%; }
.col-33 { width: 33.333333%; }
.col-35 { width: 35%; }
.col-40 { width: 40%; }
.col-45 { width: 45%; }
.col-50 { width: 50%; }
.col-55 { width: 55%; }
.col-60 { width: 60%; }
.col-65 { width: 65%; }
.col-66 { width: 66.666666%; }
.col-70 { width: 70%; }
.col-75 { width: 75%; }
.col-80 { width: 80%; }
.col-85 { width: 85%; }
.col-90 { width: 90%; }
.col-95 { width: 95%; }
.col-100 { width: 100%; }

    
    

.pb-56 { padding-bottom: 56.25%; }/* 16:9*/
.pb-75 { padding-bottom: 75%; }/* 4:3*/
.pb-66 { padding-bottom: 66.666666%; }/* 3:2*/
.pb-100 { padding-bottom: 100%; }/* 1:1*/
.pb-50 { padding-bottom: 50%; }/* 2:1*/
.pb-42 { padding-bottom: 42.857142%; }/* 21:9*/
.pb-178 { padding-bottom: 177.777777%; }/* 9:16*/


/* 四边外边距 */
.m-auto { margin: auto; }
.m-0 { margin: 0; }
.m-1 { margin: 5px; }
.m-2 { margin: 10px; }
.m-3 { margin: 12px; }
.m-4 { margin: 15px; }


.m-n4 { margin: -4px; }
.m-n5 { margin: -5px; }
.m-n8 { margin: -8px; }
.m-n10 { margin: -10px; }
.m-n15 { margin: -15px; }
.m-n18 { margin: -18px; }
.m-n20 { margin: -20px; }


/* 四边内边距 */
.p-auto { padding: auto; }
.p-0 { padding: 0; }
.p-2 { padding: 2px; }
.p-4 { padding: 4px; }
.p-5 { padding: 5px; }
.p-6 { padding: 6px; }
.p-8 { padding: 8px; }
.p-10 { padding: 10px; }
.p-12 { padding: 12px; }
.p-15 { padding: 15px; }
.p-16 { padding: 16px; }
.p-18 { padding: 18px; }
.p-20 { padding: 20px; }
.p-25 { padding: 25px; }

.p-r05 { padding: 0.5rem; }
.p-r075 { padding: 0.75rem; } 
.p-r1 { padding: 1rem; }
.p-r125 { padding: 1.25rem; }
.p-r15 { padding: 1.5rem; }
.p-r175 { padding: 1.75rem; }
.p-r2 { padding: 2rem; }
.p-r25 { padding: 2.5rem; }
.p-r3 { padding: 3rem; }

.br-0{border-radius: 0px;}
.br-4{border-radius: 4px;}
.br-5{border-radius: 5px;}
.br-8{border-radius: 8px;}
.br-10{border-radius: 10px;}
.br-12{border-radius: 12px;}
.br-15{border-radius: 15px;}
.br-28{border-radius: 28px;}

.br-50 { border-radius: 50%; }
.br-t-5  { border-radius: 5px 5px 0 0; }
.br-b-5  { border-radius: 0 0 5px 5px; }
.br-l-5  { border-radius: 5px 0 0 5px; }
.br-r-5  { border-radius: 0 5px 5px 0; }
/*max间距类*/

/* 外边距 */
.mt-0 { margin-top: 0; }
.mt-1 { margin-top: 0.25rem; }
.mt-2 { margin-top: 0.5rem; }
.mt-3 { margin-top: 1rem; }
.mt-4 { margin-top: 1.5rem; }
.mt-5 { margin-top: 1.75rem; }
.mt-6 { margin-top: 2rem; }
.mt-7 { margin-top: 2.25rem; }
.mt-8 { margin-top: 2.5rem; }
.mt-9 { margin-top: 2.75rem; }
.mt-10 { margin-top: 3rem; }
.mt-75 { margin-top: 0.75rem; }


.mt-n1 { margin-top: -0.25rem; }
.mt-n2 { margin-top: -0.5rem; }
.mt-n3 { margin-top: -1rem; }
.mt-n4 { margin-top: -1.5rem; }
.mt-n5 { margin-top: -3rem; }
.mt-n75 { margin-top: -0.75rem; }


.mb-auto { margin-bottom: auto; }
.mb-0 { margin-bottom: 0; }
.mb-015 { margin-bottom: 0.15rem; }
.mb-1 { margin-bottom: 0.25rem; }
.mb-2 { margin-bottom: 0.5rem; }
.mb-75 { margin-bottom: 0.75rem; }
.mb-3 { margin-bottom: 1rem; }
.mb-4 { margin-bottom: 1.25rem; }
.mb-5 { margin-bottom: 1.5rem; }
.mb-6 { margin-bottom: 1.75rem; }
.mb-7 { margin-bottom: 2rem; }
.mb-8 { margin-bottom: 2.25rem; }
.mb-9 { margin-bottom: 2.5rem; }
.mb-10 { margin-bottom: 2.75rem; }
.mb-11 { margin-bottom: 3rem; }



.mb-n1 { margin-bottom: -0.25rem; }
.mb-n2 { margin-bottom: -0.5rem; }
.mb-n3 { margin-bottom: -0.75rem; }
.mb-n4 { margin-bottom: -1rem; }
.mb-n5 { margin-bottom: -1.25rem; }
.mb-n6 { margin-bottom: -1.5rem; }
.mb-n7 { margin-bottom: -1.75rem; }
.mb-n8 { margin-bottom: -2rem; }
.mb-n9 { margin-bottom: -2.25rem; }


.mr-auto{margin-right: auto;}
.mr-0 { margin-right: 0; }
.mr-1 { margin-right: 0.25rem; }
.mr-2 { margin-right: 0.5rem; }
.mr-3 { margin-right: 1rem; }
.mr-4 { margin-right: 1.5rem; }
.mr-5 { margin-right: 3rem; }
.mr-015 { margin-right: 0.15rem; }
.mr-06 { margin-right: 0.6rem; }
.mr-075 { margin-right: 0.75rem; }

.mr-n1 { margin-right: -0.25rem; }
.mr-n2 { margin-right: -0.5rem; }
.mr-n3 { margin-right: -1rem; }
.mr-n4 { margin-right: -1.5rem; }
.mr-n5 { margin-right: -2rem; }
.mr-n6 { margin-right: -2.5rem; }
.mr-n7 { margin-right: -3rem; }

.mr-b2{margin-right: 5%; }
.mr-b3{margin-right: 10%; }
.mr-b4{margin-right: 15%; }

.ml-auto{margin-left: auto;}
.ml-0 { margin-left: 0; }
.ml-1 { margin-left: 0.25rem; }
.ml-2 { margin-left: 0.5rem; }
.ml-3 { margin-left: 1rem; }
.ml-4 { margin-left: 1.5rem; }
.ml-5 { margin-left: 3rem; }

.ml-m1 { margin-left: -0.25rem; }
.ml-m2 { margin-left: -0.5rem; }
.ml-m3 { margin-left: -1rem; }
.ml-m4 { margin-left: -1.5rem; }
.ml-m5 { margin-left: -2rem; }
.ml-m6 { margin-left: -2.5rem; }
.ml-m7 { margin-left: -3rem; }

/* 内边距 */
.pt-0 { padding-top: 0; }
.pt-1 { padding-top: 0.25rem; }
.pt-2 { padding-top: 0.5rem; }
.pt-3 { padding-top: 0.75rem; }
.pt-4 { padding-top: 1rem; }
.pt-5 { padding-top: 1.25rem; }
.pt-6 { padding-top: 1.5rem; }
.pt-7 { padding-top: 1.75rem; }
.pt-8 { padding-top: 2rem; }
.pt-9 { padding-top: 2.25rem; }
.pt-10 { padding-top: 2.5rem; }
.pt-11 { padding-top: 2.75rem; }
.pt-12 { padding-top: 3rem; }

.pb-0 { padding-bottom: 0; }
.pb-1 { padding-bottom: 0.25rem; }
.pb-2 { padding-bottom: 0.5rem; }
.pb-3 { padding-bottom: 0.75rem; }
.pb-4 { padding-bottom: 1rem; }
.pb-5 { padding-bottom: 1.25rem; }
.pb-6 { padding-bottom: 1.5rem; }
.pb-7 { padding-bottom: 1.75rem; }
.pb-8 { padding-bottom: 2rem; }
.pb-9 { padding-bottom: 2.25rem; }
.pb-10 { padding-bottom: 2.5rem; }
.pb-11 { padding-bottom: 2.75rem; }
.pb-12 { padding-bottom: 3rem; }
.pb-13 { padding-bottom: 3.25rem; }
.pb-14 { padding-bottom: 3.5rem; }
.pb-15 { padding-bottom: 3.75rem; }
.pb-16 { padding-bottom: 4rem; }
.pb-06 { padding-bottom: 0.6rem; }

.pr-0 { padding-right: 0; }
.pr-1 { padding-right: 0.25rem; }
.pr-2 { padding-right: 0.5rem; }
.pr-3 { padding-right: 0.75rem; }
.pr-4 { padding-right: 1rem; }
.pr-5 { padding-right: 1.25rem; }
.pr-6 { padding-right: 1.5rem; }
.pr-7 { padding-right: 1.75rem; }
.pr-8 { padding-right: 2rem; }
.pr-9 { padding-right: 2.25rem; }
.pr-10 { padding-right: 2.5rem; }
.pr-11 { padding-right: 2.75rem; }
.pr-12 { padding-right: 3rem; }
.pr-13 { padding-right: 3.25rem; }
.pr-14 { padding-right: 3.5rem; }
.pr-15 { padding-right: 3.75rem; }
.pr-16 { padding-right: 4rem; }
.pr-17 { padding-right: 4.25rem; }
.pr-18 { padding-right: 4.5rem; }
.pr-19 { padding-right: 4.75rem; }
.pr-20 { padding-right: 5rem; }


.pl-0 { padding-left: 0; }
.pl-1 { padding-left: 0.25rem; }
.pl-2 { padding-left: 0.5rem; }
.pl-3 { padding-left: 0.75rem; }
.pl-4 { padding-left: 1rem; }
.pl-5 { padding-left: 1.25rem; }
.pl-6 { padding-left: 1.5rem; }
.pl-7 { padding-left: 1.75rem; }
.pl-8 { padding-left: 2rem; }
.pl-9 { padding-left: 2.25rem; }
.pl-10 { padding-left: 2.5rem; }
.pl-11 { padding-left: 2.75rem; }
.pl-12 { padding-left: 3rem; }
.pl-13 { padding-left: 3.25rem; }
.pl-14 { padding-left: 3.5rem; }
.pl-15 { padding-left: 3.75rem; }
.pl-16 { padding-left: 4rem; }



.bs-0{box-shadow: var(--max-shadow);}
.bs-1{box-shadow: 0 0px 4px rgba(0, 0, 0, 0.1);}
.bs-2{box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);}
.bs-2-12{box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);}

.sect-0{padding-top: 0;padding-bottom: 0;}
.sect-1{padding-top: 0.25rem;padding-bottom: 0.25rem;}
.sect-2{padding-top: 0.5rem;padding-bottom: 0.5rem;}
.sect-3{padding-top: 0.75rem;padding-bottom: 0.75rem;}
.sect-4{padding-top: 1rem;padding-bottom: 1rem;}
.sect-5{padding-top: 1.25rem;padding-bottom: 1.25rem;}
/* 边框工具类 */
.border-bottom {border-bottom: 1px solid #eee;}
.border-right {border-right: 1px solid #eee;}
.border-left {border-left: 1px solid #eee;}
.border-top {border-top: 1px solid #eee;}
.border {border: 1px solid var(--max-txt-border);}  /* 边框 */
.border-light {border: 1px solid var(--max-txt-border);}  /* 或者用这个名称 */
.border-white {border: 1px solid #fff;}

.fs-0 { font-size: 0.75rem; }
.fs-1 { font-size: 0.85rem; }
.fs-2 { font-size: 0.9rem; }
.fs-3 { font-size: 0.95rem; }
.fs-4 { font-size: 1rem; }
.fs-5 { font-size: 1.15rem; }
.fs-6 { font-size: 1.25rem; }
.fs-7 { font-size: 1.5rem; }
.fs-8 { font-size: 1.75rem; }
.fs-9 { font-size: 2rem; }
.fs-10 { font-size: 2.25rem; }
.fs-11 { font-size: 2.5rem; }
.fs-12 { font-size: 2.75rem; }
.fs-13 { font-size: 3rem; }
.fs-08 { font-size: 0.8rem; }


.fw-bold { font-weight:bold}
.fw-400 { font-weight: 400; }
.fw-500 { font-weight: 500; }
.fw-600 { font-weight: 600; }
.fw-700 { font-weight: 700; }
.fw-800 { font-weight: 800; }
.fw-900 { font-weight: 900; }


.l-0 { left: 0px; }
.l-5 { left: 5px; }
.l-6 { left: 6px; }
.l-7 { left: 7px; }
.l-8 { left: 8px; }
.l-9 { left: 9px; }
.l-15 { left: 15px; }
.l-20 { left: 20px; }
.l-10 { left: 10px; }
.l-50 { left: 50%; }
.l-55 { left: 55%; }

.b-0 { bottom: 0px; }
.b-5 { bottom: 5px; }
.b-6 { bottom: 6px; }
.b-7 { bottom: 7px; }
.b-8 { bottom: 8px; }
.b-9 { bottom: 9px; }
.b-10 { bottom: 10px; }

.t-0 { top: 0px; }
.t-5 { top: 5px; }
.t-6 { top: 6px; }
.t-7 { top: 7px; }
.t-8 { top: 8px; }
.t-9 { top: 9px; }
.t-10 { top: 10px; }
.t-15 { top: 15px; }
.t-17 { top: 17px; }

.r-0 { right: 0px; }
.r-5 { right: 5px; }
.r-6 { right: 6px; }
.r-7 { right: 7px; }
.r-8 { right: 8px; }
.r-9 { right: 9px; }
.r-10 { right: 10px; }
.r-12 { right: 12px; }
.r-15 { right: 15px; }
.r-20 { right: 20px; }
.r-24 { right: 24px; }
.r-30 { right: 30px; }
.r-100 { right: 100%; }

.t-n5 { top: -5px; }
.t-n6 { top: -6px; }
.t-n7 { top: -7px; }
.t-n8 { top: -8px; }
.t-n9 { top: -9px; }
.t-n10 { top: -10px; }

.r-n5 { right: -5px; }
.r-n6 { right: -6px; }
.r-n7 { right: -7px; }
.r-n8 { right: -8px; }
.r-n9 { right: -9px; }
.r-n10 { right: -10px; }
.r-n10 { right: -20px; }
.r-n100 { right: -100%; }

.b-n50 { bottom: -50px; }

.pos-rel { position: relative; }
.pos-abs { position: absolute; }
.pos-fixed { position: fixed; }
.pos-sticky { position: sticky; }
.pos-static { position: static; }
.poi-events{ pointer-events: auto; }
.poi-none{ pointer-events: none; }

.abs-center {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);}

/* Object-fit 工具类 */
.of-contain { object-fit: contain; }
.of-cover { object-fit: cover; }
.of-fill { object-fit: fill; }
.of-none { object-fit: none; }
.of-scale-down { object-fit: scale-down; }

/*.g-1{margin: 0 -8px;}*/
/*.g-1{margin: 0 -8px;}*/

.bai-bg{
    /*background: var(--max-2-bg);*/
    background: var(--max-5-bg);
}
.bai-mk{
    /*background: var(--max-bg);*/
    background: var(--max-1-card);
}
/*小组件模块背景*/
.bai-mk-1{
    background: var(--max-6-bg);
}
.bai-wz{
    color: #fff;
}


.d-none {
    display: none;
}
.d-flex {
    display: flex;
}
.d-block{
    display: block;
}

.badge{border-radius:4px;font-size:0.75rem;border:none;display:inline-block}

/*max对齐类*/
/* 水平对齐 */
.text-left { text-align: left; }
.text-right { text-align: right; }
.text-center { text-align: center; }

/* 主轴对齐（justify-content） */
.ju-start { justify-content: flex-start; }  /* 起始对齐（默认） */
.ju-end { justify-content: flex-end; }  /* 末尾对齐 */
.ju-center-1 { justify-content: center; }  /* 居中对齐 */
.ju-between { justify-content: space-between; }  /* 两端对齐 */
.ju-around { justify-content: space-around; }  /* 均匀分布，两端有间距 */
.ju-evenly { justify-content: space-evenly; }  /* 完全均匀分布 */
.ju-right { justify-content: flex-end; }  /* 右对齐 */
.ju-left { justify-content: flex-start; }  /* 左对齐 */
.ju-center-bet { justify-content: space-between; }  /* 两端对齐（同 ju-between） */

/* 交叉轴对齐（align-items） */
.align-start { align-items: flex-start; }  /* 起始对齐 */
.align-end { align-items: flex-end; }  /* 末尾对齐 */
.align-center { align-items: center; }  /* 居中对齐 */
.align-stretch { align-items: stretch; }  /* 拉伸对齐（默认） */
.align-baseline { align-items: baseline; }  /* 基线对齐 */

/* 单个元素自身对齐（align-self） */
.self-start { align-self: flex-start; }  /* 起始对齐 */
.self-end { align-self: flex-end; }  /* 末尾对齐 */
.self-center { align-self: center; }  /* 居中对齐 */
.self-stretch { align-self: stretch; }  /* 拉伸对齐 */
.self-baseline { align-self: baseline; }  /* 基线对齐 */

/* 多行整体对齐（align-content）- 需配合 flex-wrap: wrap 使用 */
.content-start { align-content: flex-start; }  /* 起始对齐 */
.content-end { align-content: flex-end; }  /* 末尾对齐 */
.content-center { align-content: center; }  /* 居中对齐 */
.content-between { align-content: space-between; }  /* 两端对齐 */
.content-around { align-content: space-around; }  /* 均匀分布 */
.content-stretch { align-content: stretch; }  /* 拉伸对齐（默认） */

/* 垂直对齐（用于行内元素） */
.align-top { vertical-align: top; }
.align-middle { vertical-align: middle; }
.align-bottom { vertical-align: bottom; }

/* Flex 方向 */
.flex-row { flex-direction: row; }  /* 水平方向（默认） */
.flex-column { flex-direction: column; }  /* 垂直方向 */
.flex-row-reverse { flex-direction: row-reverse; }  /* 水平反向 */
.flex-column-reverse { flex-direction: column-reverse; }  /* 垂直反向 */

/* Flex 换行 */
.flex-wrap { display: flex; flex-wrap: wrap; }  /* 换行 */
.flex-nowrap { flex-wrap: nowrap; }  /* 不换行（默认） */
.flex-wrap-reverse { flex-wrap: wrap-reverse; }  /* 反向换行 */

/* Flex 伸缩 */
.flex-1 { flex: 1; }  /* 占据剩余空间 */
.flex-auto { flex: 0 0 auto; }  /* 不放大不缩小，保持原始尺寸 */
.flex-initial { flex: 0 1 auto; }  /* 不放大但可缩小（默认） */
.flex-none { flex: none; }  /* 不放大不缩小 */

/* Flex 收缩控制 */
.flex-shrink-0 { flex-shrink: 0; }  /* 不收缩，保持原始尺寸 */
.flex-shrink-1 { flex-shrink: 1; }  /* 可收缩（默认） */

/* Flex 放大控制 */
.flex-grow-0 { flex-grow: 0; }  /* 不放大（默认） */
.flex-grow-1 { flex-grow: 1; }  /* 可放大占据剩余空间 */

/* 水平和垂直都居中（已有） */
.ju-center { display: flex; justify-content: center; align-items: center; }
.line-through {text-decoration: line-through;}


/* 白色文字阴影边框通用类 */
.text-shadow-1 {text-shadow: 0 0 3px rgba(0, 0, 0, 0.5), 0 0 5px rgba(0, 0, 0, 0.3);}
.text-shadow-2 {text-shadow: 0 0 2px rgba(0, 0, 0, 0.8), 0 0 4px rgba(0, 0, 0, 0.4);}
/*max背景色类*/
/* 单色背景 */
.bg-primary{background: linear-gradient(135deg, #1342e9 0%, #2b6aff 50%, #277cff 100%);}/*蓝色*/
.bg-skyblue{background: #007bff;}/*天空蓝*/
/*.bg-cerise{background: linear-gradient(135deg, #1342e9 0%, #2b6aff 50%, #277cff 100%);}*/

.bg-secondary { background-color: #6c757d; }/*灰色*/
.bg-gray{background: #ececec;}/*浅灰色*/
.bg-success {background: linear-gradient( -125deg,#0fe332 0%, #0fad5f 100%); }/*绿色*/
/*.bg-success-2 {background: linear-gradient(135deg, #059669, #10b981); }*/
.bg-emerald {background: linear-gradient(135deg, #059669, #10b981); }/*翠绿色渐变*/
.bg-danger{ background-color: #d40c0c; }/*红色*/
.bg-red { background-color: #ff0202; }/*亮红色*/

.bg-warning { background-color: #ffc107; }/*橙色*/
.bg-warning-2 { background: linear-gradient(135deg, #f59e0b, #f97316); }/*橙黄渐变*/
.bg-orange{background: #ff8015;}
.bg-info { background-color: #17a2b8; }/*墨绿*/
.bg-light { background-color: var(--max-3-bg); }/*浅灰白#f9f9f9*/
.bg-dark { background-color: #343a40; }/*黑色*/
.bg-purple{background-color: #ad0bf9;}/*紫色*/
.bg-purple-2 { background: linear-gradient(135deg, #7c3aed, #a855f7); }/*紫色渐变*/
.bg-white { background-color: #fff; }/*白色*/
.bg-light-white { background-color: #f6f6f6; }/*浅白色*/
.bg-transparent { background-color: transparent; }

.text-blue   { color: #2563eb; }      /* 蓝 */
.text-sky    { color: #0050ff; }      /* 亮 sky 蓝 */

.text-indigo { color: #6366f1; }      /* 浅紫 */
.text-slate  { color: #334155; }      /* 浅蓝黑 */
.text-a     { color: #242121; }      /* 全局默认黑 */
.text-gray  { color: var(--max-txt-color); }         /* 浅灰#666 */
.text-light-red{ color: #807f7f; }   /* 淡灰 */
.text-red    { color: #b91c1c; }      /* 暗红 */
.text-red-2    { color: #ec2828; }      /* 暗红 */
.text-red-3    { color: #ec2828; }      /* 亮红 */
.text-cyan{    color: #36d399;} /*青绿色*/
.text-green  { color: #16a34a; }      /* 绿 */
.text-yellow { color: #eab308; }      /* 黄 */
.text-orange { color: #f97316; }      /* 浅橙 */
.text-orange-2 { color: #ff0202; }      /* 红橙 */
.text-orange-3 { color: #ff4757; }      /* 深橙 */
.text-purple { color: #a855f7; }      /* 紫 */
.text-purple-1 { color: #e30ce8; }      /* 霓虹紫 */
.text-success { color: #24b92b; }     /* 绿 */
.text-success-2 { color: #0fcb18; }     /* 亮绿 */
.text-pink   { color: #ec4899; }      /* 粉 */
.text-pink-2   { color: #fb36b8; }      /* 亮粉 */
.text-light-gray{ color: #262525; }  /* 浅黑 */
.text-dark{color: #000;}/*黑色*/
.text-black      { color: var(--max-1-color); }
.text-white      { color: #fff; }
.text-gold      { color: #9f2d00; } /* 暗金色*/
.text-white-50 { color: #f2f2f2; }  /* 非常浅的灰白 */
.text-white-60 { color: #e6e6e6; }  /* 浅灰白 */
.text-white-70 { color: #d9d9d9; }  /* 灰白 */
.text-white-80 { color: #cccccc; }  /* 中灰白 */
.text-white-90 { color: #bfbfbf; }  /* 深灰白 */

/*.btn-group :last-child{*/
/*    margin-right: 0!important;*/
/*}*/
.bg-danger-info {background: linear-gradient(135deg, #EF5350, #E53935);}

.bg-danger-info:hover{
    /*filter: brightness(.95);*/
    
}
.bg-lanzi{
    background: linear-gradient( -125deg,#280093e0 0%, #3354d2 100%);
    color: #fff;
}
/*蓝紫*/
.b-1 {
    background: linear-gradient(-125deg, #320ecb 0%, #2f78fd 100%);
    color: #ffffff;
}

/*科技蓝*/
.b-blue {
    background: linear-gradient(-125deg, #0b5cff 0%, #00c6ff 100%);
    color: #ffffff;
}

/*青绿*/
.b-teal {
    background: linear-gradient(-125deg, #0f766e 0%, #2dd4bf 100%);
    color: #ffffff;
}

/*翡翠绿*/
.b-green {
    background: linear-gradient(-125deg, #047857 0%, #34d399 100%);
    color: #ffffff;
}

/*橙金*/
.b-orange {
    background: linear-gradient(-125deg, #ea580c 0%, #fbbf24 100%);
    color: #ffffff;
}

/*珊瑚红*/
.b-coral {
    background: linear-gradient(-125deg, #e11d48 0%, #fb7185 100%);
    color: #ffffff;
}

/*酒红玫红*/
.b-rose {
    background: linear-gradient(-125deg, #9f1239 0%, #fb7185 100%);
    color: #ffffff;
}

/*紫罗兰*/
.b-violet {
    background: linear-gradient(-125deg, #6d28d9 0%, #c084fc 100%);
    color: #ffffff;
}

/*星空紫蓝*/
.b-indigo {
    background: linear-gradient(-125deg, #1e1b4b 0%, #6366f1 100%);
    color: #ffffff;
}

/*午夜黑蓝*/
.b-dark {
    background: linear-gradient(-125deg, #0f172a 0%, #334155 100%);
    color: #ffffff;
}

/*灰阶银*/
.b-silver {
    background: linear-gradient(-125deg, #475569 0%, #cbd5e1 100%);
    color: #0f172a;
}

/*米金*/
.b-sand {
    background: linear-gradient(-125deg, #b45309 0%, #fde68a 100%);
    color: #422006;
}

/*粉樱*/
.b-pink {
    background: linear-gradient(-125deg, #be185d 0%, #f9a8d4 100%);
    color: #ffffff;
}

/*极光*/
.b-aurora {
    background: linear-gradient(-125deg, #0ea5e9 0%, #a855f7 100%);
    color: #ffffff;
}

/*日落*/
.b-sunset {
    background: linear-gradient(-125deg, #f97316 0%, #a855f7 100%);
    color: #ffffff;
}

/*森林*/
.b-forest {
    background: linear-gradient(-125deg, #14532d 0%, #4ade80 100%);
    color: #ffffff;
}

/*海洋*/
.b-ocean {
    background: linear-gradient(-125deg, #0c4a6e 0%, #38bdf8 100%);
    color: #ffffff;
}

/*黑金*/
.b-blackgold {
    background: linear-gradient(-125deg, #111827 0%, #d4af37 100%);
    color: #ffffff;
}

.p-05{padding:0 5px 0 5px;}
.p-0-5{padding:0px 5px;}
.p-0-6{padding:0px 6px;}
.p-0-8{padding:0px 8px;}
.p-1-4{padding:1px 4px;}
.p-2-4{padding:2px 4px;}
.p-1-5{padding:1px 5px;}
.p-2-5{padding:2px 5px;}
.p-1-6{padding:1px 6px;}
.p-2-6{padding:2px 6px;}
.p-2-8{padding:2px 8px;}
.p-2-10{padding:2px 10px;}
.p-3-8{padding:3px 8px;}
.p-4-8{padding:4px 8px;}
.p-4-12{padding:4px 12px;}
.p-4-12{padding:4px 16px;}
.p-5-4{padding:5px 4px;}
.p-5-8{padding:5px 8px;}
.p-5-12{padding:5px 12px;}
.p-6-0{padding:6px 0px;}
.p-6-12{padding:6px 12px;}
.p-6-15{padding:6px 15px;}
.p-8-4{padding:8px 4px;}
.p-8-10{padding:8px 10px;}
.p-8-12{padding:8px 12px;}
.p-8-15{padding:8px 15px;}
.p-10-15{padding:10px 15px;}
.p-5-15{padding:5px 15px;}
.p-8-25{padding:8px 25px;}
.p-8-35{padding:8px 35px;}
.p-8-38{padding:8px 38px;}
.p-8-48{padding:8px 48px;}
.p-12-15{padding:12px 15px;}
.p-12-32{padding:0.75rem 2rem;}
.p-16-20{padding:16px 20px;}
.p-20-30{padding:20px 30px;}
.p-25-58{padding:25px 50px;}

/*.badge-1{padding-right:5px;padding-left:5px;border-radius:4px;font-size:0.75rem;display:inline-block}*/
/*.badge-2{padding:3px 8px;border-radius:4px;font-size:0.75rem;border:none;display:inline-block}*/
/*.badge-3{padding:2px 5px;border-radius:4px;font-size:0.75rem;border:none;display:inline-block}*/
/*.badge-4{padding:8px 12px;border-radius:4px;font-size:0.75rem;border:none;display:inline-block}*/
/*.badge-5{padding:5px 8px;border-radius:4px;font-size:0.75rem;border:none;display:inline-block}*/
/*.badge-12{padding:0.75rem 2rem;border-radius:4px;font-size:0.75rem;border:none;display:inline-block}*/
/*.badge-5-4{padding:5px 4px;border-radius:4px;font-size:0.75rem;border:none;display:inline-block}*/
/*.badge-5-15{padding:5px 15px;border-radius:4px;font-size:0.75rem;border:none;display:inline-block}*/
/*.badge-8-35{padding:8px 35px;border-radius:4px;font-size:0.75rem;border:none;display:inline-block}*/

.img-15{width:15px;height:15px;line-height:15px;vertical-align:middle;background-size:contain!important}
.img-18{width:18px;height:18px;line-height:18px;vertical-align:middle;background-size:contain!important}
.img-20{width:20px;height:20px;line-height:20px;vertical-align:middle;background-size:contain!important}
.img-25,.user-nav-item i{width:25px;height:25px;line-height:25px;vertical-align:middle;background-size:contain!important}
.img-30{width:30px;height:30px;line-height:30px;vertical-align:middle;background-size:contain!important}
.img-35{width:35px;height:35px;line-height:35px;vertical-align:middle;background-size:contain!important}
.img-40{width:40px;height:40px;line-height:40px;vertical-align:middle;background-size:contain!important}
.img-45{width:45px;height:45px;line-height:45px;vertical-align:middle;background-size:contain!important}

.card-1{
    margin-bottom: 1.25rem;
    padding: 20px;
    background: var(--max-5-bg);
    border-radius: 0.25rem;
    position: relative;
}
/*.badge-4{*/
/*    padding: 8px 12px 8px 12px;*/
/*    border-radius: 4px;*/
/*    font-size: 0.75rem;*/
/*    border: none;*/
/*}*/

/*max按钮类*/
.btn-tran, .btn-tran-right, .btn-tran-left, .btn-tran-down, .btn-tran-up { transition: all 0.3s; }
.btn-tran:hover { transform: translateY(-3px); } /* 上移 */
.btn-tran-right:hover { transform: translateX(4px); } /* 右移 */
.btn-tran-left:hover { transform: translateX(-4px); } /* 左移 */
.btn-tran-down:hover { transform: translateY(3px); } /* 下移 */
.btn-tran-up:hover { transform: translateY(-4px); } /* 上移 */


/* 渐变遮罩*/
/* 从下到上渐变遮罩（底部深色） */
.overlay-dark-bottom {
    background: linear-gradient(to bottom, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.6) 100%);
}

/* 从上到下渐变遮罩（顶部深色） */
.overlay-dark-top {
    background: linear-gradient(to top, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.6) 100%);
}

/* 从左到右渐变遮罩（右侧深色） */
.overlay-dark-right {
    background: linear-gradient(to left, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.6) 100%);
}

/* 从右到左渐变遮罩（左侧深色） */
.overlay-dark-left {
    background: linear-gradient(to right, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.6) 100%);
}

/* 中心向四周渐变遮罩 */
.overlay-dark-center {
    background: radial-gradient(ellipse at center, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.6) 100%);
}

/* 轻度遮罩（底部） */
.overlay-light-bottom {
    background: linear-gradient(to bottom, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0.3) 100%);
}

/* 重度遮罩（底部） */
.overlay-heavy-bottom {
    background: linear-gradient(to bottom, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.8) 100%);
}














.opacity:hover{
    opacity: 0.8;
    
}
.filter:hover{
    filter: brightness(.9);
}



/* ===== 白灰色 ===== */
.bd-whiting       { border:2px solid #d7d7d7; background:#fff; color:#000; }
.bd-whiting:hover { background:#f8fafc; color:#000; }
/* ===== 蓝色 ===== */
.bd-blue       { border:1px solid #2163e8; background:#fff; color:#2163e8; }
.bd-blue:hover { background:#2163e8; color:#fff; }

/* ===== 蓝色 ===== */
.bd-blue-2       { border:1px solid #155cf9; background:#155cf9; color:#fff; }
.bd-blue-2:hover { background:#0e4fd1; }


/* ===== 线条蓝 ===== */
.bd-light-blue       { border:1px solid #2163e8; background:#fff; color:#2163e8; }
.bd-light-blue:hover { background:#f3f9ff; }


.bd-blue.active{background:#2163e8; color:#fff; }
/* ===== 红色 ===== */
.bd-red        { border:2px solid #f5222d; background:#fff; color:#f5222d; }
.bd-red:hover  { background:#f5222d; color:#fff; }

/* ===== 绿色 ===== */
.bd-green      { border:2px solid #52c41a; background:#fff; color:#52c41a; }
.bd-green:hover{ background:#52c41a; color:#fff; }

/* ===== 橙色 ===== */
.bd-orange     { border:2px solid #fa8c16; background:#fff; color:#fa8c16; }
.bd-orange:hover{background:#fa8c16; color:#fff; }

/* ===== 紫色 ===== */
.bd-purple     { border:2px solid #722ed1; background:#fff; color:#722ed1; }
.bd-purple:hover{background:#722ed1; color:#fff; }

/* ===== 青色 ===== */
.bd-cyan       { border:2px solid #13c2c2; background:#fff; color:#13c2c2; }
.bd-cyan:hover { background:#13c2c2; color:#fff; }

/* ===== 粉色 ===== */
.bd-pink       { border:2px solid #eb2f96; background:#fff; color:#eb2f96; }
.bd-pink:hover { background:#eb2f96; color:#fff; }

/* ===== 黄色 ===== */
.bd-yellow     { border:2px solid #fadb14; background:#fff; color:#fadb14; }
.bd-yellow:hover{background:#fadb14; color:#fff; }

/* ===== 灰色 ===== */
.bd-gray       { border:2px solid #8c8c8c; background:#fff; color:#8c8c8c; }
.bd-gray:hover { background:#8c8c8c; color:#fff; }

/* ===== 黑色 ===== */
.bd-dark       { border:2px solid #262626; background:#fff; color:#262626; }
.bd-dark:hover { background:#262626; color:#fff; }


/* ========== 响应式规则 ========== */



/* 1列布局 (100%) */
.col-1-1 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: 100%;
}

/* 2列布局 (50%) */
.col-1-2 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: 50%;
}

/* 3列布局 (33.3333%) */
.col-1-3 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: 33.333333%;
}

/* 4列布局 (25%) */
/*.col-1-4 {*/
/*    -webkit-box-flex: 0;*/
/*    -ms-flex: 0 0 auto;*/
/*    flex: 0 0 auto;*/
/*    width: 25%;*/
/*}*/

/* 5列布局 (20%) */
/*.col-1-5 {*/
/*    -webkit-box-flex: 0;*/
/*    -ms-flex: 0 0 auto;*/
/*    flex: 0 0 auto;*/
/*    width: 20%;*/
/*}*/

/* 6列布局 (16.6667%) */
/*.col-1-6 {*/
/*    -webkit-box-flex: 0;*/
/*    -ms-flex: 0 0 auto;*/
/*    flex: 0 0 auto;*/
/*    width: 16.666667%;*/
/*}*/

/* 7列布局 (14.2857%) */
/*.col-1-7 {*/
/*    -webkit-box-flex: 0;*/
/*    -ms-flex: 0 0 auto;*/
/*    flex: 0 0 auto;*/
/*    width: 14.285714%;*/
/*}*/

/* 8列布局 (12.5%) */
/*.col-1-8 {*/
/*    -webkit-box-flex: 0;*/
/*    -ms-flex: 0 0 auto;*/
/*    flex: 0 0 auto;*/
/*    width: 12.5%;*/
/*}*/

/*.col-1-9 {*/
/*    -webkit-box-flex: 0;*/
/*    -ms-flex: 0 0 auto;*/
/*    flex: 0 0 auto;*/
/*    width: 11.11111111%;*/
/*}*/

/*.col-1-10 {*/
/*    -webkit-box-flex: 0;*/
/*    -ms-flex: 0 0 auto;*/
/*    flex: 0 0 auto;*/
/*    width: 10%;*/
/*}*/
/* 中等屏幕 (992px-1199px) */


/* 小屏幕 (768px-991px) */

.col-xg-4 > [class^="col-1-"] {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: 25%;
    padding: 8px;
}


@media (min-width: 599px) and (max-width: 769px){
    /*.col-1-1, .col-1-2, */
    .col-1-3, .col-1-4,.col-1-5,.col-1-6,.col-1-7,.col-1-8,.col-1-9,.col-1-10,.col-xg-4 > [class^="col-1-"]{
        -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: 50%;
    }
}

@media (min-width: 769px) and (max-width: 998px){
    /*.col-1-1, .col-1-2, */
    .col-1-4,.col-1-5,.col-1-6,.col-1-7,.col-1-8,.col-1-9,.col-1-10,.col-xg-4 > [class^="col-1-"]{
        -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: 33.333333%;
    }
}
@media (min-width: 998px) and (max-width: 1200px){
   .col-1-4,.col-1-5, .col-1-6{
        -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: 25%;
    }
    .col-1-7, .col-1-8,.col-1-9,.col-1-10 {
        
        -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: 16.666667%;
    }
}
@media (min-width: 1200px){
    
    .col-1-4 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: 25%;
    }
    .col-1-5{
        -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: 20%;
    } 
    .col-1-6 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: 16.666667%;
    }
    .col-1-7 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: 14.285714%;
    }
    
    /* 8列布局 (12.5%) */
    .col-1-8 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: 12.5%;
    }
    
    .col-1-9 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: 11.11111111%;
    }
    
    .col-1-10 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: 10%;
    }

}
/* 自定义列宽 */

@media (max-width: 598px) {
.mobile-cols-1 > [class*="col-"] {
    
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: 100%;
}
.mobile-cols-2 > [class*="col-"] {
    
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: 50%;
}
.mobile-cols-3 > [class*="col-"] {
    
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: 33.333333%;
}
.sj-jinz{
    display: none!important;
}
.sect-4{
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    }
}
@media (min-width: 598px) {
    .pc-jinz {
        display: none!important;
    }
}
@media (max-width: 300px) {
.mobile-cols-2 > [class*="col-"] {
    
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: 100%;
    }
}
@media (max-width: 998px) {
.cols-0 {
    
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: 100%;
}
.col-3 { flex: 0 0 100%; max-width: 100%; }
}
@media (max-width: 768px) {
.cols-1 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: 50%;
    }
}