<div class="clearfix">
	&nbsp;</div>
<div class="bgw1">
	<div class="img">
		<div style="text-align: center;">
			<div class="FBWrapper" style="text-align: left;">
				<iframe allowtransparency="true" scrolling="no" src="//www.facebook.com/v2.5/plugins/page.php?href=https://www.facebook.com/%E8%8A%B3%E6%9E%97-%E8%8A%AD%E6%A8%82%E8%8E%8A%E5%9C%92-297327576945814/;width=300&amp;show_facepile=true&amp;small_header=true&amp;hide_cover=false&amp;show_posts=true&amp;locale=zh_TW" style="border:none; overflow:hidden;max-width: 100%; height: 150px; float:left;"></iframe></div>
		</div>
	</div>
</div>
<div class="wel">
	<div class="p2">
		<div class="title1area revealOnScroll" data-animation="zoomIn">
			<div class="clearfix  revealOnScroll" data-animation="zoomIn">
				<div class="bigtitle revealOnScroll" data-animation="zoomIn">
					<strong><span style="color:greenyellow;"><span style="font-size:35px;">welcome</span></span></strong></div>
				<div class="smalltitle revealOnScroll" data-animation="zoomIn">
					<strong><span style="color:greenyellow;"><span style="font-size:30px;">芳林莊園農場</span></span></strong>
					<hr />
				</div>
			</div>
			<h1>
				&nbsp;</h1>
			<h1>
				<strong style="background-color: initial;">一生懸命，自慢的芭樂&mdash;芳林</strong></h1>
			<div id="introduce">
				<div class="p1" style="text-align: center;">
					&nbsp;</div>
				<div class="p1" style="text-align: center;">
					<span style="color:#f0ffff;"><strong>芳林․芭樂莊園所生產的芭樂，以對土地較友善的種植方式，嚴謹的管理及記錄生產過程，<br />
					<br />
					並讓它以最自然的方式自然生長，讓它擁有該有的原始風味，就像眾給自己家人吃一樣，希望您也可以透過芳林，</strong></span></div>
				<br />
				<span style="color:#f0ffff;"><strong>安心與健康的食用，這就是芳林給您最好的祝福。</strong></span></div>
		</div>
	</div>
