@charset "utf-8";
@import url("/tw/css/ugC_Content.css");
.Content .PageWrapper-Side .PageContent-Right .PageArticle .wp-catalog ul li a { position:relative; padding-bottom:30px;}
.Content .PageWrapper-Side .PageContent-Right .PageArticle .wp-catalog ul li a span.date { width:calc( 50% - 10px ); position:absolute; left:0; bottom:5px; line-height:20px;}
.Content .PageWrapper-Side .PageContent-Right .PageArticle .wp-catalog ul li a span.click-num { width:calc( 50% - 10px ); position:absolute; right:0; bottom:5px; line-height:20px; text-align:right;}

.Content .PageWrapper-Side .PageContent-Right .PageArticle .PageNews ul li a { position:relative; padding-bottom:30px;}
.Content .PageWrapper-Side .PageContent-Right .PageArticle .PageNews ul li a > *.photo { background:#eee;}
.Content .PageWrapper-Side .PageContent-Right .PageArticle .PageNews ul li a > *.photo img { height:270px; object-fit:cover; background:#f5f5f5;}
.Content .PageWrapper-Side .PageContent-Right .PageArticle .PageNews ul li a > *.photo img.portrait { object-fit: contain;}
.Content .PageWrapper-Side .PageContent-Right .PageArticle .PageNews ul li a span.date { width:calc( 50% - 10px ); position:absolute; left:0; bottom:5px; line-height:20px;}
.Content .PageWrapper-Side .PageContent-Right .PageArticle .PageNews ul li a span.click-num { width:calc( 50% - 10px ); position:absolute; right:0; bottom:5px; line-height:20px; text-align:right;}

.Content .PageWrapper-Side .PageContent-Right .PageArticle > div.article-photo { background:#212124; background:none; margin-bottom:10px;}
.Content .PageWrapper-Side .PageContent-Right .PageArticle > div.article-photo .swiper-button-next,
.Content .PageWrapper-Side .PageContent-Right .PageArticle > div.article-photo .swiper-button-prev { background-color:rgba(0,0,0,0.2); width:47px!important; height:64px!important; margin-top:-32px!important;}
.Content .PageWrapper-Side .PageContent-Right .PageArticle > div.article-photo .swiper-button-next:hover,
.Content .PageWrapper-Side .PageContent-Right .PageArticle > div.article-photo .swiper-button-prev:hover { background-color:rgba(0,0,0,0.6);}
.Content .PageWrapper-Side .PageContent-Right .PageArticle > div.article-photo .swiper-slide { height:auto;
display: flex;
flex-wrap:wrap;
}
.Content .PageWrapper-Side .PageContent-Right .PageArticle > div.article-photo .swiper-slide .photo-box { display:block; width:100%; height:auto; overflow:hidden; position:relative; height:600px; position:relative; display:inline-block; width:auto; max-width:100%; margin:0 auto;
display: flex;
flex-wrap:wrap;
justify-content:center;
align-items:center;}
.Content .PageWrapper-Side .PageContent-Right .PageArticle > div.article-photo .swiper-slide .photo-box img { display:block; max-width:100%; height:auto; max-height:600px; float:left; position:relative; z-index:1;}
.Content .PageWrapper-Side .PageContent-Right .PageArticle > div.article-photo .swiper-slide .photo-box img + span.descr { width: 100%; height:auto; overflow:hidden; position: absolute; bottom: 0; left:0; padding:5px 10px; font-size:0.8em; line-height:1.4; text-align:left; z-index:2;
    color: #ffffff;
    background: rgba(0,0,0,0);
    background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.44) 30%, rgba(0,0,0,0.95) 100%);
    background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(0,0,0,0)), color-stop(30%, rgba(0,0,0,0.44)), color-stop(100%, rgba(0,0,0,0.95)));
    background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.44) 30%, rgba(0,0,0,0.95) 100%);
    background: -o-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.44) 30%, rgba(0,0,0,0.95) 100%);
    background: -ms-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.44) 30%, rgba(0,0,0,0.95) 100%);
    background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.44) 30%, rgba(0,0,0,0.95) 100%);
    z-index: 1;}
.Content .PageWrapper-Side .PageContent-Right .PageArticle > div.article-photo .swiper-slide .photo-box img + span.descr:empty { display:none;}
.Content .PageWrapper-Side .PageContent-Right .PageArticle > div.article-photo .swiper-slide .photo-box img + span.descr + .img-bg { position:absolute; top:0; left:0; width:100%; height:100%; z-index:0;
/* Add the blur effect */
  filter: blur(8px);
  -webkit-filter: blur(8px);}

.Content .PageWrapper-Side .PageContent-Right .PageArticle > div.article-photo.wp-article-photo .swiper-slide-news-photo { margin-bottom:20px;}

