#articleAbout {position: relative;overflow: hidden;color: #202528;font-family: "Noto Sans TC",Arial,sans-serif;}
#articleAbout * { box-sizing: border-box; }
#articleAbout .aboutWrap {width: 100%;max-width: 100%;margin: 0 auto;}
#articleAbout .aboutHero { position: relative; overflow: hidden; padding: 120px 0 130px; background: linear-gradient(90deg,rgba(18,28,24,.86),rgba(18,28,24,.5)),url('/userfiles/images/about-banner.jpg') center/cover no-repeat; }
#articleAbout .aboutHero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(180deg,rgba(255,255,255,.035) 1px,transparent 1px); background-size: 86px 86px; opacity: .4; }
#articleAbout .aboutHeroInner { position: relative; z-index: 2; width: 86%; max-width: 1280px; margin: 0 auto; }
#articleAbout .aboutEn { margin-bottom: 18px; color: #9bd454; font-size: 14px; font-weight: 900; line-height: 1; letter-spacing: .16em; }
#articleAbout .aboutTitle { margin: 0 0 24px; color: #fff; font-size: clamp(42px,5vw,72px); font-weight: 900; line-height: 1.18; letter-spacing: .08em; }
#articleAbout .aboutTitle::after { content: ""; display: block; width: 88px; height: 3px; margin-top: 28px; border-radius: 999px; background: #71a12d; box-shadow: 0 0 0 8px rgba(113,161,45,.16); }
#articleAbout .aboutHeroText { max-width: 720px; }
#articleAbout .aboutHeroText p { max-width: 580px; margin: 0; color: rgba(255,255,255,.84); font-size: 19px; font-weight: 600; line-height: 2; letter-spacing: .08em; }
#articleAbout .aboutHeroMark { position: absolute; right: 0; bottom: -30px; color: rgba(255,255,255,.06); font-family: Arial,sans-serif; font-size: clamp(70px,11vw,150px); font-weight: 900; line-height: 1; letter-spacing: .02em; }
#articleAbout .aboutIntro {position: relative;padding: 20px 0 20px;background: radial-gradient(circle at 49% 59%, rgb(113 161 45 / 15%), transparent 32%), linear-gradient(180deg, #ffffff 0%, rgb(248 249 246 / 0%) 100%);}
#articleAbout .aboutIntro .aboutWrap {display: grid;grid-template-columns: minmax(0,1fr) 520px;align-items: center;gap: 82px;}
#articleAbout .sectionTag {margin-bottom: 14px;color: #71a12d;font-size: 15px;font-weight: 900;line-height: 1;letter-spacing: .12em;}
#articleAbout .systemTitle .sectionTag{
    font-size: 3rem;
    width: 100%;
    padding: 0 10px;
}
#articleAbout .sectionTitle { color: #202528; font-size: clamp(32px,3.5vw,50px); font-weight: 900; line-height: 1.38; letter-spacing: .06em; }
#articleAbout .sectionTitle::after { content: ""; display: block; width: 74px; height: 3px; margin-top: 26px; border-radius: 999px; background: #71a12d; }
#articleAbout .aboutArticle { margin-top: 34px; }
#articleAbout .aboutArticle p { margin: 0 0 22px; color: rgba(32,37,40,.72); font-size: 16px; font-weight: 500; line-height: 2.15; letter-spacing: .07em; }
#articleAbout .aboutArticle p:last-child { margin-bottom: 0; }
#articleAbout .aboutIntroVisual { position: relative; }
#articleAbout .aboutIntroVisual .mainPhoto { position: relative; overflow: hidden; width: 100%; aspect-ratio: 1/1.08; border-radius: 28px; background-position: center; background-size: cover; background-repeat: no-repeat; box-shadow: 0 28px 70px rgba(31,40,33,.14); }
#articleAbout .aboutIntroVisual .mainPhoto::before {content: "";position: absolute;inset: 0;background: linear-gradient(180deg,rgba(9,16,13,.04),rgba(9,16,13,.24)),linear-gradient(90deg,rgba(113,161,45,.18),transparent 55%);}
#articleAbout .floatCard { position: absolute; left: -42px; bottom: 52px; display: grid; gap: 4px; min-width: 180px; padding: 24px 26px; border: 1px solid rgba(255,255,255,.7); border-radius: 22px; background: rgba(255,255,255,.92); box-shadow: 0 22px 48px rgba(31,40,33,.14); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
#articleAbout .floatCard b { color: #71a12d; font-size: 42px; font-weight: 900; line-height: 1; }
#articleAbout .floatCard span { color: #202528; font-size: 14px; font-weight: 800; letter-spacing: .08em; }
#articleAbout .aboutSystem {position: relative;padding: 80px 0 0;}
#articleAbout .systemTitle {display: grid;grid-template-columns: 340px 1fr;gap: 54px;align-items: center;padding-bottom: 42px;border-bottom: 1px solid rgba(32,37,40,.16);}
#articleAbout .systemContent { display: grid; grid-template-columns: minmax(0,1fr) 460px; gap: 74px; align-items: start; margin-top: 52px; }
#articleAbout .systemText p { margin: 0 0 24px; color: rgba(32,37,40,.72); font-size: 16px; font-weight: 500; line-height: 2.15; letter-spacing: .07em; }
#articleAbout .systemText p:last-child { margin-bottom: 0; }
#articleAbout .systemList { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; }
#articleAbout .systemItem { position: relative; min-height: 150px; padding: 28px 24px; overflow: hidden; border: 1px solid rgba(113,161,45,.18); border-radius: 20px; background: #fff; box-shadow: 0 18px 45px rgba(31,40,33,.06); }
#articleAbout .systemItem::after { content: ""; position: absolute; right: -36px; top: -36px; width: 96px; height: 96px; border: 1px solid rgba(113,161,45,.22); border-radius: 50%; }
#articleAbout .systemItem b { display: block; margin-bottom: 18px; color: #71a12d; font-size: 20px; font-weight: 900; line-height: 1; }
#articleAbout .systemItem strong { display: block; margin-bottom: 10px; color: #202528; font-size: 22px; font-weight: 900; letter-spacing: .08em; }
#articleAbout .systemItem span { display: block; color: rgba(32,37,40,.62); font-size: 14px; font-weight: 600; line-height: 1.7; letter-spacing: .06em; }
#articleAbout .aboutService {position: relative;padding: 80px 0 0px;background: #fff;}
#articleAbout .serviceHead {display: grid;grid-template-columns: minmax(0,1fr) 420px;gap: 64px;align-items: center;margin-bottom: 52px;}
#articleAbout .serviceHead p { margin: 0; color: rgba(32,37,40,.66); font-size: 15px; font-weight: 600; line-height: 2; letter-spacing: .07em; }
#articleAbout .serviceGrid { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 1px; overflow: hidden; border: 1px solid rgba(32,37,40,.12); border-radius: 26px; background: rgba(32,37,40,.1); }
#articleAbout .serviceCard { position: relative; min-height: 280px; padding: 38px 28px; overflow: hidden; background: linear-gradient(180deg,#fff,#f8f9f6); transition: background .35s ease,transform .35s ease; }
#articleAbout .serviceCard::after { content: ""; position: absolute; right: -48px; top: -48px; width: 120px; height: 120px; border: 1px solid rgba(113,161,45,.22); border-radius: 50%; }
#articleAbout .serviceCard span { display: block; margin-bottom: 40px; color: #71a12d; font-size: 24px; font-weight: 900; line-height: 1; }
#articleAbout .serviceCard strong { display: block; min-height: 64px; margin-bottom: 18px; color: #202528; font-size: 21px; font-weight: 900; line-height: 1.45; letter-spacing: .08em; }
#articleAbout .serviceCard strong::after { content: ""; display: block; width: 42px; height: 2px; margin-top: 18px; background: #71a12d; }
#articleAbout .serviceCard p { margin: 0; color: rgba(32,37,40,.66); font-size: 14px; font-weight: 600; line-height: 1.9; letter-spacing: .06em; }

