#body .general .clearfix::after 	{ content: ""; clear: both; display: table;}


  	/* • General (Change color)
   	==========================================================================*/
 	#body .general a      	{ color:#06c; text-decoration:none; cursor:pointer;
						  /* These are technically the same, but use both */
						  overflow-wrap: break-word;
						  word-wrap: break-word;

						  -ms-word-break: break-all;
						  /* This is the dangerous one in WebKit, as it breaks things wherever */
						  word-break: break-all;
						  /* Instead use this non-standard one: */
						  word-break: break-word;

						  /* Adds a hyphen where the word breaks, if supported (No Blink) */
						  -ms-hyphens: auto;
						  -moz-hyphens: auto;
						  -webkit-hyphens: auto;
						  hyphens: auto; }
	#body .general a:hover	{ color:#244669}
	#body .general h1 h2 h3 	{ line-height:1.4; margin-bottom:10px;}
	#body .general .txt-red 	{ color:red}
	#body .general .txt-blue 	{ color:#06c}

	#body .general figcaption, #body .general .sm-font { font-size:85%; line-height:1.4; padding-top:15px }
	
	#body .general .selected   { color:#0066cc}


  	/* • General Content
   	------------------------------------------------------------------------- */
  	#body .general 			{ line-height:1.8}
  	#body .general img 		{ width:100%; height:auto; display: block;}
   	#body .general .col2-table-halfRow img { width:100%; height:auto;}

 	#body .general a      	{ text-decoration:none; transition: all 0.3s ease-out}
	#body .general a:hover  	{ text-decoration:none;}
	#body .general hr 		{ background-color:#e8e6e6;}
  
	#body .general hr, #body .general .colorBox hr, #body .general .greyBox hr { height:1px; border:none; margin:20px 0;}


  	/* • General image wrap content
   	------------------------------------------------------------------------- */
	#body .general .wrap-left 	{ float:left;  margin:10px 40px 10px 0; display:table;}
	#body .general .wrap-right { float:right; margin:10px 0 10px 40px; display:table;}
	#body .general figure { display:table; }

	#body .general .wrap-left figcaption,
	#body .general .wrap-right figcaption  { display:table-caption; caption-side:bottom; margin-bottom:20px;}

  	/* • Image scale 
   	------------------------------------------------------------------------- */
   	#body .general .img-scale-blk	{text-align:center;}

	#body .general .img-scale80  { width:80%; height:auto;}
	#body .general .img-scale70  { width:70%; height:auto;}
	#body .general .img-scale60  { width:60%; height:auto;}
	#body .general .img-scale50  { width:50%; height:auto;}
	#body .general .img-scale40  { width:40%; height:auto;}
	#body .general .img-scale30  { width:30%; height:auto;}
	#body .general .img-scale20  { width:20%; height:auto;}
	#body .general .img-scale10  { width:10%; height:auto;}

	#body .general figcaption.f-width100 { width:100%; margin:0 auto}
	#body .general figcaption.f-width70 { width:80%; margin:0 auto}
	#body .general figcaption.f-width70 { width:70%; margin:0 auto}
	#body .general figcaption.f-width60 { width:60%; margin:0 auto}
	#body .general figcaption.f-width50 { width:50%; margin:0 auto}
	#body .general figcaption.f-width40 { width:40%; margin:0 auto}

	#body .general .img-scale-blk.img-left  { text-align:left;}
	#body .general .img-scale-blk.img-left figcaption, #body .general .img-scale-blk.img-left .figcaption { margin:0; text-align:left;}


  	/* • 2 col responsive table (50%)
   	------------------------------------------------------------------------- */
	#body .general .col2-table-halfRow { display:table; table-layout:fixed; height:100%; width:100%;}
	#body .general .col2-table-halfRow .table-col { display:table-cell; float:none; height:100%; padding:20px 0; background-color:transparent; vertical-align:top;}
	#body .general .col2-table-halfRow .half-col:nth-child(odd)    { width:50%; padding-right:10px; box-sizing: border-box; } 
	#body .general .col2-table-halfRow .half-col:nth-child(even)   { width:50%; padding-left:10px;  box-sizing: border-box;} 


  	/* • General template - color table style
   	------------------------------------------------------------------------- */
	#body .general table.gen        		{ width:100%; text-align:left; vertical-align:top; margin:5px 0 0 0; border:none; border-spacing:10px; border-collapse:collapse;}
	#body .general table.gen th     		{ padding:5px 25px; color:#fff; text-align:left; vertical-align:top; font-weight:normal; background-color:#06c; font-weight:500}
	#body .general table.gen tr:nth-child(even) td 	{ background-color:#dbdbdb; padding:5px 25px; border-bottom:1px solid #fff; text-align:left; vertical-align:top; }
	#body .general table.gen tr:nth-child(odd) td  	{ background-color:#e7e7e7; padding:5px 25px; border-bottom:1px solid #fff; text-align:left; vertical-align:top; }


  	/* • General template - color table style
   	------------------------------------------------------------------------- */
	#body .general table.nude         	{ width:100%; text-align:left; vertical-align:top; margin:0; border:none; border-spacing:10px; border-collapse:collapse;}
	#body .general table.nude th        	{ background-color:transparent; padding:0; text-align:left; vertical-align:top; font-weight:normal; }
	#body .general table.nude tr.even td  { background-color:transparent; padding:0; border-bottom:none; text-align:left; vertical-align:top; }
	#body .general table.nude tr.odd td   { background-color:transparent; padding:0; border-bottom:none; text-align:left; vertical-align:top; }


  	/* • 2 col responsive table
   	------------------------------------------------------------------------- */
	#body .general .col2-table-row 			{ display:table; table-layout:fixed; height:100%; width:100%;}
	#body .general .col2-table-row .table-col { display:table-cell; float:none; height:100%; padding:15px; border-bottom:1px solid #fff; vertical-align:top;}
	#body .general .col2-table-row:nth-child(odd)  { background-color:#dbdbdb}
	#body .general .col2-table-row:nth-child(even) { background-color:#dbdbdb}
	#body .general .col2-table-row .field   { text-align:left; width:25%; color:#fff; background-color:#06c; font-weight:600; font-size:24px; line-height:1.2; } 
	#body .general .col2-table-row .detail  { width:75%}
  

   	/* • General template - Grey box & color box
   	------------------------------------------------------------------------- */
