@charset "utf-8";
/*
 * hpmakeover.css —— xianhp.com 线上模板「视觉补丁」
 *
 * 用法：在易优CMS 后台 模板 > PC 模板 > header.htm（或 index.htm）的 </head> 前加一行：
 *   <link rel="stylesheet" href="/template/pc/skin/css/hpmakeover.css">
 * 放在 style.css 之后加载即可生效，不动任何模板标签、不动 CMS 数据。
 * 上线前先在本地预览确认，确认后再清缓存（后台 更新缓存）。
 *
 * 只改外观，不改结构、不改内容。内容层面的 10 篇软文要另从后台删除。
 */

/* ========== 1. 导航：吸顶阴影 + 间距 ========== */
.nav-bar {
  position: sticky !important;
  top: 0;
  z-index: 900;
  background: #fff;
  box-shadow: 0 1px 0 rgba(16,40,72,.06);
  transition: box-shadow .25s;
}
.nav-bar:hover,
.nav-bar.scrolled { box-shadow: 0 4px 18px rgba(16,40,72,.10); }
.nav-logo .logo { max-height: 34px; width: auto; }
.nav-menu .menu li a {
  padding: 10px 15px !important;
  border-radius: 8px;
  font-size: 15px !important;
  color: #2c3542 !important;
  transition: background .18s, color .18s;
}
.nav-menu .menu li a:hover,
.nav-menu .menu li.on a { background: #e8f1fa !important; color: #0f4c81 !important; font-weight: 600; }
.nav-right a { border-radius: 999px !important; background: #ff7a00 !important; color: #fff !important; padding: 8px 18px !important; }
.nav-right a:hover { background: #e56a00 !important; }

/* ========== 2. 首屏：高度收一收，遮罩改成渐变，标题自适应 ========== */
.owl-banner .item { height: 58vh !important; min-height: 340px; max-height: 620px; }
.owl-banner .item:before {
  background: linear-gradient(90deg, rgba(6,26,48,.80) 0%, rgba(6,26,48,.50) 45%, rgba(6,26,48,.22) 100%) !important;
  opacity: 1 !important;
}
.owl-banner .item h1 {
  font-size: clamp(24px, 4.2vw, 46px) !important;
  line-height: 1.25 !important;
  font-weight: 800 !important;
  letter-spacing: .5px;
  text-shadow: 0 2px 14px rgba(0,0,0,.35);
}
.owl-banner .item .lead { font-size: clamp(14px, 2vw, 19px) !important; color: #dbe8f5 !important; }
.owl-banner .item .btn {
  background: #ff7a00 !important;
  border-color: #ff7a00 !important;
  border-radius: 999px !important;
  padding: 11px 30px !important;
  font-weight: 600;
}
.owl-banner .item .btn:hover { background: #e56a00 !important; border-color: #e56a00 !important; }
/* 页码点：拉长成小横条，比圆点更好点 */
.owl-banner .owl-pagination .owl-page span {
  width: 22px !important; height: 4px !important; border-radius: 2px !important;
  background: rgba(255,255,255,.45) !important;
}
.owl-banner .owl-pagination .owl-page.active span { background: #ff7a00 !important; width: 34px !important; }

@media (max-width: 767px) {
  .owl-banner .item { height: 46vh !important; min-height: 280px; }
}

/* ========== 3. 区块间距：100px 太散，收到 64px ========== */
.section { padding: 64px 0 !important; }
@media (max-width: 767px) { .section { padding: 40px 0 !important; } }
.section-title h3, .section h3 {
  font-size: clamp(22px, 3vw, 32px) !important;
  font-weight: 800 !important;
  letter-spacing: .5px;
}
.section-title small { font-size: 14px !important; color: #5b6472 !important; line-height: 1.8; }

/* ========== 4. 三栏 feature：修掉 h4 里塞整段文案造成的排版崩坏 ========== */
.features .item { padding: 30px 26px !important; }
.features .item h4 {
  font-size: 17px !important;
  font-weight: 700 !important;
  line-height: 1.5;
  margin-bottom: 10px !important;
  /* 原模板把一整段服务介绍塞进了 h4（home.html:113），这里限行防止撑破卡片 */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.features .item p { font-size: 14px !important; line-height: 1.8 !important; color: #4a5666 !important; }
.features .item i { font-size: 30px !important; margin-bottom: 14px !important; }

/* ========== 5. 价格卡：加圆角投影和悬停 ========== */
.pricing {
  background: #fff !important;
  border: 1px solid #e4e8ee !important;
  border-radius: 14px !important;
  padding: 28px 22px !important;
  transition: transform .2s, box-shadow .2s;
}
.pricing:hover { transform: translateY(-4px); box-shadow: 0 10px 30px rgba(16,40,72,.14); }
.pricing h5 { font-size: 18px !important; font-weight: 700 !important; }
.pricing h6 { font-size: 13px !important; color: #5b6472 !important; font-weight: 400 !important; min-height: 36px; }
.pricing .price .h1 { font-size: 38px !important; color: #0f4c81 !important; font-weight: 800 !important; }
.pricing .price .h5 { font-size: 16px !important; color: #0f4c81 !important; }
.pricing p { font-size: 14px !important; line-height: 1.8 !important; color: #4a5666 !important; }
.pricing .btn {
  display: inline-block;
  background: #ff7a00 !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 999px !important;
  padding: 11px 26px !important;
  font-weight: 600;
}
.pricing .btn:hover { background: #e56a00 !important; }

/* ========== 6. 案例轮播：统一比例，别被原图尺寸拉变形 ========== */
.owl-case .item img {
  width: 100% !important;
  height: 200px !important;
  object-fit: cover !important;
  border-radius: 12px;
}
@media (max-width: 767px) { .owl-case .item img { height: 150px !important; } }
.owl-case .item { border-radius: 12px; overflow: hidden; }
.owl-case .item .text h4 { font-size: 15px !important; font-weight: 600 !important; }

/* ========== 7. 资讯卡片：加边框和悬停 ========== */
.news-item {
  display: block !important;
  background: #fff;
  border: 1px solid #e4e8ee !important;
  border-radius: 12px;
  padding: 20px 18px !important;
  margin-bottom: 16px !important;
  transition: transform .2s, box-shadow .2s;
}
.news-item:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(16,40,72,.12); }
.news-item h4 { font-size: 16px !important; font-weight: 700 !important; line-height: 1.5; }
.news-item p {
  font-size: 13.5px !important; line-height: 1.75 !important; color: #5b6472 !important;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* ========== 8. 底部 CTA 条 ========== */
.space { background: #0f4c81 !important; color: #fff; padding: 34px 0 !important; }
.space .btn { background: #ff7a00 !important; border: 0 !important; border-radius: 999px !important; padding: 10px 26px !important; }

/* ========== 9. 页脚：拉开层次 ========== */
.footer { background: #0e2136 !important; color: #b9c8d8; padding: 44px 0 22px !important; }
.footer h6 { color: #fff !important; font-size: 15px !important; font-weight: 700 !important; margin-bottom: 12px !important; }
.footer a { color: #b9c8d8 !important; }
.footer a:hover { color: #fff !important; }
.footer p { color: #b9c8d8 !important; line-height: 1.9; }
.footer .logo img { max-height: 30px; filter: brightness(1.6); }
.footer hr { border-color: #22374f !important; }
.footer .btn { background: transparent !important; border: 1px solid #3d5a78 !important; color: #b9c8d8 !important; }

/* ========== 10. 友情链接区：压扁一点，别抢焦点 ========== */
.city { padding: 20px 0 !important; font-size: 13px !important; }
.city h3 { font-size: 13px !important; font-weight: 600 !important; color: #39414d !important; }
.flink_list a { color: #78838f !important; }
.flink_list a:hover { color: #0f4c81 !important; }

/* ========== 11. 右侧悬浮条：圆角化，别挡内容 ========== */
.cndns-right { right: 14px !important; }
.cndns-right-btn {
  border-radius: 12px !important;
  box-shadow: 0 2px 12px rgba(16,40,72,.12) !important;
  border: 1px solid #e4e8ee !important;
}
@media (max-width: 767px) { .cndns-right { display: none !important; } }

/* ========== 12. 图片通用：防止原图超大尺寸撑破布局 ========== */
.section img, .footer img, .city img { max-width: 100%; height: auto; }