@charset "UTF-8";

#wrap {outline: 0; overflow:hidden}
#wrap.sitemap #header {position:fixed}
#wrap.sitemap #issue .tt a {display:none}
#header {width:100%; position:absolute; top:0; left:0; z-index: 5}
#wrap.active #header:before {content: ''; background-color:#eaeaea; width:100%; height:0.1rem; position:absolute; top:11.5rem; left:0; z-index:1}
#header .header_wrap {padding:0 20rem}



#main_wrap {position:relative; margin:0 auto; clear:both; overflow:hidden}

#logo {width:16.5rem; position:absolute; left:10.5rem; top:2rem; z-index:2}
#logo a {display:block}

#hnb {position:absolute; right:10rem; top:3.5rem}
#hnb li {color: #ffffff;display: inline-block;font-size: 2.4rem; line-height: 5rem; text-align: center; margin-left: 1.5rem;border-radius: 100%;background-color: #5ab534}
#hnb li.sitemap {background-color: #3f435e}
#hnb li a {position:relative; display:block; width: 4.3rem; height: 4.3rem; overflow:hidden; line-height:inherit;}


#gnb1 {position:relative}         
#gnb1 > ul {display:flex; width:100%; padding-left:10%; text-align:center; position:absolute; right:0; top:0;padding-bottom: 3px;}
#gnb1 > ul > li { width:20%; overflow: hidden}
#gnb1 > ul > li > a {position:relative; color:#333; display:inline-block; font-size:2.1rem; font-weight:500; transition:all .3s; line-height:5.5}
#gnb1 > ul .submenu {visibility: hidden; overflow: hidden; width: 0; height: 0; opacity: 0; display: block !important; width: 100% !important; border-left: 1px solid #eaeaea; padding-top:2rem}
#gnb1 > ul .submenu ul li {line-height:2}
#gnb1 > ul .submenu ul li:last-child {margin-bottom:3rem}
#gnb1 > ul .submenu ul li a {position:relative; color:#797979; display:inline-block; transition:all .3s; padding-bottom: 1rem; font-size:1.5rem; font-weight:200}
#gnb1 > ul .submenu ul li:hover a:before {content:''; width:5px; height:5px; background-color:#ffbd1d; position:absolute; left:-1rem; top:1.2rem; border-radius:100%}

#gnb1 > ul .submenu ul li div {display:none;}
#gnb1 > ul > li > .submenu .desc {position: absolute; left:-3rem; top:50%; width: 24rem; word-break: keep-all; text-align:left; opacity:0}
#gnb1 > ul > li > .submenu .desc .title {position:relative; color:#333; font-size:4rem; display:inline-block;}
#gnb1 > ul > li > .submenu .desc .title:before {content:''; width:2.8rem; height:2.8rem; position:absolute; right:-1rem; top:0; background-color:#ffbd1d; border-radius:100%; z-index:-1}
#gnb1 > ul > li > .submenu .desc .con {color:#777; font-size:1.7rem; display:block; font-weight:200}
#gnb1 > ul > li.lnb5 .submenu {border-right: 1px solid #eaeaea}

#gnb1 > ul > li:hover .desc {opacity:1}

#wrap.active #gnb1 > ul .submenu { visibility: visible; overflow: hidden; height:100%; opacity: 1; display: block !important; width: 100% !important}
#wrap.active #gnb1 #head_menu:before {content:''; width:46rem; height:100%; position:absolute; left:-20rem; top:-3px; background: url('/kor/img/layout/menu_back.jpg') no-repeat 0 bottom; vertical-align: top; word-break: keep-all; text-align:left; z-index:-1}
#wrap.active #gnb1 #head_menu:after {content:''; width:1000%; height:100%; background-color:#fff; position:absolute; left:50%; /*! top:3rem; */ z-index:-2; transform:translateX(-50%); border-bottom:3px solid #ffbd1d}

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

	#gnb1 > ul > li > a:after,
    #gnb1 > ul > li > a:after {content:''; background-color:#ffbd1d; width:0; height:.3rem; position:absolute; left:50%; top:11.4rem; transform:translateX(-50%); opacity:0; transition:all .3s; z-index:1}
    #gnb1 > ul > li:hover > a:after  {width:100%; opacity:1}
    #gnb1 > ul > li > a.active:after  {width:100%; opacity:0}
    #gnb1 > ul > li:hover a,
    #gnb1 > ul > li > a:hover,
    #gnb1 > ul > li > a.active,
    #gnb1 > ul .submenu ul li a:hover {color:#6b5d2a; font-weight:500}
}

/*전체메뉴*/
#gnb2 {display:none}


#footer {background-color:#fff}
#footer .footer_wrap {clear:both; width:169rem; max-width:calc(100% - 2rem); margin:0 auto; padding:3.5rem 0 3.5rem 24rem; position:relative; word-break:keep-all}
#footer .footer_wrap .f-logo {background: url(/kor/img/layout/logo-f.png)no-repeat; width: 23rem; height: 10rem; position: absolute; left: 0; top: 1rem; }

.siteinfo {position:relative}
.siteinfo address {color:#5e5d5d; font-size:1.5rem}
.siteinfo address .tel {display:inline-block; margin-left:1rem; padding-left:1rem; position:relative}
.siteinfo address .tel:before {content:''; width:1px; height:1.1rem; background-color:rgba(193,193,103,50%); position:absolute; left:-1px; top:0.8rem}
.siteinfo .copyright {color:#5e5d5d; font-size:1.3rem; font-weight:500; text-transform:uppercase}

.mark {display:block; width:10rem; height:7rem; position:absolute; right:0; top:0;}