@media only screen and (min-width: 1000px) and (max-width: 3000px) {

	html
	{

		overflow-y: auto;
		overflow-x: hidden;

	}

	body
	{

		margin: 0px;

	}
	
	body *
	{
		
		font-family: "微軟正黑體";
		
	}

/*上方菜單*/
	bar[box=bar]
	{
	
		position: fixed; 
		display: flex; 
		justify-content: space-between; 
		align-items: center; 
		width: 100%;
		height: 110px; 
		background: linear-gradient(to right, #8DBDD7, #91CBCD);
	
	}

	bar[box=logo]
	{
	
	 	margin-left: 2%;
	 	cursor: pointer;
	
	}

	bar[box=logo] > img
	{
	
		width: 70%;
	
	}
	
	bar[box=mod-menu]
	{
		
		display: none;
		
	}
	
	bar[box=side-menu]
	{
	
		display: none;	
		
	}
	
	bar[box=top-menu]
	{
		
		 display: inline-block; 
		 margin-right: 2%;
		
	}
	
	bar[box=top-menu-item]
	{
		
		margin: 0px 20px;
		font-size: 20px;
		font-weight: bold;
		cursor: pointer;
		
	}
	
	[color=white]
	{
		
		color: white;
		
	}
	
	[color=yellow]
	{
		
		color: #F0E9AB;
		
	}
	
	bar[box=top-menu-item]:hover
	{
	
		font-size: 24px;
		
	}
	
	contact[box=right-contact]
	{
		
		 position: fixed; 
		 top: 50%; 
		 right: 0px; 
		 display: block; 
		 z-index: 5;
		
	}
	
	contact[box=icon]
	{
		
		 display: block; 
		 margin: 15px;
		 cursor: pointer;
		
	}
	
	contact[box=icon] > img
	{
		
		 width: 50px;
		
	}
	
	banner[box=banner]
	{
		
		 display: flex;
		 flex-direction: column;
		 justify-content: center;
		 align-items: center;
		 height: 100%; 
		 background-image: url("/image/0206/pexels-fauxels-3184360.jpg"); 
		 background-size: cover;
		
	}
	
	banner[box=title]
	{
		
		font-size: 70px;
		font-weight: bold;
		color: white;
		text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5), -2px -2px 4px rgba(255, 255, 255, 0.5);
		
	}
	
	banner[box=sub-title]
	{
		
		font-size: 50px;
		font-weight: bold;
		color: #8EC4E0;
		text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5), -2px -2px 4px rgba(255, 255, 255, 0.5);
		
	}
	
	desgin[box=desgin]
	{
		
		 display: flex;
		 flex-direction: row;
		 height: 100%; 
		
	}
	
	desgin[pos=mod]
	{
	
		display: none;	
		
	}
	
	desgin[box=text]
	{
		
		display: block; 
		width: 50%; 
		height: 100%;
		
	}
	
	desgin[box=photo]
	{
	
		 display: block; 
		 width: 50%; 
		 height: 100%; 
		 background-size: cover;
		
	}
	
	desgin[box=photo][pos=right]
	{
		
		background-image: url(/image/0206/pexels-fauxels-3184292.jpg); 
		
	}
	
	desgin[box=photo][pos=left]
	{
		
		 background-image: url(/image/0206/pexels-photo-3184423.jpeg);
		
	}
	
	desgin[box=title]
	{
		
		 display: block; 
		 padding: 10% 15% 0% 15%; 
		 font-size: 30px; 
		 font-weight: bold;
		 color: #7195B1;
		
	}
	
	desgin[box=content]
	{
		
		 display: block; 
		 margin: 5% 20%; 
		 font-size: 20px; 
		 line-height: 2.5;
		 color: #6C6C6C;
		
	}
	
	desgin[box=into]
	{
		
		 display: inline-block; 
		 margin: 0px 20%; 
		 font-size: 24px;
		 font-weight: bold;
		 cursor: pointer;
		
	}
	
	desgin[box=more]
	{
		
		color: #CEDEA6;
		
	}
	
	desgin[box=arrow]
	{
		
		color: #6C6C6C;
		
	}
	
	desgin[box=into]:hover
	{
		
		font-size: 26px;
		
	}
	
	rwd[box=RWD]
	{
		
		 display: block; 
		 background-color: #fafafa;
		
	}
	
	rwd[box=title]
	{
		 display: block;
		 padding: 7% 20% 0px 10%; 
		 font-size: 30px; 
		 font-weight: bold;
		 color: #6E90AC;
		
	}
	
	rwd[box=sub-title]
	{
		
		display: block;
		margin: 0px 20% 0px 10%; 
		font-size: 24px; 
		font-weight: bold;
		color: #5B5B5B;
		
	}
	
	rwd[box=grid]
	{
	
		display: grid; 
		grid-template-columns: repeat(4, 1fr); 
		grid-gap: 5px; 
		padding: 5% 15% 7% 15%;
		
		
	}
	
	rwd[box=content]
	{
		
		 display: flex; 
		 flex-direction: column; 
		 align-items: center;
		 margin: 20px;
		
	}
	
	rwd[box=grid-title]
	{
		
		 margin: 10px; 
		 padding: 5px 0px; 
		 border-bottom: 2px solid #D97909; 
		 text-align: center;
		 font-size: 22px; 
		 font-weight: bold;
		
	}
	
	rwd[box=text]
	{
		
		margin: 5px; 
		font-size: 16px; 
		text-align: left;
		line-height: 1.5;
		color: #787878;
		
	}
	
	introduce[box=introduce]
	{
		
		 display: flex; 
		 flex-direction: column; 
		 align-items: center;
		 padding-bottom: 10%; 
		 background-color: #f3f3c8;
		
	}
	
	introduce[box=title]
	{
		
		 margin-top: 10%; 
		 font-size: 30px;
		 font-weight: bold;
		 color: #809AAF;
		
	}
	
	introduce[box=sub-title]
	{
		
		 margin-top: 10px;
		 margin-bottom: 20px; 
		 font-size: 24px;
		 font-weight: bold;
		
	}
	
	introduce[box=intr]
	{
		
		 margin: 5px 20px;
		 font-size: 20px;
		 font-weight: bold;
		 letter-spacing: 2px;
		 color: #474A46;
		
	}
	
	introduce[pos=last]
	{
	
		margin-bottom: 5%;
		
	}
	
	introduce[box=content]
	{
		
		 display: flex; 
		 width: 80%; 
		 height: 200px; 
		 margin: 25px 20px; 
		 border-radius: 10px; 
		 background-color: white;
		
	}
	
	introduce[pos=right][color=blue]
	{
		
		 border-right: 30px solid #74BDDE; 
		
	}
	
	introduce[pos=right][color=bluegreen]
	{
		
		 border-right: 30px solid #78D2D3; 
		
	}
	
	introduce[pos=right][color=greenblue]
	{
		
		 border-right: 30px solid #91DEAA; 
		
	}
	
	introduce[pos=right][color=green]
	{
		
		 border-right: 30px solid #CDE6AD; 
		
	}
	
	introduce[pos=right][color=black]
	{
		
		 border-right: 30px solid black; 
		
	}
	
	introduce[pos=right] > [box=image]
	{
		
		 border-radius: 10px 0px 0px 10px; 
		
	}
	
	introduce[pos=left][color=blue]
	{
		
		 border-left: 30px solid #74BDDE; 
		
	}
	
	introduce[pos=left][color=bluegreen]
	{
		
		 border-left: 30px solid #78D2D3; 
		
	}
	
	introduce[pos=left][color=greenblue]
	{
		
		 border-left: 30px solid #91DEAA; 
		
	}
	
	introduce[pos=left][color=green]
	{
		
		 border-left: 30px solid #CDE6AD; 
		
	}
	
	introduce[pos=left][color=black]
	{
		
		 border-left: 30px solid black; 
		
	}
	
	
	introduce[pos=left] > [box=image]
	{
		
		 border-radius: 0px 10px 10px 0px; 
		
	}
	
	introduce[box=image]
	{
		
		 width: 40%; 
		 height: 100%; 
		 background-size: cover;
		 background-position: center;
		
	}
	
	introduce[box=text]
	{
		
		 display: flex;
		 flex-direction: column;
		 justify-content: center;
		 width: 60%;
		 padding: 30px;
		
	}
	
	introduce[box=content-title]
	{
		
		font-size: 26px;
		font-weight: bold;
		
	}
	
	introduce[color=blue] introduce[box=content-title]
	{
		
		color: #74BDDE;
		
	}
	
	introduce[color=bluegreen] introduce[box=content-title]
	{
		
		color: #78D2D3;
		
	}
	
	introduce[color=greenblue] introduce[box=content-title]
	{
		
		color: #91DEAA;
		
	}
	
	introduce[color=green] introduce[box=content-title]
	{
		
		color: #CDE6AD;
		
	}
	
	introduce[color=black] introduce[box=content-title]
	{
		
		color: black;
		
	}
	
	introduce[box=content-text]
	{
		
		margin: 5px 0px;
		font-size: 16px;
		color: #474A46;
		
	}
	
	[image="1"]
	{
		
		 background-image:url("/image/0206/exclusive-premium-quality-brand-graphic-concept.jpg");
		
	}
	
	[image="2"]
	{
		
		 background-image:url("/image/0206/illustration-quality-product-warranty-assurance-laptop.jpg");
		
	}
	
	[image="3"]
	{
		
		 background-image:url("/image/0206/engineer-meeting-architectural-project.jpg");
		
	}
	
	[image="4"]
	{
		
		 background-image:url("/image/0206/standard-quality-control-collage-concept.jpg");
		
	}
	
	[image="5"]
	{
		
		 background-image:url("/image/0206/standard-quality-control-collage-concept (1).jpg");
		
	}
	
	[image="6"]
	{
		
		 background-image:url("/image/0206/business-man-working-office-desktop.jpg");
		
	}
	
	[image="7"]
	{
		
		 background-image:url("/image/0206/approved-authentic-quality-guaranteed-product-concept.jpg");
		
	}
	
	[image="8"]
	{
		
		 background-image:url("/image/0206/design.jpg");
		
	}
	
	[image="9"]
	{
		
		 background-image:url("/image/0206/portrait-from-back-tired-students-stretching-after-long-work-indoor-photo-office-workers-fooling-around-during-meeting-conference-hall-with-big-windows.jpg");
		
	}
	
	[image="10"]
	{
		
		 background-image:url("/image/0206/delivery-man-smiling-holding-cardboard-box.jpg");
		
	}
	
	[image="11"]
	{
		
		 background-image:url("/image/0206/asia-businesswoman-social-distancing-new-normal-situation-virus-prevention-while-using-laptop-presentation-colleagues-about-plan-video-call-while-work-office-life-after-corona-virus.jpg");
		
	}
	
	[image="12"]
	{
		
		 background-image:url("/image/0206/standard-quality-control-concept-m.jpg");
		
	}
	
	[box=background]
	{
		
		display: flex;
		flex-direction: column;
		
	}
	
	contact[box=contact]
	{
		
		 display: flex; 
		 flex-direction: column; 
		 align-items: center;
		 padding: 5% 0px;
		
	}
	
	contact[box=title]
	{
		
		 font-size: 30px; 
		 font-weight: bold;
		 color: #779AB5;
		
	}
	
	contact[box=sub-title]
	{
		
		 margin: 20px 0px; 
		 font-size: 24px;
		 font-weight: bold;
		 color: #CDDAB0;
		
	}
	
	form[box=contact-form]
	{
		
		 width: 60%;
		
	}
	
	contact[box=content]
	{
		
		 display: block; 
		 margin: 2% 5%;
		
	}
	
	contact[box=label]
	{
		
		 font-size: 18px;
		 font-weight: bold;
		
	}
	
	contact[for=textarea]
	{
		
		vertical-align: top;
		
	}
	
	contact[for=checkbox]
	{
		
		 font-size: 20px;
		
	}
	
	input[box=input]
	{
		
		 padding-left: 20px;
		 width: 90%; 
		 height: 50px;
		 font-size: 18px;
		 
	}
	
	textarea[box=input]
	{
		
		 padding-left: 20px;
		 width: 90%; 
		 height: 120px;
		 font-size: 18px;
		
	}
	
	contact[box=privacy]
	{
		
		 display: flex; 
		 justify-content: center; 
		 margin: 2%;
		
	}
	
	input[box=checkbox]
	{
		
		 width: 26px; 
		 height: 26px; 
		 margin-right: 20px;
		 cursor: pointer;
		
	}
	
	contact[box=verify]
	{
		
		 display: flex; 
		 justify-content: center;
		 margin: 2% 3%;
		
	}
	
	contact[for=verify]
	{
		
		 margin-top: 15px;
		
	}
	
	input[box=verify]
	{
		
		 height: 50px; 
		 margin: 0px 20px;
		 text-align: center;
		
	}
	
	contact[box=convas]
	{
		
		 display: block; 
		 margin: 0px 20px; 
		 width: 20%; 
		 background-color: black;
		
	}
	
	contact[box=submit]
	{
		
		 display: flex; 
		 justify-content: center;
		 margin: 2% 10%;
		
	}
	
	contact[box=button]
	{
		
		 margin: 20px; 
		 padding: 10px 5%; 
		 font-size: 20px;
		 border: 1px solid black; 
		 background-color: white;
		 cursor: pointer;
		
	}
	
	contact[box=button]:hover
	{
		
		background-color: #F0E9AB;
		
	}
	
	contact[box=errorMessage]
	{
	
		display: none;
		margin: 0px 5%;	
		color: red;
		
	}
	
	contact[box=ES]
	{
		
		display: flex;
		flex-direction: column;
		align-items: center;
		color: red;
		
	}
			
	footer[box=footer]
	{
		
		 display: block; 
		 background-color: #342E30;
		
	}
	
	footer[box=grid]
	{
		
		 display: grid; 
		 grid-template-columns: repeat(3, 1fr); 
		 padding: 50px 20%;
		 padding-bottom: 0px; 
		 grid-gap: 5px;
		
	}
	
	footer[box=image]
	{
		
		 display: flex; 
		 align-items: center; 
		 justify-content: center;
		
	}
	
	footer[box=image] > img
	{
		
		 width: 30%;
		
	}
	
	footer[box=menu]
	{
		
		 display: grid; 
		 grid-template-columns: repeat(2, 1fr); 
		 grid-gap: 0px 20px;
		
	}
	
	footer[box=item]
	{
		
		 text-align: center;
		 font-size: 20px;
		 font-weight: bold;
		 color: white;
		 cursor: pointer;
		
	}
	
	footer[box=item]:hover
	{
		
		color: #F0E9AB;
		
	}
	
	footer[box=company]
	{
		
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 10px;
		font-size: 18px;
		color: white;
		
	}
	
	illustrate[box=illustrate]
	{
		
		 display: flex; 
		 flex-direction: column; 
		 padding-bottom: 60px; 
		 align-items: center;
		 background-color: #F1F0E7;
		
	}
	
	illustrate[box=title]
	{
		
		 width: 60%;
		 padding: 50px 0px;
		 border-bottom: 2px solid black; 
		 font-size: 40px;
		 font-weight: bold;
		 text-align: center;
		 color: black;
		
	}
	
	illustrate[box=intr]
	{
		
		 margin: 20px 0px;
		 font-size: 20px;
		 font-weight: bold;
		 text-align: center;
		 letter-spacing: 2px;
		 color: #7C7C7B;
		
	}
	
	illustrate[pos=sub-title]
	{
		
		 margin-top:5%;
		 margin-bottom: 30px;
		
	}
	
	illustrate[pos=intr]
	{
		
		line-height: 2.5;	
		
	}
	
	illustrate[pos=action]
	{
		
		color: #AC0023;
		
	}
}

