@charset "UTF-8";
/* ==========================================================================
   Mixin    
   ========================================================================== */
/* ==========================================================================
   Variables	
   ========================================================================== */
/* ==========================================================================
   Font styles	
   ========================================================================== */
@font-face {
  font-family: 'gt-walsheim-web';
  src: url("../font/gt-walsheim-bold/gt-walsheim-web.eot");
  src: url("../font/gt-walsheim-bold/gt-walsheim-web.eot?iefix") format("eot"), url("../font/gt-walsheim-bold/gt-walsheim-web.woff") format("woff"), url("../font/gt-walsheim-bold/gt-walsheim-web.ttf") format("truetype"), url("../font/gt-walsheim-bold/gt-walsheim-web.svg") format("svg");
  font-weight: normal;
  font-style: normal; }
  
@font-face {
  font-family: 'gt-walsheim-bold';
  src: url("../font/gt-walsheim-bold/gt-walsheim-bold-webwoff.eot");
  src: url("../font/gt-walsheim-bold/gt-walsheim-bold-webwoff.eot?iefix") format("eot"), url("../font/gt-walsheim-bold/gt-walsheim-bold-webwoff.woff") format("woff"), url("../font/gt-walsheim-bold/gt-walsheim-bold-webwoff.ttf") format("truetype"), url("../font/gt-walsheim-bold/gt-walsheim-bold-webwoff.svg") format("svg");
  font-weight: normal;
  font-style: normal; }
/* ==========================================================================
   Basic
   ========================================================================== */
body {
  line-height: 1.4em;
  -webkit-font-smoothing: antialiased; }

ul {
  list-style: none;
  padding: 0;
  margin: 0; }

a {
  color: inherit;
  cursor: pointer; }
  a.underline {
    text-decoration: underline; }
  a:hover {
    text-decoration: none;
    color: inherit; }
  a:active, a:visited, a:focus {
    text-decoration: none;
    color: inherit; }

i:hover {
  opacity: 0.5;
  filter: alpha(opacity=50); }

.bilingual-walsheim, .nav-container {
  font-family: 'gt-walsheim-web', 'static-bold', '微軟正黑體', 'Microsoft JhengHei', 'STHeiti', '华文黑体', 'SimHei', '黑体', '新細明體', 'PMingLiU', '細明體', 'MingLiU', sans-serif; }

.bilingual, .button {
  font-family: Helvetica, Arial, '微軟正黑體', 'Microsoft JhengHei', 'STHeiti', '华文黑体', 'SimHei', '黑体', '新細明體', 'PMingLiU', '細明體', 'MingLiU', sans-serif; }

#home button {
  padding: 5px 10px; }

.button {
  display: inline-block;
  line-height: 1.4em;
  color: #666666;
  background-color: white;
  font-size: 12px;
  font-weight: 700;
  border: 1px solid #c3c3c3;
  padding: 5px 10px;
  text-transform: none;
  cursor: pointer;
  -webkit-transition-property: none;
  -moz-transition-property: none;
  -o-transition-property: none;
  transition-property: none; }
  .button:hover {
    background-color: black;
    color: white;
    border-color: black;
    border: 1px solid black; }
  .button.black {
    background-color: transparent;
    color: white;
    border: 1px solid white; }
    .button.black:hover {
      background-color: white;
      color: black;
      border-color: white; }

/* ==========================================================================
   Nav
   ========================================================================== */
