#header-login {
  position: relative;
  border-bottom: 1px solid #fff; }
  @media (max-width: 987px) {
    #header-login {
      border: none;
      margin-bottom: 1px;
      background: #e9e9e9; } }
  #header-login .header_user_info.currentBox:after {
    content: " ";
    position: absolute;
    left: 0;
    top: 0;
    display: block;
    height: 100%;
    border-left: 1px solid #e9e9e9;
    -moz-transition: all 0s ease;
    -o-transition: all 0s ease;
    -webkit-transition: all 0s ease;
    transition: all 0s ease; }
  #header-login .header_user_info.currentBox a {
    background: none;
    display: block;
    height: 100px;
    width: 100%;
    border: none;
    text-align: center;
    line-height: 100px;
    color: #bdbdbd;
    padding: 0; }
    @media (max-width: 987px) {
      #header-login .header_user_info.currentBox a {
        height: 65px;
        line-height: 65px; } }
    #header-login .header_user_info.currentBox a span {
      display: none; }
    #header-login .header_user_info.currentBox a:before {
      content: "\e186";
      font-family: "material-design";
      font-size: 31px;
      -moz-transition: all 0.1s ease;
      -o-transition: all 0.1s ease;
      -webkit-transition: all 0.1s ease;
      transition: all 0.1s ease; }
  #header-login .header_user_info.currentBox.account a:before {
    content: "\e18b"; }
  #header-login .header_user_info.currentBox.active:after {
    left: -1px;
    -moz-transition: all 1s ease;
    -o-transition: all 1s ease;
    -webkit-transition: all 1s ease;
    transition: all 1s ease; }
  #header-login .header_user_info.currentBox.active a:before {
    font-size: 41px;
    color: #333; }
  #header-login .header_user_info.currentBox.active + #header-login-content {
    animation: 0.4s ease-in-out 0s normal none 1 moveFromLeft;
    -webkit-animation: 0.4s ease-in-out 0s normal none 1 moveFromLeft; }
  #header-login .logout {
    width: 100%; }
    #header-login .logout button, #header-login .logout a {
      display: block;
      float: none;
      font-size: 21px;
      height: 50px;
      padding-top: 12px;
      background: #262626;
      color: #888;
      border: none;
      text-align: center; }
      #header-login .logout button:hover, #header-login .logout a:hover {
        color: #fff; }
      #header-login .logout button:before, #header-login .logout a:before {
        content: "\e186";
        font-family: "material-design"; }
      #header-login .logout button span, #header-login .logout a span {
        display: none; }

#header-login-content {
  display: none;
  width: 264px;
  padding: 19px 29px 20px 31px;
  margin: 0;
  position: absolute;
  right: 100%;
  top: 0;
  z-index: 1;
  background: #e9e9e9;
  color: #fff;
  margin-right: 1px; }
  @media (max-width: 987px) {
    #header-login-content {
      width: 255px;
      padding: 14px 10px 17px 12px; } }
  #header-login-content label {
    color: #fff; }
  #header-login-content li {
    margin: 0;
    padding: 0; }
    #header-login-content li #header_login_form .form-group {
      margin-bottom: 11px; }
    #header-login-content li #header_login_form .account_input {
      height: 50px;
      border: none;
      border-bottom: 1px solid #fff;
      background: none;
      padding: 14px 0;
      font-size: 14px; }
    #header-login-content li .form_content p {
      width: 50%;
      float: left;
      padding-top: 19px; }
      #header-login-content li .form_content p button, #header-login-content li .form_content p a {
        display: block;
        float: none;
        font-size: 21px;
        height: 50px;
        background: #262626;
        color: #888;
        border: none;
        text-align: center;
        width: 100%; }
        #header-login-content li .form_content p button:hover, #header-login-content li .form_content p a:hover {
          color: #fff; }
        #header-login-content li .form_content p button:before, #header-login-content li .form_content p a:before {
          content: "\e0d0";
          font-family: "material-design"; }
        #header-login-content li .form_content p button span, #header-login-content li .form_content p a span {
          display: none; }
      #header-login-content li .form_content p a {
        margin-left: 1px;
        font-size: 22px;
        padding-top: 12px; }
        #header-login-content li .form_content p a:before {
          content: "\e006"; }
    #header-login-content li ul {
      margin: 0 0 10px 0; }
      #header-login-content li ul li {
        display: block;
        border-top: 1px solid #515151;
        font-size: 14px;
        line-height: 40px; }
        #header-login-content li ul li:first-child {
          border: none; }
        #header-login-content li ul li a {
          color: #888;
          padding: 0 10px 0 10px;
          display: block; }
          #header-login-content li ul li a:hover {
            color: #1c1c1c; }
          #header-login-content li ul li a i {
            display: none; }

#create_header_account_error {
  padding: 8px; }

@-webkit-keyframes moveFromLeft {
  from {
    -webkit-transform: translateX(-100%);
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
    opacity: 0; }

  to {
    -webkit-transform: translateX(0%);
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
    opacity: 1; } }
@-moz-keyframes moveFromLeft {
  from {
    -moz-transform: translateX(-100%);
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
    opacity: 0; }

  to {
    -moz-transform: translateX(0%);
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
    opacity: 1; } }
@-ms-keyframes moveFromLeft {
  from {
    -ms-transform: translateX(-100%);
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
    opacity: 0; }

  to {
    -ms-transform: translateX(0%);
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
    opacity: 1; } }