/* common */
.need-area {
  --need-top-color: var(--blue-light-color);
}

/* common */

/* top-banner */
.banner-list {
  flex-wrap: wrap;
  gap: 40px;
  font-weight: 700;
}

@media (max-width: 480px) {
  .top-banner h2+div {
    margin-top: 10px;
  }

  .banner-list {
    gap: 5px;
  }
}

/* top-banner */


/* highly-trust */
.highly-trust {
  padding-bottom: 60px;
  width: 100%;
  overflow: hidden;
}

.highly-trust .trust-one {
  display: flex;
  width: 100%;
  margin-top: 80px;
  overflow: visible;
}

@keyframes scrollAni {
  from {
    transform: translateX(-65px)
  }

  to {
    transform: translateX(var(--scroll-width))
  }
}

@keyframes scrollRightAni {
  from {
    transform: translateX(var(--scroll-width));
  }

  to {
    transform: translateX(65px);
  }
}

.highly-trust .trust-one .swiper-wrapper {
  --scroll-width: -100%;
  display: flex;
  width: fit-content;
  animation: scrollAni 25s linear infinite;
}

.highly-trust .trust-one .swiper-wrapper:hover {
  animation-play-state: paused;
}

.highly-trust .trust-right .swiper-wrapper {
  --scroll-width: 100%;
  animation: scrollRightAni 25s linear infinite;
}

.highly-trust .trust-one .highly-box {
  position: relative;
  width: 275px;
  margin-left: 65px;
  text-align: center;
}

.highly-trust .trust-one img {
  width: 100%;
  border-radius: 20px;
  box-shadow: 0px 4px 15px 0px #0000001A;
}

.highly-trust .trust-one .trust-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90%;
  height: fit-content;
  color: var(--white-color);
  font-style: italic;
  font-weight: 700;
  font-size: 28px;
}

/* 响应式 */
@media (max-width: 1480px) {
  .highly-trust .trust-one .highly-box {
    width: 240px;
    margin-left: 50px;
  }
}

@media (max-width: 1024px) {
  .highly-trust .trust-one .highly-box {
    width: 220px;
    margin-left: 40px;
  }

  .highly-trust .trust-one .trust-text {
    font-size: 20px;
  }
}

@media (max-width: 768px) {
  .highly-trust .trust-one {
    margin-top: 20px;
  }

  .highly-trust .trust-one .highly-box {
    width: 200px;
    margin-left: 30px;
  }
}

/* highly-trust */

/* projects-content */
.projects-content {
  gap: 60px;
  margin-top: 60px;
}

.projects-item {
  --projects-bg: var(--light-color);
  --projects-color: var(--white-color);

  flex: 1;
  width: calc(50% - 60px);
  padding: 45px 50px;
  border-radius: 20px;
  background: var(--projects-bg);
}

.projects-left {
  --projects-bg: #F7F3FF;
  --projects-color: #994AFB;
}

.projects-right {
  --projects-bg: var(--blue-light-color);
  --projects-color: #4BBFFF;
}

.projects-item h3,
.projects-item svg {
  color: var(--projects-color);
}

.projects-item h3 {
  font-size: 34px;
}

.projects-item li {
  padding: 24px 0;
}

.projects-item li:last-child {
  padding-bottom: 0;
}

.projects-item li+li {
  border-top: 1px dotted var(--projects-color);
}

.projects-item h4 {
  font-size: 24px;
}

.projects-item h4 svg {
  transform: translateY(2px);
  margin-right: 5px;
}

.projects-item p {
  margin-top: 10px;
  color: var(--text-light-color);
  word-wrap: break-word;
  font-size: 18px;
}

/* projects-content 响应式适配 */
@media (max-width: 1480px) {
  .projects-content {
    gap: 50px;
    margin-top: 50px;
  }

  .projects-item {
    padding: 40px 40px;
  }

  .projects-item h3 {
    font-size: 30px;
  }

  .projects-item h4 {
    font-size: 22px;
  }

  .projects-item p {
    font-size: 17px;
  }
}

@media (max-width: 1200px) {
  .projects-content {
    flex-direction: column;
    gap: 30px;
  }

  .projects-item {
    width: 100%;
  }
}

@media (max-width: 768px) {
  .projects-content {
    margin-top: 40px;
  }

  .projects-item {
    padding: 30px 24px;
  }

  .projects-item h3 {
    font-size: 26px;
  }

  .projects-item h4 {
    font-size: 20px;
  }

  .projects-item p {
    font-size: 16px;
  }

  .projects-item li {
    padding: 20px 0;
  }
}

@media (max-width: 480px) {
  .projects-content {
    gap: 20px;
    margin-top: 30px;
  }

  .projects-item {
    padding: 25px 20px;
  }

  .projects-item h3 {
    font-size: 22px;
  }

  .projects-item h4 {
    font-size: 18px;
  }

  .projects-item p {
    font-size: 15px;
  }
}

/* projects-content */

