/* union design Vito */

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, d2, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
img{max-width:100%;height:auto;}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {	display: block;}
body {	line-height: 1;}
ol, ul {	list-style: none;}
/*blockquote, q {	quotes: none;}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
*/
/* body layout */

*{ box-sizing: border-box; }
html,body { margin:0;	padding:0; font-family: Arial, Helvetica, sans-serif Noto Sans CJK TC Regular, Myriad Pro Light SemiExt ; }

#WRAPPER{ padding: 60px 0% 0px 0%; text-align:left; background: #fff;}
/*#WRAPPER .imgbox{
	width: 320px;
	height: auto;
	border: 1px solid #eee;
	box-shadow: 1px 5px 5px #666;
	position:absolute;
	left:50%;
	top:50%;
	margin-top:-150px;
	margin-left:-160px;}
*/

#WRAPPER p{	}


.header{ z-index: 888;
	background: #eee;
	font-size: 16px;
	font-weight: bold;
	color: #666;
	line-height: 40px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	width: 100%;
	height: 60px;
	padding: 0px;}
	
.header a{
	background-repeat: no-repeat;
	background-position: center center no-repeat transparent;
	background-color: transparent;
	display: block;
	width: 40px;
	height: 40px;
	position: absolute;
	top: 10px;
	right: 10px;
	background-image: url(../../img/mmenu.png);}
	
.header p{	font-size: 1em;	padding:20px 0 0 2%; color:#333}
.header img {
	width: 120px;
	height: 40px;
	position:absolute;
	left:50%;
	top:10px;
	margin-left:-60px;
	}
.header a.right{left: auto;	right: 10px;  }

.header.mm-fixed-top + {	background-position: 0px 55px;}

html.mm-opened.mm-zoom-menu body{	 background-color: #333;}
html.mm-opened.mm-zoom-menu .mm-page{	background-color: #fff;}


#sub { clear: both; overflow: hidden; background-color: #fff; padding: 100% 0 2% 0;}
#sub p{ font-size: 0.2em; line-height: 1.5; color: #666; padding: 0 0 0 2%; }


/*#sub_1{padding: 5px; clear: both;}
#sub_1 p{ font-size: 0.2em; line-height: 1.5; color: #666 }*/
#sub .box{	float: left;width: 12.5%; }
#sub .box p{ font-size: 1em;  text-align: left;  }
 
 
 
#sub_colorbox ,#pro_con {
	clear: both;
	overflow: hidden;
	padding: auto;
	color: #333;
	
}

#sub_colorbox {text-align: center;}

#sub_l {
	clear: both;
	float: left;
	width: 330px;
	height: 320px;
}	
#sub_r {
	margin-left: 330px;
	height: 320px;
}	
#sub_r .tab{ padding: 0; }	
	

.colorbox {	background-repeat: no-repeat;background-position: center center;	padding: 10px 0px;}

#pro_con .useit-table{
	line-height: 1.2;
	text-align: left;
	border-radius: 2px;
	border: 1px solid #ccc;	
	}

#pro_con .useit-table p ,#pro_con .useit-table a{padding:0 0 1% 2% ;	font-size:0.5em;	letter-spacing: 0px;}
#pro_con a,#pro_con .useit-table a{
    color: #ff6600;
	text-decoration: underline;
}
	
#pro_con .useit-table .ttab{
	padding:2%;
	font-size:0.8em;
	color: #333;
	line-height: 1.2;
	border-right: 1px solid #ccc;
	border-radius: 1px;
	background-color: #f0f0f0;
}
#pro_con .useit-table img {	padding:0px;}
#pro_con .useit-table .img {
	padding-top: 0px;
	margin-top: 10px;
	position: relative;
	top: 5px;
}
#pro_con p,#pro_con h2, #pro_con h3,#pro_con h4 {line-height: 1;}

#pro_con h2,#pro_con h3  {text-align: center;}

#pro_con p{padding: 0 2%;	font-size:0.8em;line-height:1.5;	letter-spacing: 0.8px;}
#pro_con .p1{text-align: center;}
#pro_con h2{
	padding: 2% 0 0 0;
	font-size: 2em;
	text-align: center;
}
#pro_con h3{padding:1% 2% 0 2%;	font-size:1.2em;	letter-spacing: 0.5px; }

#pro_con h4{padding:1% 20%;	font-size:1em; letter-spacing: 1px; line-height:1.2;}

#pro_con .QA-table {	width: 100%;
	margin-left: 0px;
}
#pro_con .QA-table ul { list-style:none;margin:0;padding:0;}

