#drawer {
  display: none; }

#drawer-area {
  display: none; }

/*---------------------------------------------------------------------------------------------------
--------------------------------------------* Media Query Smart Phone *------------------------------
-----------------------------------------------------------------------------------------------------*/
/* @media screen and (max-width: 834px) { */
#overlay {
  display: none;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.25);
  position: fixed;
  bottom: 0;
  right: 0; }

/* drawer icon ---------------------------------------------------------------------------------------------------*/
#gmenu-icon,
#gmenu-icon span {
  display: inline-block;
  transition: all .4s;
  box-sizing: border-box; }

#gmenu-icon {
  position: fixed;
  z-index: 9010;
  top: 18px;
  right: 7px;
  margin: 6px; }
  #gmenu-icon span {
    position: absolute;
    z-index: 9011;
    right: 0;
    width: 100%;
    height: 3px;
    background-color: #001589; }
    #gmenu-icon span:nth-of-type(1) {
      top: 0; }
    #gmenu-icon span:nth-of-type(2) {
      top: 14px; }
  #gmenu-icon.active span:nth-of-type(1) {
    transform: translateY(7px) rotate(-45deg); }
  #gmenu-icon.active span:nth-of-type(2) {
    transform: translateY(-7px) rotate(45deg); }

/* } */
@media screen and (max-width: 1024px) {
  /* drawer torigger btn */
  #drawer-area {
    display: block !important;
    position: fixed;
    top: 0;
    right: 0;
    z-index: 9010;
    width: 60px;
    height: 60px;
    transition: left .2s linear; }
    #drawer-area.toggle {
      right: 5%; }
    #drawer-area.move {
      -webkit-animation: headerMove .6s ease-in forwards;
      animation: headerMove .6s ease-in forwards; }

  #gmenu-icon {
    width: 30px;
    top: 18px;
    right: 7px;
    margin: 6px;
    background: #f6f6f6;
    transition: right .2s linear; }
    #gmenu-icon span:nth-of-type(1) {
      top: 0; }
    #gmenu-icon span:nth-of-type(2) {
      top: 9px; }
    #gmenu-icon.active {
      right: 1%; }
      #gmenu-icon.active span:nth-of-type(1) {
        transform: translateY(4px) rotate(-45deg); }
      #gmenu-icon.active span:nth-of-type(2) {
        transform: translateY(-4px) rotate(45deg); }
    #gmenu-icon.move {
      -webkit-animation: borderMove .6s ease-in forwards;
      animation: borderMove .6s ease-in forwards; }

  /* drawer body */
  #drawer {
    display: block;
    position: fixed;
    top: 0;
    right: -70%;
    z-index: 8001;
    width: 70%;
    height: 100%;
    overflow: hidden;
    background: #fff;
    transition: all .5s ease;
    padding: 120px 12px 12px 12px; }
    #drawer.toggle {
      right: 0; }
    #drawer ul.d-main {
      width: 70%;
      margin: 0 auto; }
      #drawer ul.d-main li {
        width: 100%;
        padding: 16px 4px;
        border-bottom: 1px solid #001589; }
        #drawer ul.d-main li a {
          letter-spacing: .15em;
          padding-left: 3px;
          font-size: 1.6em;
          font-family: 'Montserrat', sans-serif;
          font-weight: bold;
          color: #000938; }
        #drawer ul.d-main li:last-child {
          border-bottom: none; }
          #drawer ul.d-main li:last-child a {
            display: block;
            padding: 16px 16px;
            margin: 40px;
            color: #fff;
            background: #001589;
            border-radius: 50px;
            font-size: 1.2rem;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all ease .5s; } }
          @media screen and (max-width: 1024px) and (max-width: 768px) {
            #drawer ul.d-main li:last-child a {
              margin: 40px 0; } }
          @media screen and (max-width: 1024px) and (max-width: 480px) {
            #drawer ul.d-main li:last-child a {
              margin: 24px 0; } }
@media screen and (max-width: 1024px) {
            #drawer ul.d-main li:last-child a::before {
              content: "";
              background: url("../images/cart.svg") no-repeat;
              width: 16px;
              height: 16px;
              background-size: contain;
              display: block;
              margin-right: 8px; }
            #drawer ul.d-main li:last-child a:hover {
              background: #332f2f; } }
  @media screen and (max-width: 1024px) and (max-width: 480px) {
    #drawer {
      right: -100%;
      width: 100%; } }

#drawer ul.d-main li.d-main-item.slidedown {
  padding-bottom: 0; }
  #drawer ul.d-main li.d-main-item.slidedown ul li {
    padding: 4px 0; }

@keyframes headerMove {
  0% {
    opacity: 1;
    right: 0; }
  100% {
    opacity: 0;
    right: 200px; } }
@keyframes borderMove {
  0% {
    opacity: 1;
    right: 11px; }
  100% {
    opacity: 0;
    right: 200px; } }
.drawerlogo {
  width: 50%;
  margin: 12px auto 20px auto;
  display: block; }
  @media screen and (max-width: 480px) {
    .drawerlogo {
      width: 70%; } }
  .drawerlogo a img {
    width: 100%; }