@keyframes slide {
    from { transform: scale(1.2); }
    to { transform: scale(1); }
}
@keyframes fadeIn {
    to { opacity: 1; }
}
.home .section-title { margin-bottom: 64px; line-height: 1.5; }
.home .section-wrap { margin-right: auto; margin-left: auto; max-width: var(--inner); width: 90%; }

.section-visual { overflow: hidden; position: relative; background: #111; }
.section-visual .swiper-slide { height: 100vh; background: #111; }
.section-visual [data-swiper-slide-index="0"] .background .item { transform: scale(1.2); animation: slide ease 5s forwards; }
.section-visual .background { width: 100%; height: 100%; }
.section-visual .background .item { width: 100%; height: 100%; object-fit: cover; }
.section-visual .background-2 { opacity: 0.6; }
.section-visual .context { position: absolute; bottom: 140px; left: 0; right: 0; margin: auto; width: 90%; max-width: var(--inner); }
.section-visual .title { z-index: 2; position: absolute; left: 0; right: 0; bottom: 260px; margin: auto; width: 90%; max-width: var(--inner); }
.section-visual .title .item { width: 630px; height: auto; }
.section-visual .text { line-height: 1.5; font-size: 3.2rem; font-weight: 700; color: #fff; }
.section-visual .word,
.section-visual .char { will-change: transform; }

.section-introduce { position: relative; margin: 0; max-width: none; height: 250vh; }
.section-introduce .sticky { overflow: hidden; position: sticky; top: 0; left: 0; width: 100%; height: 100vh; }
.section-introduce .background { position: absolute; top: 39vh; left: calc(50vw - 710px); width: 31.4vw; height: 22.2vw; object-fit: cover; border-radius: 24px; }
.section-introduce .container {position: relative; margin-right: auto; margin-left: auto; max-width: var(--inner); width: 90%; height: 100%; }
.section-introduce .container-1 { width: 90%; }
.section-introduce .container-2 { z-index: 2; display: flex; align-items: center; position: absolute; top: 0; left: 0; right: 0; padding-top: 100px; height: 100%; }
.section-introduce .section-title {position: absolute; top: 16%; left: 0;}
.section-introduce .context { display: flex; position: absolute; top: 52%; left: 59.5%; }
.section-introduce .context .text { line-height: 1.7; font-size: 2.4rem; font-weight: 700; }
.section-introduce .flex { display: flex; justify-content: space-between; width: 100%; }
.section-introduce .side .title { margin-top: 30px; line-height: 1.5; font-family: var(--font-display); font-size: 4rem; font-weight: 700; color: #fff; }
.section-introduce .contents { display: flex; padding: 40px 18px 40px 40px; background: rgba(0, 0, 0, 0.3); border-radius: 40px; backdrop-filter: blur(30px); }
.section-introduce .contents img { margin-bottom: -10px; }

.section-history { position: relative; padding: 160px 0; }
.section-history .history { position: relative; padding-bottom: 160px; }
.section-history .history .progress { position: absolute; top: 15px; left: 0; right: 0; margin: auto; width: 2px; height: calc(100% - 15px); background: #EEEEEE; }
.section-history .history .progress .bar { position: absolute; top: 0; left: 0; width: 100%; height: 0; background: var(--clr-primary); }
.section-history .history .year { position: relative; margin: 64px 0 26px; line-height: 1; font-family: 'KBFG Display'; font-size: 4rem; font-weight: 700; color: var(--clr-primary); }
.section-history .history .year::before { content: ''; position: absolute; top: 0.265em; left: -136px; width: 12px; height: 12px; background: var(--clr-primary); border-radius: 50%; transition: box-shadow ease .3s; }
.section-history .history .item { display: flex; }
.section-history .history .item:first-child .year { margin-top: 0; }
.section-history .history .side { width: 50%; }
.section-history .history .contents { width: 50%; }
.section-history .context h1 { margin: 20px 0 4px; font-size: 2rem; font-weight: 700; color: var(--clr-dark); }
.section-history .context h1:first-child { margin-top: 0; }
.section-history .context li { position: relative; padding-left: 0.6em; line-height: 1.65; text-indent: -0.6em; color: var(--clr-dark); }
.section-history .context li::before { content: ''; display: inline-block; margin-right: 0.5em; vertical-align: 0.25em; width: 3px; height: 3px; background: var(--clr-dark); border-radius: 50%; }
.section-history .history .item.on .year::before { box-shadow: 0 0 0 8px rgba(252, 176, 23, 0.3); }

.section-program { padding-bottom: 160px; }
.section-program .side { position: relative; margin-bottom: 76px; width: 50%; }
.section-program .sticky { top: 100px; left: 0; }
.section-program .context ul { display: flex; justify-content: space-between; margin: -12px; }
.section-program .context li { padding: 12px; width: 50%; }
.section-program .context .block { display: flex; padding: 48px 40px; height: 100%; background: var(--background); border-radius: 24px; }
.section-program .context .contents { flex: 1 1; padding-left: 40px; }
.section-program .context .title { margin-bottom: 16px; font-size: 2.4rem; font-weight: 700; }
.section-program .context .text { line-height: 1.65; font-size: 1.8rem; font-weight: 300; }

.section-status { padding-bottom: 180px; }
.section-status .title { font-weight: 500; color: #656565; }
.section-status .title b { vertical-align: middle; padding-right: 0.25em; font-size: 4rem; font-weight: 700; color: var(--clr-dark); }
.section-status .grid { display: flex; justify-content: space-between; }
.section-status .col { width: 32.3%; }
.section-status .box { padding: 40px; background: var(--background); border-radius: 24px; }
.section-status .text { text-align: right; margin-top: 142px; font-size: 2.4rem; font-weight: 500; }
.section-status .text b { line-height: 1; vertical-align: -2px; font-size: 9rem; font-weight: 700; color: #FDBF45; letter-spacing: -0.06em; }

@media screen and (min-width: 1025px) {
    .section-history .history .item:nth-child(odd) .contents { padding-left: 130px; }
    .section-history .history .item:nth-child(odd) .side { padding-right: 130px; }
    .section-history .history .item:nth-child(even) { flex-direction: row-reverse; }
    .section-history .history .item:nth-child(even) .side { padding-left: 130px; text-align: right;  }
    .section-history .history .item:nth-child(even) .contents { padding-right: 130px; padding-left: 5%; text-align: right; max-width: 710px; }
    .section-history .history .item:nth-child(even) .year::before { left: auto; right: -136px; }
}
@media screen and (max-width: 1024px) {
    .home .section-title { margin-bottom: 45px; }

    .section-visual .title { bottom: 240px; }
    .section-visual .title .item { width: 420px; }
    .section-visual .context { bottom: 110px; min-height: 90px; }
    .section-visual .text { font-size: 2.6rem; }

    .section-introduce { padding: 100px 0 0; height: auto; }
    .section-introduce .sticky { position: static; height: auto; }
    .section-introduce .container { height: auto; }
    .section-introduce .background { display: none; }
    .section-introduce .section-title { position: static; }
    .section-introduce .container-2 { overflow: hidden; position: static; margin-top: 60px; padding: 60px; background: url('../images/main/indroduce-background.jpg') no-repeat left 80% center / cover; border-radius: 24px; }
    .section-introduce .contents { border-radius: 24px; }
    .section-introduce .context { position: static; }
    .section-introduce .context .text { font-size: 2rem; }
    .section-introduce .flex { display: block; z-index: 2; position: relative; }
    .section-introduce .side .title { margin: 0 0 30px; font-size: 3rem; }

    .section-history { padding: 100px 0; }
    .section-history .history { margin-right: auto; margin-left: auto; padding-bottom: 100px; max-width: var(--inner); width: 90%; }
    .section-history .history .progress { right: auto; left: 5px; }
    .section-history .history .side { display: none; }
    .section-history .history .contents { padding-left: 80px; width: 100%; }
    .section-history .history .year { margin-top: 56px; font-size: 3rem; }
    .section-history .history .year::before { left: -79px; width: 10px; height: 10px; }
    .section-history .context h1 { font-size: 1.8rem; }
    
    .section-program { padding-bottom: 100px; }
    .section-program .context .icon-wrap img { width: 96px; height: auto; }
    .section-program .context .contents { padding-top: 24px; padding-left: 0; }
    .section-program .context .block { flex-direction: column; padding: 36px; text-align: center; }
    .section-program .context .title { margin-bottom: 12px; font-size: 2rem; }
    .section-program .context .text { font-size: 1.6rem; }

    .section-status { padding-bottom: 160px; }
    .section-status .title b { font-size: 3rem; }
    .section-status .text { font-size: 2rem; }
    .section-status .text b { font-size: 5.4rem; }
}
@media screen and (max-width: 768px) {
    .home .section-title { margin-bottom: 35px; }

    .section-visual .title .item { width: 280px; }
    .section-visual .text { font-size: 2.2rem; }

    .section-introduce { padding: 100px 0 0; }
    .section-introduce .container-2 { margin-top: 40px; padding: 36px 16px; border-radius: 12px; background-position: left 95% center; }
    .section-introduce .context .text { font-size: 1.8rem; }
    .section-introduce .contents { padding: 24px 16px; border-radius: 12px; }
    .section-introduce .side .title { margin: 0 0 30px; font-size: 2rem; }

    .section-history { padding: 60px 0; }
    .section-history .history { padding-bottom: 40px; }
    .section-history .history .progress { top: 12px; height: calc(100% - 12px); }
    .section-history .history .contents { padding-left: 40px; }
    .section-history .history .year { margin-top: 46px; margin-bottom: 20px; font-size: 2.4rem; }
    .section-history .history .year::before { left: -38px; width: 8px; height: 8px; }
    .section-history .context h1 { margin-top: 16px; font-size: 1.6rem; }
    
    .section-program { padding-bottom: 60px; }
    .section-program .context ul { flex-direction: column; margin: -6px; }
    .section-program .context li { padding: 6px; width: 100%; }
    .section-program .context .title { margin-bottom: 10px;  font-size: 1.8rem; }
    .section-program .context .text { font-size: 1.5rem; }
    
    .section-status { padding-bottom: 120px; }
    .section-status .grid { flex-direction: column; margin: -6px; }
    .section-status .col { padding: 6px; width: 100%; }
    .section-status .box { padding: 34px; }
    .section-status .title b { font-size: 2.4rem; }
    .section-status .text { margin-top: 30px; font-size: 1.8rem; }
    .section-status .text b { font-size: 3.6rem; }
}
@media screen and (max-width: 500px) {
    .section-visual .title .item { width: 220px; }
    .section-visual .context br { display: none; }

    .section-introduce .container-2 { background-position: left 70% center; }
}