﻿

video,.html5{
	position: fixed; right: 0; bottom: 0;
    min-width: 100%; min-height: 100%;
    width: auto;
    height: auto;
	z-index:-100;
}
video{
	background: url("../images/snow_bg.jpg") no-repeat; background-size:cover;
}
.html5{
	background: url("../images/festival_bg.jpg") no-repeat; background-size:cover;
}
source{
	width: 100%;
	height: 100%;
}

#ftvBody{
	font-family: Arial, Helvetica, sans-serif, "微軟正黑體";
	margin:0;
	padding:0;
	/*background:#000000;*/
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+6,f8ced0+16,ed7371+30,ba2737+31,ba2737+31,d80a17+45,ed7371+58,f8ced0+72,ffffff+85 */
background: #BEE1E3; /* Old browsers */
background: -moz-linear-gradient(top, #BEE1E3 0%, #dee7ed 36%, #ffffff 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #BEE1E3 0%,#dee7ed 36%,#ffffff 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #BEE1E3 0%,#dee7ed 36%,#ffffff 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#BEE1E3', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */
}
/*背景*/
#ftvCanvas{	
background-size: 33% auto;
background-position: center 150px;
width:100%;
margin:0 auto;
}
#ftvMain{
	width:1200px;
	padding: 0 0px;
	margin:0 auto;
	background:#fff;
	overflow:hidden;	
}

/* TOP廣告區塊728-90區塊 */
#ftvTopEventAd{
	height:104px;
	background:url(../images/ftvTopEventAd_bg.gif) no-repeat;
	overflow:hidden;	
}

#ftvTopAd72890{
	width:728px;
	height:90px;
	background:#eee;
	margin:6px 0 0 130px;
	float:left;
	_margin:6px 0 0 65px;
	}
	
#ftvTpoAdClose{
	display:block;
	width:67px;
	height:17px;
	float:right;
	background:url(../images/closeAdBtn.gif) no-repeat;
	text-indent:-99999px;
	margin:2px 4px 0 0;
		
}

/* Header Logo&Search */
#ftvHeader{
	height:80px;
	padding: 5px 0px;
	background:none;
	border-bottom: #BEE1E3 solid 2px;
}
#ftvHeader .logo{
	display:block;
	width:180px;
	height:70px;
	/* background:url(../images/logo2019.png) top center no-repeat; */
	background:url(../images/logo2020.svg) top center no-repeat;
	background-size: 100% auto;
	float:left;
	text-indent:-9999px;
	margin:7px 0 0 40px;
	
}
.logo img{ width: 100%; height: auto; }

#ftvHeader .search{
	width:800px;
	height:68px;
	float:right;
	margin-right:20px;
	text-align:right;
	font-size:12px;
	color:#333333;
}

/* Header 日期區塊 */
#ftvHeader .search .date{
	font-family:Arial, Helvetica, sans-serif;	
	clear:both;
	margin:15px 0 7px 0;
}
	#ftvHeader .search .date a{
		color:#333333;
		text-decoration: none;
	}
	
	#ftvHeader .search .date a.rssicon{
		background:url(../images/rss.png) no-repeat left 1px; padding-left:15px;
	}	
	
	#ftvHeader .search .date a:hover ,#ftvHeader .search .searchBox a:hover{
		text-decoration: underline;	
	}

/* Header 搜尋區塊 */	
#ftvHeader .search .searchBox{line-height:1.8em; float:left;}
#ftvHeader .search .searchBox .searchform{float:left; padding:0; margin-left:20px;}
#ftvHeader .search .searchBox .hotkey{float:left;}
#ftvHeader .search .searchBox .elect2016{float:left;margin-top:-31px;margin-left:50px;}
#ftvHeader .search .searchBox .ipt{float:left; width:208px; height:19px; border:solid 1px #3f537b; border-right:0;}
#ftvHeader .search .searchBox .btn{float:left; width:61px; height:23px; border:solid 1px #3f537b; border-left:0;}
#ftvHeader .search .searchBox a{
		font-family:Arial, Helvetica, sans-serif;	
		color:#f70808;
		text-decoration: none;	
	}


	
/* content內容區塊 橫線間隔*/
#content{ clear:both; margin-top: 10px;
}

