/* CSS Document */
.data1{      width: 100%;
    padding-top: 50px;
    display: table;
    line-height: 34px;
    position: relative;
    overflow: hidden;}
	
.data2{    width: 100%;
    padding-top: 00px;
    display: table;
    background: url(/skin/img/stb.jpg) center 100px no-repeat;
    position: relative;
    overflow: hidden;}
.data2 .pic2{
    position:absolute;
    top:0;
    left:0;
    z-index:-1;
}
.data2 .image_container a{
	width:100%;height:100%; display:block;
    float:left;
    -webkit-perspective: 600px;
    -moz-perspective: 600px;
}

.data2 .image_container a .pic1{
    -webkit-transform: rotateX(0deg) rotateY(0deg);
    -webkit-transform-style: preserve-3d;
    -webkit-backface-visibility: hidden;
    -moz-transform: rotateX(0deg) rotateY(0deg);
    -moz-transform-style: preserve-3d;
    -moz-backface-visibility: hidden;
    -o-transition: all .4s ease-in-out;
    -ms-transition: all .4s ease-in-out;
    -moz-transition: all .4s ease-in-out;
    -webkit-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out;
}

.data2 .image_container a:hover .pic1{
    -webkit-transform:rotateY(180deg);
    -moz-transform:rotateY(180deg);
}

.data2 .image_container a .pic2{
    -webkit-transform: rotateY(-180deg);
    -webkit-transform-style: preserve-3d;
    -webkit-backface-visibility: hidden;
    -moz-transform: rotateY(-180deg);
    -moz-transform-style: preserve-3d;
    -moz-backface-visibility: hidden;
    -o-transition: all .4s ease-in-out;
    -ms-transition: all .4s ease-in-out;
    -moz-transition: all .4s ease-in-out;
    -webkit-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out;/*z-index:10;
    position:absolute;*/
}

.data2 .image_container a:hover .pic2{
    -webkit-transform:rotateX(0deg) rotateY(0deg);
    -moz-transform:rotateX(0deg) rotate(0deg);
    z-index: 10;
    position: absolute;
}

.data2 .row{        width: 21%;
    height: 220px;
    float: left;
    margin-left: 104px;
    margin-right: 40px;
    margin-bottom: 46px;
    position: relative;
    z-index: 10;
}
.data2 .row .pic1{width:100%;height:100%; overflow:hidden;}
.data2 .row .pic2{width:100%;height:100%; overflow:hidden;}
.data2 .row .pic2 img{position:absolute;}

@media (max-width: 767px) {
.data2 .row {
    width: 185px;
    height: 216px;
    float: left;
    margin-left: 14px;
    margin-right: 14px;
    margin-bottom: 46px;
    position: relative;
    z-index: 10;
}
.data2 .image_container a {
    width: 100%;
    /* height: 100%; */
    display: block;
    float: left;
    -webkit-perspective: 600px;
    -moz-perspective: 600px;
}
.data2 .image_container a .pic1 {
    -webkit-transform: rotateX(0deg) rotateY(0deg);
    text-align: center;
    -webkit-transform-style: preserve-3d;
    -webkit-backface-visibility: hidden;
    -moz-transform: rotateX(0deg) rotateY(0deg);
    -moz-transform-style: preserve-3d;
    -moz-backface-visibility: hidden;
    -o-transition: all .4s ease-in-out;
    -ms-transition: all .4s ease-in-out;
    /* text-align: center; */
    -moz-transition: all .4s ease-in-out;
    -webkit-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out;
}
}
@media (max-width: 1366px) {
.data2 .row {
    width: 21%;
    height: 220px;
    float: left;
    margin-left: 104px;
    margin-right: 20px;
    margin-bottom: 46px;
    position: relative;
    z-index: 10;
}}
@media (max-width:414px){
    .data1{
        width: 95%;
        margin:0 auto;
        float: none;
    }
    .data2{
        display: none;
    }
}