.social-icon {
	-webkit-transition: all 300ms cubic-bezier(0.42, 0, 0.58, 1);
	-o-transition: all 300ms cubic-bezier(0.42, 0, 0.58, 1);
	transition: all 300ms cubic-bezier(0.42, 0, 0.58, 1);
}

.about ul {
	display: grid;
	grid-template-columns: 35% 1fr;
	gap: 70px;
}

.about__img {
	display: block;
	width: 100%;
	height: auto;
	position: relative;
	overflow: hidden;
}

.about__img img {
	display: block;
	width: 100%;
	height: 100%;
	-o-object-fit: cover;
	   object-fit: cover;
}

.about__info {
	width: 100%;
	display: block;
	position: relative;
	padding: 80px 0;
	background: url(../jpg/pic_11.jpg) 50% bottom fixed;
}

.about__info::after {
	content: 'Reliable Service';
	position: absolute;
	left: calc(50% + 50px);
	top: 30%;
	color: #fff;
	font-size: 90px;
	font-family: "Lugrasimo";
	text-shadow: 0.1em 0.1em 0.2em black;
}

.about__tip {
	display: block;
	margin: auto auto 20px;
	position: relative;
	width: 370px;
}

.about__tip::before, .about__tip::after {
	content: '';
	position: absolute;
	top: 14px;
	width: 40px;
	height: 1px;
	background: #000;
}

.about__tip::before {
	left: 0;
}

.about__tip::after {
	right: 0;
}

.about__word {
	width: 75%;
	margin: auto;
	text-align: center;
}

.about__txt {
	width: 50%;
	padding: 60px;
	display: block;
	background: #fff;
}

.about__video {
	width: 100%;
	height: auto;
}

.about__photo {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 50px;
}

.about__photo li {
	position: relative;
	border-radius: 8px;
	overflow: hidden;
}

.about__photo li:hover .about__icon {
	-webkit-transform: translateY(-140%);
	    -ms-transform: translateY(-140%);
	        transform: translateY(-140%);
	opacity: 1;
}

.about__photo li:hover img {
	-webkit-filter: blur(5px);
	        filter: blur(5px);
	-webkit-transform: scale(1.3);
	    -ms-transform: scale(1.3);
	        transform: scale(1.3);
}

.about__photo img {
	border-radius: 8px;
	width: 100%;
	height: auto;
	-webkit-transition: 0.4s ease-in-out;
	-o-transition: 0.4s ease-in-out;
	transition: 0.4s ease-in-out;
}

.about__photo a {
	position: absolute;
	width: 100%;
	height: 100%;
	z-index: 2;
}

.about__icon {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
	width: 100px;
	height: 100px;
	padding: 10px;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	-webkit-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;
	-ms-flex-wrap: wrap;
	    flex-wrap: wrap;
	text-align: center;
	border-radius: 99rem;
	background: white;
	color: #333;
	opacity: 0;
	pointer-events: none;
	-webkit-transform: translateY(100%);
	    -ms-transform: translateY(100%);
	        transform: translateY(100%);
	-webkit-transition: 0.3s cubic-bezier(0.32, 0.34, 0, 1.62) 0.1s;
	-o-transition: 0.3s cubic-bezier(0.32, 0.34, 0, 1.62) 0.1s;
	transition: 0.3s cubic-bezier(0.32, 0.34, 0, 1.62) 0.1s;
	z-index: 7;
	-webkit-box-shadow: rgba(99, 99, 99, 0.4) 0px 2px 8px 0px;
	        box-shadow: rgba(99, 99, 99, 0.4) 0px 2px 8px 0px;
}

.about__icon i {
	width: 100%;
	font-size: 38px;
	font-weight: bold;
}

.about__icon i::before {
	background: -webkit-gradient(linear, left top, left bottom, from(#ebc800), color-stop(39%, #de1333), color-stop(64%, #cb2685), to(#4b46c4));
	background: -o-linear-gradient(top, #ebc800 0%, #de1333 39%, #cb2685 64%, #4b46c4 100%);
	background: linear-gradient(to bottom, #ebc800 0%, #de1333 39%, #cb2685 64%, #4b46c4 100%);
	background-clip: text !important;
	-webkit-background-clip: text;
	color: transparent;
}

@media only screen and (max-width: 768px) {
	.about ul {
		grid-template-columns: 100%;
		gap: 0;
	}
	.about__img {
		padding-bottom: 80%;
		background: url("../jpg/pic_15.jpg");
		background-position: 50% 50%;
		background-repeat: no-repeat;
		background-size: cover;
		margin-bottom: 40px;
	}
	.about__img img {
		display: none;
	}
	.about__info::after {
		display: block;
		position: inherit;
		left: inherit;
		top: inherit;
		font-size: 60px;
		text-align: center;
		margin-top: 30px;
	}
	.about__txt {
		margin: auto;
		width: 90%;
		padding: 20px;
	}
	.about__photo {
		gap: 20px;
	}
	.about__photo li:hover .about__icon {
		width: 70px;
		height: 70px;
		-webkit-transform: translateY(-100%);
		    -ms-transform: translateY(-100%);
		        transform: translateY(-100%);
	}
	.about__word {
		width: 100%;
		text-align: left;
	}
	.about__icon {
		width: 70px;
		height: 70px;
	}
}

@media only screen and (max-width: 480px) {
	.about__tip {
		width: 100%;
	}
	.about__tip::before, .about__tip::after {
		display: none;
	}
}

.social-icon {
	width: 350px;
	display: grid;
	margin: auto;
	grid-template-columns: repeat(4, 1fr);
	gap: 40px;
	margin-top: 50px;
}

.social-icon a:hover {
	-webkit-transform: scale(1.4);
	    -ms-transform: scale(1.4);
	        transform: scale(1.4);
}

.same-icon {
	position: absolute;
	right: 20px;
	top: 0;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
}

@media only screen and (max-width: 640px) {
	.social-icon {
		gap: 20px;
	}
}