/* ============================================================
   MOBILE OPTIMIZATION PATCH - airmie.com Homepage
   Date: 2026-05-14
   Purpose: 
   - Restore swiper carousels on mobile (Scene, Solutions, Success Stories)
   - Fix banner, footer, case section overflow
   - Collapse News section
   - Reduce total page height from 52000px to ~5000px on mobile
   ============================================================ */

@media screen and (max-width: 768px) {

    /* ============================================================
       1. BANNER FIX - restore visibility with proper height
       ============================================================ */
    .indexBanner {
        height: auto !important;
        min-height: 200px !important;
        overflow: visible !important;
    }

    .indexBnnerContainer {
        height: auto !important;
        min-height: 200px !important;
    }

    .indexBanner .swiper-container,
    .indexBannerSwiper {
        height: 220px !important;
        overflow: hidden !important;
    }

    .indexBannerSwiper .swiper-wrapper {
        display: flex !important;
        flex-wrap: nowrap !important;
        height: 220px !important;
    }

    #indexBannerSwiper .swiper-slide,
    #indexBannerSwiper .swiper-slide[style],
    .indexBannerSwiper .swiper-slide {
        display: block !important;
        flex-shrink: 0 !important;
        width: 100% !important;
        height: 220px !important;
    }

    #indexBannerSwiper .swiper-slide .itemContainer,
    .indexBannerSwiper .swiper-slide .itemContainer {
        width: 100% !important;
        height: 220px !important;
        background-size: cover !important;
        background-position: center !important;
    }

    /* ============================================================
       2. SWIPER CAROUSELS - restore horizontal sliding on mobile
       Override the previous mobile CSS that killed swipers.
       Use high-specificity selectors to beat global .swiper-wrapper rules.
       ============================================================ */

    /* UNDO global swiper kill for specific carousels we want active */
    #indexBannerSwiper .swiper-wrapper,
    #proIntroductionSwiper .swiper-wrapper,
    #solutionCaseSwiper .swiper-wrapper,
    #successCaseSwiper .swiper-wrapper,
    #indexBannerSwiper.swiper-container .swiper-wrapper,
    #proIntroductionSwiper.swiper-container .swiper-wrapper,
    #solutionCaseSwiper.swiper-container .swiper-wrapper,
    #successCaseSwiper.swiper-container .swiper-wrapper,
    .indexBannerSwiper .swiper-wrapper[style],
    .proIntroductionSwiper .swiper-wrapper[style],
    .solutionCaseSwiper .swiper-wrapper[style],
    .successCaseSwiper .swiper-wrapper[style] {
        display: flex !important;
        flex-wrap: nowrap !important;
        width: unset !important;
        height: unset !important;
    }

    #indexBannerSwiper .swiper-slide,
    #proIntroductionSwiper .swiper-slide,
    #solutionCaseSwiper .swiper-slide,
    #successCaseSwiper .swiper-slide,
    #indexBannerSwiper.swiper-container .swiper-slide,
    #proIntroductionSwiper.swiper-container .swiper-slide,
    #solutionCaseSwiper.swiper-container .swiper-slide,
    #successCaseSwiper.swiper-container .swiper-slide,
    #indexBannerSwiper .swiper-slide[style],
    #proIntroductionSwiper .swiper-slide[style],
    #solutionCaseSwiper .swiper-slide[style],
    #successCaseSwiper .swiper-slide[style] {
        flex-shrink: 0 !important;
        display: block !important;
    }

    /* Scene Selection */
    .proIntroduction .swiper-container,
    #proIntroductionSwiper {
        width: 100% !important;
        height: 280px !important;
        overflow: hidden !important;
    }

    #proIntroductionSwiper .swiper-slide,
    #proIntroductionSwiper .swiper-slide[style] {
        width: 100% !important;
        height: 260px !important;
        margin-right: 0 !important;
    }

    #proIntroductionSwiper .swiper-slide .infoGroup {
        width: 100% !important;
        height: 100% !important;
        overflow: hidden !important;
        border-radius: 8px;
    }

    #proIntroductionSwiper .swiper-slide .infoGroup img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }

    .proIntroduction .row-main {
        overflow: hidden !important;
    }

    /* Solutions */
    .solutionCase .swiper-container,
    #solutionCaseSwiper {
        width: 100% !important;
        height: 300px !important;
        overflow: hidden !important;
    }

    #solutionCaseSwiper .swiper-slide,
    #solutionCaseSwiper .swiper-slide[style] {
        width: 100% !important;
        height: 280px !important;
        margin-right: 0 !important;
    }

    #solutionCaseSwiper .swiper-slide .itemContainer {
        width: 100% !important;
        height: 100% !important;
        background-size: cover !important;
        background-position: center !important;
        border-radius: 8px;
        overflow: hidden !important;
    }

    #solutionCaseSwiper .swiper-slide .infoGroup {
        width: 100% !important;
    }

    .solutionCase .row-main {
        overflow: hidden !important;
    }

    /* Success Stories - logo card carousel */
    .successCase .row-main {
        height: 180px !important;
        overflow: hidden !important;
    }

    .successCase .swiper-container,
    #successCaseSwiper {
        width: 100% !important;
        height: 160px !important;
        overflow: hidden !important;
    }

    #successCaseSwiper .swiper-slide,
    #successCaseSwiper .swiper-slide[style] {
        width: 100% !important;
        height: 140px !important;
        margin-right: 0 !important;
    }

    #successCaseSwiper .swiper-slide .itemContainer {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        grid-template-columns: none !important;
        width: 100% !important;
        height: 100% !important;
        border: 1px solid #eee !important;
        border-radius: 8px !important;
        background: #fff !important;
    }

    #successCaseSwiper .swiper-slide .basicInfo {
        width: auto !important;
        height: auto !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    #successCaseSwiper .swiper-slide .basicInfo img {
        width: auto !important;
        max-width: 180px !important;
        height: auto !important;
        max-height: 60px !important;
        object-fit: contain !important;
    }

    #successCaseSwiper .swiper-slide .moreInfo {
        display: block !important;
        text-align: center !important;
        margin-top: 10px !important;
        overflow: hidden !important;
    }

    #successCaseSwiper .swiper-slide .moreInfo .case-title {
        font-size: 14px !important;
        font-weight: 600 !important;
        color: #333 !important;
        margin: 0 !important;
    }

    #successCaseSwiper .swiper-slide .moreInfo .case-key,
    #successCaseSwiper .swiper-slide .moreInfo .case-desc,
    #successCaseSwiper .swiper-slide .moreInfo p {
        display: none !important;
    }

    /* Case detail overlay - fix overflow */
    .successCase .row-foot,
    .successCase .currentCaseInfo {
        display: none !important;
    }
    .successCase .currentCaseInfo {
        width: 100% !important;
        max-width: 100% !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
        padding: 0 10px !important;
    }

    .successCase .caseBigImg {
        width: 100% !important;
        max-width: 100% !important;
        overflow: hidden !important;
    }

    .successCase .caseBigImg img {
        width: 100% !important;
        height: auto !important;
        object-fit: contain !important;
    }

    .successCase .row-foot {
        width: 100% !important;
        overflow: hidden !important;
    }

    /* ============================================================
       3. NEWS SECTION - collapse to 4 items, hide grid view
       ============================================================ */
    .newsInformation .row-main {
        max-height: 600px !important;
        overflow: hidden !important;
    }

    .newsInformation .newsListContainer {
        max-height: none !important;
    }

    /* Hide news swiper, show as simple list */
    .newsInformation .newsInformationSwiper .swiper-wrapper {
        display: block !important;
        width: 100% !important;
        height: auto !important;
        transform: none !important;
    }

    .newsInformation .newsInformationSwiper .swiper-slide {
        width: 100% !important;
        height: auto !important;
        display: block !important;
    }

    /* Hide items beyond 4th */
    .newsInformation .newsInformationSwiper .swiper-slide:nth-child(n+5) {
        display: none !important;
    }

    /* Hide grid view entirely on mobile */
    .newsInformation .dataType-grid {
        display: none !important;
    }

    /* Also handle grid view items */
    .newsInformation .dataType-grid .gridItem:nth-child(n+5) {
        display: none !important;
    }

    /* News list items - fix padding overflow */
    .newsInformation .dataType-list .item {
        padding: 15px 10px !important;
        box-sizing: border-box !important;
        width: 100% !important;
    }

    .newsInformation .dataType-list .item .item-left {
        width: 60px !important;
    }

    .newsInformation .dataType-list .item .item-middle {
        flex: 1 !important;
        min-width: 0 !important;
        overflow: hidden !important;
    }

    .newsInformation .dataType-list .item .item-right {
        width: auto !important;
    }

    /* News type tabs - horizontal scroll */
    .newsInformation .newsType .list {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        padding-bottom: 5px !important;
    }

    .newsInformation .newsType .list .item {
        flex-shrink: 0 !important;
        width: auto !important;
        margin-right: 10px !important;
    }

    /* View more button (injected by JS) */
    .mobile-news-more {
        display: block !important;
        text-align: center;
        padding: 15px;
        margin-top: 10px;
    }

    .mobile-news-more a {
        display: inline-block;
        padding: 12px 30px;
        background: #f5a500;
        color: #fff;
        border-radius: 25px;
        font-size: 14px;
        text-decoration: none;
        font-weight: 500;
    }

    /* Hide grid/list toggle on mobile */
    .newsTypeSwitch {
        display: none !important;
    }

    /* ============================================================
       4. FOOTER FIX - prevent overflow
       ============================================================ */
    .footer {
        width: 100% !important;
        max-width: 100vw !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }

    .footer .wrapper {
        width: 100% !important;
        max-width: 100% !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
        padding: 0 15px !important;
    }

    .footer .footer-top {
        width: 100% !important;
        max-width: calc(100vw - 30px) !important;
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
        padding: 0 !important;
        position: relative !important;
    }

    .footer .footer-top > * {
        width: 100% !important;
        max-width: calc(100vw - 30px) !important;
        box-sizing: border-box !important;
    }

    .footer .companyInfo {
        width: 100% !important;
        max-width: calc(100vw - 30px) !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
        margin-bottom: 20px !important;
        position: static !important;
    }

    .footer .companyInfo > *,
    .footer .companyInfo .basicInfo {
        width: 100% !important;
        max-width: calc(100vw - 30px) !important;
        box-sizing: border-box !important;
    }

    .footer .companyInfo .basicInfo .infoGroup {
        width: 100% !important;
        max-width: calc(100vw - 30px) !important;
        box-sizing: border-box !important;
    }

    .footer .companyInfo .otherInfo {
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
    }

    .footer .companyInfo .otherInfo .infoGroup {
        width: 100% !important;
    }

    .footer .quickNavs {
        width: 100% !important;
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 15px !important;
    }

    .footer .quickNavs .navGroup {
        width: 100% !important;
        float: none !important;
    }

    .footer .quickNavs .navGroup .list .item {
        width: 100% !important;
    }

    .footer .weixin {
        position: static !important;
        width: 100% !important;
        max-width: calc(100vw - 30px) !important;
        text-align: center !important;
        margin-top: 20px !important;
    }

    /* ============================================================
       5. PRODUCT PHOTOGRAPHY / VIDEO / DESIGN - card carousel
       ============================================================ */
    .developCloud .row-main .list,
    .applyCloud .row-main .list,
    .operationalAdvisory .row-main .list {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        scroll-snap-type: x mandatory !important;
        gap: 12px !important;
        padding: 0 10px 15px !important;
    }

    .developCloud .row-main .list > .item,
    .applyCloud .row-main .list > .item,
    .operationalAdvisory .row-main .list > .item {
        flex: 0 0 85% !important;
        width: 85% !important;
        scroll-snap-align: start !important;
        float: none !important;
        display: block !important;
        margin-bottom: 0 !important;
    }

    /* ============================================================
       6. ABOUT SECTION - collapse text + compact stats
       ============================================================ */
    .whoIsFec .row-main {
        max-height: 320px !important;
        overflow: hidden !important;
        position: relative !important;
    }

    .whoIsFec .row-main.expanded {
        max-height: none !important;
    }

    /* Fade-out gradient when collapsed */
    .whoIsFec .row-main::after {
        content: '' !important;
        display: block !important;
        position: absolute !important;
        bottom: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 80px !important;
        background: linear-gradient(transparent, #fff) !important;
        pointer-events: none !important;
    }

    .whoIsFec .row-main.expanded::after {
        display: none !important;
    }

    /* Read more button (injected by JS) */
    .mobile-about-toggle {
        display: block !important;
        text-align: center !important;
        padding: 10px 0 20px !important;
    }

    .mobile-about-toggle a {
        display: inline-block;
        padding: 8px 24px;
        border: 1px solid #f5a500;
        color: #f5a500;
        border-radius: 20px;
        font-size: 13px;
        text-decoration: none;
        cursor: pointer;
    }

    /* Stats - horizontal scroll carousel */
    .whoIsFec .row-foot .list {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        scroll-snap-type: x mandatory !important;
        gap: 12px !important;
        padding: 10px 15px 15px !important;
    }

    .whoIsFec .row-foot .list > li {
        flex: 0 0 70% !important;
        width: 70% !important;
        scroll-snap-align: start !important;
        float: none !important;
        display: block !important;
        margin-bottom: 0 !important;
        height: auto !important;
    }

    /* ============================================================
       7. GENERAL - prevent any horizontal overflow
       ============================================================ */
    .mainer {
        overflow-x: hidden !important;
    }

    /* Section titles - compact */
    .row-head {
        padding: 20px 15px 10px !important;
    }

    .row-head .title {
        font-size: 22px !important;
        margin-bottom: 5px !important;
    }

    .row-head .description {
        font-size: 13px !important;
        line-height: 1.5 !important;
    }

    /* Swiper pagination dots - show for carousels */
    .proIntroductionSwiper .swiper-pagination,
    .solutionCaseSwiper .swiper-pagination,
    .successCaseSwiper .swiper-pagination {
        display: block !important;
        position: relative !important;
        margin-top: 10px !important;
        text-align: center !important;
    }
}

