@import url("https://fonts.googleapis.com/css2?family=Poppins&display=swap");@import url("https://fonts.googleapis.com/css2?family=Open+Sans+Condensed:wght@300&display=swap");@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@300;400&display=swap");@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+TC&family=Shippori+Antique+B1&display=swap");.type-list{display:flex;-webkit-align-items:center;align-items:center;-webkit-justify-content:center;justify-content:center}.main{margin:100vh 0 0;background:#fff}.type-list-r,.type-list-c{color:#aaa;padding:5px 25px;margin:30px 10px;background:#fff;border:solid 1px #ddd;position:relative}.type-list-r.active,.type-list-c.active{color:#666;background:#eee;border:solid 1px #bbb}.type-list-r:hover .en,.type-list-c:hover .en{opacity:0}.type-list-r:hover .tw,.type-list-c:hover .tw{opacity:1}.type-list-r .en,.type-list-c .en{opacity:1;-moz-transition:opacity .3s ease-in-out;-o-transition:opacity .3s ease-in-out;-webkit-transition:opacity .3s ease-in-out;transition:opacity .3s ease-in-out}.type-list-r .tw,.type-list-c .tw{position:absolute;top:50%;left:50%;opacity:0;-moz-transform:translate(-50%, -50%);-ms-transform:translate(-50%, -50%);-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%);-moz-transition:opacity .3s ease-in-out;-o-transition:opacity .3s ease-in-out;-webkit-transition:opacity .3s ease-in-out;transition:opacity .3s ease-in-out}.project-list{position:relative}.project-list ul{padding:10%;display:flex;-webkit-flex-flow:wrap;flex-flow:wrap;overflow:hidden}.project-list li{position:relative;width:50%;opacity:0;-moz-transition:all .6s ease-in-out;-o-transition:all .6s ease-in-out;-webkit-transition:all .6s ease-in-out;transition:all .6s ease-in-out}.project-list li.show{opacity:1}.project-list li:hover .project-photo-in{-moz-transform:scale(1.1, 1.1);-ms-transform:scale(1.1, 1.1);-webkit-transform:scale(1.1, 1.1);transform:scale(1.1, 1.1);-webkit-filter:grayscale(0) contrast(1);filter:grayscale(0) contrast(1)}.project-list li:hover .project-info-in h4{letter-spacing:.3em}.project-list li:hover .project-info-in span{-moz-transform:scale(1, 1);-ms-transform:scale(1, 1);-webkit-transform:scale(1, 1);transform:scale(1, 1)}.project-list li:nth-child(4n-1) .project-block,.project-list li:nth-child(4n) .project-block{-webkit-flex-flow:row-reverse;flex-flow:row-reverse}.project-block{position:relative;display:flex}.project-block:before{content:"";position:absolute;width:calc(100% - 16px);height:calc(100% - 16px);top:7px;left:7px;border:solid 1px #eee;z-index:1}.project-photo{position:relative;width:50%;box-shadow:0 0 10px #ddd;overflow:hidden;-moz-transition:all .4s ease-in-out;-o-transition:all .4s ease-in-out;-webkit-transition:all .4s ease-in-out;transition:all .4s ease-in-out}.project-photo-in{width:100%;height:calc(20vw - 3px);background-position:center;background-size:cover;-webkit-filter:grayscale(1) contrast(1.1);filter:grayscale(1) contrast(1.1);-moz-transition:all .4s ease-in-out;-o-transition:all .4s ease-in-out;-webkit-transition:all .4s ease-in-out;transition:all .4s ease-in-out}.project-photo-bg{position:absolute;width:100%;height:100%;top:0;left:0;background:#eee;-moz-transform:scale(0, 1);-ms-transform:scale(0, 1);-webkit-transform:scale(0, 1);transform:scale(0, 1)}.project-info{position:relative;display:flex;-webkit-align-items:center;align-items:center;-webkit-justify-content:center;justify-content:center;width:50%;background:#eee;box-shadow:inset 0 0 10px #ddd;-moz-transition:all .4s;-o-transition:all .4s;-webkit-transition:all .4s;transition:all .4s}.project-info-in{max-width:240px;padding:20px;-moz-transition:-moz-transform .4s .4s;-o-transition:-o-transform .4s .4s;-webkit-transition:-webkit-transform .4s;-webkit-transition-delay:.4s;transition:transform .4s .4s}.project-info h4{position:relative;font-size:1.05em;font-weight:normal;letter-spacing:.15em;text-shadow:1px 1px 5px #eee;z-index:1;-moz-transition:all .4s;-o-transition:all .4s;-webkit-transition:all .4s;transition:all .4s}.project-info .moving{position:absolute;width:100%;height:100%;top:0;left:0;-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);-webkit-transform:rotate(45deg);transform:rotate(45deg)}.project-info span:nth-child(1),.project-info span:nth-child(2){position:absolute;width:1px;height:calc(50% - 60px);left:50%;z-index:1;background:#aaa;-moz-transform:scale(1, 0);-ms-transform:scale(1, 0);-webkit-transform:scale(1, 0);transform:scale(1, 0);-moz-transition:all .4s;-o-transition:all .4s;-webkit-transition:all .4s;transition:all .4s}.project-info span:nth-child(1){top:0;-moz-transform-origin:top center;-ms-transform-origin:top center;-webkit-transform-origin:top center;transform-origin:top center}.project-info span:nth-child(2){bottom:0;-moz-transform-origin:bottom center;-ms-transform-origin:bottom center;-webkit-transform-origin:bottom center;transform-origin:bottom center}.type-list-r,.type-list-c{opacity:0;-moz-transform:translateY(-20px);-ms-transform:translateY(-20px);-webkit-transform:translateY(-20px);transform:translateY(-20px);-moz-transition:opacity .6s,-moz-transform .6s;-o-transition:opacity .6s,-o-transform .6s;-webkit-transition:opacity .6s,-webkit-transform .6s;transition:opacity .6s,transform .6s}.type-list-r.show,.type-list-c.show{opacity:1;-moz-transform:translateY(0);-ms-transform:translateY(0);-webkit-transform:translateY(0);transform:translateY(0)}.tt,.bb,.ll,.rr{position:relative}.tt:after,.bb:after,.ll:after,.rr:after{content:"";position:absolute;width:100%;height:100%;background:#eee;-moz-transition:all .4s;-o-transition:all .4s;-webkit-transition:all .4s;transition:all .4s}.tt:after{top:0;left:0}.tt.show:after{height:0}.bb:after{bottom:0;left:0}.bb.show:after{height:0}.ll:after{top:0;left:0}.ll.show:after{width:0}.rr:after{top:0;right:0}.rr.show:after{width:0}@media screen and (max-width: 1500px){.project-list ul{padding:10% 50px}.project-photo-in{height:calc(23vw - 1px)}}@media screen and (max-width: 1100px){.project-list ul{padding:10%}.project-list li{width:100%}.project-list li:nth-child(4n-2) .project-block{-webkit-flex-flow:row-reverse;flex-flow:row-reverse}.project-list li:nth-child(4n-1) .project-block{-webkit-flex-flow:row;flex-flow:row}.project-photo-in{height:calc(40vw - 7px)}}@media screen and (max-width: 640px){.project-list ul{padding:10% 30px}.project-list li{margin:0 0 30px}.project-list li:nth-child(4n-2) .project-block,.project-list li:nth-child(4n-1) .project-block,.project-list li:nth-child(4n) .project-block{-webkit-flex-flow:column;flex-flow:column}.project-list li:last-child{margin:0}.project-block{-webkit-flex-flow:column;flex-flow:column}.project-block:before{display:none}.project-photo{width:100%}.project-photo-in{height:60vw;-webkit-filter:grayscale(0) contrast(1);filter:grayscale(0) contrast(1)}.project-info{width:100%;box-shadow:unset}}