#mainContent {
    width: 100%
}

.cont01 {
  padding: 85px 0 117px;
  text-align: center;
  position: relative;
  background: #F2F0EF;
}

.cont01 .container {
	position: relative;
	z-index: 1;
}


.cont02 {
  padding: 97px 0 120px;
  text-align: center;
  overflow: hidden;
  width: 100%;
  position: relative;
}

.cont02::before {
  content: "";
  width: 100%;
  height: 300px;
  display: block;
  background: url(../img/bg_service.png) no-repeat right bottom;
  z-index: -1;
  position: absolute;
  bottom: 0;
  left: 0;
  transition: 0.7s ease-out;
}

.cont02.isAnimate::before {
	width: 100%;
}

.top-about,
.top-company {
	display: flex;
	color: #FFF;
}

.top-about p,
.top-company p {
	margin-bottom: 40px;
}

.top-about {
	margin-bottom: 40px;
}

.about-l,
.company-r {
	width: 470px;
	padding: 40px 60px;
	background: #006837;
}

.about-r,
.company-l {
	flex: 1;
	display: block;
	background: url(../img/top-about.jpg) no-repeat center center;
	background-size: cover;
	transition: 0.3s;
}

.company-l {
	background-image: url(../img/top-company.jpg);
}

@media (max-width: 767px) {
	
	.cont01 {
		padding: 43px 0 55px;
	}
	.top-about {
		flex-direction: column-reverse;
	}
	.top-company {
		flex-direction: column;
	}
	.about-r, .company-l {
		flex: auto;
		height: 250px;
	}
	.about-l, .company-r {
		width: auto;
		padding: 20px 30px;
	}
	.about-l {
		margin-bottom: 40px;
	}
	.cont02 {
		padding: 57px 0 65px;
		background: #FFFFFF url(../img/bg_service.png) no-repeat left bottom;
	}	












}