* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    /* 禁用 iOS Safari 对窄列/溢出文字的自动放大，避免个别表格单元格文字异常变大 */
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    /* 根滚动元素也要挡住，否则内部宽表格仍可能把整页撑出横向滚动（仅设置在 body 上不够可靠） */
    overflow-x: hidden;
}

:root {
    /* 下划线 */
    /*高度*/
    --line-height: 4px;
    /*间距*/
    --line-space: -16px;

    /* 导航栏尺寸 */
    --nav-margin: 28.8px;
    --nav-img-height-big: 22px;
    --nav-img-height-small: 20px;
    --nav-gap: 20px;
    --nav-padding: 24px;

    /* 下拉菜单动画 */
    --dropdown-duration: 0.45s;
}

/*增加下划线*/
.addline {
    position: relative;
    display: inline-block;
    text-decoration: none;
}

.addline::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: calc(-1 * (var(--line-height) + var(--line-space)));
    width: 100%;
    height: var(--line-height);
    background: white;
}

/* 下划线动画 */
.underline {
    position: relative;
    display: inline-block;
    text-decoration: none;
}

.underline::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: calc(-1 * (var(--line-height) + var(--line-space)));
    width: 0%;
    height: var(--line-height);
    background: white;

    transform: translateX(-50%);
    transition: width 0.4s ease;
}

.underline:hover::after {
    width: 100%;
}


body {
    min-height: 100vh;
    /* 兜底：防止内部横向滚动的宽表格等元素意外把整个页面撑出横向滚动条，
       表格自身的横向滚动由 .detail-spec-table-wrap 的 overflow-x:auto 负责，不受影响 */
    overflow-x: hidden;

    display: flex;
    flex-direction: column;

    font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    background-color: black;
}

.nav {
    /* 位置/宽度固定不变，滚动前后完全一致；.not-top 只负责切换背景观感 */
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    padding-left: var(--nav-margin);
    padding-right: var(--nav-margin);
    height: calc(var(--nav-img-height-big) + var(--nav-padding) * 2);
    z-index: 4;


    display: flex;
    justify-content: space-between;
    align-items: center;

    /*background-color: gray;*/
}

.not-top {
    background: rgba(14, 18, 30, 0.72);
    backdrop-filter: blur(20px) saturate(160%);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.nav img {
    height: var(--nav-img-height-big);
    width: auto;
    display: block;
    flex-shrink: 0;
}

.menu {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: var(--nav-gap);
    height: 100%;
}

.menu_item {
    font-size: 1.15rem;
    color: white;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;

    /*
            padding-top: var(--nav-padding);
            padding-bottom: var(--nav-padding);
            height: calc(var(--nav-img-height-big) + var(--nav-padding) * 2);
            */
    height: calc(var(--nav-img-height-big) + var(--nav-padding) * 2);

    /* ★★★ 核心：垂直居中 ★★★ */
    display: flex;
    align-items: center;
    justify-content: center;

}

.dropdown {
    display: inline-block;
    position: relative;
}

.dropdown-content {
    position: absolute;

    left: 0;
    top: 100%;
    width: max-content;
    max-width: 90vw;

    background: rgba(14, 18, 30, 0.72);
    backdrop-filter: blur(20px) saturate(160%);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45);

    transform-origin: top left;
    transform: scaleY(0.0);
    /* visibility 延迟到收起动画结束再隐藏,避免收起内容仍可被键盘/读屏器聚焦到 */
    visibility: hidden;
    transition: transform 0.4s ease, visibility 0s linear 0.4s;
}

.dropdown:hover .dropdown-content {
    transform: scaleY(1.0);
    visibility: visible;
    transition: transform 0.4s ease, visibility 0s linear 0s;
    display: block;
}


#menu_btn {
    display: none;
}

/* ========== 视频容器 + 卡片覆盖层 ========== */
.video-wrapper {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
}

