@import url(https://fonts.googleapis.com/css?family=Open+Sans);
body,
html {
  background: #ddd;
  padding: 0px;
  margin: 0px;
}

.content-wrap.login-wrap {
  overflow-x: inherit;
}

.login {
  width: 420px;
  border-radius: 5px;
  box-shadow: 0px 5px 0px #ccc;
  background: #fff;
  margin: 70px auto 15px auto;
  overflow: hidden;
  font-family: "Open Sans";
}

.login .head {
  padding: 20px 15px;
  text-align: center;
  background: #555;
  color: #fff;
  position: relative;
  line-height: 25px;
  font-size: 18px;
  letter-spacing: 1px;
  background: -webkit-linear-gradient(45deg, #2cbcb6 0%, #3c5caa 100%);
  background: -o-linear-gradient(45deg, #2cbcb6 0%, #3c5caa 100%);
  background: -linear-moz-gradient(45deg, #2cbcb6 0%, #3c5caa 100%);
  background: linear-gradient(45deg, #2cbcb6 0%, #3c5caa 100%);
}

.login .head .logo-link img {
  margin-left: -44px;
}

.login .head .mapmark {
  position: absolute;
  width: 50px;
  height: 50px;
  right: 10px;
  bottom: 0px;
}
.login .head .mapmark img {
  width: 50px;
  height: 50px;
  opacity: 0.5;
}

.login .head_dec {
  width: 100%;
  height: 4px;
  background: #c5c5c5;
}

.login .con {
  font-size: 13px;
  padding: 5px 15px 5px 15px;
}

.login .con h1 {
  font-size: 18px;
  color: #222;
  text-align: center;
  margin-bottom: 8px;
}

.login .con h2 {
  font-size: 13px;
  color: #666;
  text-align: center;
  margin-top: 0px;
  margin-bottom: 20px;
  font-weight: normal;
}

.login .con input.form-control {
  font-size: 13px;
  border: none;
  box-shadow: none;
  border-radius: 0px;
  background: #f4f4f4;
  margin: 10px 0px;
  color: #444;
  letter-spacing: 1px;
}

.login .warning {
  font-size: 13px;
  margin: 0px 0px 10px 0px;
  text-align: center;
  color: #DB3F36;
}

.login .foot {
  padding: 0px 15px 15px 15px;
  font-size: 13px;
}

.login .foot input[type="checkbox"] {
  margin: 0px 3px;
}

.login .foot .pull-left {
  margin-top: 10px;
}

.login .foot .remember {
  padding-right: 5px;
  margin-right: 5px;
  border-right: 1px dotted #999;
}

.login .foot .link {
  color: #88B74E;
  border-bottom: 1px dotted #88B74E;
}

.login .foot .link:hover {
  color: #bbb;
  border-bottom: 1px dotted #bbb;
  text-decoration: none;
}

.login .foot .btn-login {
  border-radius: 3px;
  box-shadow: 0px 3px 0px #1870B0;
  background: #2583C8;
  width: 100px;
  height: 40px;
  line-height: 28px;
  border: none;
}

.login .power {
  border-top: 3px solid #eee;
}

.login .power img {
  width: 70%;
}

.login .justify-content {
  display: flex;
  justify-content: center;
}

.login-loyal .head {
  background: #555;
  padding-top: 35px;
  padding-bottom: 35px;
  font-size: 25px;
}

.login-loyal .head_dec {
  background: -webkit-linear-gradient(left, #26C9FF, #A3D900);
  background: -o-linear-gradient(right, #26C9FF, #A3D900);
  background: -moz-linear-gradient(right, #26C9FF, #A3D900);
  background: linear-gradient(to right, #26C9FF, #A3D900);
}

.login-loyal .power img {
  width: 100%;
}

@media (max-width: 480px) {
  .login {
    width: 90%;
  }
}
@media (max-width: 380px) {
  .login .foot .pull-left,
  .login .foot .pull-right {
    text-align: center;
    width: 100%;
  }

  .login .foot .btn-login {
    margin-top: 15px;
  }
}