/*responsiv 3D gallery*/
.responsiveGallery-container{
	width: 100%;
	position: relative;
	/* overflow: hidden; */
}

.responsiveGallery-btn{
	position:absolute;
	top: 0;
	z-index: 3;
	display: block;
	width: 20px;
	height: 20px;
	display: flex;
	justify-content: center;
	align-items: center;
	top: 50%;
	/* margin-top: -10px; */
}
.responsiveGallery-btn span {
    border: solid #6ba539;
    border-width: 0 5px 5px 0;
    display: inline-block;
    padding: 5px;
}
.responsiveGallery-btn_prev{
	transform: rotate(135deg);
	left:1%;
}
.responsiveGallery-btn_next{
	transform: rotate(-45deg);
	right:1%;
}

.responsiveGallery-wrapper{
	position: relative;
    width: 200%;
    margin-left: -50%;
    min-height: 250px;
	/* margin: 0 auto; */
	padding-top: 25%;/*用padding撑开容器高度*/
	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	-o-transform-style: preserve-3d;
	-ms-transform-style: preserve-3d;
	transform-style: preserve-3d;
	-webkit-perspective: 1000px;
	-moz-perspective: 1000px;
	-o-perspective: 1000px;
	-ms-perspective: 1000px;
	perspective: 1000px;
}
.responsiveGallery-item {
	position: absolute;
	left: 0;
	top: 0;
	z-index: 0;
	display: block;
	width: 20%; /*默认显示5个*/
	opacity: 0;
    visibility: hidden;
    min-height: 255px; 
    /* margin: 0 -10px; */ 
    
}

@media (min-width: 1001px) {
    .order-3 .w-responsivGallery-info {
        transform: translateY(30px);
        opacity: 1;
    }
}
@media (max-width: 1000px){
	.responsiveGallery-item{
		width: 33.33%; /*此宽度下显示3个*/
	}
	.responsiveGallery-wrapper{
		padding-top: 45%;/*相应调整容器高度*/
    }
    .order-2 .w-responsivGallery-info {
        transform: translateY(30px);
        opacity: 1;
    }

}
@media (max-width: 560px){
	.responsiveGallery-wrapper{
        width: 80%;
        margin-left: 10%;
	}
	.responsiveGallery-item{
		width: 100%; /*最终显示1个，但上条样式决定其宽度为窗口宽度的60%*/
	}
	.responsiveGallery-wrapper{
		padding-top: 70%;/*相应调整容器高度*/
	}
	.responsiveGallery-btn{
        width: 8%;
        
    }
    .order-1 .w-responsivGallery-info {
        transform: translateY(30px);
        opacity: 1;
    }
}
.responsivGallery-link{
	display: block;
	width: 100%;
	box-shadow: 0px 0px 20px rgba(0,0,0,0.3);
}
.responsivGallery-pic{
	width: 100%;
    height: auto;
    z-index: 500;
    position: relative;
    box-shadow: 0px 4px 10px -2px rgba(0,0,0,0.3);
}
.w-responsivGallery-info{
	/* width: 80%; */
	margin: 0 auto;
	padding-top: 5px;
	text-align: center;
  
}
.responsivGallery-name{
	font-size: 1.25em;
}
.w-responsivGallery-info{
    position: relative;
    backface-visibility: hidden;
    top: -20px;
    transition: transform 500ms,
                opacity 350ms;
    z-index: 10;
    opacity: 0;
    
}
.responsivGallery-position {
    font-size: 12px;
    color: black;
    font-weight: normal;
    margin-bottom: 0;
    flex-grow: 1;
    
}

/*responsiv 3D gallery end*/