/*
V1.0, Janice, Mobile V6.17.0
V1.1, Sam Wong, Task - cwind
V1.2, Sam Wong, Mobile V6.27.0
V1.3, Sam hui, Enlarge Moneyflow Input box
V1.4, Sam Wong, Task - Indices Web Page for B2B Mobile App
V1.5, Sam Wong, Mobile V6.30.0
V1.6, Sam Wong, Enlarge font size for Indices Web Page
V1.7, Sam Wong, Mobile V6.30.0 (2)
V1.8, Sam Wong, Mobile V6.33.0
V1.9, Sam Wong, PDEV-1362
V2.0, Sam Wong, iPhone scroll fix for iOS 13
V2.1, Sam Wong, Mobile V6.37.0
V2.2, Alvin, PDEV-1461
V2.3, Sam Wong, MW v6.42.0
V2.4, Sam Wong, MW v6.43.0
V2.5, Sam Wong, MW v6.43.0, Enhancement
V2.6, Jacky, MW v6.46.0, US News Section 
*/        
body{margin:0; font-family:  微軟正黑體, 'Microsoft JhengHei',Arial;}
.left{float:left}
.right{float:right}
.bold{font-weight:bold}
.clear{clear:both;}
a{text-decoration:none;}
.msg{text-align:center; padding:10px;}
.none{display:none !important}

.infoIcon{ width:50px; height:50px;}
.infoIcon.pos1{position:absolute; z-index:10; bottom: 30px; right: 0px;}
.infoIcon.pos2{position:relative}
.infoIcon.pos3 {position:absolute; z-index:10; right: 20px;}
.infoIcon.iconLeft{left: 0px;}
.titlelogo{display:inline-block;position: relative; margin-bottom:-5px; margin-left:8px}
.mfLogo{height:33px; width:37px;}
.detailLink {display:inline-block; line-height:58px; margin-right:5px;}

.dlLogo{display:inline-block;position: relative;height:24px; width:26px; margin-bottom:-2px; background-size:cover}
.timeIcon{ height:20px; width:20px; background-size:cover; display:inline-block; margin-right:5px; margin-bottom:-2px;}
.chartLegend { margin:0 auto;position:relative; }
.lineLegendTable{width:85%; margin:auto; height:70px;font-size:24px; font-weight:bold; }
.lineChartLegend {width: 20px; height: 20px; display:inline-block ; background-size: cover;  }
.lineChartLegendText { display:inline-block ; margin-left:3px;padding-top: 1px; font-size:26px }

.text-c { text-align: center; }
.text-r { text-align: right; }

#MoneyFlow .titleBar { height: 52px; }
#MoneyFlow .stockInput {width:140px;height:44px; margin:2px 8px;border: 2px solid #C5C5C5; border-radius: 5px; font-size:32px; font-weight:bold; text-align:center;padding: 0px; -webkit-user-select: none;}
#MoneyFlow .infoIcon { bottom:10px; }

#blockTrade #blkt_r1 { height: 50px; }
#blockTrade #blkt_r1 > .right { padding: 4px 4px 0px 0px; }
#blockTrade #blkt_r1 > .blkt_quote_name { font-size:36px; font-weight: bold; line-height:36px; padding:7px 0px 0px 8px; }
#blockTrade #blkt_r4 > .blkt_label_tx_rec { float:left; font-size:31px; font-weight:bold; line-height:40px; padding-left:10px; }

#statistics { padding: 0px; font-size: 28px; }
#statistics table { width: 100%; }
#statistics > table > tbody > tr > td { padding: 0px; }
#statistics table td { line-height: 40px; padding: 5px; }
#statistics table td.title { font-size: 30px; font-weight: normal; }
#statistics table td.data { text-align: right; }
#statistics table td.ErrorMsg { padding-top: 120px; text-align:center; }
#statistics table td.line { height: 2px; line-height: 0px; padding: 0; }
#statistics table td.line > img { vertical-align: top; }

#Funda { padding: 10px; font-size: 28px; position:relative; }
#Funda .topBg { position: absolute; top: 0; left: 0; width: 100%; height: 110px; z-index: -1; }
#Funda .std_container { position: absolute; top: 30px; left: 10px; border-style: solid; border-width: 1px; border-radius: 5px; }
#Funda .std_container > div { display: inline-block; float: left; padding: 4px 10px; border-left-width: 0px; border-left-style: solid; border-right-width: 1px; border-right-style: solid; cursor: pointer; }
#Funda.Eng .std_container.tab2{ font-size:14px }
#Funda.Eng div.menuContainer > div{padding: 0px 5px;}
#Funda.Eng table.tabdata tr[ref-2nd=unit] { font-size: 22px; }
#Funda .greyBorderTop { border-top-width: 1px; border-top-style: solid; padding-top:5px}
#Funda .title { font-weight: bold; vertical-align:top; }
#Funda .nowrap { white-space: nowrap;}
#Funda .none { display:none; }
#Funda .bold { font-weight:bold; }
#Funda .aLink{ text-decoration:none}
#Funda .jsHighChart { height: 264px; width:100%; padding:0px !important; }
#Funda #DHHighChart { height: 218px; width:650px; padding:0px; margin:0 auto}
#Funda table.tabdata { table-layout: fixed;}
#Funda table.tabdata colgroup > col.c1 { width: 40%; }
#Funda table.tabdata colgroup > col.c2 { width: 25%; }
#Funda table.tabdata colgroup > col.c3 { width: 25%; }
#Funda table.tabdata colgroup > col.c4 { width: 10%; }
#Funda table.tabdata tr:not([ref-2nd=date]) td { border-bottom-style: solid; border-bottom-width: 2px; }
#Funda table.tabdata tr td { padding:10px 0; line-height: 40px; }
#Funda table.tabdata tr td.title { width: 30%; }
#Funda table.tabdata tr td.msg { padding:120px 15px; text-align: center;}
#Funda table.tabdata tr[ref-2nd=date] td { height: 38px; line-height: 28px; padding-bottom: 0px; }
#Funda table.tabdata tr[ref-2nd=unit] td { height: 38px; padding-top: 0px; padding-bottom: 20px; border-bottom-width: 2px; border-bottom-style: solid; }
#Funda div.trend { cursor: pointer; }
#Funda .icon-trend { width: 50px; height: 30px; }
#Funda table.tabdata.tblCP td.title { width: 30%; }
#Funda table.tabdata.tblCP td { width: 70%; }
#Funda table.tabdata.tblCI { border-top-style: solid; border-top-width: 3px; margin-top: 30px; }
#Funda table.tabdata.tblCI td.title { width: 30%; }
#Funda table.tabdata.tblCI td { width: 70%; }
#Funda table.tabdata.tblCI td table { font-size: 24px; }
#Funda table.tabdata.tblCI td table td:nth-child(1) { width: 13%; }
#Funda table.tabdata.tblCI td table td:nth-child(2) { width: 21%; }
#Funda table.tabdata.tblCI td table td:nth-child(3) { width: 22%; }
#Funda table.tabdata.tblCI td table td:nth-child(4) { width: 18%; }
#Funda table.tabdata.tblCI td table td:nth-child(5) { width: 26%; }
#Funda .sub-title td { background: 5px center no-repeat; padding-left: 2px !important;}
#Funda .sub-title td div{position:relative}
/*#Funda .sub-title td div::before{content: ""; position: absolute; border-top-width: 7px; border-top-style: solid; border-bottom-width: 7px; border-bottom-style: solid;*/
border-left-width: 10px; border-left-style: solid; top: 1.4em;left: -16px; margin-top: -1em;}

#CorpEvent { padding: 10px 0px; font-size: 28px; position:relative; }
#CorpEvent table.tblCorp { width: 100%; line-height: 40px; border-collapse: collapse; }
#CorpEvent table.tblCorp colgroup .c1 { width: 25%; }
#CorpEvent table.tblCorp colgroup .c2 { width: 25%; }
#CorpEvent table.tblCorp colgroup .c3 { width: 25%; }
#CorpEvent table.tblCorp colgroup .c4 { width: 25%; }
#CorpEvent table.tblCorp tr.header td { border-top-style: solid; border-top-width: 2px; }
#CorpEvent table.tblCorp tr.header td.desp { font-size: 30px; padding: 10px 15px; }
#CorpEvent table.tblCorp tr td { padding: 5px 15px; vertical-align: top; }
#CorpEvent table.tblCorp tr td.label { font-size: 21px; line-height: 21px;  }
#CorpEvent table.tblCorp tr td.sep { height: 5px; }
#CorpEvent table.tblCorp tr td.eventType { font-weight: bold; }
#CorpEvent table.tblCorp tr td.symbol { cursor: pointer; vertical-align: middle; white-space: nowrap; }
#CorpEvent table.tblCorp tr td.symbol > div.icon-hk { display: inline-block; font-size: 20px; line-height: 20px; font-weight: bold; padding: 5px 8px; border-radius: 2px; vertical-align: middle; margin-top: -7px; }
#CorpEvent table.tblCorp tr td.symbol > div.icon-next-g { width: 11px; height: 18px; margin-left: 10px; display: inline-block; background-image: url('../images/cwind/btn_next_g.png'); }
#CorpEvent div.fixTop { position: fixed; left: 0; width: 100%; padding-top: 10px; }
#CorpEvent div.fixTop.f1 { z-index: 1000; top: 0; }
#CorpEvent div.fixTop.f2 { z-index: 800; top: 31px; }

