@charset "utf-8";
/* CSS Document */
* { outline: none;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
 box-sizing: border-box;
 }
input,textarea{outline:none !important;}  
a{text-decoration:none;}
a:hover{ text-decoration:none ;}
a, a:hover, a:active {
	-webkit-transition: all 0.3s ease-in-out;
       -moz-transition: all 0.3s ease-in-out;
	     -o-transition: all 0.3s ease-in-out;
	    -ms-transition: all 0.3s ease-in-out;
	        transition: all 0.3s ease-in-out;
}


body, h1, h2, h3, h4, h5, h6, p, blockquote, th, td, div, dl, dt, dd, pre, code, form, fieldset, legend, input, button, textarea {
  margin: 0;
  padding: 0;
}

article,
aside,
details, /* 1 */
figcaption,
figure,
footer,
header,
main, /* 2 */
menu,
nav,
section,
summary { /* 1 */
  display: block;
}
body {	
	margin: 0px 0px 0px 0px; padding: 0;
	font-family:微軟正黑體;
	
	background-color: #f7f5f4;
	position: relative;
	-webkit-text-size-adjust: none;
}
#wrapper { margin:0px auto; width:100%; height:auto; }
header { margin:0px auto 0px auto; padding: 0; width:100%; height:auto; position: fixed; z-index: 999; background: #f7f5f4; box-shadow: 0px 0px 15px rgb(0 0 0 / 10%);}
main { margin:0px auto 0px auto; width:100%; height:auto;  padding:0px 0px 0px 0px;}
footer { margin:0px auto 0px auto; padding:30px 0 25px 0; width:100%;  display: flex; flex-direction: column; border-top: 1px solid #d6bd93;
background: url(../images/foot_bg.jpg) no-repeat top center; position: relative;
}
footer .top{ width: 66px; height: 68px; display: block; background: url(../images/top.png) no-repeat; background-size: 100% auto; 
position: absolute; top:-34px; left:calc(50% - 33px);
}
footer .small{ width: 22px; height: 41px; display: block; background: url(../images/logo_small.png) no-repeat; background-size: 100% auto; 
position: absolute; bottom:45px; right: 5%;
}
footer .box-2{ display: flex;
  justify-content: center;
  align-items: flex-start;  }
footer .f01{  width: 35%; 
	display: flex;
  justify-content: flex-start;
  flex-direction: column;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.8);
}
footer .f01 h1{ width: 100%; }
footer .f01 h1 img{ width: 310px; }
footer .f01 .infobox{ padding:0px 0px 0px 50px; line-height: 1.5;}
footer .f01 .infobox ul{ margin:18px 0 0px 0; padding:0px 0px 0px 0px; list-style: none;}
footer .f01 .infobox ul li{ margin:0 0 0px 0; padding:0px 0px 0px 0px; list-style: none; font-size: 16px; color: #595757;
}
footer .f01 .infobox .codebox{ display: flex; justify-content: flex-start; margin:18px 0px 0 0px;}
footer .f01 .infobox .codebox .code{ width: 80px;}
footer .f01 .infobox .codebox .code img{ width: 100%;}
footer .f01 .infobox .codebox .linkbox{ width:calc(100% - 80px); display: flex; flex-wrap: wrap; align-items: center; padding:0px 0px 0px 10px;}
footer .f01 .infobox .codebox .linkbox .link{ width:100%; font-size: 16px; color: #888686;}
footer .f01 .infobox .codebox .linkbox .link a{ color: #888686;}
footer .f01 .infobox .codebox .linkbox .social{ width:100%; justify-content: flex-start; margin: -10px 0px 0 0px;}

footer .f02{ display: flex; justify-content: center; width:auto; margin: 50px 0px 0px 0px;}
footer .f02 .level { padding: 0; margin: 0 80px 0px 0px; list-style: none; width:auto; font-size: 16px; line-height: 1.3; }
footer .f02 .level h2{ font-size: 18px; color: #ceb07c; font-weight: normal; margin: 0 0 12px 0; }
footer .f02 .level h2 a{ color: #ceb07c;}
footer .f02 .level h2 a:hover{ color: #c8161d;}
footer .f02 .level .list{  display: flex; justify-content: flex-start; }
footer .f02 .level .list ul{  padding: 0 20px 0 0; margin: 0 0px 0px 0px; list-style: none; width:50%;}
footer .f02 .level li{ padding: 0px 0px 12px 0px; margin: 0; list-style: none; display: flex; justify-content: flex-start; align-items: center; }
footer .f02 .level li a{ color: #82807f;}
footer .f02 .level li a:hover{ color: #595757;}
footer .design { font-size: 12px; color: #b2a29a; width:100%; margin: 30px 0 0 0; line-height: 1.5;}
footer .design .box-2{ display: flex; justify-content: center; }
footer .design .d01{ text-align: center;}
footer .design .d02{ margin: 0 0 0 2px;}
footer .design a{color: #b2a29a; }
footer .design a:hover{text-decoration:underline !important;}

@media only screen and (min-width: 0px) and (max-width: 1260px) {
footer .box-2{ justify-content:space-between;}
footer .f02 .level { margin: 0 40px 0px 0px; }
}
@media only screen and (min-width: 0px) and (max-width: 1100px) {
footer .box-2{ flex-wrap: wrap; justify-content: center;}
footer .f01{ width: 100%; align-items: center;}
footer .f01 h1 { text-align: center; }
footer .f01 h1 img{ width: 280px; }
footer .f02{ display: none; }
}
@media only screen and (min-width: 0px) and (max-width: 900px) {
footer { background: url(../images/foot_bg.jpg) no-repeat top left; }
}
@media only screen and (min-width: 0px) and (max-width: 600px) {
footer .design .box-2{ flex-wrap: wrap; }
footer .design .d01{ width: 100%;}
}