@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&family=Cormorant+Infant:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap");@import url("https://fonts.googleapis.com/css2?family=Cormorant+Infant&family=Noto+Serif+TC:wght@200;300;400;500;600;700;900&display=swap");.top{position:fixed;top:0;width:100%;height:100vh}.top-img{position:relative;height:100%;overflow:hidden;background-size:cover;background-position:center center}.top-img::after{position:absolute;content:"";z-index:1;left:0;top:0;width:100%;height:100%;background:rgba(35,24,21,0.6)}.top-title{font-weight:normal;color:#fff;position:absolute;width:90%;top:50%;left:5%;text-align:center;z-index:2;opacity:0;transform:translateY(-50%);clip-path:polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);transition:opacity .6s,clip-path 1s}.top-title.show{opacity:1;clip-path:polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%)}.top-title .catch{font-size:1rem}.top-title .subCatch{font-size:1.2rem;text-transform:uppercase}.top-title .subCatch::before{content:"|";margin:0 10px}.main{margin-top:100vh;position:relative;z-index:6;background:#fafafa}@media screen and (min-width: 992px){.top-title .catch{font-size:1.25rem}.top-title .subCatch{font-size:1.45rem}}.project-select{margin:0 1rem 8%;display:flex;-webkit-align-items:center;align-items:center;-webkit-justify-content:center;justify-content:center;-webkit-flex-direction:column;flex-direction:column}.project-select li{min-width:50px;text-align:center;color:#423936;cursor:pointer;padding:10px 0;position:relative}.project-select li .en,.project-select li .tw{-moz-transition:opacity .3s;-o-transition:opacity .3s;-webkit-transition:opacity .3s;transition:opacity .3s}.project-select li .en{font-size:1.25rem}.project-select li .tw{position:absolute;white-space:nowrap;opacity:0;top:12px;left:50%;font-size:1rem;-moz-transform:translateX(-50%);-ms-transform:translateX(-50%);-webkit-transform:translateX(-50%);transform:translateX(-50%)}.project-select li .tw:after{content:"";width:0;height:1px;background:#231815;position:absolute;bottom:-5px;left:0;-moz-transition:width .3s;-o-transition:width .3s;-webkit-transition:width .3s;transition:width .3s}.project-select li:hover .en{opacity:0}.project-select li:hover .tw{opacity:1}.project-select li:hover .tw:after{width:100%}.project-select li.show{color:#231815}.project-select li.show .en{opacity:0}.project-select li.show .tw{opacity:1}.project-select li.show .tw:after{width:100%}.project-img{position:relative;overflow:hidden;padding-bottom:300px}.project-img-inner{position:absolute;top:0;width:100%;height:100%;background-size:cover;background-position:center;-moz-transition:-moz-transform .6s;-o-transition:-o-transform .6s;-webkit-transition:-webkit-transform .6s;transition:transform .6s}.project-content{position:relative;margin-top:1rem}.project-text{font-size:1rem;font-family:"Cormorant Infant","Noto Serif TC",serif}.project-text::before{content:"|";margin:0 10px}.project-text .en{font-family:"Cormorant Infant";font-weight:600}.project-classification{font-size:1.15rem;margin-bottom:5px;color:#A09B9A}.project-list{margin:1rem;display:grid}.project-item{position:relative;color:#423936;width:100%;margin-bottom:4rem;-moz-transition:-moz-transform .6s;-o-transition:-o-transform .6s;-webkit-transition:-webkit-transform .6s;transition:transform .6s}.project-item:last-child{margin-bottom:0}@media screen and (min-width: 768px){.project-list{margin:0;grid-template-columns:repeat(2, 1fr);gap:2rem}.project-img-inner{-webkit-filter:grayscale(.7);filter:grayscale(.7)}.project-item:hover{color:#000}.project-item:hover .project-img-inner{filter:grayscale(0)}}@media screen and (min-width: 992px){.project-select{-webkit-flex-direction:row;flex-direction:row;gap:2rem}.project-list{grid-template-columns:repeat(3, 1fr);margin:0 auto}.project-img{padding-bottom:500px}.project-item{grid-column:span 1}.project-item::before{width:0%}.project-item:nth-child(4n){grid-column:span 2}.project-item:nth-child(4n-3){grid-column:1/span 2}}