/* Shared fixes for the original static pages. */
img, iframe { max-width: 100%; }
a:focus-visible { outline: 2px solid #039ae3 !important; outline-offset: 3px; }
#topNav a[aria-current="page"] { border-top: 5px solid #039ae3; box-sizing: border-box; }
#topNav li a { line-height: 53px; }
#leftsead { top: auto; bottom: 18px; height: 240px; }
.video-link { display: inline-block; padding: 18px 24px; background: #039ae3; color: #fff !important; border-radius: 4px; }
.download-content .button1 { color: #333; }
.error-page { max-width: 640px; margin: 12vh auto; padding: 24px; font-family: sans-serif; line-height: 1.8; }
.error-page a { color: #08739b; }
.sitemap-page { max-width: 800px; margin: 32px auto; padding: 0 20px; font-family: sans-serif; line-height: 2; }
.home-page #foot { bottom: 0; height: 60px; line-height: normal; text-align: center; }
.home-page #foot img { width: auto; height: auto; max-height: 48px; max-width: 90%; margin: 6px auto; }
@media (max-width: 1100px) {
    #header, #topBar { min-width: 0; width: 100%; height: auto; float: none; box-sizing: border-box; }
    #topBar { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; }
    #topBar #logo { float: none; }
    #topNav { float: none; display: flex; flex-wrap: wrap; justify-content: center; margin: 0; }
    #topNav li { width: auto; height: auto; float: none; }
    #topNav li a { width: auto; padding: 0 14px; line-height: 44px; font-size: 16px; }
    #currentBg { display: none !important; }
    #doc_content, #total, .product-total, #manager, #waiter, #cook, #topography, #customer,
    .download-content { min-width: 0; width: 94%; margin: 20px auto; box-sizing: border-box; }
    #doc_content { overflow-wrap: anywhere; line-height: 1.6; }
    #doc_content img { height: auto !important; }
    #doc_content iframe { width: 100%; }
    #total #indexPic, .product-total #indexPic, #totalDetail,
    #manager ul, #cook ul, #topography ul, #waiter dl, #customer dl {
        float: none; width: auto; margin: 16px 0;
    }
    #total img, .product-total img, #manager img, #waiter img, #cook img, #customer img, #topography img {
        float: none; height: auto; display: block; margin: 16px auto;
    }
    #content > img { width: 100%; height: auto; }
    #content > p { width: auto; margin: 24px 16px; padding: 0; overflow-wrap: anywhere; }
    #content > div[style] { width: auto !important; }
    #content > div > img { margin: 0 auto !important; float: none !important; }
    .download-content .info { margin-right: 0; padding-top: 16px; }
    .download-content td { display: block; text-align: center; }
    .download-content table { width: 100%; }
    .download-content .android_icon { margin: 0 auto; }
    .download-content .button1 { margin: auto; }
    .agentList .content, .agentList .content .listing .column { max-width: 100%; box-sizing: border-box; }
}
/* Small screens and short windows use normal document scrolling. */
@media (max-width: 1100px), (max-height: 650px) {
    html:has(.home-page), body.home-page { overflow: auto !important; height: auto !important; }
    .home-page #header { position: relative; }
    .home-page .section { padding: 28px 20px; box-sizing: border-box; }
    .home-page .section:nth-child(1), .home-page .section:nth-child(4) { background: #039ae3; }
    .home-page .section:nth-child(2) { background: #bb212a; }
    .home-page .section:nth-child(3) { background: #5bc13a; }
    .home-page .wrap { width: 100%; height: auto; }
    .home-page .s1, .home-page .s2, .home-page .s3, .home-page .s4 { position: static; margin: 0; }
    .home-page .b { margin: 0; width: auto; font-size: 26px; line-height: 1.5; }
    .home-page .s { margin: 16px 0; width: auto; font-size: 16px; }
    .home-page .s li { float: none; width: auto; height: auto; margin: 0; background: none; text-align: left; padding: 0; line-height: 1.8; }
    .home-page .more { position: static; margin: 20px 0 !important; }
    .home-page .bpic, .home-page .bpic1, .home-page .bpic2, .home-page .bpic3 {
        float: none; width: 100%; margin: 20px 0; display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-start;
    }
    .home-page .wrap .bpic img, .home-page .wrap .bpic1 img,
    .home-page .wrap .bpic2 img, .home-page .wrap .bpic3 img {
        position: static; float: none; width: auto; min-width: 0; max-width: 100%; height: auto; max-height: 400px; margin: 0;
    }
    .home-page .wrap img.p4 { display: none; }
    .home-page #foot { position: static; width: 100%; height: auto; padding: 8px 0; }
    .home-page #leftsead { display: none; }
}
@media (min-width: 1101px) and (min-height: 651px) {
    .home-page .wrap {
        width: 90%; max-width: 1280px; height: 100%; box-sizing: border-box;
        display: grid; grid-template-columns: minmax(300px, 36%) 1fr;
        grid-template-rows: auto 1fr; gap: 24px; padding: 100px 0 80px;
    }
    .home-page .s1, .home-page .s2, .home-page .s3, .home-page .s4 { position: static; margin: 0; grid-column: 1; grid-row: 1; }
    .home-page .b { margin: 0; width: auto; font-size: 30px; line-height: 1.4; }
    .home-page .s { margin: 16px 0 0; width: auto; font-size: 16px; }
    .home-page .s li { float: none; width: auto; height: auto; margin: 0; text-align: left; background: none; padding: 0; line-height: 1.8; }
    .home-page .more { position: static; grid-column: 1; grid-row: 2; margin: 0 !important; align-self: start; }
    .home-page .bpic, .home-page .bpic1, .home-page .bpic2, .home-page .bpic3 {
        grid-column: 2; grid-row: 1 / 3; display: flex; align-items: center; justify-content: center;
        float: none; width: 100%; margin: 0; min-height: 0;
    }
    .home-page .wrap .bpic img, .home-page .wrap .bpic1 img, .home-page .wrap .bpic2 img {
        position: static; float: none; min-width: 0; width: 33.333%; height: auto; max-height: 100%; object-fit: contain; margin: 0;
    }
    .home-page .wrap img.p4 { position: absolute; left: 0; bottom: 85px; width: 135px; height: auto; }
    .home-page .bpic1 { flex-wrap: wrap; }
    .home-page .wrap .bpic1 img:not(.p4) { width: 50%; max-height: 50%; }
    .home-page .bpic3 { flex-direction: column; gap: 12px; }
    .home-page .bpic3 img { max-width: 100%; max-height: 65%; width: auto; height: auto; object-fit: contain; margin: 0; }
    .home-page .bpic3 img.huo { max-height: 25%; }
}
.home-page #header { top: 0; left: 0; }