@charset "utf-8";
/* -----------------------------------------------
	* 멤버란 디자인 스타일 정의
--------------------------------------------------
	- 최초 작성일 : 2021.08.15
	- 최초 작성자 : 아보카도
	- 최종 수정일 :
	- 최종 수정자 :
--------------------------------------------------*/
@import url('https://fonts.googleapis.com/css2?family=Lavishly+Yours&display=swap');

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

.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%;}
.memberWrap2 {display: flex
;
    width: 100%;
    justify-content: space-between;}
.memberWrap > .member-box {display:block; text-align:left; vertical-align:top;}
.member-list {text-align:left;}
.title{width:18%;}
.member-list .ui-profile {position:absolute; left:0; right:0; bottom:0; padding:5px; text-align:center;}
#character_head_list{width:150px; position:relative; text-align: center;}
#character_head_list img{width:150px;}
.head_frame_list{	width:100%; z-index: 2; position: relative; filter:drop-shadow(0px 0px 5px black);}
.head_img_list{width:140px !important; margin-top:-280px;}
.Radegund{
	color: #960012;
}
.Teresa{
	color:#192f85;
}
.side_title{width:100%; text-align:center;font-family:"Pirata One", cursive; font-size:30pt;filter:drop-shadow(0px 0px 3px #DAA520);}
#box_head_list{width:175px; position:relative; text-align: center;}
#box_head_list:hover .box_img_list{filter:brightness(125%) drop-shadow(0px 0px 5px white);}
#box_head_list:hover .box_info_list{display:block;}
#box_img_list{ position:relative; display: inline-block;}
.member-box2 {
	margin-top:20px;
	display: flex;
    text-align: left;
    vertical-align: top;
    width: 49%;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
	align-content: flex-start;
    flex-wrap: wrap;}
.member-list2{
	background:rgba(0,0,0,0.7);
			display: flex;
			border: 30px solid transparent;
			border-image: url(/img/border_1.png) 100 100 repeat;
text-align: left;
flex-direction: row;
align-content: center;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
		}
.box_cover_list{width:175px !important; }
.box_info_list{
	display:none; bottom:5%; width:100%; text-align: center; z-index:3; position:absolute; filter:drop-shadow(0px 0px 10px black); color: #eee; 	font-size:10pt; line-height: 1.1em;border-radius:20px; background:#333; padding:3px 5px;
}

.img_info_list{
	display:none; bottom:15%; width:100%; text-align: center; z-index:3; position:absolute; filter:drop-shadow(0px 0px 10px black); color: white; 	font-size:10pt; line-height: 1.1em;
}
#character_head_list:hover .img_info_list{display:block;}
#character_head_list:hover .head_frame_list{filter:brightness(60%) drop-shadow(0px 0px 5px black);}
#character_head_list:hover .head_img_list{filter:brightness(125%) drop-shadow(0px 0px 5px white);}
#ch_img_list{width:150px; position:relative; display: inline-block;}
#ch_info_list{width:calc(100% - 370px); display:flex; flex-direction: column; height:100%;
	position:relative; text-align: center; float:left;margin-left:15px;
padding-top:20px;}
@media all and (max-width:800px) {
	.memberWrap,
	.memberWrap > .member-box {display:block; width:100%;}
	.member-list {text-align:center;}
	#ch_img_list{width:100px; position:relative; display: inline-block; margin-right:20px;}
	#character_head_list{width:100px; position:relative; text-align: center; display:inline-block;}
	.head_frame_list{	width:100%; z-index: 2; position: relative; filter:drop-shadow(0px 0px 5px black);}
	.head_img_list{width:90px !important; margin-top:-200px;}
	.img_info_list{
		display:none; bottom:20%; width:100%; text-align: center; z-index:3; position:absolute; filter:drop-shadow(0px 0px 10px black); color: white; 	font-size:10pt;
	}
}


/****************************************************
	멤버 프로필 레이아웃
****************************************************/
#white_button{
	display: block;
position: fixed;
right: 5px;
bottom: 200px;
z-index:2;
}
#white_button button{
	background: #333;
	color: #dab272;
	border: none;
	padding: 5px 10px;
	border-radius: 20px;
	font-size: 11pt;
	font-family: 'RIDIBatang', 'GyeonggiBatang';
}
#white_button button:hover{
	background: #f7f4ed;
	color: #333;
}
#character_profile{width:100%; height:auto; text-align: center;  margin-top:150px;}
#character_profile #character_body2 img {display:block; margin:0 auto;}
#hanmadi{
	margin-top:30px; margin-bottom:20px;
	border: 60px solid transparent; background-image:url(/css/images/hanmadi_back.png);background-size :900px;
	background-repeat:no-repeat; background-position: -60px;
	border-image: url(/css/images/profile_frame.png) 100 100 repeat;
	font-size:18pt;  word-break: keep-all;
}
#top_area{display:block; overflow:hidden; height:574px;}
#character_head{width:350px; position:relative; text-align: center;}
#character_head img{width:350px;}
.head_frame{	width:100%; z-index: 3; position: relative; filter:drop-shadow(0px 0px 5px black);}
.glass{width:350px; margin-top:-600px; z-index: 0; position: relative; }

