.box-body-width {
  width: 62.5vw;
  position: relative;
  height: 100%;
}

h3 {
  font-weight: 500;
  font-size: 2.083vw;
  color: #171b2e;
}

.header {
  width: 100vw;
  height: 4.688vw;
  position: fixed;
  top: 0;
  left: 0;
  box-sizing: border-box;
  background-color: transparent;
  transition: background-color 0.3s ease;
  z-index: 999;
}

.header img {
  width: 10.156vw;
}

.header ul li {
  font-size: 0.833vw;
  color: #222b52;
  list-style-type: none;
  box-sizing: border-box;
  padding: 0 0.781vw;
  cursor: pointer;
}

.header ul li .text-hover-line {
  position: relative;
  display: inline-block;
  padding-bottom: 0.208vw;
  color: #222b52;
}

.header ul li .text-hover-line::after {
  content: "";
  position: absolute;
  width: 0;
  height: 0.156vw;
  bottom: 0;
  left: 50%;
  background-color: #457cff;
  transition: width 0.3s ease, left 0.3s ease;
}

.header ul li .text-hover-line:hover::after {
  width: 100%;
  left: 0;
}

.header .contact-btn {
  width: 8.125vw;
  height: 2.5vw;
  background: linear-gradient(135deg, #457cff 0%, #7dbcff 100%);
  border-radius: 1.25vw;
  font-weight: bold;
  font-size: 0.938vw;
  color: #ffffff;
  margin-left: 1.302vw;
  cursor: pointer;
}

.header.white-bg {
  background-color: #ffffff;
  box-shadow: 0 2px 0.417vw rgba(0, 0, 0, 0.1);
}

.htx-intro {
  width: 62.5vw;
  height: 59.583vw;
  background-image: url("/images/section-1-bg.png");
  background-size: 100% 57.448vw;
  background-repeat: no-repeat;
  box-sizing: border-box;
  padding-top: 4.688vw;
  margin: 0 auto;
}

.htx-intro h3 {
  font-size: 3.854vw;
  color: #222b52;
  margin: 0;
  line-height: 4.896vw;
  letter-spacing: 2px;
  font-weight: 400;
  text-align: center;
}

.htx-intro h3 strong {
  font-size: 4.688vw;
  color: #4bce73;
  line-height: 4.688vw;
  font-weight: 500;
}

.htx-intro .tabs {
  background: linear-gradient(270deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.8) 50%, rgba(255, 255, 255, 0) 100%);
  border-radius: 1.979vw;
  border: 1px solid #ffffff;
  margin: 1.042vw 0;
  box-sizing: border-box;
  padding: 0.208vw;
  cursor: pointer;
}

