@charset "utf-8";

/* CSS Document */

/*****************************************general**************************************************/
/*margin padding 標準化*/
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset,input, p, blockquote, th,{margin:0; padding:0;}

/*標題font-size的標準化
h1, h2,  h4, h5, h6{font-size:100%;}*/

/*移除清單的list-style樣式*/
ol, ul{
	list-style:none;
	color: #000;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: normal;
}

/*將font-style及font-weight標準化成normal*/
address, caption, cite, code, dfn, em, strong, th, var{font-style:normal; font-weight:normal;}

/*移除table外框*/
table{
	border-collapse:collapse;
	border-spacing:0;
	text-align: left;
	color: #999;
}

/*移除fieldset和img的border*/
fieldset,img{border:0; text-align: center; z-index: 3;}

/*caption和th的文字要向左對齊*/
caption,th{text-align:left;}

/*移除q的引號*/
q:before,q:after{content: ;}

html,body{margin:0; padding:0; height: 100%; background-color:#ffffff;}
body{font-family: Arial, Helvetica, sans-serif; -webkit-text-size-adjust: none;}
img{
	border:0;
	text-align: center;
}
a{border:0; text-decoration:none;}
.h3{ font:12px Helvetica, Arial, sans-serif; color:#CCCCCC;}

.main { width:100%; margin:0 auto; font:12px Helvetica, Arial, sans-serif; position:relative; }

/*************************header(LOGO、TITLE、網址、主選單)**********************************/	
.header{ height:70px; padding:0; margin:0;}
.branding_bg{
	width:100%;
	background-color:#008787;
	background-image: url(../images/bg_branding.jpg);
	background-repeat: no-repeat;
	background-position: center top;
	height:70px;
}
.branding{width:900px; margin:0 auto; padding:0; position:relative;}
.logo{
	width: 172px;
	padding: 28px 0 0 0;
	text-align: left;
	background-image: url(../images/line.jpg);
	background-repeat: no-repeat;
	background-position: right bottom;
	position: absolute;
	left: -2px;
	top: 1px;
}
.title{
	position: absolute;
	padding: 28px 0 0 0;
	left: 191px;
	width: 715px;
	margin: 0;
	top: 3px;
}
.visit{
	position: absolute;
	float: right;
	right: -5px;
	color: #98e5d6;
	font-size: 13px;
	height: 18px;
	top: 7px;
	padding: 0 0 0 20px;
	background: url(../images/icon_arrow.png) no-repeat left center;
}
.visit a{color:#98e5d6;}	
.visit a:hover{text-decoration: underline;}


.nav_bg{ width:100%; background-color:#dddddd; height:30px}

.nav{ width:900px; margin:0 auto; padding:0;  line-height:30px; }	
.nav ul{ padding:0; margin:0; text-decoration: none;}
.nav li{ padding:0; margin:0; float: left;font-size:15px;}
.nav li a{ display:block; width:225px; color:#555555; text-align:center; text-decoration: none;}
.nav li a:hover{ background-color:#999999; color:#ffffff; font-weight: bold;}
.nav li a.active{ background-color:#999999; color:#ffffff; font-weight: bold;}

.menu{ background-color:#dddddd;font-size:15px;color:#555555; text-align:center;}
.menu a{ color:#555555;text-decoration: none; width:100%; height:40px;display:block; padding-top:7px;}
.menu a:hover { background-color:#999999;color:#ffffff;}
.menu a.active{ background-color:#999999;color:#ffffff; }
.menu_on{ background-color:#999999; font-size:15px;color:#ffffff;text-align:center;}
.menu_on a{ color:#ffffff;width:100%; height:40px; display:block;padding-top:7px}


	
	
/*************************banner**********************************/	
.banner{
	width:900px;
	padding: 0px 10px;
	margin: 0px auto;
	background-image: url(../images/bg_content.jpg);
	background-repeat: repeat-y;
}	
	

/*************************content內容**********************************/		
.content{
	width:900px;
	padding:0 10px;
	margin: 0px auto;
	background-image: url(../images/bg_content.jpg);
	background-repeat: repeat-y;
}
.content .main2{	width: 530px;padding:35px;}

.content .main3{
	width: 750px;
	padding:35px;
	text-align: center;
}

.content .side{ float:right; width:268px; margin-right:15px; }

.right{ float:right; padding:0 0 0 10px; margin:0;}

/*************************footer 快速連結**********************************/		
/*#footer{ width:100%; margin:0; padding:0;}
#FooterCenter{ margin: 0px; }

.footer_bg{
	background-color:#f3f3f3;
	width:100%;
	margin: 0px auto;
	font-size: 12pt;
	font-family: Arial, Helvetica, sans-serif;
	color: #333;
}

.footer{
    background-color:#f3f3f3; 
    height:198px; 
    width:840px;
	padding:20px 40px 0 40px;
	margin: 0px auto;
	background-image: url(../images/bg_footer.jpg);
	background-repeat: repeat-y;
	position:relative;
}

.footer_menu_sub{
	width:840px;
	height:35px;
	padding:15px 0 0 0;
	left:40px;
	top:168px;
	position:absolute;
	text-align:left;
	background-image: url(../images/footer_line.jpg);
	background-repeat: repeat-x;
	background-position: left top;
}
.footer_menu_sub ul{ padding:0; margin:0;}
.footer_menu_sub li{ float:right; display:block; padding:3px 10px; margin:0;}
.footer_menu_sub li a{color:#008787; font-size:12px;}
.footer_menu_sub li a:hover{text-decoration: underline; color:#008787; }

.footer_menu{ color:#555555; font-size:11px; padding:0 55px 0 0; margin:0; float:left;}
.footer_menu h3{ font-size:14px; color:#008787;}
.footer_menu ul{ padding:0; margin:0;}
.footer_menu li{ padding:0 0 3px 0; margin:0;}
.footer_menu li a{color:#555555; }
.footer_menu li a:hover{text-decoration: underline; color:#008787; }*/


/*************************文字設定**********************************/		
.title h1 {
	font-size: 20px;
	line-height: 24px;
	color: #ffffff;
	padding:0px;
	margin:0px;
}


h1 { font-size:24px; color:#008787; font-weight: bold; padding:0 0 5px 0; margin:0;}
h2 {
	font-size:20px;
	color:#007ec4;
	font-weight: bold;
	padding:5px 0;
	margin:0;
	text-align: left;
}
h3 { font-size:18px; color:#000000; font-weight: bold; padding:5px 0; margin:0;}
h4 { font-size:16px; color:#333333; font-weight: bold; padding:3px; margin:0 0 5px 0;}
h5 { font-size:15px; color:#007ec4; font-weight: bold; padding:5px 0; margin:0;}

p{ font-size:13px; line-height:18px; text-align: left; color: #555555; padding: 0 0 0px 0; margin: 0px;}
td{ color: #333333; }

.features {
	font-size:13px;
	line-height:22px;
	color:#555555;
	padding:0 0 15px 15px;
	margin:0;
	font-weight: bold;
}
.features li{ list-style:url(../images/dots.gif); padding:0; margin:0;}
.features li a{color:#098787;}
.features li a:hover{text-decoration:underline;}
.green_bg{ padding:15px 0 0 15px; margin-bottom:20px; background:#cee7e7;-moz-border-radius: 10px;-webkit-border-radius:10px;border-radius:10px;}


/*************************TOP 文字按鈕**********************************/	
.top{ float:right; 
      font-size: 12px;
	  color:#009ee0;
	  padding:5px 0 0 0;
	  margin:10px 0 0 0; 
	  background-image: url(../images/top_arrow.png);
	  background-repeat: no-repeat;
	  background-position: top center;
	  display:block;
	  text-align:center;
	  clear:both;
	  
}
.top a{color:#009ee0;}
.top a:hover{ text-decoration: underline; color:#009ee0;}


/*************************learn more 文字按鈕**********************************/	
.more{
	font-size: 12px;
	color:#009ee0;
	margin: 0;
	padding:0 10px 0 0;
	background-image: url(../images/more_arrow.png);
	background-repeat: no-repeat;
	background-position: right center;
	display:block;
	text-align:right;
	float:left;
}
.more a{color:#009ee0;}
.more a:hover{ text-decoration: underline; color:#009ee0;}


/*************************learn more 圖片按鈕**********************************/	
.btn_more{
	height: 25px;
	width: 100px;
	display: block;
	float:left;
	background-image: url(../images/btn_learnmore.png);
	background-repeat: no-repeat;
	background-position: top;
	text-indent: -5000px;
	cursor: pointer;
	margin:0;
	padding:0;
}
.btn_more:hover{
	background-position: 0 bottom;
    background-image: url(../images/btn_learnmore.png);	
}


/*************************form 表單背景設定**********************************/	
.form{
	width:840px;
	padding:20px 40px;
	margin: 0px auto;
	background-image: url(../images/bg_content.jpg);
	background-repeat: repeat-y;
}
.form_main{
	width:840px;
	padding:20px 0 0 0;
	margin: 0px;
	background-image: url(../images/bg_form_line.png);
	background-repeat: repeat-x;
}



.row{clear:both;}
.clear { clear:both;}
.clearfloat { /* 此類放在 div 或 break 元素上，而且應該放置在包含浮動容器關閉之前的最後一個元素 */
    clear:both; height:0; font-size: 1px; line-height: 0px; }

hr{
	background:url(../images/pointpng.png) repeat-x top;
	padding:10px;
	margin-top:20px;
	border:0;
}

.border{border-bottom:1px dashed #555555;}

/********************************************************************************************/
/***************************************** Footer *******************************************/
/********************************************************************************************/
#footer {
	position: relative;
	width: auto;
	height: 116px;
	clear: both;
	background: url("../images/footer-background.png") repeat-x;
}
#footer-container1 {
	position: relative;
	width: 990px;
	height: 58px;
	padding-top: 20px;
	margin-left: auto;
	margin-right: auto;
}
#footer-container2 {
	position: relative;
	width: 990px;
	height: 38px;
	margin-left: auto;
	margin-right: auto;
}
#footer-logo {
	position: relative;
	display: block;
	width: 120px;
	height: 55px;
	margin-right: 15px;
	float: left;
	/*background: url("images/footer-logo.png") no-repeat;*/
}
#footer-logo img {
	padding: 0px;
}
#footer-adress {
	position: relative;
	display: block;
	width: 160px;
	height: 35px;
	float: left;
}
#footer-adress.border-right {
	/*line-height: 50px;*/
	border-right: 1px solid #ffffff;
}

#footer-contact {
	position: relative;
	display: block;
	width: 180px;
	float: left;
	margin-left: 5px;
}
#footer-contact p, #footer-adress p {
	margin-top: 0;
	margin-left: 10px;
	margin-right: 10px;
	font-size: 11px;
	line-height: 12px;
	color: white;
}

#footer-logo2 {
	position: relative;
	display: block;
	background: url("../images/footer-logo2.png") no-repeat;
	width: auto;
	height: 40px;
	margin-top: -5px;
	float: left;
}
#footer-logo2 img {
	padding: 0px;
	width: auto;
	height: 45px;
}

#footer-menu {
	position: relative;
	float: right;
	margin-right: 0px;
	padding-right: 0px;
	width: auto;
	height: 35px;
}
#footer-menu ul {
	width: 100%;
	padding: 0;
	margin: 0;
	list-style-type: none;
}
#footer-menu ul li {
	display: inline;
}
#footer-menu ul li a {
	float: left;
	width: auto;
	height: auto;
	padding: 0px 15px 0 15px;
	text-decoration: none;
	line-height: 35px;
	color: #ffffff;
	text-transform: uppercase;
	font-size: 12px;
	border-left: 1px solid #ffffff;
}
#footer-menu ul li.last a {
	border-right: 1px solid #ffffff;
}
#footer-menu ul li.active a {
	background-color: #585a60;
}
#footer-menu ul li a:hover {
	background-color: #585a60;
}

#footer-copyright1 {
	width: 55%;
	height: 38px;
	margin: 0;
	float: left;
}
#footer-copyright2 {
	width: 45%;
	height: 38px;
	float: left;
	margin: 0;
}
#footer-copyright1 p, #footer-copyright2 p {
	margin-top: 0px;
	font-size: 10px;
	color: #FFF;
}
#footer-copyright2 p {
	float: right;
	text-align: right;
}