@charset "utf-8";
/* CSS Document */
.ar-main-row{
  padding-bottom: 0px;
}
.btn {
    width: 100%;
    background-color: #CDEAFB;
    color: #002A60;
    display: flex;
    padding: 3px 10px;
    margin-bottom: 5px;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.42857143;
    text-align: left;
    border-radius: 4px;
}
.btn_line {
    width: 100%;
    border: #002A60 solid 1px;
    background-color: #ffffff;
    color: #002A60;
    display: flex;
    padding: 3px 10px;
    margin-bottom: 5px;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.42857143;
    text-align: left;
    border-radius: 4px;
}
.btn_viewmore {
    border: 0px;
    background-color: #ffd400;
    color: #002A60!important;
    padding: 3px 20px;
    margin-bottom: 5px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.42857143;
    text-align: center;
    border-radius: 5px;
}
.bottom-btn .btn {
  padding: 10px 10px;
}
.btn_viewother {
  background-color: #ffffff;
  color: #002A60;
  display: inline-flex;
  padding: 3px 10px;
  margin-bottom: 5px;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.42857143;
  text-align: left;
  border-radius: 4px;
}

.icon_flex{
    align-items: center;
    display: inline-flex;
    justify-content: center;
    width: 20px;
    height: 20px;
}
.icon_viewfull{
    background: url(https://corporate.hkjc.com/corporate/common/images/history-and-reports/annual-report/icon_viewfull.png) no-repeat 100% 0;
}
.icon_download{
    background: url(https://corporate.hkjc.com/corporate/common/images/history-and-reports/annual-report/icon_download.png) no-repeat 100% 0;
}
.icon_select{
    background: url(https://corporate.hkjc.com/corporate/common/images/history-and-reports/annual-report/icon_select.png) no-repeat 100% 0;
}
.icon_viewother{
  background: url(https://corporate.hkjc.com/corporate/common/images/history-and-reports/annual-report/icon_viewother.png) no-repeat 100% 0;
}
.icon_text{
  white-space: normal;
    margin-left: 10px;
    align-items: center;
    display: inline-flex;
    justify-content: center;
    height: 20px;
    line-height: 1;
}
.big-title{
    margin-top: 30px;
    font-weight: 700;
    color: #ffffff;
    font-size: 26px;
    margin-bottom: 15px;
    padding-bottom: 5px;   
    /* border-bottom: #FBCA4D 1px solid;
    display: inline-block; */     
}

.big-title-common{
  font-weight: 700;
  line-height: 1;
  font-size: 21px;
  margin-bottom: 15px;
  display: inline-block;
}
.text-color-blue{
  color: #002A60;
}
.text-color-white{
  color: #ffffff;
}
.mb-15{margin-bottom: 15px;}
.mt-15{margin-top: 15px;}
.mt-30{margin-top: 30px;}
.content{
  margin-bottom: 15px;
}
.rtc{margin-top: 50px;
  font-weight: 700;
  color: #ffffff;
  font-size: 22px;
  line-height: 1.2;
  text-align:right;
}
.zh .rtc {
  margin-top: 50px;
  font-weight: 700;
  color: #ffffff;
  font-size: 26px;
  line-height: 1.2;
  text-align:right;
}	
.rtc img{width: 150px!important;}

.ar-row{
    padding: 30px;
}
/* .row_1{
    background: url(https://corporate.hkjc.com/corporate/common/images/history-and-reports/annual-report/2022-row-1-bg.jpg) no-repeat;
    background-color: #6ead5a;
    background-size: contain;
    background-position: left top;
    display: flex;
    justify-content: flex-end;
} */
.row_2{
  min-height: 400px;
    padding: 10px 30px;
  display: flex;
  justify-content: space-between;
  background: linear-gradient(180deg, #FFFFFF -7.72%, #CAE9FA 100%);
}
.row_3{
  display: flex;
}
.row_4{
  display: flex;
  background: url(https://corporate.hkjc.com/corporate/common/images/history-and-reports/annual-report/2022-row-4-bg.jpg) no-repeat;
  background-color: #cae9fa;
  background-size: cover;
  background-position: right top;  
  height: 400px; 
}
.row_5{
  display: flex;
  background: url(https://corporate.hkjc.com/corporate/common/images/history-and-reports/annual-report/2022-row-5-bg.jpg) no-repeat;
  background-color: #f7fdf6;
  background-size: cover;
  background-position: left top;  
  height: 400px; 
  justify-content: flex-end;   
}

.row_1_kv{
  display: flex;
  background: url(https://corporate.hkjc.com/corporate/common/images/history-and-reports/annual-report/2022-row-1-bg.jpg) no-repeat;
  background-color: #4a8841;
  background-size: contain;
  background-position: left top;  
  height: 400px; 
  justify-content: flex-end;   
}
.row_2 .item {align-self: center;}
.row_2 .one{width:50%;  align-self: center; padding-right: 7.5px;}
.row_2 .two{width:50%;  align-self: center; padding-left: 7.5px;}
.row_3 .item {line-height: 1;}
.row_3 .one{width:45%; background-color: #beda8f;padding: 30px 30px 15px 30px;}
.row_3 .two{width:55%;background-color: #cae2a6;padding: 30px 30px 15px 30px; }
.row_4 .item {}
.row_4 .one{width:50%; align-self: center; }
.row_5 .one{width:50%; align-self:center; }
.row_1_kv .one{width:49%; align-self:center; }
.zh .row_1_kv .one { width: 45%; align-self: center;}

.hightlights-row{display: flex;justify-content: space-between;margin-bottom: 15px;}
.hightlights-row{display: flex;justify-content: space-between;margin-bottom: 15px;}
.hightlights-row .item{font-size: 17px; font-weight: 700;line-height: 1;}
.hightlights-img-row{display: flex;justify-content: space-between;}
.hightlights-img-row .item{}
.big-money{font-size: 40px;font-weight: 700; line-height: 1;}
.mt-row{margin-top: 36px;}
.bottom-btn-row{
  display: flex;
  justify-content: space-between;
}
.bottom-btn-row .one{width:50%;  align-self: center; padding-right: 7.5px;}
.bottom-btn-row .two{width:50%; align-self: center; padding-left: 7.5px;}

/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1888; /* Sit on top */
  padding-top: 100px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: #fff;
  /* background-color: rgb(0,0,0);  Fallback color */
  /* background-color: rgba(0,0,0,0.7); Black w/ opacity */
}

/* Modal Content */
.modal-content {
  background-color: #ffffff;
  margin: auto;
  /* padding: 20px; */
  padding: 20px;
  width: 80%;
  border: 0px solid #002A60;
  box-shadow: 0 5px 15px rgb(0 0 0 / 0%);
  /* border: 4px solid #002A60;
  box-shadow: 0 5px 15px rgb(0 0 0 / 50%);*/
  border-radius: 0;
}


/* The Close Button */
.close {
  float: right;
  opacity: 1!important;
}
.close img{
  opacity: 1!important;
}

.close:hover,
.close:focus {
  opacity: 1!important;
  cursor: pointer;
}

/* Mobile menu */
.mobile-title{
  color: #002A60;
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 0px;
}
.mobile-sub-title{
  color: #002A60;
  font-size: 18px;
  display: inline-block;
  margin: 15px 0px;
}
.mobile-sub-title>a{
  padding-left: 0 !important;
}
/*
dropdown-ar LEVEL ONE
*/
ul.mobile-menu {
  padding: 10px!important;
  float: left!important;
  color: #002A60;
  font-size: 16px!important;
  width:100%;

}
ul.mobile-menu li {
  background: none!important;
  display: block!important;
  border-bottom: 1px solid #E8EAEE;
}
ul.mobile-menu li a {
  display: block!important;
  padding: 5px 15px;
  color: #002A60!important;
}
ul.mobile-menu li a:hover, 
ul.mobile-menu li a.active,
ul.dropdown-ar.dim a.current {
  color: #002A60!important;
  text-decoration: none!important;
}
ul.mobile-menu li.hover,
ul.mobile-menu li:hover {
  color: AE8701!important;
  position: relative!important;
}
ul.mobile-menu li.hover a {
  color: #fff!important;
  background-color: #002A60!important;
}
ul.mobile-menu li:hover > ul {
  display: block!important;
}
ul.mobile-menu a:hover,
ul.mobile-menu a:active,
ul.mobile-menu a.active,
ul.mobile-menu a.current {
  color: #002A60!important;
}




ul.mobile-menu ul {

}
/* === nav-block === */
.navbar,
.navbar-hkjc {
  border: 0px !important;
  color: rgba(255, 255, 255, 0.95);
  min-height: 0;
  margin: 0;
  min-height: 27px;
}
.navbar {
  -webkit-transition: height 0.2s ease-in-out;
  -moz-transition: height 0.2s ease-in-out;
  -ms-transition: height 0.2s ease-in-out;
  -o-transition: height 0.2s ease-in-out;
  transition: height 0.2s ease-in-out;
  min-height: 30px !important;
  margin-bottom: 0px !important;
}
.navbar .navbar-collapse {
  padding: 0;
}
.navbar .title {
  display: none;
  float: left;
  font-size: 24px;
  line-height: 26px;
  text-transform: uppercase;
  padding: 13px 0 0 10px;
}
/*
dropdown-ar LEVEL ONE
*/
ul.dropdown-ar {
  position: relative!important;
  z-index: 19!important;
  background: url(https://corporate.hkjc.com/corporate/common/images/subnav_bg.gif) repeat-x #D9DEE6;
  padding: 10px!important;
  float: left!important;
  width: 99%!important;
  font-size: 0.93em!important;
  text-align: center!important;
  /* 
		LEVEL TWO
	*/
}
ul.dropdown-ar li {
  font-weight: bold!important;
  zoom: 1!important;
  background: none!important;
  display: inline-block!important;
}
ul.dropdown-ar li a {
  display: block!important;
  padding: 0px 8px;
  border-right: 1px solid #002A60!important;
  color: #002A60!important;
}
ul.dropdown-ar li a:hover, 
ul.dropdown-ar li a.active,
ul.dropdown-ar.dim a.current {
  color: #002A60!important;
  text-decoration: none!important;
}
.nav-arrow-ar-right-space a {
  border-right: none!important;
    padding: 0px 20px 0px 8px!important;
  }
ul.dropdown-ar li.hover,
ul.dropdown-ar li:hover {
  color: AE8701!important;
  position: relative!important;
}
ul.dropdown-ar li.hover a {
  color: #fff!important;
  background-color: #002A60!important;
}
ul.dropdown-ar li:hover > ul {
  display: block!important;
}
ul.dropdown-ar a:hover,
ul.dropdown-ar a:active,
ul.dropdown-ar a.active,
ul.dropdown-ar a.current {
  color: #002A60!important;
}

ul.dropdown-ar.index a, ul.dropdown-ar.first a{
  color: #002A60!important;	
}


ul.dropdown-ar ul {
  text-align: left!important;
  width: auto!important;
  display: none!important;
  background-color: #fff!important;
  border: #002A60 2px solid!important;
  box-shadow: 0px 0px 0px rgba(130, 130, 130, 0)!important;
  position: absolute!important;
  top: 100%!important;
  left: 0!important;
  z-index: 800!important;
  /* 
			LEVEL THREE
		*/
}
ul.dropdown-ar ul li {
  font-weight: normal!important;
  color: #000!important;
  border-bottom: 1px dotted #ccc!important;
  float: none!important;
}
ul.dropdown-ar ul li a {
  border-right: none!important;
  width: 210px!important;
  display: inline-block!important;
  color: #022169!important;
  font-weight: bold!important;
  padding: 10px 17px 10px 10px!important;
  background-color: #fff!important;
}
ul.dropdown-ar ul li a:hover {
  color: #fff!important;
  background-color: #022169!important;
  text-decoration: none!important;
}
ul.dropdown-ar ul .dim ul li {
  font-weight: normal;
  color: #000;
  border-bottom: 1px dotted #ccc;
  float: none;
}
ul.dropdown-ar ul .dim ul li a {
  border-right: none;
  width: 210px;
  display: inline-block;
  color: #022169;
  font-weight: bold;
  padding: 7px 0px 7px 0px!important;
  background-color: #fff;
}
ul.dropdown-ar ul .dim ul li a:hover {
  color: #fff;
  background-color: #022169;
  text-decoration: none;
}
ul.dropdown-ar ul ul {
  left: 100%;
  top: 0;
}
ul.dropdown-ar.dim ul li a {
  color: #022169;
}
ul.dropdown-ar.dim ul li a:hover {
  color: #fff;
  background-color: #022169;
  text-decoration: none;
}
ul.dropdown-ar.dim li a {
  color: #C7B163;
}
ul.dropdown-ar.dim a:active,
ul.dropdown-ar.dim a.active,
ul.dropdown-ar.dim a.current {
  color: #AE8701;
}
.nav-arrow-ar {
  padding-right: 15px;
  background: url(https://corporate.hkjc.com/corporate/common/images/history-and-reports/annual-report/nav_arrow.png) no-repeat 100% 0;
  background-position: right 4px top 3px;
}
.nav-arrow-ar:hover {

}
.hidden-before-991{display: none;}

@media (max-width: 1200px) {
  .big-title {
    font-size: 25px;
}
.title-white-space{ white-space: nowrap;}
.row_5 {
  background-position: -49px top;
}
.row_1_kv {
  background-position: -49px top;
}
}

@media (max-width: 1200px) {
 .row_4 .one {
    width: 45% !important;
 }
 .row_5 .one {
    width: 45% !important;
 }
}


@media (max-width: 991px) {
  @media (max-width: 1200px) {
    .row_4 .one {
       width: 100% !important;
    }
    .row_5 .one {
       width: 100% !important;
    }
   }  
  .btn_line, .btn {
    padding: 8px 10px;
}
  .title-white-space{ white-space:pre-wrap;}

  .modal {
    padding-top: 0px;
  }
  .hidden-before-991{display: flex;}
  .hidden-after-991{display: none;}

  .big-title {
	margin-top: 0px;
	margin-bottom:0px;
 }  
 .rtc {
    margin-top: 45px;
	font-size: 18px;
 }
 .zh .rtc {
    margin-top: 40px;
	font-size: 22px;
 }
 
.row_1 {
  background-position: right 127px;
}
.row_3  {flex-direction: column}
.row_3 .item {}
.row_3 .one{width:100%; padding: 30px;}
.row_3 .two{width:100%; padding: 30px;}
.row_4 {
    background-size: 1000px;
    background-position: right bottom;
    height: 600px;
}

.row_4 .one{width:100%; align-self:flex-start;}
.row_5 {background-size: 950px;
    background-position: 0px bottom;
    /* height: 600px; */
	height: 730px;
	}
.row_5 .one{width:100%;align-self: flex-start;}    
.row_1_kv {
  background: url(https://corporate.hkjc.com/corporate/common/images/history-and-reports/annual-report/2022-row-1-bg-991.jpg) no-repeat;
  background-color: #4a8841;
  background-size: 750px;
  background-position: 0px bottom;
  height: 600px;}
.row_1_kv .one{width:100%;align-self: flex-start;} 
.zh .row_1_kv .one{width:100%;align-self: flex-start;} 

.mt-row {
  margin-top: 0px;
}

.row_2{
  padding: 30px;
  flex-flow: column;
  }
  .row_2 .one{width:100%;  align-self: center; padding: 0px;}
  .row_2 .two{width:100%; align-self: center;padding: 0px;}

.bottom-btn-row{
  flex-flow: column;
}
.bottom-btn-row .one{width:100%; align-self: center; padding: 0px;}
.bottom-btn-row .two{width:100%; align-self: center; padding: 0px;}
.btn{margin-bottom: 10px;}
.btn_line{margin-bottom: 10px;}

}

@media (max-width: 768px) {
.row_1 {
    background-position: right 127px;
}
.row_4 {
    height: 640px;
}
.row_5 {
    height: 800px;
}

.zh .row_5 {
    /* height: 730px; */
}

.content{
font-size: 14px;
}
}

@media (max-width: 767px) {
  .modal-content {
    width: 100%;

  }
  .hightlights-img-row {
    flex-direction: column;
  
  }
}

@media (max-width: 590px) {
.row_5 {
    background-position: 0px bottom;
    height: 780px;
}
/* .zh .row_5 {
    height: 700px;
} */
 .row_1_kv {
   background-position: 0px bottom;
   height: 605px;
 }
}

@media (max-width: 506px) {
 .row_1 {
  background-position: right bottom;
 }
  .big-title {
    font-size: 4.8vw;
    width: 100%;
 }
}
@media (max-width: 440px) {
  .ar-row {
    padding: 30px 10px;
  }  
  .big-title {
    font-size: 4.8vw;
    width: 100%;
}
.row_1 {
  background-size: 161%;
  background-position: right bottom;
}
.rtc {
  font-size: 3.1vw;
  margin-top: 45px;
}
.zh .rtc {
  font-size: 20px;
  margin-top: 35px;
}
.rtc img{
  width: 95px!important;
}
.hightlights-img-row .img-one{margin-bottom: 15px;}
.row_3 .one {
  padding: 30px 10px;
}
.row_3 .two {
  padding: 30px 10px;
}

.row_4 {background-size: 830px;
background-position: right bottom;
height: 600px;
}
.zh .row_4 {background-size: 830px;
background-position: right bottom;
height: 570px;
}

.row_5 {
    background-position: -20px bottom;
	background-size: 800px;
    height: 800px;
}
.zh .row_5 {
    background-position: -20px bottom;
	background-size: 800px;
    /* height: 700px; */
}
.row_1_kv {background-size: 600px;
  background-position: -10px bottom;
  height: 500px;
}

}


@media (max-width: 375px) {
 .row_5 {
    background-position: -20px bottom;
    background-size: 600px;
    height: 750px;
 } 
 .zh .row_5 {
    background-position: -20px bottom;
    background-size: 600px;
    /* height: 630px; */
 }
 .row_1_kv {
        background-size: 530px;
		background-position: -10px bottom;
		height: 450px;
    }
 .row_4 {
    background-size: 600px;
    height: 530px;
  }
.zh .row_4 {
    background-size: 600px;
    height: 460px;
  }
}

@media (max-width: 320px) {
  .row_1 {
    background-size: 165%;
    background-position: right bottom;
 } 
 .row_4 {
    background-size: 600px;
	height:540px;
 }
 .zh .row_4 {
    background-size: 600px;
	height:490px;
 }
 .row_5 {
    height: 830px;
 } 
.zh .row_5 {
    /* height: 670px; */
 } 

 .row_1_kv {
	 background-size: 430px;
    height: 380px;
    background-position: -10px bottom;
 }  
 .rtc {
    margin-top: 30px;
 }
 .zh .rtc img {
	 width: 95px!important;
 } 
}

#main #corporate-container .corporate-content-container a {
    color: #022169;
    word-wrap: break-word;
    line-height: normal;
    text-decoration: none;
}

#main #corporate-container .corporate-content-container a:hover {
    text-decoration: none;
}