/* layout.css */
/*      
font-family: 'Noto Sans TC', sans-serif;  中文黑體
font-family: 'Righteous', cursive;    英文方圓體
font-family: 'Lobster', cursive;      英文草寫體
font-family: 'Righteous', 'Noto Sans TC', sans-serif;  英文方圓體=>中文黑體=>電腦系統預設無襯線字體
*/
/* document all & default ================================================ */
* { margin: 0; padding: 0; }
body { background-color: #333; color: #000; font-size: 15px; letter-spacing: 1px;
  font-family: Helvetica, Arial, STHeiti, "Microsoft JhengHei", 微軟正黑體, sans-serif; }

a { text-decoration: none; }
ul,ol,li { list-style: none; }

h1,h2,h3 { font-family: 'Righteous', 'Noto Sans TC', sans-serif; }
.ts-bg-dark { background-color: #333; color: #fff; }
.ts-flexbox { display: flex; flex-wrap: wrap; }
.ts-flex-center {justify-content: space-between; align-items: center; }
.ts-flex-between { display: flex; justify-content: space-between; align-items: center; }

.ts-container { max-width: 96%; margin: 0 auto; }
@media(min-width:1300px){ .ts-container { max-width: 1300px; } }

/* header area & 相關選單按鈕 ================================================ */
header { box-shadow: 0 4px 4px rgba(0, 0, 0, 0.7);  }
.w3-top, .w3-bottom { z-index: 9999; }
.showMenu { padding: 5px 12px; border-radius: 50%; }
a.logo { width: 80%; /*text-align: center;*/ padding: 10px; }
a.logo img { width: 70%; height: auto; max-width: 250px; }

nav.w3-bar { width: auto; }
.w3-bar .w3-bar-item { font-size: 17px; padding: 6px;
  font-family: 'Righteous', 'Noto Sans TC', sans-serif; }

@media(min-width:601px){ 
  a.logo { width: auto; } 
  a.logo img { width: 100%; } 
}
@media(min-width:1100px){ .w3-bar .w3-bar-item{ padding: 8px 12px; } }

.shareBtnArea { white-space: nowrap; }
.shareBtnArea a { background-image: url(../images/shareBtnfooter.png); width: 28px; height: 28px; margin-left: 7px; text-indent: -9999px; display: inline-block; }
.shareBtnArea a:nth-of-type(1) { background-position:    0px 0px; }
.shareBtnArea a:nth-of-type(2) { background-position:  -28px 0px; }
.shareBtnArea a:nth-of-type(3) { background-position:  -56px 0px; }
.shareBtnArea a:nth-of-type(4) { background-position:  -84px 0px; }
.shareBtnArea a:nth-of-type(5) { background-position: -112px 0px; }
.shareBtnArea a:nth-of-type(1):hover { background-position:    0px -28px; }
.shareBtnArea a:nth-of-type(2):hover { background-position:  -28px -28px; }
.shareBtnArea a:nth-of-type(3):hover { background-position:  -56px -28px; }
.shareBtnArea a:nth-of-type(4):hover { background-position:  -84px -28px; }
.shareBtnArea a:nth-of-type(5):hover { background-position: -112px -28px; }
@media(max-width:600px){ 
  .shareBtnArea { position: absolute; right: 0; top: 0px; width: 80px; height: auto; white-space: normal; text-align: right; padding: 5px; } 
  .shareBtnArea a {  }
}

/* #main area ============================================================== */
#main { min-height: 300px; padding: 130px 0 30px;
  background-image: url(../images/dark42.png); }


/* footer area ============================================================== */
footer { font-size: 13px; padding: 20px; box-shadow: 0 -4px 4px #000; color:#ccc; }