.video-wrapper video {
    width: 100%;
    height: 100vh;
    object-fit: cover;
    display: block;
}

.card {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    /* 让卡片本身不拦截点击，但内部的 img/切换按钮可点 */
    pointer-events: none;
}

/* 产品轮播：同一时刻只显示一张，靠 transform 左右滑动切换 */
.hero-track {
    display: flex;
    width: 100%;
    height: 100%;
    transition: transform 0.6s cubic-bezier(0.65, 0, 0.35, 1);
}

.hero-slide {
    flex: 0 0 100%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* 左右切换按钮 */
.hero-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 5;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(14, 18, 30, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #fff;
    cursor: pointer;
    pointer-events: auto;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: background 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}

.hero-nav svg {
    width: 20px;
    height: 20px;
}

.hero-nav:hover {
    background: rgba(80, 180, 255, 0.25);
    border-color: rgba(80, 180, 255, 0.5);
    transform: translateY(-50%) scale(1.08);
}

.hero-nav-prev {
    left: clamp(16px, 4vw, 48px);
}

.hero-nav-next {
    right: clamp(16px, 4vw, 48px);
}

.bento {
    /* 去除 a 标签默认的下划线和颜色，保持纯样式 */
    text-decoration: none;
    color: inherit;

    /* 图片和文字分离后，.bento 变成"图 + 字"的纵向容器 */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(12px, 1.6vw, 24px);

    /* 🔑 关键1：让 <a> 标签本身拒绝所有鼠标事件（包括点击） */
    pointer-events: none;
}

.bento-image {
    display: block;

    /* 满屏时上限下调10%(640→576 / 480→432),同时把随视口缩放的比例从30%/44%降到24%/35%，
       让封顶生效的临界点从约2133px推迟到约2400px，缩放窗口时占比变化更平滑、更接近满屏时的比例 */
    max-width: clamp(240px, 24vw, 576px);
    max-height: clamp(180px, 35vh, 432px);
}

/* 文字标注：字号跟随视口宽度平滑缩放，桌面常见宽度下与顶部导航栏文字（1.15rem）大小一致 */
.hero-caption {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    pointer-events: auto;
    cursor: pointer;
}

.hero-caption-title {
    font-size: clamp(0.9rem, 0.82rem + 0.32vw, 1.25rem);
    font-weight: 600;
    color: #fff;
    letter-spacing: 0.5px;
}

.hero-caption-subtitle {
    margin-top: 0.3em;
    font-size: clamp(0.78rem, 0.7rem + 0.28vw, 1.05rem);
    color: rgba(255, 255, 255, 0.75);
}

.bento img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;

    opacity: 0.93;
    transform: scale(1.0) translateY(0);
    filter: drop-shadow(0 0 0 rgba(80, 180, 255, 0));
    transition: transform 0.4s ease, opacity 0.4s ease, filter 0.4s ease;

    /* 🔑 关键2：让 <img> 恢复鼠标事件，可点击触发链接 */
    pointer-events: auto;

    /* 可选：让鼠标悬停图片时显示手型，增强体验 */
    cursor: pointer;
}

.bento img:hover {
    opacity: 1;
    transform: scale(1.06) translateY(-8px);
    filter: drop-shadow(0 16px 28px rgba(80, 180, 255, 0.45));
}

/* ========== 产品详情页 ========== */
.detail-wrapper {
    position: relative;
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: calc(var(--nav-img-height-big) + var(--nav-padding) * 2 + 80px) var(--nav-margin) 40px;
    color: #fff;
}

/* 全宽氛围光晕，呼应首页导航栏/下拉菜单的深蓝毛玻璃与蓝色光效，强度压低避免干扰参数表阅读 */
.detail-wrapper::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    width: 100vw;
    height: 900px;
    transform: translateX(-50%);
    background:
        radial-gradient(900px 500px at 82% 10%, rgba(80, 180, 255, 0.16), transparent 65%),
        radial-gradient(1400px 700px at 50% -10%, rgba(30, 42, 72, 1), transparent 70%);
    pointer-events: none;
    z-index: 0;
}

