@media(max-width:900px) {
    body {
        min-width: 0;
        overflow-x: hidden
    }

    .wrap {
        width: min(100% - 40px, 1200px)
    }

    .site-header {
        height: 340px
    }

    .header-inner {
        height: 78px;
        align-items: flex-start;
        padding-top: 18px
    }

    .brand-lockup {
        width: 190px
    }

    .brand-lockup img {
      
        height: 40px;
        margin-right: 8px
    }

    .brand-cn {
        font-size: 18px
    }

    .brand-en {
        font-size: 9px
    }

    .main-nav {
        position: absolute;
        left: 0;
        right: 0;
        top: 74px;
        overflow: auto;
        gap: 18px;
        padding: 0 20px;
        justify-content: flex-start
    }

    .main-nav a {
        height: 40px;
        padding: 7px 0;
        white-space: nowrap
    }

    .main-nav a:after {
        bottom: 2px
    }

    .breadcrumb-bar,
    .breadcrumb {
        height: 48px
    }

    .breadcrumb {
        overflow: hidden;
        white-space: nowrap;
        font-size: 12px
    }

    .page-main {
        padding: 26px 0 55px
    }

    .section-heading {
        margin: 10px 0 30px;
        gap: 15px
    }

    .section-heading h1,
    .section-heading h2 {
        font-size: 24px
    }

    .section-heading p {
        font-size: 14px
    }

    .heading-copy {
        min-width: 190px
    }

    .brand-intro,
    .join-lead,
    .contact-lower,
    .detail-layout,
    .home-about {
        grid-template-columns: 1fr;
        height: auto
    }

    .brand-intro .photo {
        min-height: 280px
    }

    .brand-intro .copy,
    .join-lead .copy {
        padding: 28px
    }

    .brand-values,
    .benefit-grid {
        grid-template-columns: 1fr
    }

    .brand-values article {
        border-right: 0;
        border-bottom: 1px solid var(--line);
        padding: 28px
    }

    .process-showcase {
        grid-template-columns: repeat(2, 1fr);
        height: auto
    }

    .craft-card {
        min-height: 220px
    }

    .long-step,
    .long-step:nth-child(even) {
        grid-template-columns: 1fr;
        min-height: 0
    }

    .long-step:nth-child(even) .step-photo {
        order: 0
    }

    .step-photo {
        height: 220px
    }

    .step-copy {
        padding: 28px
    }

    .tabs {
        height: auto;
        justify-content: flex-start;
        gap: 25px;
        overflow: auto;
        margin: 0 0 25px;
        white-space: nowrap
    }

    .product-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px
    }

    .product-card .image {
        height: 220px
    }

    .detail-layout {
        gap: 20px
    }

    .side-nav {
        display: none
    }

    .detail-content {
        padding: 25px 20px;
        min-height: 0
    }

    .detail-content .hero-product {
        width: 100%;
        height: 330px
    }

    .prev-next {
        gap: 20px;
        flex-direction: column
    }

    .news-list {
        padding: 20px
    }

    .news-row {
        grid-template-columns: 1fr;
        gap: 15px;
        min-height: 0
    }

    .news-row img {
        width: 100%;
        height: 220px
    }

    .article {
        padding: 25px 20px
    }

    .faq {
        gap: 14px
    }

    .faq-item {
        height: auto;
        min-height: 66px
    }

    .faq-q {
        padding: 17px;
        font-size: 13px;
        align-items: flex-start
    }

    .faq-q time {
        white-space: nowrap
    }

    .contact-icons,
    .home-contact {
        grid-template-columns: repeat(2, 1fr);
        gap: 35px;
        margin: 42px 0
    }

    .static-map {
        min-height: 290px
    }

    .footer-grid {
        grid-template-columns: 1fr;
        gap: 25px
    }

    .site-footer {
        padding: 35px 0 18px
    }

    .floating-tools {
        right: 10px;
        top: auto;
        bottom: 18px
    }

    .floating-tools a,
    .floating-tools button {
        width: 42px;
        height: 42px
    }

    .home {
        height: 100vh
    }

    .home .site-header {
        height: 110px
    }

    .home-pages,
    .home-screen {
        height: 100vh;
        min-height: 0
    }

    .home-screen>.wrap {
        width: min(100% - 40px, 700px)
    }

    .hero-copy {
        margin-top: 60px
    }

    .hero-copy h1 {
        font-size: 30px
    }

    .hero-copy>div:first-child {
        font-size: 13px
    }

    .since {
        font-size: 16px;
        letter-spacing: 3px
    }

    .since img {
      
        height: 38px
    }

    .home-products,
    .home-news {
        gap: 10px
    }
.home-products{
        display: grid;
    grid-template-columns: repeat(1, 1fr);
}
    .home-products a {
               height: 194px;
    }

    .home-products span {
        padding: 12px;
        font-size: 14px
    }

    .adv-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 20px 10px
    }

    .adv-grid b {
        width: 82px;
        height: 82px;
        font-size: 18px
    }

    .adv-grid h3 {
        font-size: 15px;
        margin: 5px 0
    }

    .adv-grid p {
        display: none
    }

    .home-process {
        grid-template-columns: repeat(5, 42vw);
        overflow: auto;
        height: 320px
    }

    .home-process div {
        padding: 28px 16px
    }

    .home-about .photo {
        height: 240px
    }

    .home-about .copy {
        padding: 28px
    }

    .partner-row {
        display: none
    }

    .home-news article {
        padding: 12px
    }

    .home-news img {
        height: 145px
    }

    .home-news h3 {
        font-size: 14px
    }

    .home-copy {
        bottom: 14px
    }

    .home-dots {
        right: 12px;
        gap: 10px
    }

    .home-dots button {
        width: 13px;
        height: 13px
    }

    .screen-title {
        margin-bottom: 27px
    }

    .screen-title h2 {
        font-size: 25px
    }
}