/* 左側邊欄 menu */
#content>#slider{
	float:left;
	width:20%;
	margin-left:0px;
	overflow:hidden;
	background: #333333;
}
#content>#slider>#programe_menu{
	background:#083F53;

	}
#content>#slider>#programe_menu>a{
	display:block;
	height:40px;
	/*border-bottom:solid 1px #eee;*/
	color:#fff;
	font-size:1.1em;
	text-align:center;
	line-height:2.5em;
	letter-spacing: 10px;
	background: #083F53;
	text-decoration: none;	
}
	
#content>#slider>#programe_menu>a.one{ background: #029EAB; color:#FFFFFF; line-height:2.2em; }
	
#content>#slider>#programe_menu>a.end, #content #slider #bind_menu a.end{
border-bottom:0; }
	
#content>#slider>#programe_menu>a:hover{
background: #012A3B;-webkit-transition: all 0.4s; -o-transition: all 0.4s; -moz-transition: all 0.4s; transition: all 0.4s; /* Old browsers */
}
	
#content #slider #bind_menu{ background:rgba(255, 255, 255, 0.95); }
	
#content #slider #bind_menu a{
	display:block;
	height:35px;
	color:#012A3B;
	font-size:0.95em;
	text-align:center;
	line-height:2.2em;
	letter-spacing: 1px;
	border-bottom: #012A3B 1px solid;
	text-decoration: none;
	}
	
#content>#slider>#bind_menu>a:hover{ color: #FFFFFF; background: #012A3B;-webkit-transition: all 0.4s; -o-transition: all 0.4s; -moz-transition: all 0.4s; transition: all 0.4s; /* Old browsers */ }

/**左側專案AD**/		
#conten>#slider>#AD{ width:180px;  overflow:hidden; /*border:solid 1px #ccc;*/ margin:15px auto; }
#content>#slider>#AD>a>img{ width: 100%; height: auto;} /***20191225新增***/

/*  右邊內容*/
#content #main{ float:right; width:76%; margin-right:0px; }

/* 影音專區 右邊*/
#videoNews{
	width: 100%; max-width: 830px; /**max-width: 782px;**/
	margin: 0 auto 0 1.5%;
	box-sizing: border-box;
	-webkit-box-sizing: border-box;

}
#videoNews h2{
	background:none;
	font-size:15px;
	color:#7d7d7d;
	margin:0;
	padding:0 10px;
	line-height:28px;
	clear:both;
	margin-bottom:5px;
	height:28px;
	}
	
#videoNews h2 span{float:left;}
	
#videoNews h2 a.more{
		float:right;
		color:#7d7d7d;
		text-decoration: none;
		font-size: 15px;
		font-weight: normal;
		background:url(../images/more_btn.png) no-repeat right 5px; 
		-moz-background-size:42px 18px;
		-webkit-background-size:42px 18px;
		-o-background-size:42px 18px;
		background-size:42px 18px;		
		padding-right:45px;
		line-height:28px;	
	}


/***新的電視框***/
.v_container{display: flex;flex-flow: row wrap; justify-content: space-between; width:100%; min-width: 794px; height: 360px; padding: 4px; 		/*background: rgba(210,208,209,1.00);*/
	 background:#083F53;
	 border-radius: 3px; margin: 0 0;}
.v_box{width: 76%; max-width: 640px;/* width: 640px; background:#000000;*/}
.v_tunes{display: inline-flex;flex-flow: column nowrap; justify-content:space-between; width: 23%;  /*width: 150px; */padding: 0 ; margin: 0;}/**即Ul**/
.v_tunes>a>li{display: flex; align-items: center; justify-content: center;width: 100%; height: 51.4px;border-radius: 0; background: rgba(255, 255, 255, 0.1);}
.v_tunes>a>li:first-of-type{border-radius: 0 3px 0 0;}
.v_tunes>a>li:last-of-type{border-radius: 0 0 3px 0;}
.v_tunes>a:hover>li ,#ch_focus{ 
	box-sizing: border-box; 
	background: rgba(0, 0, 0, 0.1);
	border-bottom: rgba(190, 225, 227, 0.338) 1px solid;border-top: rgba(1, 47, 50, 0.5) 2px solid;
	-moz-transition: all 0.5s ease-in-out; -ms-transition: all 0.5s ease-in-out; -webkit-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out;
}
.v_tunes>a>li>img{width: 135px; height: auto;}

