@charset "utf-8";

/* layout  body{overflow-x:hidden;} */

#wrap {  position:relative; width:100%; overflow:hidden; }

.mobile_view {display:none;}
.pc_view {display:block;}
.mobile_not {display:block;} 
.wrap {margin:0 auto; position:relative; width:100%;}

#m-header {display:none;}
#navigation {display:none;}

#header {position:fixed; padding:0 5% 0 5%; box-sizing:border-box; left:0; top:0; width:100%; height:105px; background:url(/images/main/bg_header.png) left top repeat-x; z-index:9990; /*overflow:hidden*/ 
	-webkit-transition:all 0.2s ease-in-out; -moz-transition:all 0.2s ease-in-out; -o-transition:all 0.2s ease-in-out; transition:all 0.2s ease-in-out; }
#header * {-webkit-transition:all 0.2s ease-in-out; -moz-transition:all 0.2s ease-in-out; -o-transition:all 0.2s ease-in-out; transition:all 0.2s ease-in-out;}
#header h1 {float:left; margin-top:20px;}
#header h1 a {display:block; width:180px; height:51px; background:url(/images/logo.png) left top no-repeat; background-size:180px auto; text-indent:-1000em; z-index:9999;}
#header.on h1 a {width:180px; background:url(/images/logo.png) left top no-repeat; background-size:180px auto; }

#header:after { content:""; display:block; position:absolute; left:0; top:105px;  height:0; width:100%; }
#header.over:after { height:250px; border-top:1px solid #e0e0e0;border-bottom:1px solid #878787;background:#fff center bottom no-repeat; }

#header.over { height:105px; box-shadow:0px 5px 10px 0px rgba(38, 31, 31, 0.1); }
#header.over.on { background:none; border-bottom:none; }
#header.over.on:before { content:""; display:block; background:#fff; position:absolute; left:0; top:0; height:105px; width:100%; }

