@media (max-width: $media-mobile-max) {
  .header {
    display: none;
  }
  .header-mobile {
    position: fixed;
    top: 0;
    z-index: 10;
    width: 100%;
    height: 50px;
    background-color: $dark-bg-color;
    display: flex;
    justify-content: space-between;
    align-items: center;
    &__icon {
      position: relative;
      width: 60px;
      height: 100%;
      text-align: center;
      line-height: 55px;
      cursor: pointer;
      transition: background-color 300ms ease-out;
      &.is-open {
        &::after {
          display: block;
          background: url('data:image/svg+xml;charset=utf-8,%3Csvg height="18" width="18" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300"%3E%3Cpath fill="%23fff" d="M174.283 149.996l118.56-118.56c8.288-8.289 9.55-20.426 2.858-27.141-6.707-6.708-18.859-5.414-27.148 2.858l-118.559 118.569-118.56-118.568c-8.272-8.272-20.425-9.566-27.133-2.858-6.699 6.699-5.429 18.852 2.867 27.141l118.56 118.56-118.56 118.559c-8.296 8.288-9.566 20.425-2.867 27.148 6.708 6.707 18.861 5.414 27.133-2.858l118.56-118.561 118.559 118.561c8.289 8.272 20.441 9.565 27.148 2.843 6.691-6.708 5.43-18.845-2.858-27.133l-118.56-118.56z"/%3E%3C/svg%3E') center no-repeat;
          background-size: 100%;
          width: 18px;
          height: 18px;
        }
        &::before {
          display: none;
        }
      }
      &::after {
        content: '';
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
      }
      &_menu {
        &::after {
          display: block;
          background: url('data:image/svg+xml;charset=utf-8,%3Csvg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 14"%3E%3Cpath fill="%23fff" d="M0,14h20v-2H0V14z M0,8h20V6H0V8z M0,0v2h20V0H0z"/%3E%3C/svg%3E') center no-repeat;
          background-size: 100%;
          width: 20px;
          height: 14px;
        }
      }
      &_user {
        &::after {
          display: block;
          background: url('data:image/svg+xml;charset=utf-8,%3Csvg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 17"%3E%3Cpath fill="%23fff" d="M14,11H2c-1.1,0-2,0.9-2,2v4h2v-3.5C2,13.2,2.2,13,2.5,13h11c0.3,0,0.5,0.2,0.5,0.5V17h2v-4C16,11.9,15.1,11,14,11z M8,10c2.8,0,5-2.2,5-5c0-2.8-2.2-5-5-5C5.2,0,3,2.2,3,5C3,7.8,5.2,10,8,10z M8,1.7c1.8,0,3.3,1.5,3.3,3.3c0,1.8-1.5,3.2-3.3,3.2C6.2,8.2,4.8,6.8,4.8,5C4.8,3.2,6.2,1.7,8,1.7z"/%3E%3C/svg%3E') center no-repeat;
          background-size: 100%;
          width: 16px;
          height: 17px;
        }
        &.is-notify {
          &::before {
            content: '';
            position: absolute;
            top: 14px;
            left: 50%;
            margin-left: 1px;
            z-index: 10;
            width: 7px;
            height: 7px;
            border-radius: 50%;
            background-color: $attention-color;
          }
        }
      }
    }
    &__menu {
      position: fixed;
      top: 0;
      right: 0;
      margin-top: 50px;
      z-index: 3;
      background-color: $white-color;
      height: 100vh;
      &-item {
        width: 100%;
        height: 49px;
        border-top: 1px solid $light-gray-color;
        display: flex;
        align-items: center;
        &_no-border {
          border-top-color: transparent;
        }
      }
      &-link {
        position: relative;
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        font-size: 19px;
        font-family: $font-futurademi;
        padding: 0 20px;
        &.is-enter {
          padding-left: 46px;
          &::before {
            display: block;
            background: url('data:image/svg+xml;charset=utf-8,%3Csvg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 17"%3E%3Cpath fill="%23302f2d" d="M14,11H2c-1.1,0-2,0.9-2,2v4h2v-3.5C2,13.2,2.2,13,2.5,13h11c0.3,0,0.5,0.2,0.5,0.5V17h2v-4C16,11.9,15.1,11,14,11z M8,10c2.8,0,5-2.2,5-5c0-2.8-2.2-5-5-5C5.2,0,3,2.2,3,5C3,7.8,5.2,10,8,10z M8,1.7c1.8,0,3.3,1.5,3.3,3.3c0,1.8-1.5,3.2-3.3,3.2C6.2,8.2,4.8,6.8,4.8,5C4.8,3.2,6.2,1.7,8,1.7z"/%3E%3C/svg%3E') center no-repeat;
            background-size: 100%;
            width: 16px;
            height: 17px;
            content: '';
            position: absolute;
            left: 20px;
          }
        }
      }
    }
    &__btn {
      max-width: 93.46%;
      margin: 0 auto;
    }
  }
}