@charset "utf-8";
/* =====================================================================
   励行科技官网 · 统一视觉主题层
   ---------------------------------------------------------------------
   定位: 只做视觉升级(配色/圆角/阴影/间距/字体/动效), 不动布局定位,
        也不改任何 display/position, 避免破坏原有结构与 JS 交互。
   引入: 必须放在 style.css / sub.css / index.css / about.css / phone.css
        之后(页面最后一个 <link> 下面), 靠层叠顺序生效。
   分节: 1 设计令牌  2 基础排版  3 页头导航  4 下拉面板  5 页脚
        6 标题      7 卡片      8 下载页    9 面包屑/筛选
        10 细节与响应式
   ===================================================================== */

/* ---------- 1. 设计令牌 ---------- */
:root {
    /* 品牌色(沿用原站主色 #2AA0DE,加深一档做渐变) */
    --lx-primary: #2AA0DE;
    --lx-primary-600: #1B87C7;
    --lx-primary-700: #0B6FB8;
    --lx-accent: #37D5FF;
    --lx-grad: linear-gradient(135deg, #2AA0DE 0%, #1E7FD6 48%, #0B6FB8 100%);

    /* 辅助色(下载页按"文件类别/表格行"轮换使用, 让页面不至于只有一种蓝) */
    --lx-violet: #7C6BF5;
    --lx-violet-ink: #5B4BE0;
    --lx-violet-soft: #F1EFFE;
    --lx-teal: #12B39A;
    --lx-teal-ink: #0E8F7C;
    --lx-teal-soft: #E6F8F4;
    --lx-amber: #F0912F;
    --lx-amber-ink: #C96F14;
    --lx-amber-soft: #FFF4E8;

    /* 深色(页头/下拉/页脚) */
    --lx-ink-900: #15161A;
    --lx-ink-800: #1D1F25;
    --lx-ink-700: #26282F;

    /* 中性 */
    --lx-text: #22262E;
    --lx-text-2: #5A6472;
    --lx-text-3: #8A94A6;
    --lx-line: #E9EDF3;
    --lx-surface: #FFFFFF;
    --lx-surface-2: #F6F9FC;

    /* 圆角 / 阴影 / 动效 */
    --lx-r-sm: 8px;
    --lx-r: 14px;
    --lx-r-lg: 20px;
    --lx-r-pill: 999px;
    --lx-s-1: 0 2px 10px rgba(16, 32, 64, .06);
    --lx-s-2: 0 12px 30px rgba(16, 32, 64, .10);
    --lx-s-3: 0 22px 56px rgba(16, 32, 64, .16);
    --lx-ease: cubic-bezier(.22, .61, .36, 1);
    --lx-dur: .28s;
}

/* ---------- 2. 基础排版 ---------- */
body {
    font-family: "PingFang SC", "HarmonyOS Sans SC", "Microsoft YaHei", system-ui,
        -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    color: var(--lx-text);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

a {
    transition: color var(--lx-dur) var(--lx-ease),
        background-color var(--lx-dur) var(--lx-ease),
        border-color var(--lx-dur) var(--lx-ease),
        box-shadow var(--lx-dur) var(--lx-ease),
        transform var(--lx-dur) var(--lx-ease);
}

a:focus-visible {
    outline: 2px solid var(--lx-primary);
    outline-offset: 2px;
    border-radius: 4px;
}

::selection {
    background: rgba(42, 160, 222, .22);
    color: #0B2C42;
}

/* 滚动条 */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}
::-webkit-scrollbar-track {
    background: #F2F5F9;
}
::-webkit-scrollbar-thumb {
    background: #C6D2DF;
    border-radius: var(--lx-r-pill);
    border: 3px solid #F2F5F9;
}
::-webkit-scrollbar-thumb:hover {
    background: #9FB3C6;
}

/* ---------- 3. 页头 / 导航 ---------- */
.header {
    box-shadow: 0 6px 24px rgba(10, 20, 40, .10);
}

.header .pc-nav-container {
    background: rgba(21, 22, 26, .92);
    -webkit-backdrop-filter: saturate(150%) blur(14px);
    backdrop-filter: saturate(150%) blur(14px);
    border-bottom: 1px solid rgba(255, 255, 255, .08);
    box-shadow: none;
}

.header .pc-nav-container .logo img {
    height: 34px;
    width: auto;
    transition: opacity var(--lx-dur) var(--lx-ease), transform var(--lx-dur) var(--lx-ease);
}
.header .pc-nav-container .logo:hover img {
    opacity: .9;
    transform: translateY(-1px);
}

.header .pc-nav-container .nav > li > a {
    font-size: 17px;
    font-weight: 500;
    letter-spacing: .5px;
    color: rgba(255, 255, 255, .92);
}

/* 原 hover 是 #6495ED,统一成品牌亮色;下划线改成渐变条 */
.header .pc-nav-container .nav a:hover {
    color: #FFFFFF;
}
.header .pc-nav-container .nav a:before {
    background: linear-gradient(90deg, var(--lx-accent), var(--lx-primary));
    height: 2px;
    border-radius: 2px;
}

/* 语言切换:胶囊化(保留原尺寸,不改定位) */
.header .lang-btn {
    box-sizing: border-box;
    padding: 0 6px;
    border: 1px solid rgba(255, 255, 255, .26);
    border-radius: var(--lx-r-pill);
    background: rgba(255, 255, 255, .06);
    transition: background var(--lx-dur) var(--lx-ease), border-color var(--lx-dur) var(--lx-ease);
}
.header .lang-btn:hover {
    background: var(--lx-grad);
    border-color: transparent;
}
.header .lang-btn:hover span {
    color: #FFFFFF;
    opacity: 1;
}

/* ---------- 4. 下拉面板(由 JS slideDown 控制显示,这里只做外观) ---------- */
.header .navdown {
    background: rgba(28, 30, 36, .97);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    border-radius: 0 0 var(--lx-r-lg) var(--lx-r-lg);
    box-shadow: 0 26px 60px rgba(0, 0, 0, .38);
    overflow: hidden;
    animation: lx-drop .3s var(--lx-ease);
}
@keyframes lx-drop {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: none; }
}