.toputil { float:left; left:20px; padding-top:23px; z-index:9999; }
.toputil a { display:inline-block; margin:2px 10px 0px 10px; color:#000; font-size:1em; }
.toputil a:hover { color:#ddd; }
.toputil:last-child a:hover { opacity:1.0; }
#header.on .toputil a { display:inline-block; color:#2f2f2f; }

#gnbArea { position:relative; float:right; margin:15px auto 0; z-index:5; *zoom:1; width:64.5%; } 
#gnb {*zoom:1; }
#gnb:after { content:""; display:block; clear:both; }
#gnb > li { position:relative; float:left; display:inline-block; margin:0 0 0 40px; font-size: 15px; }
#gnb > li:first-child { margin:0; }
#gnb > li.ssss { float:right; width:*; font-size: 13px; }
#gnb > li > a { display:block; padding:25px 0 21px; color:#000; font-size:1.1em; line-height:24px; text-align:center; font-family: 'NanumSquare'; font-weight:bold; }

#gnb > li.active > ul li.active a { color:#ffd4f0}
#gnb > li.active > a { border-bottom:4px solid #ffd4f0; }
#gnb > li.on > a { border-bottom:4px solid #ffd4f0; }
#gnb > li.on > ul { background:none; }

#header.on {background:#fff; border-bottom:1px solid #dcdcdc;} 
#header.on #gnb > li > a {color:#000;} 
#header.on #gnb > li:hover > a {color:#ffd4f0;}
#m-header.on {background:#fff; border-bottom:0px solid #dcdcdc;} 
/* footer */
#footer{clear:both; margin:0 auto 50px; width:100%; padding:2% 5%; height: 125px; box-sizing: border-box; border-top:1px solid #ccc; }
#footer .footer_wrap { position:relative; width:100%; clear:both; margin:0 auto; z-index:1; } 
#footer .footer_wrap .footlogo { float:left; width:19%;}
#footer .footer_wrap .footlogo img{ height:45px; opacity:0.4;}
#footer .footer_wrap .address { float:right; width:50%; margin: 0 0 0 21%; font-size:14px; color:#767676; } 
#footer .footer_wrap .address span {display:inline-block; padding:0 10px 0 0; }
#footer .footer_wrap .address span a{color:#767676;}
#footer .footer_wrap .copyright { font-size:14px; color:#767676; text-align:left; padding:0px;}

@media all and (max-width:1050px) {
	#footer{height: 200px; }
	#footer .footer_wrap .address { width:59%;  }
}

@media all and (max-width:1000px) {
	#footer{padding: 15px 15px 0 15px;}
}
@media all and (max-width:800px) {
	#footer .footer_wrap .footlogo { width:200px;}
	#footer .footer_wrap .footlogo img{max-width:100%; width:auto; height:auto;}
	#footer .footer_wrap .address { float:none; clear:both; width:100%; margin: 0 0 0 0%;  padding-top:10px; }
}
@media all and (max-width:450px) {
	#footer{height: 160px; }
	#footer .footer_wrap .footlogo { width:150px;}
	#footer .footer_wrap .address {line-height:20px;}
}



#pagewrap { width:53px; float:right; position: relative; z-index:999; margin-right:20px; }
#contswrap { width:60%; margin:50px auto 50px; }
#subcontswrap { width:80%; margin:150px auto 50px; }



/* ############################################################ */
/* ===================== 디바이스 1000px
/* ############################################################ */
@media all and (max-width:1000px) {
	.wrap {width:96%;}
	#header {display:none;}
	#m-header {display:block; background-color:transparent; position:fixed; z-index:999; width:100%; border-bottom:0px solid #ccc; top:0; height:74px; }
	#m-header h1 {width:150px; margin:17px 0 0 10px;}
	#m-header h1 a {display:block; width:150px; height:40px; background:url(/images/logo.png) no-repeat 0 0; text-indent:-1000em; z-index:9999; background-size:100%;box-sizing:border-box; }
	#m-header .header-icon {position:absolute; top:6px; right:0;}
	#m-header .header-icon a {width:60px; height:60px; display:inline-block; text-align:center;font-size:30px;}
	#m-header .header-icon i {width:30px; height:30px; line-height:30px; color:#333; text-align:center; margin:10px; display:inline-block; }
	i.fas.fa-bars { FONT-SIZE: 20px; }

	#navigation {position:fixed; display:block; width:310px;  background:#fff; z-index:9999; top:0; right:-100%; overflow-y:scroll; height:100%;}
	#navigation ul.topmenu { width:100%;}
	#navigation ul.topmenu li.m-top {padding:15px;  color:#948f8b; border-bottom:1px solid #ccc; background:#ffd4f0; position:relative; text-align:right; position:relative;}
	#navigation ul.topmenu li.m-top a.topmenu_close {width:25px; height:25px; line-height:27px; color:#fff; text-align:center; display:inline-block; position:absolute; left:15px; font-size:25px;}
	#navigation ul.topmenu li.m-menu { border-bottom:1px solid #e5e5e5; }
	#navigation ul.topmenu li.m-menu a {font-size:18px; padding:17px 0; color:#313131; text-indent:20px; display:block; position:relative;}
	#navigation ul.topmenu li.m-menu a::after {content: "\f078"; font-family: 'FontAwesome'; color:#ccc; right:10px; position:absolute; top:15px; font-size:12px;}

	#navigation ul.topmenu li.hover {}
	#navigation ul.topmenu li.hover a::after {content: "\f077"; font-family: 'FontAwesome'; color:#808080; right:10px; position:absolute; top:15px; font-size:12px;}

	#navigation ul.topmenu li.m-menu ul {display:none;}
	#navigation ul.topmenu li.m-menu ul li {background:#f9f9f9; border-bottom:1px solid #eee;  }
	#navigation ul.topmenu li.m-menu ul li:last-child {border-bottom:none;  }
	#navigation ul.topmenu li.m-menu ul li a {display:block; padding:10px 0; color:#808080; font-size:16px; background:#f9f9f9;  text-indent:20px; }
	#navigation ul.topmenu li.m-menu ul li a::after {display:none;}

	#contswrap { width:90%; margin:50px auto 50px; }
	#subcontswrap { width:90%; margin:20% auto 10%; }

	.modalBg.over { position:fixed; left:0; top:0; width:100%; z-index:999; height:100%; background:#000;opacity:0.7; }

}

/* ############################################################ */
/* ===================== 디바이스 768px
/* ############################################################ */
@media all and (max-width:768px) {
	.pc_view {display:none;}
	.mobile_view {display:block;}
	.mobile_not {display:none;}
}



/* ############################################################ */
/* ===================== 디바이스 600px
/* ############################################################ */
@media all and (max-width:600px) {

}