body{ background: #fff; max-width:640px; min-height:100%; height:auto;}
*{outline:none;box-sizing: border-box;}

/* 菜单 */
.h80{height: 1.8rem;}
.h90{height:2rem;}
.ph1{height: 1rem;}
.ph1-1{height: 1.01rem;}
/* 大分类吸顶 */
.h180{height: 1.6rem;}



/*menu*/
.category {padding:0 0.2rem 0.2rem; background-color: #fff; width: 100%; height: 2.66rem; overflow: hidden; }
.category__row {display:-webkit-box;display:-webkit-flex;display:flex;-webkit-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-pack:justify;}
.category__row .category__item{width: 20%; display: flex; justify-content: center; flex-direction: column;}
.category__item__icon {width:100%; text-align:center;}
.category__item__icon img {width:0.6rem;height:auto; margin:0.2rem 0rem 0.12rem}
.category__item__txt {font-size:0.22rem;text-align:center;color:#333;overflow: hidden;white-space: nowrap;text-overflow:ellipsis; width: 100%;}


/* 横幅图 */
.banner-wrap{display: block; margin:0 0.2rem}
.banner-wrap img{width: 100%; border-radius: 0.1rem;}

/* 栏目标题 */
.c_title{ margin:0.14rem 0.24rem 0; clear:both;position: relative;}
.c_title h1{ font-size:0.26rem; font-weight:600; color:#000; display:inline-block; position:relative;letter-spacing:1px;padding-left: 0.2rem;}
.c_title h1:before{ content:''; width:0.05rem; height:0.24rem; background-color:#3191f5; display:inline-block; position:absolute; left:0; top:0.06rem;}

.c_title span{ margin-left:0.2rem; color:#666; font-size: 0.2rem; }
.c_title .c_more{position: absolute;right: 0; top:0;height: 0.4rem; line-height: 0.4rem; color:#555;font-size:0.22rem; background-color: #f5f5f5;border-radius:0.04rem; padding:0 0.2rem;}
.c_title .c_more i{color: #555;font-size: 0.22rem;}

.navTitle{color: #333;font-size: 0.24rem;position: relative; margin:0 0.2rem; padding-left: 0.2rem; color: #888;}
.navTitle:before{ content:''; width:0.05rem; height:0.24rem; background-color:#3191f5; display:inline-block; position:absolute; left:0; top:0.06rem;}
.navTitle a{ font-weight: bold; margin-right:3px;}
.navTitle h1,.navTitle h2{font-size: 0.24rem;display: inline-block;}
/* 分类列表 */
.cate_list_item{ position: relative;}
.cate_list .list_cont{ clear:both; overflow:hidden; padding:0 6px;}
.cate_list .list_cont.show{display: block;}
.cate_list .list_li {position:relative;    width: 100%;
    padding: 0;margin-top:14px;overflow: hidden; }
    .cate_list .waterfall_column {
        width: 33%;
        padding: 0 8px;
    }
.cate_list .list_li .item_bg {width:100%;border-radius:3px;overflow:hidden;background-color: #f7f8fa;font-size: 0;position: relative;}
.cate_list .list_li .item_bg img {width:100%;height:100%; max-height: 5rem;}
.cate_list .list_li .icon{padding:0 0.05rem;height: 0.26rem;text-align: center;font-size: 0.2rem; display: flex;  align-items: center;position: absolute; right: 0.1rem; top: 0.1rem; color: #fff;border-radius: 0.05rem; }
.cate_list .list_li .icon.free{background-color: #ff3d3d;}
.cate_list .list_li .icon.vip{background-color: #ffb940;}
.cate_list .list_li .desc{font-size: 0.22rem; color: #3191f5; margin-top: 0.02rem; height: 0.3rem;}
.cate_list .list_li .item_title {width:100%;display:flex;flex-direction:row;align-items:center;font-size: 0;margin-top: 0.1rem;}
.cate_list .list_li .item_title .title {margin-left:0.1rem;font-size:0.22rem;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;flex: 1;  color: #666;}
.scene-category {padding: 0 0.1rem 0 0.06rem;height:0.26rem;text-align:center;font-size:0.2rem;color:#3191f5;background-color:#fae7bf;border-radius:0 100px 100px 0; display: flex;align-items: center}
.scene-category.H5 {background-color:rgba(21,147,255,.1);color:#1593ff;}
.scene-category.hb {background-color:rgba(111,97,236,.1);color:#6f61ec;}
.scene-category.video {background-color:rgba(58,159,107,.1);color:#3a9f6b;}
.scene-category.long {background-color:rgba(243,113,51,.1);color:#f37133;}
.scene-category.form {background-color:rgba(2,173,191,.1);color:#02adbf;}
.scene-category.gc {background-color:rgba(245,166,35,.1);color:#f5a623;}

/* 专题 */
.cate_list .cate_list_item.zhuanti .list_li{width: 50%;}

/* 社交媒体 */
.cate_list .medier .list_cont {font-size:0;white-space:nowrap;overflow:scroll;padding:0 0.2rem 0;margin-right:0.2rem;display:flex;-webkit-overflow-scrolling: touch}
.cate_list .medier .list_cont::-webkit-scrollbar {display: none;}
.cate_list .medier .list_cont  .list_li {flex-shrink:0;width:2.5rem;margin-right:0.2rem;padding: 0;}
.cate_list .medier .list_cont  .list_li img {width:100%; border-radius: 0.06rem;}

/* 长单页 */
.cate_list  .list_li.long .item_bg {width:100%;border-radius:3px;overflow:hidden; height:5rem;background-color: #fff;}
.cate_list .list_li.long .item_bg img {width:100%;height: auto;}
.list_more{ text-align: center;display: flex; justify-content: center;align-items: center;margin: 0.2rem 0;}
.list_more::before,.list_more::after{content: ''; flex: 1; display:inline-block;height: 1px; background: #ddd; width: 0.5rem;margin: 0 0.2rem; }
.list_more a{font-size: 0.26rem;color: #666;}




.filter-cond {z-index:98;width:100%;display:flex;background:#fff;position: fixed; max-width: 640px;top: 1.32rem;padding: 0.2rem 0.2rem 0.1rem 0;}
.filter-cond .scroll{display: flex;
    justify-content: flex-start;
    white-space: nowrap;
    overflow-x: scroll;
    -webkit-overflow-scrolling: touch;
    overflow-y: hidden;}   

.filter-cond .scroll::-webkit-scrollbar {
    display: none; /* Chrome Safari */
}     

.filter-cond .nav-select {    position: relative;height: 0.5rem;padding:0 0.18rem;color:#666;font-size:.22rem;text-align:center;cursor:pointer;-webkit-tap-highlight-color: rgba(0,0,0,0); background-color: #f4f4f4;margin-left: 0.2rem;border-radius: 0.02rem;}
.filter-cond .nav-select.active,.filter-cond .nav-select.on{background-color: #dff1fd;}
.filter-cond .nav-select.active .top,.filter-cond .nav-select.on .top{color:#3191f5;}
.filter-cond .nav-select>div {color:rgb(87, 77, 77);cursor:pointer; display: flex; justify-content: center; align-items: center;width: 100%; height: 100%;}
.filter-cond .nav-select .top .allColor{width: 0.24rem; height: 0.24rem; background: url(../images/othercolor.png) no-repeat; background-size: 0.24rem;margin-right: 0.04rem;border-radius: 50%;}
.icon-filter-angle {border-left: 0.06rem solid transparent;  border-right:0.06rem solid transparent; border-top:0.1rem solid #888;transition:all 0.2s;margin-left: 0.05rem;}
.filter-cond .nav-select.active .top .icon-filter-angle {transform:rotate(-180deg); border-top-color: #3191f5;}
.filter-cond .nav-select.on .top .icon-filter-angle{border-top-color: #3191f5;}

.filter-wrap-bg {display:none;z-index:2;width:100%;height:auto;background:#fff;font-size:0;margin-bottom:0.02rem;padding:0.2rem 0.1rem 0.1rem 0.1rem;border-bottom: 1px solid #eee;}
.filter-wrap-bg.zmdault a {display:inline-block;font-size:.22rem;color:#777;margin:0 0 0.08rem 0.1rem; padding:0.08rem 0rem;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;text-align:center;border-radius: 0.4rem;  width:1.14rem;}

.filter-wrap-bg.zmdault a.active {background:#3191f5;color:#fff}
.filter-wrap-bg.active {display:block;}

.icon-filter {width: .2rem; height: .2rem; background-image: url(../images/icon_filter.png)}

/* 颜色值 */
.scolor a {display:inline-block;margin:0.1rem 0 0.1rem 0.34rem;padding:0;width:0.64rem; height:0.64rem;border:1px solid #f5f5f5;border-radius:50%;background-position:50%;background-size:100%;background-repeat:no-repeat;cursor:pointer; position: relative;}
.scolor a.active::before {content: ''; display: inline-block; position: absolute;left: -1px;top: -1px; width: 0.64rem; height: 0.64rem; 
    background:rgba(200,200,200,0.5) url(../images/gou.png) center center no-repeat; background-size: 0.36rem auto;border-radius:50%;}
.scolor a i {display:block;width:100%;height:100%;border-radius:50%;}
/* .filter-cond .nav-select .top .allColor,.scolor a i.allColor{ background: url(../images/scolor.png) center center no-repeat;background-size: 0.64rem auto;} */
.filter-cond .nav-select .top .pink,.scolor a i.pink{background: #FFB6C1}
.filter-cond .nav-select .top .blakgold,.scolor a i.blakgold{background-image: linear-gradient(to right,#FFD700,#9b7300,#ffdd00);}
.filter-cond .nav-select .top .Silver,.scolor a i.Silver{background: #E6E8FA}
.filter-cond .nav-select .top .color,.scolor a i.color{background-image: linear-gradient(to right,#ff0000,#ffa500,#ffff00,#00ff00,#007fff,#0000ff,#8b00ff)}
.filter-cond .nav-select .top .blue,.scolor a i.blue{background: #0000ff}
.filter-cond .nav-select .top .Beige,.scolor a i.Beige{background: #f5f5dc}
.filter-cond .nav-select .top .red,.scolor a i.red{background: #ff0000}
.filter-cond .nav-select .top .Inkcolor,.scolor a i.Inkcolor{background: #6f717d}
.filter-cond .nav-select .top .block,.scolor a i.block{background: #000000}
.filter-cond .nav-select .top .blockwhite,.scolor a i.blockwhite{background-image: linear-gradient(to right,#000000,#ffffff)}
.filter-cond .nav-select .top .white,.scolor a i.white{background: #ffffff}
.filter-cond .nav-select .top .green,.scolor a i.green{background: #3CB371}
.filter-cond .nav-select .top .yellow,.scolor a i.yellow{background: #ffff00}
.filter-cond .nav-select .top .purple,.scolor a i.purple{background: #9933FA}
.filter-cond .nav-select .top .brown,.scolor a i.brown{background: #802A2A}
.filter-cond .nav-select .top .gray,.scolor a i.gray{background: #CCCCCC}
.filter-cond .nav-select .top .orange,.scolor a i.orange {background: #FFA500;}
.filter-cond .nav-select .top .otherColor,.scolor a i.otherColor{ background: url(../images/othercolor.png) center center no-repeat; background-size: 0.64rem auto;}
.scolor.color-tags a{margin:0.1rem 0.1rem 0.1rem 0.06rem;}
/* 筛选 */
.filter-ban-wrap {display:none;position:fixed;right:0;top:0;z-index:99999999;width:100%;height:100%;background:rgba(53,53,59,.5)}
.filter-ban-wrap.active {display:block}
.filter-ban-wrap.active .filter-ban {right:0}
.filter-ban-wrap .filter-ban {position:absolute;overflow:scroll;right:-80%;top:0;width:80%;height:100%;padding:0 .24rem 2.5rem;background:#fff;-webkit-transition:.3s linear;-o-transition:.3s linear;transition:.3s linear; -webkit-overflow-scrolling: touch;}
.filter-ban-wrap .filter-ban h4 {padding:.44rem 0 .2rem;color:#292a41;font-size:.32rem;font-weight:400;letter-spacing:.02rem}
.filter-ban-wrap .filter-ban .filter-wrap {padding:0}
.filter-ban-wrap .btn-wrap {position: fixed;  right: 0;  bottom: 0rem; width: 80%; height:0.9rem; text-align: center}
.filter-ban-wrap .btn-wrap>div {float:left;width:33.33333%;font-size:.28rem;letter-spacing:.02rem;line-height:0.9rem}
.filter-ban-wrap .btn-wrap .cancel {color:#8d8d96;background:#ececf0; border-right: 1px solid #ddd;}
.filter-ban-wrap .btn-wrap .reset {color:#8d8d96;background:#ececf0}
.filter-ban-wrap .btn-wrap .yes {background:#3191f5}
.filter-ban-wrap .btn-wrap .yes>a {color:#fff}
.filter-ban-wrap .btn-wrap a{width: 100%; height: 100%;display: inline-block;}
.filter-wrap {overflow:hidden;padding:.4rem .06rem .28rem .24rem;background:#fff}
.filter-wrap>li {float:left;margin:0 .16rem .16rem 0}
.filter-wrap>li>a {display:block;padding:.16rem .2rem;line-height:.24rem;font-size:.24rem;color:#333443;-webkit-border-radius:.06rem;border-radius:.06rem;background:#f3f3f6}
.filter-wrap>li>a.active {background:#3191f5;color:#fff}


/* 排序 */
.listcase{background-color:#fff;}
.listcase .title{padding: 0.18rem 0.4rem; overflow: hidden;display:flex;justify-content:center; }
.listcase .title ul{ width: 4.2rem; height:0.5rem; line-height:0.48rem; border: 1px solid #ddd; border-radius: 0.05rem; text-align: center; font-size:0.22rem; overflow: hidden; background: #fff; float: left;}
.listcase .title li{width: calc(100% / 4);float: left;border-right: 1px solid #ddd;}
.listcase .title li a{display: block; color: #A6A6B0; height:100%;}
.listcase .title li:last-child{ float: right;border-right:0} 
.listcase .title li.on a{ background: #3191f5; color: #fff;}


/* 分页 */
.zm-pages .page {text-align: center; font-size: 0;box-sizing: border-box;clear: both; margin-top: 26px;margin-bottom: 10px;}
.zm-pages .page a {display: inline-block;color: #666;height: 30px;line-height: 28px;padding: 0 10px;border: 1px solid #ddd;margin: 0 2px;border-radius: 4px;vertical-align: middle;font-size: 12px;position: relative;min-width: 30px;background-color: #fbfbfb;}
.zm-pages .page a:hover {border:1px solid #3191f5;color:#3191f5;}
.zm-pages .page a.num{border-radius: 30px;padding: 0px 7px;}
.zm-pages .page a.cur{border:1px solid #3191f5;color: #fff; background: #3191f5;z-index: 1;}
.zm-pages .page a.prev{border-radius: 15px 0 0 15px; margin-right: 0; width:68px; text-align: left;}
.zm-pages .page a.top{margin-left:-15px;border-radius:15px; position: relative;border-left: 0;}
.zm-pages .page a.top::before{content: ''; position: absolute; left:-1px; top:-1px;width:15px; height: 30px; border: 1px solid #ddd;border-right:0;border-radius: 15px 0 0 15px;z-index: 1; display: inline-block;box-sizing: border-box;}
.zm-pages .page a:hover::before,.zm-pages .page a:hover + a::before,.zm-pages .page a.top.cur::before{border-color: #3191f5; z-index: 3;}
.zm-pages .page a.bottom{border-radius: 15px; margin-right:-15px; z-index: 1; position: relative; border-right: 0;}
.zm-pages .page a.bottom.cur{border:1px solid #3191f5; z-index: 3;}
.zm-pages .page a.next::before{content: ''; position: absolute; left:1px; top:-1px;width:15px; height: 30px; border: 1px solid #ddd;border-left:0;border-radius: 0 15px 15px 0;z-index:3; display: inline-block;box-sizing: border-box;}
.zm-pages .page a.next{margin-left:-1px;border-radius:  0 15px 15px 0;margin-right: 0; width:68px; text-align: right; border-left: 0;}
.zm-pages .page a.bottom:hover::before,.zm-pages .page a.next:hover::before{border-color: #3191f5; z-index: 3;}
.zm-pages .page span{font-size: 12px; color: #888; display: inline-block; vertical-align: middle; line-height: 30px; margin:0 2px;}