@charset "utf-8";
/* ==========================================================================
   Banghua Chemical - Responsive & Performance Patch
   --------------------------------------------------------------------------
   Loaded AFTER /skin/css/style.css on every page.
   Breakpoints: <=1199 / <=991 / <=767 / <=479
   Added during the 2026-09 speed + SEO optimisation pass.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Global safety net
   -------------------------------------------------------------------------- */
img { max-width: 100%; height: auto; }

.about_np, .bh, .wemzo, .about_r, .pro_hu, .pro_huf, .pro_huff, .footer_box {
  word-wrap: break-word;
  overflow-wrap: break-word;
  -ms-word-break: break-word;
}

/* --------------------------------------------------------------------------
   2. Mobile navigation toggle (inert on desktop)
   -------------------------------------------------------------------------- */
.nav_toggle, .nav_cb { display: none; }

/* --------------------------------------------------------------------------
   2b. Typography for the heading levels changed by the SEO pass
       The three hero taglines were duplicate <h1> elements (4 h1 per page) and
       are now <h2>; "Company Profile" moved from <h4> to <h2>. The original
       typography is reproduced here so nothing looks different.
   -------------------------------------------------------------------------- */
.slide-text > h2 {
  padding: 0;
  color: #ffffff;
  font-size: 70px;
  font-style: normal;
  line-height: 84px;
  margin-bottom: 30px;
  letter-spacing: 1px;
  display: inline-block;
}
.alhins h2 {
  background: url(../img/fk.png) no-repeat left center;
  font-size: 32px;
  line-height: 6vh;
  padding-left: 40px;
  margin-bottom: 10%;
  font-family: Sansation;
  color: #ffffff;
}

/* --------------------------------------------------------------------------
   3. Hero slides
      The three banner <img> tags are now wrapped in <picture> so that WebP can
      be served with a JPEG fallback. The original stylesheet only matched a
      direct `img` child of `.item`, which no longer applies - re-declare it.
   -------------------------------------------------------------------------- */
.bs-slider > .carousel-inner > .item > picture { display: block; width: 100%; }
.bs-slider .slide-image { width: 100% !important; display: block; }

/* --------------------------------------------------------------------------
   4. WebP background images
      Each declaration falls back to the original JPEG on browsers that do not
      understand image-set(); sizing/positioning is left exactly as style.css
      had it so the desktop rendering is unchanged.
   -------------------------------------------------------------------------- */
.cd-fixed-bg.cd-bg-1 {
  background-image: image-set(url(../img/ind.webp) type("image/webp"), url(../img/ind.jpg) type("image/jpeg"));
}
.cd-fixed-bg.cd-bg-1k {
  background-image: image-set(url(../img/banner_h.webp) type("image/webp"), url(../img/banner_h.jpg) type("image/jpeg"));
}
.banner_b  { background-image: image-set(url(../img/bangh.webp)   type("image/webp"), url(../img/bangh.jpg)   type("image/jpeg")); }
.banner_bd { background-image: image-set(url(../img/tel.webp)     type("image/webp"), url(../img/tel.jpg)     type("image/jpeg")); }
.banner_bf { background-image: image-set(url(../img/vist.webp)    type("image/webp"), url(../img/vist.jpg)    type("image/jpeg")); }
.banner_bp { background-image: image-set(url(../img/pro.webp)     type("image/webp"), url(../img/pro.jpg)     type("image/jpeg")); }
.banner_bo { background-image: image-set(url(../img/honor.webp)   type("image/webp"), url(../img/honor.jpg)   type("image/jpeg")); }

/* --------------------------------------------------------------------------
   5. Products carousel -> native scroll-snap
      Replaces Swiper (swiper.min.css 19 KB + swiper.min.js 123 KB + init JS).
      Native touch scrolling on phones, no JS, no layout thrash.
   -------------------------------------------------------------------------- */
.swiper-container { width: 100%; height: auto; overflow: visible; }

