@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;
}
html {
  --top-spacing: 150px;
  scroll-padding-top: var(--top-spacing);
}
body {
	margin: 0px 0px 0px 0px; padding: 0;
	font-family: 'Noto Sans TC', 'Microsoft JhengHei', 'Microsoft YaHei', sans-serif;

	background-color: #fff;
	position: relative;
	-webkit-text-size-adjust: none;
	line-height: 1.5;

	margin: var(--top-spacing) auto;
}
#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: #FFF; 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:35px 0 0px 0; width:100%; position: relative; box-shadow: 0px 0px 15px rgb(0 0 0 / 10%);}
footer .box-2{ display: flex; justify-content: center; align-items: center; flex-wrap: wrap;}

footer .link{ width: 100%; margin:0 0 0px 0; padding:0px 0px 0px 0px; }
footer .link ul{ width: 100%; margin:0 0 0px 0; padding:0px 0px 0px 0px; list-style: none; display: flex; justify-content: center; align-items: center; flex-wrap: wrap;}
footer .link ul li{ margin:0 0 0px 0; padding:0px 0px; list-style: none; font-size:var(--font-f06); color: #666;  display: flex; justify-content: center; align-items: center; letter-spacing:2px; }
footer .link ul li:after {
  content: '．';
  display: block;
  font-size:var(--font-f06); color: #666; padding:0px 30px; 
}
footer .link ul li:last-child:after { display: none;}
footer .link ul li a{ color: #666;}
footer .link ul li a:hover{ color: var(--color-c01);}

footer .add{ width: 100%; margin:15px 0 0px 0; padding:0px 0px 0px 0px; }
footer .add ul{ width: 100%; margin:0 0 0px 0; padding:0px 0px 0px 0px; list-style: none; display: flex; justify-content: center; align-items: center; flex-wrap: wrap;}
footer .add ul li{ margin:0 0 0px 0; padding:0px 20px; list-style: none; font-size:var(--font-f06); color: #666;  display: flex; justify-content: center; align-items: center; letter-spacing:2px; }
footer .add ul li a{ color: #666;}
footer .add ul li a:hover{ color: var(--color-c01);}
footer .add ul li i{ font-size:var(--font-f04); color: #666; margin:2px 3px 0px 0;}

footer .community{ width: auto; position:absolute; right:5%; bottom:80px; }
footer .community ul{ margin:0 0 0px 0; padding:0px 0px 0px 0px; list-style: none; display: flex; justify-content: center; align-items: center; flex-wrap: wrap;}
footer .community ul li{ margin:0 5px; padding:0px 0px; width:33px; height:33px; border-radius: 100%; border:1px solid #858585; display: flex; justify-content: center; align-items: center; }
footer .community ul li a{ font-size:var(--font-f06); color: #858585; display: flex; justify-content: center; align-items: center;}
footer .community ul a{ font-size:var(--font-f06); color: #858585; display: flex; justify-content: center; align-items: center;}
footer .community ul li:hover{ border:1px solid var(--color-c01); background:var(--color-c01); }
footer .community ul li:hover i{ color: #fff; }
footer .community ul li i{ font-size:var(--font-f04); color: #858585; }


footer .design{ width: 100%; margin:30px 0 0px 0; padding:15px 0px; background:#dde9f7; }
footer .design .txt{ font-size: var(--font-f02); color: rgba(102, 102, 102, 0.5); display: flex; justify-content: center; align-items: center; }
footer .design .txt .t02{ margin: 0 0 0 10px; }
footer .design .txt a{color: rgba(102, 102, 102, 0.5); }
footer .design .txt a:hover{text-decoration:underline !important;}

@media (max-width: 1366px) {
footer .link ul li, footer .add ul li{ letter-spacing:0px; }
}
@media (max-width: 1280px) {
footer .link ul li, footer .add ul li{ letter-spacing:0px; }

footer .link ul li{ font-size:15px; line-height:1.8; }
footer .link ul li:after {
  content: '．';
  font-size:15px; padding:0px 10px; 
}
footer .add ul li{ font-size:var(--font-f04); }

footer .community{ width: 100%; margin:20px 0 0px 0; position:relative; right:auto; bottom:auto; }
footer .add ul li i{ display: none;}
}

@media (max-width: 1000px) {
footer .link ul li:after {
  content: '．';
  font-size:15px; padding:0px 0px; 
}
footer .add ul li{ width: 100%; margin:0 0 5px 0; padding: 0px 0px; text-align: center;}
}

@media (max-width: 800px) {
footer .design { justify-content: center; flex-wrap: wrap;}
footer .design .txt{ justify-content: center; flex-wrap: wrap;}
footer .design .txt .t01{ width: 100%; text-align: center; }
footer .design .txt .t02{ margin: 10px 0 0 0px; }
}