/* CSS reset & all page default ================================================ */
* { margin: 0; padding: 0; box-sizing: border-box; }
body { background-color: #fff; color: #333; font-size: 16px; letter-spacing: 1px; 
  font-family: Arial, Verdana, 微軟正黑體, sans-serif; 
}
.ts-container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 10px; }
a { text-decoration: none; }


/* header area ================================================================= */
header { 
  position: absolute; top: 0; left: 0; width: 100%; font-weight: bold; z-index: 9; 
}
header .ts-container { 
  display: flex; justify-content: space-between; align-items: center; 
}
header .logo { font-size: 28px; color: #333; white-space: nowrap; }
header .logo img { width: 60px; height: auto; vertical-align: middle; }
header .nav-open { display: block; font-size: 2em; cursor: pointer; }

nav { 
  background-color: #0d500d; padding: 20px; position: absolute; top: 0; right: 0; display: none; 
}
nav a { display: block; padding: .5rem 2rem; font-size: 17px; color: #fff; }
nav .nav-close { 
  display: block; font-size: 2em; color: #fff;
  position: absolute; top: 10px; right: 10px; cursor: pointer; 
}


@media( min-width: 900px ){
  header .logo img { width: 80px; }
  header .nav-open, header .nav-close { display: none; }
  
  header nav { background-color: transparent; position: static; padding: 0; display: block; }
  nav a { 
    display: inline-block; padding: .5rem; margin-left: .5rem;
    font-size: 21px; color: #333; position: relative;
  }
  nav a::after { 
    content: ''; display: block; width: 100%; height: 3px; 
    background-color: #333; position: absolute; left: 0; bottom: 0; 
  }
  nav a:not(.active)::after { transform: scale(0,1); transition: .3s; }
  nav a:not(.active):hover::after { transform: scale(1,1); }
  
}