.about-hero {
    position: relative;
    aspect-ratio: 21 / 7;
    margin-bottom: 1.25rem;
    overflow: hidden;
    border-radius: var(--sp-radius);
    background: var(--sp-soft);
}
.about-hero img { width: 100%; height: 100%; display: block; }
.about-hero::after {
    content: "";
    position: absolute;
    inset: 40% 0 0;
    background: linear-gradient(to top, rgba(0, 0, 0, .55), rgba(0, 0, 0, 0));
}
.about-hero-text { position: absolute; left: 1.75rem; right: 1.75rem; bottom: 1.4rem; z-index: 1; color: #fff; }
.about-hero-text span { display: block; font-size: .85rem; font-weight: 600; opacity: .85; }
.about-hero-text h1 { margin: .15rem 0 0; font-size: 1.85rem; font-weight: 700; }

.about-layout { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 1.25rem; align-items: start; }
.about-layout > .sp-card + .sp-card { margin-top: 0; }
.about-content { font-size: 1rem; min-height: 100%; }
.about-content img { max-width: 100%; height: auto; border-radius: 6px; }

.about-fact-list { margin: 0; padding: .25rem 1.25rem; }
.about-fact-list > div { padding: .7rem 0; border-bottom: 1px solid var(--sp-line-soft); }
.about-fact-list > div:last-child { border-bottom: 0; }
.about-fact-list dt { display: flex; align-items: baseline; gap: .45rem; color: var(--sp-muted); font-size: .78rem; font-weight: 600; }
.about-fact-list dt i { width: 13px; text-align: center; font-size: .75rem; color: var(--sp-ink-soft); }
.about-fact-list dd { margin: .2rem 0 0; font-size: .9rem; color: var(--sp-ink); word-break: break-word; }
.about-fact-list dd a { color: var(--sp-ink); text-decoration: none; }
.about-fact-list dd a:hover { text-decoration: underline; }
.about-facts-action { padding: .9rem 1.25rem 1.1rem; border-top: 1px solid var(--sp-line); }

.about-gallery { margin-top: 1.25rem; }
.about-us-banner-slider {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 7;
    overflow: hidden;
    border: 1px solid var(--sp-line);
    border-radius: var(--sp-radius);
    background: var(--sp-soft);
}

@media (max-width: 1199.98px) {
    .about-layout { grid-template-columns: 1fr; }
}

@media (max-width: 767.98px) {
    .about-hero { aspect-ratio: 16 / 9; }
    .about-hero-text { left: 1rem; right: 1rem; bottom: 1rem; }
    .about-hero-text h1 { font-size: 1.4rem; }
    .about-us-banner-slider { aspect-ratio: 4 / 3; }
    .about-facts-action .btn { min-height: 44px; }
}