/* —— 全局复位 —— */
* { margin:0; padding:0; box-sizing:border-box; }
body { font-family: "Helvetica Neue", Arial, sans-serif; color:#333; line-height:1.6; }
.container { width:90%; max-width:1200px; margin:0 auto; }

/* —— 导航 & 头部 —— */
header { background:#fff; border-bottom:1px solid #eee; position:sticky; top:0; z-index:100; }
.header-inner { display:flex; align-items:center; justify-content:space-between; padding:0.5rem 0; }
.logo img { height: 115px;   
  width: auto }
.main-nav a { margin-left:1.2rem; color:#333; text-decoration:none; font-weight:500; }
.main-nav a:hover { color:#E3001B; }




/* —— 通用 Section —— */
.section { padding:4rem 0; }
.bg-light { background:#f9f9f9; }
.section h2 { text-align:center; margin-bottom:2rem; color:#E3001B; }
.section h2 span { display:block; color:#333; font-size:0.9rem; margin-top:0.4rem; }



/* 通用 section 标题 */
.section-title {
  text-align: center;
  color: #E3001B;
  font-size: 1.75rem;
}
.section-title span {
  display: block;
  color: #333;
  font-size: 1rem;
  font-weight: normal;
  margin-top: .25rem;
}


/* —— 联系我们 —— */
.contact-wrap { display:flex; flex-wrap:wrap; gap:2rem; }
.contact-info { flex:1 1 300px; font-size:0.9rem; }
.contact-info a { color:#00AEEF; text-decoration:none; }
.contact-form { flex:1 1 300px; display:flex; flex-direction:column; }
.contact-form input,
.contact-form textarea { margin-bottom:1rem; padding:0.8rem; border:1px solid #ccc; border-radius:4px; }
.contact-form button {
  padding:0.8rem; background:#E3001B; border:none; color:#fff; font-weight:600; border-radius:4px;
  cursor:pointer; transition:background .2s;
}
.contact-form button:hover { background:#c00; }

/* —— Footer —— */
footer { background:#333; color:#fff; text-align:center; padding:1rem 0; font-size:0.9rem; }

/* —— 按钮居中 & 样式 —— */
.center { 
  text-align: center; 
  margin-top: 1.5rem; 
}
.btn {
  display: inline-block;
  padding: 0.8rem 1.5rem;
  background: #E3001B;
  color: #fff;
  border-radius: 4px;
  text-decoration: none;
  font-weight: 600;
  transition: background .2s;
}
.btn:hover { 
  background: #c00; 
}



/* —— 客户案例轮播 —— */
.carousel { position: relative; max-width: 800px; margin: 0 auto; overflow: hidden; }
.slides { position: relative; }
.slide {
  text-align: center;
}
.slide img {
  width: 100%; height: auto; border-radius: 6px;
}
.slide .caption {
  margin: 0.8rem 0; font-size: 1rem; color: #333;
}

/* 按钮 */
.prev, .next {
  position: absolute; top: 50%; transform: translateY(-50%);
  background: rgba(0,0,0,0.4); color: #fff; border:none;
  padding: 0.4rem 0.8rem; cursor: pointer; border-radius: 4px;
}
.prev { left: 10px; }
.next { right: 10px; }
.prev:hover, .next:hover { background: rgba(0,0,0,0.7); }

/* 指示器 */
.indicators {
  text-align: center; margin-top: 1rem;
}
.indicator {
  display: inline-block;
  width: 12px; height: 12px; margin: 0 4px;
  background: #ccc; border-radius: 50%; cursor: pointer;
}
.indicator.active { background: #E3001B; }



/* —— 幻灯片容器保持固定高度，方便过渡 —— */
.carousel {
  position: relative;
  max-width: 800px;
  margin: 0 auto;
  /* 记得给一个高度，或者让内部图片撑满 */
  height: 400px;
  overflow: hidden;
}

/* —— 幻灯片都绝对定位，然后用 opacity 切换 —— */
.slides {
  position: relative;
  height: 100%;
}

.slide {
  position: absolute;
  inset: 0;               /* top:0; right:0; bottom:0; left:0; */
  opacity: 0;
  transition: opacity 0.6s ease-in-out;
}
.slide.active {
  opacity: 1;
}
.slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 6px;
}

.slide .caption {
  position: absolute;
  bottom: 1rem;
  left:   1rem;
  background: rgba(0,0,0,0.4);
  color: #fff;
  padding: 0.5rem 1rem;
  border-radius: 4px;
  font-size: 1rem;
}



.about-cn {
  max-width: 800px;     /* 限制宽度，阅读更舒适 */
  margin: 2rem auto;    /* 上下留白并居中 */
  text-align: center;   /* 文字居中 */
  line-height: 1.8;     /* 行高 */
  color: #333;          /* 文字颜色 */
  font-size: 1rem;      /* 字号可根据需要调整 */
}





/* —— Hero 轮播 —— */
.hero-carousel .carousel.hero {
  height: 70vh;
  max-height: 700px;
  overflow: hidden;
}

.hero-carousel .slides {
  position: relative;
  height: 100%;
}

.hero-carousel .slide {
  position: absolute;
  inset: 0;                /* top:0; right:0; bottom:0; left:0; */
  opacity: 0;
  transition: opacity 0.8s ease-in-out, transform 0.8s ease-in-out;
  transform: scale(0.98);
}

.hero-carousel .slide.active {
  opacity: 1;
  transform: scale(1);
}

.hero-carousel .slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-carousel .hero-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
  text-align: center;
  text-shadow: 0 2px 6px rgba(0,0,0,0.6);
}

.hero-carousel .hero-text h1 {
  font-size: 2.5rem;        /* 看情况再调 */
  margin-bottom: 0.5rem;
  white-space: nowrap;      /* 不允许换行 */
  /* 如果太长可显示省略号（可选） */
}

.hero-carousel .hero-text p {
  font-size: 1.2rem;
}

/* 箭头 */
.hero-carousel .prev,
.hero-carousel .next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0,0,0,0.4);
  color: #fff;
  border: none;
  padding: 0.6rem 1rem;
  cursor: pointer;
  border-radius: 4px;
  font-size: 1.2rem;
}
.hero-carousel .prev { left: 20px; }
.hero-carousel .next { right: 20px; }
.hero-carousel .prev:hover,
.hero-carousel .next:hover {
  background: rgba(0,0,0,0.7);
}

/* 指示器 */
.hero-carousel .indicators {
  position: absolute;
  bottom: 15px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 10px;
}
.hero-carousel .indicator {
  width: 12px;
  height: 12px;
  background: rgba(255,255,255,0.6);
  border-radius: 50%;
  cursor: pointer;
  transition: background 0.3s;
}
.hero-carousel .indicator.active {
  background: #E3001B;
}


/* —— Footer 里所有链接都继承文字颜色并去掉下划线 —— */
footer a {
  color: inherit;            /* 继承父元素文字颜色 */
  text-decoration: none;     /* 去掉默认的下划线 */
}

/* —— 如果需要 hover 时有提示效果 —— */
footer a:hover {
  color: #E3001B;             /* 或你想要的任意高亮色 */
  text-decoration: underline; /* 下划线提示 */
}





.cases-carousel .slide {
  position: absolute; inset: 0;
  opacity: 0;
  transition: opacity 0.6s ease, transform 0.6s ease;
  transform: scale(0.95);
}
.cases-carousel .slide.active {
  opacity: 1;
  transform: scale(1);
}









.model-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px,1fr));
  gap: 1rem;             /* 每个 .model-item 之间有 1rem 的空隙 */
  margin: 1.5rem 0 3rem; /* 上边距 1.5rem，下边距 3rem */
}

.model-item {
  background: #fff;
  border: 1px solid #eee;
  border-radius: 6px;
  overflow: hidden;
  text-align: center;
}
.model-item img {
  width: 100%;
  height: auto;
  display: block;
}
.model-item figcaption {
  padding: .5rem;
  font-size: .9rem;
  color: #555;
}


/* ====== Featured Products: 两列并排 ====== */
#featured-products .products-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;            /* 控制横向 & 纵向间距 */
  padding: 2rem 0;      /* 上下内边距 */
}

/* ====== 卡片样式 ====== */
#featured-products .products-grid .card {
  background: #fff;                             /* 白底 */
  border-radius: 1rem;                          /* 圆角 */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);    /* 轻微阴影 */
  padding: 1.5rem;                              /* 内边距 */
  text-align: center;                           /* 文本居中 */
  display: flex;                                /* 纵向居中对齐用 */
  flex-direction: column;
  align-items: center;
}

/* ====== 卡片内部：图片区 ====== */
#featured-products .products-grid .card img {
  max-width: 200px;     /* 根据实际图片大小微调 */
  height: auto;
  object-fit: contain;  /* 等比缩放 */
  margin-bottom: 1rem;  /* 与标题保持距离 */
}

/* ====== 标题（中文+英文） ====== */
#featured-products .products-grid .card h3 {
  margin: 0.5rem 0 0;   /* 顶部留白，清除默认 margin */
  color: #e30613;       /* 主红色 */
  font-size: 1.25rem;
  line-height: 1.4;
}

