@charset "utf-8";
/* CSS Document */
.mainArea{
	padding:130px 0 0 0;}
.mainArea .red03{
	position:absolute;
	top:0;
	left:0;
	width:90px;
	height:130px;
	background:url(../images/red.jpg);}
/*.bannerBox ul li{
	opacity: 0.06;
}*/
.contentBox .leftBox{
	padding:0 50px 0 0;}

.contentBox .rightBox{
	padding:0;}

.classNote{
	padding-bottom:10px;
	
	font-size:15px;
	color:#222;
	text-align:center;
	line-height:1.8;}

ul.roomList{
	}

ul.roomList li{
	position:relative;
	padding-bottom:130px;}
ul.roomList li .red{
	position:absolute;
	top:auto;
	left:0;
	bottom:0;
	width:90px;
	height:130px;
	background:url(../images/red.jpg);}
ul.roomList li:nth-child(2n+1) .red01{
	position:absolute;
	right:0;
	bottom:0;
	width:380px;
	height:130px;
	background:url(../images/red.jpg);}
ul.roomList li:nth-child(2n) .red{
	position:absolute;
	top:0;
	left:auto;
	right:0;
	bottom:0;
	width:380px;
	height:auto;
	background:url(../images/red.jpg);}
ul.roomList li .item{
	position:relative;}
ul.roomList li .ImgBox{
	padding:0;}
ul.roomList li:nth-child(2n) .ImgBox{
	float:right;}
ul.roomList li .Img{
	position:absolute;
	overflow:hidden;
	top:0;
	bottom:0;
	width:50%;}
ul.roomList li .Img img{
	display:block;
	width:100%;
	height:100%;
	object-fit:cover;
	-o-object-fit:cover;}
ul.roomList li .wrap{
	}
ul.roomList li .Txt{
	float:right;
	font-family: 'Dosis',"微軟正黑體", sans-serif;
	padding:100px 95px 100px 74px;}
ul.roomList li:nth-child(2n) .Txt{
	float:left;}
ul.roomList li .Txt span.en{
	position:relative;
	padding-bottom:30px;
	margin-bottom:30px;
	color:#6f4d1a;
	font-size:14px;
	display:block;
	letter-spacing:5px;
	text-transform:uppercase;}
