@charset "UTF-8";
/*****************************************************************************************/
/**************************************** 헤더(S) ****************************************/
/*****************************************************************************************/
/* .header * { transition: 0.2s; } */
.header {
  width: 100%;
  height: 8.0rem;
  background: #ffffff;
  /*box-shadow:#bdbdbd 0px 2px 10px 4px; */
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 999;
  border-bottom: 1px solid var(--basic-border-color);
  transition: 0.3s;
  display: flex; 
  align-items: center; 
  padding:0 2.0rem;


  .h-in{
    width:100%; max-width:1280px; margin:0 auto; display: flex; align-items: center; justify-content: space-between;

    .h-left{
      float:left;
      
      .btn-home{
        display: inline-block;
        font-size:0; 
        width:18.0rem;
        height:5.8rem;
         
        img{width:100%;}
         
      }

    }

    .h-right{
      float:right;
    }

  }
}

.gnb-wrap{
  width:auto;
  /* border:2px solid red; */


  /*-- depth-01 --*/
  ul.gnb-depth-01-wrap {
    list-style: none;
    display: flex;
    margin: 0;
    padding: 0;
    gap:6.0rem;
  
    li.gnb-depth-01 {
      position: relative;
      
      > a{
        font-size:2.0rem; 
        font-weight:bold;
      }
  
    }
  }


  /*-- depth-02 --*/
  ul.gnb-depth-02-wrap{
    position:absolute; 
    top:2.9rem;
    display: flex; flex-direction: column; width:14.5rem;
    left:50%;
    transform:translateX(-50%);
    background:#ffffff;
    border:1px solid #dddddd;
    border-bottom:none;
    display: none;

    > li.gnb-depth-02 {
      border-bottom:1px solid #dddddd;
      width:auto;

      > a{font-size:1.6rem; padding:0.5rem 0.5rem; word-break: keep-all; width:100%; display: inline-block; }

    }
  }


  /*-- hover --*/
  ul.gnb-depth-01-wrap {

    li.gnb-depth-01:hover {

      > a{
        color:#009d3f;
      }

      ul.gnb-depth-02-wrap{
        display:block;

        > li.gnb-depth-02:hover {

          > a{background:#009d3f; color:#ffffff;}

        }

      }

    }

  }


}



/**********************************************************************************************/
/**************************************** 모바일메뉴(S) ****************************************/
/**********************************************************************************************/
.mobile-menu { position:fixed; width:100%; z-index:8; top:0px; left:100%; height:100%; overflow-y:auto; z-index: 999999; transition: left 0.5s; background:#ffffff; } 
.mobile-menu.active { left:0; } 
.mobile-menu .lnb-box { z-index:99999; position:absolute; width:100%; } 
.btn-lnb { display:none; width:3.0rem; height:3.0rem; font-size:0; img{width:100%;}}
#lnb h1 { height: 40px; text-align: center; color: #fff; font-size: 20px; line-height: 1.8; letter-spacing: -2px; } 
.lm-in { width:100%; z-index:8; top:0px; left:100%; height:100%; overflow-y:auto; z-index: 999999; transition: left 0.5s; background:#ffffff; } 
.lm-in.active { left:0; } 
.lm-in .lnb-box { z-index:99999; position:absolute; width:100%; } 
#lnb h1 { height: 40px; text-align: center; color: #fff; font-size: 20px; line-height: 1.8; letter-spacing: -2px; } 
#lnb > ul > li > ul { display:none; box-sizing:border-box; font-size:0; } 

.dim { position:absolute; top:0; left:0; width:100%; height:100%; background:#030303; opacity:.8; z-index:2; } 
.mm-top { width:100%; height:55px; position:relative;  display: flex; align-items: center; justify-content: space-between; padding:0 1.0rem;     background: rgba(255, 255, 255, 0.7);} 
.mm-top .m-log { position:absolute; left: 15px; top:50%; transform:translateY(-50%); } 
.mm-top .m-log a { display:inline-block; color:#003984; font-size:20px; font-weight:Bold; } 
.mm-top .m-log a::after { padding:0 10px; content:'|'; display:inline-block; } 
.mm-top .m-log a:last-child::after { display:none; } 
/* .mm-top .m-btn-close { position:absolute; right: 1.0rem; top:50%; transform:translateY(-50%); width: 32px; height:32px; z-index:9999; font-size:0; }  */

.mm-top .m-btn-close{width:3.0rem; height:3.0rem; font-size:0; }
.mm-top .m-btn-close img { width:100%; } 
.mobile-menu.active .m-btn-close { display:inline-block; } 

.mm-top{
  .header-logo{
    /* display:inline-flex; align-items:end; justify-content: center; gap:0.4rem; */
    display: inline-block;
    font-size: 0;
    width: 18.0rem;
    height: 5.8rem;

    img{
      width:100%; 
    }

    span{
      font-size:1.6rem; font-weight:600; color:var(--gray800-color);line-height:1.3; margin-bottom:0.1rem;
    }
  }
}
/**********************************************************************************************/
/**************************************** 모바일메뉴(E) ****************************************/
/**********************************************************************************************/

.mobile-menu.active{max-width:100%; left:50%; transform:translateX(-50%); border:1px solid #dddddd; border-top:0; border-bottom:0;} 



#lnb > ul li.noDepth a::after { background-image: none !important; } 


.mobile-menu{
   background:#ffffff;
    /* left:0; */
  }

.mm-mid{
  width:100%; overflow:hidden; padding:1.0rem 1.0rem;  background:var(--green-color); 
  ul{
    width:100%; max-width:1344px; /*height:4.0rem;*/ height:auto; margin:0 auto; display: flex; align-items: baseline; justify-content: space-between; flex-direction: column; gap:1.0rem; justify-content: end; 
    li{
      display: flex; align-items: center; justify-content: center; width:100%;

        .btn-ht{
          font-size:1.6rem; color:var(--gray800-color); display: flex; align-items: center; gap:0.2rem; line-height:1.5; -webkit-filter: brightness(0) invert(1); 
          filter: brightness(0) invert(1);
          

          &::after{content:'|'; display:inline-block;  color:var(--gray200-color); margin:0 1.0rem; }

          &:last-child::after{display:none;}

          /* &::before{content:''; display:inline-block; width:2.0rem; height:2.0rem; font-size:0; background-size:contain!important; }
          &.sitemap::before{background:url("../../img/icon-sitemap.png") center no-repeat;}
          &.community::before{background:url("../../img/icon-community.png") center no-repeat;}
          &.login::before{background:url("../../img/icon-login.png") center no-repeat;}
          &.go-prev::before{background:url("../../img/icon-go-prev.png") center no-repeat;}
          &.logout::before{background:url("../../img/icon-logout.png") center no-repeat;}
          &.sign::before{background:url("../../img/icon-sign.png") center no-repeat;}
          &.admin::before{background:url("../../img/icon-admin.png") center no-repeat;}
          &.prev::before{background:url("../../img/icon-prev.png") center no-repeat;} */

          /* &:hover{filter: brightness(70%); */
            /* &::after{filter:unset!important;} */
          /* } */
        }
    }
  }
}


ul.lnb-box{border-top:1px solid #dcdcdc; background:rgba(255,255,255,0.7);
/*-- lnb-depth-01 --*/
  &.lnb-depth-01-wrap{
    > li.lnb-depth-01{border-bottom: 1px solid #dcdcdc;
      
      /* &:nth-child(1) > a::before{ background:url("../../img/icon-gnb-menu-dist.png") center no-repeat;} */
      /* &:nth-child(2) > a::before{ background:url("../../img/icon-gnb-menu-supply.png") center no-repeat;} */
      /* &:nth-child(3) > a::before{ background:url("../../img/icon-gnb-menu-trend.png") center no-repeat;} */
      /* &:nth-child(4) > a::before{ background:url("../../img/icon-gnb-menu-commu.png") center no-repeat;} */
      /* &:nth-child(5) > a::before{ background:url("../../img/icon-gnb-menu-data.png") center no-repeat;} */

      > a{display: flex!important; align-items: center; justify-content: start; gap:0.5rem; font-size:18px; font-weight:Bold; color:#333333; height:48px; line-height:48px; padding:0 2.0rem; position:relative;
          
        /* &::before{content:''; display: inline-block; width:3.2rem; height:3.2rem;} */
        &::after { display:inline-block; content:""; background:url("../../img/icon-lnb-depth-01-arrow.svg") center no-repeat; width:20px; height:20px; right:20px; position:absolute; top:50%; transform:translateY(-50%); background-size:contain;  transition: 0.3s all;}  
        
      }

      &.on{ 
        > a{ color: var(--green-color);

          /* &::after{display:inline-block; content:""; border:2px solid red; background:url("../../img/icon-lnb-depth-01-arrow.png") center no-repeat; width:20px; height:20px; right:20px; position:absolute; top:50%; transform:translateY(-50%); background-size:contain;  } */
          &::after{top:50%; transform:translateY(-50%) rotate(180deg);    }
          
        }
      }

    }


  }


  /*-- lnb-depth-02 --*/
  .lnb-depth-02-wrap{
    /* display:none; */ height: calc(100% - 4.8rem);
    width:100%; padding:0rem 2.0rem 2.0rem 2.0rem; 
    .lnb-depth-02{
      /* background:#f5f5f5; */
      border-radius:1.0rem;
      margin-bottom:0.5rem;  
      &:last-child{margin-bottom:0;}
      &.active > a{background:var(--gray600-color); color:#ffffff!important;}

      > a{
        display: flex; align-items: center; justify-content: space-between; font-size:16px; font-weight:500; color:var(--gray500-color); width:100%; border-radius:0.5rem;  text-align:left; padding:5px 15px; background:var(--gray200-color); color:var(--gray700-color); 
        &:hover{background:var(--gray600-color); color:#ffffff!important;}
          
          &.lnb-depth-02-arrow{position:relative;}
          &.lnb-depth-02-arrow::after{content:''; display:inline-block; width:12px; height:7px;  position:absolute; right:10px; top:50%; transform:translateY(-50%); background:url("../../img/icon-lnb-depth-02-arrow.png") center no-repeat; background-size:contain; transition: 0.3s all;}
          /* &.lnb-depth-02-arrow.active{background:var(--gray600-color); color:#ffffff; } */
          /* &.lnb-depth-02-arrow.active::after{ border:2px solid red;  filter: brightness(300%);} */
        }

        &.on{
          .lnb-depth-02-arrow{background: var(--gray600-color); color:#ffffff;}
          .lnb-depth-02-arrow::after{transform:translateY(-50%) rotate(180deg);  filter: brightness(300%);}
        }
        

        
      }
    }

  /*-- lnb-depth-03 --*/  
  .lnb-depth-03-wrap{
    width:100%; padding:0.5rem 0.5rem; display: none;
    .lnb-depth-03{
        width:100%; margin-bottom:0.5rem; 
      > a{
          display:block; font-size:15px; font-weight:Bold; color:#444444; text-align:left; padding:0rem 1.0rem; position:relative;
          &::after{content:''; display:inline-block; width:12px; height:7px;  position:absolute; right:10px; top:50%; transform:translateY(-50%); background:url("../../img/icon-lnb-depth-03-arrow.png") center no-repeat; background-size:contain; transition: 0.3s all;}
          &.on{color:var(--primary-blue-bright-color);}
      }

      &.on{
        > a{
          &::after{transform:translateY(-50%) rotate(180deg);}
        }
      }

      &:last-child{margin-bottom:0;}
    }

    &.active{display:block;}
  }

  /*-- lnb-depth-04 --*/  
  .lnb-depth-04-wrap{
    width:100%; padding:0.5rem 0.5rem; display: none; border-radius:0.8rem; background: var(--primary-blue-dark-bg-opa-10);
    .lnb-depth-04{
        width:100%; margin-bottom:0.5rem; 
      > a{
          display:block; font-size:14px; font-weight:Bold; color: var(--gray500-color); text-align:left; padding:0rem 1.0rem;

          &.on{color:var(--primary-blue-bright-color)}
      }

      &:last-child{margin-bottom:0;}
    }

    &.active{display:block;}
  }
  
}







@media screen and (max-width: 840px){
  .gnb-wrap{display:none;}

  .btn-lnb{display: block;}
}