/**
 * ============================================================
 * ULTRA UI — 宏宇电脑有限公司 · 前台超级美化样式
 * 设计参考：华为、腾讯、字节跳动等顶级企业官网风格
 * 仅做增强，不破坏原始 style.css / less.css 布局结构
 * ============================================================
 */

/* ==============================
   全局变量 & 色彩系统
   ============================== */
:root {
  /* 主色调 - 科技红蓝渐变体系 */
  --ultra-primary: #e4392a;
  --ultra-primary-dark: #c0271b;
  --ultra-primary-light: #ff6b5e;
  --ultra-primary-glow: rgba(228, 57, 42, 0.18);

  /* 科技蓝辅助色 */
  --ultra-blue: #1967d2;
  --ultra-blue-light: #4a90e2;
  --ultra-cyan: #00b4d8;

  /* 中性色 — 浅色体系 */
  --ultra-dark: #1e1e1e;
  --ultra-gray-800: #2a2a2a;
  --ultra-gray-700: #444;
  --ultra-gray-600: #666;
  --ultra-gray-500: #888;
  --ultra-gray-400: #aaa;
  --ultra-gray-300: #ccc;
  --ultra-gray-200: #e2e5ea;
  --ultra-gray-100: #f0f2f5;
  --ultra-gray-50: #f8f9fb;
  --ultra-white: #ffffff;

  /* 暖调浅色背景 */
  --ultra-bg-warm: #faf7f5;
  --ultra-bg-warm-alt: #f5f0ee;
  --ultra-bg-hero: linear-gradient(135deg, #f0ecea 0%, #faf7f5 50%, #f5f0ee 100%);
  --ultra-bg-section-alt: linear-gradient(180deg, #f5f2f0 0%, #ffffff 100%);
  --ultra-bg-dark: linear-gradient(135deg, #f5f2f0 0%, #faf8f7 50%, #f2edeb 100%);

  /* 阴影 */
  --ultra-shadow-xs: 0 1px 3px rgba(0,0,0,0.06);
  --ultra-shadow-sm: 0 2px 8px rgba(0,0,0,0.08);
  --ultra-shadow-md: 0 4px 20px rgba(0,0,0,0.10);
  --ultra-shadow-lg: 0 8px 40px rgba(0,0,0,0.14);
  --ultra-shadow-xl: 0 16px 60px rgba(0,0,0,0.18);
  --ultra-shadow-red: 0 4px 20px rgba(228,57,42,0.30);
  --ultra-shadow-blue: 0 4px 20px rgba(25,103,210,0.25);

  /* 圆角 */
  --ultra-r-xs: 4px;
  --ultra-r-sm: 8px;
  --ultra-r-md: 12px;
  --ultra-r-lg: 16px;
  --ultra-r-xl: 24px;
  --ultra-r-full: 9999px;

  /* 动画 */
  --ultra-ease: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ultra-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ultra-trans: all 0.3s var(--ultra-ease);
  --ultra-trans-fast: all 0.15s var(--ultra-ease);

  /* 字体 */
  --ultra-font: -apple-system, BlinkMacSystemFont, "PingFang SC", "HarmonyOS Sans", "Microsoft YaHei", "Helvetica Neue", sans-serif;
  --ultra-font-mono: "JetBrains Mono", "Fira Code", "Cascadia Code", monospace;
}

/* ==============================
   全局重置增强
   ============================== */
/* 注意：不使用全局 box-sizing: border-box！
   保留 EyouCMS 原生的 content-box 布局，仅对美化区域使用 border-box */
#hd, #hd *, #fd, #fd *, #m-hd, #m-hd *,
.ul-icon-i, .ul-icon-i *,
.ul-case-i, .ul-case-i *,
.ul-news-i, .ul-news-i *,
.row4, .row4 *,
.contact-form, .contact-form *,
.sub-nav, .sub-nav *,
.article, .article *,
.pagelist, .pagelist *,
.content-wrap, .content-wrap *,
.about-info,
#side, #side *,
.fd-back-top,
.ultra-bb, .ultra-bb * { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--ultra-font) !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: var(--ultra-gray-700) !important;
  background: var(--ultra-white) !important;
  overflow-x: hidden;
}

/* 选中文字样式 */
::selection {
  background: var(--ultra-primary-glow);
  color: var(--ultra-primary);
}

/* 滚动条美化 */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--ultra-gray-100); }
::-webkit-scrollbar-thumb { background: linear-gradient(180deg, var(--ultra-primary), var(--ultra-primary-dark)); border-radius: var(--ultra-r-full); }
::-webkit-scrollbar-thumb:hover { background: var(--ultra-primary-dark); }

/* ==============================
   导航栏 - 玻璃态磨砂设计
   ============================== */
#hd {
  height: 72px !important;
  background: rgba(255,255,255,0.95) !important;
  backdrop-filter: blur(20px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
  box-shadow: 0 1px 0 rgba(0,0,0,0.08), 0 2px 16px rgba(0,0,0,0.06) !important;
  border-bottom: 1px solid rgba(255,255,255,0.8) !important;
  transition: var(--ultra-trans) !important;
}

#hd.scrolled {
  box-shadow: 0 4px 24px rgba(0,0,0,0.12) !important;
}

#hd .wp {
  height: 72px !important;
  display: flex !important;
  align-items: center !important;
}

#hd .logo {
  height: 72px !important;
  display: flex !important;
  align-items: center !important;
  margin-right: 48px !important;
}

#hd .logo a {
  display: flex !important;
  align-items: center !important;
  height: 72px !important;
  line-height: normal !important;
  text-decoration: none !important;
}

#hd .logo a img {
  max-height: 44px !important;
  width: auto !important;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1)) !important;
  transition: var(--ultra-trans) !important;
}

#hd .logo a:hover img {
  transform: scale(1.03) !important;
  filter: drop-shadow(0 4px 8px rgba(228,57,42,0.2)) !important;
}

/* 导航菜单 */
#nav {
  flex: 1 !important;
}

#nav ul {
  display: flex !important;
  align-items: center !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  height: 72px !important;
}

#nav ul li {
  float: none !important;
  display: flex !important;
  align-items: center !important;
  height: 72px !important;
  line-height: 72px !important;
  width: auto !important;
  margin-right: 4px !important;
  position: relative !important;
}

#nav ul li a {
  display: flex !important;
  align-items: center !important;
  padding: 0 16px !important;
  height: 72px !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  color: var(--ultra-gray-700) !important;
  text-decoration: none !important;
  border-bottom: none !important;
  border-radius: var(--ultra-r-sm) !important;
  transition: var(--ultra-trans-fast) !important;
  letter-spacing: 0.3px !important;
  white-space: nowrap !important;
  position: relative !important;
}

#nav ul li a::after {
  content: '' !important;
  position: absolute !important;
  bottom: 12px !important;
  left: 50% !important;
  width: 0 !important;
  height: 2px !important;
  background: linear-gradient(90deg, var(--ultra-primary), var(--ultra-primary-light)) !important;
  border-radius: var(--ultra-r-full) !important;
  transform: translateX(-50%) !important;
  transition: width 0.25s var(--ultra-ease) !important;
}

#nav ul li a:hover {
  color: var(--ultra-primary) !important;
  background: rgba(228,57,42,0.06) !important;
  border-bottom: none !important;
}

#nav ul li a:hover::after,
#nav ul li a.mycur::after {
  width: calc(100% - 20px) !important;
}

#nav ul li a.mycur {
  color: var(--ultra-primary) !important;
  font-weight: 600 !important;
  background: rgba(228,57,42,0.06) !important;
}

/* 电话区域 */
#hd .tel {
  background: none !important;
  padding-left: 0 !important;
  line-height: 72px !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  color: var(--ultra-primary) !important;
  font-size: 17px !important;
  font-weight: 700 !important;
  letter-spacing: 0.5px !important;
}

#hd .tel::before {
  content: '📞' !important;
  font-size: 16px !important;
}

/* body 顶部留白适配 */
#bd {
  padding-top: 72px !important;
}

/* ==============================
   移动端导航 - 现代化重设计
   ============================== */
#m-hd {
  background: rgba(255,255,255,0.97) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  box-shadow: 0 2px 16px rgba(0,0,0,0.10) !important;
  height: 56px !important;
  line-height: 56px !important;
  border-bottom: 1px solid var(--ultra-gray-200) !important;
}

#m-hd img {
  height: 36px !important;
  padding: 0 !important;
  margin-top: 10px !important;
  margin-left: 15px !important;
}

.m-trigger {
  background: none !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 5px !important;
  padding: 10px !important;
  top: 0 !important;
  right: 8px !important;
  height: 56px !important;
  width: 44px !important;
}

.m-trigger span {
  display: block !important;
  width: 22px !important;
  height: 2px !important;
  background: var(--ultra-gray-700) !important;
  border-radius: 2px !important;
  transition: var(--ultra-trans) !important;
}

.m-trigger.active span:nth-child(1) {
  transform: rotate(45deg) translate(5px, 5px) !important;
}
.m-trigger.active span:nth-child(2) {
  opacity: 0 !important;
  transform: scaleX(0) !important;
}
.m-trigger.active span:nth-child(3) {
  transform: rotate(-45deg) translate(5px, -5px) !important;
}

