/* Common
	-------------------------------------------- */
	.council-intro 	{ margin-bottom:10px}
	.annual-intro 	{ margin-bottom:50px}

	#body.en .sp-coltable-title 			{ font-size:18px; line-height:1.2; color:#333}
	#body.cn .sp-coltable-title 			{ font-size:18px; line-height:1.2; color:#333}

	.sp-gray-blk 						{ background-color:#ececec;  padding:15px 15px 5px 15px; margin-bottom:15px }
	.sp-gray-blk h4 					{ color:#333; font-size:100%; margin-bottom:5px}
	.sp-gray-blk .sp-item 				{ padding-bottom:12px}
	.sp-gray-blk .sp-item p 			{ width:100%; display:block; padding-bottom:8px;}
	.sp-gray-blk .sp-item p:last-child  { padding-bottom:0}
	.sp-gray-blk a						{ text-decoration:none; cursor:pointer; line-height:normal;
										  transition: all 0.3s ease-out;}
	.sp-gray-blk .sp-item a 			{ text-decoration:none; display:block; cursor:pointer; line-height:normal;
										  transition: all 0.3s ease-out;}
	.sp-gray-blk a:hover,
	.sp-gray-blk .sp-item a:hover 		{ color:#022b4c}
	.sp-gray-blk .sp-item .sp-jobtitle {font-size:85%; font-style:italic; padding:0; margin:0; margin-top:-10px}
	.sp-gray-blk em{ font-size:85%; }

	.sp-gray-blk ul,
	.sp-gray-blk ul.sp-list 			{ margin:0; padding:0}
	.sp-gray-blk ul li,
	.sp-gray-blk ul.sp-list li		 	{ margin:0 0 0 20px; padding:0 0 5px 0; text-decoration:none;}
	.sp-gray-blk ul a,
	.sp-gray-blk ul.sp-list a 			{ text-decoration:none; color:#333; transition: all 0.3s ease-out;}
	.sp-gray-blk ul a:hover,
	.sp-gray-blk ul.sp-list a:hover 	{ color:#e84124}


	/* Council Administration Staff
	-------------------------------------------- */
	.patron,
	.patron:after 		{ background-color:#333;}
	.patron 			{ position:relative; line-height:1; color:#fff; display:inline; white-space:pre-wrap; border: 0 solid #333;
	 					  border-width: 0.25em 0; /* 0.25em is roughly equal to one space character. */}
	.patron:after 		{ content: ""; position:absolute; top:-0.25em; right:100%; bottom:-0.25em; width:0.25em;}
	.patron > span 		{ position:relative; z-index:1;}
	.general h4.patron  { color:#fff}  

	table.sp3							{ width:100%; border-collapse:collapse; border:none; margin-bottom:60px; margin-top:60px}
	table.sp3 tbody tr th 				{ width:calc(100% / 3); vertical-align:top; text-align:left; padding-bottom:10px;}
	table.sp3 tbody tr td 				{ vertical-align:top; text-align:left; padding-right:50px; transition: all 0.3s ease-out;}
	table.sp3 div.fist-child 			{ border-top:5px solid #333}
	table.sp3 tbody tr td:last-child 	{ padding-right:0}
	table.sp3 .sp3-title-m {display: none;}
	
	.sp3-fwrp{ width: 100%; overflow: hidden; }
	.sp3-fwrp .sp-title{  margin-top:60px; }
	.sp3-flex {
		width: calc(100% + 50px);
		display: flex;
		flex-direction: column;
		flex-wrap: wrap;
		margin-bottom:60px;
		margin-top:10px;
	}
	.sp3-flex.sp4{
		flex-direction: row;
	}
	.sp3-flex .sp-gray-blk{
		margin: 0;
	}
	.sp3-flex .wrp{
		width: 33.33%;
		padding: 0;
		padding-right: 50px;
		padding-bottom: 15px;
		margin: 0;
		flex-basis: auto;
		flex-shrink: 0;
		flex-grow: 0;
	}
	.sp3-title {
		font-weight: bold;
		display: block;
	}
	

	/* Annual Report
	-------------------------------------------- */
	table.sp4							{ width:65%; border-collapse:collapse; border:none;}
	table.sp4 tbody tr th 				{ width:calc(100% / 2); vertical-align:top; text-align:left; padding-bottom:10px}
	table.sp4 tbody tr td 				{ vertical-align:top; text-align:left; padding-right:50px;}
	table.sp4 .sp4-title-m 			    { display:none}


	#body.en table.sp4 tbody tr td div 			{ font-size:15px}
	#body.cn table.sp4 tbody tr td div 			{ font-size:15px}



	/* ==========================================================================
	    Media Style
	============================================================================= */
	@media only screen and (max-width:1400px) {
	table.sp3 tbody tr td 	{ padding-right:30px}
	table.sp4				{ width:70%;}
	.sp3-flex {width: calc(100% + 30px);}
	.sp3-flex .wrp{ padding-right: 30px; }
	}

	@media only screen and (max-width:1280px) {
	table.sp4				{ width:90%;}
	}

	@media only screen and (max-width:1200px) {
	table.sp3 tbody tr td 			{ padding-right:20px}
	table.sp4						{ width:100%;}
	.sp3-flex {width: calc(100% + 20px);}
	.sp3-flex .wrp{ padding-right: 20px; }
	#body.en .sp3-flex .wrp{ font-size: 90%; }
	#body.cn .sp3-flex .wrp{ font-size: 100%; }

	#body.en	table.sp3 div,
	#body.en .sp-gray-blk ul.sp-list li 			{ font-size:90%}
	#body.cn	table.sp3 div,
	#body.cn .sp-gray-blk ul.sp-list li 			{ font-size:100%}
	#body.en .sp-coltable-title 		{ font-size:18px}
	#body.cn .sp-coltable-title 		{ font-size:18px}
	
	}

	@media only screen and (max-width:1024px) {
    table.sp3 tbody tr td { padding-right:10px}
	.sp3-flex {width: calc(100% + 10px);}
	.sp3-flex .wrp{ padding-right: 10px; }
	}

	@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 1) {
	table.sp4 tbody tr th:first-child 	{ width:50%}
	table.sp4 tbody tr th 				{ width:50%;}
	table.sp4 tbody tr td:last-child	{  padding-right:0}
	.sp3-flex .wrp{ width: 50%; }

	}

	@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 1) {	
	table.sp4	{ width:80%;}
	table.sp4 tbody tr th:first-child { width:45%}
	table.sp4 tbody tr th:last-child  { width:55%}
	}

	@media only screen and (max-width:767px) {
	.annual-intro 	{ margin-bottom:30px}

	table.sp3,
	table.sp3 tbody,
	table.sp3 tbody tr,
	table.sp3 tbody tr th,
	table.sp3 tbody tr td 		{ width:100%; display:block;}

	table.sp3 tbody tr th 		{ display:none}
	table.sp3 tbody tr td 		{ padding-right:0}

	table.sp3 tbody tr td 		{ margin-bottom:10px; padding-right:0}
	table.sp3,
	table.sp4 { margin-top:50px}

	table.sp3 .sp3-title-m,
	table.sp4 .sp4-title-m 		 	{ width:100%; display:block; font-size:20px; line-height:1.2; margin:50px 0 10px 0; padding:0}

	table.sp4,
	table.sp4 tbody,
	table.sp4 tbody tr,
	table.sp4 tbody tr th, 			
	table.sp4 tbody tr td,
	table.sp4 tbody tr th:first-child,
	table.sp4 tbody tr th:last-child  	{ width:100%; display:block;}
	table.sp4 tbody tr td 	{ padding-right:0}
	table.sp4 tbody tr th,
	table.sp4 tbody tr th:first-child,
	table.sp4 tbody tr th:last-child 	{ display:none;}
	
	
	.sp3-flex {width:100%; }
	.sp3-flex .wrp{ padding-right: 10px; width: 100%; }
	
	
	}