.home{
    box-shadow: 0 0px 10px 0 rgba(0, 0, 0, 0.1);
  }

  .breadcrumb {
    font-family: Arial, sans-serif;
    font-size: 14px;
    height: 10vh; 
    display: flex;
    align-items: center;
    margin-bottom: 0;
    margin-top: 8%; /* 在已有padding基础上增加间距 */
    margin-left: 25vh; /* 考虑改为固定px或百分比值 */
    /* margin-top: 15vh; */
    background:#ffffff;
    border-radius: 0px;
    padding: 0px;
  }

  .breadcrumb-item {
    color: #666;
    text-decoration: none;
    margin: 0 0px;
    transition: color 0.3s;
  }
  /* .breadcrumb-item:hover 规则会应用到 所有 带有 breadcrumb-item 类的元素，包括当前页面项（带有 current 类） */
  .breadcrumb-item:hover {
    text-decoration: underline; /* 悬停时显示下划线 */
    text-decoration-thickness: 1px; /* 控制下划线粗细（可选） */
    color: #999;

  }
  .breadcrumb-item.current {
    color: #666; /* 设置当前项的颜色 */
  }

  .breadcrumb-item.current:hover {
    text-decoration: none; /* 禁用下划线 */
    color: #999; /* 保持颜色不变 */
  }

  .breadcrumb-separator {
    color: #999;
    margin: 0 5px;
  }
  
  .grey{
    /* display: flex;
    justify-content: center;
    align-items: center; */
    width: 100%;
    padding: clamp(20px, 5vh, 50px) clamp(20px, 10%, 200px); 
    /* 动态 padding：最小 20px，默认 5vh/10%，最大 50px/100px */
    background:#F2F4F6;
    /* background: #ffffff; */
  }

  .content{

    background: #ffffff;
    display: flex;          /* 启用弹性布局 */
    justify-content: center;
padding: 10px 0;
    gap:20px;
  }
@media (max-width: 1600px) {
   .grey{
    /* display: flex;
    justify-content: center;
    align-items: center; */
    width: 100%;
    padding: 10px; 
    /* 动态 padding：最小 20px，默认 5vh/10%，最大 50px/100px */
    background:#F2F4F6;
    /* background: #ffffff; */
  }
    .breadcrumb {
    margin-left: 20px; 
    margin-top: 10%;
  }
  }
  .banner-left{
    width:20%;
    padding: 5px 0;
    background-color: #ffffff;
 }

  .banner-left .title {
    background: #D11034;
    text-align: left; /* 标题居中 */
    margin-top: 0; /* 移除默认的上边距 */
    margin-bottom: 0; /* 标题与列表之间的间距 */
    padding-left:20px ;
    color: #ffffff; /* 标题颜色 */
    font-size:16px; /* 标题大小 */
    line-height: 35px; /* 关键：行高 = 高度 */
  }
  .banner-right .title {
    background: #333;
    text-align: left; /* 标题居中 */
    margin-top: 0; /* 移除默认的上边距 */
    margin-bottom: 0; /* 标题与列表之间的间距 */
    padding-left:20px ;
    color: #ffffff; /* 标题颜色 */
    font-size:16px; /* 标题大小 */
    line-height: 35px; /* 关键：行高 = 高度 */
  }
  .banner-left {
width: 100%;
max-width: 300px; /* 可调整宽度 */
}

.banner-left details {
margin-bottom: 0px; /* 每个分类之间留点间距 */
}

.banner-left details summary {
margin: 0;
height: 50px;
line-height: 50px;
padding-left: 20px;
border: 1px solid #F2F2F2;
background: #fff;
color: #666;
cursor: pointer;
list-style: none; /* 移除默认三角符号 */
position: relative; /* 用于自定义箭头 */
}

/* 自定义三角箭头 */
.banner-left details summary::after {
content: "▼";
position: absolute;
right: 20px;
top: 50%;
transform: translateY(-50%);
font-size: 12px;
transition: transform 0.3s;
}

/* 展开时箭头旋转 */
.banner-left details[open] summary::after {
transform: translateY(-50%) rotate(180deg);
}

.banner-left .submenu {
margin: 0;
padding: 0;

border-top: none; /* 与 summary 边框无缝衔接 */
background: #f1f1f1;
}

.banner-left .submenu a {
display: block;
padding: 12px 20px;
text-decoration: none;
color: #666;
transition: all 0.3s;
border: 0.5px solid #dddddd;
}
.banner-left summary:hover ,
.banner-left .submenu a:hover {
color: #fff;
background-color: #D11034;
}

.banner-left .submenu a.active {
color: #fff;
background-color: #D11034;
}
.banner-right{
width:75%;
padding: 5px 0;
background-color: #fff;
}