.m-nav {
  background: rgba(255,255,255,0.98) !important;
  backdrop-filter: blur(20px) !important;
  border-top: 1px solid var(--ultra-gray-200) !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.12) !important;
  top: 56px !important;
}

.m-nav li {
  border-bottom: 1px solid var(--ultra-gray-100) !important;
}

.m-nav a {
  color: var(--ultra-gray-700) !important;
  font-size: 15px !important;
  height: 48px !important;
  line-height: 48px !important;
  padding: 0 20px !important;
  font-weight: 500 !important;
  transition: var(--ultra-trans-fast) !important;
}

.m-nav a:hover,
.m-nav a.mycur {
  color: var(--ultra-primary) !important;
  background: rgba(228,57,42,0.05) !important;
  padding-left: 28px !important;
}

/* ==============================
   Banner - 全屏沉浸式体验
   ============================== */
#banner {
  position: relative !important;
  overflow: hidden !important;
}

#banner::after {
  content: '' !important;
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 80px !important;
  background: linear-gradient(to top, rgba(255,255,255,0.6) 0%, transparent 100%) !important;
  z-index: 5 !important;
  pointer-events: none !important;
}

#banner .flexslider {
  background: none !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

#banner .flexslider .slides img {
  width: 100% !important;
  object-fit: cover !important;
  display: block !important;
  vertical-align: middle !important;
  filter: brightness(1.02) contrast(1.05) !important;
}

/* Banner文字 — 红色渐变，醒目干净 */
#banner .slides li .ban-txt {
  z-index: 10 !important;
}

#banner .slides li .ban-txt h2 {
  font-weight: 700 !important;
  font-size: 40px !important;
  letter-spacing: 1px !important;
  background: linear-gradient(135deg, #e4392a 0%, #c0392b 50%, #ff6b5e 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  text-shadow: none !important;
}

#banner .slides li .ban-txt h3 {
  font-weight: 400 !important;
  font-size: 18px !important;
  letter-spacing: 2px !important;
  background: linear-gradient(135deg, #ff6b5e 0%, #e4392a 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  text-shadow: none !important;
}

/* 轮播左右箭头 — 大号圆钮带 SVG 箭头图标 */
#banner .flex-direction-nav a {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 56px !important;
  height: 56px !important;
  margin-top: -28px !important;
  opacity: 0.85 !important;
  background: rgba(255,255,255,0.9) !important;
  background-image: none !important;
  border: none !important;
  border-radius: 50% !important;
  color: transparent !important;
  text-shadow: none !important;
  overflow: visible !important;
  text-indent: 0 !important;
  line-height: 56px !important;
  font-size: 0 !important;
  transition: all 0.35s cubic-bezier(0.25, 0.8, 0.25, 1.2) !important;
  box-shadow: 0 4px 16px rgba(0,0,0,0.12) !important;
}

#banner .flex-direction-nav a::before {
  content: '' !important;
  display: block !important;
  width: 22px !important;
  height: 22px !important;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e4392a' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='15,4 7,12 15,20'/%3E%3C/svg%3E") no-repeat center / contain !important;
  transition: inherit !important;
}

#banner .flex-direction-nav .flex-prev {
  left: 30px !important;
  margin-left: 0 !important;
}

#banner .flex-direction-nav .flex-next {
  right: 30px !important;
  margin-right: 0 !important;
}

#banner .flex-direction-nav .flex-next::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e4392a' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9,4 17,12 9,20'/%3E%3C/svg%3E") !important;
}

/* hover — 红色填充 + 白色箭头 + 放大 + 光晕 */
#banner .flex-direction-nav a:hover {
  opacity: 1 !important;
  background: linear-gradient(135deg, var(--ultra-primary), var(--ultra-primary-dark)) !important;
  box-shadow: 0 8px 32px rgba(228,57,42,0.4), 0 0 0 10px rgba(228,57,42,0.10) !important;
  transform: scale(1.15) !important;
}

#banner .flex-direction-nav a:hover::before {
  filter: brightness(0) invert(1) !important;
}

/* 禁用状态 */
#banner .flex-direction-nav .flex-disabled {
  opacity: 0.15 !important;
  pointer-events: none !important;
}

/* 轮播控制按钮 */
#banner .flex-control-paging li a {
  width: 32px !important;
  height: 4px !important;
  border-radius: 2px !important;
  background: rgba(255,255,255,0.5) !important;
  transition: var(--ultra-trans) !important;
}

#banner .flex-control-paging li a.flex-active {
  background: var(--ultra-primary) !important;
  width: 48px !important;
}

#banner .flex-control-nav {
  bottom: 140px !important;
  z-index: 10 !important;
}

/* ==============================
   区块标题 - 精致双语标题
   ============================== */
.tit-i {
  text-align: center !important;
  padding: 60px 0 40px !important;
  position: relative !important;
}

