@charset "UTF-8";
/* CSS Document */
/* Responsive Web Design Layout CSS */

	#nav, .nav ul {
		margin: 0;
		padding: 0;
		list-style: none;
	}
	
	#nav {
		width: 100%;
		margin: 0 auto;
		text-align: center;
		letter-spacing: 0.05em;
	}
	
	#nav:before, #nav:after {
		content: "";
		display: table;
	}
	
	#nav:after {
		clear: both;
	}
	
	#nav {
		zoom:1;
	}
	
	#nav li {
		float: right;
		position: relative;
	}
	
	/* navmenu text design */
	#nav a {
		float: left;
		padding: 6px 10px;
		font-size: 18px;
		color: #333;
	}
	
	/* navmenu hover text color */
	#nav a:hover {
		color: #999;
	}
	
	/* dropdown base bg design (block design,hide dropdown,bg color design) */
	#nav ul {
		margin: 20px 0 0 0;
		_margin: 0; /*IE6 only*/
		opacity: 0;
		visibility: hidden;
		position: absolute;
		top: 30px;
		left: 0px;
		z-index: 9999;
		background: #444;
		background: -moz-linear-gradient(#444, #111);
		background-image: -webkit-gradient(linear, left top, left bottom, from(#444), to(#111));
		background: -webkit-linear-gradient(#444, #111);    
		background: -o-linear-gradient(#444, #111);	
		background: -ms-linear-gradient(#444, #111);	
		background: linear-gradient(#444, #111);
		-moz-box-shadow: 0 -1px rgba(255,255,255,.3);
		-webkit-box-shadow: 0 -1px 0 rgba(255,255,255,.3);
		box-shadow: 0 -1px 0 rgba(255,255,255,.3);	
		-moz-border-radius: 3px;
		-webkit-border-radius: 3px;
		border-radius: 3px;
		-webkit-transition: all .2s ease-in-out;
		-moz-transition: all .2s ease-in-out;
		-ms-transition: all .2s ease-in-out;
		-o-transition: all .2s ease-in-out;
		transition: all .2s ease-in-out;  
	}
	
	/* dropdown start */
	#nav li:hover > ul {
		opacity: 1;
		visibility: visible;
		margin: 0;
	}
	
	/* dropdown 2nd design */
	#nav ul ul {
		top: 0;
		left: 150px;
		margin: 0 0 0 20px;
		_margin: 0; /*IE6 only*/
		-moz-box-shadow: -1px 0 0 rgba(255,255,255,.3);
		-webkit-box-shadow: -1px 0 0 rgba(255,255,255,.3);
		box-shadow: -1px 0 0 rgba(255,255,255,.3);		
	}
	
	/* dropdown 1st bg design */
	#nav ul li {
		float: none;
		display: block;
		_line-height: 0; /*IE6 only*/
		-moz-box-shadow: 0 1px 0 #111, 0 2px 0 #666;
		-webkit-box-shadow: 0 1px 0 #111, 0 2px 0 #666;
		box-shadow: 0 1px 0 #111, 0 2px 0 #666;
	}
	
	/* dropdown 1st bg reset */
	#nav ul li:last-child {   
		-moz-box-shadow: none;
		-webkit-box-shadow: none;
		box-shadow: none;    
	}
	
	/* dropdown 1st text design #1 */
	#nav ul a {    
		padding: 8px;
		width: 120px;
		_height: 10px; /*IE6 only*/
		display: block;
		white-space: nowrap;
		float: none;
		font-size:15px;
		color: #f5f5f5;
		text-transform: none;
	}
	
	/* dropdown base hover bg color */
	#nav ul a:hover {
		color: #fff;
		background-color: #ccf6ff;
		background-image: -moz-linear-gradient(#ccf6ff, #59a6e5);	
		background-image: -webkit-gradient(linear, left top, left bottom, from(#ccf6ff), to(#59a6e5));
		background-image: -webkit-linear-gradient(#ccf6ff, #59a6e5);
		background-image: -o-linear-gradient(#ccf6ff, #59a6e5);
		background-image: -ms-linear-gradient(#ccf6ff, #59a6e5);
		background-image: linear-gradient(#ccf6ff, #59a6e5);
	}
	
	/* dropdown base first-child hover bg design */
	#nav ul li:first-child > a {
		-moz-border-radius: 3px 3px 0 0;
		-webkit-border-radius: 3px 3px 0 0;
		border-radius: 3px 3px 0 0;
	}
	
	/* arrow design for "dropdown > navmenu"  */
	#nav ul li:first-child > a:after {
		content: '';
		position: absolute;
		left: 40px;
		top: -5px;
		border-left: 5px solid transparent;
		border-right: 5px solid transparent;
		border-bottom: 5px solid #444;
	}
	
	/* arrow design for "2nd dropdown > 1st dropdown"  */
	#nav ul ul li:first-child a:after {
		left: -5px;
		top: 50%;
		margin-top: -5px;
		border-left: 0;	
		border-bottom: 5px solid transparent;
		border-top: 5px solid transparent;
		border-right: 5px solid #444;
	}
	
	/* hover arrow color for "dropdown > navmenu"  */
	#nav ul li:first-child a:hover:after {
		border-bottom-color: #444; 
	}
	
	/* hover arrow color for "2nd dropdown > 1st dropdown"  */
	#nav ul ul li:first-child a:hover:after {
		border-right-color: #444; 
		border-bottom-color: transparent; 	
	}
	
	/* dropdown base last-child hover bg design */
	#nav ul li:last-child > a {
		-moz-border-radius: 0 0 3px 3px;
		-webkit-border-radius: 0 0 3px 3px;
		border-radius: 0 0 3px 3px;
	}
	
	/* prepare for Mobile */
	#nav-trigger {
		display: none;
	}
	
	@media screen and (min-device-width: 0px) and (max-device-width: 768px) {
		
		/* nav-wrap */
		#mob-trig {
			position: relative;
		}

		#mob-trig * {
			-moz-box-sizing: border-box;
			-webkit-box-sizing: border-box;
			box-sizing: border-box;
		}

		/* nav menu button design*/
		#nav-trigger {
			display: block; /* show nav icon */
			width: 40px;
			height: 40px;
			padding:0;
			position:fixed;
			bottom: 100px;
			right: 6px;
			z-index: 9999;
		}
		#nav-trigger img {
			width:100%;
			height:auto;
		}
		
		/* nav base design */
		#nav {
			margin: 0;
			padding: 0;
			padding-bottom: 20px;
			position: fixed;
			bottom: 0;
			right: 0;
			width: 100%;
			height:100px;
			text-align: left;
			z-index: 9998;
			background-color: #fff;
			border-top:1px solid #a9a9a9;
			filter: alpha(opacity=95);
			opacity:0.95;
			
			display: none;
			-moz-box-shadow: none;
			-webkit-box-shadow: none;
			box-shadow: none;
		}
		
		/* nav 1st 2nd word position design */
		#nav ul {
			display:none;
		}
		/* nav base word design */
		#nav li {
			position: static;
			display: block;
			width:33%;
			height:50%;
			float: left;
			margin: 0;
		}
		/* nav ul word color style(for iOS) */
		#nav a{
			color: #333;
			display: block;
			width:100%;
			height:100%;
			float: none;
			font-size:14px;
			padding: 7px 0;
			text-align:center;
		}
	}
	
	@media screen and (min-device-width: 481px) and (max-device-width: 768px) {
		#nav {
			height:200px;
		}
	}