/* ============================================================
   qtkg-look v3 — 现代科技风视觉层（仅视觉，不改任何布局属性）
   参考 qtkg.com 设计 token:
   --bg:#fafaff --ink:#1c2141 --muted:#737990 --blue:#5262ed
   --violet:#8c5aeb --line:#e8e9f3 --radius:18px
   ============================================================ */

:root{
  --q-bg:#fafaff;
  --q-ink:#1c2141;
  --q-muted:#737990;
  --q-blue:#5262ed;
  --q-violet:#8c5aeb;
  --q-line:#e8e9f3;
  --q-radius:18px;
  --q-grad:linear-gradient(110deg,#5867f2,#6e58eb);
  --q-grad-soft:linear-gradient(145deg,#f2f0ff,#e6eaff);
}

/* ---------- 1. 全局底色与字体 ---------- */
html body,
html body.met-navfixed{
  background-color:var(--q-bg) !important;
  background-image:
    radial-gradient(900px 520px at 10% -6%,rgba(82,98,237,.055),transparent 70%),
    radial-gradient(820px 520px at 94% 16%,rgba(140,90,235,.045),transparent 70%) !important;
  color:var(--q-ink) !important;
  font-family:Manrope,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,-apple-system,BlinkMacSystemFont,sans-serif !important;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
html body ::selection{background:#5262ed;color:#fff;}
html body ::-webkit-scrollbar{width:9px;}
html body ::-webkit-scrollbar-thumb{background:#d9d7f5;border-radius:9px;}
html body ::-webkit-scrollbar-thumb:hover{background:#b9b4ef;}

/* ---------- 2. 顶部导航：毛玻璃吸顶 + 极淡描边 ---------- */
html body .met-head.navbar-fixed-top{
  background:rgba(250,250,255,.86) !important;
  -webkit-backdrop-filter:blur(18px) saturate(165%);
  backdrop-filter:blur(18px) saturate(165%);
  border-bottom:1px solid rgba(232,233,243,.9) !important;
  box-shadow:0 8px 30px rgba(28,33,65,.06) !important;
}
html body .head_nav_met_21_11_1.navbar-default,
html body .navbar.navbar-default.head_nav_met_21_11_1{
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
}
html body .head_nav_met_21_11_1 .lh-header{
  background:transparent !important;
  box-shadow:none !important;
  border:0 !important;
}
html body .head_nav_met_21_11_1 .lh-logo img{max-height:46px;width:auto;}

/* 菜单文字层级：中文 15/600，英文小标签 10px 大字距 */
html body .lh-header-nav li > a,
html body .lh-header-nav li > a h2{
  color:#39455c !important;
  font-family:Manrope,"PingFang SC","Microsoft YaHei",system-ui,sans-serif !important;
  font-weight:600 !important;
  letter-spacing:-.02em !important;
  transition:color .25s ease;
}
html body .lh-header-nav li > a h2{font-size:15px !important;}
html body .lh-header-nav li > a h3{
  color:#a3a9bd !important;
  font-size:10px !important;
  font-weight:600 !important;
  letter-spacing:.14em !important;
  text-transform:uppercase;
}
html body .lh-header-nav li.active > a h2,
html body .lh-header-nav li:hover > a h2,
html body .lh-header-nav li.active > a h3{color:var(--q-blue) !important;}
/* 菜单下方装饰线：qtkg 渐变短线 */
html body .lh-header-nav li > a > span{
  background:var(--q-grad) !important;
  border-radius:4px !important;
  transition:opacity .28s ease;
}
html body .lh-header-nav li:not(.active) > a > span{opacity:.35;}
html body .lh-header-nav li.active > a > span,
html body .lh-header-nav li:hover > a > span{opacity:1;}

/* ---------- 3. 区块节奏：极浅紫渐变交替 ---------- */
html body .met-index-body.bgcolor{
  background:linear-gradient(180deg,#fafaff 0%,#f5f4ff 100%) !important;
}
/* 保险：老模板的入场动画常因时序不触发导致整块空白，统一改为始终可见 */
html body [data-plugin="appear"]{
  opacity:1 !important;
  visibility:visible !important;
  transform:none !important;
}

/* ---------- 4. 区块标题：负字距 + 渐变短线 ---------- */
html body .lh-about-h2,
html body .lh-wapAbout-h2,
html body .lh-vision-h2,
html body .lh-vision-h3{
  color:var(--q-ink) !important;
  font-family:Manrope,"PingFang SC","Microsoft YaHei",system-ui,sans-serif !important;
  font-weight:650 !important;
  letter-spacing:-.045em !important;
}
html body [class*="about_list"] .lh-section > .lh-about-h2::after,
html body [class*="service_list"] .lh-section > .lh-about-h2::after,
html body [class*="product_list"] .lh-section > .lh-about-h2::after,
html body [class*="news_list"] .lh-section > .lh-about-h2::after{
  content:"";
  display:inline-block;
  width:36px;height:3px;
  margin-left:16px;
  vertical-align:middle;
  border-radius:3px;
  background:var(--q-grad);
}
/* 序号 01/02：渐变文字 */
html body .lh-vision-h2 b.lh-fonts{
  background:var(--q-grad) !important;
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  font-weight:700 !important;
}

/* ---------- 5. 按钮：qtkg .btn.primary 渐变胶囊 + 悬停上浮 ---------- */
html body .lh-more,
html body .lh-vision-btn a,
html body .lh-map-btn a,
html body .lh-delicay-btn a{
  background:var(--q-grad) !important;
  color:#fff !important;
  border:1px solid transparent !important;
  border-radius:10px !important;
  box-shadow:0 6px 18px rgba(98,98,235,.18) !important;
  font-family:Manrope,"PingFang SC",system-ui,sans-serif !important;
  font-weight:600 !important;
  letter-spacing:.08em !important;
  text-transform:uppercase;
  transition:transform .25s ease,box-shadow .25s ease,background .25s ease !important;
}
html body .lh-more:hover,
html body .lh-vision-btn a:hover,
html body .lh-map-btn a:hover,
html body .lh-delicay-btn a:hover{
  transform:translateY(-3px) !important;
  box-shadow:0 11px 28px rgba(98,98,235,.32) !important;
  color:#fff !important;
}
/* 按钮右侧的方块箭头改成透明，融入渐变 */
html body .lh-more i{
  background:transparent !important;
  color:#fff !important;
  border-radius:8px;
  transition:transform .25s ease;
}
html body .lh-more:hover i{transform:translateX(3px);}

/* ---------- 6. 卡片：18px 圆角 + 半透明白 + 柔和阴影 ---------- */
/* 解决方案列表 */
html body .lh-business-item li,
html body .lh-delicay-item li,
html body .lh-delicay-bd li{
  border:1px solid var(--q-line) !important;
  border-radius:var(--q-radius) !important;
  box-shadow:0 8px 28px rgba(28,33,65,.06) !important;
  overflow:hidden;
  transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease,background .3s ease;
}
html body .lh-business-item li{background:rgba(255,255,255,.84) !important;}
html body .lh-business-item li:hover,
html body .lh-delicay-item li:hover,
html body .lh-delicay-bd li:hover{
  transform:translateY(-6px);
  border-color:#c9c4f7 !important;
  box-shadow:0 18px 44px rgba(82,98,237,.15) !important;
}
html body .lh-business-item li:hover{background:#fff !important;}

/* ---------- 7. 图片：圆角 + 柔和阴影 + 悬停微放大 ---------- */
html body .lh-business .img img,
html body .lh-about .img img,
html body .lh-delicacy .img img,
html body .lh-footer-gz li img,
html body .met-index-body .img img{
  border-radius:14px !important;
  box-shadow:0 8px 24px rgba(28,33,65,.07) !important;
  transition:transform .4s ease,box-shadow .4s ease;
}
html body .met-index-body .img:hover img{
  transform:scale(1.045);
  box-shadow:0 14px 34px rgba(82,98,237,.16) !important;
}
/* Banner 大图不加圆角，仅做轻微色彩净化 */
html body .banner_met_21_4_2 .cover-image{
  filter:saturate(1.04) brightness(1.015);
}

/* ---------- 8. 图标与细节 ---------- */
html body .lh-business-item li > i.icon,
html body .met-index-body .icon.fa{
  color:var(--q-blue) !important;
  transition:transform .3s ease;
}
html body .lh-business-item li:hover > i.icon{transform:translateY(-3px) scale(1.08);}
html body .lh-map-cont .lh-fonts,
html body .lh-footer .lh-fonts{
  font-weight:650 !important;
  letter-spacing:-.02em !important;
}

/* ---------- 9. 页脚「联系我们」：干净浅色玻璃卡片 ---------- */
html body [class*="contact_list"] .lh-footer{
  background:linear-gradient(160deg,#ffffff 0%,#f5f3ff 100%) !important;
}
/* 老模板右侧 50% 的蓝色装饰图，去掉后与全站浅色统一 */
html body [class*="contact_list"] .lh-footer::before{
  display:none !important;
}
/* 父容器的蓝色背景图同样压柔 */
html body [class*="contact_list"].bgpic{
  background-image:
    linear-gradient(100deg,rgba(250,250,255,.92),rgba(240,238,255,.86)),
    url('/upload/202401/1706082031.png') !important;
  background-size:cover !important;
  background-position:center center !important;
}
/* 标题装饰白线在浅底上改为淡紫 */
html body [class*="contact_list"] .lh-about-h2::after,
html body [class*="contact_list"] .lh-footer-l h3::after{
  background:rgba(82,98,237,.25) !important;
}
/* 分享圆钮在浅底上改为主色描边 */
html body [class*="contact_list"] .lh-footer-share a{
  color:var(--q-blue) !important;
  border-color:rgba(82,98,237,.45) !important;
}
html body [class*="contact_list"] .lh-footer-l{
  background:rgba(255,255,255,.94) !important;
  border:1px solid var(--q-line) !important;
  border-radius:var(--q-radius) !important;
  box-shadow:0 14px 40px rgba(28,33,65,.08) !important;
}
html body [class*="contact_list"] .lh-footer .lh-about-h2,
html body [class*="contact_list"] .lh-footer .lh-footer-l h2{
  color:var(--q-ink) !important;
}
html body .lh-footer-item li.item{border-bottom:1px dashed rgba(82,98,237,.16) !important;}
html body .lh-footer-item li.item > span{
  color:var(--q-blue) !important;
  font-weight:600 !important;
  letter-spacing:.02em;
}
html body .lh-footer-gz li img{
  border:1px solid var(--q-line) !important;
  box-shadow:0 8px 22px rgba(28,33,65,.08) !important;
}
html body .lh-footer-gz li h2.weixin{
  color:var(--q-muted) !important;
  font-size:13px !important;
  font-weight:600 !important;
  letter-spacing:.02em;
}

/* ---------- 10. 返回顶部 / 通用小组件 ---------- */
html body .cd-top,
html body .back_top_met_36_1_42{
  background:var(--q-grad) !important;
  color:#fff !important;
  border-radius:14px !important;
  box-shadow:0 8px 22px rgba(98,98,235,.3) !important;
  transition:transform .25s ease,box-shadow .25s ease;
}
html body .cd-top:hover{transform:translateY(-3px);box-shadow:0 12px 30px rgba(98,98,235,.4) !important;}
html body .alert.met-web{
  border-radius:12px !important;
  border:1px solid var(--q-line) !important;
  background:#fff !important;
}

/* ---------- 11. 移除老模板的粗紫色装饰框，换成 qtkg 浅色玻璃卡片 ---------- */
/* 原模板用 4 个 10px 粗的 #5262ed 色条围成方框，是观感最差的元素 */
html body [class*="about_list"] .lh-about-main::before,
html body [class*="about_list"] .lh-about-main::after,
html body [class*="about_list"] .lh-about-main .line::before,
html body [class*="about_list"] .lh-about-main .line::after,
html body [class*="product_list"] .lh-about-main::before,
html body [class*="product_list"] .lh-about-main::after,
html body [class*="product_list"] .lh-about-main .line::before,
html body [class*="product_list"] .lh-about-main .line::after{
  display:none !important;
}
html body [class*="about_list"] .lh-about-main{
  background:rgba(255,255,255,.94) !important;
  border:1px solid var(--q-line) !important;
  border-radius:var(--q-radius) !important;
  box-shadow:0 14px 40px rgba(28,33,65,.07) !important;
}
/* 区块内标题装饰横线改为极淡渐变，不再刺眼 */
html body .lh-about-main .text h2::after{
  background:var(--q-grad) !important;
  opacity:.35 !important;
  height:2px !important;
}
html body .lh-about-main .text h3::after{
  background:var(--q-grad) !important;
  height:2px !important;
  border-radius:2px;
}

/* ---------- 12. 首屏 Banner 柔化：降低老式蓝色大图的刺眼感 ---------- */
html body .banner_met_21_4_2 .cover-image{
  filter:saturate(.78) brightness(1.045);
}
/* 半透明浅色蒙层（加在 slide 上，不改父级定位、不影响点击） */
html body .banner_met_21_4_2 .swiper-slide::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(100deg,rgba(250,250,255,.20),rgba(140,90,235,.07));
  pointer-events:none;
}
/* 轮播圆点：qtkg 极淡描边 + 主色激活 */
html body .banner_met_21_4_2 .swiper-hd li i{
  border-color:rgba(255,255,255,.7) !important;
  color:#fff !important;
  transition:background .25s ease,transform .25s ease;
}
html body .banner_met_21_4_2 .swiper-hd li.active i{
  background:var(--q-grad) !important;
  border-color:transparent !important;
}

/* ---------- 13. 行业案例大卡：让配图真正铺满竖卡（原模板 100% 拉伸导致大片灰底） ---------- */
html body .lh-delicay-bd li{
  background-color:#ecebff !important;
  background-size:cover !important;
  background-position:center center !important;
  background-repeat:no-repeat !important;
}
/* 遮罩上半透明露出图片，下半渐深保证白色标题可读 */
html body .lh-delicay-bd li .bgopacity{
  background:linear-gradient(180deg,rgba(28,33,65,0) 32%,rgba(28,33,65,.74) 100%) !important;
}
/* 序号与标题：白色加粗、字距收紧（深色遮罩上保持清晰） */
html body .lh-delicay-bd li .text h2{
  color:#fff !important;
  font-weight:700 !important;
  letter-spacing:.04em;
}
html body .lh-delicay-bd li .text h3{font-weight:600 !important;}

/* ---------- 14. 产品服务大蓝底区块：压柔成 qtkg 浅紫白，文字改深色 ---------- */
html body .product_list_met_21_18_41.bgpic{
  background-image:
    linear-gradient(100deg,rgba(250,250,255,.88),rgba(237,235,255,.78)),
    url('/upload/202401/1706080859.png') !important;
  background-size:cover !important;
  background-position:center center !important;
  background-repeat:no-repeat !important;
}
html body .product_list_met_21_18_41 h2,
html body .product_list_met_21_18_41 .lh-about-h2,
html body .product_list_met_21_18_41 .lh-wapAbout-h2,
html body .product_list_met_21_18_41 .lh-vision-h2 a,
html body .product_list_met_21_18_41 .lh-vision-h3,
html body .product_list_met_21_18_41 p.desc{
  color:var(--q-ink) !important;
}
html body .product_list_met_21_18_41 .lh-vision-h3{color:#5b6172 !important;}
html body .product_list_met_21_18_41 .lh-about-h2::after,
html body .product_list_met_21_18_41 .lh-wapAbout-h2::after{
  background:rgba(82,98,237,.28) !important;
}
html body .product_list_met_21_18_41 .lh-vision-h2 b::after{
  background:var(--q-grad) !important;
}
/* 图片拼贴容器：qtkg 白卡圆角 */
html body .product_list_met_21_18_41 .lh-vision-tab{
  border-radius:var(--q-radius) !important;
  box-shadow:0 14px 40px rgba(28,33,65,.08) !important;
}
html body .product_list_met_21_18_41 .lh-vision-bd li::before{
  background:rgba(255,255,255,.92) !important;
}

/* ---------- 15. 移动端微调（仅视觉） ---------- */
@media (max-width:991px){
  html body .lh-header-nav li > a h2{font-size:14px !important;}
  html body .met-head.navbar-fixed-top{box-shadow:0 6px 20px rgba(28,33,65,.07) !important;}
}