@media (max-width: 828px) {
    :root {
        --rpx-50: calc(0.86667vw / 8.28);
        --rpx-67: calc(1vw / 8.28);
        --rpx-75: calc(1.25vw / 8.28);
        --fpx-87: calc(1.5vw / 7.5);
        --fpx-75: calc(1.33vw / 7.5);
        --fpx-67: calc(1vw / 7.5);
        --fpx-50: calc(0.75vw / 7.5);
        --rpx: var(--rpx-67);
        --fpx: var(--fpx-87);
        --wrapper-width: calc(100vw - 40px);
        --wrapper-wide: calc(100vw - 40px);
        --header-height: calc(88 * var(--rpx));
    }

    .site-header.is-compact {
        height: var(--header-height);
    }

    .site-header.is-compact .site-logo img {
        width: calc(165 * var(--rpx));
        height: calc(61 * var(--rpx));
    }

    .site-header .wrapper-wide {
        display: flex;
        padding-top: 0;
    }

    .site-logo {
        margin-right: auto;
    }

    .nav-right {
        margin-left: auto;
    }

    .header-search.is-open .header-search-input {
        width: calc(100vw - 160px);
        max-width: none;
    }

    .top-nav {
        display: none;
        position: absolute;
        left: 0;
        right: 0;
        top: var(--header-height);
        background: #fff;
        flex-direction: column;
        align-items: stretch;
        height: auto;
        padding: calc(16 * var(--rpx)) calc(20 * var(--rpx));
        gap: 0;
        border-bottom: 1px solid var(--line);
    }

    .site-header.is-search-open .top-nav,
    .site-header.is-open.is-search-open .top-nav {
        display: none;
    }

    .top-nav-item,
    .top-nav-link {
        height: auto;
        padding: calc(12 * var(--rpx)) 0;
    }

    .top-nav-sub {
        position: static;
        display: block;
        box-shadow: none;
        padding: 0 0 0 calc(12 * var(--rpx));
    }

    .btn-menu {
        display: flex;
    }

    .sec-about .wrapper,
    .sec-cta .wrapper,
    .sec-solutions .panel,
    .site-footer .part1 .wrapper,
    .site-footer .part2 .wrapper {
        display: block;
    }

    .hero {
        height: auto;
        min-height: calc(520 * var(--rpx));
    }

    .hero-fg {
        transform: translateY(calc(-16 * var(--rpx)));
    }

    .hero-indicators {
        flex-wrap: wrap;
    }

    .product-card,
    .about-card,
    .footer-nav .col,
    .footer-info {
        width: 100%;
    }

    .product-card {
        height: auto;
        margin-right: 0;
        margin-bottom: calc(16 * var(--rpx));
    }

    .sec-about .info {
        margin-bottom: calc(32 * var(--rpx));
    }

    .about-news {
        display: block;
    }

    .about-card {
        height: auto;
        margin-bottom: calc(24 * var(--rpx));
    }

    .sec-solutions .panel.is-active {
        display: block;
    }

    .sec-solutions .intro,
    .sec-solutions .news {
        width: 100%;
    }

    .sec-solutions .intro {
        display: block;
        min-height: 0;
        margin-bottom: calc(16 * var(--rpx));
    }

    .sec-solutions .intro .info {
        width: 100%;
        padding: calc(32 * var(--rpx)) calc(24 * var(--rpx));
    }

    .sec-solutions .intro .info::after {
        left: calc(24 * var(--rpx));
        top: calc(80 * var(--rpx));
    }

    .sec-solutions .intro .pic {
        width: 100%;
        height: calc(360 * var(--rpx));
    }

    .cta-follow {
        width: 100%;
        margin-top: calc(32 * var(--rpx));
    }

    .site-footer .follow {
        margin-top: calc(16 * var(--rpx));
        justify-content: flex-start;
    }

    .footer-nav {
        flex-wrap: wrap;
        gap: calc(24 * var(--rpx));
    }

    .footer-divider {
        display: none;
    }

    .footer-info {
        padding: calc(32 * var(--rpx)) 0 0;
        border-left: 0;
        width: 100%;
        min-width: 0;
    }

    .footer-info .row-text {
        grid-template-columns: max-content 1fr;
        min-width: 0;
        flex: 1;
    }

    .footer-info .row-text .v {
        white-space: normal;
    }

    .news-card,
    .news-card.featured {
        width: 100%;
        height: auto;
        margin-right: 0;
    }

    .news-card .pic,
    .news-card.featured .pic {
        height: auto;
        aspect-ratio: 16 / 9;
    }

    .news-card.featured {
        height: auto;
    }

    .news-card.featured .pic {
        height: auto;
    }

    .news-card.featured .date,
    .news-card.featured .news-title {
        position: absolute;
    }

    .news-nav {
        position: static;
        justify-content: flex-end;
        margin-top: calc(16 * var(--rpx));
        right: auto;
        top: auto;
    }

    .site-float {
        right: calc(12 * var(--rpx));
        gap: calc(8 * var(--rpx));
    }

    .site-float-item {
        width: calc(44 * var(--rpx));
        height: calc(44 * var(--rpx));
    }

    .site-float-top {
        margin-top: calc(-8 * var(--rpx));
    }

    .site-float-top.is-visible {
        max-height: calc(44 * var(--rpx));
        margin-top: 0;
    }

    .page-about .hero,
    .page-news .hero,
    .page-contact .hero {
        height: auto;
        min-height: calc(520 * var(--rpx));
    }

    .page-about .hero-fg,
    .page-news .hero-fg,
    .page-contact .hero-fg {
        transform: none;
        padding: calc(40 * var(--rpx)) 0;
    }

    .inner-nav-tabs,
    .page-news .inner-nav-tabs {
        gap: calc(28 * var(--rpx));
    }

    .page-news .page-crumb .crumb {
        justify-content: flex-start;
        flex-wrap: wrap;
    }

    .news-featured {
        display: block;
        height: auto;
    }

    .news-featured .pic {
        width: 100%;
        height: calc(360 * var(--rpx));
    }

    .news-featured .info {
        padding: calc(28 * var(--rpx)) calc(20 * var(--rpx)) calc(32 * var(--rpx));
    }

    .news-featured .more {
        margin-top: calc(24 * var(--rpx));
    }

    .news-list {
        display: block;
        margin-top: calc(32 * var(--rpx));
    }

    .news-list li {
        margin-bottom: calc(24 * var(--rpx));
    }

    .news-item {
        height: auto;
    }

    .news-item .more {
        margin-top: calc(24 * var(--rpx));
        margin-bottom: calc(24 * var(--rpx));
    }

    .news-pager {
        flex-wrap: wrap;
        gap: calc(12 * var(--rpx));
    }

    .news-article > .crumb {
        position: static;
        right: auto;
        padding: calc(16 * var(--rpx)) 0 0;
        justify-content: flex-start;
    }

    .news-article > .crumb .is-current {
        max-width: 100%;
        white-space: normal;
    }

    .news-article-title {
        font-size: calc(32 * var(--fpx-50));
        line-height: 1.35;
    }

    .news-article-pic {
        width: 100%;
        height: auto;
        aspect-ratio: 800 / 450;
    }

    .news-article-pager {
        display: block;
    }

    .news-article-pager::before {
        display: none;
    }

    .news-article-pager a {
        width: 100%;
    }

    .pager-prev,
    .pager-next {
        padding-left: 0;
        padding-right: 0;
    }

    .pager-next {
        margin-top: calc(20 * var(--rpx));
        padding-top: calc(20 * var(--rpx));
        border-top: 1px solid rgba(0, 0, 0, 0.15);
    }

    .news-related-head {
        display: block;
    }

    .news-related-head .btn-more {
        margin-top: calc(16 * var(--rpx));
    }

    .news-related-title {
        font-size: calc(32 * var(--fpx-50));
        line-height: 1.3;
    }

    .page-crumb .crumb {
        justify-content: flex-start;
        flex-wrap: wrap;
    }

    .material-list,
    .app-list,
    .why-list {
        display: block;
    }

    .material-list li,
    .material-list li:last-child,
    .app-card,
    .why-card {
        width: 100%;
    }

    .material-list li {
        margin-bottom: calc(12 * var(--rpx));
    }

    .app-card {
        height: calc(220 * var(--rpx));
        margin-bottom: calc(16 * var(--rpx));
    }

    .why-card {
        margin-bottom: calc(16 * var(--rpx));
    }

    .contact-main {
        padding-bottom: calc(24 * var(--rpx));
    }

    .contact-bg {
        width: 100%;
    }

    .page-contact .page-crumb .crumb {
        justify-content: flex-end;
    }

    .contact-row {
        --contact-pad-top: calc(56 * var(--rpx));
        --contact-name-gap: calc(24 * var(--rpx));
        padding: var(--contact-pad-top) 0 0;
    }

    .contact-info {
        width: 100%;
        padding-bottom: calc(40 * var(--rpx));
    }

    .contact-figure {
        position: static;
        top: auto;
        right: auto;
        width: 100%;
        height: auto;
        aspect-ratio: 960 / 640;
        margin: calc(32 * var(--rpx)) 0 0;
    }

    .contact-follow {
        flex-wrap: wrap;
        gap: calc(12 * var(--rpx));
    }

    .sol-body {
        display: block;
    }

    .sol-side {
        position: sticky;
        top: var(--header-height);
        z-index: 21;
        border-right: 0;
        padding: calc(8 * var(--rpx)) 0;
        background: #fff;
    }

    .sol-side-nav {
        flex-direction: column;
        flex-wrap: nowrap;
        overflow: visible;
        gap: calc(12 * var(--rpx));
        padding-bottom: 0;
    }

    .sol-side-title {
        font-size: calc(16 * var(--fpx));
        margin-bottom: calc(16 * var(--rpx));
    }

    .sol-side-link {
        font-size: calc(16 * var(--fpx));
    }

    .sol-side-item.is-current .sol-side-link::before {
        display: none;
    }

    .sol-side-nav a {
        flex-shrink: 1;
        min-height: 0;
        padding: 0;
        border-bottom: 0;
        font-size: inherit;
    }

    .sol-side-nav a.is-current {
        background: transparent;
        color: inherit;
    }

    .sol-side-cta {
        display: none;
    }

    .sol-hero {
        display: block;
        min-height: 0;
    }

    .sol-hero-info {
        padding: calc(28 * var(--rpx)) 0 calc(20 * var(--rpx));
    }

    .sol-hero-info .icon {
        margin-bottom: calc(12 * var(--rpx));
    }

    .sol-hero-info h1 {
        font-size: calc(36 * var(--fpx-50));
        line-height: 1.3;
    }

    .sol-hero-info .lead {
        font-size: calc(16 * var(--fpx));
        line-height: calc(26 * var(--rpx));
    }

    .sol-hero-figure {
        min-height: 0;
        aspect-ratio: 780 / 425;
    }

    .sol-inner-nav {
        height: calc(48 * var(--rpx));
        top: calc(var(--header-height) + 56 * var(--rpx));
        z-index: 20;
    }

    .site-header.is-compact ~ .page .sol-side {
        top: var(--header-height);
    }

    .site-header.is-compact ~ .page .sol-inner-nav {
        top: calc(var(--header-height) + 56 * var(--rpx));
    }

    .sol-inner-nav-tabs {
        gap: calc(28 * var(--rpx));
        padding: 0;
    }

    .sol-intro,
    .sol-adv {
        padding: calc(32 * var(--rpx)) 0 calc(40 * var(--rpx));
    }

    .sol-apps {
        padding: 0;
    }

    .sol-intro h2,
    .sol-apps h2,
    .sol-adv h2,
    .prod-standard h2,
    .prod-series h2,
    .prod-note h2 {
        font-size: calc(28 * var(--fpx-50));
        line-height: 1.35;
    }

    .sol-apps h2 {
        width: 100%;
        padding: calc(32 * var(--rpx)) calc(20 * var(--rpx)) 0;
    }

    .sol-app {
        padding: calc(32 * var(--rpx)) calc(20 * var(--rpx));
    }

    .sol-app-card {
        width: 100%;
        min-height: calc(300 * var(--rpx));
    }

    .sol-app .pic {
        width: calc(393 * var(--rpx));
        max-width: 36%;
        height: auto;
        align-self: stretch;
    }

    .sol-app-body {
        padding: calc(20 * var(--rpx));
    }

    .sol-app-row {
        display: block;
        margin-top: calc(12 * var(--rpx));
    }

    .sol-app .info {
        padding: 0;
    }

    .sol-app-spec {
        width: 100%;
        padding: calc(16 * var(--rpx)) 0 0;
    }

    .sol-adv-list {
        display: block;
    }

    .sol-adv-list li {
        margin-bottom: calc(16 * var(--rpx));
        min-height: 0;
    }
}