.tit-i::before {
  content: '' !important;
  display: inline-block !important;
  width: 40px !important;
  height: 4px !important;
  background: linear-gradient(90deg, var(--ultra-primary), var(--ultra-primary-light)) !important;
  border-radius: 2px !important;
  margin-bottom: 20px !important;
  display: block !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.tit-i h3 {
  font-size: 32px !important;
  font-weight: 800 !important;
  color: var(--ultra-dark) !important;
  letter-spacing: -0.5px !important;
  line-height: 1.2 !important;
  margin-bottom: 12px !important;
  position: relative !important;
}

.tit-i h5 {
  font-size: 13px !important;
  color: var(--ultra-gray-400) !important;
  font-weight: 400 !important;
  letter-spacing: 4px !important;
  text-transform: uppercase !important;
}

.tit-i h5 span {
  color: var(--ultra-primary) !important;
  font-weight: 600 !important;
}

.tit-i::after {
  content: '' !important;
  display: none !important;
}

/* 浅色背景的标题 */
.tit-i-1 h3 {
  color: var(--ultra-dark) !important;
}

.tit-i-1 h5 {
  color: var(--ultra-gray-500) !important;
}

/* ==============================
   服务区域 - 3D卡片设计
   ============================== */
.row1 {
  background: var(--ultra-bg-section-alt) !important;
  padding-bottom: 60px !important;
}

.ul-icon-i {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 20px !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.ul-icon-i li {
  float: none !important;
  width: 100% !important;
  padding: 0 !important;
  padding-bottom: 0 !important;
  overflow: visible !important;
}

.ul-icon-i li .pad {
  background: var(--ultra-white) !important;
  border-radius: var(--ultra-r-lg) !important;
  padding: 28px 20px !important;
  box-shadow: var(--ultra-shadow-md) !important;
  border: 1px solid var(--ultra-gray-100) !important;
  transition: var(--ultra-trans) !important;
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  position: relative !important;
  overflow: hidden !important;
  z-index: 1 !important;
}

.ul-icon-i li .pad::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 3px !important;
  background: linear-gradient(90deg, var(--ultra-primary), var(--ultra-primary-light)) !important;
  border-radius: var(--ultra-r-lg) var(--ultra-r-lg) 0 0 !important;
  transform: scaleX(0) !important;
  transition: transform 0.3s var(--ultra-ease) !important;
}

.ul-icon-i li .pad:hover {
  transform: translateY(-8px) !important;
  box-shadow: 0 12px 36px rgba(228,57,42,0.12) !important;
  border-color: rgba(228,57,42,0.10) !important;
}

.ul-icon-i li .pad:hover::before {
  transform: scaleX(1) !important;
}

/* 服务图标 — 统一圆角方形 + 对应 SVG 图标 */
.ul-icon-i li a span {
  width: 68px !important;
  height: 68px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: linear-gradient(135deg, rgba(228,57,42,0.10), rgba(228,57,42,0.04)) !important;
  border-radius: 14px !important;
  margin-bottom: 18px !important;
  position: relative !important;
  transition: var(--ultra-trans) !important;
  box-shadow: 0 2px 12px rgba(228,57,42,0.08) !important;
  border: 1.5px solid rgba(228,57,42,0.12) !important;
  font-size: 0 !important;
  color: transparent !important;
  overflow: hidden !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 34px !important;
}
.ul-icon-i li .pad:hover a span {
  transform: scale(1.10) !important;
  box-shadow: 0 6px 20px rgba(228,57,42,0.20) !important;
  border-color: rgba(228,57,42,0.30) !important;
  background-color: var(--ultra-primary) !important;
}
/* hover 时切换为白色图标 */
.ul-icon-i li.li1 .pad:hover a span {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M23 7l-5 4v-4a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2h11a2 2 0 002-2v-4l5 4z'/%3E%3Ccircle cx='8' cy='11' r='2'/%3E%3Cpath d='M1 4v-1'/%3E%3C/svg%3E") !important;
}
.ul-icon-i li.li2 .pad:hover a span {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='5' width='20' height='14' rx='2'/%3E%3Cline x1='2' y1='10' x2='22' y2='10'/%3E%3Cline x1='6' y1='15' x2='6' y2='15.01'/%3E%3Cline x1='10' y1='15' x2='10' y2='15.01'/%3E%3Cline x1='14' y1='15' x2='14' y2='15.01'/%3E%3Cline x1='18' y1='15' x2='18' y2='15.01'/%3E%3C/svg%3E") !important;
}
.ul-icon-i li.li3 .pad:hover a span {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='3' width='20' height='14' rx='2' ry='2'/%3E%3Cline x1='2' y1='20' x2='22' y2='20'/%3E%3Cline x1='6' y1='20' x2='6' y2='20'/%3E%3Cline x1='18' y1='20' x2='18' y2='20'/%3E%3Cline x1='12' y1='20' x2='12' y2='20'/%3E%3C/svg%3E") !important;
}
.ul-icon-i li.li4 .pad:hover a span {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='3' width='20' height='15' rx='2' ry='2'/%3E%3Cline x1='8' y1='21' x2='16' y2='21'/%3E%3Cline x1='12' y1='17' x2='12' y2='21'/%3E%3Cpolyline points='6 8 9 10 6 12'/%3E%3Cpolyline points='18 8 15 10 18 12'/%3E%3C/svg%3E") !important;
}

/* 监控安防 — 摄像头图标 */
.ul-icon-i li.li1 a span {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e4392a' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M23 7l-5 4v-4a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2h11a2 2 0 002-2v-4l5 4z'/%3E%3Ccircle cx='8' cy='11' r='2'/%3E%3Cpath d='M1 4v-1'/%3E%3C/svg%3E") !important;
}

/* 收银系统 — POS/收银机图标 */
.ul-icon-i li.li2 a span {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e4392a' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='5' width='20' height='14' rx='2'/%3E%3Cline x1='2' y1='10' x2='22' y2='10'/%3E%3Cline x1='6' y1='15' x2='6' y2='15.01'/%3E%3Cline x1='10' y1='15' x2='10' y2='15.01'/%3E%3Cline x1='14' y1='15' x2='14' y2='15.01'/%3E%3Cline x1='18' y1='15' x2='18' y2='15.01'/%3E%3C/svg%3E") !important;
}

/* 电脑销售 — 笔记本电脑图标 */
.ul-icon-i li.li3 a span {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e4392a' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='3' width='20' height='14' rx='2' ry='2'/%3E%3Cline x1='2' y1='20' x2='22' y2='20'/%3E%3Cline x1='6' y1='20' x2='6' y2='20'/%3E%3Cline x1='18' y1='20' x2='18' y2='20'/%3E%3Cline x1='12' y1='20' x2='12' y2='20'/%3E%3C/svg%3E") !important;
}

/* LED拼接屏 — 显示器图标 */
.ul-icon-i li.li4 a span {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e4392a' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='3' width='20' height='15' rx='2' ry='2'/%3E%3Cline x1='8' y1='21' x2='16' y2='21'/%3E%3Cline x1='12' y1='17' x2='12' y2='21'/%3E%3Cpolyline points='6 8 9 10 6 12'/%3E%3Cpolyline points='18 8 15 10 18 12'/%3E%3C/svg%3E") !important;
}

.ul-icon-i li h3 {
  font-size: 16px !important;
  font-weight: 700 !important;
  color: var(--ultra-dark) !important;
  margin-bottom: 10px !important;
  text-align: center !important;
  line-height: 1.3 !important;
}

.ul-icon-i li em {
  width: 30px !important;
  height: 2px !important;
  background: linear-gradient(90deg, var(--ultra-primary), var(--ultra-primary-light)) !important;
  border: none !important;
  border-radius: 1px !important;
  margin-bottom: 16px !important;
  transition: width 0.3s var(--ultra-ease) !important;
}

.ul-icon-i li .pad:hover em {
  width: 50px !important;
}

.ul-icon-i li p {
  font-size: 13px !important;
  line-height: 1.7 !important;
  color: var(--ultra-gray-500) !important;
  text-align: left !important;
  flex: 1 !important;
  overflow: hidden !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 4 !important;
  -webkit-box-orient: vertical !important;
}

.ul-icon-i li .pad .pic {
  display: none !important;
}

/* ==============================
   案例区 - Masonry网格
   ============================== */
.row2 {
  background: linear-gradient(180deg, #faf8f7 0%, #f5f2f0 100%) !important;
  padding-bottom: 60px !important;
}

.ul-case-i {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 12px !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.ul-case-i li {
  float: none !important;
  width: 100% !important;
  padding: 0 !important;
  margin-bottom: 0 !important;
  overflow: hidden !important;
  border-radius: var(--ultra-r-md) !important;
}

.ul-case-i li a {
  display: block !important;
  position: relative !important;
  overflow: hidden !important;
  border-radius: var(--ultra-r-md) !important;
  box-shadow: var(--ultra-shadow-sm) !important;
  transition: var(--ultra-trans) !important;
}

.ul-case-i li a::before {
  content: '' !important;
  display: block !important;
  padding-top: 75% !important;
}

.ul-case-i li .pic {
  position: absolute !important;
  inset: 0 !important;
}

.ul-case-i li .pic img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  transition: transform 0.5s var(--ultra-ease) !important;
}

.ul-case-i li a:hover {
  box-shadow: var(--ultra-shadow-xl) !important;
  transform: translateY(-4px) !important;
}

.ul-case-i li a:hover .pic img {
  transform: scale(1.08) !important;
}

.ul-case-i li a .hover {
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(to top, rgba(228,57,42,0.9) 0%, rgba(0,0,0,0.3) 60%, transparent 100%) !important;
  color: #fff !important;
  top: 0 !important;
  opacity: 0 !important;
  transition: opacity 0.3s var(--ultra-ease) !important;
  display: flex !important;
  align-items: flex-end !important;
  padding: 20px 16px !important;
}

.ul-case-i li a:hover .hover {
  opacity: 1 !important;
  top: 0 !important;
}

.ul-case-i li .hover b {
  display: none !important;
}

.ul-case-i li .hover .txt {
  display: block !important;
  width: 100% !important;
}

.ul-case-i li .hover .txt img {
  display: none !important;
}

.ul-case-i li .hover .txt h3 {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #fff !important;
  margin: 0 !important;
  line-height: 1.4 !important;
  text-shadow: 0 1px 4px rgba(0,0,0,0.4) !important;
}

/* ============================================
   全站"更多"按钮统一样式
   ============================================ */
.more-i,
.news-more {
  text-align: center !important;
  padding: 32px 0 !important;
}

.more-i a,
.news-more a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 12px 32px !important;
  width: auto !important;
  height: auto !important;
  min-width: unset !important;
  min-height: unset !important;
  background: var(--ultra-white) !important;
  color: var(--ultra-gray-700) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 1.5 !important;
  border: 2px solid var(--ultra-gray-200) !important;
  border-radius: var(--ultra-r-full) !important;
  box-shadow: var(--ultra-shadow-sm) !important;
  transition: var(--ultra-trans) !important;
  text-decoration: none !important;
  letter-spacing: 0.5px !important;
  box-sizing: border-box !important;
}

.more-i a::after,
.news-more a::after {
  content: '→' !important;
  font-size: 16px !important;
  transition: transform 0.2s var(--ultra-ease) !important;
}

.more-i a:hover,
.news-more a:hover {
  background: var(--ultra-primary) !important;
  color: #fff !important;
  border-color: var(--ultra-primary) !important;
  transform: scale(1.04) !important;
  box-shadow: var(--ultra-shadow-red) !important;
}

.more-i a:hover::after,
.news-more a:hover::after {
  transform: translateX(4px) !important;
}

/* ==============================
   软件下载/新闻区 - 暖调深色卡片
   ============================== */
.row3.news-bg {
  background: linear-gradient(160deg, #faf7f5 0%, #f5f0ed 40%, #faf6f4 100%) !important;
  padding-bottom: 20px !important;
  position: relative !important;
  overflow: hidden !important;
  border-top: 1px solid rgba(228,57,42,0.08) !important;
  border-bottom: 1px solid rgba(228,57,42,0.08) !important;
}

.row3.news-bg::before {
  content: '' !important;
  position: absolute !important;
  top: -50% !important;
  left: -50% !important;
  width: 200% !important;
  height: 200% !important;
  background: radial-gradient(ellipse at 30% 50%, rgba(228,57,42,0.03) 0%, transparent 60%),
              radial-gradient(ellipse at 70% 50%, rgba(228,57,42,0.02) 0%, transparent 60%) !important;
  pointer-events: none !important;
}

.tit-i-1 {
  position: relative !important;
  z-index: 1 !important;
}

.ul-news-i {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 20px !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
  margin-left: 0 !important;
  position: relative !important;
  z-index: 1 !important;
}

.ul-news-i li {
  float: none !important;
  width: 100% !important;
  background: var(--ultra-white) !important;
  border: 1px solid var(--ultra-gray-200) !important;
  border-radius: var(--ultra-r-lg) !important;
  overflow: hidden !important;
  box-shadow: var(--ultra-shadow-sm) !important;
  min-height: auto !important;
  transition: var(--ultra-trans) !important;
  position: relative !important;
}

/* 顶部色条 */
.ul-news-i li::before {
  content: '' !important;
  display: block !important;
  width: 100% !important;
  height: 4px !important;
  background: linear-gradient(90deg, var(--ultra-primary), var(--ultra-primary-dark)) !important;
  transition: height 0.3s var(--ultra-ease) !important;
}

.ul-news-i li:hover::before {
  height: 6px !important;
}

.ul-news-i li:hover {
  background: var(--ultra-white) !important;
  border-color: rgba(228,57,42,0.25) !important;
  transform: translateY(-6px) !important;
  box-shadow: 0 16px 40px rgba(0,0,0,0.08), 0 0 0 1px rgba(228,57,42,0.08) !important;
}

.ul-news-i li .pad {
  padding: 32px 24px 24px 24px !important;
}

.ul-news-i li .txt {
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 180px !important;
}

/* 图标 — 每张卡片不同 */
.ul-news-i li:nth-child(1) .txt::before { content: '💻' !important; }
.ul-news-i li:nth-child(2) .txt::before { content: '📊' !important; }
.ul-news-i li:nth-child(3) .txt::before { content: '🎨' !important; }
.ul-news-i li:nth-child(4) .txt::before { content: '🛠️' !important; }
.ul-news-i li:nth-child(5) .txt::before { content: '🔒' !important; }
.ul-news-i li:nth-child(6) .txt::before { content: '🌐' !important; }
.ul-news-i li:nth-child(7) .txt::before { content: '💾' !important; }
.ul-news-i li:nth-child(8) .txt::before { content: '🎮' !important; }

/* 图标公共样式 */
.ul-news-i li .txt::before {
  display: block !important;
  font-size: 36px !important;
  line-height: 1 !important;
  margin-bottom: 16px !important;
  opacity: 0.5 !important;
  transition: all 0.3s var(--ultra-ease) !important;
}

.ul-news-i li:hover .txt::before {
  opacity: 0.85 !important;
  transform: scale(1.1) !important;
}

.ul-news-i li .txt h3,
.ul-news-i li .txt p {
  display: none !important;
}

.ul-news-i li .txt span.chname {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  color: var(--ultra-dark) !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  padding: 0 8px !important;
  margin-bottom: 0 !important;
  line-height: 1.3 !important;
  min-height: unset !important;
  width: 100% !important;
}

.ul-news-i li .txt span.chname a,
.ul-news-i li .txt span.chname a:link,
.ul-news-i li .txt span.chname a:visited {
  color: var(--ultra-dark) !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  line-height: 1.3 !important;
  transition: color 0.2s !important;
}

.ul-news-i li .txt span.chname a:hover {
  color: var(--ultra-primary) !important;
}

.ul-news-i li h3 a {
  font-size: 16px !important;
  font-weight: 600 !important;
  color: var(--ultra-dark) !important;
  line-height: 1.5 !important;
  padding: 0 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  margin-bottom: 12px !important;
  min-height: 48px !important;
  transition: color 0.2s !important;
}

.ul-news-i li h3 a:hover {
  color: var(--ultra-primary) !important;
}

.ul-news-i li p {
  font-size: 13px !important;
  color: var(--ultra-gray-500) !important;
  line-height: 1.7 !important;
  margin-bottom: 16px !important;
}

.ul-news-i li .more {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 36px !important;
  height: 36px !important;
  background: linear-gradient(135deg, var(--ultra-primary), var(--ultra-primary-dark)) !important;
  border-radius: 50% !important;
  margin-top: auto !important;
  transition: var(--ultra-trans) !important;
  color: #fff !important;
  font-size: 18px !important;
  box-shadow: 0 2px 10px rgba(228,57,42,0.25) !important;
}

.ul-news-i li .more::after {
  content: '→' !important;
  font-style: normal !important;
  font-weight: 700 !important;
}

.ul-news-i li .more:hover {
  transform: translateX(6px) scale(1.08) !important;
  box-shadow: 0 4px 18px rgba(228,57,42,0.40) !important;
}

.ul-news-i li:hover .more {
  background: linear-gradient(135deg, var(--ultra-primary), var(--ultra-primary-dark)) !important;
  color: #fff !important;
  transform: translateX(4px) !important;
  box-shadow: 0 6px 24px rgba(228,57,42,0.35) !important;
}

/* 隐藏 .hover 图片覆盖层 — 不需要背景图 */
.ul-news-i li .hover {
  display: none !important;
}


/* ==============================
   联系我们区域 - 现代卡片布局
   ============================== */
.row4 {
  padding: 60px 0 80px !important;
  background: linear-gradient(180deg, #ffffff 0%, #faf7f5 100%) !important;
}

.row4 .wp {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 0 50px !important;
  align-items: stretch !important;
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 0 30px !important;
}

/* 确保联系我们标题独占整行 */
.row4 .wp .tit-i {
  width: 100% !important;
  flex-basis: 100% !important;
  margin-bottom: 0 !important;
  padding-bottom: 40px !important;
}

.contact-l {
  width: 38% !important;
  float: none !important;
  flex-shrink: 0 !important;
  display: flex !important;
  flex-direction: column !important;
}

.contact-r {
  flex: 1 !important;
  float: none !important;
  width: auto !important;
  min-width: 340px !important;
  display: flex !important;
  flex-direction: column !important;
}

.ul-contact {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 15px !important;
}

.ul-contact li {
  display: flex !important;
  align-items: center !important;
  gap: 18px !important;
  padding: 22px 24px !important;
  margin-bottom: 0 !important;
  flex: 1 !important;
  background: var(--ultra-gray-50) !important;
  border-radius: var(--ultra-r-md) !important;
  border: 1px solid var(--ultra-gray-100) !important;
  background-position: unset !important;
  padding-left: 24px !important;
  transition: var(--ultra-trans) !important;
  line-height: 1.8 !important;
  font-size: 15px !important;
  color: var(--ultra-gray-700) !important;
}

.ul-contact li:hover {
  background: rgba(228,57,42,0.04) !important;
  border-color: rgba(228,57,42,0.15) !important;
  transform: translateX(4px) !important;
}

.ul-contact li::before {
  content: '' !important;
  width: 52px !important;
  height: 52px !important;
  min-width: 52px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}

.ul-contact li.li1::before {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white' width='24' height='24'%3E%3Cpath d='M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z'/%3E%3C/svg%3E") no-repeat center / 24px,
    linear-gradient(135deg, var(--ultra-primary), var(--ultra-primary-light)) !important;
}

.ul-contact li.li2::before {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white' width='24' height='24'%3E%3Cpath d='M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z'/%3E%3C/svg%3E") no-repeat center / 24px,
    linear-gradient(135deg, var(--ultra-primary), var(--ultra-primary-light)) !important;
}

.ul-contact li.li3::before {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white' width='24' height='24'%3E%3Cpath d='M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z'/%3E%3C/svg%3E") no-repeat center / 24px,
    linear-gradient(135deg, var(--ultra-primary), var(--ultra-primary-light)) !important;
}

/* 联系信息文字样式 */
.ul-contact li.li1,
.ul-contact li.li2,
.ul-contact li.li3 {
  word-break: break-all !important;
}
.ul-contact li a {
  color: var(--ultra-gray-700) !important;
  text-decoration: none !important;
  transition: color 0.2s !important;
  line-height: 1.8 !important;
}
.ul-contact li a:hover {
  color: var(--ultra-primary) !important;
}

/* 电话号码分组排列 */
.contact-phones {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  width: 100% !important;
}
.phone-item {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: 15px !important;
  line-height: 1.6 !important;
}
.phone-label {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 48px !important;
  padding: 2px 10px !important;
  background: linear-gradient(135deg, rgba(228,57,42,0.10), rgba(228,57,42,0.04)) !important;
  border-radius: var(--ultra-r-xs) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: var(--ultra-primary) !important;
  letter-spacing: 0.5px !important;
  flex-shrink: 0 !important;
}
.phone-item a {
  font-size: 15px !important;
  font-weight: 500 !important;
  font-family: var(--ultra-font-mono) !important;
  letter-spacing: 0.3px !important;
}

/* 联系表单 */
.contact-form {
  background: var(--ultra-gray-50) !important;
  border-radius: var(--ultra-r-lg) !important;
  padding: 36px !important;
  border: 1px solid var(--ultra-gray-200) !important;
  width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  box-sizing: border-box !important;
  gap: 16px !important;
}

.contact-form .inp {
  border-radius: var(--ultra-r-sm) !important;
  border: 1.5px solid var(--ultra-gray-200) !important;
  padding: 12px 16px !important;
  font-size: 14px !important;
  height: auto !important;
  background: var(--ultra-white) !important;
  transition: var(--ultra-trans-fast) !important;
  font-family: var(--ultra-font) !important;
  color: var(--ultra-gray-700) !important;
}

.contact-form .inp:focus {
  border-color: var(--ultra-primary) !important;
  box-shadow: 0 0 0 3px var(--ultra-primary-glow) !important;
  outline: none !important;
}

.contact-form .inp.l {
  width: calc(50% - 8px) !important;
  margin-right: 16px !important;
}

.contact-form .inp.r {
  width: calc(50% - 8px) !important;
}

.contact-form textarea {
  border-radius: var(--ultra-r-sm) !important;
  border: 1.5px solid var(--ultra-gray-200) !important;
  padding: 12px 16px !important;
  font-size: 14px !important;
  height: auto !important;
  min-height: 140px !important;
  flex: 1 !important;
  resize: vertical !important;
  background: var(--ultra-white) !important;
  font-family: var(--ultra-font) !important;
  width: 100% !important;
  transition: var(--ultra-trans-fast) !important;
  margin-bottom: 16px !important;
}

.contact-form textarea:focus {
  border-color: var(--ultra-primary) !important;
  box-shadow: 0 0 0 3px var(--ultra-primary-glow) !important;
  outline: none !important;
}

.contact-form .sub {
  width: 100% !important;
  height: 48px !important;
  background: linear-gradient(135deg, var(--ultra-primary), var(--ultra-primary-dark)) !important;
  border: none !important;
  border-radius: var(--ultra-r-sm) !important;
  color: #fff !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  letter-spacing: 1px !important;
  transition: var(--ultra-trans) !important;
  box-shadow: var(--ultra-shadow-red) !important;
  font-family: var(--ultra-font) !important;
}

.contact-form .sub:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 30px rgba(228,57,42,0.4) !important;
}

.contact-form .sub:active {
  transform: translateY(0) !important;
}

/* ==============================
   页脚 - 深色设计 (底部栏目深色更清晰)
   ============================== */
#fd {
  background: linear-gradient(160deg, #1a1a2e 0%, #16213e 40%, #0f3460 100%) !important;
  position: relative !important;
  overflow: hidden !important;
  padding-bottom: 0 !important;
}

#fd::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 4px !important;
  background: linear-gradient(90deg, var(--ultra-primary), #c0392b, var(--ultra-primary-light), #f39c12) !important;
  z-index: 2 !important;
}

#fd::after {
  content: '' !important;
  position: absolute !important;
  top: -200px !important;
  right: -100px !important;
  width: 600px !important;
  height: 600px !important;
  background: radial-gradient(circle, rgba(228,57,42,0.08) 0%, rgba(25,103,210,0.05) 40%, transparent 70%) !important;
  pointer-events: none !important;
}

.fd-divider {
  display: none !important;
}

.fd-top {
  display: grid !important;
  grid-template-columns: 1.2fr 1.6fr 0.8fr !important;
  gap: 40px !important;
  padding: 64px 20px 48px !important;
  max-width: 1200px !important;
  margin: 0 auto !important;
  position: relative !important;
  z-index: 1 !important;
}

#fd dl dt {
  color: var(--ultra-white) !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  letter-spacing: 1px !important;
  margin-bottom: 24px !important;
  padding-bottom: 14px !important;
  position: relative !important;
}

