@charset "UTF-8";

#wrap {z-index:1;position:relative;font-family: 'ONE-Mobile-Title';overflow: hidden;}

#header {
  z-index:9999;
  position:fixed;
  top:0;left:0;
  width:100%;height:130px;
  display: table;
  background: #fff;
  transition:top .6s ease-in-out;
  box-shadow: 3px 3px 8px rgba(0, 0, 0, .2);
}
#header.addHide {top:-130.94px;}
#header.addShow {top:0;}


#header .wrap {display: table-cell;vertical-align: middle;}
#header .gap {margin: 0 70px;}
#header .wrap .gap .container {width:100%;height:100%;text-align:center;}
/* 로고 */
#logo {position:relative;float:left;}
#logo a {display:inline-block;line-height: 130px;}
#logo a img {width:135px;margin-left: 0;}

/* 네비 */
/* 동적 네비 */
a {
  outline: 0;
  text-decoration: none;
  color: #000;
}

#nav {
  font-size: 22px;
}

ul.menu {
  display: flex;
  justify-content: center;
  margin-left: -130px;
  max-width: 900px;
  line-height: 50px;
}

li.menu-item {
  display: inline-block;
  padding: 0 2.3vw;
  line-height: 130px;
}
.menu-item:last-child .main-btn {
  border-right: 0;
}

.main-btn {
  display: block;
  transition:all .3s;
  font-family: 'ELAND_Choice_B';
  
}
#nav > ul > li .sub {
  display: block;
  position:absolute;
  top:130px;left:0;
  text-align:center;
  background:#fff;
  width:100%;
  max-height: 130px;
  border-radius:5px;
  border-top: 1px solid #ddd;
  transition:top .6s ease-in-out;
}
#nav > ul > li .sub .sub-gap {padding:0;}
#nav > ul > li .sub .sub-gap > ul {width:100%;}
#nav > ul > li .sub .sub-gap > ul > li {display: inline-block;margin: 0 80px;}
#nav > ul > li .sub .sub-gap > ul > li a {font-size: 22px;font-family: 'ELAND_Choice_M';line-height: 130px;position: relative;}
#nav > ul > li .sub .sub-gap > ul > li a:after {content:""; position: absolute; left: 50%; bottom: -5px; width: 0; height: 2px; background-color: #444; transition: all .2s; }
#nav > ul > li .sub .sub-gap > ul > li a:before { content:""; position: absolute; right: 50%; bottom: -5px; width: 0; height: 2px; background-color: #444; transition: all .2s; }
#nav > ul > li .sub .sub-gap > ul > li > a:hover:after { width: 50% }
#nav > ul > li .sub .sub-gap > ul > li > a:hover:before { width: 50% }


.main-btn:hover .menu-first-word, .main-btn:focus .menu-first-word {
  transform: translate3d(0, -105%, 0);
}
.main-btn:hover .menu-second-word, .main-btn:focus .menu-second-word {
  transform: translate3d(0, 105%, 0);
}

.menu-title {
  display: inline-block;
  overflow: hidden;
  line-height: 50px;
}

.menu-first-word,
.menu-second-word {
  display: inline-block;
  position: relative;
  transition: transform 0.3s;
}
.menu-first-word::before,
.menu-second-word::before {
  position: absolute;
  content: attr(data-hover);
}

.menu-first-word {
  color: #315f43;
}
.menu-first-word::before {
  top: 105%;
  color: #333;
}

.menu-second-word {
  color: #333;
}
.menu-second-word::before {
  bottom: 105%;
  color: #315f43;
}

/* aside */
#aside {display:inline-block;float:right;}
#aside ul {width:100%;line-height: 130px;}
#aside ul li {float:right;}
#aside ul li a {width:100%;height:100%;font-size: 12px;line-height: 23px;}
#aside .lang {position: relative;width: 105px;text-align: center;}
.lang a img {padding-right: 6px;}
.langs {
    position: absolute;
    width: 100%;
    border: 1px solid #1C1C1C;
    background: #fff;
    text-align: center;
    border: solid 1px #000000;
    top: 39px;
    left: 61%;
    transform: translateX(-50%);
    padding: 7px 0;
    z-index: 1000000;
    transition: all .7s;
    display: none;
}
.langs a {
    display: block;
    text-align: center;
    padding: 7px 0;
}
.langs a span {
    display: inline-block;
    position: relative;
    text-indent: 5px;
}
.langs a:first-child span {
    border-bottom: 1px solid #1C1C1C;
}


