body {
  background-color: rgba(0, 0, 0, 0); }

.login-page {
  position: relative;
  min-height: 100vh; 
  
}

.login-page .top {
    position: relative;
    width: 100%;
    height: 4.9rem;
    z-index: 2;
    padding-top: .6rem;
    background-image: url("../img/assets/comm/login-bg.png");
    background-size: 100% 100%;
    box-sizing: border-box; 
}

.login-page .top .content {
  padding: 0 .4rem;
  color: #ffffff;
  font-size: .33rem;
  display: flex;
  justify-content: space-between;
  align-items: center; 
}

.login-page .top .content img {
	width: 1.6rem;
	height: 1.6rem; 
}

.login-page .bottom {
  position: absolute;
  bottom: .4rem;
  width: 100%;
  overflow: hidden;
  text-align: center; 
}

.login-methods {
  display: flex;
  justify-content: space-between;
  padding: 0 .8rem;
  margin-top: .4rem; 
}

.login-methods img {
	width: 1rem;
	height: 1rem; 
}

.login-page .bottom .text {
  font-size: .2rem;
  margin-top: .95rem; 
}

.login-box {
  width: 6.4rem;
  position: absolute;
  background-color: #ffffff;
  box-shadow: 0px 0.1rem 0.27rem 0.03rem rgba(170, 170, 170, 0.2);
  border-radius: .2rem;
  padding: .6rem .4rem;
  box-sizing: border-box;
  top: 3.3rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10; }

.login-box .input-box {
  width: 100%;
  height: .88rem;
  border: solid 1px #eeeeee;
  border-radius: .44rem;
  margin-bottom: .4rem;
  padding: 0 .3rem;
  box-sizing: border-box;
  display: flex;
  align-items: center; }
  .login-box .input-box img {
    width: 0.4rem;
    height: 0.4rem;
    margin-right: .2rem; }
  .login-box .input-box input {
    flex: 1;
    font-size: .3rem; }

.login-box button[type="submit"] {
  width: 100%;
  height: .88rem;
  border-radius: .44rem;
  font-size: .38rem;
  /*background-color: #fdcfd4;*/
  /*#1ad42c*/
  background-color: #1ad42c;
  color: #ffffff;
  margin-top: .2rem; 
}