@charset "UTF-8";
/*
  pxTovw
  750：设计稿宽度
  $px：元素在设计稿上的宽度
*/
.online-service {
  background: url("../../assets/support/online.png") no-repeat center top;
  margin: 44px auto 0;
  background-size: auto 1500px;
}
.online-service .main {
  width: 1188px;
  margin: 0 auto;
}
.online-service .main .intro {
  width: 459px;
  height: 660px;
  margin-top: 40px;
  background: #ffffff url("../../assets/support/intro-bg-pc.png") no-repeat center center/100% 100%;
}
.online-service .main .content {
  margin-top: 40px;
  width: 742px;
  background: #fff;
  padding: 40px 60px 50px;
}
.online-service .main .content .tabs .tabs-content .tabs-group {
  cursor: pointer;
  width: 294px;
  display: flex;
  align-items: center;
  margin: 0 auto;
}
.online-service .main .content .tabs .tabs-content .tabs-group .wrap {
  width: 147px;
  height: 47px;
  background: #ededed;
  transform: skewX(-25deg);
  line-height: 47px;
  text-align: center;
  font-size: 16px;
  font-weight: 400;
  color: #000000;
}
.online-service .main .content .tabs .tabs-content .tabs-group .wrap .innerwrap {
  transform: skewX(25deg);
}
.online-service .main .content .tabs .tabs-content .tabs-group .active {
  width: 147px;
  height: 47px;
  background: #0149bf;
  line-height: 47px;
  text-align: center;
  font-size: 16px;
  font-weight: 600;
  color: #ffffff;
}
.online-service .main .content .tabs .tabs-content .panelA .contact-box .wx-contact .top {
  background: url("../../assets/support/icon-wechat.png") no-repeat center left;
  background-size: 20px 17px;
  margin-top: 40px;
}
.online-service .main .content .tabs .tabs-content .panelA .contact-box .qq-contact .top {
  height: 24px;
  line-height: 24px;
  background: url("../../assets/support/icon-QQ.png") no-repeat center left;
  background-size: 18px 20px;
}
.online-service .main .content .tabs .tabs-content .panelA .contact-box .email-contact .top {
  background: url("../../assets/support/icon-email.png") no-repeat center left;
  background-size: 20px 16px;
}
.online-service .main .content .tabs .tabs-content .panelA .contact-box .top {
  text-indent: 25px;
  font-size: 16px;
  margin-bottom: 20px;
  margin-top: 20px;
  font-weight: 600;
  color: #0149bf;
}
.online-service .main .content .tabs .tabs-content .panelA .contact-box .partment {
  font-size: 14px;
  font-weight: 400;
  color: #000000;
  margin-bottom: 10px;
}
.online-service .main .content .tabs .tabs-content .panelA .contact-box .ercode {
  margin-right: 50px;
  margin-bottom: 20px;
  text-align: center;
}
.online-service .main .content .tabs .tabs-content .panelA .contact-box .ercode img {
  width: 140px;
  height: 140px;
}
.online-service .main .content .tabs .tabs-content .panelA .contact-box .ercode span {
  margin-top: 10px;
  font-size: 12px;
  font-weight: 400;
  color: #717171;
}
.online-service .main .content .tabs .tabs-content .panelA .contact-box .email-contact .contacts {
  font-size: 14px;
  font-weight: 400;
  color: #010101;
}
.online-service .main .content .tabs .tabs-content .panelA .contact-box .email-contact .contacts p:first-child {
  margin-bottom: 7px;
}
.online-service .main .content .tabs .tabs-content .panelA .contact-box .email-contact .contacts a {
  font-size: 14px;
  font-weight: 400;
  color: #010101;
  text-decoration: none;
}
.online-service .main .content .tabs .tabs-content .panelA .contact-box .email-contact .contacts .service_url {
  color: #0149bf;
  margin-left: 5px;
}
.online-service .main .content .tabs .tabs-content .panelB {
  position: relative;
  width: 100%;
  margin: 40px auto 0;
  font-size: 22px;
  font-weight: 400;
  color: #000000;
}
.online-service .main .content .tabs .tabs-content .panelB .message-box .el-form-item {
  font-size: 22px;
  font-weight: 400;
  color: #000000;
}
.online-service .main .content .tabs .tabs-content .panelB .message-box .el-form-item :deep(.el-input__inner) {
  border-radius: 0;
}
.online-service .main .content .tabs .tabs-content .panelB .message-box .el-form-item :deep(.el-textarea__inner) {
  border-radius: 0;
}
.online-service .main .content .send-box {
  position: relative;
  display: flex;
  justify-content: flex-end;
}
.online-service .main .content .send-box .send-btn {
  position: absolute;
  width: 250px;
  height: 60px;
  line-height: 60px;
  text-align: center;
  background: #4bab26;
  color: #fff;
  font-size: 17px;
  font-weight: 400;
  cursor: pointer;
}
.online-service .main .content .send-box .send-btn img {
  width: 25px;
  display: inline-block;
  margin-left: 5px;
  vertical-align: middle;
  margin-top: -5px;
}

.height-800 {
  height: 710px;
}

.height-1200 {
  height: 1400px;
}

.message-bg {
  background: url("../assets/support/message.png") no-repeat center top;
  background-size: 1920px 827px;
}
.message-bg .main {
  margin-bottom: 77px;
}

#map-container {
  background: url("../assets/support/pc-map.png") no-repeat center center;
  background-size: cover;
  width: var(--0c6426a8);
  height: var(--6651b485);
}

.ercode-bg {
  height: 1500px;
}

