@charset "utf-8";
/* CSS Document */

html,body{
	overflow-x:hidden;}

.Mainbanner{
	padding-top:0;
	position:relative;}

ul#banner li{
	position:relative;
	min-height:0;
	height:100vh;
	overflow:hidden;}

ul#banner li > .Img{
	width:100%;
	height:100%;
	position:absolute;
	left:0;
	top:0;
	
	transition:all 30s ease;}

ul#banner li.active > .Img{
	transform:scale(1.4);}

ul#banner li > .Img img{
	display:block;
	width:100%;
	height:100%;
	object-fit:cover;}

ul#banner li a{
	display:block;
	width:100%;
	height:100%;}

ul#banner li .Txt_home{
	position:absolute;
	top:20%;
	left:50%;
	margin-left:300px;}

ul#banner li .Txt_home .pic{
	opacity:0;
	position:relative;
	top:10px;
	transition:all 1s ease;}

ul#banner li .Txt_home .slogan{
	margin-top:20px;
	margin-right:50px;
	font-family:Arial, Helvetica, sans-serif,"標楷體", "微軟正黑體";
	font-size:15px;
	color:#FFF;
	text-align:right;
	
	opacity:0;
	position:relative;
	top:-10px;
	transition:all 1s ease;}

ul#banner li .Txt_home .slogan span{
	display:block;
	float:right;
	margin:0 2px;
	width:20px;}

ul#banner li.active .Txt_home .pic{
	top:0;
	opacity:1;}
ul#banner li.active .Txt_home .slogan{
	top:0;
	opacity:1;}

.Mainbanner .bx-wrapper .bx-pager, 
.Mainbanner .bx-wrapper .bx-controls-auto{
	padding:0 20px 0 0;
	box-sizing:border-box;
	direction:rtl;
	text-align:right;
	z-index:100;}

@media screen and (max-width:1160px){	
	.Mainbanner .bx-wrapper .bx-pager, 
	.Mainbanner .bx-wrapper .bx-controls-auto{
		direction:ltr;
		text-align:center;
		padding:0;}
	
	ul#banner li{
		height:auto;}
		
	ul#banner li > .Img{
		width:auto;
		height:auto;
		position:static;}
	
	ul#banner li > .Img img{
		display:block;
		width:100%;
		height:auto;
		position:static;
		object-fit:inherit;}
	
	ul#banner li .Txt_home{
		display:none;}

}

.mainContent{
	background:none;
	padding:0;}