</div>
<div class="bgw2">
	<div class="img">
		<div class="p2">
			<div style="text-align: center;">
				<div style="text-align: center;">
					<div>
						&nbsp;</div>
					<div>
						&nbsp;</div>
					<div>
						&nbsp;</div>
					<div>
						<strong><span style="font-size:35px;"><span style="color:greenyellow;">芭樂展現浪漫原味</span></span></strong></div>
					<div>
						&nbsp;</div>
					<div style="background: rgba(65,199,76,0.50) ">
						<p>
							&nbsp;</p>
						<p>
							<strong><span style="color:#f0ffff;"><span style="font-size:30px;">芳林生態</span></span></strong></p>
						<p>
							&nbsp;</p>
						<div>
							<strong><span style="color:#f0ffff;"><span style="font-size:30px;">&ldquo;我的芭樂自然熟成，八、九分熟最好吃！&rdquo;</span></span></strong></div>
						<div>
							&nbsp;</div>
						<div>
							&nbsp;</div>
						<div>
							&nbsp;</div>
						<div>
							&nbsp;</div>
						<div>
							&nbsp;</div>
					</div>
				</div>
				<div>
					<hr />
					<p>
						&nbsp;</p>
				</div>
				<div>
					&nbsp;</div>
			</div>
		</div>
		<div style="text-align: center;">
			<div class="row">
				<div class="col-md-12 col-sm-12 col-xs-12">
					<p>
						&nbsp;</p>
					<div class="col-md-4 col-sm-6 col-xs-12">
						<div class="col-md-12 col-sm-12 col-xs-12">
							<img alt="" class="image-responsive img-rounded img-thumbnail image-full" src="/userUpload/images/10512106/S_7032527100136_resized.jpg" style=" width: 400px; text-align: start; height:  auto;" /></div>
					</div>
					<div class="col-md-4 col-sm-6 col-xs-12">
						<div class="col-md-12 col-sm-12 col-xs-12">
							<img alt="" class="image-responsive img-rounded img-thumbnail image-full" src="/userUpload/images/10512106/S_7032527145429_resized.jpg" style=" width: 400px; text-align: start; height:  auto; " /></div>
					</div>
					<div class="col-md-4 col-sm-12 col-xs-12">
						<div class="col-md-12 col-sm-12 col-xs-12">
							<img alt="" class="image-responsive img-rounded img-thumbnail image-full" src="/userUpload/images/10512106/%E8%8A%AD%E6%A8%82_resized.jpg" style=" width: 400px; text-align: start; height:  auto; " /></div>
					</div>
					<p>
						&nbsp;</p>
					<br />
					<p>
						&nbsp;</p>
					<div class="col-md-4 col-sm-6 col-xs-12">
						<div class="col-md-12 col-sm-12 col-xs-12">
							<img alt="" class="image-responsive img-rounded img-thumbnail image-full " src="/userUpload/images/10512106/%E8%8A%AD%E6%A8%822_resized.jpg" style=" width: 400px; text-align: start; height:  auto;" /></div>
					</div>
					<div class="col-md-4 col-sm-6 col-xs-12">
						<div class="col-md-12 col-sm-12 col-xs-12">
							<img alt="" class="image-responsive img-rounded img-thumbnail image-full" src="/userUpload/images/10512106/guavasell_resized.jpg" style=" width: 400px; text-align: start; height:  auto; " /></div>
					</div>
					<div class="col-md-4 col-sm-12 col-xs-12">
						<div class="col-md-12 col-sm-12 col-xs-12">
							<img alt="" class="image-responsive img-rounded img-thumbnail image-full" src="/userUpload/images/10512106/%E8%8A%B3%E6%9E%97%E8%8A%AD%E6%A8%82_resized.jpg" style=" width: 400px; text-align: start; height: auto; " /></div>
					</div>
					<p>
						&nbsp;</p>
				</div>
			</div>
		</div>
		&nbsp;
		<p>
			&nbsp;</p>
		<p>
			&nbsp;</p>
		<p>
			&nbsp;</p>
		<p>
			&nbsp;</p>
		<hr />
	</div>
</div>
<div class="bgw3">
	<div class="img">
		<div class="p2">
			<div style="text-align: center;">
				<div>
					&nbsp;</div>
				<div>
					&nbsp;</div>
				<div>
					&nbsp;</div>
				<div>
					<strong><span style="font-size:35px;"><span style="color:greenyellow;">可愛的小動物</span></span></strong></div>
				<div>
					&nbsp;</div>
				<div style="background:rgba(36,194,220,0.65) ">
					<p>
						&nbsp;</p>
					<p>
						&nbsp;</p>
					<p>
						<strong><span style="color:#f0ffff;"><span style="font-size:30px;">芳林生態</span></span></strong></p>
					<p>
						&nbsp;</p>
					<div>
						<strong><span style="color:#f0ffff;"><span style="font-size:30px;">&ldquo;有大自然的陪伴，芭樂變得更香甜&rdquo;</span></span></strong></div>
					<div>
						&nbsp;</div>
					<div>
						&nbsp;</div>
					<div>
						&nbsp;</div>
					<div>
						&nbsp;</div>
					<div>
						&nbsp;</div>
					<div>
						&nbsp;</div>
				</div>
			</div>
			<div style="text-align: center;">
				<div class="row">
					<div class="col-md-12 col-sm-12 col-xs-12">
						<hr />
						<div class="col-md-4 col-sm-6 col-xs-12">
							<div class="col-md-12 col-sm-12 col-xs-12">
								<img alt="" class="image-responsive img-rounded img-thumbnail image-full" src="/userUpload/images/10512106/1515084760586_resized.jpg" style=" width: 400px; text-align: start; height:  auto;" /></div>
						</div>
						<div class="col-md-4 col-sm-6 col-xs-12">
							<div class="col-md-12 col-sm-12 col-xs-12">
								<img alt="" class="image-responsive img-rounded img-thumbnail image-full" src="/userUpload/images/10512106/1515084766594_resized.jpg" style=" width: 400px; text-align: start; height:  auto; " /></div>
						</div>
						<div class="col-md-4 col-sm-12 col-xs-12">
							<div class="col-md-12 col-sm-12 col-xs-12">
								<img alt="" class="image-responsive img-rounded img-thumbnail image-full" src="/userUpload/images/10512106/1515084777516_resized.jpg" style=" width: 400px; text-align: start; height:  auto; " /></div>
						</div>
						<p>
							&nbsp;</p>
						<br />
						<p>
							&nbsp;</p>
						<div class="col-md-4 col-sm-6 col-xs-12">
							<div class="col-md-12 col-sm-12 col-xs-12">
								<img alt="" class="image-responsive img-rounded img-thumbnail image-full " src="/userUpload/images/10512106/1515084779133_resized.jpg" style=" width: 400px; text-align: start; height:  auto;" /></div>
						</div>
						<div class="col-md-4 col-sm-6 col-xs-12">
							<div class="col-md-12 col-sm-12 col-xs-12">
								<img alt="" class="image-responsive img-rounded img-thumbnail image-full" src="/userUpload/images/10512106/1515084775837_resized.jpg" style=" width: 400px; text-align: start; height: auto; " /></div>
						</div>
						<div class="col-md-4 col-sm-12 col-xs-12">
							<div class="col-md-12 col-sm-12 col-xs-12">
								<img alt="" class="image-responsive img-rounded img-thumbnail image-full" src="/userUpload/images/10512106/1514856929533_resized.jpg" style=" width: 400px; text-align: start; height: auto; " /></div>
						</div>
						<p>
							&nbsp;</p>
						<p>
							&nbsp;</p>
						<p>
							&nbsp;</p>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
