@charset "utf-8";
/* CSS Document */

@import url(http://fonts.googleapis.com/earlyaccess/nanumgothic.css);

/***************************************************
					reset
***************************************************/ 
html,body {min-height:100%; margin:0}
body,p,h1,h2,h3,h4,h5,h6,ul,ol,li,dl,dt,dd,table,th,td,form,fieldset,legend,input,textarea,button,select {margin:0;padding:0}  
body,input,textarea,select,button,table,li {font-family:'Nanum Gothic','맑은 고딕',Malgun Gothic,돋움,Dotum,arial,sans-serif;font-size:15px;}  
header,footer,section,article,aside,nav,menu,hgroup,figure,figcaption {display:block; margin:0; padding:0;}
img,fieldset {border:0; margin:0; padding:0;}  
input,select,button {vertical-align:middle;}
ul,ol {list-style:none;font-size:0;}

em,address,i,cite {font-style:normal;}
a {text-decoration:none;}
* html {height:1px;}

@media only screen and (min-width:640px) and (max-width:768px){
body,input,textarea,select,button,table,li {font-size:14px;}
}

@media only screen and (max-width:639px){
body,input,textarea,select,button,table,li  {font-size:13px;}
}

/***************************************************
					layout
***************************************************/ 
.skip			{display:block;position:relative;}
.skip>a			{display:block;position:absolute;width:100%;height:1px;overflow:hidden;}
.skip>a:focus	{position:static;height:auto;}

.wrap			{position:relative;width:100%;}
.header			{position:relative;width:100%;border-bottom:1px solid #ddd;font-size:0;z-index:9999;}
.container		{position:relative;width:100%;max-width:965px;min-height:500px;margin:70px auto;line-height:180%;}
.footer			{position:relative;width:100%;}
.conBox			{position:relative;width:100%;max-width:965px;margin:0 auto;}
.wideBox		{position:relative;width:100%;background:#e9e9e9;}
.wideBox.nbg	{background:none;}
.sBox			{position:relative;width:100%;max-width:800px;margin: 0 auto;}

@media only screen and (max-width:1000px){
.container,
.conBox, 
.sBox			{width:96%;}
.container		{margin:50px auto;}
}

@media only screen and (max-width:769px){
.container		{margin:30px auto;}
}

@media only screen and (max-width:639px){
.container		{margin:20px auto;min-height:350px;}
}

/***************************************************
					header
***************************************************/
.logo							{position:relative;width:96%;max-width:965px;height:90px;margin:0 auto;z-index:9990;}
	.nav_util						{position:absolute;right:0;bottom:20px;}
	.nav_util>li					{float:left;padding-left:40px;background:url(/images/common/util_bar.gif) 20px 5px no-repeat;text-align:right;}
	.nav_util>li:first-child		{padding-left:0;background:none;}
	.nav_util>li a					{font-size:13px;color:#333;}
	.nav_util>li a:hover			{text-decoration:underline;}
	.nav_util .sitelink				{position:relative;}
	.nav_util .sitelink>a			{display:inline-block;width:100px;background:url(/images/common/select_down.png) right no-repeat;text-align:left;}
	.nav_util .sitelink.active>a	{background:url(../images/common/select_up.png) right no-repeat;}
	.nav_util .sitelink .othersite	{display:none;position:absolute;top:36px;left:20px;width:120px;border:1px solid #e6e6e6;border-top:1px solid #fff;background:#fff;z-index:9990;}
	.nav_util .othersite li a		{display:block;padding:10px 20px;text-align:left;}
	
.logo h1 {padding:25px 0 15px;}

.gnb							{display:inline-block;width:100%;border-top:1px solid #e6e6e6;text-align:center;}
	.nav							{width:100%;max-width:965px;margin:0 auto;}
	.nav li							{display:inline-block;position:relative;width:16%;height:20px;float:left;padding:20px 0;background:url(/images/common/nav_bar.gif) left no-repeat;text-align:center;}
	.nav li:first-child				{margin-left:2%;background:none;}
	.nav li a						{font-size:16px;font-weight:bold;text-transform:uppercase;color:#333;}
	.nav li:hover>a,
	.nav li a.active				{color:#3490fd;}
	.nav li.active>a				{color:#3490fd;}
	.nav li .subMenu				{display:none;position:absolute;top:60px;left:0;width:100%;border:1px solid #e6e6e6;border-top:none;background:#fff;}
	.nav li .subMenu li				{width:100%;height:auto;float:none;margin:0;padding:0;border-top:1px dashed #eee;background:none;}
	.nav li .subMenu li:first-child {border:none;}
	.nav li .subMenu li a			{display:block;width:100%;padding:20px 0;font-size:13.7px;font-weight:normal;}
	.nav li .subMenu li:first-child a {padding-top:10px;}

/* PC 화면 최적화 */
@media only screen and (min-width:999px){
	.nav li							{width:auto;float:left;padding:20px 51px;background:url(/images/common/nav_bar.gif) left no-repeat;}
	.old_ie .nav li					{padding:20px 43px;}
	.nav li:first-child				{margin-left:0;padding-left:0;background:none;}
	.nav li:last-child				{padding-right:0;}
	.nav li a						{font-size:17px;}
	.nav li .subMenu				{width:100%;top:60px;left:0px;}
	.nav li:first-child .subMenu	{width:165px;left:-30px;}
	.nav li:last-child .subMenu		{width:150px;left:0px;}
	.nav li .subMenu li a			{font-size:14.8px;}
}

@media only screen and (max-width:769px){
	.nav li a						{font-size:15px;}
}

@media only screen and (max-width:639px){
.logo							{height:60px;}
.logo h1						{padding:10px 0;}
.logo h1 img					{height:40px;}
.header .toggle_btn 			{position:absolute;top:15px;right:10px;padding:0;background:url(/images/common/mobile_menu.png) right 5px no-repeat;background-size:contain;font-size:30px;text-indent:-999px;}
.header .toggle_btn.selected	{background:url(/images/common/mobile_close.png) right 5px no-repeat;background-size:contain;}
.gnb							{text-align:center;}
	.nav							{padding:0;}
	.nav li							{display:inline-block;position:inherit;width:100%;height:auto;float:left;padding:0;border-top:1px solid #e6e6e6;background:url(/images/common/select_down.png) 95% 15px no-repeat;text-align:left;}
	.nav li:first-child				{margin-left:0;border-top:none;background:url(/images/common/select_down.png) 95% 15px no-repeat;}
	.nav li.active					{background:url(/images/common/select_up.png) 95% 15px no-repeat;}
	.nav li a						{display:block;margin-left:5%;padding:10px 0;font-size:14px;}
	.nav li .subMenu				{display:none;position:relative;top:0px;left:0;width:100%;border:none;border-top:1px dashed #eee;background:#f6f6f6;}
	.nav li .subMenu li				{width:100%;height:auto;float:none;margin:0;padding:0;border-top:none;background:none;}
	.nav li .subMenu li:first-child {border:none;}
	.nav li .subMenu li a			{display:block;width:100%;margin-left:10%;padding:10px 0;font-size:12.7px;font-weight:normal;}
	.nav li .subMenu li:first-child a {padding-top:10px;}
	.nav li:hover .subMenu			{display:none;}
}


/***************************************************
					footer
***************************************************/
.footer							{margin-top:-4px;background:#292c35;font-size:13px;line-height:160%;}
.footer .conBox					{width:100%;padding:50px 0;background:url(/images/common/logo_bottom.png) left no-repeat;color:#ccc;}
	.policy							{display:inline-block;margin-left:20%;}
	.policy li						{height:10px;float:left;padding:0 15px;border-left:1px solid #666}
	.policy li:first-child			{padding-left:0;border-left:none;}
	.policy li a					{display:block;margin-top:-4px;font-size:13px;color:#ccc;}
	.policy li a:hover				{color:#fff;}
	.information					{margin-left:20%;margin-top:20px;}
	.information .mail a			{color:#ccc;}
	.information .mail a:hover		{color:#eee;}
	.information .copy em			{color:#3490fd;}

@media only screen and (max-width:1100px){
.footer							{font-size:12px;}
.footer .conBox						{background-position:5%;background-size:12%;}
	.policy, .information			{margin-left:25%;}
	.policy .site					{display:none;}
}

@media only screen and (max-width:639px){
.footer							{width:90%;padding:15px 5%; font-size:10px;}
.footer .conBox					{background:none;padding:0;text-align:center;}
	.policy							{margin-left:0;}
	.policy li a					{font-size:11px;}
	.information					{margin-left:0;margin-top:10px;color:#aaa;}
.footer .br,
.footer .ceo ,
.footer .mail					{display:block;}
.footer .copy					{margin-top:10px;font-size:10px;color:#999;}
}

/***************************************************
					 common
***************************************************/
.tbl_basic					{width:100%;margin-bottom:20px;}
.tbl_basic table			{width:100%;border-top:2px solid #333;border-bottom:1px solid #333;border-collapse:collapse;}
.tbl_basic th, .tbl_basic td{padding:15px 0;border-top:1px solid #eee;}
.tbl_basic th				{min-width:60px;text-align:left;}
.tbl_basic .title			{font-size:18px;}
.tbl_basic .title			{color:#333;}
.tbl_basic .title a:hover	{color:#49b;}
.tbl_basic .inform			{display:block;position:relative;width:100%;margin-top:10px;font-size:15px;color:#666;}
.tbl_basic .inform .date	{}
.tbl_basic .inform .name	{}
.tbl_basic .inform .view	{position:absolute;right:0;font-size:13px;font-style:italic;color:#49b;}
.tbl_basic td a				{color:#333;}

.thcolor .bdt				{border-top:2px solid #39f;}
.thcolor th					{background:#f5f9ff;text-align:center;}
.thcolor td					{padding-left:30px;}

.buttonWrap		{width:100%;margin-top:20px;text-align:right;}
.button			{display:inline-block;padding:10px 30px;border:1px solid #333;background:#fff;font-size:18px;font-weight:bold;color:#333;cursor:pointer;}
.button.small	{padding:8px 15px;font-size:14px;}
.button:hover	{background:#f6f6f6;}
.button.dark	{background:#444;border:1px solid #333;color:#fff;}
.button.dark:hover {background:#333;}
.button.white	{border:1px solid #eee;background:transparent;color:#eee;}
.button.white:hover {border:1px solid #fff;color:#fff}

.button.ET		{background:#f52;border:none;color:#fff;}
.button.VP		{background:#6c6;border:none;color:#fff;}
.button.SC		{background:#18f;border:none;color:#fff;}

.blind			{position:absolute;top:0;left:0;width:1px;height:1px;overflow:hidden;visibility:hidden;font-size:0;line-height:0;}
.color			{color:#39f;}
.center			{text-align:center;}
.mobile			{display:none;}

/* 팝업관련 css는 popup.php 파일내에 작성*/

@media only screen and (max-width:768px){
.tbl_basic th,
.tbl_basic td			{border-top:1px solid #eee;padding:10px 0;}
.tbl_basic .title		{font-size:16px;}
.tbl_basic .inform		{font-size:13px;}
.thcolor td				{padding-left:20px;}

.buttonWrap		{margin-top:15px;}
.button			{padding:10px 25px;font-size:16px;}
.button.small	{padding:6px 12px;font-size:13px;}
}

@media only screen and (max-width:639px) {
.thcolor td				{padding-left:10px;}

.buttonWrap		{margin-top:10px;}
.button			{padding:8px 20px;font-size:14px;}
.button.small	{padding:5px 10px;font-size:12px;}

.pc				{display:none;}
.mobile			{display:block;}
}


/***************************************************
					   PC
***************************************************/ 
@media only screen and (min-width:769px){

}

/***************************************************
			 	 layout - tabletPC
***************************************************/ 
@media only screen and (min-width:640px) and (max-width:768px){
	
}


/***************************************************
			 	  layout - mobile
***************************************************/ 
@media only screen and (max-width:639px) {

}