@charset "utf-8";

/* ==========================================================================
   全局响应式内外边距 (5~100, 步长5)
   采用 CSS 变量控制：PC端使用 rem 等比缩放，手机端使用 px 保底防止过小
   ========================================================================== */

/* 1. 定义间距变量 (默认 PC 端使用 rem) */
:root {
    --sp-5: 0.05rem;  --sp-10: 0.1rem;  --sp-15: 0.15rem; --sp-20: 0.2rem;
    --sp-25: 0.25rem; --sp-30: 0.3rem;  --sp-35: 0.35rem; --sp-40: 0.4rem;
    --sp-45: 0.45rem; --sp-50: 0.5rem;  --sp-55: 0.55rem; --sp-60: 0.6rem;
    --sp-65: 0.65rem; --sp-70: 0.7rem;  --sp-75: 0.75rem; --sp-80: 0.8rem;
    --sp-85: 0.85rem; --sp-90: 0.9rem;  --sp-95: 0.95rem; --sp-100: 1rem;
}

/* 2. 平板端适配 (<1200px)：适当减小大间距的 rem 比例 */
@media screen and (max-width: 1200px) {
    :root {
        --sp-100: 0.8rem;  --sp-95: 0.76rem; --sp-90: 0.72rem; --sp-85: 0.68rem;
        --sp-80: 0.64rem;  --sp-75: 0.6rem;  --sp-70: 0.56rem; --sp-65: 0.52rem;
        --sp-60: 0.48rem;  --sp-55: 0.44rem; --sp-50: 0.4rem;  --sp-45: 0.36rem;
        --sp-40: 0.32rem;  --sp-35: 0.28rem; --sp-30: 0.24rem;
        /* 30以下的间距保持原 rem 比例即可 */
    }
}

/* 3. 手机端适配 (<768px)：改用固定 px 作为保底，防止 rem 缩放导致间距缩成一条线 */
@media screen and (max-width: 768px) {
    :root {
        --sp-100: 70px; --sp-95: 64px; --sp-90: 60px; --sp-85: 56px;
        --sp-80: 52px;  --sp-75: 48px; --sp-70: 44px; --sp-65: 40px;
        --sp-60: 36px;  --sp-55: 32px; --sp-50: 28px; --sp-45: 26px;
        --sp-40: 24px;  --sp-35: 22px; --sp-30: 20px; --sp-25: 18px;
        --sp-20: 14px;  --sp-15: 12px;  --sp-10: 8px;  --sp-5: 5px;
    }
}

/* ==========================================================================
   生成具体的 Padding 和 Margin 类名
   ========================================================================== */

