@charset "utf-8";

body	{ line-height: 1.5em; font-size: 12px; font-family: 'Nanum Gothic'; }
caption	{ display: none; }
html.single:before	{
	content: "";
	display: block;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: -1;
}
/*html.single > body	{
	z-index: 1;
}*/

button	{ font-size: 12px; font-family: 'Nanum Gothic'; }
/*#body	{ padding-bottom: 200px; }*/
.form-input	{ display: block; line-height: 30px; }

input[type="file"]	{ padding-left: 0 !important; }
.form-input,
input[type="text"],
input[type="password"],
input[type="file"],
select	{ box-sizing: border-box; height: 30px; border-width: 1px; border-style: solid; padding: 0 10px; max-width: 100%; font-size: 12px; }

.form-input,
input[type="text"].full,
input[type="password"].full,
input[type="file"].full,
select.full	{ width: 100%; }
textarea	{
	box-sizing: border-box;
	border-width: 1px;
	border-style: solid;
	padding: 5px;
	width: 100%;
	min-height: 50px;
	font-size: 12px;
}


.ajax-list-box	{
	height: 100px;
	overflow-y: auto;
	margin-top: 10px;
	padding: 5px;
}
.ajax-list-box ul,
.ajax-list-box li	{ display: block; margin: 0; padding: 0; position: relative; }
.ajax-list-box li	{ margin-bottom: 5px; }
.ajax-list-box li a	{
	display: block;
	position: relative;
	padding: 10px 0 10px 70px;
	min-height: 40px;
	border-radius: 3px;
	text-decoration: none;
	font-size: 13px;
}
.ajax-list-box li a .ui-thumb		{ position: absolute; top: 10px; left: 10px; width: 40px; height: 40px; line-height: 40px; overflow: hidden; text-align: center; }
.ajax-list-box li a .ui-thumb img	{ max-width: 100%; }
.ajax-list-box .no-data				{ line-height: 50px; text-align: center; margin-top: 10px; }


hr.line	{
	display: block;
	position: relative;
	clear: both;
	margin: 10px 0;
	border: none;
	padding: 0;
	height: 1px;
}
hr.padding	{
	display: block;
	clear: both;
	margin: 0;
	padding: 0;
	border: none;
	height: 30px;
}
hr.padding.small	{
	height: 5px;
}

.co_container .co_content a, .more_open_close {color:inherit;}

#bo_v_img img	{
	height: auto  !important;
}


#no_design_gnb	{ 
	text-align: center; 
} 

.close-header #header	{ width: 0px !important; }
.close-header #body		{ margin-left: 0 !important; }
.close-header body		{ min-width: 0; }

@media all and (max-width: 1000px) {
	.close-header #header	{ width: auto !important; }
}

html.single .bgm-player	{ display: none !important; }
div.co_content .bgm-player {display: inline-block !important;}

/********************
	TWITTER
*********************/

.timeline-Body					{ border: none; font-size: 12px; }
.timeline-Widget				{ background: none; }
.timeline-Body-notification,
.timeline-Tweet-actions,
.timeline-Header				{ display: none; }
.timeline-Viewport	{ height: 100%; overflow: auto; }
.timeline-TweetList	{ display: block; list-style: none; margin: 0; padding: 0; }
.timeline-Tweet		{ position: relative; padding: 20px 5px; }
.timeline-Tweet:before	{ content: ""; display: block; position: absolute; bottom: 0; left: 0; right: 0; height: 1px; border-top-width: 1px; border-top-style: dashed; }
.timeline-TweetList li:first-child .timeline-Tweet	{ padding-top: 0; }

