:root {
	--mach-history-title-size: 50px;
	--mach-history-text-size: 16px;
	--mach-history-h3-size: 26px;
}

.mach-factory-development {
	font-size: var(--mach-history-title-size);
	position: relative;
	padding: 60px 0;
}

.mach-factory-development > img, .mach-factory-bg__mask {
	position: absolute;
	z-index: -2;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	object-fit: cover;
	z-index: -2;
}

.mach-factory-bg__mask {
	z-index: -1;
	background-color: #000;
	opacity: 0.75;
}

.mach-factory-development .title h2 {
	text-align: center;
	color: #fff;
	text-align: center;
	font-family: var(--title-font-family);
	font-size: 36px;
	font-style: normal;
	font-weight: 400;
	line-height: 1.87;
}

.mach-factory-development .title p {
	color: #FFF;
	text-align: center;
	font-family: var(--font-family);
	font-size: var(--mach-history-text-size);
	font-style: normal;
	font-weight: 400;
	line-height: 1.87;
}

.mach-factory-development .parBd {
	background-color: #FFF;
}

.mach-factory-development .slideBox {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 1em 1.3em;
	background: #fff;
	overflow: hidden;
}

.mach-factory-development .factory-pic {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	width: 100%;
	height: 100%;
}

.mach-factory-development .factory-pic img {
	width: 100%;
	-webkit-transition: .5s all;
	-moz-transition: .5s all;
	-ms-transition: .5s all;
	transition: .5s all;
	height: 7.2em;
	object-fit: cover;
}

/* .mach-factory-development .factory-pic img:hover {
	-webkit-transform: scale(1.02);
	-moz-transform: scale(1.02);
	-ms-transform: scale(1.02);
	transform: scale(1.02);
} */

.mach-factory-development .factory-txt {
	width: 100%;
}

.mach-factory-development .factory-txt h3 {
	font-family: var(--font-family);
	padding: 0 10px 25px 10px;
	font-size: var(--mach-history-h3-size);
	font-style: normal;
	font-weight: 600;
	line-height: normal;
	color: #666;
	padding: calc(var(--mach-history-title-size) * 0.8) 0 calc(var(--mach-history-title-size) * 0.4) 0;
}

.mach-factory-development .factory-txt p {
	color: var(--text-color);
	font-family: var(--font-family);
	font-size: var(--mach-history-text-size);
	font-style: normal;
	font-weight: 400;
	line-height: 1.5;
}

.mach-factory-development .event_box {
	width: 100%;
	margin-top: 0.8em;
	overflow: hidden;
}

.mach-factory-development .event_box .parHdpd,
.mach-factory-development .event_box .parHd {
	font-size: var(--mach-history-text-size);
}

.mach-factory-development .parHdpd {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 132px;
	padding: 0 calc(var(--mach-history-title-size) * 0.8);
	background: var(--color-primary);
}

.mach-factory-development .parHdpd .arrow-btn {
	flex-shrink: 0;
	width: 44px;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: color-mix(in srgb, var(--bg-color) 24%, transparent);
	color: var(--bg-color);
	cursor: pointer;
}
.mach-factory-development .parHdpd .arrow-btn:hover {
	color: var(--color-primary);
	background-color: color-mix(in srgb, var(--bg-color) 100%, transparent);
}

.mach-factory-development .parHd {
	position: relative;
	z-index: 2;
	flex: 1;
	padding: 0 60px;
	overflow: hidden;
}

.mach-factory-development .parHd .slick-list::after {
	content: '';
	width: 100%;
	height: 1px;
	background: color-mix(in srgb, var(--bg-color) 60%, transparent 40%);
	position: absolute;
	right: 0;
	top: 26px;
}

.mach-factory-development .parHd .slick-track {
	z-index: 2;
}

.mach-factory-development .parHd .slick-slide {
	position: relative;	
	padding-top: 0;
	font-size: 22px;
	text-align: center;
	color: color-mix(in srgb, var(--bg-color) 60%, transparent 40%);
	cursor: pointer;
	-webkit-transition: .3s all;
	-moz-transition: .3s all;
	-ms-transition: .3s all;
	transition: .3s all;
}

.mach-factory-development .parHd .slick-slide::after {
	content: '';
	background-color: var(--bg-color);
	border: 4px silid var(--color-primary);
	border-radius: 7px;
	width: 13px;
	height: 13px;
	position: absolute;
	top: 20px;
	left: 50%;
	transform: translateX(-50%);
	opacity: 0.5;
}

.mach-factory-development .parHd .slick-slide::before {
	content: '';
	background-color: #fff;
	border-radius: 2.5px;
	width: 5px;
	height: 5px;
	position: absolute;
	top: 24px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 2;
}

.mach-factory-development .parHd .slick-slide.slick-current::after {
	opacity: 1;
}

.mach-factory-development .parHd .slick-slide.slick-current::before {
	display: none;
}

.mach-factory-development .parHd .slick-slide.slick-current::after {
	background-color: var(--color-primary);
	border: 4px solid var(--bg-color);
}

.mach-factory-development .parHd .slick-slide.slick-current span {
	display: block;
	width: 13px;
	height: 13px;
	overflow: hidden;
	position: absolute;
	top: 12px;
	left: 50%;
	margin-left: -5px;
	z-index: 21;
}

.mach-factory-development .parHd .slick-slide span {
	display: none;
}

.mach-factory-development .parHd .slick-slide b {
	display: block;
	font-size: calc(var(--mach-history-text-size) + 2px);
	font-weight: 500;
	margin-top: 50px;
}

.mach-factory-development .parHd .slick-slide.slick-current {
	color: #fff;
}

@media screen and (min-width: 992px) {
	.mach-factory-development .factory-txt {
		padding-left: 1em;
	}
}


@media screen and (max-width: 1500px) {
	:root {
	  --mach-history-title-size: 44px;
	  --mach-history-text-size: 16px;
	  --mach-history-h3-size: 26px;
	}
  }
  
  @media screen and (max-width: 1280px) {
	:root {
		--mach-history-title-size: 38px;
		--mach-history-text-size: 16px;
		--mach-history-h3-size: 26px;
	}
  }
  
  @media screen and (max-width: 1200px) {
	:root {
		--mach-history-title-size: 38px;
		--mach-history-text-size: 16px;
		--mach-history-h3-size: 26px;
	}
  }
  
  @media screen and (max-width: 992px) {
	:root {
		--mach-history-title-size: 32px;
		--mach-history-text-size: 14px;
		--mach-history-h3-size: 24px;
	}
  }
  
  @media screen and (max-width: 768px) {
	:root {
		--mach-history-title-size: 26px;
		--mach-history-text-size: 14px;
		--mach-history-h3-size: 22px;
	}
  }
  
  @media screen and (max-width: 576px) {
	:root {
		--mach-history-title-size: 20px;
		--mach-history-text-size: 14px;
		--mach-history-h3-size: 20px;
	}
  }


@media screen and (max-width: 1281px) {
  .mach-factory-development .title h2{font-size: 34px;}
}
@media screen and (max-width: 1171px) {
  .mach-factory-development .title h2{font-size: 30px;}
}
@media screen and (max-width: 992px) {
  .mach-factory-development .title h2{font-size: 26px;}
  .mach-factory-development {padding: 30px 0;}
}
@media screen and (max-width: 768px) {
  .mach-factory-development .title h2{font-size: 24px;}
}
@media screen and (max-width: 480px) {
  .mach-factory-development .title h2{font-size: 22px;}
}