<center>
	<div class="box5">
		<img src="/userUpload/images/10512106/%E8%8A%B3%E9%84%B0LOGO.jpg" />
		<div class="menu">
			<ul>
				<li id="menu01">
					&nbsp;</li>
				<li id="menu02">
					&nbsp;</li>
				<li id="menu03">
					&nbsp;</li>
				<li id="menu04">
					&nbsp;</li>
				<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
			</ul>
			<div class="flex">
				<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="button" data-share="true" data-show-faces="true" data-size="large">
					&nbsp;</div>
				<div id="fb-root">
					&nbsp;</div>
				<div class="line-it-button" data-lang="zh-Hant" data-type="share-e" style="display: none;">
					&nbsp;</div>
			</div>
		</div>
	</div>
</center>
<center>
	<div class="box">
		<div class="section" id="sec01">
			&nbsp;</div>
		<script>
$(document).ready(function(){
    $(function(){ $('#menu01').click(function(){ 
        $('html,body').animate({scrollTop:$('#sec01').offset().top}, 1000);});  
    }); 
}); 
</script>
		<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: -7px;margin-bottom: -14px;">
					<h1>
						<strong style="background-color: initial;">一生懸命，自慢的芭樂&mdash;芳林</strong></h1>
					<div id="introduce">
						<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><br />
						&nbsp;</div>
					<br />
					&nbsp;</div>
			</div>
			<a class="button1" href="http://www.lohasplus.com.tw/index.php?Act=925&amp;MK=925&amp;PK=926">了解更多...</a></div>
	</div>
</center>
<center>
	<div class="img">
		<div class="box1">
			<div class="section" id="sec02">
				&nbsp;</div>
			<script>
$(document).ready(function(){
    $(function(){ $('#menu02').click(function(){ 
        $('html,body').animate({scrollTop:$('#sec02').offset().top}, 1000);});  
    }); 
}); 
</script>
			<div class="title1area revealOnScroll" data-animation="zoomIn" style="text-align: center;">
				<div style="text-align: center;">
					<div>
						&nbsp;</div>
					<div class="bigtitle revealOnScroll" data-animation="zoomIn">
						<strong><span style="font-size:35px;">芭樂展現浪漫原味</span></strong></div>
					<div style="background: rgba(221, 225, 16, 0.76);border-radius: 12px; ">
						<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>
				</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="dowload">
							<div class="col-md-4 col-sm-12 col-xs-12">
								<div class="col-md-12 col-sm-12 col-xs-12">
									<img alt="" src="/userUpload/images/10512106/%E5%9C%96%E7%89%8741.png" style=" width: 350px; 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="" src="/userUpload/images/10512106/%E5%9C%96%E7%89%873.png" style=" width: 350px; 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="" src="/userUpload/images/10512106/%E5%9C%96%E7%89%876.png" style=" width: 350px; text-align: start; height:  auto; " /></div>
							</div>
						</div>
					</div>
					<p>
						&nbsp;</p>
					<br />
					<p>
						<a class="button" href="http://www.lohasplus.com.tw/index.php?Act=925&amp;MK=925&amp;PK=935">了解更多...</a></p>
				</div>
			</div>
		</div>
	</div>
</center>
<center>
	<div class="box2">
		<div class="section" id="sec03">
			&nbsp;</div>
		<script>
