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

.Font-Small .PageProgram ul li { font-size:0.5rem;}
.Font-Small .PageProgram ul li > a:first-child > .name{ font-size:1rem; line-height:1rem;}
.Font-Small .PageContent-Right .PageArticle.ugC_Program_Detail.AMFM2 > div > div.Photo ~ div > div:first-child { font-size:1.6rem; line-height:1.8rem;}

.Font-Large .PageProgram ul li { font-size:0.9rem;}
.Font-Large .PageProgram ul li > a:first-child > .name{ font-size:1.6rem; line-height:1.6rem;}
.Font-Large .PageContent-Right .PageArticle.ugC_Program_Detail.AMFM2 > div > div.Photo ~ div > div:first-child { font-size:2rem; line-height:2.2rem;}
.Font-Large .PageContent-Right .PageArticle.ugC_Program_Detail.AMFM2 > div > div.Photo ~ div > div > ul#ContentPlaceHolder1_incProgramDetail_ul_FMAM_PalyTimeWeek,
.Font-Large .PageContent-Right .PageArticle.ugC_Program_Detail.AMFM2 > div > div.Photo ~ div > div > div#ContentPlaceHolder1_incProgramDetail_div_HostList,
.Font-Large .PageContent-Right .PageArticle.ugC_Program_Detail.AMFM2 > div > div.Photo ~ div > div > div.Exp{ width:calc(100% - 150px);}

.ugC_Program_Time { width:100%; height:auto; overflow:hidden; padding:0; margin:0; list-style:none; margin-bottom:1rem;
/*flex*/
-webkit-flex-display:flex; display: flex;
-webkit-justify-content:space-between;justify-content:space-between;
flex-wrap:wrap;}
.ugC_Program_Time * { padding:0; margin:0; list-style:none; text-decoration:none;}
.ugC_Program_Time li { width:24%; height:auto; overflow:hidden;}
.ugC_Program_Time li a { display:block; width:100%; height:auto; overflow:hidden; border:1px solid rgba(0,0,0,0.1); padding:0.5rem; text-align:center;
/*圓角*/
border-radius:0.5rem;}
.ugC_Program_Time li a:link,
.ugC_Program_Time li a:visited,
.ugC_Program_Time li a:hover,
.ugC_Program_Time li a:active { color:black;}
.ugC_Program_Time li a:focus{ color:blue; border:2px dashed blue;}
.ugC_Program_Time li.active a:link,
.ugC_Program_Time li.active a:visited,
.ugC_Program_Time li.active a:hover,
.ugC_Program_Time li.active a:active { background:rgba(0,100,180,1); color:white;}
.ugC_Program_Time li.active a:focus{ background:yellow; color:blue; border:2px dashed blue;}

.ugC_Program_Time.playback li { width:19%;
/*flex*/
-webkit-flex-display:flex; display: flex;
flex-wrap:wrap;}
.ugC_Program_Time.playback li a {
/*flex*/
-webkit-flex-display:flex; display: flex;
-webkit-align-items: center; align-items: center;
-webkit-justify-content:center;justify-content:center;
flex-wrap:wrap;}