ul.roomList li .Txt span.en:after{
	content:"";
	position:absolute;
	left:0;
	bottom:0;
	width:50px;
	height:1px;
	background:#f4a053;}
ul.roomList li .Txt h3{
	position:relative;
	margin-bottom:25px;
}
ul.roomList li .Txt h3 span{
	display:block;
	position:absolute;
	right:0;
	top:15px;
	color:#6f4d1a;
	padding-left:70px;}
ul.roomList li .Txt h3 span:before{
	content:"";
	position:absolute;
	left:0;
	top:50%;
	width:50px;
	height:1px;
	background:#f4a053;}
ul.roomList li .Txt h3 a{
	font-weight:normal;
	display:block;
	width:100%;
	overflow:hidden;
	text-overflow:ellipsis;
	white-space:nowrap;
	font-size:36px;
	color:#333;
	letter-spacing:5px;}

ul.roomList li .Txt h3 strong a:hover{
	color:#da2441;}

ul.roomList li .Txt p{
	padding-top:10px;
	font-size:15px;
	color:#a88e50;
	line-height:1.8;
	height:80px;}
ul.roomList li .Txt a.btn{
	margin-top:60px;
	display:inline-block;
	color:#6f4d1a;
	font-size:14px;
	letter-spacing:2px;
	padding:12px 70px;
	border:1px solid #6f4d1a;}
ul.roomList li .Txt a.btn:hover{
	color:#fff;
	background:#6f4d1a;}
/******內頁******/
.room_ins .slick-initialized .slick-slide{
	padding:0 40px;}
.room_ins ul.side_album a{
	background:#000;}
.room_ins ul.side_album li a{
	margin:15% 0 0 0;
	width:50%;}
.room_ins ul.side_album li.prev a{
	float:right;}
.room_ins ul.side_album img{
	opacity:1;}
.room_ins ul.side_album .slick-center a{
	margin:0;
	width:100%;}
.room_ins ul.side_album .slick-center img{
	opacity:1;}
.room_ins header,
.room_ins .bookArea{
	display:none;
}
.room_ins .mainArea{
	position: absolute;
    left: 0;
    top: 0;
    width: 100%;
	padding:0;}
.room_ins .mainArea a.close{
	position:absolute;
	right:0;
	top:0;
	width:110px;
	height:110px;
	background:#222;}
.room_ins .mainArea a.close .left{
	position:absolute;
	top:53px;
	left: 34px;
	width:50px;
	height:1px;
	background:#fff;
	transform:rotate(45deg);
	}
.room_ins .mainArea a.close .right{
	position:absolute;
	top:53px;
	right: 26px;
	width:50px;
	height:1px;
	background:#fff;
	transform:rotate(-45deg);
	}
.room_ins .btn_book{
	position:absolute;
	right:111px;
	top:0;
	height:110px;
	line-height:110px;
	color:#fff;
	font-size:15px;
	letter-spacing:2px;
	background:#f4a053;
	padding: 0 55px;}
.room_ins .btn_book:hover{
	background:#f4a053;}
.room_ins .contentBox{
	position:static;
	padding-top:190px;}

ul.roomlist{
	box-sizing:border-box;
	position:fixed;
	width:100%;
	z-index:100;
	padding:50px 0 5px 25px;
	background:rgba(0,0,0,0.7);
	height: 110px;
}

ul.roomlist.shrink{
	/*background:rgba(0,0,0,0.7);*/
}
ul.roomlist li{
	display:inline-block;
	padding:0 20px;}
ul.roomlist li a{
	position:relative;
	display:block;
	font-size:15px;
	color:#fff;
	padding:0 0 20px 0;}
ul.roomlist li a:after{
	content:"";
	position:absolute;
	left:50%;
	margin-left:-15px;
	bottom:0;
	width:30px;
	height:0;
	background:#f4a053;
	transition:all 0.3s ease;}

ul.roomlist li a:hover:after,
ul.roomlist li a.current:after{
	height:2px;}
.room_ins .bannerArea{
	padding-bottom:320px;
	background:url(../images/bg_news.jpg) center center;}
.room_ins .bannerArea .wrap{
	width:100%;}
.room_ins .wrap{
	width:1000px;}
.room_ins .contentBox p.intro{
	position:relative;
	padding:150px 0 0 0;
	text-align:center;
	font-size:15px;
	color:#a88e50;
	line-height:1.8;}
.room_ins .contentBox p.intro:before{
	content:"";
	position:absolute;
	left:50%;
	top:0;
	width:1px;
	height:130px;
	background:#fff;}
.room_ins .contentBox p.intro:after{
	content:"";
	position:absolute;
	left:50%;
	top:60px;
	width:1px;
	height:70px;
	background:#f4a053;}
.room_ins .room_type{
	position:relative;
	font-family: 'Roboto',"微軟正黑體", sans-serif;
	padding:95px 0 110px 0;}
.room_ins .room_type:after{
	content:"";
	position:absolute;
	left:50%;
	bottom:0;
	width:1px;
	height:40px;
	background:#f4a053;}
.room_ins .room_type em{
	display:inline-block;
	padding-right:90px;
	font-size:18px;
	vertical-align:middle;
	color:#6f4d1a;}
.room_ins .room_type em b{
	font-size:50px;
	color:#a88e50;
	letter-spacing:2px;
	font-weight:100;}
.room_ins .room_type span{
	display:inline-block;
	text-align:center;
	color:#a88e50;
	letter-spacing:2px;
	margin-left:49px;
	vertical-align:middle;}
.room_ins .room_type span b{
	position:relative;
	display:block;
	width:100px;
	height:100px;
	box-sizing:border-box;
	font-size:15px;
	color:#6f4d1a;
	font-weight:normal;
	letter-spacing:0;
	text-align:center;
	border-radius:100%;
	margin:0 0 10px 0;
	border:1px solid #6f4d1a;}
.room_ins .room_type span b i{
	position:absolute;
	top:50%;
	transform:translateY(-50%);
	-webkit-transform:translateY(-50%);
	-moz-transform:translateY(-50%);
	left:0;
	width:100%;
	text-align:center;
	font-style:normal;
	letter-spacing:1px;
	line-height:1.4;}
.room_ins .room_type span b small{
	display: block;
    font-size: 13px;}
.serviceBox{
	background:url(../images/bg_news.jpg) center center;
	position:relative;
	padding:95px 0 105px 0;

}
.serviceBox:after{
	content:"";
	position:absolute;
	left:50%;
	top:0;
	width:1px;
	height:65px;
	background:#fff;}
.serviceBox p.title{
	text-align:center;
	font-size:20px;
	color:#fff;
	letter-spacing:2px;
	margin-bottom:60px;}
.serviceBox ul{
	padding:0 0 100px 0;}
.serviceBox ul li{
	width:35%;
	box-sizing:border-box;
	display:inline-block;
	float:left;
	height:26px;
	margin-bottom:15px;}
.serviceBox ul li:nth-child(3n+1){
	width:40%;}
.serviceBox ul li:nth-child(3n){
	width:25%;}
.serviceBox ul li i{
	display:inline-block;
	width:17px;
	height:18px;
	padding-right:14px;
	color:#6f4d1a;}
.serviceBox ul li.soap i{
	background:url(../images/soap.png) left center no-repeat;}
.serviceBox ul li.shower i{
	background:url(../images/shower.png) left center no-repeat;}
.serviceBox ul li.tea i{
	background:url(../images/tea.png) left center no-repeat;}
.serviceBox ul li.sound i{
	background:url(../images/sound.png) left center no-repeat;}
.serviceBox ul li.bottle i{
	background:url(../images/bottle.png) left center no-repeat;}
.tabBox{
	position:relative;
	padding:130px 0 140px 0;}
.tabBox:before{
	content:"";
	position:absolute;
	left:50%;
	top:70px;
	width:1px;
	height:90px;
	background:#6f4d1a;}
.tabBox:after{
	content:"";
	position:absolute;
	left:50%;
	bottom:140px;
	width:1px;
	height:90px;
	background:#6f4d1a;}
.tabBox .wrap{
	}
.tabcontent{
	padding:55px 95px 105px 95px;
	border:7px solid #1e1c1b;}
.shareBox{
	padding-top:30px;
	font-size:15px;
	text-align:right;}
.shareBox a{
	position:relative;
	display:inline-block;
	margin-left:53px;
	padding-bottom:14px;}
.shareBox a.fb:after{
	content:"";
	position:absolute;
	left:0;
	bottom:0;
	width:100%;
	height:1px;
	opacity:0;
	background: #3859d4;
	transition: all 0.3s ease; }
.shareBox a.line:after{
	content:"";
	position:absolute;
	left:0;
	bottom:0;
	width:100%;
	height:1px;
	opacity:0;
	background:#2dad00;
	transition: all 0.3s ease; }

.shareBox a:hover:after{
	opacity:1;}
.shareBox a i{
	position:relative;
	margin-left:30px;}
.shareBox a i:after{
	content: "";
	position: absolute;
	right: 0;
	top: 50%;
	margin-right: 5px;
	width:20px;
	height: 1px;
	background: #3859d4;
	opacity: 0;
	transition: all 0.3s ease;
}
.shareBox a.line i:after{
	background:#2dad00;}
.shareBox a:hover i:after{
	opacity: 1;
	margin-right: 0;
}
.shareBox a.fb{
	color:#3859d4;}
.shareBox a.line{
	color:#2dad00;}
@media (max-width: 1180px){

	.serviceBox ul{
	padding:0 0 150px 0;}

	ul.roomList li{
		width:50%;
		float:left;
		display:inline-block;
		box-sizing:border-box;
		padding:10px;}
	ul.roomList li .ImgBox{
		width:100%;
		float:none;}
	ul.roomList li .Img{
		width:100%;
		float:none;
		position:static;}
	ul.roomList li .Img img{
		position:static;}
	ul.roomList li .Txt{
		width:100%;
		float:none;}
	ul.roomList li .wrap{
		padding:0;}
	ul.roomList li .red,
	ul.roomList li:nth-child(2n+1) .red01,
	.mainArea .red03{
		display:none;}
	ul.roomList li .Txt{
		padding:50px 10px;}
	ul.roomlist{
		padding:150px 0 0 25px;
		text-align:center;}
	.room_ins .slick-initialized .slick-slide{
		padding:0;}
	.room_ins ul.side_album a{
		background:#000;}
	.room_ins ul.side_album li a{
		margin:0;
		width:100%;}
	.mainArea .slick-dots{
		bottom:30px;}
	.room_ins .contentBox{
		padding:90px 0 0 0;}
	.mainArea{
		padding:50px 0 0 0;}

		ul.roomlist{
	padding:50px 0 5px 25px;
	height: 110px;
}
	
}
@media (max-width:1100px){
	.room_ins .wrap{
		width:100%;
		padding:0 20px;}
	.room_ins .bannerArea .wrap{
		padding:0;}	
	.serviceBox ul li{
		
		width:50%!important;}
	.tabcontent{
		padding:55px 20px;}
}
/*640*/
@media (max-width: 960px){
	ul.roomList li .Txt h3 span{
		position:static;
		padding:10px 0 0 0;}
	ul.roomList li .Txt h3 span:before{
		display:none;}
	.room_ins .room_type{
		text-align:center;}	
	.room_ins .room_type em{
		display:block;
		padding:0 0 40px 0;
		text-align:center;}
	.room_ins .room_type span{
		margin-left:10px;}
	.room_ins .mainArea a.close{
		width: 80px;
		height: 80px;
		}
	.room_ins .mainArea a.close .left{
		top: 40px;
		left: 25px;
		width: 30px;
		}
	.room_ins .mainArea a.close .right{
		top: 40px;
		right: 25px;
		width: 30px;
		}
	.room_ins .btn_book{
		right: 81px;
		height: 80px;
		line-height: 80px;
		}
		
	.mainArea .contentBox h3.articleTitle{
		padding:0 20px 80px 20px;}

		ul.roomlist{
	padding:50px 0 5px 25px;
	height: 80px;
}


}
@media (max-width: 820px){
	.serviceBox ul{
	padding:0;}

	.serviceBox ul li{
		/*float: none;*/
		height:auto;
		width:50%!important;
	}	


}
/*480*/
@media (max-width: 760px){
	

	ul.roomList li{
		padding:10px 20px;
		width:100%;}	
	ul.roomList li .Txt h3 a{
		font-size:29px;}
	.tabBox:after{
		display:none;}

	
}
@media (max-width: 640px){
	-webkit-user-select:.roomlist { 
	 
	 	 	padding :0 ; };
	-moz-user-select:.roomlist { 
	 
	 	 	padding :0 ; };
	-ms-user-select:.roomlist { 
	 
	 	 	padding :0 ; };
	user-select:.roomlist { 
	 
	 	 	padding :0 ; };
			padding:0;
	ul.roomlist li{
		display:none;}
	/*.room_ins .m_classLink{
		margin:180px 20px 0 20px;}*/

		

		
}
@media (max-width:480px){
	.room_ins .room_type em b{
		font-size:37px;}
	.room_ins .room_type span{
		margin:0 auto;
		display:block;}
	.room_ins .room_type span b{
		margin:20px auto 10px auto;}

}
/*480 end*/