@charset "UTF-8";

:root { --green:#08c765; --deep:#14242c; --ink:#17242a; --muted:#708087; --line:#e3e9e7; --paper:#f4f8f6; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:#fff; color:var(--ink); font-family:"Microsoft YaHei","PingFang SC",Arial,sans-serif; }
a { color:inherit; text-decoration:none; }
.solution-shell { width:min(1180px,calc(100% - 56px)); margin:0 auto; }

.solution-header { height:100px; background:#fff; border-bottom:1px solid #edf0ef; }
.solution-header-inner { display:flex; align-items:center; width:min(1200px,calc(100% - 56px)); height:100%; margin:0 auto; }
.solution-logo { display:block; width:150px; flex:0 0 auto; }
.solution-logo img { display:block; width:100%; }
.solution-nav { display:flex; align-items:center; align-self:stretch; gap:34px; margin-left:auto; font-size:16px; }
.solution-nav a { position:relative; display:flex; align-items:center; align-self:stretch; color:#333; white-space:nowrap; transition:color .2s ease; }
.solution-nav a:after { content:""; position:absolute; right:0; bottom:-1px; left:0; height:3px; background:var(--green); transform:scaleX(0); transition:transform .24s ease; }
.solution-nav a:hover,.solution-nav a.active { color:var(--green); }
.solution-nav a:hover:after,.solution-nav a.active:after { transform:scaleX(1); }
.solution-nav-arrow { width:7px; height:7px; margin-left:7px; border-right:1px solid currentColor; border-bottom:1px solid currentColor; transform:translateY(-2px) rotate(45deg); }

.solution-hero { position:relative; min-height:600px; overflow:hidden; color:#fff; background:#101d23; }
.solution-hero-image,.solution-hero-overlay { position:absolute; inset:0; }
.solution-hero-image { background:center / cover no-repeat; transform:scale(1.02); transition:background-image .35s ease; }
.solution-hero-overlay { background:linear-gradient(90deg,rgba(5,13,18,.94) 0%,rgba(5,13,18,.76) 44%,rgba(5,13,18,.22) 100%); }
.solution-hero-content { position:relative; z-index:1; padding-top:97px; }
.solution-breadcrumb { margin:0; color:rgba(255,255,255,.56); font-size:12px; }
.solution-breadcrumb span { margin:0 8px; color:var(--green); }
.solution-breadcrumb b { color:rgba(255,255,255,.92); font-weight:normal; }
.solution-label,.section-kicker { margin:22px 0 0; color:var(--green); font-size:12px; font-weight:bold; letter-spacing:0; }
.solution-hero h1 { max-width:790px; margin:22px 0 18px; font-size:50px; font-weight:300; line-height:1.22; letter-spacing:0; }
.solution-summary { max-width:560px; margin:0; color:rgba(255,255,255,.76); font-size:16px; line-height:2; }
.solution-actions { display:flex; align-items:flex-start; gap:14px; margin-top:37px; }
.solution-button { display:inline-flex; align-items:center; justify-content:center; min-height:47px; padding:0 22px; font-size:14px; transition:transform .2s ease,background .2s ease; }
.solution-button:hover { transform:translateY(-2px); }
.solution-button span { margin-left:24px; font-size:18px; }
.solution-button.primary { color:#11301f; background:var(--green); }
.solution-button.primary:hover { background:#42d787; }
.solution-button.secondary { border:1px solid rgba(255,255,255,.52); color:#fff; }
.solution-button.secondary:hover { border-color:var(--green); background:rgba(8,199,101,.13); }
.qrcode-box { display:inline-flex; flex-direction:column; align-items:flex-start; }
.qrcode-box .qrcode { max-height:0; margin-top:0; padding:0 10px; overflow:hidden; opacity:0; transform:translateY(-6px); background:rgba(255,255,255,.96); border-radius:12px; box-shadow:0 14px 36px rgba(11,40,28,.14); transition:max-height .24s ease,margin-top .24s ease,padding .24s ease,opacity .18s ease,transform .18s ease; pointer-events:none; }
.qrcode-box:hover .qrcode,.qrcode-box:focus-within .qrcode { max-height:220px; margin-top:16px; padding:10px; opacity:1; transform:translateY(0); pointer-events:auto; }
.qrcode-box .qrcode img { width:184px; height:184px; display:block; }
.solution-hero-index { position:absolute; right:max(28px,calc((100% - 1180px)/2)); bottom:35px; z-index:1; display:flex; align-items:center; gap:12px; color:rgba(255,255,255,.7); font-size:12px; }
.solution-hero-index i { width:56px; height:1px; background:var(--green); }
.solution-hero-index em { font-size:11px; font-style:normal; text-transform:uppercase; }

.industry-four-section { display:block; }
.four-section .generic-section { display:none; }
.four-section .solution-breadcrumb,
.four-section .solution-hero-index { display:none; }
.four-section .solution-hero-content { padding-top:86px; }
.four-section .solution-label { display:inline-flex; min-height:38px; align-items:center; margin:0; padding:0 26px; border-radius:6px; background:linear-gradient(90deg,rgba(66,78,103,.9),rgba(108,101,70,.82)); font-weight:normal; letter-spacing:0; }
.four-section .solution-hero h1 { margin-top:34px; font-size:42px; }
.four-section .solution-summary { max-width:650px; line-height:2.05; }

.ecommerce-heading { text-align:center; }
.ecommerce-heading h2 { margin:0; font-size:30px; font-weight:300; letter-spacing:0; }
.ecommerce-heading > span { display:block; width:44px; height:2px; margin:25px auto 0; background:var(--green); }
.ecommerce-heading > p { margin:28px 0 0; font-size:15px; line-height:1.8; }
.ecommerce-challenges { padding:95px 0 105px; background:#fff; }
.challenge-layout { display:grid; grid-template-columns:1fr 300px 1fr; gap:55px; align-items:center; margin-top:70px; }
.challenge-column { display:flex; flex-direction:column; gap:52px; }
.challenge-item { position:relative; }
.challenge-item h3 { margin:0; padding-bottom:8px; border-bottom:2px solid var(--green); font-size:16px; font-weight:normal; line-height:1.55; }
.challenge-item p { margin:11px 0 0; color:#92999d; font-size:13px; line-height:1.8; }
.challenge-item > span { position:absolute; top:-4px; right:-46px; color:#d7dadd; font-size:29px; font-weight:bold; }
.challenge-column:last-child .challenge-item > span { right:auto; left:-46px; }
.challenge-visual { display:flex; align-items:center; justify-content:center; min-height:330px; }
.challenge-orbit { position:relative; width:230px; height:230px; border:45px solid #8fd1ff; border-radius:50%; background:#18375b; box-shadow:0 0 0 28px #f3f8fa; }
.challenge-orbit:before { content:""; position:absolute; bottom:-23px; left:50%; width:88px; height:59px; border-radius:8px 8px 28px 28px; background:#bcc5ca; transform:translateX(-50%); }
.challenge-orbit:after { content:""; position:absolute; top:43px; left:50%; width:48px; height:72px; border-radius:28px 28px 15px 15px; background:#ffd196; transform:translateX(-50%); }
.challenge-shield,.challenge-orbit b { position:absolute; z-index:2; top:20px; display:flex; align-items:center; justify-content:center; width:66px; height:66px; border-radius:50%; color:#fff; background:#47d887; font-size:27px; }
.challenge-shield { left:-78px; }
.challenge-orbit b { right:-78px; font-weight:normal; }
.challenge-orbit i { position:absolute; z-index:3; top:20px; left:50%; width:61px; height:61px; border-radius:50% 50% 42% 42%; background:#14234c; transform:translateX(-50%); }

.ecommerce-advantages { padding:94px 0 104px; background:#f8f9f9; }
.advantage-layout { display:grid; grid-template-columns:500px 1fr; gap:65px; align-items:center; margin-top:66px; }
.advantage-portrait { position:relative; display:flex; align-items:center; justify-content:center; width:460px; height:460px; border:1px solid #edf0ef; border-radius:50%; }
.advantage-portrait:before { content:""; position:absolute; width:330px; height:330px; border-radius:50%; background:#f0f2f2; }
.advantage-portrait img { position:relative; z-index:1; width:260px; height:260px; border-radius:50%; object-fit:cover; filter:brightness(.62); }
.advantage-portrait > div { position:absolute; z-index:2; top:228px; left:111px; color:#fff; }
.advantage-portrait b,.advantage-portrait small { display:block; }
.advantage-portrait b { font-size:17px; }
.advantage-portrait > div span { display:block; width:30px; height:2px; margin:13px 0; background:var(--green); }
.advantage-portrait small { font-size:13px; }
.advantage-list { display:flex; flex-direction:column; gap:32px; }
.advantage-list article { display:grid; grid-template-columns:15px 1fr; gap:15px; }
.advantage-list article > span { width:12px; height:12px; margin-top:5px; border-radius:50%; background:var(--green); }
.advantage-list h3 { margin:0; color:var(--green); font-size:16px; font-weight:normal; }
.advantage-list p { margin:9px 0 0; color:#939a9d; font-size:13px; line-height:1.85; }

.ecommerce-flow { position:relative; overflow:hidden; padding:59px 0 26px; color:#fff; background:#202829; }
.ecommerce-flow:before { content:""; position:absolute; inset:0; background-image:linear-gradient(rgba(9,16,18,.88),rgba(9,16,18,.88)),var(--flow-background,url("../images/20230714etrgsdfgh.png")); background-position:center; background-size:cover; }
.ecommerce-flow .solution-shell { position:relative; z-index:1; }
.ecommerce-heading.light h2 { color:#fff; }
.ecommerce-heading.light > p { color:#fff; }
.ecommerce-flow-layout { display:grid; grid-template-columns:180px minmax(0,1fr); gap:30px; align-items:center; margin-top:36px; }
.ecommerce-flow-tabs { display:flex; flex-direction:column; gap:2px; min-height:420px; justify-content:center; padding-right:28px; border-right:1px solid rgba(255,255,255,.62); }
.ecommerce-flow-tabs button { min-height:38px; padding:0 14px; border:0; border-radius:4px; background:transparent; color:#fff; font-family:inherit; font-size:13px; text-align:left; cursor:pointer; transition:background .2s ease,color .2s ease; }
.ecommerce-flow-tabs button:hover { color:var(--green); }
.ecommerce-flow-tabs button.active { color:#fff; background:var(--green); }
.ecommerce-flow-stage { display:flex; align-items:center; justify-content:center; height:430px; min-width:0; overflow:hidden; padding:8px; border-radius:4px; background:#fff; }
.ecommerce-flow-stage img { display:block; max-width:100%; max-height:100%; object-fit:contain; }
.ecommerce-flow-layout.single-flow { grid-template-columns:1fr; }
.ecommerce-flow-layout.single-flow .ecommerce-flow-tabs { display:none; }
.industry-fallback-flow { display:none; grid-template-columns:repeat(4,1fr); width:100%; margin:0; padding:38px 28px; list-style:none; }
.industry-fallback-flow.show { display:grid; }
.industry-fallback-flow li { position:relative; padding:24px 20px; border-right:1px solid #dfe6e3; text-align:center; }
.industry-fallback-flow li:last-child { border-right:0; }
.industry-fallback-flow li:after { content:""; position:absolute; top:50%; right:-7px; width:13px; height:13px; border-top:2px solid var(--green); border-right:2px solid var(--green); transform:rotate(45deg); }
.industry-fallback-flow li:last-child:after { display:none; }
.industry-fallback-flow span { display:flex; align-items:center; justify-content:center; width:42px; height:42px; margin:0 auto 18px; border-radius:50%; color:#fff; background:var(--green); font-size:13px; }
.industry-fallback-flow b { display:block; color:var(--ink); font-size:16px; font-weight:normal; }
.industry-fallback-flow small { display:block; margin-top:10px; color:var(--muted); font-size:12px; line-height:1.7; }
.ecommerce-consult { display:flex; align-items:center; justify-content:center; width:196px; min-height:40px; margin:0 auto; color:#fff; background:var(--green); font-size:13px; transition:background .2s ease; }
.ecommerce-consult:hover { background:#13ab5e; }

.solution-intro { padding:105px 0; background:var(--paper); }
.intro-grid { display:grid; grid-template-columns:1.15fr 1.65fr 150px; gap:55px; align-items:start; }
.intro-grid h2,.section-heading h2,.flow-heading h2,.scenario-layout h2,.contact-layout h2 { margin:17px 0 0; font-size:38px; font-weight:300; line-height:1.35; letter-spacing:0; }
h2 strong { color:#0e9557; font-weight:700; }
.intro-grid > p { margin:51px 0 0; color:var(--muted); font-size:15px; line-height:2; }
.intro-mark { padding-top:32px; border-top:1px solid #a4c9b8; color:#0e9557; }
.intro-mark b { display:block; font-size:54px; font-weight:300; line-height:1; }
.intro-mark span { display:block; margin-top:13px; font-size:12px; line-height:1.8; }

.solution-capabilities { padding:110px 0 122px; }
.section-heading { display:flex; align-items:end; justify-content:space-between; padding-bottom:45px; border-bottom:1px solid var(--line); }
.section-heading > p { width:285px; margin:0 0 6px; color:var(--muted); font-size:13px; line-height:1.9; }
.capability-grid { display:grid; grid-template-columns:repeat(3,1fr); }
.capability-card { min-height:266px; padding:36px 29px 30px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); }
.capability-card:nth-child(3n) { border-right:0; }
.capability-card:nth-child(n+4) { border-bottom:0; }
.capability-number { display:block; color:var(--green); font-size:13px; }
.capability-card h3 { margin:28px 0 13px; font-size:19px; font-weight:normal; }
.capability-card p { margin:0; color:var(--muted); font-size:13px; line-height:1.9; }

.solution-flow { padding:110px 0 113px; color:#fff; background:var(--deep); }
.flow-heading { display:flex; align-items:end; justify-content:space-between; }
.flow-heading h2 { color:#fff; }
.flow-heading h2 strong { color:var(--green); }
.flow-heading p { width:290px; margin:0 0 5px; color:rgba(255,255,255,.58); font-size:13px; line-height:1.9; }
.flow-steps { display:grid; grid-template-columns:repeat(4,1fr); margin:63px 0 0; padding:0; list-style:none; border-top:1px solid rgba(255,255,255,.24); }
.flow-steps li { position:relative; min-height:168px; padding:28px 25px 0 0; border-right:1px solid rgba(255,255,255,.24); }
.flow-steps li + li { padding-left:27px; }
.flow-steps li:last-child { border-right:0; }
.flow-step-number { display:block; color:var(--green); font-size:13px; }
.flow-steps b { display:block; margin-top:28px; font-size:18px; font-weight:normal; }
.flow-steps small { display:block; margin-top:10px; color:rgba(255,255,255,.55); font-size:12px; line-height:1.75; }

.solution-scenarios { padding:108px 0; }
.scenario-layout { display:grid; grid-template-columns:1fr 1fr; gap:120px; }
.scenario-list { border-top:1px solid var(--line); }
.scenario-item { display:grid; grid-template-columns:45px 1fr auto; gap:15px; align-items:center; min-height:84px; border-bottom:1px solid var(--line); }
.scenario-item span { color:var(--green); font-size:13px; }
.scenario-item b { font-size:17px; font-weight:normal; }
.scenario-item small { color:var(--muted); font-size:12px; }

.solution-contact { padding:101px 0; background:var(--green); }
.contact-layout { display:grid; grid-template-columns:1fr 1fr; gap:120px; align-items:end; }
.contact-layout h2 { color:#103123; }
.contact-layout > div:last-child p { max-width:335px; margin:0 0 28px; color:#155237; font-size:15px; line-height:1.9; }
.solution-button.dark { color:#fff; background:#14242c; }
.solution-button.dark:hover { background:#2a414c; }
.solution-footer { background:#0f1b20; color:rgba(255,255,255,.64); }
.solution-footer .solution-shell { display:flex; align-items:center; min-height:78px; gap:18px; font-size:13px; }
.solution-footer span { color:#fff; font-size:16px; }
.solution-footer a { margin-left:auto; color:var(--green); }

@media (max-width:1000px) {
	.solution-nav { gap:18px; font-size:14px; }
	.solution-nav a:nth-child(n+6) { display:none; }
	.intro-grid { grid-template-columns:1fr 1.5fr; }
	.intro-mark { display:none; }
	.capability-grid { grid-template-columns:repeat(2,1fr); }
	.capability-card:nth-child(3n) { border-right:1px solid var(--line); }
	.capability-card:nth-child(2n) { border-right:0; }
	.capability-card:nth-child(n+4) { border-bottom:1px solid var(--line); }
	.capability-card:nth-child(n+5) { border-bottom:0; }
	.scenario-layout,.contact-layout { grid-template-columns:1fr; gap:38px; }
	.challenge-layout { grid-template-columns:1fr 1fr; }
	.challenge-visual { display:none; }
	.challenge-item > span { right:0; }
	.challenge-column:last-child .challenge-item > span { right:0; left:auto; }
	.advantage-layout { grid-template-columns:360px 1fr; gap:40px; }
	.advantage-portrait { width:350px; height:350px; }
	.advantage-portrait:before { width:270px; height:270px; }
	.advantage-portrait img { width:220px; height:220px; }
	.advantage-portrait > div { top:180px; left:77px; }
}
@media (max-width:620px) {
	.solution-shell,.solution-header-inner { width:calc(100% - 36px); }
	.solution-header { height:72px; }
	.solution-logo { width:116px; }
	.solution-nav { gap:17px; font-size:12px; }
	.solution-nav a:nth-child(n+3) { display:none; }
	.solution-hero { min-height:610px; }
	.solution-hero-content { padding-top:80px; }
	.solution-hero h1 { font-size:38px; }
	.solution-summary { font-size:14px; }
	.solution-actions { flex-direction:column; align-items:flex-start; }
	.solution-hero-index { display:none; }
	.solution-intro,.solution-capabilities,.solution-flow,.solution-scenarios,.solution-contact { padding:70px 0; }
	.qrcode-box .qrcode { padding:0 8px; border-radius:10px; }
	.qrcode-box:hover .qrcode,.qrcode-box:focus-within .qrcode { max-height:184px; margin-top:14px; padding:8px; }
	.qrcode-box .qrcode img { width:152px; height:152px; }
	.intro-grid { grid-template-columns:1fr; gap:0; }
	.intro-grid > p { margin-top:25px; }
	.intro-grid h2,.section-heading h2,.flow-heading h2,.scenario-layout h2,.contact-layout h2 { font-size:31px; }
	.section-heading,.flow-heading { display:block; }
	.section-heading > p,.flow-heading p { width:auto; margin:22px 0 0; }
	.capability-grid,.flow-steps { grid-template-columns:1fr; }
	.capability-card,.capability-card:nth-child(3n),.capability-card:nth-child(2n) { min-height:0; padding:28px 0; border-right:0; border-bottom:1px solid var(--line); }
	.capability-card:last-child { border-bottom:0; }
	.flow-steps { margin-top:38px; }
	.flow-steps li,.flow-steps li + li { min-height:0; padding:23px 0; border-right:0; border-bottom:1px solid rgba(255,255,255,.24); }
	.flow-steps li:last-child { border-bottom:0; }
	.flow-steps b { margin-top:14px; }
	.scenario-item { grid-template-columns:35px 1fr; padding:17px 0; }
	.scenario-item small { grid-column:2; }
	.solution-footer .solution-shell { min-height:100px; flex-wrap:wrap; padding:22px 0; }
	.solution-footer a { width:100%; margin-left:0; }
	.four-section .solution-hero-content { padding-top:60px; }
	.four-section .solution-label { padding:0 15px; font-size:10px; }
	.four-section .solution-hero h1 { font-size:35px; }
	.ecommerce-challenges,.ecommerce-advantages { padding:70px 0; }
	.ecommerce-heading h2 { font-size:26px; }
	.challenge-layout { grid-template-columns:1fr; gap:42px; margin-top:50px; }
	.challenge-column { gap:42px; }
	.advantage-layout { grid-template-columns:1fr; margin-top:48px; }
	.advantage-portrait { width:290px; height:290px; margin:0 auto; }
	.advantage-portrait:before { width:230px; height:230px; }
	.advantage-portrait img { width:190px; height:190px; }
	.advantage-portrait > div { top:148px; left:52px; }
	.ecommerce-flow { padding-top:54px; }
	.ecommerce-flow-layout { grid-template-columns:1fr; gap:18px; }
	.ecommerce-flow-tabs { display:grid; grid-template-columns:repeat(2,1fr); min-height:0; padding:0 0 20px; border-right:0; border-bottom:1px solid rgba(255,255,255,.45); }
	.ecommerce-flow-tabs button { text-align:center; }
	.ecommerce-flow-stage { height:270px; }
	.industry-fallback-flow,.industry-fallback-flow.show { grid-template-columns:1fr 1fr; padding:16px 8px; }
	.industry-fallback-flow li { padding:18px 8px; border-right:0; }
	.industry-fallback-flow li:after { display:none; }
}