﻿@charset "utf-8";
/*---------------------------------------------------------
writeForm styles
---------------------------------------------------------*/

#container {
  background: url(xy-hd-head-bg.png) no-repeat top center;
}

#container .header {
  width: 1200px;
  margin: 0 auto;
  justify-content: space-between;
  align-items: center;
  background: none;
}

#container .header .title {
  font-size: 36px;
  color: #022643;
  height: 110px;
  line-height: 110px;
}

#container .header .address li img {
  vertical-align: middle;
}

#container .header .address li {
  font-size: 14px;
  margin-right: 5px;
}

#container .header .address li,
#container .header .address li a {
  color: #999;
}

/* 写信表单 */
#container .form {
  width: 1200px;
  margin: 35px auto;
}

#container h2 {
  font-size: 18px;
  color: #333;
}

#container h2 span {
  font-size: 14px;
  color: #89a2b6;
  font-weight: 400;
}

#container .form-list-flex li {
  width: 50%;
  margin-top: 35px;
}

#container li span {
  font-size: 16px;
  color: #333;
  display: inline-block;
  width: 110px;
  text-align: right;
}

#container .form-list-flex li input[type=text] {
  width: 425px;
  height: 44px;
  border: 1px solid #d2d2d2;
  text-indent: 2em;
  ;
  outline: none;
}

#container li .label {
  width: 50px;
  text-align: left;
}

#container .form-list li {
  width: 100%;
  margin-bottom: 30px;
}

#container .form-list li input[type=text] {
  width: 1036px;
  height: 46px;
  border: 1px solid #d2d2d2;
  text-indent: 2em;
  outline: none;
}

#container .form-list .textContent {
  vertical-align: top;
}

#container .form-list li textarea {
  width: 1036px;
  height: 240px;
  border: 1px solid #d2d2d2;
  padding: 15px 0px;
  text-indent: 2em;
  outline: none;
}

#container .form-list li select {
  width: 466px;
  height: 44px;
  border: 1px solid #d2d2d2;
  text-indent: 2em;
}

#container .form-list .code input[type=text] {
  width: 160px;
}

#container .form-list .code img {
  height: 46px;
  vertical-align: middle;
}

#container .form-list .button-group {
  justify-content: center;
}

#container .form-list .button-group button {
  width: 240px;
  height: 50px;
  line-height: 0.50px;
  border-radius: 5px;
  margin-right: 30px;
  color: #fff;
  cursor: pointer;
  font-size: 16px;
  border-color: transparent;
}

#container .form-list .button-group img {
  vertical-align: middle;
}

#container .form-list .button-group .submit {
  background-color: #015293;
}

#container .form-list .button-group .reset {
  background-color: #747474;
}

.red {
  color: #ee1d1d;
  vertical-align: middle;
}

/* 手机端 */
@media (max-width: 480px) {

  #container {
    padding: 0 15px;
    background: url(xy-hd-head-bg1.png) left -68px no-repeat;
  }

  #container .header {
    width: 100%;
    flex-direction: column;
  }

  #container .header .title {
    height: auto;
    line-height: 75px;
    font-size: 22px;
  }

  #emailForm>img {
    display: none;
  }

  /* 写信表单 */
  #container .form,
  #container .form-list-flex li,
  #container .form-list li input[type=text],
  #container .form-list li textarea,
  #container .form-list li select,
  #container .form-list span:first-of-type {
    width: 100%;
  }

  #container .form li span {
    width: 35%;
    text-align: left;
    font-size: 14px;
  }

  #container .form li .label {
    width: 50px !important;
  }

  #container .form-list-flex ul {
    flex-direction: column;
  }

  #container .form-list-flex li {
    display: flex;
    align-items: center;
  }

  #container .form-list-flex li input[type=text] {
    flex: 1 1 0;
  }

  #container .form-list {
    background: url(xy-hd-form-line.png) no-repeat;
    padding-top: 35px;
    margin-top: 35px;
  }

  #container .form-list li {
    margin-bottom: 20px;
  }

  #container .form-list span:first-of-type {
    margin: 5px 0;
  }

  #container .form-list li input[type=text],
  #container .form-list li select,
  #container .form-list .code input[type=text] {
    height: 30px;
  }

  #container .form-list li textarea {
    height: 160px;
  }

  #container .form-list .code input[type=text] {
    width: 45%;
  }

  #container .form-list .code img {
    height: 20px;
  }

  #container .form-list .code a {
    line-height: 30px;
  }

  #container .form-list .button-group button {
    margin: 0 10px;
  }

}