/*@keyframes anima {
from {
margin-top:-50px;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=($opacity * 100))";
filter:alpha(opacity=0);
-moz-opacity:0;
-khtml-opacity:0;
opacity:0
}
to {
	margin: auto;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=($opacity * 100))";
	filter: alpha(opacity=100);
	-moz-opacity: 1;
	-khtml-opacity: 1;
	opacity: 1
}
}
@-webkit-keyframes anima {
from {
margin-left:-20px;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=($opacity * 100))";
filter:alpha(opacity=0);
-moz-opacity:0;
-khtml-opacity:0;
opacity:0
}
to {
	margin-left: 10px;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=($opacity * 100))";
	filter: alpha(opacity=100);
	-moz-opacity: 1;
	-khtml-opacity: 1;
	opacity: 1
}
}*/
@media screen and (max-width: 560px) {
.wrapper { padding: 20px }
}
.pic {
	/*max-width: 428px;
	max-height: 417px;*/
	/* position: relative; */
	overflow: hidden;
	margin: 10px;
	display: inline-block;
	-webkit-animation: anima 2s;
	-moz-animation: anima 2s;
	-o-animation: anima 2s;
	-ms-animation: anima 2s;
	animation: anima 2s;
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	-o-backface-visibility: hidden;
	-ms-backface-visibility: hidden;
	backface-visibility: hidden;
	}
