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

/*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: #fff; background: #000; 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 #000; 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; 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; }

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

/*Section Style*/
section	{ position: relative; margin-top: 90px; }
section.contDetail { margin-top: 0; }

/*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; }

/*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; }

/*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;}


/*반응형*//*반응형*//*반응형*//*반응형*/
@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: 20px;}
	
	/*GNB Menu Style*/
	#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 > 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) {
	/*Common Style*/
	.fix-layout	{ position: static; }
	
	/*Section Style*/
	section	{ margin-top: 70px; }
	
	/*header*/
	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; }
	
	/*Sub Page Style*/
	#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; }
	
	/*GNB Menu Style*/
	/*#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'; }

	/* lnb */
	#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;}
}

@media all and (max-width: 400px) {
	/*header*/
	header #site_search_box	{ width: 100px; }
}