@charset "utf-8";
/* -----------------------------------------------
	* 멤버란 디자인 스타일 정의
--------------------------------------------------
	- 최초 작성일 : 2021.08.15
	- 최초 작성자 : 아보카도
	- 최종 수정일 :
	- 최종 수정자 :
--------------------------------------------------*/


@font-face {
    font-family: 'Chosunilbo_myungjo';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_one@1.0/Chosunilbo_myungjo.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

#body2 {padding:0}
#body2 .fix-layout {max-width: 100%;}

#character_profile {    margin-top: -600px;}

.header_img .church, .snake {z-index: 3 !important;}



/****************************************************
	신청자 목록 레이아웃
****************************************************/

.ready-member-list {display:block; position:relative; overflow:hidden;}
.ready-member-list li {float:left; width:50%; margin-bottom:8px;}
.ready-member-list li.empty {width:100%; line-height:300px; text-align:center;}
.ready-member-list li .item {position:relative; padding:10px; margin:0 5px; }
.ready-member-list li .ui-thumb {display:block; position:absolute; top:10px; left:10px; width:80px; height:80px; overflow:hidden; box-sizing:border-box;}
.ready-member-list li .ui-thumb span {display:block; position:absolute; top:0; bottom:0; left:0; right:0; text-align:center; font-size:11px; line-height:96px; opacity:1;}
.ready-member-list li .ui-thumb span.ing {}
.ready-member-list li .ui-thumb span.com {display:none;}
.ready-member-list li .ui-thumb a:hover span {opacity:0;}

.ready-member-list li .ui-profile {display:block; position:relative; margin-left:95px; min-height:85px;}
.ready-member-list li .ui-profile i {display:block; position:absolute; top:0; left:0; width:18px;}
.ready-member-list li .ui-profile .name {padding:5px 0;}
.ready-member-list li .ui-profile em {display:block; font-style:normal; font-size:11px;}
.ready-member-list li .ui-profile strong {font-size:14px;}
.ready-member-list li .ui-profile span {display:block; padding:3px 0; font-size:11px;}
.ready-member-list li .ui-profile span.owner {text-align:right; margin-top:5px; padding-top:5px;}

/* 반응형 */
@media all and (max-width:1024px) {
	#submenu li.menu-first {display:block; text-align:center;}
}
@media all and (max-width:640px) {
	.ready-member-list li {width:100%;}
}


/****************************************************
	멤버 목록 레이아웃
****************************************************/

.memberWrap {display:table; width:100%;}
.memberWrap > .member-box {display:table-cell; text-align:center; vertical-align:top;}
.member-list {text-align:center;}
.member-list li {display:inline-block; vertical-align:top; margin:5px;}
.member-list .item {display:block; position:relative; padding:0;}
.member-list .ui-profile {position:absolute; left:0; right:0; bottom:0; padding:5px; text-align:center;}

@media all and (max-width:800px) {
	.memberWrap,
	.memberWrap > .member-box {display:block;}
}


/****************************************************
	멤버 프로필 레이아웃
****************************************************/

#character_profile .visual-area {position:relative;}
#character_profile #character_body {position:relative; z-index:0;min-height:1100px;    bottom: -650px; display: inline-block; margin-left:200px;}
#character_profile #character_body img { display:inline-block; margin:0 auto; cursor: pointer; max-width:430px; position: fixed;}
#character_profile #character_body img:hover {filter: drop-shadow(0 0 33px #fff);}
#character_profile #character_head {position:absolute; left:0; bottom:0; right:0; z-index:1;}

.left_body img {left:20%;}
.right_body img {right:20%;}

/****************************************************
	인벤토리 스타일
****************************************************/

.inventory-list {display:block; position:relative; overflow:hidden;}
.inventory-list li {display:block; float:left; padding:5px;}
.inventory-list a {display:block; position:relative; width:40px; height:40px; overflow:hidden;}
.inventory-list a img {display:block; position:relative; margin:0 auto;}
.inventory-list a i {display:block; position:absolute; right:1px; bottom:1px; background:rgba(0,0,0,.5); min-width:15px; height:15px; line-height:15px; color:#fff; font-size:10px; font-weight:800; padding:0 1px; text-align:center; z-index:2; box-sizing:border-box; border:none !important;}
.inventory-list a i.present:before {content:"\e99f"; font-family:'icon'; font-weight:400;} 

.title-list {display:block; position:relative; padding:20px 0;}
.title-list p {padding:5px;}
.title-list .item {display:inline-block; min-width:25%; padding: 5px; box-sizing:border-box; text-align:left; vertical-align:middle;}


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

.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; }
}

