/*-------------------------------以下基本設定------------------------------------*/
body, div, dl, dt, dd, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td {
	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;
}

body {
	background-color:#FFF;

}


/*-----------------------------以下切版-------------------------------------*/

.TOP_BG {/*上方背景用*/
	height: auto;
		background:url(images/index_01.jpg) no-repeat  top center;
	min-width:1002px;
	width:100%;
		overflow-x:hidden;
	
	width: 100%;
	min-width: 1002px;/*最小寬度設定*/
 	width: expression(document.body.clientWidth < 1002? "1002px": "auto" );

}
.WRAP {
	overflow-x:hidden;
	position: relative;
	margin: 0 auto;
	margin-top:-99px;/*被選單往下推的距離*/
	width: 100%;
	background:url(images/index_01.jpg) no-repeat  top center;
	/*max-width: 1002px;最大寬度設定*/
/* 	width: expression(document.body.clientWidth > 1002? "1002px": "auto" );*/
}
.header {/*頁首*/
	position:relative;
	margin:0 auto;
	max-width: 1002px;/*最大寬度設定*/
 	width: expression(document.body.clientWidth > 1002? "1002px": "auto" );
	height: 754px;
	
}
.article {/*內容區*/
/*height: 818px;不可以設高才能延伸*/
	background-image: url(images/index_02.jpg);
	background-position:top center;

}
.footer {/*頁尾*/
	background-image: url(images/index_03.jpg);
	height: 131px;
	background-position:top center;
	
}
/*------------------------------以下浮動區塊------------------------------------*/
.fb_ {
	position: absolute;
	z-index: 99;
	margin-top: 10px;
	left: 650px;
}
.BB {
	position: absolute;
	z-index: 1;
	left: 490px;
	top: 0px;
}
.logo {
	position: absolute;
	z-index: 99;
	left: 35%;
	top: 320px;
-webkit-animation:bounceIn 1s 1s ease both;
-moz-animation:bounceIn 1s 1s ease both;}
@-webkit-keyframes bounceIn{
0%{opacity:0;
-webkit-transform:scale(.3)}
50%{opacity:1;
-webkit-transform:scale(1.05)}
70%{-webkit-transform:scale(.9)}
100%{-webkit-transform:scale(1)}
}
@-moz-keyframes bounceIn{
0%{opacity:0;
-moz-transform:scale(.3)}
50%{opacity:1;
-moz-transform:scale(1.05)}
70%{-moz-transform:scale(.9)}
100%{-moz-transform:scale(1)}
}

.open {/*動態PNG*/
/*	position: absolute;
	margin-left: 300px;
	margin-top: 700px;
	z-index: 108;
	width: 467px;
	height: 151px;*/
}
#gotop {/*回頂端*/
	/*display: none;預設隱藏*/
	position: fixed;/*固定在右下角*/
	right: 15px;
	bottom: 50px;
	padding: 10px 15px;
	font-size: 20px;
	background-color: #68CEFF;
	color: #FFFFFF;
	cursor: pointer;
	z-index: 999;
}
/*------------------------------以下兩個人-----------------------------------*/

#left{
	
	width:933px;
	height:793px;
	background-image:url(images/left.png);
	position:absolute;
	left:-10%;
	z-index:50;
	top:0;
	
-webkit-animation:fadeInLeft 1s .5s ease both;
-moz-animation:fadeInLeft 1s .5s ease both;}
@-webkit-keyframes fadeInLeft{
0%{opacity:0;
-webkit-transform:translateX(-200px)}
100%{opacity:1;
-webkit-transform:translateX(0)}
}
@-moz-keyframes fadeInLeft{
0%{opacity:0;
-moz-transform:translateX(-200px)}
100%{opacity:1;
-moz-transform:translateX(0)}
}
#right{
	width:933px;
	height:793px;
	background-image:url(images/right.png);
	position:absolute;
	right:-10%;
	z-index:90;
	top:0;

-webkit-animation:fadeInRight 1s .5s ease both;
-moz-animation:fadeInRight 1s .5s ease both;}
@-webkit-keyframes fadeInRight{
0%{opacity:0;
-webkit-transform:translateX(200px)}
100%{opacity:1;
-webkit-transform:translateX(0)}
}
@-moz-keyframes fadeInRight{
0%{opacity:0;
-moz-transform:translateX(200px)}
100%{opacity:1;
-moz-transform:translateX(0)}
}
/*------------------------------以下選單（按鈕）-----------------------------------*/


