﻿html, body {
	background:#eeeeee;	
}

.topic_bar {
	background:#74cee4 url(../../hfc/member/images/hfc_member/corner_trangle.png) no-repeat left top;
}

#girlbox {
	float:left;
	width:23.43%;
	padding-left:7px;
	padding-right:7px;
	max-width:240px;
	text-align:center;
	margin:0px;
	overflow:hidden;
	max-height:206px;
}

#girlbox img {
	max-width:100%;
}

#menumemberbox {	
	float:left;
	width:76.56%;
}

#topicmember {
	height:51px;	
}

.topic_bg_blue {
	float:left;
	width:270px;
	height:51px;
	font-family: superstoreregular;
	font-size: 2em;
	font-weight: bold;
	color: #ffffff;
	padding-top: 7px;
	background:#f0f0f0 url(../../hfc/member/images/hfc_member/topic_blue.png) no-repeat right top;
}

.topicbar_2 {
    margin-left: 270px;
    height: 51px;
}

#menumember {
	padding-right:10px;
	padding-top:10px;	
}

.menu_membox {
	float:left;
	width:20%;
	padding-left:5px;
	max-width:135px;
}

.menu_membox img {
	border:0px;
	max-width:100%;
}


@media only screen and (max-width:880px) {
	
	#girlbox {
		max-height:180px;
	}
		
}


@media only screen and (max-width:692px) {
	
	#girlbox {
		display:none;
	}
	
	#menumemberbox {	
		width:100%;
		padding-left:10px;		
	}
	
	.topic_bar {
		background:#74cee4;
	}
	
	#menumember {
		padding-right:10px;
	}
		
}

@media only screen and (max-width:374px) {
	
	.topic_bg_blue {
		width:240px;
	}
	
	.topicbar_2 {
		margin-left: 240px;
	}
		
	.menu_membox {
		width:33.33%;
	}
		
	.menu_membox:nth-child(4) {
		clear:left;
	}
		
}


#boxcenter {
	margin-left:auto;
	margin-right:auto;
	max-width:780px;	
	padding-bottom:70px;
}