
<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;
		
		
		}
	/*************************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;
			right: 0;
		left: 0;
		z-index: 1030;
		position: fixed;
		top: 0;
		z-index:9999;
		 
			}
			
	.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;
				text-align: justify;
				text-justify: inter-word;
			}
		.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;
		}
		.text{
			line-height:3;
		}
		.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/13.jpg');
				background-repeat: no-repeat;
				background-attachment: fixed;
				background-position: bottom;
				background-size: cover;
		}
		.block1 .box {
				float: left;
				margin-left:0;
				width: 410px;
				background: rgba(0,0,0,0.7);
				padding: 150px 30px 60px 30px;
		}
		.block2 {
				clear: both;
				background: url('/userUpload/images/10412126/01.JPG') ;
				background-repeat: no-repeat;
				background-attachment: fixed;
				background-position: bottom;
				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: 15px;
				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">Stories</h4>
				</div>
                <div class="text  revealOnScroll" data-animation="zoomIn" >
                	當初只為了想完成老人家還鄉的心願義無反顧的放下30幾年的生活圈及事業帶著老父親回到他想回來的地方，這是俗話說的落葉歸根嗎？
							如今老人家走了而我們卻走不了！現在（老人家）變成我們的封號了。
							<br>" 多少銀髮無人陪  幾許古鬚不知誰  看淡世間功名錄  陪伴至親歸鄉赴"
                </div>
                <!-- <div class="btn"><a href="#">LEARN MORE</a></div> -->
            </div><!--box end-->
        </div><!--blockarea end-->



		
		<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 revealOnScroll" 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;">
                	古早燒木材的大灶頭， <br>
					雙鍋式前鍋較大為炒菜， <br>
					用後鍋較小為煮飯或燒熱水用
        </div>
		</div>
		</div>
		
		<div class="COL4 ">
		<div class="COL12  content">
                <h4 class="smalltitle revealOnScroll" data-animation="zoomInUp"> hexagonal kiosk saloon</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 revealOnScroll" data-animation="zoomInUp"style="padding:0;" ><img src="/userUpload/images/10412126/06.jpg" class="image-full"></div>
    	<div class="text COL12 revealOnScroll" data-animation="zoomIn"style="padding:0;">
                	庭翊民宿裡的黃包車，
					完全用木頭搭建的六角造型，
					非常的特殊，
					提供給客人休憩使用及早餐用餐地點。
        </div>
		</div>
		</div>
		
		<div class="COL4 ">
		<div class="COL12  content">
                <h4 class="smalltitle revealOnScroll" data-animation="zoomInUp">Ting Yi features</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 revealOnScroll" 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;">
                	庭翊民宿在台九線旁的一條巷弄裡、走進民宿裡有（柳暗花明又一村）的強烈感受，四周果樹林立台東特產（釋迦）
        </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,.col-md-offset-1');


});

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