#analysisCharts .chartTitle{ font-weight:bold; font-size:32px; height:40px; display:inline-block; line-height:52px; padding-left:5px; padding-right:5px;}
#analysisCharts .anLogo{height:35px; width:31px;}
#analysisCharts .delayMsg{font-size:18px; height:40px;display:inline-block; line-height:60px;padding-right:45px;}
#analysisCharts .lastUpdate {font-size:18px; height:40px;display:inline-block; line-height:60px;padding-right:45px;}
#analysisCharts .tooltiptext{font-size:20px;}

#analysisCharts .pietitle2{font-weight:bold; letter-spacing:0px;}
#analysisCharts .foc_content, #analysisCharts .foc_content a{line-height:24px;padding:5px; font-weight:bold}
#analysisCharts #btInfoPanel{ padding: 0 10px; width: 45%; height:244px;  min-width: 250px; margin: 20px auto 20px auto;  }        
#analysisCharts .btInfoPanel_nodata { background-color: #EBEBEB; color: #688D9C; }
#analysisCharts #btInfoPanel{font-size:30px;}
#analysisCharts #btInfoPanel .name{font-weight:bold; font-size:32px; text-align:center}
#analysisCharts #btInfoPanel .value{ font-weight:bold}
#analysisCharts .ChartArea{margin-top:10px;}
#analysisCharts .titleBar{height:42px; position: relative; padding-bottom:10px;}
#analysisCharts .statfoc { width: 210px; height: 100px; font-size:24px;}
#analysisCharts.eng .statfoc { font-size:20px;}
#analysisCharts.eng .statfoc { width: 200px; }
#analysisCharts .infoIcon { bottom:0px; }
#analysisCharts .detailLink{ font-weight:bold;font-size:26px;height:40px;  text-decoration:none} 
#analysisCharts.eng .detailLink{font-size:18px;}
#analysisCharts  .lineChartLegendText{font-size:26px}

#analysisCharts.v2 { padding: 0px 8px; }
#analysisCharts.v2 .card { padding: 10px; border-radius: 15px; margin-top: 15px; }
#analysisCharts.v2 .titleBar { margin-top: 10px; }
#analysisCharts.v2 .aInfo { display: inline-block; }
#analysisCharts.v2 .infoIcon { position: relative; bottom: -0px !important; margin-bottom: -10px; }
#analysisCharts.v2 .delayMsg { padding-right: 0px; }
#analysisCharts.v2 .lastUpdate { padding-right: 0px; }

#FundaSummary { padding: 10px; font-size: 28px; position:relative; }
#FundaSummary .greyBorderTop { border-top-width: 1px; border-top-style: solid; padding-top:5px}
#FundaSummary .title { font-weight: bold; vertical-align:top; }
#FundaSummary .nowrap { white-space: nowrap;}
#FundaSummary .none { display:none; }
#FundaSummary .bold { font-weight:bold; }
#FundaSummary .aLink{color:#B23B35; text-decoration:none}
#FundaSummary table.tabdata { table-layout: fixed;}
#FundaSummary table.tabdata colgroup > col.c1 { width: 50%; }
#FundaSummary table.tabdata colgroup > col.c2 { width: 25%; }
#FundaSummary table.tabdata colgroup > col.c3 { width: 25%; }

#FundaSummary table.tabdata tr td.dbl-border { border-bottom-style: solid; border-bottom-width: 2px; }
#FundaSummary table.tabdata tr td { padding:10px 0; line-height: 40px; }
#FundaSummary table.tabdata tr td.title { width: 30%; }
#FundaSummary table.tabdata tr td.msg { padding:120px 15px; text-align: center;}
#FundaSummary .type_container > table.tabdata tr th { border-bottom-style: solid; border-bottom-width: 2px; }
#FundaSummary .type_container > table.tabdata tr th,
#FundaSummary .type_container > table.tabdata tr td { padding-left: 10px; padding-right: 10px; }
#FundaSummary .type_container > table.tabdata tr:nth-child(2) td { border-bottom-style: solid; border-bottom-width: 2px; }
#FundaSummary .sub-title td { background: 5px center no-repeat; padding-left: 28px !important;}
#FundaSummary .sub-title td div{position:relative}
#FundaSummary .sub-title td div::before{content: ""; position: absolute; border-top-width: 7px; border-top-style: solid; border-bottom-width: 7px; border-bottom-style: solid;
border-left-width: 10px; border-left-style: solid; top: 1.4em;left: -16px; margin-top: -1em;}
#FundaSummary .type_container { padding: 0px; }
#FundaSummary .lastUpdate { margin-top: 5px; margin-bottom: 20px; padding:5px }
#FundaSummary table.tabdata th { font-size: 34px; text-align: left; vertical-align: top; line-height: 34px; padding-top: 14px; padding-bottom: 10px; line-height: 38px; }
#FundaSummary table.tabdata th .icon-next-w { width: 18px; height: 32px; display: inline-block; background-image: url('../images/cwind/title_next.png'); margin-top: 2px; }

#DividendSummary { padding: 10px 0px; font-size: 28px; position:relative; }
#DividendSummary table.tblDH { width: 100%; line-height: 40px; border-collapse: collapse; }
#DividendSummary table.tblDH colgroup .c1 { width: 25%; }
#DividendSummary table.tblDH colgroup .c2 { width: 25%; }
#DividendSummary table.tblDH colgroup .c3 { width: 25%; }
#DividendSummary table.tblDH colgroup .c4 { width: 25%; }
#DividendSummary table.tblDH .card { position: relative; }
#DividendSummary table.tblDH tr.header td { border-top-style: solid; border-top-width: 2px; }
#DividendSummary table.tblDH tr.header td.desp { font-size: 30px; padding: 10px 15px; }
#DividendSummary table.tblDH tr td { padding: 5px 15px; vertical-align: top; }
#DividendSummary table.tblDH tr td.pad-right { padding-right: 100px; }
#DividendSummary table.tblDH tr td.label { font-size: 21px; line-height: 21px;  }
#DividendSummary table.tblDH tr td.sep { height: 5px; }
#DividendSummary table.tblDH tr td.symbol { cursor: pointer; vertical-align: middle; white-space: nowrap; }
#DividendSummary table.tblDH tr td.symbol > div.icon-hk { display: inline-block; font-size: 20px; line-height: 20px; font-weight: bold; padding: 5px 8px; border-radius: 2px; vertical-align: middle; margin-top: -7px; }
#DividendSummary table.tblDH tr td.symbol > div.icon-next-g { width: 11px; height: 18px; margin-left: 10px; display: inline-block; background-image: url('../images/cwind/btn_next_g.png'); }
#DividendSummary table.tblDH tr td .redirect { position: absolute; right: 0px; top: 50%; top: calc(50% - 46px); padding: 30px 20px 30px 62px; }
#DividendSummary table.tblDH tr td .icon-next-w { width: 18px; height: 32px; display: inline-block; background-image: url('../images/cwind/title_next.png'); }
#DividendSummary div.fixTop { position: fixed; left: 0; width: 100%; padding-top: 10px; }
#DividendSummary div.fixTop.f1 { z-index: 1000; top: 0; }
#DividendSummary div.fixTop.f2 { z-index: 800; top: 31px; }