/* Padding (内边距) */
.p5 { padding: var(--sp-5); } .pt-5 { padding-top: var(--sp-5); } .pb-5 { padding-bottom: var(--sp-5); } .pl-5 { padding-left: var(--sp-5); } .pr-5 { padding-right: var(--sp-5); }
.p10 { padding: var(--sp-10); } .pt-10 { padding-top: var(--sp-10); } .pb-10 { padding-bottom: var(--sp-10); } .pl-10 { padding-left: var(--sp-10); } .pr-10 { padding-right: var(--sp-10); }
.p15 { padding: var(--sp-15); } .pt-15 { padding-top: var(--sp-15); } .pb-15 { padding-bottom: var(--sp-15); } .pl-15 { padding-left: var(--sp-15); } .pr-15 { padding-right: var(--sp-15); }
.p20 { padding: var(--sp-20); } .pt-20 { padding-top: var(--sp-20); } .pb-20 { padding-bottom: var(--sp-20); } .pl-20 { padding-left: var(--sp-20); } .pr-20 { padding-right: var(--sp-20); }
.p25 { padding: var(--sp-25); } .pt-25 { padding-top: var(--sp-25); } .pb-25 { padding-bottom: var(--sp-25); } .pl-25 { padding-left: var(--sp-25); } .pr-25 { padding-right: var(--sp-25); }
.p30 { padding: var(--sp-30); } .pt-30 { padding-top: var(--sp-30); } .pb-30 { padding-bottom: var(--sp-30); } .pl-30 { padding-left: var(--sp-30); } .pr-30 { padding-right: var(--sp-30); }
.p35 { padding: var(--sp-35); } .pt-35 { padding-top: var(--sp-35); } .pb-35 { padding-bottom: var(--sp-35); } .pl-35 { padding-left: var(--sp-35); } .pr-35 { padding-right: var(--sp-35); }
.p40 { padding: var(--sp-40); } .pt-40 { padding-top: var(--sp-40); } .pb-40 { padding-bottom: var(--sp-40); } .pl-40 { padding-left: var(--sp-40); } .pr-40 { padding-right: var(--sp-40); }
.p45 { padding: var(--sp-45); } .pt-45 { padding-top: var(--sp-45); } .pb-45 { padding-bottom: var(--sp-45); } .pl-45 { padding-left: var(--sp-45); } .pr-45 { padding-right: var(--sp-45); }
.p50 { padding: var(--sp-50); } .pt-50 { padding-top: var(--sp-50); } .pb-50 { padding-bottom: var(--sp-50); } .pl-50 { padding-left: var(--sp-50); } .pr-50 { padding-right: var(--sp-50); }
.p55 { padding: var(--sp-55); } .pt-55 { padding-top: var(--sp-55); } .pb-55 { padding-bottom: var(--sp-55); } .pl-55 { padding-left: var(--sp-55); } .pr-55 { padding-right: var(--sp-55); }
.p60 { padding: var(--sp-60); } .pt-60 { padding-top: var(--sp-60); } .pb-60 { padding-bottom: var(--sp-60); } .pl-60 { padding-left: var(--sp-60); } .pr-60 { padding-right: var(--sp-60); }
.p65 { padding: var(--sp-65); } .pt-65 { padding-top: var(--sp-65); } .pb-65 { padding-bottom: var(--sp-65); } .pl-65 { padding-left: var(--sp-65); } .pr-65 { padding-right: var(--sp-65); }
.p70 { padding: var(--sp-70); } .pt-70 { padding-top: var(--sp-70); } .pb-70 { padding-bottom: var(--sp-70); } .pl-70 { padding-left: var(--sp-70); } .pr-70 { padding-right: var(--sp-70); }
.p75 { padding: var(--sp-75); } .pt-75 { padding-top: var(--sp-75); } .pb-75 { padding-bottom: var(--sp-75); } .pl-75 { padding-left: var(--sp-75); } .pr-75 { padding-right: var(--sp-75); }
.p80 { padding: var(--sp-80); } .pt-80 { padding-top: var(--sp-80); } .pb-80 { padding-bottom: var(--sp-80); } .pl-80 { padding-left: var(--sp-80); } .pr-80 { padding-right: var(--sp-80); }
.p85 { padding: var(--sp-85); } .pt-85 { padding-top: var(--sp-85); } .pb-85 { padding-bottom: var(--sp-85); } .pl-85 { padding-left: var(--sp-85); } .pr-85 { padding-right: var(--sp-85); }
.p90 { padding: var(--sp-90); } .pt-90 { padding-top: var(--sp-90); } .pb-90 { padding-bottom: var(--sp-90); } .pl-90 { padding-left: var(--sp-90); } .pr-90 { padding-right: var(--sp-90); }
.p95 { padding: var(--sp-95); } .pt-95 { padding-top: var(--sp-95); } .pb-95 { padding-bottom: var(--sp-95); } .pl-95 { padding-left: var(--sp-95); } .pr-95 { padding-right: var(--sp-95); }
.p100 { padding: var(--sp-100); } .pt-100 { padding-top: var(--sp-100); } .pb-100 { padding-bottom: var(--sp-100); } .pl-100 { padding-left: var(--sp-100); } .pr-100 { padding-right: var(--sp-100); }

