/** 顶部 */
  .pro-layout-header {
    position       : fixed;
    top            : 0;
    z-index        : 101;
    display        : flex;
    flex-direction : row;
    align-items    : center;
    justify-content: space-between;
    width          : 100%;
    height         : 48px;
    padding        : 0 32px 0px 0px;
    line-height    : 48px;
    background     : var(--zaui-base-bg, #ffffff);
    box-shadow     : 0px 1px 2px 0px rgba(0, 55, 93, 0.1) !important;

    .pro-layout-header-actions {
      .@{ant-prefix}-avatar {
        background: var(--zaui-brand, #006aff);
      }
    }

    .pro-layout-header-logo {
      display    : flex;
      flex       : 200px;
      align-items: center;
      width      : 200px;
      padding    : 0;
      background : var(--zaui-base-bg, #ffffff);

      span {
        display        : flex;
        align-items    : center;
        justify-content: center;
        width          : 220px;
      }

      .default-logo {
        display: inline-block;
        width  : 120px;
        height : auto;
      }

      h4 {
        font-size   : var(--zaui-font-size-lg, 16px);
        font-weight : 600;
        color       : #1D2129;
        padding-left: var(--zaui-space-size-md, 16px);
        position    : relative;
        margin      : 0;

        &::before {
          content   : '';
          width     : 1px;
          height    : 19px;
          background: #DEE0E3;
          position  : absolute;
          left      : 0;
          top       : 50%;
          transform : translateY(-50%);
        }
      }

      a {
        color: rgba(0, 0, 0, 0.85);
      }

      .pro-layout-icon {
        width : 200px;
        height: 48px;
      }
    }

    &-logo {
      height          : 48px;
      padding         : 5px 0;
      text-align      : center;
      background-color: #081838;
      transition      : width 0.3s cubic-bezier(0.075, 0.82, 0.165, 1);

      >a {
        display        : flex;
        align-items    : center;
        text-decoration: none;

        &:hover,
        &:visited {
          text-decoration: none !important;
        }
      }

      img {
        height: 33px;
      }

      h1 {
        margin      : 0.67em 0;
        padding-left: 12px;
        color       : var(--zaui-text, #343434);
        font-size   : var(--zaui-font-size-xl, 18px);
      }
    }

    &-content {
      flex: auto;
    }

    &-actions {
      display    : flex;
      align-items: center;
      float      : right;

      >.pro-layout-icon {
        width       : 26px;
        height      : 26px;
        margin-right: 30px;
        color       : var(--zaui-text, #343434);
        cursor      : pointer;
        transition  : width 0.3s cubic-bezier(0.075, 0.82, 0.165, 1);

        &:hover {
          color: var(--zaui-text, #343434);
        }
      }
    }
  }