@charset "utf-8";
/* CSS Document */
.contentBox {
    width: 100%;
	margin: 0;
	position:relative;
 }

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

ul.roomList{
	width:1350px;}

ul.roomList li:first-child{
	padding:0 0 40px 0;
	position:relative;}

ul.roomList li{
	padding:40px 0;
	position:relative;}

ul.roomList li:before{
	display:block;
	content:"";
	border:1px solid #ebdabd;
	position:absolute;
	top:15%;
	bottom:0;
	left:10%;
	right:15%;
	}
ul.roomList li:nth-child(even):before{
	display:block;
	content:"";
	border:1px solid #ebdabd;
	position:absolute;
	top:15%;
	bottom:0;
	left:10%;
	right:38%;
	}

ul.roomList li .Img{
	position:relative;
	float:right;
	width:55%}
	
ul.roomList li:nth-child(even) .Img{
	position:relative;
	float:left;
	width:55%}

ul.roomList li .Img img{
	opacity: 1;
	display:block;
	width:100%;
	-webkit-transition:all 0.4s ease;
	-moz-transition:all 0.4s ease;
	-o-transition:all 0.4s ease;
	transition:all 0.4s ease;}
	
ul.roomList li:hover .Img img{
	-webkit-filter:grayscale(1);}

ul.roomList li .Txt{
	position:relative;
	float:left;
	width:29%;
	margin:15% 3% 0 13%;

}
ul.roomList li:nth-child(even) .Txt{
	position:relative;
	float:left;
	width:29%;
	margin:15% 6% 0 10%;

}
ul.roomList li .Txt h3{
	font-size:16px;
	color:#231f20;
	position:relative;
}
ul.roomList li .Txt h3:before{
	content:"";
	width:40px;
	height:2px;
	background:#ceaa6e;
	display:block;
	position:absolute;
	left:-62px;
	top:50%;
	transform:translateY(-50%);}

ul.roomList li .Txt h3 a{
	font-family: 'Mallanna', sans-serif;
	color:#231f20;	
}
ul.roomList li .Txt h3 strong{
	padding-right:3px;
	letter-spacing:3px;
	font-family: Helvetica, Arial, sans-serif, "微軟正黑體", Heiti TC, "メイリオ";
	font-weight:normal;
	font-size:30px;
}

ul.roomList li .Txt h3 span{
	font-weight:normal;
}

ul.roomList li .Txt em{
	color:#a0a09e;
	font-size:13px;}
ul.roomList li .Txt p{
	margin:35px 0;
	font-size:14px;
	color:#61605e;
	line-height:25px;
	height:50px;
	overflow:hidden;}
ul.roomList li .item .Txt a.btn{
	color:#61605e;
	font-size:15px;
	display:inline-block;
	border-bottom:1px solid #ceaa6e;
	padding:0 0 3px 0;
	letter-spacing:2px;
	font-family: 'Mallanna', sans-serif;
	-webkit-transition:all 0.4s ease;
	-moz-transition:all 0.4s ease;
	-o-transition:all 0.4s ease;
	transition:all 0.4s ease;
	}
ul.roomList li .item .Txt a:hover.btn{
	color:#ceaa6e;
	letter-spacing:5px;}
ul.roomList li .item .Txt a.btn i{
	display:inline-block;
	font-style:normal;
	}
ul.roomList li .item .Txt a:hover.btn i{
	transform: rotateY(360deg);
	transition: 0.9s;}		
/******內頁******/
.tabContent li:first-child .textEditor{
	width:calc(100% - 500px);
	clear: inherit;
	float:left;
}
.Img{
	clear: both;
    position: relative;
    max-height: calc(100vh - 65px);
    overflow: hidden;
	background:#000;}

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

ul.side_album{
	float:right;
	width:450px;
	margin:0;}



@media (max-width: 1730px){
	ul.roomList{
	width:100%;}
}

@media (max-width: 1140px){
ul.side_album{
	width:100%;
	text-align:center;
	float:none;
	margin-bottom:30px;
	
}
.tabContent li:first-child .textEditor{
	clear:both;
	float:none;
width:100%;
	}
}

@media (max-width: 767px){
ul.roomList li:nth-child(even) .Img {
    width: 100%;
}
ul.roomList li .Img{

	width:100%}
ul.roomList li .Txt {
    width: 66%;
    margin: 30px 17% 0 17%;
}
ul.roomList li:nth-child(even) .Txt {
    width:66%;
    margin: 30px 17% 0 17%;
}
ul.roomList li:before {
    top: 15%;
    bottom: 0;
    left: 10%;
    right: 10%;
}
ul.roomList li:nth-child(even):before {
	top: 15%;
    bottom: 0;
    left: 10%;
    right: 10%;
}
}

/*480*/
@media (max-width: 480px){
ul.roomList li:before {
    top: 15%;
    bottom: 0;
    left: 7%;
    right: 7%;
}
ul.roomList li:nth-child(even):before {
	top: 15%;
    bottom: 0;
    left: 7%;
    right: 7%;
}	
}
/*480 end*/