.detail-wrapper>* {
    position: relative;
    z-index: 1;
}

.detail-hero {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 40px;
    padding-bottom: 48px;
    margin-bottom: 48px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.detail-hero-text {
    flex: 1 1 420px;
    min-width: 280px;
}

.detail-eyebrow {
    color: #8888aa;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 0.95rem;
    font-weight: 500;
    margin-bottom: 14px;
}

.detail-hero-text h1 {
    font-size: clamp(2rem, 4vw, 3rem);
    letter-spacing: 1px;
    margin-bottom: 8px;
}

.detail-hero-text h2 {
    font-size: 1.25rem;
    font-weight: 500;
    color: #c0c0d0;
    margin-bottom: 12px;
}

.detail-tagline {
    color: #8888aa;
    font-size: 0.95rem;
    margin-bottom: 18px;
}

.detail-intro {
    color: #a0a0b8;
    line-height: 1.9;
    font-size: 0.98rem;
    max-width: 680px;
    text-align: justify;
    text-justify: inter-ideograph;
}

.detail-hero-image {
    flex: 0 0 auto;
    width: min(320px, 40vw);
    aspect-ratio: 3 / 4;
    background: #fff;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.detail-hero-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.detail-section {
    margin-bottom: 56px;
}

.detail-heading {
    font-size: 1.4rem;
    font-weight: 600;
    display: inline-block;
    padding-bottom: 10px;
    margin-bottom: 24px;
    border-bottom: 2px solid rgba(80, 180, 255, 0.4);
}

/* 主要特性 / 典型配置 卡片 */
.detail-feature-grid,
.detail-config-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 20px;
}

.detail-feature-card,
.detail-config-card {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 22px 24px;
    transition: border-color 0.3s ease, background 0.3s ease, transform 0.3s ease;
}

.detail-feature-card:hover,
.detail-config-card:hover {
    border-color: rgba(80, 180, 255, 0.4);
    background: rgba(255, 255, 255, 0.06);
    transform: translateY(-2px);
}

.detail-feature-card h4,
.detail-config-card h4 {
    color: #fff;
    font-size: 1.05rem;
    margin-bottom: 8px;
}

.detail-feature-card p {
    color: #a0a0b8;
    font-size: 0.9rem;
    line-height: 1.7;
    text-align: justify;
    text-justify: inter-ideograph;
}

.detail-config-card .detail-config-note {
    color: #8888aa;
    font-size: 0.82rem;
    line-height: 1.6;
    margin-bottom: 14px;
    text-align: justify;
    text-justify: inter-ideograph;
}

.detail-config-card ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.detail-config-card li {
    color: #c0c0d0;
    font-size: 0.88rem;
    padding-left: 1.4em;
    position: relative;
    line-height: 1.5;
    text-align: justify;
    text-justify: inter-ideograph;
}

.detail-config-card li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: #7ec8ff;
}

/* 应用场景 */
.detail-app-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
}

.detail-app-card {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 22px 20px;
    text-align: center;
    transition: border-color 0.3s ease, background 0.3s ease, transform 0.3s ease;
}

.detail-app-card:hover {
    border-color: rgba(80, 180, 255, 0.4);
    background: rgba(255, 255, 255, 0.06);
    transform: translateY(-2px);
}

.detail-app-card .num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(80, 180, 255, 0.15);
    color: #7ec8ff;
    font-size: 0.85rem;
    font-weight: 700;
    margin-bottom: 14px;
}

.detail-app-card p {
    color: #c0c0d0;
    font-size: 0.88rem;
    line-height: 1.7;
    text-align: justify;
    text-justify: inter-ideograph;
}

/* 技术指标表格 */
.detail-spec-group {
    margin-bottom: 28px;
}

