@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");.about-block,.contact-info{display:flex;-webkit-align-items:center;align-items:center;-webkit-justify-content:center;justify-content:center}section{padding:0 100px;margin-bottom:200px}.about{margin:-200px 0 200px}.about-block{position:relative;margin:200px 0}.about-block.normal .about-img:before{right:0}.about-block.normal .about-info{padding:0 2vw 0 calc(100px + 2vw)}.about-block.anti{-webkit-flex-flow:row-reverse;flex-flow:row-reverse}.about-block.anti .about-img:before{left:0}.about-block.anti .about-info{padding:0 calc(100px + 2vw) 0 2vw}.about-img{position:relative}.about-img img{width:100%}.about-img:before,.about-img:after{content:"";position:absolute;width:100%;height:100%}.about-img:before{background:#fff;-moz-transition:width .6s;-o-transition:width .6s;-webkit-transition:width .6s;transition:width .6s}.about-img:after{opacity:0;top:0;left:0;box-shadow:0 0 5px #aaa;-moz-transition:all .6s .3s;-o-transition:all .6s .3s;-webkit-transition:all .6s;-webkit-transition-delay:.3s;transition:all .6s .3s}.about-title{position:relative;margin-bottom:50px}.about-title h3{display:flex;-webkit-align-items:flex-end;align-items:flex-end;color:#bb9b6e;font-weight:normal;letter-spacing:.25em}.about-title h4{display:flex;-webkit-align-items:baseline;align-items:baseline;color:#888;font-weight:normal}.about-title-line{width:80px;height:1px;margin:0 0 5px 5px;background:#bb9b6e}.about-title-tri{width:6px;height:6px;margin:15px 10px 0 20px;border-top:double 3px #888;border-right:solid 1px #888;-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);-webkit-transform:rotate(45deg);transform:rotate(45deg)}.about-in{position:relative}.about-in p{margin:15px 0}.about-photo{position:relative;height:42vw;margin:0 -100px;background-size:cover;background-position:50% 65%;-moz-transition:all .6s;-o-transition:all .6s;-webkit-transition:all .6s;transition:all .6s;-webkit-filter:contrast(.85) saturate(.9) brightness(.95);filter:contrast(.85) saturate(.9) brightness(.95)}.about-photo:before{content:"";position:absolute;width:100%;height:100%;bottom:0;background:#fff;-moz-transition:height .8s .4s;-o-transition:height .8s .4s;-webkit-transition:height .8s;-webkit-transition-delay:.4s;transition:height .8s .4s}.about-photo.shadow{-webkit-filter:contrast(.85) saturate(.9) brightness(.8);filter:contrast(.85) saturate(.9) brightness(.8)}.work-block{position:relative;display:flex;-webkit-flex-flow:wrap;flex-flow:wrap}.work-item{width:calc(33.33% - 40px);margin:0 20px}.work-item:hover .work-img:before{opacity:1}.work-item:hover .work-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)}.work-item:nth-child(2){margin-top:80px}.work-img{position:relative;margin:0 0 20px 0;overflow:hidden}.work-img img{width:100%;-moz-transition:all .6s;-o-transition:all .6s;-webkit-transition:all .6s;transition:all .6s}.work-img:before{content:"View";position:absolute;top:50%;left:50%;color:#fff;padding:10px 5px;border-radius:50%;border:solid 1px #fff;opacity:0;z-index:1;-moz-transform:translate(-50%, -50%);-ms-transform:translate(-50%, -50%);-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%);-moz-transition:opacity .6s;-o-transition:opacity .6s;-webkit-transition:opacity .6s;transition:opacity .6s}.work-img:after{content:"";position:absolute;width:100%;height:100%;top:0;left:0;box-shadow:0 0 5px #aaa}.work-info{font-size:1.1em}.work-info p{margin:5px 0}.work-info p:nth-child(2){letter-spacing:5px}.contact-block{position:relative}.contact-map{position:relative;width:auto;height:350px;margin:0 -100px;box-shadow:0 0 1px #bb9b6e;z-index:1}.contact-map .map{width:100%;height:100%}.contact-info{position:relative;width:fit-content;padding:50px 100px;margin:50px auto;border-bottom:solid 1px #ddd}.contact-info:before{content:"";position:absolute;width:1px;height:calc(100% + 150px);top:-120px;left:60px;background:#bb9b6e}.contact-title{position:relative}.contact-title h3{color:#bb9b6e;font-weight:normal;letter-spacing:.25em}.contact-title h4{display:flex;-webkit-align-items:baseline;align-items:baseline;color:#888;font-weight:normal;writing-mode:vertical-lr}.contact-title-line{display:block;width:1px;height:100px;margin:5px 0 0 3px;background:#bb9b6e}.contact-title-tri{width:6px;height:6px;border-top:double 3px #888;border-right:solid 1px #888;-moz-transform:rotate(-45deg);-ms-transform:rotate(-45deg);-webkit-transform:rotate(-45deg);transform:rotate(-45deg)}.contact-title-tri:nth-child(1){margin:30px 0 0}.contact-title-tri:nth-child(2){margin:0 0 5px}.contact-in{position:relative;margin-left:50px}.contact-in ul{margin-top:80px}.contact-in li{margin:5px 0}.contact-in p{max-width:272px;margin-top:50px;color:#666}.contact-in span{display:inline-block;width:20px;margin:0 10px 0 0;text-align:center}.about-info{opacity:0;-moz-transform:translateY(20px);-ms-transform:translateY(20px);-webkit-transform:translateY(20px);transform:translateY(20px);-moz-transition:all .6s;-o-transition:all .6s;-webkit-transition:all .6s;transition:all .6s}.about-img,.work-block,.work-item,.contact-map,.contact-info{opacity:0;-moz-transform:translateY(-20px);-ms-transform:translateY(-20px);-webkit-transform:translateY(-20px);transform:translateY(-20px);-moz-transition:all .6s;-o-transition:all .6s;-webkit-transition:all .6s;transition:all .6s}.about-img.show,.about-info.show,.work-block.show,.work-item.show,.contact-map.show,.contact-info.show{opacity:1;-moz-transform:translateY(0);-ms-transform:translateY(0);-webkit-transform:translateY(0);transform:translateY(0)}.about-img.show:before{width:0}.about-img.show:after{opacity:1}.about-photo{-moz-transition:all .6s;-o-transition:all .6s;-webkit-transition:all .6s;transition:all .6s}.about-photo.show:before{height:0}.work-item.show:nth-child(1){-moz-transition-delay:.3s;-o-transition-delay:.3s;-webkit-transition-delay:.3s;transition-delay:.3s}.work-item.show:nth-child(2){-moz-transition-delay:.6s;-o-transition-delay:.6s;-webkit-transition-delay:.6s;transition-delay:.6s}.work-item.show:nth-child(3){-moz-transition-delay:.9s;-o-transition-delay:.9s;-webkit-transition-delay:.9s;transition-delay:.9s}@media screen and (min-width: 1401px){.about-img{width:40vw}}@media screen and (max-width: 1100px){section{margin-bottom:200px}.top-control{display:none;opacity:0;-moz-transition:opacity .6s;-o-transition:opacity .6s;-webkit-transition:opacity .6s;transition:opacity .6s}.about{margin:-200px 0 -100px}.about-block.normal{display:block}.about-block.normal .about-img{width:calc(100% + 20px - 280px - 20px);margin:0 0 0 -100px}.about-block.normal .about-info{max-width:420px;margin:-60px 0 0 auto;padding:20px 0 0 0;border-top:solid 1px #aaa;text-align:end}.about-block.normal .about-info p:nth-child(1){width:280px;margin:0 0 0 auto}.about-block.normal .about-info p:nth-child(2){width:100%}.about-block.anti .about-img{margin:0 -100px 0 100px}.about-block.anti .about-info{margin:-20px 0;padding:0}.work-block{-webkit-flex-flow:column;flex-flow:column;padding:40px 30px;box-shadow:0 0 5px #aaa;background:#f6f6f6}.work-item{display:flex;-webkit-align-items:center;align-items:center;width:100%;margin:0}.work-item:hover .work-img img{-moz-transform:scale(1.1) translateY(-10%);-ms-transform:scale(1.1) translateY(-10%);-webkit-transform:scale(1.1) translateY(-10%);transform:scale(1.1) translateY(-10%)}.work-item:nth-child(2){-webkit-flex-flow:row-reverse;flex-flow:row-reverse;margin-top:unset}.work-img{width:50%;height:38vw;margin:0}.work-img img{-moz-transform:translateY(-10%);-ms-transform:translateY(-10%);-webkit-transform:translateY(-10%);transform:translateY(-10%)}.work-info{width:calc(50% - 60px);margin:30px;text-align:center}}@media screen and (max-width: 900px){section{padding:0 100px}.about-block.normal .about-img{width:100%;margin:0}.about-block.normal .about-info{max-width:unset;padding:0;margin:30px 0 0 0;border-top:unset;text-align:left}.about-block.normal .about-info p:nth-child(1){width:auto}.about-block.anti{display:block}.about-block.anti .about-img{margin:0}.about-block.anti .about-info{margin:30px 0 0 0}.contact-block{border-top:unset}.contact-inner{width:calc(100% - 200px);background:transparent}}@media screen and (max-width: 840px){.contact-info{width:100%;padding:50px 0;margin:50px 0}.contact-info:before{height:calc(100% + 120px);left:0}}@media screen and (max-width: 720px){section{margin-bottom:0}.about{margin:-100px 0 0}.about-block{margin:0 0 100px}.about-block.normal .about-img{width:100%;margin:0}.about-block.normal .about-info{max-width:unset;width:100%;margin:30px 0 0 0;padding:0;text-align:left;border-top:unset}.about-block.normal .about-info p:nth-child(1){width:auto}.about-photo{height:350px}.work{padding:0}.work-block{padding:0}.contact-info{-webkit-justify-content:space-evenly;justify-content:space-evenly;width:100%;padding:50px 0;margin:0 0 50px 0}.contact-info:before{opacity:0}}@media screen and (max-width: 640px){section{padding:0 30px}.about{margin:0}.about-title{padding:100px 0}.about-info{padding:50px 0 0}.about-photo.shadow{-webkit-filter:unset;filter:unset}.work{margin:100px 0;padding:0 30px}.work-block{width:300px;margin:auto;box-shadow:unset;background:transparent}.work-item{-webkit-flex-flow:column;flex-flow:column}.work-item:nth-child(2){-webkit-flex-flow:column;flex-flow:column}.work-item:hover .work-img img{-moz-transform:translateY(0) scale(1.1);-ms-transform:translateY(0) scale(1.1);-webkit-transform:translateY(0) scale(1.1);transform:translateY(0) scale(1.1)}.work-img{width:100%;height:auto}.work-img img{-moz-transform:translateY(0);-ms-transform:translateY(0);-webkit-transform:translateY(0);transform:translateY(0)}.work-info{width:calc(100% - 60px);margin:10px 30px 30px;font-size:1em}.contact-in{margin-left:0}}@media screen and (max-width: 450px){.work-block{width:100%}.contact-info{-webkit-flex-flow:column;flex-flow:column;-webkit-align-items:unset;align-items:unset}.contact-in{margin:auto}}
