@charset "utf-8";
/* CSS Document */

.Font-Small .PlaybackList > ul > li > span:last-child { font-size:0.6rem;}

.Font-Large .PlaybackList > ul > li { padding-right:6.6rem;}
.Font-Large .PlaybackList > ul > li > span:last-child { font-size:1rem; width:6rem;}

/*PagePlayback*/
.PagePlayback { width:100%; height:auto; overflow:hidden; margin-bottom:1rem;}
.PagePlayback * { padding:0; margin:0; list-style:none; text-decoration:none;}
.PagePlayback ul { width:100%; height:auto; overflow:hidden;
/*flex*/
-webkit-flex-display:flex; display: flex;
-webkit-justify-content:space-between;justify-content:space-between;
flex-wrap:wrap;}
.PagePlayback ul li { width:30%; height:auto; overflow:hidden; float:left; margin-bottom:1rem;
/*flex*/
-webkit-flex-display:flex; display: flex;}
.PagePlayback ul li a { display:block; width:100%; height:auto; overflow:hidden; text-align:center; font-size:2rem; line-height:2rem; padding:1rem; position:relative; padding-bottom:80%; padding-top:0;
/*圓角*/
border-radius:0.5rem;
/*flex*/
-webkit-flex-display:flex; display: flex;
-webkit-align-items:center; align-items:center; -webkit-justify-content:center;justify-content:center;
flex-wrap:wrap;}
.PagePlayback ul li a:link,
.PagePlayback ul li a:visited,
.PagePlayback ul li a:hover,
.PagePlayback ul li a:active { background:rgba(0,100,180,1); color:white;}
.PagePlayback ul li a:focus{ background:yellow; color:blue; border:2px dashed blue;}
.PagePlayback ul li a:before { content:''; display:block; width:100%; height:100%; position:absolute; top:0; left:0; background:rgba(245,245,245,1);}
.PagePlayback ul li:nth-child(1) a:before { background:url(../Images/Layout/Playback/iep_menu_img1.png) center center no-repeat, rgba(245,245,245,1);
/*背景圖片尺寸*/
-moz-background-size:251px 229px;
-webkit-background-size:251px 229px;
-o-background-size:251px 229px;
background-size:251px 229px;}
.PagePlayback ul li:nth-child(2) a:before { background:url(../Images/Layout/Playback/iep_menu_img2.png) center center no-repeat, rgba(245,245,245,1);
/*背景圖片尺寸*/
-moz-background-size:251px 229px;
-webkit-background-size:251px 229px;
-o-background-size:251px 229px;
background-size:251px 229px;}
.PagePlayback ul li:nth-child(3) a:before { background:url(../Images/Layout/Playback/iep_menu_img3.png) center center no-repeat, rgba(245,245,245,1);
/*背景圖片尺寸*/
-moz-background-size:251px 229px;
-webkit-background-size:251px 229px;
-o-background-size:251px 229px;
background-size:251px 229px;}

.PagePlayback ul li:nth-child(1) a:hover:before { background:url(../Images/Layout/Playback/iep_menu_img1.png) center center no-repeat, gold;
/*背景圖片尺寸*/
-moz-background-size:251px 229px;
-webkit-background-size:251px 229px;
-o-background-size:251px 229px;
background-size:251px 229px;}
.PagePlayback ul li:nth-child(2) a:hover:before { background:url(../Images/Layout/Playback/iep_menu_img2.png) center center no-repeat, gold;
/*背景圖片尺寸*/
-moz-background-size:251px 229px;
-webkit-background-size:251px 229px;
-o-background-size:251px 229px;
background-size:251px 229px;}
.PagePlayback ul li:nth-child(3) a:hover:before { background:url(../Images/Layout/Playback/iep_menu_img3.png) center center no-repeat, gold;
/*背景圖片尺寸*/
-moz-background-size:251px 229px;
-webkit-background-size:251px 229px;
-o-background-size:251px 229px;
background-size:251px 229px;}


