﻿@charset "utf-8";


/* Reset */
body { margin:8px 0 0 0; text-align: center; 
	   font-family:Tahoma, Sans-serif; font-size:.75em; background:#fff; color:#000;
	   background-image: url(../img/white_bg.jpg); background-repeat: repeat-x; }

/* Layout Base */
#wrap { width: 878px; margin: 0 auto; text-align: left; }
#header { width: 878px; height:82px; background-image:url(../img/top-bg.jpg);}
#flash { width:878px; height:254px; float:left; }
#visual { width: 878px; height:100px; clear:both; background-image:url(../img/visual.png); }
#visualsub { width: 878px; height:10px; clear:both; background-image:url(../img/visual.png); }
#pagehead { width: 878px; height:30px; clear:both; background-image:url(../img/pagehead.png); }

#shwl { width: 9px; height:240px; float:left; background-image:url(../img/shwl.png); }
#shwr { width: 9px; height:240px; float:left; background-image:url(../img/shwr.png); }

#subcontentwrap { width: 710px; float:left }
#content { width: 860px; padding:10px; float:left; background:#fff; }
#contentsub { width: 690px; padding:10px; float:left; background:#fff; border-top:4px solid #999; }
#submenuTitle { border-bottom: 10px solid #5c5c5c; margin: 0 -10px 0 0; padding: 10px 0 0 0; color: #fff; font-size: 16px; text-align: center; background: #555 url(../img/px1.png) repeat-x 0 -90px; }
#submenu { width: 141px; height: 240px; padding: 0; float:left;  }



#submenu ol { width:150px; margin: 0; padding:0; float:left; list-style: none;  }
#submenu li { position: relative; }
#submenu li a { font-size:12px; color: #666; border-left: 5px solid #5c5c5c; border-top: 1px solid #5c5c5c; font-weight:900;  
			 padding: 16px 0 6px 12px; display:block; text-decoration:none;}
#submenu li a:hover, #submenu li a:focus { color: #333; border-left: 5px solid #999; background:#E4DEB1; }


#submenu li.on a{background:#E4DEB1;}
#submenu li.on a:hover,
#submenu li.on a:focus{}


#submenu li ul { width:150px; margin: 0; padding:0; clrar:both; list-style: none; display:block; position:relative; overflow:hidden;}  
#submenu li ul li a { font-size:10px; color: #fff; padding: 6px 12px 6px 0 ; text-align:right; display:block; text-decoration:none; background: #333 url(../img/px1.png) repeat-x 0  -90px !important; border-left: 15px solid #5c5c5c; font-weight:100; }
#submenu li ul li a:hover { color: #333; solid #999; border-left: 15px solid #999; background:#ccc; background: #777 url(../img/px1.png) repeat-x 0 -90px; }
#submenu li.on ul li.on a {color : #F8FD1A !important;}



