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

/* 菜单 */
.h80{height: 1.8rem;}
.h90{height:1.45rem;border: none;}
.ph1{height: 1rem;}
.ph1-1{height: 1.01rem;}
.mt20{margin-top: 0.15rem;}
/* 大分类吸顶 */
.h180{height: 1.6rem;}
.headcontent{background-color: #7de4e9;}
.menu_cont{background-color: #7de4e9;}
.menu_cont ul{height: 0.65rem;}
.menu_cont ul li{height: 100%;}
.menu_cont ul li a{color: #fff;}
.menu_cont ul li.on a{color: #fff;font-size: 0.3rem;}
.menu_cont ul li.on::before{background-color: #fff;}
.menu_cont>ul::before{background-image:none}
.menu_cont .more{color: #fff; align-items: center;line-height: 0.56rem; align-self: baseline;}
.menu_cont .more::before{background-image:none;width: 1px;background-color: #f1f1f1;left: 0;height: 0.26rem;top: 0.14rem;}
/* .banner{background-image: linear-gradient(to bottom , #7de4e9, #81ecd1);padding: 0.2rem 0; text-align: center; line-height: 1;} */
.banner{padding: 0.22rem 0 0.4rem; text-align: center; line-height: 1;background-image: linear-gradient(to bottom , #7de4e9, #81ecd1);}
.banner .p1{ color: #fff; font-size: 0.3rem; border-radius:0.2rem;font-weight: bold;}
/* .banner .p1 span{font-size: 0.4rem; } */
.banner .p2{color: #fff;font-size: 0.2rem;display:inline-block;border-radius: 0.1rem;margin-top: 0.14rem;}
.start_step{display: flex; align-items: center;color: #666;margin-top: 0.3rem;}
.start_step .li{flex: 1; display: flex;flex-direction: column;align-items: center;}
.start_step .icon{width: 0.5rem; }
.start_step .icon i{font-size: 0.24rem; color: #fff;}
.start_step .li i{font-size: 0.4rem;color: #fff;}
.start_step .li .title{font-size: 0.24rem;margin-top: 0.16rem;color: #fff;}

/*menu*/
.category {padding:0 0.2rem 0.24rem; background-color: #fff; width: 100%; overflow: hidden;margin-top: -0.2rem;border-radius: 0.1rem;}
.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.46rem;height:auto; margin:0.3rem 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%;}






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

.c_title span{ margin-left:0.04rem; color:#888; font-size: 0.2rem; font-weight:600;}
.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; }
.c_title .c_more i{color: #555;font-size: 0.22rem;}



.common_list_cont.videoCont {display:flex;width:100%;white-space:nowrap;overflow-x:scroll;-webkit-overflow-scrolling:touch;overflow-y:hidden;position:relative;z-index:1;padding-left:0.2rem;}
.videoCont .list_li {flex-shrink:0;background-color:#fff;border-radius:0.1rem;width:55%;padding:0.1rem;margin-right:0.2rem;font-size:0.2rem;}
.videoCont .list_li .item_bg{display: flex;align-items: center;justify-content: center;height: 1.77rem;}
.videoCont .list_li .item_bg img{max-width: 100%;max-height: 100%;width: auto;height: auto;}
.videoCont .list_li .item_title .title {margin-left:0;margin-top:0.1rem;}
.videoCont .list_li .desc {margin-top:0.1rem;}
.videoCont .list_li .desc .t1 {color:#999;}
.videoCont .list_li .desc .t1 i {font-size:0.24rem;margin-right: 3px;}




.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;}