.filter{position:fixed;z-index:98;border-top:3px solid #eee;border-bottom:0 solid #eee;box-shadow:transparent 0 2px 20px;top:80px;text-align:center;width:100%;height:100px;background:#fff;transition:.3s;-webkit-transition:.3s;-moz-transition:.3s}.filter a{color:#000;transition:.3s;-webkit-transition:.3s;-moz-transition:.3s;margin:30px -2px;font-size:18px;display:inline-block;padding:0 20px;height:40px;line-height:40px;border-left:1px solid #ccc;cursor:pointer}.filter a:first-child{border-left:none}.filter a:hover{color:#0bf}.filter a.click,.filter a.click:hover{color:#F90}.filter.scroll{height:60px;top:55px;border-top:0 solid #eee;box-shadow:rgba(0,0,0,.2) 0 2px 20px}.filter.scroll a{height:30px;line-height:30px;padding:0 18px;font-size:15px;margin:15px -2px}.content{margin:180px auto 80px}.content h1{font-size:30px;margin:30px 0 20px;padding:30px 0 0;border-top:#aaa dashed 1px;text-align:center}.content h1:first-child{padding-top:0;border:none}.content>div{width:33%;padding:15px;vertical-align:top;display:none}.content>div a h3 i,.content>div.filter-new{display:inline-block}.content>div>i{top:13px;right:13px;position:absolute;z-index:2;border-width:25px;border-style:solid}.content>div>i:after{position:absolute;content:"";top:-25px;left:-25px;width:50px;height:50px;background-image:-webkit-linear-gradient(bottom left,rgba(0,0,0,0) 48%,rgba(0,0,0,.2) 49%,rgba(0,0,0,.2) 50%,rgba(0,0,0,0) 51%);background-image:-moz-linear-gradient(bottom left,rgba(0,0,0,0) 48%,rgba(0,0,0,.2) 49%,rgba(0,0,0,.2) 50%,rgba(0,0,0,0) 51%);background-image:linear-gradient(to top right,rgba(0,0,0,0) 48%,rgba(0,0,0,.2) 49%,rgba(0,0,0,.2) 50%,rgba(0,0,0,0) 51%)}.content>div>i:before{position:absolute;color:#fff;font-size:13px;top:-13px;left:-7px;width:30px;font-weight:700;-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);transform:rotate(45deg)}.content>div>i.important{border-color:red red transparent transparent}.content>div>i.important:before{content:"重要"}.content>div>i.new{border-color:#f80 #f80 transparent transparent}.content>div>i.new:before{content:"NEW"}.content>div a h2{text-align:left;font-size:19px;margin:15px 10px 10px;color:#000;line-height:24px}.content>div a h3{text-align:left;font-size:13px;margin:10px;color:#000;font-weight:400;opacity:.8;transition:.3s;-webkit-transition:.3s;-moz-transition:.3s}.content>div a h3 i{padding:4px 6px;background:#ddd;border-radius:3px;border:1px solid #fff;font-size:12px}.content>div a span{display:block;text-align:left;color:#555;font-size:14px;line-height:20px;opacity:.6;margin-left:10px;transition:.3s;-webkit-transition:.3s;-moz-transition:.3s}.content>div a div{overflow:hidden;width:100%}.content>div a div img{transition:.3s;-webkit-transition:.3s;-moz-transition:.3s;width:100%}.content>div a div:after{pointer-events:none;content:'立刻深入了解';width:100%;height:50px;line-height:50px;color:#fff;bottom:-50px;left:0;background:#000;text-align:center;transition:.3s;-webkit-transition:.3s;-moz-transition:.3s}.content>div a:hover img{margin-top:-10px;margin-bottom:10px}.content>div a:hover div:after{bottom:0}.content>div a:hover h3,.content>div a:hover span{opacity:1}@media (max-width:1000px){.content>div{width:49%}}@media (max-width:900px){.filter,.filter.scroll{height:140px;top:50px}.filter a,.filter.scroll a{margin:0 -3px;border:none;font-size:16px}.filter{position:relative;border:none;padding-top:10px;box-shadow:rgba(0,0,0,.2) 0 2px 20px}.filter a{width:30%}.filter.scroll a{padding:0 20px;height:40px;line-height:40px}.content{margin-top:60px}}@media (max-width:500px){.filter,.filter.scroll{height:180px}.filter{position:absolute}.filter a{width:45%}.content{margin-top:240px}.content>div{width:100%}}