﻿.page-container {
  position: relative;
}

.page-container h1 {
  font-size: 2.34375vw;
  font-weight: bold;
  line-height: 3.541667vw;
  color: #282828;
  text-align: center;
  padding: 4.947917vw 0 3.645833vw;
  margin: 0;
}

.page-container .form-wrap {
  width: 47.395833vw;
  background: #fff;
  box-shadow: 0 0 2.083333vw 0 #D4D4D4;
  padding: 3.645833vw 2.083333vw;
  margin: 0 auto 5.15625vw;
  box-sizing: border-box;
}

.page-container .form-wrap .form-disc {
  font-size: 0.9375vw;
  line-height: 1.822917vw;
  color: #666;
  margin-bottom: 1.041667vw;
}

.page-container .form-wrap .form-section {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-bottom: 1.5625vw;
}

.page-container .form-wrap .form-section:nth-of-type(2) {
  margin-bottom: 0;
}

.page-container .form-wrap .form-section .section-title {
  width: 100%;
  font-size: 0.9375vw;
  line-height: 1.354167vw;
  color: #282828;
  margin-bottom: 0.833333vw;
}

.page-container .form-wrap .form-section .section-title span {
  color: #C7000B;
}

.page-container .form-wrap .form-section .radio-group {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.page-container .form-wrap .form-section .radio-group .radio-item {
  display: flex;
  align-items: center;
  font-size: 0.9375vw;
  line-height: 1.197917vw;
  color: #333;
  margin-bottom: 0.677083vw;
}

.page-container .form-wrap .form-section .radio-group .radio-item:last-of-type {
  margin-bottom: 0;
}

.page-container .form-wrap .form-section .radio-group .radio-item input[type="radio"] {
  width: 0.833333vw;
  height: 0.833333vw;
  accent-color: #C7000B;
  margin: 0 0.260417vw 0 0;
}

.page-container .form-wrap .form-section .input-group {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.page-container .form-wrap .form-section .input-group.w-50 {
  width: 18.489583vw;
}

.page-container .form-wrap .form-section .input-group.hidden-input {
  display: none;
}

.page-container .form-wrap .form-section .input-group label {
  width: 100%;
  font-size: 0.9375vw;
  line-height: 1.354167vw;
  color: #282828;
  margin-bottom: 0.3125vw;
}

.page-container .form-wrap .form-section .input-group label span {
  color: #C7000B;
}

.page-container .form-wrap .form-section .input-group select {
    height: 2.5vw;
    font-size: 0.9375vw;
    border: 1px solid #d4d4d4;
    padding: 0 1.40625vw 0 0.520833vw;
    margin-bottom: 1.5625vw;
    background-color: #fff;
    color: #333;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("https://auto.huawei.com/marketingcloud/pep/asset//20000004/yw-dsr/img/icon_03.png");
    background-repeat: no-repeat;
    background-position: right 0.520833vw center;
    background-size: 0.416667vw 0.260417vw;
    border-radius: 6px !important;
}

.page-container .form-wrap .form-section .input-group select:disabled {
    background-color: #f1f1f1;
}

  .page-container .form-wrap .form-section .input-group input[type="text"],
  .page-container .form-wrap .form-section .input-group input[type="email"] {
  height: 2.5vw;
  font-size: 0.9375vw;
  border: 1px solid #d4d4d4;
  padding: 0 0.520833vw;
  margin-bottom: 1.5625vw;
}

.page-container .form-wrap .form-section .input-group textarea {
  height: 5.9375vw;
  font-size: 0.9375vw;
  border: 1px solid #d4d4d4;
  padding: 0.3125vw 0.572917vw;
  margin-bottom: 0.260417vw;
  resize: none;
}

.page-container .form-wrap .form-section .input-group .input_ctrl {
  display: flex;
  justify-content: flex-end;
  font-size: 0.9375vw;
}

.page-container .form-wrap .form-section .input-group .input_ctrl.num-error {
  color: #C7000B;
}

.page-container .form-wrap .form-section .input-group .captcha-wrapper {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.page-container .form-wrap .form-section .input-group .captcha-wrapper #captchaInput {
  width: 18.489583vw;
  margin-right: 0.78125vw;
  margin-bottom: 0;
}

.page-container .form-wrap .form-section .input-group .captcha-wrapper .validatecode-img-box {
  width: 6.25vw;
  margin-right: 0.78125vw;
  cursor: pointer;
}

.page-container .form-wrap .form-section .input-group .captcha-wrapper .validatecode-img-refresh {
  width: 1.145833vw;
  height: 1.145833vw;
  background: url("https://auto.huawei.com/marketingcloud/pep/asset//20000004/yw-dsr/img/icon_02.png") no-repeat;
  background-size: 100% 100%;
}

.page-container .form-wrap .form-section .error {
  position: relative;
  width: 100%;
  font-size: 0.729167vw;
  font-weight: bold;
  line-height: 1.041667vw;
  color: #C7000B;
  padding-left: 1.666667vw;
  margin-top: 0.520833vw;
  margin-bottom: 1.5625vw;
}

.page-container .form-wrap .form-section .error::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  width: 0.989583vw;
  height: 0.78125vw;
  background: url("https://auto.huawei.com/marketingcloud/pep/asset//20000004/yw-dsr/img/icon_01.png") no-repeat;
  background-size: 100% 100%;
}

.page-container .form-wrap .form-section #part1_radio-error,
.page-container .form-wrap .form-section #part3_radio-error,
.page-container .form-wrap .form-section #captchaInput-error {
  margin-bottom: 0;
}

