/* ============================================================
   德心合（雄安）健康科技有限公司 - 网站样式表
   ------------------------------------------------------------
   这个文件控制整个网站所有页面的「外观」（颜色、字体、间距、移动端适配）。
   【普通客户一般不需要修改这个文件】——只需改 HTML 里的文字和图片即可。
   如果你一定要改颜色，改下面「品牌色」那几行即可。
   ============================================================ */


/* ========= 1. 品牌色定义（配色方案） ========= */
:root{
  /* --  主色：青绿色（心理健康的清新主色调，原网站也是青绿色）  */
  --teal:        #23b6b0;      /* 品牌主色，用于按钮、导航高亮、标题 */
  --teal-dark:   #1a9691;      /* 主色的加深版，用于鼠标悬停(hover)时 */
  --teal-light:  #e7f6f5;      /* 主色的浅色背景，用于板块底纹 */

  /* --  文字颜色  */
  --text-dark:   #333333;      /* 大标题、主要正文 */
  --text-mid:    #555555;      /* 次要文字 */
  --text-light:  #888888;      /* 最浅的说明文字 */

  /* --  中性色  */
  --white:       #ffffff;
  --line:        #e8e8e8;      /* 分隔线、卡片边框 */
  --bg-gray:     #f7f9f9;      /* 页面交替的背景色 */

  /* --  内容最大宽度（越大屏幕的内容越宽，改成 1100 可让内容更窄居中）  */
  --maxw: 1200px;
}


/* ========= 2. 基础重置（保证各浏览器显示一致） ========= */
*{            /* 通配符：给页面上所有元素统一设置 */
  margin:0;   /* 去掉默认外边距 */
  padding:0;  /* 去掉默认内边距 */
  box-sizing:border-box;  /* 让宽高计算包含内边距和边框，排版更准 */
}
html{ scroll-behavior:smooth; }  /* 点击锚点跳转时平滑滚动 */
body{
  font-family:"Microsoft YaHei","PingFang SC","Helvetica Neue",Arial,sans-serif;
  color:var(--text-dark);
  background:var(--white);
  line-height:1.7;               /* 行高，1.7 让正文更好读 */
  font-size:16px;
}
img{ max-width:100%; display:block; }  /* 图片不超出容器，并去掉图片下方空隙 */
a{ text-decoration:none; color:inherit; }  /* 链接去掉下划线，颜色继承 */
ul{ list-style:none; }            /* 去掉列表默认圆点 */

/* 让页面里每个主要板块间距一致 */
.container{ max-width:var(--maxw); margin:0 auto; padding:0 20px; }


