html{
	overflow: scroll;
	overflow-x:hidden;
}

body, input, select, textarea {
	font-family: "微軟正黑體","Microsoft JhengHei","Raleway", Helvetica, sans-serif;
}
	
	
img {
    height: auto;
    max-width: 100%;
}

#container{
	width:100%;
	background-size:cover;
	background-repeat:no-repeat;
	background-position:bottom center;
	background-image:url(../images/bk.jpg);
	}

#content{
	width:60%;
	display:block;
	margin:0 auto;
	text-align:center;
	}
	
#content > img{
	width:100%;
	height:auto;
	display:block;
	}

#content .box{
	width:100%;
	display:block;
	margin:0 auto;
	overflow:hidden;
	text-align:center;
	background-size:100% 100%;
	background-repeat:no-repeat;
	background-position:top center;
	background-image:url(../images/pic_03.png);
	}

#content .box img{
	width:auto;
	height:auto;
	display:block;
	margin:0 auto;
	}

#content .box a{
	display:inline-block
	}


#content .box ul{
	padding:0;
	display:block;
	margin:0 auto;
	}

#content .box > ul{
	width:75%;
	padding:20px 20px 0 20px;
	margin:0 auto 20px auto;
	border:2px solid #be8f50;
	background-color:#f1dba9;
	
        /* IE 修正 */
        -pie-lazy-init: true;
        behavior: url(PIE.htc);
         
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
         
        /* 圓角效果 */
        border-radius: 20px;
        -o-border-radius: 20px;
        -ms-border-radius: 20px;
        -moz-border-radius: 20px;
        -khtml-border-radius: 20px;
        -webkit-border-radius: 20px 20px 20px 20px;
	}
	
#content .box ul li{
	display:block;
	text-align:left;
	overflow:hidden;
	padding:10px 0 20px 0;
	}

#content .box ul li .title{
	float:left;
	width:20%;
	display:block;
	}

#content .box ul li .title img{
	margin:0;
	}
			
#content .box ul li .text{
	width:80%;
	float:left;
	display:block;
	}

#content .box ul li .text p{
	color:#7f4e15;
	font-size:15px;
	text-align:left;
	line-height:20px;
	font-weight:bold;
	padding:5px 0 10px 0;
	}
		
#content .box ul li .text p span{
	color:#ba0808;
	}


#content .box ul li .text ul{
	width:100%;
	padding:0;
	display:block;
	margin:0 auto;
	}

#content .box ul li .text ul li{
	padding:10px 0 10px 0;
	}

	
#content .box ul li .text ul li span.num{
	width:22px;
	height:22px;
	float:left;
	color:#ffffff;
	line-height:22px;
	display:block;
	margin:0 15px 0 0;
	text-align:center;
	background-position:center;
	background-repeat:no-repeat;
	background-image:url(../images/num_bk.png);
	}

#content .box ul li .text ul li p{
	width:90%;
	float:left;
	display:inline-block;
	padding:0 0 10px 0;
	}
			
					
@media screen and (min-width: 1600px) { 

	#content{
		width:60%;
		}
	
	#content .box .note
	{
		width:auto;
		}


	#content .box .button
	{
		width:auto;
		}	

	#content .box ul li .title{
		width:20%;
		}
				
	#content .box ul li .text{
		width:80%;
		}
}  
	
@media screen and (min-width: 1200px) and (max-width: 1599px) {  

	#content{
		width:70%;
		}
		
	#content .box .note
	{
		width:70%;
		}


	#content .box .button
	{
		width:80%;
		}

	#content .box ul li .title{
		width:100%;
		float:none;
		margin:0 auto;
		padding:0 0 10px 0;
		}
				
	#content .box ul li .text{
		width:100%;
		float:none;
		margin:0 auto;
		padding:0 0 10px 0;
		}
		
	#content .box ul li{
		padding:0 0 10px 0;
		}
}  
 
 
@media screen and (min-width: 768px) and (max-width: 1199px) { 

	#content{
		width:80%;
		}
		 
	#content .box .note
	{
		width:70%;
		}


	#content .box .button
	{
		width:60%;
		}


	#content .box ul li .title{
		width:100%;
		float:none;
		margin:0 auto;
		padding:0 0 10px 0;
		}
				
	#content .box ul li .text{
		width:100%;
		float:none;
		margin:0 auto;
		padding:0 0 10px 0;
		}
		
	#content .box ul li{
		padding:0 0 10px 0;
		}
}  
  
@media screen and (min-width: 481px) and (max-width: 767px){  

	#content{
		width:100%;
		}
		

	#content .box .note
	{
		width:70%;
		}


	#content .box .button
	{
		width:50%;
		} 


	#content .box ul li .title{
		width:100%;
		float:none;
		margin:0 auto;
		padding:0 0 10px 0;
		}
				
	#content .box ul li .text{
		width:100%;
		float:none;
		margin:0 auto;
		padding:0 0 10px 0;
		}

	#content .box ul li .text p{
		font-size:13px;
		}
				
	#content .box ul li{
		padding:0 0 10px 0;
		}

	#content .box ul li .text ul li p{
		width:100%;
		float:none;
		}				
}  
	
@media screen and (max-width: 480px)
 { 

	#content{
		width:100%;
		}
		
	#content .box .note
	{
		width:70%;
		}


	#content .box .button
	{
		width:40%;
		}	

	#content .box ul li .title{
		width:100%;
		float:none;
		margin:0 auto;
		padding:0 0 10px 0;
		}

	#content .box ul li .title img{
		width:50%;
		}
						
	#content .box ul li .text{
		width:100%;
		float:none;
		margin:0 auto;
		padding:0 0 10px 0;
		}

	#content .box ul li .text p{
		font-size:13px;
		}
				
	#content .box ul li{
		padding:0 0 10px 0;
		}

	#content .box ul li .text ul li p{
		width:100%;
		float:none;
		}		
}