/* 공통영역 */

	*{padding:0; margin:0; color: #333; font-family:'Noto Sans KR', '맑은 고딕', sans-serif;}
	body,header,footer{padding:0; margin:0;}

	header, section, footer, div, p, ul, ol, li, #wrap{display:block;}
	img {border:none; vertical-align:top;}

	li{list-style-type:none;}
	a:link,a:visited {text-decoration:none; color:#333;}
	a:hover,a:focus {/*outline:none;*/}

	h2{font-size:1px; line-height:0; width:1px; height:1px; overflow:hidden; position:absolute; left:-9999px; top:0;}

	#wrap{width:100%; height:100%; background-color:#fff;}
	.e_font{font-family: 'Roboto Condensed', sans-serif;}



/* header */

	#header{width:100%; background-color:#fff; position:fixed; top:0; z-index:10;}
		.head{width:100%;}
			.head h1{width:150px; margin:0 auto; padding:20px 0;}
				.head h1 img{width:100%;}

			.gnb{width:100%; border-top:1px solid #ccc; border-bottom:1px solid #ccc; overflow:hidden;}
			.gnb_ul{width:1200px; margin:0 auto; display:block;}
				.gnb_ul .n_4{width:25%; float:left; text-align:center;}
				.n_4:first-child{
				    margin-left: 15%;
				}
					.gnb ul li .dep1{color:#999; font-size:18px; line-height:40px; padding:5px 0;}

					.gnb ul li .dep1:hover{color:#333;}

			.gnb_menu{overflow:hidden; padding:10px 0; position:relative;}
				.gnb_menu li{width:100%; line-height:40px; clear:both;}
					.gnb_menu li a, .gnb_menu li a span{display:block; width:100%; font-size:14px; color:#999;}
					.gnb_menu li a:hover{color:#333;}
					.gnb_menu li a:hover span{color:#333;}

			.gnb_menu{height:0; padding:0; transition:all .5s;}
			.gnb:hover .gnb_menu{display:block; height:80px; padding:20px 0; transition:all .5s;}
			.dep1:after{content:""; display:block; width:0px; height:2px; background-color:#666; margin:0 auto;}

			.gnb ul li:hover .dep1:after{width:70px; transition:width .5s;}

			.nav_hr{border:none; border-bottom:1px solid #ccc; transform:translate(0,43px);}

			.m_gnb{display:none;}



@media screen and (min-width:961px) and (max-width:1220px){
	.gnb_ul{width:100%;}
}
@media screen and (min-width:768px) and (max-width:960px){
	/*.head	h1{width:140px; padding:15px 0; transition:all .5s;}*/
		.head h1 img{width:100%;}
	.gnb_ul{width:100%;}
}

@media screen and (min-width:320px) and (max-width:767px){
	/* header */
	#header{width:100%;}
	.head{border-bottom:1px solid #ccc;}
	.head h1{width:100px; transition:all .5s;}
		.head h1 img{width:100%;}
	.gnb{display:none;}
	.m_gnb{display:block; position:absolute; left:0; top:0;}
		.m_gnb .m_icon{width:30px; height:30px; padding:30px 0 0 10px; line-height:50px; color:#999; cursor:pointer;}
			.m_gnb .m_icon img{width:100%;}
			.m_menu{width:200px; background-color:#fff; position:absolute; top:83px; color:#999; font-size:12px; text-indent:10px; line-height:40px; box-shadow:3px 3px 3px rgba(0,0,0,0.2);}
			.m_menu li{line-height:50px;}
			.m_menu p .arrow{display:inline-block; padding-left:110px;  width:20px; height:20px; font-size:25x; color:#999;}

				.m_menu ol{background-color:#efefef;}
					.m_menu ol a{display:block; width:100%;}

				.click{cursor:pointer;}
}