@charset "utf-8";

.ugC_Program_Time-wrap { margin-top:20px;}
.ugC_Program_Time-wrap .slide-menu > ul li.active a:link,
.ugC_Program_Time-wrap .slide-menu > ul li.active a:visited,
.ugC_Program_Time-wrap .slide-menu > ul li.active a:hover,
.ugC_Program_Time-wrap .slide-menu > ul li.active a:active { background:#fce3cd; color:#111; border:1px solid #f18c2f;}
.ugC_Program_Time-wrap .slide-menu > ul li.active a:focus{ color:blue; border:2px dashed blue; background:rgba(255,240,0,1);}
.ugC_Program_Time-wrap .slide-menu-2 { height:34px;}
.ugC_Program_Time-wrap .slide-menu-2 > ul li a { font-size:0.6em;}
.ugC_Program_Time-wrap .slide-menu-2 > ul li.active a:link,
.ugC_Program_Time-wrap .slide-menu-2 > ul li.active a:visited,
.ugC_Program_Time-wrap .slide-menu-2 > ul li.active a:hover,
.ugC_Program_Time-wrap .slide-menu-2 > ul li.active a:active { background:#333; color:white; border:1px solid #333;}
.ugC_Program_Time-wrap .slide-menu-2 > ul li.active a:focus{ color:blue; border:2px dashed blue; background:rgba(255,240,0,1);}
.Content .PageContent-Right .PageArticle .ugC_Program_Time-wrap ~ .Program-list * { padding:0; margin:0; list-style:none; text-decoration:none;}
.Content .PageContent-Right .PageArticle .ugC_Program_Time-wrap ~ .Program-list ul { display:flex; flex-wrap:wrap; gap: 20px; margin-bottom:20px;}
.Content .PageContent-Right .PageArticle .ugC_Program_Time-wrap ~ .Program-list ul li { width:calc( 25% - ( 20px * 3 / 4 ) ); position:relative;}
.Content .PageContent-Right .PageArticle .ugC_Program_Time-wrap ~ .Program-list ul li > a { display:block; position:relative; overflow:hidden; margin-bottom:0;
/*圓角*/
border-radius:30px;
/*陰影*/
box-shadow: 1px 1px 3px 0px rgba(0, 0, 0, 0.2);}
.Content .PageContent-Right .PageArticle .ugC_Program_Time-wrap ~ .Program-list ul li > a:before { content:''; display:block; width:100%; height:100%; position:absolute; top:0; left:0; z-index:1; opacity:0; border:4px solid rgb(25,120,240,1);
/*基礎動畫*/
transition:opacity .5s;
/*圓角*/
border-radius:30px;}
.Content .PageContent-Right .PageArticle .ugC_Program_Time-wrap ~ .Program-list ul li > a:hover:before,
.Content .PageContent-Right .PageArticle .ugC_Program_Time-wrap ~ .Program-list ul li > a:active:before { opacity:1;}
.Content .PageContent-Right .PageArticle .ugC_Program_Time-wrap ~ .Program-list ul li > a:focus:before { background-image: linear-gradient(180deg, rgba(255, 240, 0, 0) 40%, rgba(255, 240, 0, 1) 90%, rgba(255, 240, 0, 1) 100%); opacity:1; border:0;}
.Content .PageContent-Right .PageArticle .ugC_Program_Time-wrap ~ .Program-list ul li > a img { display:block; height:380px; object-fit: cover;
/*圓角*/
border-radius:30px;
/*基礎動畫*/
transition:transform .5s;}
.Content .PageContent-Right .PageArticle .ugC_Program_Time-wrap ~ .Program-list ul li > a:hover img,
.Content .PageContent-Right .PageArticle .ugC_Program_Time-wrap ~ .Program-list ul li > a:active img {transform: scale(1.1);}
.Content .PageContent-Right .PageArticle .ugC_Program_Time-wrap ~ .Program-list ul li > a .name { display:block; width:100%; height:auto; overflow:hidden; padding:15px 20px; padding-right:70px; position:absolute; left:0; bottom:0; color:white; font-weight:bold; line-height:1.4; z-index:0;
/*基礎動畫*/
transition:linear-gradient .5s;
/*漸層*/
background-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 50%, rgba(0, 0, 0, 1) 100%);
/*文字陰影*/
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);}
.Content .PageContent-Right .PageArticle .ugC_Program_Time-wrap ~ .Program-list ul li > a:hover .name,
.Content .PageContent-Right .PageArticle .ugC_Program_Time-wrap ~ .Program-list ul li > a:active .name {
/*漸層*/
background-image: linear-gradient(180deg, rgba(25,120,240, 0) 0%, rgba(0, 0, 0, 0.5) 50%, rgba(25,120,240, 1) 100%);}
.Content .PageContent-Right .PageArticle .ugC_Program_Time-wrap ~ .Program-list ul li > a:focus .name { color:blue; background:none; z-index:2;
/*文字陰影*/
text-shadow:none;}
.Content .PageContent-Right .PageArticle .ugC_Program_Time-wrap ~ .Program-list ul li span.time { display:inline-block; width:auto; height:auto; overflow:hidden; position:absolute; top:10px; left:10px; background:rgba(0,0,0,0.8); color:white; padding:10px; font-size:0.8em; line-height:1;
/*基礎動畫*/
transition:background .5s;
/*圓角*/
border-radius:30px;}
.Content .PageContent-Right .PageArticle .ugC_Program_Time-wrap ~ .Program-list ul li > a:hover ~ span.time,
.Content .PageContent-Right .PageArticle .ugC_Program_Time-wrap ~ .Program-list ul li > a:active ~ span.time { background:rgb(25,120,240,1);}
.Content .PageContent-Right .PageArticle .ugC_Program_Time-wrap ~ .Program-list ul li > a:focus ~ span.time { background:blue; z-index:2;}
.Content .PageContent-Right .PageArticle .ugC_Program_Time-wrap ~ .Program-list ul li > a ~ .box-host { display:flex; padding:0 20px; flex-wrap:wrap;}
.Content .PageContent-Right .PageArticle .ugC_Program_Time-wrap ~ .Program-list ul li > a ~ .box-host a.host-name { display:inline-block; width:auto; height:auto; overflow:hidden; float:left; font-size:0.8em;}
.Content .PageContent-Right .PageArticle .ugC_Program_Time-wrap ~ .Program-list ul li > a ~ .box-host a.host-name:not(:last-child):after { content:'、'; padding:0 2.5px;}
.Content .PageContent-Right .PageArticle .ugC_Program_Time-wrap ~ .Program-list ul li > a ~ .box-host a.host-name:only-child { display:block; width:100%;}
.Content .PageContent-Right .PageArticle .ugC_Program_Time-wrap ~ .Program-list ul li > a ~ .box-host a.host-name:only-child:after { display:none;}
.Content .PageContent-Right .PageArticle .ugC_Program_Time-wrap ~ .Program-list ul li > a ~ .count { position:absolute; display:inline-block; width:auto; height:auto; padding:0 10px; background:white; right:10px; bottom:13px; padding-left:30px; text-align:center; z-index:2;
/*圓角*/
border-radius:100px;}
.Content .PageContent-Right .PageArticle .ugC_Program_Time-wrap ~ .Program-list ul li > a ~ .count:before { content:''; display:block; width:20px; height:20px; position:absolute; top:5px; left:5px; background:url(../Images/Layout/program-count.png) center center no-repeat; background-size:contain;}
.Content .PageContent-Right .PageArticle .ugC_Program_Time-wrap ~ .Program-list ul li > a:hover ~ .count,
.Content .PageContent-Right .PageArticle .ugC_Program_Time-wrap ~ .Program-list ul li > a:active ~ .count{ background:rgba(25,120,240, 1); color:white;}
.Content .PageContent-Right .PageArticle .ugC_Program_Time-wrap ~ .Program-list ul li > a:focus ~ .count { background:blue; color:white;}
.Content .PageContent-Right .PageArticle .ugC_Program_Time-wrap ~ .Program-list ul li > a:hover ~ .count:before,
.Content .PageContent-Right .PageArticle .ugC_Program_Time-wrap ~ .Program-list ul li > a:active ~ .count:before,
.Content .PageContent-Right .PageArticle .ugC_Program_Time-wrap ~ .Program-list ul li > a:focus ~ .count:before{ background:url(../Images/Layout/program-count_w.png) center center no-repeat; background-size:contain;}