.top-click { width:33%; height:auto; overflow:hidden; margin-bottom:1rem; border:1px solid rgba(0,0,0,0.2); margin-right:0.5%; float:left;
/*圓角*/
border-radius:0.5rem;}
.top-click:last-child { margin-right:0;}
.top-click * { padding:0; margin:0; list-style:none; text-decoration:none;}
.top-click > span.title { display:block; width:100%; height:auto; overflow:hidden; background:rgba(0,100,180,1); color:white; padding:0.5rem;}
.top-click > span.title ~ ul { width:100%; height:auto; overflow:hidden; padding:0.5rem; display:block;}
.top-click > span.title ~ ul li { display:block; width:100%; height:auto; overflow:hidden;
/*flex*/
-webkit-flex-display:flex; display: flex; -webkit-justify-content:space-between;justify-content:space-between;
/*圓角*/
border-radius:0.5rem;}
.top-click > span.title ~ ul li a { display:block; width:calc( 100% - 4.25rem); height:auto; overflow:hidden; padding:0.5rem; line-height:1rem; padding-left:2rem; float:left; position:relative; font-size:0.8em;
/*圓角*/
border-radius:0.5rem;}
.top-click > span.title ~ ul li a:only-child { width:100%;}
.top-click > span.title ~ ul li a:before { position:absolute; top:0.375rem; left:0.375rem; width:1.25rem; height:1.25rem; display:block; overflow:hidden; text-align:center; background:rgba(0,100,180,1); color:white; line-height:1.25rem; font-family:Arial, Helvetica, sans-serif; font-size:0.8em;
/*圓角*/
border-radius:100%;}
.top-click > span.title ~ ul li a ~ span:nth-child(2) { display:none;}
.top-click > span.title ~ ul li a ~ span:last-child { display:block; width:4.25rem; float:right; height:2rem; font-size:0.7em; opacity:0.8; padding:0.5rem 0.25rem;}
.top-click > span.title ~ ul li:nth-child(odd) { background:white;}
.top-click > span.title ~ ul li:nth-child(1) a:before { content:'1';}
.top-click > span.title ~ ul li:nth-child(2) a:before { content:'2';}
.top-click > span.title ~ ul li:nth-child(3) a:before { content:'3';}
.top-click > span.title ~ ul li:nth-child(4) a:before { content:'4';}
.top-click > span.title ~ ul li:nth-child(5) a:before { content:'5';}
.top-click > span.title ~ ul li:nth-child(6) a:before { content:'6';}
.top-click > span.title ~ ul li:nth-child(7) a:before { content:'7';}
.top-click > span.title ~ ul li:nth-child(8) a:before { content:'8';}
.top-click > span.title ~ ul li:nth-child(9) a:before { content:'9';}
.top-click > span.title ~ ul li:nth-child(10) a:before { content:'10';}

.top-click.top-click-bar > span.title ~ ul li a { width:calc( 100% - 100px );}
.top-click.top-click-bar > span.title ~ ul li a ~ span.bar-graph { width:100px; position:relative; padding-right:60px;}
.top-click.top-click-bar > span.title ~ ul li a ~ span.bar-graph > img { float:right; margin:4px;}
.top-click.top-click-bar > span.title ~ ul li a ~ span.bar-graph > span { position:absolute; top:10px; right:0; width:55px; display:block; text-align:left; line-height:20px; font-size:0.6rem;}


