/* ----------------
  main
----------------  */
#main {
	width: calc(100% - 310px);
	margin: 0 0 50px 0;
}

#genre_button {
	width: 90%;
	margin: 100px 0 40px 5%;
	padding: 0 0 30px 0;
	border-bottom: 3px solid #ddd;
	border-radius: 3px;
	text-align: center;
}
.genre_button {
	display: inline-block;
	font: 18px bold;
	color: #eee;
	text-align: center;
	padding: 5px 30px;
	margin: 5px 3px;
	background: #133;
	border-radius: 5px;
}

#live_view_button {
	position: relative;
	width: 70%;
	background: #133;
	padding: 10px 20px;
	margin: 5px 15%;
	text-align: center;
	border-radius: 30px;
}
#live_view_button h3 {
	position: absolute;
	top:10px;
	left: 20px;
	margin: 0;
	font-size: 20px;
	color: #eee;
}
#live_view_button span {
	font-size: 20px;
	color: #eee;
}
#live_view_button select {
	font-size: 16px;
	margin: 0;
	border-radius: 5px;
	color: #111;
}
#pop_room_select {
	position: absolute;
	top:5px;
	right: 120px;
	margin: 0;
	padding: 5px 20px;
	background: #244;
	border-radius: 10px;
	font-size: 20px;
	color: #eee;
}
#pop_room_button {
	position: absolute;
	top:5px;
	right: 20px;
	margin: 0;
	padding: 5px 20px;
	background: #244;
	border-radius: 10px;
	font-size: 20px;
	color: #eee;
}


#onlive_box {
	width: 90%;
	margin: 10px 0 0 5%;
	background: #fff;
	text-align: center;

}
.room_box {
 position: relative;
 width: 300px;
 height: 270px;
 margin: 10px;
 background: #133;
 border-radius: 5px;
 text-align: center;
}
.room_name_telop_box {
	width: 100%;
	height: 60px;
}
.room_check {
	position: absolute;
	top: 0px;
	left: 0px;
}
.room_name {
	width: 86%;
	margin: 5px 7%;
	font:16px;
	font-weight: bold;
	color: #eee;
	overflow: hidden;
	white-space: nowrap;
}
.telop {
	width: 80%;
	margin: 5px 10%;
	font:12px bold;
	color: #eee;
	overflow: hidden;
	white-space: nowrap;
}
.room_img_box {
	width: 100%;
}
.room_img {
	width: 100%;
}
.live_img {
	width: 100%;
	display: none;
}
.live_room_data_box {
	width: 96%;
	margin: 5px 2%
}
.live_room_data_box i{
 font-size: 0.8em;
 color: #eee;
 margin: 0 3px;
}