.intro{
	width: 100%;
	padding: 215px 50px 100px 50px;
	background-image: repeating-linear-gradient(-45deg, rgba(137, 148, 153, 0.4), rgba(137, 148, 153, 0.4) 1px, transparent 1px, transparent 6px);
    background-size: 8px 8px;
}
.intro .container{
	max-width: 1500;
	display: flex;
	justify-content: center;
	margin: 0 auto;
}
.intro .d1{
	width: 1100px;
	background: #f1f1f1;
	padding: 75px 200px;
}
.intro .d2{
	width: 400px;
	background: #d1d1d1;
	overflow: hidden;
}
.intro .d2 img{
	object-fit: cover;
	width: 456px;
	height: 100%;
}
.intro .d1 p{
	padding-top: 30px;
}
.intro .d1 a div{
	margin-top: 50px;
	float: left;
	padding: 20px;
	background: #332c29;
	width: 150px;
	text-align: center;
	color: white;
	transition: .5s;
}
.intro .d1 a div:hover{
	background: #71797E;
	transition: .5s;
}
.intro .d1 .icons{
	margin-top: 60px;
	float: right;
	padding: 10px;
	width: 150px;
	text-align: center;
}
.intro .d1 .icons span{
	margin: 10px;
	padding-top: 20px;
}
.intro .d1 .icons span img{
	width: 30px;
	transition: .5s;
}
.intro .d1 .icons span img:hover{
	opacity: .7;
	transition: .5s;
}

@media (max-width: 1500px){
	.intro .d1{
		padding: 75px 100px;
	}
}
@media (max-width: 1300px){
	.intro .d1{
		padding: 75px 50px;
		width: 800px;
	}
	
}
@media (max-width: 1000px){
	.intro{
		padding: 215px 0px 100px 0px;
	}
	.intro .d1{
		width: 600px;
	}
	.intro .d1 .icons{
		width: 125px;
	}
}