.solution * {
  box-sizing: border-box;
}
body{
	min-width: 1366px;
	/* overflow-x: hidden; */
}
.solution_top{
	/* position: relative; */
	width: 100%;
	height: 240px;
	overflow-x: hidden;
	background-image: url('/image/solution/solution_banner.png');
	background-position: center center; 
	background-repeat: no-repeat;
}
.solution_title{
	width: 100%;
	position: absolute;
	text-align: center;
	left: 0;
	top: 170px;
	font-size: 40px;
	font-family: Microsoft YaHei;
	color: #FEFEFE;
	z-index: 2;
}
/* .solution_top{
	position: relative;
	width: 100%;
}
 */
/* .solution_top img{
	width: 100%;
} */
/* .solution_title{
	position: absolute;
	font-size: 40px;
	font-family: Microsoft YaHei;
	color: #FEFEFE;
	width: 100%;
	text-align: center;
	top: calc(50% - 20px);
} */

.solution_list{
	padding: 159px 0 80px;
	position: relative;
}
.solution_tabBar_con{
	width: 100%;
	height: 100px;
	position: absolute;
	top: -35px;
}

.solution_tabBar{
	display: flex;
	justify-content: center;
	align-items: center;
	max-width: 1300px;
	width: 86%;
	height: 100px;
	line-height: 100px;
	background: #FFFFFE;
	box-shadow: 3px 5px 9px 1px rgba(25, 42, 55, 0.12);
	border-radius: 8px;

	margin: 0 auto;
}

.bar_item{
	display: flex;
	justify-content: center;
	align-items: center;
	max-width: 325px;
	width: 25%;
	height: 100px;
	background: #fff;
	font-size: 18px;
	font-family: Microsoft YaHei;
	font-weight: 400;
	color: #292929;
	position: relative;
	cursor: pointer;
}
.active_bar{
	background: #EBF6EC;
	font-size: 18px;
	font-family: Microsoft YaHei;
	font-weight: bold;
	color: #3AA645;
	/* border-bottom: 2px solid #5aa451; */
}
.line{
	position: absolute;
	bottom: 0;
	/* left: 2px; */
	width: calc(100% - 3px);
	display: none;
	margin: 0 auto;
	border-bottom: 2px solid #5aa451;
	animation: line 1s linear 0s 1;
}
@keyframes line
{
    from {width: 0px;}
    to {width: calc(100% - 3px);}
}

.firstBar{
	border-radius: 8px 0px 0px 8px;
}
.endBar{
	border-radius: 0px 8px 8px 0px;
}
.bar_img{
	width: 28px;
	height: 28px;
	margin-right: 15px;
}
.bar_img img{
	width: 28px;
	height: 28px;
}

.solution_item{
	display: flex;
	justify-content: center;
	align-items: center;
	display: none;
	width: 100%;
	overflow-x: hidden;
}
.solution_item_img, .solution_item_img img{
	width: 501px;
}
.solution_item_img{
	margin-right: 176px;

}
.service_solution{
	display: none;
}
.animationSolution .solution_item_img{
	animation: solutionLeft 1s linear 0s 1;
}
.animationSolution .solution_item_txt{
	animation: solutionRight 1s linear 0s 1;
}
@keyframes solutionLeft
{
    from {transform: translateX(-200%);}
    to {transform: translateX(0px);}
}
@keyframes solutionRight
{
    from {transform: translateX(200%);}
    to {transform: translateX(0px);}
}

.solution_item_txt{
	width: 501px;
	/* padding-top: 142px; */
}
.solution_item_title{
	font-size: 28px;
	font-family: Microsoft YaHei;
	font-weight: bold;
	color: #292929;
	margin-bottom: 40px;
}
.solution_item_text{
	font-size: 16px;
	font-family: Microsoft YaHei;
	font-weight: 400;
	color: #606060;
	line-height: 28px;
}

.service{
	background-color: #5aa451;
	padding: 88px 0 100px;
	text-align: center;

}
.service_solution{
	height: 637px;
	overflow-y: hidden;
}
.strademark , .ssupply{
	height: 405px;
}
.service_title{
	font-size: 28px;
	font-family: Microsoft YaHei;
	font-weight: bold;
	color: #FFFFFF;
	margin-bottom: 15px;
}
.service_text{
	font-size: 16px;
	font-family: Microsoft YaHei;
	font-weight: 400;
	color: #FFFFFF;
	margin-bottom: 60px;
}

.service_list{
	display: flex;
	justify-content: center;
	align-items: center;
	margin-bottom: 20px;
}
.service_item{
	width: 310px;
	height: 232px;
	background: #6bbc74;
	box-shadow: 4px 7px 11px 1px rgba(58, 166, 69, 0.1);
	border-radius: 8px;
	padding: 68px 0;
	text-align: center;
	margin: 0 10px;
	cursor: pointer;
}
.bgText{
	font-size: 14px;
	font-family: Microsoft YaHei;
	font-weight: 400;
	color: #606060;
	line-height: 24px;
	opacity: 0.8;
	padding: 0 30px ;
	text-align: left;
}
.service_item .bgText{
	display: none;
}
.hover_item .service_item_img, .hover_item  .service_item_text{
	display: none;
}
.hover_item{
	padding: 0px 0 0;
	background: #FFFEFE;
	animation: feadin 0.7s ease-in 0s 1;
	display: flex;
	align-items: center;
}

@keyframes feadin
{
    from {background: #4EAF58;}
    to {background: #fff;}
}
.hover_item .bgText{
	display: block;
}

.service_item_img , .service_item_img img{
	width: 57px;
	height: 50px;
	margin:0 auto;
}
.service_item_text{
	font-size: 20px;
	font-family: Microsoft YaHei;
	font-weight: 400;
	color: #FFFFFF;
	margin-top: 30px;
}

.animationSolutionFirst {
	animation: solutionDown 1s linear 0s 1;
}


@keyframes solutionDown
{
    from { transform: translateY(200%);}
    to {transform: translateY(0px);}
}
<!--0.00027894973754883-->