body,
h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
main {
  font-family: "Spartan";
  -webkit-font-smoothing: "antialiased";
}

/* Adjust spacing for headings */
h1,
h2,
h3,
h4,
h5,
h6 {
  letter-spacing: -0.015em
}

/* Adjust spacing for body text and smaller text */
p,
span,
div,
li,
td,
th,
label,
input,
textarea,
button {
  letter-spacing: -0.005em
}

/* Fallback for any remaining text elements */
body {
  letter-spacing: -0.005em
}

*[data-dev="auto"] .dev-ipad,
*[data-dev="mobile"] .dev-ipad,
*[data-dev="desktop"] .dev-ipad,
*[data-dev="ipad"] .dev-desktop,
*[data-dev="ipad"] .dev-mobile {
  display: none !important;
  margin: 0 !important;
}

/* WEB端样式 */
.wrap-line {
  display: none;
}

.top-banner {
  width: 100%;
  height: 85.3125rem;
}

.title-container {
  width: 100%;
  height: 8.75rem;
  background: rgba(255, 255, 255, 1);
}

.bottom-banner {
  position: relative;
  width: 100%;
  height: 76.5625rem;
  background: linear-gradient(to top, rgba(74, 86, 255, 0.27), transparent), #fff;
}

.title-container {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
}

.bottom-banner h1 {
  font-size: 4rem;
  font-weight: 800;
  line-height: 5.3125rem;
  margin-bottom: 0;
  text-align: center;
  gap: 1rem;
}

.bottom-banner p {
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: 400;
  font-size: 1.25rem;
  line-height: 1.8125rem;
  margin-bottom: 2.25rem;
  margin-top: 2rem;
  color: #555557;
}

.top-banner .top-banner-title-span {
  position: relative;
}

.top-banner .top-title-icon-bg {
  width: 11.875rem;
  height: 6.5625rem;
  position: absolute;
  left: 1.875rem;
  top: -1.25rem;
}

.top-banner .gradient-title {
  background: linear-gradient(90deg, rgba(65, 54, 245, 1) 0%, rgba(251, 95, 255, 1) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  position: relative;
}

.top-banner .gradient-title::after {
  content: '';
  position: absolute;
  width: 3.5rem;
  height: 3.5rem;
  background: url('/mb-cms/__/en/img/ad/compare-with-figma/icon-bg-2.png') no-repeat center center;
  background-size: contain;
  top: -1.3125rem;
  right: -2.625rem;
}

.btn-area {
  display: flex;
  justify-content: center;
  column-gap: 1.25rem;
  margin-top: 0.875rem;
}

.btn-area a {
  display: flex;
  width: 16.375rem;
  height: 3.75rem;
  align-items: center;
  justify-content: center;
  font-size: 1.375rem;
  text-decoration: none;
  line-height: 1.8125rem;
  font-weight: bold;
  border-radius: 12.5rem;
}

.use-now-btn {
  position: relative;
}

.use-now-btn a {
  background: #19191a;
  color: #fff;
}

.use-now-btn a:hover {
  background: rgba(65, 65, 66, 1);
}

.ex-figma-btn a {
  background: rgba(255, 255, 255, 0);
  color: #19191a;
  border: 0.125rem solid #19191a;
}

.ex-figma-btn a:hover {
  background: rgba(255, 255, 255, 0.8);
}

.inner-banner {
  position: relative;
  display: flex;
}

.inner-banner .inner-1 {
  width: 92.5rem;
  height: 51.875rem;
  margin: 0 auto;
  padding-top: 5.5rem;
  z-index: 1;
}

.inner-2 {
  position: absolute;
  left: 50%;
  transform: translate(-50%);
  z-index: 0;
  bottom: 0;
  height: 63.3125rem;
  max-width: 188.25rem;
  width: 100%;
}

.tree-all {
  display: none;
}

.tree-small {
  display: block;
}

@media (min-width: 157rem) {
  .tree-all {
    display: block;
  }

  .tree-small {
    display: none;
  }

  .inner-2 {
    max-width: 558.625rem;
    width: 558.625rem;
    transform: translate(-52%);
  }

  .inner-2-container {
    max-width: 558.625rem;
    width: 558.625rem;
  }
}

.inner-2-container {
  width: 188.25rem;
  height: 63.3125rem;
  position: absolute;
  left: 50%;
  transform: translate(-50%, -11%);
}

.free-use-arrow {
  padding-left: 0.625rem;
  transform: scaleY(1.5);
  font-family: auto;
  position: absolute;
  right: 2rem;
}

.water-container {
  position: absolute;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  background: #1e171700;
  overflow: hidden;
  right: 0.625rem;
  top: 0.625rem;
  z-index: 3;
}

.ripple {
  position: absolute;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.6);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  opacity: 0;
  animation: ripple 2.1s linear infinite;
}

.ripple:nth-child(1) {
  animation-delay: 0s;
}

.ripple:nth-child(2) {
  animation-delay: 0.7s;
}

.ripple:nth-child(3) {
  animation-delay: 1.4s;
}

.ripple:nth-child(4) {
  animation-delay: 2.1s;
}

@keyframes ripple {
  0% {
    transform: translate(-50%, -50%) scale(0);
    opacity: 0.6;
  }

  100% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0;
  }
}

.poiner-show {
  width: 4.6875rem;
  height: 4.6875rem;
  background: url(/mb-cms/__/en/img/ad/compare-with-figma/poiner.png);
  position: absolute;
  top: 50%;
  transform: translate(284%, -20%);
  background-size: 100%;
  animation: moveRightToLeft 1.3s linear infinite;
  will-change: transform;
}

@keyframes moveRightToLeft {
  0% {
    left: 50%;
  }

  70% {
    left: 0;
  }

  100% {
    left: 0;
  }
}

.flex-show h1 {
  font-weight: 800;
  font-size: 3rem;
  line-height: 3.625rem;
  margin-top: 8.125rem;
  display: flex;
  justify-content: center;
}