.relatedProducts{
    margin-top: 20px;
border: 1px solid #dddddd;
}
.totalpage{
    
    margin: 0;
    display: flex;
    justify-content:center;
    align-items:flex-start;
    gap: 20px;
    padding:20px ;
}
.Product{
width: 45%;
}
  .image-container {
    width: 100%;
      position: relative;
      display: inline-block;   /* 让容器包裹图片 */
      
    }

    .image-container img {
      cursor: move; /* 设置鼠标形状 */
      width: 100%;
      height: 100%;
      object-fit: cover;
      border: 1px solid #dddddd;
      }

    .magnifier {
        position: absolute;
        border: 1px solid #ccc;
        background-color: rgba(255, 255, 128, 0.8);
        width: 150px;
        height: 150px;
        pointer-events: none;
        opacity: 0.5;
        display: none;
      }

    .magnified-area {
      position: absolute;
      left: 100%; /* 定位到图片左侧 */
      top: 0;                  /* 与图片顶部对齐 */
      margin-left: 10px;  /* 与图片之间的间距 */
        width: 200px;
        height: 200px;
        border: 1px solid #ccc;
        display: none;
        overflow: hidden;
        z-index: 10; /* 添加 z-index 属性，值可按需调整 */
        opacity: 1; /* 确保不透明 */
        /* background-color:#fff */
/* border: 1px solid #ffff80; */
      }

/* 鼠标悬停时显示放大区域 */
.image-container:hover .magnified-area {
display: block;
}
    .magnified-area img {
        position: absolute;
        width: 400%;
        height: 400%;
        object-fit: cover;
        opacity: 1; /* 确保不透明 */
      }

      .Product .other{margin-left: 100px;
        margin-top: 20px;
        width: 100px;
        height: 100px;
        display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    gap: 5px;
    cursor: pointer;
      }
      /* .product-info{
        width: 55%;
      } */
      .other img{
        cursor: pointer;
      }
      .other img:hover{
        border: 2px solid #666;
      }
      /* 定义选中图片的边框样式 */
  .selected {
    border: 2px solid #999;
  }
      .product-info {
        width: 55%;
/* font-family: Arial, sans-serif; */
/* max-width: 800px; */
margin: 0 auto;
padding: 0 20px;
}
.product-info h2{
color: #D11034;
font-size: 20px;
font-family: Arial, sans-serif;
margin-top: 10px;
}
.product-info .custom-hr{
margin: 10px 0;
width: 100%;
}
.spec-list {
  list-style: none;
  padding: 0;
  margin: 0;
  width: 100%; /* 确保宽度足够 */
  background-color: #f5f5f5;
}


  .spec-item {
    display: flex;
   
    padding: 5px 0;
  border-bottom: 1px dashed #ddd;
  }
.spec-name {
  flex: 0 0 40%; /* 不增长，不收缩，基础宽度40% */
    text-align: left;
  color: #666;
}

.spec-value {
 flex: 0 0 60%; /* 不增长，不收缩，基础宽度60% */
    text-align: left;
  color: #666;
  
}
/* 响应式调整 *//* 小屏幕单列显示 */
/* @media (max-width: 600px) {
.spec-list {
  grid-template-columns: 1fr; 
}
.spec-value {
  padding-left: 0;
  margin-bottom: 12px;
}
} */

