@charset "UTF-8";
*, ::before, ::after {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
.m-wrap {
	display: none;
    line-height: normal;
}
.swiper-button-prev.m-common-prev,
.swiper-button-next.m-common-next {
	background-image: none;
	width: 36px;
	height: 36px;
	background-color: rgba(255, 255, 255, .7);
	box-shadow: 0 0 5px rgba(0, 0, 0, .2);
	font-size: 24px;
    line-height: normal;
	text-align: center;
}
.swiper-button-prev.m-common-prev span::before,
.swiper-button-next.m-common-next span::before {
	color: #333;
}
.swiper-button-prev.m-common-prev{
	left: 0;
}
.swiper-button-next.m-common-next {
	right: 0;
}
@media only screen and (max-width: 1024px) {
	.m-wrap {
		display: block;
	}
}
@media only screen and (min-width: 1025px) {
	.swiper-button-prev.common-prev.swiper-button-disabled,
	.swiper-button-next.common-next.swiper-button-disabled {
		display: none;
	}
	.swiper-button-prev.common-prev,
	.swiper-button-next.common-next {
		display: block;
		background-color: transparent;
		box-shadow: none;
		width: 36px;
		height: 36px;
		background-size: cover;
		opacity: 0;
	}
	.swiper-button-prev.common-prev {
		left: 0;
		background-image: url('http://surfmill.ru/images/common/left-arrow.svg');
	}
	.swiper-button-next.common-next {
		right: 0;
		background-image: url('http://surfmill.ru/images/common/right-arrow.svg');
	}
}
@media only screen and (min-width: 1400px) {
	.swiper-button-prev.common-prev,
	.swiper-button-next.common-next {
		width: 46px;
		height: 46px;
	}
}
/*top*/
.top-area{
	width: 100%;
	padding-bottom: calc(900 / 1920 * 100%);
	background: url(../images/process-control/top.png);
	background-size: 100%;
	background-position: bottom;
	background-repeat: no-repeat;
	position: relative;
}
.top-container{
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	width: 62%;
	margin: 0 auto;
}
.top-title{
	font-family: "Noto Sans";
    font-weight: 700;
	font-size: 72px;
    line-height: 100%;
   letter-spacing: -2px;
	color: #004898;
	text-align: center;
}
.sub-title{
	font-family: "Noto Sans";
    font-weight: 700;
	font-size: 28px;
    line-height: normal;
	color: #000000;
	text-align: center;
}
.top-desc{
	font-size: 18px;
    line-height: normal;
	color: #333333;
    text-align: center;
}
.banner-bottom {
    gap: 20px;
	width: 75%;
	position: absolute;
	bottom: -80px;
	left: 50%;
	transform: translateX(-50%);
	-o-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
	-moz-transform: translateX(-50%);
	-webkit-transform: translateX(-50%);
	display: flex;
	display: -ms-flexbox;
	display: -webkit-flex;
	align-items: center;
	-webkit-align-items: center;
	background-color: #FFF;
	box-shadow: 0 2px 6px rgba(0, 0, 0, .25);
	padding-left: 7%;
	padding-right: 7%;
}
.banner-bottom-img {
	width: 22%;
	padding-bottom: 22%;
	background-image: url('../images/process-control/banner-machine.png');
	background-repeat: no-repeat;
	background-size: cover;
}
.banner-bottom-info {
	flex: 3;
	-ms-flex: 3;
	-webkit-flex: 3;
	display: flex;
    gap: 20px;
	display: -ms-flexbox;
	display: -webkit-flex;
}
.banner-bottom-info .banner-bottom-item {
	flex: 1;
	-ms-flex: 1;
	-webkit-flex: 1;
	position: relative;
}
.banner-bottom-info .banner-bottom-item::after {
	content: '';
	display: block;
	position: absolute;
	right: -10px;
	top: 50%;
	transform: translateY(-50%);
	-o-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	-moz-transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
	width: 1px;
	height: 80%;
	background-color: #004898;
}
.banner-bottom-info .banner-bottom-item:last-child::after {
	display: none;
}
.banner-bottom-info .bb-item-title {
	color: #000;
}
.banner-bottom-info .bb-item-desc {
	font-size: 18px;
    line-height: normal;
	color: #000;
}
@media only screen and (max-width: 1599px) {
	.top-container{
		width: 68%;
	}
	.top-title{
		font-size: 60px;
	}
	.sub-title{
		font-size: 24px;
	}
	.top-desc{
		font-size: 16px;
	}
}
@media only screen and (max-width: 1350px) {
}
@media only screen and (max-width: 1299px) {
	.top-container{
		width: 72%;
	}
	.top-title{
		font-size: 50px;
	}
	.sub-title{
		font-size: 22px;
	}
	.top-desc{
		font-size: 16px;
	}
}
@media only screen and (max-width: 1024px) {
	.top-area{
		padding-top: 150px;
		margin-bottom: 80px;
	}
	.top-container{
		width: 92.4%;
	}
	.top-title{
		font-size: 28px;
	}
	.sub-title{
		font-size: 20px;
	}
	.top-desc{
		font-size: 16px;
        line-height: normal;
	}
	.banner-bottom {
		display: block;
		width: calc(100% - 30px);
		left: 15px;
		right: 15px;
		transform: translateX(0);
		-o-transform: translateX(0);
		-ms-transform: translateX(0);
		-moz-transform: translateX(0);
		-webkit-transform: translateX(0);
		padding-left: 15px;
		padding-right: 15px;
	}
	.banner-bottom-img {
		margin: 0 auto;
		width: 120px;
		height: 120px;
		padding-bottom: 0;
		margin-bottom: 16px;
		background-image: url(../images/process-control/banner-machine-m.png);
	}
	.banner-bottom-info .bb-item-title {
		font-size: 18px;
	}
	.banner-bottom-info .bb-item-desc {
		font-size: 14px;
	}
	.banner-bottom-info .banner-bottom-item::after {
		height: 100%;
	}
}
@media only screen and (max-width: 680px) {
	.top-area{
		padding-top: 210px;
	}
}
@media only screen and (max-width: 600px) {
	.top-area{
		padding-top: 250px;
	}
}
@media only screen and (max-width: 500px) {
	.top-area{
		padding-bottom: calc(858 / 750 * 100%);
		background: url(../images/process-control/top-m.png);
		background-size: 100%;
		background-position: bottom;
		background-repeat: no-repeat;
		margin-top: 0;
		padding-top: 0;
	}
}
@media only screen and (max-width: 450px) {
	.top-title{
		font-size: 24px;
	}
	.sub-title{
		font-size: 18px;
	}
	.top-desc{
		font-size: 14px;
	}
	.banner-bottom-info .bb-item-title {
		font-size: 14px;
	}
	.banner-bottom-info .bb-item-desc {
		font-size: 12px;
	}
	.banner-bottom-img {
		width: 80px;
		height: 80px;
	}
}
@media only screen and (max-width: 380px) {
}
@media only screen and (max-width: 330px) {
	.top-container{
		padding-top: 20px;
	}
	.sub-title {
    	font-size: 17px;
	}
	.top-area{
		padding-top: 100px;
	}
}

/*part2*/
.subtitle{
	font-family: "Noto Sans";
    font-weight: 700;
	font-size: 50px;
    line-height: normal;
	color: #000000;
	text-align: center;
}
.third-title{
	font-family: "Noto Sans";
    font-weight: 700;
	font-size: 28px;
    line-height: normal;
	color: #004898;
	text-align: center;
}
.fourth-title{
	font-family: "Noto Sans";
    font-weight: 700;
	font-size: 28px;
    line-height: normal;
	color: #000;
	text-align: center;
}
.part-desc{
	font-size: 18px;
    line-height: normal;
	color: #000000;
	text-align: center;
	margin-left: 20.8%;
	margin-right: 20.8%;
}
.part-img{
	display: flex;
	display: -webkit-flex;
}
.part-img-item1 figure,
.part-img-item2 figure {
	width: 100%;
	padding-bottom: calc(400 / 872 * 100%);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}
.part-img-item1:nth-child(1) figure{
	background-image: url(../images/process-control/item1-1.png);
}
.part-img-item1:nth-child(2) figure{
	background-image: url(../images/process-control/item1-2.png);
}
.part-img-item2:nth-child(1) figure{
	background-image: url(../images/process-control/item2-1.png);
}
.part-img-item2:nth-child(2) figure{
	background-image: url(../images/process-control/item2-2.png);
}
.part-img-item{
	width: calc((100% - 16px) / 2);
	margin-right: 16px;
}
.part-img-item:last-child{
	margin-right: 0;
}
.part-img-item3:first-child figure{
	background: url(../images/dt/part401.png);
	background-size: 100%;
	background-position: center;
	background-repeat: no-repeat;
}
.part-img-item3:nth-child(2) figure{
	background: url(../images/dt/part402.png);
	background-size: 100%;
	background-position: center;
	background-repeat: no-repeat;
}
/*轮播*/
.part2-swiper {
  	width: 100%;
}
.part2-swiper-m {
	display: none;
}
.part2-swiper:hover .series-prev {
	left: 30px;
	opacity: 0.75;
	-moz-opacity: 0.75;
	-webkit-opacity: 0.75;
}
.part2-swiper:hover .series-next {
	right: 30px;
	opacity: 0.75;
	-moz-opacity: 0.75;
	-webkit-opacity: 0.75;
}
.part2-swiper:hover .series-prev:hover,
.part2-swiper:hover .series-next:hover {
	opacity: 0.9;
}
.part2-swiper .swiper-wrapper {
	padding-top: 6px;
	padding-bottom: 6px;
}
.part2-swiper .swiper-slide img {
	display: block;
	width: 100%;
}
.part2-swiper-pc .swiper-wrapper {
	width: 70%;
	cursor: default;
	left: -390px;
}
.part2-swiper-pc .swiper-slide {
	overflow: hidden;
  	font-size: 18px;
  	background: #fff;
  	transition: 300ms;
  	transform: scale(0.8);
  	-o-transform: scale(0.8);
  	-ms-transform: scale(0.8);
  	-moz-transform: scale(0.8);
  	-webkit-transform: scale(0.8);
  	/*transition: all 4s;*/
  	box-shadow: 0 0 6px rgba(0, 0, 0, .25);
  	/*cursor: pointer;*/
}
.part2-swiper-pc .swiper-slide figure {
	transition: all .4s;
	-o-transition: all .4s;
	-ms-transition: all .4s;
	-moz-transition: all .4s;
	-webkit-transition: all .4s;
}
.part2-swiper-pc .swiper-slide:hover figure {
	transform: scale(1.1);
	-o-transform: scale(1.1);
	-ms-transform: scale(1.1);
	-moz-transform: scale(1.1);
	-webkit-transform: scale(1.1);
}
.part2-swiper-pc .swiper-slide .part2-slide-title {
	position: absolute;
	bottom: 0;
	left: 16px;
	right: 16px;
	text-align: center;
	color: #004898;
}
.part2-swiper-pc .swiper-slide-active,.swiper-slide-duplicate-active,
.part2-swiper-pc .swiper-slide-active + .swiper-slide {
  	transform: scale(1);
  	-o-transform: scale(1);
  	-ms-transform: scale(1);
  	-moz-transform: scale(1);
  	-webkit-transform: scale(1);
}
.part2-swiper-pc .swiper-slide-prev {
	right: -70px;
	/*pointer-events:none;*/
}
.part2-swiper-pc .swiper-slide-next + .swiper-slide {
	left: -70px;
}
.part2-swiper-pc .swiper-slide-next + .swiper-slide .series-more:hover span.icon--6 {
	animation: none;
	-o-animation: none;
	-ms-animation: none;
	-moz-animation: none;
	-webkit-animation: none;
}
.part2-pc-pagination {
    left: 50%;
    transform: translateX(-50%);
    -o-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    margin-top: 30px;
}
.part2-pc-pagination .swiper-pagination-bullet{
	width: 12px;
	height: 12px;
	background: #c9caca;
	margin: 0 7px;
	border-radius: 100%;
	opacity: 1;
	-moz-opacity: 1;
	filter: alpha(opacity=1);
}
.part2-m-pagination .swiper-pagination-bullet{
	width: 7px;
	height: 7px;
	background: #c9caca;
	margin: 0 4px;
	border-radius: 100%;
	opacity: 1;
	-moz-opacity: 1;
	filter: alpha(opacity=1);
}
/*.part2-pc-pagination .swiper-pagination-bullet:last-child {
	display: none;
}*/
.part2-m-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active,
.part2-pc-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active{
	background: #004898;
}
.part2-swiper .common-prev,
.part2-swiper .common-next {
	transition: all .4s;
	-o-transition: all .4s;
	-ms-transition: all .4s;
	-moz-transition: all .4s;
	-webkit-transition: all .4s;
}
.part2-swiper:hover .common-prev,
.part2-swiper:hover .common-next {
	opacity: 0.7;
}
.part2-swiper .common-prev:hover,
.part2-swiper .common-next:hover {
	opacity: 0.9;
}
.part2-swiper:hover .common-prev {
	left: 20px;
}
.part2-swiper:hover .common-next {
	right: 20px;
}
/*.part2-pc-pagination .swiper-pagination-bullet:last-child {
	display: none;
}*/
/*轮播移动端*/
.part2-swiper-m {
	padding-left: 25%;
	padding-right: 25%;
}
.part2-swiper-m .fourth-title {
	display: none;
}
.part2-swiper-m .swiper-slide {
	box-shadow: 0 0 4px rgba(0, 0, 0, .25);
}
.part2-m-pagination {
	display: none;
}
@media only screen and (max-width: 1919px) {
	.part2-swiper-pc .swiper-wrapper {
		left: -380px;
	}
}
@media only screen and (max-width: 1799px) {
	.part2-swiper-pc .swiper-wrapper {
		left: -330px;
	}
}
@media only screen and (max-width: 1599px) {
	.part2-swiper-pc .swiper-wrapper {
		left: -290px;
	}
	.part2-swiper-pc .swiper-slide-prev {
		right: -60px;
	}
	.part2-swiper-pc .swiper-slide-next + .swiper-slide {
		left: -60px;
	}
	.subtitle{
		font-size: 40px;
	}
	
	.fourth-title{
		font-size: 24px;
	}
	.part-desc{
		font-size: 16px;
		margin-left: 16%;
		margin-right: 16%;
	}
	.part2-pc-pagination {
		margin-top: 24px;
	}
}
@media only screen and (max-width: 1399px) {
	.part2-swiper-pc .swiper-wrapper {
		left: -270px;
	}
	.part2-swiper-pc .swiper-slide-prev {
		right: -50px;
	}
	.part2-swiper-pc .swiper-slide-next + .swiper-slide {
		left: -50px;
	}
}
@media only screen and (max-width: 1299px) {
	.subtitle{
		font-size: 36px;
	}
	
	.fourth-title{
		font-size: 22px;
	}
	.part-desc{
		font-size: 16px;
		margin-left: 14%;
		margin-right: 14%;
	}
	.part2-swiper-pc .swiper-wrapper {
		left: -240px;
	}
	.part2-swiper-pc .swiper-slide-prev {
		right: -45px;
	}
	.part2-swiper-pc .swiper-slide-next + .swiper-slide {
		left: -45px;
	}
	.part2-swiper:hover .common-prev {
		left: 40px;
	}
	.part2-swiper:hover .common-next {
		right: 40px;
	}
}
@media only screen and (max-width: 1099px) {
	.part2-swiper-pc .swiper-wrapper {
		left: -220px;
	}
	.part2-swiper-pc .swiper-slide-prev {
		right: -40px;
	}
	.part2-swiper-pc .swiper-slide-next + .swiper-slide {
		left: -40px;
	}
}
@media only screen and (max-width: 1024px) {
	.subtitle{
		font-size: 28px;
        line-height: normal;
	}
	.third-title{
		font-size: 22px;
	}
	.fourth-title {
		font-size: 20px;
	}
	.part-desc{
		font-size: 16px;
        line-height: normal;
		color: #333333;
		text-align: left;
		margin-left: 0;
		margin-right: 0;
	}
	.part-img{
		display: block;
	}
	.part-img-item{
		width: 100%;
		margin-right: 0;
	}
	.part2-swiper-pc {
		display: none;
	}
	.part2-swiper-m {
		display: block;
	}
	.swiper-pagination {
	    position: absolute;
	    left: 50% !important;
	    transform: translateX(-50%);
	    -o-transform: translateX(-50%);
	    -ms-transform: translateX(-50%);
	    -webkit-transform: translateX(-50%);
	}
	.swiper-container1 > .swiper-pagination-bullets{
		bottom: 20px;
	}
	.swiper-pagination1 .swiper-pagination-bullet {
	    width: 10px;
	    height: 10px;
		margin: 0 4px;
	    background-color: #C9CACA;
	    opacity: 1;
	    -moz-opacity: 1;
	    -webkit-opacity: 1;
	    filter: alpha(opacity=100);
	}
	.swiper-pagination1 .swiper-pagination-bullet.swiper-pagination-bullet-active {
	    background-color: #004898;
	}
	.part2-m-pagination {
		display: block;
	}
	.part2-pc-pagination {
		display: none;
	}
}
@media only screen and (max-width: 450px) {
	.subtitle{
		font-size: 24px;
	}
	.third-title{
		font-size: 20px;
	}
	.fourth-title {
		font-size: 18px;
	}
	.part-desc{
		font-size: 14px;
	}
	.swiper-container1 > .swiper-pagination-bullets{
		bottom: 16px;
	}
	.swiper-pagination1 .swiper-pagination-bullet {
	    width: 7px;
	    height: 7px;
	}
}
@media only screen and (max-width: 350px) {
	.dt-part4 .subtitle {
	}
}

/*part3*/
.dt-part3{
	background-color: #F6F6F6;
}
.part3-img{
	width: 100%;
	padding-bottom: calc(500 / 1760 * 100%);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}
.part3-img1{
	background-image: url(../images/process-control/p3-1.png);
}
.part3-img2{
	background-image: url(../images/process-control/p3-2.png);
}
.part3-img3{
	background-image: url(../images/process-control/p3-3.png);
}
.part3-img4{
	background-image: url(../images/process-control/p3-4.png);
}
@media only screen and (max-width: 1024px) {
	.dt-part3{
		padding-left: 3.8%;
		padding-right: 3.8%;
	}
	.part3-img {
		padding-bottom: calc(380 / 690 * 100%);
	}
	.part3-img1 {
		background-image: url(../images/process-control/p3-1-m.png)
	}
	.part3-img2 {
		background-image: url(../images/process-control/p3-2-m.png)
	}
	.part3-img3 {
		background-image: url(../images/process-control/p3-3-m.png)
	}
	.part3-img4 {
		background-image: url(../images/process-control/p3-4-m.png)
	}
	.dt-part3 .third-title,
	.dt-part3 .fourth-title {
        line-height: normal;
	}
}

/*part4*/
.part4-img{
	width: 100%;
	padding-bottom: calc(500 / 1760 * 100%);
	background-image: url(../images/process-control/p4-1.png);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}
@media only screen and (max-width: 1024px) {
	.part4-img {
		padding-bottom: calc(380 / 690 * 100%);
		background-image: url(../images/process-control/p4-1-m.png)
	}
}