/* case-area */
.case-area {
  background: var(--blue-light-color);
}

.case-area .swiper {
  --swiper-left-width: 755px;
  --swiper-left-padding: 50px;

  margin-top: 50px;
}

.case-area .swiper-slide {
  display: flex;
  padding: 30px;
  background: var(--white-color);
  border-radius: 20px;
}

.case-area .case-left {
  margin-right: 90px;
  width: 100%;
}

.case-area .case-right {
  flex-shrink: 0;
  width: var(--swiper-left-width);
  margin-top: 30px;
  padding-right: var(--swiper-left-padding);
}

.case-area .swiper-slide h3 {
  color: var(--light-color);
  font-size: 38px;
}

.case-area .swiper-slide p {
  margin-top: 24px;
  color: var(--text-light-color);
}

.swiper-controls {
  position: absolute;
  width: calc(var(--swiper-left-width) - var(--swiper-left-padding));
  z-index: 10;
  bottom: 30px;
  right: 80px;
}

.swiper-controls .swiper-pagination-current {
  font-size: 36px;
  font-weight: 700;
}

.swiper-controls .swiper-pagination {
  font-size: 20px;
  color: var(--light-color);
}

.swiper-controls>div>div {
  position: static;
}

.swiper-control-right {
  gap: 15px;
}

.swiper-control-right>div {
  width: 80px;
  height: 80px;
  margin: 0;
  border-radius: 50%;
  border: 1px solid var(--text-light-color);
  transition: all 0.3s;
}

.swiper-control-right>div:hover {
  border-color: var(--yellow-color);
  background: var(--yellow-color);
}

.swiper-control-right>div::after {
  display: none;
}

.swiper-control-right .swiper-button-next {
  transform: rotate(180deg);
}

/* case-area swiper 响应式适配 */
@media (max-width: 1480px) {
  .case-area .swiper {
    --swiper-left-width: 650px;
    --swiper-left-padding: 40px;
  }

  .case-area .case-left {
    margin-right: 60px;
  }

  .case-area .swiper-slide h3 {
    font-size: 34px;
  }

  .swiper-controls {
    right: 50px;
  }

  .swiper-control-right>div {
    width: 70px;
    height: 70px;
  }
}

@media (max-width: 1200px) {
  .case-area .swiper-slide {
    flex-direction: column;
  }

  .case-area .case-left {
    margin-right: 0;
  }

  .case-area .case-right {
    --swiper-left-width: 100%;
    --swiper-left-padding: 0;
    width: 100%;
    margin-top: 20px;
    padding-right: 0;
  }

  .swiper-controls {
    position: static;
    width: 100%;
    margin-top: 30px;
  }
}

@media (max-width: 768px) {
  .case-area .swiper {
    margin-top: 40px;
  }

  .case-area .swiper-slide {
    padding: 24px;
  }

  .case-area .swiper-slide h3 {
    font-size: 28px;
  }

  .case-area .swiper-slide p {
    margin-top: 16px;
  }

  .swiper-controls {
    margin-top: 20px;
  }

  .swiper-controls .swiper-pagination-current {
    font-size: 28px;
  }

  .swiper-control-right>div {
    width: 60px;
    height: 60px;
  }
}

@media (max-width: 480px) {
  .case-area .swiper-slide {
    padding: 20px;
  }

  .case-area .swiper-slide h3 {
    font-size: 24px;
  }

  .swiper-control-right>div {
    width: 50px;
    height: 50px;
  }
}

/* case-area */

/* part-area */

.part-list {
  --part-gap-x: 72px;

  position: relative;
  margin-top: 50px;
  flex-wrap: wrap;
  gap: 63px var(--part-gap-x);
}

.part-list li {
  position: relative;
  width: 265px;
  padding: 35px 20px;
  background: linear-gradient(116deg, var(--blue-linear-left) 0%, var(--blue-linear-right) 100%);
  border-radius: 20px;
  color: var(--blue-light-color);
  text-align: center;
}

.part-list li::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 100%;
  transform: translateY(-50%);
  width: var(--part-gap-x);
  aspect-ratio: 50 / 15;
  background: url("/public/images/crowdfund/part/partner-arrow-icon.svg") no-repeat center/cover;
  z-index: -1;
}

.part-list li.ten::after {
  display: none;
}

.part-list li:nth-of-type(5)::after {
  top: 58%;
  transform: none;
  width: calc(var(--part-gap-x) - 22px);
  aspect-ratio: 4 / 22;
  background: url("/public/images/crowdfund/part/partner-arrow-icon-two.svg") no-repeat center right / auto 120%;
}

.part-list li:nth-of-type(n+6)::after {
  left: auto;
  right: 100%;
  transform: translateY(-50%) rotate(180deg);
}

.part-list li h3 {
  font-size: 24px;
  font-weight: 500;
}

.part-list li svg {
  margin-bottom: 15px;
}