.TweetAuthor-link	{ display: block; position: relative; padding-left: 40px; height: 30px; margin-bottom: 10px; }
.TweetAuthor-avatar	{ display: block; position: absolute; top: 0; left: 0; width: 30px; height: 30px; border-radius: 5px; overflow: hidden; }
.TweetAuthor-screenName		{ color: #777; font-size: 11px; }

.timeline-Tweet-metadata		{ display: block; position: relative; font-size: 11px; text-align: right; color: #777; padding-right: 10px; }
.timeline-Tweet-metadata a		{ color: #777; }

.MediaCard-mediaContainer	{ padding-bottom: 20px !important; }

.timeline-LoadMore	{ display: none; }
.Emoji	{ width: 15px; vertical-align: middle; }
.NaturalImage-image,
.CroppedImage-image	{ height: auto !important; }
.u-floatLeft, .u-floatRight	{ display: none; }


/**************************************************************
	기본 오브젝트
***************************************************************/

.ui-btn	{
	display: inline-block;
	position: relative;
	text-align: center;
	border-width: 1px;
	border-style: solid;
	vertical-align: middle;
	height: 28px;
	padding: 0 15px;
	box-sizing: border-box;
	cursor: pointer;
}
a.ui-btn	{
	line-height: 26px;
}

.ui-btn.small	{
	height: 25px;
	line-height: 23px;
	font-size: 12px;
}
.ui-btn.full	{ width: 100%; }


.ui-btn.admin {
    background: #4D4659;
    color: #fff;
    border-color: #3D3747;
}

.ui-btn.admin:hover {
    background: #62586F;
    color: #fff;
    border-color: #50475C;
}
.ui-btn.disable	{ opacity: .3; }


.theme-box	{
	display: block;
	position: relative;
	padding: 10px;
	box-sizing: border-box;
}

table { 
	width: 100%;
	padding:0;
	border-spacing:0px;
	border:0;
	border-collapse:collapse;
	table-layout: fixed;
}
th, td	{
	border: none;
}

.theme-form				{ table-layout: fixed; }
.theme-form td			{ padding: 5px; height: 30px; }
.theme-form th			{ padding: 5px 10px; }
.theme-form .frm_info	{ display: block; font-size: 12px; padding: 0 0 8px 0; }

.theme-list				{ table-layout: fixed; }
.theme-list thead th	{ height: 30px; }
.theme-list td			{ padding: 5px; height: 30px; }
.theme-list td.no-data	{ padding: 5px; text-align: center; line-height: 200px; }

/*@media all and (max-width: 640px) {
	.theme-list,
	.theme-list tbody,
	.theme-list thead,
	.theme-list tr,
	.theme-list td,
	.theme-list th	{
		display: block;
		position: relative;
		height: auto;
	}
	.theme-list thead	{ display: none; }

}*/

.frm_info	{ display: block; font-size: 12px; padding: 0 0 8px 0; opacity: .7; }


/**************************************************************
	배경음악 이퀄라이저 효과
***************************************************************/

.bgm-player { text-align: center;  }
.bgm-player .title {
	display: inline-block;
	vertical-align: middle;
	font-family: 'aphopis';
	line-height: 30px;
	font-size: 13px;
}
.bgm-player ul	 {
	display: inline-block;
	vertical-align: middle;
	margin-left: 5px;
	margin-right:15px;
}
.bar-equalizer	{
	display: inline-block;
	vertical-align: middle;
	position: relative;
	width: 90px;
	height: 25px;
	margin: 0 auto;
	overflow: hidden;
	text-align: center;
	box-sizing: border-box;
	margin-left: 15px;
}

.bar-equalizer i {
	display: block;
	float: left;
	width: 1px;
	margin-right: 2px;
	border-radius: 5px;
	margin-top: 15px;
	transform: translateY(-50%);
	
	transition: height 0.3s linear;
	-webkit-transition: height 0.3s linear;
	-moz-transition: height 0.3s linear;
	-ms-transition: height 0.3s linear;
	-o-transition: height 0.3s linear;
}

.bgm-player li	{ display: inline-block; }
.bgm-player li a	{
	display: inline-block;
	vertical-align:middle;
	position: relative;
	width: 12px;
	height: 100%;
	line-height: 27px;
	text-align: left;
	text-indent: -999px;
	overflow: hidden;
}
.bgm-player li a:before	{
	content: "";
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	text-indent: 0;
	text-align: center; 
	font-size: 12px;
}
.bgm-player li a.play:before	{ content: "▶"; }
.bgm-player li a.stop:before	{ content: "■"; }


/**************************************************************
	Web Size Viewer Control - 반응형 코딩
	-
	모바일 기준 : width 1000px
***************************************************************/

@media all and (min-width:1001px) {
	.only-pc	{  }
	.only-ta	{ display: none !important; }
	.only-mo	{ display: none !important; }

	.not-pc	{ display: none !important; }
	.not-ta	{  }
	.not-mo	{  }
}

@media all and (max-width:1000px) and (min-width: 1001px) {
	.only-pc	{ display: none !important; }
	.only-ta	{  }
	.only-mo	{ display: none !important; }

	.not-pc	{  }
	.not-ta	{ display: none !important; }
	.not-mo	{  }
}

@media all and (max-width: 1000px) {
	.only-pc	{ display: none !important; }
	.only-ta	{ display: none !important; }
	.only-mo	{  }

	.not-pc	{  }
	.not-ta	{  }
	.not-mo	{ display: none !important; }
}


/*******************************************
	모바일 메뉴 스타일 (헤더 설정)
********************************************/

#header .fix-layout	{ padding: 0; }
#logo a{display:block;max-width: 225px; margin:0 auto;}
#bgm_box{padding-top:10px;}
#login_box {padding-top:10px;}
#login_box .ui-btn {padding:0 8px;}
#footer{clear:both;}
@media all and (max-width: 1000px) {
	body	{ width: 100%; }
	#logo	{ padding: 0 10px; z-index:0;float:none;line-height:50px;top: auto; left: auto; transform: translateX(0) translateY(0); position: relative; text-align: center;}
	
	#body	{ margin-left: 0px; margin-top: 60px; }

	#header .fix-layout	{ padding: 0; height:100%; }
	#header	{
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: auto;
		z-index: 999;
		width: auto;
		height: 50px;
		overflow: visible;
	}
	#gnb_wrapper	{
		position: fixed;
		top: 0;
		right: -280px;
		bottom: 0;
		width: 280px;
		z-index: 999;
		overflow-y: auto;
	}

#no_design_gnb	{
	float:none;display:block;text-align:center;padding-top:70px;
	}
#no_design_gnb li	{
	display: block; 
	line-height:30px;
	margin-bottom:20px;
}

