html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  overflow-x: hidden;
}

* {
  box-sizing: border-box;
}


img, video {
  max-width: 100%;
  height: auto;
}


.container {
  width: 100%;
  padding: 0 15px;
}

.absolute-element {
  position: absolute;
  left: 0;
  right: 0;
}
      .content-auto {
        content-visibility: auto;
      }
      .text-shadow {
        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
      }
      .transition-transform-opacity {
        transition-property: transform, opacity;
      }
      .hover-lift {
        @apply transition-all duration-300 hover:shadow-card-hover hover:-translate-y-1;
      }
      .carousel-indicator {
        @apply w-2 h-2 bg-white/50 cursor-pointer transition-all;
      }
      .carousel-indicator.active {
        @apply bg-white w-6;
      }
      .tab-active {
        @apply bg-primary text-white;
      }
      .search-tab-active {
        @apply bg-primary text-white border-primary;
      }
      .category-active {
        @apply bg-primary text-white;
      }
      /* 客服系统工具类 */
      .kf-glass-effect {
        background: rgba(255, 255, 255, 0.9);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
      }
      .kf-gradient-bg {
        background: linear-gradient(135deg, #E91E63 0%, #8A2BE2 100%);
      }
      .kf-bubble-pulse {
        position: relative;
      }
      .kf-bubble-pulse::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border-radius: 50%;
        background: rgba(233, 30, 99, 0.4);
        animation: kf-bubble-pulse 2s infinite;
        z-index: -1;
      }
      @keyframes kf-bubble-pulse {
        0% { transform: scale(1); opacity: 1; }
        70% { transform: scale(1.5); opacity: 0; }
        100% { transform: scale(1.5); opacity: 0; }
      }
      .kf-message-appear {
        animation: kf-message-appear 0.3s ease-out;
      }
      @keyframes kf-message-appear {
        from { transform: scale(0.9); opacity: 0; }
        to { transform: scale(1); opacity: 1; }
      }
      .kf-card-hover {
        transition: all 0.3s ease;
      }
      .kf-card-hover:hover {
        transform: translateY(-3px);
        box-shadow: 0 10px 15px rgba(233, 30, 99, 0.1);
      }


    /* 全局样式 */
    body {
      scroll-behavior: smooth;
    }

    /* 动画效果 */
    @keyframes fadeInUp {
      from {
        opacity: 0;
        transform: translateY(20px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    .animate-fadeInUp {
      animation: fadeInUp 0.6s ease-out forwards;
    }

    .delay-100 { animation-delay: 0.1s; }
    .delay-200 { animation-delay: 0.2s; }
    .delay-300 { animation-delay: 0.3s; }

    /* 加载动画 */
    .skeleton {
      background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
      background-size: 200% 100%;
      animation: shimmer 1.5s infinite;
    }

    @keyframes shimmer {
      0% { background-position: -200% 0; }
      100% { background-position: 200% 0; }
    }

    /* 轮播动画 */
    .carousel-slide {
      transition: opacity 0.5s ease-in-out;
    }

    /* 产品分类向右展开动画 */
    .category-item {
      position: relative;
    }

    .category-item span img{height:24px;}
    .category-submenu {
      position: absolute;
      left: 100%;
      top: 0;
      width: 800px;
      background: white;
      border-radius: 0 4px 4px 0;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
      z-index: 10;
      visibility: hidden;
      opacity: 0;
      transform: translateX(-10px);
      transition: visibility 0.3s, opacity 0.3s, transform 0.3s;
    }

    .category-item:hover .category-submenu {
      visibility: visible;
      opacity: 1;
      transform: translateX(0);
    }

    /* 三级分类样式 */
    .submenu-column {
      flex: 1;
    }

    .submenu-column-title {
      font-weight: bold;
      margin-bottom: 10px;
      color: #0066CC;
    }

    .third-level-category {
      padding-left: 10px;
      font-size: 0.85rem;
      color: #666;
    }

    /* 确保父容器不会截断子菜单 */
    .category-list {
      position: relative;
      z-index: 10;
    }

    /* 选项卡样式 */
    .tab-content {
      display: none;
    }

    .tab-content.active {
      display: block;
    }

/* 语言下拉菜单 - 全屏宽度版本 */
.language-dropdown {
  position: relative;
  display: inline-block;
  z-index: 105; /* 确保在所有内容上方 */
}

.language-dropdown-content {
  display: none;
  position: fixed; /* 固定定位，相对于视口 */
  top: 72px; /* 调整此值使其在导航栏下方 */
  left: 0;
  right: 0;
  width: 100vw; /* 强制全屏宽度 */
  background-color: white;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.1);
  z-index: 105;
  border-radius: 0 0 4px 4px;
  overflow: hidden;
  box-sizing: border-box;
  padding: 0.5rem 1rem; /* 与页面内容对齐的内边距 */
}


/* 鼠标悬停时展开 */
.language-dropdown:hover .language-dropdown-content {
  display: block;
  animation: fadeIn 0.2s ease-in-out;
}

.language-dropdown-content .grid {
  max-width: 1500px; /* 与页面容器最大宽度一致 */
  margin: 0 auto; /* 居中网格 */
}

/* 语言选项样式 */
.language-item {
  // display: flex;
  align-items: center;
  justify-content: center;
  color: #333;
  // padding: 8px 5px;
  text-decoration: none;
  transition: all 0.2s;
  white-space: nowrap;
  font-size: 14px;
}

/* 国旗图片样式 */
.language-flag {
  object-fit: cover;
  height:30px;
}

.language-dropdown-content a {
  color: #333;
  padding: 10px 5px;
  text-decoration: none;
  transition: all 0.2s;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  background-color:#f5f7fa;
}

.language-dropdown-content a:hover {
  background-color: #0066CC;
  color:#ffffff;
}

/* 淡入动画 */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* 响应式调整 - 小屏幕自动减少列数 */
@media (max-width: 1024px) {
  .language-dropdown-content .grid {
    grid-template-columns: repeat(6, 1fr);
  }
}

@media (max-width: 768px) {
  .language-dropdown-content .grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (max-width: 480px) {
  .language-dropdown-content .grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

    /* 产品分类图片样式 */
    .category-img-container {
      position: relative;
      overflow: hidden;
      border-radius: 8px;
    }

    .category-img {
      transition: transform 0.3s ease;
    }

    .category-img-container:hover .category-img {
      transform: scale(1.05);
    }

    .category-img-overlay {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0) 100%);
      padding: 10px;
      color: white;
      font-weight: bold;
    }

    /* 强制下拉菜单定位样式 */
    #search-type-btn {
      position: relative;
      z-index: 10;
    }

    #search-type-dropdown {
      top: 100% !important;
      bottom: auto !important;
      box-sizing: border-box;
      z-index: 50 !important;
    }

    /* 防止表单影响下拉菜单 */
    .search-form {
      position: relative;
      z-index: 5;
    }
    img.sjfl{width:50px;height:50px;transition:all .6s;border-radius:10px;}
    // img.sjfl:hover{border-radius:50px;}

    /* 移除各类圆角样式 */
    .category-submenu {
      border-radius: 0;
    }

    .language-dropdown-content {
      border-radius: 0;
    }

    .category-img-container {
      border-radius: 0;
    }

    #search-type-dropdown {
      border-radius: 0;
    }

    .category-btn.active {
      background-color: #0d6efd !important;
      color: white !important;
    }
     /* 新闻列表特有样式 */
    .news-tag {
      @apply text-xs px-2 py-0.5;
    }
    .news-list-item:not(:last-child) {
      @apply border-b border-gray-100;
    }

    /* 分页样式 - 重新设计 */
    .pagination-container {
      margin: 20px 0;
      text-align: center;
    }
    .pagination {
      display: inline-flex;
      align-items: center;
      padding: 0;
      margin: 0;
      list-style: none;
      border: 1px solid #e2e8f0;
    }
    .pagination li {
      border-right: 1px solid #e2e8f0;
    }
    .pagination li:last-child {
      border-right: none;
    }
    .pagination a, .pagination span {
      display: block;
      padding: 8px 15px;
      text-decoration: none;
      color: #333;
      background-color: #fff;
      transition: all 0.2s ease;
    }
    .pagination a:hover {
      background-color: #f1f5f9;
      color: #0066CC;
    }
    .pagination .active span {
      background-color: #0066CC;
      color: #fff;
      font-weight: bold;
    }
    .pagination .disabled span {
      color: #999;
      background-color: #f8fafc;
      cursor: not-allowed;
    }

    /* 动画效果 */
    .fade-in {
      animation: fadeIn 0.5s ease-in-out;
    }

    @keyframes fadeIn {
      from { opacity: 0; transform: translateY(10px); }
      to { opacity: 1; transform: translateY(0); }
    }

    /* 平滑滚动 */
    html {
      scroll-behavior: smooth;
    }

    nav.bg-primary .flex a {
  text-decoration: none;
  transition: background-color 0.3s ease; /* 平滑过渡背景色 */
  font-size:18px;
}

