@charset "utf-8";

*{margin:0;padding:0;list-style-type:none;}

img {border: 0px;}



html,body {

	font-family: 'Microsoft JhengHei','Microsoft YaHei',Arial, Helvetica, sans-serif;

	color:#333333;

	font-size: 14px;

	line-height: 16px;

	margin-top: 0px;

	text-decoration: none;

	font-weight: normal;

	}



a:link {text-decoration: none;}

a:visited {text-decoration: none;}

a:hover {text-decoration: none;}

a:active {text-decoration: none;}



.wrapper { 

    width: 100%;

	margin: 0 auto;

	min-height: 100%;

	height: auto !important;

	height: 100%; /*IE6 不識別 min-height*/	

	}	

.clear { display: block; width: 100%; height: 0px; overflow: hidden; clear: both; font-size: 0px; line-height: 0; }



.txt_h2  { 	

    color:#222222; 

	font-size: 20px; 

	line-height: 2em; 

	} 

.blank { 

    display: block; 

	width: 100%; 

	height: 20px; 

	overflow: hidden;

	position: relative; 	

	font-size: 0px; 

	line-height: 0; 

	}

.line { 

    display: block; 

	width: 100%; 

	height: 0px; 

	overflow: hidden;

	position: relative; 	

	/*clear: both;*/

	font-size: 0px; 

	line-height: 0; 

	margin-bottom: 10px;  

	border-top: 1px solid #F2F2F2; 

	}

	

.txt_l  { text-align: left; }	

.txt_r  { text-align: right; }

.txt_c  { text-align: center; }	



/* TOTAL

/* ------------------------------------------*/

#main_total {

	width: 100%;

	position: relative;

	background:#ffffff;

	min-height:100%;

	height: auto !important;

    *display: table; /* For IE7 Hack */ 

    *height: 100%; /* For IE7 Hack */

    }

#main_header { 

	width: 100%;

	/*position: relative;*/ 

	margin: 0 auto;

    /*display: block;*/

	/*text-align: center;*/

	/*border: 1px solid #E8EEFF;*/

	}

#main_fucus {

	width: 100%;

	/*position: relative; */

	margin: 0 auto; 

	/*display: block;*/

	overflow: hidden;

    }	

#main_middle {

	width: 100%;

	/*position: relative; */

	margin: 0 auto;

    /*display: block;*/

	/*margin-bottom: 10px;*/

	/*border: 1px solid #E8EEFF;*/

	min-height:600px;

	padding-bottom: 100px;

	}	

#main_footer { 

	position: absolute;

	bottom: 0;

	width: 100%;

	margin: 0 auto; 

	height: 100px;

	clear: both;

	/*position: relative;*/

    /*display: block;*/

    /*left: 0;*/

    background-color: #FFFFFF; 

	border: 1px solid #E8EEFF;

    }	



/* MIDDLE

/* ------------------------------------------*/

#middle_left {

	width: 100%;

	height: 100%;

	float: left;

	/*border: 1px solid #FF7396;*/

	}

#middle_center {

	width: 100%;

	/*border: 1px solid #FF7396;*/}



/* HEADER

/* ------------------------------------------*/

#main_header #logo {

    display: block;

    float: left;

    max-height: 90px;

    margin-top: 5px;

	color:#0059B3;

	font-size: 25px;

	padding: 5px;

	}

#main_header #logo img{

    max-height: 65px;

	}



#menu_lang {

    float: right;

	font-size: 14px;

    padding: 15px 10px 10px 0px;

    color: #333333;

	margin-right: 10px;

}

#menu_lang a {

    color: #333333;

    margin: 0px 5px;

}

#menu_lang :hover { color: #333333; }



/* HEADER

/* ------------------------------------------*/

#navbox { 

	} 

.nav_pic img{ 

    width: 100%; 

	/*border: 1px solid #FF7396;*/

	} 

.nav_map { 

	font-size: 12px;

	color: #999999; 

	line-height: 30px;

    /*border: 1px solid #FF7396;*/

  	} 