/* Margin (外边距) */
.m5 { margin: var(--sp-5); } .mt-5 { margin-top: var(--sp-5); } .mb-5 { margin-bottom: var(--sp-5); } .ml-5 { margin-left: var(--sp-5); } .mr-5 { margin-right: var(--sp-5); }
.m10 { margin: var(--sp-10); } .mt-10 { margin-top: var(--sp-10); } .mb-10 { margin-bottom: var(--sp-10); } .ml-10 { margin-left: var(--sp-10); } .mr-10 { margin-right: var(--sp-10); }
.m15 { margin: var(--sp-15); } .mt-15 { margin-top: var(--sp-15); } .mb-15 { margin-bottom: var(--sp-15); } .ml-15 { margin-left: var(--sp-15); } .mr-15 { margin-right: var(--sp-15); }
.m20 { margin: var(--sp-20); } .mt-20 { margin-top: var(--sp-20); } .mb-20 { margin-bottom: var(--sp-20); } .ml-20 { margin-left: var(--sp-20); } .mr-20 { margin-right: var(--sp-20); }
.m25 { margin: var(--sp-25); } .mt-25 { margin-top: var(--sp-25); } .mb-25 { margin-bottom: var(--sp-25); } .ml-25 { margin-left: var(--sp-25); } .mr-25 { margin-right: var(--sp-25); }
.m30 { margin: var(--sp-30); } .mt-30 { margin-top: var(--sp-30); } .mb-30 { margin-bottom: var(--sp-30); } .ml-30 { margin-left: var(--sp-30); } .mr-30 { margin-right: var(--sp-30); }
.m35 { margin: var(--sp-35); } .mt-35 { margin-top: var(--sp-35); } .mb-35 { margin-bottom: var(--sp-35); } .ml-35 { margin-left: var(--sp-35); } .mr-35 { margin-right: var(--sp-35); }
.m40 { margin: var(--sp-40); } .mt-40 { margin-top: var(--sp-40); } .mb-40 { margin-bottom: var(--sp-40); } .ml-40 { margin-left: var(--sp-40); } .mr-40 { margin-right: var(--sp-40); }
.m45 { margin: var(--sp-45); } .mt-45 { margin-top: var(--sp-45); } .mb-45 { margin-bottom: var(--sp-45); } .ml-45 { margin-left: var(--sp-45); } .mr-45 { margin-right: var(--sp-45); }
.m50 { margin: var(--sp-50); } .mt-50 { margin-top: var(--sp-50); } .mb-50 { margin-bottom: var(--sp-50); } .ml-50 { margin-left: var(--sp-50); } .mr-50 { margin-right: var(--sp-50); }
.m55 { margin: var(--sp-55); } .mt-55 { margin-top: var(--sp-55); } .mb-55 { margin-bottom: var(--sp-55); } .ml-55 { margin-left: var(--sp-55); } .mr-55 { margin-right: var(--sp-55); }
.m60 { margin: var(--sp-60); } .mt-60 { margin-top: var(--sp-60); } .mb-60 { margin-bottom: var(--sp-60); } .ml-60 { margin-left: var(--sp-60); } .mr-60 { margin-right: var(--sp-60); }
.m65 { margin: var(--sp-65); } .mt-65 { margin-top: var(--sp-65); } .mb-65 { margin-bottom: var(--sp-65); } .ml-65 { margin-left: var(--sp-65); } .mr-65 { margin-right: var(--sp-65); }
.m70 { margin: var(--sp-70); } .mt-70 { margin-top: var(--sp-70); } .mb-70 { margin-bottom: var(--sp-70); } .ml-70 { margin-left: var(--sp-70); } .mr-70 { margin-right: var(--sp-70); }
.m75 { margin: var(--sp-75); } .mt-75 { margin-top: var(--sp-75); } .mb-75 { margin-bottom: var(--sp-75); } .ml-75 { margin-left: var(--sp-75); } .mr-75 { margin-right: var(--sp-75); }
.m80 { margin: var(--sp-80); } .mt-80 { margin-top: var(--sp-80); } .mb-80 { margin-bottom: var(--sp-80); } .ml-80 { margin-left: var(--sp-80); } .mr-80 { margin-right: var(--sp-80); }
.m85 { margin: var(--sp-85); } .mt-85 { margin-top: var(--sp-85); } .mb-85 { margin-bottom: var(--sp-85); } .ml-85 { margin-left: var(--sp-85); } .mr-85 { margin-right: var(--sp-85); }
.m90 { margin: var(--sp-90); } .mt-90 { margin-top: var(--sp-90); } .mb-90 { margin-bottom: var(--sp-90); } .ml-90 { margin-left: var(--sp-90); } .mr-90 { margin-right: var(--sp-90); }
.m95 { margin: var(--sp-95); } .mt-95 { margin-top: var(--sp-95); } .mb-95 { margin-bottom: var(--sp-95); } .ml-95 { margin-left: var(--sp-95); } .mr-95 { margin-right: var(--sp-95); }
.m100 { margin: var(--sp-100); } .mt-100 { margin-top: var(--sp-100); } .mb-100 { margin-bottom: var(--sp-100); } .ml-100 { margin-left: var(--sp-100); } .mr-100 { margin-right: var(--sp-100); }


