html {
  height: 100%;
}

body {
  height: 100%;
  display: flex;
  flex-direction: column;
}

#header {
  margin: 0 10%;
  height: 60px;
  display: flex;
  align-items: center;
  color: #333333;
  font-size: 16px;
}

#header img {
  height: 34px;
  display: block;
  margin-right: 20px;
}

#header h1 {
  font-weight: 300;
  font-size: 18px;
}

#header i {
  font-style: normal;
  padding: 0 10px;
}

#banner {
  flex: 1;
  background-color: #8fc9f1;
  position: relative;
}

#banner .backImg {
  position: absolute;
  left: 4%;
  bottom: -6%;
  height: 90%;
  display: block;
}

#banner h2 {
  position: absolute;
  left: 13%;
  top: 10%;
  color: white;
  font-size: 40px;
}

#banner .from {
  width: 450px;
  height: 422px;
  border-radius: 6px;
  background-color: white;
  position: absolute;
  right: 10%;
  top: 0;
  bottom: 0;
  margin: auto 0;
  overflow: hidden;
}

#banner .from .table {
  height: 59px;
  border-bottom: 1px solid #d2edff;
  font-size: 16px;
}

#banner .from .table li {
  width: 50%;
  height: 59px;
  float: left;
  line-height: 59px;
  text-align: center;
  background-color: #d2edff;
  color: #6bc2fe;
  cursor: pointer;
}

#banner .from .table .active, #banner .from .table li:hover {
  background-color: white;
  color: #333333;
}

#banner .login {
  padding: 40px 40px 20px;
}

#banner .login .inputBox {
  height: 50px;
  box-shadow: 0 0 10px rgba(204, 204, 204, .5);
  border-radius: 6px;
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

#banner .login .inputBox:nth-last-child(1) {
  margin-bottom: 30px;
}

#banner .login .inputBox img {
  margin: 0 20px;
}

#banner .login .inputBox input {
  flex: 1;
  height: 48px;
  line-height: 48px;
  padding-left: 10px;
  border: 0;
  outline: none;
  background: none;
  box-shadow: none;
}

#banner .login input::-webkit-input-placeholder,
#banner .login input:-moz-placeholder,
#banner .login input::-moz-placeholder,
#banner .login input:-ms-input-placeholder {
  color: #a7a7a7;
}

#banner .login .validate {
  display: flex;
}

#banner .login .validateImg {
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

#banner .login .validateImg img {
  height: 30px;
  display: block;
}

#banner .login .validateImg .sendIphone {
  width: 100%;
  height: 48px;
  line-height: 48px;
  text-align: center;
}

#banner .login .loginBtn {
  height: 50px;
  cursor: pointer;
  border-radius: 6px;
  color: white;
  background-color: #6bc2fe;
  font-size: 16px;
  display: flex;
  justify-content: center;
  align-items: center;
}

#banner .login .loginBtn:hover {
  background-color: #65A8E2;
}

#banner .login .loginBtn img {
  height: 30px;
  display: block;
}

#banner .login .btnS {
  height: 32px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

#banner .login .btnS a {
  cursor: pointer;
  color: #6bc2fe;
  text-decoration: none;
}

#banner .login .btnS a:hover {
  text-decoration: underline;
}

#table {
  margin: 10px 10% 0;
  height: 70px;
}

#table ul {
  height: 70px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

#table li {
  display: flex;
  align-items: center;
}

#table li img {
  height: 46px;
  display: block;
  margin-right: 10px;
}

#table li .right {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  color: #666666;
}

#table li .right h2 {
  font-size: 16px;
  color: #333333;
  margin-bottom: 6px;
}

.message {
  position: fixed;
  left: 0;
  right: 0;
  top: -40px;
  margin: 0 auto;
  width: 200px;
  height: 40px;
  display: flex;
  align-items: center;
  padding: 0 20px;
  transition: all .5s;
  opacity: 0;
  background-color: white;
  box-shadow: 0 0 10px rgba(204, 204, 204, .5);
  border-radius: 6px;
}

.message img {
  height: 20px;
  display: block;
  margin-right: 20px;
}

.message.show {
  top: 10px;
  opacity: 1;
}