@charset "utf-8";

/**
 * KATOHTEK.CO
 * siteindex.css
 *
 * @Author : ND&I
 * @Version : 2007-11-28
 * @Encoding : utf-8 ( all files )
 *
 * @xml declaration :
 * 	all pages : [ declared ]; Quirks Mode in IE less than 6.0 ver.
 *
 * @layout type :
 * 	solid ( max width 850px )
 *		
 * @unit :
 * 	em, %(font), (px)
 *
 * @no use :
 * 	using width or height and padding or border at the same time,
 * 	and Image Replacement with using 'text-indent' or 'display: none'.
 **/

@import url("../default.css");
@import url("../layout_siteindex.css");
@import url("../common.css");

/* Clearfix
=================================*/

#topNav:after {
 content: "."; 
 display: block; 
 height: 0; 
 clear: both; 
 visibility: hidden;
}

#topNav {
	display: inline-block;
}

/* Hide from Mac IE \*/
#topNav {
	*height: 1%;
	display: block;
}
/**/

/* =========================================
 * HEADER
 * ========================================= */

div#header ul {
	float: right;
}

	div#header ul li {
		float: left;
		margin-right: 1em;
		display: inline;
	}
	
		div#header ul li a {
			padding-left: 1.9em;
			display: block;
			color: #737373;
			text-decoration: none;
			line-height: 49px;
		}
		
		/* set icon */
		div#header ul li#headNav_sitemap a {	 background: url(../../img/top/head_nav_sitemap.gif) no-repeat left center }
		div#header ul li#headNav_recruit a { background: url(../../img/top/head_nav_recruit.gif) no-repeat left center }
		
		div#header ul li a:hover {
			text-decoration: underline;
		}

/* =========================================
 * MAIN NAVIGATION
 * ========================================= */

div#mainNav {
	padding: 2px 0;
}

	div#mainNav div#swf {
		float: left;
		width: 230px;
		height: 207px;
	}	
	
	div#mainNav ul {
		float: left;
		padding-bottom: 2px;
		width: 385px;
	}
	
		div#mainNav ul li {
			float: left;
			padding-left: 1px;
		}
								
			/* rollover */
			div#mainNav ul li a:hover img {
				opacity: .8;
				filter: alpha(opacity=80);
			}
		
/* =========================================
 * TOP NAVIGATION
 * ========================================= */

ul#topNav {
	clear: left;
	margin-right: 2px;
	padding: 8px;
	background: url(../../img/top/top_nav_bg.gif) repeat;
}

	ul#topNav li {
		float: left;
		margin-right: 11px;
		padding-bottom: .3em;
		width: 192px;	/* for IE less than 6 ver */
		height: 140px;	/* for IE less than 6 ver */
		border: solid #FFF 1px;
	}
	
	* > ul#topNav li {	/* for modern browser */
		width: 190px;
		height: auto;
		min-height: 140px;
	}
	
	/* set bg */
	ul#topNav li#topNav_item { background: #FFF url(../../img/top/top_nav_01_bg.png) no-repeat left top }
	ul#topNav li#topNav_comp { background:#FFF url(../../img/top/top_nav_02_bg.png) no-repeat left top }
	ul#topNav li#topNav_inq { margin: 0; background: #FFF url(../../img/top/top_nav_03_bg.png) no-repeat left top }
	
		ul#topNav li h2 {
			padding: .3em 0 0 1.6em;
		}
	
		ul#topNav ul {
			clear: none;
			padding: 0 0 0 19px;	/* reset padding-bottom */
		}
		
			ul#topNav ul li {
				float: none;
				margin: .5em .4em 0;
				padding-bottom: .2em;
				width: auto;
				height: auto;
				min-height: 0;
				background: url(../../img/common/dtd_line.gif) no-repeat left bottom;
				border: none;
				line-height: 1.4;
			}
			
				ul#topNav ul li a {
					padding-left: .9em;
					display: block;
					height: 100%;
					text-decoration: none;
				}
			
				/* set icon */
				ul#topNav li#topNav_item ul li a { background: url(../../img/top/icon_red.gif) no-repeat left .5em }
				ul#topNav li#topNav_comp ul li a { background: url(../../img/top/icon_blue.gif) no-repeat left .5em }
				ul#topNav li#topNav_inq ul li a { background: url(../../img/top/icon_green.gif) no-repeat left .5em }
				
				ul#topNav ul li a:hover {
					color: #999;
				}
				
/* =========================================
 * NEWS & IMPORTANT NEWS
 * ========================================= */

h2.newsArea {
	margin: 12px 0 0 10px;
}

p#newsBtn {
	margin-top: -1.3em;
	padding: .1em 1em 0 0;
	text-align: right;
}

	/* rollover */
	p#newsBtn a:hover img {
		opacity: .8;
		filter: alpha(opacity=80);
	}

ol.news {
	margin: -.5em 9px 0 10px;
	padding-top: .8em;
	border: solid #B6B6B6 1px;
	border-top: none;
}

	ol.news li {
		margin: 0 0 .5em .6em;
		padding-bottom: .3em;
		background: url(../../img/common/dtd_line.gif) no-repeat left bottom;
	}
	
		ol.news li dl {
			display: inline;
		}
		
			ol.news li dl dt {
				padding: 0 1em;
				display: inline;
				background: url(../../img/common/icon01.gif) no-repeat .3em center;
			}
			
			ol.news li dl dd {
				display: inline;
			}
			
				ol.news li dl dd a:hover {
					text-decoration: none;
				}
			
p#push {
	float: left;
	margin: 12px 0 0 10px;
	padding: 1px;
	display: inline;
	border: solid #B6B6B6 1px;
}

/* =========================================
 * SUB
 * ========================================= */

div#sub h2,
div#sub p,
div#sub dl {
	float: left;	/* fixed the border or width */
	margin-bottom: .6em;
	margin-left: 17px;
	display: inline;
}

div#sub .bannerSmall {
	padding: 3px;
	background: #FFF;
	border: solid #B4B4B4 1px;
}

div#sub .bannerLarge {
	background: url(../../img/top/sub_banner_bg.png) repeat-x left bottom;
	border: solid #FFF 1px;
}

div#sub dl {
	width: 193px;
}

	div#sub dl dd {
		font-size: 80%;
		letter-spacing: -.1em;
	}
	
/* rollover */
div#sub a:hover img {
	opacity: .8;
	filter: alpha(opacity=80);
}