@media only screen and (min-width: 0px) and (max-width: 999px) {
	
	html
	{

		overflow-y: auto;
		overflow-x: hidden;

	}

	body
	{

		margin: 0px;

	}
	
	body *
	{
		
		font-family: "微軟正黑體";
		
	}

/*上方菜單*/
	bar[box=bar]
	{
	
		position: fixed; 
		display: flex; 
		justify-content: space-between; 
		align-items: center; 
		width: 100%;
		height: 110px; 
		background: linear-gradient(to right, #8DBDD7, #91CBCD);
	
	}

	bar[box=logo]
	{
	
	 	margin-left: 2%;
	 	cursor: pointer;
	
	}

	bar[box=logo] > img
	{
	
		width: 70%;
	
	}
	
	bar[box=top-menu]
	{
		
		 display: none; 
		 margin-right: 2%;
		
	}
	
	bar[box=mod-menu]
	{
		
		margin-right: 2%;
		
	}
	
	bar[box=mod-menu] > img
	{
	
		width: 50%;	
		
	}
	
	bar[box=side-menu]
	{
		
		 position: fixed; 
		 top: 110px; 
		 right: 0px; 
		 display: none; 
		 z-index: 5;
		 background: linear-gradient(to right, #8DBDD7, #91CBCD);
		
	}

	bar[box=top-menu-item]
	{
		
		display: block;
		margin: 20px;
		font-size: 20px;
		font-weight: bold;
		cursor: pointer;
		
	}
	
	[color=white]
	{
		
		color: white;
		
	}
	
	[color=yellow]
	{
		
		color: #F0E9AB;
		
	}
	
	bar[box=top-menu-item]:hover
	{
	
		font-size: 24px;
		
	}
	
	contact[box=right-contact]
	{
		
		 position: fixed; 
		 bottom: 0px; 
		 right: 0px; 
		 display: block; 
		 z-index: 5;
		
	}
	
	contact[box=icon]
	{
		
		 display: block; 
		 margin: 15px;
		 cursor: pointer;
		
	}
	
	contact[box=icon] > img
	{
		
		 width: 50px;
		
	}
	
	banner[box=banner]
	{
		
		 display: flex;
		 flex-direction: column;
		 justify-content: center;
		 align-items: center;
		 height: 100%; 
		 background-image: url("/image/0206/pexels-fauxels-3184360.jpg"); 
		 background-size: cover;
		
	}
	
	banner[box=title]
	{
		
		font-size: 30px;
		font-weight: bold;
		color: white;
		text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5), -2px -2px 4px rgba(255, 255, 255, 0.5);
		
	}
	
	banner[box=sub-title]
	{
		
		font-size: 25px;
		font-weight: bold;
		color: #8EC4E0;
		text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5), -2px -2px 4px rgba(255, 255, 255, 0.5);
		
	}
	
	/*desgin[box=desgin]
	{
		
		 display: flex;
		 flex-direction: column;
		 height: 100%; 
		
	}*/
	
	desgin[pos=pc]
	{
		
		display: none;
		
	}
	
	desgin[box=text]
	{
		
		display: block; 
		/*height: 100%;*/
		
	}
	
	desgin[box=photo]
	{
	
		 display: block; 
		 width: 100%;
		 height: 100%;
		 background-size: cover;
		
	}
	
	desgin[pos=mod]
	{
		
		background-image: url("/image/0206/pexels-fauxels-3184292.jpg"); 
		
	}
	
	desgin[box=photo][pos=right]
	{
		
		background-image: url("/image/0206/pexels-fauxels-3184292.jpg"); 
		
	}
	
	desgin[box=photo][pos=left]
	{
		
		 background-image: url("/image/0206/pexels-photo-3184423.jpeg");
		
	}
	
	desgin[box=title]
	{
		
		 display: block; 
		 padding: 10%;
		 padding-bottom: 0px; 
		 font-size: 30px; 
		 font-weight: bold;
		 color: #7195B1;
		
	}
	
	desgin[box=content]
	{
		
		 display: block; 
		 margin: 5% 15%; 
		 font-size: 16px; 
		 line-height: 1.5;
		 color: #6C6C6C;
		
	}
	
	desgin[box=into]
	{
		
		 display: inline-block; 
		 margin: 10% 15%;
		 margin-top: 0px; 
		 font-size: 20px;
		 font-weight: bold;
		 cursor: pointer;
		
	}
	
	desgin[box=more]
	{
		
		color: #CEDEA6;
		
	}
	
	desgin[box=arrow]
	{
		
		color: #6C6C6C;
		
	}
	
	desgin[box=into]:hover
	{
		
		font-size: 26px;
		
	}
	
	rwd[box=RWD]
	{
		
		 display: block; 
		 background-color: #fafafa;
		
	}
	
	rwd[box=title]
	{
		 display: block;
		 padding: 7% 20% 0px 10%; 
		 font-size: 30px; 
		 font-weight: bold;
		 color: #6E90AC;
		
	}
	
	rwd[box=sub-title]
	{
		
		display: block;
		margin: 0px 20% 0px 10%; 
		font-size: 24px; 
		font-weight: bold;
		color: #5B5B5B;
		
	}
	
	rwd[box=grid]
	{
	
		display: grid; 
		grid-template-columns: repeat(1, 1fr); 
		grid-gap: 5px; 
		padding: 5% 15% 7% 15%;
		
		
	}
	
	rwd[box=content]
	{
		
		 display: flex; 
		 flex-direction: column; 
		 align-items: center;
		 margin: 20px;
		
	}
	
	rwd[box=grid-title]
	{
		
		 margin: 10px; 
		 padding: 5px 0px; 
		 border-bottom: 2px solid #D97909; 
		 text-align: center;
		 font-size: 22px; 
		 font-weight: bold;
		
	}
	
	rwd[box=text]
	{
		
		margin: 5px; 
		font-size: 16px; 
		text-align: left;
		line-height: 1.5;
		color: #787878;
		
	}
	
	introduce[box=introduce]
	{
		
		 display: flex; 
		 flex-direction: column; 
		 align-items: center;
		 padding-bottom: 10%; 
		 background-color: #f3f3c8;
		
	}
	
	introduce[box=title]
	{
		
		 margin-top: 10%; 
		 font-size: 30px;
		 font-weight: bold;
		 color: #809AAF;
		
	}
	
	introduce[box=sub-title]
	{
		
		 margin-top: 10px;
		 margin-bottom: 20px; 
		 font-size: 24px;
		 font-weight: bold;
		
	}
	
	introduce[box=intr]
	{
		
		 margin: 5px 20px;
		 font-size: 14px;
		 font-weight: bold;
		 text-align: center;
		 /*letter-spacing: 2px;*/
		 color: #474A46;
		
	}
	
	introduce[pos=last]
	{
	
		margin-bottom: 5%;
		
	}
	
	introduce[box=content]
	{
		
		 display: flex; 
		 width: 80%; 
		 height: 200px; 
		 margin: 25px 20px; 
		 border-radius: 10px; 
		 background-color: white;
		
	}
	
	introduce[pos=right][color=blue]
	{
		
		 border-right: 30px solid #74BDDE; 
		
	}
	
	introduce[pos=right][color=bluegreen]
	{
		
		 border-right: 30px solid #78D2D3; 
		
	}
	
	introduce[pos=right][color=greenblue]
	{
		
		 border-right: 30px solid #91DEAA; 
		
	}
	
	introduce[pos=right][color=green]
	{
		
		 border-right: 30px solid #CDE6AD; 
		
	}
	
	introduce[pos=right][color=black]
	{
		
		 border-right: 30px solid black; 
		
	}
	
	introduce[pos=right] > [modpos=left]
	{
		
		 border-radius: 10px 0px 0px 10px; 
		
	}
	
	introduce[pos=left][color=blue]
	{
		
		 border-left: 30px solid #74BDDE; 
		
	}
	
	introduce[pos=left][color=bluegreen]
	{
		
		 border-left: 30px solid #78D2D3; 
		
	}
	
	introduce[pos=left][color=greenblue]
	{
		
		 border-left: 30px solid #91DEAA; 
		
	}
	
	introduce[pos=left][color=green]
	{
		
		 border-left: 30px solid #CDE6AD; 
		
	}
	
	introduce[pos=left][color=black]
	{
		
		 border-left: 30px solid black; 
		
	}
	
	
	introduce[pos=left] > [modpos=right]
	{
		
		 border-radius: 0px 10px 10px 0px; 
		
	}
	
	/*introduce[box=image]
	{
		
		 width: 40%;
		 height: 100%; 
		 background-size: cover;
		 background-position: center;
		
	}*/
	
	introduce[box=text]
	{
		
		 display: flex;
		 flex-direction: column;
		 justify-content: center;
		 width: 100%;
		 padding: 30px;
		 /*border-radius: 20px;*/
		 background-size: cover;
		 background-position: center;
		
	}
	
	introduce[box=content-title]
	{
		
		font-size: 26px;
		font-weight: bold;
		
	}
	
	introduce[color=blue] introduce[box=content-title]
	{
		
		color: #74BDDE;
		
	}
	
	introduce[color=bluegreen] introduce[box=content-title]
	{
		
		color: #78D2D3;
		
	}
	
	introduce[color=greenblue] introduce[box=content-title]
	{
		
		color: #91DEAA;
		
	}
	
	introduce[color=green] introduce[box=content-title]
	{
		
		color: #CDE6AD;
		
	}
	
	introduce[color=black] introduce[box=content-title]
	{
		
		color: black;
		
	}
	
	introduce[box=content-text]
	{
		
		margin: 5px 0px;
		font-size: 16px;
		color: #474A46;
		
	}
	
	[mod="1"]
	{
		
		 background-image:url("/image/0206/exclusive-premium-quality-brand-graphic-concept.jpg");
		
	}
	
	[mod="2"]
	{
		
		 background-image:url("/image/0206/illustration-quality-product-warranty-assurance-laptop.jpg");
		
	}
	
	[mod="3"]
	{
		
		 background-image:url("/image/0206/engineer-meeting-architectural-project.jpg");
		
	}
	
	[mod="4"]
	{
		
		 background-image:url("/image/0206/standard-quality-control-collage-concept.jpg");
		
	}
	
	[mod="5"]
	{
		
		 background-image:url("/image/0206/standard-quality-control-collage-concept (1).jpg");
		
	}
	
	[mod="6"]
	{
		
		 background-image:url("/image/0206/business-man-working-office-desktop.jpg");
		
	}
	
	[mod="7"]
	{
		
		 background-image:url("/image/0206/approved-authentic-quality-guaranteed-product-concept.jpg");
		
	}
	
	[mod="8"]
	{
		
		 background-image:url("/image/0206/design.jpg");
		
	}
	
	[mod="9"]
	{
		
		 background-image:url("/image/0206/portrait-from-back-tired-students-stretching-after-long-work-indoor-photo-office-workers-fooling-around-during-meeting-conference-hall-with-big-windows.jpg");
		
	}
	
	[mod="10"]
	{
		
		 background-image:url("/image/0206/delivery-man-smiling-holding-cardboard-box.jpg");
		
	}
	
	[mod="11"]
	{
		
		 background-image:url("/image/0206/asia-businesswoman-social-distancing-new-normal-situation-virus-prevention-while-using-laptop-presentation-colleagues-about-plan-video-call-while-work-office-life-after-corona-virus.jpg");
		
	}
	
	[mod="12"]
	{
		
		 background-image:url("/image/0206/standard-quality-control-concept-m.jpg");
		
	}
	
	[box=background]
	{
		
		 display: flex; 
		 flex-direction: column;
		 padding: 3px;
		 border-radius: 10px; 
		 background-color: rgba(255, 255, 255, 1);	
		
	}
	
	contact[box=contact]
	{
		
		 display: flex; 
		 flex-direction: column; 
		 align-items: center;
		 padding: 20% 0px;
		
	}
	
	contact[box=title]
	{
		
		 font-size: 30px; 
		 font-weight: bold;
		 color: #779AB5;
		
	}
	
	contact[box=sub-title]
	{
		
		 margin: 20px 0px; 
		 font-size: 18px;
		 font-weight: bold;
		 color: #CDDAB0;
		
	}
	
	form[box=contact-form]
	{
		
		 width: 100%;
		
	}
	
	contact[box=content]
	{
		
		 display: block; 
		 margin: 5%;
		
	}
	
	contact[box=label]
	{
		
		 font-size: 18px;
		 font-weight: bold;
		
	}
	
	contact[for=textarea]
	{
		
		vertical-align: top;
		
	}
	
	contact[for=checkbox]
	{
		
		 font-size: 16px;

	}
	
	input[box=input]
	{
		
		 padding-left: 20px;
		 width: 100%; 
		 height: 50px;
		 font-size: 18px;
		 
	}
	
	textarea[box=input]
	{
		
		 padding-left: 20px;
		 width: 100%; 
		 height: 120px;
		 font-size: 18px;
		
	}
	
	contact[box=privacy]
	{
		
		 display: flex; 
		 justify-content: center; 
		 margin: 5%;
		
	}
	
	input[box=checkbox]
	{
		
		 width: 20px; 
		 height: 20px; 
		 margin-right: 20px;
		 cursor: pointer;
		
	}
	
	contact[box=verify]
	{
		
		 display: flex; 
		 justify-content: center;
		 margin: 2% 3%;
		
	}
	
	contact[for=verify]
	{
		
		 margin-top: 15px;
		
	}
	
	input[box=verify]
	{
		
		 height: 50px; 
		 width: 50%; 
		 margin-left: 20px;
		 text-align: center;
		
	}
	
	contact[box=convas]
	{
		
		 display: block; 
		 margin: 0px 20px; 
		 width: 50%; 
		 background-color: black;
		
	}
	
	contact[box=submit]
	{
		
		 display: flex; 
		 justify-content: center;
		 margin: 5% 3%;
		
	}
	
	contact[box=button]
	{
		
		 width: 50%;
		 margin: 20px; 
		 padding: 10px 5%; 
		 font-size: 20px;
		 text-align: center;
		 border: 1px solid black; 
		 background-color: white;
		 cursor: pointer;
		
	}
	
	contact[box=button]:hover
	{
		
		background-color: #F0E9AB;
		
	}
	
	contact[box=errorMessage]
	{
	
		display: none;
		margin: 0px 5%;	
		color: red;
		
	}
	
	contact[box=ES]
	{
		
		display: flex;
		flex-direction: column;
		align-items: center;
		color: red;
		
	}
	
	footer[box=footer]
	{
		
		 display: block; 
		 background-color: #342E30;
		
	}
	
	footer[box=grid]
	{
		
		 display: grid; 
		 grid-template-columns: repeat(3, 1fr); 
		 padding: 50px 5%;
		 padding-bottom: 0px; 
		 grid-gap: 5px;
		
	}
	
	footer[box=image]
	{
		
		 display: flex; 
		 align-items: center; 
		 justify-content: center;
		
	}
	
	footer[box=image] > img
	{
		
		 width: 30%;
		
	}
	
	footer[box=menu]
	{
		
		 display: grid; 
		 grid-template-columns: repeat(1, 1fr); 
		 grid-gap: 0px 20px;
		
	}
	
	footer[box=item]
	{
		
		 text-align: center;
		 font-size: 18px;
		 font-weight: bold;
		 color: white;
		 cursor: pointer;
		
	}
	
	footer[box=item]:hover
	{
		
		color: #F0E9AB;
		
	}
	
	footer[box=company]
	{
		
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 20px;
		font-size: 14px;
		color: white;
		
	}
	
	illustrate[box=illustrate]
	{
		
		 display: flex; 
		 flex-direction: column; 
		 padding-bottom: 60px; 
		 align-items: center;
		 background-color: #F1F0E7;
		
	}
	
	illustrate[box=title]
	{
		
		 width: 60%;
		 padding: 50px 0px;
		 border-bottom: 2px solid black; 
		 font-size: 40px;
		 font-weight: bold;
		 text-align: center;
		 color: black;
		
	}
	
	illustrate[box=intr]
	{
		
		 margin: 20px 0px;
		 font-size: 16px;
		 font-weight: bold;
		 text-align: center;
		 letter-spacing: 2px;
		 color: #7C7C7B;
		
	}
	
	illustrate[pos=sub-title]
	{
		
		 margin-top:5%;
		 margin-bottom: 30px;
		
	}
	
	illustrate[pos=intr]
	{
		
		line-height: 2;	
		
	}
	
	illustrate[pos=action]
	{
		
		color: #AC0023;
		
	}
}