/*PageProgram*/
.PageProgram { width:100%; height:auto; overflow:hidden;}
.PageProgram * { padding:0; margin:0; list-style:none; text-decoration:none;}
.PageProgram ul { width:100%; height:auto; overflow:hidden;
/*flex*/
-webkit-flex-display:flex; display: flex;
flex-wrap:wrap; align-items: baseline;}
.PageProgram ul li { width:24%; margin-right:1.33%; height:auto; overflow:hidden; float:left; margin-bottom:1rem; font-size:0.7rem;}
.PageProgram ul li:nth-child(4n+4){ margin-right:0;}
.PageProgram ul li > a:link,
.PageProgram ul li > a:visited { color:black;
/*圓角*/
border-radius:0.5rem;}
.PageProgram ul li > a:hover,
.PageProgram ul li > a:active { color:blue;}
.PageProgram ul li > a:focus{ background:yellow; color:blue; border:2px dashed blue;}
.PageProgram ul li > a:first-child { display:block; width:100%; height:auto; overflow:hidden;}
.PageProgram ul li > a:first-child > img { display:block; width:100%; height:auto; float:left;
/*基礎動畫設定*/
transition:all .5s;
/*圓角*/
border-radius:0.5rem;}
.PageProgram ul li > a:first-child:hover > img {
transform: scale(1.2);}
.PageProgram ul li > a:first-child > .name { display:block; width:100%; height:auto; overflow:hidden; padding:0.5rem 0;  font-size:1.4rem; line-height:1.4rem; float:left; position:relative; z-index:1;
/*基礎動畫設定*/
transition:all .3s;}
.PageProgram ul li > a:first-child:hover > .name { background:gold;}
.PageProgram ul li > a:first-child ~ * { display:inline-block; opacity:0.6; margin-right:0.25rem;}
.PageProgram ul li > a:first-child ~ a { margin-right:0; margin-left:0.25rem;}
.PageProgram ul li > a:first-child ~ a:link,
.PageProgram ul li > a:first-child ~ a:visited,
.PageProgram ul li > a:first-child ~ a:hover,
.PageProgram ul li > a:first-child ~ a:active { color:rgba(0,100,180,1); font-weight:bold;}
.PageProgram ul li > a:first-child ~ a:focus{ background:yellow; color:blue; border:2px dashed blue;}


/*AMFM2*/
.PageContent-Right .PageArticle.ugC_Program_Detail.AMFM2 { width:100%; height:auto; overflow:hidden;}
.PageContent-Right .PageArticle.ugC_Program_Detail.AMFM2 > div { 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;}
.PageContent-Right .PageArticle.ugC_Program_Detail.AMFM2 > div > div.Photo { width:50%; height:auto; display:block; float:left; position:relative;}

.PageContent-Right .PageArticle.ugC_Program_Detail.AMFM2 > div > div.Photo:focus,
.PageContent-Right .PageArticle.ugC_Program_Detail.AMFM2 > div > div.Photo *:focus{ background:none!important; border:0!important;}
.PageContent-Right .PageArticle.ugC_Program_Detail.AMFM2 > div > div.Photo img { display:block; width:100%; height:auto; overflow:hidden;
/*圓角*/
border-radius:1rem;}
.PageContent-Right .PageArticle.ugC_Program_Detail.AMFM2 > div > div.Photo div { position:absolute; top:0; left:0;}
.PageContent-Right .PageArticle.ugC_Program_Detail.AMFM2 > div > div.Photo div.video-js { position:absolute; top:0; left:0; width:100%; height:100%; background:none;}
.PageContent-Right .PageArticle.ugC_Program_Detail.AMFM2 > div > div.Photo div.video-js .vjs-big-play-button { width:90px; height:90px; top:50%; left:50%; margin-top:-45px; margin-left:-45px;
/*圓角*/
border-radius:100%;}
.PageContent-Right .PageArticle.ugC_Program_Detail.AMFM2 > div > div.Photo div.video-js .vjs-big-play-button .vjs-icon-play:before,
.PageContent-Right .PageArticle.ugC_Program_Detail.AMFM2 > div > div.Photo div.video-js .vjs-big-play-button .vjs-icon-placeholder:before,
.PageContent-Right .PageArticle.ugC_Program_Detail.AMFM2 > div > div.Photo div.video-js .vjs-play-control .vjs-icon-placeholder:before { line-height:86px; font-size:3rem;}
.PageContent-Right .PageArticle.ugC_Program_Detail.AMFM2 > div > div.Photo div.video-js .vjs-control { width:100%;}
.PageContent-Right .PageArticle.ugC_Program_Detail.AMFM2 > div > div.Photo div.video-js.vjs-has-started .vjs-control-bar { width:100%; height:100%; display:block;
/*圓角*/
border-radius:1rem;}
.PageContent-Right .PageArticle.ugC_Program_Detail.AMFM2 > div > div.Photo div.video-js.vjs-has-started .vjs-control-bar > div,
.PageContent-Right .PageArticle.ugC_Program_Detail.AMFM2 > div > div.Photo div.video-js.vjs-has-started .vjs-control-bar > button.vjs-fullscreen-control { display:none;}
.PageContent-Right .PageArticle.ugC_Program_Detail.AMFM2 > div > div.Photo div.video-js.vjs-has-started .vjs-icon-placeholder { width:90px; height:90px; top:50%; left:50%; margin-top:-45px; margin-left:-45px; position:absolute; display:block;
/*圓角*/
border-radius:100%;
  border-color: #fff;
  background-color: #73859f;
  background-color: rgba(115, 133, 159, 0.5);
  -webkit-transition: all 0s;
  -moz-transition: all 0s;
  -ms-transition: all 0s;
  -o-transition: all 0s;
  transition: all 0s; }
