@charset "utf-8";
/* =====================================================================
   srmoves 复刻版响应式层（不改变 PC 端效果，仅在窗口变小时生效）
   原站为 1200px 定宽站；本层把固定宽度逐级放开并重排，视觉风格不变。
   ===================================================================== */

/* ---------- <=1280：定宽容器放开为自适应 ---------- */
@media screen and (max-width: 1280px) {
    html, body { min-width: 320px !important; width: 100% !important; }
    body { overflow-x: hidden; }
    .center { width: auto !important; max-width: 1200px; padding: 0 15px; box-sizing: border-box; }
    .yl-w1000 { width: auto !important; max-width: 1010px; padding: 0 15px; box-sizing: border-box; }
    .yl-w1170 { width: auto !important; max-width: 1170px; }
    .nav { width: auto !important; max-width: 1200px; padding: 0 10px; }
    .yl-main3 { width: auto !important; max-width: 1200px; padding: 0 15px; box-sizing: border-box; }
    .yl-main3 .yl-box { box-sizing: border-box; }
    #step, #step .yl-step_box { width: auto !important; max-width: 1200px; padding: 0 15px; box-sizing: border-box; }
    #footer .yl-foot, #copyright .yl-m { width: auto !important; max-width: 1200px; padding: 0 15px; box-sizing: border-box; }
    .yl-Why { width: auto !important; max-width: 1200px; padding: 0 15px; box-sizing: border-box; }
    .yl-WhyLeft, .yl-WhyRight { box-sizing: border-box; }
    .yl-rollBox { width: auto !important; max-width: 1170px; }
    #service { width: auto !important; max-width: 1210px; padding: 0 10px; box-sizing: border-box; }
    .yl-aoutotext { width: auto !important; }
    img { max-width: 100%; height: auto; }
    .yl-nrs img { max-width: 100% !important; }
    .yl-hengfu img { max-width: 100%; }
}

/* ---------- <=1024：两栏变单栏 ---------- */
@media screen and (max-width: 1024px) {
    .yl-so { margin-right: 20px; width: 260px; }
    .yl-banner { height: auto; padding-bottom: 10px; }
    .yl-dltz .yl-dl, .yl-dltz .yl-tz { width: 48.5% !important; float: left !important; box-sizing: border-box; }
    .yl-service_box dl { width: 31% !important; padding: 0 1% !important; }
    .yl-service_box dl dd img { width: 100% !important; }
    .yl-service_box dl dd p { width: 100% !important; }
    .yl-Why { height: auto !important; padding-bottom: 20px; }
    .yl-WhyLeft { width: 100% !important; height: auto !important; }
    .yl-WhyLeft .yl-top { width: auto !important; padding: 20px 10px 20px 0 !important; }
    .yl-WhyLeft .yl-topTitle { width: auto !important; font-size: 24px; }
    .yl-WhyLeft .yl-topComs { width: auto !important; height: auto !important; }
    .yl-WhyLeft .yl-pro, .yl-WhyLeft .yl-ser { width: 31% !important; height: auto !important; padding-right: 2%; box-sizing: border-box; }
    .yl-WhyLeft .yl-pro img, .yl-WhyLeft .yl-ser img { max-width: 100%; height: auto; }
    .yl-WhyLeft .yl-poeComs { width: 100% !important; height: auto !important; }
    .yl-WhyLeftCom { width: 100% !important; padding-left: 0 !important; }
    .yl-WhyLeftComBody { width: 100% !important; padding-left: 0 !important; }
    .yl-WhyLeftComBody img { max-width: 100%; height: auto; }
    .yl-WhyRight { width: 100% !important; height: auto !important; margin-top: 20px; }
    .yl-WhyRight .yl-HeadTop { padding-top: 100px; background-size: 100% auto; }
    .yl-WhyRight .yl-bodys { background-size: 100% auto !important; background-position: center top !important; height: 420px !important; max-width: 440px; margin: 0 auto; }
    .yl-rollBox .yl-Cont { width: 86% !important; }
    .yl-rollBox .yl-Cont .yl-pic { width: 21% !important; box-sizing: border-box; }
    .yl-rollBox .yl-Cont .yl-pic img { width: 100% !important; }
    .yl-main3 .yl-box { width: 32% !important; padding-right: 1.5% !important; box-sizing: border-box; }
    .yl-aric .yl-nrong { width: 66% !important; box-sizing: border-box; padding-right: 15px; }
    .yl-aric .yl-lefts { width: 30% !important; box-sizing: border-box; }
    .yl-item .yl-right { width: 60% !important; height: auto !important; }
    .hc_left, .hc_center, .hc_right { box-sizing: border-box; }
    .hc_left { width: 33% !important; }
    .hc_center { width: 33% !important; }
    .hc_right { width: 32% !important; }
    .country_direct_sales, .yl-common_question, .keywords { max-width: 100% !important; padding: 0 15px; box-sizing: border-box; }
    .yl-rgn { width: auto !important; min-width: 0 !important; padding: 0 15px; }
}

