html {
    font-family: "Microsoft Jhenghei", 微軟正黑體, "Trebuchet MS", Arial, Helvetica, sans-serif;
    line-height: 1;
    font-size: 100%;
    background-color: #333333;
}

#tabC a {
  position: absolute;
  font-size: 0.8em;
  left:1em;
  top:1em;
  color:#ababab;
}

@media (max-width: 700px) {
  #tabC {display: none;}
}
/*=========================================================================
*
*header-wrap
*
===========================================================================*/

.container {max-width: 700px;margin:0 auto; position: relative;}

/*=========================================================================
*
*footer-wrap
*
===========================================================================*/

.footer-wrap {padding: 1em 0;line-height: 1.2;min-height: 159px;}
.foot-link {display: inline-block;margin: 8px 20px 8px 10px;}
.foot-link a {
  display: inline-block;
  font-size: 0;
  width:76px;
  height:76px;
  background-color: #484848; 
  border-radius: 5px;
  margin:5px;
}
.foot-link a:hover,.foot-link a:focus {background-color: #f1f1f1; }
.foot-youtube{background: url(../../images/foot-youtube.png)no-repeat center center;}
.foot-fb {background: url(../../images/foot-fb.svg)no-repeat center center;}
.foot-home {background: url(../../images/foot-home.svg)no-repeat center center;}
.foot-info {position: absolute;color: white;left:290px; top:17px;font-size: .95em;}
.infos span {display: block;}
@media (max-width: 800px) {
    .foot-link {margin: 8px 20px;}
    .foot-info {left:225px;}
}
@media (max-width: 650px) {
    .footer-wrap {min-height: 150px;}
    .foot-info {font-size: .9em;left:130px;}
    .foot-link {margin-left: 1em;margin-top:0px;}
    .foot-link a {
      width:38px;
      height:38px;
      border-radius: 20px;
      background-size: contain;
    }
}
@media (max-width: 554px) {
     .footer-wrap {min-height: 220px;}
     .foot-link {text-align: center;display: block;}
     .foot-link a {margin-top:0px;}
     .foot-info {position: static; padding:0 3em;margin-top: 15px;}
}
@media (max-width: 380px) {
     .foot-info {padding:0 2em;}
     .footer-wrap {min-height: 260px;}
     .infos span {margin:5px 0;}
     .infos i {/*display: block;*/ color:#3389ff;}
}

/*=========================================================================
*
*Animate
*
===========================================================================*/

 a,a:hover,a:focus,.header-logo,.nav-top,.foot-link,.foot-info
{
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -ms-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
}