	


	table { width:100%; border-collapse:collapse;}
	/* Zebra striping */
	tr:nth-of-type(odd) { background:#eee; }
	tr:nth-of-type(even) { background:#fff; }

	th 		{ background:#125ba6; color:#fff; }
	td, th 	{ padding:6px; border:1px solid #dedede; text-align:left; }
	.tb-v2-mobile, .tb-v3-mobile {display:none;}
	.table-v2 td, .table-v3 td, .table-v2 th, .table-v3 th{ display:table-cell; border: 1px solid #dedede;}
	
	.table-v2 tr, .table-v3 tr { display:table-row;width: 100%; }
	
	/* ==========================================================================
		Media Styles
	============================================================================= */

	@media only screen and (min-width: 1025px){
		.table-v2 .tb th, .table-v3 .tb th{   font-weight:normal;  padding-top: .9em; padding-bottom: .7em;}

		.table-v2 .tb td:first-child, .table-v3 .tb td:first-child{    background-color: #074584;color: #fff;line-height: 2;}
	}
	
	@media only screen and (max-width:1024px){
		.table-v2 td, .table-v3 td{width: 100vw;}
		.table-v2 .tb, .table-v3 .tb{display:none;}
		.tb-v2-mobile, .tb-v3-mobile {display:block;}
	}
	
	@media only screen and (max-width: 745px), (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait)  {
	/* • Common style for responsive table"
	------------------------------------------------------------------------- */
	/* table, table.pro-licensing1, thead, tbody, th, td, tr { display:block;} */
	/* thead tr 	{ position:absolute; top:-9999px; left:-9999px; } */
	td 			{ border:none; border-bottom: 1px solid #dedede; position:relative;
				  /*padding-left:35%;*/}
	

	td:before 	{ position: absolute; top:6px; left:12px;
				  /*width:calc(65% - 16px);*/ padding-right:10px; white-space:nowrap; }
		

	/* • Table for "product-licensing"
	------------------------------------------------------------------------- */
	table.pro-licensing1 thead tr th:nth-of-type(1) { width:100%; display:inline-block}
	table.pro-licensing1 td:nth-of-type(1)  { background-color:#125ba6; color:#fff; position:relative }
	table.pro-licensing1 tr td:first-child  { width:calc(100% - 24px); padding-left:12px; padding-right:12px; display:inline-block; 
											  position:relative; }

	table.pro-licensing1 td:nth-of-type(1):before { width:calc(100% - 16px); left:0; position:relative; display:inline-block; }
	table.pro-licensing1 td:nth-of-type(1):before { content: "交易所買賣基金名稱:"; margin-bottom:10px }
	table.pro-licensing1 td:nth-of-type(2):before { content: "Fund Manager:";}
	table.pro-licensing1 td:nth-of-type(3):before { content: "Underlying Index:"; }
	table.pro-licensing1 td:nth-of-type(4):before { content: "Exchange:"; }


	table.pro-licensing2 thead tr th:nth-of-type(1) { width:100%; display:inline-block}
	table.pro-licensing2 td:nth-of-type(1)  { background-color:#125ba6; color:#fff; position:relative }
	table.pro-licensing2 tr td:first-child  { width:calc(100% - 24px); padding-left:12px; padding-right:12px; display:inline-block; 
											  position:relative; }


	table.pro-licensing2 td:nth-of-type(1):before { width:calc(100% - 16px); left:0; position:relative; display:inline-block; }
	table.pro-licensing2 td:nth-of-type(1):before { content: "期貨名稱:"; margin-bottom:10px }
	table.pro-licensing2 td:nth-of-type(2):before { content: "相關指數:";}
	table.pro-licensing2 td:nth-of-type(3):before { content: "交易所:"; }

	}


    @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) { 
	table.pro-licensing1 td 		{ padding-left: 30%; }
	table.pro-licensing1 td:before  { width: calc(30% - 22px); padding-right: 10px;  } 
	/* 22px is:
	• class "td:before" { padding-right:10px;}" & 
	• class "table.pro-licensing1 tr td:first-child" { padding-left:12px}" */
 
	table.pro-licensing2 td 		{ padding-left: 30%; }
	table.pro-licensing2 td:before  { width: calc(30% - 22px); padding-right: 10px; } 

    }

    @media only screen and (max-width: 745px){
    table.pro-licensing1 td 		{ padding-left:35% }
	table.pro-licensing1 td:before  { width:calc(35% - 22px); }
 
    table.pro-licensing2 td 		{ padding-left:35% }
	table.pro-licensing2 td:before  { width:calc(35% - 22px); }

    }

    @media only screen and (max-width: 479px){
    table.pro-licensing1 td 		{ padding-left:50% }
	table.pro-licensing1 td:before  { width:calc(50% - 22px); }

    table.pro-licensing2 td 		{ padding-left:50% }
	table.pro-licensing2 td:before  { width:calc(50% - 22px);}

    }
	


