body {
  background-image:url(../img/background.png);
  background-repeat: no-repeat;
  background-attachment: fixed; 
  background-size: cover;
}

.block {
  text-align:center;
  margin-top:12rem;  
  margin-bottom:4rem;
}

.login {
  width:350px;
  border-radius:20px;
  padding:2rem 0;
  margin:0 auto;
  margin-top:1rem;
  background:rgba(255,255,255,0.4);
}

.login div {
  border-bottom:1px solid white;
  padding:.5rem;
  margin:0 3rem;
}

.fa-user, .fa-lock {
  font-size:1.5rem;
  color:white;
  margin-right:1rem;
  vertical-align: middle;
}

input[type=text], input[type=password] {
  margin-top:1rem;
  border:none;
  background:none;
  box-shadow:none;
  outline : none;   /*避免點選會有藍線或虛線 */
}

.loginbtn {
  background:white;
  padding:1rem 5.5rem;
  border:none;
  border-radius:30px;
  font-size:1.2rem;
  color:#f09e8c;
  margin-top:1rem;
}

#lineLogin {
  display:block;
  margin:0 auto;
  color:#f09e8c;
  font-size:1.1rem;
  width:250px;
  padding:.8rem 0;
  border-radius:30px;
  background:white;
  text-decoration:none;
}

#forgetPassword {
  margin-left:10rem;
  color:white;
  text-decoration: underline;
  background:none;
  border:none;
  font-size:1rem;
  outline:none;
  cursor: pointer;
}

label {
  color:white;
}

.hrLine{
  vertical-align:middle; 
  display:inline-block;
  line-height: 1em;
  position: relative;
  outline: 0;
  border: 0;
  color: black;
  text-align: center;
  height: 1.5em;
  opacity: 0.8;
}

.hrLine:before {
  content: '';
  background: white;
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  height: 1px;
}

/* .hrLine:after { */
/*   content: attr(data-content); */
/*   position: relative; */
/*   display: inline-block; */
/*   color: black; */
/*   padding: 0 .5em; */
/*   line-height: 1.5em; */
/*   color: #818078; */
/* } */

span {
  color:white;
}

span a {
  color:white;
  font-weight:bold;
}

.fbBtn{
  display:block;
  margin:0 auto;
  color:#1877f2;
  font-size:1.1em;
  width:250px;
  padding:0.8rem 0;
  border-radius:30px;
  background:white;
  text-decoration:none;
  margin-top: .5em;
}

.googleBtn{
  display:block;
  margin:0 auto;
  color:#d3514d;
  font-size:1.1em;
  width:250px;
  padding:0.8rem 0;
  border-radius:30px;
  background:white;
  text-decoration:none;
  margin-top: .5em;
}

@media screen and (max-width: 420px) {
  body {
  background-image:url(../img/backgroundrwd.png);
  background-repeat: no-repeat;
  background-attachment: fixed; 
  background-size: cover;
  }
  .block {
    margin-top:7rem !important;
  }
}

.hide{
  display: none;
}