.main-container{
	display: grid;
	grid-template-rows: 786px 1064px 851px 731px 314px 88px;
	grid-template-columns: 1366px;
	row-gap: 5px;
	width: 1366px;
	background: white !Important;
	margin: 0 auto auto;
}
	.content-box01 {
		display: grid;
		grid-template-rows: 64px 1fr;
		grid-template-columns: 1366px;
		background-image: linear-gradient(180deg, #FFFFFF 56.43%, rgba(255, 255, 255, 0.8) 79.64%, rgba(255, 255, 255, 0) 100%), url(../images/hero-topbann-001.png);
		background-size: cover;
		background-position: center top;
		padding-top: 30px;
	}
		.top-banner {
			position:relative;
			display: grid;
			grid-template-columns: 50px 200px 1fr 130px 100px 130px;
			grid-template-rows:64px;
			justify-content: start;
			line-height:64px;
			padding-left: 45px;
			padding-right:59px;
		}
			.top-banner > div {
				display:flex;
				justify-content:center;
				align-items:center;
			}
			.top-banner .main-logo {
				background:url(../images/eot_icon.png) no-repeat center center;
				background-size: 48px;
			}
			.top-banner .main-name {
				font-size: 20px;
				font-weight: 600;
				color:var(--Atlantis950);
				justify-content:start !important;
				padding-left:10px;
			}
			.top-banner .main-solution-select{
				position:relative;
				width: 126px;
				height: 42px;
				margin: auto;
				background-color: var(--Atlantis100);
				border-radius: 21px; 
				padding-right: 10px;
			}
				.main-solution-select:after{
					content:'\02C7';	
					position:absolute;
					right:13px;
					top:20%;
					font-size:40px;
					font-weight:100;
					height:42px;
				}
			.top-banner .main-info-us {
				width: 86px;
				height: 42px;
				background-color: var(--Atlantis100);
				border-radius: 21px;
				margin: auto 13px;
			}
			.top-banner .main-contact-button {
				width: 125px;
				background: var(--Atlantis950);
				height: 42px;
				margin: auto 15px;
				border-radius: 21px;
				color: white;
			}
			.top-banner .solution-droodown {
				position: absolute;
				display: none;
				flex-direction: column;
				justify-content: flex-start;
				align-items: flex-start;
				width: 300px;
				border: 1px solid var(--Atlantis200);
				border-radius: 20px;
				left: 850px;
				top: 56px;
				background: var(--Atlantis100);
				padding-bottom:10px;
				z-index: 99;
			}
				.solution-droodown .dropdown-item {
					width: 100%;
					text-align: center;
					height: 40px;
					line-height: 40px;
					cursor: pointer;
				}
					.dropdown-item:hover{
						font-weight:900;
					}
		.content-box01 .top-content{
			display: flex;
			flex-direction: column;
			justify-content: start;
			align-items: center;
			padding-top: 174px;
		}
			.top-content .content01{
				color:var(--Atlantis800);
				font-size:64px;
				font-weight:600;
			}
			.top-content .content02{
				color:var(--Atlantis950);
				font-size:64px;
				font-weight:600;
			}
			.top-content .content03{
				color: rgba(0,0,0,0.6);
				font-size: 16px;
				font-weight: 300;
				width: 576px;
				margin: 37px auto 0px;
			}

	.content-box02{
		display:flex;
		flex-direction:column;
		justify-content:flex-start;
		align-items:center;
	}
		.box02-banner{
			display:grid;
			grid-template-rows:90px 73px 31px 68px;
		}
			.box02-banner .big-text{
				font-size:54px;
				font-weight:600;
				color:var(--Atlantis800);
				line-height:78px;
			}
			.box02-banner .tiny-text{
				font-size:16px;
				font-weight:100;
				color:rgba(0,0,0,0.6);
				line-height:26px;
			}
		.box02-content{
			display:grid;
			grid-template-columns:396px 373px 471px;
			grid-template-rows:repeat(2, 340px);
			row-gap:20px;
			column-gap: 20px;
		}
			.box02-content > div{
				border:1px solid var(--Atlantis800);
				border-radius:24px;
				box-shadow: 0 32px 37.5px 0 rgba(0,0,0,0.1);
				display:grid;
				grid-template-rows: 117px 1fr;
			}
			.box2-content-fac{
				grid-area:1/3/3/3;
				background-color:var(--Atlantis50);
			}
			.box2-content-bms{
				grid-area:2/1/2/3;
				grid-template-rows: 96px 1fr;
			}
			.box2-content-enr{
				display:grid;
				background-image:linear-gradient(to right,var(--Sunshade50),var(--Atlantis50))
			}
			.box2-content-aps{
				display:grid;
				background:white;
			}
				.solution-banner{
					position:relative;
					border-radius:24px 24px 0 0;
					text-align:left;
					padding:16px 20px 20px 20px;
				}
					.solution-banner > h4{
						font-size:20px;
						font-weight:600;
						color:var(--Atlantis950);
						height:30px;
						line-height:30px;
						margin:0 0 5px 0;
					}
					.solution-banner > span{
						font-size:14px;
						color:rgba(0,0,0,0.6);
						line-height:20px;
						margin:0;
					}
					.solution-banner > div:last-child{
						position:absolute;
						background:url(../images/NortEastArrow.png) no-repeat center center;
						background-size:13.5px;
						font-size:13px;
						width:40px;
						height:40px;
						line-height:40px;
						text-align:center;
						background-color:var(--Atlantis100);
						top:12px;
						right:12px;
						border-radius:50%;
					}
				.solution-pix{
					background:white url(../images/master_banner_01.jpg) no-repeat center center;
					background-size:cover;
					border-radius:0 0 24px 24px;
				}
				.box2-content-fac .solution-pix{
					background-image:url(../images/Category-manufactory.png);
					background-size:100%;
				}
				.box2-content-bms .solution-pix{
					background-image:url(../images/category-bms.png);
					background-size:100%;
				}
				.box2-content-enr .solution-pix{
					background-image:url(../images/Category-energy.png);
					background-size:cover;
				}
				.box2-content-app .solution-pix{
					background-image:url(../images/Category-cloud.png);
					background-size:100%;
				}
	.content-box03 {
		display: grid;
		grid-template-rows: 185px 406px;
		row-gap: 60px;
		padding: 100px 0px;
		margin: 0;
	}
		.box03-banner{
			display:flex;
			flex-direction:column;
		}
			.box03-banner .big-text{
				font-size:54px;
				font-weight:600;
				color:var(--Atlantis800);
				height:81px;
				line-height:81px;
				margin:0 0 4px 0;
			}
			.box03-banner .tiny-text{
				font-size:16px;
				font-weight:100;
				color:rgba(0,0,0,0.6);
				line-height:26px;
				margin:0 0 32px 0;
			}
			.box03-banner  .button-container{
				display: flex;
				flex-direction: row;
				justify-content: center;
				align-items: end;
				margin: 0;
				height:42px;
			}
				.box03-info-us{
					font-size:16px;
					font-weight: 500;
					width:109px;
					height:42px;
					line-height:42px;
					background-color:var(--Atlantis200);
					text-align:center;
					border-radius:40px;
					margin-right:12px;
				}
				.box03-contact-button{
					font-size:16px;
					font-weight: 500;
					color:white;
					width:125px;
					height:42px;
					line-height:42px;
					background-color:var(--Atlantis950);
					text-align:center;
					border-radius:40px;
					margin:0;
				}
		.box03-content{
			display:grid;
			grid-auto-columns:1118px;
			grid-auto-rows:187px;
			row-gap:32px;
			margin:0 auto;
		}
			.box03-content-item{
				border-radius:20px;
				display:grid;
				grid-template-rows:52px 75px;
				row-gap:20px;
				padding:20px 28px;
			}
			.box03-row01{
				display:grid;
				grid-template-columns:repeat(3,295px);
				column-gap:20px;
				justify-content:center;
			}
				.box03-row01 > div:first-child{
					background-image:linear-gradient(to right,var(--Sunshade50),var(--Atlantis50))
				}
				.box03-row01 > div:last-child{
					background-color:var(--Atlantis100);
				}
			.box03-row02{
				display:grid;
				grid-template-columns:repeat(4,264px);
				column-gap:20px;
				justify-content:center;
			}
				.box03-row02 > div:nth-child(2){
					background-color:var(--Atlantis50);
				}
				.why-content{
					display: grid;
					grid-template-rows: 27px 45px;
					justify-content:start;
					align-items:center;
				}
					.why-content > div{
						font-size: 18px;
						line-height: 27px;
						text-align: left;
						font-weight: bolder;
						color:var(--Atlantis950);
						white-space: nowrap;
					}
					.why-content > span{
						font-size:16px;
						line-height:22px;
						text-align: left;
						font-weight: 200;
						color:rgba(0,0,0,0.6);
					}
	.content-box04{
		position:relative;
		display:grid;
		grid-template-rows:111px 480px;
		row-gap:40px;
		background:var(--Atlantis50);
		padding:100px 80px 0;
	}
		.box04-banner{
			display:grid;
			grid-template-columns:488px 132px;
			grid-auto-rows:111px;
			justify-content:space-between;
		}
			.box04-topic{
				display:flex;
				flex-direction:column;
				align-items:start;
			}
				.box04-topic .big-text{
					font-size:54px;
					font-weight:600;
					color:var(--Atlantis800);
					height:81px;
					line-height:81px;
					margin:0;
					text-align:left;
				}
				.box04-topic .tiny-text{
					font-size:16px;
					font-weight:100;
					color:rgba(0,0,0,0.6);
					line-height:26px;
					margin:0 0 32px 0;
				}
			.box04-nav {
				display: grid;
				grid-template-columns:52px 52px;
				grid-auto-rows:52px;
				column-gap: 20px;
				margin:auto 0;
			}
				.box04-nav > div{
					background-color:var(--Atlantis200);
					width:52px;
					line-height:52px;
					border-radius:50%;
					padding-top: 9px;
				}

		.box04-content-beginborder {
			position: absolute;
			display:none;
			width: 100px;
			height: 380px;
			background: linear-gradient(to right,rgba(245,251,234,1),rgba(245,251,234,0));
			left: 80px;
			top: 252px;
		}
		.box04-content-endborder {
			position: absolute;
			width: 100px;
			height: 380px;
			background: linear-gradient(to left,rgba(245,251,234,1),rgba(245,251,234,0));
			right: 80px;
			top: 252px;
		}

		.box04-content {
			display: flex;
			flex-direction: row;
			overflow-y: hidden;
			overflow-x: auto;
		}
			.box04-content::-webkit-scrollbar{ 
				display:none !important;
			}
			.box04-content-item{
				display:grid;
				height:380px;
				grid-auto-columns:300px;
				grid-template-rows:228px 152px;
				margin-right: 24px;
				border-radius: 20px;
				box-shadow: 0px 18px 37.5px 0px rgba(0,0,0,0.1);
			}
				.box04-content-item > div:first-child{
					border-radius:20px 20px 0 0;
				}
				.proj-photo-01{
					background: url(../images/cpms_manufact_dashboard_thump.png) no-repeat right  bottom, #d6d7d9;
					background-size: cover;
				}
				.proj-photo-02{
					background:url(../images/CBM_Motor_Thump.png) no-repeat center center;
					background-size:cover;
				}
				.proj-photo-03{
					background:url(../images/scada_bann_thump.png) no-repeat center center;
					background-size:cover;
				}
				.proj-photo-04{
					background:url(../images/Food_Factory_Bann.png) no-repeat center center;
					background-size:cover;
				}
				.proj-photo-05{
					background:url(../images/Solar_Farm_Bann.png) no-repeat center center;
					background-size:100%;
				}

				.proj-info-box{
					display:flex;
					flex-direction:column;
					justify-content:flex-start;
					align-items:flex-start;
					background:white;
					border-radius:0px 0px 20px 20px;
					padding:12px 20px;
				}
					.proj-topic{
						font-size:0.96em;
						font-weight:bolder;
						text-align:left;
						margin:0 0 2px 0;
					}
					.proj-detail{
						font-size:14px;
						font-weight:400;
						color:rgba(0,0,0,0.6);
						text-align:left;
						margin:0 0 12px 0;
					}
					.proj-read{
						display:block;
						width:260px;
						height:42px;
						line-height:42px;
						background:var(--Atlantis100);
						border-radius:40px;
						font-size:16px;
						font-weight:500;
					} 
	.content-box05{
		display:grid;
		grid-template-columns:527px 477px;
		grid-template-rows:48px 42px;
		row-gap:24px;
		column-gap: 60px;
		padding:100px 80px;
		justify-content: center;
	}
		.box05-topic{
			display:flex;
			justify-content: center;
			align-items:center;
			font-size:52px;
			font-weight:bold;
			white-space: nowrap;
			color:var(--Atlantis800);
			grid-area: 1/1/3/2;
		}
		.box05-content{
			display:block;
			width:100%;
			font-size:16px;
			font-weight:300;
			text-align:left;
			color:rgba(0,0,0,0.6)
		}
		.box05-button{
			display:block;
			width:125px;
			height:42px;
			line-height:42px;
			color:white;
			border-radius:40px;
			background:var(--Atlantis950);
			text-align:center;
		}