@media screen and (max-width: 1900px) {
  .part-list li {
    width: 215px;
  }
}

@media screen and (max-width: 1470px) {
  .part-list li {
    width: 180px;
  }

  .part-list li h3 {
    font-size: 20px;
  }
}

@media screen and (max-width: 1342px) {
  .part-list li {
    width: 160px;
  }
}

@media (max-width: 1200px) {
  .part-list {
    --part-gap-x: 50px;
    gap: 40px var(--part-gap-x);
    justify-content: center;
  }

  .part-list li {
    width: 220px;
  }

  .part-list li.four::after {
    top: 58%;
    transform: none;
    width: calc(var(--part-gap-x) - 12px);
    aspect-ratio: 4 / 22;
    background: url("/public/images/crowdfund/part/partner-arrow-icon-two.svg") no-repeat center right / auto 120%;
  }

  .part-list li.five {
    order: 8;
  }

  .part-list li.six {
    order: 7;
  }

  .part-list li.seven {
    order: 6;
  }

  .part-list li.eight {
    order: 5;
  }

  .part-list li.nine {
    order: 9;
  }

  .part-list li.ten {
    order: 10;
  }

  .part-list li.eight::after {
    content: "";
    position: absolute;
    top: 36%;
    left: calc((var(--part-gap-x) - 22px) * -1);
    transform: scaleX(-1);
    width: 255px;
    height: 260px;
    background: url("/public/images/crowdfund/part/partner-arrow-icon-two.svg") no-repeat bottom right / 100% 100%;
    z-index: -1;
  }

  .part-list li.seven::after,
  .part-list li.six::after,
  .part-list li.five::after {
    content: "";
    position: absolute;
    top: 50%;
    left: auto;
    right: 100%;
    transform: translateY(-50%) scaleX(-1);
    width: var(--part-gap-x);
    aspect-ratio: 50 / 15;
    background: url("/public/images/crowdfund/part/partner-arrow-icon.svg") no-repeat center/cover;
    z-index: -1;
  }

  .part-list li.nine::after,
  .part-list li.ten::after {
    display: block;
    transform: translateY(-50%) rotate(0);
  }
}

@media (max-width: 1130px) {
  .part-list li {
    width: 180px;
  }

  .part-list li.eight::after {
    top: 44%;
    height: 259px;
  }
}

@media (max-width: 960px) {
  .part-list li {
    width: 160px;
  }

  .part-list li.eight::after {
    top: 29%;
    height: 252px;
  }

  .part-list li h3 {
    font-size: 16px;
  }

  .part-list li svg {
    width: 30px;
    height: 30px;
  }
}

@media (max-width: 880px) {
  .part-list {
    --part-gap-x: 24px;
    margin-top: 40px;
    padding: 0 20px;
    gap: 20px var(--part-gap-x);
  }

  .part-list li {
    width: calc(50% - 12px);
    min-width: auto;
    padding: 20px 16px;
    border-radius: 10px;
  }

  .part-list li.six::after,
  .part-list li.two::after {
    top: 60%;
    right: auto;
    left: 100%;
    transform: none;
    width: calc(var(--part-gap-x) * 0.7);
    aspect-ratio: 6 / 40;
    background: url("/public/images/crowdfund/part/partner-arrow-icon-two.svg") no-repeat center right / auto 120%;
  }

  .part-list li.three {
    order: 4
  }

  .part-list li.three::after {
    top: 50%;
    left: auto;
    right: 100%;
    transform: translateY(-50%) scale(-1);
    width: var(--part-gap-x);
    height: auto;
    aspect-ratio: 50 / 15;
    background: url("/public/images/crowdfund/part/partner-arrow-icon.svg") no-repeat center/cover;
    z-index: -1;
  }

  .part-list li.four {
    order: 3;
  }

  .part-list li.eight::after,
  .part-list li.four::after {
    top: 60%;
    left: auto;
    right: 100%;
    transform: scaleX(-1);
    width: calc(var(--part-gap-x) * 0.7);
    height: auto;
    aspect-ratio: 6 / 40;
    background: url("/public/images/crowdfund/part/partner-arrow-icon-two.svg") no-repeat center right / auto 120%;
  }

  .part-list li.five {
    order: 4;
  }

  .part-list li.nine::after,
  .part-list li.five::after {
    top: 50%;
    right: auto;
    left: 100%;
    transform: translateY(-50%);
    width: var(--part-gap-x);
    aspect-ratio: 50 / 15;
    background: url("/public/images/crowdfund/part/partner-arrow-icon.svg") no-repeat center right / auto 120%;
  }

  .part-list li.six {
    order: 5;
  }

  .part-list li.seven {
    order: 7;
  }

  .part-list li.eight {
    order: 6;
  }

  .part-list li.ten::after {
    display: none;
  }

  .part-list li h3 {
    font-size: 20px;
  }
}

@media (max-width: 480px) {
  .part-list li h3 {
    font-size: 14px;
  }
}

/* part-area */