.PageContent-Right .PageArticle.ugC_Program_Detail.AMFM2 > div > div.Photo ~ 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;}
.PageContent-Right .PageArticle.ugC_Program_Detail.AMFM2 > div > div.Photo ~ div * { padding:0; margin:0; list-style:none; text-decoration:none;}
.PageContent-Right .PageArticle.ugC_Program_Detail.AMFM2 > div > div.Photo ~ div > *:not(script) { display:block; width:100%; height:auto; padding:0.125rem 0; overflow:hidden; margin-bottom:0.25rem;}
.PageContent-Right .PageArticle.ugC_Program_Detail.AMFM2 > div > div.Photo ~ div > div:first-child { font-size:1.8rem; line-height:2rem;}
.PageContent-Right .PageArticle.ugC_Program_Detail.AMFM2 > div > div.Photo ~ div > div:empty { display:none;}
.PageContent-Right .PageArticle.ugC_Program_Detail.AMFM2 > div > div.Photo ~ div > div > ul#ContentPlaceHolder1_incProgramDetail_ul_FMAM_PalyTimeWeek,
.PageContent-Right .PageArticle.ugC_Program_Detail.AMFM2 > div > div.Photo ~ div > div > div#ContentPlaceHolder1_incProgramDetail_div_HostList,
.PageContent-Right .PageArticle.ugC_Program_Detail.AMFM2 > div > div.Photo ~ div > div > div.Exp{ width:calc(100% - 100px); float:right;}
.PageContent-Right .PageArticle.ugC_Program_Detail.AMFM2 > div > div.Photo ~ div > div > ul#ContentPlaceHolder1_incProgramDetail_ul_FMAM_PalyTimeWeek li,
.PageContent-Right .PageArticle.ugC_Program_Detail.AMFM2 > div > div.Photo ~ div > div > div#ContentPlaceHolder1_incProgramDetail_div_HostList li,
.PageContent-Right .PageArticle.ugC_Program_Detail.AMFM2 > div > div.Photo ~ div > div > div.Exp li{ display:inline-block; overflow:hidden; float:left; margin-right:0.5rem;}
.PageContent-Right .PageArticle.ugC_Program_Detail.AMFM2 > div > div.Photo ~ div > div > div#ContentPlaceHolder1_div_HostList{ width:calc(100% - 80px); float:right;}
.PageContent-Right .PageArticle.ugC_Program_Detail.AMFM2 > div > div.Photo ~ div > div > div#ContentPlaceHolder1_div_HostList li { display:inline-block; overflow:hidden; float:left; margin-right:0.5rem;}
.PageContent-Right .PageArticle.ugC_Program_Detail.AMFM2 > div > div.Photo ~ div > div#ContentPlaceHolder1_div_Desc { line-height:1.3rem; font-size:0.8rem; text-align:justify;}
.PageContent-Right .PageArticle.ugC_Program_Detail.AMFM2 > div > div.Photo ~ div > div a:link,
.PageContent-Right .PageArticle.ugC_Program_Detail.AMFM2 > div > div.Photo ~ div > div a:visited,
.PageContent-Right .PageArticle.ugC_Program_Detail.AMFM2 > div > div.Photo ~ div > div a:hover,
.PageContent-Right .PageArticle.ugC_Program_Detail.AMFM2 > div > div.Photo ~ div > div a:active { color:rgba(250,190,0,1); color:rgba(0,100,180,1);}
.PageContent-Right .PageArticle.ugC_Program_Detail.AMFM2 > div > div.Photo ~ div > div a:focus{ background:yellow; color:blue; border:2px dashed blue;}
.PageContent-Right .PageArticle.ugC_Program_Detail.AMFM2 > div > div.Photo ~ div > div#ContentPlaceHolder1_div_Desc ~ .PlayUI { width:100%; height:auto; overflow:hidden;
/*flex*/
-webkit-flex-display:flex; display: flex;
flex-wrap:wrap;}
.PageContent-Right .PageArticle.ugC_Program_Detail.AMFM2 > div > div.Photo ~ div > div#ContentPlaceHolder1_div_Desc ~ .PlayUI a { display:block; width:3.5rem; height:3.5rem; overflow:hidden; margin-right:0.5rem; text-indent:-9999px; position:relative; border:0;
/*圓角*/
border-radius:100%;
/*基礎動畫設定*/
-webkit-transition:all .5s, -webkit-transform .5s; transition:all .5s, transform .5s;}
.PageContent-Right .PageArticle.ugC_Program_Detail.AMFM2 > div > div.Photo ~ div > div#ContentPlaceHolder1_div_Desc ~ .PlayUI a.Pause { display:none;}
.PageContent-Right .PageArticle.ugC_Program_Detail.AMFM2 > div > div.Photo ~ div > div#ContentPlaceHolder1_div_Desc ~ .PlayUI.Active a.Play { display:none;}
.PageContent-Right .PageArticle.ugC_Program_Detail.AMFM2 > div > div.Photo ~ div > div#ContentPlaceHolder1_div_Desc ~ .PlayUI.Active a.Pause { display:block;}
.PageContent-Right .PageArticle.ugC_Program_Detail.AMFM2 > div > div.Photo ~ div > div#ContentPlaceHolder1_div_Desc ~ .PlayUI a:before { content:''; display:block; width:100%; height:100%; position:absolute; top:0; left:0; border:0.25rem solid rgba(0,0,0,0.2);
/*圓角*/
border-radius:100%;
/*基礎動畫設定*/
-webkit-transition:all .5s, -webkit-transform .5s; transition:all .5s, transform .5s;}
.PageContent-Right .PageArticle.ugC_Program_Detail.AMFM2 > div > div.Photo ~ div > div#ContentPlaceHolder1_div_Desc ~ .PlayUI a:hover:before,
.PageContent-Right .PageArticle.ugC_Program_Detail.AMFM2 > div > div.Photo ~ div > div#ContentPlaceHolder1_div_Desc ~ .PlayUI a:active:before,
.PageContent-Right .PageArticle.ugC_Program_Detail.AMFM2 > div > div.Photo ~ div > div#ContentPlaceHolder1_div_Desc ~ .PlayUI a:focus:before{ border:0.25rem solid rgba(100,100,100,1);}
.PageContent-Right .PageArticle.ugC_Program_Detail.AMFM2 > div > div.Photo ~ div > div#ContentPlaceHolder1_div_Desc ~ .PlayUI a.Active:before { border:0.25rem solid rgba(0,100,180,1);}
.PageContent-Right .PageArticle.ugC_Program_Detail.AMFM2 > div > div.Photo ~ div > div#ContentPlaceHolder1_div_Desc ~ .PlayUI a.Play:link,
.PageContent-Right .PageArticle.ugC_Program_Detail.AMFM2 > div > div.Photo ~ div > div#ContentPlaceHolder1_div_Desc ~ .PlayUI a.Play:visited{ background:url(../Images/Layout/UI/Btn_Play.png) center center no-repeat; border:0;
/*背景圖片尺寸*/
-moz-background-size:contain;
-webkit-background-size:contain;
-o-background-size:contain;
background-size:contain;}
.PageContent-Right .PageArticle.ugC_Program_Detail.AMFM2 > div > div.Photo ~ div > div#ContentPlaceHolder1_div_Desc ~ .PlayUI a.Play:hover,
.PageContent-Right .PageArticle.ugC_Program_Detail.AMFM2 > div > div.Photo ~ div > div#ContentPlaceHolder1_div_Desc ~ .PlayUI a.Play:active,
.PageContent-Right .PageArticle.ugC_Program_Detail.AMFM2 > div > div.Photo ~ div > div#ContentPlaceHolder1_div_Desc ~ .PlayUI a.Play:focus{ background:url(../Images/Layout/UI/Btn_Play_o.png) center center no-repeat, rgba(255,240,0,1); border:0;
/*背景圖片尺寸*/
-moz-background-size:contain;
-webkit-background-size:contain;
-o-background-size:contain;
background-size:contain;}
.PageContent-Right .PageArticle.ugC_Program_Detail.AMFM2 > div > div.Photo ~ div > div#ContentPlaceHolder1_div_Desc ~ .PlayUI a.Play.Active{ background:url(../Images/Layout/UI/Btn_Play_a.png) center center no-repeat, rgba(0,100,180,1); border:0;
/*背景圖片尺寸*/
-moz-background-size:contain;
-webkit-background-size:contain;
-o-background-size:contain;
background-size:contain;}