.nav_map a ,.nav_map a:hover { color: #999999; }



	

/* RWD

/* ------------------------------------------*/

/* 980px */

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

    #main_header ,#main_middle { max-width: 1100px; }

	.flickerplate { height: 600px; }

	}

/* 979px */

@media screen and (min-width: 768px) and (max-width: 979px) {

	#main_total { max-width:100%; }

	.flickerplate { height: 500px; }

	}

/* 767px */

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

	#layout{ max-width:100%; background-color: #FFFFFF;}

	#middle_left { width: 30%;}

	#middle_center { width: 69%; margin-left : 32%;}

	.flickerplate { height: 200px; }

	.navpic { display: none; }

	}

	

/* 480, 320px */

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

	#layout{ max-width:100%; background-color: #FFFFFF;}

	#middle_left { width: 94%; margin: 3%;}

	#middle_center { width: 98%; margin: 1%;}

	.flickerplate { height: 100px; }

	.navpic { display: none; }

	}



#hot_list { 

	width: 100%;

	position: relative; 

	margin: 0 auto;

    display: block;

	text-align: center;

	}

#hot_list ul,li {list-style:none; }

#hot_list ul { 

	width: 280px;

	margin: 5px;

	padding: 0;

	/*float: left;*/

	display: inline-block;

	border: 1px solid #EEEEEE;

	/*height: 200px;*/

	overflow: hidden;

	background:#F2F2F2;

	}

#hot_list li { 

	margin: 30px 10px;

	border: 1px solid #DFBFFF;

	}



#hot_list li dt {

    color: #000000; 

	font-size: 16px; 

	line-height: 20px;

	margin-top: 20px;

	min-height: 30px;

	text-align: center;

	font-weight: bold;

	}

#hot_list li dt a { color: #000000; }

#hot_list li dt :hover { color: #000000; }



#hot_list li dd {

    color:#222222; 

	font-size: 14px; 

	line-height: 25px;

	text-align: center;

	}



.mode{

    color: #47A3DA; 

	font-size: 14px; 

	margin-top: 15px;

	line-height: 25px;

	text-align: center;

	}	

.mode a { color: #47A3DA;  }

.mode :hover { color: #47A3DA;  }



#hot_list .vpic1 {    

    width: 260px;

	height: 260px;

	text-align:center;

	position:relative;

	display:table-cell;

	vertical-align:middle;

	background:#FFFFFF;

	}

#hot_list .vpic1 .spic1 {*position:absolute;top:50%;left:50%;}

#hot_list .vpic1 .spic1 img {*position:relative;top:-50%;left:-50%;}

#hot_list .vpic1 .spic1 img {

    max-width: 250px;

	max-height: 250px;

    }

.page_over {

 	background:#eff8fe;

	} 

/* 980px */

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

    #hot_list { max-width: 100%; }

	}

/* 979px */

@media screen and (min-width: 768px) and (max-width: 979px) {

	#hot_list { max-width: 979px; }

	}



/* 技術服務 */

#page_s2 { 

	width:100%;

	position: relative; 

	margin: 0 auto; 

    display: block;

    background-color:#FFFFFF; 

	text-align: center;

	}

#page_s2 ul,li {list-style:none; }

#page_s2 ul { 

	width: 95%;

	margin: 5px 2%;

	padding: 5px;

	/*float: left;*/

	text-align: left;

	position: relative;

	display : block;

	/*min-height: 160px;*/

	overflow: hidden;

	border-bottom: 1px solid #EEEEEE;

	}

#page_s2 li { 

	/*padding-top: 10px;*/

	}

#page_s2.left {

	width: 200px;

	margin: 5px;

	position: relative;

	float:left;

    }

#page_s2 .center {

	margin-left : 200px;

	padding: 0 20px;

	text-align: left;

    }

#page_s2 dt { 

    color:#222222; 

	font-size: 16px;

	line-height: 2em;

	}

#page_s2 .center dt a { color:#0078BA; }

#page_s2 .center dt a:hover { color:#222222; }



#page_s2 .time { color:#CCCCCC; font-size: 12px; line-height: 1.5em; }

