{include file='zh-cn/common/header' title='关于我们' keywords='关于我们'
description='关于我们'} {include file='zh-cn/common/nav' }
<!-- breadcrumb-area start -->
<style>
  @media screen and (min-width: 1460px) {
    .swt-Container {
      width: 1620px;
    }
  }
  .swt-Container {
    margin-left: auto;
    margin-right: auto;
  }
  .tech {
    background-color: white;
  }
  .tech1 {
    padding-bottom: 130px;
  }
  .tech .title {
    height: 180px;
    line-height: 180px;
    font-size: 32px;
    font-family: Montserrat-Bold, Montserrat;
    font-weight: bold;
    color: #000000;
    text-align: center;
  }
  .techcon {
    height: 350px;
    background-color: #f2f2f2;
    display: flex;
    border-radius: 16px;
    margin-top: 20px;
  }
  .techcon .text img {
    margin-top: 80px;
    margin-left: 65px;
  }
  .techcon .tech-img img {
    margin-top: 25px;
    margin-left: 65px;
    width: 720px;
    height: 300px;
    border-radius: 8px;
  }
  .techcon .text .context {
    margin-left: 65px;
    width: 80%;
    font-size: 16px;
    font-family: Montserrat-Medium, Montserrat;
    font-weight: 500;
    color: #707070;
    line-height: 26px;
    margin-top: 14px;
  }
  .techcon > div {
    width: 50%;
  }

  .achive {
    height: 460px;
    text-align: center;
    background-color: white !important;
  }
  .achive .title,
  .timeline .title,
  .tech .title {
    height: 180px;
    line-height: 180px;
    font-size: 32px;
    font-family: Montserrat-Bold, Montserrat;
    font-weight: bold;
    color: #000000;
    text-align: center;
  }
  .timeline{
      padding-bottom: 100px;
  }
  .achive .number {
    height: 200px;
    font-size: 32px;
    font-family: Montserrat-Bold, Montserrat;
    font-weight: bold;
    color: #000000;
    text-align: center;
    display: flex;
  }

  .achive .number .achive_shuju {
    width: 25%;
  }
  .achive .number .achive_shuju .title1 {
    margin-top: 40px;
    font-size: 32px;
    font-family: Montserrat-Bold, Montserrat;
    font-weight: bold;
    color: #000000;
  }
  .achive .number .achive_shuju .subtitle1 {
    margin-top: 16px;
    font-size: 18px;
    font-family: Montserrat-Regular, Montserrat;
    font-weight: 400;
    color: #707070;
  }

  .timeline {
    background: #f2f2f2 !important;
    font-family: Montserrat, Montserrat;
  }
  .timeline1 {
    display: flex;
  }
  .timeline-con {
    width: 85%;
    height: 665px;
    background-color: white;
    border-radius: 16px;
  }

  .timeline-time {
    width: 15%;
  }

  .tech {
    background-color: white;
  }
  .tech1 {
    padding-bottom: 130px;
  }
  .techcon {
    height: 350px;
    background-color: #f2f2f2;
    display: flex;
    border-radius: 16px;
    margin-top: 20px;
  }
  .techcon > div {
    width: 50%;
  }
  .techcon .text img {
    margin-top: 80px;
    margin-left: 65px;
  }

  .techcon .text .year {
    margin-left: 65px;
    margin-top: 40px;
    font-size: 28px;
    font-family: Montserrat-Bold, Montserrat;
    font-weight: bold;
    color: #000000;
    line-height: 26px;
  }
  .techcon .text .context {
    margin-left: 65px;
    width: 80%;
    font-size: 16px;
    font-family: Montserrat-Medium, Montserrat;
    font-weight: 500;
    color: #707070;
    line-height: 26px;
    margin-top: 14px;
  }
  .techcon .tech-img img {
    margin-top: 25px;
    margin-left: 65px;
  }
  @media screen and (min-width: 1461px) and (max-width: 1720px) {
    .techcon {
      height: 300px;
      background-color: #f2f2f2;
      display: flex;
      border-radius: 16px;
    }
    .techcon .text img {
      margin-top: 50px;
    }

    .techcon .tech-img img {
      width: 550px;
      margin-top: 35px;
      margin-left: 65px;
    }
  }

  @media screen and (max-width: 1459px) {
    .techcon {
      height: 250px;
      background-color: #f2f2f2;
      display: flex;
      border-radius: 16px;
    }
    .techcon .text img {
      margin-top: 40px;
      margin-left: 65px;
    }

    .techcon .text .year {
      margin-left: 65px;
      margin-top: 20px;
      font-size: 22px;
      font-family: Montserrat-Bold, Montserrat;
      font-weight: bold;
      color: #000000;
      line-height: 26px;
    }
    .techcon .text .context {
      margin-left: 65px;
      width: 80%;
      font-size: 12px;
      font-family: Montserrat-Medium, Montserrat;
      font-weight: 500;
      color: #707070;
      line-height: 26px;
      margin-top: 14px;
    }
    .techcon .tech-img img {
      width: 440px;
      margin-top: 25px;
      margin-left: 15px;
    }
  }
  .box {
    width: 100%;
    display: flex;
  }

  .event_year {
    width: 100px;
    text-align: center;
    float: left;
    margin-top: 10px;
  }
  .event_year li {
    height: 50px;
    line-height: 50px;
    border-left: 1px solid #d4d4d4;
    font-size: 18px;
    color: #828282;
    cursor: pointer;
  }
  .event_year li.current {
    border-left: 4px solid #0066ff;
    color: #004bfa;
    font-weight: 600;
  }
  .event_year li label {
    width:140px;
  }
  .event_list li span {
    width: 127px;
    text-align: right;
    display: block;
    float: left;
    margin-top: 10px;
  }
  .event_list li p {
    width: 90%;
    margin-left: 24px;
    display: inline-block;
    padding-left: 10px;
    line-height: 25px;
    _float: left;
    font-size: 16px;
    margin-bottom: 10px;
    font-family: Montserrat-Medium, Montserrat;
    font-weight: 500;
    color: #707070;
    line-height: 20px;
  }
  .event_list li p span {
    width: 100%;
    text-align: left;
    padding: 0 15px 10px 15px;
    background: #fff;
    margin: 0;
    margin-left: 30px;
  }

  .titlelist {
    line-height: 24px;
    color: #8c8c8c;
    padding-bottom: 20px;
  }
  .titlelist dt {
    font-weight: bold;
    color: #666;
    white-space: nowrap;
    margin: 10px;
  }
  .titlelist dd {
    padding-left: 13px;
  }


  .con_event_list {
    width: 98%;
    height: 91%;
    overflow: auto;
    margin: 30px 10px;
  }
  .event_list {
    width: 98%;
    background: url('__LOCAL__assets/images/greyline.png') 50px 0 repeat-y;
  }
  .event_list h3 {
    margin: 0 0 0 35px;
    font-size: 24px;
    padding-left: 40px;
    background: url('__LOCAL__assets/images/greyyuandian.png') 3px 3px no-repeat;
    height: 38px;
    font-size: 20px;
    font-family: Montserrat-Bold, Montserrat;
    font-weight: bold;
    color: #000000;
    line-height: 30px;
  }
  .backgroundimg {
    background: url('__LOCAL__assets/images/yaundian.png') 3px 3px no-repeat !important;
  }