#FIXED {/*選單條*/
	z-index: 999;/*定位選單*/
	position: relative;
	top: 540px;margin:0 auto;

}
#tabMenu {
	
	background-image:url(images/menu-bg.png);background-position:top center;
	background-repeat:no-repeat;
	height: 99px;
	width:100%;
		
}
#tabMenu ul {
	position:relative;
	margin:0 auto;
	list-style-type: none;
	width: 800px;
	height: 50px;
	padding-top: 30px;
	background-repeat: no-repeat;
	background-position: left bottom;
	
}


.btn{
	position:absolute;
	width:97px;
	height:23px;
	cursor:pointer;
	z-index: 91;
	}
.S1 {
	left:0px;
	background-image: url(images/btn_01.png);
	
-webkit-animation:bounceInLeft 1s .2s ease both;
-moz-animation:bounceInLeft 1s .2s ease both;}
@-webkit-keyframes bounceInLeft{
0%{opacity:0;
-webkit-transform:translateX(-2000px)}
60%{opacity:1;
-webkit-transform:translateX(30px)}
80%{-webkit-transform:translateX(-10px)}
100%{-webkit-transform:translateX(0)}
}
@-moz-keyframes bounceInLeft{
0%{opacity:0;
-moz-transform:translateX(-2000px)}
60%{opacity:1;
-moz-transform:translateX(30px)}
80%{-moz-transform:translateX(-10px)}
100%{-moz-transform:translateX(0)}
}
.S2 {
	left:100px;
	background-image: url(images/btn_02.png);
	
-webkit-animation:bounceInLeft 1s .4s ease both;
-moz-animation:bounceInLeft 1s .4s ease both;}
@-webkit-keyframes bounceInLeft{
0%{opacity:0;
-webkit-transform:translateX(-2000px)}
60%{opacity:1;
-webkit-transform:translateX(30px)}
80%{-webkit-transform:translateX(-10px)}
100%{-webkit-transform:translateX(0)}
}
@-moz-keyframes bounceInLeft{
0%{opacity:0;
-moz-transform:translateX(-2000px)}
60%{opacity:1;
-moz-transform:translateX(30px)}
80%{-moz-transform:translateX(-10px)}
100%{-moz-transform:translateX(0)}
}

.S3 {
	left:650px;
	background-image: url(images/btn_03.png);
	
-webkit-animation:bounceInRight 1s .2s ease both;
-moz-animation:bounceInRight 1s .2s ease both;}
@-webkit-keyframes bounceInRight{
0%{opacity:0;
-webkit-transform:translateX(2000px)}
60%{opacity:1;
-webkit-transform:translateX(-30px)}
80%{-webkit-transform:translateX(10px)}
100%{-webkit-transform:translateX(0)}
}
@-moz-keyframes bounceInRight{
0%{opacity:0;
-moz-transform:translateX(2000px)}
60%{opacity:1;
-moz-transform:translateX(-30px)}
80%{-moz-transform:translateX(10px)}
100%{-moz-transform:translateX(0)}
}
.S4 {
	left:750px;
	background-image: url(images/btn_04.png);
	
-webkit-animation:bounceInRight 1s .4s ease both;
-moz-animation:bounceInRight 1s .4s ease both;}
@-webkit-keyframes bounceInRight{
0%{opacity:0;
-webkit-transform:translateX(2000px)}
60%{opacity:1;
-webkit-transform:translateX(-30px)}
80%{-webkit-transform:translateX(10px)}
100%{-webkit-transform:translateX(0)}
}
@-moz-keyframes bounceInRight{
0%{opacity:0;
-moz-transform:translateX(2000px)}
60%{opacity:1;
-moz-transform:translateX(-30px)}
80%{-moz-transform:translateX(10px)}
100%{-moz-transform:translateX(0)}
}

/*-----------------------------以下切換頁-------------------------------------*/
/*#BOX1,*/ #BOX2, #BOX3, #BOX4 {
	display: none;
}
.BOX {
	max-width: 850px;最大寬度設定
 	width: expression(document.body.clientWidth >850? "850px": "auto" );
	margin:0 auto;
	width: 100%;
	padding: 5px 3% 5px 5%; /*表格與外部的間距*/
}

#BOX2{
	background-image:url(images/horse.jpg);
	background-position:top center;
	background-repeat:no-repeat;}