@media only screen and (min-width:0px) and (max-width:1600px) {
	.Content .PageContent-Right .PageArticle .ugC_Program_Time-wrap ~ .Program-list ul li { width:calc( ( ( 100vw - 20px ) * 0.25 ) - ( 20px * 3 / 4 ) - 10px );}
	.Content .PageContent-Right .PageArticle .ugC_Program_Time-wrap ~ .Program-list ul li > a img { height:calc( ( ( 100vw - 20px ) * 0.25 ) - ( 20px * 3 / 4 ) - 10px );}
}
@media only screen and (min-width:0px) and (max-width:1024px) {
	.Content .PageContent-Right .PageArticle .ugC_Program_Time-wrap ~ .Program-list ul li > a ~ .count { right:auto; bottom:auto; top:10px; left:10px;}
	.Content .PageContent-Right .PageArticle .ugC_Program_Time-wrap ~ .Program-list ul li > a .name { padding:15px;}
	.Content .PageContent-Right .PageArticle .ugC_Program_Time-wrap ~ .Program-list ul li > a ~ .box-host { padding:0 15px;}
}
@media only screen and (min-width:0px) and (max-width:768px) {
	.Content .PageContent-Right .PageArticle .ugC_Program_Time-wrap ~ .Program-list ul li { width:calc( ( ( 100vw - 20px ) * 0.5 ) - ( 20px * 1 / 2 ) - 10px );}
	.Content .PageContent-Right .PageArticle .ugC_Program_Time-wrap ~ .Program-list ul li > a img { height:calc( ( ( 100vw - 20px ) * 0.5 ) - ( 20px * 1 / 2 ) - 10px );}
}