.qn-header-outer {
  width: 100%;
  height: 72px; }
  .qn-header-outer .qn-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    min-width: 1200px;
    height: 72px;
    line-height: 72px;
    background: transparent;
    -webkit-transition: all 0.3s cubic-bezier(0.25, 0.5, 0.5, 0.9);
    -moz-transition: all 0.3s cubic-bezier(0.25, 0.5, 0.5, 0.9);
    transition: all 0.3s cubic-bezier(0.25, 0.5, 0.5, 0.9);
    z-index: 1000; }
    .qn-header-outer .qn-header .qn-logo {
      float: left; }
      .qn-header-outer .qn-header .qn-logo img {
        width: 156px;
        height: 44px;
        vertical-align: middle; }
    .qn-header-outer .qn-header .qn-account {
      float: right;
      height: 100%; }
      .qn-header-outer .qn-header .qn-account .notice-box {
        display: inline-block; }
        .qn-header-outer .qn-header .qn-account .notice-box .notice {
          font-size: 24px;
          vertical-align: middle; }
        .qn-header-outer .qn-header .qn-account .notice-box .notice-opt {
          width: 348px;
          position: absolute;
          background-color: #fff;
          top: 63px;
          left: -308px;
          border-radius: 4px;
          box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.16); }
          .qn-header-outer .qn-header .qn-account .notice-box .notice-opt::before {
            content: "";
            position: absolute;
            top: -6px;
            right: 23px;
            margin-left: -6px;
            border-left: 6px solid transparent;
            border-right: 6px solid transparent;
            border-bottom: 6px solid #f5f5f5;
            z-index: 100; }
          .qn-header-outer .qn-header .qn-account .notice-box .notice-opt .notice-list .notice-list-title {
            display: flex;
            align-items: center;
            height: 40px;
            line-height: 40px;
            font-size: 14px;
            padding-left: 24px;
            padding-top: 4px; }
            .qn-header-outer .qn-header .qn-account .notice-box .notice-opt .notice-list .notice-list-title .list-title {
              flex: 1;
              min-width: 0;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap; }
            .qn-header-outer .qn-header .qn-account .notice-box .notice-opt .notice-list .notice-list-title .look {
              color: #299d7a; }
              .qn-header-outer .qn-header .qn-account .notice-box .notice-opt .notice-list .notice-list-title .look .xsj {
                color: #666;
                font-weight: 700;
                margin-left: 15px;
                display: inline-block; }
            .qn-header-outer .qn-header .qn-account .notice-box .notice-opt .notice-list .notice-list-title .notice-close {
              color: #666666;
              font-size: 16px;
              margin: 0 16px 0 16px; }
            .qn-header-outer .qn-header .qn-account .notice-box .notice-opt .notice-list .notice-list-title .notice-close:hover {
              color: #dc312e; }
          .qn-header-outer .qn-header .qn-account .notice-box .notice-opt .notice-list .notice-list-content {
            display: none;
            font-size: 14px;
            padding-left: 24px;
            padding-top: 4px;
            line-height: 20px;
            width: 305px;
            overflow: hidden; }
        .qn-header-outer .qn-header .qn-account .notice-box:hover {
          cursor: pointer; }
          .qn-header-outer .qn-header .qn-account .notice-box:hover .user-icon {
            transform: rotate(180deg); }
          .qn-header-outer .qn-header .qn-account .notice-box:hover .notice-opt {
            opacity: 1; }
      .qn-header-outer .qn-header .qn-account .qn-spliter {
        display: inline-block;
        width: 1px;
        height: 16px;
        margin: 0 24px;
        vertical-align: middle;
        background: rgba(255, 255, 255, 0.3); }
      .qn-header-outer .qn-header .qn-account .logged-in {
        display: none; }
        .qn-header-outer .qn-header .qn-account .logged-in .notice-box {
          display: inline-block;
          position: relative;
          cursor: pointer;
          margin-right: 20px; }
          .qn-header-outer .qn-header .qn-account .logged-in .notice-box .notice-opt::before {
            content: "";
            position: absolute;
            top: -6px;
            right: 23px;
            margin-left: -6px;
            border-left: 6px solid transparent;
            border-right: 6px solid transparent;
            border-bottom: 6px solid rgba(255, 255, 255, 0);
            z-index: 100; }
          .qn-header-outer .qn-header .qn-account .logged-in .notice-box .notice {
            font-size: 24px;
            vertical-align: middle;
            color: #ffffff; }
          .qn-header-outer .qn-header .qn-account .logged-in .notice-box .title {
            position: absolute;
            top: 18px;
            right: -7px;
            width: 16px;
            height: 16px;
            border-radius: 50%;
            background-color: #dc312e;
            color: #ffffff; }
            .qn-header-outer .qn-header .qn-account .logged-in .notice-box .title .notice-num {
              position: absolute;
              top: -28px;
              left: 2px;
              display: inline-block;
              font-size: 10px; }
          .qn-header-outer .qn-header .qn-account .logged-in .notice-box .hidden {
            display: none; }
        .qn-header-outer .qn-header .qn-account .logged-in .user-account-wrap {
          position: relative;
          display: inline-block;
          height: 36px;
          line-height: 36px;
          vertical-align: middle;
          font-size: 0; }
          .qn-header-outer .qn-header .qn-account .logged-in .user-account-wrap .user-avatar {
            display: inline-block;
            width: 32px;
            height: 32px;
            vertical-align: middle; }
            .qn-header-outer .qn-header .qn-account .logged-in .user-account-wrap .user-avatar img {
              width: 32px;
              height: 32px;
              border-radius: 50%; }
          .qn-header-outer .qn-header .qn-account .logged-in .user-account-wrap .user-name {
            display: inline-block;
            min-width: 98px;
            margin-left: 8px;
            line-height: 36px;
            vertical-align: middle;
            font-size: 15px;
            color: rgba(255, 255, 255, 0.8); }
          .qn-header-outer .qn-header .qn-account .logged-in .user-account-wrap .user-icon {
            display: inline-block;
            margin-left: 6px;
            vertical-align: middle;
            font-size: 12px;
            color: #fff;
            -webkit-transition: all 0.3s cubic-bezier(0.25, 0.5, 0.5, 0.9);
            -moz-transition: all 0.3s cubic-bezier(0.25, 0.5, 0.5, 0.9);
            transition: all 0.3s cubic-bezier(0.25, 0.5, 0.5, 0.9); }
          .qn-header-outer .qn-header .qn-account .logged-in .user-account-wrap .user-account-opt {
            position: absolute;
            width: 100%;
            margin: 8px 0 0;
            padding: 4px 0;
            border-radius: 4px;
            box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.16);
            background: #fff;
            opacity: 0;
            -webkit-transition: all 0.3s cubic-bezier(0.25, 0.5, 0.5, 0.9);
            -moz-transition: all 0.3s cubic-bezier(0.25, 0.5, 0.5, 0.9);
            transition: all 0.3s cubic-bezier(0.25, 0.5, 0.5, 0.9); }
            .qn-header-outer .qn-header .qn-account .logged-in .user-account-wrap .user-account-opt ul li a {
              display: block;
              line-height: 40px;
              text-align: center;
              font-size: 14px;
              color: #666; }
              .qn-header-outer .qn-header .qn-account .logged-in .user-account-wrap .user-account-opt ul li a:hover {
                color: #299d7a;
                background: #f0f0f0; }
            .qn-header-outer .qn-header .qn-account .logged-in .user-account-wrap .user-account-opt::before {
              content: "";
              position: absolute;
              top: -6px;
              left: 50%;
              margin-left: -6px;
              border-left: 6px solid transparent;
              border-right: 6px solid transparent;
              border-bottom: 6px solid #fff;
              z-index: 100; }
          .qn-header-outer .qn-header .qn-account .logged-in .user-account-wrap:hover {
            cursor: pointer; }
            .qn-header-outer .qn-header .qn-account .logged-in .user-account-wrap:hover .user-icon {
              transform: rotate(180deg); }
            .qn-header-outer .qn-header .qn-account .logged-in .user-account-wrap:hover .user-account-opt {
              opacity: 1; }
      .qn-header-outer .qn-header .qn-account .not-logged-in {
        font-size: 0; }
        .qn-header-outer .qn-header .qn-account .not-logged-in .qn-login {
          display: inline-block;
          height: 36px;
          line-height: 36px;
          vertical-align: middle;
          font-size: 15px;
          color: #fff;
          opacity: 0.8;
          cursor: pointer; }
          .qn-header-outer .qn-header .qn-account .not-logged-in .qn-login:hover {
            opacity: 1; }
        .qn-header-outer .qn-header .qn-account .not-logged-in .qn-register {
          display: inline-block;
          width: 100px;
          height: 36px;
          margin-left: 32px;
          line-height: 36px;
          border-radius: 2px;
          text-align: center;
          vertical-align: middle;
          font-size: 14px;
          color: #fff;
          background: #0fb181;
          cursor: pointer; }
          .qn-header-outer .qn-header .qn-account .not-logged-in .qn-register:hover {
            background: #3bbd97; }
    .qn-header-outer .qn-header .qn-nav {
      float: right; }
      .qn-header-outer .qn-header .qn-nav ul {
        display: flex;
        font-size: 0; }
        .qn-header-outer .qn-header .qn-nav ul li {
          display: flex;
          align-items: center;
          height: 72px;
          opacity: 0.8; }
          .qn-header-outer .qn-header .qn-nav ul li + li {
            margin-left: 32px; }
          .qn-header-outer .qn-header .qn-nav ul li a {
            font-size: 15px;
            color: #fff; }
          .qn-header-outer .qn-header .qn-nav ul li .icon {
            height: 20px;
            margin-left: 4px; }
          .qn-header-outer .qn-header .qn-nav ul li:hover, .qn-header-outer .qn-header .qn-nav ul li.active {
            opacity: 1; }
            .qn-header-outer .qn-header .qn-nav ul li:hover a, .qn-header-outer .qn-header .qn-nav ul li.active a {
              color: #299d7a !important; }
    .qn-header-outer .qn-header.qn-scroll {
      box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.16);
      background: #fff;
      top: 0; }
      .qn-header-outer .qn-header.qn-scroll .qn-account .notice-box {
        display: inline-block;
        position: relative;
        cursor: pointer;
        margin-right: 20px; }
        .qn-header-outer .qn-header.qn-scroll .qn-account .notice-box .notice {
          font-size: 24px;
          vertical-align: middle;
          color: #000000; }
        .qn-header-outer .qn-header.qn-scroll .qn-account .notice-box .title {
          position: absolute;
          top: 18px;
          right: -7px;
          width: 16px;
          height: 16px;
          border-radius: 50%;
          background-color: #dc312e;
          color: #ffffff; }
          .qn-header-outer .qn-header.qn-scroll .qn-account .notice-box .title .notice-num {
            position: absolute;
            top: -28px;
            left: 2px;
            display: inline-block;
            font-size: 10px; }
      .qn-header-outer .qn-header.qn-scroll .qn-account .qn-spliter {
        background: #d9d9d9; }
      .qn-header-outer .qn-header.qn-scroll .qn-account .not-logged-in .qn-login {
        color: #333; }
      .qn-header-outer .qn-header.qn-scroll .qn-nav ul li a {
        color: #333; }
      .qn-header-outer .qn-header.qn-scroll .user-name {
        color: #666 !important; }
      .qn-header-outer .qn-header.qn-scroll .user-icon {
        color: #333 !important; }
      .qn-header-outer .qn-header.qn-scroll .user-account-opt::after {
        content: "";
        position: absolute;
        top: -6px;
        left: 50%;
        margin-top: -1.5px;
        margin-left: -6px;
        border-left: 6px solid transparent;
        border-right: 6px solid transparent;
        border-bottom: 6px solid rgba(0, 0, 0, 0.16);
        z-index: 99; }

/*# sourceMappingURL=header.css.map */