@charset "utf-8";

/*PageHost*/
.PageHost .pagination { margin: 20px 0;}
.PageHost * { padding:0; margin:0; list-style:none; text-decoration:none;}
.PageHost ul { width:100%; height:auto;
/*flex*/
display: flex;
flex-wrap:wrap;
gap:40px;}
.PageHost ul li { width:calc( 25% - ( 40px * 3 / 4 ) ); text-align:center;}
.PageHost ul li a { display:block; width:100%; height:auto;
/*圓角*/
border-radius:30px;}
.PageHost ul li span { display:block; width:100%; height:auto;}
.PageHost ul li span.photo { width:365px; height:365px; position:relative; margin-bottom:15px;
/*圓角*/
border-radius:100%;
/*基礎動畫*/
transition:box-shadow .5s, transform .5s;
/*陰影*/
box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.2);}
.PageHost ul li span.photo:before { content:''; display:block; width:100%; height:100%; position:absolute; top:0; left:0; border:4px solid rgb(25,120,240,1); opacity:0;
/*基礎動畫*/
transition:opacity .5s;
/*圓角*/
border-radius:100%;}
.PageHost ul li span.photo:hover {
/*陰影*/
box-shadow: 1px 6px 12px 0px rgba(0, 0, 0, 0.3);
transform: translate(0, -5px);}
.PageHost ul li span.photo:hover:before {opacity:1;}
.PageHost ul li span.photo img { display:block; min-height:365px; max-height:365px; object-fit:cover; width:100%;
/*圓角*/
border-radius:100%;}
.PageHost ul li a:focus span.photo { width:361px; height:361px;}
.PageHost ul li a:focus span.photo img { min-height:361px; max-height:361px;}
.PageHost ul li span.title { font-weight:bold; font-size:1.2em; margin-bottom:5px;}
.PageHost ul li span.program { font-size:0.8em; color:#555; line-height:1.4; margin-bottom:5px;}
.PageHost ul li a.link-title ~ a { display:inline-block; width:36px; height:36px; overflow:hidden; margin:0 2.5px;}
@media only screen and (min-width:0px) and (max-width:1600px) {
	.PageHost ul li span.photo { width:calc( ( ( 100vw - 20px ) / 4 ) - ( 40px * 3 / 4 ) ); height:calc( ( ( 100vw - 20px ) / 4 ) - ( 40px * 3 / 4 ) );}
	.PageHost ul li span.photo img { min-height:calc( ( ( 100vw - 20px ) / 4 ) - ( 40px * 3 / 4 ) ); max-height:calc( ( ( 100vw - 20px ) / 4 ) - ( 40px * 3 / 4 ) );}
	.PageHost ul li a:focus span.photo { width:calc( ( ( 100vw - 20px ) / 4 ) - ( 40px * 3 / 4 ) - 4px ); height:calc( ( ( 100vw - 20px ) / 4 ) - ( 40px * 3 / 4 ) - 4px );}
	.PageHost ul li a:focus span.photo img { min-height:calc( ( ( 100vw - 20px ) / 4 ) - ( 40px * 3 / 4 ) - 4px ); max-height:calc( ( ( 100vw - 20px ) / 4 ) - ( 40px * 3 / 4 ) - 4px );}
}
@media only screen and (min-width:0px) and (max-width:1280px) {
	.PageHost ul { gap:30px;}
	.PageHost ul li { width:calc( 25% - ( 30px * 3 / 4 ) );}
	.PageHost ul li span.photo { width:calc( ( ( 100vw - 20px ) / 4 ) - ( 30px * 3 / 4 ) ); height:calc( ( ( 100vw - 20px ) / 4 ) - ( 30px * 3 / 4 ) );}
	.PageHost ul li span.photo img { min-height:calc( ( ( 100vw - 20px ) / 4 ) - ( 30px * 3 / 4 ) ); max-height:calc( ( ( 100vw - 20px ) / 4 ) - ( 30px * 3 / 4 ) );}
	.PageHost ul li a:focus span.photo { width:calc( ( ( 100vw - 20px ) / 4 ) - ( 30px * 3 / 4 ) - 4px ); height:calc( ( ( 100vw - 20px ) / 4 ) - ( 30px * 3 / 4 ) - 4px );}
	.PageHost ul li a:focus span.photo img { min-height:calc( ( ( 100vw - 20px ) / 4 ) - ( 30px * 3 / 4 ) - 4px ); max-height:calc( ( ( 100vw - 20px ) / 4 ) - ( 30px * 3 / 4 ) - 4px );}
}
@media only screen and (min-width:0px) and (max-width:1024px) {
	.PageHost ul { gap:20px;}
	.PageHost ul li { width:calc( 25% - ( 20px * 3 / 4 ) );}
	.PageHost ul li span.photo { width:calc( ( ( 100vw - 20px ) / 4 ) - ( 20px * 3 / 4 ) ); height:calc( ( ( 100vw - 20px ) / 4 ) - ( 20px * 3 / 4 ) );}
	.PageHost ul li span.photo img { min-height:calc( ( ( 100vw - 20px ) / 4 ) - ( 20px * 3 / 4 ) ); max-height:calc( ( ( 100vw - 20px ) / 4 ) - ( 20px * 3 / 4 ) );}
	.PageHost ul li a:focus span.photo { width:calc( ( ( 100vw - 20px ) / 4 ) - ( 20px * 3 / 4 ) - 4px ); height:calc( ( ( 100vw - 20px ) / 4 ) - ( 20px * 3 / 4 ) - 4px );}
	.PageHost ul li a:focus span.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) {
	.PageHost ul { gap:20px 15px;}
	.PageHost ul li { width:calc( 33.33% - ( 15px * 2 / 3 ) );}
	.PageHost ul li span.photo { width:calc( ( ( 100vw - 20px ) / 3 ) - ( 15px * 2 / 3 ) ); height:calc( ( ( 100vw - 20px ) / 3 ) - ( 15px * 2 / 3 ) ); margin-bottom:10px;}
	.PageHost ul li span.photo img { min-height:calc( ( ( 100vw - 20px ) / 3 ) - ( 15px * 2 / 3 ) ); max-height:calc( ( ( 100vw - 20px ) / 3 ) - ( 15px * 2 / 3 ) );}
	.PageHost ul li a:focus span.photo { width:calc( ( ( 100vw - 20px ) / 3 ) - ( 15px * 2 / 3 ) - 4px ); height:calc( ( ( 100vw - 20px ) / 3 ) - ( 15px * 2 / 3 ) - 4px );}
	.PageHost ul li a:focus span.photo img { min-height:calc( ( ( 100vw - 20px ) / 3 ) - ( 15px * 2 / 3 ) - 4px ); max-height:calc( ( ( 100vw - 20px ) / 3 ) - ( 15px * 2 / 3 ) - 4px );}
	.PageHost ul li span.title { font-size:1em; margin-bottom:0;}
	.PageHost ul li span.program { font-size:0.7em;}
}
@media only screen and (min-width:0px) and (max-width:512px) {
	.PageHost ul { gap:15px;}
	.PageHost ul li { width:calc( 50% - ( 15px * 1 / 2 ) );}
	.PageHost ul li span.photo { width:calc( ( ( 100vw - 20px ) / 2 ) - ( 15px * 1 / 2 ) ); height:calc( ( ( 100vw - 20px ) / 2 ) - ( 15px * 1 / 2 ) );}
	.PageHost ul li span.photo img { min-height:calc( ( ( 100vw - 20px ) / 2 ) - ( 15px * 1 / 2 ) ); max-height:calc( ( ( 100vw - 20px ) / 2 ) - ( 15px * 1 / 2 ) );}
	.PageHost ul li a:focus span.photo { width:calc( ( ( 100vw - 20px ) / 2 ) - ( 15px * 1 / 2 ) - 4px ); height:calc( ( ( 100vw - 20px ) / 2 ) - ( 15px * 1 / 2 ) - 4px );}
	.PageHost ul li a:focus span.photo img { min-height:calc( ( ( 100vw - 20px ) / 2 ) - ( 15px * 1 / 2 ) - 4px ); max-height:calc( ( ( 100vw - 20px ) / 2 ) - ( 15px * 1 / 2 ) - 4px );}
	.PageHost ul li span.program { margin-bottom:5px;}
}