{extend name="base" /}
{block name="main"}
<style>
    .tabs-group {
        position: relative;
        overflow-y: hidden;
    }
    .tabs-group .title {
        float: left;
        padding: 10px 0;
        width: 80px;
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        word-wrap: normal;
    }
    .tabs-group .content {
        list-style: none;
        padding: 0;
        margin: 0 0 0 60px;
    }
   .tabs-group .content > li {
        float: left;
        padding: 5px 12px;
    }
    .tabs-group .content > li > a {
        display: block;
        padding: 5px 10px;
        border: none;
        -webkit-border-radius: 4px;
        -webkit-background-clip: padding-box;
        -moz-border-radius: 4px;
        -moz-background-clip: padding;
        border-radius: 4px;
        background-clip: padding-box;
        color: #333;
        -webkit-transition: all 0.3s ease;
        -moz-transition: all 0.3s ease;
        -o-transition: all 0.3s ease;
        transition: all 0.3s ease;
    }
    .tabs-group .content > li.active > a,
     .tabs-group .content > li:focus > a,
   .tabs-group .content > li:hover > a {
        color: #fff;
    }
</style>
<div class="container Wauto">
    <div class="bnBox cateBn">
        {ld:slide name="product_banner"}
        <div class="cateBnImg" style="background-image: url({$item.image})">

        </div>
        {/ld:slide}
    </div>
    <div class="main w1200">
        <div class="article w1">
            <div class="archive-top anim fadeInUp">
                <div class="archive-title">
                    <h1 >{$category.name}</h1>
                    <span></span>
                </div>
                <div class="archive-description">
                    <p>{$category.seo_description}</p>
                </div>
            </div>
            <div class="subcate anim fadeInUp" data-wow-delay=".3s">
                <div id="subcate" data-type="category" data-infoid="2">
                    <ul>
                        {ld:sort pid="$topid"}
                        <li class="{if $item['id']==$category['id']}active{/if}"><a
                        href="{$item.url}">{$item.name}</a></li>
                        {/ld:sort}
                    </ul>
                </div>
                {ld:filter mid="$category['mid']"}
                <div class="tabs-group">
                    <div class="title">{$item.title}:</div>
                    <ul class="content clearfix">
                        {volist name="$item.content" id="li"}
                        <li class="{$li.active?'active':''}"><a href="{$li.url}">{$li.title}</a></li>
                        {/volist}
                    </ul>
                </div>
                {/ld:filter}
            </div>
            <div class="post list">
                <div class="PostShow">
                    <ul>
                        {ld:list cid="$category['id']" page="true"}
                        <li data-id="{$item.id}" class="anim fadeInUp">
                            <div class="post-img loading"> <a class="pic float-left" href="{$item.url}"
                                title="{$item.title}" rel="bookmark">
                                <div class="msk"></div>
                                <i class="fa fa-search"></i>
                                <img class="b-lazy" src="{$item.image}"
                                    data-src="{$item.image}" alt="{$item.title}" /> </a> </div>
                            <a href="{$item.url}" title="{$item.title}">
                                <h4>{$item.title}</h4>
                                <i class="h2">{$item.seo_description}</i>
                                <div class="pt-2">
                                    <i class="fa fa-long-arrow-right"></i>
                                </div>
                            </a>
                        </li>
                        {/ld:list}
                    </ul>
                </div>
                <div class="clearfix"></div>
            </div>

        </div>
        <div class="text-center">{$pages}</div>
    </div>
</div>
{/block}