* { margin: 0; padding: 0; box-sizing: border-box; }
#home { height: 40px; background: #222; color: #ddd; line-height: 40px; text-align: left; padding-left:10%; font-size:13px;}


#header {
  height: 110px;
  background: #fff;
  color: #333;
  width: 90%;        /* 你原来的布局不动 */
  padding-top: 15px;
  display: flex;
  padding-left: 10%;
  align-items: center; /* 让logo垂直居中 */
  box-sizing: border-box;
gap: 10%; /* 两个文字之间的间距（可改）*/
}

/* 👇 核心：电脑大屏幕时，保持固定原尺寸 */
.logo {
  width: auto;        /* 不拉伸 */
  max-width: none;    /* 取消限制 */
}
.logo img {
  width: auto !important; /* 保持图片原始大小 */
  height: 70px;     /* 你可以自己调高度 */
  display: block;
}

.tel img {
  height: 70px;      /* 电话高度 */
  width: auto;
}

/* 👇 屏幕小于 1200px 时，自动变小（你可以改1200） */
@media (max-width: 1320px) {
  .logo img {
    width: 99.9% !important; /* 小屏幕自动缩小 */
    height: auto;
  }
  .tel img {
    width: 99.9% !important;
    height: auto;
  }
}



/* 电脑端导航（你原来的样式全部保留） */
#nav {
  background: #146cd7;
  padding: 10px;
  padding-left: 10%;
  font-size: 18px;
  height: 56px;
  line-height: 38px;
  display: flex; /* 让导航自动排列，不换行 */
  align-items: center;
  box-sizing: border-box;
}

.nav-item {
  color: #fff;
  margin: 0 10px;
  text-decoration: none;
  display: inline-block;
  width: 120px;
  text-align: center;
  flex-shrink: 0; /* 禁止缩小，保持150px宽度 */
}

.nav-item:hover {
  background: #d10909;
  color: #fff;
}

/* =================================== */
/* 👇 响应式：屏幕小于 1200px 时自动适配 */
/* =================================== */
@media (max-width: 1200px) {
  #nav {
    height: auto;      /* 高度自动 */
    flex-wrap: wrap;   /* 自动换行 */
    padding-left: 5%;
    padding-right: 5%;
    justify-content: center; /* 居中 */
  }
  .nav-item {
    margin: 5px;       /* 缩小间距 */
    width: 120px;      /* 稍微缩小宽度 */
  }
}

/* =================================== */
/* 👇 手机端：屏幕小于 768px 垂直排列 */
/* =================================== */
@media (max-width: 768px) {
  #nav {
    flex-direction: column; /* 竖排 */
    padding: 10px 0;
  }
  .nav-item {
    width: 90%;        /* 手机端自动占满宽度 */
    margin: 5px auto;
  }
}

/* banner begin  */
.banner {
  width: 100%;
  height: 0;
  padding-top: 27.08%; /* 16:9 = 56.25% | 3:4 = 75% | 1:1 = 100% */
  position: relative;
  overflow: hidden;
  margin: 0 auto;
}

/* 图片包裹层 */
.banner .slide {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transition: all 0.8s ease;
  
  /* 折叠切换核心效果 */
  transform: perspective(800px) rotateY(90deg);
}

/* 当前显示的图片 */
.banner .slide.active {
  opacity: 1;
  transform: perspective(800px) rotateY(0deg);
}

/* 图片样式 */
.banner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 左右箭头 */
.arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 50px;
  height: 50px;
  background: rgba(0,0,0,0.3);
  color: #fff;
  font-size: 24px;
  text-align: center;
  line-height: 50px;
  cursor: pointer;
  z-index: 99;
  border-radius: 50%;
  user-select: none;
}

.arrow:hover {
  background: rgba(0,0,0,0.6);
}
.arrow.left { left: 20px !important;  }
.arrow.right { right: 20px !important; }

/* banner end  */



#gsjj  {  background:url(/new-images/gsbg.png); text-align: center; }
#gsjj titl { line-height:2em; text-align:center;  color: #146cd7;font-size:26px;font-weight: bold;}
#gsjj p {width:88%; padding-left:10%; line-height:2em; text-align:left; text-indent:2em; color: #222;font-size:18px;}

#main-title{
text-align:center;width:100%; margin:20px auto;line-height:2em; 
display: flex;
justify-content: center;
gap: 8px; /* 两个文字之间的间距（可改）*/
}
#main-title .blue26 { color: #146cd7;font-size:26px;font-weight: bold;}
#main-title .black26 { color: #222;font-size:26px;font-weight: bold;}
#main-title .p { color: #222; font-size:16px;}


/*  首页产品展示样式   */