$(document).ready(function(){
    $(function(){ $('#menu03').click(function(){ 
        $('html,body').animate({scrollTop:$('#sec03').offset().top}, 1000);});  
    }); 
}); 
</script>
		<div class="img">
			<div class="title1area revealOnScroll" data-animation="zoomIn" style="text-align: center;">
				<div>
					&nbsp;</div>
				<div class="bigtitle revealOnScroll" data-animation="zoomIn">
					<strong><span style="font-size:35px;">可愛的小動物</span></strong></div>
				<div style="background:rgba(221, 225, 16, 0.76);border-radius: 12px; ">
					<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>
			</div>
			<div>
				&nbsp;</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-12 col-xs-12">
							<div class="col-md-12 col-sm-12 col-xs-12">
								<div class="dowload">
									<img alt="" class="image-responsive img-circle img-thumbnail image-full" src="/userUpload/images/10512106/1515084760586_resized.jpg" style=" width: 400px; text-align: start; height:  auto;" /></div>
							</div>
						</div>
						<div class="col-md-4 col-sm-12 col-xs-12">
							<div class="col-md-12 col-sm-12 col-xs-12">
								<div class="dowload">
									<img alt="" class="image-responsive img-circle img-thumbnail image-full" src="/userUpload/images/10512106/1515084766594_resized.jpg" style=" width: 400px; text-align: start; height:  auto; " /></div>
							</div>
						</div>
						<div class="col-md-4 col-sm-12 col-xs-12">
							<div class="col-md-12 col-sm-12 col-xs-12">
								<div class="dowload">
									<img alt="" class="image-responsive img-circle img-thumbnail image-full" src="/userUpload/images/10512106/1515084777516_resized.jpg" style=" width: 400px; text-align: start; height:  auto; " /></div>
							</div>
						</div>
					</div>
					<p>
						&nbsp;</p>
					<br />
					<p>
						&nbsp;</p>
				</div>
			</div>
		</div>
	</div>
</center>
<center>
	<div class="box3">
		<div class="section" id="sec04">
			&nbsp;</div>
		<script>
$(document).ready(function(){
    $(function(){ $('#menu04').click(function(){ 
        $('html,body').animate({scrollTop:$('#sec04').offset().top}, 1000);});  
    }); 
}); 
</script>
		<div class="title1area revealOnScroll" data-animation="zoomIn" style="text-align: center;">
			<div style="text-align: center;">
				<div>
					&nbsp;</div>
				<div class="bigtitle revealOnScroll" data-animation="zoomIn">
					<strong><span style="font-size:35px;">如何聯絡我們</span></strong></div>
			</div>
			<div align="center" class="col-md-12 col-sm-6 col-xs-12" style="margin-top: 12px;margin-bottom: 12px;">
				<img alt="" class="image-responsive img-thumbnail image-full" src="/userUpload/images/10512106/%E5%90%8D%E7%89%872(1).jpg" style="width: 360px; height: auto; float: left;" /> <span style="color:#ffffe0;font-size:30px;"> 聯絡資訊:<br />
				<br />
				農場主人：鄭宗林<br />
				<br />
				手機：0910-326-822<br />
				<br />
				電話：07-371-2376<br />
				<br />
				LINE：kenny335a<br />
				<br />
				信箱：kenny335a@<br />
				yahoo.com.tw<br />
				<br />
				搭乘工具：可前往岡山火車站轉乘計程車($200)或由農場主人接送</span><br />
				&nbsp;</div>
		</div>
		<a class="button2" href="http://www.lohasplus.com.tw/index.php?Act=925&amp;MK=925&amp;PK=932">了解更多...</a></div>
</center>
<p>
	&nbsp;</p>
<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><script src='//scdn.line-apps.com/n/line_it/thirdparty/loader.min.js' async='async' defer='defer' ></script>
<div id="gotop">
	回頂頁</div>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script><script type="text/javascript">
            $(function() {
                /* 按下GoTop按鈕時的事件 */
                $('#gotop').click(function(){
                    $('html,body').animate({ scrollTop: 0 }, 'slow');   /* 返回到最頂上 */
                    return false;
                });
                 
                /* 偵測卷軸滑動時，往下滑超過500px就讓GoTop按鈕出現 */
                $(window).scroll(function() {
                    if ( $(this).scrollTop() > 400){
                        $('#gotop').fadeIn();
                    } else {
                        $('#gotop').fadeOut();
                    }
                });
            });
            </script><!-- 記得要把按鈕放到網頁上, 否則它不會出現 -->
