* {
  margin: 0;
  padding: 0;
  font-size: 14px;
  font-family: 'Helvetica Neue', Helvetica, Arial, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'WenQuanYi Micro Hei', sans-serif !important;
  color: #666;
  box-sizing: border-box;
}
body {
  background-position: center;
}
.formBody {
  background: url("bg.jpg") no-repeat top;
  background-color: white;
}
/* 超小屏幕（手机，小于 768px） */
/* 没有任何媒体查询相关的代码，因为这在 Bootstrap 中是默认的（还记得 Bootstrap 是移动设备优先的吗？） */
.logo {
  width: 100px;
}
.logo img {
  width: 100%;
}
.title {
  font-size: 36px;
  font-weight: 600;
  margin-top: 20px;
  margin-left: 20px;
}
.loginMain {
  text-align: left;
  background-color: #fff;
  border-radius: 10px;
  width: 100%;
  padding: 30px;
}
.msg {
  line-height: 40px;
  background-color: rgba(255, 251, 0, 0.26);
  border-bottom-right-radius: 10px;
  text-align: center;
  color: red;
  display: none;
}
.form {
  margin: 30px 20px;
  margin-bottom: 0px;
}
.form .in label {
  font-size: 14px;
  line-height: 36px;
  display: block;
  font-weight: bold;
}
.form .in input,
.form .in textarea {
  font-size: 14px;
  border: #ccc solid 1px;
  border-radius: 6px;
  line-height: 22px;
  color: #333;
  padding: 2px 8px;
}
.form .in input {
  width: 50%;
}
.form .in textarea {
  width: 100%;
}
.form .in span {
  font-weight: normal;
  color: #aaa;
}
.form .in span.must {
  color: red;
}
.form .submit {
  text-align: center;
  padding: 30px 0;
}
.form .submit input {
  color: #fff;
  font-size: 16px;
  line-height: 36px;
  background-color: dodgerblue;
}
.form .submit input:hover {
  background-color: rgba(30, 143, 255, 0.801);
  cursor: pointer;
}
.form .submit #submit {
  display: none;
}
.form .submit #submit2 {
  display: block;
}
.form .logout input {
  background-color: transparent;
  border-color: red;
  color: red;
}
.message {
  position: absolute;
  top: 140px;
  height: 40px;
}
.message .formMsg {
  margin: 0 -30px;
}
.footer {
  text-align: right;
  width: 80%;
  max-width: 1100px;
}
.loginMain,
.main {
  padding: 0px;
}
.loginMain .left,
.main .left {
  box-sizing: border-box;
  width: 100%;
  height: 160px;
  display: block;
  background-image: url("login-image.jpg");
  background-position: 0 -70px;
  padding: 20px 40px;
}
.loginMain .left .title,
.main .left .title {
  font-size: 46px;
  font-weight: bolder;
  font-style: italic;
  margin-left: 0px;
  color: white;
  text-shadow: 1.5px 1.5px 3px black;
}
.loginMain .form,
.main .form {
  box-sizing: border-box;
  margin: 0px 50px;
}
.loginMain .form .title,
.main .form .title {
  color: #333;
  margin: 50px 0;
  margin-top: 40px;
  margin-bottom: 30px;
}
.loginMain .form .title span,
.main .form .title span {
  font-style: normal;
  font-weight: normal;
  color: dodgerblue;
  display: block;
  letter-spacing: 1px;
}
.loginMain .form .title span i,
.main .form .title span i {
  font-style: normal;
  font-weight: bold;
  color: dodgerblue;
}
.loginMain .form input,
.main .form input {
  width: 100%;
  line-height: 46px;
  font-size: 16px;
}
.loginMain .form input:focus,
.main .form input:focus {
  border: 1px solid  dodgerblue;
  outline: none;
}
.loginMain .form .error,
.main .form .error {
  visibility: hidden;
  padding-left: 10px;
  font-size: 13px;
}
.loginMain .form .error span,
.main .form .error span {
  color: red;
}
.loginMain .form .show,
.main .form .show {
  visibility: visible;
}
.loginMain .form .others,
.main .form .others {
  padding-top: 10px;
  padding-left: 10px;
}
.loginMain .form .others a,
.main .form .others a {
  text-decoration: none;
}
.loginMain .form .others a:hover,
.main .form .others a:hover {
  color: dodgerblue;
}
.loginMain .msg,
.main .msg {
  width: 530px;
  margin-left: -80px;
  margin-right: -80px;
  margin-top: 20px;
  background-color: rgba(255, 251, 0, 0.158);
  border-bottom-left-radius: 0px;
}
.main {
  background-color: #fff;
}
.main .form {
  padding-top: 20px;
}
.finished {
  text-align: center;
  padding-bottom: 40px;
}
.finished .info {
  color: coral;
  font-size: 18px;
  line-height: 80px;
}
.finished input {
  margin-top: 40px;
  width: 200px;
  line-height: 40px;
  font-size: 16px;
  color: #fff;
  background-color: dodgerblue;
  border: 0px;
  border-radius: 6px;
}
.finished input:hover {
  background-color: rgba(30, 143, 255, 0.795);
  cursor: pointer;
}
.headerBar {
  display: none;
  height: 40px;
  padding: 0 30px;
  padding-top: 8px;
  background-color: rgba(255, 255, 255, 0.5);
  text-align: right;
  vertical-align: middle;
}
.headerBar .btn {
  display: inline-block;
  background-color: #eee;
  padding: 2px 12px;
  border-radius: 4px;
}
.headerBar .btn:hover {
  cursor: pointer;
  background-color: dodgerblue;
  color: #fff;
}
.headerBar .btn:hover .text {
  color: #fff;
}
.headerBar div,
.headerBar img {
  display: inline-block;
  vertical-align: text-top;
}
.headerBar img {
  height: 16px;
  width: auto;
  margin-top: 2px;
}
.formTop {
  box-sizing: border-box;
  width: 100%;
  height: 160px;
  display: block;
  background-image: url("login-image.jpg");
  background-position: 0 -70px;
  padding: 20px 40px;
}
.formTop .title {
  font-size: 46px;
  font-weight: bolder;
  font-style: italic;
  margin-left: 0px;
  color: white;
  text-shadow: 1.5px 1.5px 3px black;
}
.show768px {
  display: none;
}
.finished {
  padding: 0px;
}
.finished .shadow {
  background-color: rgba(51, 51, 51, 0.7);
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}
.finished .modal {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background-color: #fff;
  width: 80%;
  border-radius: 8px;
  padding: 30px 20px;
}
.finished .modal .info {
  line-height: 30px;
}
.submitOk {
  display: none;
}
/* 小屏幕（平板，大于等于 768px） */
@media (min-width: 768px) {
  body {
    background-color: rgba(100, 148, 237, 0.301);
    background-position: center;
  }
  .formBody {
    background: url("bg.jpg") no-repeat top;
    background-color: rgba(100, 148, 237, 0.301);
  }
  .logo {
    padding-top: 10px;
    width: 120px;
  }
  .logo img {
    width: 100%;
  }
  .title {
    font-size: 36px;
    font-weight: 600;
    margin-top: 40px;
    margin-left: 50px;
  }
  .loginMain,
  .main {
    text-align: left;
    background-color: #fff;
    border-radius: 10px;
    width: 72%;
    max-width: 1100px;
    min-width: 680px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    padding: 30px;
  }
  .main {
    border-top: #0268ce solid 5px;
  }
  .main .msg {
    width: 100%;
  }
  .msg {
    line-height: 40px;
    background-color: rgba(255, 251, 0, 0.26);
    border-bottom-right-radius: 10px;
    text-align: center;
    color: red;
    display: none;
  }
  .form {
    margin: 30px 20px;
    margin-bottom: 0px;
  }
  .form .in {
    min-height: 60px;
    padding: 5px;
  }
  .form .in label {
    font-size: 14px;
    line-height: 36px;
    display: block;
    font-weight: bold;
  }
  .form .in input,
  .form .in textarea {
    font-size: 14px;
    border: #ccc solid 1px;
    border-radius: 6px;
    line-height: 24px;
    color: #333;
    padding: 4px 8px;
  }
  .form .in input {
    width: 50%;
  }
  .form .in textarea {
    width: 90%;
  }
  .form .in #business,
  .form .in #niceClass {
    width: 200px;
  }
  .form .in span {
    font-weight: normal;
    color: #aaa;
  }
  .form .in span.must {
    color: red;
  }
  .form .submit {
    text-align: center;
    padding: 30px 0;
  }
  .form .submit input {
    max-width: 200px;
    color: #fff;
    font-size: 16px;
    line-height: 36px;
    background-color: dodgerblue;
  }
  .form .submit input:hover {
    background-color: rgba(30, 143, 255, 0.801);
    cursor: pointer;
  }
  .form .submit #submit {
    display: block;
  }
  .form .submit #submit2 {
    display: none;
  }
  .form .logout {
    display: none;
  }
  .message {
    position: unset;
    height: 40px;
    margin-bottom: -30px;
  }
  .message .formMsg {
    margin: 0 -30px;
  }
  .formTop {
    display: none;
  }
  .show768px {
    display: block;
  }
  .footer {
    text-align: right;
    width: 80%;
    max-width: 1100px;
  }
  .loginMain {
    width: 960px;
    padding: 0px;
  }
  .loginMain .left {
    box-sizing: border-box;
    border-radius: 10px 0 0 10px;
    width: 430px;
    height: 600px;
    display: block;
    float: left;
    background-image: url("login-image.jpg");
    background-position: unset;
    padding: 20px 40px;
  }
  .loginMain .left .title {
    margin-left: 0px;
  }
  .loginMain .form {
    margin: 0px 50px;
    padding: 0 30px;
    width: 430px;
    display: inline-block;
  }
  .loginMain .form .title {
    color: #333;
    margin: 50px 0;
    margin-bottom: 30px;
  }
  .loginMain .form .title span {
    font-style: normal;
    font-weight: normal;
    color: dodgerblue;
    display: block;
    letter-spacing: 1px;
  }
  .loginMain .form .title span i {
    font-style: normal;
    font-weight: bold;
    color: dodgerblue;
  }
  .loginMain .form input {
    width: 100%;
    line-height: 46px;
    font-size: 16px;
  }
  .loginMain .form input:focus {
    border: 1px solid  dodgerblue;
    outline: none;
  }
  .loginMain .form .error {
    visibility: hidden;
    padding-left: 10px;
    font-size: 13px;
  }
  .loginMain .form .error span {
    color: red;
  }
  .loginMain .form .show {
    visibility: visible;
  }
  .loginMain .form .others {
    padding-top: 10px;
    padding-left: 10px;
  }
  .loginMain .form .others a {
    text-decoration: none;
  }
  .loginMain .form .others a:hover {
    color: dodgerblue;
  }
  .loginMain .msg {
    width: 530px;
    margin-left: -80px;
    margin-right: -80px;
    margin-top: 20px;
    background-color: rgba(255, 251, 0, 0.158);
    border-bottom-left-radius: 0px;
  }
  .finished {
    text-align: center;
    padding-bottom: 40px;
  }
  .finished .info {
    color: coral;
    font-size: 18px;
    line-height: 80px;
  }
  .finished input {
    margin-top: 40px;
    width: 200px;
    line-height: 40px;
    font-size: 16px;
    color: #fff;
    background-color: dodgerblue;
    border: 0px;
    border-radius: 6px;
  }
  .finished input:hover {
    background-color: rgba(30, 143, 255, 0.795);
    cursor: pointer;
  }
  .headerBar {
    display: block;
    height: 40px;
    padding: 0 30px;
    padding-top: 8px;
    background-color: rgba(255, 255, 255, 0.5);
    text-align: right;
    vertical-align: middle;
  }
  .headerBar .btn {
    display: inline-block;
    background-color: #eee;
    padding: 2px 12px;
    border-radius: 4px;
  }
  .headerBar .btn:hover {
    cursor: pointer;
    background-color: dodgerblue;
    color: #fff;
  }
  .headerBar .btn:hover .text {
    color: #fff;
  }
  .headerBar div,
  .headerBar img {
    display: inline-block;
    vertical-align: text-top;
  }
  .headerBar img {
    height: 16px;
    width: auto;
    margin-top: 2px;
  }
}