.header {
  position: relative;
  // height: px2rem(120);
  line-height: 1;
  color: #0D1C28;
  font-size: @normal-font-size;
  background-color: #FFFFFF;
  box-shadow: 0 0 px2rem(10) 0 rgba(9, 41, 77, 0.25);
  z-index: 99;

  &-index {
    color: #FFFFFF;
    /* IE9漸變色 */
    // filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#3581be, endColorstr=#5495ca);
    background-color: #5495ca;
    background: linear-gradient(#3581be, #5495ca);
    // background-size: px2rem(5) px2rem(120);
    // border-bottom: none;
    box-shadow: none;
    border-bottom: px2px(1) solid #6CA4D1;

    .header-env {
      color: #FFFFFF;
      border-color: #FFFFFF;
    }

    .header-logo a {
      color: #FFFFFF;
      background-image: url('../images/components/header/logo2x_index.png');
    }

    .header-title a {
      color: #FFFFFF;
    }

    .navigation-hall-toggle {
      color: #FCF2F9;
      background-color: transparent;

      &:hover {
        color: #FFFFFF;
        background-color: transparent;
      }
    }

    .header-aside li a {
      color: #FCF2F9;
    }

    .navigation > li > a {
      color: #FFFFFF;

      &:hover {
        color: #FFFFFF;

        &:after {
          background-color: #FFFFFF;
        }
      }
    }

    .navigation > li.active > a {
      color: #FFFFFF;

      &:after {
        background-color: #FFFFFF;
      }
    }
  }

  .container {
    position: relative;
  }

  &-hd {
    position: relative;
    .clearfix();
  }

  &-main {
    margin: px2rem(20) 0 px2rem(6) 0;

    float: left;
  }

  // 網廳運行環境標記
  &-env {
    display: inline-block;
    color: #3189C6;
    border: px2px(1) solid #3189C6;
    padding: 0 px2rem(12);
    font-size: px2rem(14);
    line-height: px2rem(22);
    margin: 0 px2rem(15);
    border-radius: px2px(1);
  }

  &-title {
    display: inline-block;
    font-size: px2rem(18);
    font-weight: bold;
    border-left: px2px(1) solid #CCCCCC;
    padding-left: px2rem(18);
    margin-left: px2rem(5);
    margin-right: px2rem(10);

    a {
      color: @lv1-font-color;
    }
  }

  &-hall-nav {
    display: inline-block;
    font-size: px2rem(14);
  }

  &-aside {
    margin-top: px2rem(32);
    float: right;
    list-style: none;
    line-height: px2rem(14);
    font-size: px2rem(14);

    li {
      .fl;
      padding: 0 px2rem(15);
      border-right: px2px(1) solid @lv1-bg-color;

      a {
        color: @lv3-font-color;
        text-decoration: none;
        display: inline-block;
        font-style: initial;

        .login-icon:before {
          content: "\E610";
          font-style: normal;
          font-family: iconfont;
          box-sizing: border-box;
        }
      }

      .login-picker-hall-open {

        // &:hover {
        // .login-picker-hall {
        //     visibility: visible;
        //     opacity: 1;
        //     transform: none;
        //   }
        // }
      }

      &:last-child {
        padding-right: 0;
        border-right: none;
      }
    }
  }
  .header--user-center__mobile {
    display: none;
  }
  .header-nav-toggle-btn {
    display: none;
  }

  &-avatar {
    img {
      width: px2rem(23);
      height: px2rem(23);
      vertical-align: middle;
    }
  }

  &-logo {
    margin: 0;
    font-size: px2rem(22);
    font-weight: bold;
    line-height: px2rem(40);
    display: inline-block;
    margin-right: px2rem(10);

    a {
      display: block;
      padding-left: px2rem(42);
      color: @lv1-font-color;
      text-decoration: none;
      background: url("../images/components/header/logo2x.png") no-repeat left center transparent;
      background-size: px2rem(32) px2rem(32);
    }
  }

  &-nav {
    // // position: absolute;
    // left: 0;
    // bottom: 0;
    // margin: 0;
    // padding: 0;
    clear: both;
  }

  &-search {
    position: absolute;
    right: 0;
    bottom: px2rem(13);
    height: px2rem(30);
    background-color: @lv3-bg-color;

    &-input {
      width: px2rem(185);
      height: px2rem(30);
      border: none;
      padding: px2rem(3) px2rem(30) px2rem(3) px2rem(8);
      background-color: transparent;
      float: left;
      color: @lv1-font-color;
      font-size: px2px(13);
      transition: all .3s ease;

      &:focus {
        width: px2rem(270);
        border: px2px(1) solid #3E97DF;
        border-right: 0;
        background-color: #FFFFFF;

        + button {
          background-color: #FFFFFF;
          border: px2px(1) solid #3E97DF;
          border-left: 0;
        }
      }

      // &:hover {
      //   width: px2rem(270);
      //   margin-left: px2rem(-85);
      //   border: px2px(1) solid #3E97DF;
      //   border-right: 0;
      //   background-color: #FFFFFF;

      //   + button {
      //     background-color: #FFFFFF;
      //     border: px2px(1) solid #3E97DF;
      //     border-left: 0;
      //   }
      // }
    }

    &-submit {
      position: absolute;
      right: 0;
      -webkit-appearance: none;
      border: none;
      display: block;
      width: px2rem(30);
      height: px2rem(30);
      line-height: px2rem(30);
      text-align: center;
      font-size: px2rem(26);
      color: @lv1-font-color;
      padding: 0;
      background-color: transparent;
      outline: none;
      cursor: pointer;
      transition: all .3s ease;

      .icon {
        display: block;
      }
    }

    @media screen and (max-width: @screen-md) {
      &-input {
        width: px2rem(135);

        &:focus {
          width: px2rem(165);
        }
      }
    }

  }

  .search-form-association {
    display: none;
    top: 100%;
    right: 0;
    max-width: px2rem(300);
    min-width: 100%;
    font-size: px2px(12);
    line-height: px2rem(30);
    padding-bottom: px2rem(10);
    background-color: #FFFFFF;
    box-shadow: 0 px2rem(4) px2rem(30) 0 rgba(9,41,77,0.12);
    transition: all 0.2s;
    position: absolute;
    z-index: 2;

    li:first-child a {
      margin-top: px2rem(10);
    }

    li {

      a {
        display: block;
        color: #0D1C28;
        font-weight: bold;
        padding-left: px2rem(20);
        white-space: nowrap;
        &:hover {
          background: #F1F2F3;
        }

        i {
          font-style: normal;
          font-weight: normal;
        }
      }
    }
  }
}

.navigation {
  list-style: none;
  margin: 0;
  padding: 0;

  & > li {
    display: inline-block;
    font-size: px2rem(16);
    // font-weight: bold;
    line-height: px2rem(54);
    margin-right: px2rem(60);

    & > a {
      position: relative;
      display: block;
      color: @lv1-font-color;
      text-decoration: none;
      box-sizing: border-box;

      &:after {
        content: "";
        height: px2rem(4);
        width: 100%;
        position: absolute;
        bottom: 0;
        left: 0;
        background-color: transparent;
      }

      &:hover {
        color: @link-hover-color;
      }
    }

    &.active > a {
      color: @link-color;

      &:after {
        background-color: @link-color;
      }
    }
  }
}

.navigation-hall {
  // position: relative;
  background-color: rgba(255, 255, 255, 0.1);
  &.open {

    .navigation-hall-toggle .reversal {
      display: inline-block;
      transform: rotate(180deg);
    }

    .navigation-hall-dropdown {
      display: block;
    }
  }

  &-toggle {
    color: @lv3-font-color;
    text-decoration: none;
    background-color: @lv3-bg-color;
    border-radius: px2rem(2);
    display: inline-block;
    padding: px2rem(5) px2rem(6);
    font-size: px2px(12);

    &:hover {
      color: @lv2-font-color;
      background-color: @lv2-bg-color;
    }
  }

  &-dropdown {
    display: none;
    position: absolute;
    top: 55%;
    left: 0;
    // width: px2rem(900);
    // color: #333333;
    // background-color: #fff;
    // border: px2rem(2) solid #C4C4C4;
    z-index: 99;
  }
}

// TODO: 已廢棄代碼，後續刪除
.login-picker-hall {
  visibility: hidden;
  right: 0;
  top: px2rem(55);
  z-index: 1;
  width: px2rem(280);
  position: absolute;
  background-color: #FFFFFF;
  box-shadow: 0 0 px2rem(5) rgba(0, 0, 0, 0.3);
  opacity: 0;
  transition: all 0.2s;
  transform: scale3d(1, 0.8, 1);
  transform-origin: center top;

  :before {
    box-sizing: border-box;
    font-family: iconfont;
  }

  a {
    display: block !important;
    color: #3e97df !important;
    transition: color .2s !important;
    line-height: px2rem(36);
    transition: color .2s;
  }

  .name {
    padding: px2rem(9) px2rem(40);

    > h3 {
      float: left;
      color: #112534;
      font-size: px2rem(18);
      padding-top: px2rem(12);
      margin-right: px2rem(10);
    }

    .certified {
      width: px2rem(50);
      height: px2rem(24);
      line-height: 2;
      font-size: px2px(12);
      margin: 0 px2rem(10);
      padding: px2rem(3) px2rem(8);
      color: #3e97df;
      border-radius: px2rem(75);
      border: px2px(1) solid #3e97df;
    }

    .changeIdentity {
      clear: both;
      display: block;
      font-size: px2rem(14);
      line-height: px2rem(36);
      transition: color .2s;
      color: #3e97df;
    }
  }

  .links {
    padding: px2rem(9) px2rem(40);
    border-top: px2px(1) solid #e2e2e2;

    a {

      i {
        font-style: normal;

        span {
          font-size: px2rem(14);
          color: #112534;
          margin-left: px2rem(15);
          font-style: initial;
        }
      }
    }

    .icon-matter-personal:before {
      content: "\E647";
    }

    .icon-notification:before {
      content: "\E698";
    }

    .icon-setting:before {
      content: "\E60F";
    }
  }

  .logout {
    text-align: center;
    padding: px2rem(9) px2rem(40);
    border-top: px2px(1) solid #e2e2e2;
  }
}

.show-user-hall {
  visibility: visible;
  opacity: 1;
  transform: none;
}

.gd-userpanel {
  position: relative;

  &-notification {
    position: relative;
    display: inline-block;

    &:before {
      .iconfont;
      content: "\e698";
    }

    span {
      position: absolute;
      height: px2rem(14);
      min-width: px2rem(14);
      max-width: px2rem(24);
      line-height: px2rem(14);
      border-radius: px2rem(14);
      text-align: center;
      background-color: #FF133D;
      color: #ffffff;
      font-size: px2rem(10);
      display: inline-block;
      padding: 0 px2rem(4);
      top: px2rem(-7);
      left: 50%;
      white-space: nowrap;
    }
  }

  // 個人賬號顯示個人圖標
  &-personal {
    .gd-userpanel-toggle {
      &:before {
        .iconfont;
        content: "\e626";
        margin-right: px2rem(4);
        vertical-align: middle;
      }
    }
  }

  &-toggle {
    display: inline-block;

    &:after {
      .iconfont;
      content: "\e610";
      vertical-align: middle;
    }

    // 解決公司名字太長文字溢出問題
    span {
      display: inline-block;
      max-width: px2rem(160);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      vertical-align: middle;
    }
  }

  &-dropdown {
    display: none;
    position: absolute;
    top: px2rem(20);
    right: 0;
    background-color: #fff;
    z-index: 99;
    width: px2rem(215);
    padding: px2rem(4) px2rem(24);
    box-shadow: 0 px2rem(2) px2rem(15) rgba(9, 41, 77, 0.15);

    li {
      display: block;
      float: none;
      border: none;
      border-bottom: 1px solid #F1F2F3;
      padding: px2rem(11) 0;
      line-height: px2rem(28);
      font-size: px2rem(14);

      &:last-child {
        border: none;
      }
    }
  }

  &-open .gd-userpanel-dropdown {
    display: block;
  }

  &-name {
    color: @lv1-font-color;
    font-size: px2rem(16);
    font-weight: bold;
    display: inline;
    vertical-align: middle;
  }

  &-level {
    vertical-align: middle;
    display: inline-block;
    color: @link-color;
    line-height: px2rem(16);
    text-align: center;
    font-size: px2rem(11);
    padding: 0 px2rem(8);
    margin: 0 px2rem(4);
    border-radius: px2rem(15);
    border: 1px solid @link-color;
  }

  &-currentlogin {
    display: block;
    color: @lv2-font-color;
  }

  // 沒有用戶頭像前先暫時隱藏用戶名和級別
  &-username {
    display: none !important;
  }

  &-ucenter,
  &-manage,
  &-help,
  &-logout {
    a {
      display: block !important;
      color: @lv1-font-color !important;

      &:hover {
        color: @lv2-font-color !important;
      }

      &:before {
        .iconfont;
        margin-right: px2rem(6);
        color: @lv1-font-color;
      }
    }
  }

  &-ucenter {
    a:before {
      content: "\e61a";
    }
  }

  &-manage {
    a:before {
      content: "\e61d";
    }
  }

  &-help {
    a:before {
      content: "\e625";
    }
  }

  &-logout {
    a:before {
      content: "\e61e";
    }
  }

  &-badge {
    float: right;
    height: px2rem(14);
    min-width: px2rem(14);
    line-height: px2rem(14);
    border-radius: px2rem(14);
    text-align: center;
    background-color: #FF133D;
    color: #ffffff;
    font-size: px2rem(10);
    padding: 0 px2rem(4);
    white-space: nowrap;
    margin-top: px2rem(6);
  }
}

// 大中屏導航適配
@media screen and (max-width: @screen-lg) {
  .navigation {
    & > li {
      margin-right: px2rem(50);
    }
  }
}

@media screen and (max-width: @screen-md) {
  .navigation {
    & > li {
      margin-right: px2rem(40);
    }
  }
}

// 小屏頭部
@media screen and (max-width: @screen-sm) {
  .header {
    position: relative;
    height: 60px;
    &-main {
      margin: px2rem(15) 0;
      .header-env {
        display: none;
      }
    }
    &-logo {
      margin-right: 3px;
      a {
        padding-left: 28px;
        background-size: 22px 22px;
      }
    }
    &-title {
      padding-left: 8px;
      margin-left: 0;
      margin-right: 0;
      font-size: 12px;
    }

    .navigation-hall {
      background: none;
      &-toggle {
        padding: 18px 5px;
        margin: -18px -5px;
        font-size: 0;
        background: none;
        .caret {
          padding: 3px 2px 1px 2px;
          font-size: 12px;
          background: #F1F2F3;
        }
      }
    }

    // 登錄
    &-aside {
      display: none
    }

    .header--user-center__mobile {
      display: block;
      position: absolute;
      top: 0;
      right: 30px;
      height: 100%;
      padding: 0 8px 0 12px;
      color: transparent;
      line-height: 60px;
      color: @link-color;
      i {
        display: block;
        font-size: 22px;
        line-height: 60px;
      }
    }

    .header-nav-toggle-btn {
      display: block;
      position: absolute;
      top: 0;
      right: -15px;
      padding: 23px 15px 23px 10px;
      div {
        position: relative;
        width: 18px;
        height: 14px;
      }
      span {
        display: block;
        position: absolute;
        left: 0;
        width: 100%;
        height: 16.66%;
        background: @link-color;
        transition: all 0.3s;
        &:nth-child(1) {
          top: 0;
          transform: translateY(-50%);
        }
        &:nth-child(2) {
          top: 50%;
          transform: translateY(-50%);
        }
        &:nth-child(3) {
          top: 100%;
          transform: translateY(-50%);
        }
      }
    }

    .header-nav {
      position: absolute;
      box-sizing: content-box;
      left: @container-screen-sm-padding-value * -1;
      padding: @container-screen-sm-padding;
      top: 100%;
      margin: 0;
      max-height: 0;
      width: 100%;
      overflow: hidden;
      opacity: 0;
      transition: all 0.5s;
      .navigation {
        margin-left: @container-screen-sm-padding-value * -1;
        margin-right: @container-screen-sm-padding-value * -1;
        margin-bottom: 20px;
        background: rgba(255,255,255,1);
        color: @link-color;
        box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
        & > li {
          display: block;
          float: none;
          margin: 0;
          border-top: 1px solid rgba(225, 225, 225, 0.3);
          a {
            padding: 0 15px;
            &:after {
              content: "";
              display: block;
              height: 100%;
              width: 3px;
              position: absolute;
              top: 0;
              left: 0;
              background-color: transparent;
            }
          }
          &.active {
            a {
              &:after {
                background-color: @link-color;
              }
            }
          }
        }
      }
    }

  }

  .header-index {
    .navigation-hall {
      &-toggle {
        .caret {
          background: rgba(255,255,255,0.1);
        }
      }
    }
    .header--user-center__mobile {
      color: #fff;
    }
    .header-nav-toggle-btn {
      span {
        background: #fff;
      }
    }
    .header-nav {
      .navigation {
        background: rgba(59, 132, 192, 0.96);
        background: linear-gradient(#5495ca, #57a0d8);

        color: #fff;
        & > li {
          border-top: 1px solid rgba(255, 255, 255, 0.1);
          &.active {
            a:after {
              background-color: #fff;
            }
          }
        }
      }
    }
  }

  .header-nav__opened.header {
    .header-nav-toggle-btn {
      span:nth-child(1) {
        top: 50%;
        margin-top: -1px;
        transform: translateY(-50%) rotate(-45deg);
      }
      span:nth-child(2) {
        transform: translateY(-50%) scaleX(0);
      }
      span:nth-child(3) {
        top: 50%;
        bottom: auto;
        margin-top: -1px;
        transform: translateY(-50%) rotate(45deg);
      }
    }
    .header-nav {
      opacity: 1;
      max-height: 400px;
    }
  }

  // 搜索
  .header-search {
    display: none;
  }
}

// 超小屏
@media screen and (max-width: 360px) {
  .header {
    &-logo {
      font-size: 16px;
      a {
        padding-left: 26px;
        background-size: 20px 20px;
      }
    }

    .header--user-center__mobile {
      padding: 0 6px 0 6px;
      right: 24px;
      i {
        font-size: 20px;
      }
    }
    .header-nav-toggle-btn {
      padding: 24px 15px 24px 8px;
      div {
        position: relative;
        width: 16px;
        height: 12px;
      }
    }
  }

}