.detail-spec-group:last-child {
    margin-bottom: 0;
}

.detail-spec-group h4 {
    font-size: 0.95rem;
    color: #8888aa;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 12px;
}

.detail-spec-table-wrap {
    overflow-x: auto;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    /* 与其余卡片（feature/app/config）统一背景色；窄屏下表格实际宽度可能小于此容器
       （table-layout:fixed + width:max-content 只撑到内容宽度），若容器本身透明，
       右侧空出的部分会露出纯黑页面背景，与表格行形成明显色差断层 */
    background: rgba(255, 255, 255, 0.04);
}

.detail-spec-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.88rem;
    table-layout: fixed;
}

.detail-spec-table th,
.detail-spec-table td {
    padding: 10px 16px;
    text-align: left;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    white-space: pre-line;
    line-height: 1.7;
}

.detail-spec-table th {
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
    font-weight: 600;
}

.detail-spec-table td {
    color: #c0c0d0;
}

/* 首列宽度由 JS 按实际文字内容动态计算并写入内联样式（见 index.js alignSpecColumns），
   保证同一产品页内所有表格的"参数"列右边界（数值列起点）都对齐，且不需要换行 */
.detail-spec-table td:first-child,
.detail-spec-table th:first-child {
    color: #fff;
    font-weight: 500;
    white-space: nowrap;
}

.detail-spec-table tr:last-child td {
    border-bottom: none;
}

/* 三列(参数/数值A/数值B)表格：数值列按内容收紧宽度，避免整行被拉满导致列间空隙过大 */
.detail-spec-table--kv3 {
    width: auto;
}

.detail-spec-table--kv3 th:nth-child(2),
.detail-spec-table--kv3 td:nth-child(2),
.detail-spec-table--kv3 th:nth-child(3),
.detail-spec-table--kv3 td:nth-child(3) {
    width: 220px;
}

.detail-spec-table tr:hover td {
    background: rgba(255, 255, 255, 0.03);
}

.detail-spec-note {
    color: #6a6a85;
    font-size: 0.78rem;
    line-height: 1.7;
    margin-top: 16px;
}

@media (max-width: 1050px) {
    .detail-wrapper {
        padding-top: 48px;
    }

    /* 窄屏下每一列宽度都由 JS（alignSpecColumns）按实际文字量出后写成内联样式，
       改用 fixed 布局让这些内联宽度被严格遵守（auto 布局只把 width 当作参考值，
       仍会按整张表格的可用空间重新分配，导致相同的内联宽度在不同表格里渲染结果不一致）；
       width 用 max-content 而非 auto：fixed 布局下 width:auto 会按"收缩到可用宽度"
       计算，当列宽总和超出容器时被按比例压缩，且各表格压缩比例不同，同样的内联列宽
       在不同表格里会被缩成不同的实际像素值。max-content 让表格宽度严格等于列宽之和，
       超出容器的部分交给横向滚动，不再被压缩 */
    .detail-spec-table {
        table-layout: fixed;
        width: max-content;
    }

    .detail-spec-table--kv3 th:nth-child(2),
    .detail-spec-table--kv3 td:nth-child(2),
    .detail-spec-table--kv3 th:nth-child(3),
    .detail-spec-table--kv3 td:nth-child(3) {
        width: auto;
    }

    /* 参数名与数值一律单行显示，靠表格容器的横向滚动查看 */
    .detail-spec-table th,
    .detail-spec-table td {
        white-space: nowrap;
    }

    /* 首列（参数名）横向滚动时保持固定在左侧，滑动查看数值时始终知道对应哪一行 */
    .detail-spec-table th:first-child,
    .detail-spec-table td:first-child {
        position: sticky;
        left: 0;
        z-index: 2;
        box-shadow: 2px 0 6px rgba(0, 0, 0, 0.5);
    }

    .detail-spec-table th:first-child {
        background: #15151d;
    }

    .detail-spec-table td:first-child {
        background: #0b0b10;
    }

    /* 窄屏下每行字数变少，中英文混排的两端对齐会被拉出明显的大空隙，改回左对齐更易读 */
    .detail-intro,
    .detail-feature-card p,
    .detail-app-card p,
    .detail-config-card .detail-config-note,
    .detail-config-card li {
        text-align: left;
    }
}

