@charset "utf-8";
/*==================================================================
  Page_mobile_V2026.css  黄页移动端专属样式
  HTML 引用：media="screen and (max-width:768px)"
  适配原则：递进式覆盖，仅修改与 PC 端的差异项
==================================================================*/

/*------黄页主体内容（≤768px）------*/
@media screen and (max-width: 768px) {

  /* ==============================
     1. 主体 + 分类标签栏
     ============================== */
  #site-famous {
    flex-direction: column;
    min-height: auto;
  }

  .ftitle {
    height: auto;
    min-height: 40px;
  }
  .ftitle ul {
    position: static;
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding: 5px 5px 0;
    height: auto;
    width: 100%;
    border-bottom: none; /* 消除 PC 端继承的 ul 底部边框 */
  }
  .ftitle li,
  .ftitle li.hover {
    float: none;
    flex: 0 0 auto;
    min-width: 180px;
    height: 36px;
    line-height: 36px;
    font-size: 14px;
    padding: 0 12px;
  }
  .ftitle li.hover {
    border-bottom: none;
  }

  /* ==============================
     2. 新站16条（4列 → 2列）
     ============================== */
  .page_site_list {
    padding: 8px;
    font-size: 14px;
  }
  .page_site_list h2 {
    font-size: 15px;
  }
  .page_site_list ul li {
    flex: 0 0 calc(100% / 2);
    height: 46px;
    line-height: 46px;
    font-size: 14px;
  }

  /* ==============================
     2.5 中文名站导航（PC 6列 → Mob 3列 搜索名站 / 2列 各类网站）
     ============================== */
  #china_site ul#topsite li {
    flex: 0 0 calc(100% / 3);   /* 搜索名站 6列 → 3列 */
    height: 32px;
    line-height: 32px;
    font-size: 13px;
  }
  #china_site ul:not(#topsite) li {
    flex: 0 0 calc(100% / 3);   /* 各类网站/全国导航 6列 → 3列 */
    height: 32px;
    line-height: 32px;
    padding: 0 8px 0 16px;
    font-size: 13px;
  }
  #china_site ul:not(#topsite) li a {
    font-size: 13px;
  }
  /* 圆点前缀缩小 */
  #china_site ul:not(#topsite) li::before {
    width: 4px;
    height: 4px;
    left: 4px;
  }
  /* ====== 移动端点画线：3列 × 4行 = 12周期 ====== */
  /* Step1: 清除 PC 端 24n 系列错位的点画线（强制覆盖） */
  #china_site ul:not(#topsite) li:nth-child(24n+19),
  #china_site ul:not(#topsite) li:nth-child(24n+20),
  #china_site ul:not(#topsite) li:nth-child(24n+21),
  #china_site ul:not(#topsite) li:nth-child(24n+22),
  #china_site ul:not(#topsite) li:nth-child(24n+23),
  #china_site ul:not(#topsite) li:nth-child(24n+24){
    border-bottom:none !important;
  }
  /* Step2: 移动端重绘 —— 3列×4行=12个li一周期，第4行(第10~12个li)底部加点画线
     注意：3列下第4行的li索引是 10,11,12（不是9,10,11,12！多了9会错位到第3行底部） */
  #china_site ul:not(#topsite) li:nth-child(12n+10),
  #china_site ul:not(#topsite) li:nth-child(12n+11),
  #china_site ul:not(#topsite) li:nth-child(12n+12){
    border-bottom:1px dotted #b6d2f9 !important;
  }


  /* ==============================
     3. 全省99县市区导航
     ============================== */
  #guizhoudaohang ul {
    padding: 5px;
  }
  #guizhoudaohang li {
    margin: 2px;
    padding: 4px 8px;
    line-height: 30px;
    font-size: 13px;
  }

  /* ==============================
     4. 0851-0859 按钮式（5列 → 2列）
     ============================== */
  .dzs {
    padding: 12px;
  }
  .dzs ul {
    gap: 6px;
  }
  .dzs ul li {
    flex: 0 0 calc((100% - 6px) / 2);
    height: 38px;
    line-height: 38px;
  }
  .dzs ul li a {
    padding: 0 8px 0 14px;
    font-size: 14px;
  }

  /* ==============================
     5. 黄页 #header（三列同行 → 竖排堆叠）
     ============================== */
  #header {
    flex-direction: column;
    align-items: stretch;
    padding: 12px 12px 20px;
    gap: 12px;
  }

  /* 第一列：LOGO + 标题，移动端独占一行居中 */
  #logoco {
    width: 100%;
    justify-content: center;
  }
  .logo-icon {
    width: 100%;
    justify-content: center;
    flex-wrap: wrap;
  }
  .logo-icon i {
    width: 30px;
    height: 30px;
    margin-right: 8px;
    font-size: 36px;
  }

  /* 标题文字缩小，避免横溢 */
  .logo-icon h1 {
    font-size: 26px;
    white-space: normal;       /* 移动端允许换行 */
    overflow: hidden;
    text-align: center;
    line-height: 1.3;
  }
  .logo-icon span {
    max-width: 100%;
    white-space: normal;
    line-height: 1.3;
  }

  /* 文字倒影：移动端等比缩小 + 颜色保持橙色 */
  .logo-icon span::after {
    top: calc(100% + 6px);      /* 移动端间隙缩小（原33px→6px，等比） */
    font-size: 18px;
    line-height: 1.3;
    color: #FF9900;             /* 与PC端同步橙色 */
    opacity: 0.38;
    white-space: normal;
    filter: blur(0.2px);
  }

  /* 第二列：250x60 广告 → 移动端 100% 宽堆叠 */
  .g250x60 {
    flex: 1 1 100%;
    width: 100%;
    height: auto;
    min-height: 60px;
    margin-right: 0;
    margin-bottom: 0;
  }
  .g250x60 img {
    width: 100%;
    height: auto;
    min-height: 60px;
  }

  /* 第三列：468x60 广告 → 移动端 100% 宽堆叠 */
  .g468x60 {
    flex: 1 1 100%;
    width: 100%;
    height: auto;
    min-height: 60px;
  }
  .g468x60 img {
    width: 100%;
    height: auto;
    min-height: 60px;
  }

  /* ==============================
     6. 面包屑导航 #guide（左右两栏 → 上下换行）
     ============================== */
  #guide {
    flex-direction: column;
    align-items: stretch;
    padding: 10px 12px;
    min-height: auto;
    gap: 8px;
  }
  #guide .guide_left {
    width: 100%;
    height: auto;
    line-height: 22px;
    font-size: 13px;
    flex-wrap: wrap;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
  }
  #guide .guide_left > span {
    white-space: normal;
    text-overflow: clip;
  }
  #guide .guide_right {
    margin-left: 0;
    width: 100%;
    height: auto;
    line-height: 22px;
    font-size: 13px;
    padding: 8px 12px;
    border-left: none;
    border-top: 3px solid #9b3df5;
    border-radius: 0 0 4px 4px;
    text-align: center;
  }

  /* ==============================
     7. 黄页内容区 #yellowpage（两列 → 单列堆叠）
     ============================== */
  #page_txt {
    padding: 10px;
  }
  #yellowpage ul {
    flex-direction: column;
  }
  #yellowpage ul li.pthead {
    flex: 0 0 100%;
    width: 100%;
    border-right: none;
    border-bottom: 1px solid #e6effa;
    text-align: left;
    padding: 8px 12px;
    font-size: 13px;
  }
  #yellowpage ul li:not(.pthead) {
    padding: 10px 12px;
    font-size: 14px;
  }

  /* 黄页表格：行式 → 块状换行 */
  #yellowpage table,
  #yellowpage tbody,
  #yellowpage tr,
  #yellowpage td {
    display: block;
    width: 100%;
  }
  #yellowpage td.pthead {
    width: 100%;
    border-right: none;
    border-bottom: 1px solid #e6effa;
    text-align: left;
    padding: 8px 12px;
    font-size: 13px;
  }
  #yellowpage td:not(.pthead) {
    padding: 10px 12px;
    font-size: 14px;
  }
  #yellowpage td.ptheadtop {
    width: 100%;
  }
  /*官方网站角标 - 移动端（按钮全宽时用 float + 负margin 叠到右上角）*/
  #yellowpage .Official_flag{
    float: right;          /* 浮动到容器右侧 → 按钮全宽时自动靠右 */
    margin-top: -65px;         /* 往上推到按钮顶部之上，形成右上角角标 */
    padding: 1px 5px;
    font-size: 10px;
    border-radius: 8px;
    box-shadow: 0 1px 4px rgba(125,43,209,0.25);
    position: relative;
    z-index: 2;
  }
  /* 网址按钮：移动端缩小 */
  .btn_website {
    padding: 14px;
    font-size: 16px;
  }

  /* ==============================
     8. 信息提示卡片 .page_prompt（缩边距+小图标）
     ============================== */
  .page_prompt {
    margin-top: 14px;
    padding: 14px 14px 14px 44px;
    border-radius: 6px;
  }
  .page_prompt::before {
    width: 22px;
    height: 22px;
    line-height: 20px;
    font-size: 15px;
    left: 12px;
  }
  .page_prompt p {
    font-size: 13px;
    line-height: 22px;
    margin: 0 0 6px;
  }
  .page_prompt b,
  .page_prompt B {
    font-size: 14px;
  }

  /* ==============================
    9. 960x90 横幅广告：移动端缩
     ============================== */
  #pagegg {
    margin: 8px auto;
  }
  .ggdiv960x90 img {
    width: 100%;
    height: auto;
  }

}