#Chart { position:relative; }
#Chart .tabBtnContainer { height: 33px; }
#Chart .tabBtnContainer > div {float: left; width: 12.5%; text-align:center;font-size: 18px;height: 30px;border-bottom:2px solid; line-height: 34px; }
#Chart .tabBtnContainer > div.sel {border-bottom:2px solid;position:relative;}
#Chart .tabBtnContainer > div.sel:after {content:' ';display: block;position: absolute;bottom:0;left: 40%;left: calc(50% - 8px);width: 0;height: 0;border-style: solid;border-width: 0 8px 8px 8px;}
#Chart .scrollContainer { overflow-y: scroll; -webkit-overflow-scrolling: touch; }
#Chart .indicatorControl { position: absolute; width: 50px; height: 14px; font-size: 12px; line-height: 14px; text-align: left; }
#Chart .indicatorControl.mainInd { z-index: 400; }
#Chart .indicatorControl.subInd1 { z-index: 300; }
#Chart .indicatorControl.subInd2 { z-index: 200; }
#Chart .indicatorControl.subInd3 { z-index: 100; }
#Chart .indicatorControl > .indicatorText { cursor: pointer; }
#Chart .indicatorControl > .indicatorText:before { content: ' ';display: block;position: absolute; top: -100%; left: 0; width: 100%; height: 300%;}
#Chart .indicatorControl > .indicatorText:after { content:'▼';display: block;position: absolute; top: 0; right: 2px; }
#Chart .indicatorControl > div { display: inline-block; padding-left: 2px; width: 100%; }
#Chart .indicatorControl > .indicatorContainer { width: 220px; height: auto; }
#Chart .indicatorControl > .indicatorContainer > div.ind { float: left; width: 28%; font-size: 16px; line-height: 30px; padding-left: 5%; }

#Chart .moreOptionPanelContainer { width:100%; font-size: 35px; }
#Chart .moreOptionPanel { width:90%; margin:0 auto;  margin:0 auto; border-radius:5px; padding:5%; height: 650px; }
#Chart .moreOptionPanel .dyBtn { width: 100%; height:50px; line-height:50px; border:solid 1px; display:inline-block; border-radius:5px; }
#Chart .moreOptionPanel .dyBtn-item .icon-chart { width: 32px; height: 35px;}
#Chart .moreOptionPanel .dyBtn-item.first { border: 0; }
#Chart .moreOptionPanel .dyBtn-item { float: left; width: 33%; height: 50px; border-left: 1px solid; cursor: pointer; }
#Chart .moreOptionPanel table td { padding: 15px 0px; }
#Chart .moreOptionPanel table td.title { width: 25%; height: 55px; }
#Chart .none { display:none !important; }
#Chart .btn { border:0; border-radius:5px; text-align:center; width:47%; display:inline-block; height:70px; line-height:70px; font-size: 40px; cursor: pointer; }

#Chart .iblock { margin: 0 auto;}
#Chart .iblock select { width: 100%; }
#Chart select { font-size: 35px; width: 60%; border-radius: 2px; border: 0; padding: 8px 5px; height: 59px; }
#Chart .selectContainer { display: inline; position: relative; }
#Chart .selectContainer:after { content:'▼'; position: absolute; right: 2px; top: 2px; height: 40px; line-height: 40px; }
#Chart .btnParamSetting { float: right; height: 57px; vertical-align: top; border-radius: 2px; border: 1.5px solid; font-size: 35px; margin-left: 5px; padding: 0px 10px; cursor: pointer; }

#Chart .paramSettingPanel { width:100%; margin:0 auto;  margin:0 auto; border-radius:5px; padding:5% 0px; height: 650px;}
#Chart .paramSettingPanel table td { padding: 15px 5%; }
#Chart .paramSettingPanel table thead td { text-align: center; font-weight: bold; font-size: 40px; border-bottom: 2px solid; padding-top: 0px; padding-bottom: 30px; }
#Chart .paramSettingPanel table tbody { float: left; width: 100%; clear: both; height: 491px; }
#Chart .paramSettingPanel table tbody tr { display: table; width: 100%; }
#Chart .paramSettingPanel table tbody td.title { width: 25%; }
#Chart .paramSettingPanel table tbody td.value input { border: none; font-size: 35px; padding: 5px; width: 100%; }
#Chart .paramSettingPanel table tbody td { border-bottom: 2px solid;  }
#Chart .paramSettingPanel .btn { float: left; width:23%; margin-right: 22px; }
#Chart .paramSettingPanel .btn.right { float: right; width:47%; margin: auto; }

#Indices { width: 100%; }
#Indices .font-num { font-family: Arial, 微軟正黑體, 'Microsoft JhengHei'; letter-spacing: 0;}
#Indices .topBar { margin: 5px auto; width: auto; text-align: center; }
#Indices .tabContainer { display: inline-block; position: relative; }
#Indices .tabContainer > div.tab { float:left; width: 150px; height: 59px; text-align: center; cursor: pointer; font-size: 32px; line-height: 59px; }
#Indices .tabContainer > div.tab:nth-child(2) { width: 110px; padding-right: 20px; }
#Indices .tabContainer > div.tab:nth-last-child(3) { width: 110px; padding-left: 20px; }
#Indices .tabContainer > div.tab.m2 { width: 250px; }
#Indices .tabContainer > div.tab.m2:nth-child(2) { width: 210px; }
#Indices .tabContainer > div.tab.m2:nth-last-child(3) { width: 210px; }
#Indices .tabContainer > div.tab-left { position:absolute; left: -18px; top: 0; width: 20px; height: 59px; }
#Indices .tabContainer > div.tab-right { position:absolute; right: -18px; top: 0; width: 20px; height: 59px; }
#Indices .delayBar { width: 98%; padding: 0 1%; font-size: 22px; line-height: 26px; }
#Indices .dataTable > .subHeader > span { float: left; }
#Indices .dataTable > .subHeader { width: 98%; padding: 0 1%; font-size: 26px; line-height: 40px; height: 40px; }
#Indices .dataTable > table { table-layout: fixed; width: 100%; border-collapse: collapse; font-size: 32px; text-align: left; }
#Indices .dataTable > table > thead th { padding: 12px 10px; line-height: 30px; border-style: solid; border-width: 1px 0px; white-space: nowrap; }
#Indices .dataTable > table > thead th.switch { text-align: left; padding-left: 100px; }
#Indices .dataTable > table > thead th.switch > .icon-corner { display: inline-block; width: 30px; height: 28px; margin-bottom: -5px; }
#Indices .dataTable > table > tbody td { padding: 12px 0px; line-height: 45px; border-style: solid; border-width: 0px 0px 1px 0px; }
#Indices .dataTable > table > tbody td > .icon-arrow { display: inline-block; width: 30px; height: 30px; margin-bottom: -5px; margin-right: 5px; }
#Indices .dataTable > table > thead th:nth-child(1),
#Indices .dataTable > table > tbody td:nth-child(1) { width: 35%; padding-left: 5px;}
#Indices .dataTable > table > thead th:nth-child(2),
#Indices .dataTable > table > tbody td:nth-child(2) { width: 20%; }
#Indices .dataTable > table > thead th:nth-child(3),
#Indices .dataTable > table > tbody td:nth-child(3) { width: 45%; padding-right: 5px; white-space: nowrap; }
#Indices .dataTable > table > thead th:nth-child(4),
#Indices .dataTable > table > tbody td:nth-child(4) { width: 45%; padding-right: 5px; white-space: nowrap; }
#Indices .errMsg { width: 100%; text-align: center; padding-top: 50px;  }
#Indices .errMsg > span { font-size: 30px; line-height: 40px; }
#Indices.eng .tabContainer > div.tab { font-size: 26px; width: 150px; white-space: nowrap; }
#Indices.eng .tabContainer > div.tab:nth-child(2) { width: 110px; }
#Indices.eng .tabContainer > div.tab:nth-last-child(3) { width: 110px; }
#Indices.eng .tabContainer > div.tab.m2 { width: 280px; }
#Indices.eng .tabContainer > div.tab.m2:nth-child(2) { width: 240px; }
#Indices.eng .tabContainer > div.tab.m2:nth-last-child(3) { width: 240px; }
#Indices.eng .dataTable > table > tbody td:nth-child(1) { font-size: 28px; }
#Indices.eng .delayBar { width: 98%; padding: 0 1%; font-size: 20px; line-height: 24px; }

@media all and (orientation: landscape){
    #Indices .dataTable > table > thead th:nth-child(2),
    #Indices .dataTable > table > tbody td:nth-child(2) { width: 150px; }
    #Indices .dataTable > table > thead th:nth-child(3) { width: 150px; }
    #Indices .dataTable > table > tbody td:nth-child(3) { width: 230px; }
    #Indices .dataTable > table > thead th:nth-child(4) { width: 150px; }
    #Indices .dataTable > table > tbody td:nth-child(4) { width: 230px; }
}