<p>
	&nbsp;</p>
<p>
	<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css" rel="stylesheet" type="text/css" />
</p>
<style type="text/css">
<link rel="stylesheet" type="text/css" href="css/normalize.css" />
<link rel="stylesheet" type="text/css" href="css/htmleaf-demo.css">
<link rel="stylesheet" href="dist/aos.css" />
<link rel="stylesheet" href="css/styles.css" />

/*************************************************字形設定********************************************************************************************/
.p1{font-family:'微軟正黑體';text-align: center; }
.p2{font-family:sans-serif,'微軟正黑體';}
/************************************************文字介紹*********************************************************************************************/
	#introduce
			{
				position: relative;
				padding: 0em 0em 0em 0em;
				margin-right: 0px;
				margin-top:-5px;
                        	font-size:30px;
				Font-Family:'微軟正黑體'; 
                                   			
				
	}
/**********************************************圖片表格*************************************************************************************************/
	
	
	.img{text-align: center;class="img-rounded"}
	
	h1{text-align:center; color:white; Font-Family:微軟正黑體;font-size:30px;} 
.wel{ background:url(/userUpload/images/10512106/1515084762649.jpg); background-size:100% auto; center;background-repeat: no-repeat;  background-attachment: fixed; color:black;position: relative;
center;}
.bgw1{ background: #111111  url(/userUpload/images/10512106/1514856915708.jpg);
background-size:100% 100%;
background-repeat:no-repeat; 
center;
position: relative;
}
.bgw2{ background: url(/userUpload/images/10512106/1514856912201.jpg);background-size:100% auto; background-attachment: fixed;text-align:center;background-repeat: no-repeat;position: relative;}	
 .bgw3{ background: url(/userUpload/images/10512106/1514856925503.jpg);background-size:100% auto; background-attachment: fixed;text-align:center;background-repeat: no-repeat;position: relative;}	
body{background: rgba(0,0,0,1.00);}
.bgw{background: rgba(0,0,0,1.00);}
.FBWrapper {
							position: relative;
							padding-bottom: 56.25%; /* 16:9 */
							
							height: 0;
						}
						.FBWrapper iframe {
							position: relative;
							top: 0;
							left: 0;
							width: 100%;
							height: 80%;
						}	
