:root, :host {
--fa-font-solid: normal 900 1em/1 "Font Awesome 6 Solid";
--fa-font-regular: normal 400 1em/1 "Font Awesome 6 Regular";
--fa-font-light: normal 300 1em/1 "Font Awesome 6 Light";
--fa-font-thin: normal 100 1em/1 "Font Awesome 6 Thin";
--fa-font-duotone: normal 900 1em/1 "Font Awesome 6 Duotone";
--fa-font-brands: normal 400 1em/1 "Font Awesome 6 Brands";
}
svg:not(:root).svg-inline--fa, svg:not(:host).svg-inline--fa {
overflow: visible;
box-sizing: content-box;
}
.svg-inline--fa {
display: var(--fa-display, inline-block);
height: 1em;
overflow: visible;
vertical-align: -0.125em;
}
.svg-inline--fa.fa-2xs {
vertical-align: 0.1em;
}
.svg-inline--fa.fa-xs {
vertical-align: 0em;
}
.svg-inline--fa.fa-sm {
vertical-align: -0.0714285705em;
}
.svg-inline--fa.fa-lg {
vertical-align: -0.2em;
}
.svg-inline--fa.fa-xl {
vertical-align: -0.25em;
}
.svg-inline--fa.fa-2xl {
vertical-align: -0.3125em;
}
.svg-inline--fa.fa-pull-left {
margin-right: var(--fa-pull-margin, 0.3em);
width: auto;
}
.svg-inline--fa.fa-pull-right {
margin-left: var(--fa-pull-margin, 0.3em);
width: auto;
}
.svg-inline--fa.fa-li {
width: var(--fa-li-width, 2em);
top: 0.25em;
}
.svg-inline--fa.fa-fw {
width: var(--fa-fw-width, 1.25em);
}
.fa-layers svg.svg-inline--fa {
bottom: 0;
left: 0;
margin: auto;
position: absolute;
right: 0;
top: 0;
}
.fa-layers-counter, .fa-layers-text {
display: inline-block;
position: absolute;
text-align: center;
}
.fa-layers {
display: inline-block;
height: 1em;
position: relative;
text-align: center;
vertical-align: -0.125em;
width: 1em;
}
.fa-layers svg.svg-inline--fa {
-webkit-transform-origin: center center;
transform-origin: center center;
}
.fa-layers-text {
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
-webkit-transform-origin: center center;
transform-origin: center center;
}
.fa-layers-counter {
background-color: var(--fa-counter-background-color, #ff253a);
border-radius: var(--fa-counter-border-radius, 1em);
box-sizing: border-box;
color: var(--fa-inverse, #fff);
line-height: var(--fa-counter-line-height, 1);
max-width: var(--fa-counter-max-width, 5em);
min-width: var(--fa-counter-min-width, 1.5em);
overflow: hidden;
padding: var(--fa-counter-padding, 0.25em 0.5em);
right: var(--fa-right, 0);
text-overflow: ellipsis;
top: var(--fa-top, 0);
-webkit-transform: scale(var(--fa-counter-scale, 0.25));
transform: scale(var(--fa-counter-scale, 0.25));
-webkit-transform-origin: top right;
transform-origin: top right;
}
.fa-layers-bottom-right {
bottom: var(--fa-bottom, 0);
right: var(--fa-right, 0);
top: auto;
-webkit-transform: scale(var(--fa-layers-scale, 0.25));
transform: scale(var(--fa-layers-scale, 0.25));
-webkit-transform-origin: bottom right;
transform-origin: bottom right;
}
.fa-layers-bottom-left {
bottom: var(--fa-bottom, 0);
left: var(--fa-left, 0);
right: auto;
top: auto;
-webkit-transform: scale(var(--fa-layers-scale, 0.25));
transform: scale(var(--fa-layers-scale, 0.25));
-webkit-transform-origin: bottom left;
transform-origin: bottom left;
}
.fa-layers-top-right {
top: var(--fa-top, 0);
right: var(--fa-right, 0);
-webkit-transform: scale(var(--fa-layers-scale, 0.25));
transform: scale(var(--fa-layers-scale, 0.25));
-webkit-transform-origin: top right;
transform-origin: top right;
}
.fa-layers-top-left {
left: var(--fa-left, 0);
right: auto;
top: var(--fa-top, 0);
-webkit-transform: scale(var(--fa-layers-scale, 0.25));
transform: scale(var(--fa-layers-scale, 0.25));
-webkit-transform-origin: top left;
transform-origin: top left;
}
.fa-1x {
font-size: 1em;
}
.fa-2x {
font-size: 2em;
}
.fa-3x {
font-size: 3em;
}
.fa-4x {
font-size: 4em;
}
.fa-5x {
font-size: 5em;
}
.fa-6x {
font-size: 6em;
}
.fa-7x {
font-size: 7em;
}
.fa-8x {
font-size: 8em;
}
.fa-9x {
font-size: 9em;
}
.fa-10x {
font-size: 10em;
}
.fa-2xs {
font-size: 0.625em;
line-height: 0.1em;
vertical-align: 0.225em;
}
.fa-xs {
font-size: 0.75em;
line-height: 0.0833333337em;
vertical-align: 0.125em;
}
.fa-sm {
font-size: 0.875em;
line-height: 0.0714285718em;
vertical-align: 0.0535714295em;
}
.fa-lg {
font-size: 1.25em;
line-height: 0.05em;
vertical-align: -0.075em;
}
.fa-xl {
font-size: 1.5em;
line-height: 0.0416666682em;
vertical-align: -0.125em;
}
.fa-2xl {
font-size: 2em;
line-height: 0.03125em;
vertical-align: -0.1875em;
}
.fa-fw {
text-align: center;
width: 1.25em;
}
.fa-ul {
list-style-type: none;
margin-left: var(--fa-li-margin, 2.5em);
padding-left: 0;
}
.fa-ul > li {
position: relative;
}
.fa-li {
left: calc(var(--fa-li-width, 2em) * -1);
position: absolute;
text-align: center;
width: var(--fa-li-width, 2em);
line-height: inherit;
}
.fa-border {
border-color: var(--fa-border-color, #eee);
border-radius: var(--fa-border-radius, 0.1em);
border-style: var(--fa-border-style, solid);
border-width: var(--fa-border-width, 0.08em);
padding: var(--fa-border-padding, 0.2em 0.25em 0.15em);
}
.fa-pull-left {
float: left;
margin-right: var(--fa-pull-margin, 0.3em);
}
.fa-pull-right {
float: right;
margin-left: var(--fa-pull-margin, 0.3em);
}
.fa-beat {
-webkit-animation-name: fa-beat;
animation-name: fa-beat;
-webkit-animation-delay: var(--fa-animation-delay, 0);
animation-delay: var(--fa-animation-delay, 0);
-webkit-animation-direction: var(--fa-animation-direction, normal);
animation-direction: var(--fa-animation-direction, normal);
-webkit-animation-duration: var(--fa-animation-duration, 1s);
animation-duration: var(--fa-animation-duration, 1s);
-webkit-animation-iteration-count: var(--fa-animation-iteration-count, infinite);
animation-iteration-count: var(--fa-animation-iteration-count, infinite);
-webkit-animation-timing-function: var(--fa-animation-timing, ease-in-out);
animation-timing-function: var(--fa-animation-timing, ease-in-out);
}
.fa-bounce {
-webkit-animation-name: fa-bounce;
animation-name: fa-bounce;
-webkit-animation-delay: var(--fa-animation-delay, 0);
animation-delay: var(--fa-animation-delay, 0);
-webkit-animation-direction: var(--fa-animation-direction, normal);
animation-direction: var(--fa-animation-direction, normal);
-webkit-animation-duration: var(--fa-animation-duration, 1s);
animation-duration: var(--fa-animation-duration, 1s);
-webkit-animation-iteration-count: var(--fa-animation-iteration-count, infinite);
animation-iteration-count: var(--fa-animation-iteration-count, infinite);
-webkit-animation-timing-function: var(--fa-animation-timing, cubic-bezier(0.28, 0.84, 0.42, 1));
animation-timing-function: var(--fa-animation-timing, cubic-bezier(0.28, 0.84, 0.42, 1));
}
.fa-fade {
-webkit-animation-name: fa-fade;
animation-name: fa-fade;
-webkit-animation-delay: var(--fa-animation-delay, 0);
animation-delay: var(--fa-animation-delay, 0);
-webkit-animation-direction: var(--fa-animation-direction, normal);
animation-direction: var(--fa-animation-direction, normal);
-webkit-animation-duration: var(--fa-animation-duration, 1s);
animation-duration: var(--fa-animation-duration, 1s);
-webkit-animation-iteration-count: var(--fa-animation-iteration-count, infinite);
animation-iteration-count: var(--fa-animation-iteration-count, infinite);
-webkit-animation-timing-function: var(--fa-animation-timing, cubic-bezier(0.4, 0, 0.6, 1));
animation-timing-function: var(--fa-animation-timing, cubic-bezier(0.4, 0, 0.6, 1));
}
.fa-beat-fade {
-webkit-animation-name: fa-beat-fade;
animation-name: fa-beat-fade;
-webkit-animation-delay: var(--fa-animation-delay, 0);
animation-delay: var(--fa-animation-delay, 0);
-webkit-animation-direction: var(--fa-animation-direction, normal);
animation-direction: var(--fa-animation-direction, normal);
-webkit-animation-duration: var(--fa-animation-duration, 1s);
animation-duration: var(--fa-animation-duration, 1s);
-webkit-animation-iteration-count: var(--fa-animation-iteration-count, infinite);
animation-iteration-count: var(--fa-animation-iteration-count, infinite);
-webkit-animation-timing-function: var(--fa-animation-timing, cubic-bezier(0.4, 0, 0.6, 1));
animation-timing-function: var(--fa-animation-timing, cubic-bezier(0.4, 0, 0.6, 1));
}
.fa-flip {
-webkit-animation-name: fa-flip;
animation-name: fa-flip;
-webkit-animation-delay: var(--fa-animation-delay, 0);
animation-delay: var(--fa-animation-delay, 0);
-webkit-animation-direction: var(--fa-animation-direction, normal);
animation-direction: var(--fa-animation-direction, normal);
-webkit-animation-duration: var(--fa-animation-duration, 1s);
animation-duration: var(--fa-animation-duration, 1s);
-webkit-animation-iteration-count: var(--fa-animation-iteration-count, infinite);
animation-iteration-count: var(--fa-animation-iteration-count, infinite);
-webkit-animation-timing-function: var(--fa-animation-timing, ease-in-out);
animation-timing-function: var(--fa-animation-timing, ease-in-out);
}
.fa-shake {
-webkit-animation-name: fa-shake;
animation-name: fa-shake;
-webkit-animation-delay: var(--fa-animation-delay, 0);
animation-delay: var(--fa-animation-delay, 0);
-webkit-animation-direction: var(--fa-animation-direction, normal);
animation-direction: var(--fa-animation-direction, normal);
-webkit-animation-duration: var(--fa-animation-duration, 1s);
animation-duration: var(--fa-animation-duration, 1s);
-webkit-animation-iteration-count: var(--fa-animation-iteration-count, infinite);
animation-iteration-count: var(--fa-animation-iteration-count, infinite);
-webkit-animation-timing-function: var(--fa-animation-timing, linear);
animation-timing-function: var(--fa-animation-timing, linear);
}
.fa-spin {
-webkit-animation-name: fa-spin;
animation-name: fa-spin;
-webkit-animation-delay: var(--fa-animation-delay, 0);
animation-delay: var(--fa-animation-delay, 0);
-webkit-animation-direction: var(--fa-animation-direction, normal);
animation-direction: var(--fa-animation-direction, normal);
-webkit-animation-duration: var(--fa-animation-duration, 2s);
animation-duration: var(--fa-animation-duration, 2s);
-webkit-animation-iteration-count: var(--fa-animation-iteration-count, infinite);
animation-iteration-count: var(--fa-animation-iteration-count, infinite);
-webkit-animation-timing-function: var(--fa-animation-timing, linear);
animation-timing-function: var(--fa-animation-timing, linear);
}
.fa-spin-reverse {
--fa-animation-direction: reverse;
}
.fa-pulse, .fa-spin-pulse {
-webkit-animation-name: fa-spin;
animation-name: fa-spin;
-webkit-animation-direction: var(--fa-animation-direction, normal);
animation-direction: var(--fa-animation-direction, normal);
-webkit-animation-duration: var(--fa-animation-duration, 1s);
animation-duration: var(--fa-animation-duration, 1s);
-webkit-animation-iteration-count: var(--fa-animation-iteration-count, infinite);
animation-iteration-count: var(--fa-animation-iteration-count, infinite);
-webkit-animation-timing-function: var(--fa-animation-timing, steps(8));
animation-timing-function: var(--fa-animation-timing, steps(8));
}
@media (prefers-reduced-motion: reduce) {
.fa-beat, .fa-bounce, .fa-fade, .fa-beat-fade, .fa-flip, .fa-pulse, .fa-shake, .fa-spin, .fa-spin-pulse {
-webkit-animation-delay: -1ms;
animation-delay: -1ms;
-webkit-animation-duration: 1ms;
animation-duration: 1ms;
-webkit-animation-iteration-count: 1;
animation-iteration-count: 1;
transition-delay: 0s;
transition-duration: 0s;
}
}
@-webkit-keyframes fa-beat {
0%, 90% {
-webkit-transform: scale(1);
transform: scale(1);
}
45% {
-webkit-transform: scale(var(--fa-beat-scale, 1.25));
transform: scale(var(--fa-beat-scale, 1.25));
}
}
@keyframes fa-beat {
0%, 90% {
-webkit-transform: scale(1);
transform: scale(1);
}
45% {
-webkit-transform: scale(var(--fa-beat-scale, 1.25));
transform: scale(var(--fa-beat-scale, 1.25));
}
}
@-webkit-keyframes fa-bounce {
0% {
-webkit-transform: scale(1, 1) translateY(0);
transform: scale(1, 1) translateY(0);
}
10% {
-webkit-transform: scale(var(--fa-bounce-start-scale-x, 1.1), var(--fa-bounce-start-scale-y, 0.9)) translateY(0);
transform: scale(var(--fa-bounce-start-scale-x, 1.1), var(--fa-bounce-start-scale-y, 0.9)) translateY(0);
}
30% {
-webkit-transform: scale(var(--fa-bounce-jump-scale-x, 0.9), var(--fa-bounce-jump-scale-y, 1.1)) translateY(var(--fa-bounce-height, -0.5em));
transform: scale(var(--fa-bounce-jump-scale-x, 0.9), var(--fa-bounce-jump-scale-y, 1.1)) translateY(var(--fa-bounce-height, -0.5em));
}
50% {
-webkit-transform: scale(var(--fa-bounce-land-scale-x, 1.05), var(--fa-bounce-land-scale-y, 0.95)) translateY(0);
transform: scale(var(--fa-bounce-land-scale-x, 1.05), var(--fa-bounce-land-scale-y, 0.95)) translateY(0);
}
57% {
-webkit-transform: scale(1, 1) translateY(var(--fa-bounce-rebound, -0.125em));
transform: scale(1, 1) translateY(var(--fa-bounce-rebound, -0.125em));
}
64% {
-webkit-transform: scale(1, 1) translateY(0);
transform: scale(1, 1) translateY(0);
}
100% {
-webkit-transform: scale(1, 1) translateY(0);
transform: scale(1, 1) translateY(0);
}
}
@keyframes fa-bounce {
0% {
-webkit-transform: scale(1, 1) translateY(0);
transform: scale(1, 1) translateY(0);
}
10% {
-webkit-transform: scale(var(--fa-bounce-start-scale-x, 1.1), var(--fa-bounce-start-scale-y, 0.9)) translateY(0);
transform: scale(var(--fa-bounce-start-scale-x, 1.1), var(--fa-bounce-start-scale-y, 0.9)) translateY(0);
}
30% {
-webkit-transform: scale(var(--fa-bounce-jump-scale-x, 0.9), var(--fa-bounce-jump-scale-y, 1.1)) translateY(var(--fa-bounce-height, -0.5em));
transform: scale(var(--fa-bounce-jump-scale-x, 0.9), var(--fa-bounce-jump-scale-y, 1.1)) translateY(var(--fa-bounce-height, -0.5em));
}
50% {
-webkit-transform: scale(var(--fa-bounce-land-scale-x, 1.05), var(--fa-bounce-land-scale-y, 0.95)) translateY(0);
transform: scale(var(--fa-bounce-land-scale-x, 1.05), var(--fa-bounce-land-scale-y, 0.95)) translateY(0);
}
57% {
-webkit-transform: scale(1, 1) translateY(var(--fa-bounce-rebound, -0.125em));
transform: scale(1, 1) translateY(var(--fa-bounce-rebound, -0.125em));
}
64% {
-webkit-transform: scale(1, 1) translateY(0);
transform: scale(1, 1) translateY(0);
}
100% {
-webkit-transform: scale(1, 1) translateY(0);
transform: scale(1, 1) translateY(0);
}
}
@-webkit-keyframes fa-fade {
50% {
opacity: var(--fa-fade-opacity, 0.4);
}
}
@keyframes fa-fade {
50% {
opacity: var(--fa-fade-opacity, 0.4);
}
}
@-webkit-keyframes fa-beat-fade {
0%, 100% {
opacity: var(--fa-beat-fade-opacity, 0.4);
-webkit-transform: scale(1);
transform: scale(1);
}
50% {
opacity: 1;
-webkit-transform: scale(var(--fa-beat-fade-scale, 1.125));
transform: scale(var(--fa-beat-fade-scale, 1.125));
}
}
@keyframes fa-beat-fade {
0%, 100% {
opacity: var(--fa-beat-fade-opacity, 0.4);
-webkit-transform: scale(1);
transform: scale(1);
}
50% {
opacity: 1;
-webkit-transform: scale(var(--fa-beat-fade-scale, 1.125));
transform: scale(var(--fa-beat-fade-scale, 1.125));
}
}
@-webkit-keyframes fa-flip {
50% {
-webkit-transform: scale(-1, 1);
transform: scale(-1, 1);
}
}
@keyframes fa-flip {
50% {
-webkit-transform: scale(-1, 1);
transform: scale(-1, 1);
}
}
@-webkit-keyframes fa-shake {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
25% {
-webkit-transform: rotate(var(--fa-shake-angle, -12.5deg));
transform: rotate(var(--fa-shake-angle, -12.5deg));
}
75% {
-webkit-transform: rotate(calc(var(--fa-shake-angle, -12.5deg) * -1));
transform: rotate(calc(var(--fa-shake-angle, -12.5deg) * -1));
}
100% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
}
@keyframes fa-shake {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
25% {
-webkit-transform: rotate(var(--fa-shake-angle, -12.5deg));
transform: rotate(var(--fa-shake-angle, -12.5deg));
}
75% {
-webkit-transform: rotate(calc(var(--fa-shake-angle, -12.5deg) * -1));
transform: rotate(calc(var(--fa-shake-angle, -12.5deg) * -1));
}
100% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
}
@-webkit-keyframes fa-spin {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes fa-spin {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
min-height: 100vh;
color: #333;
line-height: 1.6;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
/* 头部 */
.header {
background: rgba(255,255,255,0.95);
backdrop-filter: blur(10px);
box-shadow: 0 2px 20px rgba(0,0,0,0.1);
position: sticky;
top: 0;
z-index: 999;
}
.header-inner {
display: flex;
justify-content: space-between;
align-items: center;
padding: 15px 0;
}
.logo {
font-size: 24px;
font-weight: bold;
color: #667eea;
display: flex;
align-items: center;
gap: 10px;
}
.logo i {
font-size: 28px;
}
.nav {
display: flex;
gap: 30px;
align-items: center;
}
.nav a {
color: #333;
text-decoration: none;
font-weight: 500;
transition: color 0.3s;
display: flex;
align-items: center;
gap: 6px;
}
.nav a:hover {
color: #667eea;
}
.btn {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white !important;
padding: 8px 20px;
border-radius: 25px;
transition: transform 0.3s, box-shadow 0.3s;
}
.btn:hover {
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);
}
/* Hero区域 */
.hero {
padding: 80px 0;
text-align: center;
color: white;
}
.hero h1 {
font-size: 48px;
margin-bottom: 20px;
font-weight: 700;
text-shadow: 0 2px 10px rgba(0,0,0,0.2);
}
.hero p {
font-size: 20px;
margin-bottom: 40px;
opacity: 0.95;
max-width: 700px;
margin-left: auto;
margin-right: auto;
}
.hero-btns {
display: flex;
gap: 20px;
justify-content: center;
flex-wrap: wrap;
}
.btn-primary, .btn-secondary {
padding: 14px 35px;
border-radius: 30px;
text-decoration: none;
font-weight: 600;
font-size: 16px;
transition: all 0.3s;
display: inline-flex;
align-items: center;
gap: 8px;
}
.btn-primary {
background: white;
color: #667eea;
}
.btn-primary:hover {
transform: translateY(-3px);
box-shadow: 0 10px 25px rgba(0,0,0,0.2);
}
.btn-secondary {
background: rgba(255,255,255,0.2);
color: white;
border: 2px solid white;
}
.btn-secondary:hover {
background: white;
color: #667eea;
transform: translateY(-3px);
}
/* 数据统计 */
.stats {
padding: 40px 0;
margin-bottom: 60px;
}
.stats-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 25px;
}
.stat-card {
background: white;
border-radius: 15px;
padding: 30px 20px;
text-align: center;
box-shadow: 0 5px 20px rgba(0,0,0,0.08);
transition: transform 0.3s;
}
.stat-card:hover {
transform: translateY(-5px);
}
.stat-card i {
font-size: 36px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
margin-bottom: 15px;
}
.stat-number {
font-size: 32px;
font-weight: bold;
color: #333;
margin-bottom: 5px;
}
.stat-label {
color: #666;
font-size: 14px;
}
/* 通用区块 */
.section {
padding: 60px 0;
background: white;
border-radius: 20px;
margin-bottom: 40px;
box-shadow: 0 5px 30px rgba(0,0,0,0.08);
}
.section-header {
text-align: center;
margin-bottom: 50px;
}
.section-tag {
display: inline-block;
background: linear-gradient(135deg, #667eea20 0%, #764ba220 100%);
color: #667eea;
padding: 5px 15px;
border-radius: 20px;
font-size: 14px;
font-weight: 600;
margin-bottom: 15px;
}
.section-title {
font-size: 32px;
color: #333;
margin-bottom: 15px;
}
.section-desc {
color: #666;
font-size: 16px;
max-width: 600px;
margin: 0 auto;
}
/* 优势卡片 */
.features-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 30px;
}
.feature-card {
text-align: center;
padding: 30px 20px;
border-radius: 15px;
transition: all 0.3s;
border: 1px solid #f0f0f0;
}
.feature-card:hover {
border-color: #667eea;
box-shadow: 0 10px 30px rgba(102, 126, 234, 0.1);
transform: translateY(-5px);
}
.feature-icon {
width: 70px;
height: 70px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 20px;
color: white;
font-size: 28px;
}
.feature-card h3 {
font-size: 18px;
margin-bottom: 12px;
color: #333;
}
.feature-card p {
color: #666;
font-size: 14px;
line-height: 1.7;
}
/* 业务分类 */
.business-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 25px;
}
.business-card {
border: 1px solid #f0f0f0;
border-radius: 15px;
padding: 25px;
transition: all 0.3s;
display: flex;
gap: 20px;
}
.business-card:hover {
border-color: #667eea;
box-shadow: 0 10px 30px rgba(102, 126, 234, 0.1);
transform: translateY(-3px);
}
.business-icon {
width: 55px;
height: 55px;
min-width: 55px;
border-radius: 12px;
background: linear-gradient(135deg, #667eea20 0%, #764ba220 100%);
display: flex;
align-items: center;
justify-content: center;
color: #667eea;
font-size: 24px;
}
.business-content h4 {
font-size: 17px;
margin-bottom: 8px;
color: #333;
}
.business-content p {
font-size: 14px;
color: #666;
line-height: 1.6;
}
.business-content .tag {
display: inline-block;
background: #f5f5f5;
color: #666;
padding: 2px 8px;
border-radius: 4px;
font-size: 12px;
margin-top: 8px;
margin-right: 5px;
}
/* CTA区域 */
.cta-section {
padding: 60px 0;
text-align: center;
}
.cta-box {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
border-radius: 20px;
padding: 60px 40px;
color: white;
}
.cta-box h2 {
font-size: 32px;
margin-bottom: 15px;
}
.cta-box p {
font-size: 16px;
opacity: 0.9;
margin-bottom: 30px;
max-width: 500px;
margin-left: auto;
margin-right: auto;
}
/* 页脚 */
.footer {
background: #2c2c3e;
color: #aaa;
padding: 50px 0 20px;
margin-top: 60px;
}
.footer-grid {
display: grid;
grid-template-columns: 2fr 1fr 1fr 1fr;
gap: 40px;
margin-bottom: 40px;
}
.footer-about h3 {
color: white;
font-size: 22px;
margin-bottom: 15px;
}
.footer-about p {
font-size: 14px;
line-height: 1.8;
margin-bottom: 20px;
}
.footer-col h4 {
color: white;
font-size: 16px;
margin-bottom: 20px;
}
.footer-col ul {
list-style: none;
}
.footer-col ul li {
margin-bottom: 10px;
}
.footer-col ul li a {
color: #aaa;
text-decoration: none;
font-size: 14px;
transition: color 0.3s;
}
.footer-col ul li a:hover {
color: white;
}
.footer-bottom {
border-top: 1px solid #3d3d52;
padding-top: 20px;
text-align: center;
font-size: 14px;
}
/* 汉堡按钮（仅手机显示） */
.nav-toggle {
display: none;
background: none;
border: none;
font-size: 28px;
color: #667eea;
cursor: pointer;
padding: 12px;
width: 48px;
height: 48px;
position: relative;
z-index: 1000;
-webkit-tap-highlight-color: transparent;
outline: none;
user-select: none;
touch-action: manipulation;
}
.nav-toggle.is-active {
color: #764ba2;
}
/* 响应式 - 平板 */
@media (max-width: 900px) {
.nav {
gap: 18px;
font-size: 14px;
}
.nav a i {
display: none;
}
.stats-grid {
grid-template-columns: repeat(2, 1fr);
}
.features-grid {
grid-template-columns: repeat(2, 1fr);
}
.business-grid {
grid-template-columns: repeat(2, 1fr);
}
.footer-grid {
grid-template-columns: 1fr 1fr;
gap: 30px;
}
}
/* 响应式 - 手机 */
@media (max-width: 640px) {
.container {
padding: 0 16px;
}
/* 头部 */
.header-inner {
padding: 12px 0;
}
.logo {
font-size: 20px;
}
.logo i {
font-size: 24px;
}
.nav-toggle {
display: block;
}
.nav {
position: fixed;
top: 64px;
left: 0;
right: 0;
background: white;
flex-direction: column;
gap: 0;
padding: 10px 0;
box-shadow: 0 10px 20px rgba(0,0,0,0.12);
display: none;
z-index: 998;
}
.nav.nav-open {
display: flex;
}
.nav a {
padding: 14px 24px;
border-bottom: 1px solid #f3f3f3;
font-size: 16px;
width: 100%;
}
.nav a:last-child {
border-bottom: none;
margin: 10px 16px;
width: calc(100% - 32px);
justify-content: center;
padding: 12px 20px;
}
.nav a i {
display: inline-block !important;
width: 24px;
text-align: center;
}
/* Hero */
.hero {
padding: 40px 0 30px;
}
.hero h1 {
font-size: 26px;
line-height: 1.3;
margin-bottom: 14px;
}
.hero p {
font-size: 15px;
line-height: 1.6;
margin-bottom: 24px;
}
.hero-btns {
flex-direction: column;
gap: 12px;
padding: 0 20px;
}
.btn-primary, .btn-secondary {
width: 100%;
justify-content: center;
padding: 14px 20px;
font-size: 16px;
}
/* 数据统计 */
.stats {
padding: 20px 0;
margin-bottom: 20px;
}
.stats-grid {
grid-template-columns: repeat(2, 1fr);
gap: 12px;
}
.stat-card {
padding: 20px 12px;
border-radius: 12px;
}
.stat-card i {
font-size: 28px;
margin-bottom: 8px;
}
.stat-number {
font-size: 24px;
}
.stat-label {
font-size: 13px;
}
/* 通用区块 */
.section {
padding: 30px 0;
border-radius: 16px;
margin-bottom: 20px;
}
.section-header {
margin-bottom: 24px;
}
.section-tag {
font-size: 13px;
padding: 4px 12px;
}
.section-title {
font-size: 22px;
margin-bottom: 10px;
}
.section-desc {
font-size: 14px;
padding: 0 10px;
}
/* 优势卡片 */
.features-grid {
grid-template-columns: 1fr;
gap: 12px;
padding: 0 4px;
}
.feature-card {
padding: 22px 18px;
text-align: left;
display: flex;
flex-direction: column;
}
.feature-icon {
width: 50px;
height: 50px;
font-size: 22px;
margin: 0 0 14px 0;
border-radius: 12px;
}
.feature-card h3 {
font-size: 16px;
margin-bottom: 8px;
}
.feature-card p {
font-size: 14px;
line-height: 1.6;
}
/* 业务卡片 */
.business-grid {
grid-template-columns: 1fr;
gap: 12px;
padding: 0 4px;
}
.business-card {
padding: 18px;
border-radius: 12px;
gap: 14px;
}
.business-icon {
width: 46px;
height: 46px;
min-width: 46px;
font-size: 20px;
border-radius: 10px;
}
.business-content h4 {
font-size: 16px;
}
.business-content p {
font-size: 13px;
line-height: 1.6;
}
.business-content .tag {
font-size: 11px;
padding: 2px 7px;
}
/* CTA */
.cta-section {
padding: 30px 0;
}
.cta-box {
padding: 35px 20px;
border-radius: 16px;
}
.cta-box h2 {
font-size: 22px;
}
.cta-box p {
font-size: 14px;
margin-bottom: 22px;
}
.cta-box .btn-primary {
font-size: 16px !important;
padding: 14px 28px !important;
width: 100%;
justify-content: center;
}
/* 常见问题 */
.features-grid[style] {
grid-template-columns: 1fr !important;
}
.feature-card[style] {
padding: 18px !important;
}
.feature-card[style] h3 {
font-size: 15px;
line-height: 1.4;
}
.feature-card[style] p {
font-size: 14px !important;
line-height: 1.6;
}
/* 页脚 */
.footer {
padding: 35px 0 15px;
margin-top: 30px;
}
.footer-grid {
grid-template-columns: 1fr;
gap: 24px;
margin-bottom: 20px;
}
.footer-about h3 {
font-size: 18px;
}
.footer-about p {
font-size: 13px;
}
.footer-col h4 {
font-size: 15px;
margin-bottom: 12px;
}
.footer-col ul li {
margin-bottom: 8px;
}
.footer-col ul li a {
font-size: 13px;
}
.footer-bottom {
padding-top: 15px;
font-size: 12px;
}
}
/* 超小屏补充 */
@media (max-width: 380px) {
.hero h1 {
font-size: 22px;
}
.section-title {
font-size: 20px;
}
.cta-box h2 {
font-size: 20px;
}
}