@import url('https://fonts.googleapis.com/css?family=Faster+One|Righteous');
@import url('https://fonts.googleapis.com/earlyaccess/cwtexhei.css');
/* font-family: 'Faster One', cursive; */
/* font-family: 'Righteous', cursive; */
/* font-family: 'cwTeXHei', sans-serif; */
* { padding: 0; margin: 0; }
ul, ol, li { list-style: none; }
a { text-decoration: none; color: #3e5881; }

body { background-image: url(layout/images/templatemo_body.jpg);
  max-width: 1200px; margin: 0 auto; }

.container { position: fixed; left: 0; top: 0; width: 100%; }

header { background-image: url(layout/images/templatemo_header.jpg); background-size: cover; 
  position: fixed; top: 0; max-width: 1200px; width: 100%; height: 120px;  }

header h1 { padding: 20px; font-size: 40px; font-weight: normal;
  font-family: 'Faster One', cursive; }
header h1 span { font-family: 'Righteous','cwTeXHei', sans-serif; 
  font-size: 16px; padding-left: 20px; }
@media(max-width:700px){ header h1 span { display: block; } }

/* #nav 區域 start ============================================================= */
ul#nav { background-color: black; height: 50px; width: 100%;
  position: absolute; left: 0; bottom: 0; z-index: 1000; }
ul#nav>li { float: left; position: relative; }
ul#nav>li>a { height: 50px; }

ul#nav a { display: block; color:#FFF; padding: 13px; box-sizing: border-box; 
  font-family: 'Righteous', cursive;}

ul#nav a:hover { color:deeppink; }

ul#nav>li>ul { background-color: #5f5f5f; color: white; display: none;
  position: absolute; left: 0; top: 50px; width: auto;
  box-shadow: 1px 5px 5px rgba(0, 0, 0, 0.6); }
ul#nav>li>ul>li>a { padding: 7px 17px; border-bottom: 1px solid gray; white-space: nowrap; }

ul#nav>li:hover>ul { display: block; }

ul#showMenu { display: none; }
ul#nav a#closeMenu { display: none; }
/* #nav 區域 end== ============================================================= */

#main { background-color: lightgray; padding: 15px; padding-top: 140px;
  display: flex; flex-wrap: wrap; justify-content: space-between; }

div.thumbnail { box-sizing: border-box; width: 220px; margin: 10px 0; padding: 7px; 
  background-color: rgba(255, 255, 255, 0.5); }
.thumbnail img { width: 100%; height: auto; }
div.thumbnail h2 { font-size: 15px; font-weight: normal; padding: 5px 0;
  font-family: 'Righteous', 'cwTeXHei', sans-serif; }
div.thumbnail p { font-size: 13px; text-align: justify; }

@media(max-width:1199px){ 
  header { height: 80px; border-bottom: 2px solid #000; }
  header h1 { padding: 15px 10px; font-size: 30px; }

  #main { padding-top: 100px; }
  div.thumbnail { width: 160px; }

  /* #nav選單------------------------------------------------- */
  ul#nav { position: fixed; top: 0; left: auto; right: -90%; box-sizing: border-box;
    width: 90%; max-width: 400px; height: 100vh; padding: 3%; overflow: hidden;
    background-color: rgba(0, 0, 0, 0.8); }

  ul#nav>li { float: none; }
  ul#nav>li>a { padding-bottom: 10px; height: auto; }
  ul#nav>li:hover>ul { display: none; }
  ul#nav>li>ul { position: static; }

  /* #showMenu按鈕-------------------------------------------- */
  ul#showMenu { display: block; position: absolute; top: 10px; right: 10px;
    padding: 10px; background-color: rgba(255, 255, 255, 0.4); cursor: pointer; }
  ul#showMenu li { background-color: rgba(255, 255, 255, 0.8); 
    width: 25px; height: 4px; margin-bottom: 4px; }
  ul#showMenu li:last-child { margin-bottom: 0; }

  /* #closeMenu按鈕-------------------------------------------- */
  ul#nav a#closeMenu { display: block; position: absolute; top: 0px; right: 10px; z-index: 9999;
    font-family: 'Faster One', cursive; font-size: 40px; color: #FFF; padding: 0; }
}

@media (max-width:350px){ div.thumbnail { width: 180px; } }