/* ============================================================
   MOBILE OPTIMIZATION PATCH #2 - Sub-pages + Homepage fixes
   Date: 2026-05-14
   Fixes: banner height, About cards, Photography grid,
          category tabs, footer columns
   ============================================================ */
@media screen and (max-width: 768px) {

    /* ============================================================
       A. SUB-PAGE BANNER — reduce height, proper background sizing
       innnerBanner (3 n) is used on Photography, Video, News pages
       ============================================================ */
    .innnerBanner,
    #innnerBanner {
        height: 180px !important;
        overflow: hidden !important;
    }

    .innnerBanner .indexBnnerContainer,
    #innnerBanner .indexBnnerContainer {
        height: 180px !important;
    }

    .innnerBannerSwiper,
    #innnerBannerSwiper {
        height: 180px !important;
        overflow: hidden !important;
    }

    #innnerBannerSwiper .swiper-wrapper,
    .innnerBannerSwiper .swiper-wrapper {
        height: 180px !important;
    }

    #innnerBannerSwiper .swiper-slide,
    .innnerBannerSwiper .swiper-slide,
    #innnerBannerSwiper .swiper-slide[style],
    .innnerBannerSwiper .swiper-slide[style] {
        width: 100% !important;
        height: 180px !important;
    }

    #innnerBannerSwiper .swiper-slide .itemContainer,
    .innnerBannerSwiper .swiper-slide .itemContainer {
        width: 100% !important;
        height: 180px !important;
        background-size: cover !important;
        background-position: center center !important;
    }

    /* Banner text overlay (if present) */
    .innnerBannerSwiper .txtGroup {
        padding: 30px 15px 0 !important;
    }

    .innnerBannerSwiper .txtGroup .txt-mainer {
        padding: 0 !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    .innnerBannerSwiper .txtGroup .txt-mainer h2,
    .innnerBannerSwiper .txtGroup .txt-mainer .title {
        font-size: 20px !important;
        line-height: 1.3 !important;
    }

    .innnerBannerSwiper .txtGroup .txt-footer {
        display: none !important;
    }

    /* ============================================================
       B. CATEGORY TABS (columnMainNav) — horizontal scroll
       Used on Photography, Video, News sub-pages
       ============================================================ */
    .columnMainNav,
    #caseTypeNav {
        height: auto !important;
        overflow: visible !important;
    }

    .columnMainNavContainer {
        height: auto !important;
    }

    .columnMainNavContainer .wrapper {
        height: auto !important;
        overflow: visible !important;
        padding: 0 !important;
    }

    .columnMainNavContainer .row-head {
        float: none !important;
        margin-right: 0 !important;
        padding: 10px 15px 0 !important;
    }

    .columnMainNavContainer .row-head .title {
        font-size: 20px !important;
        line-height: 1.4 !important;
    }

    .columnMainNavContainer .row-main {
        overflow: visible !important;
    }

    .columnMainNavContainer .row-main .list,
    .columnMainNavContainer .list {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        padding: 10px 15px !important;
        gap: 0 !important;
    }

    .columnMainNavContainer .list .item {
        float: none !important;
        flex-shrink: 0 !important;
        width: auto !important;
        margin-bottom: 0 !important;
    }

    .columnMainNavContainer .list .item .aItem {
        height: 40px !important;
        line-height: 40px !important;
        padding: 0 12px !important;
        font-size: 13px !important;
        white-space: nowrap !important;
    }

    /* ============================================================
       C. PHOTOGRAPHY / VIDEO WORKS GRID — single column
       .case-lighthouse .listContainer items are 300px float:left
       ============================================================ */
    .case-lighthouse .listContainer {
        margin-left: 0 !important;
        overflow: visible !important;
        padding: 0 15px !important;
    }

    .case-lighthouse .listContainer .list {
        margin-left: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 20px !important;
    }

    .case-lighthouse .listContainer .list .item {
        float: none !important;
        width: 100% !important;
        margin-left: 0 !important;
        margin-bottom: 0 !important;
    }

    .case-lighthouse .listContainer .list .item .imgContainer {
        width: 100% !important;
        height: 0 !important;
        padding-bottom: 65% !important;
        position: relative !important;
        overflow: hidden !important;
    }

    .case-lighthouse .listContainer .list .item .imgContainer .img {
        position: absolute !important;
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }

    .case-lighthouse .listContainer .list .item .txtContainer {
        padding: 12px !important;
    }

    .case-lighthouse .listContainer .list .item .txtContainer .titleBar {
        height: auto !important;
        padding-right: 0 !important;
    }

    .case-lighthouse .listContainer .list .item .txtContainer .titleBar .title .aItem {
        height: auto !important;
        line-height: 1.4 !important;
        font-size: 14px !important;
        white-space: normal !important;
        overflow: visible !important;
    }

    .case-lighthouse .listContainer .list .item .txtContainer .titleBar .ico-angle-right-circle-gray {
        display: none !important;
    }

    .case-lighthouse .listContainer .list .item .txtContainer .description {
        height: auto !important;
        line-height: 1.5 !important;
        font-size: 13px !important;
    }

    /* Page header in case-lighthouse */
    .case-lighthouse .pageHeader {
        padding: 0 15px !important;
        max-width: 100% !important;
    }

    .case-lighthouse .pageHeader .title {
        font-size: 22px !important;
    }

    /* Bottom description / recommend */
    .case-lighthouse .bottom-description,
    .case-lighthouse .bottom-recommend {
        padding: 15px !important;
    }

    .case-lighthouse .bottom-description p,
    .case-lighthouse .bottom-recommend-main {
        width: 100% !important;
        height: auto !important;
    }

    .case-lighthouse .bottom-recommend-main .linkinterest {
        float: none !important;
        width: 100% !important;
        margin: 10px 0 !important;
    }

    /* ============================================================
       D. HOMEPAGE ABOUT SECTION — image + text stack vertically
       .whoIsFec .freeData has a 526px floated image
       ============================================================ */
    .whoIsFec .row-main .freeData p[style*="float"] {
        float: none !important;
        margin: 0 0 15px 0 !important;
        text-align: center !important;
    }

    .whoIsFec .row-main .freeData p[style*="float"] img,
    .whoIsFec .row-main .freeData img {
        width: 100% !important;
        height: auto !important;
        max-width: 100% !important;
    }

    .whoIsFec .row-main .freeData p {
        padding: 0 15px !important;
        line-height: 1.7 !important;
        font-size: 15px !important;
    }

    /* Stats row — 2 columns on mobile */
    .whoIsFec .row-foot .list {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 15px !important;
        padding: 0 15px !important;
        overflow: visible !important;
    }

    .whoIsFec .row-foot .list .item,
    .whoIsFec .row-foot .list > li {
        float: none !important;
        width: 100% !important;
        padding: 0 !important;
        text-align: center !important;
    }

    .whoIsFec .row-foot .item .numberContainer {
        width: 100% !important;
        padding: 20px 10px !important;
        margin: 0 auto 10px !important;
    }

    .whoIsFec .row-foot .item .numberContainer .number {
        font-size: 28px !important;
    }

    .whoIsFec .row-foot .item .destion {
        font-size: 12px !important;
        line-height: 1.5 !important;
        padding: 0 5px !important;
    }

    /* ============================================================
       E. FOOTER — stack columns vertically
       ============================================================ */
    .footer .footer-top {
        display: flex !important;
        flex-direction: column !important;
    }

    .footer .companyInfo {
        width: 100% !important;
        float: none !important;
        margin-bottom: 25px !important;
    }

    .footer .quickNavs {
        width: 100% !important;
        float: none !important;
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 20px !important;
    }

    .footer .quickNavs .navGroup {
        width: 100% !important;
        float: none !important;
        margin: 0 !important;
    }

    .footer .quickNavs .navGroup .nav-head .title {
        font-size: 14px !important;
        margin-bottom: 8px !important;
    }

    .footer .quickNavs .navGroup .nav-main .list .item {
        width: 100% !important;
        float: none !important;
        margin-bottom: 5px !important;
    }

    .footer .quickNavs .navGroup .nav-main .list .item .aItem {
        font-size: 12px !important;
        line-height: 1.8 !important;
    }

    .footer .weixin {
        position: static !important;
        width: 100% !important;
        text-align: center !important;
        margin-top: 20px !important;
        float: none !important;
    }

    .footer .footer-bottom {
        width: 100% !important;
        padding: 15px !important;
        text-align: center !important;
    }

    .footer .footer-bottom .wrapper {
        padding: 0 !important;
    }

    /* ============================================================
       F. NEWS PAGE — hero card + list items responsive
       ============================================================ */
    .newsFirst {
        padding: 0 15px !important;
    }

    .newsFirst .item-img,
    .newsFirst .imgContainer {
        width: 100% !important;
        height: auto !important;
    }

    .newsFirst .item-img img,
    .newsFirst .imgContainer img {
        width: 100% !important;
        height: auto !important;
    }

    .newsFirst .item-txt,
    .newsFirst .txtContainer {
        padding: 15px 0 !important;
    }

    .newsFirst .item-txt .title,
    .newsFirst .txtContainer .title {
        font-size: 18px !important;
        line-height: 1.4 !important;
        height: auto !important;
        overflow: visible !important;
    }

    .newsFirst .item-txt .destion,
    .newsFirst .txtContainer .destion {
        height: auto !important;
        line-height: 1.6 !important;
        font-size: 14px !important;
        -webkit-line-clamp: 3 !important;
        display: -webkit-box !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
    }

    /* News list items */
    .newsListContainer {
        padding: 0 15px !important;
    }

    .newsListContainer .list .item {
        display: flex !important;
        align-items: flex-start !important;
        padding: 15px 0 !important;
        border-bottom: 1px solid #eee !important;
        width: 100% !important;
        float: none !important;
    }

    .newsListContainer .list .item .item-left .timeGroup {
        text-align: center !important;
    }

    .newsListContainer .list .item .item-middle {
        flex: 1 !important;
        min-width: 0 !important;
        padding: 0 10px !important;
    }

    .newsListContainer .list .item .item-middle .title {
        height: auto !important;
        overflow: visible !important;
    }

    .newsListContainer .list .item .item-middle .title a {
        font-size: 14px !important;
        line-height: 1.4 !important;
    }

    .newsListContainer .list .item .item-middle .destion {
        height: auto !important;
        max-height: 40px !important;
        overflow: hidden !important;
        font-size: 13px !important;
        line-height: 1.5 !important;
    }

    .newsListContainer .list .item .item-right {
        display: none !important;
    }

    /* ============================================================
       G. BREADCRUMB — wrap properly
       ============================================================ */
    .breadNav {
        padding: 10px 15px !important;
    }

    .breadNav .navGroup {
        display: flex !important;
        flex-wrap: wrap !important;
    }

    .breadNav .nav-label,
    .breadNav .nav-list {
        font-size: 12px !important;
    }

    /* ============================================================
       H. GENERAL FIXES
       ============================================================ */
    .mainerRow .wrapper,
    .case-lighthouse .wrapper {
        padding: 0 !important;
        width: 100% !important;
    }

    /* Hide pagination on sub-page banners */
    .innnerBannerSwiper .pagination,
    .innnerBannerSwiper .btnLeft,
    .innnerBannerSwiper .btnRight {
        display: none !important;
    }
}

