* { margin: 0; padding: 0 }
.filter { background: #ffffff; }
.filter ul { letter-spacing: -5px; }
.filter li { letter-spacing: normal; }
.filter:before { content: ""; display: table; }

.filter_top_nav { clear: both; height: 35px; width: 100%; text-align: center; background: #fff; padding: 10px 0; position: fixed; bottom: 50px; z-index: 99; }
.filter_top_nav li { display: inline-block; line-height: 35px; border: 1px solid #E5E5E5; margin-left: -1px; padding: 0 18px }
.filter_top_nav li.current { color: #FFF; background-color: #54488f; }
.filter_top_nav li:first-child { border-radius: 4px 0 0 4px; }
.filter_top_nav li:last-child { border-radius: 0 4px 4px 0; }

.selType ul {width: 100%; text-align: center;margin:5px 0px 5px 0px; }
.selType ul li { display: inline-block; line-height: 28px; border: 1px solid #E5E5E5; margin-left: -1px; padding: 0 18px;border-radius:5px;}
.selType ul li.current { color: #FFF; background-color: #54488f; }

.filter_right_nav { position: fixed; right: 6px; top: 50%; transform: translate(0, -50%); padding: 4px 0; background: rgba(0,0,0,0.35); border-radius: 30px; z-index: 99; }
.filter_right_nav li { color: rgba(255, 255, 255, .9); font-size: 12px; line-height: 22px; text-align: center; padding: 0 4px; }
.filter_right_nav li a { color: #fff }
.filter_main_nav { padding: 0 10px; margin: 15px 0; display: flex; flex-wrap: wrap; justify-content: flex-start; }
.filter_main_nav li { margin: 6px 1%; padding: 6px 0; color: #666; line-height: 14px; text-align: center; border: 1px solid #E5E5E5; border-radius: 4px; display: inline-block; box-sizing: border-box; display: flex; align-items: center; justify-content: center; }
.filter_main_nav .current { color: #333; border: 1px solid #bdbce3; background-color: #f6f3ff; }
.filter_main_nav .nopot { background: #f5f5f5; color: #999; }
.filter_main_nav .lettertitle { font-size: 14px; line-height: 24px; text-align: left; width: 100%; padding: 0 5px; margin: 0; display: block; border: none; }
.filter_main_nav .condtitle { font-size: 14px; width: 30%; padding: 0; margin: 0; border: none; }
.filter_main_nav li.empty, .filter_main_nav li:empty { height: 0; border: none; }

.fourblocks li { width: 23%; }
.threeblocks li { width: 31%; }
.towblocks li { width: 48%; }
.condition li { width: 21%; }

.filtertool_bottom { height: 50px; position: fixed; bottom: 0; width: 100%; background-color: #F2F2F2; border-top-width: 1px; border-top-style: solid; border-top-color: #EBEBEB; z-index: 99; }
.filtertool_bottom .info { float: left; line-height: 50px; margin-left: 10px; }
.filtertool_bottom .info em { font-weight: bold; color: #F30; font-style: normal; padding: 0 3px; }
.filtertool_bottom .toolbtnnav { float: right; padding-top: 7px; margin-right: 10px; }
.filtertool_bottom .toolbtnnav li { float: left; display: inline-block; padding: 6px 4px; margin-left: 5px; border-radius: 4px; border: 1px solid #E5E5E5; background-color: #FFF; width: 46px; text-align: center; }
.filtertool_bottom .toolbtnnav li.btnSave, .filtertool_bottom .toolbtnnav li#btnSave { background-color: #54488f; color: #FFF; }
.inf { line-height: 30px; background-color: #F2F2F2; padding-left: 10px; color: #333; border-bottom: 1px solid #EAEAEA; }

@media screen and (max-width:320px) {
    .filtertool_bottom .info { font-size: 12px; }
    .filtertool_bottom .info em { padding: 0 1px; }
    .filtertool_bottom .toolbtnnav li { font-size: 12px; width: 40px; }
}