<p>
	&nbsp;</p>
<hr />
<p>
	&nbsp;</p>
<p>
	&nbsp;</p>
<p>
	&nbsp;</p>
<p>
	&nbsp;</p>
<p>
	&nbsp;</p>
<p>
	&nbsp;</p>
<p>
	&nbsp;</p>
<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></p>
<center>
	<div class="col-md-12 col-sm-12 col-xs-12">
		<div class="main b-box " style="margin-top:-50px;">
			<!--outerWrap-->
			<div class="g-m-12" style="background-image:url();background-repeat: no-repeat;		background-attachment: fixed;background-position:center;				background-size: cover;">
				<div class="title1area revealOnScroll" data-animation="zoomIn">
					<div class="clearfix  revealOnScroll" data-animation="zoomIn">
						<h4 class="smalltitle revealOnScroll" data-animation="zoomIn">
							<span style="font-size:36px;"><strong>Location</strong></span></h4>
						<h4 class="bigtitle revealOnScroll" data-animation="zoomIn">
							我們在哪裡</h4>
						<div align="center" class="col-md-12" style="margin-top: 10px;margin-bottom: 10px;">
							<iframe allowfullscreen="" frameborder="0" height="700" scrolling="no" src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d14708.789929833578!2d120.3156785!3d22.8321821!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x51e50555d5e38def!2z6Iqz5p6X6Iqt5qiC5p6c5ZyS!5e0!3m2!1szh-TW!2stw!4v1513197095236" style="border:0" width="80%"></iframe>
							<p>
								&nbsp;</p>
							<p dir="ltr" style="line-height: 1.2; margin-top: 0pt; margin-bottom: 0pt;">
								&nbsp;</p>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</center>
<div class="g-m-12">
	&nbsp;</div>
<p>
	&nbsp;</p>
<center>
	<div class="col-md-12 col-sm-12 col-xs-12">
		<div class="title1area revealOnScroll" data-animation="zoomIn">
			<div class="clearfix  revealOnScroll" data-animation="zoomIn">
				<h4 class="bigtitle revealOnScroll" data-animation="zoomIn">
					農場地圖</h4>
				<div align="center" class="col-md-12" style="margin-top: 10px;margin-bottom: 10px;">
					<img alt="" src="/userUpload/images/10512106/%E5%90%8D%E7%89%872(1).jpg" style="width: 352px; height: 600px; float: left;" />
					<p style="text-align: center; margin-left: 200px;">
						<span style="color:#ffffe0;"><span style="font-size:36px;"><span style="background-color: transparent;  white-space: pre-wrap;">聯絡資訊:</span></span></span></p>
					<p style="text-align: center; margin-left: 200px;">
						<span style="color:#ffffe0;"><span style="font-size:36px;"><span style="background-color: transparent;  white-space: pre-wrap;">農場主人</span></span></span><span style="color: rgb(255, 255, 224); font-size: 36px; white-space: pre-wrap;">：</span><span style="color:#ffffe0;"><span style="font-size:36px;"><span style="background-color: transparent;  white-space: pre-wrap;">鄭宗林 </span></span></span></p>
					<p style="text-align: center; margin-left: 200px;">
						<span style="color:#ffffe0;"><span style="font-size:36px;"><span style="background-color: transparent;  white-space: pre-wrap;">手機：0910-326-822 </span></span></span></p>
					<p style="text-align: center; margin-left: 200px;">
						<span style="color:#ffffe0;"><span style="font-size:36px;"><span style="background-color: transparent;  white-space: pre-wrap;">電話：07-371-2376 </span></span></span></p>
					<p style="text-align: center; margin-left: 200px;">
						<span style="color:#ffffe0;"><span style="font-size:36px;"><span style="background-color: transparent; white-space: pre-wrap;">LINE：kenny335a </span></span></span></p>
					<p style="text-align: center; margin-left: 200px;">
						<span style="color:#ffffe0;"><span style="font-size:36px;"><span style="background-color: transparent;  white-space: pre-wrap;">搭乘工具：可前往岡山火車站轉乘計程車($200)或由農場主人接送</span></span></span></p>
					<p style="text-align: center; margin-left: 200px;">
						<span style="color:#ffffe0;"><span style="font-size:36px;"><span style="background-color: transparent;  white-space: pre-wrap;">信箱：kenny335a@yahoo.com.tw </span></span></span></p>
					<p>
						&nbsp;</p>
					<p>
						&nbsp;</p>
					<p dir="ltr" style="line-height: 1.2; margin-top: 0pt; margin-bottom: 0pt;">
						&nbsp;</p>
				</div>
				<p>
					&nbsp;</p>
				<p>
					&nbsp;</p>
			</div>
		</div>
	</div>
