<style type="text/css">
.container-fluid {
			width: -webkit-fill-available;
			padding-right: 15px;
			padding-left: 15px;
			margin-right: auto;
			margin-left: auto;
		}

	body{
			background-image:url('/userUpload/images/10412126/wall.jpg');
			background-attachment:scroll;
			text-align: justify;
			text-justify: inter-word;
		
		
		}
	/*************************navbar***********************/
		body > div:nth-child(1){	margin: 0;}
		
		div.navbar.navbar-default.load {
		right: 0;
		left: 0;
		z-index: 1030;
		position: fixed;
		top: 0;
		z-index:9999;}
		
	.navbar-default {
			
			height:auto;
			background-color: rgba(0, 0, 0,0.4);
			border-color: rgba(0, 0, 0,0);
			transition: all 0.5s ease;
		 
			}
			
	.navbar-default .navbar-nav>li>a {
			color:rgba(255,255,255,1);
			font-size:18px;
			
		}
		.navbar-default2 {
			font-size:16px;
			color:black;
			height:autopx;
			background-color: rgba(255, 255, 255,1);
			border-color: rgba(0, 0, 0,0.4);
			box-shadow: 0 2px 5px rgba(126, 126, 126, 0.68);
		 
			}
		
		.navbar-default2 .navbar-nav>li>a {
			color:rgba(0,0,0,1);
			
		}
		.nav000 {
				display:none;
				color:black;
				float: left;
				height: 50px;
				padding: 15px 15px;
				font-size: 18px;
				line-height: 20px;

			}
/****************************************************/		
	.row {
			display: -ms-flexbox;
			-ms-flex-wrap: wrap;
			flex-wrap: wrap;
			
			margin-right: -12px;
			margin-left: -12px;
		}
	
		
		 
		.row {
			
			margin-right: -12px;
			margin-left: -12px;
		}
		
		div.col-md-12.load{
			margin:0;
			padding-right: 0;
			padding-left: 0;
				}
		.bgw{background-color:rgba(255,255,255,0);}
			container-fluid{
			margin-top:5px;
		}
		footer{
			
			color:white;
			background-color:rgba(0, 0, 0,1);}
/************body*****************/
		*{font-family: cwTeXFangSong, 'Playfair Display', serif;}
		body{
		
		
		position: relative;
			padding: 0;}
		
		div {
				display: block;
			}
		.btn{display: block;}

		.BDBOX {
		  -webkit-box-sizing: border-box;
			 -moz-box-sizing: border-box;
				  box-sizing: border-box;
				}	
				
		/*清理浮動*/ 
		.clearfix:after {
			visibility:hidden;  
			display:block;  
			font-size:0;  
			content:" ";  
			clear:both;  
			height:0; 
			} 
		.clearfix {  zoom:1; }
		
		
		.clearfix2 {
			  overflow: auto;
			}
		.clearfix:after {
			content: ".";
			display: block;
			height: 0;
			clear: both;
			visibility: hidden;
		}
		
		.p1{
			    position: absolute;
				top: 0;
				left: 0px;
				width: 100px;
				}
				
		h2,h3,h4{
				text-align: center;
		}
		
		.smalltitle{
				color:#ffa100;	
		}
		
		h2 {
			margin-bottom: 30px;
			padding-top: 0;
			color: #000;
			text-align: center;
		}
		
		.blue{
			color:darkblue;
			font-weight:bold;
		}
		
		p{
			font-size:18px;
		}
		
		.text{
			line-height:3;
			font-size:1.2em;
		}
		.mainarea {
			position:relative;
			padding: 0;
			margin-top: -150px;
			background: #FFF;
			}
		.image-full
		{
			display: block;
			width: 100%;
			margin: 0 0 0 0;
		}
		.image-rounded
		{
			border-radius: 10%;
		}
/**************************************************/
		.COL4{
			width:33.333%;
			float:left;
			padding:1em 0.5em;
		}
		.COL3{
			width:25%;
			float:left;
			padding:1em 1.5em;
			
		}
		
		.COL8{
			width:66.6%;
			float:left;
			padding:1em 0.5em;
		
		}
		.COL12{
			width:100%;
			padding:2em;
			
			
		}
		.COL6{
			width:50%;
			float:left;
			padding:2em;
			
		}
		.clearfix:after {
			  content: ".";
			  display: block;
			  height: 0;
			  clear: both;
			  visibility: hidden;
		}
		
		