#fd dl dt::after {
  content: '' !important;
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  width: 32px !important;
  height: 2px !important;
  background: linear-gradient(90deg, var(--ultra-primary), var(--ultra-primary-light)) !important;
  border-radius: 1px !important;
}

#fd .ul-fd {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  padding: 0 !important;
  list-style: none !important;
  margin: 0 !important;
}

#fd .ul-fd li a {
  color: rgba(255,255,255,0.65) !important;
  font-size: 14px !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 0 !important;
  transition: var(--ultra-trans-fast) !important;
  padding-left: 0 !important;
}

#fd .ul-fd li a::before {
  content: '\203A' !important;
  font-size: 18px !important;
  color: var(--ultra-primary) !important;
  display: inline-block !important;
  width: 16px !important;
  text-align: center !important;
  flex-shrink: 0 !important;
  margin-right: 4px !important;
  opacity: 0.45 !important;
  transform: none !important;
  transition: var(--ultra-trans-fast) !important;
}

#fd .ul-fd li a:hover {
  color: var(--ultra-primary) !important;
  transform: translateX(6px) !important;
  text-decoration: none !important;
}

#fd .ul-fd li a:hover::before {
  opacity: 1 !important;
  color: var(--ultra-primary-light) !important;
  transform: translateX(0) !important;
}

