/* public.css核心布局 */
.container, .layout-main, .ad-banner, .top-search-container, .tj-box, .province-sections, .channel-links, .footer { width: 1560px; margin: 0 auto; }
@media screen and (max-width: 1599px) { .container, .layout-main, .ad-banner, .top-search-container, .tj-box, .province-sections, .channel-links, .footer { width: 1190px; } }

/* 全局基础设置 */
* { margin: 0; padding: 0; font-size: 14px; color: #333; text-align: left; font-family: "微软雅黑", sans-serif; }
a { text-decoration: none; color: inherit; }
img { border: 0; max-width: 100%; display: block; }
.fl { float: left; } .fr { float: right; } .clear { clear: both; }
.text-center { text-align: center; } .text-left { text-align: left; } .text-right { text-align: right; }
.relative { position: relative; } .absolute { position: absolute; }
.mt-10 { margin-top: 10px; } .mb-10 { margin-bottom: 10px; } .ml-10 { margin-left: 10px; } .mr-10 { margin-right: 10px; } .pb-20 { padding-bottom: 20px; }
.bg-white { background-color: #fff; } .bg-gray-light { background-color: #f6f6f6; } .bg-gray-lighter { background-color: #f7f7f7; } .bg-red-primary { background-color: #e62a2a; } .bg-red-dark { background-color: #d11120; } .bg-orange-highlight { background-color: #ff6a00; }
.border-top-red { border-top: 2px solid #ff6a00; } .border-top-orange { border-top: 2px solid #ff6a00; } .border-dashed-gray { border: 1px dashed #cecece; }
.location-bar { width: 100%; height: 40px; line-height: 40px; font-size: 18px; }

/* Icon Font */
@font-face { font-family: "iconfont"; src: url('/css/iconfont/iconfont.eot'); src: url('/css/iconfont/iconfont.eot#iefix') format('embedded-opentype'), url('/css/iconfont/iconfont.woff') format('woff'), url('/css/iconfont/iconfont.ttf') format('truetype'), url('/css/iconfont/iconfont.svg#iconfont') format('svg'); }
.iconfont { font-family: "iconfont" !important; font-size: 16px; font-style: normal; -webkit-font-smoothing: antialiased; -webkit-text-stroke-width: 0.2px; -moz-osx-font-smoothing: grayscale; }

/* Top Banner */
.top-banner { background-color: #f6f6f6; border-bottom: 1px #e6e6e6 solid; height: 34px; }
.top-banner-cell { line-height: 34px; }
.link-blue { color: #005fc4; margin-right: 10px; }
.app-download { position: relative; display: inline-block; text-align: center; padding: 0 5px; }
.app-download:hover .app-qrcode { display: block; }
.app-qrcode { position: absolute; z-index: 999; border: 5px solid #fff; border-radius: 3px; margin-top: 15px; margin-left: -30px; display: none; transition: opacity 0.3s, visibility 0.3s; }

/* 云黄页顶部导航栏 */
.top { width: 100%; min-width: 1190px; background-color: #f6f6f6; border-bottom: 1px solid #e6e6e6; box-sizing: border-box; }
.top-section-1 { height: 34px; line-height: 34px; }
.top-box { width: 1190px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; height: 100%; box-sizing: border-box; padding: 0 10px; }
.top-box-left { font-size: 12px; color: #666; white-space: nowrap; }
.top-box-left a { color: #005fc4; margin-left: 8px; font-size: 12px; text-decoration: none; }
.top-box-left a:hover { text-decoration: underline; }
.top-box-right { display: flex; align-items: center; gap: 15px; }
.box-right-sm { position: relative; display: flex; align-items: center; font-size: 12px; color: #666; white-space: nowrap; cursor: default; }
.box-right-sm-title .iconfont { font-size: 10px; margin-left: 2px; }
.box-right-sm-img { position: absolute; top: 100%; right: 0; width: 100px; height: 100px; background-color: #fff; border: 1px solid #ddd; padding: 5px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); opacity: 0; visibility: hidden; z-index: 1000; }
.box-right-sm:hover .box-right-sm-img { opacity: 1; visibility: visible; }
.top-box-right a { color: #005fc4; font-size: 12px; text-decoration: none; }
.top-box-right a:hover { text-decoration: underline; }
.top-section-2 { padding: 10px 0; background-color: #fff; }
.top-section-2-container { width: 1190px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; box-sizing: border-box; }
.logo img { height: 60px; width: auto; display: block; }
.search.search-pc { display: flex; align-items: center; flex-grow: 1; max-width: 520px; margin: 0 20px; border:2px #e62a2a solid; }
.search-box { flex-grow: 1; position: relative; display: flex; align-items: center;  }
.search-box .iconfont { position: absolute; left:10px; color: #999; z-index: 2; }
.search-input { width: 300px; height: 40px; padding: 0 30px; font-size: 14px;  height: 40px; border: 0px;  background: linear-gradient(#bbbbbb 0% ,#ffffff 20%,#ffffff 100%); }
.search-input:focus { border-color: #e62a2a; }
.search-btn-box { display: flex; height: 42px; }
.search-input-box { display: inline-block; margin-left: 20px; }

.search-button { width: 80px; height: 42px; border: 0; background-color: #e62a2a; color: #fff; font-size: 16px; cursor: pointer; margin-left: -5px; }
.search-button:hover { background-color: #d11120; }

.s-product, .s-company { display: flex; align-items: center; justify-content: center; width:80px; height: 100%; background-color: #e62a2a; color: #fff; font-size: 14px; font-weight: bold; cursor: pointer; user-select: none; border: 0px solid #e62a2a; border-left-width: 1px; }
.s-product { border-radius: 0 0 0 0; } .s-company { border-radius: 0 4px 4px 0; }
.s-product:hover, .s-company:hover { background-color: #d11120; }
.contact-phone { font-size: 14px; color: #333; white-space: nowrap; }
.contact-phone i { font-style: normal; margin-right: 5px; color: #666; }
.contact-phone span { color: #e62a2a; font-weight: bold; }
.top-section-3 { background-color: #fff; border-top: 1px solid #eee; border-bottom: 1px solid #eee; box-shadow: 0 2px 4px -1px rgba(0,0,0,0.06); }
.top-section-3 > div { width: 1190px; margin: 0 auto; display: flex; align-items: center; min-height: 46px; box-sizing: border-box; }
.nav-links { flex-grow: 1; padding: 0 10px; }
.nav-links a { padding: 0px 25px;  height: 30px; line-height: 30px;  font-size: 16px;  color: #222;  margin-right: 10px; font-weight: bolder; }
.nav-links a:hover { color: #e62a2a; }
.search-keywords.search-pc { padding: 0 10px; font-size: 0; }
.search-keywords span { font-size: 14px; color: #999; line-height: 46px; margin-right: 8px; }
.search-keywords a { display: inline-block; font-size: 13px; color: #005fc4; text-decoration: none; line-height: 46px; margin: 0 5px; padding: 2px 6px; border-radius: 3px; }
.search-keywords a:hover { color: #e62a2a; background-color: #f8f8f8; }

/* Top  */

.nav-link { display: inline-block; padding: 0 15px; height: 46px; line-height: 46px; color: #333; }
.nav-link:hover { color: #e62a2a; }
.search-tab-active { background: linear-gradient(to bottom, #e62a2a, #d11120); color: #fff !important; }
.search-keyword { margin: 0 5px; color: #005fc4; font-size: 12px; }
.search-keyword:hover { color: #e62a2a; text-decoration: underline; }

/* Common Layout Classes */
.container-narrow { width: 1190px; margin: 0 auto; }
.ad-banner-narrow { width: 1190px; height: auto; margin: 15px auto; overflow: hidden; }
.ad-banner-narrow img { width: 100%; max-width: 100%; }
.footer-main { background: #fff; text-align: left; border-top: 1px #cecece solid; padding: 10px 0 20px; height: auto; overflow: hidden; }
.footer-content { display: flex; justify-content: flex-start; align-items: center; }
.copyright-info { text-align: left; line-height: 30px; color: #5b5555; display: flex; flex-wrap: wrap; }
.copyright-info a { padding: 0 5px; color: #5b5555; }
.links-flex-box { display: flex; justify-content: flex-start; flex-wrap: wrap; }
.links-flex-box a { padding: 0 10px; line-height: 30px; color: #5b5555; }
.links-flex-box-small a { padding: 0 8px; line-height: 30px; color: #5b5555; }

/* Responsive Mobile */
@media only screen and (max-width: 900px) {
    .container, .container-narrow, .ad-banner-narrow { width: 100%; margin: 0 auto; }
    .ad-banner-narrow { display: none !important; }
    .mobile-reg-ad { display: block !important; }
    .mobile-reg-ad img { display: block !important; width: 100%; }
    .mobile-ads-grid { border: 1px #cecece solid; border-top: 1px solid; box-sizing: border-box; margin: 1%; width: 98%; display: block; float: left; }
    .hidden-pc { display: none !important; }
    .top-nav-mobile { display: block; overflow: hidden; clear: both; }
    .nav-tabs-mobile { display: block; width: 100%; height: auto; overflow: hidden; justify-content: center; }
    .nav-tabs-mobile a { width: 25%; padding: 0; height: auto; line-height: 25px; font-size: 15px; color: #222; margin-right: 0; float: left; text-align: center; overflow: hidden; display: inline-block; }
    .nav-tabs-mobile a i { width: 100%; text-align: center; display: inline-block; font-size: 24px; color: #d11120; line-height: 35px; }
    .nav-tabs-mobile a:nth-child(1) i::before { content: "\e67e"; }
    .nav-tabs-mobile a:nth-child(2) i::before { content: "\e61e"; }
    .nav-tabs-mobile a:nth-child(3) i::before { content: "\e791"; }
    .nav-tabs-mobile a:nth-child(4) i::before { content: "\e600"; }
    .nav-tabs-mobile a:nth-child(5) i::before { content: "\e64a"; }
    .nav-tabs-mobile a:nth-child(6) i::before { content: "\e64b"; }
    .nav-tabs-mobile a:nth-child(7) i::before { content: "\e621"; }
    .nav-tabs-mobile a:nth-child(8) i::before { content: "\e7d8"; }
    .mobile-logo-search { display: block; width: 100%; margin: 10px auto; height: auto; overflow: hidden; clear: both; }
    .mobile-search-container { width: 65%; height: 40px; background: linear-gradient(#bbb 0%, #fff 20%, #fff 100%); border: 2px #e62a2a solid; float: left; align-items: center; margin-left: 0; }
    .mobile-search-container span { color: #e6e6e6; font-size: 20px; margin: 0 10px; }
    .mobile-search-input { width: 56%; line-height: 40px; height: 40px; border: 0; background: linear-gradient(#bbb 0%, #fff 20%, #fff 100%); }
    .mobile-search-btn-container { width: 30%; float: left; background: #fff; border: 2px #e62a2a solid; border-left: 0; }
    .mobile-search-btn { background: #e62a2a; display: block; font-size: 13px; width: 100%; height: 40px; line-height: 40px; text-align: center; color: #fff; }
    .mobile-search-btn:first-child { text-indent: 10px; }
    .mobile-search-btn:last-child { text-indent: 10px; margin-left: 1px; }
    .section-card { background: #fff; border: 1px #cecece solid; border-top: 2px #ff6a00 solid; padding: 10px; box-sizing: border-box; margin: 1%; width: 98%; display: block; float: left; }
    .main-content, .sidebar, .w240 { width: 98%; clear: both; margin-bottom: 10px; }
    .w930 { width: 100%; }
    .tieba-container { display: block; width: 100%; }
    .content-wrapper { width: 98%; margin: 0 auto; height: auto; display: block; align-items: center; }
    .sidebar-extra, .tieba-link { display: none; }
    .list-container { border: 1px #d5d8dc solid; margin: 1%; width: 98%; display: block; overflow: hidden; clear: both; }
    .list-container-inner { display: block; flex-wrap: wrap; padding: 10px 0; }
    .list-container-inner a { width: 100%; }
    .company-list-item { border: 1px #cecece solid; border-top: 2px #ff6a00 solid; padding: 1%; box-sizing: border-box; margin: 1%; width: 98%; display: block; float: left; overflow: hidden; clear: both; }
    .item-with-icon { width: 100%; line-height: 35px; height: 35px; overflow: hidden; float: left; }
    .item-with-icon a::before { content: "\e607"; }
    .item-type { width: 100%; float: left; margin-left: 10px; display: inline-block; }
    .row-between { display: block; justify-content: space-between; }
    .state-list a { display: inline-block; width: 50%; overflow: hidden; height: 28px; white-space: nowrap; text-overflow: ellipsis; color: #767676; }
    .industry-list a { display: inline-block; width: 100%; overflow: hidden; height: 28px; white-space: nowrap; text-overflow: ellipsis; color: #767676; padding-right: 10px; box-sizing: border-box; }
    .company-list a { display: inline-block; width: 50%; overflow: hidden; height: 28px; white-space: nowrap; text-overflow: ellipsis; color: #767676; padding-right: 10px; box-sizing: border-box; }
    .channel-links-mobile { display: none; width: 100%; margin: 5px auto 10px; }
    .link-title-hidden { display: none; }
    .footer-main, .footer-logo, .footer-links { width: 100%; }
    .footer-content { display: block; float: left; }
    .links-flex-box { display: block; float: left; }
    .links-flex-box a { padding: 0 5px; line-height: 25px; }
    .copyright-info { text-align: left; line-height: 30px; display: block; float: left; }
    .copyright-info a { padding: 0 4px; line-height: 25px; }
    .row-between { display: block; }
    .state-list a { width: 50%; }
    .industry-list a { width: 100%; padding-right: 10px; }
    .company-list a { width: 50%; }
    .channel-links-mobile { display: none; width: 100%; }
    .hidden-qr-code { display: none; }
}

/* 云黄页特有样式 - 公共部分 */
.main-page-container { width: 100%; box-sizing: border-box; }
.mobile-reg-ad { display: none; }
.section-card h1, .section-card h2 { height: auto; font-size: 16px; line-height: 25px; font-weight: 600; margin: 0; }
.channel-links { border: 1px solid #cccccc; border-top: 1px solid #d11120; text-align: left; }
.links-header { display: flex; justify-content: space-between; background-color: #f7f7f7; }
.links-category-tab { line-height: 40px; height: 40px; color: #d11120; width: 120px; text-align: center; cursor: pointer; }
.links-category-tab.active { background-color: #d11120; color: #ffffff; }
.links-title-section { line-height: 40px; color: #d11120; display: flex; flex-grow: 1; justify-content: flex-end; }
.links-title-section a { margin: 0 10px; }
.links-contact-qq { position: relative; padding-top: 7px; box-sizing: border-box; height: 40px; }
.links-content { padding: 15px; box-sizing: border-box; }
.links-border-box { border: 1px #ccc solid; border-top: 1px #d11120 solid; text-align: left; }
.industry-item { border-bottom: 1px #cecece solid; padding: 15px 0; box-sizing: border-box; display: block; width: 100%; }
h3 { font-size: 16px; font-weight: 600; }
.description-text { color: #767676; }
.dashed-border-box { border: 1px #cecece dashed; padding: 10px; margin: 1%; width: 98%; display: block; float: left; box-sizing: border-box; }
.company-table { border-collapse: collapse; margin: 15px auto 10px; width: 100%; }
.company-table td { padding: 0; border: 1px solid #ccc; }
.table-cell-left { text-align: right; width: 20%; background: #f7f7f7; vertical-align: top; line-height: 40px; }
.table-cell-right { text-align: left; width: 80%; vertical-align: top; line-height: 40px; text-indent: 5px; }
.baidu-ad-container {}
.links-section { width: 1190px; margin: 30px auto 20px; border: 1px #cecece solid; background-color: #fffafa; }
.links-section-header { display: flex; justify-content: space-between; }
.links-section-tab { border-right: 1px #cecece solid; border-bottom: 1px #cecece solid; text-align: center; height: 40px; line-height: 40px; padding: 0px 20px; white-space: nowrap; }
.links-section-tab.active { border-bottom: 1px #fffafa solid; cursor: pointer; }
.links-section-title-row { width: 100%; display: flex; justify-content: flex-end; border-bottom: 1px #cecece solid; height: 40px; line-height: 40px; }
.links-section-title-row a { margin: 0px 20px; }
.links-section-content { }
.links-section-content-item { display: none; margin: 15px auto; height: 60px; overflow-y: auto; justify-content: flex-start; flex-wrap: wrap; }
.links-section-content-item.active { display: flex; }
.links-section-content-item a { height: 18px; line-height: 18px; margin: 0px 3px 0px 3px; font-size: 12px; }
.links-section-content-item a:hover { color: #000000; }
.image-and-text-link { height: 52px; width: 330px; display: flex; justify-content: space-between; background-color: #fbfbfb; }
.image-and-text-link:hover { background-color: #f3f3f3; }
.image-and-text-link-thumb { height: 50px; width: 50px; align-items: center; display: flex; justify-content: center; object-fit: contain; background-color: #f1f1f1; border: 1px #cecece solid; }
.image-and-text-link-thumb img { max-width: 50px; max-height: 50px; }
.image-and-text-link-text { flex-grow: 1; display: flex; align-items: center; margin-left: 10px; }
.generic-h1 { font-weight: inherit; display: inherit; padding: 0px 10px; box-sizing: border-box; }



/* ===== 1. 分类导航区 (ct_div) ===== */
/* 使用 public.css 中的 .channel-links 样式作为基础，这是一个非常合适的组件 */
.ct_div {
    /* 复用 .channel-links 的边框样式 */
    border: 1px solid #cccccc;
    border-top: 1px solid #d11120; /* 顶部红色强调色 */
    text-align: left; /* 左对齐 */
    padding: 15px; /* 添加内边距，与 .links-content 保持一致 */
    box-sizing: border-box; /* 确保内边距不影响总宽度 */
    /* 清除浮动并防止溢出 */
    overflow: hidden;
    display: flex; /* 使用 flexbox 进行布局 */
    flex-wrap: wrap; /* 允许换行 */
    gap: 10px; /* 设置项目之间的间距 */
}

/* 定义分类链接的样式 */
.ct_div a {
    display: block; /* 使链接成为块级元素，独占一行或多行 */
    padding: 8px 15px; /* 设置内边距，与整体风格协调 */
    background-color: #f0f0f0; /* 设置一个浅灰色背景 */
    color: #333; /* 默认文字颜色 */
    text-decoration: none; /* 去除下划线 */
    border-radius: 4px; /* 添加圆角 */
    transition: all 0.3s ease; /* 添加过渡效果 */
    /* 控制单个链接的大小 */
    flex: 0 0 auto; /* 不伸缩，根据内容决定宽度 */
    max-width: 200px; /* 限制最大宽度 */
    word-wrap: break-word; /* 长单词换行 */
    text-align: center; /* 文字居中 */
    border: 1px solid transparent; /* 初始透明边框，方便 hover 时变化 */
}

/* 链接悬停效果 */
.ct_div a:hover {
    background-color: #e0e0e0; /* 悬停时的背景色 */
    color: #005fc4; /* 悬停时的文字颜色，参考 .link-blue */
    transform: translateY(-1px); /* 微微上移，增加动感 */
}

/* 当前选中分类的样式 */
.ct_div a.current-category {
    background-color: #d11120; /* 使用主题红色 */
    color: white; /* 白色文字 */
    font-weight: bold; /* 加粗 */
    border-color: #d11120; /* 边框也使用红色 */
}

/* ===== 2. 企业列表项 (a_div) ===== */
/* 复用 .mb-10 来给每个企业列表项添加底部外边距 */
.a_div {
    /* 保持原有的尺寸和溢出隐藏 */
    width: 290px;
    line-height: 35px;
    height: 35px;
    overflow: hidden;
    text-align: left;
    /* 添加底部外边距 */
    margin-bottom: 10px; /* 复用 .mb-10 的数值 */
}

/* 为 .a_div 内的链接添加一些样式，使其更美观 */
.a_div a {
    display: block; /* 使链接占满整个 div */
    padding: 0 10px; /* 添加左右内边距 */
    text-decoration: none; /* 去除下划线 */
    color: inherit; /* 继承父级颜色 */
    transition: color 0.2s ease; /* 添加文字颜色过渡 */
}

.a_div a:hover {
    color: #e62a2a; /* 悬停时使用主题红色 */
}

/* ===== 3. 响应式调整 ===== */
@media only screen and (max-width: 900px) {
    /* 调整分类链接在移动端的表现 */
    .ct_div {
        gap: 5px; /* 减小间距 */
        padding: 10px; /* 减小内边距 */
    }
    .ct_div a {
        padding: 6px 10px; /* 减小内边距 */
        font-size: 12px; /* 减小字体 */
        max-width: calc(50% - 5px); /* 在移动端，每行大约放两个链接 */
        flex-basis: calc(50% - 5px);
    }

    /* 调整企业列表项在移动端的表现 */
    .a_div {
        width: 100%; /* 移动端占满全宽 */
        max-width: 290px; /* 但限制最大宽度 */
    }
}

/* ===== 4. 底部链接区 (map_a_box) ===== */
/* 如果 map_a_box 需要特别样式，可以在此定义，否则可以复用 a 的默认样式 */
/* 例如，如果希望它们像按钮一样 */
.map_a_box a {
    display: inline-block;
    padding: 5px 10px;
    margin: 5px;
    border: 1px solid #ccc;
    border-radius: 4px;
    text-decoration: none;
    color: #005fc4;
}

.map_a_box a:hover {
    background-color: #f0f0f0;
    color: #e62a2a;
}