#login_box, #bgm_box {float:none;}

	#gnb_control_box		{
		position: absolute;
		top: 50%;
		margin-top: -20px;
		right: 10px;
		width: 40px;
		height: 40px;
		border-radius: 100%;
		text-align: center;
	}
	#gnb_control_box:before	{
		content: "";
		display: inline-block;
		width: 0;
		height: 100%;
		vertical-align: middle;
	}
	#gnb_control_box img	{
		display: inline-block;
		max-width: 50%;
		max-height: 50%;
		vertical-align: middle;
		margin-left: -12%;
		opacity: 1;
	}

	#gnb_control_box,
	#gnb_control_box * {
		transition: all 0s ease;
		-webkit-transition: all 0s ease;
		-ms-transition: all 0s ease;
	}

	.open-gnb #gnb_wrapper	{ right: 0; }
	.open-gnb #gnb_control_box	{
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 99;
		background: rgba(0, 0, 0, 0.5);
		border-radius: 0;
		width: auto;
		height: auto;
	}
	.open-gnb #gnb_control_box img	{ opacity: 0; }
}


/**************************************************************
	탭 설정
***************************************************************/

#tab_list	{
	display: block;
	position: relative;
	overflow: hidden;
	border-bottom-width: 2px;
	border-bottom-style: solid;
}
#tab_list li	{
	display: block;
	position: relative;
	float: left;
}
#tab_list li a	{
	display: block;
	position: relative;
	border-bottom-width: 0;
}
#tab_list li + li a	{
	border-left-width: 0px;
}


/**************************************************************
	페이지 설정
***************************************************************/

.pg_wrap	{
	display: block;
	position: relative;
	text-align: center;
	padding: 20px 0;
}
.pg_wrap .pg_page	{
	display: inline-block;
	position: relative;
	height: 30px;
	line-height: 28px;
	min-width: 30px;
	box-sizing: border-box;
	padding: 0 5px;
	font-size: 13px;
	text-align: center;
	vertical-align: middle;
	border-width: 1px;
	border-style: solid;
}

.pg_wrap .pg_control	{
	overflow: hidden;
	text-align: left;
	text-indent: -999px;
}
.pg_wrap .pg_control:before	{ 
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	text-indent: 0;
	text-align: center;
	font-size: 14px;
}
.pg_wrap .pg_start, .pg_wrap .pg_end {min-width:42px;}
.pg_wrap .pg_start:before	{ content: "처음"; }
.pg_wrap .pg_end:before		{ content: "맨끝"; }
.pg_wrap .pg_prev:before	{ content: "이전"; }
.pg_wrap .pg_next:before	{ content: "다음"; }


/**************************************************************
	쪽지함 설정
***************************************************************/

.ui-chatting-memo		{
	position: relative;
	margin: 10px 0;
	padding: 10px 0;
}

.ui-chatting-memo .ui-message	{
	position: relative;
	padding: 10px 0 10px 80px;
}

.ui-chatting-memo .ui-message .ui-thumb		{
	position: absolute;
	top: 10px;
	left: 0;
	width: 70px;
	overflow: hidden;
}
.ui-chatting-memo .ui-message .info			{
	position: absolute;
	top: 10px;
	right: 10px;
}
.ui-chatting-memo .ui-message .ico-new		{
	display: inline-block;
	font-size: 11px;
	width: 15px;
	height: 15px;
	border-radius: 2px;
	background: #cb0000;
	text-align: center;
	line-height: 14px;
	font-style: normal;
	margin-left: 10px;
	color: #fff;
}
.ui-chatting-memo .ui-message .ico-total	{
	display: inline-block;
	font-size: 11px;
	width: 15px;
	height: 15px;
	border-radius: 2px;
	text-align: center;
	line-height: 14px;
	font-style: normal;
	margin-left: 5px;
	padding: 0;
}
.ui-chatting-memo .ui-message .text			{
	padding: 10px;
	line-height: 1.6em;
	margin: 10px 0;
	overflow: hidden;
	min-height: 50px;
}
.ui-chatting-memo .ui-message .text a		{
	display: block;
	position: relative;
	min-height: 50px;
}
.ui-chatting-memo .ui-message .text.mine		{ opacity: .8; }
.ui-chatting-memo .ui-message .info strong		{ font-weight: normal; }

.ui-list-control		{ text-align: right; }

@media all and (max-width: 480px) {
	.ui-chatting-memo .ui-message				{ padding-left: 60px; padding-right: 0; }
	.ui-chatting-memo .ui-message .ui-thumb		{ width: 50px; left: 0; }
	.ui-chatting-memo .ui-message .ico-total	{ display: none; }
	.ui-chatting-memo .ui-message .total-text	{ display: none; }

	.ui-chatting-memo .ui-message .pc			{ display: none; }
	.ui-chatting-memo .ui-message .mo			{ display: inline; }
}


/*** 쪽지 보기 내부 리스트 ***/
.ui-chatting-memo #load_talk_prev		{

}
.ui-chatting-memo #load_talk_prev:before	{

}

