/* Common for col3 & col4 template
	============================================================================= */
	#body.section a.link-detail h3		{ line-height:1.4}
	#body.section a.link-detail 			{ text-decoration:none}
	#body.section a.link-detail h3,
	#body.section a.link-detail ul 		{ color:#333}

	#body.section a.link-detail:hover img	{	transform: scale(1.04);
					   -webkit-box-shadow: 7px 7px 0px 0px rgba(50, 50, 50, 0.08);
					      -moz-box-shadow: 7px 7px 0px 0px rgba(50, 50, 50, 0.08);
					           box-shadow: 7px 7px 0px 0px rgba(50, 50, 50, 0.08);}

    
	#body.section .section-intro	{ margin-bottom:50px}
	#body.section.col4 .adj-pos 	{ margin-bottom:30px}


    .detail .title-sm	{ font-size:16px; color:#666; }
    .detail img			{ width:100%; height:auto; margin-bottom:20px; transition: all 0.3s ease-out;}
	.detail a .intro 	{ color:#666; padding-top:10px; border-top:1px solid #ececec}
	.detail a .cat-wrp	{ color: #666; font-size: 1.2em; text-align: right; }
	.detail a .cat		{ font-weight: bold; padding: 0 15px; border: 3px solid #666; display: inline-block; vertical-align: top; border-radius: 8px; }

	/* col3 template
	============================================================================= */
	#body.col3 main.pg-container { overflow:hidden}
	#body.col3 .g-padding-sm 	{ overflow:hidden;}
	table.t-3cols 				{ width: calc(100% + 50px); border:none; border-collapse:collapse;}	
	table.t-3cols tbody,
	table.t-3cols tbody tr 		{ width:100%;}
	table.t-3cols tbody tr td 	{ width:33.3333333%; vertical-align:top; text-align:left; padding-bottom:100px; padding-right:50px;}


	/* col4 template
	============================================================================= */
	table.t-4cols 				{ width: calc(100% + 50px); border:none; border-collapse:collapse;}	
	table.t-4cols tbody,
	table.t-4cols tbody tr 		{ width:100%;}
	table.t-4cols tbody tr td 	{ width:25%; vertical-align:top; text-align:left; padding-bottom:100px; padding-right:50px;}


	/* page "section-p3.html"
	============================================================================= */
	







	/* Circle animation ( col3 template background)
	============================================================================= */
	.row6-wrap { overflow:hidden;}

	.row6-animation-blk 	{ position:absolute!important; z-index:-1; top:0; width:100%; left:-20%}
	.row6-animation-adj-pos { top:200px;}
	.row6-round-blk		{ z-index:2; top:300px}
	.row6-round 		{ width:100px; height:100px; transform-origin:350% center; position:relative;
					  	  animation:rotate 10s linear infinite; }
	.row6-round:before 	{ content:''; position:absolute; height:100%; width:100%; background:#fff; border-radius:50%;
					      animation:rotate 10s linear reverse infinite; }
	@keyframes rotate 	{ 100% { transform:rotate(-360deg); } }


	.row6-circle-blk { position:absolute; top:0; width:100%; width:800px; height:800px; z-index:1;}
	.row6-circle 	 { width:700px; height:700px; border-radius:50%; background-color:#f1f1f1; }



	/* Circle animation ( col4 template background)
	============================================================================= */
	.row1-animation-blk 		{ position:absolute;z-index:-1; top:0; width:100%; height:100%; left:0}
	.row1-animation-adj-pos 	{ top:0;}
	.row1-round-blk				{ z-index:2; top:130px}
	.row1-round 				{ width:50px; height:50px; transform-origin:300% center; position:relative; animation:rotate 10s linear infinite; }
	.row1-round:before 			{ content:''; position:absolute; height:100%; width:100%; background:#fff; border-radius:50%;
								  animation:rotate 10s linear reverse infinite; }
	.row1-animation-blk img.red-circle	{ position:absolute; top:0}
	@keyframes rotate 	{ 100% { transform:rotate(-360deg); } }


	/* Row2 animation ( col4 template background)
	============================================================================= */
	.row2-animation img.gray-pattern		{ width:100%; height:auto;}
	.row2-float 			{ animation: float 6s ease-in-out infinite;}
	.row2-circle			{ width:20%; height:20%; position:absolute; left:10px; top:10px;}
	@keyframes float {
		0% 	 { transform: translatey(0px);}
		50%  { transform: translatey(-20px);}
		100% { transform: translatey(0px);}
	}

	/* Row3 animation ( col4 template background)
	============================================================================= */
	.row3-animation img.red-triangle { width:100%; height:auto;}
	.row3-animation img.red-triangle { width:100%; height:auto;}

	/* Animation Float ( col4 template background)
	============================================================================= */
	@keyframes float-slow {
		0% 	 { transform: translatey(0px);}
		50%  { transform: translatey(130px);}
		100% { transform: translatey(0px);}
	}

	.floating-slow { animation: float-slow 8s ease-in-out infinite}


	/* ==========================================================================
	    Media Style:
	============================================================================= */
	@media only screen and (max-width:1200px) {
	.detail a .intro 	{ font-size:16px}

	table.t-4cols 						{ width: calc(100% + 30px);}	
	table.t-4cols tbody tr td 			{ padding-right:30px;}
	#body.section.col4 .tr-item .name	{ font-size:1.2rem}
	#body.section.col4 .detail .title-sm	{ font-size:14px}
	}

	@media only screen and (max-width:1024px) {
	#body.col4 table.t-4cols tbody tr td.pattern { display:none}
	}

	@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 1) {
	table.t-3cols 				{ width: calc(100% + 30px);}	
	table.t-3cols tbody tr td 	{ padding-right:30px; padding-bottom:70px}
	table.t-3cols a .intro		{ font-size:90%}
	#body.cols3 .detail 			{ border-bottom:none; padding-bottom:0px}

	#body.col4 table.t-4cols tbody tr td.pattern { display:none}
	}

	@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 1) {
	/*#body.col4 table.t-4cols tbody tr td.pattern { display:table-cell}*/
	}

	@media only screen and (max-width:767px) {
	.detail 					{ border-bottom:none; margin-bottom:70px;}

	table.t-3cols,
	table.t-3cols tbody,
	table.t-3cols tbody tr,
	table.t-3cols tbody tr td  	{ width:100%; display:block; padding-right:0}
	table.t-3cols tbody tr td 	{ padding-bottom:0;}
	#body.col3 a.link-detail h3  { font-weight:bold; font-size:22px; font-weight:300;}

	table.t-4cols,
	table.t-4cols tbody,
	table.t-4cols tbody tr,
	table.t-4cols tbody tr td  	{ width:100%; display:block; padding-right:0}
	table.t-4cols tbody tr td 	{ padding-bottom:0;}
	#body.col4 table.t-4cols tbody tr td.pattern { display:none}

	.row6-wrap { display:none}
	}