/***中右欄位含最近消息***/
#FtvNews, #Artistlist{ width:95%; }
#FtvNews, #lifeNews ,#Artistlist{ clear:both; margin:30px 0; overflow:hidden; }

/**中間橫式AD**/
#my_div{
	display: block; position: relative;
	box-sizing: border-box; -webkit-box-sizing: border-box;
	margin: 0px auto 40px auto;
	width: 92%; max-width: 790px; height:100px;
	/* overflow: hidden;  */
	/* background-color: #d7d7d7; */
}
#my_div img{ width: 100%; height:auto;}
#my_div::before{display: block; content:" "; width: 1px; height: 100%; background: rgba(2, 157, 171, 0.3);  position: absolute; left: -30px; top:0; }
#my_div::after{display: block; content:" "; width: 1px; height: 100%; background: rgba(2, 157, 171, 0.3);  position: absolute; right: -30px;top:0;  }

/*最新消息區*/
#FtvNewsL{ float:left; width:56%;}
#FtvNewsL #MarqueeAd{ clear: both; }
#FtvNewsL #FtvNewsList{ padding:0px; overflow:hidden; /*height:369px;*/ }
#FtvNewsL #FtvNewsList h2{
	display: block;
	/* border-bottom: rgba(2, 157, 171, 0.3) 1px solid;  */
	border-radius: 0px;
	font-size:1.1em; font-weight: 500;
	color: rgba(1, 42, 59, 1);
	padding:2px 25px;
	line-height:1.8em;
	clear:both;
	margin: 0 0 5px 0;	
	position: relative;	
	}

#FtvNewsL #FtvNewsList h2::before{ display: block; content:" "; height: 25px; padding: 2px 2px; border-right:rgba(1, 42, 59, 1) 5px solid; position: absolute; left: 5px; }
#FtvNewsL #FtvNewsList h2::after{ position: absolute; right: 0; bottom: 3px; content: "latest news"; display: block; width: 78%; margin-left:8px; border-bottom:rgba(1, 42, 59, 0.8) 2px solid; color:rgba(1, 42, 59, 0.5); }
#FtvNewsL #FtvNewsList a{
		display:block; width:100%;
		color:#373737;
		font-size:1em;
		text-decoration: none;
		line-height:2.5em;
		padding-left:20px;
		position: relative;
		margin: 3px 0;
		overflow:hidden;
        text-overflow : ellipsis;
        white-space : nowrap;
	}
#FtvNewsL #FtvNewsList a:nth-child(2),
#FtvNewsL #FtvNewsList a:nth-child(3),
#FtvNewsL #FtvNewsList a:nth-child(4){ color:#e1133c; font-weight: bold;}

#FtvNewsList a::before{ display: block; content:" "; height: 22px; /*border-right: rgba(2, 157, 171, 0.6) 5px solid;*/ padding: 2px 2px; position: absolute; left: 5px; margin-top: 8px;}	
#FtvNewsList a::after{ display: block; content:" "; height: 22px; border-bottom: rgba(74, 74, 74, 0.1) 1px solid; position: absolute; bottom: 3px; left: 5px; background: rgb(233, 233, 233); width: 0%; height: 0.5px;}
#FtvNewsList a:hover::after{ width: 98%;border-bottom: rgba(74, 74, 74, 0.2) 1px dashed; -webkit-transition: all 0.2s; -o-transition: all 0.2s; -moz-transition: all 0.2s; transition: all 0.2s;}

#FtvNewsList a:nth-child(1)::before{ border-right: #cd6a7e 5px solid;}
#FtvNewsList a:nth-child(2)::before{ border-right: #ff9178 5px solid;}
#FtvNewsList a:nth-child(3)::before{ border-right: #ffa507 5px solid;}
#FtvNewsList a:nth-child(4)::before{ border-right: #83dea5 5px solid;}
#FtvNewsList a:nth-child(5)::before{ border-right: #6fccd1 5px solid;}
#FtvNewsList a:nth-child(6)::before{ border-right: #cd6a7e 5px solid;}
#FtvNewsList a:nth-child(7)::before{ border-right: #ff9178 5px solid;}
#FtvNewsList a:nth-child(8)::before{ border-right: #ffa507 5px solid;}
#FtvNewsList a:nth-child(9)::before{ border-right: #83dea5 5px solid;}
#FtvNewsList a:nth-child(10)::before{ border-right: #6fccd1 5px solid;}
#FtvNewsList a:nth-child(11)::before{ border-right: #cd6a7e 5px solid;}
#FtvNewsList a:nth-child(12)::before{ border-right: #ff9178 5px solid;}
#FtvNewsList a:nth-child(13)::before{ border-right: #ffa507 5px solid;}
#FtvNewsList a:nth-child(14)::before{ border-right: #83dea5 5px solid;}
#FtvNewsList a:nth-child(15)::before{ border-right: #6fccd1 5px solid;}