/***********blockarea***************/
		.block1 {
		
				clear: both;
				background: url('/userUpload/images/tttttttt/13.JPG');
				background-repeat: no-repeat;
				background-attachment: fixed;
				background-position: bottom;
				background-size: cover;
		}
		.block1 .box {
				float: left;
				
				width: 410px;
				background: rgba(0,0,0,0.6);
				padding: 150px 30px 60px 30px;
		}
		.block2 {
				clear: both;
				background: url('/userUpload/images/10412126/15.jpg') ;
				background-repeat: no-repeat;
				background-attachment: fixed;
				background-position: center;
				background-size: cover;
		}
		.block2 .box {
				float: right;
				margin-right: 12%;
				width: 710px;
				background: rgba(0,0,0,0.7);
				padding: 0px 30px 60px 30px;
		}
		
		.block1 .text, .block2 .text {
				margin-top: 30px;
				font-size: 20px;
				
				color: #FFF;
				line-height: 1.8;
			}
		.block1 .btn a:hover, .block2 .btn a:hover {
				border: 1px solid #a27c48;
				background: #a27c48;
				color: #FFF;
			}
		.block1 .btn a, .block2 .btn a {
				display: inline-block;
				padding: 10px 15px;
				border: 1px solid #FFF;
				font-size: 12px;
				color: #FFF;
				text-transform: uppercase;
			}
			@media screen and (max-width: 480px){
			.block{
					min-height;
			}
			

			.block1 .box, .block2 .box ,.COL6,.COL4,.COL8{
				width: 100%;
				margin: 0;
				line-height:2;
							}
			COL8,.COL4{ padding:15px;}
			
			.content{
		
				min-height: 380px;
		}
			
			
		}
			
			
			
		
/*******************標題美化*************/
		.title1area {
				width: 100%;
				height: auto;
				text-align: center;
				padding: 60px 0 0 0;
				overflow: hidden;
				box-sizing: border-box;
				background-color: rgba(0,0,0,0);
			}
		
		.title1area .smalltitle {
		
				color: #e7b623;
				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:#ffa100;
				font-size: 1.5em;
				margin-bottom: 50px;
			}
		.title1area .bigtitle:before, .title1area .bigtitle:after {
				content: '';
				position: absolute;
				top: 50%;
				transform: translateY(-50%);
				width: calc((100% - 200px) / 2);
				height: 2px;
				background: rgba(255, 255, 255, 0.9);
			}
			
		.title1area .bigtitle:before {
				left: 0;
			}
		.title1area .bigtitle:after {
				right: 0;
			}
/*******************STORYAREA****************************/

		.STORY {	
				position:relative;
				clear: both;
				background-image:url('/userUpload/images/10412126/wall.jpg');
				background-repeat:no-repeat;
				background-attachment:scroll;
				padding:  0;
				
			}
		
		div.STORY > div.COL12.clearfix2 > div.text.COL6{
		
				border-bottom: 1px dashed #ae1d49;
				padding: 0.5em;
		}
		
		body > div.STORY > div.COL4{
				;
				background-color:#e9ecef;
				padding: 20px 0;}
		.content{
				
				background-color: #ced4da;
				padding:30px;
				
		}
		@media screen and (max-width: 640px){

			.STORY div.COL4,COL8 {
				DISPLAY: inline-block;
				float: none;
				padding: 10px;
				width: 100%;
			}
			@media screen and (min-width: 768px){
				#nav2{display:none;}
					.content{
				
						min-height: 380px;
				}
			}
			
		body > div.STORY > div.COL4{
				
				background-color:#e9ecef;
				}
		body > div > div.STORY > div{ padding:20px; }
			}
	/*************************block4***********************/
		.wrap {
				width: 100%;
				padding: 0 20px;
		}</style>
<link href="https://fonts.googleapis.com/earlyaccess/cwtexfangsong.css" rel="stylesheet" type="text/css" />
	<link href="https://fonts.googleapis.com/css?family=Playfair+Display" rel="stylesheet">
	<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>