/* 联系方式列 */
.ul-fd-contact li {
  display: flex !important;
  align-items: baseline !important;
  margin-bottom: 12px !important;
  font-size: 14px !important;
  color: rgba(255,255,255,0.65) !important;
  gap: 8px !important;
  padding-left: 0 !important;
  line-height: 1.6 !important;
}
.ul-fd-contact li.fd-li-addr {
  flex-wrap: nowrap !important;
  white-space: normal !important;
}

.ul-fd-contact li::before {
  opacity: 0.6 !important;
  flex-shrink: 0 !important;
  margin-top: 3px !important;
  width: 20px !important;
  min-width: 20px !important;
  max-width: 20px !important;
  text-align: center !important;
  display: inline-block !important;
}

.ul-fd-contact li span {
  color: var(--ultra-white) !important;
  font-weight: 600 !important;
  white-space: nowrap !important;
  min-width: 44px !important;
  flex-shrink: 0 !important;
}

.ul-fd-contact li span + *,
.ul-fd-contact li span ~ a {
  flex: 1 !important;
  word-break: break-all !important;
}

.ul-fd-contact li a {
  color: rgba(255,255,255,0.65) !important;
  transition: color 0.2s !important;
}

.ul-fd-contact li a:hover {
  color: var(--ultra-primary) !important;
}

/* 二维码 */
.fd-qr-box {
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  border-radius: var(--ultra-r-md) !important;
  padding: 20px 16px !important;
  text-align: center !important;
  transition: var(--ultra-trans) !important;
  max-width: 140px !important;
}

.fd-qr-box:hover {
  background: rgba(255,255,255,0.10) !important;
  transform: translateY(-4px) !important;
  border-color: rgba(228,57,42,0.35) !important;
  box-shadow: 0 8px 24px rgba(228,57,42,0.12) !important;
}

.fd-qr-box img {
  width: 100px !important;
  height: 100px !important;
  border-radius: var(--ultra-r-sm) !important;
  display: block !important;
  margin: 0 auto 10px !important;
}

.fd-qr-box p {
  color: rgba(255,255,255,0.55) !important;
  font-size: 12px !important;
  margin: 0 !important;
}

/* 版权栏 */
.fd-copy {
  background: rgba(0,0,0,0.3) !important;
  border-top: 1px solid rgba(255,255,255,0.08) !important;
  padding: 18px 20px !important;
  position: relative !important;
  z-index: 1 !important;
}

.fd-copy-inner {
  max-width: 1200px !important;
  margin: 0 auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  color: rgba(255,255,255,0.45) !important;
  font-size: 13px !important;
}

.fd-copy-inner a {
  color: rgba(255,255,255,0.55) !important;
  transition: color 0.2s !important;
}

.fd-copy-inner a:hover {
  color: var(--ultra-primary-light) !important;
}

.fd-copy-divider {
  color: rgba(255,255,255,0.2) !important;
  margin: 0 6px !important;
}

/* ==============================
   悬浮侧边栏 - 现代化重设计
   ============================== */
.side {
  right: 0 !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  height: auto !important;
  width: auto !important;
}

.side ul li {
  width: 52px !important;
  height: 52px !important;
  margin-bottom: 4px !important;
}

.side ul li .sidebox {
  width: 52px !important;
  height: 52px !important;
  border-radius: 12px 0 0 12px !important;
  background: var(--ultra-white) !important;
  box-shadow: -4px 4px 16px rgba(0,0,0,0.08) !important;
  overflow: hidden !important;
  font-size: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: var(--ultra-trans) !important;
  border: 1px solid var(--ultra-gray-200) !important;
  border-right: none !important;
}

.side ul li a:hover .sidebox {
  width: 200px !important;
  background: linear-gradient(135deg, var(--ultra-primary), var(--ultra-primary-dark)) !important;
  font-size: 13px !important;
  color: #fff !important;
  border-color: var(--ultra-primary) !important;
}

/* 回到顶部 */
.fd-back-top {
  position: fixed !important;
  bottom: 32px !important;
  right: 32px !important;
  width: 48px !important;
  height: 48px !important;
  border-radius: 12px !important;
  background: linear-gradient(135deg, var(--ultra-primary), var(--ultra-primary-dark)) !important;
  color: var(--ultra-white) !important;
  box-shadow: var(--ultra-shadow-red) !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: var(--ultra-trans) !important;
  z-index: 9999 !important;
}

.fd-back-top:hover {
  transform: translateY(-4px) scale(1.05) !important;
  box-shadow: 0 12px 30px rgba(228,57,42,0.5) !important;
}

/* ==============================
   内页 Banner
   ============================== */
#ban-in {
  position: relative !important;
  overflow: hidden !important;
  height: 280px !important;
  background-color: #f0ebe8 !important;
  display: flex !important;
  align-items: flex-end !important;
  background-size: cover !important;
  background-position: center !important;
}

#ban-in::after {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(to bottom, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0.2) 100%) !important;
}
#ban-in .ban-bg {
  background: linear-gradient(to bottom, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0.2) 100%) !important;
  height: 100% !important;
}

/* 面包屑导航 */
.cur {
  background: var(--ultra-gray-50) !important;
  border-bottom: 1px solid var(--ultra-gray-200) !important;
  padding: 0 !important;
  font-size: 13px !important;
  color: var(--ultra-gray-500) !important;
  line-height: 48px !important;
}