.swiper-wrapper {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  overflow-x: auto;
  overflow-y: hidden;
  gap: 24px;
  padding-bottom: 10px;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
}
.swiper-wrapper::-webkit-scrollbar { height: 6px; }
.swiper-wrapper::-webkit-scrollbar-track { background: #eef2f6; border-radius: 3px; }
.swiper-wrapper::-webkit-scrollbar-thumb { background: #b9c9d8; border-radius: 3px; }

.swiper-slide {
  flex: 0 0 auto;
  width: calc((100% - 48px) / 3);
  height: auto;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.swiper-slide img { width: 100%; height: auto; display: block; }
.swiper-pagination { display: none; }

.hujk { margin-top: 0; margin-bottom: 0; padding: 10px 0; }
.hujk h3 { font-size: 20px; color: #e88e13; }
.hujk p {
  width: auto;
  max-width: 320px;
  margin-top: 10px;
  line-height: 1.6;
  font-size: 14px;
  color: #686868;
}

/* --------------------------------------------------------------------------
   6. <= 1199px  |  let every fixed 1200px container breathe
   -------------------------------------------------------------------------- */
@media (max-width: 1199px) {
  .hes_box, .heds, .main, .conyie, .com_le, .footer_box, .hid ul,
  .about_n, .about_nf, .about_nn, .about_nk, .about_no, .about_np,
  .banner_wenzi, .zhil_box {
    width: 94%;
    max-width: 1200px;
  }
  .nav_bar { width: auto; margin-left: 0; }
  .nav_bar ul li { width: auto; }
  .nav_bar ul li a { padding: 0 10px; font-size: 15px; }
  .alhins { width: 44%; }
  .com_rt { width: 52%; }
}

/* --------------------------------------------------------------------------
   7. <= 991px  |  tablet + mobile navigation
   -------------------------------------------------------------------------- */
@media (max-width: 991px) {

  /* ---- header / nav ---- */
  .header_k { height: auto; padding: 3px 0; }
  .hes_box span { float: none; display: block; text-align: center; font-size: 12px; line-height: 22px; }

  .header_hu { height: auto; }
  .top { position: relative; height: auto; padding: 10px 0 0; }
  .main { position: relative; width: 92%; max-width: 1200px; }

  .logo { float: none; margin: 0 auto; text-align: center; }
  .logo img { display: inline-block; max-height: 52px; width: auto; }

  .nav_bar { float: none; width: 100%; height: auto; margin: 0; clear: both; }

  .nav_toggle {
    display: block;
    position: absolute;
    right: 0;
    top: 17px;
    width: 42px;
    height: 36px;
    cursor: pointer;
    background: #075fa0;
    border-radius: 4px;
    z-index: 20;
  }
  .nav_toggle span { display: block; height: 3px; width: 20px; margin: 4px auto 0; background: #fff; border-radius: 2px; }
  .nav_toggle span:first-child { margin-top: 7px; }
  .nav_cb { display: none; }

  .nav_bar > ul { display: none; width: 100%; margin: 10px 0 0; background: #075fa0; }
  .nav_cb:checked ~ ul { display: block; }

  .nav_bar > ul > li {
    float: none;
    width: 100%;
    height: auto;
    line-height: 44px;
    text-align: left;
    padding: 0;
    border-bottom: 1px solid rgba(255, 255, 255, .15);
  }
  .nav_bar > ul > li > a { display: block; color: #fff; font-size: 15px; padding: 0 16px; }
  .nav_bar > ul > li:hover { background: transparent; }
  .nav_bar > ul > li:hover a { color: #fff; }
  .nav_bar ul li a:hover { color: #ffd400; background: none; }

  /* products submenu: always expanded on mobile (5 items, no tap-hover trap) */
  .hid { position: static; display: block; width: 100%; height: auto; background: #0a4f85; left: auto; }
  .hid ul { width: 100%; margin: 0; }
  .hid ul li { float: none; width: 100%; }
  .hid ul li a {
    display: block;
    height: auto;
    line-height: 38px;
    margin: 0;
    padding: 0 30px;
    font-size: 14px;
    border-radius: 0;
  }
  .hid ul li a:hover { color: #ffd400; background: transparent; border-radius: 0; }

  /* ---- hero carousel ---- */
  .bs-slider { max-height: none; }
  .bs-slider .slide-image {
    width: 100% !important;
    height: 300px;
    object-fit: cover;
    object-position: center;
  }
  .slide-text { top: 50%; transform: translateY(-50%); padding: 10px 6%; }
  .slide-text > h1, .slide-text > h2 { font-size: 30px; line-height: 38px; margin-bottom: 8px; }
  .slide-text > p { font-size: 15px; line-height: 22px; margin-bottom: 0; }

  /* ---- home: products intro ---- */
  .conyie { margin-top: 26px; }
  .wenxi_k { width: 88%; margin-bottom: 18px; }
  .wenxi_k h1 { font-size: 26px; }
  .wenxi_k p { font-size: 14px; line-height: 22px; }
  .swiper-slide { width: 46%; }
  .swiper-wrapper { gap: 16px; }

  /* ---- home: company profile band ---- */
  .compily { height: auto; padding: 26px 0; margin-top: 26px; }
  .com_le { width: 92%; }
  .alhins { width: 100%; float: none; margin: 0; }
  .alhins h4 {
    background-size: auto 26px;
    background-position: left center;
    font-size: 24px;
    line-height: 34px;
    margin-bottom: 14px;
    padding-left: 34px;
  }
  .alhins p { font-size: 14px; line-height: 26px; }
  .com_rt {
    width: 100%;
    height: 240px;
    float: none;
    margin-top: 20px;
    background-attachment: scroll;
    background-size: cover;
    background-position: center;
  }
  .mare { width: 100%; height: auto; margin-top: 20px; background: transparent; }
  .mare button { width: auto; min-width: 160px; height: 42px; margin: 0; }

  /* ---- home: 4 icon strip ---- */
  .zhiliang { margin: 28px 0; }
  .zhil_box {
    width: 92%;
    max-width: 1104px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
  }
  .tuui { width: 47%; float: none; margin-bottom: 24px; }
  .icon { width: 84px; height: 84px; border-width: 42px; border-radius: 50%; }
  .icon i { font-size: 34px; }
  .name { font-size: 15px; margin-top: 12px; }

  /* ---- home: green band ---- */
  .banner_bi {
    height: auto;
    min-height: 180px;
    padding: 34px 0;
    background-attachment: scroll;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
  }
  .banner_wenzi { width: 88%; height: auto; margin: 0 auto; padding: 0; }
  .squatre-button { min-width: 0; width: 100%; font-size: 15px !important; line-height: 24px !important; padding: 12px 14px; }

  /* ---- shared page hero ---- */
  .banner_b, .banner_bd, .banner_bf, .banner_bp, .banner_bo {
    height: 180px;
    background-size: cover;
    background-position: center center;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .abo { margin: 0; font-size: 26px; line-height: 34px; padding: 0 5%; text-align: center; }

  /* ---- inner content cards ---- */
  .about_box { top: 0; margin-top: 22px; }
  .about_n, .about_np, .about_nf { width: 92%; padding: 6% 5%; max-width: none; }
  .about_nn, .about_nk, .about_no { width: 92%; height: auto !important; padding: 6% 5%; max-width: none; }

  .ab_top img { display: block; width: 100%; height: auto; }
  .ab, .abj {
    position: static;
    width: auto;
    height: auto;
    right: auto;
    top: auto;
    margin-top: 10px;
    padding: 12px 14px;
    font-size: 20px;
    line-height: 28px;
    text-align: center;
  }
  .abj { font-size: 16px; line-height: 24px; padding: 9px 14px; }

  .wemzo { margin: 14px 0 0; font-size: 15px; line-height: 28px; }
  .wemzo span { font-size: 17px; }

  .about_l, .about_r { width: 100%; float: none; margin: 0; height: auto; background-size: contain; background-repeat: no-repeat; }
  .about_r { margin-top: 18px; }
  .about_r p { line-height: 34px; }
  .about_r h3 { font-size: 22px; }

  .about_nn ul li { width: 100%; margin: 14px 0; }
  .about_nk ul li { width: 100%; margin: 14px 0; height: auto; padding-bottom: 16px; }
  .about_no .dutu li, .about_no .chtu li { width: 100%; margin: 12px 0; }

  /* ---- product detail ---- */
  .pro_s, .pro_ss { height: auto; padding: 18px 0 0; }
  .pro_ku { display: none; }
  .pro_kuu, .pro_kuf, .pro_kuff {
    position: static;
    width: 100%;
    height: auto;
    left: auto;
    top: auto;
    padding: 0;
  }
  .pro_kuu img { width: 100%; height: auto; }
  .pro_kuf span, .pro_kuff span { float: none; display: inline-block; width: 47%; height: auto; margin: 1%; }
  .pro_kuf span img, .pro_kuff span img { height: auto; }
  .pro_hu, .pro_huf, .pro_huff {
    position: static;
    width: 100%;
    height: auto;
    right: auto;
    top: auto;
    margin-top: 16px;
    padding: 16px;
    font-size: 15px;
    line-height: 26px;
  }
  .buj { font-size: 20px; }
  .bh h2 { font-size: 16px; line-height: 28px; }
  .bh p { font-size: 14px; line-height: 26px; }

  /* ---- data tables: horizontal scroll instead of overflow ---- */
  .table { width: 100%; margin: 16px 0; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  table.tftable { min-width: 520px; }
  table.tftable th, table.tftable td { font-size: 14px; padding: 6px; }

  /* ---- footer ---- */
  .footer { padding: 22px 0; }
  .fonn { width: 100%; float: none; margin: 0 0 14px; }
  .fonn ul { height: auto; padding-bottom: 8px; }
  .fonn ul li { float: none; display: inline-block; margin: 0 14px 6px 0; font-size: 14px; }
  .logo_n { float: none; text-align: center; margin-top: 14px; }
  .logo_n img { display: inline-block; max-height: 46px; width: auto; }
  .end_h p { font-size: 17px; line-height: 46px; }
}

/* --------------------------------------------------------------------------
   8. <= 767px  |  phone
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  .hes_box span { font-size: 11px; }

  .bs-slider .slide-image { height: 230px; }
  .slide-text { padding: 10px 7%; }
  .slide-text > h1, .slide-text > h2 { font-size: 24px; line-height: 30px; }

  .swiper-slide { width: 78%; }
  .hujk h3 { font-size: 18px; }

  .com_rt { height: 190px; }
  .tuui { width: 100%; }
  .zhil_box { justify-content: center; }

  .banner_b, .banner_bd, .banner_bf, .banner_bp, .banner_bo { height: 150px; }
  .abo { font-size: 22px; line-height: 28px; }

  .about_n, .about_np, .about_nf, .about_nn, .about_nk, .about_no { width: 94%; padding: 7% 5%; }

  .pro_hu, .pro_huf, .pro_huff { font-size: 14px; line-height: 24px; padding: 14px; }

  .footer .fonn p { font-size: 12px; line-height: 22px; }
}

/* --------------------------------------------------------------------------
   9. <= 479px  |  small phone
   -------------------------------------------------------------------------- */
@media (max-width: 479px) {
  body { font-size: 13px; }

  .nav_toggle { top: 14px; }
  .logo img { max-height: 44px; }

  .bs-slider .slide-image { height: 190px; }
  .slide-text > h1 { font-size: 20px; line-height: 26px; margin-bottom: 4px; }
  .slide-text > p { font-size: 13px; line-height: 19px; }

  .wemzo span { font-size: 16px; }
  .ab { font-size: 18px; line-height: 25px; }
  .abj { font-size: 14px; }
  .abo { font-size: 19px; }

  .fonn ul li { margin-right: 10px; font-size: 13px; }
}

/* --------------------------------------------------------------------------
   10. Touch devices: kill fixed backgrounds (iOS ignores them anyway and the
       repaint cost is high) and neutralise hover-only affordances.
   -------------------------------------------------------------------------- */
@media (hover: none) {
  .cd-fixed-bg, .banner_bi, .banner_b, .banner_bd, .banner_bf, .banner_bp, .banner_bo {
    background-attachment: scroll !important;
    background-size: cover;
    background-position: center center;
  }
}

/* --------------------------------------------------------------------------
   11. Users who ask for less motion get no decorative animation
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}