@media  ( min-width: 850px) {
.middle{
  margin: 20px 0 100px 0;
 }
 .middle .middle-line
 {
     width:100%;
     height:4rem;
     line-height:4rem;
     text-align:center;
     padding: 1rem 0;
 }
 .middle .middle-line .text{
     font-weight: bold;
     font-size: 3rem;
 }
 .middle .middle-con{
     width: 50rem;
     margin: 0 auto;
     font-size: 1rem;
 }
 .middle .middle-con .input{
     width: 50rem;
     height: 3rem;
     font-size: 1rem;
     padding: 0 0 0 1rem;
     margin-top: 0.5rem;
     margin-bottom: 1rem;
     background: #ccc;
     border: 1px #ccc solid;
     border-radius: 0.2rem;
 }
 .middle .middle-con .Guarantoes{
     font-weight: bold;
 }
 .middle .middle-con .Guarantoes .middle-span{
     color: red;
     margin-right: 0.2rem;
 }
 .middle .middle-con .middle-input{
     width: 50rem;
     display: flex;
     justify-content: space-between;
     margin-top: 0.5rem;
     margin-bottom: 1rem;
 }
 .middle .middle-con .middle-input .input1{
     width: 41rem;
     height: 3rem;
     padding: 0 0 0 1rem;
     background: #ccc;
     border: 1px #ccc solid;
     border-radius: 0.2rem;
     margin-right: 1rem;
 }
 .cw{
  font-size: 1rem;
  color: red;
  margin: 0 auto;
 }
 .Query{
     display:block;
     margin:0 auto;
     width: 51rem;
     background: #0E65E7;
     height: 3rem;
     border-radius: 0.2rem;
     line-height: 3rem;
     text-align: center;
     color: #fff;
 }
 .Back{
  margin:0 auto;
  width: 51rem;
  background: #ccc;
  height: 3rem;
  border-radius: 0.2rem;
  line-height: 3rem;
  text-align: center;
  color: #fff;
}
.remind{
  margin:0 auto;
  font-size: 1rem;
  width: 20rem;
  padding: 3rem;
}
.warning{
  margin:0 auto;
  width: 10rem;
}
.warning img{
  width: 100%;
}
 .valicode_img {
  width:11rem;
  height:3.0rem;
  float: left;
  margin: 0 0 0 2rem;
}
.middle .middle-con .middle-ul{
  padding: 1rem 0 0 0;
  display: flex;
  font-size: 1rem;
  justify-content: space-between;
}
.middle .middle-con .middle-ul li{
 min-width: 110px;
}
}
@media  ( max-width: 850px){
  .middle{
    padding: 0.7rem 1.5rem 3rem;
  }
  .middle .middle-line
  {
    width:100%;
    height:2rem;
    line-height:2rem;
    text-align:center;
    padding: 1rem 0;
  }
  .middle .line
  {
    display:inline-block;
    width: 20%;
    border-top:1px solid #cccccc;
    vertical-align:0.2rem;
  }
  .middle .middle-line .text{
    font-weight: bold;
    font-size: 1.2rem;
  }
  .middle .middle-con{
    width: 100%;
  }
  .middle .middle-con .input{
    width: 100%;
    height: 2rem;
    padding: 0 0 0 1rem;
    margin-top: 0.5rem;
    margin-bottom: 1rem;
    background: #ccc;
    border: 1px #ccc solid;
    border-radius: 0.2rem;
  }
  .middle .middle-con .Guarantoes{
    font-weight: bold;
  }
  .middle .middle-con .Guarantoes .middle-span{
    color: red;
    margin-right: 0.2rem;
  }
  .middle .middle-con .middle-input{
    width: 100%;
    display: flex;
    justify-content: space-between;
    margin-top: 0.5rem;
    margin-bottom: 1rem;
  }
  .middle .middle-con .middle-input .input1{
    width: 90%;
    height: 2rem;
    padding: 0 0 0 1rem;
    background: #ccc;
    border: 1px #ccc solid;
    border-radius: 0.2rem;
  }
  .cw{
    font-size: 1rem;
    color: red;
   }
  .Query{
    display:block;
    width: 100%;
    background: #0E65E7;
    height: 2rem;
    border-radius: 0.2rem;
    line-height: 2rem;
    text-align: center;
    color: #fff;
  }
  .remind{
    width: 100%;
    padding: 0 10px;
  }
  .Back{
    width: 100%;
    background: #ccc;
    height: 2rem;
    border-radius: 0.2rem;
    line-height: 2rem;
    text-align: center;
    color: #fff;
  }
  .warning{
    margin:0 auto;
    width: 20rem;
  }
  .warning img{
    width: 100%;
  }
  .valicode_img {
    width:5rem;
    height:2.0rem;
    float: left;
    margin-top: 0;
  }
  .middle .middle-con .middle-ul{
    padding: 1rem 0 0 0;
    display: flex;
    justify-content: space-between;
}
.middle .middle-con .middle-ul li{
  min-width: 110px;
 }
}
.Query :hover{
  cursor: pointer;
}