@charset "utf-8";
/* CSS Document */
@-ms-viewport {width:device-width;}
			
/* Wrappers */
#header-wrapper {padding: 1.2em 0;}
#main-wrapper {background:#fff;  padding: 2.5em 0 15.5em 0; box-shadow: 0px 3px auto 0px rgba(0, 0, 0, 0.05);}
#features-wrapper {padding: 0 0 4em 0; background:#f5f9fb; }
#footer-wrapper {padding: 1.5em 0 3em 0; background:#EBEFF2;}
#sub-wrapper {padding: 2.5em 0 9.5em 0;}


.container {margin: 0 auto; max-width:100%; width:1400px;}

/* features-wrapper */
#features-wrapper .container {text-align:center;}
#features-wrapper .container h2 {padding:1.2em 0 0 0;}
#features-wrapper .con_title p {margin:10px 0 0 0;}
#features-wrapper .con_title {padding:3em 0 2em 0;}

/* sub-wrapper */
#sub-wrapper .container {text-align:center;}
#sub-wrapper .counsel h3 {text-align:center; font-size:28px; color:#ff8d2b; font-weight:normal; margin:30px 0 0 0;}
#sub-wrapper .counsel h3 span {text-align:center; font-size:34px; color:#ff8d2b; font-weight:600;}
#sub-wrapper .counsel>p{text-align:center; font-size:18px; color:#666; font-weight:normal; margin:10px 0 50px 0;}
#sub-wrapper .counsel{text-align:center; font-size:18px; color:#666; font-weight:normal; }

/* Header */
#header {position:relative;}

/* Logo */
#logo {display:inline-block;}
#logo h1 {width:164px; height:31px;}

/* Nav */
#nav ul {position: absolute; right: 0;top: 0; display:block; list-style:none; padding-left:0; }
#nav ul li {float:left; line-height:2em; padding:0 0 1em 0; position:relative;}
#nav ul li a, #nav ul li span {padding:0 1em 1.5em 1em; display:block; overflow:hidden;}
	/* Nav div */
	#nav ul li:hover>div.nav_box01 { display:block; background:#f5f9fb; border-top:1px solid #efefef; border-bottom:1px #efefef solid;}
	#nav ul li>div.nav_box01 {display:none; position:absolute; top:3em; left:5px; padding:1.1em 8em; z-index:1000;}
		#nav ul li>div.nav_box01>ul {width:100%;}
		#nav ul li>div.nav_box01>ul>li { float:left; display:inline-block; text-align:center; line-height:1.4em;}
		#nav ul li>div.nav_box01>ul>li>a:hover{border-top:2px solid #263574; padding:0.35em 1.5em;}
		#nav ul li>div.nav_box01>ul>li>a{ padding:0.5em 1.5em;}
	
	#nav ul li:hover>div.nav_box02 { display:block; background:#f5f9fb; border-top:1px solid #efefef; border-bottom:1px #efefef solid;}
	#nav ul li>div.nav_box02 {width:100%; display:none; position:absolute; top:3em; left:-8em; padding:1.1em 13em; z-index:1000;}
		#nav ul li>div.nav_box02>ul {width:100%;}
		#nav ul li>div.nav_box02>ul>li { float:left; display:inline-block; text-align:center;line-height:1.4em;}
		#nav ul li>div.nav_box02>ul>li>a:hover{border-top:2px solid #263574; padding:0.35em 1.5em;}
		#nav ul li>div.nav_box02>ul>li>a{ padding:0.5em 1.5em;}
	
	#nav ul li:hover>div.nav_box03 { display:block; background:#f5f9fb; border-top:1px solid #efefef; border-bottom:1px #efefef solid;}
	#nav ul li>div.nav_box03 {width:100%; display:none; position:absolute; top:3em; left:0; padding:1.1em 1em; z-index:1000;}
		#nav ul li>div.nav_box03>ul {width:100%;}
		#nav ul li>div.nav_box03>ul>li { float:left; display:inline-block; text-align:center; line-height:1.4em;}
		#nav ul li>div.nav_box03>ul>li>a:hover{border-top:2px solid #263574; padding:0.35em 1.5em;}
		#nav ul li>div.nav_box03>ul>li>a{ padding:0.5em 1.5em;}
	
	#nav ul li:hover>div.nav_box04 { display:block; background:#f5f9fb; border-top:1px solid #efefef; border-bottom:1px #efefef solid;}
	#nav ul li>div.nav_box04 {width:100%; display:none; position:absolute; top:3em; left:-7.5em; padding:1.1em 6em; z-index:1000;}
		#nav ul li>div.nav_box04>ul>li { float:left; display:inline-block; text-align:center; line-height:1.4em;}
		#nav ul li>div.nav_box04>ul>li>a:hover{border-top:2px solid #263574; padding:0.35em 1.5em;}
		#nav ul li>div.nav_box04>ul>li>a{ padding:0.5em 1.5em;}
	
	#nav ul li.nav_number{padding:0;}
	#nav ul li.nav_number a {padding:0 1.5em 0 1.5em; display:block; overflow:hidden;}