.ui-chatting-list						{ position: relative; padding: 15px 0; }
.ui-chatting-list .ch-item				{ position: relative; padding-left: 75px; margin-bottom: 15px;}
.ui-chatting-list .ch-item .ui-thumb	{
	position: absolute;
	top: 0;
	left: 0;
	width: 60px;
	height: 70px;
	overflow: hidden;
}
.ui-chatting-list .ch-item .detail		{ padding: 0; }
.ui-chatting-list .ch-item .info		{
	position: relative;
	text-align: right;
	padding: 5px;
}
.ui-chatting-list .ch-item p			{
	display: inline-block;
	padding: 0 5px;
}
.ui-chatting-list .ch-item .text		{
	min-height: 25px;
	margin: 0;
	padding: 10px;
	line-height: 1.6em;
}

.ui-chatting-list .ch-item.right				{ padding-left: 0; padding-right: 70px; }
.ui-chatting-list .ch-item.right .ui-thumb		{ left: auto; right: 0; }
.ui-chatting-list .ch-item.right .info			{ text-align: left; }
.ui-chatting-list .ch-item.right .detail		{ opacity: .8; }

.ui-memo-write					{ position: relative; height: 80px; } 
.ui-memo-write .textarea		{ position: relative; width: 100%; height: 100%; }
.ui-memo-write .textarea textarea	{ width: 100%; height: 100%; }
.ui-memo-write .win_btn			{ margin-top: 5px; }

@media all and (max-width: 640px) {
	.ui-chatting-list .ch-item	{ padding: 0 !important; }
	.ui-chatting-list .ch-item .ui-thumb	{ display: none; }
}


/****************************************************
	Search Box
****************************************************/

.searc-sub-box	{
	position: relative;
	clear: both;
	padding: 30px 0px;
	max-width:500px;
	float:right;
}
.searc-sub-box:after{content:"";display:block;clear:both;}
.ui-search-box	{
	position: relative;
	padding-left: 100px;
	padding-right: 80px;
	margin-top: 5px;
}
.ui-search-box .sch_category	{
	position: absolute;
	top: 0;
	left: 0;
	width: 95px;
	line-height: 30px;
}
.ui-search-box .sch_button	{
	position: absolute;
	top: 0;
	right: 0;
	width: 75px;
}
.ui-search-box span	{
	display: block;
	padding: 0 15px;
}
.ui-search-box select,
.ui-search-box input[type="text"],
.ui-search-box button	{ display: block; width: 100%; }


/****************************************************
	Inventory Popup Viewer
****************************************************/

.inven-popup-viewer,
.inven-popup-viewer *		{ -webkit-transition: none; -moz-transition: none; -ms-transition: none; -o-transition: none; font-family: 'Dotum'; }

.inven-popup-viewer				{
	display: none;
	position: fixed;
	top: 50%;
	left: 50%;
	width: 300px;
	height: 370px;
	margin-left: -150px;
	margin-top: -185px;
	z-index: 9000;
	padding: 25px 40px;
	box-sizing: border-box;
}

.inven-item-box			{ position: relative; margin-right: 25px; padding-left: 25px;  border-right-width: 0px; }

.inven_popup_viewer_close	{ display: none; }
.inven-popup-on .inven_popup_viewer_close		{ display: block; position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 8900;  }
.inven_popup_viewer_close a		{ display: block; position: absolute; top: 0; left: 0; right: 0; bottom: 0; OVERFLOW: hidden; text-indent: -999px; }

.inven-popup-viewer.default-form .inner-content	{ position: relative; height: 100%; }
.inven-popup-viewer.default-form .inner-content .error { position: absolute; top:0; left: 0; right: 0;  text-align: center; line-height: 100px; font-family: 'Nanum Gothic'; }
.inven-popup-viewer.default-form .inner-content a		{  }

.inven-popup-viewer.default-form .info				{ position: relative; text-align: center; padding: 15px 0; }
.inven-popup-viewer.default-form .info .ui-thumb	{  }
.inven-popup-viewer.default-form .info .ui-thumb img	{ width: 50px; height: 50px; }

.inven-popup-viewer.default-form .text		{ position: relative;  }
.inven-popup-viewer.default-form .text .title	{ font-size: 14px; text-align: center; margin-bottom: 10px; padding-bottom: 10px;}
.inven-popup-viewer.default-form .text .title span	{ display: none; }

.inven-popup-viewer.default-form .text .item-content-box		{ height: 170px; overflow-y: auto; }
.inven-popup-viewer.default-form .text .item-content-box div	{ line-height: 1.4em; text-align: center; }
.inven-popup-viewer.default-form .text div.default				{  }
.inven-popup-viewer.default-form .text div.effect				{  padding-top: 15px; }
.inven-popup-viewer.default-form .text div.memo					{  padding-top: 15px; }

.inven-popup-viewer.default-form .control-box		{ clear: both; position: relative; padding: 10px 0 0; text-align: center; }
.inven-popup-viewer.default-form .control-box li	{ display: inline-block; }
.inven-popup-viewer.default-form .control-box li a	{ display: block;  }

