@charset "utf-8";
/* CSS Document */
@import url("reset.css");
@import url("un-reset.css");

/*html5*/
article,aside,dialog,footer,header,section,footer,nav,figure,menu{display:block}

body{ 
margin:0; 
-webkit-text-size-adjust:none; 
word-break:break-all; word-wrap:break-word;
word-wrap:break-word; word-break:normal;
overflow-x:hidden; 
font-family:'Microsoft jhenghei',Arial;
background-image: url(../../images/tw/bk.png);
background-repeat: repeat-x;
background-color: #f3faff
}

#wrapper{ 
	width: 100%;
	max-width: 1200px; 
	margin:0 auto;
	position: relative;


}

.clear{ 
	clear:both
} 

img{ 
	vertical-align:middle; max-width: 100%
}

a{ 
text-decoration:none; 
 }

h1 { text-indent: -9999px; }

div,a,p,span,tr,th,td,li,pre, { 
font-family:'Microsoft jhenghei',Arial;
 }

/*table { width: 100% }*/

input[type="text"],
textarea {
line-height:normal !important;
border-radius: 5px;
border:#d9d9d9 1px solid;
padding: 6px 0
 }
input:focus::-webkit-input-placeholder { color:transparent; } input:focus:-moz-placeholder { color:transparent; } /* FF 4-18 */ input:focus::-moz-placeholder { color:transparent; } /* FF 19+ */ input:focus:-ms-input-placeholder { color:transparent; } /* IE 10+ */

textarea:focus::-webkit-input-placeholder { color:transparent; } textarea:focus:-moz-placeholder { color:transparent; } /* FF 4-18 */ textarea:focus::-moz-placeholder { color:transparent; } /* FF 19+ */ textarea:focus:-ms-input-placeholder { color:transparent; } /* IE 10+ */