/* ==========================================================================
   补充：水平与垂直方向内边距 (Padding X / Padding Y)
   ========================================================================== */
/* 水平内边距 (左右) */
.px-5 { padding-left: var(--sp-5); padding-right: var(--sp-5); }
.px-10 { padding-left: var(--sp-10); padding-right: var(--sp-10); }
.px-15 { padding-left: var(--sp-15); padding-right: var(--sp-15); }
.px-20 { padding-left: var(--sp-20); padding-right: var(--sp-20); }
.px-25 { padding-left: var(--sp-25); padding-right: var(--sp-25); }
.px-30 { padding-left: var(--sp-30); padding-right: var(--sp-30); }
.px-35 { padding-left: var(--sp-35); padding-right: var(--sp-35); }
.px-40 { padding-left: var(--sp-40); padding-right: var(--sp-40); }
.px-45 { padding-left: var(--sp-45); padding-right: var(--sp-45); }
.px-50 { padding-left: var(--sp-50); padding-right: var(--sp-50); }
.px-55 { padding-left: var(--sp-55); padding-right: var(--sp-55); }
.px-60 { padding-left: var(--sp-60); padding-right: var(--sp-60); }
.px-65 { padding-left: var(--sp-65); padding-right: var(--sp-65); }
.px-70 { padding-left: var(--sp-70); padding-right: var(--sp-70); }
.px-75 { padding-left: var(--sp-75); padding-right: var(--sp-75); }
.px-80 { padding-left: var(--sp-80); padding-right: var(--sp-80); }
.px-85 { padding-left: var(--sp-85); padding-right: var(--sp-85); }
.px-90 { padding-left: var(--sp-90); padding-right: var(--sp-90); }
.px-95 { padding-left: var(--sp-95); padding-right: var(--sp-95); }
.px-100 { padding-left: var(--sp-100); padding-right: var(--sp-100); }

/* 垂直内边距 (上下) */
.py-5 { padding-top: var(--sp-5); padding-bottom: var(--sp-5); }
.py-10 { padding-top: var(--sp-10); padding-bottom: var(--sp-10); }
.py-15 { padding-top: var(--sp-15); padding-bottom: var(--sp-15); }
.py-20 { padding-top: var(--sp-20); padding-bottom: var(--sp-20); }
.py-25 { padding-top: var(--sp-25); padding-bottom: var(--sp-25); }
.py-30 { padding-top: var(--sp-30); padding-bottom: var(--sp-30); }
.py-35 { padding-top: var(--sp-35); padding-bottom: var(--sp-35); }
.py-40 { padding-top: var(--sp-40); padding-bottom: var(--sp-40); }
.py-45 { padding-top: var(--sp-45); padding-bottom: var(--sp-45); }
.py-50 { padding-top: var(--sp-50); padding-bottom: var(--sp-50); }
.py-55 { padding-top: var(--sp-55); padding-bottom: var(--sp-55); }
.py-60 { padding-top: var(--sp-60); padding-bottom: var(--sp-60); }
.py-65 { padding-top: var(--sp-65); padding-bottom: var(--sp-65); }
.py-70 { padding-top: var(--sp-70); padding-bottom: var(--sp-70); }
.py-75 { padding-top: var(--sp-75); padding-bottom: var(--sp-75); }
.py-80 { padding-top: var(--sp-80); padding-bottom: var(--sp-80); }
.py-85 { padding-top: var(--sp-85); padding-bottom: var(--sp-85); }
.py-90 { padding-top: var(--sp-90); padding-bottom: var(--sp-90); }
.py-95 { padding-top: var(--sp-95); padding-bottom: var(--sp-95); }
.py-100 { padding-top: var(--sp-100); padding-bottom: var(--sp-100); }