.MsgTitleshop {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 15px;
	color: #0066cc;
	font-weight: bold;
	text-decoration: none;
}
.MsgTitleshop:hover {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 15px;
	color: #FF6666;
	font-weight: bold;
}

.MsgTitlea {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #666666;
	font-weight: bold;
	text-decoration: none;
}
.MsgTitle a:hover {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #FF6666;
	font-weight: bold;
}

.Msglista { font-family: Arial, Helvetica, sans-serif; font-size: 12px; color: #666666; text-decoration: none; }
.Msglista:hover { font-family: Arial, Helvetica, sans-serif; font-size: 12px; color: #FF6666; }

/*節目導覽*/
#nav{
	clear:both; /* FF3.6-15 */
	background: #017D87; /* FF3.6-15 */
	overflow:visible;
	margin:20px 0; padding:0 0 20px 0;
	height: fit-content;
	display: flex; flex-flow: row wrap; justify-content: center;
}
#nav>.navbar{width: 100%; display:block;clear: both; background: rgba(0,0,0,0.30); margin: 0px; padding: 0px;}
#nav>.navbar>p{display: inline-block; padding: 0px 25px; margin: 0px; height:40px; line-height: 2.2em; box-sizing: border-box;}
#nav>.navbar>p:first-child{ color: rgba(190,225,227,1); width: 80%; background: #017D87; font-size: 1em; font-weight: 400; }
#nav>.navbar>p:first-child::before{content:"▾"; padding-right: 5px;}
#nav>.navbar>p:last-child{ width: 18%;text-align: center;}
#nav>.navbar>p:last-child::after{content:"‣‣"; color: rgba(255,255,255,1); padding-left: 5px; }

#nav>.navbar>p>a{ color:  rgba(255,255,255,1); text-decoration: none;  box-sizing: border-box; padding-top: 8px; /*text-indent:-8888px;*/}
#nav>.navbar>p>a:hover{color:rgba(255,255,255,0.50);}

.tag1box, .tag2box, .tag3box, .tag4box,.tag5box{ display:inline-block; box-sizing: border-box; padding: 5px 10px; margin: 10px 1%; min-height:270px; overflow:hidden; text-align:left; vertical-align: top; }

.tag1box{width:14%; }
.tag2box{width:22%;}
.tag3box{width:22%;}
.tag4box{width:14%;}
.tag5box{width:14%;}
.tag5box a{clear:both;}

.tag4box{border:0;}
.tag1box>h2>a ,.tag2box>h2>a ,.tag3box>h2>a ,.tag4box>h2>a ,.tag5box>h2>a
{display:block;width: 100%; font-weight: 400; text-align: left; text-decoration: none;  color: rgba(255,255,255,1.00); border-bottom: rgba(255, 255, 255, 0.2) solid 2px; padding: 0 5px; line-height: 1.5em;}
.tag1box>h2, .tag2box>h2, .tag3box>h2, .tag4box>h2, .tag5box>h2{ font-size: 1.1em; line-height: 2em; margin: 5px 0 15px 0;}

/*節目項次*/
#nav>.tag1box>.a,#nav>.tag2box>.a,#nav>.tag3box>.a,#nav>.tag4box>.a,#nav>.tag5box>.a {display:block; float:left;/* width:49%;*/ font-size:0.8em; color: rgba(255,255,255,0.80); text-decoration:none; line-height:2em; }
#nav>.tag1box>.a:hover ,#nav>.tag2box>.a:hover ,#nav>.tag3box>.a:hover ,#nav>.tag4box>.a:hover ,#nav>.tag5box>.a:hover 
{ color: #012A3B;
}
.tag1box>.a,.tag4box>.a ,.tag5box>.a{
	clear:both;
	width:100%;
	text-align: left;
	margin: 0 auto;
}
.tag2box>.a, .tag3box>.a{
	width:49.5%;margin: 0 auto;
}


#footer{
	clear:both;
	height:135px;
	overflow:hidden;
	margin:10px auto;
	/* border-top:solid 1px rgba(8, 63, 83, 0.3); */
	font-size:12px;
	color:#a09d9d;
	line-height:1.8em;
}

