/* ============================================================

   洛阳荣峰塑业有限公司 - 关于我们二级栏目公共样式

   依赖首页 style.css，仅补充子页面独有样式

   ============================================================ */



/* ---------- 子页面 Header：固定为 scrolled 状态（与首页一致） ----------

   栏目页 header 直接采用首页滚动后的实底样式，无需滚动触发；

   作用域限定 body.page-sub，不影响首页。 */

body.page-sub .header{

  background:#fff;

  box-shadow:0 2px 16px rgba(0,0,0,.08);

  padding:10px 0;

}

body.page-sub .header .logo-slogan{color:var(--gray);border-color:#ddd}

body.page-sub .header .nav-list a{color:var(--text)}

body.page-sub .header .nav-list a:hover,

body.page-sub .header .nav-list a.active{color:var(--green)}

body.page-sub .header .search-btn{color:var(--text)}

body.page-sub .header .search-btn:hover{color:var(--green)}

body.page-sub .header .hamburger span{background:var(--text)}







/* ---------- 内页 Banner ---------- */

.page-banner{

  position:relative;height:auto; width: 100%;

  display:flex;align-items:center;margin-top:68px;padding-bottom:0;

}
.page-banner img{width:100%; height: auto; margin: auto; margin-right: auto;}

.page-banner-bg{

  position:relative;inset:0;background-size:cover;background-position:center; background-color: #fff; width: 100%;

}

.page-banner-bg::before{

  content:"";position:absolute;inset:0;

 /*  background:rgba(0,0,0,.4);*/

}

.page-banner .container{position:relative;z-index:2;width:100%}

.page-banner-content{color:#333;padding-top:0px;text-align:left}

.page-banner-content h1{

  font-size:38px;font-weight:700;

}

.page-banner-mb{display:none}
@media (max-width:768px){
  .page-banner-pc{display:none}
  .page-banner-mb{display:block}
}


.page-slogan{

  font-size:18px;color:#666;

  margin-top:14px;

}

/* 当前位置：位于二级导航条右侧 */

.page-crumb{

  display:flex;align-items:center;gap:8px;

  font-size:14px;color:var(--text-light);flex-shrink:0;

}

.page-crumb a{color:var(--text-light)}

.page-crumb a:hover{color:var(--green);text-decoration:underline}

.page-crumb span.sep{color:#bbb}



/* ---------- 顶部二级导航条 ---------- */

.sub-nav-bar{

  background:#fff;color:var(--text);

  position:relative;z-index:10;

  border-bottom:1px solid #eee;

  

}

.sub-nav-inner{

  display:flex;align-items:center;justify-content:space-between;

  min-height:54px;

}



.sub-nav-menu{

  display:flex;align-items:center;gap:0;flex-wrap:wrap;justify-content:flex-start;

}

.sub-nav-menu a{

  position:relative;color:var(--text-light);font-size:18px; font-weight: bold;

  padding:16px 22px;letter-spacing:.5px;white-space:nowrap;

  transition:var(--transition);

  border-right:1px solid #eee;

}

.sub-nav-menu a:last-child{border-right:none}

.sub-nav-menu a:hover{color:var(--green);background:#f8f8f8}

.sub-nav-menu a.active{

  color:#fff;font-weight:600;

  background:var(--green);

}

.about{background-color: #fff;}



/* ---------- 核心优势全屏四块 ---------- */

.adv4-section{padding:60px 0 0}

.adv4-section .section-head{margin-bottom:0}

.adv4-grid{

  display:grid;grid-template-columns:repeat(4,1fr);

  margin-top:44px;

}

.adv4-item{

  position:relative;overflow:hidden;min-height:320px;

  background-size:cover;background-position:center;

  display:flex;align-items:center;justify-content:center;text-align:center;

  padding:50px 34px;

}

.adv4-item::before{

  content:"";position:absolute;inset:0;background:rgba(0,0,0,.55);

}

.adv4-inner{position:relative;z-index:2;color:#fff;max-width:300px}

.adv4-inner h4{font-size:22px;letter-spacing:1px;margin-bottom:16px}

.adv4-inner p{font-size:14.5px;line-height:1.9;color:rgba(255,255,255,.92);text-align:justify}



/* ---------- 页面主布局（单栏） ---------- */

.page-main{padding:60px 0;background:#fff}

.page-container{display:block}

.page-content{min-width:0;margin:0 auto}

.page-section + .page-section{margin-top:60px}

.page-content h2{

  font-size:28px;color:var(--text);letter-spacing:1px;margin-bottom:20px;position:relative;padding-bottom:14px;

}



/* ---------- 左右分栏版式（标题左 · 内容右） ---------- */

.split-section{

  display:grid;grid-template-columns:280px 1fr;gap:60px;

  align-items:start;

  padding-left:0px; 

}

/* 提高特异性，覆盖 .page-content h2 的 position:relative 与下划线 */

.page-content .split-title{

  font-size:30px;color:var(--text);font-weight:700;letter-spacing:1px;

  position:sticky;top:90px;line-height:1.4;

  margin-bottom:0;padding-bottom:0; 

}

.page-content .split-title::after{display:none}

.split-content p{

  color:var(--text-light);font-size:16px;line-height:2;margin-bottom:1.5em;text-align:justify; 

}

.split-content .lead{

  font-size:18px;color:var(--text);line-height:1.9;margin-bottom:20px;font-weight:500;

}

.page-content h3{

  font-size:20px;color:var(--green);margin:28px 0 14px;letter-spacing:.5px;

}

.page-content p{

  color:var(--text-light);font-size:16px;line-height:2;margin-bottom:16px;text-align:justify;

}

.page-content .lead{

  font-size:18px;color:var(--text);line-height:1.9;margin-bottom:24px;font-weight:bold;

}

.page-content ul.list{

  margin:10px 0 20px;padding-left:0;

}

.page-content ul.list li{

  position:relative;padding-left:22px;margin-bottom:10px;color:var(--text-light);line-height:1.8;

}

.page-content ul.list li::before{

  content:"";position:absolute;left:0;top:10px;width:8px;height:8px;border-radius:50%;background:var(--green);

}



/* ---------- 图片展示 ---------- */

.page-img{

  overflow:hidden;margin:24px 0;box-shadow:var(--shadow); text-align: center;

}

.page-img img{width:auto;height:auto;display:block}

.page-img-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin:24px 0}

.page-img-grid .page-img{margin:0}



/* ---------- 卡片 ---------- */

.page-card-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;margin-top:24px}

.page-card{

  background:#f8f8f8;padding:28px 60px;transition:var(--transition);

}

.page-card:hover{transform:translateY(-6px);box-shadow:var(--shadow)}

.page-card h4{

  font-size:20px;color:var(--green);margin-bottom:12px;letter-spacing:.5px;

}

.page-card p{font-size:16px;line-height:1.8;margin-bottom:0;color:var(--text-light)}



/* ---------- 价值观 ---------- */

.value-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;margin-top:24px}

.value-item{

  display:flex;gap:18px;background:#f8f8f8;border-radius:8px;padding:26px;transition:var(--transition);

}

.value-item:hover{transform:translateY(-5px);box-shadow:var(--shadow)}

.value-num{

  width:48px;height:48px;border-radius:50%;background:var(--green);color:#fff;

  display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:700;flex-shrink:0;

}

.value-text h4{font-size:18px;color:var(--text);margin-bottom:8px;letter-spacing:.5px}

.value-text p{font-size:16px;line-height:1.8;margin-bottom:0; color: var(--text-light);}



/* ---------- 时间线 ---------- */

.page-history{max-width:1450px;}

.timeline{position:relative;margin-top:24px;padding-left:24px}

.timeline::before{

  content:"";position:absolute;left:6px;top:6px;bottom:6px;width:2px;background:#ddd;

}

.timeline-item{position:relative;padding-bottom:36px}

.timeline-item:last-child{padding-bottom:0}

.timeline-dot{

  position:absolute;left:-24px;top:6px;width:14px;height:14px;border-radius:50%;

  background:var(--green);border:3px solid #fff;box-shadow:0 0 0 2px var(--green);

}

.timeline-year{

  display:inline-block;background:var(--green);color:#fff;font-size:15px;font-weight:700;

  padding:4px 14px;border-radius:4px;margin-bottom:10px;letter-spacing:1px;

}

.timeline-title{font-size:18px;color:var(--text);font-weight:600;margin-bottom:8px;letter-spacing:.5px}

.timeline-desc{font-size:15px;color:var(--text-light);line-height:1.8}

/* 年份胶囊与标题的间距：写在 media 块外，手机/PC 一致生效；加作用域避免波及 job.html 招聘流程 */

#history-timeline .timeline-title{margin-top:8px}

/* 文本限宽，让 padding 吃的是余量而不是文本宽度 → 换行位置恒定、零重排，无需任何补偿。

   必须用固定 px 而不是 calc(100% - N)：百分比的基准就是父内容宽度，

   padding 一变它跟着变，限宽就失去意义了。

   ⚠ 该值必须小于容器实际宽度（1440 视口下约 1356px），否则限宽失效、padding 会挤动文本！

   1300px = 余量 56px，足够 --tl-indent 调到 50px；

   窄屏时该值大于容器宽度自然失效，等同不限宽；写在 media 块外，PC/手机排版一致 */

#history-timeline .timeline-title,

#history-timeline .timeline-desc{max-width:1300px}



/* ---------- 发展历程时间线 hover ----------

   作用域限定 #history-timeline：.timeline-item 这个类 job.html 招聘流程也在用，不能全局改

   --tl-indent：hover 时左侧让出的距离（调值只改这一处；

               需小于「容器宽 - 文本限宽 1260px」的余量，否则仍会挤到文本宽度） */

#history-timeline{--tl-indent:5px}

@media (hover:hover){

  /* 每个节点自带一段竖线（盖在灰线之上，默认透明）：范围 = 本节点圆点 → 下一节点圆点 */

  #history-timeline .timeline-item::before{

    content:"";position:absolute;left:-18px;top:6px;bottom:-6px;width:2px;

    background:transparent;border-radius:1px;transition:background .3s ease;

  }

  #history-timeline .timeline-item:last-child::before{bottom:6px}

  #history-timeline .timeline-dot{transition:transform .3s ease}

  #history-timeline .timeline-year{transition:background-color .3s ease}



  /* hover 节点：当前这段文本左侧的竖线变绿 + 圆点放大 + 年份胶囊加深（纯过渡，无动画） */

  #history-timeline .timeline-item:hover::before{background:var(--green)}

  #history-timeline .timeline-item:hover .timeline-dot{transform:scale(1.25)}

  #history-timeline .timeline-item:hover .timeline-year{background:var(--green-dark)}

  /* hover 节点：左侧让出 --tl-indent（圆点与竖线是绝对定位，不随之移动）

     注：精确写 padding-left 而非 all，避免对无关属性也套上过渡 */

  #history-timeline .timeline-item{transition:padding-left .6s ease}

  #history-timeline .timeline-item:hover{padding-left:var(--tl-indent)}

  /* 无需任何补偿：文本已限宽（见上方 max-width），padding 吃的是余量而不是文本宽度，

     所以过渡全程换行位置不动、段落不抖动 */

}

@media (prefers-reduced-motion:reduce){

  #history-timeline .timeline-item::before,

  #history-timeline .timeline-dot,

  #history-timeline .timeline-year{transition:none}

}

/* ---------- 品牌介绍 ---------- */

.brand-intro{display:grid;grid-template-columns:1fr 1.2fr;gap:50px;align-items:center;margin-top:24px; }

.brand-intro.reverse{grid-template-columns:1.2fr 1fr}

.brand-logo{width:220px;margin-bottom:20px}

.brand-logo img{width:100%;height:auto}

.brand-name{font-size:32px;font-weight:700;color:var(--text);letter-spacing:2px;margin-bottom:14px}

.brand-name span{color:var(--green)}

.brand-slogan{font-size:18px;color:var(--green);font-weight:600;margin-bottom:18px;letter-spacing:1px}



/* ---------- 数据展示 ---------- */

.about-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin:34px 0}

.about-stat{

  text-align:center;background:#f8f8f8;border-radius:8px;padding:28px 16px;

}

.about-stat-num{font-size:32px;font-weight:700;color:var(--green);margin-bottom:6px}

.about-stat-num i{font-style:normal;font-size:16px;margin-left:2px}

.about-stat-label{font-size:15px;color:var(--text-light);letter-spacing:.5px}



/* ---------- 总览页子栏目入口 ---------- */

.subnav-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:30px}

.subnav-card{

  background:#f8f8f8;border-radius:8px;padding:30px;text-align:center;transition:var(--transition);

  border:1px solid transparent;

}

.subnav-card:hover{transform:translateY(-6px);box-shadow:var(--shadow);border-color:var(--green)}

.subnav-card h4{font-size:18px;color:var(--text);margin-bottom:10px;letter-spacing:1px}

.subnav-card p{font-size:14px;color:var(--text-light);line-height:1.7;margin-bottom:16px}

.subnav-card .btn{padding:8px 28px;font-size:14px}

#mv-cards{margin-bottom: 30px;}

#mv-cards p{text-align: center; }



/* ============================================================

   响应式 - 平板

   ============================================================ */

@media (max-width:1200px){

  .page-content{max-width:100%}

  .sub-nav-inner{flex-wrap:wrap;min-height:auto;padding:8px 0}

  .sub-nav-menu{justify-content:flex-start}

  .brand-intro{grid-template-columns:1fr;gap:20px}

  .brand-intro.reverse{grid-template-columns:1fr}

  .subnav-cards{grid-template-columns:repeat(2,1fr)}

}

@media (max-width:992px){

  .page-banner{}

  .page-banner-content h1{font-size:32px}

  .page-card-grid,.value-grid{grid-template-columns:1fr}

  .about-stats{grid-template-columns:repeat(2,1fr)}

  .page-img-grid{grid-template-columns:1fr}

  .sub-nav-menu a{padding:12px 16px;font-size:14px}

  .adv4-grid{grid-template-columns:repeat(2,1fr)}

  .adv4-item{min-height:260px}

  .split-section{grid-template-columns:240px 1fr;gap:40px;padding-left:24px}

  .page-content .split-title{font-size:26px}

  .page-img{margin: 0px;}

}



/* ============================================================

   响应式 - 手机

   ============================================================ */

@media (max-width:768px){

  .page-banner{}

  .page-banner-content h1{font-size:26px;letter-spacing:1px}

  .page-slogan{font-size:15px;margin-top:10px}

  /* 公司简介内容文本手机端左对齐 */

  #about .section-desc{text-align:left}

  .sub-nav-bar{background:#fff;border-bottom:1px solid #eee}

  .sub-nav-inner{padding:0px 0;flex-wrap:wrap}

  /* 手机端隐藏当前位置 */

  .page-crumb{display:none}

  /* 菜单与PC同调性：白底、右边框分隔，一行四个居中 */

  .sub-nav-menu{

    width:100%;display:flex;flex-wrap:wrap;justify-content:center;

    gap:0;margin-top:0;overflow:visible;

  }

  .sub-nav-menu a{

    width:25%;box-sizing:border-box;text-align:center;

    color:var(--text-light);font-size:14px;font-weight:600;

    padding:8px 4px;border-right:1px solid #eee;

    white-space:nowrap;flex-shrink:0;border-radius:0;background:none;

  }

  .sub-nav-menu a:nth-child(4n){border-right:none}

  .sub-nav-menu a:last-child{border-right:none}

  .sub-nav-menu a:hover{color:var(--green);background:#f8f8f8}

  .sub-nav-menu a.active{color:#fff;font-weight:700;background:var(--green)}



  .page-main{padding:40px 0}

  .adv4-section{padding:40px 0 0}

  .adv4-grid{grid-template-columns:1fr;margin-top:28px}

  .adv4-item{min-height:200px;padding:30px 24px}

  .adv4-inner h4{font-size:18px;margin-bottom:10px}

  .adv4-inner p{font-size:14px}

  /* 左右分栏：手机端改为单列 */

  .split-section{grid-template-columns:1fr;gap:20px;padding-left:0}

  .page-content .split-title{position:static;font-size:24px;margin-bottom:8px}

  .split-content .lead{font-size:16px}

  .split-content p{font-size:15px;line-height:1.85;margin-bottom:14px}

  .page-content h2{font-size:22px;margin-bottom:16px;padding-bottom:0px; text-align: center;}

  .page-content h3{font-size:17px;margin:22px 0 10px}

  .page-content p{font-size:15px;line-height:1.85;margin-bottom:14px}

  .page-content .lead{font-size:16px; text-align: center;}
	.split-content p { text-indent: 2em;}

  .page-card{padding:20px}

  .value-item{padding:18px;gap:14px}

  .value-num{width:40px;height:40px;font-size:16px}

  .value-text h4{font-size:16px}

  .value-text p{font-size:14px}

  .timeline{padding-left:18px}

  .timeline-dot{left:-18px;width:12px;height:12px}

  .timeline-year{font-size:14px}

  .timeline-title{font-size:16px}

  .timeline-desc{font-size:14px; text-align: justify;}

  .brand-logo{width:160px}

  .brand-name{font-size:24px; margin-top:20px;}

  .about-stats{gap:12px}

  .about-stat{padding:20px 10px}

  .about-stat-num{font-size:24px}

  .about-stat-label{font-size:13px}

  .subnav-cards{grid-template-columns:1fr}

  .subnav-card{padding:22px 20px}
	.page-banner{margin-top:56px;}

}





/* ---------- 图集版块（仓库/车间/专利证书） ---------- */

.gallery-section{padding:70px 0;background:#fff}

.gallery-section:nth-of-type(even){background:#f8f8f8}

.gallery-section.cert-swiper-section{background:#fff}

.gallery-section .section-head{margin-bottom:36px}

.gallery-section .section-title{font-size:28px;color:var(--text);letter-spacing:1px;text-align:center}

.gallery-section .section-desc{font-size:16px;color:var(--text-light);line-height:1.8;text-align:center;max-width:760px;margin:12px auto 0}

/* 纸制品车间图：浅色背景图，仅作底图，不改其它 */

#paper-gallery{

  background-image:url('../images/20260825071123-bc42365c-3da6d570.jpg');

  background-size:cover;background-position:center;background-repeat:no-repeat; background-attachment:fixed;}

.gallery-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:20px}

.gallery-item{position:relative;display:block;aspect-ratio:4/3;overflow:hidden;border-radius:8px;background:#f0f0f0;box-shadow:var(--shadow);cursor:pointer}

.gallery-item img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease,filter .3s ease;display:block}

.gallery-item:hover img{transform:scale(1.08)}

.gallery-zoom{position:absolute;inset:0;background:rgba(0,0,0,.5);display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .35s ease}

.gallery-item:hover .gallery-zoom{opacity:1}

.gallery-zoom svg{width:36px;height:36px;stroke:#fff}



/* ---------- 图集画廊查看器（左右切换 / 动画 / 黑色 85% 遮罩，无模糊） ---------- */

.lightbox{position:fixed;inset:0;z-index:10000;display:none;align-items:center;justify-content:center;padding:20px;

  background:rgba(0,0,0,.85);

  opacity:0;transition:opacity .3s ease}

.lightbox.active{display:flex;opacity:1}

.lightbox-stage{margin:0;display:flex;flex-direction:column;align-items:center;max-width:92vw;max-height:90vh;

  /* 弹出框内可拖拽切换：手形光标，禁用页面横向滚动干扰 */

  cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none}

.lightbox-stage.grabbing,.lightbox-stage.grabbing .lightbox-img{cursor:grabbing}

.lightbox-img{max-width:92vw;max-height:80vh;object-fit:contain;border-radius:6px;box-shadow:0 24px 70px rgba(0,0,0,.55);

  background:#fff;will-change:transform,opacity;-webkit-user-drag:none;user-select:none;-webkit-user-select:none;pointer-events:auto}

/* 打开：缩放淡入 */

.lightbox.active .lightbox-img{animation:lbZoomIn .38s cubic-bezier(.2,.7,.3,1) both}

@keyframes lbZoomIn{from{opacity:0;transform:scale(.82)}to{opacity:1;transform:scale(1)}}

/* 切换：方向滑动（下一张从右滑入、上一张从左滑入）。特异性必须高于上面的 zoom 规则 */

.lightbox.active .lightbox-img.anim-next{animation:lbSlideNext .4s cubic-bezier(.22,.61,.36,1) both}

.lightbox.active .lightbox-img.anim-prev{animation:lbSlidePrev .4s cubic-bezier(.22,.61,.36,1) both}

@keyframes lbSlideNext{from{opacity:0;transform:translateX(90px)}to{opacity:1;transform:translateX(0)}}

@keyframes lbSlidePrev{from{opacity:0;transform:translateX(-90px)}to{opacity:1;transform:translateX(0)}}

.lightbox-caption{margin-top:16px;color:#eafaf5;font-size:15px;letter-spacing:.5px;text-align:center;text-shadow:0 1px 4px rgba(0,0,0,.4)}

/* 左右切换按钮 */

.lightbox-nav{position:absolute;top:50%;transform:translateY(-50%);width:52px;height:52px;border:none;border-radius:50%;

  display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:3;

  background:rgba(255,255,255,.14);color:#fff;transition:background .2s,transform .2s;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}

.lightbox-nav svg{width:24px;height:24px}

.lightbox-nav:hover{background:var(--green);transform:translateY(-50%) scale(1.08)}

.lightbox-prev{left:24px}

.lightbox-next{right:24px}

/* 关闭按钮 */

.lightbox-close{position:absolute;top:16px;right:26px;width:46px;height:46px;border:none;border-radius:50%;

  background:rgba(255,255,255,.12);color:#fff;font-size:30px;font-weight:300;cursor:pointer;line-height:1;z-index:4;

  display:flex;align-items:center;justify-content:center;transition:background .2s,transform .2s}

.lightbox-close:hover{background:var(--green);transform:rotate(90deg)}

/* 计数 */

.lightbox-counter{position:absolute;bottom:22px;left:0;right:0;text-align:center;color:rgba(255,255,255,.85);

  font-size:14px;letter-spacing:2px;z-index:3}



@media (max-width:992px){

  .gallery-grid{grid-template-columns:repeat(3,1fr);gap:16px}

}

@media (max-width:768px){

  .gallery-section{padding:48px 0}

  .gallery-section .section-title{font-size:24px}

  .gallery-section .section-desc{font-size:14px}

  .gallery-grid{grid-template-columns:repeat(2,1fr);gap:12px}

  /* 移动端 iOS 不支持 background-attachment:fixed，降级为 scroll 避免背景错位 */

  #paper-gallery{background-attachment:scroll}

  /* 手机2列下第15张图(落单)隐藏，保持两列整齐 */

  .gallery-grid>.gallery-item:last-child{}

  .gallery-item{border-radius:6px}

  .lightbox{padding:12px}

  .lightbox-close{top:10px;right:12px;width:40px;height:40px;font-size:26px}

  .lightbox-nav{width:40px;height:40px}

  .lightbox-nav svg{width:20px;height:20px}

  .lightbox-prev{left:10px}

  .lightbox-next{right:10px}

  .lightbox-img{max-height:74vh}

  .lightbox-caption{font-size:13px;margin-top:12px}

  .lightbox-counter{bottom:14px;font-size:12px}

}



/* ---------- 专利及证书 Swiper 扇形轮播 ---------- */

/* 平板：统计数字网格折为两列，避免 1024 视口溢出 */

@media (max-width:1024px){

  .about .stats-grid{grid-template-columns:repeat(2,1fr);gap:18px}

}

.cert-swiper-section{padding-bottom:64px}

.cert-swiper{padding:30px 0 50px;overflow:hidden}

.cert-swiper .swiper-wrapper{align-items:center}

.cert-swiper .swiper-slide{width:380px;display:flex;justify-content:center;align-items:center}

.cert-card{width:280px;height:380px;background:#fff;box-shadow:0 12px 34px rgba(0,0,0,.18);overflow:hidden;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:transform .35s ease}

.cert-card:hover{transform:translateY(-6px)}

/* 横图：卡片按图片比例自适应高度，宽度100%显示、不裁切、无变形 */

.cert-card.land{width:360px;height:auto}

.cert-card img{width:100%;height:100%;object-fit:contain;display:block}

.cert-card.land img{width:100%;height:auto;object-fit:contain}

/* 仅中间(active)卡片可点击，两侧不可点击、无悬停位移 */

.cert-swiper .swiper-slide:not(.swiper-slide-active) .cert-card{cursor:default}

.cert-swiper .swiper-slide:not(.swiper-slide-active) .cert-card:hover{transform:none}

/* 中间焦点图加大显示 */

.cert-swiper .swiper-slide-active{z-index:2}

.cert-swiper .swiper-slide-active .cert-card{transform:scale(1.12)}

.cert-hint{text-align:center;color:var(--text-light);font-size:14px;margin-top:22px;letter-spacing:1px}

.cert-pagination{position:static;margin-top:100px;display:flex;justify-content:center;align-items:center;gap:1px}

/* 切换焦点：长方形，当前焦点更长 */

.cert-pagination .swiper-pagination-bullet{background:rgba(10,102,89,.3);opacity:1;width:15px;height:4px;border-radius:0px;transition:width .3s ease,background .3s ease}

.cert-pagination .swiper-pagination-bullet-active{background:var(--green);width:30px}



@media (max-width:992px){

  .cert-swiper .swiper-slide{width:320px}

  .cert-card{width:220px;height:300px}

  .cert-card.land{width:290px}

}

@media (max-width:768px){

  .cert-swiper{padding:24px 0 0px}

  .cert-swiper-section{padding-bottom: 50px;}

  .cert-swiper .swiper-slide{width:260px}

  .cert-card{width:180px;height:250px}

  .cert-card.land{width:240px}

  .cert-hint{font-size:13px;margin-top:16px}

  .cert-pagination{margin-top:80px}

  .gallery-grid{gap:10px}

}


/* ============================================================
   品牌故事版块：改为「标题在上、正文与图片在下」的单列版式
   原为 .split-section 的 280px + 1fr 左右分栏（左标题 / 右内容）
   用 #brand-story 作用域（id 特异性高于 .split-section），可覆盖后文断点内的分栏规则
   ============================================================ */
#brand-story{grid-template-columns:1fr;gap:0;padding-left:0}
#brand-story .split-left{width:100%}
#brand-story .split-right{width:100%}
/* 单列后标题不再需要 sticky 吸顶 */
#brand-story .split-title{position:static;top:auto;margin-bottom:22px}
/* 正文中的配图自适应内容宽度、取消圆角与描边 */
#brand-story .split-content img{max-width:100%;height:auto;display:block;border-radius:0}
@media (max-width:768px){
  #brand-story .split-title{margin-bottom:14px; text-align: center;}
}

/* ============================================================
   企业文化 · 企业使命 / 企业愿景（左右分块交替，作用域 #mv-sec）
   每块 = 图片 + 主色绿文字块，各占一半；第二块左右相反
   ============================================================ */
#mv-sec .mv-block{
  display:grid;grid-template-columns:1.35fr 1fr;align-items:stretch;
  margin-bottom:26px;
}
/* 第二块图在右，故右列加宽（与第一块方向相反） */
#mv-sec .mv-reverse{grid-template-columns:1fr 1.35fr}
#mv-sec .mv-block:last-child{margin-bottom:0}
#mv-sec .mv-pic{overflow:hidden}
#mv-sec .mv-pic img{width:100%;height:100%;object-fit:cover;display:block}
#mv-sec .mv-text{
  background:var(--green);color:#fff;
  padding:56px 58px;
  display:flex;flex-direction:column;justify-content:center;
}
/* 第二块：文字块在左、图片在右（与第一块相反） */
#mv-sec .mv-reverse .mv-pic{order:2}
#mv-sec .mv-reverse .mv-text{order:1}

#mv-sec .mv-label{
  font-size:24px;color:rgba(255,255,255,.72);
  letter-spacing:3px;
}
#mv-sec .mv-text h3{
  font-size:31px;line-height:1.5;font-weight:700;color:#fff;
  letter-spacing:1px;margin-bottom:22px;
}
#mv-sec .mv-text p{
  font-size:16px;line-height:2;color:rgba(255,255,255,.82);
  text-align:justify;margin:0;
}
@media (max-width:992px){
  #mv-sec .mv-text{padding:38px 34px}
  #mv-sec .mv-text h3{font-size:24px;margin-bottom:16px}
  #mv-sec .mv-label{font-size:14px;margin-bottom:12px; text-align: center;}
}
@media (max-width:768px){
  /* 手机端统一为「图上、文字下」，取消左右交错 */
  #mv-sec .mv-block,
  #mv-sec .mv-reverse{grid-template-columns:1fr;margin-bottom:18px}
  #mv-sec .mv-reverse .mv-pic{order:0}
  #mv-sec .mv-reverse .mv-text{order:0}
  #mv-sec .mv-pic{height:220px}
  #mv-sec .mv-text{padding:26px 20px}
  #mv-sec .mv-text h3{font-size:20px;line-height:1.5; text-align: center; margin-top: 0px;}
  #mv-sec .mv-text p{font-size:13px;line-height:1.9}
}

/* ============================================================
   品牌矩阵页 · 品牌实力卡片（深绿底三列，仅 brands.html）
   替代原来的 ul.list 列表
   ============================================================ */
.brand-stats{
  display:grid;grid-template-columns:repeat(3,1fr);
  background:var(--green);margin-top:28px;
}
.brand-stat{
  padding:28px 16px;text-align:center;color:#fff;
  border-right:1px solid rgba(255,255,255,.20);
}
.brand-stat:last-child{border-right:0}
/* 第一列的大数字（如 300+万） */
.brand-stat-num{
  display:flex;align-items:baseline;justify-content:center;gap:2px;
  font-size:42px;font-weight:700;line-height:1.1;color:#fff;margin-bottom:20px;
}
.brand-stat-num i{font-size:22px;font-style:normal}
.brand-stat-num em{font-size:18px;font-style:normal;font-weight:400}
/* 图标（与数字列底部对齐，保证三列文字基线一致） */
.brand-stat-ico{
  height:60px; display:flex;align-items:center;justify-content:center;
  font-size:30px;color:#fff;margin-bottom:10px;
}
.brand-stat-ico img{max-height:60px;}
.brand-stat p{
  font-size:16px;line-height:1.65;color:rgba(255,255,255,.92);margin:0; text-align: center;
}
@media (max-width:768px){
  .brand-stats{margin-top:20px}
  .brand-stat{padding:20px 8px}
  .brand-stat-num{font-size:30px;margin-bottom:8px}
  .brand-stat-num i{font-size:16px}
  .brand-stat-num em{font-size:13px}
  .brand-stat-ico{height:34px;font-size:22px;margin-bottom:8px}
	.brand-stat-ico img{max-height:34px;}
  .brand-stat p{font-size:11px;line-height:1.5}
}