﻿
	/* Common
   	------------------------------------------------------------------------- */
	#pg-content .bg-blue      { background-color:#13426b }
	#pg-content .bg-red       { background-color:#f4364c } 
	#pg-content .bg-gray 	  { background-color:#ebebeb } 
	#pg-content .bg-lightblue, #pg-content #find-more .fm-blk .col2, #pg-content #find-more .fm-blk .col1-m  { background-color:#cedde5}


	#pg-content .txt-blue, #pg-content #act p 		{ color:#13426b; }
	#pg-content #act p 		{ height:120px; }
	#pg-content.tc #act p 		{ height:120px; }
	#pg-content .txt-red, #pg-content #act h4  		{ color:#f4364c }
	#pg-content .txt-lightBlue  					{ color:#d4dce5 }


	#pg-content .img-scale 		{ width:100%; height:auto;}
	#pg-content .clear { clear:both;}

	#pg-content 	{ line-height:1.8; font-weight:normal; }

	#pg-content h3, 
	#pg-content #act h3,
	#pg-content #leader h3,
	#pg-content #find .f-title,
	#pg-content .banner-title   { font-size:2.143em;}

	#pg-content h2  	{ font-size:60px; font-weight:bold } /*Around 35px*/
	#pg-content h3  	{ border-bottom:2px solid #f4364c; padding:0 0 10px 20px; margin-top:50px}  /*Around 30px*/
	#pg-content h2, #pg-content h3 				{ font-weight:normal; line-height:normal; margin-bottom:10px}
	#pg-content #act h3, #pg-content #leader h3 { margin-bottom:0}
	#pg-content #act h4 { font-size:1.286em; }

   	#pg-content .pos { padding:20px;}
	#pg-content div { position:relative;}
	

	/* Banner
   	------------------------------------------------------------------------- */

	#pg-content .banner img 	{ width:100%; height:auto}
	#pg-content .banner .banner-content  { padding:20px; border-top:3px solid #f4364c;}
	#pg-content .banner-title { line-height:normal; margin-bottom:15px}


	/* Three Integrated Core Market
   	------------------------------------------------------------------------- */

	#pg-content .row-height 		{ display:table; table-layout:fixed; width:100%; height:630px; line-height:1.4;}
	#pg-content .col-s-height 	 	{ display:table-cell; float:none; height:100%; vertical-align:top;}
	#pg-content .inside-full-height	{ height:100%; margin:0}
	
	#pg-content .icm-content,
	#pg-content .icm-content.bg-blue,
	#pg-content .icm-content.bg-lightblue   {  margin:10px; height:calc(100% - 20px );   }
	#pg-content .icm-content.bg-red  		{  background:#b11f2f url("../image/bg-red-circle.jpg") no-repeat;  background-position:bottom; background-size:100%;}
	#pg-content .icm-content.bg-blue  		{  background:#0b3050 url("../image/bg-blue-circle.jpg") no-repeat; background-position:bottom; background-size:100%;}
	#pg-content .icm-content.bg-lightblue   {  background:#505050 url("../image/bg-lightblue-circle.jpg") no-repeat; background-position:bottom; background-size:100%;}
	
	#pg-content .icm-content.bg-lightblue.alignright {  margin-right:-2px; }
	#pg-content .icm-content.bg-red.alignleft	{  margin-left:-2px;}


	#pg-content .icm-content-pos 	{ padding:10px 0; margin:10px 0 20px 0}
	#pg-content .xs-row-height  	{ display:table; table-layout:fixed; width:100%; height:100%; border-bottom:1px solid white; height:auto; color:#fff;}
	#pg-content .col-xs-height 		{ display:table-cell; float: none; height: 100%; vertical-align:top; padding:10px 20px;}

	#pg-content .col-xs-height.col1 { width:30%; font-weight:bold; font-size:22px; line-height:normal;}
	#pg-content .col-xs-height.col2 { width:70%; font-weight:bold;}

	#pg-content .bg-white { background:url("/images/HKEX/HKEX%20GROUP/bg-white.gif") no-repeat;}


	/* Leader in China Connectivity
   	------------------------------------------------------------------------- */

	#pg-content .leader-blk { background:#303030 url("../image/bg-leader.jpg") no-repeat; background-size:cover; background-position:center top;}
	#pg-content .circle-d 	{ display:block;}
	#pg-content .circle-m 	{ display:none;}


	/* Activities
   	------------------------------------------------------------------------- */
    #pg-content #act { z-index:10}
	#pg-content #act .act-bg { background:#ececec url("../image/bg-activities.jpg") no-repeat; background-size:cover; background-position:center;}
	#pg-content #act .act-pos { padding:20px 0}

	#pg-content .section	{ clear:both; padding:0px; margin:0 auto;  }
	#pg-content .col 		{ float:left; margin:1% 0 1% 2%; min-height:360px}

	#pg-content .group:before,
	#pg-content .group:after { content:""; display:table; }
	#pg-content .group:after { clear:both;}
	#pg-content .group { zoom:1; /* For IE 6/7 */ }
	#pg-content .span_1_of_3  { width:30.6%; }

	#pg-content #act ul 	{ margin:15px 0 0 0; padding:0}
	#pg-content #act ul li  { margin:5px 0; padding:5px 15px 5px 20px; list-style:none; position:relative; line-height:1.4;}
	#pg-content #act ul li:before  { content:"•";  position:absolute; top:6px; left:10px;}
	#pg-content #act ul li a   		{ text-decoration:none;  transition: all 0.3s ease-out; cursor:pointer;}
	#pg-content #act ul li a:hover   { text-decoration:none;  color:#0066cc;}
	#pg-content #act a:hover { text-decoration:none;}


	/* Find Out More
   	------------------------------------------------------------------------- */
   	#pg-content #find { margin-top:50px}
	#pg-content #find .f-pos 		{ padding:20px; border-top: 3px solid #f4364c; background:#13426b url("/images/HKEX/HKEX%20GROUP/img-circle.jpg") no-repeat; background-position:right center}
  	#pg-content #find .f-title  	{ line-height:normal; color:#fff;}
	#pg-content #find .f-link-pos 	{ padding:20px;}
	#pg-content #find .f-link-pos ul 	{ margin:0; padding:0}
	#pg-content #find .f-link-pos ul li { margin:0; padding:5px 25px 5px 20px; list-style:none; position:relative; width:32%; 
										  font-size:1.286em; line-height:normal;
										  display:inline-block; vertical-align:top;}
	#pg-content #find .f-link-pos ul li a 		{ color:#13426b; transition: all 0.3s ease-out;  }
  	#pg-content #find .f-link-pos ul li a:hover { color:#333; text-decoration:none }
	#pg-content #find ul li:before 	{ content:"•";  position:absolute; top:6px; left:5px; color:#13426b;}