.header .navdown .navi-third li {
    background: transparent;
    border-bottom: 1px solid rgba(255, 255, 255, .07);
}
.header .navdown .navi-third .l {
    color: #FFFFFF;
}
.header .navdown .navi-third dt a,
.header .navdown .navi-third dd a,
.header .navdown .wrap a {
    color: rgba(255, 255, 255, .72);
}
.header .navdown .navi-third dt a:hover,
.header .navdown .navi-third dd a:hover,
.header .navdown .wrap a:hover {
    color: var(--lx-accent);
}

/* ---------- 5. 页脚 ---------- */
.footer {
    background: linear-gradient(180deg, #22242A 0%, #17181C 100%);
    color: #A6ADB9;
}
.footer .x_ion,
.footer .link-title {
    color: #FFFFFF;
    font-weight: 600;
}
.footer .x_ion:before,
.footer .link-title:before {
    width: 28px;
    height: 3px;
    border-radius: 2px;
    background: var(--lx-grad);
}
.footer .center a {
    color: #A6ADB9;
}
.footer .center a:hover,
.footer .left a:hover {
    color: var(--lx-accent);
}
.footer .right .pic {
    padding: 6px;
    border-radius: 12px;
    background: #FFFFFF;
    box-shadow: var(--lx-s-1);
}
.footer .bottom {
    border-top: 1px solid rgba(255, 255, 255, .10);
    color: #8A94A6;
}
.footer .bottom a {
    color: #8A94A6;
}
.footer .bottom a:hover {
    color: var(--lx-accent);
}

/* ---------- 6. 标题 ---------- */
.content-title {
    font-size: 32px;
    font-weight: 600;
    letter-spacing: 1px;
}
.content-title span {
    color: #10222F;
}
.content-title:before {
    background: linear-gradient(90deg, transparent, var(--lx-line) 20%, var(--lx-line) 80%, transparent);
}

/* 首页主标题:渐变文字(不支持 background-clip 时自动退回浅色) */
.company-title {
    color: #EAF4FB;
    letter-spacing: 1px;
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
    .company-title {
        background: linear-gradient(90deg, #FFFFFF 0%, #A9DCF6 62%, #6EC0EA 100%);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
    }
}
.all-product-title {
    color: #F2F7FA;
}

/* 首页深色板块 */
.index-3, .index-5 {
    background: linear-gradient(180deg, #202126 0%, #2B2B2B 100%);
}

/* ---------- 7. 卡片 ---------- */
/* 首页方案卡 */
.solution-box {
    border-radius: var(--lx-r-lg);
    overflow: hidden;
    box-shadow: var(--lx-s-2);
    transition: transform var(--lx-dur) var(--lx-ease), box-shadow var(--lx-dur) var(--lx-ease);
}
.solution-box:hover {
    transform: translateY(-6px);
    box-shadow: var(--lx-s-3);
}

/* 首页产品区 */
.index-2 .product_box_content {
    border-radius: var(--lx-r);
    transition: background var(--lx-dur) var(--lx-ease), box-shadow var(--lx-dur) var(--lx-ease);
}
.index-2 .product_box_content:hover {
    background: var(--lx-grad);
    box-shadow: 0 16px 36px rgba(42, 160, 222, .28);
}

/* 产品列表卡: 卡片本体是 li > a(li 上的 padding 是栅格间距, 所以背景/圆角只加在 a 上) */
.product-list li > a {
    display: block;
    border-radius: var(--lx-r-lg);
    overflow: hidden;
    background: var(--lx-surface);
    box-shadow: var(--lx-s-1);
    transition: transform var(--lx-dur) var(--lx-ease), box-shadow var(--lx-dur) var(--lx-ease);
}
.product-list li > a:hover {
    transform: translateY(-6px);
    box-shadow: var(--lx-s-3);
}
.product-list li img {
    transition: transform .5s var(--lx-ease);
}
.product-list li:hover img {
    transform: scale(1.05);
}
.product-list .more {
    border-radius: var(--lx-r-pill);
    border-color: var(--lx-primary);
    color: var(--lx-primary-700);
    transition: all var(--lx-dur) var(--lx-ease);
}
.product-list li:hover .more {
    background: var(--lx-grad);
    border-color: transparent;
    color: #FFFFFF;
}
.product-list .price {
    color: #E94820;
    font-weight: 600;
}

/* 方案列表卡 */
.solution-content li a {
    border-radius: var(--lx-r-lg);
    box-shadow: var(--lx-s-1);
    transition: transform var(--lx-dur) var(--lx-ease),
        box-shadow var(--lx-dur) var(--lx-ease),
        background var(--lx-dur) var(--lx-ease),
        color var(--lx-dur) var(--lx-ease);
}
.solution-content li a:hover {
    background: var(--lx-grad);
    box-shadow: 0 16px 36px rgba(42, 160, 222, .28);
    color: #FFFFFF;
    transform: translateY(-4px);
}

/* ---------- 8. 下载页(多色版: 蓝 / 紫 / 青绿 / 橙 四色轮换) ---------- */
/* 搜索区: 深蓝->蓝->青->青绿 四段渐变 + 右上角高光(都用背景层画, 不加伪元素, 不动布局) */
.search-box {
    background:
        radial-gradient(120% 90% at 88% -18%, rgba(255, 255, 255, .30), rgba(255, 255, 255, 0) 62%),
        linear-gradient(118deg, #0B6FB8 0%, #2AA0DE 34%, #37D5FF 66%, #4FE0C1 100%);
    border-radius: var(--lx-r-lg);
    box-shadow: 0 18px 40px rgba(11, 111, 184, .28);
}
.search-box .search-input .sp2 {
    background: #FFFFFF;
    border: 1px solid #DCEBF7;
    border-radius: var(--lx-r-pill);
    box-shadow: var(--lx-s-1);
}
.search-box input {
    font-size: 15px;
    color: var(--lx-text);
}
.search-box #btn-search {
    border-radius: 50%;
    transition: transform var(--lx-dur) var(--lx-ease), filter var(--lx-dur) var(--lx-ease);
}
.search-box #btn-search:hover {
    transform: scale(1.12);
    filter: drop-shadow(0 2px 6px rgba(11, 111, 184, .45));
}
.search-box .no-data {
    color: #E9F5FF;
}

.list-container {
    background: var(--lx-surface);
    border-radius: var(--lx-r-lg);
    box-shadow: var(--lx-s-1);
}

/* 选项卡: 四类各配一个色(product 蓝 / soft 紫 / manual 青绿 / tool 橙) */
.list-container .tab a[data="product"] { --t1: var(--lx-primary); --t2: var(--lx-accent); --tsoft: #EAF5FD;                --tink: var(--lx-primary-700); --tglow: rgba(42, 160, 222, .30); }
.list-container .tab a[data="soft"]    { --t1: var(--lx-violet);  --t2: #A78BFA;          --tsoft: var(--lx-violet-soft); --tink: var(--lx-violet-ink);  --tglow: rgba(124, 107, 245, .30); }
.list-container .tab a[data="manual"]  { --t1: var(--lx-teal);    --t2: #4FE0C1;          --tsoft: var(--lx-teal-soft);   --tink: var(--lx-teal-ink);    --tglow: rgba(18, 179, 154, .28); }
.list-container .tab a[data="tool"]    { --t1: var(--lx-amber);   --t2: #FFB765;          --tsoft: var(--lx-amber-soft);  --tink: var(--lx-amber-ink);   --tglow: rgba(240, 145, 47, .28); }
.list-container .tab a {
    border: 1px solid #E9EDF3;
    border: 1px solid var(--tsoft, var(--lx-line));
    border-radius: var(--lx-r-pill);
    background: #F6F9FC;
    background: var(--tsoft, var(--lx-surface-2));
    color: #5A6472;
    color: var(--tink, var(--lx-text-2));
    font-weight: 500;
}
.list-container .tab a:hover {
    background: #FFFFFF;
    border-color: var(--t1, var(--lx-primary));
    color: var(--tink, var(--lx-primary-700));
    box-shadow: 0 8px 18px var(--tglow, rgba(42, 160, 222, .18));
}
.list-container .tab a.selected {
    background: linear-gradient(135deg, var(--t1, var(--lx-primary)), var(--t2, var(--lx-accent)));
    border-color: transparent;
    color: #FFFFFF;
    box-shadow: 0 8px 18px var(--tglow, rgba(42, 160, 222, .28));
}
.list-container .tab a.selected:before {
    background: transparent;
}

/* 表格 */
.table-box {
    border: 1px solid var(--lx-line);
    border-radius: var(--lx-r);
    overflow: hidden;
    background: var(--lx-surface);
}
.download-table {
    color: var(--lx-text-2);
}

/* 表头: 蓝->紫->青绿 的三段浅渐变, 四列表头各用一个色 */
.download-table thead td {
    background: linear-gradient(115deg, #EFF7FF 0%, #F3F1FF 48%, #E9FBF5 100%);
    font-weight: 600;
    letter-spacing: .5px;
    border-bottom: 2px solid #DEEBF8;
    color: var(--lx-primary-700);
}
.download-table thead .t1 { color: var(--lx-primary-700); border-bottom-color: #9FD0F0; }
.download-table thead .t3 { color: var(--lx-teal-ink);    border-bottom-color: #8FDCCB; }
.download-table thead .t4 { color: var(--lx-violet-ink);  border-bottom-color: #BDB2FA; }
.download-table thead .t5 { color: var(--lx-amber-ink);   border-bottom-color: #F7C894; }

/* 行: 蓝/紫/青绿/橙 四色轮换 -> hover 出浅底 + 左侧 3px 色条(inset 阴影, 不占布局) */
.download-table tbody tr {
    transition: background var(--lx-dur) var(--lx-ease), box-shadow var(--lx-dur) var(--lx-ease);
}
.download-table tbody tr:nth-child(4n+1) { --row: var(--lx-primary); --row2: var(--lx-accent); --rowsoft: #F2F9FF;               --dot: var(--lx-primary); }
.download-table tbody tr:nth-child(4n+2) { --row: var(--lx-violet);  --row2: #A78BFA;         --rowsoft: var(--lx-violet-soft); --dot: var(--lx-violet); }
.download-table tbody tr:nth-child(4n+3) { --row: var(--lx-teal);    --row2: #4FE0C1;         --rowsoft: #EFFBF7;               --dot: var(--lx-teal); }
.download-table tbody tr:nth-child(4n)   { --row: var(--lx-amber);   --row2: #FFB765;         --rowsoft: var(--lx-amber-soft);  --dot: var(--lx-amber); }
.download-table tbody tr:nth-child(even) {
    background: #FBFDFF;
}
.download-table tbody tr:hover {
    background: #F0F8FE;
    background: var(--rowsoft, #F0F8FE);
    box-shadow: inset 3px 0 0 #2AA0DE;
    box-shadow: inset 3px 0 0 var(--row, var(--lx-primary));
}
/* 行距收紧 + 文字垂直居中。
   两个坑:
   1) 必须用和 sub.css 同等级的选择器(.list-container .download-table tbody td),
      否则 sub.css 里的 padding:25px 10px 特异性更高, 这边的行距会被吃掉;
   2) 必须只作用于桌面端: ≤1002px 时 sub.css 会把 td 改成 padding-left:90px(给移动端列名留位),
      同等级 + 后加载会把它挤掉, 移动端卡片就散了。 */
@media screen and (min-width: 1003px) {
    .list-container .download-table tbody td {
        border-bottom: 1px solid var(--lx-line);
        padding: 11px 14px;
        font-size: 14px;          /* 与原来的 body 字号一致(加大一档后偏大, 已回退) */
        vertical-align: middle;   /* 覆盖模板里的 valign="top": 文件名/大小/时间/下载按钮都垂直居中 */
    }
    .download-table thead td {
        font-size: 14px;
    }
    /* 文件名不再放大, 层级靠字重(600)和颜色区分 */
    .list-container .download-table .td1 .nr a {
        font-size: 14px;
    }
}

/* 文件名行首彩色小圆点: 画在 .nr(和文字同一个 20px 行高的盒子)里,
   用固定坐标 6px 10px(= 首行正中间), 不用百分比, 免得和顶部对齐的文字错开 */
.download-table .td1 .nr {
    padding-left: 16px;
    background-image: radial-gradient(circle at 6px 10px, var(--dot, var(--lx-primary)) 4.5px, rgba(0, 0, 0, 0) 5.5px);
}
/* td1 左内边距相应减掉 16px, 文字左边缘位置保持不变(14 + 16 = 原来的 30) */
.list-container .download-table .td1 {
    padding-left: 14px;
}
.download-table .td1 .nr a {
    color: #123A55;
    font-weight: 600;
}
.download-table .td1 .nr a:hover {
    color: var(--lx-primary-700);
    text-decoration: underline;
}

/* 大小用青绿、时间用灰, 列的含义一眼可辨 */
.download-table .td3 {
    color: #0E8F7C;
    color: var(--lx-teal-ink);
    font-weight: 600;
}
.download-table .td4 {
    color: #8A94A6;
    color: var(--lx-text-3);
}

/* 下载按钮: 静息浅灰蓝, hover 变成该行主题色的渐变 + 图标翻白 */
.download-table .td5 a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #F2F6FA;
    transition: background var(--lx-dur) var(--lx-ease),
        box-shadow var(--lx-dur) var(--lx-ease),
        transform var(--lx-dur) var(--lx-ease);
}
.download-table .td5 a:hover {
    background: linear-gradient(135deg, #2AA0DE, #37D5FF);
    background: linear-gradient(135deg, var(--row, var(--lx-primary)), var(--row2, var(--lx-accent)));
    box-shadow: 0 8px 18px rgba(16, 32, 64, .20);
    transform: translateY(-2px);
}
.download-table .td5 img {
    width: 17px;
    height: 17px;
    object-fit: contain;
}
.download-table .td5 a:hover img {
    filter: brightness(0) invert(1);
}

/* 条数说明 / 备用列表的表头: 数字改橙色, 标题用主色 */
.list-container .tab_main .bt {
    color: var(--lx-primary-700);
    border-bottom-color: var(--lx-line);
}
.list-container .tab_main .bt span {
    color: var(--lx-amber-ink);
    font-weight: 700;
}
.list-container .cont .top {
    background: linear-gradient(115deg, #EFF7FF 0%, #F3F1FF 48%, #E9FBF5 100%);
}

/* ---------- 9. 面包屑 / 筛选条 ---------- */
.mbx {
    border-bottom: 1px solid var(--lx-line);
}
.mbx a:hover {
    color: var(--lx-primary);
}
.mbx .sp2 {
    color: var(--lx-primary-700);
    font-weight: 500;
}
.product-link dd {
    border-radius: var(--lx-r);
    box-shadow: var(--lx-s-2);
    overflow: hidden;
}

/* ---------- 10. 细节与响应式 ---------- */
/* 移动端导航条(≤1200px 时 .phone_nav 接管) */
@media screen and (max-width: 1200px) {
    .phone_nav .top {
        background: rgba(21, 22, 26, .96);
        -webkit-backdrop-filter: blur(12px);
        backdrop-filter: blur(12px);
        box-shadow: var(--lx-s-1);
    }
    .phone_nav .nav-container {
        background: #1B1C21;
    }
    .phone_nav .box_con ul li a {
        color: rgba(255, 255, 255, .86);
    }
    .phone_nav .box_con ul li a:hover {
        color: var(--lx-accent);
    }
}

/* 下载表格移动端卡片式(≤1002px 由 sub.css 转成 block,这里只补外观) */
@media screen and (max-width: 1002px) {
    .download-table tbody tr {
        border: 1px solid var(--lx-line);
        border-radius: var(--lx-r);
        margin-bottom: 14px;
        padding: 6px 0;
        box-shadow: var(--lx-s-1);
    }
    .table-box {
        border: 0;
        border-radius: 0;
    }
    /* 卡片模式下: 列名(data-title)上色, 去掉行首圆点(布局已变成纵向) */
    .download-table tbody td:before {
        color: #0B6FB8;
        color: var(--lx-primary-700);
        opacity: .9;
    }
    .download-table tbody td {
        border-bottom: 1px dashed var(--lx-line);
    }
    .download-table .td1 .nr {
        background-image: none;
        padding-left: 0;
    }
    .list-container .download-table .td1 {
        padding-left: 30px;
    }
}