#IndicesB2C .font-num { font-family: Arial, 微軟正黑體, 'Microsoft JhengHei'; letter-spacing: 0;}
#IndicesB2C .topBar { width: 100%; height: 115px; }
#IndicesB2C .topBar > table { width: 100%; border-collapse: collapse; text-align: center; margin-bottom: 8px; }
#IndicesB2C .topBar > table td { width: 25%; cursor: pointer; height: 60px; border-style: solid; border-width: 0px; border-bottom-width: 3px; font-size: 28px; line-height: 60px; padding: 2px; }
#IndicesB2C .topBar .delayBar { width: calc(100% - 20px); padding: 0 10px; font-size: 24px; line-height: 30px; height: 30px; margin: 5px 0px; }
#IndicesB2C .content { width: calc(100vw - 16px); padding: 0px 8px; }
#IndicesB2C .content .container { width: calc(100% - 24px); padding: 10px; margin-bottom: 4px; font-size: 24px; line-height: 40px; min-height: 135px; border-style: solid; border-width: 2px; border-radius: 5px; }
#IndicesB2C .content .container.p2 { padding-bottom: 15px; }
#IndicesB2C .content .container table.std { table-layout:fixed; border-collapse: collapse; width: 100%; font-size: 30px; }
#IndicesB2C .content .container table.std td { padding-right: 3px; white-space: nowrap; }
#IndicesB2C .content .container table.std .col1 { width: 260px; }
#IndicesB2C .content .container table.std .col2 { width: auto; }
#IndicesB2C .content .container table.std .col3 { width: 160px; }
/*#IndicesB2C.eng .content .container table.std .col1 { width: calc((100% - 160px) / 3); }
#IndicesB2C.eng .content .container table.std .col2 { width: calc((100% - 160px) / 3 * 2); }
#IndicesB2C.eng .content .container table.std .col3 { width: 160px; }*/
#IndicesB2C .content .container .desp { font-size: 32px; font-weight: bold; }
#IndicesB2C .content .container .redirect { display:inline-block; width: 0px; height: 0px; border-style: solid; border-left-width: 16px; border-top-width: 15px; border-bottom-width: 15px; border-right-width: 0px; margin-left:10px; margin-bottom:-2px; }
#IndicesB2C .content .container .redirect.s2 { border-left-width: 12px; border-top-width: 11px; border-bottom-width: 11px; margin-bottom:-2px; }
#IndicesB2C .content .container .gpLast { display: inline-block; font-size: 38px; width: 200px; font-weight: bold; }
#IndicesB2C .content .container table.std .desp { font-size: 40px; font-weight: bold; }
#IndicesB2C .content .container table.std .gpLast { width:initial; }
#IndicesB2C .content .container .gpLast .arrow { display: inline-block; width: 0px; height: 0px; border-style: solid; border-width: 0px; margin-right: 5px; }
#IndicesB2C .content .container .gpLast .arrow.pos { border-width: 0px 10px 15px 10px; margin-bottom: 5px; }
#IndicesB2C .content .container .gpLast .arrow.neg { border-width: 15px 10px 0px 10px; margin-bottom: 5px; }
#IndicesB2C .content .container .gpLast .arrow.unc { position: relative; width: 20px; height: 16px; }
#IndicesB2C .content .container .gpLast .arrow.unc:before { content: ''; position: absolute; width: 9px; height: 5px; left: 0px; }
#IndicesB2C .content .container .gpLast .arrow.unc:after { content: ''; position: absolute; width: 9px; height: 5px; right: 0px; }
#IndicesB2C .content .container .chgpct { font-size: 30px; font-weight: bold; }
#IndicesB2C .content .container .label { margin-right: 10px; }
#IndicesB2C .content .container .value { font-size: 28px; }
#IndicesB2C .content .container .value.right { margin-right: 5px; }
#IndicesB2C .content .container .miniChart { vertical-align: bottom; }
/*#IndicesB2C.eng .content .container .miniChart { margin-left: 15px; }*/
#IndicesB2C .content .container .title { font-size: 26px; }
#IndicesB2C .content .container .itemBox { float: left; width: 32%; width: calc((100% - 2px) / 3); text-align: center; margin-bottom: 10px; }
#IndicesB2C .content .container .itemBox.m2 { margin-bottom: 0px; }
#IndicesB2C .content .container .itemBox .desp { font-size: 28px; margin-bottom: 10px; }
#IndicesB2C .content .container .itemBox .desp.r2 { min-height: 80px; }
#IndicesB2C .content .container .itemBox .chgpct { font-size: 26px; }
#IndicesB2C .content .container .itemBox .chgpct.s2 { font-size: 28px; }
#IndicesB2C .content .container .colSep { float: left; width: 1px; height: 24px; border-bottom-style: solid; border-bottom-width: 150px; }
#IndicesB2C .content .container .colSep.m2 { border-bottom-width: 140px; }
#IndicesB2C.eng .content .container .colSep.m2 { border-bottom-width: 170px; }
#IndicesB2C .content .container .rowSep { height: 20px; }
#IndicesB2C .errMsg { width: 100%; text-align: center; padding-top: 50px;  }
#IndicesB2C .errMsg > span { font-size: 30px; line-height: 40px; }

#IndicesB2C.r2 .topBar { height: 145px; }
#IndicesB2C.r2 .topBar .delayBar { height: 60px; }
#IndicesB2C.r3 .topBar { height: 175px; }
#IndicesB2C.r3 .topBar .delayBar { height: 90px; }

#Disclaimer { min-height: calc(100vh - 100px); padding: 20px 20px 80px 20px; }
#Disclaimer .content { font-size: 32px; line-height: 38px; height: 100%; }
#Disclaimer .content p { margin: 0; font-weight: bold; }
#Disclaimer .btnGroup { width: 100%; text-align: center; margin-top: 60px; }
#Disclaimer .btnGroup input[type='button'] { font-size: 30px; width: 240px; height: 54px; line-height:54px; border: 0; border-radius: 6px; outline: 0; }
#Disclaimer .btnGroup input[type='button']:first-child { margin-right: 30px; }

#MainNewsContent .txt_c { text-align: center; }
#MainNewsContent .txt_l { text-align: left; }
#MainNewsContent .txt_r { text-align: right; }

#MainNewsContent .animate { -ms-transition: transform 0.3s ease-out; -webkit-transition: transform 0.3s ease-out; -moz-transition: transform 0.3s ease-out; -o-transition: transform 0.3s ease-out; transition: transform 0.3s ease-out; }
#MainNewsContent .s-main { position: relative; width: 750px; overflow:hidden; margin: auto; }
#MainNewsContent .s-container { width: calc(750px * 3); }
#MainNewsContent .s-slide { width: 750px; height: 100%; float: left; position: relative; }
#MainNewsContent .s-content { height: 313px; width: 710px; display: table; margin: 0px auto; }
#MainNewsContent .s-content > .s-bound { display: table-cell; vertical-align: top; width: 100%; margin: auto; font-size: 50px; color: blue; text-align: center; }
#MainNewsContent .s-content > .s-bound > .s-area { display: inline-block; position: relative; width: 100%; background: transparent; -ms-transform-origin: bottom; -webkit-transform-origin: bottom; -moz-transform-origin: bottom; -o-transform-origin: bottom; transform-origin: bottom; position: relative; z-index: 100; cursor: default; }
#MainNewsContent .s-point { width: 100%; text-align: center; position:relative; margin-top: 10px; }
#MainNewsContent .s-point .point { display: inline-block; height: 14px; width:15px; margin: 4px; }
#MainNewsContent .s-point .point.sel { height: 14px; width:15px; }

#MainNewsContent table.main {width: 100%;margin-top: 14px;}
#MainNewsContent table.main tr td {padding: 0px 10px;}
#MainNewsContent table.main tr td > div.rf1 { width: 100%; height: 50px; line-height: 50px; overflow: hidden; }
#MainNewsContent table.main tr td > div.rf2 { width: 100%; height: 80px; line-height: 40px; overflow: hidden; }
#MainNewsContent table.tf tr.desp td {font-size: 38px;height: 50px;font-weight: bold;}
#MainNewsContent table.tf tr.desp td.chart {width: 300px;height: 150px;vertical-align: bottom;}
#MainNewsContent table.tf tr.quote td.col1 {font-size: 28px;line-height: 34px;height: 50px;word-break: keep-all;}
#MainNewsContent table.tf tr.quote td.col2 {font-size: 32px;line-height: 32px;height: 50px;word-break: keep-all;}
#MainNewsContent table.tf tr.remark td {font-size: 21px;height: 30px;}
#MainNewsContent table.tf tr.news td {font-size: 32px;padding-top: 4px;}
#MainNewsContent table.tf tr.news td span { font-size: 28px; margin-right: 10px; }

#MainNewsContent table.ipo tr.desp td {font-size: 40px;padding-top: 15px;padding-bottom: 15px;font-weight: bold;}
#MainNewsContent table.ipo tr.info td { padding: 3px 10px; }
#MainNewsContent table.ipo tr.info td.col1 { font-size: 28px; line-height: 36px; width: 100px; white-space: nowrap; }
#MainNewsContent table.ipo tr.info td.col2 { font-size: 34px; line-height: 36px; }

