@import "fonts.css";

.clearfix:after {visibility:hidden; display:block; font-size:0; content:" "; clear:both; height:0;}
.clearfix { display:inline-block; }
/* start commented backslash hack \*/
* html .clearfix { height:1%; }
.clearfix { display:block; }
/* close commented backslash hack */

html, body {font-family: "TexgyreRegular", Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif"; scroll-behavior: smooth;}
html {font-size:18px;}

.bold {font-weight:bold;}
.blue, p.blue, .article  p.blue h3.blue {color:#009BCE;}
.darkblue, p.darkblue, .article  p.darkblue {color:#004282 !important;}
.gray, p.gray, .article  p.gray {color:#92969c;}
.black {color:#231f20 !important;}
.white {color:#ffffff !important;}
.jt-remark {color: red; font-style: italic;}
.img-responsive {max-width:100%;}
h1, h2, h3, h4, h5, .highlight-table .highlight, .header-textline strong {font-family: "TexgyreBold", Arial, sans-serif;}
.font-MetaNormal, .sidebar, .right-sidebar, .footer-copyright {font-family: "Meta Normal", Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif"}
p, .page-title, .link-border a, .menu-items {font-family: 'TexgyreRegular', Arial, sans-serif;}
hr {border-top: 1px solid #009BCE;}

h1, .h1, .keyheader {font-size:2.5rem; line-height:1.5; color:#009BCE; font-weight:bold; margin-bottom:1rem; letter-spacing:0.025rem;}
h1.small {font-size: 2rem;}
h2, .h2 {font-size:1.125rem; line-height:1.5; color:#004282; font-weight:bold; margin-bottom:2rem; letter-spacing:0.025rem;}
h3, .h3, .keyintro {font-size:1.35rem; line-height:1.25; color:#009BCE; font-weight:bold; /*padding-top: 1rem;*/ margin-bottom: 1rem; letter-spacing:0.05rem; display:block;}
h4 {font-size:1rem; line-height:1.75; color:#231f20; font-weight:bold; margin:0; margin-bottom: 0rem; letter-spacing:0.05rem;}
h4.small {font-size: 1rem;}
h4.sub-small {font-size: 1rem; color:#231f20; margin-bottom: 0;}
h5 {font-size:0.85rem; line-height:1.5; color: #009BCE; font-weight:bold; margin:1.25rem 0; letter-spacing:0.05rem;}
h5.sub-small, h5.sub-3 {font-size:0.95rem; line-height:1.75; font-style: italic; color: #009BCE; margin-bottom: 0;}
h5.sub-small2, h5.sub-4 {font-size:0.85rem; line-height:1.75; font-style: italic; color: #231f20; margin-bottom: 0;}
h5.sub-small3, h5.sub-5 {font-size:0.8rem; line-height:1.75; font-style: italic; color: #004282;margin-bottom: 0;}
h6 {font-size:0.85rem; line-height:1.25; color: #009BCE; font-weight:bold; margin-bottom: 1rem; letter-spacing:0.025rem;}
h6.white {color:#ffffff; line-height:1.55rem;}
p {font-size:0.85rem; color:#231f20; line-height:1.65; margin-bottom: 1.4rem; border-color: #231f20;}
p.small {font-size:0.7rem; margin: 0 !important; padding: 0 0 0 10px !important;}
.remarks p.small {margin-left: 0.5rem !important; padding: 0 0 0 0px !important;}
p strong, li strong {font-family: "TexgyreBold", Arial, sans-serif;}
ul, li {font-size:0.85rem; color:#231f20; line-height:1.65; /*margin-bottom: 1.25rem;*/ border-color: #231f20;}
.chart-container, .chart-container p {/*font-family: "Meta Normal", Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif" !important;*/}
.key-name {font-family: "TexgyreBold", Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif"; color: #009BCE; margin-bottom: 0.25rem;}
.key-title {font-size: 0.8rem; font-weight: lighter;}
sup {vertical-align: super; font-size: smaller; padding: 0 0.125rem 0 0;}
.remarks {margin-top: 0.75rem; margin-bottom: 0.75rem;}
p.small sup {margin-left: -0.5rem; padding: 0; min-width: 0.5rem; display: inline-block;}
.nowrap {white-space: nowrap; font-family: inherit; font-size: inherit; font-weight: inherit; line-height: inherit;}
a {color:#004282; text-decoration: none;}
.i {font-style: italic; font-family: inherit; font-size: inherit; font-weight: inherit; line-height: inherit;}
strong {font-weight:bold; font-family: inherit; font-size: inherit; line-height: inherit;}

section {margin-bottom: 2.25rem;}
.container {max-width: 1270px; min-height: 1px; margin:0 auto; }
.container.transparent {background:transparent;}
.flex-container {max-width: 1270px; margin:0 auto; display: flex; flex-direction: row;}
.col{float:left; width:70px; margin-right:15px;}
.col.last{margin-right:0;}
.col-1 {width:70px;}
.col-2 {width:155px;}
.col-3 {width:240px;}
.col-4 {width:325px;}
.col-5 {width:410px;}
.col-6 {width:495px;}
.col-7 {width:580px;}
.col-8 {width:665px;}
.col-9 {width:750px;}
.col-10 {width:100%;}

.w50p {width:50%;}
.w65p {width:65%;}
.no-margin{margin:0 !important;}
.pt-0 {padding-top: 0 !important;}
.pt-05 {padding-top: 0.5rem !important;}
.pt-1 {padding-top: 1rem !important;}
.pb-0 {padding-bottom: 0 !important;}
.pb-01 {padding-bottom: 1px !important;}
.pl-0 {padding-left: 0 !important;}
.pr-0 {padding-right: 0 !important;}
.pr-1 {padding-right: 1rem !important;}
.mt-0 {margin-top: 0 !important;}
.mb-0 {margin-bottom: 0 !important;}
.mb-05 {margin-bottom: 0.5rem !important;}
.mb-1 {margin-bottom: 1rem !important;}
.ml-0 {margin-left: 0 !important;}
.mr-0 {margin-right: 0 !important;}
.max-full {max-width: 100% !important;}

/* Navigation */
.nav {position:fixed; top:0; display:block; width:100%; z-index:5;}
.nav-container {margin:0 auto; position:relative; min-height: 130px;}
.nav-upper {background-color: #FFFFFF; min-height: 130px;}
.logo {width:132px; height:73px; float:left; margin:30px 102px 0px 40px;}
.logo img {display:inline-block;max-height:73px;}
.header-textline {font-size:15px; line-height:1.5; color:#004282; float: left; margin: 62px 30px 0 0;}
.header-textline a {color:#004282;}
.nav-top-action { float:left; width: 16px; margin-top: 62px; transition:.2s linear;}
.header-right-block { float: right; padding-top:60px; display: flex; align-items: center; padding-right: 40px; font-size: 0.875rem;}
.header-right-block a { color:#004282; margin-left: 20px; line-height: 18px;text-decoration: none;}
.header-right-block a:hover,
.header-right-block a.active,
.header-right-block #sharing.open { color:#009BCE;}
.menu-icon {padding-right: 5px; width: 1.25rem; vertical-align: bottom;}
/*.menu-icon.download {
    background-image: url(../images/icon-download.png);
    background-position-y: center;
    background-position-x: 8px;
    background-repeat: no-repeat;
    background-size: 1.25rem;
    border: #009BCE 0px solid;
    padding: 0.5rem;
    font-size: 0.75rem;
}*/

#menu{width:16px;height:16px;display:block;cursor:pointer;-webkit-transform:rotate(0);transform:rotate(0);z-index:30}
#menu span{content:'';background-color:#004282;display:block;width:100%;height:2px;position:absolute;left:0;-webkit-transition:.25s ease-in-out;transition:.25s ease-in-out}
#menu span:nth-child(1){top:5px;-webkit-transform-origin:left center;transform-origin:left center}
#menu span:nth-child(2){top:10px;-webkit-transform-origin:left center;transform-origin:left center}
#menu span:nth-child(3){top:15px;-webkit-transform-origin:left center;transform-origin:left center}
.nav-container.open #menu span:nth-child(1){-webkit-transform:rotate(45deg);transform:rotate(45deg);top:5px;left:3px}
.nav-container.open #menu span:nth-child(2){width:0%;opacity:0}
.nav-container.open #menu span:nth-child(3){-webkit-transform:rotate(-45deg);transform:rotate(-45deg);top:16px;left:3px}

.nav .nav-body {padding:42px 0; display:none; background:rgba(0,66,130, 0.90); width:100%; height: 100vh; position:relative;}
.menu-items {width:100%; padding-left: 21.5%;height: 75px;}
.menu-items .active>a {color:#FFFFFF; font-weight:bold;}
.menu-items>li {width: 125px; height: 100%; float: left; padding: 0 30px 0 10px; position: relative;}
.menu-items li {border-left: 1px solid #009BCE;}
.menu-items li a {display:block; font-size:0.875rem; line-height:1.5; color:#A7A9AC;}
.menu-items li a:hover, .menu-items li a.active {font-weight: bold; color:#FFFFFF;}
.menu-items .menu-sub-items {padding-top: 2rem;}
.menu-sub-items li {font-family: "Meta Normal", Arial, sans-serif; font-weight: normal; margin:20px 0 0; border: none;}
.menu-sub-items li a {font-size:0.85rem; line-height:1.5; color:#A7A9AC; margin-bottom:0; letter-spacing:0.05rem; text-transform:initial; position: relative;}
.menu-sub-items li a.active{color:#FFFFFF; font-weight:bold;}
/*.menu-sub-items li a:before {content: ""; display: block; width: 20px; padding-bottom: 0.5rem; border-top: 2px solid #A7A9AC;}*/
.menu-sub-items li a:hover:before {border-color: #FFFFFF}
.menu-sub-items li a.active:before {border-color: #FFFFFF}

/* Sharing menu */
.nav .share-body {padding:38px 0; display:none; background:rgba(255,255,255, 0.95); width:100%; height: auto; position:relative;}
.nav .share-body .container {display: flex; width: 100%;}
.nav .share-body .menu-items li {color:#231f20;}
.nav .share-body .menu-items li:hover {color:#009BCE;}
.nav .share-body .menu-items>li {width: auto; cursor: pointer;}
.nav .share-body .menu-items {width: auto; margin-left: auto; margin-right: 10px; padding: 0;}

/* Body */
.main-body {min-height:350px; max-width: 1270px; margin: 0 auto;}
.main-image {width: 100%; height: 100vh; background-repeat: no-repeat; background-position-x: right; background-position-y: 130px;}
.bg-left .main-image {background-position-x: left;}
.bg-right .main-image {background-position-x: right;}
.top-white-space {height: 1rem; background-color: #fff; position: sticky; top: -1px; z-index: 10; border-top: 1px solid #fff;}
.top-white-space.fit-left {margin-right: -40px;}
.top-space-hide {margin-top: -1rem;}
.overview-area .top-white-space {height: 1rem; background-color: #F0EFE6; z-index: 11; border-top: 1px solid #F0EFE6; margin: 0 -40px;}
.overview-area .top-space-hide {margin-top: -0.75rem;}
#GroupOverview .main-image {background-image:url('../images/bg-GroupOverview.jpg');}
#CharimanStatement .main-image {background-image:url('../images/bg-CharimanStatement.jpg'); }
#FinancialReview .main-image {background-image:url('../images/bg-FinancialReview.jpg');}
#Sustainability .main-image {background-image:url('../images/bg-Sustainability.jpg'); }
#ManagingDirectorsReview .main-image {background-image:url('../images/bg-ManagingDirectorsReview.jpg'); }
#Highlights .main-image {background-image:url('../images/bg-Highlights.jpg'); }
.anchor {display: block; position: relative; top: -130px; visibility: hidden;}

.page-wrap {padding-top: 130px; min-height: calc(100vh - 130px);}
.content-full {float: left; width: 100%; max-width: 1270px;}
.cover-image {float: left; max-width: 260px; width: 80%;}
.cover-image img {width: 100%; height: auto; border: 1px solid #231916;}
.download-content {display: flex;}
.download-page-header {float: left; min-height: 6rem;}
.download-page-header h4 {font-size: 1.35rem; color: #009BCE; margin-top: 3rem; margin-bottom: 1rem;}
.download-left {float: left; width: 30%; padding-right: 1rem;}
.download-right {float: left; width: 70%;}
.download-table {display: table; width: 100%; margin-top: 6rem;}
.download-table .download-header,
.download-table .download-cell {display: table-row;}
.download-table .download-header h5 {margin-top: 0;}
.download-table .download-header .download-title, .download-table .download-header .download-size {display: table-cell; border-bottom: 1px solid #009BCE; padding: 0 0.75rem; vertical-align: top;}
.download-table .download-cell .download-item1, .download-table .download-cell .download-item2 {display: table-cell; border-bottom: 1px solid #ffffff; padding: 0 0.75rem;}
.download-table .download-header .download-title,
.download-table .download-cell .download-item1 {width: 70%;}
.download-table .download-header .download-size,
.download-table .download-cell .download-item2 {width: 30%; text-align: right;}
.download-table .download-header { }
.download-table p {margin: 0.25rem 0 0.5rem !important}
.download-table a {display: contents;}
.download-table a:hover p {color: #009BCE;}
.download-table a:hover .download-cell {background-color: rgba(0, 155, 207, 0.15);}

.content-wrap {width: 78.5%; max-width: 78.5%;}
.content {max-width: 917px; background-color: #FFFFFF; padding: 30px 40px 20px 40px;}
.content-right {margin-left: auto;}
.content-left {display: inline-flex;}
.content p, .com-section p {margin: 0.75rem 0 1.25rem; margin-top: 0; margin-bottom: 1.25rem;}
.content ul {padding: 0; margin-left: 1.125rem; margin-bottom: 1.4rem;}
.content li {margin-left: 0.25rem; margin-bottom:0.5rem;}
.content li::before,
.main-content li::before {content:"•"; font-size:0.7rem; line-height: 1; color:#231f20; vertical-align:initial; display:inline-block; margin-left:-1.5rem; padding-right: 0.775rem; padding-top: 3px;*/}
.content ul.bluedot li::before {color:#009BCE;}
.content ul.listLetter {font-size: 0.85rem; line-height: 1.65; margin-left: 1.5rem; counter-reset: letterlist;}
.content ul.listLetter > li:before {
    content: "(" counter(letterlist, lower-latin) ") ";
    counter-increment: letterlist;
    display: inline-block;
    width: 1rem;
    margin-left: -1.75rem;
    position:relative;;
    font-size: inherit;
    color: #231f20;
}
.content ul.list1st {padding:0; margin-left:1rem;}
.content ul.list2nd {margin-left: 0.9rem;}
.content .list1st li {margin-left: 0;}
.content .list1st li::before {content:"•"; font-size:0.7rem; line-height: 1; color:#231f20; vertical-align:initial; display:inline-block; margin-left:-1rem; padding-right: 0.5rem;}
.content .list2nd li::before {content:"ο"; font-size:0.7rem; line-height: 1; color:#231f20; vertical-align:initial; display:inline-block; margin-left:-1rem; padding-right: 0.5rem;}
.content p a, .content ul.list1st a, .content ul.list2nd a {color: #009BCE; white-space: nowrap;}
.content p a:hover, .content ul.list1st a:hover, .content ul.list2nd a:hover {color: #004282;}
#Sustainability .content .list1st li::before {padding-right: 0.35rem;}
#Sustainability .content .list2nd li::before {padding-right: 0.35rem;}

.full-content {padding: 0px 0 0 40px;}

/*** Companies Review ***/
.company p {padding-right: 40px;}
.com-section {padding-top: 130px; margin-top: -130px; margin-bottom: 4rem; overflow: unset;}
.com-content {padding-top: 130px;}
.com-image {min-height: 360px; height: 360px; margin-bottom: 2rem; background-size:cover; background-position: center;}
#JardinePacific .com-image { background-image:url('../images/com-JardinePacific.jpg');}
#Motors .com-image { background-image:url('../images/com-Motors.jpg');}
#HongkongLand .com-image { background-image:url('../images/com-HongkongLand.jpg');}
#DairyFarm .com-image { background-image:url('../images/com-DairyFarm.jpg');}
#MandarinOriental .com-image { background-image:url('../images/com-MandarinOriental.jpg');}
#JardineCycleCarriage .com-image { background-image:url('../images/com-JardineCycleCarriage.jpg');}
#Astra .com-image { background-image:url('../images/com-Astra.jpg');}
.inner-content {padding-left: 40px;}

.slides-wrap {padding-right: 40px; padding-top: 3rem;}
.flexslider {margin-bottom: 2rem !important; border: none !important;}
.flex-control-nav {bottom: 10px !important;}
.flex-direction-nav a {display: none !important;}
.flex-control-paging li a {background: #bcbec0 !important; -webkit-box-shadow: none !important; box-shadow: none !important;}
.flex-control-paging li a.flex-active, .flex-control-paging li a:hover {background: #fff !important;}
.slides-wrap ul {margin: unset;}
.slides-wrap ul.flex-direction-nav {display: none;}
.slides-wrap li::before {content: ""; display: none;}

.layout-left-sidebar {position: relative; }
.layout-left-sidebar .sidebar {background-color: #fff; max-width: 16%; margin-left: 40px; top: 160px; padding-top: 0px; padding-right: 1%; z-index:4; position: fixed;}
.layout-left-sidebar .sidebar .sidebar-menu li {margin-top: 1.115rem;}
.layout-left-sidebar .sidebar .sidebar-menu li a {display: block; padding-left: 24px; background:url('../images/icon-arrow.png') center left no-repeat; font-size: 0.89rem; line-height: 1.25;}
.layout-left-sidebar .sidebar .sidebar-menu li a.active,
.layout-left-sidebar .sidebar .sidebar-menu li a:hover {color: #009BCE;  background-image:url('../images/icon-arrow-blue.png');}
.layout-left-sidebar .main-content {flex: 1; max-width: 78.5%; margin-left: 21.5%; padding: 0px 0 0 0px; background: #FFFFFF;}
.layout-left-sidebar .main-content .page-title {font-size:1.125rem; line-height:1.5; color:#009BCE; margin-bottom: 0; letter-spacing:0.05rem;}
.layout-left-sidebar .main-content img {max-width: 100%;}
.layout-left-sidebar .sidebar .page-title {font-size:0.825rem; line-height:1.5; color:#009BCE; margin-bottom: 0.25rem; letter-spacing:0.0125rem;}

.overlay-layout-right-sidebar { padding-right: 21.5%; position: relative; overflow: hidden; }
.overlay-layout-right-sidebar .sidebar {background-color: #fff; position: absolute; top: 532px; right: 0; width: 21.5%; padding: 30px; height:100%; box-sizing: border-box; transition: all 0.3 ease-in-out;}
.overlay-layout-right-sidebar .sidebar .sidebar-menu li {margin-top: 1.115rem;}
.overlay-layout-right-sidebar .sidebar .sidebar-menu li a {display: block; padding-left: 24px; background:url('../images/icon-arrow.png') center left no-repeat; font-size: 0.89rem; line-height: 1.25;}
.overlay-layout-right-sidebar .sidebar .sidebar-menu li a.active,
.overlay-layout-right-sidebar .sidebar .sidebar-menu li a:hover {color: #009BCE;  background-image:url('../images/icon-arrow-blue.png');}
.right-sidebar {float: right; width: 21.5%;}
.right-sidebar .sidebar-wrap {background-color: #fff; padding: 30px; height: calc(100vh - 280px); height: 30rem;}
.right-sidebar .sidebar-top {height: 533px;}
.right-sidebar .sidebar-wrap .sidebar-menu li {margin-top: 1.115rem;}
.right-sidebar .sidebar-wrap .sidebar-menu li a {display: block; padding-left: 24px; background:url('../images/icon-arrow.png') center left no-repeat; font-size: 0.89rem; line-height: 1.25;}
.right-sidebar .sidebar-wrap .sidebar-menu li a.active,
.right-sidebar .sidebar-wrap .sidebar-menu li a:hover {color: #009BCE;  background-image:url('../images/icon-arrow-blue.png');}
.right-sidebar .sidebar-wrap.sticky {position: fixed; top: 280px; width: 17%;}

.top-blue-line {border-top: 2px solid #009BCE !important; margin-right: 40px;}
.highlight-table {border-top: 0px solid #009BCE; margin-bottom: 0rem;}
.highlight-table th, .highlight-table td {border-bottom: 1px solid #000000; padding: 12px 12px; font-size: 0.75rem; line-height: 1.5;}
.highlight-table th {border-bottom: 1px solid #000000;}
.highlight-table td {border-bottom: 1px solid #bcbec0}
.highlight-table th, .highlight-table td.to-right { text-align: right;}
.highlight-table .highlight {font-weight: bold; color: #009BCE}

.highlight-items { display: flex; flex-direction: row; margin-top: 2rem; margin-bottom: 0rem; padding-right: 40px; justify-content: center;}
.highlight-items .highlight-data {
  display: flex;
  flex: 1;
  margin: 0 8px;
  background: #ffffff;
  padding: 2rem 0.5rem;
  color: #004282;
  font-family: "TexgyreRegular", Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
  font-size: 1.25rem;
  line-height: 1.3rem;
  font-weight: lighter;
  letter-spacing: 0.05rem;
  display: inline-grid;
  justify-content: flex-start;
  max-width: 50%;
}
.highlight-items .highlight-data:first-child {margin-left: 0;}
.highlight-items .highlight-data:last-child {margin-right: 0;}
.highlight-items .highlight-data span {font-family: "TexgyreBold", Arial, sans-serif; font-size: 1rem; line-height: 1.3rem; font-weight: bold; padding-top: 0px;}
.highlight-items .highlight-data p {font-size: 2rem; font-weight: lighter; line-height: 1.3rem; color: #004282; margin: 0.5rem 0; padding-right: 0;}
.highlight-items .highlight-data .largeNumber {
    font-family: "TexgyreBold", Arial, sans-serif;
    font-size: 3rem;
    line-height: 1;
    font-weight: bolder;
    padding: 0.125rem 0.25rem 0.5rem;
}
.com-map {display: flex; flex-direction: row; padding: 0; padding-right: 40px; margin-bottom: 3.5rem;}
.com-map-block {float: left; display: flex; width: 75%; height: 75%}
.com-map-block img {width: 100%; height: 100%;}
.com-map-index {display: flex; max-width: 16%; padding-left: 1rem; padding-top: 40%;}
ul.com-map-list {margin-left: 0.95rem; padding: 0 0 1.15rem;}
.com-map-list li {
	font-size: 0.85rem;
    line-height: 1.65;
    font-weight: bold;
    color: #231f20;
    margin-bottom: 1.5rem;
    padding-left: 0.25rem;
    padding-left: 0;
    position: relative;
}
.com-map-list li::before {font-size: 1.125rem; line-height: 1; color:#004282; text-align:right; padding-right: 0.5rem; width: 1rem; position: absolute; left: 0;}
.com-map-list li.colorA::before {color: #f79437;}
.com-map-list li.colorB::before {color: #7961aa;}
.com-map-list li.colorC::before {color: #0099cd;}

.chart-container {display: flex; flex-direction: row; padding-right: 40px; padding-bottom: 0; margin-bottom: 1rem;}
.chart-header { }
.chart-header.max {min-height: 70px;}
.chart-container .chart-item {flex: 1; border-top: 1px solid #009BCE; padding-top: 5px; margin: 0 16px;}
.chart-container .chart-item:first-child {margin-left: 0;}
.chart-container .chart-item:last-child {margin-right: 0;}
.chart-container .chart-item h6, h6.special { color: #009BCE; font-size: 1rem; line-height: 1.75; padding-right: 0%;}

.doughnut-chart-container {padding-top: 0rem; display: flex; justify-content: flex-start; padding-left: 4rem; margin-bottom: 1rem;}
.doughnut-chart-area {height: 270px;}
.doughnut-chart {height: 100%;}
.doughnut-chart-legend {margin-left: 30px; padding-top: 14px; max-width: 50%; display: table;}
.doughnut-chart-legend-block {/*padding-top: 14px;*/}
.doughnut-chart-legend-block .doughnut-chart-legend {max-width: 100%; padding-top: 0;}
.doughnut-chart-legend-block h6 {margin-left: 30px;}
.doughnut-chart-legend p {float: left; margin: 0; line-height: 1.25; padding-right: 0;}
.doughnut-chart-legend span {font-size: 1.25rem; font-weight: bold; padding: 0 0.5rem;}
.doughnut-chart-legend .legend-cell {display: table-row;}
.doughnut-chart-legend .legend-box, 
.doughnut-chart-legend .legend-number, 
.doughnut-chart-legend .legend-item {display: table-cell; vertical-align: middle; text-align: left; padding-bottom: 0.725rem;}
.doughnut-chart-legend .legend-box, .doughnut-chart-legend .legend-number {width: 1%;}
.doughnut-chart-legend .legend-item {width: auto;}
.doughnut-chart-legend .legend-box .legend-color {height: 1.25rem;}
.doughnut-chart-legend .legend-box .legend-color.color1 {border-left: 1.25rem solid #00baeb;}
.doughnut-chart-legend .legend-box .legend-color.color2 {border-left: 1.25rem solid #d1be6b;}
.doughnut-chart-legend .legend-box .legend-color.color3 {border-left: 1.25rem solid #c797c5;}
.doughnut-chart-legend .legend-box .legend-color.color4 {border-left: 1.25rem solid #9ab2c7;}
.doughnut-chart-legend .legend-box .legend-color.color5 {border-left: 1.25rem solid #8fcea5;}
.doughnut-chart-legend .legend-box .legend-color.color6 {border-left: 1.25rem solid #b6c577;}
.doughnut-chart-legend .legend-box .legend-color.color7 {border-left: 1.25rem solid #6993cd;}
.doughnut-chart-legend .legend-box .legend-color.color8 {border-left: 1.25rem solid #f6eb9c;}
.doughnut-chart-legend .legend-box .legend-color.color9 {border-left: 1.25rem solid #bdbdb0;}

/*** Group Overview ***/
.overview-container {flex-wrap: wrap; display: flex;}
.overview-container .col {border-right: 0px #FFFFFF solid; margin:0;}
.overview-container .col.last {border-right: none;}
.overview-container .col-4 {width:33%;}
.overview-container .col-8 {width:66%;}
.overview-container .item {padding: 20px 0;}
.overview-container .item-image{width: 14.5rem; /*height: 4rem; display:flex;*/ align-items:center; margin-bottom: 0.5rem;}
.overview-container .item-image img{height: auto; width: 100%; padding-bottom: 0;}
.overview-area {
	background-image: url(../images/icon-arrow-down-white.png);
    background-position-y: top;
	background-position-x: 2.75rem;
    background-repeat: no-repeat;
	background-color: #F0EFE6;
	padding: 50px 40px 20px 40px;
}

/*** Highlights ***/
ul.highlights-list {margin-left: 0.95rem; padding: 0 0 1.15rem;}
/*.highlights-list li {font-family: "TexgyreBold", Arial, sans-serif;}*/
.highlights-list li {font-size: 1rem; line-height: 1.5rem; font-weight: bold; color:#004282; padding-left: 0.25rem; position: relative; }
.highlights-list li::before {font-size: 1.125rem; color:#004282; text-align:right; padding-right: 0.5rem; width: 1rem; position: absolute; left: 0;}
.sector-block h3.number {font-size: 2rem; line-height: 1;}
.sector-block p {font-size: 0.85rem; line-height: 1.45; font-weight: bold;}
.sector-block{text-align: center; width: 24.5%; display: inline-grid; padding: 0.5rem 0;}
.sector-image img {width: 93px; height: auto; padding-bottom: 0.5rem; align-self: baseline;}
.table-container {padding-bottom:4rem;}
.highlights-image-container{padding-bottom: 3rem; opacity: 1;}
.highlights-image-container{
	-webkit-transition-duration: 1000ms;
    -moz-transition-duration: 1000ms;
    -o-transition-duration: 1000ms;
    transition-duration: 1000ms;}
.highlights-image-container.ready{opacity: 1;}
.highlights-map-container{background-image: url(../images/highlights-geo-map.png); background-repeat: no-repeat; background-position-x: 5rem; background-size: contain; margin-bottom: 4rem; min-height: 26rem;}
.highlights-map-left {float: left; background-color: none; height: 400px; width: 59%;}
.highlights-map-right {float: left; background-color: none; min-height: 10px; width: 40%;}
.highlights-map-right.upper {padding-top: 6.5rem; color: #4fc6e0;}
.highlights-map-right.lower {padding-top: 2rem; color: #c6b256;}
.highlights-map-right .map-index {float: left;}
.highlights-map-right .map-pointer {float: left; width: 2.25rem; padding-top: 1.25rem; align-items: center;}
.highlights-map-right .map-pointer img {width: 60%; height: auto;}
.highlights-map-right .map-index {float: left;}
.highlights-map-right .map-number {height: auto; font-size: 2.25rem; font-weight: bold; margin-bottom: 0.4rem;}
.highlights-map-right .mapNumber {font-size: 3.5rem; font-weight: normal; padding-right: 2px;}
.highlights-map-right .map-location {font-family: "TexgyreBold", Arial, sans-serif; font-size: 1.2rem; font-weight: bold; margin-bottom: 0.5rem;}
.highlights-image {width:100%; height: auto;}
.financial-highlights {display: block; padding-bottom: 1.25rem;}
.financial-highlights p {margin: 0; font-weight: bold;}
.financial-highlights .largeNumber {font-family: "TexgyreBold", Arial, sans-serif; font-size: 2.5rem; font-weight: bolder; padding: 0 4px;}
.financial-highlights .highlights-block {width: 30%; min-width: 220px; max-height: 5.5rem; display: inline-grid; padding: 0.5rem 0.25rem 1rem 0; margin-right: 1rem;}
#Highlights .highlight-table {border-top: 0px solid #009BCE; margin-bottom: 3rem;}

/*** Companies Review ***/
.company ul.highlights-list {margin-bottom: 1.4rem;}
.highlight-boxes { display: flex; flex-direction: row; margin-bottom: 1rem; padding-right: 40px;}
.highlight-boxes .highlight-box {
  display: flex;
  flex: 1;
  margin: 0 8px;
  background: #F1F1EA;
  background-image: url(../images/icon-arrow-down-white.png);
	background-position-y: top;
	background-position-x: 1.75rem;
	background-repeat: no-repeat;
	background-size: 25px;
  padding: 2rem 1.5rem;
  color: #004282;
  font-size: 1rem;
  line-height: 1.3rem;
  font-weight: bold;
  letter-spacing: 0.05rem;
}
.highlight-boxes .highlight-box:first-child {margin-left: 0;}
.highlight-boxes .highlight-box:last-child {margin-right: 0;}

/*** Financial Review ***/
.financial-table {border-top: 0px solid #009BCE; margin-bottom: 0rem;}
.financial-table th { border-bottom: 1px solid #000000; padding: 12px 12px; font-size: 0.75rem; line-height: 1.5;}
.financial-table th, .financial-table td.to-right { text-align: right;}
.financial-table td { border-bottom: 1px solid #fff; padding: 12px 12px; font-size: 0.75rem; line-height: 1.5;}
.financial-table td.thin { border-bottom: 1px solid #bcbec0;}
.financial-table .highlight {font-weight: bold; color: #009BCE}
/*#FinancialReview .chart-container .chart-header h6 {color: #004282;}*/

/*** Sustainability ***/
.sd-block h3.number {font-size: 2rem; line-height: 1;}
.sd-block p {font-size: 0.85rem; line-height: 1.45; font-weight: bold; margin-bottom: 0.4rem;}
.sd-block {text-align: center; width: 17%; display: inline-grid; padding: 1.5rem 0.5rem 0.5rem 0;}
.sd-image img {width: 100px; height: auto; padding-bottom: 0.5rem; align-self: baseline;}
#Sustainability .slides-wrap {padding-right: 0;}
.sd2030-container {height: calc(64vw - 21.5%); height: 35vw; padding-bottom: 1rem;}
.sdStructure-container {height: calc(64vw - 21.5%); height: 32vw; padding-bottom: 2rem;}

.overlay { 
  position: fixed; 
  overflow-y: scroll;
  overscroll-behavior: contain;
  top: 280px; right: 0; bottom: 0; left: 0; 
}

.link-border{
	float: left;
	margin: 20px 0;
	margin-top: 0;
	display: flex;  
}
.link-border a{
	background-image: url(../images/icon-next-page.png);
	background-position-y: center;
	background-position-x: 8px;
	background-repeat: no-repeat;
	background-size: 1rem;
	font-weight: bold;
	font-size: 0.75rem;
	padding: 0.5rem;
}
.link-border a:hover{
  background-image: url(../images/icon-next-page-hover.png);
  color: #009bce !important;
}
.link-border a span { vertical-align: top; margin-left: 1.25rem; font-weight: bold;}

.next-page{
	padding-left: 40px;
	margin-top: 30px;
	display: flex;  
}
.next-page a{
	background-image: url(../images/icon-next-page.png);
	background-position-y: center;
	background-position-x: 4px;
	background-repeat: no-repeat;
	background-size: 1.125rem;
	border: #009BCE 0px solid;
	padding: 0.5rem;
	font-size: 1.125rem;
}
.next-page a:hover{
  background-image: url(../images/icon-next-page-hover.png);
  color: #009bce !important;
}
.next-page a span { vertical-align: top; margin-left: 1.25rem; font-weight: bold;}
.content-right .next-page {padding-left: 0;}

/* footer */
.footer{
  padding: 40px 0px;
  background-color: #FFFFFF;
}
.footer-copyright{
  float: right;
  padding-right: 40px;
}
.footer-copyright a, .footer-copyright span{
  color: #231916;
  font-size: 14px;
}
.footer-copyright a:hover, .footer-copyright a.active {color: #009BCE;}

#btn-goto-top {position: fixed; bottom: 36px; width: 35px; height: 35px; margin-left: 1235px; cursor: pointer;}
/*#btn-goto-top {position: sticky; float: right; bottom: 36px; width: 35px; height: 35px; cursor: pointer;}*/
#btn-goto-top img, #mobile-top img {width:35px; height: auto;}

.showMobile{display: none !important;}

.mobileHeaderText{background: #FFF; width: 80%; padding: 0.75rem 1rem 1rem; margin: 0; font-family: "TexgyreBold", Arial, sans-serif;}


@media (max-width:1270px) {
  .menu-items {padding-left: 40px;}
  .menu-items>li {padding: 0 10px;}
  .nav .share-body .menu-items {margin-right: 30px;}
}
@media (max-width:1100px) {
	.financial-highlights .highlights-block {width: 45%; min-width: 220px; max-height: 5.5rem;}
}
@media (max-width:996px) {
  html.noscroll {overflow: hidden;}
  .content-wrap {width: 80%;}
  .menu-items {padding-left: 40px;}
  .menu-items>li {padding: 0 10px;width: 105px; color: #ffffff;}
  .menu-items>li:last-child {border-bottom: none;}
  .menu-items.add-on .menu-icon {padding-right: 8px; vertical-align: middle;}
  .menu-items.add-on {padding-top: 0; padding-bottom: 5rem;}
  .menu-items.add-on div.sharing {display: inline-block; padding-left: 0.75rem;}
  .menu-items.add-on .sharing .menu-icon {padding-right: 0px;}
  .menu-items.add-on div.sharing.first {border-left: 1px solid #ffffff; margin-left: 0.75rem;}
  .menu-items.add-on .showMobile {display: block;}
  .menu-items.add-on > li:first-child {border-top: 1px solid #009BCE;}
  .header-right-block, .share-group {display: none;}
  .content-left {display: inline;}
  #btn-goto-top {display: none;}
  #mobile-top {position: fixed; bottom: 45px; right: 0; opacity: 1;}
/*  .right-sidebar{display: none;}*/

  /*** Highlight ***/
  .highlights-image{width: 100%;}
  .highlights-map-container {background-position-x: 3rem;}

  /**** Companies Review ***/
  .highlight-items .highlight-data br {display: none;}
  .highlight-items {padding-right: 0;}
  #Astra .highlight-items {display: table;}
  #Astra .highlight-items .highlight-data {display: inline-block; width: 37%; padding: 2rem 2.5rem; margin: 0;}
  
  /*** Sustainability ***/
  .sd-block {width: 28%; padding: 0.75rem 0.5rem 0.75rem 0;}

  .content p a, .content ul.list1st a, .content ul.list2nd a {white-space: initial;}

}

@media (max-width:768px) {
  h1, .h1, .keyheader {font-size: 1.75rem; line-height: 1.25;}
  h1.small {font-size: 1.5rem;}
  h2 {font-size: 1rem; margin-bottom: 1rem;}
  h3 {font-size: 1.125rem; margin-top: 0.0rem;}
  h4 {font-size: 1rem; padding-top: 0.0rem;}
  h5 {margin-top: 0.5rem;}
  h6 {margin-bottom: 1.5rem;}
  p {}
  img {max-width: 100%;}
  h2.mb-0 {margin-bottom: 1rem !important;}

  .hideMobile {display: none !important;}
  .showMobile {display: block !important;}

  .logo{ margin: 20px 24px 0px 15px; width: 110px; height: auto;}
  .header-textline{ font-size: 14px; line-height: 18px; margin: 45px 10px 0 0;}
  .header-right-block{ display: none; }
  .nav-top-action{float: right; width: 30px; margin-top: 42px; margin-right: 26px;}
  .nav-container{min-height: unset;}
  #menu {width: 36px; height: 40px;}
  #menu span:nth-child(1) {top: 5px;}
  #menu span:nth-child(2) {top: 15px;}
  #menu span:nth-child(3) {top: 25px;}
  #menu span {height: 3px;}
  .nav-container.open #menu span:nth-child(3) {top: 30px;}

  .nav .nav-body{position: absolute; width: 100%; height: calc(100vh - 110px); padding: 10px 0; overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch;}
  .nav-upper {min-height: 100px;}
  .menu-items {padding-left:20px;height: auto;}
  .menu-items li a {color: #FFFFFF;}
  .menu-items>li {float:none;width:100%;border-left:none;border-bottom:1px solid #009BCE;padding:10px 0px;}
  .menu-items .menu-sub-items {padding-top: 0.125rem;}
  .menu-items .menu-sub-items a {display: block; padding-left: 24px; background:url('../images/icon-arrow-white.png') center left no-repeat; font-size: 0.89rem; line-height: 1.25;}
  .menu-sub-items li {margin:15px 0 0;}

  .content{padding:10px 20px;}
  .full-content{padding:0;}
  .overview-area{padding:30px 20px 0; background-position-x: 1.5rem; background-size: 45px;}
  .overview-container .col{width: 100%;border-right:none;}
  .overview-container .item-image {margin-bottom: 1rem;}
  .link-border {width: 100%; /*margin-top: 0px;*/}
  .link-border a {font-size: 0.85rem;}

  .main-image{display: none;}
  .main-body{background-attachment:fixed; background-repeat: no-repeat; background-size: contain;}
  #at-a-Glance {padding-top: 100px; margin-top: -100px;}
  #GroupOverview .main-body {background-image:url('../images/bg-GroupOverview.jpg');}
  #Highlights .main-body{background-image: url('../images/bg-Highlights.jpg'); background-position-y: 100px;}
  #CharimanStatement .main-body {background-image:url('../images/bg-CharimanStatement.jpg'); background-position-y: -3rem;}
  #ManagingDirectorsReview .main-body {background-image:url('../images/bg-ManagingDirectorsReview.jpg'); background-position-y: 100px; background-position-x: right; background-size: auto;}
  #Sustainability .main-body {background-image:url('../images/bg-Sustainability.jpg'); background-position-y: -13rem;}
  #FinancialReview .main-body {background-image:url('../images/bg-FinancialReview.jpg'); background-position-y: -14rem;}

  .top-space-hide {margin-top: 0rem;}
  .overview-area .top-space-hide {margin-top: 0rem;}

	.doughnut-chart-legend { }
	.doughnut-chart-legend .legend-cell { }
	.doughnut-chart-legend p { }
	.doughnut-chart-legend span { }
	.doughnut-chart-legend .legend-box, .doughnut-chart-legend .legend-number {width: 1%;}
	.doughnut-chart-legend .legend-item {width: auto;}

  /*** Highlight ***/
  .highlights-list li {margin: 0;padding: 0.5rem;}
  .sector-block {width: 32%;}
  .sector-block:last-child {width: 96%;}

  /*** Managing Director's Review ***/ 
  .overlay-layout-right-sidebar{padding-right:0;}
  .doughnut-chart-container{flex-direction: column;}

  /**** Companies Review ***/
  .layout-left-sidebar .main-content {max-width: 100%;margin-left:0;}
  .com-section {padding-top: 100px; margin-top: -100px; margin-bottom: 2rem; overflow: unset;}
  .com-section { }
  .company .inner-content {padding: 20px;}
  .company .slides-wrap {padding-right: 0;}
  .company .sidebar {display: none;}
  .company p {padding-right: 0;}
  .company .chart-container {padding-right: 0;}
  .company .top-blue-line {padding-right: 0; margin-right: 0;}
  .highlight-boxes {flex-direction: column;padding-right:0;}
  .highlight-boxes .highlight-box{margin: 0 0 20px;}
  .com-content {padding-top: 0;margin-top: 100px;}
  .com-image {min-height: 200px; margin-bottom: 1rem; background-size: cover; background-position: center;}
  .doughnut-chart-container {justify-content: center; padding-left: 0;}
  .doughnut-chart-legend {margin-left: 0; padding-top: 1rem; max-width: 100%;}
  .doughnut-chart-legend-block {padding-top: 14px;}
  .doughnut-chart-legend-block .doughnut-chart-legend {max-width: 100%; padding-top: 0;}
  .doughnut-chart-legend-block h6 {margin-left: 0;}

  .chart-header, .chart-header.max {min-height: unset;}
  .highlight-items {margin-top: 1rem;}
  .highlight-items .highlight-data { }
  #HongkongLand .highlight-items .highlight-data {max-width: 70%; padding: 1rem 1.5rem;}
  #Astra .highlight-items .highlight-data {display: inline-block; min-width: unset; padding: 2rem 2.5rem 2rem 0;}

  .overlay{position: relative;overscroll-behavior:initial; top: 220px;}
  .content-wrap{width:100%; max-width: 100%;}
  .page-wrap {padding-top: 220px; min-height: calc(100vh - 220px);}
  .no-bg .page-wrap {padding-top: 100px;}

  /*** Sustainability ***/
  #Sustainability .page-wrap {padding-top: 100px;}
  .sd-block {width: 47%; padding: 0.75rem 0.5rem 0.75rem 0;}
  .sd2030-container {height: 65vw; padding-bottom: 1rem;}
  .sdStructure-container {height: 59vw; padding-bottom: 2rem;}

  .chart-container{display: block;}
  .chart-container .chart-item{margin: 0;}
  .content-full {background-color: transparent;}

  /*** Download ***/
  .download-content {display: block; background-color: #fff;}
  .download-left, .download-right {width: 100%; padding: 0;}
  .download-table {margin-top: 2rem;}
  .download-table .download-header .download-title, .download-table .download-header .download-size,
  .download-table .download-cell .download-item1, .download-table .download-cell .download-item2 {padding: 0;}

  .next-page{padding-left: 20px;}
  .footer{padding: 40px 20px}
  .footer-copyright{padding-right: 0; line-height: 1.5;}
}

@media (max-width:540px) {
  #GroupOverview .main-body {background-image:url('../images/bg-GroupOverview.jpg');}
  #Highlights .main-body{background-image: url('../images/bg-Highlights.jpg'); background-position-y: 100px;}
  #CharimanStatement .main-body {background-image:url('../images/bg-CharimanStatement.jpg'); background-position-y: 4rem;}
  #ManagingDirectorsReview .main-body {background-image:url('../images/bg-ManagingDirectorsReview.jpg'); background-position-y: 100px; background-position-x: right; background-size: 170%;}
  #Sustainability .main-body {background-image:url('../images/bg-Sustainability.jpg'); background-position-y: -1.75rem;}
  #FinancialReview .main-body {background-image:url('../images/bg-FinancialReview.jpg'); background-position-y: -2.5rem;}

    /*** Highlight ***/
  .sector-block {width: 49%;}
  .sector-block:last-child {width: 98%;}

  .financial-highlights .highlights-block {width: 90%; max-height: unset;}
  .financial-table th:first-child, .financial-table td:first-child {padding-left: 0;}
  .financial-table th:last-child, .financial-table td:last-child {padding-right: 0;}
  .highlight-table th:first-child, .highlight-table td:first-child {padding-left: 0;}
  .highlight-table th:last-child, .highlight-table td:last-child {padding-right: 0;}
  .highlights-map-container {background-position-x: 0rem; background-size: contain; min-height: 22rem;}
  .highlights-map-left {width: 100%; height: 85vw;}
  .highlights-map-right {width: 50%;}
  .highlights-map-right.upper {padding-top: 2.5rem;}
  .highlights-map-right.lower {padding-top: 2.5rem;}
  .highlights-map-right .map-pointer {padding-bottom: 0.5rem;}

  .com-map-block {width: 100%; padding-left: 0;}
  .com-map {display: block; padding: 0;}
  .com-map-index {max-width: unset; padding-top: 2rem; padding-left: 0; display: table;}
  ul.com-map-list {padding: 0;}
  .com-map-list li {margin-bottom: 0.5rem;}

  .highlight-items {display: table; flex-direction: column; margin-top: 1rem;}
  .highlight-items .highlight-data {display: block; width: auto; min-width: 60%; padding: 1rem 2.5rem 1rem 0; margin: 0;}
  .highlight-items .highlight-data span { }
  #HongkongLand .highlight-items .highlight-data {max-width: unset; padding: 1rem 1.5rem 1rem 0;}
  #Astra .highlight-items .highlight-data {display: inline-block; width: 80vw; min-width: 60%; max-width: unset; padding: 2rem 2.5rem 2rem 0;}
  #DairyFarm .highlight-items .highlight-data span {display: block;}
  #Astra .highlight-items .highlight-data span { }

  /*** Sustainability ***/
  .sd-block {width: 48.75%; padding: 0.75rem 0;}
  .sd2030-container {height: 75vw; padding-bottom: 1rem;}
  .sdStructure-container {height: 56vw; padding-bottom: 2rem;}

  .isDouble .doubleBar {width: 86% !important;}
  .legend .item p {width: 86% !important;}
}

@media (max-width:360px) {
	.logo {
		margin: 28px 20px 0px 15px;
		width: 80px;
	}
	.header-textline {
    	font-size: 12px;
    }
}