/* eyou-net-www site.css — 语义元素整站样式（迁移后新视觉基线）
   旧站样式（style.css/about.css 等）只匹配 DedeCMS class 结构，对新语义 HTML 不生效；
   本文件为唯一生效样式层，按元素选择器编写，品牌蓝取自旧站 banner。 */

:root {
  --brand: #2878FF;
  --brand-dark: #1F2A44;
  --ink: #2b2f36;
  --ink-soft: #5a6270;
  --line: #e3e7ee;
  --bg-soft: #F4F6FA;
  --maxw: 1100px;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  color: #2b2f36;
  color: var(--ink);
  background: #fff;
  font-family: "PingFang SC", "Microsoft YaHei", "Helvetica Neue", Arial, "Hiragino Sans GB", sans-serif;
  font-size: 16px;
  line-height: 1.75;
}

img { max-width: 100%; height: auto; }

a { color: var(--brand); text-decoration: none; }
a:hover { color: var(--brand-dark); text-decoration: underline; }
a:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

/* 头部导航：单行顶栏（logo 左 / 导航中 / 热线右） */
header {
  background: #fff;
  border-bottom: 1px solid #E5E6EB;
}
.head-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 20px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.logo img { height: 38px; display: block; }
nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: nowrap;
}
nav li { margin: 0; }
nav a {
  display: block;
  padding: 21px 14px;
  color: #1F2329;
  font-size: 15px;
  white-space: nowrap;
}
nav a:hover {
  color: #2878FF;
  text-decoration: none;
  box-shadow: inset 0 -2px 0 #2878FF;
}

/* 主体 */
main {
  max-width: 1100px;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 36px 20px 56px;
}

main h1 {
  font-size: 28px;
  line-height: 1.4;
  margin: 0 0 22px;
  padding-bottom: 14px;
  border-bottom: 1px solid #e3e7ee;
  border-bottom: 1px solid var(--line);
}
main h2 {
  font-size: 22px;
  margin: 34px 0 14px;
  padding-left: 12px;
  border-left: 4px solid #2878FF;
  border-left: 4px solid var(--brand);
}
main h3 {
  font-size: 18px;
  margin: 26px 0 10px;
}
main p { margin: 0 0 14px; }
main ul, main ol { margin: 0 0 16px; padding-left: 1.4em; }
main li { margin: 4px 0; }

main table {
  border-collapse: collapse;
  width: 100%;
  margin: 0 0 18px;
  font-size: 15px;
}
main th, main td {
  border: 1px solid #e3e7ee;
  border: 1px solid var(--line);
  padding: 8px 12px;
  text-align: left;
}
main th { background: var(--bg-soft); }

main blockquote {
  margin: 0 0 16px;
  padding: 10px 16px;
  border-left: 4px solid #e3e7ee;
  border-left: 4px solid var(--line);
  background: #F4F6FA;
  background: var(--bg-soft);
  color: #5a6270;
  color: var(--ink-soft);
}

main hr { border: none; border-top: 1px solid var(--line); margin: 28px 0; }

/* 页脚 */
footer {
  background: #F4F6FA;
  background: var(--bg-soft);
  border-top: 1px solid #e3e7ee;
  border-top: 1px solid var(--line);
  color: #5a6270;
  color: var(--ink-soft);
  font-size: 14px;
}
footer p {
  max-width: 1100px;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 8px 20px;
  line-height: 1.8;
}
footer p:first-child { padding-top: 22px; }
footer p:last-child { padding-bottom: 22px; }
footer a { color: var(--ink-soft); }
footer a:hover { color: var(--brand); }

/* 响应式 */
@media (max-width: 720px) {
  nav a { padding: 12px 14px; font-size: 14px; }
  main { padding: 26px 16px 40px; }
  main h1 { font-size: 24px; }
  main h2 { font-size: 20px; }
}