.PageContent-Right .PageArticle.ugC_Program_Detail.AMFM2 > div > div.Photo ~ div > div#ContentPlaceHolder1_div_Desc ~ .PlayUI a.Pause:link,
.PageContent-Right .PageArticle.ugC_Program_Detail.AMFM2 > div > div.Photo ~ div > div#ContentPlaceHolder1_div_Desc ~ .PlayUI a.Pause:visited{ background:url(../Images/Layout/UI/Btn_Pause.png) center center no-repeat; border:0;
/*背景圖片尺寸*/
-moz-background-size:contain;
-webkit-background-size:contain;
-o-background-size:contain;
background-size:contain;}
.PageContent-Right .PageArticle.ugC_Program_Detail.AMFM2 > div > div.Photo ~ div > div#ContentPlaceHolder1_div_Desc ~ .PlayUI a.Pause:hover,
.PageContent-Right .PageArticle.ugC_Program_Detail.AMFM2 > div > div.Photo ~ div > div#ContentPlaceHolder1_div_Desc ~ .PlayUI a.Pause:active,
.PageContent-Right .PageArticle.ugC_Program_Detail.AMFM2 > div > div.Photo ~ div > div#ContentPlaceHolder1_div_Desc ~ .PlayUI a.Pause:focus{ background:url(../Images/Layout/UI/Btn_Pause_o.png) center center no-repeat, rgba(255,240,0,1); border:0;
/*背景圖片尺寸*/
-moz-background-size:contain;
-webkit-background-size:contain;
-o-background-size:contain;
background-size:contain;}


@media only screen and (min-width:0px) and (max-width:960px) {
.ugC_Program_Time li a { font-size:0.8rem;}
.PageProgram ul {  -webkit-justify-content:space-between;justify-content:space-between; }
.PageProgram ul li { width:48%; margin-right:0;}
}

@media only screen and (min-width:0px) and (max-width:768px) {
.ugC_Program_Time {  margin-bottom:0.5rem;}
.ugC_Program_Time li { width:49%; margin-bottom:0.5rem;}
	
.PageContent-Right .PageArticle.ugC_Program_Detail.AMFM2 > div > div.Photo,
.PageContent-Right .PageArticle.ugC_Program_Detail.AMFM2 > div > div.Photo ~ div { width:100%;}
.PageContent-Right .PageArticle.ugC_Program_Detail.AMFM2 > div > div.Photo ~ div { padding:1rem 0;}
}

@media only screen and (min-width:0px) and (max-width:670px) {
.ugC_Program_Time.playback li { width:100%;}
}

@media only screen and (min-width:0px) and (max-width:360px) {
.PageProgram ul li > a:first-child > .name,
.ugC_Program_Time li a { font-size:0.6rem; padding:0.25rem;}
}