@charset "utf-8";

:root {
	--solutionBgColor: #fff;
	--solutionBgColorActive: rgba(14, 110, 184, 1);
	--solutionShadow: 0 5px 10px rgba(0, 0, 0, 0.1);
	--solutionFontColor: #000;
	--solutionFontColorActive: #fff;
	--solutionFontSize: 16px;
	--solutionTitleSize: 40px;
	--solutionNumSize: 60px;
	--solutionNumColor: rgba(0, 0, 0, 0.1);
	--solutionNumColorActive: rgba(255, 255, 255, 1);

	--productionBgColorActive: rgba(234, 84, 19, 1);
}

.solution {
	display: grid; grid-template-columns: 1fr 1fr 1fr; grid-gap: 40px; position: relative;
}
.solution > div {
	background: var(--solutionBgColor); color: var(--solutionFontColor); font-size: var(--solutionFontSize); line-height: 2em; padding: 100px 40px 60px 40px; box-shadow: var(--solutionShadow);
}
.solution > div .bg {
	position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: var(--solutionBgColorActive);
	transition: transform 0.5s 0s; transform: scaleY(0); transform-origin: bottom;
}
.solution > div > .text {
	position: relative; z-index: 2;
	transition: color 0.5s 0s, margin 0.5s 0s;
}
.solution > div .title {
	position: relative; z-index: 2;
	font-size: var(--solutionTitleSize); line-height: 1.2em; margin: 0 0 40px 0;
	transition: color 0.5s 0s, margin 0.5s 0s;
}
.solution > div .num {
	position: absolute; margin-top: -20px;
	color: var(--solutionNumColor); font-size: var(--solutionNumSize); line-height: 1em;
	transition: color 0.5s 0s, margin 0.5s 0s;
}
.solution > div:hover .title,
.solution > div:hover > .text {
	color: var(--solutionFontColorActive);
}
.solution > div:hover .num {
	color: var(--solutionNumColorActive); margin-top: -70px;
}
.solution > div:hover .bg {
	transform: scaleY(1);
}

.production > div .bg {
	background: var(--productionBgColorActive) !important;
}



.indexCase {
	font-size: var(--solutionTitleSize);  text-align: center; line-height: 1.5em; margin: 100px 0 0 0;
	transition: opacity 1s 0s ease-in, transform 1s 0s ease-in; opacity: 1;
}
.indexCase.onload {
	opacity: 0;
}


@media only screen and (max-width: 1280px) {
	.solution {
		grid-template-columns: 1fr 1fr;
	}
}
@media only screen and (max-width: 680px) {
	.solution {
		grid-template-columns: 1fr; grid-gap: 0; grid-row-gap: 20px;
	}
}


.solutionIcon {
	display: grid; grid-template-columns: 1fr 1fr 1fr 1fr 1fr; grid-gap: 80px; position: relative; margin: 100px 140px 40px 140px;
}
.solutionIcon > div {
	text-align: center; vertical-align: middle; display: flex; flex-flow: row nowrap; align-items: center; justify-content: center;
}
.solutionIcon > div img {
	max-width: 100%; max-height: 100px;
}

@media only screen and (max-width: 1440px) {
	.solutionIcon {
		grid-template-columns: 1fr 1fr 1fr 1fr;
	}
}

@media only screen and (max-width: 1280px) {
	.solutionIcon {
		grid-template-columns: 1fr 1fr 1fr;
	}
}
@media only screen and (max-width: 960px) {
	.solutionIcon {
		margin: 100px 80px 40px 80px;
	}
}
@media only screen and (max-width: 680px) {
	.solutionIcon {
		grid-template-columns: 1fr 1fr;
	}
}
@media only screen and (max-width: 550px) {
	.solutionIcon {
		margin: 60px 40px 40px 40px; grid-gap: 40px;
	}
}


.productionIcon {
	display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; grid-gap: 20px; position: relative; margin: 100px 100px 40px 100px;
}
.productionIcon > div {
	text-align: center; vertical-align: middle; display: flex; flex-flow: row nowrap; align-items: center; justify-content: center;
}
.productionIcon > div img {
	max-width: 100%; max-height: 100%;
}

@media only screen and (max-width: 1440px) {
	.productionIcon {
		grid-template-columns: 1fr 1fr 1fr;
	}
}
@media only screen and (max-width: 960px) {
	.productionIcon {
		grid-template-columns: 1fr 1fr; margin: 100px 40px 40px 40px;
	}
}
@media only screen and (max-width: 550px) {
	.productionIcon {
		grid-template-columns: 1fr; margin: 60px 20px 40px 20px;
	}
}