@charset "utf-8";
@import "Reset.css";

/* div{
 outline: orangered solid 1px;
} */

#Wrap {
  /* position: relative; */
  background-image: url(../../images/Login_bg.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  width: 100%;
  /* height: 100vh; */
  min-height: 100vh;
  padding: 30px 0px;
}

.LoginBox {
  color: #ffffff;
  font-weight: bold;
  width: 400px;
/*  height: 630px;*/
  box-sizing: border-box;
  /*position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;*/
  margin: auto;
  background-color: rgba(0, 0, 0, 0.6);
  border-radius: 10px;
}
.LogoBar {
  text-align: center;
  width: 100%;
  height: 40px;
  background-color: #009bbc;
  border-radius: 10px 10px 0 0;
}
.LogoBar img {
  width: 50px;
  margin-top: 10px;
  border: solid 2px #ffffff;
  border-radius: 50%;
}
.LoginBox h1 {
  font-size: 20px;
  text-align: center;
  font-weight: bold;
  padding: 40px 0 10px 0;
}
.LoginList {
  padding: 0 50px 20px;
}

.LoginList > div{
  position: relative;
}

.LoginList span {
  display: inline-block;
  font-size: 16px;
  padding: 10px 0;
}

.LoginList span + span {
  position: absolute;
  right: 0px;
}

.LoginList span a {
  color: #fff;
  text-decoration: none;
}

.LoginList span + span a:hover {
  color: #b1eafb;
  cursor: pointer;
}

.LoginList input {
  color: #333;
  background-color: #fff;
  /* border: thin solid #34c7f2; */
  border: 2px solid #fff;
  border-radius: 5px;
  font: inherit;
  line-height: 1.8em;
  width: 100%;
  padding: 0.35em 1em 0.35em 1em;
  margin: 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

.LoginList input:hover {
  /* border: thin solid #34c7f2; */
  border: 2px solid #34c7f2;
}
.LoginList input:focus {
  border: 2px solid #009bbc;
  /* border: thin solid #34c7f2; */
}
/* .LoginList input:focus{
    border: bold solid #34c7f2;
} */
.MyImgVerify img {
  padding-top: 10px;
}

.MyImgVerify span {
  padding: 0;
}
.MyImgVerify i {
  display: inline-block;
  font-size: 30px;
  width: 30px;
  padding: 10px 20px 0 20px;
  line-height: 36px;
  /* height: 30px; */
  color: #ffffff;
  vertical-align: top;
}
.MyImgVerify i:hover {
  color: #34c7f2;
}
.btn {
  padding: 20px 0;
}
.btn button {
  width: 100%;
  height: 40px;
  color: #fff;
  font-size: 16px;
  font-weight: bold;
  background-color: #34c7f2;
  border-radius: 50px;
  border: none;
}
.btn button:hover {
  background-color: #009bbc;
}

@media only screen and (min-width: 76.25em) and (max-width: 86.1875em) {
}

@media only screen and (min-width: 61.0625em) and (max-width: 76.1875em) {
}

@media only screen and (min-width: 48em) and (max-width: 61em) {
  body {
    overflow-x: hidden;
  }
}

@media only screen and (max-width: 47.9735em) {
  .wrapper {
    width: 100%;
  }
  #Wrap {
    /* position: relative; */
    background-image: url(../../images/Login_bg.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    /* height: 100vh; */
    /* min-height: 800px; */
  }

  .LoginBox {
    width: 90%;
  }
  .LoginList {
    padding: 0 30px;
  }
}

@media only screen and (min-width: 30em) and (max-width: 47.9735em) {
  .wrapper {
    width: 100%;
  }
}

@media only screen and (max-width: 29.9375em) {
  .wrapper {
    width: 100%;
  }
}

.LoginCounter {
  display: flex;
  margin: 10px 0 15px;
  padding: 20px 0;
  background-color: #38555A;
  border-radius: 6px;
  opacity: 1;
}

.LoginCounter .column {
  width: 50%;
  text-align: center;
}

.LoginCounter .column:first-child{
  border-right: 1px solid #C3C3C3;
}

.LoginCounter .column .text {
  margin-bottom: 10px;
  font-size: 14px;
}

.LoginCounter .column .count {
  font-size: 18px;
}

.LoginCounter .column .count.blue {
  color: #35C7F2;
}

.LoginCounter .column .count.green {
  color: #A0CB50;
}