@charset "utf-8";
@import url("/tw/css/ugC_Content.css");
/*PageMedia*/
.Content .PageWrapper-Side .PageContent-Right .PageArticle .PageNews.PageMedia { width:100%; height:auto; overflow:hidden;}
.Content .PageWrapper-Side .PageContent-Right .PageArticle .PageNews.PageMedia * { padding:0; margin:0; list-style:none; text-decoration:none;}
.Content .PageWrapper-Side .PageContent-Right .PageArticle .PageNews.PageMedia ul { width:100%; height:auto; overflow:hidden;
/*flex*/
-webkit-flex-display:flex; display: flex;
flex-wrap:wrap;
gap:20px;}
.Content .PageWrapper-Side .PageContent-Right .PageArticle .PageNews.PageMedia ul li {width:calc( 33.33% - ( 40px / 3 ) );height:auto; overflow:hidden; float:left;}
.Content .PageWrapper-Side .PageContent-Right .PageArticle .PageNews.PageMedia ul li > a { display:block; width:100%; height:auto; overflow:hidden;}
.Content .PageWrapper-Side .PageContent-Right .PageArticle .PageNews.PageMedia ul li > a:link,
.Content .PageWrapper-Side .PageContent-Right .PageArticle .PageNews.PageMedia ul li > a:visited,
.Content .PageWrapper-Side .PageContent-Right .PageArticle .PageNews.PageMedia ul li > a:hover,
.Content .PageWrapper-Side .PageContent-Right .PageArticle .PageNews.PageMedia ul li > a:active { color:black;
display:block; width:100%; height:auto; overflow:hidden; padding:0; font-weight:bold; float:left;}
.Content .PageWrapper-Side .PageContent-Right .PageArticle .PageNews.PageMedia ul li > a:focus{ background:yellow; color:blue; border:2px dashed blue;}
.Content .PageWrapper-Side .PageContent-Right .PageArticle .PageNews.PageMedia ul li > a > span.photo { display:block; width:100%; height:auto; float:left; position:relative;
/*圓角*/
border-radius:0.5rem;}
.Content .PageWrapper-Side .PageContent-Right .PageArticle .PageNews.PageMedia ul li > a > span.photo img { display:block; width:100%; height:auto; float:left;
/*圓角*/
border-radius:0.5rem;}
.Content .PageWrapper-Side .PageContent-Right .PageArticle .PageNews.PageMedia ul li > a > span.photo:before { content:''; display:block; width:3.5rem; height:3.5rem; overflow:hidden; position:absolute; top:50%; margin-top:-1.75rem; left:50%; margin-left:-1.75rem; border:0.25rem solid white; opacity:0.8; z-index:1;
background:url(../Images/Layout/UI/Btn_Play_a.png) center center no-repeat;
/*背景圖片尺寸*/
-moz-background-size:contain;
-webkit-background-size:contain;
-o-background-size:contain;
background-size:contain;
/*圓角*/
border-radius:100%;
/*基礎動畫設定*/
-webkit-transition:all .5s, -webkit-transform .5s; transition:all .5s, transform .5s;}
.Content .PageWrapper-Side .PageContent-Right .PageArticle .PageNews.PageMedia ul li > a:hover > span.photo:before,
.Content .PageWrapper-Side .PageContent-Right .PageArticle .PageNews.PageMedia ul li > a:active > span.photo:before,
.Content .PageWrapper-Side .PageContent-Right .PageArticle .PageNews.PageMedia ul li > a:focus > span.photo:before { background:url(../Images/Layout/UI/Btn_Play_a.png) center center no-repeat, rgba(0,100,180,1); border:0.25rem solid rgba(0,100,180,1); opacity:1;
/*背景圖片尺寸*/
-moz-background-size:contain;
-webkit-background-size:contain;
-o-background-size:contain;
background-size:contain;}
.Content .PageWrapper-Side .PageContent-Right .PageArticle .PageNews.PageMedia ul li > a > span.photo ~ span { display:block; width:100%; height:auto; overflow:hidden; padding:0.5rem 0; line-height:1.4rem; float:left;}

.Content .PageWrapper-Side .PageContent-Right .PageArticle > .go-back { display:block; width:100%; height:auto; overflow:hidden; margin:20px auto; background:#eee; text-align:center; text-decoration:none; padding:10px; max-width:800px;
/*基礎動畫設定*/
transition:all .5s, transform .5s;
/*圓角*/
border-radius:10px;}
.Content .PageWrapper-Side .PageContent-Right .PageArticle > .go-back:link,
.Content .PageWrapper-Side .PageContent-Right .PageArticle > .go-back:visited { color:#444;}
.Content .PageWrapper-Side .PageContent-Right .PageArticle > .go-back:hover,
.Content .PageWrapper-Side .PageContent-Right .PageArticle > .go-back:active { background:var(--color-main); color:#fff; transform: translate(0px, -5px);}
.Content .PageWrapper-Side .PageContent-Right .PageArticle > .go-back:focus{ background:rgba(255,240,0,1); border:2.5px dashed blue; color:blue;}

.video { width:100%; height:auto; overflow:hidden; position:relative; padding-bottom:60%;}
.video video { position:absolute; top:0; left:0; width:100%; height:100%;}
.video:empty { display:none;}

.popup-box {  position:fixed; top:0; left:0; width:100%; height:100%; z-index:9999999; background:rgba(0,0,0,0.8);
align-items:center;
justify-content:center;
flex-wrap:wrap;display:none; }
.popup-box.open {display: flex;}
.popup-box > .box { display:block; width:600px; height:auto; overflow:hidden; float:left; position:relative; padding:0 10px; padding-top:30px;}
.popup-box > .box .close { width:30px; height:30px; position:absolute; top:0; right:10px; color:#fff; text-align:center; line-height:30px; background:#000; cursor:pointer;}
.popup-box > div .wp-data { width:100%; height:auto; overflow:hidden; float:left; background:#fff; padding:20px;}
.popup-box > div .wp-data > .video,
.popup-box > div .wp-data > .youtube { width:100%; height:auto; overflow:hidden; float:left; position:relative; padding-bottom:56.25%; background:#000;}
.popup-box > div .wp-data > .video > video,
.popup-box > div .wp-data > .youtube > iframe { position:absolute; top:0; left:0; width:100%; height:100%;}

html.video { overflow-y:auto; padding-bottom:0;}

@media only screen and (min-width:0px) and (max-width:1024px) {
	.Content .PageWrapper-Side .PageContent-Right .PageArticle .PageNews.PageMedia ul li { width:calc( 33.33% - ( 40px / 3 ) );}
}
@media only screen and (min-width:0px) and (max-width:768px) {
	.Content .PageWrapper-Side .PageContent-Right .PageArticle .PageNews.PageMedia ul li { width:calc( 50% - ( 20px / 2 ) );}
}
@media only screen and (min-width:0px) and (max-width:512px) {
	.Content .PageWrapper-Side .PageContent-Right .PageArticle .PageNews.PageMedia ul li { width:100%;}
}