---
import Layout from "../layouts/Layout.astro";
---
<Layout isShowHeader = {false}>
    <div class="container-fluid" style="padding-top: 5rem;padding-bottom:2rem">
        <div class="hero-content">
          <!-- <span class="text-title aos-init aos-animate" data-aos="fade-up" data-aos-delay="400">About Us</span> -->
          <div class="hero-content-left">
            <h1 class="text1 aos-init aos-animate" data-aos="zoom-out-right" data-aos-delay="300">关于我们</h1>
            <span class="text2 aos-init aos-animate" data-aos="fade-up" data-aos-delay="400">
              淮安川界信息技术有限公司成立于2021年，我们是一家深植于互联网领域，专注于产品开发与创新的前沿企业。自成立以来，我们始终秉持着以技术为驱动，以用户为核心的发展理念，矢志不渝地致力于提供卓越的数字化解决方案。我们的使命不仅仅在于打造功能强大、安全可靠的互联网产品，更在于通过我们的专业能力和不懈努力，帮助客户实现业务的持续增长，推动其运营模式的高效升级，并创造更加人性化、便捷且富有吸引力的用户体验。
            </span>
            <span class="text2 aos-init aos-animate" data-aos="fade-up" data-aos-delay="500">
              在这个快速变化的数字时代，我们紧跟技术潮流，不断探索和应用最新的互联网技术，包括但不限于大数据、云计算、人工智能、物联网等，以创新驱动产品迭代和服务升级。我们的团队汇聚了来自不同背景的精英人才，他们拥有丰富的行业经验、深厚的技术功底和敏锐的创新思维，共同构成了我们强大的研发实力和竞争优势。
            </span>
            <span class="text2 aos-init aos-animate" data-aos="fade-up" data-aos-delay="600">
              我们深知，每一个客户的需求都是独一无二的。因此，我们坚持提供定制化服务，从深入理解客户的业务场景和需求出发，量身定制最适合的数字化解决方案。无论是助力传统企业数字化转型，还是陪伴初创企业快速成长，我们都能够成为客户信赖的伙伴，携手共赴成功之路。
            </span>
            <span class="text2 aos-init aos-animate" data-aos="fade-up" data-aos-delay="700">
              展望未来，我们将继续秉承开放、合作、共赢的态度，深化与各界伙伴的交流与合作，共同推动互联网行业的繁荣发展。同时，我们也将持续优化自身，不断提升技术创新能力和服务水平，为全球范围内的客户提供更加优质、高效、全面的数字化服务，共创美好未来。
            </span>
          </div>
    
          <div class="hero-content-right">
            <h2 class="text3 aos-init aos-animate" data-aos="zoom-out-right" data-aos-delay="400">川界成长与发展</h2>
    
            <p class="text4 aos-init aos-animate" data-aos="zoom-out-right" data-aos-delay="300">多维发展空间</p>
            <li class="text5 aos-init aos-animate" data-aos="fade-up" data-aos-delay="500">提供不同类型、赛道、地域和文化的实战机会</li>
    
            <p class="text4 aos-init aos-animate" data-aos="zoom-out-right" data-aos-delay="300">高人才密度</p>
            <li class="text5 aos-init aos-animate" data-aos="fade-up" data-aos-delay="500">汇聚优秀人才，共同成长、相互激发</li>
    
            <p class="text4 aos-init aos-animate" data-aos="zoom-out-right" data-aos-delay="300">学习和培养</p>
            <li class="text5 aos-init aos-animate" data-aos="fade-up" data-aos-delay="500">提供开放的学习资源和针对性培训，不断自我提升</li>
          </div>
        </div>

      </div>
</Layout>
<style>
    ::-webkit-scrollbar-button {
  display: none;
}
::-webkit-scrollbar-corner {
  background-color: transparent;
}
::-webkit-scrollbar {
  width: 0;
  display: none;
}

.ac-more:hover {
  cursor: pointer;
  color: #5b63ff;
}

.hover-pointer:hover {
  cursor: pointer;
}

.bg-light-pink {
  background-color: #fcf2f0;
  -webkit-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
}

.hero-section-padding {
  padding: 320px 0 220px;
}

@media only screen and (min-width: 1800px) and (max-width: 2600px) {
  .hero-section-padding {
    padding: 350px 0 200px;
    height: 100vh;
  }
}

