<p>
	<meta charset="UTF-8" />
</p>
<p>
	<title></title>
	<!--    匯入jQuery    --><script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script><script>
        $(document).ready(function(){
            
            //根據捲軸的位置改變右方導覽列游標的顏色
            $(window).scroll(function(){
                 if($(window).scrollTop()>=$(".p01").offset().top && $(window).scrollTop()<$(".p02").offset().top){
                    $(".nav1 li").css("background-color","white")//除了被點擊到的游標，其他都恢復成原來的顏色
                    $(".nav1 li:eq(0)").css("background-color","#46dd46")
                }else if($(window).scrollTop()>=$(".p02").offset().top && $(window).scrollTop()<$(".p03").offset().top){
                    $(".nav1 li").css("background-color","white")//除了被點擊到的游標，其他都恢復成原來的顏色
                    $(".nav1 li:eq(1)").css("background-color","#46dd46")
                }else if($(window).scrollTop()>=$(".p03").offset().top && $(window).scrollTop()<$(".p04").offset().top){
                    $(".nav1 li").css("background-color","white")//除了被點擊到的游標，其他都恢復成原來的顏色
                    $(".nav1 li:eq(2)").css("background-color","#46dd46")
                }else if($(window).scrollTop()>=$(".p04").offset().top && $(window).scrollTop()<$(".p05").offset().top){
                    $(".nav1 li").css("background-color","white")//除了被點擊到的游標，其他都恢復成原來的顏色
                    $(".nav1 li:eq(3)").css("background-color","#46dd46")
                }else if($(window).scrollTop()>=$(".p05").offset().top){
                    $(".nav1 li").css("background-color","white")//除了被點擊到的游標，其他都恢復成原來的顏色
                    $(".nav1 li:eq(4)").css("background-color","#46dd46")
                }
            })
                     
            //點選右方導覽列時會到指定圖片
            var num_li=$("li").length
            for(i=0;i<=num_li;i++){
                $(".nav li:eq("+i+")").click({id:i},function(e){
                    $("html,body").stop()
                    $(".nav1 li").css("background-color","white")//除了被點擊到的游標，其他都恢復成原來的顏色
                    page=e.data.id+1
                    $("html,body").animate({"scrollTop":$(".p0"+page).offset().top})
                    $(".nav1 li:eq("+e.data.id+")").css("background-color","#46dd46")//被點擊到的游標變色，前面的selector用this也可以
                })
            }
            //一進入網頁時，將導覽列垂直置中計算導覽列置中的位置
           center()
            
           //縮放網頁時，將導覽列垂直置中
            $(window).resize(function(){
                center()
            })
            
            //計算導覽列垂直置中的高度
            function center(){
                pos=$(window).height()/2-$(".nav1").height()/2
                $(".nav1").css("top",pos)
            }
            
        })
    </script>
	<style type="text/css">
*{
        padding:0;
        margin:0;
    }
/*    插入背景圖片    */
    .p01{
        background-image:url(images/p01.jpg);
        background-size:cover;
        background-repeat: no-repeat;
        height:100vh;
    }
    .p02{
        background-image:url(images/p02.jpg);
        background-size:cover;
        background-repeat: no-repeat;
        height:100vh;
    }
    .p03{
        background-image:url(images/p03.jpg);
        background-size:cover;
        background-repeat: no-repeat;
        height:100vh;
    }
    .p04{
        background-image:url(images/p04.jpg);
        background-size:cover;
        background-repeat: no-repeat;
        height:100vh;
    }
    .p05{
        background-image:url(images/p05.jpg);
        background-size:cover;
        background-repeat: no-repeat;
        height:100vh;
    }
/*    插入導覽列     */
    .nav1{
        position: fixed;
        top:50%;
        right:0px;
        cursor:pointer;
    }
    li 1{
        width:10px;
        height:10px; 
        margin: 10px;
        background-color: white;
        border-radius: 5px;
        box-shadow: 1px 1px 1px rgba(0,0,0,0.5) inset,-1px -1px 1px rgba(0,0,0,0.5) inset;
        list-style-type: none;
    }
    h11{
        font-size:60px;
        color:ghostwhite;
        text-shadow:0px 0px 15px black;
    }	</style>
</p>
<div class="container">
	<div class="nav">
		<ul>
			<li style="background-color:#46dd46">
				&nbsp;</li>
			<li>
				&nbsp;</li>
			<li>
				&nbsp;</li>
			<li>
				&nbsp;</li>
			<li>
				&nbsp;</li>
		</ul>
	</div>
	<div class="p01">
		<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-12 col-xs-12" style="margin-top: 0px;margin-bottom: 0px;">
					<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>
	<div class="p02">
		<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 class="row">
			<div class="col-md-12 col-sm-12 col-xs-12">
				<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>
				&nbsp;</div>
			<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 class="p03">
		<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 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>
			</div>
			<div class="p04">
				<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>
					<a class="button2" href="http://www.lohasplus.com.tw/index.php?Act=925&amp;MK=925&amp;PK=932">了解更多...</a></div>
			</div>
			<div class="p05">
				<h1>
					Page 5</h1>
			</div>
		</div>
	</div>
</div>
