@font-face {
  font-family: "SansSerifBldFLF";
  src: url(/static/fonts/SansSerifBldFLF.otf);
  font-weight: normal;
  font-style: normal;
  font-display: fallback;
}

@font-face {
  font-family: "SansSerifFLF-Demibold";
  src: url(/static/fonts/SansSerifFLF-Demibold.otf);
  font-style: normal;
  font-weight: normal;
  font-display: fallback;
}

@font-face {
  font-family: "SansSerifFLF";
  src: url(/static/fonts/SansSerifFLF.otf);
  font-style: normal;
  font-weight: normal;
  font-display: fallback;
}

.upAnimation {
  animation-name: upAnimation;
  animation-duration: 1s;
  animation-delay: 0;
  animation-direction: normal;
  animation-iteration-count: 1;
  animation-timing-function: ease-in-out;

  animation-fill-mode: forwards;
}

@keyframes upAnimation {
  0% {
    transform: translate(0, 100px);
  }
  100% {
    transform: translate(0, 0px);
  }
}

.backToInitial {
  animation-name: backToInitial;
  animation-duration: 0;
  animation-delay: 0;
  animation-direction: normal;
  animation-iteration-count: 1;
  animation-timing-function: ease-out;
  animation-fill-mode: forwards;
}

@keyframes backToInitial {
  0% {
    transform: translate(0, 100px);
  }
  100% {
    transform: translate(0, -0px);
  }
}