/* ============================================================
   MOBILE OPTIMIZATION PATCH #3 - Fix itemContainer grid override
   Date: 2026-05-14
   Problem: mobile-responsive.css sets .itemContainer to grid 1fr 1fr
   which makes case-lighthouse items show image+text side by side.
   Also fix homepage banner black bars (indexBanner width issue).
   ============================================================ */
@media screen and (max-width: 768px) {

    /* Override the global .itemContainer grid for case-lighthouse */
    .case-lighthouse .listContainer .list .item .itemContainer,
    .case-lighthouse .listContainer .list .item dl.itemContainer {
        display: block !important;
        grid-template-columns: none !important;
        width: 100% !important;
        height: auto !important;
        overflow: visible !important;
        position: relative !important;
    }

    /* imgContainer should be full width block */
    .case-lighthouse .listContainer .list .item .itemContainer .imgContainer,
    .case-lighthouse .listContainer .list .item .itemContainer dt.imgContainer {
        display: block !important;
        width: 100% !important;
        height: 0 !important;
        padding-bottom: 65% !important;
        position: relative !important;
        overflow: hidden !important;
        float: none !important;
    }

    .case-lighthouse .listContainer .list .item .itemContainer .imgContainer .aItem {
        display: block !important;
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
    }

    .case-lighthouse .listContainer .list .item .itemContainer .imgContainer .img {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }

    /* txtContainer below image, full width */
    .case-lighthouse .listContainer .list .item .itemContainer .txtContainer,
    .case-lighthouse .listContainer .list .item .itemContainer dd.txtContainer {
        display: block !important;
        width: 100% !important;
        padding: 12px 0 !important;
        position: static !important;
        float: none !important;
    }

    .case-lighthouse .listContainer .list .item .itemContainer .txtContainer .titleBar {
        height: auto !important;
        padding-right: 0 !important;
        position: static !important;
    }

    .case-lighthouse .listContainer .list .item .itemContainer .txtContainer .titleBar .title {
        height: auto !important;
    }

    .case-lighthouse .listContainer .list .item .itemContainer .txtContainer .titleBar .title .aItem {
        display: block !important;
        height: auto !important;
        line-height: 1.4 !important;
        font-size: 14px !important;
        white-space: normal !important;
        overflow: visible !important;
        word-break: normal !important;
        overflow-wrap: break-word !important;
    }

    /* lineContainer full width */
    .case-lighthouse .listContainer .list .item .itemContainer .lineContainer,
    .case-lighthouse .listContainer .list .item .itemContainer dd.lineContainer {
        display: block !important;
        width: 100% !important;
        float: none !important;
    }

    /* ============================================================
       Homepage banner — ensure full viewport width
       The indexBanner has inline styles from swiper that constrain width
       ============================================================ */
    .indexBanner,
    .indexBnnerContainer,
    #indexBannerSwiper,
    .indexBannerSwiper {
        width: 100vw !important;
        max-width: 100vw !important;
        margin-left: calc(-50vw + 50%) !important;
    }

    /* Fix: whoIsFec image float override needs higher specificity */
    .whoIsFec .row-main .freeData p {
        float: none !important;
    }

    .whoIsFec .row-main .freeData p img[width] {
        width: 100% !important;
        height: auto !important;
    }
}

