@charset "utf-8";
/* ==========================================================================
   wbnav59.css  —  微图网 栏目页头部 + 列表筛选区（卡片版）
   基线：v58（顶栏70 / 面包屑38 / 二级条66·tab43）
   v59 变更：
     1) 分类标签 胶囊 → 卡片（浅灰底方角，选中橙底白字，换行带间距）
     2) 筛选区与下方列表拉开间距（不紧挨）
     3) 顶栏右侧移除「上传 / 会员中心」（HTML 侧同步）
   配色：本站橙 #ff7d00
   2026-09-30  v59
   ========================================================================== */

/* 顶栏 / 面包屑 / 二级条 全部按 border-box，避免 padding 撑宽（v56 踩过） */
.v8-top,.v8-top *,.v8-bc,.v8-bc *,.v8-sub,.v8-sub *{box-sizing:border-box;-webkit-box-sizing:border-box}

.v8-in{width:1200px;margin:0 auto;position:relative}

/* ============================ 层1 顶栏 70px ============================ */
.v8-top{position:sticky;top:0;z-index:1000;background:#fff;border-bottom:1px solid #eceef1}
.v8-top .v8-in{display:flex;align-items:center;height:70px}

.v8-logo{flex:0 0 150px;width:150px;height:48px;display:flex;align-items:center;margin-right:20px}
.v8-logo img{width:150px;height:auto;max-height:38px;object-fit:contain;display:block;border:0}

.v8-mnav{display:flex;align-items:center;flex:0 0 auto;height:70px}
.v8-mnav > a,.v8-navwrap > a{position:relative;display:flex;align-items:center;height:70px;
             padding:0 17px;font-size:15px;color:#333;white-space:nowrap;text-decoration:none}
.v8-mnav > a:hover,.v8-navwrap > a:hover{color:#ff7d00}
.v8-mnav > a.on,.v8-navwrap > a.on{color:#ff7d00;font-weight:700}
.v8-mnav > a.on:after,.v8-navwrap > a.on:after{content:"";position:absolute;left:17px;right:17px;
             bottom:14px;height:3px;border-radius:2px;background:#ff7d00}
.v8-arrow{display:inline-block;width:0;height:0;margin-left:5px;
          border:4px solid transparent;border-top-color:#999;transition:transform .2s}
.v8-navwrap{position:relative;height:70px}
.v8-navwrap:hover .v8-arrow{border-top-color:#ff7d00;transform:rotate(180deg)}

/* 导航悬浮面板 */
.v8-panel{display:none;position:absolute;left:-10px;top:70px;z-index:1200;width:660px;
          grid-template-columns:repeat(3,1fr);gap:4px 0;background:#fff;
          border:1px solid #eceef1;border-radius:0 0 10px 10px;
          box-shadow:0 10px 26px rgba(0,0,0,.10);padding:16px 10px 18px}
.v8-navwrap:hover .v8-panel{display:grid}
.v8-panel .v8-g{padding:0 14px 10px}
.v8-panel h5{font-size:14px;font-weight:700;color:#333;padding:0 0 8px;
             border-bottom:1px solid #f0f1f3;margin:0 0 8px;line-height:1.4}
.v8-panel h5 em{font-style:normal;font-size:11px;font-weight:400;color:#ff7d00;
                background:#fff3e6;border-radius:3px;padding:1px 5px;margin-left:5px;vertical-align:1px}
.v8-panel p{margin:0;display:flex;flex-wrap:wrap}
.v8-panel p a{font-size:13px;color:#5a5f66;padding:4px 8px;border-radius:4px;
              white-space:nowrap;text-decoration:none}
.v8-panel p a:hover{background:#fff3e6;color:#ff7d00}

/* 搜索框 400x46 圆角8 */
form.v8-search{position:absolute;left:50%;top:12px;transform:translateX(-50%);
               width:400px;height:46px;z-index:5;margin:0}
form.v8-search .v8-sbox{position:relative;width:100%;height:46px;border:2px solid #ff7d00;
               border-radius:8px;background:#fff;display:flex;align-items:center}
.v8-sel{position:relative;flex:0 0 111px;width:111px;height:42px;line-height:42px;
        border-radius:6px 0 0 6px;font-size:15px;color:#333;cursor:pointer;
        padding-left:14px;user-select:none;-webkit-user-select:none}
.v8-sel .v8-arrow{margin-left:6px}
.v8-sel .v8-drop{display:none;position:absolute;left:-2px;top:44px;width:150px;z-index:1200;
        background:#fff;border:1px solid #eceef1;border-radius:8px;
        box-shadow:0 8px 22px rgba(0,0,0,.12);padding:6px 0}
.v8-sel:hover .v8-drop{display:block}
.v8-sel .v8-drop a{display:block;font-size:14px;line-height:34px;padding:0 16px;
        color:#333;text-decoration:none;white-space:nowrap}
.v8-sel .v8-drop a:hover{background:#fff3e6;color:#ff7d00}
form.v8-search input.v8-q{flex:1;width:100%;min-width:0;height:42px;border:0;outline:0;
        font-size:15px;color:#333;padding:0 6px 0 12px;background:transparent;
        font-family:inherit;line-height:42px}
form.v8-search input.v8-q::placeholder{color:#b6bcc4}
.v8-cam{position:absolute;right:108px;top:0;width:26px;height:42px;display:flex;
        align-items:center;justify-content:center;color:#c2c8cf;cursor:pointer}
.v8-cam:hover{color:#ff7d00}
.v8-cam svg{width:19px;height:19px}
form.v8-search button.v8-btn{flex:0 0 98px;width:98px;height:42px;border:0;margin:0;
        background:#ff7d00;color:#fff;font-size:16px;cursor:pointer;
        border-radius:0 7px 7px 0;display:flex;align-items:center;justify-content:center;
        gap:6px;font-family:inherit;padding:0}
form.v8-search button.v8-btn:hover{background:#ff8f1f}
form.v8-search button.v8-btn svg{width:17px;height:17px}

/* 右侧入口（v59：只剩 充值 + 登录|注册） */
.v8-right{display:flex;align-items:center;flex:0 0 auto;margin-left:auto}
.v8-right .v8-fn{font-size:14px;color:#5a5f66;padding:0 11px;white-space:nowrap;
                 text-decoration:none}
.v8-right .v8-fn:hover{color:#ff7d00}
.v8-login{display:flex;align-items:center;height:34px;margin-left:12px;
          border:1px solid #ff7d00;border-radius:17px;overflow:hidden}
.v8-login a{display:block;height:32px;line-height:32px;padding:0 15px;
            font-size:14px;color:#ff7d00;text-decoration:none;white-space:nowrap}
.v8-login a:hover{background:#fff3e6}
.v8-login .v8-sp{width:1px;height:14px;background:#ffd7ad}
/* 登录后 DedeAJax 会把 #_userlogin 内容替换成会员信息 */
#_userlogin.v8-login{padding:0}
#_userlogin.v8-login a{margin:0}

/* ============================ 层2 面包屑 38px ============================ */
.v8-bc{background:transparent}
.v8-bc .v8-in{height:38px;line-height:38px;overflow:hidden}
.v8-bc a,.v8-bc span,.v8-bc b{font-size:12px;color:#8a9099;font-weight:400;
                               text-decoration:none}
.v8-bc a:hover{color:#ff7d00}
.v8-bc i{font-style:normal;margin:0 8px;color:#c5cad1;font-size:11px}

/* ============================ 层3 二级分类条 66px（吸顶） ============================ */
.v8-sub{position:sticky;top:70px;z-index:900;background:transparent}
.v8-sub .v8-in{height:66px;background:#fff;border-radius:8px 8px 0 0;
               padding:16px 24px 7px;display:flex;align-items:flex-end}
.v8-sub a{position:relative;display:flex;align-items:center;gap:6px;height:43px;
          padding:0 15px;font-size:14px;color:#333;border-radius:8px 8px 0 0;
          white-space:nowrap;text-decoration:none}
.v8-sub a:hover{color:#ff7d00}
.v8-sub a.on,.v8-sub a.on:hover{background:#ff7d00;color:#fff}
.v8-sub .v8-ic{position:relative;flex:0 0 14px;width:14px;height:14px}
.v8-sub .v8-ic:before,.v8-sub .v8-ic:after{content:"";position:absolute;width:6px;
          height:6px;border-radius:2px;background:currentColor}
.v8-sub .v8-ic:before{left:0;top:0;box-shadow:8px 0 0 currentColor}
.v8-sub .v8-ic:after{left:0;top:8px;box-shadow:8px 0 0 currentColor}
.v8-sub.stuck .v8-in{box-shadow:0 10px 16px -12px rgba(0,0,0,.22)}

/* ============================ 列表页筛选区（白卡 + 卡片标签） ============================ */
/* 旧面包屑隐藏（新面包屑已并入 head.htm） */
.aomainlit .wbmap,.wrap.webmap{display:none !important}

.aomainlit{padding-top:0 !important;background:#fff;border-radius:0;
           box-sizing:border-box}
.aomainlit ul{border:0 !important;border-radius:0;overflow:visible;
              padding:14px 24px 6px;margin:0}
.aomainlit ul li{border:0 !important;position:relative;line-height:1;min-height:0;
                 padding:0 76px 0 54px !important;font-size:13px;list-style:none}
.aomainlit ul li label{position:absolute !important;display:block;top:0;left:0;
                 width:54px !important;height:32px;line-height:32px;color:#8a9099 !important;
                 text-align:left !important;font-size:13px}
.aomainlit ul li span{display:flex !important;flex-wrap:wrap;align-items:flex-start;
                 height:auto !important;overflow:visible !important;padding-bottom:0}

/* ★ 卡片效果：浅灰底方角，选中橙底白字，换行 8px 间距 */
.aomainlit ul li span a{display:inline-block;height:32px;line-height:32px;
                 padding:0 14px !important;margin:0 8px 8px 0;
                 border-radius:6px;background:#f4f5f7 !important;
                 color:#4b5158 !important;font-size:13px;white-space:nowrap;
                 text-decoration:none;
                 transition:background .15s,color .15s}
.aomainlit ul li span a:hover{background:#ffe9d5 !important;color:#ff7d00 !important}
.aomainlit ul li span a.active,.aomainlit ul li span a.active:hover{
                 background:#ff7d00 !important;color:#fff !important;font-weight:500}

/* 折叠「更多」（保留：分类项多时可折叠） */
.aomainlit ul li i{position:absolute !important;display:block;top:0;right:0 !important;
                 height:32px;line-height:32px;color:#8a9099 !important;font-style:normal;
                 font-size:13px;padding:0 4px 0 14px !important;
                 background:none !important;cursor:pointer;white-space:nowrap}
.aomainlit ul li i:hover{color:#ff7d00}
.aomainlit ul li i.active{color:#ff7d00 !important;background:none !important}

/* 排序条：与筛选区同一张白卡，下圆角 + 与下方列表拉开距离 */
.wrap.order-option{margin-top:0 !important;margin-bottom:20px !important;
                 height:46px !important;line-height:46px !important;
                 background:#fff !important;border-radius:0 0 8px 8px;
                 padding:0 24px;box-sizing:border-box;width:1200px}
.order-option .order a{height:46px !important;line-height:46px !important;padding:0 14px !important;
                 margin-right:2px !important;font-size:14px;color:#5a5f66 !important;
                 background:none !important;text-decoration:none}
.order-option .order a.active,.order-option .order a:hover{background:none !important;
                 color:#ff7d00 !important}
.order-option .order a.active{font-weight:700}
.order-option .fl{float:left;display:block;height:46px}
.order-option .fr{float:right;padding-top:0 !important;height:46px}
.order-option .option .sxpart{position:relative;float:left;z-index:999;height:46px}
.order-option .option .sxpart .title{height:46px !important;line-height:46px !important;
                 color:#8a9099 !important;font-size:13px;padding:0 24px 0 14px !important;
                 border-right:0 !important;cursor:pointer}
.order-option .option .sxpart .title i{top:20px !important;right:8px !important}
.order-option .option .sxpart .title.active{color:#ff7d00 !important}
.order-option .option .sxpart ul{top:46px !important}

/* 筛选区下方给列表留出间距（不紧挨） */
.indtabmain{margin-top:24px !important}
.aomainlit + .clearfix + .indtabmain{margin-top:0 !important}

/* ============================ 响应式 ============================ */
@media (max-width:1240px){
  .v8-in{width:auto;margin:0 16px}
  form.v8-search{position:relative;left:auto;top:auto;transform:none;margin:0 16px;
                 flex:1 1 auto;width:auto;max-width:400px}
  .v8-right .v8-fn{display:none}
  .aomainlit ul,.wrap.order-option{width:auto !important}
  .wrap.order-option{padding:0 16px}
}
@media (max-width:768px){
  .v8-top{position:relative}
  .v8-top .v8-in{height:auto;flex-wrap:wrap;padding:8px 0 10px}
  .v8-logo{flex:0 0 112px;width:112px;order:1;margin-right:0}
  .v8-logo img{width:112px;max-height:32px}
  .v8-mnav{display:none}
  .v8-right{order:2;margin-left:auto}
  .v8-right .v8-fn{display:none}
  form.v8-search{order:3;position:relative;left:auto;top:auto;transform:none;
                 flex:1 0 100%;width:100%;margin:9px 0 0;max-width:none}
  form.v8-search .v8-sbox{border-width:1px;height:42px}
  .v8-sel{flex:0 0 92px;width:92px;font-size:14px;padding-left:11px;height:38px;line-height:38px}
  .v8-sel .v8-drop{top:40px}
  form.v8-search input.v8-q{font-size:14px;padding-left:8px;height:38px;line-height:38px}
  form.v8-search button.v8-btn{flex:0 0 62px;width:62px;height:38px;font-size:0;gap:0}
  .v8-cam{right:70px;height:38px}
  .v8-login{margin-left:0}
  .v8-login a{padding:0 11px;font-size:13px}
  .v8-bc .v8-in{height:34px;line-height:34px}
  .v8-sub{top:0}
  .v8-sub .v8-in{padding:8px 10px 0;height:58px;overflow-x:auto;overflow-y:hidden;
                 -webkit-overflow-scrolling:touch}
  .v8-sub a{height:40px;padding:0 12px;font-size:13px;border-radius:7px 7px 0 0}
  .aomainlit ul{padding:12px 12px 4px}
  .aomainlit ul li{padding:0 58px 0 42px !important}
  .aomainlit ul li label{width:42px !important;height:30px;line-height:30px;font-size:12px}
  .aomainlit ul li span a{height:30px;line-height:30px;padding:0 11px !important;
                 font-size:12px;border-radius:6px;margin:0 6px 6px 0}
  .aomainlit ul li i{height:30px;line-height:30px;font-size:12px;padding-left:10px !important}
  .wrap.order-option{height:42px !important;line-height:42px !important;padding:0 12px;
                 margin-bottom:14px !important}
  .order-option .order a{height:42px !important;line-height:42px !important;padding:0 10px !important;
                 font-size:13px}
  .order-option .fr{display:none}

  /* ---- v59f：手机端「恢复 + 卡片化」分类条 ----
     原 v30 逻辑：mobile-app.js 给 body 加 .wb-lb-on → 隐藏整个 .listmains，
     只留一行「栏目下拉 + 栏目内搜索」，代价是手机端彻底没有「行业/类型」筛选。
     v59f：保留那一行工具栏，同时把 .listmains 恢复出来，并换成卡片(横滑)。
     选择器加 html 提升优先级，确保压过 mobile-app.css 的 !important。 */
  html body.wb-lb-on .aomainlit .listmains,
  html .aomainlit .listmains{display:block !important}
  .listmains{margin:8px 0 0 !important;padding:6px 12px 2px !important}
  .listmains > ul > li{display:flex !important;padding:7px 0 !important}
  .listmains > ul > li > label{flex:0 0 46px;font-size:12px !important;
                 color:#8a9099 !important;text-align:left !important}
  .listmains > ul > li > span{overflow-x:auto;flex-wrap:nowrap !important}
  .listmains > ul > li > span > a{display:inline-block !important;flex:0 0 auto;
                 height:30px !important;line-height:30px !important;
                 padding:0 12px !important;margin:0 6px 6px 0 !important;
                 border-radius:6px !important;background:#f4f5f7 !important;
                 color:#4b5158 !important;font-size:13px !important;
                 white-space:nowrap;text-decoration:none}
  .listmains > ul > li > span > a.active,
  .listmains > ul > li > span > a.active:hover{background:#ff7d00 !important;
                 color:#fff !important;font-weight:500}
  .listmains > ul > li > i{display:none !important}
}