.about-ui { --about-green:#009b4c; --about-dark:#173028; --about-text:#4d6259; color:var(--about-dark); background:#fff; font-family:"Microsoft YaHei","PingFang SC",Arial,sans-serif; }
.about-ui * { box-sizing:border-box; }
.about-container { width:min(1268px, calc(100% - 40px)); margin:0 auto; }
.about-ui h1,.about-ui h2,.about-ui h3,.about-ui p { margin:0; }
.about-ui h1,.about-ui h2,.about-ui h3 { color:var(--about-dark); font-weight:700; }
.about-eyebrow { color:var(--about-green); font-size:14px; font-weight:700; letter-spacing:.08em; }
.about-hero { padding:76px 0 72px; overflow:hidden; background:linear-gradient(117deg,#e8f7ef 0%,#f9fcfa 55%,#e1f4ea 100%); }
.about-hero__grid { min-height:460px; display:grid; grid-template-columns:minmax(0,1fr) minmax(400px,.95fr); align-items:center; gap:54px; }
.about-hero__copy { max-width:640px; }
.about-hero h1 { margin:17px 0 22px; max-width:620px; font-size:clamp(38px,4.1vw,62px); line-height:1.17; letter-spacing:-1.5px; }
.about-hero__lead { max-width:600px; color:#52685e; font-size:18px; line-height:1.82; }
.about-hero__actions { display:flex; flex-wrap:wrap; gap:14px; margin-top:30px; }
.about-btn { min-width:142px; padding:13px 20px; display:inline-flex; align-items:center; justify-content:center; border:1px solid var(--about-green); border-radius:7px; font-size:16px; font-weight:700; text-decoration:none !important; transition:.2s ease; }
.about-btn--primary { color:#fff !important; background:var(--about-green); box-shadow:0 12px 24px rgba(0,155,76,.18); }
.about-btn--primary:hover { background:#007f3d; color:#fff !important; }
.about-btn--secondary { color:var(--about-green) !important; background:#fff; }
.about-btn--secondary:hover { color:#fff !important; background:var(--about-green); }
.about-hero__visual { padding:28px; background:rgba(255,255,255,.75); border:1px solid rgba(0,155,76,.12); border-radius:20px; box-shadow:0 22px 50px rgba(25,69,49,.12); }
.about-hero__visual img,.about-method__visual img { width:100%; height:auto; display:block; }
.about-intro { padding:90px 0 84px; }
.about-intro__grid { display:grid; grid-template-columns:.9fr 1.1fr; gap:80px; align-items:start; }
.about-intro h2,.about-section-heading h2,.about-method h2,.about-cta h2 { margin-top:13px; font-size:clamp(28px,2.8vw,42px); line-height:1.32; }
.about-intro__content { padding-top:8px; color:var(--about-text); font-size:17px; line-height:1.9; }
.about-intro__content p + p { margin-top:15px; }
.about-stat-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:60px; }
.about-stat-grid article { min-height:146px; padding:25px 28px; display:flex; flex-direction:column; justify-content:center; gap:8px; background:#f8fbf9; border:1px solid #e2eee7; border-radius:12px; }
.about-stat-grid strong { color:var(--about-green); font-size:38px; line-height:1; }
.about-stat-grid span { color:#52685e; font-size:15px; }
.about-services { padding:88px 0; background:#173028; }
.about-services h2 { color:#fff; }
.about-services .about-eyebrow { color:#66d99d; }
.about-service-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:42px; }
.about-service-grid article { min-height:252px; padding:30px; background:#fff; border-radius:12px; }
.about-service-grid span { color:var(--about-green); font-size:14px; font-weight:700; }
.about-service-grid h3 { margin:24px 0 13px; font-size:22px; }
.about-service-grid p { color:var(--about-text); font-size:15px; line-height:1.8; }
.about-method { padding:92px 0; background:#f4faf6; }
.about-method__grid { display:grid; grid-template-columns:1fr 1fr; gap:78px; align-items:center; }
.about-method__visual { padding:20px; background:#fff; border-radius:18px; box-shadow:0 15px 34px rgba(29,72,52,.1); }
.about-method ol { padding:0; margin:32px 0 0; list-style:none; counter-reset:about-step; }
.about-method li { position:relative; min-height:64px; padding-left:70px; color:var(--about-text); }
.about-method li + li { margin-top:18px; }
.about-method li:before { content:counter(about-step,decimal-leading-zero); counter-increment:about-step; position:absolute; left:0; top:0; width:46px; height:46px; display:grid; place-items:center; color:var(--about-green); border-radius:50%; background:#def3e7; font-size:13px; font-weight:700; }
.about-method b,.about-method span { display:block; }
.about-method b { margin-bottom:5px; color:var(--about-dark); font-size:17px; }
.about-method span { font-size:15px; line-height:1.65; }
.about-team { padding:88px 0 96px; }
.about-section-heading--row { display:flex; align-items:end; justify-content:space-between; gap:24px; }
.about-section-heading--row > a { color:var(--about-green); font-size:15px; font-weight:700; text-decoration:none; white-space:nowrap; }
.about-team-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-top:38px; }
.about-teacher-card { display:block; padding:12px 12px 18px; color:var(--about-dark); background:#fff; border:1px solid #e0ebe4; border-radius:12px; text-align:center; text-decoration:none !important; transition:transform .2s ease,box-shadow .2s ease; }
.about-teacher-card:hover { color:var(--about-dark); transform:translateY(-5px); box-shadow:0 16px 28px rgba(22,56,41,.13); }
.about-teacher-card__image { height:216px; display:flex; align-items:center; justify-content:center; background:#fff; border-radius:8px; overflow:hidden; }
.about-teacher-card__image img { width:100%; height:100%; object-fit:contain; object-position:center bottom; }
.about-teacher-card__name,.about-teacher-card__role { display:block; }
.about-teacher-card__name { margin-top:15px; font-size:18px; font-weight:700; }
.about-teacher-card__role { margin-top:5px; color:var(--about-green); font-size:13px; }
.about-cta { padding:64px 0; background:linear-gradient(120deg,#dff4e7,#f7fbf8); }
.about-cta__inner { display:flex; align-items:center; justify-content:space-between; gap:36px; }
.about-cta h2 { max-width:770px; }
@media (max-width:991px) { .about-hero__grid,.about-method__grid { grid-template-columns:1fr; gap:38px; } .about-hero__grid { min-height:0; } .about-hero__visual { max-width:620px; } .about-intro__grid { grid-template-columns:1fr; gap:28px; } .about-team-grid { grid-template-columns:repeat(2,1fr); } }
@media (max-width:640px) { .about-container { width:min(100% - 28px,1268px); } .about-hero,.about-intro,.about-method,.about-team { padding:58px 0; } .about-hero h1 { font-size:36px; letter-spacing:-1px; } .about-hero__lead { font-size:16px; } .about-stat-grid,.about-service-grid { grid-template-columns:1fr; } .about-stat-grid { margin-top:38px; } .about-services { padding:58px 0; } .about-method__grid { gap:30px; } .about-team-grid { grid-template-columns:1fr 1fr; gap:10px; } .about-teacher-card { padding:8px 8px 14px; } .about-teacher-card__image { height:155px; } .about-teacher-card__name { font-size:15px; } .about-section-heading--row,.about-cta__inner { align-items:flex-start; flex-direction:column; gap:20px; } .about-cta { padding:48px 0; } }