body {
  background-color: #fff;
}

.contact {
  position: relative;
  z-index: 1;
  padding-top: 5vw;
  background-color: #fff;
}

.contact .contact-inner {
  display: flex;
  flex-direction: column;
}

.contact-intro {
  padding-bottom: 3.49vw;
  border-bottom: 1px solid #d7dfe2;
  line-height: 1;
}

.contact-intro .title {
  flex-shrink: 0;
  font-size: 2.29vw;
  font-weight: 700;
  color: #333;
}

.contact-intro .desc {
  flex: 1;
  min-width: 0;
  margin-top: 1.67vw;
  font-size: .83vw;
}

.contact-body {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-top: 3.23vw;
}

.contact-location {
  width: 44.27vw;
}

.contact .sub-title {
  font-size: 1.15vw;
  font-weight: 700;
  line-height: 1;
  color: #333;
}

.contact-location .address {
  margin-top: 1.09vw;
  line-height: 1.454545;
  font-size: 1.15vw;
}

.contact-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 4.48vw 5.73vw;
  margin-top: 3.18vw;
}

.contact-grid .grid-item .label {
  position: relative;
  margin-bottom: .99vw;
  font-size: .83vw;
  line-height: 1;
}

.contact-grid .grid-item .value::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background-color: #d7dfe2;
}

.contact-grid .grid-item .value::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 3.23vw;
  height: 2px;
  background-color: #333;
}

.contact-grid .grid-item .value {
  position: relative;
  font-size: 1.15vw;
  font-weight: 700;
  font-family: Arial;
  line-height: 1;
  padding-bottom: 1.2vw;
}

.contact-grid .grid-item .value a {
  color: inherit;
  transition: opacity 0.2s linear;
}

.contact-grid .grid-item .value a.is-link {
  color: #2d77d9;
}

.contact-grid .grid-item .value a:hover {
  opacity: 0.8;
}

.contact-right {
  width: 37.5vw;
}

.contact-right .social-head .desc {
  margin-top: .94vw;
  font-size: .83vw;
  line-height: 1;
}

.social-cards {
  display: flex;
  gap: 0 1.77vw;
  margin-top: 2.19vw;
}

.social-card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 16.4vw;
  flex: 1;
  min-width: 0;
  text-align: center;
  background-color: #f8f9fd;
  border-radius: .42vw;
}

.social-card .icon-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.13vw;
  height: 3.13vw;
  margin: 0 auto;
  border-radius: 50%;
}

.social-card .icon-wrap.is-wechat {
  background-color: #2cb303;
}

.social-card .icon-wrap.is-douyin {
  background-color: #2c2c2c;
}

.social-card .icon-wrap.is-shipinhao {
  background-color: #fa9d3b;
}

.social-card .icon-wrap .icon {
  display: block;
}

.social-card .icon-wrap.is-wechat .icon {
  width: 1.56vw;
}

.social-card .icon-wrap.is-douyin .icon {
  width: 1.35vw;
}

.social-card .icon-wrap.is-shipinhao .icon {
  width: 1.46vw;
}

.social-card .card-title {
  margin-top: 1.15vw;
  font-size: .94vw;
  font-weight: 700;
  line-height: 1;
}

.social-card .card-tip {
  margin-top: .63vw;
  font-size: .78vw;
  line-height: 1;
}

.social-card .qr {
  margin-top: 1.2vw;
}

.social-card .qr img {
  display: block;
  width: 5.21vw;
  height: 5.73vw;
  margin: 0 auto;
  object-fit: contain;
  border-radius: .42vw;
  overflow: hidden;
}

.map-container {
  position: relative;
  z-index: 1;
  width: 100%;
  aspect-ratio: 1920 / 654;
  margin-top: 6.15vw;
  --map-pin-x: 60.76%;
  --map-pin-y: 45.32%;
}

.map-container img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--map-pin-x) var(--map-pin-y);
}

.map-container .icon-item {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: var(--map-pin-y);
  left: var(--map-pin-x);
  width: 4.22vw;
  height: 4.22vw;
  background-color: #397dd7;
  border-radius: 50%;
  z-index: 2;
  transform: translate(-50%, -50%);
}