/* ---------- <=768：移动端 ---------- */
@media screen and (max-width: 768px) {
    body { font-size: 14px; }

    .yl-top { height: auto !important; padding: 4px 0; }
    .yl-top .yl-left { display: none; }
    .yl-top .yl-right { float: none !important; text-align: center !important; }
    .yl-top .yl-right a { margin: 0 6px !important; }

    .yl-banner { padding: 8px 0; }
    .yl-logo { padding-top: 4px; }
    .yl-logo img { max-height: 52px; width: auto !important; }
    p#tell { float: right !important; width: auto !important; padding-top: 8px !important; font-size: 14px !important; line-height: 20px !important; }
    p#tell img { max-width: 20px; }
    .yl-so { display: none; }

    /* --- 导航：汉堡菜单 --- */
    .yl-navBar { height: auto !important; line-height: normal !important; position: relative; padding-right: 56px; }
    .yl-nav-toggle { display: block !important; }
    body:not(.yl-nav-open) .nav { display: none; }
    body.yl-nav-open .nav { display: block; width: 100% !important; padding: 0; }
    .nav .yl-m { float: none !important; display: block; border: 0 !important; margin: 0 !important; border-bottom: 1px solid #e50505 !important; }
    .nav h3 { float: none !important; height: 44px !important; line-height: 44px !important; }
    .nav h3 a { padding: 0 16px !important; border-left: 0 !important; }
    .nav .on h3 a { border-top: 0 !important; }
    .nav .yl-sub { display: block !important; position: static !important; width: 100% !important; height: auto !important; background: #fff; }
    .nav .yl-sub ul { width: 100% !important; }
    .nav .yl-sub li { width: 50% !important; float: left !important; line-height: 40px !important; font-size: 14px !important; }
    .nav .yl-sub li a { padding-left: 16px !important; background-position: 0 15px !important; }

    /* --- 首页 --- */
    #slider2, .yl-slider_box, .yl-silder_con, .yl-silder_panel, .yl-silder_panel a.yl-big { width: 100% !important; max-width: 100% !important; }
    .yl-silder_panel { height: auto !important; position: relative !important; }
    .yl-silder_panel a.yl-big { display: block; }
    .yl-silder_panel a.yl-big img { width: 100% !important; height: auto !important; display: block; }
    ul.yl-silder_nav { display: none !important; }
    .yl-silderBox { display: none !important; }
    .yl-main1 { width: 100% !important; }
    .yl-dltz { float: none !important; width: 100% !important; height: auto !important; }
    .yl-dltz .yl-dl, .yl-dltz .yl-tz { height: auto !important; padding-bottom: 8px; }
    .yl-slider_box, .yl-silder_con, .yl-silder_panel, .yl-silder_panel a.yl-big img { width: 100% !important; }
    .yl-slider_box .yl-silder_panel img { width: 100% !important; height: auto !important; }
    .yl-main2 { width: 100% !important; }
    .yl-main2 .yl-box { max-width: 100%; }
    .yl-WhyBos { height: auto !important; }
    .clear { clear: both; }
    .yl-dltz .yl-dl, .yl-dltz .yl-tz { width: 100% !important; float: none !important; }
    .yl-dltz .yl-dl { margin-bottom: 15px; }
    #service .yl-service_box { float: none; }
    .yl-service_box dl { width: 100% !important; padding: 0 !important; height: auto !important; }
    .yl-main3 .yl-box { width: 100% !important; padding: 0 !important; float: none !important; margin-bottom: 10px; }
    .yl-box ul.yl-zilm { position: static !important; height: auto !important; }
    .yl-box ul.yl-zilm li { margin-top: 5px !important; }

    /* --- 关于我们区 --- */
    .yl-WhyLeft .yl-pro, .yl-WhyLeft .yl-ser { width: 100% !important; float: none !important; }
    .yl-WhyRight .yl-bodys { height: 300px !important; width: 100% !important; max-width: 440px; }
    .yl-WhyRight { max-width: 100%; overflow: hidden; }
    .yl-WhyRight .yl-W_title1 { top: 6% !important; left: 2% !important; font-size: 15px; }
    .yl-WhyRight .yl-W_title3 { top: 22% !important; right: 5% !important; font-size: 15px; }
    .yl-WhyRight .yl-W_title4 { top: 44% !important; right: 3% !important; font-size: 16px; }
    .yl-WhyRight .yl-W_title2 { top: 54% !important; left: 8% !important; font-size: 16px; }
    .yl-WhyLeftCom .yl-fontH1 { font-size: 20px !important; }
    .yl-WhyLeftCom .yl-fontcom { font-size: 14px !important; }

    /* --- 案例滚动 --- */
    .yl-rollBox .yl-LeftBotton, .yl-rollBox .yl-RightBotton { display: none; }
    .yl-rollBox .yl-Cont { width: 100% !important; }
    .yl-rollBox .yl-Cont .yl-pic { width: 46% !important; margin-right: 2%; }
    .yl-rollBox .yl-Cont .yl-pic img { width: 100% !important; }
    .yl-rollBox .yl-Cont .yl-pic p { font-size: 12px; }

    /* --- 列表页 --- */
    .yl-aric { display: flex; flex-direction: column; }
    .yl-aric .yl-nrong { order: 1; }
    .yl-aric .yl-lefts { order: 2; }
    .yl-aric .yl-nrong { width: 100% !important; float: none !important; padding: 15px 5px !important; box-sizing: border-box; min-width: 0; }
    .yl-aric .yl-lefts { width: 100% !important; float: none !important; margin-top: 15px; min-width: 0; }
    .yl-aric .yl-lefts .kuai { padding: 10px !important; }
    #boxs { position: static !important; }
    .yl-item { padding: 12px 0 !important; }
    .yl-item [style*="background"] {
        position: relative !important; display: block !important;
        width: 100% !important; height: 180px !important; margin-bottom: 8px;
    }
    .yl-item .yl-right { width: 100% !important; float: none !important; }
    .yl-item .yl-button { position: static !important; display: inline-block; margin-top: 8px; }
    .yl-item .yl-title1 { font-size: 17px !important; white-space: normal !important; }
    .yl-item .yl-summary { line-height: 20px !important; }
    .yl-dede_pages { padding-left: 0 !important; text-align: center; height: auto !important; }
    .yl-dede_pages ul { display: inline-block; }
    .yl-dede_pages li { float: left; }

    /* --- 详情页 --- */
    .yl-aric .yl-rights { width: 100% !important; float: none !important; }
    .yl-aric .yl-rights h1 { font-size: 18px !important; }
    .yl-nrs { font-size: 14px !important; padding: 0 !important; }

    /* --- 案例网格 --- */
    .yl-aric .yl-nrong .yl-neirong li { width: 46% !important; margin: 0 2% 15px 0 !important; height: auto !important; }
    .yl-aric .yl-nrong .yl-neirong li i { width: 100% !important; height: auto !important; }
    .yl-aric .yl-nrong .yl-neirong li i img { width: 100% !important; }

    /* --- 国家专栏 / 专题落地页（表格布局打散） --- */
    .yl-hi_content table, .yl-hi_content tbody, .yl-hi_content tr, .yl-hi_content td,
    .country_direct_sales table, .country_direct_sales tbody, .country_direct_sales tr, .country_direct_sales td,
    .yl-container table[width="100%"] tbody tr td,
    table[border="0"][width="1000"] , table[border="0"][width="1000"] tbody, table[border="0"][width="1000"] tr, table[border="0"][width="1000"] td {
        display: block !important; width: 100% !important; box-sizing: border-box;
    }
    .house_info .ds_tit .tit-logo { width: 100% !important; float: none !important; }
    .house_info .ds_tit .white_bot h1 { font-size: 20px !important; }
    .share_more { float: none !important; display: block; padding: 6px 0; }
    .hc_left, .hc_center, .hc_right { width: 100% !important; float: none !important; margin-bottom: 15px; }
    .hc_left img, .hc_center img, .hc_right img { max-width: 100%; height: auto; }
    .yl-infowrap { width: 100% !important; height: auto !important; }
    .subnav_five ul li { width: 33% !important; }
    .search_map .search_left, .search_map .map_right { width: 100% !important; float: none !important; }
    .country_map { background-size: 100% auto !important; }
    .yl-hot_source .source_tit .tit-logo { width: 100% !important; }
    .yl-hs_touzilist, .yl-hs_xuequlist, .yl-hs_yijulist { display: block !important; }
    .yl-hs_touzilist .nw_share, .yl-hs_xuequlist .nw_share, .yl-hs_yijulist .nw_share {
        display: block !important; position: static !important; width: 100% !important; margin-bottom: 10px;
    }
    .yl-hs_touzilist .nw_left, .yl-hs_xuequlist .nw_left, .yl-hs_yijulist .nw_left { position: static !important; width: 100% !important; }
    .nw_share img, .nw_left img { max-width: 100%; height: auto; }
    .cq_detail { width: 100% !important; }
    .cq_detail img { max-width: 100%; height: auto; }
    .keywords_nr img { max-width: 100%; height: auto; }
    .flex-parent.steps { display: block !important; }
    .flex-parent.steps .flex-child { width: 50% !important; margin-bottom: 12px; }
    .yl-dragonsea_main1 img, .yl-dragonsea_main img { max-width: 100% !important; height: auto !important; }
    .yl-info-banner .yl-box1 { width: auto !important; }
    .td { width: 100% !important; height: auto !important; background-size: 100% auto !important; min-height: 400px; }
    .yl-bt1, .yl-bt2, .yl-bt3, .yl-t1, .yl-t2, .yl-t3, .yl-t4, .yl-t5, .yl-t6, .yl-t7, .yl-t8, .yl-tt0 { position: static !important; width: auto !important; text-align: center !important; margin: 10px 0; }
    .yl-m, .yl-wtnum, .yl-fsafe, .yl-customer-guide, .yl-safe { max-width: 100% !important; }

    /* --- 防溢出兜底：主要容器一律不允许把文档撑宽 --- */
    html { overflow-x: hidden; }
    .yl-top, .yl-header, .yl-banner, .yl-menu, .yl-navBar, .yl-container, .yl-footer, #footer, #copyright,
    .yl-main1, .yl-main2, .yl-main3, .yl-Why, .yl-WhyBos, .house_info, .yl-hi_content, .country_direct_sales,
    .subnav_five, .yl-common_question, .keywords, #con, .yl-aric, .yl-nrong, .yl-rights, .yl-lefts,
    .yl-item, .yl-item .yl-right, .yl-dltz, #service, .yl-service_box, .yl-rollBox, .yl-WhyLeft, .yl-WhyRight,
    #step, .yl-step_box, .flex-parent, .search_map, .yl-hot_source, .cq_detail {
        max-width: 100vw !important; box-sizing: border-box !important; overflow-wrap: break-word;
    }

    /* --- 页脚 --- */
    #step dl { padding-right: 14px !important; margin-right: 14px !important; }
    #step dl.yl-qi dt { width: auto !important; font-size: 15px !important; text-align: left !important; }
    #step dl dt { font-size: 26px !important; width: 18px !important; }
    #step dl dd { font-size: 11px !important; }
    .yl-foot .yl-fsafe { display: none; }
    .yl-foot .yl-wtnum { width: 100% !important; padding: 20px 0 0 !important; }
    .yl-foot dl { margin-top: 15px !important; padding-left: 0 !important; }
    .yl-foot .yl-customer-guide { width: 100% !important; border: 0 !important; }
    .yl-foot .yl-customer-guide dd { width: 25% !important; }
    .yl-foot .yl-safe { width: 100% !important; }
    #footer { height: auto !important; padding-bottom: 20px; }
    #copyright { height: auto !important; padding: 10px 0 !important; }
    #copyright .yl-pz p { height: auto !important; line-height: 24px !important; padding-right: 0 !important; float: none !important; }
    #copyright table, #copyright tbody, #copyright tr, #copyright td { display: block !important; width: 100% !important; text-align: center !important; }
    #copyright td[width="73"], #copyright td[width="117"] { display: inline-block !important; width: auto !important; padding: 0 8px !important; }
    #copyright td font { color: #fff !important; }
}

/* ---------- <=480：小屏微调 ---------- */
@media screen and (max-width: 480px) {
    .nav .yl-sub li { width: 100% !important; }
    .yl-rollBox .yl-Cont .yl-pic { width: 100% !important; }
    .yl-aric .yl-nrong .yl-neirong li { width: 100% !important; }
    .yl-item [style*="background"] { height: 150px !important; }
    .yl-foot .yl-customer-guide dd { width: 50% !important; }
    .yl-WhyLeft .yl-topTitle { font-size: 20px; }
    .yl-topTitle { font-size: 18px; }
}

/* ---------- 汉堡按钮（PC 端隐藏，不占位） ---------- */
.yl-nav-toggle {
    display: none !important;
    position: absolute; right: 12px; top: 7px; z-index: 1001;
    width: 40px; height: 32px; padding: 6px 8px;
    background: transparent; border: 0; cursor: pointer;
}
.yl-nav-toggle span { display: block; height: 3px; background: #fff; border-radius: 2px; margin: 4px 0; }
