.banner {
  width: 100%;
  background: url(../img/contact/banner.png) no-repeat center;
  background-size: cover;
  padding-top: 56.25%;
  position: relative;
}

.content {
  position: absolute;
  /* width: 75rem; */
  height: auto;
  top: 53%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
}

.main {
  display: flex;
  align-items: center;
  /* width: 75rem!important; */
  margin: 0 auto;
}

.main-left {
  margin-top: 10px;
  width: 500px;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  margin-right: 26%;
}

.main-left h2 {
  font-size: 2.5rem;
  font-weight: 600;
  color: #FFFFFF;
  line-height: 3.5rem;
  letter-spacing: .0625rem;
  padding-bottom: 1.625rem;
}

.main-left p {
  font-size: 1.5rem;
  font-weight: 400;
  color: #FFFFFF;
  line-height: 2.5rem;
}

.main-right {
  width: 42.5rem;
  height: 47.75rem;
  background: rgba(57, 166, 134, 0.2);
  box-shadow: .375rem .125rem .625rem 0rem rgba(0, 0, 0, 0.2);
  border-radius: 1.5rem;
}

.block-big {
  padding-left: 2rem;
}

.block-big textarea {
  padding-left: 1.125rem;
  padding-top: .625rem;
  color: #FFFFFF;
}

.block-bigg {
  padding-left: 1.5rem;
}

.block-name input {
  font-size: 1.25rem;
  font-weight: 400;
  line-height: 1.75rem;
  outline: none;
}

.main-right h3 {
  padding-left: 2rem;
  padding-top: 2.5rem;
  padding-bottom: .5rem;
  font-size: 1.75rem;
  font-weight: 600;
  color: #8B8B8B;
  line-height: 2.5rem;
  letter-spacing: .0625rem;
}

.main-right p {
  padding-bottom: 1rem;
  padding-top: 2rem;
  font-size: 1rem;
  font-weight: 400;
  color: #FFFFFF;
  line-height: 1.5rem;
}

.form input::-webkit-input-placeholder {
  font-size: 16px;
  color: #8B8B8B;
}

.form textarea::-webkit-input-placeholder {
  /* WebKit browsers */
  color: #8B8B8B;
  font-size: 16px;
}

.form textarea:-moz-placeholder {
  /* Mozilla Firefox 4 to 18 */
  color: #8B8B8B;
  font-size: 16px;
}

.form textarea::-moz-placeholder {
  /* Mozilla Firefox 19+ */
  color: #8B8B8B;
  font-size: 16px;
}

.form textarea::-ms-input-placeholder {
  /* Internet Explorer 10+ */
  color: #8B8B8B;
  font-size: 16px;
}

.main-right-block {
  display: flex;
}

.main-right input {
  width: 37.5rem;
  height: 3rem;
  background: rgba(57, 166, 134, 0.2);
  border-radius: .25rem;
  border: .0625rem solid #8B8B8B;
  padding-left: 1.125rem;
  outline: none;

}

.main-right .block-name input::-webkit-input-placeholder {
  color: #8B8B8B;
}

.main-right .main-right-block input {
  width: 17.375rem;
  height: 3rem;
  /* background: rgba(101, 128, 120, 0.2); */
  border-radius: .25rem;
  border: .0625rem solid #8B8B8B;
}

.main-right .block-name input {
  font-size: 1.25rem;
  font-weight: 400;
  line-height: 1.75rem;
  outline: none;
}

.textarea-text {
  width: 38.5rem;
  height: 7rem;
  background: rgba(57, 166, 134, 0.2);
  border-radius: .25rem;
  border: .0625rem solid #8B8B8B;
  outline: none;
}

.select-size {
  font-size: .875rem;
  width: 18.5rem;
  height: 3rem;
  background: rgba(57, 166, 134, 0.2);
  border-radius: .25rem;
  border: .0625rem solid #8B8B8B;
  position: relative;
  outline: none;
}

.select-size:after {
  content: "";
  position: absolute;
  bottom: .5rem;
  left: .3125rem;
  width: 0;
  height: 0;
  border-left: 2.1rem solid transparent;
  border-right: 1.9375rem solid transparent;
  border-bottom: 1.5625rem solid #8B8B8B;
  transform: rotate(90deg);
  border-right: .0625rem solid #666;
}

