
<style>	
	
	.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 {
			
		}
		
		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{
			margin-top:-10px;
			color:white;
			background-color:rgba(0, 0, 0,1);}
/************body*****************/
		*{font-family: "微軟正黑體", "新細明體", sans-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;
				}
		
		.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;
		}
		
		p{
			font-size:18px;
		}
		
		.text{
			line-height:3;
			font-size:1.2em;
		}
		.mainarea {
			position:relative;
			padding: 0;
			margin-top: -112px;
			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;
			
		}
		.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/10412126/11.JPG');
				background-repeat: no-repeat;
				background-attachment: fixed;
				background-position: bottom;
				background-size: cover;
		}
		.block1 .box {
				float: left;
				margin-left: 12%;
				width: 410px;
				background: rgba(0,0,0,0.6);
				padding: 150px 30px 60px 30px;
		}
		.block2 {
				clear: both;
				background: url('/userUpload/images/10412126/01.JPG') ;
				background-repeat: no-repeat;
				background-attachment: fixed;
				background-position: center;
				background-size: cover;
		}
		.block2 .box {
				float: right;
				margin-right: 12%;
				width: 410px;
				background: rgba(0,0,0,0.7);
				padding: 150px 30px 60px 30px;
		}
		
		.block1 .text, .block2 .text {
				margin-top: 30px;
				font-size: 20px;
				font-family: "微軟正黑體", "新細明體", sans-serif;
				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){

			.block1 .box, .block2 .box ,.COL6,.COL4{
				width: 100%;
				margin: 0;
				line-height:2;
							}
			.COL4{ padding:15px;}
			
			
			}
		
/*******************標題美化*************/
		.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 {
				float: none;
				padding: 10px;
				width: 100%;
			}
			@media screen and (min-width: 768px){
				#nav2{display:none;}
			
			}
			
		body > div.STORY > div.COL4{
				
				background-color:#e9ecef;
				}
		body > div > div.STORY > div{ padding:20px; }
			}
			
			
</style>

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css"/>
<script src="https://ajax.aspnetcdn.com/ajax/modernizr/modernizr-2.7.2.js"></script>



<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">WELCOME</h4>
				</div>
                <div class="text  revealOnScroll" data-animation="zoomIn" >
                	進入庭翊，<br>彷彿進入另一個客家風情地方，<br>映入眼簾的懷舊三合院、<br>古色古香的客家造型。<br>

                </div>
                <!-- <div class="btn"><a href="#">LEARN MORE</a></div> -->
            </div><!--box end-->
        </div><!--blockarea end-->


<div class="STORY "><!--STORY-->
		<div ><img class="p1 revealOnScroll" data-animation="zoomIn" src="/userUpload/images/10412126/002-1.png"></div>
		
		<div class="COL12 clearfix ">
                <h4 class="smalltitle revealOnScroll" data-animation="zoomInUp">Story of Ting Yi</h4>
                <h2 style="letter-spacing: .08em;font-weight: normal;"class="bigtitle revealOnScroll" data-animation="zoomIn">庭翊民宿的起源</h4>
                <hr class="style1 revealOnScroll" data-animation="zoomInUp">
		
		<div class="COL6"><img src="/userUpload/images/10412126/14.jpg" class="image-full " data-animation="zoomIn"></div>
    	<div class="text COL6  revealOnScroll" data-animation="zoomInUp">
                	<p>當初只為了想完成老人家還鄉的心願義無反顧的放下30幾年的生活圈及事業帶著老父親回到他想回來的地方，這是俗話說的落葉歸根嗎？
							如今老人家走了而我們卻走不了！現在（老人家）變成我們的封號了。
							<br>" 多少銀髮無人陪  幾許古鬚不知誰  看淡世間功名錄  陪伴至親歸鄉赴"</p>
        </div>
		</div>
	
