/* /assets/css/nw-header.css */

/* -------------------- HEADER LAYOUT -------------------- */
#header{
  position:absolute; height:100px; top:0; left:0; width:100%; z-index:9999;
}
#headerInnerWrap{
  position:absolute; top:0; left:0; width:100%; height:100%; z-index:9999;
  -webkit-transition:background-color .3s; transition:background-color .3s;
}
#headerInner{position:relative; height:100%; margin:0 auto; padding:0 15.5rem;}
#header .logo{position:relative; z-index:100; float:left; padding-top:48px;}
#header .logo a{display:block; position:relative}
#header .logo img{display:block; vertical-align:top; transition:opacity .3s}
#header .logo img.on{opacity:0; position:absolute; top:0; left:0}

/* -------------------- UTIL BOX -------------------- */
.header-util-box{position:absolute; top:50%; right:15.5rem; margin-top:0; z-index:100;}
.header-cm-style-btn{float:left; font-weight:700; font-size:13.5px; color:#fff; transition:color .3s}
.header-cm-style-btn i{font-size:23px; margin-right:15px; vertical-align:middle; margin-top:-2px}

/* 언어선택 */
.header-lang{position:relative; float:left; z-index:100; margin-left:3.5rem; height:32px; top:-6px}
.header-lang .lang-open-btn{display:block; height:100%; font-size:13.5px; color:#fff; font-weight:700}
.header-lang .lang-open-btn i{margin-right:10px; font-size:23px; vertical-align:middle; margin-top:-2px}
.header-lang .lang-open-btn .arrow i{font-size:16px}
.header-lang > ul{display:none; position:absolute; top:32px; left:-1px; width:107px; background:#fff; z-index:10}
.header-lang > ul > li{border-bottom:1px solid #f2f2f2}
.header-lang > ul > li:last-child{border-bottom:0}
.header-lang > ul > li > a{display:block; padding:0 10px; font-size:13.5px; line-height:31px; color:#555}
.header-lang > ul > li > a img{margin-right:7px; position:relative; top:-1px}
.header-lang.open .lang-open-btn .arrow i{transform:rotate(180deg); margin-top:-3px}


/* -------------------- GNB (PC) -------------------- */
.gnb-overlay-bg{position:fixed; inset:0; visibility:hidden; opacity:0; background:rgba(0,0,0,.5); z-index:9997; transition:all .3s}
.gnb-overlay-bg.open{visibility:visible; opacity:1}
#gnb{position:absolute; text-align:center; top:0; left:0; width:100%; z-index:99;}
#gnb .gnb-wrap > ul{display:inline-block; margin-left:-2rem}
#gnb .gnb-wrap > ul > li{position:relative; float:left;}
#gnb .gnb-wrap > ul > li > a{
  position:relative; z-index:100; display:block; line-height:85px; padding:0 4.5rem;
  text-align:center; color:#fff; font-size:1.75rem; letter-spacing:-.036em; font-weight:500;
  transition:all .5s; padding-top:20px;
}

/* 전체 패널 */
#gnbBg{
  overflow:hidden; position:absolute; left:0; top:0; width:100%; height:0; background:#496c56; z-index:98;
  opacity:0; transition:height .3s ease-in-out, opacity .2s ease-in-out;
}
#gnbBg:after{position:absolute; top:105px; left:0; width:100%; height:1px; background:#ededed; content:"";}
#gnb.open #gnbBg{height:510px; opacity:1}

/* 2DEPTH */
#gnb.total-menu .gnb-wrap > ul > li .gnb-2dep{
  position:absolute; top:105px; left:0; width:100%; text-align:left; opacity:0; height:0; visibility:hidden;
  transition:all .2s 0s; z-index:99;
}
#gnb.total-menu .gnb-wrap > ul > li .gnb-2dep:before{
  content:""; position:absolute; left:50%; top:-4px; width:0; height:4px; background:#e8e6d6; transition:all .5s; z-index:10;
}
#gnb.total-menu .gnb-wrap > ul > li:hover .gnb-2dep:before{width:100%; left:0;}
#gnb.total-menu .gnb-wrap > ul > li .gnb-2dep ul{padding:40px 0 0;}
#gnb.total-menu .gnb-wrap > ul > li .gnb-2dep ul li{text-align:center}
#gnb.total-menu .gnb-wrap > ul > li .gnb-2dep ul li a{
  display:block; padding:15px 5px; color:#ffffff; font-size:1.63rem; letter-spacing:-.038em; font-weight:400; line-height:1.3; transition:all .2s;
}
#gnb.total-menu .gnb-wrap > ul > li .gnb-2dep ul li a:hover{color:#FFD700}
#gnb.open .gnb-wrap > ul > li .gnb-2dep{
  height:250px; opacity:1; visibility:visible;
  transition:height .5s ease-in-out, opacity .5s ease-in-out .2s;
}


/* 헤더 오픈 시 색상 전환 */
#header.gnb-open .logo img.on{opacity:1}
#header.gnb-open .logo img.off{opacity:0}
#header.gnb-open #gnb .gnb-wrap > ul > li > a{color:#e8e6d6}
#header.gnb-open .header-cm-style-btn,
#header.gnb-open .header-lang .lang-open-btn{color:#232323}




/* PR/News(필요 시 사용) */
/*
.header-pr-con{position:absolute; left:15rem; top:19.5rem; background:#f5f5f5; width:195px; text-align:center}
.header-pr-con a{display:block; padding:4rem 1rem}
.header-pr-con a i{font-size:3.8rem; color:#008655}
.header-pr-con a .tit{display:block; font-weight:600; font-size:2rem; color:#3d3d3d; margin-top:1rem}
.header-pr-con a .txt{margin-top:4rem; font-weight:400; font-size:1.58rem; color:#3d3d3d; opacity:.5; line-height:1.4}
*/

