/*@charset "utf-8";*/
/* CSS Document */

*{
	margin: 0;
	padding: 0;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	font-family: Tahoma;
}

.content-all{
	width: 100%;
	display: flex;
	flex-wrap: wrap;
}

.content-img{
	width: 600px;
	height: 400px;
	margin: auto;
	margin-top: 70px;
	position: relative;
	overflow: hidden;
}

.content-img img{
	width: 100%;
	transition: all 400ms;
}

.content-1{
	width: 1000px;
	height: 1000px;
	position: absolute;
	top: 0;
	background: rgba(0,100,255,0.4);
	-webkit-transform: rotate(-30deg);
	transform: rotate(-30deg);
	margin-left: -750px;
	transition: all 300ms;
}

.content-2{
	width: 1000px;
	height: 1000px;
	position: absolute;
	top: 0;
	background: rgba(0,100,255,0.4);
	-webkit-transform: rotate(-30deg);
	transform: rotate(-30deg);
	margin-left: -800px;
	transition: all 500ms;
}

.content-3{
	width: 1000px;
	height: 1000px;
	position: absolute;
	top: 0;
	background: rgba(0,100,255,0.4);
	-webkit-transform: rotate(30deg);
	transform: rotate(30deg);
	margin-left: -800px;
	margin-top: -500px;
	transition: all 900ms;
	box-shadow: 0px 2px 20px -5px black;
}

.content-4{
	width: 1000px;
	height: 1000px;
	position: absolute;
	top: 0;
	background: rgba(0,100,255,0.4);
	-webkit-transform: rotate(30deg);
	transform: rotate(30deg);
	margin-left: -850px;
	margin-top: -500px;
	transition: all 700ms;
}

.content-img:hover .content-1{
	width: 222%;
	transition: all 900ms;
}

.content-img:hover .content-2{
	width: 222%;
	transition: all 300ms;
}

.content-img:hover .content-3{
	width: 222%;
	transition: all 500ms;
}

.content-img:hover .content-4{
	width: 222%;
	transition: all 700ms;
}

.content-img:hover img{
	transform: scale(1.5);
	transition: all 400ms;
	opacity: 0.8;
}

.content-txt{
	position: absolute;
	top: 0;
	width: 500px;
	padding: 10px;
	z-index: 10;
	color: white;
	text-align: center;
	margin-top: 100px;
}

.content-txt h2{
	font-size: 25px;
	opacity: 0;
	transform: scale(0.2);
	transition: all 300ms;
}

.content-txt h3{
	font-size: 20px;
	opacity: 0;
	transform: scale(0.2);
	transition: all 500ms;
}
.content-txt h4{
	font-size: 14px;
	opacity: 0;
	transform: scale(0.2);
	transition: all 500ms;
}

.content-txt p{
	font-size: 18px;
	margin-top: 10;
	opacity: 0;
	transform: scale(1.5);
	transition: all 400ms;
	
}

.content-img:hover h2{
	opacity: 1;
	transition: all 300ms;
	transform: scale(1);
}

.content-img:hover h3{
	opacity: 1;
	transition: all 300ms;
	transform: scale(1);
}

.content-img:hover h4{
	opacity: 1;
	transition: all 300ms;
	transform: scale(1);
}

.content-img:hover p{
	opacity: 1;
	transform: scale(1);
	transition: all 500ms;
}