.outer-block-login {
  position: relative;
  width: 950px;
  min-height: 450px;
  margin: calc(50vh - 500px) auto;
  background-image: url(/media/image/d993c6b044df11ac180fc2b2a0baf4c3d0988571.svg);
  /* =============================================================== RESPONSIVE =================================================================*/ }
  .outer-block-login .intro-login {
    position: relative;
    top: 80px;
    display: block;
    opacity: 1; }
  .outer-block-login .intro-register {
    position: relative;
    top: 80px;
    display: none;
    opacity: 0; }
  .outer-block-login .inner-block-login-title, .outer-block-login .inner-block-register-title {
    position: absolute;
    top: 0;
    color: #fff;
    font-size: 24px;
    font-weight: 700;
    width: 100%;
    text-align: center;
    line-height: 1.5;
    margin: 0;
    top: -20px; }
  .outer-block-login .inner-block-login-subtitle, .outer-block-login .inner-newaccount, .outer-block-login .inner-block-register-title, .outer-block-login .inner-alreadymember {
    position: absolute;
    left: 0;
    color: #fff;
    font-size: 16px;
    font-weight: 400;
    width: 100%;
    text-align: center; }
    .outer-block-login .inner-block-login-subtitle a, .outer-block-login .inner-newaccount a, .outer-block-login .inner-block-register-title a, .outer-block-login .inner-alreadymember a {
      color: #fff;
      text-decoration: none;
      cursor: pointer;
      transition: all 0.3s; }
      .outer-block-login .inner-block-login-subtitle a:hover, .outer-block-login .inner-newaccount a:hover, .outer-block-login .inner-block-register-title a:hover, .outer-block-login .inner-alreadymember a:hover {
        opacity: 0.5; }
  .outer-block-login .inner-block-login-subtitle {
    top: 45px;
    margin: 0 auto;
    position: relative;
    line-height: 1.5;
    max-width: 400px; }
    .outer-block-login .inner-block-login-subtitle.extra {
      top: 90px; }
  .outer-block-login .inner-newaccount, .outer-block-login .inner-alreadymember {
    top: 500px; }
  .outer-block-login .inner-alreadymember {
    top: 533px; }
  .outer-block-login .inner-alreadymember {
    display: none; }
  .outer-block-login .inner-block-register-link {
    position: absolute;
    top: 62px;
    width: 100%;
    text-align: center;
    color: #ff6e46;
    font-size: 16px;
    font-weight: 700;
    top: 50px; }
    .outer-block-login .inner-block-register-link:hover {
      color: #fff; }
  .outer-block-login .inner-form {
    width: 100%;
    position: absolute;
    top: 120px;
    left: 255px; }
    .outer-block-login .inner-form input {
      display: block;
      margin: 0 auto;
      border: none;
      border-radius: 45px;
      font-size: 16px;
      background-color: rgba(255, 255, 255, .3); }
      .outer-block-login .inner-form input:focus {
        outline: none; }
    .outer-block-login .inner-form .inner-input {
      position: absolute;
      width: 386px;
      height: 50px;
      margin-top: 20px;
      color: #fff;
      text-align: left;
      padding-left: 55px;
      transition: all 0.2s; }
      .outer-block-login .inner-form .inner-input.email, .outer-block-login .inner-form .inner-input.user, .outer-block-login .inner-form .inner-input.company, .outer-block-login .inner-form .inner-input.pw, .outer-block-login .inner-form .inner-input.npw, .outer-block-login .inner-form .inner-input.rnpw {
        background-position: 25px center;
        background-size: 20px;
        position: absolute; }
      .outer-block-login .inner-form .inner-input.email {
        background-image: url(/media/image/677a20f5e6c989136b7e1ec6f66bb6d25ffb499b.svg);
        top: 80px;
        display: none;
        opacity: 0; }
      .outer-block-login .inner-form .inner-input.user {
        background-image: url(/media/image/ad47079d01e43dc94ad2ebcdfb9b18b5ee23e31c.svg);
        top: 80px;
        display: block;
        opacity: 1; }
      .outer-block-login .inner-form .inner-input.npw {
        background-image: url(/media/image/f5d457cf19c4e93de9e2fbbfcb06fb7c48d4852b.svg);
        top: 160px;
        display: block;
        opacity: 1; }
      .outer-block-login .inner-form .inner-input.rnpw {
        background-image: url(/media/image/f5d457cf19c4e93de9e2fbbfcb06fb7c48d4852b.svg);
        top: 240px;
        display: block;
        opacity: 1; }
      .outer-block-login .inner-form .inner-input.company {
        background-image: url(/media/image/00a5c035b8cf04ba2842eded26696989092c1963.svg);
        top: 160px;
        display: none;
        opacity: 0; }
      .outer-block-login .inner-form .inner-input.pw {
        background-image: url(/media/image/f5d457cf19c4e93de9e2fbbfcb06fb7c48d4852b.svg);
        background-size: 17px;
        top: 160px;
        display: block;
        opacity: 1; }
      .outer-block-login .inner-form .inner-input::placeholder {
        color: #fff; }
    .outer-block-login .inner-form .inner-button {
      position: absolute;
      top: 300px;
      left: 155px;
      width: 135px;
      height: 50px;
      padding-right: 22px;
      background-color: transparent;
      color: #fff;
      border: solid #fff 1px;
      cursor: pointer;
      background-position: 87% center;
      background-size: 8px;
      background-image: url(/media/image/48a282d8db1a772348a7b8417a7c9079053a7695.svg);
      transition: all 0.2s; }
      .outer-block-login .inner-form .inner-button.extra {
        top: 340px; }
      .outer-block-login .inner-form .inner-button:hover {
        background-color: #ff6e46;
        color: #fff;
        background-position: 90% center;
        border: solid #ff6e46 1px; }
    .outer-block-login .inner-form .inner-row {
      width: 320px;
      margin: 15px auto;
      position: absolute;
      top: 235px;
      left: 52px; }
      .outer-block-login .inner-form .inner-row.login-error {
        color: #822424;
        font-weight: bold; }
      .outer-block-login .inner-form .inner-row a {
        color: #fff;
        text-decoration: none; }
        .outer-block-login .inner-form .inner-row a:hover {
          opacity: 0.5; }
      .outer-block-login .inner-form .inner-row span {
        color: rgba(255, 255, 255, .5); }
      .outer-block-login .inner-form .inner-row .left {
        float: left;
        margin-left: 6px; }
        .outer-block-login .inner-form .inner-row .left.selected:before {
          content: url(/media/image/2f7e88a53081ba193ebbf3a641c074b0ec90f611.svg); }
        .outer-block-login .inner-form .inner-row .left:before {
          content: url(/media/image/d33d6bbda6d6bf080025d0fdc1002b0ffc8ece48.svg);
          position: relative;
          top: 4px;
          left: -10px; }
      .outer-block-login .inner-form .inner-row .right {
        float: right;
        padding-top: 4px; }
  .outer-block-login .spacing {
    margin-top: 50px !important; }

@media (max-width: 960px) {
  .mobile-menu.login-panel {
    overflow-y: scroll;
    overflow-x: hidden; }
    .mobile-menu.login-panel .login .outer-block-login {
      width: 100%;
      margin: calc(50vh - 380px) auto;
      background-size: 100%;
      background-position: top 156px center;
      margin: 0; }
      .mobile-menu.login-panel .login .outer-block-login .intro-login {
        top: 6vh; }
      .mobile-menu.login-panel .login .outer-block-login .inner-form {
        left: 10px;
        top: 3vh; }
        .mobile-menu.login-panel .login .outer-block-login .inner-form .inner-button {
          left: calc(50% - 77px);
          top: 37vh;
          height: 40px; }
        .mobile-menu.login-panel .login .outer-block-login .inner-form .inner-input {
          width: calc(100% - 80px);
          height: 40px;
          margin-top: 10px; }
          .mobile-menu.login-panel .login .outer-block-login .inner-form .inner-input.user {
            top: 13vh; }
          .mobile-menu.login-panel .login .outer-block-login .inner-form .inner-input.pw {
            top: 22vh; }
        .mobile-menu.login-panel .login .outer-block-login .inner-form .inner-row {
          left: 10px;
          top: 29vh;
          width: calc(100% - 40px); }
      .mobile-menu.login-panel .login .outer-block-login .inner-block-login .intro-login {
        position: absolute;
        width: 100%; }
      .mobile-menu.login-panel .login .outer-block-login .inner-block-register-title {
        top: 0; }
      .mobile-menu.login-panel .login .outer-block-login .inner-block-login-subtitle {
        top: 4vh; }
      .mobile-menu.login-panel .login .outer-block-login .inner-newaccount, .mobile-menu.login-panel .login .outer-block-login .inner-alreadymember {
        top: 49vh; } }

@media (max-width: 480px) {
  .outer-block-login {
    width: 100vw; }
    .outer-block-login .inner-block-login-title {
      top: 40px; }
    .outer-block-login .inner-block-login-subtitle {
      top: 100px; }
    .outer-block-login .inner-form {
      left: 20px;
      top: 150px; }
      .outer-block-login .inner-form .inner-input {
        width: calc(100vw - 100px); }
      .outer-block-login .inner-form .inner-row {
        left: 0;
        width: auto; }
      .outer-block-login .inner-form .inner-button {
        left: calc(50vw - 87px); }
    .outer-block-login .inner-newaccount {
      top: 520px; } }