html{
  width: 100%;
  height: 100%;
}
body {
  width: 100%;
  min-height: 100%;
  background: #5143a9 url(/Mobile/Image/ry_bg.png) no-repeat center/100% 100%;
}
.ui-login {
  padding-top: 2rem;
  width: 43.55%;
  margin: 0 auto;
}
.ui-login img{
  display: block;
  width: 100%;
}
main form {
  display: block;
  width: 90%;
  margin: 2rem auto 0;
  background: url(/Mobile/Image/retrieve_bg.png) no-repeat center/100% 100%;
  text-align: center;
  padding: 1rem 0;
  min-height: 10rem;
}

form p ,#fmStep2 li{
  padding: 0.8rem 0;
  margin: 0;
  color: #fff;
  font-size: 1rem;
}
form p label{
  margin: 0 1rem 0 0.5rem;
}
form p input[type='checkbox']{
  display: inline-block;
  vertical-align: middle;
  width: 1rem;
  height: 1rem;
}
form p input[type='text'] {
  display: inline-block;
  box-sizing: border-box;
  width: 70%;
  height: 2rem;
  border: 1px solid #7265c8;
  background: #4e4393;
  border-radius: 0.5rem;
  box-shadow: 1px 0 3px rgba(255, 255, 255, .53), -1px 0 3px rgba(255, 255, 255, .53), 0 1px 3px rgba(255, 255, 255, .53), 0 -1px 3px rgba(255, 255, 255, .53);
  /* text-indent: 1rem; */
  font-size: 0.875rem;
  color: #949494;
  padding: 0 1rem;
  outline: none;
  vertical-align: middle;
}

.ui-submit {
  margin-top: 2rem;
  padding-bottom: 1rem;
}

.ui-submit button {
  display: block;
  margin: 0 auto;
  width: 48.3%;
  background: none;
  outline: none;
  border: none;
}
.ui-submit img{
  display: block;
  width: 100%;
}
#fmStep2{
  text-align: left;
  }
#fmStep2 li{
  width: 100%;
}
#fmStep2 label{
  display: inline-block;
  width: 30%;
  text-align: right;
  vertical-align: middle;
  color: #ffffff;
  font-size: 1rem;
}
#fmStep2 li input{
  display: inline-block;
  box-sizing: border-box;
  width: 50%;
  height: 2rem;
  border: 1px solid #7265c8;
  background: #4e4393;
  border-radius: 0.5rem;
  box-shadow: 1px 0 3px rgba(255, 255, 255, .53), -1px 0 3px rgba(255, 255, 255, .53), 0 1px 3px rgba(255, 255, 255, .53), 0 -1px 3px rgba(255, 255, 255, .53);
  /* text-indent: 1rem; */
  font-size: 0.875rem;
  color: #949494;
  padding: 0 1rem;
  outline: none;
  vertical-align: middle;
}

#fmStep3 >img{
 display: block;
  width: 20%;
  margin: 0 auto;
}


@media only screen and (max-width: 300px) {
  html { font-size: 65% !important; -webkit-text-size-adjust: none; }
}
@media only screen and (max-width: 310px) and (min-width: 300px) {
  html { font-size: 70% !important; -webkit-text-size-adjust: none; }

}
@media only screen and (max-width: 320px) and (min-width: 310px) {
  html { font-size: 75% !important; -webkit-text-size-adjust: none; }

}
@media only screen and (max-width: 360px) and (min-width: 320px) {
  html { font-size: 80% !important; -webkit-text-size-adjust: none; }
}
@media only screen and (max-width: 360px) and (min-width: 350px) {
  html { font-size: 85% !important; -webkit-text-size-adjust: none; }

}
@media only screen and (max-width: 480px) and (min-width: 360px) {
  html { font-size: 90% !important; -webkit-text-size-adjust: none; }

}
@media only screen and (max-width: 480px) and (min-width: 420px) {
  html { font-size: 105% !important; -webkit-text-size-adjust: none; }
}
@media only screen and (max-width: 560px) and (min-width: 480px) {
  html { font-size: 110% !important; -webkit-text-size-adjust: none; }
}
@media only screen and (max-width: 570px) and (min-width: 560px) {
  html { font-size: 115% !important; -webkit-text-size-adjust: none; }

}
@media only screen and (max-width: 640px) and (min-width: 570px) {
  html { font-size: 120%; !important; }

}
@media only screen and (max-width: 640px) and (min-width: 630px) {
  html { font-size: 120% !important; -webkit-text-size-adjust: none; }

}
@media only screen and (max-width: 710px) and (min-width: 640px) {
  html { font-size: 145% !important; -webkit-text-size-adjust: none; }
}
@media only screen and (max-width: 1000px) and (min-width: 710px) {
  html { font-size: 160% !important; -webkit-text-size-adjust: none; }

}