#footer>a{color:rgba(0, 0, 0, 0.3) ; text-decoration:none;}
#footer .logo{display:block; width:60px; height:50px; background:url(../images/footer_logo.svg) no-repeat; float:left; text-indent:-9999px; margin:20px 10px 0 200px;}
#footer>.link{float:left; margin:15px;}
#footer>.link>a{color:#083F53; text-decoration: none;}

/* 節目表 */
.titlebox {
	font-size: 12px;
	font-family: Arial, Helvetica, sans-serif;
	color: #FFFFFF;
}

.titlebox a{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #FFFFFF;
	text-decoration: none;
}

.titlebox a:hover{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #FFFFFF;
	text-decoration: underline;
}

.bigparagraph {
	color: #525252;
	font-family: Arial, Helvetica, sans-serif;
	line-height: 26px;
	font-size: 16px;
}

.paragraph {
	font-size: 12px;
	color: #525252;
	font-family: Arial, Helvetica, sans-serif;
}

.bigparagraph {
	color: #525252;
	font-family: Arial, Helvetica, sans-serif;
	line-height: 26px;
	font-size: 16px;
}

.PPlistsp{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #FFFFFF;
	text-decoration: none;
	display: block;
	background-color: #FD6864;
	margin-bottom: 5px;	
	padding-left: 15px;
	line-height: 20px;
}

.blocka {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #666666;
	font-weight: bold;
	text-decoration: none;
}
.blocka:hover {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #FF6666;
	font-weight: bold;
}

.bigparagraph {
	color: #525252;
	font-family: Arial, Helvetica, sans-serif;
	line-height: 26px;
	font-size: 16px;
}

.QAhead{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 18px;
	font-weight: bold;
	color: #FFFFFF;
	text-decoration: none;
	display: block;
	background-color: #187cd4;
	margin-bottom: 5px;
	margin-right: 5px;
	margin-left: 5px;
	padding-left: 15px;
	line-height: 25px;
}

.QAheadItem{
	font-size: 15px;
	color: #FF3366;
	border: 1px solid #C7C9D1;
	margin-left: 7px;
	padding-left: 10px;
	letter-spacing: 2px;
	font-family: Arial, Helvetica, sans-serif;
	display: block;
	clear:both;
	margin-right: 7px;
	margin-top: -5px;
	line-height: 20px;
}

.QAtxt {
	font-size: 13.5px;
	color: #666666;
	line-height: 22px;
	font-family: Arial, Helvetica, sans-serif;
	margin-right: 20px;
	margin-left: 20px;
}

.bluemore {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #257FD5;
	text-decoration: none;
}

a.bluemore:hover 
{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #FF6666;
	text-decoration: underline;
}

.copy {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #666666;
	text-decoration: none;
}
.copy:hover {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #FF6666;
	text-decoration: underline;
}

#myFlash{position:absolute; right:0; bottom:0; z-index:1000;}


/***右AD***/	
#FtvNewsR{ float:right; width:336px; margin-top: 28px; }
/***ADr包含四季AD***/
#FtvNewsR #ADr{
	width:336px;
	height:inherit;
	margin-bottom:3px;
}
/**消費高手AD區**/
#FtvNewsR #shopAD{
	clear:both; position: relative;
	width:334px;
	min-height: 129px;
	/* height:129px; */
	 margin: 20px 0;
}
#FtvNewsR #shopAD #showADHeader{
		background:#fdf2bb;
		height:28px;
		border-bottom:solid 1px #fbe168;	
	}

#FtvNewsR #shopAD #showADHeader a.shoplogo{
		width:153px;
		height:23px;
		float:left;
		margin-top:2px;
		margin-left:10px;	
		display:block; 
		background:url(../images/shoplogo.jpg) no-repeat;
		text-indent:-99999px;
	}
