body {
}
.sel-bg {
    background-color: rgba(0,0,0,0.45);
    position: fixed;
    _position: absolute;
    z-index: 9000000;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
}
.sel-warp {
    position: fixed;
    _position: absolute;
    pointer-events: auto;
    
    top: 150px;
    left: 0;
    margin: 0;
    padding: 0;
    background-color: #fff;
    -webkit-background-clip: content;
    box-shadow: 0 16px 56px rgba(0,0,0,.2);
    -webkit-overflow-scrolling: touch;

    z-index: 9000001;
    width: 1000px;
    height: 580px;
    top: 50%;
    left: 50%;
    margin-top: -290px;
    margin-left: -500px;
    border-radius: 14px;
    overflow: hidden;
}
.sel-layer-title
 {
    
    padding: 0 90px 0 24px;
    height: 48px;
    line-height: 48px;
    border-bottom: none;   
    font-size: 16px;
    font-weight: 600;
    color: #fff;
    overflow: hidden;
    /* 兜底 + 最底层：不支持 repeating-linear-gradient / 多层背景时，就还是原来这条纯蓝渐变 */
    background: linear-gradient(135deg, #0378D8 0%, #1677ff 100%);
    /* ============================================================
       标题栏：蓝色为主 + 白色柔光，缓慢横向流动（2026-09-20）
       - 只用 background-position 动画，不引入 ::before / z-index ⇒ 零层叠风险。
         标题栏里本来就只有标题文字；"快速搜索"框 .searchwarp 和关闭按钮
         .sel-layer-setwin 是它的**兄弟节点**（绝对定位），不在这块里，互不影响。
       - 两条斜向柔光带各用自己一个周期：白带 420px、浅蓝带 660px。
         tile 宽 = 周期 ⇒ 平铺时相位连续；每帧位移 = 整数个 tile ⇒ 循环点看不出来。
         两条带速度不同（32 / 51 px/s），扫过时有轻微视差，比单带"活"。
       - 110deg 在 tile 接缝处会带来 ~25px 相位差，但两条带两侧都留了 >=100px
         全透明缓冲，错位落在透明区里，肉眼不可见。
       - 白带不透明度上限 .17：这里是白字，再亮就把可读性吃掉了。 */
    background-color: #0378D8;
    background-image:
        repeating-linear-gradient(110deg,
            rgba(255,255,255,0)   0px,
            rgba(255,255,255,0)   140px,
            rgba(255,255,255,.09) 180px,
            rgba(255,255,255,.17) 210px,
            rgba(255,255,255,.09) 240px,
            rgba(255,255,255,0)   280px,
            rgba(255,255,255,0)   420px),
        repeating-linear-gradient(110deg,
            rgba(140,205,255,0)   0px,
            rgba(140,205,255,0)   330px,
            rgba(140,205,255,.16) 500px,
            rgba(140,205,255,0)   660px),
        linear-gradient(135deg, #0378D8 0%, #1677ff 58%, #2f8ee8 100%);
    background-size: 420px 100%, 660px 100%, 100% 100%;
    background-repeat: repeat, repeat, no-repeat;
    background-position: 0px 0, 0px 0, 0 0;
    -webkit-animation: selTitleFlow 13s linear infinite;
    animation: selTitleFlow 13s linear infinite;
    border-radius: 0;
}
/* 每层位移都取自己 tile 的整数倍（420 / 660），所以各自无缝循环 */
@-webkit-keyframes selTitleFlow {
    from { background-position:    0px 0,    0px 0, 0 0; }
    to   { background-position: -420px 0, -660px 0, 0 0; }
}
@keyframes selTitleFlow {
    from { background-position:    0px 0,    0px 0, 0 0; }
    to   { background-position: -420px 0, -660px 0, 0 0; }
}
/* 系统开了"减弱动态效果"就不动 —— 静态渐变本身也是好看的 */
@media (prefers-reduced-motion: reduce) {
    .sel-layer-title {
        -webkit-animation: none;
        animation: none;
    }
}
.sel-layer-setwin {
    position: absolute;
    right: 16px;
    *right: 0;
    top: 16px;
    font-size: 0;
    line-height: initial
}

.sel-layer-setwin a {
    display: inline-block;zoom:1; *display:inline;
    vertical-align: top;

    position: relative;
    width: 16px;
    height: 16px;
    margin-left: 10px;
    font-size: 12px;
    _overflow: hidden
}
.sel-layer-ico {
    background: url(/selector/ico.png) no-repeat;
}
 .searchwarp {
       position: absolute;
    top: 9px;
    right: 50px;
     color: #fff;
    line-height: 30px;
    height: 30px;
    font-size: 13px;
}
 .searchwarp .search {
      border-radius: 5px;
    line-height: 30px;
    height: 30px;
    text-indent: 12px;
    width: 200px;
    border: none;
    outline: none;
    font-size: 13px;
    vertical-align: middle;
    background: #fff;
    color: #333;
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}
.searchwarp .search::placeholder {
    color: #999;
}

.sel-layer-setwin .sel-layer-close1 {
    background-position: -18px 0;
    cursor: pointer
}
.sel-layer-content {
    position: relative;
    overflow: auto;
    border-radius: 0;
}


.sl-b-selected {
       overflow: hidden;
    zoom: 1;
    padding: 16px 28px 8px;
    display: none;
}
.sl-b-selected .sl-b-key, .selector .sl-b-selected .sl-v-list {
    float: left;
}
.sl-b-selected .sl-b-key {
    font-size: 13px;
    height: 23px;
    line-height: 35px;
}
.sl-v-list li {
       float: left;
    _display:inline ;
    margin-bottom: 8px;
    margin-top: 2px;
    margin-right: 10px;
    cursor: pointer;
    border: solid 1px #dcdfe6;
    border-radius: 6px;
    width: auto;
    display: block;
    padding-left: 2px;
    transition: all 0.2s ease;
    background-color: #fff;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
        
}
 .sl-v-list li:hover {
    border-color: #0378D8;
    background-color: #ecf5ff;
    box-shadow: 0 2px 4px rgba(3,120,216,0.1);
}
 .sl-v-list li a {
    width: auto;
    position: relative;
    display: inline-block;zoom:1; *display:inline;

    float: left;
    white-space: nowrap;
    zoom: 1;
    color: #606266;
    
    text-decoration: none;
    line-height: 28px;
    height: 28px;
    margin: 0;
    padding: 0 14px;
    font-size: 14px;
        padding-right: 10px;
}

.sl-v-list li a:hover {
    color: #0378D8;
    text-decoration: none;
} 
 .sl-b-selected .sl-v-list li {
    background-color: #0378D8;
    border-color: #0378D8;
 }
 .sl-b-selected .sl-v-list li a {
     color: #fff!important;
 }
.sl-v-list li.selected {
    background-color: #0378D8;
    border-color: #0378D8;
    box-shadow: 0 2px 6px rgba(3,120,216,0.3);
}
.sl-v-list li.selected a {
    color: #fff !important;
}
.sl-v-list li.fa-dd.selected a,
.sl-v-list li.fa_selected a,
.city-select dd.fa-dd .sl-v-list li.selected a,
.city-select dd.fa-dd .sl-v-list li.fa_selected a {
    color: #0378D8 !important;
}
.city-select dd.fa-dd .sl-v-list li.selected,
.city-select dd.fa-dd .sl-v-list li.fa_selected {
    background-color: #ecf5ff;
    border-color: #b3d8ff;
}
.sl-v-list li.fa_selected {
    background-color: #ecf5ff;
    border-color: #b3d8ff;
}
.sl-v-list li.fa_selected a {
    color: #0378D8;
}
.sl-b-selected .sl-v-list li a i {
    display: inline-block;
    width: 12px;
    height: 12px;
    margin-left: 6px;
    vertical-align: text-top;
    background: url(/selector/ico.png) no-repeat;
    background-position: -2px 4px;
    cursor: pointer;
}
 
.sl-b-selected .sl-v-list li.AlertMess {
   background-color: #ff9900;
    border-radius: 0;
    border: 0;
    padding: 0;
}

 .fa-dd .sl-v-list li {
    background-color: #fff;
     border: 1px solid #e4e7ed;
 }
 .fa-dd .sl-v-list li a {
     color: #606266;
 }
    .fa-dd .sl-v-list li a i {
        display: inline;
        font-style: normal;
    }
    .fa-dd .sl-v-list li a i:after {
        content: "";
        display: none;
    }
    .fa-tip {
        font-size: 12px;
        color: #0378D8;
        margin-left: 4px;
        font-weight: normal;
    }
    
    .sl-v-list li.fa_selected a ,
    .sl-v-list li.selected a {
        color: #0378D8;
    }
    
 .fa-dd .sl-v-list li.fa_selected {
     background-color: #ecf5ff;
     border-color: #b3d8ff;
 }
 .fa-dd .sl-v-list li.fa_selected a {
     color: #0378D8;
 }

 .sl-btns {
   text-align: center;
    padding: 12px 0 24px 0;
    background-color: #fafafa;
    border-top: 1px solid #f0f0f0;
}
  .sl-btns .btn {
    display: inline-block;zoom:1; *display:inline;
    line-height: 14px;
    height: 14px;
    border-radius: 6px;
    background: #F7F7F7;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s ease;
}
 .sl-btns .btn-default {
    border: 1px solid #dcdfe6;
   width: 100px;
    height: 36px;
    line-height: 36px;
    color: #606266;
    background-color: #fff;
    margin-right: 12px;
    font-size: 14px;
}
 .sl-btns .btn-default:hover {
    border-color: #0378D8;
    color: #0378D8;
}
 .sl-btns .btn-primary {
       
    border: 1px solid #0378D8;
   width: 100px;
    height: 36px;
    line-height: 36px;
    background: linear-gradient(135deg, #0378D8 0%, #1677ff 100%);
    color: #fff;
    font-size: 14px;
}
  .sl-btns .btn-primary:hover {
    color: #FFF;
    opacity: 0.9;
}
  .city-select-wrap {
      border-bottom: solid 1px #f3f6f8;  
}
    .city-select-wrap .city-select dt {
        width: 50px;
        top: 4px;
    }
    .city-select-tab {
        border-bottom: 1px solid #eeeeee;
        font-size: 13px;
        position: relative;

    }

.city-select-tab > a {
    display: inline-block;zoom:1; *display:inline;
    padding: 0px 24px;
    border: 1px solid transparent;
    color: #606266;
    text-align: center;
    outline: 0;
    text-decoration: none;
    cursor: pointer;
    font-size: 14px;
    height: 40px;
    line-height: 40px;
    margin-bottom: -1px;
    transition: all 0.2s ease;
}

.city-select-tab > a:hover {
    color: #0378D8;
}

.city-select-tab > a.active {
     background: #fff;
    border: 1px solid #eeeeee;
    border-bottom: 1px solid #fff;
    color: #0378D8;
    padding-right: 20px;
    line-height: 40px;
    padding-top: 0;
    font-weight: 500;
}

.city-select-tab > a:first-child {
    margin-left: 20px;
}


.city-select-content {
    width: 100%;
    height: 440px;
    overflow-y: auto;
    background-color: #fff;
    position: relative;
    overflow: hidden;
}

.city-select {
    font-size: 13px;
}
.city-select dl {
    line-height: 1.6;
    clear: both;
    padding: 8px 0 6px;
    margin: 0;
    border-bottom: #f0f2f5 1px solid;
    position: relative;
    overflow: hidden;
}

.city-select > dl:first-child {
    padding-top: 4px;
}
.city-select > dl:last-child{
    padding-bottom: 4px;
    border-bottom: none;
}

/* 一级大类标题：左侧固定宽度，蓝色加粗，左侧装饰条 */
.city-select dt {
    position: relative;
    float: left;
    left: auto;
    width: 110px;
    font-weight: 600;
    font-size: 14px;
    color: #0378D8;
    text-align: left;
    line-height: 1.6;
    margin-bottom: 6px;
    padding-left: 10px;
    border-left: 3px solid #0378D8;
    background: transparent;
    padding-top: 2px;
    padding-bottom: 2px;
}

/* 选择城市时：dt 宽度 50px */
.sel-city .city-select dt {
    width: 50px;
    padding-left: 8px;
    font-size: 13px;
}
.sel-city .city-select dd {
    margin-left: 60px;
}

/* 选择职位时：dt 宽度 110px */
.sel-job .city-select dt {
    width: 130px;
    padding-left: 10px;
    font-size: 14px;
}
.sel-job .city-select dd {
    margin-left: 120px;
}

.city-select dd {
    margin-left: 120px;
    line-height: 1.6;
}

.city-select.province dd {
    margin-left: 0;
}
.city-select.city dd {
    margin-left: 0;
}
.city-select.city dd.fa-dd {
    margin-left: 0; 
}
.city-select.district dd {
    margin-left: 0;
}

.city-select a {
    display: inline-block;zoom:1; *display:inline;
    padding: 0 10px;
    outline: 0;
    text-decoration: none;
    white-space: nowrap;
    margin-right: 2px;
    text-decoration: none;
    color: #333;
    cursor: pointer;
}

.city-select-tab-content .city-select {
        margin: 16px 28px 0 28px;
}

/* ============================================================
   底部对齐 + 底栏观感（city / jobcate / jobnav / site / hotsite / industry / level3job 通用）
   真凶：面板总高由 JS 按 sel_type 写死（city 620、jobcate 640、site 620 …），
   而内容区高度来自另一个配置 st.content_height（city 360、jobcate 400 …），
   两者凑不满 ⇒ 底栏下面漏出一段白带（实测：city 48px、jobcate 28px。
   其余类型是同一套公式：差额 = 面板高 − 内容区高 − 标题/已选/tab/底栏这些固定块）。
   这里不写死任何数字，用 flex 让"内容区"把差额吃回去，底栏永远贴住面板底。
   ============================================================ */
.sel-layer-content {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-flex-direction: column;
    flex-direction: column;
    /* 48px = .sel-layer-title 的高度；面板高度不固定时 calc 失效，会优雅退化成原行为 */
    height: calc(100% - 48px);
}
.sel-layer-content > .sl-b-selected,
.sel-layer-content > .sl-btns {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 auto;
    flex: 0 0 auto;
}
/* 中间那块（tab 条 + 内容区）负责伸缩 */
.sel-layer-content > .city-picker-dropdown,
.city-select-wrap {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-flex-direction: column;
    flex-direction: column;
    -webkit-box-flex: 1;
    -webkit-flex: 1 1 auto;
    flex: 1 1 auto;
    min-height: 0;
}
.city-select-tab {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 auto;
    flex: 0 0 auto;
}
/* 内容区：JS 写的 inline height 只当"基准高度"，富余高度全部给它 */
.city-select-content.city-select-tab-content {
    -webkit-box-flex: 1;
    -webkit-flex: 1 1 auto;
    flex: 1 1 auto;
    min-height: 0;
}
/* 底栏：上下对称留白；底色改纯白（原来的 #fafafa 在白底上根本看不出来，
   反而像一块没对齐的灰）；上边线只留一条 —— .city-select-wrap 的下边线去掉，
   否则和这里叠成 2px 双线 */
.sl-btns {
    padding: 16px 0;
    background-color: #fff;
    border-top: 1px solid #ebeef5;
}
.city-select-wrap {
    border-bottom: none;
}
 .sel-layer-content .AlertMess{
    text-align: center;
}
 .sel-layer-content .AlertMess span{
   font-size: 12px;
    padding: 0px 13px;
    background-color: #ff9900;
    color: #fff;
    line-height: 20px;
    height: 20px;
}


 .city-select-tab i{
     display: none;
 }
 .city-select-tab a.active i{
        display: inline;
    padding: 0px 16px 0 0;
    height: 20px;
    background: url(/selector/ico.png) no-repeat;
    background-position: -35px 2px;
 }

 .nosearchresult {
     padding-top: 60px;
     text-align: center;
     color: #909399;
     font-size: 14px;
 }

 .sel-alert-warp {
     display: none;
    position: absolute;
    z-index: 999;
    top: 44%;
    text-align: center;
    width: 100%;
 }
 .sel-alert-content {
    display: inline;
    font-size: 16px;
    background-color: rgba(0, 0, 0, 0.65);
    color: #fff;
    line-height: 36px;
    padding: 10px 24px;
    margin: auto;
    border-radius: 8px;
}
 .clearfix {
    *zoom: 1;
}

    .clearfix:after {
        content: " ";
        display: block;
        height: 0;
        clear: both;
        visibility: hidden;
    }

 .zh_level1 li {
    width: 100%;
    border: none;
    display: block;
    font-size: 15px;
    margin-top: 0;
    margin-bottom: 16px;
    background: transparent;
}
 .zh_level1 li:hover {
    background: transparent;
}
 .zh_level1 li a{
    color: #0378D8;
     font-weight: 600;
     font-size: 15px;
     padding-left: 0;
     border-left: none;
     background: transparent;
     padding-top: 0;
     padding-bottom: 0;
     line-height: 1.6;
     height: auto;
}
 .zh_level1 li a:hover {
    color: #0378D8;
}
 .zh_level2_warp_all {
     width: 100%;
     height: 100%;
     position: relative;
     overflow: hidden;
 }
 .zh_level2_warp_all_bg {
     display: none;
 }
  /* ===== 搜索结果：二级 / 三级 左右结构 ===== */
.zh_level2_warp {
    position: relative;
    margin-bottom: 12px;
    overflow: hidden;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: start;
    -webkit-align-items: flex-start;
    align-items: flex-start;
}
/* 左栏：二级（宽度贴合文字；真正的宽度由 JS 按当前面板里最宽的二级名统一，禁止被 flex 压缩） */
.zh_level2 {
    float: left;
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 auto;
    flex: 0 0 auto;
}
.zh_level2 li {
    float: none;
    /* 盒子统一填满左栏：左栏宽度已经由 JS 按"当前面板里最宽的二级名"定过一次，
       所以填满 = 每行盒子一样宽，且不会比最长的名字更宽。
       （曾经用 fit-content 让盒子贴合文字，结果同一屏里 60/74/88/130/144 五种宽度，
        用户直接截图说"有的宽有的窄" —— 不要再改回去。） */
    width: 100%;
    overflow: hidden;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    display: block;
    margin: 2px 0 0 0;
    border: solid 1px #b3d8ff;
    border-radius: 6px;
    padding-left: 2px;
    text-align: center;
    transition: all 0.2s ease;
    background-color: #ecf5ff;
    box-shadow: 0 1px 2px rgba(3,120,216,0.1);
    cursor: pointer;
}
.zh_level2 li:hover {
    border-color: #0378D8;
    background-color: #d9ecff;
    box-shadow: 0 2px 4px rgba(3,120,216,0.2);
}
.zh_level2 li a {
    width: auto;
    position: relative;
    display: contents;
    float: left;
    white-space: nowrap;
    color: #0378D8;
    font-weight: 500;
    text-decoration: none;
    line-height: 28px;
    height: 28px;
    margin: 0;
    padding: 0 12px;
    font-size: 14px;
}
.zh_level2 li a:hover {
    color: #0378D8;
}
/* 右栏：三级 */
.zh_level3_warp {
    float: none;
    width: auto;
    -webkit-box-flex: 1;
    -webkit-flex: 1 1 auto;
    flex: 1 1 auto;
    min-width: 0;
    /* 左栏与三级胶囊之间的间距就这一个 12px。
       别再拆成 margin + border + padding（之前那样是为了插一条竖分隔线，
       2026-09-20 已按用户要求去掉）—— 拆开会让"胶囊起点"这个数字跟着变，
       看着像胶囊挪了位，其实只是边框盒的算法变了。 */
    margin: 0 0 0 12px;
    padding-left: 0;
    clear: none;
    overflow: hidden;
}
 .zh_level3 li {
    float: left;
    width: auto;
    display: block;
    margin-bottom: 6px;
    margin-top: 2px;
    margin-right: 8px;
    border: solid 1px #e4e7ed;
    border-radius: 14px;
    padding-left: 2px;
    transition: all 0.2s ease;
    background-color: #fff;
    cursor: pointer;
 }
 .zh_level3 li:hover {
    border-color: #0378D8;
    background-color: #f0f7ff;
}
 .zh_level3 li a {
    width: auto;
    position: relative;
    display: inline-block;
    float: left;
    white-space: nowrap;
    color: #606266;
    text-decoration: none;
    line-height: 24px;
    height: 24px;
    margin: 0;
    padding: 0 12px;
    font-size: 13px;
 }
 .zh_level3 li a:hover {
    color: #0378D8;
}