.cl, .clearfix { zoom: 1; }
    .cl:after, .clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }

.wide1190 { margin: 0 auto; width: 1190px; }

.banner { background-image: url(/Site/images/case-banner.jpg); height: 620px; background-repeat: no-repeat; background-position: center; }

.pos-r { position: relative; }
/*************tab样式 开始*************/
.site-tab { border: 1px solid #dadada; border-bottom: none; overflow: hidden; }

    .site-tab li { width: 382px; background: #efefef; color: #000; font-size: 20px; float: left; height: 58px; line-height: 58px; cursor: pointer; border-bottom: 1px solid #dadada; border-left: 1px solid #dadada; }

        .site-tab li .txt { display: block; text-align: center; }

        .site-tab li.active { border-bottom: 1px solid #fff; margin-left: -1px; }

            .site-tab li.active .txt { background: #fff; }

.site-tab-content { background-color: #fff; }

/*图标*/
.site-tab li .site-tab-icon { margin-right: 16px; display: inline-block; background: url("../images/icon.png") no-repeat; vertical-align: middle; }
    .site-tab li .site-tab-icon.pc-mobile { width: 46px; height: 41px; background-position: -54px -445px; }
    .site-tab li .site-tab-icon.pc { width: 41px; height: 39px; background-position: -159px -445px; }
    .site-tab li .site-tab-icon.mobile { width: 40px; height: 40px; background-position: -252px -445px; }
/*激活*/
.site-tab li.active span { color: #2086ee; }
.site-tab li.active .site-tab-icon.pc-mobile { background-position: 0 -445px; }
.site-tab li.active .site-tab-icon.pc { background-position: -109px -445px; }
.site-tab li.active .site-tab-icon.mobile { background-position: -206px -445px; }


.case-tab { border: none; }

    .case-tab li { background: #fff; width: 296px; border-left: 1px solid #f0f0f0; border-bottom: 1px solid #c6c6c6;; }

        .case-tab li:first-of-type { border-left: 1px solid #fff; }

        .case-tab li:last-of-type { width: 299px; }

        .case-tab li.active { position: relative; }

            .case-tab li.active::after { border-bottom: 2px solid #2086ee; position: absolute; left: 0; bottom: -1px; width: 100%; content: ''; }
/*************tab样式 结束*************/

.tpl-category-container { font-size: 14px; padding: 20px 42px; background-color: #fff; border: 1px solid #dadada; border-top: none; position: relative; }

    .tpl-category-container dl { line-height: 32px; }

    .tpl-category-container dt { color: #4c5261; font-weight: bold; float: left; margin-right: 24px; }

    .tpl-category-container dd { font-size: 0; }

    .tpl-category-container .item { color: #444444; margin-right: 27px; padding: 5px; cursor: pointer; font-size: 14px; }

        .tpl-category-container .item.active { color: #fff; background: #2086ee; }

    /*行业分类*/
    .tpl-category-container .hy-category { min-height: 38px; position: relative; }

    .tpl-category-container .hy-category-list { height: 38px; overflow: hidden; word-break: break-word; margin-right: 80px; }

        .tpl-category-container .hy-category-list .category { /*    width: 15%;
        display: inline-block;
        margin-right: 0;*/ white-space: nowrap; }

            .tpl-category-container .hy-category-list .category em { font-style: normal; color: #ff850e; }

            .tpl-category-container .hy-category-list .category.active em { color: #fff; }

        /*展开模式*/
        .tpl-category-container .hy-category-list.expanded { height: auto; }

    /*更多行业分类*/
    .tpl-category-container .more-hy-category { font-size: 14px; color: #0c73dc; cursor: pointer; position: absolute; right: 0; background: url('/images2016/icon.png') no-repeat -338px -169px #fff; padding-right: 20px; -moz-user-select: none; /*火狐*/ -webkit-user-select: none; /*webkit浏览器*/ -ms-user-select: none; /*IE10*/ -khtml-user-select: none; /*早期浏览器*/ user-select: none; }

        .tpl-category-container .more-hy-category.J_expanded { /*bottom:0;*/ background: url('/images2016/icon.png') no-repeat -338px -140px #fff; }

    /*颜色按钮*/
    .tpl-category-container .color-item { width: 22px; height: 22px; display: inline-block; margin-right: 12px; cursor: pointer; vertical-align: middle; position: relative; font-size: 0; text-indent: -9999px; }

        .tpl-category-container .color-item.active::after { content: ''; position: absolute; left: 0; top: 5px; width: 100%; height: 15px; background: url(../images/icon.png) -27px 0px; }

    .tpl-category-container .color-white.active::after { background: url(../images/icon.png) 3px -120px; }

    .tpl-category-container .color-red { background-color: #fe0000; }

    .tpl-category-container .color-orange { background-color: #ff6300; }

    .tpl-category-container .color-yellow { background-color: #fae242; }

    .tpl-category-container .color-green { background-color: #80d031; }

    .tpl-category-container .color-lightblue { background-color: #26e0d2; }

    .tpl-category-container .color-blue { background-color: #198ede; }

    .tpl-category-container .color-lightpurple { background-color: #fe68ff; }

    .tpl-category-container .color-white { background-color: #fff; width: 20px; height: 20px; border: 1px solid #d0d0d0; }

    .tpl-category-container .color-gray { background-color: #999; }

    .tpl-category-container .color-black { background-color: #000; }

    .tpl-category-container .color-purple { background-color: #990099; }

    .tpl-category-container .color-brown { background-color: #974b00; }

    .tpl-category-container .color-colorful { background: url('../images/template-color.png') no-repeat center; }
/*查询条件颜色重置开始*/
.tpl-category-container { padding: 32px 25px 25px; }

    .tpl-category-container dl { line-height: 48px; height: 48px; float: left; margin-right: 10px; background: #f3f2f2; }

    .tpl-category-container dt { line-height: 48px; margin-left: 20px; color: #676767; font-size: 16px; font-weight: normal; }

    .tpl-category-container dd { line-height: 48px; white-space: nowrap; overflow: hidden; }

    /*当前分类*/
    .tpl-category-container .current-category { font-size: 12px; height: 30px; line-height: 30px; display: inline-block; width: 260px; vertical-align: middle; position: relative; cursor: pointer; }

        .tpl-category-container .current-category::after { border: 8px solid transparent; content: ''; position: absolute; right: 25px; border-top: 11px solid #c2c2c2; top: 11px; }

    .tpl-category-container .category-list-container { position: relative; }
.category-list { width: 100%; position: absolute; top: 48px; left: 0; background-color: #fcfcfc; border: 1px solid #eaeaea; padding: 20px 30px; box-sizing: border-box; opacity: 0; z-index: -1; }

    .category-list.active { opacity: 1; z-index: 100; }

    .category-list li { float: left; width: 20%; color: #222222; font-size: 12px; cursor: pointer; line-height: 26px; height: 26px; }

        .category-list li.active { color: #0166ff; }

/***********************模板列表 开始**************************/
.tpl-container { border: 1px solid #dcdcdc; background: #fff; border-top-left-radius: 4px; border-top-right-radius: 4px; display: block; margin-top:30px; }

.tpl-list-container li { width: 270px; float: left; list-style-type: none; cursor: pointer; }

    .tpl-list-container li.row-last { margin-right: 0; }

.tpl-list-container .no-tpl { height: 238px; line-height: 238px; text-align: center; }

    .tpl-list-container .no-tpl span { vertical-align: middle; }

    .tpl-list-container .no-tpl i { display: inline-block; width: 32px; height: 32px; background: url(../images/icon.png) no-repeat -99px -269px; vertical-align: middle; margin-right: 10px; position: relative; top: -1px; }

.tpl-container .tpl-header { height: 20px; line-height: 20px; background: #e2e2e2; padding-left: 10px; font-size: 0; }

    .tpl-container .tpl-header .point { width: 6px; height: 6px; border-radius: 100%; vertical-align: middle; display: inline-block; margin-right: 5px; }

.red-point { background: #ea5c6a; }

.yellow-point { background: #ecc468; }

.green-point { background: #2bc950; }

/*内容区*/
.tpl-container .tpl-body { height: 201px; border-bottom: 1px solid #dcdcdc; /*background-position: center;*/ /*background-repeat: no-repeat;*/ position: relative; overflow: hidden; }

    .tpl-container .tpl-body img { width: 100%; }

    /*PC+手机  手机正常情况下的 预览图*/
    .tpl-container .tpl-body .mobile-thumb { width: 96px; height: 150px; background: url(../images/icon.png) no-repeat -196px 0px; position: absolute; z-index: 1; right: -4px; bottom: 0px; overflow: hidden; padding-bottom: 22px; }

        .tpl-container .tpl-body .mobile-thumb img { width: 66px; margin: 26px auto 0 auto; display: block; max-height: 150px; }

.tpl-container .tpl-mask { opacity: 0; position: absolute; width: 100%; height: 100%; left: 0; top: 0; transition: all 0.4s ease-in-out; }

.tpl-container:hover { box-shadow: 0px 7px 15px 5px rgba(0, 0, 0, 0.1); }

    .tpl-container:hover .tpl-mask { opacity: 1; z-index: 1; background-color: rgba(0, 0, 0, 0.6); }

/*PC 预览*/
.tpl-container .tpl-mask .preview-pc { width: 100%; height: 100%; position: absolute; }

    .tpl-container .tpl-mask .preview-pc::after { width: 52px; height: 80px; background: url(../images/icon.png) no-repeat 0 -29px; position: absolute; left: 50%; top: 50%; margin-left: -26px; margin-top: -40px; content: ''; }

/*PC+手机版本 ----  手机预览容器*/
.tpl-container .tpl-mask .preview-mobile-thumb { width: 66px; height: 118px; position: absolute; right: 12px; top: 55px; background-position: center; background-repeat: no-repeat; background-size: 66px auto; }

    .tpl-container .tpl-mask .preview-mobile-thumb::after { content: ''; position: absolute; width: 66px; height: 118px; background: rgba(0, 0, 0, 0.6); }

/*PC+手机版本 ----- 手机视窗*/
.tpl-container .tpl-mask .preview-mobile { width: 86px; height: 169px; background: url(../images/icon.png) no-repeat -202px 0px; position: absolute; bottom: 3px; z-index: 1; right: 0; }

/*底部栏位*/
.tpl-container .tpl-footer { font-size: 14px; color: #565656; position: relative; padding: 6px 8px; }

    .tpl-container .tpl-footer div { height: 24px; line-height: 24px; }

    .tpl-container .tpl-footer .buy { position: absolute; right: 14px; top: 13px; }

/*******纯手机版 布局（基于PC版） 开始*****/
.mobile-tpl-list-container { }

    /*纯手机版 不加阴影*/
    .mobile-tpl-list-container .tpl-container:hover { box-shadow: none; }

    .mobile-tpl-list-container li { width: 232px; margin-right: 74px; }

    .mobile-tpl-list-container .tpl-container { height: 482px; border: none; background: none; background-image: url("../images/iPhone.png"); }

    .mobile-tpl-list-container .tpl-body { height: 356px; width: 200px; margin: 0 auto; position: relative; top: 62px; border: 1px solid #f2f2f2; /*background-position: center top;*/ }

    .mobile-tpl-list-container .mobile-tpl-mask { padding-top: 16px; height: 356px; }

        .mobile-tpl-list-container .mobile-tpl-mask p { font-size: 16px; color: #fff; line-height: 24px; height: 24px; text-align: center; }

        .mobile-tpl-list-container .mobile-tpl-mask .mobile-desc { margin-bottom: 5px; font-size: 14px; }

        .mobile-tpl-list-container .mobile-tpl-mask .qrcode-img { margin: 8px auto 14px auto; width: 148px; height: 148px; display: block; }

        /*底部按钮*/
        .mobile-tpl-list-container .mobile-tpl-mask .common-btn { width: 130px; margin-bottom: 13px; height: 36px; line-height: 36px; border-radius: 5px; }

        .mobile-tpl-list-container .mobile-tpl-mask .preview { background-color: #d7d7d7; }

/*******纯手机版 布局 结束*****/
/*模板列表*/
.tpl-container:hover { box-shadow: 0px 7px 15px 5px rgba(0, 0, 0, 0.1); text-decoration:none; }


.tpl-container .tpl-footer { padding: 8px; }

    .tpl-container .tpl-footer label { float: left; }

    .tpl-container .tpl-footer .webname { /*超出不显示*/ overflow: hidden; text-overflow: ellipsis; /*不换行才可能显示出...*/ white-space: nowrap; word-break: normal; }

/*三合一样式开始*/
.all-tpl-list-container .tpl-container { position: relative; }

.all-tpl-list-container .mobile-previvew-btn { position: absolute; top: 0; right: 0; width: 50px; height: auto; background: rgba(0, 0, 0, 0.5); /* border: 1px solid #fff; */ text-align: center; font-size: 14px; padding: 10px 0; color: #fff; }

    /*手机图标*/
    .all-tpl-list-container .mobile-previvew-btn i { display: block; margin: 0 auto 10px; width: 14px; height: 30px; background: url(../images/icon.png) no-repeat -140px -379px; }

.tpl-container .ewm-code { position: absolute; left: -223px; top: 0; width: 273px; height: 234px; background: rgba(0, 0, 0, 0.5); opacity: 0; z-index: -1; /* transition: all 0.35s ease-in-out; */ }

.mobile-previvew-btn:hover .ewm-code { z-index: 100; opacity: 1; }

.tpl-container .ewm-code img { width: 120px; margin: 30px auto 10px; display: block; }

.tpl-container .ewm-code p { text-align: center; color: #fff; font-size: 16px; }