/*-------------------------------基本設定-----------------------------------*/
body, div, dl, dt, dd, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td ,img {
	margin: 0;
	padding: 0;
	border-top-width: 100%;
	border-right-width: 100%;
	border-bottom-width: 100%;
	border-left-width: 100%;
	border-top-style: 0;
	border-right-style: 0;
	border-bottom-style: 0;
	border-left-style: 0;
	border: 0px;	
	font-size:16px;
}

*{	/*解決用了padding後版面亂掉的問題,ie8不支援*/
	-webkit-box-sizing: border-box;
 	-moz-box-sizing: border-box;   
 	box-sizing: border-box;         	
	}

/*-----------------------------圖片------------------------------------*/
/*img{width:100%;}*/
.show_hide {display: block; }/*電腦版顯示_手機版隱藏*/
.hide_show {display: none; }/*電腦版隱藏_手機版顯示*/

.img_S   {
	padding-bottom:1.8em;}
/*-----------------------------切版-------------------------------------*/
.bg{/*背景用*/
	background-image: url(images/index_01.jpg), url(images/index_02.jpg);
	background-position: top center,  top center;
	background-repeat: no-repeat , repeat;
}

.WRAP {/*全部內容*/
	max-width:800px;
	margin: 0 auto;
	position:relative;
}


.HEADER {/*刊頭*/
	height: 500px;
}


.CONTENT {/*內容區_01*/
	padding: 0%  14%  0  16%; 
}



.footer {/*頁尾*/
	background: url(images/index_03.jpg) no-repeat   top center;
	height: 156px;
	margin: 0 auto;	
}



#BOX1{
	padding:-10% 0 0 0;
	}


/*-----------------------------預設文字設定---------------------------------*/	
td, th ,p ,.CONTENT, .info, h1,h2,h3 {
	color: #FFF;
	font-size: 1em;
	line-height: 1.8;
	text-align: justify;
	letter-spacing: 0.02em;
	font-family: "微軟正黑體", "新細明體", "Arial";/*	font-weight: bold;*/
	font-weight:normal;
}
a {
	text-decoration: none;
	color: #09F;
	outline: none; /* for Firefox 清虛線*/
 	hlbr:expression(this.onFocus=this.blur()); /* for IE 清虛線*/
}

h1 {/*標題-文字*/
	font-size: 1.5em;
	color: #F95200;
	padding-top:2em;
}

h2 {/*小標*/
	display: block;
	font-size: 1em;
	color: #6633CC;
	margin:  0 0 30px 0;
}


.color_01 {/*變紅色*/
	color: #CC0000;
}

.color_02 {/*變綠色*/
	color: #009900;
}



/*------------------------------浮動區塊------------------------------------*/
/*查詢連結定位*/
/*.S1{
	 display: inline-block;    float: right;    position: relative;    width: 90px;}*/
/*查詢按鈕定位*/	 
/*.S2{
	width: 100%;    display: inline-block;    position: absolute;   left: 2%;    top: 6px;}	*/ 
.fb_ {/*按讚*/
	position: absolute;
	z-index: 99;
	margin-top: 10px;
	left: 50px;
}

.BB {
	position: absolute;
	z-index: 105;
	left:19%;
	top: 400px;
	-webkit-animation:fadeInLeftBig 1s .2s ease both;
	-moz-animation:fadeInLeftBig 1s .2s ease both;}

.logo {
	display:block;
	position: absolute;
	z-index: 100;
	left: 30%;
	top: 150px;
	outline: none; /* for Firefox 清虛線*/
	hlbr:expression(this.onFocus=this.blur()); /* for IE 清虛線*/
}

	
#gotop {/*回頂端*/
	display: none;/*預設隱藏*/
	position: fixed;/*固定在右下角*/
	right: 0;
	bottom: 20px;
	cursor: pointer;
	z-index: 900;
}


.join{
	margin: 20px 0  10px 15%;
	width:352px;
	height:79px;
	background-image:url(images/join1.png);
	background-repeat:no-repeat;
	cursor:pointer;
	}
.join:hover{
	background-image:url(images/join2.png);
	}
	
.phone{	/*輸入手機框*/
	width: 70%;
	height: 50px;
	font-weight: bold;
	font-size: 1em;
	text-shadow: 1px 1px 2px rgba(250,250,250,0.2);
	-webkit-font-smoothing: antialiased;
	color: #F86602;
	margin: 5px 0  10px 0;
	padding: 5px;
	background-color: #F3D8C5;
	background-image: none;
	border: 1px solid  #C30;
	border-radius: 4px;
	box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.075) inset;
	transition: border-color 0.15s ease-in-out 0s;
	box-shadow : 0.15s ease-in-out 0s;
	}	




/*-----------------------------表格-------------------------------------*/

