.tologin {
  text-align: right;
  color: #9a9a9a;
  padding: 30px 0 50px 0;
}
.tologin a {
  color: #ff6600;
  text-decoration: none;
}
.p-dot {
  flex-shrink: 0;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 1px solid #ccc;
}
/* flex */
.three-progress {
  display: flex;
  max-width: 590px;
  margin: 0 auto;
}
.p-item {
  flex: 1;
  display: flex;
  height: 50px;
  position: relative;
}
.p-item::before,
.p-item::after {
  flex: 1;
  flex-shrink: 0;
  content: "";
  height: 1px;
  align-self: center;
  border-bottom: 1px dashed #ccc;
}
.p-item:first-child::before,
.p-item:last-child::after {
  border-color: transparent !important;
}
.p-c,
.p-img {
  display: flex;
  width: 60px;
  height: 60px;
  flex-shrink: 0;
  position: relative;
  justify-content: center;
}
.p-dot {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  position: absolute;
}
.p-img {
  display: none;
}
.p-img img {
  top: 50%;
  left: 50%;
  position: absolute;
  transform: translate(-50%, -50%);
}
.active.p-item .p-c {
  display: none;
}
.active.p-item .p-img {
  display: block;
}
.active.p-item::before,
.active.p-item::after {
  border-width: 1px;
  border-style: solid;
  border-color: #ff6600;
}
.three-text {
  max-width: 590px;
  margin: 0 auto;
  display: flex;
  margin-top: 15px;
  justify-content: space-evenly;
}
.three-text .three-c {
  flex: 1;
  display: flex;
  justify-content: center;
}
.three-text .three-c.active {
  color: #ff6600;
}
.three-text .p-text {
  margin-left: 5px;
  width: 60px;
  font-size: 14px;
  text-align: center;
  display: flex;
}
.mform {
  max-width: 360px;
  margin: 0 auto;
}
input.primary {
  height: 40px !important;
  font-size: 14px !important;
}
.field {
  margin-top: 15px;
  position: relative;
}
.verCode {
  right: 0;
  top: 50%;
  max-height: 30px;
  position: absolute;
  transform: translateY(-50%);
}
#getVercode {
  right: 0;
  top: 50%;
  text-decoration: none;
  color: #ff6600;
  position: absolute;
  transform: translateY(-50%);
}
#getVercode a {
  text-decoration: none;
  color: #ff6600;
}
label a {
  color: #4ca3f5 !important;
  text-decoration: none !important;
}
button {
  border: none !important;
  outline: none !important;
}
.btn {
  width: 100%;
  border-radius: 22px;
  background-color: #ff6600;
  transition: all 0.2s ease;
  color: #fff !important;
}
.btn:hover {
  color: #fff;
  background-color: #ff802b;
}
.btn:active {
  box-shadow: none !important;
}
.btn.disable {
  color: #fff;
  background-color: #dadada;
}
.progress-three {
  display: flex;
  max-width: 690px;
  margin: 0 auto;
  justify-content: space-evenly;
}
.progress-three .t-item {
  flex: 1;
  flex-shrink: 0;
}
.progress-three .t-item .t-graph {
  display: flex;
  position: relative;
}
.progress-three .t-item .t-graph::before,
.progress-three .t-item .t-graph::after {
  content: "";
  flex: 1;
  flex-shrink: 0;
  align-items: center;
  transform: translateY(25px);
  border-top: 1px dashed #ccc;
}
.progress-three .t-item .t-graph .t-c {
  width: 60px;
  height: 50px;
}
.progress-three .t-item .t-graph .t-c .t-img {
  display: none;
  text-align: center;
  align-self: stretch;
}
.progress-three .t-item .t-text {
  margin-top: 15px;
  text-align: center;
}
.progress-three .t-item.active .t-img {
  display: block !important;
}
.progress-three .t-item.active .p-dot {
  display: none;
}
.progress-three .t-item.active .t-text {
  color: #ff6600;
}
.progress-three .t-item.active .t-graph::before,
.progress-three .t-item.active .t-graph::after {
  border-top: 1px solid #ff6600;
}
.progress-three .t-item:first-child .t-graph::before {
  opacity: 0;
}
.progress-three .t-item:last-child .t-graph::after {
  opacity: 0;
}