/* ===== 首页版块组件 ===== */
.section { padding: 56px 0; }
.section > h2 {
  max-width: 1100px;
  max-width: var(--maxw);
  margin: 0 auto 28px;
  padding: 0 20px;
  font-size: 26px;
  border-left: 4px solid #2878FF;
  border-left: 4px solid var(--brand);
  padding-left: 16px;
}
.section.alt { background: var(--bg-soft); }

/* hero */
.hero {
  background: linear-gradient(160deg, #2878FF 0%, #1F2A44 70%, #1F2A44 100%);
  background: linear-gradient(160deg, var(--brand) 0%, var(--brand-dark) 70%, #1F2A44 100%);
  color: #fff;
  padding: 56px 20px 0;
  text-align: center;
}
.hero h1 {
  max-width: 900px;
  margin: 0 auto 14px;
  font-size: 38px;
  line-height: 1.4;
  color: #1F2329;
  border: none;
  padding: 0;
}
.hero .slogan { margin: 0 0 22px; font-size: 16px; color: rgba(255,255,255,.85); }
.hero-cta { margin: 0 0 30px; }
.btn {
  display: inline-block;
  background: #fff;
  color: #2878FF;
  color: var(--brand);
  padding: 10px 28px;
  border-radius: 4px;
  font-size: 15px;
  font-weight: 600;
  margin: 0 8px;
}
.btn:hover { background: var(--bg-soft); color: var(--brand-dark); text-decoration: none; }
.btn.ghost {
  background: transparent;
  color: #fff;
  border: 1px solid rgba(255,255,255,.7);
}
.btn.ghost:hover { background: rgba(255,255,255,.12); text-decoration: none; }

/* hero 轮播 */
.carousel {
  max-width: 1100px;
  max-width: var(--maxw);
  margin: 0 auto;
  position: relative;
  min-height: 120px;
}
.carousel .slide {
  display: none;
  width: 100%;
  border-radius: 8px 8px 0 0;
  box-shadow: 0 -6px 24px rgba(0,0,0,.18);
}
.carousel .slide.active { display: block; }

/* 优势卡片 */
.cards {
  max-width: 1100px;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 20px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 20px;
}
.card {
  background: #fff;
  border: 1px solid #e3e7ee;
  border: 1px solid var(--line);
  border-top: 3px solid #2878FF;
  border-top: 3px solid var(--brand);
  border-radius: 6px;
  padding: 22px 20px;
}
.card h3 { margin: 0 0 10px; font-size: 17px; }
.card p { margin: 0 0 12px; font-size: 14px; color: var(--ink-soft); }
.card a { font-size: 14px; }

/* 图文分栏 */
.split {
  max-width: 1100px;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  gap: 36px;
  align-items: flex-start;
}
.split > div { flex: 1; min-width: 0; }
.split img { max-width: 44%; border-radius: 6px; }

/* 发展历程 */
.timeline {
  max-width: 1100px;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 20px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 18px;
}
.tl-item {
  background: #fff;
  border: 1px solid #e3e7ee;
  border: 1px solid var(--line);
  border-radius: 6px;
  overflow: hidden;
}
.tl-item img { width: 100%; display: block; }
.tl-item p { margin: 0; padding: 10px 12px; font-size: 13px; line-height: 1.6; color: var(--ink-soft); }
.tl-item p strong { color: var(--brand); }

@media (max-width: 720px) {
  .hero h1 { font-size: 24px; }
  .section { padding: 36px 0; }
  .split { flex-direction: column; }
  .split img { max-width: 100%; }
}

/* 旧首页 raw 直通模式 */
main.raw { max-width: none; padding: 0; }
.home-h1 {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 22px 20px 0;
  font-size: 24px;
  color: #2b2f36;
}
@media (max-width: 720px) { .home-h1 { font-size: 20px; padding-top: 16px; } }

/* 首页 hero 与关于版块背景（旧站实景素材） */
.hero2 { line-height: 0; }
.hero2 img { width: 100%; display: block; max-height: 560px; object-fit: cover; }
.about-bg {
  background: #8a97a8 url('/images/banner_bg_ab01.jpg') center center no-repeat;
  background-size: cover;
}
.about-bg > h2 { color: #fff; border-left-color: #fff; }
.about-bg .split > div {
  background: rgba(255,255,255,.94);
  padding: 24px 28px;
  border-radius: 8px;
}

/* ===== 业界方案改进组件 ===== */
/* hero 头区：价值主张 + CTA */
.hero-head {
  background: #fff;
  color: #1F2329;
  text-align: center;
  padding: 48px 20px 20px;
}
.hero-head h1 {
  max-width: 900px;
  margin: 0 auto 14px;
  font-size: 38px;
  line-height: 1.4;
  color: #1F2329;
  border: none;
  padding: 0;
}
.hero-head .slogan { margin: 0 0 22px; font-size: 16px; color: #86909C; }
.hero-head .hero-cta { margin: 0; }
.hero-head .hl { color: #2878FF; }
.hero-head .btn { background: #2878FF; color: #fff; }
.hero-head .btn:hover { background: #1F2A44; color: #fff; text-decoration: none; }
.hero-head .btn.ghost { background: transparent; color: #1F2329; border: 1px solid #E5E6EB; }
.hero-head .btn.ghost:hover { border-color: #2878FF; color: #2878FF; background: transparent; }

/* 信任数据条 */
.stats {
  background: #fff;
  border-top: 1px solid #E5E6EB;
  border-bottom: 1px solid #E5E6EB;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.stat {
  padding: 22px 40px;
  text-align: center;
}
.stat strong { display: block; font-size: 32px; line-height: 1.2; color: #2878FF; }
.stat span { font-size: 13px; color: #86909C; }

/* 资质证书图 */
.cert { max-width: 300px; border-radius: 6px; display: block; }
.cert-cap { font-size: 13px; color: #5a6270; margin-top: 6px; }
.about-bg .split > div .cert-cap { color: #5a6270; }

/* 底部 CTA band */
.cta-band {
  background: #F4F6FA;
  color: #1F2329;
  text-align: center;
  padding: 48px 20px;
}
.cta-band h2 { color: #1F2329; font-size: 28px; margin: 0 0 10px; }
.cta-band p { color: #86909C; margin: 0 0 18px; }
.cta-band .btn { background: #2878FF; color: #fff; }
.cta-band .btn:hover { background: #1F2A44; color: #fff; text-decoration: none; }
.cta-tel { margin-left: 16px; font-size: 18px; color: #1F2329; vertical-align: middle; }

@media (max-width: 720px) {
  .hero-head h1 { font-size: 24px; }
  .stat { padding: 14px 22px; }
  .stat strong { font-size: 24px; }
  .cta-tel { display: block; margin: 12px 0 0; }
}

/* 导航右侧热线 */
.nav-tel {
  margin: 0;
  color: #2878FF;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: .5px;
  white-space: nowrap;
}
@media (max-width: 1080px) {
  .nav-tel { display: none; }
  nav a { padding: 21px 9px; font-size: 14px; }
}
@media (max-width: 860px) {
  .head-inner { flex-wrap: wrap; height: auto; padding-top: 8px; padding-bottom: 8px; }
  nav ul { flex-wrap: wrap; }
  nav a { padding: 8px 10px; }
}

/* ===== VI 9.x 组件 ===== */
/* 9.0 版本小药丸 */
.vtag {
  display: inline-block;
  margin: 18px 0 0;
  padding: 4px 16px;
  background: #E9F1FF;
  border-radius: 999px;
  font-size: 13px;
  color: #2878FF;
  letter-spacing: 1px;
}
/* 品牌蓝按钮（浅底上使用） */
.btn-brand { background: #2878FF; color: #fff; }
.btn-brand:hover { background: #1F2A44; color: #fff; text-decoration: none; }
/* 产品截图版块 */
.split > img.wide-shot { max-width: 52%; box-shadow: 0 8px 28px rgba(31,42,68,.18); border-radius: 8px; }
@media (max-width: 720px) { .split > img.wide-shot { max-width: 100%; } }