/*-----------------------------預設文字設定---------------------------------*/	
body, td, th {
	color: #000;
	font-size: 1em;
	line-height: 1.8;
	text-align: justify;
	letter-spacing: 0.02em;
	font-family: "微軟正黑體", "新細明體", "Arial";
}
a {
	text-decoration: none;
	color: #06F;
	outline: none; /* for Firefox 清虛線*/
 	hlbr:expression(this.onFocus=this.blur()); /* for IE 清虛線*/
}
img {
	border: 0px;
}
h5 {/*文字下間距*/
	font-size: 2em;
	color: #FFFFFF;
	padding-top: 5px;/*font-weight: bold;*//*text-shadow: 0px 0px 1px rgba(0,0,0,0.3);*/	/*letter-spacing: 0.1em;*/
}
h6 {/*文字前有小圖*/
	font-size: 1em;
	color: #CC0000;
	padding-left: 1em;
}
.red {/*變紅色*/
	font-size: 1.5em;
	color: #3399FF;
}
.green {/*變綠色*/
	font-size: 1em;
	color: #009900;
}
.sp {/*文字註解*/
	font-size: 0.9em;
	color: #000000;
	line-height: 1.5em
}
/*-----------------------------以下表格-------------------------------------*/

.table {	           /*整體表格*/
	width: 100%;
	margin: 10px 0% 10px 0%; /*表格與外部的間距*/
	/*text-shadow: 1px 1px 2px #333;  文字陰影*/
	border: 1px #FFF dashed; /*框線顏色,樣式*/
	background-color: #BCEFFC;
	border-collapse: collapse; /*允許框線重疊*/
}
.table td {
	text-align: center;	   /*文字置中*/
	height: 1.6em;
	line-height: 1.6em;/*列_高度*/
	padding: 0.2em;/*列_文字與框的距離*/
	border: #FFF dashed;/*框線顏色,樣式*/
	/*內_框線粗細*/
	border-top-width: 0px;
	border-bottom-width: 1px;
	border-left-width: 1px;
	border-right-width: 0px;
}
.table th {
	line-height: 2em;/*第1列_高*/
	color: #FFF;/*第1列_文字顏色*/
	text-align: center;/*第1列_文字置中*/
	font-weight: bold;/*第1列_粗體*/
	letter-spacing: 2px;
	background-color: #68CEFF;/*第1列_底色*/
	border: #FFF dashed;/*框線顏色,樣式*/
	/*首_框線粗細*/
	border-top-width: 1px;
	border-bottom-width: 1px;
	border-left-width: 1px;
	border-right-width: 0px;
}
.table tr:hover {   /*滑鼠滑過*/
	background-color: #FFFFFF;
	background-color: rgba(104,206,255,0.4);
}

/*------------------------------- 手機版本 -----------------------------------------*/
@media screen and (max-width: 480px) {
/* 如果使用者之視窗寬度 <= 480px，將會再載入這裡的 CSS。    */
* {
	margin: 0;
	padding: 0;
	/*解決用了padding後版面亂掉的問題,ie8不支援*/
	box-sizing: border-box;
	-ms-box-sizing: border-box;
	-webkit-box-sizing: border-box;/*list-style:none;*/

}	


.TOP_BG {/*上方背景用*/
	width: 100%;
	height: auto;
	background: #6F9 no-repeat 50% top;
	min-width: 480px;/*最小寬度設定*/
 	width: expression(document.body.clientWidth < 480? "480px": "auto" );
	
}
.WRAP {
	position: relative;
	margin: 0 auto;
	background-color: #FFF;
	max-width: 480px;/*最大寬度設定*/
 	width: expression(document.body.clientWidth > 480? "480px": "auto" );
	margin-top: -60px;
	
}
.header {/*頁首*/
	height: 722px;
	background-color: #FCF;
}
#FIXED {
	width:100%;
	z-index: 999;/*定位選單*/
	position: relative;
	top: 500px;
}

#tabMenu {
	padding-left: 0%;
	background-color: #F00;
	width: 100%;

	overflow:hidden;
	height: 60px;
}
#tabMenu ul {
	list-style-type: none;
	margin: 0;
	padding: 0;

	height: auto;
	padding-top: 5px;
	background-repeat: no-repeat;
	background-position: left bottom;
}

.BOX {
	top: 800px;
	width: 100%;
	padding: 10px 5% 10px 10%; /*表格與外部的間距*/
}
}