:root {
  --h1-size: 48px;
  --banner-text-size: 30px;
  --card-h1-size: 96px;
  --card-text-size: 24px; }

@media screen and (max-width: 768px) {
  :root {
    --h1-size: 32px;
    --banner-text-size: 24px;
    --card-h1-size: 56px;
    --card-text-size: 16px; } }
@media screen and (max-width: 350px) {
  :root {
    --h1-size: 26px;
    --banner-text-size: 18px;
    --card-h1-size: 40px;
    --card-text-size: 16px; } }
html {
  scroll-behavior: unset; }

body {
  background-color: #fff;
  overflow-x: hidden; }

header::after {
  background-color: #fff; }

.footer-ad img {
  display: none; }

body {
  font-family: 'ProductSans'; }

.banner {
  margin-left: 25vw;
  background-color: #fff;
  height: 100vh;
  display: flex;
  align-items: center; }
  .banner .banner-inside .title {
    font-size: var(--h1-size); }
    .banner .banner-inside .title span:nth-child(1) {
      font-weight: 700;
      background: linear-gradient(259deg, #ac6bff 8.42%, #327bff 55.66%, #28d7ff 104.92%);
      background-clip: text;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      margin-right: 12px; }
    .banner .banner-inside .title span:nth-child(2) {
      color: #000;
      font-weight: 700; }
    .banner .banner-inside .title span.no-color {
      color: #000 !important;
      background: none;
      background-clip: unset;
      -webkit-background-clip: unset;
      -webkit-text-fill-color: unset; }
    .banner .banner-inside .title span.color {
      background: linear-gradient(259deg, #ac6bff 8.42%, #327bff 55.66%, #28d7ff 104.92%);
      background-clip: text;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent; }
  .banner .banner-inside .hello {
    margin-top: 40px; }
    .banner .banner-inside .hello img {
      height: 60px; }
  .banner .banner-inside .content {
    width: 700px;
    position: relative;
    margin-left: 0px; }
    .banner .banner-inside .content span {
      transition: opacity 0.2s linear; }
    .banner .banner-inside .content .banner-text {
      font-size: var(--banner-text-size);
      font-weight: 400;
      z-index: 1;
      line-height: 150%;
      text-align: justify; }
    .banner .banner-inside .content .banner-cover {
      z-index: 2;
      width: 100%;
      height: 100%;
      background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(255, 255, 255, 0.9) 20%, rgba(255, 255, 255, 0.9) 100%);
      position: absolute;
      top: 0px;
      transform: translateY(0%);
      transition: all 4s ease-in-out; }
      .banner .banner-inside .content .banner-cover.hide {
        transform: translateY(100%); }
  .banner .banner-inside .earth {
    position: absolute;
    left: 880px; }
    .banner .banner-inside .earth img {
      max-width: 450px; }

@media screen and (max-height: 830px) {
  .banner {
    height: auto;
    padding-top: 50px; } }
.navigation {
  top: 50%;
  transform: translateY(-50%);
  left: 3%;
  position: fixed;
  width: 250px;
  font-size: 20px;
  font-weight: 400;
  z-index: 20; }
  .navigation span:nth-child(1) {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    background-color: #f0f0f0;
    border-radius: 50%;
    position: relative;
    transition: all 0.5s; }
    .navigation span:nth-child(1)::after {
      content: " ";
      display: block;
      width: 20px;
      height: 20px;
      inset: auto;
      border-radius: 99px;
      background-color: #000;
      position: absolute;
      transform: scale(0);
      transition: all 0.5s; }
  .navigation div {
    display: flex;
    justify-content: center;
    flex-direction: column; }
    .navigation div a {
      display: flex;
      align-items: center;
      margin-bottom: 30px; }
      .navigation div a img {
        width: 48px;
        margin-right: 15px; }
      .navigation div a span:nth-child(2) {
        margin-left: 15px; }
    .navigation div.current span:nth-child(1), .navigation div:hover span:nth-child(1) {
      background-color: var(--bg-color); }
      .navigation div.current span:nth-child(1)::after, .navigation div:hover span:nth-child(1)::after {
        transform: scale(1); }

.milestone {
  margin-left: 25vw;
  padding-bottom: 300px;
  padding-top: 100px;
  position: relative; }
  .milestone .title {
    font-size: var(--h1-size); }
    .milestone .title span:nth-child(1) {
      font-weight: 700;
      background: linear-gradient(259deg, #ac6bff 8.42%, #327bff 55.66%, #28d7ff 104.92%);
      background-clip: text;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      margin-right: 12px; }
    .milestone .title span:nth-child(2) {
      color: #000;
      font-weight: 700; }
  .milestone .btn {
    display: none;
    position: absolute;
    width: 160px;
    background-color: transparent;
    top: 65%;
    right: 0;
    z-index: 10; }
    .milestone .btn div {
      position: relative; }
    .milestone .btn a {
      display: inline-block; }
    .milestone .btn img {
      width: 50px;
      margin-right: 10px;
      max-width: 50px; }
  .milestone .milestone-list {
    width: 78vw;
    border-bottom: 1px solid;
    border-image: linear-gradient(to right, #909090, rgba(193, 193, 193, 0));
    border-image-slice: 1;
    overflow: hidden;
    display: flex;
    margin-top: 80px;
    position: relative; }
    .milestone .milestone-list::after {
      content: "";
      position: absolute;
      display: block;
      width: 140px;
      height: 100%;
      top: 0;
      right: 0;
      background: linear-gradient(270deg, #fff 0%, rgba(255, 255, 255, 0) 95.92%); }
    .milestone .milestone-list .milestone-item {
      padding: 0 32px 0 40px;
      padding-bottom: 200px;
      position: relative;
      background: url(../images/newabout-banner2-singles.png) center bottom repeat-x;
      background-size: 249px 25px; }
      .milestone .milestone-list .milestone-item:not(:last-child)::after {
        content: "";
        display: block;
        width: 1px;
        height: 100%;
        position: absolute;
        right: 0;
        top: 0;
        background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.4) 50%, rgba(0, 0, 0, 0) 100%); }
      .milestone .milestone-list .milestone-item:last-child::after {
        display: none; }
      .milestone .milestone-list .milestone-item .time {
        color: #000;
        text-align: right;
        font-family: Lobster;
        font-size: 20px;
        font-weight: 400;
        letter-spacing: 0.8px;
        margin-top: var(--top, 0); }
      .milestone .milestone-list .milestone-item .milestone-wraper {
        width: var(--width, 216px);
        height: 146px;
        position: relative;
        border-radius: 8px;
        background: var(--bg-color, #ffc701);
        box-shadow: 0px 4px 20.9px 0px rgba(0, 0, 0, 0.25);
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
        margin-top: 25px;
        color: #000;
        text-align: center;
        font-size: 20px;
        font-weight: 700;
        line-height: 150%; }
        .milestone .milestone-list .milestone-item .milestone-wraper img {
          width: var(--mi-width, 90px);
          position: absolute;
          left: -15px;
          top: -57px; }

.miss-title {
  margin-left: 25vw;
  padding-top: 100px;
  font-size: var(--h1-size); }
  .miss-title span:nth-child(1) {
    font-weight: 700;
    background: linear-gradient(259deg, #ac6bff 8.42%, #327bff 55.66%, #28d7ff 104.92%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-right: 12px; }
  .miss-title span:nth-child(2) {
    color: #000;
    font-weight: 700; }

.content {
  display: flex;
  margin-left: 25vw;
  margin-top: 70px;
  margin-bottom: 200px; }
  .content .mission {
    max-width: 560px;
    height: 636px;
    width: 100%;
    border-radius: 20px;
    background: linear-gradient(133deg, #2cb7ff 25.77%, #3c7aff 100%);
    box-shadow: 0px 4px 46.5px 0px rgba(0, 0, 0, 0.14);
    margin-right: 50px;
    display: flex;
    flex-direction: column; }
    .content .mission .title {
      color: #fff;
      font-size: var(--card-h1-size);
      font-weight: 400;
      margin-left: 46px;
      margin-top: 40px; }
    .content .mission .text {
      color: #fff;
      font-size: var(--card-text-size);
      font-weight: 400;
      line-height: 151.019%;
      padding: 0 46px;
      max-width: 550px;
      margin-top: 20px; }
    .content .mission img {
      width: 283px;
      height: 184px;
      margin-left: 250px; }
  .content .vision {
    max-width: 560px;
    width: 100%;
    position: relative;
    padding: 82px 34px 43px 42px;
    border-radius: 20px;
    background: linear-gradient(127deg, #3c7fff 1.75%, #8e70ff 97.04%);
    box-shadow: 0px 4px 46.5px 0px rgba(0, 0, 0, 0.14);
    margin-top: 120px; }
    .content .vision .title {
      color: #fff;
      font-size: var(--card-h1-size);
      font-weight: 400; }
    .content .vision .text {
      color: #fff;
      font-size: var(--card-text-size);
      font-weight: 400;
      line-height: 151.019%;
      max-width: 534px;
      margin-top: 43px; }
    .content .vision img {
      width: 283px;
      height: 284px;
      position: absolute;
      top: -73px;
      left: 355px; }

.panel {
  background-color: #fff; }

.news-title {
  margin-left: 25vw;
  padding-top: 110px; }
  .news-title span:nth-child(1) {
    font-size: 48px;
    font-weight: 700;
    margin-right: 10px;
    background: linear-gradient(259deg, #ac6bff 8.42%, #327bff 55.66%, #28d7ff 104.92%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent; }
  .news-title span:nth-child(2) {
    color: #000;
    font-size: 48px;
    font-weight: 700; }

.press-list {
  padding-bottom: 100px; }

@media screen and (max-width: 1960px) {
  .milestone .btn {
    display: block; } }
@media screen and (max-width: 1780px) {
  .banner .banner-inside .earth img {
    margin-left: -80px; } }
@media screen and (max-width: 1680px) {
  .banner,
  .miss-title,
  .content,
  .news-title,
  .milestone {
    margin-left: 20vw; }

  .banner .banner-inside .content {
    width: 650px; }
  .banner .banner-inside .earth {
    transform: scale(0.8);
    margin-left: -150px; }

  .content .mission {
    max-width: 500px; }
    .content .mission img {
      transform: scale(0.8);
      margin-left: 240px; }
  .content .vision {
    max-width: 460px; }
    .content .vision img {
      transform: scale(0.8);
      margin-left: -60px; } }
@media screen and (max-width: 1520px) {
  .navigation span:nth-child(2) {
    display: none; } }
@media screen and (max-width: 1360px) {
  .banner,
  .miss-title,
  .content,
  .news-title,
  .milestone {
    margin-left: 13vw; }

  .content .mission {
    max-width: 420px; }
    .content .mission img {
      transform: scale(0.7);
      margin-left: 180px;
      margin-top: -25px; }
  .content .vision {
    max-width: 390px; }
    .content .vision img {
      transform: scale(0.7);
      margin-left: -120px;
      margin-top: -20px; }

  .milestone .milestone-list {
    width: 86vw; }

  .navigation {
    width: 50px; }
    .navigation div a span {
      display: block;
      width: 100%;
      border-radius: 50%; } }
@media screen and (max-width: 1250px) {
  .banner .banner-inside .earth img {
    transform: scale(0.8);
    margin-left: -120px; } }
@media screen and (max-width: 1160px) {
  .banner,
  .miss-title,
  .content,
  .news-title,
  .milestone {
    margin-left: 13vw; }

  .banner .banner-inside .content {
    width: 550px; }
  .banner .banner-inside .earth {
    margin-left: -290px; }

  .content {
    display: flex;
    flex-wrap: wrap; }
    .content .mission {
      max-width: 650px; }
      .content .mission img {
        transform: scale(0.9);
        margin-left: 380px;
        margin-top: 10px; }
    .content .vision {
      max-width: 650px; }
      .content .vision div:nth-child(2) {
        width: 100%;
        max-width: 600px; }
      .content .vision img {
        transform: scale(0.9);
        margin-left: 100px;
        margin-top: 0px; }

  .milestone .btn {
    width: 150px; }
    .milestone .btn div {
      width: 100%; }
  .milestone .milestone-list {
    width: 86vw; } }
@media screen and (max-width: 950px) {
  .navigation {
    visibility: hidden; }

  .banner .banner-inside .content {
    width: 650px; }
  .banner .banner-inside .earth {
    display: none; }

  .content {
    display: flex;
    flex-wrap: wrap; }
    .content .mission {
      max-width: 550px; }
      .content .mission div:nth-child(2) {
        max-width: 500px; }
      .content .mission img {
        margin-left: 270px;
        margin-top: -20px; }
    .content .vision {
      max-width: 550px; }
      .content .vision img {
        margin-left: 20px;
        margin-top: -10px; } }
@media screen and (max-width: 750px) {
  .banner,
  .miss-title,
  .content,
  .news-title,
  .milestone {
    margin-left: 0; }

  .milestone .title, .miss-title, .news-title {
    text-align: left;
    padding-left: 7vw; }

  .milestone {
    margin-left: 0;
    margin-top: 0;
    padding-bottom: 0;
    padding-top: 0;
    text-align: center; }
    .milestone .milestone-list {
      flex-direction: column;
      overflow: unset;
      margin: 0 auto;
      border-bottom: none;
      border-image: unset;
      border-image-slice: unset; }
      .milestone .milestone-list::after {
        display: none; }
      .milestone .milestone-list .milestone-item {
        width: 100%;
        background: none;
        padding: 0 !important; }
        .milestone .milestone-list .milestone-item::after {
          display: none !important; }
        .milestone .milestone-list .milestone-item .time {
          margin-top: 30px !important; }
        .milestone .milestone-list .milestone-item .milestone-wraper {
          width: 100%;
          margin-top: 15px; }
    .milestone .btn {
      display: none; }

  .banner {
    box-sizing: border-box;
    height: auto;
    padding: 100px 0;
    width: 86%;
    margin: 0 auto; }
    .banner .banner-inside .hello img {
      height: 30px; }
    .banner .banner-inside .content {
      width: 100%;
      margin-top: 30px;
      margin-bottom: 0;
      overflow: hidden; }

  .content {
    margin-bottom: 30px; }
    .content .mission, .content .vision {
      margin: 0 auto;
      height: auto;
      margin-bottom: 30px;
      width: 86%;
      padding: 0;
      padding-bottom: 20px; }
      .content .mission div.title, .content .vision div.title {
        padding: 20px 15px 15px;
        margin: 0; }
      .content .mission div.text, .content .vision div.text {
        padding: 0;
        margin-left: 0;
        margin-top: 0;
        padding: 15px;
        box-sizing: border-box; }
      .content .mission img, .content .vision img {
        margin-left: 30px;
        position: unset;
        width: 50%;
        height: auto;
        margin-top: 20px; }

  .news-title {
    padding-top: 0; }

  .press-list {
    max-width: 86%;
    padding: 0;
    padding-bottom: 50px; }
    .press-list .press-item {
      width: 100% !important; }
      .press-list .press-item .thumb-img {
        height: auto !important; } }

/*# sourceMappingURL=page-about-us.css.map */