.chr-top img{
	vertical-align: top;
}
.chr-wrap{
	width: 350px;
	margin: 0 auto;
}
.chr-voice{
	background-color: rgba(0,0,0,0.6);
}
.voice-box{
	width: 90%;
	display: flex;
	display: -webkit-flex;
	-webkit-justify-content: space-between;
	justify-content: space-between;
	margin: 0 auto;
	padding-bottom: 10px;
}
.voice-box2{
	width: 60%;
	display: flex;
	display: -webkit-flex;
	-webkit-justify-content: space-between;
	justify-content: space-between;
	margin: 0 0 0 10px;
	padding-bottom: 10px;
}
.voice-mid{
	width: 98px;
}
.voice{
	width: 98px;
}


a.voice.playing{
	-ms-filter:"alpha( opacity=50 )";
	opacity:0.5;
}
.overlay{
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background-color:rgba(0,0,0,0.8);
	z-index:101;
}
#character_area,
#character_area2{
	background:url("../images/back_img.jpg") left top;
}
#character_detail{
	position:fixed;
	top:50%;
	left:50%;
	width:100%;
	height:95%;
	-webkit-transform:translate(-50%,-50%);
	transform:translate(-50%,-50%);
	z-index:102;
	overflow: auto;
}
#character_detail .details{
	position:absolute;
	top:45%;
	background-color:rgba(0,0,0,0.5);
}
#character_detail .close_button,
#character_detail .class_icon{
	position:absolute;
	top:-10px;
	right:5px;
	width:25%;
	z-index:103;
	cursor: pointer;
}
#character_detail .class_icon{
	top:-20px;
	left:-10px;
}
#character_detail .close_button img,
#character_detail .class_icon img{
	width:100%;
}