@charset "utf-8";

	.slogan-border
	{
		margin: 0 auto;
		padding: 10px 10px 120px 10px;
	}
	
	.slogan
	{
		margin: 0 auto;
		padding: 0px;
		
		position: relative;
	}
	
		.slogan .sloganT1,
		.slogan .sloganT2,
		.slogan .sloganT3,
		.slogan .sloganT4
		{
			margin: 0 auto;
			padding: 30px 10px 30px 10px;

			position: absolute;
			
			width: 30%;
			
			text-align: center;
			font-size: 21pt;
			line-height: 31px;
			color: #ffffff;
			
			transition: background-color 0.5s;
		}	

		.slogan .sloganT1
		{
			left: 0%;
			top: 0px;
			background-color: #0068b7;
		}
		
		.slogan .sloganT2
		{
			left: 23%;
			top: 20px;
			background-color: #22ac38;
		}
		
		.slogan .sloganT3
		{
			left: 47%;
			top: 0px;
			background-color: #eb6100;
		}
		
		.slogan .sloganT4
		{
			left: 70%;
			top: 20px;
			background-color: #8fc31f;
		}
		
		.slogan .sloganT1:hover
		{
			background-color: #3386c5;
		}
		
		.slogan .sloganT2:hover
		{
			background-color: #4ebd60;
		}
		
		.slogan .sloganT3:hover
		{
			background-color: #ef8133;
		}
		
		.slogan .sloganT4:hover
		{
			background-color: #a5cf4c;
		}


	
	.design,
	.service
	{
		margin: 0px auto;
		padding: 20px 10px 20px 10px;
		
		border: 0px dotted red;
	}
		.design::after,
		.service::after
		{
			content: '';
			clear: both;
			display: table;	
		}

		.design button,
		.service button
		{
			border-radius: 2em;
		}
		
		.design button:focus-visible,
		.service button:focus-visible
		{
			outline: 2px solid rgba(0, 0, 0, 0.40);
			outline-offset: -2px;	
		}

		.design img,
		.service img
		{
			margin: 0px auto;

			border-radius: 15px;
			max-height: 100%;  
			max-width: 100%;
			width: auto;
			height: auto;
		}
		
		.design .image
		{
			margin: 0 auto;
			padding: 0px;
			
			float: left;
			width: 60%;
		}
		
		.design .text
		{
			margin: 0 auto;
			padding: 10px 10px 10px 40px;
			float: left;
			width: 40%;
		}
		
		.service .image
		{
			margin: 0 auto;
			padding: 0px;
			
			float: right;
			width: 60%;
		}
		
		.service .text
		{
			margin: 0 auto;
			padding: 10px 10px 10px 40px;
			float: right;
			width: 40%;
		}		
		
@media screen and (min-width: 1201px) 
{

	.design .image
	{
		width: 60%;
		float: left;
	}
	
	.design .text
	{
		padding: 20px 0px 20px 40px;
		width: 40%;
	}
	
	.service .image
	{
		width: 60%;
		float: right;
	}
	
	.service .text
	{
		padding: 20px 40px 20px 0px;
		width: 40%;
	}

}

@media screen and (min-width: 850px) and (max-width: 1200px) 
{
	.design .image
	{
		width: 50%;
		float: left;
	}
	
	.design .text
	{
		padding: 20px 0px 20px 40px;
		width: 50%;
	}
	
	.service .image
	{
		width: 50%;
		float: right;
	}
	
	.service .text
	{
		padding: 20px 40px 20px 0px;
		width: 50%;
	}
}