/* ============================================================
   MOBILE OPTIMIZATION PATCH #4 - News page + mainerRow fix
   Date: 2026-05-14
   ============================================================ */
@media screen and (max-width: 768px) {

    /* mainerRow layout — remove fixed widths and floats */
    .mainerRow {
        padding: 20px 0 !important;
    }

    .mainerRow-left {
        float: none !important;
        width: 100% !important;
    }

    .mainerRow-right {
        float: none !important;
        width: 100% !important;
        margin-top: 20px !important;
    }

    /* ============================================================
       NEWS HERO CARD — stack image above text
       Original: padding-left:436px, row-img absolute left
       ============================================================ */
    .newsListPage .newsFirst {
        height: auto !important;
        padding-left: 0 !important;
        position: relative !important;
        margin-bottom: 20px !important;
        padding: 0 15px !important;
    }

    .newsListPage .newsFirst .row-img {
        position: static !important;
        width: 100% !important;
        margin-bottom: 12px !important;
    }

    .newsListPage .newsFirst .row-img .aItem {
        display: block !important;
    }

    .newsListPage .newsFirst .row-img .img {
        width: 100% !important;
        height: auto !important;
        display: block !important;
    }

    .newsListPage .newsFirst .row-txt .time {
        font-size: 14px !important;
        margin-bottom: 8px !important;
        color: #0178d9 !important;
    }

    .newsListPage .newsFirst .row-txt .title .aItem {
        display: block !important;
        height: auto !important;
        line-height: 1.4 !important;
        overflow: visible !important;
        font-size: 16px !important;
        white-space: normal !important;
    }

    .newsListPage .newsFirst .row-txt .description {
        height: auto !important;
        max-height: 72px !important;
        overflow: hidden !important;
        line-height: 1.6 !important;
        font-size: 14px !important;
        margin-bottom: 12px !important;
    }

    .newsListPage .newsFirst .row-txt .action .btn-view {
        width: 100% !important;
        max-width: 200px !important;
    }

    /* ============================================================
       NEWS LIST ITEMS — remove absolute positioning, stack content
       Original: padding 30px 150px 30px 120px, item-left absolute
       ============================================================ */
    .newsListContainer {
        padding: 0 15px !important;
        margin-bottom: 30px !important;
    }

    .newsListContainer .list .item {
        position: relative !important;
        min-height: auto !important;
        padding: 15px 0 !important;
        border-bottom: 1px solid #eee !important;
        display: flex !important;
        align-items: flex-start !important;
        gap: 12px !important;
    }

    .newsListContainer .list .item .item-left {
        position: static !important;
        flex-shrink: 0 !important;
    }

    .newsListContainer .list .item .item-left .timeGroup {
        width: 60px !important;
        height: auto !important;
        padding: 8px 5px !important;
        text-align: center !important;
        background: #f2f2f2 !important;
    }

    .newsListContainer .list .item .item-left .timeGroup .day {
        font-size: 20px !important;
        padding-top: 0 !important;
        padding-bottom: 2px !important;
    }

    .newsListContainer .list .item .item-left .timeGroup .month {
        font-size: 11px !important;
    }

    .newsListContainer .list .item .item-left .timeGroup .year {
        display: none !important;
    }

    .newsListContainer .list .item .item-middle {
        flex: 1 !important;
        min-width: 0 !important;
    }

    .newsListContainer .list .item .item-middle .detailContainer {
        width: 100% !important;
        margin-left: 0 !important;
    }

    .newsListContainer .list .item .item-middle .title {
        height: auto !important;
        line-height: 1.4 !important;
        overflow: visible !important;
        margin-bottom: 6px !important;
    }

    .newsListContainer .list .item .item-middle .title .aItem {
        font-size: 14px !important;
        line-height: 1.4 !important;
    }

    .newsListContainer .list .item .item-middle .destion {
        height: auto !important;
        max-height: 40px !important;
        overflow: hidden !important;
        font-size: 13px !important;
        line-height: 1.5 !important;
    }

    .newsListContainer .list .item .item-right {
        position: static !important;
        display: none !important;
    }

    .newsListContainer .list .item:hover .item-middle .detailContainer {
        margin-left: 0 !important;
    }

    /* ============================================================
       HOMEPAGE BANNER — fix black bars
       The indexBanner wrapper has fixed 1440px from fui.css
       ============================================================ */
    .indexBanner {
        width: 100% !important;
        overflow: hidden !important;
    }

    .indexBanner .indexBnnerContainer {
        width: 100% !important;
    }

    #indexBannerSwiper {
        width: 100% !important;
    }

    #indexBannerSwiper .swiper-slide .itemContainer {
        width: 100% !important;
        background-size: cover !important;
        background-position: center !important;
    }

    /* Remove the calc margin that causes offset */
    .indexBanner,
    .indexBnnerContainer,
    #indexBannerSwiper {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}