#articleAbout .heatPrinciple {position: relative;padding: 80px 0 20px;}
#articleAbout .principleBox {display: grid;grid-template-columns: minmax(0,1fr) 440px;gap: 72px;align-items: center;padding: 56px;border: 1px solid rgba(255,255,255,.16);border-radius: 30px;background: rgb(20 20 20 / 82%);box-shadow: 0 30px 80px rgba(0,0,0,.22);backdrop-filter: blur(16px);-webkit-backdrop-filter: blur(16px);}
#articleAbout .principleText .sectionTitle,#articleAbout .principleText p { color: #fff; }
#articleAbout .principleText p { margin: 34px 0 0; color: rgba(255,255,255,.78); font-size: 16px; font-weight: 500; line-height: 2.1; letter-spacing: .07em; }
#articleAbout .principleSteps {display: grid;gap: 14px;width: 98%;}
#articleAbout .principleSteps div { position: relative; padding: 26px 28px; border: 1px solid rgba(255,255,255,.16); border-radius: 18px; background: rgba(255,255,255,.08); }
#articleAbout .principleSteps b { display: block; margin-bottom: 10px; color: #9bd454; font-size: 13px; font-weight: 900; letter-spacing: .12em; }
#articleAbout .principleSteps span { display: block; color: #fff; font-size: 19px; font-weight: 900; letter-spacing: .08em; }
@media (max-width:1180px) {
  #articleAbout .aboutWrap,#articleAbout .aboutHeroInner { width: 88%; }
  #articleAbout .aboutIntro .aboutWrap { grid-template-columns: 1fr 440px; gap: 54px; }
  #articleAbout .serviceGrid { grid-template-columns: repeat(3,minmax(0,1fr)); }
  #articleAbout .systemContent { grid-template-columns: 1fr; gap: 44px; }
}
@media (max-width:900px) {
  #articleAbout .aboutHero { padding: 92px 0 100px; }
  #articleAbout .aboutIntro,#articleAbout .aboutSystem,#articleAbout .aboutService,#articleAbout .heatPrinciple { padding: 82px 0; }
  #articleAbout .aboutIntro .aboutWrap,#articleAbout .systemTitle,#articleAbout .serviceHead,#articleAbout .principleBox {grid-template-columns: 1fr;display: flex;flex-direction: column;gap: 25px;}
  #articleAbout .aboutIntroVisual {max-width: 100%;width: 100%;}
  #articleAbout .floatCard { left: 24px; }
  #articleAbout .serviceGrid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  #articleAbout .principleBox { gap: 42px; padding: 42px; }
}
@media (max-width:600px) {
  #articleAbout .aboutWrap,#articleAbout .aboutHeroInner {width: calc(100% - 0px);}
  #articleAbout .aboutHero { padding: 76px 0 82px; }
  #articleAbout .aboutTitle { font-size: 38px; }
  #articleAbout .aboutHeroText p { font-size: 16px; }
  #articleAbout .aboutIntro,#articleAbout .aboutSystem,#articleAbout .aboutService,#articleAbout .heatPrinciple {padding: 36px 0;}
  #articleAbout .sectionTag { font-size: 13px; }
  #articleAbout .sectionTitle {font-size: 28px;}
  #articleAbout .aboutArticle p,#articleAbout .systemText p,#articleAbout .principleText p { font-size: 15px; line-height: 2; }
  #articleAbout .floatCard { position: relative; left: auto; bottom: auto; margin-top: -34px; margin-left: 20px; width: calc(100% - 40px); }
  #articleAbout .systemList,#articleAbout .serviceGrid { grid-template-columns: 1fr; }
  #articleAbout .serviceCard { min-height: auto; }
  #articleAbout .principleBox {padding: 28px 10px;border-radius: 22px;box-shadow: 0 8px 8px rgb(0 0 0 / 24%);}
  
}