/* 英文小标题单独成块 */
#featured-products .products-grid .card h3 span {
  display: block;
  font-size: 1rem;
  margin-top: 0.25rem;
  color: #e30613;
}

/* ====== 描述文字 ====== */
#featured-products .products-grid .card p {
  margin: 0.5rem 0 0;
  color: #555;
  line-height: 1.6;
}

/* （可选）移动端 1 列展示 */
@media (max-width: 768px) {
  #featured-products .products-grid {
    grid-template-columns: 1fr;
  }
}





/*―――― All Products: 三列并排，卡片顶端对齐 ――――*/
#all-products .all-products-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;            /* 列间距 & 行间距 */
  padding: 2rem 0;
  align-items: start;   /* 顶端对齐所有 item */
}

/*―――― 卡片外壳样式 ――――*/
#all-products .all-products-grid .card {
  background: #fff;
  border-radius: 1rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  overflow: hidden;    /* 保证圆角裁剪 */
}

/*―――― 卡片内部布局 ――――*/
#all-products .all-products-grid .model-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1.5rem;
  text-align: center;
}

/*―――― 统一图片尺寸 & 等比缩放 ――――*/
#all-products .all-products-grid .model-item img {
  width: 100%;           /* 撑满容器宽度 */
  max-width: 280px;      /* 最大不要超过某个值 */
  height: 180px;         /* 固定高度，保证三张同高 */
  object-fit: contain;     /* 大图裁剪／小图补白 */
  margin-bottom: 1rem;
}

