{include file='common/header'}
<style>
.index_hd .hd_title{
    font-family: "Bold" !important;
}
.product_title_wrap .product_info{
    font-family: "Light" !important;
}
.company_subscribe .subscribe_desc{
    font-family: "Light" !important;
}
.advantage_item figcaption .item_tit{
    font-family: "Bold" !important;
}
.advantage_item figcaption .item_info{
    font-family: "Light" !important;
}
.index_company_intr .company_intr_wrap{
    font-family: "Light" !important;
}
.index_news .news_item .news_title a,.index_news .news_item .news_desc{
    font-family: "Light" !important;
}
.news_items .item_img{
    aspect-ratio: 1 / 1;
    overflow: hidden;
}
</style>
<!-- banner -->
<section class="index_banner_container" style="{if $isMobile == false}margin-top: 65px;{/if};min-height: 250px;">
  <section class="slider_banner swiper-container">
    <div class="swiper-wrapper">
      {volist name="banner" id="item"}
      <div class="swiper-slide indexswiperimg" style="background-image: url({$item.cover});">
        <div class="indexswiperimgcontent">
            <div class="banner_img">{$item.content|raw}</div>
            <div class="banner_text">
              <h4>{$item.title}</h4>
              <p>{$item.c_title}</p>
              <a href="{$item.url}">learn more<i></i></a>
            </div>
        </div>
      </div>
      {/volist}
    </div>
    <div class="slider_swiper_control">
      <div class="swiper-buttons">
        <div class="swiper-pagination swiper-pagination-white"></div>
      </div>
    </div>
  </section>
</section>