@media screen and (max-width: 750px) {
  .height-800 {
    height: auto;
  }
  .height-1200 {
    height: auto;
  }
  .message-bg {
    height: auto;
    background: none;
  }
  .ercode-bg {
    height: auto;
  }
  .online-service {
    background: none;
    margin-top: 5.3333333333vw;
  }
  .online-service .main {
    width: 100%;
    display: flex;
    overflow: hidden;
    flex-direction: column-reverse;
    margin-bottom: 0;
  }
  .online-service .main .content {
    width: 100%;
    margin-top: 0;
    padding: 0vw;
  }
  .online-service .main .content .tabs {
    width: 100%;
  }
  .online-service .main .content .tabs .tabs-content {
    width: 100%;
  }
  .online-service .main .content .tabs .tabs-content .tabs-group {
    width: 48vw;
  }
  .online-service .main .content .tabs .tabs-content .tabs-group .wrap {
    width: 24vw;
    height: 9.0666666667vw;
    line-height: 9.0666666667vw;
    font-size: 3.7333333333vw;
    font-weight: 400;
  }
  .online-service .main .content .tabs .tabs-content .tabs-group .active {
    font-size: 4vw;
    font-weight: 500;
  }
  .online-service .main .content .tabs .tabs-content .panelA {
    width: 100%;
    height: 241.6vw;
    background: url("../../assets/support/online-mobile-bg.png") no-repeat center;
    background-size: 100% 241.6vw;
    margin: 5.3333333333vw auto 0;
    padding: 5.3333333333vw;
    width: 100%;
  }
  .online-service .main .content .tabs .tabs-content .panelA .contact-box {
    background: #fff;
    display: flex;
    flex-direction: column;
    padding: 5.3333333333vw;
  }
  .online-service .main .content .tabs .tabs-content .panelA .contact-box .partment {
    font-size: 3.7333333333vw;
    margin-bottom: 2.6666666667vw;
  }
  .online-service .main .content .tabs .tabs-content .panelA .contact-box .ercode:last-child {
    margin-right: 0;
  }
  .online-service .main .content .tabs .tabs-content .panelA .contact-box .ercode {
    height: 28.5333333333vw;
    width: 21.3333333333vw;
    margin-right: 7.4666666667vw;
    margin-bottom: 2.6666666667vw;
    text-align: center;
  }
  .online-service .main .content .tabs .tabs-content .panelA .contact-box .ercode img {
    width: 21.3333333333vw;
    height: 21.3333333333vw;
    margin-bottom: 2.6666666667vw;
  }
  .online-service .main .content .tabs .tabs-content .panelA .contact-box .ercode span {
    font-size: 3.2vw;
  }
  .online-service .main .content .tabs .tabs-content .panelA .contact-box .wx-contact .top {
    text-indent: 8vw;
    margin-top: 2.6666666667vw;
    font-size: 3.7333333333vw;
    font-weight: 500;
    color: #0149bf;
    background: url("../../assets/support/icon-wechat-mobile.png") no-repeat left center;
    background-size: auto 4.8vw;
  }
  .online-service .main .content .tabs .tabs-content .panelA .contact-box .qq-contact .top {
    text-indent: 8vw;
    margin-top: 2.6666666667vw;
    font-size: 3.7333333333vw;
    height: 4.8vw;
    line-height: 4.8vw;
    font-weight: 500;
    color: #0149bf;
    background: url("../../assets/support/icon-QQ-mobile.png") no-repeat left center;
    background-size: auto 4.8vw;
  }
  .online-service .main .content .tabs .tabs-content .panelA .contact-box .email-contact .top {
    text-indent: 8vw;
    margin-top: 0vw;
    font-size: 3.7333333333vw;
    font-weight: 500;
    color: #0149bf;
    background: url("../../assets/support/icon-email-mobile.png") no-repeat left center;
    background-size: auto 4.2666666667vw;
  }
  .online-service .main .content .tabs .tabs-content .panelA .contact-box .email-contact .contacts a {
    font-size: 3.7333333333vw;
  }
  .online-service .main .content .tabs .tabs-content .panelA .contact-box .email-contact .contacts p {
    margin-top: 1.6vw;
    font-size: 3.7333333333vw;
  }
  .online-service .main .content .tabs .tabs-content .panelB {
    width: 100%;
    height: auto;
    min-height: 360px;
    background: url("../../assets/support/message-mobile-bg.png") no-repeat center;
    background-size: 100% 100%;
    margin-top: 5.3333333333vw;
    padding: 5.3333333333vw;
  }
  .online-service .main .content .tabs .tabs-content .panelB :deep(.el-form-item .el-form-item__label) {
    font-weight: 3.7333333333vw;
    font-weight: 500;
    color: #000000;
  }
  .online-service .main .content .tabs .tabs-content .panelB .message-box {
    margin-bottom: 10.6666666667vw;
    padding: 5.3333333333vw 6.6666666667vw;
    background: #fff;
  }
  .online-service .main .content .tabs .tabs-content .panelB .message-box .send-box {
    position: relative;
    height: 10.6666666667vw;
    display: flex;
    justify-content: flex-end;
  }
  .online-service .main .content .tabs .tabs-content .panelB .message-box .send-box .send-btn {
    position: absolute;
    width: 38.6666666667vw;
    height: 10.9333333333vw;
    right: -9.3333333333vw;
    font-size: 4.2666666667vw;
    line-height: 10.9333333333vw;
  }
  .online-service .main .content .tabs .tabs-content .panelB .message-box .send-box .send-btn img {
    margin-left: 2.6666666667vw;
    width: 5.3333333333vw;
    height: 5.3333333333vw;
  }
  .online-service .main .intro {
    width: 100%;
    height: 136.5333333333vw;
    margin: 0;
    background: #ffffff url("../../assets/support/intro-bg-mobile.png") no-repeat center center/89.6vw 125.8666666667vw;
  }
}
.footer .container {
  overflow: hidden;
}