﻿/*banner样式*/
.banner{background:#479AC2 url(../Images/banner.jpg) no-repeat right center;color:#fff}
.banner .search{width:70%;margin:0px auto;}


/*列表模板分类*/
.template-top-bar{padding:25px 0px;margin-bottom:10px;border:1px solid #efefef}
    .template-top-bar .template-category-box a {
        height: 30px;
        line-height: 30px;
        border: 1px solid #eee;
        border-radius: 10px;
        padding: 0 20px;
        margin-right: 20px;
        font-size: 15px;
        color: #333;
        display: inline-block;
        *display: inline;
        zoom: 1;
        float: none;
        text-align: center;
        cursor: pointer;
    }
    .template-top-bar .template-category-box a:hover {
        color: #2f82ff;
    }
        .template-top-bar .template-category-box a.active {
            color: #fff;
            background: #2f82ff;
            border-color: #2f82ff;
        }

    .template-top-bar .search-bar {
        width:100%;
        height: 34px;
        border: solid #e5e5e5 1px;
        border-radius: 18px;
        line-height: 36px;
        text-align:left;
        overflow: hidden;
        position:relative;
    }
.template-top-bar .search-bar .ipt{border: 0;outline: 0;margin-left: 18px;line-height: 36px;height: 100%;padding: 0; overflow: hidden;vertical-align: top;font-family: 微软雅黑;color: #333;width:100%; height: 34px}
.template-top-bar .search-bar span{position:absolute;display:block;color:rgba(0,0,0,0.2);font-size:18px;text-align:center;width:50px;height:36px;line-height:34px;right:0px;top:0px;cursor:pointer}
.template-top-bar .search-bar span:hover{color: #2f82ff;}

.hangye-category-box  a{float:left;width:20%;line-height:3;cursor:pointer;text-overflow:clip;overflow:hidden;white-space:nowrap}
.hangye-category-box  a:hover,.hangye-category-box  .active{color: #2f82ff;}

.ajax-pagination li a{cursor:pointer!important}
.ajax-pagination li a:disabled{cursor:default}


@media (max-width:1000px) {
    .template-top-bar .template-category-box{padding-bottom:10px}
    .template-top-bar .template-category-box a {margin-bottom:10px}
    .hangye-category-box a{width:33.333%}
}

@media (max-width:767px) {
    .hangye-category-box a{width:50%;}
}

/*列表模板展示*/
.template-box {margin-bottom: 50px;}
.template-box > .template-card{display:block;position:relative;box-shadow:rgba(0,0,0,0.2) 0px 2px 10px;}
.template-box  .image-box {position:relative;height:300px;padding-top:160px;overflow:hidden}
.template-box  .image-box .fa{color:#999}
.template-box  .image-box img{display:block;position:absolute;width:100%;height:auto;top:0px;min-height:100%;transition:all ease-in-out 2s;}
.template-box  .image-box .btn-box{position:absolute;bottom:0px;left:0px;background:rgba(0,0,0,.5) url(../Images/zoom-icon.png) no-repeat center center;width:100%;height:100%;text-align:center;transition:all ease-in-out 0.3s;opacity:0;filter:Alpha(opacity=0)}
.template-box  .image-box .btn-box .btn:last-child{margin-right:0px}
.template-box  .template-card:hover .btn-box{opacity:10;filter:Alpha(opacity=100);}

.template-box .info-box{position:relative;padding:10px;background:url(../Images/temimage_bg.png) no-repeat center top;padding-top:19px;}
.template-box .info-box span{display:block;line-height:2.5}
.template-box .name{text-overflow:clip;overflow:hidden;white-space:nowrap}
.template-box .designer{color:#999}
.template-box .price{position:absolute;top:15px;right:15px;color:#fe0000;}
.template-box .bh{position:absolute;top:15px;right:15px;color:#999;}
@media (max-width:767px) {
.template-box  .image-box{height:200px;padding-top:120px;}
}

/*模板内容页*/
.template-image-box{width:100%;height:500px;border:15px solid #333333;border-radius:20px;overflow:hidden}
.template-image-box img{width:100%}
.templates-pc-icon{background:url(../Images/image-show-bg.jpg) center top no-repeat;height:115px;width:100%}

.template-info .btn-box .btn{}
.template-info .btn-box .btn:first-child{margin-right:100px}


.template-moduel-box{margin-top:20px;text-align:center}
.template-moduel-box .head-box{padding:30px 0px}
.template-moduel-box .head-box .head-title{font-weight:500;line-height:2;text-align:center;font-size:30px}
.template-moduel-box .head-box .head-desc{font-size:16px;line-height:2;color:#666}

.template-moduel-box .s-title{font-size:20px;line-height:2;color:#333;font-weight:400}
.template-moduel-box .s-desc{color:#999;font-size:14px;text-align:center}
.template-moduel-box .s-icon{width:148px;height:148px;background:url(../Images/service-icon.jpg) left top no-repeat;margin:30px auto;}
.template-moduel-box .s-icon-2{background-position:-148px 0px}
.template-moduel-box .s-icon-3{background-position:-296px 0px}
.template-moduel-box .s-icon-4{background-position:-443px 0px}

.template-more-box {margin-bottom:40px}
.template-more-box .template-card{box-shadow:rgba(0,0,0,0.2) 0px 2px 5px;padding:0px;border-radius:5px;overflow:hidden}
.template-more-box .template-card .head-bar{height:25px;background-color:#EBEDEF;text-align:left;padding-left:10px}
.template-more-box .template-card .head-bar .fa{font-size:8px;color:#FEFEFE}

.template-more-box  a.image-box{display:block;height:400px;overflow:hidden}
.template-more-box  a.image-box img{width:100%;transition:all ease-in-out 0.5s}
.template-more-box  a.image-box:hover img{width:100%;transform:scale(1.2)}
.template-more-box .template-tit{line-height:2.5;padding:10px 0px}

.bx-wrapper .bx-controls-auto, .bx-wrapper .bx-pager {position: absolute;top:420px;width: 100%;}
.bx-wrapper .bx-controls-direction a {top:250px!important}

@media (max-width:767px) {
.template-image-box{height:300px;border:0px solid #333333;border-radius:2px;margin-bottom:10px;}
.template-more-box  a.image-box{height:200px;}
}