.map-container .icon-item::before,
.map-container .icon-item::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background-color: rgba(57, 125, 215, 0.45);
  animation: contact-icon-ripple 3s ease-out infinite;
  pointer-events: none;
  z-index: 0;
}

.map-container .icon-item::after {
  animation-delay: -1.5s;
}

@keyframes contact-icon-ripple {
  0% {
    transform: scale(1);
    opacity: 0.6;
  }

  100% {
    transform: scale(2.8);
    opacity: 0;
  }
}

.map-container .icon-item img {
  position: relative;
  z-index: 1;
  width: 2.5vw;
  height: 2.5vw;
}

.contact-bg {
  margin-top: 6.72vw;
  height: 30.52vw;
  background: url(../images/contact-bg.jpg) 0 0/cover fixed;
}

.form-container {
  position: relative;
  z-index: 1;
  padding-bottom: 6.61vw;

}

.form-container .wrapper {
  margin-top: -20.36vw;
}

.contact-form-card {
  position: relative;
  height: 28.23vw;
  background-color: #fff;
  box-shadow: 0 0 1.04vw rgba(0, 0, 0, 0.12);
  border-radius: .83vw;
}

.form-corner {
  position: absolute;
  width: 1.04vw;
  height: 1.04vw;
  border: 2px solid #397dd7;
  border-radius: 50%;
  pointer-events: none;
}

.form-corner::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: .42vw;
  height: .42vw;
  border: 2px solid #397dd7;
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

.contact-form-inner {
  display: flex;
  align-items: stretch;
  gap: 0 4.17vw;
  height: 100%;
  padding: 4.38vw 4.06vw 3.96vw 4.48vw;
  box-sizing: border-box;
  overflow: hidden;
}

.contact-form-intro {
  padding-top: .36vw;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  position: relative;
  flex-shrink: 0;
  width: 29.43vw;
}

.contact-form-intro .email-icon {
  width: 3.75vw;
}

.contact-form-intro .logo {
  margin-top: 1.41vw;
  width: 29.43vw;
}

.contact-form-intro .intro-title {
  position: relative;
  z-index: 1;
  margin-top: -1.09vw;
  font-size: 1.88vw;
  font-weight: 700;
  line-height: 1;
  color: #2d77d9;
}

.contact-form-intro .intro-desc {
  position: relative;
  z-index: 1;
  display: inline-flex;
  flex-direction: column;
  margin-top: 1.77vw;
  font-size: .83vw;
  line-height: 1.75;
}

.contact-form {
  flex: 1;
  min-width: 0;
  width: 44.22vw;
  display: flex;
  flex-direction: column;
}

.contact-form .form-row {
  margin-bottom: .83vw;
}

.contact-form .form-row:last-of-type {
  margin-bottom: 0;
}

.contact-form .form-row-cols {
  display: flex;
  gap: 0 .83vw;
}

.contact-form .form-row-cols .form-field {
  flex: 1;
  min-width: 0;
}

.contact-form .field-box {
  display: flex;
  align-items: center;
  min-height: 3.13vw;
  padding: 0 1.04vw;
  background-color: #f5f7fa;
  border-radius: .42vw;
}

.contact-form .field-box label {
  flex-shrink: 0;
  margin-right: .83vw;
  font-size: .83vw;
  line-height: 1;
  white-space: nowrap;
}

.contact-form .field-box label em {
  font-style: normal;
  color: #e53935;
}

.contact-form .field-box input,
.contact-form .field-box textarea {
  flex: 1;
  min-width: 0;
  padding: 0;
  font-size: .83vw;
  line-height: 1.4;
  color: #333;
  background: transparent;
  border: none;
  outline: none;
  resize: none;
}

.contact-form .field-box input::placeholder,
.contact-form .field-box textarea::placeholder {
  color: #999;
}

.contact-form .field-box input:-webkit-autofill,
.contact-form .field-box input:-webkit-autofill:hover,
.contact-form .field-box input:-webkit-autofill:focus,
.contact-form .field-box input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 1000px #f5f7fa inset;
  box-shadow: 0 0 0 1000px #f5f7fa inset;
  -webkit-text-fill-color: #333;
  caret-color: #333;
  transition: background-color 5000s ease-in-out 0s;
}

