/* Shared responsive layer for the preserved static site. Desktop layout stays original. */
.sc-site img { max-width: 100% !important; height: auto !important; object-fit: contain; }
.sc-site :is(video, iframe, object, embed) { max-width: 100% !important; }
.sc-site video { object-fit: contain; }
@media (max-width: 995px) {
  body.sc-site { margin: 0; padding: 0 12px; overflow-wrap: anywhere; }
  .sc-site *, .sc-site *::before, .sc-site *::after { box-sizing: border-box; }
  .sc-site :is(div, section, article, main, header, footer, nav, figure, form, table, pre, blockquote) { max-width: 100%; min-width: 0; }
  .sc-site :is(p, h1, h2, h3, h4, h5, h6, li, td, th, a, span) { overflow-wrap: anywhere; }
  .sc-site :is(img, svg, canvas, video, iframe, object, embed) { max-width: 100% !important; }
  .sc-site img { height: auto !important; object-fit: contain; }
  .sc-site video { width: 100% !important; height: auto !important; object-fit: contain; }
  .sc-site iframe { width: 100% !important; }
  .sc-site :is(iframe[data-supercan-video], iframe.sc-video-frame) { height: auto !important; aspect-ratio: 16 / 9; display: block; }
  .sc-site :is(input, textarea, select, button) { max-width: 100%; }
  .sc-site pre { white-space: pre-wrap; }
  .sc-site .sc-fluid-block { width: 100% !important; height: auto !important; min-width: 0 !important; margin-left: 0 !important; margin-right: 0 !important; }
  .sc-site .sc-wrap-block { height: auto !important; white-space: normal !important; }
  .sc-desktop > div { width: 100% !important; max-width: 956px; height: auto !important; margin-inline: auto !important; }
  .sc-site .sc-brand-banner { width: 100% !important; height: auto !important; }
  .sc-site .sc-brand-banner a { display: block; }
  .sc-site img.sc-brand-image { width: 100%; height: 120px !important; object-fit: cover; object-position: left; }

  .sc-site #cssmenu { width: 100% !important; height: auto !important; }
  .sc-site #cssmenu > ul { display: flex; flex-wrap: wrap; }
  .sc-site #cssmenu > ul > li { float: none; min-width: 0; flex: 1 1 0; }
  .sc-site #cssmenu > ul > li > a { min-height: 44px; padding: 14px 8px; font-size: 14px; line-height: 1.3; }
  .sc-site #cssmenu > ul > li > a > span { font-size: inherit; }
  .sc-site #cssmenu > ul > li > ul { top: 100%; left: 0; width: 200px; max-width: calc(100vw - 24px); }
  .sc-site #cssmenu > ul > li:last-child > ul { left: auto; right: 0; }
  .sc-site #cssmenu > ul > li:focus-within > ul { display: block; }
  .sc-site #cssmenu a:focus-visible { outline: 2px solid #fff; outline-offset: -3px; }

  .sc-site #kinMaxShow { height: auto !important; overflow: hidden !important; }
  .sc-site #kinMaxShow .kinMaxShow_image_box { height: auto !important; aspect-ratio: 956 / 400; }
  .sc-site #kinMaxShow .kinMaxShow_image_item,
  .sc-site #kinMaxShow .kinMaxShow_image_item a { height: 100% !important; }
  .sc-site #kinMaxShow .kinMaxShow_image_item { background-size: contain !important; }
  .sc-site #kinMaxShow .kinMaxShow_button { position: static !important; display: flex; justify-content: center; align-items: center; gap: 10px; min-height: 32px; padding: 8px 0 !important; margin: 0 !important; }
  .sc-site #kinMaxShow .kinMaxShow_button li { float: none !important; flex: 0 0 14px; margin: 0 !important; }

  .sc-site :is(#middle, #main, #view_content, #intro_0200_1, .cont) { max-width: 100%; min-width: 0; }
  .sc-site #main.sc-two-column { display: grid; grid-template-columns: minmax(180px, 1fr) minmax(0, 2.8fr); gap: 16px; }
  .sc-site #main.sc-two-column > :is(#c, #b) { float: none !important; width: auto !important; min-width: 0; margin: 0 !important; }
  .sc-site #c > div { width: auto !important; margin: 0 !important; padding: 10px; }
  .sc-site #c > div > div, .sc-site #c > div > div > div { width: auto !important; max-width: 100%; }
  .sc-site #b { padding: 0; }
  .sc-site .Title_DIv { width: auto !important; height: auto !important; margin-left: 0 !important; margin-right: 0 !important; white-space: normal; }
  .sc-site .sc-card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin-bottom: 16px !important; padding-bottom: 12px !important; }
  /* Fixed row-break spacers are replaced by grid gaps. */
  .sc-site .sc-card-grid > .sc-fluid-block[style*="height:40px"] { display: none; }
  .sc-site .sc-card-grid > .sc-product-card { width: auto !important; min-width: 0; margin: 0 !important; float: none !important; }
  .sc-site .sc-product-card img { display: block; margin-inline: auto; }
  .sc-site .sc-product-card div[align="center"] { height: auto !important; padding: 6px !important; }

  .sc-site table { width: 100% !important; max-width: 100% !important; table-layout: fixed; }
  .sc-site :is(td, th) { height: auto !important; white-space: normal !important; vertical-align: top; }
  .sc-site .sc-fixed-cell { width: auto !important; }
  .sc-site :is(#zSlider, #picshow, #picshow_img, #picshow_img li) { width: 100% !important; height: auto !important; float: none !important; }
  .sc-site #picshow_img img { width: 100% !important; height: auto !important; object-fit: contain; }
  .sc-site #picshow_tx { position: static !important; width: 100% !important; height: auto !important; }
  .sc-site #picshow_tx li { height: auto !important; padding: 10px; }
  .sc-site #picshow_tx li p { height: auto !important; }
  .sc-site #select_btn { width: 100% !important; height: auto !important; float: none !important; }
  .sc-site #select_btn li { width: 100% !important; height: auto !important; min-height: 72px; }

  .sc-site :is(.footer, .footer .foot, .footer .text, #di_copytight, #di_keywords, #di_outlink, .link, .link .linktit, .link .linkcont) { width: 100% !important; height: auto !important; white-space: normal; }
  .sc-site .footer .foot { min-height: 35px; padding: 8px; line-height: 2.2; overflow: visible; }
  .sc-site :is(#di_copytight, #di_keywords, #di_outlink) { padding: 6px 0; line-height: 1.9; }

  .sc-mobile .container1 { width: 100%; padding-inline: 12px; }
  .sc-mobile .container1 > .row { margin-inline: 0; }
  .sc-mobile :is(.prod_intro, .index_intro, .List_detail, .List_pdf, .cv) { max-width: 100%; height: auto !important; }
  .sc-mobile :is(.List_P_Div, .List_LP_Div, .List_L_Div, .news_list_css) { height: auto !important; min-height: 3.2em; line-height: 1.6; padding-block: 8px; overflow: visible; }
  .sc-mobile .List_P_Div img { max-width: 35% !important; }
  .sc-mobile .gotop { right: 12px; margin-right: 0; }
  .sc-simple { font-size: 16px; line-height: 1.7; }
  .sc-simple h1 { font-size: clamp(24px, 6vw, 32px); line-height: 1.4; }
  .sc-demo :is(.wraper, .footer footer, #piecemaker, .unleash_wrap, #obo_slider) { max-width: 100% !important; width: 100% !important; }
}

@media (max-width: 700px) {
  .sc-site #main.sc-two-column { grid-template-columns: minmax(0, 1fr); }
  .sc-site #main.sc-two-column > #b { order: -1; }
  .sc-site .sc-stack-table,
  .sc-site .sc-stack-table > :is(tbody, thead, tfoot),
  .sc-site .sc-stack-table > :is(tbody, thead, tfoot) > tr,
  .sc-site .sc-stack-table > tr,
  .sc-site .sc-stack-table :is(td, th) { display: block; width: 100% !important; height: auto !important; }
  .sc-site .sc-stack-table tr { margin-bottom: 16px; border: 1px solid #ccc; }
  .sc-site .sc-stack-table :is(td, th) { padding: 8px; border: 0; }
  .sc-site .sc-stack-table .sc-table-header { display: none !important; }
  .sc-site .sc-stack-table td[data-sc-label]::before { content: attr(data-sc-label) "："; display: block; font-weight: bold; color: #365619; }
}

@media (max-width: 480px) {
  .sc-site #cssmenu > ul > li { flex-basis: 50%; }
  .sc-site #cssmenu > ul > li:last-child:nth-child(odd) { flex-basis: 100%; }
  .sc-site #cssmenu > ul > li:nth-child(even) > ul { left: auto; right: 0; }
  .sc-site .sc-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sc-site .sc-card-grid > :not(.sc-product-card) { grid-column: 1 / -1; }
}

/* Resolution-aware layout, shared by desktop, language and legacy mobile pages. */
body.sc-site { margin: 0; padding: 0 clamp(12px, 2vw, 32px); color: #263323; }
.sc-site *, .sc-site *::before, .sc-site *::after { box-sizing: border-box; }
.sc-site .sc-page-shell { width: 100% !important; max-width: 1200px !important; height: auto !important; margin-inline: auto !important; }
.sc-site .sc-fluid-block { width: 100% !important; height: auto !important; min-width: 0 !important; margin-inline: 0 !important; }
.sc-site .sc-page-shell.sc-fluid-block { margin-inline: auto !important; }
.sc-site :is(#main, #middle, #b, #c, #view_content, #intro_0200_1, .cont) { min-width: 0; max-width: 100%; }
.sc-site #main.sc-two-column { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 24px; align-items: start; }
.sc-site #main.sc-two-column > :is(#b, #c) { width: auto !important; float: none !important; min-width: 0; margin: 0 !important; }
.sc-site #b > .sc-fluid-block { margin-inline: 0 !important; }
.sc-site #c > div { max-width: 100%; width: auto !important; }
.sc-site #c > div > div { max-width: 100%; }
.sc-site .sc-brand-banner { height: auto !important; }
.sc-site img.sc-brand-image { display: block; width: 100%; height: 104px !important; object-fit: contain; object-position: left; }
.sc-site .sc-wrap-block { height: auto !important; white-space: normal !important; }
.sc-site .sc-product-specs { font-size: 14px !important; font-weight: normal; line-height: 1.8 !important; padding: 16px; margin: 12px 0; color: #293925 !important; background: #f6f9f2; border: 1px solid #d9e3d0; border-radius: 8px; overflow-wrap: anywhere; }
.sc-site img.sc-product-hero { width: auto !important; max-width: 100%; max-height: 440px; object-fit: contain; }
.sc-site .sc-product-heading { display: grid; grid-template-columns: minmax(0, 1fr) 140px; gap: 20px; align-items: center; }
.sc-site .sc-product-heading > :is(.sc-product-identity, .sc-product-qr) { width: auto !important; min-width: 0; float: none !important; margin: 0 !important; }
.sc-site .sc-product-qr img { display: block; width: 140px; max-width: 100%; margin: auto; }
.sc-site .sc-card-grid, .sc-home #c1 { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; padding-block: 12px; height: auto !important; }
.sc-site .sc-card-grid > .sc-product-card, .sc-home #c1 > div { width: auto !important; min-width: 0; float: none !important; margin: 0 !important; }
.sc-site .sc-card-grid > :not(.sc-product-card) { grid-column: 1 / -1; }
.sc-site .sc-grid-spacer, .sc-home .sc-home-product-spacer { display: none !important; }
.sc-site .sc-product-card { border-radius: 6px; overflow: hidden; padding: 8px; background: #fff; }
.sc-site .sc-product-card > div { width: auto !important; height: auto !important; }
.sc-site .sc-product-card img { display: block; margin: auto; max-height: 180px; object-fit: contain; }
.sc-site .sc-product-card :is(a, span, div) { overflow-wrap: anywhere; }
.sc-site .sc-product-card div[align="center"] { padding: 8px 4px !important; line-height: 1.55 !important; }
.sc-site :is(#di_copytight, #di_keywords, #di_outlink, .footer, .footer .foot) { height: auto !important; max-width: 1200px; white-space: normal; overflow-wrap: anywhere; }
.sc-site .footer .foot { min-height: 44px; padding: 8px; line-height: 1.9; }
.sc-site .footer { width: 100% !important; margin-inline: auto; }
.sc-site .footer :is(.foot, .text) { width: 100% !important; }
.sc-site .link { width: 100% !important; max-width: 1200px; margin-inline: auto; }
.sc-site .link :is(.linktit, .linkcont) { width: 100% !important; }
.sc-site :is(#di_copytight, #di_keywords, #di_outlink) { padding: 8px 0; line-height: 1.8; }
.sc-site #cssmenu { width: 100% !important; height: auto !important; }
.sc-site #cssmenu > ul { display: flex; flex-wrap: wrap; width: 100%; }
.sc-site #cssmenu > ul > li { flex: 1 1 auto; float: none; min-width: 0; }
.sc-site #cssmenu > ul > li > a { display: block; min-height: 46px; padding: 15px 12px; line-height: 1.3; font-size: 14px; }
.sc-site #cssmenu > ul > li > a > span { font-size: inherit; }
.sc-site #cssmenu > ul > li > ul { top: 100%; left: 0; }
.sc-site #cssmenu > ul > li:last-child > ul { left: auto; right: 0; }
.sc-site #cssmenu a:focus-visible, .sc-site #cssmenu button:focus-visible { outline: 2px solid #fff; outline-offset: -4px; }
.sc-nav-toggle, .sc-submenu-toggle { display: none; }
.sc-site #kinMaxShow { width: 100% !important; height: auto !important; overflow: hidden !important; }
.sc-site #kinMaxShow .kinMaxShow_image_box { height: auto !important; aspect-ratio: 956 / 400; }
.sc-site #kinMaxShow .kinMaxShow_image_item, .sc-site #kinMaxShow .kinMaxShow_image_item a { height: 100% !important; }
.sc-site #kinMaxShow .kinMaxShow_image_item { background-size: contain !important; }
.sc-site #kinMaxShow .kinMaxShow_button { position: static !important; display: flex; justify-content: center; align-items: center; gap: 8px; min-height: 28px; padding: 6px 0 !important; margin: 0 !important; }
.sc-site #kinMaxShow .kinMaxShow_button li { float: none !important; flex: 0 0 12px; margin: 0 !important; }
.sc-home #b .sc-home-player { width: 100%; margin: 0 !important; }
.sc-home :is(#main, #middle, #c1) { width: 100% !important; }
.sc-home #b .sc-home-player iframe[data-supercan-video] { width: 100% !important; height: auto !important; aspect-ratio: 16 / 9; }
.sc-home #b .sc-home-video-caption { width: 100% !important; height: auto !important; }
.sc-home #b .cont { width: auto !important; margin: 16px 0 !important; font-size: 15px; line-height: 1.8; }
.sc-mobile { font-size: 16px; line-height: 1.7; }
.sc-mobile .container1 { width: 100%; max-width: 1200px; margin-inline: auto; padding-inline: 0; }
.sc-mobile .container1 > .row { margin-inline: 0; }
.sc-mobile .my-row { padding-block: 12px; text-align: left; }
.sc-mobile .prod_intro, .sc-mobile .index_intro { font-size: 16px !important; line-height: 1.85 !important; }
.sc-mobile .List_detail { font-size: 14px !important; line-height: 1.8 !important; border-color: #d9e3d0; border-radius: 8px; padding: 16px; background: #f6f9f2; }
.sc-mobile .Feeter1 { height: auto !important; min-height: 80px; padding: 16px 8px; line-height: 1.8 !important; }
.sc-mobile-product .container1 { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.sc-mobile-product .container1 > * { grid-column: 1 / -1; min-width: 0; max-width: 100%; margin-block: 0 !important; }
.sc-mobile-product .container1 > .sc-mobile-quicklink { grid-column: span 2; width: 100%; }
.sc-mobile-product .sc-mobile-quicklink .List_L_Div { display: flex; align-items: center; justify-content: center; width: 100% !important; height: auto; min-height: 44px; padding: 8px 3px; margin: 0; border: 1px solid #d9e3d0; border-radius: 6px; background: #f6f9f2; }
.sc-mobile-product .sc-mobile-quicklink .Home-default { display: none; }
.sc-mobile-product .sc-mobile-quicklink .back_to_sort { width: 100%; font-size: 13px; line-height: 1.5; height: auto; margin: 0; padding: 0; }
.sc-mobile-product .container1 > .sc-mobile-promo { display: flex; align-items: center; justify-content: center; width: 100% !important; gap: 12px; font-size: 13px; line-height: 1.5; padding: 8px; border: 1px solid #e0e7d9; border-radius: 6px; }
.sc-mobile-product .sc-mobile-promo br { display: none; }
.sc-mobile-product .sc-mobile-promo img { width: 72px !important; max-height: 64px; object-fit: contain; }
.sc-mobile-product .sc-mobile-product-title { padding: 12px 0; font-size: 18px; font-weight: 600; }
.sc-mobile-product .sc-mobile-product-title > div { width: 100% !important; }
.sc-mobile-product .sc-mobile-hero img { width: auto !important; max-height: 440px; margin-inline: auto; object-fit: contain; }
@media (min-width: 900px) {
  .sc-mobile-product .container1 > :is(.sc-mobile-hero, .sc-mobile-specification) { grid-column: span 3; align-self: start; }
  .sc-mobile-product .sc-mobile-hero { padding: 16px; }
}
@media (max-width: 900px) {
  .sc-site #main.sc-two-column { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .sc-site #main.sc-two-column > #b { order: -1; }
  .sc-site .sc-card-grid, .sc-home #c1 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
  .sc-site img.sc-product-hero { max-height: 360px; }
  .sc-site #b .sc-product-specs { font-size: 15px !important; }
}
@media (max-width: 640px) {
  body.sc-site { padding-inline: 12px; }
  .sc-site img.sc-brand-image { height: 80px !important; object-fit: cover; }
  .sc-site .sc-card-grid, .sc-home #c1 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .sc-site .sc-product-card { padding: 6px; }
  .sc-site .sc-product-card img { max-height: 150px; }
  .sc-site #intro_0200_1 :is(p, span, font) { font-size: 16px !important; line-height: 1.8 !important; }
  .sc-site .sc-product-specs { padding: 12px; }
  .sc-site.sc-product-page #kinMaxShow { display: none !important; }
  .sc-site .sc-product-heading { grid-template-columns: minmax(0, 1fr) 88px; gap: 10px; }
  .sc-site .sc-product-qr img { width: 88px; }
  .sc-site img.sc-product-hero, .sc-mobile-product .sc-mobile-hero img { max-height: 280px; }
  .sc-site .Title_DIv { width: auto !important; height: auto !important; margin-inline: 0 !important; }
  .sc-site .sc-brand-banner { margin-block: 0 !important; }
  .sc-site #cssmenu.sc-menu-ready { position: relative; border-radius: 6px; }
  .sc-site #cssmenu.sc-menu-ready > .sc-nav-toggle { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 48px; padding: 12px 16px; border: 0; background: transparent; color: #fff; font: 600 16px/1.4 Arial, sans-serif; text-align: left; cursor: pointer; }
  .sc-nav-toggle::after { content: '\2630'; font-size: 22px; line-height: 1; }
  .sc-site #cssmenu.sc-menu-ready > ul { display: none !important; padding: 0; margin: 0; }
  .sc-site #cssmenu.sc-menu-ready.sc-menu-open > ul { display: block !important; }
  .sc-site #cssmenu.sc-menu-ready > ul > li { display: block; width: 100%; float: none; border-top: 1px solid #ffffff30; }
  .sc-site #cssmenu.sc-menu-ready > ul > li > a { min-height: 46px; padding: 13px 54px 13px 16px; font-size: 15px; }
  .sc-site #cssmenu.sc-menu-ready li.has-sub > a::after { display: none; }
  .sc-site #cssmenu.sc-menu-ready li.has-sub > a::before { display: none; }
  .sc-site #cssmenu.sc-menu-ready li.has-sub > a, .sc-site #cssmenu.sc-menu-ready li.has-sub:hover > a { top: 0; z-index: 0; }
  .sc-site #cssmenu.sc-menu-ready li > ul { display: none !important; position: static !important; float: none; left: auto !important; top: auto !important; width: 100% !important; max-width: 100%; padding: 0; margin: 0; box-shadow: none; }
  .sc-site #cssmenu.sc-menu-ready li.sc-submenu-open > ul { display: block !important; }
  .sc-site #cssmenu.sc-menu-ready li li { width: 100%; float: none; }
  .sc-site #cssmenu.sc-menu-ready li li a { display: block; min-height: 44px; padding: 12px 24px; white-space: normal; line-height: 1.5; }
  .sc-site #cssmenu.sc-menu-ready .sc-submenu-toggle { display: block; position: absolute; z-index: 2; top: 0; right: 0; width: 48px; min-height: 46px; border: 0; border-left: 1px solid #ffffff30; color: #fff; background: transparent; font-size: 20px; cursor: pointer; }
  .sc-submenu-toggle::after { content: '+'; }
  .sc-submenu-toggle[aria-expanded="true"]::after { content: '\2212'; }
}