.enTitle{
	margin-bottom:35px;
	font-size:26px;
	color:#66502e;}

.enTitle em{
	font-weight:normal;
	text-transform:uppercase;}

.enTitle em:after{
	content:"";
	display:inline-block;
	vertical-align:baseline;
	margin:0 15px;
	width:2px;
	background:#66502e;
	height:20px;}

.enTitle strong{
	font-weight:normal;}

/*訂房區塊*/
.bookingArea{
	padding:70px 0 100px 0;
	background:url(../images/bg_forest_gray.png) center bottom repeat-x #FFF;
	position:relative;}

.bookingArea .dec{
	width:440px;
	
	position:absolute;
	bottom:-46px;
	left:50%;
	margin-left:-220px;}

.bookingArea .bookBox{
	width:50%;
	padding:0 175px 0 80px;
	float:left;}

ul.bookForm{}

ul.bookForm li{
	padding-bottom:15px;}

ul.bookForm li .item{}

ul.bookForm li label{
	display:block;
	margin-right:20px;
	float:left;
	font-size:15px;
	color:#304634;}

ul.bookForm li .right{
	overflow:hidden;
	position:relative;}

ul.bookForm li .right select{
	border:1px solid #818181;
	padding:8px;
	width:100%;
	height:35px;
	box-sizing:border-box;
	position:relative;}

ul.bookForm li .right input[type="text"]{
	padding:8px;
	border:1px solid #818181;
	width:100%;
	height:35px;
	box-sizing:border-box;}

ul.bookForm li .right i{
	display:block;
	width:40px;
	height:35px;
	line-height:35px;
	text-align:center;
	background:#304634;
	border:1px solid #818181;
	font-size:16px;
	color:#FFF;
	position:absolute;
	right:0;
	top:0;}

.bookingArea .bookBox .btn{
	margin-top:20px;
	text-align:right;}

.bookingArea .bookBox .btn a{
	display:inline-block;
	background:#304634;
	color:#FFF;
	padding:8px 30px;
	font-size:15px;}

.bookingArea .bookBox .btn a i{
	margin-right:8px;}

.bookingArea .bookBox .btn a:hover{
	background:#4b7753;}

.bookingArea .ticketBox{
	width:50%;
	padding:0 100px;
	float:right;
	text-align:center;}

.bookingArea .ticketBox p{
	font-size:15px;
	color:#477519;}

.bookingArea .ticketBox .btn{
	margin-top:50px;}

.bookingArea .ticketBox .btn a{}

/*adArea*/
.adArea{
	padding:90px 0 140px 0;
	background:url(../images/bg_news.png) center bottom repeat-x #FFF;}

.adArea .enTitle{
	text-align:center;}

.adArea ul{}

.adArea ul li.data{
	padding:0 10px;}

.adArea ul li.data .item{}

.adArea ul li.data .Img{
	position:relative;}

.adArea ul li.data .Img img{
	display:block;
	width:100%;}

.adArea ul li.data .Txt{
	padding:25px 15px;
	transition:all 0.4s ease;}

.adArea ul li.data .Txt h3{
	font-size:18px;
	font-weight:normal;}

.adArea ul li.data .Txt h3 strong{
	font-weight:normal;}

.adArea ul li.data .Txt h3 a{
	display:block;
	width:100%;
	color:#000;
	overflow:hidden;
	text-overflow:ellipsis;
	white-space:nowrap;}

.adArea ul li.data .Txt h3 a:hover{
	color:#ab792a;}

.adArea ul li.data .Txt p{
	margin-top:20px;
	font-size:13px;
	color:#4b4b4b;
	line-height:1.8;
	height:70px;}

.adArea ul li.data .btn{
	margin-top:30px;
	text-align:center;}

.adArea ul li.data .btn a{
	display:inline-block;
	padding:0 8px;
	border-left:1px solid #8d8d8d;
	border-right:1px solid #8d8d8d;
	color:#8d8d8d;}

.adArea .btn_more{
	clear:both;
	margin-top:80px;
	text-align:center;}


.adArea .slick-dots{
	bottom:-45px;}

/*newsArea*/
.newsArea{
	background:#FFF;
	padding:100px 0 150px 0;
	
	position:relative;}

.newsArea .bg{
	background:url(../images/bg_news02.jpg) center center;
	background-size:cover;
	
	width:100%;
	height:100%;
	
	transform:skewY(-2deg);
	
	position:absolute;
	left:0;
	top:-30px;}

@media screen and (min-width:1160px){/*1160以上滾動視差*/
	.newsArea .bg{
		background-attachment:fixed;}
}

.newsArea .wrap{
	position:relative;}

.newsArea .enTitle{
	margin-bottom: 80px;
	color: #300;
	text-align: center;
}

.newsArea ul{
	max-width:1000px;
	margin:0 auto;}

.newsArea ul li{
	padding:20px 0;}

.newsArea ul li .Img{
	display:none;}

.newsArea ul li .date{
	float: left;
	font-family: 'EB Garamond', serif;
	color: #4e1f0e;
	padding-right: 45px;
	margin-right: 45px;
	border-right-width: 1px;
	border-right-style: solid;
	border-right-color: #9a7052;
}

.newsArea ul li .date b{
	margin-right:10px;
	display:inline-block;
	font-size:35px;
	font-weight:normal;}

.newsArea ul li .date em{
	display:inline-block;
	font-weight:normal;
	font-size:35px;
	text-transform:uppercase;}

.newsArea ul li .date strong{
	display:block;
	font-weight:normal;
	font-size:20px;
	text-align:right;}

.newsArea ul li .Txt{
	overflow:hidden;}

.newsArea ul li .Txt h3{
	font-size:20px;
	font-weight:normal;}

.newsArea ul li .Txt h3 a{
	color: #4e1f0e;
}

.newsArea ul li .Txt h3 a:hover{
	text-decoration:underline;}

.newsArea ul li .Txt p{
	margin-top: 7px;
	font-size: 15px;
	color: #66502e;
	line-height: 1.8;
}

.newsArea .btn_more{
	clear:both;
	margin-top:50px;
	text-align:center;}

.newsArea .btn_more a{
	display:inline-block;
	color:#300;
	border:1px solid #300;}

.newsArea .btn_more a:hover{
	background:none;}

/*featureArea*/
.featureArea{
	padding:80px 0 140px 0;
	background:#FFF;}

.featureArea .enTitle{
	text-align:center;}

.featureArea ul{}

ul#room li.data{
	padding:0 10px;}

ul#room li.data .item{
	position:relative;}

ul#room li.data .Img{
	position:relative;
	overflow:hidden;
	background:url(../images/room_hover.jpg) no-repeat;
	background-size:cover;}

ul#room li.data .Img a{
	display:block;}

ul#room li.data .Img img{
	display:block;
	width:100%;
	transition:all 0.4s ease;}

ul#room li.data .Txt{
	width:100%;
	font-size:16px;
	color:#FFF;
	text-align:center;
	line-height:1.8;
	
	padding:50px 20px 0 20px;
	
	position:absolute;
	left:0;
	top:0;
	box-sizing:border-box;}

ul#room li.data .Txt h4{
	font-family:'EB Garamond', serif;
	font-size:60px;
	font-style:italic;
	font-weight:normal;
	
	position:relative;
	top:10px;
	transition:all 0.4s ease;
	opacity:0;}

ul#room li.data .Txt p{
	position:relative;
	top:-10px;
	transition:all 0.4s ease;
	opacity:0;}

ul#room li.data h3{
	margin-top:30px;
	font-size:18px;
	text-align:center;}

