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

body{width:100%; margin:0px; padding:0px; height:100%; -webkit-text-size-adjust:100%; -webkit-font-smoothing:antialiased; font-family:Helvetica,Arial, '微軟正黑體','Microsoft JhengHei', MingLiU_HKSCS, sans-serif; scrollbar-face-color: rgba(255,255,255,0); background-color:#FFFFFF; font-weight:normal;}
*{box-sizing:border-box; background-size:300px; background-repeat:no-repeat; margin:0px; padding:0px; -webkit-overflow-scrolling:touch;}
a{color:#000000; text-decoration:none;}
a:hover{color:#666666;}
.date{font-size:11px; color:#000000; display:inline-block; margin:0px 0px 0px 5px; vertical-align:middle;}
h1{font-weight:300; line-height:120%;}
.Category{font-size:15px; color:#000000; margin:0px; font-weight:300;}
.Category a{color:#000000; display:inline-block; vertical-align:top;}
img{border:0;}

/*image buffering handle*/
img.not_displayed {width: 25px !important; height: 25px !important; top: 35% !important; position: relative !important;}
.Thumbnail img.not_displayed {width: 25px !important; height: 25px !important; top: 35% !important; position: relative !important;}

#Nav a{display: inline-block; width: 100%; height: 100%;}


/* Grid */
#Container{width:100%; margin:0px; padding:0px; min-width:320px;}
#ContentWrapper{display:flex; flex-wrap: wrap;}
#ContentWrapper, #Segment, #Pagination{width:calc(100% - 16px); max-width:1200px; margin:auto; padding:0px; font-size:0px;}
h5{font-size:30px; line-height:120%; margin:30px 8px 0px 8px; color:#FFFFFF; ; display:block; width:calc(100% - 16px);}
h5 a, h5 a:hover{color:#FFFFFF;}
.RowA, .RowB, .RowC, .Adv{list-style:none; min-height:300px; margin:8px; padding:0px; font-size:0px; overflow:hidden; background-color:#FFFFFF; vertical-align:top; display:inline-block; position:relative; -webkit-box-shadow:0px 0px 10px 0px rgba(0,0,0,0.3); box-shadow:0px 0px 10px 0px rgba(0,0,0,0.3);}
.RowD{list-style:none; min-height:250px; margin:8px; padding:0px; font-size:0px; vertical-align:top; display:inline-block; position:relative;}
.RowB,.RowC {min-height:300px};
.RowA li, .RowB li, .RowC li, .RowD li, .Adv li{overflow:hidden; display:inline-block; vertical-align:top;}
.RowA{width:calc(100% - 16px);}
.RowB{width:calc(50% - 16px);}
.RowC{width:calc(33.3333333% - 16px);}
.RowD{width:calc(66.6666666% - 16px);}
h1{font-size:24px; ;}
.RowA h1{font-size:30px; ;}
.RowA h1, .RowA .Abstract{padding-top:18px;}
.RowB h1, .RowB .Abstract{padding-top:14px;}
.RowC h1, .RowC .Abstract, .RowD h1, .RowD .Abstract{padding-top:10px;}
.Thumbnail, .Text{display:inline-block;}
.Thumbnail img{margin:0px; position:absolute; top:20%; left:50%; margin-right:-50%; transform:translate(-50%,-20%); -ms-transform:translate(-50%,-20%); -webkit-transform:translate(-50%,-20%); -moz-transform:translate(-50%,-20%); -o-transform:translate(-50%,-20%); border:0px; width:100%;}
.Author img{width:100%; height:100%; position:absolute; top:0px; left:0px;}
.ColumnStyle li.Author{padding:0px; width:80px; height:80px; line-height:0px;}
.Text{padding:15px; width:100%;}

/* Header */
#Header{width:100%; height:48px; background-color:#FFFFFF; background-color:rgba(255,255,255,0.9); border-bottom:1px solid #000000; z-index:9998; -moz-box-shadow:0px 0px 8px 0px rgba(0,0,0,0.5); -webkit-box-shadow:0px 0px 8px 0px rgba(0,0,0,0.5); box-shadow:0px 0px 8px 0px rgba(0,0,0,0.5); position:fixed; top:0px; left:0px;}
#Header #HdrContainer{width:100%; max-width:1016px; position:relative; margin:auto; height:42px;}
#Header #HdrContainer #TopLogo{width:65px; height:38px; margin:5px; overflow:hidden; position:absolute; top:0px; left:0px;}
#Header #HdrContainer #TopLogo img{width:100%;}
#Header #HdrContainer #Nav{position:absolute; top:0px; right:0px; list-style:none; margin:0px; padding:0px; display:block; font-size:0px;}
#Header #HdrContainer #Nav li{list-style:none; margin:0px; padding:0px 10px; display:inline-block; height:48px; font-size:15px; ; word-spacing:-1px; line-height:48px; cursor:pointer;}
#Header #HdrContainer #Menu{position:absolute; top:0px; right:0px; width:48px; height:48px; background-color:#000000; background-image:url(../../../../common/images/supplement/menu.png); background-repeat:no-repeat; background-position:center center; background-size:48px; display:none; cursor:pointer; z-index:9999;}

/* Lead */
#Lead{position:relative; overflow:hidden; width:100%; min-width:320px; margin:0px auto; padding:0px; font-size:0px;  background-size:1px !important;}
#LeadMainImg{width:100%; height:568px;  background-image: url(../images/mainimg.jpg?v=2); background-repeat:no-repeat; background-size:cover; background-position:center top;}
#LeadWrapper{width:100%; max-width:1200px; position:absolute; z-index:3; font-size:0px; top:100px; margin:0px; padding:0px;}
#LeadHeader{width:450px;}
#LeadHeader2{width:450px; display:none;}
#LeadHeader img, #LeadHeader2 img{width:100%;}
#LeadBox{width:98%; border-left:4px solid #000000; padding:0px 30px; margin:96px auto 30px auto;}
#LeadBox p{margin:16px 0px; font-size:20px; line-height:120%;}
#Lead.SmallHeader{background-image:url(../../../../common/images/supplement/leadbg2.jpg);}
#Lead.SmallHeader #LeadMainImg{width:100%; height:350px !important;  background-image: url(../images/mainimg.jpg); background-repeat:no-repeat; background-size:auto 100%; background-position:center top;}
#Lead.SmallHeader #LeadHeader{display:none;}
#Lead.SmallHeader #LeadHeader2{display:block;}

/* Segment */
#Segment{display:table; table-layout:fixed; border-spacing:0px; border-collapse:collapse; margin:20px auto; width:calc(100% - 16px);}
#Segment li{display:table-cell; line-height:120%; font-size:22px; text-align:center; vertical-align:middle; color:#999999; background-color:transparent; cursor:pointer; border:1px solid #d5d5d5;}
#Segment li a{display:inline-block; cursor:pointer; width:100%; color:#999999; padding:15px 5px;}
#Segment li span{display:block; text-align:center;}
.Remark {padding: 0 5px; color: #666; font-size: 12px;}
.CommentSymbol {background-size: auto; height: 16px;background-image: url(/www/tc/diva/images/divaimg.png); background-position: -148px -2103px; background-repeat: no-repeat; font-size: 11px; color: #000; text-indent: 26px;		vertical-align:middle;line-height: 140%; display: inline-block;}
#Segment li.selected{background-color:#000000; color:#FFFFFF; cursor:default; -webkit-box-shadow:0px 5px 8px 0px rgba(0,0,0,0.3); box-shadow:0px 5px 8px 0px rgba(0,0,0,0.3);}
#Segment li.selected a, #Segment li.selected a span{color:#FFFFFF;}

/* Voting */
.RowA.VotingStyle{-moz-box-shadow:0px 0px 0px 0px rgba(0,0,0,0.0); -webkit-box-shadow:0px 0px 0px 0px rgba(0,0,0,0.0); box-shadow:0px 0px 0px 0px rgba(0,0,0,0.0);}
.VotingStyle{margin-bottom:30px; padding:2%; min-height:none; height:auto !important;}
.VotingStyle .Chart{width:100%; padding:0px 15px; list-style:none; font-size:0px;}
.VotingStyle .Chart li{display:inline-block; vertical-align:top;}
.VotingStyle .Chart li:nth-child(odd){width:180px; height:26px; line-height:26px; font-size:13px; text-align:right; border-right:1px solid #666666; padding-right:5px;}
.VotingStyle .Chart li:nth-child(even){width:calc(100% - 180px); height:26px;}
.VotingStyle .Chart li div{height:22px; font-size:10px; color:#333333; overflow:visible; margin:1px 0px; text-align:right; line-height:22px; border:1px solid #FFFFFF; border-left:0px; -moz-box-shadow:2px 0px 8px 0px rgba(0,0,0,0.2); -webkit-box-shadow:2px 0px 8px 0px rgba(0,0,0,0.2); box-shadow:2px 0px 8px 0px rgba(0,0,0,0.2);display:inline-block;}
.VotingStyle .Chart li div:nth-child(2){border:0;box-shadow:none;}
.VotingStyle .Chart li div::before, .VotingStyle .Chart li div::after{content:"\00a0\00a0";}
.VotingStyle .Chart li:nth-child(2) div:first-child{background-color:#18cfd6;}
.VotingStyle .Chart li:nth-child(4) div:first-child{background-color:#ef4d79;}
.VotingStyle .Chart li:nth-child(6) div:first-child{background-color:#bfc63b;}
.VotingStyle .Chart li:nth-child(8) div:first-child{background-color:#534c0d;}
.VotingStyle .Chart li:nth-child(10) div:first-child{background-color:#d58a58;}
.VotingStyle .Chart li:nth-child(12) div:first-child{background-color:#f26522;}
.VotingStyle .Chart li:nth-child(14) div:first-child{background-color:#2574a9;}
.VotingStyle .Chart li:nth-child(16) div:first-child{background-color:#26a65b;}
.VotingStyle .Chart li:nth-child(18) div:first-child{background-color:#f62459;}
.VotingStyle .Chart li:nth-child(20) div:first-child{background-color:#9b59b6;}
.VotingStyle .Chart li:nth-child(22) div:first-child{background-color:#34495e;}
.VotingStyle h5{font-size:21px; color:#ef4d79; margin:0px; padding:0px; font-weight:300;}
.VotingStyle .Btn{margin:18px; cursor:pointer; display:inline-block; border:1px solid #FFFFFF; font-size:18px; color:#FFFFFF; padding:5px 10px; -moz-box-shadow:2px 0px 8px 0px rgba(0,0,0,0.2); -webkit-box-shadow:2px 0px 8px 0px rgba(0,0,0,0.2); box-shadow:2px 0px 8px 0px rgba(0,0,0,0.2);}
.VotingStyle h5 a{font-size:21px; color:#ef4d79; font-weight:normal;}
.VotingStyle .VotingBtn{background-color:#ef4d79;}
.VotingStyle .CommentBtn{background-color:#18cfd6; margin-left:-10px;}
.VotingStyle li.Text{height:auto; width:auto;}
.VotingStyle.Previous{ -moz-box-shadow:2px 0px 8px 0px rgba(0,0,0,0.0); -webkit-box-shadow:2px 0px 8px 0px rgba(0,0,0,0.2) !important; box-shadow:2px 0px 8px 0px rgba(0,0,0,0.0) !important; background-color:#f6f6f6;}

.VotingStyle.Comment{-webkit-box-shadow:2px 0px 8px 0px rgba(0,0,0,0.2) !important; box-shadow:2px 0px 8px 0px rgba(0,0,0,0.0) !important; background-image:url(../../../../common/images/supplement/bubble.gif); background-size:100px; background-position:top left; font-size:0px;}
.VotingStyle.Comment li{width:31%; display:inline-block; margin:1%; border-bottom:1px solid #d5d5d5; padding:12px 22px; -moz-box-shadow:2px 0px 8px 0px rgba(0,0,0,0.2); -webkit-box-shadow:2px 0px 8px 0px rgba(0,0,0,0.2); box-shadow:2px 0px 8px 0px rgba(0,0,0,0.2);}
.VotingStyle.Comment li:first-child{border-bottom:none;}
.VotingStyle.Comment p{margin:8px 0px;}
.VotingStyle.Comment p.UserName{font-size:18px; color:#167ca2;cursor:pointer;}
.VotingStyle.Comment p.Msg{font-size:18px; color:#000000; padding-top:3%;}
.VotingStyle.Comment span.Date{color:#999999; font-size:12px; display:block;}
.VotingStyle.Comment li.CommentHdr{font-size:40px; -moz-box-shadow:0px 0px 0px 0px rgba(0,0,0,0.0); -webkit-box-shadow:0px 0px 0px 0px rgba(0,0,0,0.0); box-shadow:0px 0px 0px 0px rgba(0,0,0,0.0); width:100% !important; display:block; padding:0px;}
.HighlightMoreButton li.MoreComment, .VotingStyle.Comment li.MoreComment{text-align:center;border:0;}
.HighlightMoreButton li.MoreComment span, .VotingStyle.Comment li.MoreComment span{width:150px; background-color: #000000; color: #FFFFFF; cursor: default; -webkit-box-shadow: 0px 5px 8px 0px rgba(0,0,0,0.3); box-shadow: 0px 5px 8px 0px rgba(0,0,0,0.3); padding: 10px 5px; line-height: 120%; font-size: 22px; text-align: center; vertical-align: middle; border: 1px solid #eaeaea;display: inline-block;cursor:pointer;}

/* Highlight Button */
.HighlightMoreButton {text-align: center;}
.HighlightMoreButton li.MoreComment{display: inline-block;}
.HighlightMoreButton li.MoreComment span{margin:10px 10px;}

/* List */
#ListContainer, #ListDetails{display:block; width:calc(100% - 16px); padding:0px; position:relative; font-size:0px; background-color:#FFF; list-style:none; -webkit-box-shadow: 0px -8px 8px 0px rgba(0,0,0,0.1); box-shadow: 0px -8px 8px 0px rgba(0,0,0,0.1);}
#ListContainer{margin:0% auto;}
#ListDetails{margin:0% auto 6% auto;}
#ListContainer > li{display:inline-block; vertical-align:top; width:25%; padding:2% 0% 100px 0%; border-left:1px solid #FFFFFF; position:relative; cursor:pointer;}
#ListContainer > li.GroupA, .GroupContainer.Group0 > li{background-color:#E9D460;}
#ListContainer > li.GroupB, .GroupContainer.Group1 > li{background-color:#F5AB35;}
#ListContainer > li.GroupC, .GroupContainer.Group2 > li{background-color:#E87E04;}
#ListContainer > li.GroupD, .GroupContainer.Group3 > li{background-color:#D35400;}
#ListContainer > li p{padding:2%; text-align:center; font-size:30px; font-weight:300;}
#ListContainer > li p:first-child{font-size:22px;}
#ListContainer > li p span{display:inline-block;}
#ListContainer .More{position:absolute; bottom:10px; font-size:14px; width:100%; color:#FFFFFF;}
#ListContainer .More span{font-size:16px; line-height:18px; width:100%; display:block; text-align:center;}
#ListContainer .More span img{width:25px;}
.GroupContainer{width:100%; padding:0px; position:relative; font-size:0px; list-style:none; display:none; background-color:#eaeaea;}
.GroupContainer > li{display:inline-block; vertical-align:top; width:12.5%; padding:2% 0%; position:relative; border-left:1px solid #FFFFFF; border-top:1px solid #FFFFFF;}
.GroupContainer > li p{padding:2%; text-align:center; font-size:16px;}

.SectionTitle{width:100%; max-width:1180px; margin:80px auto 30px auto; border-bottom:1px solid #d5d5d5; padding:0px; }
.SectionTitle span{font-size:24px; line-height:150%; border-bottom:3px solid #333333; margin:0px;}

/* Stock */
.StocksWrapper, .IndexWrapper{list-style:none; width:calc(100% - 8px); font-size:0px; margin:8px; margin-right:0px !important; padding:0px; display:-webkit-flex; display:flex; -webkit-flex-direction:row; flex-direction:row; -webkit-flex-wrap:wrap; flex-wrap:wrap; -webkit-justify-content:flex-start; justify-content:flex-start; -webkit-align-content:flex-start; align-content:flex-start; -webkit-align-items:stretch; align-items:stretch;}
.StocksWrapper > li, .IndexWrapper li{-webkit-box-shadow:0px 0px 5px 0px rgba(0,0,0,0.3); box-shadow:0px 0px 5px 0px rgba(0,0,0,0.3); font-size:0px; -webkit-align-self:auto;  align-self:auto; padding:12px; margin-left:0.5%;}
.StocksWrapper > li{width:16%; background-color:#FFFFFF; margin-bottom:8px;}
.StocksWrapper > li  > p{margin:2px 0px; line-height:110%;}
.StocksWrapper > li  > p.Code{font-size:22px;}
.StocksWrapper > li  > p.Name{font-size:17px; font-weight:300;}
.StocksWrapper > li  > p.Nominal{font-size:24px; margin-top:8px; font-weight:bold;}
.StocksWrapper > li  > p.Nominal.Up, .StocksWrapper > li  > p.Nominal.Down{padding-left:20px; background-size:12px; background-repeat:no-repeat; background-position:left center;}
.StocksWrapper > li  > p.Nominal.Up{background-image:url(../../../../common/images/supplement/up_1.png); color:#009900;}
.StocksWrapper > li  > p.Nominal.Down{background-image:url(../../../../common/images/supplement/down_1.png); color:#FF0000;}
.StocksWrapper > li  > p.Change, .StocksWrapper > li  > p.Turnover, .StocksWrapper > li  > p.AName, .StocksWrapper > li  > p.Premium{font-size:14px; word-spacing:4px;}
.StocksWrapper > li  > p.AName{margin-top:12%;}
.StocksWrapper > li.More{background-color:#ebf7fe; position:relative;}
.StocksWrapper > li.More  > p{font-size:32px; color:#0388d0; font-weight:300; display:inline-block; position:absolute; bottom:12px;}
.StocksWrapper > li.More  > p a{color:#0388d0;}
.StocksWrapper > li.More  > p::after{content:"\232A"; color:#0388d0; font-weight:300;}
.IndexWrapper > li{width:32%; margin-top:16px; margin-left:1.35%;}
.IndexWrapper > li:first-child{margin-left:0.5%;}
.IndexWrapper > li > div{display:block; width:100%;}
.IndexWrapper > li > div.Chart{margin:8px 0px 3% 0px;}
.IndexWrapper > li > div.Chart img{width:100%; max-height:206px;}
.IndexWrapper > li > div.Info{margin-top:3%;}
.IndexWrapper > li > div.Info > p{margin:2px 0px; line-height:120%; color:#000000;}
.IndexWrapper > li > div.Info > p.Name{font-size:24px;}
.IndexWrapper > li > div.Info > p.Nominal{font-size:36px;}
.IndexWrapper > li > div.Info > p.Change, .IndexWrapper > li > div.Info > p.Turnover{font-size:20px;}
.IndexWrapper > li > div.Info > p.Nominal.Up, .IndexWrapper > li > div.Info > p.Nominal.Down{padding-left:25px; background-size:12px; background-repeat:no-repeat; background-position:left center;}
/*Default Up/Down Color */
.IndexWrapper > li > div.Info > p.Nominal.Up{background-image:url(../../../../common/images/supplement/up_1.png); color:#009900;}
.IndexWrapper > li > div.Info > p.Nominal.Down{background-image:url(../../../../common/images/supplement/down_1.png); color:#FF0000;}
/*Alterative Up/Down Color
.IndexWrapper > li > div.Info > p.Nominal.Up{background-image:url(../../../../common/images/supplement/up_2.png); color:#FF0000;}
.IndexWrapper > li > div.Info > p.Nominal.Down{background-image:url(../../../../common/images/supplement/down_2.png); color:#009900;}
 */

/*TableList */
.TableWrapper{list-style:none; width:calc(100% - 16px); font-size:0px; margin:20px 8px; padding:0px; display:-webkit-flex; display:flex; -webkit-flex-direction:row; flex-direction:row; -webkit-flex-wrap:wrap; flex-wrap:wrap; -webkit-justify-content:flex-start; justify-content:flex-start; -webkit-align-content:flex-start; align-content:flex-start; -webkit-align-items:stretch; align-items:stretch;}
.TableWrapper.North > li:nth-child(3n+1){background-color:#efecf9;}
.TableWrapper.North li{background-color:#d9d1f1;}
.TableWrapper.North .Title, .TableWrapper.North .Direction{border-bottom:1px solid #8c84af; color:#6f0b98;}
.TableWrapper.South > li:nth-child(3n+1){background-color:#e3f1e2;}
.TableWrapper.South li{background-color:#caefc6;}
.TableWrapper.South .Title, .TableWrapper.South .Direction{border-bottom:1px solid #68c197; color:#0e6e40;}
.TableWrapper.South{padding-bottom:30px;}
.TableWrapper > li{width:calc(38% - 2px); font-size:20px; -webkit-align-self:auto; align-self:auto; padding:12px; margin:1px;}
.TableWrapper > li p{padding:3% 0px 1.5% 0px; line-height:115%;}
.TableWrapper > li p:first-child{display:none; font-size:15px; margin-bottom:3%; color:#666666;}
.TableWrapper > li p:first-child::after{content:"︰";}
.TableWrapper > li:nth-child(3n+1){width:calc(24% - 2px); color:#666666;}
.TableWrapper .Heading{background-color:transparent !important; color:#2276b7; font-size:32px; line-height:35px; font-weight:300; text-align:center; padding-bottom:0px;}
.TableWrapper .Title{background-color:transparent !important; color:#000000; font-size:26px; line-height:28px; font-weight:300; text-align:center;}
.TableWrapper .Direction{background-color:transparent !important; font-size:26px; line-height:28px; font-weight:bold;}
.TableWrapper .StartDate{text-align:center;}
.TableWrapper .Time{padding-top:0px; margn-top:0px;}
.TableWrapper .Time span{display:inline-block;}

/* Big Highlight */
.RowA .Thumbnail, .RowA .Text{width:50%; height:300px; overflow:hidden; font-size:0px; vertical-align:top; margin:0px;}
.RowA .Thumbnail{padding:0px;}
.RowA .Thumbnail{position:relative; line-height:0px; font-size:0px;}
.RowA .Thumbnail img{width:110%;}
.RowA .Abstract{font-size:18px;}

.RowD > li{width:100%; font-size:0px; overflow:visible;}
.RowD > li > ul{width:calc(50% - 8px) !important; min-height:300px; list-style:none; padding:0px; margin:0px; font-size:0px; overflow:hidden; background-color:#FFFFFF; vertical-align:top; display:inline-block; position:relative; -webkit-box-shadow:0px 0px 10px 0px rgba(0,0,0,0.3); box-shadow:0px 0px 10px 0px rgba(0,0,0,0.3);}
.RowD > li > ul:first-child{margin-right:16px;}
.RowD > li > ul > li{width:100%; -webkit-box-shadow:0px 0px 8px 0px rgba(0,0,0,0.0); box-shadow:0px 0px 8px 0px rgba(0,0,0,0.0);}

/* PhotoStyle */
.RowA .PhotoStyle .Thumbnail{width:100%; height:300px; overflow:hidden; position:relative; line-height:0px; font-size:0px;}
.RowB.PhotoStyle .Thumbnail{width:100%; height:350px; overflow:hidden; position:relative; line-height:0px; font-size:0px;}
.RowC.PhotoStyle .Thumbnail{width:100%; height:250px; overflow:hidden; position:relative; line-height:0px; font-size:0px;}
.RowD .PhotoStyle .Thumbnail{width:100%; height:250px; overflow:hidden; position:relative; line-height:0px; font-size:0px;}
.RowB.PhotoStyle .Thumbnail img{width:110%;}
.RowC.PhotoStyle .Thumbnail img{height:110%;min-width:100%}
.PhotoStyle .Text{width:100%; background-color:rgba(255,255,255,0.75); position:relative; bottom:0px; left:0px;}
.PhotoStyle h1{font-size:22px;}

/* ColumnStyle */
.ColumnStyle li{padding:15px; position:relative;}
.ColumnStyle .Abstract{font-size:16px;}
.ColumnStyle .Author{width:102px; height:auto; overflow:hidden; position:relative; line-height:0px; font-size:0px; border:1px solid #CCCCCC; margin:15px; margin-bottom:0px;}
.ColumnStyle .Author img{width:100%;}

/* NewsStyle */
.NewsStyle li{padding:15px;}
.NewsStyle .Abstract{font-size:16px;}

/* Adv */
.Adv{width:calc(33.3333333% - 16px); background-color:transparent !important; -webkit-box-shadow:0px 0px 8px 0px rgba(0,0,0,0.0) !important; box-shadow:0px 0px 8px 0px rgba(0,0,0,0.0) !important;}
.Adv li > *{background-color:#FFFFFF; vertical-align:middle; text-align:center; width:300px; margin:0px; position:absolute; top:50%; left:50%; margin-right:-50%; transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);-webkit-transform:translate(-50%,-50%);-moz-transform:translate(-50%,-50%);-o-transform:translate(-50%,-50%);}
#TopBanner{width:100%; padding:10px 0px; text-align:center;}
#BottomBanner{width:100%; padding:10px 0px; text-align:center;}

/* Pagination */
form{margin:0px;}
input, textarea, input[type=number]::-webkit-inner-spin-button, input[type="checkbox"]{-webkit-appearance:none; appearance:none; outline:none; border-radius:0px; border:1px solid #c2c2c2; display:inline-block; background-color:#FFFFFF;}
select{width:96%; margin:0px 2%; font-size:22px; line-height:36px; height:36px; -webkit-appearance:none; appearance:none; outline:none; border-radius:0px; color:#000000; border:1px solid #c2c2c2; background-color:#FFFFFF; padding:0px 40px 0px 10px; background-image:url(../../../../common/images/supplement/selectbg.png); background-repeat:no-repeat; background-size:36px; background-position:right center;}
#Pagination ul{margin:50px auto; font-size:0px; list-style:none; padding:0px; text-align:center;}
#Pagination ul li{font-size:20px; color:#CCCCCC; height:36px; line-height:26px; text-align:center; margin:0px 8px; padding:5px; display:inline-block; vertical-align:middle;}
#Pagination ul li a{color:#666666;}
#Pagination ul li.PageNumber{width:36px; margin:0px 15px;}
#Pagination ul li.Active{background-color:#000000; color:#FFFFFF; border-radius:50%;}
#Pagination ul li.SelectMenu{display:none;}

/* Footer */
#FooterWrapper{width:100%; margin:auto; padding:0px; font-size:0px;}
#FooterWrapper ul{width:calc(100% - 16px); max-width:1200px; list-style:none; margin:0px auto; padding:0px; font-size:0px;}
#FooterWrapper .CorpID{width:100%; background-color:#0c232c;}
#FooterWrapper .CorpID ul, #FooterWrapper .CorpID ul li{height:79px;}
#FooterWrapper .CorpID img{height:100%;}
#FooterWrapper .CorpID li{width:50%; display:inline-block; vertical-align:top;}
#FooterWrapper li.CorpLogo{width:90px;}
#FooterWrapper li.CorpFB{text-align:right; width:calc(100% - 90px);}
#FooterWrapper li.CorpFB a{margin:0px 8px;}
#FooterWrapper .Disclaimer{width:100%; padding:15px 0px; background-color:#FFFFFF;}
#FooterWrapper .Disclaimer p{width:calc(100% - 16px); max-width:1200px; margin:20px auto; color:#666666; font-size:11px; text-align:justify;}
#FooterWrapper .Disclaimer p a{color:#666666; display:inline-block; margin:0px 10px; font-size:13px;}

/* PageTop */
#PageTop{cursor:pointer; width:50px; height:50px; background-image:url(../../../../common/images/supplement/pagetop.png); background-size:50px; position:fixed; right:30px; bottom:30px; z-index:2000; border-radius:5px; -webkit-box-shadow:0px 0px 5px 0px rgba(0,0,0,0.3); box-shadow:0px 0px 5px 0px rgba(0,0,0,0.3); display:none;}

/* Social */
#Social{list-style:none; height:60px; display:inline-block; margin:10px 0px 15px 0px; padding:0px; font-size:0px; vertical-align:bottom;}
#Social li{display:inline-block; vertical-align:middle; width:60px; height:60px; background-repeat:no-repeat; background-position:center center; background-size:50px; cursor:pointer; overflow:hidden; margin:1px; border-left:1px solid #d5d5d5;}
#Social li:first-child{border-left:none;}
#Social li.Like{background-color:transparent; width:78px !important; height:60px !important; text-align:center; line-height:0px; margin:0px; padding:0px; border:none;}
#Social li.FB{background-image:url(../../../../common/images/supplement/fb.png);}
#Social li.WhatsApp{background-image:url(../../../../common/images/supplement/whatsapp.png); display:none;}
#Social li.Line{background-image:url(../../../../common/images/supplement/line.png); display:none;}
#Social li.Email{background-image:url(../../../../common/images/supplement/email.png);}

#Recruit{width:100%; max-width:1200px;  margin:40px auto; display:block; text-align:center;}
#Recruit p{margin:3px 0px; font-size:16px; line-height:130%;}
#Recruit p.Remark{font-size:12px;}

#Tag{width:100%; max-width:1200px; margin:30px auto; display:block;}
#Tag a, #Tag span{display:inline-block; margin:3px 10px; vertical-align:top; font-size:24px; line-height:130%;}
#Tag a{color:#999999;;}
#Tag a.selected{color:#000000; text-decoration:underline;}
#Tag a:hover{color:#CCCCCC;}
#Tag span{color:#000000;}

.PlayButton{z-index:1 !important;}
.PlayButton::before{display:block; content: ""; position:absolute; top:40px; left:40px; transform: translate(-50%,-50%); z-index:4; background-image:url(../../../../common/images/supplement/play.png); cursor:pointer; opacity:0.5; -webkit-transition:opacity 0.2s ease-in-out; -o-transition:opacity 0.2s ease-in-out; -moz-transition:opacity 0.2s ease-in-out; -ms-transition:opacity 0.2s ease-in-out; pointer-events:none; transition:opacity 0.2s ease-in-out; width:50px; height:50px;}
.PlayButton:hover::before{opacity:1;}
.PlayButton.Center::before{top:40%; left:50%;}

@media only screen and (max-device-width: 414px) and (orientation: portrait), only screen and (max-device-width: 768px) and (orientation: landscape){
	#Social li.WhatsApp, #Social li.Line{display:inline-block;}
}
@media only screen and (max-width: 1024px){
	#LeadMainImg{height:480px;}
	#LeadHeader, #LeadHeader2{width:38%; margin-left:3%;}
	#LeadBox{width:93%;}
	#LeadBox p{font-size:17px;}
	#PlatformContainer > ul > li span{width:100%; text-align:center;}
	.SectionTitle{margin-top:30px;}
	#ElectorVote{left:auto; right:8%; top:20%; padding-left:5%; border-left:1px dotted #CCCCCC;}
	#ElectorOthers{position:relative; right:auto; margin:0px auto 10% auto;  width:90%; border-top:1px dotted #CCCCCC;}
	#ElectorOthers li:first-child{border-left:none;}
	#ElectorList li{width:16.666666%;}
}
@media only screen and (max-width: 768px){
	#LeadMainImg{height:400px;}
	#LeadWrapper{top:80px;}
	#Lead.SmallHeader #LeadMainImg{height:260px !important; margin-top:20px;}
}
@media only screen and (max-width: 760px){
	#PlatformContainer{margin:0% auto 6% auto}
	#PlatformContainer > ul{padding:5% 0%;}
	#PlatformContainer > ul > li{display:block; width:100% !important; padding:5px 0px;}
	#PlatformContainer > ul > li:first-child{padding:0px;}
	#PlatformContainer > ul > li > ul > li.Candidate{display:block;}
	#PlatformContainer > #PlatProfilePic{display:none;}
	#PlatformContainer > ul > li:first-child span{font-size:32px;}
	#PlatformContainer > ul > li:first-child span img{height:36px;}
	.PlatformSegment{display:block;}
	#PlatformContainer > ul > li:first-child span:first-child{display:none;}
	#PlatformContainer > ul > li span{text-align:left;}
	#CandidateContainer > ul > li{width:100%; margin:0%; border-right:0px;}
	#CandidateContainer > #CandidatePic > li{background-size:300px; background-repeat:no-repeat;}
	#CandidateContainer > #CandidatePic > li div{width:100%; cursor:pointer; font-size:15px; font-style:italic; padding-left:90px; padding-right:2%;}
	#CandidateContainer > #CandidatePic > li ul.PlatformHighlight{margin:0px; padding:10px 0px 10px 90px !important; border-bottom:1px dotted #5d5d5d;}
	#CandidateContainer > #CandidatePic > li:last-child ul.PlatformHighlight{border-bottom:none;}
}
@media only screen and (max-width: 900px){
	.RowA .Thumbnail img, .RowB.PhotoStyle .Thumbnail img{width:auto; height:110%;}
	.RowC, .Adv{width:calc(50% - 16px);}
	.RowD{width:calc(50% - 16px);}
	.RowD > li > ul{width:100% !important; height:auto;}
	.RowD > li > ul:first-child{margin-right:0px; margin-bottom:16px;}
	.RowD .Abstract{display:none;}
	.RowD .ColumnStyle li{display:inline-block;}
	.RowD .PhotoStyle{height:150px;}
	.RowD .PhotoStyle li.Text{width:70%; left:30%; height:100%;}
	.RowD .PhotoStyle li.Text h1{font-size:20px;}
	.RowD .ColumnStyle li.Text{width:calc(100% - 140px); padding-left:0px;}
	#Header #HdrContainer #Nav{position:absolute; top:48px; left:0px; width:100%; background-color:rgba(255,255,255,0.95); -moz-box-shadow:0px 4px 4px 0px rgba(0,0,0,0.7); -webkit-box-shadow:0px 4px 4px 0px rgba(0,0,0,0.7); box-shadow:0px 4px 4px 0px rgba(0,0,0,0.7); display:none;}
	#Header #HdrContainer #Nav li{width:50%; padding:0px; text-indent:10px; border-bottom:1px solid #CCCCCC;}
	#Header #HdrContainer #Nav li:nth-child(even){border-left:1px solid #CCCCCC;}
	#Header #HdrContainer #Menu{display:block;}
	#ProfilePicContainer #Age{position:absolute; left:20%; bottom:10%; font-size:30px;}
	#VotingDataHeadline, #VotingData{width:50%;}
	#VotingData{bottom:10%;}
	#VotingData li p.VoteButton span{font-size:40%;}
	.VotingStyle.Comment li{width:48%; margin:1%;  padding:12px 22px;}
	#ListContainer > li p{font-size:24px;}
	#ListContainer > li p:first-child{font-size:16px;}
	#IntensionContainer > #IntProfilePic > li img{width:100%;}
	#ElectorList li{width:20%;}
}
@media only screen and (max-width: 850px){
	h1{font-size:20px;}
	h5{font-size:24px;}
	.RowA, .RowA .Thumbnail, .RowB, .RowC, .Adv, .PhotoStyle .Thumbnail{min-height:250px;}
	.RowA h1, .VotingStyle.Comment li.CommentHdr, #TimelineHeader{font-size:28px;}
	.RowA h1, .RowA .Abstract{padding-top:16px;}
	.RowA .Abstract, .NewsStyle .Abstract{font-size:14px;}
	.RowB h1, .RowB .Abstract{padding-top:14px;}
	.ColumnStyle .Abstract{display:none;}
	#Segment li{font-size:16px;}
	.SubMenu li p{font-size:17px;}
	.StocksWrapper > li{width:32%; background-color:#FFFFFF; margin-right:0.7%;}
	.StocksWrapper > li  > p.Nominal.Up, .StocksWrapper > li  > p.Nominal.Down{padding-left:16px;}
	.TableWrapper .Heading{font-size:26px; line-height:28px;}
	.TableWrapper .Title{font-size:22px; line-height:25px;}
	.TableWrapper > li{font-size:18px;}
	.IndexWrapper > li > div.Info > p.Name{font-size:18px;}
	.IndexWrapper > li > div.Info > p.Nominal{font-size:26px;}
	.IndexWrapper > li > div.Info > p.Change, .IndexWrapper > li > div.Info > p.Turnover{font-size:16px;}
	.IndexWrapper > li > div.Info > p.Nominal.Up, .IndexWrapper > li > div.Info > p.Nominal.Down{padding-left:20px; background-size:10px;}
	#Social{margin:10px auto 0px auto !important;}
	#ListContainer > li p{font-size:22px;}
	#ListContainer > li p:first-child{font-size:14px;}
	#ElectorList li{width:25%;}
}
@media only screen and (max-width: 660px){
	.RowA, .RowB, .RowC {min-height:150px;}
	#Lead #Headline{padding:10px 20px;}
	.RowB, .RowC, .RowD, .Adv{width:calc(100% - 16px);}
	.RowA, .RowB, .RowC, .RowD{height:auto;}
	.RowA .Thumbnail, .RowA .Text{display:block; width:100%;}
	.RowA .Text{height:auto;}
	.RowD .PhotoStyle{height:auto;}
	.RowD .PhotoStyle li.Text{width:100%; left:0%; height:auto;}
	.RowD .PhotoStyle li.Text h1{font-size:22px;}
	.RowD .ColumnStyle li{display:block;}
	.RowD .ColumnStyle li.Text{width:100%; padding-left:15px;}
	.Thumbnail img{width:110% !important; height:auto !important;}
	.Abstract{display:none;}
	h1{padding-top:8px !important;}
	.RowA .Thumbnail{width:100%; overflow:hidden; position:relative; line-height:0px; font-size:0px;}
	.RowA .Text{width:100%; background-color:rgba(255,255,255,0.75); position:absolute; bottom:0px; left:0px; padding:15px;}
	.VotingStyle .Text{position:relative; background-color:transparent;}
	#FooterWrapper .CorpID ul{height:158px;}
	#FooterWrapper li.CorpLogo, #FooterWrapper li.CorpFB{width:100%; height:50%; text-align:center;}
	.SubMenu{width:100%;}
	.TableWrapper .Heading{font-size:24px; line-height:26px;}
	.TableWrapper .Title{font-size:20px; line-height:22px;}
	.TableWrapper > li{font-size:16px;}
	.TableWrapper .Time{padding-bottom:0px;}
	#TimelineLegend{display:block; width:calc(100% - 16px); margin:0px auto 30px auto; padding:0px; position:relative; font-size:0px; background-color:#FFF; overflow:hidden;}
	#TimelineLegend div{text-align:left; margin-right:3%;}
	#TimelineLegend div.NominalTime{width:auto; margin-left:0%;}
	#TimelineLegend div.FinalCallTime{width:auto; text-indent:0%;}
	#TimelineLegend div.ElectionTime{width:auto;}
	#TimelineLegend div span{display:inline-block; width:12px; height:12px; vertical-align:top; margin-top:3px; margin-right:2px;}
	#ProfilePic, #ProfilePic img{width:140%;}
	#ProfilePicContainer #Age{position:relative; left:auto; bottom:auto; margin-top:-15%; margin-left:32%; font-size:24px;}
	#ProfileLeft, #ProfileRight{width:96%; margin:0% 2% 2% 2%;}
	#VotingDataHeadline{position:relative; right:auto; bottom:0px !important; width:100%; margin-top:3%;}
	#VotingData{position:relative; right:auto; bottom:auto; margin:0px auto 10% auto;  width:90%;}
	.VotingStyle.Comment li{width:100%; margin:2% 0%;  padding:8px 18px;}
	#ProfileLeft .ContentBox .SubHeading span, #ProfileLeft .ListBox .SubHeading span{height:40px;}
	#ProfileLeft .ContentBox .SubHeading, #ProfileLeft .ListBox .SubHeading, #ProfileRight .ListBox .SubHeading, #ProfileRight .ContentBox .SubHeading{font-size:30px;}
	#ProfileLeft .ListBox li{width:100%;}
	#ProfileLeft .ListBox li.Title{font-size:15px; width:100%; margin:10px 0px 0px 0px;}
	#ProfileLeft .ContentBox{margin:10px 0px 20px 0px;}
	#ProfileRight .ContentBox, #ProfileRight .ListBox{margin:10px 0px; padding:10px;}
	.ProfileHeading span{font-size:13px; display:inline-block; cursor:pointer;}
	.ProfileHeading span.selected{font-size:28px; display:inline-block;}
	.ProfileHeading span::before{content:"\00a0|\00a0"; font-size:13px; color:#999999; font-weight:100 !important;}
	#Tag a, #Tag span, .SectionTitle span{font-size:20px;}
	#ListContainer > li{display:block; width:100%; padding:2% 0% !important; position:relative; cursor:pointer;}
	#ListContainer > li p{padding:0% 2%; text-align:center; font-size:24px; font-weight:300;}
	#ListContainer > li p:first-child{font-size:18px;}
	#ListContainer > li p span{display:inline-block;}
	#ListContainer .More{position:relative; bottom:auto; font-size:14px; width:100%; color:#FFFFFF; text-align:center;}
	#ListContainer .More span{width:auto; vertical-align:middle; display:inline-block; text-align:center;}
	.GroupContainer > li{width:25%;}
	#IntensionContainer > ul > li{width:48%;}
	#IntensionContainer > #IntProfilePic > li img{width:80%;}
	#ElectorVote{top:10%; right:2%;}
	#ElectorOthers{width:100%;}
	#ElectorList li{width:33.33333%;}
}
@media only screen and (max-width: 560px){
	#FooterWrapper .CorpID ul{height:150px;}
	#FooterWrapper li.CorpFB img{height:60px;}
	.IndexWrapper > li{width:95%;}
	.IndexWrapper > li > div{display:inline-block; vertical-align:top;}
	.IndexWrapper > li > div:first-child{width:55%;}
	.IndexWrapper > li > div{width:45%;}
	#ElectorPic img{width:180%;}
	#ElectorVote{top:38% !important; right:auto; left:30%; width:100%; border-left:none;}
	#ElectorVote li{margin:0px;}
	#ElectorOthers{padding-top:2%; margin-top:8%; width:100%;}
	#ElectorOthers li{width:28%; margin:0% 2.5%;}
	#ElectorOthers li{border-left:1px dotted #CCCCCC;}
	#ElectorOthers li:first-child{border-left:none;}
	#ElectorList li{width:50%;}
}
@media only screen and (max-width:768px){
	#Lead{background-image:none !important;}
	#LeadWrapper{top:100px;}
	/*#LeadMainImg{margin-top:48px;}*/
	#ElectorVote{top:13%; right:2%;}
	#ElectorVote li{display:block;}
}
@media only screen and (max-width: 414px){
	#LeadHeader{width:40%; margin-left:3%;}
	#Lead.SmallHeader #LeadMainImg{height:200px !important;}
	#Lead.SmallHeader #LeadHeader{display:block;}
	#Lead.SmallHeader #LeadHeader2{display:none;}
	#LeadBox{padding:0px 15px; margin:10px auto; }
	#Lead.SmallHeader #LeadWrapper{top:70px;}
	#LeadWrapper{top:80px;}
	#LeadBox p{font-size:17px;}
	#Segment{-webkit-display:flex; display:flex; -webkit-flex-wrap:wrap; flex-wrap:wrap; -webkit-justify-content:center; justify-content:center; -webkit-align-content:center; align-content:center; width:98%; padding:0px; margin-top:10px auto !important; border:1px solid #d5d5d5;}
	#Segment li{display:inline-block; padding:5px; width:25%; flex-grow:1;}
	#Segment li:nth-child(6){flex-grow:4;}
	#Segment li span{display:inline-block; text-align:center;}
	.StocksWrapper > li{width:46% !important; margin-top:8px; margin-right:3.2%;}
	.StocksWrapper > li{width:46% !important; margin-top:8px; margin-right:3.2%;}
	.StocksWrapper > li:nth-child(1), .StocksWrapper > li:nth-child(2), .FuturesWrapper > li:nth-child(1), .FuturesWrapper > li:nth-child(2){margin-top:0px;}
	.TableWrapper > li p:first-child{display:inline-block;}
	.TableWrapper > li:nth-child(3n+1){display:none;}
	.TableWrapper > li{width:calc(50% - 2px);}
	.TableWrapper .Direction{display:block !important; width:calc(100% - 2px) !important; padding:0px; text-align:center; line-height:100%; border-bottom:none !important;}
	.TableWrapper > li p{padding:5% 0px 2.5% 0px;}
	.SubMenu li{padding:0px !important;}
	.SubMenu li p{font-size:15px;}
	.ProfileHeading span{font-size:14px;}
	.ProfileHeading span.selected{font-size:25px;}
	.ProfileHeading span::before{font-size:13px;}
	#ElectorVote{top:35% !important;}
	#ElectorVote li{padding:0px; margin:0px; line-height:auto;}
	#ElectorVote li.VoteCount{font-size:22px;}
	#ElectorVote li.VoteCount span{font-size:36px; line-height:36px;}
	#CandidateContainer > #CandidatePic > li ul.PlatformHighlight{padding:10px 0px  !important;}
	#ElectorOthers{padding-top:2%; margin-top:8% !important;}
	#ElectorOthers li{width:32%; margin:0% 0.5%;}
}
@media only screen and (max-width: 375px){
	#LeadBox p{font-size:16px;}
	#Social li{width:50px; height:50px; margin:0px auto !important;}
	#LeadBox{margin-top:0px;}
	.Thumbnail img{width:auto !important; height:110% !important;}
	h1, #TimelineHeader{font-size:20px !important;}
	.Text, .ColumnStyle li{padding:12px !important;}
	#FooterWrapper .CorpID ul{height:220px;}
	#FooterWrapper li.CorpFB a{display:block;}
	.IndexWrapper > li > div.Info > p.Nominal{font-size:22px;}
	#ProfileLeft .ContentBox .SubHeading span, #ProfileLeft .ListBox .SubHeading span{height:26px;}
	#ProfileLeft .ContentBox .SubHeading, #ProfileLeft .ListBox .SubHeading, #ProfileRight .ListBox .SubHeading, #ProfileRight .ContentBox .SubHeading{font-size:22px;}
	#ProfileRight .QuoteBox p, #ProfileLeft .ContentBox p, #ProfileRight .ContentBox p{margin:8px 0px; padding-bottom:4px; font-size:15px;}
	#ProfileLeft .ListBox li, #ProfileRight .ListBox li{font-size:15px;}
	#ProfileRight .NewsBox li p{font-size:15px;}
	#ProfileRight .NewsBox li p.Category{font-size:12px;}
	.ProfileHeading span{font-size:12px;}
	.ProfileHeading span.selected{font-size:22px;}
	.ProfileHeading span::before{font-size:14px;}
	.GroupContainer > li{width:25%;}
}
@media only screen and (max-width: 320px){
	#LeadWrapper{top:80px;}
	#ContentWrapper{width:calc(100% - 4px);}
	.Category{font-size:13px;}
	h1, #TimelineHeader{font-size:18px !important;}
	.Text, .ColumnStyle li{padding:10px !important;}
	.StocksWrapper > li{padding:8px;}
	.TableWrapper .Heading{font-size:21px; line-height:24px;}
	.TableWrapper .Title, .TableWrapper .Direction{font-size:18px; line-height:19px;}
	.TableWrapper > li{font-size:14px;}
	#Segment li{font-size:16px; letter-spacing:-1px;}
	#Lead.SmallHeader #LeadMainImg{height:150px !important; margin-top:35px;}
}
@media only screen and (max-width: 850px), (max-device-width: 768px) and (orientation: portrait), (max-device-width: 1024px) and (orientation: landscape){
	#Pagination ul{display:table; width:100%;}
	#Pagination ul li{margin:0px; padding:5px; display:table-cell; width:60px;}
	#Pagination ul li.JumpPage, #Pagination ul li.PageNumber{display:none;}
	#Pagination ul li.SelectMenu{display:table-cell; width:calc(100% - 240px);}
}
@media only screen and (max-width: 560px), (max-device-width: 414px) and (orientation: portrait), (max-device-width: 736px) and (orientation: landscape){
	#Pagination ul li, select{font-size:18px;}
	#Pagination ul li{margin:0px; padding:5px; display:table-cell; width:50px;}
	#Pagination ul li.SelectMenu{display:table-cell; width:calc(100% - 200px);}
	#ProfileLeft .InfoBox{padding:0% 0% 4% 0%;}
	#ProfileLeft .InfoBox li.Logo{height:50px;}
	#ProfileLeft .InfoBox li.Solgan{font-size:20px;}
	#ProfileLeft .InfoBox li.Link a{font-size:14px;}
}
@media only screen and (max-device-width: 736px) and (orientation: landscape){
	.TableWrapper .Heading{font-size:22px; line-height:24px;}
	.TableWrapper .Title, .TableWrapper .Direction{font-size:19px; line-height:21px;}
	.TableWrapper > li{font-size:16px;}
	#LeadWrapper{top:100px;}
}
@media only screen and (max-device-width: 667px) and (orientation: landscape){
	#Social li{width:50px; height:50px;}
}
@media only screen and (max-device-width: 568px) and (orientation: landscape){
	#LeadWrapper{top:60px;}
	#LeadMainImg{margin-top:30px;}
	#LeadBox{margin-top:0px !important;}
	#LeadBox p:first-child{margin-top:0px;}
	#Lead.SmallHeader #LeadMainImg{height:220px !important; margin-top:30px;}
	#Lead.SmallHeader #LeadWrapper{top:80px;}
}