@charset "UTF-8";
:root{
--primary:#00963C;
--primary-dark:#007A30;
--primary-deep:#005C24;
--primary-light:#33B565;
--primary-lighter:#E6F7EE;
--primary-glow:rgba(0, 150, 60, 0.15);
--accent:#00C853;
--accent-dark:#00963C;
--accent-light:#33E07A;
--accent-lighter:#E6FAEE;
--dark:#1A1A1A;
--dark-2:#222;
--dark-3:#333;
--gray-50:#F7F8FA;
--gray-100:#EEF0F3;
--gray-200:#E8E8E8;
--gray-300:#CCC;
--gray-400:#999;
--gray-500:#666;
--gray-600:#444;
--white:#FFF;
--black:#000;
--gradient-primary:linear-gradient(135deg, #007A30 0%, #00963C 100%);
--gradient-accent:linear-gradient(135deg, #00963C 0%, #00C853 100%);
--gradient-dark:linear-gradient(180deg, #1A1A1A 0%, #2A2A2A 100%);
--gradient-green-dark:linear-gradient(180deg, #003D18 0%, #005C24 50%, #00963C 100%);
--shadow-xs:0 2px 8px rgba(0, 0, 0, 0.04);
--shadow-sm:0 4px 16px rgba(0, 0, 0, 0.06);
--shadow-md:0 8px 32px rgba(0, 0, 0, 0.08);
--shadow-lg:0 16px 48px rgba(0, 0, 0, 0.12);
--shadow-primary:0 12px 36px rgba(0, 150, 60, 0.25);
--shadow-accent:0 12px 36px rgba(0, 200, 83, 0.25);
--radius-sm:8px;
--radius-md:12px;
--radius-lg:20px;
--radius-xl:28px;
--transition:all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
--transition-fast:all 0.2s ease;
}
*{
box-sizing:border-box;
margin:0;
padding:0;
outline:none;
-webkit-tap-highlight-color:transparent;
}
html{
scroll-behavior:smooth;
}
::-webkit-scrollbar{
width:10px;
height:10px;
}
::-webkit-scrollbar-track{
background:#f1f1f1;
}
::-webkit-scrollbar-thumb{
background:var(--primary);
border-radius:5px;
}
::-webkit-scrollbar-thumb:hover{
background:var(--primary-dark);
}
html, body{
height:100%;
font-size:16px;
line-height:1.6;
color:var(--dark-3);
background:var(--white);
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
}
html{
overflow-x:hidden;
}
body{
font-family:'PingFang SC', 'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, 'Hiragino Sans GB', 'Heiti SC', sans-serif;
overflow-x:hidden;
}
a{
text-decoration:none;
color:inherit;
transition:var(--transition-fast);
}
a:hover{
color:var(--primary);
}
ul, ol{
list-style:none;
}
img{
display:block;
max-width:100%;
height:auto;
}
button{
cursor:pointer;
font-family:inherit;
border:none;
background:none;
}
input, textarea, select{
font-family:inherit;
outline:none;
}
.container{
max-width:1280px;
margin:0 auto;
padding:0 40px;
}
.section{
padding:120px 0;
position:relative;
}
.section-sm{
padding:80px 0;
}
.fade-in-up{
opacity:0;
transform:translateY(40px);
transition:opacity 0.8s ease, transform 0.8s ease;
}
.fade-in-up.visible{
opacity:1;
transform:translateY(0);
}
.delay-1{transition-delay:0.1s}
.delay-2{transition-delay:0.2s}
.delay-3{transition-delay:0.3s}
.delay-4{transition-delay:0.4s}
.delay-5{transition-delay:0.5s}
.section-header{
text-align:center;
margin-bottom:70px;
}
.section-tag{
display:inline-block;
padding:6px 20px;
background:var(--primary-lighter);
color:var(--primary);
font-size:13px;
font-weight:600;
letter-spacing:2px;
border-radius:100px;
margin-bottom:18px;
}
.section-title{
font-size:clamp(28px, 3.2vw, 42px);
font-weight:700;
color:var(--dark);
line-height:1.3;
margin-bottom:14px;
}
.section-title .highlight{
color:var(--primary);
}
.section-desc{
font-size:16px;
color:var(--gray-500);
max-width:600px;
margin:0 auto;
}
.btn{
display:inline-flex;
align-items:center;
justify-content:center;
padding:14px 36px;
font-size:15px;
font-weight:600;
border-radius:100px;
transition:var(--transition);
cursor:pointer;
border:2px solid transparent;
letter-spacing:1px;
}
.btn-lg{
padding:18px 48px;
font-size:16px;
}
.btn-sm{
padding:10px 24px;
font-size:14px;
}
.btn-primary{
background:var(--primary);
color:var(--white);
}
.btn-primary:hover{
background:var(--primary-dark);
color:var(--white);
transform:translateY(-2px);
box-shadow:var(--shadow-primary);
}
.btn-accent{
background:var(--accent);
color:var(--white);
}
.btn-accent:hover{
background:var(--accent-dark);
color:var(--white);
transform:translateY(-2px);
box-shadow:var(--shadow-accent);
}
.btn-outline{
background:transparent;
color:var(--primary);
border-color:var(--primary);
}
.btn-outline:hover{
background:var(--primary);
color:var(--white);
transform:translateY(-2px);
}
.btn-white{
background:var(--white);
color:var(--primary);
}
.btn-white:hover{
background:var(--primary-lighter);
color:var(--primary-dark);
transform:translateY(-2px);
}
.btn-ghost{
background:transparent;
color:var(--white);
border-color:rgba(255, 255, 255, 0.4);
}
.btn-ghost:hover{
background:var(--white);
color:var(--primary);
border-color:var(--white);
}
.btn-arrow::after{
content:'\2192';
margin-left:8px;
transition:transform 0.3s ease;
}
.btn-arrow:hover::after{
transform:translateX(4px);
}
.navbar{
position:fixed;
top:0;
left:0;
right:0;
z-index:1000;
transition:var(--transition);
background:transparent;
backdrop-filter:none;
-webkit-backdrop-filter:none;
border-bottom:1px solid transparent;
}
.navbar.scrolled{
top:0;
left:0;
right:0;
background:rgba(255, 255, 255, 0.95);
backdrop-filter:blur(20px);
-webkit-backdrop-filter:blur(20px);
box-shadow:var(--shadow-sm);
border-bottom:1px solid rgba(0, 0, 0, 0.04);
}
.navbar.scrolled .navbar-inner{
padding:12px 0;
}
.navbar-inner{
max-width:1280px;
margin:0 auto;
padding:18px 40px;
display:flex;
justify-content:space-between;
align-items:center;
transition:var(--transition);
}
.nav-brand{
display:flex;
align-items:center;
gap:10px;
color:var(--white);
transition:var(--transition);
}
.navbar.scrolled .nav-brand{
color:var(--dark);
}
.nav-brand img{
height:36px;
width:auto;
}
.nav-brand .brand-name{
font-size:18px;
font-weight:700;
letter-spacing:1px;
}
.nav-menu{
display:flex;
align-items:center;
gap:8px;
}
.nav-menu > li{
position:relative;
}
.nav-menu > li > a{
display:inline-block;
padding:10px 20px;
color:var(--white);
font-size:15px;
font-weight:500;
position:relative;
border-radius:6px;
transition:var(--transition);
}
.navbar.scrolled .nav-menu > li > a{
color:var(--dark-3);
}
.nav-menu > li > a::after{
content:'';
position:absolute;
bottom:2px;
left:50%;
transform:translateX(-50%);
width:0;
height:2px;
background:var(--accent);
border-radius:2px;
transition:width 0.3s ease;
}
.nav-menu > li > a:hover, 
.nav-menu > li.active > a{
color:var(--accent);
}
.nav-menu > li.active > a::after, 
.nav-menu > li > a:hover::after{
width:20px;
}
.nav-menu > li.has-sub > a{
padding-right:22px;
}
.nav-menu > li.has-sub > a::before{
content:'▾';
position:absolute;
right:4px;
top:50%;
transform:translateY(-50%);
font-size:11px;
color:inherit;
opacity:.55;
transition:transform .25s, opacity .25s;
}
.nav-menu > li.has-sub:hover > a::before{
opacity:1;
transform:translateY(-50%) rotate(180deg);
}
.nav-cta{
display:flex;
align-items:center;
gap:16px;
}
.nav-phone{
color:var(--white);
font-size:14px;
font-weight:600;
display:flex;
align-items:center;
gap:6px;
}
.navbar.scrolled .nav-phone{
color:var(--primary);
}
.nav-hamburger{
display:none;
flex-direction:column;
gap:5px;
padding:8px;
background:none;
border:none;
cursor:pointer;
}
.nav-hamburger span{
display:block;
width:24px;
height:2px;
background:currentColor;
transition:var(--transition);
}
.nav-submenu{
position:absolute;
top:100%;
left:50%;
transform:translateX(-50%) translateY(10px);
background:var(--white);
border-radius:var(--radius-md);
box-shadow:var(--shadow-lg);
padding:12px 0;
min-width:180px;
opacity:0;
visibility:hidden;
transition:var(--transition);
z-index:100;
}
.nav-menu > li:hover > .nav-submenu{
opacity:1;
visibility:visible;
transform:translateX(-50%) translateY(0);
}
.nav-submenu a{
display:block;
padding:10px 20px;
color:var(--gray-500);
font-size:14px;
}
.nav-submenu a:hover{
color:var(--primary);
background:var(--primary-lighter);
}
.s1-hero{
position:relative;
min-height:100vh;
overflow:hidden;
background:var(--dark);
}
.s1-swiper{
width:100%;
height:100vh;
}
.s1-slide{
position:relative;
width:100%;
height:100%;
background-size:cover;
background-position:center;
}
.s1-slide-overlay{
position:absolute;
inset:0;
background:linear-gradient(90deg, rgba(0, 61, 24, 0.85) 0%, rgba(0, 92, 36, 0.6) 50%, rgba(0, 0, 0, 0.3) 100%);
z-index:1;
}
.s1-slide .video-bg{
position:absolute;
inset:0;
background:var(--gradient-green-dark);
}
.s1-slide video{
position:absolute;
inset:0;
width:100%;
height:100%;
object-fit:cover;
}
.s1-content{
position:relative;
z-index:2;
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
text-align:center;
max-width:1280px;
margin:0 auto;
height:100%;
padding:0 40px;
}
.s1-badge{
display:none;
}
.s1-title{
font-size:clamp(32px, 5vw, 72px);
font-weight:800;
color:var(--white);
line-height:1.2;
margin:0 0 24px;
max-width:900px;
text-shadow:0 2px 20px rgba(0, 0, 0, 0.3);
}
.s1-subtitle{
font-size:clamp(15px, 1.4vw, 20px);
font-weight:400;
color:rgba(255, 255, 255, 0.9);
line-height:1.7;
margin:0 0 40px;
max-width:700px;
}
.s1-actions{
display:flex;
gap:16px;
flex-wrap:wrap;
}
.s1-actions .btn-accent{
background:var(--accent);
color:var(--white);
}
.s1-actions .btn-accent:hover{
background:var(--accent-dark);
box-shadow:0 12px 36px rgba(255, 106, 0, 0.4);
}
.s1-meta{
position:absolute;
right:40px;
bottom:80px;
z-index:3;
text-align:right;
color:var(--white);
}
.s1-meta .s1-tip{
font-size:13px;
letter-spacing:3px;
opacity:0.6;
margin-bottom:8px;
}
.s1-meta .s1-num{
font-size:48px;
font-weight:700;
line-height:1;
}
.s1-meta .s1-num-total{
font-size:20px;
font-weight:400;
opacity:0.5;
margin-left:4px;
}
.s1-progress{
position:absolute;
left:40px;
bottom:80px;
z-index:3;
width:200px;
height:2px;
background:rgba(255, 255, 255, 0.2);
border-radius:2px;
overflow:hidden;
}
.s1-progress-bar{
height:100%;
width:0;
background:var(--accent);
border-radius:2px;
transition:width 0.3s ease;
}
.s1-scroll-hint{
position:absolute;
left:50%;
bottom:20px;
transform:translateX(-50%);
z-index:3;
display:flex;
flex-direction:column;
align-items:center;
gap:8px;
animation:scrollBounce 2s infinite;
pointer-events:none;
}
.s1-scroll-hint .mouse{
width:22px;
height:36px;
border:2px solid rgba(255, 255, 255, 0.7);
border-radius:11px;
position:relative;
}
.s1-scroll-hint .mouse::after{
content:'';
position:absolute;
top:8px;
left:50%;
transform:translateX(-50%);
width:3px;
height:8px;
background:var(--white);
border-radius:2px;
animation:scrollDot 1.5s infinite;
}
.s1-scroll-hint .label{
color:rgba(255, 255, 255, 0.6);
font-size:10px;
letter-spacing:3px;
font-weight:500;
}
@keyframes scrollBounce{
0%, 100%{transform:translateX(-50%) translateY(0)}
50%{transform:translateX(-50%) translateY(8px)}
}
@keyframes scrollDot{
0%{opacity:1; transform:translateX(-50%) translateY(0)}
100%{opacity:0; transform:translateX(-50%) translateY(12px)}
}
.s1-swiper .swiper-pagination{
bottom:110px;
left:50%;
transform:translateX(-50%);
width:auto;
display:flex;
gap:10px;
}
.s1-bars{
position:absolute;
left:50%;
bottom:80px;
transform:translateX(-50%);
z-index:4;
display:flex;
gap:10px;
pointer-events:auto;
}
.s1-bar{
width:clamp(50px, 5vw, 80px);
height:3px;
background:rgba(255, 255, 255, 0.25);
border-radius:2px;
cursor:pointer;
overflow:hidden;
position:relative;
transition:height 0.25s ease, background 0.25s ease;
}
.s1-bar:hover{
height:4px;
background:rgba(255, 255, 255, 0.4);
}
.s1-bar.active{
height:4px;
background:rgba(255, 255, 255, 0.3);
}
.s1-bar-fill{
display:block;
position:absolute;
left:0;
top:0;
height:100%;
width$10;
background:var(--primary, #2e7d32);
border-radius:2px;
transition:width 0.08s linear;
}
.s1-bar.active .s1-bar-fill{
background:#4caf50;
box-shadow:0 0 8px rgba(76, 175, 80, 0.5);
}
.s2-services{
display:flex;
position:relative;
min-height:100vh;
}
.s2-left-block{
width:66.66%;
position:relative;
}
.s2-right-block{
width:33.33%;
display:flex;
flex-wrap:wrap;
}
.s2-origin{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background:linear-gradient(135deg, #002a10 0%, #003d18 50%, #005c24 100%);
z-index:1;
}
.s2-origin span{
display:block;
font-size:clamp(22px, 3.75vw, 60px);
color:#fff;
width:100%;
padding:0 9.375vw;
position:absolute;
top:50%;
transform:translateY(-50%);
line-height:1.4;
font-weight:500;
}
.s2-origin .more{
position:absolute;
left:9.375vw;
bottom:3.125vw;
display:inline-block;
font-size:clamp(14px, 1.2vw, 20px);
line-height:2;
color:#fff;
padding-bottom:4px;
border-bottom:1px solid rgba(255, 255, 255, 0.4);
transition:var(--transition);
}
.s2-origin .more:hover{
color:var(--accent);
border-color:var(--accent);
}
.s2-block{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
z-index:2;
background-color:#000;
}
.s2-box{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
opacity:0;
visibility:hidden;
transition:all .3s ease;
}
.s2-box.active{
opacity:1;
visibility:visible;
}
.s2-box .bg{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
overflow:hidden;
}
.s2-box .bg::after{
content:'';
position:absolute;
inset:0;
background:linear-gradient(90deg, rgba(0, 40, 20, 0.72) 0%, rgba(0, 50, 25, 0.4) 55%, rgba(0, 60, 30, 0.08) 100%);
}
.s2-box .bg-1{
background:linear-gradient(135deg, #052917 0%, #0b4626 45%, #0f6b3a 100%);
}
.s2-box .bg-1::before{
content:'';
position:absolute;
right:-80px; bottom:-60px;
width:400px; height:400px;
background:radial-gradient(circle, rgba(0, 200, 100, 0.4) 0%, rgba(0, 150, 60, 0.15) 50%, transparent 70%);
border-radius:50%;
box-shadow:0 0 140px 40px rgba(0, 150, 60, 0.25);
}
.s2-box .bg-2{
background:linear-gradient(150deg, #082218 0%, #0c3b25 50%, #095530 100%);
}
.s2-box .bg-2::before{
content:'';
position:absolute;
top:-60px; right:10%;
width:280px; height:280px;
border:2px solid rgba(0, 220, 120, 0.25);
border-radius:50%;
box-shadow:0 0 80px 20px rgba(0, 150, 60, 0.15);
}
.s2-box .bg-3{
background:linear-gradient(120deg, #061f14 0%, #0d3621 50%, #0a512c 100%);
}
.s2-box .bg-3::before{
content:'';
position:absolute;
left:40%; top:20%;
width:40px; height:40px;
background:rgba(0, 220, 120, 0.8);
border-radius:50%;
box-shadow:0 0 0 20px rgba(0, 220, 120, 0.08), 0 0 0 60px rgba(0, 220, 120, 0.04);
}
.s2-box .bg-4{
background:linear-gradient(160deg, #052619 0%, #0a3d26 50%, #0d5a31 100%);
}
.s2-box .bg-4::before{
content:'';
position:absolute;
right:-40px; top:50%;
width:200px; height:200px;
background:linear-gradient(45deg, transparent 40%, rgba(0, 220, 120, 0.25) 40%, rgba(0, 220, 120, 0.25) 60%, transparent 60%);
transform:rotate(45deg);
}
.s2-box .bg-5{
background:linear-gradient(140deg, #072318 0%, #0b3b24 40%, #0e5830 100%);
}
.s2-box .bg-5::before{
content:'';
position:absolute;
right:15%; bottom:15%;
width:160px; height:160px;
border:1px solid rgba(0, 220, 120, 0.2);
transform:rotate(30deg);
box-shadow:0 0 60px 10px rgba(0, 150, 60, 0.15);
}
.s2-box .bg-6{
background:linear-gradient(125deg, #04251a 0%, #0a3d24 50%, #0c5a30 100%);
}
.s2-box .bg-6::before{
content:'';
position:absolute;
right:8%; top:30%;
width:120px; height:120px;
background:rgba(0, 150, 60, 0.6);
clip-path:polygon(0 0, 100% 0, 50% 100%);
opacity:0.6;
box-shadow:0 0 80px 20px rgba(0, 150, 60, 0.3);
}
.s2-box .txt{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
z-index:2;
padding:0 9.375vw;
display:flex;
flex-direction:column;
justify-content:center;
align-items:flex-start;
}
.s2-box .num-tag{
position:absolute;
right:5vw;
top:6vw;
font-size:clamp(48px, 6vw, 120px);
font-weight:800;
color:transparent;
-webkit-text-stroke:2px rgba(0, 255, 140, 0.55);
line-height:1;
z-index:3;
pointer-events:none;
}
.s2-box .txt h3{
font-size:clamp(20px, 2.5vw, 48px);
color:#fff;
margin:0 0 clamp(12px, 1.5vw, 24px);
line-height:1.2;
font-weight:700;
}
.s2-box .txt .link{
display:flex;
flex-direction:column;
gap:0;
}
.s2-box .txt .link a{
display:block;
font-size:clamp(13px, 1.1vw, 16px);
color:#fff;
line-height:2;
transition:transform .3s ease;
}
.s2-box .txt .link a:not(.more):before{
content:'';
display:inline-block;
vertical-align:middle;
width:8px;
height:8px;
background-color:#00963C;
border-radius:50%;
margin:-2px 20px 0 0;
}
.s2-box .txt .link a.more{
margin-top:clamp(12px, 1.5vw, 24px);
padding-bottom:4px;
border-bottom:1px solid rgba(255, 255, 255, 0.4);
width:fit-content;
}
.s2-box .txt .link a.more:before{
display:none;
}
@media screen and (min-width:1025px){
.s2-box .txt .link a:not(.more):hover{
transform:translateX(10px);
}
.s2-box .txt .link a.more:hover{
color:#00DC78;
border-color:#00DC78;
}
}
.s2-right-block .item{
width:50%;
height:15vw;
min-height:33.33vh;
display:flex;
flex-direction:column;
justify-content:space-between;
padding:3.125vw;
box-sizing:border-box;
transition:background .3s ease;
background-color:#151515;
text-decoration:none;
}
.s2-right-block .item:nth-of-type(1){background-color:#151515}
.s2-right-block .item:nth-of-type(2){background-color:#181818}
.s2-right-block .item:nth-of-type(3){background-color:#1c1c1c}
.s2-right-block .item:nth-of-type(4){background-color:#202020}
.s2-right-block .item:nth-of-type(5){background-color:#242424}
.s2-right-block .item:nth-of-type(6){background-color:#282828}
.s2-right-block .item:before{
content:'';
width:4.375rem;
height:4.375rem;
flex-shrink:0;
background-position:center;
background-repeat:no-repeat;
background-size:contain;
transition:all .3s ease;
}
.s2-right-block .item:nth-of-type(1):before{background-image:url("/static/images/web.png")}
.s2-right-block .item:nth-of-type(2):before{background-image:url("/static/images/mobil.png")}
.s2-right-block .item:nth-of-type(3):before{background-image:url("/static/images/wechat.png")}
.s2-right-block .item:nth-of-type(4):before{background-image:url("/static/images/jiaohu.png")}
.s2-right-block .item:nth-of-type(5):before{background-image:url("/static/images/cloud.png")}
.s2-right-block .item:nth-of-type(6):before{background-image:url("/static/images/video.png")}
.s2-right-block .item h3{
font-size:clamp(13px, 1.1vw, 20px);
line-height:1.5;
color:#fff;
margin:0;
font-weight:600;
text-align:left;
white-space:pre-line;
transition:all .3s ease;
}
@media screen and (min-width:1025px){
.s2-right-block .item:hover, 
.s2-right-block .item.active{
background-color:#00963C !important;
justify-content:center;
align-items:center;
gap:14px;
}
.s2-right-block .item:hover h3, 
.s2-right-block .item.active h3{
text-align:center;
}
}
.s3-advantages{
position:relative;
width:100%;
min-height:100vh;
display:flex;
overflow:hidden;
background-color:#DCEDE0 !important;
}
.s3-content-wrap{
position:relative;
width:100%;
min-height:100vh;
display:flex;
}
.s3-gear-wrap{
position:relative;
flex:0 0 55%;
min-height:100vh;
background-color:#DCEDE0 !important;
}
.s3-gear-panel{
position:absolute;
left:0;
top:0;
width:100%;
height:100%;
border-radius:0 50% 50% 0;
overflow:hidden;
opacity:0;
visibility:hidden;
transition:opacity 0.5s ease, visibility 0.5s ease;
}
.s3-gear-panel.active{
opacity:1;
visibility:visible;
}
.s3-gear-bg{
position:absolute;
inset:0;
background:linear-gradient(135deg, #043d1d 0%, #00963C 40%, #00c853 100%);
}
.s3-gear-bg::before{
content:'';
position:absolute;
inset:0;
background:
radial-gradient(ellipse at 20% 85%, rgba(255, 255, 255, 0.12) 0%, transparent 55%), 
radial-gradient(ellipse at 80% 15%, rgba(0, 0, 0, 0.18) 0%, transparent 50%);
}
.s3-gear-bg::after{
content:'';
position:absolute;
right:8%;
top:10%;
width:clamp(180px, 18vw, 320px);
height:clamp(180px, 18vw, 320px);
border-radius:50%;
border:2px dashed rgba(255, 255, 255, 0.2);
animation:s3GearSpin 40s linear infinite;
}
@keyframes s3GearSpin{
from{transform:rotate(0deg)}
to{transform:rotate(360deg)}
}
.s3-gear-content{
position:relative;
z-index:2;
height:100%;
display:flex;
flex-direction:column;
justify-content:center;
padding:clamp(60px, 7vw, 120px) clamp(40px, 5vw, 80px);
color:#fff;
}
.s3-num-tag{
position:absolute;
top:clamp(24px, 3vw, 48px);
left:clamp(24px, 3vw, 48px);
font-size:clamp(80px, 10vw, 180px);
font-weight:900;
color:transparent;
-webkit-text-stroke:2px rgba(255, 255, 255, 0.22);
line-height:1;
pointer-events:none;
}
.s3-en-tag{
display:inline-block;
padding:6px 18px;
background:rgba(255, 255, 255, 0.15);
color:#fff;
font-size:12px;
letter-spacing:3px;
border-radius:100px;
margin-bottom:28px;
width:fit-content;
backdrop-filter:blur(6px);
}
.s3-main-title{
font-size:clamp(36px, 4.5vw, 72px);
font-weight:800;
margin:0 0 16px;
line-height:1.2;
color:#fff;
}
.s3-main-sub{
font-size:clamp(15px, 1.3vw, 20px);
color:rgba(255, 255, 255, 0.8);
margin:0 0 48px;
}
.s3-data-row{
display:flex;
gap:clamp(24px, 3vw, 56px);
flex-wrap:wrap;
}
.s3-data-item{
display:flex;
flex-direction:column;
gap:4px;
}
.s3-data-item em{
font-style:normal;
font-size:clamp(32px, 3.8vw, 60px);
font-weight:800;
color:#fff;
line-height:1;
}
.s3-data-item span{
font-size:clamp(16px, 1.8vw, 24px);
font-weight:700;
color:rgba(255, 255, 255, 0.8);
}
.s3-data-item label{
font-size:clamp(12px, 1vw, 14px);
color:rgba(255, 255, 255, 0.65);
letter-spacing:1px;
}
.s3-detail-title{
font-size:clamp(32px, 4vw, 60px);
font-weight:800;
margin:0 0 20px;
line-height:1.2;
color:#fff;
}
.s3-detail-desc{
font-size:clamp(14px, 1.2vw, 18px);
color:rgba(255, 255, 255, 0.85);
line-height:1.8;
margin:0 0 28px;
max-width:520px;
}
.s3-detail-list{
list-style:none;
padding:0;
margin:0;
display:grid;
gap:14px;
}
.s3-detail-list li{
font-size:clamp(14px, 1.1vw, 17px);
color:rgba(255, 255, 255, 0.92);
padding-left:28px;
position:relative;
line-height:1.6;
}
.s3-detail-list li::before{
content:'';
position:absolute;
left:0;
top:50%;
width:10px;
height:10px;
background:#fff;
border-radius:50%;
transform:translateY(-50%);
box-shadow:0 0 0 4px rgba(255, 255, 255, 0.2);
}
.s3-list-wrap{
position:relative;
flex:1;
display:flex;
flex-direction:column;
justify-content:center;
padding:clamp(60px, 7vw, 120px) clamp(40px, 5vw, 100px);
background-color:#DCEDE0 !important;
}
.s3-list-wrap::before{
content:'';
position:absolute;
right:0;
top:0;
width:1px;
height:100%;
background:linear-gradient(180deg, transparent 10%, rgba(0, 150, 60, 0.30) 50%, transparent 90%);
}
.s3-list-title{
display:flex;
align-items:center;
gap:12px;
margin-bottom:clamp(24px, 3vw, 40px);
}
.s3-list-bar{
display:inline-block;
width:36px;
height:2px;
background:#00963C;
}
.s3-list-label{
font-size:13px;
font-weight:700;
color:#00963C;
letter-spacing:3px;
}
.s3-list{
display:flex;
flex-direction:column;
border-top:1px solid rgba(0, 100, 45, 0.12);
}
.s3-item{
display:flex;
align-items:center;
gap:16px;
padding:clamp(16px, 2vw, 24px) 0;
text-decoration:none;
border-bottom:1px solid rgba(0, 100, 45, 0.12);
transition:all 0.3s ease;
position:relative;
}
.s3-item-dot{
width:8px;
height:8px;
border-radius:50%;
background:#00963C;
flex-shrink:0;
transition:all 0.3s ease;
}
.s3-item-text{
font-size:clamp(15px, 1.3vw, 20px);
color:#2a4a37;
font-weight:500;
transition:all 0.3s ease;
}
@media screen and (min-width:1025px){
.s3-item:hover, 
.s3-item.active{
padding-left:12px;
}
.s3-item:hover .s3-item-dot, 
.s3-item.active .s3-item-dot{
background:#00963C;
width:12px;
height:12px;
box-shadow:0 0 10px rgba(0, 150, 60, 0.4);
}
.s3-item:hover .s3-item-text, 
.s3-item.active .s3-item-text{
color:#006e28;
font-weight:700;
}
}
.s4-cases{
position:relative;
width:100%;
background:linear-gradient(180deg, #DCEDE0 0%, #DCEDE0 100%);
overflow:hidden;
}
.s4-cases::before{
content:'';
position:absolute;
inset:0;
background-image:
linear-gradient(rgba(0, 100, 45, 0.06) 1px, transparent 1px), 
linear-gradient(90deg, rgba(0, 100, 45, 0.06) 1px, transparent 1px);
background-size:40px 40px, 40px 40px;
pointer-events:none;
z-index:0;
}
.s4-head-full{
position:relative;
width:100%;
padding:clamp(50px, 6vw, 100px) 0 clamp(40px, 4vw, 70px);
background:linear-gradient(180deg, #00963C 0%, rgba(0, 150, 60, 0.85) 40%, rgba(0, 150, 60, 0.55) 75%, rgba(0, 150, 60, 0.15) 100%);
z-index:1;
text-align:center;
}
.s4-head-inner{
max-width:1800px;
margin:0 auto;
padding:0 clamp(20px, 3vw, 48px);
display:flex;
flex-direction:column;
align-items:center;
}
.s4-en-label{
display:inline-block;
font-size:12px;
font-weight:600;
color:#00DC78;
letter-spacing:4px;
padding:6px 18px;
background:rgba(0, 220, 120, 0.1);
border:1px solid rgba(0, 220, 120, 0.3);
border-radius:100px;
margin-bottom:20px;
text-align:center;
}
.s4-head-title{
font-size:clamp(36px, 4.5vw, 72px);
font-weight:800;
color:#fff;
margin:0 0 16px;
line-height:1.2;
text-align:center;
}
.s4-head-sub{
font-size:clamp(15px, 1.3vw, 19px);
color:rgba(255, 255, 255, 0.65);
margin:0 0 24px;
text-align:center;
}
.s4-more-btn{
display:inline-block;
font-size:14px;
color:#00DC78;
text-decoration:none;
font-weight:600;
letter-spacing:1px;
transition:all 0.3s ease;
text-align:center;
}
.s4-more-btn:hover{
color:#fff;
letter-spacing:2px;
}
.s4-container{
max-width:1800px;
width:96vw;
padding:0;
margin:0 auto;
position:relative;
z-index:1;
}
.s4-grid{
display:grid;
grid-template-columns:repeat(4, 1fr);
gap:clamp(20px, 2.5vw, 38px);
padding:clamp(32px, 4vw, 56px) 0 clamp(60px, 7vw, 100px);
}
.s4-card{
position:relative;
display:flex;
flex-direction:column;
background:#fff;
border-radius:14px;
overflow:hidden;
box-shadow:0 2px 16px rgba(0, 60, 30, 0.08);
transition:transform 0.35s ease, box-shadow 0.35s ease;
border:1px solid rgba(0, 150, 60, 0.08);
}
.s4-card:hover{
transform:translateY(-6px);
box-shadow:0 22px 52px rgba(0, 96, 40, 0.20);
border-color:rgba(0, 150, 60, 0.30);
}
.s4-card-img{
position:relative;
display:block;
width:100%;
aspect-ratio:16 / 10;
overflow:hidden;
background:#f0f0f0;
text-decoration:none;
border-radius:12px 12px 0 0;
}
.s4-card-img img{
width:100%;
height:100%;
object-fit:cover;
transition:transform 0.6s ease;
}
.s4-card:hover .s4-card-img img{
transform:scale(1.05);
}
.s4-line{
position:absolute;
background:var(--primary);
z-index:3;
pointer-events:none;
transition:all 0.45s cubic-bezier(0.65, 0, 0.35, 1);
}
.s4-line-t{
top:0;
left:0;
width:100%;
height:2px;
transform:scaleX(0);
transform-origin:left center;
transition-delay:0s;
}
.s4-line-r{
top:0;
right:0;
width:2px;
height:100%;
transform:scaleY(0);
transform-origin:top center;
transition-delay:0.2s;
}
.s4-line-b{
bottom:0;
left:0;
width:100%;
height:2px;
transform:scaleX(0);
transform-origin:right center;
transition-delay:0.4s;
}
.s4-line-l{
top:0;
left:0;
width:2px;
height:100%;
transform:scaleY(0);
transform-origin:bottom center;
transition-delay:0.6s;
}
.s4-card:hover .s4-line-t{
transform:scaleX(1);
}
.s4-card:hover .s4-line-r{
transform:scaleY(1);
}
.s4-card:hover .s4-line-b{
transform:scaleX(1);
}
.s4-card:hover .s4-line-l{
transform:scaleY(1);
}
.s4-card:not(:hover) .s4-line-t{
transition-delay:0.6s;
}
.s4-card:not(:hover) .s4-line-r{
transition-delay:0.4s;
}
.s4-card:not(:hover) .s4-line-b{
transition-delay:0.2s;
}
.s4-card:not(:hover) .s4-line-l{
transition-delay:0s;
}
.s4-card-fallback{
position:absolute;
inset:0;
display:none;
align-items:center;
justify-content:center;
background:linear-gradient(135deg, #052917 0%, #0b4626 100%);
color:rgba(255, 255, 255, 0.5);
font-size:14px;
font-weight:600;
letter-spacing:2px;
}
.s4-card-view{
position:absolute;
right:16px;
bottom:16px;
display:inline-flex;
align-items:center;
gap:4px;
padding:6px 14px;
background:rgba(0, 0, 0, 0.7);
backdrop-filter:blur(8px);
color:#fff;
font-size:12px;
font-weight:600;
border-radius:100px;
opacity:0;
transform:translateY(6px);
transition:all 0.3s ease;
text-decoration:none;
z-index:4;
}
.s4-card:hover .s4-card-view{
opacity:1;
transform:translateY(0);
}
.s4-card-body{
flex:1;
padding:18px 20px 22px;
display:flex;
flex-direction:column;
gap:8px;
}
.s4-card-title{
font-size:clamp(16px, 1.4vw, 20px);
font-weight:700;
color:#1a1a1a;
margin:0;
line-height:1.4;
}
.s4-card-title a{
color:inherit;
text-decoration:none;
transition:color 0.2s ease;
}
.s4-card-title a:hover{
color:var(--primary);
}
.s4-card-desc{
font-size:13px;
color:#666;
margin:0;
line-height:1.65;
display:-webkit-box;
-webkit-line-clamp:2;
-webkit-box-orient:vertical;
overflow:hidden;
}
.s4-card-tags{
display:flex;
flex-wrap:wrap;
gap:6px;
margin-top:auto;
padding-top:8px;
}
.s4-tag{
display:inline-block;
font-size:11.5px;
color:#555;
padding:3px 10px;
background:#f2f3f5;
border-radius:100px;
text-decoration:none;
font-weight:500;
line-height:1.6;
transition:all 0.2s ease;
}
a.s4-tag:hover{
background:var(--primary-lighter);
color:var(--primary);
}
.s4-tag-cat{
background:var(--primary-lighter);
color:var(--primary);
font-weight:600;
letter-spacing:0.5px;
}
.s56-wrap{
position:relative;
overflow:hidden;
background:#DCEDE0;
}
.s56-wrap::before{
content:'';
position:absolute;
inset:0;
background-image:url('/static/picture/jingcao.jpg');
background-size:cover;
background-position:center center;
z-index:0;
pointer-events:none;
}
.s56-wrap::after{
content:'';
position:absolute;
inset:0;
background:rgba(220, 237, 224, 0.72);
z-index:1;
pointer-events:none;
}
.s56-wrap .section-title{color:#1f3a2a}
.s56-wrap .section-title .highlight{color:#007a2e}
.s56-wrap .section-tag{background:rgba(0, 120, 50, 0.12); color:#007a2e}
.s56-wrap .section-desc{color:#355743}
.s56-wrap .s5-text{color:#2d4a38}
.s56-wrap .s5-feature{color:#1f3a2a}
.s56-wrap .s6-step-title{color:#1f3a2a}
.s56-wrap .s6-step-desc{color:#355743}
.s5-about{
position:relative;
padding:clamp(60px, 8vw, 120px) 0;
background:transparent !important;
overflow:hidden;
z-index:2;
}
.s5-container{
position:relative;
z-index:3;
}
.s5-layout{
display:grid;
grid-template-columns:1.3fr 1fr;
gap:clamp(48px, 6vw, 90px);
align-items:center;
}
.s5-video-wrap{
position:relative;
}
.s5-video-thumb{
position:relative;
width:100%;
aspect-ratio:16 / 9;
border-radius:20px;
overflow:hidden;
box-shadow:0 24px 70px rgba(0, 40, 20, 0.22);
background:#000;
transition:transform 0.35s ease, box-shadow 0.35s ease;
}
.s5-video-thumb:hover{
transform:translateY(-4px);
box-shadow:0 28px 72px rgba(0, 60, 30, 0.25);
}
.s5-video-thumb video{
position:absolute;
inset:0;
width:100%;
height:100%;
object-fit:cover;
display:block;
background:#000;
cursor:pointer;
}
.s5-video-poster{
position:absolute;
inset:0;
width:100%;
height:100%;
object-fit:cover;
object-position:center;
display:block;
background:#000;
}
.s5-video-thumb video::-webkit-media-controls{
display:none !important;
}
.s5-video-overlay{
position:absolute;
inset:0;
background:linear-gradient(to top, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.05) 60%, rgba(0, 0, 0, 0.1) 100%);
display:flex;
align-items:center;
justify-content:center;
cursor:pointer;
z-index:4;
transition:opacity 0.35s ease;
}
.s5-video-thumb.playing .s5-video-overlay{
opacity:0;
pointer-events:none;
}
.s5-video-ui{
position:absolute;
left:0;
right:0;
bottom:0;
padding:50px 18px 14px;
background:linear-gradient(to top, rgba(0, 0, 0, 0.88), rgba(0, 0, 0, 0));
display:flex;
align-items:center;
gap:12px;
opacity:0;
transition:opacity 0.3s ease;
z-index:5;
pointer-events:none;
}
.s5-video-thumb.playing .s5-video-ui, 
.s5-video-ui.show{
opacity:1;
pointer-events:auto;
}
.s5-v-btn{
background:none;
border:none;
color:#fff;
cursor:pointer;
padding:6px;
display:flex;
align-items:center;
justify-content:center;
border-radius:6px;
transition:background 0.2s ease;
flex-shrink:0;
width:32px;
height:32px;
}
.s5-v-btn svg{
width:22px;
height:22px;
}
.s5-v-btn:hover{
background:rgba(255, 255, 255, 0.18);
}
.s5-v-close{
margin-left:auto;
}
.s5-v-close:hover{
background:rgba(255, 80, 80, 0.75) !important;
}
.s5-v-time{
font-size:13px;
color:rgba(255, 255, 255, 0.85);
font-variant-numeric:tabular-nums;
flex-shrink:0;
min-width:100px;
text-align:center;
}
.s5-v-progress{
position:relative;
flex:1;
height:6px;
background:rgba(255, 255, 255, 0.2);
border-radius:100px;
cursor:pointer;
min-width:80px;
}
.s5-v-buffer{
position:absolute;
top:0;
left:0;
height:100%;
background:rgba(255, 255, 255, 0.3);
border-radius:100px;
width:0;
}
.s5-v-filled{
position:absolute;
top:0;
left:0;
height:100%;
background:var(--primary, #00963c);
border-radius:100px;
width:0;
}
.s5-v-thumb{
position:absolute;
top:50%;
width:14px;
height:14px;
background:#fff;
border-radius:50%;
transform:translate(-50%, -50%);
left:0;
box-shadow:0 2px 6px rgba(0, 0, 0, 0.5);
opacity:0;
transition:opacity 0.15s ease;
}
.s5-video-ui:hover .s5-v-thumb{
opacity:1;
}
.s5-video-play{
position:relative;
width:100px;
height:100px;
border-radius:50%;
background:rgba(0, 150, 60, 0.9);
display:flex;
align-items:center;
justify-content:center;
box-shadow:0 10px 40px rgba(0, 120, 50, 0.55);
transition:transform 0.3s ease, background 0.3s ease;
}
.s5-video-overlay:hover .s5-video-play{
transform:scale(1.08);
background:rgba(0, 180, 70, 0.98);
}
.s5-video-play svg{
margin-left:5px;
filter:drop-shadow(0 2px 6px rgba(0, 0, 0, 0.3));
}
.s5-play-ring{
position:absolute;
inset:-8px;
border-radius:50%;
border:2px solid rgba(0, 150, 60, 0.5);
animation:s5-pulse 2.2s ease-out infinite;
pointer-events:none;
}
.s5-play-ring.ring2{
animation-delay:1.1s;
}
@keyframes s5-pulse{
0%{transform:scale(0.9); opacity:0.8}
100%{transform:scale(1.6); opacity:0}
}
.s5-video-label{
position:absolute;
bottom:22px;
left:26px;
z-index:3;
}
.s5-video-tag{
display:inline-block;
padding:6px 16px;
background:rgba(255, 255, 255, 0.95);
color:var(--primary);
font-size:12px;
font-weight:700;
border-radius:100px;
letter-spacing:1px;
}
.s5-video-thumb video::-webkit-media-controls-panel{
background:linear-gradient(to top, rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
}
.s5-info .section-header{
text-align:left;
margin-bottom:30px;
}
.s5-info .section-desc{
margin:0;
}
.s5-text{
font-size:15px;
color:var(--gray-500);
line-height:1.9;
margin-bottom:22px;
}
.s5-features{
display:grid;
grid-template-columns:repeat(2, 1fr);
gap:14px;
margin-bottom:32px;
}
.s5-feature{
display:flex;
align-items:center;
gap:10px;
font-size:14px;
color:var(--dark-3);
}
.s5-feature::before{
content:'\2713';
display:flex;
align-items:center;
justify-content:center;
width:22px;
height:22px;
background:var(--primary);
color:var(--white);
border-radius:50%;
font-size:12px;
flex-shrink:0;
}
.s6-process{
position:relative;
padding:clamp(60px, 8vw, 120px) 0;
background:transparent !important;
overflow:hidden;
z-index:2;
}
.s6-container{
position:relative;
z-index:3;
}
.s6-steps{
display:flex;
justify-content:space-between;
align-items:flex-start;
margin-top:20px;
position:relative;
}
.s6-steps::before{
content:'';
position:absolute;
top:28px;
left:8%;
right:8%;
height:2px;
background:var(--gray-200);
z-index:0;
}
.s6-step{
flex:1;
text-align:center;
padding:0 16px;
position:relative;
z-index:1;
}
.s6-step-num{
width:58px;
height:58px;
border-radius:50%;
background:var(--white);
border:2px solid var(--primary);
color:var(--primary);
font-size:20px;
font-weight:700;
display:flex;
align-items:center;
justify-content:center;
margin:0 auto 24px;
transition:var(--transition);
}
.s6-step:hover .s6-step-num{
background:var(--primary);
color:var(--white);
transform:scale(1.1);
box-shadow:var(--shadow-primary);
}
.s6-step-title{
font-size:17px;
font-weight:700;
color:var(--dark);
margin-bottom:10px;
}
.s6-step-desc{
font-size:13px;
color:var(--gray-400);
line-height:1.7;
padding:0 8px;
}
.s7-news{
padding:clamp(30px, 4vw, 50px) 0 clamp(12px, 1.5vw, 20px);
background:#F2F8F3;
}
.s7-layout{
display:grid;
grid-template-columns:1.3fr 1fr;
gap:clamp(30px, 4vw, 56px);
align-items:stretch;
}
.s7-left, 
.s7-right{
display:flex;
flex-direction:column;
}
.s7-head-row{
display:flex;
align-items:center;
justify-content:space-between;
margin-bottom:20px;
flex-shrink:0;
}
.s7-card-title{
font-size:20px;
font-weight:700;
color:var(--dark);
display:flex;
align-items:center;
gap:12px;
margin-bottom:0;
}
.s7-card-title::before{
content:'';
width:4px;
height:22px;
background:var(--primary);
border-radius:2px;
}
.s7-more-link{
font-size:13px;
color:var(--primary);
text-decoration:none;
font-weight:500;
transition:all 0.2s ease;
}
.s7-more-link:hover{
letter-spacing:1px;
}
.s7-news-list{
display:flex;
flex-direction:column;
gap:12px;
flex:1;
}
.s7-news-item{
display:flex;
gap:14px;
padding:14px;
background:#fff;
border-radius:12px;
border:1px solid var(--gray-200);
text-decoration:none;
transition:all 0.3s ease;
}
.s7-news-item:hover{
border-color:var(--primary);
box-shadow:0 6px 20px rgba(0, 60, 30, 0.1);
transform:translateY(-2px);
}
.s7-news-img{
flex-shrink:0;
width:200px;
height:130px;
border-radius:10px;
overflow:hidden;
background:linear-gradient(135deg, #e8f5ed, #c8e6d4);
}
.s7-news-img img{
width:100%;
height:100%;
object-fit:cover;
transition:transform 0.5s ease;
}
.s7-news-item:hover .s7-news-img img{
transform:scale(1.06);
}
.s7-news-info{
flex:1;
display:flex;
flex-direction:column;
min-width:0;
}
.s7-news-date{
font-size:12px;
color:var(--primary);
font-weight:600;
letter-spacing:1px;
margin-bottom:8px;
}
.s7-news-title{
font-size:15px;
font-weight:700;
color:var(--dark);
line-height:1.5;
margin-bottom:6px;
display:-webkit-box;
-webkit-line-clamp:1;
-webkit-box-orient:vertical;
overflow:hidden;
transition:color 0.2s ease;
}
.s7-news-item:hover .s7-news-title{
color:var(--primary);
}
.s7-news-desc{
font-size:12px;
color:var(--gray-400);
line-height:1.6;
display:-webkit-box;
-webkit-line-clamp:2;
-webkit-box-orient:vertical;
overflow:hidden;
margin-bottom:8px;
}
.s7-news-more{
font-size:12px;
color:var(--primary);
font-weight:500;
transition:all 0.2s ease;
margin-top:auto;
}
.s7-news-item:hover .s7-news-more{
letter-spacing:1px;
}
.s7-faq-scroll{
flex:1;
min-height:320px;
overflow:hidden;
position:relative;
-webkit-mask-image:linear-gradient(to bottom, transparent 0, #000 6%, #000 94%, transparent 100%);
mask-image:linear-gradient(to bottom, transparent 0, #000 6%, #000 94%, transparent 100%);
}
.s7-faq-track{
display:flex;
flex-direction:column;
gap:10px;
animation:s7-faq-scroll 40s linear infinite;
}
.s7-faq-scroll:hover .s7-faq-track{
animation-play-state:paused;
}
@keyframes s7-faq-scroll{
0%{transform:translateY(0)}
100%{transform:translateY(-50%)}
}
.s7-faq-item{
display:block;
text-decoration:none;
color:inherit;
background:#fff;
border-radius:10px;
padding:14px 18px;
border:1px solid var(--gray-200);
transition:all 0.3s ease;
flex-shrink:0;
cursor:pointer;
}
.s7-faq-item:hover{
border-color:var(--primary);
box-shadow:0 6px 24px rgba(0, 60, 30, 0.1);
transform:translateX(4px);
}
.s7-faq-q{
font-size:14px;
font-weight:600;
color:var(--dark);
margin-bottom:6px;
padding-left:32px;
position:relative;
}
.s7-faq-q::before{
content:'Q';
position:absolute;
left:0;
top:50%;
transform:translateY(-50%);
width:22px;
height:22px;
background:var(--primary);
color:#fff;
font-size:11px;
font-weight:700;
border-radius:6px;
display:flex;
align-items:center;
justify-content:center;
}
.s7-faq-a{
font-size:12px;
color:var(--gray-500);
line-height:1.7;
padding-left:32px;
position:relative;
}
.s7-faq-a::before{
content:'A';
position:absolute;
left:0;
top:0;
width:22px;
height:22px;
background:var(--gray-200);
color:var(--gray-600);
font-size:11px;
font-weight:700;
border-radius:6px;
display:flex;
align-items:center;
justify-content:center;
}
.s8-clients{
padding:clamp(10px, 1.3vw, 18px) 0 clamp(20px, 2.5vw, 36px);
background:linear-gradient(180deg, #EDF5EF 0%, #F2F8F3 100%);
}
.s8-head{
text-align:center;
margin-bottom:clamp(10px, 1.4vw, 18px);
}
.s8-title{
font-size:clamp(20px, 2.4vw, 28px);
font-weight:700;
color:var(--dark);
margin:0;
letter-spacing:2px;
}
.s8-sub{
font-size:clamp(12px, 1.2vw, 14px);
color:var(--gray-400);
margin:6px 0 0;
letter-spacing:3px;
}
.s8-marquee-wrap{
overflow:hidden;
padding:clamp(20px, 2.5vw, 32px) 0;
background:transparent;
}
.s8-marquee-row{
overflow:hidden;
margin-bottom:clamp(12px, 1.6vw, 20px);
}
.s8-marquee-row:last-child{
margin-bottom:0;
}
.s8-marquee-track{
display:flex;
gap:clamp(14px, 1.8vw, 22px);
width:max-content;
}
.s8-marquee-top .s8-marquee-track{
animation:s8-marquee-ltr 40s linear infinite;
}
.s8-marquee-bottom .s8-marquee-track{
animation:s8-marquee-rtl 50s linear infinite;
}
.s8-marquee-wrap:hover .s8-marquee-track{
animation-play-state:paused;
}
@keyframes s8-marquee-ltr{
0%{transform:translateX(0)}
100%{transform:translateX(-50%)}
}
@keyframes s8-marquee-rtl{
0%{transform:translateX(-50%)}
100%{transform:translateX(0)}
}
.s8-logo{
flex-shrink:0;
width:clamp(160px, 16vw, 240px);
height:clamp(80px, 7vw, 110px);
background:#fff;
border-radius:12px;
display:flex;
align-items:center;
justify-content:center;
padding:14px;
border:1px solid var(--gray-200);
transition:all 0.3s ease;
text-decoration:none;
cursor:pointer;
}
.s8-logo:hover{
border-color:var(--primary);
box-shadow:0 8px 24px rgba(0, 60, 30, 0.12);
transform:translateY(-2px);
}
.s8-logo:visited{
color:inherit;
}
.s8-logo img{
max-width:100%;
max-height:100%;
object-fit:contain;
filter:grayscale(60%);
opacity:0.7;
transition:all 0.3s ease;
}
.s8-logo:hover img{
filter:grayscale(0);
opacity:1;
}
.s8-logo-text{
display:none;
align-items:center;
justify-content:center;
text-align:center;
font-size:14px;
font-weight:600;
color:var(--dark);
line-height:1.4;
padding:0 10px;
word-break:keep-all;
}
.s8-logo:hover .s8-logo-text{
color:var(--primary);
}
.s9-contact{
padding:120px 0;
background:var(--gradient-green-dark);
position:relative;
overflow:hidden;
}
.s9-contact::before{
content:'';
position:absolute;
top:-30%;
right:-10%;
width:500px;
height:500px;
background:radial-gradient(circle, rgba(255, 106, 0, 0.1) 0%, transparent 70%);
border-radius:50%;
}
.s9-layout{
display:grid;
grid-template-columns:1fr 1fr;
gap:80px;
align-items:center;
position:relative;
z-index:2;
}
.s9-info .section-title{
color:var(--white);
text-align:left;
}
.s9-info .section-title .highlight{
color:var(--accent);
}
.s9-info .section-desc{
color:rgba(255, 255, 255, 0.7);
text-align:left;
margin:0 0 40px;
}
.s9-contact-list{
display:flex;
flex-direction:column;
gap:20px;
}
.s9-contact-item{
display:flex;
align-items:center;
gap:16px;
color:var(--white);
}
.s9-contact-icon{
width:48px;
height:48px;
border-radius:12px;
background:rgba(255, 255, 255, 0.15);
display:flex;
align-items:center;
justify-content:center;
flex-shrink:0;
color:#fff;
}
.s9-contact-icon svg{
width:22px;
height:22px;
}
.s9-contact-text label{
font-size:12px;
color:rgba(255, 255, 255, 0.5);
letter-spacing:2px;
margin-bottom:4px;
display:block;
}
.s9-contact-text span{
font-size:16px;
font-weight:600;
}
.s9-form-card{
background:var(--white);
border-radius:var(--radius-xl);
padding:48px;
box-shadow:var(--shadow-lg);
}
.s9-form-title{
font-size:24px;
font-weight:700;
color:var(--dark);
margin-bottom:8px;
}
.s9-form-subtitle{
font-size:14px;
color:var(--gray-400);
margin-bottom:32px;
}
.s9-form{
display:flex;
flex-direction:column;
gap:18px;
}
.s9-form-row{
display:grid;
grid-template-columns:1fr 1fr;
gap:18px;
}
.s9-input, 
.s9-textarea, 
.s9-select{
width:100%;
padding:14px 18px;
background:var(--gray-50);
border:1px solid var(--gray-200);
border-radius:var(--radius-sm);
font-size:14px;
color:var(--dark);
transition:var(--transition);
font-family:inherit;
}
.s9-input:focus, 
.s9-textarea:focus, 
.s9-select:focus{
border-color:var(--primary);
background:var(--white);
box-shadow:0 0 0 3px var(--primary-lighter);
}
.s9-textarea{
resize:vertical;
min-height:120px;
line-height:1.6;
}
.s9-captcha-row{
display:flex;
gap:12px;
align-items:stretch;
}
.s9-captcha-input{
flex:1;
letter-spacing:2px;
text-transform:uppercase;
}
.s9-captcha-img{
height:50px;
width:120px;
border-radius:var(--radius-sm);
cursor:pointer;
border:1px solid var(--gray-200);
transition:transform 0.2s;
background:#fff;
flex-shrink:0;
}
.s9-captcha-img:hover{
transform:scale(1.03);
}
@media (max-width:520px){
.s9-captcha-row{
flex-direction:column;
}
.s9-captcha-img{
width:100%;
height:44px;
}
}
.s9-form .btn-primary{
margin-top:8px;
}
.form-tip{
padding:12px 16px;
border-radius:10px;
font-size:14px;
font-weight:500;
line-height:1.5;
margin-top:4px;
position:relative;
animation:formTipIn 0.3s ease;
}
.form-tip-error{
background:#fff5f5;
color:#c53030;
border:1px solid #fed7d7;
}
.form-tip-info{
background:#f0fdf4;
color:#15803d;
border:1px solid #bbf7d0;
}
@keyframes formTipIn{
from{opacity:0; transform:translateY(-8px)}
to{opacity:1; transform:translateY(0)}
}
.footer{
background:var(--dark);
color:var(--gray-400);
padding-top:80px;
}
.footer-top{
display:grid;
grid-template-columns:1.5fr 1fr 1fr 1fr;
gap:60px;
padding-bottom:60px;
border-bottom:1px solid rgba(255, 255, 255, 0.06);
}
.footer-brand .footer-logo{
display:flex;
align-items:center;
gap:10px;
margin-bottom:20px;
}
.footer-brand .footer-logo img{
height:36px;
}
.footer-brand .footer-logo span{
font-size:18px;
font-weight:700;
color:var(--white);
}
.footer-about{
font-size:14px;
line-height:1.9;
margin-bottom:28px;
}
.footer-qr{
display:flex;
gap:16px;
}
.footer-qr-item{
text-align:center;
position:relative;
cursor:pointer;
}
.footer-qr-item .qr-thumb{
width:80px;
height:80px;
border-radius:8px;
margin-bottom:8px;
transition:transform 0.3s ease;
}
.footer-qr-item:hover .qr-thumb{
transform:scale(1.05);
}
.footer-qr-item .qr-popup{
position:absolute;
bottom:calc(100% + 14px);
left:50%;
transform:translateX(-50%) translateY(10px);
width:180px;
padding:12px;
background:#fff;
border-radius:12px;
box-shadow:0 12px 40px rgba(0, 0, 0, 0.25);
opacity:0;
visibility:hidden;
transition:all 0.3s ease;
z-index:20;
pointer-events:none;
}
.footer-qr-item .qr-popup::after{
content:'';
position:absolute;
left:50%;
bottom:-8px;
transform:translateX(-50%);
border-left:8px solid transparent;
border-right:8px solid transparent;
border-top:8px solid #fff;
}
.footer-qr-item:hover .qr-popup{
opacity:1;
visibility:visible;
transform:translateX(-50%) translateY(0);
}
.footer-qr-item .qr-popup img{
display:block;
width:100%;
height:auto;
border-radius:6px;
}
.footer-qr-item .qr-popup .qr-label{
display:block;
text-align:center;
margin-top:8px;
font-size:12px;
font-weight:600;
color:var(--primary);
}
.footer-qr-item span{
font-size:12px;
color:var(--gray-400);
}
.footer-col h4{
font-size:16px;
font-weight:700;
color:var(--white);
margin-bottom:24px;
}
.footer-col ul{
display:flex;
flex-direction:column;
gap:12px;
}
.footer-col ul a{
font-size:14px;
color:var(--gray-400);
transition:var(--transition);
}
.footer-col ul a:hover{
color:var(--primary);
padding-left:4px;
}
.footer-contact li{
display:flex;
align-items:flex-start;
gap:10px;
color:var(--gray-400);
font-size:13px;
line-height:1.6;
}
.footer-contact{
list-style:none;
padding:0;
margin:0;
}
.footer-contact li{
display:flex;
align-items:flex-start;
gap:8px;
margin-bottom:10px;
font-size:13px;
color:var(--gray-300);
line-height:1.6;
word-break:break-all;
}
.footer-contact .fc-icon{
flex-shrink:0;
color:var(--primary);
margin-top:3px;
}
.footer-links{
display:flex;
flex-wrap:wrap;
gap:6px 18px;
align-items:center;
padding:18px 0;
margin-bottom:4px;
}
.footer-links .fl-label{
font-size:13px;
color:var(--gray-400);
flex-shrink:0;
}
.footer-links a{
font-size:13px;
color:var(--gray-300);
text-decoration:none;
transition:color 0.2s ease;
}
.footer-links a:hover{
color:var(--primary);
}
.footer-bottom{
padding:28px 0;
display:flex;
justify-content:space-between;
align-items:center;
font-size:13px;
color:var(--gray-400);
}
.footer-bottom a{
color:var(--gray-400);
}
.footer-bottom a:hover{
color:var(--accent);
}
.footer-copyright{
display:flex;
gap:14px;
flex-wrap:wrap;
align-items:center;
}
.footer-copyright .sep{
color:rgba(255, 255, 255, 0.18);
}
.footer-social{
display:flex;
gap:10px;
flex-wrap:wrap;
margin-top:8px;
}
.footer-social .fs-item{
position:relative;
display:inline-block;
width:40px;
height:40px;
transition:var(--transition);
}
.footer-social .fs-icon{
width:100%;
height:100%;
border-radius:50%;
background-position:center;
background-repeat:no-repeat;
background-size:22px 22px;
background-color:rgba(255, 255, 255, 0.1);
border:1px solid rgba(255, 255, 255, 0.15);
transition:var(--transition);
}
.footer-social .fs-icon.wechat{background-image:url('/static/picture/wechat.png')}
.footer-social .fs-icon.douyin{background-image:url('/static/picture/douyin.png')}
.footer-social .fs-icon.kuaishou{background-image:url('/static/picture/kuaishou.png')}
.footer-social .fs-icon.shipinhao{background-image:url('/static/picture/shipinhao.png')}
.footer-social .fs-icon.baijiahao{background-image:url('/static/picture/baijiahao.png')}
.footer-social .fs-icon.xiaohongshu{background-image:url('/static/picture/xiaohongshu.png')}
.footer-social .fs-icon.zhihu{background-image:url('/static/picture/zhihu.png')}
.footer-social .fs-qr{
position:absolute;
bottom:calc(100% + 16px);
left:50%;
transform:translateX(-50%) translateY(10px);
width:140px;
opacity:0;
visibility:hidden;
transition:all 0.3s ease;
z-index:10;
pointer-events:none;
}
.footer-social .fs-qr::after{
content:'';
position:absolute;
left:50%;
bottom:-8px;
transform:translateX(-50%);
border-left:8px solid transparent;
border-right:8px solid transparent;
border-top:8px solid #fff;
}
.footer-social .fs-qr-box{
padding:10px;
background:#fff;
border-radius:8px;
box-shadow:0 8px 24px rgba(0, 0, 0, 0.2);
}
.footer-social .fs-qr-box img{
display:block;
width:100%;
height:auto;
border-radius:4px;
}
.footer-social .fs-item:hover .fs-icon{
border-color:transparent;
transform:translateY(-3px) scale(1.05);
box-shadow:0 6px 16px rgba(0, 0, 0, 0.25);
}
.footer-social .fs-item:hover .fs-icon.wechat{background-color:#07C160}
.footer-social .fs-item:hover .fs-icon.douyin{background-color:#FE2C55}
.footer-social .fs-item:hover .fs-icon.kuaishou{background-color:#FF6A00}
.footer-social .fs-item:hover .fs-icon.shipinhao{background-color:#07C160}
.footer-social .fs-item:hover .fs-icon.baijiahao{background-color:#2932E1}
.footer-social .fs-item:hover .fs-icon.xiaohongshu{background-color:#FE2C55}
.footer-social .fs-item:hover .fs-icon.zhihu{background-color:#0084FF}
.footer-social .fs-item:hover .fs-qr{
opacity:1;
visibility:visible;
transform:translateX(-50%) translateY(0);
pointer-events:auto;
}
.back-top{
position:fixed;
right:32px;
bottom:32px;
width:46px;
height:46px;
border-radius:12px;
background:linear-gradient(145deg, #00a844, #008a38);
color:#fff;
display:flex;
align-items:center;
justify-content:center;
opacity:0;
visibility:hidden;
transform:translateY(20px) scale(0.8);
transition:opacity 0.35s ease, transform 0.35s ease, visibility 0.35s ease, box-shadow 0.3s ease;
z-index:999;
box-shadow:0 6px 20px rgba(0, 120, 50, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.2);
cursor:pointer;
border:none;
overflow:hidden;
}
.back-top::before{
content:'';
position:absolute;
inset:0;
background:radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, 0.25), transparent 55%);
opacity:0;
transition:opacity 0.3s ease;
pointer-events:none;
}
.back-top.visible{
opacity:1;
visibility:visible;
transform:translateY(0) scale(1);
}
.back-top:hover{
transform:translateY(-4px) scale(1.05);
box-shadow:0 10px 28px rgba(0, 120, 50, 0.48), inset 0 1px 0 rgba(255, 255, 255, 0.25);
animation:btPulse 1.6s ease-in-out infinite;
}
.back-top:hover::before{
opacity:1;
}
.back-top:active{
transform:translateY(-1px) scale(0.97);
transition:transform 0.08s ease;
}
.back-top svg{
position:relative;
z-index:1;
filter:drop-shadow(0 1px 2px rgba(0, 0, 0, 0.15));
}
.back-top.sparkle svg{
animation:btArrowBounce 0.5s ease;
}
@keyframes btPulse{
0%, 100%{box-shadow:0 10px 28px rgba(0, 120, 50, 0.48), inset 0 1px 0 rgba(255, 255, 255, 0.25)}
50%{box-shadow:0 10px 36px rgba(0, 180, 70, 0.62), inset 0 1px 0 rgba(255, 255, 255, 0.3)}
}
@keyframes btArrowBounce{
0%{transform:translateY(0)}
30%{transform:translateY(-6px)}
60%{transform:translateY(3px)}
100%{transform:translateY(0)}
}
.back-top .bt-ripple{
position:absolute;
border-radius:50%;
background:rgba(255, 255, 255, 0.45);
transform:scale(0);
animation:btRipple 0.6s ease-out forwards;
pointer-events:none;
z-index:2;
}
@keyframes btRipple{
to{transform:scale(4); opacity:0}
}
.page-banner{
position:relative;
height:320px;
overflow:hidden;
display:flex;
align-items:center;
}
.page-banner-bg{
position:absolute;
inset:0;
background-size:cover;
background-position:center;
z-index:0;
}
.page-banner-mask{
position:absolute;
inset:0;
background:linear-gradient(135deg, rgba(0, 61, 24, 0.85), rgba(0, 92, 36, 0.7));
z-index:1;
}
.page-banner-content{
position:relative;
z-index:2;
color:#fff;
width:100%;
max-width:1520px;
padding:0 clamp(24px, 3vw, 56px);
margin:0 auto;
text-align:center;
}
.page-banner h1{
font-size:clamp(28px, 3vw, 40px);
font-weight:700;
margin-bottom:8px;
text-align:center;
}
.page-banner p{
font-size:15px;
color:rgba(255, 255, 255, 0.7);
text-align:center;
}
.breadcrumb{
font-size:13px;
color:rgba(255, 255, 255, 0.6);
margin-top:12px;
text-align:center;
}
.breadcrumb a{
color:rgba(255, 255, 255, 0.75);
text-decoration:none;
}
.breadcrumb span{
margin:0 6px;
}
.section .container{
max-width:1520px;
}
.list-grid{
display:grid;
grid-template-columns:repeat(4, 1fr);
gap:clamp(18px, 2.2vw, 32px);
padding:clamp(24px, 3vw, 40px) 0 clamp(40px, 5vw, 72px);
}
.list-card{
position:relative;
display:flex;
flex-direction:column;
background:#fff;
border-radius:12px;
overflow:hidden;
box-shadow:0 2px 16px rgba(0, 0, 0, 0.06);
transition:transform 0.35s ease, box-shadow 0.35s ease;
border:1px solid rgba(0, 0, 0, 0.05);
}
.list-card:hover{
transform:translateY(-6px);
box-shadow:0 20px 48px rgba(0, 40, 20, 0.16);
}
.list-card-img{
position:relative;
display:block;
width:100%;
aspect-ratio:16 / 10;
overflow:hidden;
background:#f0f0f0;
text-decoration:none;
border-radius:12px 12px 0 0;
}
.list-card-img img{
width:100%;
height:100%;
object-fit:cover;
transition:transform 0.6s ease;
}
.list-card:hover .list-card-img img{
transform:scale(1.05);
}
.list-card-view{
position:absolute;
right:14px;
bottom:14px;
display:inline-flex;
align-items:center;
gap:4px;
padding:5px 12px;
background:rgba(0, 0, 0, 0.7);
backdrop-filter:blur(8px);
color:#fff;
font-size:11px;
font-weight:600;
border-radius:100px;
opacity:0;
transform:translateY(6px);
transition:all 0.3s ease;
text-decoration:none;
z-index:4;
}
.list-card:hover .list-card-view{
opacity:1;
transform:translateY(0);
}
.list-card-body{
flex:1;
padding:16px 18px 20px;
display:flex;
flex-direction:column;
gap:6px;
}
.list-card-title{
font-size:clamp(15px, 1.2vw, 18px);
font-weight:700;
color:#1a1a1a;
margin:0;
line-height:1.4;
}
.list-card-title a{
color:inherit;
text-decoration:none;
transition:color 0.2s ease;
}
.list-card-title a:hover{
color:var(--primary);
}
.list-card-desc{
font-size:12.5px;
color:#777;
margin:0;
line-height:1.6;
display:-webkit-box;
-webkit-line-clamp:2;
-webkit-box-orient:vertical;
overflow:hidden;
}
.list-card-tags{
display:flex;
flex-wrap:wrap;
gap:5px;
margin-top:auto;
padding-top:6px;
}
.list-card-tag{
display:inline-block;
font-size:11.5px;
color:var(--primary);
padding:2px 8px;
background:var(--primary-lighter);
border-radius:100px;
text-decoration:none;
font-weight:600;
line-height:1.7;
letter-spacing:0.5px;
}
.list-card-tag-link{
display:inline-block;
font-size:11px;
color:#555;
padding:2px 8px;
background:#f2f3f5;
border-radius:100px;
text-decoration:none;
font-weight:500;
line-height:1.7;
transition:all 0.2s ease;
}
.list-card-tag-link:hover{
background:var(--primary-lighter);
color:var(--primary);
}
.pagination{
display:flex;
justify-content:center;
align-items:center;
flex-wrap:wrap;
gap:10px;
margin-top:60px;
padding:20px 0;
}
.pagination a, 
.pagination span{
min-width:42px;
height:42px;
display:inline-flex;
align-items:center;
justify-content:center;
padding:0 14px;
border-radius:10px;
font-size:14px;
font-weight:500;
color:#555;
background:#fff;
border:1px solid #e5e7eb;
text-decoration:none;
cursor:pointer;
transition:all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
user-select:none;
}
.pagination a:hover{
background:var(--primary);
color:#fff;
border-color:var(--primary);
transform:translateY(-2px);
box-shadow:0 6px 16px rgba(0, 120, 50, 0.25);
}
.pagination .current{
background:linear-gradient(135deg, var(--primary) 0%, #005a24 100%);
color:#fff;
border-color:transparent;
font-weight:600;
min-width:42px;
position:relative;
box-shadow:0 6px 18px rgba(0, 120, 50, 0.3);
}
.pagination .current::after{
content:'';
position:absolute;
bottom:-8px;
left:50%;
transform:translateX(-50%);
width:6px;
height:6px;
background:var(--primary);
border-radius:50%;
opacity:0.6;
}
.pagination .disabled, 
.pagination span.disabled{
color:#bbb;
background:#f9fafb;
border-color:#eee;
cursor:not-allowed;
pointer-events:none;
transform:none;
box-shadow:none;
}
.pagination span{
background:transparent;
border:none;
color:#888;
min-width:auto;
padding:0 6px;
font-size:13px;
font-weight:400;
}
.pagination .page-info{
color:#999;
font-size:13px;
margin-right:16px;
}
.pagination .page-info b{
color:var(--primary);
font-weight:600;
margin:0 2px;
}
.nw-hero{
height:clamp(280px, 32vw, 500px);
background:linear-gradient(135deg, #1b5e20 0%, #2e7d32 50%, #4caf50 100%);
background-size:cover;
background-position:center;
position:relative;
overflow:hidden;
}
.nw-hero-mask{
position:absolute;
inset:0;
background:linear-gradient(135deg, rgba(27, 94, 32, .6) 0%, rgba(46, 125, 50, .55) 50%, rgba(76, 175, 80, .5) 100%);
z-index:1;
}
.nw-hero .container{
position:relative;
z-index:2;
height:100%;
display:flex;
align-items:center;
}
.nw-hero-inner{
color:#fff;
text-align:left;
}
.nw-hero-tag{
display:inline-block;
font-size:10px;
letter-spacing:5px;
color:rgba(255, 255, 255, .85);
padding:4px 14px;
border:1px solid rgba(255, 255, 255, .35);
border-radius:100px;
margin-bottom:8px;
font-weight:500;
background:rgba(255, 255, 255, .08);
}
.nw-hero-title{
font-size:clamp(22px, 2.6vw, 32px);
font-weight:800;
letter-spacing:2px;
margin-bottom:4px;
text-shadow:0 2px 16px rgba(0, 0, 0, .25);
}
.nw-hero-sub{
font-size:clamp(12px, 1.2vw, 14px);
color:rgba(255, 255, 255, .85);
letter-spacing:2px;
margin:0 0 8px 0;
}
.nw-hero .breadcrumb{
font-size:12px;
color:rgba(255, 255, 255, .75);
}
.nw-hero .breadcrumb a{color:rgba(255, 255, 255, .9)}
.nw-story{
padding:clamp(48px, 5.5vw, 72px) 0;
background:#fff;
}
.nw-story-head{
text-align:center;
margin-bottom:clamp(28px, 3.5vw, 44px);
position:relative;
}
.nw-story-head::after{
content:"";
display:block;
width:48px;
height:3px;
background:linear-gradient(90deg, #2e7d32, #4caf50);
margin:14px auto 0;
border-radius:2px;
}
.nw-story-tag{
display:inline-block;
font-size:10px;
letter-spacing:5px;
color:#2e7d32;
background:rgba(46, 125, 50, .08);
padding:6px 18px;
border-radius:100px;
font-weight:600;
margin-bottom:12px;
}
.nw-story-title{
font-size:clamp(24px, 2.6vw, 34px);
font-weight:800;
color:#1a1a1a;
letter-spacing:3px;
margin:0;
}
.nw-story-block{
max-width:760px;
margin:0 auto clamp(28px, 3.5vw, 44px);
padding:clamp(24px, 3vw, 40px);
background:linear-gradient(135deg, #f7faf7 0%, #fff 100%);
border-radius:16px;
border:1px solid #eef5ef;
position:relative;
}
.nw-story-block p{
font-size:15px;
color:#555;
line-height:2;
margin-bottom:14px;
}
.nw-story-block p:last-child{
margin-bottom:0;
}
.nw-story-lead{
font-size:16px !important;
color:#333 !important;
}
.nw-story-lead strong{
color:#1b5e20;
font-weight:700;
}
.nw-story-highlight{
font-size:15px !important;
color:#2e7d32 !important;
font-weight:500;
padding:clamp(12px, 1.5vw, 18px) clamp(14px, 1.8vw, 22px);
background:linear-gradient(135deg, rgba(46, 125, 50, .06), rgba(76, 175, 80, .03));
border-radius:10px;
border-left:3px solid #4caf50;
margin-top:8px;
}
.nw-story-highlight br{display:block; content:""; margin-top:4px}
.nw-story-stats-row{
display:flex;
align-items:center;
justify-content:center;
gap:clamp(24px, 3vw, 48px);
margin-bottom:clamp(36px, 4vw, 56px);
padding:clamp(20px, 2.5vw, 30px) clamp(18px, 2.2vw, 32px);
background:#fff;
border-radius:16px;
border:1px solid #eef5ef;
box-shadow:0 4px 20px rgba(46, 125, 50, .05);
}
.nw-stat{
flex:0 1 auto;
text-align:center;
min-width:clamp(80px, 10vw, 120px);
}
.nw-stat-num{
display:flex;
align-items:baseline;
justify-content:center;
line-height:1;
margin-bottom:8px;
}
.nw-stat-num i{
font-style:normal;
font-size:clamp(32px, 3.6vw, 48px);
font-weight:800;
color:#2e7d32;
letter-spacing:-1px;
}
.nw-stat-num b{
font-style:normal;
font-size:clamp(16px, 1.8vw, 22px);
font-weight:700;
color:#1b5e20;
margin-left:2px;
}
.nw-stat-label{
font-size:12px;
color:#888;
letter-spacing:2px;
}
.nw-stat-divider{
width:1px;
height:clamp(40px, 5vw, 56px);
background:linear-gradient(180deg, transparent, #c8e0cc, transparent);
flex-shrink:0;
}
.nw-timeline{
display:flex;
justify-content:space-between;
gap:clamp(12px, 1.5vw, 24px);
margin-bottom:clamp(32px, 4vw, 48px);
padding:clamp(18px, 2.2vw, 28px) clamp(14px, 1.8vw, 28px);
background:linear-gradient(135deg, #f7faf7, #fff);
border-radius:16px;
border:1px solid #eef5ef;
position:relative;
}
.nw-timeline::before{
content:"";
position:absolute;
top:clamp(40px, 4.5vw, 52px);
left:clamp(40px, 4.5vw, 56px);
right:clamp(40px, 4.5vw, 56px);
height:2px;
background:linear-gradient(90deg, #d4e8d8, #2e7d32 30%, #4caf50 70%, #d4e8d8);
z-index:0;
}
.nw-tl-item{
flex:1;
position:relative;
z-index:1;
text-align:center;
padding-top:clamp(54px, 6vw, 70px);
}
.nw-tl-year{
position:absolute;
top:0;
left:50%;
transform:translateX(-50%);
font-size:clamp(14px, 1.4vw, 17px);
font-weight:800;
color:#2e7d32;
background:#fff;
padding:4px 14px;
border-radius:20px;
border:2px solid #2e7d32;
}
.nw-tl-dot{
position:absolute;
top:clamp(22px, 2.5vw, 30px);
left:50%;
transform:translateX(-50%);
width:12px;
height:12px;
background:#2e7d32;
border-radius:50%;
border:3px solid #fff;
box-shadow:0 0 0 2px #2e7d32;
}
.nw-tl-body h4{
font-size:14px;
font-weight:700;
color:#1a1a1a;
margin-bottom:6px;
}
.nw-tl-body p{
font-size:12px;
color:#888;
line-height:1.7;
margin:0;
padding:0 4px;
}
.nw-clients{
text-align:center;
padding-top:clamp(20px, 2.5vw, 32px);
border-top:1px solid #eef5ef;
}
.nw-clients-label{
display:block;
font-size:11px;
letter-spacing:4px;
color:#999;
margin-bottom:clamp(16px, 2vw, 24px);
text-transform:uppercase;
}
.nw-clients-row{
display:flex;
flex-wrap:wrap;
justify-content:flex-start;
gap:clamp(10px, 1.2vw, 16px) clamp(14px, 1.8vw, 22px);
align-items:center;
}
.nw-clients-row-lg{
display:grid;
grid-template-columns:repeat(3, 1fr);
gap:12px;
justify-content:stretch;
}
.nw-cl-item{
display:flex;
align-items:center;
justify-content:center;
width:100%;
max-width:100%;
height:clamp(64px, 16vw, 90px);
min-width:0;
background:#fafbfc;
border:1px solid #eef0ee;
border-radius:12px;
transition:all .3s ease;
overflow:hidden;
padding:0 8px;
}
.nw-cl-item img{
width:100%;
max-width:100%;
height:clamp(40px, 10vw, 58px);
object-fit:contain;
opacity:.9;
transition:all .3s ease;
}
.nw-cl-item:hover{
border-color:#2e7d32;
background:#fff;
transform:translateY(-2px);
box-shadow:0 8px 20px rgba(46, 125, 50, .12);
}
.nw-cl-item:hover img{
opacity:1;
transform:scale(1.05);
}
.nw-cl-fallback{
display:none;
font-size:12px;
color:#bbb;
letter-spacing:2px;
}
.nw-clients-hint{
font-size:11px;
color:#ccc;
margin-top:14px;
}
.nw-main{
padding:clamp(40px, 5vw, 64px) 0;
background:#fff;
}
.nw-layout{
display:flex;
gap:clamp(24px, 3vw, 48px);
align-items:flex-start;
}
.nw-content{flex:1; min-width:0}
.nw-section-head{
display:flex;
align-items:center;
gap:14px;
margin-bottom:clamp(16px, 2vw, 24px);
}
.nw-section-title{
font-size:clamp(18px, 1.8vw, 22px);
font-weight:700;
color:#1a1a1a;
}
.nw-section-line{
flex:1;
height:1px;
background:linear-gradient(90deg, #e5ede6 0%, transparent 100%);
}
.nw-sidebar{
width:300px;
flex-shrink:0;
position:sticky;
top:100px;
}
.nw-card{
display:flex;
gap:clamp(16px, 2vw, 24px);
padding:clamp(16px, 2vw, 22px) 0;
margin-bottom:4px;
border-bottom:1px solid #f0f0f0;
transition:transform .4s cubic-bezier(.25, .8, .25, 1), background .3s ease;
}
.nw-card:hover{
transform:translateY(-2px);
background:linear-gradient(90deg, rgba(46, 125, 50, .04) 0%, transparent 100%);
border-bottom-color:#d4e8d8;
}
.nw-card:last-of-type{border-bottom:none}
.nw-card-img{
width:clamp(180px, 22vw, 260px);
flex-shrink:0;
border-radius:10px;
overflow:hidden;
position:relative;
background:#f5f5f5;
aspect-ratio:4/3;
}
.nw-card-img img{
width:100%;
height:100%;
object-fit:cover;
transition:transform .5s ease;
}
.nw-card:hover .nw-card-img img{transform:scale(1.08)}
.nw-card-body{
flex:1;
min-width:0;
display:flex;
flex-direction:column;
justify-content:center;
}
.nw-card-meta{
display:flex;
gap:16px;
font-size:12px;
color:#aaa;
margin-bottom:8px;
}
.nw-card-title{
font-size:clamp(15px, 1.5vw, 18px);
font-weight:700;
line-height:1.4;
margin-bottom:10px;
}
.nw-card-title a{
color:#1a1a1a;
text-decoration:none;
transition:color .2s;
}
.nw-card-title a:hover{color:#2e7d32}
.nw-card-desc{
font-size:13px;
color:#777;
line-height:1.8;
margin-bottom:10px;
display:-webkit-box;
-webkit-line-clamp:2;
-webkit-box-orient:vertical;
overflow:hidden;
}
.nw-card-read{
display:inline-block;
font-size:12px;
color:#2e7d32;
text-decoration:none;
font-weight:500;
align-self:flex-start;
}
.nw-pagination{
margin-top:16px;
padding-top:24px;
border-top:1px solid #f0f0f0;
}
.nw-side-card{
background:#fafbfc;
border-radius:14px;
padding:clamp(16px, 2vw, 22px);
margin-bottom:16px;
border:1px solid #eee;
transition:transform .35s cubic-bezier(.25, .8, .25, 1), box-shadow .35s ease, border-color .3s ease;
}
.nw-side-card:hover{
transform:translateY(-3px);
box-shadow:0 12px 32px rgba(46, 125, 50, .08);
border-color:#d4e8d8;
}
.nw-side-title{
font-size:15px;
font-weight:700;
color:#1a1a1a;
margin-bottom:14px;
display:flex;
align-items:center;
gap:10px;
}
.nw-side-bar{
width:4px;
height:16px;
background:linear-gradient(180deg, #4caf50, #2e7d32);
border-radius:2px;
}
.nw-hot-list{
list-style:none;
padding:0;
margin:0;
counter-reset:hotNum;
}
.nw-hot-list li{
display:flex;
gap:12px;
padding:8px 0 8px 30px;
border-bottom:1px dashed #e8e8e8;
align-items:flex-start;
counter-increment:hotNum;
position:relative;
}
.nw-hot-list li:last-child{border-bottom:none}
.nw-hot-list li::before{
content:counter(hotNum);
position:absolute;
left:0;
top:8px;
width:20px;
height:20px;
background:#f0f0f0;
color:#888;
font-size:11px;
font-weight:700;
border-radius:5px;
display:flex;
align-items:center;
justify-content:center;
}
.nw-hot-list li:nth-child(1)::before{background:linear-gradient(135deg, #ff6b6b, #ee5a24); color:#fff}
.nw-hot-list li:nth-child(2)::before{background:linear-gradient(135deg, #ffa502, #ff7f50); color:#fff}
.nw-hot-list li:nth-child(3)::before{background:linear-gradient(135deg, #ffd32a, #ffa502); color:#fff}
.nw-hot-body{flex:1; min-width:0}
.nw-hot-body a{
font-size:13px;
color:#444;
text-decoration:none;
display:block;
line-height:1.5;
display:-webkit-box;
-webkit-line-clamp:2;
-webkit-box-orient:vertical;
overflow:hidden;
transition:color .2s;
}
.nw-hot-body a:hover{color:#2e7d32}
.nw-side-list{
list-style:none;
padding:0;
margin:0;
}
.nw-side-list li{
display:flex;
justify-content:space-between;
align-items:center;
padding:8px 0;
border-bottom:1px dashed #e8e8e8;
gap:10px;
}
.nw-side-list li:last-child{border-bottom:none}
.nw-side-list a{
font-size:13px;
color:#444;
text-decoration:none;
line-height:1.5;
flex:1;
display:-webkit-box;
-webkit-line-clamp:1;
-webkit-box-orient:vertical;
overflow:hidden;
transition:color .2s;
}
.nw-side-list a:hover{color:#2e7d32}
.nw-side-date{
font-size:11px;
color:#bbb;
flex-shrink:0;
}
.nw-tags{
display:flex;
flex-wrap:wrap;
gap:6px;
}
.nw-tag-item{
font-size:12px;
color:#555;
text-decoration:none;
padding:4px 10px;
background:#f3f7f4;
border-radius:16px;
border:1px solid #e0ebe3;
transition:all .2s;
}
.nw-tag-item:hover{
background:#2e7d32;
color:#fff;
border-color:#2e7d32;
}
.nw-contact{
background:linear-gradient(135deg, #1b5e20 0%, #2e7d32 100%);
border-radius:14px;
padding:clamp(16px, 2vw, 22px);
color:#fff;
box-shadow:0 10px 24px rgba(46, 125, 50, .22);
}
.nw-contact-title{
font-size:15px;
font-weight:700;
color:#fff;
margin-bottom:4px;
display:flex;
align-items:center;
gap:10px;
}
.nw-contact-title::before{
content:"";
width:4px;
height:16px;
background:rgba(255, 255, 255, .5);
border-radius:2px;
}
.nw-contact-name{
font-size:13px;
color:rgba(255, 255, 255, .7);
margin-bottom:14px;
font-weight:500;
}
.nw-contact-line{
font-size:12px;
line-height:2;
color:rgba(255, 255, 255, .9);
margin:0 0 2px 0;
display:flex;
align-items:flex-start;
gap:8px;
}
.nw-contact-svg{
flex-shrink:0;
color:rgba(255, 255, 255, .85);
margin-top:3px;
}
.nw-related{
padding:clamp(40px, 5vw, 64px) 0;
background:#f7f9f8;
}
.nw-related-grid{
display:grid;
grid-template-columns:repeat(4, 1fr);
gap:clamp(14px, 1.8vw, 22px);
}
.nw-related-card{
text-decoration:none;
color:inherit;
background:#fff;
border-radius:14px;
overflow:hidden;
border:1px solid #eee;
transition:transform .35s cubic-bezier(.25, .8, .25, 1), box-shadow .35s ease, border-color .3s ease;
}
.nw-related-card:hover{
transform:translateY(-4px);
box-shadow:0 18px 42px rgba(0, 60, 20, .08);
border-color:#d4e8d8;
}
.nw-related-img{
position:relative;
aspect-ratio:4/3;
overflow:hidden;
background:#f5f5f5;
}
.nw-related-img img{
width:100%;
height:100%;
object-fit:cover;
transition:transform .5s ease;
}
.nw-related-card:hover .nw-related-img img{transform:scale(1.08)}
.nw-related-body{
padding:16px 18px 18px;
}
.nw-related-body h4{
font-size:14px;
font-weight:700;
color:#1a1a1a;
margin-bottom:6px;
line-height:1.4;
display:-webkit-box;
-webkit-line-clamp:1;
-webkit-box-orient:vertical;
overflow:hidden;
}
.nw-related-body p{
font-size:12px;
color:#888;
line-height:1.6;
margin-bottom:10px;
display:-webkit-box;
-webkit-line-clamp:2;
-webkit-box-orient:vertical;
overflow:hidden;
}
.nw-related-link{
font-size:12px;
color:#2e7d32;
font-weight:500;
}
@media (max-width:1024px){
.nw-timeline{
flex-wrap:wrap;
gap:24px 0;
}
.nw-timeline::before{display:none}
.nw-tl-item{
flex:0 0 50%;
padding-top:0;
text-align:left;
padding-left:60px;
}
.nw-tl-year{position:static; transform:none; display:inline-block; margin-bottom:8px}
.nw-tl-dot{top:38px}
.nw-layout{flex-direction:column}
.nw-sidebar{width:100%; position:static}
.nw-related-grid{grid-template-columns:repeat(2, 1fr)}
.nw-card{flex-direction:column; gap:14px}
.nw-card-img{width:100%; aspect-ratio:16/9}
.nw-d-layout{flex-direction:column}
.nw-d-sidebar{width:100%; position:static}
.nw-d-related-grid{grid-template-columns:repeat(2, 1fr)}
.nw-d-nav{grid-template-columns:1fr}
}
@media (max-width:768px){
.nw-hero, .nw-d-hero{
height:clamp(180px, 38vw, 260px);
}
.nw-hero-title{font-size:clamp(20px, 5vw, 26px); letter-spacing:1px}
.nw-hero-sub{font-size:12px; letter-spacing:1px; margin-bottom:4px}
.nw-hero-tag{font-size:9px; letter-spacing:3px; padding:3px 10px}
.nw-hero .breadcrumb{font-size:11px}
.nw-main, .nw-story, .nw-related, .nw-partners-section, .nw-d-cases{padding:32px 0}
.nw-related-grid, .nw-d-related-grid{grid-template-columns:1fr}
.nw-story-head{margin-bottom:24px}
.nw-story-title{font-size:22px; letter-spacing:2px}
.nw-partners-head{margin-bottom:24px}
.nw-partners-title{font-size:22px; letter-spacing:2px}
.nw-partners-desc{font-size:13px}
.nw-flip-card{height:200px}
.nw-flip-face{padding:18px 14px; border-radius:14px}
.nw-flip-icon{width:50px; height:50px; margin-bottom:8px}
.nw-flip-icon svg{width:32px; height:32px}
.nw-flip-title{font-size:16px; letter-spacing:1px}
.nw-flip-desc{font-size:12px; line-height:1.55}
.nw-flip-hint{display:none}
.nw-flip-back h4{font-size:15px; padding-bottom:6px; margin-bottom:8px}
.nw-flip-back p{font-size:12px; line-height:1.7}
.nw-flip-year{font-size:17px; padding:3px 10px}
.nw-clients-row-lg .nw-cl-item{height:72px; border-radius:12px}
.nw-sidebar .nw-side-card, 
.nw-sidebar .nw-contact{margin-bottom:18px}
.nw-d-breadcrumb{font-size:11px; padding:8px 0}
.nw-d-main{padding:24px 0}
.nw-d-article{border-radius:14px}
.nw-d-head{padding:18px 18px 14px}
.nw-d-title{font-size:20px}
.nw-d-meta{flex-wrap:wrap; gap:6px 14px}
.nw-d-body{padding:18px; font-size:14px; line-height:1.85}
.nw-d-footer{padding:14px 18px}
.nw-d-nav{padding:0 0}
.nw-d-nav-item{padding:14px 16px}
.nw-tl-item{flex:0 0 100%; padding-left:0; text-align:center}
.nw-tl-dot{display:none}
.nw-story-stats-row{
flex-wrap:wrap;
gap:18px;
padding:20px 16px;
}
.nw-stat-divider{display:none}
.nw-stat{flex:0 0 calc(50% - 9px); min-width:auto}
.nw-stat:nth-last-child(1):nth-child(odd){flex:0 0 100%}
.nw-card{padding:18px}
.nw-card-body{padding:0}
.nw-card-title{font-size:17px}
.nw-card-desc{font-size:13px; -webkit-line-clamp:3}
}
@media (max-width:480px){
.nw-hero, .nw-d-hero{
height:clamp(160px, 42vw, 220px);
}
.nw-hero-tag{letter-spacing:2px; padding:3px 8px; font-size:8px}
.nw-hero-title{font-size:18px; letter-spacing:1px}
.nw-hero-sub{display:none}
.nw-hero .breadcrumb{font-size:10px}
.nw-flip-grid{gap:10px}
.nw-flip-card{height:170px}
.nw-flip-face{padding:15px 12px}
.nw-flip-icon{width:44px; height:44px; margin-bottom:6px}
.nw-flip-icon svg{width:28px; height:28px}
.nw-flip-en{font-size:8px; letter-spacing:2px}
.nw-flip-title{font-size:15px; letter-spacing:1px}
.nw-flip-desc{font-size:11px}
.nw-flip-back h4{font-size:14px}
.nw-flip-back p{font-size:11px; line-height:1.6}
.nw-flip-year{font-size:15px; padding:2px 8px}
.nw-clients-row-lg{gap:10px}
.nw-clients-row-lg .nw-cl-item{height:60px; border-radius:10px}
.nw-story-title, .nw-partners-title{font-size:20px}
.nw-story-tag, .nw-partners-tag{font-size:9px; letter-spacing:3px; padding:4px 12px}
.nw-d-head{padding:16px 16px 12px}
.nw-d-title{font-size:18px; letter-spacing:1px}
.nw-d-body{padding:16px; font-size:14px}
.nw-d-meta-item{font-size:11px}
}
.nw-d-hero{
height:clamp(280px, 32vw, 500px);
background:linear-gradient(135deg, #1b5e20 0%, #2e7d32 50%, #4caf50 100%);
background-size:cover;
background-position:center;
position:relative;
overflow:hidden;
}
.nw-d-breadcrumb{
background:#fafbfc;
border-bottom:1px solid #eee;
padding:10px 0;
font-size:12px;
color:#888;
}
.nw-d-breadcrumb a{
color:#666;
text-decoration:none;
transition:color .2s;
}
.nw-d-breadcrumb a:hover{color:#2e7d32}
.nw-d-breadcrumb span{
margin:0 8px;
color:#ccc;
}
.nw-d-breadcrumb .current{
color:#2e7d32;
margin:0;
}
.nw-d-main{
padding:clamp(32px, 4vw, 52px) 0;
background:#fff;
}
.nw-d-layout{
display:flex;
gap:clamp(20px, 2.5vw, 40px);
align-items:flex-start;
}
.nw-d-content{
flex:1;
min-width:0;
}
.nw-d-sidebar{
width:300px;
flex-shrink:0;
position:sticky;
top:100px;
}
.nw-d-article{
background:#fff;
border-radius:16px;
overflow:hidden;
border:1px solid #f0f0f0;
box-shadow:0 4px 24px rgba(0, 0, 0, .03);
}
.nw-d-cover{
width:100%;
aspect-ratio:16/7;
overflow:hidden;
background:#f5f5f5;
position:relative;
}
.nw-d-cover img{
width:100%;
height:100%;
object-fit:cover;
transition:transform .5s ease;
}
.nw-d-head{
padding:clamp(20px, 2.5vw, 32px) clamp(20px, 2.5vw, 40px) 0;
border-bottom:1px solid #f0f0f0;
margin:0 clamp(20px, 2.5vw, 40px);
padding-bottom:20px;
}
.nw-d-cat{
display:inline-block;
font-size:11px;
letter-spacing:2px;
color:#fff;
background:linear-gradient(135deg, #2e7d32, #4caf50);
padding:3px 12px;
border-radius:4px;
margin-bottom:12px;
font-weight:500;
}
.nw-d-title{
font-size:clamp(20px, 2.2vw, 28px);
font-weight:800;
color:#1a1a1a;
line-height:1.4;
margin-bottom:12px;
}
.nw-d-meta{
display:flex;
flex-wrap:wrap;
gap:16px;
font-size:13px;
color:#999;
}
.nw-d-meta-item{
display:inline-flex;
align-items:center;
gap:6px;
}
.nw-d-meta-item svg{
color:#bbb;
}
.nw-d-body{
padding:clamp(20px, 2.5vw, 32px) clamp(20px, 2.5vw, 40px);
font-size:15px;
line-height:2;
color:#444;
}
.nw-d-body p{
margin-bottom:16px;
}
.nw-d-body img{
max-width:100%;
height:auto;
border-radius:10px;
margin:12px 0;
display:block;
}
.nw-d-body h2, .nw-d-body h3{
font-weight:700;
color:#1a1a1a;
margin:24px 0 12px;
}
.nw-d-body ul, .nw-d-body ol{
padding-left:24px;
margin-bottom:16px;
}
.nw-d-body li{
margin-bottom:6px;
}
.nw-d-body blockquote{
border-left:4px solid #2e7d32;
padding:12px 20px;
margin:16px 0;
background:#f7faf7;
color:#555;
border-radius:0 8px 8px 0;
}
.nw-d-footer{
padding:16px clamp(20px, 2.5vw, 40px) 24px;
border-top:1px solid #f0f0f0;
background:#fafbfc;
}
.nw-d-tags{
display:flex;
flex-wrap:wrap;
align-items:center;
gap:8px;
}
.nw-d-tags-label{
font-size:13px;
color:#888;
}
.nw-d-tag-item{
font-size:12px;
color:#555;
text-decoration:none;
padding:4px 12px;
background:#fff;
border:1px solid #e0ebe3;
border-radius:16px;
transition:all .2s;
}
.nw-d-tag-item:hover{
background:#2e7d32;
color:#fff;
border-color:#2e7d32;
}
.nw-d-nav{
display:grid;
grid-template-columns:1fr 1fr;
gap:12px;
margin-top:clamp(18px, 2.2vw, 28px);
}
.nw-d-nav-item{
display:flex;
align-items:center;
gap:14px;
padding:clamp(14px, 1.8vw, 20px);
background:#fff;
border:1px solid #f0f0f0;
border-radius:12px;
text-decoration:none;
transition:all .3s ease;
min-width:0;
}
.nw-d-nav-item:hover{
border-color:#2e7d32;
box-shadow:0 8px 24px rgba(46, 125, 50, .1);
transform:translateY(-2px);
}
.nw-d-nav-arrow{
font-size:20px;
color:#2e7d32;
flex-shrink:0;
}
.nw-d-nav-info{
flex:1;
min-width:0;
}
.nw-d-nav-label{
display:block;
font-size:11px;
color:#aaa;
letter-spacing:1px;
margin-bottom:4px;
}
.nw-d-nav-title{
font-size:13px;
color:#333;
line-height:1.5;
display:-webkit-box;
-webkit-line-clamp:1;
-webkit-box-orient:vertical;
overflow:hidden;
}
.nw-d-nav-next{
flex-direction:row-reverse;
text-align:right;
}
.nw-d-related{
margin-top:clamp(28px, 3.5vw, 44px);
}
.nw-d-related-title{
display:flex;
align-items:center;
gap:10px;
font-size:clamp(16px, 1.7vw, 20px);
font-weight:700;
color:#1a1a1a;
margin-bottom:clamp(16px, 2vw, 24px);
}
.nw-d-related-bar{
width:4px;
height:18px;
background:linear-gradient(180deg, #4caf50, #2e7d32);
border-radius:2px;
}
.nw-d-related-grid{
display:grid;
grid-template-columns:repeat(4, 1fr);
gap:clamp(12px, 1.5vw, 20px);
}
.nw-d-related-card{
text-decoration:none;
color:inherit;
background:#fff;
border:1px solid #f0f0f0;
border-radius:12px;
overflow:hidden;
transition:all .35s ease;
display:flex;
flex-direction:column;
}
.nw-d-related-card:hover{
transform:translateY(-3px);
border-color:#d4e8d8;
box-shadow:0 12px 32px rgba(46, 125, 50, .1);
}
.nw-d-related-img{
aspect-ratio:16/10;
overflow:hidden;
background:#f5f5f5;
}
.nw-d-related-img img{
width:100%;
height:100%;
object-fit:cover;
transition:transform .5s ease;
}
.nw-d-related-card:hover .nw-d-related-img img{
transform:scale(1.08);
}
.nw-d-related-info{
padding:12px 14px 14px;
flex:1;
display:flex;
flex-direction:column;
}
.nw-d-related-cat{
font-size:10px;
color:#2e7d32;
letter-spacing:1px;
margin-bottom:4px;
}
.nw-d-related-name{
font-size:13px;
font-weight:600;
color:#1a1a1a;
line-height:1.5;
margin-bottom:6px;
display:-webkit-box;
-webkit-line-clamp:2;
-webkit-box-orient:vertical;
overflow:hidden;
}
.nw-d-related-date{
font-size:11px;
color:#bbb;
margin-top:auto;
}
.nw-side-cases{
display:flex;
flex-direction:column;
gap:10px;
margin-bottom:12px;
}
.nw-side-case{
display:flex;
gap:10px;
align-items:center;
text-decoration:none;
padding:6px;
border-radius:8px;
transition:all .2s;
}
.nw-side-case:hover{
background:#f3f7f4;
}
.nw-side-case-img{
width:60px;
height:45px;
border-radius:6px;
overflow:hidden;
flex-shrink:0;
background:#f5f5f5;
}
.nw-side-case-img img{
width:100%;
height:100%;
object-fit:cover;
}
.nw-side-case-name{
font-size:13px;
color:#444;
line-height:1.4;
display:-webkit-box;
-webkit-line-clamp:2;
-webkit-box-orient:vertical;
overflow:hidden;
}
.nw-side-more{
display:inline-block;
font-size:12px;
color:#2e7d32;
text-decoration:none;
font-weight:500;
}
.nw-d-cases{
padding:clamp(40px, 5vw, 64px) 0;
background:#f7f9f8;
}
@media (max-width:768px){
.pagination{
gap:8px;
margin-top:40px;
padding:16px 10px;
background:#fafbfb;
border-radius:16px;
}
.pagination a, 
.pagination span{
min-width:38px;
height:38px;
padding:0 12px;
font-size:13px;
border-radius:8px;
}
.pagination .page-info, 
.pagination span[style*="margin"]{
display:none;
}
.pagination span{
display:none;
}
.pagination .current{
min-width:38px;
}
.pagination .current::after{
display:none;
}
}
@media (max-width:480px){
.pagination{
gap:6px;
padding:14px 8px;
}
.pagination a, 
.pagination span{
min-width:36px;
height:36px;
padding:0 10px;
font-size:12px;
border-radius:8px;
}
.pagination .current{
min-width:36px;
font-weight:600;
}
}
.detail-page{
padding:80px 0;
background:var(--gray-50);
}
.detail-card{
background:var(--white);
border-radius:var(--radius-lg);
padding:60px;
}
.detail-title{
font-size:32px;
font-weight:700;
color:var(--dark);
margin-bottom:16px;
line-height:1.3;
}
.detail-meta{
display:flex;
gap:24px;
font-size:14px;
color:var(--gray-400);
padding-bottom:24px;
border-bottom:1px solid var(--gray-200);
margin-bottom:32px;
}
.detail-content{
font-size:16px;
line-height:1.9;
color:var(--gray-600);
}
.detail-content img{
max-width:100%;
border-radius:var(--radius-md);
margin:24px 0;
}
.detail-content p{
margin-bottom:18px;
}
.cd-banner{
position:relative;
height:clamp(200px, 24vw, 320px);
display:flex;
align-items:flex-end;
overflow:hidden;
}
.cd-banner-bg{
position:absolute;
inset:0;
background:var(--gradient-green-dark);
background-size:cover;
background-position:center;
background-repeat:no-repeat;
}
.cd-banner-mask{
position:absolute;
inset:0;
background:linear-gradient(180deg, rgba(0, 20, 8, 0.2) 0%, rgba(0, 20, 8, 0.55) 60%, rgba(0, 20, 8, 0.85) 100%);
}
.cd-banner-inner{
position:relative;
z-index:2;
color:#fff;
padding-bottom:clamp(32px, 4vw, 56px);
width:100%;
}
.cd-breadcrumb{
display:flex;
align-items:center;
gap:6px;
font-size:13px;
color:rgba(255, 255, 255, 0.6);
margin-bottom:18px;
}
.cd-breadcrumb a{
color:rgba(255, 255, 255, 0.75);
text-decoration:none;
}
.cd-breadcrumb a:hover{color:#fff}
.cd-breadcrumb .current{color:rgba(255, 255, 255, 0.95)}
.cd-cat-name{
font-size:clamp(36px, 4.5vw, 64px);
font-weight:800;
margin:0 0 16px;
line-height:1.2;
letter-spacing:1px;
}
.cd-cat-meta{
display:flex;
align-items:center;
gap:12px;
font-size:14px;
color:rgba(255, 255, 255, 0.7);
}
.cd-views{
color:rgba(255, 255, 255, 0.9);
}
.cd-breadcrumb-bar{
background:transparent;
padding:10px 0 4px;
border-bottom:none;
}
.cd-breadcrumb-bar .container{
display:flex;
align-items:center;
font-size:12px;
color:#bbb;
flex-wrap:wrap;
gap:4px;
}
.cd-breadcrumb-bar a{
color:#bbb;
text-decoration:none;
transition:color 0.2s;
}
.cd-breadcrumb-bar a:hover{
color:var(--primary);
}
.cd-breadcrumb-bar .sep{
display:inline;
color:#ddd;
margin:0 2px;
font-size:10px;
}
.cd-breadcrumb-bar .current{
color:#999;
}
.cd-main{
padding:clamp(24px, 3vw, 40px) 0;
background:#f5f6f8;
}
.cd-main .container{
max-width:1560px;
}
.cd-layout{
display:grid;
grid-template-columns:minmax(0, 1fr) clamp(240px, 22vw, 300px);
gap:clamp(24px, 3vw, 40px);
align-items:start;
}
.cd-content{min-width:0}
.cd-article{
background:#fff;
border-radius:16px;
padding:clamp(24px, 3vw, 40px);
box-shadow:0 4px 24px rgba(0, 0, 0, 0.05);
margin-bottom:clamp(16px, 2vw, 24px);
}
.cd-article-title{
font-size:clamp(24px, 2.6vw, 36px);
font-weight:800;
color:#1a1a1a;
margin:0 0 20px;
line-height:1.35;
}
.cd-article-meta{
display:flex;
flex-wrap:wrap;
align-items:center;
gap:0;
font-size:13px;
color:#888;
padding-bottom:14px;
border-bottom:1px solid #eee;
margin-bottom:clamp(14px, 1.8vw, 20px);
}
.cd-meta-tag{
display:inline-flex;
align-items:center;
padding:3px 12px;
background:var(--primary-lighter);
color:var(--primary);
border-radius:100px;
font-weight:600;
margin-right:10px;
}
.cd-meta-dot{
color:#ccc;
margin:0 10px;
}
.cd-meta-author, 
.cd-meta-date, 
.cd-meta-views{
color:#888;
}
.cd-article-body{
font-size:clamp(15px, 1.2vw, 17px);
line-height:1.95;
color:#444;
word-break:break-word;
}
.cd-article-body img{
max-width:100%;
height:auto;
border-radius:12px;
margin:clamp(16px, 2vw, 28px) 0;
box-shadow:0 4px 20px rgba(0, 0, 0, 0.08);
}
.cd-article-body p{margin-bottom:18px}
.cd-nav{
display:grid;
grid-template-columns:1fr 1fr;
gap:16px;
margin-bottom:clamp(16px, 2vw, 24px);
}
.cd-nav-item{
display:flex;
align-items:center;
gap:14px;
padding:20px clamp(16px, 2vw, 24px);
background:#fff;
border-radius:12px;
text-decoration:none;
box-shadow:0 2px 12px rgba(0, 0, 0, 0.04);
transition:all 0.3s ease;
border:1px solid transparent;
}
.cd-nav-item:hover{
border-color:var(--primary);
box-shadow:0 8px 24px rgba(0, 150, 60, 0.15);
transform:translateY(-2px);
}
.cd-nav-next{flex-direction:row-reverse; text-align:right}
.cd-nav-arrow{
font-size:20px;
color:var(--primary);
font-weight:700;
flex-shrink:0;
}
.cd-nav-info{min-width:0; flex:1}
.cd-nav-label{
display:block;
font-size:12px;
color:#aaa;
margin-bottom:4px;
}
.cd-nav-title{
display:block;
font-size:14px;
color:#333;
font-weight:600;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}
.cd-nav-item:hover .cd-nav-title{color:var(--primary)}
.cd-related-title{
display:flex;
align-items:center;
gap:12px;
font-size:clamp(20px, 2vw, 24px);
font-weight:700;
color:#1a1a1a;
margin:0 0 clamp(20px, 2.5vw, 28px);
}
.cd-related-bar{
width:4px;
height:22px;
background:var(--primary);
border-radius:2px;
}
.cd-related-grid{
display:grid;
grid-template-columns:repeat(2, 1fr);
gap:clamp(16px, 2vw, 24px);
}
.cd-related-card{
display:block;
background:#fff;
border-radius:12px;
overflow:hidden;
text-decoration:none;
box-shadow:0 2px 16px rgba(0, 0, 0, 0.04);
transition:all 0.3s ease;
}
.cd-related-card:hover{
transform:translateY(-4px);
box-shadow:0 12px 32px rgba(0, 0, 0, 0.1);
}
.cd-related-img{
width:100%;
aspect-ratio:16/10;
overflow:hidden;
background:#eee;
}
.cd-related-img img{
width:100%;
height:100%;
object-fit:cover;
transition:transform 0.5s ease;
}
.cd-related-card:hover .cd-related-img img{transform:scale(1.06)}
.cd-related-info{
padding:clamp(12px, 1.5vw, 18px);
}
.cd-related-cat{
display:inline-block;
font-size:12px;
color:var(--primary);
font-weight:600;
margin-bottom:6px;
}
.cd-related-name{
font-size:clamp(14px, 1.3vw, 16px);
color:#333;
font-weight:600;
margin:0;
line-height:1.4;
overflow:hidden;
text-overflow:ellipsis;
display:-webkit-box;
-webkit-line-clamp:2;
-webkit-box-orient:vertical;
}
.cd-related-card:hover .cd-related-name{color:var(--primary)}
.cd-sidebar{position:sticky; top:90px; z-index:5}
.cd-sidebar-inner{display:flex; flex-direction:column; gap:20px}
.cd-widget{
background:#fff;
border-radius:12px;
padding:20px;
box-shadow:0 2px 16px rgba(0, 0, 0, 0.04);
}
.cd-widget-title{
display:flex;
align-items:center;
gap:10px;
font-size:16px;
font-weight:700;
color:#1a1a1a;
margin:0 0 16px;
padding-bottom:12px;
border-bottom:1px solid #f0f0f0;
}
.cd-widget-bar{
width:3px;
height:16px;
background:var(--primary);
border-radius:2px;
}
.cd-hot-list{list-style:none; padding:0; margin:0}
.cd-hot-item{
display:flex;
align-items:flex-start;
gap:12px;
padding:10px 0;
text-decoration:none;
border-bottom:1px dashed #f0f0f0;
transition:all 0.2s ease;
}
.cd-hot-item:last-child{border-bottom:none}
.cd-hot-item:hover .cd-hot-name{color:var(--primary)}
.cd-hot-rank{
flex-shrink:0;
width:22px;
height:22px;
display:flex;
align-items:center;
justify-content:center;
font-size:12px;
font-weight:700;
border-radius:5px;
background:#f0f0f0;
color:#999;
}
.cd-hot-list li:nth-child(1) .cd-hot-rank, 
.cd-hot-list li:nth-child(2) .cd-hot-rank, 
.cd-hot-list li:nth-child(3) .cd-hot-rank{
background:var(--primary);
color:#fff;
}
.cd-hot-info{min-width:0; flex:1}
.cd-hot-name{
display:block;
font-size:13px;
color:#333;
line-height:1.4;
overflow:hidden;
text-overflow:ellipsis;
display:-webkit-box;
-webkit-line-clamp:2;
-webkit-box-orient:vertical;
transition:color 0.2s ease;
}
.cd-hot-date{
display:block;
font-size:11px;
color:#bbb;
margin-top:4px;
}
.cd-news-list{list-style:none; padding:0; margin:0}
.cd-news-item{
display:flex;
align-items:center;
gap:10px;
padding:10px 0;
text-decoration:none;
border-bottom:1px dashed #f0f0f0;
transition:all 0.2s ease;
}
.cd-news-item:last-child{border-bottom:none}
.cd-news-item:hover{padding-left:4px}
.cd-news-item:hover .cd-news-name{color:var(--primary)}
.cd-news-dot{
width:5px;
height:5px;
border-radius:50%;
background:var(--primary);
flex-shrink:0;
}
.cd-news-name{
flex:1;
font-size:13px;
color:#444;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
transition:color 0.2s ease;
}
.cd-tags-cloud{
display:flex;
flex-wrap:wrap;
gap:8px;
}
.cd-tag-item{
display:inline-block;
font-size:12px;
color:#666;
background:#f2f4f5;
padding:5px 12px;
border-radius:100px;
text-decoration:none;
border:1px solid transparent;
transition:all 0.2s ease;
}
.cd-tag-item:hover{
color:var(--primary);
background:var(--primary-lighter);
border-color:rgba(0, 120, 50, 0.2);
}
.cd-newcases{
display:grid;
grid-template-columns:repeat(2, 1fr);
gap:10px;
}
.cd-newcase-item{
display:flex;
flex-direction:column;
gap:6px;
text-decoration:none;
transition:transform 0.25s ease;
}
.cd-newcase-item:hover{
transform:translateY(-3px);
}
.cd-newcase-item:hover .cd-newcase-name{
color:var(--primary);
}
.cd-newcase-img{
position:relative;
display:block;
width:100%;
padding-top:66%;
border-radius:8px;
overflow:hidden;
background:#f3f5f6;
}
.cd-newcase-img img{
position:absolute;
inset:0;
width:100%;
height:100%;
object-fit:cover;
display:block;
transition:transform 0.4s ease;
}
.cd-newcase-item:hover .cd-newcase-img img{
transform:scale(1.08);
}
.cd-newcase-name{
font-size:12px;
font-weight:500;
color:#333;
line-height:1.4;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
transition:color 0.2s ease;
}
.cd-widget-more{
display:block;
margin-top:14px;
padding-top:12px;
border-top:1px solid #f0f0f0;
text-align:center;
font-size:12px;
color:var(--primary);
text-decoration:none;
font-weight:500;
transition:all 0.2s ease;
}
.cd-widget-more:hover{
color:var(--primary-dark);
letter-spacing:1px;
}
.cd-contact-card{
background:linear-gradient(135deg, var(--primary-deep) 0%, var(--primary) 100%);
border-radius:12px;
padding:clamp(20px, 2.5vw, 28px);
text-align:center;
color:#fff;
}
.cd-contact-title{
font-size:18px;
font-weight:700;
margin:0 0 10px;
}
.cd-contact-desc{
font-size:13px;
color:rgba(255, 255, 255, 0.8);
margin:0 0 18px;
line-height:1.5;
}
.cd-contact-btn{
display:inline-block;
padding:10px 28px;
background:#fff;
color:var(--primary);
font-size:14px;
font-weight:700;
border-radius:100px;
text-decoration:none;
transition:all 0.3s ease;
}
.cd-contact-btn:hover{
transform:translateY(-2px);
box-shadow:0 8px 20px rgba(0, 0, 0, 0.2);
}
.contact-page{
padding:80px 0;
background:var(--gray-50);
}
.contact-layout{
display:grid;
grid-template-columns:1fr 1.2fr;
gap:40px;
}
.contact-info-card, 
.contact-form-card{
background:var(--white);
border-radius:var(--radius-lg);
padding:48px;
box-shadow:var(--shadow-sm);
}
.contact-info-card h3, 
.contact-form-card h3{
font-size:22px;
font-weight:700;
color:var(--dark);
margin-bottom:24px;
}
.contact-info-row{
display:flex;
gap:16px;
margin-bottom:24px;
font-size:15px;
color:var(--gray-600);
}
.contact-info-row .label{
font-weight:600;
color:var(--dark);
min-width:60px;
}
.contact-form-card .s9-form{
display:flex;
flex-direction:column;
gap:16px;
}
@media (max-width:1280px){
.s4-grid{grid-template-columns:repeat(3, 1fr)}
.list-grid{grid-template-columns:repeat(3, 1fr)}
}
@media (max-width:1024px){
.container{padding:0 28px}
.s2-services{flex-direction:column; min-height:auto}
.s2-left-block{width:100%; height:60vw; min-height:320px}
.s2-right-block{width:100%}
.s2-origin span{font-size:clamp(18px, 4vw, 28px)}
.s2-right-block .item{height:120px; min-height:auto; width:50%; padding:16px}
.s2-right-block .item:before{width:36px; height:36px}
.s2-right-block .item h3{font-size:13px}
.s2-box .txt{padding:40px 5vw}
.s2-block{display:none}
.s2-origin{display:block}
.s3-advantages{flex-direction:column; min-height:auto;
background-color:#DCEDE0 !important;
}
.s3-content-wrap{flex-direction:column; min-height:auto}
.s3-gear-wrap{flex:0 0 100%; min-height:auto}
.s3-gear-panel{
position:relative;
left:auto;
top:auto;
width:100%;
height:auto;
min-height:380px;
opacity:1;
visibility:visible;
}
.s3-gear-panel:not(.active){display:none}
.s3-gear-content{padding:60px 32px}
.s3-num-tag{top:20px; left:24px; font-size:56px}
.s3-gear-bg::after{width:180px; height:180px}
.s3-list-wrap{padding:40px 32px;
background-color:#DCEDE0 !important;
border-top:none;
}
.s3-list{display:grid; grid-template-columns:repeat(3, 1fr); gap:0; border:none}
.s3-item{padding:16px 12px; flex-direction:column; gap:8px; text-align:center; border:none}
.s3-item-dot{display:none}
.s3-list-title{display:none}
.s4-grid{grid-template-columns:repeat(2, 1fr)}
.s5-layout{grid-template-columns:1fr; gap:50px}
.s7-layout{grid-template-columns:1fr; gap:50px}
.s7-faq-scroll{height:420px}
.s9-layout{grid-template-columns:1fr; gap:50px}
.footer-top{grid-template-columns:1fr 1fr; gap:40px}
.s6-steps{flex-wrap:wrap; gap:30px}
.s6-steps::before{display:none}
.s6-step{flex:0 0 calc(50% - 15px)}
.list-grid{grid-template-columns:repeat(2, 1fr)}
.contact-layout{grid-template-columns:1fr}
.cd-layout{grid-template-columns:1fr}
.cd-sidebar{position:static}
.cd-related-grid{grid-template-columns:repeat(2, 1fr)}
}
@media (max-width:768px){
.navbar{
top:12px;
left:12px;
right:12px;
border-radius:12px;
}
.navbar-inner{
padding:12px 16px;
}
.nav-brand .brand-name{font-size:15px}
.nav-brand img{height:28px}
.nav-phone{display:none}
.nav-menu{
position:fixed;
top:0;
right:-100%;
width:100%;
max-width:340px;
height:100vh;
background:var(--white);
flex-direction:column;
padding:70px 28px 24px;
gap:2px;
transition:right 0.35s ease;
box-shadow:var(--shadow-lg);
overflow-y:auto;
-webkit-overflow-scrolling:touch;
z-index:999;
}
.nav-menu.open{right:0}
.nav-menu > li{
border-bottom:1px solid #f3f5f3;
}
.nav-menu > li > a{
color:var(--dark-3);
padding:14px 0;
font-size:16px;
display:flex;
align-items:center;
justify-content:space-between;
}
.nav-menu > li.active > a, 
.nav-menu > li > a:hover{
color:var(--primary);
}
.nav-menu > li.has-sub > a::before{
display:none;
}
.nav-menu > li.has-sub > a::after{
content:'+';
font-size:18px;
color:#bbb;
font-weight:300;
transition:transform 0.25s ease;
}
.nav-menu > li.open > a::after{
content:'−';
color:var(--primary);
}
.nav-submenu{
position:static;
transform:none;
opacity:0;
visibility:hidden;
max-height:0;
overflow:hidden;
box-shadow:none;
background:#f7faf7;
border-radius:10px;
margin-bottom:8px;
transition:all 0.3s ease;
padding:0 14px;
}
.nav-menu > li.open > .nav-submenu{
opacity:1;
visibility:visible;
max-height:500px;
padding:10px 14px;
}
.nav-submenu a{
display:block;
padding:10px 8px;
color:#666;
font-size:14px;
border-bottom:1px dashed #e6ede7;
}
.nav-submenu a:last-child{
border-bottom:none;
}
.nav-submenu a:hover{
color:var(--primary);
background:transparent;
}
.nav-cta .btn-primary{display:none}
.nav-hamburger{
display:flex;
color:var(--white);
position:relative;
z-index:1001;
}
.navbar.scrolled .nav-hamburger{color:var(--dark)}
.section, .section-sm{padding:80px 0}
.s1-content{padding:0 28px}
.s1-meta{display:none}
.s1-progress{display:none}
.s3-advantages{min-height:auto}
.s3-content-wrap{padding:40px 0}
.s3-gear-panel{min-height:320px; border-radius:16px}
.s3-gear-content{padding:32px 24px}
.s3-num-tag{top:16px; left:16px; font-size:48px}
.s3-main-title{font-size:26px}
.s3-detail-title{font-size:24px}
.s3-list{grid-template-columns:repeat(2, 1fr)}
.s3-data-row{gap:20px}
.s4-grid{grid-template-columns:1fr; gap:20px}
.s4-card-img{aspect-ratio:16 / 10}
.s5-video-thumb{aspect-ratio:16 / 9}
.s5-video-play{width:70px; height:70px}
.s5-video-play svg{width:28px; height:28px}
.s6-step{flex:0 0 100%}
.s6-steps{padding-left:0}
.s7-news-item{flex-direction:column; gap:12px; padding:14px}
.s7-news-img{width:100%; height:160px}
.s7-faq-scroll{height:360px}
.s9-form-card{padding:32px 24px}
.s9-form-row{grid-template-columns:1fr}
.footer-top{grid-template-columns:1fr; gap:36px}
.footer-bottom{flex-direction:column; gap:16px; text-align:center}
.list-grid{grid-template-columns:1fr}
.detail-card{padding:32px 20px}
.detail-title{font-size:24px}
.cd-nav{grid-template-columns:1fr}
.cd-nav-next{flex-direction:row; text-align:left}
.cd-related-grid{grid-template-columns:1fr}
.cd-article{padding:28px 20px; border-radius:12px}
.cd-banner{height:260px}
.cd-cat-meta{flex-wrap:wrap; gap:8px}
}
@media (max-width:768px){
.s1-hero{min-height:92vh}
.s1-content{padding:0 20px; text-align:center}
.s1-title{font-size:clamp(26px, 7vw, 40px); margin-bottom:16px}
.s1-subtitle{font-size:clamp(14px, 3.5vw, 16px); margin-bottom:28px}
.s1-actions{justify-content:center; flex-direction:column; align-items:center; gap:12px; width:100%}
.s1-actions .btn{width:85%; max-width:280px}
.s1-scroll-hint{display:none}
.s3-main-title{text-align:center}
.s3-main-sub{text-align:center}
.s3-data-row{justify-content:center}
.s3-gear-content{text-align:center}
.s3-detail-desc{text-align:center}
.s3-detail-list{text-align:center}
.s3-detail-list li{justify-content:center}
.s4-head-inner{text-align:center}
.s5-layout{grid-template-columns:1fr; gap:40px}
.s5-layout .s5-info{order:1}
.s5-layout .s5-video-wrap{order:2}
.s5-info .section-header{text-align:center !important}
.s5-info .section-desc{text-align:center; margin:0 auto}
.s5-text{text-align:center}
.s5-features{grid-template-columns:1fr; gap:10px; max-width:300px; margin:0 auto 28px}
.s5-feature{justify-content:center; text-align:center}
.s5-info .btn-primary{display:block; margin:0 auto}
.s5-video-thumb{aspect-ratio:16 / 10; border-radius:14px; box-shadow:0 12px 36px rgba(0, 40, 20, 0.18)}
.s5-video-play{width:64px; height:64px}
.s5-video-play svg{width:26px; height:26px}
.s5-video-label{bottom:14px; left:14px}
.s5-video-tag{font-size:11px; padding:4px 12px}
.s6-process .section-header{text-align:center}
.s6-step-desc{text-align:center; padding:0 4px}
.s7-head-row{justify-content:center; text-align:center}
.s7-card-title{text-align:center; width:100%}
.s7-more-link{display:block; text-align:center; margin-top:4px}
.s7-news-title{text-align:center}
.s7-news-desc{text-align:center}
.s7-news-more{display:block; text-align:center}
.s8-head{text-align:center}
.s8-title{text-align:center}
.s8-sub{text-align:center}
.s9-contact .section-header{text-align:center}
.s9-info{text-align:center}
.s9-contact-list{justify-content:center}
.s9-contact-item{flex-direction:column; text-align:center; gap:4px}
.s9-contact-icon{margin:0 auto}
.s4-card-img img, 
.s7-news-img img, 
.s7-faq-scroll img{
width:100% !important;
height:100% !important;
object-fit:cover;
object-position:center;
display:block;
}
.s8-logo img{
width:auto !important;
height:auto !important;
max-width:100%;
max-height:100%;
object-fit:contain;
display:block;
}
.s56-wrap::before{background-position:center top; background-size:cover}
.s56-wrap::after{background:rgba(220, 237, 224, 0.82)}
}
@media (max-width:480px){
.container{padding:0 16px}
.s1-content{padding:0 16px}
.s1-title{font-size:clamp(22px, 8vw, 32px); letter-spacing:-0.5px}
.s1-subtitle{font-size:13px; line-height:1.6}
.s1-actions .btn{width:100%; font-size:14px; padding:12px 28px}
.section-header{margin-bottom:40px}
.section-tag{font-size:12px; padding:5px 14px; letter-spacing:1px}
.section-title{font-size:24px}
.section-desc{font-size:14px}
.s5-video-thumb{aspect-ratio:16 / 11; border-radius:12px}
.s5-video-play{width:56px; height:56px}
.s5-video-play svg{width:22px; height:22px}
.s3-gear-panel{min-height:300px}
.s3-gear-content{padding:24px 16px}
.s3-list{grid-template-columns:repeat(2, 1fr)}
.s3-data-item em{font-size:22px}
.s3-data-item label{font-size:11px}
.s6-step-num{width:46px; height:46px; font-size:16px}
.s6-step-title{font-size:15px}
.s6-step-desc{font-size:12px}
.s9-form-card{padding:24px 16px; border-radius:14px}
.s9-form-title{font-size:20px}
}
.cd-stats{
padding:clamp(60px, 7vw, 100px) 0;
background:linear-gradient(135deg, #F0F7F2 0%, #E5F0E8 50%, #D8EBE0 100%);
position:relative;
overflow:hidden;
}
.cd-stats::before{
content:'';
position:absolute;
top:-200px; right:-200px;
width:500px; height:500px;
background:radial-gradient(circle, rgba(0, 120, 50, 0.08) 0%, transparent 70%);
border-radius:50%;
}
.cd-stats-header{text-align:center; max-width:640px; margin:0 auto clamp(40px, 5vw, 70px)}
.cd-stats-grid{
display:grid;
grid-template-columns:repeat(4, 1fr);
gap:clamp(20px, 2.5vw, 36px);
position:relative;
}
.cd-stat-item{
background:#fff;
border-radius:16px;
padding:clamp(28px, 3vw, 44px) clamp(20px, 2.5vw, 32px);
text-align:center;
box-shadow:0 4px 20px rgba(0, 60, 30, 0.06);
border:1px solid rgba(0, 120, 50, 0.08);
transition:all 0.4s ease;
position:relative;
overflow:hidden;
}
.cd-stat-item::before{
content:'';
position:absolute;
top:0; left:0; right:0;
height:3px;
background:linear-gradient(90deg, var(--primary), var(--primary-dark));
transform:scaleX(0);
transform-origin:left;
transition:transform 0.4s ease;
}
.cd-stat-item:hover{
transform:translateY(-8px);
box-shadow:0 20px 50px rgba(0, 60, 30, 0.12);
border-color:rgba(0, 120, 50, 0.2);
}
.cd-stat-item:hover::before{transform:scaleX(1)}
.cd-stat-num{
font-size:clamp(40px, 5vw, 64px);
font-weight:800;
color:var(--primary);
line-height:1;
margin-bottom:8px;
letter-spacing:-1px;
}
.cd-stat-num em{
font-style:normal;
background:linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
-webkit-background-clip:text;
background-clip:text;
-webkit-text-fill-color:transparent;
}
.cd-stat-num span{
font-size:clamp(24px, 3vw, 38px);
color:var(--primary);
margin-left:4px;
}
.cd-stat-label{
font-size:clamp(13px, 1.2vw, 15px);
color:var(--gray-500);
font-weight:500;
letter-spacing:0.5px;
}
.cd-stat-bar{
width:40px; height:3px;
background:linear-gradient(90deg, var(--primary), var(--primary-dark));
border-radius:2px;
margin:16px auto 0;
opacity:0.5;
transition:opacity 0.3s, width 0.3s;
}
.cd-stat-item:hover .cd-stat-bar{opacity:1; width:60px}
.cd-capability{
padding:clamp(60px, 7vw, 100px) 0;
background:#fff;
}
.cd-cap-header{text-align:center; max-width:680px; margin:0 auto clamp(40px, 5vw, 70px)}
.cd-cap-grid{
display:grid;
grid-template-columns:repeat(3, 1fr);
gap:clamp(20px, 2.5vw, 32px);
}
.cd-cap-icon{
width:56px; height:56px;
flex-shrink:0;
background:linear-gradient(135deg, rgba(0, 120, 50, 0.1), rgba(0, 120, 50, 0.03));
border-radius:14px;
display:flex; align-items:center; justify-content:center;
color:var(--primary);
transition:all 0.3s ease;
}
.cd-cap-card:hover .cd-cap-icon{
background:linear-gradient(135deg, var(--primary), var(--primary-dark));
color:#fff;
transform:scale(1.05);
}
.cd-cap-title{
font-size:clamp(17px, 1.6vw, 20px);
font-weight:700;
color:var(--dark);
margin:0;
white-space:nowrap;
}
.cd-cap-card{
background:#fff;
border:1px solid var(--gray-200);
border-radius:16px;
padding:clamp(24px, 2.5vw, 32px);
transition:all 0.4s ease;
position:relative;
overflow:hidden;
display:flex;
flex-direction:column;
gap:14px;
}
.cd-cap-card::after{
content:'';
position:absolute;
top:0; left:0; right:0; bottom:0;
background:linear-gradient(135deg, rgba(0, 120, 50, 0.03) 0%, transparent 50%);
opacity:0;
transition:opacity 0.4s ease;
pointer-events:none;
}
.cd-cap-card:hover{
border-color:var(--primary);
transform:translateY(-6px);
box-shadow:0 20px 50px rgba(0, 60, 30, 0.12);
}
.cd-cap-card:hover::after{opacity:1}
.cd-cap-head{
display:flex;
align-items:center;
gap:14px;
}
.cd-cap-desc{
font-size:14px;
color:var(--gray-500);
line-height:1.7;
margin:0 0 16px;
}
.cd-cap-tags{
display:flex;
flex-wrap:wrap;
gap:6px;
}
.cd-cap-tags span{
font-size:12px;
padding:4px 12px;
background:rgba(0, 120, 50, 0.06);
color:var(--primary);
border-radius:20px;
font-weight:500;
}
.cd-cases{
padding:clamp(60px, 7vw, 100px) 0;
background:#fafbfb;
}
.cd-cases-header{text-align:center; max-width:640px; margin:0 auto clamp(32px, 4vw, 50px)}
.cd-filter{
display:flex;
justify-content:center;
flex-wrap:wrap;
gap:10px;
margin-bottom:clamp(24px, 3vw, 40px);
}
.cd-filter-btn{
padding:8px 22px;
font-size:14px;
font-weight:500;
color:var(--gray-500);
background:#fff;
border:1px solid var(--gray-200);
border-radius:30px;
cursor:pointer;
transition:all 0.3s ease;
}
.cd-filter-btn:hover{
color:var(--primary);
border-color:var(--primary);
}
.cd-filter-btn.active{
background:linear-gradient(135deg, var(--primary), var(--primary-dark));
color:#fff;
border-color:transparent;
box-shadow:0 6px 20px rgba(0, 120, 50, 0.25);
}
.cd-case-card{
transition:opacity 0.3s ease, transform 0.3s ease;
}
.cd-scenes{
padding:clamp(60px, 7vw, 100px) 0;
background:#fff;
overflow:hidden;
}
.cd-scenes-header{text-align:center; max-width:680px; margin:0 auto clamp(40px, 5vw, 60px)}
.cd-scenes-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:clamp(16px, 2vw, 24px);
}
.cd-scene-item{
position:relative;
min-height:clamp(220px, 28vw, 340px);
border-radius:20px;
overflow:hidden;
background-size:cover;
background-position:center;
cursor:pointer;
transition:transform 0.4s ease, box-shadow 0.4s ease;
}
.cd-scene-item.cd-scene-lg{
grid-column:span 1;
}
.cd-scene-item.cd-scene-md{
grid-column:span 1;
min-height:clamp(200px, 22vw, 280px);
}
.cd-scene-item:hover{
transform:translateY(-6px);
box-shadow:0 25px 60px rgba(0, 40, 20, 0.25);
}
.cd-scene-item:hover .cd-scene-overlay{
background:linear-gradient(180deg, rgba(0, 30, 15, 0.3) 0%, rgba(0, 60, 30, 0.85) 100%);
}
.cd-scene-item:hover .cd-scene-content{
transform:translateY(-4px);
}
.cd-scene-item:hover .cd-scene-link{
opacity:1;
transform:translateX(0);
}
.cd-scene-overlay{
position:absolute;
inset:0;
background:linear-gradient(180deg, rgba(0, 30, 15, 0.15) 0%, rgba(0, 60, 30, 0.75) 100%);
transition:background 0.4s ease;
}
.cd-scene-content{
position:absolute;
bottom:0; left:0; right:0;
padding:clamp(24px, 3vw, 36px);
color:#fff;
transition:transform 0.4s ease;
}
.cd-scene-tag{
display:inline-block;
font-size:11px;
font-weight:600;
letter-spacing:2px;
padding:5px 14px;
background:rgba(255, 255, 255, 0.18);
backdrop-filter:blur(10px);
border-radius:20px;
margin-bottom:12px;
}
.cd-scene-title{
font-size:clamp(20px, 2.2vw, 28px);
font-weight:700;
margin:0 0 8px;
line-height:1.3;
}
.cd-scene-desc{
font-size:14px;
line-height:1.6;
margin:0 0 14px;
opacity:0.9;
max-width:480px;
}
.cd-scene-link{
display:inline-block;
font-size:14px;
font-weight:600;
color:#fff;
text-decoration:none;
padding:8px 0;
border-bottom:1px solid rgba(255, 255, 255, 0.4);
opacity:0;
transform:translateX(-10px);
transition:all 0.3s ease;
}
.cd-cta{
padding:clamp(50px, 6vw, 80px) 0;
background:linear-gradient(135deg, var(--primary) 0%, #005a24 100%);
position:relative;
overflow:hidden;
}
.cd-cta::before{
content:'';
position:absolute;
top:-150px; right:-100px;
width:400px; height:400px;
background:radial-gradient(circle, rgba(255, 255, 255, 0.12) 0%, transparent 70%);
border-radius:50%;
}
.cd-cta::after{
content:'';
position:absolute;
bottom:-100px; left:-80px;
width:300px; height:300px;
background:radial-gradient(circle, rgba(255, 255, 255, 0.08) 0%, transparent 70%);
border-radius:50%;
}
.cd-cta-inner{
display:flex;
align-items:center;
justify-content:space-between;
gap:clamp(30px, 4vw, 60px);
position:relative;
}
.cd-cta-text{
color:#fff;
max-width:600px;
}
.cd-cta-title{
font-size:clamp(22px, 2.5vw, 34px);
font-weight:800;
margin:0 0 12px;
letter-spacing:1px;
line-height:1.3;
}
.cd-cta-desc{
font-size:clamp(14px, 1.2vw, 16px);
opacity:0.9;
margin:0;
line-height:1.7;
}
.cd-cta-btns{
display:flex;
gap:14px;
flex-shrink:0;
}
.cd-cta .btn-ghost{
border-color:rgba(255, 255, 255, 0.5);
color:#fff;
background:transparent;
}
.cd-cta .btn-ghost:hover{
background:#fff;
color:var(--primary);
border-color:#fff;
}
@media (max-width:768px){
.cd-stats-grid{
grid-template-columns:repeat(2, 1fr);
gap:16px;
}
.cd-stat-item{
padding:28px 20px;
}
.cd-stat-num{
font-size:42px;
}
.cd-cap-grid{
grid-template-columns:repeat(2, 1fr);
gap:16px;
}
.cd-cap-card{
padding:24px 20px;
}
.cd-cap-icon{
width:48px; height:48px;
}
.cd-cap-icon svg{
width:34px; height:34px;
}
.cd-cap-head{
gap:12px;
}
.cd-cap-title{
font-size:16px;
white-space:normal;
}
.cd-scenes-grid{
grid-template-columns:1fr;
}
.cd-scene-item, 
.cd-scene-item.cd-scene-md{
min-height:220px;
}
.cd-scene-content{
padding:24px 20px;
}
.cd-cta-inner{
flex-direction:column;
text-align:center;
}
.cd-cta-text{
max-width:100%;
}
.cd-cta-btns{
flex-direction:column;
width:100%;
max-width:280px;
}
.cd-filter{
gap:8px;
}
.cd-filter-btn{
padding:7px 16px;
font-size:13px;
}
}
@media (max-width:480px){
.cd-stats-grid{
grid-template-columns:repeat(2, 1fr);
gap:12px;
}
.cd-stat-item{
padding:22px 14px;
border-radius:14px;
}
.cd-stat-num{
font-size:34px;
}
.cd-stat-num span{
font-size:22px;
}
.cd-stat-label{
font-size:12px;
}
.cd-cap-grid{
grid-template-columns:1fr;
gap:14px;
}
.cd-cap-card{
padding:20px 18px;
}
.cd-cap-title{
font-size:17px;
}
.cd-cap-desc{
font-size:13px;
}
.cd-scene-item{
min-height:200px;
border-radius:16px;
}
.cd-scene-content{
padding:20px 16px;
}
.cd-scene-tag{
font-size:10px;
letter-spacing:1.5px;
padding:4px 12px;
margin-bottom:10px;
}
.cd-scene-title{
font-size:18px;
}
.cd-scene-desc{
font-size:13px;
}
.cd-cta-title{
font-size:22px;
}
.cd-cta-desc{
font-size:14px;
}
}
.cd-process{
position:relative;
padding:clamp(48px, 6vw, 90px) 0;
background:
linear-gradient(rgba(0, 120, 50, 0.04) 1px, transparent 1px), 
linear-gradient(90deg, rgba(0, 120, 50, 0.04) 1px, transparent 1px), 
linear-gradient(180deg, #f5f6f8 0%, #eaf3ec 100%);
background-size:32px 32px, 32px 32px, 100% 100%;
}
.cd-process .section-header{margin-bottom:clamp(36px, 4.5vw, 60px)}
.cd-process-steps{
display:flex;
align-items:stretch;
justify-content:center;
}
.cd-step{
flex:1;
max-width:200px;
text-align:center;
padding:0 8px;
}
.cd-step-num{
width:56px;
height:56px;
border-radius:50%;
background:#fff;
color:var(--primary);
font-size:20px;
font-weight:800;
display:flex;
align-items:center;
justify-content:center;
margin:0 auto 16px;
box-shadow:0 4px 16px rgba(0, 120, 50, 0.15);
border:2px solid var(--primary);
transition:all 0.3s;
}
.cd-step:hover .cd-step-num{
background:var(--primary);
color:#fff;
transform:translateY(-4px);
box-shadow:0 8px 24px rgba(0, 120, 50, 0.3);
}
.cd-step-title{
font-size:16px;
font-weight:700;
color:#1a1a1a;
margin:0 0 6px;
}
.cd-step-desc{
font-size:13px;
color:#777;
margin:0;
line-height:1.6;
}
.cd-step-line{
width:clamp(16px, 2.5vw, 40px);
height:2px;
background:repeating-linear-gradient(
90deg, 
var(--primary) 0, 
var(--primary) 6px, 
transparent 6px, 
transparent 12px
);
margin-top:28px;
flex-shrink:0;
}
@media (max-width:900px){
.cd-process-steps{
flex-wrap:wrap;
gap:24px 0;
}
.cd-step{
flex:0 0 33.33%;
max-width:none;
}
.cd-step-line{display:none}
}
@media (max-width:600px){
.cd-step{flex:0 0 50%}
}
.partner-wall{
padding:clamp(50px, 6vw, 90px) 0;
background:#f5f6f8;
}
.partner-wall .section-header{
text-align:center;
margin-bottom:clamp(32px, 4vw, 56px);
}
.partner-grid{
display:grid;
grid-template-columns:repeat(6, 1fr);
gap:clamp(12px, 1.4vw, 20px);
}
.partner-item{
display:flex;
align-items:center;
justify-content:center;
aspect-ratio:3 / 2;
background:#fff;
border-radius:12px;
border:1px solid #eaecef;
padding:14px;
text-decoration:none;
transition:all 0.3s ease;
overflow:hidden;
}
.partner-item:hover{
transform:translateY(-3px);
box-shadow:0 12px 30px rgba(0, 120, 50, 0.12);
border-color:var(--primary);
}
.partner-item img{
max-width:100%;
max-height:100%;
width:auto;
height:auto;
object-fit:contain;
filter:grayscale(30%);
opacity:0.85;
transition:all 0.3s ease;
}
.partner-item:hover img{
filter:grayscale(0);
opacity:1;
}
.partner-name{
display:none;
font-size:14px;
color:#555;
font-weight:500;
text-align:center;
}
@media (max-width:1024px){
.partner-grid{grid-template-columns:repeat(4, 1fr)}
}
@media (max-width:640px){
.partner-grid{grid-template-columns:repeat(3, 1fr); gap:10px}
.partner-item{aspect-ratio:2 / 1; padding:10px}
}
.cd-section-header{
text-align:center;
max-width:680px;
margin:0 auto clamp(40px, 5vw, 70px);
}
.cd-section-tag{
display:inline-block;
font-size:12px;
font-weight:600;
letter-spacing:3px;
padding:6px 18px;
background:rgba(0, 120, 50, 0.08);
color:var(--primary);
border-radius:100px;
margin-bottom:18px;
}
.cd-section-title{
font-size:clamp(26px, 3vw, 40px);
font-weight:800;
color:var(--dark);
margin:0 0 14px;
line-height:1.3;
letter-spacing:1px;
}
.cd-section-title span{
background:linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
-webkit-background-clip:text;
background-clip:text;
-webkit-text-fill-color:transparent;
}
.cd-section-desc{
font-size:clamp(14px, 1.2vw, 16px);
color:var(--gray-500);
margin:0;
line-height:1.8;
}
.cd-section-tag-w{
background:rgba(255, 255, 255, 0.18);
color:#fff;
backdrop-filter:blur(10px);
}
.cd-section-title-w{color:#fff}
.cd-section-title-w span{
background:linear-gradient(135deg, #7edf9f 0%, #a8f0c0 100%);
-webkit-background-clip:text;
background-clip:text;
-webkit-text-fill-color:transparent;
}
.cd-section-desc-w{color:rgba(255, 255, 255, 0.8)}
.cd-about-banner{
position:relative;
min-height:clamp(380px, 50vw, 560px);
display:flex;
align-items:center;
background-size:cover;
background-position:center;
background-repeat:no-repeat;
overflow:hidden;
}
.cd-about-banner-mask{
position:absolute;
inset:0;
background:linear-gradient(180deg, rgba(0, 20, 8, 0.45) 0%, rgba(0, 30, 15, 0.6) 50%, rgba(0, 40, 20, 0.82) 100%);
}
.cd-about-banner-inner{
position:relative;
z-index:2;
color:#fff;
padding:clamp(40px, 6vw, 80px) 0;
text-align:center;
}
.cd-about-banner-tag{
display:inline-block;
font-size:12px;
font-weight:600;
letter-spacing:4px;
padding:6px 22px;
background:rgba(255, 255, 255, 0.15);
backdrop-filter:blur(10px);
border:1px solid rgba(255, 255, 255, 0.25);
border-radius:100px;
margin-bottom:clamp(20px, 2.5vw, 32px);
}
.cd-about-banner-title{
font-size:clamp(32px, 5.5vw, 64px);
font-weight:800;
letter-spacing:clamp(2px, 0.5vw, 6px);
margin:0 0 clamp(16px, 2vw, 24px);
line-height:1.2;
text-shadow:0 4px 20px rgba(0, 0, 0, 0.25);
}
.cd-about-banner-sub{
font-size:clamp(14px, 1.6vw, 18px);
color:rgba(255, 255, 255, 0.88);
max-width:640px;
margin:0 auto clamp(28px, 3.5vw, 44px);
line-height:1.8;
}
.cd-about-banner-btns{
display:flex;
gap:16px;
justify-content:center;
flex-wrap:wrap;
}
.cd-about-breadcrumb{
position:relative;
z-index:3;
background:rgba(0, 0, 0, 0.15);
backdrop-filter:blur(6px);
padding:10px 0;
font-size:13px;
}
.cd-about-breadcrumb .container{
display:flex;
align-items:center;
justify-content:center;
gap:8px;
color:rgba(255, 255, 255, 0.75);
}
.cd-about-breadcrumb a{
color:rgba(255, 255, 255, 0.75);
text-decoration:none;
transition:color 0.2s;
}
.cd-about-breadcrumb a:hover{color:#fff}
.cd-about-breadcrumb .current{color:rgba(255, 255, 255, 0.95)}
.cd-about-intro{
padding:clamp(60px, 8vw, 120px) 0;
background:#fff;
}
.cd-about-intro-grid{
display:grid;
grid-template-columns:clamp(320px, 42vw, 520px) 1fr;
gap:clamp(40px, 6vw, 80px);
align-items:center;
}
.cd-about-intro-left{position:relative}
.cd-about-intro-img-wrap{
position:relative;
width:100%;
padding-top:82%;
border-radius:20px;
overflow:hidden;
box-shadow:0 20px 60px rgba(0, 60, 30, 0.15);
}
.cd-about-intro-img-wrap img{
position:absolute;
inset:0;
width:100%;
height:100%;
object-fit:cover;
display:block;
}
.cd-about-intro-deco{
position:absolute;
border-radius:16px;
pointer-events:none;
}
.cd-deco-1{
width:120px; height:120px;
top:-30px; right:-30px;
background:linear-gradient(135deg, rgba(0, 120, 50, 0.15), rgba(0, 120, 50, 0.03));
z-index:-1;
}
.cd-deco-2{
width:80px; height:80px;
bottom:-20px; left:-20px;
background:linear-gradient(135deg, rgba(0, 120, 50, 0.1), rgba(0, 120, 50, 0.02));
z-index:-1;
}
.cd-about-intro-right{}
.cd-about-intro-title{
font-size:clamp(24px, 3vw, 40px);
font-weight:800;
color:var(--dark);
margin:0 0 18px;
line-height:1.3;
letter-spacing:1px;
}
.cd-about-intro-title span{
background:linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
-webkit-background-clip:text;
background-clip:text;
-webkit-text-fill-color:transparent;
}
.cd-about-intro-lead{
font-size:clamp(15px, 1.5vw, 18px);
color:var(--primary);
font-weight:600;
margin:0 0 14px;
line-height:1.7;
}
.cd-about-intro-text{
font-size:clamp(14px, 1.3vw, 16px);
color:var(--gray-600);
line-height:1.9;
margin:0 0 12px;
}
.cd-about-intro-tags{
display:flex;
flex-wrap:wrap;
gap:10px;
margin-top:clamp(16px, 2vw, 28px);
}
.cd-about-intro-tags span{
font-size:13px;
font-weight:500;
padding:7px 16px;
background:rgba(0, 120, 50, 0.06);
color:var(--primary);
border:1px solid rgba(0, 120, 50, 0.15);
border-radius:100px;
transition:all 0.3s;
}
.cd-about-intro-tags span:hover{
background:var(--primary);
color:#fff;
border-color:var(--primary);
}
.cd-about-stats{
padding:clamp(50px, 6vw, 90px) 0;
background:linear-gradient(135deg, #F0F7F2 0%, #E5F0E8 50%, #D8EBE0 100%);
position:relative;
overflow:hidden;
}
.cd-about-stats::before{
content:'';
position:absolute;
top:-200px; right:-200px;
width:500px; height:500px;
background:radial-gradient(circle, rgba(0, 120, 50, 0.08) 0%, transparent 70%);
border-radius:50%;
}
.cd-about-stats-grid{
display:grid;
grid-template-columns:repeat(4, 1fr);
gap:clamp(20px, 2.5vw, 36px);
position:relative;
}
.cd-about-stat{
background:#fff;
border-radius:16px;
padding:clamp(28px, 3vw, 44px) clamp(20px, 2.5vw, 32px);
text-align:center;
box-shadow:0 4px 20px rgba(0, 60, 30, 0.06);
border:1px solid rgba(0, 120, 50, 0.08);
transition:all 0.4s ease;
position:relative;
overflow:hidden;
}
.cd-about-stat::before{
content:'';
position:absolute;
top:0; left:0; right:0;
height:3px;
background:linear-gradient(90deg, var(--primary), var(--primary-dark));
transform:scaleX(0);
transform-origin:left;
transition:transform 0.4s ease;
}
.cd-about-stat:hover{
transform:translateY(-8px);
box-shadow:0 20px 50px rgba(0, 60, 30, 0.15);
border-color:rgba(0, 120, 50, 0.25);
}
.cd-about-stat:hover::before{transform:scaleX(1)}
.cd-about-stat-num{
font-size:clamp(40px, 5vw, 64px);
font-weight:800;
line-height:1;
margin-bottom:12px;
letter-spacing:-1px;
}
.cd-about-stat-num em{
font-style:normal;
background:linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
-webkit-background-clip:text;
background-clip:text;
-webkit-text-fill-color:transparent;
}
.cd-about-stat-num span{
font-size:clamp(24px, 3vw, 38px);
color:var(--primary);
margin-left:4px;
}
.cd-about-stat-label{
font-size:clamp(13px, 1.2vw, 15px);
color:var(--gray-500);
font-weight:500;
letter-spacing:0.5px;
}
.cd-about-stat-line{
width:40px; height:3px;
background:linear-gradient(90deg, var(--primary), var(--primary-dark));
border-radius:2px;
margin:16px auto 0;
opacity:0.5;
transition:all 0.3s;
}
.cd-about-stat:hover .cd-about-stat-line{opacity:1; width:60px}
.cd-about-adv{
padding:clamp(60px, 8vw, 120px) 0;
background:#fff;
}
.cd-about-adv-grid{
display:grid;
grid-template-columns:repeat(3, 1fr);
gap:clamp(20px, 2.5vw, 32px);
}
.cd-about-adv-card{
position:relative;
background:#fff;
border:1px solid var(--gray-200);
border-radius:16px;
padding:clamp(24px, 2.5vw, 32px);
transition:all 0.4s ease;
overflow:hidden;
}
.cd-about-adv-card::after{
content:'';
position:absolute;
top:0; left:0; right:0;
height:3px;
background:linear-gradient(90deg, var(--primary), var(--primary-dark));
transform:scaleX(0);
transform-origin:left;
transition:transform 0.4s ease;
}
.cd-about-adv-card:hover{
border-color:var(--primary);
transform:translateY(-6px);
box-shadow:0 20px 50px rgba(0, 60, 30, 0.12);
}
.cd-about-adv-card:hover::after{transform:scaleX(1)}
.cd-about-adv-head{
display:flex;
align-items:center;
gap:14px;
margin-bottom:12px;
}
.cd-about-adv-icon{
width:44px; height:44px;
flex-shrink:0;
background:linear-gradient(135deg, rgba(0, 120, 50, 0.1), rgba(0, 120, 50, 0.03));
border-radius:12px;
display:flex; align-items:center; justify-content:center;
color:var(--primary);
transition:all 0.3s ease;
}
.cd-about-adv-card:hover .cd-about-adv-icon{
background:linear-gradient(135deg, var(--primary), var(--primary-dark));
color:#fff;
transform:scale(1.05);
}
.cd-about-adv-title{
font-size:clamp(16px, 1.6vw, 19px);
font-weight:700;
color:var(--dark);
margin:0;
line-height:1.3;
}
.cd-about-adv-desc{
font-size:14px;
color:var(--gray-500);
line-height:1.7;
margin:0;
}
.cd-about-culture{
position:relative;
padding:clamp(70px, 10vw, 140px) 0;
background-size:cover;
background-position:center;
background-attachment:fixed;
overflow:hidden;
}
.cd-about-culture-mask{
position:absolute;
inset:0;
background:linear-gradient(135deg, rgba(0, 30, 15, 0.85) 0%, rgba(0, 60, 30, 0.82) 50%, rgba(0, 40, 20, 0.88) 100%);
}
.cd-about-culture-inner{
position:relative;
z-index:2;
}
.cd-about-culture-head{
text-align:center;
margin:0 auto clamp(40px, 5vw, 70px);
}
.cd-about-culture-grid{
display:grid;
grid-template-columns:repeat(3, 1fr);
gap:clamp(24px, 3vw, 44px);
max-width:1100px;
margin:0 auto;
}
.cd-about-culture-item{
text-align:center;
padding:clamp(28px, 3vw, 40px) clamp(20px, 2.5vw, 32px);
background:rgba(255, 255, 255, 0.06);
backdrop-filter:blur(14px);
border:1px solid rgba(255, 255, 255, 0.12);
border-radius:20px;
transition:all 0.4s ease;
}
.cd-about-culture-item:hover{
background:rgba(255, 255, 255, 0.1);
border-color:rgba(255, 255, 255, 0.25);
transform:translateY(-6px);
box-shadow:0 20px 50px rgba(0, 0, 0, 0.25);
}
.cd-about-culture-symbol{
width:88px; height:88px;
border-radius:50%;
background:rgba(255, 255, 255, 0.08);
display:flex; align-items:center; justify-content:center;
color:#fff;
margin:0 auto clamp(20px, 2vw, 28px);
transition:all 0.4s;
}
.cd-about-culture-item:hover .cd-about-culture-symbol{
background:rgba(255, 255, 255, 0.16);
transform:scale(1.08);
}
.cd-about-culture-title{
font-size:clamp(18px, 1.8vw, 22px);
font-weight:700;
color:#fff;
margin:0 0 12px;
letter-spacing:1px;
}
.cd-about-culture-desc{
font-size:clamp(13px, 1.2vw, 15px);
color:rgba(255, 255, 255, 0.78);
line-height:1.8;
margin:0;
}
.cd-about-story{
padding:clamp(60px, 8vw, 120px) 0;
background:#fff;
}
.cd-about-story-timeline{
position:relative;
max-width:860px;
margin:0 auto;
padding-left:clamp(30px, 5vw, 60px);
}
.cd-about-story-timeline::before{
content:'';
position:absolute;
left:12px; top:8px; bottom:8px;
width:2px;
background:linear-gradient(180deg, var(--primary) 0%, rgba(0, 120, 50, 0.2) 100%);
}
.cd-about-story-item{
position:relative;
padding-bottom:clamp(28px, 3vw, 44px);
padding-left:clamp(20px, 3vw, 36px);
}
.cd-about-story-item:last-child{padding-bottom:0}
.cd-about-story-item::before{
content:'';
position:absolute;
left:-28px; top:4px;
width:14px; height:14px;
background:#fff;
border:3px solid var(--primary);
border-radius:50%;
box-shadow:0 0 0 4px rgba(0, 120, 50, 0.08);
z-index:2;
transition:all 0.3s;
}
.cd-about-story-item:hover::before{
background:var(--primary);
transform:scale(1.2);
box-shadow:0 0 0 6px rgba(0, 120, 50, 0.15);
}
.cd-about-story-year{
display:inline-block;
font-size:clamp(16px, 1.6vw, 20px);
font-weight:800;
color:var(--primary);
margin-bottom:8px;
letter-spacing:1px;
}
.cd-about-story-content h4{
font-size:clamp(15px, 1.5vw, 18px);
font-weight:700;
color:var(--dark);
margin:0 0 8px;
}
.cd-about-story-content p{
font-size:clamp(13px, 1.2vw, 15px);
color:var(--gray-500);
line-height:1.8;
margin:0;
}
.cd-about-story-latest .cd-about-story-year{
font-size:clamp(20px, 2vw, 26px);
color:var(--primary-dark);
}
.cd-about-story-latest .cd-about-story-content h4{
font-size:clamp(17px, 1.8vw, 22px);
}
.cd-about-story-latest::before{
width:18px; height:18px;
background:var(--primary);
border:3px solid #fff;
box-shadow:0 0 0 5px rgba(0, 120, 50, 0.2);
top:2px;
}
.cd-about-story-latest .cd-about-story-year::after{
content:' 现在';
font-size:12px;
font-weight:500;
color:#fff;
background:linear-gradient(135deg, var(--primary), var(--primary-dark));
padding:2px 10px;
border-radius:100px;
margin-left:8px;
letter-spacing:1px;
vertical-align:middle;
}
.cd-about-story-first::before{
background:#fff;
border:3px solid rgba(0, 120, 50, 0.5);
box-shadow:0 0 0 4px rgba(0, 120, 50, 0.05);
}
.cd-about-story-first .cd-about-story-year{
color:var(--gray-400);
font-weight:700;
}
.cd-about-compare{
padding:clamp(60px, 8vw, 120px) 0;
background:linear-gradient(180deg, #fafbfb 0%, #f3f6f4 100%);
}
.cd-about-compare-table{
max-width:1000px;
margin:0 auto;
background:#fff;
border-radius:20px;
overflow:hidden;
box-shadow:0 12px 40px rgba(0, 60, 30, 0.1);
border:1px solid rgba(0, 120, 50, 0.08);
}
.cd-about-compare-row{
display:grid;
grid-template-columns:clamp(120px, 14vw, 180px) 1fr 1fr;
border-bottom:1px solid var(--gray-100);
}
.cd-about-compare-row:last-child{border-bottom:none}
.cd-about-compare-cell{
padding:clamp(16px, 1.8vw, 22px) clamp(14px, 1.6vw, 24px);
font-size:clamp(13px, 1.2vw, 15px);
color:var(--gray-600);
line-height:1.7;
display:flex;
flex-direction:column;
gap:4px;
}
.cd-about-compare-head .cd-about-compare-cell{
background:linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
color:#fff;
font-weight:600;
}
.cd-about-compare-head .cd-about-compare-cell strong{
font-size:clamp(15px, 1.6vw, 18px);
font-weight:700;
}
.cd-about-compare-cell-tag{
font-size:11px;
font-weight:500;
opacity:0.85;
letter-spacing:1px;
}
.cd-about-compare-cell-feature{
background:rgba(0, 120, 50, 0.04);
font-weight:600;
color:var(--dark);
border-right:1px solid var(--gray-100);
display:flex;
align-items:center;
}
.cd-about-compare-cell-us{
border-right:1px solid var(--gray-100);
color:var(--dark);
}
.cd-about-compare-cell-us .tick{
display:inline-flex;
align-items:center;
justify-content:center;
width:18px; height:18px;
background:var(--primary);
color:#fff;
border-radius:50%;
font-size:12px;
font-weight:700;
margin-right:6px;
flex-shrink:0;
}
.cd-about-compare-cell-other{color:var(--gray-400)}
.cd-about-compare-cell-other .cross{
display:inline-flex;
align-items:center;
justify-content:center;
width:18px; height:18px;
background:var(--gray-300);
color:#fff;
border-radius:50%;
font-size:12px;
font-weight:700;
margin-right:6px;
flex-shrink:0;
}
.cd-about-compare-cell-us, 
.cd-about-compare-cell-other{
display:flex;
align-items:center;
}
.cd-about-partners{
padding:clamp(60px, 8vw, 120px) 0;
background:#fff;
}
.cd-about-partners-grid{
display:grid;
grid-template-columns:repeat(4, 1fr);
gap:clamp(14px, 1.6vw, 24px);
}
.cd-about-partner-card{
position:relative;
aspect-ratio:3 / 1.8;
border-radius:16px;
overflow:hidden;
cursor:pointer;
transition:transform 0.4s ease, box-shadow 0.4s ease;
background:#f4f4f4;
}
.cd-about-partner-bg{
position:absolute;
inset:0;
background-size:cover;
background-position:center;
transition:transform 0.5s ease;
}
.cd-about-partner-logo-img{
position:absolute;
inset:0;
display:flex;
align-items:center;
justify-content:center;
z-index:2;
}
.cd-about-partner-logo-img span{
font-size:clamp(15px, 1.6vw, 22px);
font-weight:800;
letter-spacing:1.5px;
color:#fff;
text-shadow:0 2px 12px rgba(0, 0, 0, 0.35);
transition:transform 0.3s, text-shadow 0.3s;
padding:10px 22px;
border:2px solid rgba(255, 255, 255, 0.55);
border-radius:100px;
background:rgba(255, 255, 255, 0.1);
backdrop-filter:blur(6px);
}
.cd-about-partner-card:hover{
transform:translateY(-6px);
box-shadow:0 24px 50px rgba(0, 0, 0, 0.18);
}
.cd-about-partner-card:hover .cd-about-partner-bg{
transform:scale(1.08);
}
.cd-about-partner-card:hover .cd-about-partner-logo-img span{
transform:scale(1.05);
text-shadow:0 4px 20px rgba(0, 0, 0, 0.5);
border-color:rgba(255, 255, 255, 0.85);
background:rgba(255, 255, 255, 0.18);
}
.cd-partner-aliyun .cd-about-partner-bg{
background:linear-gradient(135deg, #ff6a00 0%, #ee0979 100%);
}
.cd-partner-tencent .cd-about-partner-bg{
background:linear-gradient(135deg, #00a4ff 0%, #0052d9 100%);
}
.cd-partner-huawei .cd-about-partner-bg{
background:linear-gradient(135deg, #cf0a2c 0%, #8b0000 100%);
}
.cd-partner-baidu .cd-about-partner-bg{
background:linear-gradient(135deg, #2932e1 0%, #182398 100%);
}
.cd-partner-360 .cd-about-partner-bg{
background:linear-gradient(135deg, #00b050 0%, #007030 100%);
}
.cd-partner-sogou .cd-about-partner-bg{
background:linear-gradient(135deg, #f0a020 0%, #c07010 100%);
}
.cd-partner-douyin .cd-about-partner-bg{
background:linear-gradient(135deg, #000 0%, #25f4ee 60%, #fe2c55 100%);
}
.cd-partner-bytedance .cd-about-partner-bg{
background:linear-gradient(135deg, #3d3d3d 0%, #5c5c5c 100%);
}
.cd-about-cta{
padding:clamp(50px, 7vw, 100px) 0;
background:linear-gradient(135deg, var(--primary) 0%, #005a24 100%);
position:relative;
overflow:hidden;
}
.cd-about-cta::before{
content:'';
position:absolute;
top:-150px; right:-100px;
width:400px; height:400px;
background:radial-gradient(circle, rgba(255, 255, 255, 0.12) 0%, transparent 70%);
border-radius:50%;
}
.cd-about-cta::after{
content:'';
position:absolute;
bottom:-100px; left:-80px;
width:300px; height:300px;
background:radial-gradient(circle, rgba(255, 255, 255, 0.08) 0%, transparent 70%);
border-radius:50%;
}
.cd-about-cta-inner{
display:flex;
align-items:center;
justify-content:space-between;
gap:clamp(30px, 4vw, 60px);
position:relative;
z-index:2;
}
.cd-about-cta-text{
color:#fff;
max-width:600px;
}
.cd-about-cta-num{
display:inline-block;
font-size:14px;
font-weight:600;
letter-spacing:3px;
padding:5px 16px;
background:rgba(255, 255, 255, 0.15);
border-radius:100px;
margin-bottom:16px;
}
.cd-about-cta-title{
font-size:clamp(24px, 3vw, 42px);
font-weight:800;
margin:0 0 14px;
line-height:1.3;
letter-spacing:1px;
}
.cd-about-cta-title span{
background:linear-gradient(135deg, #fff 0%, #b8f5ca 100%);
-webkit-background-clip:text;
background-clip:text;
-webkit-text-fill-color:transparent;
}
.cd-about-cta-desc{
font-size:clamp(14px, 1.2vw, 16px);
opacity:0.88;
margin:0;
line-height:1.9;
}
.cd-about-cta-right{
display:flex;
gap:14px;
flex-shrink:0;
}
.cd-about-cta .btn-ghost{
border-color:rgba(255, 255, 255, 0.5);
color:#fff;
background:transparent;
}
.cd-about-cta .btn-ghost:hover{
background:#fff;
color:var(--primary);
border-color:#fff;
}
@media (max-width:1024px){
.cd-about-intro-grid{
grid-template-columns:1fr;
gap:40px;
}
.cd-about-intro-left{
max-width:480px;
margin:0 auto;
}
.cd-about-intro-right{text-align:center}
.cd-about-intro-tags{justify-content:center}
.cd-about-adv-grid{grid-template-columns:repeat(2, 1fr)}
.cd-about-culture-grid{grid-template-columns:1fr}
.cd-about-partners-grid{grid-template-columns:repeat(3, 1fr)}
}
@media (max-width:768px){
.cd-about-banner{
min-height:clamp(340px, 55vw, 440px);
}
.cd-about-banner-title{letter-spacing:2px}
.cd-about-stats-grid{
grid-template-columns:repeat(2, 1fr);
gap:16px;
}
.cd-about-stat{padding:26px 16px}
.cd-about-stat-num{font-size:44px}
.cd-about-adv-grid{grid-template-columns:1fr; gap:16px}
.cd-about-adv-card{padding:20px}
.cd-about-adv-icon{width:40px; height:40px}
.cd-about-adv-head{gap:12px}
.cd-about-compare-row{
grid-template-columns:100px 1fr 1fr;
}
.cd-about-compare-cell{padding:14px 10px; font-size:13px}
.cd-about-compare-head .cd-about-compare-cell strong{font-size:15px}
.cd-about-partners-grid{grid-template-columns:repeat(2, 1fr); gap:12px}
.cd-about-cta-inner{
flex-direction:column;
text-align:center;
}
.cd-about-cta-text{max-width:100%}
.cd-about-cta-right{
flex-direction:column;
width:100%;
max-width:280px;
}
.cd-about-banner-btns{
flex-direction:column;
width:100%;
max-width:280px;
margin:0 auto;
}
.cd-about-story-timeline{padding-left:32px}
.cd-about-story-timeline::before{left:10px}
.cd-about-story-item::before{left:-26px; width:12px; height:12px}
}
@media (max-width:480px){
.cd-about-banner-title{font-size:clamp(28px, 8vw, 38px)}
.cd-about-banner-sub{font-size:13px}
.cd-section-title{font-size:24px}
.cd-about-stats-grid{gap:12px}
.cd-about-stat{padding:20px 12px; border-radius:14px}
.cd-about-stat-num{font-size:34px}
.cd-about-stat-num span{font-size:22px}
.cd-about-stat-label{font-size:12px}
.cd-about-intro-title{font-size:24px}
.cd-about-intro-tags span{font-size:12px; padding:6px 14px}
.cd-about-compare-row{grid-template-columns:80px 1fr 1fr}
.cd-about-compare-cell{padding:12px 8px; font-size:12px}
.cd-about-compare-cell-us .tick, 
.cd-about-compare-cell-other .cross{width:16px; height:16px; font-size:11px; margin-right:4px}
.cd-about-partners-grid{grid-template-columns:repeat(2, 1fr); gap:10px}
.cd-about-partner-card{border-radius:12px; padding:14px}
.cd-about-partner-logo{font-size:15px; letter-spacing:0.5px}
.cd-about-cta-title{font-size:22px}
.cd-about-cta-desc{font-size:14px}
.cd-about-culture{background-attachment:scroll}
}
.bw-section-head{
text-align:center;
max-width:700px;
margin:0 auto clamp(40px, 5vw, 70px);
}
.bw-section-tag{
display:inline-block;
font-size:12px;
font-weight:600;
letter-spacing:3px;
padding:6px 18px;
background:rgba(0, 120, 50, 0.08);
color:var(--primary);
border-radius:100px;
margin-bottom:18px;
}
.bw-section-title{
font-size:clamp(26px, 3vw, 40px);
font-weight:800;
color:var(--dark);
margin:0 0 14px;
line-height:1.3;
letter-spacing:1px;
}
.bw-section-title span{
background:linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
-webkit-background-clip:text;
background-clip:text;
-webkit-text-fill-color:transparent;
}
.bw-section-desc{
font-size:clamp(14px, 1.2vw, 16px);
color:var(--gray-500);
margin:0;
line-height:1.8;
}
.bw-banner{
position:relative;
min-height:clamp(360px, 48vw, 540px);
display:flex;
flex-direction:column;
background-size:cover;
background-position:center;
background-repeat:no-repeat;
overflow:hidden;
}
.bw-banner-mask{
position:absolute;
inset:0;
background:linear-gradient(180deg, rgba(0, 20, 8, 0.45) 0%, rgba(0, 30, 15, 0.6) 50%, rgba(0, 40, 20, 0.82) 100%);
}
.bw-banner-inner{
position:relative;
z-index:2;
flex:1;
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
text-align:center;
color:#fff;
padding:clamp(60px, 8vw, 100px) 0;
}
.bw-banner-tag{
display:inline-block;
font-size:12px;
font-weight:600;
letter-spacing:4px;
padding:6px 22px;
background:rgba(255, 255, 255, 0.15);
backdrop-filter:blur(10px);
border:1px solid rgba(255, 255, 255, 0.25);
border-radius:100px;
margin-bottom:clamp(16px, 2vw, 24px);
}
.bw-banner-title{
font-size:clamp(34px, 6vw, 68px);
font-weight:800;
letter-spacing:clamp(2px, 0.5vw, 6px);
margin:0 0 clamp(14px, 1.8vw, 22px);
line-height:1.2;
text-shadow:0 4px 20px rgba(0, 0, 0, 0.25);
}
.bw-banner-title span{
background:linear-gradient(135deg, #fff 0%, #b8f5ca 100%);
-webkit-background-clip:text;
background-clip:text;
-webkit-text-fill-color:transparent;
}
.bw-banner-sub{
font-size:clamp(14px, 1.5vw, 18px);
color:rgba(255, 255, 255, 0.88);
max-width:640px;
margin:0 auto clamp(24px, 3vw, 40px);
line-height:1.8;
}
.bw-banner-btns{
display:flex;
gap:16px;
flex-wrap:wrap;
justify-content:center;
}
.bw-banner-crumb{
position:relative;
z-index:3;
background:rgba(0, 0, 0, 0.2);
backdrop-filter:blur(6px);
padding:10px 0;
}
.bw-banner-crumb .container{
display:flex;
align-items:center;
justify-content:center;
gap:8px;
font-size:13px;
color:rgba(255, 255, 255, 0.75);
}
.bw-banner-crumb a{color:rgba(255, 255, 255, 0.75); text-decoration:none}
.bw-banner-crumb a:hover{color:#fff}
.bw-banner-crumb .current{color:rgba(255, 255, 255, 0.95); font-weight:500}
.bw-subnav{
background:#fff;
border-bottom:1px solid var(--gray-100);
position:sticky;
top:70px;
z-index:50;
}
.bw-subnav .container{
display:flex;
align-items:center;
gap:clamp(20px, 3vw, 40px);
padding:0 clamp(20px, 3vw, 40px);
height:60px;
}
.bw-subnav-title{
font-size:16px;
font-weight:700;
color:var(--dark);
padding-right:clamp(20px, 2.5vw, 30px);
border-right:1px solid var(--gray-200);
white-space:nowrap;
}
.bw-subnav-list{
display:flex;
gap:clamp(16px, 2vw, 28px);
list-style:none;
margin:0;
padding:0;
flex:1;
}
.bw-subnav-list li a{
font-size:14px;
font-weight:500;
color:var(--gray-600);
text-decoration:none;
padding:6px 0;
position:relative;
transition:color 0.2s;
}
.bw-subnav-list li a::after{
content:'';
position:absolute;
left:0; bottom:0;
height:2px;
width:0;
background:var(--primary);
transition:width 0.3s;
}
.bw-subnav-list li a:hover, 
.bw-subnav-list li a.active{
color:var(--primary);
}
.bw-subnav-list li a.active::after{width:100%}
.bw-intro{
padding:clamp(60px, 8vw, 120px) 0;
background:#fff;
}
.bw-intro-grid{
display:grid;
grid-template-columns:clamp(320px, 42vw, 520px) 1fr;
gap:clamp(40px, 6vw, 80px);
align-items:center;
}
.bw-intro-img{
position:relative;
width:100%;
padding-top:75%;
border-radius:20px;
overflow:hidden;
box-shadow:0 20px 60px rgba(0, 60, 30, 0.15);
}
.bw-intro-img img{
position:absolute;
inset:0;
width:100%; height:100%;
object-fit:cover;
}
.bw-intro-badge{
position:absolute;
bottom:24px; left:24px;
background:rgba(255, 255, 255, 0.95);
backdrop-filter:blur(10px);
border-radius:14px;
padding:14px 22px;
display:flex;
align-items:baseline;
gap:10px;
box-shadow:0 10px 30px rgba(0, 60, 30, 0.15);
}
.bw-intro-badge strong{
font-size:32px;
font-weight:800;
color:var(--primary);
line-height:1;
}
.bw-intro-badge span{
font-size:13px;
color:var(--gray-600);
font-weight:500;
}
.bw-intro-title{
font-size:clamp(24px, 3vw, 40px);
font-weight:800;
color:var(--dark);
margin:0 0 24px;
line-height:1.3;
}
.bw-intro-title em{
font-style:normal;
color:var(--dark);
}
.bw-intro-title span{
display:inline-block;
background:linear-gradient(135deg, #ff6a00 0%, #ee0979 100%);
color:#fff;
font-size:0.6em;
padding:3px 10px;
border-radius:6px;
margin:0 3px;
vertical-align:middle;
font-weight:700;
letter-spacing:1px;
}
.bw-intro-title .c2{
background:linear-gradient(135deg, #00a4ff 0%, #0052d9 100%);
}
.bw-intro-item{
margin-bottom:14px;
}
.bw-intro-item label{
display:inline-block;
font-size:13px;
font-weight:600;
color:var(--primary);
background:rgba(0, 120, 50, 0.08);
padding:3px 12px;
border-radius:6px;
margin-right:12px;
}
.bw-intro-item p{
display:inline;
font-size:clamp(14px, 1.2vw, 15px);
color:var(--gray-600);
line-height:1.8;
}
.bw-intro-item p strong{
color:var(--primary);
font-weight:700;
font-size:16px;
}
.bw-intro-item-row{
display:grid;
grid-template-columns:1fr 1fr;
gap:16px;
margin-bottom:14px;
}
.bw-intro-btns{
margin-top:clamp(18px, 2vw, 28px);
display:flex;
gap:14px;
}
.bw-types{
padding:clamp(60px, 8vw, 120px) 0;
}
.bw-types-grid{
display:grid;
grid-template-columns:repeat(4, 1fr);
gap:clamp(16px, 1.8vw, 24px);
}
.bw-type-card{
background:#fff;
border-radius:16px;
overflow:hidden;
border:1px solid var(--gray-200);
transition:all 0.4s ease;
display:flex;
flex-direction:column;
}
.bw-type-card:hover{
transform:translateY(-8px);
box-shadow:0 24px 50px rgba(0, 60, 30, 0.15);
border-color:rgba(0, 120, 50, 0.25);
}
.bw-type-img{
position:relative;
width:100%;
padding-top:60%;
background-size:cover;
background-position:center;
background-color:#e8f2ec;
overflow:hidden;
transition:transform 0.5s;
}
.bw-type-card:hover .bw-type-img{transform:scale(1.03)}
.bw-type-img-mask{
position:absolute;
inset:0;
background:linear-gradient(180deg, rgba(0, 0, 0, 0.1) 0%, rgba(0, 30, 15, 0.75) 100%);
display:flex;
align-items:flex-end;
padding:16px 20px;
color:#fff;
font-size:18px;
font-weight:700;
letter-spacing:1px;
text-shadow:0 2px 8px rgba(0, 0, 0, 0.35);
}
.bw-type-info{
padding:clamp(16px, 1.8vw, 22px);
display:flex;
flex-direction:column;
flex:1;
}
.bw-type-info h4{
font-size:clamp(16px, 1.5vw, 19px);
font-weight:700;
color:var(--dark);
margin:0 0 8px;
}
.bw-type-info > p{
font-size:13px;
color:var(--gray-500);
line-height:1.7;
margin:0 0 14px;
flex:1;
}
.bw-type-tags{
display:flex;
flex-wrap:wrap;
gap:6px;
margin-bottom:14px;
}
.bw-type-tags span{
font-size:11px;
font-weight:500;
color:var(--primary);
background:rgba(0, 120, 50, 0.08);
padding:3px 10px;
border-radius:100px;
letter-spacing:0.5px;
}
.bw-type-foot{
display:flex;
align-items:baseline;
justify-content:space-between;
padding-top:12px;
border-top:1px dashed var(--gray-200);
}
.bw-type-foot em{
font-style:normal;
font-size:clamp(18px, 1.8vw, 24px);
font-weight:800;
color:var(--primary);
line-height:1;
}
.bw-type-foot span{
font-size:12px;
color:var(--gray-400);
margin-left:2px;
}
.bw-type-foot a{
font-size:12px;
font-weight:600;
color:var(--primary);
text-decoration:none;
padding:5px 12px;
background:rgba(0, 120, 50, 0.08);
border-radius:100px;
transition:all 0.2s;
}
.bw-type-foot a:hover{
background:var(--primary);
color:#fff;
}
.bw-types-tips{
text-align:center;
margin-top:clamp(24px, 3vw, 36px);
font-size:12px;
color:var(--gray-400);
line-height:1.7;
}
.bw-config{
padding:clamp(60px, 8vw, 120px) 0;
background:#fff;
}
.bw-table-wrap{
max-width:1100px;
margin:0 auto;
border-radius:16px;
overflow:hidden;
box-shadow:0 12px 40px rgba(0, 60, 30, 0.08);
border:1px solid rgba(0, 120, 50, 0.08);
}
.bw-table-head-row{
display:grid;
grid-template-columns:clamp(130px, 15vw, 190px) 1fr clamp(90px, 11vw, 140px);
background:linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
color:#fff;
font-weight:600;
font-size:15px;
}
.bw-table-row{
display:grid;
grid-template-columns:clamp(130px, 15vw, 190px) 1fr clamp(90px, 11vw, 140px);
border-bottom:1px solid var(--gray-100);
transition:background 0.2s;
}
.bw-table-row:last-child{border-bottom:none}
.bw-table-row:hover{background:rgba(0, 120, 50, 0.03)}
.bw-table-cell{
padding:clamp(14px, 1.6vw, 20px) clamp(12px, 1.5vw, 20px);
font-size:clamp(13px, 1.2vw, 15px);
line-height:1.7;
display:flex;
align-items:center;
color:var(--gray-600);
}
.bw-cell-1{
background:rgba(0, 120, 50, 0.04);
font-weight:600;
color:var(--dark);
border-right:1px solid var(--gray-100);
gap:8px;
}
.bw-cell-1 .dot{
width:8px; height:8px;
border-radius:50%;
background:var(--primary);
flex-shrink:0;
}
.bw-cell-2{
border-right:1px solid var(--gray-100);
}
.bw-cell-2 a{
color:var(--primary);
text-decoration:none;
font-weight:500;
}
.bw-cell-2 a:hover{text-decoration:underline}
.bw-cell-3{
color:var(--gray-500);
font-size:clamp(12px, 1.1vw, 14px);
}
.bw-func{
padding:clamp(60px, 8vw, 120px) 0;
}
.bw-func-grid{
display:grid;
grid-template-columns:repeat(4, 1fr);
gap:clamp(14px, 1.6vw, 22px);
}
.bw-func-card{
background:#fff;
border:1px solid var(--gray-200);
border-radius:14px;
padding:clamp(20px, 2.2vw, 28px) clamp(16px, 1.8vw, 22px);
text-align:center;
transition:all 0.3s ease;
}
.bw-func-card:hover{
border-color:var(--primary);
transform:translateY(-4px);
box-shadow:0 16px 40px rgba(0, 60, 30, 0.1);
}
.bw-func-icon{
font-size:32px;
margin-bottom:12px;
}
.bw-func-name{
font-size:16px;
font-weight:700;
color:var(--dark);
margin-bottom:6px;
}
.bw-func-desc{
font-size:13px;
color:var(--gray-500);
line-height:1.6;
margin:0;
}
.bw-func-tips{
text-align:center;
margin-top:clamp(24px, 3vw, 36px);
font-size:13px;
color:var(--gray-400);
}
.bw-process{
padding:clamp(60px, 8vw, 120px) 0;
background:#fff;
}
.bw-process-grid{
display:grid;
grid-template-columns:repeat(4, 1fr);
gap:clamp(16px, 1.8vw, 26px);
}
.bw-process-step{
position:relative;
background:#fff;
border:1px solid var(--gray-200);
border-radius:16px;
padding:clamp(24px, 2.5vw, 32px) clamp(18px, 2vw, 26px);
text-align:center;
transition:all 0.3s;
overflow:hidden;
}
.bw-process-step::before{
content:'';
position:absolute;
top:0; left:0; right:0;
height:3px;
background:linear-gradient(90deg, var(--primary), var(--primary-dark));
transform:scaleX(0);
transition:transform 0.3s;
}
.bw-process-step:hover{
border-color:var(--primary);
transform:translateY(-6px);
box-shadow:0 20px 50px rgba(0, 60, 30, 0.12);
}
.bw-process-step:hover::before{transform:scaleX(1)}
.bw-process-num{
font-size:14px;
font-weight:700;
color:var(--primary);
letter-spacing:2px;
margin-bottom:8px;
}
.bw-process-icon{
font-size:36px;
margin-bottom:12px;
}
.bw-process-step h4{
font-size:17px;
font-weight:700;
color:var(--dark);
margin:0 0 8px;
}
.bw-process-step p{
font-size:13px;
color:var(--gray-500);
line-height:1.7;
margin:0;
}
.bw-cases{
padding:clamp(60px, 8vw, 120px) 0;
}
.bw-cases-grid{
display:grid;
grid-template-columns:repeat(4, 1fr);
gap:clamp(16px, 1.8vw, 26px);
}
.bw-case-card{
display:block;
background:#fff;
border-radius:16px;
overflow:hidden;
box-shadow:0 6px 20px rgba(0, 60, 30, 0.06);
border:1px solid rgba(0, 120, 50, 0.06);
transition:all 0.4s ease;
text-decoration:none;
color:inherit;
}
.bw-case-card:hover{
transform:translateY(-8px);
box-shadow:0 24px 50px rgba(0, 60, 30, 0.15);
border-color:rgba(0, 120, 50, 0.25);
}
.bw-case-img{
position:relative;
width:100%;
padding-top:65%;
overflow:hidden;
background:#f0f4f1;
}
.bw-case-img img{
position:absolute;
inset:0;
width:100%; height:100%;
object-fit:cover;
transition:transform 0.5s ease;
}
.bw-case-card:hover .bw-case-img img{
transform:scale(1.08);
}
.bw-case-mask{
position:absolute;
inset:0;
background:linear-gradient(180deg, transparent 50%, rgba(0, 30, 15, 0.7) 100%);
display:flex;
align-items:flex-end;
justify-content:center;
padding-bottom:24px;
opacity:0;
transition:opacity 0.3s;
}
.bw-case-card:hover .bw-case-mask{opacity:1}
.bw-case-mask span{
color:#fff;
font-size:13px;
font-weight:600;
letter-spacing:2px;
padding:8px 20px;
border:1px solid rgba(255, 255, 255, 0.5);
border-radius:100px;
background:rgba(255, 255, 255, 0.1);
backdrop-filter:blur(8px);
}
.bw-case-info{
padding:clamp(16px, 1.8vw, 22px);
}
.bw-case-info h4{
font-size:clamp(15px, 1.3vw, 17px);
font-weight:700;
color:var(--dark);
margin:0 0 8px;
line-height:1.4;
display:-webkit-box;
-webkit-line-clamp:1;
-webkit-box-orient:vertical;
overflow:hidden;
}
.bw-case-info p{
font-size:13px;
color:var(--gray-500);
line-height:1.6;
margin:0 0 12px;
display:-webkit-box;
-webkit-line-clamp:2;
-webkit-box-orient:vertical;
overflow:hidden;
}
.bw-case-meta{
display:flex;
justify-content:space-between;
font-size:12px;
color:var(--gray-400);
}
.bw-cases-more{
text-align:center;
margin-top:clamp(28px, 3.5vw, 44px);
}
.bw-compare{
padding:clamp(60px, 8vw, 120px) 0;
background:#fff;
}
.bw-compare-table{
max-width:1000px;
margin:0 auto;
background:#fff;
border-radius:20px;
overflow:hidden;
box-shadow:0 12px 40px rgba(0, 60, 30, 0.1);
border:1px solid rgba(0, 120, 50, 0.08);
}
.bw-compare-row{
display:grid;
grid-template-columns:clamp(110px, 13vw, 170px) 1fr 1fr;
border-bottom:1px solid var(--gray-100);
}
.bw-compare-row:last-child{border-bottom:none}
.bw-compare-row:hover{background:rgba(0, 120, 50, 0.02)}
.bw-compare-head{
background:linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
color:#fff;
}
.bw-compare-head .bw-compare-cell{
color:#fff;
}
.bw-compare-cell{
padding:clamp(14px, 1.6vw, 22px) clamp(14px, 1.6vw, 24px);
font-size:clamp(13px, 1.2vw, 15px);
color:var(--gray-600);
display:flex;
align-items:center;
gap:8px;
line-height:1.7;
}
.bw-compare-head .bw-compare-cell strong{
font-size:clamp(15px, 1.5vw, 18px);
display:block;
margin-bottom:4px;
}
.bw-tag{
font-size:11px;
font-weight:500;
opacity:0.85;
letter-spacing:1px;
}
.bw-compare-row .bw-cell-1{
background:rgba(0, 120, 50, 0.04);
font-weight:600;
color:var(--dark);
justify-content:center;
text-align:center;
border-right:1px solid var(--gray-100);
}
.bw-compare-row .bw-cell-2{
color:var(--dark);
border-right:1px solid var(--gray-100);
}
.bw-compare-row .bw-cell-3{
color:var(--gray-400);
}
.tick{
display:inline-flex;
align-items:center;
justify-content:center;
width:18px; height:18px;
background:var(--primary);
color:#fff;
border-radius:50%;
font-size:12px;
font-weight:700;
flex-shrink:0;
}
.cross{
display:inline-flex;
align-items:center;
justify-content:center;
width:18px; height:18px;
background:var(--gray-300);
color:#fff;
border-radius:50%;
font-size:12px;
font-weight:700;
flex-shrink:0;
}
.bw-cta{
padding:clamp(50px, 7vw, 100px) 0;
background:linear-gradient(135deg, var(--primary) 0%, #005a24 100%);
position:relative;
overflow:hidden;
}
.bw-cta::before{
content:'';
position:absolute;
top:-150px; right:-100px;
width:400px; height:400px;
background:radial-gradient(circle, rgba(255, 255, 255, 0.12) 0%, transparent 70%);
border-radius:50%;
}
.bw-cta::after{
content:'';
position:absolute;
bottom:-100px; left:-80px;
width:300px; height:300px;
background:radial-gradient(circle, rgba(255, 255, 255, 0.08) 0%, transparent 70%);
border-radius:50%;
}
.bw-cta-inner{
display:flex;
align-items:center;
justify-content:space-between;
gap:clamp(30px, 4vw, 60px);
position:relative;
z-index:2;
}
.bw-cta-text{
color:#fff;
max-width:600px;
}
.bw-cta-num{
display:inline-block;
font-size:12px;
font-weight:600;
letter-spacing:3px;
padding:5px 14px;
background:rgba(255, 255, 255, 0.15);
border-radius:100px;
margin-bottom:14px;
}
.bw-cta-text h2{
font-size:clamp(24px, 3vw, 40px);
font-weight:800;
margin:0 0 12px;
line-height:1.3;
letter-spacing:1px;
}
.bw-cta-text h2 span{
background:linear-gradient(135deg, #fff 0%, #b8f5ca 100%);
-webkit-background-clip:text;
background-clip:text;
-webkit-text-fill-color:transparent;
}
.bw-cta-text p{
font-size:clamp(14px, 1.2vw, 16px);
opacity:0.88;
margin:0;
line-height:1.9;
}
.bw-cta-right{
display:flex;
gap:14px;
flex-shrink:0;
}
.btn-outline-white{
border:1.5px solid rgba(255, 255, 255, 0.6);
color:#fff;
background:transparent;
padding:12px 26px;
font-size:14px;
font-weight:600;
border-radius:100px;
text-decoration:none;
transition:all 0.3s;
display:inline-block;
}
.btn-outline-white:hover{
background:#fff;
color:var(--primary);
border-color:#fff;
}
.btn-outline{
border:1.5px solid var(--primary);
color:var(--primary);
background:transparent;
padding:12px 26px;
font-size:14px;
font-weight:600;
border-radius:100px;
text-decoration:none;
transition:all 0.3s;
display:inline-block;
}
.btn-outline:hover{
background:var(--primary);
color:#fff;
}
.btn-accent{
background:linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
color:#fff;
padding:13px 28px;
font-size:14px;
font-weight:600;
border-radius:100px;
text-decoration:none;
display:inline-block;
transition:all 0.3s;
box-shadow:0 6px 20px rgba(0, 120, 50, 0.25);
}
.btn-accent:hover{
transform:translateY(-2px);
box-shadow:0 10px 30px rgba(0, 120, 50, 0.35);
}
.btn-ghost{
border:1.5px solid rgba(255, 255, 255, 0.5);
color:#fff;
background:transparent;
padding:12px 26px;
font-size:14px;
font-weight:600;
border-radius:100px;
text-decoration:none;
transition:all 0.3s;
display:inline-block;
}
.btn-ghost:hover{
background:#fff;
color:var(--primary);
border-color:#fff;
}
.btn-white{
background:#fff;
color:var(--primary);
padding:13px 28px;
font-size:14px;
font-weight:600;
border-radius:100px;
text-decoration:none;
display:inline-block;
transition:all 0.3s;
}
.btn-white:hover{
transform:translateY(-2px);
box-shadow:0 10px 30px rgba(0, 0, 0, 0.2);
}
.btn-lg{font-size:16px; padding:15px 34px}
.btn-arrow::after{
content:' →';
margin-left:4px;
transition:margin 0.2s;
}
.btn-arrow:hover::after{margin-left:8px}
@media (max-width:1024px){
.bw-intro-grid{
grid-template-columns:1fr;
gap:40px;
}
.bw-intro-left{
max-width:480px;
margin:0 auto;
}
.bw-intro-right{text-align:center}
.bw-intro-btns{justify-content:center}
.bw-func-grid{grid-template-columns:repeat(3, 1fr)}
.bw-process-grid{grid-template-columns:repeat(2, 1fr)}
.bw-cases-grid{grid-template-columns:repeat(3, 1fr)}
.bw-types-grid{grid-template-columns:repeat(3, 1fr)}
}
@media (max-width:768px){
.bw-banner{min-height:clamp(320px, 55vw, 420px)}
.bw-banner-title{font-size:clamp(28px, 8vw, 40px); letter-spacing:2px}
.bw-banner-btns{flex-direction:column; max-width:280px; margin:0 auto}
.bw-subnav{position:static}
.bw-subnav .container{
flex-direction:column;
height:auto;
padding:16px 20px;
gap:12px;
align-items:flex-start;
}
.bw-subnav-title{
border-right:none;
padding-right:0;
margin-bottom:4px;
}
.bw-subnav-list{
flex-wrap:wrap;
gap:14px 18px;
}
.bw-intro-item-row{grid-template-columns:1fr; gap:10px}
.bw-intro-item p{display:block; margin-top:4px}
.bw-table-head-row, 
.bw-table-row{
grid-template-columns:100px 1fr 80px;
}
.bw-table-cell{padding:12px 10px; font-size:13px}
.bw-func-grid{grid-template-columns:repeat(2, 1fr)}
.bw-cases-grid{grid-template-columns:repeat(2, 1fr); gap:14px}
.bw-types-grid{grid-template-columns:repeat(2, 1fr); gap:14px}
.bw-compare-row{grid-template-columns:90px 1fr 1fr}
.bw-compare-cell{padding:12px 10px; font-size:13px}
.bw-cta-inner{
flex-direction:column;
text-align:center;
}
.bw-cta-right{
flex-direction:column;
width:100%;
max-width:280px;
}
}
@media (max-width:480px){
.bw-banner-title{font-size:clamp(26px, 8.5vw, 34px)}
.bw-banner-sub{font-size:13px}
.bw-section-title{font-size:24px}
.bw-func-grid{gap:10px}
.bw-func-card{padding:18px 14px; border-radius:12px}
.bw-func-icon{font-size:28px}
.bw-func-name{font-size:15px}
.bw-func-desc{font-size:12px}
.bw-process-grid{gap:12px}
.bw-process-step{padding:20px 14px; border-radius:12px}
.bw-process-icon{font-size:28px}
.bw-case-info{padding:14px}
.bw-case-info h4{font-size:15px}
.bw-type-img-mask{font-size:14px; padding:10px 14px}
.bw-type-info{padding:14px}
.bw-type-info h4{font-size:15px}
.bw-type-info > p{font-size:12px}
.bw-type-foot em{font-size:18px}
.bw-table-head-row, 
.bw-table-row{grid-template-columns:80px 1fr 70px}
.bw-table-cell{padding:10px 8px; font-size:12px}
.bw-compare-row{grid-template-columns:75px 1fr 1fr}
.bw-compare-cell{padding:10px 8px; font-size:12px}
.tick, .cross{width:16px; height:16px; font-size:11px}
.bw-cta-text h2{font-size:22px}
.bw-cta-text p{font-size:14px}
}
.seo-section-head{
text-align:center;
margin-bottom:clamp(40px, 5vw, 70px);
}
.seo-section-head .seo-section-tag{
display:inline-block;
font-size:11px;
font-weight:700;
letter-spacing:3px;
color:var(--primary);
background:rgba(0, 120, 50, 0.08);
padding:5px 16px;
border-radius:100px;
margin-bottom:14px;
}
.seo-section-head .seo-section-title{
font-size:clamp(26px, 3.5vw, 40px);
font-weight:800;
color:var(--dark);
margin:0 0 14px;
line-height:1.25;
}
.seo-section-head .seo-section-title span{
color:var(--primary);
}
.seo-section-head .seo-section-desc{
font-size:15px;
color:var(--gray-500);
max-width:680px;
margin:0 auto;
line-height:1.8;
}
.seo-section-head.seo-section-light .seo-section-title{color:#fff}
.seo-section-head.seo-section-light .seo-section-desc{color:rgba(255, 255, 255, 0.7)}
.seo-section-head.seo-section-light .seo-section-tag{background:rgba(255, 255, 255, 0.15); color:#fff}
.seo-banner{
position:relative;
padding:clamp(70px, 9vw, 140px) 0 clamp(50px, 6vw, 80px);
background:linear-gradient(135deg, #0a1a12 0%, #0d2818 40%, #083d1f 100%);
color:#fff;
overflow:hidden;
}
.seo-banner-bg{
position:absolute;
inset:0;
pointer-events:none;
}
.seo-banner-grid{
position:absolute;
inset:0;
background-image:
linear-gradient(rgba(0, 180, 90, 0.07) 1px, transparent 1px), 
linear-gradient(90deg, rgba(0, 180, 90, 0.07) 1px, transparent 1px);
background-size:44px 44px;
}
.seo-banner-glow{
position:absolute;
width:480px;
height:480px;
border-radius:50%;
filter:blur(120px);
opacity:0.4;
}
.seo-glow-1{
top:-100px; left:-100px;
background:radial-gradient(circle, #00b45a, transparent 70%);
}
.seo-glow-2{
bottom:-120px; right:-80px;
background:radial-gradient(circle, #007832, transparent 70%);
opacity:0.35;
}
.seo-banner .container{position:relative; z-index:2}
.seo-banner-inner{text-align:center; max-width:900px; margin:0 auto}
.seo-banner-tag{
display:inline-block;
font-size:11px;
font-weight:700;
letter-spacing:3px;
color:#5fd89b;
background:rgba(0, 180, 90, 0.12);
padding:6px 18px;
border-radius:100px;
border:1px solid rgba(0, 180, 90, 0.25);
margin-bottom:20px;
}
.seo-banner-title{
font-size:clamp(32px, 4.5vw, 56px);
font-weight:800;
margin:0 0 18px;
line-height:1.2;
}
.seo-banner-title span{
background:linear-gradient(135deg, #5fd89b, #00b45a, #9effd0);
-webkit-background-clip:text;
background-clip:text;
color:transparent;
}
.seo-banner-sub{
font-size:clamp(14px, 1.5vw, 17px);
color:rgba(255, 255, 255, 0.75);
line-height:1.8;
margin:0 0 32px;
}
.seo-banner-search{
max-width:580px;
margin:0 auto 32px;
text-align:left;
}
.seo-search-box{
display:flex;
align-items:center;
gap:12px;
background:#fff;
color:var(--dark);
padding:14px 20px;
border-radius:14px;
box-shadow:0 20px 60px rgba(0, 0, 0, 0.3);
margin-bottom:10px;
}
.seo-search-icon{
width:20px; height:20px;
color:var(--primary);
flex-shrink:0;
}
.seo-search-text{
flex:1;
font-size:16px;
color:var(--dark);
font-weight:500;
position:relative;
}
.seo-search-cursor{
display:inline-block;
width:2px;
height:18px;
background:var(--primary);
margin-left:2px;
animation:seo-blink 1s step-end infinite;
vertical-align:middle;
}
@keyframes seo-blink{
50%{opacity:0}
}
.seo-search-result{
background:#fff;
border-radius:14px;
padding:14px;
box-shadow:0 20px 60px rgba(0, 0, 0, 0.25);
}
.seo-result-item{
display:flex;
gap:12px;
padding:6px 4px;
}
.seo-result-rank{
width:24px; height:24px;
border-radius:6px;
background:var(--primary);
color:#fff;
font-size:13px;
font-weight:700;
display:flex;
align-items:center;
justify-content:center;
flex-shrink:0;
}
.seo-result-info h5{
color:#1a0dab;
font-size:15px;
margin:0 0 4px;
font-weight:600;
}
.seo-result-info p{
color:#545454;
font-size:12px;
margin:0 0 3px;
line-height:1.5;
}
.seo-result-url{
color:#006621;
font-size:11px;
}
.seo-banner-btns{
display:flex;
gap:14px;
justify-content:center;
flex-wrap:wrap;
}
.seo-banner-crumb{
position:relative;
z-index:2;
margin-top:clamp(30px, 4vw, 50px);
padding-top:20px;
border-top:1px solid rgba(255, 255, 255, 0.1);
font-size:13px;
color:rgba(255, 255, 255, 0.6);
}
.seo-banner-crumb .container{
display:flex;
justify-content:center;
gap:8px;
}
.seo-banner-crumb a{color:rgba(255, 255, 255, 0.8); text-decoration:none}
.seo-banner-crumb span{color:rgba(255, 255, 255, 0.4)}
.seo-engines{
padding:clamp(60px, 8vw, 120px) 0;
background:#fff;
}
.seo-engines-grid{
display:grid;
grid-template-columns:repeat(3, 1fr);
gap:clamp(18px, 2vw, 28px);
}
.seo-engine-card{
position:relative;
background:#fff;
border:1px solid var(--gray-200);
border-radius:20px;
padding:clamp(24px, 2.5vw, 32px);
transition:all 0.4s ease;
overflow:hidden;
}
.seo-engine-card:hover{
transform:translateY(-6px);
box-shadow:0 24px 50px rgba(0, 60, 30, 0.12);
border-color:rgba(0, 120, 50, 0.2);
}
.seo-engine-logo{
display:flex;
align-items:center;
gap:12px;
margin-bottom:18px;
}
.seo-engine-name{
font-size:22px;
font-weight:800;
color:var(--dark);
}
.seo-engine-baidu .seo-engine-name{color:#2319dc}
.seo-engine-google .seo-engine-name{
background:linear-gradient(90deg, #4285f4, #ea4335, #fbbc04, #34a853);
-webkit-background-clip:text;
background-clip:text;
color:transparent;
}
.seo-engine-bing .seo-engine-name{color:#008373}
.seo-engine-dot{
width:8px; height:8px;
border-radius:50%;
background:#22c55e;
box-shadow:0 0 0 4px rgba(34, 197, 94, 0.2);
}
.seo-engine-stats{
display:flex;
gap:14px;
margin-bottom:18px;
}
.seo-engine-stat{
flex:1;
background:var(--gray-50);
border-radius:12px;
padding:12px;
text-align:center;
}
.seo-engine-stat strong{
display:block;
font-size:24px;
font-weight:800;
color:var(--dark);
line-height:1;
}
.seo-engine-stat strong span{
font-size:14px;
color:var(--primary);
margin-left:1px;
}
.seo-engine-stat p{
font-size:11px;
color:var(--gray-500);
margin:4px 0 0;
}
.seo-engine-tags{
display:flex;
flex-wrap:wrap;
gap:6px;
margin-bottom:18px;
}
.seo-engine-tags span{
font-size:11px;
font-weight:500;
color:var(--primary);
background:rgba(0, 120, 50, 0.08);
padding:3px 10px;
border-radius:100px;
}
.seo-engine-mock{
background:#fff;
border:1px solid var(--gray-200);
border-radius:12px;
padding:12px;
box-shadow:inset 0 0 0 1px rgba(0, 0, 0, 0.02);
}
.seo-mock-bar{
display:flex;
align-items:center;
gap:10px;
margin-bottom:10px;
padding-bottom:10px;
border-bottom:1px solid var(--gray-100);
}
.seo-mock-logo{
font-size:14px;
font-weight:800;
color:var(--dark);
flex-shrink:0;
}
.seo-mock-logo.g-blue{color:#4285f4}
.seo-mock-logo.b-logo{
width:20px; height:20px;
display:flex; align-items:center; justify-content:center;
background:#008373; color:#fff; border-radius:4px;
font-size:12px;
}
.seo-mock-input{
flex:1;
height:18px;
background:var(--gray-100);
border-radius:4px;
}
.seo-mock-result{
display:flex;
gap:8px;
padding:6px 4px;
border-radius:6px;
transition:all 0.2s;
}
.seo-mock-result.active{
background:rgba(0, 120, 50, 0.05);
}
.seo-mock-num{
width:18px; height:18px;
border-radius:4px;
background:var(--gray-200);
color:var(--gray-500);
font-size:10px;
font-weight:700;
display:flex; align-items:center; justify-content:center;
flex-shrink:0;
}
.seo-mock-result.active .seo-mock-num{
background:var(--primary);
color:#fff;
}
.seo-mock-title{
font-size:12px;
font-weight:600;
color:#1a0dab;
margin-bottom:2px;
line-height:1.3;
}
.seo-mock-url{
font-size:10px;
color:#006621;
}
.seo-why{
padding:clamp(60px, 8vw, 120px) 0;
}
.seo-why-wrap{
display:grid;
grid-template-columns:1fr 1fr;
gap:clamp(30px, 4vw, 60px);
align-items:center;
}
.seo-why-left .seo-section-title{text-align:left}
.seo-why-sub{
font-size:15px;
color:var(--gray-500);
line-height:1.8;
margin:0 0 28px;
}
.seo-why-list{
display:flex;
flex-direction:column;
gap:14px;
}
.seo-why-item{
display:flex;
gap:14px;
padding:14px 18px;
background:#fff;
border-radius:12px;
border-left:3px solid var(--primary);
transition:all 0.3s;
}
.seo-why-item:hover{
transform:translateX(6px);
box-shadow:0 12px 30px rgba(0, 60, 30, 0.08);
}
.seo-why-num{
font-size:22px;
font-weight:800;
color:var(--primary);
line-height:1;
flex-shrink:0;
}
.seo-why-text h5{
margin:0 0 4px;
font-size:15px;
font-weight:700;
color:var(--dark);
}
.seo-why-text p{
margin:0;
font-size:13px;
color:var(--gray-500);
line-height:1.6;
}
.seo-diagnosis-card{
background:#fff;
border-radius:20px;
padding:clamp(24px, 3vw, 36px);
box-shadow:0 24px 60px rgba(0, 60, 30, 0.12);
border:1px solid rgba(0, 120, 50, 0.1);
position:relative;
overflow:hidden;
}
.seo-diagnosis-card::before{
content:'';
position:absolute;
top:-60px; right:-60px;
width:180px; height:180px;
background:radial-gradient(circle, rgba(0, 180, 90, 0.15), transparent 70%);
border-radius:50%;
}
.seo-diag-head{
display:flex;
gap:14px;
align-items:center;
margin-bottom:22px;
}
.seo-diag-icon{
width:48px; height:48px;
border-radius:12px;
background:linear-gradient(135deg, var(--primary), var(--primary-dark));
color:#fff;
display:flex; align-items:center; justify-content:center;
flex-shrink:0;
}
.seo-diag-icon svg{width:24px; height:24px}
.seo-diag-head h4{
font-size:18px;
font-weight:700;
margin:0 0 3px;
color:var(--dark);
}
.seo-diag-head p{
margin:0;
font-size:13px;
color:var(--gray-500);
}
.seo-diag-input{
display:flex;
gap:8px;
margin-bottom:18px;
}
.seo-diag-input input{
flex:1;
padding:12px 16px;
border:2px solid var(--gray-200);
border-radius:10px;
font-size:14px;
outline:none;
transition:border-color 0.2s;
}
.seo-diag-input input:focus{border-color:var(--primary)}
.seo-diag-btn{
padding:12px 22px;
background:var(--primary);
color:#fff;
border:none;
border-radius:10px;
font-size:14px;
font-weight:600;
cursor:pointer;
white-space:nowrap;
transition:all 0.2s;
}
.seo-diag-btn:hover{background:var(--primary-dark)}
.seo-diag-tips{
display:flex;
flex-wrap:wrap;
gap:10px;
margin-bottom:18px;
}
.seo-diag-tips span{
font-size:12px;
color:var(--gray-500);
}
.seo-diag-foot{
font-size:12px;
color:var(--gray-400);
padding-top:14px;
border-top:1px dashed var(--gray-200);
text-align:center;
}
.seo-diag-foot strong{
color:var(--primary);
font-size:14px;
}
.seo-types{
padding:clamp(60px, 8vw, 120px) 0;
background:#fff;
}
.seo-types-grid{
display:grid;
grid-template-columns:repeat(4, 1fr);
gap:clamp(16px, 1.8vw, 24px);
}
.seo-type-card{
background:#fff;
border:1px solid var(--gray-200);
border-radius:16px;
padding:clamp(20px, 2.2vw, 28px);
transition:all 0.4s ease;
display:flex;
flex-direction:column;
}
.seo-type-card:hover{
transform:translateY(-8px);
box-shadow:0 24px 50px rgba(0, 60, 30, 0.14);
border-color:rgba(0, 120, 50, 0.25);
}
.seo-type-icon{
width:52px; height:52px;
border-radius:14px;
display:flex; align-items:center; justify-content:center;
margin-bottom:16px;
}
.seo-type-icon svg{width:26px; height:26px; color:#fff}
.seo-type-1{background:linear-gradient(135deg, #007832, #00b45a)}
.seo-type-2{background:linear-gradient(135deg, #2319dc, #5b6cff)}
.seo-type-3{background:linear-gradient(135deg, #f59e0b, #fbbf24)}
.seo-type-4{background:linear-gradient(135deg, #0891b2, #22d3ee)}
.seo-type-card h4{
font-size:17px;
font-weight:700;
color:var(--dark);
margin:0 0 8px;
}
.seo-type-card > p{
font-size:13px;
color:var(--gray-500);
line-height:1.7;
margin:0 0 14px;
flex:1;
}
.seo-type-list{
list-style:none;
padding:0;
margin:0 0 14px;
display:flex;
flex-direction:column;
gap:5px;
}
.seo-type-list li{
font-size:12px;
color:var(--gray-500);
}
.seo-type-foot{
padding-top:12px;
border-top:1px dashed var(--gray-200);
}
.seo-type-foot em{
font-style:normal;
font-size:22px;
font-weight:800;
color:var(--primary);
line-height:1;
}
.seo-type-foot span{
font-size:12px;
color:var(--gray-400);
margin-left:4px;
}
.seo-process{
padding:clamp(60px, 8vw, 120px) 0;
position:relative;
}
.seo-process-grid{
display:flex;
align-items:flex-start;
gap:10px;
overflow-x:auto;
padding:20px 0;
}
.seo-process-item{
flex:0 0 auto;
min-width:130px;
text-align:center;
position:relative;
}
.seo-process-num{
width:54px; height:54px;
border-radius:50%;
background:linear-gradient(135deg, var(--primary), #00b45a);
color:#fff;
font-size:22px;
font-weight:800;
display:flex; align-items:center; justify-content:center;
margin:0 auto 14px;
box-shadow:0 8px 24px rgba(0, 180, 90, 0.35);
position:relative;
z-index:2;
}
.seo-process-item h5{
font-size:15px;
font-weight:700;
color:#fff;
margin:0 0 6px;
}
.seo-process-item p{
font-size:12px;
color:rgba(255, 255, 255, 0.6);
margin:0;
line-height:1.6;
}
.seo-process-arrow{
flex:0 0 auto;
color:rgba(255, 255, 255, 0.3);
font-size:18px;
margin-top:18px;
font-weight:700;
}
.seo-guarantee{
padding:clamp(60px, 8vw, 120px) 0;
background:#fff;
}
.seo-guarantee-grid{
display:grid;
grid-template-columns:repeat(5, 1fr);
gap:clamp(14px, 1.5vw, 20px);
}
.seo-gar-card{
text-align:center;
padding:clamp(20px, 2.2vw, 28px) 14px;
background:#fff;
border:1px solid var(--gray-200);
border-radius:16px;
transition:all 0.3s;
}
.seo-gar-card:hover{
transform:translateY(-6px);
box-shadow:0 18px 40px rgba(0, 60, 30, 0.1);
border-color:rgba(0, 120, 50, 0.2);
}
.seo-gar-icon{
width:56px; height:56px;
border-radius:14px;
background:linear-gradient(135deg, rgba(0, 120, 50, 0.08), rgba(0, 180, 90, 0.12));
color:var(--primary);
display:flex; align-items:center; justify-content:center;
margin:0 auto 14px;
}
.seo-gar-icon svg{width:28px; height:28px}
.seo-gar-card h4{
font-size:15px;
font-weight:700;
color:var(--dark);
margin:0 0 6px;
}
.seo-gar-card p{
font-size:12px;
color:var(--gray-500);
margin:0;
line-height:1.6;
}
.seo-cases{
padding:clamp(60px, 8vw, 120px) 0;
}
.seo-cases-grid{
display:grid;
grid-template-columns:repeat(4, 1fr);
gap:clamp(16px, 1.8vw, 24px);
}
.seo-case-card{
background:#fff;
border:1px solid var(--gray-200);
border-radius:16px;
overflow:hidden;
text-decoration:none;
transition:all 0.4s;
color:inherit;
display:flex;
flex-direction:column;
}
.seo-case-card:hover{
transform:translateY(-6px);
box-shadow:0 20px 50px rgba(0, 60, 30, 0.12);
}
.seo-case-img{
position:relative;
padding-top:60%;
background-size:cover;
background-position:center;
background-color:#e8f2ec;
}
.seo-case-overlay{
position:absolute;
inset:0;
background:linear-gradient(180deg, transparent 50%, rgba(0, 0, 0, 0.5) 100%);
display:flex;
align-items:flex-end;
padding:12px;
}
.seo-case-rank{
background:linear-gradient(135deg, var(--primary), #00b45a);
color:#fff;
font-size:11px;
font-weight:700;
padding:4px 10px;
border-radius:100px;
letter-spacing:0.5px;
}
.seo-case-info{
padding:clamp(14px, 1.5vw, 20px);
flex:1;
display:flex;
flex-direction:column;
}
.seo-case-info h4{
font-size:16px;
font-weight:700;
color:var(--dark);
margin:0 0 8px;
line-height:1.4;
}
.seo-case-meta{
display:flex;
gap:10px;
margin-bottom:8px;
}
.seo-case-meta span{
font-size:11px;
color:var(--primary);
background:rgba(0, 120, 50, 0.08);
padding:3px 8px;
border-radius:6px;
}
.seo-case-info p{
font-size:12px;
color:var(--gray-500);
margin:0;
line-height:1.6;
flex:1;
display:-webkit-box;
-webkit-line-clamp:2;
-webkit-box-orient:vertical;
overflow:hidden;
}
.seo-case-empty{
grid-column:1 / -1;
text-align:center;
padding:40px;
color:var(--gray-400);
font-size:14px;
}
.seo-faq{
padding:clamp(60px, 8vw, 120px) 0;
background:#fff;
}
.seo-faq-list{
max-width:800px;
margin:0 auto;
display:flex;
flex-direction:column;
gap:12px;
}
.seo-faq-item{
background:var(--gray-50);
border-radius:14px;
border:1px solid var(--gray-200);
overflow:hidden;
transition:all 0.3s;
}
.seo-faq-item[open]{
background:#fff;
border-color:var(--primary);
box-shadow:0 10px 30px rgba(0, 60, 30, 0.08);
}
.seo-faq-item summary{
list-style:none;
padding:18px 22px;
font-size:15px;
font-weight:600;
color:var(--dark);
cursor:pointer;
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
user-select:none;
}
.seo-faq-item summary::-webkit-details-marker{display:none}
.seo-faq-item summary::after{
content:'+';
font-size:22px;
font-weight:700;
color:var(--primary);
flex-shrink:0;
transition:transform 0.3s;
}
.seo-faq-item[open] summary::after{
content:'−';
}
.seo-faq-item p{
padding:0 22px 20px;
margin:0;
font-size:14px;
color:var(--gray-500);
line-height:1.8;
}
.seo-cta{
padding:clamp(60px, 8vw, 100px) 0;
background:linear-gradient(135deg, var(--primary-dark) 0%, var(--primary) 50%, #00a34b 100%);
color:#fff;
text-align:center;
position:relative;
overflow:hidden;
}
.seo-cta::before{
content:'';
position:absolute;
inset:0;
background-image:radial-gradient(circle at 20% 50%, rgba(255, 255, 255, 0.1) 0%, transparent 50%), 
radial-gradient(circle at 80% 50%, rgba(255, 255, 255, 0.08) 0%, transparent 50%);
}
.seo-cta-inner{
position:relative;
z-index:2;
max-width:700px;
margin:0 auto;
}
.seo-cta h2{
font-size:clamp(26px, 3.5vw, 40px);
font-weight:800;
margin:0 0 14px;
line-height:1.3;
}
.seo-cta h2 span{
background:linear-gradient(135deg, #fff, #9effd0);
-webkit-background-clip:text;
background-clip:text;
color:transparent;
}
.seo-cta p{
font-size:15px;
opacity:0.85;
margin:0 0 28px;
line-height:1.8;
}
.seo-cta-btns{
display:flex;
gap:14px;
justify-content:center;
flex-wrap:wrap;
}
.btn-white{
background:#fff;
color:var(--primary);
border-color:#fff;
}
.btn-white:hover{
background:#f0fff5;
color:var(--primary-dark);
}
.btn-ghost-white{
background:transparent;
color:#fff;
border:2px solid rgba(255, 255, 255, 0.6);
}
.btn-ghost-white:hover{
background:rgba(255, 255, 255, 0.15);
border-color:#fff;
}
@media (max-width:1024px){
.seo-engines-grid{grid-template-columns:repeat(2, 1fr)}
.seo-types-grid{grid-template-columns:repeat(2, 1fr)}
.seo-guarantee-grid{grid-template-columns:repeat(3, 1fr)}
.seo-cases-grid{grid-template-columns:repeat(3, 1fr)}
.seo-why-wrap{grid-template-columns:1fr; gap:40px}
.seo-why-left .seo-section-title{text-align:center}
.seo-why-sub{text-align:center}
.seo-banner-search{max-width:500px}
}
@media (max-width:768px){
.seo-engines-grid{grid-template-columns:1fr}
.seo-guarantee-grid{grid-template-columns:repeat(2, 1fr)}
.seo-cases-grid{grid-template-columns:repeat(2, 1fr); gap:14px}
.seo-engines, .seo-why, .seo-types, .seo-process, .seo-guarantee, .seo-cases, .seo-faq{
padding:60px 0;
}
.seo-banner-title{font-size:30px}
.seo-banner-search{display:none}
.seo-process-grid{flex-wrap:nowrap; overflow-x:auto; gap:0}
.seo-process-item{min-width:110px}
.seo-process-arrow{display:none}
.seo-process-item:not(:last-child)::after{
content:'→';
color:rgba(255, 255, 255, 0.3);
font-weight:700;
font-size:14px;
margin:20px 6px 0;
}
}
@media (max-width:480px){
.seo-types-grid{grid-template-columns:1fr}
.seo-guarantee-grid{grid-template-columns:1fr}
.seo-cases-grid{grid-template-columns:1fr}
.seo-why-list{gap:10px}
.seo-why-item{padding:12px 14px}
.seo-why-text h5{font-size:14px}
.seo-why-text p{font-size:12px}
.seo-diag-input{flex-direction:column}
.seo-diag-btn{width:100%}
.seo-faq-item summary{font-size:14px; padding:14px 16px}
.seo-faq-item p{padding:0 16px 16px; font-size:13px}
}
.geo-section-head{
text-align:center;
margin-bottom:clamp(44px, 5vw, 74px);
}
.geo-section-tag{
display:inline-block;
font-size:11px;
font-weight:700;
letter-spacing:3px;
color:#00d4ff;
background:rgba(0, 212, 255, 0.08);
border:1px solid rgba(0, 212, 255, 0.25);
padding:5px 16px;
border-radius:100px;
margin-bottom:16px;
}
.geo-section-title{
font-size:clamp(26px, 3.5vw, 42px);
font-weight:800;
color:var(--dark);
margin:0 0 14px;
line-height:1.25;
}
.geo-section-title span{
background:linear-gradient(135deg, var(--primary), #00d4ff);
-webkit-background-clip:text;
background-clip:text;
color:transparent;
}
.geo-section-desc{
font-size:15px;
color:var(--gray-500);
max-width:680px;
margin:0 auto;
line-height:1.8;
}
.geo-section-light .geo-section-title{color:#fff}
.geo-section-light .geo-section-desc{color:rgba(255, 255, 255, 0.7)}
.geo-section-light .geo-section-tag{background:rgba(0, 212, 255, 0.15); border-color:rgba(0, 212, 255, 0.35); color:#00d4ff}
.geo-banner{
position:relative;
padding:clamp(70px, 9vw, 140px) 0 clamp(50px, 6vw, 80px);
background:#050a07;
color:#fff;
overflow:hidden;
}
.geo-banner-bg{position:absolute; inset:0; pointer-events:none}
.geo-grid{
position:absolute;
inset:0;
background-image:
linear-gradient(rgba(0, 212, 255, 0.04) 1px, transparent 1px), 
linear-gradient(90deg, rgba(0, 212, 255, 0.04) 1px, transparent 1px);
background-size:50px 50px;
mask-image:radial-gradient(ellipse at center, black 30%, transparent 80%);
}
.geo-orb{
position:absolute;
border-radius:50%;
filter:blur(100px);
}
.geo-orb-1{
top:-150px; left:-150px;
width:500px; height:500px;
background:radial-gradient(circle, rgba(0, 180, 90, 0.5), transparent 70%);
}
.geo-orb-2{
bottom:-180px; right:-100px;
width:550px; height:550px;
background:radial-gradient(circle, rgba(0, 212, 255, 0.4), transparent 70%);
}
.geo-orb-3{
top:40%; left:50%;
width:300px; height:300px;
transform:translateX(-50%);
background:radial-gradient(circle, rgba(120, 50, 255, 0.35), transparent 70%);
}
.geo-particles{
position:absolute;
inset:0;
overflow:hidden;
}
.geo-particles span{
position:absolute;
top:100%;
left:var(--x);
width:4px; height:4px;
background:#00d4ff;
border-radius:50%;
box-shadow:0 0 10px #00d4ff;
animation:geo-float-up 6s linear infinite;
animation-delay:var(--d);
font-size:0;
}
@keyframes geo-float-up{
0%{transform:translateY(0); opacity:0}
10%{opacity:1}
90%{opacity:1}
100%{transform:translateY(-100vh); opacity:0}
}
.geo-banner .container{position:relative; z-index:2}
.geo-banner-inner{text-align:center; max-width:960px; margin:0 auto}
.geo-badge{
display:inline-flex;
align-items:center;
gap:10px;
font-size:12px;
font-weight:600;
letter-spacing:2px;
color:#00d4ff;
background:rgba(0, 212, 255, 0.1);
border:1px solid rgba(0, 212, 255, 0.3);
padding:7px 20px;
border-radius:100px;
margin-bottom:22px;
}
.geo-dot{
width:8px; height:8px;
border-radius:50%;
background:#00d4ff;
box-shadow:0 0 0 4px rgba(0, 212, 255, 0.25);
animation:geo-pulse 2s ease-in-out infinite;
}
@keyframes geo-pulse{
0%, 100%{transform:scale(1)}
50%{transform:scale(1.3)}
}
.geo-banner-title{
font-size:clamp(30px, 4.5vw, 58px);
font-weight:800;
margin:0 0 18px;
line-height:1.2;
}
.geo-banner-title span{
background:linear-gradient(135deg, #00d4ff, var(--primary), #9effd0);
-webkit-background-clip:text;
background-clip:text;
color:transparent;
}
.geo-banner-sub{
font-size:clamp(14px, 1.5vw, 17px);
color:rgba(255, 255, 255, 0.7);
line-height:1.8;
max-width:700px;
margin:0 auto 28px;
}
.geo-chat{
max-width:640px;
margin:0 auto 32px;
text-align:left;
}
.geo-chat-q, .geo-chat-a{
display:flex;
gap:12px;
margin-bottom:14px;
}
.geo-chat-a{justify-content:flex-start}
.geo-chat-q{justify-content:flex-end}
.geo-chat-avatar{
width:36px; height:36px;
border-radius:50%;
flex-shrink:0;
display:flex; align-items:center; justify-content:center;
font-weight:800;
font-size:12px;
}
.q-avatar{
background:linear-gradient(135deg, #667eea, #764ba2);
color:#fff;
}
.a-avatar{
background:linear-gradient(135deg, var(--primary), #00d4ff);
color:#fff;
}
.geo-chat-bubble{
max-width:calc(100% - 52px);
padding:14px 18px;
border-radius:16px;
font-size:14px;
line-height:1.7;
}
.q-bubble{
background:rgba(102, 126, 234, 0.15);
color:#fff;
border:1px solid rgba(102, 126, 234, 0.25);
border-top-right-radius:4px;
}
.a-bubble{
background:rgba(255, 255, 255, 0.06);
border:1px solid rgba(0, 212, 255, 0.25);
border-top-left-radius:4px;
color:rgba(255, 255, 255, 0.9);
backdrop-filter:blur(10px);
}
.a-bubble p{margin:0 0 8px}
.a-bubble ul{margin:0 0 10px; padding-left:18px}
.a-bubble ul li{margin-bottom:3px; font-size:13px}
.geo-highlight{
background:linear-gradient(135deg, var(--primary), #00d4ff);
-webkit-background-clip:text;
background-clip:text;
color:transparent;
}
.geo-source{
font-size:11px;
color:rgba(0, 212, 255, 0.7);
margin-top:8px;
padding-top:8px;
border-top:1px dashed rgba(0, 212, 255, 0.2);
}
.geo-banner-btns{
display:flex;
gap:14px;
justify-content:center;
flex-wrap:wrap;
}
.btn-outline-white{
background:transparent;
color:#fff;
border:2px solid rgba(255, 255, 255, 0.5);
}
.btn-outline-white:hover{
background:rgba(255, 255, 255, 0.1);
border-color:#fff;
}
.btn-primary-lg{
padding:16px 36px;
font-size:16px;
font-weight:600;
border-radius:12px;
background:linear-gradient(135deg, var(--primary), #00b45a);
color:#fff;
border:none;
box-shadow:0 8px 28px rgba(0, 180, 90, 0.4);
transition:all 0.3s;
}
.btn-primary-lg:hover{
transform:translateY(-2px);
box-shadow:0 12px 36px rgba(0, 180, 90, 0.55);
}
.geo-banner-crumb{
position:relative;
z-index:2;
margin-top:clamp(30px, 4vw, 50px);
padding-top:20px;
border-top:1px solid rgba(255, 255, 255, 0.08);
font-size:13px;
}
.geo-banner-crumb .container{display:flex; justify-content:center; gap:8px}
.geo-banner-crumb a{color:rgba(255, 255, 255, 0.8); text-decoration:none}
.geo-banner-crumb span{color:rgba(255, 255, 255, 0.4)}
.geo-intro{
padding:clamp(60px, 8vw, 120px) 0;
background:#fff;
}
.geo-intro-wrap{
display:grid;
grid-template-columns:1.2fr 0.8fr;
gap:clamp(30px, 4vw, 60px);
align-items:center;
}
.geo-intro-desc{
font-size:15px;
color:var(--gray-500);
line-height:1.8;
margin:0 0 24px;
}
.geo-intro-desc strong{color:var(--primary)}
.geo-compare{
display:grid;
grid-template-columns:1fr auto 1fr;
gap:16px;
align-items:stretch;
}
.geo-compare-item{
border-radius:16px;
padding:18px 20px;
transition:all 0.3s;
}
.geo-vs-old{
background:var(--gray-50);
border:1px solid var(--gray-200);
}
.geo-vs-new{
background:linear-gradient(135deg, rgba(0, 120, 50, 0.06), rgba(0, 212, 255, 0.06));
border:1px solid rgba(0, 120, 50, 0.25);
}
.geo-compare-head{
display:flex;
justify-content:space-between;
align-items:center;
margin-bottom:10px;
}
.geo-compare-label{
font-size:15px;
font-weight:700;
color:var(--dark);
}
.geo-compare-icon{
font-size:14px;
width:24px; height:24px;
display:flex; align-items:center; justify-content:center;
border-radius:6px;
}
.geo-compare-icon.old{background:rgba(239, 68, 68, 0.1); color:#ef4444}
.geo-compare-icon.new{background:rgba(0, 120, 50, 0.1); color:var(--primary)}
.geo-compare-body p{
font-size:13px;
color:var(--gray-500);
line-height:1.6;
margin:0 0 10px;
}
.geo-compare-flow{
font-size:12px;
color:var(--gray-400);
background:#fff;
padding:8px 10px;
border-radius:8px;
font-family:monospace;
}
.geo-compare-flow.flow-ai{
background:linear-gradient(135deg, rgba(0, 120, 50, 0.08), rgba(0, 212, 255, 0.08));
color:var(--primary);
}
.geo-compare-flow strong{color:var(--primary)}
.geo-compare-arrow{
display:flex;
align-items:center;
justify-content:center;
font-size:18px;
font-weight:800;
color:var(--gray-300);
}
.geo-intro-right{
display:flex;
flex-direction:column;
gap:16px;
}
.geo-stat-card{
display:flex;
gap:18px;
align-items:center;
padding:clamp(16px, 1.8vw, 22px);
border-radius:16px;
background:#fff;
border:1px solid var(--gray-200);
transition:all 0.3s;
}
.geo-stat-card:hover{
transform:translateX(8px);
box-shadow:0 12px 36px rgba(0, 60, 30, 0.08);
border-color:rgba(0, 120, 50, 0.2);
}
.geo-stat-num{
flex-shrink:0;
}
.geo-stat-num strong{
font-size:clamp(36px, 4vw, 48px);
font-weight:800;
line-height:1;
background:linear-gradient(135deg, var(--primary), #00d4ff);
-webkit-background-clip:text;
background-clip:text;
color:transparent;
}
.geo-stat-num span{
font-size:16px;
font-weight:700;
color:var(--primary);
}
.geo-stat-info h5{
font-size:15px;
font-weight:700;
color:var(--dark);
margin:0 0 4px;
}
.geo-stat-info p{
font-size:13px;
color:var(--gray-500);
margin:0;
line-height:1.6;
}
.geo-platforms{
padding:clamp(60px, 8vw, 120px) 0;
background:linear-gradient(180deg, #fff 0%, #f7faf8 100%);
}
.geo-platforms-grid{
display:grid;
grid-template-columns:repeat(4, 1fr);
gap:clamp(14px, 1.5vw, 20px);
}
.geo-platform-card{
background:#fff;
border:1px solid var(--gray-200);
border-radius:16px;
padding:clamp(18px, 2vw, 24px);
text-align:center;
transition:all 0.4s;
position:relative;
overflow:hidden;
}
.geo-platform-card::before{
content:'';
position:absolute;
top:0; left:0; right:0;
height:3px;
opacity:0;
transition:opacity 0.3s;
}
.geo-platform-card:hover{
transform:translateY(-6px);
box-shadow:0 20px 44px rgba(0, 60, 30, 0.1);
border-color:rgba(0, 120, 50, 0.2);
}
.geo-platform-card:hover::before{opacity:1}
.geo-plat-doubao::before, .geo-plat-doubao:hover{box-shadow:0 20px 44px rgba(255, 107, 53, 0.15); border-color:rgba(255, 107, 53, 0.3)}
.geo-plat-doubao::before{background:#ff6b35}
.geo-plat-kimi::before, .geo-plat-kimi:hover{box-shadow:0 20px 44px rgba(111, 111, 255, 0.15); border-color:rgba(111, 111, 255, 0.3)}
.geo-plat-kimi::before{background:#6f6fff}
.geo-plat-wenxin::before, .geo-plat-wenxin:hover{box-shadow:0 20px 44px rgba(47, 109, 246, 0.15); border-color:rgba(47, 109, 246, 0.3)}
.geo-plat-wenxin::before{background:#2f6df6}
.geo-plat-perplexity::before, .geo-plat-perplexity:hover{box-shadow:0 20px 44px rgba(47, 63, 244, 0.15); border-color:rgba(47, 63, 244, 0.3)}
.geo-plat-perplexity::before{background:#2f3ff4}
.geo-plat-chatgpt::before, .geo-plat-chatgpt:hover{box-shadow:0 20px 44px rgba(16, 163, 127, 0.15); border-color:rgba(16, 163, 127, 0.3)}
.geo-plat-chatgpt::before{background:#10a37f}
.geo-plat-claude::before, .geo-plat-claude:hover{box-shadow:0 20px 44px rgba(250, 80, 60, 0.15); border-color:rgba(250, 80, 60, 0.3)}
.geo-plat-claude::before{background:#fa503c}
.geo-plat-qianwen::before, .geo-plat-qianwen:hover{box-shadow:0 20px 44px rgba(26, 127, 239, 0.15); border-color:rgba(26, 127, 239, 0.3)}
.geo-plat-qianwen::before{background:#1a7fef}
.geo-plat-gemini::before, .geo-plat-gemini:hover{box-shadow:0 20px 44px rgba(66, 133, 244, 0.15); border-color:rgba(66, 133, 244, 0.3)}
.geo-plat-gemini::before{background:#4285f4}
.geo-plat-logo{
width:56px; height:56px;
border-radius:14px;
background:linear-gradient(135deg, rgba(0, 120, 50, 0.08), rgba(0, 212, 255, 0.08));
display:flex; align-items:center; justify-content:center;
margin:0 auto 14px;
font-size:28px;
}
.geo-platform-card h4{
font-size:16px;
font-weight:700;
color:var(--dark);
margin:0 0 6px;
}
.geo-platform-card p{
font-size:12px;
color:var(--gray-500);
margin:0 0 16px;
line-height:1.5;
}
.geo-plat-bar{
display:flex;
align-items:center;
gap:8px;
font-size:11px;
color:var(--gray-400);
}
.geo-plat-bar > span:first-child{flex-shrink:0}
.geo-plat-progress{
flex:1;
height:6px;
background:var(--gray-100);
border-radius:100px;
overflow:hidden;
}
.geo-plat-fill{
height:100%;
background:linear-gradient(90deg, var(--primary), #00d4ff);
border-radius:100px;
transition:width 1s ease;
}
.geo-plat-bar em{
font-style:normal;
font-size:13px;
font-weight:700;
color:var(--primary);
}
.geo-contents{
padding:clamp(60px, 8vw, 120px) 0;
}
.geo-contents-grid{
display:flex;
flex-direction:column;
gap:clamp(24px, 2.5vw, 32px);
}
.geo-content-card{
display:grid;
grid-template-columns:1fr 1fr;
gap:clamp(24px, 3vw, 40px);
background:#fff;
border-radius:20px;
border:1px solid var(--gray-200);
overflow:hidden;
transition:all 0.4s;
}
.geo-content-card:nth-child(2){direction:rtl}
.geo-content-card:nth-child(2) > *{direction:ltr}
.geo-content-card:hover{
box-shadow:0 20px 50px rgba(0, 60, 30, 0.1);
border-color:rgba(0, 120, 50, 0.2);
transform:translateY(-4px);
}
.geo-content-visual{
position:relative;
min-height:320px;
padding:clamp(20px, 2.5vw, 30px);
display:flex;
align-items:center;
justify-content:center;
}
.geo-vis-text{background:linear-gradient(135deg, #0a1a12, #002619)}
.geo-vis-video{background:linear-gradient(135deg, #1a0a12, #260019)}
.geo-vis-tool{background:linear-gradient(135deg, #0a0e1a, #0f1a3a)}
.geo-vis-label{
position:absolute;
bottom:16px;
left:20px;
color:rgba(255, 255, 255, 0.6);
font-size:11px;
letter-spacing:1px;
border-left:2px solid #00d4ff;
padding-left:10px;
}
.geo-vis-code{
background:rgba(255, 255, 255, 0.05);
border:1px solid rgba(0, 212, 255, 0.2);
border-radius:12px;
padding:20px;
font-family:'Courier New', monospace;
font-size:13px;
line-height:1.8;
width:100%;
max-width:360px;
color:rgba(255, 255, 255, 0.9);
position:relative;
}
.geo-c-v{color:#666}
.geo-c-k{color:#c792ea}
.geo-c-f{color:#82aaff}
.geo-c-s{color:#c3e88d}
.geo-vis-video-frame{
width:180px;
height:240px;
background:linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.02));
border-radius:16px;
border:1px solid rgba(255, 255, 255, 0.15);
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
gap:20px;
position:relative;
}
.geo-vis-play{
width:60px; height:60px;
border-radius:50%;
background:linear-gradient(135deg, var(--primary), #00d4ff);
color:#fff;
display:flex; align-items:center; justify-content:center;
font-size:20px;
box-shadow:0 0 30px rgba(0, 212, 255, 0.4);
cursor:pointer;
animation:geo-pulse-glow 2s ease-in-out infinite;
}
@keyframes geo-pulse-glow{
0%, 100%{box-shadow:0 0 20px rgba(0, 212, 255, 0.4)}
50%{box-shadow:0 0 40px rgba(0, 212, 255, 0.7)}
}
.geo-vis-bars{
display:flex;
gap:4px;
height:40px;
align-items:flex-end;
}
.geo-vis-bars span{
width:6px;
background:linear-gradient(to top, var(--primary), #00d4ff);
border-radius:3px;
animation:geo-eq 1s ease-in-out infinite alternate;
}
.geo-vis-bars span:nth-child(1){animation-delay:0s; height:30%}
.geo-vis-bars span:nth-child(2){animation-delay:0.1s; height:60%}
.geo-vis-bars span:nth-child(3){animation-delay:0.2s; height:45%}
.geo-vis-bars span:nth-child(4){animation-delay:0.3s; height:80%}
.geo-vis-bars span:nth-child(5){animation-delay:0.4s; height:55%}
@keyframes geo-eq{
from{transform:scaleY(0.3)}
to{transform:scaleY(1)}
}
.geo-vis-tool-ui{
width:100%;
max-width:340px;
background:rgba(255, 255, 255, 0.05);
border:1px solid rgba(0, 212, 255, 0.2);
border-radius:16px;
overflow:hidden;
}
.geo-tool-tabs{
display:flex;
background:rgba(255, 255, 255, 0.03);
border-bottom:1px solid rgba(255, 255, 255, 0.08);
}
.geo-tool-tab{
flex:1;
text-align:center;
padding:10px;
font-size:12px;
color:rgba(255, 255, 255, 0.5);
font-weight:600;
}
.geo-tool-tab.active{
color:#00d4ff;
background:rgba(0, 212, 255, 0.08);
border-bottom:2px solid #00d4ff;
}
.geo-tool-body{
padding:14px 16px;
font-size:13px;
line-height:1.8;
}
.geo-tool-q{color:rgba(255, 255, 255, 0.6); margin-bottom:8px}
.geo-tool-a{color:#fff}
.geo-tool-a strong{color:#00d4ff}
.geo-content-info{
padding:clamp(20px, 2.5vw, 30px);
display:flex;
flex-direction:column;
justify-content:center;
}
.geo-content-info h4{
font-size:clamp(18px, 2vw, 22px);
font-weight:700;
color:var(--dark);
margin:0 0 10px;
}
.geo-content-info > p{
font-size:14px;
color:var(--gray-500);
line-height:1.8;
margin:0 0 16px;
}
.geo-content-info ul{
list-style:none;
padding:0;
margin:0 0 18px;
display:flex;
flex-direction:column;
gap:6px;
}
.geo-content-info ul li{
font-size:13px;
color:var(--gray-500);
}
.geo-content-cta{
font-size:13px;
font-weight:600;
color:var(--primary);
text-decoration:none;
padding:10px 18px;
background:rgba(0, 120, 50, 0.08);
border-radius:100px;
display:inline-block;
transition:all 0.2s;
align-self:flex-start;
}
.geo-content-cta:hover{background:var(--primary); color:#fff}
.geo-channels{
padding:clamp(60px, 8vw, 120px) 0;
background:#fff;
}
.geo-channels-grid{
display:grid;
grid-template-columns:repeat(3, 1fr);
gap:clamp(18px, 2vw, 28px);
}
.geo-channel-card{
background:#fff;
border:1px solid var(--gray-200);
border-radius:20px;
padding:clamp(22px, 2.5vw, 30px);
transition:all 0.4s;
display:flex;
flex-direction:column;
}
.geo-channel-card:hover{
transform:translateY(-8px);
box-shadow:0 24px 50px rgba(0, 60, 30, 0.12);
}
.geo-ch-douyin:hover{box-shadow:0 24px 50px rgba(255, 35, 35, 0.15); border-color:rgba(255, 35, 35, 0.3)}
.geo-ch-kuaishou:hover{box-shadow:0 24px 50px rgba(255, 193, 7, 0.2); border-color:rgba(255, 193, 7, 0.35)}
.geo-ch-wechat:hover{box-shadow:0 24px 50px rgba(7, 193, 96, 0.15); border-color:rgba(7, 193, 96, 0.3)}
.geo-ch-logo{
display:flex;
align-items:center;
gap:10px;
margin-bottom:16px;
}
.geo-ch-icon{
font-size:30px;
}
.geo-ch-name{
font-size:20px;
font-weight:800;
color:var(--dark);
}
.geo-ch-stats{
display:flex;
gap:12px;
margin-bottom:18px;
}
.geo-ch-stat{
flex:1;
background:var(--gray-50);
border-radius:12px;
padding:12px;
text-align:center;
}
.geo-ch-stat strong{
font-size:20px;
font-weight:800;
color:var(--dark);
display:block;
line-height:1;
}
.geo-ch-stat strong span{
font-size:13px;
color:var(--primary);
}
.geo-ch-stat p{
font-size:11px;
color:var(--gray-500);
margin:4px 0 0;
}
.geo-ch-services{
list-style:none;
padding:0;
margin:0 0 18px;
flex:1;
display:flex;
flex-direction:column;
gap:8px;
}
.geo-ch-services li{
font-size:13px;
color:var(--gray-500);
padding-left:18px;
position:relative;
}
.geo-ch-services li::before{
content:'›';
position:absolute;
left:0;
color:var(--primary);
font-weight:700;
}
.geo-ch-foot{
padding-top:14px;
border-top:1px dashed var(--gray-200);
text-align:right;
}
.geo-ch-foot em{
font-style:normal;
font-size:22px;
font-weight:800;
color:var(--primary);
}
.geo-ch-foot span{
font-size:12px;
color:var(--gray-400);
margin-left:4px;
}
.geo-process{
padding:clamp(60px, 8vw, 120px) 0;
}
.geo-process-grid{
display:grid;
grid-template-columns:repeat(5, 1fr);
gap:0;
align-items:flex-start;
}
.geo-process-item{
text-align:center;
position:relative;
padding:0 16px;
}
.geo-process-visual{
position:relative;
display:flex;
flex-direction:column;
align-items:center;
}
.geo-pro-circle{
width:58px; height:58px;
border-radius:50%;
font-size:24px;
font-weight:800;
display:flex; align-items:center; justify-content:center;
margin:0 auto 18px;
position:relative;
z-index:2;
}
.geo-pro-1{background:linear-gradient(135deg, var(--primary), #00d4ff); color:#fff; box-shadow:0 8px 24px rgba(0, 180, 90, 0.4)}
.geo-pro-2{background:linear-gradient(135deg, #667eea, #764ba2); color:#fff; box-shadow:0 8px 24px rgba(102, 126, 234, 0.4)}
.geo-pro-3{background:linear-gradient(135deg, #f59e0b, #fbbf24); color:#fff; box-shadow:0 8px 24px rgba(245, 158, 11, 0.4)}
.geo-pro-4{background:linear-gradient(135deg, #ec4899, #f472b6); color:#fff; box-shadow:0 8px 24px rgba(236, 72, 153, 0.4)}
.geo-pro-5{background:linear-gradient(135deg, #06b6d4, #22d3ee); color:#fff; box-shadow:0 8px 24px rgba(6, 182, 212, 0.4)}
.geo-pro-line{
position:absolute;
top:28px;
left:calc(50% + 30px);
width:calc(100% - 60px);
height:2px;
background:linear-gradient(90deg, rgba(0, 212, 255, 0.5), rgba(102, 126, 234, 0.5), rgba(245, 158, 11, 0.5), rgba(236, 72, 153, 0.5), transparent);
z-index:1;
}
.geo-pro-content h5{
font-size:16px;
font-weight:700;
color:#fff;
margin:0 0 8px;
}
.geo-pro-content p{
font-size:12px;
color:rgba(255, 255, 255, 0.6);
margin:0;
line-height:1.6;
}
.geo-cases{
padding:clamp(60px, 8vw, 120px) 0;
}
.geo-cases-grid{
display:grid;
grid-template-columns:repeat(3, 1fr);
gap:clamp(16px, 1.8vw, 24px);
}
.geo-case-card{
background:#fff;
border-radius:16px;
overflow:hidden;
text-decoration:none;
transition:all 0.4s;
border:1px solid var(--gray-200);
color:inherit;
}
.geo-case-card:hover{
transform:translateY(-6px);
box-shadow:0 20px 44px rgba(0, 60, 30, 0.12);
}
.geo-case-img{
position:relative;
padding-top:60%;
background-size:cover;
background-position:center;
background-color:#e8f2ec;
}
.geo-case-overlay{
position:absolute;
inset:0;
background:linear-gradient(180deg, transparent 40%, rgba(0, 0, 0, 0.6) 100%);
display:flex;
align-items:flex-end;
padding:14px;
}
.geo-case-badge{
background:linear-gradient(135deg, var(--primary), #00d4ff);
color:#fff;
font-size:11px;
font-weight:700;
padding:5px 12px;
border-radius:100px;
letter-spacing:0.5px;
}
.geo-case-body{
padding:clamp(16px, 1.8vw, 22px);
}
.geo-case-body h4{
font-size:17px;
font-weight:700;
color:var(--dark);
margin:0 0 8px;
line-height:1.4;
}
.geo-case-body p{
font-size:13px;
color:var(--gray-500);
margin:0 0 12px;
line-height:1.7;
display:-webkit-box;
-webkit-line-clamp:2;
-webkit-box-orient:vertical;
overflow:hidden;
}
.geo-case-metrics{
display:flex;
gap:10px;
flex-wrap:wrap;
}
.geo-case-metrics span{
font-size:11px;
color:var(--primary);
background:rgba(0, 120, 50, 0.08);
padding:4px 10px;
border-radius:6px;
}
.geo-case-empty{
grid-column:1 / -1;
text-align:center;
padding:40px;
color:var(--gray-400);
font-size:14px;
}
.geo-why{
padding:clamp(60px, 8vw, 120px) 0;
}
.geo-why-grid{
display:grid;
grid-template-columns:repeat(5, 1fr);
gap:clamp(14px, 1.5vw, 20px);
}
.geo-why-card{
background:#fff;
border:1px solid var(--gray-200);
border-radius:16px;
padding:clamp(18px, 2vw, 26px) 16px;
transition:all 0.3s;
text-align:center;
}
.geo-why-card:hover{
transform:translateY(-6px);
box-shadow:0 18px 40px rgba(0, 60, 30, 0.1);
border-color:rgba(0, 120, 50, 0.2);
}
.geo-why-num{
font-size:36px;
font-weight:800;
background:linear-gradient(135deg, var(--primary), #00d4ff);
-webkit-background-clip:text;
background-clip:text;
color:transparent;
line-height:1;
margin-bottom:12px;
}
.geo-why-card h4{
font-size:15px;
font-weight:700;
color:var(--dark);
margin:0 0 8px;
}
.geo-why-card p{
font-size:12px;
color:var(--gray-500);
margin:0;
line-height:1.7;
}
.geo-faq{
padding:clamp(60px, 8vw, 120px) 0;
}
.geo-faq-list{
max-width:820px;
margin:0 auto;
display:flex;
flex-direction:column;
gap:12px;
}
.geo-faq-item{
background:#fff;
border-radius:14px;
border:1px solid var(--gray-200);
overflow:hidden;
transition:all 0.3s;
}
.geo-faq-item[open]{
border-color:rgba(0, 120, 50, 0.25);
box-shadow:0 10px 30px rgba(0, 60, 30, 0.06);
}
.geo-faq-item summary{
list-style:none;
padding:18px 22px;
font-size:15px;
font-weight:600;
color:var(--dark);
cursor:pointer;
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
user-select:none;
}
.geo-faq-item summary::-webkit-details-marker{display:none}
.geo-faq-item summary::after{
content:'+';
font-size:24px;
font-weight:700;
color:var(--primary);
flex-shrink:0;
}
.geo-faq-item[open] summary::after{content:'−'}
.geo-faq-item p{
padding:0 22px 20px;
margin:0;
font-size:14px;
color:var(--gray-500);
line-height:1.9;
}
.geo-cta{
padding:clamp(60px, 8vw, 100px) 0;
position:relative;
background:#050a07;
overflow:hidden;
}
.geo-cta-bg{
position:absolute;
inset:0;
background:
radial-gradient(circle at 30% 50%, rgba(0, 180, 90, 0.25) 0%, transparent 50%), 
radial-gradient(circle at 70% 50%, rgba(0, 212, 255, 0.2) 0%, transparent 50%);
}
.geo-cta-inner{
position:relative;
z-index:2;
text-align:center;
max-width:720px;
margin:0 auto;
color:#fff;
}
.geo-cta h2{
font-size:clamp(28px, 3.8vw, 44px);
font-weight:800;
margin:0 0 14px;
line-height:1.3;
}
.geo-cta h2 span{
background:linear-gradient(135deg, #00d4ff, var(--primary));
-webkit-background-clip:text;
background-clip:text;
color:transparent;
}
.geo-cta p{
font-size:15px;
color:rgba(255, 255, 255, 0.7);
margin:0 0 28px;
line-height:1.8;
}
.geo-cta-btns{
display:flex;
gap:14px;
justify-content:center;
flex-wrap:wrap;
margin-bottom:24px;
}
.geo-cta-trust{
display:flex;
gap:24px;
justify-content:center;
flex-wrap:wrap;
font-size:12px;
color:rgba(255, 255, 255, 0.6);
}
@media (max-width:1024px){
.geo-intro-wrap{grid-template-columns:1fr; gap:36px}
.geo-platforms-grid{grid-template-columns:repeat(3, 1fr)}
.geo-why-grid{grid-template-columns:repeat(3, 1fr)}
.geo-channels-grid{grid-template-columns:repeat(3, 1fr); gap:16px}
.geo-cases-grid{grid-template-columns:repeat(2, 1fr)}
.geo-compare{grid-template-columns:1fr}
.geo-compare-arrow{display:none}
.geo-content-card{grid-template-columns:1fr}
.geo-content-card:nth-child(2){direction:ltr}
.geo-process-grid{grid-template-columns:repeat(3, 1fr); gap:30px 20px}
.geo-pro-line{display:none}
}
@media (max-width:768px){
.geo-platforms-grid{grid-template-columns:repeat(2, 1fr)}
.geo-why-grid{grid-template-columns:repeat(2, 1fr)}
.geo-channels-grid{grid-template-columns:1fr}
.geo-cases-grid{grid-template-columns:1fr}
.geo-process-grid{grid-template-columns:repeat(2, 1fr)}
.geo-platforms, .geo-intro, .geo-contents, .geo-channels, 
.geo-process, .geo-cases, .geo-why, .geo-faq{
padding:60px 0;
}
.geo-banner-title{font-size:32px}
.geo-chat{display:none}
.geo-compare{grid-template-columns:1fr}
.geo-compare-item{padding:16px}
.geo-stat-card{padding:16px}
.geo-stat-num strong{font-size:34px}
.geo-why-grid{grid-template-columns:repeat(2, 1fr)}
}
@media (max-width:480px){
.geo-platforms-grid{grid-template-columns:1fr}
.geo-why-grid{grid-template-columns:1fr}
.geo-process-grid{grid-template-columns:1fr}
.geo-compare-item{padding:14px}
.geo-content-visual{min-height:240px}
.geo-vis-code{font-size:11px; padding:14px}
.geo-tool-tabs span{font-size:11px; padding:8px 6px}
.geo-faq-item summary{font-size:14px; padding:14px 16px}
.geo-faq-item p{padding:0 16px 16px; font-size:13px}
}
.mk-banner{
position:relative;
min-height:420px;
background:#0a2a18;
overflow:hidden;
}
.mk-banner .page-banner-bg{
position:absolute;
inset:0;
background-size:cover;
background-position:center;
opacity:0.6;
}
.mk-banner .page-banner-mask{
position:absolute;
inset:0;
background:linear-gradient(135deg, rgba(0, 60, 30, 0.85) 0%, rgba(0, 120, 50, 0.65) 50%, rgba(0, 60, 30, 0.8) 100%);
}
.mk-banner .page-banner-content{
position:relative;
z-index:2;
padding:clamp(60px, 8vw, 120px) 24px clamp(40px, 5vw, 80px);
text-align:center;
color:#fff;
}
.mk-banner-tag{
display:inline-block;
font-size:12px;
letter-spacing:4px;
padding:6px 20px;
border:1px solid rgba(255, 255, 255, 0.4);
border-radius:24px;
margin-bottom:clamp(16px, 2vw, 24px);
color:rgba(255, 255, 255, 0.9);
}
.mk-banner h1{
font-size:clamp(28px, 4.5vw, 56px);
font-weight:800;
margin-bottom:clamp(12px, 1.5vw, 20px);
letter-spacing:2px;
}
.mk-banner p{
font-size:clamp(14px, 1.3vw, 18px);
color:rgba(255, 255, 255, 0.85);
margin-bottom:clamp(20px, 2.5vw, 32px);
}
.mk-banner .breadcrumb{
font-size:13px;
color:rgba(255, 255, 255, 0.7);
}
.mk-banner .breadcrumb a{
color:rgba(255, 255, 255, 0.85);
text-decoration:none;
}
.mk-banner .breadcrumb a:hover{color:#fff}
.mk-banner .breadcrumb span{margin:0 6px}
.mk-intro{
padding:clamp(40px, 5vw, 72px) 0;
background:#fff;
}
.mk-intro-inner{
max-width:900px;
margin:0 auto;
text-align:center;
}
.mk-intro-text{
font-size:clamp(15px, 1.2vw, 18px);
line-height:2;
color:#444;
}
.mk-intro-text strong{
color:var(--primary);
font-weight:600;
}
.mk-section{
padding:clamp(56px, 6vw, 100px) 0;
}
.mk-section .section-header{
margin-bottom:clamp(36px, 4.5vw, 64px);
}
.mk-logo{background:linear-gradient(180deg, #f9fbf9 0%, #fff 100%)}
.mk-logo-grid{
display:grid;
grid-template-columns:repeat(4, 1fr);
gap:clamp(16px, 2vw, 28px);
}
.mk-logo-card{
background:#fff;
border-radius:16px;
border:1px solid #eef1ee;
overflow:hidden;
transition:all 0.4s ease;
}
.mk-logo-card:hover{
transform:translateY(-6px);
box-shadow:0 20px 40px rgba(0, 120, 50, 0.12);
border-color:var(--primary);
}
.mk-logo-visual{
height:200px;
display:flex;
align-items:center;
justify-content:center;
background:linear-gradient(135deg, #f0f9f3 0%, #e6f7ee 100%);
}
.mk-logo-preview{
display:flex;
flex-direction:column;
align-items:center;
gap:10px;
}
.mk-logo-letter{
font-size:56px;
font-weight:900;
color:var(--primary);
line-height:1;
}
.mk-logo-letter-gradient{
background:linear-gradient(135deg, #00963C 0%, #33B565 50%, #00C853 100%);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
background-clip:text;
}
.mk-logo-letter-square{
display:inline-flex;
align-items:center;
justify-content:center;
width:72px;
height:72px;
background:var(--primary);
color:#fff;
font-size:36px;
border-radius:8px;
}
.mk-logo-sub{
font-size:13px;
color:#888;
letter-spacing:2px;
}
.mk-logo-info{
padding:20px;
text-align:center;
}
.mk-logo-info h4{
font-size:17px;
font-weight:600;
margin-bottom:8px;
color:#222;
}
.mk-logo-info p{
font-size:13px;
color:#777;
line-height:1.7;
}
.mk-brand{
background:var(--primary-lighter);
position:relative;
overflow:hidden;
}
.mk-brand::before{
content:'';
position:absolute;
inset:0;
background-image:
linear-gradient(rgba(0, 120, 50, 0.05) 1px, transparent 1px), 
linear-gradient(90deg, rgba(0, 120, 50, 0.05) 1px, transparent 1px);
background-size:40px 40px;
pointer-events:none;
}
.mk-brand-grid{
position:relative;
display:grid;
grid-template-columns:repeat(4, 1fr);
gap:clamp(16px, 2vw, 24px);
padding:0 clamp(16px, 3vw, 48px);
}
.mk-brand-card{
position:relative;
height:320px;
border-radius:16px;
background-size:cover;
background-position:center;
overflow:hidden;
cursor:pointer;
transition:transform 0.4s ease;
}
.mk-brand-card:hover{transform:translateY(-6px)}
.mk-brand-mask{
position:absolute;
inset:0;
background:linear-gradient(180deg, rgba(0, 0, 0, 0.15) 0%, rgba(0, 60, 30, 0.85) 100%);
}
.mk-brand-content{
position:absolute;
bottom:0;
left:0;
right:0;
padding:28px 24px;
color:#fff;
}
.mk-brand-num{
font-size:48px;
font-weight:800;
color:rgba(255, 255, 255, 0.25);
line-height:1;
margin-bottom:8px;
font-family:Georgia, serif;
}
.mk-brand-content h4{
font-size:20px;
font-weight:700;
margin-bottom:8px;
}
.mk-brand-content p{
font-size:14px;
color:rgba(255, 255, 255, 0.85);
line-height:1.7;
}
.mk-color{background:#fff}
.mk-color-grid{
display:grid;
grid-template-columns:repeat(4, 1fr);
gap:clamp(16px, 2vw, 28px);
}
.mk-color-item{
text-align:center;
}
.mk-color-block{
width:100%;
height:clamp(100px, 12vw, 160px);
border-radius:16px;
margin-bottom:16px;
box-shadow:0 8px 24px rgba(0, 0, 0, 0.08);
transition:transform 0.3s ease;
}
.mk-color-item:hover .mk-color-block{
transform:scale(1.03);
}
.mk-color-hex{
display:block;
font-size:13px;
color:var(--primary);
font-weight:600;
letter-spacing:1px;
margin-bottom:6px;
}
.mk-color-info h4{
font-size:16px;
font-weight:600;
color:#222;
margin-bottom:6px;
}
.mk-color-info p{
font-size:13px;
color:#888;
line-height:1.6;
}
.mk-space{
background:#f5f7f5;
position:relative;
}
.mk-space-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:clamp(16px, 2vw, 24px);
padding:0 clamp(16px, 3vw, 48px);
}
.mk-space-item{
position:relative;
border-radius:20px;
background-size:cover;
background-position:center;
overflow:hidden;
min-height:280px;
cursor:pointer;
transition:transform 0.4s ease;
}
.mk-space-item:hover{transform:translateY(-6px)}
.mk-space-lg{min-height:clamp(300px, 32vw, 440px)}
.mk-space-sm{min-height:clamp(200px, 22vw, 300px)}
.mk-space-overlay{
position:absolute;
inset:0;
background:linear-gradient(180deg, rgba(0, 0, 0, 0.1) 0%, rgba(0, 60, 30, 0.88) 100%);
}
.mk-space-content{
position:absolute;
bottom:0;
left:0;
right:0;
padding:clamp(20px, 2.5vw, 32px);
color:#fff;
}
.mk-space-tag{
display:inline-block;
font-size:11px;
letter-spacing:2px;
padding:4px 14px;
border:1px solid rgba(255, 255, 255, 0.5);
border-radius:12px;
margin-bottom:12px;
}
.mk-space-content h3{
font-size:clamp(18px, 2vw, 26px);
font-weight:700;
margin-bottom:8px;
}
.mk-space-content p{
font-size:14px;
color:rgba(255, 255, 255, 0.85);
line-height:1.7;
}
.mk-plan{background:#fff}
.mk-plan-grid{
display:grid;
grid-template-columns:repeat(3, 1fr);
gap:clamp(16px, 2vw, 28px);
}
.mk-plan-card{
padding:clamp(28px, 3vw, 40px);
background:#fafcfb;
border-radius:16px;
border:1px solid #eef1ee;
text-align:center;
transition:all 0.35s ease;
}
.mk-plan-card:hover{
background:var(--primary-lighter);
border-color:var(--primary);
transform:translateY(-4px);
box-shadow:0 16px 32px rgba(0, 120, 50, 0.1);
}
.mk-plan-icon{
width:64px;
height:64px;
margin:0 auto 20px;
color:var(--primary);
}
.mk-plan-icon svg{width:100%; height:100%}
.mk-plan-card:hover .mk-plan-icon{color:var(--primary-dark)}
.mk-plan-card h4{
font-size:18px;
font-weight:600;
color:#222;
margin-bottom:10px;
}
.mk-plan-card p{
font-size:14px;
color:#777;
line-height:1.7;
}
.mk-effect{
background:linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
color:#fff;
}
.mk-effect .section-tag{
background:rgba(255, 255, 255, 0.2);
color:#fff;
}
.mk-effect .section-title{color:#fff}
.mk-effect .section-desc{color:rgba(255, 255, 255, 0.8)}
.mk-effect-grid{
display:grid;
grid-template-columns:repeat(4, 1fr);
gap:clamp(16px, 2vw, 28px);
}
.mk-effect-card{
text-align:center;
padding:clamp(20px, 2.5vw, 32px);
background:rgba(255, 255, 255, 0.08);
border-radius:16px;
border:1px solid rgba(255, 255, 255, 0.15);
backdrop-filter:blur(10px);
transition:all 0.3s ease;
}
.mk-effect-card:hover{
background:rgba(255, 255, 255, 0.15);
transform:translateY(-4px);
}
.mk-effect-num{
display:block;
font-size:clamp(32px, 4vw, 52px);
font-weight:800;
margin-bottom:8px;
letter-spacing:1px;
}
.mk-effect-unit{
font-size:0.5em;
font-weight:600;
margin-left:2px;
}
.mk-effect-card h4{
font-size:17px;
font-weight:600;
margin-bottom:6px;
}
.mk-effect-card p{
font-size:13px;
color:rgba(255, 255, 255, 0.8);
}
.mk-cta{
padding:clamp(56px, 6vw, 96px) 0;
background:#0a2a18;
text-align:center;
}
.mk-cta-inner{
max-width:720px;
margin:0 auto;
}
.mk-cta h2{
font-size:clamp(22px, 3vw, 36px);
font-weight:700;
color:#fff;
margin-bottom:16px;
}
.mk-cta p{
font-size:clamp(14px, 1.2vw, 16px);
color:rgba(255, 255, 255, 0.75);
margin-bottom:28px;
}
.mk-cta-btn{
display:inline-block;
padding:14px 42px;
background:var(--primary);
color:#fff;
font-size:15px;
font-weight:600;
border-radius:32px;
text-decoration:none;
transition:all 0.3s ease;
}
.mk-cta-btn:hover{
background:var(--primary-light);
transform:translateY(-2px);
box-shadow:0 12px 28px rgba(0, 150, 60, 0.4);
}
@media (max-width:1024px){
.mk-logo-grid{grid-template-columns:repeat(2, 1fr)}
.mk-brand-grid{grid-template-columns:repeat(2, 1fr)}
.mk-color-grid{grid-template-columns:repeat(2, 1fr)}
.mk-plan-grid{grid-template-columns:repeat(2, 1fr)}
.mk-effect-grid{grid-template-columns:repeat(2, 1fr)}
}
@media (max-width:640px){
.mk-brand-grid, 
.mk-logo-grid, 
.mk-color-grid, 
.mk-plan-grid, 
.mk-effect-grid{
grid-template-columns:1fr;
}
.mk-space-grid{grid-template-columns:1fr}
.mk-brand-card{height:260px}
.mk-logo-visual{height:160px}
}
.ct-banner{
position:relative;
min-height:380px;
background:#0a2a18;
overflow:hidden;
}
.ct-banner .page-banner-bg{
position:absolute;
inset:0;
background-size:cover;
background-position:center;
opacity:0.55;
}
.ct-banner .page-banner-mask{
position:absolute;
inset:0;
background:linear-gradient(135deg, rgba(0, 60, 30, 0.88) 0%, rgba(0, 120, 50, 0.6) 50%, rgba(0, 60, 30, 0.85) 100%);
}
.ct-banner .page-banner-content{
position:relative;
z-index:2;
padding:clamp(60px, 8vw, 120px) 24px clamp(40px, 5vw, 64px);
text-align:center;
color:#fff;
}
.ct-banner-tag{
display:inline-block;
font-size:12px;
letter-spacing:4px;
padding:6px 20px;
border:1px solid rgba(255, 255, 255, 0.4);
border-radius:24px;
margin-bottom:clamp(16px, 2vw, 24px);
color:rgba(255, 255, 255, 0.9);
}
.ct-banner h1{
font-size:clamp(28px, 4.5vw, 52px);
font-weight:800;
margin-bottom:clamp(12px, 1.5vw, 20px);
letter-spacing:2px;
}
.ct-banner p{
font-size:clamp(14px, 1.3vw, 18px);
color:rgba(255, 255, 255, 0.85);
margin-bottom:clamp(20px, 2.5vw, 32px);
}
.ct-banner .breadcrumb{
font-size:13px;
color:rgba(255, 255, 255, 0.7);
}
.ct-banner .breadcrumb a{
color:rgba(255, 255, 255, 0.85);
text-decoration:none;
}
.ct-banner .breadcrumb a:hover{color:#fff}
.ct-banner .breadcrumb span{margin:0 6px}
.ct-mainbiz{
padding:clamp(56px, 6vw, 96px) 0;
background:linear-gradient(180deg, #f9fbf9 0%, #fff 100%);
}
.ct-mainbiz .section-header{margin-bottom:clamp(36px, 4.5vw, 60px)}
.ct-biz-grid{
display:grid;
grid-template-columns:repeat(3, 1fr);
gap:clamp(16px, 2vw, 24px);
}
.ct-biz-card{
padding:clamp(24px, 3vw, 36px);
background:#fff;
border-radius:16px;
border:1px solid #eef1ee;
text-align:center;
transition:all 0.35s ease;
}
.ct-biz-card:hover{
background:var(--primary-lighter);
border-color:var(--primary);
transform:translateY(-4px);
box-shadow:0 16px 32px rgba(0, 120, 50, 0.1);
}
.ct-biz-icon{
width:60px;
height:60px;
margin:0 auto 18px;
color:var(--primary);
}
.ct-biz-icon svg{width:100%; height:100%}
.ct-biz-card h4{
font-size:17px;
font-weight:600;
color:#222;
margin-bottom:8px;
}
.ct-biz-card p{
font-size:13px;
color:#777;
line-height:1.7;
}
.ct-biz-card:hover .ct-biz-icon{color:var(--primary-dark)}
.ct-contact{
padding:clamp(56px, 6vw, 96px) 0;
background:#fff;
}
.ct-contact-grid{
display:grid;
grid-template-columns:1.1fr 1fr;
gap:clamp(28px, 5vw, 64px);
align-items:stretch;
}
.ct-contact-info{
padding:clamp(28px, 3.5vw, 48px);
background:var(--primary-lighter);
border-radius:20px;
display:flex;
flex-direction:column;
}
.ct-contact-title{
font-size:clamp(22px, 2.5vw, 32px);
font-weight:700;
color:#1a1a1a;
margin:12px 0 10px;
}
.ct-contact-desc{
font-size:14px;
color:#666;
line-height:1.8;
margin-bottom:clamp(20px, 2.5vw, 32px);
}
.ct-info-list{
list-style:none;
padding:0;
margin:0;
display:flex;
flex-direction:column;
gap:clamp(12px, 1.5vw, 18px);
}
.ct-info-item{
display:flex;
align-items:flex-start;
gap:14px;
padding:14px 16px;
background:#fff;
border-radius:12px;
transition:all 0.3s ease;
}
.ct-info-item:hover{
transform:translateX(4px);
box-shadow:0 8px 20px rgba(0, 120, 50, 0.1);
}
.ct-info-icon{
flex-shrink:0;
width:44px;
height:44px;
display:flex;
align-items:center;
justify-content:center;
border-radius:10px;
color:#fff;
}
.ct-info-icon svg{width:22px; height:22px}
.ct-icon-phone{background:linear-gradient(135deg, #00963C, #33B565)}
.ct-icon-email{background:linear-gradient(135deg, #007A30, #00963C)}
.ct-icon-web{background:linear-gradient(135deg, #005C24, #00963C)}
.ct-icon-wechat{background:linear-gradient(135deg, #07C160, #10AD53)}
.ct-icon-clock{background:linear-gradient(135deg, #33B565, #66CC8A)}
.ct-info-item h4{
font-size:13px;
color:#888;
font-weight:500;
margin-bottom:4px;
}
.ct-info-value{
font-size:16px;
font-weight:600;
color:#222;
margin:0;
}
.ct-info-value a{
color:var(--primary-dark);
text-decoration:none;
transition:color 0.2s ease;
}
.ct-info-value a:hover{color:var(--primary)}
.ct-map-wrap{
display:flex;
flex-direction:column;
}
.ct-map-header{
margin-bottom:16px;
}
.ct-map-header h3{
font-size:clamp(18px, 2vw, 24px);
font-weight:700;
color:#222;
margin:10px 0 0;
}
.ct-map{
flex:1;
min-height:460px;
border-radius:20px;
overflow:hidden;
border:1px solid #eef1ee;
background:#f0f9f3;
}
.ct-map iframe{
width:100%;
height:100%;
min-height:460px;
display:block;
}
.ct-process{
padding:clamp(56px, 6vw, 96px) 0;
background:linear-gradient(180deg, var(--primary-lighter) 0%, #fff 100%);
position:relative;
overflow:hidden;
}
.ct-process::before{
content:'';
position:absolute;
inset:0;
background-image:
linear-gradient(rgba(0, 120, 50, 0.04) 1px, transparent 1px), 
linear-gradient(90deg, rgba(0, 120, 50, 0.04) 1px, transparent 1px);
background-size:40px 40px;
pointer-events:none;
}
.ct-process .section-header{margin-bottom:clamp(40px, 5vw, 64px)}
.ct-process-flow{
position:relative;
display:flex;
align-items:flex-start;
justify-content:center;
gap:clamp(8px, 1vw, 16px);
flex-wrap:nowrap;
}
.ct-flow-item{
flex:1;
min-width:0;
text-align:center;
padding:clamp(16px, 2vw, 24px);
background:#fff;
border-radius:16px;
border:1px solid #eef1ee;
transition:all 0.35s ease;
}
.ct-flow-item:hover{
border-color:var(--primary);
transform:translateY(-4px);
box-shadow:0 12px 28px rgba(0, 120, 50, 0.12);
}
.ct-flow-num{
display:inline-flex;
align-items:center;
justify-content:center;
width:48px;
height:48px;
background:linear-gradient(135deg, var(--primary), var(--primary-light));
color:#fff;
font-size:18px;
font-weight:700;
border-radius:50%;
margin-bottom:14px;
box-shadow:0 6px 16px rgba(0, 150, 60, 0.3);
}
.ct-flow-body h4{
font-size:16px;
font-weight:600;
color:#222;
margin-bottom:6px;
}
.ct-flow-body p{
font-size:12px;
color:#888;
line-height:1.6;
}
.ct-flow-arrow{
flex-shrink:0;
align-self:center;
font-size:18px;
color:var(--primary);
font-weight:700;
padding-top:40px;
}
.ct-reviews{
padding:clamp(56px, 6vw, 96px) 0;
background:#fff;
}
.ct-reviews .section-header{margin-bottom:clamp(36px, 4.5vw, 60px)}
.ct-reviews-grid{
display:grid;
grid-template-columns:repeat(2, 1fr);
gap:clamp(16px, 2vw, 24px);
}
.ct-review-card{
padding:clamp(24px, 3vw, 36px);
background:#fafcfb;
border-radius:16px;
border:1px solid #eef1ee;
transition:all 0.35s ease;
}
.ct-review-card:hover{
transform:translateY(-4px);
box-shadow:0 16px 32px rgba(0, 120, 50, 0.1);
border-color:var(--primary);
}
.ct-review-stars{
color:#FFB800;
font-size:16px;
letter-spacing:2px;
margin-bottom:14px;
}
.ct-review-text{
font-size:14px;
color:#555;
line-height:1.9;
margin-bottom:20px;
font-style:italic;
position:relative;
padding-left:16px;
}
.ct-review-text::before{
content:'"';
position:absolute;
left:-4px;
top:-14px;
font-size:48px;
color:var(--primary-lighter);
font-style:normal;
line-height:1;
font-family:Georgia, serif;
}
.ct-review-author{
display:flex;
align-items:center;
gap:12px;
}
.ct-review-avatar{
display:inline-flex;
align-items:center;
justify-content:center;
width:42px;
height:42px;
background:linear-gradient(135deg, var(--primary), var(--primary-light));
color:#fff;
font-size:16px;
font-weight:600;
border-radius:50%;
flex-shrink:0;
}
.ct-review-author h5{
font-size:15px;
font-weight:600;
color:#222;
margin-bottom:2px;
}
.ct-review-author p{
font-size:12px;
color:#999;
margin:0;
}
.ct-form-section{
padding:clamp(56px, 6vw, 96px) 0;
background:linear-gradient(135deg, #0a2a18 0%, #004d20 100%);
}
.ct-form-wrap{
max-width:960px;
margin:0 auto;
padding:clamp(32px, 4.5vw, 56px);
background:#fff;
border-radius:20px;
box-shadow:0 24px 48px rgba(0, 0, 0, 0.2);
}
.ct-form-header{
text-align:center;
margin-bottom:clamp(20px, 2.5vw, 32px);
}
.ct-form-title{
font-size:clamp(20px, 2.5vw, 28px);
font-weight:700;
color:#1a1a1a;
margin:10px 0 8px;
}
.ct-form-desc{
font-size:14px;
color:#888;
}
.ct-form{display:flex; flex-direction:column; gap:16px}
.ct-form-row{
display:grid;
grid-template-columns:1fr 1fr;
gap:16px;
}
.ct-form-group{
display:flex;
flex-direction:column;
}
.ct-form-group label{
font-size:13px;
font-weight:500;
color:#333;
margin-bottom:8px;
}
.ct-required{
color:#e74c3c;
}
.ct-form-group input, 
.ct-form-group textarea{
padding:12px 16px;
border:1px solid #e1e4e1;
border-radius:10px;
font-size:14px;
color:#333;
background:#fafcfb;
transition:all 0.25s ease;
outline:none;
font-family:inherit;
}
.ct-form-group input:focus, 
.ct-form-group textarea:focus{
border-color:var(--primary);
background:#fff;
box-shadow:0 0 0 3px var(--primary-glow);
}
.ct-form-group textarea{
resize:vertical;
min-height:120px;
}
.ct-captcha-row{align-items:flex-end}
.ct-captcha-input-wrap{flex:1}
.ct-captcha-img-wrap{
height:44px;
border-radius:10px;
overflow:hidden;
border:1px solid #e1e4e1;
cursor:pointer;
background:#f5f5f5;
}
.ct-captcha-img{
height:100%;
width:auto;
display:block;
}
.ct-submit-btn{
padding:14px 32px;
background:linear-gradient(135deg, var(--primary), var(--primary-dark));
color:#fff;
font-size:16px;
font-weight:600;
border:none;
border-radius:32px;
cursor:pointer;
transition:all 0.3s ease;
align-self:center;
min-width:200px;
margin-top:4px;
}
.ct-submit-btn:hover{
background:linear-gradient(135deg, var(--primary-light), var(--primary));
transform:translateY(-2px);
box-shadow:0 12px 28px rgba(0, 150, 60, 0.4);
}
@media (max-width:1024px){
.ct-biz-grid{grid-template-columns:repeat(2, 1fr)}
.ct-contact-grid{grid-template-columns:1fr}
.ct-process-flow{flex-wrap:wrap}
.ct-flow-arrow{display:none}
.ct-flow-item{min-width:calc(50% - 8px)}
}
@media (max-width:640px){
.ct-biz-grid{grid-template-columns:1fr}
.ct-reviews-grid{grid-template-columns:1fr}
.ct-form-row{grid-template-columns:1fr}
.ct-flow-item{min-width:100%}
.ct-map{min-height:280px}
.ct-map iframe{min-height:280px}
.ct-banner{min-height:300px}
}
.nw-flip-grid{
display:grid;
grid-template-columns:repeat(2, 1fr);
gap:12px;
margin-bottom:16px;
}
.nw-flip-card{
perspective:1200px;
height:220px;
min-width:0;
}
.nw-flip-inner{
position:relative;
width:100%;
height:100%;
transform-style:preserve-3d;
transition:transform 0.7s cubic-bezier(0.4, 0.2, 0.2, 1);
}
.nw-flip-card:hover .nw-flip-inner{
transform:rotateY(180deg);
}
.nw-flip-face{
position:absolute;
inset:0;
-webkit-backface-visibility:hidden;
backface-visibility:hidden;
border-radius:16px;
overflow:hidden;
padding:clamp(20px, 2.2vw, 28px) clamp(18px, 2vw, 24px);
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
text-align:center;
border:1px solid #eef5ef;
box-shadow:0 4px 20px rgba(46, 125, 50, .06);
}
.nw-flip-front{
background:linear-gradient(160deg, #fff 0%, #f7faf7 100%);
}
.nw-flip-icon{
width:clamp(56px, 6vw, 72px);
height:clamp(56px, 6vw, 72px);
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
margin-bottom:clamp(12px, 1.5vw, 18px);
color:#2e7d32;
background:linear-gradient(135deg, rgba(46, 125, 50, .1), rgba(76, 175, 80, .05));
flex-shrink:0;
}
.nw-flip-origin{color:#1b5e20; background:linear-gradient(135deg, rgba(27, 94, 32, .1), rgba(46, 125, 50, .05))}
.nw-flip-clients{color:#00695c; background:linear-gradient(135deg, rgba(0, 105, 92, .1), rgba(76, 175, 80, .05))}
.nw-flip-culture{color:#2e7d32; background:linear-gradient(135deg, rgba(46, 125, 50, .12), rgba(129, 199, 132, .05))}
.nw-flip-vision{color:#2e7d32; background:linear-gradient(135deg, rgba(46, 125, 50, .1), rgba(165, 214, 167, .05))}
.nw-flip-en{
font-size:10px;
letter-spacing:4px;
color:#4caf50;
font-weight:600;
margin-bottom:4px;
}
.nw-flip-title{
font-size:clamp(18px, 2vw, 22px);
font-weight:800;
color:#1a1a1a;
margin:0 0 clamp(8px, 1vw, 12px);
letter-spacing:2px;
}
.nw-flip-desc{
font-size:clamp(13px, 1.3vw, 15px);
color:#666;
line-height:1.7;
margin:0;
}
.nw-flip-hint{
position:absolute;
bottom:12px;
font-size:11px;
color:#bbb;
letter-spacing:1px;
transition:opacity .3s;
}
.nw-flip-card:hover .nw-flip-hint{opacity:0}
.nw-flip-back{
transform:rotateY(180deg);
background:linear-gradient(160deg, #1b5e20 0%, #2e7d32 60%, #43a047 100%);
color:#fff;
align-items:flex-start;
text-align:left;
justify-content:flex-start;
padding-top:clamp(24px, 2.5vw, 32px);
border-color:transparent;
box-shadow:0 8px 28px rgba(27, 94, 32, .2);
}
.nw-flip-back::before{
content:"";
position:absolute;
top:-40%;
right:-40%;
width:160px;
height:160px;
background:rgba(255, 255, 255, .06);
border-radius:50%;
}
.nw-flip-back h4{
font-size:clamp(16px, 1.7vw, 18px);
font-weight:700;
color:#fff;
margin:0 0 clamp(10px, 1.2vw, 14px);
letter-spacing:1px;
position:relative;
padding-bottom:8px;
border-bottom:1px solid rgba(255, 255, 255, .25);
}
.nw-flip-back p{
font-size:clamp(12px, 1.2vw, 14px);
color:rgba(255, 255, 255, .92);
line-height:1.85;
margin:0 0 clamp(10px, 1.2vw, 14px);
position:relative;
flex:1;
}
.nw-flip-year{
display:inline-block;
font-size:clamp(20px, 2.5vw, 28px);
font-weight:800;
color:#fff;
letter-spacing:2px;
position:relative;
padding:4px 14px;
background:rgba(255, 255, 255, .15);
border-radius:8px;
align-self:flex-start;
backdrop-filter:blur(6px);
}
.nw-partners-section{
padding:clamp(48px, 5.5vw, 72px) 0;
background:linear-gradient(180deg, #f4f8f4 0%, #fff 100%);
border-top:1px solid #eef5ef;
}
.nw-partners-head{
text-align:center;
margin-bottom:clamp(28px, 3.5vw, 44px);
}
.nw-partners-head::after{
content:"";
display:block;
width:48px;
height:3px;
background:linear-gradient(90deg, #2e7d32, #4caf50);
margin:14px auto 0;
border-radius:2px;
}
.nw-partners-tag{
display:inline-block;
font-size:10px;
letter-spacing:5px;
color:#2e7d32;
background:rgba(46, 125, 50, .08);
padding:6px 18px;
border-radius:100px;
font-weight:600;
margin-bottom:12px;
}
.nw-partners-title{
font-size:clamp(24px, 2.6vw, 34px);
font-weight:800;
color:#1a1a1a;
letter-spacing:3px;
margin:0 0 10px;
}
.nw-partners-desc{
font-size:clamp(13px, 1.4vw, 15px);
color:#888;
margin:0;
}
.nw-partners-section .nw-clients{
border-top:none;
padding-top:0;
}
.nw-clients-row-lg .nw-cl-item{
width:clamp(180px, 20vw, 220px);
height:clamp(72px, 8vw, 90px);
border-radius:12px;
background:#fff;
border:1.5px solid #e8eee9;
transition:all .35s cubic-bezier(.25, .8, .25, 1);
}
.nw-clients-row-lg .nw-cl-item img{
width:clamp(156px, 17vw, 192px);
max-width:clamp(156px, 17vw, 192px);
height:clamp(52px, 6vw, 68px);
opacity:.92;
}
.nw-clients-row-lg .nw-cl-item:hover{
border-color:#2e7d32;
background:#fff;
transform:translateY(-4px);
box-shadow:0 14px 32px rgba(46, 125, 50, .15);
}
.nw-clients-row-lg .nw-cl-item:hover img{
opacity:1;
transform:scale(1.06);
}
.nw-clients-row-lg .nw-cl-fallback{
font-size:13px;
letter-spacing:3px;
}
.geo-faq-wrap{
display:grid;
grid-template-columns:minmax(0, 1fr) 360px;
gap:clamp(28px, 4vw, 48px);
align-items:start;
}
.geo-faq-col-list{min-width:0}
.geo-faq-col-list .geo-faq-list{
max-width:none;
margin:0;
}
.geo-faq-col-side{
display:flex;
flex-direction:column;
gap:20px;
position:sticky;
top:100px;
}
.geo-faq-side-card{
background:linear-gradient(160deg, #0a1a12 0%, #0d2018 50%, #051a10 100%);
border-radius:20px;
padding:32px 28px;
color:#fff;
position:relative;
overflow:hidden;
box-shadow:0 20px 50px rgba(6, 30, 16, .25);
}
.geo-faq-side-card::before{
content:"";
position:absolute;
top:-60px;
right:-60px;
width:200px;
height:200px;
background:radial-gradient(circle, rgba(0, 212, 255, .25), transparent 70%);
border-radius:50%;
}
.geo-faq-side-card::after{
content:"";
position:absolute;
bottom:-40px;
left:-40px;
width:160px;
height:160px;
background:radial-gradient(circle, rgba(0, 200, 100, .2), transparent 70%);
border-radius:50%;
}
.geo-faq-side-hero{
position:relative;
z-index:2;
text-align:center;
padding-bottom:20px;
border-bottom:1px solid rgba(255, 255, 255, .12);
}
.geo-faq-side-icon{
width:54px;
height:54px;
border-radius:14px;
background:linear-gradient(135deg, rgba(0, 200, 100, .3), rgba(0, 212, 255, .2));
display:flex;
align-items:center;
justify-content:center;
font-size:26px;
margin:0 auto 14px;
border:1px solid rgba(255, 255, 255, .15);
}
.geo-faq-side-hero h4{
font-size:18px;
font-weight:700;
margin:0 0 6px;
color:#fff;
}
.geo-faq-side-hero p{
font-size:13px;
color:rgba(255, 255, 255, .65);
margin:0;
}
.geo-faq-side-stats{
position:relative;
z-index:2;
display:flex;
gap:12px;
padding:20px 0;
border-bottom:1px solid rgba(255, 255, 255, .12);
}
.geo-faq-side-stat{
flex:1;
text-align:center;
}
.geo-faq-side-stat strong{
display:block;
font-size:20px;
font-weight:800;
background:linear-gradient(135deg, #00e28a, #00d4ff);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
background-clip:text;
line-height:1.2;
}
.geo-faq-side-stat span{
font-size:11px;
color:rgba(255, 255, 255, .55);
letter-spacing:.5px;
}
.geo-faq-side-channels{
position:relative;
z-index:2;
padding:16px 0;
border-bottom:1px solid rgba(255, 255, 255, .12);
}
.geo-faq-side-channels > span{
display:block;
font-size:11px;
color:rgba(255, 255, 255, .45);
letter-spacing:2px;
margin-bottom:10px;
}
.geo-faq-side-logos{
display:flex;
flex-wrap:wrap;
gap:6px;
}
.geo-faq-side-logos em{
font-style:normal;
font-size:11px;
color:rgba(255, 255, 255, .75);
background:rgba(255, 255, 255, .08);
border:1px solid rgba(255, 255, 255, .1);
padding:4px 10px;
border-radius:100px;
letter-spacing:.5px;
}
.geo-faq-side-btn{
position:relative;
z-index:2;
display:block;
text-align:center;
margin-top:20px;
padding:14px 20px;
background:linear-gradient(135deg, #00c864, #00d4ff);
color:#051a10 !important;
font-weight:700;
font-size:15px;
text-decoration:none;
border-radius:12px;
transition:all .3s;
box-shadow:0 8px 24px rgba(0, 200, 100, .35);
}
.geo-faq-side-btn:hover{
transform:translateY(-2px);
box-shadow:0 12px 32px rgba(0, 200, 100, .45);
}
.geo-faq-side-note{
position:relative;
z-index:2;
font-size:11px;
color:rgba(255, 255, 255, .4);
text-align:center;
margin:10px 0 0;
}
.geo-faq-side-ghost{
background:#fff;
border-radius:16px;
padding:20px 24px;
border:1px solid var(--gray-200);
text-align:center;
}
.geo-faq-side-ghost h5{
font-size:14px;
font-weight:700;
color:var(--dark);
margin:0 0 4px;
}
.geo-faq-side-ghost p{
font-size:12px;
color:var(--gray-500);
margin:0 0 12px;
}
.geo-faq-side-tel{
display:inline-block;
font-size:18px;
font-weight:800;
color:var(--primary);
text-decoration:none;
letter-spacing:1px;
}
.seo-faq-wrap{
display:grid;
grid-template-columns:minmax(0, 1fr) 360px;
gap:clamp(28px, 4vw, 48px);
align-items:start;
}
.seo-faq-col-list{min-width:0}
.seo-faq-col-list .seo-faq-list{
max-width:none;
margin:0;
}
.seo-faq-col-side{
display:flex;
flex-direction:column;
gap:20px;
position:sticky;
top:100px;
}
.seo-faq-side-card{
background:linear-gradient(160deg, #1a4a2e 0%, #2e7d32 50%, #1b5e20 100%);
border-radius:20px;
padding:32px 28px;
color:#fff;
position:relative;
overflow:hidden;
box-shadow:0 20px 50px rgba(27, 94, 32, .28);
}
.seo-faq-side-card::before{
content:"";
position:absolute;
top:-60px;
right:-60px;
width:200px;
height:200px;
background:radial-gradient(circle, rgba(129, 199, 132, .35), transparent 70%);
border-radius:50%;
}
.seo-faq-side-card::after{
content:"";
position:absolute;
bottom:-40px;
left:-40px;
width:160px;
height:160px;
background:radial-gradient(circle, rgba(76, 175, 80, .25), transparent 70%);
border-radius:50%;
}
.seo-faq-side-hero{
position:relative;
z-index:2;
text-align:center;
padding-bottom:20px;
border-bottom:1px solid rgba(255, 255, 255, .2);
}
.seo-faq-side-icon{
width:54px;
height:54px;
border-radius:14px;
background:rgba(255, 255, 255, .15);
display:flex;
align-items:center;
justify-content:center;
font-size:26px;
margin:0 auto 14px;
border:1px solid rgba(255, 255, 255, .25);
}
.seo-faq-side-hero h4{
font-size:18px;
font-weight:700;
margin:0 0 6px;
color:#fff;
}
.seo-faq-side-hero p{
font-size:13px;
color:rgba(255, 255, 255, .75);
margin:0;
}
.seo-faq-side-stats{
position:relative;
z-index:2;
display:flex;
gap:12px;
padding:20px 0;
border-bottom:1px solid rgba(255, 255, 255, .2);
}
.seo-faq-side-stat{
flex:1;
text-align:center;
}
.seo-faq-side-stat strong{
display:block;
font-size:20px;
font-weight:800;
color:#fff;
line-height:1.2;
}
.seo-faq-side-stat strong span{
font-size:12px;
font-weight:500;
opacity:.7;
margin-left:2px;
}
.seo-faq-side-stat span{
font-size:11px;
color:rgba(255, 255, 255, .65);
letter-spacing:.5px;
}
.seo-faq-side-channels{
position:relative;
z-index:2;
padding:16px 0;
border-bottom:1px solid rgba(255, 255, 255, .2);
}
.seo-faq-side-channels > span{
display:block;
font-size:11px;
color:rgba(255, 255, 255, .55);
letter-spacing:2px;
margin-bottom:10px;
}
.seo-faq-side-logos{
display:flex;
flex-wrap:wrap;
gap:6px;
}
.seo-faq-side-logos em{
font-style:normal;
font-size:11px;
color:rgba(255, 255, 255, .9);
background:rgba(255, 255, 255, .2);
border:1px solid rgba(255, 255, 255, .25);
padding:4px 10px;
border-radius:100px;
letter-spacing:.5px;
}
.seo-faq-side-btn{
position:relative;
z-index:2;
display:block;
text-align:center;
margin-top:20px;
padding:14px 20px;
background:#fff;
color:var(--primary-dark) !important;
font-weight:700;
font-size:15px;
text-decoration:none;
border-radius:12px;
transition:all .3s;
box-shadow:0 8px 24px rgba(0, 60, 30, .25);
}
.seo-faq-side-btn:hover{
transform:translateY(-2px);
box-shadow:0 12px 32px rgba(0, 60, 30, .35);
}
.seo-faq-side-note{
position:relative;
z-index:2;
font-size:11px;
color:rgba(255, 255, 255, .5);
text-align:center;
margin:10px 0 0;
}
.seo-faq-side-ghost{
background:#fff;
border-radius:16px;
padding:20px 24px;
border:1px solid var(--gray-200);
text-align:center;
}
.seo-faq-side-ghost h5{
font-size:14px;
font-weight:700;
color:var(--dark);
margin:0 0 4px;
}
.seo-faq-side-ghost p{
font-size:12px;
color:var(--gray-500);
margin:0 0 12px;
}
.seo-faq-side-tel{
display:inline-block;
font-size:18px;
font-weight:800;
color:var(--primary);
text-decoration:none;
letter-spacing:1px;
}
@media (max-width:1024px){
.geo-faq-wrap, .seo-faq-wrap{
grid-template-columns:1fr;
gap:32px;
}
.geo-faq-col-side, .seo-faq-col-side{
position:static;
flex-direction:row;
flex-wrap:wrap;
}
.geo-faq-side-card, .seo-faq-side-card{
flex:1 1 300px;
}
.geo-faq-side-ghost, .seo-faq-side-ghost{
flex:1 1 260px;
}
}
@media (max-width:640px){
.geo-faq-col-side, .seo-faq-col-side{
flex-direction:column;
}
.geo-faq-side-card, .seo-faq-side-card{
padding:24px 20px;
}
.geo-faq-side-stats, .seo-faq-side-stats{
gap:8px;
}
.geo-faq-side-stat strong, .seo-faq-side-stat strong{
font-size:17px;
}
}
.nw-d-footer{
display:flex;
flex-wrap:wrap;
gap:clamp(16px, 2vw, 28px);
align-items:center;
justify-content:space-between;
}
.nw-d-share{
display:flex;
flex-wrap:wrap;
align-items:center;
gap:8px;
}
.nw-d-share-label{
font-size:13px;
color:#888;
white-space:nowrap;
}
.nw-d-share-btn{
display:inline-flex;
align-items:center;
gap:5px;
font-size:12px;
color:#555;
text-decoration:none;
padding:5px 12px;
background:#fff;
border:1px solid #e8e8e8;
border-radius:16px;
transition:all .25s;
cursor:pointer;
}
.nw-d-share-btn:hover{
transform:translateY(-1px);
border-color:transparent;
color:#fff;
box-shadow:0 4px 12px rgba(0, 0, 0, .12);
}
.nw-d-share-btn svg{
flex-shrink:0;
}
.nw-d-share-wechat:hover{background:#07c160}
.nw-d-share-weibo:hover{background:#e6162d}
.nw-d-share-qq:hover{background:#12b7f5}
.nw-d-share-dingtalk:hover{background:#1677ff}
.nw-d-share-copy:hover{background:#2e7d32}
.nw-wechat-mask{
position:fixed;
inset:0;
background:rgba(0, 0, 0, .55);
backdrop-filter:blur(2px);
z-index:9999;
display:none;
align-items:center;
justify-content:center;
animation:nw-fadein .2s;
}
.nw-wechat-mask.active{display:flex}
.nw-wechat-box{
background:#fff;
border-radius:14px;
padding:28px 28px 20px;
text-align:center;
max-width:280px;
width:calc(100% - 48px);
box-shadow:0 20px 60px rgba(0, 0, 0, .25);
position:relative;
animation:nw-popin .25s cubic-bezier(.2, .8, .2, 1.4);
}
.nw-wechat-box img{
width:180px;
height:180px;
border:1px solid #eee;
border-radius:8px;
margin-bottom:14px;
}
.nw-wechat-box h4{
font-size:15px;
font-weight:700;
color:#222;
margin:0 0 6px;
}
.nw-wechat-box p{
font-size:12px;
color:#888;
margin:0;
}
.nw-wechat-close{
position:absolute;
top:10px;
right:12px;
width:26px;
height:26px;
border-radius:50%;
border:none;
background:#f4f4f4;
color:#666;
font-size:16px;
cursor:pointer;
display:flex;
align-items:center;
justify-content:center;
transition:all .2s;
}
.nw-wechat-close:hover{background:#eee; color:#222}
@keyframes nw-fadein{from{opacity:0}to{opacity:1}}
@keyframes nw-popin{
from{opacity:0; transform:scale(.9) translateY(10px)}
to{opacity:1; transform:scale(1) translateY(0)}
}
.nw-toast{
position:fixed;
top:50%;
left:50%;
transform:translate(-50%, -50%);
background:rgba(0, 0, 0, .8);
color:#fff;
padding:10px 22px;
border-radius:8px;
font-size:14px;
z-index:10000;
pointer-events:none;
animation:nw-toastin .25s;
}
@keyframes nw-toastin{
from{opacity:0; transform:translate(-50%, -50%) scale(.9)}
to{opacity:1; transform:translate(-50%, -50%) scale(1)}
}
@media (max-width:640px){
.nw-d-footer{
flex-direction:column;
align-items:flex-start;
gap:14px;
}
.nw-d-share-btn span{display:none}
.nw-d-share-btn{padding:6px 8px}
.nw-d-share-label{font-size:12px}
}
.cd-article-footer{
display:flex;
flex-wrap:wrap;
gap:clamp(16px, 2vw, 28px);
align-items:center;
justify-content:space-between;
padding:18px clamp(20px, 2.5vw, 32px) 24px;
border-top:1px solid #eef2ee;
background:#fafcf9;
border-radius:0 0 16px 16px;
}
.cd-article-tags{
display:flex;
flex-wrap:wrap;
align-items:center;
gap:8px;
}
.cd-tags-label{
font-size:13px;
color:#888;
}
.cd-tag-item{
font-size:12px;
color:#2e7d32;
text-decoration:none;
padding:4px 12px;
background:#fff;
border:1px solid #c8e6c9;
border-radius:16px;
transition:all .2s;
}
.cd-tag-item:hover{
background:#2e7d32;
color:#fff;
border-color:#2e7d32;
}
.cd-article-share{
display:flex;
flex-wrap:wrap;
align-items:center;
gap:8px;
}
.cd-share-label{
font-size:13px;
color:#888;
white-space:nowrap;
}
.cd-share-btn{
display:inline-flex;
align-items:center;
gap:5px;
font-size:12px;
color:#555;
text-decoration:none;
padding:5px 12px;
background:#fff;
border:1px solid #e8e8e8;
border-radius:16px;
transition:all .25s;
cursor:pointer;
}
.cd-share-btn:hover{
transform:translateY(-1px);
border-color:transparent;
color:#fff;
box-shadow:0 4px 12px rgba(0, 0, 0, .12);
}
.cd-share-btn svg{flex-shrink:0}
.cd-share-wechat:hover{background:#07c160}
.cd-share-weibo:hover{background:#e6162d}
.cd-share-qq:hover{background:#12b7f5}
.cd-share-dingtalk:hover{background:#1677ff}
.cd-share-copy:hover{background:#2e7d32}
.cd-meta-source{
color:#2e7d32;
font-weight:500;
}
@media (max-width:640px){
.cd-article-footer{
flex-direction:column;
align-items:flex-start;
gap:14px;
padding:16px 20px;
}
.cd-share-btn span{display:none}
.cd-share-btn{padding:6px 8px}
.cd-share-label{font-size:12px}
}
@media (min-width:1025px){
.nw-flip-grid{
grid-template-columns:repeat(4, 1fr);
gap:clamp(14px, 1.8vw, 22px);
}
.nw-flip-card{
height:clamp(240px, 26vw, 300px);
}
.nw-flip-face{
padding:clamp(20px, 2.2vw, 28px) clamp(16px, 1.8vw, 24px);
border-radius:16px;
}
.nw-flip-icon{
width:clamp(56px, 6vw, 72px);
height:clamp(56px, 6vw, 72px);
margin-bottom:clamp(12px, 1.4vw, 16px);
}
.nw-flip-icon svg{
width:clamp(36px, 4vw, 48px);
height:clamp(36px, 4vw, 48px);
}
.nw-flip-title{
font-size:clamp(18px, 1.6vw, 22px);
letter-spacing:2px;
}
.nw-flip-desc{
font-size:13px;
line-height:1.65;
}
.nw-flip-hint{display:block}
.nw-clients-row-lg{
display:flex;
flex-wrap:wrap;
justify-content:flex-start;
gap:clamp(12px, 1.5vw, 20px) clamp(16px, 2vw, 28px);
}
.nw-clients-row-lg .nw-cl-item{
width:clamp(150px, 14vw, 200px);
max-width:none;
height:clamp(58px, 5vw, 70px);
border-radius:10px;
padding:0 12px;
}
.nw-clients-row-lg .nw-cl-item img{
width:140px;
max-width:140px;
height:48px;
}
}