/* mobile.css - responsive overrides for NinBao.com (pure ASCII, safe for any charset) */
/* Two breakpoints: <=1023px tablet, <=640px phone. Desktop styles untouched. */

/* ---------- common ---------- */
@media screen and (max-width:1023px) {

  .w980, #wrapper { width: auto; max-width: 980px; padding: 0 10px; }
  h2 { width: auto; margin: 14px 10px; }

  /* header */
  #header { height: auto; padding-bottom: 12px; }
  #header h1 { float: left; }
  .search { width: auto; }
  .searchbox { margin-left: 20px; _margin-left: 10px; width: 190px; }
  .contact { width: 180px; }

  /* recommended grid on home banner: 3 per row */
  .banner_box { width: auto; overflow: visible; }
  .tjlogo { width: 33.3%; box-sizing: border-box; }
  .domain_logo { width: auto; }
  .banner img { max-width: 100%; }

  /* domain list rows: 2 per row */
  dl { width: auto; }
  dd { width: 50%; box-sizing: border-box; height: auto; }
  dd a { width: auto; height: auto; padding: 8px 12px; }
  dd a i { display: block; float: none; }
  dd a em { display: block; float: none; white-space: normal; height: auto; line-height: 1.5; }
  #table { width: auto; margin: 10px; }
  #table dd a { width: auto; }

  .column { width: auto; float: none; margin: 10px; }
  .tips { width: auto; margin: 0 10px 10px; }
  .links { padding: 0 10px; _margin-left: 0; }
}