nav.bg-primary .flex a.active {
  background-color: #FF6600; /* 主色80%透明度，比默认更深 */
}
nav.bg-primary .flex a:not(.active):hover {
  background-color: #FF6600; /* 主色90%透明度，hover时加深 */
}

      .content-auto {
        content-visibility: auto;
      }
      .hover-lift {
        @apply transition-all duration-300 hover:shadow-card-hover hover:-translate-y-1;
      }
      .filter-active {
        @apply bg-primary text-white;
      }
      .product-card {
        @apply bg-white shadow-card overflow-hidden hover-lift;
      }
      .text-ellipsis-2 {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
      }
      .category-item {
        @apply px-3 py-1.5 inline-block mr-2 mb-2 transition-colors;
      }
      .category-item.current {
        @apply bg-primary text-white;
      }
      .category-item:not(.current) {
        @apply bg-light text-dark hover:bg-primary/10;
      }
      .category-item.hot {
        @apply relative;
      }
      .category-item.hot::after {
        content: "热";
        @apply absolute -top-1 -right-1 bg-secondary text-white text-[10px] px-1 rounded;
      }

/* 右侧边栏悬浮样式 */
    .sticky-sidebar {
      position: sticky;
      top: 20px;
      max-height: calc(100vh - 40px);
      overflow-y: auto;
    }

    /* 滚动条美化 */
    .sticky-sidebar::-webkit-scrollbar {
      width: 6px;
    }

    .sticky-sidebar::-webkit-scrollbar-track {
      background: #f1f1f1;
    }

    .sticky-sidebar::-webkit-scrollbar-thumb {
      background: #ccc;
      border-radius: 3px;
    }

    .sticky-sidebar::-webkit-scrollbar-thumb:hover {
      background: #aaa;
    }

     /* 筛选器折叠/展开 */
    .filter-collapse-content {
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.3s ease-out;
    }
    .filter-collapse.expanded .filter-collapse-content {
      max-height: 500px;
      transition: max-height 0.5s ease-in;
    }
    .filter-collapse-icon {
      transition: transform 0.3s ease;
    }
    .filter-collapse.expanded .filter-collapse-icon {
      transform: rotate(180deg);
    }

      .product-image-container {
    @apply relative overflow-hidden;
    aspect-ratio: 1/1; /* 核心：设置宽高比为1:1 */
  }

  /* 2. 产品图片样式：确保填充容器且不变形 */
  .product-image {
    @apply w-full h-full object-cover; /* 图片填充容器，保持比例不拉伸 */
  }

  /* 3. 列表视图特殊处理（确保小屏幕/大屏幕均保持1:1） */
  .products-list .product-image-container {
    @apply w-full sm:w-48 flex-shrink-0;
    /* sm:w-48 下强制高度=宽度，保持1:1 */
    height: auto; /* 清除固定高度，由aspect-ratio控制 */
  }

  /* 4. 网格视图兼容：确保卡片内图片区域1:1，不影响卡片布局 */
  .products-grid .product-image-container {
    @apply w-full;
    /* 移除原有的固定h-48，由aspect-ratio:1/1自动计算高度 */
  }

  /* 5. 图片上层元素适配（标签、渐变层）：确保在1:1容器内正常显示 */
  .product-image-container .bg-gradient-to-t {
    @apply absolute bottom-0 left-0 right-0 p-3;
    /* 渐变层宽度自适应1:1容器，高度保持原有视觉效果 */
  }
  .product-image-container .bg-secondary,
  .product-image-container .bg-primary {
    @apply absolute top-2 left-2;
    /* 标签位置在1:1容器内保持不变 */
  }



