/* PGO mobile layout overrides. Desktop styles remain unchanged above 768px. */
.pgo-mobile-menu-wrap {
  display: none;
}

/* Updated about-page content blocks. */
.pgo-about-content {
  width: 100%;
  color: #20272a;
  font-family: Arial, "Microsoft JhengHei", sans-serif;
  font-size: 16px;
  line-height: 1.9;
}

.pgo-about-section {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 24px;
  align-items: start;
  margin: 0 0 24px;
  padding: 24px;
  background: #fbffff;
  border: 1px solid #edf1ee;
}

.pgo-about-mark {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  min-height: 150px;
}

.pgo-about-mark img {
  display: block;
  width: 150px;
  height: 150px;
  max-width: 100%;
  object-fit: contain;
}

.pgo-about-copy h2 {
  margin: 0 0 14px;
  color: #d26922;
  font-size: 27px;
  line-height: 1.45;
}

.pgo-about-copy p {
  margin: 0 0 16px;
}

.pgo-about-copy ul {
  margin: 0 0 16px;
  padding-left: 1.5em;
}

.pgo-about-copy li {
  margin: 4px 0;
}

.pgo-about-invite {
  margin-bottom: 0;
}

.pgo-micro-content {
  width: 100%;
  color: #2f383a;
  font-family: Arial, "Microsoft JhengHei", sans-serif;
}

.pgo-micro-content h1 {
  margin: 0 0 8px;
  color: #d26922;
  font-size: 28px;
}

.pgo-micro-intro {
  margin: 0 0 18px;
  color: #4d595a;
  font-size: 16px;
}

