@charset "utf-8";
/* ==========================================================================
   wbnav58.css  —  微图网 栏目页头部（顶栏 + 面包屑 + 二级分类条）
   对标 588ku 列表页：顶栏 70 / 面包屑 38 / 二级条 66·tab 43 / 筛选 tag 30
   吸顶：.v8-top sticky top:0   ·   .v8-sub sticky top:70
   配色：本站橙 #ff7d00
   2026-09-30  v58
   ========================================================================== */

/* 顶栏 / 面包屑 / 二级条 全部按 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}

/* 右侧入口 */
.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}
/* 行业筛选行 → 588ku 风格 */
.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:12px 24px 4px;margin:0}
.aomainlit ul li{border:0 !important;position:relative;line-height:30px;min-height:30px;
                 padding:0 78px 0 52px !important;font-size:13px;list-style:none}
.aomainlit ul li label{position:absolute !important;display:block;top:0;left:0;
                 width:52px !important;height:30px;line-height:30px;color:#8a9099 !important;
                 text-align:left !important;font-size:13px}
.aomainlit ul li span{display:flex !important;flex-wrap:wrap;height:auto !important;
                 line-height:30px !important;overflow:visible !important}
.aomainlit ul li span a{height:30px;line-height:30px;padding:0 12px !important;
                 margin:0 2px 0 0;border-radius:15px;background:transparent !important;
                 color:#333 !important;font-size:13px;display:inline-block;
                 white-space:nowrap;text-decoration:none}
.aomainlit ul li span a:hover{background:#fff3e6 !important;color:#ff7d00 !important}
.aomainlit ul li span a.active,.aomainlit ul li span a.active:hover{
                 background:#ff7d00 !important;color:#fff !important}
.aomainlit ul li i{position:absolute !important;display:block;top:0;right:0 !important;
                 height:30px;line-height:30px;color:#8a9099 !important;font-style:normal;
                 font-size:13px;padding:0 4px 0 14px !important;
                 background:none !important;cursor:pointer}
.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;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:20px !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:10px 12px 4px}
  .aomainlit ul li{padding:0 60px 0 40px !important;line-height:28px;min-height:28px}
  .aomainlit ul li label{width:40px !important;height:28px;line-height:28px;font-size:12px}
  .aomainlit ul li span a{height:28px;line-height:28px;padding:0 10px !important;
                 font-size:12px;border-radius:14px}
  .aomainlit ul li i{height:28px;line-height:28px;font-size:12px;padding-left:10px !important}
  .wrap.order-option{height:42px !important;line-height:42px !important;padding:0 12px}
  .order-option .order a{height:42px !important;line-height:42px !important;padding:0 10px !important;
                 font-size:13px}
  .order-option .fr{display:none}
}