</style>
<div class="breadcrumb-area">
  <img log="img" src="__LOCAL__assets/images/about-banner.jpg" alt="Product" />
</div>
<!-- breadcrumb-area end --><!-- Service Area Start -->
<div class="service-area product-bg pd-80">

  <div class="timeline Container">
    <div class="swt-Container">
      <div class="title">品牌里程</div>
      <div class="timeline1 swt-Container">
        <div class="box">
          <div class="timeline-time">
            <ul class="event_year">
              <li class="current"><label for="2015-2017">2015-2017</label></li>
              <li><label for="2018-2021">2018-2021</label></li>
              <li><label for="2022">2022</label></li>
              <li><label for="2023">2023</label></li>
              <li><label for="2024">2024</label></li>
              <li><label for="2025">2025</label></li>
            </ul>
          </div>
          <div class="timeline-con">
            <div class="con_event_list">
              <ul class="event_list">
                <div>
                  <h3 id="2015-2017" class="backgroundimg">创立初期（2015-2017年）</h3>
                  <li>
                    <p>
                      <span
                        >2015年，牛顿定律（NTONPOWER）成立，专注于智能生活充电产品（如：插线板、充电头）。</span
                      >
                    </p>
                  </li>
                </div>
                <div>
                  <h3 id="2018-2021">快速发展期（2018-2021年）</h3>
                  <li>
                    <p>
                      <span
                        >专注智能充电生态，创新覆盖多元应用场景。海外线上销售稳居行业前十，业务覆盖全球30多个国家   ，引领行业创新发展。</span
                      >
                    </p>
                  </li>
                </div>
                <div>
                  <h3 id="2022">2022</h3>
                  <li>
                    <p>
                      <span
                        >拓展国内线上电商渠道，加强本土市场品牌认知度。</span
                      >
                    </p>
                  </li>
                </div>

                <div>
                  <h3 id="2023">2023</h3>
                  <li>
                    <p>
                      <span
                        >插线板全球销量1000万台。</span
                      >
                    </p>
                  </li>
                </div>
                <div>
                  <h3 id="2024">2024</h3>
                  <li>
                    <p>
                      <span
                        >用户规模突破海内外用户3500万+、全球社交媒体粉丝60万+。</span
                      >
                    </p>
                  </li>
                </div>
                <div>
                  <h3 id="2025">2025</h3>
                  <li>
                    <p>
                      <span
                        >全面进军新消费平台、锂电池和充电宝赛道，构建便携能源生态系统。</span
                      >
                    </p>
                  </li>
                </div>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<script
  type="text/javascript"
  src="https://code.jquery.com/jquery-3.6.0.min.js"
></script>
<script>
  $(function () {
    $('label').click(function () {
      $('.event_year>li').removeClass('current')

      $(this).parent('li').addClass('current')

      var year = $(this).attr('for')

      $('#' + year)
        .parent()
        .prevAll('div')
        .slideUp(800)

      $('#' + year)
        .parent()
        .slideDown(800)
        .nextAll('div')
        .slideDown(800)

      $('#' + year)
        .parent()
        .css('color', 'red')
        .nextAll('div')
        .css('color', 'black')
      //
      $('h3').removeClass('backgroundimg')

      $('#' + year).addClass('backgroundimg')
    })
  })
</script>
{include file='zh-cn/common/footer'} {include file='zh-cn/common/script' }