ul#room li.data h3 strong{
	font-weight:normal;}

ul#room li.data h3 strong a{
	position:relative;
	display:block;
	font-size:16px;
	color:#645019;}

ul#room li.data .btn{
	margin-top:20px;
	text-align:center;
	
	transition:all 0.4s ease;
	opacity:0;}

ul#room li.data .btn a{
	display:inline-block;
	padding:0 7px;
	border-left:1px solid #FFF;
	border-right:1px solid #FFF;
	font-size:14px;
	color:#FFF;}

.featureArea .slick-dots{
	bottom:-60px;}

/*hover*/
ul#room li.data:hover .Img img{
	opacity:0;}

ul#room li.data:hover .Txt h4{
	top:0;
	opacity:1;}

ul#room li.data:hover .Txt p{
	top:0;
	opacity:1;}

ul#room li.data:hover .btn{
	opacity:1;}

/*關於我們*/
.aboutArea{
	padding:120px 0;
	background:#FFF;
	position:relative;}

.aboutArea .wrap{
	padding-left:30%;
	position:relative;
	z-index:1;}

.aboutArea .bg{
	background:url(../images/bg_about.jpg) center center;
	background-size:cover;
	
	width:100%;
	height:100%;
	
	transform:skewY(-2deg);
	
	position:absolute;
	left:0;
	top:-30px;}

@media screen and (min-width:1160px){/*1160以上滾動視差*/
	.aboutArea .bg{
		background-attachment:fixed;}
}

.aboutArea h2{
	margin-bottom:50px;
	font-family:'EB Garamond', serif;
	font-size:60px;
	font-style:italic;
	font-weight:normal;
	color:#400;}

.aboutArea .Img{
	display:none;}

.aboutArea .Txt{
	font-size:18px;
	color:#4e1f0e;
	line-height:1.8;}

.aboutArea .btn{
	margin-top:80px;}

.aboutArea .btn a{
	display:inline-block;
	padding:10px 70px;
	color:#300;
	border:1px solid #300;
	letter-spacing:1px;}

.aboutArea .btn a:hover{
	letter-spacing:5px;}

/*廣告跑馬燈*/
.marqueeArea{
	background:#FFF;
	padding:130px 0 200px 0;}

.marqueeArea ul li{
	padding:0;}

.marqueeArea .item{
	transition:all 0.4s ease;}

.marqueeArea .Img img{
	display:block;
	width:100%;}

.marqueeArea h4{
	display:none;}

.marqueeArea ul li:hover .item{
	opacity:0.8;}

@media (max-width: 1160px){
	.menuBox{
		display:none;}
	
	.bookingArea .dec{
		display:none;}
	
	.bookingArea .bookBox{
		float:none;
		width:100%;
		max-width:480px;
		margin:0 auto;
		padding:0 0 50px 0;}
	
	.bookingArea .bookBox .btn a{
		display:block;
		text-align:center;
		margin-left:80px;}
	
	.bookingArea .ticketBox{
		float:none;
		width:100%;
		padding:0;}
}

@media (max-width: 960px){
	ul#room li.data .Txt h4{
		font-size:30px;}
	
	ul#room li.data .Txt{
		font-size:13px;}
}

@media (max-width: 768px){	

}

@media (max-width: 640px){
	.newsArea ul li .date{
		float:none;
		margin:0;
		padding:0 0 15px 0;
		border:none;}
	
	.newsArea ul li .date b{
		font-size:15px;}
	.newsArea ul li .date em{
		font-size:20px;}
	.newsArea ul li .date strong{
		display:inline-block;
		margin-left:10px;
		text-align:left;}
	
	.aboutArea .wrap{
		padding:0 20px;}
	
	.aboutArea h2{
		font-size:40px;
		margin-bottom:30px;}
		
}

@media (max-width: 480px){
	.enTitle{
		text-align:center;}
	
	.enTitle em{
		display:block;}
	
	.enTitle strong{
		font-size:20px;}
	
	.enTitle em:after{
		display:none;}
	
	ul#room li.data .Txt{
		padding-top:20px;}
}