.page-container .form-wrap .form-section #description-error {
  margin-top: 0;
  margin-bottom: 0;
}

.page-container .form-wrap .form-section .input-error {
  border-color: #C7000B !important;
  margin-bottom: 0 !important;
}

.page-container .form-wrap .submit-btn {
  display: flex;
  width: fit-content;
  font-size: 0.833333vw;
  line-height: 1.979167vw;
  color: #111;
  border: 1px solid #111;
  padding: 0.052083vw 3.645833vw;
  background: #fff;
  margin: 4.166667vw auto 0;
  border-radius: 6px !important;
}

.page-container .form-wrap .submit-btn:hover {
  color: #fff;
  background: #c7000b;
  border: 1px solid #c7000b;
  cursor: pointer;
}

.page-container .feedback-container {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1040;
}

.page-container .feedback-container .feedback-box {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 31.25vw;
  background: #fff;
  box-shadow: 0 0.260417vw 0.78125vw rgba(0, 0, 0, .5);
  padding: 2.166667vw 2.604167vw 1.604167vw;
  box-sizing: border-box;
}

.page-container .feedback-container .feedback-box .feedback-txt {
  font-size: 0.9375vw;
  line-height: 1.197917vw;
}

.page-container .feedback-container .feedback-box .feedback-close {
  position: absolute;
  top: 0.520833vw;
  right: 0.520833vw;
  font-size: 1.09375vw;
  line-height: 1;
  opacity: 0.5;
  border: none;
  background: none;
}

.page-container .feedback-container .feedback-box .feedback-close:hover {
  opacity: 1;
}

@media (max-width: 1200px) {
  .page-container h1 {
    font-size: 3.90625vw;
    line-height: 5.859375vw;
    padding: 6.835938vw 0;
  }

  .page-container .form-wrap {
    width: 88.085938vw;
    padding: 6.835938vw 3.90625vw;
    margin: 0 auto 9.765625vw;
  }

  .page-container .form-wrap .form-disc {
    font-size: 1.757813vw;
    line-height: 3.417969vw;
    margin-bottom: 2.929688vw;
  }

  .page-container .form-wrap .form-section {
    margin-bottom: 2.929688vw;
  }

  .page-container .form-wrap .form-section .section-title {
    font-size: 1.5625vw;
    line-height: 2.231445vw;
    margin-bottom: 0.833333vw;
  }

  .page-container .form-wrap .form-section .radio-group .radio-item {
    font-size: 1.5625vw;
    line-height: 1.953125vw;
    margin-bottom: 1.464844vw;
  }

  .page-container .form-wrap .form-section .radio-group .radio-item input[type="radio"] {
    width: 1.5625vw;
    height: 1.5625vw;
    margin: 0 0.488281vw 0 0;
  }

  .page-container .form-wrap .form-section .input-group.w-50 {
    width: 34.179688vw;
  }

  .page-container .form-wrap .form-section .input-group label {
    font-size: 1.5625vw;
    line-height: 2.205078vw;
    margin-bottom: 0.488281vw;
  }

  .page-container .form-wrap .form-section .input-group input[type="text"],
  .page-container .form-wrap .form-section .input-group input[type="email"],
  .page-container .form-wrap .form-section .input-group select {
    height: 4.6875vw;
    font-size: 1.5625vw;
    padding: 0 0.976563vw;
    margin-bottom: 2.929688vw;
  }

  .page-container .form-wrap .form-section .input-group select {
    padding: 0 2.604167vw 0 0.976563vw;
    background-size: 1.5625vw auto;
  }

  .page-container .form-wrap .form-section .input-group textarea {
    height: 11.132813vw;
    font-size: 1.5625vw;
    padding: 0.488281vw 0.976563vw;
    margin-bottom: 0.260417vw;
  }

  .page-container .form-wrap .form-section .input-group .input_ctrl {
    font-size: 1.5625vw;
  }

  .page-container .form-wrap .form-section .input-group .captcha-wrapper #captchaInput {
    width: 34.179688vw;
    margin-right: 1.464844vw;
  }

  .page-container .form-wrap .form-section .input-group .captcha-wrapper .validatecode-img-box {
    width: 11.71875vw;
    margin-right: 0.976563vw;
  }

  .page-container .form-wrap .form-section .input-group .captcha-wrapper .validatecode-img-refresh {
    width: 2.148438vw;
    height: 2.148438vw;
  }

  .page-container .form-wrap .form-section .error {
    font-size: 1.3625vw;
    line-height: 1.753125vw;
    padding-left: 2.333333vw;
    margin-top: 1.520833vw;
    margin-bottom: 2.929688vw;
  }

  .page-container .form-wrap .form-section .error::before {
    width: 1.989583vw;
    height: 1.5vw;
  }

  .page-container .form-wrap .submit-btn {
    font-size: 1.367188vw;
    line-height: 3.710938vw;
    padding: 0 6.645833vw;
    margin: 7.8125vw auto 0;
    background: #fff;
  }

  .page-container .feedback-container .feedback-box {
    width: 45.25vw;
    padding: 5.166667vw 3.604167vw 3.604167vw;
  }

  .page-container .feedback-container .feedback-box .feedback-txt {
    font-size: 1.5625vw;
    line-height: 1.953125vw;
  }

  .page-container .feedback-container .feedback-box .feedback-close {
    top: 1.520833vw;
    right: 1.520833vw;
    font-size: 2.09375vw;
  }
  input::placeholder {
      font-family: "微软雅黑";
  }
}

