#header {position: relative;    background: #fff;}
#header > .top-nav {
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    line-height: 70px;
    height: 70px;
}
.tlogo {display:block; /*padding: 5px 0 0;*/}
.tlogo img {max-width: 100%;    margin-left: -170px;}
.tlogo h1 {line-height: 70px;}



/*모바일메뉴버튼*/
.top-btn {
    position: absolute;
    cursor: pointer;
    right: 0;
    top: 25px;
    z-index: 999;
    transition: top 0.5s;
    display: none;
}
.top-btn span {
    display: block;
    width: 35px;
    height: 2px;
    border-radius: 1px;
    background: #000;transition: all 0.5s;
}
.top-btn span:nth-child(2) {width: 30px;}
.top-btn span + span {margin-top: 7px;}


#header.header_scroll .top-btn.on span:nth-child(3) {
    transform: rotate(-45deg);
    margin-top: -2px;
}
#header.header_scroll .top-btn.on span:nth-child(1) {
    transform: rotate(45deg);
    margin-top: 10px;
}
#header.header_scroll .top-btn.on span:nth-child(2) {
    display: none;
}







.modal {background: rgba(0,0,0,0.9);z-index: 999999;text-align: center;transition: all 0.5s;}
.modal-nav {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}
#moadl-gnb a {font-size: 32px;    color: #fff;position: relative;}
#moadl-gnb li:hover a {font-size: 32px;    color: #fff;}
#moadl-gnb a::after {
    content: "";
    width: 0;
    height: 12px;
    background: rgba(0,124,55,0.8);
    position: absolute;left: 0;bottom: -5px;transition: all 0.5s;
    z-index: -1;
}
#moadl-gnb li:hover a::after {
    width: 100%;
}

.active .modal {display: block;}
.active .top-btn {z-index: 9999999; right: 10%; top: auto; display: block; width: 40px; height: 40px;}
.active .top-btn span {background: #fff;}
.active .top-btn span {position: absolute;}
.active .top-btn span:nth-child(2){display: none;}
.active .top-btn span:nth-child(3) {transform: rotate(-45deg);top: 10px;}
.active .top-btn span:nth-child(1) {transform: rotate(45deg);top: 17px;}



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

    #header > .top-nav {padding: 0px 10px 0; line-height: 80px;}
    .top-btn {right: 10px; display: block;}
    .active .top-btn {right: 15%;}


    #header.header_scroll .top-btn.on span:nth-child(3) {
        transform: none;
        margin-top: 7px;
    }
    #header.header_scroll .top-btn.on span:nth-child(1) {
        transform: none;
        margin-top: 7px;
    }
    #header.header_scroll .top-btn.on span:nth-child(2) {
        display: block;
    }



}


