html,body {
	font-family: "sans-serif","맑은 고딕","Malgun Gothic",sans-serif,돋음,굴림,궁서; 
	font-size: 14px; 
	font-weight: 400;
	color: #333; 
	line-height: 1.5;	
	background: #fff;
}
a { text-decoration: none; color: inherit; }
img {vertical-align: top;}
.clearboth{
	clear: both;
} 
#header.pc {display:none;}
#header {
	/* z-index는 반드시 position을 동반해야 한다. */
	position:absolute;
	z-index:99;
	width:100%;
	background: #fff;
	margin:0 auto; 
	top:0;
	height: 80px;
	overflow: hidden;
	border-bottom:1px solid #e4e4e4 ;
	bor der: 1px solid #f00;
	z-index:9999;
}

#header02:after{
	content: "";
	display: block;
	width: 100%;
	height: 1px;
	back ground-color: #efefef;
}
#header02 {
	/* z-index는 반드시 position을 동반해야 한다. */
	position:absolute;
	z-index:99;
	width:100%;
	background: #fff;
	margin:0 auto; 
	top:0;
	height: 80px;
	text-align:center;
	over flow: hidden;
	border-top:3px solid #0c4da2 ;
	border-bottom:1px solid #e4e4e4 ;
	bor der: 1px solid #f00;
}
#header02  h1 {
	float: left;
	padding-top: 20px 0;
	padding-right: 70px;
}
#header02 .pc01{width:1200px;
margin:0 auto; 
}
#gnb02 { float: right; 
bor der: 1px solid #f00;


}
#gnb02 > li { 
	float: left; 
	padding-top: 25px;
	width:190px;

	position: relative;

}
#gnb02 > li > a:after{
	content: "";
	display: block;
	position: absolute;
	width: 1px;
	height: 30px;
	background-color: #c8c8c8 ;
	top:30px;
	left: 0;

}
#gnb02 > li:first-child > a:after{
	display: none;
}
#gnb02 > li:hover > a { color: #0c4da2;font-weight: 600;}

#gnb02 > li > a {	
	display: block;
	font-size: 22px;
	letter-spacing: -0.5px;
	text-align: center;
	font-weight: 400;
	height:52px;

}
#header02 #gnb02 > li:hover .sub02{
	display: block;
}
#gnb02 .sub02 {
	background: #fff;
	display: none;
	position: absolute;
	width: 100%;
	border: 1px solid #0c4da2;
	border-top: none;
	box-shadow: 5px 0 0 0 rgba(0,0,0,0.05);
	z-index: 10;
}
#gnb02 .sub02 li a {
	display: block;
	font-size:16px;
	padding: 10px;
	border-bottom: 1px solid #d9d9d9;
	position: relative;
	transition: all 0.2s ease-out;
	z-index: 10;
}
#gnb02 .sub02 li:last-child a {border-bottom: none;}
#gnb02 .sub02 li a:hover {
	background: #0c4da2;
	color: #fff;
}
#gnb02 .sub02 li a i {
	position: absolute;
	right: 10px;
	top: 14px;
}

#header02 .gnbSub{
	width: 100%;
	height: 30px;
	background-color: #efefef;
	over flow: hidden;
}
#header02 .etcMenu{float: right;
margin-top: 20px;
}
#header02 .etcMenu li {
	background-color: #000000;
	color: #fff;
	margin-top: 5px;
	font-size: 11px;
	padding: 2px 2px;
	width: 40px;
	text-align: center;
}
#header02:after{
	content: "";
	display: block;
	width: 100%;
	height: 1px;
	back ground-color: #efefef;
}
.wrap{
	height: 100%;
	bor der: 1px solid #f00;
	width: 100%;
	background:#fff; 
}
.container {
	width: 1200px;
	margin:0 auto; 
	position: relative;
	bo rder: 1px solid #f00;
	

	}
.container:after {
 	content: "";
	display: block;
	width: 0;
	height: 0;
	clear: both;
} 

#header  h1 {
	float: left;
	padding-top: 25px 0;
	padding-right: 70px;
	z-index:9999;
}
#gnb { float: left; 
bor der: 1px solid #f00;


}
#gnb > li { 
	float: left; 
	padding-top: 40px;
	position: relative;

}
#gnb > li > a:after{
	content: "";
	display: block;
	position: absolute;
	width: 1px;
	height: 20px;
	background-color: #c8c8c8 ;
	bottom:5px;
	left: 0;

}
#gnb > li:first-child > a:after{
	display: none;
}
#gnb > li:hover > a { color: #b1b1b1;}