/* ============================================================
   PATCH 5 - Fix stats cards to single column + banner text
   ============================================================ */

/* Stats cards - single column for readability */
@media screen and (max-width: 768px) {
    .whoIsFec .row-foot .list {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 20px !important;
        padding: 0 15px !important;
        overflow: visible !important;
    }

    .whoIsFec .row-foot .list .item,
    .whoIsFec .row-foot .list > li {
        float: none !important;
        width: 100% !important;
        padding: 15px !important;
        text-align: left !important;
        display: flex !important;
        align-items: flex-start !important;
        gap: 15px !important;
        background: #f8f8f8 !important;
        border-radius: 8px !important;
    }

    .whoIsFec .row-foot .item .numberContainer {
        flex-shrink: 0 !important;
        width: auto !important;
        padding: 0 !important;
        margin: 0 !important;
        text-align: center !important;
        min-width: 60px !important;
    }

    .whoIsFec .row-foot .item .numberContainer .number {
        font-size: 32px !important;
        line-height: 1.2 !important;
    }

    .whoIsFec .row-foot .item .numberContainer .tips {
        font-size: 11px !important;
        margin-top: 4px !important;
    }

    .whoIsFec .row-foot .item .destion {
        font-size: 13px !important;
        line-height: 1.6 !important;
        padding: 0 !important;
        color: #666 !important;
    }

    /* About section - float image fix */
    .whoIsFec .freeData p[style*="float"] {
        float: none !important;
        margin: 0 0 15px 0 !important;
        text-align: center !important;
    }

    .whoIsFec .freeData p[style*="float"] img {
        width: 100% !important;
        height: auto !important;
        max-width: 100% !important;
    }

    /* News tabs - add scroll hint gradient */
    .columnMainNav .list {
        position: relative !important;
    }

    .columnMainNav {
        position: relative !important;
    }

    .columnMainNav::after {
        content: '' !important;
        position: absolute !important;
        right: 0 !important;
        top: 0 !important;
        bottom: 0 !important;
        width: 30px !important;
        background: linear-gradient(to right, transparent, white) !important;
        pointer-events: none !important;
        z-index: 2 !important;
    }
}
/* ============================================================
   PATCH 6 - Final fixes: destion overflow, developCloud scroll hint
   ============================================================ */