.flex-show h3 {
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1.875rem;
  display: flex;
  justify-content: center;
  margin-top: 1.75rem;
  margin-bottom: 5.25rem;
  color: rgba(85, 85, 87, 1);
}

.flex-show-title span {
  position: relative;
}

.flex-show-icon-bg {
  width: 8.125rem;
  height: 5.88875rem;
  position: absolute;
  z-index: -1;
  left: 0.6875rem;
  top: -0.625rem;
}

.flex-show .img-content {
  display: flex;
  margin: 0 auto;
  width: 88.125rem;
  height: auto;
  justify-content: space-between;
  align-items: center;
}

.show-content {
  width: 36.875rem;
  height: auto;
}

.show-img {
  width: 51.25rem;
  height: 37.5rem;
}

.show-logo {
  width: 4rem;
  height: 4rem;
  margin-bottom: 2.5rem;
}

.show-content h2 {
  font-weight: 700;
  font-size: 2.5rem;
  line-height: 3.375rem;
  margin-bottom: 2.5rem;
}

.show-content h2 span {
  background: linear-gradient(90deg, #3753ff 0%, #AE66FE 120%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.show-content ul {
  list-style: none;
  padding-left: 0;
  margin-bottom: 0;
  display: flex;
  flex-direction: column;
  row-gap: 2.5rem;
}

.show-content ul li p {
  display: flex;
  font-size: 1rem;
  line-height: 1.75rem;
  color: #717273;
  margin-bottom: 0;
}

.intro-btn-container {
  width: fit-content;
  height: fit-content;
  padding: 0.9375rem 2.71875rem;
  background: #19191a;
  border-radius: 1.5625rem;
  margin-top: 2.5rem;
}

.intro-btn-container a {
  padding: 0;
  color: #ffffff;
  text-decoration: none;
  display: flex;
  justify-content: center;
  height: 100%;
  font-size: 1.25rem;
  line-height: 1.25rem;
  align-items: center;
}

.intro-btn-container :hover {
  background: rgba(65, 65, 66, 1);
}

.show-content span {
  padding: 0 0.3125rem 0 0.3125rem;
}

.show-img img {
  width: 100%;
  height: 100%;
}

.flex-show .img-content:nth-child(4),
.flex-show .img-content:nth-child(5),
.flex-show .img-content:nth-child(6) {
  margin-top: 10rem;
}

.flex-show .show-content {
  max-width: 31rem;
}

.visualization {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.visualization h1 {
  font-size: 3rem;
  line-height: 3.5rem;
  font-weight: bold;
  display: flex;
  justify-content: center;
  margin-top: 12rem;
  margin-bottom: 0;
}

.visualization h3 {
  font-weight: 500;
  font-size: 1.25rem;
  line-height: 1.875rem;
  display: flex;
  justify-content: center;
  margin-top: 1.75rem;
  margin-bottom: 5rem;
  color: rgba(85, 85, 87, 1);
}

.process {
  width: 88.25rem;
  height: 20.625rem;
  margin: 0 auto;
  display: flex;
  column-gap: 2.5rem;
}

.process-item {
  width: 27.75rem;
  height: 15.625rem;
}

.process-item img {
  width: 100%;
  height: 100%;
}

.process-item p {
  text-align: center;
  margin-top: 1.5rem;
  font-size: 1rem;
  line-height: 1.75rem;
  font-weight: 400;
  color: #555557;
}

.visualization-span {
  position: relative;
}

.icon-bg-4 {
  width: 12.625rem;
  height: 12.625rem;
  position: absolute;
  top: -5.0625rem;
  left: -1.125rem;
  z-index: -1;
}

.logo-bg-underline {
  width: 11.5781rem;
  height: 0.953125rem;
  position: absolute;
  z-index: -1;
  top: 3.6875rem;
  left: 0;
}

.logo-bg-star {
  width: 1.76562rem;
  height: 1.92188rem;
  position: absolute;
  z-index: -1;
  top: -1.25rem;
}

.visualization .intro-btn-container {
  width: fit-content;
  height: fit-content;
  padding: 1.09375rem 2.34375rem;
  margin-top: 5rem;
  margin-bottom: 8rem;
  border-radius: 12.5rem;
  font-size: 1.375rem;
  line-height: 1.8125rem;
  font-weight: bold;
}

.team-container {
  width: 100%;
  display: flex;
  margin: 0 auto;
  justify-content: center;
}

.team-container .team-list {
  width: 225rem;
  height: auto;
}

.excellent-team {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.excellent-team h1 {
  font-size: 3rem;
  line-height: 3.5rem;
  font-weight: 800;
  text-align: center;
  margin-bottom: 0;
}

.excellent-team span {
  position: relative;
}

.excellent-team span .icon-bg-5 {
  width: 8.125rem;
  height: 8.125rem;
  position: absolute;
  z-index: -1;
  top: -4rem;
  left: -6.5625rem;
}

.excellent-team span .icon-underline {
  width: 16.3125rem;
  height: 1.15625rem;
  position: absolute;
  z-index: -1;
  top: 2.875rem;
  right: -4.0625rem;
}

.excellent-team h3 {
  font-weight: 500;
  line-height: 1.875rem;
  font-size: 1.25rem;
  color: #555557;
  text-align: center;
  margin-top: 1.75rem;
  margin-bottom: 5rem;
}

.excellent-team .intro-btn-container {
  padding: 0.9375rem 3.8125rem;
  border-radius: 12.5rem;
  margin: 5rem auto 0 auto;
  max-height: 3.75rem;
}

.excellent-team .intro-btn-container a {
  font-size: 1.375rem;
  line-height: inherit;
}

.community-marquee .logo {
  width: 20.25rem;
  height: 12.875rem;
  border-radius: 1.375rem;
  padding: 0;
}

.community-marquee .logo:hover {
  transform: scale(1.05);
  transition: transform 0.2s;
  animation-play-state: paused;
}

.community-marquee .logo img {
  width: 100%;
  height: 100%;
  border-radius: 1.125rem;
}

.community-marquee-row1,
.community-marquee-row2 {
  display: flex;
  width: fit-content;
  column-gap: 1.25rem;
}

.community-marquee-row2 {
  margin-top: 1.25rem;
}

.community-marquee-row1 {
  animation: community-marquee1 25s linear infinite;
}

@keyframes community-marquee1 {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-50%);
  }
}

.community-marquee-row2 {
  animation: community-marquee2 25s linear infinite;
}

@keyframes community-marquee2 {
  0% {
    transform: translateX(-50%);
  }

  100% {
    transform: translateX(0);
  }
}

.community-marquee-row1:hover,
.community-marquee-row2:hover {
  animation-play-state: paused;
}

.design {
  margin-top: 8rem;
}

.design h1 {
  font-weight: 800;
  font-size: 3rem;
  line-height: 3.5rem;
  text-align: center;
  margin-bottom: 5rem;
}

.design h3 {
  font-weight: 400;
  font-size: 1.25rem;
  line-height: 1.875rem;
  text-align: center;
  color: rgba(85, 85, 87, 1);
  margin-top: 1.75rem;
  margin-bottom: 5rem;
}

.flex-js {
  display: flex;
  flex-wrap: wrap;
  gap: 1.125rem;
  max-width: 72.5rem;
  margin: 0 auto;
  justify-content: center;
  align-items: center;
}

.js-part {
  width: 17.25rem;
  height: auto;
}

.js-part img {
  width: 100%;
  height: auto;
}

.design-js .display-2 {
  font-size: 1.5rem;
  font-weight: bold;
  max-width: 72.5rem;
  margin: 0 auto;
  padding-top: 4.5rem;
}

.design-js p {
  font-size: 0.875rem;
  color: #666666;
  max-width: 72.5rem;
  margin: 0 auto;
  padding-top: 1.0625rem;
  padding-bottom: 2.5rem;
}

.design-js {
  margin-top: 3.75rem;
  padding-bottom: 6.6875rem;
}

.come {
  position: relative;
  width: 103.25rem;
  height: 32.6875rem;
  max-width: 100%;
  background: linear-gradient(rgba(253, 234, 251, 1), rgba(212, 239, 253, 1));
  margin: 0 auto 10.5625rem auto;
  border-radius: 2.0625rem;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.top-left-comma {
  position: absolute;
  width: 8.22188rem;
  height: 7.12188rem;
  top: 0;
  left: 0;
}

.bottom-right-comma {
  position: absolute;
  width: 14.8125rem;
  height: 12.8125rem;
  top: 20.6875rem;
  right: -1.0625rem;
}

.come h1 {
  display: flex;
  justify-content: center;
  font-weight: bold;
  font-size: 3.625rem;
  line-height: 4.25rem;
  letter-spacing: -0.0625rem;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

.come .intro-btn-container {
  padding: 1.09375rem 2.34375rem;
  border-radius: 12.5rem;
  margin: 0 auto;
  margin-top: 3.5rem;
}

.come .intro-btn-container a {
  font-size: 1.375rem;
  line-height: 1.625rem;
  font-weight: bold;
}

.relative-company-container .display-3 {
  font-weight: 700;
  font-size: 3rem;
  line-height: 4rem;
  margin-bottom: 5rem;
}

/* WEB -> MOBILE 适配 */

/* 100rem */
@media (max-width: 100rem) {
  .bottom-banner h1 {
    font-size: 3rem;
    line-height: 4.5rem;
  }

  .title-container {
    height: 7.5rem;
  }

  .bottom-banner p {
    font-size: 1.125rem;
    margin-top: 1.75rem;
    margin-bottom: 1.75rem;
  }

  .top-banner .top-title-icon-bg {
    left: 0;
    top: -1.5rem;
    width: 10.125rem;
    height: auto;
  }

  .top-banner .gradient-title::after {
    width: 2.5rem;
    height: 2.5rem;
    top: -1.5rem;
    right: -2rem;
  }

  .inner-banner .inner-1 {
    width: 78.75rem;
    height: auto;
  }

  .bottom-banner {
    height: 70.375rem;
  }

  .inner-2-container {
    height: 58.9375rem;
  }

  .inner-2 {
    transform: translate(-55%);
  }

  .top-banner {
    height: 78.75rem;
  }

  .flex-show h1 {
    font-size: 2.25rem;
    line-height: 1;
    margin-top: 5.625rem;
  }

  .flex-show h3 {
    font-size: 1.125rem;
    line-height: 1.625rem;
    margin-top: 1.5rem;
    margin-bottom: 3.75rem;
  }

  .flex-show .img-content {
    width: 75.625rem;
    height: auto;
  }

  .show-logo {
    width: 3.375rem;
    height: auto;
    margin-bottom: 1.5625rem;
  }

  .show-content h2 {
    font-size: 1.875rem;
    line-height: 1.2;
    margin-bottom: 1.875rem;
  }

  .show-content span {
    padding: 0;
  }

  .show-content ul {
    row-gap: 1.875rem;
  }

  .intro-btn-container {
    margin-top: 1.875rem;
  }

  .show-content ul li p {
    font-size: 0.9375rem;
  }

  .show-content {
    width: 31.625rem;
    height: fit-content;
  }

  .show-img {
    width: 44rem;
    height: 32.1875rem;
  }



  .flex-show>.img-content:nth-child(3) .show-content {
    padding: 1.5625rem 5.875rem 2rem 0;
  }

  .flex-show>.img-content:nth-child(4) .show-content {
    padding: 3.3125rem 0 3.75rem 5.875rem;
  }

  .flex-show>.img-content:nth-child(5) .show-content {
    padding: 3.3125rem 5.875rem 2rem 0;
  }

  .flex-show>.img-content:nth-child(6) .show-content {
    padding: 3.3125rem 0 3.75rem 5.875rem;
  }

  .flex-show .img-content:nth-child(4),
  .flex-show .img-content:nth-child(5),
  .flex-show .img-content:nth-child(6) {
    margin-top: 7.5rem;
  }

  .flex-show-icon-bg {
    width: 5.375rem;
    height: auto;
    top: -0.25rem;
    left: -0.375rem;
  }

  .visualization h1 {
    font-size: 2.25rem;
    line-height: 1;
    margin-top: 7.5rem;
  }

  .visualization h3 {
    font-size: 1.125rem;
    line-height: 1;
    margin-top: 1.5rem;
    margin-bottom: 3.75rem;
  }

  .process {
    width: 75.75rem;
    height: 17.6962rem;
    column-gap: 2.25rem;
  }

  .process-item {
    width: 23.75rem;
    height: 13.375rem;
  }

  .process-item p {
    margin-top: 0.75rem;
    font-size: 1.125rem;
    line-height: 1.5;
  }

  .visualization .intro-btn-container {
    width: 15rem;
    height: 3.125rem;
    margin-top: 2.5rem;
    margin-bottom: 3.1875rem;
  }

  .intro-btn-container a {
    font-size: 1.125rem;
  }

  .icon-bg-4 {
    width: 9.125rem;
    height: auto;
    top: -3.4375rem;
    left: -1.25rem;
  }

  .logo-bg-underline {
    width: 9.70312rem;
    height: auto;
    left: -1.4375rem;
    top: 3.125rem;
  }

  .logo-bg-star {
    width: 1.64062rem;
    height: 1.79688rem;
    top: -0.625rem;
    left: 7.375rem;
  }

  .excellent-team h1 {
    font-size: 2.25rem;
    line-height: 1;
  }

  .excellent-team span .icon-bg-5 {
    width: 5.625rem;
    height: auto;
    top: -2.6875rem;
    left: -4.5375rem;
  }

  .excellent-team span .icon-underline {
    width: 12.5rem;
    height: auto;
    top: 2.5rem;
    right: 0.125rem;
  }

  .excellent-team h3 {
    font-size: 1.125rem;
    margin-top: 1.5rem;
    margin-bottom: 3.75rem;
    line-height: 1;
  }

  .team-container {
    width: 100rem;
    height: 33.75rem;
  }

  .excellent-team .intro-btn-container {
    width: 15rem;
    height: 3.125rem;
    margin: 3.75rem auto 0 auto;
  }

  .design {
    margin-top: 5.625rem;
  }

  .design h1 {
    font-size: 2.25rem;
    line-height: 1;
  }

  .design h3 {
    font-size: 1.125rem;
    line-height: 1;
    margin-top: 1.5rem;
    margin-bottom: 3.75rem;
  }

  .community-marquee .logo {
    height: auto;
    width: 18.375rem;
  }

  .design-js .display-2 {
    font-size: 1.25rem;
    margin: 0 auto;
    padding-top: 2.25rem;
  }

  .design-js p {
    font-size: 0.8125rem;
    padding-top: 0.5rem;
    padding-bottom: 1.25rem;
  }

  .relative-company-container .display-3 {
    font-size: 2.25rem;
    margin-bottom: 3.75rem;
  }

  .come {
    width: 75.75rem;
  }

  .come h1 {
    font-size: 3rem;
    line-height: 1;
  }

  .come .intro-btn-container a {
    font-size: 1.25rem;
    line-height: 1;
  }

  .come .intro-btn-container {
    width: 15rem;
    height: 3.125rem;
  }

}

/* 90rem */
/* 80rem */
@media (max-width: 80rem) {
  .title-container {
    height: 5rem;
  }

  .bottom-banner h1 {
    font-size: 2.25rem;
    line-height: 3.5rem;
  }

  .top-banner .top-title-icon-bg {
    width: 6.625rem;
    top: -0.525rem;
    left: 0.5rem;
  }

  .top-banner .gradient-title::after {
    width: 1.25rem;
    height: 1.25rem;
    top: -0.625rem;
    right: -1rem;
  }

  .bottom-banner p {
    font-size: 1rem;
    margin-top: 0.875rem;
    margin-bottom: 1.25rem;
  }

  .btn-area {
    column-gap: 1.125rem;
  }

  .btn-area a {
    width: 14.5rem;
    height: 3.125rem;
    font-size: 1.125rem;
  }

  .water-container {
    top: 0.3125rem;
  }

  .poiner-show {
    width: 4.0625rem;
    height: 4.0625rem;
    transform: translate(287%, -20%);
  }

  .inner-banner .inner-1 {
    width: 61.875rem;
  }

  .top-banner {
    height: 63.5rem;
  }

  .inner-2-container {
    height: 50.1875rem;
  }

  .bottom-banner {
    height: 58.5rem;
  }

  .inner-2 {
    transform: translate(-60%);
  }

  .flex-show h1 {
    font-size: 2rem;
    line-height: 1;
    margin-top: 6.75rem;
    margin-bottom: 0;
  }

  .flex-show h3 {
    font-size: 1.0625rem;
    line-height: 1.25rem;
    margin-top: 1.125rem;
    margin-bottom: 2.5rem;
  }

  .show-logo {
    width: 2.5rem;
    height: auto;
    margin-bottom: 0.625rem;
  }

  .show-content h2 {
    font-size: 1.625rem;
    line-height: 1.2;
    margin-bottom: 1.5rem;
  }

  .show-content ul {
    row-gap: 1.5625rem;
  }

  .intro-btn-container {
    margin-top: 1.25rem;
    padding: 0.5375rem 1.71875rem;
  }

  .flex-show-icon-bg {
    width: 4.75rem;
    top: -0.5rem;
    left: 0.65rem;
  }

  .flex-show .img-content {
    width: 61.875rem;
  }

  .show-content {
    width: 25.875rem;
  }

  .show-img {
    width: 36rem;
    height: 26.3125rem;
  }

  .show-content h2 {
    margin-bottom: 0.875rem;
  }

  .show-content ul li p {
    font-size: 0.875rem;
  }

  .show-content ul {
    row-gap: 0.625rem;
  }

  .flex-show>.img-content:nth-child(3) .show-content {
    padding: 0.9375rem 2.5rem 2rem 0;
  }

  .flex-show>.img-content:nth-child(4) .show-content {
    padding: 3.4375rem 0 3.125rem 2.5rem;
  }

  .flex-show>.img-content:nth-child(5) .show-content {
    padding: 2.8125rem 2.625rem 2rem 0;
  }

  .flex-show>.img-content:nth-child(6) .show-content {
    padding: 2.6875rem 0 2.125rem 2.5rem;
  }

  .flex-show .img-content:nth-child(4),
  .flex-show .img-content:nth-child(5),
  .flex-show .img-content:nth-child(6) {
    margin-top: 5.625rem;
  }

  .intro-btn-container a {
    font-size: 1rem;
  }

  .visualization h1 {
    font-size: 2rem;
    margin-top: 5.625rem;
  }

  .visualization h3 {
    font-size: 1.0625rem;
    line-height: 1.25rem;
    margin-top: 1.125rem;
    margin-bottom: 2.5rem;
  }

  .process {
    width: fit-content;
    height: 14.5rem;
    column-gap: 0.75rem;
  }

  .process-item {
    width: 19.9187rem;
    height: 11.2188rem;
  }

  .process-item p {
    margin-top: 0.625rem;
    font-size: 0.875rem;
  }

  .icon-bg-4 {
    width: 7.25rem;
    top: -2.8125rem;
    left: -0.625rem;
  }

  .logo-bg-underline {
    width: 7.20312rem;
    height: auto;
    left: -0.3125rem;
    top: 2.5rem;
  }

  .logo-bg-star {
    width: 1.39688rem;
    height: 1.54688rem;
    top: -0.625rem;
  }

  .visualization .intro-btn-container {
    width: 12.5rem;
    height: 3.125rem;
    margin-bottom: 3.8125rem;
  }

  .excellent-team h1 {
    font-size: 2rem;
  }

  .excellent-team span .icon-bg-5 {
    width: 4.375rem;
    height: auto;
    top: -1.7625rem;
    left: -3.5rem;
  }

  .excellent-team h3 {
    font-size: 1.0625rem;
    margin-top: 1.125rem;
    margin-bottom: 1.875rem;
    line-height: 1.25rem;
  }

  .excellent-team span .icon-underline {
    width: 10.625rem;
    height: auto;
    top: 2.125rem;
  }

  .team-container {
    width: 80rem;
    height: 26.875rem;
  }

  .excellent-team .intro-btn-container {
    width: 12.5rem;
    height: 3.125rem;
    margin: 2.5rem auto 0 auto;
  }

  .design {
    margin-top: 3.75rem;
  }

  .design h1 {
    font-size: 2rem;
  }

  .design h3 {
    font-size: 1.0625rem;
    line-height: 1.25rem;
    margin-top: 1.125rem;
    margin-bottom: 1.875rem;
  }

  .community-marquee .logo {
    width: 13.375rem;
  }

  .relative-company-container .display-3 {
    font-size: 2rem;
    margin-bottom: 2.5rem;
  }

  .come {
    width: 62rem;
    margin: 0 auto 5.5625rem auto;
  }

  .come h1 {
    font-size: 2.25rem;
    line-height: 1;
  }
}

/* 特殊调整 */
@media (max-width: 72.3125rem) {
  .design-js-content {
    width: 54rem;
    margin: 0 auto;
  }
}

/* 61.9375rem */
@media (max-width: 61.9375rem) {
  .design-js-content {
    width: 46.875rem;
  }

  .title-container {
    height: 3.75rem;
  }

  .bottom-banner h1 {
    font-size: 2rem;
  }

  .top-banner .top-title-icon-bg {
    width: 6rem;
    top: -0.875rem;
  }

  .top-banner .gradient-title::after {
    right: -0.875rem;
  }

  .bottom-banner p {
    font-size: 1rem;
    margin-top: 0.375rem;
    margin-bottom: 1.25rem;
  }

  .btn-area a {
    width: 13.25rem;
    height: 3rem;
    font-size: 1.0625rem;
  }

  .inner-banner .inner-1 {
    width: 48rem;
    padding-top: 1.875rem;
  }

  .inner-2 {
    max-width: 114.5rem;
    height: auto;
    transform: translate(-60%);
  }

  .top-banner {
    height: 45.75rem;
  }

  .bottom-banner {
    height: 44rem;
  }

  .inner-2-container {
    height: 34.625rem;
  }

  .flex-show h1 {
    font-size: 1.75rem;
  }

  .flex-show h3 {
    font-size: 1.0625rem;
    line-height: 1;
    margin-top: 0.875rem;
    margin-bottom: 1.875rem;
  }

  .flex-show .img-content {
    max-width: 36rem;
    flex-direction: column-reverse;
    align-items: center;
  }

  .show-content {
    width: 36rem;
    height: auto;
  }

  .show-logo {
    width: 4rem;
    margin-bottom: 2.5rem;
  }

  .show-content h2 {
    margin-bottom: 2.5rem;
    font-size: 1.875rem;
    line-height: 1.2;
  }

  .show-content ul li p {
    font-size: 1.125rem;
  }

  .show-content ul {
    row-gap: 2.5rem;
  }

  .flex-show>.img-content:nth-child(3) .show-content {
    padding: 3.4375rem 0 2rem 0;
  }

  .flex-show>.img-content:nth-child(4) .show-content {
    padding: 3.4375rem 0 3.125rem 0;
  }

  .flex-show>.img-content:nth-child(5) .show-content {
    padding: 2.8125rem 0 2rem 0;
  }

  .flex-show>.img-content:nth-child(6) .show-content {
    padding: 2.6875rem 0 2.125rem 0;
  }

  .flex-show>.img-content:nth-child(3) {
    flex-direction: column-reverse;
  }

  .flex-show>.img-content:nth-child(4) {
    flex-direction: column;
  }

  .flex-show>.img-content:nth-child(5) {
    flex-direction: column-reverse;
  }

  .flex-show>.img-content:nth-child(6) {
    flex-direction: column;
  }

  .flex-show .img-content:nth-child(4),
  .flex-show .img-content:nth-child(5),
  .flex-show .img-content:nth-child(6) {
    margin-top: 0.75rem;
  }

  .visualization h1 {
    font-size: 1.75rem;
    margin-top: 1.75rem;
  }

  .icon-bg-4 {
    width: 7rem;
    top: -2.85rem;
    left: -1rem;
  }

  .logo-bg-underline {
    width: 5.95312rem;
    height: auto;
    left: -0.3125rem;
    top: 2.0625rem;
  }

  .logo-bg-star {
    width: 1.14688rem;
    height: 1.29688rem;
    top: -0.625rem;
    left: 5.75rem;
  }

  .visualization h3 {
    font-size: 1.25rem;
    line-height: 1;
    margin-top: 1.5rem;
    margin-bottom: 1.875rem;
  }

  .process {
    height: auto;
    flex-direction: column;
    align-items: center;
    row-gap: 2.5rem;
  }

  .process-item {
    width: 36rem;
    height: auto;
  }

  .process-item p {
    margin-top: 0.75rem;
    font-size: 1.125rem;
  }

  .design h1 {
    font-size: 1.75rem;
  }

  .design h3 {
    font-size: 1.25rem;
    line-height: 1;
    margin-top: 0.875rem;
    margin-bottom: 1.875rem;
  }

  .community-marquee .logo {
    width: 18.375rem;
  }

  .design-js .display-2 {
    font-size: 1.75rem;
  }

  .design-js p {
    font-size: 1.25rem;
    margin-top: 0.875rem;
    margin-bottom: 1.875rem;
  }

  .js-part {
    width: 22.875rem;
  }

  .brand span {
    font-size: 2.25rem;
    line-height: 1.2;
    text-align: center;
    width: 29.375rem;
    margin: 0 auto;
    display: flex;
  }

  .brand {
    margin-bottom: 3.5rem;
  }

  .come {
    width: 36.125rem;

  }

  .come h1 {
    font-size: 2.25rem;
  }

  .top-left-comma {
    position: absolute;
    width: 7.59687rem;
    height: 5.87188rem;
    top: 0;
    left: 0;
  }

  .bottom-right-comma {
    position: absolute;
    width: 13.5625rem;
    height: 10.3125rem;
    top: 23.1875rem;
    right: -1.0625rem;
  }
}

/* 48rem */
@media (max-width: 48rem) {
  .title-container {
    height: 1.25rem;
  }

  .top-banner {
    height: 36.75rem;
  }

  .bottom-banner p {
    text-align: center;
    height: 2.25rem;
  }

  .inner-banner .inner-1 {
    width: 31.25rem;
  }

  .bottom-banner {
    height: 34rem;
  }

  .inner-2-container {
    height: 23.5rem;
  }

  .inner-2 {
    max-width: 75.125rem;
    height: auto;
    transform: translate(-50%);
  }

  .flex-show h1 {
    font-size: 1.5rem;
    margin-top: 2.5rem;
    text-align: center;
  }

  .img-content .show-content {
    width: 28.75rem;
  }

  .flex-show h3 {
    font-size: 0.75rem;
    line-height: 1.125rem;
    text-align: center;
  }

  .flex-show .img-content {
    width: 28.75rem;
  }

  .flex-show .img-content {
    width: 28.75rem;
  }

  .show-img {
    width: 100%;
    height: auto;
  }

  .show-logo {
    width: 2.75rem;
    margin-bottom: 1.25rem;
  }

  .show-content h2 {
    margin-bottom: 1.25rem;
    font-size: 1.75rem;
    line-height: 1.5;
  }

  .flex-show>.img-content:nth-child(3) .show-content {
    padding: 2.1875rem 0 2rem 0;
  }

  .show-content ul li p {
    font-size: 1rem;
  }

  .show-content ul {
    row-gap: 1.25rem;
  }

  .flex-show .img-content:nth-child(4),
  .flex-show .img-content:nth-child(5),
  .flex-show .img-content:nth-child(6) {
    margin-top: 2.5rem;
  }

  .visualization h1 {
    font-size: 1.5rem;
    margin-top: 2.5rem;
  }

  .visualization h3 {
    font-size: 1rem;
    line-height: 1;
    margin-top: 0.875rem;
    margin-bottom: 1.875rem;
  }

  .process {
    width: 28.75rem;
  }

  .process-item {
    width: 28.75rem;
  }

  .process-item p {
    font-size: 1rem;
  }

  .design h1 {
    font-size: 1.5rem;
  }

  .design h3 {
    font-size: 1rem;
    line-height: 1;
    margin-top: 0.875rem;
    margin-bottom: 1.875rem;

  }

  .design-js p {
    padding-top: 0;
    padding-bottom: 0;
  }

  .community-marquee .logo {
    width: 15.25rem;
  }

  .design-js .display-2 {
    font-size: 1.5rem;
  }

  .design-js-content {
    width: 28.75rem;
  }

  .js-part {
    width: 14.75rem;
  }

  .brand span {
    font-size: 2rem;
    line-height: 1.1;
    width: 28.125rem;
  }

  .design-js p {
    font-size: 1rem;
  }
}

/* 42.25rem */
@media (max-width: 42.25rem) {
  .come {
    width: 28.75rem;
  }

  .come h1 {
    font-size: 1.75rem;
  }
}


/* 31.25rem */
@media (max-width: 31.25rem) {
  .wrap-line {
    display: block;
  }

  .bottom-banner h1 {
    font-size: 1.75rem;
    display: unset;
    text-align: center;
    line-height: 1.5;
  }

  .top-banner .top-title-icon-bg {
    width: 5.375rem;
    top: -0.5rem;
  }

  .top-banner .gradient-title::after {
    right: -0.875rem;
    top: -0.1875rem;
  }

  .bottom-banner p {
    font-size: 0.875rem;
    line-height: 1.3;
  }

  .btn-area a {
    width: 11.375rem;
    height: 2.5rem;
    font-size: 0.875rem;
  }

  .inner-banner .inner-1 {
    width: 24.375rem;
  }

  .inner-2 {
    max-width: 48.875rem;
  }

  .inner-2-container {
    height: 19.375rem;
  }

  .bottom-banner {
    height: 31.1875rem;
    text-align: center;
  }

  .top-banner {
    height: 32.4375rem;
  }

  .flex-show-icon-bg {
    width: 3.5rem;
  }

  .flex-show {
    text-align: center;
    margin-top: 2.5rem;
  }

  .flex-show h1 {
    display: unset;
    line-height: 1.3;
  }

  .flex-show-icon-bg {
    top: 0.125rem;
  }

  .flex-show .img-content {
    width: 23.4375rem;
  }

  .flex-show .show-content {
    display: flex;
    flex-direction: column;
    width: 23.4375rem;
  }

  .show-content h2 {
    text-align: start;
    font-size: 1.5rem;
    line-height: 2rem;
  }

  .show-content ul li p {
    font-size: 0.875rem;
    line-height: 1.5rem;
  }

  .show-content ul {
    text-align: start;
  }

  .show-logo {
    width: 2.625rem;
  }

  .flex-show .img-content:nth-child(4),
  .flex-show .img-content:nth-child(5),
  .flex-show .img-content:nth-child(6) {
    margin-top: 3.5rem;
  }

  .visualization {
    text-align: center;
  }

  .visualization h1 {
    display: unset;
    line-height: 1.3;
  }

  .icon-bg-4 {
    width: 6.375rem;
    top: -2.4375rem;
  }

  .logo-bg-underline {
    width: 5.01562rem;
    height: auto;
    left: 0;
    top: 2rem;
  }

  .logo-bg-star {
    width: 1.02188rem;
    height: 1.17188rem;
    top: 0;
    left: 5.7rem;
  }

  .visualization h3 {
    font-size: 0.75rem;
  }

  .process {
    width: 23.4375rem;
  }

  .process-item {
    width: 23.4375rem;
  }

  .process-item p {
    font-size: 0.75rem;
  }

  .design h1 {
    line-height: 1.3;
  }

  .design {
    margin-top: 2.5rem;
  }

  .design h3 {
    font-size: 0.75rem;
  }

  .community-marquee .logo {
    width: 13.375rem;
  }

  .js-part {
    width: 11.625rem;
  }

  .design-js-content {
    width: 23.4375rem;
  }

  .brand span {
    font-size: 1.5rem;
    line-height: 1.1;
    width: 20.625rem;
  }

  .come {
    width: 23.4375rem;
  }

  .top-left-comma {
    position: absolute;
    width: 5.72187rem;
    height: 5.24688rem;
    top: 0;
    left: 0;
  }

  .bottom-right-comma {
    position: absolute;
    width: 8.5625rem;
    height: 7.1875rem;
    top: 26.3125rem;
    right: -1.0625rem;
  }

  .come h1 {
    font-size: 2.25rem;
  }
}

/* 移动端样式 */
@media (max-width: 25.1875rem) {
  .title-container {
    height: 1.25rem;
  }

  .bottom-banner {
    justify-content: center;
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
  }

  .bottom-banner h1 {
    font-weight: bold;
    font-size: 1.75rem;
    line-height: 2.3125rem;
    display: unset;
  }

  .top-banner .top-title-icon-bg {
    width: 4.90188rem;
    height: 2.8125rem;
  }

  .top-banner .gradient-title::after {
    width: 1.25rem;
    height: 1.25rem;
    top: -0.2625rem;
    right: -0.75rem;
  }

  .bottom-banner p {
    font-size: 0.75rem;
    line-height: 1.125rem;
    font-weight: 400;
    margin: 1.25rem auto 1.625rem auto;
    width: 18.75rem;
    height: 2.25rem;
    text-align: center;
  }

  .btn-area {
    margin: 0 auto;
    column-gap: 0.75rem;
  }

  .btn-area a {
    width: 10.25rem;
    height: 2.25rem;
    font-size: 0.825rem;
    line-height: 1;
  }

  .inner-banner {
    width: 100%;
    margin-top: 2.25rem;
  }

  .inner-banner .inner-1 {
    width: 21.7975rem;
    height: 11.7531rem;
    padding-top: 0;
  }

  .bottom-banner {
    height: 30.9037rem;
  }

  .inner-2 {
    max-width: 37rem;
    height: 16.5rem;
    width: 100%;
  }

  .inner-2-container {
    width: 37rem;
    height: 16.5rem;
    transform: translate(-50%, -24%);
  }

  .top-banner {
    height: 32.0625rem;
  }

  .flex-show {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 0;
  }

  .flex-show h1 {
    margin-top: 2.5rem;
    font-size: 1.5rem;
    line-height: 2rem;
    display: unset;
    text-align: center;
  }

  .flex-show-icon-bg {
    width: 3.56625rem;
    height: 2.625rem;
    position: absolute;
    z-index: -1;
    top: -0.1875rem;
    left: -0.375rem;
  }

  .flex-show h3 {
    font-size: 0.75rem;
    line-height: 1.125rem;
    width: 19.6875rem;
    height: 2.25rem;
    margin: 0 auto;
    text-align: center;
    margin-top: 0.375rem;
    margin-bottom: 1.875rem;
    padding: 0 3.0625rem;
  }

  .flex-show>.img-content:nth-child(3),
  .flex-show>.img-content:nth-child(5) {
    flex-direction: column-reverse;
    justify-content: flex-end;
  }

  .flex-show>.img-content:nth-child(4),
  .flex-show>.img-content:nth-child(6) {
    flex-direction: column;
    justify-content: flex-start;
  }

  .show-img {
    width: 20.9375rem;
    height: 15.3125rem;
  }

  .flex-show .img-content {
    width: 20.9375rem;
    height: auto;
    row-gap: 1.5rem;
  }

  .flex-show .img-content .show-content {
    width: 20.9375rem;
    height: auto;
  }

  .show-logo {
    width: 2.625rem;
    height: 2.625rem;
    margin-bottom: 0.875rem;
  }

  .flex-show>.img-content:nth-child(3) .show-content,
  .flex-show>.img-content:nth-child(4) .show-content,
  .flex-show>.img-content:nth-child(5) .show-content,
  .flex-show>.img-content:nth-child(6) .show-content {
    padding: 0;
  }

  .flex-show>.img-content:nth-child(3) .show-content ul,
  .flex-show>.img-content:nth-child(4) .show-content ul {
    width: 20.875rem;
  }

  .flex-show>.img-content:nth-child(5) .show-content ul {
    width: 20.625rem;
  }

  .flex-show>.img-content:nth-child(3) .show-content,
  .flex-show>.img-content:nth-child(4) .show-content,
  .flex-show>.img-content:nth-child(5) .show-content,
  .flex-show>.img-content:nth-child(6) .show-content {
    padding: 0;
  }

  .process>.process-item:nth-child(2) {
    margin-top: 7.25rem;
  }

  .process>.process-item:nth-child(3) {
    margin-top: 5.75rem;
  }

  .show-content h2 {
    font-size: 1.5rem;
    line-height: 2rem;
    margin-bottom: 0.875rem;
  }

  .show-content span {
    padding: 0;
  }

  .show-content ul li p {
    font-size: 0.875rem;
    line-height: 1.5rem;
  }

  .show-content ul {
    row-gap: 0.875rem;
  }

  .flex-show .img-content:nth-child(4),
  .flex-show .img-content:nth-child(5),
  .flex-show .img-content:nth-child(6) {
    margin-top: 3.5rem;
  }

  .visualization h1 {
    margin-top: 3.5rem;
    font-size: 1.5rem;
    line-height: 2rem;
    display: unset;
    text-align: center;
    padding: 0 2.25rem;
  }

  .icon-bg-4 {
    width: 6.62188rem;
    height: 6.66rem;
    top: -2.1875rem;
    left: -0.9375rem;
  }

  .logo-bg-underline {
    width: 5.0625rem;
    height: 0.385rem;
    top: 1.875rem;
    left: 0.125rem;
  }

  .logo-bg-star {
    width: 1.0375rem;
    height: 1.12062rem;
    top: 0;
    left: 5.7rem;
  }

  .visualization h3 {
    font-size: 0.75rem;
    line-height: 1.125rem;
    margin-top: 0.375rem;
    margin-bottom: 1.875rem;
  }

  .process {
    width: 20.9375rem;
    height: 55.375rem;
    flex-direction: column;
    row-gap: 0;
  }

  .process-item {
    width: 20.9375rem;
    height: 11.75rem;
  }

  .process-item p {
    font-weight: 400;
    font-size: 0.875rem;
    line-height: 1.5rem;
    margin-top: 0.875rem;
    margin-bottom: 0;
  }

  .process>.process-item:nth-child(1)> :nth-child(2) {
    padding: 0 2.1875rem;
  }

  .design {
    margin-top: 0;
  }

  .design h1 {
    font-size: 1.5rem;
    line-height: 2rem;
    margin-bottom: 2rem;
    padding: 0 2rem;
  }

  .design h3 {
    font-size: 0.75rem;
    line-height: 1.125rem;
    margin-top: 0.375rem;
    margin-bottom: 1.875rem;
  }

  .community-marquee .logo {
    width: 10.6406rem;
    height: 6.76562rem;
  }

  .community-marquee .logo img {
    border-radius: 0.59125rem;
  }

  .community-marquee-row1,
  .community-marquee-row2 {
    column-gap: 0.6875rem;
  }

  .community-marquee-row2 {
    margin-top: 0.625rem;
    margin-bottom: 0.625rem;
  }

  .design-js {
    margin-top: 2rem;
    padding-bottom: 0;
  }

  .design-js .display-2 {
    padding-top: 0;
    font-size: 1.5rem;
    line-height: 1.1;
    font-weight: 600;
  }

  .design-js p {
    font-size: 0.875rem;
    line-height: 1;
    font-weight: 400;
    padding-top: 0.375rem;
    padding-bottom: 1.5rem;
  }

  .js-part {
    width: 10.1rem;
  }

  .flex-js {
    row-gap: 1.125rem;
    column-gap: 0.6875rem;
  }

  .brand .title {
    margin-top: 3.5rem;
    margin-bottom: 1.875rem;
  }

  .brand .display-3 {
    font-size: 1.5rem;
    font-weight: bold;
    line-height: 2rem;
  }

  .come {
    width: 20.9375rem;
    height: 25.625rem;
    margin: 0 auto 1.4375rem auto;
  }

  .come h1 {
    font-size: 1.75rem;
    line-height: 3.125rem;
    padding: 0 1.6875rem;
  }

  .top-left-comma {
    width: 8.625rem;
    height: 7.5rem;
    top: -1.4375rem;
    left: -1.5rem;
  }

  .bottom-right-comma {
    width: 7.1875rem;
    height: 6.25rem;
    top: 20rem;
    right: -0.3125rem;
  }

  .brand {
    margin-bottom: 2.875rem;
  }
}