#gnb > li > a {	
	display: block;
	font-size: 20px;
	letter-spacing: -0.5px;
	text-align: center;
	font-weight: 400;
	padding: 0 30px;	

}
#header.pc #gnb > li:hover .sub{
	display: block;
}
#header.pc  #gnb .sub{
	display:none;
	position: absolute;
	width: 450px;
}
#gnb .sub li{
	float: left;
	padding: 0 10px;
	padding-top: 23px;
	position: relative;
}
#gnb .sub li a:hover{
	color: #b1b1b1;
}
#gnb .sub li a:after{
	content: "";
	display: block;
	width: 1px;
	height: 10px;
	background-color: #000000;
	position: absolute;
	top: 28px;
	left: 0;

}
#gnb .sub li:first-child a:after{
	display: none;
}
#header .gnbSub{
	width: 100%;
	height: 30px;
	background-color: #efefef;
	overflow: hidden;
}
#header .etcMenu{float: right;
margin-top: 20px;
}
#header .etcMenu li {
	background-color: #000000;
	color: #fff;
	margin-top: 5px;
	font-size: 11px;
	padding: 2px 2px;
	width: 40px;
	text-align: center;
}
#footer{
	width: 100%;
	height: 100%;
	background: #fff;
	border-top:1px solid #e4e4e4;
	padding-top:1px;


}

#footer .container03 {
	margin:0 auto;
	width: 1200px;
	text-align:center;

}

#footer .address {
	margin-top: 10px;
	width: 1200px;
	text-align:center;

}



#footer .address  p {
	color: #5c5c5c;
	font-size: 16px;
	padding-left: 10px;
	padding-top: 10px;
	padding-bottom: 10px;
}
#footer .address p strong{
	color: #5c5c5c;
	font-weight:600;

}

#header .btnAll {
	display: none;
}
#header .tel {
	display: none;
}

#footer02 {display:none;}
#footer02  .container{display:none}
@media all and (max-width: 1200px){
#header02{display:none;}


	#header {display: block; width: 100%; height: 79px; z-index:9999; border-bottom:1px: solid #f00;} 
	#header  h1 { float:none; width: 100%; margin: 0 auto;}
	#header  h1 img{
	display: block;
	margin: 0 auto;
	text-align: center;
}
.container {width:100%;}
#header .tel {
	display: block;
	position: absolute;
	right: 10px;
	top:30px;
}
#header .tel img{
	display: block;
	width: 40px;
}
#header:after{
	content: "";
	display: block;
	width: 100%;
	height: 1px;
	background-color: #efefef;
}


#gnb {float: none;}
#gnb > li {
	float: none;
	padding:0px 0;
	border-top:1px solid #d9d9d9;
		
	}
#gnb .sub > li {
		float: none;
		padding: 0;
	}
#gnb > li > a {
		text-align: left;
		height: 60px;
	line-height: 60px;

	}
#gnb > li > a:after{
	content: "";
	display: none;


}
#gnb .sub {
	display: none;
}

#gnb .sub li a:after{
	content: "";
	display: none;


}

#gnb .sub li > a {
	display: block;
	height: 60px;
	font-size:16px;
	line-height: 60px;
	border-top: 1px solid #d9d9d9;
	padding-left: 40px;
	background: #f8f8f8;
	position: relative;

}
#gnb .sub li > a:before{
	content: "";
	display: block;
	width: 4px;
	height: 4px;
	background: #135ea4;
	position: absolute;
	left: 30px;
	top: calc(50% - 2px); /* 무조건 띄워쓰기 */
	/* margin-top: -2px; */
}

	#header .btnAll {
	display: block;
	width: 60px;
	height: 60px;
	position: absolute;
	left: 10px;
	top: 20px;
}
#gnb.none.close {display: none}
#gnb.none {display: block}

#header .btnAll span{
	display: block;
	width: 30px;
	height: 4px;
	background: #333;
	position: absolute;
	left: 10px;
	transition: all 0.2s ease-out;
}

#header .btnAll li:nth-child(1) span{
	top:20px;
}
#header .btnAll li:nth-child(2) span{
	top:30px;
	background: #333;
}
#header .btnAll li:nth-child(3) span{
	top:40px;
}

#header .btnAll.on li:nth-child(1) span{
	top:30px;
	transform: rotate(45deg);
}
#header .btnAll.on li:nth-child(2) span{
	left: -100px;
}
#header .btnAll.on li:nth-child(3) span{
	top:30px;
	transform: rotate(-45deg);
}

#header .etcMenu{
	display: none;
}
#footer .container03{display:none;}


#footer02 {display:block;padding:10px 0;}

#footer02 .container{display:block;width:95%;margin:0 auto;font-size:12px;}

#footer02 .container strong{color:#000;font-weight:600;}
}
@media all and (max-width: 600px){ 
#footer {width:100%;}
#footer .container03{display:none;}


}