@font-face {
  font-family: 'cwTeXHei';
  font-style: normal;
  font-weight: normal;
  src: url(//fonts.gstatic.com/ea/cwtexhei/v3/cwTeXHei-zhonly.eot);
  src: url(//fonts.gstatic.com/ea/cwtexhei/v3/cwTeXHei-zhonly.eot?#iefix) format('embedded-opentype'),
       url(//fonts.gstatic.com/ea/cwtexhei/v3/cwTeXHei-zhonly.woff2) format('woff2'),
       url(//fonts.gstatic.com/ea/cwtexhei/v3/cwTeXHei-zhonly.woff) format('woff'),
       url(//fonts.gstatic.com/ea/cwtexhei/v3/cwTeXHei-zhonly.ttf) format('truetype');
}

/*=====TOP====*/
#header { /*height: 167px; */ height:148px;
background: url(../../images/tw/header_bk.png) no-repeat; 
background-size:100% 100% }

.logo,
nav { float: left; }

.logo { width: 50%; }
.logo img { margin-left: 10px }
.logo h1{ display:none }

nav{ width: 50%; height: 95px; position: relative; }
nav ul { position:absolute; top: 55px; }
nav li { float: left; line-height: 95px; background: url(../../images/tw/icon01.png) no-repeat right center; text-align: center;
padding: 0 20px; }
nav li:last-child{ background: none }
nav li > a{ display: block; color: #fff; font-size: 17px; font-weight: bold; line-height: 22px; }
nav li > a > span { display: block; color: #cbc9c9; font-size: 12px; font-weight: normal; }


/*=====Banner====*/
#Banner { position: relative; width: 100% }


/*====Content=====*/
/*#content{ float:left; width: 100%; }*/

/*IndexList*/
.indexList { float:left; width: 96%; margin:2%; padding:20px 30px; border: #c3c3c7 1px solid; background: #fff; text-align: center; }
.indexList div {
display: inline-block;
width:48%;
vertical-align: top;
background:url(../../images/tw/line01.png) no-repeat 98% center;  }
/*.indexList div:last-child { width: 40%; background: none; padding-left: 30px }
.indexList div:last-child p {  }*/
.indexList div.sec{ padding-left: 30px }
.indexList b,
.indexList p { float: left; }
.indexList b{ font-size: 18px; text-align: center; line-height:20px; padding-top: 4px }
.indexList b:first-letter { font-size: 26px; color: #f81111; }
.indexList b span { display: block; font-weight: normal; font-size: 12px; color: #858586 }
.indexList p{ width: 80%; color: #505152; font-size:16px; line-height: 25px; text-align:left; padding:0 30px; margin-top:20px }

/*====MainLeft & MainRight====*/
article {  background: #fff; }

#mainLeft { float: left; width: 25%; }
#mainLeft .Title { 
background: url(../../images/tw/left_img.png) no-repeat;
background-size: 100% 100%;
font-size: 20px;
color: #fff;
height: 55px;
font-weight: bold;
padding:20px 0 5px 30px;
letter-spacing:2px
}

#mainLeft .Title:first-letter{
　text-transform:uppercase; font-size:26px; color:#F00
}

#mainLeft .Title span { color: #bcb8b8; font-size: 14px; letter-spacing:normal }

#mainLeft .Link {
width: 100%;
border-right:#efefef 1px solid;
background-color:#fcfbfb;
padding: 2em
}
#mainLeft .Link li { 
margin-bottom: 20px;
}

#mainLeft .Link li a {
display: block;
background: #418ccb;
color: #fff;
font-size: 17px;
line-height: 25px;
padding: 5px 10px;
}

#mainLeft .Link ul {
border-right: none;
padding-left:.75em;
background: none
}

#mainLeft .Link ul li {
border-bottom: #e0dbdb 1px dashed;
margin-bottom: 0
}

#mainLeft .Link ul li a { 
color: #403939;
background: none;
font-size: 15px;
padding: 8px 0;
font-weight: bold;
}


#mainRight { float: left; width: 75%; padding:30px }

/*內頁*/
#mainBox { float: left; width: 96%; margin:1% 2%; 
box-shadow:0px 0px 12px -2px rgba(126,125,125,0.5);
background-image:url(../../images/tw/mainbk.png);
background-position: right bottom;
background-repeat: no-repeat;
}

.container { float: left; width: 100%; position: relative;  }

/*標題*/
.mainTitle { position: relative; float: left; width: 100%; border-bottom: #cbd4de 1px solid; }
.mainTitle p { float: left; font-size: 24px; border-bottom: #f81111 2px solid; line-height: 35px;
font-weight: bold; letter-spacing: 1px }
.mainTitle p:first-letter { font-size: 28px; color: #f81111; }
.mainTitle span { color: #cbc9c9; font-size: 12px; font-weight: normal; letter-spacing:normal; }

.mainTitle .link { position: absolute; min-width:100px; top: 8px; right: 0; vertical-align: middle;  }
.mainTitle .link img { vertical-align: middle; margin-top: -3px }
.mainTitle .link a { color: #000; font-size: 15px;  }
.mainTitle .link a::after { content: ' > '; padding: 0 3px; color: #b6b3b3 }
.mainTitle .link a:last-child:after { content: ' ' }

/*間距*/
.mainPadding { padding:20px 60px; }
.mainPadding02 { padding: 20px }

/*--關於我們--*/
.about_title { font-size: 18px; font-weight: bold; }
.about_title img { margin-top: -4px }
.about_title + span { display: block; padding:10px 0 0 15px } 
.about_title + span b { color: #1b71c1; font-size: 17px; display: block; }

/*工程實績列表*/
.equipBox {  padding:20px 0; text-align: center; }
.equipBox figure { 
display:inline-block;
width: 220px;
overflow: hidden;
margin: 20px;
text-align: center;
background: url(../../images/tw/equip_img.png) no-repeat;
background-size: 100% 100%;
padding: 4px;
vertical-align: top;
}
/*.equipBox .img { 
transition: transform 1s ;
-o-transition: transform 1s;
-moz-transition: transform 1s;
-ms-transition: transform 1s;
-webkit-transition: transform 1s;

transform:scale(1,1);
-webkit-transform:scale(1,1); 
-o-transform:scale(1,1);
-moz-transform:scale(1,1);
-ms-transform:scale(1,1);
 }

.equipBox .img:hover { 
-webkit-transform:scale(0.5,0.5);
-o-transform:scale(0.5,0.5);
-ms-transform:scale(0.5,0.5);
-moz-transform:scale(0.5,0.5);
transform:scale(0.5,0.5)
  }*/

.equipBox figcaption {
text-align: left;
color: #fff;
font-size: 16px;
white-space: nowrap;overflow:hidden;text-overflow:ellipsis;
padding:3px 5px }

/*工程實例-詳細頁*/
.equip_pa { padding: 50px 0 }

.equipBox .equip_title { width: 95%; margin: 0 auto }
.equip_title { 
text-align: left;
padding-top: 30px;
border-bottom:#3577af 2px solid ; 
}
.equip_title p {
display: inline-block;
padding: 5px 16px;
background:#3577af; 
border-top-right-radius: 6px;
border-top-left-radius: 6px;
text-align:center;
color: #fff;
font-size: 16px
}

/*編輯器*/
.editor { display: block; padding: 20px; text-align:left; }

/*聯絡我們*/
.usbox { padding: 20px 40px }
.us_list { float: left; width: 46%; margin:2% }
.us_list img { margin-top: -3px;vertical-align: top  }
.us_list input[type="text"] { width: 89%; margin-top: 3px; padding-left: 3px }
.us_list:nth-of-type(5){ width: 100%; vertical-align: top }
.us_list textarea { width: 91%; height: 250px; padding: 3px }

.us_list02{ width: 100%; vertical-align: top; margin:2% ; padding-top: 8px; float: left; }
.us_list02 img { margin-top: -3px;vertical-align: top  }
.us_list02 .fill { width: 91%; height: 250px; padding: 3px }

.us_btn { text-align: center; padding: 20px 0; float: left; width: 100% }
.us_btn button { 
border:#e9f2f9 2px solid;
border-radius: 7px;
-webkit-border-radius: 7px;
-moz-border-radius: 7px;
-ms-border-radius: 7px;
-o-border-radius: 7px;;
text-align: center;
color: #fff;
font-size: 17px;
padding: 6px 20px;
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#82b4e1+0,4e7fad+53,2b5a86+99 */
background: #82b4e1; /* Old browsers */
background: -moz-linear-gradient(top,  #82b4e1 0%, #4e7fad 53%, #2b5a86 99%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  #82b4e1 0%,#4e7fad 53%,#2b5a86 99%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  #82b4e1 0%,#4e7fad 53%,#2b5a86 99%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#82b4e1', endColorstr='#2b5a86',GradientType=0 ); /* IE6-9 */
}

/*業務範圍*/
.serbox { position: relative; padding:40px 0 40px 150px }
.serbox .serIMG { position: relative; display: block; padding:100px 0 50px 0 }
.serbox .serIMG img { position: relative; }
.serbox .serIMG .img01 { top: 10px; left: 0; z-index:2 }
.serbox .serIMG .img02 { top: 40px; left: -30px; z-index:1 }
.serbox .serIMG .img03 { top: -40px; left:-30px; z-index: 2  }
.serbox .serIMG .img04 { top: -20px; left: -50px; z-index:1  } 

.serbox div { position: relative;  }
.serbox #marDiv { margin-left: 30px}
.serbox #marDiv:nth-child(2) { margin-top: 3px }
.serbox #marDiv:nth-child(3) { margin-top: 6px }
.serbox #marDiv:nth-child(4) { margin-top: 7px }

.sernum { position:absolute; left:0; top:0; background: #595353; width: 25px; ;line-height: 25px; padding-bottom: 2px; color: #fff; text-align: center; z-index: 2 }
.sertext { display:block; padding: 5px 0 5px 15px; width: 350px; font-weight: bold; position:absolute; left: 20px; top: -10px; background: #eef2f2; color: #1b71c1; font-size:17px; z-index: 1 }

.serbox #serImg { position: absolute; right: 110px; top: 70px;  }

/*Page*/
.page { clear: both; padding: 20px; text-align: center; }
.page a { border: #d8d6eb 1px solid; text-align: center; font-size: 14px; color: #1f1cc3; padding: 4px 10px }
.page a:hover,
.page a.on { background: #000096; color:#fff }

/*back*/
.back { clear: both; padding: 20px; text-align:right; }
.back a { color: #717474; font-size: 16px; font-weight: bold; }
.back img { margin:-3px -2px 0 0 }

/*Scroll樣式*/
.test {
	background-color: #fcfbf9;
	overflow: scroll;
	overflow-y: hidden;
	width: 800px;
}

.test5::-webkit-scrollbar {
 width: 12px;
 height:12px;
}
 .test5::-webkit-scrollbar-track {
 background-color:#fcfbf9;
}
 .test5::-webkit-scrollbar-thumb {
 background-color: #dad9d9;
}

.test5::-ms-scrollbar {
 width: 12px;
 height:12px;
}
 .test5::-ms-scrollbar-track {
 background-color:#fcfbf9;
}
 .test5::-ms-scrollbar-thumb {
 background-color: #dad9d9;
}

.test5::-moz-scrollbar {
 width: 12px;
 height:12px;
}
 .test5::-moz-scrollbar-track {
 background-color:#fcfbf9;
}
 .test5::-moz-scrollbar-thumb {
 background-color: #dad9d9;
}


/*====FOOTER=====*/
footer { float: left; width: 100%; }
.bk{ background: #fff }
.bk02 { background: #1a1e26; }
#footerList,
#footerBox { width: 100%; max-width: 1200px; margin:0 auto; }

#footerList { padding: 15px 25px; color: #000 }

#footerList .title { font-size: 18px; line-height: 35px; } 
#footerList .cu_logo { margin: 4px; }
#footerList .cu_logo li {  position:relative; height:140px; float: left; margin-right:20px; text-align: center;line-height : 100px;  }
#footerList .cu_logo li img { vertical-align:middle }
#footerList .cu_logo li p {  position:absolute; bottom:-40px; width:100%; text-align:center; font-size: 14px; padding: 4px 0; color:#30C1CA; }

/*#footerList .title { font-size: 18px; line-height: 35px; } 
#footerList .cu_logo { margin: 4px; }
#footerList .cu_logo li {  position:relative; height:150px; float: left; margin-right:20px; text-align: center;  }
#footerList .cu_logo li img { vertical-align:middle }
#footerList .cu_logo li p { position:absolute; bottom:0; width:100%; text-align:center; font-size: 14px; padding: 4px 0; color:#30C1CA; }*/

#footerList .cu_list {
width:100%;
padding:10px 0; 
position: relative;
/*-ms-column-count: 3;
-ms-column-gap: 30px;
-moz-column-count: 3;
-moz-column-gap: 30px;
-webkit-column-count: 3;
-webkit-column-gap: 30px;
column-count: 3;
column-gap: 30px;*/
}
#footerList .cu_list li {
width:33%;
height: auto;
display: inline-block;
overflow:hidden;
vertical-align: top;
text-align:left;
font-size: 15px; }
#footerList .cu_list li p { background: #313743; color: #ffffff; text-align: center; }
#footerList .cu_list li span { display: block; padding-top: 10px; color: #dfdfdf; line-height: 23px }

#footerBox { height: 40px; padding-left: 25px }
#footerBox .iware { float:left; margin-top: 10px; background: #d1d1e3; line-height:2 ; padding:0 4px; color: #fbfcfb; font-size: 12px; text-align: center;  }
#footerBox .iware a { color: #fbfcfb; }

/*========RWD========*/

@media only screen and ( max-width: 1388px ){


}

@media only screen and ( max-width: 1280px ){

.logo { width: 40%; }
.logo img { margin-left: 0 }
nav{ width: 55%; margin-left: 5%; }
nav ul { top:45px; }
nav li { padding: 0 15px; }

}

@media only screen and ( max-width: 1024px ){

/*IndexList*/
.indexList { padding:20px 10px; }
/*.indexList div:last-child { padding-left: 0px }*/
.indexList p{ padding:0 10px }

#mainLeft .Link {
padding: 1em
}

/*聯絡我們*/
.usbox { padding: 20px 0px }
.us_list input[type="text"] { width: 88%; }

/*業務範圍*/
.serbox { padding:40px 0 40px 0px }
.serbox #marDiv { margin-left: 60px}
.serbox #serImg { right: 65px; }

.serbox .serIMG .img01 { left:15px;}
.serbox .serIMG .img02 { left:-15px; }
.serbox .serIMG .img03 { left:-15px; }
.serbox .serIMG .img04 { left:-35px; } 

/*工程實績列表*/
.equipBox figure { width: 30%; margin: 5px; }

/*工程實例-詳細頁*/
.equip_pa { padding: 50px 0 }

.equipBox .equip_title { width: 98%; margin: 0 auto }

/*編輯器*/
.editor { padding:20px 10px; }

}

@media (max-width:1000px){

/*IndexList*/
.indexList { padding:20px 10px; }

.indexList div { width:55%; padding-right:20px;
background:url(../../images/tw/line01.png) no-repeat 100% center;  }
.indexList div.sec{ width:40%; padding-left: 10px }
.indexList p{ float:right; width:80%; margin-left:0;  }
.indexList div.sec p{ width:100%; padding-left:10px; display:inline-block; }


.logo { width: 35%; }
nav{ width: 64%; margin-left:1%; margin-top:-10px }

#footerList { padding: 15px 10px; }
.us_list02{ margin:1% ; }
.us_list02 .fill { display:block; width: 91.5%; }

}

@media (max-width:900px){

/*IndexList*/
.indexList { padding:20px 10px; }

.indexList div { width:55%; padding-right:20px;
background:url(../../images/tw/line01.png) no-repeat 100% right top;  }
.indexList div.sec{ width:42%; padding-left: 10px }
.indexList p{ float:right; width:75%; margin-left:0; }
.indexList div.sec p{ width:100%; padding-left:10px; display:inline-block; }


.logo { width: 32%; }
.logo img { margin-top:15px; }
nav{ width: 67%; margin-left:0%; margin-top:-10px }

#footerList { padding: 15px 0; }
#footerList .cu_list li {
width:32.5%;
}
.us_list02{ margin:1% ; }
.us_list02 .fill { display:block; width: 91.5%; }

}

@media only screen and ( min-width: 801px ) {


}

@media only screen and ( max-width: 800px ){

#header { height: 130px; }

.logo { width: 100%; }
.logo img { margin-left: 0px; margin-top:0 }

nav{ display: none; width: 100%; z-index: 999; top: -20px; left: 0; margin-left: 0; }
nav ul { width: 100%; background: #000; top: 0; padding: 6px 0 }
nav li { width: 100%; margin: 4px 0; background:none }


/*IndexList*/
.indexList div { width:100%; background:none  }
.indexList div:last-child { width: 100%; margin-top: 10px; background: none; padding-left: 0px }
.indexList p{ width: 100%; padding:5px 0 }
.indexList b{ text-align: left; }

/*標題*/

/*間距*/
.mainPadding { padding:20px 10px; }
.mainPadding02 { padding:20px 10px }

#mainLeft { display: none; }
#mainRight { width: 100%; padding:20px 10px }

/*工程實例-詳細頁*/
.equip_pa { padding: 30px 0 }

/*聯絡我們*/
.usbox { padding: 20px 0 }
.us_list { width: 100%; margin:1% }
.us_list input[type="text"],
.us_list textarea { width: 89%; }

.us_list02{ margin:1% ; }
.us_list02 .fill { width: 89%; }

/*業務範圍*/
.serbox #marDiv { margin-left: 20px}
.serbox #serImg { right: 10px; }

.serbox .serIMG .img03 { position: absolute; top: 50px; left:auto; right: 90px } 
.serbox .serIMG .img04 { position: absolute; top: 150px; left:auto; right: 10px } 

/*back*/
.back { text-align:center }

/*====FOOTER=====*/
#footerList { padding: 15px 5px; }
#footerList .cu_logo { margin: 4px 0; }
#footerList .cu_logo li { width: 19.4%; margin-bottom:30px }

#footerBox { padding-left: 10px }

}

@media only screen and ( max-width: 680px ){

/*業務範圍*/
.sertext { display:block; padding: 5px 0 5px 15px; width: 95% }
.serbox #marDiv { margin-left: 0px}
.serbox #serImg { display: none; }

.serbox .serIMG { padding:20px 0 50px 50px }
.serbox .serIMG .img03 { position: relative; top: 50px; left:0 } 
.serbox .serIMG .img04 { position: relative; top: 110px; left:-40px } 

}

@media only screen and ( max-width: 600px ){

/*工程實績列表*/
.equipBox { text-align: left; }
.equipBox figure { width: 48%; margin: 5px 2px; }


/*聯絡我們*/
.us_list input[type='text'] { width: 100% }
.us_list textarea { width: 100%; }
.us_list02 .fill { width: 100%; }

#footerList .cu_list {
-moz-column-count: 1; -moz-column-gap: 0px;
-webkit-column-count: 1; -webkit-column-gap: 0px;
column-count: 1; column-gap: 0px;
}

#footerList .cu_list li { margin-bottom: 20px }

}

@media only screen and ( max-width: 480px ){

#header { height: 90px; }
.logo img { width: 320px }

/*標題*/
.mainTitle p {  line-height: 30px; border-bottom:none; }
.mainTitle span { display: block; line-height: 20px }
.mainTitle .link { position:static; float:left; width: 100%; text-align: right; padding-top: 6px }
.mainTitle .link img { margin-top: -8px }

/*業務範圍*/
.serbox .serIMG { padding-left:10px }
.serbox .serIMG img { position: static; display:inline; width: 48%; vertical-align: top; }
.serbox .serIMG .img01, 
.serbox .serIMG .img02,
.serbox .serIMG .img03,
.serbox .serIMG .img04 { top:auto; left:auto; right: auto;  } 

/*聯絡我們*/
.us_btn button { width: 100%; margin:10px 0; padding: 10px 0 }

/*FOOTER
#footerList .cu_logo li { width: 32.3% }*/

#footerList .cu_logo { text-align:center }
#footerList .cu_logo li { display:inline-block; width: 33%; margin-right:0 }

}

@media only screen and ( max-width: 400px ){

.logo img { width: 280px }
nav{ top:0px; }

/*業務範圍*/
.serbox .serIMG { padding:30px 0 0 5px }

/*工程實績列表*/
.equipBox { text-align: center; }
.equipBox figure { width: 47%; margin: 2px; }
.equipBox figcaption { font-size: 14px; padding:4px 0 0 5px  }



/*FOOTER
#footerList .cu_logo li { width: 48% }*/

}

@media only screen and ( max-width: 320px ){

#header { text-align: center; }
.logo { text-align:left }
.logo img { width:250px; margin-top: 0px; margin-left: 0px }


}