.head_img{width:300px !important; z-index:1; margin-top:-570px;  position: relative; }
#character_head:hover .head_frame{filter:brightness(60%) drop-shadow(0px 0px 5px black);}
#character_head:hover .head_img{filter:brightness(60%);}
#character_head:hover .glass{filter:brightness(200%) saturate(150%) blur(3px);}
.wood{
background-color: #140e05;
z-index: 2;
position: relative;
background-image: url("https://www.transparenttextures.com/patterns/wood-pattern.png");
height:10px;margin-top:-570px;
/* This is mostly intended for prototyping; please download the pattern and re-host for production environments. Thank you! */}
.img_info{
	display:none; top:7%; width:100%; text-align: center; z-index:1; position:absolute; filter:drop-shadow(0px 0px 10px black); color: white; 	font-size:16pt;
}
#character_head:hover .img_info{display:block;}
#ch_img{width:350px; position:relative; float:left;}
#ch_info{width:calc(100% - 370px); display:flex; flex-direction: column; height:100%;
	position:relative; text-align: center; float:left;margin-left:15px;
padding-top:20px;}
#ch_name{font-size:42pt; font-family:'국립박물관문화재단클래식B'; word-break: keep-all; line-height: 1em;
text-align:left;z-index:1; position:relative; filter:drop-shadow(0px 0px 15px black);}
#eName{font-family: 'Pirata One';    font-size: 30pt; z-index:0; position:relative;
    margin-top: 20px;    text-align: right; color:rgba(255,255,255,0.6);}
#ch_cmkg{font-family: "Lavishly Yours", cursive; font-size:30pt;
text-align:left; padding-left:10px;margin-top:20px;}
#ch_nation{
	font-family: 'Diphylleia-Regular';    font-size: 30pt;
	margin-top: 20px;    text-align: right;
}
#magic{	font-family: 'Diphylleia-Regular'; font-size:30pt; margin-top:40px; text-align:left;}
#magic_content{font-size:16pt;margin-top:20px;padding:10px;}
#magic_content i{font-size:12pt;margin-top:20px;padding:10px; opacity:0.8;}
#situation{font-size:12pt; background:#111111; line-height: 2.2em; word-break: keep-all; padding:15px; text-align:justify; margin-top:20px; overflow-y: auto; flex-grow:1; flex-shrink: 1;}
#situation #text{filter:blur(3px);}
#situation:hover #text{filter:none;}

#character_body1,#character_body2	{
  display: block;	position: fixed;
	top:0;	right:0;
	z-index:2000;	width:100vw;	height:100vh;
	background:rgba(0, 0, 0, 0.5);
	text-align: center;
  padding:10px;	overflow-y: auto;
}
#character_body1 img,#character_body2 img{width:900px;}
.open{display:block !important;}
.close{display: none !important;}
#character_content{
	width:100%;
	margin-top:-50px;
}
h3{
  font-family:'Diphylleia-Regular';
  font-size:40pt;  width:100%;
  text-align: left;	line-height: 2.2em;
  }
.eng{ font-family:'Pirata One';}
.ch_box{
  box-sizing: border-box;
  background: #111111;
  border: 40px solid transparent;
  border-image: url(/img/border_1.png) 100 100 repeat;
	line-height: 2.5em;
	font-size: 12pt;
	word-break: keep-all !important;
	text-align: justify;
	font-family: 'RIDIBatang','GyeonggiBatang';
	text-indent:2em;
	filter:drop-shadow(0px 0px 10px black);
}
.hanja {font-family:'GyeonggiBatang';}