.titanuim a:link {text-decoration: none; color: #999;}
.titanuim a:visited  {text-decoration: none; color: #999;}
.titanuim a:active  {text-decoration: none; color: #999;}
.titanuim a:hover  {text-decoration: underline; color: #555;}


/* Header */
#logo { width: 690px; height: 80px; float:left; }
#headgnb { width: 71px; height:80px; float:right;  }
#searchdiv { width: 160px; float:right; }



.logo h1 {
	margin:0;
	padding:0;
}

.langBar {
	float:right;
	position:relative;
	padding:5px 0 0 0;
	width:160px;
}

.langTxt {
	float:right;
	color:#888;
	font-size:11px;
	font-family:'돋움', arial;
	border-right:1px solid #888;
	padding:0 7px 0 0;
	margin:6px 7px 0 0;
}

.langSelect {
	float:right;
}

.langSelect a {
	background:url(../img/selectLang.png) no-repeat left top;
	width:90px;
	height:24px;
	display:block;
	text-decoration:none;
	font-size:0px;
}

.langSelect a:hover {
	background-position:left bottom;
}

.langSelect a span {
	visibility:hidden;
}

.lang {
	background:url(../img/langBg.gif) no-repeat;
	position:absolute;
	z-index:200;
	margin:13px 0 0 0;
	display:none;
	left:70px;
	top:8px;
	_left:70px;
}

.lang ul {
	background:url(../img/langBottom.gif) no-repeat left bottom;
	list-style:none;
	position:relative;
	z-index:200;
	margin:0 0 -10px 0;
	padding:10px 0 10px 0;
}

.lang ul li {
	position:relative;
	z-index:200;
}

.lang ul li a {
	position:relative;
	z-index:200;
	background:none;
	display:block;
	font-size:11px;
	color:#fff;
	font-family:tahoma;
	line-height:18px;
	padding:0 0 0 8px;
	width:82px;
	height:20px;
	border-bottom:1px solid #888;
}

.lang ul a:hover {
	background:#666;
	display:block;
	font-size:11px;
	color:#ddd;
}


li.search {
	list-style:none; 
	background:url(../img/searchbox.png) no-repeat;
	float:right;
	height:31px;
	padding:8px 0 0 0;
	position:relative; }
	
.searchBox {
	width:160px;
	height:25px;
	padding:3px 0 0 0;
}
	
.searchBox input {
	border:none;
	background-color:transparent;
	margin:0 0 0 10px;
	color:#ccc;
	width:100px;
	vertical-align:top; }

.searchBox .submit {
	border:none;
	background:url(../img/searchbtn.gif) no-repeat;
	width:20px; height:20px;
	margin:0 0 0 0; }
	

/* GNB */
#gnbhome { width: 60px; padding:0; height:40px; float:left; }
#gnbmain {
	width: 654px;
	float:left;
}

#gnb { width: 878px; height:40px; clear:both; }

#footergnb h3{ float:left; 
				 margin:0; padding:0 0 0 10px;
		        border-right:1px solid #ccc;  
		       }
#footergnb a { padding:0px 16px 0 16px; height:14px; display:inline-block; text-decoration:none !important; color:#999; }
#footergnb a:hover {color:#777; }
#footergnb h2 {font-size:12px; margin:0 0 5px 0;}
#footergnb ul {margin:0; padding:0; list-style:none;}
#footergnb li { margin-bottom:0px;}




#nav_user{
	width : 654px;
	margin : -3px 0 0 0;
	padding : 0 0 0 0;
}

#nav {
	font-family: arial, tahoma;
	margin: 0;
	padding: 6px 8px 0 20px;
	background: none url(img/px1.png) repeat-x;
	line-height: 100%;
	width: 654px;
}

#nav li {
	margin: 0 5px;
	padding: 0 0 15px;
	float: left;
	position: relative;
	list-style: none;
}

/* main level link */
#nav a {
	font-weight: bold;
	color: #eee;
	text-decoration: none;
	display: block;
	padding:  7px 20px;
	margin: 0;

	-webkit-border-radius: 1.5em;
	-moz-border-radius: 1.5em;
}
#nav a:hover { 
	background: #000;
	color: #fff;
}

/* main level link hover */
#nav .current a, #nav li:hover > a {
	background: #555 url(../img/px1.png) repeat-x 0 -40px;
	color: #555;

	-webkit-box-shadow: 0 1px 1px rgba(0,0,0, .2);
	-moz-box-shadow: 0 1px 1px rgba(0,0,0, .2);
	box-shadow: 0 1px 1px rgba(0,0,0, .2);
	text-shadow: 0 1px 0 rgba(255,255,255, 1);
}

/* sub levels link hover */
#nav ul li:hover a, #nav li:hover li a {
	background: none;
	border: none;
	color: #555;
	-webkit-box-shadow: none;
	-moz-box-shadow: none;
}

#nav ul a:hover {
	background: #aaa url(../img/px1.png) repeat-x 0 -100px !important;
	color: #fff !important;
	-webkit-border-radius: 0;
	-moz-border-radius: 0;
	text-shadow: 0 1px 1px rgba(0,0,0, .1);
}

/* dropdown */
#nav li:hover > ul {
	display: block;
}