.pgo-micro-gallery {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.pgo-micro-card {
  min-width: 0;
  margin: 0;
  padding: 10px;
  border: 1px solid #d9e2dc;
  background: #fbffff;
  text-align: center;
}

.pgo-micro-card img {
  display: block;
  width: 100%;
  height: 190px;
  object-fit: contain;
  background: #f5f8f6;
}

.pgo-micro-card figcaption {
  margin-top: 8px;
  color: #596662;
  font-size: 14px;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.pgo-lightbox-open {
  overflow: hidden;
}

.pgo-micro-lightbox {
  position: fixed;
  z-index: 10000;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 28px;
  background: rgba(20, 28, 28, 0.84);
}

.pgo-micro-lightbox.is-open {
  display: flex;
}

.pgo-micro-lightbox img {
  display: block;
  width: auto;
  max-width: min(92vw, 1200px);
  height: auto;
  max-height: 88vh;
  object-fit: contain;
  background: #fbffff;
  box-shadow: 0 10px 35px rgba(0, 0, 0, 0.35);
}

.pgo-micro-lightbox-close {
  position: absolute;
  top: 12px;
  right: 16px;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.45);
  color: #fff;
  cursor: pointer;
  font-size: 30px;
  line-height: 36px;
}

.pgo-download-content {
  width: 100%;
  color: #2f383a;
  font-family: Arial, "Microsoft JhengHei", sans-serif;
}

.pgo-download-section {
  margin: 0 0 24px;
  padding: 20px;
  border: 1px solid #d9e2dc;
  background: #fbffff;
}

.pgo-download-section h2 {
  margin: 0 0 10px;
  color: #d26922;
  font-size: 25px;
}

.pgo-download-section p {
  margin: 0 0 16px;
  line-height: 1.8;
}

.pgo-download-groups {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.pgo-download-group {
  padding: 14px;
  border: 1px solid #e0e7e2;
  background: #f5f8f6;
}

.pgo-download-group h3 {
  margin: 0 0 8px;
  color: #52645d;
  font-size: 17px;
  line-height: 1.5;
}

.pgo-download-group ul {
  margin: 0;
  padding-left: 1.2em;
}

.pgo-download-group li {
  margin: 8px 0;
  line-height: 1.5;
}

.pgo-download-group a {
  color: #3e6470;
  overflow-wrap: anywhere;
}

.pgo-download-action {
  display: inline-block;
  margin-left: 8px;
  color: #b75d20 !important;
  font-size: 13px;
  white-space: nowrap;
}

.pgo-download-file {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 16px;
  border: 1px solid #cbd8cc;
  background: #eef5eb;
  color: #3e6470;
  text-decoration: none;
}

.pgo-download-file strong {
  color: #b75d20;
  white-space: nowrap;
}

@media screen and (max-width: 768px) {
  html,
  body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }

  body {
    min-width: 0 !important;
    font-size: 14px;
    line-height: 1.65;
  }

  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  img,
  video,
  iframe {
    max-width: 100%;
  }

  iframe {
    width: 100% !important;
    min-height: 220px;
  }

  /* Replace the fixed desktop shells with fluid mobile shells. */
  #index_header > div,
  #index_content > div,
  #index_footer > div,
  #innerheader > div,
  #innercontent > div,
  #footer > div,
  .innerheader_div {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  #index_header table,
  #index_content table,
  #index_footer table,
  #innerheader table,
  #innercontent table,
  #footer table {
    max-width: 100% !important;
  }

  /* Replace the legacy fixed-width navigation with a compact dropdown. */
  #index_header .t4_bg,
  #innerheader .nav_page_menu {
    display: none !important;
  }

  #index_header,
  #innerheader {
    overflow: hidden;
  }

  .pgo-mobile-menu-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 48px;
    padding: 7px 10px;
    border-top: 1px dashed #d9e0d1;
    border-bottom: 1px dashed #d9e0d1;
    background: #fbfcf6;
  }

  .pgo-mobile-menu-label {
    flex: 0 0 auto;
    color: #a43317;
    font-weight: bold;
    font-size: 14px;
    white-space: nowrap;
  }

  .pgo-mobile-menu {
    flex: 1 1 auto;
    min-width: 0;
    height: 34px;
    padding: 4px 34px 4px 10px;
    border: 1px solid #b2bc92;
    border-radius: 3px;
    background: #fff;
    color: #575447;
    font-size: 16px;
  }

  /* Fluid banners and the two-column home page. */
  #index_carousel_wapper {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  #index_carousel,
  #index_carousel .caroufredsel_wrapper,
  #index_carousel .index_carousel_item {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  #index_carousel .index_carousel_item img {
    width: 100% !important;
    height: auto !important;
  }

  #index_carousel_wapper img {
    width: 100% !important;
    height: auto !important;
  }

  #index_content table.t2 {
    width: 100% !important;
    max-width: 100% !important;
    table-layout: fixed;
  }

  #index_content table[width="990"],
  #index_content table[width="944"],
  #index_content table[width="664"],
  #index_content table[width="663"],
  #index_content table[width="635"],
  #index_content table[width="250"],
  #index_content table[width="210"] {
    width: 100% !important;
    max-width: 100% !important;
  }

  #index_content,
  #innercontent {
    overflow-x: hidden;
  }

  #innercontent table[width="904"],
  #innercontent table[width="724"],
  #innercontent table[width="700"],
  #innercontent table[width="650"],
  #innercontent table[width="620"],
  #innercontent table[width="600"],
  #innercontent table[width="580"],
  #innercontent table[width="500"],
  #innercontent table[width="463"],
  #innercontent table[width="450"],
  #innercontent table[width="400"] {
    width: 100% !important;
    max-width: 100% !important;
    table-layout: fixed;
  }

  #index_content table[width="944"] > tbody > tr,
  #innercontent table[width="904"] > tbody > tr {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
  }

  #index_content table[width="944"] > tbody > tr > td,
  #innercontent table[width="904"] > tbody > tr > td {
    display: block;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
  }

  #index_content table[width="944"] table,
  #innercontent table[width="904"] table {
    width: 100% !important;
  }

  #index_content td[width="664"],
  #index_content td[width="250"],
  #innercontent td[width="724"],
  #innercontent td[width="171"] {
    width: 100% !important;
  }

  /* The BR600 promotional panel is a desktop-only sidebar asset. Remove it
     from the mobile flow so page content starts immediately. */
  #innercontent img[src*="adbanner/BR600.jpg"] {
    display: none !important;
  }

  #innercontent td:has(> center img[src*="adbanner/BR600.jpg"]),
  #innercontent td:has(> table img[src*="adbanner/BR600.jpg"]) {
    display: none !important;
  }

  #innercontent > div > table[width="904"] > tbody > tr > td[width="171"]:not(:has(.t9, .t9-1, .nav_left_page_menu)) {
    display: none !important;
  }

  /* Prevent legacy fixed-width content blocks from overflowing. */
  #index_content [style*="width:664px"],
  #index_content [style*="width:635px"],
  #index_content [style*="width:250px"],
  #innercontent [style*="width:904px"],
  #innercontent [style*="width:724px"],
  #innercontent [style*="width:700px"],
  #innercontent [style*="width:650px"] {
    width: 100% !important;
    max-width: 100% !important;
  }

  #index_content [style*="height:500px"],
  #innercontent [style*="height:400px"] {
    height: auto !important;
    min-height: 0 !important;
  }

  /* About page content becomes a readable single-column flow on phones. */
  #innercontent .pgo-about-content {
    width: 100% !important;
    max-width: 100% !important;
    font-size: 16px;
    line-height: 1.8;
  }

  #innercontent .pgo-about-section {
    display: block;
    width: 100%;
    margin-bottom: 16px;
    padding: 16px 14px;
  }

  #innercontent .pgo-about-mark {
    width: 132px;
    min-height: 132px;
    margin: 0 auto 16px;
  }

  #innercontent .pgo-about-mark img {
    width: 132px;
    height: 132px;
  }

  #innercontent .pgo-about-copy h2 {
    margin-bottom: 10px;
    font-size: 22px;
    line-height: 1.45;
  }

  #innercontent .pgo-about-copy p {
    margin-bottom: 12px;
    overflow-wrap: anywhere;
  }

  #innercontent .pgo-about-copy ul {
    padding-left: 1.35em;
  }

  #innercontent .pgo-micro-content h1 {
    font-size: 24px;
  }

  #innercontent .pgo-micro-intro {
    font-size: 15px;
  }

  #innercontent .pgo-micro-gallery {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  #innercontent .pgo-micro-card img {
    height: auto;
    max-height: 360px;
  }

  .pgo-micro-lightbox {
    padding: 16px;
  }

  .pgo-micro-lightbox img {
    max-width: 94vw;
    max-height: 82vh;
  }

  #innercontent .pgo-download-section {
    margin-bottom: 16px;
    padding: 15px 13px;
  }

  #innercontent .pgo-download-section h2 {
    font-size: 22px;
  }

  #innercontent .pgo-download-groups {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  #innercontent .pgo-download-file {
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
  }

  .line01,
  .line02,
  .line03,
  .line04,
  .line05,
  .line06 {
    max-width: 100%;
  }

  /* Make product/news grids readable instead of forcing tiny columns. */
  #index_content td[width="173"],
  #index_content td[width="198"],
  #index_content td[width="110"],
  #index_content td[width="64"] {
    width: auto !important;
  }

  #index_content .t12 {
    margin-bottom: 12px;
  }

  #innercontent .line04 {
    width: 100% !important;
    height: auto !important;
    min-height: 112px;
  }

  #innercontent .line04 img {
    width: 100% !important;
    height: auto !important;
    max-height: 260px;
    object-fit: contain;
    margin: 0 !important;
  }

  /* News cards keep their thumbnail visible above the article text. */
  #innercontent .t10 img.line01 {
    display: block !important;
    width: auto !important;
    height: auto !important;
    max-width: 100% !important;
    margin: 0 auto !important;
  }

  #innercontent .t10 td[width="122"],
  #innercontent .t10 table[width="122"],
  #innercontent .t10 table[width="120"] {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  #innercontent .t10 td[width="122"] {
    padding: 10px 0 !important;
    text-align: center !important;
  }

  /* Product listing cards: image, title and description flow downward. */
  #innercontent .t10 table[width="724"] > tbody > tr {
    display: block !important;
    width: 100% !important;
  }

  #innercontent .t10 table[width="724"] > tbody > tr > td[width="331"] {
    display: block !important;
    width: 100% !important;
    padding: 12px 0 !important;
    border-bottom: 1px solid #d9cbae;
  }

  #innercontent .t10 table[width="724"]:has(> tbody > tr > td[width="331"]) > tbody > tr > td:not([width="331"]) {
    display: none !important;
  }

  #innercontent .t10 table[width="331"],
  #innercontent .t10 table[width="214"] {
    width: 100% !important;
    max-width: 100% !important;
  }

  #innercontent .t10 table[width="331"] > tbody > tr {
    display: block !important;
  }

  #innercontent .t10 table[width="331"] > tbody > tr > td[width="109"],
  #innercontent .t10 table[width="331"] > tbody > tr > td:not([width]) {
    display: block !important;
    width: 100% !important;
    padding: 0 !important;
  }

  #innercontent .t10 table[width="331"] > tbody > tr > td[width="109"] table {
    margin: 0 auto !important;
  }

  #innercontent .t10 table[width="331"] > tbody > tr > td:not([width]) > div {
    width: 100% !important;
    max-width: 100% !important;
    margin: 12px 0 0 !important;
  }

  #innercontent .t10 table[width="331"] img {
    max-width: 100% !important;
  }

  /* Product detail pages have a different 724px table. Do not let the
     listing-only rules hide their main product image and description. */
  #innercontent .t10 #showmainimg {
    display: block !important;
    width: auto !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 0 auto !important;
    object-fit: contain;
  }

  #innercontent .t10 table[width="364"],
  #innercontent .t10 table[width="322"],
  #innercontent .t10 table[width="293"] {
    width: 100% !important;
    max-width: 100% !important;
  }

  #innercontent .t10 table[width="364"] > tbody > tr > td,
  #innercontent .t10 table[width="322"] > tbody > tr > td {
    display: block !important;
    width: 100% !important;
  }

  /* Specification tables are authored at 658px with a negative left margin.
     Reset both values on mobile so the complete table stays inside the page. */
  #innercontent .t10 table[width="658"] {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    table-layout: fixed !important;
  }

  #innercontent .t10 table[width="658"] td {
    max-width: 100% !important;
    padding: 4px 6px !important;
    overflow-wrap: anywhere;
    word-break: break-word;
    white-space: normal !important;
  }

  #innercontent .t10 table[width="658"] td[style*="width: 251px"] {
    width: 38% !important;
  }

  #innercontent .t10 table[width="658"] td[style*="width: 407px"] {
    width: 62% !important;
  }

  #innercontent .t10 td[style*="word-wrap"] img,
  #innercontent .t10 td[style*="word-wrap"] iframe {
    display: block;
    width: auto !important;
    max-width: 100% !important;
    height: auto !important;
  }

  /* Buttons and pagination should wrap instead of being pushed off-screen. */
  #innercontent [style*="margin-left:64px"] {
    margin-left: 0 !important;
    text-align: center;
  }

  #innercontent [style*="margin-left:64px"] img {
    width: auto !important;
    max-width: 44% !important;
    height: auto !important;
  }

  #innercontent #user_asignpage {
    width: auto !important;
    min-width: 56px;
  }

  /* Side menus become full-width blocks below the page header. */
  .nav_left_page_menu,
  .nav_left_page_menu ul,
  .nav_left_page_menu li,
  .nav_left_page_menu a {
    width: 100% !important;
    max-width: 100% !important;
  }

  .nav_left_page_menu a {
    padding: 10px 14px !important;
  }

  /* Legacy inner-page category menus use nested fixed-width tables. Keep the
     label, background, and hit area together as one mobile button. */
  #innercontent > div > table[width="904"] > tbody > tr > td[width="171"],
  #innercontent > div > table[width="904"] > tbody > tr > td[width="171"] > div,
  #innercontent > div > table[width="904"] > tbody > tr > td[width="171"] > div table,
  #innercontent .t9,
  #innercontent .t9-1 {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
  }

  #innercontent > div > table[width="904"] > tbody > tr > td[width="171"] > div table,
  #innercontent .t9,
  #innercontent .t9-1 {
    table-layout: fixed;
  }

  #innercontent .t9,
  #innercontent .t9-1 {
    display: block !important;
    padding: 0 !important;
    border-bottom: 1px solid #d5ded8;
    background: #edf3ef !important;
  }

  #innercontent .t9 > a,
  #innercontent .t9-1 > a {
    display: flex !important;
    align-items: center;
    width: 100% !important;
    min-height: 48px;
    box-sizing: border-box;
    padding: 10px 14px !important;
    color: #4d4d4d !important;
    text-decoration: none;
    background-image: none !important;
    background-color: transparent !important;
  }

  #innercontent .t9-1 > a,
  #innercontent .t9 > a:hover,
  #innercontent .t9-1 > a:hover {
    background-color: #d7dfcf !important;
    font-weight: 600;
  }

  /* Forms and contact content fit narrow screens. */
  input,
  select,
  textarea,
  button {
    max-width: 100%;
    font-size: 16px;
  }

  textarea {
    width: 100% !important;
  }

  #index_footer > div,
  #footer > div {
    padding-top: 16px !important;
    padding-bottom: 20px !important;
  }

  #index_footer table,
  #footer table {
    width: 100% !important;
  }

  .index_footmenu,
  .footmenu {
    line-height: 2;
    padding-left: 0 !important;
  }

  .index_footmenu > table,
  .footmenu > table {
    display: block;
    width: 100% !important;
  }

  .index_footmenu > table > tbody > tr,
  .footmenu > table > tbody > tr {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px 8px;
    width: 100%;
  }

  .index_footmenu > table > tbody > tr > td,
  .footmenu > table > tbody > tr > td {
    display: block;
    width: auto !important;
    text-align: center;
    word-break: keep-all;
  }

  .index_footmenu > table > tbody > tr > td[width="13"],
  .footmenu > table > tbody > tr > td[width="24"] {
    display: none;
  }

  .index_foot01,
  .index_foot02,
  .foot01,
  .foot02 {
    padding: 0 8px !important;
    word-break: break-word;
  }
}