@charset "UTF-8";
@import url(//fonts.googleapis.com/earlyaccess/notosanstc.css);
@import url(font-awesome.css);
@import url(jquery.css);
@import url(jquery-ui.css);
@import url(bootstrap.css);
@import url(bootstrap-theme.css);
@import url(fancybox.css);
@import url(slick.css);
@import url(spectrum.css);
:root{--ci1:#0F969E;}
html{font-size:16px;}
*, body, div, p, input, button, a, strong, td, li, i, strong, button, span{font-size:1rem; line-height:2rem; letter-spacing:1px; font-family:'Noto Sans TC', 'FontAwesome', '微軟正黑體', sans-serif; text-decoration:none; text-shadow:none; margin:0; padding:0; color:#000;}
h1, h2, h3, h4, h5{font-family:'Noto Sans TC', 'FontAwesome', '微軟正黑體', sans-serif; text-decoration:none; text-shadow:none; margin:0 0 10px 0; padding:0; color:#000;}
td{padding:5px;}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section{ display:block; }
blockquote, q{ quotes:none; }
blockquote:before, blockquote:after, q:before, q:after{ content:''; content:none; }
input[type="submit"], input[type="reset"], input[type="button"]{ cursor:pointer; border-radius:5px; padding:2px 5px; border:1px #cacaca solid; }
h1, h2, h3, h4, h5, strong{ font-weight:bold; }
textarea{resize:none; }
:-moz-placeholder, ::-moz-placeholder{ opacity:0.8; }
ul li{ list-style:disc; }
ol li{ list-style:decimal;}
ol.cjk-ideographic li{list-style:cjk-ideographic;}
li{ margin-left:28px; }
.hideit{ display:none; }
.clear{ clear:both; }
label{ margin-right:5px; }
form td{ padding:2px; }
img{ max-width:100%; border:none; }
a{color:#5e5e5e; text-decoration:none; }
a:hover{color:var(--ci1); transition:All 0.2s ease; text-decoration:none;}
.sabrosus{padding:3px; margin:20px auto; text-align:center; width:100%; border-top:1px #ccc dotted; padding-top:10px;}
.sabrosus #sabrosus_dp{display:none;}
.sabrosus *{color:var(--ci1);}
.sabrosus a{border:var(--ci1) 1px solid; background:#fff; color:var(--ci1); min-width:25px; margin-bottom:10px; padding:2px 5px; text-decoration:none; display:inline-block; text-align:center;}
.sabrosus a:hover{border:var(--ci1) 1px solid; color:#fff; background:var(--ci1);}
.sabrosus a:hover .fa{color:#fff;}
.sabrosus a.current{border:var(--ci1) 1px solid; padding:2px 5px; font-weight:bold; color:#fff; background:var(--ci1);}
.sabrosus a:nth-child(1){border-radius:5px 0 0 5px;}
.sabrosus a:nth-last-child(1){border-radius:0 5px 5px 0;}
.bh{ text-align:right; margin:100px 0 20px 0; }
.share_tool{ text-align:right; }
.form-control{padding:0px 5px;}
.form-control.inline{max-width:calc(100% - 100px); display:inline-block; }
.form-control.ckn{max-width:80px; display:inline-block; }
.form-control.num{max-width:80px; display:inline-block; text-align:center; }
.form-control.num1{max-width:40px; display:inline-block; text-align:right; }
.form-control.file{ max-width:200px; display:inline-block; }
.form-control.date{ max-width:100px; display:inline-block; }
.form-control.withColor{max-width:calc(100% - 50px); display:inline-block; float:left;}
textarea.form-control{height:130px;}
.form-control.ckn{ max-width:80px; display:inline-block;}
form .form-control{margin-bottom:10px;}
.controlgroup{display:inline-block; position:relative; margin:0; padding:0; top:5px; }
.controlgroup label{ background:#eee; border:1px #999 solid; font-weight:normal; margin:0; padding:2px 5px; cursor:pointer; display:inline-block; float:left; color:#000; }
.controlgroup label:hover{ background:#ddd; }
.controlgroup label:nth-child(1){ border-radius:5px 0 0 5px; }
.controlgroup label:nth-last-child(1){ border-radius:0 3px 3px 0; margin-bottom:10px;}
.controlgroup label.active{background:#38a1db; color:#fff; }
.controlgroup.radio label{ display:inline-block; }
.controlgroup input{ display:none; }
.btn{ background-color:#ccc; }
.fr{ float:right; }
.fl{ float:left; }
.main{width:calc(100% - 20px); max-width:1000px; margin:0 auto; position:relative; padding-bottom:20px;}
.main:after{content:''; display:block; clear:both;}
.red{color:#c00;}
.fa-star-of-life{color:#f00; font-size:0.9rem;}
.gray{color:#999;}
.green{color:var(--ci1);}
.blue{color:#38a1db;}
.colTitle{display:inline-block; width:120px; text-align:right; margin-bottom:5px; float:left; clear:left; padding-right:10px;}
.hasTitle{max-width:calc(100% - 130px); display:inline-block;}
.twzipcode{width:300px;}
.twzipcode .form-control{max-width:30%;}
.title{font-family:'Noto Sans TC', 'FontAwesome', '微軟正黑體', sans-serif; font-size:2rem; line-height:2; color:var(--ci1);}
#logo{display:inline-block; margin:20px 0 0 0;}
#logo img{height:60px; max-height: 80px;}
#searchBox{position:absolute; right:0; bottom:10px;}
#searchBox .form-control{max-width:150px;}
#searchBox button .fa{color:#fff;}
.hamburger {  width: 35px; height: 35px; cursor: pointer; display: none; position: fixed;  z-index: 912; right: 30px; top:50px;}
.hamburger .menu, .hamburger .menu::before, .hamburger .menu::after { background: #222; content: ''; display: block;  height: 2px; position: absolute; transition: background ease .15s, top ease .15s .15s, transform ease .15s; width: 100%;}
.hamburger .menu::before { top: -8px;}
.hamburger .menu::after { top: 8px;}
#navbar:checked + .hamburger .menu {  background: transparent;}
#navbar:checked + .hamburger .menu::before { transform: rotate(45deg);}
#navbar:checked + .hamburger .menu::after { transform: rotate(-45deg);}
#navbar:checked + .hamburger .menu::before, #navbar:checked + .hamburger .menu::after { top: 0; transition: top ease .15s, transform ease .15s .15s;}
nav{position: absolute; right: 0; top:1rem;}
nav, nav a, nav a div{color:var(--ci1);}
nav a{display:inline-block; text-align:center; font-size:1.1rem; font-weight:bold; position:relative; padding:10px 10px;}
nav a:hover{color:#fff; background:var(--ci1);}
nav a div{font-size:0.9rem; line-height:1; font-weight:bold;}
nav a:hover div{color:#fff;}
body.navOpen .hamburger .menu, body.navOpen .hamburger .menu::before, body.navOpen .hamburger .menu::after{}
#banner_box{width:100%; overflow:hidden;}
#banner_box a{display:block; width:100%; padding-bottom:40%; background:no-repeat center; background-size:cover;}
#indexNewsBox{width:calc(100% - 400px); float:left;}
#indexNewsBox .tags1{border-bottom:2px #000 solid;}
#indexNewsBox .tags1:after{content:''; display:block; clear:left;}
#indexNewsBox .tags1 a{background:#000; color:#fff; padding:2px 10px; display:inline-block; border-radius:5px 5px 0 0; float:left;}
#indexNewsBox .tags1 a:nth-child(2){background:var(--ci1);}
#indexNewsBox .tags1 a.more{float:right; background:none; color:#666;}
#indexNewsBox ul{margin:0; padding:0;}
#indexNewsBox ul li{list-style:none; margin:5px 0 0 0; padding-bottom:5px; border-bottom:1px #231815 dashed;}
#indexNewsBox ul li a{display:block; color:#06c;}
#indexNewsBox ul li a span{display:inline-block; margin-right:10px; color:#666;}
#indexNewsBanners{width:360px; float:right; overflow: hidden;}
#newsList{max-width:800px; margin:50px auto;}
#dir{margin:10px 0;}
aside{width:200px; float:left; font-size:1.2rem; font-weight:bold; color:var(--ci1);}
aside .fa{color:var(--ci1);}
aside ul{margin:0 0 0px 10px; padding:0;}
aside ul li{list-style:none; margin:0; padding:0; position:relative;}
aside ul li a{line-height:1.4; font-weight:normal;}
aside ul li a.active{color:rgba(13,110,253,1); font-weight: 600;}
aside ul li a .fa{color:#5e5e5e;}
aside ul li .sc a .fa{font-size:0.8rem; line-height:1; position:relative; top:-3px;}
article{width:calc(100% - 220px); float:right;}
.col3List{margin:0;}
.col3List:after{content:''; display:block; clear:left;}
.col3List li{list-style:none; width:calc(33% - 20px); float:left; display:inline-block; margin:0 20px 20px 0; text-align: center;}
.col3List li:nth-child(3n){margin-right:0;}
.col3List li:nth-child(3n + 1){clear:left;}
.col3List li .img{background:no-repeat center; display:block; background-size:cover; height:0; width:100%; padding-bottom:70%;}
.col3List li .title{display: block; font-size:1.4rem; line-height:1.6;}
.col3List.certification li{width:calc(25% - 30px); margin-right:30px;}
.col3List.certification li a{padding-bottom:120%; overflow:hidden;}
.col3List.projects li a{padding-bottom:0; margin-bottom:20px;}
#contactInfo{width:55%; float:left;}
#contactForm{width:45%; float:right;}
#contactForm strong{line-height:20px;}
#contactForm strong div{font-size:0.8rem; line-height:1; text-align:right;}
#pagecontactUs main{background:url('../images/contactUsBg.jpg') no-repeat right bottom;}
#footer{background:var(--ci1); color:#fff}
#footer *{color:#fff;}
#footer section{padding:15px 0;}
#footer section:after{content:''; display:block; clear:both;}
#footer .ourService .title, #footer .contactUs .title{font-size:1.1rem; font-weight:normal;}
#footer .ourService{max-width:calc(55% - 20px); min-height:200px; padding-right:20px; border-right:1px #fff solid;}
#footer .contactUs{max-width:calc(45% - 15px); line-height:20px;}
#footer .contactUs ul{margin:0; padding:0;}
#footer .contactUs ul li{list-style:none; margin-bottom:15px;}
#footer .contactUs ul li::after{content:''; display:block; clear:left;}
#footer .contactUs .fas, #footer .contactUs .fa{float:left; margin-right:10px; font-size:1.2rem; clear:left; margin-top:5px;}
.contactUs .fa{margin-top:0;}
#footer .contactUs .fa-phone{margin-right:15px;}
footer{background:#000; color:#fff;}
footer *{color:#fff;}
footer section{text-align:center; padding:15px 0;}

@media screen and (max-width:760px) {
  html{font-size:13px;}
  .fr{float: none;}
  .fl{float: none;}
  .mobile{display: inline;}
  .mobile-x{display: none;}
  .hamburger{display: block;}
  nav{position: fixed; top:-100vh; width: 100%; height: calc(100vh - 108px); transition: ease-in-out 300ms; background: #fff; z-index: 900;}
  nav, nav a, nav a div{color:var(--ci1);}
  nav a{display:block; text-align:center; font-size:1.1rem; font-weight:bold; position:relative; padding:10px 10px;}
  nav a:hover{color:#fff; background:var(--ci1);}
  nav a div{font-size:0.9rem; line-height:1; font-weight:bold;}
  nav a:hover div{color:#fff;}
  body.navOpen nav{top:calc(100vw * 0.3);}
  #logo img{width:60%; height:auto;}
  #searchBox{display: none;}
  aside, article, #indexNewsBox, #indexNewsBanners{width:100%; float: none;}
  aside ul li{display: inline-block; margin:0 1rem 0.5rem 0;}
  #footer .ourService{max-width:none; min-height:auto; padding-right:0; border-right:none;}
  #footer .contactUs{max-width:none; line-height:2;}
  .col3List li, .col3List.certification li{margin-right:0; width:calc(50% - 20px);}
  .col3List li:nth-child(even){float: right;}
  .col3List li:nth-child(3n + 1){clear:none;}
  .col3List li:nth-child(2n + 1){clear:both;}
  #contactInfo, #contactForm{width:100%; float:none;}
  #contactInfo{margin-bottom:2rem;}
}
@media print{
  html, body{ width:100%; height:auto; overflow:auto; }
}