@media screen and (max-width: 768px) {
    /* Fix stats card description truncation */
    .whoIsFec .row-foot .item .destion {
        overflow: visible !important;
        height: auto !important;
        max-height: none !important;
        -webkit-line-clamp: unset !important;
    }

    /* developCloud (Product Photography) - scroll hint */
    #developCloud .row-main {
        position: relative !important;
    }

    #developCloud .row-main::after {
        content: '' !important;
        position: absolute !important;
        right: 0 !important;
        top: 0 !important;
        bottom: 0 !important;
        width: 40px !important;
        background: linear-gradient(to right, transparent, rgba(255,255,255,0.8)) !important;
        pointer-events: none !important;
        z-index: 2 !important;
    }

    /* developCloud items - ensure proper sizing */
    #developCloud .list {
        padding: 0 15px !important;
        gap: 12px !important;
        scroll-snap-type: x mandatory !important;
        -webkit-overflow-scrolling: touch !important;
    }

    #developCloud .list .item {
        flex: 0 0 85% !important;
        scroll-snap-align: start !important;
    }

    /* Fix .infoGroup card height */
    #developCloud .list .item .infoGroup {
        height: auto !important;
        min-height: 280px !important;
    }

    #developCloud .list .item .info-head {
        padding: 15px !important;
    }

    #developCloud .list .item .info-head .imgContainer {
        height: 160px !important;
        background-size: cover !important;
        background-position: center !important;
        border-radius: 6px !important;
        margin-bottom: 12px !important;
    }

    #developCloud .list .item .info-head .title {
        font-size: 18px !important;
        margin-bottom: 8px !important;
    }

    #developCloud .list .item .info-head .description {
        font-size: 12px !important;
        line-height: 1.5 !important;
        overflow: hidden !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 3 !important;
        -webkit-box-orient: vertical !important;
    }

    #developCloud .list .item .action .btn {
        font-size: 13px !important;
        padding: 8px 16px !important;
    }
}
/* ============================================================
   PATCH 7 - Visual & UX polish for mobile
   ============================================================ */
@media screen and (max-width: 768px) {

    /* --- HEADER: add subtle shadow for depth --- */
    .header,
    #header {
        box-shadow: 0 1px 4px rgba(0,0,0,0.08) !important;
        position: sticky !important;
        top: 0 !important;
        z-index: 999 !important;
        background: #fff !important;
    }

    /* --- TYPOGRAPHY: disable aggressive hyphenation --- */
    .whoIsFec .row-foot .item .destion,
    .freeData p,
    .description,
    .destion,
    .row-head .description,
    .proIntroduction .description,
    .applyCloud .description {
        hyphens: none !important;
        -webkit-hyphens: none !important;
        -ms-hyphens: none !important;
        word-break: normal !important;
        overflow-wrap: break-word !important;
    }

    /* --- ABOUT SECTION: tighter top padding --- */
    .whoIsFec {
        padding-top: 30px !important;
        padding-bottom: 20px !important;
    }

    /* About text - slightly larger for readability */
    .whoIsFec .freeData p {
        font-size: 14px !important;
        line-height: 1.7 !important;
        color: #444 !important;
    }

    /* About heading */
    .whoIsFec .row-head .title {
        font-size: 24px !important;
        font-weight: 700 !important;
        margin-bottom: 15px !important;
    }

    /* --- STATS CARDS: visual upgrade --- */
    .whoIsFec .row-foot {
        padding-top: 20px !important;
    }

    .whoIsFec .row-foot .list {
        gap: 12px !important;
    }

    .whoIsFec .row-foot .list .item,
    .whoIsFec .row-foot .list > li {
        background: #fff !important;
        border: 1px solid #eee !important;
        border-radius: 10px !important;
        padding: 16px !important;
        box-shadow: 0 2px 8px rgba(0,0,0,0.04) !important;
    }

    .whoIsFec .row-foot .item .numberContainer {
        background: #1a1a2e !important;
        border-radius: 8px !important;
        padding: 12px 8px !important;
        min-width: 70px !important;
    }

    .whoIsFec .row-foot .item .numberContainer .number {
        font-size: 28px !important;
        font-weight: 800 !important;
        color: #f5a500 !important;
    }

    .whoIsFec .row-foot .item .numberContainer .symbol {
        font-size: 20px !important;
        color: #f5a500 !important;
    }

    .whoIsFec .row-foot .item .numberContainer .tips,
    .whoIsFec .row-foot .item .numberContainer h3.tips {
        font-size: 11px !important;
        color: rgba(255,255,255,0.85) !important;
        margin-top: 4px !important;
        font-weight: 500 !important;
        line-height: 1.3 !important;
    }

    .whoIsFec .row-foot .item .destion {
        font-size: 13px !important;
        line-height: 1.65 !important;
        color: #555 !important;
    }

    /* --- SECTION SPACING: tighter for mobile --- */
    .developCloud,
    .applyCloud,
    .proIntroduction,
    .operationalAdvisory,
    .successCase,
    .newsInformation {
        padding-top: 35px !important;
        padding-bottom: 35px !important;
    }

    /* Section headings - consistent */
    .developCloud .row-head .title,
    .applyCloud .row-head .title,
    .proIntroduction .row-head .title,
    .operationalAdvisory .row-head .title,
    .successCase .row-head .title,
    .newsInformation .row-head .title {
        font-size: 22px !important;
        font-weight: 700 !important;
    }

    .developCloud .row-head .description,
    .applyCloud .row-head .description,
    .proIntroduction .row-head .description {
        font-size: 14px !important;
        line-height: 1.6 !important;
        color: #666 !important;
    }

    /* --- BANNER: pagination dots visible --- */
    #indexBannerSwiper .pagination {
        bottom: 10px !important;
        z-index: 10 !important;
    }

    #indexBannerSwiper .pagination .swiper-pagination-bullet,
    #indexBannerSwiper .pagination span {
        width: 8px !important;
        height: 8px !important;
        background: rgba(255,255,255,0.5) !important;
        border-radius: 50% !important;
        margin: 0 4px !important;
        display: inline-block !important;
    }

    #indexBannerSwiper .pagination .swiper-pagination-bullet-active,
    #indexBannerSwiper .pagination .swiper-active-switch {
        background: #f5a500 !important;
        width: 20px !important;
        border-radius: 4px !important;
    }

    /* --- READ MORE BUTTON: better mobile tap target --- */
    .whoIsFec .freeData .btn,
    .whoIsFec .row-main .btn {
        display: inline-block !important;
        padding: 12px 28px !important;
        font-size: 14px !important;
        border-radius: 6px !important;
        margin-top: 15px !important;
    }

    /* --- PRODUCT PHOTO CAROUSEL: card polish --- */
    #developCloud .list .item .infoGroup {
        border-radius: 12px !important;
        overflow: hidden !important;
    }

    #developCloud .list .item .info-head .title {
        font-size: 16px !important;
        font-weight: 600 !important;
    }

    /* --- GENERAL: smooth scrolling --- */
    html {
        scroll-behavior: smooth !important;
    }

    /* Improve tap targets for all links/buttons */
    a.btn,
    .btn,
    .action a {
        min-height: 44px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
}
/* ============================================================
   PATCH 8 - News page UX + Photography cards + global polish
   ============================================================ */