.cur .wp {
  display: flex !important;
  align-items: center !important;
}

.cur a {
  color: var(--ultra-gray-500) !important;
  text-decoration: none !important;
  transition: color 0.2s !important;
}

.cur a:hover {
  color: var(--ultra-primary) !important;
}

/* 分页 */
.pages {
  text-align: center !important;
  margin: 40px 0 60px !important;
}

.pages a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 36px !important;
  height: 36px !important;
  background: var(--ultra-white) !important;
  border: 1.5px solid var(--ultra-gray-200) !important;
  border-radius: var(--ultra-r-sm) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: var(--ultra-gray-600) !important;
  margin: 0 3px !important;
  transition: var(--ultra-trans-fast) !important;
  text-decoration: none !important;
}

.pages a:hover,
.pages .page-on {
  background: var(--ultra-primary) !important;
  border-color: var(--ultra-primary) !important;
  color: var(--ultra-white) !important;
  box-shadow: var(--ultra-shadow-red) !important;
}

/* 案例/文章列表 */
.ul-case li .txt {
  background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, transparent 100%) !important;
}

.ul-case li .txt:hover {
  background: linear-gradient(to top, rgba(228,57,42,0.9) 0%, rgba(0,0,0,0.4) 100%) !important;
}

.ul-list li .bor {
  border-radius: var(--ultra-r-md) !important;
  overflow: hidden !important;
  transition: var(--ultra-trans) !important;
  border: 1px solid var(--ultra-gray-100) !important;
}

.ul-list li:hover .bor {
  border-color: rgba(228,57,42,0.2) !important;
  box-shadow: var(--ultra-shadow-md) !important;
  transform: translateY(-4px) !important;
}

.ul-list li .txt {
  padding: 16px 16px 8px !important;
}

.ul-list li .more {
  display: flex !important;
  align-items: center !important;
  padding: 10px 16px !important;
  background: var(--ultra-gray-50) !important;
}

/* 子导航 */
.sub-nav {
  background: var(--ultra-white) !important;
  border-bottom: 2px solid var(--ultra-gray-100) !important;
  padding: 16px 0 !important;
  margin-bottom: 40px !important;
  margin-top: -16px !important;
}

.sub-nav ul li a {
  padding: 8px 20px !important;
  border-radius: var(--ultra-r-full) !important;
  background: var(--ultra-gray-100) !important;
  color: var(--ultra-gray-600) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  display: inline-flex !important;
  align-items: center !important;
  transition: var(--ultra-trans-fast) !important;
  text-decoration: none !important;
}

.sub-nav ul li a:hover,
.sub-nav ul li.on a,
.sub-nav ul li.mycur a {
  background: var(--ultra-primary) !important;
  color: var(--ultra-white) !important;
  box-shadow: var(--ultra-shadow-red) !important;
}

/* 文章详情 */
.article h1 {
  font-size: 28px !important;
  font-weight: 800 !important;
  color: var(--ultra-dark) !important;
  line-height: 1.4 !important;
  margin-bottom: 16px !important;
}

.article .time {
  color: var(--ultra-gray-400) !important;
  font-size: 13px !important;
  border-bottom: 1px solid var(--ultra-gray-100) !important;
}

/* 地图区域 */
.map {
  margin-top: 60px !important;
}