.w {
            margin: 0 auto;
            width: 100%;
            box-sizing: border-box;
        }

        .main ul {
            margin: 0;
            padding: 0;
            margin-top:-20px;
        }

        .main li {
            margin-top: 24px;
            box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.12);
            background-color: #fff;
            overflow: hidden;
            padding: 32px 40px;
        }

        .main .erweima {
            float: right;
            width: 160px;
            background-color: #f5f5f5;
            border-radius: 16px;
            padding: 15px;
            overflow: hidden;
            box-sizing: border-box;
            margin-left: 40px;
        }

        .main .erweima .item {
            text-align: center;
        }

        .main li .erweima .item .image {
            padding: 5px;
        }

        .main .erweima .item p {
            margin-top: 5px;
            font-size: 14px;
            color: #666;
        }

        .main .has-image .left {
            overflow: hidden;
            margin-top: 12px;
        }

        .main .has-image .left .image {
            width: 234px;
            float: left;
            margin-right: 25px;
        }

        .main .has-image .left .image a {
            display: block;
            height: 0;
            padding-bottom: 67.66%;
            overflow: hidden;
            border-radius: 8px;
        }

        .main .has-image .left .image img {
            max-height: none;
            width: 100%;
            object-fit: cover;
            display: block;
        }

        .main .no-image .left {
            margin-top: 12px;
        }

        .main .left .text {
            overflow: hidden;
        }

        .main .left .text .xw {
            font-size: 22px;
            height: auto;
            line-height: 28px;
            overflow: hidden;
            font-weight: bold;
            margin-bottom: 10px;
            display: flex;
            flex-wrap: wrap;
            align-items: center;
        }

        .main .left .text .xw .level.senior {
            display: inline-flex;
            align-items: center;
            margin-right: 10px;
            padding: 2px 10px;
            border-radius: 4px;
            font-size: 14px;
            vertical-align: middle;
            color: white;
            background: linear-gradient(135deg, #ff9600, #ff6b00);
            box-shadow: 0 2px 4px rgba(255, 120, 0, 0.3);
        }

        .main .left .text .xw .level.premium {
            display: inline-flex;
            align-items: center;
            margin-right: 10px;
            padding: 2px 10px;
            border-radius: 4px;
            font-size: 14px;
            vertical-align: middle;
            color: white;
            background: linear-gradient(135deg, #9d50bb, #6e48aa);
            box-shadow: 0 2px 4px rgba(100, 50, 150, 0.3);
        }

        .main .left .text .xw .level i {
            margin-right: 5px;
            font-size: 12px;
        }

        .main .left .text .xw .level i:not(:last-child) {
            margin-right: 2px;
        }

        .main .left .text .xw a {
            color: #333;
            vertical-align: middle;
            flex: 1;
            min-width: 200px;
        }

        .main .left .text .xw a:hover {
            color: #f90;
        }

        .main .left .text .message {
            line-height: 24px;
            max-height: 42px;
            overflow: hidden;
            color: #999;
            margin-top: 15px;
            font-size: 14px;
        }

        .main .left .text .bottom {
            margin-top: 20px;
            display: flex;
            flex-wrap: wrap;
        }

        .main .has-image .left .text .bottom {
            margin-left: 0;
        }

        .main .left .text .bottom dl {
            flex: 1;
            min-width: 100px;
            text-align: center;
            padding: 0 10px;
            box-sizing: border-box;
            border-right: 1px solid #eaeaea;
            font-size: 14px;
        }

        .main .left .text .bottom dl:first-child {
            text-align: left;
            padding-left: 0;
        }

        .main .left .text .bottom dl:last-child {
            border-right: none;
        }

        .main .left .text .bottom dt {
            height: auto;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            color: #333;
            font-weight: 500;
        }

        .main .left .text .bottom dd {
            margin-top: 8px;
            color: #999;
            height: auto;
            overflow: hidden;
            font-size: 13px;
        }

        @media only screen and (min-width: 1025px) and (max-width: 1199px) {
            .main li {
                padding: 25px 32px;
                margin-top: 18px;
            }

            .main .erweima {
                width: 140px;
                padding: 12px;
                margin-left: 25px;
            }

            .main .has-image .left .image {
                width: 184px;
                margin-right: 18px;
            }

            .main .left .text .xw {
                font-size: 18px;
            }

            .main .left .text .message {
                line-height: 19px;
                max-height: 57px;
                margin-top: 15px;
                font-size: 12px;
            }

            .main .left .text .bottom {
                margin-top: 13px;
            }

            .main .left .text .bottom dl {
                font-size: 12px;
                min-width: 80px;
            }
        }

        @media only screen and (max-width: 1024px) {
            .main li {
                padding: 20px;
                margin-top: 15px;
            }

            .main .erweima,
            .main .left .text .bottom {
                display: none !important;
            }

            .main .has-image .left .image {
                width: 100%;
                float: none;
                margin-right: 0;
                margin-bottom: 15px;
            }

            .main .left .text .xw {
                font-size: 18px;
                height: auto;
                margin-bottom: 10px;
                flex-direction: column;
                align-items: flex-start;
                gap: 8px; /* 增加两行之间的间距 */
            }

            /* 手机端会员等级和公司名称分两行显示 */
            .main .left .text .xw .level {
                margin-bottom: 5px;
            }

            .main .left .text .xw a {
                min-width: auto;
                width: 100%;
            }

            .main .left .text .message {
                max-height: none;
                margin-top: 10px;
                font-size: 14px;
            }

            .main .no-image .left {
                padding: 10px 0;
            }
        }


<style type="text/css">
/* 确保分类列表容器作为定位参考点 */
.category-list {
  position: relative;
  z-index: 10;
  min-height: 100%;
}

/* 移除分类项的相对定位，避免影响子菜单 */
.category-item {
  position: static; /* 关键修改：取消每个分类项的相对定位 */
}

/* 调整子菜单定位，相对于整个分类列表容器 */
.category-submenu {
  position: absolute;
  left: 100%; /* 从分类列表右侧开始 */
  top: -20px; /* 始终从顶部开始 */
  width: 800px; /* 固定宽度 */
  min-height: 620px; /* 固定最大高度 */
  overflow-y: auto; /* 内容过多时滚动 */
  background: white;
  border-radius: 0 4px 4px 0;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  z-index: 100;
  visibility: hidden;
  opacity: 0;
  transform: translateX(-10px);
  transition: visibility 0.3s, opacity 0.3s, transform 0.3s;
  padding: 20px; /* 统一内边距 */
  box-sizing: border-box; /* 确保宽度包含内边距 */
}

/* 鼠标悬停时显示子菜单 */
.category-item:hover .category-submenu {
  visibility: visible;
  opacity: 1;
  transform: translateX(0);
}

/* 确保子菜单内链接有足够的hover区域 */
.category-submenu a {
  display: inline-block;
  width: 100%;
  box-sizing: border-box;
}

/* 优化子菜单滚动条 */
.category-submenu::-webkit-scrollbar {
  width: 6px;
}

.category-submenu::-webkit-scrollbar-track {
  background: #f1f1f1;
}

.category-submenu::-webkit-scrollbar-thumb {
  background: #ccc;
  border-radius: 3px;
}

.submenu-item a span{font-size:12px;padding-top:10px;}

#translate{display:none;}



        .xwsb {
            font-size: 22px;
            height: 33px;
            line-height: 33px;
            // overflow: hidden;
            font-weight: bold;


        }

        .xwsb .senior {
            display: inline-flex;
            align-items: center;
            margin-right: 10px;
            padding: 2px 10px;
            font-size: 14px;
            vertical-align: middle;
            color: white;
            background: linear-gradient(135deg, #ff9600, #ff6b00);
            box-shadow: 0 2px 4px rgba(255, 120, 0, 0.3);
        }

        .xwsb .premium {
            display: inline-flex;
            align-items: center;
            margin-right: 10px;
            padding: 2px 10px;
            font-size: 14px;
            vertical-align: middle;
            color: white;
            background: linear-gradient(90deg, rgb(10, 0, 114) 4%, rgb(16, 0, 70) 76%, rgb(3, 0, 12) 100%);
            box-shadow: 0 2px 4px rgba(100, 50, 150, 0.3);
        }

        .xwsb .level i {
            margin-right: 5px;
            font-size: 12px;
        }

        .xwsb .level i:not(:last-child) {
            margin-right: 2px;
        }

        .xwsb a {
            color: #333;
            vertical-align: middle;
            flex: 1;
            min-width: 200px;
        }

        .xwsb a:hover {
            color: #f90;
        }