.page-about{ --about-primary:#FF8C1A; --about-secondary:#FFA53A; --about-card-bg:#17191F; --about-bg:#0D0E12; --about-text-main:#FFF3E6; --about-text-soft:#ffdcc2; --about-border:#A84F0C; --about-glow:#FFB04D; --about-deep-orange:#D96800; --about-btn-grad:linear-gradient(180deg, #FFA53A 0%, #D96800 100%); display:block; width:100%; max-width:100%; margin:0; padding:0; overflow-x:hidden; background-color:var(--about-bg); color:var(--about-text-main); }
.page-about img{ max-width:100%; height:auto; }
.page-about__container{ width:100%; max-width:1200px; margin:0 auto; padding-left:16px; padding-right:16px; box-sizing:border-box; }
.page-about__section-title,.page-about__mission-title,.page-about__tech-title,.page-about__guide-title,.page-about__cta-title{ max-width:600px; }
.page-about__section-title,.page-about__guide-title{ color:var(--about-primary); font-size:clamp(1.4rem, 2vw, 1.9rem); font-weight:800; line-height:1.3; letter-spacing:.3px; text-align:center; margin:0 auto 10px; }
.page-about__section-desc{ color:var(--about-text-soft); font-size:1rem; line-height:1.6; max-width:700px; margin:0 auto 28px; text-align:center; }
.page-about__hero-section{ background-color:var(--about-bg); padding:16px 16px 24px; }
.page-about__hero-image-wrap{ width:100%; max-width:1200px; margin:0 auto; padding:0; box-sizing:border-box; }
.page-about__hero-image{ display:block; width:100%; height:auto; aspect-ratio:34/10; object-fit:cover; border-radius:12px; border:1px solid var(--about-border); box-shadow:0 8px 18px rgba(0,0,0,.55), 0 0 0 1px rgba(255,140,26,.09); }
.page-about__hero-content{ max-width:760px; margin:22px auto 0; text-align:center; padding:0 4px; }
.page-about__hero-title{ color:var(--about-text-main); font-size:clamp(1.35rem, 2.2vw, 2rem); line-height:1.25; font-weight:800; margin:0 0 10px; }
.page-about__hero-desc{ color:var(--about-text-soft); font-size:1rem; line-height:1.6; max-width:640px; margin:0 auto 18px; }
.page-about__hero-actions{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; }
.page-about__btn{ display:inline-block; max-width:100%; box-sizing:border-box; white-space:normal; word-wrap:break-word; text-align:center; text-decoration:none; border-radius:999px; padding:12px 26px; font-weight:700; font-size:1rem; line-height:1.2; transition:transform .2s, box-shadow .2s; }
.page-about__btn--primary{ background:var(--about-btn-grad); color:#1b1105; border:1px solid rgba(255,255,255,.18); box-shadow:0 4px 10px rgba(217,104,0,.35); }
.page-about__btn--primary:hover{ transform:translateY(-2px); box-shadow:0 6px 14px rgba(255,165,58,.5); }
.page-about__btn--outline{ background:transparent; color:var(--about-primary); border:1px solid var(--about-primary); }
.page-about__btn--outline:hover{ background:rgba(255,140,26,.08); }
.page-about__btn--ghost{ background:transparent; color:var(--about-text-main); border:1px solid var(--about-border); }
.page-about__btn--ghost:hover{ background:rgba(255,140,26,.08); }
.page-about__story-section,.page-about__mission-section{ padding:30px 0 10px; }
.page-about__story-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; width:100%; box-sizing:border-box; padding-bottom:26px; }
.page-about__story-item{ background:var(--about-card-bg); border:1px solid #2c2620; border-radius:12px; padding:16px 14px; display:flex; flex-direction:column; gap:6px; }
.page-about__story-year{ color:var(--about-primary); font-weight:800; font-size:1rem; }
.page-about__story-title{ font-size:1.02rem; color:var(--about-text-main); margin:0; }
.page-about__story-text{ color:var(--about-text-soft); font-size:.9rem; line-height:1.5; margin:0; }
.page-about__mission-section{ padding-bottom:34px; }
.page-about__mission-box{ background:#101117; border:1px solid #2a2117; border-radius:18px; padding:20px; }
.page-about__mission-title{ text-align:center; margin:0 auto 8px; }
.page-about__mission-desc{ text-align:center; color:var(--about-text-soft); margin:0 auto 18px; }
.page-about__mission-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.page-about__mission-item{ background:#17191F; border-radius:12px; padding:16px 12px; text-align:left; border:1px solid #2b1e12; }
.page-about__mission-icon{ font-size:1.8rem; display:block; margin-bottom:8px; }
.page-about__mission-label{ display:block; color:var(--about-primary); font-weight:800; font-size:1rem; margin-bottom:4px; }
.page-about__mission-copy{ color:var(--about-text-soft); font-size:.88rem; line-height:1.5; margin:0; }
.page-about__partner-section{ padding:22px 0 20px; }
.page-about__partner-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px 16px; justify-items:center; padding:0 0 26px; }
.page-about__partner-logo{ width:100%; max-width:240px; aspect-ratio:2/1; object-fit:contain; background:#fff; border-radius:10px; padding:4px 6px; box-sizing:border-box; display:block; }
.page-about__tech-section{ background-color:#101116; border-top:1px solid rgba(168,79,12,.25); padding:34px 0 40px; }
.page-about__tech-section .page-about__container{ display:flex; align-items:center; gap:24px; flex-direction:row; }
.page-about__tech-content{ flex:1; }
.page-about__tech-title{ text-align:left; margin:0 0 12px; }
.page-about__tech-list{ list-style:none; margin:0; padding:0; display:grid; gap:12px; }
.page-about__tech-item{ background:var(--about-card-bg); border-radius:10px; padding:10px 14px; box-sizing:border-box; border-left:3px solid var(--about-primary); }
.page-about__tech-label{ display:block; color:var(--about-primary); margin-bottom:4px; }
.page-about__tech-media{ width:360px; flex-shrink:0; display:flex; flex-direction:column; gap:14px; align-items:flex-start; }
.page-about__tech-cta{ width:auto; }
.page-about__tech-image{ aspect-ratio:2/1; object-fit:cover; border-radius:14px; border:1px solid var(--about-border); width:100%; }
.page-about__commit-section, .page-about__cta-banner{ padding:30px 0 24px; }
.page-about__commit-grid{ display:flex; gap:28px; align-items:center; }
.page-about__commit-image{ width:48%; min-width:268px; aspect-ratio:2/1; object-fit:cover; border-radius:14px; border:1px solid var(--about-border); display:block; }
.page-about__commit-list{ flex:1; display:grid; gap:18px; }
.page-about__commit-item{ background:transparent; border-bottom:1px solid #2d241c; padding-bottom:10px; }
.page-about__commit-title{ color:var(--about-primary); font-size:1.05rem; margin:0 0 4px; }
.page-about__commit-item p{ margin:0; color:var(--about-text-soft); font-size:.9rem; line-height:1.5; }
.page-about__guide-section{ background-color:#101116; border-top:1px solid rgba(168,79,12,.25); padding:30px 0 42px; }
.page-about__guide-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; width:100%; box-sizing:border-box; }
.page-about__guide-item{ margin:0; display:flex; flex-direction:column; gap:10px; align-items:flex-start; }
.page-about__guide-figure-image{ aspect-ratio:2/1; object-fit:cover; border-radius:12px; border:1px solid var(--about-border); width:100%; }
.page-about__guide-caption{ color:var(--about-text-main); font-size:.92rem; line-height:1.5; }
.page-about__faq-section{ padding:34px 0 20px; }
.page-about__faq-item{ background:#141720; border:1px solid var(--about-border); border-radius:10px; padding:10px 14px; margin-bottom:12px; }
.page-about__faq-question{ cursor:pointer; font-weight:600; color:var(--about-text-main); display:block; list-style:none; outline:none; padding:6px 0; }
.page-about__faq-question::before{ content:"+ "; color:var(--about-primary); font-weight:800; }
.page-about__faq-item[open] .page-about__faq-question::before{ content:"− "; }
.page-about__faq-answer{ color:var(--about-text-soft); font-size:.96rem; margin:8px 8px 4px; line-height:1.6; }
.page-about__cta-banner{ background:linear-gradient(180deg, rgba(255,140,26,0.12), rgba(217,104,0,0.12)); }
.page-about__cta-title{ color:var(--about-text-main); text-align:center; margin:0 auto 8px; }
.page-about__cta-desc{ text-align:center; color:var(--about-text-soft); font-size:1rem; margin-bottom:18px; max-width:680px; margin-left:auto; margin-right:auto; }
.page-about__cta-actions{ display:flex; justify-content:center; gap:12px; flex-wrap:wrap; padding-bottom:8px; }
@media (max-width:1024px){ .page-about__story-grid{ grid-template-columns:repeat(2,1fr); gap:14px; } .page-about__mission-grid{ grid-template-columns:repeat(2,1fr); } .page-about__tech-section .page-about__container{ flex-direction:column; align-items:flex-start; gap:18px; } .page-about__tech-media{ width:100%; max-width:660px; margin:0 auto; } .page-about__tech-cta{ margin:0 auto; } .page-about__commit-grid{ flex-direction:column; align-items:flex-start; gap:18px; } .page-about__commit-image{ width:100%; max-width:800px; } .page-about__commit-list{ width:100%; } .page-about__guide-grid{ grid-template-columns:repeat(2,1fr); gap:18px; } .page-about__guide-item:last-child{ grid-column:1 / -1; justify-self:center; max-width:400px; width:100%; } }
@media (max-width:768px){ .page-about{ padding-left:0; padding-right:0; } .page-about__container{ padding-left:12px; padding-right:12px; } .page-about__hero-section{ padding:10px 10px 20px; } .page-about__hero-image{ aspect-ratio:16/9; width:100%; } .page-about__hero-title{ font-size:1.3rem; } .page-about__hero-actions{ width:100%; } .page-about__btn{ width:auto; max-width:100%; } .page-about__btn--primary, .page-about__btn--outline, .page-about__btn--ghost{ padding-left:18px; padding-right:18px; } .page-about__story-grid{ grid-template-columns:1fr; gap:12px; } .page-about__mission-grid{ grid-template-columns:1fr; gap:10px; } .page-about__partner-grid{ grid-template-columns:repeat(3,1fr); gap:12px; } .page-about__partner-logo{ aspect-ratio:2/1; } .page-about__tech-section, .page-about__guide-section{ padding-left:0; padding-right:0; } .page-about__tech-section .page-about__container, .page-about__commit-section .page-about__container, .page-about__guide-section .page-about__container{ padding-left:12px; padding-right:12px; } .page-about__tech-media{ width:100%; max-width:100%; gap:10px; } .page-about__tech-media .page-about__btn{ width:100%; } .page-about__tech-label{ } .page-about__tech-cta{ margin:0; } .page-about__commit-grid{ padding-left:0; padding-right:0; flex-direction:column; } .page-about__commit-image{ width:100%; max-width:100%; aspect-ratio:16/9; margin-bottom:6px; } .page-about__commit-list{ width:100%; flex-direction:column; gap:12px; display:flex; } .page-about__commit-item{ border-bottom:1px solid #34281c; padding-bottom:12px; } .page-about__guide-grid{ grid-template-columns:1fr; gap:20px; } .page-about__guide-item{ max-width:100%; } .page-about__guide-item:last-child{ grid-column:auto; max-width:100%; justify-self:stretch; } .page-about__guide-title{ font-size:1.3rem; margin-bottom:12px; } .page-about__guide-item .page-about__btn{ width:100%; } .page-about__section-title{ font-size:1.3rem; } .page-about__section-desc{ font-size:.9rem; margin-bottom:18px; } .page-about img{ max-width:100%; height:auto; } .page-about__btn{ max-width:100%; box-sizing:border-box; white-space:normal; word-wrap:break-word; } .page-about__cta-actions .page-about__btn{ width:auto; } .page-about__mission-box{ padding:14px; } .page-about__partner-secton{ padding-left:0; padding-right:0; } .page-about__partner-grid{ padding-left:0; padding-right:0; } }
@media (max-width:520px){ .page-about__partner-grid{ grid-template-columns:repeat(2,1fr); gap:8px; padding:0 0 18px; } .page-about__partner-logo{ padding:2px 4px; } .page-about__section-title{ font-size:1.25rem; } .page-about__hero-actions .page-about__btn{ font-size:.9rem; padding:10px 9px; width:48%; } .page-about__tech-list{ gap:8px; } .page-about__tech-item{ font-size:.8rem; } .page-about__tech-label{ font-size:.9rem; } .page-about__story-grid{ gap:8px; } .page-about__cta-desc{ font-size:.9rem; } .page-about__cta-actions{ gap:8px; } .page-about__cta-actions .page-about__btn{ width:100%; } .page-about__commit-grid{ gap:10px; } }