.nav_box {width:100%; background:#f5f9fb; border-top:1px solid #efefef; border-bottom:1px #efefef solid; position:absolute; top:4.2em; left:0; padding:1.1em 0; box-shadow: 0 10px 8px -8px rgba(0, 11, 75, 0.3); z-index:600}

/* Footer */
#footer_wrapper {width:100%; background:#EBEFF2; padding:50px 0; float: left;}
#footer_top {border-bottom:1px #ccc solid; }
	#footer_top ul {display:inline-block; margin:0 0 0.5em 0;}
	#footer_top ul li {float:left; padding:0 1.5em 0.4em 0;}
	
#footer {margin-top: 0; position:relative; }
	#footer a {color: inherit;}
	#footer ul {display:inline-block; padding:1em 0 0 0;}
	#footer ul li {float:left; padding:0 1.5em 0 0;}
	#footer p{margin:0.2em 0 0 0;}


/* XLarge */
@media screen and (max-width: 1680px) {
	.container {width:960px;}
	.sub_container {width:960px;}
}


/* Large */
@media screen and (max-width: 1280px) {
	.container {width:960px;}
	.sub_container {width:960px;}
	#header-wrapper {padding: 1.2em 0;}
}


/* Medium */
#navPanel, #navToggle {display: none;}

@media screen and (max-width: 980px) {
	
	/* Basic */
	html, body {overflow-x: hidden;}
	body, input, select, textarea {font-size: 11pt;}
	.container {width:90%;}
	.sub_container {width:90%;}

	/* Wrappers */
	#header-wrapper {padding: 1,2em 0 0 0; text-align: center;}

	/* Header */
	#header {text-align:center;}
	#header-wrapper .nav_box {display:none;}

	/* Logo */
	#logo span {display: block; margin: 0;}

	/* Nav */
	#header #nav {display: none;}
	#header-wrapper .nav_box {display:none;}
	
	/* Footer */
	#copyright {padding: 0;}
	
	/* Nav */
	#page-wrapper {
		-moz-backface-visibility: hidden;
		-webkit-backface-visibility: hidden;
		-ms-backface-visibility: hidden;
		backface-visibility: hidden;
		-moz-transition: -moz-transform 0.5s ease;
		-webkit-transition: -webkit-transform 0.5s ease;
		-ms-transition: -ms-transform 0.5s ease;
		transition: transform 0.5s ease;
		padding-bottom: 1px;
	}
	#navToggle {
		-moz-backface-visibility: hidden;
		-webkit-backface-visibility: hidden;
		-ms-backface-visibility: hidden;
		backface-visibility: hidden;
		-moz-transition: -moz-transform 0.5s ease;
		-webkit-transition: -webkit-transform 0.5s ease;
		-ms-transition: -ms-transform 0.5s ease;
		transition: transform 0.5s ease;
		display: block;
		height: 44px;
		left: 0;
		position: fixed;
		top: 20px;
		width: 100%;
		z-index: 10001;
	}
	#navPanel{
		-moz-backface-visibility: hidden;
		-webkit-backface-visibility: hidden;
		-ms-backface-visibility: hidden;
		backface-visibility: hidden;
		-moz-transform: translateX(0px);
		-webkit-transform: translateX(0px);
		-ms-transform: translateX(0px);
		transform: translateX(0px);
		-moz-transition: -moz-transform 0.5s ease;
		-webkit-transition: -webkit-transform 0.5s ease;
		-ms-transition: -ms-transform 0.5s ease;
		transition: transform 0.5s ease;
		display: hidden;
		height: 100%;
		left: 0;
		overflow-y: auto;
		position: fixed;
		top: 0;
		width:274px;
		z-index: 10002;
		background: #fff;
		box-shadow: inset -3px 0px 0px 0px #dfdfdf;
		padding: 0 10px 0 0;
	}
	
	#navPanel ul li a {
		display: block;
		text-decoration: none;
		height: 54px;
		line-height: 54px;
		border-top: solid 1px #e8e8e8;
		color: #696969;
		padding:0 15px;
		position:relative;
	}
	#navPanel ul li a span {position:absolute; right:20px; color:#263574;}
	
	#navPanel ul li a.nav_number {background:#ff8d2b;padding:0; height:45px; color:#fff; text-align:center; line-height:2.6em; font-weight:600; margin:0 0 10px 0; }
	#navPanel ul li ul.mq2 {width:100%; height:85px; text-align:center; font-size:12px;}
	#navPanel ul li ul.mq2 li.mq2_left a{width:49.5555%;float:left; height:45px; padding:30px 0 0 0; background:#fff; background:url(img/main/kakao_icon.png) no-repeat center 0; border-right:1px solid #efefef; border-top:0; }
	#navPanel ul li ul.mq2 li.mq2_right a{width:50%;float:left; height:45px; padding:30px 0 0 0; background:#fff;  background:url(img/main/bona_qrcode.png) no-repeat center 0; border-top:0; }
	
	#navPanel ul li.nave_on a{background:#f5f9fb; color:#263574; font-weight:600; position:relative;}
	#navPanel ul li.nave_on ul li a{ background:#fff; font-weight:normal; color:#263574; padding: 0 15px 0 30px;}
	
	#navPanel ul li ul.nav_none {display:none;}
	#navPanel ul li.nave_on ul li a span {position:absolute; right:20px; color: #263574; font-size:12px;}
	
	body.navPanel-visible #page-wrapper {
		-moz-transform: translateX(275px);
		-webkit-transform: translateX(275px);
		-ms-transform: translateX(275px);
		transform: translateX(275px);
	}

	body.navPanel-visible #navToggle {
		-moz-transform: translateX(275px);
		-webkit-transform: translateX(275px);
		-ms-transform: translateX(275px);
		transform: translateX(275px);
	}

	body.navPanel-visible #navPanel {
		-moz-transform: translateX(0);
		-webkit-transform: translateX(0);
		-ms-transform: translateX(0);
		transform: translateX(0);
	}
}