/* ---------- phone ---------- */
@media screen and (max-width:640px) {

  body { font-size: 14px; }
  html, body { max-width: 100%; overflow-x: hidden; }
  a { -webkit-tap-highlight-color: rgba(6,149,207,.25); }

  /* header: stack vertically */
  #header { padding-bottom: 10px; }
  #header .w980 { padding: 0 10px; }
  #header h1 { float: none; text-align: center; padding-top: 10px; text-indent: 0; }
  /* the anchor keeps its text ("NinBao") only as SEO/alt text: hide it, show the bg logo */
  #header h1 a { display: inline-block; width: 250px; height: 94px; max-width: 100%;
                 background-size: contain !important; background-repeat: no-repeat !important;
                 background-position: center center !important;
                 color: transparent !important; font-size: 0 !important;
                 line-height: 0 !important; text-indent: 0;
                 overflow: hidden; white-space: nowrap; }

  /* search bar full width */
  .search { width: 100%; height: auto; float: none; margin-top: 8px; }
  .searchbox { float: left; width: 62%; box-sizing: border-box; margin: 0 0 0 4%;
               height: 42px; background-size: 100% 100%; background-position: top left; }
  .searchbox input { width: 88%; height: 32px; margin: 5px 4%; *margin-left: 0; _margin-left: 0;
                     font-size: 15px; }
  .searchbtn { float: left; width: 28%; height: 42px; margin-top: 0; }
  .searchbtn input { width: 100%; height: 42px; }
  .contact { float: none; width: 100%; height: auto; text-align: center; padding-top: 10px; }
  .contact img { height: 34px; width: auto; }

  /* nav: flex rows, every item same height, text never clipped or shifted */
  .nav { overflow: visible; }
  .nav .w980 { padding: 0; }
  .nav ul { display: -webkit-box; display: -webkit-flex; display: flex;
            -webkit-flex-wrap: wrap; flex-wrap: wrap;
            white-space: normal; font-size: 15px; margin: 0; padding: 0; }
  .nav ul li { display: block; float: none; -webkit-flex: 0 0 auto; flex: 0 0 auto;
               background: transparent; }
  .nav ul li a { display: block; float: none; height: auto !important;
                 min-height: 44px; line-height: 22px !important;
                 padding: 11px 14px; box-sizing: border-box;
                 font-size: 15px !important; white-space: nowrap;
                 border-left: 1px solid #444; }
  .nav ul li:first-child a { border-left: none; }
  .nav ul li.current { background: #f90; }
  .nav ul li.current a { background: #f90; color: #fff; font-weight: bold; }

  /* banner recommended grid: 2 per row, logo image scales */
  .banner { padding-top: 8px; }
  .banner_box table, .banner_box tbody, .banner_box tr {
      display: block; width: 100% !important; background: none; }
  /* flex instead of floats: every tile in a row gets the same height (no grey holes) */
  .banner_box td { display: -webkit-box; display: -webkit-flex; display: flex;
      -webkit-flex-wrap: wrap; flex-wrap: wrap;
      width: 100% !important; background: none; }
  /* height must stay auto: fixed 88px used to cut off the domain name line under each logo */
  .tjlogo { float: none; width: 50%; height: auto !important; padding: 6px;
            margin-bottom: 0; border: none; box-sizing: border-box;
            border-bottom: 1px solid #eee; }
  .domain_logo { padding: 6px; height: auto !important; width: auto;
                 display: -webkit-box; display: -webkit-flex; display: flex;
                 -webkit-flex-direction: column; flex-direction: column;
                 -webkit-align-items: center; align-items: center; }
  .banner img, .domain_logo img { width: 100% !important; height: auto !important; max-width: 220px; }
  .domain_logo b, .domain_logo b font { display: block; margin-top: 6px;
            font-size: 14px !important; line-height: 1.4; color: #333; }

  /* domain list: 2 per row (homepage dl>dd; the list page keeps its table layout) */
  dl { float: none; width: auto; padding-bottom: 4px; }
  dt { margin: 10px 8px; }
  dl > dd { width: 50%; box-sizing: border-box; height: auto; line-height: 1.4;
            border-bottom: 1px solid #e5e5e5; font-size: 14px; }
  dl > dd:nth-of-type(odd) { border-right: 1px solid #e5e5e5; }
  /* the list page puts dd inside <td>: let it fill the cell instead of 319px */
  dd { width: auto; height: auto; }
  dd a { width: auto; height: auto; padding: 9px 10px; position: relative; display: block; }
  dd a i { display: block; float: none; font-size: 14px; padding-right: 50px; }
  dd a em { display: block; float: none; margin-top: 2px; padding-left: 0;
            white-space: normal; height: auto; }
  /* price sits on the domain-name line, right aligned, never pushes the text away.
     IMPORTANT: match the direct child only. The price cell itself nests another
     span (span.fr > span.STYLE1), and styling the inner one as well turned the
     price into two lines ("598" then the yuan sign). */
  dd a > span { position: absolute; right: 8px; top: 8px; float: none;
                font-size: 13px; line-height: 1.4; color: #f60;
                white-space: nowrap; text-align: right; }
  dd a > span span { position: static; float: none; display: inline;
                     font-size: 13px; color: #f60; }

  /* detail page: stack the two columns, keep inner form rows */
  #table { width: auto; margin: 10px 8px; background: #fff; }
  #table > table > tbody > tr > td,
  #table > table > tr > td { display: block; width: 100% !important;
                             height: auto !important; padding: 6px 0; }
  /* left info column (40%) and the message form column -> stacked full width */
  #table td.xunjia { display: block; width: 100% !important; float: none; }
  #table td.xunjia + td { display: block; width: 100% !important; float: none;
                          padding-top: 10px; }
  #table img { max-width: 100%; height: auto; }
  /* tables must never expand past the screen (inputs with size= force min-width) */
  #table table { table-layout: fixed; width: 100% !important; }
  /* inputs in this CMS often omit the type attribute: match both cases */
  #table input:not([type]), #table input[type="text"], #table input[type="password"] {
      width: 92% !important; box-sizing: border-box; }
  #table textarea { width: 100% !important; box-sizing: border-box; }
  /* label cells ("E-mail:" etc.) must not break into two lines */
  #table td { white-space: normal; overflow-wrap: break-word; word-wrap: break-word; }
  #table form td:first-child { white-space: nowrap; }
  /* the tencent QQ badge is a fixed-width image: put it on its own line */
  #table a[href*="tencent"] { display: block; margin-top: 4px; }
  #table dd a { width: auto; }
  .xunjia table td { height: auto !important; padding: 5px 4px; }

  /* generic content tables / columns */
  .column { margin: 10px 8px; }
  .content { margin-top: 6px; }
  .content table { background: none; }
  .tips { width: auto; margin: 0 8px 10px; box-sizing: border-box; }

  /* forms: never overflow */
  input[type="text"], input[type="password"], select, textarea {
      max-width: 100%; box-sizing: border-box; }
  textarea { width: 100% !important; }
  input[type="image"] { max-width: 100%; }

  /* footer */
  #footer { width: auto; margin: 0 8px; font-size: 13px; }

  /* misc fixed-width leftovers */
  .sidebarnav { width: 70px; }
  .links span { width: 46%; max-width: 46%; }
}

/* ---------- mobile fixed action bar (call / QQ) ---------- */
/* hidden by default (desktop); only the phone breakpoint turns it on */
.fixbar { display: none; }

@media screen and (max-width:640px) {
  .fixbar { display: -webkit-box; display: -webkit-flex; display: flex;
            position: fixed; left: 0; right: 0; bottom: 0; z-index: 9999;
            height: 50px; padding-bottom: env(safe-area-inset-bottom, 0);
            box-sizing: content-box; box-shadow: 0 -2px 8px rgba(0,0,0,.18);
            -webkit-tap-highlight-color: transparent; }
  .fixbar a { -webkit-flex: 1 1 0%; flex: 1 1 0%;
              display: -webkit-box; display: -webkit-flex; display: flex;
              -webkit-align-items: center; align-items: center;
              -webkit-justify-content: center; justify-content: center;
              height: 50px; font-size: 16px; font-weight: bold;
              color: #fff !important; text-decoration: none !important;
              letter-spacing: .5px; }
  .fixbar a.call { background: #0b74d1; }
  .fixbar a.chat { background: #ff6a3d; }
  /* keep the page bottom clear of the bar, incl. iPhone home-bar inset */
  body { padding-bottom: 66px; }
  #footer { padding-bottom: 8px; }
}

/* ---------- category headings inside .column (dl > dt) ---------- */
/* style.css pins dt to height:18px; some phone browsers (Chrome/Samsung/WeChat X5)
   zoom the text up inside a fixed-height box, so the heading used to spill over
   the first domain row below it. Auto height + real line-height fixes the overlap. */
@media screen and (max-width:640px) {

  /* stop phone browsers from re-scaling our text sizes */
  html { -webkit-text-size-adjust: 100%; -moz-text-size-adjust: 100%; text-size-adjust: 100%; }

  /* each category block must contain its own floated dd's, otherwise the next
     block (e.g. the "links" column) slides into the right half of the previous row */
  .column dl, #wrapper dl { overflow: hidden; }
  .column dl:after, #wrapper dl:after {
      content: ""; display: block; clear: both; height: 0; overflow: hidden; }

  .column dt, #wrapper dl > dt {
      display: block !important;      /* overrides the inline display:inline of the links title */
      float: none !important;
      clear: both;
      height: auto !important;
      min-height: 24px;
      /* unitless: if a phone still scales the font up, the box grows with it */
      line-height: 1.5 !important;
      font-size: 16px !important;
      font-weight: bold;
      color: #00a8ff;
      margin: 12px 10px 8px !important;
      padding: 0 0 0 8px !important;
      border-left: 4px solid #00a8ff;
      overflow: visible;
  }

  /* the empty <a id="..."> jump anchors must not add the 10px offset style.css gives every dt a */
  .column dt a:not([href]) {
      display: inline-block !important; width: 0 !important; height: 0 !important;
      margin: 0 !important; padding: 0 !important; overflow: hidden; }

  /* the "more" link stays on the heading baseline, smaller and orange */
  .column dt a[href] {
      font-size: 12px !important; font-weight: normal; color: #f90;
      margin-left: 8px !important; vertical-align: baseline; }

  /* friendly-links list: a fixed height:15px used to clip the 14px text and stack
     the three names on top of each other, so give every item its own full line */
  .links { padding: 0 10px; }
  .links span {
      display: block; float: left; width: 48%; max-width: 48%;
      height: auto !important; line-height: 1.9 !important;
      margin: 0 2% 0 0 !important; overflow: visible; font-size: 14px; }
  .links span a { font-size: 14px; line-height: 1.9; }
}