@charset "utf-8";
/* CSS Document */
html, body{width:100%; min-width:320px; height:100%; margin:0%; padding:0%; -webkit-overflow-scrolling:touch; -webkit-tap-highlight-color:transparent; -webkit-text-size-adjust:100%; -webkit-font-smoothing:antialiased !important; -moz-osx-font-smoothing:grayscale; font-family:Montserrat,NotoSansHK,Helvetica,Arial,'微軟正黑體','Microsoft JhengHei',sans-serif; font-weight:100; color:#FFFFFF; font-feature-settings:'kern'; -webkit-text-rendering:optimizeLegibility; text-rendering:optimizeLegibility; background-image:radial-gradient(circle farthest-corner at 10% 20%, rgba(87,108,117,1) 0%, rgba(0,0,0,1) 100.2% ); background-attachment:fixed;}
a, #SectionNav a.Selected, .BreadcrumbLocation > a, .BreadcrumbLocation > span, .Breadcrumb a, .Time, .Table a{color:#FFFFFF !important;}
a:hover, #SectionNav a.Selected:hover, .BreadcrumbLocation > a:hover, .Breadcrumb a:hover{color:#CCCCCC !important;}
.Remark{color:#FFFFFF !important;}
/* Header *********************************************************************************************************************************************************************************************/
header{background-color:transparent; border:none; position:sticky; position:-webkit-sticky; top:-55px; margin:0px; z-index:11000; -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px); -webkit-box-shadow:0px 12px 12px -8px rgba(0,0,0,0.5); box-shadow:0px 12px 12px -8px rgba(0,0,0,0.5); background:rgba(0,0,0,0.8); background-image:-moz-linear-gradient(113.3deg, rgba(0,98,186,0.3) -6%, rgba(88,40,178,0.3) 10.2%, rgba(234,39,119,0.3) 34.3%, rgba(255,80,152,0.3) 54%, rgba(255,101,74,0.3) 62.5%, rgba(254,166,34,0.3) 77.2%, rgba(255,227,99,0.3) 91.2%, rgba(58,243,156,0.3) 112%, rgba(58,243,156,0.3) 118.1% ); background-image:-webkit-linear-gradient(113.3deg, rgba(0,98,186,0.3) -6%, rgba(88,40,178,0.3) 10.2%, rgba(234,39,119,0.3) 34.3%, rgba(255,80,152,0.3) 54%, rgba(255,101,74,0.3) 62.5%, rgba(254,166,34,0.3) 77.2%, rgba(255,227,99,0.3) 91.2%, rgba(58,243,156,0.3) 112%, rgba(58,243,156,0.3) 118.1% ); background-image:linear-gradient(113.3deg, rgba(0,98,186,0.3) -6%, rgba(88,40,178,0.3) 10.2%, rgba(234,39,119,0.3) 34.3%, rgba(255,80,152,0.3) 54%, rgba(255,101,74,0.3) 62.5%, rgba(254,166,34,0.3) 77.2%, rgba(255,227,99,0.3) 91.2%, rgba(58,243,156,0.3) 112%, rgba(58,243,156,0.3) 118.1%);}
.Thumbnail a{border:none;}
.AsideAD{width:300px; flex:0 0 300px; overflow:hidden; display:block; margin:auto;}
.SectionMenu{margin-bottom:0px; width:auto; display:inline-flex; margin-right:10px;}
.Breadcrumb.SubCategory{display:block; width:100%;}
/*.Breadcrumb.SubCategory .BreadcrumbUpcoming{width:auto; display:flex; justify-content:flex-start; align-items:center; flex-wrap:wrap; gap:12px; line-height:1;}*/
.Breadcrumb.SubCategory .BreadcrumbUpcomingContainer{width:100%; background-color: rgba(0,0,0,1); padding:0 auto;}
.Breadcrumb.SubCategory .BreadcrumbUpcomingContainer .BreadcrumbUpcoming{padding:10px 20px; max-width:1980px; margin:0 auto;}
.Breadcrumb.SubCategory .BreadcrumbLocation, .SectionMenu a{margin-bottom:0px;}
.Breadcrumb.SubCategory .BreadcrumbUpcomingContainer .BreadcrumbUpcoming .Upcoming.UpcomingIcon{position:static; display:inline-block;}
.Breadcrumb.SubCategory .BreadcrumbUpcomingContainer .BreadcrumbUpcoming .UpcomingInfo{display:inline-block; font-size:13px; color:#FFFFFF; width:calc(100% - 100px);}
.Breadcrumb.SubCategory .BreadcrumbUpcomingContainer .BreadcrumbUpcoming .UpcomingInfo .line-clamp-box{display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;}
.SectionLiveInfo{display:inline-block; flex:0 0 100%; position:relative; margin-top:15px;}
.SectionIntro{display:block; flex:0 0 100%; position:relative;}
.SectionIntro p{font-size:14px; font-weight:100; line-height:normal; margin:0px;}
.SectionIntro p:first-of-type{margin-top:15px;}
.SectionIntro p:last-of-type{margin-bottom:15px;}
.SectionIntro p:first-of-type::before, .SectionIntro p:last-of-type::after{font-size:14px; color:#FFFFFF; width:25px; height:15px; display:inline-block; vertical-align:middle; margin:0px; line-height:15px;}
.SectionIntro p:first-of-type::before{content:"［"; text-align:left;}
.SectionIntro p:last-of-type::after{content:"］"; text-align:right;}
#SectionTrigger{width:90px; height:22px; display:none; position:absolute; top:14px; right:0px;}
#SectionTrigger::after{content:"展開"; position:absolute; right:0px; top:0px; display:block; width:50px; height:20px; text-align:center; font-size:12px; border:1px solid #FFFFFF; border-radius:10px; padding:0px 5px;}
#SectionTrigger::before{content:"..."; position:absolute; bottom:0px; left:10px; font-size:15px; color:#FFFFFF; letter-spacing:2px;}
.Thumbnail a{padding-top:56.2724%;}
.PageHeader{display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-start; width:100%; max-width:1980px; margin:0px auto 20px auto; padding:0px 15px;}
.SectionMenu a{color:#CCCCCC !important; border-color:rgba(255,255,255,0.3); font-weight:500;}
.SectionMenu a:hover{color:#FFFFFF !important; border-color:rgba(255,255,255,0.3); background-color:rgba(0,0,0,0.5);}
.SectionMenu a.Selected{background:rgb(255,255,255); background:-moz-linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(212,212,212,1) 100%); background:-webkit-linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(212,212,212,1) 100%); background:linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(212,212,212,1) 100%); color:#ffffff !important;}
.SectionDate{display:inline-block; font-size:13px; color:#FFFFFF; padding:5px 0px;}
.CarouseIndicator > span.swiper-pagination-bullet{background-color:rgba(255,255,255,0.2); border:none;}
.CarouseIndicator > span.swiper-pagination-bullet-active{background-color:#FFFFFF;}
.swiper-button-next, .swiper-button-prev{display:inline-block; vertical-align:middle; width:12px; height:20px; border:none; outline:none;}
.swiper-button-next::before, .swiper-button-prev::before{content:""; border-top:5px solid transparent; border-bottom:5px solid transparent; width:0px; height:0px; display:inline-block; *display:inline; padding:0px; margin:5px 0px 0px 0px; float:left; cursor:pointer;}
.swiper-button-next::after, .swiper-button-prev::after{clear:both;}
.swiper-button-prev::before{border-right:9px solid #FFFFFF;}
.swiper-button-next::before{border-left:9px solid #FFFFFF; margin-left:3px;}
.swiper-button-disabled.swiper-button-prev::before{border-right:9px solid #666666; cursor:default;}
.swiper-button-disabled.swiper-button-next::before{border-left:9px solid #666666; cursor:default;}
.Grid-Article-Extra #Extra-QuoteSubmit{background:rgb(255,255,255); background:-moz-linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(212,212,212,1) 100%); background:-webkit-linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(212,212,212,1) 100%); background:linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(212,212,212,1) 100%); color:#333333; line-height:26px; font-weight:900;}
/* Footer */
footer{margin-top:60px; z-index:10500;}
footer > div > div{max-width:1980px;}
#FooterDomain, #FooterContact{background-color:rgba(0,0,0,0.9);}
#FooterSitemap{background-color:rgba(15,15,15,0.85);}
#FooterProduct, #FooterDisclaimer{background-color:rgba(20,20,20,0.9);}
#FooterProduct #SNSFamilyHeader, #FooterDisclaimer p{color:#FFFFFF;}
#FooterProduct > div > div:first-of-type{border-color:rgba(255,255,255,0.2);}
#FooterAwards {
background-color: #ffffff;
text-align: center;
padding-bottom: 20px;
}
#FooterAwards .container {
margin: auto;
padding: 15px 0 0 0px;
display: ruby;
}
#FooterAwards {
/* padding: 30px 0; */
}
#FooterAwards .container .MCA_8th img {
height: 80px;
width: 220px !important;
padding-bottom: 20px !important;
}
#FooterAwards .container .web_access img {
height: 100px;
}
#FooterAwards .container .IFEC img {
width: 250px !important;
padding: 10px 0 0 0;
}
#FooterAwards .container .HKEX_mkt_data img {
width: 230px !important;
}
/* #FooterAwards img {
display: initial;
text-align: center;
}
#FooterAwards .MCA_8th img {
width: 210px !important;
padding: 10px 0 20px 0;
}
#FooterAwards .web_access img {
width: 150px !important;
}
#FooterAwards .IFEC img {
width: 230px !important;
}
#FooterAwards .HKEX_mkt_data img {
width: 200px !important;
} */
/* Upper Header */
#TVHeaderWrapper{width:100%; height:55px; margin:0px; padding:0px; position:relative; z-index:11000; background-color:rgba(0,0,0,0.4); border-bottom:1px solid rgba(0,0,0,0.3);}
nav{width:100%; max-width:1980px; height:55px; margin:auto; display:flex; flex-wrap:nowrap; align-items:center; justify-content:space-between; position:relative;}
nav > div{flex:0 0 auto; align-self:center;}
#TVHdrNav{height:55px; display:flex; flex-wrap:nowrap; flex-basis:auto; align-items:flex-start; justify-content:flex-start; position:relative;}
#TVHdrLogo{flex-grow:1; height:22px; margin-left:15px;}
/* SNS inside Gradient Bar */
#TVHdrSNS{display:none; flex-wrap:nowrap; align-items:center; justify-content:flex-start; position:relative; margin:2px 30px 0px 0px; height:25px; flex-basis:auto;}
#TVHdrSNS > div{height:25px; margin-left:15px; flex-basis:auto;}
#TVHdrSNS > div:first-of-type{height:auto; font-size:10px; color:#FFFFFF; white-space:nowrap; align-self:flex-end; margin-bottom:3px;}
#TVHdrNav svg, #TVHdrSNS img{height:100%;}
#TVHdrSNS img{opacity:0.5; transition:opacity 0.3s ease-in-out;}
#TVHdrSNS img:hover{opacity:1; transition:opacity 0.3s ease-out;}
#TVHdrTimeTable{flex: 20 0 auto;}
#TVHdrTimeTable img{height: 32px; padding-left: 20px; cursor:pointer;}
/* Header Nav Icon */
#TVHdrNavIcon{width:50px; height:50px; margin-top:5px; position:relative; overflow:hidden; cursor:pointer; padding:10px; z-index:100; background-color:transparent; transition:background-color 0.2s ease-in-out; user-select:none;}
#TVHdrNavIcon.Expand{background-color:rgba(0,0,0,0.4); -webkit-box-shadow:0px -8px 8px 0px rgba(0,0,0,1); box-shadow:0px -8px 8px 0px rgba(0,0,0,1); transition:background-color 0.3s ease-in-out;}
#TVHdrNavIcon > div{width:25px; height:25px; margin-left:3px; margin-top:1px; position:relative; overflow:hidden;}
#TVHdrNavIcon > div > div{position:absolute; width:25px; height:3px; background-color:#FFFFFF; top:0px; left:0px; pointer-events:none;}
#TVHdrNavIcon > div > div:first-of-type{transform:translate(0px, 3px); transition:transform 0.35s ease-in-out 0.3s;}
#TVHdrNavIcon > div > div:nth-of-type(2){transform:translate(0px, 11px); transition:transform 0.2s ease-in-out 0.2s;}
#TVHdrNavIcon > div > div:nth-of-type(3){transform:translate(0px, 19px); transition:transform 0.1s ease-in-out 0.15s;}
#TVHdrNavIcon > div > div:nth-of-type(4){transform:translate(-25px, 3px) rotate(0deg); transform-origin:left center; transition:transform 0.25s ease-in-out;}
#TVHdrNavIcon > div > div:nth-of-type(5){transform:translate(-25px, 19px) rotate(0deg); transform-origin:left center; transition:transform 0.1s ease-in-out;}
#TVHdrNavIcon.Expand > div > div:first-of-type{transform:translate(25px, 3px); transition:transform 0.1s ease-out;}
#TVHdrNavIcon.Expand > div > div:nth-of-type(2){transform:translate(25px, 11px); transition:transform 0.2s ease-out;}
#TVHdrNavIcon.Expand > div > div:nth-of-type(3){transform:translate(25px, 19px); transition:transform 0.35s ease-out;}
#TVHdrNavIcon.Expand > div > div:nth-of-type(4){transform:translate(3px, 2px) rotate(45deg); transform-origin:left center; transition:transform 0.1s ease-out 0.2s;}
#TVHdrNavIcon.Expand > div > div:nth-of-type(5){transform:translate(3px, 20px) rotate(-45deg); transform-origin:left center; transition:transform 0.25s ease-out 0.3s;}
/* Menu Panel */
#TVGlobalMenu{width:auto; min-width:280px; height:auto; max-height:calc(100vh - 55px); position:absolute; top:55px; right:0px; overflow:auto; flex-wrap:wrap; align-items:flex-start; -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px); background-image:radial-gradient(circle farthest-corner at 10% 20%, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.8) 100.2% ); z-index:11000; -webkit-box-shadow:0px 12px 12px -4px rgba(0,0,0,0.8); box-shadow:0px 12px 12px -4px rgba(0,0,0,0.8); display:flex; visibility:hidden; opacity:0; transform-origin:top left; transform:scale(0.8,0.8);}
#TVGlobalMenu.Expand{visibility:visible; opacity:1; transform:scale(1,1); transition:transform 0.2s ease-in-out, opacity 0.2s ease-in-out;}
#TVGlobalMenu > div{flex:0 0 100%; overflow:hidden;}
#TVGlobalMenu > div:first-of-type{margin-top:10px;}
#TVGlobalMenu > div:last-of-type{margin-bottom:10px;}
#TVGlobalMenu > div > a{width:106%; font-size:15px; font-weight:500; color:#FFFFFF; padding:8px 30px; display:block; background:none; position:relative; transform:translateX(-3%); transition:transform 0.3s ease-in-out, background 0.3s ease-in-out;}
#TVGlobalMenu > div > a:hover{color:#FFFFFF; background-image:none; -webkit-text-fill-color:#FFFFFF; -webkit-background-clip:border-box; background:rgb(255,255,255); background:-moz-linear-gradient(90deg, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0) 100%); background: -webkit-linear-gradient(90deg, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0) 100%); background:linear-gradient(90deg, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0) 100%); transform:translateX(0%); transition:transform 0.2s ease-out, background 0.2s ease-out;}
#TVGlobalMenu > div > a::before{content:""; position:absolute; top:0px; left:0px; width:2%; height:100%; background:rgba(0,0,0,0.8); background-image:-moz-linear-gradient(113.3deg, rgba(0,98,186,0.7) -6%, rgba(88,40,178,0.7) 10.2%, rgba(234,39,119,0.7) 34.3%, rgba(255,80,152,0.7) 54%, rgba(255,101,74,0.7) 62.5%, rgba(254,166,34,0.7) 77.2%, rgba(255,227,99,0.7) 91.2%, rgba(58,243,156,0.7) 112%, rgba(58,243,156,0.7) 118.1% ); background-image:-webkit-linear-gradient(113.3deg, rgba(0,98,186,0.7) -6%, rgba(88,40,178,0.7) 10.2%, rgba(234,39,119,0.7) 34.3%, rgba(255,80,152,0.7) 54%, rgba(255,101,74,0.7) 62.5%, rgba(254,166,34,0.7) 77.2%, rgba(255,227,99,0.7) 91.2%, rgba(58,243,156,0.7) 112%, rgba(58,243,156,0.7) 118.1% ); background-image:linear-gradient(113.3deg, rgba(0,98,186,0.7) -6%, rgba(88,40,178,0.7) 10.2%, rgba(234,39,119,0.7) 34.3%, rgba(255,80,152,0.7) 54%, rgba(255,101,74,0.7) 62.5%, rgba(254,166,34,0.7) 77.2%, rgba(255,227,99,0.7) 91.2%, rgba(58,243,156,0.7) 112%, rgba(58,243,156,0.7) 118.1%);}
#TVGlobalMenu::-webkit-scrollbar-track{background-color:#666666;}
#TVGlobalMenu::-webkit-scrollbar{width:10px; background-color:#666666;}
#TVGlobalMenu::-webkit-scrollbar-thumb{background-color:#222222;}
/* SNS inside Menu Panel */
#TVMenuSNS{display:flex; flex-wrap:wrap; align-content:flex-start; padding:10px 40px 20px 20px; margin-bottom:10px; border-bottom:1px solid rgba(255,255, 255, 0.25);}
#TVMenuSNS > div{height:30px; flex-basis:auto; margin:15px 15px 0px 0px;}
#TVMenuSNS > div:first-of-type{height:auto; font-size:10px; color:#FFFFFF; white-space:nowrap; flex:0 0 100%; margin:0px;}
#TVMenuSNS img{height:100%;}
#TVMenuSNS img{opacity:0.5; transition:opacity 0.3s ease-in-out;}
#TVMenuSNS img:hover{opacity:1; transition:opacity 0.3s ease-out;}
/* Search inside Menu Panel */
#TVMenuInputBox{width:calc(100% - 30px); height:40px; margin:10px 15px; padding:0px 10px; background-color:rgba(255,255,255,0.1); border-radius:20px; display:flex; flex-wrap:nowrap; align-items:center; justify-content:space-around;}
#TVMenuInputBox input{flex:1 1; width:calc(100% - 50px); height:40px; border:none; background-color:transparent; color:#FFFFFF; font-size:15px;}
#TVMenuInputBox #TVMenuSearchIcon{width:28px; height:28px; z-index:2; opacity:0.7; margin:10px;}
#TVMenuInputBox #TVMenuSearchIcon img{height:100%;}
/* Header Section *********************************************************************************************************************************************************************************************/
#TVSectionWrapper, #TVSectionWrapper > div{width:100%; height:58px; position:relative; display:flex; flex-wrap:nowrap; align-items:center; justify-content:flex-start;}
#TVSectionWrapper > div{flex:0 0 auto; max-width:2010px; margin:auto; padding:0px;}
#TVSectionContainer{flex:1 1 auto; max-width:1980px; margin:auto; -webkit-mask-image:-webkit-linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 15px, rgba(0,0,0,1) calc(100% - 15px), rgba(0,0,0,0) 100%); mask-image:linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 15px, rgba(0,0,0,1) calc(100% - 15px), rgba(0,0,0,0) 100%);}
#TVSectionContainer > div{display:flex; flex-wrap:nowrap; justify-content:flex-start; padding:0px; align-items:stretch;}
#TVSectionContainer > div > a{flex:0 0 auto; display:block; font-size:16px; font-weight:500; color:rgba(255,255,255,1); text-align:center; letter-spacing:0px; line-height:30px; padding:14px 15px; user-select:none; transition:color 0.2s ease-in-out;}
#TVSectionContainer > div > a:last-of-type{margin-right:0px;}
#TVSectionContainer > div > a:hover{color:rgba(255,255,255,1); transition:color 0.2s ease-out;}
#TVSectionContainer > div > a.Selected{background:-moz-linear-gradient(180deg, rgba(255,255,255,0.4) 0%, rgba(255,255,255,0.3) 3%, rgba(255,255,255,0) 100%); background:-webkit-linear-gradient(180deg, rgba(255,255,255,0.4) 0%, rgba(255,255,255,0.3) 3%, rgba(255,255,255,0) 100%); background:linear-gradient(180deg, rgba(255,255,255,0.8) 0%, rgba(255,255,255,0.4) 3%, rgba(255,255,255,0) 100%); -webkit-box-shadow:0px -20px 15px 0px rgba(0,0,0,0.5); box-shadow:0px -20px 15px 0px rgba(0,0,0,0.5);}
.LiveProgramme{display:inline-block; vertical-align:baseline; width:auto; height:26px; background-color:transparent; font-size:12px; font-weight:500; color:#FFFFFF; line-height:26px; padding:0px 8px; margin:0px 0px 0px 5px; border:1px solid rgba(255,255,255,0.8); border-radius:10px;}
#TVSectionContainer > div > a:hover .LiveProgramme{color:#CCCCCC; border-color:rgba(255,255,255,0.4);}
#TVSectionContainer > div > a.Latest span{width:100%; padding:8px 20px; border-radius:20px; text-shadow:0px 0px 15px rgba(162,50,0,0.8); background-image:linear-gradient(109.6deg, rgba(255,194,48,0.8) 11.2%, rgba(255,124,0,0.8) 100.2%); color:#FFFFFF !important; font-weight:500; -webkit-box-shadow:0px 8px 8px -5px rgba(255,200,0,0.5); box-shadow:0px 8px 8px -5px rgba(255,200,0,0.5); position:relative; transition:-webkit-box-shadow 0.2s ease-in, box-shadow 0.2s ease-in;}
#TVSectionContainer > div > a.Latest span::after{content:""; width:100%; height:100%; border-radius:20px; position:absolute; top:0%; left:0%; -webkit-box-shadow:inset 0px -10px 10px -5px rgba(255,200,0,1); box-shadow:inset 0px -10px 10px -5px rgba(255,200,0,1); opacity:0; transition:opacity 0.2s ease-in;}
#TVSectionContainer > div > a.Latest:hover span{-webkit-box-shadow:0px 5px 5px -2px rgba(255,200,0,0.9); box-shadow:0px 5px 5px -2px rgba(255,200,0,0.9); transition:all 0.2s ease-out;}
#TVSectionContainer > div > a.Latest:hover span::after{opacity:1; transition:all 0.2s ease-out;}
#TVSectionContainer > div > a.Latest.Selected{background:none; -webkit-box-shadow:0px 0px 0px 0px rgba(0,0,0,0); box-shadow:0px 0px 0px 0px rgba(0,0,0,0);}
#TVSectionContainer > div > a.Popular span{width:100%; padding:8px 20px; border-radius:20px; text-shadow:0px 0px 15px rgba(255,23,23,0.95); background-image:linear-gradient(109.6deg, rgba(255,0,0,0.8) 11.2%, rgba(255,146,43,0.8) 100.2%); position:relative; transition:-webkit-box-shadow 0.2s ease-in, box-shadow 0.2s ease-in;}
#TVSectionContainer > div > a.Popular span::after{content:""; width:100%; height:100%; border-radius:20px; position:absolute; top:0%; left:0%; -webkit-box-shadow:inset 0px -10px 10px -5px rgba(255,200,0,1); box-shadow:inset 0px -10px 10px -5px rgba(255,200,0,1); opacity:0; transition:opacity 0.2s ease-in;}
#TVSectionContainer > div > a.Popular:hover span{-webkit-box-shadow:0px 5px 5px -2px rgba(255,200,0,0.9); box-shadow:0px 5px 5px -2px rgba(255,200,0,0.9); transition:all 0.2s ease-out;}
#TVSectionContainer > div > a.Popular:hover span::after{opacity:1; transition:all 0.2s ease-out;}
#TVSectionContainer > div > a.Popular.Selected{background:none; -webkit-box-shadow:0px 0px 0px 0px rgba(0,0,0,0); box-shadow:0px 0px 0px 0px rgba(0,0,0,0);}
#TVSectionContainer{margin-left:20px; margin-right:40px;}
#TVSectionWrapper .swiper-button-prev{top:50%; transform:translateY(-50%); left:10px; display:inline-block;}
#TVSectionWrapper .swiper-button-next{top:50%; transform:translateY(-50%); right:10px; display:inline-block;}
#TVSectionWrapper .panel-switch{top:50%; transform:translateY(-50%); right:10px; display:inline-block;}
#TVSectionWrapper .swiper-button-prev, #TVSectionWrapper .swiper-button-next, #TVSectionWrapper .panel-switch{position:absolute; z-index:1000;}
#TVSectionWrapper .swiper-button-disabled.swiper-button-prev::before{border-right: 9px solid rgba(255,255,255,0.2) !important;}
#TVSectionWrapper .swiper-button-disabled.swiper-button-next::before{border-left: 9px solid rgba(255,255,255,0.2) !important;}
#TVSectionLogo{flex:0 0 110px; padding-right:16px; margin:0px 15px; position:relative; display:none;}
#TVSectionLogo img{width:100%;}
#TVSectionLogo::after{content:"\2039"; display:block; font-size:22px; line-height:22px; height:22px; position:absolute; top:0%; right:0%; transform:rotate(180deg);}
#TVSectionWrapper.Sticky #TVSectionLogo{display:block; max-width:1980px;}
#TVSectionWrapper.Sticky #TVSectionContainer{flex:0 0 calc(100% - 140px - 60px); width:calc(100% - 140px);}
#TVSectionWrapper.Sticky .swiper-button-prev{left:150px;}
/* Search */
#TVSearchWrapper{flex:0 0 auto; width:30px; height:55px; margin-right:40px; position:relative; z-index:10001; background-color:transparent; transition:width 0.3s ease-out; display:none;}
#TVSearchWrapper #TVSearchIcon{width:30px; height:30px; z-index:2; opacity:0.7; cursor:pointer; margin:13px 0px 0px 20px;}
#TVSearchWrapper #TVSearchIcon img{height:100%;}
#TVSearchContainer{width:100%; height:55px; overflow:hidden; position:absolute; top:0px; left:0px; z-index:-1;}
#TVInputBox{width:calc(100% - 70px); height:30px; margin-top:13px; margin-left:55px; opacity:0; display:flex; flex-wrap:nowrap; align-items:center; justify-content:space-around; transition:opacity 0.2s ease-in-out;}
#TVInputBox input{flex:0 0 auto; width:calc(100% - 40px); height:30px; border:none; background-color:transparent; color:#FFFFFF; font-size:15px; border-bottom:1px solid rgba(255,255,255,0.3);}
::-webkit-input-placeholder{color:rgba(255,255,255,0.6); font-size:15px; text-indent:5px;}
:-moz-placeholder{color:rgba(255,255,255,0.6); font-size:15px; text-indent:5px;}
::-moz-placeholder{color:rgba(255,255,255,0.6); font-size:15px; text-indent:5px;}
:-ms-input-placeholder{color:rgba(255,255,255,0.6); font-size:15px; text-indent:5px;}
#TVCloseTigger{flex:0 0 30px; width:30px; height:30px; position:relative; cursor:pointer; opacity:0.6;}
#TVCloseTigger::before, #TVCloseTigger::after{content:""; position:absolute; top:15px; left:5px; width:22px; height:1px; background-color:#FFFFFF; transform-origin:center center;}
#TVCloseTigger::before{transform:rotate(45deg);}
#TVCloseTigger::after{transform:rotate(-45deg);}
#TVKeywords{width:100%; height:auto; display:block; padding:5px 20px 20px 20px; margin-top:12px; background-color:rgba(0,0,0,0.6); -webkit-box-shadow:0px 10px 15px -10px rgba(0,0,0,1); box-shadow:0px 10px 15px -10px rgba(0,0,0,1); opacity:0;}
#TVKeywords h3{font-size:16px; font-weight:500; color:#FFFFFF; padding-left:10px; margin:10px 0px;}
#TVKeywords a{display:inline-block; margin:5px; padding:5px 12px; font-size:14px; background-color:rgba(0,0,0,0.2); border:1px solid rgba(255,255,255,0.2); border-radius:6px; overflow:hidden; transition:background-color 0.2s ease-in-out;}
#TVKeywords a:hover{color:#FFFFFF !important; background-color:rgba(0,0,0,0.8); transition:background-color 0.2s ease-in-out;}
#TVSearchWrapper.Expand{width:420px; background-color:rgba(0,0,0,0.6); transition:width 0.5s ease-out, background-color 0.3s ease-in-out 0.3s;}
#TVSearchWrapper.Expand #TVSearchIcon{opacity:1; cursor:default;}
#TVSearchWrapper.Expand #TVInputBox{opacity:1; transition:opacity 0.3s ease-in-out;}
#TVSearchWrapper.Expand #TVSearchContainer{height:auto; overflow:visible;}
#TVSearchWrapper.Expand #TVKeywords{opacity:1; transition:opacity 0.3s ease-in-out 0.3s;}
@media only screen and (min-width:568px) {
}
/* CSS IE Hack */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
/* #TVSectionWrapper::after{display:none;} */
}
@media screen and (min-width: 0px) {
/* #TVSectionWrapper::after{display:none;} */
}
/* #TVSectionWrapper:not(*:root)::after{display:block;} */
/* Grid *********************************************************************************************************************************************************************************************/
section{width:100%; padding:10px; margin:0px auto;}
#TVMainWrapper{width:100%; height:auto; position:relative; margin:0px auto;}
.ExtraHeader{max-width:1950px; margin:0px auto; padding:0px 0px 10px 0px; color:#FFFFFF; display:flex; flex-wrap:wrap; justify-content:flex-start; align-items:center;}
.ExtraHeader span, .ExtraHeader a{font-weight:bold; color:#FFFFFF; flex:0 0 auto; margin-right:15px;}
#TVPlayerSection{margin:0px; padding:30px 0px; background-color:rgba(0,0,0,0.5);}
#TVPlayerSection > .ExtraHeader{padding:0px 15px 20px 15px;}
#TVPlayerSection > .ExtraHeader > h2{margin:0px 10px 0px 0px; line-height:100%;}
#TVPlayerWrapper{width:100%; max-width:1950px; margin:0px auto; display:flex; flex-wrap:wrap; align-items:flex-start; justify-content:flex-start;}
#TVPanelWrapper{flex:0 0 100%; width:100%; height:auto; overflow:hidden; position:relative;}
#TVPanelWrapper iframe{-webkit-box-shadow:0px 40px 40px -36px rgba(0,0,0,1); box-shadow:0px 40px 40px -36px rgba(0,0,0,1); background-color:#000000;}
#TVPanelContainer{width:100%; position:relative; overflow:hidden; z-index:10500;}
#TVContainWrapper > ul{padding:0px 20px 10px 20px;}
#TVContainWrapper > ul > li{border:none; display:none;}
#TVContainWrapper h2{margin:20px 0px;}
#TVContainWrapper p{margin:20px 0px; color:#FFFFFF;}
#TVContainWrapper .Tag{margin:20px 0px;}
#TVContainWrapper .Content{position:relative;}
.TVMarqueeWrapper{width:100%; height:40px; background-color:rgba(0,0,0,0.3);}
.TVMarqueeContainer{display:flex; flex-wrap:nowrap; align-items:center; justify-content:flex-start; padding:0%; margin:0%; width:100%; height:40px; -webkit-mask-image:-webkit-linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 20px, rgba(0,0,0,1) calc(100% - 20px), rgba(0,0,0,0) 100%); mask-image:linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 20px, rgba(0,0,0,1) calc(100% - 20px), rgba(0,0,0,0) 100%);}
.TVMarqueeContainer > div{flex:0 0 auto; width:auto; padding:10px 20px; font-size:15px; line-height:20px; color:#FFFFFF; font-weight:500; display:inline-block;}
#TVAside{flex:0 0 100%; width:100%; display:flex; flex-wrap:wrap; flex-direction:row; align-items:flex-start; justify-content:flex-start; position:relative;}
#TVAdv{flex:0 0 auto; width:100%; overflow:hidden; padding:0px 30px 30px 30px; display:none;}
#TVAdv > *{width:auto; max-width:300px;}
#TVAdv > a{display:block;}
#TVPlayListHeader{flex:0 0 100%; width:100%; display:flex; flex-wrap:nowrap; align-items:center; justify-content:space-between; padding:0px 15px 10px 15px;}
#TVPlayListHeaderName{flex:1 0 auto; font-size:16px; line-height:100%; font-weight:bold; color:#FFFFFF; padding-right:16px;}
.ListCounter{font-size:13px; font-weight:500; margin:0px 5px;}
#TVPlayListSetting{flex:0 0 auto; height:26px; border-radius:12px; overflow:hidden; position:relative; display:flex; flex-wrap:nowrap; align-items:center; justify-content:flex-start;}
#TVPlayListSettingName{flex:0 0 auto; font-size:13px; font-weight:500; color:rgba(255,255,255,0.6); padding-right:5px; align-self:center;}
#TVPlayListFullListIcon{flex:0 0 30px; width:30px; height:30px; overflow:hidden;}
#TVPlayListFullListIcon svg, #TVPlayListFullListIcon img{height:100%; width:auto;}
#VideoDetailMoreContainerInput{display:none;}
.VideoDetailMoreContainer{position:relative; padding-bottom:10px;}
.VideoDetailMoreContainerText{height:auto; overflow: auto;}
.VideoDetailMoreBtnContainer{display:none;}
.VideoDetailMoreBtnContainer #VideoDetailMoreBtn{display:inline-block; vertical-align:middle; width:12px; height:20px; border:none; outline:none;}
.VideoDetailMoreBtnContainer #VideoDetailMoreBtn::before{content:""; border-left:10px solid transparent; border-right:10px solid transparent; width:0px; height:0px; display:inline-block; *display:inline; padding:0px; margin:5px 0px 0px 0px; float:left; cursor:pointer;}
.VideoDetailMoreBtnContainer #VideoDetailMoreBtn::after{clear:both;}
.VideoDetailMoreBtnContainer #VideoDetailMoreBtn::before{border-top:15px solid #FFFFFF;}
#VideoDetailMoreContainerInput:checked+.VideoDetailMoreContainer .VideoDetailMoreContainerText{height:auto; overflow: auto;}
#VideoDetailMoreContainerInput:checked+.VideoDetailMoreContainer .VideoDetailMoreBtnContainer #VideoDetailMoreBtn::before{border-top:0px; border-bottom:15px solid #FFFFFF;}
#TVPlayListController{flex:0 0 45px; width:50px; height:26px; border-radius:13px; overflow:hidden; background-image:radial-gradient(circle 297px at 8% 45%, rgba(51,51,51,1) 0%, rgba(51,51,51,1) 100.7%); position:relative; cursor:pointer;}
#TVPlayListTigger{width:22px; height:22px; border-radius:11px; position:absolute; top:2px; left:2px; transform:translate(0px,0px); background:rgb(255,255,255); background:-moz-linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(212,212,212,1) 100%); background:-webkit-linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(212,212,212,1) 100%); background:linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(212,212,212,1) 100%); -webkit-box-shadow:0px 3px 20px 0px rgba(0,0,0,1); box-shadow:0px 3px 20px 0px rgba(0,0,0,1); transition:transform 0.2s ease-in-out;}
#TVPlayListController.Active{background-image:radial-gradient(circle farthest-corner at 10% 20%, rgba(1,150,21,1) 0%, rgba(198,239,146,1) 90%);}
#TVPlayListController.Active #TVPlayListTigger{transform:translate(19px, 0px); transition:transform 0.2s ease-in-out;}
#TVPlaylistWrapper{flex:0 0 100%; overflow:hidden; display:block;}
#TVPlaylistWrapper p{margin:5px 0px 0px 0px;}
#TVPlaylistContainer{display:flex; flex-wrap:nowrap; align-items:stretch; justify-content:flex-start;}
#TVPlaylistContainer > div{flex:0 0; flex-basis:46%; padding:10px; position:relative; display:flex; flex-wrap:wrap; align-items:flex-start; user-select:none; cursor:pointer; background-color:transparent; z-index:2;}
#TVPlaylistContainer > div > div{flex:0 0 100%; width:100%; padding:5px; font-size:14px; color:#FFFFFF; font-weight:500; word-break:normal; pointer-events:none; position:relative;}
#TVPlaylistContainer > div > div:nth-last-of-type(2){height:0px; padding-top:56.25%; position:relative; overflow:hidden;}
#TVPlaylistContainer > div > div img{width:102%; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);}
#TVPlaylistContainer > div::before{background:rgb(87,108,117); background:-moz-linear-gradient(180deg, rgba(87,108,117,0.7) 0%, rgba(0,0,0,0.5) 100%); background:-webkit-linear-gradient(180deg, rgba(60,80,100,1) 0%, rgba(87,108,117,0.7) 20%, rgba(0,0,0,0.5) 100%); background:linear-gradient(180deg, rgba(60,80,100,1) 0%, rgba(87,108,117,0.7) 20%, rgba(0,0,0,0.5) 100%); content:""; opacity:0; position:absolute; top:0px; left:0px; width:100%; height:100%; pointer-events:none; z-index:-1;}
#TVPlaylistContainer > div.Active::before{opacity:1;}
#TVContainWrapper .ShareWrapper{display:flex; flex-wrap:nowrap; align-items:center; justify-content:flex-start; position:relative;margin-top: -38px;}
#TVContainWrapper .ShareWrapper > div, #TVPlaylistContainer .ShareWrapper > a{display:block; flex:0 0 auto; align-self:center;}
#TVContainWrapper .ShareWrapper > div{font-size:10px; color:#FFFFFF; margin-right:5px;}
#TVContainWrapper .ShareWrapper > a{width:40px; overflow:hidden; opacity:0.6; transition:opacity 0.2s ease-in;}
#TVContainWrapper .ShareWrapper > a:hover{opacity:1; transition:opacity 0.2s ease-out;}
#TVContainWrapper .ShareWrapper > a img, #TVPlaylistContainer .ShareWrapper > a svg{width:100%;}
.Cue{display:flex; flex-wrap:wrap; align-items:stretch; justify-content:flex-start; user-select:none;}
.Cue a{flex:0 0 100%; padding:6px 0px; font-size:13px; color:#FFFFFF; display:none;}
.Cue div{flex:0 0 100%; padding:8px 30px 8px 0px; font-size:14px; color:#FFFFFF; margin:2px 0px; line-height:100%; position:relative; display:flex; flex-wrap:nowrap; justify-content:flex-start; align-items:center; cursor:pointer;}
.Cue span{flex:0 0 auto;}
.Cue .CueTriggerIcon{flex:0 0 20px; width:20px; height:20px; border:1px solid rgba(255,255,255,0.8); border-radius:50%; padding:0px; margin-left:10px; line-height:0px; position:relative;}
.Cue .CueTriggerIcon::after{content:"\2039"; width:20px; height:20px; font-size:20px; display:block; padding:0px; line-height:0px; overflow:visible; color:rgba(255,255,255,0.8); transform-origin:center center; transform:rotate(-90deg) translate(5px,9px); transition:transform 0.2s ease-in-out;}
.Cue .CueTrigger.Show .CueTriggerIcon::after{content:"\2039"; transform-origin:center center; transform:rotate(90deg) translate(6px,9px); transition:transform 0.3s ease-out;}
.Live{display:block; width:48px; height:20px; background-color:#FF0000; color:#FFFFFF; position:absolute; top:0%; left:0%; z-index:10002; user-select:none;}
.Live::after{content:"LIVE"; color:#FFFFFF; font-size:12px; font-weight:900; line-height:20px; text-align:center; display:block;}
.Upcoming{display:block; width:80px; height:20px; background-color:#FF0000; color:#FFFFFF; position:absolute; top:0%; left:0%; z-index:10002; user-select:none;}
.Upcoming::after{width:80px; content:"Upcoming"; color:#FFFFFF; font-size:12px; font-weight:900; line-height:20px; text-align:center; display:block;}
.TVUpcomingMarqueeContainer{display:flex; flex-wrap:nowrap; align-items:center; justify-content:flex-start; padding:0%; margin:0%; width:100%; height:40px; -webkit-mask-image:-webkit-linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 20px, rgba(0,0,0,1) calc(100% - 20px), rgba(0,0,0,0) 100%); mask-image:linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 20px, rgba(0,0,0,1) calc(100% - 20px), rgba(0,0,0,0) 100%);}
.TVUpcomingMarqueeContainer > div{flex:0 0 auto; width:auto; padding:10px 20px; font-size:15px; line-height:20px; color:#FFFFFF; font-weight:500; display:inline-block;}
#TVUpcomingFlipContainer{display:none; align-items:center; justify-content:flex-start; padding:0%; margin:0%; width:100%; height:40px; overflow:hidden; -webkit-linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 20px, rgba(0,0,0,1) calc(100% - 20px), rgba(0,0,0,0) 100%); mask-image:linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 20px, rgba(0,0,0,1) calc(100% - 20px), rgba(0,0,0,0) 100%);}
#TVUpcomingFlipContainer > div{width:auto; height:40px; padding:10px 20px; font-size:15px; line-height:20px; color:#FFFFFF; font-weight:500; display:block; text-overflow:ellipsis; white-space:nowrap;}
#TVMainWrapper .GridWrapper{flex-wrap:wrap; max-width:1950px; flex:1 1 auto; padding:0px;}
#TVMainWrapper .GridWrapper .GridContainer, #TVMainWrapper .GridWrapper .Grid-Aside{flex:0 0 100%; padding:0px;}
#TVMainWrapper .GridWrapper .Grid-Aside{border-left:none;}
#TVMainWrapper .GridWrapper .GridContainer ul.CurrentVideo .Thumbnail::before{content:""; width:100%; height:100%; background-color:rgba(0,0,0,0.8); position:absolute; top:0px; left:0px; bottom:0px; right:0px; z-index:1000; -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px); user-select:none; outline:none;}
#TVMainWrapper .GridWrapper .GridContainer ul.CurrentVideo .Thumbnail::after{content:"播放中"; display:inline-block; font-size:18px; font-weight:900; color:#FFFFFF; line-height:100%; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); z-index:1001;}
.Grid-Article-Extra{z-index:100;}
.Grid-Article-Extra .Grid-Col-1{background-color:rgba(0,0,0,0.2);}
.Grid-Article-Extra section{padding:15px 15px 10px 15px; margin-bottom:2px;}
.Grid-Article-Extra h4, .Grid-Article-Extra h4 a, .Grid-Article-Extra div.h4, .Grid-Article-Extra div.h4 a{font-size:16px !important; font-weight:100;}
.Grid-Article-Extra .Table > div:hover, .Grid-Article-Extra .Table > ul:hover{background-color:transparent;}
.Grid-Article-Extra .Table > div, .Grid-Article-Extra .Table > ul{border-color:rgba(255,255,255,0.3);}
.Grid-Article-Extra .ExtraHeader{margin:0px; display:flex; flex-wrap:nowrap; align-items:flex-start; justify-content:flex-start;}
.Grid-Article-Extra .ExtraHeader a{flex:1 1 auto;}
.Grid-Article-Extra .ExtraHeader .swiper-button-next, .Grid-Article-Extra .ExtraHeader .swiper-button-prev{flex:0 0 12px;}
.Grid-Article-Extra #Extra-QuoteSearchWrapper{border:1px solid rgba(255,255,255,0.2); background-color:rgba(0,0,0,0.3); margin-top:10px;}
.Grid-Article-Extra #Extra-QuoteSearchInput{background-color:transparent; color:#FFFFFF; font-family:Montserrat,NotoSansHK,Helvetica,Arial,'微軟正黑體','Microsoft JhengHei',sans-serif; font-size:14px; font-weight:500;}
.Grid-Article-Extra #Extra-QuoteSearchInput::-webkit-input-placeholder{font-size:14px; font-weight:500;}
.Grid-Article-Extra #Extra-QuoteSearchInput:-moz-placeholder{font-size:13px;}
.Grid-Article-Extra #Extra-QuoteSearchInput::-moz-placeholder{font-size:13px;}
.Grid-Article-Extra #Extra-QuoteSearchInput:-ms-input-placeholder{font-size:13px;}
#Extra-QuoteSearchWrapper + .Table.TypeC + div.Time{margin-top:0px;}
.ChartImg.TB-chart{position:relative; overflow:hidden; width:100%; height:175px; margin-top:12px;}
.ChartImg.TB-chart iframe{position:absolute; width:100%; height:175px; top:0px; left:0px;}
.Grid-Article-Extra .GridContainer > div:nth-child(odd){border-right:none; padding-left:0px;}
.Grid-Article-Extra .GridContainer > div:nth-child(even){padding-right:0px;}
.Grid-Article-Extra .GridContainer > div{border-top:none; padding:0px; flex:0 0 calc(100% - 30px); margin:0px 15px 15px 15px;}
.Grid-Article-Extra .GridContainer > div:first-of-type{margin-top:15px;}
.Grid-Article-Extra .Grid.TypeA.swiper-slide ul li{padding-top:0px;}
.Table.TypeC ul > li.StockName{flex:1 1 auto;}
.Stock-NewWindows{flex:0 0 16px !important; height:22px; align-self:flex-start;}
.Stock-NewWindows a{display:block; width:16px; height:16px; background-image:url("../images/stock_new_window.png"); background-repeat:no-repeat; background-size:contain; background-position:center; transform:translateZ(0);}
.AI-Analysis-Button{flex:0 0 24px !important; height:22px; align-self:flex-start;}
.AI-Analysis-Button a{display:block; width:24px; height:16px; background-image:url("/web_common/images/icons/icon-ai.png"); background-repeat:no-repeat; background-size:contain; background-position:center; transform:translateZ(0);}
.AI-Analysis-Button a:hover{opacity:0.8;}
.Grid-Article-Extra .CarouselWrapper{max-width:none;}
.Grid{flex-wrap:wrap;}
.Grid > ul{flex:0 0 100%; margin:0% 0.5%;}
.TVHomeGrid{display:flex; width:100%; flex-wrap:nowrap; align-items:stretch; justify-content:flex-start; padding:0px;}
.TVHomeGrid > ul{margin:0%; flex:0 0 100%; list-style:none; padding:0px; max-width:none;}
.TVHomeGrid > ul{display:none;}
.TVHomeGrid > ul:first-of-type{display:block;}
.TVHomeGrid > ul > li{display:flex; flex-wrap:wrap; padding:15px 0%; width:100%;}
.TVHomeGrid .ContentGroup{display:flex; lex-wrap:nowrap; align-items:center; }
.TVHomeGrid p{font-size:15px; color:#666666; }
.TVHomeGrid p, .TVHomeGrid h4{ margin:0px 0px 3% 0px; line-height:130%; width:100%; display:block; }
.TVHomeGrid .Content, .TVHomeGrid.TypeA .Content{padding:0px 5px;}
.Grid h5, .TVHomeGrid h5{font-size:16px; font-weight:500; margin: 0px 0px 3% 0px;}
.TVHomeGrid.TypeA > ul > li{align-items:stretch;}
.TVHomeGrid.TypeA .Content{flex:1 1; align-self:flex-start; padding:0% 5%; margin:0px; font-size:0px;}
.TVHomeGrid.TypeA .Thumbnail{flex:0 0 100%; order:-1; margin-bottom:15px; }
.TVTabWrapper{width:100%; margin:10px 0px; padding:0px; list-style:none; display:none; flex-wrap:nowrap; align-items:stretch; align-content:stretch; border:1px solid rgba(255,255,255,0.2); border-radius:6px; z-index: 10500; background: rgb(25 32 34);}
.TVTabWrapper > li{font-size:13px; font-weight:500; line-height:120%;; padding:12px 5px; margin:0px; -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none; cursor:pointer; text-align:center; overflow:hidden; border-left:1px solid rgba(255,255,255,0.2); flex-grow:1; flex-shrink:0; flex-basis:0; color:rgba(255,255,255,0.5);}
.TVTabWrapper > li.Selected{background:#bdc3c7; background:-webkit-linear-gradient(to bottom, #2c3e50, #bdc3c7); background:linear-gradient(to bottom, #2c3e50, #bdc3c7); position:relative; border:none; overflow:visible; color:#FFFFFF;}
.TVTabWrapper > li.Selected::after{content:""; border-left:5px solid transparent; border-right:5px solid transparent; width:0px; height:0px; display:inline-block; *display:inline; padding:0px; margin:0px; border-top:5px solid #bdc3c7; z-index:2; position:absolute; bottom:-5px; left:calc(50% - 4px);}
.TVTabWrapper > li:first-of-type{border-top-left-radius:6px; border-bottom-left-radius:6px; border-left:none;}
.TVTabWrapper > li:last-of-type{border-top-right-radius:6px; border-bottom-right-radius:6px;}
/* TV Playlist Menu Panel */
#desktop-menu {
--tw-shadow: 0 20px 25px -5px rgba(0,0,0,.1),0 8px 10px -6px rgba(0,0,0,.1);
--tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color),0 8px 10px -6px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow);
display: none;
position: absolute;
top: 113px;
z-index: 90001;
line-height: 2;
}
#desktop-menu.active {
display:block
}
#desktop-menu,footer {
--tw-bg-opacity: 1;
background-color: rgb(53 53 53/var(--tw-bg-opacity));
width: 100%
}
#desktop-menu .channel-group {
display: flex;
flex-wrap: wrap;
padding-bottom: 16px;
padding-top: 16px
}
#desktop-menu .desktop-menu-main-container {
display: grid;
gap: 1rem;
grid-template-columns: repeat(2,minmax(0,1fr));
max-height: calc(100vh - 113px - 1rem);
overflow-y: scroll;
}
@media (min-width: 768px) {
#desktop-menu .desktop-menu-main-container {
grid-template-columns: repeat(4,minmax(0,1fr));
}
}
@media (min-width: 1024px) {
#TVUpcomingFlipContainer {display:grid;}
.TVUpcomingMarqueeContainer {display:none;}
#desktop-menu {
line-height: 1.5;
}
#desktop-menu .desktop-menu-main-container {
grid-template-columns: repeat(6,minmax(0,1fr));
overflow-y: hidden;
}
}
#desktop-menu .channel-group>div {
margin-right: 2.5rem
}
#desktop-menu .channel-group a {
--tw-text-opacity: 1;
color: rgb(255 255 255/var(--tw-text-opacity));
font-size: 16px
}
#desktop-menu .section-group,footer .section-group {
--tw-bg-opacity: 1;
background-color: rgb(53 53 53/var(--tw-bg-opacity));
padding-bottom: 1rem;
align-items: normal;
}
@media (min-width: 1024px) {
#desktop-menu .section-group,footer .section-group {
padding-bottom:2.5rem
}
}
#desktop-menu .section-group>div,footer .section-group>div {
--tw-bg-opacity: 1;
background-color: rgb(53 53 53/var(--tw-bg-opacity));
margin-top: 1rem;
font-size: 15px;
}
#desktop-menu .section-group .channel-item{padding:0 1.25rem; text-indent:-1.25rem;}
#desktop-menu .section-group a,#desktop-menu .section-group span,footer .section-group a {
--tw-text-opacity: 1;
color: rgb(255 255 255/var(--tw-text-opacity));
font-size: 13px;
padding-left: 1.25rem;
}
#desktop-menu .section-group .channel-name,footer .section-group .channel-name {
position: relative
}
@media (min-width: 1024px) {
#desktop-menu .section-group .channel-name,footer .section-group .channel-name {
margin-bottom:.25rem
}
}
#desktop-menu .section-group .channel-name:before,footer .section-group .channel-name:before {
content: "";
display: block;
height: 60%;
left: 0;
position: absolute;
top: 20%;
width: 3px
}
#desktop-menu .highlight-group,footer .highlight-group {
align-items: center;
display: flex;
flex-direction: row;
margin-bottom: 1rem;
margin-top: 1rem;
font-size: 15px;
}
#desktop-menu .highlight-group>:not([hidden])~:not([hidden]),footer .highlight-group>:not([hidden])~:not([hidden]) {
--tw-space-x-reverse: 0;
margin-left: calc(1rem*(1 - var(--tw-space-x-reverse)));
margin-right: calc(1rem*var(--tw-space-x-reverse))
}
#desktop-menu .highlight-group,footer .highlight-group {
--tw-text-opacity: 1;
color: rgb(255 255 255/var(--tw-text-opacity));
padding-bottom: 5px;
padding-top: 5px
}
#desktop-menu .highlight-group>div,footer .highlight-group>div {
align-self: center
}
#desktop-menu .highlight-group a,footer .highlight-group a {
display: block;
padding-bottom: 5px;
padding-top: 5px
}
.rounded-full {
border-radius: 9999px;
}
#desktop-menu .section-group .channel-name a,#desktop-menu .section-group .channel-name span,footer .section-group .channel-name a {
font-size: 1rem;
line-height: 1.5rem
}
@media (min-width: 1024px) {
#desktop-menu .section-group .channel-name a,#desktop-menu .section-group .channel-name span,footer .section-group .channel-name a {
font-size:16px
}
}
.channel-name {
font-size: 1.2rem
}
.col-span-2 {
grid-column: span 2/span 2;
}
.desktop_menu-grid-cols-2 {
display: grid;
grid-template-columns: repeat(2,minmax(0,1fr));
}
@media (min-width: 1280px) {
.channel-name {
font-size:1.4rem
}
}
.channel-name {
font-weight: 400;
line-height: 100%
}
.section-menu div.channel-name {
padding-left: .5rem
}
.container {
margin-left: auto;
margin-right: auto;
padding-left: min(3.5vw,30px);
padding-right: min(3.5vw,30px);
width: 100%
}
#navPannelSwitch{right:20px !important; display:inline-block; vertical-align:middle; width:12px; height:20px; border:none; outline:none;}
#navPannelSwitch::before{content:""; border-left:5px solid transparent; border-right:5px solid transparent; width:0px; height:0px; display:inline-block; *display:inline; padding:0px; margin:5px 0px 0px 0px; float:left; cursor:pointer;}
#navPannelSwitch::after{clear:both;}
#navPannelSwitch::before{border-top:9px solid #FFFFFF; margin-left:3px;}
#navPannelSwitch.active::before{border-top:0px; border-bottom:9px solid #FFFFFF; margin-left:3px;}
.rounded-full { border-radius: 9999px; }
.px-4 { padding-left: 1rem; padding-right: 1rem; }
.bg-Latest { --tw-bg-opacity: 1; background-image:linear-gradient(109.6deg, rgba(255,194,48,0.8) 11.2%, rgba(255,124,0,0.8) 100.2%); }
.bg-Popular { --tw-bg-opacity: 1; background-image:linear-gradient(109.6deg, rgba(255,0,0,0.8) 11.2%, rgba(255,146,43,0.8) 100.2%); }
.RightPanel{
display: none;
position: absolute;
right: -20px;
top: 10px;
width: 24px;
z-index: 10002;
}
.SharePanelWrapper{
position: relative;
}
#SharePanelInput{
display: none;
}
.SharePanel{
display: none;
}
#SharePanelInput:checked+.SharePanel{
align-items: center;
background-color: rgb(17 17 17/1);
border-radius: 9999px;
border: 2px solid rgba(255, 255, 255, 0.6);
bottom: 3px;
display: flex;
gap: 0.1rem;
justify-content: flex-start;
padding-left: 0.5rem;
position: absolute;
right: 0;
width: auto;
z-index: 11;
}
.SharePanel a, .SharePanel .SharePanelBtnClose{
cursor: pointer;
height: 50px;
width: 50px;
}
.SharePanelBtnClose{
background-color: rgb(53 53 53/1);
border-radius: 9999px;
display: flex;
height: 3rem;
justify-content: center;
width: 3rem;
}
.SharePanelBtnClose:before{
--tw-content: url(/web_common/images/buttons/btn-share-close.svg);
align-self: center;
content: var(--tw-content);
height: 30px;
width: 30px;
}
.SharePanel a img{
width: 50px;
height: 50px;
}
#SharePanelBtn{
align-items: center;
background-color: rgb(255 255 255/0.6);
border-bottom-left-radius: 0.5rem;
border-color: rgb(209 213 219/0.6);
border-top-left-radius: 0.5rem;
border-width: 1px;
cursor: pointer;
display: flex;
justify-content: center;
padding-bottom: 20px;
padding-top: 20px;
width: 24px;
}
#SharePanelBtn:before{
content: "Share";
transform: translate(0,0) rotate(270deg) skewX(0) skewY(0) scaleX(1) scaleY(1);
z-index: 10;
line-height: 21px;
font-size: 14px;
}
@media only screen and (min-width:480px){
#TVPlaylistContainer > div{flex-basis:40%;}
.TVHomeGrid{flex-wrap:nowrap; justify-content:space-between;}
.Grid > ul, .TVHomeGrid > ul{flex-basis:49%;}
.TVHomeGrid > ul:nth-of-type(2){display:block;}
}
@media only screen and (min-width:568px){
.Grid-Article-Extra .GridContainer{flex-wrap:wrap; justify-content:flex-start; align-items:stretch;}
.Grid-Article-Extra .GridContainer > div{flex:0 0 calc(50% - 24px); margin:8px;}
.Grid-Article-Extra .GridContainer > div:nth-of-type(odd){margin-left:16px;}
.Grid-Article-Extra .GridContainer > div:nth-of-type(even){margin-right:16px;}
}
@media only screen and (min-width:760px){
#TVPlaylistContainer > div{flex-basis:30%;}
.Grid > ul, .TVHomeGrid > ul{flex-basis:32.333333%;}
.TVHomeGrid > ul:nth-of-type(3){display:block;}
#TVContainWrapper .ShareWrapper{position:absolute; top:0px; right:0px; }
.SpecialGrid > ul:nth-of-type(5n+1), .SpecialGrid > ul:nth-of-type(5n+2){flex:0 0 49%;}
}
@media only screen and (min-width:1024px){
.ExtraHeader{padding:0px 0px 12px 0px;}
#TVHdrSNS{display:flex;}
#TVMenuSNS, #TVMenuInputBox{display:none;}
#TVGlobalMenu{width:auto;}
#TVPlaylistContainer > div{flex-basis:25%;}
#TVSearchWrapper{display:flex;}
#TVPlaylistContainer > div{flex-basis:23%;}
.Grid > ul, .TVHomeGrid > ul, .TVHomeGrid.Full > ul{flex-basis:24%;}
.TVHomeGrid > ul:nth-of-type(4){display:block;}
.TVHomeGrid.Full > ul:nth-of-type(4){display:block;}
.Grid-Article-Extra .GridContainer{flex-wrap:nowrap;}
.Grid-Article-Extra .GridContainer > div{flex:1 1;}
.Grid-Article-Extra .GridContainer > div:nth-of-type(odd), .Grid-Article-Extra .GridContainer > div:nth-of-type(even){margin:8px;}
.Grid-Article-Extra .GridContainer > div:first-of-type{margin-left:16px;}
.Grid-Article-Extra .GridContainer > div:last-of-type{margin-right:16px;}
.SpecialGrid > ul:nth-of-type(5n+1), .SpecialGrid > ul:nth-of-type(5n+2){flex:0 0 24%;}
.SpecialGrid > ul:nth-of-type(6n+1), .SpecialGrid > ul:nth-of-type(6n+2){flex:0 0 49%;}
}
@media only screen and (min-width:1200px){
.PageHeader{margin:20px auto;}
section{padding:40px 30px 0px 30px; margin:0px auto;}
#TVPlayerSection{padding:30px 15px 0px 15px;}
#TVPlayerSection > .ExtraHeader{padding:20px 0px;}
#TVPlayerWrapper{flex-wrap:nowrap; align-items:stretch;}
#TVPanelWrapper{flex:1 1 auto; order:2; position:-webkit-sticky; position:sticky; top:55px; align-self:flex-start;}
#TVAside{flex:0 0 360px; width:360px; flex-wrap:nowrap; flex-direction:column; order:3;}
#TVAdv{display:block;}
#TVContainWrapper > ul{padding:20px 5px;}
#TVPlayListHeader{flex:0 0 auto;}
#TVPlaylistWrapper{flex:1 1 auto; padding-left:15px; margin-bottom:30px; position:relative;}
#TVPlaylistWrapper::before, #TVPlaylistWrapper::after{content:""; width:100%; height:15px; position:absolute; left:0px; z-index:100;}
#TVPlaylistWrapper::before{top:0px; background:rgb(0,0,0); background:-moz-linear-gradient(180deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%); background:-webkit-linear-gradient(180deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%); background:linear-gradient(180deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%);}
#TVPlaylistWrapper::after{bottom:0px; background:rgb(0,0,0); background:-moz-linear-gradient(0deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%); background:-webkit-linear-gradient(0deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%); background:linear-gradient(0deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%);}
#TVPlaylistContainer{flex-wrap:wrap;}
#TVPlaylistContainer > div{flex:0 0; flex-basis:100%; flex-wrap:nowrap; align-items:center;}
#TVPlaylistContainer > div > div{flex:1 1 auto; width:auto;}
#TVPlaylistContainer > div > div:first-of-type{flex:0 0 26px; font-size:12px; line-height:normal; text-align:center;}
#TVPlaylistContainer > div > div:nth-of-type(2){flex:0 0 160px; width:160px; height:90px; padding-top:0px;}
#TVPlaylistContainer > div > div:last-of-type{padding-left:15px;}
#TVPlaylistContainer > div::before{background:-moz-linear-gradient(90deg, rgba(60,130,150,0.7) 40%, rgba(0,0,0,0.5) 100%); background:-webkit-linear-gradient(90deg, rgba(60,130,150,0.7) 40%, rgba(0,0,0,0.5) 100%); background:linear-gradient(90deg, rgba(60,130,150,0.7) 40%, rgba(0,0,0,0.5) 100%);}
#TVMainWrapper .GridWrapper{flex-wrap:nowrap; padding:0px;}
#TVMainWrapper .GridWrapper .GridContainer{flex:1 1 auto;}
#TVMainWrapper .GridWrapper .Grid-Aside{flex:0 0 360px; width:360px; padding:0px 0px 0px 15px;}
.Grid > ul, .TVHomeGrid.Full > ul{flex-basis:19%;}
.TVHomeGrid.Full > ul:nth-of-type(4), .TVHomeGrid.Full > ul:nth-of-type(5){display:block;}
.Grid-Article-Extra{flex:0 0 270px; width:270px; flex-wrap:nowrap; flex-direction:column; margin-right:15px; padding-bottom:20px; position:-webkit-sticky; position:sticky; top:55px; align-self:flex-start; order:1;}
.Grid-Article-Extra .GridContainer{flex-wrap:wrap;}
.Grid-Article-Extra .GridContainer > div{flex: 0 0 100%; margin:0px 0px 5px 0px !important;}
.SpecialGrid > ul{flex:0 0 24%;}
.SpecialGrid > ul:nth-of-type(6n+1), .SpecialGrid > ul:nth-of-type(6n+2){flex:0 0 49%;}
}
@media only screen and (min-width:1600px){
#FooterSitemap > div > div{flex:0 0 10%;}
.SpecialGrid > ul, .SpecialGrid > ul:nth-of-type(5n+1), .SpecialGrid > ul:nth-of-type(5n+2), .SpecialGrid > ul:nth-of-type(6n+1), .SpecialGrid > ul:nth-of-type(6n+2){flex:0 0 19%;}
.SpecialGrid > ul:nth-of-type(8n+1), .SpecialGrid > ul:nth-of-type(8n+2), .SpecialGrid > ul:nth-of-type(8n+3){flex:0 0 32.333%;}
}
/* Disable Hover Effect on Touch Device */
@media only screen and (-webkit-min-device-pixel-ratio:2) and (max-device-width:1024px) and (orientation: portrait),
only screen and (min-device-pixel-ratio: 2) and (max-device-width:1024px) and (orientation: portrait),
only screen and (min-resolution:192dpi) and (max-device-width:1024px) and (orientation: portrait),
only screen and (min-resolution:2dppx) and (max-device-width:1024px) and (orientation: portrait),
only screen and (-webkit-min-device-pixel-ratio:2) and (max-device-width:1366px) and (orientation: landscape),
only screen and (min-device-pixel-ratio: 2) and (max-device-width:1366px) and (orientation: landscape),
only screen and (min-resolution:192dpi) and (max-device-width:1366px) and (orientation: landscape),
only screen and (min-resolution:2dppx) and (max-device-width:1366px) and (orientation: landscape){
a:hover, #SectionNav a.Selected:hover{color:#FFFFFF; background-image:none;}
#TVGlobalMenu > div > a, #TVGlobalMenu > div > a:hover{background:none; transform:translateX(-3%); transition:none;}
#TVGlobalMenu{height:calc(100vh - 55px);}
#TVMenuSNS img, #TVMenuSNS img:hover{opacity:1; transition:none;}
#TVGlobalMenu{width:100vw; max-width:320px;}
}
@media only screen and (-webkit-min-device-pixel-ratio:2) and (max-device-width:420px) and (orientation: portrait),
only screen and (min-device-pixel-ratio: 2) and (max-device-width:420px) and (orientation: portrait),
only screen and (min-resolution:192dpi) and (max-device-width:420px) and (orientation: portrait),
only screen and (min-resolution:2dppx) and (max-device-width:420px) and (orientation: portrait),
only screen and (-webkit-min-device-pixel-ratio:2) and (max-device-width:820px) and (orientation: landscape),
only screen and (min-device-pixel-ratio: 2) and (max-device-width:820px) and (orientation: landscape),
only screen and (min-resolution:192dpi) and (max-device-width:820px) and (orientation: landscape),
only screen and (min-resolution:2dppx) and (max-device-width:820px) and (orientation: landscape){
#TVPlayerSection{padding:15px 0px;}
.SectionIntro{height:36px; padding-right:90px; overflow:hidden;}
#SectionTrigger{display:inline-block;}
.SectionIntro.Show{height:auto; padding-right:0px; padding-bottom:22px;}
.SectionIntro.Show #SectionTrigger{position:relative; width:100%; display:block;}
.SectionIntro.Show #SectionTrigger::before{display:none;}
.SectionIntro.Show #SectionTrigger::after{content:"關閉";}
#TVContainWrapper h2{margin:10px 10px 10px 0px;}
#TVContainWrapper p{margin: 10px 0px;}
#TVContainWrapper .Tag{margin: 10px 0px;}
.ShareWrapper{display:none !important;}
.TVTabWrapper{display:flex !important;}
.RightPanel{display:block !important;}
#TVContainWrapper .Content{margin-top:20px;}
.VideoDetailMoreContainerText{height:50px;overflow:hidden;}
.VideoDetailMoreBtnContainer{display:block; position:absolute; bottom:0; text-align:center; background-image:linear-gradient(rgb(0 0 0 / 0%), rgb(0 0 0)); width:100%;}
.Breadcrumb.SubCategory .BreadcrumbUpcomingContainer .BreadcrumbUpcoming{padding:5px 10px;}
#FooterAwards .container { display: block !important;}
/*#TVAside{display:none;}
.Grid-Article-Extra{display:none;}
.Grid-Article-Extra .GridContainer > div:first-of-type, .Grid-Article-Extra #Extra-QuoteSearchWrapper, .Grid-Article-Extra section{margin-top:0px; padding-top:0px;}*/
}
/** additional css by programmer*/
/** Autocomplate **/
#autoCompDIV{
background-color:rgba(9,11,12,0.9);
border:0;
z-index:10001;
}
.autoCompTab {border: 1px solid rgba(255,255,255,0.2);}
.ac_list li{color:#FFFFFF;}
.autoCompTab > div{font-size:13px; line-height:100%; padding:6px 2px; margin:0px; color:#FFFFFF; -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none; cursor:pointer; text-align:center; overflow:hidden; border-left:1px solid rgba(255,255,255,0.2); flex-grow:1;}
.autoCompTab > div.TabActives{
background: rgb(255,255,255);
background: -moz-linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(212,212,212,1) 100%);
background: -webkit-linear-gradient(
180deg
, rgba(255,255,255,1) 0%, rgba(212,212,212,1) 100%);
background: linear-gradient(
180deg
, rgba(255,255,255,1) 0%, rgba(212,212,212,1) 100%);
color: #333333;
position:relative;
border:none;
overflow:visible;
}
.autoCompTab > div.TabActives::after{content:""; border-left:5px solid transparent; border-right:5px solid transparent; width:0px; height:0px; display:inline-block; *display:inline; padding:0px; margin:0px; border-top:5px solid #333333; position:absolute; bottom:-5px; left:calc(50% - 4px);}
.autoCompTab > div:first-of-type{border-top-left-radius:6px; border-bottom-left-radius:6px; border-left:none;}
.autoCompTab > div:last-of-type{border-top-right-radius:6px; border-bottom-right-radius:6px;}
.ac_list{padding:0px; margin:0px; background-color:rgba(9,11,12,0.9);}
.ac_list li{border-top:1px solid #E2E3E4; padding:5px 0px; background-color:rgba(9,11,12,0.9);}
.ac_list li:first-of-type{border-top:none;}
.ac_loading{background-image:url(common/images/autocomplete_spinner.gif); background-position:right center; background-repeat:no-repeat; background-size:auto;}
.ac_list li.ac_even, .ac_list li.ac_odd{cursor:pointer;transition:ease-out 0.4s;}
.ac_list li.ac_even:hover, .ac_list li.ac_odd:hover{color: #333333; background-color:#E2E3E4; transition:ease-out 0.2s;}
.ac_list li.ac_even, .ac_list li.ac_odd { background-color:rgba(9,11,12,0.9);}
#Ads_Top_Banner{margin:10px auto; text-align:center;}
#TVMainWrapper{width:100%; margin:0px auto; padding:0px; display:flex; flex-wrap:wrap; align-items:stretch; align-content:flex-start;}
.SkinnerRow{width:100%; display:block; min-height:100px;}
.SkinnerColumn.SkinnerLeft{text-align:right;}
#TVMainWrapper.SkinnerOn .SkinnerColumn{display:none;}
@media only screen and (min-width:1280px) {
#TVMainWrapper.SkinnerOn .SkinnerColumn{display:block; flex:0 0 130px; min-height:600px;}
}
@media only screen and (min-width:1540px) {
#TVMainWrapper.SkinnerOn .SkinnerColumn{flex:1 1 130px;}
}
.panel-switch{display:inline-block; vertical-align:middle; width:12px; height:20px; border:none; outline:none;}
.panel-switch::before{content:""; border-left:5px solid transparent; border-right:5px solid transparent; width:0px; height:0px; display:inline-block; *display:inline; padding:0px; margin:5px 0px 0px 0px; float:left; cursor:pointer;}
.panel-switch::after{clear:both;}
.panel-switch::before{border-top:9px solid #FFFFFF; margin-left:3px;}
.panel-switch.active::before{border-top:0px; border-bottom:9px solid #FFFFFF; margin-left:3px;}
.rounded-full { border-radius: 9999px; }
.px-4 { padding-left: 1rem; padding-right: 1rem; }
.bg-Latest { --tw-bg-opacity: 1; background-image:linear-gradient(109.6deg, rgba(255,194,48,0.8) 11.2%, rgba(255,124,0,0.8) 100.2%); }
.bg-Popular { --tw-bg-opacity: 1; background-image:linear-gradient(109.6deg, rgba(255,0,0,0.8) 11.2%, rgba(255,146,43,0.8) 100.2%); }