:root { --layout-unit: 1vw; --header-unit: 1vw; --site-header-height: 72px; --site-font: "Noto Sans SC", "Noto Sans", sans-serif; }
/* One homepage DOM. Desktop retains the PSD coordinates; smaller viewports use flow and grids. */
.home-content { display: block; }
.home-quality-grid,
.home-application-grid,
.home-value-list,
.home-workflow-grid,
.home-workflow-step,
.home-custom-grid,
.home-custom-card { display: contents; }
.home-text-action { -webkit-text-decoration: none; text-decoration: none; }

@media (max-width: 1199px) {
  .home-content { display: block; width: 100%; }
  .home-content > section:not(#home) {
    position: relative;
    width: 100%;
    height: auto !important;
    min-height: 0;
    padding: 52px 20px;
    padding: 52px calc(20px);
    padding: 52px calc(max(20px, min(5vw, 56px)));
    overflow: hidden;
  }
  .home-content #about,
.home-content #factory,
.home-content #custom,
.home-content #quality,
.home-content #process,
.home-content #footer { background-image: none; }
  .home-content .live-text {
    position: static !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    overflow: visible !important;
    font-size: 15px !important;
    line-height: 1.75 !important;
    white-space: normal;
  }
  .home-content [class*="text-run-"] { font-size: inherit !important; line-height: inherit !important; }
  .home-content h2.live-text,
  .home-content .advantages-heading,
  .home-content .faq-heading {
    position: static;
    width: auto !important;
    margin: 0 0 20px !important;
    font-size: 25px !important;
    font-size: calc(25px) !important;
    font-size: calc(max(25px, min(3.5vw, 34px))) !important;
    line-height: 1.35 !important;
    white-space: normal;
  }
  .home-content h3.live-text { font-size: 20px !important; line-height: 1.45 !important; }
  .home-content #products > h2,
.home-content #products > p,
.home-content #custom > h2,
.home-content #custom > p,
.home-content #process > h2,
.home-content #process > p,
.home-content #applications > h2,
.home-content #applications > p,
.home-content #faq > h2,
.home-content #faq > p { text-align: center; }
  .home-content #products > p,
.home-content #custom > p,
.home-content #process > p,
.home-content #applications > p,
.home-content #quality > p { margin-bottom: 24px !important; }
  .home-content #about p br,
.home-content #factory p br,
.home-content #custom p br,
.home-content #quality p br,
.home-content #values p br { display: none; }

  /* The same banner photographs, title and controls are used at every width. */
  .home-content #home { height: auto; padding: 0; }
  .home-content .banner-slide img { height: 560px; height: calc(560px); height: calc(max(560px, min(85vh, 760px))); height: calc(560px); height: calc(max(560px, min(85svh, 760px))); min-height: 560px; aspect-ratio: auto; }
  .home-content .banner-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0;
    padding: calc(100px) 24px 80px;
    padding: calc(28px + var(--site-header-height, 72px)) 24px 80px;
    text-align: center;
  }
  .home-content .banner-title,
  .home-content .banner-description {
    position: static;
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
    width: 100% !important;
    width: 100% !important;
    width: min(100%, 760px) !important;
    margin: 0;
    white-space: normal;
  }
  .home-content .banner-title { text-wrap: balance; font-size: 28px !important; font-size: calc(28px) !important; font-size: calc(max(28px, min(4.5vw, 46px))) !important; line-height: 1.3 !important; }
  .home-content .banner-divider { position: static; width: 58px; height: 3px; margin: 22px auto; }
  .home-content .banner-description { font-size: 16px !important; line-height: 1.8 !important; }
  .home-content .banner-actions { position: static; width: auto; margin-top: 24px; flex-wrap: wrap; justify-content: center; gap: 12px; }
  .home-content .banner-actions a { width: auto; min-width: 124px; height: 46px; padding: 10px 18px; font-size: 15px; }

  /* Company and factory use one photo and one copy block, rearranged by grid areas. */
  .home-content #about {
    display: grid;
    grid-template-columns: min0 min0;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas: "eyebrow photo" "title photo" "copy photo" "action photo";
    grid-gap: 16px 30px;
    gap: 16px 30px;
    background-color: #fff;
  }
  .home-content #about .psd-layer-295 { grid-area: eyebrow; color: #023b80; font-size: 20px !important; }
  .home-content #about .psd-layer-297 { grid-area: title; margin: 0 !important; }
  .home-content #about .psd-layer-300 { grid-area: copy; }
  .home-content #about .psd-layer-303 { grid-area: action; justify-self: start; }
  .home-content .about-photo-frame,
  .home-content .factory-photo-frame {
    position: relative;
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
    grid-area: photo;
    align-self: center;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    margin: 0;
    border-radius: 16px;
  }
  .home-content .about-photo-frame img,
  .home-content .factory-photo-frame img { width: 100%; height: 100%; object-fit: cover; }
  .home-content #factory {
    display: grid;
    grid-template-columns: min0 min0;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas: "eyebrow eyebrow" "title title" "photo copy" "photo process" "photo action";
    grid-gap: 18px 30px;
    gap: 18px 30px;
    background-color: #fff;
  }
  .home-content #factory .psd-layer-225 { grid-area: eyebrow; color: #023b80; font-size: 20px !important; }
  .home-content #factory .psd-layer-226 { grid-area: title; }
  .home-content #factory .psd-layer-227 { grid-area: copy; }
  .home-content #factory .psd-layer-229 { grid-area: process; }
  .home-content .factory-action {
    position: static;
    grid-area: action;
    justify-self: start;
    width: auto;
    height: 48px;
    padding: 10px 22px;
    font-size: 15px;
  }
  .home-content .home-text-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    justify-self: center;
    min-height: 46px;
    padding: 10px 24px;
    border-radius: 6px;
    background: #ee8301;
    color: #fff;
    text-align: center;
  }

  .home-content #products { background: #f6f6f6; }
  .home-content .product-cards {
    position: relative;
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
    width: 100%;
    height: auto;
    margin-top: 28px;
  }
  .home-content .product-track { height: auto; align-items: stretch; }
  .home-content .product-card {
    display: grid;
    grid-template-columns: min0 100px;
    grid-template-columns: min0 calc(100px);
    grid-template-columns: minmax(0, 1fr) calc(max(100px, min(20vw, 220px)));
    flex: 0 0 100%;
    align-content: start;
    grid-gap: 16px 20px;
    gap: 16px 20px;
    min-width: 0;
    min-height: 340px;
    margin-right: 20px;
    padding: 24px;
    border-radius: 14px;
  }
  .home-content .product-card::before { display: none; }
  .home-content .product-card-title { grid-column: 1 / -1; padding-bottom: 15px; border-bottom: 1px solid #ddd; }
  .home-content .product-card-description { grid-column: 1; }
  .home-content .product-card-image {
    position: static;
    grid-column: 2;
    grid-row: 2 / span 2;
    align-self: center;
    justify-self: center;
    width: 100% !important;
    height: 180px;
    max-width: 220px;
    object-fit: contain;
  }
  .home-content .product-card-link { position: static; grid-column: 1; width: 40px; height: 40px; font-size: 28px; }
  .home-content .product-actions { position: static; width: auto; margin-top: 26px; flex-wrap: wrap; justify-content: center; gap: 12px; }
  .home-content .product-actions a { width: auto; min-width: 144px; height: 48px; padding: 10px 22px; font-size: 15px; }

  .home-content .advantages-heading { text-align: center; color: #fff; }
  .home-content .advantage-grid {
    position: static;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, min0);
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: none;
    grid-gap: 18px;
    gap: 18px;
  }
  .home-content .advantage-card { min-width: 0; padding: 22px; border: 1px solid rgba(255,255,255,0.6); border-radius: 12px; }
  .home-content .advantage-card-heading { position: static; display: flex; gap: 12px; }
  .home-content .advantage-number { width: 44px; height: 44px; font-size: 22px; }
  .home-content .advantage-card h3 { top: auto; font-size: 20px !important; line-height: 1.45 !important; }
  .home-content .advantage-card p { position: static; width: auto; margin: 18px 0 0; font-size: 15px !important; line-height: 1.75 !important; }

  .home-content #custom { display: grid; grid-gap: 20px; gap: 20px; background-color: #f6f8fb; }
  .home-content #custom > h2,
.home-content #custom > p { margin: 0 !important; }
  .home-content .home-custom-grid { display: grid; grid-template-columns: repeat(2, min0); grid-template-columns: repeat(2, minmax(0, 1fr)); grid-gap: 20px; gap: 20px; }
  .home-content .home-custom-card { display: grid; grid-gap: 14px; gap: 14px; padding: 24px; background: #fff; border: 1px solid #e0e6ed; border-radius: 12px; }

  .home-content #quality { background-color: #073d7d; }
  .home-content #quality > h2,
.home-content #quality > p { color: #fff; text-align: center; }
  .home-content .home-quality-grid { display: grid; grid-template-columns: repeat(2, min0); grid-template-columns: repeat(2, minmax(0, 1fr)); grid-gap: 20px; gap: 20px; }
  .home-content .quality-card { position: relative; top: auto; right: auto; bottom: auto; left: auto; width: auto; height: auto; min-height: 240px; padding: 24px; border-radius: 16px; }
  .home-content .quality-card .quality-number { display: block; color: #ee8301; font-size: 32px !important; line-height: 1 !important; margin-bottom: 18px !important; }
  .home-content .quality-card h3 { color: #023b80; margin-bottom: 12px !important; }
  .home-content .quality-card p { color: #555; }

  .home-content #process { background-color: #f6f8fb; counter-reset: workflow; }
  .home-content .home-workflow-grid { display: grid; grid-template-columns: repeat(3, min0); grid-template-columns: repeat(3, minmax(0, 1fr)); grid-gap: 20px; gap: 20px; }
  .home-content .home-workflow-step { display: block; padding: 24px; border-radius: 12px; background: #fff; }
  .home-content .home-workflow-step::before { display: block; margin-bottom: 14px; color: #ee8301; font-size: 30px; counter-increment: workflow; content: counter(workflow, decimal-leading-zero); }
  .home-content .home-workflow-step h3 { margin-bottom: 12px !important; color: #023b80; }

  .home-content .home-application-grid { display: grid; grid-template-columns: repeat(2, min0); grid-template-columns: repeat(2, minmax(0, 1fr)); grid-gap: 20px; gap: 20px; }
  .home-content .application-card { position: relative; top: auto; right: auto; bottom: auto; left: auto; width: auto; height: auto; border-radius: 14px; }
  .home-content .application-photo { width: 100%; height: 280px; object-fit: cover; }
  .home-content .application-caption { position: relative !important; top: auto !important; right: auto !important; bottom: auto !important; left: auto !important; width: auto !important; height: auto !important; padding: 22px; border-radius: 0; }
  .home-content .application-caption h3 { margin-bottom: 10px !important; }

  .home-content #values { display: grid; grid-template-columns: min0 min0; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-gap: 24px; gap: 24px; background-color: #fff; }
  .home-content #values > h2 { grid-column: 1 / -1; }
  .home-content .home-value-list { display: grid; grid-column: 1; grid-gap: 20px; gap: 20px; }
  .home-content .value-item { position: relative; top: auto; right: auto; bottom: auto; left: auto; width: auto; height: auto; min-height: 0; padding-left: 70px; }
  .home-content .value-icon { position: absolute; left: 0; top: 0; width: 52px; height: 52px; border-radius: 8px; }
  .home-content .value-item h3 { margin-bottom: 8px !important; }
  .home-content .values-visual { position: relative; top: auto; right: auto; bottom: auto; left: auto; grid-column: 2; grid-row: 2; align-self: stretch; width: 100%; height: auto; margin: 0; }
  .home-content .values-photo-frame { width: 100%; height: 100%; min-height: 420px; border-radius: 16px; }
  .home-content .values-photo-frame img { width: 100%; height: 100%; object-fit: cover; }
  .home-content .values-caption { position: absolute; top: auto; right: 0; bottom: 24px; left: auto; width: 85%; height: auto; padding: 20px; border-radius: 12px 0 0 12px; }

  .home-content .supplier-content { position: relative; top: auto; right: auto; bottom: auto; left: auto; }
  .home-content .supplier-content > h2,
.home-content .supplier-content > p { text-align: center; }
  .home-content .supplier-content p { margin-top: 16px !important; }
  .home-content .supplier-actions { position: static; margin-top: 24px; gap: 12px; flex-wrap: wrap; }
  .home-content .supplier-action { width: auto; height: 48px; padding: 10px 22px; font-size: 15px; }
  .home-content #faq { background-color: #f6f8fb; }
  .home-content .faq-columns { display: grid; width: 100%; margin: 0; grid-template-columns: 1fr; grid-template-rows: none; grid-auto-flow: row; grid-gap: 12px; gap: 12px; }
  .home-content .faq-column { gap: 12px; }
  .home-content .faq-accordion summary { min-height: 60px; padding: 16px 20px; font-size: 16px !important; line-height: 1.6 !important; }
  .home-content .faq-accordion summary::after { width: 10px; height: 10px; border-width: 0 3px 3px 0; margin-right: 4px; }
  .home-content .faq-answer { padding: 0 20px 20px; }
  .home-content .faq-answer p { font-size: 15px !important; line-height: 1.8 !important; }

  .home-content #contact { display: grid; grid-template-columns: min0 min0; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-gap: 18px 30px; gap: 18px 30px; }
  .home-content #contact > .live-text { position: relative !important; z-index: 1; color: #fff; }
  .home-content #contact .psd-layer-24,
.home-content #contact .psd-layer-25 { grid-column: 1 / -1; text-align: center; }
  .home-content #contact .psd-layer-26,
.home-content #contact .psd-layer-27,
.home-content #contact .psd-layer-28 { grid-column: 1; }
  .home-content .home-quote-form {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    display: grid !important;
    grid-column: 2;
    grid-row: 3 / span 3;
    grid-template-columns: repeat(2, min0);
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-content: start;
    grid-gap: 12px;
    gap: 12px;
    width: 100% !important;
    height: auto !important;
    margin: 0;
    padding: 0;
  }
  .home-content .home-quote-form input:not([type="hidden"]),
.home-content .home-quote-form select,
.home-content .home-quote-form textarea {
    position: static !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    width: 100% !important;
    height: 48px !important;
    margin: 0 !important;
    padding: 12px 14px !important;
    border-radius: 6px;
    font-size: 15px !important;
    line-height: 1.5 !important;
  }
  .home-content .home-quote-form textarea { grid-column: 1 / -1; height: 150px !important; min-height: 150px; resize: vertical; }
  .home-content .home-quote-form small,
.home-content .home-quote-form button,
.home-content .home-quote-form .cms-captcha { grid-column: 1 / -1; }
  .home-content .home-quote-form small { position: static; width: auto; height: auto; margin: 0; font-size: 13px; line-height: 1.6; }
  .home-content .home-quote-form button { position: static; width: 100%; height: 48px; margin: 0; padding: 10px 20px; border: 0; border-radius: 6px; background: #ee8301; font-size: 16px; }
  .home-content input[type="hidden"] { display: none !important; }
  .home-content #contact::after { height: 5px; }

  .home-content #footer {
    display: grid;
    grid-template-columns: repeat(2, min0);
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas: "story-title products-title" "story products" "contact-title contact-title" "phone email" "copyright copyright";
    grid-gap: 14px 28px;
    gap: 14px 28px;
    background-color: #0c2f5a;
    color: #fff;
  }
  .home-content #footer .live-text { color: #fff; }
  .home-content #footer .psd-layer-35 { grid-area: story-title; font-size: 20px !important; font-weight: 700; }
  .home-content #footer .psd-layer-44 { grid-area: story; }
  .home-content #footer .psd-layer-38 { grid-area: products-title; font-size: 20px !important; font-weight: 700; }
  .home-content #footer .psd-layer-48 { grid-area: products; }
  .home-content #footer .psd-layer-36 { grid-area: contact-title; font-size: 20px !important; font-weight: 700; }
  .home-content #footer .psd-layer-45 { grid-area: phone; }
  .home-content #footer .psd-layer-46 { grid-area: email; word-wrap: anywhere; }
  .home-content #footer .psd-layer-32 { grid-area: copyright; padding-top: 20px; border-top: 1px solid rgba(255,255,255,0.2); font-size: 13px !important; }
  .home-content #footer .psd-layer-37 { display: none; }
}

@media (min-width: 900px) and (max-width: 1199px) {
  .home-content .home-quality-grid { grid-template-columns: repeat(3, min0); grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
  .home-content > section:not(#home) { padding: 42px 20px; }
  .home-content #about { grid-template-columns: 1fr; grid-template-areas: "eyebrow" "title" "photo" "copy" "action"; }
  .home-content #factory { grid-template-columns: 1fr; grid-template-areas: "eyebrow" "title" "photo" "copy" "process" "action"; }
  .home-content .home-workflow-grid { grid-template-columns: repeat(2, min0); grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-content #values { grid-template-columns: 1fr; }
  .home-content .values-visual { grid-column: 1; grid-row: auto; }
  .home-content .values-photo-frame { height: 360px; min-height: 0; }
  .home-content .home-value-list { grid-column: 1; }
  .home-content #contact { grid-template-columns: 1fr; }
  .home-content .home-quote-form { grid-column: 1; grid-row: auto; margin-top: 12px; }
}

@media (max-width: 575px) {
  .home-content .banner-content { padding-left: 20px; padding-right: 20px; }
  .home-content .banner-description { font-size: 14px !important; }
  .home-content .advantage-grid,
  .home-content .home-quality-grid,
  .home-content .home-custom-grid,
  .home-content .home-workflow-grid,
  .home-content .home-application-grid { grid-template-columns: 1fr; }
  .home-content .product-card { grid-template-columns: min0 100px; grid-template-columns: minmax(0, 1fr) 100px; padding: 22px; gap: 14px; }
  .home-content .product-card-image { height: 150px; }
  .home-content .application-photo { height: 300px; }
  .home-content .home-quote-form { grid-template-columns: 1fr; }
  .home-content #footer { grid-template-columns: 1fr; grid-template-areas: "story-title" "story" "products-title" "products" "contact-title" "phone" "email" "copyright"; }
}

@media(max-width:1199px){
 .home-content .product-actions a,.home-content .factory-action,.home-content .supplier-action{font-size:15px!important;line-height:1.4!important;white-space:normal;text-align:center}
 .home-content .product-actions a::before,.home-content .factory-action::before{font-size:1.4em!important}
}

@media (max-width: 1199px) {
  html:lang(zh) .home-content .banner-title {
    word-break: keep-all;
    word-wrap: break-word;
  }
}