.classic{position:relative}@media screen and (min-width: 1024px){.classic .wrapper{max-width:960px}}@media screen and (min-width: 1280px){.classic .wrapper{max-width:1024px}}@media screen and (min-width: 1600px){.classic .wrapper{max-width:1600px;padding-inline:0}}.classic-bg{position:absolute;top:0;right:0;bottom:0;left:0}.classic-bg img{width:100%;height:100%;-o-object-fit:cover;object-fit:cover}.classic-index{margin-top:90px;width:100%;position:relative;color:#fff;display:grid;grid-template-rows:auto 1fr;grid-template-columns:100%;height:calc(100vh - 90px)}@media screen and (min-width: 1024px){.classic-index{grid-template-columns:35% 65%}}.classic-index__intro{padding:40px 30px 20px;position:relative;z-index:2;display:flex;flex-direction:column;justify-content:center}.classic-index__intro .intro__title{font-size:1rem;margin-bottom:.5rem;font-weight:400;letter-spacing:1px}@media screen and (min-width: 1024px){.classic-index__intro .intro__title{font-size:1.25rem;margin-bottom:2rem}}.classic-index__intro .intro__desc p{font-family:Noto Sans TC;font-size:.75rem;line-height:1.8;text-align:justify;color:#ffffffe6;margin-bottom:.1rem}@media screen and (min-width: 1024px){.classic-index__intro .intro__desc p{font-size:.875rem;line-height:1.8}}.classic-index__intro .intro__deco-leaf{position:absolute;top:10px;right:10px;width:40px;display:none;animation:berryLeafAni 10s ease-in-out infinite}.classic-index__intro .intro__deco-leaf svg{fill:#b1b479;width:100%}@media screen and (min-width: 1024px){.classic-index__intro .intro__deco-leaf{display:block;top:20%;right:0;width:80px}}.classic-index__intro .intro__deco-circle{display:none;position:absolute;animation:fruitSliceAni 8s ease-in-out infinite}@media screen and (min-width: 1024px){.classic-index__intro .intro__deco-circle{display:block;bottom:10%;left:10%;width:60px}}.classic-index__intro .intro__deco-circle svg{fill:#b1b479;width:100%}.classic-index__main-group{position:relative;display:flex;height:100%;overflow:hidden;justify-content:space-between}@media screen and (min-width: 1024px){.classic-index__main-group{grid-template-columns:30% 60%;align-items:center}}.classic-index__main-group .intro__deco-circle{position:absolute;top:2rem;right:2rem;width:40px;animation:fruitSliceAni 8s ease-in-out infinite}@media screen and (min-width: 1024px){.classic-index__main-group .intro__deco-circle{display:none}}.classic-index__main-group .intro__deco-circle svg{fill:#b1b479;width:100%}.classic-index .timeline-year-swiper{height:100%;width:100%}@media screen and (min-width: 1024px){.classic-index .timeline-year-swiper{height:80%}}.classic-index .timeline-year-swiper .swiper-slide{display:flex;align-items:center;justify-content:flex-end;opacity:.3;transition:all .5s ease;height:80px}@media screen and (min-width: 1024px){.classic-index .timeline-year-swiper .swiper-slide{gap:1rem}}.classic-index .timeline-year-swiper .swiper-slide-active{opacity:1;transform:translate(-24px)}@media screen and (min-width: 1024px){.classic-index .timeline-year-swiper .swiper-slide-active{transform:translate(-40px)}}.classic-index .timeline-year-swiper .swiper-slide-active .year-text{font-weight:400}.classic-index .timeline-year-swiper .swiper-slide-active .year-line{opacity:1}.classic-index .timeline-year-swiper .year-text{font-family:Elms Sans,sans-serif;font-size:1rem;font-weight:300;color:#fff;text-align:right}@media screen and (min-width: 425px){.classic-index .timeline-year-swiper .year-text{font-size:1.25rem}}@media screen and (min-width: 1024px){.classic-index .timeline-year-swiper .year-text{font-size:1.75rem}}.classic-index .timeline-year-swiper .year-line{display:block;height:1px;background:#fff;width:15px;margin-left:10px;transition:all .4s}@media screen and (min-width: 1024px){.classic-index .timeline-year-swiper .year-line{width:2rem}}.classic-index__timeline{position:relative;height:50vh;width:35%;display:flex;align-items:center}@media screen and (min-width: 1024px){.classic-index__timeline{width:30%;height:calc(100vh - 90px)}}.classic-index__timeline .timeline__curve-container{position:absolute;top:0;bottom:0;height:100%;right:-1rem;z-index:5;display:flex;align-items:center;justify-content:center;pointer-events:none}@media screen and (min-width: 1024px){.classic-index__timeline .timeline__curve-container{right:-44px}}.classic-index__timeline .timeline__curve-img{height:100%;-o-object-fit:fill;object-fit:fill}.classic-index__timeline .timeline__nav-btn{position:absolute;top:50%;right:-3rem;transform:translate(-50%,-50%);width:32px;height:32px;border:3px solid #fff;border-radius:50%;background:#b1b479;display:flex;align-items:center;justify-content:center;z-index:10;cursor:pointer}@media screen and (min-width: 1024px){.classic-index__timeline .timeline__nav-btn{right:-45%;width:40px;height:40px}}.classic-index__timeline .timeline__nav-btn i{border:solid #4d5139;border-width:0 1px 1px 0;display:inline-block;padding:3px;transform:rotate(135deg);margin-left:2px}.classic-index__content{width:50%;height:50vh;display:flex;flex-direction:column;justify-content:center;position:relative}@media screen and (min-width: 1024px){.classic-index__content{height:100%;margin-inline:auto 0}}.classic-index__content .content__wrapper{position:relative;z-index:5;width:100%;max-width:500px}.classic-index__content .content__header{margin-bottom:1.5rem;display:flex;flex-direction:column;gap:.5rem;font-family:Libre Baskerville,serif;font-size:.875rem;line-height:1}@media screen and (min-width: 768px){.classic-index__content .content__header{font-size:1rem}}@media screen and (min-width: 1024px){.classic-index__content .content__header{font-size:1.5rem}}.classic-index__content .timeline-content-swiper{width:100%;height:auto}.classic-index__content .content-slide{width:100%}.classic-index__content .project-info-group{display:flex;flex-direction:column;gap:.5rem}@media screen and (min-width: 425px){.classic-index__content .project-info-group{gap:1rem}}@media screen and (min-width: 1024px){.classic-index__content .project-info-group{padding-top:2rem;max-width:300px}}.classic-index__content .project-year-display{display:flex;align-items:baseline;flex-direction:column;gap:.25rem;font-family:Elms Sans,sans-serif;font-size:.825rem;font-weight:300}@media screen and (min-width: 768px){.classic-index__content .project-year-display{font-size:1rem}}@media screen and (min-width: 1024px){.classic-index__content .project-year-display{font-size:1.25rem;flex-direction:row;justify-content:space-between}}.classic-index__content .project-card{flex:1;position:relative;display:flex;align-items:center;min-height:80px;width:80%;border-block:1px solid #6c6a2d}.classic-index__content .project-card:before{content:"";position:absolute;top:0;left:0;width:0;height:100%;transition:all .3s ease;background-color:#6c6a2d}.classic-index__content .project-card.show:hover:before{right:0;left:auto;width:100%}.classic-index__content .project-card.show:hover .project-card__text{transform:translate(10px)}@media screen and (min-width: 1024px){.classic-index__content .project-card{padding:2rem 0;width:100%}}.classic-index__content .project-card__text{position:relative;transition:transform .3s ease}@media screen and (min-width: 1024px){.classic-index__content .project-card__text{padding-right:0}}.classic-index__content .project-card .project-name{font-family:Noto Sans TC;font-size:1rem;margin-bottom:.5rem;font-weight:300}@media screen and (min-width: 768px){.classic-index__content .project-card .project-name{font-size:1.25rem}}@media screen and (min-width: 1024px){.classic-index__content .project-card .project-name{font-size:1.75rem;margin-bottom:1rem;letter-spacing:1px}}.classic-index__content .project-card .project-loc{font-family:Noto Sans TC;font-size:.625rem}@media screen and (min-width: 768px){.classic-index__content .project-card .project-loc{font-size:.75rem}}@media screen and (min-width: 1024px){.classic-index__content .project-card .project-loc{font-size:.875rem}}.classic-index__content .content__deco-branch{position:absolute;bottom:-4%;right:2rem;width:100px;animation:branchSwayAni 12s ease-in-out infinite}.classic-index__content .content__deco-branch svg{fill:#b1b479;width:100%}@media screen and (min-width: 1024px){.classic-index__content .content__deco-branch{bottom:10%;right:10%;width:120px}}@keyframes berryLeafAni{0%{transform:rotate(0)}50%{transform:rotate(15deg)}to{transform:rotate(0)}}@keyframes fruitSliceAni{0%{transform:scale(1) rotate(0)}50%{transform:scale(1.05) rotate(5deg)}to{transform:scale(1) rotate(0)}}@keyframes branchSwayAni{0%{transform:rotate(0)}33%{transform:rotate(-8deg)}66%{transform:rotate(5deg)}to{transform:rotate(0)}}