/*PageLink*/
.PageLink { width:100%; height:auto; margin-bottom:20px;}
.PageLink * { padding:0; margin:0; list-style:none; text-decoration:none;}
.PageLink ul { gap:20px;
display: flex;
flex-wrap:wrap;}
.PageLink ul li  { width:calc( 25% - ( 20px * 3 / 4 ) );
/*基礎動畫*/
transition:box-shadow .5s, border .5s;
}
.PageLink ul li a { display:block; width:100%; height:auto; text-align:center;
/*圓角*/
border-radius:10px;}
.PageLink ul li a .photo { display:block; width:100%; height:380px; overflow:hidden; margin-bottom:10px;
/*圓角*/
border-radius:10px;
/*陰影*/
box-shadow: 1px 1px 3px 0px rgba(0, 0, 0, 0.2);}
.PageLink ul li a .photo img { display:block; height:380px; object-fit: cover;
/*圓角*/
border-radius:10px;
/*基礎動畫*/
transition:transform .5s;}
.PageLink ul li a:hover img,
.PageLink ul li a:active img {transform: scale(1.1);}
.PageLink ul li a:focus .photo { height:376px;}
.PageLink ul li a:focus .photo img { height:376px;}
@media only screen and (min-width:0px) and (max-width:1600px) {
	.PageLink ul li a .photo { width:calc( ( ( 100vw - 20px ) / 4 ) - ( 20px * 3 / 4 ) ); height:calc( ( ( 100vw - 20px ) / 4 ) - ( 20px * 3 / 4 ) );}
	.PageLink ul li a .photo img { min-height:calc( ( ( 100vw - 20px ) / 4 ) - ( 20px * 3 / 4 ) ); max-height:calc( ( ( 100vw - 20px ) / 4 ) - ( 20px * 3 / 4 ) );}
	.PageLink ul li a:focus .photo { width:calc( ( ( 100vw - 20px ) / 4 ) - ( 20px * 3 / 4 ) - 4px ); height:calc( ( ( 100vw - 20px ) / 4 ) - ( 20px * 3 / 4 ) - 4px );}
	.PageLink ul li a:focus .photo img { min-height:calc( ( ( 100vw - 20px ) / 4 ) - ( 20px * 3 / 4 ) - 4px ); max-height:calc( ( ( 100vw - 20px ) / 4 ) - ( 20px * 3 / 4 ) - 4px );}
}
@media only screen and (min-width:0px) and (max-width:768px) {
	.PageLink ul li  { width:calc( 33.33% - ( 20px * 2 / 3 ) );}
	.PageLink ul li a .photo { width:calc( ( ( 100vw - 20px ) / 3 ) - ( 20px * 2 / 3 ) ); height:calc( ( ( 100vw - 20px ) / 3 ) - ( 20px * 2 / 3 ) ); margin-bottom:5px;}
	.PageLink ul li a .photo img { min-height:calc( ( ( 100vw - 20px ) / 3 ) - ( 20px * 2 / 3 ) ); max-height:calc( ( ( 100vw - 20px ) / 3 ) - ( 20px * 2 / 3 ) );}
	.PageLink ul li a:focus .photo { width:calc( ( ( 100vw - 20px ) / 3 ) - ( 20px * 2 / 3 ) - 4px ); height:calc( ( ( 100vw - 20px ) / 3 ) - ( 20px * 2 / 3 ) - 4px );}
	.PageLink ul li a:focus .photo img { min-height:calc( ( ( 100vw - 20px ) / 3 ) - ( 20px * 2 / 3 ) - 4px ); max-height:calc( ( ( 100vw - 20px ) / 3 ) - ( 20px * 2 / 3 ) - 4px );}
	.PageLink ul li span.name { font-size:0.8em;}
}
@media only screen and (min-width:0px) and (max-width:512px) {
	.PageLink ul { gap:15px;}
	.PageLink ul li  { width:calc( 50% - ( 15px * 1 / 2 ) );}
	.PageLink ul li a .photo { width:calc( ( ( 100vw - 20px ) / 2 ) - ( 15px * 1 / 2 ) ); height:calc( ( ( 100vw - 20px ) / 2 ) - ( 15px * 1 / 2 ) );}
	.PageLink ul li a .photo img { min-height:calc( ( ( 100vw - 20px ) / 2 ) - ( 15px * 1 / 2 ) ); max-height:calc( ( ( 100vw - 20px ) / 2 ) - ( 15px * 1 / 2 ) );}
	.PageLink ul li a:focus .photo { width:calc( ( ( 100vw - 20px ) / 2 ) - ( 15px * 1 / 2 ) - 4px ); height:calc( ( ( 100vw - 20px ) / 2 ) - ( 15px * 1 / 2 ) - 4px );}
	.PageLink ul li a:focus .photo img { min-height:calc( ( ( 100vw - 20px ) / 2 ) - ( 15px * 1 / 2 ) - 4px ); max-height:calc( ( ( 100vw - 20px ) / 2 ) - ( 15px * 1 / 2 ) - 4px );}
}