.contact-form .field-box.is-textarea {
  display: block;
  flex: 1;
  min-height: 7.81vw;
  padding: 1.04vw;
}

.contact-form .field-box.is-textarea textarea {
  margin-top: 0;
  height: 100%;
  min-height: 5.73vw;
  width: 100%;
  font-family: inherit;
}

.contact-form .form-row:has(.is-textarea) {
  flex: 1;
  display: flex;
  flex-direction: column;
  margin-bottom: 1.61vw;
}

.contact-form .form-row:has(.is-textarea) .form-field {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.contact-form .form-row:has(.is-textarea) .field-box {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.contact-form .form-actions {
  display: flex;
  gap: 0 .83vw;
  margin-top: auto;
}

.contact-form .btn-submit,
.contact-form .btn-reset {
  position: relative;
  z-index: 1;
  width: 12.71vw;
  height: 3.13vw;
  font-size: .83vw;
  line-height: 1;
  color: #fff;
  border: none;
  border-radius: .42vw;
  cursor: pointer;
  overflow: hidden;
  transition: color 0.5s;
}

.contact-form .btn-submit::after,
.contact-form .btn-reset::after {
  content: "";
  position: absolute;
  z-index: -1;
  left: -20%;
  right: -20%;
  top: 0;
  bottom: 0;
  transform: skewX(-45deg) scale(0, 1);
  transition: all 0.5s;
}

.contact-form .btn-submit::after {
  background: #FA9130;
}

.contact-form .btn-reset::after {
  background: #667788;
}

.contact-form .btn-submit:hover,
.contact-form .btn-reset:hover {
  color: #fff;
}

.contact-form .btn-submit:hover::after,
.contact-form .btn-reset:hover::after {
  transform: skewX(-45deg) scale(1, 1);
}

.contact-form .btn-submit {
  background-color: #2d77d9;
}

.contact-form .btn-reset {
  background-color: #12243b;
}

@media screen and (max-width: 1020px) {
  .contact {
    padding: var(--m-section-py) 0;
  }

  .contact-intro {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--m-space-xs);
    padding-bottom: var(--m-gap-block);
  }

  .contact-intro .title {
    font-size: var(--m-font-h1);
    line-height: 1.3;
  }

  .contact-intro .desc {
    font-size: var(--m-font-sm);
    line-height: 1.6;
  }

  .contact-body {
    flex-direction: column;
    gap: var(--m-gap-block);
    margin-top: var(--m-gap-block);
  }

  .contact-location,
  .contact-right {
    width: 100%;
  }

  .contact-right {
    padding-left: 0;
    border-left: none;
    padding-top: 0;
  }

  .contact .sub-title {
    font-size: var(--m-font-h3);
  }

  .contact-location .address {
    margin-top: var(--m-space-sm);
  }

  .contact-location .address .city {
    font-size: var(--m-font-h3);
  }

  .contact-location .address .detail {
    margin-top: var(--m-space-xs);
    font-size: var(--m-font-sm);
    line-height: 1.5;
  }

  .contact-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--m-space-lg) var(--m-space-sm);
    margin-top: var(--m-space-lg);
  }

  .contact-grid .grid-item .label {
    margin-bottom: var(--m-space-xs);
    font-size: var(--m-font-sm);
    white-space: nowrap;
  }

  .contact-grid .grid-item .label::after {
    width: 8vw;
    height: 2px;
  }

  .contact-grid .grid-item .value {
    font-size: var(--m-font-body);
    white-space: nowrap;
    word-break: normal;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-bottom: var(--m-space-xs);
  }

  .contact-grid .grid-item .value a {
    white-space: nowrap;
  }

  .map-container {
    aspect-ratio: auto;
    height: 64vw;
    margin-top: var(--m-gap-block);
  }

  .map-container .icon-item {
    width: 5.333vw;
    height: 5.333vw;
  }

  .map-container .icon-item img {
    width: 3.2vw;
    height: 3.2vw;
  }

  .contact-bg {
    margin-top: var(--m-gap-block);
    height: 48vw;
  }

  .form-container {
    padding-bottom: var(--m-section-py);
  }

  .form-container .wrapper {
    margin-top: -28vw;
  }

  .contact-right .social-head .desc {
    margin-top: var(--m-space-xs);
    font-size: var(--m-font-sm);
  }

  .social-cards {
    flex-direction: row;
    gap: 0;
    margin-top: var(--m-space-md);
  }

  .social-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    min-width: 0;
    height: auto;
    padding: var(--m-space-sm) var(--m-space-2xs);
  }

  .social-card .icon-wrap {
    width: 8vw;
    height: 8vw;
  }

  .social-card .icon-wrap.is-wechat .icon {
    width: 4.267vw;
  }

  .social-card .icon-wrap.is-douyin .icon {
    width: 3.2vw;
  }

  .social-card .icon-wrap.is-shipinhao .icon {
    width: 3.733vw;
  }

  .social-card .card-title {
    margin-top: var(--m-space-2xs);
    font-size: var(--m-font-body);
  }

  .social-card .card-tip {
    margin-top: var(--m-space-3xs);
    font-size: var(--m-font-sm);
    line-height: 1.4;
  }

  .social-card .qr {
    margin-top: var(--m-space-2xs);
  }

  .social-card .qr img {
    width: 22vw;
    height: 22vw;
    border-radius: 2vw;
  }

  .contact-form-card {
    height: auto;
    border-radius: var(--m-radius-md, 2.667vw);
    box-shadow: 0 0 2.667vw rgba(0, 0, 0, 0.1);
  }

  .form-corner {
    width: 3.2vw;
    height: 3.2vw;
  }

  .form-corner::after {
    width: 1.2vw;
    height: 1.2vw;
  }

  .form-corner-tl,
  .form-corner-tr {
    top: 2.667vw;
  }

  .form-corner-bl,
  .form-corner-br {
    bottom: 2.667vw;
  }

  .form-corner-tl,
  .form-corner-bl {
    left: 2.667vw;
  }

  .form-corner-tr,
  .form-corner-br {
    right: 2.667vw;
  }

  .contact-form-inner {
    flex-direction: column;
    gap: var(--m-gap-block);
    padding: var(--m-space-lg) var(--m-space-md);
  }

  .contact-form-intro {
    width: 100%;
    padding-top: 0;
    align-items: center;
    text-align: center;
  }

  .contact-form-intro .email-icon {
    width: 12vw;
  }

  .contact-form-intro .logo {
    width: 74.667vw;
    max-width: 100%;
    margin-top: var(--m-space-sm);
  }

  .contact-form-intro .intro-title {
    margin-top: var(--m-space-sm);
    font-size: var(--m-font-h2);
  }

  .contact-form-intro .intro-desc {
    display: inline-flex;
    flex-direction: column;
    margin-top: var(--m-space-xs);
    font-size: var(--m-font-sm);
    line-height: 1.6;
  }

  .contact-form {
    width: 100%;
  }

  .contact-form-intro.ky.fadeInLeft,
  .contact-form.ky.fadeInRight {
    animation-name: fadeInUp;
    -webkit-animation-name: fadeInUp;
  }

  .contact-form .form-row-cols {
    flex-direction: column;
    gap: var(--m-space-sm);
  }

  .contact-form .form-row {
    margin-bottom: var(--m-space-sm);
  }

  .contact-form .field-box {
    min-height: 10.667vw;
    padding: 0 var(--m-space-md);
    border-radius: var(--m-radius-sm, 1.6vw);
  }

  .contact-form .field-box label {
    margin-right: var(--m-space-sm);
    font-size: var(--m-font-sm);
  }

  .contact-form .field-box input,
  .contact-form .field-box textarea {
    font-size: var(--m-font-sm);
  }

  .contact-form .field-box.is-textarea {
    min-height: 32vw;
    padding: var(--m-space-sm);
  }

  .contact-form .field-box.is-textarea textarea {
    min-height: 24vw;
    box-sizing: border-box;
  }

  .contact-form .form-row:has(.is-textarea) {
    margin-bottom: var(--m-space-md);
  }

  .contact-form .form-actions {
    gap: var(--m-space-sm);
  }

  .contact-form .btn-submit,
  .contact-form .btn-reset {
    flex: 1;
    min-width: 0;
    height: var(--m-btn-h-sm);
    font-size: var(--m-font-sm);
    border-radius: var(--m-radius-xs, 1.067vw);
  }
}