:root {
--b1:#001a2a;
--b2:#002040;
--ac:#ff6b35;
--a2:#ff9a56;
--tx:#e0f0ff;
--mt:#70a0c0;
--bd:rgba(255,107,53,0.15);
--navbg:rgba(0,0,0,0.9);
--cardbg:rgba(255,107,53,0.03);
--r:8px;
--fn:'Segoe UI','PingFang SC','Microsoft YaHei',sans-serif
}
* {
margin:0;
padding:0;
box-sizing:border-box
}
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;
-webkit-overflow-scrolling:touch
}
.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
}
.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
}
}