@charset "utf-8";

#wrap {position:relative; width:100%; height: 100%;}

.ico_blank, .blank {display:inline-block; width:20px; height:20px; vertical-align:middle; text-indent:-99999px; background:url('/groups/common/images/ico_blank.png') no-repeat}


/* header */
#top_layout {
    display: block;
    position: absolute;
    left: 0;
    top: 0px;
    z-index: 21;
    width: 100%;
	height: 110px;
    text-align: center;
	background:rgba(0,0,0,0.2);
	padding-bottom:20px;
}
#top_layout.open {border-bottom:2px solid #007e50;}

#top_layout.on {/* background:#fff;	*/ z-index: 9999;}

#top_layout .top_wrap {position:relative; width:100%; margin:0px auto; height:90px;}

.logo {position:absolute; top:10px; left:0px; z-index:10; font-weight:500;}
.logo a {position:relative; display:block; width:322px; height:82px; /* width:350px; line-height:48px;*/ font-size: 1.2em; color: #fff; line-height: 82px; padding-left: 20px;}
.logoOpen a {position:relative; display:block; width:322px; height:82px; /* width:350px; line-height:48px;*/line-height:82px; padding-left:20px; color:#000; font-size:1.2em; text-align:center;}
.logo a span.engTxt {position:absolute;top:50px;left:5px;font-size: 13.9px;font-weight:400;display:block;line-height:140%;letter-spacing:0em;/* width: 100%; */}

.logo a:before {position:absolute; top:0px; left:20px; content:""; display:block; width:50px; height:82px; background:url(../images/common/logo.png) no-repeat 0px 0px;}

.top_wrap .head_top {position:absolute; top:30px; right:0px; font-size:1.15em; z-index:10;}
.top_wrap .head_top::after {display:block;clear:both; content:''}
.top_wrap .head_top .right {float:right; display:flex; justify-content:center; align-items:center;}
.top_wrap .head_top .right li {display:inline-block; position:relative}
.top_wrap .head_top .right li:first-child::after,
.top_wrap .head_top .right li:last-child::after {display:none;}
.top_wrap .head_top .right li::after {display:block; content:""; width:2px; height:2px; background:#fff; position:absolute; top:50%; left:0; margin-left:-1px;}
.top_wrap .head_top .right li a {display:block; font-size:15px; padding:0 7px; line-height:35px; color:#fff;}
.top_wrap .head_top.open .right li a {color:#959595;}
.top_wrap .head_top.open .right li::after {background:#959595;}
.top_wrap .head_top .right li a.top_siteMap {width:48px; height:48px; background:url('../images/common/all_menu.png') no-repeat left center; display:block; text-indent:-1000em;}

#top_layout.on + .gnb_bg {
    display: block;
    z-index: 99;
}

#top_layout + .gnb_bg {
    display: none;
    position: fixed;
    top: 50px;
    left: 0;
    z-index: 2;
    width: 100%;
    height: 100%;
    background: #000;
    opacity: 0.5;
    content: '';
    transition: all 0.3s ease-out;
    -webkit-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
}

#gnb_layout {display: block; /*overflow: hidden;*/ position:relative; width: 100%; max-width:1400px; margin:0px auto; height:110px; min-height: 110px; transition: all 0.3s ease-out; -webkit-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out;}

.siteMap { position: absolute; right: 20px; top:42px; width: 28px; height: 25px; display: block; z-index: 10;}
.siteMap a {display: block; background: url(../images/common/ic_site.png)no-repeat; text-indent: -9999px; background-size:contain; }


#gnb {
    position: absolute;
    top:0px;
    left: 0;
    width: 100%;
    height:110px;
    min-height: 110px;
    z-index: 2;
}

#mainMenu {
    position: relative;
    margin: 0 auto;
    width: 100%;
	max-width:1400px;
}

#mainMenu:after {
    display: block;
    visibility: hidden;
    clear: both;
    content: "";
}

#mainMenu .gnbDiv {	
	 display: flex;
    float: none;
    width: 100%;
    height: 100%;
	padding-top:10px;
    /*padding-left:50px; 기존*/
	padding-left:400px;
	padding-right:100px;
    z-index: 14;
    text-align: center;
}

#mainMenu .gnbDiv:after {display: block; content: ''; clear: both;}
#mainMenu .gnbDiv > li {display: inline-block; width: calc(100% / 6); height: 100%; margin: 0; vertical-align: top;}

