@charset "utf-8";

/** Quick Navigation **/
#character_profile	{ 
	position: relative;
	padding: 30px 0 100px;
}

#character_profile #profile_menu	{
	display: block;
	position: absolute;
	top: 30px;
	right: 10px;
	z-index: 10;
}
#character_profile #profile_menu a	{
	display: block;
	position:relative;
	margin-bottom: 5px;
}


/** 수정 삭제 버튼 **/
#character_control{position:absolute;z-index:10;width:100%;}

/******************************************
	프로필 이미지 영역 스타일
*******************************************/

.visual-area	{ position: relative; }
#character_body	{ text-align: center; }

/** 흉상 레이아웃 : Body 이미지가 출력되지 않을 시 */
#character_head	{
	display: block;
	position: relative;
	text-align: center;
}
#character_head .toggle-head-pannel	{ display: none; }

/** 흉상 레이아웃 : Body 이미지가 출력될 시 */

.visual-area #character_head	{
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 5;
}
.visual-area #character_head .contents				{ display: none; }
.visual-area #character_head.open .contents			{ display: block; }
.visual-area #character_head .toggle-head-pannel	{ display: block; }
.visual-area #character_head .toggle-head-pannel .on	{ display: none; }
.visual-area #character_head.open .toggle-head-pannel .on	{ display: inline; }
.visual-area #character_head.open .toggle-head-pannel .off	{ display: none; }


#character_profile .inventory-list	{
	
}
#character_profile .inventory-list .no-data	{
	line-height: 150px;
	text-align: center;
}
#character_profile .inventory-list li	{ display: inline-block; max-width: 18.5%; }
#character_profile .inventory-list li a	{
	display: block;
	position: relative;
	overflow: hidden;
}
#character_profile .inventory-list li i	{
	display: block;
	position: absolute;
	bottom: 0;
	right: 0;
	padding:5px 10px;
	font-size: 11px;
}





/******************************************
	관계란 스타일
*******************************************/

.relation-member-list				{ position: relative; }
.relation-member-list > li			{ position:relative; padding-left: 90px; min-height:120px; margin-bottom: 20px; }
.relation-member-list .ui-thumb		{ position: absolute; top: 0; left: 0; width: 80px; overflow: hidden; }
.relation-member-list .rm-name		{ font-size: 14px; font-weight: 800; padding-right: 150px; padding-left: 10px; }

.relation-member-list .rm-like-style				{ position: absolute; right: 0; top: 0;width: 80px; }
.relation-member-list .rm-like-style i				{ display: block; width: 13px; height: 15px; position: relative; float: left; margin: 0 1px;}
.relation-member-list .rm-like-style i:before		{ content: "\e9da"; font-family: 'icon'; font-style: normal; display: block; position: absolute; top: 0; left: 0; right: 0; bottom: 0; font-family: 'icon'; }
.relation-member-list .memo			{ font-family: 'Dotum'; padding:10px; margin: 5px 0; line-height: 1.2em; min-height: 30px; }

.relation-member-list ol			{ display: block; position: relative; clear: both; text-align: right;padding-right: 10px; }
.relation-member-list ol li					{ display: inline-block; }
.relation-member-list ol li a.btn-log		{ display: block; position: relative; width: 20px; height: 20px; margin: 0 auto; }
.relation-member-list ol li a.btn-log:before	{ content: "\e925"; font-family: 'icon'; font-size: 15px; font-style: normal; display: block; position: absolute; top: 0; left: 0; right: 0; bottom: 0; font-family: 'icon'; }



.relation-member-list .modify-box						{ display: none; }
.relation-member-list .state-modify						{ }
.relation-member-list .state-modify .rm-like-style,
.relation-member-list .state-modify .memo .ori-content,
.relation-member-list .state-modify ol					{ display: none; }
.relation-member-list .state-modify .modify-box			{ display: block; }


@media all and (max-width: 500px) {
	.relation-member-list .rm-name			{ padding-right: 0; font-size: 13px; }
	.relation-member-list .rm-like-style	{ position: relative; width: auto;overflow: hidden; }
	
	.relation-member-list > li		{ padding-left:0px; }
	.relation-member-list .ui-thumb	{ width: 50px; }
	.relation-member-list .info		{ min-height: 62px; margin-left: 60px; }
}




/******************************************
	옷장 스타일
*******************************************/


.closet-list									{  }
.closet-list fieldset						{ position: relative; margin-top: 10px; padding-left:120px; padding-right: 80px; }
.closet-list fieldset input#cl_sibject		{ position: absolute;top: 0; left: 0; width: 115px; }
.closet-list fieldset input[type="submit"]	{ position: absolute;top: 0; right: 0; line-height: 1.0em; height: 28px; width: 75px; }

.closet-list ul							{ text-align: left; }
.closet-list ul li						{ position: relative; padding: 10px 80px 10px 10px; border-bottom: 1px solid rgba(255, 255, 255,0.1); }
.closet-list ul .ui-btn-box				{ position: absolute; top: 5px; right: 0px; bottom:5px; width:80px; }
.closet-list ul .ui-btn-box a			{ display: block; position: relative; height: 100%; width: 30px; float: left; margin-left: 5px; overflow: hidden;text-indent:-999px; border-radius: 2px; }
.closet-list ul .ui-btn-box a:before	{ display: block; position: absolute; font-family: 'icon'; font-size: 15px; width:20px; height:20px; left: 50%; top: 50%; margin-top: -10px; margin-left: -10px; text-indent:0; text-align: center; line-height: 20px; }


.closet-list ul .ui-btn-box a.btn-use:before			{ content: "\e9c3"; font-size: 20px; line-height: 23px; }
.closet-list ul .ui-btn-box a.btn-del:before			{ content: "\e9ac"; }

.closet-list ul .selected .ui-btn-box  	{ display: none; }
.closet-list ul .selected:after			{ content: "사용중"; display:block; position: absolute; width: 70px; top: 10px; right: 10px; text-align: center; }