<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 {					}				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: "微軟正黑體", "新細明體", 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;								}		.COL12map{			width:100%;											}		.COL6{			width:50%;			float:left;			padding:2em;					}		.COL8{			width:65%;			padding:0.8em;								}		.clearfix:after {			  content: ".";			  display: block;			  height: 0;			  clear: both;			  visibility: hidden;		}				/***********blockarea***************/		.block1 {				min-height:700px;				clear: both;				background: url('/userUpload/images/10412126/map.PNG');				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/02.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;}						.iframe-rwd {							position: relative;							padding-bottom: 400px;							padding-top: 0;							height: 0;							overflow: hidden;						}									}		/*******************標題美化*************/		.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; }			}		/********************************************************/		.iframe-rwd {							position: relative;							padding-bottom: 40%;							padding-top: 0;							height: 0;							overflow: hidden;						}	.iframe-rwd iframe {							position: absolute;							top: 0;							left: 0;							width: 100%;							height: 100%;						}		 h4	{						font-size:1.8em;						font-weight: 800;		 }</style>
<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>
<div class="mainarea">
	<div class="block1 clearfix">
		<!--blockarea-->
		<div class="box BDBOX ">
			<!--box-->
			<div class="title1area">
				<h4 class="smalltitle revealOnScroll" data-animation="pulse">
					民宿地圖</h4>
				<h4 class="bigtitle revealOnScroll" data-animation="pulse">
					LOCATION</h4>
			</div>
			<div class="text  revealOnScroll" data-animation="pulse">
				進入庭翊，<br />
				彷彿進入另一個客家風情地方，<br />
				映入眼簾的懷舊三合院、<br />
				古色古香的客家造型。</div>
			<!-- <div class="btn"><a href="#">LEARN MORE</a></div> --></div>
		<!--box end--></div>
	<!--blockarea end-->
	<div class="GOODNEWS ">
		<!--STORY-->
		<div class="clearfix" style="background-image:url(/userUpload/images/10412126/goodnews.jpg);background-attachment:fixed;background-size:cover;">
			<div class="COL12 title1area clearfix" style="background-color:white;">
				<img class="p1 revealOnScroll" data-animation="pulse" src="/userUpload/images/10412126/002-1.png" />
				<h4 class="smalltitle revealOnScroll" data-animation="pulse" style="color:black;font-size:3.5em;">
					LOCATION</h4>
				<h4 class="bigtitle revealOnScroll" data-animation="pulse">
					交通位置</h4>
			</div>
			<div class="iframe-rwd COL12map">
				<div class="iframe-rwd">
					<iframe frameborder="0" height="450" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3679.894509784741!2d121.05676631541397!3d22.732161985100955!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x346fb7eafc786919%3A0xbfed81ca40697863!2z5bqt57-K5rCR5a6_!5e0!3m2!1szh-TW!2stw!4v1508223281740" style="border:0" width="600"></iframe></div>
			</div>
			<div class="text COL12 clearfix revealOnScroll" data-animation="pulse" style="background-color:white;min-height:370px;text-align:center;padding:4em 2em;">
				<h4>
					由花蓮往高雄方向：</h4>
				<p>
					沿台九省道花蓮往高雄方向 &rarr; 直行387.5K &rarr; 左轉青海路二段581巷 &rarr; 十字路口左轉97弄 &rarr; 庭翊民宿</p>
				<h4>
					由高雄往花蓮方向</h4>
				<p>
					沿台九省道高雄往台東方向 &rarr; 直行387.5K &rarr; 右轉青海路二段581巷 &rarr; 十字路口左轉97弄 &rarr; 庭翊民宿</p>
			</div>
		</div>
	</div>
	<div class="STORY ">
		<!--STORY-->
		<div class="block2 clearfix">
			<!--blockarea-->
			<div class="box BDBOX">
				<!--box-->
				<div class="COL12 clearfix" style="padding:0;">
					<img class="image-full image-rounded " data-animation="pulse" src="/userUpload/images/10412126/16.jpg" /></div>
				<div class="title1area">
					<h4 class="smalltitle revealOnScroll" data-animation="pulse">
						庭翊民宿</h4>
					<h4 class="bigtitle revealOnScroll" data-animation="pulse">
						WELCOME</h4>
				</div>
				<div class="text revealOnScroll" data-animation="pulse">
					<p>
						『山不在高有仙則名，水不在深有龍則靈，民宿不在摩登，有文化則馨』</p>
					<br />
					<p style="float:right">
						---- 成功大學兼任教授：毛齊武</p>
				</div>
			</div>
			<!--box end--></div>
		<!--blockarea end--></div>
	<!-- <div class="STORY"><!--STORY--></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 pulseUp pulse slideInLeft slideInRight  pulse pulseIn  pulse')
      }
    });
  }

  revealOnScroll();
});</script>