.product-list{
  width:90%;
  margin:30px auto;
  display:flex;
  flex-wrap:wrap;
  gap:20px;
  justify-content:center;
}
.product-item{
  width:23%;
  text-align:center;
  transition:0.3s;
}
.product-item img{
  width:100%;
  height:210px;
  object-fit:cover;
  display:block;
}


/* =============== 样式4：完整产品（标题+价格+按钮） =============== */
.style4{
  border:1px solid #eee;
  padding:10px;
  position:relative;
}
.style4 .price{
  color:#222;
  text-align:left;
  margin:5px 0;
  text-indent:2em;
}
.style4 .btn{
  display:inline-block;
  padding:5px 14px;
  border:1px solid #222;
  color:#222;
  text-decoration:none;
  font-size:16px;
  margin-top:6px;
}
.style4 .btn:hover{
  background:#e0e0e0;
  color:#222;
}
.style4:hover{
  box-shadow:0 5px 15px rgba(0,0,0,0.15);
  }
/*  首页产品展示样式   */


/* 滚动容器 */
.scroll-box {
  width: 90%;
  overflow: hidden; /* 隐藏超出部分，实现无缝 */
  background: #eee;
  padding: 20px 0 50px 0;
   margin: 0px auto;
 
}

/* 滚动动画层 */
.scroll-wrap {
  display: flex;
  width: max-content;
  animation: scroll 20s linear infinite; /* 无缝动画 */
}

/* 动画：从右向左滚动 */
@keyframes scroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* 产品图片样式 */
.scroll-item {
  width: 271px;
  height: 210px;
  margin: 0 10px;
}
.scroll-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 6px;
}
.scroll-item p {
  width: 100%;
  height: 30px;
  text-align:center;
  font-size:16px;
}

/* 鼠标悬停暂停滚动 */
.scroll-box:hover .scroll-wrap {
  animation-play-state: paused;
}



/* ========== 通用基础样式 ========== */



/* ========== 细线方形外框 基础样式 ========== */
a.btn-thin {
  display: inline-block;
  padding: 8px 22px;
  border: 1px solid;    /* 细线（1px） */
  border-radius: 0;     /* 方形（无圆角） */
  font-size: 15px;
  color: #333;
  text-decoration: none;
  transition: all 0.3s ease;
  margin:20px auto;
  font-size:18px;
}