/* ========= 3. 顶部导航栏 ========= */
.site-header{
  background:var(--white);
  box-shadow:0 2px 10px rgba(0,0,0,.06);   /* 底部淡淡的阴影 */ 
  position:sticky; top:0; z-index:100;      /* 吸顶：滚动时导航栏固定在最上面 */
}
.header-inner{
  max-width:var(--maxw); margin:0 auto; padding:0 20px;
  display:flex;                      /* 弹性布局：让 logo 和菜单横排 */
  align-items:center;                /* 垂直居中 */
  justify-content:space-between;     /* logo 靠左、菜单靠右 */
  height:74px;                       /* 导航栏高度 */
}
.logo{ display:flex; align-items:center; gap:10px; }
.logo img{ height:44px; width:auto; }  /* 网站 logo 高度 */
.logo span{ font-size:20px; font-weight:bold; color:var(--teal-dark); }
/* 桌面端菜单 */
.main-nav ul{ display:flex; gap:6px; }
.main-nav li a{
  display:block; padding:8px 16px; border-radius:20px;
  font-size:16px; color:var(--text-dark); transition:.2s;
}
.main-nav li a:hover{ color:var(--teal); background:var(--teal-light); }
/* 当前页面所在的导航项高亮（由 JS 自动加上 .active 类） */
.main-nav li a.active{ background:var(--teal); color:#fff; }

/* 导航栏「咨询热线」小按钮（桌面端显示在导航右侧） */
.header-tel{
  display:flex; align-items:center; gap:6px;
  color:var(--teal-dark); font-weight:bold; font-size:15px;
}

/* 移动端「汉堡」菜单按钮（手机下才显示，桌面端隐藏） */
.menu-btn{
  display:none; background:none; border:none; cursor:pointer;
  width:34px; height:34px; padding:4px;
}
.menu-btn span{ display:block; height:3px; background:var(--teal-dark); border-radius:2px; margin:5px 0; transition:.3s; }
.menu-btn.open span:nth-child(1){ transform:translateY(8px) rotate(45deg); }
.menu-btn.open span:nth-child(2){ opacity:0; }
.menu-btn.open span:nth-child(3){ transform:translateY(-8px) rotate(-45deg); }


/* ========= 4. 首页横幅轮播（大图） ========= */
.hero{ position:relative; }
.hero .slide{
  position:relative; height:560px; background-size:cover; background-position:center;
  display:flex; align-items:center;
}
/* 横幅上盖一层半透明青色，让白字更清楚 */
.hero .slide::after{ content:""; position:absolute; inset:0; background:linear-gradient(90deg,rgba(0,0,0,.42),rgba(23,182,176,.25)); }
.hero .slide .container{ position:relative; z-index:2; }
.hero h1{ color:#fff; font-size:44px; margin-bottom:14px; text-shadow:0 2px 8px rgba(0,0,0,.3); }
.hero p{ color:#fff; font-size:18px; max-width:640px; }
.hero .container > a{
  display:inline-block; margin-top:26px; padding:12px 30px; border-radius:30px;
  background:var(--teal); color:#fff; font-size:17px; transition:.2s;
}
.hero .container > a:hover{ background:var(--teal-dark); }
/* 轮播左右箭头和小圆点（自动切换由 JS 控制） */
.slide-btn{ position:absolute; top:50%; transform:translateY(-50%); z-index:5;
  width:44px; height:44px; border-radius:50%; background:rgba(255,255,255,.25);
  color:#fff; font-size:22px; border:none; cursor:pointer; }
.slide-btn.prev{ left:16px; } .slide-btn.next{ right:16px; }
.dots{ position:absolute; bottom:20px; left:50%; transform:translateX(-50%); z-index:5; display:flex; gap:8px; }
.dots button{ width:10px; height:10px; border-radius:50%; background:rgba(255,255,255,.5); border:none; cursor:pointer; }
.dots button.on{ background:#fff; width:24px; border-radius:6px; }


/* ========= 5. 通用板块标题 ========= */
.section-title{ text-align:center; padding:56px 20px 30px; }
.section-title .cn{ font-size:32px; font-weight:bold; color:var(--text-dark); }
.section-title .en{ display:block; margin-top:6px; color:var(--teal); font-size:14px; letter-spacing:2px; text-transform:uppercase; }
.section-title::after{ content:""; display:block; width:56px; height:3px; background:var(--teal); margin:16px auto 0; border-radius:2px; }


/* ========= 6. 企业介绍（首页模块） ========= */
.about-preview{ background:var(--bg-gray); }
.about-box{ display:grid; grid-template-columns:1.05fr 1fr; gap:44px; align-items:center; max-width:var(--maxw); margin:0 auto; padding:10px 20px 60px; }
.about-text h2{ font-size:28px; margin-bottom:8px; }
.about-text h2 em{ color:var(--teal); font-style:normal; }
.about-text h3{ font-size:15px; color:var(--teal); font-weight:normal; letter-spacing:2px; margin-bottom:16px; }
.about-text p{ color:var(--text-mid); margin-bottom:14px; text-align:justify; }
.about-text a.more-btn{ display:inline-block; margin-top:8px; padding:10px 28px; border-radius:24px; background:var(--teal); color:#fff; transition:.2s; }
.about-text a.more-btn:hover{ background:var(--teal-dark); }
.about-img img{ border-radius:14px; box-shadow:0 10px 30px rgba(0,0,0,.12); aspect-ratio:4/3; object-fit:cover; }


/* ========= 7. 特色亮点（首页，用图标表达公司核心价值） ========= */
.features{ max-width:var(--maxw); margin:0 auto; padding:0 20px 60px; display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
.feature{ text-align:center; padding:30px 18px; border:1px solid var(--line); border-radius:14px; transition:.25s; }
.feature:hover{ border-color:var(--teal); box-shadow:0 8px 24px rgba(35,182,176,.12); transform:translateY(-4px); }
.feature .icon{ font-size:38px; }
.feature .icon em{ font-style:normal; color:var(--teal); }
.feature h4{ margin:12px 0 8px; font-size:18px; }
.feature p{ color:var(--text-mid); font-size:14px; }


/* ========= 8. 专家团队（卡片网格，自动适配数量） ========= */
.team-grid{ max-width:var(--maxw); margin:0 auto; padding:10px 20px 60px; display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:26px; }
.team-card{ border:1px solid var(--line); border-radius:14px; overflow:hidden; transition:.25s; background:#fff; }
.team-card:hover{ transform:translateY(-4px); box-shadow:0 10px 26px rgba(0,0,0,.1); }
.team-card .photo{ aspect-ratio:1/1; overflow:hidden; }
.team-card .photo img{ width:100%; height:100%; object-fit:cover; transition:.4s; }
.team-card:hover .photo img{ transform:scale(1.06); }
.team-card .info{ padding:16px; text-align:center; }
.team-card .info h4{ font-size:17px; }
.team-card .info .pos{ color:var(--teal); font-size:13px; margin-top:4px; }
.team-card .info p{ color:var(--text-light); font-size:13px; margin-top:8px; line-height:1.6; }


/* ========= 9. 产品中心（卡片） ========= */
.product-filter{ text-align:center; padding:0 20px 28px; }
.product-filter button{ padding:8px 22px; margin:0 6px 8px; border:1px solid var(--line); background:#fff; border-radius:20px; cursor:pointer; font-size:15px; transition:.2s; }
.product-filter button.on{ background:var(--teal); color:#fff; border-color:var(--teal); }
.product-grid{ max-width:var(--maxw); margin:0 auto; padding:10px 20px 30px; display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:26px; }
.product-card{ border:1px solid var(--line); border-radius:14px; overflow:hidden; background:#fff; transition:.25s; display:flex; flex-direction:column; }
.product-card:hover{ box-shadow:0 10px 26px rgba(0,0,0,.1); transform:translateY(-4px); }
.product-card .pic{ aspect-ratio:16/10; overflow:hidden; }
.product-card .pic img{ width:100%; height:100%; object-fit:cover; }
.product-card .body{ padding:18px; display:flex; flex-direction:column; flex:1; }
.product-card h4{ font-size:18px; }
.product-card .tag{ display:inline-block; margin-top:8px; padding:2px 10px; border-radius:10px; background:var(--teal-light); color:var(--teal-dark); font-size:12px; }
.product-card .desc{ color:var(--text-mid); font-size:14px; margin-top:10px; flex:1; }
/* 「查看详情」：点击后展开更详细内容（详情的展开收起由 JS 控制） */
.detail-more{ max-height:0; overflow:hidden; transition:max-height .4s ease; }
.product-card .detail-more .inner{ padding:12px 0 4px; border-top:1px dashed var(--line); margin-top:12px; font-size:14px; color:var(--text-mid); }
/* 卡片下部两个按钮 */
.product-card .btns{ display:flex; gap:10px; margin-top:16px; }
.btn-detail{ flex:1; padding:9px; border:1px solid var(--teal); color:var(--teal-dark); background:#fff; border-radius:22px; cursor:pointer; font-size:14px; transition:.2s; }
.btn-detail:hover{ background:var(--teal); color:#fff; }
.btn-consult{ flex:1; padding:9px; background:var(--teal); color:#fff; border:none; border-radius:22px; cursor:pointer; font-size:14px; transition:.2s; }
.btn-consult:hover{ background:var(--teal-dark); }


/* ========= 10. 新闻资讯（卡片 + 分类筛选 + 分页） ========= */
.news-filter{ text-align:center; padding:0 20px 24px; }
.news-filter button{ padding:8px 22px; margin:0 6px 8px; border:1px solid var(--line); background:#fff; border-radius:20px; cursor:pointer; font-size:15px; transition:.2s; }
.news-filter button.on{ background:var(--teal); color:#fff; border-color:var(--teal); }
.news-list{ max-width:var(--maxw); margin:0 auto; padding:10px 20px 20px; display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:26px; }
/* 每一篇新闻 = 一张 .news-card */
.news-card{ border:1px solid var(--line); border-radius:14px; overflow:hidden; background:#fff; transition:.25s; display:flex; flex-direction:column; }
.news-card:hover{ box-shadow:0 10px 26px rgba(0,0,0,.1); transform:translateY(-4px); }
.news-card .pic{ aspect-ratio:16/9; overflow:hidden; }
.news-card .pic img{ width:100%; height:100%; object-fit:cover; }
.news-card .body{ padding:18px; display:flex; flex-direction:column; flex:1; }
.news-card .meta{ display:flex; align-items:center; gap:10px; margin-bottom:10px; }
.news-card .cat{ padding:2px 12px; border-radius:12px; background:var(--teal-light); color:var(--teal-dark); font-size:13px; }
.news-card .date{ color:var(--text-light); font-size:13px; }
.news-card h4{ font-size:17px; line-height:1.4; }
.news-card .intro{ color:var(--text-mid); font-size:14px; margin-top:10px; flex:1; }
.news-card .readmore{ margin-top:14px; color:var(--teal); font-size:14px; cursor:pointer; align-self:flex-start; border:none; background:none; }
/* 展开后的全文 */
.news-card .full{ max-height:0; overflow:hidden; transition:max-height .45s ease; }
.news-card .full .inner{ padding-top:12px; border-top:1px dashed var(--line); margin-top:12px; font-size:14px; color:var(--text-mid); line-height:1.9; }

/* 分页按钮（最底部） */
.pagination{ display:flex; justify-content:center; gap:8px; padding:26px 20px 60px; }
.pagination button{ min-width:36px; height:36px; padding:0 8px; border:1px solid var(--line); background:#fff; border-radius:8px; cursor:pointer; font-size:14px; }
.pagination button.on{ background:var(--teal); color:#fff; border-color:var(--teal); }
.pagination button:disabled{ opacity:.4; cursor:not-allowed; }


/* ========= 11. 案例展示 ========= */
.case-grid{ max-width:var(--maxw); margin:0 auto; padding:10px 20px 60px; display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:26px; }
.case-card{ border-radius:14px; overflow:hidden; border:1px solid var(--line); background:#fff; transition:.25s; }
.case-card:hover{ box-shadow:0 10px 26px rgba(0,0,0,.1); transform:translateY(-4px); }
.case-card .pic{ aspect-ratio:16/10; overflow:hidden; }
.case-card .pic img{ width:100%; height:100%; object-fit:cover; }
.case-card .info{ padding:18px; }
.case-card h4{ font-size:17px; }
.case-card p{ color:var(--text-mid); font-size:14px; margin-top:8px; }
/* 案例卡片「查看详情」按钮（点击进入 case/*.html 详情页） */
.case-card .more{ display:inline-block; margin-top:14px; padding:8px 26px; border:1px solid var(--teal); color:var(--teal-dark); background:#fff; border-radius:22px; font-size:14px; cursor:pointer; transition:.2s; }
.case-card .more:hover{ background:var(--teal); color:#fff; }
/* 预留的「待补充」占位卡片 */
.case-card.reserved{ border-style:dashed; background:repeating-linear-gradient(45deg,#fdfdfd,#fdfdfd 10px,#f7f9f9 10px,#f7f9f9 20px); }
.case-card.reserved .info p{ color:var(--text-light); text-align:center; padding:30px 0; }


/* ========= 12. 联系我们页 ========= */
.contact-card{ max-width:var(--maxw); margin:20px auto 60px; padding:0 20px; display:grid; grid-template-columns:1fr 1fr; gap:40px; }
.contact-info h3{ font-size:22px; margin-bottom:18px; border-left:4px solid var(--teal); padding-left:12px; }
.contact-info .row{ display:flex; gap:12px; margin-bottom:18px; font-size:16px; }
.contact-info .row b{ color:var(--teal-dark); min-width:88px; }
.contact-info .row a.tel{ font-size:22px; color:var(--teal-dark); font-weight:bold; }
/* 联系我们页的「位置地图」 */
.contact-map h3{ font-size:22px; margin-bottom:14px; border-left:4px solid var(--teal); padding-left:12px; }
.contact-map .map-note{ color:var(--text-light); font-size:13px; margin-bottom:10px; }
.contact-map .map-frame{ border:1px solid var(--line); border-radius:14px; overflow:hidden; line-height:0; }
.contact-map .map-frame iframe{ display:block; }
.contact-map .map-open{ display:inline-block; margin-top:14px; color:var(--teal-dark); font-weight:bold; font-size:15px; }
.contact-map .map-open:hover{ text-decoration:underline; }
/* 「位置信息卡 + 一键导航」样式（替代被登录墙/验证码阻断的在线地图 iframe） */
.contact-map .map-address{ border:1px solid var(--line); border-radius:14px; padding:6px 20px; background:var(--bg-gray); }
.contact-map .ma-row{ display:flex; align-items:center; gap:12px; padding:14px 0; }
.contact-map .ma-row + .ma-row{ border-top:1px dashed var(--line); }
.contact-map .ma-row b{ color:var(--teal-dark); min-width:44px; flex-shrink:0; }
.contact-map .ma-row span{ flex:1; color:var(--text-mid); font-size:14px; line-height:1.6; }
.contact-map .ma-row a{ margin-top:0; flex-shrink:0; }
.contact-map .map-honest{ color:var(--text-light); font-size:13px; margin-top:12px; line-height:1.8; text-align:justify; }
/* 二维码占位 */
.qr-box{ text-align:center; padding:20px; border:1px solid var(--line); border-radius:12px; background:var(--bg-gray); }
.qr-box img{ width:150px; height:150px; margin:0 auto; }
.qr-box p{ margin-top:10px; color:var(--text-mid); font-size:14px; }
/* 留言表单 */
.contact-form{ border:1px solid var(--line); border-radius:14px; padding:28px; background:#fff; }
.contact-form h3{ font-size:20px; margin-bottom:16px; color:var(--teal-dark); }
.contact-form label{ display:block; font-size:14px; color:var(--text-mid); margin:12px 0 6px; }
.contact-form input,.contact-form textarea{ width:100%; padding:10px 12px; border:1px solid var(--line); border-radius:8px; font-size:15px; font-family:inherit; }
.contact-form input:focus,.contact-form textarea:focus{ outline:none; border-color:var(--teal); }
.contact-form button.submit{ margin-top:18px; padding:11px 34px; background:var(--teal); color:#fff; border:none; border-radius:24px; cursor:pointer; font-size:16px; transition:.2s; }
.contact-form button.submit:hover{ background:var(--teal-dark); }
.form-tip{ font-size:13px; color:var(--text-light); margin-top:10px; }


/* ========= 13. 企业介绍页全文字教程（普通段落样式） ========= */
.prose{ max-width:860px; margin:0 auto; padding:10px 20px 60px; }
.prose h3{ font-size:22px; color:var(--teal-dark); margin:26px 0 12px; border-left:4px solid var(--teal); padding-left:12px; }
.prose p{ color:var(--text-mid); margin-bottom:14px; text-align:justify; }
.prose ul{ padding-left:22px; margin-bottom:14px; }
.prose ul li{ list-style:disc; margin-bottom:6px; color:var(--text-mid); }


/* ========= 14. 悬浮的「立即咨询」按钮（全站右下角） ========= */
.float-wrap{ position:fixed; right:24px; bottom:28px; z-index:200; }
/* 悬浮按钮本体：橙红色 + 略放大，和青绿色的轮播图/页面形成对比，更显眼 */
.float-main{
  width:64px; height:64px; border-radius:50%; border:none; cursor:pointer;
  background:#ff5a3c; color:#fff; font-size:15px; font-weight:bold;
  box-shadow:0 8px 22px rgba(255,90,60,.5); transition:.25s;
  display:flex; align-items:center; justify-content:center; animation:pulse 2.4s infinite;
}
@keyframes pulse{ 0%,100%{box-shadow:0 8px 22px rgba(255,90,60,.5);} 50%{box-shadow:0 10px 30px rgba(255,90,60,.8);} }
.float-main em{ font-style:normal; font-size:14px; display:block; line-height:1.2; }
.float-main:hover{ transform:scale(1.06); background:#e84a2f; }

/* 点击悬浮按钮后弹出的两个选项（电话、微信） */
.float-options{ position:absolute; right:0; bottom:70px; background:#fff; border-radius:14px;
  box-shadow:0 12px 34px rgba(0,0,0,.16); overflow:hidden; opacity:0; visibility:hidden; transform:translateY(10px); transition:.25s; width:240px; }
.float-options.show{ opacity:1; visibility:visible; transform:translateY(0); }

/* 电脑端：悬浮「立即咨询」回到右侧中间位置（top:50%），
   按钮本身改用醒目的橙红色、加大尺寸，避免和轮播图同色而不显眼。
   点开面板往下拉出电话/微信。移动端（<768px）保持右下角，见下方规则。 */
@media (min-width:769px){
  .float-wrap{ top:50%; bottom:auto; transform:translateY(-50%); }
  .float-wrap .float-options{ bottom:auto; top:72px; }   /* 桌面端面板放在按钮下方（下拉） */
}
.float-options h5{ padding:14px 16px; background:#ff5a3c; color:#fff; font-size:15px; }
.float-option{ display:flex; gap:12px; align-items:center; padding:14px 16px; border-top:1px solid var(--line); cursor:pointer; transition:.2s; }
.float-option:hover{ background:var(--teal-light); }
.float-option .fi{ font-size:22px; }
.float-option b{ font-size:15px; }
.float-option span{ font-size:13px; color:var(--text-light); display:block; }
.float-option .tel-num{ font-size:18px; color:var(--teal-dark); font-weight:bold; }

/* 电脑端弹出的微信二维码小窗口 */
.qr-overlay{ position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:300; display:flex; align-items:center; justify-content:center; cursor:default; }
.qr-pop{ background:#fff; border-radius:16px; padding:28px 34px; text-align:center; position:relative; width:300px; box-shadow:0 16px 44px rgba(0,0,0,.25); }
.qr-pop .qr-close{ position:absolute; top:10px; right:12px; background:none; border:none; font-size:18px; color:#999; cursor:pointer; }
.qr-pop h4{ margin-bottom:16px; color:var(--teal-dark); }
.qr-pop img{ width:190px; height:190px; margin:0 auto; border:1px solid var(--line); border-radius:8px; }
.qr-pop p{ margin-top:12px; color:var(--text-mid); font-size:14px; }


/* ========= 15. 页脚 ========= */
.site-footer{ background:#123f3c; color:#cfe6e3; margin-top:20px; }  /* 深青色页脚 */
/* 页脚内容分两栏：左栏=公司简介+集团旗下公司；右栏=客服热线+联系我们。窄屏自动回一栏。 */
.footer-top{ max-width:var(--maxw); margin:0 auto; padding:42px 20px 30px;
  display:grid; grid-template-columns:1.7fr 1fr; gap:40px; align-items:start; }
.footer-left{ min-width:0; }
.footer-about p{ font-size:14px; color:#9fc3c0; max-width:620px; margin-top:14px; line-height:1.8; }
.footer-about h3{ color:#fff; font-size:20px; }
.footer-groups{ margin-top:26px; }
.footer-groups h4{ color:#fff; font-size:15px; margin-bottom:12px; }
/* 集团旗下公司分两列：国内一列、海外一列（参照原网站排版） */
.footer-groups .cols{ display:grid; grid-template-columns:1fr 1fr; gap:26px; max-width:640px; }
.footer-groups .cols .col-h{ color:#fff; font-weight:bold; margin:0 0 6px; }
.footer-groups .cols p{ font-size:13px; color:#a9c7c4; line-height:2; }
/* 右栏：客服热线 + 联系我们 */
.footer-contact{ display:grid; grid-template-columns:1fr; gap:22px; align-content:start; }
.footer-contact .fc h4{ color:#fff; font-size:15px; margin-bottom:10px; }
.footer-contact .fc a{ color:#ffd96a; font-size:22px; font-weight:bold; }
.footer-contact .fc p{ font-size:14px; color:#bfd5d2; margin-top:6px; line-height:1.8; }
/* 窄屏（<960px）时回到一栏：联系板块落到分公司下方 */
@media (max-width:960px){
  .footer-top{ grid-template-columns:1fr; gap:26px; }
}
.footer-bottom{ border-top:1px solid rgba(255,255,255,.12); }
.footer-bottom .inner{ max-width:var(--maxw); margin:0 auto; padding:16px 20px; display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap; font-size:13px; color:#8fb4b1; }


/* ========= 16. 移动端适配（手机横屏以下） ========= */
@media (max-width:992px){
  .features{ grid-template-columns:repeat(2,1fr); }
  .contact-card{ grid-template-columns:1fr; }
  .footer-contact{ grid-template-columns:1fr; }
}
@media (max-width:768px){
  body{ font-size:15px; }
  .hero .slide{ height:420px; }
  .hero h1{ font-size:30px; }
  .hero p{ font-size:15px; }
  .about-box{ grid-template-columns:1fr; gap:28px; }
  .section-title .cn{ font-size:26px; }
  .footer-contact{ grid-template-columns:1fr; }
  /* —— 移动端导航栏：点击汉堡按钮展开下拉菜单 —— */
  .menu-btn{ display:block; }
  .main-nav{ position:fixed; top:74px; left:0; right:0; background:#fff; box-shadow:0 6px 16px rgba(0,0,0,.08);
    max-height:0; overflow:hidden; transition:max-height .35s ease; }
  .main-nav.open{ max-height:420px; }
  .main-nav ul{ flex-direction:column; padding:12px 20px 20px; }
  .main-nav li a{ border-radius:10px; padding:12px 14px; }
  .header-tel{ display:none; }   /* 手机下隐藏导航里的电话，用悬浮咨询按钮代替 */
}
@media (max-width:560px){
  .features{ grid-template-columns:1fr; }
  .team-grid{ grid-template-columns:repeat(2,1fr); gap:14px; }
  .product-grid{ gap:16px; }
  .float-wrap{ right:16px; bottom:20px; }
}


/* ============================================================
   17 ·【第二版新增】页面大横幅（导航下方的北京/雄安地标大图）
    -----------------------------------------------------------------
   ★ 客户要求：每条导航/每个页面下方都是「北京或雄安标志性建筑」的大长图，
     点击不同导航会切换不同的大图。
   ★ 做法：每个顶级页面和详情页导航下方都放一张 .page-banner（地标大图 + 标题）。
     想换某页横幅：改该页 <div class="page-banner" style="background-image:url('images/xx.jpg')">
     里的图片路径即可。
   ============================================================ */
.page-banner{
  position:relative; height:360px;
  background-size:cover; background-position:center;
  display:flex; align-items:center;
}
/* 盖上一条半透明青色渐变，让白色标题更清楚 */
.page-banner::after{ content:""; position:absolute; inset:0;
  background:linear-gradient(90deg,rgba(18,63,60,.78),rgba(35,182,176,.30)); }
.page-banner .container{ position:relative; z-index:2; }
.page-banner h1{ color:#fff; font-size:40px; text-shadow:0 2px 10px rgba(0,0,0,.35); }
.page-banner p{ color:#eaf7f5; font-size:16px; margin-top:10px; max-width:640px; }

/* 详情页里的「返回上一级」小链接 */
.crumbs{ max-width:var(--maxw); margin:0 auto; padding:20px 20px 0; font-size:14px; color:var(--text-light); }
.crumbs a{ color:var(--teal); }
.crumbs a:hover{ text-decoration:underline; }

/* ============ 专家详情页 ============ */
.expert-detail{ max-width:var(--maxw); margin:0 auto; padding:10px 20px 60px; display:grid; grid-template-columns:300px 1fr; gap:40px; }
.expert-detail .pic img{ border-radius:14px; width:100%; box-shadow:0 10px 26px rgba(0,0,0,.15); }
.expert-detail h2{ font-size:28px; }
.expert-detail .pos{ color:var(--teal); font-size:15px; margin-top:6px; }
.expert-detail .sec{ margin-top:26px; }
.expert-detail .sec h4{ font-size:18px; color:var(--teal-dark); border-left:4px solid var(--teal); padding-left:10px; margin-bottom:12px; }
.expert-detail .sec p{ color:var(--text-mid); line-height:2; }
.expert-detail .btns{ display:flex; gap:12px; margin-top:28px; flex-wrap:wrap; }

/* ============ 产品详情页 ============ */
.product-detail{ max-width:var(--maxw); margin:0 auto; padding:10px 20px 60px; display:grid; grid-template-columns:1.1fr 1fr; gap:40px; }
.product-detail .pic img{ border-radius:14px; width:100%; aspect-ratio:16/10; object-fit:cover; box-shadow:0 10px 26px rgba(0,0,0,.15); }
.product-detail h2{ font-size:28px; }
.product-detail .tag{ display:inline-block; margin-top:10px; padding:3px 12px; border-radius:12px; background:var(--teal-light); color:var(--teal-dark); font-size:13px; }
.product-detail .sec{ margin-top:22px; }
.product-detail .sec h4{ font-size:17px; color:var(--teal-dark); border-left:4px solid var(--teal); padding-left:10px; margin-bottom:10px; }
.product-detail .sec p{ color:var(--text-mid); line-height:1.9; text-align:justify; }
.product-detail .btns{ display:flex; gap:12px; margin-top:28px; flex-wrap:wrap; }
.btn-main{ padding:12px 34px; background:var(--teal); color:#fff; border:none; border-radius:26px; font-size:16px; cursor:pointer; transition:.2s; }
.btn-main:hover{ background:var(--teal-dark); }
.btn-line{ padding:12px 26px; border:1px solid var(--teal); background:#fff; color:var(--teal-dark); border-radius:26px; font-size:16px; cursor:pointer; transition:.2s; }
.btn-line:hover{ background:var(--teal); color:#fff; }

/* ============ 新闻/知识详情页 ============ */
.article-detail{ max-width:860px; margin:0 auto; padding:10px 20px 60px; }
.article-detail .head{ text-align:center; padding-bottom:22px; border-bottom:1px solid var(--line); }
.article-detail .head h2{ font-size:26px; line-height:1.4; }
.article-detail .meta{ color:var(--text-light); font-size:14px; margin-top:12px; }
.article-detail .cat{ display:inline-block; padding:2px 12px; border-radius:12px; background:var(--teal-light); color:var(--teal-dark); font-size:13px; margin-right:8px; }
.article-detail .pic{ margin:24px 0; }
.article-detail .pic img{ width:100%; border-radius:12px; }
.article-detail .content{ color:var(--text-mid); line-height:2.1; text-align:justify; font-size:16px; }
.article-detail .content h4{ color:var(--teal-dark); font-size:18px; margin:22px 0 10px; border-left:4px solid var(--teal); padding-left:10px; }

/* ============ 导航栏里的「微信客服」按钮 ============ */
.header-wechat{
  display:flex; align-items:center; gap:6px;
  margin-right:6px; padding:7px 16px; border-radius:20px;
  background:#07c160; color:#fff; font-size:14px; cursor:pointer; border:none; transition:.2s;
}
.header-wechat:hover{ background:#06ad56; }
@media (max-width:992px){ .header-wechat{ display:none; } }  /* 手机下用悬浮按钮代替 */

/* 响应式：详情页在手机变单列 */
@media (max-width:900px){
  .expert-detail{ grid-template-columns:1fr; }
  .expert-detail .pic img{ max-width:320px; }
  .product-detail{ grid-template-columns:1fr; }
}
@media (max-width:768px){
  .page-banner{ height:260px; }
  .page-banner h1{ font-size:28px; }
  .page-banner p{ font-size:14px; }
}