/* contact */
.contact {
  padding: 1rem 0 .6rem;
}

.contact-title:after {
  letter-spacing: .12rem;
  text-indent: .12rem;
  word-spacing: .15rem;
}

.contact-map {
  width: 6.9rem;
  height: 5.72rem;
  margin: .4rem auto;
  background-color: #eee;
}

.contact-list {
  width: 6.9rem;
  margin: 0 auto;
}

.contact-list li {
  font-size: .26rem;
  line-height: .48rem;
  color: #586696;
  opacity: .8;
  padding-left: .78rem;
  box-sizing: border-box;
  position: relative!important;
}

.contact-list li:before {
  content: "";
  position: absolute;
  left: .22rem;
  top: 50%;
  transform: translateY(-50%);
}

.contact-list li:nth-child(1):before {
  width: .28rem;
  height: .3rem;
  background: url(../img/spr.png) no-repeat -5.9rem -.9rem/8rem 8rem;
}

.contact-list li:nth-child(2):before {
  width: .28rem;
  height: .29rem;
  background: url(../img/spr.png) no-repeat -6.28rem -.9rem/8rem 8rem;
}

.contact-list li:nth-child(3):before {
  width: .28rem;
  height: .29rem;
  background: url(../img/spr.png) no-repeat -6.66rem -.9rem/8rem 8rem;
}

.contact-list li:nth-child(4):before {
  width: .28rem;
  height: .28rem;
  background: url(../img/spr.png) no-repeat -5.9rem -1.29rem/8rem 8rem;
}

.contact-list li:nth-child(5):before {
  width: .28rem;
  height: .3rem;
  background: url(../img/spr.png) no-repeat -6.28rem -1.29rem/8rem 8rem;
}


.contact-input {
  margin: .09rem auto 0;
  font-size: 0;
  width: 6.9rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.contact-input input, .contact-input textarea {
  -webkit-appearance: none;
  margin-top: .35rem;
  width: 3.2rem;
  height: .55rem;
  line-height: .55rem;
  background-color: #f5f9fb;
  color: #7e7e7e;
  font-size: .26rem;
  text-indent: .26rem;
  border: 1px solid #fff;
  box-sizing: border-box;
  outline: none;
  transition: all .3s;
  border-radius: 3px;
}

.contact-input input:focus, .contact-input textarea:focus {
  border-color: #838cae;
  background-color: #fff;
}

.contact-input textarea {
  width: 6.9rem;
  height: 1.54rem;
  resize: none;
}

.contact-input div {
  position: relative;
  display: flex;
  align-items: flex-end;
}

.contact-input span {
  position: absolute;
  font-size: .2rem;
  left: .28rem;
  bottom: -.3rem;
  color: red;
}

.contact-input a {
  display: block;
  width: 100%;
  line-height: .7rem;
  border-radius: 3px;
  background: linear-gradient(to bottom, #4586f2, #3b7bf0);
  margin: .52rem auto 0;
  font-size: .26rem;
  color: #fff;
  letter-spacing: .22rem;
  text-indent: .22rem;
  text-align: center;
}

.contact-input a:hover {
  text-decoration: none;
}

.contact-input img {
  height: .55rem;
  margin-left: .1rem;
}