.table {	           /*整體表格*/
	width: 100%;
	margin: 10px 0% 10px 0%; /*表格與外部的間距*/
	/*text-shadow: 1px 1px 2px #333;  文字陰影*/
	/*border:1px #FFF solid; 框線顏色,樣式*/
	border-collapse: collapse; /*允許框線重疊*/
}
.table td {
	text-align: center;	  /* 文字置中*/
	height: 1.8em;
	line-height: 1.6em;/*列_高度*/
	padding: 0  1px 2px 1px;/*列_文字與框的距離*/
	border-top:1px #FFF solid; /*框線顏色,樣式*/
	border-bottom:1px #FFF solid; /*框線顏色,樣式*/
	border-bottom-color: rgba(255,255,255,0.4);

}
.table th {
	border-radius: 4px 4px 0 0;
	line-height: 2em;/*第1列_高*/
	color: #FFF;/*第1列_文字顏色*/
	text-align: center;/*第1列_文字置中*/
	font-weight: bold;/*第1列_粗體*/
	letter-spacing: 2px;
	background-color: #FF6633;/*第1列_底色*/	/*border:1px #FFF solid; 框線顏色,樣式*/
	border-bottom:1px #FFF solid; /*框線顏色,樣式*/
		border-bottom-color: rgba(255,255,255,0.4);
}
.table tr:hover {   /*滑鼠滑過*/
	border-radius: 4px;
	background-color: #FFFFFF;
	background-color: rgba(255,102,0,0.4);
}

/*--------------------------CSS3效果--------------------------------*/


/* 可以查看動畫特效     http://daneden.github.io/animate.css/                */
/*在html的物件class後加入   animated  bounce  */
/*css位置放在自己的css之前，以便調整自己想要的順序*/
/*增加其他設定  http://www.openfoundry.org/tw/tech-column/9233-css3-animation  */

.animated {
  -webkit-animation-duration: 1s;/*播放一次動畫需要的時間*/
    animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
		  /* -webkit-animation-delay:5s    延遲多久後啟始動畫*/
		/*   animation-direction: alternate      播放兩次以上的話，會從 0% 至 100% ，再從 100% 回到 0%  */
}

.animated.infinite {/*動畫執行次數*/
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}

.animated.hinge {
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
}




/*=================平版版本=========================*/

@media screen and (min-width: 481px)  {
}
@media screen  and (max-width: 800px) {
.bg{/*背景用*/
	background-position: 50% top;
	background-image: url(images/index_01.jpg), url(images/index_02.jpg);
	background-position: top center, top center;
	background-repeat: no-repeat , repeat;
	background-size:200%, 200%;
	overflow:hidden;
}	
.HEADER {
	height:400px;
}

.CONTENT {/*內容區_01*/
	padding: 0%  14%  0  17%; 
}

	.img_S   { width: 95%; }
	

.footer {/*頁尾*/
	background: url(images/index_03.jpg) no-repeat   top center;
	height: 120px;
	margin: 0 auto;	
		background-size:200%;
}
.join{
	margin: 20px 0  10px 25%;
	width:290px;
	height:65px;
	background-image:url(images/join3.png);
	background-repeat:no-repeat;
	cursor:pointer;
	}
.join:hover{
	background-image:url(images/join3.png);
	}



/*===================表格======================*/

.table {	           /*整體表格*/
	width: 90%;


}
}

/*====================切版=========================*/

@media screen and (min-width: 320px)  {
}
@media screen  and (max-width: 480px) {
	
*{	/*解決用了padding後版面亂掉的問題,ie8不支援*/
	-webkit-box-sizing: border-box;
 	-moz-box-sizing: border-box;   
 	box-sizing: border-box;         	
	}
	


/*====================切版=========================*/
.bg{/*背景用*/
	background-position: 50% top;
	background-image: url(images/index_01.jpg), url(images/index_02.jpg);
	background-position: top center, top center;
	background-repeat: no-repeat , repeat;
	background-size:100%, 270%;
}
.footer {/*頁尾*/
	background: url(images/index_03.jpg) no-repeat   top center;
	height: 80px;
	margin: 0 auto;	
		background-size:300%;
}
.WRAP {/*全部網頁*/
	width: 100%;
	margin: 0 auto;
	position:relative;
}
.HEADER {
	height:auto;
}
.CONTENT {/*內容區_01*/
	padding: 0  5%  0  10%;

}


#BOX1{
	padding:-10% 0 0 0;
	}

.logo {
	display:none;
	position: absolute;
	z-index: 100;
	left: 30%;
	top: 100px;
	outline: none; /* for Firefox 清虛線*/
	hlbr:expression(this.onFocus=this.blur()); /* for IE 清虛線*/
}



.join{
	margin: 20px 0  10px 12%;
	width:290px;
	height:65px;
	background-image:url(images/join3.png);
	background-repeat:no-repeat;
	cursor:pointer;
	}
.join:hover{
	background-image:url(images/join3.png);
	}
.phone{	/*輸入手機框*/
	width: 65%;
	height: 35px;
	font-weight: bold;
	font-size: 0.9em;
	text-shadow: 1px 1px 2px rgba(250,250,250,0.2);
	-webkit-font-smoothing: antialiased;
	color: #F86602;
	margin: 5px 0  10px 3px;
	padding: 2px;
	background-color: #F3D8C5;
	background-image: none;
	border: 1px solid  #C30;
	border-radius: 4px;
	box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.075) inset;
	transition: border-color 0.15s ease-in-out 0s;
	box-shadow : 0.15s ease-in-out 0s;
	}	

/*===================圖片======================*/
.img_S   { width: 100%; }
.img_L   { width: 70%; }
.img_A  { width: 30%; }
.show_hide {	display: none; }/*電腦版顯示_手機版隱藏*/
.hide_show {	display: block; }/*電腦版隱藏_手機版顯示*/

}