#page_s2  dd { 

    color: #555555; 

	font-size: 13px; 

	line-height: 2em; 

	text-align: justify;  

	}



.vpic2 {    

    width: 200px;

	height: 120px;

	text-align:center;

	position:relative;

	display:table-cell;

	vertical-align:middle;

	border:1px solid #EEEEEE;

	}

.vpic2 .spic2 {*position:absolute;top:50%;left:50%;}

.vpic2 .spic2 img {*position:relative;top:-50%;left:-50%;}

.vpic2 .spic2 img { 

    max-width: 200px;

	max-height: 120px;

	} 	

/*

.page_over{

 	background:#FFF8DF;

	} 

*/	



/* 工程實績 */	

#page_s3 { 

	width: 100%;

	position: relative; 

	margin: 0 auto;

    display: block;

	/*text-align: center;*/

	}

#page_s3 ul,li {list-style:none; }

#page_s3 ul { 

	width: 31%;

	margin: 1%;

	padding: 0;

	display: inline-block;

	/*border: 1px solid #EEEEEE;*/

	/*height: 220px;*/

	/*overflow: hidden;*/



    border-radius: 5px;

    vertical-align: middle;

    box-shadow: 0px 1px 5px rgba(0,0,0,0.05);

    -webkit-transition: all 0.5s;

    -moz-transition: all 0.5s;

    transition: all 0.5s;

	}

#page_s3 li { 

	margin: 3%;

	overflow: hidden;

	}

#page_s3 dt {

    margin: 10px 0;

	color: #CC9966; 

	font-size: 14px; 

	line-height: 18px;

	min-height: 30px;

	*height: 30px; /* For IE7 Hack */

	/* text-align:center;*/

	}

#page_s3 dt a , #page_s3 dt a:hover { color: #007FFF; }



.vpic3 {    

    margin-top: 0px;

	width: 30%;

	height:155px;

	text-align:center;

	position:relative;

	display:table-cell;

	vertical-align:middle;

	

	color: #CCCCCC; 

	/*font-size: 14px; */

	/*border: 1px solid #EEEEEE;*/

	}

.vpic3 .spic3 {*position:absolute;top:50%;left:50%;}

.vpic3 .spic3 img {*position:relative;top:-50%;left:-50%;}

.vpic3 .spic3 img {

    max-width: 100%;

	max-height: 150px;

    }

.page_over {

 	background:#333333;

	} 



/* 產品資訊 */

#page_s4 { 

	width: 100%;

	position: relative; 

	margin: 0 auto;

    display: block;

	text-align: center;

	}

#page_s4 ul,li {list-style:none; }

#page_s4 ul { 

	width: 185px;

	margin: 4px;

	padding: 0;

	display: inline-block;

	border: 1px solid #EEEEEE;

	height: 260px;

	overflow: hidden;

	

    border-radius: 5px;

    vertical-align: middle;

    box-shadow: 0px 1px 5px rgba(0,0,0,0.05);

    -webkit-transition: all 0.5s;

    -moz-transition: all 0.5s;

    transition: all 0.5s;	

	}

#page_s4 li { 

	margin: 5px;

	}

#page_s4 ul  li dt {

    margin: 10px 0;

	color: #555555; 

	font-size: 15px; 

	line-height: 20px;

	min-height: 100px;

	text-align:center;

	}

#page_s4 ul li dt a , #page_s4 ul li dt a:hover { color: #555555; }



.vpic4 {    

    width: 175px;

	height: 175px;

	text-align:center;

	position:relative;

	display:table-cell;

	vertical-align:middle;

	/*background:#FFFFFF;*/

	}

.vpic4 .spic4 {*position:absolute;top:50%;left:50%;}

.vpic4 .spic4 img {*position:relative;top:-50%;left:-50%;}

.vpic4 .spic4 img {

    max-width: 175px;

	max-height: 175px;

    }

.page_over {

 	background:#BFDFFF;

	}

	

/* 產品資訊 */