<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><script>$(function() {

                $("div").addClass("load");

            });
</script></p>
<style type="text/css">
/*************************************************字形設定********************************************************************************************/

        *{font-family: "微軟正黑體";
          box-sizing: border-box;}


	
/*****************************圖片、背景*************************/
	
.img{
   class="img-rounded"
   max-width: 100%;
   height: auto;
		}
 
 
 img {
    border: 0;
    border-radius: 22%;
}
 
 .bgw {
    background-color:rgba(0,0,0,0.0);
   
}

	
 .box {
 border:1px solid black;
 width:100vw;
 height:100vh;
 background-color:rgb(0,0,0,0.7);
 border-radius:15px;
 }

.box1 {
 border:1px solid black;
 width:100vw;
 height:100vh;
 background-color:rgb(0,0,0,0.7);
 border-radius:20px;


 }
.box2 {
 border:1px solid black;
 width:100vw;
 height:100vh;
 background-color:rgb(0,0,0,0.7);
 border-radius:20px;


 }
.box3 {
 border:1px solid black;
 border-radius:20px;
 width:100vw;
 height:100vh;
 background-color:rgb(0,0,0,0.7);
 }

 

.box5{
border:1px solid black;
height: 100vh;
width: 100vw;
background-color:rgb(0,0,0,0.5);
padding:100px;
}


	
/****************************rwd*************************************/

@media only screen and (max-width: 768px) {
    /* For mobile phones: */
    [class*="g-m-"] {
        width: 100%;
    }
 
}



@media only screen and (max-width: 992px) {
}

.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2,
.col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, 
.col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, 
.col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, 
.col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, 
.col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, 
.col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 
{
  position: relative;
  min-height: 1px;
  padding-left: 0px;
  padding-right: 0px;
}

@media (min-width: 992px){
.col-md-offset-1 {margin-left: 0px;}



}

/************************for desktop*********************************/
.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%;}

		


/***************************標題***********************************/

#introduce
			{
				position: relative;
				padding: 0em 0em 0em 0em;
				margin-right: 0px;
				margin-top:-5px;
                        	font-size:25px;
				Font-Family:'微軟正黑體';                              			
				
	}
	
h1 {

   text-align:center; 
   color:white;
   Font-Family:微軟正黑體;
   font-size:30px;
		} 
h3 {
    font-size: 35px;
	font-family: inherit;
    font-weight: 0;
    line-height: 1.1;
    color: inherit;
    margin-top: -10px;
    margin-bottom: 10px;
}

hr {
    margin-top: 0px;
    margin-bottom: 0px;
    border: 0;
    border-top: 1px solid rgba(238, 238, 238, 0.0);
}
   
   .title1area {				
width: 100%; 				
height: auto;				
text-align: center;				
padding:50px;			
}		
	
.title1area .bigtitle {				
position: relative;				
font-weight: 100;				
letter-spacing: .06em;				
text-transform: uppercase;				
color:#13d9e4;				
font-size: 3em;				
margin-bottom: 50px;			
}

 .title1area .smalltitle {						
color: green;				
margin-bottom: 5px;				
font-weight: 100;				
letter-spacing: .06em;				
font-size: 22px;							
}		


.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;}				
				
.container-fluid {			
width: -webkit-fill-available;			
padding-right: 0;			
padding-left: 0;			
margin-right: auto;			
margin-left: auto;		
}

/**********************************navbar*******************************/
.navbar-default {
     border-color: #e7e7e7
    
}
.navbar-default .navbar-nav>.active>a, 
.navbar-default .navbar-nav>.active>a:focus, 
.navbar-default .navbar-nav>.active>a:hover {
    color: white;
    background-color: brown;
}


/*******************************內容*************************************/
body {
    font-family: Arial,sans-serif,'微軟正黑體';
    font-size: 15px;
    line-height: 1.428571;
    background:
url(/userUpload/images/10512106/guavatree.jpg);
    background-attachment:fixed;
    background-size:100% auto; 
    center;
    background-repeat:no-repeat;
    background-position:center;
    color: white;
    padding:0px;
	margin:0px auto;
	

}

