@charset "utf-8";
/* CSS Document */

body {
	width:100%;
  font-family: "Noto Sans KR", sans-serif !important;
  background-color:#fff;
}


#logo {
	position:absolute;
	z-index:12512525;
	margin-top:30px;
	margin-left:80px;
}
@media screen and (max-width: 1200px) {
	#logo {
		margin-left:25px;
	}
	
	
}

@media screen and (max-width: 980px) {
	#logo {
		margin-top:8px;
		margin-left:0px;
	}
	
	
}



	
/*주메뉴*/
nav > ul > li {
	float:left;
	/*background-color:#F99;*/
}
nav > ul > li > a {
	display:block;
	padding: 0px 50px;
	line-height:101px;
	
}
nav > ul > li > a > span {
	font-size:18px;
	padding-bottom:2px;
	display:block;
	color:#000;
	-moz-transition: color 0.2s ease-in-out;
	-webkit-transition: color 0.2s ease-in-out;
	-ms-transition: color 0.2s ease-in-out;
	transition: color 0.2s ease-in-out;
	display: inline-block;
	text-decoration: none;
	font-size:18px;
	font-weight:500;
}


nav > ul > li > a > hr {
	width:0%;
	margin:0 auto;
	border:2px solid #3a2c4c;
	transition:all 0.3s;
	opacity:0;
}
nav > ul > li:hover > a > hr {
	width:100%;
	opacity:1;
}
/*서브메뉴*/

.sub {
	display:none;
	position:relative;
	z-index:3;
	padding-top:10px;
}
.sub > li > a {
	font-size:16px;
	color:#000;
	display:block;
	line-height:34px;
	text-decoration:none;
}


/*주메뉴에 마우스를 올리면 서브메뉴가 통째로 보임*/
nav > ul:hover .sub {
	display:block;
}

#sub_bg {
	width:100%;
	height:20px;
	background-color:#fff;
	clear:both;
	position:absolute;
	top:101px;
	left:0;
	opacity:0;
	transition:all 0.3s;
	z-index:2;
	border-bottom:1px solid #333;
	/*display:none;*/
}
#nav:hover ~ #sub_bg {
	opacity:1;
	height:250px;
	/*display:block;*/
}





	header p {
		color: #3a3a3a;
		position: relative;
	}

	

	

	#nav {
		margin:0 auto;
	}
		#header .menu_inner {
			margin: 0 auto;
			position: relative;
		}

				#header {
					height:101px;					
					top:0px;
					width: 100%;
					z-index: 10001;
					background-color:#fff;
					position:fixed;				
				
					z-index:12;
					-webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
		
				}
				
				#header.roll {
					border-bottom:1px solid #333;
					background-color:#fff;	
					-webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;				
		
				}
							
		#header a {
			
		}

			#header a:hover {
				color:#3a2c4c;
				
			}

			#header a:last-child {
				padding-right: 0;
			}

			#header a.navPanelToggle {
				display: none;
				text-decoration: none;
				height: 4em;
				width: 4em;
				z-index: 10002355188;
			}

				#header a.navPanelToggle .fa {
					color:#000;
					font-size: 1.25em;
				}
				
				#header.roll a.navPanelToggle .fa {
					color:#000;
				}

				@media screen and (max-width: 980px) {
					#header {
						color:#fff;
						cursor: default;
						height:75px;
						left: 0;
						line-height:75px;
						position: absolute;
						text-align:center;
						top:0px;
						width: 100%;
						z-index: 10023;
						position:fixed;
						
						
					}

					#header a.navPanelToggle {
					
						display: inline-block;
					}
					
				#header {

						text-align:right;

					}
					
					.sub {
						display:none;
					}
					
					#sub_bg {
						display:none;
					}

				
					nav > ul > li > a > hr {
						display:none;
					}
					
					
					
				}

			@media screen and (max-width: 736px) {

				#header a {
					padding: 0 0.5em;
				}

			}

	@media screen and (max-width: 980px) {

		#header {

		}

	}

	@media screen and (max-width: 736px) {

		#header {
	
		}

	}

	@media screen and (max-width: 480px) {

		#header {
	
			min-width: 320px;
		}

	}