/* 蓝色 */
.btn-thin.blue { border-color:#146cd7; color:#146cd7; }
.btn-thin.blue:hover { background:#146cd7; color:#fff; }

/* 红色 */
.btn-thin.red { border-color:#e53935; color:#e53935; }
.btn-thin.red:hover { background:#e53935; color:#fff; }

/* 绿色 */
.btn-thin.green { border-color:#43a047; color:#43a047; }
.btn-thin.green:hover { background:#43a047; color:#fff; }

/* 橙色 */
.btn-thin.orange { border-color:#f57c00; color:#f57c00; }
.btn-thin.orange:hover { background:#f57c00; color:#fff; }

/* 紫色 */
.btn-thin.purple { border-color:#8e24aa; color:#8e24aa; }
.btn-thin.purple:hover { background:#8e24aa; color:#fff; }

/* 白色（深色背景用） */
.btn-thin.white { border-color:#333; color:#333; }
.btn-thin.white:hover { background:#666; color:#fff; }

/* 资料中心 */
#main { display: flex; margin: 20px 0; background:url(/new-images/news-bg.jpg)}
.content { flex: 58%; text-align:left !important;}
.sidebar { flex: 42%; padding: 30px; text-align:right; }
/* 资料中心 */


/* ======================
   首页新闻样式（最终版）
======================= */
.news-box {
  width: 80%;
  max-width: 1000px;
  margin: 50px 20px;
}
.news-list {
  width: 100%;
  padding: 10px 25px;
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}
.news-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 0;
  border-bottom: 1px dashed #ddd; /* 虚线分隔 */
  font-size: 16px;
}
.news-item:last-child {
  border-bottom: none; /* 最后一条去掉虚线 */
}
.news-item a {
  color: #333;
  text-decoration: none;
  transition: all 0.25s ease;
}
/* 悬浮动效（变色+左缩进） */
.news-item a:hover {
  color: #146cd7;
  padding-left: 8px;
}
.news-date {
  color: #888;
  font-size: 14px;
}

/* ======================
   文件下载列表样式
======================= */
.down-box {
  width: 90%;
  background: rgba(255,255,255,0.92);
  padding: 25px 30px;
  border-radius: 8px;
  box-shadow: 0 3px 10px rgba(0,0,0,0.05);
  text-align: left;
  margin-top: 20px;
}
.down-title {
  font-size: 24px;
  font-weight: bold;
  color: #222;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid #eee;
}
.down-title span {
  color: #146cd7;
}

/* 文件列表项 */
.down-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px 0;
  border-bottom: 1px dashed #ddd;
  font-size: 16px;
}

/* 文件图标 + 名称 */
.down-item a {
  display: flex;
  align-items: center;
  color: #333;
  text-decoration: none;
  transition: all 0.25s ease;
  gap: 8px;
}
.down-item a:hover {
  color: #146cd7;
  padding-left: 8px;
}

/* 文件小图标 */
.down-item a::before {
  content: "📎";
  font-size: 16px;
}

/* 日期 */
.down-date {
  color: #888;
  font-size: 14px;
}


/* ======================
   常见问答 定制版：双栏 + 文件夹图标 + 三行布局 + 虚线
======================= */
.faq-box {
  width: 86%;
  background: rgba(255,255,255,0.92);
  padding: 25px 30px;
  border-radius: 8px;
  box-shadow: 0 3px 10px rgba(0,0,0,0.05);
  margin: 30px 7%;
  text-align: left;
}
.faq-title {
  font-size: 26px;
  font-weight: bold;
  color: #222;
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid #eee;
  line-height:40px;
  text-align: center;
}
.faq-title span {
  color: #146cd7;
}
.faq-title p { color: #222; font-size:16px; font-weight:normal; }

/* 双栏布局 */
.faq-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 25px;
}

/* 问答项：虚线分隔 */
.faq-item {
  padding: 15px 0;
  border-bottom: 1px dashed #ddd;
}


/* 文件夹图标 + 问题（第一行） */
.faq-question {
  display: flex;
  align-items: center;
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 6px;
}
.faq-question::before {
  content: "📁";    /* 文件夹图标 */
  font-size: 18px;
  margin-right: 8px;
  color: #146cd7;
}

.faq-question a {
  text-decoration: none;
  color: #333;
}



/* 答案（第二行） */
.faq-answer {
  font-size: 16px;
  color: #666;
  line-height: 1.5;
  margin-bottom: 8px;
  padding-left: 2px;
}

/* 日期（第三行） */
.faq-time {
  font-size: 14px;
  color: #999;
}

#footer {
  background: #222;
  color: #fff;
  padding: 30px 10%;
  display: flex;
  flex-wrap: wrap;
  gap: 4%;       /* 三栏之间的间距，可改 */
  box-sizing: border-box;
}

/* ====================== */
/* 👇 分别设置三栏宽度！ */
/* ====================== */
.footer-left {
  width: 17%;  /* 左栏（图片）宽度 */
  display: flex;
  justify-content: flex-end; /* 👈 图片右对齐 */
}
.footer-center {
  width: 30%; /* 中栏（联系方式）宽度 */
}
.footer-right {
  width: 45%; /* 右栏（快捷导航）宽度 */
}

/* 图片自适应 */
.footer-left img {
  max-width: 100%;
  height: auto;
  display: block;
  
}

/* 联系方式样式 */
.footer-center h4,
.footer-right h4 {
  font-size: 20px;
  margin-bottom: 15px;
  color: #fff;
}
.footer-center p {
  margin: 8px 0;
  font-size: 16px;
}

/* ============================== */
/* 👇 快捷导航 横向排列 + 自动换行 */
/* ============================== */
.footer-right ul {
  list-style: none;
  padding: 0;
  margin: 15px 0;
  display: flex;      /* 横向排列 */
  flex-wrap: wrap;    /* 自动换行 */
  gap: 8px;           /* 按钮之间间距 */
}
.footer-right li {
  margin: 0;
}
.footer-right a {
  width: 160px;        /* 👈 固定宽度（自己改） */
  height: 36px;        /* 👈 固定高度 */
  line-height: 36px;    /* 文字垂直居中 */
  /*border-radius: 4px; 圆角*/
  text-decoration: none;
  font-size: 15px;
  text-align: center;
  display: inline-block;
  background: #444;   /* 深灰色按钮 */
  color: #c0c0c0;
  white-space: nowrap; /* 文字不换行 */
}
.footer-right a:hover {
  background: #555;
  color: #fff;
}

/* 手机端自动竖排 */
@media (max-width: 768px) {
  #footer {
    padding: 30px 5%;
    flex-direction: column;
  }
  .footer-left,
  .footer-center,
  .footer-right {
    width: 100% !important;
    margin-bottom: 25px;
    text-align: center;
  }
  .footer-left {
    justify-content: center;
  }
  /* 手机端快捷导航居中 */
  .footer-right ul {
    justify-content: center;
  }
}
 
#footcopy { height: 40px; background: #111; color: #fff; line-height: 40px; text-align: center; }
#footcopy a { color: #fff; text-decoration: none;}


/*  单页css   */
.about{
  width:1200px;
  margin:20px auto;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
}

/*  产品展示页  */


/* 产品页面整体布局 */
.product-page {
  width: 90%;
  max-width: 1300px;
  margin: 30px auto;
  display: flex;
  gap: 10px;
  box-sizing: border-box;
}

/* ====================== */
/* 左侧菜单（不变） */
/* ====================== */
.product-left {
  width: 270px;
  flex-shrink: 0;
}
.product-left h3 {
  background: #146cd7;
  color: #fff;
  padding: 15px 20px;
  margin: 0 0 10px 0;
  font-size: 22px;
}
.left-menu {
  list-style: none;
  padding: 0;
  margin: 0;
}
.left-menu li {
  margin-bottom: 5px;
}
.left-menu a {
  display: block;
  background: #f5f5f5;
  color: #333;
  padding: 12px 20px;
  text-decoration: none;
  font-size: 18px;
  border-left: 4px solid transparent;
  transition: 0.3s;
}
.left-menu a:hover {
  background: #146cd7;
  color: #fff;
  border-left: 4px solid #d10909;
}

.left-menu p {
  display: block;
  background: #f5f5f5;
  color: #333;
  padding: 12px 20px;
  font-size: 18px;
  margin-bottom: 5px;
}

/* ====================== */
/* 右侧产品（升级：价格+简介+按钮） */
/* ====================== */
.product-right {
  flex: 1;
}
.product-list {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

/* 产品卡片 ———— 已修复 */
.product-item {
  width: calc(33.333% - 14px);
  flex: 0 0 calc(33.333% - 14px);
  min-width: unset;
  border: 1px solid #eee;
  border-radius: 6px;
  overflow: hidden;
  transition: 0.3s;
  background: #fff;
}
.product-item:hover {
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
  transform: translateY(-3px);
}

/* 产品图 */
.product-img {
  width: 100%;
  height: 210px;
  overflow: hidden;
}
.product-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 产品信息区域 */
.product-info {
  padding: 20px;
}

/* 产品标题 */
.product-title {
  font-size: 18px;
  color: #333;
  margin-bottom: 10px;
}

/* 产品简介 */
.product-desc {
  font-size: 14px;
  color: #666;
  line-height: 1.4;
  margin-bottom: 10px;
  min-height: 40px;
}

/* 咨询按钮 */
.product-btn {
  display: block;
  background: #666;
  color: #fff;
  text-align: center;
  padding: 9px 0;
  border-radius: 4px;
  text-decoration: none;
  font-size: 16px;
  transition: 0.2s;
}
.product-btn:hover {
  background: #0e5bb6;
  color: #fff;
}

/* ====================== */
/* 响应式（手机端） */
/* ====================== */
@media (max-width: 992px) {
  .product-page {
    flex-direction: column;
  }
  .product-left {
    width: 100%;
  }
  .product-item {
    width: calc(50% - 10px);
    flex: 0 0 calc(50% - 10px);
  }
}

@media (max-width: 768px) {
  .product-item {
    width: 100%;
    flex: 0 0 100%;
  }
}


/* 分页 */
.pagination {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-top: 40px;
  flex-wrap: wrap;
}
.pagination a {
  padding: 10px 8px;
  background: #f5f5f5;
  color: #333;
  text-decoration: none;
  border-radius: 4px;
  font-size: 16px;
}
.pagination a:hover,
.pagination a.active {
  background: #146cd7;
  color: #fff;
}


/* ====================== */
/* 列表页 - 独立常见问题 (不与首页冲突) */
/* ====================== */
.list-faq {
  width: 100%;
}
.list-faq-item {
  border: 1px solid #eee;
  border-radius: 6px;
  margin-bottom: 12px;
  overflow: hidden;
}
.list-faq-q {
  background: #f7f7f7;
  padding: 16px 20px;
  font-size: 18px;
  color: #333;
  cursor: pointer;
  margin: 0;
}
.list-faq-q a {
  color: #333;
  text-decoration: none;
}
.list-faq-q:hover {
  background: #146cd7;
  color: #fff;
}
.list-faq-q:hover a {
  color: #fff; /* 悬浮时让文字变白 */
}

.list-faq-a {
  padding: 18px 22px;
  font-size: 16px;
  color: #666;
  line-height: 1.6;
}
.list-faq-item.active .list-faq-a {
  display: block;
}


/* ====================== */
/* 公司简介页面样式 */
/* ====================== */
.page-view {
  width: 100%;
}
.view-title {
  font-size: 16px;
  color: #333;
  margin-bottom: 20px;
  margin-left: 30px;
  padding-left: 10px;
  border-left: 4px solid #146cd7;
  display: inline-block;
}

.view-title a {
  color: #333;
  text-decoration: none;
}

.view-content {
  padding-left: 30px;
  font-size: 17px;
  line-height: 1.8;
  color: #444;
  text-align: justify;
}
.view-content p {
  margin-bottom: 18px;
  text-indent: 2em; /* 首行缩进 */
}


@media (max-width: 992px) {
  .product-left {
    display: none !important;
  }
  .product-right {
    width: 100%;
  }
}