@charset "utf-8";

/** Common Style **/
.fix-layout		{ position: relative; max-width: 1000px; margin-left: auto; margin-right: auto; box-sizing: border-box; }
header > .fix-layout,
section > .fix-layout,
footer > .fix-layout	{ padding: 0 15px; }

@media all and (max-width: 1000px) {
	.fix-layout	{ position: static; }
}

/************************************************
	Site Menu
*************************************************/

#tnb								{ position: relative; border-bottom: 1px solid #e1e1e1; }
#tnb > .fix-layout:after			{ content: ""; display: block; position: relative; clear: both; }
#tnb ul								{ margin: 0 auto; width: 135px; }
#tnb li								{ display: block; position: relative; float: left;  width: 45px; height: 45px; }
#tnb li a							{ display: block; position: relative; width: 100%; height: 100%; }
#tnb li a:hover						{ color: #49a5bf; }
#tnb li a:before					{ content: ""; display: block; position: absolute; top: 0; left: 0; right: 0; bottom: 0; font-family: 'icon'; color: #49a5bf; font-size: 23px; text-indent: 0; text-align: center; line-height: 45px; }
#tnb li a:after						{ content: ""; display: block; position: absolute; top: 0; left: 0; right: 0; bottom: 0; border: 1px solid #eaeaea; border-top-width: 0; border-bottom-width: 0; border-left-width: 0; }
#tnb li:first-child a:after			{ border-left-width: 1px; }
#tnb li a#top_mnu_login:before		{ content: "\e9b6"; }
#tnb li a#top_mnu_logout:before		{ content: "\e9b6"; }
#tnb li a#top_mnu_register:before	{ content: "\e973"; }
#tnb li a#top_mnu_mypage:before		{ content: "\e994"; }
#tnb li a#top_mnu_sitemap:before	{ content: "\e9c9"; }

#tnb li a span {
	position: absolute;
	width:80px;
	font-size: 12px;
	color: #FFFFFF;
	background: #000000;
	height: 25px;
	line-height: 25px;
	text-align: center;
	visibility: hidden;
	border-radius: 6px;
	left: 50%;
	margin-left: -40px;
	top: 100%;
}
#tnb li a span:after {
	content: '';
	position: absolute;
	top: -8px;;
	left: 50%;
	margin-left: -8px;
	width: 0; height: 0;
	border-bottom: 8px solid #000000;
	border-right: 8px solid transparent;
	border-left: 8px solid transparent;
}
#tnb li a:focus span,
#tnb li a:hover span {
	visibility: visible;
	opacity: 0.8;
	/*top: 35px;*/
	left: 50%;
	margin-left: -40px;
	z-index: 999;
}


/************************************************
	Header
*************************************************/

