.section-room{
	border:1px solid #aA0;
	background:url("../image/bg-room-lt.png"),url("../image/all-con-bg.jpg");
	background-repeat  : no-repeat,repeat; 
	background-position: left top,top;
	margin-top: 60px;
  	display: flex;
  	flex-wrap: wrap; 
  	box-sizing: border-box;
}
h2.room-h2{
	margin-top: 0;
	background:url(../image/room-h2-bg.png) no-repeat top 10% left 42%;
	background-size: auto 80%;
}

.room-list{

	box-sizing: border-box;

	padding:0 20px;

	display: flex;

  	flex-wrap: wrap; 

  	width: 100%;	

	/*border:1px solid #cf0;*/

}

.room-list h2{

	width: 100%;

	text-align: center;

}

a.rooma{

	width: 100%;

	color:#873c14;

}

.r2,.r4,.r6,.r8{

	box-sizing: border-box;

	position: relative;

	margin-bottom: 20px;

}

.r2 .pic,

.r4 .pic,

.r6 .pic,

.r8 .pic{

	width: 100%;	

}

.r2 .pic img,

.r4 .pic img,

.r6 .pic img,

.r8 .pic img{

	vertical-align: middle;

	max-width: 100%;

}

.r2-name,.r4-name,.r6-name,.r8-name{

	font-size: 20px;

	font-weight: bold;

	padding: 10px;

	text-align: center;

}

.r2-name p,.r4-name p,.r6-name p,.r8-name p{

	margin-block-start: 0.2em;

  margin-block-end: 0.2em;

}

.r2-name{	

	background: #e7d6b1 url("../image/room/room-list-r2-bg.png") no-repeat left -20px top -10px ;

	background-size: 100px;

}

.r4-name{	

	background: #e7d6b1 url("../image/room/room-list-r4-bg.png") no-repeat right -20px top -10px ;

	background-size: 100px;

}

.r6-name{	

	background: #e7d6b1 url("../image/room/room-list-r6-bg.png") no-repeat left -20px top -10px ;

	background-size: 100px;

}

.r8-name{	

	background: #e7d6b1 url("../image/room/room-list-r8-bg.png") no-repeat right -20px top -10px ;

	background-size: 100px;

}

a.rooma:hover{

		color:#6784d6;

}

a.rooma:hover .r2-name{

	background:#d4defb url("../image/room/room-list-r2-bg.png") no-repeat right -20px top -10px ;

}

a.rooma:hover .r4-name{	

	background: #d4defb url("../image/room/room-list-r4-bg.png") no-repeat right -20px top -10px ;

}

a.rooma:hover .r6-name{	

	background: #d4defb url("../image/room/room-list-r6-bg.png") no-repeat left 0px bottom 0px ;

}

a.rooma:hover .r8-name{	

	background: #d4defb url("../image/room/room-list-r8-bg.png") no-repeat right 0px bottom 0px ;

}



@media screen and (min-width: 768px){
	h2.room-h2{		
		background-size: auto 80%;
	}
	.r2,.r4,.r6,.r8{				

		width: 50%;

		/*border:1px solid #000;*/

	}	

	

	.r2 .pic,

	.r4 .pic,

	.r6 .pic,

	.r8 .pic{

		width: 100%;	

		position: relative;	

		left: 0;

	}

	.r2 .pic:after,

	.r4 .pic:after{

			content:'';

			display: block;

			width: 100%;

			padding-bottom: calc(66% + 20px);

			/*border:1px solid #ea0;*/

	}

	.r6 .pic:after,

	.r8 .pic:after{

			content:'';

			display: block;

			width: 100%;

			padding-top: calc(66% + 20px);

			/*border:1px solid #cf0;*/

	}

	.r2 .pic img,

	.r6 .pic img{

		position: absolute;

		width: 90%;

		left: 0;

	}

	.r4 .pic img,

	.r8 .pic img{

		position: absolute;

		width: 90%;

		right: 0;

	}

	.r6 .pic img,

	.r8 .pic img{

		bottom:0;

	}	

	.r4 .pic{	

		position: relative;		

		top:0;

		right:0;

	}



	.r2-name,

	.r4-name,

	.r6-name,

	.r8-name{

		position: absolute;		

		width: 150px;

		height: 150px;

		background-size: 100%;

	}

	.r2-name{

		bottom:0;

		right:15px;

		background-position: left -20px top 10px;



	}

	.r2-name p{

		position: absolute;

		bottom: 0;

		right: 10px;

		writing-mode: vertical-rl;

	}

	.r4-name{

		bottom:0;

		left:10px;		

		background-position: right -20px top -20px ;

	}

	.r4-name p{

		position: absolute;

		bottom: 0;

		left: 10px;

		writing-mode: vertical-lr;

	}

	.r6-name{

		top:0;

		right:10px;

		background-position: left -20px bottom -30px ;	

	}

	.r6-name p{

		position: absolute;

		top: 10px;

		right: 10px;

		writing-mode: vertical-rl;

	}

	.r8-name{

		top:0;

		left:10px;

		background-position: right -20px bottom -30px ;

	}	

	.r8-name p{

		position: absolute;	

		top: 10;

		left: 10px;

		writing-mode: vertical-lr;

	}

	.r2-name span:first-child,	

	.r6-name span:first-child{

		display: block;

		font-size: 50px;

		padding-left: 10px;

	}

	.r4-name span:first-child,

	.r8-name span:first-child{

		display: block;

		font-size: 50px;

		padding-right: 10px;

	}

	.r2-name span,

	.r4-name span,

	.r6-name span,

	.r8-name span{

		display: block;	

		font-size: 30px;

	}

}