@media screen and (max-width: 768px) {

    /* --- NEWS PAGE: description text visible --- */
    .newsListContainer .list .item .destion,
    .newsListContainer .destion {
        overflow: visible !important;
        height: auto !important;
        max-height: none !important;
        -webkit-line-clamp: unset !important;
        display: block !important;
        font-size: 13px !important;
        line-height: 1.6 !important;
        color: #666 !important;
        margin-top: 6px !important;
    }

    /* News hero card - bigger title */
    .newsFirst .title,
    .newsFirst h3,
    .newsFirst h4 {
        font-size: 18px !important;
        font-weight: 700 !important;
        line-height: 1.4 !important;
        margin: 12px 0 8px !important;
    }

    /* News hero image - rounded corners */
    .newsFirst .row-img img {
        border-radius: 10px !important;
    }

    /* News hero description */
    .newsFirst .destion {
        overflow: visible !important;
        height: auto !important;
        max-height: none !important;
        font-size: 14px !important;
        line-height: 1.6 !important;
        color: #555 !important;
    }

    /* News list items - card-like styling */
    .newsListContainer .list .item {
        padding: 16px 0 !important;
        margin-bottom: 0 !important;
        border-bottom: 1px solid #f0f0f0 !important;
    }

    .newsListContainer .list .item:last-child {
        border-bottom: none !important;
    }

    /* News list title */
    .newsListContainer .list .item .title h5,
    .newsListContainer .list .item h5 {
        font-size: 15px !important;
        font-weight: 600 !important;
        line-height: 1.4 !important;
        color: #1a1a1a !important;
    }

    /* News date styling */
    .newsListContainer .list .item .timeGroup {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        min-width: 50px !important;
        padding: 8px !important;
        background: #f8f8f8 !important;
        border-radius: 8px !important;
    }

    .newsListContainer .list .item .timeGroup .day {
        font-size: 22px !important;
        font-weight: 700 !important;
        color: #1a1a2e !important;
        line-height: 1.2 !important;
    }

    .newsListContainer .list .item .timeGroup .month {
        font-size: 11px !important;
        color: #888 !important;
        margin-top: 2px !important;
    }

    .newsListContainer .list .item .timeGroup .year {
        display: none !important;
    }

    /* News "View Details" button */
    .newsListContainer .list .item .action a {
        font-size: 13px !important;
        color: #f5a500 !important;
        font-weight: 500 !important;
    }

    /* --- COLUMN NAV TABS: horizontal scroll, clean style --- */
    .columnMainNav .list {
        display: flex !important;
        overflow-x: auto !important;
        white-space: nowrap !important;
        gap: 0 !important;
        padding: 0 15px !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
    }

    .columnMainNav .list::-webkit-scrollbar {
        display: none !important;
    }

    .columnMainNav .list li {
        flex-shrink: 0 !important;
    }

    .columnMainNav .list li a {
        display: inline-block !important;
        padding: 10px 16px !important;
        font-size: 14px !important;
        color: #555 !important;
        border-bottom: 2px solid transparent !important;
        transition: all 0.2s !important;
    }

    .columnMainNav .list li.on a,
    .columnMainNav .list li.active a {
        color: #f5a500 !important;
        border-bottom-color: #f5a500 !important;
        font-weight: 600 !important;
    }

    /* --- PHOTOGRAPHY PAGE: card improvements --- */
    .itemContainer {
        border-radius: 12px !important;
        overflow: hidden !important;
        box-shadow: 0 2px 12px rgba(0,0,0,0.08) !important;
        min-height: 200px !important;
    }

    /* --- FOOTER: better mobile spacing --- */
    .footer,
    #footer {
        padding: 30px 15px !important;
    }

    .footer .row-left,
    .footer .row-right {
        text-align: center !important;
    }

    .footer .logo img {
        max-width: 120px !important;
        margin: 0 auto 15px !important;
        display: block !important;
    }

    .footer p,
    .footer .copyright {
        font-size: 12px !important;
        line-height: 1.6 !important;
        color: rgba(255,255,255,0.7) !important;
    }

    /* --- GLOBAL: smooth transitions for interactive elements --- */
    a, .btn, button {
        transition: opacity 0.2s, transform 0.2s !important;
    }

    a:active, .btn:active, button:active {
        opacity: 0.7 !important;
        transform: scale(0.97) !important;
    }

    /* --- INNER BANNER (sub-pages): better height --- */
    .innerBanner,
    .innerBanner .swiper-container,
    .innerBanner .swiper-wrapper,
    .innerBanner .swiper-slide {
        min-height: 160px !important;
        max-height: 200px !important;
    }

    .innerBanner .swiper-slide img,
    .innerBanner img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        object-position: center !important;
    }
}

/* PATCH 8b - News destion fix with correct specificity */
@media screen and (max-width: 768px) {
    .newsListContainer .list .item .item-middle .destion,
    .newsListContainer .list .item .item-middle .detailContainer .destion {
        overflow: visible !important;
        height: auto !important;
        max-height: none !important;
        font-size: 13px !important;
        line-height: 1.6 !important;
        color: #666 !important;
    }
}
/* ===== Patch 9: Fix News overlap, Scene image, Video boxes, Solutions centering ===== */