#page_s5 { 

	width: 100%;

	position: relative; 

	margin: 0 auto;

    display: block;

	text-align: center;

	}

#page_s5 ul,li {list-style:none; }

#page_s5 ul { 

	width: 140px;

	margin: 4px;

	padding: 0;

	display: inline-block;

	border: 1px solid #EEEEEE;

	height: 180px;

	background:#BFDFFF;

	overflow: hidden;

	

    border-radius: 5px;

    vertical-align: middle;

    box-shadow: 0px 1px 5px rgba(0,0,0,0.05);

    -webkit-transition: all 0.5s;

    -moz-transition: all 0.5s;

    transition: all 0.5s;

	}

#page_s5 li { 

    margin: 5px;

	color: #444444; 

	font-size: 15px; 

	line-height: 20px;

	min-height: 40px;

	text-align:center;

	}

#page_s4 dt {

    margin: 10px 0;

	color: #FFFFFF; 

	font-size: 15px; 

	line-height: 20px;

	min-height: 80px;

	text-align:center;

	}

#page_s5 li a , #page_s5 li a:hover { color: #CC9966; }

.vpic5 {    

    width: 130px;

	height: 130px;

	text-align:center;

	position:relative;

	display:table-cell;

	vertical-align:middle;

	/*background:#FFFFFF;*/

	}

.vpic5 .spic5 {*position:absolute;top:50%;left:50%;}

.vpic5 .spic5 img {*position:relative;top:-50%;left:-50%;}

.vpic5 .spic5 img {

    max-width: 130px;

	max-height: 130px;

    }





	



/* 關於我們 */

#view_s1 { 

	width: 100%;

	position: relative; 

	margin: 0 auto;

    display: block;

	}

#view_s1 h2 {

    color: #222222; 

	font-size: 22px; 

	line-height: 50px;

	text-align: left;

	font-weight: lighter;

	}





#body_size {

    margin: 15px 0;

	text-align: left;

	line-height: 2em;

	}

#body_size  img ,.bady_show  img { 

    max-width: 100%;

	height: auto;

	}

	

#view_s1 .box { 

	width: 100%;

	margin: 0 auto;

	/*padding: 5px 0px;*/

    height: 25px;

	/*

	border-top: 1px solid #DDDDDD;

	border-bottom: 1px solid #DDDDDD;

    */

	}

#view_s1 .box .left {

	width: 30%;

	padding-top: 5px;

	height: 100%;

	float: left;

	/*border: 1px solid #FF7396;*/

	}

#view_s1 .box .center {

	width: 45%;

	height: 100%;

	float: left;

	/*border: 1px solid #FF7396;*/

    }

#view_s1 .box .right {

	width: 25%;

	height: 100%;

	float: right;

	/*border: 1px solid #FF7396;*/

    }

/*  字體大小 */	

#set_font {

    /*position: absolute;*/

	position: relative;

    right: 1%;

    /*top: 11px;*/

    border: solid 1px #b9b9b9;

    -moz-border-radius: 2px;

    -webkit-border-radius: 2px;

    border-radius: 2px;

	float: right;

    }

#set_font a {

    display: block;

    padding: 0 6px;

    margin: 1px;

    text-align: center;

    font-size: 14px;

    line-height: 1.5;

    color: #666;

    float: left;

	text-decoration:none;

    }

#set_font a:last-child {

    border-left: solid 1px #b9b9b9;

    padding: 0 6px;

    }

#set_font a:hover {

    background-color: #f5f5f5;

    color: #000;

    }	

	

	

	

/* CONTACT 聯絡我們

/* ------------------------------------------*/

/* GOOGLE MAP */

#map-wrapper { width:100%; height: 300px; }

#map_canvas { width:100%; height: 98%; }	



#comtact { 

	width: 100%;

	position: relative; 

	margin: 0 auto;

    display: block;

	text-align: center;

	}

#comtact .left {

	width: 48%;

	height: 100%;

	margin: 0 1%;

	float: left;

	}

#comtact .center {

	width: 96%;

	height: 100%;

	margin: 0 2%;

    }

