#head-area {
	z-index: 98;
}
#logo-area-top { display: block; max-width: 208px; }
.logo {
  position: relative;
	width: 100%;
	padding-top: 14%;
	background-size: contain;
	background-position: center center;
	background-repeat: no-repeat;
  background-image: url('../../images/logo/logo.png');
}
#menu-section { position: relative; }
.menu-item { position: relative; white-space: nowrap; }
#menu-section.menu-init .menu-child { transition: 0s; }
#menu-section .menu-child {
  position: absolute;
  top: 61px;
  left: 50%;
  z-index: 1;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px) translateX(-50%);
  transition: .4s;
}
#menu-section .menu-item:hover::before { 
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background-color: #af0014;
  /* border-bottom: 2px solid #af0014;  */
}
#menu-section .menu-item:hover .menu-child {
  transform: translateY(0px) translateX(-50%);
  opacity: 1;
  visibility: visible;
}


#menu-icon-area { z-index: 1; position: absolute; top: 0; left: 0; }
#menu-icon-area:hover #menu-wrap {
  transform: translate3d(-7px ,7px ,0);
}
#menu-icon-area.is-active #menu-wrap {
  transform: translate3d(5px ,-5px ,0);
  transition-timing-function: cubic-bezier(1,-3.59,0,4.52);
  transition: .1s;
}
#menu-icon-area.is-active { transition: .3s .6s; }

#menu-icon li { width: 30px; height: 3px; margin: 6px; }
#menu-icon li.line1 { animation: aniLine1dft .6s forwards; }
#menu-icon li.line2 { transition-duration: 0s; transition-delay: .3s; }
#menu-icon li.line3 { animation: aniLine3dft .6s forwards; }
@keyframes aniLine1dft {
  0% {
    transform: translate3d(0,8.5px,0) rotateZ(135deg);
  }
  50% {
    transform: translate3d(0,8.5px,0) rotateZ(0deg);
  }
  100% {
    transform: translate3d(0,0,0) rotateZ(0deg);
  }
}
@keyframes aniLine3dft {
  0% {
    transform: translate3d(0,-8.5px,0) rotateZ(225deg);
  }
  50% {
    transform: translate3d(0,-8.5px,0) rotateZ(0deg);
  }
  100% {
    transform: translate3d(0,0,0) rotateZ(0deg);
  }
}

#menu-icon-area.is-active li.line1 { animation: aniLine1 .6s forwards; }
#menu-icon-area.is-active li.line2 { opacity: 0; transition-duration: .2s; transition-delay: 0s; }
#menu-icon-area.is-active li.line3 { animation: aniLine3 .6s forwards; }
@keyframes aniLine1 {
  50% {
    /*transform: translate3d(0,8.5px,0) rotateZ(0deg);*/
  }
  
  100% {
    transform: translate3d(0,8.5px,0) rotateZ(135deg);
  }
}
@keyframes aniLine3 {
  50% {
    /*transform: translate3d(0,-8.5px,0) rotateZ(0deg);*/
  }
  100% {
    transform: translate3d(0,-8.5px,0) rotateZ(225deg);
  }
}

#navigation {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  visibility: hidden;
  overflow: hidden;
}
#navigation.on { visibility: visible; }
#navigation .nav-wrapper {
  width: 330px;
  min-height: 100vh;
  transform: translateX(-100%);
}
#navigation.on .nav-wrapper {
  transform: translateX(0%);
}

@media screen and (max-width: 800px) {
  #logo-area-top { max-width: 140px; }
  #navigation .nav-wrapper { width: 200px; }
}





#menu-cont-area {
  z-index: 1;
  position: absolute;
  top: 0;
  right: 0;
  /*transform: translate3d(0, -100%, 0);*/
  max-height: 0;
  transition-property: max-height; 
  transition-duration: .8s;
  transition-delay: .3s;
  transition-timing-function: cubic-bezier(1, 0, -0, 1);
  overflow-y: hidden;
  width: 100%;
}
#menu-cont-area.on { /*transform: translate3d(0%, 0, 0);*/ max-height: 100vh; transition-delay: 0s; }
#menu-cont-area::-webkit-scrollbar { width: 10px; }
#menu-cont-area::-webkit-scrollbar-thumb { background-color: rgba(152, 152, 184, .7); }

#menu-cont-wrap { min-height: 100vh; }
#menu-cont .sub-menu-list-wrap { position: relative; min-width: 100%; max-height: 0; overflow: hidden; transition: max-height .4s; }
#menu-cont .menu-item .menu-add::after { content: "\e913"; }
#menu-cont .menu-item.accordion-active .menu-add::after { content: "\e91a"; }