/*****************************************************************動畫****************************************************************************/
	.title1area .bigtitle {				
position: relative;				
font-weight: 100;				
letter-spacing: .06em;				
text-transform: uppercase;				
color:#ffa100;				
font-size: 3em;				
margin-bottom: 10px;			
}.title1area 
.bigtitle:before, 
.title1area 
.bigtitle:after {				
content: '';				
position: absolute;				
top: 50%;				
transform: translateY(-50%);				
width: calc((100% - 300px) / 2);				
height: 2px;				
background: rgba(255, 255, 255, 0.9);}					
.title1area .bigtitle:before {				
left: 0;			}		
.title1area .bigtitle:after {				
right: 0;			}		
.title1area p{ color: white;					
font-size:1.2em;}

	<style type="text/css">
[class^='g-'] {	float: left;		width:100%;	box-sizing:border-box;} .clear-grid{	clear:both;	float:inherit;}
/* ****************************************2. Mobile Grid ***********************************************/
.g-m-12 {	width: 50%;}	
.g-m-11 {	width: 91.666663%;}	
.g-m-10 {	width: 83.33%;}	
.g-m-9 {	width: 74.999997%;}	
.g-m-8 {	width: 66.66666664%;}	
.g-m-7 {	width: 58.333%;}	
.g-m-6 {	width: 50%;}	
.g-m-5 {	width: 41.6665%;}	
.g-m-4 {	width: 33.33%;}	
.g-m-3 {	width: 24.99%;}	
.g-m-2 {	width: 16.66666%;}	
.g-m-1 {	width: 8.33%;}


.title1area {				
width: 100%;				
height: auto;				
text-align: center;				
padding: 60px 0 0 0;				
overflow: hidden;				
box-sizing: border-box;				
background: url();
}		
.title1area{padding:50px;}		
.title1area .smalltitle {						
color: green;				
margin-bottom: 5px;				
font-weight: 100;				
letter-spacing: .06em;				
font-size: 22px;							
}		
.title1area .bigtitle {				
position: relative;				
font-weight: 100;				
letter-spacing: .06em;				
text-transform: uppercase;				
color:green;				
font-size: 3em;				
margin-bottom: 10px;			
}.title1area 
.bigtitle:before, 
.title1area 
.bigtitle:after {				
content: '';				
position: absolute;				
top: 50%;				
transform: translateY(-50%);				
width: calc((100% - 300px) / 2);				
height: 2px;				
background: rgba(255, 255, 255, 0.9);}					
.title1area .bigtitle:before {				
left: 0;			}		
.title1area .bigtitle:after {				
right: 0;			}		
.title1area p{ color: white;					
font-size:1.2em;}				
/*********************RWD選擇顯示區塊**************************/		
@media screen and (max-width: 768px) {								
.g-m-6{
width:100%;				
padding: 0.2em;}			
.nav>li>a {   
position: relative;    
display: block;    
padding: 10px 15px;	color:black;}						
#animation2-2,#animation2-3,#animation2-5,#animation2-6  {				
position: relative;				margin: 1em 0 1em 0;										
}			
#animation2,#animation2-4{margin: 1em 0 1em 0;}						
#farmpicture {				
position: relative;				
padding: 0em 0.9em 0em 0.9em;				
color: white;				
text-align: center;			
}						
header{display:none;}			
body > div > div > div.col-md-3.load{display:inline}						
.content,.content2,.content3{				
position: absolute;				
left: 0;				
bottom: 0;}		}		
@media screen and (min-width: 768px) and (max-width: 992px){						
.content,.content2,.content3{				
position: absolute;				left: 0;				
bottom: 0%;}			
#animation2,#animation2-2,
	#animation2-3,
	#animation2-4,
	#animation2-5,
	#animation2-6			
	{height:430px;}														
	}	
@media screen and (min-width: 992px) {						
	#animation2,
	#animation2-2,
	#animation2-3,
	#animation2-4,
	#animation2-5,
	#animation2-6			
	{height:500px;}					
	}				
.container-fluid {			
width: -webkit-fill-available;			
padding-right: 0;			
padding-left: 0;			
margin-right: auto;			
margin-left: auto;		
}
		
/*****************************************************************動畫****************************************************************************/</style>
