@charset "utf-8";

@import url("animation.css");


/** Common **/
.js_mobile_check {display:none; position:absolute; left:0; top:-1000px; width:1px; height:1px; line-height:1px;}
#wrap {margin:0 auto; overflow:hidden;}
.sub #wrap {padding:100px 0 0 0;}
.content {margin-top: 50px;width: 728px;margin-left: auto;margin-right: auto;padding: 20px;background-color: rgba(0,0,0,.3);color:#fff}

/** Header **/
#slide_map {display:none;}
#header {position:absolute; top:0; left:0; width:100%; height:auto; z-index:100;box-shadow: 0px 2px 5px rgba(0,0,0,0.3);background-color:#fff}
#header #global {position:relative; background:#464646; color:#fff; width:auto; padding:0 3%;}
#header #global:after {content:""; display:block; clear:both;}
#header #global span {display:inline-block; vertical-align:top; float:left; padding:7px 12px 7px 0;}
#header #global a {display:inline-block; vertical-align:top; background:#373737; color:#fff; padding:7px 15px; float:left; margin-left:2px;}
#header .topmenu {position: relative;max-width: 1180px;margin: 0 auto}
#header .inner {position: relative;max-width: 1180px;margin: 0 auto;clear: both}
.utility {overflow:hidden;background-color:#000}
.utility ul {float:right}
.utility ul li {float:left}
.utility ul li a {color:#fff;font-size:12px;padding:6px 0 6px 30px;display:inline-block;opacity:0.8}
#header h1.logo {position:absolute;top:22px; z-index:999}
#header h1.logo a {display:block; background:url('/images/common/logo.gif') no-repeat left top; width: 227px;height: 48px}
#header h1.logo a span {line-height:1px; font-size:1px; position:absolute; left:-10000px; top:0; overflow:hidden; text-indent:-30000px;}
#header .mob_btn {display:none;}
#header #nav {height:100px;position:relative; overflow:hidden;float: right}
#header #nav .text {position: absolute;top: 101px;z-index: 1;text-align: right;padding-top: 43px;font-size: 23px;font-weight: 600;line-height: 33px;color: #919191}
#header #nav .text span {font-family: Nanum Myeongjo;font-size: 18px}
#header #nav .text strong {color: #89b229;font-weight: 600}
#header #nav #blind {width:100%;background:#fff; position:fixed; left:0; top:131px; z-index:1;box-shadow: 0px  2px 5px rgba(0,0,0,0.2)}
#header #nav #gnb {position:relative; z-index:10;margin-right: -9px;}
#header #nav #gnb ul {width:100%; height:auto;}
#header #nav #gnb ul:after {content:""; display:block; clear:both;}
#header #nav #gnb ul li {float:left}
#header #nav #gnb ul > li:nth-child(1) {width:170px}
#header #nav #gnb ul > li:nth-child(2) {width:187px}

#header #nav #gnb ul > li.eng:nth-child(2) {width:247px}

#header #nav #gnb ul > li:nth-child(3) {width:207px}
#header #nav #gnb ul > li:nth-child(4) {width:165px}
#header #nav #gnb ul > li:nth-child(5) {width:165px}
#header #nav #gnb ul > li:nth-child(6) {width:53px}
#header #nav #gnb ul li a {display:block; text-align:center; text-decoration:none}
#header #nav #gnb ul li a span {display:inline-block; vertical-align:top; font-size:16px; height:65px; padding:31px 0 0 0; line-height:30px; font-weight:600; position:relative;width: 100%}
#header #nav #gnb ul li a span.stoa img {vertical-align: -2px}
#header #nav #gnb ul li a span.stoa {position:relative}
#header #nav #gnb ul li a span.stoa:before {position: absolute;top: 26px;right: 65px;width: 34px;height: 11px;background: url('/images/common/shop.gif') no-repeat;content: ''}
#header #nav #gnb ul li a span:after {content:""; display:block; height:2px; width:0px; position:absolute; bottom:-35px}
#header #nav #gnb ul li a.on span, #header #nav #gnb ul li a:hover span, #header #nav #gnb ul li a:active span {color:#fc8a37;}
#header #nav #gnb ul li a.on span:after, #header #nav #gnb ul li a:hover span:after, #header #nav #gnb ul li a:active span:after {width:100%; background:#fc8a37;padding-left:50%; opacity:1; -webkit-opacity:1; filter:alpha(opacity=100);}

#header #nav #gnb ul li a:active .logo:after,
#header #nav #gnb ul li a:hover .logo:after,
#header #nav #gnb ul li a:focus .logo:after
{background:none}

#header #nav #gnb ul li ul {width:auto; padding:15px; margin-top:35px;}
#header #nav #gnb ul li ul.on {background:#fc8a37}
#header #nav #gnb ul li ul li:last-child {display:block;}
#header #nav #gnb ul li ul li {float:none; width:auto !important; margin:3px 0 0 0;text-align: center}
#header #nav #gnb ul li ul li a {display:inline-block; vertical-align:top; font-size:13px; line-height:22px; height:auto; padding:5px 0; color:#444}
#header #nav #gnb ul li ul.on li a, #header #nav #gnb ul li ul:hover li a {color:#fff}
#header #nav #gnb ul li ul li a strong {font-weight:normal;}
#header #nav #gnb ul li ul li a:hover, #header #nav #gnb ul li ul li a:active {text-decoration:none; color:#fff;}
#header #nav #gnb ul li ul li ul {display:none !important;}
#header .toputil {position:absolute; right:0; top:25px; z-index:10}
#header .toputil:after {content:""; display:block; clear:both;}
#header .toputil .site_code {float:left; margin:21px 15px 0 15px;}
#header .toputil .site_code ul {width:auto;}
#header .toputil .site_code ul:after {content:""; display:block; clear:both;}
#header .toputil .site_code ul li {float:left; padding:0 10px; height:28px; line-height:28px; font-weight:600; color:#0261cb;}
#header .toputil .site_code ul li a {display:block; height:100%; line-height:28px;}
#header #nav #gnb ul li a span.logo {background: url(/images/common/menu_bg.gif) no-repeat 0px 35px;width: 28px;line-height: 0;text-indent: -999em}

/*********************************** footer ****************************************************/
.topnav {position: absolute;right: 10px;top:0;background: rgba(255,255,255,0.1) url(/images/common/topnav.png) no-repeat center;display: inline-block;width: 50px;height: 50px;text-indent:-999em}
#footer {width: 100%;background-color: #212230;padding: 50px 0;overflow: hidden;margin-top: 50px}
#footer .inner_wrap {max-width: 1180px;position: relative;color: #fff;padding: 0 20px;margin: 0 auto;font-size: 12px}
#footer .inner_wrap .bottom_logo {margin: 0 auto;text-align: center}
#footer .inner_wrap .bottom_logo > h6 {display: inline-block;background: url('/images/common/bottom_logo.png') no-repeat 0;text-indent: -999em;width: 138px;height: 93px}
#footer .inner_wrap address {text-align: center;color: rgba(255,255,255,0.4);font-size: 1.2em}
#footer .inner_wrap address span {display:block;color:#61ff58}
#footer .inner_wrap .wa {float: right;background: url(/images/common/wa.png) no-repeat 0 0;width: 98px;height: 58px;text-indent:-999em;margin-top: 28px}
#footer .inner_wrap .select {float: right;margin-top: -5px}

.footBtn {float: left;position: relative;overflow: visible;margin: 0 0 6px 5px;border: 1px solid #ccd1da}
.footBtn button {height: 30px;overflow: hidden;background: #f7f7f7 url(/images/common/more.gif) no-repeat center right;text-align: left;color: #404040;width: 100%;padding: 3px 0 5px 10px}
.footBtn ul {display: none;position: absolute;bottom: 30px;z-index: 10000;background: #f7f7f7;border: 1px solid #ccd1da;border-bottom: 0;width:100%;box-sizing: content-box;left:-1px}
.footBtn ul li {border-bottom: 1px dashed #dedede}
.footBtn ul li a {display: block;overflow: hidden;padding: 7px 7px;color: #404040;background: #fff}
.footBtn ul li a:hover, .footBtn ul li a:focus, .footBtn ul li a:active {color: #fff;background: #404040}
.w01 {width: 200px}
.w02 {width: 152px}
.orange {color: #ff9c08}



/*********************************** Media-quary *************************************************/

@media screen and (max-width: 1480px){
#header .toputil .sns_link {float:none; margin:0; position:absolute; top:8px; left:13px;}
#header .toputil .site_code {margin:40px 25px 0 25px;}
}

@media screen and (max-width: 1400px){
	#header #nav #gnb ul li ul {padding:15px 10%;}
}

@media screen and (max-width: 1340px){
#header #nav #gnb ul li a span {font-size:16px;}
#header #nav #gnb ul li ul li a {font-size:13px; line-height:20px;}
}

@media screen and (max-width: 1280px){
	#footer .inner_wrap nav {margin: 0 auto;float: none;display: table;text-align:center}
	#footer .inner_wrap .select {float: none;display: table;margin: 23px auto 0}
	
}
/****메뉴바 변경 지점*****/

@media screen and (max-width: 1120px){
	.js_mobile_check {display:block;}
	.sub #wrap {padding:0;}
	#header {border-bottom: 1px solid rgba(255,255,255,0.2)}
	#slide_map {display:none; position:absolute; width:100%; height:100%; left:0; top:0; z-index:999; opacity:0; -webkit-opacity:0; filter:alpha(opacity=0); overflow:hidden;}
	#slide_map .box {position:absolute; right:-100%; top:0; width:100%; height:100%; background:#fff; z-index:10;}
	#slide_map .box .title {display:block; position:absolute; width:100%; font-size:18px; line-height:28px; padding:12px 15px; min-height:28px; background-color:#fc4237; color:#fff; box-sizing:border-box;}
	#slide_map .box .binds {height:100%; overflow:hidden; background:#fff;}
	#slide_map .box ul {width:auto; height:auto; margin:0 3%; padding:60px 0 0 0;}
	#slide_map .box ul li {}
	#slide_map .box ul li a {display:block; border-bottom:1px solid #cecece; color:#1e1e1e; text-decoration:none; position:relative;}
	#slide_map .box ul li a span {display:block; font-size:16px; line-height:22px; font-weight:600; padding:14px 10px;}
	#slide_map .box ul li a:after {content:""; display:block; width:11px; height:7px; background:url(/images/common/down.gif) no-repeat center 50%; position:absolute; right:10px; top:50%; margin-top:-3px;}
	#slide_map .box ul li a.on {border-bottom:1px solid #fc4237; color:#fc4237}
	#slide_map .box ul li a.on:after {background:url(/images/common/up.gif) no-repeat center 50%}
	#slide_map .box ul li ul {display:none; margin:0; padding:8px 0; border-bottom:1px solid #cecece}
	#slide_map .box ul li ul li {}
	#slide_map .box ul li ul li a {border:0 !important; color:#444;}
	#slide_map .box ul li ul li a:hover, #slide_map .box ul li ul li a:active {text-decoration:none;}
	#slide_map .box ul li ul li a strong {display:block; font-weight:normal; font-size:16px; line-height:22px; padding:8px 10px 8px 27px; background:url(/images/common/off.gif) no-repeat 15px 18px;}
	#slide_map .box ul li ul li a.on {background:#fc4237; color:#fff;}
	#slide_map .box ul li ul li a.on strong {background:url(/images/common/mob_depth2_bul_on.gif) no-repeat 15px 18px;}
	#slide_map .box ul li ul li a:after {display:none;}
	#slide_map .box ul li ul li ul {display:none; background:#f7f7f7; border:0;}
	#slide_map .box ul li ul li ul li a {color:#555;}
	#slide_map .box ul li ul li ul li a strong {font-size:15px; line-height:19px; padding:5px 10px 5px 27px; background:url(/images/common/mob_depth3_bul_off.gif) no-repeat 18px 12px;}
	#slide_map .box ul li ul li ul li a.on {color:#fc4237; background:none;}
	#slide_map .box ul li ul li ul li a.on strong {background:url(/images/common/mob_depth3_bul_on.gif) no-repeat 18px 12px;}
	#slide_map .box ul li ul li ul li ul {background:none; padding:0 0 5px 0;}
	#slide_map .box ul li ul li ul li ul li {}
	#slide_map .box ul li ul li ul li ul li a {color:#666;}
	#slide_map .box ul li ul li ul li ul li a strong {font-size:14px; line-height:18px; padding:3px 10px 3px 38px; background:url(/images/common/mob_depth4_bul.gif) no-repeat 27px 12px;}
	#slide_map .box ul li ul li ul li ul li a.on {color:#666;}
	#slide_map .box ul li ul li ul li ul li a.on strong {background:url(/images/common/mob_depth4_bul.gif) no-repeat 27px 12px; text-decoration:none;}
	#slide_map .box .close {display:block; position:absolute; right:0; top:0; width:52px; height:52px; z-index:51; background:#fc4237; text-indent:-9999px;}
	#slide_map .box .close:after {content:""; display:block; width:100%; height:100%; position:absolute; left:0; top:0; background:url(/images/common/close.png) no-repeat center 50%; -webkit-transition: all .8s ease; transition: all .8s ease;}
	#slide_map .box .close:hover:after, #slide_map .box .close:active:after {-webkit-transform:rotate(180deg); transform:rotate(180deg);}
	#slide_map .blind {display:block; position:absolute; width:100%; height:100%; left:0; top:0; z-index:1; background:#000; opacity:0.75; -webkit-opacity:0.75; filter:alpha(opacity=75);}
	#slide_map .box .sns_link {width:auto; padding:0 3%;}
	#slide_map .box .sns_link ul {padding:25px 0; margin:0;}
	#slide_map .box .sns_link ul li {float:left; width:32%; margin-left:2%;}
	#slide_map .box .sns_link ul li:first-child {margin:0;}
	#slide_map .box .sns_link ul li a {display:block; border-bottom:0; color:#fff; height:38px; border-radius:5px; -webkit-border-radius:5px; overflow:hidden;}
	#slide_map .box .sns_link ul li a.blog {background:#21c407;}
	#slide_map .box .sns_link ul li a.facebook {background:#3e5a99;}
	#slide_map .box .sns_link ul li a.twitter {background:#00acec;}
	#slide_map .box .sns_link ul li a span {line-height:1px; font-size:1px; position:absolute; left:-10000px; top:0; overflow:hidden; text-indent:-30000px;}
	#slide_map .box .sns_link ul li a:after {width:100%; height:100%; left:0; top:0; margin:0;}
	#slide_map .box .sns_link ul li a.blog:after {background:url(/images/common/mob_sns_link_ico1.png) no-repeat center 50%;}
	#slide_map .box .sns_link ul li a.facebook:after {background:url(/images/common/mob_sns_link_ico2.png) no-repeat center 50%;}
	#slide_map .box .sns_link ul li a.twitter:after {background:url(/images/common/mob_sns_link_ico3.png) no-repeat center 50%;}
	#slide_map .box .site_code {position:absolute; right:52px; top:0;}
	#slide_map .box .site_code ul {margin:0 10px 0 0; padding:0;}
	#slide_map .box .site_code ul li {float:left;}
	#slide_map .box .site_code ul li:first-child {display:none;}
	#slide_map .box .site_code ul li a {display:block; height:39px; padding:13px 10px 0 10px; font-size:20px; line-height:24px; border:0; color:#fff;}
	#slide_map .box .site_code ul li a:after {display:none;}
	.sub #header {position:relative;}
	#header .inner { height:80px;}
	#header h1.logo {left: 50%;top: 20%;margin-left: -92px}
	#header h1.logo a {background: url('/images/common/logo.gif') no-repeat center top / 80%}
	#header #nav {display:none;}
	#header .mob_btn {display:block; width:48px; height:48px; background:url(/images/common/menu_bg.gif) no-repeat center 50%; position:absolute; left:3%; top:15px;}
	#header .mob_btn:hover, #header .mob_btn:active {border:1px solid #8e8e8e;}
	#header .toputil {width:100%; right:0; top:0; padding:0;}
	#header .toputil .sns_link {display:none;}
	#header .toputil .site_code {display:none;}
	#header .toputil .totalsearch {position:absolute; right:0; top:0; overflow:visible; width:100%; padding:0 !important;}
	#header .toputil .totalsearch .btn {width:48px; height:48px; position:absolute; right:3%; top:15px;}
	#header .toputil .totalsearch .input {width:100%;padding: 5px 0; position:absolute; right:0 !important; top:80px;background: rgba(255,255,255,0.2)}
	#header .toputil .totalsearch .input form {display:block; position:relative; padding:0 54px 0 0; width:90%; margin:0 auto;}
	#header .toputil .totalsearch .input input[type="text"] {width:100%; height:44px; line-height:54px;}
	#header .toputil .totalsearch .input input[type="submit"] {top:0; width:54px; height:44px;}
	

}

@media screen and (max-width: 1109px){
	#header #nav .text {display:none}
	.topmenu {padding: 0 2%}
	.menu6.num6 {display:none}
	
}

@media screen and (min-width: 1024px){
	
	.relate_site dd {display:block !important;}
	.relate_site dd ul {display:block !important;}
}

@media screen and (max-width: 840px){
	#header .inner {height:70px;}
	#header .mob_btn {top:12px; width:44px; height:44px;}
	#header h1.logo {top: 15%}
	#header .toputil .totalsearch .btn {width:44px; height:44px; top:12px;}
	#header .toputil .totalsearch .input {top:70px}
	#header .toputil .totalsearch .input form {padding:0 50px 0 0;}
	#header .toputil .totalsearch .input input[type="text"] {height:40px; line-height:50px; font-size:15px;}
	#header .toputil .totalsearch .input input[type="submit"] {width:50px; height:40px;}
}

@media screen and (max-width: 640px){
	#header .toputil .totalsearch .input form {width:96%}
}

@media screen and (max-width: 360px){
	.topnav {top:-65px}
}