/* --- 1. News section: hide non-active swiper slides to prevent text overlap --- */
@media screen and (max-width: 768px) {
  .newsInformation #newsInformationSwiper .swiper-slide {
    display: none !important;
    overflow: hidden !important;
  }
  .newsInformation #newsInformationSwiper .swiper-slide-active {
    display: block !important;
    height: auto !important;
    overflow: visible !important;
  }
  /* Ensure dataType-list items are properly contained */
  .newsInformation .dataType-list {
    overflow: hidden !important;
  }
  .newsInformation .dataType-list .listItem {
    margin-bottom: 12px !important;
  }
  /* Hide the grid view on mobile, show list only */
  .newsInformation .dataType-grid {
    display: none !important;
  }
  .newsInformation .swiper-wrapper {
    display: block !important;
    height: auto !important;
    transform: none !important;
  }
  .newsInformation .newsListContainer {
    overflow: visible !important;
    height: auto !important;
  }
  .newsInformation #newsInformationSwiper {
    overflow: visible !important;
    height: auto !important;
  }

  /* --- 2. Scene Selection: show full image without cropping --- */
  .proIntroduction .infoGroup {
    height: auto !important;
    overflow: visible !important;
  }
  .proIntroduction .infoGroup img {
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
    border-radius: 8px !important;
  }
  .proIntroduction .swiper-container {
    height: auto !important;
    overflow: visible !important;
  }
  .proIntroduction .swiper-slide {
    height: auto !important;
  }

  /* --- 3. Video Production: stack cards vertically, text inside boxes --- */
  .applyCloud .row-main .list {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 20px !important;
    overflow: visible !important;
  }
  .applyCloud .row-main .list .item {
    width: 100% !important;
    max-width: 350px !important;
    height: auto !important;
    min-height: 200px !important;
    border: 1px solid #e0e0e0 !important;
    border-radius: 12px !important;
    padding: 20px !important;
    box-sizing: border-box !important;
    background: #fff !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06) !important;
  }
  .applyCloud .row-main .list .item .infoGroup {
    width: 100% !important;
    height: auto !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
  }
  .applyCloud .row-main .list .item .infoGroup a {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    width: 100% !important;
    height: auto !important;
  }
  .applyCloud .row-main .list .item .icoContainer {
    margin-bottom: 12px !important;
  }
  .applyCloud .row-main .list .item .title {
    font-size: 18px !important;
    margin-bottom: 10px !important;
    text-align: center !important;
  }
  .applyCloud .row-main .list .item .description {
    overflow: visible !important;
    height: auto !important;
    max-height: none !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
    text-align: center !important;
    color: #555 !important;
  }

  /* --- 4. Solutions: stack vertically, center text in boxes --- */
  .operationalAdvisory .row-main .list {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 20px !important;
    overflow: visible !important;
  }
  .operationalAdvisory .row-main .list .item {
    width: 100% !important;
    max-width: 350px !important;
    height: auto !important;
    min-height: 180px !important;
    border: 1px solid #e0e0e0 !important;
    border-radius: 12px !important;
    padding: 20px !important;
    box-sizing: border-box !important;
    background: #fff !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06) !important;
  }
  .operationalAdvisory .row-main .list .item .infoGroup {
    width: 100% !important;
    height: auto !important;
    padding: 0 !important;
  }
  .operationalAdvisory .row-main .list .item .info-main {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    width: 100% !important;
  }
  .operationalAdvisory .row-main .list .item .title {
    font-size: 18px !important;
    margin-bottom: 10px !important;
    text-align: center !important;
  }
  .operationalAdvisory .row-main .list .item .description {
    overflow: visible !important;
    height: auto !important;
    max-height: none !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
    text-align: center !important;
    color: #555 !important;
  }
}
/* ===== Patch 9b: Fix Scene Selection image display ===== */
@media screen and (max-width: 768px) {
  /* Override the existing height constraints to show full image */
  #proIntroductionSwiper {
    height: auto !important;
    overflow: visible !important;
  }
  #proIntroductionSwiper .swiper-wrapper {
    height: auto !important;
  }
  #proIntroductionSwiper .swiper-slide,
  #proIntroductionSwiper .swiper-slide[style] {
    height: auto !important;
  }
  #proIntroductionSwiper .swiper-slide .infoGroup {
    height: auto !important;
    overflow: visible !important;
  }
  #proIntroductionSwiper .swiper-slide .infoGroup img {
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
    border-radius: 8px !important;
  }
  .proIntroduction .swiper-container,
  .proIntroduction .swiper-container#proIntroductionSwiper {
    height: auto !important;
    overflow: visible !important;
  }
}
/* ===== Patch 9c: Hide QR code / WeChat scan section on mobile ===== */
@media screen and (max-width: 768px) {
  .footer .footer-top .weixin {
    display: none !important;
  }
}
/* ===== Patch 10: Fix Product Photography layout + Banner full display ===== */
@media screen and (max-width: 768px) {
  /* --- Banner: show full image proportionally --- */
  .indexBanner {
    height: auto !important;
    overflow: visible !important;
  }
  .indexBanner .swiper-container,
  #indexBannerSwiper {
    height: auto !important;
    overflow: hidden !important;
  }
  .indexBanner .swiper-wrapper {
    height: auto !important;
  }
  .indexBanner .swiper-slide,
  .indexBanner .swiper-slide[style] {
    height: auto !important;
  }
  .indexBanner .swiper-slide .itemContainer {
    width: 100% !important;
    height: 0 !important;
    padding-bottom: 31.25% !important; /* 600/1920 = 0.3125 */
    background-size: cover !important;
    background-position: center center !important;
  }

  /* --- Product Photography (.developCloud): stack cards vertically --- */
  .developCloud .row-main .list {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 20px !important;
    overflow: visible !important;
    padding: 0 15px !important;
  }
  .developCloud .row-main .list .item {
    width: 100% !important;
    height: auto !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08) !important;
  }
  .developCloud .infoGroup {
    width: 100% !important;
    height: auto !important;
  }
  .developCloud .infoGroup .info-head {
    width: 100% !important;
    height: auto !important;
    overflow: visible !important;
    display: flex !important;
    flex-direction: column !important;
  }
  .developCloud .infoGroup .info-head .imgContainer {
    width: 100% !important;
    height: 200px !important;
    background-size: cover !important;
    background-position: center !important;
    border-radius: 12px 12px 0 0 !important;
    flex-shrink: 0 !important;
  }
  .developCloud .infoGroup .info-head .title {
    font-size: 16px !important;
    height: auto !important;
    overflow: visible !important;
    margin: 12px 15px 6px !important;
    line-height: 1.3 !important;
    color: #333 !important;
  }
  .developCloud .infoGroup .info-head p[style] {
    font-size: 14px !important;
    height: auto !important;
    overflow: visible !important;
    color: #555 !important;
    margin: 0 15px 8px !important;
    line-height: 1.4 !important;
    position: static !important;
  }
  .developCloud .infoGroup .info-head .description {
    font-size: 13px !important;
    height: auto !important;
    overflow: visible !important;
    margin: 0 15px 12px !important;
    line-height: 1.5 !important;
    color: #666 !important;
  }
  .developCloud .infoGroup .info-head .action {
    margin: 0 15px 15px !important;
  }
  .developCloud .infoGroup .info-head .action .btn {
    font-size: 13px !important;
    height: 36px !important;
    line-height: 36px !important;
    display: inline-block !important;
    padding: 0 20px !important;
    border-radius: 4px !important;
  }
}
/* ===== Patch 10b: Banner height fix - override ID selectors ===== */
@media screen and (max-width: 768px) {
  /* Override the #indexBannerSwiper rules that set fixed 220px */
  #indexBannerSwiper .swiper-slide,
  #indexBannerSwiper .swiper-slide[style],
  #indexBannerSwiper.swiper-container .swiper-slide {
    height: auto !important;
  }
  #indexBannerSwiper .swiper-wrapper,
  #indexBannerSwiper.swiper-container .swiper-wrapper,
  #indexBannerSwiper .swiper-wrapper[style] {
    height: auto !important;
  }
  .indexBanner {
    min-height: unset !important;
    height: auto !important;
    overflow: hidden !important;
  }
  .indexBnnerContainer {
    min-height: unset !important;
    height: auto !important;
  }
  #indexBannerSwiper .swiper-slide .itemContainer {
    height: 0 !important;
    padding-bottom: 31.25% !important;
    background-size: cover !important;
    background-position: center center !important;
  }
}
/* ===== Patch 10c: Fix banner position:fixed causing 0-height parent ===== */
@media screen and (max-width: 768px) {
  #indexBannerSwiper,
  .indexBannerSwiper {
    position: relative !important;
    top: 0 !important;
    left: 0 !important;
    z-index: 1 !important;
  }
  .indexBnnerContainer {
    overflow: visible !important;
    height: auto !important;
  }
}