.member-detail-btn{
	width: 120px;
	height: 40px;
	line-height: 40px;
	font-size: 16px;
    letter-spacing: 1px;
	text-align: center;
	display: inline-block;
	vertical-align: middle;
	background-color: #313131;
    border: 1px solid #d1d1d1;
	color: #fff;
	cursor: pointer;
    transition: all .3s linear;
}
#member-history .member-detail-info{
	padding: 20px 25px;
}
#member-history .member-detail-title{
    width: calc(100% - 250px);
    vertical-align: middle;
}
#member-history .member-detail-data{
    vertical-align: middle;
}
#member-history .member-detail-separate{
    vertical-align: middle;
}
.member-detail-pay-info{
	display: block;
    border-top: 1px solid #d1d1d1;
	background-color: #fff;
	box-sizing: border-box;
	text-align: center;
}
.member-detail-pay-data{
	font-size: 12px;
	display: inline-block;
	vertical-align: middle;
}
.member-detail-pay-text{
	font-size: 12px;
	display: inline-block;
	vertical-align: middle;
}


/*<-----------hover----------->*/
.member-detail-btn:hover{
	background-color: #d3202f;
	color: #fff;
}

@media only screen and (max-width: 750px){
	.member-detail-btn{
		width: 100px;
		font-size: 14px;
		height: 30px;
		line-height: 30px;
	}
	#member-history .member-detail-title{
	    width: calc(100% - 230px);
	}
	.member-right-title{
		font-size: 16px;
	}
}
@media only screen and (max-width: 550px){
	.member-detail-btn{
		width: 80px;
		font-size: 12px;
		height: 26px;
		line-height: 26px;
	}
	#member-history .member-detail-title{
	    width: calc(100% - 189px);
	}
	#member-history .member-detail-info{
		padding: 15px;
	}
	.member-right-title{
		font-size: 14px;
		height: 15px;
	}
}
@media only screen and (max-width: 400px){
	#member-history .member-detail-info{
		padding: 5px;
	}
	#member-history .member-detail-title{
	    width: calc(100% - 169px);
	}
}