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

/*basic*/
#whole {overflow:hidden; position:relative; padding-left:35px;padding-right:35px;}
.wrap {max-width:1200px; margin:0 auto; position:relative; border:0px solid red;}
.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:120px; line-height:120px; /*background:url(/img/common/top_bg.png);*/ background:#fff; z-index:999999; transition:all 0.1s ease-out; border-top:4px solid #680505}
#header h1 {font-size:0; letter-spacing:0; word-spacing:0; float:left; width:250px;}
#header h1 img {vertical-align:middle;}
#header h1 img.color {display:none; width:136px}
#header #gnb {float:left; width:950px; }
#header #gnb>ul>li {float:left; position:relative;}
#header #gnb>ul>li.mobile_title {display:none;}
#header #gnb>ul>li:last-child {  font-size:13px; }
#header #gnb>ul>li:last-child:hover>a { background:none}
#header #gnb>ul>li .util{padding-right:5px;padding-left:5px; color:#cccccc; font-size:12px;}
#header #gnb>ul>li>a {color:#474747; font-size:17px; padding:0 25px; display:block; font-weight:500;}
#header #gnb>ul>li>a.mobile {display:none;}
#header #gnb>ul>li:hover>a {color:#fff; background-color:#680505;}
#header #gnb>ul>li>ul {background-color:#fff; position:absolute; top:120px; 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; font-weight:500;}
#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; color:#333;}
#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;}
.util01{width:200px; border:0px solid red;text-align:right;}

/*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 .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  (min-width:1217px)  {
#header #gnb > ul > li > a { padding:0px 25px;}
}



@media screen and  (min-width:1024px) and (max-width:1280px) {

#header #gnb > ul > li > a { padding:0px 8px !important;}
#header #gnb  { width:auto !important; float:right; padding-right:45px;}
.left_banner ul {width:100% !important; position:relative !important;}
.left_banner ul li{overflow:hidden; width:33.3% !important;  overflow:hidden; float:left !important;  padding:none !important;} 
.left_banner ul li img{width:100% !important; padding:none !important; margin:0px !important; } 
.show_smalldesktop {display:block !important;}
.hover_text7 {line-height:14px !important;}
}


.left_banner  {box-sizing:border-box; padding:70px 3%; width:100%; }

.left_banner dl {overflow:hidden; float:left; width:33.3%;}
.left_banner dl dt {text-align:center;}
.left_banner dl dt  img {width:80%; max-width:120px;}
.left_banner dl dd{text-align:center;font-size: 18px;
color: #fff; line-height:22px; padding-top:20px;
font-weight: 600;}
.show_smalldesktop {display:none;}


@media screen and (max-width:1280px) {
#header #gnb {float:left; max-width:950px; }
#header #gnb>ul>li>a {color:#474747; font-size:17px; padding:0 5px; display:block; font-weight:500;}
.util01{width:190px; text-align:right; float:right; font-size:13px; }
	
}

@media screen (min-width:1025px) and (max-width:1280px) {
.util01{width:190px; text-align:right; float:right; font-size:13px; color:#999; }
}


@media screen and (max-width:320px)  {
	
	.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:13px; 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; font-size:12px;}
	#header #gnb > ul > li:last-child { padding:0}
	

}