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

.list li{
	position:relative;
	width:33.333%;
	float:left;
	margin:0;
	border:#FFF solid 1px;
	box-sizing:border-box;
	z-index:6;
	overflow:hidden;
}
.list a{
	color: #8a7f7d;
}
.list img{
	width:100%;
	display:block;
}
.roomName{
	background:#f2f2f2;
	text-align:center;	
	padding:15px 0;
	height:30px;
	line-height:30px;
}
.roomInfo{
	background:rgba(255,255,255,0.8);
	position:absolute;
	z-index:2;
	width:100%;
	height:0;
	bottom:60px;
	left:0;
	overflow:hidden;
	text-align:center;
}
.roomInfo:before{
	content:'';
  	width:0;
 	height:100%;
  	display:inline-block;
  	position:relative;
 	vertical-align:middle;
}
.roomInfo div{
	padding:20px;	
	font-size:20px;
	display:inline-block;
	vertical-align:middle;
	margin-top:60px;
	color:#000;
	font-weight:bold;
}
.roomInfo p{
	margin-top:20px;
	font-size:14px;	
	font-weight:normal;
	color:#8a7f7d;
}
.list a:hover .roomName{
	background:#7accc7;
	color:#FFF;
}
.list a:hover .roomInfo{
	height:100%;
	
	webkit-transition: all 300ms linear;
	-o-transition: all 300ms linear;
	-ms-transition: all 300ms linear;
	-moz-transition: all 300ms linear;
	transition: all 300ms linear;
}

nav{
	text-align:center;
	margin-bottom:40px;
}
.selectBtn{
	position:relative;
	display:inline-block;
	overflow:auto;
	z-index:6;
}
.selectBtn li{
	float:left;
	margin:0 20px;
	font-size:16px;
	background:#FFF;
	border-bottom:#7accc7 solid 2px;
	padding:10px;
	border-radius:50%;
}
.selectBtn li a{color:#000;}
.selectBtn li:hover,.selectBtn li.on{
	background:#7accc7;	
	border-bottom:#8a7f7d solid 2px;
}
.selectBtn li:hover a,.selectBtn li.on a{
	color:#FFF;
}

.fotorama{
	position:relative;
	z-index:6;
}
.fotorama__nav-wrap{
	border-top:#7accc7 solid 1px;
	border-bottom:#7accc7 solid 1px;
	padding:1px 0;
	margin:10px 0;
}
.fotorama__thumb-border{
	border:#8a7f7d solid 2px;
	background:rgba(255,255,255,0.5);
}
.information h3{
	font-size:18px;
	color: #7accc7;
	margin:20px 0;
	text-align:center;
}
.information p{
	margin-bottom:20px;
	text-align:center;
}
.information {
    text-align: center;
}
.instrunment{
	height:100px;
	margin:30px auto;
	display: inline-block;
}
.back{
	position:relative;
	z-index:6;
	text-align:center;
	margin-top:60px;
}
.back a{
	border-top:#7accc7 solid 1px;
	border-radius:50%;
	padding:10px;
	font-size:14px;
	color: #7accc7;
}
.back a:hover{
	color:#000;
	border-top:#000 solid 1px;
}

@media screen and (max-width:1000px) {
.list li{
	width:33.333%;
}
}
@media screen and (max-width:680px) {
.list li{
	width:100%;
}
.selectBtn li{
	margin:0 5px;
}
}