/* ============================================================
   基础重置 (兼容 IE8+)
   ============================================================ */
body, h1, h2, h3, h4, p, ul, ol, li, figure, form { margin: 0; padding: 0; }
body { font-family: "Microsoft YaHei", "PingFang SC", Arial, sans-serif; font-size: 14px; line-height: 1.6; color: #333; background: #fff; -webkit-text-size-adjust: 100%; }
img { border: 0; vertical-align: middle; max-width: 100%; height: auto; }
a { color: #333; text-decoration: none; }
a:hover { color: #d35400; }
ul, ol { list-style: none; }
h1, h2, h3, h4 { font-weight: normal; }

/* 工具类 */
.clearfix:after { content: ""; display: block; clear: both; }
.clearfix { *zoom: 1; }
.container { width: 1200px; margin: 0 auto; max-width: 100%; box-sizing: border-box; }
.bg-gray { background-color: #f7f7f7; }

/* ============================================================
   头部与导航
   ============================================================ */
.top-header { background: #fff; padding: 15px 0; }
.top-logos { float: left; display: inline; padding-top: 10px; }
.top-logos img { height: 40px; margin-right: 20px; display: inline-block; vertical-align: middle; }
.main-logo { float: right; display: inline; }
.site-name { font-size: 24px; font-weight: bold; color: #333; line-height: 50px; }

.main-nav-bar { background: #e36f29; height: 60px; }
.nav-links { float: left; display: inline; }
.nav-links li { float: left; display: inline; }
.nav-links li a { display: block; color: #fff; font-size: 16px; line-height: 60px; padding: 0 25px; }
.nav-links li a:hover, .nav-links li a.active { background: #cf5f1f; }

.nav-right { float: right; display: inline; line-height: 60px; }
.service-tel { float: right; display: inline; color: #fff; font-size: 15px; padding-right: 10px; }
.icon-phone-svg { vertical-align: middle; margin-right: 6px; margin-top: -3px; fill: #fff; }
.tel-number { font-weight: bold; font-size: 18px; color: #fff; }

/* ============================================================
   主体内容通用
   ============================================================ */
.main-content { padding-bottom: 50px; }
.sec-title { font-size: 24px; color: #333; }
.more-link { color: #999; font-size: 13px; }
.more-link:hover { color: #e36f29; }
.sec-header { margin-bottom: 25px; border-bottom: 1px solid #eee; padding-bottom: 10px; }
.sec-header .sec-title { float: left; }
.sec-header .more-link { float: right; line-height: 36px; }

/* ============================================================
   第一屏：Banner 与关于我们
   ============================================================ */
.section-top { margin-top: 30px; margin-bottom: 40px; }

/* ========== 桌面端轮播（绝对定位裁切） ========== */
.banner-box { float: left; display: inline; width: 49%; position: relative; overflow: hidden; height: 380px; background: #eef1f6; }
.banner-slider { position: relative; width: 100%; height: 100%; }
.banner-slide { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: none; }
.banner-slide.active { display: block; }
.banner-slide a { display: block; width: 100%; height: 100%; }
.banner-slide img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* 底部圆点 */
.banner-dots { position: absolute; bottom: 20px; left: 40px; z-index: 20; }
.banner-dots span {
  display: inline-block; width: 12px; height: 12px; border-radius: 50%;
  background: #fff; margin-right: 8px; cursor: pointer;
  border: 1px solid transparent; opacity: 0.6; transition: opacity 0.3s;
}
.banner-dots span.active { background: #e36f29; opacity: 1; }

/* 关于我们 */
.about-box { float: right; display: inline; width: 47%; }
.about-box .sec-title { margin-bottom: 20px; }
.about-text { color: #666; font-size: 14px; line-height: 1.8; margin-bottom: 15px; }
.about-img { margin-top: 20px; }
.about-img img { width: 100%; display: block; }

/* ============================================================
   第二屏：优势
   ============================================================ */
.section-features { margin-bottom: 50px; }
.feature-list li { float: left; display: inline; width: 24%; margin-right: 1.33%; border: 1px solid #eee; text-align: center; padding: 30px 0; background: #fff; box-sizing: border-box; }
.feature-list li:last-child { margin-right: 0; }
.feat-icon { font-size: 24px; color: #e36f29; margin-bottom: 15px; line-height: 1; }
.feature-list li p { font-size: 16px; color: #333; }

/* ============================================================
   第三屏：产品展示
   ============================================================ */
.section-products { margin-bottom: 50px; }
.product-grid li { float: left; display: inline; width: 23.5%; margin-right: 2%; border: 1px solid #eee; box-sizing: border-box; padding: 15px; background: #fff; margin-bottom: 20px; }
.product-grid li:nth-child(4n) { margin-right: 0; }
.product-grid li img { width: 100%; display: block; margin-bottom: 15px; }
.product-grid li h3 { font-size: 14px; height: 40px; overflow: hidden; margin-bottom: 10px; line-height: 1.5; }
.product-grid li .spec { font-size: 13px; color: #888; }

/* ============================================================
   第四屏：企业荣誉
   ============================================================ */
.section-honor { padding: 40px 0; margin-bottom: 50px; }
.honor-slider { position: relative; padding: 0 30px; }
.honor-list li { float: left; display: inline; width: 23.5%; margin-right: 2%; text-align: center; }
.honor-list li:nth-child(4n) { margin-right: 0; }
.honor-list li img { border: 5px solid #fff; width: 100%; box-shadow: 0 0 5px rgba(0,0,0,0.1); margin-bottom: 10px; box-sizing: border-box; }
.honor-list li p { font-size: 13px; color: #555; }
.arrow { position: absolute; top: 35%; width: 30px; height: 50px; line-height: 50px; text-align: center; background: rgba(0,0,0,0.3); color: #fff; font-size: 20px; border-radius: 3px; display: block; }
.arrow:hover { background: rgba(0,0,0,0.6); color: #fff; }
.arrow-left { left: -10px; }
.arrow-right { right: -10px; }

/* ============================================================
   第五屏：新闻动态
   ============================================================ */
.section-news { margin-bottom: 50px; }
.news-tabs { float: left; display: inline; }
.news-tabs .sec-title { float: left; display: inline; margin-right: 20px; }
.news-tabs .tab { float: left; display: inline; font-size: 20px; color: #e36f29; padding-top: 4px; }
.news-content .news-video { float: left; display: inline; width: 32%; background: #ddd; margin-right: 2%; }
.news-content .news-video img { width: 100%; display: block; }
.news-list { float: right; display: inline; width: 66%; }
.news-list li { float: left; display: inline; width: 31.3%; margin-right: 3%; background: #fff; border: 1px solid #eee; padding: 20px; box-sizing: border-box; }
.news-list li:nth-child(3) { margin-right: 0; }
.news-list li h3 { font-size: 16px; margin-bottom: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.news-list li .date { font-size: 12px; color: #999; margin-bottom: 15px; }
.news-list li .desc { font-size: 13px; color: #666; height: 60px; overflow: hidden; margin-bottom: 20px; }
.btn-more { display: inline-block; padding: 4px 10px; border: 1px solid #ccc; font-size: 12px; color: #999; border-radius: 2px; }
.btn-more:hover { border-color: #e36f29; color: #e36f29; }

/* ============================================================
   页脚
   ============================================================ */
.site-footer { padding: 50px 0; border-top: 1px solid #eee; font-size: 13px; color: #666; }
.footer-left { float: left; display: inline; width: 60%; }
.footer-logos { margin-bottom: 20px; }
.footer-logos img { height: 40px; margin-right: 15px; display: inline-block; vertical-align: middle; opacity: 0.7; }
.company-name { font-size: 22px; color: #333; margin-bottom: 15px; }
.company-info { margin-bottom: 8px; }

.footer-right { float: right; display: inline; width: 35%; text-align: right; }
.qr-codes { margin-bottom: 20px; }
.qr-item { float: left; display: inline; width: 48%; margin-left: 2%; text-align: center; }
.qr-item img { width: 100px; height: 100px; border: 1px solid #eee; padding: 5px; margin-bottom: 5px; }
.qr-item p { font-size: 12px; color: #666; }
.qr-item p span { color: #999; font-size: 12px; }
.copyright { color: #999; font-size: 12px; line-height: 1.8; margin-top: 20px; }

/* ============================================================
   响应式（重点修复轮播图在手机端的显示）
   ============================================================ */

@media screen and (max-width: 1240px) {
  .container { padding: 0 15px; }
}

@media screen and (max-width: 991px) {
  /* 顶部与导航居中 */
  .top-logos { display: none; }
  .main-logo { float: none; text-align: center; display: block; margin-bottom: 10px; }
  .site-name { line-height: 1.5; font-size: 20px; }
  .main-nav-bar { height: auto; padding-bottom: 10px; }
  .nav-links { float: none; text-align: center; margin-bottom: 10px; }
  .nav-links li { float: none; display: inline-block; }
  .nav-links li a { padding: 0 12px; line-height: 50px; font-size: 15px; }
  .nav-right { float: none; text-align: center; }
  .service-tel { float: none; display: inline-block; line-height: 1.5; padding: 5px 0; }
  .tel-number { font-size: 16px; }

  /* 第一屏 */
  .section-top { margin-top: 20px; }
  .banner-box, .about-box { float: none; width: 100%; margin-bottom: 30px; }

  /* ===== 手机端轮播图改为自适应高度，不再裁切，让图片自然撑开 ===== */
  .banner-box { height: auto; }
  .banner-slider { height: auto; }
  .banner-slide { position: static; display: none; }
  .banner-slide.active { display: block; }
  .banner-slide a { height: auto; }
  .banner-slide img { height: auto; object-fit: fill; }
  /* 圆点位置固定在图片底部 */
  .banner-dots { bottom: 12px; left: 15px; }
  .banner-dots span { width: 10px; height: 10px; }

  .about-box .sec-title { text-align: center; margin-bottom: 15px; }
  .about-text { text-align: justify; }

  /* 四大优势 */
  .section-features { margin-bottom: 30px; }
  .feature-list li { width: 48%; margin-right: 4%; margin-bottom: 15px; padding: 20px 0; }
  .feature-list li:nth-child(2n) { margin-right: 0; }
  .feature-list li p { font-size: 14px; }

  /* 产品展示 */
  .product-grid li { width: 48%; margin-right: 4%; margin-bottom: 15px; padding: 10px; }
  .product-grid li:nth-child(2n) { margin-right: 0; }
  .product-grid li h3 { font-size: 13px; height: 38px; margin-bottom: 5px; }
  .product-grid li .spec { font-size: 12px; }

  /* 企业荣誉 */
  .section-honor { padding: 30px 0; margin-bottom: 30px; }
  .honor-slider { padding: 0; }
  .arrow { display: none; }
  .honor-list li { width: 48%; margin-right: 4%; margin-bottom: 20px; }
  .honor-list li:nth-child(2n) { margin-right: 0; }
  
  /* 新闻动态 */
  .sec-header .news-tabs { float: none; text-align: center; margin-bottom: 10px; }
  .news-tabs .sec-title, .news-tabs .tab { float: none; display: inline-block; }
  .sec-header .more-link { float: none; text-align: center; display: block; line-height: 1; }
  .news-content .news-video, .news-list { float: none; width: 100%; margin-right: 0; }
  .news-content .news-video { margin-bottom: 20px; }
  .news-list li { width: 100%; margin-right: 0; margin-bottom: 15px; padding: 15px; }

  /* 页脚 */
  .site-footer { padding: 30px 0; text-align: center; }
  .footer-left, .footer-right { float: none; width: 100%; text-align: center; }
  .footer-logos img { margin: 0 5px 15px; }
  .company-name { font-size: 18px; margin-bottom: 10px; }
  .qr-item { float: none; display: inline-block; margin: 0 10px; width: auto; }
  .qr-item img { width: 90px; height: 90px; }
}

@media screen and (max-width: 767px) {
  .feature-list li { width: 100%; margin-right: 0; }
  .product-grid li { width: 100%; margin-right: 0; }
  .honor-list li { width: 100%; margin-right: 0; }
  .nav-links li a { padding: 0 8px; font-size: 14px; }
  .sec-title { font-size: 20px; }
}