.history { overflow: auto; height: 100%; padding-top: 80px; background: linear-gradient(to top, #29483D 20%,#C7363B 50%, rgba(42, 42, 42, 0)); }
.history .history-main-wrap { height: 100%; max-height: 900px; }
.history .history-main-bg { position: relative; z-index: 1; width: 100vw; max-width: 1920px; height: 100%; max-height: 1080px; min-height: 1080px; background: url(../img/svg/history_img01.svg) no-repeat center / 100%; }
.history .history-main-bg h1 { position: absolute; z-index: 1; top: 10%; left: 50%; transform: translate(-50%, -50%); transition: all .25s; font-family: var( --font-noto); font-size: max(8rem, min(5vw, 4rem)); font-weight: 900; letter-spacing: 10px; color: transparent; -webkit-text-stroke: 0.1vw #bdbbc7; text-transform: uppercase; }
.history .history-main-bg h1:hover { color: rgba(255, 255, 255, 0.5); }
.history .history-main-bg h1:active { font-size: calc(max(8rem, min(5vw, 4rem)) - 6px); color: rgba(255, 255, 255, 0.75); }
.history .history-content-wrap { position: relative; z-index: 1; width: 100%; height: 900px; display: grid; place-items: center; background: url(../img/history/lof_red.png) no-repeat center center / 100%; }
.history .history-content-wrap1 { width: 100%; height: 615px; margin-bottom: 5%; display: grid; place-items: center; background: url(../img/history/lof_green.png) no-repeat center center / 100%; }
.history .slider { overflow: hidden; position: relative; z-index: 2; width: 100%; height: 600px; margin: 0 auto; display: grid; place-items: center; }
.history .slider .slide-track { animation: scroll 15s linear infinite; display: flex; gap: 0 3em; width: calc( 25% * 10); }
.history .slider .slide-tracks { animation: scroll 20s linear infinite; display: flex; gap: 0 3em; width: calc( 25% * 10); }
.history .slider .slide-track:hover { animation-play-state: paused; }
.history .slider .slide-tracks:hover { animation-play-state: paused; }
@keyframes scroll { 0% { transform: translateX(30%); } 100% { transform: translateX(calc(-400px * 2.165)); } }
.history .slider .slide { perspective: 150px; width: 50%; height: 50%; display: flex; align-items: center; padding: 0 1.5em; }
.history .slider .slide > img { display: block; width: 100%; transition: transform .5s; }
.history .slider .slide > img:hover { transform: translateZ(5px); }

@media only screen and (max-width: 1350px) {
    .history .history-main-bg { height: 735px; max-height: 735px; min-height: 273px; }
    .history .history-content-wrap { background-position: left center; background-size: 150% 100%; }
    .history .history-content-wrap1 { background-position: left center; background-size: 150% 65%; }
    .history .slider .slide > img { min-width: 500px; }
    .history .slider .slide-track { gap: 0 24em; }
    .history .slider .slide-tracks { gap: 0 24em; }
    @keyframes scroll { 0% { transform: translateX(30%); } 100% { transform: translateX(calc(-400px * 2.78)); } }
}
@media only screen and (max-width: 805px) {
    .history .history-main-bg h1 { top: 20%; }
    .history .history-main-bg { height: 480px; max-height: 480px; min-height: 273px; background-position: bottom; }
    .history .history-content-wrap { background-size: 200% 100%; height: 800px; }
    .history .history-content-wrap1 { background-size: 200% 65%; height: 600px; }
    .history .slider .slide > img { min-width: 400px; }
    .history .slider .slide-track { gap: 0 22em; animation-duration: 6s; }
    .history .slider .slide-tracks { gap: 0 22em; animation-duration: 6s; }
    @keyframes scroll { 0% { transform: translateX(0); } 100% { transform: translateX(calc(-400px * 5.55)); } }
}

@media only screen and (max-width: 432px) {
    .history .history-main-bg { height: 480px; max-height: 380px; min-height: 273px; }
}