<div class="mainarea">
	<div class="block1 clearfix">
		<!--blockarea-->
		<div class="box BDBOX ">
			<!--box-->
			<div class="title1area">
				<h4 class="smalltitle revealOnScroll" data-animation="zoomIn">
					庭翊故事</h4>
				<h4 class="bigtitle revealOnScroll" data-animation="zoomIn">
					Stories</h4>
			</div>
			<div class="text  revealOnScroll" data-animation="zoomIn">
				時代的收藏是傳承<br />
				紛擾環境辛苦的您<br />
				是否計畫好下一個旅遊行程<br />
				讓我帶您走進傳統回憶的時光</div>
		</div>
		<!-- <div class="btn"><a href="#">LEARN MORE</a></div> --></div>
	<!--box end--></div>
<!--blockarea end-->
<div class="STORY " style="float:right;">
	<div>
		<img class="p1 revealOnScroll" data-animation="zoomIn" src="/userUpload/images/10412126/002-1.png" /></div>
	<div class="COL12 clearfix ">
		<div class="text COL6  revealOnScroll" data-animation="zoomInUp">
			<h4 class="smalltitle revealOnScroll" data-animation="zoomInUp">
				Story of Ting Yi</h4>
			<h2 class="bigtitle revealOnScroll" data-animation="zoomIn" style="letter-spacing: .08em;font-weight: normal;">
				庭翊民宿</h2>
			<hr class="style1 revealOnScroll" data-animation="zoomInUp" />
			<p>
				有傳統風格的老瓦房沒有現代摩登的外觀<br />
				有清幽整潔的布置沒有奢華頂級的設備<br />
				不在四線大馬路上而隱身在旁邊的鄉間小路上<br />
				沒有海闊天空的視野卻有柳暗花明又一春的感覺<br />
				沒有沸騰喧嘩的人聲只有濃烈的鄉村人情味</p>
			<p>
				&nbsp;</p>
		</div>
		<div class="COL6">
			<img class="image-full " data-animation="zoomIn" src="/userUpload/images/10412126/12.JPG" /></div>
	</div>