#comtact .center p { 

    color: #333333;

	text-align:left; 

	font-size: 18px;

	line-height: 2em;

	/*border-bottom: solid 1px #EEEEEE;*/

	}

#comtact .center dt { 

    color: #333333;

	text-align:left; 

	font-size: 18px;

	line-height: 2em;

	}

#comtact .center dt a , #comtact .center a:hover { color: #333333; }

#comtact .center dd { 

    color: #333333;

	text-align:left; 

	font-size: 14px;	

	line-height: 2em;

	}



/* 979px */

@media screen and (min-width: 768px) and (max-width: 979px) {

	#comtact .left { width: 100%;  display: inline-block; }

	#comtact .center { width: 98%; margin: 1%; display: inline-block; }

	}

/* 767px */

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

	#comtact .left { width: 100%;  display: inline-block; }

	#comtact .center { width: 98%; margin: 1%; display: inline-block; }

	}

	

/* 480 */

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



	}



/* 網頁底部 */

#footer { 

	width:100%;

	/*position: relative; */

	margin: 0 auto; 

	display: block;

	background: #47A3DA;

    }

#footer-top { 

	width: 100%;

	/*position: relative; */

	margin: 0 auto;

    display: block;

	}

#footer-top { 

    color: #EEEEEE; 

	padding: 15px 0;

	font-size: 14px;

	line-height: 1.8em; 

	}

#footer-top  a ,#footer-top a :hover { color: #EEEEEE; }



#footer-top dd { 

    color:#EEEEEE;

	font-size: 12px; 

	line-height: 15px;	

	}

	

#footer-bottom { 

	width: 100%;

	position: relative; 

	margin: 0 auto;

    display: block;

	min-height: 30px; 

	background-color: #222222; 

	text-align: center;	

	}

.copyright {

	margin-top: 5px;

	padding: 0 10px;

	font-size: 12px; 

	line-height: 3em;

	color: #AAAAAA;

	/*text-align: right;*/

	text-align: center;	

	}

.copyright a ,.copyright :hover { color: #EEEEEE;	}



/* 980px */

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

    #footer-top  { max-width: 1024px; }

	}

	

/* 分頁樣式 */

.page {

	margin: 15px 0;

    text-align: center;

    font-family: arial, helvetica, sans-serif;

    font-size: 13px;

}

.page a {

    border-right: #ddd 1px solid;

    padding-right: 5px;

    border-top: #ddd 1px solid;

    padding-left: 5px;

    padding-bottom: 2px;

    border-left: #ddd 1px solid;

    color: #88af3f;

    margin-right: 2px;

    padding-top: 2px;

    border-bottom: #ddd 1px solid;

    text-decoration: none;

}

.page a:hover {

    border-right: #85bd1e 1px solid;

    border-top: #85bd1e 1px solid;

    border-left: #85bd1e 1px solid;

    color: #638425;

    border-bottom: #85bd1e 1px solid;

    background-color: #f1ffd6;

}

.page a:active {

    border-right: #85bd1e 1px solid;

    border-top: #85bd1e 1px solid;

    border-left: #85bd1e 1px solid;

    color: #638425;

    border-bottom: #85bd1e 1px solid;

    background-color: #f1ffd6;

}

.page span.current {

    border-right: #b2e05d 1px solid;

    padding-right: 5px;

    border-top: #b2e05d 1px solid;

    padding-left: 5px;

    font-weight: bold;

    padding-bottom: 2px;

    border-left: #b2e05d 1px solid;

    color: #fff;

    margin-right: 2px;

    padding-top: 2px;

    border-bottom: #b2e05d 1px solid;

    background-color: #b2e05d;

}

.page span.disabled {

    border-right: #f3f3f3 1px solid;

    padding-right: 5px;

    border-top: #f3f3f3 1px solid;

    padding-left: 5px;

    padding-bottom: 2px;

    border-left: #f3f3f3 1px solid;

    color: #ccc;

    margin-right: 2px;

    padding-top: 2px;

    border-bottom: #f3f3f3 1px solid;

}