.ch_box b{	color:#dab272;}
.ch_box strong{	color:#dab272;}
.ch_box i{opacity:0.7;}
.ch_box p{	word-break: keep-all !important;}

.ch_box ul{padding-inline-start: 0.8em;	}
.ch_box li{display: list-item;list-style-type:inherit; margin-left:1em; text-indent:0em;}
.ch_box ol{padding-inline-start: 0.8em;	list-style-type:lower-roman;}

.ch_box ul li::before {
	content:'☘︎';	color:#dab272;
	margin-left:-1.2em; padding-right:5px; }
.ch_box ol li ul li::before {
	content:'☘︎';	color:#dab272;
	margin-left:-1.9em; padding-right:5px; }
.ch_box ul ul li::before {
  	content:'✔';	color:#dab272;
  	margin-left:-1.2em; padding-right:5px; }
.ch_box ul li ul li::before {
	content:'✔';	color:#dab272;
	margin-left:-1.2em; padding-right:5px; }

.ch_box ul li ul li{
	font-size:0.9em;
	line-height: 2em; }

.ch_box dl{}
.ch_box dl dt{font-weight:bold; font-family: 'Diphylleia-Regular'; color:#dab272; font-size:16pt;}
.ch_box dl dt::before {
	content:'✦';	color:#dab272;
	margin-left:-1.2em; padding-right:5px; padding-left:1em;
}
.ch_box dl dd{font-size: 1em; margin-left:3em;}
.ch_box td ul li{
	 padding-inline-start: 1em;
	 line-height: 2em;
}
.pyo th,.pyo td {
      padding: 8px; /* 셀 내부 여백 */
      text-align: left; /* 텍스트 왼쪽 정렬 */
      border-bottom: 1px solid #dab272; /* 각 셀의 아래에 검정색 선 추가 */
    }
.off{
	display:none;
}
#buttonbox{
margin-top:30px;
}
#buttonbox button{
	background: #333;
	color:#dab272;
	border: none;
	padding:5px 10px;
	border-radius: 20px;
	font-size:14pt;
}
#buttonbox button:hover{
	background: #000;
	color:#dab272;
	border: none;
	padding:5px 10px;
	border-radius: 20px;
	font-size:14pt;
}

/*성장후 */

/****************************************************
	멤버 프로필 레이아웃
****************************************************/
#character_profile2{width:100%; height:auto; text-align: center;  margin-top:150px;}
#character_profile2 #character_body2 img {display:block; margin:0 auto;}
#hanmadi2{
	margin-top:50px; margin-bottom:30px;
	font-size:18pt;  word-break: keep-all;
}
#top_area2{display:block; overflow:hidden;}
.head_frame2{
	width: 150px;
	    z-index: 3;
	    height: 267px;
	    margin-top: -7px;
	    margin-left: -6px;
	    position: absolute;
	    filter: drop-shadow(0px 0px 5px black);
	    border: 60px solid transparent;
	    border-image: url(/css/images/profile_frame.png) 100 100 repeat;
}
.bordercon{
	width:260px;
	margin-left: calc(50% - 130px);
}
.head_img2{width: 250px !important;
    position: relative;
    background: #f7f4ed;
    padding: 5px;

	}
#top_area2 a:hover .head_img2{filter:brightness(60%);}
#top_area2 a:hover .img_info2{display:block}
.img_info2{
	display: none;
	margin-top:320px;
	right: 0;
	width: 100%;
	text-align: center;
	z-index: 2;
	position: absolute;
	filter: drop-shadow(0px 0px 10px black);
	color: white;
	font-size: 16pt;
}

#ch_info2{width:100%; display:block;height:100%;
	position:relative; text-align: center; margin-top:20px;
padding-top:20px;}
#ch_name2{font-size: 42pt;
    font-family: '국립박물관문화재단클래식B';
    word-break: keep-all;
    line-height: 1em;
    text-align: center;
    z-index: 1;
    position: relative;
    filter: drop-shadow(0px 0px 15px black);}
#eName2{  font-family: "Lavishly Yours", serif;
    font-size: 30pt;
    z-index: 0;
    position: relative;
    margin-top: -10px;
    text-align: center;}