/* Small */

@media screen and (max-width: 736px) {
		
	.container {width:100%;}
	.sub_container {width:90%;}
		
	/* Basic */
	body, input, select, textarea {line-height: 2em;}
	h2, h3, h4, h5, h6 {font-size: 13pt;margin: 0 0 1em 0;}
				
	/* Section/Article */
	section, article {clear: both;margin-bottom: 3em !important;}
	section.last, article.last {margin-bottom: 0 !important;}
	.image.left {width: 25%; margin-bottom: 2em !important;}

	/* Button */
	input[type="button"],
	input[type="submit"],
	input[type="reset"],
	button,
	.button {
		text-align: center;
	}

	input[type="button"].icon,
	input[type="submit"].icon,
	input[type="reset"].icon,
	button.icon,
	.button.icon {padding-right: 0.75em !important;}
	
	input[type="button"].icon:before,
	input[type="submit"].icon:before,
	input[type="reset"].icon:before,
	button.icon:before,
	.button.icon:before {margin-right: 0.5em;top: 0.05em;}
	
	/* Box */
	.box {padding: 15px 15px 15px 15px;margin: 0;}
	.box.feature {margin: 20px 0 0 0 !important;padding: 0;}
	.box.feature p {margin: 0;}
	.box.feature .image {position: relative;margin: 0;}
	.box.feature .image img {border-bottom-left-radius: 0;border-bottom-right-radius: 0;}
					
	/* Wrappers */
	#header-wrapper {padding: 1em 0 1.5em 0.5em;}
	#banner-wrapper {padding: 0 0 0 0;}
	#features-wrapper {padding: 0 15px 40px 15px;}
	#main-wrapper {padding:2.9em 1em 9.5em 1em;}
	#footer-wrapper {padding: 1.5em 15px 3em 15px; margin:80px 0 0 0;}
	
	/* header */
	#header {text-align:center;}
	#header-wrapper .nav_box {display:none;}
	
	/* Logo */
	#logo h1 {font-size: 2.75em; padding: 0.2em 0.275em;}
	
	/* Banner */
	#banner {text-align: center; padding: 15px 15px 15px 15px;margin: 0 auto !important;}
	#banner h2 {font-size: 2em; margin: 0.75em 0 0.5em 0;}
	#banner p {font-size: 1.5em; line-height: 1.5em; margin: 0;}
	#banner ul {margin: 0;}
	#banner .button {margin: 0 0 1em 0;}
	
	/* Content */
	#content {padding-bottom: 3em;}
	
	/* Footer */
	#copyright {text-align: left;}
	
	#features-wrapper .con_title p {margin:-10px 0 0 0;}
	
	#sub-wrapper .counsel h3 {text-align:center; font-size:22px; font-weight:normal; margin:30px 0 0 0;}
	#sub-wrapper .counsel h3 span {text-align:center; font-size:26px; color:#ff8d2b; font-weight:600;}
	#sub-wrapper .counsel>p{text-align:center; font-size:16px; color:#666; font-weight:normal; margin:10px 0 30px 0;}
	
	
}