#MainNewsContent.eng table.ipo tr.info td.col1 { width: 200px; }

/* Education */
#EducationCenter { padding-top: 100px; -webkit-tap-highlight-color: rgba(0,0,0,0); }
#EducationCenter.eng { font-family: Arial, 微軟正黑體, 'Microsoft JhengHei'; }
#EducationCenter .abs { position: absolute !important; }
#EducationCenter .icon { display: inline-block; }
#EducationCenter .icon-edu { background: url('../images/education/edu_icon.png?v=1') no-repeat; width: 56px; height: 47px; vertical-align: text-top; margin-right: 5px; }
#EducationCenter .icon-search { background: url('../images/education/search.png?v=1') no-repeat; width: 36px; height: 36px; margin-top: 32px; }
#EducationCenter .icon-menu { background: url('../images/education/menu.png?v=1') no-repeat; width: 36px; height: 28px; margin-top: 36px; }
#EducationCenter .icon-back { background: url('../images/education/back.png?v=1') no-repeat; width: 36px; height: 28px; margin-top: 36px; }
#EducationCenter .icon-close-white { background: url('../images/education/close_white.png?v=1') no-repeat; width: 28px; height: 28px; margin-top: 36px; }
#EducationCenter .icon-close-blue { background: url('../images/education/close_blue.png?v=1') no-repeat; width: 28px; height: 28px; margin-top: 36px; }

#EducationCenter > .mask { position: fixed; top: 0px; left: 0px; width: 100%; height: 98px; background: #fff; z-index: 998; }
#EducationCenter > .header { position: fixed; top: 0px; left: 0px; width: 100%; height: 98px; background: #fff; font-size: 36px; text-align: center; z-index: 999; box-shadow: 0px 0px 7px 0px rgba(0, 0, 0, 0.2); }
#EducationCenter > .header .text { display: inline-block; margin: 0px auto; }
#EducationCenter > .header .text a { display: block; padding: 28px 0px; }
#EducationCenter > .header .text .title { display: inline-block; vertical-align: text-top; margin-top: -1px; line-height: 48px; }
#EducationCenter > .header .btn { position: absolute; top: 0; width: 88px; height: 100px; cursor: pointer; z-index: 100; }
#EducationCenter > .header .btn.b1 { left: 0; }
#EducationCenter > .header .btn.b2 { right: 0; }
#EducationCenter > .header .btn.close { width: 90px; }
#EducationCenter > .header .btn.close .icon-menu { background: url('../images/education/close_white.png?v=1') no-repeat; width: 28px; height: 28px; margin-top: 36px; }
#EducationCenter > .header .btn.search .icon-close-blue { background: url('../images/education/search.png?v=1') no-repeat; width: 36px; height: 36px; cursor: default; margin-top: 32px; }
#EducationCenter > .header .input { width: calc(100% - 180px); }
#EducationCenter > .header .input .searchBox { width: calc(100% - 40px); height: 98px; float: left; font-size: 35px; padding: 0px 20px; border: 0; outline: 0; margin-left: 90px; }
#EducationCenter > .header .input .searchBox:focus { outline: none; }
#EducationCenter > .header .input .searchBox::-ms-clear { display: none; width : 0; height: 0; }
#EducationCenter > .header .input .searchBox::-ms-reveal { display: none; width : 0; height: 0; }
#EducationCenter > .header .overlay { position: absolute; top: 98px; left: 0px; width: 100%; height: calc(100vh - 100px); border-top-style: solid; border-top-width: 2px; z-index: 99; overflow-y: scroll; -webkit-overflow-scrolling: touch; }
#EducationCenter > .header .overlay ul { list-style: none; padding: 0px; margin: 18px 0px; }
#EducationCenter > .header .overlay ul > li { margin: 0px 26px; border-bottom-width: 2px; border-bottom-style: dotted; text-align: left; }
#EducationCenter > .header .overlay ul > li a { display: block; padding: 23px 5px; font-size: 35px; line-height: 60px; }
#EducationCenter > .header div[ref='search-panel'] .overlay ul { margin: 0; }
#EducationCenter > .header div[ref='search-panel'] .overlay li { overflow: hidden; height: 110px; line-height: 110px; }
#EducationCenter > .header div[ref='search-panel'] .overlay li.noData { font-size: 30px; }
.noscroll #EducationCenter > .header { position: absolute !important; }

#EducationCenter > .content { font-size: 32px; padding: 26px; padding-top: 42px; }
#EducationCenter > .content .view > .title { margin-bottom: 35px; }

#EducationCenter > .content .view.mainview { padding-bottom: 14px; }
#EducationCenter > .content .view.mainview > .title { margin-top: 5px; }
#EducationCenter > .content .view.mainview table { width: 100%; border-collapse: collapse; }
#EducationCenter > .content .view.mainview table td { padding: 0px; }
#EducationCenter > .content .view.mainview .tblCategory tr.head > td { border-bottom-width: 4px; border-bottom-style: solid; vertical-align: bottom; }
#EducationCenter > .content .view.mainview .tblCategory tr.head > td .name { position: relative; display: inline-block; padding: 18px 30px 14px 30px; font-size: 34px; line-height: 34px; }
#EducationCenter > .content .view.mainview .tblCategory tr.head > td .name:after { content: ''; position: absolute; top: 0px; left: 0px; width: 0px; height: 0px; border-width: 12px; border-style: solid; }
#EducationCenter > .content .view.mainview .tblCategory tr.head > td .more { position: relative; display: inline-block; padding: 10px 23px; font-size: 33px; line-height: 33px; cursor: pointer; white-space: nowrap; }
#EducationCenter > .content .view.mainview .tblCategory tr.head > td .more:after { content: ''; position: absolute; bottom: 10px; right: 0px; width: 0px; height: 0px; border-width: 10px; border-style: solid; }
#EducationCenter > .content .view.mainview .tblCategory tr.content > td { padding: 25px; }
#EducationCenter > .content .view.mainview .tblCategory tr.sep > td { height: 60px; padding: 0px; }
#EducationCenter > .content .view.mainview .tblKeyword tr td { position: relative; text-align: center; padding: 25px 5px; width: 50%; border-width: 2px; border-style: dotted; }
#EducationCenter > .content .view.mainview .tblKeyword tr td.std_h { height: 180px; }
#EducationCenter > .content .view.mainview .tblKeyword tr td.ico_h { height: 260px; }
#EducationCenter > .content .view.mainview .tblKeyword tr td .keyword.tc { font-size: 36px; }
#EducationCenter > .content .view.mainview .tblKeyword tr td .keyword.en { font-size: 30px; line-height: 32px; }
#EducationCenter > .content .view.mainview .tblKeyword tr td .icon > img { width: 144px; }
#EducationCenter > .content .view.mainview .tblKeyword tr:first-child td { border-top: 0; padding-top: 0px; }
#EducationCenter > .content .view.mainview .tblKeyword tr td:first-child { border-left: 0; padding-right: 30px; }
#EducationCenter > .content .view.mainview .tblKeyword tr:last-child td { border-bottom: 0; padding-bottom: 0px; }
#EducationCenter > .content .view.mainview .tblKeyword tr td:last-child { border-right: 0; padding-left: 30px; }
/*#EducationCenter > .content .view.mainview .tblKeyword tr td.ico_h .icon { position: absolute; display: block; width: calc(100% - 25px); }
#EducationCenter > .content .view.mainview .tblKeyword tr td.ico_h .icon > img { width: 144px; height: 116px; }
#EducationCenter > .content .view.mainview .tblKeyword tr:first-child td.ico_h { padding-top: 150px; padding-bottom: 55px; }
#EducationCenter > .content .view.mainview .tblKeyword tr:first-child td.ico_h .icon { top: 25px; }
#EducationCenter > .content .view.mainview .tblKeyword tr:last-child td.ico_h { padding-top: 175px; padding-bottom: 30px; }
#EducationCenter > .content .view.mainview .tblKeyword tr:last-child td.ico_h .icon { top: 50px; }*/