/* ==========================================================================
	Media Style
============================================================================= */

	@media only screen and (max-width: 1350px) {
	#pg-content .bg-white { background-image:none}

	#pg-content #act p 		{ height:160px; }
	#pg-content.tc #act p 		{ height:120px; }

	}

	@media only screen and (max-width: 1100px) {

	#pg-content #act p 		{ height:180px; }
	#pg-content.tc #act p 		{ height:120px; }

	#pg-content .xs-row-height  	{ display:block; table-layout:inherit;}
	#pg-content .col-xs-height 		{ display:block; height:auto; padding:0}

	#pg-content .col-xs-height.col1 { width:100%; padding:10px 10px 5px 10px;}
	#pg-content .col-xs-height.col2 { width:100%; padding:5px 10px 10px 10px}

	}

	@media only screen and (max-width: 1024px) {

	#pg-content #act p 		{ height:120px; }
	#pg-content.tc #act p 		{ height:120px; }

	#pg-content .col 				 { min-height:350px; margin:1% 0 1% 4%; }
	#pg-content .span_1_of_3  		 { width:44%;}
	#pg-content #find .f-link-pos ul li { font-size:1.2em; }
	/*#pg-content #act ul a:hover li  { background-color:#fff; color:#333}*/

	}

	@media only screen and (max-width: 980px) {

	#pg-content #act p 		{ height:150px; }
	#pg-content.tc #act p 		{ height:120px; }

	}

	@media only screen and (max-width: 900px) {

	#pg-content .col 	{ min-height:380px; margin:1% 0 1% 4%; }
	#pg-content.tc .col 	{ min-height:320px; margin:1% 0 1% 4%; }
	#pg-content #act p 		{ height:170px; }
	#pg-content.tc #act p 		{ height:120px; }

	}


	@media only screen and (max-width: 860px) {

	#pg-content .col 	{ min-height:400px; margin:1% 0 1% 4%; }
	#pg-content.tc .col 	{ min-height:320px; margin:1% 0 1% 4%; }
	#pg-content #act p 		{ height:180px; }
	#pg-content.tc #act p 		{ height:120px; }

	}

	@media only screen and (max-width: 815px) {

	#pg-content .col 	{ min-height:420px; margin:1% 0 1% 4%; }
	#pg-content.tc .col 	{ min-height:360px; margin:1% 0 1% 4%; }
	#pg-content #act p 		{ height:200px; }
	#pg-content.tc #act p 		{ height:140px; }

	}

	@media only screen and (max-width: 768px) {

	#pg-content .col 	{ min-height:350px; margin:1% 0 1% 4%; }
	#pg-content.tc .col 	{ min-height:320px; margin:1% 0 1% 4%; }
	#pg-content #act p 		{ height:120px; }
	#pg-content.tc #act p 		{ height:120px; }

	}
	
	@media only screen and (max-width: 745px) {
	#pg-content h2  { font-size:36px;}

	#pg-content #act p 		{ height:140px; }
	#pg-content.tc #act p 		{ height:120px; }
	
	/*#pg-content #act ul li:after  { content:">";  padding-left:8px}*/

	#pg-content #find .f-pos 							{ padding:10px 20px;}
  	#pg-content #find .f-link-pos ul li 				{ width:100%; font-size:1em; display:block; padding-bottom:20px}
	#pg-content #find .f-link-pos ul li:first-child br 	{ display:none }
	#pg-content #find .f-link-pos ul li:last-child  	{ padding-bottom:0 }
	#pg-content #find .f-title   { font-size:1.286em;}
	/*#pg-content #find ul li:after 	{ content:">"; padding-left:10px; color:#13426b;}*/

	}

	@media only screen and (max-width: 600px) {

	#pg-content .col 	{ min-height:400px; margin:1% 0 1% 4%; }
	#pg-content.tc .col 	{ min-height:350px; margin:1% 0 1% 4%; }
	#pg-content #act p 		{ height:190px; }
	#pg-content.tc #act p 		{ height:140px; }

	}
	

	@media only screen and (max-width: 479px) {

	#pg-content #act p 		{ height:auto; }
	#pg-content.tc #act p 		{ height:auto; }

	#pg-content .banner-title>br  { display:none} 
	#pg-content.tc .banner-title>br  { display:block;} 

	#pg-content .xs-row-height  	{ display:table; table-layout:fixed; width:100%; height:100%; border-bottom:1px solid white; height:auto; color:#fff;}
	#pg-content .col-xs-height 		{ display:table-cell; float: none; height: 100%; vertical-align:top; padding:10px 20px;}

	#pg-content .row-height 		 { display:block; table-layout:inherit; width:100%; height:auto;}
	#pg-content .col-s-height 	 	 { display:block; float:none; height:auto; }

	#pg-content .col-xs-height.col1 { width:30%; padding:10px 10px 5px 10px; font-size:18px }
	#pg-content .col-xs-height.col2 { width:70%; padding:10px 10px 5px 10px }

	#pg-content .col 				 { min-height:inherit; height:auto; margin:20px 20px}
	#pg-content .span_1_of_3  		 { width:calc(100% - 40px);  }
	#pg-content .span_1_of_3:first-child  		 { margin-top:0}

	#pg-content .circle-d 	{ display:none;}
	#pg-content .circle-m 	{ display:block;}

	#pg-content .icm-content.bg-lightblue.alignright { margin-left:0px; margin-right:0px; }
	#pg-content .icm-content.bg-blue {  margin-left:0px; margin-right:0px; }
	#pg-content .icm-content.bg-red.alignleft	{ margin-left:0px; margin-right:0px; }

	}
