/* New home page chrome (design mock 示意1 / 示意2): hero header + top menu with drop-down + image footer.
 * Only used when <body data-layout="home">. Content columns keep the classes from Styles/common.css. */

body.home2 { background: #fff; min-width: 1000px; }

/* ---------- header ---------- */
#hd {
  position: relative;
  height: 390px;
  background: #cfe3f6 url(/images/home/hero.png) center top no-repeat;
  overflow: visible;
  z-index: 50;
}
/* black fade behind the menu (measured from mock 示意1: ~87% black at the top -> 0 at ~300px) */
#hd .hd-dark {
  position: absolute; inset: 0; pointer-events: none; transition: opacity .25s ease;
  background: linear-gradient(to bottom,
    rgba(0,0,0,.87) 0, rgba(0,0,0,.75) 50px, rgba(0,0,0,.49) 110px, rgba(0,0,0,.28) 160px,
    rgba(0,0,0,.16) 200px, rgba(0,0,0,.06) 250px, rgba(0,0,0,0) 300px);
}
#hd.open .hd-dark { opacity: 0; }
/* fade to white at the bottom of the hero */
#hd .hd-shade {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to bottom, rgba(255,255,255,0) 300px, #fff 390px);
}
#hd .hd-logo { position: absolute; left: 5px; top: 8px; z-index: 3; display: block; width: 209px; height: 161px; }
#hd .hd-logo img { display: block; width: 209px; height: 161px; border: 0; }

/* drop-down backdrop (示意2) */
#hd .hd-drop {
  position: absolute; left: 0; top: 0; width: 100%; height: 318px; z-index: 1;
  background: linear-gradient(to bottom, rgba(0,0,0,.96) 0, rgba(0,0,0,.71) 100%);
  opacity: 0; visibility: hidden;
  transition: opacity .25s ease, visibility .25s;
}
#hd.open .hd-drop { opacity: 1; visibility: visible; }

/* menu: 6 columns, 150px each, centred */
#hd .hd-nav {
  position: absolute; left: 50%; top: 0; z-index: 2;
  width: 900px; margin-left: -450px; padding-top: 24px;
  font-family: "Noto Sans TC", "Microsoft JhengHei", "PingFang TC", sans-serif;
}
#hd .hd-col { float: left; width: 150px; text-align: center; }
#hd .hd-title {
  display: block; padding: 0; text-decoration: none; cursor: pointer;
  font-family: "Noto Serif TC", "Source Han Serif TC", "PMingLiU", "MingLiU", serif;
  font-size: 17px; font-weight: 900; line-height: 22px; color: #fff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .55);
}
#hd .hd-title span {
  display: block; margin-top: 2px; font-family: "Noto Sans TC", "Microsoft JhengHei", sans-serif;
  font-size: 13px; font-weight: 400; line-height: 16px; color: #6aa6ee; text-shadow: 0 1px 3px rgba(0, 0, 0, .6);
}
#hd .hd-col:hover .hd-title span, #hd .hd-col.on .hd-title span { color: #b7e6ff; }

#hd .hd-sub {
  margin: 3px 0 0; padding: 0; list-style: none;
  max-height: 0; overflow: hidden; opacity: 0; transition: opacity .25s ease;
}
#hd.open .hd-sub { max-height: 260px; opacity: 1; }
#hd .hd-sub li { height: 34px; line-height: 34px; }
#hd .hd-sub a {
  display: inline-block; font-size: 15px; color: #fff; text-decoration: none;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .5);
}
#hd .hd-sub a:hover { color: #6fd0ff; }

/* ---------- content ---------- */
body.home2 #wrapper { height: auto; }
body.home2 #main { margin-top: 0; padding-top: 20px; }

/* ---------- footer (the whole strip, icons included, is one image) ---------- */
#ft {
  position: relative; height: 155px; margin-top: 30px; clear: both;
  background: #2c4478 url(/images/home/footer.webp) center top no-repeat;
}
#ft .ft-inner { position: absolute; left: 50%; top: 0; width: 0; height: 155px; }
#ft .ft-icon {
  position: absolute; top: 30px; width: 36px; height: 36px; margin-left: -18px;
  border-radius: 50%; text-indent: -9999px; overflow: hidden; display: block;
}
#ft .ft-icon:hover { box-shadow: 0 0 0 2px rgba(255, 255, 255, .6); }
/* x offsets of the four icons inside the 1920px image, relative to its centre (960) */
#ft .ft-mail { left: -81px; }
#ft .ft-fb { left: -27px; }
#ft .ft-x { left: 27px; }
#ft .ft-plurk { left: 81px; }

/* column centres measured from the mock (px offsets from an even 150px grid) */
#hd .hd-col:nth-child(1) { position: relative; left: 4px; }
#hd .hd-col:nth-child(2) { position: relative; left: -12px; }
#hd .hd-col:nth-child(3) { position: relative; left: -11px; }
#hd .hd-col:nth-child(4) { position: relative; left: -12px; }
#hd .hd-col:nth-child(5) { position: relative; left: -11px; }
#hd .hd-col:nth-child(6) { position: relative; left: -2px; }

/* side banner with a single picture: no pager dots, so drop the 10px strip reserved for them */
.index_bannerSide.no-dots { height: 120px; }
.index_bannerSide.no-dots ul.link { display: none; }