/*表单样式*/
.form-item-block {
  position: relative;
  margin-bottom: 24px;
}

.form-container form input, 
.form-container form textarea {
  outline: none !important;
  box-shadow: none !important;
  width: 100%;
  padding: 16px;
  border: 1px solid #bcbcbc;
  background-color: transparent;
  font-size: 17px;
  color: #222222;
  font-family: inherit;
  -moz-transition: all 0.2s linear 0s;
  -webkit-transition: all 0.2s linear 0s;
  transition: all 0.2s linear 0s;
}

.form-container form label {
  position: absolute;
  top: 1px;
  left: 1px;
  font-weight: 700;
  margin-bottom: 0px;
  background: transparent;
}

.form-container form label:before {
  content: "";
  height: 100%;
  display: inline-block;
  vertical-align: middle;
}

.form-container form label span {
  display: inline-block;
  vertical-align: middle;
  padding: 0px 20px;
}


.form-container form textarea {
  resize: none;
  height: 140px;
  line-height: 24px;
}

.form-container form textarea + label {
  line-height: 24px;
  padding: 20px 0px;
}

.form-container form input + label {
  height: calc(100% - 2px);
}

.form-container form button {
  color: #222;
  border: 1px solid #bcbcbc;
  background: transparent;
  border-radius: 4px;
  outline: none;
  padding: 10px 50px;
}

/* example-12 styles */

#example-12 .form-item-block {
  overflow: hidden;
}

#example-12.form-container label {
  -moz-transition: all 0.2s cubic-bezier(0, 0, 0.2, 1) 0s;
  -webkit-transition: all 0.2s cubic-bezier(0, 0, 0.2, 1) 0s;
  transition: all 0.2s cubic-bezier(0, 0, 0.2, 1) 0s;
}

#example-12.form-container .icon {
  position: absolute;
  width: 14px;
  height: 14px;
  background: #a87f37;
  border-radius: 100px;
  left: -40px;
  -moz-transition: all 0.2s cubic-bezier(0, 0, 0.2, 1) 0s;
  -webkit-transition: all 0.2s cubic-bezier(0, 0, 0.2, 1) 0s;
  transition: all 0.2s cubic-bezier(0, 0, 0.2, 1) 0s;
}

#example-12.form-container input + label + .icon {
  top: calc(50% - 8px);
}

#example-12.form-container textarea + label + .icon {
  top: 24px;
}

#example-12.form-container input:focus + label,
#example-12.form-container input.active  + label,
#example-12.form-container textarea:focus  + label,
#example-12.form-container textarea.active + label {
  -moz-transform: scale(0, 1);
  -webkit-transform: scale(0, 1);
  transform: scale(0, 1);
  -moz-transform-origin: left center;
  -webkit-transform-origin: left center;
  transform-origin: left center;
  opacity: 0;
}

#example-12.form-container input:focus,
#example-12.form-container input.active,
#example-12.form-container textarea:focus,
#example-12.form-container textarea.active {
  padding-left: 50px;
}

#example-12.form-container input:focus + label + .icon,
#example-12.form-container input.active  + label + .icon,
#example-12.form-container textarea:focus  + label + .icon,
#example-12.form-container textarea.active + label + .icon {
  left: 20px;
  -moz-transition: all 0.2s cubic-bezier(0, 0, 0.2, 1) 0.2s;
  -webkit-transition: all 0.2s cubic-bezier(0, 0, 0.2, 1) 0.2s;
  transition: all 0.2s cubic-bezier(0, 0, 0.2, 1) 0.2s;
}
#subBtn{
  width: 180px;
  margin:0 auto;
}