/* Nav */

	@media screen and (max-width: 980px) {

		#nav {
			display: none;

		}

	}

	#navPanel {
		-moz-transform: translatex(20em);
		-webkit-transform: translatex(20em);
		-ms-transform: translatex(20em);
		transform: translatex(20em);
		-moz-transition: -moz-transform 0.2s ease-in-out, visibility 0.2s ease-in-out;
		-webkit-transition: -webkit-transform 0.2s ease-in-out, visibility 0.2s ease-in-out;
		-ms-transition: -ms-transform 0.2s ease-in-out, visibility 0.2s ease-in-out;
		transition: transform 0.2s ease-in-out, visibility 0.2s ease-in-out;
		-webkit-overflow-scrolling: touch;
		visibility: hidden;
		overflow-y: auto;
		position: fixed;
		right: 0;
		top: 0;
		background: #fff;
		color: #000;
		height: 100%;
		max-width: 80%;
		width: 20em;
		padding: 19px 1.25em;
		z-index: 1000000003;
	}

		#navPanel.visible {
			-moz-transform: translatex(0);
			-webkit-transform: translatex(0);
			-ms-transform: translatex(0);
			transform: translatex(0);
			box-shadow: 0 0 1.5em 0 rgba(0, 0, 0, 0.2);
			visibility: visible;
		}

		#navPanel a:not(.close) {
			border-top: solid 1px rgba(255, 255, 255, 0.25);
			color: #000;
			font-weight: 600;
			display: block;
			padding: 0;
			text-decoration: none;
			font-weight: 300;
		}

			#navPanel a:not(.close):first-child {
				border: none;
			}

		#navPanel .close {
			text-decoration: none;
			-moz-transition: color 0.2s ease-in-out;
			-webkit-transition: color 0.2s ease-in-out;
			-ms-transition: color 0.2s ease-in-out;
			transition: color 0.2s ease-in-out;
			-webkit-tap-highlight-color: transparent;
			border: 0;
			color: #000;
			cursor: pointer;
			display: block;
			height: 4em;
			padding-right: 1.25em;
			position: absolute;
			right: 0;
			text-align: right;
			top: 0;
			vertical-align: middle;
			width: 5em;
		}

			#navPanel .close:before {
				-moz-osx-font-smoothing: grayscale;
				-webkit-font-smoothing: antialiased;
				font-family: FontAwesome;
				font-style: normal;
				font-weight: normal;
				text-transform: none !important;
				content: '\f00d';
				width: 3em;
				height: 3em;
				line-height: 3em;
				display: block;
				position: absolute;
				right: 0;
				top: 0;
				text-align: center;
			}

			#navPanel .close:hover {
				color: inherit;
			}
hr {
		border: 0;
		border-bottom: solid 1px #666;
		margin:15px 0;
	}

#nav {
		color:#111111;
		cursor: default;
		height:101px;
		line-height:101px;
		position: absolute;
		text-align:center;
		top:0;
		width:1200px;
		z-index: 10001;
		padding-left:280px;
	/*background-color:#FCC;*/	
}
@media screen and (max-width: 1200px) {
	#nav {
		padding-left:210px;
}
}

@media screen and (max-width: 1100px) {
	#nav {
		width:100%;
		padding-left:10px;
		margin-left:240px;
	
	/*background-color:#FCC;*/	
}


		nav > ul > li > a {
			padding: 0px 30px;
			
		}
}
@media screen and (max-width: 980px) {
	
	
	#nav {
		padding-left:0px;
		float:right;
	/*background-color:#FCC;*/	
}
	#logo {
		float:left;		
		text-align:left;
	}
	#logo_1 {
	line-height:90px;
	text-align:left;
}

#logo_1 img {
	width:80%
}


#logo_2_1 {
		float:left;		
		text-align:left;
	}
	#logo_2_2 {
	line-height:90px;
	text-align:left;
}

#logo_2_2 img {
	width:80%
}
}