@charset "utf-8";
:root {
--bg:#f6f7fb;
--card:#ffffff;
--ink:#0f172a;
--ink-2:#475569;
--ink-3:#8b98ab;
--line:#e7eaf3;
--brand:#4f46e5;
--brand-2:#8b5cf6;
--brand-3:#22d3ee;
--grad:linear-gradient(120deg,#4f46e5 0%,#7c3aed 55%,#a855f7 100%);
--shadow:0 1px 2px rgba(15,23,42,.04),0 12px 32px -18px rgba(79,70,229,.18);
--shadow-lg:0 2px 4px rgba(15,23,42,.05),0 28px 60px -24px rgba(79,70,229,.28);
--radius:22px;
}
#fullpage .section {position: relative; padding:0; }
/* ===== 导航 ===== */
.headernav {display: flex;align-items: center;justify-content: space-between;padding: 18px 6vw;background: rgba(255, 255, 255, 0.72);backdrop-filter: blur(16px);-webkit-backdrop-filter: blur(16px);border-bottom: 1px solid rgba(226, 232, 240, 0.7);position: sticky; z-index: 999; top:77px;}

.headernav .smenu { display: flex; gap: 6px; }
.headernav .smenu a {text-decoration: none;color: #475569; font-size: var(--fontsize-18);font-weight: 500;padding: 8px 16px;border-radius: 999px;transition: all 0.25s ease;}
.headernav .smenu a:hover, .headernav .smenu a.active {color: #4f46e5;background: rgba(99, 102, 241, 0.09);}
.headernav .smenu .hover-svg{fill: #666;margin-right: 5px;transition: fill 0.3s ease;}
.headernav .smenu a:hover .hover-svg, .headernav .smenu a.active .hover-svg{fill: #4f46e5;}

.nav-cta {padding: 10px 22px;border:none;border-radius: 999px;background: linear-gradient(135deg, #6366f1, #8b5cf6);
color: #fff !important;font-size: 14px;font-weight: 600;text-decoration: none;box-shadow: 0 10px 24px -8px rgba(99, 102, 241, 0.55);transition: transform 0.25s ease, box-shadow 0.25s ease;}
.nav-cta:hover { transform: translateY(-2px); box-shadow: 0 16px 32px -8px rgba(99, 102, 241, 0.6); }
.service_item .swiper-slide {display: flex;align-items: center;}
.service_item .swiper{height: 650px;overflow: hidden;}
.service_item .content .tag {display: inline-flex;align-items: center;gap: 8px;font-size: 13px;font-weight: 600;padding: 7px 16px;border-radius: 999px;background: rgba(99, 102, 241, 0.09);color: #4f46e5;border: 1px solid rgba(99, 102, 241, 0.18);margin-bottom: 22px;}
.service_item .content .tag::before {content: "";width: 7px; height: 7px;border-radius: 50%;background: #6366f1;}
.service_item .content h1 {font-size: clamp(30px, 3.6vw, 46px);line-height: 1.22;font-weight: 800;letter-spacing: -0.5px;margin-bottom: 18px;}
.service_item .content h1 .grad {background: linear-gradient(120deg, #6366f1, #8b5cf6, #ec4899);-webkit-background-clip: text;background-clip: text;color: transparent;}
.service_item .content p.desc {font-size: 16px;line-height: 1.9;color: #475569;max-width: 60%;margin-bottom: 26px;}
.service_item ul.feature-list { list-style: none; margin-bottom: 32px; }
.service_item ul.feature-list li {display: flex;align-items: flex-start;gap: 11px;font-size: 14.5px;color: #475569;margin-bottom: 12px;}
.service_item ul.feature-list .check {flex: none;width: 20px; height: 20px;margin-top: 1px;border-radius: 50%;background: rgba(99, 102, 241, 0.12);color: #4f46e5;display: grid;place-items: center;font-size: 11px;font-weight: 700;}

.btn-group { display: flex; gap: 14px; flex-wrap: wrap; }
.btn-primary-service {padding: 14px 30px;border:none;border-radius: 14px;background: linear-gradient(135deg, #6366f1, #8b5cf6);color: #fff;font-size: 15px;font-weight: 600;text-decoration: none;box-shadow: 0 14px 30px -10px rgba(99, 102, 241, 0.55);transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.btn-primary-service:hover { transform: translateY(-3px); box-shadow: 0 20px 38px -10px rgba(99, 102, 241, 0.6);  transition: all 0.3s ease 0s;color: #fff;}
.btn-ghost {padding: 14px 30px;border-radius: 14px;border: 1px solid #e2e8f0; color: var(--c-ink);
font-size: 15px;font-weight: 600;text-decoration: none;background: rgba(255, 255, 255, 0.7);transition: border-color 0.25s ease, transform 0.25s ease;
}
.btn-ghost:hover { border-color: #6366f1; transform: translateY(-3px); color: #4f46e5; }

/* ===== 右侧插画卡片 ===== */
.visual {
position: relative;
border-radius: var(--radius);
background: linear-gradient(150deg, #eef2ff 0%, #f5f3ff 55%, #fdf2f8 100%);
border: 1px solid rgba(99, 102, 241, 0.14);
box-shadow: var(--shadow);
padding: 34px;
overflow: hidden;
min-height: 420px;
display: grid;
place-items: center;
}
.visual::before {
content: "";
position: absolute;
width: 260px; height: 260px;
border-radius: 50%;
background: radial-gradient(circle, rgba(139, 92, 246, 0.22), transparent 70%);
top: -80px; right: -60px;
}
.visual::after {
content: "";
position: absolute;
width: 220px; height: 220px;
border-radius: 50%;
background: radial-gradient(circle, rgba(236, 72, 153, 0.15), transparent 70%);
bottom: -70px; left: -50px;
}
.visual svg { width: 100%; max-width: 440px; height: auto; position: relative; z-index: 1; }
.float-chip {
position: absolute;
z-index: 2;
background: rgba(255, 255, 255, 0.9);
backdrop-filter: blur(8px);
border: 1px solid rgba(255, 255, 255, 0.9);
border-radius: 14px;
padding: 10px 16px;
font-size: 13px;
font-weight: 600;
color: var(--c-ink);
box-shadow: 0 12px 28px -10px rgba(15, 23, 42, 0.18);
animation: floaty 5s ease-in-out infinite;
}
@keyframes floaty {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-10px); }
}

/* ===== 右侧点导航 ===== */
.dots {
position: fixed;
right: 26px;
top: 50%;
transform: translateY(-50%);
z-index: 100;
display: flex;
flex-direction: column;
gap: 14px;
}
.dots a {
width: 10px; height: 10px;
border-radius: 50%;
background: #cbd5e1;
transition: all 0.3s ease;
display: block;
}
.dots a.active {
background: #6366f1;
height: 26px;
border-radius: 6px;
box-shadow: 0 4px 12px -2px rgba(99, 102, 241, 0.5);
}

/* ===== 各屏配色点缀 ===== */
#s2 .tag { background: rgba(14, 165, 233, 0.09); color: #0369a1; border-color: rgba(14, 165, 233, 0.2); }
#s2 .tag::before { background: #0ea5e9; }
#s2 .visual { background: linear-gradient(150deg, #f0f9ff, #eef2ff 60%, #faf5ff); }
#s3 .tag { background: rgba(16, 185, 129, 0.1); color: #047857; border-color: rgba(16, 185, 129, 0.22); }
#s3 .tag::before { background: #10b981; }
#s3 .visual { background: linear-gradient(150deg, #ecfdf5, #f0fdfa 55%, #eff6ff); }
#s4 .tag { background: rgba(245, 158, 11, 0.12); color: #b45309; border-color: rgba(245, 158, 11, 0.25); }
#s4 .tag::before { background: #f59e0b; }
#s4 .visual { background: linear-gradient(150deg, #fffbeb, #fef2f2 55%, #f5f3ff); }

.item-bg {background-color: #f3f3f3!important;}

.item_tag{display: flex; justify-content: space-between;}
.item_tag .item_tag_list{background: #fff;border:1px solid #eaeaea;border-right:0px solid #eaeaea; text-align: center; padding:25px 5px; margin-bottom:-1px; position: relative;transition: all 0.5s;}
.item_tag .item_tag_list:last-child{border-right:1px solid #eaeaea;}
.item_tag .item_tag_list:hover{cursor: pointer;box-shadow: 0px 0px 20px rgba(0,0,0,.2); z-index: 2;transform: scale(1.05); -webkit-transform: scale(1.05);}
.item_tag .item_tag_list:hover dt{color: #ff6800;}
.item_tag .item_tag_list dd{ height: 48px; display:flex; align-items:center; justify-content:center;}
.item_tag .item_tag_list dd img{max-width: 100%;max-height: 100%;}
.item_tag .item_tag_list dt{ font-size:var(--fontsize-18); margin-top: 10px;}
.item_tag .item_tag_list .p{color: #999;margin-top: 10px}
.item_tag .item_tag_list .info {display: inline-flex;flex-wrap: wrap; font-size:14px; margin-top: 1rem;}
.item_tag .item_tag_list .info .s {display: inline-flex; justify-content: center;border: 1px solid #eaeaea; margin: 0 0.1vw; padding: 0.2vw 0.3vw;}

.container-box{display: flex;justify-content: space-between;flex-wrap: wrap;}
.leftbox{width: 49%;}
.leftbox:hover {box-shadow: 0px 0px 50px rgba(0, 0, 0, .2);transition: all 0.5s; -webkit-transform: all 0.5s;}
.leftbox:hover .left_relative {height: 20vw;transition: all 0.5s; -webkit-transform: all 0.5s;}

.leftbox .left_relative{position: relative; height: 360px;}
.leftbox .left_tag{ display: flex; align-items: center; margin-bottom: -1px;}
.leftbox .left_tag .left_tag_list{animation: fadeInUp; animation-duration: 1s;}
.leftbox .left_tag .left_tag_list{width:100%; background: #fff; border: 1px solid #eaeaea; text-align: center; padding: 25px 0px; margin-right: -1px; position: relative;}
.leftbox .left_tag .left_tag_list:hover,.leftbox .left_tag .left_tag_list:hover dt{cursor: pointer; z-index: 2; color: #ff6800}
.leftbox .left_tag .left_tag_list dd{ height: 48px; display:flex; align-items:center; justify-content:center;}
.leftbox .left_tag .left_tag_list dd img{max-width: 100%;max-height: 100%;}
.leftbox .left_tag .left_tag_list dt{ font-size:var(--fs18); color: #666666; margin-top: 12px;font-weight: normal;}
.leftbox .imgbg1 {background: url(../images/bg1.png) no-repeat 50% / cover; transition: all 0.5s ease 0s; -webkit-transform: all 0.5s ease 0s;}
.leftbox .imgbg2 {background: url(../images/bg2.png) no-repeat 50% / cover; transition: all 0.5s ease 0s; -webkit-transform: all 0.5s ease 0s;}

.left_ban .txt{position: absolute; top:0; right:0.5vw;width: 16vw; height: 100%;color: #fff; display: flex; align-items: flex-start; flex-direction: column; justify-content: center;}
.left_ban .txt h2 { font-size: 30px; margin-bottom: 16px; line-height: 100%;}
.left_ban .txt h5 {line-height: 28px; color: #999;}
.left_ban .txt .tag {margin: 5px 0px 10px;}
.left_ban .txt .tag span {display:inline-block; color: #999; margin: 4px 4px; font-size: 14px; padding: 3px 9px; border: 1px solid #999; transition: all 0.3s ease-in-out; border-radius: 0.2em;}

.hero{position:relative;overflow:hidden;padding:88px 28px 30px}
.hero-in{margin:0 auto;text-align:center;position:relative;z-index:2}
.hero-bg{position:absolute;inset:0;z-index:1;pointer-events:none}
.hero-bg .grid{position:absolute;inset:0;
background-image:
linear-gradient(rgba(99,102,241,.05) 1px,transparent 1px),
linear-gradient(90deg,rgba(99,102,241,.05) 1px,transparent 1px);
background-size:44px 44px;
mask-image:radial-gradient(ellipse 72% 62% at 50% 32%,#000 30%,transparent 75%);
-webkit-mask-image:radial-gradient(ellipse 72% 62% at 50% 32%,#000 30%,transparent 75%);
}
.hero-bg .blob{position:absolute;border-radius:50%;filter:blur(70px);opacity:.5}
.hero-bg .blob.b1{width:520px;height:520px;left:-140px;top:-190px;background:radial-gradient(circle,#a5b4fc,transparent 65%)}
.hero-bg .blob.b2{width:460px;height:460px;right:-120px;top:-120px;background:radial-gradient(circle,#f5d0fe,transparent 65%)}
.hero-bg .blob.b3{width:420px;height:420px;left:50%;top:180px;transform:translateX(-50%);background:radial-gradient(circle,#a5f3fc,transparent 65%)}

.chip{display:inline-flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--line); padding:7px 16px;border-radius:999px; font-size:13px;font-weight:600;color:var(--brand);box-shadow:var(--shadow);}
.chip .pulse{width:8px;height:8px;border-radius:50%;background:#22c55e;position:relative;}
.chip .pulse::after{content:"";position:absolute;inset:-4px;border-radius:50%; border:1px solid #22c55e;animation:pulse 1.8s ease-out infinite;}
@keyframes pulse{0%{transform:scale(.5);opacity:1}100%{transform:scale(1.6);opacity:0}}

.hero h1{margin:26px auto 18px;font-size:clamp(34px,5vw,56px);line-height:1.16;letter-spacing:-1px;font-weight:900;}
.hero h1 .g-text{background:var(--grad); -webkit-background-clip:text;background-clip:text;color:transparent;}
.hero p.lead{margin:0 auto;color:var(--ink-2); font-size:17px;line-height:1.85;}
.hero-btns{display:flex;gap:14px;justify-content:center;margin:34px 0 0;flex-wrap:wrap}

.btn-ghost{background:#fff;border:1.5px solid var(--line);color:var(--ink)}
.btn-ghost:hover{transform:translateY(-3px);border-color:#c7d2fe;color:var(--brand)}

.stats{margin:64px auto 0;background:rgba(255,255,255,.75);border:1px solid rgba(231,234,243,.9);border-radius:20px;backdrop-filter:blur(8px);padding:26px 10px;display:grid;grid-template-columns:repeat(4,1fr);box-shadow:var(--shadow);}
.stat{border-right:1px solid var(--line);padding:4px 18px}
.stat:last-child{border-right:none}
.stat b{display:block;font-size:30px;font-weight:900;letter-spacing:-.5px}
.stat b em{font-style:normal;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.stat span{font-size:12.5px;color:var(--ink-3);font-weight:500}

/* ---------- 版块标题 ---------- */
.section{padding:76px 28px 30px}
.section-in{margin:0 auto}
.sec-head{text-align:center;margin:0 auto 54px}
.sec-label{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:800;letter-spacing:3px;color:var(--brand);text-transform:uppercase;}
.sec-label::before,.sec-label::after{content:"";width:26px;height:2px;border-radius:2px;background:var(--grad)}
.sec-head h2{font-size:clamp(28px,3.6vw,40px);font-weight:900;letter-spacing:-.5px;margin:14px 0 14px;line-height:1.25}
.sec-head h2 .g-text{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.sec-head p{color:var(--ink-2);font-size:16px;line-height:1.85}

/* ---------- 保障卡片栅格 ---------- */
.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:22px}
.card{
background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
box-shadow:var(--shadow);
overflow:hidden;position:relative;
transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease;
}
.card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg);border-color:var(--ring)}
.card.c7{grid-column:span 7}
.card.c5{grid-column:span 5}
.card.c6{grid-column:span 6}

.card-body{display:flex;height:100%}
.card.h .card-body{display:grid;grid-template-columns:minmax(0,46%) 1fr;align-items:center;padding:16px 20px 16px 16px;gap:6px}
.card.v .card-body{flex-direction:column;padding:16px}
.card.v .media{width:100%;aspect-ratio:8/5;margin-bottom:6px}

.media{position:relative;border-radius:16px;overflow:hidden;background:linear-gradient(155deg,var(--tint) 0%,#ffffff 72%);border:1px solid var(--tint2);}
.media svg{width:100%;height:100%;display:block}

.info{padding:20px 20px 16px;align-self:stretch;display:flex;flex-direction:column;justify-content:center;min-width:0}
.card.v .info{padding:10px 8px 8px}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:800;letter-spacing:1.5px;color:var(--acc);margin-bottom:12px;}
.eyebrow::before{content:"";width:22px;height:2.5px;border-radius:2px;background:var(--acc)}
.info h3{font-size:22px;font-weight:800;letter-spacing:-.2px;line-height:1.4;margin-bottom:10px}
.card.v .info h3{font-size:20px}
.info p{font-size:14.5px;color:var(--ink-2);line-height:1.85;margin-bottom:16px}
.tags{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin-top:auto}
.tags li{
display:inline-flex;align-items:center;gap:6px;
font-size:12.5px;font-weight:600;color:var(--ink-2);
background:#f8fafc;border:1px solid var(--tint2);
padding:5px 12px;border-radius:999px;
}
.tags li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--acc)}

/* ---------- 卡片主题色 ---------- */
.a1{--acc:#4f46e5;--acc2:#8b5cf6;--tint:#eef2ff;--tint2:#dbe4ff;--ring:#c7d2fe;--dot:#818cf8}
.a2{--acc:#0d9488;--acc2:#14b8a6;--tint:#f0fdfa;--tint2:#ccfbf1;--ring:#99f6e4;--dot:#2dd4bf}
.a3{--acc:#7c3aed;--acc2:#d946ef;--tint:#faf5ff;--tint2:#f3e8ff;--ring:#e9d5ff;--dot:#a855f7}
.a4{--acc:#0369a1;--acc2:#0ea5e9;--tint:#f0f9ff;--tint2:#e0f2fe;--ring:#bae6fd;--dot:#38bdf8}
.a5{--acc:#ea580c;--acc2:#f59e0b;--tint:#fff7ed;--tint2:#ffedd5;--ring:#fed7aa;--dot:#fb923c}
.a6{--acc:#059669;--acc2:#10b981;--tint:#ecfdf5;--tint2:#d1fae5;--ring:#a7f3d0;--dot:#34d399}

/* 插画内悬浮小卡片动画 */
.fchip{animation:floaty 5.2s ease-in-out infinite}
.fchip.delay{animation-delay:2.6s}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.fchip{transform-box:fill-box;transform-origin:center}
@media (prefers-reduced-motion:reduce){
.fchip{animation:none}
*{transition-duration:.01ms !important;animation-duration:.01ms !important}
}

/* 滚动渐显 */
.js .reveal{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s ease}
.js .reveal.in{opacity:1;transform:none}

/* ---------- 响应式 ---------- */
@media (max-width:1440px){
    .headernav{padding:18px 4vw;}
    .headernav .smenu a{padding: 5px 10px;}
}

@media (max-width:520px){
.hero-btns .btn2{width:100%;justify-content:center}
.cta .btns .btn2{width:100%;justify-content:center}
}
@media (max-width: 900px) {
    .headernav .smenu .hover-svg{display: none;}
    
    .section{padding: 20px 10px;}
    .nav-links{display:none}
.hero{padding-top:64px}
.stats{grid-template-columns:repeat(2,1fr);gap:10px 0;padding:5px 5px}
.stat{border-right:none;padding: 4px 10px;}
.stat:nth-child(odd){border-right:1px solid var(--line)}
.card.h .card-body{grid-template-columns:1fr;padding:16px}
.card.h .media{width:100%;aspect-ratio:16/9;margin-bottom:4px}
.cta{padding:48px 24px}
.nav-cta{display: none;}
}
@media (max-width:767px){
    .container{max-width: 95%;}
    .container-box{flex-direction:column;}
    .leftbox{width: 100%;}
    .left_ban .txt{width: 150px;}
    .left_ban .txt h2{font-size: 18px;}
    .left_ban .txt .tag span{font-size: 12px;}
    .left_ban .txt h5,.info p{font-size: 13.5px;}
    .leftbox .left_tag .left_tag_list dt{font-size: 12px;}
    .visual{display: none;}
    .service_item .content p.desc{max-width: 100%;font-size: 14px;}
    .service_item ul.feature-list li{font-size: 14px;}
    .card-body{padding:5px;flex-direction: column;}
    .info{padding:5px 5px;}
    section:last-of-type{padding-top: 10px;padding-bottom: 28px;}
    .info h3{font-size: 18px;}
    .tags li{font-size: 12px;gap:3px;padding:3px 5px;}
    .media{width: 100%;}
    .service_item .swiper{height: 520px;}
    .headernav .smenu,.headernav { display: none; }
    .btn2{padding: 5px 20px;border-radius: 20px;font-size: 14px;}
}