</center>
<p>
	&nbsp;</p>
<p>
	&lt;</p>
<p>
	&nbsp;</p>
<p>
	&nbsp;</p>
<p>
	&nbsp;</p>
<p>
	&nbsp;</p>
<p>
	&nbsp;</p>
<p>
	&nbsp;</p>
<p>
	&nbsp;</p>
<p>
	&nbsp;</p>
<p>
	&nbsp;</p>
<p>
	&nbsp;</p>
<p>
	&nbsp;</p>
<p>
	&nbsp;</p>
<p>
	&nbsp;</p>
<p>
	&nbsp;</p>
<p>
	&nbsp;</p>
<p>
	&nbsp;</p>
<p>
	&nbsp;</p>
<p>
	&nbsp;</p>
<p>
	&nbsp;</p>
<p>
	&nbsp;</p>
<p>
	&nbsp;</p>
<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 type="Text/JavaScript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script><script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script><script type="text/javascript">
$(document).ready(function(){ 
$("div.col-md-12 > h2.intro-text.text-center").hide();
$("div.col-md-12 > hr").hide();
$(" div.bgw").removeAttr("style");
$("#carousel01").css("display","none");
});


$("ul.Nav0 li#1").hover(function(){
    $("ul.Nav0 li#1").children("#dli1").css("display", "inline-block");
    }, function(){
    $("ul.Nav0 li#1").children("#dli1").css("display", "none");
});
		$("#dli1-3").hover(function(){
			$("#dli1-3").children(".Nav3").css({"top":"40%","display":"inline-block"});
			}, function(){
			$("#dli1-3").children(".Nav3").css("display", "none");
		});
		$("#dli1-4").hover(function(){
			$("#dli1-4").children(".Nav3").css({"top":"50%","display":"inline-block"});
			}, function(){
			$("#dli1-4").children(".Nav3").css("display", "none");
		});



$("li#2").hover(function(){
    $("li#2").children("#dli2").css("display", "inline-block");
    }, function(){
    $("li#2").children("#dli2").css("display", "none");
});	
		

$("li#3").hover(function(){
    $("li#3").children("#dli3").css("display", "inline-block");
    }, function(){
    $("li#3").children("#dli3").css("display", "none");
});			
			$("#dli3-0").hover(function(){
				$("#dli3-0").children(".Nav3").css({"top":"0%","display":"inline-block"});
				}, function(){
				$("#dli3-0").children(".Nav3").css("display", "none");
		});
			$("#dli3-1").hover(function(){
				$("#dli3-1").children(".Nav3").css({"top":"10%","display":"inline-block"});
				}, function(){
				$("#dli3-1").children(".Nav3").css("display", "none");
		});
			$("#dli3-2").hover(function(){
				$("#dli3-2").children(".Nav3").css({"top":"20%","display":"inline-block"});
				}, function(){
				$("#dli3-2").children(".Nav3").css("display", "none");
		});
			$("#dli3-3").hover(function(){
				$("#dli3-3").children(".Nav3").css({"top":"40%","display":"inline-block"});
				}, function(){
				$("#dli3-3").children(".Nav3").css("display", "none");
		});
			$("#dli3-4").hover(function(){
				$("#dli3-4").children(".Nav3").css({"top":"65%","display":"inline-block"});
				}, function(){
				$("#dli3-4").children(".Nav3").css("display", "none");
		});