.inven-popup-viewer.default-form .add-item-form					{ position: relative; height: 30%; margin-top: 10px; }
.inven-popup-viewer.default-form .add-item-form .item-info		{ position: relative; margin-bottom: 5px; }
.inven-popup-viewer.default-form .add-item-form .item-info label	{ display: none; }
.inven-popup-viewer.default-form .add-item-form .item-info span		{ display: block; font-size: 11px; padding-top: 8px; }
.inven-popup-viewer.default-form .add-item-form input				{ width: 100%; box-sizing: border-box; }
.inven-popup-viewer.default-form .add-item-form .item-input			{ position: relative; margin-bottom: 5px; }
.inven-popup-viewer.default-form .add-item-form .ui-style-btn.type4	{ position: absolute; right: 87px; bottom: -44px; height: 25px; line-height: 25px; }

.inven-popup-viewer.default-form .send-item-form						{ position: relative; height: 30%; }
.inven-popup-viewer.default-form .send-item-form input,
.inven-popup-viewer.default-form .send-item-form select					{ width: 100%; box-sizing: border-box; }
.inven-popup-viewer.default-form .send-item-form input					{ padding: 0 10px; }
.inven-popup-viewer.default-form .send-item-form .item-input			{ position: relative; margin-bottom: 5px; }
.inven-popup-viewer.default-form .send-item-form .ui-style-btn.type4	{ position: absolute; right: 87px; bottom: -44px; height: 25px; line-height: 25px; }




#goto_top	{ position: absolute; right: 10px; bottom: 50px; z-index: 50; /*position:fixed;bottom:50px;right:7%;display:none;width:40px;height:40px;text-align:center;font:40px/45px bold;color:#edd6a2;cursor:pointer; background:white;border-radius:40px;border:1px solid #f2dcaa;z-index:999; */}

@media all and (max-width: 1000px) {
	#goto_top	{ bottom: 50px; }
}



#submenu	{
	display: block;
	position: absolute;
	top: 15px;
	left: 15px;
	width: 140px;
	box-sizing: border-box;
	padding: 10px 0;
}

#submenu li	{
	font-size: 13px;
	font-weight: 600;
	padding: 8px 20px;
}
#subpage	{
	position: relative;
	margin-left: 180px;
	padding-top: 10px;
}
#subpage section	{
	padding-bottom: 50px;
}

@media all and (max-width: 1000px) { 
	#submenu	{
		position: relative;
		top: auto;
		left: auto;
		width: auto;
		padding: 10px;
		text-align: center;
		transform: translateY(0) !important;
	}
	#submenu li	{
		display: inline-block;
		padding: 5px;
		font-size: 12px;
	}
	#subpage	{ margin-left: 0; }
}

.page-title			{ font-size: 18px; padding: 10px 0 20px; }
.page-title span	{ font-size: 14px; opacity: .8; font-weight: 400; }

.sub-title	{ font-size: 14px; padding: 0 0 10px; } 

hr.padding	{
	display: block;
	clear: both;
	margin: 0;
	padding: 0;
	border: none;
	height: 30px;
}


.ui-memo-alram-box,
.ui-call-alram-box	{
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 999;
	text-align: center;
}


.marquee span	{
	display: block;
	position:relative;
	overflow: hidden;
}

.marquee span i:after {
  content:"";
  white-space:nowrap;
  padding-right:50px;
}
 
.marquee span i {
  margin:0;
  padding-left:100%;
  display:inline-block;
  white-space:nowrap;
    -webkit-animation-name:marquee;
    -webkit-animation-timing-function:linear;
    -webkit-animation-duration:10s;
    -webkit-animation-iteration-count:infinite;
    -moz-animation-name:marquee;
    -moz-animation-timing-function:linear;
    -moz-animation-duration:10s;
    -moz-animation-iteration-count:infinite;
    -ms-animation-name:marquee;
    -ms-animation-timing-function:linear;
    -ms-animation-duration:10s;
    -ms-animation-iteration-count:infinite;
    -o-animation-name:marquee;
    -o-animation-timing-function:linear;
    -o-animation-duration:10s;
    -o-animation-iteration-count:infinite;
    animation-name:marquee;
    animation-timing-function:linear;
    animation-duration:10s;
    animation-iteration-count:infinite;
}
@-webkit-keyframes marquee {
  from   { -webkit-transform: translate(0%);}
  99%,to { -webkit-transform: translate(-100%);}
}
@-moz-keyframes marquee {
  from   { -moz-transform: translate(0%);}
  99%,to { -moz-transform: translate(-100%);}
}
@-ms-keyframes marquee {
  from   { -ms-transform: translate(0%);}
  99%,to { -ms-transform: translate(-100%);}
}
@-o-keyframes marquee {
  from   { -o-transform: translate(0%);}
  99%,to { -o-transform: translate(-100%);}
}
@keyframes marquee {
  from   { transform: translate(0%);}
  99%,to { transform: translate(-100%);}
}

/* ==================================================
   PC SIDE MENU
   ================================================== */