.Content .PageWrapper-Side .PageContent-Right .PageArticle > #ContentPlaceHolder1_wrapperHashtag { width:100%; height:auto; overflow:hidden; float:left; padding:0; margin:0; margin-bottom:10px; list-style:none;}
.Content .PageWrapper-Side .PageContent-Right .PageArticle > #ContentPlaceHolder1_wrapperHashtag li { display:inline-block; width:auto; height:auto; overflow:hidden; float:left; margin:0 5px 5px 0; list-style:none;}
.Content .PageWrapper-Side .PageContent-Right .PageArticle > #ContentPlaceHolder1_wrapperHashtag li a { display:inline-block; width:auto; padding:5px 10px; height:auto; text-decoration:none; border: 1px solid var(--color-border);
/*圓角*/
border-radius:5px;
/*基礎動畫設定*/
transition:all .5s, transform .5s;}
.Content .PageWrapper-Side .PageContent-Right .PageArticle > #ContentPlaceHolder1_wrapperHashtag li a:link,
.Content .PageWrapper-Side .PageContent-Right .PageArticle > #ContentPlaceHolder1_wrapperHashtag li a:visited {}
.Content .PageWrapper-Side .PageContent-Right .PageArticle > #ContentPlaceHolder1_wrapperHashtag li a:hover,
.Content .PageWrapper-Side .PageContent-Right .PageArticle > #ContentPlaceHolder1_wrapperHashtag li a:active { background:var(--color-main); color:#fff;}
.Content .PageWrapper-Side .PageContent-Right .PageArticle > #ContentPlaceHolder1_wrapperHashtag li a:focus{ background:rgba(255,240,0,1); border:2.5px dashed blue; color:blue;}

.Content .PageWrapper-Side .PageContent-Right .PageArticle > .go-back { display:block; width:100%; height:auto; overflow:hidden; margin:0 auto; background:#eee; text-align:center; text-decoration:none; padding:10px;
/*基礎動畫設定*/
transition:all .5s, transform .5s;
/*圓角*/
border-radius:5px;}
.Content .PageWrapper-Side .PageContent-Right .PageArticle .PageNews ~ .go-back { margin-top:20px; float:left;} 
.Content .PageWrapper-Side .PageContent-Right .PageArticle > div.div_Desc ~ .go-back { margin-top:10px; float:left;} 
.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;}


.Content .PageWrapper-Side .PageContent-Right .PageArticle .PageNews ul li { width:calc( 33.33% - ( 40px / 3 ) ); padding:0; border-radius:0;}

@media only screen and (min-width:0px) and (max-width:1300px){
.Content .PageWrapper-Side .PageContent-Right .PageArticle > div.article-photo .swiper-slide .photo-box { height:40vw;}
.Content .PageWrapper-Side .PageContent-Right .PageArticle > div.article-photo .swiper-slide .photo-box img { max-height:40vw;}
.Content .PageWrapper-Side .PageContent-Right .PageArticle .PageNews ul li a > *.photo { height:calc( ( ( 100vw - 100px ) / 3 * 0.6675 ) );}
.Content .PageWrapper-Side .PageContent-Right .PageArticle .PageNews ul li a > *.photo img { height:calc( ( ( 100vw - 100px ) / 3 * 0.6675 ) ); object-fit: cover;}
}
@media only screen and (min-width:0px) and (max-width:1024px){
.Content .PageWrapper-Side .PageContent-Right .PageArticle .PageNews ul li { width:calc( 50% - ( 20px / 2 ) );}
.Content .PageWrapper-Side .PageContent-Right .PageArticle .PageNews ul li a > *.photo { height:calc( ( ( 100vw - 40px ) / 2 * 0.6675 ) );}
.Content .PageWrapper-Side .PageContent-Right .PageArticle .PageNews ul li a > *.photo img { height:calc( ( ( 100vw - 40px ) / 2 * 0.6675 ) );}
}
@media only screen and (min-width:0px) and (max-width:768px){
	.Content .PageWrapper-Side .PageContent-Right .PageArticle .PageNews ul li { width:100%;}
	.Content .PageWrapper-Side .PageContent-Right .PageArticle .PageNews ul li a > *.photo { height:calc( ( ( 100vw - 20px ) / 1 * 0.6675 ) );}
	.Content .PageWrapper-Side .PageContent-Right .PageArticle .PageNews ul li a > *.photo img { height:calc( ( ( 100vw - 20px ) / 1 * 0.6675 ) );}
.Content .PageWrapper-Side .PageContent-Right .PageArticle > div.article-photo .swiper-slide .photo-box { height:65vw;}
.Content .PageWrapper-Side .PageContent-Right .PageArticle > div.article-photo .swiper-slide .photo-box img { max-height:65vw;}
}

@media only screen and (min-width:0px) and (max-width:520px){
.Content .PageWrapper-Side .PageContent-Right .PageArticle > div.article-photo .swiper-slide .photo-box img + span.descr { font-size:0.6em; line-height:1.4; padding:5px; }
.Content .PageWrapper-Side .PageContent-Right .PageArticle > div.article-photo .swiper-slide .photo-box { height:64vw;}
.Content .PageWrapper-Side .PageContent-Right .PageArticle > div.article-photo .swiper-slide .photo-box img { max-height:64vw;}
}

/*切換模式*/
.Wrapper.dark-mode .Content .PageWrapper-Side .PageContent-Right .PageArticle > #ContentPlaceHolder1_wrapperHashtag li a { border:1px solid rgba(255,255,255,0.1);}
.Wrapper.dark-mode .Content .PageWrapper-Side .PageContent-Right .PageArticle .PageNews ul li a > *.photo { background:none;}
.Wrapper.dark-mode .Content .PageWrapper-Side .PageContent-Right .PageArticle .PageNews ul li a > *.photo img { background:rgba(0,0,0,0.2);}