html,
body {
  width: 100vw;
  /* height: 100%; */
  margin: 0;
  padding: 0;
  background: linear-gradient(180deg, #ffffff 0%, #f0f2f5 100%);
  /* overflow-x: hidden; */
}

::-webkit-scrollbar {
  width: 4px;
  height: 4px;
}
::-webkit-scrollbar-thumb {
  border-radius: 5px;
  -webkit-box-shadow: inset e e 5px rgba(e, e, e, e.2);
  background-color: #99a9bf;
}
::-webkit-scrollbar-track {
  -webkit-box-shadow: inset e e 5px rgba(e, e, e, e.2);
  border-radius: 5px;
  background-color: #d3dce6;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100vw;
  height: calc(100vw * 104 / 1920);
  background-color: #ffffff;
}
.logo {
  width: calc(100vw * 220 / 1920);
  height: calc(100vw * 36 / 1920);
  margin-left: calc(100vw * 237 / 1920);
}
.hotline {
  margin-right: calc(100vw * 235 / 1920);
  font-size: calc(100vw * 20 / 1920);
  font-family: PingFang SC-Medium, PingFang SC;
  font-weight: 500;
  color: #515a6e;
  line-height: 23px;
}

.banner-container {
  position: relative;
}
.banner {
  width: calc(100vw * 1920 / 1920);
  height: calc(100vw * 556 / 1920);
}
.banner-title {
  position: absolute;
  top: calc(100vw * 194 / 1920);
  left: calc(100vw * 240 / 1920);
  font-size: calc(100vw * 60 / 1920);
  font-family: PingFang SC-Medium, PingFang SC;
  font-weight: 500;
  color: #ffffff;
  line-height: calc(100vw * 70 / 1920);
  letter-spacing: 3px;
}
.banner-subtitle {
  position: absolute;
  top: calc(100vw * 289 / 1920);
  left: calc(100vw * 240 / 1920);
  font-size: calc(100vw * 28 / 1920);
  font-family: PingFang SC-Regular, PingFang SC;
  font-weight: 400;
  color: #ffffff;
  line-height: calc(100vw * 33 / 1920);
  letter-spacing: 1px;
}

.intro-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: calc(100vw * 60 / 1920);
}
.intro {
  width: calc(100vw * 1000 / 1920);
  font-size: calc(100vw * 20 / 1920);
  font-family: PingFang SC-Regular, PingFang SC;
  font-weight: 400;
  color: #515a6e;
  line-height: calc(100vw * 40 / 1920);
}

.edition-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: calc(100vw * 1920 / 1920);
  margin-top: calc(100vw * 88 / 1920);
}
.edition-title {
  font-size: calc(100vw * 40 / 1920);
  font-family: PingFang SC-Medium, PingFang SC;
  font-weight: 500;
  color: #252121;
  line-height: calc(100vw * 47 / 1920);
}
.edition-subtitle {
  margin-top: calc(100vw * 8 / 1920);
  font-size: calc(100vw * 20 / 1920);
  font-family: PingFang SC-Regular, PingFang SC;
  font-weight: 400;
  color: #99a1b4;
  line-height: calc(100vw * 30 / 1920);
  letter-spacing: calc(100vw * 2 / 1920);
}
.edition-list {
  display: flex;
  justify-content: space-between;
  width: calc(100vw * 1440 / 1920);
  margin-top: calc(100vw * 60 / 1920);
}
.edition-item {
  position: relative;
  width: calc(100vw * 448 / 1920);
  height: calc(100vw * 592 / 1920);
}
.edition-item-pic {
  position: relative;
  width: 100%;
  height: calc(100vw * 250 / 1920);
  z-index: 2;
}
.edition-item-detail {
  position: relative;
  top: calc(100vw * -40 / 1920);
  height: calc(100vw * 342 / 1920);
  padding: calc(100vw * 72 / 1920) calc(100vw * 40 / 1920) 0
    calc(100vw * 40 / 1920);
  background: #ffffff;
  border-bottom-left-radius: calc(100vw * 16 / 1920);
  border-bottom-right-radius: calc(100vw * 16 / 1920);
  font-size: calc(100vw * 20 / 1920);
  font-family: PingFang SC-Regular, PingFang SC;
  font-weight: 400;
  color: #515a6e;
  line-height: calc(100vw * 42 / 1920);
  cursor: pointer;
  z-index: 1;
}
.edition-item-detail:hover {
  box-shadow: 0px calc(100vw * 24 / 1920) calc(100vw * 20 / 1920) 0px
    rgba(238, 239, 240, 0.6);
}

