/*
 * Desktop and tablet values use vw units calculated from a 1920-wide design.
 * Mobile media-query blocks intentionally retain their original units.
 */
html {
    font-size: 5.2083333333vw !important;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

/* Keep an explicit viewport-based root size on wide desktop screens. */
@media screen and (min-width: 1920px) {
    html {
        font-size: 5.208333vw !important;
    }
}

/* About page: mobile layout for the current portal/about.html structure. */
@media screen and (max-width: 768px) {
    .Ih-banner{
        height: 400px;
        padding-top: 50px;
    }
    .Ih-banner .bg{
        height: 100%;
    }
    .Ih-banner .bg img{
        width: 100%;
        object-fit: cover;
        height: 100%;
    }
    .Ih-banner .txt_content{
        padding: 38px 20px 0;
    }
    .Ih-banner .txt_content .txt{
        width: 80%;
    }
    .Ih-banner .txt_content .txt .t1{
        font-size: 22px;
    }
    .Ih-banner .txt_content .txt .t2{
        font-size: 14px;
        margin-top: 12px;
    }
    .Ih-banner .txt_content .txt .btngroup{
        margin-top: 24px;
    }
    .Ih-banner .txt_content .txt .btngroup .btn{
        font-size: 14px;
        padding: 12px;
        border-radius: 24px;
        margin-right: 10px;
    }
    .Ih-banner .bottom_content{
        padding:  0 20px;
        height: 80px;
    }
    .Ih-banner .bottom_content .bottom_txt{
        padding: 28px 0;
    }
    .Ih-banner .bottom_content .bottom_txt .item .t1{
        font-size: 14px;
    }
    .Ih-banner .bottom_content .bottom_txt .item .t1 span{
        font-size: 22px;
    }
    .Ih-banner .bottom_content .bottom_txt .item .t1 span:nth-of-type(1){
        margin-right: 0;
    }
    .Ih-banner .bottom_content .bottom_txt .item .t2{
        font-size: 12px;
        margin-top: 8px;
    }
}

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

/* Mobile layouts: preserve desktop rules above 768px. 1rem = 100px keeps
   the existing 0.14–0.18rem body copy readable instead of scaling it down. */
@media screen and (max-width: 768px) {
    html { font-size: 100px !important; }
    body { font-size: 14px; }
    body > section, .footer, .footer_sub { overflow-wrap: anywhere; }
    body > section *, .footer *, .footer_sub * { min-width: 0; }
    body > section img { max-width: 100%; }

    /* Page gutters and shared section headings. */
    :is(.index_section2, .index_section3, .index_section4, .index_section5,
        .index_section6, .index_section7, .index_section8, .pd_list,
        .pd_detail_section_1, .pd_detail_section_2, .pd_detail_section_3,
        .pd_detail_section_4, .pd_detail_section_5,
        .fr_section_1, .fr_section_2, .fr_section_3,
        .fr_op_section_1, .fr_op_section_2, .fr_op_section_3, .fr_op_section_4, .fr_op_section_5,
        .news_section2, .app_section2, .app_section3, .app_section4, .app_section5,
        .ql_section_2, .ql_section_3, .ql_section_5, .ql_section_6, .ql_section_8, .ql_section_10,
        .ab_section_1, .ab_section_2, .ab_section_3, .ab_section_4, .at-detail-main) {
        padding: 40px 16px; height: auto; box-sizing: border-box;
    }
    body > section[class] .big_tit .t1,
    :is(.ql_section_2, .ql_section_3, .ql_section_5, .ql_section_6, .ql_section_8,
        .ab_section_1, .ab_section_2, .ab_section_3, .ab_section_4) .top_txt,
    .ql_section_10 .top_txt .t1 { font-size: 24px; line-height: 1.4; }
    body > section[class] .big_tit .t1 strong { font-size: inherit; line-height: inherit; }
    body > section[class] .big_tit .t2, .ql_section_10 .top_txt .t2 {
        font-size: 14px; line-height: 1.7; margin-top: 12px;
    }
    body > section[class] > .list, body > section[class] > .content,
    .ql_section_10 :is(.cert, .detection, .achievement_data, .achievement_list) {
        margin-top: 24px;
    }
    /* All ordinary card grids become one column on phones; Swiper retains its track. */
    :is(.index_section3, .index_section8, .pd_list, .pd_detail_section_3, .pd_detail_section_4,
        .fr_section_1, .fr_section_3, .fr_op_section_1, .fr_op_section_2, .fr_op_section_3,
        .fr_op_section_4, .fr_op_section_5, .news_section2, .app_section2, .app_section3,
        .app_section4, .ql_section_2, .ab_section_3, .ab_section_4) > .list,
    .ql_section_10 .cert, .ql_section_10 .achievement_list {
        grid-template-columns: minmax(0, 1fr); gap: 20px;
    }
    :is(.index_section7, .ql_section_3, .ab_section_1) > .list {
        grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 12px;
    }
    body > section .big_tit br, :is(.ql_section_1, .ql_section_4, .ql_section_7) .info br { display: none; }

    /* Banners and horizontal, touch-scrollable section navigation. */
    :is(.pd_banner, .fr_banner, .ab_banner) { padding-top: 50px; }
    :is(.pd_banner, .fr_banner, .ab_banner) .bg img { height: 280px; object-fit: cover; }
    :is(.pd_banner, .fr_banner, .ab_banner) .info { padding: 65px 20px 24px; box-sizing: border-box; }
    :is(.pd_banner, .fr_banner, .ab_banner) .info .t1 { font-size: 26px; line-height: 1.4; }
    :is(.pd_banner, .fr_banner, .ab_banner) .info .t2 { font-size: 14px; line-height: 1.7; }
    .pd_sub, .pd_detail_sub, .app_section1, .ql_section_menu, .news_section1, .fr_banner .menu {
        height: 48px; padding: 0 12px; justify-content: flex-start; align-items: center;
        flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain;
        -webkit-overflow-scrolling: touch; scrollbar-width: thin; box-sizing: border-box;
    }
    :is(.pd_sub, .pd_detail_sub, .app_section1, .ql_section_menu, .news_section1, .fr_banner .menu) .item {
        flex: 0 0 auto; width: auto; height: 44px; padding: 0 16px;
        display: flex; align-items: center; font-size: 14px; white-space: nowrap; line-height: 1.4;
    }
    .pd_sub .item img { width: 24px; margin-right: 6px; }
    .pd_sub.fixed, .pd_detail_sub, .ql_section_menu { top: 50px; z-index: 50; }
    /* The application page sets a desktop header offset inline via JavaScript. */
    .app_section1 { top: 50px !important; }
    .pd_detail_nav_clear { height: 98px; }
    .fr_banner .menu { position: relative; width: 100%; border-radius: 0; }
    .fr_banner .menu .item { padding-left: 24px; }
    .fr_banner .menu .item::before { left: 10px; width: 5px; height: 5px; }
    .news_section1 { margin-top: 0; }
    /* nav2.html has no separate mobile header; retain its links in a compact bar. */
    body:not(:has(.mheader)) .header { display: flex; height: 50px; padding: 0 12px; background: #fff; gap: 12px; }
    body:not(:has(.mheader)) .header .logo { flex: 0 0 84px; height: 50px; padding: 12px 0; }
    body:not(:has(.mheader)) .header .logo img { max-width: 100%; object-fit: contain; }
    body:not(:has(.mheader)) .header .nav { flex: 1; min-width: 0; justify-content: flex-start; overflow-x: auto; }
    body:not(:has(.mheader)) .header .nav .nav-item { flex: 0 0 auto; margin-left: 12px; white-space: nowrap; }
    body:not(:has(.mheader)) .header .nav .nav-item .lk { font-size: 14px; color: #241f21; }
    body:not(:has(.mheader)) .header .nav .book { display: none; }

    /* Home: stack split panels; keep all tab and capability content reachable. */
    .index_section2, .index_section5 { background-size: cover; background-color: #241f21; padding-top: 266px;}
    .Ih-banner .txt_content .txt { width: 100%; }
    .Ih-banner .bottom_content { position: relative; bottom: auto; padding: 0 16px; height: auto; margin-top: 20px;}
    .Ih-banner .bottom_content .bottom_txt { padding: 20px 12px; justify-content: center; flex-wrap: wrap;}
    .Ih-banner .bottom_content .bottom_txt .item { width: auto; border: 0; padding: 0; margin-bottom: 12px;}
    .index_section2 .list1, .index_section5 .list1 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 12px; margin-top: 24px; }
    .index_section2 .list1 .item, .index_section5 .list1 .item { width: 100%; }
    .index_section2 .list1 .item .pic {border-radius: 16px;overflow: hidden;height: 120px;}
    .index_section2 .list2 { margin-top: 24px; padding: 20px 16px; }
    .index_section2 .list2 .ls { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
    .index_section2 .list2 .ls .item { width: 100%; height: auto; border-right: 0; padding: 16px 0; }
    .index_section2 .list2 .tit {line-height: 1.5;font-size: 14px;}
    .index_section2 .list2 .ls .item .t1{font-size: 18px;}
    .index_section2 .list2 .ls .item .t2{font-size: 14px;}
    .index_section2 .list2 .ls .item .t3{font-size: 12px;}
    .index_section2 .list1 .item .t1{font-size: 18px;margin-top: 12px;}
    .index_section2 .list1 .item .t2{font-size: 14px;margin-top: 8px;}
    .index_section3 {background-size: cover;}
    .index_section3 .list .item .t1{font-size: 18px;margin-top: 12px;}
    .index_section3 .list .item .t2{font-size: 14px;margin-top: 8px;}
    .index_section3 .more{width: 150px;height: 38px;font-size: 14px;margin: 20px auto 0;}
    .index_section2 .more{width: 150px;height: 38px;font-size: 14px;margin: 20px auto 0;}
    .index_section4 .tab { overflow-x: auto; justify-content: flex-start; gap: 20px; margin-top: 24px; }
    .index_section4 .tab .item.active .txt{white-space: nowrap;}
    .index_section4 .tab .item .icon{width: 20px;}
    .index_section4 .tab .item { flex: 0 0 auto; padding-bottom: 14px; }
    .index_section4 .tab_content.active { display: flex; flex-direction: column; gap: 20px; }
    .index_section4 .tab_content .left, .index_section4 .tab_content .right { width: 100%; height: auto; padding: 20px; }
    .index_section4 .tab_content .right { padding: 0; margin-left: 0; }
    .index_section4 .tab_content .left .dot .op { box-sizing: border-box; margin-bottom: 12px; padding-bottom: 12px;}
    .index_section4 .tab_content .left .t1 { font-size: 20px;  }
    .index_section4 .tab_content .left .t2{font-size: 14px;padding-bottom: 16px;}
    .index_section4 .tab_content .left .t3{margin-top: 20px;}
    .index_section5{padding: 20px 16px;}
    .index_section5 .list2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-top: 24px; }
    .index_section5 .list2 .item { width: 100%; box-sizing: border-box; font-size: 13px;margin: 0;text-align: center;}
    .index_section5 .list1 .item .pic{height: 120px;}
    .index_section5 .list1 .item .t1{font-size: 18px;margin-top: 12px;}
    .index_section5 .list1 .item .t2{font-size: 14px;margin-top: 8px;}
    .index_section5 .list3 { display: grid; grid-template-columns: 1fr; gap: 20px; margin-top: 40px; }
    .index_section5 .list3 .item { width: 100%; height: auto; padding: 30px 14px 20px;}
    .index_section5 .list3 .item .tag{font-size: 12px;width: 80px;height: 34px;top: -10px;}
    .index_section5 .list3 .item .t1{font-size: 18px;}
    .index_section5 .list3 .item .t2{font-size: 14px;}
    .index_section6{background-size: cover;}
    .index_section6 .content { position: relative; inset: auto; transform: none; width: 100%; height: auto; display: grid; gap: 16px; }
    .index_section6 .content .box { position: relative; inset: auto; transform: none; height: 280px; padding: 0; overflow: hidden; }
    .index_section6 .content .box .box1 { width: 240px; height: 240px; }
    .index_section6 .content .box .box1 .box2 { width: 210px; height: 210px; }
    .index_section6 .content .box .box1 .box2 .box3 { width: 180px; height: 180px; }
    .index_section6 .content .item:nth-of-type(n) { position: relative; inset: auto; width: 100%; padding: 14px; border-radius: 16px; }
    .index_section6 .content .item .t1{font-size: 18px;}
    .index_section6 .content .item .t2{font-size: 16px;margin-top: 10px;}
    .index_section6 .content .item .t3{font-size: 14px;margin-top: 8px;}
    .index_section7 .list .item { width: 100%; }
    .index_section7 .list .item .t1 { font-size: 18px; line-height: 1; margin-top: 18px;}
    .index_section7 .list .item .t2 { font-size: 14px; padding: 0 8px; margin-top: 12px;}
    .index_section7 .list .item .num img { max-width: 100%; }
    .index_section7 .list .item .icon{margin-top: 20px;}
    .index_section7 .list .item:nth-of-type(2n){border-right: none;}
    .index_section8 .list .item .t1{font-size: 18px;line-height: 1.5;margin-top: 12px;}
    .index_section8 .list .item .pic{height: 150px;margin-top: 12px;}
    .index_section8 .list .item .t2{font-size: 14px;margin-top: 12px;margin-bottom: 12px;}
    .index_section8 .list .item .more .l{font-size: 14px;}
    .index_section8 .learn{width: 200px;height: 38px;font-size: 14px;margin: 20px auto 0;box-sizing: border-box;}

    /* Product overview, comparison, applications, parameters and FAQ. */
    .pd_list .item{height: auto;}
    .pd_list .item .pic{height: 180px;}
    .pd_list .item .pic img{object-fit: contain;}
    .pd_list .item .title{font-size: 18px;margin-top: 20px;}
    .pd_list .item .desc{line-height: 1.5;font-size: 14px;}
    .pd_detail_section_1 .content { height: auto; flex-direction: column; align-items: stretch; }
    .pd_detail_section_1 .content .left { width: 100%; height: 280px; padding: 24px; }
    .pd_detail_section_1 .content .right { width: 100%; padding: 24px 20px; }
    .pd_detail_section_1 .content .right .t1 { font-size: 26px; line-height: 1.4; }
    .pd_detail_section_1 .content .right .t3, .pd_detail_section_1 .content .right .btngroup { margin-top: 24px; }
    .pd_detail_section_1 .content .right .btngroup { flex-wrap: wrap; gap: 10px; }
    .pd_detail_section_1 .content .right .btngroup .btn2 { margin-left: 0; }
    .pd_detail_section_2 .tableinfo { margin-top: 24px; overflow-x: auto; }
    .pd_detail_section_2 .tableinfo .tr { min-width: 520px; }
    .pd_detail_section_2 .tableinfo .tr .td { padding: 16px 12px; font-size: 14px; line-height: 1.6; }
    .pd_detail_section_3 .list .item { padding: 24px 20px; }
    .pd_detail_section_3 .list .item .t1 { font-size: 20px; line-height: 1.5; }
    /* Override the saved left/right grid-column used by the desktop template. */
    .pd_detail_section_4 .list .item { grid-column: auto !important; }
    .pd_detail_section_4 .list .item .txt { padding: 18px 16px; gap: 16px; align-items: flex-start; }
    .pd_detail_section_4 .list .item .txt .l, .pd_detail_section_4 .list .item .txt .r { font-size: 14px; line-height: 1.6; flex: 1; }
    .pd_detail_section_4 .list .item .txt .r { text-align: right; }
    .pd_detail_section_5 .list { padding: 8px 16px; box-sizing: border-box; }
    .pd_detail_section_5 .list .item { padding: 20px 0; }
    .pd_detail_section_5 .list .item .title { gap: 16px; }
    .pd_detail_section_5 .list .item .title .l { flex: 1; font-size: 16px; line-height: 1.6; }
    .pd_detail_section_5 .list .item .title .r { flex: 0 0 32px; }
    .pd_detail_section_5 .list .item .desc { font-size: 14px; line-height: 1.8; margin-top: 16px; }

    /* Split layouts in fermentation, application and news pages. */
    .fr_op_section_2 .content { height: auto; display: flex; flex-direction: column; gap: 16px; }
    .fr_op_section_2 .content .left, .fr_op_section_2 .content .center, .fr_op_section_2 .content .right { width: 100%; height: auto; padding: 0; gap: 16px; }
    .fr_op_section_2 .content .center { padding: 32px 50px; height: 350px; gap: 10px;}
    .fr_op_section_2 .content .center .t1{font-size: 17px;}
    .fr_op_section_2 .content .center .t2{font-size: 14px;margin-top: 10px;}
    .fr_op_section_2 .content .left .item, .fr_op_section_2 .content .right .item { height: auto; min-height: 112px; padding: 20px 16px; background: #b51e23; border-radius: 16px; }
    .fr_op_section_2 .content .left .item .num, .fr_op_section_2 .content .right .item .num { flex: 0 0 48px; width: 48px; height: 48px; font-size: 28px; }
    .fr_op_section_2 .content .left .item .txt .t1, .fr_op_section_2 .content .right .item .txt .t1 { font-size: 20px; line-height: 1.4; }
    .fr_op_section_3 .list .item{height: auto;}
    .fr_op_section_3 .list .item .title{font-size: 18px;margin-top: 10px;}
    .fr_op_section_3 .list .item .desc{line-height: 1.5;font-size: 14px;margin-top: 10px;}
    .fr_op_section_3 .list .item .tag{margin-top: 12px;}
    .fr_op_section_4 .list .item .pic img{width: 40px;}
    .fr_op_section_4 .list .item .t1{font-size: 20px;margin-top: 10px;}
    .fr_op_section_4 .list .item .t2{font-size: 14px;margin-top: 10px;}
    .fr_section_2 .content, .app_section5 .content, .news_section2 .top_news { height: auto; flex-direction: column; gap: 0; }
    .news_section2 .top_news{padding: 20px 14px;}
    .fr_section_2 .content .left, .fr_section_2 .content .right,
    .app_section5 .content .left, .app_section5 .content .right,
    .news_section2 .top_news .left, .news_section2 .top_news .right { width: 100%; height: auto; }
    .fr_section_2 .content .right, .app_section5 .content .right, .news_section2 .top_news .right { padding: 24px 20px; }
    .app_section5 .content .right { margin-left: 0; margin-top: 20px; }
    .app_section5 .content .right .tr { flex-wrap: wrap; gap: 0;  }
    .app_section5 .content .right .tr .td { width: 100%; padding: 12px 0;}
    .app_section5 .content .right .tr .td .t1 { box-sizing: border-box; }
    .app_section5 .content .right .tr .td .t2{font-size: 14px;margin-top: 8px;}
    .news_section2 .top_news .right .title { font-size: 20px; line-height: 1.5; }
    .news_section2 .top_news .right .options { flex-wrap: wrap; gap: 12px; }
    .app_section2 .list .item .t2, .app_section4 .list .item .t2 { height: auto; font-size: 14px;margin-top: 12px;}
    .app_section2 .list .item .pic img { width: 100%; }
    .app_section3 .list .item{height: auto;padding: 24px;}
    .app_section3 .list .item .t1{font-size: 18px;}
    .app_section3 .list .item .t2{font-size: 14px;margin-top: 10px;}
    .app_section4 .list .item .t1{font-size: 18px;}
    .fr_op_section_5 .list .item .t1{font-size: 18px;}
    .fr_op_section_5 .list .item .pic{height: 150px;}
    .fr_op_section_5 .list .item .t2{font-size: 14px;margin-top: 8px;}

    /* Quality: readable banners, vertical cards and touch-friendly slide content. */
    .ql_section_1 { padding-top: 98px; }
    :is(.ql_section_1, .ql_section_4, .ql_section_7) .bg img { height: 420px; object-fit: cover; }
    :is(.ql_section_1, .ql_section_4, .ql_section_7) .info { padding: 24px 20px; box-sizing: border-box; }
    :is(.ql_section_1, .ql_section_4, .ql_section_7) .info .t1 { font-size: 40px; line-height: 1.2; }
    :is(.ql_section_1, .ql_section_4, .ql_section_7) .info .t2 { font-size: 26px; line-height: 1.4; margin-top: 12px; }
    :is(.ql_section_1, .ql_section_4, .ql_section_7) .info .t3 { font-size: 14px; line-height: 1.8; margin-top: 16px; }
    :is(.ql_section_1, .ql_section_4, .ql_section_7) .info .dw { margin-top: 20px; }
    .ql_section_3 .list .item .t1 strong { font-size: 30px; }
    .ql_section_3 .list .item .t1 { font-size: 16px; }
    .ql_section_5 .list, .ql_section_8 .list { height: auto; }
    .ql_section_5 .list .item { flex-direction: column; height: auto; }
    .ql_section_5 .list .item .left, .ql_section_5 .list .item .right { width: 100%; height: auto; }
    .ql_section_5 .list .item .left img { height: 220px; object-fit: cover; }
    .ql_section_5 .list .item .right { padding: 24px 20px; }
    .ql_section_5 .list .item .right .tags { flex-wrap: wrap; gap: 8px; }
    .ql_section_6 .list { height: auto; display: grid; grid-template-columns: 1fr; gap: 16px; }
    .ql_section_6 .list .item, .ql_section_6 .list .item.active { width: 100%; height: auto; min-height: 260px; }
    .ql_section_6 .list .item .bg { position: absolute; inset: 0; }
    .ql_section_6 .list .item .info, .ql_section_6 .list .item.active .info { position: relative; min-height: 260px; padding: 24px; background: rgba(0,0,0,.35); }
    .ql_section_6 .list .item .info .t1 { text-align: left; line-height: 1.4; }
    .ql_section_6 .list .item .info .t2 { display: block; }
    .ql_section_8 .list .swiper { width: 100%; padding-bottom: 48px; }
    .ql_section_8 .list .item .pic { height: 240px; }
    .ql_section_8 .list .swiper-button-next, .ql_section_8 .list .swiper-button-prev { width: 36px; height: 36px; top: 120px; }
    .ql_section_10 .cert { margin-bottom: 32px; }
    .ql_section_10 .cert .item { height: auto; }
    .ql_section_10 .cert .item .info { position: relative; padding: 24px; }
    .ql_section_10 .detection { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 12px; padding: 24px 12px; margin-bottom: 32px; }
    .ql_section_10 .detection .item { width: 100%; height: auto;}
    .ql_section_10 .detection .arrow { display: none; }
    .ql_section_10 .achievement_data { height: auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 12px; padding: 24px 12px; }
    .ql_section_10 .achievement_data .item { width: 100%; border: 0; }
    .ql_section_10 .achievement_data .item .t1 { font-size: 28px; }
    .ql_section_10 .achievement_list .item .info { padding: 20px; }
    .ql_section_2 .list .item{height: auto;padding: 24px;}
    .ql_section_2 .list .item .txt{font-size: 20px;margin-top: 10px;}
    .ql_section_2 .list .item .desc{margin-top: 10px;font-size: 14px;}
    .ql_section_3 .list .item .t2{font-size: 18px;margin-top: 10px;}
    .ql_section_3 .list .item .t3{font-size: 14px;margin-top: 10px;line-height: 1.5;}
    .ql_section_8 .list .item{padding: 0 30px;}
    .ql_section_10 .cert .item .info .t1{font-size: 18px;margin-top: 10px;}
    .ql_section_10 .cert .item .info .t2{font-size: 14px;margin-top: 8px;}
    .ql_section_10 .detection .item .t1{font-size: 18px;margin-top: 10px;}
    .ql_section_10 .detection .item .icon img{width: 40px;}
    .ql_section_10 .detection .item .t2{font-size: 14px;margin-top: 8px;}
    .ql_section_10 .achievement_list .item .info .t1{font-size: 20px;margin-top: 10px;}
    .ql_section_10 .achievement_list .item .info .t2{font-size: 16px;margin-top: 8px;}

    /* About: turn the absolute-positioned timeline into a readable list. */
    .ab_section_1 .list .item { padding: 16px 12px; border: 0; }
    .ab_section_1 .list .item .top_tit p span { font-size: 30px; }
    .ab_section_2 .content { height: auto; background: none; display: grid; gap: 24px; }
    .ab_section_2 .content .item[class] { position: relative; inset: auto; width: 100%; gap: 16px; }
    .ab_section_2 .content .item .pic { flex: 0 0 64px; width: 64px; height: 64px; }
    .ab_section_2 .content .item .txt { flex: 1; }
    .ab_section_2 .content .item.r .txt { text-align: left; }
    .ab_section_2 .content .item.r .txt :is(.t1, .t2, .t3) { text-align: left; }
    .ab_section_2 .content .item .txt .t1, .ab_section_2 .content .item .txt .t2 { font-size: 20px; line-height: 1.5; }
    .ab_section_2 .content .wan, .ab_section_2 .content .cricle, .ab_section_2 .content .top_icon { display: none; }
    .ab_section_3 .list .item { padding: 24px; }
    .at-detail-main { flex-direction: column; gap: 32px; padding-top: 80px; }
    .at-detail-main .content, .at-detail-main .other { width: 100%; padding: 0; }
    .at-detail-main .content { margin-right: 0; border-right: 0; }
    .at-detail-main .content .title { font-size: 24px; }
    .at-detail-main .content .options { flex-wrap: wrap; gap: 12px; padding-bottom: 20px; }
    .at-detail-main .content .options .ot { margin: 0; font-size: 13px; }
    .at-detail-main .content .cont { overflow-x: auto; }
    .at-detail-main .content .cont img { height: auto; }
    .at-detail-main .other .title{padding-top: 20px;font-size: 24px;}

    /* Shared footer must follow the same root-size change without overflowing. */
    .fr_section_1 .list .item .info{padding: 20px 14px;}
    .fr_section_1 .list .item .info .t1{font-size: 18px;}
    .fr_section_1 .list .item .info .t2{font-size: 14px;margin-top: 8px;}
    .fr_section_2 .content .right .item{padding: 16px 0;}
    .fr_section_3 .list .item{padding: 20px 14px;}
    .fr_section_3 .list .item .t1{font-size: 18px;margin-top: 10px;}
    .fr_section_3 .list .item .t2{font-size: 14px;margin-top: 8px;}
    .fr_op_section_1 .list .item{padding: 20px 14px;}
    .fr_op_section_1 .list .item .t1{font-size: 18px;margin-top: 10px;}
    .fr_op_section_1 .list .item .t2{font-size: 14px;margin-top: 8px;}

    .ab_banner .bg img{height: 450px;}
    .ab_banner .info .t1{font-size: 24px;}
    .ab_section_1 .list .item .top_tit p span{font-size: 14px;}
    .ab_section_1 .list .item .pic{margin-top: 14px;}
    .ab_section_1 .list .item .t1{font-size: 20px;margin-top: 10px;}
    .ab_section_1 .list .item .t2{font-size: 14px;margin-top: 10px;}
    .ab_section_2 .content .item .txt .t2{font-size: 20px;margin-top: 10px;}
    .ab_section_2 .content .item .txt .t3{font-size: 14px;margin-top: 10px;}
    .ab_section_3 .list .item{height: 288px;}
    .ab_section_4 .list .item{height: auto;}
    .ab_section_4 .list .item .pic img{width: 40px;}
    .ab_section_4 .list .item .t1{font-size: 20px;margin-top: 10px;}
    .ab_section_4 .list .item .t2{font-size: 14px;margin-top: 10px;}
    
}

@media screen and (min-width: 600px) and (max-width: 768px) {
    :is(.index_section3, .index_section8, .pd_list, .pd_detail_section_3,
        .fr_section_1, .fr_section_3, .fr_op_section_1, .fr_op_section_2,
        .fr_op_section_3, .fr_op_section_4, .fr_op_section_5, .news_section2,
        .app_section2, .app_section3, .app_section4, .ql_section_2,
        .ab_section_3, .ab_section_4) > .list,
    .ql_section_10 .cert, .ql_section_10 .achievement_list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media screen and (max-width: 380px) {
    .Ih-banner .txt_content { padding: 0 16px; }
    .Ih-banner .txt_content .txt .t1 { font-size: 17px; }
    .index_section2 .list1, .index_section5 .list1, .ab_section_1 .list { grid-template-columns: minmax(0, 1fr); }
    .footer_sub .right { flex-wrap: wrap; }
    .footer_sub .right .item { width: 100%; }
}