footer{
    background-color: brown;
    font-size: 14px;
}


/*******************************frame*************************************/  
					
.FBWrapper {
			 position: relative;
			padding-bottom: 56.25%; /* 16:9 */
			height: 0;
						}

.FBWrapper iframe {
					position: relative;
					top: 0;
					left: 0;
					width: 100%;
					height: 80%;
						}
/*******************************gotop*************************************/
   #gotop {
    position: fixed;
    z-index: 1;
    right: 50px;
    bottom: 60px;
    display: none;
    width: 5%;
    height: 50px;
    color: ghostwhite;
    background: rgba(244,164,96,0.8);
    cursor: pointer;
    line-height: 50px;
    border-radius: 50%;
    transition: all 0.4s;
    text-align: center;
    box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16), 0 2px 10px 0 rgba(0,0,0,0.12);
}


/*****************************圖片縮放*************************************/
.dowload img:hover {
-moz-transform: scale(1.0);
-ms-transform: scale(1.0);
-o-transform: scale(1.0);
-webkit-transform: scale(1.0);
transform: scale(1.25);
opacity: 1;
}
/****************************連結按鈕**********************************/
.button {
    border: 2px solid #ebe406;
    border-radius:4px;
    color: #ed950d;
    padding: 7px 20px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 20px;
    font-family:微軟正黑體;
    margin: 40px 2px;
    cursor: pointer;
    transition: 0.3s;
    position: sticky;
    transform: translate(0%, -100%);
   
}
.button:hover {
    background-color: #2258a9;
    text-decoration: none;
    color: white;
    opacity: 1
}

.button1 {
    border: 2px solid #ebe406;
    border-radius:4px;
    color: #ed950d;
    padding: 7px 20px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 20px;
    font-family:微軟正黑體;
    margin: 5px 4px;
    cursor: pointer;
    transition: 0.3s;
    position: sticky;
    transform: translate(0%, 15%);
   
}
.button1:hover {
    background-color: #2258a9;
    text-decoration: none;
    color: white;
    opacity: 1
 
}
 
.button2 {
   
    border: 2px solid #ebe406;
    border-radius:4px;
    color: #ed950d;
    padding: 7px 20px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 14px;
    font-family:微軟正黑體;
    margin: 5px 4px;
    cursor: pointer;
    transition: 0.3s;
    position:sticky;
    transform: translate(450%, -450%);
    
}
.button2:hover {
    background-color: #2258a9;
    text-decoration: none;
    color: white;
    opacity: 1
   
}



/******************************網頁滑動效果************************************/
 .menu ul{
  list-style-image:
  url(/userUpload/images/10512106/%E8%8A%AD%E6%A8%82%E4%B8%8B%E6%BB%91.png);
  list-style-position: inside;
  height: 65px;
  cursor:pointer;
  display: flex;
  transform: translate(0%,-441%);
  
}
  .meun ul li{
  float:left;}

.menu menu01 ,menu02 ,menu03 ,menu04{
 
    text-align:center;
    font-family:微軟正黑體;
}
.section{
        position: relative;
        width: auto;
        height:1px;
    }
    #sec01{
       
    }
    #sec02{
       
    }
    #sec03{
        
    }
    #sec04{
        
    }
/*****************************flex*******************************/

.flex{
display:flex;
transform: translate(80%,-600%);
}
/************************************************************/
div {
            opacity: 0;
            -webkit-transition: opacity 1s ease-in-out;
            -moz-transition: opacity 1s ease-in-out;
            -ms-transition: opacity 1s ease-in-out;
            -o-transition: opacity 1s ease-in-out;
            transition: opacity 1s ease-in-out;
            }

            .load {
            opacity: 1 !important;
            }
*{opacity: 1 !important}
/************************************************************/</style>