/* ==========================================================================
   1. 补充的基础原子类 (Utility Classes - 仅保留您基础库中没有的)
   ========================================================================== */

/* 定位 */
.relative { position: relative; }
.absolute { position: absolute; }
.fixed { position: fixed; }
.top-0 { top: 0; }
.left-0 { left: 0; }
.top-20 { top: 0.2rem; }
.bottom-0 { bottom: 0; }
.right-0 { right: 0; }
.z-index-1 { z-index: 1; }
.z-index-2 { z-index: 2; }
.z-index-3 { z-index: 3; }
.z-index-999 { z-index: 999; }
.i-display{display: inline-block;}
.block{display: block;}
.mlr{margin-left: auto;margin-right: auto;}

/* 字体排版补充 */
.fwb { font-weight: 600; }
.tac { text-align: center; }
.ttu { text-transform: uppercase; }
.lh-1 { line-height: 1; }
.lh-12 { line-height: 1.2; }
.lh-13 { line-height: 1.3; }
.lh-15 { line-height: 1.5; }
.lh-16 { line-height: 1.6; }
.lh-20 { line-height: 2.0; }
.tracking-wider { letter-spacing: 0.05em; }

/* 颜色与背景补充 */
.color-3 { color: #333; }
.color-6 { color: #666; }
.color-9 { color: #999; }
.color-d { color: #ddd; }
.color-white { color: #fff; }
.color-theme { color: var(--theme-color); }
.bg-white { background-color: #fff; }
.bg-f8 { background-color: #f8f9f9; }
.bg-eee { background-color: #eee; }
.bg-dark { background-color: #001322; }
.bg-theme { background-color: var(--theme-color); }
.bg-sec-blue { background-color: #0A2558; }
.bg-dark-opacity { background-color: rgba(0, 19, 34, 0.85); }
.bg-white-10 { background-color: rgba(255, 255, 255, 0.1); }

/* 边框与圆角 */
.radius5 { border-radius: 5px; }
.radius10 { border-radius: 10px; }
.radius20 { border-radius: 20px; }
.radius50 { border-radius: 50%; }
.border-none { border: none; }
.border-3-theme { border: 3px solid var(--theme-color); }
.border-white-1 { border: 1px solid rgba(255, 255, 255, 0.1); }
.border-b-white-1 { border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
.border-b-eee { border-bottom: 1px solid #eee; }

/* 效果与交互 */
.trs3 { transition: all 0.3s ease; }
.trs5 { transition: all 0.5s ease; }
.cursor-pointer { cursor: pointer; }
.ofh { overflow: hidden; }
.object-cover { object-fit: cover; }
.opacity-20 { opacity: 0.2; }
.opacity-50 { opacity: 0.5; }
.opacity-60 { opacity: 0.6; }
.opacity-80 { opacity: 0.8; }
.opacity-90 { opacity: 0.9; }
.inline-block { display: inline-block; }
.shadow-sm { box-shadow: 0 2px 10px rgba(0,0,0,0.05); }
.shadow-lg { box-shadow: 0 15px 40px rgba(0,0,0,0.08); }


/* 宽高小工具 */
.w-40 { width: 0.4rem; }
.h-40 { height: 0.4rem; }
.w-36 { width: 0.36rem; }
.h-36 { height: 0.36rem; }
.w-10 { width: 0.1rem; }
.h-10 { height: 0.1rem; }
.h-2px { height: 2px; }
.w-0 { width: 0; }