.page-banner::after { background: rgba(0, 55, 94, .3); }
.history-section { position: relative; isolation: isolate; background: var(--pale); min-height: 940px; padding: 80px 0 100px; overflow: hidden; }
.history-background { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .05; z-index: -1; }
.history-section .section-title { text-align: center; }
.history-viewer { margin-top: 109px; }
.history-panel-row { display: grid; grid-template-columns: 70px minmax(0, 1174px) 70px; justify-content: space-between; align-items: center; gap: 48px; }
.history-arrow { width: 70px; height: 70px; border: 0; padding: 0; background: transparent; border-radius: 50%; }
.history-arrow img { width: 70px; height: 70px; }
.history-next img { transform: rotate(180deg); }
.history-arrow:disabled { opacity: .35; cursor: default; }
.history-event { display: flex; align-items: center; gap: 52px; padding: 22px 23px 22px 54px; min-height: 296px; background: rgba(255, 255, 255, .5); }
.history-event[hidden] { display: none; }
.history-copy { min-width: 0; flex: 1; }
.history-year { display: block; color: var(--blue); font-size: 48px; line-height: 62px; font-weight: 700; }
.milestone-title { display: block; font-size: 20px; font-weight: 600; margin-block: 8px; }
.history-copy p { font-size: 18px; line-height: 30px; white-space: pre-line; overflow-wrap: anywhere; }
.history-event > img { width: 36%; max-width: 383px; height: auto; aspect-ratio: 383 / 252; object-fit: cover; flex-shrink: 0; }
.history-timeline { display: flex; overflow-x: auto; gap: 0; margin-top: 114px; padding-bottom: 10px; }
.history-year-button { flex: 1 0 110px; position: relative; padding: 15px 12px 12px; border: 0; border-top: 22px solid #d5dfe6; background: transparent; color: var(--ink); font-size: 20px; line-height: 24px; min-height: 73px; }
.history-year-button:first-child { border-top-left-radius: 20px; }
.history-year-button:last-child { border-top-right-radius: 20px; }
.history-year-button::before { content: ''; position: absolute; width: 22px; height: 22px; border: 1px solid var(--blue); border-radius: 50%; background: white; top: -22px; left: calc(50% - 11px); }
.history-year-button.completed { border-top-color: var(--blue); }
.history-year-button.completed::before { background: var(--blue); }
.history-year-button.active { color: var(--orange); }
.history-year-button.active::before { background: var(--orange); border-color: var(--orange); }
.history-empty { margin: 120px auto; text-align: center; color: #596873; }
@media (max-width: 1500px) {
    .history-panel-row { grid-template-columns: 60px minmax(0, 1fr) 60px; gap: 24px; }
    .history-event { padding: 28px; gap: 28px; }
    .history-arrow, .history-arrow img { width: 60px; height: 60px; }
}
@media (max-width: 1000px) {
    .history-section { min-height: 760px; }
    .history-viewer { margin-top: 60px; }
    .history-panel-row { grid-template-columns: 44px minmax(0, 1fr) 44px; gap: 16px; }
    .history-arrow, .history-arrow img { width: 44px; height: 44px; }
    .history-event { display: block; }
    .history-event > img { width: 100%; margin-top: 24px; }
    .history-timeline { margin-top: 60px; }
}
@media (max-width: 640px) {
    .history-section { padding: 40px 0 56px; min-height: 640px; }
    .history-panel-row { grid-template-columns: 1fr 1fr; gap: 20px; }
    .history-panels { grid-column: 1 / -1; grid-row: 1; }
    .history-previous { justify-self: start; }
    .history-next { justify-self: end; }
    .history-event { padding: 24px; }
    .history-year { font-size: 40px; }
    .history-copy p { font-size: 16px; line-height: 28px; }
    .history-timeline { margin-top: 40px; padding-top: 12px; }
    .history-year-button { font-size: 18px; flex-basis: 88px; padding-top: 28px; min-height: 80px; }
}