﻿#filter{position: absolute;top: 0;left: 200px;z-index: 200;background: #fff;width: 100%;height: 100%;}
.filter_div{padding:72px 0 92px 0;font-size:0;}
.filter_div .match_tab,.filter_div .company_tab{position: fixed;width:100%;white-space:nowrap;top: 44px;left: 0;z-index: 2;background-color:#002c4c;}
.filter_div .match_tab > a{display:inline-block;width:49.99%;font-size:12px;height:28px;line-height:26px;text-align:center;border-bottom:2px solid #2e2021;color:#898989;background-color:#2e2021;white-space:nowrap;vertical-align:top;}
.filter_div .match_tab > a.on,.filter_div .company_tab > a.on{border-bottom:2px solid #ffcc00;color:#ffcc00;font-size:14px;}
.filter_div .company_tab > a{display:inline-block;width:33.33%;font-size:12px;height:28px;line-height:26px;text-align:center;border-bottom:2px solid #002c4c;color:#898989;background-color:#2e2021;white-space:nowrap;vertical-align:top;}
.filter_div .match_Con{padding:6px 5px;font-size:0;}
.filter_div .match_Con li{display:inline-block;font-size: 0;margin-bottom:6px;height:35px;color:#898989;line-height:35px;width:48.7%;padding:0 6px;background-color:#dcdcdc;border-radius:4px;}
.filter_div .match_Con li:nth-child(odd){margin-right:2%;}
.filter_div ul.odd li.on{background-color:#b84556;color:#fff;}
.filter_div ul.odd li{position: relative;}
.filter_div ul.odd li.on:after{content:'';border-radius:200px;background-color:#b84556;position:absolute;top:50%;right:10%;width:5px;height:5px;border:4px solid #fff;top:50%;right:0;-webkit-transform:translate(-50%,-50%);-moz-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);-o-transform:translate(-50%,-50%);transform:translate(-50%,-50%);}
.filter_div ul.odd li:after{content:'';border-radius: 200px; background-color:#fff;position:absolute;top:50%;right:10%;width:5px;height:5px;border:4px solid #fff;top:50%;right:0;-webkit-transform:translate(-50%,-50%);-moz-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);-o-transform:translate(-50%,-50%);transform:translate(-50%,-50%);}
.filter_div ul.even li.on{background-color:#b84556;color:#fff;position:relative;}
.filter_div ul.even li.on:after{content:'';position:absolute;top:50%;right:10%;width:10px;height:9px;background:url(/static/images/webapp/m/tab_ok.png) no-repeat;background-size:10px 9px;top:50%;right:0;-webkit-transform:translate(-50%,-50%);-moz-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);-o-transform:translate(-50%,-50%);transform:translate(-50%,-50%);}
.filter_div .match_Con li > i{font-size:12px;margin-right:5px;}
.filter_div .match_Con li > span{font-size:12px;}
.filter_foot{position:fixed;bottom:0;height:42px;display: block;white-space:nowrap;padding:0 14px;zoom:1;background-color: #fff;width:100%;border-top:1px solid #aaaaaa;font-size:0;}
/*单选按钮 全选*/
.filter_foot .f_all_select{display:inline-block;margin-top:12px;right:10px;width:49.9%;}
.filter_foot .f_all_select>.radio-tick:first-child{margin-right:24px;}
.filter_foot .f_all_select>.radio-tick{display:inline-block;*display:inline;*zoom:1;position:relative;padding-left:20px;}
.filter_foot .f_all_select>.radio-tick i{position:absolute;vertical-align:middle;left:0;top:-3px;display:block;width:18px;height:18px;border:1px solid #8f8f8f;border-radius:100px;}
.filter_foot .f_all_select>.radio-tick input{vertical-align:middle;display:block;width:18px;height:18px;opacity:0;}
.filter_foot .f_all_select>.radio-tick i.on{background-image:url(/static/images/webapp/b_m/filter/set-checkbox-icon.png);background-repeat:no-repeat;background-size:contain;border:none;}
.filter_foot .f_all_select>.radio-tick b{display:block;font-weight:normal;vertical-align:middle;line-height:12px;color:#898989;font-size:12px;}
.filter_foot>span{color:#a3aeba;font-size:11px;width:49.9%;display:inline-block;text-align:right;}
.filter_foot>span>i{color:#ff4027;font-size:14px;}
.filter_box{display: none;}

@media screen and (min-width: 374px) and (max-width: 479px) {
   .filter_div{padding:86px 0 110px 0;}
   .filter_div .match_tab,.filter_div .company_tab{top: 52px;}
   .filter_div .match_tab > a{font-size:14px;height:34px;line-height:32px;border-bottom:2px solid #002c4c;}
   .filter_div .match_tab > a.on,.filter_div .company_tab > a.on{border-bottom:2px solid #ffcc00;font-size:16px;}
   .filter_div .company_tab > a{font-size:14px;height:34px;line-height:32px;border-bottom:2px solid #002c4c;}
   .filter_div .match_Con{padding:8px 6px;}
   .filter_div .match_Con li{margin-bottom:8px;height:42px;line-height:42px;padding:0 8px;border-radius:4px;}
   .filter_div ul.odd li.on:after{border-radius:240px;width:6px;height:6px;border:4px solid #fff;}
   .filter_div ul.odd li:after{border-radius: 240px; width:6px;height:6px;border:4px solid #fff;}
   .filter_div ul.even li.on:after{width:12px;height:10px;background-size:12px 10px;}
   .filter_div .match_Con li > i{font-size:14px;margin-right:6px;}
   .filter_div .match_Con li > span{font-size:14px;}
   .filter_foot{height:50px;padding:0 16px;border-top:2px solid #aaaaaa;}
   /*单选按钮 全选*/
   .filter_foot .f_all_select{margin-top:16px;right:12px;}
   .filter_foot .f_all_select>.radio-tick:first-child{margin-right:28px;}
   .filter_foot .f_all_select>.radio-tick{padding-left:24px;}
   .filter_foot .f_all_select>.radio-tick i{top:-4px;width:22px;height:22px;border:1px solid #8f8f8f;border-radius:120px;}
   .filter_foot .f_all_select>.radio-tick input{width:22px;height:22px;}
   .filter_foot .f_all_select>.radio-tick b{line-height:14px;font-size:14px;}
   .filter_foot>span{font-size:14px;}
   .filter_foot>span>i{font-size:16px;}
}


@media screen and (min-width: 480px) and (max-width: 639px) {
   .filter_div{padding:108px 0 138px 0;}
   .filter_div .match_tab,.filter_div .company_tab{top: 66px;}
   .filter_div .match_tab > a{font-size:18px;height:42px;line-height:38px;}
   .filter_div .match_tab > a.on,.filter_div .company_tab > a.on{font-size:20px;}
   .filter_div .company_tab > a{font-size:18px;height:42px;line-height:38px;}
   .filter_div .match_Con{padding:8px 8px;}
   .filter_div .match_Con li{margin-bottom:8px;height:52px;line-height:52px;padding:0 8px;border-radius:6px;}
   .filter_div ul.odd li.on:after{border-radius:300px;width:8px;height:8px;}
   .filter_div ul.odd li:after{border-radius: 300px; width:8px;height:8px;}
   .filter_div ul.even li.on:after{width:14px;height:14px;background-size:14px 14px;}
   .filter_div .match_Con li > i{font-size:18px;margin-right:8px;}
   .filter_div .match_Con li > span{font-size:18px;}
   .filter_foot{height:62px;padding:0 20px;}
   /*单选按钮 全选*/
   .filter_foot .f_all_select{margin-top:18px;right:14px;}
   .filter_foot .f_all_select>.radio-tick:first-child{margin-right:36px;}
   .filter_foot .f_all_select>.radio-tick{padding-left:30px;}
   .filter_foot .f_all_select>.radio-tick i{top:-4px;width:26px;height:26px;border-radius:150px;}
   .filter_foot .f_all_select>.radio-tick input{width:26px;height:26px;}
   .filter_foot .f_all_select>.radio-tick b{line-height:18px;font-size:18px;}
   .filter_foot>span{font-size:16px;}
   .filter_foot>span>i{font-size:20px;}
}

@media screen and (min-width: 640px) {
   .filter_div{padding:144px 0 184px 0;}
   .filter_div .match_tab,.filter_div .company_tab{top: 88px;}
   .filter_div .match_tab > a{font-size:24px;height:56px;line-height:52px;}
   .filter_div .match_tab > a.on,.filter_div .company_tab > a.on{font-size:28px;}
   .filter_div .company_tab > a{font-size:24px;height:56px;line-height:52px;}
   .filter_div .match_Con{padding:12px 10px;}
   .filter_div .match_Con li{margin-bottom:12px;height:70px;line-height:70px;padding:0 12px;border-radius:8px;}
   .filter_div ul.odd li.on:after{border-radius:400px;width:10px;height:10px;}
   .filter_div ul.odd li:after{border-radius: 400px; width:10px;height:10px;}
   .filter_div ul.even li.on:after{width:20px;height:18px;background-size:20px 18px;}
   .filter_div .match_Con li > i{font-size:24px;margin-right:10px;}
   .filter_div .match_Con li > span{font-size:24px;}
   .filter_foot{height:84px;padding:0 28px;}
   /*单选按钮 全选*/
   .filter_foot .f_all_select{margin-top:24px;right:20px;}
   .filter_foot .f_all_select>.radio-tick:first-child{margin-right:48px;}
   .filter_foot .f_all_select>.radio-tick{padding-left:40px;}
   .filter_foot .f_all_select>.radio-tick i{top:-6px;width:36px;height:36px;border-radius:200px;}
   .filter_foot .f_all_select>.radio-tick input{width:36px;height:36px;}
   .filter_foot .f_all_select>.radio-tick b{line-height:24px;font-size:24px;}
   .filter_foot>span{font-size:22px;}
   .filter_foot>span>i{font-size:28px;}
}
