@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:#0f417f;}
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:100px; text-align:right; margin-bottom:5px; float:left; clear:left; padding-right:10px;}
.hasTitle{max-width:calc(100% - 110px); 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;}
#logo img{height:40px;}
#searchBox{position:absolute; right:0; bottom:10px;}
#searchBox .form-control{max-width:150px;}
#searchBox button .fa{color:#fff;}
nav{background:var(--ci1);}
nav section{text-align: center;}
nav section:after{content:''; display:block; clear:left;}
nav, nav a, nav a div{color:#fff;}
nav a{display:inline-block; text-align:center; width:calc(12.5% - 2px); font-size:1.1rem; font-weight:bold; position:relative; padding:10px 0;}
nav a:hover{color:#fff; background:#000;}
nav a:nth-child(1):before, nav a:after{content:''; width:1px; height:15px; display:inline-block; position:absolute; top:20px; background:#fff; z-index:2;}
nav a:nth-child(1):before{left:-1px;}
nav a:after{right:-1px;}
nav a div{font-size:0.9rem; line-height:1; font-weight:bold;}
#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;}
.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:700px) {
  html{font-size:13px;}
  .fr{float: none;}
  .fl{float: none;}
  .mobile{display: inline;}
  .mobile-x{display: none;}
  #navation{display:inline-block; font-size:2rem; position: absolute; right:10px; top:20px;}
  nav{margin:0; padding:10px; background:rgba(15,65,127,0.7); position: fixed; z-index:910; left:auto; right:-100vw; top:4.1rem; width:250px; overflow-x:hidden; overflow-y:auto; float: none; transition: all 0.3s ease-in-out; opacity: 0;}
  nav.show{right: 0; opacity: 1;}
  nav a{display:block; text-align:center; width:100%; float:none;}
  nav a:nth-child(1):before, nav a:after{display:none;}
  #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; }
}