@import url("https://fonts.googleapis.com/css2?family=Carrois+Gothic&display=swap");@import url("https://fonts.googleapis.com/css2?family=Carrois+Gothic&family=Poiret+One&display=swap");@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300&display=swap");@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100;300;400&display=swap");@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+TC&family=Shippori+Antique+B1&display=swap");.main{padding:0}section{padding:0 100px;margin:200px 0}.project-list{position:relative}.project-list ul{display:flex;-webkit-flex-wrap:wrap;flex-wrap:wrap;-webkit-justify-content:space-between;justify-content:space-between}.project-list li{width:30%;padding:40px 0}.project-list li:nth-child(3n+2){padding-top:120px}.project-block{width:100%}.project-block:hover .project-img img{-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)}.project-block:hover .project-mask{background:rgba(255,255,255,0.5)}.project-block:hover .project-name{color:#fff;background:#000}.project-block:hover .project-name:before{border-right:12px solid #fff}.project-block:hover .project-name:after{background:#000}.project-img{position:relative;width:100%;transform-style:preserve-3d;overflow:hidden;z-index:1;-moz-transition:all .6s;-o-transition:all .6s;-webkit-transition:all .6s;transition:all .6s}.project-img img{width:100%;-moz-transition:-moz-transform .5s;-o-transition:-o-transform .5s;-webkit-transition:-webkit-transform .5s;transition:transform .5s}.project-mask{width:100%;height:100%;background:rgba(255,255,255,0);position:absolute;top:0;-moz-transition:all .5s;-o-transition:all .5s;-webkit-transition:all .5s;transition:all .5s}.project-name{text-align:center;padding:0 20px 5px;color:#000;background:#fff;position:absolute;bottom:0;left:50%;-moz-transform:translateX(-50%);-ms-transform:translateX(-50%);-webkit-transform:translateX(-50%);transform:translateX(-50%);box-shadow:0 20px 20px #000;-moz-transition:all .3s;-o-transition:all .3s;-webkit-transition:all .3s;transition:all .3s}.project-name:before{content:"";position:absolute;top:-12px;left:0;border-top:12px solid transparent;border-right:12px solid #000;width:0;-moz-transition:all .3s;-o-transition:all .3s;-webkit-transition:all .3s;transition:all .3s}.project-name:after{content:"";position:absolute;top:-12px;left:0;width:calc(100% - 12px);height:12px;margin-left:12px;background:#fff;-moz-transition:all .3s;-o-transition:all .3s;-webkit-transition:all .3s;transition:all .3s}.project-list li{opacity:0;-moz-transform:translateY(20px);-ms-transform:translateY(20px);-webkit-transform:translateY(20px);transform:translateY(20px);-moz-transition:opacity 1.2s,-moz-transform 1s;-o-transition:opacity 1.2s,-o-transform 1s;-webkit-transition:opacity 1.2s,-webkit-transform 1s;transition:opacity 1.2s,transform 1s}.project-info,.bg-info{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}.project-list li.show,.project-info.show,.bg-info.show{opacity:1;-moz-transform:translateY(0);-ms-transform:translateY(0);-webkit-transform:translateY(0);transform:translateY(0)}.bg-info{-moz-transform:translate(-50%, -60%);-ms-transform:translate(-50%, -60%);-webkit-transform:translate(-50%, -60%);transform:translate(-50%, -60%)}.bg-info.show{-moz-transform:translate(-50%, -50%);-ms-transform:translate(-50%, -50%);-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%)}@media screen and (max-width: 1100px){.project-list li{width:45%}.project-list li:nth-child(3n+2){padding-top:unset}.project-list li:nth-child(2n){padding-top:80px}}@media screen and (max-width: 840px){section{padding:0 50px}.project-list ul{display:block}.project-list li{width:80%;margin:auto;padding:30px 0}.project-list li:nth-child(2n){padding-top:30px}}@media screen and (max-width: 640px){section{padding:0 30px}.project{margin:100px 0}.project-list li{width:100%}.project-img{width:100%}}