</div>
<div class="block2 clearfix" style="margin-bottom:-10px;">
	<!--blockarea-->
	<div class="box BDBOX">
		<!--box-->
		<div class="COL12 clearfix" style="padding:0;">
			<img class="image-full image-rounded " data-animation="zoomIn" src="/userUpload/images/10412126/001(1).png" /></div>
		<div class="title1area">
			<h4 class="smalltitle revealOnScroll" data-animation="zoomIn">
				好運粽</h4>
			<h4 class="bigtitle revealOnScroll" data-animation="zoomIn">
				庭翊民宿</h4>
		</div>
		<div class="text revealOnScroll" data-animation="zoomIn">
			當您入住庭翊民宿完成住房手續之後，<br />
			即可獲得一顆民宿主人以客家花布手工製作的好運粽一顆<br />
			集滿5顆可兌換一間『雙人房免費住宿一晚』。<br />
			<br />
			曾經有一對夫妻，入住時看得出心情不是很好，揩著好友一同入住，<br />
			依照慣例送他們一顆『好運粽』，第二天得知他們結婚數年了一直沒有愛的結晶，<br />
			感情快亮起紅燈了，此時的我們也只能安慰他們<br />
			什麼忙也幫不上當早餐後看著他們離開。<br />
			隔年發生日簡訊給他們時，才知道收到好運粽回去後很快就有喜了，還生下個龍兒我們都替他們高興啊！ 『好運粽』希望能給有緣人帶來好運。</div>
	</div>
	<div class="STORY" style="background-color:rgba(0,0,0,0.7); ">
		<div class="COL8 ">
			<div class="COL12  content">
				<h4 class="smalltitle revealOnScroll" data-animation="zoomInUp">
					hexagonal kiosk saloon</h4>
				<h2 class="bigtitle revealOnScroll " data-animation="zoomIn" style="letter-spacing: .08em;font-weight: normal;">
					特殊的六角亭交誼廳</h2>
				<hr class="style1 revealOnScroll style1" data-animation="zoomInUp" />
				<div class="COL12 " data-animation="zoomInUp" style="padding:0;">
					<img class="image-full" src="/userUpload/images/10412126/06.jpg" /></div>
				<div class="text COL12 revealOnScroll" data-animation="zoomIn" style="text-align:center;padding:0;color:black;">
					<p>
						完全用木頭搭建的六角造型， <br>
						非常的特殊， <br>
						提供給客人休憩使用及早餐用餐地點。</p>
				</div>
			</div>
		</div>
		<div class="COL4 ">
			<div class="COL12  content">
				<h4 class="smalltitle revealOnScroll" data-animation="zoomInUp">
					Ting Yi features</h4>
				<h2 class="bigtitle revealOnScroll" data-animation="zoomIn" style="letter-spacing: .08em;font-weight: normal;">
					庭翊民宿的特色</h2>
				<hr class="style1 revealOnScroll style1" data-animation="zoomInUp" />
				<div class="COL12 " data-animation="zoomInUp" style="padding:0;">
					<img class="image-full" src="/userUpload/images/tttttttt/25.JPG" /></div>
				<div class="text COL12 revealOnScroll" data-animation="zoomIn" style="text-align:center;padding:0;color:black;">
					<p>
					庭翊民宿裡的黃包車， </p><p class="blue">『腳踩風火是三輪，顧客無法於斤論<br>&nbsp;&nbsp;&nbsp;&nbsp;唯有目標心中存，揮灑汗水為子孫』</p></div>
			</div>
		</div>
	</div>
	<div class="STORY">
		<div class="COL4 ">
			<div class="COL12 content">
				<h4 class="smalltitle revealOnScroll" data-animation="zoomInUp">
					Ting Yi features</h4>
				<h2 class="bigtitle revealOnScroll" data-animation="zoomIn" style="letter-spacing: .08em;font-weight: normal;">
					庭翊民宿的特色</h2>
				<hr class="style1 revealOnScroll style1" data-animation="zoomInUp" />
				<div class="COL12 " data-animation="zoomInUp" style="padding:0;">
					<img class="image-full " data-animation="zoomIn" src="/userUpload/images/10412126/10.jpg" /></div>
				<div class="text COL12 clearfix2 revealOnScroll" data-animation="zoomIn" style="text-align:center;padding:0;color:black;">
					<p>
						傳統客家文化造景</p>
				</div>
			</div>
		</div>
		<div class="COL4 ">
			<div class="COL12  content">
				<h4 class="smalltitle revealOnScroll" data-animation="zoomInUp">
					Special lantern</h4>
				<h2 class="bigtitle revealOnScroll " data-animation="zoomIn" style="letter-spacing: .08em;font-weight: normal;">
					特殊的燈籠</h2>
				<hr class="style1 revealOnScroll style1" data-animation="zoomInUp" />
				<div class="COL12 " data-animation="zoomInUp" style="padding:0;">
					<img class="image-full" src="/userUpload/images/10412126/11.JPG" /></div>
				<div class="text COL12 revealOnScroll" data-animation="zoomIn" style="text-align:center;padding:0;color:black;">
					<p>
						特殊花紋的客家燈籠</p>
				</div>
			</div>
		</div>
		<div class="COL4 ">
			<div class="COL12  content">
				<h4 class="smalltitle revealOnScroll" data-animation="zoomInUp">
					Ting Yi features</h4>
				<h2 class="bigtitle revealOnScroll" data-animation="zoomIn" style="letter-spacing: .08em;font-weight: normal;">
					庭翊民宿的特色</h2>
				<hr class="style1 revealOnScroll style1" data-animation="zoomInUp" />
				<div class="COL12 " data-animation="zoomInUp" style="padding:0;">
					<img class="image-full" src="/userUpload/images/10412126/08.jpg" /></div>
				<div class="text COL12 revealOnScroll" data-animation="zoomIn" style="text-align:center;padding:0;color:black;">
					<p>
						古色古香的特色建物</p>
				</div>
			</div>
		</div>
	</div>
</div>
<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 h2.text-center").hide();
$("body > div:nth-child(1) > div > div:nth-child(1)").hide();
$("div hr").hide();
$("body > div:nth-child(1) > div > div:nth-child(2)").hide();

$("div hr.style1").show();
$("div hr.style3").show();
$("body > div:nth-child(3) > div > div > div.row.load > div").removeClass('.col-md-10');


});

$(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>