@charset "utf-8";

.synthetic_indices .container { max-width: 1320px; margin-left: auto; margin-right: auto; }

.what { padding-top: 120px; padding-bottom: 60px; overflow: hidden; background: rgb(0, 0, 0); }

.what .top { text-align: center; width: 100%; max-width: 900px; margin-left: auto; margin-right: auto; }

.what .top .title { font-weight: 900; font-size: 48px; margin-bottom: 24px; }

.what .top .desc { font-weight: 400; font-size: 16px; margin-bottom: 48px; }

.what .bottom .small_title { font-weight: 900; font-size: 16px; margin-bottom: 24px; text-align: center; }

.what .bottom .swiper.swiper-no-swiping { cursor: auto; }

.what .bottom .swiper.swiper-no-swiping .swiper-wrapper { justify-content: center; display: flex !important; flex-wrap: nowrap !important; width: auto !important; transform: none !important; transition: none !important; }

.what .bottom .swiper.swiper-no-swiping .swiper-wrapper .swiper-slide:last-child { margin-right: 0px !important; }

.what .bottom .swiper .swiper-wrapper { touch-action: pan-y; }

.what .bottom .swiper .swiper-wrapper .swiper-slide { width: 100%; height: auto; max-width: 245px; background: rgb(0, 0, 0); border: 1px solid rgb(42, 42, 42); padding: 32px; border-radius: 32px; }

.what .bottom .swiper .swiper-wrapper.loading .swiper-slide + .swiper-slide { margin-left: 24px; }

.what .bottom .swiper .swiper-wrapper .swiper-slide .img { text-align: center; margin-bottom: 12px; width: 100%; max-width: 153px; margin-left: auto; margin-right: auto; }

.what .bottom .swiper .swiper-wrapper .swiper-slide .img img { width: 100%; }

.what .bottom .swiper .swiper-wrapper .swiper-slide .text { font-weight: 400; font-size: 24px; text-align: center; margin-bottom: 0px; margin-left: auto; margin-right: auto; word-spacing: 100vw; }

.what .bottom .swiper .swiper-wrapper .swiper-slide:nth-child(3) .text { max-width: 100px; }

.why { padding-top: 60px; padding-bottom: 60px; }

.why .title { width: 100%; max-width: 700px; margin-left: auto; margin-right: auto; text-align: center; font-weight: 900; font-size: 48px; margin-bottom: 48px; }

.why .content { display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px; }

.why .content .item { background: linear-gradient(120.5deg, rgb(0, 0, 0) 0%, rgb(26, 26, 26) 100%); border: 1px solid rgb(42, 42, 42); border-radius: 32px; padding: 48px 32px; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 12px; text-align: center; }

.why .content .item .small_title { width: 100%; font-weight: 900; font-size: 24px; color: rgb(0, 107, 255); }

.why .content .item .desc { font-weight: 400; font-size: 16px; margin-bottom: 0px; width: 100%; }

.explore { padding-top: 60px; padding-bottom: 120px; }

.explore .layout { display: flex; gap: 48px; }

.explore .layout > * { flex: 1 1 0%; }

.explore .head .box { display: flex; flex-direction: column; justify-content: center; position: sticky; top: 150px; max-width: 600px; margin-left: auto; margin-right: auto; }

.explore .head .title { font-size: 48px; margin-bottom: 24px; font-weight: 900; }

.explore .head .blue_button { padding-left: 20px; padding-right: 20px; max-width: max-content; }

.explore .content { display: grid; grid-template-columns: 1fr; grid-auto-rows: 1fr; gap: 24px; }

.explore .content .item { outline: rgb(42, 42, 42) solid 1px; padding: 32px; border-radius: 32px; display: flex; gap: 24px; flex-direction: column; justify-content: space-between; position: sticky; top: 150px; background: linear-gradient(115.66deg, rgb(0, 0, 0) 44.35%, rgb(19, 26, 35) 98.41%); }

.explore .content .item .left { display: grid; grid-template-columns: repeat(2, 1fr); align-items: center; gap: 48px; }

.explore .content .item .left > * { flex: 1 1 0%; }

.explore .content .item .left .img { animation: 4s linear 0s infinite normal none running moveUpDown; }

.explore .content .item .left .img img { transform: scale(1.1); }

.explore .content .item .left .small_title { font-weight: 900; font-size: 28px; }

.explore .content .item .top .desc { font-weight: 400; font-size: 16px; margin-bottom: 24px; }

.explore .content .item .top .text { padding-top: 24px; border-top: 1px solid rgb(42, 42, 42); font-weight: 400; font-size: 14px; margin-bottom: 0px; }

@keyframes moveUpDown { 
  0% { transform: translateY(0px) scale(0.9); }
  50% { transform: translateY(-20px) scale(0.9); }
  100% { transform: translateY(0px) scale(0.9); }
}

@media (max-width: 1440px) {
  .why .content { gap: 24px; }
  .why .content .item { text-align: left; }
  .why .content .item .small_title { font-size: 20px; }
}

@media (max-width: 1200px) {
  .why .content .item { padding: 32px; }
}

@media (max-width: 1040px) {
  .what { padding-top: 64px; padding-bottom: 32px; }
  .why { padding-top: 32px; padding-bottom: 32px; }
  .explore { padding-top: 32px; padding-bottom: 64px; }
}

@media (max-width: 1025px) {
  .explore .head { text-align: left; }
  .explore .content .item .left { gap: 24px; }
}

@media (max-width: 900px) {
  .explore .layout { flex-direction: column; }
  .explore .head { text-align: center; }
  .explore .head .title { font-size: 36px; }
  .explore .head .box { height: max-content !important; }
  .explore .head .blue_button { margin-left: auto; margin-right: auto; }
  .explore .content { grid-auto-rows: auto; }
  .explore .content .item { position: relative; top: 0px; border-radius: 24px; }
  .explore .content .item .left { gap: 32px; }
}

@media (max-width: 768px) {
  .what .top .title { font-size: 36px; }
  .what .top .desc { margin-bottom: 32px; }
  .what .bottom .swiper .swiper-wrapper .swiper-slide { border-radius: 24px; }
  .why .title { font-size: 36px; margin-bottom: 32px; }
  .why .content { grid-template-columns: 1fr; }
  .why .content .item { text-align: center; border-radius: 24px; }
  .explore .layout { gap: 32px; }
  .explore .head .title { font-size: 36px; }
  .explore .content .item .left .small_title { font-size: 24px; }
}

@media (max-width: 540px) {
  .what .top .title { font-size: 32px; }
  .what .top .desc { margin-bottom: 24px; }
  .why .title { font-size: 32px; margin-bottom: 24px; }
  .why .content .item { padding: 24px; }
  .explore .layout { gap: 24px; }
  .explore .head .title { font-size: 32px; }
  .explore .content .item { background: linear-gradient(rgb(0, 0, 0) 44.35%, rgb(19, 26, 35) 98.41%); }
  .explore .content .item .left { gap: 16px; }
}

@media (max-width: 400px) {
  .explore .content .item .left { gap: 16px; grid-template-columns: 1fr; }
  .explore .content .item .left .img { order: 2; text-align: center; }
  .explore .content .item .left .small_title { order: 1; }
}