@charset "utf-8";

:root {
	--textColor: #000;
	--mainColor: rgba(234, 84, 19, 1);

	--indexHeaderBgColor: rgba(255, 255, 255, 1);

	--selecterSize: 10px;
	--selecterColor: var(--indexHeaderBgColor);
	--selecterColorActive: var(--mainColor);

	--subtitleFontColor: var(--textColor);
	--subtitleFontSize: 14px;
	--titleFontColor: var(--mainColor);
	--titleFontSize: 40px;
	--descriptionFontColor: var(--textColor);
	--descriptionFontSize: 14px;
	--buttonBgColor: var(--mainColor);
	--buttonBgColorActive: var(--indexHeaderBgColor);
	--buttonFontColor: #fff;
	--buttonFontColorActive: var(--textColor);
	--buttonFontSize: 14px;

	--headerMiddleBgColor: rgba(14, 110, 184, 1);
	--headerMiddleBgColorActive: rgba(255, 255, 255, 1);
	--headerMiddleBorder: rgba(255 ,255 , 255, 0.5) 1px solid;
	--headerMiddleFontColor: var(--headerMiddleBgColorActive);
	--headerMiddleFontColorActive: rgba(0, 0, 0, 1);
	--headerMiddleFontSize: 22px;
}



.indexHeader {
	width: 100%; background-color: var(--indexHeaderBgColor); box-sizing: border-box;
	display: flex; align-items: flex-start; justify-content: center;
	transition: opacity 1s 0s ease-in, transform 1s 0s ease-in; opacity: 1;
}
.indexHeader.onload {
	opacity: 0;
}
.indexHeader > div {
	width: 1280px; height: 640px; margin: 0 auto; padding: 0 0 50px 0; background-color: var(--indexHeaderBgColor); box-sizing: border-box;
}



.headerSlider {
	margin: 60px 20px 40px 20px; box-sizing: border-box;
}
.headerSlider > .headers {
	width: 100%; overflow: hidden;
}
.headerSlider > .headers > div {
	width: 100%; display: flex; margin-left: -0%;
	transition: margin 0.3s ease-in;
}
.headerSlider > .headers > div > div {
	width: 100%; display: flex; overflow: hidden;
	transition: opacity 1s ease-in; opacity: 0;
}
.headerSlider > .headers > div > div.active {
	opacity: 1;
}

.headerSlider > .headers > div > div > .image {
	flex: 1; margin: 0 20px 0 0;
	display: flex; justify-content: center; align-items: flex-start;
	transition: transform 0.7s ease-in; transform: translate(-40px, 0);
}
.headerSlider > .headers > div > div > .image > img {
	max-width: 100%;
}
.headerSlider > .headers > div > div > .content {
	flex: 1;
	display: flex; flex-flow: column wrap; align-content: flex-start; justify-content: flex-end;
}
.headerSlider > .headers > div > div > .content > .subtitle {
	width: 100%;
	color: var(--subtitleFontColor); font-size: var(--subtitleFontSize); font-weight: bold; line-height: 1.5em; padding: 0 0 10px 0; overflow: hidden; text-overflow:ellipsis; white-space:nowrap;
	transition: transform 0.7s ease-in, opacity 0.7s ease-in; transform: translate(40px, 0); opacity: 0;
}

.headerSlider > .headers > div > div > .content > .title {
	width: 100%;
	color: var(--titleFontColor); font-size: var(--titleFontSize); font-weight: bold; line-height: 1.5em; padding: 0 0 20px 0;
	transition: transform 0.7s 0.1s ease-in, opacity 0.7s 0.1s ease-in; transform: translate(40px, 0); opacity: 0;
}

.headerSlider > .headers > div > div > .content > .description {
	width: 100%; max-height: 200px; overflow: hidden;
	color: var(--descriptionFontColor); font-size: var(--descriptionFontSize); line-height: 2em; margin: 20px 0 20px 0;
	transition: transform 0.7s 0.2s ease-in, opacity 0.7s 0.2s ease-in; transform: translate(40px, 0); opacity: 0;
}

.headerSlider > .headers > div > div > .content > .button {
	align-self: flex-end; width: 100%;
	display: flex; flex-flow: row wrap; align-content: flex-start; justify-content: flex-start;
	transition: transform 0.7s 0.4s ease-in, opacity 0.7s 0.4s ease-in; transform: translate(40px, 0); opacity: 0;
}

.headerSlider > .headers > div > div > .content > .button > div {
	width: 100px; height: 40px; margin: 0 20px 0 0; background: var(--buttonBgColor); border: var(--buttonBgColor) 3px solid; cursor: pointer;
	color: var(--buttonFontColor); font-size: var(--buttonFontSize); line-height: 1em;
	display: flex; justify-content: center; align-items: center;
	transition: color 0.3s ease-in, background 0.3s ease-in;
}
.headerSlider > .headers > div > div > .content > .button > div:hover {
	background: var(--buttonBgColorActive); color: var(--buttonFontColorActive);
}

.headerSlider > .headers > div > div.active > .image {
	transform: translate(0, 0);
}
.headerSlider > .headers > div > div.active > .content > .subtitle {
	transform: translate(0, 0); opacity: 1;
}
.headerSlider > .headers > div > div.active > .content > .title {
	transform: translate(0, 0); opacity: 1;
}
.headerSlider > .headers > div > div.active > .content > .description {
	transform: translate(0, 0); opacity: 1;
}
.headerSlider > .headers > div > div.active > .content > .button {
	transform: translate(0, 0); opacity: 1;
}


