@charset "utf-8";
@import url("/tw/css/ugC_Content.css");
/*PageNews*/
.Content .PageWrapper-Side .PageContent-Right .PageArticle > div.PageNews { width:100%; height:auto; overflow:hidden;}
.Content .PageWrapper-Side .PageContent-Right .PageArticle > div.PageNews * { padding:0; margin:0; list-style:none; text-decoration:none;}
.Content .PageWrapper-Side .PageContent-Right .PageArticle > div.PageNews ul { width:100%; height:auto; overflow:hidden;
/*flex*/
display: flex;
flex-wrap:wrap;
gap:20px;}
.Content .PageWrapper-Side .PageContent-Right .PageArticle > div.PageNews ul li { width:calc( 25% - ( 60px / 4 ) ); height:auto; overflow:hidden; float:left; background:#555; padding:5px 10px; display:block;
/*圓角*/
border-radius:10px;}
.Content .PageWrapper-Side .PageContent-Right .PageArticle > div.PageNews ul li > span { display:block; width:100%; height:auto; overflow:hidden;}
.Content .PageWrapper-Side .PageContent-Right .PageArticle > div.PageNews ul li > span.name { text-align:center; color:#fff; margin-bottom:0; font-size:1em; line-height:24px; padding:5px 0;}



.Content .PageWrapper-Side .PageContent-Right .PageArticle > div.PageNews ul li > span.photo { display:block; width:100%; height:400px; float:left; position:relative; margin-bottom:10px; background: url(/tw/Images/Layout/RWD/img-bg.jpg) center center no-repeat, #fff;
background-size:400%;
display: flex;
flex-wrap:wrap;
justify-content:center;
align-items:center;
/*圓角*/
border-radius:5px;}
.Content .PageWrapper-Side .PageContent-Right .PageArticle > div.PageNews ul li > span.photo img { display:block; max-width:100%; height:auto; max-height:400px; float:left;
/*基礎動畫設定*/
transition:all .5s, transform .5s;
/*圓角*/
border-radius:5px;
object-fit: cover;}
.Content .PageWrapper-Side .PageContent-Right .PageArticle > div.PageNews ul li > span.photo:hover img {transform: scale(1.1);}
.Content .PageWrapper-Side .PageContent-Right .PageArticle > div.PageNews ul li > span > span.photo ~ span { display:block; width:100%; height:auto; overflow:hidden; padding:0.5rem 0;  font-size:1rem; line-height:1.4rem; float:left;}

.Content .PageWrapper-Side .PageContent-Right .PageArticle > div.PageNews ul li > span.photo ~ a { display:block; width:calc( 50% - 5px ); height:auto; overflow:hidden; float:left; padding:5px; text-align:center; background:#ffa916; color:#fff; margin-bottom:5px; margin-right:10px;
/*基礎動畫設定*/
transition:all .5s, transform .5s;
/*圓角*/
border-radius:10px;}
.Content .PageWrapper-Side .PageContent-Right .PageArticle > div.PageNews ul li > span.photo ~ a:only-of-type { width:100%; margin-right:0;}
.Content .PageWrapper-Side .PageContent-Right .PageArticle > div.PageNews ul li > span.photo ~ a:link,
.Content .PageWrapper-Side .PageContent-Right .PageArticle > div.PageNews ul li > span.photo ~ a:visited { color:#fff; background:var(--color-main);}
.Content .PageWrapper-Side .PageContent-Right .PageArticle > div.PageNews ul li > span.photo ~ a:hover,
.Content .PageWrapper-Side .PageContent-Right .PageArticle > div.PageNews ul li > span.photo ~ a:active { color:#fff; background:#ffa916; transform: translate(0px, -5px);}
.Content .PageWrapper-Side .PageContent-Right .PageArticle > div.PageNews ul li > span.photo ~ a:focus{ border:2.5px dashed blue; background:yellow; color:blue;}
.Content .PageWrapper-Side .PageContent-Right .PageArticle > div.PageNews ul li > span.photo ~ a:last-child { float:right; margin-right:0;}

.Content .PageWrapper-Side .PageContent-Right .PageArticle > div.PageNews + div.pagination { margin-top:10px;}

@media only screen and (min-width:0px) and (max-width:1300px) {
.Content .PageWrapper-Side .PageContent-Right .PageArticle > div.PageNews ul li > span.photo { height:calc( ( 100vw - 80px ) / 4 * 1.40350877 );}
.Content .PageWrapper-Side .PageContent-Right .PageArticle > div.PageNews ul li > span.photo img { max-height:calc( ( 100vw - 80px ) / 4 * 1.40350877 );}
}

@media only screen and (min-width:0px) and (max-width:1024px) {
	.Content .PageWrapper-Side .PageContent-Right .PageArticle > div.PageNews ul li { width:calc( 33.33% - ( 40px / 3 ) );}
	.Content .PageWrapper-Side .PageContent-Right .PageArticle > div.PageNews ul li > span.photo { height:calc( ( 100vw - 60px ) / 3 * 1.40350877 );}
	.Content .PageWrapper-Side .PageContent-Right .PageArticle > div.PageNews ul li > span.photo img { max-height:calc( ( 100vw - 60px ) / 3 * 1.40350877 );}
}
@media only screen and (min-width:0px) and (max-width:768px) {
	.Content .PageWrapper-Side .PageContent-Right .PageArticle > div.PageNews ul li { width:calc( 50% - ( 20px / 2 ) );}
	.Content .PageWrapper-Side .PageContent-Right .PageArticle > div.PageNews ul li > span.photo { height:calc( ( 100vw - 40px ) / 2 * 1.40350877 );}
	.Content .PageWrapper-Side .PageContent-Right .PageArticle > div.PageNews ul li > span.photo img { max-height:calc( ( 100vw - 40px ) / 2 * 1.40350877 );}
}
@media only screen and (min-width:0px) and (max-width:512px) {
	.Content .PageWrapper-Side .PageContent-Right .PageArticle > div.PageNews ul li { width:100%;}
	.Content .PageWrapper-Side .PageContent-Right .PageArticle > div.PageNews ul li > span.photo { height:calc( ( 100vw - 20px ) / 1 * 1.40350877 );}
	.Content .PageWrapper-Side .PageContent-Right .PageArticle > div.PageNews ul li > span.photo img { max-height:calc( ( 100vw - 20px ) / 1 * 1.40350877 );}
	.Content .PageWrapper-Side .PageContent-Right .PageArticle > div.PageNews ul li > span.photo ~ a { width:100%; margin-right:0;}
}

/*切換模式*/
.Wrapper.dark-mode .Content .PageWrapper-Side .PageContent-Right .PageArticle > div.PageNews ul li { background:rgba(0,0,0,0.5);}