@charset "utf-8";
/* CSS Document */
	#RoomForm{
		width: 100%;
		padding: 0.5%;		
	}
	.RoomItem{
		width: calc(25% - 3px);
		height: 100%;
		border: 1px solid #fff;
		display: inline-block;	
		overflow: hidden;
		transition: all .5s;
		padding: 5px;
		box-sizing: border-box;
	}
	.RoomItem:hover{
		border-radius: 50px;
	}
	.RoomItem:hover .More{
		font-size: 20px;
		opacity: 1;
		background: rgba(255,225,241,0.7);
		border-radius: 50px;
	}
	.RoomItem:hover .RoomImg{
		transform: scale(1.4);
	}
	.RoomItem:hover .RoomImg img{		
		transform: rotate(10deg);
	}
	.RoomTitle:hover{
		font-size: 80px;
		opacity: 0;
	}

	.RoomTitle, .More{
		width: 100%;
		height: 100%;
		position:absolute;
		z-index: 100;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 20px;
		font-weight: bolder;
		color: #FFF;
		text-shadow: 2px 2px 3px #000;
		overflow: hidden;
		cursor: pointer;
		transition: all .5s;
		
	}
	.More{
		opacity: 0;
		font-size: 80px;
		
	}
	.RoomImg{
		width: 100%;
		height: 80%;
		overflow: hidden;
		transition: all 1s;
	}
	.RoomImg img{
		width: 100%;
		height: 70%;
		transition: all 1s;
	}
@media only screen and (max-width: 768px){
	#RoomForm{
		width: 100%;
		padding: 20px;
		box-sizing: border-box;
	}
	.RoomItem{
		width: 100%;
		padding: 10px;
	}
}