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


	.general a.sp-alink 	  { padding:4px 10px; margin-bottom:15px; border-radius:4px; color:#fff; text-decoration:none; display:inline-block}
	.general a.sp-alink:hover { color:#fff}
    .general a.sp-alink:after { content:"\f08e"; display:inline-black; padding-left:5px; vertical-align:middle; font-family:"FontAwesome"}

    .general a.sp-alink { font-weight: bold; padding-left:20px; padding-right:20px;
						    -webkit-border-radius: 50px;
						       -moz-border-radius: 50px;
						            border-radius: 50px; }

	#body.theme1 .general a.sp-alink.a-blue,
	#body.theme2 .general a.sp-alink.a-blue  		{ background-color:#fff; color:#333; border:5px solid #bde5fd;  }
	#body.theme1 .general a.sp-alink.a-blue:hover,
	#body.theme2 .general a.sp-alink.a-blue:hover 	{ background-color:#0d4d73; color:#fff; cursor:pointer; text-decoration:none }
   

	#body.theme1 .general a.sp-alink.a-green,
	#body.theme2 .general a.sp-alink.a-green  		{ background-color:#fff; color:#333; border:5px solid #2c8faa;}
	#body.theme1 .general a.sp-alink.a-green:hover,
	#body.theme2 .general a.sp-alink.a-green:hover  { background-color:#8dc9d9; color:#194a57; cursor:pointer; text-decoration:none }


    #body.theme1 .general a.sp-alink.a-red,
    #body.theme2 .general a.sp-alink.a-red  		{ background-color:#fff; color:#333;  border:5px solid #e84124;}
	#body.theme1 .general a.sp-alink.a-red:hover,
	#body.theme2 .general a.sp-alink.a-red:hover	{ background-color:#842211; color:#fff; cursor:pointer; text-decoration:none  }


  	/* • General (Change color)
   	==========================================================================*/
 	.general a      	{ text-decoration:underline;
						 /* overflow-wrap: break-word;
						  word-wrap: break-word;
						  -ms-word-break: break-all;
						  word-break: break-all;
						  word-break: break-word;
						  -ms-hyphens: auto;
						  -moz-hyphens: auto;
						  -webkit-hyphens: auto;
						  hyphens: auto;*/ }
	.general a:hover	{ color:green}
	.general h1, .general h2, .general h3 	{ line-height:1.4; margin-bottom:15px;}
	.general .txt-red 	{ color:red}

	.general figcaption, .general .sm-font { font-size:85%; line-height:1.4; padding-top:15px }
	
	.general h1 				{ margin-bottom:30px}
	#body.news .general h1 		{ display:inline-block; margin:0; padding:0}
	#body.news .general 		{ margin-bottom:30px;}

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

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


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

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

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

   	.general .img-orginal  { width:auto; height:auto; }
   	.general .img-thumb    { width:24px; height:24px; }

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

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

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


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


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


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


  	/* • 2 col responsive table
   	------------------------------------------------------------------------- */
	.general .col2-table-row 			{ display:table; table-layout:fixed; height:100%; width:100%;}
	.general .col2-table-row .table-col { display:table-cell; float:none; height:100%; padding:10px; border-bottom:1px solid #fff; vertical-align:top;}
	.general .col2-table-row:nth-child(odd)  { background-color:#ececec}
	.general .col2-table-row:nth-child(even) { background-color:#ececec}
	.general .col2-table-row .field   { text-align:right; width:25%; color:#fff; background-color:#c00; font-weight:500; } 
	.general .col2-table-row .detail  { width:75%}
  

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

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

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

	.general .colorBox.cb-color1 a 			{ color:#333; font-weight:500}
	.general .colorBox.cb-color1 a:hover   	{ color:#fff;}
	.general .colorBox.cb-color2 a 			{ color:#c00; font-weight:500}
	.general .colorBox.cb-color2 a:hover   	{ color:#fff;}

	.general .colorBox.cb-color1 hr 		{ background-color:#ececec; }
	.general .colorBox.cb-color2 hr 		{ background-color:#c00; }


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


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

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


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

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

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

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

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

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

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

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


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

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

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

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

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

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

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


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

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

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


  	/* • button
   	------------------------------------------------------------------------- */
	.sp-link			{ display:inline-block; padding:4px 10px; margin-bottom:5px; background-color:#00416d; color:#fff; line-height:1.3;
							-webkit-border-radius: 4px;
						       -moz-border-radius: 4px;
						            border-radius: 4px;}
	.sp-link .fa-sp 	{ padding-left:10px }
	.sp-link:hover 		{ background-color:#007db6; cursor:pointer;  transition: all 0.3s ease-out;}


	/* ==========================================================================
		Media
	============================================================================= */
	@media only screen and (max-width: 1024px) {
   	.general 				{ line-height:1.6}

  	.videoWrapper.sm        { left:0%; padding-bottom:56.25%; /* 16:9 */ width:100%; }
	}


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

  	.general .col2-table-row { display:block; table-layout:inherit; width:100%; height:100%; border:none}
  	.general .col2-table-row .table-col { display:block; float:inherit; height:100%; padding:inherit; border-bottom:none;}
  	.general .col2-table-row .field   { width:100%; padding:3% 5%; text-align:left; line-height:1.4} 
  	.general .col2-table-row .detail  { width:100%; padding:3% 5%;}
  	.general .col2-table-row:nth-child(odd)  { background-color:#ececec}
  	.general .col2-table-row:nth-child(even) { background-color:#ececec}

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

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


   	.general .img-orginal  { width:auto; height:auto; }

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

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

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

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

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

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

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

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

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


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

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

    .general table.gen 		{ font-size:90%; }
	.general table.gen th     		            { padding:10px;}
	.general table.gen tr:nth-child(even) td,
	.general table.gen tr:nth-child(odd) td  	{ padding:5px 10px;}
	}