html, body {
	  margin: 0 ;
	  height: auto;
	  overflow-x: hidden;
	  font-family:Arial, Helvetica, sans-serif;
	}

#Wrapper { 
	width:100%; 
	height:auto; 
	margin:0 auto;
	}

img{ border:0}

::selection { background:#666666; color:#fff;}
::-moz-selection { background:#666666; color:#fff;}
::-webkit-selection { background:#666666; color:#fff;}

.header{
	width:100%;
	height:auto;
	max-width:1024px;
	margin:0 auto;
	text-align:center;
	padding:15px 0 5px 0;
	}
/* 主選單 */
ul.nav-list {
	width:100%;
	list-style-type: none;
	text-align:center; 
	display:inline-block;
	font-size:12px;
	margin:0 0 0 30px;
	padding:15px 0;		
	} 
	ul.nav-list li{
	color:#c5c5c5; 
	line-height:160%;
	display:inline;
	font-size:14px;
	letter-spacing:2px;
	} 
	ul.nav-list li a:link {
		color:#4e4e4e;
		text-decoration: none;
		-webkit-transition: 0.3s ease-out;
		-moz-transition: 0.3s ease-out;
		-ms-transition: 0.3s ease-out;
		-o-transition: 0.3s ease-out;
		transition: 0.3s ease-out;	
		}
	ul.nav-list li a:visited {color:#4e4e4e;} 
	ul.nav-list li a:hover {color:#4cb818;}
	
	ul.nav-list li:after {
	content: "│";
	display:inline; 
	margin:0 22px 0 24px;
	
	}
	ul.nav-list li:last-child{ 
	color: transparent;
	margin:0 ;
	}
/* Phone選單 */
.PhoneBtns{
	  width:auto;
	  height:auto;
	  cursor:pointer;
	  top:0;
	  right:0;
	  position:absolute;
	  margin:19px 15px 0 0;
	  z-index:9999;
	  display:none;
	 }
	 
ul#PhoneNav {
	display:none;
    list-style: none;  
	width:100%;
    text-align:center;
	padding:0;
    margin:0;
	font-size:14px;
	background-color:#EFEFEF;	
    text-shadow: 1px 1px 1px #FFFFFF;
    text-decoration: none;
	position:absolute;
	z-index:9999;
    }
	ul#PhoneNav li {
	  width:100%;
	  border-top:1px solid #E5E5E5;
	  border-left:1px solid #E5E5E5;  
	  float:left;
	  height:auto;
	  margin:0 0 0 -1px;
	  }
	#PhoneNav li a {
	  color:#4e4e4e;
	  display: block;
	  padding: 12px;
	  text-decoration: none;
	  background-image: -moz-linear-gradient(top, #FFFFFF, #EFEFEF);
	  background-image: -ms-linear-gradient(top, #FFFFFF, #EFEFEF);
	  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#FFFFFF), to(#EFEFEF));
	  background-image: -webkit-linear-gradient(top, #FFFFFF, #EFEFEF);
	  background-image: -o-linear-gradient(top, #FFFFFF, #EFEFEF);
	  background-image: linear-gradient(top, #FFFFFF, #EFEFEF);
	  background-repeat: repeat-x;
	  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFF', endColorstr='#EFEFEF', GradientType=0);
	 }

.index-content{
	width:100%;
	max-width:970px;
	margin:0 auto;
	}
	.largeBanner { position:relative;}	
    
	.largeBanner h3{
		font-size:24px;	
		color:#fff;	
		position:absolute; 
		z-index:2;
		top:38%;
		left:9%;	
		padding:0;	
		}
		.largeBanner img{ width:100%;}


        .img_gray{
			-webkit-transition: 0.3s ease-out;
			-moz-transition: 0.3s ease-out;
			-ms-transition: 0.3s ease-out;
			-o-transition: 0.3s ease-out;
			transition: 0.3s ease-out;
				
			filter: url('../JSFiles/filters.svg#grayscale'); /* Firefox 3.5+ */
			filter: gray; /* IE6-9 */
			-webkit-filter: grayscale(0); /* Webkit Nightlies & Google Chrome Canary */
			}
			.img_gray:hover {
				filter: none; /* Applies to FF + IE */
				-webkit-filter: grayscale(1);
			    }
				
     .SmallBanner{ 
	 position:relative;
	 float:left;
	 margin:18px 0 0 0;
	 outline:18px solid #fff;
	 }	
	 .SmallBanner h3{
			font-size:24px;	
			color:#fff;	
			position:absolute; 
			z-index:2;
			top:38%;
			left:30%;
			padding:0;	
			}
			.SmallBanner img{ width:100%;}
			.M_span{ width:33.3%; }	
			.D_span{ width:66.6%; }	
			
	 .SmallBanner h4{
			font-size:24px;	
			color:#fff;	
			position:absolute; 
			z-index:2;
			top:36%;
			right:17%;
			padding:0;	
			}
	 .SmallBanner h5{
			font-size:24px;	
			color:#fff;	
			position:absolute; 
			z-index:2;
			top:33%;
			left:40%;
			padding:0;	
			}			
	 .contact{
			 width:35%;
			 height:auto;
			 min-height:250px;
			 font-size:13px;	
			 text-align:center;
			 float:left;
			 padding:70px 0 0 0;
			 margin:18px 0 0 0;
			 color:#c1c1c1;
			 vertical-align:top;
				 }	
				 .contact h3{ 
				 font-size:24px;
				 color:#808080;
				 font-weight:bold;
				 margin:0 0 15px 0;
				 }
				 .contact a{ 
				 font-size:14px; 
				 color:#bcc240;
				 line-height:160%;
				 }
				 .contact a:hover, .contact a:active{ color:#222;}
				 .contact p{ margin:5px 0; }
				 .contact p.address{margin:5px 0 15px 0;}
				 .contact hr{ 
				 width:88%;
				 height:1px;
				 background-color:#ededed;
				 border:0;
				 margin:15px auto;
				 }
				 .contact img{ margin:10px 5px 0 0; }
				 

				 
	 .event{
			 width:65%;
			 height:auto;
			 min-height:267px;
			 font-size:13px;	
			 text-align:center;
			 float:left;
			 padding:5% 0 3% 0;
			 margin:18px 0 0 0;
			 color:#c1c1c1;
			 background-color:#eeeeee;
			 vertical-align:top;
			 
 			 }	
			 .event h3{ 
				 font-size:24px;
				 color:#b5b5b5;
				 font-weight:bold;
				 margin:0;
				 }
				 
			 .event ul{ 
				 margin:15px 0 0 0;
				 padding:0 0 0 20px;				 
				 }	 
			 .event ul li {color:#b5b5b5; margin:10px 0;}
			 .event ul li span{color:#a6a6a6;  font-size:12px; vertical-align:middle; margin:0 10px 0 0;}
			 .event ul li a{ 
				 font-size:14px;
				 color:#8c8c8c;
				 }
				 .event ul li a:hover{ 
					 color:#527143;
					 }
		     .event .news{
					 width:75%;
					 margin:0 auto;
					 text-align:left;
					 line-height:160%;
					 color:#8c8c8c;
					 }


.footer{
	width:100%;
	height:auto;
	background-color:#fafafa;
	font-size:13px;
	color:#9f9f9f;
	text-align:center;
	float:left;
	padding:20px 0;
	margin:18px 0 0 0;
	}
	.footer img{ vertical-align:middle; margin:0 10px 0 0;}	 
	.footer .HsLogo	{ vertical-align:middle; margin:14px 2% 0 0; float:right;}		 

@media screen and (max-width: 900px) {
    .header{padding:3px 0 5px 0; text-align:left; }
	ul.nav-list{ display:none;}
    .PhoneBtns{ display:block; }
    ul#PhoneNav { display:block;}
}

@media screen and (max-width: 860px) {
		     .event .news{width:80%;}
}

@media screen and (max-width: 800px) {
    .SmallBanner h3{top:38%;font-size:20px; }
	.SmallBanner h4{top:35%;font-size:20px; }
	.SmallBanner h5{font-size:20px;}	
}
	
@media screen and (max-width: 650px) {
	.largeBanner h3{ top:38%; font-size:16px; }
	.SmallBanner h3{ font-size:16px; }
	.SmallBanner h4{font-size:16px; }
	.SmallBanner h5{top:33%;font-size:16px;}
	
	 .contact , .event{ width:100%;  padding:35px 0 20px 0; min-height:auto; }
	 .contact h3 , .event h3{ font-size:16px;}
	 .footer .HsLogo { display:none; }
}
@media screen and (max-width: 550px) {	
    .SmallBanner h5{top:32%;}
	.SmallBanner h3{ left:25%; }
}
@media screen and (max-width: 500px) {	


     .SmallBanner{ 
	 margin:10px 0 0 0;
	 outline:10px solid #fff;
	 }	
	.SmallBanner h4{top:30.5%;right:10%;font-size:16px; }
	.SmallBanner h5{top:27%;left:38%;}
}

@media screen and (max-width: 460px) {
    .SmallBanner h5{left:36%;}
	.SmallBanner h3{top:33%;left:21%;  }
}

@media screen and (max-width: 400px) {
	.largeBanner h3{ top:31%;left:5%;  }
	.SmallBanner h3{top:29%;left:15%;  }
	.SmallBanner h4{top:25%; }
	.SmallBanner h5{top:20%;left:33%;}
}

@media screen and (max-width: 350px) {
	.largeBanner h3{ top:28%;  }
	.SmallBanner h4{top:22%; }
	.SmallBanner h5{top:17%;left:30%;}
}

@media screen and (max-width: 320px) {
	.largeBanner h3{ left:4%;  }
    .SmallBanner h3{top:26%;left:10%;  }
}