@charset "utf-8";

body			{ border-top: 4px solid; }
.fix-layout		{ position: relative; max-width: 1100px; margin: 0 auto; }

header				{ position: relative; height: 100px; border-bottom: 1px solid #e1e1e1; background: #fff; }
header h1			{ line-height: 100px; }
header h1 img		{ max-height: 40px; vertical-align: middle; }
header h1 span		{ display: inline-block; height: 40px; line-height: 40px; vertical-align: middle; text-align: center; font-size: 24px; font-weight: 600; color: #333; padding-left: 8px;}
header h1 a:hover	{ text-decoration: none; }

#footer			{ border-top: 1px solid #e1e1e1; }

#search_box								{ position: absolute; top: 50%; bottom: 0; right: 0; left: 400px; height: 40px; margin-top: -20px; }
#search_box fieldset					{ position: relative; height: 100%; padding-right: 80px; }
#search_box fieldset input[type="text"]	{ position: relative; width: 100%; height: 40px; box-sizing: border-box; border: 4px solid; text-indent: 10px; }
#search_box fieldset button				{ position: absolute; top: 0; right: 0; height: 40px; padding: 0 20px; font-size: 14px; }
#search_box fieldset button:hover		{  }


section.body-box			{ display: table; position: relative; width: 100%; min-height:500px }
section.body-box > *		{ display: table-cell; position: relative; vertical-align: top; }

nav			{ width: 200px; background: #f1f2f3; padding-bottom: 20px; }
nav:before,
nav:after		{ content: ""; display: block; position: absolute; top: 0; bottom: 0; width: 1px; background: #e1e1e1; z-index: 0; }
nav:before		{ left: 0; }
nav:after		{ right: 0; }

nav ul				{ display: block; position: relative; z-index: 1; }
nav li				{ position: relative; }
nav li a			{ display: block; position: relative; padding: 10px 15px; color: #fff; font-size: 14px; font-weight: 600; border-bottom: 1px solid; }
nav li a:hover			{ text-decoration: none; }
nav li a:hover:before	{ content: ""; display: block; position: absolute; top: 0; left: 0; right: 0; bottom: 0; border: 1px solid; border-left-width: 0; border-right-width: 0; }

nav li.on:before		{ content: ""; display: block; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 1; }
nav li.on:after		{ content: ""; display: block; position: absolute; width: 0; height: 0; border: 20px solid transparent; border-right-color: #fff; top: 50%; margin-top: -20px; right: 0; }
nav li.on a			{ text-decoration: none; }


footer						{ position: relative; clear: both; border-top: 1px solid #e1e1e1; }
footer > .fix-layout		{ padding: 20px 10px; box-sizing: border-box; }
#copyright	{ clear: both; color: #999999; text-align: center; padding: 10px 0; }



#body:after			{ content: ""; display: block; position: absolute; top: 0; right: 0; width: 1px; height: 70px; background: #e1e1e1; }
#body				{ padding: 20px 30px; }
#body h2			{ font-size: 14px; border: 3px solid #e1e1e1; padding: 5px 10px; }
#body h2 strong			{  }
#body h2 strong:before	{ content: "\""; }
#body h2 strong:after	{ content: "\" "; }
#body h2 em				{ font-style: normal; color: #eb531f; }

#body article		{ position: relative; padding: 50px 0; border-bottom: 1px solid #e1e1e1; overflow: hidden; }
#body article h3	{ font-size: 18px; margin-bottom: 20px; }
#body article h3 span			{ color: #888; font-size: 12px; font-weight: normal; font-family: 'Dotum'; }
#body article h3 span:before	{ content: "[ "; }
#body article h3 span:after		{ content: " ] "; }
#body article h3 span em		{ font-style: normal; }

#body article ul				{ display: block; overflow: hidden; font-family: 'Dotum';  }
#body article li				{ display: block; position: relative; padding: 5px 0; margin-bottom: 10px; }
#body article li a				{ display: block; position: relative; text-decoration: underline; color: #00c; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; margin-right: 100px; }
#body article li a.info			{ display: block; position: relative; color: #009000 !important;  margin-right: 0; white-space: normal; text-decoration: none; }
#body article li a.info:hover	{ text-decoration: underline; }
#body article li em				{ display: block; position: absolute; width: 100px; height: 80px; line-height: 80px; overflow: hidden; border: 1px solid #e1e1e1; background: #fafafa; top: 0; left: 0; }
#body article li span			{ display: block; position: absolute; width: 120px; right: 0; top: 5px; overflow: hidden; color: #999; font-size: 11px; line-height: 21px; }
#body article li div			{ display: block; overflow: hidden; text-overflow: ellipsis; line-height: 16px; height: 48px; text-align: left; word-wrap: break-word; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }

#body article li em + a				{ min-height: 80px; margin-left: 120px; }

#body article li em + a + span + a.info,
#body article li em + a + a.info		{ position: absolute; top: 30px; left: 120px; right: 0; }
#body article li div + a.info			{ padding-top: 5px; }

#body article li a + div			{ padding-top: 10px; }
#body article li em + a + div,
#body article li em + a + span + div	{ margin-left: 120px; margin-top: -50px; padding-top: 0; }

#body article ul li h4 { font-size: 15px; font-weight: bold;}
#body article ul li .files {width: 100%; padding: 0;}
#body article ul li .files li {width:300px; height: 30px; float:left; padding: 5px;}

@media all and (max-width: 640px) {
	#body article ul li .files li {width:100%;}
}

#body article .btn-more { display: block; position: relative; float: right; margin-top: 30px; color: #0000cc; padding-right: 20px; margin-right: 10px; }
#body article .btn-more:before {
    content: "";
    display: block;
    position: absolute;
    width: 0;
    height: 0;
    top: 50%;
    right: 3px;
    margin-top: -5px;
    border: 5px solid transparent;
    border-left-color: #ffffff;
    z-index: 1;
}
#body article .btn-more:after {
    content: "";
    display: block;
    position: absolute;
    width: 0;
    height: 0;
    top: 50%;
    right: 0;
    margin-top: -5px;
    border: 5px solid transparent;
    border-left-color: #ea4848;
}

@media all and (max-width: 1100px) { 
	section.body-box			{ display: block; width: auto; padding-left: 150px; min-height: 320px; }
	section.body-box > *		{ display: block; }
	nav							{ position: absolute !important; top: 0; left: 0; bottom: 0; width: 150px; overflow-y: auto; }
	#body:after					{ display: none; }
}



/*********************************************************************************************
	COLOR SET :: 기본 컬러 색상

	- Default		: #4666a6
	- Midium		: #294c90
	- STRONG		: #0e2d6a
	- Hard STRONG	: #083388
*********************************************************************************************/

/** Default */
body									{ border-color: #1254b3; }
#search_box fieldset input[type="text"]	{ border-color: #1254b3; }
#search_box fieldset button				{ background: #1254b3; }
nav li									{ background: #1254b3; }
#body h2 strong							{ color: #1254b3; }


/** Midium */
#search_box fieldset button				{ border-color: #1254b3; }
#search_box fieldset button:hover		{ background: #49a5bf; }


/** STRONG */
nav li a:hover:before				{ border-color:#1254b3; }


/** Hard STRONG */
nav li a							{ border-bottom-color: #157d9a; }
nav li a:hover						{ background: #157d9a; }
nav li.on a							{ background: #157d9a; }



@media all and (max-width: 640px) { 
	header h1		{ text-align: center; line-height: 50px; }
	#search_box		{ position: relative; left: auto; margin: 0 10px; width: auto; }

	section.body-box	{ padding-left: 0; }

	nav			{ position: relative !important; top: auto; left: auto; bottom: auto; right: auto; width: auto; overflow-y: hidden; padding-bottom: 0; }
	#gnb		{ position: relative; text-align: left; }
	#gnb.on		{ padding-left: 100px; }
	#gnb li		{ display: inline-block; background: none; }
	#gnb li a	{ color: #333; border-bottom: none; }
	#gnb li a:hover	{ background: none; }
	#gnb li a:hover:before	{ display: none; }

	#gnb li.on			{ position: absolute; width: 100px; top: 0; left: 0; }
	#gnb li.on a		{ color: #fff; }
	#gnb li.on:after	{ border-right-color: #f1f2f3; }

	#body	{ padding: 20px 10px; }
}