if hexo-config('error_404.enable')
  #error-wrap
    position: absolute
    top: 50%
    right: 0
    left: 0
    margin: 0 auto
    padding: 0 1rem
    max-width: 1000px
    transform: translate(0, -50%)

    .error-content
      display: flex
      flex-direction: row
      justify-content: center
      align-items: center
      margin: 0 1rem
      height: 18rem
      border-radius: 8px
      background: #fff
      box-shadow: 0 4px 8px 6px rgba(7, 17, 27, .06)

      @media screen and (max-width: 768px)
        flex-direction: column
        margin: 0
        height: 25rem

      .error-img
        flex: 1
        height: 100%
        border-top-left-radius: 8px
        border-bottom-left-radius: 8px
        background-color: #49b1f5
        background-position: center
        background-size: cover

        @media screen and (max-width: 768px)
          flex: 1
          width: 100%
          border-top-right-radius: 8px
          border-bottom-left-radius: 0

      .error-info
        flex: 1
        padding: .5rem
        text-align: center
        font-size: 14px
        font-family: $site-name-font

        @media screen and (max-width: 768px)
          flex: 1.1
          width: 100%

        .error_title
          margin-top: -4rem
          color: $font-color
          font-size: 9em

          @media screen and (max-width: 768px)
            margin-top: -3rem

        .error_subtitle
          @extend .limit-more-line
          margin-top: -3.5rem
          color: $font-color
          word-break: break-word
          font-size: 1.6em
          -webkit-line-clamp: 2

        a
          position: relative
          z-index: 1
          display: inline-block
          margin-top: .5rem
          padding: .3rem 1.5rem
          background: $theme-color
          color: white

          i
            padding-right: .3rem