@media all and (min-width: 1001px) {

    /* 사이드바 전체 */
    #header {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;

        width: 220px;
        height: 100vh;

        z-index: 999;
        box-sizing: border-box;

        background: #302a3d;
    }

    /* header 안에서는 기존 중앙정렬 컨테이너 해제 */
    #header > .fix-layout {
        width: 100%;
        max-width: none;
        height: 100%;

        margin: 0;
        padding: 40px 25px;

        box-sizing: border-box;
    }

    /* 로고 */
    #logo {
        display: block;
        position: relative;

        margin: 0 0 40px;
        padding: 0;

        text-align: center;
    }

    #logo a {
        display: block;
        margin: 0 auto;
    }

    /* PC에서는 모바일 메뉴 버튼 숨김 */
    #gnb_control_box {
        display: none;
    }

    /* 메뉴 영역 */
    #gnb_wrapper {
        display: block;
        position: relative;

        width: 100%;
    }

    #gnb {
        display: block;
        width: 100%;
    }

    /* 메뉴 목록 */
    #no_design_gnb {
        display: flex;
        flex-direction: column;
        gap: 14px;

        margin: 0;
        padding: 0;

        text-align: left;
    }

    #no_design_gnb li {
        display: block;
        width: 100%;

        margin: 0;
        padding: 0;
    }

    #no_design_gnb li a {
        display: block;

        padding: 7px 10px;

        font-size: 13px;
        line-height: 1.5;
        text-decoration: none;

        transition: 0.2s ease;
    }

    #no_design_gnb li a:hover {
        transform: translateX(5px);
    }

    /* 로그인 */
    #login_box {
        float: none;
        margin-top: 35px;

        text-align: center;
    }

    /* BGM */
    #bgm_box {
        float: none;
        margin-top: 15px;

        text-align: center;
    }

    /* 본문을 사이드바만큼 오른쪽으로 밀기 */
    #body {
        margin-left: 220px;
    }

    /* 본문용 fix-layout은 기존 중앙정렬 유지 */
    #body > .fix-layout {
        max-width: 1000px;
        margin: 0 auto;
        padding-left: 20px;
        padding-right: 20px;
        box-sizing: border-box;
    }
}

/* ==================================================
   PC SIDE MENU - DESIGN
   ================================================== */

@media all and (min-width: 1001px) {

    /* ===== 사이드바 ===== */

    #header {
        width: 200px;
        background: #302a3d;
        border-right: 1px solid rgba(255,255,255,0.06);
    }

    #header > .fix-layout {
        padding: 38px 22px;
    }


    /* ===== 로고 ===== */

    #logo {
        margin-bottom: 35px;
        text-align: left;
    }

    #logo a {
        display: inline-block;
        max-width: 150px;
    }


    /* ===== 기존 검은 메뉴 박스 제거 ===== */

    #gnb_wrapper,
    #gnb {
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
    }

    #gnb_wrapper {
        width: 100%;
        padding: 0 !important;
    }


    /* ===== 메뉴 ===== */

    #no_design_gnb {
        display: flex;
        flex-direction: column;

        gap: 3px;

        width: 100%;
        margin: 0;
        padding: 0;

        text-align: left;
    }

    #no_design_gnb li {
        display: block;

        width: 100%;
        margin: 0;
        padding: 0;
    }

    #no_design_gnb li a {
        display: block;

        padding: 8px 5px;

        font-size: 12px;
        line-height: 1.4;

        letter-spacing: 0.06em;

        opacity: 0.8;

        transition:
            opacity .2s ease,
            transform .2s ease;
    }

    #no_design_gnb li a:hover {
        opacity: 1;
        transform: translateX(5px);
    }


    /* ===== 메뉴와 로그인 영역 사이 구분선 ===== */

    #login_box {
        position: relative;

        margin-top: 30px;
        padding-top: 25px;

        text-align: left;
    }

    #login_box::before {
        content: "";

        position: absolute;

        top: 0;
        left: 0;

        width: 35px;
        height: 1px;

        background: rgba(255,255,255,0.18);
    }


    /* 닉네임 */

    #login_box .name {
        margin-bottom: 10px;

        font-size: 11px;
        opacity: 0.65;
    }


    /* ===== 로그인/관리자 버튼 ===== */

    #login_box .ui-btn {
        height: auto;

        margin: 2px 2px 2px 0;
        padding: 4px 7px;

        border: 0;

        background: rgba(255,255,255,0.07);

        font-size: 10px;
        line-height: 1.5;

        opacity: 0.75;

        transition:
            opacity .2s ease,
            background .2s ease;
    }

    #login_box .ui-btn:hover {
        background: rgba(255,255,255,0.13);
        opacity: 1;
    }


    /* ===== BGM ===== */

    #bgm_box {
        margin-top: 18px;
        padding: 0;

        text-align: left;

        opacity: 0.7;
    }

    #bgm_box:hover {
        opacity: 1;
    }

    #bgm_box .bgm-player {
        text-align: left;
    }

    #bgm_box .bar-equalizer {
        margin-left: 0;
    }


    /* ===== 본문 ===== */

    #body {
        margin-left: 200px;
    }

}

/* ==================================================
   SIDE MENU - A MENU + B LAYOUT
   ================================================== */

