.zw-template-inner.active:before{content:" ";width:100%;height:100%;background:rgba(0,0,0,0.8);position:fixed;top:0;left:0;z-index:98}.main-container-wrapper:before{content:'';position:absolute;left:0;top:0;width:100%;height:500px;background:#fff;background:-moz-linear-gradient(top,#fef1f3 0,#fff 100%);background:-webkit-linear-gradient(top,#fef1f3 0,#fff 100%);background:linear-gradient(to bottom,#fef1f3 0,#fff 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fef1f3',endColorstr='#ffffff',GradientType=0)}.content-wrap{max-width:1140px}.banner-section{padding:60px 0 80px;text-align:center}.banner-section h1{max-width:600px;margin:0 auto 10px}.banner-section p{max-width:540px;margin:0 auto 10px}.banner-section .content-wrap{max-width:800px}.body-section{margin-bottom:60px}.body-section .content-wrap{width:100%;overflow:hidden}.body-section .filter-section{width:100%;max-width:320px;float:left}.body-section .filter-section div.zfixed-active{position:fixed;bottom:0}.body-section .filter-section div.zfixedtop-active{position:fixed;top:70px}.body-section .filter-section div.zabsolute-active{position:absolute;bottom:0}.filter-section>div>ul,.filter-section .action-list{display:none}.filter-section .categories-section{max-width:300px}.filter-section .tag-section{margin-top:60px;max-width:300px}.filter-section .categories-section h3,.filter-section .tag-section h3{font-family:var(--zf-primary-bold);font-size:20px;margin-bottom:20px}ul.categories-list li{font-size:16px;margin-bottom:10px;position:relative;padding-left:24px;cursor:pointer}ul.categories-list li::before{content:"";width:10px;height:10px;border:1px solid #000;position:absolute;top:6px;left:0}ul.categories-list li.active::before{border:1px solid #0c9053}ul.categories-list li.active::after{content:"";width:8px;height:8px;background:#0c9053;position:absolute;top:8px;left:2px}ul.tags-list li{font-size:14px;display:inline-block;padding:3px 15px;border-radius:2px;background-color:#f8f8f8;margin:0 10px 10px 0;border-radius:2px;cursor:pointer}ul.tags-list li.active{background:#0c9053;color:#fff}.body-section .content-section{width:100%;max-width:820px;margin-left:320px;overflow:hidden;display:flex;flex-wrap:wrap}.content-section .template-list{float:left;width:378px;border:1px solid #efefef;display:none;transition:all .5s;margin:0 15px 30px 15px;cursor:pointer;-webkit-animation:transY 1s;-moz-animation:transY 1s;animation:transY 1s}@-webkit-keyframes transY{from{transform:translateY(20px)}to{transform:translateY(0)}}@keyframes transY{from{transform:translateY(20px)}to{transform:translateY(0)}}@-moz-keyframes transY{from{transform:translateY(20px)}to{transform:translateY(0)}}.content-section .template-list:hover{-webkit-box-shadow:0 0 15px 0 rgba(0,0,0,0.05);-moz-box-shadow:0 0 15px 0 rgba(0,0,0,0.05);box-shadow:0 0 15px 0 rgba(0,0,0,0.05)}.content-section .template-list a{color:inherit}.content-section .template-list.active{display:block}.content-section .template-list .template-img{margin:0 0 25px;max-height:300px;overflow-y:hidden}.content-section .template-list .template-desc{padding:0 30px 20px}.template-list .template-desc span{font-family:var(--zf-primary-bold);font-size:14px;color:#bbb;display:none}.template-list .template-desc h3{font-family:var(--zf-primary-bold);font-size:20px;margin:40px 0 10px}@media only screen and (max-width:1199px) and (min-width:768px){.body-section .content-wrap{max-width:960px}.body-section .filter-section{max-width:240px}.filter-section .categories-section h3,.filter-section .tag-section h3{font-size:18px}ul.categories-list li{font-size:15px}.filter-section .categories-section,.filter-section .tag-section{max-width:210px}.body-section .content-section{max-width:720px;margin-left:240px}.content-section .template-list{width:328px}.content-section .template-list .template-img{margin:0 0 20px}.content-section .template-list .template-desc{padding:0 25px 10px}.template-list .template-desc h3{margin:30px 0 10px}}@media only screen and (min-width:320px) and (max-width:990px){.banner-section{padding:50px 0 40px}.body-section .content-section{margin:0 auto}.body-section .filter-section{float:none;margin:0 auto;max-width:300px}.filter-section>div>ul{display:block;float:left;margin-bottom:50px;z-index:99;background:#fff}.filter-section>div>ul>li{font-family:var(--zf-primary-bold);font-size:18px;display:inline-block;width:149px;float:left;text-align:center;padding:10px 0;border-top:1px solid #efefef;border-bottom:1px solid #efefef;cursor:pointer}.filter-section>div>ul>li:nth-child(2n){border-left:1px solid #efefef}.filter-section>div>ul>li.active{background:#fafafa;border-bottom:1px solid #fafafa}.filter-section .categories-section,.filter-section .tag-section{display:none}.filter-section .categories-section,.filter-section .tag-section{max-width:none;margin-top:0}ul.categories-list li{margin-bottom:20px;padding-left:20px;margin-right:40px;display:inline-block}ul.tags-list li{font-size:15px;display:inline-block;margin-bottom:25px;background-color:#efefef}.filter-section .categories-section.active,.filter-section .tag-section.active{display:block;padding-bottom:40px;width:100%;background:#fafafa;position:absolute;left:0;top:49px;z-index:99;webkit-box-shadow:0 5px 15px 0 rgba(0,0,0,0.05);-moz-box-shadow:0 5px 15px 0 rgba(0,0,0,0.05);box-shadow:0 5px 15px 0 rgba(0,0,0,0.05)}.filter-section .categories-section.active ul,.filter-section .tag-section.active ul{max-width:80%;margin:40px auto 0;text-align:center}.filter-section .categories-section h3,.filter-section .tag-section h3{display:none}.filter-section .action-list{margin:50px auto 0;max-width:300px;text-align:center;display:block}.filter-section .action-list.act-btn{font-size:14px;padding:8px 40px}.filter-section .action-list .apply-btn{border:1px solid #f0483e;color:#f0483e}}@media only screen and (min-width:320px) and (max-width:767px){.banner-section{padding:40px 0 40px}.content-section .template-list{float:none;margin:0 auto 30px}}@media only screen and (max-width:480px){.content-section .template-list{width:300px}.content-section .template-list .template-img{max-height:220px}ul.categories-list li{display:block}}