.section{position:relative;background:#f1f1f1}.btn{font-size:.75em;margin-top:80px}.btn a{color:#000}.btn a:after{content:"";display:inline-block;vertical-align:middle;margin-left:30px;width:120px;height:1px;background:#ddd;transition:width .6s,background .6s}.btn a:hover{color:#d62323}.btn a:hover:after{width:40px}.btn i{margin-right:10px;animation:arrow 1s infinite}@keyframes arrow{0%{transform:translateX(0px)}50%{transform:translateX(5px)}100%{transform:translateX(0px)}}.slogan{font-size:1.5em;margin:5px 0 40px;line-height:1.2;color:#000}.sub-title{color:#999;margin-bottom:40px}.sub-title .tw{font-size:.875rem;letter-spacing:.1rem}.sub-title .tw:before{content:"";width:1px;height:13px;background:#bbb;margin:0 13px -2px;display:inline-block;transform:rotate(30deg)}.sub-title,.slogan,.text,.btn{transform:translateY(40px);opacity:0}.show .sub-title,.show .slogan,.show .text,.show .btn{opacity:1;transform:translateY(0px);transition:opacity .6s,transform .6s}.show .sub-title{transition-delay:.5s}.show .slogan{transition-delay:.65s}.show .text{transition-delay:.8s}.show .btn{transition-delay:1.1s}.top{height:100vh;background:#fff}.top-photos{position:relative;top:80px;left:30px;height:calc(100% - 110px);width:calc(100% - 60px);opacity:0;transform:translateY(40px);overflow:hidden}.show .top-photos{opacity:1;transform:translateY(0);transition:opacity 1s .5s,transform 1s .5s}.top-photos li{position:absolute;top:0;width:100%;height:100%;background-size:cover;background-position:center;transform:scale(1.2);transition:transform 10s}.top-photos li.show-now{transform:scale(1)}.top-photos li:after{content:"";display:block;width:100%;height:100%;background:#000;opacity:.2}.top-mask{position:absolute;bottom:0;width:100%;height:0;background:#f1f1f1}.show .top-mask{animation:topmask 1s}@keyframes topmask{0%{top:auto;bottom:0;height:0}50%{top:auto;bottom:0;height:100%}51%{top:0;bottom:auto;height:100%}100%{top:0;bottom:auto;height:0}}.about-container{padding:8vw}.about-container-bg{position:absolute;top:8vw;bottom:8vw;left:8vw;width:0%;background:#fff}.show .about-container-bg{width:calc(100% - 8vw);transition:width .6s}.about-wrapper{position:relative;display:flex;flex-direction:row-reverse;justify-content:space-between}.about-img{width:50%;max-width:calc(100% - 360px - 14vw);background-size:cover;background-position:50% center;clip-path:polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%)}.show .about-img{clip-path:polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);transition:clip-path .6s .5s}.about-inner{margin:7vw}.about-text{font-size:.875em}.about-line{position:absolute;top:0;right:8vw;width:1px;height:0;background:#ddd}.show .about-line{transition:height .6s;height:calc(100% - 8vw)}.about-corner{position:absolute;left:100%;bottom:-8vw;background:#999;width:4vw;height:8vw}.show .about-corner{animation:aboutcorner 1s forwards}@keyframes aboutcorner{0%{left:100%;bottom:-8vw;width:4vw}50%{left:100%;bottom:0;width:8vw}100%{left:0;bottom:0;width:8vw}}.process-container-bg{position:absolute;top:0;left:8vw;right:8vw;height:0;background:#fff}.show .process-container-bg{height:100%;transition:height .6s}.process-wrapper{margin:0 8vw;overflow:hidden}.process-inner{margin:7vw}.process-list{display:grid;grid-template-columns:repeat(3, 1fr);text-align:center}.process-item{position:relative;padding-bottom:40px}.process-item:nth-child(1) .process-img:after{width:50%;left:unset;right:0}.process-item:nth-child(3) .process-img:after{width:50%}.process-item:nth-child(4) .process-img:after{width:50%;left:unset;right:0}.process-item:last-child .process-img:after{width:50%}.process-step{color:#000;padding-left:4px;letter-spacing:4px}.process-img{position:relative}.process-img:after{content:"";width:100%;height:1px;border-bottom:1px dashed #ddd;position:absolute;top:50%;left:0;z-index:-1;transform:translateY(-50%)}.process-img img{width:70%;margin:20px auto 0}.consult-container{padding:8vw}.consult-wrapper{padding:0 7vw;max-width:800px;margin:auto;display:flex;align-items:center;justify-content:space-between}.consult-title{margin-bottom:0;color:#000;min-width:150px}.consult-text{font-size:.875rem}.consult-text a{color:#d62323;opacity:.7}.consult-text a:hover{opacity:1}.consult-btn{width:70px;margin:0 100px}.consult-btn a{border-radius:50%;border:#999 solid 1px;display:block;opacity:.7}.consult-btn a:hover{opacity:1}.consult-btn img{width:30px;margin:20px}.work-container-bg{position:absolute;top:0;left:0;width:calc(100% - 8vw);height:0%;background:#fff}.show .work-container-bg{height:100%;transition:height .6s}.work-wrapper{position:relative;margin:0 8vw;display:flex;align-items:center}.work-inner{margin:7vw}.work-list{margin:-1%;overflow:hidden}.work-item{position:relative;float:left;width:31.3333%;margin:1%}.work-img{overflow:hidden}.work-img img{width:100%;transition:transform .6s}.work-name{color:#000;margin:20px 0;font-size:.875em;letter-spacing:3px;text-align:center}.work-view{position:absolute;top:0;width:100%;opacity:0;transition:opacity .6s}.work-view:before{content:"";padding-bottom:100%;display:block;background:#000;opacity:.3}.work-view:after{content:"";width:1px;height:0;top:60%;left:50%;margin-top:10px;position:absolute;background:#ccc;transition:height .6s}.work-view-icon{position:absolute;top:50%;left:50%;width:40px;height:40px;background:#fff;color:#000;text-align:center;line-height:40px;border-radius:50%;margin:-20px 0 0 -20px}.work-item a:hover img{transform:scale(1.2)}.work-item a:hover .work-view{opacity:1}.work-item a:hover .work-view:after{height:40%}.work-line{position:absolute;top:-8vw;left:8vw;width:1px;height:0;background:#ddd;z-index:1}.show .work-line{transition:height .6s;height:calc(100% + 8vw)}.work-corner{position:absolute;right:100%;bottom:-8vw;background:#999;width:8vw;height:8vw}.show .work-corner{animation:workcorner 1s forwards}@keyframes workcorner{0%{right:100%;bottom:-8vw}30%{right:100%;bottom:0}100%{right:0vw;bottom:0}}.article-container{padding:0 8vw 8vw}.article-container-bg{position:absolute;top:0;left:8vw;right:8vw;height:0;background:#fff}.show .article-container-bg{height:calc(100% - 8vw);transition:height .6s}.article-wrapper{overflow:hidden}.article-inner{margin:7vw}.article-list{margin:-1%;overflow:hidden}.article-item{position:relative;float:left;width:46%;margin:2%}.article-img img{width:100%}.article-date{color:#ccc;margin-top:20px;font-size:.8em;letter-spacing:2px}.article-name{color:#000;font-size:.875em;letter-spacing:1px;margin:5px 0}.article-text{font-size:.75em;margin-bottom:20px;overflow:hidden;display:-webkit-box;text-overflow:ellipsis;-webkit-line-clamp:2;-webkit-box-orient:vertical;white-space:normal}.contact-map{position:relative;width:50%;clip-path:polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%)}.show .contact-map{clip-path:polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);transition:clip-path .6s .5s}.contact-map-inner{position:absolute;top:0;width:100%;height:100%}.contact-map iframe{position:absolute;top:0;width:100%;height:100%}.contact-container{padding:8vw 8vw 0}.contact-container-bg{position:absolute;top:8vw;left:8vw;width:0%;height:calc(100% - 8vw);background:#fff}.show .contact-container-bg{width:100%;transition:width .6s}.contact-wrapper{position:relative;display:flex}.contact-inner{margin:7vw;width:calc(50% - 14vw)}.contact-text{font-size:.875em}.contact-text li{display:inline-block;margin-bottom:5px}.contact-text .tt{width:50px;vertical-align:top}.contact-text .ww{width:calc(100% - 55px)}.contact-text .addr{background-color:#666;color:#fff;font-size:14px;padding:4px;border-radius:5px;margin-left:10px;display:inline-table}.contact-text .qr{width:120px;margin-left:-14px}.contact-text .qr img{width:100%}.contact #fb-root{transition:opacity .6s,transform .6s;opacity:1}.contact-line{position:absolute;top:0;right:8vw;width:1px;height:0;background:#ddd}.show .contact-line{transition:height .6s;height:100%}.contact-corner{position:absolute;left:50%;bottom:-8vw;background:#999;width:4vw;height:8vw}.show .contact-corner{animation:contactcorner 1s forwards}@keyframes contactcorner{0%{left:50%;bottom:-8vw;width:4vw}50%{left:50%;bottom:0;width:4vw}100%{left:0;bottom:0;width:8vw}}@media screen and (max-width: 1300px){.top-photos{height:calc(100% - 100px);top:70px}.about-inner{margin:40px}.about-img{max-width:calc(100% - 360px - 80px)}.process-inner,.work-inner,.article-inner{margin:40px}.consult-wrapper{padding:0 40px}.btn{margin-top:60px}.contact-inner{margin:40px;width:calc(50% - 80px)}}@media screen and (max-width: 1100px){.top-photos{width:100%;height:calc(100% - 70px);left:0;top:70px}.about-wrapper{display:block}.about-img{display:none}.process-list{grid-template-columns:repeat(2, 1fr)}.process-item:nth-child(even) .process-img:after{width:50%;left:0;right:unset}.process-item:nth-child(odd) .process-img:after{width:50%;left:unset;right:0}.consult-wrapper{display:block;text-align:center}.consult-title,.consult-text{width:auto}.consult-btn{margin:40px auto}.work-item{width:48%}.contact-wrapper{display:block}.contact-map{width:calc(100% + 8vw);padding-bottom:60vw}.contact-inner{width:auto}}@media screen and (max-width: 800px){.work-inner,.about-inner,.contact-inner,.process-inner,.article-inner{max-width:400px;margin:40px auto}.consult-wrapper{max-width:400px}.process-list{display:block}.process-item{padding-bottom:20px}.process-item:after{content:"";width:1px;height:50px;border-left:1px dashed #ddd;display:block;margin:0 auto}.process-item:last-child:after{display:none}.process-num{font-size:.875rem}.process-step{font-size:.875rem}.process-img:after{display:none}.process-img img{width:100%}.work-list{margin:0}.work-item{width:100%;margin:0 0 40px}.work-item:last-child{margin:0}.article-list{margin:0}.article-item{width:100%;margin:0 0 40px}.article-item:last-child{margin:0}}@media screen and (max-width: 640px){.btn{margin-top:60px}.btn a:after{width:40px}.work-inner,.about-inner,.contact-inner,.process-inner,.article-inner{max-width:none;margin:40px 20px}.consult-container{padding:40px 8vw}.consult-wrapper{max-width:none;padding:0px 20px}.process-item:after{height:40px}.work-item{margin-bottom:20px}.article-item{margin-bottom:20px}.contact-map{padding-bottom:80vw}}