/*	.general .greyBox,
	.general .colorBox { padding:20px 30px;}

	.general .greyBox   	{ background-color:#fff;}
	.general .greyBox hr 	{ background-color:#ccc; }

	.general .colorBox.cb-red  	{ background-color:#c00; color:#fff;}
	.general .colorBox.cb-blue  { background-color:#0c2c84; color:#fff;}

	#body.inside .general .colorBox.cb-red a 		{ color:#333; font-weight:500}
	#body.inside .general .colorBox.cb-red a:hover   { color:#fff;}
	#body.inside .general .colorBox.cb-blue a 		{ color:#c00; font-weight:500}
	#body.inside .general .colorBox.cb-blue a:hover  { color:#fff;}

	#body.inside .general .colorBox h2 	{ color:#fff}
	.general .colorBox.cb-red hr 		{ background-color:#ececec; }
	.general .colorBox.cb-blue hr 		{ background-color:#c00; }*/


   	/* • ul li
   	------------------------------------------------------------------------- */
	#body .general ul.sp-list   			{ margin:0px; padding:10px 0px; text-indent:0;}
	#body .general ul.sp-list li  		{ margin:0px 0px 10px 30px; padding:0; list-style:none; line-height: 1.6}
	#body .general ul.sp-list li::before  { content: "•"; color: #06c; display:inline-block; width:1em; margin-left: -1em}


  	/* • Youtube 
   	------------------------------------------------------------------------- */
	#body .videoWrapper 			{ position:relative; padding-bottom:56.25%; /* 16:9 */ padding-top:25px; height:0;}
	#body .videoWrapper iframe 	{ position:absolute; top:0; left:0; width:100%; height:100%; }

  	#body .videoWrapper.sm        { position:relative; left:20%; padding-bottom:33.75%; /* 16:9 */ height:0; width:60%; background-repeat:no-repeat;}
  	#body .videoWrapper.sm iframe { position:absolute; top:0; left:0; width:100%; height:100%; }


  	/* • Left & right photo content blk
   	------------------------------------------------------------------------- */
	#body .general .img-scale70-txt .is70-col1,
	#body .general .img-scale60-txt .is60-col1,
	#body .general .img-scale50-txt .is50-col1,
	#body .general .img-scale40-txt .is40-col1,
	#body .general .img-scale30-txt .is30-col1,
	#body .general .img-scale20-txt .is20-col1,
	#body .general .img-scale10-txt .is10-col1,
	#body .general .img-scale70-txt-r .is70-col2-r,
	#body .general .img-scale60-txt-r .is60-col2-r,
	#body .general .img-scale50-txt-r .is50-col2-r,
	#body .general .img-scale40-txt-r .is40-col2-r,
	#body .general .img-scale30-txt-r .is30-col2-r,
	#body .general .img-scale20-txt-r .is20-col2-r,
	#body .general .img-scale10-txt-r .is10-col2-r   { float:left; margin-top:8px}

	#body .general .img-scale70-txt 				{ width:100%}
	#body .general .img-scale70-txt .is70-col1 	{ width:70%}
	#body .general .img-scale70-txt .is70-col2 	{ width:30%; float:left; padding-left:40px}

	#body .general .img-scale60-txt 				{ width:100%}
	#body .general .img-scale60-txt .is60-col1 	{ width:60%;}
	#body .general .img-scale60-txt .is60-col2 	{ width:40%; float:left; padding-left:40px}

	#body .general .img-scale50-txt 				{ width:100%}
	#body .general .img-scale50-txt .is50-col1 	{ width:50%}
	#body .general .img-scale50-txt .is50-col2 	{ width:50%; float:left; padding-left:40px}

	#body .general .img-scale40-txt 				{ width:100%}
	#body .general .img-scale40-txt .is40-col1 	{ width:40%}
	#body .general .img-scale40-txt .is40-col2 	{ width:60%; float:left; padding-left:30px}

	#body .general .img-scale30-txt 				{ width:100%}
	#body .general .img-scale30-txt .is30-col1 	{ width:30%}
	#body .general .img-scale30-txt .is30-col2 	{ width:70%; float:left; padding-left:30px}

	#body .general .img-scale20-txt 				{ width:100%}
	#body .general .img-scale20-txt .is20-col1 	{ width:20%}
	#body .general .img-scale20-txt .is20-col2 	{ width:80%; float:left; padding-left:30px}

	#body .general .img-scale10-txt 				{ width:100%}
	#body .general .img-scale10-txt .is10-col1 	{ width:10%}
	#body .general .img-scale10-txt .is10-col2 	{ width:90%; float:left; padding-left:30px}


	#body .general .img-scale70-txt-r 				{ width:100%}
	#body .general .img-scale70-txt-r .is70-col1-r 	{ width:30%; float:left; padding-right:40px}
	#body .general .img-scale70-txt-r .is70-col2-r 	{ width:70%; }

	#body .general .img-scale60-txt-r 				{ width:100%}
	#body .general .img-scale60-txt-r .is60-col1-r 	{ width:40%; float:left; padding-right:40px}
	#body .general .img-scale60-txt-r .is60-col2-r 	{ width:60%;}

	#body .general .img-scale50-txt-r 				{ width:100%}
	#body .general .img-scale50-txt-r .is50-col1-r 	{ width:50%; float:left; padding-right:40px}
	#body .general .img-scale50-txt-r .is50-col2-r 	{ width:50%}

	#body .general .img-scale40-txt-r 				{ width:100%}
	#body .general .img-scale40-txt-r .is40-col1-r 	{ width:60%; float:left; padding-right:30px}
	#body .general .img-scale40-txt-r .is40-col2-r 	{ width:40%}

	#body .general .img-scale30-txt-r 				{ width:100%}
	#body .general .img-scale30-txt-r .is30-col1-r 	{ width:70%; float:left; padding-right:30px}
	#body .general .img-scale30-txt-r .is30-col2-r 	{ width:30%}

	#body .general .img-scale20-txt-r 				{ width:100%}
	#body .general .img-scale20-txt-r .is20-col1-r 	{ width:80%; float:left; padding-right:30px}
	#body .general .img-scale20-txt-r .is20-col2-r 	{ width:20%}

	#body .general .img-scale10-txt-r 				{ width:100%}
	#body .general .img-scale10-txt-r .is10-col1-r 	{ width:90%; float:left; padding-right:30px}
	#body .general .img-scale10-txt-r .is10-col2-r 	{ width:10%}


  	/* • 3 cols/4 cols table
   	------------------------------------------------------------------------- */
   	#body .fullwrapper { width:100%; overflow:hidden;}
   	#body .general .table-2cols 	{ width:calc(100% + 10px);  border:none; border-collapse:collapse; border-spacing:0; }
   	#body .general .table-2cols tbody tr td 		{ width:calc(100% / 2); vertical-align:top; text-align:left; padding-right:10px; padding-bottom:20px}
   	#body .general .table-2cols tbody tr td img   { width:100%; height:auto;}


   	#body .general .table-3cols 	{ width:calc(100% + 10px);  border:none; border-collapse:collapse; border-spacing:0; }
   	#body .general .table-3cols tbody tr td 		{ width:calc(100% / 3); vertical-align:top; text-align:left; padding-right:10px; padding-bottom:20px}
   	#body .general .table-3cols tbody tr td img   { width:100%; height:auto;}

   	#body .general .table-4cols 	{ width:calc(100% + 10px);  border:none; border-collapse:collapse; border-spacing:0; }
   	#body .general .table-4cols tbody tr td 		{ width:calc(100% / 4); vertical-align:top; text-align:left; padding-right:10px; padding-bottom:20px}
   	#body .general .table-4cols tbody tr td img   { width:100%; height:auto;}

    #body .general .table-3cols.table-gray 	{ width:calc(100% + 10px);  border:none; border-collapse:collapse; border-spacing:0; }
   	#body .general .table-3cols.table-gray tbody tr td 			{ background-color:#f1f8fd; padding-right:0; padding-bottom:0; border-right:10px solid #fff; border-bottom:20px solid #fff; }
   	#body .general .table-3cols.table-gray tbody tr td img		{ border-bottom:5px solid #f4364c  }
   	#body .general .table-3cols.table-gray tbody tr td .txt-pro		{ padding:15px 20px }
   	#body .general .table-3cols.table-gray tbody tr td .txt-pro p 	{ color:#00a3e0; font-size:110%; font-weight:normal; line-height:normal; }


  	/* • banner with text
   	==========================================================================*/
    #body .banner-with-txt {}
    #body .banner-with-txt .bwt-txt-blk   { width:45%; position:absolute; top:0; left:0; padding:15px 20px 20px 15px; color:#fff; font-weight:500; line-height:1.4; /*background:#06c;*/
                                       background: rgb(0,154,222);
                                        /*background: linear-gradient(135deg, rgba(0,154,222,1) 0%, rgba(0,154,222,1) 90%, rgba(255,255,255,1) 90%, rgba(255,255,255,1) 92%, rgba(0,46,109,1) 92%, rgba(0,46,109,1) 100%); */
										}
    #body .banner-with-txt img.img-for-d  { display:block; }
    #body .banner-with-txt img.img-for-m  { display:none; }


  	/* • adj
   	==========================================================================*/
    #body .graybg, .graybox  { background-color:#ececec!important; }
    #body .graybox { padding:15px; }

	/* ==========================================================================
		Media
	============================================================================= */
	@media only screen and (max-width: 1024px) {
  	#body .videoWrapper.sm        { left:0%; padding-bottom:56.25%; /* 16:9 */ width:100%; }

    #body .banner-with-txt .bwt-txt-blk   { width:100%; position:relative; top:inherit; left:inherit; padding:10px 15px 20px 15px;}
    #body .banner-with-txt img.img-for-d  { display:none; }
    #body .banner-with-txt img.img-for-m  { display:block; }
	}


	@media only screen and (max-width: 767px) {
  	#body .general 			{ line-height:1.6}

  	#body .general .col2-table-row { display:block; table-layout:inherit; width:100%; height:100%; border:none}
  	#body .general .col2-table-row .table-col { display:block; float:inherit; height:100%; padding:inherit; border-bottom:none;}
  	#body .general .col2-table-row .field   { width:100%; padding:8px 10px; text-align:left; line-height:1.2; font-size:16px;} 
  	#body .general .col2-table-row .detail  { width:100%; padding:10px;}
  	#body .general .col2-table-row:nth-child(odd)  { background-color:#dbdbdb}
  	#body .general .col2-table-row:nth-child(even) { background-color:#dbdbdb}

	#body .general .col2-table-halfRow { display:block; table-layout:inherit;  height:100%; width:100%;}
	#body .general .col2-table-halfRow .table-col { display:block; float:inherit; height:100%; padding:inherit;}
	#body .general .col2-table-halfRow .half-col:nth-child(odd)    { width:100%; padding-right:0%; padding-bottom:20px} 
	#body .general .col2-table-halfRow .half-col:nth-child(even)   { width:100%; padding-left:0%; padding-bottom:20px;}
	#body .general .col2-table-halfRow .table-col img { margin-bottom:10px}

	#body .general .greyBox   { padding:15px; }
	#body .general .colorBox  { padding:15px; }

   	#body .general .img-scale-blk	{ text-align:left;}
	#body .general .img-scale80,
	#body .general .img-scale70,
	#body .general .img-scale60,
	#body .general .img-scale50,
	#body .general .img-scale40   { width:100%; height:auto;}

	#body .general .img-scale70-txt .is70-col1,
	#body .general .img-scale60-txt .is60-col1,
	#body .general .img-scale50-txt .is50-col1,
	#body .general .img-scale40-txt .is40-col1,
	#body .general .img-scale30-txt .is30-col1,
	#body .general .img-scale20-txt .is20-col1,
	#body .general .img-scale10-txt .is10-col1  	{ width:100%; margin-bottom:30px}

	#body .general .img-scale70-txt .is70-col2,
	#body .general .img-scale60-txt .is60-col2,
	#body .general .img-scale50-txt .is50-col2,
	#body .general .img-scale40-txt .is40-col2,
	#body .general .img-scale30-txt .is30-col2,
	#body .general .img-scale20-txt .is20-col2,
	#body .general .img-scale10-txt .is10-col2 	{ width:100%; float:inherit; padding-left:0}

	#body .general .img-scale70-txt-r .is70-col1-r,
	#body .general .img-scale60-txt-r .is60-col1-r,
	#body .general .img-scale50-txt-r .is50-col1-r,
	#body .general .img-scale40-txt-r .is40-col1-r,
	#body .general .img-scale30-txt-r .is30-col1-r,
	#body .general .img-scale20-txt-r .is20-col1-r,
	#body .general .img-scale10-txt-r .is10-col1-r  	{ width:100%; float:inherit; padding-right:0}
	
	#body .general .img-scale70-txt-r .is70-col2-r,
	#body .general .img-scale60-txt-r .is60-col2-r,
	#body .general .img-scale50-txt-r .is50-col2-r,
	#body .general .img-scale40-txt-r .is40-col2-r,
	#body .general .img-scale30-txt-r .is30-col2-r,
	#body .general .img-scale20-txt-r .is20-col2-r,
	#body .general .img-scale10-txt-r .is10-col2-r	{ width:100%; margin-top:30px}

	#body .general figcaption.f-width70 { width:100%; margin:0 auto}
	#body .general figcaption.f-width70 { width:100%; margin:0 auto}
	#body .general figcaption.f-width60 { width:100%; margin:0 auto}
	#body .general figcaption.f-width50 { width:100%; margin:0 auto}
	#body .general figcaption.f-width40 { width:100%; margin:0 auto}

	#body .general .wrap-left  { float:none; margin:20px 0; display:block;}
	#body .general .wrap-right { float:none; margin:20px 0; display:block;}

	#body .general figure { display:block; margin-bottom:20px}
	#body .general .wrap-left figcaption,
	#body .general .wrap-right figcaption  { display:block;}

 /* #body .general .table-2cols 	{ width:calc(100% + 10px);  border:none; border-collapse:collapse; border-spacing:0; }
   	#body .general .table-2cols tbody tr td 		{ width:calc(100% / 2; vertical-align:top; text-align:left; padding-right:10px; padding-bottom:20px}
   	#body .general .table-2cols tbody tr td img   { width:100%; height:auto;}


   	#body .general .table-3cols 	{ width:calc(100% + 10px);  border:none; border-collapse:collapse; border-spacing:0; }
   	#body .general .table-3cols tbody tr td 		{ width:calc(100% / 3); vertical-align:top; text-align:left; padding-right:10px; padding-bottom:20px}
   	#body .general .table-3cols tbody tr td img   { width:100%; height:auto;}

   	#body .general .table-4cols 	{ width:calc(100% + 10px);  border:none; border-collapse:collapse; border-spacing:0; }
   	#body .general .table-4cols tbody tr td 		{ width:calc(100% / 4); vertical-align:top; text-align:left; padding-right:10px; padding-bottom:20px}
   	#body .general .table-4cols tbody tr td img   { width:100%; height:auto;}*/


	#body .general .table-2cols,
   	#body .general .table-2cols tbody,
   	#body .general .table-2cols tbody tr,
   	#body .general .table-2cols tbody tr td,
   	#body .general .table-3cols,
   	#body .general .table-3cols tbody,
   	#body .general .table-3cols tbody tr,
   	#body .general .table-3cols tbody tr td,
   	#body .general .table-4cols,
   	#body .general .table-4cols tbody,
   	#body .general .table-4cols tbody tr,
   	#body .general .table-4cols tbody tr td  { width:100%; padding-right:0; display:block;}
   
   	#body .general .table-2cols tbody tr td,
   	#body .general .table-3cols tbody tr td,
   	#body .general .table-4cols tbody tr td { padding-bottom: 50px}   

   	#body .general .table-3cols.table-gray tbody tr td 			{ border-right:none}
	}