@import './reset.css';
*{margin: 0;padding: 0;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}
html, body{height: 100%;width: 100%;}body{font-family: 'Microsoft Sans Serif',Aria,"Adobe 黑体 Std","微軟正黑體","蘋方","標楷體",sans-serif;background-color: #fff;color: #221815;line-height: 1.5;scroll-behavior: smooth;}
h1{font-size: min(max(2.8vw, 30px), 36px);}
h2{font-size: min(max(2.2vw, 28px), 32px);}
h3,.h3{font-size: min(max(1.6vw, 24px), 28px);}
h4{font-size: min(max(1.4vw, 20px), 24px);}
h5,.h5,.content p,.content span{font-size: min(max(1.2vw, 18px), 22px);}
h6,.h6{font-size: min(max(1vw, 16px), 20px);}
p{font-size: min(max(.8vw, 14px), 18px);}
textarea{resize: none;outline: none;font-size: large;/*清除瀏覽器預設*/}
input,select{font-size: inherit}select{appearance:none;-moz-appearance:none;-webkit-appearance:none;background: url("http://ourjs.github.io/static/2015/arrow.png") no-repeat scroll right center transparent;padding-right: 14px;}/*清除瀏覽器預設*/
input,select{height: 30px;vertical-align:middle;outline: none;/*清除瀏覽器預設*/}
button{cursor: pointer;font-size: inherit;color: inherit;}a{text-decoration: none;color: inherit;}
img,label{vertical-align: middle}
table{max-width: 100%;table-layout: fixed;}
#ad_sign .cleintCaseItem *{transition: all .3s ease}
.schematic [class^="imgBtn"]{filter: brightness(.9);transition: all .5s linear}
.schematic [class^="imgBtn"].lighter,#ad_sign .cleintCaseItem:hover .btn{filter: brightness(1.2) drop-shadow(0 0 5px rgba(0,0,0,.8));}
.schematic .noshadow [class^="imgBtn"].lighter{filter: brightness(1.2)}
.schematic [class^="imgBtn"],.btn{cursor: pointer;}
.d-n,.ph,.close .menu/*,.phone*/{display: none;}
.d-b,img{display: block;}
.d-ib,.content img{display: inline-block;}
img{height: auto;}
.mx-auto{margin: 0 auto;}
.mb-05{margin-bottom: 5px;}
.mb-10{margin-bottom: 10px;}
.mb-1{margin-bottom: 2%;}
.mb-2{margin-bottom: 4%;}
.mb-3{margin-bottom: 6%;}
.px-05{padding:0 5px;}
.px-10{padding:0 10px;}
.px-16{padding:0 16px;}
.px-1{padding:0 2%;}
.px-3{padding:0 6%;}
.py-05{padding: 5px 0;}
.py-10{padding: 10px 0;}
.py-1{padding: 2% 0;}
.py-2{padding: 4% 0;}
.py-3{padding: 6% 0;}
.py-4{padding: 8% 0;}
.p-05{padding: 5px;}
.p-10{padding: 10px;}
.p-1{padding: 2%;}
.p-2{padding: 4%;}
.pt-10{padding-top: 10px;}
.pt-16{padding-top: 16px;}
.pt-1{padding-top: 2%;}
.pt-2{padding-top: 4%;}
.pt-4{padding-top: 8%;}
.pt-5{padding-top: 10%;}
.pr-05{padding-right: 5px;}
.pr-10{padding-right: 10px;}
.pr-15{padding-right: 15px;}
.pl-1{padding-left: 2%;}
.pl-2{padding-left: 4%;}
.pl-3{padding-left: 6%;}
.pb-10{padding-bottom: 10px;}
.pb-2{padding-bottom: 4%;}
.pb-4{padding-bottom: 8%;}
.ta-r{text-align: right;}
.ta-c{text-align: center;}
.ta-j{text-align: justify;}
.container{width: 70%;margin: 0 auto;}
.row{display: -webkit-flex;display: -moz-flex;display: -ms-flex;display: -o-flex;display: flex;-webkit-flex-wrap: wrap;-moz-flex-wrap: wrap;-ms-flex-wrap: wrap;-o-flex-wrap: wrap;flex-wrap: wrap;-ms-align-items:flex-start;align-items: flex-start;}
.ai-c{-ms-align-items: center;align-items: center;}
.jcc{justify-content: center;}
.jcr{justify-content: flex-end}
.jcsa{justify-content: space-around}
.jcsb{justify-content: space-between}
.ai-b{-ms-align-items: flex-end;align-items: flex-end;}
.ai-st{-ms-align-items: stretch;align-items: stretch;}
.h-100{height: 100%;}
.h-80{height: 80%;}
.h-20{height: 20%;}
iframe{min-height: 50vmin;height: inherit;}
.w-100,img,iframe{width: 100%;}
.w-90{width: 90%;}
.w-85{width: 85%;}
.w-80{width: 80%;}
.w-75{width: 75%;}
.w-70{width: 70%;}
.w-66{width: 66.66%;}
.w-65{width: 65%;}
.w-60{width: 60%;}
.w-55{width: 55%;}
.w-50{width: 50%;}
.w-45{width: 45%;}
.w-40{width: 40%;}
.w-35{width: 35%;}
.w-33{width: 33.33%;}
.w-30{width: 30%;}
.w-25{width: 25%;}
.w-20{width: 20%;}
.w-16{width: 16.66%;}
.w-15{width: 15%;}
.w-14{width: 14.28%;}
.w-12{width: 12.5%;}
.w-11{width: 11.1%;}
.w-10{width: 10%;}
.content img{width: auto;max-width: 100%;}
.po-r{position: relative;}
.po-a{position: absolute;}
.po-f{position: fixed;z-index: 9998;}
.ov-h{overflow: hidden}
.ovx-h{overflow-x: hidden}
.txt-1{color: #afadad;}
.txt-2{color: #ff5a00;}
#ad_sign .cleintCaseItem:hover .caseText{color: #4e0802;}
.txt-w,.action,.dropMenu a:hover,.webCase a:hover .bgc-3{color: #fff;}
.txt-r{color: red;}
.letterS-3{letter-spacing: 3px;}
.bgc-1,.action,.dropMenu a:hover,.webCase a:hover .bgc-3,a.bgc-3:hover{background-color: #ff5a00;}
.bgc-2{background-color: #faead1;}
.bgc-3{background-color: #ffaa57;}
.bgc-4{background-color: #e4e5e5;}
.bgc-5{background-color: #d0d0d0;}
.bgc-6{background: -webkit-linear-gradient(left,#e54a37,#ffcc2b);background: -o-linear-gradient(left,#e54a37,#ffcc2b);background: -moz-linear-gradient(left,#e54a37,#ffcc2b);background: linear-gradient(to right,#e54a37,#ffcc2b);}
.bgc-7{background-color: rgba(255,90,0,.8);}
.bgc-7lg{background: -webkit-linear-gradient(bottom,rgba(255,118,34,.5) 3%,rgba(225,74,55,.9));background: -o-linear-gradient(bottom,rgba(255,118,34,.5) 3%,rgba(225,74,55,.9));background: -moz-linear-gradient(bottom,rgba(255,118,34,.5) 3%,rgba(225,74,55,.9));background: linear-gradient(to top,rgba(255,118,34,.5) 3%,rgba(225,74,55,.9));}
.bgc-5w,#ad_sign .cleintCaseItem:hover .imgMask{background-color: rgba(255,255,255,.5);}
.bgc-w,#ad_sign .cleintCaseItem:hover .bgc-2{background-color: #fff;}
.bgc-e{background-color: #eee;}
.bgc-r{background-color: red;}
.bgc-r2{background-color: #bb3d48;}
.fwb{font-weight: bold;}
.txtOF{text-overflow: ellipsis;white-space: nowrap}
.arc-7{border-radius:7px}
.arc-1{border-radius:1rem}
.arc-3{border-radius:3rem}
.arcT-5{border-radius: 5px 5px 0 0}
.border-1{border: 1px solid #fff;}
.border-1d{border: 1px solid #ddd;}
.border-1o,.active{border: 1px solid #ff5a00;}
.border-5o{border: .4vw solid #facd89;}
.border-5r{border: .4vw solid #bb3d48;}
.border-4r{border:5px solid #e4488a;}
.border-3r{border: 3px solid #cf4f59;}
.border-3w{border: 3px solid #fff;}
.border-2w{border: 2px solid #fff;}
.border-5{border: 5px solid #fff;border-image: -webkit-linear-gradient(top left,#ff5a00 0%,#facd89 25%,#ff5a00 45%,#facd89 65%,#ff5a00 85%, #facd89 100%) 30 30;border-image: -moz-linear-gradient(top left,#ff5a00 0%,#facd89 25%,#ff5a00 45%,#facd89 65%,#ff5a00 85%, #facd89 100%) 30 30;border-image: linear-gradient(top left,#ff5a00 0%,#facd89 25%,#ff5a00 45%,#facd89 65%,#ff5a00 85%, #facd89 100%)  30 30;}
.bb-1{border-bottom: 1px solid #afadad;}
.bb-2{border-bottom: 2px solid #fff;}
.bb-1o{border-bottom: 1px solid #ff5a00;}
.bt-1{border-top: 1px solid #ddd;}
.bt-2w{border-top: 2px solid rgba(255,255,255,.5);}
.by-1w{border-top: 1px solid rgba(255,255,255,.5);border-bottom: 1px solid rgba(255,255,255,.5);}
.bx-1{border-left: 1px solid #efefef;border-right: 1px solid #efefef;}
.bx-1w{border-left: 1px solid rgba(255,255,255,.5);border-right: 1px solid rgba(255,255,255,.5);}
.br-1{border-right: 1px solid #efefef;}
.bl-1{border-left: 1px solid #efefef;}
.br-1w{border-right: 1px solid rgba(255,255,255,.5);}
.bl-2w{border-left: 2px solid rgba(255,255,255,.5);}
.bb-1w{border-bottom: 1px solid rgba(255,255,255,.5);}
.circle{border-radius: 50%}
ol{padding-left: 1.5rem;list-style-type: decimal}
ol>li>ol{padding-left: 1.5rem;list-style-type: upper-roman}
ul{padding-left: 1.5rem;list-style-type: disc}
#anchor,.anchor{top: 0;}
.navChange{-webkit-box-shadow:0px 5px 5px rgba(0,0,0,.5);box-shadow:0px 5px 5px rgba(0,0,0,.5);opacity: 0;transform: translateY(-150px);animation:navAni .8s;animation-fill-mode: forwards;z-index: 1030;}
@keyframes navAni{100%{opacity: 1;transform: translateY(0)}}
.mask{background-color: rgba(0,0,0,.8);z-index: 10000;}
menu{width: 60px;height: 60px;}
menu:before,menu:after,.menu{content:"";display: block;width: 100%;height: 5px;background-color: #fff;border-radius: 3px;transition: all .3s;margin: 3px 0;}
menu.close:before{transform: rotate(45deg) scale(1.1) translate(-1px, -6px);transform-origin:left;}
menu.close:after{transform: rotate(-45deg) scale(1.1) translate(-3px, 7px);transform-origin: left;}
.logo{width: 9vw;height: 9vw;}
.logo img{width: 4vw;}
.navDropMenu{top: 100%;left: 0;z-index: 10;}
nav>.container{min-height: 9vw;}
.icon{width: 45px;}
#banner .fadeInLeft{-webkit-transform: translateX(-100%);-ms-transform: translateX(-100%);transform: translateX(-100%);}
#banner .flipInX{-webkit-transform: perspective(400px) rotateY(90deg);transform: perspective(400px) rotateY(90deg);opacity: 0;}
#banner .tada{transform: scale(0);}
#banner .slideInLeft{opacity: 0;-webkit-transform: translateX(-100%);-ms-transform: translateX(-100%);transform: translateX(-100%);}
#banner .slideInRight{-webkit-transform: translateX(100%);-ms-transform: translateX(100%);transform: translateX(100%);}
#banner .slideInDown{opacity: 0;-webkit-transform: translateY(100%);-ms-transform: translateY(100%);transform: translateY(100%);}
#banner .bounceIn{transform: scale(0);}
#banner .bounceInUp{-webkit-transform: translateY(2000px);-ms-transform: translateY(2000px);transform: translateY(2000px);filter: drop-shadow(0 0 10px rgba(0,0,0,.5))}
#banner .bounceInDown{-webkit-transform: translateY(-2000px);-ms-transform: translateY(-2000px);transform: translateY(-2000px);filter: drop-shadow(0 0 10px rgba(0,0,0,.5))}
#banner .fadeInUp{opacity: 0;-webkit-transform: translateY(20px);-ms-transform: translateY(20px);transform: translateY(20px);}
#banner .fadeInDown{opacity: 0;-webkit-transform: translateY(-20px);-ms-transform: translateY(-20px);transform: translateY(-20px);}
#banner .scale{transform: scale(0) rotateX(360deg);transform-origin: top left;}
#banner .scale2{transform: scale(0);}
#banner .rotateY{opacity: 0;transform: rotateY(180deg);}
.bnr1 .tada:hover .bgc-w{background-color: #facd89;transition: all .3s}
.bnr1 .imgBox:nth-of-type(1){z-index: 3;}
.bnr1 .imgBox:nth-of-type(2){z-index: 2;}
.bnr1 a.imgBox:hover{filter: brightness(1.2) drop-shadow(0 0 5px rgba(0,0,0,.5));z-index: 4;}
.bnr2 .leftTxt{width: 19.01vw;}
.bnr2 .topTxt2:before{content: '';display: block;position: absolute;top: 0;right: 100%;background-color: #bb3d48;width: 100px;height: 100%;z-index: 1;}
.bnr2 .pic{border-radius: 10% 0 0 50%;transition: all .3s linear;filter: drop-shadow(0 0 10px rgba(0,0,0,.5))}
.bnr2 .imgBox1{bottom: 10%;left: 0;width:12.34vw}
.bnr2 .imgBox2{top: 10%;left: 59%;width:20.57vw}
.bnr2 .imgBox3{top: -5%;left: 32%;width:20.57vw}
.bnr2 .imgBox4{bottom: 15%;left: 15%;width:13.96vw}
.bnr2 .imgBox1:hover,.bnr2 .imgBox2:hover,.bnr2 .imgBox3:hover,.bnr2 .imgBox4:hover{z-index: 2;}
.bnr2 .imgBox1:hover .pic,.bnr2 .imgBox2:hover .pic,.bnr2 .imgBox3:hover .pic,.bnr2 .imgBox4:hover .pic{border-radius: 0;}
.bnr2 .topTxt1{z-index: 2;}
.bnr2 .contactBtn:hover{filter: brightness(1.2)}
.logo2{bottom: 14%;left: -5%;}
.logo3{bottom: 20%;right: 30%;}
.logo4{bottom: 4%;left: 21%;}
.logo5{right:0;bottom: 3%;}
.bnr4 .imgBox1{top: 10%;left: 10%;width: 11.51vw;z-index: 2;}
.bnr4 .imgBox2{top: 3%;right: 14%;width: 11.09vw;}
.bnr4 .imgBox2>.po-r>img{z-index: 2;}
.bnr4 .imgBox3{top: -20%;left: 30%;width: 17.71vw;}
.bnr4 .imgBox1 .txt{bottom: -20%;left: -7%;}
.bnr4 .imgBox2 .txt{bottom: -18%;right: -5%;}
.bnr4 .imgBox3 .txt{bottom: -7%;left: 5%;}
#map .icon{width:33.33%;max-width: 240px;}
.phnav .icon{width: 10vw;max-width: 60px;min-width: 40px;}
#process .icon{width: 20px;}
.text{margin: -16% 0 0 0;}
.text>div{width: 10vw;}
.logoBox{top: -2vw;}
.po-a.w-100.h-100{top: 0;left: 0;}
.title:after{content: "";display: block;width: 11.3vw;height: 2px;background-color: red;}
.btnStyle1{width: 100%;max-width: 220px;transition: all .3s ease;border-bottom: 5px solid #ea5504;}
.btnStyle1:hover{filter: brightness(1.3);border-bottom-color: #d94403}
h5.btnStyle1{max-width: 150px;}
#bnr1{background: url('../images/bgi1.webp') center top /cover fixed;height: 40vmin;}
#bnr2{background: url('../images/bgi2.webp') center top /cover fixed;height: 40vmin;}
.img{height: 11vw;-webkit-background-size: cover;background-size: cover;background-position: center;}
.content a:hover{filter: brightness(.7)}
.processTitle:after{content: "";position: absolute;display: block;top: 100%;left: 68px;transform-origin: left; transform: rotate(-45deg);width: 100%;height: 1px;background-color: #000;}
#service .mask{background-color: rgb(255,90,0);transform: translateX(-200%);transition:all .3s ease-in;z-index: 8;}
#service .item:hover .mask{transform: translateX(0)}
#service .item:hover .txt{color: #fff;transition:all .3s ease-in;}
#case .caseBox:hover .img{-webkit-background-size: 120%;background-size: 120%;}
#case .mask{background-color: rgba(249,234,208,.1);border: 5px solid  rgb(249,234,208);-webkit-box-shadow: inset 0 0 10px rgba(0,0,0,.8),5px 5px 5px rgba(0,0,0,.5);box-shadow: inset 0 0 10px rgba(0,0,0,.8),5px 5px 5px rgba(0,0,0,.5);z-index: 99}
#case .mask:hover{background-color: rgba(255,90,0,.7);transition: all .5s ease}
#case .txt{transform: translateY(50px);opacity: 0;transition: all .3s ease-in}
#case .mask:hover .txt{transform: translateY(0);opacity: 1;}
#case .caseBox:hover .bgc-1{transition: all .5s ease;opacity: 0;}
#map a:hover{color: #ea5504;}
#map .contact{max-width: 55%;}
.content{background:#efefef;border: 1px solid #ddd;border-image: -webkit-linear-gradient(top left,#bbb 0%,#efefef 25%,#aaa 45%,#efefef 65%,#bbb 85%, #efefef 100%) 30 30;border-image: -moz-linear-gradient(top left,#bbb 0%,#efefef 25%,#aaa 45%,#efefef 65%,#bbb 85%, #efefef 100%) 30 30;border-image: linear-gradient(top left,#bbb 0%,#efefef 25%,#aaa 45%,#efefef 65%,#bbb 85%, #efefef 100%)  30 30;}
select{width: 100%;max-width: 300px;}
.top{width: 60px;height: 60px;background:radial-gradient(circle at center,rgba(255,90,0,1),rgba(255,90,0,.1));background-color: rgba(255,90,0,.4);bottom: 10px;right: 5px;z-index: 999;-webkit-box-shadow:0 10px 5px rgba(0,0,0,.5);box-shadow:0 10px 5px rgba(0,0,0,.5);opacity: .8;transition: opacity .5s}
.top:after{content:"";position: absolute;display: block;width: 40px;height: 40px;top: -10%;left: 50%;transform: translateX(-50%);background:radial-gradient(circle at center,rgba(255,255,255,.4),rgba(255,90,0,0));border-radius: 50%;filter: brightness(1.5);}
.top:before{content:"";position: absolute;display: block;width: 5px;height: 5px;top: 10%;left: 50%;transform: translateX(-50%);background:radial-gradient(circle at center,rgba(255,255,255,.5),rgba(255,255,255,.3));border-radius: 50%;filter: brightness(1.5);}
.top:hover{opacity: 1;}
.top:hover h6{animation: topAni .8s linear infinite}
@keyframes topAni{50%,to{transform: translateY(10px) scale(.85)}5%,35%{transform: translateY(0) scale(1)}20%{transform: translateY(-10px) scale(.85)}}
.navDropTab:hover .navDropMenu{display: block;box-shadow: 0 0 5px rgba(0,0,0,.3)}
.box{-moz-column-count: 5;-webkit-column-count: 5;column-count: 5;-moz-column-gap: 10px;-webkit-column-gap: 10px;column-gap: 10px;min-height: 650px;}
.box .pic{display: inline-block;overflow:hidden;-webkit-column-break-inside: avoid;break-inside: avoid;}
.phheader{max-height: 100vh;overflow: auto;}
.iconBox{width: 60px;top: 20%;right: 10px;z-index: 999;}
.Q h5{max-width: calc(100% - 31px);}
.wordClassification a>img{transition: all .3s ease-in}
.wordClassification a:hover>img{transform: scale(1.1);}
@media screen and (max-width:1300px){.container{width: 80%;}}
@media screen and (max-width:1140px){.container{width: 95%;}.caseBox{width: 25%;}.caseBox .img{height: 15vw;}}
@media screen and (max-width:990px){#process .w-15,.pageBtn [class^="w-"].case_in_btn{width: 20%;border-width:2px}#process .w-55{width: 80%;}#map .w-30{width: 70%;padding-top: 10px;}#process .w-30,section#about .w-35,section#about .w-65{width: 100%;}section#service .w-25{width: 50%;}.btns .w-20{width: 33.33%;}}
@media screen and (max-width:768px){#aniimated-thumbnials .w-20{width: 25%;}#aniimated-thumbnials .img{height: 20vw;}#map h5>a{display: block;padding: 5px 0;font-size: 18px;}#contact h4{text-align: left;}.content{background: #efefef;}#bnr2 {background: url(../images/ph/bgi2.webp) center top /cover fixed;height: 60vmin;}.txt2,.txt2{width: 50vw;}#anchor,.anchor{top: -100px;}.logo img{max-width: 340px;width: 100%;}.logo{width: calc(100% - 60px);height: auto;}.txt1{width: 44vw;}.house{background: url(../images/ph/house.webp) right top / 100% no-repeat;}.people{left: 0;width: 100vw;}#map .w-15{width: 100%;max-width: 150px;}.processTitle:after{left: 50px;}#map .contact{width: 100%;max-width: 68vw;justify-content: flex-start;padding: 10px 0 0 4%;}.pc{display: none;}.ph{display: block;}.title:after{width: 40vw;}section#about .h-80{position: absolute;top: -3vw;right: 0;width: 30vw;padding: 0;opacity: .6;}#process .w-33,#map .w-30,article .w-40,article .w-60,aside.w-25,article.w-75{width: 100%;padding: 0;}#process .item.w-100,#search .w-20{width: 50%;}.iconBox{top:auto;bottom: 70px;right: 5px;}.caseBox{width: 33.33%;}.caseBox .img{height: 22vw;}aside.w-25 .w-100{width: 25%;padding: 0 2px}}
@media screen and (max-width:620px){.pc-pad{display: none;}#aniimated-thumbnials .w-20{width: 33.33%;}#aniimated-thumbnials .img{height: 25vw;}}
@media screen and (max-width:560px){.box{-moz-column-count: 3;-webkit-column-count: 3;column-count: 3;}#anchor,.anchor{top: -90px;}#map .icon{max-width: 120px;}.title:after{width: 35vw;}#process .w-55,#process .w-15,#process .item.w-100,#search .w-50{width: 100%;padding-bottom: 10px;}#map .contact{max-width: 100%;padding-left: 0;}.btns .w-20,#map .icon,.caseBox{width: 50%;}.caseBox .img{height: 34vw;}}
@media screen and (max-width:420px){#aniimated-thumbnials .w-20{width: 50%;}#aniimated-thumbnials .img{height: 30vw;}#anchor,.anchor{top: -80px;}.title:after {width: 26vw;}section#service .w-25{width: 100%;}section#about h3{font-size: min(max(1.3vw, 20px), 28px);letter-spacing:0}#map .contact h4{font-size: min(max(1.1vw, 16px), 24px);}.pageBtn [class^="w-"].case_in_btn{width: 25%;}}
@media screen and (max-width:359px){.pageBtn [class^="w-"].case_in_btn{width: 33.33%;}.btns .w-20{width: 100%;}.caseBox{width: 80%;}.caseBox .img{height: 50vw;}}
@media screen and (max-width:330px){.title:after {width: 15vw;}.record{display: none;}.page .w-25{width: 50%;}}
@media screen and (max-width:319px){.pageBtn{border-bottom: 1px solid #ddd;padding-bottom: 0;}.pageBtn h4,.pageBtn h5{font-size: 14px;}.iconBox{bottom: 55px;}.iconBox,.top{transform: scale(.75);transform-origin: bottom right;}.phnav .p-10{padding: 5px 0;}.phheader>.p-1{padding:0 5px;}}