.lefn-about { --about-ink:#152c23; --about-muted:#65716b; --about-green:#318454; --about-line:#dde6df; color:var(--about-ink); background:#fff; }
.lefn-about *, .lefn-about *::before, .lefn-about *::after { box-sizing:border-box; }
.lefn-about-container { width:min(1280px,calc(100% - 64px)); margin:0 auto; }
.lefn-about-section { padding:110px 0; }
.lefn-about-hero { position:relative; display:flex; align-items:center; justify-content:center; width:100%; height:300px; background:url('/template/index/static/images/lefn-about/9d90395661d7d5ac88ea84e709a43ea4.jpg') center/cover no-repeat; color:#fff; text-align:center; }
.lefn-about-hero::before { position:absolute; inset:0; background:rgba(0,0,0,.3); content:''; }
.lefn-about-hero-inner { position:relative; width:min(900px,calc(100% - 48px)); }
.lefn-about-hero h1 { margin:0; font-size:48px; font-weight:800; line-height:72px; }
.lefn-about-hero p { margin:16px 0 0; font-size:14px; line-height:24px; }
.lefn-about-heading { margin-bottom:44px; text-align:left; }
.lefn-about-heading .en { display:block; margin-bottom:14px; color:var(--about-green); font-size:11px; font-weight:600; letter-spacing:.18em; }
.lefn-about-heading h2 { margin:0; color:#131313; font-size:36px; font-weight:800; line-height:54px; letter-spacing:0; }
.lefn-about-heading h2::after { display:block; width:52px; height:8px; margin-top:16px; background:#18b446; clip-path:polygon(0 0,100% 0,calc(100% - 6px) 100%,0 100%); content:''; }
#introduction { position:relative; }
#introduction > .lefn-about-heading { text-align:left; margin-bottom:48px; }
.lefn-about-intro { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:76px; align-items:center; }
.lefn-about-intro-copy { order:2; padding:6px 0; }
.lefn-about-company { margin-bottom:36px; }
.lefn-about-company-en { display:block; margin-bottom:12px; color:var(--about-green); font-size:11px; font-weight:600; letter-spacing:.18em; text-transform:uppercase; }
.lefn-about-company-cn { margin:0; font-size:28px; font-weight:800; line-height:1.35; color:#131313; letter-spacing:-.01em; }
.lefn-about-company-cn::after { display:block; width:52px; height:8px; margin-top:18px; background:#18b446; clip-path:polygon(0 0,100% 0,calc(100% - 6px) 100%,0 100%); content:''; }
.lefn-about-intro-copy p { margin:0 0 22px; color:var(--about-muted); font-size:15px; line-height:1.95; }
.lefn-about-intro-copy p:first-of-type { color:#33493e; font-size:17px; line-height:1.9; }
.lefn-about-intro-copy p:last-child { margin-bottom:0; }
.lefn-about-intro-images { position:relative; order:1; margin:0 0 40px; padding:0 36px 70px 0; }
.lefn-about-intro-images::before { position:absolute; top:28px; right:12px; bottom:40px; left:28px; border-radius:0; background:#edf3ed; content:''; }
.lefn-about-intro-images img { position:relative; display:block; object-fit:cover; border-radius:0; }
.lefn-about-intro-images img:first-child { width:100%; height:440px; box-shadow:0 20px 48px rgba(23,47,32,.13); }
.lefn-about-intro-images img:nth-child(2) { position:absolute; right:0; bottom:8px; width:57%; height:190px; border:8px solid #fff; border-radius:0; box-shadow:0 16px 40px rgba(23,47,32,.18); }
.lefn-about-intro-images figcaption { position:absolute; bottom:28px; left:0; width:39%; color:#86948b; font-size:11px; line-height:1.8; }
.lefn-about-stats { position:relative; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); margin-top:38px; padding:36px 28px; border:1px solid #edf1ed; border-radius:0; background:#fff; box-shadow:0 16px 50px rgba(23,47,32,.07); }
.lefn-about-stat { padding:0 28px; border-right:1px solid #e5ece6; }
.lefn-about-stat:last-child { border-right:0; }
.lefn-about-stat strong { display:block; font-size:38px; font-weight:500; line-height:1.25; letter-spacing:-.035em; }
.lefn-about-stat span { display:block; margin-top:10px; color:var(--about-muted); font-size:12px; line-height:1.5; }
.lefn-about-culture { background:linear-gradient(135deg,#f5f8f5,#edf2ef); }
.lefn-about-culture > .lefn-about-container { display:grid; grid-template-columns:minmax(0,.65fr) minmax(0,1.35fr); gap:44px 80px; align-items:start; }
.lefn-about-culture .lefn-about-heading { grid-column:1 / -1; margin:0; }
.lefn-culture-lead { margin:12px 0 20px; font-size:28px; font-weight:500; line-height:1.6; }
.lefn-culture-note { max-width:260px; margin:0; color:var(--about-muted); font-size:14px; line-height:1.9; }
.lefn-about-values { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; }
.lefn-about-value { position:relative; min-height:252px; padding:32px; border:1px solid rgba(255,255,255,.85); border-radius:0; background:rgba(255,255,255,.92); box-shadow:0 10px 28px rgba(36,60,44,.045); transition:transform .3s ease,box-shadow .3s ease; }
.lefn-about-value:nth-child(even) { transform:translateY(26px); }
.lefn-about-value::before { position:absolute; top:28px; right:28px; color:#c5d0c8; font-size:12px; letter-spacing:.08em; }
.lefn-about-value:nth-child(1)::before { content:'01'; }
.lefn-about-value:nth-child(2)::before { content:'02'; }
.lefn-about-value:nth-child(3)::before { content:'03'; }
.lefn-about-value:nth-child(4)::before { content:'04'; }
.lefn-about-value img { display:block; width:38px; height:38px; margin-bottom:25px; object-fit:contain; }
.lefn-about-value h3 { margin:0 0 12px; font-size:20px; font-weight:600; line-height:1.5; }
.lefn-about-value p { margin:0; color:var(--about-muted); font-size:14px; line-height:1.85; }
.lefn-about-value:first-child { background:#1ab04b; color:#fff; box-shadow:0 18px 36px rgba(22,135,63,.17); border-color:#1ab04b; }
.lefn-about-value:first-child p { color:#c4d4ca; }
.lefn-about-value:first-child img { filter:brightness(0) invert(1); opacity:.85; }
.lefn-about-value:first-child::before { color:#82a18e; }
.lefn-about-history { position:relative; scroll-margin-top:90px; background:linear-gradient(180deg,#fff 0%,#f7faf7 100%); }
.lefn-about-history-head { display:flex; align-items:flex-end; justify-content:space-between; gap:30px; margin-bottom:64px; }
.lefn-about-history-head .lefn-about-heading { margin:0; }
.about-history-range { padding-bottom:6px; color:#86998c; font-size:13px; letter-spacing:.12em; }
.about-history-timeline { position:relative; margin:0; padding:0; list-style:none; }
.about-history-timeline::before { position:absolute; top:26px; bottom:24px; left:50%; width:1px; background:linear-gradient(#d2dfd4 0%,#afc8b7 80%,transparent 100%); content:''; }
.about-history-item { position:relative; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:112px; align-items:start; padding:0 0 76px; }
.about-history-item:last-child { padding-bottom:0; }
.about-history-node { position:absolute; z-index:1; top:18px; left:50%; display:grid; place-items:center; width:38px; height:38px; transform:translateX(-50%); border:1px solid #c9dace; border-radius:0; background:#f4f8f3; color:#318454; box-shadow:0 0 0 9px #fcfdfb; font-size:11px; letter-spacing:.04em; }
.about-history-copy { position:relative; min-width:0; padding:8px 0 0 24px; }
.about-history-copy::before { position:absolute; top:36px; right:-37px; width:24px; height:1px; background:#c9dace; content:''; }
.about-history-stage { display:block; margin-bottom:12px; color:#64836e; font-size:12px; letter-spacing:.12em; }
.about-history-copy h3 { margin:0 0 25px; color:#214d34; font-size:46px; font-weight:500; line-height:1.15; letter-spacing:-.04em; }
.about-history-copy ul { margin:0; padding:0; list-style:none; }
.about-history-copy li { position:relative; padding:0 0 13px 17px; color:#65746a; font-size:14px; line-height:1.95; }
.about-history-copy li:last-child { padding-bottom:0; }
.about-history-copy li::before { position:absolute; left:0; top:11px; width:4px; height:4px; border-radius:0; background:#90ac97; content:''; }
.about-history-image { position:relative; min-width:0; margin:0 24px 0 0; padding-bottom:22px; }
.about-history-image::before { position:absolute; top:16px; right:-14px; bottom:22px; left:20px; border-radius:0; background:#e8f0e9; content:''; }
.about-history-image img { position:relative; display:block; width:100%; aspect-ratio:16 / 9; object-fit:cover; border-radius:0; box-shadow:0 12px 30px rgba(35,66,44,.07); }
.about-history-image figcaption { position:relative; margin-top:16px; color:#8b9b90; font-size:10px; letter-spacing:.08em; }
.about-history-item:nth-child(even) .about-history-copy { grid-column:2; grid-row:1; padding-left:0; padding-right:24px; }
.about-history-item:nth-child(even) .about-history-copy::before { right:auto; left:-37px; }
.about-history-item:nth-child(even) .about-history-image { grid-column:1; grid-row:1; margin:0 24px 0 0; }
.about-history-item.is-visible .about-history-copy { animation:aboutTimelineIn .65s ease both; }
.about-history-item.is-visible .about-history-image { animation:aboutTimelineIn .8s ease both; }
@keyframes aboutTimelineIn { from { opacity:0; transform:translateY(18px); } to { opacity:1; transform:translateY(0); } }
@media (hover:hover) { .lefn-about-value:hover { box-shadow:0 20px 38px rgba(36,60,44,.1); transform:translateY(-5px); } .lefn-about-value:nth-child(even):hover { transform:translateY(21px); } }
.lefn-about button:focus-visible { outline:2px solid #318454; outline-offset:5px; }
@media (max-width:1100px) {
  .lefn-about-intro { gap:44px; }
  .lefn-about-culture > .lefn-about-container { grid-template-columns:minmax(0,.6fr) minmax(0,1.4fr); gap:38px; }
  .lefn-about-value { padding:26px; }
  .lefn-about-stat { padding:0 18px; }
  .lefn-about-stat strong { font-size:32px; }
}
@media (max-width:768px) {
  .lefn-about-container { width:calc(100% - 40px); }
  .lefn-about-section { padding:70px 0; }
  .lefn-about-hero { height:336px; }
  .lefn-about-hero h1 { font-size:36px; line-height:54px; }
  .lefn-about-heading h2 { font-size:28px; line-height:44px; }
  #introduction > .lefn-about-heading { margin-bottom:34px; }
  .lefn-about-intro { grid-template-columns:1fr; gap:32px; }
  .lefn-about-intro-images { padding:0 18px 66px 0; margin:0; }
  .lefn-about-intro-images img:first-child { height:300px; }
  .lefn-about-intro-images img:nth-child(2) { width:58%; height:136px; border-width:5px; }
  .lefn-about-intro-copy { padding:0; }
  .lefn-about-intro-copy p,.lefn-about-intro-copy p:first-of-type { font-size:15px; line-height:1.9; }
  .lefn-about-company-cn { font-size:22px; }
  .lefn-about-company { margin-bottom:28px; }
  .lefn-about-stats { grid-template-columns:repeat(2,minmax(0,1fr)); gap:26px 0; padding:28px 14px; margin-top:32px; }
  .lefn-about-stat { padding:0 12px; }
  .lefn-about-stat:nth-child(2) { border-right:0; }
  .lefn-about-stat strong { font-size:28px; }
  .lefn-about-stat span { font-size:11px; }
  .lefn-about-culture > .lefn-about-container { grid-template-columns:1fr; gap:36px; }
  .lefn-culture-lead { margin:24px 0 14px; font-size:26px; }
  .lefn-culture-note { max-width:none; }
  .lefn-about-values { gap:14px; }
  .lefn-about-value { min-height:246px; padding:23px 20px; }
  .lefn-about-value h3 { font-size:18px; }
  .lefn-about-value p { font-size:13px; }
  .lefn-about-value:nth-child(even) { transform:translateY(16px); }
  .lefn-about-value::before { right:18px; top:20px; }

}
@media (max-width:370px) { .lefn-about-values { grid-template-columns:1fr; } .lefn-about-value { min-height:0; } .lefn-about-value:nth-child(even) { transform:none; } }
@media (prefers-reduced-motion:reduce) { .lefn-about-value { transition:none; } .about-history-item.is-visible .about-history-copy,.about-history-item.is-visible .about-history-image { animation:none; } }

@media (max-width:1100px) {
  .about-history-item { gap:80px; padding-bottom:64px; }
  .about-history-copy h3 { font-size:38px; }
  .about-history-copy { padding-left:0; }
  .about-history-copy::before { right:-27px; width:16px; }
  .about-history-item:nth-child(even) .about-history-copy { padding-right:0; }
  .about-history-item:nth-child(even) .about-history-copy::before { left:-27px; }
  .about-history-image,.about-history-item:nth-child(even) .about-history-image { margin-right:14px; }
}
@media (max-width:768px) {
  .lefn-about-history-head { align-items:flex-start; margin-bottom:42px; gap:16px; }
  .about-history-range { padding-top:33px; font-size:10px; white-space:nowrap; }
  .about-history-timeline::before { top:24px; bottom:0; left:15px; }
  .about-history-item { grid-template-columns:minmax(0,1fr); gap:24px; padding:0 0 54px 47px; }
  .about-history-node { top:19px; left:15px; width:30px; height:30px; box-shadow:0 0 0 5px #fcfdfb; font-size:9px; }
  .about-history-copy,.about-history-item:nth-child(even) .about-history-copy { grid-column:1; grid-row:1; padding:4px 0 0; }
  .about-history-copy::before { display:none; }
  .about-history-stage { font-size:11px; margin-bottom:11px; }
  .about-history-copy h3 { font-size:32px; margin-bottom:20px; }
  .about-history-copy li { font-size:13px; line-height:1.9; padding-bottom:10px; }
  .about-history-image,.about-history-item:nth-child(even) .about-history-image { grid-column:1; grid-row:2; margin:0 10px 0 0; padding-bottom:0; }
  .about-history-image::before { right:-10px; top:10px; bottom:26px; }
  .about-history-image figcaption { margin-top:12px; font-size:9px; }
}