#FtvNewsR #shopAD #showADHeader a.more{
		width:42px;
		height:18px;
		float:right;
		margin-top:5px;
		margin-right:5px;	
		display:block; 
		background:url(../images/more_btn.png) no-repeat;
		-moz-background-size:42px 18px;
		-webkit-background-size:42px 18px;
		-o-background-size:42px 18px;
		background-size:42px 18px;
		text-indent:-99999px;
	}
#FtvNewsR #shopAD #shopbody{ padding:2px;}

.container {width:330px; height:96px; border:0;vertical-align:top;}
.right_box{ margin: 50px auto 30px auto; position: relative;}
.right_box img{ width: 100%; height: auto;}
.right_box::before{ position: absolute; content: "頻道推薦"; border-bottom: rgba(0, 0, 0, 0.1) 2px solid; padding-bottom: 2px; color: #017D87; top:-30px; right: 0;}


/* ！右側AD串場！ */
/* 先將圖片就定位     */

.slider_container {
    margin: 0 auto;
    width: 336px;
    height: 131px;
    position: relative;
    border-color: #fff; margin-bottom: 30px;
}
.slider_container>ul {width: 100%; position: absolute;  list-style: none;top: 0; left: 0; margin: 0; padding: 0;}
.slider_container>ul>li>img{ width: 100%; height:  auto; margin: 0; padding: 0;} /* mei加 */

 /* mei加2020/05/29 更換slider-html */
.slider_container::before { position: absolute; content: "線上收看"; border-bottom: rgba(0, 0, 0, 0.1) 2px solid; padding-bottom: 2px; color: #017D87; top:-30px; right: 0;}
.slider_container img{ width: 100%; height:  auto; }

.slider_container div {
    position: absolute;  list-style: none;
    top: 0;
    left: 0;
    opacity: 0;
    filter: alpha(opacity=0);
} 
/* CSS3 Keyframes Animation設定動畫週期    */
.slider_container div {
    -webkit-animation: round 20s linear infinite;
            animation: round 20s linear infinite;
}

@-webkit-keyframes round {
    5% {
        opacity: 1;
        filter: alpha(opacity=100);
        /* 0 - 1秒 淡入*/
    }
    45% {
        opacity: 1;
        filter: alpha(opacity=100);
        /* 1- 9秒靜止*/
    }
    49% {
        opacity: 0;
        filter: alpha(opacity=0);
        /* 9-10秒淡出*/
    }
}
@keyframes round {
    5% {
        opacity: 1;
        filter: alpha(opacity=100);
        /* 0 - 1秒 淡入*/
    }
    45% {
        opacity: 1;
        filter: alpha(opacity=100);
        /* 1- 9秒靜止*/
    }
    49% {
        opacity: 0;
        filter: alpha(opacity=0);
        /* 9-10秒淡出*/
    }
}

/* 每張圖片進場時間相隔10秒 */
.slider_container>div:nth-child(2),.slider_container>div:nth-child(2) a {
-webkit-animation-delay: 0s;
animation-delay: 0s;
}

.slider_container>div:nth-child(1),.slider_container>div:nth-child(1) a {
-webkit-animation-delay: 10s;
animation-delay: 10s;
}
.slider_container>div>a{
width: 100%; height:0 ; padding-bottom: 38%;
-webkit-animation-delay: 10s;
animation-delay: 10s;
}

/* 當滑鼠移到圖片上時、底下出現 “Image Description” 字樣且輪播動畫暫停 */
.slider_container span {    
    color: #fff;
    position: absolute;
    left: 0%;
    top: 135px;
    width: 336px;
    height: 0px;
    font-size: 1em;
    text-align: center;
    line-height: 20px;
    -webkit-transform:scaleY(0);
        -ms-transform:scaleY(0);
            transform:scaleY(0);
    -webkit-transition: all 1s ease-in-out;
            transition: all 1s ease-in-out;
}

.slider_container:hover span {
    width: 100%;
    -webkit-transform:scaleY(1);
        -ms-transform:scaleY(1);
            transform:scaleY(1);
}

/* Pause And Restart當滑鼠移到圖片上時，暫停播放動畫 */
.slider_container:hover>div {
    -webkit-animation-play-state: paused;
            animation-play-state: paused;
}
/***訊號發射站****/
.state{ width: 95%; height: auto;min-height: 500px; margin: 5% auto; color: #373737;}
.state>h2{ font-size: 1.6em; width: 90%; height: auto;min-height: 350px; padding-top: 5%; margin: 10% auto;text-align: center; background-image: url(../images/good.svg);background-size:cover;background-repeat: no-repeat; background-position: center top;}
.state>ul{ font-size: 1.4em; width: 90%; height: auto;min-height: 350px; padding-top: 5%; margin: 10% auto;background-image: url(../images/oops.svg);background-size:cover;background-repeat: no-repeat; background-position: center top;}


/***2020新版藝人主播***/
#Artistlist{ display: flex; flex-direction: row;justify-content: space-between; margin-top: 10px}
.talent ,.anchor{width: 49%; padding: 0; position: relative;-webkit-box-sizing:border-box; box-sizing:border-box;}
.anchor{ margin-left: 2%; }
.t_link{ position: absolute; width: 100%; height: 45px; bottom: 0;z-index: 99;font-size: 1.2em; line-height: 2.5em; font-weight: 500; color: rgba(255, 255, 255, 1); padding-left: 15px;-webkit-box-sizing:border-box; box-sizing:border-box; cursor: pointer;}
.talent .t_link{ 
	background: -moz-linear-gradient(left,  rgba(237, 0, 0, 0.8) 0%, rgba(237,0,0,0.3) 60%, rgba(0,0,0,0) 95%); /* FF3.6-15 */
	background: -webkit-linear-gradient(left,  rgba(237,0,0,0.8) 0%,rgba(237,0,0,0.3) 60%,rgba(0,0,0,0) 95%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to right,  rgba(237,0,0,0.8) 0%,rgba(237,0,0,0.3) 60%,rgba(0,0,0,0) 95%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff0000', endColorstr='#00000000',GradientType=1 ); /* IE6-9 */
		}
.anchor .t_link{ 
	background: -moz-linear-gradient(left,  rgba(7, 37, 65, 0.9) 0%, rgba(7, 37, 65,0.3) 60%, rgba(7, 37, 65,0) 95%); /* FF3.6-15 */
	background: -webkit-linear-gradient(left,  rgba(7, 37, 65, 0.9) 0%,rgba(7, 37, 65,0.3) 60%,rgba(7, 37, 65,0) 95%); /* Chrome10-25,Safari5.1-6 */
			background: linear-gradient(to right,  rgba(7, 37, 65, 0.9) 0%,rgba(7, 37, 65,0.3) 60%,rgba(7, 37, 65,0) 95%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
			filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#072541', endColorstr='#00000000',GradientType=1 ); /* IE6-9 */
				}		
.t_link>a{ color: rgba(255, 255, 255, 1); text-decoration: none; }
.t_link>a:hover{ color: rgba(255, 255, 255, 0.7);}

.talent>ul, .anchor>ul{
  list-style: none;
  width: 100%;
  max-width: 900px;
  height: fit-content;
  margin: 0; padding: 0;
  -webkit-box-sizing:border-box; box-sizing:border-box;
}
.talent>ul>li, .anchor>ul>li{
  float: left;
  width: 20%;
  /* width: 16.666%; */
  height: 230px;
  opacity: 0.4;
  -moz-transition: all 0.5s ease-in-out;
  -ms-transition: all 0.5s ease-in-out;
  -webkit-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
  -webkit-box-sizing:border-box; box-sizing:border-box;
}

.talent>ul>li:hover, .talent>ul>li:first-child ~ li:last-child ,
.anchor>ul>li:hover, .anchor>ul>li:first-child ~ li:last-child 
{ width: 40%; opacity: 1; -moz-transition: all 0.5s ease-in-out; -ms-transition: all 0.5s ease-in-out; -webkit-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out;
}
.talent>ul>li:hover ~ li:last-child ,
.anchor>ul>li:hover ~ li:last-child 
{ width: 20%; opacity: 0.4; }
.talent>ul>li:nth-child(1) { background: url("../images/2020ta_01.jpg") top left no-repeat;background-size: cover;}
.talent>ul>li:nth-child(2) { background: url("../images/2020ta_02.jpg") top left no-repeat; background-size: cover;}
.talent>ul>li:nth-child(3) { background: url("../images/2020ta_03.jpg") top left no-repeat; background-size: cover;}
.talent>ul>li:nth-child(4) { background: url("../images/2020ta_04.jpg") top left no-repeat;background-size: cover;}
/*mei*/
.anchor>ul>li:nth-child(1) { background: url("../images/2020ac_01.jpg") top left no-repeat; background-size: cover;}
.anchor>ul>li:nth-child(2) { background: url("../images/2020ac_02.jpg") top left no-repeat; background-size: cover;}
.anchor>ul>li:nth-child(3) { background: url("../images/2020ac_03.jpg") top left no-repeat;background-size: cover;}
.anchor>ul>li:nth-child(4) { background: url("../images/2020ac_04.jpg") top left no-repeat;background-size: cover;}

/** Add cool filter efects **/
.talent>ul>li::before,.anchor>ul>li::before {
  content: "";
  display: none; /**原block**/
  width: 0;
  height: 100%;
  -moz-transition: all 0.5s ease-in-out;
  -ms-transition: all 0.5s ease-in-out;
  -webkit-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
  -webkit-box-sizing:border-box; box-sizing:border-box;
}
.talent>ul>li:nth-child(1)::before { background-color: rgba(255, 87, 34, 0.2);}
.talent>ul>li:nth-child(2)::before { background-color: rgba(76, 175, 80, 0.25);}
.talent>ul>li:nth-child(3)::before { background-color: rgba(33, 150, 243, 0.25);}
.talent>ul>li:nth-child(4)::before { background-color: rgba(156, 39, 176, 0.2);}

.anchor>ul>li:nth-child(1)::before { background-color: rgba(255, 87, 34, 0.2);}
.anchor>ul>li:nth-child(2)::before { background-color: rgba(76, 175, 80, 0.25);}
.anchor>ul>li:nth-child(3)::before { background-color: rgba(33, 150, 243, 0.25);}
.anchor>ul>li:nth-child(4)::before { background-color: rgba(156, 39, 176, 0.2);}


/* 生活通 */	
#lifeNews{
	border-top:solid 1px #d0d0d0;
	/*border-bottom: solid 1px #d0d0d0;*/
	padding:4px 0px;
	overflow:hidden;
	_float:left;
}
#lifeNews h2{
	background:#caf0df;
	font-size:15px;
	color:#065331;
	margin:0;
	padding:0 10px;
	line-height:35px;
	clear:both;
	margin-bottom:5px;
	height:28px;	
}
	
	#lifeNews h2 span{float:left;}
	#lifeNews h2 a{
		float:right;
		color:#9db5aa;
		text-decoration: none;
		font-size: 0.8em;
		font-weight: normal;
		background:url(../images/more_btn.png) no-repeat right 3px;
		-moz-background-size:42px 18px;
		-webkit-background-size:42px 18px;
		-o-background-size:42px 18px;
		background-size:42px 18px;
		padding-right:45px;
		line-height:28px;	
		_position:absolute;
		_right:5px;
		_top:1px;			
	}

/* 生活通 */
/* #lifeNewsContent{ height:145px; overflow:hidden;}
#lifeNewsContent .first{float:left; border-right:dotted 1px #ccc; padding-right:7px;}
#lifeNewsContent .first img {border:solid 4px #ccc; margin:7px; float:left;}
#lifeNewsContent .first .body{float:left; width:250px; margin-left:12px; margin-top:3px;}
#lifeNewsContent .first .body h3, .body p{margin:0; padding:0;}
#lifeNewsContent .first .body h3{ margin-bottom:6px;}
#lifeNewsContent .first .body h3 a{color:#0066cc; font-size:16px; text-decoration:none;}
#lifeNewsContent .first .body p{font-size:15px; color:#373737; line-height:1.4em;}

#lifeNewsContent .list{float:left; width:96%; padding-left:10px; line-height:1.8em;}
#lifeNewsContent .list a{color:#373737; font-size:15px; text-decoration:none; display:block;}
#lifeNewsContent .list a b{font-size:12px; font-weight:normal;}
#lifeNewsContent .list a b.b1{color:#cb5c5c;}
#lifeNewsContent .list a b.b2{color:#309504;}
#lifeNewsContent .list a b.b3{color:#816102;}
#lifeNewsContent .list a b.b4{color:#9067BC;} */