/*―――― 标题 & 副标题 ――――*/
#all-products .all-products-grid .model-item figcaption {
  margin: 0.5rem 0;
  color: #e30613;
  font-weight: bold;
  line-height: 1.4;
}
#all-products .all-products-grid .model-item figcaption span {
  display: block;
  font-size: 1rem;
  color: #e30613;
}

/*―――― 按钮位置微调 ――――*/
#all-products .all-products-grid .model-item .btn {
  margin-top: 0.75rem;
}

/*―――― 响应式：中屏 2 列，小屏 1 列 ――――*/
@media (max-width: 992px) {
  #all-products .all-products-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 576px) {
  #all-products .all-products-grid {
    grid-template-columns: 1fr;
  }
}



/* 前 6 张：固定三列 */
#installation .install-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-top: 1.5rem;
}

/* 最后 2 张：固定两列 */
#installation .install-grid--large {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
  margin-top: 2rem;
}

/* 卡片整体（白底、圆角、阴影、垂直居中） */
#installation .install-item {
  background: #fff;
  border-radius: 0.75rem;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1rem;
}

/* 图上方的中/英标题 */
#installation .install-item figcaption {
  color: #e30613;       /* 红色 */
  font-weight: bold;
  line-height: 1.3;
  margin-bottom: 0.5rem;
}
#installation .install-item figcaption span {
  display: block;
  font-size: 0.95rem;
  font-weight: 500;
  margin-top: 0.25rem;
}

/* 统一图片区尺寸，保证同高同宽 */
#installation .install-item img {
  width: 100%;
  max-width: 180px;     /* 根据实际图片微调 */
  height: 140px;        /* 固定高度 */
  object-fit: contain;  /* 整图可见，上下留白 */
}

/* 2. 覆盖大图尺寸限制，撑满父容器 */
#installation .install-grid--large .install-item img {
  display: block;
  width: 100%;
  max-width: none;
  height: auto;
  object-fit: contain;
}