@media only screen and (min-width: 1200px) and (max-width: 1365px) {
  .hero-section-padding {
    padding: 300px 0 143px;
  }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .hero-section-padding {
    padding: 300px 0 143px;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .hero-section-padding {
    padding: 170px 0 140px;
  }
}

@media only screen and (max-width: 767px) {
  .hero-section-padding {
    padding: 110px 0 70px;
  }
}

/* 文案 */
.hero-content {
  display: flex;
  font-family: 'Proxima Nova Rg';
}

.hero-content .text-title {
  color: #36299a;
  font-size: 30px;
  font-weight: bold;
}

/* left */
.hero-content .hero-content-left {
  width: 34%;
  display: flex;
  flex-direction: column;
  margin-left: 8%;
}

.hero-content .hero-content-left .text1 {
  font-weight: bold;
  font-size: 48px;
  color: #000000;
  font-family: 'Proxima Nova Rg';
  line-height: 60px;
  letter-spacing: 10px;
}

.hero-content .hero-content-left .text2 {
  font-size: 15px;
  color: #333333;
  line-height: 25px;
  margin-top: 30px;
}

/* right */
.hero-content .hero-content-right {
  margin-left: 12%;
}

.hero-content .hero-content-right .text3 {
  color: #36299a;
  font-size: 30px;
  font-weight: bold;
  font-family: 'Proxima Nova Rg';
  margin-bottom: 50px;
  margin-top: 10px;
  letter-spacing: 4px;
}

.hero-content .hero-content-right .text4 {
  color: #36299a;
  font-size: 17px;
  font-weight: bold;
  margin-top: 26px;
}

.hero-content .hero-content-right .text5 {
  color: #333333;
  font-size: 16px;
}

.body-dark-mode-wrap.dark-visible .hero-content .text-title {
  color: #d1d1d1;
}
.body-dark-mode-wrap.dark-visible .hero-content .hero-content-left .text1 {
  color: #ffffff;
}
.body-dark-mode-wrap.dark-visible .hero-content .hero-content-left .text2 {
  color: #9b9b9b;
}
.body-dark-mode-wrap.dark-visible .hero-content .hero-content-right .text3 {
  color: #ffffff;
}
.body-dark-mode-wrap.dark-visible .hero-content .hero-content-right .text4 {
  color: #d1d1d1;
}
.body-dark-mode-wrap.dark-visible .hero-content .hero-content-right .text5 {
  color: #9b9b9b;
}

@media only screen and (min-width: 1200px) and (max-width: 1370px) {
  .hero-content .text-title {
    font-size: 28px;
  }

  .hero-content .hero-content-left .text1 {
    font-size: 44px;
    line-height: 60px;
    letter-spacing: 10px;
  }

  .hero-content .hero-content-left .text2 {
    font-size: 13px;
    line-height: 23px;
    margin-top: 26px;
  }

  .hero-content .hero-content-right .text3 {
    font-size: 28px;
    margin-bottom: 50px;
    margin-top: 8px;
    letter-spacing: 2px;
  }

  .hero-content .hero-content-right .text4 {
    font-size: 15px;
    margin-top: 20px;
  }

  .hero-content .hero-content-right .text5 {
    font-size: 14px;
  }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .hero-content .text-title {
    font-size: 26px;
  }

  .hero-content .hero-content-left .text1 {
    font-size: 40px;
    line-height: 50px;
    letter-spacing: 8px;
  }

  .hero-content .hero-content-left .text2 {
    font-size: 12px;
    line-height: 22px;
    margin-top: 22px;
  }

  .hero-content .hero-content-right .text3 {
    font-size: 26px;
    margin-bottom: 40px;
    margin-top: 8px;
    letter-spacing: 2px;
  }

  .hero-content .hero-content-right .text4 {
    font-size: 14px;
    margin-top: 16px;
  }

  .hero-content .hero-content-right .text5 {
    font-size: 12px;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .hero-content .text-title {
    font-size: 20px;
  }

  .hero-content .hero-content-left .text1 {
    font-size: 32px;
    line-height: 42px;
    letter-spacing: 7px;
  }

  .hero-content .hero-content-left .text2 {
    font-size: 10px;
    line-height: 18px;
    margin-top: 16px;
  }

  .hero-content .hero-content-right .text3 {
    font-size: 22px;
    margin-bottom: 34px;
    margin-top: 6px;
    letter-spacing: 2px;
  }

  .hero-content .hero-content-right .text4 {
    font-size: 12px;
    margin-top: 14px;
    line-height: 12px;
    margin-bottom: 8px;
  }

  .hero-content .hero-content-right .text5 {
    font-size: 10px;
  }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
  .hero-content .text-title {
    font-size: 14px;
  }

  .hero-content .hero-content-left .text1 {
    font-size: 22px;
    line-height: 34px;
    letter-spacing: 6px;
  }

  .hero-content .hero-content-left .text2 {
    font-size: 8px;
    line-height: 16px;
    margin-top: 10px;
  }

  .hero-content .hero-content-right .text3 {
    font-size: 16px;
    margin-bottom: 24px;
    margin-top: 6px;
  }

  .hero-content .hero-content-right .text4 {
    font-size: 10px;
    margin-top: 10px;
    line-height: 16px;
    margin-bottom: 0;
  }

  .hero-content .hero-content-right .text5 {
    font-size: 8px;
  }
}

/* wap */
@media only screen and (max-width: 767px) {
  .hero-content {
    display: flex;
    flex-direction: column;
    padding: 30px 15px;
    margin-bottom: 40px;
  }

  .hero-content .hero-content-left {
    width: 100%;
    display: flex;
    flex-direction: column;
    margin-left: 0;
  }

  /* right */
  .hero-content .hero-content-right {
    width: 100%;
    margin-left: 0;
    margin-top: 20px;
  }

  .hero-content .hero-content-right .text3 {
    margin-bottom: 14px;
  }

  .hero-content .hero-content-right .text4 {
    margin-top: 10px;
  }
}

</style>