input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  display: flex;
  align-content: center;
  justify-content: center;
  font-size: 1rem;
  padding: 0.1rem;
  border: 2px solid #8A8D8F;
  border-radius: 5px;
  
}
input[type="checkbox"]::before {
  content: "";
  width: 1.4rem;
  height: 1.4rem;
  background: url(../img/icon_check.svg) center center no-repeat;
  background-size: 80%;
  transform: scale(0);
}
input[type="checkbox"]:checked{
  border-color: #CEA84D;
  background-color: #CEA84D;
}
input[type="checkbox"]:checked::before {
  transform: scale(1);
}

.decorateImg{
  width: 100%;
  height: 100%;
  background: url(../img/demo/login3.jpg) center 50px no-repeat;
  background-size: cover;
}
.decorateImg.register{
  width: 100%;
  height: 100%;
  background: url(../img/demo/login2.jpg) center 50px no-repeat;
  background-size: cover;
}

.loginWrapper{
  padding: 60px 20%;
  background-color: #FFF;

}

.loginWrapper h1{
  font-family: FS Lucas Pro;
  font-size: 2rem;
  text-align: center;
  color: rgba(206, 168, 77, 1);
  margin-bottom: 35px;
  font-weight: 700;
}
.loginWrapper h2{
  font-family: FS Lucas Pro;
  font-size: 1.4375rem;
  text-align: center;
  color: rgba(206, 168, 77, 1);
  margin-bottom: 35px;
  padding-left: 8px;
  font-weight: 700;
}
.loginWrapper h2.underline{
  display: block;
  text-align: left;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(206, 168, 77, 1);
}
.loginWrapper h2 span.remark{
  float: right;
  font-size: 0.975rem;
  display: inline-block;
  color: rgba(206, 168, 77, 1);
}
.form101 label{
  color: rgba(206, 168, 77, 1);
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: 4px;
}
.form101 .form-control{
  border: 1px solid rgba(217, 217, 217, 1);
  border-radius: 5px;
  padding: 10px 14px;
  margin-bottom: 20px;
}
.form101 .form-control.inline{
  display: inline-block;
}
.form101 button.reload{
  padding-top: 10px;
  border: 0px;
  background-color: transparent;
}
.form101 .reload .iconReload{
  width: 24px;
  height: 24px;
}
.form101 .passwordShowBtn.show .iconEye{
  background: url(../img/icon_eye.svg) center center no-repeat;
}

.form101 .btnBlock{
  margin: 30px 0px;
}
.form101 .passwordShowBtn{
  background-color: transparent;
  border: 0px;
}
.form101 .passwordShowBtn{
  position: absolute;
  right: 10px;
  top: 8px; 
}
.form101 .inputGroup{
  position: relative;
}
.form101 .iconEye{
  width: 25px;
  height: 25px;
}
.form101 .iconEyeDisabled{
  width: 25px;
  height: 25px;
}
.termBlock{
  display: flex;
  justify-items: center;

}
.termBlock .checkWrap{
  padding: 5px 15px 5px 10px;
  display: flex;
  align-self: center;
}
.termBlock .checkWrap input{
  width: 24px;
  height: 24px;
}
.termBlock .info{
  color: #8A8D8F;
  font-weight: 500;
  font-size: 1.25rem;
  line-height: 24px;
}
.loginType{
  margin: 30px 0px;
}
.loginType .grayLink{
  font-size: 1.12rem;
  color: #000;
  line-height: 22px;
  display: inline-block;
  width: 100%;
  border: 1px solid rgba(241, 242, 245, 1);
  border-radius: 5px;
  padding: 20px 20px;
  text-align: center;
  margin-right: 10px;
  text-decoration: none;
}
.passwordNotice{
  background: url(../img/icon_notice.svg) left center no-repeat;
  background-size: contain;
  background-size: 32px 32px;
  padding-left: 42px;
  font-size: 0.9375rem;
  color: #8A8D8F;
  line-height: 25px;
  margin-bottom: 20px;
}
.modifyNotice{
  background: url(../img/icon_notice.svg) left center no-repeat;
  background-size: contain;
  background-size: 32px 32px;
  padding-left: 42px;
  font-size: 0.9375rem;
  color: #8A8D8F;
  line-height: 18px;
  margin-bottom: 20px;
}
.remarkType{
  margin: 10px 0px;
}
.favoriteBlock input[type=checkbox]{ 
  display: none;
}
.favoriteBlock ul{
  margin: 0px;
  padding: 0px;
}
.favoriteBlock ul li{
  width: 31%;
  display: inline-block;
  margin: 0px 1.5% 10px 0px;
  font-size: 1.125rem;
  color: #101820;
  background-color: #F1F2F5;
  padding: 10px 20px;
  text-align: center;
  cursor: pointer;
  border-radius: 5px;
}
.favoriteBlock ul li.active{
  color: #FFF;
  background-color: #CEA84D;
}
.remarkType .grayLink{
  font-size: 1.1875rem;
  color: rgba(138, 141, 143, 1);
  line-height: 22px;
  display: inline-block;
  width: 100%;
  border: 0px;
  border-radius: 5px;
  padding: 20px 20px;
  text-align: center;
  margin-right: 10px;
  text-decoration: none;
}
.remarkType .grayLink:hover{
  color: rgba(206, 168, 77, 1);
}
.loginType .grayLink:hover,.loginType .grayLink.active{
  background-color: rgba(241, 242, 245, 1);
}
.loginWrapper .remark{
  line-height: 24px;
  color: rgba(138, 141, 143, 1);
}
.loginWrapper .remark .primeLink{
  color: rgba(206, 168, 77, 1);
  font-size: 0.9375rem;
}

.captcha{
  width: 100%;
  height: 42px;
  background-color: rgba(217, 217, 217, 1);
  border-radius: 5px;
}

.defaultModal .modal-footer .primaryBtn{
  padding: 10px 60px;
}

.wd-200{
  width: 200px;
}

@media (max-width: 600px) {
  html{
    font-size: 13px;
  }
  .loginWrapper {
    padding: 70px 15px;
  }
  .loginType .grayLink{
    padding: 10px 15px;
  }
  .remarkType .grayLink{
    padding: 10px 20px;
  }
  .form101 .btnBlock{
    margin: 15px 0px;
  }
  .footer{
    height: 60px;
  }
  .topNav ul.userNav li.singleItem .dropdown{
    width: 380px;
  }
  .topNav ul.userNav li.singleItem .dropdown li{
    width: 80px;
  }
  .topNav ul.userNav li.singleItem .dropdown li a{
    padding: 5px 10px;
  }
  .loginWrapper h1{
    margin-bottom: 10px;
    font-size: 1.8rem;
  }
  .loginWrapper h2{
    margin-bottom: 10px;
    margin-top: 40px;
  }
  .termBlock{
    margin-top: 10px;
  }

}

@media (min-width: 768px) and (max-width: 1199px) {
  .loginWrapper {
    padding: 60px 10%;
  }
  .loginType .grayLink{
    padding: 10px 15px;
  }
}


@media (min-width: 1600px) and (max-width: 1960px) {
  .loginWrapper {
    padding: 60px 15%;
  }
}

@media (min-width: 1960px) {
  .loginWrapper {
    padding: 60px 20%;
  }
}