@charset "utf-8";
@import url("reset.css");

html {
	min-height: 100%;
}

header, html{
	background-repeat: repeat repeat;
}
/*------------menu---------------*/
.main-nav-wrapper{
	width:100%;
	z-index:20;
  background-color: #000;
}
.navi-wrapper {
  -webkit-transform:translateZ(0px);
  -webkit-transition:all 0.2s ease-in-out;
  background-color:#FFFFFF;
  padding:0px 0;
  position:relative;
  transition:all 0.2s ease-in-out;
  width:100%;
  z-index:2;
}

.logo {
  margin: 0 auto;
  max-width: 106px;
  padding-top: 10px;
}
.page{
	padding-bottom: 60px;/* 必須使用和footer相同的高度 */ 
}
a, a img{
	-webkit-backface-visibility:hidden;
    -webkit-transition:all 0.2s ease-in-out;
    transition:all 0.2s ease-in-out;
    color:#121212;
    text-decoration:none;
    transition:all 0.2s ease-in-out;
}
a:hover {
	color: #444444;
}
img.loader{
	-webkit-transition:opacity 0.4s ease-in;
    opacity:0;
    transition:opacity 0.4s ease-in;
}
a img:hover {
    opacity:0.91 !important;
}
a.pure-button:hover, button.buy:hover, button.button-small:hover, button.full-button:hover {
    background-color:#444444;
    color:#FFFFFF;
}
a.light-button:hover {
    background-color:#AAAAAA;
    color:#FFFFFF;
}
/*------------middle---------------*/
.global {
  padding: 0;
}

/*---------------footer bar*/
#footer{
  position: fixed;
  width:100%;
    margin: -60px auto 0 auto;
/*  padding-top: 10px;*/
  height:60px;
  clear: both;
/*  position:fixed;*/
  bottom:0;
}

/*---------------footer nobar*/
footer{
  position: fixed;
  width:100%;
  height:60px;
  bottom:0px; /* stick to bottom */
  margin: 0 auto;
  padding-bottom: 0px;
}
.clearfooter {
  clear:both;
  height: 60px;
}
footer .contact{
  position:fixed; /* 必要 */
  bottom:0;
  padding-top:20px;
  width:100%;
  height: 30px;
  background-color: #FFFFFF;
}
.nobar .contact{
  position:relative; /* 必要 */
  bottom:0;
  padding-top:20px;
  width:100%;
  height: 40px;
}
.footer-wrap {
  text-align:justify;
  margin:0 auto;
  max-width:100%;
}
.social{
  font-family:Arial, Helvetica, sans-serif;
  font-size:12px;
  margin-left:10px;
  color:#000000;
  margin-top:10px;
  display: inline;
  line-height: 28px;
}
.facebook{
  height: 25px;
  float: left;
  display: inline;
  margin-left: 10px;
  margin-bottom: 2px;
  cursor: pointer;
}
/*---------------footer language*/
.language * {
  font-family:brandon-grotesque, 'microsoft jhenghei', Arial, sans-serif;
  font-size:12px;
  font-style:normal;
  font-weight:normal;
  line-height:normal;
  list-style-type:none;
  text-align: center;
  margin: 0;
  padding: 0;
  z-index:9999;
}
.language {
  float:right;
}
.language a{
  color:#FFF;
  display:block;
  text-decoration:none;
  background: #333;
  padding: 10px 50px;
}
.language a:hover{
  color:#666666;
  background-position:initial initial;
  background-repeat:initial initial;
  cursor: pointer;
}
/*---------------submenu*/
.submenu * {
  font-family:brandon-grotesque, 'microsoft jhenghei', Arial, sans-serif;
  font-size:12px;
  font-style:normal;
  font-weight:normal;
  line-height:normal;
  list-style-type:none;
  margin: 0;
  padding: 0;
}
.submenu {
  float:right;
  margin-right:0px;
  margin-top:8px;
}
.submenu a{
  color:#000000;
  display: inline;
  text-decoration:none;
}
.submenu a:hover{
  color:#666666;
  background-position:initial initial;
  background-repeat:initial initial;
  cursor: pointer;
}
.submenu li{
  float:right;
  position:relative;
}
.submenu ul li{
  float:right;
  font-weight:bold;
  width:140px;
}
.submenu ul li a{
  font-weight:bold;
  padding-top:0px;
}
.response{
  position:relative;
  width:100%;
  margin:0 auto;
  bottom:0px;
  min-height: 100%;
  overflow:auto;
/*  padding-top:50px;*/
}
@media only screen and (min-width:769px) and (max-width:1013px){
footer {
  height:auto;
  position:fixed;
}
  footer .contact{
  height: auto;
  }
  .nobar .contact{
    height: auto;
    position:inherit;
  }
  .social{
    display: inline-block;
  }
  .facebook{
    display: inline-block;
  }
  .footer-wrap {
  text-align:center;
  margin:0 auto;
  max-width:350px;
  }
  /*---------------footer language*/
  .language {
  float:none;
}
  /*---------------submenu*/
  .submenu {
    float:none;
    margin-right:0px;
    margin-top:0px;
    margin-bottom: 20px;
    border-bottom: 1px dotted #333;
  }
  .submenu ul li{
    float:none;
    margin: 0 auto;
    line-height: 30px;
    text-align: center;
  }
}


@media only screen and (min-width:300px) and (max-width:768px){
  footer{
  position: inherit;
  height:auto;
  }
  footer .contact{
  height: auto;
  }
  .nobar .contact{
    height: auto;
    position:inherit;
  }
  .social{
    display: inline-block;
  }
  .facebook{
    display: inline-block;
  }
  .footer-wrap {
  text-align:center;
  margin:0 auto;
  max-width:350px;
  }
  /*---------------footer language*/
  .language {
  float:none;
}
  /*---------------submenu*/
  .submenu {
    float:none;
    margin-right:0px;
    margin-top:0px;
    margin-bottom: 20px;
    border-bottom: 1px dotted #333;
  }
  .submenu ul li{
    float:none;
    margin: 0 auto;
    line-height: 30px;
    text-align: center;
  }
}