@charset "utf-8";
/* CSS Document */
@keyframes Moving-1{
		0% {top:0; left:0;}
		50% {top:0; left:0;}
		100%{top:100px; left:100px;}
	}
	@keyframes Moving-2{
		0% {top:0; left:0;}
		50% {top:0; left:0;}
		100%{top:100px;}
	}
	@keyframes Moving-3{
		0% {top:0; right:0;}
		50% {top:0; right:0;}
		100%{top:100px; right:100px;}
	}
	@keyframes Moving-4{
		0% {top:0; left:0;}
		50% {top:0; left:0;}
		100%{top:-100px; left:100px;}
	}
	@keyframes Moving-5{
		0% {top:0; left:0;}
		50% {top:0; left:0;}
		100%{top:-100px;}
	}
	@keyframes Moving-6{
		0% {top:0; right:0;}
		50% {top:0; right:0;}
		100%{top:-100px; right:100px;}
	}
	@keyframes ScaleActive{
		0% {transform:scale(1,1)};
		100% {transform:scale(1.2,1.2)};
	}
	.ContainBG{
		width:300px;
		height:420px;
		margin-left:11px;
		margin-top:11px;
		float:left;		
	}
	#ContainAll-1{
		width:300px;
		height:420px;
		background: rgba(0,0,0,0.6);
		position:relative;
		overflow:hidden;
	}
	#ContainAll-1:hover{
		box-shadow: 0 0 10px #000;
		animation:1s Moving-1 ease;
		top:100px; left:100px;
		z-index:5;
	}
	#ContainAll-2{
		width:300px;
		height:420px;
		background: rgba(0,0,0,0.6);
		position:relative;
		overflow:hidden;
	}
	#ContainAll-2:hover{
		box-shadow: 0 0 10px #000;
		animation:1s Moving-2 ease;
		top:100px;
		z-index:5;
	}
	#ContainAll-3{
		width:300px;
		height:420px;
		background: rgba(0,0,0,0.6);
		position:relative;
		overflow:hidden;
	}
	#ContainAll-3:hover{
		box-shadow: 0 0 10px #000;
		animation:1s Moving-3 ease;
		top:100px; right:100px;
		z-index:5;
	}
	#ContainAll-4{
		width:300px;
		height:420px;
		background: rgba(0,0,0,0.6);
		position:relative;
		overflow:hidden;
	}
	#ContainAll-4:hover{
		box-shadow: 0 0 10px #000;
		animation:1s Moving-4 ease;
		top:-100px; left:100px;
		z-index:5;
	}
	
	#ContainAll-5{
		width:300px;
		height:420px;
		background: rgba(0,0,0,0.6);
		position:relative;
		overflow:hidden;
	}
	#ContainAll-5:hover{
		box-shadow: 0 0 10px #000;
		animation:1s Moving-5 ease;
		top:-100px;
		z-index:5;
	}
	#ContainAll-6{
		width:300px;
		height:420px;
		background: rgba(0,0,0,0.6);
		position:relative;
		overflow:hidden;
	}
	#ContainAll-6:hover{
		box-shadow: 0 0 10px #000;
		animation:1s Moving-6 ease;
		top:-100px; right:100px;
		z-index:5;
	}
	.ContainAll-boder{
		width:290px;
		height:250px;
		margin-top:5px;;
		margin-left:auto;
		margin-right:auto;
		border:2px solid #90C;	
	}
	.ContainAll-image{
		width:280px;
		height:240px;
		margin-top:5px;
		margin-left:auto;
		margin-right:auto;
		background:#CCC;
		overflow:hidden;
		box-shadow:0 0 10px #000;		
	}
	.ContainAll-image img{
		width:280px;
		height:240px;				
	}
	.ContainBG:hover .ContainAll-image img{
		width:336px;
		height:288px;
		animation:0.3s ScaleActive ease;
		transform:scale(1.2,1.2);
	}
	.CodeRef{
		width:100px;
		height:30px;
		line-height:30px;
		text-align:center;
		background:#060;
		color:#fff;
		position:absolute;
		top:12px;
		right:10px;
	}
	.ContainDetail{
		width:300px;
		height:174px;
		background:#000;
		position:relative;
		top:-11px;
		box-shadow:0 0 5px #000;
	}
	.ContainDetail-border{
		width:290px;
		height:154px;
		border:2px solid #90C;
		position:absolute;
		text-indent:10px;
		top:7px;
		left:3px;	
	}
	.ContainDetail-Foot{
		width:290px;
		height:50px;
		position:absolute;
		top:104px;
		line-height:50px;
		text-align:center;
		font-size:20px;
		color:#fff;
		z-index:4;
		background:#63C;
		transition: width .3s, height .3s;
		
	}
	
	.ContainBG:hover .ContainDetail-Foot{
		width:400px;
		height:100px;
		line-height:60px;
		position:absolute;
		z-index:2;
		right:-10px;
		box-shadow:0 0 10px #FFF;
 	}