@media (max-width: 640px) {
    .detail-hero {
        flex-direction: column-reverse;
    }

    .detail-hero-image {
        width: min(280px, 60vw);
    }
}

/*底部链接*/

.footer {
    color: #fff;

    display: flex;
    flex-direction: column;
    align-items: center;
    /* 左右边距与顶部导航栏保持一致 */
    padding: 40px var(--nav-margin);
}

/* 内容区占满整个页面宽度（左右留 .footer 的 padding） */
.footer>* {
    width: 100%;
}

/* ===== 联系信息容器：用 grid 保证换行后图标仍按列对齐 ===== */
.footer-contacts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 24px 40px;
    padding: 28px 0;
}


/* ===== 每个联系项（核心：列数自适应） ===== */
.contact-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    color: #c0c0d0;
    font-size: 1rem;
    line-height: 1.5;
}


.contact-item .icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 28px;
    height: 1.5em;
    color: #ffffff;
}

.contact-item .icon svg {
    width: 20px;
    height: 20px;
}

.contact-item .label {
    color: #8888aa;
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: block;
}


/*底部链接*/
.all {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    flex-direction: row;
    gap: 24px 32px;
    padding: 28px 0;
}

/* 版权/备案信息栏 */
.footer-bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    
    gap: 6px 24px;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.12);

    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.5);
}

.footer-bottom a{
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 4px;
}

.footer-bottom .beian {
    color: rgba(255, 255, 255, 0.5);
}

.second {
    display: flex;
    justify-content: flex-start;
    flex-direction: column;
    gap: 8px;
}

.title {
    font-size: 1rem;
    text-decoration: none;
    color: white;
    text-align: left;

    transition: color 0.4s ease;
}

.sub {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.8);
}

.title:hover {
    color: purple;
}

.sub:hover {
    color: rgba(255, 255, 255, 1.0);
}

/*置顶目录*/

.top-menu {
    /* 默认隐藏,由 JS 切换 display:block;避免 JS 未加载/未执行完时全屏遮住页面 */
    display: none;

    background: rgba(14, 18, 30, 0.8);
    backdrop-filter: blur(20px) saturate(160%);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
    box-shadow: -20px 0 50px rgba(0, 0, 0, 0.45);
    min-height: 100vh;
    width: min(360px, 85vw);

    position: fixed;
    right: 0;
    top: 0;

    padding: 16px;

    z-index: 30;
}


/* ===== 基础图标容器 ===== */
.circle-cross {
    display: block;
    /* 适应内容宽度 */
    width: 36px;
    height: 36px;
    border: 3px solid #e94560;
    /* 圆环颜色 */
    border-radius: 50%;
    position: relative;
    cursor: pointer;

    /* 整体旋转（包括圆环和叉号） */
    transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);


    display: block;
    margin-left: auto;
}

/* ===== 绘制叉号（两条斜线） ===== */
.circle-cross::before,
.circle-cross::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 60%;
    /* 线条长度（占容器宽度比例） */
    height: 3px;
    /* 线条粗细 */
    background: #e94560;
    /* 叉号颜色 */
    transform-origin: center;
    /* 旋转中心为自身中心 */
}

/* 第一条线：旋转 45° */
.circle-cross::before {
    transform: translate(-50%, -50%) rotate(45deg);
}

/* 第二条线：旋转 -45° */
.circle-cross::after {
    transform: translate(-50%, -50%) rotate(-45deg);
}

/* ===== 悬停旋转效果（整体旋转） ===== */
.circle-cross:hover {
    transform: rotate(180deg);
}



