/* style.css */

/* —— 全局 Reset & 布局 —— */
* { margin:0; padding:0; box-sizing:border-box; }
body { font-family: sans-serif; font-size:16px; color:#333; }
.container { width:1200px; margin:0 auto; }
.dis-n{display: none;}
.fl-r {float: right;}

/* —— 头部 & 导航 —— */
header {width:100%; height:94px; background:#fff;  position:relative; z-index:100;  transition: box-shadow .3s;}
header.sticky { position:fixed; top:0; left:0; box-shadow:0 2px 6px rgba(0,0,0,0.1); }
header .inner {  height:100%; width:1200px; margin:0 auto; display:flex; align-items:center; justify-content:space-between;}
header .logo img { width:106px; height:45px; }
header nav a {  margin-left:40px; font-size:16px; color:#333; text-decoration:none;}
header nav a.active { color:#e60012; }


/* —— Hero 自动轮播 —— */
/*.hero { position:relative; width:100%; height:1200px; overflow:hidden; }
.hero .slide {position:absolute; top:0; left:100%;  width:100%; height:100%; transition:all .5s;}
.hero .slide.active { left:0; }
.hero .hero-arrow {  position:absolute; top:50%; width:40px; height:40px;  margin-top:-20px; background:rgba(0,0,0,.3); color:#fff;  line-height:40px; text-align:center; cursor:pointer;}
.hero .hero-arrow.prev { left:20px; }
.hero .hero-arrow.next { right:20px; }
.hero .dots {  position:absolute; bottom:20px; width:100%; text-align:center;}
.hero .dots span {  display:inline-block; width:6px; height:6px; margin:0 5px;  border-radius:50%; background:#ccc; cursor:pointer;}
.hero .dots span.active { background:#e60012; }
*/

/* —— Hero 自动轮播 —— 优化版本 */
.hero { position: relative;width: 100%;  height: 100vh; /* 改为100vh，适应屏幕高度 */min-height: 820px; /* 设置最小高度，避免在小屏幕上太矮 */max-height: 1200px; /* 设置最大高度，避免在超大屏幕上过高 */overflow: hidden; }
.hero .slide {position: absolute;top: 0; left: 0;  width: 100%;height: 100%;opacity: 0; /* 默认透明 */  transition: opacity 0.8s ease-in-out; /* 淡入淡出过渡 */}
.hero .slide.active {opacity: 1;}

/* 确保图片填满容器 */
.hero .slide img {  width: 100%;  height: 100%;  object-fit: cover; /* 保持比例填满 */object-position: center; /* 居中显示 */}
.hero .hero-arrow {position: absolute;top: 50%;width: 50px; /* 稍微增大 */height: 50px;margin-top: -25px; /* 调整居中 */  /*background: rgba(255, 255, 255, 0.8);  改为白色半透明，更现代 */  color: #000;line-height: 50px;text-align: center;cursor: pointer;  border-radius: 50%; /* 圆形按钮 */  font-size: 60px;  transition: all 0.3s ease;  border: none;  display: flex;  align-items: center;  justify-content: center;opacity: 0.2;}
.hero .hero-arrow span {background: url(img/arrow.png) 0 50%;width: 100%;display: inline-block;height: 100%;background-size: contain;}
.hero .hero-arrow:hover {  color: #e60012; opacity: 0.6; transform: translateY(0) scale(1.1);}
.hero .hero-arrow.prev {left: 30px; /* 稍微远离边缘 */transform: scale(-1);}
.hero .hero-arrow.next {right: 30px; }
.hero .dots {position: absolute;bottom: 30px; /* 增加底部距离 */width: 100%;text-align: center;}
.hero .dots span {display: inline-block;width: 8px; /* 增大指示器 */  height: 8px;margin: 0 8px;border-radius: 50%;background: rgba(255, 255, 255, 0.6); /* 半透明白色 */  cursor: pointer;  transition: all 0.3s ease;box-shadow:  0 1px 4px rgba(0,0,0,0.2);}
.hero .dots span.active,.hero .dots span:hover {background: #fff; /* 激活时为纯白色 */  transform: scale(1.3);}
.hero .dots span:hover {background: #e60012;}

/*合作伙伴*/
.trusted-by {text-align: center;padding-top: 80px;padding-bottom: 60px;}
.trusted-by .trusted-logo {width:120px; height: 120px;text-align: center;display: inline-block;line-height: 120px;}
.trusted-by .trusted-logo img {width: 100%;vertical-align: middle;}

.intro-video {background:#000;display:flex;justify-content:center;align-items:center;margin-bottom:60px; }

.about {padding:60px 0; line-height:1.8;text-align: center;}


/* —— Banner（其他页面） —— */
.banner { width:1200px; height:300px; position:relative; overflow:hidden;background: #000;}
.banner:after {background: #000;position: absolute;content: "";position: absolute;  top: 0;left: 0;width: 100%;height: 100%;  background: rgba(0, 0, 0, 0.5);}
.banner img { width:100%; height:100%; object-fit:cover; }
.banner .title {  position:absolute; bottom:40px; left:50%;top: 50%;  transform:translateX(-50%); font-size:32px; color:#fff;z-index: 10;}

/* —— 统一侧边栏折叠 —— */
/*.sidebar { width: 200px; }*/
.sidebar { width:300px; float:left; }
.sidebar .cat {  cursor: pointer; padding:12px 0; font-size:16px; color:#333;}
.sidebar .cat + ul {  list-style:none; display:none; padding-left:20px;}
.sidebar .cat.open + ul { display:block; }
.sidebar ul { list-style: none; padding: 0; margin: 0; }
.sidebar li { padding: 12px 16px; cursor: pointer; border-left: 3px solid transparent; }
.sidebar li.active { color: #E60012; border-left-color: #E60012; background: #f9f9f9; }

.product-section {width: 900px;padding-top: 10px;padding-bottom: 120px;}

/* Breadcrumb */
.breadcrumb { font-size:14px; color:#666; margin-bottom:20px; }
.breadcrumb a { color:#666; text-decoration:none; }
.breadcrumb .sep { margin:0 4px; }
.breadcrumb .current { color:#333; }

/* —— 产品总览 & 列表 —— */
/*.products-page .content { margin-left:20px; }*/
.products-page .grid {  display:inline-flex; flex-wrap:wrap; gap:20px;}
.products-page .grid .item {  width:calc((1200px - 3*20px)/4); text-align:center;
  padding:20px; transition:all .3s;}
.products-page .grid .item:hover { transform: translateY(-4px);  box-shadow: 0 4px 12px rgba(0,0,0,0.1);}
.products-page .grid .item:hover .name { color:#e60012; }

/* —— 产品详情 —— */
/*.product-detail .main { margin-right:20px; }*/
.product-detail .big-img img {  width:555px; height:555px; object-fit:cover;}
.product-detail .thumbs {  display:flex; gap:10px; margin-top:20px;}
.product-detail .thumbs img {  width:123px; height:123px; cursor:pointer;}


/* Tab 样式 */
.tabs { margin-top: 24px; }
.tab-nav { display: flex; border-bottom: 1px solid #ddd; }
.tab-nav div {  padding: 8px 16px;  cursor: pointer;  color: #333;}
.tab-nav .active {  border-bottom: 2px solid #e60012;  color: #e60012;}
.tab-content { display: none; padding: 12px 0; color: #444; }
.tab-content.active { display: block; }

/* —— 时间轴 —— */
.timeline-page .main {  position:relative; padding:40px 0; margin-left:260px;}
.timeline-page .main::before {  content:''; position:absolute; left:50px; top:0; bottom:0;  width:4px; background:#e60012;}
.timeline-page .item {  position:relative; padding:20px 0 20px 100px;}
.timeline-page .item::before {  content:''; position:absolute; left:42px; top:20px;  width:16px; height:16px; border-radius:50%; background:#e60012;}

/* 产品详情区域样式 */
.detail-container, #product-detail-container {  clear: both;  margin: 40px auto;  width: 900px;}
.product-detail {  display: flex;  flex-wrap: wrap;  gap: 20px;}
.product-detail .detail-left img.big-img {  width: 300px;  height: 300px;  object-fit: cover;}
.product-detail .thumbs {  display: flex;  gap: 10px;  margin-top: 10px;}
.product-detail .detail-info {  max-width: 600px;}
/* —— 隐藏列表 —— */
.grid {  /* 保证点击后彻底隐藏 */  display: grid;/* 默认展示时保持 grid */  gap: inherit;/* 保留间距 */}
.grid.hidden,/* 如果你想用 class 控制，也可以切换到 .grid.hidden */.grid[style*="display: none"] { display: none !important;}

/* —— 详情容器初始隐藏 & 美化 —— */
#product-detail-container { display: none;/* 初始隐藏 */padding: 40px 20px;width: 900px;margin: 0 auto;background: #fff;}

/* —— 详情布局 —— */
.product-detail {  display: flex;  flex-wrap: wrap;  gap: 40px;  align-items: flex-start;}
/* 左侧大图 */
.product-detail .detail-left {  flex: 0 0 400px;/* 固定 400px */}
.product-detail .detail-left img.big-img {  width: 100%;  height: auto;  border: 1px solid #eee;  object-fit: cover;}
/* 缩略图行 */
.product-detail .thumbs {  display: flex;  gap: 10px;  margin-top: 12px;}
.product-detail .thumbs img { border: 1px solid #ddd;  transition: border-color .2s;}
.product-detail .thumbs img:hover {  border-color: #e60012;}

/* 右侧信息区 */
.product-detail .detail-info {  flex: 1;  min-width: 300px;}
.product-detail .detail-info h2 {  margin-top: 0;  font-size: 24px;  color: #333;}
.product-detail .detail-info p {  line-height: 1.6;  color: #666;}


/* —— Footer & 社交二维码 —— */
footer {  width:100%; background:#000; color:#fff; padding:60px 0;margin-top: 60px;}

.footer-container {  width: 1200px;  margin: 0 auto;  display: flex;  justify-content: space-between;  align-items: flex-start;}
.footer-left {  display: flex;  gap: 20px;}
.footer-logo {  width: 106px;  height: auto;}
.company-info p {  margin: 0;  color: #ccc;}
.footer-right {  display: flex;  flex-direction: column;  align-items: flex-end;}
.social-icons {  display: flex;  gap: 28px;  margin-bottom: 10px;}
.social-icon {  position: relative;  width: 40px;  height: 40px;  cursor: pointer;}
.social-icon img {  width: 100%;  height: 100%;  object-fit: contain;}
.social-icon .qr {  display: none;  position: absolute;  top: -110px;  left: 50%;  transform: translateX(-50%);  width: 100px;  height: 100px;  background: #fff;  padding: 4px;  box-shadow: 0 2px 8px rgba(0,0,0,0.2);}
.social-icon:hover .qr {  display: block;}
footer .copyright {  text-align: right;  color: #888;  font-size: 12px;}




/* 响应式适配 */
@media (max-width: 1024px) {
  .hero {height: 60vh; /* 平板上稍微降低高度 */min-height: 500px;  }
  .hero .hero-arrow {width: 45px;height: 45px;margin-top: -22.5px;font-size: 16px;  }
  .hero .hero-arrow.prev,.hero .hero-arrow.next {left: 20px;right: 20px;}
}

@media (max-width: 768px) {
  .hero {height: 40vh; /* 手机上进一步降低高度 */min-height: 400px;  }
  .hero .hero-arrow {width: 40px;height: 40px;margin-top: -20px;font-size: 14px;  }
  .hero .hero-arrow.prev {left: 15px;  }
  .hero .hero-arrow.next {right: 15px;  }
  .hero .dots {bottom: 20px;  }
  .hero .dots span {width: 6px;height: 6px;margin: 0 6px;}
  .container {width: 760px;}
  .trusted-by .trusted-logo {height: 70px;}
  .about {padding: 0 30px;}
}

@media (max-width: 480px) {
  .hero {height: 40vh; /* 小屏手机上最保守的高度 */min-height: 350px;  }
  .container {width: 480px;}
  .trusted-by .trusted-logo {height: 70px;}
  .about {padding: 0 30px;}
}