@charset "utf-8";

@font-face {
    font-family: LatoBold;
    src:url('../../js/fonts/Lato/Lato-Bold.ttf');
}
@font-face {
    font-family: LatoRegular;
    src:url('../../js/fonts/Lato/Lato-Regular.ttf');
}
@font-face {
    font-family: LatoLight;
    src:url('../../js/fonts/Lato/Lato-Light.ttf');
}
@font-face {
    font-family: LatoItalic;
    src:url('../../js/fonts/Lato/Lato-Italic.ttf');
}

/* CSS Document */ 
html, body { background:#fff; font-family: LatoRegular, Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif"; color: #1f1e1f; }
p {font-family: LatoRegular, Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif"; color: #1f1e1f; font-size:17px; line-height: 30px; margin-bottom: 20px; }
div, span, a {font-family: LatoRegular, Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif"; }
h1 { font-family: LatoBold; font-size: 40px; line-height: 50px; margin-bottom: 30px; }
h3 { font-family: LatoBold; font-size: 24px; line-height: 40px; margin-bottom: 20px; }
img { vertical-align: middle; }
.bold { font-weight: bold; }
.italic { font-family: LatoItalic; }
.contentWrapper { position: relative; width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 20px; }
.row:after, .contentWrapper:after, .clearfix:after { content: ""; display: table; clear: both; }
.full-width { width: 100%; padding: 0 30px; }
.img-responsive { width: 100%; }
.btn { margin-top: 40px; }
.btn span { display: inline-block; padding: 16px 40px; border-radius: 5px; border: 1px solid #294e95; background: #eaeef5; color: #294e95; font-size: 16px; font-family: LatoBold; }
.text-right { text-align: right; }
.more { display: inline-block; position: relative; padding-left: 30px; }
.more:before { display: inline-block; width: 25px; height: 25px; content: '\2192'; font-size: 15px; font-weight: bold; line-height: 23px; text-align: center; background: #7a126b; border-radius: 50%; color: #fff; position: absolute; top: 2px; left: 0; }
.more-2:before { background: #f26a52; }
sup { vertical-align: super; font-size: smaller; }

ul li { line-height: 30px; font-family: LatoRegular; }
ul li p { margin-bottom: 10px; }
ul.listNum { counter-reset: number; }
ul.listNum li { position: relative; padding-left: 20px; margin-bottom: 10px; font-size: 17px; }
ul.listNum > li:before { content: counter(number) ". "; counter-increment: number; display: inline-block; width: 20px; position: absolute; left: 0; }
ul.listNum2lv { counter-reset: number2; }
ul.listNum2lv li { position: relative; padding-left: 30px; margin-bottom: 10px; font-size: 17px; }
ul.listNum2lv > li:before { content: counter(number) "." counter(number2); counter-increment: number2; display: inline-block; width: 30px; position: absolute; left: 0; }
ul.listLetter { counter-reset: letter; }
ul.listLetter li { position: relative; padding-left: 20px; margin-bottom: 10px; font-size: 17px; }
ul.listLetter > li:before { content: counter(letter, lower-latin) ". "; counter-increment: letter; display: inline-block; width: 20px; position: absolute; left: 0; }
ul.listDash li { position: relative; padding-left: 20px; margin-bottom: 10px; font-size: 17px; }
ul.listDash > li:before { content: "-"; position: absolute; top: 0; left: 5px; }
ul.listSquare li { position: relative; padding-left: 30px; margin-bottom: 10px; font-size: 17px; }
ul.listSquare > li:before { content: "\220E"; position: absolute; top: -1px; left: 5px; font-size: 14px; }
ul.listDot li { position: relative; padding-left: 20px; margin-bottom: 10px; font-size: 17px; }
ul.listDot li:before { content: '\2022'; font-size: 1.1em; position: absolute; top: 0px; left: 0; color: #7a126b; }


/* Home Banner */
.slick-dots { position: absolute; right: 0; list-style: none; padding: 0 20px; margin-top: 24px; margin-right: 50px; }
.slick-dots li { position: relative; display: inline-block; margin: 0 5px; padding: 0; width: 10px; height: 10px; }
.slick-dots li button { font-size: 0; line-height: 0; width: 10px; height: 10px; padding: 0; margin: 0; color: transparent; border: 0; border-radius: 50%; cursor: pointer; outline: none; background: #fff; opacity: 0.5; }
.slick-dots li.slick-active button, .slick-dots li button:hover { background: #f26a52; opacity: 1; }
.slick-prev { position: absolute; top: 0; left: 0; display: block; width: 30px; height: 100%; background: url(../images/ir/arrow_prev_x2.png) no-repeat center; background-size: auto 13%; cursor: pointer; z-index: 20; }
.slick-next { position: absolute; top: 0; right: 0px; display: block; width: 30px; height: 100%; background: url(../images/ir/arrow_next_x2.png) no-repeat center; background-size: auto 13%; cursor: pointer; z-index: 20; }

.homeBannerWrapper .pageTitle { background: #7a126b; padding-top: 30px; padding-bottom: 30px; }
.homeBannerWrapper .pageTitle span { color: #fff; text-transform: uppercase; font-size: 30px; font-weight: bold; }
.homeBanner .banner { position: relative; /*height: 380px;*/ }
.homeBanner .banner { background-size: cover;  }
.homeBanner .banner .text { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.homeBanner .banner .text div { font-family: LatoBold; color: #fff; font-size: 46px; font-weight: 500; }

.homeNews, .homeData, .homeLatest, .homeTeam { padding: 70px 0; }
.homeNews .contentWrapper  { padding: 0 30px; }
.homeNews .newsWrapper, .homeNews .stockQuote { padding: 0 0 35px; }
.homeNews .story { margin-top: 30px; }
.homeNews .story a { display: block; width: 100%; height: 100%; position: relative; }
.homeNews .story a .btn_bg { width: 100%; height: 120px; background: url(../images/ir/home_story.jpg); background-size: cover; background-position: center 70%; }
.homeNews .story a span { width: 100%; text-align: center; color: #fff; font-family: LatoBold; position: absolute; font-size: 24px; top: 50%; transform: translateY(-50%); line-height: 28px; }
/*.homeNews .stockQuote .story.hkse .btn_bg { background: url(../images/ir/home_hkse_bg.jpg); background-position: top; }
.homeNews .stockQuote .story.otc .btn_bg { background: url(../images/ir/home_hkse_bg.jpg); background-position: center 30%; }*/
.homeNews .story a:hover span { color: #fd6a21; }

.homeNews .stockQuote .stockFrame { width: 100%; position: relative; font-family: 'LatoRegular'; }
.homeNews .stockQuote .stockFrame .hkse { width: 50%; float: left; padding-right: 5px; }
.homeNews .stockQuote .stockFrame .otc { width: 50%; float: right; padding-left: 5px; }
.homeNews .stockQuote .stockFrame .hkse_chart { width: 100%; margin: 0 0 10px; padding: 15px 0; }

.homeData .revenue, .homeData .income { padding: 0 0 35px; text-align: center; }
.homeData .revenue img, .homeData .income img { max-width: 441px; }


.homeBusiness .row .block-left { background: url(../images/ir/home_business_bg.jpg); background-size: cover; background-position: left; padding: 30px; }
.homeBusiness .row .block-right { background: #f2f2f2; padding: 30px; }
.homeBusiness .row h1, .homeBusiness .row h3, .homeBusiness .row p, .homeBusiness .row p a, .homeBusiness .row p span { color: #fff; }
.homeBusiness .row p a:not(.more) { font-weight: bold; }
.homeBusiness .row p a:not(.more):hover { opacity: 0.8; }
.homeBusiness .row .block-right p, .homeBusiness .row .block-right a { color: #1f1e1f; }
.homeBusiness .row .block-right ul li a { color: #7a126b; }
.homeBusiness .row .block-right ul li, .homeBusiness .row .block-right ul li a span { color: #1f1e1f; }

.homeReports .row .block-left { background: url(../images/ir/home_report_bg.jpg); background-size: cover; background-position: bottom; padding: 30px; }
.homeReports .row .block-right { background: url(../images/ir/home_csr_bg.jpg); background-size: cover; background-position: bottom; padding: 30px; }
.homeReports .reportWrapper { padding: 20px; }
.homeReports .reportWrapper .cover, .homeReports .reportWrapper .text { width: 100%; position: relative; }
.homeReports .reportWrapper .cover { text-align: center; margin-bottom: 30px; }
.homeReports .reportWrapper .cover img.cover-img { max-width: 211px; }
.homeReports .reportWrapper .cover .dl_btn { position: absolute; bottom: 25px; margin-left: -30px; }
.homeReports .reportWrapper .text div { color: #fff; }
.homeReports .reportWrapper .text .year { font-size: 24px; font-family: LatoBold; }
.homeReports .reportWrapper .text .title { font-size: 40px; font-family: LatoBold; margin: 10px 0 20px; }
.homeReports .reportWrapper .text .desc { font-size: 17px; line-height: 25px; }
.homeReports .reportWrapper a.more_report { cursor: pointer; }
.homeReports .reportWrapper a.more_report:before { color: #4083d7; background: #fff; }
.homeReports .reportWrapper a.more_report span { color: #fff; }

.homeLatest h1, .homeTeam h1, .homeData h1 { text-align: center; }
.homeLatest { background: #f2f2f2; }
.homeLatest .item { width: 100%; margin-left: 0; margin-bottom: 1%; position: relative; }
.homeLatest .item a { width: 100%; height: 100%; }
.homeLatest .item a div { position: absolute; color: #fff; font-family: LatoBold; font-size: 24px; width: 100%; text-align: center; top: 50%; transform: translateY(-50%); }
.homeLatest .item:hover a div { color: #fd6a21; }
.homeTeam .item { width: 100%; margin-left: 0; margin-bottom: 1%; position: relative; padding: 30px 10px; border: 1px solid #000; }
.homeTeam .item div { position: relative; /* color: #fff; */ font-size: 22px; width: 100%; text-align: center; line-height: 28px; }
.homeTeam .item div span { display: block; font-family: LatoRegular; color: #294e95; }
/* .homeTeam .item:nth-child(1) { background: #ed4585; }
.homeTeam .item:nth-child(2) { background: #6ac304; }
.homeTeam .item:nth-child(3) { background: #fd6a21; }
.homeTeam .item:nth-child(4) { background: #428fda; }
.homeTeam .item:nth-child(5) { background: #d358f7; }
.homeTeam .item:nth-child(6) { background: #f7d358; } */
.homeTeam .contact { padding-top: 20px; text-align: left; }
.homeTeam .contact div { font-size: 17px; line-height: 28px; }
.homeTeam .contact div img { display: inline-block; vertical-align: middle; margin-right: 5px; }

.sectionBannerWrapper .pageTitle { background: #7a126b; padding-top: 25px; padding-bottom: 25px; }
.sectionBannerWrapper .pageTitle .title { color: #fff; font-size: 40px; font-family: LatoBold; line-height:40px; margin-bottom:0 }
.sectionBannerWrapper .pageTitle .breadcrumbs { color: #fff; font-size: 17px; padding-bottom: 15px; }
.sectionBannerWrapper .pageTitle .breadcrumbs a, .sectionBannerWrapper .pageTitle .breadcrumbs span { color: #fff; }
.sectionBanner .banner { position: relative; height: 220px; background-size: cover; }
.sectionBanner .banner .text { position: absolute; top: 50%; transform: translateY(-50%); width: 100%; text-align: center; }
.sectionBanner .banner .text div { color: #fff; font-size: 46px; font-family: LatoBold; }
.sectionBanner .banner.about { background-image: url('../images/banner/about_bg.jpg'); background-position: center; }
.sectionBanner .banner.results { background-image: url('../images/banner/results_bg.jpg'); background-position: center; }
.sectionBanner .banner.ir { background-image: url('../images/banner/ir_bg.jpg'); background-position: center; }
.sectionBanner .banner.publications { background-image: url('../images/banner/publications_bg.jpg'); background-position: center; }
.sectionBanner .banner.cg { background-image: url('../images/banner/cg_bg.jpg'); background-position: bottom; }
.sectionBanner .banner.sustainability { background-image: url('../images/banner/sustainability_bg.jpg'); background-position: center; }

.yearWrapper { background: #294e95; }
.yearWrapper .slideBar { padding: 0px 30px; }
.yearWrapper .slideBar.noNav { padding: 0px; }
.yearWrapper .slideBar .slick-track { margin-left: 0; }
.yearWrapper .slideBar a { display: block; color: #fff; text-align: center; font-size: 24px; font-family: LatoBold; padding: 15px; }
.yearWrapper .slideBar a.act { background: #fff; color: #f26a52; }
.yearWrapper .control-prev { position: absolute; top: 0; left: 0; display: block; width: 30px; height: 100%; background: url(../images/ir/arrow_prev.png) no-repeat left; cursor: pointer; z-index: 20; }
.yearWrapper .control-next { position: absolute; top: 0; right: 0; display: block; width: 30px; height: 100%; background: url(../images/ir/arrow_next.png) no-repeat right; cursor: pointer; z-index: 20; }

.mainContent { padding: 30px 0 100px; min-height: 600px; }

.announcement { padding: 30px 0; border-bottom: 1px solid #bcbcbc; }
.announcement .dateWrapper, .announcement .pdfLink { display: table-cell; vertical-align: middle; }
.announcement .dateWrapper .dateContainer { width: 75px; height: 75px; text-align: center; background: #b8252e; }
.announcement .dateWrapper .dateContainer div { color: #fff; }
.announcement .dateWrapper .month { font-size: 15px; font-family: LatoBold; padding-top: 10px;  }
.announcement .dateWrapper .date { font-size: 40px; font-family: LatoBold; }
.announcement .pdfLink { font-size: 18px; padding-left: 20px; }
/* .announcement:nth-child(4n+1) .dateWrapper .dateContainer { background: #4183d7; }
.announcement:nth-child(4n+2) .dateWrapper .dateContainer { background: #fc6a21; }
.announcement:nth-child(4n+3) .dateWrapper .dateContainer { background: #6dc14e; }
.announcement:nth-child(4n+4) .dateWrapper .dateContainer { background: #ed4586; } */

.corpnews .announcement { display: none; }
.corpnews .announcement .pdfLink { line-height: 1.3; }
.corpnews .announcement .pdfLink .desc { font-size: 14px; margin-top: 10px; }
.corpnews .readmore { margin: 40px 0 20px; display: none; }

.report { padding: 50px 0; border-bottom: 1px solid #bcbcbc; }
.report:first-child { padding-top: 20px; }
.report .cover, .report .details { display: table-cell; vertical-align: middle; }
.report .cover { width: 30%; }
.report .cover img { width: 100%; max-width: 283px; }
.report .details { padding-left: 30px; }
.report .details .year { font-family: LatoBold; font-size: 18px; margin-bottom: 10px; }
.report .details .title { font-family: LatoBold; font-size: 28px; }
.report .details .btn_pdf { margin-top: 20px; }
.report .details .btn_pdf span { display: inline-block; padding: 15px 40px; border-radius: 5px; border: 1px solid #294e95; background: #eaeef5; color: #294e95; font-size: 16px; font-family: LatoBold; }

.results { padding: 60px 0 30px; border-bottom: 1px solid #bcbcbc; }
.results:first-child { padding-top: 30px; }
.results .cover, .results .details { display: block; vertical-align: top; }
.results .cover { width: 100%; text-align: center; }
.results .cover img { width: 100%; max-width: 444px; margin-bottom: 20px; border: 1px solid #bfbfbf; box-sizing: content-box; }
.results .details { padding-left: 0px; }
.results .details .title { font-family: LatoBold; font-size: 28px; }
.results .details .list { margin: 20px 15px; font-size: 0; }
.results .details .list a { display: inline-block; }
.results .details .list a .icon { display: table-cell; vertical-align: middle; }
.results .details .list a span { display: table-cell; vertical-align: middle; font-size: 18px; padding-left: 20px; }
.results .details .list a:hover span { color: #428fda; }
.icon_presentation { width: 33px; height: 36px; background: url(../images/ir/icon_presentation.png) no-repeat center; }
.icon_announcement { width: 33px; height: 36px; background: url(../images/ir/icon_announcement.png) no-repeat center; }
.icon_press { width: 33px; height: 36px; background: url(../images/ir/icon_press.png) no-repeat center; }
.icon_report { width: 33px; height: 36px; background: url(../images/ir/icon-report.png) no-repeat center; }
.icon_webcast { width: 33px; height: 36px; background: url(../images/ir/icon_webcast.png) no-repeat center; }
.icon_audio { width: 33px; height: 36px; background: url(../images/ir/icon_audio.png) no-repeat center; }

.events { padding: 50px 0 40px; border-bottom: 1px solid #bcbcbc; }
.events:first-child { padding-top: 30px; }
.events .img { text-align: center; }
.events .img img { width: 100%; max-width: 444px; border: 1px solid #bfbfbf; box-sizing: content-box; }
.events .details .date { font-family: LatoBold; font-size: 18px; }
.events .details .title { font-family: LatoBold; font-size: 18px; margin: 30px 0 35px; }
.events .details .link { margin-bottom: 10px; }
.events .details .link a { display: inline-block; }
.events .details .link a .icon { display: table-cell; vertical-align: middle; }
.events .details .link a span { display: table-cell; vertical-align: middle; font-size: 18px; padding-left: 15px; }
.events .details .link a:hover span { color: #428fda; }
.events.content-with-img .details { margin-top: 20px; }

.corpinfo .row { padding: 15px 0 30px; border-bottom: 1px solid #bfbfbf; line-height: 36px; }
.corpinfo .row:first-child { padding-top: 50px; }
.corpinfo .row .left { padding-bottom: 20px; font-size: 24px; font-family: LatoBold; }
.corpinfo .row .right { padding-bottom: 20px; font-size: 24px; }
.corpinfo .row a { color: #428fda; }

.practices.mainContent, .rights.mainContent { padding-top: 50px; }

.profile .section { padding: 30px 0; }
.profile .section:nth-child(even) { background: #f2f2f2; }
.profile .contentWrapper a:hover { color: #428fda; }
.profile .contentWrapper h3 a { font-family: LatoBold; }
.profile .contentWrapper ul li { margin-bottom: 20px; }
/*.profile .contentWrapper ul li h3 { line-height: 1; }*/
.profile .contentWrapper ul li:before { line-height: 40px; }

.chairman.mainContent { padding-top: 0; }
.chairman .row.lead { background: url(../images/about/chairman_bg.jpg) no-repeat; background-size: cover; padding: 50px 0px 0px; margin-bottom: 30px; }
.chairman .row.lead .left img { margin-bottom: 30px; }
.chairman .row.lead .right p { font-size: 22px; line-height: 28px; color: #fff; }

.practices .contentWrapper a, .committees .contentWrapper a { color: #7a126b; }

.directors .section { padding: 10px 0 20px; }
.directors .item { width: 100%; margin-left: 0; margin-bottom: 10px; position: relative; height: 100px; }
.directors .item a { display: block; width: 100%; height: 100%; border: 1px solid #000; }
.directors .item a:hover  { border-color: #b8252e; }
.directors .item div { position: absolute; /* color: #fff; */ font-size: 22px; width: 100%; text-align: center; line-height: 28px; top: 50%; transform: translateY(-50%); }
/* .directors .section:nth-child(1) .item { background: #ed4585; }
.directors .section:nth-child(2) .item { background: #6ac304; }
.directors .section:nth-child(3) .item { background: #fd6a21; } */
/* .directors .section:nth-child(1) .item a:hover div, .directors .section:nth-child(4) .item a:hover div { color: #800000; }
.directors .section:nth-child(2) .item a:hover div { color: #134242; } */
.dialog .title { font-size: 24px; line-height: 32px; font-family: LatoBold; margin: 10px 0 20px; }

.rights ul.listNum > li { padding-top: 20px; padding-bottom: 10px; }

.subsidiaries h1.year { font-size: 32px; margin-bottom: 20px; }
.subsidiaries .announcement { padding-bottom: 50px; }

.contentWrapper .btn_dl span { width: 40px; height: 40px; background: url(../images/ir/icon_dl_btn2.png) no-repeat; background-size: contain; }
.contentWrapper .dlWrapper { position: relative; height: 40px; margin-bottom: 20px; }
.contentWrapper .dlWrapper .btn_dl { position: absolute; margin: 0; right: 0; top: calc(50% - 20px); }

.statement .contentWrapper a, .committees .contentWrapper a { color: #7a126b; }
.statement span.title { font-size: 24px; font-family: LatoBold; line-height: 40px; }
.statement .dlWrapper span.title { line-height: 24px; }
.table_findata { margin: 20px 0; }
.table_findata tr td { padding: 10px; text-align: right; font-size: 12px; font-family: LatoRegular; vertical-align: bottom; line-height: 15px; }
.table_findata tr td:first-child { text-align: left; }
.table_findata tr td.tableHighlight { background-color: #f1e1ec; font-weight: bold; }
.table_findata thead tr td.tableHighlight { background-color: #7a126b; }
.table_findata thead { background-color: #4d1449; }
.table_findata thead tr td { color: #fff; }
.table_findata tbody tr.border { border-bottom: 2px solid #7a126b; }
.table_findata tbody tr.innerBorder { border-bottom: 1px solid #7a126b; }
.table_findata tbody tr.last { border-bottom: 3px solid #7a126b; }
.table_findata tbody tr td.indent { padding-left: 20px; }
.table_findata tbody tr td.indent2 { padding-left: 45px; }

.tableNav tr td.prev, .tableNav tr td.next { display: none; }

.keydata .chartWrapper { padding: 30px 0 0; }
/*.keydata .chart { width: 100%; padding: 20px; text-align: center; }
.keydata .chart img { max-width: 485px; margin-bottom: 30px; }*/
.keydata .chart { width: 100%; padding: 0px; text-align: center; }
.keydata .tableWrapper .period { text-align: right; background: #4d1449; padding: 10px; }
.keydata .tableWrapper .period span { display: inline-block; width: 100%; text-align: center; font-size: 12px; color: #fff; }
.keydata .tableWrapper .table_findata { margin-top: 0; }
.keydata .tableWrapper .table_findata tbody tr { border-bottom: 2px solid #7a126b; }
.keydata .tableWrapper .table_findata tbody tr td:first-child { font-weight: bold; }

.stockinfo .contentWrapper, .stockquote .contentWrapper, .shareholder .contentWrapper { padding-top: 30px; }

.stockinfo .row { padding: 20px 0; }
.stockinfo .row:not(:last-child) { border-bottom: 1px solid #bfbfbf; }
.stockinfo .row .left { padding-bottom: 20px; }
.stockinfo .row .left { font-size: 17px; font-weight: bold; }
.stockinfo .row .right { font-size: 17px; }
.stockinfo a { color: #7a126b; word-break: break-all; }

.dividend table#dividend_data tbody tr:not(.last) { border-bottom: 1px solid #bfbfbf; }
.dividend table#dividend_date td { vertical-align: middle; }

.analyst table td { text-align: left; vertical-align: top; }
.analyst table td a { color: #7a126b; word-break: break-all; }
.analyst table.table_findata thead { background-color: #294e95; }
.analyst table.table_findata tr:nth-child(even) { background: #f2f2f2; }
.analyst table.table_findata tr td:first-child { font-weight: bold; }
.analyst p.remark { font-size: 14px; line-height: 22px; }

.shareholder a { color: #428fda; }

.shareholding .section { padding: 30px 0; }
.shareholding .remark, .shareholding .remark p, .shareholding .remark ul li { font-size: 14px; margin-bottom: 0px; line-height: 22px; }

.factsheet .factsheet_thumb { max-width:900px; margin:inherit; }
.factsheet .factsheet_thumb img {/* border: 1px solid #bfbfbf;*/ margin-bottom: 20px; }

.contact .item { width: 100%; margin-left: 0; margin-bottom: 1%; position: relative; padding: 30px 10px; border: 1px solid #000; }
.contact .item div { position: relative; /* color: #fff; */ font-size: 22px; width: 100%; text-align: center; line-height: 28px;}
.contact .item div span { display: block; font-family: LatoRegular; color: #294e95; }
/* .contact .item:nth-child(4n-3) { background: #ed4585; }
.contact .item:nth-child(4n-2) { background: #6ac304; }
.contact .item:nth-child(4n-1) { background: #fd6a21; }
.contact .item:nth-child(4n) { background: #428fda; } */
.contact .row .left, .contact .row .right { float: left; font-size: 17px; }
.contact .row .left { width: 100px; padding-bottom: 10px; }
.contact .row a { color: #7a126b; }

.message .contentWrapper { padding-top: 20px; }
.message ul li { margin-bottom: 20px; }
.message .reportBtn { margin: 30px 0; }
.message .reportBtn a { display: block; width: 100%; height: 100%; position: relative; }
.message .reportBtn a .btn_bg { width: 100%; max-width: 600px; height: 120px; background: url(../images/sustainability/report_btn_bg.jpg); background-size: cover; background-position: center 40%; }
.message .reportBtn a span { width: 100%; max-width: 600px; text-align: center; color: #fff; font-family: LatoBold; position: absolute; font-size: 24px; top: 50%; transform: translateY(-50%); line-height: 28px; }

.sus_report .contentWrapper { padding-top: 20px; }
.sus_report .report { border-bottom: none; display: none; padding: 20px 0px 50px; }
.sus_report .report.act { display: block; }
.sus_report .report .cover img { border: 1px solid transparent; }
.sus_report .reportList { background: #f2f2f2; }
.sus_report .reportList .slideBar { padding: 0px 30px; }
.sus_report .reportList .slideBar .slick-track { margin-left: 0; }
.sus_report .reportList .control-prev { position: absolute; top: 0; left: 0; display: block; width: 30px; height: 100%; background: url(../images/ir/arrow_prev_grey.png) no-repeat left; cursor: pointer; z-index: 20; }
.sus_report .reportList .control-next { position: absolute; top: 0; right: 0; display: block; width: 30px; height: 100%; background: url(../images/ir/arrow_next_grey.png) no-repeat right; cursor: pointer; z-index: 20; }
.sus_report .reportList .slideBar .reportLink { padding: 30px; }
.sus_report .reportList .slideBar .reportLink .year { text-align: center; margin-top: 10px; font-weight: bold; }
.sus_report .reportList .slideBar .slick-dots { position: relative; margin: 0; top: -20px; text-align: center; }
.sus_report .reportList .slideBar .slick-dots li button { background: #bfbfbf; }
.sus_report .reportList .slideBar .slick-dots li.slick-active button, .sus_report .reportList .slideBar .slick-dots li button:hover { background: #777; }
.sus_report .reportBtn { margin: 30px 0; }
.sus_report .reportBtn a { display: block; width: 100%; height: 100%; position: relative; }
.sus_report .reportBtn a .btn_bg { width: 100%; max-width: 600px; height: 120px; background: url(../images/sustainability/report_btn_bg.jpg); background-size: cover; background-position: center 40%; }
.sus_report .reportBtn a span { width: 100%; max-width: 600px; text-align: center; color: #fff; font-family: LatoBold; position: absolute; font-size: 24px; top: 50%; transform: translateY(-50%); line-height: 28px; }

.goals .contentWrapper { padding-top: 20px; }
.goals .imgWrapper { margin: 30px 0; text-align: center; padding: 0 20px; }
.goals .imgWrapper img { max-width: 800px; }
.goals ul li { margin-bottom: 20px; }
.goals .reportBtn { margin: 30px 0; }
.goals .reportBtn a { display: block; width: 100%; height: 100%; position: relative; }
.goals .reportBtn a .btn_bg { width: 100%; max-width: 600px; height: 120px; background: url(../images/sustainability/report_btn_bg.jpg); background-size: cover; background-position: center 40%; }
.goals .reportBtn a span { width: 100%; max-width: 600px; text-align: center; color: #fff; font-family: LatoBold; position: absolute; font-size: 24px; top: 50%; transform: translateY(-50%); }

.sus_reportWrapper { background: #000; }
.sus_reportWrapper .row .block-left { background: url(../images/ir/home_csr_bg.jpg); background-size: cover; background-position: bottom; padding: 30px; }
.sus_reportWrapper .row .block-right { background: url(../images/sustainability/report_btn_bg.jpg); background-size: cover; background-position: center; padding: 30px; position: relative; }
.sus_reportWrapper .reportWrapper { padding: 20px; }
.sus_reportWrapper .reportWrapper .cover, .homeReports .reportWrapper .text { width: 100%; position: relative; }
.sus_reportWrapper .reportWrapper .cover { text-align: center; margin-bottom: 30px; }
.sus_reportWrapper .reportWrapper .cover img.cover-img { max-width: 211px; }
.sus_reportWrapper .reportWrapper .cover .dl_btn { position: absolute; bottom: 25px; margin-left: -30px; }
.sus_reportWrapper .reportWrapper .text div { color: #fff; }
.sus_reportWrapper .reportWrapper .text .year { font-size: 24px; font-family: LatoBold; }
.sus_reportWrapper .reportWrapper .text .title { font-size: 28px; font-family: LatoBold; margin: 10px 0 20px; }
.sus_reportWrapper .reportWrapper .text .desc { font-size: 17px; line-height: 25px; }
.sus_reportWrapper .row .block-right span { font-weight: bold; font-size: 24px; line-height: 28px; display: block; text-align: center; color: #fff; }
.sus_reportWrapper .row .block-right:hover span { color: #fd6a21; } /*#134242*/
.sus_reportWrapper .row .block-right .reportWrapper { padding: 60px 20px; }
.sus_reportWrapper .row .block-right a { position: absolute; width: 100%; height: 100%; top: 0; left: 0; }

.sus_reportWrappera { background: #000; }
.sus_reportWrappera .row .block-right { background: url(../images/ir/home_csr_bg.jpg); background-size: cover; background-position: bottom; padding: 30px; }
.sus_reportWrappera .row .block-left { background: url(../images/sustainability/report_btn_bg.jpg); background-size: cover; background-position: center; padding: 30px; position: relative; }
.sus_reportWrappera .reportWrapper { padding: 20px; }
.sus_reportWrappera .reportWrapper .cover, .homeReports .reportWrapper .text { width: 100%; position: relative; }
.sus_reportWrappera .reportWrapper .cover { text-align: center; margin-bottom: 30px; }
.sus_reportWrappera .reportWrapper .cover img.cover-img { max-width: 211px; }
.sus_reportWrappera .reportWrapper .cover .dl_btn { position: absolute; bottom: 25px; margin-left: -30px; }
.sus_reportWrappera .reportWrapper .text div { color: #fff; }
.sus_reportWrappera .reportWrapper .text .year { font-size: 24px; font-family: LatoBold; }
.sus_reportWrappera .reportWrapper .text .title { font-size: 28px; font-family: LatoBold; margin: 10px 0 20px; }
.sus_reportWrappera .reportWrapper .text .desc { font-size: 17px; line-height: 25px; }
.sus_reportWrappera .row .block-left span { font-weight: bold; font-size: 24px; line-height: 28px; display: block; text-align: center; color: #fff; }
.sus_reportWrappera .row .block-left:hover span { color: #fd6a21; } /*#134242*/
.sus_reportWrappera .row .block-left .reportWrapper { padding: 60px 20px; }
.sus_reportWrappera .row .block-left a { position: absolute; width: 100%; height: 100%; top: 0; left: 0; }


.footer { background: #bcbcbc; padding: 20px; }
.footer .footer-nav-wrapper { padding: 0 0 50px; }
.footer .footer-nav-list { font-size: 13px; width: 100%; padding: 30px 30px 0; }
.footer .footer-nav-list .title { text-transform: uppercase; font-weight: bold; line-height: 18px; color: #414141; margin-bottom: 8px; position: relative; cursor: pointer; }
.footer .footer-nav-list .title:before { content: ''; display: inline-block; width: 19px; height: 19px; background-size: 100%; position: absolute; background-image: url(../images/ir/plus.png); top: -2px; margin-left: -30px; }
.footer .footer-nav-list .title.act:before { background-image: url(../images/ir/minus.png); }
.footer .footer-nav-list .title > a { color: inherit; }
.footer .footer-nav-list ul { overflow: hidden; height: 0; opacity: 0; }
.footer .footer-nav-list ul li { font-size: 13px; line-height: 16px; padding: 4px 0; }
.footer .footer-bottom { color: #373737; font-size: 11px; line-height: 20px; }
.footer .footer-bottom .footer-bottom-wrapper > div { display: inline-block; }
.footer .footer-bottom-nav { margin-left: 5px; }
.footer .footer-bottom-nav a { text-decoration: underline; margin-right: 12px; }
.footer .footer-bottom-tool { margin-left: 6px; margin-top: 8px; }
.footer .footer-bottom-tool a { display: inline-block; margin-right: 15px; line-height: 0; vertical-align: text-bottom; }
.footer .footer-bottom-tool a span { width: 20px; height: 20px; display: inline-block; background-size: 100%; background-repeat: no-repeat; }
.footer .footer-bottom-tool a.emailalertBtn span { background-image: url(../images/global/icon_emailalert.png); }
.footer .footer-bottom-tool a.emailalertBtn:hover span { background-image: url(../images/global/icon_emailalert_on.png); }
.footer .footer-bottom-tool a.emailpageBtn span { background-image: url(../images/global/icon_emailpage.png); }
.footer .footer-bottom-tool a.emailpageBtn:hover span { background-image: url(../images/global/icon_emailpage_on.png); }
.footer .footer-bottom-tool a.shareBtn span { background-image: url(../images/global/icon_share.png); }
.footer .footer-bottom-tool a.shareBtn:hover span { background-image: url(../images/global/icon_share_on.png); }
.footer .footer-bottom-tool a.bookmarkBtn span { background-image: url(../images/global/icon_favourite.png); }
.footer .footer-bottom-tool a.bookmarkBtn:hover span { background-image: url(../images/global/icon_favourite_on.png); }
.footer .footer-bottom-tool a.printBtn span { background-image: url(../images/global/icon_print.png); }
.footer .footer-bottom-tool a.printBtn:hover span { background-image: url(../images/global/icon_print_on.png); }
.footer .footer-bottom-tool a.contactBtn span { background-image: url(../images/global/icon_contact.png); }
.footer .footer-bottom-tool a.contactBtn:hover span { background-image: url(../images/global/icon_contact_on.png); }

.sitemap .contentWrapper h3 { margin-bottom: 10px; }
.sitemap .contentWrapper h3 a { font-family: inherit; }
.sitemap .contentWrapper ul { margin-bottom: 20px; }

.langBtn { padding-bottom: 10px; }
.langBtn a { padding: 0 10px; font-size: 14px; color: #428fda; }
.langBtn a.act { color: initial; cursor: default; }

/*.newinvestor .section { padding: 30px 0; }
.newinvestor .section:nth-child(even) { background: #f2f2f2; }
.newinvestor .section a { display: block; position: relative; }
.newinvestor .section .bgImg { width: 100%; height: 200px; }
.newinvestor .section .bgImg.companyLink { background: url(../images/ir/newinvestor/banner6.jpg); background-position: center; }
.newinvestor .section .bgImg.factsheetLink { background: url(../images/ir/newinvestor/banner1.jpg); background-position: center; }
.newinvestor .section .bgImg.stockinfoLink { background: url(../images/ir/newinvestor/banner3.jpg); background-position: center; }
.newinvestor .section .bgImg.keydataLink { background: url(../images/ir/newinvestor/banner5.jpg); background-position: center; }
.newinvestor .section .bgImg.resultsLink { background: url(../images/ir/newinvestor/banner7.jpg); background-position: center; }
.newinvestor .section .bgImg.dividendLink { background: url(../images/ir/newinvestor/banner4.jpg); background-position: center; }
.newinvestor .section .bgImg.analystLink { background: url(../images/ir/newinvestor/banner8.jpg); background-position: center; }
.newinvestor .section .bgShadow { width: 100%; height: 60%; background-image: linear-gradient(to top, rgba(0,0,0,0.4), rgba(255,255,255,0)); position: absolute; bottom: 0; }
.newinvestor .section a .text { position: absolute; padding: 20px; left: 0; bottom: 0; }
.newinvestor .section a .text span { font-size: 30px; color: #fff; text-transform: uppercase; font-weight: bold; padding-left: 40px; }
.newinvestor .section a .text span.more:before { width: 30px; height: 30px; font-size: 17px; line-height: 28px; top: 2px; }*/
.newinvestor .section { padding: 20px 0 50px; }
.newinvestor .section .item { width: 100%; margin-bottom: 1%; }
.newinvestor .section .item a { display: block; width: 100%; height: 200px; background: #bbb; position: relative; background-size: cover; }
.newinvestor .section .item a.companyLink { background-image: url(../images/ir/newinvestor/company_bg.jpg); background-position: center; }
.newinvestor .section .item a.factsheetLink { background-image: url(../images/ir/newinvestor/factsheet_bg.jpg); background-position: center; }
.newinvestor .section .item a.stockinfoLink { background-image: url(../images/ir/newinvestor/stockinfo_bg.jpg); background-position: center; }
.newinvestor .section .item a.keydataLink { background-image: url(../images/ir/newinvestor/keydata_bg.jpg); background-position: center; }
.newinvestor .section .item a.resultsLink { background-image: url(../images/ir/newinvestor/results_bg.jpg); background-position: center; }
.newinvestor .section .item a.dividendLink { background-image: url(../images/ir/newinvestor/dividend_bg.jpg); background-position: center; }
.newinvestor .section .item a.analystLink { background-image: url(../images/ir/newinvestor/analyst_bg.jpg); background-position: center; }
.newinvestor .section .item a.faqLink { background-image: url(../images/ir/newinvestor/faq_bg.jpg); background-position: center; }
.newinvestor .section .item a > div { position: absolute; width: 100%; text-align: center; top: 50%; transform: translateY(-50%); color: #fff; font-size: 30px; padding: 30px 10px; }
.newinvestor .section .item a:hover > div { color: #fd6a21; } /*afe7ee*/

.calendar .calendarArea { padding: 20px 0; }
.calendar .calendarWrapper { padding: 20px 20px; border: 1px solid #f2f2f2; }
.calendar .calendarWrapper #my-calendar { max-width: 500px; margin: 0 auto; }
.calendar .calendarWrapper table, .calendar .calendarWrapper tr, .calendar .calendarWrapper td { font-family: LatoRegular, 'Microsoft JhengHei' !important; }
.calendar .eventsDetails { padding: 30px 0 10px; }
.calendar .eventsDetails > .row { padding-bottom: 20px; }
.calendar .eventsDetails .dateWrapper { display:table-cell; vertical-align: middle; padding-right: 20px; }
.calendar .eventsDetails .dateContainer { background: #b8252e; text-align: center; width: 60px; height: 60px; }
.calendar .eventsDetails .dateContainer .month { color: #fff; font-weight: bold; padding-top: 9px; font-size: 12px; text-transform: uppercase; }
.calendar .eventsDetails .dateContainer .date { color: #fff; font-weight: bold; padding-top: 1px; font-size: 19px; line-height: 30px; }
.calendar .eventsDetails .title { font-size: 18px; display: table-cell; vertical-align: middle; }
.calendar .eventArea { padding: 20px 0; }
.calendar .yearWrapper { padding: 10px 0 20px; border-bottom: 2px solid #f2f2f2; background: transparent; }
.calendar .yearWrapper .year { font-size: 36px; display: inline-block; line-height: 43px; }
.calendar .yearWrapper .yearSelect { display: inline-block; float: right; position: relative; width: 144px; height: 43px; padding: 8px 55px 8px 15px; background: #fff; border: 2px solid #7a126b; font-size: 20px; cursor: pointer; }
.calendar .yearWrapper .yearSelect:after { content: ''; display: block; width: 0; height: 0; border-left: 8px solid transparent; border-right: 8px solid transparent; border-top: 10px solid #7a126b; border-bottom: 0; position: absolute; right: 10px; top: calc(50% - 5px); }
.calendar .yearWrapper .yearSelect.act:after { border-top: 0; border-bottom: 10px solid #7a126b; }
.calendar .yearWrapper .yearSelect .dropdown { position: absolute; top: 100%; left: -2px; width: 144px; border: 2px solid #7a126b; max-height: 205px; overflow: auto; background: #fff; display: none; }
.calendar .yearWrapper .yearSelect.act .dropdown { display: block; }
.calendar .yearWrapper .yearSelect .dropdown li a { display: block; padding: 8px 15px; background: #fff; width: 100%; font-size: 20px; line-height: 20px; }
.calendar .checkBoxArea > .row { margin: 20px 0; }
.calendar .checkBoxArea label { display: inline-block; font-size: 18px; line-height: 28px; width: 100%; font-family: LatoRegular; }
.calendar .checkBoxArea input[type=checkbox] { margin-right: 10px; -webkit-appearance: checkbox; }
.calendar .eventResults { padding-top: 5px; }
.calendar .eventResults .table_findata tr { border-bottom: 1px solid #bfbfbf; }
.calendar .eventResults .table_findata tr td { text-align: left; vertical-align: top; }
.calendar .eventResults .table_findata tr td a { display: block; padding-top: 5px; }
.calendar .eventResults .table_findata tr td a .icon { display: table-cell; vertical-align: top; width: 18px; height: 20px; background-size: 100%; }
.calendar .eventResults .table_findata tr td a span { display: table-cell; vertical-align: middle; padding-left: 5px; }
/*.calendar .eventsDetails .addCal { display: table-cell; vertical-align: middle; padding-left: 10px; }*/
.calendar .eventResults .table_findata tr td a.addCal { padding-top: 0; }
.calendar .eventResults .table_findata tr td a.addCal img { width: 100%; min-width: 25px; }
.calendar .eventResults .calendarSelect { min-width: 190px; }
.calendar .eventResults .calendarSelect a span { display: inline-block !important; }
.calendar .eventResults .calendarSelect .item a { padding-top: 2px !important; }
.calendar .eventResults .calendarSelect .pointer { background-position: 82% center; }

.form .form-group { margin-bottom: 25px; }
.form .form-group label { display: block; font-size: 24px; line-height: 30px; margin-bottom: 5px; font-family: LatoRegular; }
.form .form-group input[type=text], .form .form-group textarea { width: 100%; max-width: 600px; border: 1px solid #ddd; padding: 10px 12px; font-size: 18px; font-family: LatoRegular; }
.form .form-group img { display: block; margin-bottom: 40px; }
.form .form-group .submitBtn, .form .form-group .resetBtn { font-size: 18px; line-height: 40px; color:#fff; width: 100px; cursor: pointer; font-family: LatoRegular; margin-right: 10px; }
.form .form-group .submitBtn { background-color: #4083d7; }
.form .form-group .resetBtn { background: #bcbcbc; }
.form .error_msg { color: #ff0000; font-size: 14px; margin-bottom: 5px; display: block; }

.faq .title { font-size: 30px; font-family: LatoBold; line-height: 40px; margin-bottom: 20px; }
.faq .btnRow { padding: 15px 0 25px; text-align: right; }
.faq .btnRow .expandBtn { color: #294e95; font-size: 20px; line-height: 30px; display: inline-block; cursor: pointer; padding-right: 10px; opacity: 0.8; }
.faq .btnRow .expandBtn:before { display: inline-block; content: ''; width: 25px; height: 25px; background: url(../images/ir/icon_expand.png) no-repeat; background-size: 100% auto; position: relative; top: 5px; margin-right: 5px; transform: rotate(180deg); }
.faq .btnRow .expandBtn.act:before { transform: rotate(0deg); }
.faq .btnRow .expandBtn:hover { opacity: 1; }
.faq .faqWrapper { margin-bottom: 50px; }
.faq .faqWrapper .faqRow { font-size: 17px; line-height: 30px; margin-bottom: 5px; }
.faq .faqWrapper .faqRow:nth-child(odd) { background: #f2f2f2; }
.faq .faqWrapper .faqRow .q { font-weight: bold; padding: 15px 25px; font-size: 20px; transition: background 0.5s; }
.faq .faqWrapper .faqRow .q a { display: block; position: relative; padding-right: 30px; }
.faq .faqWrapper .faqRow .q a:after { content: ''; display: inline-block; width: 25px; height: 25px; background: url(../images/ir/icon_expand_black.png) no-repeat; background-size: 100% auto; position: absolute; right: 0; top: 50%; transform: translateY(-50%) rotate(180deg); }
.faq .faqWrapper .faqRow .q a:hover { opacity: 0.8; cursor: pointer; }
.faq .faqWrapper .faqRow.act .q { background: #294e95; color: #fff; }
.faq .faqWrapper .faqRow.act .q a { color: #fff; }
.faq .faqWrapper .faqRow.act .q a:after { transform: translateY(-50%) rotate(0deg); background: url(../images/ir/icon_expand_white.png) no-repeat; background-size: 100% auto; }
.faq .faqWrapper .faqRow .a { padding: 20px 25px 30px; display: none; }
.faq .faqWrapper .faqRow .a a { color: #428fda; }
.faq .askWrapper { padding-top: 20px; }
.faq .askWrapper .block-left { background: url(../images/ir/ask_bg.jpg); background-size: cover; background-position: bottom; padding: 30px; position: relative; }
.faq .askWrapper .block-left span { font-weight: bold; font-size: 24px; line-height: 28px; display: block; text-align: center; color: #fff; }
.faq .askWrapper .block-left:hover span { color: #fd6a21; } 
.faq .askWrapper .block-left .askBtn { padding: 60px 20px; }
.faq .askWrapper .block-left a { position: absolute; width: 100%; height: 100%; top: 0; left: 0; }

.awards { padding: 50px 0; border-bottom: 1px solid #bcbcbc; }
.awards .icon, .awards .title { display: table-cell; vertical-align: middle; }
.awards .icon .img { width: 100px; height: 100px; text-align: center; background: url(../images/ir/icon_awards.png) no-repeat; background-size: contain; }
/* .awards:nth-child(4n+1) .icon .img { background: url(../images/ir/icon_awards_orange.png) no-repeat; background-size: contain; }
.awards:nth-child(4n+2) .icon .img { background: url(../images/ir/icon_awards_green.png) no-repeat; background-size: contain; }
.awards:nth-child(4n+3) .icon .img { background: url(../images/ir/icon_awards_pink.png) no-repeat; background-size: contain; }
.awards:nth-child(4n+4) .icon .img { background: url(../images/ir/icon_awards_blue.png) no-repeat; background-size: contain; } */
.awards .title { font-size: 18px; padding-left: 20px; line-height: 28px; }

.usefulLinks .section { padding: 10px 0 30px; }
.usefulLinks ul.listDot { padding: 0 10px; }
.usefulLinks ul.listDot li a { color: #7a126b; }

.multimedia .list { padding-top: 20px;}
.multimedia .item { width: 100%; margin-bottom: 3% }
.multimedia .item img { width: 100%;}
.multimedia .item a { display: block; position: relative; }
.multimedia .item .title { position: absolute; bottom: 0; background-color: rgba(0,0,0,0.5); background-image: url(../images/news/video_play_icon.png); background-repeat: no-repeat; background-position: right 10px bottom 11px; padding: 9px 54px 9px 9px; font-size: 14px; line-height: 1.3; color: #fff; height: 70px; transition: height 0.4s; }
.multimedia .item  .title:hover  { height: 90px; }
.multimedia  .current-video { padding: 20px 0 40px; width: 100%; }
.multimedia  .current-video .video-wrapper { width: 100%; }
.multimedia .current-video video { width: 100%; }

.bond .report { padding: 0 0 50px; border-bottom: none; display: flex; align-items: center; }
.bond .report:first-child { padding-top: 20px; }
.bond .report:last-child { border-bottom: 1px solid #bcbcbc; }
.bond .report .cover { border: 1px solid #bcbcbc; max-width: 285px; flex-shrink: 0; }

@media screen and (max-width: 767px) {
	
	.homeNews .stockQuote .stockFrame { display: table; }
	.homeNews .stockQuote .stockFrame .hkse { width: 100%; padding: 0; float: none; }
	.homeNews .stockQuote .stockFrame .otc { width: 100%; padding: 0; float: none; display: table-footer-group; }
	
	.tableNav tr td { width: auto; }
	.tableNav tr td:not(:first-child) { display: none; }
	.tableNav tr td.show, .tableNav tr td.prev, .tableNav tr td.next { display: table-cell; }
	.tableNav tr td.prev, .tableNav tr td.next { font-size: 18px; text-align: center; vertical-align: middle; width: 30px; }
	.tableNav tr td.prev span, .tableNav tr td.next span { color: #fff; cursor: pointer; visibility: hidden; }
	.tableNav tr td.prev span { visibility: visible; }
	.tableNav tr td.show { width: 25%; min-width: 100px; }
	
	table.tableCollapse, table.tableCollapse thead, table.tableCollapse tbody, table.tableCollapse tr, table.tableCollapse td { display: block; }				
	table.tableCollapse thead tr { position: absolute; top: -9999px; left: -9999px; }
	table.tableCollapse tbody tr { border-bottom: 1px solid #48c6dc; }
	table.tableCollapse tr td { position: relative; padding-left: 50%; }
	table.tableCollapse tr td:before { position: absolute; width: 50%; white-space: nowrap; height: 100%; top: 0; left: 0; padding: 10px; font-size: 12px; line-height: 15px; text-align: left; }
	table.tableCollapse tr td:first-child { font-weight: bold; }
	
	.dividend table#dividend_date tr td { text-align: right; }
	.dividend table#dividend_date td:nth-of-type(1):before { content: 'Dividend for'; }
	.dividend table#dividend_date td:nth-of-type(2):before { content: 'Ex-Dividend Date'; }
	.dividend table#dividend_date td:nth-of-type(3):before { content: 'Last Date for Lodging Transfer Form'; }
	.dividend table#dividend_date td:nth-of-type(4):before { content: 'Book Close Date*'; }
	.dividend table#dividend_date td:nth-of-type(5):before { content: 'Payment Date'; }
	.dividend table#dividend_date td:nth-of-type(6):before { content: 'Dividend per share (HK Cents)'; }
	.dividend p.remark { font-size: 14px; }
	
	.analyst .table_findata tr td { text-align: right; }
	.analyst .table_findata td:nth-of-type(1):before { content: 'Investment Bank'; }
	.analyst .table_findata td:nth-of-type(2):before { content: 'Analyst'; }
	.analyst .table_findata td:nth-of-type(3):before { content: 'Email'; }
	.analyst table.tableCollapse tr td { padding-left: 35%; }
	
	.contact .row { padding-bottom: 30px; }
	
	/*.keydata .chartWrapper .row { margin: 0 -20px; }*/
	.keydata .chartWrapper .row .chart { margin-bottom: 40px; }
	
	.table_findata#cashflow tr td:first-child { padding-right: 0; }
	
	/*.sus_report .report .cover, .sus_report .report .details { display: block; }
	.sus_report .report .cover { width: 100%; text-align: center; }
	.sus_report .report .details { text-align: center; padding-left: 0; padding-top: 20px; }
	.sus_report .reportList .slideBar .reportLink { padding: 20px; }*/
	
}

@media screen and (min-width: 768px) {
	.slick-prev { width: 50px; }
	.slick-next { right: 5px; width: 50px; }
	
	.sectionBanner .banner { position: relative; height: 350px; background-size: cover; }
	.sectionBanner .banner.ir { position: relative; height: 250px; background-size: cover; }
	
	.full-width { width: 100%; padding: 0 50px; }
	.contentWrapper .btn_dl span { width: 60px; height: 60px; }
	.contentWrapper .dlWrapper { height: 60px; }
	.contentWrapper .dlWrapper .btn_dl { top: calc(50% - 30px); }
	
	.homeNews .contentWrapper  { padding: 0 50px; }
	
	.homeData .revenue, .homeData .income { width: 50%; float: left; padding: 0px; }
	/*.homeData .revenue, .homeData .income { padding: 20px; }*/
	
	.homeBusiness .row .block-left { padding: 60px 50px; }
	.homeBusiness .row .block-right { background: #f2f2f2; padding: 60px 50px; }
	
	.homeReports .reportWrapper { display: table; width: 100%; }
	.homeReports .reportWrapper .cover, .homeReports .reportWrapper .text { display: table-cell; position: relative; }
	.homeReports .reportWrapper .cover { width: 45%; text-align: left; margin-bottom: 0; }
	.homeReports .reportWrapper .text { width: 55%; vertical-align: middle; }
	
	.homeLatest .item { width: 49.5%; float: left; margin-left: 1%; }
	.homeLatest .item:nth-child(odd) { margin-left: 0%; }
	/* 3 items */
	.homeTeam .item { width: 32.2%; float: left; margin-left: 1%; }
	/* 4 items
	.homeTeam .item { width: 49.5%; float: left; margin-left: 1%; }
	.homeTeam .item:nth-child(odd) { margin-left: 0%; }*/
	.homeTeam .contact { text-align: center; }
	.homeTeam .contact div.email, .homeTeam .contact div.tel { display: inline-block; }
	.homeTeam .contact div.tel { margin: 0 0 0 50px; }
	
	.announcement .dateWrapper .dateContainer { width: 90px; height: 90px; }
	.announcement .dateWrapper .month { font-size: 21px; }
	.announcement .dateWrapper .date { font-size: 48px; }
	.announcement .pdfLink { font-size: 24px; padding-left: 30px; }
	
	.corpnews .announcement .pdfLink .desc { font-size: 17px; }
	
	.report .details { padding-left: 60px; }
	.report .details .year { font-family: LatoBold; font-size: 24px; margin-bottom: 15px; }
	.report .details .title { font-family: LatoBold; font-size: 40px; }
	.report .details .btn_pdf { margin-top: 40px; }
	.report .details .btn_pdf span { display: inline-block; padding: 15px 40px; border-radius: 5px; background: #eaeef5; color: #294e95; font-size: 20px; font-family: LatoBold; }
	
	.results .cover, .results .details { display: table-cell; vertical-align: top; }
	.results .cover { width: 40%; }
	.results .details { padding-left: 50px; }
	.results .details .title { font-size: 40px; }
	.results .details .list { margin: 30px 15px; }
	.results .details .list a span { font-size: 24px; padding-left: 20px; }
	
	.events .details .date, .events .details .link a span { font-size: 20px; }
	.events .details .title { font-size: 24px; }
	
	.corpinfo .row .left, .corpinfo .row .right { float: left; }
	.corpinfo .row .left { width: 32%; padding-right: 40px; font-size: 24px; }
	.corpinfo .row .right { width: 68%; padding-right: 40px; font-size: 24px; }
	
	.chairman .row.lead .left { display: table-cell; width: 40%; vertical-align: bottom; }
	.chairman .row.lead .left img { margin: 0; }
	.chairman .row.lead .right { display: table-cell; vertical-align: middle; padding-right: 20px; }
	.chairman .row.lead .right p { padding-top: 20px; }
	
	.directors .item { width: 49.5%; float: left; margin-left: 1%; }
	.directors .item:nth-child(odd) { margin-left: 0%; }
	
	.subsidiaries h1.year { font-size: 38px; }
	
	.statement span.title { font-size: 30px; line-height: 60px; }
	
	.table_findata tr td { padding: 15px; font-size: 17px; line-height: 22px; }
	.table_findata tbody tr td.indent { padding-left: 30px; }
	
	.table_findata#income_quarterly tr td { font-size: 15px; }
	
	.table_findata#dividend_data tr td:first-child { width: 20%; }
		
	.keydata .tableWrapper .period { padding: 15px; }
	.keydata .tableWrapper .period span { width: 65%; font-size: 17px; }
	.keydata .chartWrapper .row { margin-bottom: 80px; }
	.keydata .chart { width: 50%; float: left; /*padding: 20px;*/ text-align: center; }
	
	.stockinfo .row .left, .stockinfo .row .right { font-size: 20px; float: left; }
	.stockinfo .row .left { width: 30%; }
	.stockinfo .row .right { width: 70%; }
	.stockinfo .row p, .stockinfo .row ul li { font-size: 20px; }
	
	.contact .item { width: 49.5%; float: left; margin-left: 1%; }
	.contact .item:nth-child(odd) { margin-left: 0%; }
	
	.message .reportBtn a .btn_bg, .goals .reportBtn a .btn_bg { width: 100%; height: 170px; max-width: 600px; }
	
	.sus_reportWrapper .reportWrapper { display: table; width: 100%; }
	.sus_reportWrapper .reportWrapper .cover, .sus_reportWrapper .reportWrapper .text { display: table-cell; position: relative; }
	.sus_reportWrapper .reportWrapper .cover { width: 45%; text-align: left; margin-bottom: 0; }
	.sus_reportWrapper .reportWrapper .text { width: 55%; vertical-align: middle; }	
	
	.sus_reportWrappera .reportWrapper { display: table; width: 100%; }
	.sus_reportWrappera .reportWrapper .cover, .sus_reportWrapper .reportWrapper .text { display: table-cell; position: relative; }
	.sus_reportWrappera .reportWrapper .cover { width: 45%; text-align: left; margin-bottom: 0; }
	.sus_reportWrappera .reportWrapper .text { width: 55%; vertical-align: middle; }	
	
	.footer .footer-nav-list { width: 33.3333%; float: left; }
	.footer .footer-bottom-tool { margin-left: 10px; margin-top: 0; }
	
	/*.newinvestor .section .bgImg { width: 100%; height: 280px; }
	.newinvestor .section a .text { padding: 30px; }
	.newinvestor .section a .text span { font-size: 40px; padding-left: 45px; }
	.newinvestor .section a .text span.more:before { width: 35px; height: 35px; font-size: 20px; line-height: 30px; top: 4px; }*/
	.newinvestor .section .item a { height: 270px; }
	.newinvestor .section .item { width: 49%; float: left; }
	.newinvestor .section .item:nth-child(even) { margin-left: 1%; }
	
	.calendar .calendarWrapper { float: left; width: 50%; padding: 20px 30px; }
	.calendar .eventsDetails { float: right; width: 50%; padding: 0px 30px; }
	.calendar .eventsDetails .dateContainer { background: #b8252e; text-align: center; width: 70px; height: 70px; }
	.calendar .eventsDetails .dateContainer .month { padding-top: 9px; font-size: 14px; }
	.calendar .eventsDetails .dateContainer .date { padding-top: 5px; font-size: 24px; }
	.calendar .eventsDetails .title { font-size: 22px; }
	.calendar .checkBoxArea .all, .calendar .checkBoxArea .cat { display: table; width: 100%; }
	.calendar .checkBoxArea label { display: table-cell; width: 33.33%; }
	
	.awards .icon .img { width: 140px; height: 140px; text-align: center; }
	.awards .title { font-size: 24px; padding-left: 30px; }
	
	.multimedia .item { width: 49%; float: left; }
	.multimedia .item:nth-child(even) { margin-left: 1%; }
}

@media screen and (min-width: 1024px) {
	.homeNews .contentWrapper { display: table; vertical-align: top; height: 1em; }
	.homeNews .newsWrapper, .homeNews .stockQuote { width: 50%; /*float: left;*/ padding: 0px; display: table-cell; height: 100%; }
	.homeNews .newsWrapper { padding-right: 20px; }
	.homeNews .stockQuote { padding-left:  60px; }
	.homeNews .stockQuote .story { margin-top: 0; height: calc(50% - 50px); }
	.homeNews .stockQuote .story.otc { margin-top: 20px; }
	.homeNews .stockQuote .story a .btn_bg { height: 100%; }
	
	.homeBusiness .row > div { display: table-cell; width: 50%; }	
	.homeReports .row { display: table; width: 100%; }
	.homeReports .row > div { display: table-cell; width: 50%; }
	.homeReports .reportWrapper .cover img.cover-img { width: 80%; }
	.homeReports .reportWrapper .cover .dl_btn { width: 20%; margin-left: -10%; }
	.homeReports .reportWrapper .cover .dl_btn img { width: 100%; max-width: 60px; }
	
	.homeLatest .item { width: 24.25%; }
	.homeLatest .item:nth-child(3) { margin-left: 1%; }
	/* 3 items */
	.homeTeam .item { width: 32.2%; }
	/* 4 items
	.homeTeam .item { width: 24.25%; }
	.homeTeam .item:nth-child(3) { margin-left: 1%; }*/
	
	.results .details { padding-left: 100px; }
	
	.events.content-with-img { direction: rtl; display: table; width: 100%; }
	.events.content-with-img .img, .events.content-with-img .details { display: table-cell; vertical-align: top; }
	.events.content-with-img .img { width: 40%; text-align: right; }
	.events.content-with-img .details { direction: ltr; padding-right: 50px; }
	
	.chairman .row.lead .right p { font-size: 30px; line-height: 42px; }
	
	.directors .item { width: 24.25%; }
	.directors .item:nth-child(3) { margin-left: 1%; }
	
	.table_findata#income_quarterly tr td { font-size: 17px; }
	
	.contact .item { width: 24.25%; }
	.contact .item:nth-child(4n-1) { margin-left: 1%; }
	
	.sus_reportWrapper .row { display: table; width: 100%; }
	.sus_reportWrapper .row > div { display: table-cell; width: 50%; vertical-align: middle; }
	.sus_reportWrapper .reportWrapper .cover img.cover-img { width: 80%; }
	.sus_reportWrapper .reportWrapper .cover .dl_btn { width: 20%; margin-left: -10%; }
	.sus_reportWrapper .reportWrapper .cover .dl_btn img { width: 100%; max-width: 60px; }
	
	.sus_reportWrappera .row { display: table; width: 100%; }
	.sus_reportWrappera .row > div { display: table-cell; width: 50%; vertical-align: middle; }
	.sus_reportWrappera .reportWrapper .cover img.cover-img { width: 80%; }
	.sus_reportWrappera .reportWrapper .cover .dl_btn { width: 20%; margin-left: -10%; }
	.sus_reportWrappera .reportWrapper .cover .dl_btn img { width: 100%; max-width: 60px; }
	
	.footer .footer-nav { width: 43%; display: table-cell; vertical-align: top; }
	.footer .footer-nav:last-child { width: 14%; }
	.footer .footer-nav:last-child .footer-nav-list { width: 100%; }
	
	.newinvestor .section .item { width: 24.25%; }
	.newinvestor .section .item:not(:first-child) { margin-left: 1%; }
	
	.faq .askWrapper { display: table; width: 100%; }
	.faq .askWrapper > div { display: table-cell; width: 50%; vertical-align: middle; }
	
	.multimedia .item { width: 24.25%; }
	.multimedia .item:nth-child(4n+3) { margin-left: 1%; }
	
}

@media screen and (min-width: 1024px) and (max-width: 1199px) {
	.multimedia .item .title { font-size: 12px; padding: 4px 50px 4px 9px; }
}

@media screen and (min-width: 1200px) {
	.homeNews .story { margin-top: 60px; }
	.homeNews .story a .btn_bg { width: 100%; height: 170px; }
	
	.homeTeam .contact div.address { display: inline-block; }
	.homeTeam .contact div.tel { margin: 0 50px; }
	
	/*.newinvestor .section a .text span { font-size: 50px; padding-left: 55px; }
	.newinvestor .section a .text span.more:before { width: 40px; height: 40px; font-size: 25px; line-height: 36px; top: 6px; }*/

}

@media screen and (min-width: 1600px) {
	.full-width { width: 100%; padding: 0 100px; }
	.homeBusiness .row .block-left { padding: 80px 100px; height: 664px; }
	.homeBusiness .row .block-right { padding: 80px 120px; }
	.homeReports .row .block-left { padding: 90px 100px; }
	.homeReports .row .block-right { padding: 90px 100px; }
}


/*** HEADER ***/
.header { width: 100%; top: 0; left: 0; z-index: 50; background: #fff;  }
.header .top { height: 40px; position: relative; }
.header .top .top-left { float: left; }
.header .top .top-right { position: absolute; right: 0; }
.header .top .logo { float: left; }

.header .top .search { float: left; }
.header .search .input-group { position: relative; }
.header .search .form-control { border: 1px solid #000; border-radius: 0 0 5px 5px; border-top: none; font-size: 13px; height: 36px; margin: 0; padding: 6px 25px 6px 10px; width: 90px; }
.header .search .btn-default { background: transparent; border: 0 none; color: #000; position: absolute; right: 0; top: 0; z-index: 3; margin: 0 2px 0 0; }
.header .search .btn-default span { background: url(../images/global/search-icon.jpg) no-repeat; background-size: 15px 16px; width: 17px; height: 18px; display: inline-block; cursor: pointer; margin-top: 8px; }

.header .top .lang { float: right; margin:0 5px; }
.header .top .lang > a { position: relative; display: block; width: 35px; height: 40px; float: right; }
.header .top .lang-btn span { display: none; line-height: 40px; padding-right: 35px; position: relative; font-size: 13px; }
.header .top .lang-btn:after { content: ''; background: url(../images/global/icon_globe.png) no-repeat; display: inline-block; width: 17px; height: 40px; background-position: center; position: absolute; top: 0; right: 10px; }
.header .top .lang-wrapper { position: relative; top: 0; z-index: 50; float: left; width: 0; overflow: hidden; transition: width 0.5s; height: 40px; }
.header .top .lang-wrapper.act { width: 70px; }
.header .top .lang-wrapper span { display: inline-block; line-height: 40px; padding: 0 8px; position: relative; font-size: 13px; }

@media (max-width: 767px) {
	.header .top { height: 90px; }
	.header .top .logo img { height: 30px; margin-top: 5px; }
	.header .top .mobile-nav { position: absolute; top: 42px; left: 0; }
	.header .top .nav { position: absolute; top: 90px; z-index: 30; background: #fff; width: 100%; max-height: calc(100vh - 90px); overflow-y: auto; height: 0; }
	.header .top .top-right { position: relative; }
	.header .top .search { position: absolute; width: calc(100% - 70px); right: 10px; top: 47px; }
	.header .search .form-control { border-top: 1px solid #000; border-radius: 5px; width: 100%; }
	.homeBannerWrapper, .sectionBannerWrapper{  margin-top:90px}
}

@media (min-width: 768px) {
	.header .search .form-control:focus { width: 400px; transition: width 0.3s ease-out; -webkit-transition: width 0.3s ease-out; }
	.homeBannerWrapper, .sectionBannerWrapper{  margin-top:40px}
}

@media (max-width: 1349px) {
	.header .top { border-bottom: 1px solid #777; }		
	.header .top .nav.act { height: auto !important; }
	.header .top .nav .nav-list .sub-nav-item { display: none; }
	.header .top .nav .nav-btn { overflow: hidden; }
	.header .top .nav .nav-btn > a { display: block; padding: 15px 20px 15px 15px; color: #fff; background: #000; font-size: 14px; border-bottom: 1px solid #fff; position: relative; }
	.header .top .nav .nav-btn > a:after { content: '\002B'; display: inline-block; float: right; font-size: 18px; line-height: 14px; }
	.header .top .nav .nav-btn .sub-nav-list ul li > a { display: block; padding: 15px 20px 15px 15px; font-size: 14px; line-height: 14px; border-bottom: 1px solid #777; }
	.header .top .nav .nav-btn .sub-nav-list ul li > a:after { content: '\003E'; display: inline-block; float: right; }
	.header .top .nav .nav-btn .nav-list { height: 0; overflow: hidden; }
	.header .top .nav .nav-btn.act a:after { content: '\2212'; }
	.header .top .nav .nav-btn.act .nav-list { height: auto;  }

	.header .top .mobile-nav { width: 52px; height: 46px; float: left; margin-right: 10px; cursor: pointer; z-index: 50; }
	.header .top .mobile-nav .mobile-nav-icon { position: relative; padding: 9px 12px; }
	.header .top .mobile-nav .mobile-nav-icon .line { display: block; background: #000; width: 26px; height: 3px; position: relative; left: 0; transition: all 0.3s; -webkit-transition: all 0.3s; }
	.header .top .mobile-nav .mobile-nav-icon .line.line1 { top: 0; }
	.header .top .mobile-nav .mobile-nav-icon .line.line2 { top: 4px; }
	.header .top .mobile-nav .mobile-nav-icon .line.line3 { top: 8px; }
	.header .top .mobile-nav.act .mobile-nav-icon .line1 { -webkit-transform: translateY(6px) translateX(0px) rotate(45deg); transform: translateY(6px) translateX(0px) rotate(45deg); }
	.header .top .mobile-nav.act .mobile-nav-icon .line2 { opacity: 0; }
	.header .top .mobile-nav.act .mobile-nav-icon .line3 { -webkit-transform: translateY(-8px) translateX(0px) rotate(-45deg); transform: translateY(-8px) translateX(0px) rotate(-45deg); }
	.header .top .mobile-nav .mobile-nav-text { width: 100%; }
	.header .top .mobile-nav .mobile-nav-text:after { content: 'EXPLORE'; display: block; text-align: center; font-size: 8px; position: relative; top: 4px; }
	.header .top .mobile-nav.act .mobile-nav-text:after { content: 'CLOSE'; }
}

@media (min-width: 768px) and (max-width: 1349px) {
	.header .top { height: 46px; }
	.header .top .logo img { height: 38px; }
	.header .top .nav { position: absolute; top: 46px; z-index: 30; background: #fff; width: 450px; max-height: calc(100vh - 46px); overflow-y: auto; height: 0; }
	.header .search { margin-top: 4px; }
	.header .search .form-control { border-top: 1px solid #000; border-radius: 5px; }
}

@media (min-width: 1350px) {
	.header .top { border-bottom: 1px solid #f2f2f2; }
	.header .top .nav, .header .top .nav .nav-btn { display: inline-block; margin-right: -4px; }
	.header .top .nav .nav-btn > a { line-height: 40px; padding: 0 10px; font-weight: bold; font-size: 14px; display: inline-block; text-rendering: optimizeLegibility !important; -webkit-font-smoothing: antialiased !important;}
	.header .top .nav .nav-list { position: absolute; left: 0; width: 100%; padding: 30px 30px 30px 125px; background: #f2f2f2; z-index: 30; display: none; }
	.header .top .nav .nav-btn a:hover { color: #7a126b; }
	.header .top .nav .nav-btn:hover > a { background: #f2f2f2; }
	.header .top .nav .nav-btn:hover .nav-list { display: block; }
	.header .top .nav .nav-list .sub-nav-list, .header .top .nav .nav-list .sub-nav-item { display: inline-block; vertical-align: top; }
	.header .top .nav .nav-list .sub-nav-list { width: 415px; }
	.header .top .nav .nav-list .sub-nav-list ul { padding: 0 20px 0 20px; }
	.header .top .nav .nav-list .sub-nav-list ul li { line-height: 32px; }
	.header .top .nav .nav-list .sub-nav-list ul li.act a { color: #7a126b; }
	.header .top .nav .nav-list .sub-nav-list ul li.act a:after { content: '\003E'; margin-left: 15px; }
	.header .top .nav .nav-list .sub-nav-item { /*float: right;*/ position: relative; width: calc(100% - 860px); }
	.header .top .nav .nav-list .sub-nav-item > a { display: block; width: 290px; position: relative; margin: auto; }
	.header .top .nav .nav-list .sub-nav-item .desc { position: absolute; bottom: 0; padding: 15px 20px; width: 100%; text-align: center; background: rgba(0,0,0,0.7); height: 109px; }
	/*.header .top .nav .nav-list .sub-nav-item .desc .title { margin-bottom: 5px; color: #fff; font-size: 42px; font-family: LatoLight; }
	.header .top .nav .nav-list .sub-nav-item .desc span { color: #fff; font-size: 14px; }*/
	.header .top .nav .nav-list .sub-nav-item .desc .title { position: absolute; width: 100%; left: 0; top: 50%; transform: translateY(-50%); font-size: 24px; color: #fff; font-family: LatoLight; }
	.header .top .nav .nav-list .sub-nav-item a:hover .desc .title { color: #46c6df; }
	.header .top .mobile-nav { display: none; }
	
	.header .top .nav .nav-list .sub-nav-item.about .img { width: 290px; height: 229px; background: url('../images/banner/about_bg.jpg'); background-size: cover; }
	.header .top .nav .nav-list .sub-nav-item.financial .img { width: 290px; height: 229px; background: url('../images/banner/results_bg.jpg'); background-size: cover; }
	.header .top .nav .nav-list .sub-nav-item.ir .img { width: 290px; height: 229px; background: url('../images/banner/ir_bg.jpg'); background-size: cover; }
	.header .top .nav .nav-list .sub-nav-item.publications .img { width: 290px; height: 229px; background: url('../images/banner/publications_bg.jpg'); background-size: cover; }
	.header .top .nav .nav-list .sub-nav-item.cg .img { width: 290px; height: 229px; background: url('../images/banner/cg_bg.jpg'); background-size: cover; }
	.header .top .nav .nav-list .sub-nav-item.sustainability .img { width: 290px; height: 229px; background: url('../images/banner/sustainability_bg.jpg'); background-size: cover; }
}

@media (min-width: 1500px) {
	.header .top .nav, .header .top .nav .nav-btn { margin-right: 0; }
	.header .top .nav .nav-btn > a { padding: 0 13px; }
	.header .top .search { margin-right: 10px; }
}

@media only screen {
	.header.sticky { position: fixed; }
}


/*** Popup animation ***/
.my-mfp-slide-bottom .zoom-anim-dialog {
	opacity: 0;
	-webkit-transition: all 0.2s ease-out;
	-moz-transition: all 0.2s ease-out;
	-o-transition: all 0.2s ease-out;
	transition: all 0.2s ease-out;
	-webkit-transform: translateY(-20px) perspective(600px) rotateX(10deg);
	-moz-transform: translateY(-20px) perspective(600px) rotateX(10deg);
	-ms-transform: translateY(-20px) perspective(600px) rotateX(10deg);
	-o-transform: translateY(-20px) perspective(600px) rotateX(10deg);
	transform: translateY(-20px) perspective(600px) rotateX(10deg);
}

.my-mfp-slide-bottom.mfp-ready .zoom-anim-dialog {
	opacity: 1;
	-webkit-transform: translateY(0) perspective(600px) rotateX(0);
	-moz-transform: translateY(0) perspective(600px) rotateX(0);
	-ms-transform: translateY(0) perspective(600px) rotateX(0);
	-o-transform: translateY(0) perspective(600px) rotateX(0);
	transform: translateY(0) perspective(600px) rotateX(0);
}

.my-mfp-slide-bottom.mfp-removing .zoom-anim-dialog {
	opacity: 0;
	-webkit-transform: translateY(-10px) perspective(600px) rotateX(10deg);
	-moz-transform: translateY(-10px) perspective(600px) rotateX(10deg);
	-ms-transform: translateY(-10px) perspective(600px) rotateX(10deg);
	-o-transform: translateY(-10px) perspective(600px) rotateX(10deg);
	transform: translateY(-10px) perspective(600px) rotateX(10deg);
}

.my-mfp-slide-bottom.mfp-bg {
	opacity: 0.01;
	-webkit-transition: opacity 0.3s ease-out;
	-moz-transition: opacity 0.3s ease-out;
	-o-transition: opacity 0.3s ease-out;
	transition: opacity 0.3s ease-out;
}

.my-mfp-slide-bottom.mfp-ready.mfp-bg {
	opacity: 0.8;
}

.my-mfp-slide-bottom.mfp-removing.mfp-bg {
	opacity: 0;
}
.dialog { background: #fff; padding: 20px 30px; margin: 40px auto; position: relative; max-width: 700px; width: 100%; }

.topPager{ padding-bottom:20px; line-height:22px; font-size:18px}
.topPager .current { font-weight:bold; color:#FC6A21}
.topPager .line { margin: 0 10px}