nav {
  -webkit-transition: border 0.4s ease-in-out 0s;
  -moz-transition: border 0.4s ease-in-out 0s;
  -ms-transition: border 0.4s ease-in-out 0s;
  -o-transition: border 0.4s ease-in-out 0s;
  transition: border 0.4s ease-in-out 0s;
  text-align: center;
  position: fixed;
  width: 100%;
  background-color: transparent;
  /* z-index: 20; */
  z-index: 100000;  }
  nav .icon-menu {
    -webkit-transition: all 0.4s ease-in-out 0s;
    -moz-transition: all 0.4s ease-in-out 0s;
    -ms-transition: all 0.4s ease-in-out 0s;
    -o-transition: all 0.4s ease-in-out 0s;
    transition: all 0.4s ease-in-out 0s;
    position: absolute;
    top: 30px;
    left: 30px;
    cursor: pointer;
    font-size: 12px; }
  nav .welcome-message {
    top: 27px;
    left: 65px; }
  nav .icon-search {
    cursor: pointer;
    vertical-align: -2px;
    font-size: 14px;
    margin-left: 10px; }
    nav .icon-search:hover {
      opacity: 0.5;
      filter: alpha(opacity=50); }
  nav .right {
    -webkit-transition: all 0.4s ease-in-out 0s;
    -moz-transition: all 0.4s ease-in-out 0s;
    -ms-transition: all 0.4s ease-in-out 0s;
    -o-transition: all 0.4s ease-in-out 0s;
    transition: all 0.4s ease-in-out 0s;
    position: absolute;
    font-size: 0;
    top: 25px;
    right: 25px; }
  nav .logo {
    -webkit-transition: all 0.4s ease-in-out 0s;
    -moz-transition: all 0.4s ease-in-out 0s;
    -ms-transition: all 0.4s ease-in-out 0s;
    -o-transition: all 0.4s ease-in-out 0s;
    transition: all 0.4s ease-in-out 0s;
    font-family: 'gt-walsheim-bold' ,Arial, sans-serif;
    line-height: 78px;
    font-size: 20px; }
  nav .button {
    font-size: 10px;
    float: none !important;
    margin-left: 0 !important;
    padding: 5px 10px;
    margin-right: 10px;
    display: inline-block; }
  nav.scrolled {
    position: fixed;
    background-color: white;
    border-bottom: 1px solid black; }
    nav.scrolled .right {
      top: 18px;
      right: 20px; }
    nav.scrolled .logo {
      font-size: 14px;
      line-height: 50px; }
    nav.scrolled .button {
      border-width: 0;
      padding: 0;
      font-size: 12px;
      color: black;
      background-color: transparent; }
      nav.scrolled .button:hover {
        opacity: 0.5;
        filter: alpha(opacity=50); }
    nav.scrolled .icon-menu {
      top: 19px;
      left: 20px; }
    nav.scrolled .welcome-message {
      top: 16px;
      left: 55px; }

.admin nav {
  background-color: white; }

.welcome-message {
  -webkit-transition: all 0.4s ease-in-out 0s;
  -moz-transition: all 0.4s ease-in-out 0s;
  -ms-transition: all 0.4s ease-in-out 0s;
  -o-transition: all 0.4s ease-in-out 0s;
  transition: all 0.4s ease-in-out 0s;
  font-size: 12px;
  position: absolute;
  top: 66px;
  left: 20px; }

.nav-container {
  -webkit-transition: all 0.4s ease 0s;
  -moz-transition: all 0.4s ease 0s;
  -ms-transition: all 0.4s ease 0s;
  -o-transition: all 0.4s ease 0s;
  transition: all 0.4s ease 0s;
  background-color: black;
  width: 300px;
  height: 100vh;
  top: 0;
  left: -300px;
  position: fixed;
  color: white;
  line-height: 3em;
  text-align: left;
  /* z-index: 40; */
  z-index: 100002;
}

.nav-container.on {
    left: 0; }
.nav-container ul {
    padding: 20px 30px; }
.nav-container ul li {
    -webkit-transition: all 0.2s ease-in-out 0s;
    -moz-transition: all 0.2s ease-in-out 0s;
    -ms-transition: all 0.2s ease-in-out 0s;
    -o-transition: all 0.2s ease-in-out 0s;
    transition: all 0.2s ease-in-out 0s;
    font-size: 18px;
    line-height: inherit; }
.nav-container ul li:hover {
    opacity: 0.5;
    filter: alpha(opacity=50); }
.nav-container ul .sub-menu {
    display: none;
    margin-bottom: 1em; }