.bottom {
  position: relative;
  width: 500px;
  height: 60px;
  background: linear-gradient(90deg, #0B318F 0%, #6FB944 100%);  
  border-radius: 4px;
  /* border: 2px solid; */
  border-image: linear-gradient(270deg, rgba(129, 205, 141, 1), rgba(77, 117, 219, 1)) 2 2;
  cursor: pointer;
  font-size: 22px;
  box-sizing: border-box;
  margin-bottom: 50px;
  margin-top: 14px;
}

.bottom-hover {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, 0);
  width: 0px;
  height: 100%;
  border-radius: 1.875rem;
  background: linear-gradient(149deg, #A7FFC9 0%, #8DF3C2 36%, #82E7A9 100%);
  transition: all .3s;
  opacity: 0;
}

.bottom span {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  white-space: nowrap;
  font-size: 20px;
  font-weight: 400;
  color: #FFFFFF;
  line-height: 3.75rem;
  letter-spacing: .0625rem;
}

.bottom:hover .bottom-hover {
  width: 100%;
  opacity: 1;
}

/* 下拉框背景色 */
.bgcolor {
  background: #39a686;
  color: #FFFFFF;
  font-size: .875rem;
}

option:hover {
  color: #FFFFFF;
  background: #1A9772;
}

.name_current::-webkit-input-placeholder {
  color: #BE322F !important;
}

.name_current {
  background: rgba(222, 121, 95, 0.2) !important;
  color: #BE322F !important;
  border: 1px solid #BE322F !important;
}

.block-left ::-webkit-input-placeholder {
  color: #8B8B8B;;
}

.block-bigg ::-webkit-input-placeholder {
  color: #8B8B8B;;
}

/* 弹出框 */
.tips {
  z-index: 99;
  position: absolute;
  top: 46%;
  left: 35%;
}

.remark {
  width: 35rem;
  height: 5rem;
  background: rgba(0, 0, 0, 0.6);
  margin-bottom: 1.25rem;
  transition: all 3s;
}

.remark img {
  width: 2rem;
  height: 2rem;
  margin-top: 1.5rem;
  padding-left: 1.25rem;
  float: left;
}

.remark span {
  font-size: 1.375rem;
  font-weight: 400;
  color: #FFFFFF;
  line-height: 5rem;
  padding-left: 1rem;
}

.select {
  padding-left: 1.125rem;
  font-size: 1rem;
  font-weight: 400;
  color: #8B8B8B;;
  line-height: 1.75rem;
}

/* .select_current {
  font-size: 1rem;
  font-weight: 400;
  color: #DE795F !important;
  background: rgba(97, 81, 78, 0.2) !important;
  border: 1px solid #DE795F !important;
  line-height: 1.75rem;
} */

.select_color {
  color: #FFFFFF !important;
}

input:-webkit-autofill {
  -webkit-text-fill-color: #fff !important;
  transition: background-color 5000s ease-in-out 0s;
}

.fade-enter {
  opacity: 0;
}

.fade-enter-active {
  transition: opacity .3s;
}

.fade-leave-to {
  opacity: 0;
}

.fade-leave-active {
  transition: opacity .3s;
}

.el-form h3 {
  padding-top: 2.5rem;
  padding-bottom: .5rem;
  font-size: 1.75rem;
  font-weight: 600;
  color: #8B8B8B;
  line-height: 2.5rem;
  letter-spacing: .0625rem;
}

.el-form {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  width: 572px;
  height: 723px;
  background: url('../img/contact/background.png') no-repeat;
  background-size: 100%;
  /* box-shadow: .375rem .125rem .625rem 0rem rgba(0, 0, 0, 0.2); */
  border-radius: 1.5rem;
  padding: 124px 2rem 0;
  box-sizing: border-box;
}

.el-form-item {
  margin-bottom: 0 !important;
  width: 230px;
  height: 90px;
}

.el-form-item .el-form-item__label {
  padding-bottom: 6px !important;
  padding-top: 2px !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  color:#343434!important;
  line-height: 1.5rem !important;
}

.el-form-item .el-input__inner {
  width: 230px;
  height: 50px;
  background:  rgba(255, 255, 255, 0.9);
  border-radius: .25rem;
  border: 1px solid #C8C8C8;
  /* padding-left: 1.125rem; */
  color: #8B8B8B;
  font-size: 16px;
}

.el-form-item .el-select:hover .el-input__inner {
  border-color: #C8C8C8;;
}

.el-form-item .el-input__inner:hover,
.el-form-item .el-textarea__inner:hover {
  border-color: #C8C8C8;;
}

.el-form-item.is-error .el-input__inner:hover,
.el-form-item.is-error .el-textarea__inner:hover {
  border-color: #BE322F;
}

.el-input.is-active .el-input__inner,
.el-input__inner:focus,
.el-textarea__inner:focus,
.el-select .el-input.is-focus .el-input__inner {
  border-color: #C8C8C8 important;
}

.el-form-item__content {
  line-height: 0 !important;
}

.unitName {
  width: 100% !important;
}

.unitName .el-input__inner {
  width: 100% !important;
}

.textarea {
  width: 100% !important;
  height: 134px!important;
}

.el-textarea .el-textarea__inner {
  height: 7rem;
  background: rgba(255, 255, 255, 0.9);
  border-radius: .25rem;
  border: .0625rem solid #8B8B8B;
  padding-left: 1.125rem;
  padding-top: .625rem;
  color: #8B8B8B;
  font-size: 16px;
  font-family: 'PingFangSC-Regular', 'PingFang SC-Medium', 'Microsoft YaHei', 'Source Sans Pro', 'SimSun', 'sans-serif';
}

.el-form-item__error.el-form-item__error--inline {
  /* display: none; */
  color: #BE322F;
}

.el-form-item.is-error .el-input__inner,
.el-form-item.is-error .el-input__inner:focus,
.el-form-item.is-error .el-textarea__inner,
.el-form-item.is-error .el-textarea__inner:focus {
  border-color: #BE322F!important;
  color: #8B8B8B;
}

.el-form-item.is-error .el-input__inner::-webkit-input-placeholder,
.el-form-item.is-error .el-textarea__inner::-webkit-input-placeholder {
  color: #BE322F;
}

.el-form-item.is-error .el-input__inner:focus::-webkit-input-placeholder,
.el-form-item.is-error .el-textarea__inner:focus::-webkit-input-placeholder {
  color: #8B8B8B !important;
}

.el-input__suffix {
  display: none;
}

.el-select::after,
.el-select::before {
  display: block;
  content: '';
  height: 0;
  width: 0;
  position: absolute;
  top: 0;
  right: .625rem;
  border: .375rem solid #fff;
  border-left-color: transparent;
  border-right-color: transparent;
}

.el-select::before {
  border-top-color: transparent;
  top: .625rem;
}

.el-select::after {
  border-bottom-color: transparent;
  top: 1.75rem;
}

.el-select-dropdown {
  border: none !important;
  margin: 0 !important;
}

.el-scrollbar .el-select-dropdown__list {
  padding: 0;
}

.el-scrollbar .el-select-dropdown__item {
  background: #FFFFFF;
  color: #8B8B8B;
  font-size: 16px;
  height: 3rem;
  line-height: 3rem;
}

.el-scrollbar .el-select-dropdown__item.hover {
  background: #FFFFFF;
  font-size: 18px;
}

.el-popper[x-placement^=bottom] .popper__arrow {
  display: none;
}

.el-scrollbar .el-select-dropdown__item:last-child {
  border-radius: 0 0 4px 4px;
}



.contact-wrap {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0px;
  bottom: 0px;
}

.contact-wrap .banner {
  padding-top: 0;
  height: calc(100% - 353px);
  min-height: 1648px;
}

.contact-wrap .content {
  top: 50%;
  justify-content: center;
  flex-wrap: wrap;
  width: 1200px;
  margin: 0 auto;
}

.contact-wrap .main-left {
  width: 680px;
  text-align: center;
  margin-bottom: 300px;
  transform: scale(1.5);
}


/* 左边的2张照片 */
.main-left-img1{
  width: 388px;
  height: 179px;
  margin-bottom: 93px;
}

.main-left-img2{
  width: 500px;
  height: 80px;
}

.contact-wrap .main-left h2 {
  font-size: 40px;
  font-weight: 600;
  color: #FFFFFF;
  line-height: 56px;
  letter-spacing: 1px;
  padding-bottom: 26px;
}

.contact-wrap .main-left p {
  font-size: 24px;
  font-weight: 400;
  color: #FFFFFF;
  line-height: 40px;
}

.contact-wrap .main-right {
  width: 680px;
  height: 764px;
  background: rgba(57, 166, 134, 0.2);
  box-shadow: 6px 2px 10px 0px rgba(0, 0, 0, 0.2);
  border-radius: 24px;
}

.contact-wrap .block-big {
  padding-left: 32px;
}

.contact-wrap .block-big textarea {
  padding-left: 18px;
  padding-top: 10px;
  color: #FFFFFF;
}

.contact-wrap .block-bigg {
  padding-left: 24px;
}

.contact-wrap .block-name input {
  font-size: 20px;
  font-weight: 400;
  line-height: 28px;
  outline: none;
}

.contact-wrap .main-right h3 {
  padding-left: 32px;
  padding-top: 40px;
  padding-bottom: 8px;
  font-size: 28px;
  font-weight: 600;
  color: #8B8B8B;
  line-height: 40px;
  letter-spacing: 1px;
}

.contact-wrap .main-right p {
  padding-bottom: 16px;
  padding-top: 32px;
  font-size: 16px;
  font-weight: 400;
  color: #FFFFFF;
  line-height: 24px;
}

.contact-wrap .form input::-webkit-input-placeholder {
  font-size: 16px;
}

.contact-wrap .form textarea::-webkit-input-placeholder {
  font-size: 16px;
}

.contact-wrap .form textarea:-moz-placeholder {
  font-size: 16px;
}

.contact-wrap .form textarea::-moz-placeholder {
  font-size: 16px;
}

.contact-wrap .form textarea::-ms-input-placeholder {
  font-size: 16px;
}

.contact-wrap .main-right input {
  width: 600px;
  height: 48px;
  background: rgba(57, 166, 134, 0.2);
  border-radius: 4px;
  border: 1px solid #8B8B8B;
  padding-left: 18px;
  outline: none;

}

.contact-wrap .main-right .main-right-block input {
  width: 278px;
  height: 48px;
  border-radius: 4px;
  border: 1px solid #8B8B8B;
}

.contact-wrap .main-right .block-name input {
  font-size: 20px;
  font-weight: 400;
  line-height: 28px;
  outline: none;
}

.contact-wrap .textarea-text {
  width: 616px;
  height: 112px;
  background: rgba(57, 166, 134, 0.2);
  border-radius: 4px;
  border: 1px solid #8B8B8B;
  outline: none;
}

.contact-wrap .select-size {
  font-size: 14px;
  width: 296px;
  height: 48px;
  background: rgba(57, 166, 134, 0.2);
  border-radius: 4px;
  border: 1px solid #8B8B8B;
  position: relative;
  outline: none;
}

.contact-wrap .select-size:after {
  content: "";
  position: absolute;
  bottom: 8px;
  left: 5px;
  border-left: 33.6px solid transparent;
  border-right: 31px solid transparent;
  border-bottom: 25px solid #39A686;
  transform: rotate(90deg);
  border-right: 1px solid #666;
}

.contact-wrap .bottom {
  width: 220px;
  height: 60px;
  box-shadow: 0px 8px 10px 4px rgba(7, 131, 101, 0.78);
  border-radius: 30px;
  padding: 0 57.6px;
  margin-top: 32px;
  margin-left: 396px;
  margin-bottom: 40px;
}

.contact-wrap .bottom-hover {
  border-radius: 30px;
}

.contact-wrap .bottom span {
  font-size: 28px;
  line-height: 60px;
  letter-spacing: 1px;
}

/* 下拉框背景色 */
.contact-wrap .bgcolor {
  font-size: 14px;
}

.contact-wrap .remark {
  width: 560px;
  height: 80px;
  margin-bottom: 20px;
}

.contact-wrap .remark img {
  width: 32px;
  height: 32px;
  margin-top: 24px;
  padding-left: 20px;
}

.contact-wrap .remark span {
  font-size: 22px;
  line-height: 80px;
  padding-left: 16px;
}

.contact-wrap select {
  padding-left: 18px;
  font-size: 16px;
  line-height: 28px;
}

.contact-wrap .select_current {
  font-size: 16px;
  color: #DE795F !important;
  line-height: 28px;
}

.contact-wrap .el-form h3 {
  padding-top: 40px;
  padding-bottom: 8px;
  font-size: 28px;
  line-height: 40px;
  letter-spacing: 1px;
}

.contact-wrap .el-form {
  width: 680px;
  height: 764px;
  box-shadow: 6px 2px 10px 0px rgba(0, 0, 0, 0.2);
  border-radius: 24px;
  padding: 0 32px;
  transform: scale(1.5);
}

.contact-wrap .el-form-item {
  width: 296px;
}

.contact-wrap .el-form-item .el-form-item__label {
  padding-bottom: 16px !important;
  padding-top: 2px !important;
  font-size: 16px !important;
  line-height: 24px !important;
}

.contact-wrap .el-form-item .el-input__inner {
  width: 296px;
  height: 48px;
  background: rgba(57, 166, 134, 0.2);
  border-radius: 4px;
  border: 1px solid #8B8B8B;
  /* padding-left: 18px; */
  color: #fff;
  font-size: 16px;
  /* line-height: 48px; */
}

.el-select .el-input__inner{
  line-height: 50px;
}

.contact-wrap .el-textarea .el-textarea__inner {
  height: 112px;
  background: rgba(57, 166, 134, 0.2);
  border-radius: 4px;
  border: 1px solid #8B8B8B;
  padding-left: 18px;
  padding-top: 10px;
  color: #FFFFFF;
  font-size: 16px;
  font-family: 'PingFangSC-Regular', 'PingFang SC-Medium', 'Microsoft YaHei', 'Source Sans Pro', 'SimSun', 'sans-serif';
}

/* .contact-wrap .el-select::after,
.el-select::before {
   right: 10px; 
   border: 6px solid #fff; 
} */

.contact-wrap .el-select::before {
  top: 10px;
}

.contact-wrap .el-select::after {
  top: 28px;
}

.contact-wrap .el-select-dropdown {
  transform: scale(1.5);
}

.contact-wrap .el-scrollbar .el-select-dropdown__item {
  font-size: 20px;
  height: 48px;
  line-height: 48px;
}


/* 背景球 */
.advantage-bg{
  position: absolute;
  left: 0;
  top: -90px;
  width: 407px;
  height: 429px;
  border-radius: 50%;
  transition: all .2s linear;
  background: linear-gradient(141deg, #FFFFFF 0%, #DCE2F8 100%);
  box-shadow: 0px 2px 13px 0px rgba(0, 0, 0, 0.05);
  filter: blur(17px);
  -webkit-animation: ballMove 16s linear infinite;
  animation: ballMove 16s linear infinite;
  transform: translate(0px, 0px);
}

.advantage-bg1{
  position: absolute;
  right: 0;
  bottom: -90px;
  width: 407px;
  height: 429px;
  border-radius: 50%;
  transition: all .2s linear;
  background: linear-gradient(141deg, #FFFFFF 0%, #E5F5DC 100%);
  box-shadow: 0px 2px 13px 0px rgba(0, 0, 0, 0.05);
  filter: blur(17px);
  -webkit-animation: ballMove1 16s linear infinite;
  animation: ballMove1 16s linear infinite;
  transform: translate(0px, 0px);
}

@keyframes ballMove {
  0% {
    -webkit-transform: translate(0px, 0px);
    transform: translate(0px, 0px);
  }

  50% {
    -webkit-transform: translate(0px, 80vh);
    transform: translate(0px, 80vh);
  }

  100% {
    -webkit-transform: translate(0px, 0px);
    transform: translate(0px, 0px);
  }
}

@keyframes ballMove1 {
  0% {
    -webkit-transform: translate(0px, 0px);
    transform: translate(0px, 0px);
  }

  50% {
    -webkit-transform: translate(0px, -80vh);
    transform: translate(0px, -80vh);
  }

  100% {
    -webkit-transform: translate(0px, 0px);
    transform: translate(0px, 0px);
  }
}

.el-select-dropdown__item.selected {
  color: #fff !important;
  font-size: 18px!important;
  font-weight: normal!important;
}