.room-list-note{

		box-sizing: border-box;

		width: 100%;

		padding: 20px;		

}

.room-list-note-type{
	background:  url("../image/must-bg-1-1.png") no-repeat top right, url("../image/must-bg-1-2.png")  no-repeat bottom left #aae9d5;

	padding: 20px;

}

@media screen and (min-width: 1027px) and (max-width: 1379px){

	.r2-name,

	.r4-name,

	.r6-name,

	.r8-name{

		position: absolute;		

		width: 120px;

		height: 120px;

		background-size: 100%;

		padding:0;

	}

	.r2-name span:first-child,	

	.r6-name span:first-child{

		display: block;

		font-size: 40px;

		padding-left: 5px;

	}

	.r4-name span:first-child,

	.r8-name span:first-child{

		display: block;

		font-size: 40px;

		padding-right: 5px;

	}

	.r2-name span,

	.r4-name span,

	.r6-name span,

	.r8-name span{

		display: block;	

		font-size: 25px;

	}

	.room-list{		

		box-sizing: border-box;

		width: calc(100% - 350px);

		padding:0 30px 200px;		

	}

	.room-list-note{
		/*border:1px solid #fa0;*/
		box-sizing: border-box;	
		width: 350px;
		padding: 0;	
	}

	.room-list-note-type{	
		position: sticky;
		box-sizing: border-box;
		width: 350px;
		padding: 10px;
		top:135px;
	}
	.notice-con>.all-paper-box>.room-list-note-type{	    
	    width: 100%;
	}

}

@media screen and (min-width: 1380px){



.room-list{		

		width: calc(100% - 33%);

		padding:0 60px;	

	}

.room-list-note{	

		width: 33%;

		padding: 0;

}

.room-list-note-type{	

		position: sticky;

		box-sizing: border-box;

		width: 100%;

		padding: 20px;		

		top:135px;		

	}

}



/*進入單一房間*/

.single-room-info{

	position: relative;

	width: 100%;

}

.sroom-title {

	padding-top: 60px;

	padding-bottom: 20px;

	background:url(../image/room/sroom-title-bg-r2.png) no-repeat top 10px left 80px; 

}

.sroom-info h3{	

	text-align: center;

	font-size: 30px;	

	background:#e7d6b1;	

	color:#dd3c03;

	margin-bottom: 0;

	padding: 5px;

}

.sroom-info h3 span.e-type{	

	font-size: 40px;

	color:#e78b6b;

	margin-bottom: 0;

}

ul.room-detail{

	list-style: none;

	margin: 15px;

	padding: 15px 0;

}

ul.room-detail li{

	display: flex;	

	color: #873c14;

}

.rdet-tit{

	width: 90px;	

	font-weight: 400;

}

.rdet-con{

	width: calc(100% - 90px);

}

.sroom-photo>.owl-theme .owl-dots .owl-dot span{

	background:#72d3d4;

}

.sroom-photo>.owl-theme .owl-dots .owl-dot.active span{

	background:#dd3c03;

}

.sroom-photo>.owl-carousel .owl-item img{

	box-sizing: border-box;

	background:#fff;

	padding: 10px;

}

@media screen and (min-width: 768px){

	.sroom-photo{

		width: 64%;

		padding-bottom: 100px;

	}

	.sroom-info{

		position: absolute;

		width: 45%;

		right: 0;

		bottom: 4%;		

		color:#f00;

		z-index: 10;

	}

	.sroom-info h3{		

		width: 85%;

	}

}

@media screen and (min-width: 1027px) and (max-width: 1379px){

	.sroom-photo{

		width: 74%;		

		padding-bottom: 150px;

	}

	.sroom-info{

		position: absolute;

		width: 60%;

		top: 150px;

	}

}



/*房間價格*/

table.table-room tr.active{

	background:#ebd8ca;

}
table.table-room th span{
	display: block;
	color: #000 !important;
}
@media screen and (min-width: 461px){
	table.table-room th span{
		display: inline !important;
	}	
}	

/*訂房須知頁面*/
.notice-con>.all-paper-box>.room-list-note-type{
	background:none;

}

/*訂房須知*/
.notice-h2{
	background:url(../image/notice-h3.png) no-repeat top 30% left 42%;
	background-size: auto 80%;
	width: 100%;
	text-align: center;
	margin-bottom: 30px;
	padding-top: 90px;
	padding-bottom: 30px;	
}