#timeline-bar{max-width:420px}#timeline-bar:before,#timeline-bar:after{content:"";z-index:3;width:50%;max-width:200px;height:100%;display:block;position:absolute;top:0;bottom:0}#timeline-bar:before{background:linear-gradient(90deg,#010101 0%,#01010100 100%);margin-right:22px;right:50%}#timeline-bar:after{background:linear-gradient(90deg,#01010100 0%,#010101 100%);margin-left:22px;left:50%}.nav-button{cursor:pointer;background:#ffffff1f;border:1px solid #0000;border-radius:50%;justify-content:center;align-items:center;width:48px;height:48px;transition:background-color .3s;display:flex}.nav-button:hover{background:0 0;border:1px solid #fff}.year-indicator{color:#fff;opacity:.5;font-family:Inter,sans-serif;font-size:18px;font-weight:500;transition:opacity .3s}.year-indicator.active{opacity:1}.card-container{margin:0 auto;position:relative;overflow:hidden}.scrollable{scrollbar-width:none;overflow:auto}.scrollable::-webkit-scrollbar{display:none}#card-list{max-width:1800px;margin:0 auto;position:relative;overflow:hidden}#card-list:after{content:"";z-index:1000;background:linear-gradient(#010101 0%,#01010100 100%);width:100%;height:114px;display:none;position:absolute;bottom:100px;left:0}.card{z-index:999;opacity:0;transform-origin:50%;cursor:pointer;border:.5px solid #0000;border-radius:24px;width:306px;height:578px;transition:transform .6s ease-out,opacity .6s ease-out,border 1.2s ease-out;position:absolute;left:50%;overflow:hidden}.card:after{content:"";pointer-events:none;background:linear-gradient(#01010100 0%,#010101 100%);border-radius:24px;width:100%;height:50%;transition:all .3s ease-out;position:absolute;bottom:0;left:0}.card img{object-fit:cover;aspect-ratio:9/17;width:100%;height:100%}.card a{display:none}.active-4,.active-3{opacity:0;z-index:-1}.active-2{opacity:.64;z-index:2}.active-1{opacity:.64;z-index:3}.active0{opacity:1;z-index:4;border:.5px solid #fff}.active0:after{opacity:0}.active0 a{z-index:99;display:block}.active1{opacity:.64;z-index:3}.active2{opacity:.64;z-index:2}.active3,.active4{opacity:0;z-index:-1}@media screen and (width>=375px) and (width<=767px){.year-indicator{font-size:14px;line-height:22px}#card-list{height:324px}.card{border-radius:12px;width:150px;height:284px;margin-left:-75px}.card:after{border-radius:12px}.active-4{transform:scale(.43)rotate(-60deg)translate(-954px,-544px)}.active-3{transform:scale(.53)rotate(-45deg)translate(-696px,-270px)}.active-2{transform:scale(.686)rotate(-30deg)translate(-404px,-121px)}.active-1{transform:scale(.843)rotate(-15deg)translate(-179px,-39px)}.active0{transform:scale(1)rotate(0)translate(0)}.active1{transform:scale(.843)rotate(15deg)translate(179px,-39px)}.active2{transform:scale(.686)rotate(30deg)translate(404px,-121px)}.active3{transform:scale(.53)rotate(45deg)translate(696px,-270px)}.active4{transform:scale(.43)rotate(60deg)translate(954px,-544px)}}@media screen and (width>=768px) and (width<=1439px){#card-list{height:491px}.card{border-radius:12px;width:217px;height:411px;margin-left:-108px}.card:after{border-radius:12px}.active-4{transform:scale(.43)rotate(-60deg)translate(-1380px,-788px)}.active-3{transform:scale(.53)rotate(-45deg)translate(-1008px,-391px)}.active-2{transform:scale(.686)rotate(-30deg)translate(-588px,-177px)}.active-1{transform:scale(.843)rotate(-15deg)translate(-259px,-55px)}.active0{transform:scale(1)rotate(0)translate(0)}.active1{transform:scale(.843)rotate(15deg)translate(259px,-55px)}.active2{transform:scale(.686)rotate(30deg)translate(588px,-177px)}.active3{transform:scale(.53)rotate(45deg)translate(1008px,-391px)}.active4{transform:scale(.43)rotate(60deg)translate(1380px,-788px)}}@media screen and (width>=1440px){#card-list{height:678px}.card{width:306px;height:578px;margin-left:-153px}.active-4{transform:scale(.43)rotate(-60deg)translate(-1945px,-1110px)}.active-3{transform:scale(.53)rotate(-45deg)translate(-1420px,-550px)}.active-2{transform:scale(.686)rotate(-30deg)translate(-826px,-250px)}.active-1{transform:scale(.843)rotate(-15deg)translate(-366px,-78px)}.active0{transform:scale(1)rotate(0)translate(0)}.active1{transform:scale(.843)rotate(15deg)translate(366px,-78px)}.active2{transform:scale(.686)rotate(30deg)translate(826px,-250px)}.active3{transform:scale(.53)rotate(45deg)translate(1420px,-550px)}.active4{transform:scale(.43)rotate(60deg)translate(1945px,-1110px)}}
