/* ============================================================
   Guangyi site - responsive overlay v1
   rule: append-only overrides, never modify the original CSS files
   breakpoint: <=768px single column; hamburger nav handled by responsive.js
   NOTE: ASCII ONLY. These pages are GB2312 and .css is served without a charset,
   so raw non-ASCII bytes would render as mojibake. Keep comments in English.
   ============================================================ */
#gy-navbtn { display: none; }

@media screen and (max-width: 768px) {

  html, body { overflow-x: hidden !important; }
  body { margin: 0 !important; }
  div { max-width: 100% !important; box-sizing: border-box !important; }
  img { max-width: 100% !important; height: auto !important; }
  table { max-width: 100% !important; }
  div[style*="position:absolute"] { position: static !important; }

  /* fixed-width containers -> fluid */
  div[style*="998px"],
  div[style*="1024px"] {
    width: auto !important;
    margin-left: 6px !important;
    margin-right: 6px !important;
  }

  /* ---------- header ---------- */
  #header { height: auto !important; overflow: visible !important; }
  #header .headers { height: auto !important; }
  #header div[style*="float:left"][style*="width:123px"] {
    width: auto !important; height: auto !important; text-align: center; padding-top: 6px;
  }
  #header div[style*="float:right"][style*="width:650px"] {
    float: none !important; width: auto !important; padding-top: 4px !important;
  }

  /* hamburger button (click toggles body.gy-nav-open via responsive.js) */
  #gy-navbtn {
    display: block; margin: 6px 10px; width: 44px;
    font-size: 24px; line-height: 1; padding: 6px 0;
    background: #e80000; color: #fff; border-radius: 4px;
    text-align: center; cursor: pointer; user-select: none;
  }
  #nav-menu { display: none !important; }
  body.gy-nav-open #nav-menu {
    display: block !important; float: none !important;
    width: auto !important; padding: 0 0 10px 0; background: #fff;
  }
  #nav-menu > li { float: none !important; width: auto !important; text-align: left !important; }
  #nav-menu > li > img { display: none !important; }          /* hide the vertical divider image when stacked */
  #nav-menu > li > a { display: block; padding: 11px 12px; border-bottom: 1px solid #eee; }
  #nav-menu > li > div {                                       /* dropdown panel: expand inline on mobile */
    display: block !important; position: static !important;
    margin: 0 !important; border-top: none !important;
    background: #fafafa !important; padding: 0 !important;
    min-width: 0 !important;
  }
  #nav-menu > li > div ul { margin: 0; padding: 0; }
  #nav-menu > li > div li { height: auto !important; width: auto !important; }
  #nav-menu > li > div a { display: block; padding: 9px 12px 9px 26px; font-size: 13px !important; line-height: normal !important; }

  /* ---------- red section bar ---------- */
  #menu_shichang { height: auto !important; padding: 6px 0; }
  #menu_shichang div[style*="float:left"] { float: none !important; width: auto !important; height: auto !important; line-height: normal !important; }
  #menu_shichang #menu_nav ul li { display: inline-block; float: none !important; }
  #menu_shichang #menu_nav ul li a { display: inline-block; padding: 6px 10px; }

  /* ---------- list items (500px two columns -> single column) ---------- */
  div[style*="width:500px"] { width: auto !important; float: none !important; margin-left: 0 !important; margin-right: 0 !important; }
  div[style*="width:500px"] li { width: auto !important; height: auto !important; }
  div[style*="width:500px"] li[style*="height:335px"] { height: auto !important; text-align: center; }
  div[style*="width:500px"] li[style*="text-align:center"] { height: auto !important; line-height: 1.6 !important; padding: 6px 4px; }

  /* breadcrumb row */
  div[style*="float:left"][style*="min-width:75px"],
  div[style*="float:left"][style*="width:949px"] {
    float: none !important; width: auto !important; height: auto !important; line-height: 1.8 !important;
  }

  /* ---------- article page ---------- */
  h1 { font-size: 20px !important; line-height: 1.4 !important; }
  div[style*="height:40px"][style*="line-height:40px"] { height: auto !important; line-height: 1.8 !important; }

  /* ---------- footer ---------- */
  div[style*="height:307px"] { height: auto !important; }
  #footer_ul { height: auto !important; }
  #footer_ul ul { width: auto !important; float: none !important; }
  div[style*="float:left"][style*="width:500px"],
  div[style*="float:right"][style*="width:500px"] {
    float: none !important; width: auto !important; text-align: left !important;
  }
  div[style*="width:319px"] { float: none !important; width: auto !important; }
  div[style*="width:200px"] { width: auto !important; }
  div[style*="width:120px"] { width: auto !important; }

  /* ============================================================
     FIX 2026-09-24  mobile layout kept 1024px wide
     ------------------------------------------------------------
     Why: the legacy CSS pins big containers with ID selectors --
          templets/default/style/style.css has
              #header        { width:1024px; }
              #menu_shichang { width:1024px; }
          and the red-bar theme injects
              #menu_shichang { max-width:1280px !important; }
          An ID selector (0,0,1,0) outranks this file's `div` (0,0,0,1)
          and `div[style*="1024px"]` rules -- and that attribute match
          only looks at the INLINE style, which has no "1024px" here
          (the width lives in the stylesheet). So nothing narrowed them,
          and html{overflow-x:hidden} silently clipped the right side
          (measured: 649px cut on every page).
     Fix: raise specificity with `html body #id` (0,0,0,2 + id) so the
          overrides win. Scoped inside the 768px query -- desktop unaffected.
     ============================================================ */
  html body #header,
  html body #menu_shichang,
  html body .trss {
    width: auto !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }
  html body #header > div,
  html body #header > div > div,
  html body #menu_shichang > div,
  html body #menu_shichang > div > div {
    width: auto !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  /* red bar: desktop reserves 120px on the left for the section title */
  html body #menu_nav,
  html body #menu_nav1 { margin-left: 0 !important; }

  /* the red-bar theme pins height:55px!important -> wrapped content spilled out
     and overlapped the breadcrumb; and its flex row is nowrap -> buttons clipped */
  html body #menu_shichang {
    height: auto !important;
    overflow: visible !important;
    padding-top: 4px !important;
    padding-bottom: 4px !important;
  }
  html body #menu_nav ul,
  html body #menu_nav1 ul { flex-wrap: wrap !important; }
  html body #menu_nav li,
  html body #menu_nav1 li { flex: 0 0 auto !important; }

  /* logo block: keep it at its own 123px instead of stretching full width */
  html body #header div[style*="width:123px"] {
    width: auto !important;
    max-width: 130px !important;
    height: auto !important;
    float: none !important;
    position: relative !important;
    margin: 0 auto !important;
  }
  html body #header div[style*="width:123px"] img { max-width: 100% !important; height: auto !important; }

  /* section title row (list pages): the title used min-width:110px but the rule
     above only matched min-width:75px, so the title stayed floated and shared one
     line with the breadcrumb -> breadcrumb got clipped. Stack them instead. */
  html body div[style*="min-width:110px"] {
    float: none !important;
    width: auto !important;
    height: auto !important;
    line-height: 1.6 !important;
    white-space: normal !important;
  }
  /* breadcrumb block (we render it as overflow:hidden; text-align:right) */
  html body div[style*="overflow:hidden"][style*="text-align:right"] {
    float: none !important;
    width: auto !important;
    text-align: left !important;
    clear: both !important;
    line-height: 1.7 !important;
    padding-top: 2px !important;
  }

  /* jobs table (Join_Us): the table's min-content width is ~1000px (cells do not
     wrap), so max-width cannot shrink it. Keep the table as-is and let its
     wrapper scroll horizontally instead of being clipped by overflow-x:hidden. */
  html body .table-responsive {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    max-width: 100% !important;
  }
  html body table { max-width: 100% !important; }

  /* safety net: outrank any non-important fixed width left in the legacy CSS */
  html body div,
  html body table,
  html body img {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

}

/* ============================================================
   FIX 2026-09-24 (part 2) - zoomed full-site view white gutter
   ------------------------------------------------------------
   Why: after switching pages to width=980 the desktop layout is
   scaled to fit a phone, but the legacy 1024px containers (header,
   red bar, content stripes) are wider than 980 -> right side is
   clipped and content sticks to the left edge. We want a small
   white gutter on both sides.
   Fix: bump the layout viewport to 1080, constrain body to 1024px
   and centre it. The extra space on each side becomes the white
   gutter. Cap body direct children to the body width so that any
   negative-margin full-bleed stripes do not overflow.
   Scoped to 769..1100 so real desktop and responsive mobile are
   not affected.
   ============================================================ */
@media screen and (min-width: 769px) and (max-width: 1100px) {
  html { background: #fff !important; }
  body {
    width: 1024px !important;
    margin: 0 auto !important;
    box-sizing: border-box !important;
  }
  body > div {
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
  }
}