.ecosystem {
  width: 100vw;
  color: #fff;
  max-width: 1200px;
}
.ecosystem p {
  margin: 0;
}
.ecosystem .ecosystemHead {
  position: relative;
  padding-top: 80px;
  width: 100vw;
}
.ecosystem .ecosystemHead .aacEcosystem {
  display: block;
  width: 100vw;
}
.ecosystem .ecosystemHead .ecosystemHeadTextBox {
  width: 100vw;
  position: absolute;
  top: 0;
  left: 0;
  padding-top: 15%;
  text-align: center;
  box-sizing: border-box;
}
.ecosystem .ecosystemHead .ecosystemHeadTextBox .ecosystemHeadTitle {
  font-size: 48px;
  line-height: 72px;
  margin-bottom: 26px;
}
.ecosystem .ecosystemHead .ecosystemHeadTextBox .ecosystemHeadText {
  font-size: 24px;
  line-height: 26px;
}
.ecosystem .architecture {
  width: 100vw;
  position: relative;
  padding: 82px 0 118px;
  background: #21212d;
}
.ecosystem .architecture p {
  position: absolute;
  top: 30px;
  width: 100vw;
  text-align: center;
  font-size: 32px;
  color: #ffffff;
  line-height: 35px;
}
.ecosystem .architecture p span {
  color: #fbd900;
}
.ecosystem .architecture .architectureImg {
  width: 60%;
  display: block;
  margin: 0 auto;
}
.ecosystem .ecosystemContent {
  width: 100vw;
  background: linear-gradient(180deg, #2b2b39, #21212d);
}
.ecosystem .joinAACEcosystem {
  padding: 120px 0 110px;
}
.ecosystem .joinAACEcosystem .joinAACEcosystemContent {
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
}
.ecosystem .joinAACEcosystem .joinAACEcosystemContent .textAlignCenter {
  text-align: center;
}
.ecosystem .joinAACEcosystem .joinAACEcosystemContent .stepBox1 {
  margin: 105px 0 110px;
}
.ecosystem .joinAACEcosystem .joinAACEcosystemContent .stepBox1 .text {
  margin-bottom: 51px;
}
.ecosystem .joinAACEcosystem .joinAACEcosystemContent .stepBox1 img {
  height: 48px;
  margin-right: 16px;
}
.ecosystem .joinAACEcosystem .joinAACEcosystemContent .stepBox2 {
  margin: 110px 0 110px;
}
.ecosystem .joinAACEcosystem .joinAACEcosystemContent .stepBox3 .buyFromCex {
  margin-bottom: 18px;
}
.ecosystem .joinAACEcosystem .joinAACEcosystemContent .stepBox3 img {
  height: 48px;
  margin-right: 16px;
}
.ecosystem .joinAACEcosystem .joinAACEcosystemContent .stepBox4 {
  position: absolute;
  bottom: 0;
  right: 60px;
  min-width: 260px;
  height: 260px;
  background: #46b148;
  border-radius: 32px;
  text-align: center;
  padding: 0 20px;
  box-sizing: border-box;
}
.ecosystem .joinAACEcosystem .joinAACEcosystemContent .stepBox4 .buyFromCex {
  margin-top: 85px;
}
.ecosystem .joinAACEcosystem .joinAACEcosystemContent .stepBox4 img {
  height: 48px;
  margin-top: 26px;
}
.ecosystem .joinAACEcosystem .joinAACEcosystemContent .title {
  font-size: 32px;
  font-family: SansSerifBldFLF, SansSerifBldFLF-Regular;
  font-weight: 400;
  line-height: 35px;
  text-align: center;
  margin-bottom: 20px;
}
.ecosystem .joinAACEcosystem .joinAACEcosystemContent .title span {
  color: #fbd900;
}
.ecosystem .joinAACEcosystem .joinAACEcosystemContent .text {
  opacity: 0.5;
  font-size: 24px;
  font-family: SansSerifFLF, SansSerifFLF-Demibold;
  font-weight: normal;
  line-height: 26px;
}
.ecosystem .joinAACEcosystem .joinAACEcosystemContent .buyFromCex {
  font-size: 24px;
  font-family: SansSerifFLF, SansSerifFLF-Demibold;
  font-weight: normal;
  color: #ffffff;
  line-height: 26px;
}
.ecosystem .joinAACEcosystem .joinAACEcosystemContent .subheading {
  font-size: 18px;
  font-family: SansSerifExbFLF, SansSerifExbFLF-Regular;
  font-weight: 400;
  color: #fbd900;
  line-height: 20px;
  margin-bottom: 21px;
}
.ecosystem .startToExplore {
  padding: 120px 0 110px;
}
.ecosystem .startToExplore .startToExploreContent {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
}
.ecosystem .startToExplore .startToExploreContent .titleCenter {
  width: 100vw;
  font-size: 48px;
  font-family: SansSerifBldFLF, SansSerifBldFLF-Regular;
  font-weight: 400;
  text-align: center;
  line-height: 53px;
  margin-bottom: 20px;
}
.ecosystem .startToExplore .startToExploreContent .titleCenter span {
  color: #fbd900;
}
.ecosystem .startToExplore .startToExploreContent .textCenter {
  width: 100vw;
  font-size: 32px;
  font-family: SansSerifBookFLF, SansSerifBookFLF-Regular;
  font-weight: 400;
  text-align: center;
  line-height: 35px;
  margin-bottom: 60px;
}
.ecosystem .startToExplore .startToExploreContent .startToExploreBox {
  position: relative;
  margin-bottom: 30px;
  width: 590px;
  min-height: 250px;
  border-radius: 32px;
  padding: 168px 20px 20px 20px;
  box-sizing: border-box;
}
.ecosystem .startToExplore .startToExploreContent .startToExploreBox a {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: block;
  width: 100%;
  height: 100%;
  text-decoration: none;
  color: #fff;
  z-index: 20;
}
.ecosystem .startToExplore .startToExploreContent .startToExploreBox .textBox {
  position: relative;
  z-index: 11;
}
.ecosystem .startToExplore .startToExploreContent .startToExploreBox .textBox .title {
  font-size: 24px;
  font-family: SansSerifExbFLF, SansSerifExbFLF-Regular;
  line-height: 26px;
  margin-bottom: 20px;
}
.ecosystem .startToExplore .startToExploreContent .startToExploreBox .textBox .text {
  font-size: 16px;
  font-family: SansSerifFLF, SansSerifFLF-Demibold;
  line-height: 18px;
  margin-bottom: 20px;
}
.ecosystem .startToExplore .startToExploreContent .startToExploreBox:nth-child(odd) {
  margin-right: 20px;
}
.ecosystem .startToExplore .startToExploreContent .startToExploreBoxOpacity {
  position: absolute;
  top: 0;
  left: 0;
  width: 590px;
  height: 380px;
  opacity: 0.18;
  background: linear-gradient(131deg, #fe595a 0%, #f96f41 47%, #f09a19 86%);
  border-radius: 32px;
}
.ecosystem .startToExplore .startToExploreContent .height380 {
  min-height: 380px;
}
.ecosystem .startToExplore .startToExploreContent .topImg {
  position: absolute;
  top: -26px;
  left: -58px;
  width: 248px;
}
.ecosystem .startToExplore .startToExploreContent .bottomImg {
  position: absolute;
  bottom: 26px;
  right: 39px;
  width: 211px;
  height: 186px;
}
.ecosystem .startToExplore .startToExploreContent .comingSoonBox {
  width: 590px;
  height: 258px;
  background: #424261;
  border-radius: 32px;
  box-shadow: 0px 2px 28px 0px rgba(30, 30, 33, 0.72);
  margin-bottom: 30px;
  padding: 50px 20px 0 20px;
  box-sizing: border-box;
}
.ecosystem .startToExplore .startToExploreContent .comingSoonBox .title {
  font-size: 16px;
  font-family: SansSerifExbFLF, SansSerifExbFLF-Regular;
  font-weight: 600;
  line-height: 18px;
  margin-bottom: 20px;
}
.ecosystem .startToExplore .startToExploreContent .comingSoonBox .text {
  font-size: 16px;
  font-family: SansSerifFLF, SansSerifFLF-Regular;
  line-height: 20px;
}
.ecosystem .startToExplore .startToExploreContent .comingSoonBox .comingSoonText {
  margin-top: 46px;
  font-size: 16px;
  font-family: SansSerifFLF, SansSerifFLF-Regular;
  text-align: center;
  line-height: 20px;
}
.ecosystem .startToExplore .startToExploreContent .comingSoonBox:nth-child(odd) {
  margin-right: 20px;
}
.ecosystem .startToExplore .startToExploreContent .background {
  background: linear-gradient(136deg, #304b5b 6%, #283f59 46%, #23385a 95%);
}
.ecosystem .startToExplore .startToExploreContent .background .bottomImg {
  bottom: 26px;
  right: 58px;
  width: 178px;
  height: 178px;
}
.ecosystem .startToExplore .startToExploreContent .background1 {
  background: linear-gradient(138deg, #2e4a4a 8%, #2e4548 52%, #424b47 92%);
}
.ecosystem .startToExplore .startToExploreContent .background1 .bottomImg {
  bottom: 11px;
  right: 58px;
  width: 167px;
  height: 167px;
}
.ecosystem .startToExplore .startToExploreContent .background2 {
  background: linear-gradient(131deg, #514939 7%, #5c5045 49%, #5c4a44 96%);
}
.ecosystem .startToExplore .startToExploreContent .background2 .bottomImg {
  bottom: 11px;
  right: 29px;
  width: 182px;
  height: 171px;
}
.ecosystem .startToExplore .startToExploreContent .background3 {
  background: linear-gradient(132deg, #243f52 5%, #21364d 54%, #272f46 97%);
}
.ecosystem .startToExplore .startToExploreContent .background3 .bottomImg {
  bottom: 12px;
  right: 69px;
  width: 144px;
  height: 170px;
}
.ecosystem .startToExplore .startToExploreContent .background4 {
  background: linear-gradient(134deg, #544730 2%, #50383e 45%, #4f3045 97%);
}
.ecosystem .startToExplore .startToExploreContent .background4 .bottomImg {
  bottom: 17px;
  right: 41px;
  width: 166px;
  height: 130px;
}
.ecosystem .startToExplore .startToExploreContent .background5 {
  background: linear-gradient(132deg, #403b61 1%, #45375f 97%);
}
.ecosystem .startToExplore .startToExploreContent .background5 .bottomImg {
  bottom: 17px;
  right: 41px;
  width: 118px;
  height: 160px;
}
@media screen and (max-width: 1280px) {
  .ecosystem .joinAACEcosystem {
    padding: 60px 40px;
  }
  .ecosystem .joinAACEcosystem .joinAACEcosystemContent .stepBox3 {
    margin: 0px 20px 22px 20px;
  }
  .ecosystem .joinAACEcosystem .joinAACEcosystemContent .stepBox4 {
    position: static;
    margin: 0 auto;
    padding-top: 1px;
  }
  .ecosystem .joinAACEcosystem .joinAACEcosystemContent .stepBox4 .buyFromCex {
    margin-top: 85px;
  }
  .ecosystem .joinAACEcosystem .joinAACEcosystemContent .stepBox4 img {
    height: 48px;
    margin-top: 26px;
  }
  .ecosystem .startToExplore {
    padding: 0px 20px 30px;
  }
  .ecosystem .startToExplore .startToExploreContent .startToExploreBox {
    margin-top: 0;
    margin-bottom: 30px;
    margin-left: auto;
    margin-right: auto !important;
  }
  .ecosystem .startToExplore .startToExploreContent .comingSoonBox {
    margin-top: 0;
    margin-bottom: 30px;
    margin-left: auto;
    margin-right: auto !important;
  }
}
@media screen and (max-width: 750px) {
  .ecosystem .ecosystemHead .ecosystemHeadTextBox {
    padding-top: 25%;
  }
  .ecosystem .ecosystemHead .ecosystemHeadTextBox .ecosystemHeadTitle {
    font-size: 32px;
    line-height: 48px;
    margin-bottom: 16px;
  }
  .ecosystem .ecosystemHead .ecosystemHeadTextBox .ecosystemHeadText {
    font-size: 16px;
    line-height: 18px;
  }
  .ecosystem .architecture {
    padding: 60px 0 60px;
  }
  .ecosystem .architecture .architectureImg {
    width: 100%;
  }
  .ecosystem .joinAACEcosystem {
    padding: 60px 0 60px;
  }
  .ecosystem .joinAACEcosystem .joinAACEcosystemContent .stepBox1 {
    margin: 60px 20px 22px;
  }
  .ecosystem .joinAACEcosystem .joinAACEcosystemContent .stepBox2 {
    margin: 0px 20px 32px 20px;
  }
  .ecosystem .joinAACEcosystem .joinAACEcosystemContent .stepBox3 {
    margin: 0px 20px 22px 20px;
  }
  .ecosystem .joinAACEcosystem .joinAACEcosystemContent .stepBox3 .buyFromCex {
    margin-bottom: 18px;
  }
  .ecosystem .joinAACEcosystem .joinAACEcosystemContent .stepBox3 img {
    height: 48px;
    margin-right: 16px;
  }
  .ecosystem .joinAACEcosystem .joinAACEcosystemContent .stepBox4 {
    position: static;
    margin: 0 auto;
    padding-top: 1px;
    min-width: auto;
    width: 280px;
    padding: 1px 0 0 0;
  }
  .ecosystem .joinAACEcosystem .joinAACEcosystemContent .stepBox4 .buyFromCex {
    width: auto;
    margin-top: 85px;
  }
  .ecosystem .joinAACEcosystem .joinAACEcosystemContent .stepBox4 img {
    height: 48px;
    margin-top: 26px;
  }
  .ecosystem .startToExplore {
    padding: 0px 0 30px;
  }
  .ecosystem .startToExplore .startToExploreContent {
    padding: 0 20px;
  }
  .ecosystem .startToExplore .startToExploreContent .titleCenter {
    font-size: 32px;
    line-height: 35px;
  }
  .ecosystem .startToExplore .startToExploreContent .textCenter {
    font-size: 16px;
    line-height: 18px;
  }
  .ecosystem .startToExplore .startToExploreContent .startToExploreBoxOpacity {
    width: 100%;
  }
}

.content {
  background: #1f1d27;
}