[v-cloak] {
            display: none !important;
        }

        :root {
            --animate-duration: 2s;
            /* 所有动画默认时长改为2秒 */
        }

        /* 父容器：相对定位（核心！作为文字定位基准） + 匹配图片高度 */
        .abouts {
            position: relative;
            /* 必须：让子元素绝对定位参考该容器 */
            height: 720px;
            /* 匹配图片高度，避免容器高度塌陷 */
            width: 100%;
            overflow: hidden;
            /* 防止文字超出容器 */
        }

        /* 图片：铺满容器，消除默认空隙 */
        .abouts img {
            height: 100%;
            /* 改为100%，继承父容器高度，更灵活 */
            width: 100%;
            object-fit: cover;
            /* 保证图片不变形，铺满容器 */
            display: block;
            /* 消除图片底部默认空隙 */
        }

        .abouts .names {
            position: absolute;
            z-index: 2;
            /* 确保在图片上方 */
            font-family: MiSans Latin, MiSans Latin;
            font-weight: 600;
            font-size: 50px;
            color: #FFFFFF;
            left: 10%;
            top: 50%;
            transform: translate(-50%);
        }

        .list {
            width: 1200px;
            margin: auto;
            padding: 60px 0 0 0;
        }

        /* 外层容器：左右分组 + 两端对齐 */
        .filter-container {
            display: flex;
            /* justify-content: space-between; */
            align-items: center;
            max-width: 1200px;
            padding: 0 20px;
            background-color: #ffffff;
        }

        /* 左侧标签组：组内横向排列 */
        .tab-group {
            display: flex;
            gap: 24px;
            /* 标签之间的间距 */
        }

        /* 单个标签样式 */
        .tab-item-a {
            /* 浅灰色边框，匹配设计稿 */
            border-radius: 4px;
            font-size: 18px;
            color: #999999;
            /* 默认浅灰色文字 */
            cursor: pointer;
            font-family: MiSans Latin, sans-serif;
            transition: all 0.3s ease;
            font-family: MiSans Latin, MiSans Latin;
            font-weight: 400;
            font-size: 22px;
            color: #595860;
            font-style: normal;
            text-transform: none;


        }

        /* 激活态标签：深蓝色高亮 */
        .tab-item-a.active {
            /* 深蓝色边框 */
            /* 深蓝色文字 */
            color: #142261;

            /* 轻微加粗，突出选中态 */
        }

        /* 右侧下拉组：组内横向排列 */
        .dropdown-group {
            display: flex;
            gap: 24px;
            /* 下拉框之间的间距 */
        }

        /* 自定义下拉框容器 */
        .custom-dropdown {
            position: relative;

            display: inline-block;
        }

        /* 下拉框原生样式清除 + 自定义样式 */
        .custom-dropdown select {
            padding: 0 44px 0 20px;
            width: 250px;
            height: 42px;
            /* 右侧预留箭头位置 */
            border: 1px solid #e5e5e5;
            /* 浅灰色边框，和标签保持一致 */
            font-size: 18px;
            color: #999999;
            /* 提示文字浅灰色，匹配设计稿 */
            font-family: MiSans Latin, sans-serif;
            background-color: #ffffff;
            /* 清除原生下拉样式 */
            appearance: none;
            -webkit-appearance: none;
            -moz-appearance: none;
            outline: none;
            cursor: pointer;
            min-width: 200px;
            font-family: MiSans Latin, MiSans Latin;
            font-weight: 400;
            font-size: 16px;
            color: #88878E;
            text-align: left;
            font-style: normal;
            text-transform: none;

            /* 保证下拉框宽度和设计稿一致 */
        }

        /* 下拉箭头（伪元素实现，替代原生丑陋箭头） */
        .custom-dropdown::after {
            content: "▼";
            position: absolute;
            right: 20px;
            top: 50%;
            transform: translateY(-50%);
            font-size: 12px;
            color: #999999;
            /* 默认箭头颜色，和提示文字一致 */
            pointer-events: none;
            /* 不影响下拉框点击 */
        }

        /* 下拉框聚焦/选中时的高亮样式 */
        .custom-dropdown select:focus {
            border-color: #142261;
            /* 聚焦时深蓝色边框 */
            color: #142261;
            /* 聚焦时深蓝色文字 */
        }

        .custom-dropdown:focus-within::after {
            color: #142261;
            /* 聚焦时箭头同步变为深蓝色 */
        }

        /* 下拉选项美化（可选） */
        .custom-dropdown select option {
            padding: 12px 20px;
            color: #333333;
            background-color: #ffffff;
        }

        .tab-item-as {
            font-family: MiSans Latin, MiSans Latin;
            font-weight: 400;
            font-size: 16px;
            color: #252525;
            font-style: normal;
            text-transform: none;
        }

        /* 核心布局：3列均分 + 间距控制 */
        .product-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 20px;
            /* 卡片间距更贴合设计稿 */
            max-width: 1200px;
            margin: 40px auto;
            padding: 0 20px;
            background-color: #fff;
        }

        /* 单个产品卡片：精准匹配设计稿样式 */
        .product-cards {
            border: 1px solid #eeeeee;
            /* 浅灰边框，和设计稿一致 */
            /* padding: 20px; */
            border-radius: 6px;
            /* 轻微圆角，更贴合设计稿 */
        }

        .product-cards:hover {
            transform: scale(1.05) !important;
            /* 加!important确保覆盖入场动画 */
            opacity: 0.95;
        }

        /* 产品图片：固定比例 + 不拉伸 */
        .product-imgs {
            width: 100%;
            height: 260px;
            /* 固定图片高度，保证所有卡片视觉统一 */
            object-fit: cover;
            /* 图片不变形 */
            margin-bottom: 20px;
            display: block;
        }

        /* 产品标题：字号/颜色匹配设计稿 */
        .product-title {
            margin-bottom: 16px;


            font-family: MiSans Latin, MiSans Latin;
            font-weight: bold;
            font-size: 18px;
            color: #282731;
            font-style: normal;
            text-transform: none;
            overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;    /* 行数 */
  -webkit-box-orient: vertical;
  word-break: break-all;
        }

        /* 标签容器 */
        .product-tags {
            margin-bottom: 12px;
        }

        /* 标签样式：浅灰边框 + 小字 */
        .tag {
            display: inline-block;
            border: 1px solid #142261;
            padding: 3px 10px;
            color: #142261;
            margin-right: 6px;
            margin-bottom: 6px;
            font-family: MiSans Latin, MiSans Latin;
            font-weight: 400;
            font-size: 12px;
            color: #142261;
            font-style: normal;
            text-transform: none;


        }

        /* 产品参数：浅灰文字 + 适中字号 */
        .product-params {
            margin-bottom: 20px;
            font-family: MiSans Latin, MiSans Latin;
            font-weight: 400;
            font-size: 16px;
            color: #595860;
            font-style: normal;
            text-transform: none;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;    /* 行数 */
            -webkit-box-orient: vertical;
            word-break: break-all;

        }

        /* 按钮组：横向排列 + 间距 */
        .product-btns {
            display: flex;
            gap: 12px;
            /* 按钮间距更紧凑 */
        }

        .btn:hover {
            color: #ffffff !important;
        }

        /* 按钮基础样式 */
        .btn {
            padding: 10px 24px;
            /* 按钮大小匹配设计稿 */
            font-size: 14px;
            font-family: MiSans Latin, sans-serif;
            cursor: pointer;
            border: none;
            transition: all 0.2s ease;
        }

        .btns {
            padding: 10px 24px;
            /* 按钮大小匹配设计稿 */
            font-size: 14px;
            font-family: MiSans Latin, sans-serif;
            cursor: pointer;
            border: none;
            transition: all 0.2s ease;
        }

        /* 轮廓按钮（Learn More）：蓝边框 + 白背景 */
        .outline-btn {
            border: 1px solid #142261;
            background-color: #fff;
            color: #142261;
        }

        .outline-btn:hover {
            background-color: #f8f9fa;
        }

        /* 实心按钮（Request a quote）：蓝背景 + 白文字 */
        .solid-btns {
            background-color: #142261;
            color: #fff;
        }

        .solid-btns:hover {
            background-color: #0f2a4a;
        }

        /* 响应式适配：小屏幕自动调整 */
        @media (max-width: 768px) {
            .product-grid {
                grid-template-columns: repeat(2, 1fr);
            }

            .product-imgs {
                height: 180px;
            }
        }

        @media (max-width: 480px) {
            .product-grid {
                grid-template-columns: 1fr;
            }

            .product-btns {
                flex-direction: column;
                gap: 10px;
            }

            .btn {
                width: 100%;
            }
        }

        /* 外层包裹：给按钮留出显示空间，避免遮挡 */
        .swiper-wrap {
            position: relative;
            /* width: 90%;
            max-width: 1400px;
            margin: 50px auto;
            padding: 0 50px; */
        }

        /* 核心轮播容器：仅保留overflow: hidden，保证卡片不乱 */
        .swiper-container {
            position: relative;
            width: 100%;
            overflow: hidden;
            /* 必须保留，防止卡片错乱 */
        }

        /* 4个卡片一排：核心布局，稳定不跑偏 */
        .swiper-wrapper {
            display: flex;
            padding: 0 0 20px 0;
        }

        .swiper-slide {
            /* 覆盖Swiper默认样式 */
            padding: 0 10px;
            /* 卡片间距，替代spaceBetween */
            display: flex;
            justify-content: center;
            width: 285px !important;
        }

        /* 卡片样式 */
        .card {
            width: 100%;
            text-align: center;
            padding: 20px 10px;
            transition: background-color 0.3s;
            background: #F8F8F8;
            color: #282731;
        }

        .card.active {
            background-color: #0a2463;
            color: white;
        }

        .card img {
            max-width: 80px;
            margin-bottom: 10px;
        }

        .card p {
            font-size: 16px;
            line-height: 1.4;
        }

        .custom-prev {
            left: -80px;
            background: url('/home/images/prev.png') no-repeat center / contain;

        }

        /* 左
        右按钮：嵌套在wrap内，定位到容器外，无overflow问题 */
        .custom-prev,
        .custom-next {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            width: 40px;
            height: 40px;
            border-radius: 50%;
            cursor: pointer;
            z-index: 10;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 20px;
            color: #666;
        }

        .custom-next {
            background: url('/home/images/next.png') no-repeat center / contain;
            right: -80px;
            /* 同理，在wrap右侧外侧 */
        }

        /* 分页容器 */
        .pagination {
            display: flex;
            gap: 8px;
            /* 缩小间距更符合常规设计 */
            align-items: center;
            justify-content: center;
            margin-top: 30px;
        }

        /* 通用按钮样式 */
        .pagination-btn {
            width: 40px;
            height: 40px;
            border: 1px solid #e5e7eb;
            border-radius: 4px;
            background-color: #ffffff;
            font-size: 16px;
            color: #666;
            display: flex;
            justify-content: center;
            align-items: center;
            cursor: pointer;
            transition: all 0.2s ease;
        }

        /* 当前页激活样式 */
        .pagination-btn.active {
            background-color: #142261;
            /* 深蓝色 */
            color: #ffffff;
            border-color: #142261;
        }

        /* 禁用状态 */
        .pagination-btn:disabled {
            color: #ccc;
            cursor: not-allowed;
            border-color: #eee;
        }

        /* 箭头按钮样式 */
        .pagination-arrow {
            font-size: 14px;
            font-weight: 300;
        }
        /* 筛选 */