/* level 2 list */
#nav ul {
	display: none;
	margin: 0;
	padding: 0;
	width: 160px;
	position: absolute;
	top: 32px;
	left: 0;
	background: #ccc url(../img/px1.png) repeat-x 0 0;
	border: solid 1px #b4b4b4;

	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;

	-webkit-box-shadow: 0 1px 3px rgba(0,0,0, .3);
	-moz-box-shadow: 0 1px 3px rgba(0,0,0, .3);
	box-shadow: 0 1px 3px rgba(0,0,0, .3);
}
#nav ul li {
	float: none;
	margin: 0;
	padding: 0;
	border-top:solid 1px #fff;
	border-bottom:solid 1px #ccc;
}

#nav ul a {
	font-weight: normal;
	text-shadow: 0 1px 0 #fff;
}

/* level 3+ list */
#nav ul ul {
	left: 155px;
	top: -2px;
}

/* rounded corners of first and last link */
#nav ul li:first-child > a {
	-webkit-border-top-left-radius: 9px;
	-moz-border-radius-topleft: 9px;

	-webkit-border-top-right-radius: 9px;
	-moz-border-radius-topright: 9px;
}
#nav ul li:last-child > a {
	-webkit-border-bottom-left-radius: 9px;
	-moz-border-radius-bottomleft: 9px;

	-webkit-border-bottom-right-radius: 9px;
	-moz-border-radius-bottomright: 9px;
}

/* clearfix */
#nav:after {
	content: ".";
	display: block;
	clear: both;
	visibility: hidden;
	line-height: 0;
	height: 0;
}
#nav {
	display: inline-block;
} 
html[xmlns] #nav {
	display: block;
}
 
* html #nav {
	height: 0;
}


/* location */
.location {
	width:705px; background:url(../img/locationHead.gif); float:left; padding:0 0 0 5px;
}

.location ul {
	margin:0;
	padding:0;
	list-style:none;
}

.location ul li {
	background:url(../img/locationArrow.gif) no-repeat left top;
	float:left;
	height:26px;
	padding:0 15px 0 15px;
}

.location ul li a {
	font-size:12px;
	color:#aaa;
	font-weight:100;
	text-decoration:none;
	line-height:26px;
	font-family:arial;
	}

.location ul li a:hover {
	color:#999;
}

.location ul li.home a {
	background:url(../img/locationHome.gif) no-repeat left top;
	display:block;
	width:120px;
	height:25px;
}

.location ul li.home a:hover {
	background-position:left bottom;
}

.location ul li.home a span {
	display:none;
}


/* Footer */

#footer { width: 100%; height:100px; clear:both; background-image:url(../img/bottom.gif); }
#address { width: 878px; margin: 7px auto; text-align: right; font-style:normal; font-family: arial, tahoma; color:#aaa; }
#footerlogo { margin: 10px 0 10px 10px; width:150px; height:80px; float:left; }
#footerwrap { width:718px; height:100px; float:left; }
#footergnbgroub {float:right;}
#footergnb { height: 20px; float:left; margin:0; padding:5px 0 0 0px; border-right:1px solid #ccc; }
#footerfamily { width:160px; height: 24px; float:right; }
#footertext { width:660px; padding:85px 0 0 18px; clear:both; font-family: tahoma; font-size:11px; color:#aaa; }


/* Font for contents */

body { FONT-FAMILY: Tahoma; FONT-SIZE: 12px; LINE-HEIGHT: 1.4 }
h1 { FONT-FAMILY: Tahoma; FONT-SIZE: 20px; COLOR: #004000 }
h2 { FONT-FAMILY: Tahoma; FONT-SIZE: 28px; COLOR: #FF8000 }
h3 { FONT-FAMILY: Tahoma; FONT-SIZE: 18px; COLOR: #00CA65 }
h4 { FONT-FAMILY: Tahoma; FONT-SIZE: 16px; COLOR: #004080 }
h5 { FONT-FAMILY: Tahoma; FONT-SIZE: 14px; COLOR: #0080C0 }
h6 { FONT-FAMILY: Tahoma; FONT-SIZE: 12px; COLOR: #8080C0 }

p { FONT-FAMILY: Tahoma; FONT-SIZE: 12px; LINE-HEIGHT: 1.4 }

li { FONT-FAMILY: Tahoma; FONT-SIZE: 12px; LINE-HEIGHT: 1.4  }