@media all and (min-width: 1001px) {

    /* 전체 사이드바 */
    #header {
        width: 200px;
        background: #302a3d;
    }

    #header > .fix-layout {
        padding: 32px 22px;
    }


    /* 기존 로고를 사용하는 경우 */
    #logo {
        margin-bottom: 18px;
        text-align: center;
    }


    /* =========================
       TITLE
       ========================= */

    .side-title {
        display: flex;
        flex-direction: column;
        align-items: center;

        margin-bottom: 38px;

        text-align: center;
    }

    .side-symbol {
        display: block;

        margin-bottom: 16px;

        font-size: 15px;
        color: #a995d0;
        opacity: .8;
    }

    .side-name {
        display: block;

        color: #ded9e7 !important;

        font-size: 12px;
        font-weight: 600;
        letter-spacing: .25em;

        transition: .2s ease;
    }

    .side-name:hover {
        color: #ffffff !important;
    }


    /* archive 양옆의 짧은 선 */

    .side-subtitle {
        display: flex;
        align-items: center;
        gap: 8px;

        margin-top: 8px;

        color: #82798e;

        font-size: 9px;
        font-style: italic;
        letter-spacing: .08em;
    }

    .side-subtitle::before,
    .side-subtitle::after {
        content: "";

        display: block;

        width: 20px;
        height: 1px;

        background: #655d70;
    }


    /* =========================
       MENU
       ========================= */

    #no_design_gnb {
        gap: 2px;
    }

    #no_design_gnb li a {
        position: relative;

        padding: 7px 5px;

        font-size: 12px;
        letter-spacing: .06em;

        opacity: .72;

        transition:
            transform .2s ease,
            opacity .2s ease;
    }

    #no_design_gnb li a:hover {
        opacity: 1;
        transform: translateX(5px);
    }


    /* 메뉴 아래 점 장식 */

    #gnb::after {
        content: "·  ·  ·";

        display: block;

        margin-top: 23px;

        color: #81778e;

        font-size: 11px;
        letter-spacing: .25em;

        text-align: center;
    }


    /* =========================
       USER
       ========================= */

    #login_box {
        margin-top: 22px;
        padding-top: 0;

        text-align: left;
    }

    /* 이전에 만든 짧은 구분선 제거 */
    #login_box::before {
        display: none;
    }


    /* USER 라벨 */

    #login_box::after {
        content: "USER";

        display: block;

        position: absolute;
        top: -1px;
        left: 0;

        color: #776e84;

        font-size: 8px;
        letter-spacing: .18em;
    }

    #login_box {
        padding-top: 17px;
    }


    /* 닉네임 */

    #login_box .name {
        margin: 0 0 10px;

        color: #d1cadb;

        font-size: 11px;
        opacity: .85;
    }


    /* 관리자 / 게시판 / 로그아웃 */

    #login_box .ui-btn {
        margin: 2px 2px 2px 0;
        padding: 3px 6px;

        background: transparent;

        border: 0;

        font-size: 9px;

        opacity: .6;
    }

    #login_box .ui-btn:hover {
        background: rgba(255,255,255,.06);
        opacity: 1;
    }


    /* =========================
       BGM
       ========================= */

    #bgm_box {
        position: relative;

        margin-top: 25px;
        padding-top: 18px;

        border-top: 1px solid rgba(255,255,255,.10);

        opacity: .65;
    }

    #bgm_box:hover {
        opacity: 1;
    }

}

@media all and (max-width: 1000px) {
    .side-title {
        display: none;
    }
}

/* =========================================
   SIDE USER / BGM CLEANUP
   ========================================= */

@media all and (min-width: 1001px) {

    /* USER 영역 */
    #login_box {
        margin-top: 24px;
        padding: 0;

        text-align: left;
    }

    /* USER 글자 제거 */
    #login_box::after,
    #login_box::before {
        display: none !important;
        content: none !important;
    }

    /* 닉네임 */
    #login_box .name {
        display: block;

        margin: 0 0 7px;
        padding: 0;

        color: #d8d2df;

        font-size: 10px;
        font-weight: 600;
        letter-spacing: .08em;

        opacity: .85;
    }

    /* 관리자 / 게시판생성 / 로그아웃 */
    #login_box .ui-btn {
        display: inline-block;

        height: auto;
        margin: 0 7px 0 0;
        padding: 0;

        border: 0 !important;
        background: none !important;
        box-shadow: none !important;

        font-size: 9px;
        line-height: 1.8;
        letter-spacing: .03em;

        opacity: .48;

        transition: opacity .2s ease;
    }

    #login_box .ui-btn:hover {
        background: none !important;
        opacity: 1;
    }


    /* BGM 영역 */
    #bgm_box {
        margin-top: 22px;
        padding-top: 18px;

        border-top: 1px solid rgba(255,255,255,.08);

        text-align: left;
        opacity: .55;

        transition: opacity .2s ease;
    }

    #bgm_box:hover {
        opacity: .9;
    }

    #bgm_box .bgm-player {
        display: flex;
        align-items: center;

        text-align: left;
    }

    /* BGM 제목이 있다면 숨김 */
    #bgm_box .bgm-player .title {
        display: none;
    }

    /* 이퀄라이저 */
    #bgm_box .bar-equalizer {
        width: 78px;
        height: 25px;

        margin: 0 10px 0 0;
    }

    /* 재생/정지 버튼 영역 */
    #bgm_box .bgm-player ul {
        margin: 0;
    }

    #bgm_box .bgm-player li a {
        width: 14px;
        line-height: 25px;
    }
}

