@charset "utf-8";
/* CSS Document */
.main{
			width: 100%;
			height: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
		}
		.item{
			position: relative;
			width: 320px;
			height: 320px;
			margin: 30px;
			margin-bottom: 80px;
			background: url("images/圆天.jpg")no-repeat;
			background-size: 345px;
			border-radius: 50%;
			box-shadow: inset 0 0 0 16px rgba(255,255,255,0.6),0 1px 2px rgba(0,0,0,0.1);
			transition: all 0.4s ease-in-out;
		}
		.item:nth-child(2){
			background: url("images/圆地.jpg")no-repeat;
			background-size: 320px;
		}
		.item:nth-child(3){
			background: url("images/圆人.jpg")no-repeat;
			background-size: 320px;
		}
		.info{
			opacity: 0;
			transform: scale(0);
			position: absolute;
			width: 320px;
			height: 320px;
			background: rgba(246,188,84,0.8);
			border-radius: 50%;
			transition: all 0.4s ease-in-out;
		}
		.info h3{
			height: 90px;
			font-size: 30px;
			color: #FFFFFF;
			margin: 0 30px;
			padding-top: 95px;
			text-transform: uppercase;
		}
		.info p{
			opacity: 0;
			font-size: 16px;
			text-align: center;
			color: #FFFFFF;
			font-style: italic;
			margin: 0 30px;
			padding-top: 70px;
			border-top: 1px solid rgba(255,255,255,0.5);
			transition: all 0.4s ease-in-out 0.4s;
		}
		.info a{
			display: block;
			color: #FFFFFF;
			font-size: normal;
		}
		.item:hover{
			box-shadow: inset 0 0 0 1px rgba(255,255,255,0.1),0 1px 2px rgba(0,0,0,0.1);
			
		}
		.item:hover .info{
			opacity: 1;
			transform: scale(1);
		}
		.item:hover .info p{
			opacity: 1;
			transform: scale(1);
		}