.nav-container ul .sub-menu li {
    font-size: 14px;
    line-height: 2em; }

.fader {
  -webkit-transition: all 0.4s ease 0s;
  -moz-transition: all 0.4s ease 0s;
  -ms-transition: all 0.4s ease 0s;
  -o-transition: all 0.4s ease 0s;
  transition: all 0.4s ease 0s;
  width: 100%;
  height: 100%;
  position: fixed;
  z-index: 100001;
  pointer-events: none;
  cursor: pointer;
  background-color: rgba(255, 255, 255, 0); }
  .fader.on {
    background-color: rgba(255, 255, 255, 0.8);
    pointer-events: auto; }

#search-overlay {
  position: fixed;
  z-index: 9999;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  display: none; }
  #search-overlay div span {
    display: block;
    margin-top: 5px; }
  #search-overlay div:first-child {
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -350px;
    margin-top: -76px;
    z-index: 9999; }
  #search-overlay #search-bg {
    opacity: 0.9;
    filter: alpha(opacity=90);
    background-color: #fff;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    position: fixed;
    z-index: 9998; }

/* ==========================================================================
   Footer
   ========================================================================== */
footer {
  position: relative;
  background-color: black;
  min-height: 50px;
  color: #c3c3c3;
  font-size: 12px; }
  footer i:hover {
    opacity: 1;
    filter: alpha(opacity=100);
    color: white; }
  footer ul {
    display: inline; }
    footer ul li {
      display: inline;
      line-height: 50px; }
  footer .with-divider {
    margin-left: 17px; }
    footer .with-divider a {
      color: #c3c3c3; }
      footer .with-divider a:hover, footer .with-divider a.on {
        color: white; }
    footer .with-divider li:after {
      color: #c3c3c3; }
  footer .pull-right {
    line-height: 50px;
    margin-right: 17px; }
    footer .pull-right i {
      padding: 0 5px; }
    footer .pull-right .icon-facebook {
      margin-left: 10px; }
    footer .pull-right .icon-facebook, footer .pull-right .icon-instagram {
      vertical-align: -2px; }

.with-divider a {
  color: #666666; }
  .with-divider a:hover, .with-divider a.mixitup-control-active {
    color: black; }
.with-divider li {
  display: inline; }
  .with-divider li:after {
    content: " | ";
    margin-left: 6px;
    margin-right: 6px;
    color: #666666; }
  .with-divider li.last:after {
    content: ""; }

.loading footer, .loading nav, .loading #main-container {
  display: none; }

.loader {
  -moz-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  position: fixed;
  background-color: transparent;
  top: 50%;
  left: 50%; }

/* ==========================================================================
   Mobile
   ========================================================================== */
@media screen and (max-width: 768px) {
  nav {
    background-color: black;
    position: fixed; }
    nav .icon-menu {
      color: white;
      top: 19px;
      left: 20px !important; }
      nav .icon-menu i {
        padding: 0 !important; }
    nav .right {
      color: white;
      top: 18px;
      right: 20px; }
    nav .logo {
      color: white;
      font-size: 14px;
      line-height: 50px; }
    nav.scrolled {
      border-width: 0px;
      background-color: black; }

  .home .welcome-message {
    display: none; }

  .admin nav {
    background-color: black; }

  .nav-container {
    width: 80vw;
    left: -80vw;
    border-right: 1px solid white; }
    .nav-container.on {
      left: 0; }
    .nav-container ul {
      padding: 20px 20px; }
      .nav-container ul li {
        font-size: 16.8px; }

  footer {
    text-align: center; }
    footer .pull-right {
      float: none !important;
      margin-left: 20px; }

  #search-overlay input[type=text] {
    width: calc( 100vw - 40px);
    font-size: 20px; }
  #search-overlay div span {
    display: block;
    margin-top: 5px; }
  #search-overlay div:first-child {
    position: absolute;
    left: 20px;
    top: 50%;
    margin-left: 0;
    margin-top: -30px;
    z-index: 9999; } }