.product-info p{
margin: 20px 0;
}
.product-info .p-two{
margin-bottom: 30px;
}
.product-info .p-two p{
margin: 5px 0;
}
.product-info .p-two a{
margin-left: 20px;
color: #333;
}
.product-info .p-two a:hover{
text-decoration: underline; 

}
.product-info img{
width: 25px;
}
.btn{
width: 100px;
background-color: #D11034;
color: #fff;
font-size: 16px;
}
.btn:hover{
background-color: #333;
color: #fff;
}
.detail{
padding:20px ;
}
.detail .detail-btn{
margin-bottom: 0;
width: 80px;
height: 40px;
background-color: #D11034;
color: #fff;
font-size: 16px;
border-radius: 0;
border:none;
}
.detail .custom-hr{
margin-top: 0;
}
.picture-collection{
padding: 0 20px;
}
.footer-container{
margin-top: 20px;
    display: flex;          /* 启用弹性布局 */
    align-items: center;    /* 垂直居中对齐 */
    justify-content: space-between; /* 两端对齐 */
  }

  .href2{
    color: #666;
    text-decoration: none;
    margin: 0 5px;
    transition: color 0.3s;
  }
    .href2:hover {
    color: blue;
  }
  .productDetail{
border: 1px solid #dddddd;
}
.custom-slider {
    position: relative;
    max-width: 1200px;
    margin: 0 auto;
  }
  
  .slider-container {
    overflow: hidden;
    animation: slideInFrombottom 1s ease-out forwards;
  }

  /* 下侧滑入动画 */
  /* @keyframes slideInFrombottom {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
  } */

  .slider-wrapper {
    display: flex;
    /* transition: transform 0.5s ease; */
  }
  
  .slider-slide {
    min-width: 100%;
    display: none;
  }

  .slider-slide img:hover {
    transform: scale(1.05);
  }

  .slider-slide.active {
    display: block;
  }
  
  .image-group {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    width: 100%;
      }
      /* 图片组样式 */
  .swiper-slide .image-group {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
    width: 100%;
  }

  /* 图片样式 */
  .swiper-slide img {
    width: 100%;
    object-fit: cover;
    transition: transform 0.3s;
  }
  .image-with-caption {
    text-align: center;
    margin: 10px;
  }
  .image-with-caption:hover .image-with-btn{
    background-color: #D11034; 
    color: #fff;
  }
  .image-with-btn{
    margin-top: 10px;
    width: 200px;
    height: 40px;
    background-color: #e6e5e5;
    color: #333;
    font-size: 16px;
    border: none;
  }
  .image-with-caption img {
    max-width: 100%;
    height: auto;
    object-fit: cover;
    transition: transform 0.3s;
  }
  .image-with-caption p{
    margin-top: 10px;
    color:#999;
  }
  .slider-pagination {
    display: flex;
    justify-content: center;
    padding: 20px 0;
  }
  
  .pagination-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #ccc;
    margin: 0 5px;
    cursor: pointer;
  }
  
  .pagination-dot.active {
    background: #df1f1f;
  }

  .form-container h2{
    font-weight: 800;
    font-size: 28px;
    margin-bottom: 20px;
    color: #333;
    line-height: 1.5;
    text-align: center;     /* 水平居中 */
  }

  .form-container p{
    position: relative; /* 为伪元素建立定位上下文 */
    font-size: 16px;
    color: #333;
    line-height: 1.8;
    text-align: center;     /* 水平居中 */
    margin-bottom: 40px;
  }

  /* 小横杠 */
  .form-container p::after {
    position: absolute; /* 绝对定位 */
    /* 是经典的居中技巧 */
    left: 50%; /* 从50%位置开始 */
    transform: translateX(-50%); /* 向左回退自身宽度的一半 */
    bottom: -10px; /* 定位到p标签下方 */
    margin: 0; /* 清除可能干扰的margin */
    content: "";
    text-align: center;
    width: 80px;
    margin-top: 10px;
    border-bottom: 3px solid #D11034;
  }

  .form-container{
    background: #ffffff;
    padding:0 20px;
    height:70vh;
    width: 100%;
    margin-top: 20px;
  }

  .form-group.full-width {
    width: 100%;
    margin-bottom: 20px;
  }

  .form-fields-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; /* 两列 */
    gap: 20px; /* 间距 */
    margin-bottom: 20px;
  }
  /* 输入框基础样式 */
  .form-group.full-width input[type="text"]{
    background:#F2F2F2;
    height: 200px;
    width: 100%;
    padding: 12px;
    border: 1px solid #F2F2F2;
    font-size: 16px;
    transition: border-color 0.3s;
    box-sizing: border-box;

  
  /* 确保文本和placeholder从顶部开始 */
    align-items: flex-start; /* 对flex容器有效 */
    vertical-align: top; /* 对inline/inline-block元素有效 */
    line-height: normal; /* 重置行高 */
  }

  /* 专门调整placeholder位置 */
  .form-group.full-width input[type="text"]::placeholder {
    position: absolute;
    top: 12px; /* 匹配padding-top值 */
    left: 12px; /* 匹配padding-left值 */
    color: #999; /* 可选：设置placeholder颜色 */
    opacity: 1; /* 确保Firefox中完全可见 */
  }

  input[type="text"],
  input[type="tel"],
  input[type="email"],
  input[type="password"] {
    background:#F2F2F2;
    margin-bottom: 0px;
    width: 100%;
    padding: 12px;
    border: 1px solid #F2F2F2;
    font-size: 16px;
    transition: border-color 0.3s;
    box-sizing: border-box;
  }
  /* 验证码容器 */
  .captcha-container {
    display: flex;
    gap: 10px;
  }

  .captcha-input {
    flex: 1;
  }

  .captcha-image {
    height: 46px;
    background-color: #F2F2F2;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Courier New', monospace;
    font-size: 20px;
    font-weight: bold;
    letter-spacing: 3px;
    color: #333;
    cursor: pointer;
    user-select: none;
    padding: 0 10px;
  }

  /* 错误消息 */
  .error-message {
    color: #e74c3c;
    font-size: 12px;
    margin-top: 5px;
    display: none;
  }

  button[type="submit"] {
    /* display: inline-block; */
    display: flex;
    justify-content: center;
    align-items: center;
    /* 尺寸 */
    width: 100%; /* 固定宽度 */
    height: 48px; /* 明确固定高度，匹配输入框 */
    background-color: #333333; /* 绿色背景 */
    color: #ffffff; /* 白色文字 */
    text-decoration: none; /* 去掉下划线 */
    font-weight: bold;
    transition: background-color 0.5s; /* 悬停动画 */
  }

  button[type="submit"]:hover {
    background-color: #D11034; /* 悬停时变深绿色 */
    color: #fff; /* 白色文字 */
    border:none;
  }