:root {
--b1:#f0f9ff;
--b2:#e0f2fe;
--ac:#0284c7;
--a2:#0ea5e9;
--tx:#0c4a6e;
--mt:#0369a1;
--bd:rgba(0,0,0,0.08);
--navbg:rgba(255,255,255,0.95);
--cardbg:rgba(0,0,0,0.02);
--r:8px;
--fn:'Segoe UI','PingFang SC','Microsoft YaHei',sans-serif
}
* {
margin:0;
padding:0;
box-sizing:border-box
}
html,body {
width:100%;
min-height:100vh
}
body {
font-family:var(--fn);
background:var(--b1);
color:var(--tx);
line-height:1.6
}
a {
text-decoration:none;
color:inherit
}
img {
max-width:100%;
height:auto
}
.h {
background:var(--navbg);
backdrop-filter:blur(20px);
padding:10px 0;
border-bottom:1px solid var(--bd);
position:sticky;
top:0;
z-index:100
}
.hi {
max-width:900px;
margin:0 auto;
padding:0 20px;
display:flex;
align-items:center;
justify-content:space-between
}
.lgo {
font-size:1rem;
font-weight:700;
background:linear-gradient(135deg,#fff,var(--ac));
-webkit-background-clip:text;
-webkit-text-fill-color:transparent
}
.nv a {
padding:5px 12px;
font-size:.85rem;
color:var(--mt);
border-radius:4px
}
.nv a:hover,.nv a.act {
color:inherit;
background:rgba(128,128,128,0.12)
}
.hd {
padding:50px 20px 20px;
max-width:900px;
margin:0 auto
}
.hd h1 {
font-size:1.4rem;
font-weight:700
}
ul {
max-width:900px;
margin:0 auto;
padding:0 20px 24px;
list-style:none
}
li a {
transition:all .2s
}
li a:hover {
background:var(--cardbg)
}
.pg {
display:flex;
justify-content:center;
gap:6px;
padding:16px
}
.ft {
border-top:1px solid var(--bd);
padding:14px 20px;
max-width:900px;
margin:0 auto;
font-size:.85rem;
color:var(--mt);
text-align:center
}
.h {
background:var(--navbg);
backdrop-filter:blur(20px);
padding:10px 0;
border-bottom:1px solid var(--bd);
position:sticky;
top:0;
z-index:100
}
.hi {
max-width:800px;
margin:0 auto;
padding:0 20px;
display:flex;
align-items:center;
justify-content:space-between
}
.lgo {
font-size:1rem;
font-weight:700;
background:linear-gradient(135deg,#fff,var(--ac));
-webkit-background-clip:text;
-webkit-text-fill-color:transparent
}
.nv a {
padding:5px 12px;
font-size:.85rem;
color:var(--mt);
border-radius:4px
}
.nv a:hover,.nv a.act {
color:inherit;
background:rgba(128,128,128,0.12)
}
.aw {
max-width:800px;
margin:0 auto;
padding:30px 20px 40px
}
.ab {
margin-bottom:20px;
display:inline-flex;
align-items:center;
gap:6px;
color:var(--mt);
font-size:.82rem
}
.ab:hover {
color:var(--ac)
}
.ac {
background:var(--cardbg);
border:1px solid var(--bd);
border-radius:var(--r);
padding:24px
}
.ac h1 {
font-size:1.3rem;
font-weight:700;
margin-bottom:16px;
line-height:1.3
}
.abd {
font-size:.88rem;
line-height:1.8;
color:var(--mt)
}
.abd p {
margin-bottom:14px
}
.ft {
border-top:1px solid var(--bd);
padding:14px 20px;
max-width:800px;
margin:0 auto;
font-size:.7rem;
color:var(--mt);
text-align:center
}
.se {
padding:40px 0
}
.st {
text-align:center;
margin-bottom:24px
}
.st h2 {
font-size:clamp(1.2rem,2.5vw,1.4rem);
font-weight:700;
margin-bottom:6px
}
.st p {
color:var(--mt);
font-size:.82rem
}
.g3 {
display:grid;
grid-template-columns:repeat(3,1fr);
gap:12px
}
.gc {
display:block;
background:var(--cardbg);
border:1px solid var(--bd);
border-radius:var(--r);
padding:18px 16px;
transition:all .3s;
color:var(--tx)
}
.gc:hover {
border-color:var(--ac);
transform:translateY(-2px)
}
.gt {
font-size:.65rem;
text-transform:uppercase;
letter-spacing:1px;
color:var(--ac);
font-weight:600;
margin-bottom:4px
}
.gc h3 {
font-size:.85rem;
font-weight:600;
margin-bottom:4px
}
.gc p {
font-size:.75rem;
color:var(--mt);
line-height:1.4
}
.gm {
font-size:.72rem;
font-weight:600;
color:var(--ac);
margin-top:6px;
display:inline-block
}
.bp,.bs {
display:inline-flex;
padding:10px 24px;
border-radius:50px;
font-weight:600;
font-size:.8rem;
border:none
}
.bp {
background:linear-gradient(135deg,var(--ac),var(--a2));
color:#fff
}
.bs {
background:rgba(128,128,128,0.08)
}
.hr {
background:linear-gradient(135deg,var(--b2),var(--b1),var(--b2))
}
.ft {
background:var(--b2);
border-top:1px solid var(--bd)
}
@media(max-width:768px) {
.g3 {
grid-template-columns:1fr 1fr
}
}
@media(max-width:500px) {
.g3 {
grid-template-columns:1fr
}
}
@media(max-width:768px) {
body {
font-size:15px
}
nav,.nv {
overflow-x:auto;
white-space:nowrap;
flex-wrap:nowrap!important;
-webkit-overflow-scrolling:touch
}
nav>a,.nv>a {
flex:1!important;
text-align:center;
min-width:0
}
[style*="padding:0 24px"] {
padding-left:12px!important;
padding-right:12px!important
}
[style*="padding:80px"],[style*="padding:60px"],[style*="padding:50px"] {
padding-top:40px!important;
padding-bottom:30px!important
}
[style*="grid-template-columns:repeat(4"] {
grid-template-columns:repeat(2,1fr)!important
}
[style*="grid-template-columns:repeat(5"] {
grid-template-columns:repeat(2,1fr)!important
}
[style*="min-height:50"] {
min-height:auto!important
}
.hi,.aw,.hd,ul,table,.ls,.ac,.se {
padding-left:16px!important;
padding-right:16px!important
}
.hi {
flex-wrap:wrap;
gap:8px
}
.ft {
padding:12px 16px!important;
font-size:.65rem
}
.hd h1 {
font-size:1.2rem!important
}
.g3 {
gap:10px!important
}
.gc {
padding:14px 12px!important
}
.gc h3 {
font-size:.8rem
}
.aw {
padding:20px 16px 30px!important
}
.ac {
padding:20px!important
}
.ac h1 {
font-size:1.2rem!important
}
}
@media(max-width:480px) {
body {
font-size:14px
}
.g3 {
grid-template-columns:1fr!important
}
[style*="grid-template-columns:repeat(2"] {
grid-template-columns:1fr!important
}
[style*="grid-template-columns:repeat(3"] {
grid-template-columns:1fr!important
}
[style*="grid-template-columns:repeat(4"] {
grid-template-columns:1fr!important
}
[style*="padding:80px"],[style*="padding:60px"],[style*="padding:50px"] {
padding-top:28px!important;
padding-bottom:20px!important
}
.hd {
padding:30px 16px 14px!important
}
.ft {
font-size:.6rem
}
.se {
padding:24px 0
}
.gc {
padding:12px 10px!important
}
.gc h3 {
font-size:.78rem
}
.ac h1 {
font-size:1.1rem!important
}
table {
font-size:.72rem
}
nav a,.nv a {
padding:4px 8px!important;
font-size:.78rem!important
}
}
[style*="grid-template-columns:repeat(3,1fr);gap:12px"]>div{transition:all .2s}
[style*="grid-template-columns:repeat(3,1fr);gap:12px"]>div:hover{border-color:var(--ac)!important;transform:translateY(-3px)}
[style*="grid-template-columns:repeat(4,1fr);gap:10px"]>div{transition:all .2s}
[style*="grid-template-columns:repeat(4,1fr);gap:10px"]>div:hover{border-color:var(--ac)!important;transform:translateY(-2px)}
[style*="grid-template-columns:1fr 1fr;gap:10px"]>div{transition:all .2s}
[style*="grid-template-columns:1fr 1fr;gap:10px"]>div:hover{border-color:var(--ac)!important}
[style*="letter-spacing:.5px"] span:hover{color:var(--ac)!important}

[style*="grid-template-columns:repeat(3,1fr);gap:12px"]>div{transition:all .2s}
[style*="grid-template-columns:repeat(3,1fr);gap:12px"]>div:hover{border-color:var(--ac)!important;transform:translateY(-3px)}
[style*="grid-template-columns:repeat(4,1fr);gap:10px"]>div{transition:all .2s}
[style*="grid-template-columns:repeat(4,1fr);gap:10px"]>div:hover{border-color:var(--ac)!important;transform:translateY(-2px)}
[style*="grid-template-columns:1fr 1fr;gap:10px"]>div{transition:all .2s}
[style*="grid-template-columns:1fr 1fr;gap:10px"]>div:hover{border-color:var(--ac)!important}
[style*="letter-spacing:.5px"] span:hover{color:var(--ac)!important}

[style*="grid-template-columns:1fr 1fr;gap:10px"]>div{transition:all .2s}
[style*="grid-template-columns:1fr 1fr;gap:10px"]>div:hover{border-color:var(--ac)!important}
[style*="letter-spacing:.5px"] span:hover{color:var(--ac)!important}


/* ===== 布局约束 - 限制内容宽度 ===== */
/* 约束所有 major content sections */
div[style*="max-width:700px"],
div[style*="max-width:650px"],
div[style*="max-width:600px"],
div[style*="max-width:550px"],
div[style*="max-width:500px"],
div[style*="max-width:400px"],
div[style*="max-width:380px"] {
  max-width: 720px !important;
}

/* Hero 标题约束最大宽度 */
h1[style*="font-size:clamp"] {
  max-width: 700px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* 所有 padding 段落的背景区改为用主题色更好看 */
div[style*="padding:44px 24px"],
div[style*="padding:36px 24px"],
div[style*="padding:8px 24px"] {
  padding-left: 5% !important;
  padding-right: 5% !important;
}

/* 导航容器拉宽一点以适应导航文字 */
div[style*="position:sticky;top:0"] > div {
  max-width: 800px !important;
}

/* 文章列表和主内容区域约束 */
div[style*="padding:50px 24px;max-width:700px"] {
  max-width: 720px !important;
  padding: 50px 5% !important;
}

/* 特性卡片网格 */
div[style*="grid-template-columns:repeat(3,1fr);gap:14px"] {
  max-width: 680px !important;
  margin: 0 auto !important;
}

/* 步骤网格约束 */
div[style*="grid-template-columns:repeat(3,1fr);gap:12px"] {
  max-width: 600px !important;
  margin: 0 auto !important;
}

/* 文章网格或数据网格 */
div[style*="grid-template-columns:repeat(4,1fr);gap:10px"],
div[style*="grid-template-columns:repeat(4,1fr);gap:12px"] {
  max-width: 600px !important;
  margin: 0 auto !important;
}

/* FAQ 网格约束 */
div[style*="grid-template-columns:1fr 1fr;gap:10px"] {
  max-width: 600px !important;
  margin: 0 auto !important;
}

/* CTA 区域 */
div[style*="max-width:380px"] {
  max-width: 450px !important;
}

/* 页脚约束 */
div[style*="border-top:2px solid"] {
  padding-left: 5% !important;
  padding-right: 5% !important;
}
div[style*="border-top:2px solid"] > div {
  max-width: 720px !important;
  margin: 0 auto !important;
}

/* 响应式 - 小屏加大边距 */
@media (min-width: 1200px) {
  div[style*="padding:44px 24px"],
  div[style*="padding:36px 24px"],
  div[style*="padding:8px 24px"] {
    padding-left: calc((100% - 720px) / 2) !important;
    padding-right: calc((100% - 720px) / 2) !important;
  }
}

a[style*="display:flex;justify-content:space-between;padding:12px 16px"] {
  transition: all .2s !important;
}
a[style*="display:flex;justify-content:space-between;padding:12px 16px"]:hover {
  border-color: var(--ac) !important;
  transform: translateX(4px);
  padding-left: 20px !important;
}
div[style*="grid-template-columns:1fr 1fr;gap:10px"] > div {
  transition: all .2s;
}
div[style*="grid-template-columns:1fr 1fr;gap:10px"] > div:hover {
  border-color: var(--ac) !important;
}
div[style*="grid-template-columns:repeat(3,1fr);gap:14px"] > div {
  transition: all .2s;
}
div[style*="grid-template-columns:repeat(3,1fr);gap:14px"] > div:hover {
  border-color: var(--ac) !important;
  transform: translateY(-3px);
}
div[style*="grid-template-columns:repeat(4,1fr);gap:12px"] > div {
  transition: all .2s;
}
div[style*="grid-template-columns:repeat(4,1fr);gap:12px"] > div:hover {
  border-color: var(--ac) !important;
  transform: translateY(-2px);
}
div[style*="grid-template-columns:1fr 1fr;gap:12px"] > div {
  transition: all .2s;
}
div[style*="grid-template-columns:1fr 1fr;gap:12px"] > div:hover {
  border-color: var(--ac) !important;
  transform: translateY(-2px);
}
[style*="letter-spacing:.3px"] span:hover {
  color: var(--ac) !important;
}
a[style*="border-radius:50px"]:hover {
  opacity: .85;
}