.pic-3d { -webkit-perspective: 500; -moz-perspective: 500; -o-perspective: 500; -ms-perspective: 500; perspective: 500; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -o-transform-style: preserve-3d; -ms-transform-style: preserve-3d; transform-style: preserve-3d }
.pic-caption { cursor: default; position: absolute; width: 100%; height: 100%; /*background: rgba(255,255,255,0.92);
	background-image:-webkit-linear-gradient(to top, rgba(56,117,253,1) 65%, rgba(238,252,255,0));
	background-image:linear-gradient(to top, rgba(56,117,253,1) 65%, rgba(238,252,255,0));
    background-image:-moz-linear-gradient(to top, rgba(56,117,253,1) 65%, rgba(238,252,255,0));
	background-image:-o-linear-gradient(to top, rgba(56,117,253,1) 65%, rgba(238,252,255,0));*/
background: url(../../img/pro_cp/ycyff/jbcol.png) no-repeat; background-position: 0 180px; padding: 305px 0 0; cursor: pointer; text-align: center; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=($opacity * 100))"; filter: alpha(opacity=0); -moz-opacity: 0; -khtml-opacity: 0; opacity: 0; z-index: 1; }
.pic-image { -webkit-transform: scale(1); -moz-transform: scale(1); -o-transform: scale(1); -ms-transform: scale(1); transform: scale(1) }
.pic:hover .pic-image { -webkit-transform: scale(1); -moz-transform: scale(1); -o-transform: scale(1); -ms-transform: scale(1); transform: scale(1) }
.pic-title { font-size: 1.8em }
a, a:hover, .pic .pic-image, .pic-caption, .pic:hover .pic-caption, .pic:hover img { -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; -o-transition: all 0.2s ease; -ms-transition: all 0.2s ease; transition: all 0.2s ease }
.pic:hover .bottom-to-top, .pic:hover .top-to-bottom, .pic:hover .left-to-right, .pic:hover .right-to-left, .pic:hover .rotate-in, .pic:hover .rotate-out, .pic:hover .open-up, .pic:hover .open-down, .pic:hover .open-left, .pic:hover .open-right, .pic:hover .come-left, .pic:hover .come-right { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=($opacity * 100))"; filter: alpha(opacity=100); -moz-opacity: 1; -khtml-opacity: 1; opacity: 1; -webkit-user-select: none; -moz-user-select: none; -o-user-select: none; -ms-user-select: none; user-select: none; -webkit-touch-callout: none; -moz-touch-callout: none; -o-touch-callout: none; -ms-touch-callout: none; touch-callout: none; -webkit-tap-highlight-color: transparent; -moz-tap-highlight-color: transparent; -o-tap-highlight-color: transparent; -ms-tap-highlight-color: transparent; tap-highlight-color: transparent }
.bottom-to-top { top: 50%; left: 0 }
.pic:hover .bottom-to-top { top: 0; left: 0; display: none; }
.top-to-bottom { bottom: 50%; left: 0 }
.pic:hover .top-to-bottom { left: 0; bottom: 0 }
.left-to-right { top: 0; right: 50% }
.pic:hover .left-to-right { right: 0; top: 0 }
.right-to-left { top: 0; left: 50% }
.pic:hover .right-to-left { left: 0; top: 0 }
.rotate-in { -webkit-transform: rotate(90deg) scale(0.1); -moz-transform: rotate(90deg) scale(0.1); -o-transform: rotate(90deg) scale(0.1); -ms-transform: rotate(90deg) scale(0.1); transform: rotate(90deg) scale(0.1); top: 0; left: 0 }
.pic:hover .rotate-in { -webkit-transform: rotate(360deg) scale(1); -moz-transform: rotate(360deg) scale(1); -o-transform: rotate(360deg) scale(1); -ms-transform: rotate(360deg) scale(1); transform: rotate(360deg) scale(1) }
.rotate-out { -webkit-transform: rotate(90deg) scale(3); -moz-transform: rotate(90deg) scale(3); -o-transform: rotate(90deg) scale(3); -ms-transform: rotate(90deg) scale(3); transform: rotate(90deg) scale(3); top: 0; left: 0 }
.pic:hover .rotate-out { -webkit-transform: rotate(360deg) scale(1); -moz-transform: rotate(360deg) scale(1); -o-transform: rotate(360deg) scale(1); -ms-transform: rotate(360deg) scale(1); transform: rotate(360deg) scale(1) }
.open-down { -webkit-transform: rotateX(-180deg); -moz-transform: rotateX(-180deg); -o-transform: rotateX(-180deg); -ms-transform: rotateX(-180deg); transform: rotateX(-180deg); top: 0; left: 0 }
.pic:hover .open-down { -webkit-transform: rotateX(0); -moz-transform: rotateX(0); -o-transform: rotateX(0); -ms-transform: rotateX(0); transform: rotateX(0) }
.open-up { -webkit-transform: rotateX(180deg); -moz-transform: rotateX(180deg); -o-transform: rotateX(180deg); -ms-transform: rotateX(180deg); transform: rotateX(180deg); top: 0; left: 0 }
.pic:hover .open-up { -webkit-transform: rotateX(0); -moz-transform: rotateX(0); -o-transform: rotateX(0); -ms-transform: rotateX(0); transform: rotateX(0) }
.open-left { -webkit-transform: rotateY(180deg); -moz-transform: rotateY(180deg); -o-transform: rotateY(180deg); -ms-transform: rotateY(180deg); transform: rotateY(180deg); left: 0; top: 0 }
.pic:hover .open-left { -webkit-transform: rotateY(0deg); -moz-transform: rotateY(0deg); -o-transform: rotateY(0deg); -ms-transform: rotateY(0deg); transform: rotateY(0deg) }
.open-right { -webkit-transform: rotateY(-180deg); -moz-transform: rotateY(-180deg); -o-transform: rotateY(-180deg); -ms-transform: rotateY(-180deg); transform: rotateY(-180deg); left: 0; top: 0 }
.pic:hover .open-right { -webkit-transform: rotateY(0deg); -moz-transform: rotateY(0deg); -o-transform: rotateY(0deg); -ms-transform: rotateY(0deg); transform: rotateY(0deg) }
.come-left { -webkit-transform: rotateY(90deg) rotateX(90deg); -moz-transform: rotateY(90deg) rotateX(90deg); -o-transform: rotateY(90deg) rotateX(90deg); -ms-transform: rotateY(90deg) rotateX(90deg); transform: rotateY(90deg) rotateX(90deg); left: 0; top: 0 }
.pic:hover .come-left { -webkit-transform: rotateY(0) rotateX(0); -moz-transform: rotateY(0) rotateX(0); -o-transform: rotateY(0) rotateX(0); -ms-transform: rotateY(0) rotateX(0); transform: rotateY(0) rotateX(0) }
.come-right { -webkit-transform: rotateY(-90deg) rotateX(-90deg); -moz-transform: rotateY(-90deg) rotateX(-90deg); -o-transform: rotateY(-90deg) rotateX(-90deg); -ms-transform: rotateY(-90deg) rotateX(-90deg); transform: rotateY(-90deg) rotateX(-90deg); left: 0; top: 0 }
.pic:hover .come-right { -webkit-transform: rotateY(0) rotateX(0); -moz-transform: rotateY(0) rotateX(0); -o-transform: rotateY(0) rotateX(0); -ms-transform: rotateY(0) rotateX(0); transform: rotateY(0) rotateX(0) }
@media screen and (max-width: 560px) {
.pic { max-width: 528px; max-height: 517px; display: block; -webkit-animation: none; -moz-animation: none; -o-animation: none; -ms-animation: none; animation: none; margin: 10px auto }
}