.reason-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: calc(100vw * 1920 / 1920);
  margin-top: calc(100vw * 88 / 1920);
}
.reason-title {
  font-size: calc(100vw * 40 / 1920);
  font-family: PingFang SC-Medium, PingFang SC;
  font-weight: 500;
  color: #252121;
  line-height: calc(100vw * 47 / 1920);
}
.reason-subtitle {
  margin-top: calc(100vw * 8 / 1920);
  font-size: calc(100vw * 20 / 1920);
  font-family: PingFang SC-Regular, PingFang SC;
  font-weight: 400;
  color: #99a1b4;
  line-height: calc(100vw * 30 / 1920);
  letter-spacing: calc(100vw * 2 / 1920);
}
.reason-list {
  position: relative;
  width: calc(100vw * 1440 / 1920);
  height: calc(100vw * 548 / 1920);
  margin-top: calc(100vw * 40 / 1920);
}
.reason-item {
  position: absolute;
  display: flex;
  width: calc(100vw * 448 / 1920);
  height: calc(100vw * 230 / 1920);
  background: #ffffff;
  border-radius: calc(100vw * 16 / 1920);
  cursor: pointer;
}
.reason-item-left {
  display: flex;
  flex-direction: column;
  height: 100%;
  margin-left: calc(100vw * 32 / 1920);
}
.reason-item-index {
  width: calc(100vw * 74 / 1920);
  height: calc(100vw * 41 / 1920);
}
.reason-item-pic {
  width: calc(100vw * 86 / 1920);
  height: calc(100vw * 86 / 1920);
  margin-top: calc(100vw * 17 / 1920);
}
.reason-item-right {
  height: 100%;
  margin-left: calc(100vw * 36 / 1920);
}
.reason-item-name {
  margin-top: calc(100vw * 35 / 1920);
  font-size: calc(100vw * 28 / 1920);
  font-family: PingFang SC-Medium, PingFang SC;
  font-weight: 500;
  color: #000000;
  line-height: calc(100vw * 33 / 1920);
}
.reason-item-detail {
  width: calc(100vw * 254 / 1920);
  margin-top: calc(100vw * 24 / 1920);
  font-size: calc(100vw * 20 / 1920);
  font-family: PingFang SC-Regular, PingFang SC;
  font-weight: 400;
  color: #515a6e;
  line-height: calc(100vw * 36 / 1920);
}