<!-- web_main start -->
<section class="web_main index_main">
  <section class="layout">

    <!-- index_product -->
    <section class="index_product">
      <div class="product_title_wrap {{if $isMobile == false}}wow fadeInLeftA{/if} index_hd" data-wow-delay=".2s" data-wow-duration=".8s">
        <div class="hd_title">
            {$catalog.field.ccfzzE}
          <!--<div class="product-pagination swiper-pagination-white"></div>-->
        </div>
        <p class="product_info">{$catalog.field.XB2s3h}</p>
        <a href="{$catalog.field.YQ3j6P}" class="product_more">see more</a>
      </div>
      <div class="index_bd">
        <div class="product_items">
          <ul class="swiper-wrapper">
            {volist name="$catalog.field.XK85xb" id="item"}
            <li class="product_item swiper-slide {if $isMobile == false}wow fadeInRightA{/if}" data-wow-delay=".1s" data-wow-duration=".8s">
              <figure>
                <span class="item_img">
                  <img class="lazy" data-original="{$item.img}" alt="{$item.title}" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" />
                  <a href="{$item.url}"></a>
                </span>
                <figcaption>
                  <h2 class="item_title"><a href="{$item.url}">{$item.title}</a></h2>
                  <a href="{$item.url}" class="item_more">read more</a>
                </figcaption>
              </figure>
            </li>
            {/volist}
          </ul>
        </div>
        <div class="product-buttons">
          <div class="product-button-prev swiper-button-white"></div>
          <div class="product-button-next swiper-button-white"></div>
          <div class="product-pagination swiper-pagination-white"></div>
        </div>
      </div>
    </section>
    <!-- index_product end -->
    <!-- index_advantage_icon -->
    <section class="index_advantage_container">
      <ul class="advantage_items flex_row">
        {volist name="$catalog.field.GHbeba" id="item"}
        <li class="advantage_item {if $isMobile == false}wow fadeInLeftA{/if}" data-wow-delay=".1s" data-wow-duration=".8s">
          <figure> 
            <span class="item_img">
              <img 
                  class="lazy" 
                  data-original="{$item.img}" 
                  src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" 
                  alt="{$item.title}" />
            </span>
            <figcaption>
              <h3 class="item_tit">{$item.title}</h3>
              <p class="item_info">{$item.content}</p>
              <a href="{$item.url}" class="item_more">learn more</a>
            </figcaption>
          </figure>
        </li>
        {/volist}
      </ul>
    </section>
    <!-- index_advantage_icon end -->

    <!-- index_company_intr -->
    <section class="index_company_intr flex_row">
      <div class="intr_cont_items {if $isMobile == false}wow fadeInLeftA{/if}" data-wow-delay=".5s" data-wow-duration=".8s">
        <ul class="swiper-wrapper">
          {volist name="$catalog.field.k6kSAz" id="item"}
          <li class="swiper-slide">
            <img class="lazy" alt="indeximg" data-original="{$item.url}" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"/>
          </li>
          {/volist}
        </ul>
        <div class="swiper_control">
          <div class="swiper_buttons">
            <div class="swiper-button-prev"></div>
            <div class="swiper-button-next"></div>
          </div>
        </div>
      </div>
      <div class="company_intr_wrap {if $isMobile == false}wow fadeInRightA{/if}" data-wow-delay=".5s" data-wow-duration=".8s">
        <div class="index_hd">
          <h3 class="hd_title">{$catalog.field.sXsAx7}</h3>
        </div>
        <p class="company_intr_desc">{$catalog.field.F6xwxy | raw}</p>
        <a href="{$catalog.field.G3akrD}" class="learn_more">understand more<i></i></a>
      </div>
    </section>
    <!-- index_company_intr end -->

    <!-- index_news -->
    <section class="index_news">
      <div class="index_hd">
        <h3 class="hd_title">latest news</h3>
      </div>
      <div class="index_bd">
        <ul class="news_items flex_row">
          {volist name=":news([],4,12038,['sort' => 'desc', 'create_time' => 'desc'])" id="item"}
          <li class="news_item {if $isMobile == false}wow fadeInLeftA{/if}" data-wow-delay=".1s" data-wow-duration=".8s">
            <figure>
              <span class="item_img">
                <img class="lazy" data-original="{$item.cover}" alt="{$item.title}" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"/>
                <a href="{$item.url}" class="img_shadow"></a>
              </span>
              <figcaption>
                <h3 class="news_title">
                    <a href="{$item.url}" style="    word-break: break-all;">{$item.title}</a>
                </h3>
                <time class="news_time">{$item.create_time}</time>
                <p class="news_desc" style="    word-break: break-all;">{$item.description}</p>
                <a href="{$item.url}" class="news_more">read more</a>
              </figcaption>
            </figure>
          </li>
          {/volist}
        </ul>
      </div>
    </section>
    <!-- index_news  end-->
    <!---- index- hot- pd-->

    <section class="hot_product_container">
      <div class="index_hd">
        <h3 class="hd_title">hot products</h3>
      </div>
      <div class="index_bd">
        <ul class="product_items flex_row">
          {volist name=":product([],8,0,['sort' => 'desc', 'create_time' => 'desc'])" id="item"}
          <li class="product_item {if $isMobile == false}wow fadeInLeftA{/if}" data-wow-delay=".1s" data-wow-duration=".8s">
            <div class="item_img">
              <img class="lazy" data-original="{$item.cover}" alt="{$item.title}" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"/>
              <a href="{$item.url}" class="img_shadow"></a>
            </div>
          </li>
          {/volist}
        </ul>
      </div>
    </section>

    <!---- index- hot- pd end-->

    <!--company_subscribe-->
    <section class="company_subscribe {if $isMobile == false}wow fadeInLeftA{/if}" data-wow-delay=".3s" data-wow-duration=".8s">
      <div class="index_hd {if $isMobile == false}wow fadeInLeftA{/if}" data-wow-delay=".5s">
        <h3 class="hd_title">{$catalog.field.4dhjGx}</h3>
      </div>
      <div class="index_bd">
        {$catalog.field.FyNHYp | raw}
        <div class="learn_more {if $isMobile == false}wow fadeInLeftA{/if}" data-wow-delay=".9s">
             <a href="javascript:" class="button">understand more</a> 
        </div>
      </div>
    </section>
    <!--company_subscribe-->

  </section>
</section>
<!--// web_main end -->
{include file='common/footer'}