@media screen and (max-width: 575px){
    .tlogo h1 {line-height: 75px;}
    .top-left {float: inherit!important; position: absolute; right: 60px; text-indent: -9999px; font-size: 0px; color: #fff;}
    .tlogo.text-center {text-align: left!important;}
    .tlogo h1 img {max-width: 40%;}
    .tlogo img {margin-left: 0;}




}

/*로그인*/
.login {position: absolute; top: 0; right: 0;}
.login ul {display: flex; flex-wrap: wrap;}
.login ul li {padding-left: 25px; position: relative;}
.login ul li::before {position: absolute; content: ""; background: #555; width: 2px; height: 2px; border-radius: 100%; top: 50%; transform: translateY(-50%); left: 13px;}
.login ul li:first-child::before {display: none;}
.login ul li:first-child {padding-left: 0px;}
.login ul li a {font-size: 14px; font-weight: 300; color: #555;}

#header .header_bg {
    position: absolute;
    z-index: 9999;
    top: 70px;
    left: 0;
    right: 0;
    background: #f4f4f4;
    overflow: hidden;
    border-top: 1px solid #ddd;display: block!important;

}
#header .header_bg.active {box-shadow: 0 30px 20px rgba(0,0,0,0.1);}
.header_gnb {background: #fff;}
#header .contains {max-width: 1200px; margin: 0 auto;transition: all 0.5s;}


.container-mn {display: inline-block;width: 100%;}
.main-nav #gnb {display: flex; justify-content: flex-end; text-align: center;}

.main-nav #gnb > li {width: 20%; position: relative; border-right: 1px solid #ddd;transition: all 0.5s;}
.main-nav #gnb > li:first-child {border-left: 1px solid #ddd;}
.main-nav #gnb > li > a {display: block;font-size: 18px; color: #222; font-weight: 600; text-transform: uppercase;padding: 13px 10px; letter-spacing: -0.02em;}
.main-nav #gnb > li:hover {background-color: #3fb54b;}
.main-nav #gnb > li:hover > a {color: #fff;}
.main-nav #gnb > li.on > a {color: #3fb54b ;border-bottom: 2px solid #3fb54b ;position: relative;}

.main-nav #gnb > li.on > a::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #3fb54b ;
    position: absolute;
    top: 18px;
    left: 50%;
    margin-left: -2px;
}
/*.main-nav #gnb li:last-child .submenuul {border-right: 1px solid #333;}*/
.main-nav #gnb li .submenuul {height: 500px; position: absolute; z-index: 999999; top: 56px; left: 0; width: 100%; padding: 10px 0; transition: background 0.5s; }
.main-nav #gnb li.hover .submenuul {background: #fff;}
.submenuul li a {color: #888; display: block; padding: 2px 0; font-size: 16px; line-height: 1.8; text-transform: capitalize;}
.main-nav #gnb li.hover .submenuul a {color: #333;font-weight: 500;}
.main-nav #gnb li.hover .submenuul li a:hover  {color: #3fb54b;}
.submenuul li.on a {
    color: #3fb54b ;
    font-weight: 700;
}
.main-nav #gnb .hover ul {}

.main-nav {
    display: inline-block;
    width: 100%;
}
.lang {
    display: inline-block;
    float: right;
}
.lang ul {display: flex; justify-content: flex-end;}
.lang ul li:last-child {position: relative; padding-left: 15px;margin-left: 15px;}
.lang ul li:last-child::before {
    content: "";
    position: absolute;
    top: 36px;
    left: 0;
    width: 1px;
    height: 15px;
    background-color: #ddd;
}
.lang ul li a {font-size: 20px; letter-spacing: -0.05em; color: #666666;}
.lang ul li.on a {color: #3fb54b ; font-weight: 700;}
.lang ul li:hover a {color: #3fb54b ;}

.top_tel a{
    display: block;
    position: relative;
    padding-left: 50px;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.05em;
    color: #333;
    font-family: 'Montserrat';
}
.top_tel a::before {
    content: "";
    width: 50px;
    height: 50px;
    position: absolute;
    top: 11px;
    left: 0;
    border-radius: 50px;
    background: url('../img/tel_btn.png')center center no-repeat;
    transition: all 0.5s;
}


.top_tel:hover a {color: #3fb54b;}
/* .top_tel:hover a::before {background-color: #ff0000;} */




/*스크롤 헤더*/
#header.header_scroll {position: fixed;z-index: 9999;top: 0;left: 0;right: 0;background: background: rgba(0,0,0,0.6);box-shadow: 0px 5px 30px rgba(0,0,0,0.2);}
/*#header.header_scroll .mob-btn {top: 10px;}*/

/*메인슬라이드,서브페이지 상단 위치*/
/* #main_slide,.submn-area,#subtitbg {padding-top: 56px;} */
#header.header_scroll .header_bg {/*display: none!important;*/ border-bottom: 1px solid #ddd;}
#header.header_scroll .header_bg.on {display: block!important;border-bottom: 1px solid #ddd;}



@media screen and (max-width: 1024px){
    #header {height: 80px;}
    #main_slide,.submn-area,#subtitbg {padding-top: 0px;}
    .top_tel a::before {top: 15px;}
    .top-btn {top: 35px;}
    .desk-hide {display: none;}
    .show .overlay {position: fixed;top: 0;left: 0;width: 100%;height: 100%;background: rgba(0, 0, 0, 0.9);z-index: 1001;}
    #header .contains,
    #header .header_bg {max-height: 0!important; line-height: 0px;border: none;}
    .main-nav #gnb > li:hover {background-color: #fff;}
    .main-nav #gnb > li:hover a {color: #333;}

    .main-nav {position: fixed;top: 0;bottom: 0;right: -260px;background: #f1f1f1;z-index: 99999;width: 260px;height: 100%;transition: all ease 0.2s;overflow-y: auto;}
    .show .main-nav {right: 0;}
    .main-nav #gnb {display: block;}
    .main-nav #gnb > .submenu {width: 100%;}
    .main-nav #gnb > .submenu > a {display: block;padding: 10px 0 10px 30px;text-align: left;border-bottom: 1px solid #ddd;line-height: 1.8;pointer-events: none;height: auto;}
    .main-nav #gnb li .submenuul {position: static; height: auto;padding: 0; display: none;}
    .main-nav #gnb li .submenuul a {padding: 5px 20px 5px 35px;text-align: left; border-bottom: 1px solid #ddd; background: #e7e7e7;}
    .main-nav ul li.submenu i {position: absolute;width: 100%;height: 55px;top: 0;right: 0px;cursor: pointer;-webkit-transition: all ease 0.5s;transition: all ease 0.5s;line-height: 45px;}
    .main-nav ul li.submenu.open i:after {content: url(m-meic-o.png)}
    .main-nav ul li.submenu i:after {content: url(m-meic.png);height: 0;width: 0;position: absolute;top: 0;right: 30px;z-index: 10;line-height: 45px;}
    .main-nav ul > .submenu:last-child .submenuul {transform: translateX(0px);}
    #header.header_scroll .contains {height: 75px; line-height: 75px;}
    #header.header_scroll .header_bg {height: 75px!important;}
    #main_slide, .submn-area {padding-top: 0;}
    .submenuul li a {color: #333;}
    .lang {
        position: absolute;
        top: 0;
        right: 10%;
    }
    .lang ul li:last-child::before {top: 31px;}
    #header.header_scroll .header_bg {display: block!important; border-bottom: none;}

    .login {right: 70px;}
    .login ul {padding-right: 10px;}
}

@media screen and (max-width: 768px){
  #header {height: 100px;}
  #header > .top-nav {padding: 20px 10px 0;}
  .login {right: 15px; top: 8px;}
  .login ul {padding-right: 0px;}
  .login ul li {line-height: 24px;}
}

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

/*
    #header .contains {height: 50px; line-height: 50px;}
    #header .header_bg {max-height: 50px!important;}
*/

    #header.header_scroll .contains {height: 50px; line-height: 50px;}
    #header.header_scroll .header_bg {height: 50px!important;}
    .lang ul li a {font-size: 1em;}
    .lang ul li:last-child {padding-left: 8px; margin-left: 8px;}
    .lang ul li:last-child::before {top: 20px;}
    .lang {right: 70px;}

    .login {right: 20px;}

}



/*모바일메뉴버튼*/
.mob-btn {display: none;position: absolute;float: right;padding: 5px 7px;margin: 0px;background-color: transparent;cursor: pointer;right: 20px;top: 20px;z-index: 999;transition: top 0.5s;}
.mob-btn span {display: block;width: 30px;height: 3px;border-radius: 1px;background: #222;}
.mob-btn span + span {margin-top: 5px;}
/*.main-nav ul li.submenu.open i {transform: rotate(180deg);}*/

/*.header_scroll .mob-btn {top: 10px;}*/

@media screen and (max-width: 1200px){
    .top-btn {right: 15px;}

}
@media screen and (max-width: 1024px){
    .mob-btn {display: block;}

}

@media screen and (max-width: 768px){
  .top-btn {top: 55px;}
}

@media screen and (max-width: 575px){
    .mob-btn {top: 10px; right: 10px;}

}


#tel_but {display: none;}

@media screen and (max-width: 768px){
    #tel_but {display: block; position: fixed; top: 2%; right: 80px; z-index: 10;}
}