@charset "utf-8";
/* ********************************************************************************************* 
	@CreateDate		:	20145.02.06																 
 	@ModifyDate		:																			 
 	@Description	:
	@Author			:	namu																	 
********************************************************************************************* */

/* ------------------------- SHOW HIDE & FLUID ------------------------- */
	.wrapper { 
		width: 100%; 
		position: relative;
		}
	.nav-wrap, .contents, footer { 
		margin: 0 auto; 
		width: 100%;
		box-sizing: border-box;
		}
	.nav-wrap { width: 100%; }
	.nav-wrap { display: none; }
	.nav-wrap nav, 
	.nav-wrap .logo { display: none; }
	.mobile .nav-wrap nav, 
	.mobile .nav-wrap .logo { display: block; }
	.desk .nav-wrap { display: block; }
	.mobile .nav-wrap { display: block; }
	.mobile .nav-wrap { background: #434953;}
	.wrapper .desmenu { display: none; }
	.desmenu { position: absolute; left: -0; top: 119px; }
	.line { display: none; }

/* ------------------------- Layout ------------------------- */
	.util { position: absolute; right: 0; width: 180px; top: 0;padding-top: 0;}
	.util a { 
		display: inline-block; 
		width: 48%;
		text-align: center; 
		padding-top: 18px;
		letter-spacing: -1px;
		color: #fff;
		}
	.logo { padding-top: 49px;}
	.logo a { 
		display: block;
		background: url('../image/common/bg.gif') repeat left top; 
		padding: 15px; 
		border-bottom: 1px solid #bebebe; 
		}
	footer { 
		background: #43484b; 
		color: #fff; 
		padding: 35px 10px; 
		font-size: 12px;
		position: relative;
		}
		footer .family-wrap { position: absolute; right: 10px; bottom: 10px; }
		
/* ------------------------- Navigation ------------------------- */	
	.toggle-menu { position: absolute; left: 0; top: 0; }
	.toggle-menu .oi[data-glyph=menu]:before {
		font-size: 19px;
		background: #012d6a;
		color: #fff;
		padding: 15px;
		}
	/*.nav-wrap { display: none; }
	.mobile-wrap .nav-wrap { display: block; }*/
	.mobile .nav-wrap .logo { text-align: center;  }
	.mobile .nav-wrap nav { display: none; }
	.mobile .nav-wrap nav.show  { 
		display: block; 
		position: absolute; 
		left: 0; 
		top: 49px; 
		background: #fff; 
		width: 100%; 
		border-top: 1px solid #e3e3e3;
		z-index: 9999;
		}
	.mobile .nav > li { 
		
		}
	.mobile .nav > li > a { 
		display: block;
		font-size: 20px;
		line-height: 49px;
		padding: 0 10px;
		background: #f6f6f7;
		position: relative;
		border-bottom: 1px solid #e3e3e3;
		}
	.mobile .nav > li > a.open {
		-moz-box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.5);
		-webkit-box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.5);
		box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.5);

	}
	.mobile .nav > li > a:after {
		position: absolute;
		right: 10px;
		top: 10px;
		width: 35px;
		height: 34px;
		display: block;
		content: '';
		background: url('../image/common/mtoggle_open.gif');
		}
	.mobile .nav > li > a.open:after { background: url('../image/common/mtoggle_close.gif'); }	
	.mobile .nav > li > .submenu { 
		display: none; 
		padding: 20px 0; 
		background: #fff;
		font-size: 13px;
		border-bottom: 1px solid #ddd;
		}
	.mobile .nav > li.last {
		border-bottom: 1px solid #e3e3e3;
		-webkit-box-shadow: 0 10px 5px rgba(0, 0, 0, 0.5);
		-moz-box-shadow: 0 10px 5px  rgba(0, 0, 0, 0.5);
		box-shadow: 0 10px 5px rgba(0, 0, 0, 0.5);
		}
	.mobile .nav > li .submenu li {
		margin: 10px;
		background: url('../image/common/dot_off.gif') no-repeat 0 7px; 
		padding-left: 10px; 
		}
	.mobile .nav > li > a > p { display: none; }

	ul.desc_list li{
		background: url('../image/common/list_bul.gif') no-repeat 0 9px;
		padding:0 0 0 13px;
		text-align:left;
	}
	ul.stit_list {
		margin:0 5px 15px;
	}
	ul.stit_list li{
		background: url('../image/common/list_bul.gif') no-repeat 0 9px;
		padding:0 0 0 13px;
		text-align:left;
		margin:10px 0 0 0;
	}
	ul.stit_list li:first-child {
		margin:0;
	}

	ul.stit_list_in {
		margin:0 5px 15px 20px;
	}
	ul.stit_list_in.type {
		margin:0 5px 15px 25px;
	}
	ul.stit_list_in li{
		background: url('../image/common/list_bul.gif') no-repeat 0 9px;
		padding:0 0 0 13px;
		text-align:left;
		margin:5px 0 0 0;
	}
	ul.stit_list_in li.star {
		background: url('../image/common/list_bul_star.gif') no-repeat 0 9px;
	}
	ul.stit_list_in li.dot {
		background: url('../image/common/dot_black.gif') no-repeat 0 8px;
		padding:0 0 0 10px;
	}
	ul.stit_list_in li:first-child {
		margin:0;
	}

	p.stit_in {
		padding-left:20px;
	}

