﻿/*
V1.0, Alvin, PDEV-1219
V1.1, Alvin, PDEV-1219 Enhancement
V1.2, Alvin, PDEV-1219 Comment-1
V1.3, Alvin, PDEV-1219 Comment-2
V1.4, Sam Wong, PDEV-1262
V1.5, Alvin, Fix Search box position < 800px
V1.6, Sam Wong, PDEV-1266
V1.7, Sam Wong, MS Font Fix
V1.8, Sam Hui, PDEV-1287
V1.9, Sam Hui, AATV Layout Issue
*/

@font-face {
    font-family: '微軟正黑體修正';
    unicode-range: U+7db0, U+78A7, U+7B75; /* ASCII (碧筵綰) */
    font-style: normal;
    font-weight: normal;
    src: local(微軟正黑體);
}
@font-face {
    font-family: '微軟正黑體修正2';
    unicode-range: U+7db0, U+78A7, U+7B75; /* ASCII (碧筵綰) */
    font-style: normal;
    font-weight: bold;
    src: local(Yu Gothic), local(MS Gothic);
}
html * {max-height:1000000px;}
body { font-family: 微軟正黑體修正,微軟正黑體修正2,微軟正黑體,'Microsoft JhengHei',Arial; font-size:12px; background:#0E0E0E; margin:0px; padding:0px; color:#fff; }

.pos { color:#34b15a !important; }
.neg { color:#d25e4f !important; }
.unc { color:#8d8d8d !important; }
.font-num { font-family:Arial !important; }
.clear { clear:both; }
.pointer { cursor:pointer; }
.inline_block{ display: inline-block; }
::placeholder { 
    color: #bdbdbd;
    opacity: 1; /* Firefox */
}

:-ms-input-placeholder { /* Internet Explorer 10-11 */
    color: #bdbdbd;
}

::-ms-input-placeholder { /* Microsoft Edge */
    color: #bdbdbd;
}
::-ms-clear {
    display: none;
}

@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }

.fcolor1 { color:#bdbdbd !important; }
.fcolor2 { color:#fff !important; }
input[type="button"], input[type="submit"], input[type="reset"] { background:#585b5d; color:#fff; height:30px; line-height:30px; border-radius:3px; outline:0; border:none; width:100%; }
input[type="button"]:hover, input[type="submit"]:hover, input[type="reset"]:hover { background:#898B8C; }
input[type="button"].blue, input[type="submit"].blue { background:#00a9c5; }
input[type="button"].blue:hover, input[type="submit"].blue:hover { background:#4BC2D5; }
table tbody::-webkit-scrollbar, div::-webkit-scrollbar, iframe::-webkit-scrollbar, ul::-webkit-scrollbar { height: 8px; width: 8px; background: #fff; }
table tbody::-webkit-scrollbar-thumb, div::-webkit-scrollbar-thumb, iframe::-webkit-scrollbar-thumb, ul::-webkit-scrollbar-thumb  { background: #ccc; -webkit-border-radius: 1ex; -webkit-box-shadow: 0px 1px 2px rgba(200, 200, 200, 0.75); }
table tbody::-webkit-scrollbar-corner, div::-webkit-scrollbar-corner, iframe::-webkit-scrollbar-corner, ul::-webkit-scrollbar-corner  { background: #fff; }
.icon-video-end { 
    margin:0 auto;
  width: 80px;
  height: 50px;
  text-align: center; 
  border-radius:5px;
}
.icon-video-end:hover {
    background:#00A9C5;
}
.icon-video-end:before {
    font-family: VideoJS;
  font-weight: normal;
  font-style: normal;
  content: "\f116";
  font-size:45px;
  line-height:53px;
}
.vjs-like-button { background-repeat:no-repeat !important; background-position:-5px -150px !important; width:36px; height:36px; cursor:pointer; }
.datediff { color:#808080; font-size:14px; height:15px; line-height:15px; padding-top:8px; }

.icon-search { background-image:url("../Images/menuBar.png"); background-repeat:no-repeat; background-position:-258px 0px; height:50px; width:50px; display:inline-block; cursor:pointer; }
.icon-search2 { background-image:url("../Images/menuBar.png"); background-repeat:no-repeat; background-position:-267px -9px; height:32px; width:32px; display:inline-block; }
.icon-alert { background-image:url("../Images/menuBar.png"); background-repeat:no-repeat; background-position:-305px 0px; height:50px; width:50px; display:inline-block; position:relative; }
.icon-alert::after { content:attr(data-alertCount); position:absolute; top:5px; background:#00a9c5; height:16px; width:16px; border-radius:8px; line-height:16px; }
.icon-alert[data-alertCount="0"]::after { display:none; }
.icon-ppl { background-image:url("../Images/menuBar.png"); background-repeat:no-repeat; background-position:-209px 0px; height:50px; width:50px; display:inline-block; }
.icon-unmute { background: url('../Images/icon_unmute.png') no-repeat; width: 80px; height: 80px; background-size: 80px 80px; }
.icon-live { background-repeat:no-repeat !important; background-position:-262px -175px !important; width:72px; height:26px; }
.icon-leftarrow { background-repeat:no-repeat !important; background-position:-478px -120px !important; width:26px; height:40px; display:inline-block; }
.icon-rightarrow { background-repeat:no-repeat !important; background-position:-518px -120px !important; width:26px; height:40px; display:inline-block; }
.icon-reload { background-repeat:no-repeat !important; background-position:-544px -127px !important; width:30px; height:30px; display:inline-block; }
.icon-reload:hover { background-position:-544px -99px !important; }

.icon-downarrow { background-repeat:no-repeat !important; background-position:-344px -174px !important; width:58px; height:28px; display:inline-block; }
.icon-share { background-repeat:no-repeat !important; background-position:-472px -79px !important; width:24px; height:17px; display:inline-block; }
.icon-uparrow2 { background-repeat:no-repeat !important; background-position:-461px -176px !important; width:52px; height:24px; display:inline-block; }
.icon-downarrow2 { background-repeat:no-repeat !important; background-position:-406px -176px !important; width:52px; height:24px; display:inline-block; }
.icon-play { background-repeat:no-repeat !important; background-position:-424px -215px !important; width:63px; height:63px; display:none; }
.icon-play-display { position:absolute; top:calc((100% - 63px)/2); left:calc((100% - 63px)/2); }
.icon-programme { background-repeat:no-repeat !important; background-position:-456px -72px; width:20px; height:16px; }

/*.icon_map.icon-nt2 { background-repeat:no-repeat !important; background-position:-84px -263px !important; width:83px; height:40px; display:inline-block; }*/
.icon_map.icon-nt { background-image:none !important; background-repeat:no-repeat !important; background-position:center; background-size:auto 50px; height:50px; display:inline-block; }
.icon_map_800.icon-nt { background-image:none !important; background-repeat:no-repeat !important; background-position:center; background-size:auto 50px; height:50px; display:inline-block; }
/*.icon_map.icon-nt4 { background-repeat:no-repeat !important; background-position:-206px -306px !important; width:71px; height:40px; display:inline-block; }
.icon_map.icon-nt5 { background-repeat:no-repeat !important; background-position:-13px -305px !important; width:65px; height:40px; display:inline-block; }
.icon_map.icon-nt6 { background-repeat:no-repeat !important; background-position:-14px -261px !important; width:45px; height:40px; display:inline-block; }
.icon_map.icon-nt7 { background-repeat:no-repeat !important; background-position:-114px -305px !important; width:65px; height:40px; display:inline-block; }
.icon_map.icon-nt8 { background-repeat:no-repeat !important; background-position:-282px -264px !important; width:68px; height:40px; display:inline-block; }
.icon_map.icon-nt9 { background-repeat:no-repeat !important; background-position:-187px -263px !important; width:71px; height:40px; display:inline-block; }
.icon_map.icon-nt10 { background-repeat:no-repeat !important; background-position:-296px -310px !important; width:76px; height:40px; display:inline-block; }
.icon_map.icon-nt11 { background-repeat:no-repeat !important; background-position:-364px -263px !important; width:44px; height:40px; display:inline-block; }
.icon_map.icon-nt12 {  }
.icon_map.icon-nt13 { background-repeat:no-repeat !important; background-position:-477px -311px !important; width:70px; height:40px; display:inline-block; }
.icon_map.icon-nt14 { background-repeat:no-repeat !important; background-position:-388px -311px !important; width:79px; height:40px; display:inline-block; }*/

/*.icon_map_1600.icon-nt2 { background-position:-84px -346px !important; width:89px; height:50px; display:inline-block; }*/
.icon_map_1600.icon-nt { background-image:none !important; background-position:center; background-size:auto 62px; height:62px; display:inline-block; }
/*.icon_map_1600.icon-nt4 { background-position:-221px -407px !important; width:90px; height:50px; display:inline-block; }
.icon_map_1600.icon-nt5 { background-position:-12px -408px !important; width:81px; height:50px; display:inline-block; }
.icon_map_1600.icon-nt6 { background-position:-12px -347px !important; width:51px; height:50px; display:inline-block; }
.icon_map_1600.icon-nt7 { background-position:-115px -407px !important; width:80px; height:50px; display:inline-block; }
.icon_map_1600.icon-nt8 { background-position:-310px -343px !important; width:83px; height:50px; display:inline-block; }
.icon_map_1600.icon-nt9 { background-position:-195px -346px !important; width:85px; height:50px; display:inline-block; }
.icon_map_1600.icon-nt10 { background-position:-335px -408px !important; width:84px; height:50px; display:inline-block; }
.icon_map_1600.icon-nt11 { background-position:-424px -345px !important; width:54px; height:50px; display:inline-block; }
.icon_map_1600.icon-nt12 { }
.icon_map_1600.icon-nt13 { background-position:-496px -342px !important; width:83px; height:50px; display:inline-block; }
.icon_map_1600.icon-nt14 { background-position:-436px -413px !important; width:99px; height:50px; display:inline-block; }*/

@media screen and (min-width: 1100px) {
    .icon-unmute { background: url('../Images/icon_unmute.png') no-repeat; width: 55px; height: 55px; background-size: 55px 55px; }
}

@media screen and (min-width: 1600px) {
    .icon-leftarrow { background-position:-552px -90px !important; }
    .icon-rightarrow { background-position:-592px -90px !important; }
    .icon-downarrow { background-position:-506px -155px !important; }
    
    /*.icon_map.icon-nt2 { background-position:-84px -346px !important; width:89px; height:50px; }*/
    .icon_map.icon-nt { background-image:none !important; background-position:center; background-size:auto 62px; height:62px; display:inline-block; }
    
    /*.icon_map.icon-nt4 { background-position:-221px -407px !important; width:90px; height:50px; }
    .icon_map.icon-nt5 { background-position:-12px -408px !important; width:81px; height:50px; }
    .icon_map.icon-nt6 { background-position:-12px -347px !important; width:51px; height:50px; }
    .icon_map.icon-nt7 { background-position:-115px -407px !important; width:80px; height:50px; }
    .icon_map.icon-nt8 { background-position:-310px -343px !important; width:83px; height:50px; }
    .icon_map.icon-nt9 { background-position:-195px -346px !important; width:85px; height:50px; }
    .icon_map.icon-nt10 { background-position:-335px -408px !important; width:84px; height:50px; }
    .icon_map.icon-nt11 { background-position:-424px -345px !important; width:54px; height:50px; }
    .icon_map.icon-nt12 {  }
    .icon_map.icon-nt13 { background-position:-496px -342px !important; width:83px; height:50px; }
    .icon_map.icon-nt14 { background-position:-436px -413px !important; width:99px; height:50px; }*/
}
body > div.mask { position:absolute; top:0px; left:0px; width:100%; height:100vh; background:#000; opacity:0.3; z-index:10; }

#header { height:50px; background:#0e0e0e; color:#fff; text-align:center; line-height:50px; clear:both; min-width:800px; }
#header div.leftPanel { display:block; float:left; padding-left:10px; white-space:nowrap; height:inherit; }
#header div.leftPanel div.logo { position:relative; top:0px; background-image:url("../Images/menuBar.png?v=1.1"); background-position:-5px 0px; background-repeat:no-repeat; width:212px; height:50px; display:inline-block; }
#header div.leftPanel ul { position:absolute; top:0px; margin:0px; padding:0px; display:inline-block; left:238px; }
#header div.leftPanel ul li { list-style:none; display:inline-block; padding:0px 12px 0px 13px; font-size:15px; }
#header div.leftPanel ul li > a { color:#bdbdbd; text-decoration:none; padding:6px; }
#header div.leftPanel ul li > a:hover { color:#c3c3ce; }
#header div.leftPanel ul li.sel > a { color:#fff; border-bottom:solid 2px #00a9c5; padding:6px; }
#header div.rightPanel { display:block; float:right; padding-right:10px; height:50px; line-height:50px; }
#header div.rightPanel .lang-link { display:inline-block; width:50px; text-align:center; height:50px; line-height:50px; font-size:17px; color:#fff; text-decoration:none; }
#header div.rightPanel .lang-link > a { color:#fff; text-decoration:none; }


#footer { height:35px; background:#0e0e0e; text-align:center; line-height:35px; min-width:800px; }
#footer div.leftPanel { display:block; float:left; padding-left:10px; }
#footer div.leftPanel { display:block; float:left; padding-left:10px; }
#footer div.leftPanel ul { margin:0px; padding:0px; }
#footer div.leftPanel ul li { list-style:none; display:inline-block; padding:0px 20px; font-size:12px; }
#footer div.leftPanel ul li > a { color:#bdbdbd; text-decoration:none; }
#footer div.leftPanel ul li > a:hover { color:#c3c3ce; }
#footer div.rightPanel { display:block; float:right; padding-right:50px; color:#bdbdbd; }

#content { position:relative; background-color:#222223; min-width:800px; }

#searchPanel { position:absolute; width:150px; top:0px; left:calc(800px - 150px - 50px); z-index:999; display:none; }
#searchPanel font.key { color: #00a9c5; }
#searchPanel > .search-bar { position:relative; width:calc(100% - 0px); height:50px; line-height:50px; background:#3B3B3B; }
#searchPanel > .search-bar > .icon-search { position:absolute; right:0px; top:0px; }
#searchPanel > .search-bar > input { position:absolute; top:5px; height:42px; border:none; width:80%; line-height:42px; padding:0px; margin:0px; left:5px; font-size:15px; color:#fff; background:transparent; }
#searchPanel > .search-bar > input:focus { outline:0; }
#searchPanel > .search-result { width:100%; background:#d1d1d1; border-bottom-left-radius:5px; border-bottom-right-radius:5px; }
#searchPanel > .search-result > div.title { color:#808080; height:25px; line-height:25px; padding-left:10px; }
#searchPanel > .search-result > ul { display:flex; flex-direction: column; flex-wrap: wrap; max-height:125px; margin:0px; padding:0px; }
#searchPanel > .search-result > ul > li { list-style:none; height:25px; line-height:25px; color:#222223; /*width:calc(33% - 10px);*/ padding-left:10px; font-weight:bold; cursor:pointer; }
#searchPanel > .search-result > ul > li:hover { background:#B8B8B8; }
#searchPanel > .search-result > ul > li.sel { background:#B8B8B8; }
@media screen and (min-width: 800px) {
    #searchPanel { left:auto; right:60px; }
}
@media screen and (min-width: 1100px) {
    #searchPanel { width:250px; }
}

#sharePanel { position:absolute; width:461px; height:300px; top:calc((100vh - 300px) / 2); right:calc((100vw - 461px) / 2); background:#343434; z-index:999; border-radius:5px; display:none; }
#sharePanel > .title { color:#fff; font-size:20px; position:absolute; top:20px; width:100%; text-align:center; }
#sharePanel > table { width:318px; border-collapse:collapse; position:absolute; top:60px; left:71px; }
#sharePanel > table td { width:106px; text-align:center; font-size:15px; }
#sharePanel > table tr:nth-child(2n+1) td { padding:15px 30px;  }
#sharePanel > table.tbCopyComplete { display:none; width:65px; left:168px; top:91px; }
#sharePanel > table.tbCopyComplete td { font-size:18px; }
#sharePanel > div.btnClose { position:absolute; top:23px; right:23px; }
.icon-fb { background-repeat:no-repeat !important; background-position:-3px -2px !important; width:46px; height:46px; cursor:pointer; }
.icon-twitter { background-repeat:no-repeat !important; background-position:-64px -2px !important; width:46px; height:46px; cursor:pointer; }
.icon-weibo { background-repeat:no-repeat !important; background-position:-125px -2px !important; width:46px; height:46px; cursor:pointer; }
.icon-weChat { background-repeat:no-repeat !important; background-position:-186px -2px !important; width:46px; height:46px; cursor:pointer; }
.icon-email { background-repeat:no-repeat !important; background-position:-247px -2px !important; width:46px; height:46px; cursor:pointer; }
.icon-link { background-repeat:no-repeat !important; background-position:-308px -2px !important; width:46px; height:46px; cursor:pointer; }
.icon-close { background-repeat:no-repeat !important; background-position:-268px -84px !important; width:20px; height:20px; cursor:pointer; }
.icon-copyComplete { background-repeat:no-repeat !important; background-position:-377px -45px !important; width:70px; height:70px; }

@media screen and (min-width: 1600px) {
    #sharePanel > table { width:333px; top:60px; left:64px; }
    #sharePanel > table td { width:111px; }
    #sharePanel > table.tbCopyComplete { width:72px; left:164px; top:88px; }
    .icon-fb { background-repeat:no-repeat !important; background-position:-1px -0px !important; width:51px; height:51px; cursor:pointer; }
    .icon-twitter { background-repeat:no-repeat !important; background-position:-82px -0px !important; width:51px; height:51px; cursor:pointer; }
    .icon-weibo { background-repeat:no-repeat !important; background-position:-162px -0px !important; width:51px; height:51px; cursor:pointer; }
    .icon-weChat { background-repeat:no-repeat !important; background-position:-246px -0px !important; width:51px; height:51px; cursor:pointer; }
    .icon-email { background-repeat:no-repeat !important; background-position:-327px -0px !important; width:51px; height:51px; cursor:pointer; }
    .icon-link { background-repeat:no-repeat !important; background-position:-407px -0px !important; width:51px; height:51px; cursor:pointer; }
    .icon-close { background-repeat:no-repeat !important; background-position:-292px -94px !important; width:20px; height:20px; cursor:pointer; }
    .icon-copyComplete { background-repeat:no-repeat !important; background-position:-423px -196px !important; width:70px; height:70px; }

    #header div.leftPanel ul li { font-size:17px; }
}

#topbarMore { position:absolute; top:5px; right:5px; width:120px; height:40px; font-size:17px; line-height:40px; color:#c3c3cd; text-align:center; cursor:pointer; }
#topbarMore:hover {  width:118px; height:38px; line-height:38px; border:1px solid #494949; background-color:#434344; border-radius:4px; }
#topbarMore > div { margin:0px 0px -1px 10px; }
#proCategory { position:absolute; top:0px; left:0px; width:100%; height:100%; margin-top:0px; z-index:100; display:none; }
#proCategory .mask { background:#343434; opacity:0.98; width:100%; height:100%; }
#proCategory .header { position:absolute; top:0px; left:0px; width:100%; height:50px; line-height:50px; font-size:20px; color:#2eb7cf; border-bottom:1px solid #222223; }
#proCategory .header .title { padding-left:10px; }
#proCategory .header #proCategoryClose { position:absolute; top:15px; right:20px; }
#proCategory .catContainer { position:absolute; top:51px; left:0px; width:calc(100% + 20px); height:calc(100% - 51px); overflow-y:scroll; }
#proCategory .groupHeader { position:relative; clear:both; margin-bottom:6px; padding:20px 12px 20px 30px; line-height:20px; font-size:20px; color:#a3a3a3; background-color:#2a2a2a; }
#proCategory .groupContainer { clear:both; background-color: #2a2a2a; overflow:hidden; }
#proCategory .pg-item { width:140px; height:62px; display:inline-block; text-align:center; float:left; border-radius:10px; margin:8px 16px 0px 0px; padding:9px 0px; cursor:pointer; }
#proCategory .pg-item:hover { background:#484848; }
#proCategory > div.scroll-bar-container { position:absolute; top:51px; left:calc(100% - 16px); width:8px; height:calc(100% - 51px); display:block; }
#proCategory > div.scroll-bar-container div.scroll-bar { position:absolute; background:#505050; height:100px; width:100%; opacity:0; }
.content-icon-new { position:absolute; top:8px; right:8px; width:42px; height:22px; font-size:12px; line-height:22px; color:#FFFFFF; background-color:#4cb992; text-align:center; opacity:0.85; border-radius:3px; z-index:10; }

@media screen and (min-width: 900px) {
    #proCategory .pg-item { width:120px; height:62px; padding:19px 0px; }
}

@media screen and (min-width: 1100px) {
    #proCategory .groupHeader { padding:20px 12px 20px 10px; }
    #proCategory .pg-item { width:120px; height:62px; margin:8px 0px 0px 0px; padding:4px 0px; }
}

@media screen and (min-width: 1600px) {
    #proCategory .pg-item { width:140px; height:62px; margin:8px 10px 0px 10px; padding:9px 0px; }
}

#checker_w1100 { display:none; }
#checker_w1600 { display:none; }
@media screen and (min-width: 1100px) {
    #checker_w1100 { display:block; }
}
@media screen and (min-width: 1600px) {
    #checker_w1600 { display:block; }
}