.htx-intro .tabs .tab-item {
  width: 11.615vw;
  height: 3.333vw;
  border-radius: 1.667vw;
  font-size: 1.25vw;
  color: #222b52;
  transition: background 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.htx-intro .tabs .tab-item.active {
  font-weight: bold;
  background: linear-gradient(135deg, #7dbcff 0%, #457cff 100%);
  color: #ffffff;
}

.htx-intro .platform {
  width: 31.823vw;
}

.htx-intro .group {
  width: 41.042vw;
  margin-left: 6.771vw;
}

.htx-data {
  width: 100%;
  height: 22.917vw;
  background-image: url("/images/section-2-bg.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.htx-data .ip {
  width: 15.885vw;
  height: 15.104vw;
  position: absolute;
  left: -5.729vw;
  top: -7.813vw;
}

.htx-data .right {
  flex: 1;
  align-items: flex-end;
}

.htx-data .right p {
  font-size: 0.938vw;
  color: #ffffff;
  text-indent: 1.875vw;
  line-height: 1.458vw;
  box-sizing: border-box;
  padding-left: 3.125vw;
}

.htx-data .right .data-box {
  width: 13.542vw;
  height: 6.927vw;
  background-color: #ffffff;
  border-radius: 1.458vw;
  margin: 1.042vw 0.521vw;
}

.htx-data .right .data-box label {
  font-size: 0.938vw;
  color: #222b52;
  margin-top: 0.521vw;
}

.htx-data .right .data-box div {
  font-size: 1.563vw;
  color: #ff3a47;
  box-sizing: border-box;
}

.htx-data .right .data-box div strong {
  font-weight: bold;
  font-size: 2.5vw;
  color: #ff3a47;
  line-height: 2.604vw;
}

.htx-data .left {
  width: 27.083vw;
  height: 100%;
}

.htx-data .left p {
  font-weight: 400;
  font-size: 2.083vw;
  color: #ffffff;
}

.box {
  width: 100%;
  overflow-x: hidden;
  position: relative;
  box-sizing: border-box;
  padding: 4.167vw 0;
}

.box.box-bg {
  background-color: #f4f9ff;
}

.box .round {
  width: 23.75vw;
  height: 23.75vw;
  background-color: #f2f6ff;
  border-radius: 100%;
  position: absolute;
  right: 2.083vw;
  top: 8.073vw;
}

.box .carbon-ground {
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 3;
  box-sizing: border-box;
  padding-top: 1.042vw;
}

.box .carbon-ground p {
  font-size: 1.25vw;
  color: #999fb9;
  margin-top: 1.042vw;
}

.box .carbon-ground .explain-box {
  margin-top: 2.604vw;
}

.box .carbon-ground .explain-box .left {
  margin-right: 6.771vw;
}

.box .carbon-ground .explain-box .left ul {
  list-style-type: none;
  margin-bottom: 3.125vw;
}

.box .carbon-ground .explain-box .left ul li {
  position: relative;
  padding-left: 1.042vw;
  font-size: 1.042vw;
  color: #5f678c;
  margin: 0.521vw 0;
}

.box .carbon-ground .explain-box .left ul li::before {
  content: "•";
  position: absolute;
  left: 0;
  color: #4bce73;
}

.box .carbon-ground .explain-box .left ul li strong {
  color: #ff3a47;
}

.box .carbon-ground .explain-box .left .options {
  width: 7.24vw;
  height: 7.292vw;
  border-radius: 0.833vw;
  margin: 0.521vw;
  cursor: pointer;
  transition: transform 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.box .carbon-ground .explain-box .left .options:hover {
  animation: scalePulse 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes scalePulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}

.box .carbon-ground .explain-box .left .options.bg1 {
  background: rgba(75, 206, 115, 0.08);
}

.box .carbon-ground .explain-box .left .options.bg2 {
  background: rgba(206, 136, 75, 0.07);
}

.box .carbon-ground .explain-box .left .options.bg3 {
  background: rgba(75, 108, 206, 0.08);
}

.box .carbon-ground .explain-box .left .options.bg4 {
  background: rgba(206, 153, 75, 0.08);
}

.box .carbon-ground .explain-box .left .options img {
  width: 2.292vw;
}

.box .carbon-ground .explain-box .left .options span {
  font-size: 1.042vw;
  color: #5f678c;
  margin-top: 0.521vw;
}

.box .carbon-ground .explain-box img {
  width: 23.542vw;
}

.box.certificate {
  background-image: url("/images/jiangbei.png");
  background-repeat: no-repeat;
  background-size: 21.875vw 100%;
  position: relative;
  box-sizing: border-box;
  padding-left: 10.417vw;
  height: 39.896vw;
}

.certificate .lr-mask {
  width: 10.417vw;
  height: 100%;
  filter: blur(0.885vw);
  position: absolute;
  top: 0;
  z-index: 3;
}

.certificate .lr-mask.left {
  left: 0;
  background: linear-gradient(90deg, #ffffff, rgba(255, 255, 255, 0));
}

.certificate .lr-mask.right {
  right: 0;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), #ffffff);
}

.carousel-container {
  position: relative;
  width: 62.5vw;
}

.carousel-container .carousel-wrapper {
  width: 100%;
  overflow: hidden;
  box-sizing: border-box;
  padding: 0.521vw 3.125vw;
}

.carousel-container .carousel-track {
  transition: transform 0.5s ease-in-out;
}

.carousel-container .carousel-track img {
  width: 11.51vw;
  height: auto;
  margin-right: 1.042vw;
  cursor: pointer;
  transition: transform 0.3s ease;
}

.carousel-container .carousel-track img:hover {
  transform: translateY(-5px);
}

.carousel-container .carousel-track img.lg {
  width: 16.875vw;
}

.carousel-container .carousel-btn {
  width: 3.125vw;
  height: 3.125vw;
  background: #ffffff;
  box-shadow: 0px 0.573vw 1.719vw 0px #e5e5e5;
  border-radius: 1.615vw;
  cursor: pointer;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 6;
  font-size: 1.042vw;
  transition: background 0.5s;
}

.carousel-container .carousel-btn.active {
  background: #4992ff;
  color: #ffffff;
}

.carousel-container .carousel-btn.prev-btn {
  left: -4.167vw;
}

.carousel-container .carousel-btn.next-btn {
  right: 6.25vw;
}

.partner .left-line {
  width: 10vw;
  height: 1px;
  background: linear-gradient(270deg, rgba(222, 222, 222, 1), rgba(200, 200, 200, 0));
}

.partner .right-line {
  width: 10vw;
  height: 1px;
  background: linear-gradient(270deg, rgba(200, 200, 200, 0), rgba(222, 222, 222, 1));
}

.partner h3 {
  margin: 1.042vw;
}

.partner img {
  width: 52.396vw;
  margin-bottom: 2.083vw;
}

.partner img.lg {
  width: 71.875vw;
  margin-bottom: 0;
}

.contact {
  width: 100%;
  background-color: #f4f9ff;
  box-sizing: border-box;
  padding: 4.167vw 0;
}

.contact .form-box {
  width: 50vw;
  background: #ffffff;
  box-shadow: 0px 0.469vw 1.563vw 0px #ecf4ff;
  border-radius: 0.625vw;
  margin-top: 1.042vw;
  box-sizing: border-box;
  padding: 1.563vw 2.604vw 1.042vw;
}

.contact .form-box label {
  font-weight: 500;
  font-size: 0.833vw;
  color: #000000;
}

.contact .form-box .form-item {
  width: 100%;
}

.contact .form-box .form-item input {
  width: 20.885vw;
  height: 2.917vw;
  border-radius: 0.625vw;
  border: 2px solid #dfdfdf;
  box-sizing: border-box;
  padding: 0.781vw;
  font-size: 0.833vw;
  color: #000000;
  margin-top: 0.781vw;
  margin-bottom: 1.563vw;
  cursor: pointer;
  transition: border-color 0.3s ease;
}

.contact .form-box .form-item input:focus {
  border: 2px solid #5b9cff;
}

.contact .form-box .form-item textarea {
  width: 100%;
  height: 6.25vw;
  border-radius: 0.625vw;
  border: 2px solid #dfdfdf;
  box-sizing: border-box;
  padding: 0.781vw;
  font-size: 0.833vw;
  color: #000000;
  margin-top: 0.781vw;
  margin-bottom: 2.083vw;
  resize: none;
  cursor: pointer;
  transition: border-color 0.3s ease;
}

.contact .form-box .form-item textarea:focus {
  border: 2px solid #5b9cff;
}

.contact .form-box .btn {
  width: 12.917vw;
  height: 3.125vw;
  background: linear-gradient(135deg, #7dbcff 0%, #457cff 100%);
  border-radius: 1.563vw;
  font-size: 0.938vw;
  color: #ffffff;
  cursor: pointer;
  margin-bottom: 1.563vw;
}

.closing-remarks {
  width: 100%;
  height: 10.729vw;
  background-image: url("/images/section-7-bg.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.closing-remarks h4 {
  font-weight: 500;
  font-size: 1.563vw;
  color: #ffffff;
}

.closing-remarks .join-btn {
  width: 12.917vw;
  height: 3.125vw;
  background: #ffffff;
  border-radius: 1.563vw;
  font-weight: 500;
  font-size: 1.042vw;
  color: #222b52;
  margin-top: 1.042vw;
}

.footer {
  width: 100%;
  background-color: #171e30;
  box-sizing: border-box;
  padding: 0 2.083vw;
}

.footer .beian {
  width: 100%;
  height: 4.167vw;
  border-top: 1px solid #ffffff;
}

.footer .beian span {
  font-size: 0.833vw;
  color: #666d81;
}

.footer .beian a {
  font-size: 0.833vw;
  color: #666d81;
  /* border-bottom: 1px solid #666d81; */
}

.footer .beian img {
  width: 1.563vw;
  height: 1.667vw;
}

.footer .info {
  width: 100%;
  box-sizing: border-box;
  padding: 3.125vw 0 1.563vw;
}

.footer .info .cell {
  margin: 0.417vw 0;
}

.footer .info img {
  width: 1.667vw;
  height: 1.667vw;
  margin-right: 0.417vw;
  cursor: pointer;
}

.footer .info strong {
  font-weight: 400;
  font-size: 1.302vw;
  color: #ffffff;
}

.footer .info img.lg {
  width: 2.5vw;
  height: 2.5vw;
}

.footer .info .htx-logo {
  width: 10.313vw;
  height: 4.896vw;
}

.footer .info p {
  width: 10.417vw;
  font-size: 0.833vw;
  line-height: 1.771vw;
  color: rgba(255, 255, 255, 0.8);
}

.footer .info p a {
  cursor: pointer;
  color: rgba(255, 255, 255, 0.8);
}

.float-right-box {
  width: 4.583vw;
  background-color: #ffffff;
  box-shadow: 0px 0.469vw 1.563vw 0px #ecf4ff;
  border-radius: 3.229vw;
  position: fixed;
  bottom: 2.083vw;
  right: 6.25vw;
  box-sizing: border-box;
  padding: 1.25vw 0;
  z-index: 200;
}

.float-right-box .item {
  width: 100%;
  height: 4.583vw;
  cursor: pointer;
}

.float-right-box .item img {
  width: 2.083vw;
  cursor: pointer;
}

.float-right-box .item span {
  font-size: 0.833vw;
  color: #222b52;
  margin-top: 0.26vw;
}

/* 头部下载二维码提示框样式 */
.qrcode-tooltip {
  width: fit-content;
  position: absolute;
  bottom: -9.896vw;
  left: 50%;
  transform: translateX(-50%) translateY(0.521vw);
  padding: 0.417vw;
  background-color: #ffffff;
  box-shadow: 0px 0.469vw 1.563vw 0px #ecf4ff;
  border-radius: 0.833vw;
  z-index: 10;
  visibility: hidden;
  opacity: 0;
  transition: visibility 0.3s ease, opacity 0.3s ease, transform 0.3s ease;
}

.qrcode-tooltip.dl-qrcode-tooltip-remarks {
  bottom: 90%;
}

.qrcode-tooltip.qrcode-tooltip-footer-gzh,
.qrcode-tooltip.qrcode-tooltip-footer-xhs,
.qrcode-tooltip.qrcode-tooltip-footer-dy {
  transform: translateX(0%) translateY(-1.042vw);
  bottom: 90%;
  box-shadow: none;
  left: 0;
}

.qrcode-tooltip-float-app,
.qrcode-tooltip-float-gzh,
.qrcode-tooltip-float-mini {
  top: 00%;
  left: -180%;
  transform: translateY(4%) translateX(-1.042vw);
  height: fit-content;
}

.qrcode-tooltip img {
  width: 7.292vw !important;
  height: 7.292vw !important;
  border-radius: 0.208vw;
  margin: 0 !important;
}

.qrcode-tooltip p {
  width: fit-content !important;
  margin-top: 0.26vw;
  font-size: 0.729vw !important;
  color: #171b2e !important;
  text-align: center;
}