/* 모바일 햄버거 버튼 */
.mobile-btn-wrap {
    z-index:2;position:relative;display:none;float:right;width:25px;line-height: 65px;
}
.mobile-btn-wrap a.mobile-btn {position:relative;padding-left:17px;}
.mobile-btn-wrap a.mobile-btn i.bar {position:absolute;display:block;width:25px;height:2px;background:#000;transition:all .3s;}
.mobile-btn-wrap a.mobile-btn i.bar1 {top:0;}
.mobile-btn-wrap a.mobile-btn i.bar1.addMobile {    
    -webkit-animation : bar1 .75s forwards;
    animation : bar1 .75s forwards;
    top: -10px;
}
@-webkit-keyframes bar1 {
    0% {-webkit-transform : translateY(0) rotate(0);}
    50% {-webkit-transform : translateY(20px) rotate(0);}
    100% {-webkit-transform : translateY(20px) rotate(45deg);}
}
@keyframes bar1 {
    0% {transform : translateY(0) rotate(0);}
    50% {transform : translateY(20px) rotate(0);}
    100% {transform : translateY(20px) rotate(45deg);}
}
.mobile-btn-wrap a.mobile-btn i.bar2 {top:50%;}
.mobile-btn-wrap a.mobile-btn i.bar2.addMobile {    
    transition : all .25s .25s;
    opacity : 0;
}
.mobile-btn-wrap a.mobile-btn i.bar3 {bottom:-2px;}
.mobile-btn-wrap a.mobile-btn i.bar3.addMobile {
    -webkit-animation : bar3 .75s forwards;
    animation : bar3 .75s forwards;
    top: 30px;
}
@-webkit-keyframes bar3 {
    0% {-webkit-transform : translateY(0) rotate(0);}
    50% {-webkit-transform : translateY(-20px) rotate(0);}
    100% {-webkit-transform : translateY(-20px) rotate(-45deg);}
  }
  @keyframes bar3 {
    0% {transform : translateY(0) rotate(0);}
    50% {transform : translateY(-20px) rotate(0);}
    100% {transform : translateY(-20px) rotate(-45deg);}
  }


.mobile-btn-wrap a.mobile-btn i.bar1 {
    -webkit-animation : active-bar1 .75s forwards;
    animation : active-bar1 .75s forwards;
}
@-webkit-keyframes active-bar1 {
    0% {-webkit-transform : translateY(20px) rotate(45deg);}
    50% {-webkit-transform : translateY(20px) rotate(0);}
    100% {-webkit-transform : translateY(0) rotate(0);}
}
@keyframes active-bar1 {
    0% {transform : translateY(20px) rotate(45deg);}
    50% {transform : translateY(20px) rotate(0);}
    100% {transform : translateY(0) rotate(0);}
}
.mobile-btn-wrap a.mobile-btn i.bar2 {
    opacity : 1;
}
.mobile-btn-wrap a.mobile-btn i.bar3 {
    -webkit-animation : active-bar3 .75s forwards;
    animation : active-bar3 .75s forwards;
}
@-webkit-keyframes active-bar3 {
    0% {-webkit-transform : translateY(-20px) rotate(-45deg);}
    50% {-webkit-transform : translateY(-20px) rotate(0);}
    100% {-webkit-transform : translateY(0) rotate(0);}
}
@keyframes active-bar3 {
    0% {transform : translateY(-20px) rotate(-45deg);}
    50% {transform : translateY(-20px) rotate(0);}
    100% {transform : translateY(0) rotate(0);}
}


@media (max-width:1200px){
    #header .gap {margin: 0 25px;}
    li.menu-item {
        display: inline-block;
        white-space: nowrap;
        padding: 0 1.5vw;
      }
}


@media (max-width:1000px){
    body {overflow-y: visible;}
    body.addScrollY {overflow-y: hidden;}

    #header {height:70px;}
    #header .gap {margin: 0 30px;}
    #logo a {line-height: 70px;}
    #logo a img {width:80px;height: auto;padding:4.375px 0;}

    #nav {
        position: fixed;
        display:block;
        top:70px;left:0;
        padding-top: 10px;
        width:100%;
        height:100%;
        text-align:left;
        background: #fff;
        overflow: scroll;
        overflow-y: scroll;
    }
    #nav ul.menu {
        position: relative;
        width:auto;
        display: block;
        margin: 0;
        padding-left: 0;
      }
    li.menu-item {
        position:relative;
        display: block;
        padding: 0;
        line-height: 28px;
    }
    .main-btn {
        padding-left: 35px;
        color:#000;
        font-size: 16px;
        font-family: 'ELAND_Choice_B';
        transition:none;
    }
    .menu-title {
        line-height: 35px;
    }
    #nav > ul > li .sub {
        position:relative;
        top:0;left:0;
        height: 100%;
        text-align:left;
        border-top: 0;
    }
 
    #nav > ul > li .sub .sub-gap {padding:0;}
    #nav > ul > li .sub .sub-gap > ul {width:100%;}
    #nav > ul > li .sub .sub-gap > ul > li {display: block;margin: 0 50px;}
    #nav > ul > li .sub .sub-gap > ul > li > a {font-size: 16px;color: #000;line-height: 18px;}
    #nav > ul > li .sub .sub-gap > ul > li a:after {content:""; position: absolute; left: 50%; bottom: -5px; width: 0; height: 2px; background-color: #444; transition: all .2s; }
    #nav > ul > li .sub .sub-gap > ul > li > a:hover:after { width: 0 }
    #nav > ul > li .sub .sub-gap > ul > li > a:hover:before { width: 0 }

    .main-btn:hover .menu-first-word, .main-btn:focus .menu-first-word {
        transform: none;
    }
    .main-btn:hover .menu-second-word, .main-btn:focus .menu-second-word {
        transform: none;
    }
    .menu-first-word,
    .menu-second-word {
        transition: none;
    }
    .menu-first-word::before,
    .menu-second-word::before {
        display: none;
    }
    .menu-first-word {
        color: #333;
    }
    .menu-first-word::before {
        top: 0%;
    }
    
    .menu-second-word {
        color: #333;
    }
    .menu-second-word::before {
        bottom: 0%;
    }
  

    /* 정적인 메뉴 */
