:root {
--b1:#EEF0F4;
--b2:#E2E6EC;
--ac:#4A5A7E;
--a2:#647498;
--tx:#202638;
--mt:#5E6A7C;
--bd:rgba(74,90,126,0.12);
--navbg:rgba(238,240,244,0.96);
--cardbg:rgba(74,90,126,0.02);
--ac-r:74;
--ac-g:90;
--ac-b:126;
--r:8px;
--fn:'Inter','PingFang SC',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
}
.x85a_h {
background:var(--navbg);
backdrop-filter:blur(20px);
padding:10px 0;
border-bottom:1px solid var(--bd);
position:sticky;
top:0;
z-index:100
}
.x85a_hi {
max-width:900px;
margin:0 auto;
padding:0 20px;
display:flex;
align-items:center;
justify-content:space-between
}
.x85a_lgo {
font-size:1rem;
font-weight:700;
background:linear-gradient(135deg,#fff,var(--ac));
-webkit-background-clip:text;
-webkit-text-fill-color:transparent
}
.x85a_nv a {
padding:5px 12px;
font-size:.85rem;
color:var(--mt);
border-radius:4px
}
.x85a_nv a:hover,.x85a_nv a.act {
color:inherit;
background:rgba(128,128,128,0.12)
}
.x85a_hd {
padding:50px 20px 20px;
max-width:900px;
margin:0 auto
}
.x85a_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)
}
.x85a_pg {
display:flex;
justify-content:center;
gap:6px;
padding:16px
}
.x85a_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
}
.x85a_h {
background:var(--navbg);
backdrop-filter:blur(20px);
padding:10px 0;
border-bottom:1px solid var(--bd);
position:sticky;
top:0;
z-index:100
}
.x85a_hi {
max-width:800px;
margin:0 auto;
padding:0 20px;
display:flex;
align-items:center;
justify-content:space-between
}
.x85a_lgo {
font-size:1rem;
font-weight:700;
background:linear-gradient(135deg,#fff,var(--ac));
-webkit-background-clip:text;
-webkit-text-fill-color:transparent
}
.x85a_nv a {
padding:5px 12px;
font-size:.85rem;
color:var(--mt);
border-radius:4px
}
.x85a_nv a:hover,.x85a_nv a.act {
color:inherit;
background:rgba(128,128,128,0.12)
}
.x85a_aw {
max-width:800px;
margin:0 auto;
padding:30px 20px 40px
}
.x85a_ab {
margin-bottom:20px;
display:inline-flex;
align-items:center;
gap:6px;
color:var(--mt);
font-size:.82rem
}
.x85a_ab:hover {
color:var(--ac)
}
.x85a_ac {
background:var(--cardbg);
border:1px solid var(--bd);
border-radius:var(--r);
padding:24px
}
.x85a_ac h1 {
font-size:1.3rem;
font-weight:700;
margin-bottom:16px;
line-height:1.3
}
.x85a_abd {
font-size:.88rem;
line-height:1.8;
color:var(--mt)
}
.x85a_abd p {
margin-bottom:14px
}
.x85a_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
}
.x85a_se {
padding:40px 0
}
.x85a_st {
text-align:center;
margin-bottom:24px
}
.x85a_st h2 {
font-size:clamp(1.2rem,2.5vw,1.4rem);
font-weight:700;
margin-bottom:6px
}
.x85a_st p {
color:var(--mt);
font-size:.82rem
}
.x85a_g3 {
display:grid;
grid-template-columns:repeat(3,1fr);
gap:12px
}
.x85a_gc {
display:block;
background:var(--cardbg);
border:1px solid var(--bd);
border-radius:var(--r);
padding:18px 16px;
transition:all .3s;
color:var(--tx)
}
.x85a_gc:hover {
border-color:var(--ac);
transform:translateY(-2px)
}
.x85a_gt {
font-size:.65rem;
text-transform:uppercase;
letter-spacing:1px;
color:var(--ac);
font-weight:600;
margin-bottom:4px
}
.x85a_gc h3 {
font-size:.85rem;
font-weight:600;
margin-bottom:4px
}
.x85a_gc p {
font-size:.75rem;
color:var(--mt);
line-height:1.4
}
.x85a_gm {
font-size:.72rem;
font-weight:600;
color:var(--ac);
margin-top:6px;
display:inline-block
}
.x85a_bp,.x85a_bs {
display:inline-flex;
padding:10px 24px;
border-radius:50px;
font-weight:600;
font-size:.8rem;
border:none
}
.x85a_bp {
background:linear-gradient(135deg,var(--ac),var(--a2));
color:#fff;
animation:pulse-btn 2.5s ease-in-out infinite
}
.x85a_bs {
background:rgba(128,128,128,0.08)
}
.x85a_hr {
background:linear-gradient(135deg,var(--b2),var(--b1),var(--b2))
}
.x85a_ft {
background:var(--b2);
border-top:1px solid var(--bd)
}
.x85a_reveal {
opacity:0;
transform:translateY(24px);
transition:opacity .6s ease,transform .6s ease
}
.x85a_reveal.x85a_visible {
opacity:1;
transform:translateY(0)
}
@media(max-width:768px) {
.x85a_g3 {
grid-template-columns:1fr 1fr
}
}
@media(max-width:500px) {
.x85a_g3 {
grid-template-columns:1fr
}
}
@keyframes pulse-btn {
0%,100% {
box-shadow:0 0 0 0 rgba(var(--ac-r),var(--ac-g),var(--ac-b),0.3)
}
50% {
box-shadow:0 0 0 10px rgba(var(--ac-r),var(--ac-g),var(--ac-b),0)
}
}
@keyframes gloss-sweep {
0% {
left:-100%
}
100% {
left:200%
}
}
@keyframes float-a {
0%,100% {
transform:translateY(0) rotate(0deg)
}
50% {
transform:translateY(-18px) rotate(3deg)
}
}
@keyframes float-b {
0%,100% {
transform:translateY(0) rotate(0deg)
}
50% {
transform:translateY(-10px) rotate(-2deg)
}
}
@keyframes float-c {
0%,100% {
transform:translateY(0) scale(1)
}
50% {
transform:translateY(-14px) scale(1.04)
}
}
@keyframes drift-x {
0%,100% {
transform:translateX(0)
}
50% {
transform:translateX(12px)
}
}
@keyframes underline-in {
0% {
width:0
}
100% {
width:100%
}
}
@keyframes ticker-blink {
0%,100% {
opacity:1
}
50% {
opacity:0.4
}
}
@keyframes count-up {
from {
opacity:0;
transform:translateY(10px)
}
to {
opacity:1;
transform:translateY(0)
}
}
@keyframes border-glow {
0%,100% {
border-color:var(--bd)
}
50% {
border-color:var(--ac)
}
}
@keyframes gradient-shift {
0% {
background-position:0% 50%
}
50% {
background-position:100% 50%
}
100% {
background-position:0% 50%
}
}
@keyframes shimmer {
0% {
background-position:-200% 0
}
100% {
background-position:200% 0
}
}
@keyframes spin-slow {
from {
transform:rotate(0deg)
}
to {
transform:rotate(360deg)
}
}
.x85a_gloss {
position:relative;
overflow:hidden
}
.x85a_gloss::after {
content:'';
position:absolute;
top:0;
left:-100%;
width:60%;
height:100%;
background:linear-gradient(90deg,transparent,rgba(255,255,255,0.06),transparent);
transform:skewX(-25deg);
animation:gloss-sweep 3s ease-in-out infinite
}
.x85a_float-decor {
animation:float-a 6s ease-in-out infinite
}
.x85a_float-decor-b {
animation:float-b 5s ease-in-out infinite
}
.x85a_float-decor-c {
animation:float-c 7s ease-in-out infinite
}
.x85a_underline-anim {
position:relative;
display:inline-block
}
.x85a_underline-anim::after {
content:'';
position:absolute;
bottom:-4px;
left:0;
width:0;
height:2px;
background:var(--ac);
animation:underline-in .8s ease forwards;
animation-delay:.3s
}
.x85a_ticker-val {
display:inline-block;
transition:color .3s
}
.x85a_ticker-val.x85a_tu {
color:#00aa41
}
.x85a_ticker-val.x85a_td {
color:#e53e3e
}
.x85a_count-num {
display:inline-block;
animation:count-up .5s ease forwards
}
.x85a_shimmer-bg {
background:linear-gradient(90deg,var(--cardbg) 25%,rgba(255,255,255,0.03) 50%,var(--cardbg) 75%);
background-size:200% 100%;
animation:shimmer 2s ease-in-out infinite
}
@media(max-width:768px) {
body {
font-size:15px
}
nav,.x85a_nv {
overflow-x:auto;
white-space:nowrap;
-webkit-overflow-scrolling:touch
}
.x85a_hi,.x85a_aw,.x85a_hd,ul,table,.x85a_ls,.x85a_ac,.x85a_se {
padding-left:16px!important;
padding-right:16px!important
}
.x85a_hi {
flex-wrap:wrap;
gap:8px
}
.x85a_ft {
padding:12px 16px!important;
font-size:.65rem
}
.x85a_hd h1 {
font-size:1.2rem!important
}
.x85a_g3 {
gap:10px!important
}
.x85a_gc {
padding:14px 12px!important
}
.x85a_gc h3 {
font-size:.8rem
}
.x85a_aw {
padding:20px 16px 30px!important
}
.x85a_ac {
padding:20px!important
}
.x85a_ac h1 {
font-size:1.2rem!important
}
}
@media(max-width:480px) {
body {
font-size:14px
}
.x85a_g3 {
grid-template-columns:1fr!important
}
.x85a_hd {
padding:30px 16px 14px!important
}
.x85a_ft {
font-size:.6rem
}
.x85a_se {
padding:24px 0
}
.x85a_gc {
padding:12px 10px!important
}
.x85a_gc h3 {
font-size:.78rem
}
.x85a_ac h1 {
font-size:1.1rem!important
}
table {
font-size:.72rem
}
nav a,.x85a_nv a {
padding:4px 8px!important;
font-size:.78rem!important
}
}