.features-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: calc(100vw * 1920 / 1920);
  margin-top: calc(100vw * 88 / 1920);
}
.features-title {
  font-size: calc(100vw * 40 / 1920);
  font-family: PingFang SC-Medium, PingFang SC;
  font-weight: 500;
  color: #252121;
  line-height: calc(100vw * 47 / 1920);
}
.features-subtitle {
  margin-top: calc(100vw * 8 / 1920);
  font-size: calc(100vw * 20 / 1920);
  font-family: PingFang SC-Regular, PingFang SC;
  font-weight: 400;
  color: #99a1b4;
  line-height: calc(100vw * 30 / 1920);
  letter-spacing: calc(100vw * 2 / 1920);
}
.features-list {
  display: flex;
  justify-content: center;
  margin-top: calc(100vw * 60 / 1920);
}
.features-item-simple {
  position: relative;
  width: calc(100vw * 240 / 1920);
  height: calc(100vw * 448 / 1920);
  margin: 0 calc(100vw * 16 / 1920);
  background: #17233d;
  border-radius: calc(100vw * 20 / 1920);
  cursor: pointer;
}
.features-item-full {
  position: relative;
  width: calc(100vw * 416 / 1920);
  height: calc(100vw * 448 / 1920);
  margin: 0 calc(100vw * 16 / 1920);
  background: linear-gradient(
    180deg,
    rgba(16, 22, 39, 0) 0%,
    #0f1526 100%,
    #0f1526 100%
  );
  border-radius: calc(100vw * 20 / 1920);
  cursor: pointer;
}
.features-item-icon {
  position: absolute;
  top: calc(100vw * 40 / 1920);
  left: calc(100vw * 40 / 1920);
  width: calc(100vw * 36 / 1920);
  height: calc(100vw * 36 / 1920);
}
.features-item-desc {
  position: absolute;
  top: calc(100vw * 324 / 1920);
  left: calc(100vw * 40 / 1920);
  font-size: calc(100vw * 26 / 1920);
  font-family: PingFang SC-Medium, PingFang SC;
  font-weight: 500;
  color: #ffffff;
  line-height: calc(100vw * 42 / 1920);
}
.features-item-full-name {
  position: absolute;
  top: calc(100vw * 222 / 1920);
  left: calc(100vw * 40 / 1920);
  font-size: calc(100vw * 26 / 1920);
  font-family: PingFang SC-Bold, PingFang SC;
  font-weight: bold;
  color: #ffffff;
  line-height: calc(100vw * 42 / 1920);
}
.features-item-full-desc {
  position: absolute;
  top: calc(100vw * 280 / 1920);
  left: calc(100vw * 40 / 1920);
  width: calc(100vw * 338 / 1920);
  font-size: calc(100vw * 18 / 1920);
  font-family: PingFang SC-Regular, PingFang SC;
  font-weight: 400;
  color: #ffffff;
  line-height: calc(100vw * 36 / 1920);
}
.features-item-pic {
  width: calc(100vw * 240 / 1920);
  height: calc(100vw * 448 / 1920);
  border-radius: calc(100vw * 20 / 1920);
  opacity: 0.6;
}
.features-item-pic-full {
  width: calc(100vw * 416 / 1920);
  height: calc(100vw * 448 / 1920);
  border-radius: calc(100vw * 20 / 1920);
  opacity: 0.6;
}

.service-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: calc(100vw * 1920 / 1920);
  margin-top: calc(100vw * 88 / 1920);
}
.service-title {
  font-size: calc(100vw * 40 / 1920);
  font-family: PingFang SC-Medium, PingFang SC;
  font-weight: 500;
  color: #252121;
  line-height: calc(100vw * 47 / 1920);
}
.service-subtitle {
  margin-top: calc(100vw * 8 / 1920);
  font-size: calc(100vw * 20 / 1920);
  font-family: PingFang SC-Regular, PingFang SC;
  font-weight: 400;
  color: #99a1b4;
  line-height: calc(100vw * 30 / 1920);
  letter-spacing: calc(100vw * 2 / 1920);
}
.service-list {
  position: relative;
  display: flex;
  justify-content: space-between;
  width: calc(100vw * 1190 / 1920);
  margin-top: calc(100vw * 60 / 1920);
  padding: 0 calc(100vw * 85 / 1920);
}
.service-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
}
.service-item-index {
  font-size: calc(100vw * 42 / 1920);
  font-family: Alibaba PuHuiTi-Medium, Alibaba PuHuiTi;
  font-weight: 500;
  color: #17233d;
  line-height: calc(100vw * 49 / 1920);
}
.service-item-circle {
  width: calc(100vw * 16 / 1920);
  height: calc(100vw * 16 / 1920);
  margin-top: calc(100vw * 20 / 1920);
  border-radius: calc(100vw * 100 / 1920);
  opacity: 1;
  border: 3px solid #99a1b4;
}
.service-item-name {
  margin-top: calc(100vw * 24 / 1920);
  font-size: calc(100vw * 26 / 1920);
  font-family: PingFang SC-Medium, PingFang SC;
  font-weight: 500;
  color: #000000;
  line-height: calc(100vw * 30 / 1920);
}
.service-item-details {
  width: calc(100vw * 157 / 1920);
  margin-top: calc(100vw * 15 / 1920);
  font-size: calc(100vw * 18 / 1920);
  font-family: PingFang SC-Regular, PingFang SC;
  font-weight: 400;
  color: #515a6e;
  line-height: calc(100vw * 36 / 1920);
}
.service-split-line-1 {
  position: absolute;
  top: calc(100vw * 80 / 1920);
  left: 0;
  width: calc(100vw * 160 / 1920);
  height: 0px;
  opacity: 1;
  border: 1px solid #d9deea;
}
.service-split-line-2 {
  position: absolute;
  top: calc(100vw * 80 / 1920);
  left: calc(100vw * 220 / 1920);
  width: calc(100vw * 260 / 1920);
  height: 0px;
  opacity: 1;
  border: 1px solid #d9deea;
}
.service-split-line-3 {
  position: absolute;
  top: calc(100vw * 80 / 1920);
  left: calc(50% - 100vw * 130 / 1920);
  width: calc(100vw * 260 / 1920);
  height: 0px;
  opacity: 1;
  border: 1px solid #d9deea;
}
.service-split-line-4 {
  position: absolute;
  top: calc(100vw * 80 / 1920);
  right: calc(100vw * 220 / 1920);
  width: calc(100vw * 260 / 1920);
  height: 0px;
  opacity: 1;
  border: 1px solid #d9deea;
}
.service-split-line-5 {
  position: absolute;
  top: calc(100vw * 80 / 1920);
  right: 0;
  width: calc(100vw * 160 / 1920);
  height: 0px;
  opacity: 1;
  border: 1px solid #d9deea;
}