.ani-menu-00 {
  opacity: 0;
  transform: translate3d(0, 105%, 0);
  transition-property: transform, opacity;
  transition-delay: 0s;
  transition-timing-function: cubic-bezier(0,.91,.85,.83);
}
#menu-cont-area.on .ani-menu-00 { opacity: 1; transform: translate3d(0, 0, 0); }
#menu-cont-area.on li:nth-child(1) .ani-menu-00 { transition-delay: .6s; }
#menu-cont-area.on li:nth-child(2) .ani-menu-00 { transition-delay: .7s; }
#menu-cont-area.on li:nth-child(3) .ani-menu-00 { transition-delay: .8s; }
#menu-cont-area.on li:nth-child(4) .ani-menu-00 { transition-delay: .9s; }
#menu-cont-area.on li:nth-child(5) .ani-menu-00 { transition-delay: 1s; }
#menu-cont-area.on li:nth-child(6) .ani-menu-00 { transition-delay: 1.1s; }
#menu-cont-area.on li:nth-child(7) .ani-menu-00 { transition-delay: 1.2s; }
#menu-right { position: absolute; top: 20px; right: 20px;}

.hamburger {
  z-index: 1;
  /* position: absolute;
  top: 20px;
  right: 20px; */
  display: inline-block;
  overflow: hidden;
  margin: 0;
  padding: 10px;
  cursor: pointer;
  transition-timing-function: linear;
  transition-duration: .15s;
  transition-property: opacity,filter;
  text-transform: none;
  color: inherit;
  border: 0;
  background-color: transparent;
}
.hamburger-box {
  position: relative;
  display: flex;
  align-items: center;
  width: 30px;
  height: 30px;
}
.hamburger--emphatic .hamburger-inner { transition: background-color .125s ease-in .175s; }
.hamburger--emphatic.is-active .hamburger-inner {
  transition-delay: 0s;
  transition-timing-function: ease-out;
  background-color: transparent;
}


.hamburger-inner, .hamburger-inner:after, .hamburger-inner:before {
  position: absolute;
  width: 30px;
  height: 4px;
  transition-timing-function: ease;
  transition-duration: .15s;
  transition-property: transform;
  border-radius: 10px;
  background-color: #000;
}

.hamburger--emphatic .hamburger-inner:before {
  left: 3.5px;
  transition: transform .125s cubic-bezier(.6,.04,.98,.335),top .05s linear .125s,left .125s ease-in .175s;
}
.hamburger--emphatic.is-active .hamburger-inner:before {
  top: -80px;
  left: -80px;
  transition: left .125s ease-out,top .05s linear .125s,transform .125s cubic-bezier(.075,.82,.165,1) .175s;
  /*transition: left 12s ease-out,top 5s linear 12s,transform 12s cubic-bezier(.075,.82,.165,1) 12s;*/
  transform: translate3d(80px,80px,0) rotate(45deg);
}

.hamburger--emphatic .hamburger-inner:after {
  right: 3.5px;
  transition: transform .125s cubic-bezier(.6,.04,.98,.335),top .05s linear .125s,right .125s ease-in .175s;
}
.hamburger--emphatic.is-active .hamburger-inner:after {
  top: -80px;
  right: -80px;
  transition: right .125s ease-out,top .05s linear .125s,transform .125s cubic-bezier(.075,.82,.165,1) .175s;
  /*transition: right 12s ease-out,top 5s linear 12s,transform 12s cubic-bezier(.075,.82,.165,1) 12s;*/
  transform: translate3d(-80px,80px,0) rotate(-45deg);
}

.hamburger-inner:before { top: -7.5px; }
.hamburger-inner:after { top: 7.5px; }
.hamburger-inner:after, .hamburger-inner:before { display: block; content: ""; }

.sub-user-info {
  visibility: hidden;
  opacity: 0;
  position: absolute;
  top: 40px;
  left: 0;
  transition: .3s;
}
.user-logged .user-info:hover .sub-user-info {
  visibility: visible;
  opacity: 1;
  top: 36px;
}


#top-scroll-btn {
  position: fixed;
  bottom: 10%;
  right: 10%;
  opacity: 0;
  visibility: hidden;
  transform: rotate(-90deg) translateX(-20px) scale3d(1,1,1);
  transition: .6s;
}
#top-scroll-btn.show {
  opacity: 1;
  visibility: visible;
  transform: rotate(-90deg) translateX(0px) scale3d(1,1,1);
}