html,
body {
  height: 100%;
}

body {
  display: flex;
  align-items: center;
  padding-top: 40px;
  padding-bottom: 40px;
  background-color: #f5f5f5;
}

.form-signin {
      width: 100%;
      max-width: 330px;
      padding: 15px;
      margin: auto;
      position: absolute;
      top: 50%;
      left: calc(50% - 165px);
      transform: translateY(-50%);
}
.form-signin .checkbox {
  font-weight: 400;
}
.form-signin .form-control {
  position: relative;
  box-sizing: border-box;
  height: auto;
  padding: 10px;
  font-size: 16px;
}
.form-signin .form-control:focus {
  z-index: 2;
}
.form-signin input[type="email"] {
  margin-bottom: -1px;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}
.form-signin input[type="password"] {
  margin-bottom: 10px;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

#inputKey
{
      margin-bottom: 10px;
}

.loginlink {
      display:block;
      text-align:center;
      margin-top:20px;
}

.forgotpw .btn
{
      margin-top:10px;
}

.out
{
      position:absolute;
      left:0;
      top:0;
      right:600px;
      bottom:0;
}

.outinfo
{
      position:absolute;
      width: 600px;
      top:0;
      right:0px;
      bottom:0;
      background: #0345a8;
}

.inn
{
      position: absolute;
      top: 50%;      
      transform: translateY(-50%);
      left:50px;
      right:50px;
}

.inn img
{
      text-align:center;
      display:block;
      margin-bottom:50px;
}

.inn span
{
      color: #fff;
}

@media only screen and (max-width: 600px) {

      .outinfo
      {
            display:none;
      }

      .out
      {
            right:0;
      }
}

.grecaptcha-logo, .grecaptcha-badge
{
      display:none;
}