/*  #header {background:#fff;height:80px;}
    #header .gap {margin: 0 35px;}
    #logo a {line-height: 80px;}
    #logo a img {width:60px;padding:4.375px 0;}

    #wrap #header .wrap .gap .container #nav {display:none;top:80px;position:fixed;left:0;width:100%;height:100%;overflow-y:auto;background:transparent;text-align:left;}
    #wrap #header .wrap .gap .container #nav > ul {width:auto;padding:0 0 60px 0;} 
    #wrap #header .wrap .gap .container #nav > ul > li {position:relative;display:block;margin:0;padding:0;border-bottom:1px solid #ddd;}
    #wrap #header .wrap .gap .container #nav > ul > li:first-child {border-top:1px solid #ddd;}
    #wrap #header .wrap .gap .container #nav > ul > li:last-child {border-bottom:0;}
    #wrap #header .wrap .gap .container #nav > ul > li > a {line-height:60px;color:#000;background:#fff;text-indent:25px;}
    #wrap #header .wrap .gap .container #nav > ul > li > a:focus {color:#000;}
    #wrap #header .wrap .gap .container #nav > ul > li > a:hover {color:#000;}


 */
    #aside ul {line-height: 80px;}
    #aside .lang ,
    #aside ul li.bar {display: none;}
    #aside ul li a img {width:25px;margin-right: 17px;margin-top: 4px;}

    #header .wrap .gap .container .mobile-btn-wrap {display:block;}
}


@media (max-width:400px){
    #logo a img {width:80px;padding: 0;}
}