.subnav{position:relative; z-index:8; height:58px; line-height:58px; padding:8px 0; font-size:15px;}
.subnav-position{float:left;}
.subnav-position>b{float:left; font-weight:normal; color:#686868;}
.subnav-position>a{float:left; padding:0 6px;}
.subnav-position>i{float:left; padding:0 6px; color:#989898; line-height:inherit; font-style:normal;}
.subnav-list{float:right;}
.subnav-list>ul>li{float:left; position:relative;}
.subnav-list>ul>li+li{margin:0 0 0 8px;}
.subnav-list>ul>li>a{display:block; padding:0 14px; font-size:16px; position:relative;}
.subnav-list>ul>li ul{position:absolute; display:none; top:100%; left:0; min-width:128px; padding:12px 0; background:#fff; border:1px solid #e8e8e8; box-shadow:0 2px 8px rgba(0,0,0,.18);}
.subnav-list>ul>li ul>li{line-height:38px;}
.subnav-list li:hover>ul{display:block;}
.subnav-list>ul>li li>ul{top:0; left:100%; box-shadow:2px 2px 8px rgba(0,0,0,.18);}
.subnav-list>ul>li li>a{display:block; padding:0 18px; white-space:nowrap; font-size:14px;}
.subnav-list>ul>li li>a:hover{background:#f8f8f8;}
.subnav-list>ul>li>a.on,
.subnav-list>ul>li li>a.on{color:#f20f0f;}
.subnav-list>ul>li>a.on:before{position:absolute; bottom:0; left:0; right:0; content:''; height:3px; background:#f20f0f;}
@media(max-width:1200px){
.subnav{line-height:38px;}
.subnav-list{display:none;}
}
@media(max-width:767px){
.subnav{line-height:28px; font-size:14px;}
.subnav-position>a{padding:0 4px;}
.subnav-position>i{padding:0 4px;}
}