/* 通用样式-start */

.g-introduce {
  position: relative;
  flex: 1;
}

.g-introduce h3,
.g-introduce .g-title,
.g-introduce button {
  margin-left: 60px;
}

.g-introduce h3 {
  font-weight: 1000;
  background: linear-gradient(to right, #4089fd, #120bfa);
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.g-introduce .g-title {
  position: relative;
  padding: 6px 10px 0 24px;
  font-size: 22px;
  color: var(--main-color);
}

.g-introduce .g-title::before {
  content: "#";
  position: absolute;
  top: 1px;
  left: 0;
  color: var(--text-color-primary-2);
  font-size: 28px;
  font-weight: bold;
}

.g-introduce .g-list {
  display: flex;
  flex-wrap: wrap;
  padding: 10px 0 50px 59px;
  margin-top: 52px;
  background: linear-gradient(90deg, #f0f7ff 3%, #f0f7ff 43%, #fdffff 100%);
}

.g-introduce .g-item {
  margin: 40px 50px 0 0;
}

.g-introduce .g-item strong {
  color: var(--main-color);
  font-size: 22px;
}

.g-introduce .g-item p,
.g-introduce .g-item .g-disorder {
  padding-top: 10px;
  color: var(--desc-color);
  font-size: 16px;
}

.g-introduce .g-item .g-disorder li {
  list-style: initial;
}

.g-introduce .g-item .g-disorder li::marker {
  color: #120bfa;
}

.g-introduce button {
  position: relative;
  margin-top: 40px;
  padding: 13px 44px 13px 20px;
  font-size: 20px;
  font-weight: bold;
  border-radius: 135px;
}

.g-introduce button::after {
  content: "";
  position: absolute;
  top: 22px;
  right: 20px;
  width: 9px;
  height: 9px;
  border-top: 4px solid #fff;
  border-right: 4px solid #fff;
  transform: rotate(45deg);
}

.g-introduce-note {
  position: relative;
  z-index: 1;
  width: 730px;
  height: auto;
  padding: 1rem;
  margin-right: -40px;
  border-radius: 1rem;
  background-color: #fff;
  box-shadow: 0px 0px 29px 0px rgba(138, 138, 138, 0.15);
  overflow: hidden;
}

.g-introduce-note.g-l {
  margin: 0 0 0 -40px;
}

.g-introduce-note .g-pic {
  border-radius: 8px;
  overflow: hidden;
}

.g-introduce-note img {
  display: block;
  width: 100%;
  height: auto;
}

.g-bg1,
.g-bg2 {
  position: relative;
}

.g-bg1 .g-bg1-ball {
  content: "";
  position: absolute;
  top: 40px;
  right: -80px;
  z-index: 0;
  width: 264px;
  height: 264px;
  border-radius: 50%;
  background: linear-gradient(
    180deg,
    rgba(0, 113, 255, 0.075) 0%,
    rgba(224, 236, 251, 0) 100%
  );
}

.g-bg1 .g-bg1-ball.g-l {
  left: -80px;
}

.g-bg2 .g-bg2-ball {
  position: absolute;
  top: 0;
  left: -120px;
  width: 304px;
  height: 304px;
  border-radius: 50%;
  background: #bbdaff;
  filter: blur(100px);
}

.g-bg2 .g-bg2-ball.g-r {
  right: -120px;
  left: initial;
}

.g-main {
  padding: 70px 0;
}
/* 通用样式-end */

.g-main {
  width: 1260px;
  margin: 0 auto;
}

.g-main-center {
  z-index: 1;
  align-items: center;
  width: auto;
  padding: 78px 0;
  border-radius: 30px;
  background: linear-gradient(129deg, #f0f6fd 0%, #fdffff 43%);
  box-shadow: 0px 0px 30px 0px rgba(194, 218, 255, 0.3);
}

/* 生产端-start */
.g-main.g-production .g-introduce h3 {
  background: linear-gradient(to right, #bb62ef, #7e2adc);
  background-clip: text;
}

.g-main.g-production .g-introduce .g-title::before {
  color: #b960ee;
}

.g-main.g-production .g-introduce .g-list {
  background: linear-gradient(90deg, #f1f0ff 0%, #fdffff 100%);
}

.g-main.g-production .g-introduce button {
  background: linear-gradient(291deg, #7e2adc 7%, #bb62ef 100%);
  box-shadow: 10px 10px 29px -3px #b45ced;
}

.g-main.g-production .g-bg1 .g-bg1-ball {
  background: linear-gradient(
    180deg,
    rgba(55, 0, 255, 0.075) 0%,
    rgba(224, 236, 251, 0) 100%
  );
}

.g-main.g-production.g-bg2 .g-bg2-ball {
  background: #d8d0ff;
}
/* 生产端-end */

/* 其他-start */
.g-main.g-other .g-introduce h3 {
  background: linear-gradient(to right, #29bbe4, #1398ce);
  background-clip: text;
}

.g-main.g-other .g-introduce .g-title::before {
  color: #02b0e1;
}

.g-main.g-other .g-introduce .g-list {
  background: linear-gradient(90deg, #e1f4fa 0%, #fdffff 100%);
}

.g-main.g-other .g-introduce button {
  background: linear-gradient(291deg, #1398cf 4%, #2abae3 100%);
  box-shadow: 10px 10px 29px -3px rgba(3, 176, 225, 0.8);
}

.g-main.g-other .g-bg1 .g-bg1-ball {
  background: linear-gradient(
    180deg,
    rgba(41, 185, 226, 0.075) 0%,
    rgba(224, 236, 251, 0) 100%
  );
}

.g-main.g-other.g-bg2 .g-bg2-ball {
  background: #acecff;
}
/* 其他-end */

/* 模兔云排料-start */
.g-main.g-discharge {
  position: relative;
}

.g-main.g-discharge::before {
  content: "";
  position: absolute;
  top: 0;
  left: -9rem;
  width: 587px;
  height: 587px;
  background: rgba(190, 255, 237, 0.5);
  filter: blur(100px);
}

.g-main.g-discharge::after {
  content: "";
  position: absolute;
  top: 25%;
  right: -9rem;
  width: 587px;
  height: 587px;
  background: rgba(190, 255, 237, 0.5);
  filter: blur(100px);
}

.g-main.g-discharge .g-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 95px 34px;
  border-radius: 30px;
  background-color: #ffffff;
}

.g-main.g-discharge .g-content h3 {
  font-weight: 1000;
  background: linear-gradient(to right, #18d8a5, #0ab56a);
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.g-main.g-discharge .g-content .g-title {
  position: relative;
  margin-top: 6px;
  padding-left: 12px;
  color: var(--main-color);
  font-size: 24px;
}

.g-main.g-discharge .g-content .g-title::before {
  content: "#";
  position: absolute;
  top: -5px;
  left: -10px;
  color: #17d5a1;
  font-size: 30px;
}

.g-main.g-discharge .g-item {
  position: relative;
  display: flex;
  align-items: center;
  margin: 2rem 0;
}

.g-main.g-discharge .g-item .g-ball {
  content: "";
  position: absolute;
  top: -2rem;
  left: 3rem;
  width: 174px;
  height: 174px;
  border-radius: 50%;
  background: linear-gradient(
    180deg,
    rgba(215, 255, 246, 0.5) 0%,
    rgba(224, 236, 251, 0) 100%
  );
}

.g-main.g-discharge .g-item .g-char {
  position: relative;
  padding-left: 98px;
}

.g-main.g-discharge .g-char h4 {
  position: relative;
  z-index: 1;
  padding-right: 60px;
  font-weight: 1000;
  font-size: 46px;
  background: linear-gradient(to right, #17d6a2, #0bb66c);
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.g-main.g-discharge .g-char-title {
  position: relative;
  z-index: 1;
  padding: 10px 60px 0 0;
  font-size: 24px;
  font-weight: bold;
  background: linear-gradient(to right, #17d6a2, #0bb66d);
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.g-main.g-discharge .g-char-desc {
  position: relative;
  z-index: 1;
  padding: 10px 60px 0 0;
  color: var(--desc-color);
  font-size: 16px;
}

.g-main.g-discharge .g-item .g-pic {
  padding: 20px;
  border-radius: 30px;
  background-color: #eefffb;
}

.g-main.g-discharge .g-pic img {
  width: 578px;
  height: auto;
  border-radius: 20px;
  overflow: hidden;
}
/* 模兔云排料-end */

/* banner */

main {
  background-color: #effaff;
}

main .g-banner {
  background: url(../image/banner-bg2.png) no-repeat top/cover;
}

@media screen and (max-width: 1500px) {
  .g-main {
    width: 1230px;
  }

  .g-main-center {
    border-radius: 25px;
  }

  .g-introduce-note {
    width: 700px;
  }
}

@media screen and (max-width: 1400px) {
  .g-main {
    width: 1100px;
    padding: 50px 0;
  }

  .g-main-center {
    padding: 58px 0;
  }

  .g-introduce h3,
  .g-introduce .g-title,
  .g-introduce button {
    margin-left: 35px;
  }

  .g-introduce .g-list {
    margin-top: 38px;
    padding: 0px 0 40px 35px;
  }

  .g-introduce .g-item {
    margin: 28px 28px 0 0;
  }

  .g-introduce button {
    margin-top: 28px;
    font-size: 18px;
    padding: 11px 40px 11px 18px;
  }

  .g-introduce button::after {
    top: 20px;
    right: 20px;
    width: 8px;
    height: 8px;
  }

  .g-introduce-note {
    width: 640px;
    padding: 0.7rem;
  }

  .g-main.g-discharge .g-content .g-title,
  .g-main.g-discharge .g-char-title {
    font-size: 22px;
  }

  .g-main.g-discharge .g-char h4 {
    font-size: 38px;
  }
}

@media screen and (max-width: 1300px) {
  .g-main {
    width: 1000px;
  }
}

@media screen and (max-width: 1200px) {
  .g-main {
    width: 940px;
  }

  .g-introduce .g-list {
    margin-top: 28px;
  }

  .g-introduce-note {
    width: 630px;
  }

  .g-main.g-discharge .g-content {
    padding: 58px 12px;
  }

  .g-main.g-discharge .g-item .g-char {
    padding-left: 1rem;
  }

  .g-main.g-discharge .g-char h4 {
    padding-right: 2rem;
  }

  .g-main.g-discharge .g-char-title,
  .g-main.g-discharge .g-char-desc {
    padding: 0.8rem 1.5rem 0 0;
  }

  .g-main.g-discharge .g-item .g-pic {
    padding: 1rem;
    border-radius: 1.8rem;
  }

  .g-main.g-discharge .g-pic img {
    border-radius: 1rem;
  }
}

@media screen and (max-width: 1100px) {
  .g-main {
    width: 880px;
  }

  .g-introduce-note {
    width: 600px;
  }

  .g-main.g-discharge .g-pic img {
    width: 528px;
  }
}

/* @media screen and (max-width: 992px) {
  .g-main {
    width: 700px;
  }

  main h3 {
    font-size: 26px;
  }

  .g-introduce h3,
  .g-introduce .g-title,
  .g-introduce button {
    margin-left: 28px;
  }

  .g-introduce-note {
    width: 398px; 
  }

  .g-introduce .g-title {
    padding: 6px 0 0 22px;
    font-size: 20px;
  }

  .g-introduce .g-title::before {
    font-size: 26px;
  }

  .g-introduce .g-list {
    margin-top: 28px;
    padding: 0px 0 30px 28px;
  }

  .g-introduce .g-item {
    margin: 22px 22px 0 0;
  }

  .g-introduce .g-item p {
    padding-top: 4px;
  }

  .g-introduce button {
    margin-top: 22px;
    padding: 9px 38px 9px 16px;
    font-size: 16px;
  }

  .g-introduce button::after {
    top: 16px;
    right: 18px;
    width: 7px;
    height: 7px;
  }
} */

@media screen and (max-width: 992px) {
  .g-main {
    width: 92vw;
    padding: 2rem 0;
  }

  .g-main-center {
    flex-direction: column-reverse;
    padding: 2rem 0;
    border-radius: 10px;
  }

  .g-main-center:has(.g-l) {
    flex-direction: column;
  }

  .g-bg1 .g-bg1-ball {
    right: 0;
  }

  .g-bg2 .g-bg2-ball.g-r {
    right: 0;
  }

  .g-introduce-note,
  .g-introduce-note.g-l {
    margin: 0 0 2rem 0;
  }

  .g-introduce-note {
    width: 95%;
    padding: 0.5rem;
    border-radius: 1rem;
  }

  .g-introduce .g-title {
    padding: 0.4rem 0 0 1.2rem;
    font-size: 1.2rem;
  }

  .g-introduce .g-title::before {
    top: 2px;
    font-size: 1.5rem;
  }

  .g-introduce h3,
  .g-introduce .g-title,
  .g-introduce button {
    margin-left: 1.8rem;
  }

  .g-introduce .g-list {
    margin-top: 1.8rem;
    padding: 0px 0 1.8rem 1.8rem;
  }

  .g-introduce .g-item {
    margin: 1.8rem 1.8rem 0 0;
  }

  .g-introduce .g-item strong {
    font-size: 1.2rem;
  }

  .g-introduce .g-item p,
  .g-introduce .g-item .g-disorder {
    padding-top: 0.2rem;
    font-size: 1rem;
  }

  .g-introduce button {
    margin-top: 1rem;
    font-size: 0.8rem;
    padding: 0.6rem 2rem 0.7rem 1rem;
  }

  .g-introduce button::after {
    top: 0.9rem;
    right: 1rem;
    width: 6px;
    height: 6px;
  }

  .g-main.g-discharge {
    overflow: hidden;
  }

  .g-main.g-discharge .g-item {
    flex-direction: column;
    width: 100%;
  }

  .g-main.g-discharge .g-item.g-flip {
    flex-direction: column-reverse;
  }

  .g-main.g-discharge .g-char h4 {
    font-size: 1.8rem;
  }

  .g-main.g-discharge .g-char-title {
    font-size: 1.2rem;
  }

  .g-main.g-discharge .g-char-desc {
    font-size: 1rem;
  }

  .g-main.g-discharge .g-item .g-pic {
    width: 95%;
  }

  .g-main.g-discharge .g-pic img {
    width: 100%;
    height: auto;
  }

  .g-main.g-discharge .g-content {
    padding: 2rem 0;
    border-radius: 10px;
  }

  .g-main.g-discharge .g-content .g-title::before {
    top: -6px;
  }

  .g-main.g-discharge .g-item .g-char {
    width: 100%;
  }

  .g-main.g-discharge::before {
    left: 0;
    filter: blur(300px);
  }

  .g-main.g-discharge::after {
    right: 0;
    filter: blur(300px);
  }
}