@import"https://fonts.googleapis.com/css2?family=Inter:wght@200;400;500;600;700&family=Manrope:wght@700;800&family=Noto+Sans+TC&display=swap";:root{font-size:16px}body,html{background-color:#0b0c0e;padding:0;margin:0;font-family:Inter,Noto Sans TC,sans-serif}#app{padding:0;margin:0;height:100vh;width:100%;color:#fff}#app:before{content:"";position:fixed;inset:0;background-color:#0b0c0e;z-index:-9999;pointer-events:none}#app:after{content:"";position:fixed;bottom:0;left:0;right:0;height:50px;background:#0000;background:linear-gradient(0deg,#0b0c0ee6,#0b0c0e00);pointer-events:none}.flex-space{flex-grow:1}a{color:#fff;text-decoration-line:none!important;outline-style:none}.container{max-width:1920px;box-sizing:border-box;padding:80px 80px 0;display:flex;flex-direction:column;align-items:center;margin:0 auto;animation-name:fadeIn;animation-duration:1s}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.header{position:fixed;background:#0000;background:linear-gradient(0deg,#0b0c0e00,#0b0c0ee6 50%);display:flex;flex-direction:row;padding:0 80px;height:80px;width:100%;box-sizing:border-box;z-index:9999;transform:translateY(0);transition:transform .3s}.header .title-conatainer{display:flex;align-items:center}.header .title-conatainer img{height:36px}.header-link-container{display:flex;flex-direction:row;align-items:center;justify-content:center}.header-link-item{position:relative}.header-link{display:inline-block;color:#fff;font-size:18px;padding:0 10px;margin:0;min-width:80px;opacity:1;cursor:pointer;font-weight:400;height:80px;line-height:80px;box-sizing:border-box;text-align:center}.header-link-spliter{content:"|";position:relative;right:0;color:#ffffff1a}.header-link:hover{opacity:.4}.header-link-active{position:relative}.header-link-active:hover{opacity:1}.header-link-active:after{position:absolute;content:"";height:1px;left:8px;right:8px;bottom:20px;background-color:#fff;border-radius:1px;animation:head-link-active-show .2s ease-out}@keyframes head-link-active-show{0%{transform:scaleX(0);opacity:0}to{transform:scaleX(1);opacity:1}}.header .header-link-btn{display:none}.header .header-link-btn-clear{position:absolute;z-index:99999}.header .header-link-container{display:flex;gap:10px}.footer{display:flex;flex-direction:column;align-items:center;justify-content:center;height:200px;padding-top:80px}.footer p{font-weight:200;flex-grow:0;margin:0;padding:5px;text-align:center;font-size:12px;color:#fff3}.footer .link-icon-container{flex-grow:0;display:grid;grid-row:4;grid-template-columns:repeat(4,auto);gap:10px}.footer .link-icon-container .icon{width:20px;height:20px;transition:opacity .15s}.footer .link-icon-container .icon:hover{opacity:.5}.footer .powered-by a{background-color:#fff0;padding:4px;border-radius:4px;color:#ffffffbf;transition:background-color .15s}.footer .powered-by a:hover{background-color:#ffffff0d}.project-view-container{width:100%;padding:0;box-sizing:border-box}.project-view-container .project-view{position:relative;background-color:#ffffff0d;width:100%;height:auto;padding:0;margin:0;overflow:hidden;cursor:pointer}.project-view-container .project-view .media-item{position:absolute;left:0;top:0}.project-view-container .project-view .cover{width:100%;background-color:#0b0c0e;filter:grayscale(.85)}.project-view-container .project-view .hover{width:100%;opacity:0;transform:scale(1);transition:transform 1.2s ease-out,opacity .3s ease-out}.project-view-container .project-view .hover:hover{opacity:1}.project-view-container .project-view .title-container{position:absolute;display:flex;align-items:center;height:80px;bottom:0;left:0;right:0;pointer-events:none;background:#000;background:linear-gradient(0deg,#0b0c0ee6 50%,#0b0c0e00);opacity:0;transition:opacity .5s}.project-view-container .project-view .title-container .title{color:#fff;font-family:Inter;font-size:20px;margin:0;padding:10px 20px}.project-view-container .project-view:hover .title-container{opacity:1}.project-view-container .empty-list-message{text-align:center;padding:100px 0;opacity:.5}.related-project-container .project-view-container{padding:0;gap:20px}.related-project-container{width:100%}.about-container p,.about-container li{font-size:18px;opacity:.8;padding:0;margin:0;line-height:26px}.about-container .draw-view{margin:30px}.about-container .description{text-align:justify}.about-container ul{display:grid;gap:4px;padding-left:0}.about-container ul li{display:flex;align-items:center}.about-container .intro{display:flex;flex-direction:column;gap:10px}.about-container .contact .contact-icon{width:20px;height:20px;margin-right:10px}.project-container{flex-grow:1;width:1200px;max-width:1200px;min-height:100vh}.project-container .project-text-container{box-sizing:border-box;margin:80px 0;padding:0}.project-container .project-text-container.project-view-title{margin:80px 0 20px}.project-container .project-text-container .text-title{font-size:30px;padding:0;margin:0 0 16px}.project-container .project-text-container .text-content{color:#ffffffbf;font-size:18px;padding:0;margin:0 0 10px;word-wrap:break-word;line-height:26px}.project-container .project-text-container .credit-list{position:relative;overflow:hidden;transition:max-height .5s}.project-container .project-text-container .credit-list.fold{max-height:200px;cursor:pointer}.project-container .project-text-container .credit-list.fold:after{content:"";position:absolute;left:0;right:0;bottom:0;height:150px;background:#0b0c0e;background:linear-gradient(0deg,#0b0c0e,#0b0c0e00)}.project-container .project-text-container .credit-list.unfold{max-height:1000px;cursor:pointer}.project-container .project-text-container .credit-list p{font-size:16px;line-height:24px;margin:0}.project-container .project-text-container .credit-more{font-size:16px;cursor:pointer;width:50px;padding:8px;text-align:center;border:1px white solid}.project-container .project-text-container .credit-more:hover{background-color:#fff;color:#000}.project-container .media-container{margin:20px 0}.project-container .media-container .media-img,.project-container .media-container .media-video,.project-container .media-container .media-gif{position:absolute;inset:0;background-color:#ffffff0d;opacity:1;transition:opacity 1s}.project-container .media-container .media-img.loading,.project-container .media-container .media-video.loading,.project-container .media-container .media-gif.loading{opacity:0}.project-container .media-list-container{margin-bottom:20px}.video-container{position:relative;width:1200px;height:675px}.video-container iframe{width:100%;height:100%}.p5-container{width:100%;display:flex;align-items:center;justify-content:center}.media-item{position:relative;opacity:0;transition:transform 1.5s,opacity 1s}.media-item.media-show{opacity:1}.middle{display:flex;justify-content:center}.row{display:flex;flex-direction:row}.grid-c{width:100%;display:grid;gap:20px}.grid-c.grid-c1{grid-row:1;grid-template-columns:repeat(1,auto);grid-template-rows:repeat(auto-fit,auto)}.grid-c.grid-c2{grid-row:2;grid-template-columns:repeat(2,auto);grid-template-rows:repeat(auto-fit,auto)}.grid-c.grid-c3{grid-row:3;grid-template-columns:repeat(3,auto);grid-template-rows:repeat(auto-fit,auto)}.grid-c.grid-c4{grid-row:4;grid-template-columns:repeat(4,auto);grid-template-rows:repeat(auto-fit,auto)}.grid-c.grid-c5{grid-row:5;grid-template-columns:repeat(5,auto);grid-template-rows:repeat(auto-fit,auto)}.grid-c.grid-c6{grid-row:6;grid-template-columns:repeat(6,auto);grid-template-rows:repeat(auto-fit,auto)}.grid-c.grid-c7{grid-row:7;grid-template-columns:repeat(7,auto);grid-template-rows:repeat(auto-fit,auto)}.grid-c.grid-c8{grid-row:8;grid-template-columns:repeat(8,auto);grid-template-rows:repeat(auto-fit,auto)}.grid-c .media-container{margin:0}.split-line{width:100%;border-bottom:solid 1px rgba(255,255,255,.3);padding-bottom:30px}.hide{display:none}.convert-selection p::selection,.convert-selection h1::selection,.convert-selection h2::selection,.convert-selection h3::selection,.convert-selection h4::selection,.convert-selection h5::selection,.convert-selection h6::selection{color:#0b0c0e;background:#fff}h1,h2,h3,h4,h5,h6{font-weight:400}.loading-conatiner{position:absolute;inset:0;display:flex;justify-content:center;align-items:center;pointer-events:none}@media only screen and (max-width: 1200px){.container{width:100%;padding:64px 16px 0}.project-container{width:100%}.project-container .project-text-container{margin:40px 0;padding:0 20px}.project-container .media-container{margin:10px 0}.project-container .media-list-container{margin-bottom:16px}.header{height:64px;background:#0b0c0e;border-bottom:solid 1px rgba(255,255,255,.05);padding:0 0 0 16px;flex-direction:row}.header .title-conatainer{flex-grow:1}.header .flex-space{display:none}.header .header-link-btn{display:inline-block;flex-grow:0;width:64px;cursor:pointer;box-sizing:border-box}.header .header-link-btn img{width:30px;height:30px;box-sizing:border-box;margin:16px}.header .header-link-container{display:none;position:absolute;left:0;top:0;width:100vw;height:100vh;z-index:9999;background-color:#000000d9;flex-direction:column;align-items:center;justify-content:center}.header .header-link-container .header-link{height:50px;line-height:50px;font-size:18px;border:1px solid rgba(255,255,255,.75);background-color:#000c;min-width:160px;margin:10px 0;padding:0 16px}.header .header-link-container .header-link-active{color:#000;background-color:#ffffffbf;border-style:none}.header .header-link-container .header-link-active:after{display:none}.header .header-link-container .header-link-spliter{display:none}.header .header-link-container.m-header-link-container-show{display:flex;animation-name:fadeIn;animation-duration:.15s}.falling-down-header{transform:translateY(-64px)}.project-view-container{padding:0;display:grid;grid-row:1;grid-template-columns:repeat(1,100%);grid-template-rows:repeat(auto-fit,auto)}.project-view-container .project-view .hover,.project-view-container .project-view .title-container{opacity:1}.about-container{margin-top:32px}.about-container .draw-view{margin:0}.video-container{width:100%;height:56.25vw}.grid-c{width:100%;display:grid;gap:16px}.grid-c .media-container{margin:0}.grid-c.m-grid-c1{grid-row:1;grid-template-columns:repeat(1,auto);grid-template-rows:repeat(auto-fit,auto)}.grid-c.m-grid-c2{grid-row:2;grid-template-columns:repeat(2,auto);grid-template-rows:repeat(auto-fit,auto)}.grid-c.m-grid-c3{grid-row:3;grid-template-columns:repeat(3,auto);grid-template-rows:repeat(auto-fit,auto)}.grid-c.m-grid-c4{grid-row:4;grid-template-columns:repeat(4,auto);grid-template-rows:repeat(auto-fit,auto)}.grid-c.m-grid-c5{grid-row:5;grid-template-columns:repeat(5,auto);grid-template-rows:repeat(auto-fit,auto)}.grid-c.m-grid-c6{grid-row:6;grid-template-columns:repeat(6,auto);grid-template-rows:repeat(auto-fit,auto)}.grid-c.m-grid-c7{grid-row:7;grid-template-columns:repeat(7,auto);grid-template-rows:repeat(auto-fit,auto)}.grid-c.m-grid-c8{grid-row:8;grid-template-columns:repeat(8,auto);grid-template-rows:repeat(auto-fit,auto)}.row.m-col{display:flex;flex-direction:column}.m-hide{display:none}}