@charset "UTF-8";
/**
* 202511【自研大项目】产业供应链平台研发项目-新点标证通2025
* date:2025-11-5
* author: sxw;
 */
html {
  height: 100%;
}

body {
  height: 100%;
}

.number {
  display: flex;
  align-items: center;
  height: 53px;
  margin-bottom: 48px;
}
.number-item {
  cursor: pointer;
}
.number .line {
  flex: 1;
  width: 0;
  margin: 0 15px 0 27px;
  position: relative;
  display: flex;
  align-items: center;
}
.number .line::before {
  position: absolute;
  content: "";
  width: calc(100% - 30px);
  height: 1px;
  background: #c5d3e9;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}
.number .now {
  font-size: 36px;
  font-weight: bold;
  color: #000;
}
.number .now > span {
  font-size: 48px;
  font-family: "D-DIN-Bold";
  color: #1f6de8;
  margin-right: 16px;
}
.number > div:not(.now):not(.line) {
  font-size: 40px;
  font-family: "D-DIN-Bold";
  margin-right: 12px;
  color: #c5d3e9;
}

.detail > div {
  width: 496px;
  background: rgba(255, 255, 255, 0.58);
  border: 1px solid #ffffff;
  box-shadow: 0px 4px 34.4px rgba(179, 209, 250, 0.47);
  border-radius: 16px;
  padding: 24px 19px 24px 24px;
  box-sizing: border-box;
}
.detail > div + div {
  margin-top: 24px;
}
.detail > div .tt {
  line-height: 36px;
  font-size: 24px;
  font-weight: bold;
  display: flex;
  align-items: center;
}
.detail > div .tt span {
  margin-left: 12px;
}
.detail > div .txt {
  font-size: 16px;
  color: #999;
  font-weight: 400;
  margin-top: 12px;
}

.swiper-wrapper,
.swiper-slide {
  height: 100%;
}

.swiper-slide {
  height: 900px;
  overflow: hidden;
}

.swiper-slide .info {
  position: relative;
  z-index: 9;
  font-size: 24px;
  font-weight: bold;
}
.swiper-slide .container {
  height: 100%;
  padding-top: 100px;
  box-sizing: border-box;
  position: relative;
}
.swiper-slide .container > img {
  position: absolute;
  pointer-events: none;
}

.swiper1 {
  background: radial-gradient(50% 50% at 50% 50%, #ffffff 0%, #e6f0fe 100%);
}
.swiper1 .detail {
  margin-top: 48px;
}
.swiper1 .container > img {
  left: 466px;
  bottom: 30px;
  height: 70%;
}

.swiper2 {
  background: url("../images/app_center2/swiper2_bg.jpg") no-repeat center;
  background-size: cover;
}
.swiper2 .detail {
  margin-top: 98px;
}
.swiper2 .detail > div {
  width: 504px;
}
.swiper2 .container > img {
  right: -21px;
  bottom: 80px;
  height: 60%;
}

.swiper3 {
  background: url("../images/app_center2/swiper3_bg.jpg") no-repeat center;
  background-size: cover;
}
.swiper3 .detail {
  margin-top: 48px;
}
.swiper3 .detail > div.swiper3-item {
  background: transparent;
  box-shadow: none;
  border: none;
  padding: 0;
}
.swiper3 .detail > div + div {
  margin-top: 64px;
}
.swiper3 .container > img {
  right: 0;
  bottom: 20px;
  height: 58%;
}
.box1 {
  margin: 0 5px;
  background: #fff;
  border-radius: 16px 16px 0 0;
  padding: 24px;
  box-sizing: border-box;
}
.box1 .txt {
  margin-top: 16px;
}

.box2 {
  height: 101px;
  margin-top: -10px;
  background: url("../images/app_center2/step3_img.jpg") no-repeat center;
  background-size: 100% 100%;
  border-radius: 10px;
  padding: 0 56px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #fff;
}
.box2-l {
  font-size: 16px;
}
.box2-r {
  margin-left: 20px;
  flex: 1;
  font-size: 24px;
  font-weight: bold;
  text-align: right;
}
.box2-r .num {
  font-size: 40px;
  font-weight: bold;
  color: #fff;
}

.swiper3 .box2 .num {
  font-family: "D-DIN-Bold";
}

.swiper4 {
  background: url("../images/app_center2/swiper4_bg.jpg") no-repeat center;
  background-size: cover;
}
.swiper4 .detail {
  margin-top: 48px;
}
.swiper4 .detail > div .tt .index {
  border-radius: 8px;
  background: linear-gradient(316.08deg, #69aaff 3.57%, #2467ff 98.25%);
  width: 36px;
  height: 36px;
  text-align: center;
  line-height: 34px;
  color: #fff;
  font-size: 20px;
}
.swiper4 .detail > div + div {
  margin-top: 16px;
}
.swiper4 .container > img {
  right: -21px;
  bottom: 35px;
  height: 64%;
}

.swiper5 {
  background: url("../images/app_center2/swiper5_bg.jpg") no-repeat center;
  background-size: cover;
}
.swiper5 .detail {
  margin-top: 72px;
}
.swiper5 .detail > div .tt .index {
  border-radius: 8px;
  background: linear-gradient(316.08deg, #69aaff 3.57%, #2467ff 98.25%);
  width: 36px;
  height: 36px;
  text-align: center;
  line-height: 34px;
  color: #fff;
  font-size: 20px;
}
.swiper5 .detail > div + div {
  margin-top: 16px;
}
.swiper5 .container > img {
  left: 739px;
  bottom: 0;
  height: 73%;
}

.swiper6 {
  background: linear-gradient(115.87deg, #ffffff 15.19%, #d3e6ff 75.97%);
}
.swiper6 .detail {
  margin-top: 48px;
}
.swiper6 .detail > div.swiper6-item {
  background: transparent;
  box-shadow: none;
  border: none;
  padding: 0;
}
.swiper6 .box2-r .num {
  font-size: 24px;
}
.swiper6 .container > img {
  right: 0;
  bottom: 0;
  height: 68%;
}

.swiper7 {
  background: url("../images/app_center2/swiper7_bg.jpg") no-repeat center;
  background-size: cover;
}
.swiper7 .detail {
  margin-top: 48px;
}
.swiper7 .detail > div {
  width: 388px;
  padding: 16px;
}
.swiper7-item img {
  border-radius: 10px;
  margin-top: 16px;
  width: 100%;
}
.swiper7-item:nth-child(n+2) {
  margin-top: 46px;
  position: relative;
}
.swiper7-item:nth-child(n+2)::before {
  position: absolute;
  content: "";
  width: 39px;
  height: 31px;
  left: 50%;
  transform: translateX(-50%);
  top: -39px;
  background: url("../images/app_center2/step7_img3.png") no-repeat center;
}
.swiper7 .container > img {
  right: 0;
  bottom: 70px;
  height: 58%;
}

.swiper8 {
  background: url("../images/app_center2/swiper7_bg.jpg") no-repeat center;
  background-size: cover;
}
.swiper8 .detail {
  margin-top: 48px;
  display: flex;
  justify-content: space-between;
}
.swiper8 .detail > div {
  flex: 1;
  text-align: center;
  padding: 0;
}
.swiper8 .detail > div.swiper8-item {
  box-shadow: none;
  background: transparent;
  border: none;
}
.swiper8 .detail > div + div {
  margin-top: 0;
}
.swiper8 .detail .txt {
  display: inline-block;
  font-size: 20px;
  font-weight: bold;
  color: #333;
  padding: 24px;
  line-height: 30px;
  background: rgba(255, 255, 255, 0.62);
  border: 1px solid #ffffff;
  box-shadow: 0px 4px 34.4px rgba(179, 209, 250, 0.47);
  border-radius: 16px;
  word-break: keep-all;
}

.swiper9 {
  background: linear-gradient(115.87deg, #ffffff 15.19%, #d3e6ff 75.97%);
}
.swiper9 .detail {
  margin-top: 73px;
  position: relative;
}
.swiper9 .detail > div {
  width: 415px;
  padding: 11px 16px;
  box-shadow: none;
  position: absolute;
}
.swiper9 .detail > div.red {
  right: 137px;
  top: 0;
  background: linear-gradient(277.59deg, rgba(255, 255, 255, 0.6) 5.84%, rgba(255, 238, 238, 0.6) 94.51%);
}
.swiper9 .detail > div.green {
  right: 0;
  top: 205px;
  background: linear-gradient(278.09deg, rgba(255, 255, 255, 0.6) -0.88%, rgba(229, 255, 247, 0.6) 96.46%);
}
.swiper9 .detail > div .tt span {
  margin-left: 0;
}
.swiper9 .container > img {
  left: 0;
  bottom: -169px;
  height: 85%;
}
.swiper9-item {
  line-height: 24px;
  margin-top: 8px;
}
.swiper9-item span {
  display: inline-block;
  width: calc(100% - 26px);
  margin-right: 8px;
}
.swiper9-item p {
  margin-top: 8px;
  font-size: 16px;
}
.swiper9 .red p {
  color: #e03f3f;
}
.swiper9 .green p {
  color: #10a688;
  font-weight: bold;
}

.swiper10 {
  background: url("../images/app_center2/swiper10_bg.jpg");
  background-size: cover;
}
.swiper10 .detail {
  margin-top: 120px;
}
.swiper10 .detail > div {
  width: 509px;
}
.swiper10 .container > img {
  right: 0;
  bottom: 14px;
  height: 66%;
}

.swiper11 {
  background: url("../images/app_center2/swiper11_bg.jpg") no-repeat center;
  background-size: cover;
}
.swiper11 .number {
  justify-content: space-between;
}
.swiper11 .container > img {
  right: -296px;
  bottom: -126px;
  height: 82%;
}