.headerControler {
	position: relative; margin: 40px 20px 0 0; float: right;
	transition: transform 0.7s 0.5s ease-in, opacity 0.7s 0.5s ease-in; transform: translate(0, 40px); opacity: 0;
}
.headerControler.active {
	transform: translate(0, 0); opacity: 1;
}
.headerControler > .selecter > div {
	display: inline-block; margin: 10px 5px; width: var(--selecterSize); height: var(--selecterSize); background: var(--selecterColor); border: var(--selecterColorActive) 2px solid; border-radius: 50%; cursor: pointer;
	transition: background 0.3s ease-in, filter 0.3s ease-in;
}
.headerControler > .selecter > div.active {
	background: var(--selecterColorActive);
}
.headerControler > .selecter > div:hover {
	background: var(--selecterColorActive); filter: blur(2px);
}
.headerControler > .prevnext {
	position: relative; float: right; margin: -20px 80px 0 0;
}
.headerControler > .prevnext > .prev {
	position: absolute; width: 20px; height: 20px; margin: 0 0 0 0; border-top: var(--selecterColor) 3px solid; border-left: var(--selecterColor) 3px solid; transform: translateY(-50%) rotate(315deg); cursor: pointer;
	transition: filter 0.3s ease-in;
}
.headerControler > .prevnext > .next {
	position: absolute; width: 20px; height: 20px; margin: 0 0 0 50px; border-top: var(--selecterColor) 3px solid; border-left: var(--selecterColor) 3px solid; transform: translateY(-50%) rotate(135deg); cursor: pointer;
	transition: filter 0.3s ease-in;
}
.headerControler > .prevnext > .prev:hover {
	filter: blur(2px);
}
.headerControler > .prevnext > .next:hover {
	filter: blur(2px);
}



@media only screen and (max-width: 1280px) {
	.indexHeader > div {
		width: 100%; height: auto;
	}
	.headerControler {
		margin: 0 20px 0 0;
	}
}

@media only screen and (max-width: 600px) {
	.headerSlider {
		margin: 0 20px 40px 20px; box-sizing: border-box;
	}
	.headerSlider > .headers > div > div {
		display: block;
	}
	.headerSlider > .headers > div > div > .image {
		display: block; margin: 0 0 20px 0;
	}
	.headerSlider > .headers > div > div > .content {
		display: block;
	}
	.headerSlider > .headers > div > div > .content > .description {
		height: auto;
	}
}




.headerMiddle {
	width: 100%; margin: 0 0; background-color: var(--headerMiddleBgColor); box-sizing: border-box;
	display: flex; align-items: flex-start; justify-content: center;
	transition: opacity 1s 0s ease-in, transform 1s 0s ease-in; opacity: 1;
}
.headerMiddle.onload {
	opacity: 0;
}
.headerMiddle > div {
	width: 1280px; margin: 0; padding: 0; box-sizing: border-box;
}
.headerMiddle > div > div {
	width: inherit; display: grid; grid-template-columns: 1fr 1fr 1fr 1fr 1fr; box-sizing: border-box;
	transition: opacity 1s 0s ease-in, transform 1s 0s ease-in; opacity: 1;
}
.headerMiddle > div > div > .item {
	width: 100%; height: 200px; border-right: var(--headerMiddleBorder); padding: 20px 30px; box-sizing: border-box; cursor: pointer;
	color: var(--headerMiddleFontColor); font-size: var(--headerMiddleFontSize); text-align: center; line-height: 1.5em; background-color: var(--headerMiddleBgColor);
	display: flex; flex-flow: row wrap; align-content: center; justify-content: center;
	display: -webkit-box; -webkit-box-align: center; -webkit-box-pack: center;
	transition: color 0.2s 0s ease-in, background 0.4s 0s ease-in;
}
.headerMiddle > div > div > .item:hover,
.headerMiddle > div > div > .item.active {
	color: var(--headerMiddleFontColorActive); background-color: var(--headerMiddleBgColorActive);
}
.headerMiddle > div > div > .item:nth-child(1) {
	border-left: var(--headerMiddleBorder);
}
.headerMiddle > div > div > .item > div {
	margin: 0 0 0 0; vertical-align: bottom;
}
.headerMiddle > div > div > .item > div > .title {
	max-height: 100px; overflow: hidden; vertical-align: bottom;
}



@media only screen and (max-width: 1280px) {
	.headerMiddle > div {
		width: 100%;
	}
}
@media only screen and (max-width: 1000px) {
	.headerMiddle > div,
	.headerMiddle > div > div > .item {
		height: 150px;
	}
}
@media only screen and (max-width: 800px) {
	.headerMiddle > div,
	.headerMiddle > div > div > .item {
		height: 100px;
	}
}
@media only screen and (max-width: 600px) {
	.headerMiddle > div {
		height: auto;
	}
	.headerMiddle > div > div {
		grid-template-columns: 1fr 1fr;
	}
	.headerMiddle > div > div > .item:nth-child(1) {
		border-left: none;
	}
}