#pro_con .QA-table li {
	margin: 0;
	padding: 0 2%;
	background-position: 0em 0.45em;
	background-image: url(../../img/icon-5.png);
	background-repeat: no-repeat;
}
#pro_con .QA-table a{
	font-size: 0.8em;
    color: #ff6600;
	text-decoration: underline;
}
#pro_con .QA-table p{
	font-size: 0.8em;
	color: #666;
	padding: 1% 2%;
	letter-spacing: 1px;
	line-height: 1.5;
	}
#pro_con .QA-table h2{font-size: 24px;
	color: #ff6600;
	padding: 10px;
	}
#pro_con .QA-table h3{font-size: 1.2em;
	color: #ff6600;
	padding: 2%;text-align: left;
	}		
#pro_con .QA-Q {margin: 0 2%;}

#pro_con .QA-D {	
	padding: 0 50px 0 0;
	font-size: 14px;
	color: #999;
}

#pro_con .contTB{
	background-color: #fff;
	border-radius: 2px;
	
	}
#pro_con .contTB h2{
	font-size: 1em;
	padding: 1% ;
	color: #666;
	line-height: 10px;
	width:80%;
	}
#pro_con .center {
	text-align:center;}

#pro_con .contTB p ,#pro_con .contTB input ,#pro_con .contTB textarea{
	font-size: 0.8em;
	padding: 1% ;
	
	color: #666;
	line-height: 1.5;
	width:100%
	}


.important {color: #ff6600;}

#contents {clear: both; overflow: hidden; }
#contents,#contents h2,#contents h4,#contents p { 
	width: 100%;
	background-color: #fff;
	float: left;
	padding: 1%;
	color: #333;
}
#contents h2{  font-weight: bold; font-size: 2em; /*margin-bottom: 1px;*/ }
#contents h4{ font-size: 1em; font-weight: bold;   }
#contents p{	font-size: 0.5em;	letter-spacing: 1px;	line-height: 1.2;}


/*----footer描述---*/
#mfooter { clear: both; width:100%;  margin: 0 auto; padding:0%;}

/*---- 左區 --*/
#mfooter_l{clear: both; float:left; width:80%;}
#mfooter_l p{color: #666;  font-size:0.5em;	letter-spacing: 1px;}
#mfooter_l h2 {
	padding: 5% 0 0 1%;
	font-size: 0.8em;
	color: #999;
	letter-spacing: 1px;
	font-style: normal;
	line-height: 1;
}

#mfooter_l a, a:link {
	color: #999;
	font-size: 0.8em;
	letter-spacing: 1px;
	text-decoration: none;
}
/*---- 右區--*/ 
#mfooter_r { margin-left:80%; width:60px}
#mfooter p {margin:10px 0 10px 10px;} 


/*淡出入圖片輪播*/
   
	#abgne_fade_pic {		
		position: relative;
		width: 100%;
		height: 100%;
		}
	#abgne_fade_pic a.ad {
	margin: 0 auto;
	padding: 0;
	position: absolute;	/* 讓圖片疊在一起 */
	left: 1px;
	top: 1px;
	}
	#abgne_fade_pic .control {
		position: absolute;
		right: 10px;
		bottom: 10px;
		display: none;		/* 隱藏按鈕選單 */
	}
	#abgne_fade_pic .control a {
		display: inline-block;
		padding: 3px;
		margin: 0 3px;
		width: 16px;
		color: #fff;
		background: #000;
		text-align: center;
		font-size: 16px;
		text-decoration: none;
	}
	#abgne_fade_pic .control a.on {
		font-weight: bold;
		color: #f00;




/*#list{ clear: both; overflow: hidden; padding: auto ;  }
#list img { margin: 0 auto; }

#list .box{	position:absolute;
	left:50%;
	top:50%;}
#list .box h2{ font-size: 0.5em; color: #4e5460; padding-left: 10px; }
#list .box p{ font-family: 'Squada One', sans-serif; font-size: 1em;  text-align: left;  }
*/


/*---產品選單
ul.nav{ position: relative;   }
ul.nav li{	float: left;	width: 20%;	font-size: 1em;}
/* reset */
/*ul.nav li a{  width: 100%; position: relative; left: 0; top:0; margin: 0; padding: 0; }
/* reset */
/*ul.nav li a{
	display: block;
	color: #666;
	text-decoration: none;
	height: 30px;
	text-align: center;
	line-height: 30px;
	border: 1px solid #ddd;
	border-top: none;
	/*border-radius: 0 0 5px 5px; 圓角*/
	/*background-color: #000;
	background-image: url(../img/1px_white.png);
	background-repeat: repeat;	
	/*background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7abcff), color-stop(44%,#60abf8), color-stop(100%,#4096ee)); 
 background: -moz-linear-gradient(top, #7abcff 0%, #60abf8 44%, #4096ee 100%); /* FF3.6+ */ /*}
 
 --*/

