/* ============================================================
   Responsive layout for xindejie site (table-based legacy pages)
   Keep original content layout; make it adaptive on mobile/tablet
   ============================================================ */

/* ---------- base ---------- */
html, body {
    max-width: 100%;
    overflow-x: hidden;
}

/* ---------- tablets & below ---------- */
@media (max-width: 980px) {
    body { font-size: 14px; }
    table { max-width: 100% !important; }
    img { max-width: 100% !important; height: auto !important; }
    input, select, textarea { max-width: 100% !important; box-sizing: border-box; }
    iframe, embed, object { max-width: 100% !important; }
}

/* ---------- phones ---------- */
@media (max-width: 768px) {
    /* hide top login bar */
    table.top { display: none !important; }

    /* logo + search row: stack & center */
    td[width="666"], td[width="300"] {
        display: block !important;
        width: 100% !important;
        text-align: center !important;
        float: none !important;
        padding: 4px 0 !important;
    }
    td[width="300"] .box, td[width="300"] form, td[width="300"] table {
        float: none !important;
        margin: 0 auto !important;
        text-align: center !important;
    }

    /* top nav: horizontal scroll */
    table[height="35"] {
        display: block !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        white-space: nowrap !important;
        -webkit-overflow-scrolling: touch;
    }
    table[height="35"] td {
        display: inline-block !important;
        float: none !important;
        width: auto !important;
        height: 35px !important;
        line-height: 35px !important;
        padding: 0 6px !important;
    }

    /* main two columns -> stack */
    td[width="15%"], td[width="85%"], td[width="84%"] {
        display: block !important;
        width: 100% !important;
        vertical-align: top !important;
    }
    td[width="15%"] table, td[width="15%"] img {
        margin: 0 auto !important;
        text-align: center !important;
    }

    /* generic table cells: stack vertically */
    table td, table td[width] {
        display: block !important;
        width: 100% !important;
        box-sizing: border-box;
        text-align: left !important;
    }
    table tr { display: block !important; width: 100% !important; }

    /* center aligned cells keep centered */
    td[align="center"], td[align="center"] * { text-align: center !important; }
    td[align="center"] p { margin: 4px auto !important; }

    /* content boxes */
    .box, .box1, .tableborder, .list_content, .position { width: 100% !important; max-width: 100% !important; }
    marquee { width: 100% !important; }

    /* footer: stack & center */
    td[colspan="2"] { text-align: center !important; }
    td[height="84"] { height: auto !important; padding: 10px 4px !important; line-height: 1.8 !important; }

    /* banner (ad) height keeps ratio */
    .banner img { display: block; }
}

/* ---------- small phones ---------- */
@media (max-width: 480px) {
    body { font-size: 13px; }
    h1, h2, h3 { word-break: break-all; }
    td { word-break: break-all; }
}