﻿.intro{position:fixed;top:0;left:0;z-index:20;background-image:url(../images/bg.jpg);width:100%;height:100%}.intro-logo{position:absolute;top:50%;left:50%;width:160px;-moz-transform:translate(-50%, -50%);-ms-transform:translate(-50%, -50%);-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%)}.intro-logo.disappear{opacity:0}.intro-logo img{width:100%}.intro-pic svg{width:100%;height:48.48px}.intro-pic #img{opacity:0;-moz-transition:opacity .8s .1s;-o-transition:opacity .8s .1s;-webkit-transition:opacity .8s;-webkit-transition-delay:.1s;transition:opacity .8s .1s}.show-intro .intro-pic #img{opacity:1}.intro-pic #tw{opacity:0;-moz-transform:translateY(30px);-ms-transform:translateY(30px);-webkit-transform:translateY(30px);transform:translateY(30px);-moz-transition:opacity .8s .6s,-moz-transform .8s .6s;-o-transition:opacity .8s .6s,-o-transform .8s .6s;-webkit-transition:opacity .8s,-webkit-transform .8s;-webkit-transition-delay:.6s,.6s;transition:opacity .8s .6s,transform .8s .6s}.show-intro .intro-pic #tw{opacity:1;-moz-transform:translateY(0);-ms-transform:translateY(0);-webkit-transform:translateY(0);transform:translateY(0)}.intro-pic #en{opacity:0;-moz-transform:translateY(30px);-ms-transform:translateY(30px);-webkit-transform:translateY(30px);transform:translateY(30px);-moz-transition:opacity .8s 1.2s,-moz-transform .8s 1.2s;-o-transition:opacity .8s 1.2s,-o-transform .8s 1.2s;-webkit-transition:opacity .8s,-webkit-transform .8s;-webkit-transition-delay:1.2s,1.2s;transition:opacity .8s 1.2s,transform .8s 1.2s}.show-intro .intro-pic #en{opacity:1;-moz-transform:translateY(0);-ms-transform:translateY(0);-webkit-transform:translateY(0);transform:translateY(0)}.top-img li{position:absolute;top:0;width:100%;height:100%;background-position:center;background-size:cover;-moz-transition:-moz-transform 8s;-o-transition:-o-transform 8s;-webkit-transition:-webkit-transform 8s;transition:transform 8s}.top-img li:nth-child(1){background-position:70% 60%;width:105%;-moz-transform:translateX(0);-ms-transform:translateX(0);-webkit-transform:translateX(0);transform:translateX(0)}.top-img li:nth-child(1).show-img{-moz-transform:translateX(-5%);-ms-transform:translateX(-5%);-webkit-transform:translateX(-5%);transform:translateX(-5%)}.top-img li:nth-child(2){background-position:30% 60%;-moz-transform:scale(1.08);-ms-transform:scale(1.08);-webkit-transform:scale(1.08);transform:scale(1.08)}.top-img li:nth-child(2).show-img{-moz-transform:scale(1);-ms-transform:scale(1);-webkit-transform:scale(1);transform:scale(1)}.top-img li:last-child{background-position:50% 80%;height:108%;-moz-transform:translateY(0);-ms-transform:translateY(0);-webkit-transform:translateY(0);transform:translateY(0)}.top-img li:last-child.show-img{-moz-transform:translateY(-7%);-ms-transform:translateY(-7%);-webkit-transform:translateY(-7%);transform:translateY(-7%)}.top-slogan li{position:absolute;font-size:1rem;width:fit-content;font-family:"Lora",Arial,Helvetica;color:#FFF;text-shadow:0 0 5px #666;z-index:5;-moz-transition:opacity .6s;-o-transition:opacity .6s;-webkit-transition:opacity .6s;transition:opacity .6s}.top-slogan li.show-text .top-t,.top-slogan li.show-text .top-b{clip-path:polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%)}.top-slogan li:nth-child(1){bottom:25%;left:15%}.top-slogan li:nth-child(1) .top-t{margin-left:-30%}.top-slogan li:nth-child(2){bottom:25%;right:10%}.top-slogan li:nth-child(2) .top-t{margin-left:-25%}.top-slogan li:last-child{bottom:23%;left:12%}.top-slogan li:last-child .top-t{margin-left:-15%}.top-t{margin-bottom:15px;clip-path:polygon(100% 0%, 100% 0%, 100% 100%, 100% 100%);-moz-transition:clip-path .6s;-o-transition:clip-path .6s;-webkit-transition:clip-path .6s;transition:clip-path .6s}.top-b{clip-path:polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);-moz-transition:clip-path .6s;-o-transition:clip-path .6s;-webkit-transition:clip-path .6s;transition:clip-path .6s}.top-big{font-size:1.625rem}.top-word{display:none}.about-inner{padding:0 50px;width:calc(90% - 100px);margin:0 auto}.about-wrap{display:-ms-flexbox;display:flex;-webkit-justify-content:center;justify-content:center;-webkit-align-items:center;align-items:center}.about-img{width:18%;max-width:260px;filter:contrast(.5);opacity:0;-moz-transform:scale(.7);-ms-transform:scale(.7);-webkit-transform:scale(.7);transform:scale(.7);-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}.about-img.show{opacity:1;-moz-transform:scale(1);-ms-transform:scale(1);-webkit-transform:scale(1);transform:scale(1)}.about-img img{width:100%;opacity:.2}.about-content{width:50%;margin-right:12%}.about-text span{display:block}.bg{padding-bottom:0}.bg-img{width:100%;height:35vw;background-image:url(../images/index/bg.jpg);background-attachment:fixed;background-size:cover;background-repeat:no-repeat;background-position:50% 50%}.project{background:rgba(110,98,80,0.1)}.project-inner{padding:0 50px;width:calc(90% - 100px);margin:0 auto}.project-title{padding:0 10px}.project-list{display:-ms-flexbox;display:flex;-webkit-flex-wrap:wrap;flex-wrap:wrap;-webkit-justify-content:space-between;justify-content:space-between}.project-list li{width:33%;position:relative;opacity:0;-moz-transform:translateX(30px);-ms-transform:translateX(30px);-webkit-transform:translateX(30px);transform:translateX(30px);-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{opacity:1;-moz-transform:translateX(0);-ms-transform:translateX(0);-webkit-transform:translateX(0);transform:translateX(0)}.project-list li.show:nth-child(2){-moz-transition-delay:.2s;-o-transition-delay:.2s;-webkit-transition-delay:.2s;transition-delay:.2s}.project-list li.show:last-child{-moz-transition-delay:.4s;-o-transition-delay:.4s;-webkit-transition-delay:.4s;transition-delay:.4s}.project-list li:after{content:"";width:0%;height:100%;background:#111;position:absolute;top:0;left:0;z-index:-1;-moz-transition:width .6s;-o-transition:width .6s;-webkit-transition:width .6s;transition:width .6s}.project-list li:hover:after{width:100%}.project-list li:hover .project-img{filter:saturate(1) brightness(1)}.project-list a{padding:10px;display:block}.project-img{filter:saturate(.5) brightness(.8);transition:filter .6s}.project-img img{width:100%}.project-content{padding-top:10px}.project-type{font-size:.85rem;margin-bottom:3px;letter-spacing:.1rem;color:#cf3b3b}.project-name{color:#FFF;letter-spacing:.12rem}.slogan{margin:100px 0 100px}.slogan-inner{padding:0 50px;width:calc(90% - 100px);margin:0 auto}.slogan-text{color:#FFF;text-align:center}.slogan-text .en{font-size:1.375rem;font-family:"Lora",Arial,Helvetica}.slogan-text .tw{font-size:1rem;font-family:"Noto Sans TC","微軟正黑體","Microsoft JhengHei",sans-serif;padding-top:10px}.service{position:relative;padding:150px 0}.service-bg{position:absolute;bottom:0;left:0;width:85%;height:100%;background-image:url(../images/wood.jpg);background-repeat:no-repeat;background-size:cover;background-position:50% 50%;z-index:-1;filter:brightness(.15)}.service-inner{padding:0 50px;width:calc(90% - 100px);margin:0 auto}.service-title{margin-bottom:70px}.service-container{display:-ms-flexbox;display:flex;-webkit-align-items:center;align-items:center;background:#000;clip-path:polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%);-moz-transition:clip-path .6s;-o-transition:clip-path .6s;-webkit-transition:clip-path .6s;transition:clip-path .6s}.service-container.show{clip-path:polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%)}.service-image{width:65%}.service-image li{overflow:unset !important}.service-image .swiper-slide{overflow:unset !important}.service-image .swiper-slide-prev{margin-right:-.5% !important}.service-image .swiper-slide-next{margin-left:1% !important}.service-image .swiper-slide-active{margin-left:unset !important;margin-right:unset !important}.service-slide-img{width:100.5%;filter:grayscale(1);position:relative}.service-slide-img img{width:100%}.service-process{width:35%}.service-content{padding:0 50px}.service-num{font-size:.85rem;color:#cf3b3b;font-family:"Lora",Arial,Helvetica;font-weight:500;text-transform:uppercase}.service-step{color:#FFF;padding:10px 0;letter-spacing:.2rem;font-weight:bold}.service-text{font-size:1rem}.service-text p{padding-top:3px}.service .swiper-container{position:relative;overflow:hidden}.service .swiper-container ul{position:relative}.service .swiper-container li{position:relative;margin:auto;overflow:hidden}.service .swiper-container .swiper-slide{width:auto;overflow:hidden}.service-page{display:-ms-flexbox;display:flex;-webkit-justify-content:space-between;justify-content:space-between;width:100%;position:absolute;top:calc(50% + 62px);-moz-transform:translateY(-50%);-ms-transform:translateY(-50%);-webkit-transform:translateY(-50%);transform:translateY(-50%)}.service-pv{margin-left:-3vw}.service-pv .service-arrow:before{border-left:1px solid #cf3b3b;border-bottom:1px solid #cf3b3b;position:absolute;top:43%;right:-1vw;-moz-transform:rotate(45deg) translateY(-50%);-ms-transform:rotate(45deg) translateY(-50%);-webkit-transform:rotate(45deg) translateY(-50%);transform:rotate(45deg) translateY(-50%)}.service-nt{margin-right:-3vw}.service-nt .service-arrow:before{border-right:1px solid #cf3b3b;border-top:1px solid #cf3b3b;position:absolute;top:43%;left:-3vw;-moz-transform:rotate(45deg) translateY(-50%);-ms-transform:rotate(45deg) translateY(-50%);-webkit-transform:rotate(45deg) translateY(-50%);transform:rotate(45deg) translateY(-50%)}.service-arrow{width:6vw;height:6vw;border:1px solid #555;border-radius:50%;background:#000;position:relative;cursor:pointer;-moz-transition:-moz-transform .3s;-o-transition:-o-transform .3s;-webkit-transition:-webkit-transform .3s;transition:transform .3s}.service-arrow:hover{-moz-transform:scale(.9, .9);-ms-transform:scale(.9, .9);-webkit-transform:scale(.9, .9);transform:scale(.9, .9)}.service-arrow:before{content:"";width:3vw;height:3vw}@media screen and (max-width: 1400px){.about-content{width:65%}.about-img{width:23%}}@media screen and (max-width: 1100px){.top-slogan li{text-align:center;width:calc(100% - 100px)}.top-slogan li:nth-child(1){bottom:unset;top:50%;left:50%;-moz-transform:translate(-50%, -50%);-ms-transform:translate(-50%, -50%);-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%)}.top-slogan li:nth-child(1) .top-t{margin-left:unset}.top-slogan li:nth-child(2){bottom:unset;right:unset;left:50%;top:50%;-moz-transform:translate(-50%, -50%);-ms-transform:translate(-50%, -50%);-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%)}.top-slogan li:nth-child(2) .top-t{margin-left:unset}.top-slogan li:last-child{bottom:unset;top:50%;left:50%;-moz-transform:translate(-50%, -50%);-ms-transform:translate(-50%, -50%);-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%)}.top-slogan li:last-child .top-t{margin-left:unset}.top-text{width:fit-content;margin:0 auto}.top-t,.top-b{-moz-transition:clip-path 1.2s;-o-transition:clip-path 1.2s;-webkit-transition:clip-path 1.2s;transition:clip-path 1.2s}.top-big{font-size:1.375rem}.about-inner{padding:0 35px;width:calc(90% - 70px)}.about-wrap{position:relative}.about-content{width:100%;margin-right:unset}.about-img{width:40%;max-width:250px;position:absolute;top:-5%;right:0;-moz-transform:scale(.8);-ms-transform:scale(.8);-webkit-transform:scale(.8);transform:scale(.8)}.bg-img{height:45vw;background-attachment:scroll;clip-path:polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%);-moz-transition:clip-path .6s;-o-transition:clip-path .6s;-webkit-transition:clip-path .6s;transition:clip-path .6s}.bg-img.show{clip-path:polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%)}.project-inner{padding:0 35px;width:calc(80% - 70px)}.project-title{padding:0 15px}.project-list{display:block}.project-list li{width:100%}.project-list li.show:nth-child(2),.project-list li.show:last-child{-moz-transition-delay:0s;-o-transition-delay:0s;-webkit-transition-delay:0s;transition-delay:0s}.project-list a{padding:15px}.project-name{font-size:1rem}.slogan-inner{padding:0 35px;width:calc(90% - 70px)}.service-bg{width:80%}.service-inner{padding:0 35px;width:calc(90% - 70px)}.service-container{-webkit-flex-flow:column;flex-flow:column;-moz-transition:clip-path 1s;-o-transition:clip-path 1s;-webkit-transition:clip-path 1s;transition:clip-path 1s}.service-image{width:100%}.service-image li{overflow:hidden !important}.service-image .swiper-slide{overflow:hidden !important}.service-image .swiper-slide-prev{margin-right:auto !important}.service-image .swiper-slide-next{margin-left:auto !important}.service-image .swiper-slide-active{margin-left:auto !important;margin-right:auto !important}.service-slide-img{overflow:hidden;width:100%}.service-process{width:100%}.service-process .swiper-slide{height:260px;display:-ms-flexbox;display:flex;-webkit-flex-flow:column;flex-flow:column;-webkit-justify-content:center;justify-content:center}.service-page{top:calc(50% + 13vw)}}@media screen and (max-width: 800px){.service-container{-moz-transition:clip-path .8s;-o-transition:clip-path .8s;-webkit-transition:clip-path .8s;transition:clip-path .8s}}@media screen and (max-width: 640px){.intro-logo{width:140px}.intro-pic svg{height:43.3px}.top-slogan li{font-size:1rem;width:fit-content}.top-slogan li.show-text .top-l,.top-slogan li.show-text .top-r{clip-path:polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%)}.top-slogan li.show-text .top-line{opacity:1}.top-text{display:none}.top-word{display:block}.top-l{clip-path:polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%);-moz-transition:clip-path .6s;-o-transition:clip-path .6s;-webkit-transition:clip-path .6s;transition:clip-path .6s}.top-r{clip-path:polygon(0% 100%, 100% 100%, 100% 100%, 0% 100%);-moz-transition:clip-path .6s;-o-transition:clip-path .6s;-webkit-transition:clip-path .6s;transition:clip-path .6s}.top-line{display:inline-block;width:1px;height:15px;background:#FFF;margin:0 10px -2px;opacity:0;-moz-transform:rotate(30deg);-ms-transform:rotate(30deg);-webkit-transform:rotate(30deg);transform:rotate(30deg);-moz-transition:opacity .6s;-o-transition:opacity .6s;-webkit-transition:opacity .6s;transition:opacity .6s}.about-inner{width:auto;padding:0 30px}.about-img{top:-10%;min-width:120px}.bg-img{height:380px;background-position:20% 50%}.project-inner{width:auto;padding:0 30px}.project-list li:after{display:none}.project-list a: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-img{overflow:hidden}.project-img img{-moz-transition:-moz-transform .6s;-o-transition:-o-transform .6s;-webkit-transition:-webkit-transform .6s;transition:transform .6s}.slogan{margin:60px 0}.slogan-inner{width:auto;padding:0 30px}.slogan-text .en{font-size:1.25rem}.service{padding:80px 0}.service-bg{width:100%;opacity:.2}.service-inner{width:auto;padding:0 30px}.service-title{margin-bottom:50px}.service-container{display:block;background:unset;clip-path:polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%)}.service-image,.service-page{display:none}.service-process .swiper-slide{height:unset}.service-content{padding:0 0 0 45px;position:relative}.service-num{position:absolute;top:22px;left:-20px;-moz-transform:rotate(90deg);-ms-transform:rotate(90deg);-webkit-transform:rotate(90deg);transform:rotate(90deg)}.service-step{padding:0 0 10px}.service .swiper-container ul{display:block}.service .swiper-container li{padding-bottom:40px;position:relative;opacity:0;-moz-transform:translateY(30px);-ms-transform:translateY(30px);-webkit-transform:translateY(30px);transform:translateY(30px);-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}.service .swiper-container li.show{opacity:1;-moz-transform:translateY(0px);-ms-transform:translateY(0px);-webkit-transform:translateY(0px);transform:translateY(0px)}.service .swiper-container li:before{content:"";width:1px;height:calc(100% - 75px);background:#bbb;position:absolute;bottom:7px;left:8px}.service .swiper-container li:last-child{padding-bottom:unset}.service .swiper-container li:last-child:before{height:calc(100% - 70px);bottom:0}}