#EducationCenter > .content .view.categoryview > .title { padding: 0px 7px; margin-bottom: 18px; }
#EducationCenter > .content .view.categoryview > .title .sep { padding: 0px 23px; }
#EducationCenter > .content .view.categoryview .container .title { padding: 0px 2px; font-size: 66px; line-height: 88px; font-weight: bold; margin-bottom: 28px; }
#EducationCenter.eng > .content .view.categoryview .container .title { line-height: 68px; }
#EducationCenter > .content .view.categoryview .container .card { position: relative; padding: 30px 30px 45px 30px; margin-bottom: 25px; }
#EducationCenter > .content .view.categoryview .container .card:after { content: ''; position: absolute; top: 0px; right: 0px; width: 0px; height: 0px; border-width: 25px; border-style: solid; }
#EducationCenter > .content .view.categoryview .container .card .keyword.tc { font-size: 48px; line-height: 54px; padding: 0px 12px; }
#EducationCenter > .content .view.categoryview .container .card .keyword.en { font-size: 34px; line-height: 38px; padding: 0px 12px; }
#EducationCenter > .content .view.categoryview .container .card .sep { border-bottom-style: solid; border-bottom-width: 4px; margin: 10px 0px 30px 0px; }
#EducationCenter > .content .view.categoryview .container .card .desp { font-size: 35px; line-height: 44px; padding: 0px 12px; }

#EducationCenter > .content .view.keywordview { padding-bottom: 34px; }
#EducationCenter > .content .view.keywordview > .title { padding: 0px 7px; margin-bottom: 38px; }
#EducationCenter > .content .view.keywordview > .title .sep { padding: 0px 23px; }
#EducationCenter > .content .view.keywordview .container .title { padding: 0px 5px; font-weight: bold; }
#EducationCenter > .content .view.keywordview .container .title .keyword.tc { font-size: 52px; line-height: 56px; }
#EducationCenter > .content .view.keywordview .container .title .keyword.en { font-size: 38px; line-height: 48px; }
#EducationCenter > .content .view.keywordview .container .content { position: relative; padding: 30px 10px 0px 10px; font-size: 35px; line-height: 48px; }
#EducationCenter > .content .view.keywordview .container .formula { margin-top: 50px; padding: 0px 14px; }
#EducationCenter > .content .view.keywordview .container .formula > div.note-top { position: relative; margin: 0px auto; padding: 45px 48px 0px 48px; overflow: hidden; }
#EducationCenter > .content .view.keywordview .container .formula > div.note-top .text1 { padding: 0px 15px; font-size: 36px; line-height: 60px; font-weight: bold; border-bottom-width: 1px; border-bottom-style: solid; }
#EducationCenter > .content .view.keywordview .container .formula > div.note-top .text2 { padding: 35px 15px 0px 15px; font-size: 34px; line-height: 38px; }
#EducationCenter > .content .view.keywordview .container .formula > div.note-top .text2 > img { width: 750px; }
#EducationCenter > .content .view.keywordview .container .formula > div.note-top:after { content: ''; position: absolute; left: 0px; top: 0px; width: 0px; height: 0px; border-style: solid; border-right-width: 24px; border-left-width: 24px; border-top-width: 20px; border-bottom-width: 20px; z-index: 1; }
#EducationCenter > .content .view.keywordview .container .formula > div.note-bottom { padding: 0px 70px; height: 45px; }
#EducationCenter > .content .view.keywordview .container .video { margin-top: 50px; text-align: center; }
#EducationCenter > .content .view.keywordview .container .video .vn-box { position: relative; display: inline-block; }
#EducationCenter > .content .view.keywordview .container .video .vn-image > img { width: 466px; height: 262px; }
#EducationCenter > .content .view.keywordview .container .video .vn-desp { font-size: 34px; margin-top: 2px; }
#EducationCenter > .content .view.keywordview .container .video .vn-icon { position: absolute; top: 210px; left: 7px; }

/* Education Color */
#EducationCenter > .header { background: #ffffff; color: #2a669e; }
#EducationCenter > .header .text a { color: #2a669e; }
#EducationCenter > .header .btn.close { background: #0869a1; }
#EducationCenter > .header .input .searchBox { color: #0869a1; }
#EducationCenter > .header .input .searchBox::placeholder { color: #d2e0e8 !important; padding-left: 7px !important; }
#EducationCenter > .header .input .searchBox:-ms-input-placeholder { color: #d2e0e8 !important; padding-left: 7px !important; }
#EducationCenter > .header .input .searchBox::-ms-input-placeholder { color: #d2e0e8 !important; padding-left: 7px !important; }
#EducationCenter > .header .overlay { border-top-color: #d2e0e8; background: #ffffff; }
#EducationCenter > .header .overlay ul > li { color: #0869a1; border-bottom-color: #e0e0e0; }
#EducationCenter > .header .overlay ul > li a { color: #0869a1; }
#EducationCenter > .header div[ref='search-panel'] .overlay { background: #f8f8f8; }
#EducationCenter > .header div[ref='search-panel'] .overlay ul { background: #ffffff; }
#EducationCenter > .header div[ref='search-panel'] .overlay li.noData { color: #aaaaaa; }

#EducationCenter > .content { color: #2a669e; }
#EducationCenter > .content .view > .title .sep { color: #858585; }
#EducationCenter > .content .view > .title a { color: #2a669e; }

#EducationCenter > .content .view.mainview .tblCategory .name { background: #d8e9f1; color: #0869a1; }
#EducationCenter > .content .view.mainview .tblCategory tr.head > td { border-bottom-color: #d8e9f1; }
#EducationCenter > .content .view.mainview .tblCategory tr.head > td a { color: #0869a1; }
#EducationCenter > .content .view.mainview .tblCategory tr.head > td .name:after { border-left-color: #a6c9da; border-top-color: #a6c9da; border-right-color: transparent; border-bottom-color: transparent; }
#EducationCenter > .content .view.mainview .tblCategory tr.head > td .more:after { border-left-color: transparent; border-top-color: transparent; border-right-color: #a6c9da; border-bottom-color: #a6c9da; }
#EducationCenter > .content .view.mainview .tblCategory tr.content > td { background: #ffffff; }
#EducationCenter > .content .view.mainview .tblKeyword tr td { border-color: #e0e0e0; }
#EducationCenter > .content .view.mainview .tblKeyword tr td a { color: #0869a1; }

#EducationCenter > .content .view.categoryview .container .title { color: #0869a1; }
#EducationCenter > .content .view.categoryview .container .card { background: #ffffff; color: #0869a1; }
#EducationCenter > .content .view.categoryview .container .card:after { border-left-color: transparent; border-top-color: #a6c9da; border-right-color: #a6c9da; border-bottom-color: transparent; }
#EducationCenter > .content .view.categoryview .container .card .keyword { color: #0869a1; }
#EducationCenter > .content .view.categoryview .container .card .sep { border-bottom-color: #d8e9f1; }
#EducationCenter > .content .view.categoryview .container .card .desp { color: #666666; }

#EducationCenter > .content .view.keywordview .container .title { color: #0869a1; }
#EducationCenter > .content .view.keywordview .container .content { color: #666666; }
#EducationCenter > .content .view.keywordview .container .formula > div.note-top { background: #f7f8ea; }
#EducationCenter > .content .view.keywordview .container .formula > div.note-top .text1 { color: #8b8b88; border-bottom-color: #e1e2da; }
#EducationCenter > .content .view.keywordview .container .formula > div.note-top .text2 { color: #666666; }
#EducationCenter > .content .view.keywordview .container .formula > div.note-top:after { border-right-color: #eeefda; border-left-color: #f8f8f8; border-top-color: #f8f8f8; border-bottom-color: #eeefda; }
#EducationCenter > .content .view.keywordview .container .formula > div.note-bottom { background: #f7f8ea; }
#EducationCenter > .content .view.keywordview .container .video .vn-desp { color: #0869a1; }

