@charset "UTF-8";
/**公共样式*/
body {
  background-color: #f8f8f8;
}

.contact__title {
  text-align: center;
  padding: 5.71rem 0 4.29rem;
}

#map-box {
  height: 57rem;
}

.contact {
  background-color: #f8f8f8;
}

.contact__company-card {
  background-color: #fff;
  display: flex;
  min-height: 32.86rem;
  margin-bottom: 4.29rem;
}
.contact__company-card .contact__company-left {
  padding: 3rem 3rem 5rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.contact__company-card .contact__company-right {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 3rem;
  color: #fff;
}
.contact__company-card .contact__company-title {
  font-size: 2rem;
  font-weight: bold;
}
.contact__company-card .contact__company-tips {
  font-size: 1.14rem;
  color: #999;
}
.contact__company-card .contact__company-right {
  flex: 1;
  background: var(--bg-img-url) no-repeat center center/cover;
}
.contact__company-card .contact__company-qrcode {
  display: flex;
  justify-content: space-between;
  gap: 2rem;
}
.contact__company-card .contact__company-qrcode-img {
  width: 11.29rem;
  height: 11.29rem;
}
.contact__company-card .contact__company-qrcode-name {
  color: #999;
  font-size: 1.14rem;
  text-align: center;
  margin-top: 0.5rem;
}
.contact__company-card .contact__company-label {
  font-size: 1.14rem;
}
.contact__company-card .contact__company-value {
  font-size: 1.71rem;
}
.contact__company-card .contact__company-value--tel {
  font-size: 2.86rem;
  font-weight: bold;
}
.contact__company-card .contact__company-info--tel {
  padding-bottom: 3rem;
  position: relative;
}
.contact__company-card .contact__company-info--tel::after {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  bottom: 0;
  height: 1px;
  background: #fff;
  opacity: 0.2;
}

.contact__map {
  height: 57.14rem;
  background-color: #fff;
  position: relative;
}
.contact__map .contact__title--address {
  position: absolute;
  width: 100%;
  z-index: 99;
  text-align: center;
  background: linear-gradient(to bottom, #fff 50%, transparent 100%);
  padding: 5.71rem 0 12rem;
}

.contact__address {
  height: 34.29rem;
  background: var(--bg-img-url) no-repeat center center/cover;
}
.contact__address .contact__address-inner {
  display: flex;
  height: 100%;
}
.contact__address .contact__address-left {
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 52rem;
}
.contact__address .contact__address-info-label {
  font-size: 1rem;
  opacity: 0.8;
}
.contact__address .contact__address-info-value {
  font-size: 1.43rem;
}
.contact__address .contact__address-right {
  flex: 1;
  background-color: #fff;
  position: relative;
  height: 42rem;
  margin-top: -7.71rem;
  box-shadow: 0rem 0rem 2rem 0rem rgba(0, 0, 0, 0.05);
  padding: 4rem 3.57rem;
  z-index: 2000;
}
.contact__address .contact__form {
  display: flex;
  flex-direction: column;
  gap: 2.14rem;
}
.contact__address .contact__form-item {
  padding: 1.36rem 1.36rem;
  background-color: #f8f8f8;
}
.contact__address .contact__input {
  outline: none;
  border: none;
  width: 100%;
  font-size: 1.14rem;
  background: none;
}
.contact__address .contact__textarea {
  height: 11.4rem;
}
.contact__address .contact__form-submit {
  width: 14.29rem;
  height: 4.29rem;
  line-height: 4.29rem;
  color: #fff;
  outline: none;
  border: none;
  background-color: #0061b4;
  flex-shrink: 0;
}
.contact__address .contact__form-item--foot {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  background: none;
  padding: 0;
}
.contact__address .contact__code {
  background-color: #f8f8f8;
  padding: 0 1rem;
}

.img-jxw {
  width: 400px;
  height: auto;
  object-fit: contain;
  transform: translatey(-20%) translateX(22%);
}

@media (max-width: 768px) {
  .img-jxw {
    width: auto;
    height: 58%;
    object-fit: contain;
    transform: translateY(68%) translateX(-6%);
  }
  body {
    background-color: #f8f8f8;
  }
  .contact__title {
    text-align: center;
    padding: 15rem 0 10rem;
  }
  #map-box {
    height: 320rem;
  }
  .contact {
    background-color: #f8f8f8;
  }
  .contact__company-card {
    background-color: #f8f8f8;
    display: flex;
    flex-direction: column;
    min-height: 32.86rem;
    margin-bottom: 4.29rem;
  }
  .contact__company-card .contact__company-left {
    padding: 15rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background: #fff;
  }
  .contact__company-card .contact__company-right {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 15rem;
    color: #fff;
  }
  .contact__company-card .contact__company-title {
    font-size: 15rem;
    font-weight: bold;
  }
  .contact__company-card .contact__company-tips {
    font-size: 12rem;
    color: #999;
    margin: 5rem 0;
  }
  .contact__company-card .contact__company-right {
    flex: 1;
    background: var(--bg-img-url) no-repeat center center/cover;
    display: flex;
    flex-direction: column;
    gap: 20rem;
  }
  .contact__company-card .contact__company-qrcode {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
    margin-top: 17.5rem;
  }
  .contact__company-card .contact__company-qrcode-item {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .contact__company-card .contact__company-qrcode-img {
    width: 93rem;
    height: 93rem;
  }
  .contact__company-card .contact__company-qrcode-name {
    color: #999;
    font-size: 11rem;
    text-align: center;
    margin: 10rem 0;
  }
  .contact__company-card .contact__company-label {
    font-size: 12rem;
  }
  .contact__company-card .contact__company-value {
    font-size: 14rem;
    margin: 5rem 0;
  }
  .contact__company-card .contact__company-value--tel {
    font-size: 24rem;
    font-weight: bold;
  }
  .contact__company-card .contact__company-info--tel {
    padding-bottom: 3rem;
    position: relative;
  }
  .contact__company-card .contact__company-info--tel::after {
    content: "";
    display: block;
    position: absolute;
    width: 100%;
    bottom: 0;
    height: 1px;
    background: #fff;
    opacity: 0.2;
  }
  .contact__map {
    height: 640rem;
    background-color: #f8f8f8;
    position: relative;
    margin-top: 35rem;
  }
  .contact__map .contact__title--address {
    position: absolute;
    width: 100%;
    z-index: 99;
    text-align: center;
    background: linear-gradient(to bottom, #fff 50%, transparent 100%);
    padding: 15rem 0 12rem;
    height: 100rem;
  }
  .contact__address {
    height: 277rem;
    background: var(--bg-img-url) no-repeat center center/cover;
  }
  .contact__address .contact__address-inner {
    display: flex;
    flex-direction: column-reverse;
    height: 100%;
    position: relative;
  }
  .contact__address .contact__address-left {
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 15rem;
    flex: 1;
    width: 100%;
  }
  .contact__address .contact__address-info-label {
    font-size: 12rem;
    opacity: 0.8;
    margin-bottom: 5rem;
  }
  .contact__address .contact__address-info-value {
    font-size: 13rem;
  }
  .contact__address .contact__address-right {
    flex: 1;
    background-color: #fff;
    position: absolute;
    height: 312rem;
    box-shadow: 0rem 0rem 2rem 0rem rgba(0, 0, 0, 0.05);
    padding: 20rem 15rem;
    z-index: 2000;
    top: -400rem;
    left: 10rem;
    right: 10rem;
  }
  .contact__address .contact__form {
    display: flex;
    flex-direction: column;
    gap: 14rem;
  }
  .contact__address .contact__form-item {
    padding: 15rem;
    background-color: #f8f8f8;
  }
  .contact__address .contact__input {
    outline: none;
    border: none;
    width: 100%;
    font-size: 12rem;
    background: none;
  }
  .contact__address .contact__textarea {
    height: 110rem;
  }
  .contact__address .contact__form-submit {
    width: 135rem;
    height: 44.5rem;
    line-height: 44.5rem;
    color: #fff;
    outline: none;
    border: none;
    background-color: #0061b4;
    flex-shrink: 0;
    font-size: 15rem;
    margin: 30rem 0;
  }
  .contact__address .contact__form-item--foot {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    background: none;
    padding: 0;
  }
  .contact__address .contact__code {
    background-color: #f8f8f8;
    padding: 0 1rem;
  }
}

/*# sourceMappingURL=contactUs.css.map */