@media (max-width: 900px) {

    /* =========================
       Public Base
    ========================= */

    .site-header {
        height: 64px;
        padding: 0 20px;
    }

    .brand {
        font-size: 18px;
    }

    .brand img {
        max-height: 34px;
    }

    .mobile-menu-btn {
        display: block;
    }

    .nav {
        display: none;
        position: fixed;
        top: 64px;
        left: 0;
        right: 0;
        background: #fff;
        padding: 18px 24px;
        box-shadow: 0 8px 25px rgba(0,0,0,.08);
        z-index: 99;
    }

    .nav.open {
        display: block;
    }

    .nav a {
        display: block;
        padding: 14px 0;
        border-bottom: 1px solid #eee;
        color: #333;
    }

    .search-toggle {
        margin-top: 12px;
    }

    .site-search {
        top: 64px;
        padding: 18px;
    }

    .site-search input {
        height: 44px;
    }

    .page-main {
        padding-top: 64px;
    }

    .section-title {
        font-size: 28px;
        margin-bottom: 26px;
    }

    .footer {
        padding: 30px 20px;
    }


    /* =========================
       Common Page Hero
    ========================= */

    .page-hero {
        margin-top: 64px;
        height: 260px;
    }

    .page-hero h1 {
        font-size: 34px;
    }

    .page-hero p {
        font-size: 16px;
    }

    .container {
        padding: 42px 22px;
    }

    .category-tabs {
        justify-content: flex-start;
        gap: 10px;
        margin-bottom: 32px;
    }

    .category-tabs a {
        padding: 8px 16px;
        font-size: 14px;
    }


    /* =========================
       Home
    ========================= */

    #home .hero {
        margin-top: 64px;
    }

    .banner,
    .banner-slider,
    .banner picture,
    .banner img,
    .banner-slide picture,
    .banner-slide img {
        height: 520px;
        min-height: 520px;
    }

    .banner-arrow {
        display: none;
    }

    .banner-text {
        left: 24px;
        right: 24px;
        max-width: none;
    }

    .banner-text h1 {
        font-size: 34px;
    }

    .banner-text p {
        font-size: 17px;
    }

    .intro {
        padding: 60px 24px;
    }

    .intro h2 {
        font-size: 28px;
    }

    .section {
        padding: 60px 24px;
    }

    .section-inner {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .section.image_right .section-img {
        order: 0;
    }

    .section-text h2,
    .text-center h2 {
        font-size: 28px;
    }

    .pc-img {
        display: none !important;
    }

    .mobile-img {
        display: block !important;
    }

    .full-image img {
        height: 460px;
    }

    .full-image .section-text {
        left: 24px;
        right: 24px;
        max-width: none;
    }

    .home-products,
    .home-news,
    .home-videos {
        padding: 60px 24px;
    }

    .home-product-grid,
    .home-video-grid {
        grid-template-columns: 1fr;
    }

    .home-product-card img {
        height: 230px;
    }

    .home-video-card video {
        height: 230px;
    }

    .news-item {
        display: block;
    }

    .news-date {
        width: auto;
        margin-bottom: 8px;
    }

    .brand-entry,
    .contact-entry {
        padding: 70px 24px;
    }

    .brand-box h2 {
        font-size: 32px;
    }


    /* =========================
       Product
    ========================= */

    .product-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .product-img {
        height: 230px;
    }

    .product-info-card {
        padding: 28px;
    }

    .product-info-card h2,
    .intro-card h2,
    .detail-title {
        font-size: 26px;
    }

    .meta-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

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

    .related-card h3 {
        font-size: 17px;
    }

    .hero {
        margin-top: 64px;
        height: 420px;
        min-height: 420px;
    }

    .hero-title {
        left: 24px;
        right: 24px;
        bottom: 42px;
    }

    .hero-title h1 {
        font-size: 34px;
    }

    .hero-title p {
        font-size: 17px;
    }


    /* =========================
       News
    ========================= */

    .news-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .news-img {
        height: 220px;
    }

    .news-hero {
        margin-top: 64px;
        height: 420px;
    }

    .news-hero-title {
        left: 24px;
        right: 24px;
        bottom: 42px;
    }

    .news-hero-title h1 {
        font-size: 30px;
    }

    .news-detail-container {
        padding: 42px 22px;
    }

    .news-summary {
        padding: 24px;
    }

    .prev-next {
        grid-template-columns: 1fr;
    }


    /* =========================
       Video
    ========================= */

    .video-grid {
        grid-template-columns: 1fr;
        gap: 26px;
    }

    .video-cover img,
    .video-placeholder {
        height: 230px;
    }

    .video-detail-main {
        padding: 100px 24px 60px;
    }

    .video-title {
        font-size: 32px;
    }

    .video-card .related-grid,
    .video-detail-main .related-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .video-detail-main .related-card img {
        height: 140px;
    }


    /* =========================
       Brand / Honor / History
    ========================= */

    .brand-hero {
        margin-top: 64px;
        height: 360px;
    }

    .brand-hero-text {
        left: 24px;
        right: 24px;
        bottom: 48px;
    }

    .brand-hero-text h1 {
        font-size: 34px;
    }

    .brand-hero-text p {
        font-size: 17px;
    }

    .brand-section {
        padding: 56px 24px;
    }

    .brand-section h2 {
        font-size: 28px;
    }

    .brand-section-content {
        text-align: left;
        font-size: 16px;
    }

    .timeline-box {
        padding: 26px;
    }

    .brand-container {
        padding: 45px 22px;
    }

    .honor-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .honor-img {
        height: 230px;
    }

    .timeline::before {
        left: 18px;
    }

    .timeline-item {
        grid-template-columns: 1fr;
        gap: 12px;
        padding-left: 46px;
        margin-bottom: 40px;
    }

    .timeline-year {
        text-align: left;
        font-size: 24px;
    }

    .timeline-content {
        padding: 24px;
    }

    .timeline-content::before {
        left: -35px;
        top: 28px;
    }


    /* =========================
       Contact
    ========================= */

    .contact-container {
        padding: 45px 22px;
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .info-card,
    .form-card {
        padding: 28px;
    }


    /* =========================
       Search
    ========================= */

    .search-page {
        padding: 50px 24px;
    }

    .search-title {
        font-size: 30px;
    }

    .back-to-top {
    right: 20px;
    bottom: 22px;
    width: 42px;
    height: 42px;
    font-size: 20px;
    line-height: 42px;
    }
    button.back-to-top {
    right: 18px !important;
    left: auto !important;
    bottom: 20px !important;

    width: 48px;
    height: 48px;

    font-size: 24px;
    }
    .reveal {
    transform: translateY(24px);
    }
}