.map-s {
  background: linear-gradient(135deg, #f5f0ed, #faf7f5) !important;
  height: 80px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: var(--ultra-r-md) !important;
  box-shadow: var(--ultra-shadow-sm) !important;
  border: 1px solid var(--ultra-gray-200) !important;
}

.map .btn {
  color: var(--ultra-gray-600) !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  display: inline-block !important;
  line-height: 1 !important;
  padding: 12px 24px !important;
  border: 2px solid rgba(228,57,42,0.2) !important;
  border-radius: var(--ultra-r-full) !important;
  transition: var(--ultra-trans) !important;
}

.map .btn:hover {
  background: var(--ultra-primary) !important;
  border-color: var(--ultra-primary) !important;
  color: #fff !important;
}

/* ==============================
   入场动画
   ============================== */
@keyframes ultra-fadeInUp {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes ultra-fadeInLeft {
  from { opacity: 0; transform: translateX(-30px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes ultra-scaleIn {
  from { opacity: 0; transform: scale(0.95); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes ultra-shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

/* 加载骨架屏 */
.ultra-skeleton {
  background: linear-gradient(90deg, var(--ultra-gray-100) 25%, var(--ultra-gray-200) 50%, var(--ultra-gray-100) 75%) !important;
  background-size: 200% 100% !important;
  animation: ultra-shimmer 1.5s infinite !important;
  border-radius: var(--ultra-r-sm) !important;
}

/* ==============================
   内页全局优化
   ============================== */

/* ---- 内页主体容器 ---- */
#bd .wp {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

/* ---- 内页 Banner ---- */
#ban-in {
  position: relative !important;
  overflow: hidden !important;
  background-color: #f0ebe8 !important;
  background-size: cover !important;
  background-position: center !important;
}
#ban-in .ban-bg {
  background: linear-gradient(to bottom, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0.2) 100%) !important;
  height: 100% !important;
}

/* ---- 面包屑 ---- */
.cur {
  background: var(--ultra-gray-50) !important;
  border-bottom: 1px solid var(--ultra-gray-200) !important;
  font-size: 13px !important;
  color: var(--ultra-gray-500) !important;
  line-height: 44px !important;
  padding: 0 20px !important;
  margin-bottom: 30px !important;
}
.cur .wp { display: flex; align-items: center; }
.cur a { color: var(--ultra-gray-500); transition: color 0.2s; }
.cur a:hover { color: var(--ultra-primary); }

/* ---- 子导航（栏目切换标签） ---- */
.sub-nav {
  background: var(--ultra-white);
  padding: 0 0 20px;
  text-align: center;
  margin-bottom: 30px;
  border-bottom: 1px solid var(--ultra-gray-100);
}
.sub-nav ul {
  display: inline-flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  gap: 8px !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
.sub-nav ul li { float: none !important; }
.sub-nav ul li a {
  display: inline-block !important;
  padding: 8px 22px !important;
  border-radius: var(--ultra-r-full) !important;
  background: var(--ultra-gray-100) !important;
  color: var(--ultra-gray-600) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  transition: var(--ultra-trans-fast) !important;
  text-decoration: none !important;
  white-space: nowrap !important;
}
.sub-nav ul li a:hover,
.sub-nav ul li .mycur,
.sub-nav ul li.on a {
  background: var(--ultra-primary) !important;
  color: var(--ultra-white) !important;
  box-shadow: var(--ultra-shadow-red) !important;
}

/* ---- 文章列表（ul-list） ---- */
.ul-list { list-style: none !important; padding: 0 !important; margin: 0 !important; }
.ul-list li {
  margin-bottom: 20px !important;
}
.ul-list li .pad {
  display: flex !important;
  gap: 20px !important;
  background: var(--ultra-white) !important;
  border: 1px solid var(--ultra-gray-200) !important;
  border-radius: var(--ultra-r-md) !important;
  overflow: hidden !important;
  transition: var(--ultra-trans) !important;
}
.ul-list li .pad:hover {
  border-color: rgba(228,57,42,0.2) !important;
  box-shadow: var(--ultra-shadow-md) !important;
  transform: translateY(-2px) !important;
}
.ul-list li .pic { flex-shrink: 0; width: 260px; min-height: 180px; overflow: hidden; }
.ul-list li .pic img {
  width: 100% !important; height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  transition: transform 0.4s ease;
}
.ul-list li .pad:hover .pic img { transform: scale(1.05); }
.ul-list li .bor {
  flex: 1; display: flex; flex-direction: column;
  padding: 16px 20px 16px 0;
  border: none !important;
  border-radius: 0 !important;
  overflow: visible !important;
}
.ul-list li .bor:hover { border: none !important; box-shadow: none !important; transform: none !important; }
.ul-list li .txt { flex: 1; padding: 0 !important; }
.ul-list li .txt .title {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  margin-bottom: 12px !important;
}
.ul-list li .txt .title span {
  background: linear-gradient(135deg, var(--ultra-primary), var(--ultra-primary-dark)) !important;
  color: #fff !important;
  padding: 6px 12px !important;
  border-radius: var(--ultra-r-sm) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  text-align: center !important;
  line-height: 1.3 !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
}
.ul-list li .txt .title span em { display: block; font-size: 22px; line-height: 1; font-style: normal; font-weight: 800; }
.ul-list li .txt .title h3 { margin: 0 !important; flex: 1; }
.ul-list li .txt .title h3 a {
  font-size: 16px !important;
  font-weight: 600 !important;
  color: var(--ultra-dark) !important;
  line-height: 1.4 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 1 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  transition: color 0.2s !important;
}
.ul-list li .txt .title h3 a:hover { color: var(--ultra-primary) !important; }
.ul-list li .txt p {
  font-size: 13px !important;
  color: var(--ultra-gray-500) !important;
  line-height: 1.7 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}
.ul-list li .more {
  background: none !important;
  padding: 8px 0 0 !important;
  margin-top: auto !important;
  border-top: 1px dashed var(--ultra-gray-200) !important;
}
.ul-list li .more a {
  color: var(--ultra-primary) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  transition: all 0.2s !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
}
.ul-list li .more a:hover { color: var(--ultra-primary-dark) !important; }

/* ---- 文章列表卡片网格（ul-list-card） ---- */
.ul-list-card {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 20px !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.ul-list-card li {
  margin-bottom: 0 !important;
  float: none !important;
  width: 100% !important;
}

.ul-list-card li .pad {
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  background: var(--ultra-white) !important;
  border: 1px solid var(--ultra-gray-200) !important;
  border-radius: var(--ultra-r-lg) !important;
  overflow: hidden !important;
  box-shadow: var(--ultra-shadow-sm) !important;
  transition: var(--ultra-trans) !important;
  height: 100% !important;
  position: relative !important;
}

/* 顶部色条 */
.ul-list-card li .pad::before {
  content: '' !important;
  display: block !important;
  width: 100% !important;
  height: 4px !important;
  background: linear-gradient(90deg, var(--ultra-primary), var(--ultra-primary-dark)) !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  z-index: 2 !important;
  transition: height 0.3s var(--ultra-ease) !important;
}

.ul-list-card li .pad:hover::before {
  height: 6px !important;
}

.ul-list-card li .pad:hover {
  border-color: rgba(228,57,42,0.25) !important;
  box-shadow: 0 16px 40px rgba(0,0,0,0.08), 0 0 0 1px rgba(228,57,42,0.08) !important;
  transform: translateY(-6px) !important;
}

.ul-list-card li .pic {
  flex-shrink: 0 !important;
  width: 100% !important;
  min-height: auto !important;
  height: 160px !important;
  overflow: hidden !important;
  position: relative !important;
}

.ul-list-card li .pic img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  transition: transform 0.4s ease !important;
}

.ul-list-card li .pad:hover .pic img {
  transform: scale(1.05) !important;
}

.ul-list-card li .txt {
  flex: 1 !important;
  padding: 20px !important;
  display: flex !important;
  flex-direction: column !important;
  z-index: 1 !important;
}

/* 日期徽章 */
.ul-list-card li .txt .date-badge {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: linear-gradient(135deg, rgba(228,57,42,0.08), rgba(228,57,42,0.04)) !important;
  border: 1px solid rgba(228,57,42,0.12) !important;
  border-radius: var(--ultra-r-sm) !important;
  color: var(--ultra-primary) !important;
  font-size: 12px !important;
  padding: 5px 10px !important;
  margin-bottom: 12px !important;
  font-weight: 500 !important;
  align-self: flex-start !important;
  line-height: 1.3 !important;
}

.ul-list-card li .txt .date-badge em {
  font-size: 16px !important;
  font-weight: 700 !important;
  color: var(--ultra-primary-dark) !important;
  display: inline !important;
  font-style: normal !important;
  margin-right: 2px !important;
}

.ul-list-card li .txt h3 {
  margin: 0 0 10px 0 !important;
}

.ul-list-card li .txt h3 a {
  font-size: 15px !important;
  font-weight: 600 !important;
  color: var(--ultra-dark) !important;
  line-height: 1.5 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  transition: color 0.2s !important;
}

.ul-list-card li .txt h3 a:hover {
  color: var(--ultra-primary) !important;
}

.ul-list-card li .txt p {
  font-size: 13px !important;
  color: var(--ultra-gray-500) !important;
  line-height: 1.7 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  margin: 0 !important;
  flex: 1 !important;
}

/* 箭头按钮 */
.ul-list-card li .more {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  background: none !important;
  padding: 14px 20px !important;
  margin-top: auto !important;
  border-top: 1px solid var(--ultra-gray-100) !important;
}

.ul-list-card li .more a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 32px !important;
  height: 32px !important;
  background: linear-gradient(135deg, var(--ultra-primary), var(--ultra-primary-dark)) !important;
  border-radius: 50% !important;
  color: #fff !important;
  font-size: 16px !important;
  text-decoration: none !important;
  transition: var(--ultra-trans) !important;
  box-shadow: 0 2px 8px rgba(228,57,42,0.2) !important;
}

.ul-list-card li .more a::before {
  content: '→' !important;
}

.ul-list-card li .more a:hover {
  transform: scale(1.1) !important;
  box-shadow: 0 4px 14px rgba(228,57,42,0.35) !important;
}

/* 响应式：小屏 2 列 */
@media (max-width: 768px) {
  .ul-list-card {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
  }
  .ul-list-card li .pic { height: 120px !important; }
  .ul-list-card li .txt { padding: 14px !important; }
  .ul-list-card li .more { padding: 10px 14px !important; }
}

/* 响应式：平板 3 列 */
@media (min-width: 769px) and (max-width: 1024px) {
  .ul-list-card {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

/* ---- 分页（EyouCMS 使用 .pagelist / .dede_pages） ---- */
.dede_pages {
  text-align: center; margin: 40px 0 60px;
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 6px !important;
}
.dede_pages ul { display: inline-flex; flex-wrap: nowrap; align-items: center; gap: 3px; }
.pagelist {
  display: inline-flex !important;
  flex-wrap: nowrap !important;
  justify-content: center !important;
  gap: 3px !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
.pagelist li { float: none !important; }
.pagelist a, .pagelist .thisclass {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 30px !important;
  height: 30px !important;
  padding: 0 7px !important;
  background: var(--ultra-white) !important;
  border: 1px solid var(--ultra-gray-200) !important;
  border-radius: var(--ultra-r-xs) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  color: var(--ultra-gray-600) !important;
  transition: var(--ultra-trans-fast) !important;
  text-decoration: none !important;
}
.pagelist a:hover,
.pagelist .thisclass {
  background: var(--ultra-primary) !important;
  border-color: var(--ultra-primary) !important;
  color: var(--ultra-white) !important;
  box-shadow: var(--ultra-shadow-red) !important;
}

/* ---- 文章详情页 ---- */
.article { max-width: 860px; margin: 0 auto; padding: 0 20px 60px; }
.article h1 {
  font-size: 26px !important;
  font-weight: 800 !important;
  color: var(--ultra-dark) !important;
  line-height: 1.4 !important;
  margin-bottom: 14px !important;
}
.article .time {
  display: block !important;
  padding-bottom: 16px !important;
  margin-bottom: 24px !important;
  color: var(--ultra-gray-400) !important;
  font-size: 13px !important;
  border-bottom: 1px solid var(--ultra-gray-100) !important;
}
.article .article-con {
  font-size: 15px !important;
  line-height: 1.9 !important;
  color: var(--ultra-gray-700) !important;
}
.article .article-con p { margin-bottom: 16px; line-height: 1.9; }
.article .article-con img {
  max-width: 100% !important;
  height: auto !important;
  border-radius: var(--ultra-r-sm) !important;
  margin: 16px 0 !important;
  box-shadow: var(--ultra-shadow-sm) !important;
}
.article .share {
  margin-top: 32px !important;
  padding-top: 16px !important;
  border-top: 1px solid var(--ultra-gray-100) !important;
  font-size: 13px !important;
  color: var(--ultra-gray-500) !important;
}

/* 详情页标题在 1024px 以下缩小 */
@media (max-width: 1024px) {
  .article h1 { font-size: 22px !important; }
}

/* ---- 关于我们页 ---- */
.about-info {
  font-size: 15px !important;
  line-height: 2.0 !important;
  color: var(--ultra-gray-600) !important;
  max-width: 900px !important;
  margin: 0 auto 48px !important;
  padding: 0 20px !important;
}
.about-info p { margin-bottom: 12px; }

/* ---- 关于我们 — 三列卡片（CSS Grid，保留原生多图淡入动画） ---- */
.ul-about {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 28px !important;
  list-style: none !important;
  padding: 0 24px !important;
  margin: 0 auto 60px !important;
  max-width: 1260px !important;
}
.ul-about::after { display: none !important; }

.ul-about li {
  float: none !important;
  width: auto !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  background: var(--ultra-white) !important;
  border: 1px solid var(--ultra-gray-200) !important;
  border-radius: 16px !important;
  padding: 40px 28px 32px !important;
  text-align: center !important;
  position: relative !important;
  box-sizing: border-box !important;
  transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              box-shadow 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              border-color 0.4s ease !important;
  cursor: default !important;
  overflow: hidden !important;
}

/* ---- 顶部装饰线（hover 时从左滑入） ---- */
.ul-about li::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 4px !important;
  background: linear-gradient(90deg, var(--ultra-primary), var(--ultra-primary-light), var(--ultra-blue)) !important;
  transform: scaleX(0) !important;
  transform-origin: left !important;
  transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
  z-index: 2 !important;
  border-radius: 16px 16px 0 0 !important;
}

/* ---- 背景光晕（hover 时从底部浮起） ---- */
.ul-about li::after {
  content: '' !important;
  position: absolute !important;
  bottom: 0 !important;
  left: 50% !important;
  transform: translateX(-50%) translateY(100%) !important;
  width: 70% !important;
  height: 60px !important;
  background: radial-gradient(ellipse at center, rgba(228,57,42,0.06) 0%, transparent 70%) !important;
  transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
  z-index: 1 !important;
  pointer-events: none !important;
}

/* ---- Hover 联动效果 ---- */
.ul-about li:hover {
  transform: translateY(-10px) !important;
  box-shadow: 0 20px 56px rgba(0,0,0,0.10), 0 0 0 2px rgba(228,57,42,0.12) !important;
  border-color: transparent !important;
}
.ul-about li:hover::before { transform: scaleX(1) !important; }
.ul-about li:hover::after  { transform: translateX(-50%) translateY(0) !important; }

/* ---- 图标区：保留原生多图绝对定位动画，外层加圆形光晕 ---- */
.ul-about li .block-wrap {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-bottom: 28px !important;
}
/* 圆形光晕背景 */
.ul-about li .block-wrap::before {
  content: '' !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: 180px !important;
  height: 180px !important;
  border-radius: 50% !important;
  background: radial-gradient(circle, rgba(228,57,42,0.04) 0%, rgba(228,57,42,0.01) 50%, transparent 70%) !important;
  transition: all 0.5s var(--ultra-ease) !important;
  z-index: 0 !important;
  pointer-events: none !important;
}
.ul-about li:hover .block-wrap::before {
  width: 210px !important;
  height: 210px !important;
  background: radial-gradient(circle, rgba(228,57,42,0.08) 0%, rgba(228,57,42,0.02) 50%, transparent 70%) !important;
}

/* 原生 .block 保持 content-box——绝对定位多图，由 JS 动画 opacity */
.ul-about li .block {
  position: relative !important;
  margin: 0 auto !important;
  z-index: 1 !important;
}
.ul-about li .block img { max-width: 100% !important; height: auto !important; }

/* ---- 标题 ---- */
.ul-about li h3 {
  font-size: 20px !important;
  font-weight: 700 !important;
  color: var(--ultra-dark) !important;
  margin-bottom: 14px !important;
  position: relative !important;
  z-index: 2 !important;
  line-height: 1.3 !important;
  transition: color 0.3s ease !important;
}
.ul-about li:hover h3 { color: var(--ultra-primary) !important; }

/* ---- 分隔线 ---- */
.ul-about li em {
  display: inline-block !important;
  width: 36px !important;
  height: 3px !important;
  background: linear-gradient(90deg, var(--ultra-primary), var(--ultra-primary-light)) !important;
  margin: 0 auto 20px !important;
  border: none !important;
  border-radius: 2px !important;
  transition: width 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
  position: relative !important;
  z-index: 2 !important;
}
.ul-about li:hover em { width: 56px !important; }

/* ---- 描述文字 ---- */
.ul-about li p {
  font-size: 13px !important;
  line-height: 2.0 !important;
  color: var(--ultra-gray-500) !important;
  text-align: left !important;
  position: relative !important;
  z-index: 2 !important;
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
}
.ul-about li p span { line-height: 2.0 !important; }

/* ---- 服务/单页 ---- */
#whous { padding-bottom: 60px; }

/* ---- 案例列表页 ---- */
.ul-case { list-style: none; padding: 0; margin: 0; }
.ul-case::after { content: '.'; display: block; clear: both; height: 0; visibility: hidden; }
.ul-case li { float: left; width: 25%; padding: 0 8px; margin-bottom: 16px; }
.ul-case li .pad { position: relative; overflow: hidden; border-radius: var(--ultra-r-sm); }
.ul-case li .pic img { width: 100%; display: block; transition: transform 0.4s ease; }
.ul-case li .pad:hover .pic img { transform: scale(1.06); }
.ul-case li .txt {
  position: absolute; bottom: 0; left: 0; right: 0;
  padding: 40px 16px 16px;
  background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, transparent 100%);
  transition: background 0.3s ease;
}
.ul-case li .txt:hover {
  background: linear-gradient(to top, rgba(228,57,42,0.9) 0%, rgba(0,0,0,0.3) 100%);
}
.ul-case li .txt h3 {
  font-size: 14px !important; font-weight: 600; color: #fff; margin: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ---- 联系页 ---- */
.contact-form-wrap { max-width: 900px; margin: 0 auto 60px; padding: 0 20px; }
.ul-contact { list-style: none; padding: 0; margin: 0 auto 40px; max-width: 900px; }
.ul-contact li {
  display: flex; align-items: center; gap: 16px;
  padding: 18px 20px; margin-bottom: 12px;
  background: var(--ultra-gray-50); border-radius: var(--ultra-r-md);
  border: 1px solid var(--ultra-gray-100);
  transition: var(--ultra-trans);
  padding-left: 20px !important;
}
.ul-contact li:hover { background: rgba(228,57,42,0.03); border-color: rgba(228,57,42,0.15); transform: translateX(4px); }

/* ---- 标语区块 ---- */
.tit-i {
  text-align: center !important;
  padding: 50px 0 36px !important;
  position: relative !important;
}
.tit-i h3 {
  font-size: 28px !important;
  font-weight: 800 !important;
  color: var(--ultra-dark) !important;
  letter-spacing: -0.5px !important;
  line-height: 1.2 !important;
  margin-bottom: 8px !important;
}
.tit-i h5 {
  font-size: 12px !important;
  color: var(--ultra-gray-400) !important;
  font-weight: 400 !important;
  letter-spacing: 3px !important;
  text-transform: uppercase !important;
}

/* ---- 移动端内页适配 ---- */
@media (max-width: 768px) {
  .ul-about { grid-template-columns: 1fr !important; gap: 20px !important; padding: 0 16px !important; }
  .ul-about li { padding: 32px 20px 28px !important; }
  .ul-about li .block-wrap::before { width: 150px !important; height: 150px !important; }
  .ul-about li .block { height: auto !important; }
  .ul-about li .block img { max-width: 80% !important; }
  .ul-list li .pad { flex-direction: column !important; }
  .ul-list li .pic { width: 100% !important; min-height: auto !important; }
  .ul-list li .pic img { width: 100% !important; height: 200px !important; object-fit: cover; }
  .ul-list li .bor { padding: 16px !important; }
  .article { padding: 0 16px 40px; }
  .article h1 { font-size: 20px !important; }
  .ul-case li { width: 50% !important; }
  .tit-i h3 { font-size: 22px !important; }
}

/* ==============================
   响应式适配
   ============================== */
@media screen and (max-width: 1024px) {
  .ul-icon-i {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 16px !important;
  }

  .ul-case-i {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 12px !important;
  }

  .ul-news-i {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 16px !important;
    margin-left: 0 !important;
  }

  .fd-top {
    grid-template-columns: 1fr 1fr !important;
    gap: 32px !important;
  }

  .row4 .wp {
    flex-direction: column !important;
    gap: 20px !important;
    padding: 0 16px !important;
  }

  .contact-l {
    width: 100% !important;
    margin-left: 0 !important;
  }
  
  .pagelist a, .pagelist .thisclass {
    min-width: 26px !important;
    height: 26px !important;
    padding: 0 5px !important;
    font-size: 11px !important;
  }
}

@media screen and (max-width: 768px) {
  #hd { display: none !important; }
  #m-hd { display: block !important; }

  #bd { padding-top: 56px !important; }

  .tit-i h3 { font-size: 24px !important; }
  .tit-i { padding: 40px 0 28px !important; }

  .ul-icon-i {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
  }

  .ul-icon-i li .pad {
    padding: 22px 14px !important;
  }

  .ul-icon-i li a span {
    width: 56px !important;
    height: 56px !important;
    background-size: 28px !important;
  }

  .ul-case-i {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }

  .ul-news-i {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    width: 100% !important;
    margin-left: 0 !important;
  }

  .row4 .wp {
    flex-direction: column !important;
    gap: 16px !important;
    padding: 0 16px !important;
  }

  .contact-l { width: 100% !important; margin-left: 0 !important; }
  .contact-r { width: 100% !important; }

  .contact-form .inp.l,
  .contact-form .inp.r {
    width: 100% !important;
    float: none !important;
    display: block !important;
    margin-right: 0 !important;
  }

  .fd-top {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
    padding: 40px 16px 32px !important;
  }

  .fd-col-qr {
    max-width: none !important;
    justify-self: start !important;
  }

  .fd-back-top {
    bottom: 20px !important;
    right: 16px !important;
  }

  .side, .side2 { display: none !important; }
  
  .pagelist a, .pagelist .thisclass {
    min-width: 24px !important;
    height: 24px !important;
    padding: 0 4px !important;
    font-size: 11px !important;
  }
}

/* ==============================
   功能修复
   ============================== */

/* 防止horizontal overflow */
body { overflow-x: hidden !important; }

/* 图片全局响应式 */
img:not(#hd img):not(#m-hd img) {
  max-width: 100% !important;
}

/* 焦点可见性（无障碍）*/
:focus-visible {
  outline: 3px solid var(--ultra-primary) !important;
  outline-offset: 2px !important;
  border-radius: 4px !important;
}

/* 禁用状态 */
[disabled],
input:disabled,
button:disabled {
  opacity: 0.5 !important;
  cursor: not-allowed !important;
}

/* 打印样式 */
@media print {
  #hd, #fd, .side, .side2, .fd-back-top, .map, #banner { display: none !important; }
  body { font-size: 12pt !important; }
}