.h5s-filter-select {
  margin-bottom: 20px;
}
.h5s-filter-select select {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid #eee;
  border-radius: 6px;
  font-size: 14px;
  background: #fff;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 16px;
}

/* 网格布局 */
.h5s-product-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  padding: 0 10px;
}

/* 产品卡片 */
.h5s-product-card {
  background: #fff;
  padding: 16px;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

/* 图片 */
.h5s-product-img {
  width: 100%;
  aspect-ratio: 1/1;
  display: flex;
  align-items: center;
  height: 100px;
  justify-content: center;
}
.h5s-product-img img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

/* 标题：一行省略 */
.h5s-product-title {
  margin: 0;
  width: 150px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;



font-family: MiSans Latin, MiSans Latin;
font-weight: 600;
font-size: 16px;
color: #282731;
font-style: normal;
text-transform: none;
}

/* 标签 */
.h5s-product-tags {
  display: flex;
  gap: 6px;
}
.h5s-tag {
  padding: 3px 6px;
  border: 1px solid #142261;
  color: #142261;
  font-size: 12px;
  border-radius: 2px;
}

/* 描述：一行省略 */
.h5s-product-desc {
  font-size: 13px;
  color: #666;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  width: 150px;
  text-overflow: ellipsis;
}

/* 按钮组 */
.h5s-product-buttons {
  display: flex;
  gap: 10px;
  margin-top: auto;
}
.h5s-btn {
  flex: 1;
  padding: 8px 0;
  /* border-radius: 4px; */
  font-size: 10px;
  border: none;
}
.h5s-btn-outline {
  background: #fff;
  color: #142261;
  border: 1px solid #142261;
}
.h5s-btn-solid {
  background: #142261;
  color: #fff;
}