/*PC ���*/
#molie_nav{display:none;}
.headerWrap {position: fixed; top: 0; z-index:1000; width:100%; min-width:1300px; background-color: rgba(255,255,255,1); border-bottom:1px solid #ededed;}
.headerWrap .inner{position: relative;}
.headerWrap .logo{display: inline-block; position: relative; padding:20px 0; z-index:99}

/* ��޴� */
#gnb { position: absolute; height:100%; text-align: center; left: 0; right: 0; top:0; margin: auto;}
#gnb > li { display: inline-block; text-align: center; width:150px; letter-spacing: -1px; height:50px; line-height:50px}
#gnb > li a { display: inline-block; color: #434343; font-size:17px; position: relative; width: 100%; height:100%; padding: 20px 0 23px 0; }
#gnb > li a:hover,
#gnb > li.currentGnb a { color: #000; font-weight: 400; }

/* ����޴� */
.snbWrap { display:none; position:absolute; width:100%; left: 0px; top:90px; padding-top: 25px; padding-bottom: 22px; background-color: #fff; z-index: -1; border-top: 1px solid #ededed}
.snbWrap #snb { position: relative; text-align: center; }
.snbWrap #snb > li { position: relative; display: inline-block; vertical-align: top; width:150px; }
.snbWrap #snb li ul { width:auto; }
.snbWrap #snb li ul li { margin-bottom:3px; text-align:center; }
.snbWrap #snb li ul li a { display:block; width:100%; padding: 6px 0; font-size:15px; letter-spacing: -1px; color:#676b6e; }
.snbWrap #snb li ul li a:hover,
.snbWrap #snb li ul li.currentSnb a{ color: #000; font-weight:400;}
.gnbBg { display:none; position:fixed; width:100%; height:100%; top:0; left:0; background:rgba(0, 0, 0, 0.6); z-index:998; }

/*/////////////////////////////////////////////////////////////////////////////*/
/*/////////////////////////////////////////////////////////////////////////////*/
/*/////////////////////////////////////////////////////////////////////////////*/
/*����� ���*/
#molie_nav .logo{background:#fff; position: fixed; z-index:99; left:0; top:0; width:100%;}
#molie_nav .logo img{margin-left:30px;}
.menu-icon {
  height: 30px;
  width: 30px;
  right:30px;
  top:30px;
  cursor: pointer;
  position:fixed; 
  right:30px;
  z-index:999999;
}
.menu-icon__line {
  height: 2px;
  width: 30px;
  display: block;
  background-color: #000;
  margin-bottom: 4px;
  transition: transform 0.2s ease, background-color 0.5s ease;
}
.menu-icon__line-left {
  width:15px;
}
.menu-icon__line-right {
  width: 15px;
  float: right;
}
.nav {
  position: fixed;
  z-index:-1;
  left:0;
  top:0;
  height: 100%;
  width: 100%;
}
.nav:before, .nav:after {
  content: "";
  position: fixed;
  width: 100vw;
  height: 100vh;
  background: rgba(234, 234, 234, 0.2);
  z-index: -1;
  transition: transform cubic-bezier(0.77, 0, 0.175, 1) 0.8s;
  transform: translateX(0%) translateY(-100%);
}
.nav:after {
  background: white;
  transition-delay: 0s;
}
.nav:before {
  transition-delay: 0.1s;
}
.nav__content {
  position: fixed;
  top: 50%;
  transform: translate(-50%, -50%);
  width:90%;
  left:50%;
  text-align: center;
  font-size: calc(2vw + 10px);
  /*cursor: pointer;*/
}
.nav__logo{transition-delay: 0.6s; opacity: 0; transform: translate(0%, 100%);transition: opacity 0.2s ease, transform 0.3s ease; }
.nav__lang{ opacity: 0;; }
.nav__header_search_btn { opacity: 0; }
.nav__list-item {
  position: relative;
  /*display: inline-block;*/
  transition-delay: 0.8s;
  opacity: 0;
  transform: translate(0%, 100%);
  transition: opacity 0.2s ease, transform 0.3s ease;
}
.nav__list-item:before {
  content: "";
  position: absolute;
  background:#ededed;
  width: 100%;
  height: 1px;
  top: 100%;
  left:0;
  transform: translate(0%, 0%);
  transition: all 0.3s ease;
  z-index: -1;
}
.nav__list-item:hover:before {
  width: 100%;
}
.nav__list-item ul { display:none; }
body.nav-active .menu-icon__line {
  background-color: #000;
  transform: translateX(0px) rotate(-45deg);
}
body.nav-active .menu-icon__line-left {
  transform: translateX(1px) rotate(45deg);
}
body.nav-active .menu-icon__line-right {
  transform: translateX(-2px) rotate(45deg);
}
body.nav-active .nav {
  visibility: visible;
}
body.nav-active .nav:before, body.nav-active .nav:after {
  transform: translateX(0%) translateY(0%);
}
body.nav-active .nav:after {
  transition-delay: 0.1s;
}
body.nav-active .nav:before {
  transition-delay: 0s;
}
body.nav-active .nav__list-item {
  opacity: 1;
  transform: translateX(0%);
  transition: opacity 0.3s ease, transform 0.3s ease, color 0.3s ease;
}
body.nav-active .nav__logo{
  opacity: 1;
  transform: translateX(0%);
  transition-delay: 0.5s;
}
body.nav-active .nav__list-item:nth-child(0) {
  transition-delay: 0.5s;
}
body.nav-active .nav__list-item:nth-child(1) {
  transition-delay: 0.6s;
}
body.nav-active .nav__list-item:nth-child(2) {
  transition-delay: 0.7s;
}
body.nav-active .nav__list-item:nth-child(3) {
  transition-delay: 0.8s;
}
body.nav-active .nav__list-item:nth-child(4) {
  transition-delay: 0.9s;
}
body.nav-active .nav__lang {
  opacity: 1;
  transform: translateX(0%);
  transition-delay: 0.5s;
  margin-bottom:30px;
}
body.nav-active .nav__lang a {
display:inline !important;
}
body.nav-active .nav__header_search_btn{
  opacity: 1;
  transform: translateX(0%);
  transition-delay: 0.5s;
  padding:10px;
}
#dropdown {/*position: absolute;left: 0;top: 0;height: 100%;width: 100%;*/font-size: 17px;}
#dropdown li{box-sizing:border-box;}
#dropdown li.selected {background-color:#f1f1f1;}
#dropdown li.selected > a{border-bottom:1px solid #ddd; color:#000;}
#dropdown > li > a{padding:20px 10px !important; color:#000}
#dropdown li a {display: block;width:100%;padding:10px;text-transform: uppercase; box-sizing:border-box;}
#dropdown li > ul{padding:10px 0}
#dropdown li > ul li {padding:0 20px; font-size:14px;}
#dropdown li > ul li a {color:#555}
#dropdown li > ul li > ul li {padding: 10px 0 10px 0px; }
#dropdown li > ul li > ul li a {color: black;text-transform: none;padding: 0; }

@media screen and (max-width:1024px){ 
   .headerWrap{display:none;}
   #molie_nav{display:block;}
}
@media screen and (max-width:640px){ 
   #molie_nav .logo img{width:100px; margin-left:20px;}
   .menu-icon{right:20px;}
}





