#Outstanding { padding: 0px 8px; }
#Outstanding.eng { font-family: Arial; }
#Outstanding .font-num { font-family: Arial; letter-spacing: 0; }
#Outstanding .card { padding: 10px; border-radius: 15px; margin-top: 15px; }
#Outstanding .card > .title { font-size: 32px; line-height: 42px; font-weight: bold; margin-top: 10px; margin-bottom: 10px; }
#Outstanding .card > .title > .lastUpdate { float: right; font-size: 18px; height: 40px; line-height: 60px; }
#Outstanding.eng .card > .title { line-height: 40px; font-family:  微軟正黑體, 'Microsoft JhengHei',Arial; }
#Outstanding .card > table.content { width: 100%; border-collapse: collapse; }
#Outstanding .card > table.content > thead > tr > td { font-size: 30px; padding: 5px 0px; }
#Outstanding.eng .card > table.content > thead > tr > td { font-size: 28px; padding: 12px 0px; }
#Outstanding.large .card > table.content > thead > tr > td { font-size: 32px; padding: 4px 0px; }
#Outstanding.large.eng .card > table.content > thead > tr > td { font-size: 29px; padding: 9px 0px; }
#Outstanding .card > table.content > thead > tr > td.col1 { width: 40%; padding-left: 30px; }
#Outstanding .card > table.content > thead > tr > td.col2 { width: 30%; padding-right: 30px; }
#Outstanding .card > table.content > thead > tr > td.col3 { width: 30%; padding-right: 30px; }
#Outstanding.eng .card > table.content > thead > tr > td.col1 { width: 46%; padding-left: 30px; }
#Outstanding.eng .card > table.content > thead > tr > td.col2 { width: 27%; padding-right: 30px; }
#Outstanding.eng .card > table.content > thead > tr > td.col3 { width: 27%; padding-right: 30px; }
#Outstanding .card > table.content > tbody > tr > td { font-size: 30px; padding: 10px 0px; }
#Outstanding.eng .card > table.content > tbody > tr > td { font-size: 28px; padding: 12px 0px; }
#Outstanding.large .card > table.content > tbody > tr > td { font-size: 35px; padding: 7px 0px; }
#Outstanding.large.eng .card > table.content > tbody > tr > td { font-size: 34px; padding: 9px 0px; }
#Outstanding .card > table.content > tbody > tr > td.col1 { padding-left: 30px; }
#Outstanding .card > table.content > tbody > tr > td.col2 { padding-right: 30px; }
#Outstanding .card > table.content > tbody > tr > td.col3 { padding-right: 30px; }
#Outstanding.eng .card > table.content > tbody > tr > td.col1 { padding-left: 30px; }
#Outstanding.eng .card > table.content > tbody > tr > td.col2 { padding-right: 30px; }
#Outstanding.eng .card > table.content > tbody > tr > td.col3 { padding-right: 30px; }

#HistPerform { padding: 0px 8px; }
#HistPerform.eng { font-family: Arial; }
#HistPerform .font-num { font-family: Arial; letter-spacing: 0; }
#HistPerform .card { padding: 10px; border-radius: 15px; margin-top: 15px; }
#HistPerform .card > .title { font-size: 32px; line-height: 42px; font-weight: bold; margin-top: 10px; margin-bottom: 10px; position:relative }
#HistPerform.eng .card > .title { font-family:  微軟正黑體, 'Microsoft JhengHei',Arial; }
#HistPerform .card > .title > .lastUpdate { float: right; font-size: 18px; height: 40px; line-height: 60px; }
#HistPerform .card > table.content { width: 100%; border-collapse: collapse; }
#HistPerform .card > table.content > thead > tr > td { font-size: 30px; padding: 5px; }
#HistPerform.eng .card > table.content > thead > tr > td { font-size: 28px; padding: 9px; }
#HistPerform.large .card > table.content > thead > tr > td { font-size: 32px; padding: 4px; }
#HistPerform.large.eng .card > table.content > thead > tr > td { font-size: 33px; padding: 8px; }
#HistPerform .card > table.content > thead > tr > td.col1 { width: 25%; padding-left: 30px; }
#HistPerform .card > table.content > thead > tr > td.col2 { width: 50%; padding-right: 30px; }
#HistPerform .card > table.content > thead > tr > td.col3 { width: 25%; padding-right: 30px; }
#HistPerform.eng .card > table.content > thead > tr > td.col1 { width: 25%; padding-left: 30px; }
#HistPerform.eng .card > table.content > thead > tr > td.col2 { width: 50%; padding-right: 30px; }
#HistPerform.eng .card > table.content > thead > tr > td.col3 { width: 25%; padding-right: 30px; }
#HistPerform .card > table.content > tbody > tr > td { font-size: 30px; padding: 10px; }
#HistPerform.eng .card > table.content > tbody > tr > td { font-size: 28px; padding: 15px; }
#HistPerform.large .card > table.content > tbody > tr > td { font-size: 34px; padding: 7px; }
#HistPerform.large.eng .card > table.content > tbody > tr > td { font-size: 32px; padding: 12px; }
#HistPerform .card > table.content > tbody > tr > td.col1 { padding-left: 30px; }
#HistPerform .card > table.content > tbody > tr > td.col2 { padding-right: 30px; }
#HistPerform .card > table.content > tbody > tr > td.col3 { padding-right: 30px; }
#HistPerform.eng .card > table.content > tbody > tr > td.col1 { padding-left: 30px; }
#HistPerform.eng .card > table.content > tbody > tr > td.col2 { padding-right: 30px; }
#HistPerform.eng .card > table.content > tbody > tr > td.col3 { padding-right: 30px; }
#HistPerform .card #containerCYP { width: 100%; height: 350px; }
#HistPerform .card .chartTitle {display: inline-block;}

#HistPerform .card .title .infoIcon.iconLeft {position: relative; bottom:-10px;}
#HistPerform .card .title .detailLink {font-size: 26px;height: 40px;}
#HistPerform .chart_normalIcon { background:#50B8C4; display:inline-block; width:26px; height:26px; float:left; padding:0 1px; margin-right: 0px; position:relative; border-radius:3px; }
#HistPerform .chart_specialIcon { background:#ADE0E6; display:inline-block; width:26px; height:26px; float:left; padding:0 1px; margin-right: 0px; position:relative; border-radius:3px; }
#HistPerform .chart_ratioIcon { background:#F5C123; display:inline-block; width:26px; height:6px; float:left; padding:0 1px; margin-right: 0px; position:relative; }
#HistPerform .chart_normalIcon::after { content: "普"; color:#ffffff; font-size:22px; font-weight:normal; position:absolute; top:-3px; left:2px;}
#HistPerform .chart_specialIcon::after { content: "特"; color:#598D8A; font-size:22px; font-weight:normal; position:absolute; top:-3px; left:2px;}
#HistPerform .chart_ratioIcon::after { content: ""; background:#F5C123; position:absolute; width:16px; height:16px; top:-5px; left:6px; display:inline-block; border-radius:8px; }
#HistPerform.eng .chart_normalIcon {line-height: 33px; }
#HistPerform.eng .chart_normalIcon::after { content: "D"; left: 6px;}
#HistPerform.eng .chart_specialIcon {font-size: 22px;line-height: 30px;letter-spacing: 0;width: 33px;}
#HistPerform.eng .chart_specialIcon::after { content: "SD";}


#Crypto { padding: 0px 0px 20px 0px; }
#Crypto .panel { padding: 0px 8px; }
#Crypto.eng { font-family: Arial; }
#Crypto .font-num { font-family: Arial; letter-spacing: 0; }
#Crypto .font-eng { font-family: Arial; }
#Crypto .quote { padding: 10px 8px 0px 8px; }
#Crypto .quote > table { width: 100%; }
#Crypto .quote > table th { height: 70px; vertical-align: top; text-align: left; }
#Crypto .quote > table td { font-size: 28px; white-space: nowrap; position: relative; }
#Crypto .quote > table td.col1 { width: 58%; vertical-align: top; }
#Crypto .quote > table td.col2 { width: 42%; height: 40px; }
#Crypto .quote .ct-logo { width: 52px; height: 52px; margin-bottom: -7px; margin-right: 5px; }
#Crypto .quote .ct-desp { font-size: 48px; display: inline-block; font-weight: bold; margin-right: 5px; }
#Crypto .quote .ct-symbol { font-size: 32px; display: inline-block; font-weight: normal; }
#Crypto .quote .ct-last-label { font-size: 28px; margin-bottom: 10px; }
#Crypto .quote .ct-lastupdate { font-size: 24px; margin-bottom: 10px; font-family: 微軟正黑體, 'Microsoft JhengHei',Arial; position: absolute; top: 0px; right: 0px; }
#Crypto .quote .ct-last { font-size: 68px; text-align: right; margin-right: 25px; position: relative; }
#Crypto .quote .ct-last span::after { content: ''; position: absolute; top: 20px; left: 0px; background-size: 100%; background-repeat: no-repeat; width: 46px; height: 52px;  }
#Crypto .quote .ct-change { font-size: 40px; text-align: right; margin-right: 25px; }
#Crypto .quote .ct-value { font-size: 44px; line-height: 40px; }
#Crypto .quote .ct-chart { width: 100%; height: 350px; }
#Crypto .quote .ct-chart > iframe { width: 100%; height: 100%; border: 0px; margin-top:10px; }
#Crypto .card { padding: 10px; border-radius: 15px; margin-top: 15px; }
#Crypto .card > .title { font-size: 32px; line-height: 42px; font-weight: bold; margin-top: 10px; margin-bottom: 10px; }
#Crypto.eng .card > .title { font-family: 微軟正黑體, 'Microsoft JhengHei',Arial; }
#Crypto .card > .title > .lastUpdate { float: right; font-size: 24px; height: 40px; line-height: 60px; font-weight: normal; }
#Crypto .card > table.content { width: 100%; border-collapse: collapse; }
#Crypto .card > table.content > thead > tr > td { font-size: 30px; padding: 5px; }
#Crypto.eng .card > table.content > thead > tr > td { font-size: 28px; padding: 9px; }
#Crypto.large .card > table.content > thead > tr > td { font-size: 32px; padding: 4px; }
#Crypto.large.eng .card > table.content > thead > tr > td { font-size: 33px; padding: 8px; }
#Crypto .card > table.content > thead > tr > td.col1 { width: 25%; padding-left: 30px; }
#Crypto .card > table.content > thead > tr > td.col2 { width: 50%; padding-right: 30px; }
#Crypto .card > table.content > thead > tr > td.col3 { width: 25%; padding-right: 30px; }
#Crypto.eng .card > table.content > thead > tr > td.col1 { width: 25%; padding-left: 30px; }
#Crypto.eng .card > table.content > thead > tr > td.col2 { width: 50%; padding-right: 30px; }
#Crypto.eng .card > table.content > thead > tr > td.col3 { width: 25%; padding-right: 30px; }
#Crypto .card > table.content > tbody > tr > td { font-size: 30px; padding: 10px; }
#Crypto.eng .card > table.content > tbody > tr > td { font-size: 28px; padding: 15px; }
#Crypto.large .card > table.content > tbody > tr > td { font-size: 34px; padding: 7px; }
#Crypto.large.eng .card > table.content > tbody > tr > td { font-size: 32px; padding: 12px; }
#Crypto .card > table.content > tbody > tr > td.col1 { padding-left: 30px; }
#Crypto .card > table.content > tbody > tr > td.col2 { padding-right: 30px; }
#Crypto .card > table.content > tbody > tr > td.col3 { padding-right: 30px; }
#Crypto.eng .card > table.content > tbody > tr > td.col1 { padding-left: 30px; }
#Crypto.eng .card > table.content > tbody > tr > td.col2 { padding-right: 30px; }
#Crypto.eng .card > table.content > tbody > tr > td.col3 { padding-right: 30px; }
#Crypto .card #containerCYP { width: 100%; height: 350px; }
#Crypto .remark { font-size: 24px; margin-top: 10px; }
#Crypto .remark a { font-size: 28px; font-weight: bold; position: relative; padding-left: 5px; padding-right: 20px; }
#Crypto .remark a::after { content: ''; position: absolute; top: 5px; right: 0px; width: 0px; height: 0px; border-style: solid; border-left-width: 12px; border-top-width: 11px; border-bottom-width: 11px; border-right-width: 0px; }