@media only screen and (max-width: 849px)
{
	
	
	
	.design,
	.service
	{
		padding: 60px 10px 0px 10px;
	}
	
	.design .image
	{
		width: 100%;
		float: none;
	}
	
	.design .text
	{
		padding: 40px 10px 20px 10px;
		width: 100%;
		float: none;
	}
	
	.service .image
	{
		width: 100%;
		float: none;
	}
	
	.service .text
	{
		padding: 40px 10px 20px 10px;
		width: 100%;
		float: none;
	}	
}



	/*
	
	
.design
{
	margin: 0 auto;
	padding: 40px 10px 40px 10px;

	clear: both;
	background-color: #eeffe8;
	background-color: #eeffe8;
	
	
	
	background: radial-gradient(circle at 30px 50px, #eeffe8, #edf2fa, #eeffe8);
	
	background: radial-gradient(circle at 30px 50px, #9bddbb, #edf2fa, #9bddbb);
	background: radial-gradient(circle at 30px 50px, #cdeedd, #edf2fa, #9bddbb);
	
}
	.design .con
	{
		margin: 0 auto;
		padding: 20px;

		width: 1150px;
		border-radius: 15px;
	}

	.design .con::after
	{
		content: '';
		clear: both;
		display: table;
	}
	
	.design .con .image
	{
		margin: 0 auto;
		padding: 0px;
		float: left;
		
		width: 30%;

		border-radius: 15px;
		overflow: hidden;
	}
	
		.design .con .image img
		{
			margin: 0px auto;

			max-height: 100%;  
			max-width: 100%;
			width: auto;
			height: auto;
		}
		
	.design .con .text
	{
		margin: 0 auto;
		padding: 10px 10px 10px 10px;
		float: left;

		text-align: left;
		overflow-y: auto;
	}	
		
.service
{
	margin: 0 auto;
	padding: 40px 10px 40px 10px;

	clear: both;
	background-color: #fff;
}
	.service::after
	{
		content: '';
		clear: both;
		display: table;
	}		
		
	.service .con
	{
		margin: 0 auto;
		padding: 20px;

		width: 1150px;
		border-radius: 15px;
	}
		
	.service .con::after
	{
		content: '';
		clear: both;
		display: table;
	}	
		
	.service .con .image
	{
		margin: 0 auto;
		padding: 0px;
		float: right;
		
		width: 30%;

		border-radius: 15px;
		overflow: hidden;
	}
	
		.service .con .image img
		{
			margin: 0px auto;

			max-height: 100%;  
			max-width: 100%;
			width: auto;
			height: auto;
		}
		
	.service .con .text
	{
		margin: 0 auto;
		padding: 10px 10px 10px 10px;
		float: left;

		text-align: left;
		overflow-y: auto;
	}
	
	*/
	
@media screen and (min-width: 1201px) 
{

/*
	.home .con,
	.service .con,
	.design .con,
	.slogan .con
	{
		width: 1150px;
	}
	

	.design .con .image
	{
		width: 60%;
		float: left;
	}
	
	.design .con .text
	{
		padding: 20px 0px 20px 40px;
		width: 40%;
	}
	
	.service .con .image
	{
		width: 60%;
		float: right;
	}
	
	.service .con .text
	{
		padding: 20px 40px 20px 0px;
		width: 40%;
	}
	*/

}	

@media screen and (min-width: 850px) and (max-width: 1200px) 
{
	/*
	.home .con,
	.service .con,
	.design .con,
	.slogan .con
	{
		width: 800px;
	}
	
	.design .con .image
	{
		width: 50%;
		float: left;
	}
	
	.design .con .text
	{
		padding: 20px 0px 20px 40px;
		width: 50%;
	}
	
	.service .con .image
	{
		width: 50%;
		float: right;
	}
	
	.service .con .text
	{
		padding: 20px 40px 20px 0px;
		width: 50%;
	}
*/
	
}	
	
@media only screen and (max-width: 849px)
{
	/*
	.home
	{
		padding: 80px 0px 0px 0px;
	}
	
	.home .con,
	.service .con,
	.design .con,
	.slogan .con
	{
		padding: 0px;
		width: 100%;
	}
	
	


	.home .con .image
	{
		width: 100%;
		border-radius: 0px;
	}
	
	.service .con .image
	{
		width: 100%;
	}
	.service .con .text
	{
		padding: 40px 10px 40px 10px;
		width: 100%;
	}
	
	.design .con .image
	{
		width: 100%;
	}
	
	.design .con .text
	{
		padding: 40px 10px 40px 10px;
		width: 100%;
	}
*/
}	
	
@media only screen and (max-width: 350px)
{
	.slogan .sloganT1,
	.slogan .sloganT2,
	.slogan .sloganT3,
	.slogan .sloganT4
	{
		font-size: 13pt;
		line-height: 23px;
	}
}