<div class="carousel slide" data-ride="carousel" id="circleContent">
	<ol class="carousel-indicators">
		<!-- Indicators -->
		<li class="active" data-slide-to="0" data-target="#circleContent">
			&nbsp;</li>
		<li data-slide-to="1" data-target="#circleContent">
			&nbsp;</li>
		<li data-slide-to="2" data-target="#circleContent">
			&nbsp;</li>
		<li data-slide-to="3" data-target="#circleContent">
			&nbsp;</li>
		<li data-slide-to="4" data-target="#circleContent">
			&nbsp;</li>
	</ol>
	<!-- Wrapper for slides -->
	<div class="carousel-inner">
		<div class="item active">
			<img alt="芳林莊園" src="/userUpload/images/10512106/%E6%A9%AB%E5%B9%85%E8%8A%B3%E6%9E%97.jpg" style="width:100% height:250px" />
			<div class="carousel-caption">
				<h4>
					<span style="font-family='微軟正黑體'">歡迎來到芳林芭樂農園!!</span></h4>
			</div>
		</div>
		<div class="item">
			<img alt="芳林莊園" src="/userUpload/images/10512106/%E6%A9%AB%E5%B9%85app.jpg" style="width:80%" />
			<div class="carousel-caption">
				<h4>
					<span style="font-family='微軟正黑體'">歡迎來到芳林芭樂農園!!</span></h4>
			</div>
		</div>
		<div class="item">
			<img alt="芳林莊園" src="/userUpload/images/10512106/2017%E6%A9%AB%E5%B9%85.jpg" style="width:80%" />
			<div class="carousel-caption">
				<h4>
					<span style="font-family='微軟正黑體'">歡迎來到芳林芭樂農園!!</span></h4>
			</div>
		</div>
		<div class="item">
			<img alt="芳林莊園" src="/userUpload/images/10512106/%E8%8A%AD%E6%A8%82%E6%A9%AB%E5%B9%85.jpg" style="width:80%" />
			<div class="carousel-caption">
				<h4>
					<span style="font-family='微軟正黑體'">歡迎來到芳林芭樂農園!!</span></h4>
			</div>
		</div>
		<div class="item">
			<img alt="芳林莊園" src="/userUpload/images/10512106/%E5%B0%8F%E9%B3%A5.jpg" style="width:80%" />
			<div class="carousel-caption">
				<h4>
					<span style="font-family='微軟正黑體'">歡迎來到芳林芭樂農園!!</span></h4>
			</div>
		</div>
	</div>
	<!-- Left and right controls --><a class="carousel-control-prev" data-slide="prev" href="#circleContent" role="button"><span class="sr-only">&lsaquo;</span> </a> <a class="carousel-control-next" data-slide="next" href="#circleContent" role="button"> <span class="sr-only">&rsaquo;</span> </a></div>
<script src="https://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script><script src="https://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script><script> 
   $(document).ready(function(){ 
    $('#circleContent').carousel({interval:5000});//每隔5秒自動輪播 
   }); 
  </script>
<div class="bgw1">
	<div class="title1area revealOnScroll" data-animation="zoomIn">
		<div class="clearfix  revealOnScroll" data-animation="zoomIn">
			<h4 class="bigtitle revealOnScroll" data-animation="zoomIn">
				welcome</h4>
			<div align="center" class="col-md-12 col-sm-6 col-xs-12" style="margin-top: 12px;margin-bottom: 12px;">
				<h1>
					<strong style="background-color: initial;">一生懸命，自慢的芭樂&mdash;芳林</strong></h1>
				<div id="introduce">
					<br />
					<br />
					<span style="color:#f0ffff;"><strong>芳林․芭樂莊園所生產的芭樂，以對土地較友善的種植方式，嚴謹的管理及記錄生產過程，</strong></span><br />
					<br />
					<span style="color:#f0ffff;"><strong>並讓它以最自然的方式自然生長，讓它擁有該有的原始風味，就像眾給自己家人吃一樣，</strong></span><br />
					<br />
					<span style="color:#f0ffff;"><strong>希望您也可以透過芳林，</strong></span><br />
					<br />
					<span style="color:#f0ffff;"><strong>安心與健康的食用，這就是芳林給您最好的祝福。</strong></span></div>
				<br />
				&nbsp;</div>
		</div>
	</div>
</div>
<div class="bgw2">
	<div class="img">
		<div class="title1area revealOnScroll" data-animation="zoomIn" style="text-align: center;">
			<div style="text-align: center;">
				<div>
					&nbsp;</div>
				<div>
					&nbsp;</div>
				<div>
					&nbsp;</div>
				<div class="bigtitle revealOnScroll" data-animation="zoomIn">
					<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>
					<div>
						<strong><span style="color:#f0ffff;"><span style="font-size:30px;">&ldquo;我的芭樂自然熟成，八、九分熟最好吃！&rdquo;</span></span></strong></div>
					<div>
						&nbsp;</div>
				</div>
			</div>
			<div>
				<hr />
				<p>
					&nbsp;</p>
			</div>
			<div>
				&nbsp;</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>
		<hr />
	</div>