$("li#4").hover(function(){
    $("li#4").children("#dli4").css("display", "inline-block");
    }, function(){
    $("li#4").children("#dli4").css("display", "none");
});

$("li#5").hover(function(){
    $("li#5").children("#dli5").css("display", "inline-block");
    }, function(){
    $("li#5").children("#dli5").css("display", "none");
});

$("li#6").hover(function(){
    $("li#6").children("#dli6").css("display", "inline-block");
    }, function(){
    $("li#6").children("#dli6").css("display", "none");
});
$(function(){
    $(window).scroll(function(){
        var scrollTop = $(window).scrollTop();
        if(scrollTop > 70){
            $(' body > div.navbar.navbar-default.load').addClass('navbar-default2');
   $('a.navbar-brand').addClass('nav000');
   $('a.navbar-brand').removeClass('navbar-brand');
   
   
   
        }else{
            $(' body > div.navbar.navbar-default.load').removeClass('navbar-default2');
   $(' a.nav000').addClass('navbar-brand');
   $('a.navbar-brand').removeClass('nav000');
        }
    });
});



</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>
<div class="clearfix">
	&nbsp;</div>
<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: 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%;}

		body{ background: rgba(0,0,0,1.00)}
		
.title1area {				
width: 80%; 				
height: auto;				
text-align: center;				
padding: 60px 0 0 0;				
overflow: hidden;				
box-sizing: border-box;				
background-color:rgba(26,112,1,0.54);
background-position:center;			
}		
.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: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;}		

	
/******************活動資訊*****************************/		
#farmpictureback{				
position: relative;											
}		
#farmpicture	{				
position: relative;				
padding: 0em 2.45em 0em 2.45em;																		
color:white;				
text-align:center;			
}		
#farmpictureback2			
{				
position: relative;											
}		
#farmpicture2			
{				
position: relative;				
padding: 0em 2.45em 0em 2.45em;																		
color:white;				
text-align:center;			
}		
						

/***********************活動資訊圖文介紹hover效果2-2*********************************/			
#animation2-2 {				
position: relative;				
margin: 3em 0 0 0;					
height:400px;				
background: url('/userUpload/images/moxiantang/C2-3.png');					
background-repeat: no-repeat;								
background-size:cover;				
display: inline;					
}		
#animation2-2:hover #imageshow2-2 {				
width: calc((100% - 20%) ); 				
height: calc(100% - 20%);				
top:10%;				
left:10%;				
border: 2px solid #fff;							
}		#animation2-2 a{color:white;}		
#imageshow2-2{								
width: 0px;				
height: 0px;				
background: rgba(0,0,0,0);				
position: absolute;				
border: 0px solid #fff;							
top:50%;				
left:50%;																	
padding: 1em 1.2em 1em 1.2em;													
text-align: center;				
font-size: 1em;				
transition: 0.5s ease;				
overflow: hidden;				
opacity:0.8;						
}														
#animation2-2:hover #imageshow3-2 {				
width: 100%; 				
height: 100%;				
top:0;				
left:0;				
opacity:1;						
}		
#imageshow3-2{								
width: 0%;				
height: 0%;				
background-image:url();				
background-repeat: no-repeat;								
background-size:cover;				
position: absolute;															
top:50%;				
left:50%;																				
text-align: center;				
font-size: 1em;				
transition: 0.7s ease;				
overflow: hidden;				
opacity:0.1;						
}												
#animation2-2:hover 
#imageshow4-2 {				
width: 100%; 				
height: 100%;				
top:0;				
left:0;				
opacity:1;						
}		
#imageshow4-2{								
width: 0%;				
height: 0%;				
background-color:rgba(0,0,0,0.7);				
position: absolute;															
top:50%;				
left:50%;																				
text-align: center;				
font-size: 1em;				
transition: 0.7s ease;				
overflow: hidden;				
opacity:0.1;						
}										
		
/*********************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;
body{ font-family="微軟正黑體";}		
}
.bgw{background: url(/userUpload/images/10512106/1514856918923.jpg);background-size:100% 100%; background-attachment: fixed;}</style>