.footer {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: calc(100vw * 60 / 1920);
  margin-top: calc(100vw * 101 / 1920);
  border-top: 1px solid #e6eaf5;
  font-size: calc(100vw * 14 / 1920);
  font-family: PingFang SC-Regular, PingFang SC;
  font-weight: 400;
  color: #515a6e;
  line-height: calc(100vw * 16 / 1920);
}

.floating-hotline-wrapper {
  position: fixed;
  top: calc(100vw * 680 / 1920);
  right: calc(100vw * 60 / 1920);
  display: flex;
  flex-direction: column;
  width: calc(100vw * 180 / 1920);
  background: linear-gradient(180deg, #ff6b0d 0%, #ff5409 100%);
  box-shadow: 0px calc(100vw * 12 / 1920) calc(100vw * 16 / 1920) 0px #f3ecea;
  border-radius: calc(100vw * 16 / 1920);
}
.floating-hotline-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: calc(100vw * 32 / 1920);
  color: #fff;
  padding: calc(100vw * 18 / 1920) calc(100vw * 24 / 1920);
  font-size: calc(100vw * 22 / 1920);
  font-family: PingFang SC-Bold, PingFang SC;
  font-weight: bold;
  color: #ffffff;
  line-height: calc(100vw * 26 / 1920);
  cursor: pointer;
}
.floating-hotline-split {
  width: calc(100vw * 128 / 1920);
  height: 0px;
  margin: 0 calc(100vw * 26 / 1920);
  opacity: 1;
  border: calc(100vw * 1 / 1920) solid rgba(255, 255, 255, 0.1);
}

.phone {
  position: fixed;
  top: calc(100vw * 710 / 1920);
  right: calc(100vw * 256 / 1920);
  padding: calc(100vw * 14 / 1920);
  background: #ffffff;
  box-shadow: 0px calc(100vw * 12 / 1920) calc(100vw * 16 / 1920) 0px
    rgba(240, 242, 244, 0.8);
  border-radius: calc(100vw * 8 / 1920);
  font-size: calc(100vw * 20 / 1920);
  font-family: PingFang SC-Medium, PingFang SC;
  font-weight: bold;
  color: #515a6e;
  line-height: calc(100vw * 23 / 1920);
}

.wechat-qrcode {
  position: fixed;
  top: calc(100vw * 690 / 1920);
  right: calc(100vw * 256 / 1920);
  display: flex;
  justify-content: center;
  align-items: center;
  width: calc(100vw * 120 / 1920);
  height: calc(100vw * 120 / 1920);
  background: #ffffff;
  box-shadow: 0px calc(100vw * 12 / 1920) calc(100vw * 16 / 1920) 0px
    rgba(240, 242, 244, 0.8);
  border-radius: calc(100vw * 16 / 1920);
  opacity: 1;
}