header													{ position: absolute; top: 46px; left: 0; right: 0; min-height: 90px; border-bottom: 1px solid #e1e1e1; z-index: 99; background: #fff; }
header h1												{ position: absolute; top: 20px; left: 15px; z-index: 2; }

header #site_search_box									{ position: absolute; top: 26px; right: 5px; width: 120px; z-index: 2;}
header #site_search_box fieldset						{ position: relative; padding: 4px 0; height: 30px; }
header #site_search_box fieldset input[type="text"]		{ width: 100%; box-sizing: border-box; height: 30px; background: #49a5bf; color: #fff; border: none; padding: 0 27px 0 10px; }
header #site_search_box fieldset input[type="text"]::-webkit-input-placeholder	{ color: #fff; }
header #site_search_box fieldset input[type="text"]:-moz-placeholder				{ color: #fff; opacity:  1; }
header #site_search_box fieldset input[type="text"]::-moz-placeholder			{ color: #fff;opacity:  1; }
header #site_search_box fieldset input[type="text"]:-ms-input-placeholder		{ color: #fff; }

header #site_search_box button[type="submit"]			{ position: absolute; top: 4px; right: 0; height: 30px; width: 30px; text-indent: -999px; overflow: hidden; line-height: 30px; }
header #site_search_box button[type="submit"]:before	{ content: "\e986"; font-family: 'icon'; display: block; position: absolute; top: 0; left: 0; right: 0; bottom: 0; text-indent: 0; font-size: 16px; text-align: center; color: #fff; }

@media all and (max-width: 1000px) { 
	header				{ padding-top: 70px; min-height: 0; }
	header h1			{ top: 10px; }

	header #site_search_box								{ width: 200px; right: 65px; top: 10px; }
	header #site_search_box fieldset input[type="text"]	{ height: 40px; }
	header #site_search_box button[type="submit"]		{ height: 40px; line-height: 40px; }
}
@media all and (max-width: 400px) { 
	header #site_search_box								{ width: 100px; }
}


/************************************************
	Footer
*************************************************/

footer			{ clear: both; margin-top: 20px; padding: 20px 0; border-top: 1px solid #e1e1e1; text-align: center; }
footer p		{ font-size: 11px; }


/************************************************
	GNB Menu Style
*************************************************/


@media all and (min-width: 1001px) { 
	#gnb				{ position: relative; text-align: center; min-height: 90px; }
	#gnb > ul			{ padding-top: 22px; margin-left: 150px; margin-right: 150px; }
	#gnb > ul:after		{ content: ""; display: block; position: relative; clear: both; }
	#gnb li				{ display: block; position:relative; float: left; }
	#gnb li a			{ display: block; position: relative; font-size: 16px; font-weight: 600; color: #343434; padding: 13px 0; text-decoration: none; }
	#gnb > ul > li.on > a,
	#gnb li a:hover		{ color: #49a5bf; }
	#gnb ul ul			{ display: none; }

	#gnb > ul > li > ul		{ position: absolute; top: 68px;  left: 0; right: 0; margin: 0; background: #fff; border: 1px solid #e1e1e1; border-top-width: 0; }

	#gnb li li			{ float: none; }
	#gnb li li a		{ font-size: 14px; font-weight: 400; padding: 10px 20px; text-align: left; }
	#gnb li li a:hover	{ background: #49a5bf; color: #fff; }
}
@media all and (max-width: 1000px) { 
	#gnb			{ display: none; position: relative; text-align: left; border-top: 1px solid #d1d1d1; }
	#gnb ul ul		{ display: none; }
	
	#gnb li				{ position: relative; width: 100% !important; }
	#gnb li a			{ display: block; position: relative; font-size: 16px; font-weight: 600; color: #343434; padding: 13px 0; text-decoration: none; }
	#gnb li a:hover		{ color: #49a5bf; }

	#gnb li li a		{ font-size: 14px; font-weight: 400; padding: 10px 20px; text-align: left; }
	#gnb li li a:hover	{ background: #49a5bf; color: #fff; }

	#gnb .has-sub-menu:after			{ content: '\ea43'; font-family: 'icon'; position: absolute; top: 0; right: 10px; line-height: 47px; font-size: 25px; color: #d1d1d1; }
	#gnb .open.has-sub-menu:after		{ content: '\ea41'; }

}


/************************************************
	Section Style
*************************************************/

section						{ position: relative; margin-top: 90px; }
section.contDetail			{ margin-top: 0; }
@media all and (max-width: 1000px) { 
	section		{ margin-top: 70px; }
}


/************************************************
	Sub Page Style
*************************************************/
#body_content ,#searchVO {padding-right:0px;}
.sub-page					{ padding-top: 20px; }

.sub-page #page_nav							{ display: block; position: absolute;right: 40px; top: 25px; }
.sub-page #page_nav li						{ display: inline-block; position: relative; font-size: 11px; padding-left: 20px;  color: #888; vertical-align: middle; }
.sub-page #page_nav li:before				{ content: ">"; display: block; position: absolute; top: 0; left: 0; width: 20px; bottom: 0; line-height: 21px; font-size: 10px; text-align: center; }
.sub-page #page_nav li:first-child			{ text-indent: -999px; overflow: hidden; width: 20px; height: 21px; padding-left: 0;  text-align: left; }
.sub-page #page_nav li:first-child:before	{ content: "\e900"; font-family: 'icon'; font-size: 15px; text-indent: 0; }

.btn-gnb-view,
.btn-search-view	{ display: none; }

@media all and (min-width: 1001px) { 
	.sub-page > .fix-layout		{ display: table; width: 100%; }
	.sub-page #lnb		{ display: table-cell; vertical-align: top; table-layout: fixed; width: 200px; }
	.sub-page #body		{ display: table-cell; vertical-align: top; table-layout: fixed; padding-left: 50px; }
}

@media all and (max-width: 1000px) { 
	#body_content ,#searchVO {padding-right:0px;}
	.sub-page				{ padding-top: 0; }
	.btn-gnb-view			{ display: block; position: absolute; right: 15px; top: 14px; width: 40px; height: 40px; }
	.btn-gnb-view a			{ display: block; position: absolute; top: 0; left: 0; right: 0; bottom: 0; border-radius: 3px; background: #49a5bf; border: 1px solid #2b859e; text-indent: -999px; overflow: hidden; }
	.btn-gnb-view a:before	{ content: "\e9bd"; display: block; position: absolute; top: 0; left: 0; right: 0; bottom: 0; color: #fff; font-family: 'icon'; font-size: 25px; text-indent: 0; text-align: center; line-height: 40px; }

	.sub-page > .fix-layout		{ display: block; }
	.sub-page #lnb		{ display: block; position: relative; margin: 0 -15px; }
	.sub-page #body		{ display: block; padding: 0; }

	.sub-page #page_nav		{ position: relative; right: auto; top: auto; text-align: right; background: #464646; margin: 0 -15px; padding: 8px 10px; }
	.sub-page #page_nav li	{ color: #fff; text-align: right; }
}


/************************************************
	LNB Menu Style
*************************************************/

#lnb a	{ display: block; position: relative; text-decoration: none; }

/* Title */
#lnb > ul					{ max-width: 200px; }
#lnb > ul > li				{ position: relative;  border-bottom: 1px solid #17738d; padding-bottom: 10px; }
#lnb > ul > li > a			{ padding: 20px; color: #fff; background: #49a5bf; font-size: 18px; font-weight: 500; border-bottom: 10px solid #464646; margin-bottom: 20px; overflow: hidden; }
#lnb > ul > li > a:before	{ content: ""; display: block; position: absolute; right: -20px; bottom: -20px; width: 60px; height: 60px; border-radius: 9.0em; background: rgba(255, 255, 255, 0.2); }
#lnb > ul > li > a:after	{ content: ""; display: block; position: absolute; right: 20px; bottom: 20px; width: 30px; height: 30px; border-radius: 9.0em; background: rgba(255, 255, 255, 0.1); }

/* 1depth */
#lnb > ul > li > ul > li > a				{ padding: 8px 10px; font-size: 14px; border-top: 1px solid #eaeaea; }
#lnb > ul > li > ul > li > a:hover			{ font-weight: 800; }
#lnb > ul > li > ul > li:first-child > a	{ border-top-width: 0; }

#lnb > ul > li > ul > li.on > a						{ padding-left: 25px; }
#lnb > ul > li > ul > li.on > a:before				{ content: ""; display: block; position: absolute; top: 15px; left: 10px; width: 8px; height: 8px; background: #49a5bf; }

/* 3 depth */
#lnb > ul > li > ul > li > ul						{ position: relative; padding: 3px 10px; border: 1px solid #eaeaea; background: #fafafa; }
#lnb > ul > li > ul > li > ul > li > a				{ padding: 3px 10px; font-size: 12px; border-top: 1px solid #eaeaea; }
#lnb > ul > li > ul > li > ul > li > a:hover		{ font-weight: 800; }
#lnb > ul > li > ul > li > ul > li:first-child > a	{ border-top-width: 0; }

#lnb > ul > li > ul > li > ul > li.on  > a			{ padding-left: 25px; }
#lnb > ul > li > ul > li > ul > li.on  > a:before	{ content: ""; display: block; position: absolute; top: 12px; left: 10px; width: 8px; height: 2px; background: #49a5bf; }



@media all and (max-width: 1000px) { 
	#lnb > ul				{ max-width: 100%; }
	#lnb > ul > li			{ padding-bottom: 0; }
	#lnb > ul > li:after	{ content: "\e9bd"; display: block; position: absolute; top: 10px; right: 15px; width: 30px; height: 30px; line-height: 30px; color: #fff; font-family: 'icon'; font-size: 25px; text-indent: 0; text-align: center; }
	#lnb > ul > li > a		{ margin-bottom: 0; border-bottom-width: 1px; padding: 13px 20px; }
	#lnb > ul > li > ul		{ display: none; }

	#lnb > ul > li > ul > li > a		{ padding: 10px 20px; font-size: 14px; }
	#lnb > ul > li > ul > li.on > a		{ padding-left: 35px; }
	#lnb > ul > li > ul > li.on > a:before	{ content: ""; display: block; position: absolute; top: 15px; left: 20px; width: 8px; height: 8px; background: #49a5bf; }
}


/************************************************
	Sub Page Theme
*************************************************/

.ui-type-content > h1				{ font-size: 25px; padding: 25px 0; border-bottom: 1px solid #e1e1e1; }

#sns_share_box					{ padding: 5px 0; border-bottom: 1px solid #e1e1e1; margin-bottom: 30px; text-align: right; }
#sns_share_box:before			{ content: "\ea82"; font-family: 'icon'; padding-right: 10px; font-size: 20px; line-height: 30px; vertical-align: middle; color: #49a5bf; }
#sns_share_box button			{ position: relative; width: 30px; height: 30px; overflow: hidden; text-indent: -999px; border-radius: 9.0em; background: #d1d1d1; }
#sns_share_box button:before	{ display: block; position: absolute; top: 0; left: 0; right: 0; bottom: 0; text-indent: 0; text-align: center; vertical-align: middle; line-height: 30px; font-family: 'icon'; font-size: 18px; color: #fff; font-weight: normal; }

#sns_share_box button.ico-facebook:before	{ content: "\ea90"; }
#sns_share_box button.ico-twitter:before	{ content: "\ea96"; }
#sns_share_box button.ico-kakao:before		{ content: "\e96b"; }

#sns_share_box button.ico-facebook:hover		{ background: #365899; }
#sns_share_box button.ico-twitter:hover			{ background: #00abf1; }
#sns_share_box button.ico-kakao:hover			{ background: #ffeb00; }
#sns_share_box button.ico-kakao:hover:before	{ color: #3c1e1e; }