@charset "utf-8";

/*PageHost*/
.PageHost { width:100%; height:auto; overflow:hidden;}
.PageHost * { padding:0; margin:0; list-style:none; text-decoration:none;}
.PageHost ul { width:100%; height:auto; overflow:hidden;
/*flex*/
-webkit-flex-display:flex; display: flex;
flex-wrap:wrap;}
.PageHost ul li { width:24%; height:auto; overflow:hidden; float:left; margin-bottom:1rem; font-size:0.7rem; margin-right:1.33%;}
.PageHost ul li:nth-child(4n+4) { margin-right:0;}
.PageHost ul li > a:link,
.PageHost ul li > a:visited { color:black;}
.PageHost ul li > a:hover,
.PageHost ul li > a:active { color:darkblue; background:none;
display:block; width:100%; height:auto; overflow:hidden; padding:0;  font-size:1.4rem; line-height:1.4rem; float:left;}
.PageHost ul li > a:focus{ background:yellow; color:blue; border:2px dashed blue;}
.PageHost ul li > a:first-child { display:block; width:100%; height:auto; overflow:hidden;
/*圓角*/
border-radius:0.5rem;
/*基礎動畫設定*/
transition:all .5s;}
.PageHost ul li > a:first-child > img { display:block; width:100%; height:auto; float:left;
/*圓角*/
border-radius:0.5rem;
/*基礎動畫設定*/
transition:all .5s;
}
.PageHost ul li > a:first-child:hover { background:gold;}
.PageHost ul li > a:first-child:hover > img {
transform: scale(1.2);}
.PageHost ul li > a:first-child > img ~ span { display:block; width:100%; height:auto; overflow:hidden; padding:0.5rem 0;  font-size:1.4rem; line-height:1.4rem; float:left; position:relative; z-index:1;
/*基礎動畫設定*/
transition:all .3s;}
.PageHost ul li > a:first-child:hover > img ~ span,
.PageHost ul li > a:first-child:focus > img ~ span { background:gold;}
.PageHost ul li > a:first-child ~ span { display:block; opacity:0.6; width:100%; height:auto; overflow:hidden; margin-bottom:0.25rem;}
.PageHost ul li > a:first-child ~ a { display:inline-block; width:auto; height:auto; overflow:hidden; float:left; margin-right:0.25rem;}
.PageHost ul li > a:first-child ~ a img { display:block; max-width:100%; height:auto; float:left;}

@media only screen and (min-width:0px) and (max-width:960px) {
.PageHost ul {  -webkit-justify-content:space-between;justify-content:space-between; }
.PageHost ul li { width:48%; margin-right:0;}
}

@media only screen and (min-width:0px) and (max-width:360px) {
.PageHost ul li > a:first-child > img ~ span { font-size:1rem;}
}