.header-news-con{position:absolute; left:15rem; top:15.5rem; background:#f5f5f5; width:225px}
.header-news-con a{display:block; padding:3rem}
.header-news-con a .tit{display:block; font-weight:600; font-size:3rem; color:#008655}
.header-news-con a .txt{margin:3rem 0; font-size:1.52rem; color:#1f1f1f; opacity:.57; line-height:1.57; height:3.14em}
.header-news-con a .date{font-size:1.4rem; color:#1f1f1f; opacity:.7}

.header-pr-con { display:none; }






/* -------------------- GNB (MOBILE) -------------------- */
.nav-open-btn{display:none;}
#gnbM{display:none}

/* -------------------- 반응형 -------------------- */
@media all and (max-width:1220px){
  #header,#headerInnerWrap{height:80px;}
  #headerInner{padding:0 15px}
  #header .logo{padding-top:27px}
  .header-util-box{padding-right:65px; margin-top:-6px}
  .sitemap-line-btn,.sitemap-custom-btn{display:none;}
  .header-lang .lang-open-btn i,.header-cm-style-btn i{font-size:21px}

  /* PC gnb 숨김 */
  #gnb{display:none;}
  .gnb-overlay-bg{display:none}

  /* Mobile gnb 패널 */
  .gnb-overlay-bg-m{display:none; position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:9998;}
  #gnbM{display:block; position:fixed; top:0; right:-82%; width:80%; max-width:280px; height:100%; background:#fff; z-index:9999;
        transition:all .3s cubic-bezier(.47,0,.745,.715); visibility:hidden; overflow-y:auto;}
  #gnbM.open{right:0; visibility:visible;}

  .gnb-navigation-wrapper{position:relative; height:100%; box-sizing:border-box; padding-top:80px; overflow-y:auto;}
  .header-util-menu-box + .gnb-navigation-wrapper{padding-top:0; height:calc(100% - 80px);}

  #navigation > li{border-bottom:1px solid #e7e7e7;}
  #navigation > li:first-child{border-top:1px solid #e7e7e7}
  #navigation > li > a{position:relative; display:block; padding:15px; color:#333; font-size:17px; font-weight:500; line-height:1.3}
  #navigation > li.active > a{color:#008655;}
  #navigation > li.has-2dep > a:before{font-family:xeicon; content:"\e914"; position:absolute; top:50%; right:15px; font-size:1.3em; transform:translateY(-50%);}
  #navigation > li.has-2dep.active > a:before{content:"\e91b";}
  #navigation > li .gnb-2dep{display:none; padding:15px 0; background:#f2f2f2;}
  #navigation > li .gnb-2dep > ul > li{height:auto !important;}
  #navigation > li .gnb-2dep > ul > li > a{display:block; color:#888; font-size:14px; padding:12px 15px;}
  #navigation > li .gnb-2dep > ul > li.on > a{color:#000; font-weight:500;}

  /* 오픈 버튼 */
  .nav-open-btn{
    display:block; position:fixed; top:26px; right:15px; z-index:10000; height:30px;
    transition:all .3s cubic-bezier(.47,0,.745,.715);

    background: lightgray !important;
    padding: 5px;
  }
  .nav-open-btn.active
  {
    background:none !important;    
  }
  

  .nav-open-btn i{font-size:23px; color:#fff; vertical-align:middle; transition:all .3s}
  .nav-open-btn em{font-size:12px; color:#fff; font-weight:700; margin-left:10px; display:inline-block; vertical-align:middle}
  .nav-open-btn .open{display:block}
  .nav-open-btn .close{opacity:0; position:absolute; top:0; right:0; z-index:-999}
  .nav-open-btn .close i{
    color:#000; 
    font-size:18px;
    background-color: none !important;

  }
  .nav-open-btn.active .close{opacity:1; z-index:9; transition:all .3s .2s}
  .nav-open-btn.active .open{opacity:0; z-index:-99; display:none}
}
@media all and (max-width:1024px){
  #header.top-fixed #headerInnerWrap{background:#fff; border-bottom:1px solid #eee;}
  #header.top-fixed .logo img.on{opacity:1}
  #header.top-fixed .logo img.off{opacity:0}
  #header.top-fixed .header-lang .lang-open-btn,
  #header.top-fixed .nav-open-btn i{color:#000}
  .header-util-box{padding-right:20px}
  .header-cm-style-btn.inquiry-btn{display:none}
  .header-lang{margin-left:0}
  .header-lang .lang-open-btn strong{display:none}
  .header-lang > ul{width:40px; left:-10px; text-align:center; background:#3b3b3b; border-radius:5px;}
  .header-lang > ul > li > a{font-size:12px; color:#fff}
  .header-lang > ul > li > a .mb{display:block}
  .header-lang > ul > li > a .pc{display:none}
  .nav-open-btn em{display:none}
}
@media all and (max-width:480px){
  #header,#headerInnerWrap{height:60px;}
  #header .logo{padding-top:20px}
  #header .logo img{height:25px}
  .header-util-box{padding-right:20px}
  .nav-open-btn{top:16px}
  .nav-open-btn .close{top:2px}
  .gnb-navigation-wrapper{padding-top:60px}
  #navigation > li > a{font-size:15px}
  #navigation > li .gnb-2dep > ul > li > a{font-size:13px}
}