/*ProgramDes*/
.ProgramDes > * { margin-bottom:1rem;}
.ProgramDes > div { width:100%; height:auto; overflow:hidden;}
.ProgramDes > div * { padding:0; margin:0; list-style:none; text-decoration:none;}
.ProgramDes > div > *:not(:last-child) { margin-bottom:1rem;}
.ProgramDes > div:first-child { width:100%; height:auto; overflow:hidden; margin-bottom:1rem;
-webkit-flex-display:flex; display: flex;
-webkit-align-items: center; align-items: center;
flex-wrap:wrap;}
.ProgramDes > div:first-child > img { width:50%; height:auto; display:block; float:left;
/*圓角*/
border-radius:1rem;}
.ProgramDes > div:first-child > img ~ div { width:50%; height:auto; overflow:hidden; float:left; /*background:rgba(0,0,0,0.8); color:white; */padding:1rem;
/*漸層*/
background: rgb(0, 0, 0);
background: -moz-linear-gradient(45deg, rgba(0, 0, 0 ,0.6) 0%, rgb(0, 0, 0, 1) 100%);
background: -webkit-linear-gradient(45deg, rgba(0, 0, 0 ,0.6) 0%, rgb(0, 0, 0, 1) 100%);
background: -o-linear-gradient(45deg, rgba(0, 0, 0 ,0.6) 0%, rgb(0, 0, 0, 1) 100%);
background: -ms-linear-gradient(45deg, rgba(0, 0, 0 ,0.6) 0%, rgb(0, 0, 0, 1) 100%);
background: linear-gradient(135deg, rgba(0, 0, 0 ,0.6) 0%, rgb(0, 0, 0, 1) 100%);
background:none;

/*flex*/
-webkit-flex-display:flex; display: flex;
-webkit-align-items: center; align-items: center;
-webkit-justify-content:space-between;justify-content:space-between;
flex-wrap:wrap;}
.ProgramDes > div:first-child > img ~ div * { padding:0; margin:0; list-style:none; text-decoration:none;}
.ProgramDes > div:first-child > img ~ div > * { display:block; width:100%; height:auto; padding:0.125rem 0; overflow:hidden; margin-bottom:0.25rem;}
.ProgramDes > div:first-child > img ~ div > div:first-child { font-size:1.8rem; line-height:2rem;}
.ProgramDes > div:first-child > img ~ div > div:empty { display:none;}
.ProgramDes > div:first-child > img ~ div > div > ul#ContentPlaceHolder1_incProgramDetail_ul_FMAM_PalyTimeWeek,
.ProgramDes > div:first-child > img ~ div > div > div#ContentPlaceHolder1_incProgramDetail_div_HostList,
.ProgramDes > div:first-child > img ~ div > div > div.Exp{ width:calc(100% - 100px); float:right;}
.ProgramDes > div:first-child > img ~ div > div#ContentPlaceHolder1_div_Desc { line-height:1.3rem; font-size:0.8rem; text-align:justify;}
.ProgramDes > div:first-child > img ~ div > div a:link,
.ProgramDes > div:first-child > img ~ div > div a:visited,
.ProgramDes > div:first-child > img ~ div > div a:hover,
.ProgramDes > div:first-child > img ~ div > div a:active { color:rgba(250,190,0,1); color:rgba(0,100,180,1);}
.ProgramDes > div:first-child > img ~ div > div a:focus{ background:yellow; color:blue; border:2px dashed blue;}

/*PlaybackList*/
.PlaybackList { width:100%; height:auto; overflow:hidden;}
.PlaybackList * { padding:0; margin:0; list-style:none; text-decoration:none;}
.PlaybackList > ul { width:100%; height:auto; overflow:hidden;
/*flex*/
-webkit-flex-display:flex; display: flex;
/*-webkit-align-items:flex-start; align-items:flex-start;*/
-webkit-justify-content:space-between;justify-content:space-between;
flex-wrap:wrap;}
.PlaybackList > ul > li { width:49%; height:auto; overflow:hidden; border:1px solid rgba(0,0,0,0.2); margin-bottom:0.5rem; padding:0.5rem; position:relative; padding-left:2.5rem; padding-right:6rem;
/*圓角*/
border-radius:1rem;
}
.PlaybackList > ul > li > input { display:block; width:2rem; height:2rem; padding:0.5rem; overflow:hidden; border:2px solid rgba(0,100,180,1); position:absolute; top:0.5rem; left:0.5rem;
/*圓角*/
border-radius:100%;}
.PlaybackList > ul > li > span,
.PlaybackList > ul > li > a { display:block; width:100%; height:auto; overflow:hidden; float:left; line-height:1rem; text-align:left; padding:0.5rem;}
.PlaybackList > ul > li > span ~ span:not(:last-child) { font-size:0.8rem; padding:0 0.5rem; opacity:0.6;}
.PlaybackList > ul > li > span:last-child { width:5.5rem; position:absolute; top:0.5rem; right:0.5rem; opacity:0.5; font-size:0.8rem; text-align:right;}

@media only screen and (min-width:0px) and (max-width:960px) {
.PlaybackList > ul > li { width:100%;}
}

@media only screen and (min-width:0px) and (max-width:900px) {
.top-click { width:100%; margin-right:0;}
}

@media only screen and (min-width:0px) and (max-width:850px) {
.PagePlayback ul li { width:100%;}
.PagePlayback ul li a { padding:0; height:229px;}
}

@media only screen and (min-width:0px) and (max-width:768px) {
.ProgramDes > div:first-child > img,
.ProgramDes > div:first-child > img ~ div { width:100%;}
}

@media only screen and (min-width:0px) and (max-width:540px) {
.PlaybackList > ul > li { padding-right:0.5rem;}
.PlaybackList > ul > li > span ~ span:not(:last-child) { margin-bottom:0.25rem;}
.PlaybackList > ul > li > span:last-child { position:static; width:100%; top:auto; right:auto; padding:0 0.5rem; margin-bottom:0; text-align:left;}
}