/* Common keyboard affordances and narrow-screen layouts. Loaded after page CSS. */
:focus-visible { outline: 3px solid #a45459 !important; outline-offset: 3px; }
.nav-box-item:focus-within .nav-box-item_box { display: block; }
.nav-box-item.menu-closed .nav-box-item_box { display: none; }
.search-term { background: transparent; border: 0; color: inherit; font: inherit; text-align: left; cursor: pointer; padding: 8px 0; min-height: 40px; }
.hotSearch li, .recentSearch li { display: flex; align-items: center; gap: 8px; }
.search-term { flex: 1; overflow-wrap: anywhere; }
.recentSearch li > button:last-child { min-width: 32px; min-height: 32px; }
.content_table1_out { overflow-x: auto; }
@media (max-width: 1200px) {
    body { width: 100%; overflow-x: visible; }
    .box, .floot-box { width: 100%; }
    .header-box, .floot, .breadcrumbul, .content { width: calc(100% - 24px); max-width: 1200px; }
    .header { flex-wrap: wrap; gap: 12px; padding: 12px; }
    .header-right, .header-right1 { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; max-width: 100%; }
    .nav-box { flex-wrap: wrap; }
    .nav-box-item { flex: 1 1 25%; min-width: 0; }
    .nav-box-item_box { z-index: 1000; }
    .floot-table { flex-wrap: wrap; gap: 24px; }
    .floot-table_col { flex: 1 1 180px; min-height: 0; border: 0; }
    .floot-bottom { flex-wrap: wrap; gap: 20px; }
    .content > div { min-width: 0; max-width: 100%; }
}
@media (max-width: 1200px) {
    .header-right, .header-right1 { width: 100%; margin: 0; }
    .header-right > div:has(> #gInput), .header-right1 > div:has(> #gInput) { flex: 1 1 calc(100% - 60px); min-width: 0; }
    #gInput { width: 100% !important; min-width: 0; }
    .search_box { flex-basis: 100%; text-align: left; }
    .sbtn { margin-left: 0; min-width: 36px; }
    .search_history { left: 0 !important; right: 0; top: 100% !important; width: 100% !important; max-height: 55vh; overflow-y: auto; z-index: 1100; }
    .nav-box-item { flex-basis: 50%; height: auto; min-height: 44px; line-height: 1.5; }
    .nav-box-item > span { padding: 10px 4px; }
    .nav-box-item_box { top: 100%; }
    .content { display: block; padding: 0; }
    .content > div { width: 100% !important; }
    .content { overflow-wrap: anywhere; }
    .content :is(div, ul, ol, form) { max-width: 100%; min-width: 0; }
    .content table { display: block; max-width: 100%; overflow-x: auto; }
    .content img { max-width: 100%; }
    .content button { max-width: 100%; white-space: normal; }
    .myform input { min-width: 0; }
    .lin2_1_3 { flex-wrap: wrap; gap: 12px; }
    .banner, .banner img, #banner, #banner img { max-width: 100%; height: auto; }
    .breadcrumbul { overflow-wrap: anywhere; }
    .page-index .lin { width: 100%; height: auto; min-height: 0; padding-bottom: 12px; }
    .page-index .lin2_2_list, .page-index .lin2_2_list_nva { height: auto; }
    .page-index #target { width: 100%; }
    .page-index .guanzhu { position: relative; width: 100%; }
    .page-index .lin2_2_list_item { height: auto; margin-right: 0; gap: 8px; }
    .page-index .lin3_3_list_a { width: 100%; }
    .page-goods .lin1, .page-evaluationBoard .lin1 { height: auto; padding-bottom: 12px; }
    .page-goods .lin1_1, .page-evaluationBoard .lin1_1 { flex-wrap: wrap; }
    .lin2_2_content { flex-direction: column; }
    .lin2_2_content_left, .lin2_2_content_right { width: 100% !important; max-width: 100%; }
    .page-goods .lin2_2_content_left_content_tab2_lin1,
    .page-goods .lin2_2_content_left_content_tab2_lin2_1 { width: auto; margin: 12px; }
    .page-goods .lin2_4_content, .page-evaluationBoard .lin2_4_content { width: 100%; }
    .lin2_1 { max-width: 100%; }
    .page-goods .lin2_1, .page-evaluationBoard .lin2_1 { display: flex; flex-wrap: wrap; }
    .lin2_3_content, .lin2_4_content { flex-wrap: wrap; }
    .myform-row { flex-direction: column; gap: 16px; }
    .myform-group, .myform-group input, .support-captcha { width: 100% !important; }
    .page-support .mybtn { max-width: 100%; }
    .page-login .lin2, .page-register .lin2, .page-changePassword .lin2 { height: auto; padding: 12px; }
    .page-login .lin2_1, .page-login .lin2_2,
    .page-register .lin2_1, .page-register .lin2_2,
    .page-changePassword .lin2_1, .page-changePassword .lin2_2 { position: relative; inset: auto; width: 100%; height: auto; padding: 16px; }
    .myform input:not([type=checkbox]), .btwidth { max-width: 100%; }
    :is(.page-login, .page-register, .page-changePassword) :is(.lin2_2_title1, .lin2_2_title2, .lin2_2_button) { position: relative; inset: auto; transform: none; width: 100%; margin: 16px 0; }
    :is(.page-register, .page-changePassword) .myform { margin: 0; }
    .page-packageResource .content { overflow-x: auto; }
    .page-qualityManagement .lin1_2 { margin: 16px 12px; }
    .page-qualityManagement .lin1_2_content { width: 100%; flex-direction: column; }
    .page-qualityManagement .lin1_2_content_title2 { width: auto; max-width: 100%; }
    .page-qualityManagement .lin1_2_content .tr { flex-wrap: wrap; }
    .page-qualityManagement .lin1_2_content_img { width: 198px; height: auto; margin: 16px auto; }
    .page-recruitment .lin1_2_form { flex-wrap: wrap; gap: 12px; }
    .page-recruitment .myform { flex-wrap: wrap; gap: 12px; }
    .page-recruitment .form-actions { padding: 0; margin: 0; }
    .content_table_title, .content_table_title > div { flex-wrap: wrap; gap: 12px; }
    .page-goodsSearchResult .content_table { width: 100%; overflow-x: auto; }
    .page-goodsSearchResult .content_table1_out { min-width: max-content; }
    .reuse_eb { flex-wrap: wrap; }
    .reuse_eb_right { min-width: 0; max-width: 100%; }
}
@media (min-width: 768px) and (max-width: 1200px) {
    .nav-box-item { flex-basis: 25%; }
    .page-index .content { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
    .page-index .content > div:last-child { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 16px; }
    .page-index .content > div:last-child .lin { flex: 1 1 220px; width: auto; }
}