</div>		

	<div class="block2 clearfix"><!--blockarea-->
			<div class="box BDBOX"><!--box-->
				<div class="COL12 clearfix"style="padding:0;"><img src="/userUpload/images/10412126/16.jpg" class="image-full image-rounded " data-animation="zoomIn" ></div>
            	<div class="title1area" >
                <h4 class="smalltitle revealOnScroll" data-animation="zoomIn"> 庭翊民宿</h4>
                <h4 class="bigtitle revealOnScroll" data-animation="zoomIn">WELCOME</h4>
				</div>
                <div class="text revealOnScroll" data-animation="zoomIn">
                	當您入住庭翊民宿完成住房手續之後即可獲得一顆民宿主人以客家花布手工製作的好運粽一顆（一個房間一顆）集滿5顆可兌換一間雙人房免費住宿一晚。
    某年的某一天有一隊看得出心情不是很OK的夫妻揩著好友一同入住、依照慣例送他一顆好運粽第二天得知他們結婚數年了一直沒有愛的結晶感情快亮紅燈了、我們也只能安慰他們什麼忙也幫不上當早餐後看著他們離開、之後我們心裡老滴估著希望不要出什麼是才好、、、
    隔年發生日簡訊給她竟然收到回覆告訴我 她收到好運粽回去後很快就有喜了還生下個龍兒我們都替他高興啊！他將好運粽一直掛在床頭上希望給她們一直帶來好運。
     到庭翊民宿住宿得到好運粽的東大甄面試學生到目前為止全數過關、這是緣分還是巧合

                </div>
                <div class="btn revealOnScroll" data-animation="zoomIn"><a href="#">LEARN MORE</a></div>
            </div><!--box end-->
     </div><!--blockarea end-->
</div>
<!-- <div class="STORY"><!--STORY-->
		
		<div class="COL4 ">
		<div class="COL12 content">
                <h4 class="smalltitle revealOnScroll" data-animation="zoomInUp">Traditional big stove</h4>
                <h2 style="letter-spacing: .08em;font-weight: normal;"class="bigtitle revealOnScroll" data-animation="zoomIn">傳統古早味的大灶</h4>
                <hr class="style1 revealOnScroll style1" data-animation="zoomInUp">
		
		<div class="COL12 " data-animation="zoomInUp"style="padding:0;" ><img src="/userUpload/images/10412126/05.jpg" class="image-full " data-animation="zoomIn"></div>
    	<div class="text COL12 clearfix2 revealOnScroll" data-animation="zoomIn"style="padding:0;">
                	<p>古早燒木材的大灶頭，雙鍋式前鍋較大為炒菜，用後鍋較小為煮飯或燒熱水用</p>
        </div>
		</div>
		</div>
		
		<div class="COL4 ">
		<div class="COL12  content">
                <h4 class="smalltitle revealOnScroll" data-animation="zoomInUp"> Traditional rain hat、rain coat</h4>
                <h2 style="letter-spacing: .08em;font-weight: normal;"class="bigtitle revealOnScroll " data-animation="zoomIn">簑帽、簑衣</h4>
                <hr class="style1 revealOnScroll style1" data-animation="zoomInUp">
		
		<div class="COL12 " data-animation="zoomInUp"style="padding:0;" ><img src="/userUpload/images/10412126/13.jpg" class="image-full"></div>
    	<div class="text COL12 revealOnScroll" data-animation="zoomIn"style="padding:0;">
                	<p>早期農家使用的雨帽、雨衣，<br>
						用山棕做成</p>
        </div>
		</div>
		</div>
		
		<div class="COL4 ">
		<div class="COL12  content">
                <h4 class="smalltitle revealOnScroll" data-animation="zoomInUp">Ting Yi features urn</h4>
                <h2 style="letter-spacing: .08em;font-weight: normal;"class="bigtitle revealOnScroll" data-animation="zoomIn">甕</h4>
                <hr class="style1 revealOnScroll style1" data-animation="zoomInUp">
		
		<div class="COL12 " data-animation="zoomInUp"style="padding:0;" ><img src="/userUpload/images/10412126/08.jpg" class="image-full"></div>
    	<div class="text COL12 revealOnScroll" data-animation="zoomIn"style="padding:0;">
                	<p>早期農家都會醃製蘿蔔或酸菜使用的容器，尤其客家人勤儉持家，醃製菜類為必須之技能。</p>
        </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();



});

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