/* =========================================
   PC BOTTOM BGM BAR
   ========================================= */

@media all and (min-width: 1001px) {

    #bgm_box {
        position: fixed;

        left: 200px;   /* 사이드바 너비 */
        right: 0;
        bottom: 0;

        height: 42px;
        margin: 0;
        padding: 0 28px;

        box-sizing: border-box;

        display: flex;
        align-items: center;

        background: rgba(24, 21, 31, 0.96);
        border-top: 1px solid rgba(255,255,255,.07);

        z-index: 998;

        opacity: 1;
    }

    #bgm_box .bgm-player {
        display: flex;
        align-items: center;

        width: 100%;
        height: 100%;

        margin: 0;
    }

    #bgm_box .bgm-player .title {
        display: none;
    }

    #bgm_box .bar-equalizer {
        width: 80px;
        height: 25px;

        margin: 0 12px 0 0;
    }

    #bgm_box .bgm-player ul {
        margin: 0;
    }

    /* BGM바가 본문 마지막 내용을 가리지 않도록 */
    #body {
        padding-bottom: 42px;
        box-sizing: border-box;
    }
}

/* ========================================
   HESELL - CLICK STAR EFFECT
======================================== */

.click-star {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 99999;

    pointer-events: none;
    user-select: none;

    color: #d8cfdf;

    font-family: Georgia, "Times New Roman", serif;
    font-weight: normal;
    line-height: 1;

    opacity: 0;

    /* 회라벤더빛 은은한 광 */
    text-shadow:
        0 0 3px rgba(235, 225, 245, .9),
        0 0 8px rgba(190, 170, 215, .55),
        0 0 14px rgba(150, 125, 180, .25);

    animation: hesell-star-pop 1s ease-out forwards;
}


@keyframes hesell-star-pop {

    0% {
        opacity: 0;
        transform:
            translate(-50%, -50%)
            translate(0, 0)
            scale(1.15)
            rotate(0deg);
    }

    /* 클릭 직후 반짝! */
    15% {
        opacity: 1;
        transform:
            translate(-50%, -50%)
            translate(
                calc(var(--star-x) * .15),
                calc(var(--star-y) * .15)
            )
            scale(1.35)
            rotate(0deg);
    }

    35% {
        opacity: .95;
        transform:
            translate(-50%, -50%)
            translate(
                calc(var(--star-x) * .45),
                calc(var(--star-y) * .45)
            )
            scale(1);
    }

    70% {
        opacity: .55;
    }

    100% {
        opacity: 0;
        transform:
            translate(-50%, -50%)
            translate(var(--star-x), var(--star-y))
            scale(.75)
            rotate(var(--star-rotate));
    }
}


/* 움직임을 줄이는 OS 설정을 사용하는 경우 */
@media (prefers-reduced-motion: reduce) {
    .click-star {
        animation-duration: .25s;
    }
}

/* ========================================
   HESELL - CURSOR STAR DUST
   조금 더 크고 밝은 버전
======================================== */

.cursor-star {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 99998;

    pointer-events: none;
    user-select: none;

    /* 밝은 회라벤더 */
    color: #c5bbd2;

    font-family: Georgia, "Times New Roman", serif;
    line-height: 1;

    opacity: 0;

    /* 아주 약한 보랏빛 광 */
    text-shadow:
        0 0 3px rgba(215, 204, 230, .55),
        0 0 7px rgba(170, 150, 195, .30);

    animation:
        hesell-star-dust 1.25s ease-out forwards;
}

@keyframes hesell-star-dust {

    0% {
        opacity: 0;
        transform:
            translate(-50%, -50%)
            translate(0, 0)
            scale(.65)
            rotate(0deg);
    }

    12% {
        opacity: .95;
    }

    50% {
        opacity: .75;
    }

    75% {
        opacity: .4;
    }

    100% {
        opacity: 0;
        transform:
            translate(-50%, -50%)
            translate(var(--dust-x), var(--dust-y))
            scale(1)
            rotate(var(--dust-rotate));
    }
}

@media (prefers-reduced-motion: reduce) {
    .cursor-star {
        display: none;
    }
}

/* HESELL NOTICE */
.board-notice {
    background: transparent !important;
    color: #887e98 !important;

    width: 440px;
    max-width: 90%;
    padding: 8px 10px;

    border-top: 1px solid rgba(154, 137, 170, .18);
    border-bottom: 1px solid rgba(154, 137, 170, .18);

    font-size: 11px;
    letter-spacing: .05em;

    /* 문장 줄바꿈 방지 */
    white-space: nowrap;
}

.board-notice,
.board-notice p,
.board-notice span {
    color: #9a8faa !important;
}

/* 사이드바 로그인 영역 숨기기 */
#login_box {
    display: none !important;
}