/* ############################################################################################# */
/*																								 */
/* 		[XS]	Extra Small Devices, Phones 													 */
/*																								 */
/* ############################################################################################# */
@media only screen and (min-width : 480px) {

/* ------------------------- SHOW HIDE & FLUID ------------------------- */
	.wrapper { 
		width: 100%; 
		}
	.nav-wrap, .contents, footer  { max-width: 748px; }


} /* End of @media style */
/* ############################################################################################# */
/*																								 */
/* 		[SM]	Small Devices, Tablets 															 */
/*																								 */
/* ############################################################################################# */
@media only screen and (min-width : 768px) {

/* ------------------------- SHOW HIDE & FLUID ------------------------- */
	.wrapper { 
		width: 100%; 
		}
	.nav-wrap, .contents, footer  { max-width: 1040px; }
	.contents, footer { width: 98%; }
	.mobile .nav-wrap { background: transparent; border-bottom: 1px solid #bebebe;}
	.contents { margin-top: 40px;margin-bottom:40px;}
	.contents.contents_main {margin-top:0;margin-bottom:0;}

/* ------------------------- Layout ------------------------- */
	.logo { padding-top: 10px;}
	.logo a { 
		display: block;
		background: none; 
		padding: 0; 
		border-bottom: 0; 
		}
	.toggle-menu { position: absolute; left: 10px; top: 10px; }
	.util a { 
		display: inline-block; 
		background: url('../image/common/icon_kiiphome.png') no-repeat center 6px;
		width: 48.5%;
		text-align: center; 
		padding-top: 38px;
		color: #000;
		}
	.util a:first-child { 
		background: url('../image/common/icon_app.png') no-repeat center 6px;
		}
		.footer { padding: 0 20px; }
		.footer .family-wrap { position: absolute; right: 40px; bottom: 35px; }

/* ------------------------- Navigation ------------------------- */
	.mobile .nav-wrap nav.show  { 
		top: 69px; 
	}


} /* End of @media style */
/* ############################################################################################# */
/*																								 */
/* 		[MD] 	Medium Devices, Desktops 														 */
/*																								 */
/* ############################################################################################# */
@media only screen and (min-width : 1080px) {

/* ------------------------- SHOW HIDE & FLUID ------------------------- */
	.wrapper { 
		width: 100%; 
		}
	.nav-wrap, .contents, footer  { width: 100%; max-width: 1080px; }
	.nav-wrap { border-bottom: 0; }
	.wrapper.active .desmenu { display: block; }
	.desk .line { display: block; }
	.desk .nav-wrap nav, .desk .nav-wrap .logo { display: block; }

/* ------------------------- Layout ------------------------- */
	.util { float: right; width: 180px; position: static; }
	.logo { padding-top: 35px; }
	.util { padding-top: 35px; }
	
	.footer { padding: 0 40px; }
		.foot-util { width: 100%; overflow: hidden;}
		.foot-util li { float: left; margin-right: 20px; }
		.foot-util li p:first-child { padding-top: 14px; }

/* ------------------------- Navigation ------------------------- */
	.nav-wrap { width: 100%; height: 121px; position: relative; }
		.nav-wrap:after,
		.nav:after	{ 
			content: '';
			display: table;
			clear: both;
			}		
		.nav-wrap .logo { float: left; width: 22.129%; /* 239px */ }
	.nav-wrap nav { 
		float: left; 
		width: 61.111%; /* 660px; */
		display: block;
		} 
		.nav { }
		.nav > li { 
			float: left; 
			width: 20%; 
			height: 59px;
			padding: 35px 0 25px;
			background: transparent; 
			position: relative; 
			color: #1b1c1e;
			}
		.active .nav > li.act { background: #012d6a; color: #fff; }
		.active .nav > li.act a { color: #fff; }
		.nav > li > a { 
			font-size: 17px;
			margin: 0 auto; 
			display: block;
			color: #1B1C1E;
			}
		.nav > li > a  strong { 
			display: block; 
			text-align: center;
			line-height: 59px;
			}
		.nav > li > a  p { 
			text-align: right; 
			font-size: 10px; 
			line-height: 32px; 
			}
		.nav > li .submenu { 
			width: 100%;
			margin: 0 auto; 
			position: absolute; 
			overflow: hidden; 
			background: transparent;
			color: #000;
			height: 0;
			display: block !important;
			z-index: 100;
			}
		.active .nav > li .submenu { 
			z-index: 100;
			overflow: hidden;
			top: 119px; 
			}
		.active .nav > li .submenu a { color: #1B1C1E; }
		.active .nav > li.act .submenu a { color: #fff; }
		.active .nav > li.act .submenu { 
			background: #012d6a;
			color: #fff;
			}
		.nav > li .submenu ul { 
			padding-left: 10px;
			}
	.nav > li .submenu li a { display: block; }
	.nav > li .submenu li { 
		background: url('../image/common/squire_off.gif') no-repeat left center; 
		padding-left: 8px;
		line-height: 30px; 
		}
	.active .nav > li.act .submenu li { 
		background: url('../image/common/squire_on.gif') no-repeat left center; 
		}
	
	.line { 
		position: absolute; 
		background: #fff; 
		border-bottom: 1px solid #ccc; 
		left: 0; 
		top: 119px; 
		width: 100%; 
		height: 1px;
		z-index: 10;
		}
	.wrapper.active .line { 
		border-bottom: 1px solid #011310; 
		-webkit-box-shadow: 0 10px 5px -5px  rgba(0, 0, 0, 0.5);
		-moz-box-shadow: 0 10px 5px -5px  rgba(0, 0, 0, 0.5);
		box-shadow: 0 10px 5px -5px  rgba(0, 0, 0, 0.5);
		}
	/* height */
	.active .nav > li .submenu { height: 153px; padding-top: 25px; }
	.wrapper.active .line { height: 177px; }


} /* End of @media style */
/* ############################################################################################# */
/*																								 */
/* 		[LG] 	Large Devices, Wide Screens 													 */
/*																								 */
/* ############################################################################################# */
@media only screen and (min-width : 1200px) {
	
/* ------------------------- SHOW HIDE & FLUID ------------------------- */



} /* End of @media style */