#myInput {
  display: none;
}

header {
  position        : fixed;
  width           : 100%;
  top             : 0;
  left            : 0;
  z-index         : 99;
  background-color: #fff;
  border-bottom   : 1px solid #ccc;
  height          : 64px;
  @include tr(transform, 0.4s);

  .logo {
    img {
      height : 38px;
      display: block;
      margin : 13px 0;
    }
  }

  .sl-phone {
    font-size: 20px;
    position : absolute;
    z-index  : 100;
    right    : 80px;
    top      : 20px;
  }

  .sl-search {
    font-size  : 20px;
    position   : absolute;
    z-index    : 100;
    right      : 45px;
    height     : 60px;
    line-height: 60px;
  }

  label.myInput {
    display   : inline-block;
    width     : 65px;
    height    : 64px;
    cursor    : pointer;
    margin    : 0;
    z-index   : 100;
    position  : absolute;
    right     : -16px;
    top       : 0;
    transition: $tr4;
    overflow  : hidden;

    .menu {
      margin-top: 22px;
      width     : 25px;
      padding   : 0 20px;

      .bar {
        height            : 3px;
        width             : 25px;
        border-radius     : 50px;
        margin            : 5px 0;
        display           : block;
        position          : relative;
        background-color  : #666666;
        -moz-transition   : 0.4s;
        -o-transition     : 0.4s;
        -webkit-transition: 0.4s;
        transition        : 0.4s;
      }
    }
  }
}

#myInput:checked~header {
  //transform: translateX(-120px);
  label.myInput {
    background-color: #24805e;

    .bar {
      background-color: #fff;

      &:nth-of-type(1) {
        transform: translateY(8px) rotate(45deg);
      }

      &:nth-of-type(2) {
        transform : translateX(100px);
        transition: 0.6s;
      }

      &:nth-of-type(3) {
        transform: translateY(-8px) rotate(-45deg);
      }
    }
  }
}

nav {
  width     : 50%;
  position  : fixed;
  right     : -1px;
  top       : 59px;
  z-index   : 98;
  height    : auto;
  background: #fff;
  border    : 1px solid #d9d9d9;
  visibility: hidden;
  opacity   : 0;
  @include tr(all, 0.4s);

  & > ul {
    margin: 10%;

    & > li {
      & > a {
        width        : 100%;
        display      : block;
        font-size    : 15px;
        font-weight  : lighter;
        line-height  : 2.5em;
        color        : #333;
        border-bottom: 1px solid #d9d9d9;

        span {
          float: right;
        }
      }

      &:last-child {
        a {
          border-bottom: 0;
        }
      }

      ul {
        display  : none;
        font-size: 13px;
        padding  : 1em 0;

        li {
          a {
            color      : #999;
            line-height: 2em;
          }
        }
      }
    }
  }
}

#myInput:checked~nav {
  visibility: visible;
  opacity   : 1;
  @include tr(all, 0.4s);
}

article {
  margin-top: 64px;
}
