*{
  padding: 0;
  margin: 0;
}
li {
  list-style: none;
}

.clearfix:after {
  content: " ";
  display: block;
  clear: both;
  height: 0;
}

.clearfix {
  zoom: 1;
}

i {
  font-style: normal;
}
a {
  color: #000;
  text-decoration: none;
}
.fr {
  float: right;
}

.fl {
  float: left;
}

.re {
  position: relative;
}

.ab {
  position: absolute;
}
.hide{
  display: none;
}
input{
  outline: none;
}

/*头部样式 S*/
header{
  height: 120px;
  width: 100%;
}
.headcontainer{
  width: 1200px;
  height: 100%;
  margin: 0 auto;
}
.logo{
  top: 50%;
  transform: translateY(-50%);
  left: 0;
  width: 20%;
}
.tips{
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}
/*头部样式 E*/
/*主体样式 S*/
.outdv{
  width: 100%;
  background-color: #fafafa;
}
.container{
  width: 1200px; 
  margin: 0 auto;
  padding: 45px 0 100px;
}
.container p,h1{
  width: 600px;
  margin: 0 auto;
  margin-bottom: 30px;
}
.container p input{
  margin-left: 100px;
  height: 50px;
  width: 420px;
  text-indent: 30px;
}
.comSpan{
  right: 514px;
  line-height: 54px;
}
.container .imgCode,.container .phoneCode{
  width: 278px;
  margin-right: 20px;
}
.codeImg{
  width: 116px;
  /*right: 77px;*/
  /*top: 50%;*/
  /*transform: translateY(-50%);*/
  vertical-align: middle;
}
.codeBtn{
  width: 116px;
  height: 38px;
  border:1px solid #20C796;
  color: #20C796;
  background-color: #fafafa;
  border-radius: 6px;
  outline: none;
}
.eyeImg{
  top: 50%;
  transform: translateY(-50%);
  right: 90px;
}
.protocol{
  text-indent: 100px;
}
.protocol a{
  color: #60B7EC;
}
.protocol img{
  vertical-align: middle;
}
.regBtn{
  width: 320px;
  height: 50px;
  background-color: #20C796;
  color: #fff;
  border-radius: 6px;
  border:none;
  outline: none;
  font-size: 20px;
  left: 50%;
  transform: translateX(-50%);
}
/*主体样式 E*/
.red{
  color: #D92672;
}
.container .red.ab{
  bottom: -20px;
  left: 130px;
  font-size: 12px;
}
.container .protocol .red.ab{
  left: 30px;
}