</div>
<div class="bgw3">
	<div class="img">
		<div class="title1area revealOnScroll" data-animation="zoomIn" style="text-align: center;">
			<div>
				&nbsp;</div>
			<div>
				&nbsp;</div>
			<div>
				&nbsp;</div>
			<div class="bigtitle revealOnScroll" data-animation="zoomIn">
				<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>
					<strong><span style="color:#f0ffff;"><span style="font-size:30px;">芳林生態</span></span></strong></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>
		</div>
		<div>
			<hr />
			<p>
				&nbsp;</p>
		</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/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 class="fb-like" data-action="like" data-href="https://www.facebook.com/%E8%8A%B3%E6%9E%97-%E8%8A%AD%E6%A8%82%E8%BE%B2%E5%9C%92-297327576945814/" data-layout="standard" data-share="true" data-show-faces="true" data-size="small">
	&nbsp;</div>
<div id="fb-root">
	&nbsp;</div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = 'https://connect.facebook.net/zh_TW/sdk.js#xfbml=1&version=v3.1';
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<p>
	&nbsp;</p>
<p>
	&nbsp;</p>
<p>
	&nbsp;</p>
<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" />
	<script src="https://ajax.aspnetcdn.com/ajax/modernizr/modernizr-2.7.2.js"></script><script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.1.0.js"></script><script type="text/javascript">
$(function() {

  var $window           = $(window),
      win_height_padded = $window.height() * 1.1,
      isTouch           = Modernizr.touch;

  if (isTouch) { $('.revealOnScroll').addClass('animated'); }

  $window.on('scroll', revealOnScroll);

  function revealOnScroll() {
    var scrolled = $window.scrollTop(),
        win_height_padded = $window.height() * 1.1;

    // Showed...
    $(".revealOnScroll:not(.animated)").each(function () {
      var $this     = $(this),
          offsetTop = $this.offset().top;

      if (scrolled + win_height_padded > offsetTop) {
        if ($this.data('timeout')) {
          window.setTimeout(function(){
            $this.addClass('animated ' + $this.data('animation'));
          }, parseInt($this.data('timeout'),10));
        } else {
          $this.addClass('animated ' + $this.data('animation'));
        }
      }
    });
    // Hidden...
   $(".revealOnScroll.animated").each(function (index) {
      var $this     = $(this),
          offsetTop = $this.offset().top;
      if (scrolled + win_height_padded < offsetTop) {
        $(this).removeClass('animated zoomInUp zoomIn slideInLeft slideInRight  zoomIn pulseIn  pulse')
      }
    });
  }

  revealOnScroll();
});</script></p>
<p>
	&nbsp;</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" />

	<style type="text/css">

/*************************************************字形設定********************************************************************************************/

*{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;
		} 
 
.bgw1 { 
 background:url(/userUpload/images/10512106/1514856915708.jpg);
 background-size:100% 100%; 
 center;
 background-repeat: no-repeat;
 background-attachment: fixed; 
 color:white;
 position: relative;
 center;
		}


.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: url(http://file04.16sucai.com/d/file/2015/0510/309af07b761dca0a7919596dde57f39d.jpg);
    background-attachment:fixed;
}
/*********************************************************************/
						   .FBWrapper {
							position: relative;
							padding-bottom: 56.25%; /* 16:9 */
							
							height: 0;
						}
						.FBWrapper iframe {
							position: relative;
							top: 0;
							left: 0;
							width: 100%;
							height: 80%;
						}
	
/*****************************************************************動畫****************************************************************************/


/************************ Mobile Grid **************************************************************************/
.g-m-12 {	width: 100%;}	
.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: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:greenyellow;				
font-size: 3em;				
margin-bottom: 50px;			
}

.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;		
}

/**************功能表*****************/
.navbar-default {
    background-color: yellow;
     border-color: #e7e7e7;
    background-color: yellow;
    
}
.navbar-default .navbar-nav>li>a {
    color: cornflowerblue;
}
/***************內容************************/
body {
    font-family: '微軟正黑體',Arial,sans-serif;
    font-size: 15px;
    line-height: 1.428571;
    color: white;
    background-color: greenyellow;
    background: url(http://file04.16sucai.com/d/file/2015/0510/309af07b761dca0a7919596dde57f39d.jpg);
    background-attachment: fixed;
    padding-top: 31px;

}
/**************************輪播功能*******************************************/
.carousel-control-prev, .carousel-control-next {
    position: absolute;
    top: 0;
    bottom: 0;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: center;
    justify-content: center;
    width: 15%;
    color: #fff;
    text-align: center;
    opacity: 0.5;
}
.carousel-control-next {
    right: 0;
}
.carousel-control-next-icon {
    background-image: url(data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' f…3Cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E);
}
.carousel-control-prev-icon {
    background-image: url(data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' f…3Cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E);
}
.carousel-control-prev-icon, .carousel-control-next-icon {
    display: inline-block;
    width: 20px;
    height: 20px;
    background: transparent no-repeat center center;
    background-size: 100% 100%;
}
	
#circleContent{ 
    width:100%; 
    height:100%; 
   }
/****************************************************************************************************************/</style>
