@import url('../fonts/fonts.css?v=4');

ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, body, html, div.paragraph, blockquote, fieldset, input, iframe, img { margin: 0; padding: 0; border: 0; }
a img { border: 0; }
a { text-decoration: none; }
body { -webkit-font-smoothing: antialiased; -moz-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
html { height: 100%; }
body { background: #fff; width: 100%; height: 100%; margin: 0 !important; padding: 0 !important; }
#wrapper { position: relative; width: 100%; height: 100%; }
#panel-one, #panel-two { width: 50%; }
#panel-one { position: fixed; left: 0; top: 0; height: 100%; overflow: hidden; }
#panel-two { position: relative; left: 0; margin-left: 50%; }
.postload #panel-two { height: 100%; }
.container { padding: 40px 80px; }
#footer { position: relative; }
body { color: #333333; font: 16px/1 'Noto Sans TC', arial, sans-serif; }
a { color: #999999; transition: all 200ms linear; }
h2 { font-family: 'Montserrat', 'Noto Sans TC', sans-serif; font-weight: 400; margin: 0 auto 2em; font-size: 1.25em; letter-spacing: -0.025em; text-align: center; }
div.paragraph { margin: 0 auto 2em; line-height: 1.75; }
.paragraph a, div.paragraph a { color: inherit; }
.paragraph a:hover, div.paragraph a:hover { text-decoration: underline; }

/* About Dim. 左欄小標籤 */
.about-dim-label { font-size: 13px !important; font-weight: 700 !important; margin-top: 9px; }

/* About Dim. 左右兩欄改用 flex，兩欄從同一條頂線開始對齊，不受表格儲存格行高影響 */
.about-dim-row { display: flex; align-items: flex-start; }
.about-dim-row-label { width: 24%; padding: 0 15px; box-sizing: border-box; }
.about-dim-row-content { width: 76%; padding: 0 15px; box-sizing: border-box; }
.about-dim-row-content div.paragraph { margin: 0; line-height: 1.75; }

/* 分隔裝飾圖片（div_13/div_12/div_16） */
.wsite-image-border-none { margin-left: 0; margin-right: 0; text-align: center; padding-top: 5px; padding-bottom: 15px; }
.wsite-image-lg { padding-top: 20px; padding-bottom: 20px; }
#about-dim-section .wsite-image-border-none { padding-top: 25px; }
.wsite-image-caption { display: block; font-size: 90%; }

/* 按鈕上下留白與置中包裝（原本每顆按鈕都重複同一段 inline style） */
.btn-spacer { height: 10px; overflow: hidden; }
.btn-wrap { text-align: center; }

/* 內文區塊標題/段落預設白字（原站內嵌 style 就是這樣設定，個別文字若有自己的 <font color> 會蓋過這條規則） */
#wsite-content h2 { color: #fff !important; }
#wsite-content div.paragraph { color: #fff !important; }

/* 左側滿版星空背景（原本 Weebly 的 wsite-background） */
.wsite-background, .shade { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.wsite-background { z-index: 0; background: url(../images/background_stars.jpg) center center no-repeat; background-size: cover; }
.shade { position: absolute; z-index: 1; background: rgba(51,51,51,0.6); background: linear-gradient(to bottom,rgba(51,51,51,0.2) 0%,rgba(51,51,51,0) 100%); }

#logo { position: absolute; }
#logo { top: 40px; left: 0; padding: 0 90px; text-align: center; box-sizing: border-box; z-index: 1; }
#wsite-title { color: #fff; font-family: 'Montserrat'; font-size: 1.6em; line-height: 1.25; font-weight: 900; text-transform: uppercase; letter-spacing: 0.08em; }
#logo a { color: #fff; }

.nav li { list-style: none; }
.nav li a { color: #999999; display: block; padding: 10px 20px; font-family: 'Montserrat', 'Noto Sans TC', sans-serif; font-size: 1.15em; font-weight: 500; text-transform: uppercase; }
.nav #active a, .nav a:hover { color: #fff; }
.nav { position: fixed; top: 0; left: 0; height: 100%; padding: 80px 40px; box-sizing: border-box; border: none; text-align: center; overflow: hidden; }
.w-navpane { width: 50%; background: #222222; opacity: 0; z-index: -1; transition: opacity .35s ease-in-out, z-index .1s .35s ease-in-out; }

.hamburger { position: fixed; top: 40px; left: 40px; z-index: 6; cursor: pointer; width: 36px; height: 36px; border-radius: 50%; background: transparent; box-sizing: border-box; transition: background 200ms linear; }
.hamburger .line { position: absolute; left: 50%; width: 16px; height: 2px; background: #fff; transform: translateX(-50%); transition: all 200ms linear; }
.hamburger .line1 { top: 13px; }
.hamburger .line2 { top: 17px; }
.hamburger .line3 { top: 21px; }
body.w-navpane-is-open .hamburger { background: rgba(0,0,0,0.35); }
body.w-navpane-is-open .hamburger .line1 { top: 17px; transform: translateX(-50%) rotate(45deg); }
body.w-navpane-is-open .hamburger .line2 { opacity: 0; }
body.w-navpane-is-open .hamburger .line3 { top: 17px; transform: translateX(-50%) rotate(-45deg); }
.overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: #000; opacity: 0; z-index: -1; transition: opacity .35s ease-in-out, z-index .1s .35s ease-in-out; }
body.w-navpane-is-open #nav { opacity: 1; z-index: 5; transition: opacity .35s ease-in-out; }
body.w-navpane-is-open #wrapper .overlay { opacity: .70; z-index: 5; transition: opacity .35s ease-in-out; }

hr.styled-hr { height: 1px; background: #D8D8D8; border: none; }

.wsite-button, .wsite-button-inner { float: none !important; height: auto !important; margin: 0 !important; padding: 0 !important; background: none !important; line-height: 1 !important; font-family: "Montserrat", "Noto Sans TC", sans-serif; font-weight: 500; text-transform: uppercase; letter-spacing: -0.02em; }
.wsite-button .wsite-button-inner { display: inline-block; padding: 0.85em 1.5em 0.75em !important; color: #ffffff !important; background: rgba(51,51,51,0.6) !important; border-color: rgba(51,51,51,0.6) !important; transition: all 200ms linear; }
.wsite-button:hover .wsite-button-inner { background: #333333 !important; border-color: #333333 !important; }
.wsite-button-highlight .wsite-button-inner { background: none !important; color: #333333 !important; border: 2px solid #333333 !important; }
.wsite-button-highlight:hover .wsite-button-inner { color: #ffffff !important; background: #333333 !important; border: 2px solid #333333 !important; }
.wsite-button-normal .wsite-button-inner { color: #ffffff !important; background: rgba(255,255,255,0.15) !important; border: 2px solid rgba(255,255,255,0.5) !important; }
.wsite-button-normal:hover .wsite-button-inner { background: rgba(255,255,255,0.3) !important; }

.wsite-multicol-table { width: 100%; border-collapse: collapse; }
.wsite-multicol-tr { display: table-row; }
.wsite-multicol-col { display: table-cell; vertical-align: top; }
.wsite-spacer { width: 100%; }
.wsite-image img { max-width: 100%; }

/* section 區塊 */
.wsite-section-wrap { width: 100%; }
.wsite-section-content { width: 100%; }

@media (max-width: 1024px) {
  body { font-size: 14px; }
  #panel-one, #panel-two { position: relative; width: 100%; }
  #panel-one { height: 400px; }
  #panel-two { margin-left: 0; }
  .postload #panel-two { height: auto; }
  .container { padding: 40px 60px; }
  #wsite-title { line-height: 1.5; }
  .nav { width: 100% !important; }
}

@media (max-width: 767px) {
  .wsite-multicol-table, .wsite-multicol-tbody, .wsite-multicol-tr { display: block; width: 100% !important; }
  .wsite-multicol-col { display: block !important; width: auto !important; max-width: 100% !important; margin: 0 auto 1em !important; }
  #panel-one { height: 220px; }
  .container { padding: 30px 20px; }
  .nav { padding: 60px 20px !important; }
  .hamburger { left: auto; right: 20px; top: 20px; }
  #logo { top: 20px; padding: 0 20px; }
  .wsite-section { height: auto !important; }
  .wsite-spacer { height: 15px !important; }
}