/*#hgroup{ padding: 5px; clear: both; }
#hgroup h1{ font-size: 1em; line-height: 1.5; font-weight: bold; }
#hgroup h2{ font-size: 0.2em; line-height: 1.5; color: #666 }
*/
/*.right{ width: 100%; clear: both; }
.right h2{
	font-size: 1em;
	line-height: 1.4;
	font-weight: bold;
	text-align: center;
	font-size: 1.2em;
}
dl{
	width: 20%;
	float: left;
	padding: 5px 0 5px;
	text-align: center;
}
d2{
	width: 25%;
	float: left;
	padding: 5px 0 5px;
	text-align: center;
}
dt{
	display: block;
	width: 100%;
	font-size: 0.9em;
	display: block;
	line-height: 1.5;
}
dd{ display: block; width: 100%; font-size: 2.3em; line-height: 1; color: #4b98dc; font-family: 'Squada One', sans-serif; }

.listTwo{ overflow: hidden; border: 1px solid #fff; background-color: #fff;  clear: both; }
.listTwo .box{
	float: left;
	width: 50%;
	text-align: center;
	padding: 20px 0 20px;
	color: #4e5460;
}
.listTwo .box h2{ font-size: 0.5em; font-family: "微軟正黑體", sans-serif; color: #4e5460; }
.listTwo .box p{ font-family: 'Squada One', sans-serif; font-size: 2em; text-shadow: 1px 1px 1px #fff; }

/*.list{ clear: both; overflow: hidden; background-color: #fff;  }
.list .box{
	float: left;
	width: 12.5%;
	padding: 0px;
	
}
.list .box h2{ font-size: 0.5em; color: #4e5460; padding-left: 10px; }
.list .box p{ font-family: 'Squada One', sans-serif; font-size: 1em;  text-align: left;  }

.left{ }
.left h2{ }
.left h3{ padding-top: 20px; font-weight: bold; font-size: 1.2em; }
.leftMain{ position: relative; }
.change{ font-family: 'Squada One', sans-serif; }
.down{
	font-size: 2em;
	float: left;
	position: absolute;
	z-index: 20;
	top: 18px;
	font-weight: bold;
	color: #71bd00;
}
.up{ font-size: 2em; float: left; position: absolute; z-index: 20; top: 18px; font-weight: bold; color: #FF0000; }
.arrow{ font-size: 2em; position: absolute; top: 50px; color: #71bd00; }
.number{ float: left; font-size: 6em; display: block; float: left; color: #71bd00; margin-left: 10%; }
.numberup{
	float: left;
	font-size: 6em;
	display: block;
	float: left;
	color: #FF0000;
	margin-left: 10%;
}

section.a{ width: 100%; overflow: hidden; background-color: #fff; padding: 10px 0px; }

section.b{
	width: 100%;
	overflow: hidden;
	background-color: #fff;
	padding: 100px 0;
}

.branklyn{ width: 50%; float: left; }
.branklyn h2{ font-size: 0.7em; text-indent: 10px; }
.branklyn p{ font-family: 'Squada One', sans-serif; font-size: 2em; color: #4e5460; text-indent: 10px; }*/
/*.compare{
	width: 100%;
	background-color: #fff;
	float: left;
	padding-left: 5px;
}
.compare h2{  font-weight: bold; font-size: 2em; margin-bottom: 2px; }
.compare h4{ font-size: 12px; font-weight: bold; font-size: 0.8em;  }
.compare p{
	font-size: 0.8em;
	letter-spacing: 1px;
	line-height: 1.5;
}
*/

/*#mfooter.mbox{	float: left;
	width: 80%;
	text-align: left;
	padding: 10px 0px 0px 0px ;	
}
#mfooter.mbox h2{ font-size: 0.5em;	padding:5px 5px;	color: #ff3300; }
#mfooter.mbox p{ font-size: 0.5em;	padding:5px 5px;	color: #666; }

#mfooter.mgoto{ position: relative; }*/

/*----
.updown {}
.updown img {max-width:100%;height:auto;}
.updown down {
	position: absolute;
	width: 60px;
	height: 60px;
	padding: 15px 0px 20px;
	cursor: pointer;
	color: #FFF;
	
	background-image: url(../img/gotop.png);
	}
*/