#ch_cmkg2{font-family: "Lavishly Yours", cursive; font-size:30pt;
text-align:left; padding-left:10px;margin-top:20px;}
#ch_nation2{
	font-family: 'Diphylleia-Regular';
	    font-size: 15pt;
	    margin-top: 20px;
	    text-align: center;
}
.side{
	font-size: 24pt;
	    font-family: 'Pirata One';
	    border-radius: 20px;
	    height: auto;
	    padding: 10px 15px;
	    width: auto;
	    margin-top: 20px;
}
.sidereason{
	border: 40px solid transparent;
	margin-top:10px;
	color:#333;
border-image: url(/img/border_1.png) 100 100 repeat;
font-size: 12pt;
background: #f7f4ed;
line-height: 2.2em;
word-break: keep-all;
padding: 15px;
max-height:300px;
text-align: center;
overflow-y: auto;

}
.Radegundb{
	background: #960012;
}
.Teresab{
	background:#192f85;
}
#magic2{	font-family: 'Diphylleia-Regular'; font-size:30pt; margin-top:40px;;}
#magic_content2{font-size:16pt;text-align: center;}
#magic_content2 i{font-size:12pt;margin-top:20px; opacity:0.8;}
#situation2{border: 40px solid transparent;
    border-image: url(/img/border_1.png) 100 100 repeat;font-size:12pt; background:#111111; line-height: 2.2em; word-break: keep-all; padding:15px; text-align:justify; overflow-y: auto; flex-grow:1; flex-shrink: 1;}
#situation2 #text2{filter:blur(3px);}
#situation2:hover #text2{filter:none;}
.blur {filter:blur(3px);}
.blur:hover {filter:none;}
#character_body2,#character_body3	{
  display: block;	position: fixed;
	top:0;	right:0;
	z-index:2000;	width:100vw;	height:100vh;
	background:rgba(0, 0, 0, 0.5);
	text-align: center;
  padding:10px;	overflow-y: auto;
}
#character_body2 img,#character_body3 img{width:900px;}
.open{display:block !important;}
.close{display: none !important;}
#character_content2{
	width:100%;
	margin-top:-50px;
}
@media all and (max-width: 760px) {
	#character_profile{margin-top:50px;}
	#ch_img{float:none; width:100%; text-align:center;}
	#character_head{float:none; width:100%; max-width:650px; text-align:center;}
	#ch_info{width:100%;margin:0;}
	#top_area{height:auto;}
	h3{font-size:24pt;}
	#hanmadi{
		margin-top:0px;
		border: 20px solid transparent; background:rgba(0,0,0,0.7);
		border-image: url(/css/images/profile_frame.png) 100 100 repeat;
		font-size:14pt;	line-height: 1.2em;
	}
}

@media all and (min-width:761px) and (max-width: 1024px) {
	#ch_img{float:none; width:100%; text-align:center;}
	#character_head{float:none; width:100%; max-width:650px; text-align:center;}
	#ch_info{width:100%;margin:0;}
	#top_area{height:auto;}
	h3{font-size:24pt;}
	#hanmadi{
		margin-top:0px;
		border: 20px solid transparent; background:rgba(0,0,0,0.7);
		border-image: url(/css/images/profile_frame.png) 100 100 repeat;
		font-size:14pt;	line-height: 1.2em;
	}
}


/****************************************************
	인벤토리 스타일
****************************************************/
.inven_box{
  box-sizing: border-box;
  background: #111111;
  border: 40px solid transparent;
  border-image: url(/img/border_1.png) 100 100 repeat;
	font-size: 12pt;
	word-break: keep-all !important;
	text-align: justify;
	font-family: 'RIDIBatang','GyeonggiBatang';
	text-indent:2em;
	filter:drop-shadow(0px 0px 10px black);
}
.inventory-list {display:block; position:relative; overflow:hidden;}
.inventory-list li {display:block; float:left; padding:0px;}
.inventory-list a {display:block; position:relative; height:auto; overflow:hidden; border-radius: 20px; padding:3px 5px;text-align: center;}
.inventory-list a img {width:100px; display:block; position:relative; margin:0 auto;}

.title-list {display:block; position:relative; padding:20px 0;}
.title-list .item {display:inline-block; box-sizing:border-box; text-align:left; vertical-align:middle;}
.itemlist{
	text-indent:0;
	width: auto;
	display: inline-block;
}
.inven-popup-viewer .title{width:100%;}
.letterbox
{
	text-align: justify !important;
    font-size: 12pt !important;
    font-family: 'RIDIBatang', 'GyeonggiBatang' !important;
	width: 530px;
    height: 500px;
    margin-top: -130px !important;
    margin-left: calc(50% - 365px);
		border: 40px solid transparent;
		color:#333;
	border-image: url(/img/border_1.png) 100 100 repeat;
	font-size: 12pt;
	background: #f7f4ed;
	line-height: 2.2em;
	word-break: keep-all;
	padding: 100px;
	max-height:300px;
	text-align: center;
	overflow-y: auto;

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

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