.gradient { width:100%; color: #5a524a; background:linear-gradient(to top,#fff 80%, transparent); position: relative; z-index: 2;bottom:-85px; padding:100px 0;}

.visual-area { width:26%; display:inline-block; margin:0 205px;}
.visual-area .character_name,.eng_name {display: block;}
.character_name,.title {}
.visual-area .title_cha {display: block; font-weight: 600;font-family: 'Chosunilbo_myungjo'; letter-spacing: 9px;margin-bottom: 15px; }
.visual-area .title {font-size: 24px; line-height: 26px; font-weight: 600;}
.visual-area .title:before {content: "빇 "; font-family: 'YUniverse-B'; font-size: 30px;}
.visual-area .character_name {font-size: 45px; line-height: 70px;text-transform: uppercase; font-family: "Felix Titling2";}
.visual-area .profile_box {text-align: left;}
.visual-area .profile_box p {margin:20px 0 40px 10px;font-weight: 500;}
.visual-area .detail { background-color:#5a524a; border-radius: 2em; color: #fff; padding:3px 40px; letter-spacing: 3px; text-align: center; margin:20px 0;}
.visual-area .detail.birth {letter-spacing: 0px; margin-right:15px;}
.visual-area .eng_name {font-family: 'Chosunilbo_myungjo'; letter-spacing: 12px; font-size: 18px; line-height: 20px; margin-bottom:50px;}

.profile_wrap {filter: drop-shadow(0 0 5px #fff);}

.visual-area.left .profile_wrap {position:relative; bottom:50px;}
.visual-area.left .profile_bottom {text-align: right; margin-top:20px;}

.visual-area.right .profile_wrap {position:relative; bottom:50px;}
.visual-area.right .profile_bottom {text-align: left; margin-top:20px;}

.au_wrap { position:absolute; margin:auto; display: inline-block;vertical-align: top; bottom:50px; z-index: 3;  margin: 0 auto; margin-left:40px}
.fair_detail {width:280px;}

#character_au {
	position: relative;
	display: inline-block;
	width:100px;
	bottom:15px;
	margin:auto;
}

#character_au li {margin:5px 5.5px; background-color: #5a524a; color: #ffffff; border-radius: 2em; border: 1px solid #fff; display: inline-block; width:80px; padding:2px 10px; box-sizing: border-box;}
#character_au a {color: #fff;}

@media all and (max-width: 1000px) {
	.visual-area {width:90%; display:block; margin:auto;}
	.visual-area.left .profile_wrap {position: relative; left:0px; bottom:0px;margin:auto;}
	.visual-area.right .profile_wrap {position: relative; right:0px; bottom:0px;}
	.profile_wrap .theme-box {overflow-y: visible;width:100%;height:auto; padding:15px; margin:20px 0}
	.visual-area.left .profile_bottom {text-align: center; margin-top:20px; margin-bottom: 50px;}
	.visual-area.right .profile_bottom {text-align: center; margin-top:20px;}
	#character_au {
		position: relative;
		margin: 0 auto;
		left: 0;
		right: 0;
		top:50px;
		margin-bottom:150px;
		bottom: 0px;
		width:250px;
	}
	#character_profile #character_body img {display:block;}
	.visual-area { width:90%; display:block; margin:0;}
	#character_profile #character_body img {display:block; margin:0 auto; cursor: pointer;}
	#body2 {padding:0}
	#body2 .fix-layout {max-width: 100%;}

#character_profile {    margin-top: 0px;}
#character_profile #character_body {position:relative; z-index:0; bottom: 0px; display: block; margin-left:0px;}

.header_img .church, .snake {z-index: 3 !important;}
.au_wrap { position:relative; margin:auto; display: block;bottom:50px;margin-left:0px}
#character_au {
	position: relative;
	display: inline-block;
	width:300px;
	top:0px;
	margin:auto;
}

.detail {display: block;}
.gradient { width:100%; color: #5a524a; background:transparent; position: relative; z-index: 2;bottom:0px; padding:0;}

#character_profile #character_body img { display:inline-block; margin:0 auto; cursor: pointer; max-width:430px; position: relative;}

.left_body img {left:auto}
.right_body img {right:auto;}

}