#IndDtl { padding: 0px 0px 20px 0px; }
#IndDtl .panel { padding: 0px 8px; }
#IndDtl.eng { font-family: Arial; }
#IndDtl .font-num { font-family: Arial; letter-spacing: 0; }
#IndDtl .font-eng { font-family: Arial; }
#IndDtl .quote { padding: 10px 8px 0px 8px; }
#IndDtl .quote > table { width: 100%; }
#IndDtl .quote > table th { height: 70px; vertical-align: top; text-align: left; }
#IndDtl .quote > table td { font-size: 28px; white-space: nowrap; position: relative; }
#IndDtl .quote > table td.col1 { width: 58%; vertical-align: top; }
#IndDtl .quote > table td.col2 { width: 42%; height: 40px; }
#IndDtl .quote .ct-logo { width: 52px; height: 52px; margin-bottom: -7px; margin-right: 5px; }
#IndDtl .quote .ct-desp { font-size: 48px; display: inline-block; font-weight: bold; margin-right: 5px; }
#IndDtl .quote .ct-symbol { font-size: 32px; display: inline-block; font-weight: normal; }
#IndDtl .quote .ct-last-label { font-size: 28px; margin-bottom: 10px; }
#IndDtl .quote .ct-lastupdate { font-size: 24px; margin-bottom: 10px; font-family: 微軟正黑體, 'Microsoft JhengHei',Arial; position: absolute; top: 0px; right: 0px; }
#IndDtl .quote .ct-last { font-size: 68px; text-align: left; margin-right: 25px; position: relative; }
#IndDtl .quote .ct-last span::after { content: ''; position: absolute; top: 20px; left: 0px; background-size: 100%; background-repeat: no-repeat; width: 46px; height: 52px;  }
#IndDtl .quote .ct-change { font-size: 40px; text-align: left; margin-right: 25px; }
#IndDtl .quote .ct-value { font-size: 44px; line-height: 40px; }
#IndDtl .quote .ct-chart { width: 100%; height: 350px; }
#IndDtl .quote .ct-chart > iframe { width: 100%; height: 100%; border: 0px; margin-top:10px; }
#IndDtl .card { padding: 10px; border-radius: 15px; margin-top: 15px; }
#IndDtl .card > .title { font-size: 32px; line-height: 42px; font-weight: bold; margin-top: 10px; margin-bottom: 10px; }
#IndDtl.eng .card > .title { font-family: 微軟正黑體, 'Microsoft JhengHei',Arial; }
#IndDtl .card > .title > .lastUpdate { float: right; font-size: 24px; height: 40px; line-height: 60px; font-weight: normal; }
#IndDtl .card > table.content { width: 100%; border-collapse: collapse; }
#IndDtl .card > table.content > thead > tr > td { font-size: 30px; padding: 5px; }
#IndDtl.eng .card > table.content > thead > tr > td { font-size: 28px; padding: 9px; }
#IndDtl.large .card > table.content > thead > tr > td { font-size: 32px; padding: 4px; }
#IndDtl.large.eng .card > table.content > thead > tr > td { font-size: 33px; padding: 8px; }
#IndDtl .card > table.content > thead > tr > td.col1 { width: 25%; padding-left: 30px; }
#IndDtl .card > table.content > thead > tr > td.col2 { width: 50%; padding-right: 30px; }
#IndDtl .card > table.content > thead > tr > td.col3 { width: 25%; padding-right: 30px; }
#IndDtl.eng .card > table.content > thead > tr > td.col1 { width: 25%; padding-left: 30px; }
#IndDtl.eng .card > table.content > thead > tr > td.col2 { width: 50%; padding-right: 30px; }
#IndDtl.eng .card > table.content > thead > tr > td.col3 { width: 25%; padding-right: 30px; }
#IndDtl .card > table.content > tbody > tr > td { font-size: 30px; padding: 10px; }
#IndDtl.eng .card > table.content > tbody > tr > td { font-size: 28px; padding: 15px; }
#IndDtl.large .card > table.content > tbody > tr > td { font-size: 34px; padding: 7px; }
#IndDtl.large.eng .card > table.content > tbody > tr > td { font-size: 32px; padding: 12px; }
#IndDtl .card > table.content > tbody > tr > td.col1 { padding-left: 30px; }
#IndDtl .card > table.content > tbody > tr > td.col2 { padding-right: 30px; }
#IndDtl .card > table.content > tbody > tr > td.col3 { padding-right: 30px; }
#IndDtl.eng .card > table.content > tbody > tr > td.col1 { padding-left: 30px; }
#IndDtl.eng .card > table.content > tbody > tr > td.col2 { padding-right: 30px; }
#IndDtl.eng .card > table.content > tbody > tr > td.col3 { padding-right: 30px; }
#IndDtl .card #containerCYP { width: 100%; height: 350px; }
#IndDtl .menu { display:inline-block; background-size:100%; width:50px; height:50px; position:absolute; left:0px; top:9px; }
#IndDtl .cb-std { width:100px; height:50px; border-radius:25px; position:relative; display:inline-block; }
#IndDtl .cb-std::after { content:""; position:absolute; width:40px; height:40px; top:5px; left:5px; border-radius:20px; }
#IndDtl .mask { position: fixed; top: 0px; left: 0px; width: 100%; height: 100%; background: #999; z-index: 998; opacity:0.3; display:block; }
#IndDtl .card-popup { width:80%; background:white; border-radius:10px; z-index: 999; text-align:center; position:fixed; top:250px; left:10%; padding:15px; }
#IndDtl .card-popup .title { font-size:40px; }
#IndDtl .card-popup .content { font-size:30px; margin-top:50px; }
#IndDtl .card-popup .center { margin-top:50px; margin-bottom:20px; }
#IndDtl .card-popup .btnWhite { font-size:30px; height:40px; line-height:40px; border:solid 1px #CDCDCD; border-radius:20px; color:#CDCDCD; display:inline-block; padding:0px 20px; min-width:35%; }
#IndDtl .card-popup .btnBlue { font-size:30px; height:40px; line-height:40px; border:solid 1px #2387E2; background:#2387E2; border-radius:20px; color:#fff; display:inline-block; padding:0px 20px; min-width:35%; margin-left:20px; }