
<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 {
				min-height:700px;
				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;
				min-height:700px;
				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-1.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: 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">
                	
							<table align="center" border="0" cellpadding="1" cellspacing="1" style="width: 1000px">
	<tbody>
		<tr>
			<td style="text-align: center;">
				<span style="font-size:16px;"><strong>入住時間</strong></span></td>
			<td style="text-align: center;">
				<span style="font-size:16px;"><strong>退住時間</strong></span></td>
		</tr>
		<tr>
			<td>
				<div>
					&nbsp;</div>
				<div style="text-align: center;">
					<input name="u07" placehoider="入住時間" type="date" /></div>
			</td>
			<td>
				<div style="text-align: center;">
					&nbsp;</div>
				<div style="text-align: center;">
					<input name="u07" placehoider="入住時間" type="date" /></div>
			</td>
		</tr>
	</tbody>
</table>

	<textarea class="form-control" rows="3"></textarea></p>

						
					
					<hr>
				</div>
		
			</div>
		
			<div class="row">
		
	            <div class="col-md-12">
					
<table align="center" border="0" cellpadding="1" cellspacing="1" style="width: 1000px">
	<tbody>
		<tr>
			<td>
				<div style="text-align: center;">
					<input name="room" type="RADIO" value="double room" />雙人房</div>
			</td>
			<td>
				<div style="text-align: center;">
					<div>
						<p style="text-align: center;">
							<input name="room" type="RADIO" value="four room" />四人房</p>
					</div>
				</div>
			</td>
		</tr>
	</tbody>
</table>


						
					
					
				</div>
		
			</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="http://ecloud.ewang.com.tw/index.php?Act=185&MK=185&PK=186">LEARN MORE</a></div>
            </div><!--box end-->
     </div><!--blockarea end-->
</div>
<!-- <div class="STORY"><!--STORY-->
<div class="GOODNEWS "><!--STORY-->
		
		
		<div class="COL12 clearfix" style="background-image:url(/userUpload/images/10412126/goodnews.jpg);background-attachment:fixed;background-size:cover;">
			<div class="COL6 clearfix"style="color:white;"><img src="/userUpload/images/10412126/001(1).png" class="image-full">
			<div class="clearfix"style="font-size:1em;">一處足於讓你流連忘返的老所在、可以點亮你的思路短暫的休息後從這裡再出發。</div>
			<div class="clearfix"style="font-size:1.2em;float:right;"><br>-2017庭翊民宿</div>
			</div>
			<div class="COL6 clearfix" style="float:right;padding:0;">
				<div class="COL12 title1area clearfix" style="background-color:white;" >
                <h4 class="smalltitle revealOnScroll" data-animation="zoomIn"style="color:black;font-size:3.5em;"> 好康消息</h4>
                <h4 class="bigtitle revealOnScroll" data-animation="zoomIn">Good news</h4>
				</div>
				<div class="text COL12 clearfix revealOnScroll"style="background-color:#e7e7e7;min-height:370px; data-animation="zoomInUp">
                	<p>庭翊週年慶
						庭翊民宿 週年慶活動即將從7/1開跑為時兩個月，週年慶期間適逢暑假及台東最熱鬧的原民豐年祭慶典時間, 忙碌的您暫時放下手邊的工作來一趟後山之旅會有您意想不到的驚喜, 庭翊民宿特推出以下的優惠活動回饋大家
						1 、即日起凡預定7/1-8/31日住宿者 , 住宿費不分平假日一律以當日報價9折優惠,
						2 、入住完成登記後再送精美（手工包中）見面禮一顆（以房間為單位）計之
						3 、凡集滿（庭翊民宿）贈送之手工見面禮（包中）5顆 即可兌換一間兩人房住宿一晚免費 , 兌換時間(無期限)
						粉絲專頁：facebook

						裡頭有更詳細的所有照片,並與我們互動

						訂房專線：0932112028
						歡迎好友大大們幫忙分享此好康訊息給您的好友們共同分享好康
</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();



});

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