/* 基础菜单项：统一所有样式 */
.item {
    display: flex;
    align-items: center;
    height: 44px;
    color: #fff;
    font-size: 0.95rem;
    padding: 0 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    cursor: pointer;
    text-decoration: none;
    transition: background 0.2s;
    background: transparent;
}

.item:hover {
    background: rgba(255, 255, 255, 0.08);
}

/* 父级标题：两端对齐 */
.parent-header {
    justify-content: space-between;
}

.arrow {
    transition: transform 0.3s ease;
}

.parent.open .arrow {
    transform: rotate(180deg);
}

/* 子菜单容器：去除额外背景和圆角，只控制折叠 */
.sub-items {
    max-height: 0;
    overflow: hidden;
    visibility: hidden;
    transition: max-height 0.4s ease, visibility 0s linear 0.4s;
    /* 无背景、无圆角，完全透明 */
}

.parent.open .sub-items {
    max-height: 300px;
    visibility: visible;
    transition: max-height 0.4s ease, visibility 0s linear 0s;
}

/* 子项：仅覆盖字体大小和左缩进，其他完全继承 .item */
.sub-item {
    font-size: 0.85rem;
    padding-left: 2em;
    /* 背景、边框、高度等均与父项一致 */
}

/*
        网格图片
        */


.gallery {
    /* grid 的 auto-fill/auto-fit 在“宽度随内容收缩”的容器里表现不稳定（1 个格子时会莫名撑开），改用 flex 让宽度严格等于卡片实际内容 */
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    padding: 16px;
}

.photo-item {
    width: 200px;
    flex-shrink: 0;

    background-color: white;
    border-radius: 14px;
    overflow: hidden;
    cursor: pointer;

    font-size: 1.0rem;
    transform: scale(1.00);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
    transition: font-size 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;

    /*测试*/
    /*  padding: 10px;
            background-color: red;
            max-width: 240px;*/
}

.photo-item:hover {
    font-size: 1.2rem;
    transform: scale(1.02);
    box-shadow: 0 12px 36px rgba(233, 69, 96, 0.25);
}


.photo-img-wrapper {
    position: relative;
    aspect-ratio: 3 / 4;
    overflow: hidden;

    /*测试*/
    /* padding: 10px;
            background-color: green;*/
}

.photo-img-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    transition: opacity 0.3s;

    /*测试*/
    /* background-color: blue;*/
}

.photo-caption {
    font-weight: 500;
    overflow: hidden;
    text-align: center;
    padding: 10px 12px 16px;

    color: black;
}


@media (max-width: 1050px) {
    .nav {
        position: static;
        height: calc(var(--nav-img-height-small) + var(--nav-padding) * 2);
        padding: var(--nav-padding);
    }

    .nav img {
        height: var(--nav-img-height-small);
    }

    .menu {
        display: none;
    }

    #menu_btn {
        display: block;
    }
}

@media (max-width: 900px) {
    .footer {
        padding: 60px;
        gap: 0px;
    }

    .footer-contacts {
        grid-template-columns: 1fr;
        padding: 20px 0;
        gap: 10px;
    }

    .all {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        flex-direction: unset;
        padding: 20px 0;
        gap: 24px 16px;
    }

    .second {
        padding: 10px 0;
        gap: 8px;
    }

    /* 公司名+版权与备案号横排在窄屏下会挤在同一行，把长的公司名压得逐字换行；
       改成纵向堆叠，各自独占一行宽度，换行更自然 */
    .footer-bottom {
        flex-direction: column;
        gap: 8px;
    }

    /* 公司名单独占一行，避免和"Copyright..."挤在一起时在文字中间断出单个孤字 */
    .footer-company {
        display: block;
    }
}

@media (max-width: 640px) {
    .hero-nav {
        width: 36px;
        height: 36px;
    }

    .hero-nav svg {
        width: 16px;
        height: 16px;
    }
}