/* =========================================================
   HoinWare 内页（非首页）科技蓝响应式覆盖层
   需与 css_new/tech_cn.css 一并引入（放在 templatemo_style.css 之后）
   ========================================================= */
:root{--blue:#0066cc;--blue-2:#0052a3;--blue-3:#1a7fff;--ink:#0f172a;--text:#1e293b;--muted:#64748b;--accent:#0066cc;--line:#e2e8f0;--soft:#f8fafc;--radius:16px;--panel:#fff}

/* 去掉旧深色底图，改为白底/科技蓝 */
body{background:#f4f8ff !important;color:var(--text) !important;min-width:0 !important;letter-spacing:.3px;line-height:1.8}
a{color:var(--blue)}

/* 旧顶部菜单已由 header.inc 取代 */
.menu{display:none !important}

/* 等宽容器自适应 */
.row{width:auto !important;max-width:1200px !important;margin:0 auto !important;padding:0 20px !important;float:none !important;position:static !important}
.container{max-width:1200px;margin:0 auto}

/* 旧 wrapper 过度阴影/固定高度去除，改白色卡片 */
.templatemo_homewrapper,.templatemo_topwrapper,.shadow,.gradient{box-shadow:none !important;border-radius:var(--radius)}
.dropdown-menu{box-shadow:none}

/* 内页标题统一为科技蓝 */
.templatemo_pageheader,.templatemo_pageheadersub,.templatemo_home_botsubheader,h2,h3,h4{color:var(--blue)}
.templatemo_who,.templatemo_about_text{background:transparent !important}

/* 图片响应式 */
img{max-width:100%;height:auto}

/* 表格/表单在移动端可滚动 */
@media (max-width:900px){
  .templatemo_homewrapper{margin-left:0 !important;margin-top:12px !important;width:100% !important;height:auto !important}
}

/* 移动端隐藏旧导航徽标、缩小行距 */
@media (max-width:767px){
  .col-sm-1,.col-sm-2,.col-sm-3,.col-sm-4,.col-sm-5,.col-sm-6,.col-sm-7,.col-sm-8,.col-sm-9,.col-sm-10,.col-sm-11,.col-sm-12{width:100% !important;float:none}
}
/* ---------- 资讯/产品列表：3 列响应式卡片网格 ---------- */
.padd-top20{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;max-width:1080px;margin:15px auto}
.news-featured{max-width:none !important;padding:0}
.news-page-wrap{max-width:none !important}
/* 分页/卡片父容器：取消旧模板 float 宽度收缩，分页才能占满全宽真正居中 */
.templatemo_home_bot{float:none !important;width:100% !important;margin-top:0 !important}
.news-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:0 20px 50px -30px rgba(13,71,161,.35);display:flex;flex-direction:column;transition:transform .3s,box-shadow .3s,border-color .3s}
.news-card:hover{transform:translateY(-6px);box-shadow:0 26px 54px -26px rgba(13,71,161,.45);border-color:rgba(13,71,161,.35)}
.news-card-img{width:100%;height:190px;object-fit:cover;display:block;border-bottom:1px solid var(--line)}
.news-card-body{padding:15px 18px 20px;display:flex;flex-direction:column;gap:5px;text-align:left}
.news-card-desc{color:var(--muted);font-size:13px;line-height:1.8;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.news-page{color:var(--text) !important}
.news-page a{color:var(--blue);font-weight:600}
@media (max-width:900px){ .padd-top20{grid-template-columns:repeat(2,1fr)} }
@media (max-width:620px){ .padd-top20{grid-template-columns:1fr} }

/* ---------- 主页 WEYOOTA 深浅混搭主题兼容（index.aspx body.home-dark） ----------
   内页层 body 强制浅色底且带 !important，这里针对主页再盖一层：
   白色导航/卡片 + 浅灰内容区；其余样式通过 CSS 变量自动适配。 */
body.home-dark{background:#f8fafc !important;color:#1e293b !important}
body.home-dark a{color:#0066cc}

/* =========================================================
   全站内页统一为 index.aspx 视觉（样式覆盖层）
   旧模板类（templatemo_*）→ 白卡 / 居中标题 / 统一按钮
   ========================================================= */

/* ---------- 旧容器：取消固定宽高（含内联样式），避免移动端溢出 ---------- */
.templatemo_home_bot,.templatemo_home_mid,.templatemo_homewrapper,.templatemo_topwrapper,.templatemo_hometop_bg{
  width:auto !important;max-width:100% !important;height:auto !important;min-height:0 !important;
}
.templatemo_home_bot.shadow:not(.news-featured-wrap),.templatemo_home_mid.shadow{background:transparent !important;border:none !important;box-shadow:none !important}
/* 资讯/产品网格容器：去掉内联白底与旧间距，融入浅灰背景 */
.templatemo_home_bot .gradient.padd-top20,.templatemo_home_mid .gradient.padd-top20,.gradient.padd-top20{
  background:transparent !important;border:none !important;padding:0 !important;
}

/* ---------- 正文卡片：与首页 feature-card 同款（白卡+圆角+蓝影，hover 增强） ---------- */
.templatemo_who{
  background:rgba(255,255,255,.9) !important;
  border:1px solid var(--line) !important;border-radius:var(--radius);
  padding:34px 40px !important;margin-bottom:26px;
  box-shadow:inset 0 1px 0 #fff,0 18px 46px -34px rgba(13,71,161,.4);
  overflow:hidden;
}
@supports (backdrop-filter:blur(10px)){
  .templatemo_who{background:rgba(255,255,255,.7);backdrop-filter:blur(16px) saturate(1.5)}
}
.templatemo_who:hover{border-color:rgba(13,71,161,.4)}

/* ---------- 标题：居中 + 蓝色渐变下划线（对齐首页 section-title） ---------- */
.templatemo_about_title{
  display:block;width:max-content;max-width:100%;margin:8px auto 24px !important;
  text-align:center !important;border-left:none !important;
  color:var(--ink) !important;font-weight:800 !important;
  font-size:26px;letter-spacing:.5px;line-height:1.4;position:relative;padding-bottom:14px;
}
.templatemo_about_title::after{content:"";position:absolute;left:50%;bottom:0;transform:translateX(-50%);width:56px;height:3px;border-radius:3px;background:linear-gradient(90deg,#0066cc,#1a7fff)}
.templatemo_about_title+hr{border-color:rgba(160,190,230,.5) !important}

/* 旧“更多产品”图片按钮 → 圆角胶囊链接 */
.templatemo_who p[align="right"]{text-align:right !important;margin:0 0 8px}
.templatemo_who p[align="right"] a{display:inline-flex;align-items:center;gap:6px;font-size:13px;height:30px;padding:0 14px;
  border:1px solid #d5e4f7;border-radius:999px;color:#0066cc;background:#eef4fc;text-decoration:none;transition:.25s}
.templatemo_who p[align="right"] a:hover{background:#0066cc;color:#fff;border-color:#0066cc}
.templatemo_who p[align="right"] a img{display:none}
.templatemo_who p[align="right"] a::after{content:"产品中心 ›"}

/* ---------- 正文文字：统一字号、行高；图片/视频自适应并加质感边框 ---------- */
.templatemo_about_text{color:var(--text) !important;line-height:2 !important;margin:10px auto !important;max-width:none}
.templatemo_about_text p{margin:0 0 12px}
.templatemo_about_text img{filter:saturate(1.06) contrast(1.02);transition:transform .45s ease,box-shadow .45s ease,filter .35s ease}
.templatemo_about_text img:hover{transform:scale(1.02);filter:saturate(1.14);box-shadow:0 22px 44px -24px rgba(13,71,161,.55)}
.templatemo_about_text iframe{max-width:100%;display:block;margin:0 auto;border:1px solid var(--line);border-radius:10px;box-shadow:var(--shadow)}

/* ---------- 特点/疑问小图块（templatemo_about_text_image）→ 居中排列卡片 ---------- */
#menu-container .templatemo_about_text_image{max-width:none !important;display:inline-block;vertical-align:top;text-align:center;margin:10px 14px !important}
.templatemo_about_text_image img{border:1px solid var(--line);border-radius:10px;box-shadow:0 12px 26px -18px rgba(13,71,161,.4);filter:saturate(1.06);transition:.3s}
.templatemo_about_text_image:hover img{transform:scale(1.04);filter:saturate(1.14);box-shadow:0 18px 34px -18px rgba(13,71,161,.55)}
.templatemo_about_text_image .clear{display:none !important}
.templatemo_about_text_image .name{color:var(--ink);font-weight:700;font-size:13.5px;text-align:center;margin-top:8px}
.templatemo_about_text_image .name a{color:var(--ink)}
.templatemo_about_text_image .name a:hover{color:#0066cc}
.templatemo_about_text_image .post{color:var(--muted);font-size:12px;text-align:center;line-height:1.7}

/* ---------- 成功案例大图（SuccessCase.aspx）→ 与 about.aspx 同款圆角卡片图 ---------- */
.success-case-img{display:block;margin:0 auto;max-width:100%;height:auto;
  border:1px solid var(--line);border-radius:10px;box-shadow:0 12px 26px -18px rgba(13,71,161,.4);
  filter:saturate(1.06);transition:transform .45s ease,box-shadow .45s ease,filter .35s ease}
.success-case-img:hover{transform:scale(1.02);filter:saturate(1.14);box-shadow:0 22px 44px -24px rgba(13,71,161,.55)}

/* ---------- 统一主按钮：与 news_list.aspx「全部资讯」胶囊按钮同款 ---------- */
.case-more a,.templatemo_who a.btn.btn-primary{
  display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:600;
  padding:8px 18px;border-radius:999px;cursor:pointer;text-decoration:none;line-height:1.5;
  background:#fff;color:var(--text) !important;
  border:1px solid var(--line) !important;
  box-shadow:none !important;transition:color .25s,background .25s,border-color .25s,box-shadow .25s}
.case-more a:hover,.templatemo_who a.btn.btn-primary:hover{
  color:#fff !important;background:var(--blue);border-color:var(--blue);
  box-shadow:0 10px 22px -14px rgba(43,102,184,.6);transform:none}
.case-more a svg{width:14px;height:14px}

/* ---------- goods_show / product3 旧模板残留容器补全 ---------- */
.main,.zerogrid{width:100% !important;max-width:1200px;margin:0 auto;box-sizing:border-box;float:none !important}
.zerogrid .wrapper{padding:0 12px}
.solution-page h2{color:var(--ink)}
.goods-body h3{color:var(--ink);text-align:center;margin:18px 0}
.product3-show-box{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
  box-shadow:0 18px 46px -34px rgba(13,71,161,.4);margin-bottom:22px;transition:transform .3s,box-shadow .3s}
.product3-show-box:hover{transform:translateY(-4px);box-shadow:0 26px 54px -30px rgba(13,71,161,.5)}
.product3-show-img img{border-radius:10px;border:1px solid var(--line)}

/* ---------- 响应式 ---------- */
@media (max-width:767px){
  .templatemo_who{padding:22px 16px !important;margin-bottom:18px}
  .templatemo_about_title{font-size:21px}
  .templatemo_about_text{padding:0 2px}
  .templatemo_about_text iframe{height:auto;min-height:220px}
  #menu-container .templatemo_about_text_image{margin:8px 8px !important}
}

/* ---------- news_list.aspx：去掉「全部资讯」按钮下方卡片顶部横线，分类按钮居中对齐 ---------- */
.news-featured-wrap{border-top:none !important}
.news-top-cats{justify-content:center}

/* ---------- Solution.aspx / about.aspx：内容图片 hover 微微放大 ---------- */
.templatemo_home_bot img,.templatemo_who img{
  transition:transform .4s ease,box-shadow .4s ease,filter .35s ease;will-change:transform}
.templatemo_home_bot img:hover,.templatemo_who img:hover{
  transform:scale(1.03);box-shadow:0 14px 30px -18px rgba(13,71,161,.5);
  filter:saturate(1.06) contrast(1.02)}

/* ---------- product*.aspx 内页：视频 iframe 与内容表格防移动端溢出 ---------- */
.templatemo_who iframe{max-width:100%;display:block;margin:0 auto}
.templatemo_who table{width:auto !important;max-width:100% !important}