/*-------------------------------基本設定-----------------------------------*/
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;         	
	}

body {/*網頁搖動*/
	/*animation: shakeBody  .2s    2;
	animation-delay: .1s;
	transform-origin: 50%  40%;*/
	background-color:#000;
}


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

.img_S   { width: 95%; }
.img_A  { width: 90%;}


/*-----------------------------切版-------------------------------------*/
.bg{/*背景用*/
	background-image: url(images/index_01.jpg), url(images/index_02.jpg);
	background-position: center top ,   center 985px;/*第2張背景距頂端*/
	background-repeat: no-repeat , repeat;
	/*background-color:#000;*/
	width:100%;
	float:left;
	overflow-x: hidden;
}

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


.HEADER {/*刊頭*/
	/*height: 900px;*/
	float:left;
	width:100%;
}



.CONTENT {/*內容區_01*/
	margin-top:0;
	padding: 0%  5%  0  10%; 
	float:left;
	width: 100%;
	/*background:url(images/bg.jpg) no-repeat  top center;*/
	/*height:474px;*/
}


.footer {/*頁尾*/
	background:url(images/footer.jpg) no-repeat  bottom center;
	width:100%;
	height:94px;
	margin: 0 auto;
/*	position: fixed;*/
	float:left;
	bottom:0;
	z-index: 900;
}


/*-----------------------------定位高度寬度---------------------------------*/	
.head_box {/*定義刊頭高度*/
	display:block;
	float:left;
	position:relative;
	width: 100%;
	height:800px;/*底下內文距離頂端*/
}
.center_box{/*置中用*/
	text-align:center;
	}


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


	
h1 {/*標題-文字*/
	display: block;
	font-size: 1.5em;
	color: #CC0000;
	/*font-weight: bold;*/
	/*	text-shadow: 0px 0px 1px rgba(0,0,0,0.3);*/
}

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

h3{
	font-weight:normal;
	padding-bottom:1.5em;/*距離下面高度*/
	
	
	}
.color_01 {/*變紅色*/
	color: #CC0000;
	font-size:2em;
	font-weight:bold;
}

.color_02 {/*變綠色*/
	color: #233A98;
		font-weight:bold;
			font-size:1.3em;
}




/*------------------------------浮動區塊------------------------------------*/


@keyframes show {
	0% {
		opacity:0;
		transform:scale(20);
	}
	10% {
		opacity: 1;
	}
	100% {
		transform: scale(1);opacity: 1;
	}
}




.logo {
	display:block;
	position: absolute;
	z-index: 100;
	left: 30%;
	top: 30px;
	width:300px;
	height:200px;
	text-indent:-9999px;
	/*background-color:#0F0;*/
	outline: none; /* for Firefox 清虛線*/
	hlbr:expression(this.onFocus=this.blur()); /* for IE 清虛線*/
}

.logolink{ display: block;/*回官網*/
width:100%;
height:100%;
	
	}



@keyframes shakeBody {
	0% {
		transform: rotate(0deg);
	}

	30%{
		transform: rotate(5deg);
	}
	40% {
		transform:  rotate(0deg);
	}


	70%{
		transform: rotate(5deg);
	}
	80% {
		transform:  rotate(6deg);
	}

	90%{
		transform: rotate(-8deg);
	}
	100% {
		transform:  rotate(0deg);
	}
}



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

#gotop a:hover {/*回頂端*/
	opacity:0.9;
}
.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: 75%;
	height: 40px;
	font-weight: bold;
	font-size: 1.3em;
	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 {	           /*整體表格*/

	font-size:0.95em;
	width: 100%;
	margin: 10px 0% 10px 0%; /*表格與外部的間距*/
	/*border: 1px #FFF solid; 框線顏色,樣式*/

	border-collapse: collapse; /*允許框線重疊*/
}
.table td {
	/*text-align: center;	   文字置中*/
	height: 1.8em;
	line-height: 1.8em;/*列_高度*/
	padding: 0  1px 2px 1px;/*列_文字與框的距離*/
	border-bottom: 1px #FFF dashed; /*框線顏色,樣式*/
		background-color: rgba(255,153,51,0.1);
/*	background-color: #000000;*/
}

.td_center {
	text-align: center;	   /*文字置中*/
}

.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: #F66202;/*第1列_底色*/
	/*border: 1px #FFF dashed; 框線顏色,樣式*/

	
}
.table tr:hover {   /*滑鼠滑過*/

	background-color: #FFFFFF;
	background-color: rgba(255,153,51,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_00.jpg), url(images/index_02.jpg);
	background-position: top center, top center;
	background-repeat: no-repeat , repeat;
	background-size:100%, 200%;
	overflow:hidden;
}	

.head_box {/*定義刊頭高度*/
	height:420px;/*底下內文距離頂端*/
}
body {
	 animation: none;
}

.CONTENT {/*內容區_01*/
	padding: 0  15%  0  20%; 
}


.logo {
	display:none;

}

.footer {/*頁尾*/
	background:url(images/footer.jpg) no-repeat  bottom center;
	width:100%;
	height:94px;
	margin: 0 auto;
	position: fixed;
	bottom:0;
	z-index: 900;
}

.ww{/*BB動態-共用*/
	display:none;
	}
	



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

.table {	           /*整體表格*/
	width: 100%;
	margin: 30px 0% 10px 0%; /*表格與外部的間距*/

}
}

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

@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_00.jpg), url(images/index_02.jpg);
	background-position: top center, top center;
	background-repeat: no-repeat , repeat;

}
.footer {/*頁尾*/
	background:url(images/footer.jpg) no-repeat  bottom center;
	background-size:280%;
	width:100%;
	margin: 0 auto;
	position: fixed;
	bottom:0;
	z-index: 900;
}

.WRAP {/*全部網頁*/
	width: 100%;
	margin: 0 auto;
	position:relative;
}

.head_box {/*定義刊頭高度*/
	height:250px;/*底下內文距離頂端*/
}

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

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


.ww{/*BB動態-共用*/
	display:none;
	}
	
	body {
	 animation: none;
}
/*===================表格======================*/

.table {	           /*整體表格*/
	width: 100%;
	margin: 30px 0% 10px 0%; /*表格與外部的間距*/
	padding:1px;


}

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

}