@charset "utf-8";
@import url(https://fonts.googleapis.com/icon?family=Material+Icons);

/*basic*/
#whole {overflow:hidden; position:relative left:-200px;}
.wrap {max-width:1200px; margin:0 auto; position:relative;}
.shadow_upper {position:absolute; top:0; left:0; width:100%; height:10px; background:url(/images/main/shadow_upper.png); z-index:10;}
.shadow_lower {position:absolute; bottom:0; left:0; width:100%; height:10px; background:url(/images/main/shadow_lower.png); z-index:10;}

/*header*/
#header {position:fixed; top:0; left:0; width:100%; height:80px; line-height:80px; /*background:url(/img/common/top_bg.png);*/ background:#fff; z-index:999999; transition:all 0.1s ease-out; border-top:4px solid #fcb040}
#header h1 {font-size:0; letter-spacing:0; word-spacing:0; float:left;}
#header h1 img {vertical-align:middle;}
#header h1 img.color {display:none; width:136px}
#header #gnb {float:right;}
#header #gnb>ul>li {float:left; position:relative;}
#header #gnb>ul>li.mobile_title {display:none;}
#header #gnb>ul>li:last-child { padding:20px 0}
#header #gnb>ul>li:last-child:hover>a { background:none}
#header #gnb>ul>li>a {color:#474747; font-size:16px; padding:0 30px; display:block;}
#header #gnb>ul>li>a.mobile {display:none;}
#header #gnb>ul>li:hover>a {color:#fff; background-color:#fcb040;}
#header #gnb>ul>li>ul {background-color:#fff; position:absolute; top:80px; left:0; width:100%; min-width:200px; display:none;}
#header #gnb>ul>li:last-child>ul {left:auto; right:0;}
#header #gnb>ul>li:hover>ul {display:block;}
#header #gnb>ul>li>ul>li {font-size:14px; line-height:18px;}
#header #gnb>ul>li>ul>li>a {display:block; padding:10px 15px; transition:all 0.1s ease-out; border-bottom:1px solid #ddd; position:relative;}
#header #gnb>ul>li>ul>li>a span.icon {display:block; position:absolute; top:50%; right:10px; margin-top:-8px;}
#header #gnb>ul>li>ul>li>a span.icon i {font-size:20px; color:#404c59;}
#header #gnb>ul>li>ul>li>a span.icon i.off {display:none;}
#header #gnb>ul>li>ul>li>a:hover {background-color:#3c2313; border-bottom:1px solid #26150a; color:#fff;}
#header #gnb>ul>li>ul>li>a:hover span.icon i {color:#fff;}
#header #gnb>ul>li>ul>li.active>a {background-color:#3c2313; border-bottom:1px solid #26150a; color:#fff;}
#header #gnb>ul>li>ul>li.active>a span.icon i.on {display:none;}
#header #gnb>ul>li>ul>li.active>a span.icon {margin-top:-10px;}
#header #gnb>ul>li>ul>li.active>a span.icon i.off {display:block; color:#fff;}
#header #gnb>ul>li>ul>li>ul {display:none;}
#header #gnb>ul>li>ul>li>ul li a {display:block; padding:8px 12px; border-bottom:1px solid #a1a8ae; font-size:12px; line-height:15px; background-color:#7d8790; color:#fff; transition:all 0.25s ease-out;}
#header #gnb>ul>li>ul>li>ul li a:hover {background-color:#404c59;}
#header .mg_control {display:none;}
#header.changed {background:none; background-color:#fff; border-bottom:1px solid #eee; height:60px; line-height:60px;}
#header.changed h1 img.white {display:none;}
#header.changed h1 img.color {display:inline-block;}
#header.changed #gnb>ul>li>a {color:#000;}
#header.changed #gnb>ul>li:hover>a {color:#fff;}
#header.changed #gnb>ul>li>ul {top:60px; border-top:1px solid #ddd;}
#header.changed #gnb>ul>li>ul>li>a {border:1px solid #ddd; border-top:0;}

/*footer*/
/*#footer {clear:both; background:#2c2c2c; text-align:center; position:relative; font-size:13px; color:#8c8c8c; line-height:22px;  font-family:Roboto, NanumSR;}
#footer .btn_top {position:absolute; top:0; right:0;}
#footer .btn_top a {display:block;}
#footer .btn_top i {color:#fff; width:60px; text-align:center; background-color:#55b9ff; transition:all 0.1s ease-out; line-height:60px;}
#footer .btn_top i:hover {color:#55b9ff; background-color:#fff;}
#footer .address {padding:35px 0; overflow:hidden; zoom:1;}
#footer .address span { display:inline-block; width:15px}
#footer .address .copy { color:#d8dadf; margin-top:5px}*/
#footer {clear:both; background:#2c2c2c; text-align:center; position:relative; font-size:13px; color:#8c8c8c; line-height:22px;  font-family:Roboto, NanumSR;}
#footer .btn_top {position:absolute; top:0; right:0;}
#footer .btn_top a {display:block;}
#footer .btn_top i {color:#fff; width:60px; text-align:center; background-color:#55b9ff; transition:all 0.1s ease-out; line-height:60px;}
#footer .btn_top i:hover {color:#55b9ff; background-color:#fff;}
#footer .address {padding:35px 0; overflow:hidden; zoom:1;}
#footer .address span { display:inline-block; width:15px}
#footer .address .copy { color:#555555; margin-top:5px}

@media screen and (max-width:1280px) {
	
	#header #gnb > ul > li > a { padding:0 26px}
	
}

@media screen and (max-width:1024px) {
	
	.wrap {padding:0 20px;}
	#footer .address {padding:40px 0;}
	
	
	#whole {position:relative;}
	#header {background:none; background-color:#fff; border-bottom:1px solid #eee; height:60px; line-height:60px;}
	#header .wrap {padding:0 0 0 20px;}
	#header {height:50px; line-height:50px;}
	#header.changed {height:50px; line-height:50px;}
	#header h1 {float:none;}
	#header h1 img.white {display:none;}
	#header h1 img.color {display:inline-block;}
	#header #gnb {position:fixed; top:0; right:-200px; width:200px; height:100%; z-index:999999; background-color:#444; /*box-shadow:0 0 3px #444;*/}
	#header #gnb>ul {padding-top:50px; position:relative;}
	#header #gnb>ul>li {float:none;}
	#header #gnb>ul>li.mobile_title {display:block; position:absolute; top:0; left:0; width:100%; height:51px; line-height:51px; text-indent:20px; color:#fff; font-size:16px; font-family:Roboto; font-weight:400; background-color:#333;}
	#header #gnb>ul>li>a {color:#bbb !important; font-size:13px; font-weight:400; height:45px; line-height:45px; padding:0 20px; border-bottom:1px solid #666;}
	#header #gnb>ul>li>a.pc {display:none;}
	#header #gnb>ul>li>a.mobile {display:block;}	
	#header #gnb>ul>li:hover>a {color:#fff !important; }
	#header #gnb>ul>li ul {position:relative; top:auto !important;}
	#header #gnb>ul>li ul li a {border-bottom:1px solid #ddd; font-size:12px; line-height:17px;}
	#header .mg_control {display:block; width:51px; text-align:center; height:51px; line-height:51px; position:absolute; top:0; right:0; background-color:#fcb040; font-size:0; letter-spacing:0; word-spacing:0; cursor:pointer;}
	#header .mg_control i {color:#fff; vertical-align:middle;}
	#header .mg_control #mg_close {display:none;}
	
	#header #gnb>ul>li:last-child a { background:#36ac37; color:#fff}
	#header #gnb > ul > li:last-child { padding:0}
	
}

@media screen and (max-width:965px) {
	#footer .btn_top { bottom:0; top:auto}
	#footer .btn_top i { background:#4f4f4f; line-height:35px; width:35px}
}

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


}

@media screen and (max-width:480px) {
	.wrap {padding:0 30px;}

	
	#footer .address { padding:27px 0}
	

}

@media screen and (max-width:320px) {
	#whole {min-width:260px;}
	#footer .quickmenu .wrap {padding:10px 50px 10px 15px;}
}