#mainMenu .gnbDiv > li > a {position: relative; display: block; height:90px; line-height:90px; font-size:1.6em; color: #fff; letter-spacing: 0; transition: all .3s; text-align: center; font-weight:500;}
#mainMenu .gnbDiv > li > a:after {display:block; content:""; width:100%; height:3px; background:#15e314; position:absolute; bottom:-10px; left:0px; z-index:10; opacity:0; transition: all 0.2s ease-out;}

#mainMenu .gnbDiv > li:first-child a {}
#mainMenu .gnbDiv > li:first-child {}

#mainMenu .gnbDiv > li.last {padding-right:0px;}
#mainMenu .gnbDiv > li:hover {color:#15e314; transition: all 0.4s ease-out;}
#mainMenu .gnbDiv > li:hover > a {color:#15e314; transition: all 0.4s ease-out;}
#mainMenu .gnbDiv > li:hover > a:after {opacity:1; transition: all 0.2s ease-out;}

#mainMenu .twoDep {position:relative; overflow:hidden; top:10px; left:-10px; width: 170px; box-sizing:border-box; height:0; transition: all 0.2s ease-out; background: rgba(0, 0, 0, 0.5); border-radius:0px 0px 20px 20px;}
#mainMenu .twoDep_in {position:relative; width: 95%; height:max-content; box-sizing:border-box; margin:0 auto; overflow:hidden; opacity:0; transition: all 0.4s ease-out;}

#mainMenu .twoDep_menu {position:relative; width:160px; float:right; opacity:0; transition: all 0.4s ease-out; z-index:100}
#mainMenu .twoDep_menu li {}
#mainMenu .twoDep_menu a {display:block; font-size:1.2em; font-weight:500; color:#fff; letter-spacing:-0.5pt; line-height:100%; padding:15px 0; border-bottom:1px solid rgba(255,255,255,0.5); text-align:center; width:160px; box-sizing:border-box; transition: all 0.4s ease-out;}
#mainMenu .twoDep_menu li:last-child a {border-bottom:none;}
#mainMenu .twoDep_menu a:nth-child(4n){margin-right:0px;}
#mainMenu .twoDep_menu.two a:nth-child(4n+1) {clear:both;}
#mainMenu .twoDep_menu a.next {clear:both;}
#mainMenu .twoDep_menu a:hover {color:#15e314; border-color:#15e314; transition: all 0.4s ease-out; }

#mainMenu .gnbDiv > li:hover .twoDep_in {opacity:1; transition: all 0.4s ease-out;}
#mainMenu .gnbDiv > li:hover .twoDep {z-index:100; height:max-content; opacity:1; transition: all 0.2s ease-out;}
#mainMenu .gnbDiv > li:hover .twoDep_tit {opacity:1; transition: all 0.4s ease-out;}
#mainMenu .gnbDiv > li:hover .twoDep_menu {opacity:1; transition: all 0.4s ease-out;}




/******************************************************************************************************************************************
	footer CSS (하단푸터 스타일) - 쮸양~★
*******************************************************************************************************************************************/
footer {position:relative; width:100%; padding:30px 0px; clear:both; z-index:11; background:#1b2a3f;}

/* 카피라이터 */
.copyrights {position:relative; width:100%; margin:0px auto; text-align:center; overflow:hidden;}
.copyrights .footer_info {font-size:0.9em; color:#fff;}
.copyrights .footer_info address {display:block; line-height:1.6}
.copyrights .footer_info address span {padding:0px 5px;}
.copyrights .footer_info .tel {margin:0px 5px 0px 10px; color:#fff;}
.copyrights .footer_info small {font-size:0.9em}
.copyrights .footer_info small a {text-decoration:none}
.copyrights span.dark_gray {color:#676767;}

footer .footer_bn {position:absolute; right:0px; top:20px; display:inline-block;}
footer .footer_bn li {float:left; text-indent:-1000em; border-radius:50px; margin-left:5px;}
footer .footer_bn li a {width:30px; height:30px; display:block;}
footer .footer_bn li.home {background:#0d3896 url(../images/common/foot_01.gif) no-repeat center center;}
footer .footer_bn li.blog {background:#00c73c url(../images/common/foot_02.gif) no-repeat center center;}
footer .footer_bn li.face {background:#4676ed url(../images/common/foot_03.gif) no-repeat center center;}
footer .footer_bn li.kakao {background:#fae100 url(../images/common/foot_04.gif) no-repeat center center;}


@media all and (max-width:1279px) {
    footer {padding: 20px;}
}

@media all and (max-width:500px) {
	footer {font-size:13px; padding: 20px;}
}