@media (max-width: 640px) {
  .page-container h1 {
    font-size: 8.96vw;
    line-height: 13.44vw;
    padding: 9.333333vw 0;
  }

  .page-container .form-wrap {
    width: 92vw;
    box-shadow: 0 0 10.666667vw #d4d4d4;
    padding: 18.666667vw 6.4vw;
    margin: 0 auto 26.666667vw;
  }

  .page-container .form-wrap .form-disc {
    font-size: 4.106667vw;
    line-height: 8vw;
    margin: 0 0 5.333333vw;
  }

  .page-container .form-wrap .form-section {
    margin-bottom: 8vw;
  }

  .page-container .form-wrap .form-section .section-title {
    font-size: 3.733333vw;
    line-height: 5.7vw;
    margin-bottom: 1.333333vw;
  }

  .page-container .form-wrap .form-section .radio-group .radio-item {
    font-size: 4.106667vw;
    line-height: 5.133333vw;
    margin-bottom: 4vw;
  }

  .page-container .form-wrap .form-section .radio-group .radio-item input[type="radio"] {
    width: 4.266667vw;
    height: 4.266667vw;
    margin: 0 1.333333vw 0 0;
  }

  .page-container .form-wrap .form-section .input-group.w-50 {
    width: 100%;
  }

  .page-container .form-wrap .form-section .input-group label {
    font-size: 3.733333vw;
    line-height: 5.7vw;
    margin-bottom: 1.333333vw;
  }

  .page-container .form-wrap .form-section .input-group input[type="text"],
  .page-container .form-wrap .form-section .input-group input[type="email"],
  .page-container .form-wrap .form-section .input-group select {
    height: 12.8vw;
    font-size: 3.733333vw;
    padding: 0 2.666667vw;
    margin-bottom: 8vw;
  }

  .page-container .form-wrap .form-section .input-group select {
    padding: 0 6.4vw 0 2.666667vw;
    background-size: 3.733333vw auto;
  }

  .page-container .form-wrap .form-section .input-group textarea {
    height: 30.4vw;
    font-size: 3.733333vw;
    padding: 1.333333vw 2.666667vw;
    margin-bottom: 0;
  }

  .page-container .form-wrap .form-section .input-group .input_ctrl {
    font-size: 3.733333vw;
  }

  .page-container .form-wrap .form-section .input-group .captcha-wrapper {
    flex-wrap: wrap;
  }

  .page-container .form-wrap .form-section .input-group .captcha-wrapper #captchaInput {
    width: 100%;
    margin-right: 0;
  }

  .page-container .form-wrap .form-section .input-group .captcha-wrapper .validatecode-img-box {
    width: 32vw;
    margin-top: 4vw;
    margin-right: 2.666667vw;
  }

  .page-container .form-wrap .form-section .input-group .captcha-wrapper .validatecode-img-refresh {
    width: 5.866667vw;
    height: 5.866667vw;
    margin-top: 4vw;
  }

  .page-container .form-wrap .form-section .error {
    font-size: 3.733333vw;
    line-height: 5.7vw;
    padding-left: 7.333333vw;
    margin-top: 3vw;
    margin-bottom: 8vw;
  }

  .page-container .form-wrap .form-section .error::before {
    width: 5.5vw;
    height: 4.5vw;
  }

  .page-container .form-wrap .submit-btn {
    font-size: 3.266667vw;
    line-height: 8vw;
    padding: 0 14.645833vw;
    margin: 21.333333vw auto 0;
    background: #fff;
  }

  .page-container .feedback-container .feedback-box {
    width: 90%;
    padding: 12.166667vw 5.604167vw 6.604167vw;
  }

  .page-container .feedback-container .feedback-box .feedback-txt {
    font-size: 4.106667vw;
    line-height: 5.133333vw;
  }

  .page-container .feedback-container .feedback-box .feedback-close {
    top: 2.520833vw;
    right: 2.520833vw;
    font-size: 6.09375vw;
  }
}