/*特效*/
.current-sec {
	/*position: absolute;*/
	/*-webkit-animation-name:'current-sec';
	-webkit-animation-duration: 1s;
	-webkit-animation-timing-function: ease-in-out;
	-webkit-animation-iteration-count: 1;
	

	animation-name:'current-sec';
	animation-duration: 1s;
	animation-timing-function: ease-in-out; 
	animation-iteration-count: 1;*/

    -webkit-animation: current-sec 1s ease-in-out 0s forwards;
    animation: current-sec 1s ease-in-out 0s forwards;
}
@-webkit-keyframes current-sec {
    0% {
        -webkit-transform: translate(0);
	    -moz-transform: translate(0);
	    -ms-transform: translate(0);
	    -o-transform: translate(0);
	    transform: translate(0);
    }
    100% {
        -webkit-transform: translate(0, -100px);
	    -moz-transform: translate(0, -100px);
	    -ms-transform: translate(0, -100px);
	    -o-transform: translate(0, -100px);
	    transform: translate(0, -100px);
    }
}
@-moz-keyframes current-sec {
    0% {
        background-position: center 30%;
    }
    50% {
    	background-position: center 70%;
    }
    100% {
        background-position: center 30%;
    }
}
@-ms-keyframes current-sec {
    0% {
        background-position: center 30%;
    }
    50% {
    	background-position: center 70%;
    }
    100% {
        background-position: center 30%;
    }
}
@-o-keyframes current-sec {
    0% {
        background-position: center 30%;
    }
    50% {
    	background-position: center 70%;
    }
    100% {
        background-position: center 30%;
    }
}
@keyframes current-sec {
    
}
.banner-box .demo a,
.more-btn {
	-webkit-transition: all 300ms ease;
	-moz-transition: all 300ms ease;
	-ms-transition: all 300ms ease;
	-o-transition: all 300ms ease;
	transition: all 300ms ease;
}
.banner-box .demo a:hover,
.more-btn:hover {
	-webkit-transition: all 300ms ease;
	-moz-transition: all 300ms ease;
	-ms-transition: all 300ms ease;
	-o-transition: all 300ms ease;
	transition: all 300ms ease;
}
.banner-box .more {
	/*-webkit-animation-name:'more';
	-webkit-animation-duration: .8s;
	-webkit-animation-timing-function: ease-in-out; 
	-webkit-animation-iteration-count: infinite;
	

	animation-name:'more';
	animation-duration: .8s;
	animation-timing-function: ease-in-out;
	animation-iteration-count: infinite;*/

    -webkit-animation: more .8s ease-in-out 0s infinite forwards;
    animation: more .8s ease-in-out 0s infinite forwards;
}

@-webkit-keyframes more {
    0% {
        background-position: center 66%;
    }
    75% {
    	background-position: center 90%;
    }
    100% {
        background-position: center 66%;
    }
}
@-moz-keyframes more {
    0% {
        background-position: center 66%;
    }
    75% {
        background-position: center 90%;
    }
    100% {
        background-position: center 66%;
    }
}
@-ms-keyframes more {
    0% {
        background-position: center 66%;
    }
    75% {
        background-position: center 90%;
    }
    100% {
        background-position: center 66%;
    }
}
@-o-keyframes more {
    0% {
        background-position: center 66%;
    }
    75% {
        background-position: center 90%;
    }
    100% {
        background-position: center 66%;
    }
}
@keyframes more {
    0% {
        background-position: center 66%;
    }
    75% {
        background-position: center 90%;
    }
    100% {
        background-position: center 66%;
    }
}

.product-list .item.hover .info h4 {
	/*-webkit-animation-name:'product-info-title';
	-webkit-animation-duration: .3s;
	-webkit-animation-delay: 1s;
	-webkit-animation-timing-function: ease-in-out;
	-webkit-animation-iteration-count: 1;
	

	animation-name:'product-info-title';
	animation-duration: .3s;
	animation-delay: 1s;
	animation-timing-function: ease-in-out; 
	animation-iteration-count: 1;*/
	margin-top: -30px;
    -webkit-animation: product-info-title .3s ease-in-out 0s forwards;
    animation: product-info-title .3s ease-in-out 0s forwards;
}
@-webkit-keyframes product-info-title {
    0% {
	    margin-top: 0;
    }
    100% {
	    margin-top: -30px;
    }
}
@-moz-keyframes product-info-title {
    0% {
	    margin-top: 0;
    }
    100% {
	    margin-top: -30px;
    }
}
@-ms-keyframes product-info-title {
    0% {
	    margin-top: 0;
    }
    100% {
	    margin-top: -30px;
    }
}
@-o-keyframes product-info-title {
    0% {
	    margin-top: 0;
    }
    100% {
	    margin-top: -30px;
    }
}
@keyframes product-info-title {
    0% {
	    margin-top: 0;
    }
    100% {
	    margin-top: -30px;
    }
}
.product-list .item.hover .info p {
	/*-webkit-animation-name:'product-info-cont';
	-webkit-animation-duration: .3s;
	-webkit-animation-delay: 1s;
	-webkit-animation-timing-function: ease-in-out;
	-webkit-animation-iteration-count: 1;
	

	animation-name:'product-info-cont';
	animation-duration: .3s;
	animation-delay: 1s;
	animation-timing-function: ease-in-out; 
	animation-iteration-count: 1;*/
	height: 72px;
    -webkit-animation: product-info-cont .3s ease-in-out 0s forwards;
    animation: product-info-cont .3s ease-in-out 0s forwards;
}
@-webkit-keyframes product-info-cont {
    0% {
	    height: 36px;
    }
    100% {
	    height: 72px;
    }
}
@-moz-keyframes product-info-cont {
    0% {
	    height: 36px;
    }
    100% {
	    height: 72px;
    }
}
@-ms-keyframes product-info {
    0% {
	    height: 36px;
    }
    100% {
	    height: 72px;
    }
}
@-o-keyframes product-info {
    0% {
	    height: 36px;
    }
    100% {
	    height: 72px;
    }
}
@keyframes product-info {
    0% {
	    height: 36px;
    }
    100% {
	    height: 72px;
    }
}


.mobile-animation .item-center {
    opacity: 0;
	/*-webkit-animation-name:'mobile-center';
	-webkit-animation-duration: .6s;
	-webkit-animation-delay: 1s;
	-webkit-animation-timing-function: ease-in-out;
	-webkit-animation-iteration-count: 1;
	

	animation-name:'mobile-center';
	animation-duration: .6s;
	animation-delay: 1s;
	animation-timing-function: ease-in-out; 
	animation-iteration-count: 1;*/

    -webkit-animation: mobile-center .6s ease-in-out 0s forwards;
    animation: mobile-center .6s ease-in-out 0s forwards;
}

@-webkit-keyframes mobile-center {
    0% {
    	bottom: -400px;
        opacity: 0;
    }
    100% {
        bottom: 0;
        opacity: 1;
    }
}
@-moz-keyframes mobile-center {
    0% {
        bottom: -400px;
        opacity: 0;
    }
    100% {
        bottom: 0;
        opacity: 1;
    }
}
@-ms-keyframes mobile-center {
    0% {
        bottom: -400px;
        opacity: 0;
    }
    100% {
        bottom: 0;
        opacity: 1;
    }
}
@-o-keyframes mobile-center {
    0% {
        bottom: -400px;
        opacity: 0;
    }
    100% {
        bottom: 0;
        opacity: 1;
    }
}
@keyframes mobile-center {
    0% {
        bottom: -400px;
        opacity: 0;
    }
    100% {
        bottom: 0;
        opacity: 1;
    }
}

.mobile-animation .item-left {
	/*-webkit-animation-name:'mobile-left';
	-webkit-animation-duration: 1.2s;
	-webkit-animation-delay: .8s;
	-webkit-animation-timing-function: ease-in-out;
	-webkit-animation-iteration-count: 1;
	

	animation-name:'mobile-left';
	animation-duration: 1.2s;
	animation-delay: .8s;
	animation-timing-function: ease-in-out; 
	animation-iteration-count: 1;*/

    -webkit-animation: mobile-left 1.2s ease-in-out 0s forwards;
    animation: mobile-left 1.2s ease-in-out 0s forwards;
}

@-webkit-keyframes mobile-left {
    0% {
    	left: 200px;
        opacity: 0;
    }
    60% {
    	left: 200px;
        opacity: 0;
    }
    100% {
        left: 20px;
        opacity: 1;
    }
}
@-moz-keyframes mobile-left {
    0% {
    	left: 200px;
        opacity: 0;
    }
    60% {
    	left: 200px;
        opacity: 0;
    }
    100% {
        left: 20px;
        opacity: 1;
    }
}
@-ms-keyframes mobile-left {
    0% {
    	left: 200px;
        opacity: 0;
    }
    60% {
    	left: 200px;
        opacity: 0;
    }
    100% {
        left: 20px;
        opacity: 1;
    }
}
@-o-keyframes mobile-left {
    0% {
    	left: 200px;
        opacity: 0;
    }
    60% {
    	left: 200px;
        opacity: 0;
    }
    100% {
        left: 20px;
        opacity: 1;
    }
}
@keyframes mobile-left {
    0% {
    	left: 200px;
        opacity: 0;
    }
    60% {
    	left: 200px;
        opacity: 0;
    }
    100% {
        left: 20px;
        opacity: 1;
    }
}

.mobile-animation .item-right {
	/*-webkit-animation-name:'mobile-right';
	-webkit-animation-duration: 1.2s;
	-webkit-animation-delay: .8s;
	-webkit-animation-timing-function: ease-in-out;
	-webkit-animation-iteration-count: 1;
	

	animation-name:'mobile-right';
	animation-duration: 1.2s;
	animation-delay: .8s;
	animation-timing-function: ease-in-out; 
	animation-iteration-count: 1;*/

    -webkit-animation: mobile-right 1.2s ease-in-out 0s forwards;
    animation: mobile-right 1.2s ease-in-out 0s forwards;
}

@-webkit-keyframes mobile-right {
    0% {
    	right: 200px;
        opacity: 0;
    }
    60% {
    	right: 200px;
        opacity: 0;
    }
    100% {
        right: 20px;
        opacity: 1;
    }
}
@-moz-keyframes mobile-right {
    0% {
    	right: 200px;
        opacity: 0;
    }
    60% {
    	right: 200px;
        opacity: 0;
    }
    100% {
        right: 20px;
        opacity: 1;
    }
}
@-ms-keyframes mobile-right {
    0% {
    	right: 200px;
        opacity: 0;
    }
    60% {
    	right: 200px;
        opacity: 0;
    }
    100% {
        right: 20px;
        opacity: 1;
    }
}
@-o-keyframes mobile-right {
    0% {
    	right: 200px;
        opacity: 0;
    }
    60% {
    	right: 200px;
        opacity: 0;
    }
    100% {
        right: 20px;
        opacity: 1;
    }
}
@keyframes mobile-right {
    0% {
    	right: 200px;
        opacity: 0;
    }
    60% {
    	right: 200px;
        opacity: 0;
    }
    100% {
        right: 20px;
        opacity: 1;
    }
}

.mobile-animation [class*="item"] .title{
	/*-webkit-animation-name:'mobile-title';
	-webkit-animation-duration: 1.8s;
	-webkit-animation-delay: 1.4s;
	-webkit-animation-timing-function: ease-in-out;
	-webkit-animation-iteration-count: 1;
	

	animation-name:'mobile-title';
	animation-duration: 1.8s;
	animation-delay: .8s;
	animation-timing-function: ease-in-out; 
	animation-iteration-count: 1;*/

    -webkit-animation: mobile-title 1.8s ease-in-out 0s forwards;
    animation: mobile-title 1.8s ease-in-out 0s forwards;
}

@-webkit-keyframes mobile-title {
    0% {
    	margin-top: 40px;
        opacity: 0;
    }
    66% {
    	margin-top: 40px;
        opacity: 0;
    }
    100% {
        margin-top: -40px;
        opacity: 1;
    }
}
@-moz-keyframes mobile-title {
    0% {
    	margin-top: 40px;
        opacity: 0;
    }
    66% {
    	margin-top: 40px;
        opacity: 0;
    }
    100% {
        margin-top: -40px;
        opacity: 1;
    }
}
@-ms-keyframes mobile-title {
    0% {
    	margin-top: 40px;
        opacity: 0;
    }
    66% {
    	margin-top: 40px;
        opacity: 0;
    }
    100% {
        margin-top: -40px;
        opacity: 1;
    }
}
@-o-keyframes mobile-title {
    0% {
    	margin-top: 40px;
        opacity: 0;
    }
    66% {
    	margin-top: 40px;
        opacity: 0;
    }
    100% {
        margin-top: -40px;
        opacity: 1;
    }
}
@keyframes mobile-title {
    0% {
    	margin-top: 40px;
        opacity: 0;
    }
    66% {
    	margin-top: 40px;
        opacity: 0;
    }
    100% {
        margin-top: -40px;
        opacity: 1;
    }
}


.server-list .item:hover .figure {
	/*-webkit-animation-name:'server-figure';
	-webkit-animation-duration: .6s;
	-webkit-animation-delay: 1.4s;
	-webkit-animation-timing-function: ease-in-out;
	-webkit-animation-iteration-count: 1;
	

	animation-name:'server-figure';
	animation-duration: .6s;
	animation-delay: .8s;
	animation-timing-function: ease-in-out; 
	animation-iteration-count: 1;*/

    -webkit-animation: server-figure .6s ease-in-out 0s forwards;
    animation: server-figure .6s ease-in-out 0s forwards;
}


@-webkit-keyframes server-figure {
    0% {
    	-webkit-transform: rotate(0);
    	transform: rotate(0);
    }
    100% {
        -webkit-transform: rotate(360deg);
    	transform: rotate(360deg);
    }
}
@-moz-keyframes server-figure {
    0% {
    	-webkit-transform: rotate(0);
    	transform: rotate(0);
    }
    100% {
        -webkit-transform: rotate(360deg);
    	transform: rotate(360deg);
    }
}
@-ms-keyframes server-figure {
    0% {
    	-webkit-transform: rotate(0);
    	transform: rotate(0);
    }
    100% {
        -webkit-transform: rotate(360deg);
    	transform: rotate(360deg);
    }
}
@-o-keyframes server-figure {
    0% {
    	-webkit-transform: rotate(0);
    	transform: rotate(0);
    }
    100% {
        -webkit-transform: rotate(360deg);
    	transform: rotate(360deg);
    }
}
@keyframes server-figure {
    0% {
    	-webkit-transform: rotate(0);
    	transform: rotate(0);
    }
    100% {
        -webkit-transform: rotate(360deg);
    	transform: rotate(360deg);
    }
}

.contact-list .item:hover .figure {

    -webkit-animation: contact-figure .6s ease-in-out 0s forwards;
    animation: contact-figure .6s ease-in-out 0s forwards;
}


@-webkit-keyframes contact-figure {
    0% {-webkit-transform: rotate(0);}
    100% {-webkit-transform: rotate(360deg);}
}
@-moz-keyframes contact-figure {
    0% {-moz-transform: rotate(0);}
    100% {-moz-transform: rotate(360deg);}
}
@-ms-keyframes contact-figure {
    0% {-ms-transform: rotate(0);}
    100% {-ms-transform: rotate(360deg);}
}
@-o-keyframes contact-figure {
    0% {-o-transform: rotate(0);}
    100% {-o-transform: rotate(360deg);}
}
@keyframes contact-figure {
    0% {transform: rotate(0);}
    100% {transform: rotate(360deg);}
}


/*product*/
/*.part-three-top-pic{background: url(../images/part-three-img/partThreeTopImg.png);}	*/
/*.product-figure.perspective .preserve-3d {
	-webkit-animation: preserve3d-motion 1.5s ease-in-out 0s forwards;
	animation: preserve3d-motion 1.5s ease-in-out 0s forwards;

    -webkit-transform:translate3d(20px,20px,30px) rotateX(60deg) rotateY(-5deg) rotateZ(32deg);
}
@-webkit-keyframes preserve3d-motion {
	0%{-webkit-transform:translate3d(0,0,0) rotateX(0deg) rotateY(0deg) rotateZ(0deg);}
	10%{-webkit-transform:translate3d(0,0,0) rotateX(0deg) rotateY(0deg) rotateZ(0deg);}
	15%{-webkit-transform:translate3d(0,0,0) rotateX(0deg) rotateY(0deg) rotateZ(0deg);}
	18%{-webkit-transform:translate3d(0,0,0) rotateX(0deg) rotateY(0deg) rotateZ(0deg);}
	22%{-webkit-transform:translate3d(0,0,0) rotateX(0deg) rotateY(0deg) rotateZ(0deg);}
	45%{-webkit-transform:translate3d(20px,20px,0) rotateX(0deg) rotateY(0deg) rotateZ(0deg);}
	67%{-webkit-transform:translate3d(20px,20px,30px) rotateX(0deg) rotateY(0deg) rotateZ(0deg);}		
	100%{-webkit-transform:translate3d(20px,20px,30px) rotateX(60deg) rotateY(-5deg) rotateZ(32deg);}
}*/


/*------default pv3d one-------*/
.preserve3d-one .item:nth-child(2n+1)  {

    -webkit-transform:translate3d(0,-10px,0) scale(.7) rotateX(30deg) rotateY(-20deg) rotateZ(20deg);
    -moz-transform:translate3d(0,-10px,0) scale(.7) rotateX(30deg) rotateY(-20deg) rotateZ(20deg);
    -ms-transform:translate3d(0,-10px,0) scale(.7) rotateX(30deg) rotateY(-20deg) rotateZ(20deg);
    -o-transform:translate3d(0,-10px,0) scale(.7) rotateX(30deg) rotateY(-20deg) rotateZ(20deg);
    transform:translate3d(0,-10px,0) scale(.7) rotateX(30deg) rotateY(-20deg) rotateZ(20deg);

}
.preserve3d-one .item:nth-child(2n+1).hover  {

    -webkit-animation: pv3d-one-action .36s ease-in-out 0s forwards;
    animation: pv3d-one-action .36s ease-in-out 0s forwards;
}

@-webkit-keyframes pv3d-one-action {
    0%{ 
        -webkit-transform:translate3d(0,-10px,0) scale(.7) rotateX(30deg) rotateY(-20deg) rotateZ(20deg);
        max-height: 300px;
    }
       
    100%{
        -webkit-transform:translate3d(0,-20px,0) scale(0.9)  rotateX(0) rotateY(0) rotateZ(0);
        max-height: 600px;
    }
}
@-moz-keyframes pv3d-one-action {
    0%{ 
        -moz-transform:translate3d(0,-10px,0) scale(.7) rotateX(30deg) rotateY(-20deg) rotateZ(20deg);
        max-height: 300px;
    }
       
    100%{
        -moz-transform:translate3d(0,-20px,0) scale(0.9)  rotateX(0) rotateY(0) rotateZ(0);
        max-height: 600px;
    }
}
@-ms-keyframes pv3d-one-action {
    0%{ 
        -ms-transform:translate3d(0,-10px,0) scale(.7) rotateX(30deg) rotateY(-20deg) rotateZ(20deg);
        max-height: 300px;
    }
       
    100%{
        -ms-transform:translate3d(0,-20px,0) scale(0.9)  rotateX(0) rotateY(0) rotateZ(0);
        max-height: 600px;
    }
}
@-o-keyframes pv3d-one-action {
    0%{ 
        -o-transform:translate3d(0,-10px,0) scale(.7) rotateX(30deg) rotateY(-20deg) rotateZ(20deg);
        max-height: 300px;
    }
       
    100%{
        -o-transform:translate3d(0,-20px,0) scale(0.9)  rotateX(0) rotateY(0) rotateZ(0);
        max-height: 600px;
    }
}
@keyframes pv3d-one-action {
    0%{ 
        transform:translate3d(0,-10px,0) scale(.7) rotateX(30deg) rotateY(-20deg) rotateZ(20deg);
        max-height: 300px;
    }
       
    100%{
        transform:translate3d(0,-20px,0) scale(0.9)  rotateX(0) rotateY(0) rotateZ(0);
        max-height: 600px;
    }
}
.preserve3d-one .item:nth-child(2n+1).out {

    -webkit-animation: pv3d-one-action-out .36s ease-in-out 0s forwards;
    animation: pv3d-one-action-out .36s ease-in-out 0s forwards;
}

@-webkit-keyframes pv3d-one-action-out {
    0%{ 
        -webkit-transform:translate3d(0,-20px,0) scale(0.9)  rotateX(0) rotateY(0) rotateZ(0);
        max-height: 600px;
    }
       
    100%{
        -webkit-transform:translate3d(0,-10px,0) scale(.7) rotateX(30deg) rotateY(-20deg) rotateZ(20deg);
        max-height: 300px;
    }
}
@-moz-keyframes pv3d-one-action-out {
    0%{ 
        -moz-transform:translate3d(0,-20px,0) scale(0.9)  rotateX(0) rotateY(0) rotateZ(0);
        max-height: 600px;
    }
       
    100%{
        -moz-transform:translate3d(0,-10px,0) scale(.7) rotateX(30deg) rotateY(-20deg) rotateZ(20deg);
        max-height: 300px;
    }
}
@-ms-keyframes pv3d-one-action-out {
    0%{ 
        -ms-transform:translate3d(0,-20px,0) scale(0.9)  rotateX(0) rotateY(0) rotateZ(0);
        max-height: 600px;
    }
       
    100%{
        -ms-transform:translate3d(0,-10px,0) scale(.7) rotateX(30deg) rotateY(-20deg) rotateZ(20deg);
        max-height: 300px;
    }
}
@-o-keyframes pv3d-one-action-out {
    0%{ 
        -o-transform:translate3d(0,-20px,0) scale(0.9)  rotateX(0) rotateY(0) rotateZ(0);
        max-height: 600px;
    }
       
    100%{
        -o-transform:translate3d(0,-10px,0) scale(.7) rotateX(30deg) rotateY(-20deg) rotateZ(20deg);
        max-height: 300px;
    }
}
@keyframes pv3d-one-action-out {
    0%{ 
        transform:translate3d(0,-20px,0) scale(0.9)  rotateX(0) rotateY(0) rotateZ(0);
        max-height: 600px;
    }
       
    100%{
        transform:translate3d(0,-10px,0) scale(.7) rotateX(30deg) rotateY(-20deg) rotateZ(20deg);
        max-height: 300px; 
    }
}
/*------default pv3d two-------*/
.preserve3d-two .item:nth-child(2n+1)  {

    -webkit-transform:translate3d(10px,80px,0) scale(0.7) rotateX(30deg) rotateY(-20deg) rotateZ(20deg);
    -moz-transform:translate3d(10px,80px,0) scale(0.7) rotateX(30deg) rotateY(-20deg) rotateZ(20deg);
    -ms-transform:translate3d(10px,80px,0) scale(0.7) rotateX(30deg) rotateY(-20deg) rotateZ(20deg);
    -o-transform:translate3d(10px,80px,0) scale(0.7) rotateX(30deg) rotateY(-20deg) rotateZ(20deg);
    transform:translate3d(10px,80px,0) scale(0.7) rotateX(30deg) rotateY(-20deg) rotateZ(20deg);
    z-index: 1000;
}


.preserve3d-two .item:nth-child(2n+2) {
    -webkit-transform:translate3d(10px,0,-100px) scale(0.7)  rotateX(30deg) rotateY(-20deg) rotateZ(20deg);
    -moz-transform:translate3d(10px,0,-100px) scale(0.7)  rotateX(30deg) rotateY(-20deg) rotateZ(20deg);
    -ms-transform:translate3d(10px,0,-100px) scale(0.7)  rotateX(30deg) rotateY(-20deg) rotateZ(20deg);
    -o-transform:translate3d(10px,0,-100px) scale(0.7)  rotateX(30deg) rotateY(-20deg) rotateZ(20deg);
    transform:translate3d(10px,0,-100px) scale(0.7)  rotateX(30deg) rotateY(-20deg) rotateZ(20deg);
    z-index: 500;
}


.preserve3d-two .item:nth-child(2n+1).hover  {
    -webkit-animation: pv3d-two-mo1-action1 .36s ease-in-out 0s forwards;
    animation: pv3d-two-mo1-action1 .36s ease-in-out 0s forwards;
    z-index: 1500;
}
    
@-webkit-keyframes pv3d-two-mo1-action1 {
    0%{ 
        -webkit-transform:translate3d(10px,80px,0) scale(0.7)   rotateX(30deg) rotateY(-20deg) rotateZ(20deg);
        max-height: 300px;
    }  
    100%{
        -webkit-transform:translate3d(0,0,200px) scale(.9)  rotateX(0) rotateY(0) rotateZ(0);
        max-height: 600px;
    }
}
@-moz-keyframes pv3d-two-mo1-action1 {
    0%{ 
        -moz-transform:translate3d(10px,80px,0) scale(0.7)   rotateX(30deg) rotateY(-20deg) rotateZ(20deg);
        max-height: 300px;
    }  
    100%{
        -moz-transform:translate3d(0,0,200px) scale(.9)  rotateX(0) rotateY(0) rotateZ(0);
        max-height: 600px;
    }
}
@-ms-keyframes pv3d-two-mo1-action1 {
    0%{ 
        -ms-transform:translate3d(10px,80px,0) scale(0.7)   rotateX(30deg) rotateY(-20deg) rotateZ(20deg);
        max-height: 300px;
    }  
    100%{
        -ms-transform:translate3d(0,0,200px) scale(.9)  rotateX(0) rotateY(0) rotateZ(0);
        max-height: 600px;
    }
}
@-o-keyframes pv3d-two-mo1-action1 {
    0%{ 
        -o-transform:translate3d(10px,80px,0) scale(0.7)   rotateX(30deg) rotateY(-20deg) rotateZ(20deg);
        max-height: 300px;
    }  
    100%{
        -o-transform:translate3d(0,0,200px) scale(.9)  rotateX(0) rotateY(0) rotateZ(0);
        max-height: 600px;
    }
}
@keyframes pv3d-two-mo1-action1 {
    0%{ 
        transform:translate3d(10px,80px,0) scale(0.7)   rotateX(30deg) rotateY(-20deg) rotateZ(20deg);
        max-height: 300px;
    }  
    100%{
        transform:translate3d(0,0,200px) scale(.9)  rotateX(0) rotateY(0) rotateZ(0);
        max-height: 600px;
    }
}
.preserve3d-two .item:nth-child(2n+1).out  {
    -webkit-animation: pv3d-two-mo1-action1-out .36s ease-in-out 0s forwards;
    animation: pv3d-two-mo1-action1-out .36s ease-in-out 0s forwards;
    z-index: 1000;
}
    
@-webkit-keyframes pv3d-two-mo1-action1-out {
    0%{ 
        -webkit-transform:translate3d(0,0,200px) scale(.9)  rotateX(0) rotateY(0) rotateZ(0);
        max-height: 600px;
    }  
    100%{
        -webkit-transform:translate3d(10px,80px,0) scale(0.7)   rotateX(30deg) rotateY(-20deg) rotateZ(20deg);
        max-height: 300px;
    }
}
@-moz-keyframes pv3d-two-mo1-action1-out {
    0%{ 
        -moz-transform:translate3d(0,0,200px) scale(.9)  rotateX(0) rotateY(0) rotateZ(0);
        max-height: 600px;
    }  
    100%{
        -moz-transform:translate3d(10px,80px,0) scale(0.7)   rotateX(30deg) rotateY(-20deg) rotateZ(20deg);
        max-height: 300px;
    }
}
@-ms-keyframes pv3d-two-mo1-action1-out {
    0%{ 
        -ms-transform:translate3d(0,0,200px) scale(.9)  rotateX(0) rotateY(0) rotateZ(0);
        max-height: 600px;
    }  
    100%{
        -ms-transform:translate3d(10px,80px,0) scale(0.7)   rotateX(30deg) rotateY(-20deg) rotateZ(20deg);
        max-height: 300px;
    }
}
@-o-keyframes pv3d-two-mo1-action1-out {
    0%{ 
        -o-transform:translate3d(0,0,200px) scale(.9)  rotateX(0) rotateY(0) rotateZ(0);
        max-height: 600px;
    }  
    100%{
        -o-transform:translate3d(10px,80px,0) scale(0.7)   rotateX(30deg) rotateY(-20deg) rotateZ(20deg);
        max-height: 300px;
    }
}
@keyframes pv3d-two-mo1-action1-out {
    0%{ 
        transform:translate3d(0,0,200px) scale(.9)  rotateX(0) rotateY(0) rotateZ(0);
        max-height: 600px;
    }  
    100%{
        transform:translate3d(10px,80px,0) scale(0.7)   rotateX(30deg) rotateY(-20deg) rotateZ(20deg);
        max-height: 300px;
    }
}

.preserve3d-two .item:nth-child(2n+2).hover  {
    -webkit-animation: pv3d-two-mo1-action2 .36s ease-in-out 0s forwards;
    animation: pv3d-two-mo1-action2 .36s ease-in-out 0s forwards;
    z-index: 1500;
}

@-webkit-keyframes pv3d-two-mo1-action2 {
    0%{
        -webkit-transform:translate3d(10px,0,-100px) scale(0.7)  rotateX(30deg) rotateY(-20deg) rotateZ(20deg);
        max-height: 300px;
    }
    100%{
        -webkit-transform:translate3d(0,0,200px) scale(.9)  rotateX(0) rotateY(0) rotateZ(0);
        max-height: 600px;
    }
}
@-moz-keyframes pv3d-two-mo1-action2 {
    0%{
        -moz-transform:translate3d(10px,0,-100px) scale(0.7)  rotateX(30deg) rotateY(-20deg) rotateZ(20deg);
        max-height: 300px;
    }
    100%{
        -moz-transform:translate3d(0,0,200px) scale(.9)  rotateX(0) rotateY(0) rotateZ(0);
        max-height: 600px;
    }
}
@-ms-keyframes pv3d-two-mo1-action2 {
    0%{
        -ms-transform:translate3d(10px,0,-100px) scale(0.7)  rotateX(30deg) rotateY(-20deg) rotateZ(20deg);
        max-height: 300px;
    }
    100%{
        -ms-transform:translate3d(0,0,200px) scale(.9)  rotateX(0) rotateY(0) rotateZ(0);
        max-height: 600px;
    }
}
@-o-keyframes pv3d-two-mo1-action2 {
    0%{
        -o-transform:translate3d(10px,0,-100px) scale(0.7)  rotateX(30deg) rotateY(-20deg) rotateZ(20deg);
        max-height: 300px;
    }
    100%{
        -o-transform:translate3d(0,0,200px) scale(.9)  rotateX(0) rotateY(0) rotateZ(0);
        max-height: 600px;
    }
}
@keyframes pv3d-two-mo1-action2 {
    0%{
        transform:translate3d(10px,0,-100px) scale(0.7)  rotateX(30deg) rotateY(-20deg) rotateZ(20deg);
        max-height: 300px;
    }
    100%{
        transform:translate3d(0,0,200px) scale(.9)  rotateX(0) rotateY(0) rotateZ(0);
        max-height: 600px;
    }
}
.preserve3d-two .item:nth-child(2n+2).out  {
    -webkit-animation: pv3d-two-mo1-action2-out .36s ease-in-out 0s forwards;
    animation: pv3d-two-mo1-action2-out .36s ease-in-out 0s forwards;
    z-index: 500;
}

@-webkit-keyframes pv3d-two-mo1-action2-out {
    0%{
        -webkit-transform:translate3d(0,0,200px) scale(.9)  rotateX(0) rotateY(0) rotateZ(0);
        max-height: 600px;
    }
    100%{
        -webkit-transform:translate3d(10px,0,-100px) scale(0.7)  rotateX(30deg) rotateY(-20deg) rotateZ(20deg);
        max-height: 300px;
    }
}
@-moz-keyframes pv3d-two-mo1-action2-out {
    0%{
        -moz-transform:translate3d(0,0,200px) scale(.9)  rotateX(0) rotateY(0) rotateZ(0);
        max-height: 600px;
    }
    100%{
        -moz-transform:translate3d(10px,0,-100px) scale(0.7)  rotateX(30deg) rotateY(-20deg) rotateZ(20deg);
        max-height: 300px;
    }
}
@-ms-keyframes pv3d-two-mo1-action2-out {
    0%{
        -ms-transform:translate3d(0,0,200px) scale(.9)  rotateX(0) rotateY(0) rotateZ(0);
        max-height: 600px;
    }
    100%{
        -ms-transform:translate3d(10px,0,-100px) scale(0.7)  rotateX(30deg) rotateY(-20deg) rotateZ(20deg);
        max-height: 300px;
    }
}
@-o-keyframes pv3d-two-mo1-action2-out {
    0%{
        -o-transform:translate3d(0,0,200px) scale(.9)  rotateX(0) rotateY(0) rotateZ(0);
        max-height: 600px;
    }
    100%{
        -o-transform:translate3d(10px,0,-100px) scale(0.7)  rotateX(30deg) rotateY(-20deg) rotateZ(20deg);
        max-height: 300px;
    }
}
@keyframes pv3d-two-mo1-action2-out {
    0%{
        transform:translate3d(0,0,200px) scale(.9)  rotateX(0) rotateY(0) rotateZ(0);
        max-height: 600px;
    }
    100%{
        transform:translate3d(10px,0,-100px) scale(0.7)  rotateX(30deg) rotateY(-20deg) rotateZ(20deg);
        max-height: 300px;
    }
}



/*------default pv3d three-------*/
.preserve3d-three .item:nth-child(2n+1)  {
    -webkit-transform:translate3d(-10px, -30px ,-10px) scale(.7) rotateX(30deg) rotateY(-20deg) rotateZ(20deg);
    -moz-transform:translate3d(-10px, -30px ,-10px) scale(.7) rotateX(30deg) rotateY(-20deg) rotateZ(20deg);
    -ms-transform:translate3d(-10px, -30px ,-10px) scale(.7) rotateX(30deg) rotateY(-20deg) rotateZ(20deg);
    -o-transform:translate3d(-10px, -30px ,-10px) scale(.7) rotateX(30deg) rotateY(-20deg) rotateZ(20deg);
    transform:translate3d(-10px, -30px ,-10px) scale(.7) rotateX(30deg) rotateY(-20deg) rotateZ(20deg);
    z-index: 3000;
}


.preserve3d-three .item:nth-child(2n+2) {
    -webkit-transform:translate3d(0, 30px ,0) scale(.7) rotateX(30deg) rotateY(-20deg) rotateZ(20deg);
    -moz-transform:translate3d(0, 30px ,0) scale(.7) rotateX(30deg) rotateY(-20deg) rotateZ(20deg);
    -ms-transform:translate3d(0, 30px ,0) scale(.7) rotateX(30deg) rotateY(-20deg) rotateZ(20deg);
    -o-transform:translate3d(0, 30px ,0) scale(.7) rotateX(30deg) rotateY(-20deg) rotateZ(20deg);
    transform:translate3d(0, 30px ,0) scale(.7) rotateX(30deg) rotateY(-20deg) rotateZ(20deg);
    z-index: 2000;
}


.preserve3d-three .item:nth-child(2n+3) {
    -webkit-transform:translate3d(10px,90px ,10px) scale(.7) rotateX(30deg) rotateY(-20deg) rotateZ(20deg);
    -moz-transform:translate3d(10px,90px ,10px) scale(.7) rotateX(30deg) rotateY(-20deg) rotateZ(20deg);
    -ms-transform:translate3d(10px,90px ,10px) scale(.7) rotateX(30deg) rotateY(-20deg) rotateZ(20deg);
    -o-transform:translate3d(10px,90px ,10px) scale(.7) rotateX(30deg) rotateY(-20deg) rotateZ(20deg);
    transform:translate3d(10px,90px ,10px) scale(.7) rotateX(30deg) rotateY(-20deg) rotateZ(20deg);
    z-index: 1000;
}
.preserve3d-three .item:nth-child(2n+1).hover  {

    -webkit-animation: pv3d-three-action1 .36s ease-in-out 0s forwards;
    animation: pv3d-three-action1 .36s ease-in-out 0s forwards;
    z-index: 3000;
}

@-webkit-keyframes pv3d-three-action1 {
    0%{ 
        -webkit-transform:translate3d(-10px, -30px ,-10px) scale(.7) rotateX(30deg) rotateY(-20deg) rotateZ(20deg);
        max-height: 300px;
    }
    100%{
        -webkit-transform:translate3d(0px, 0,200px) scale(.9)  rotateX(0) rotateY(0) rotateZ(0);
        max-height: 600px;
    }
}
@-moz-keyframes pv3d-three-action1 {
    0%{ 
        -moz-transform:translate3d(-10px, -30px ,-10px) scale(.7) rotateX(30deg) rotateY(-20deg) rotateZ(20deg);
        max-height: 300px;
    }
    100%{
        -moz-transform:translate3d(0px, 0,200px) scale(.9)  rotateX(0) rotateY(0) rotateZ(0);
        max-height: 600px;
    }
}
@-ms-keyframes pv3d-three-action1 {
    0%{ 
        -ms-transform:translate3d(-10px, -30px ,-10px) scale(.7) rotateX(30deg) rotateY(-20deg) rotateZ(20deg);
        max-height: 300px;
    }
    100%{
        -ms-transform:translate3d(0px, 0,200px) scale(.9)  rotateX(0) rotateY(0) rotateZ(0);
        max-height: 600px;
    }
}
@-o-keyframes pv3d-three-action1 {
    0%{ 
        -o-transform:translate3d(-10px, -30px ,-10px) scale(.7) rotateX(30deg) rotateY(-20deg) rotateZ(20deg);
        max-height: 300px;
    }
    100%{
        -o-transform:translate3d(0px, 0,200px) scale(.9)  rotateX(0) rotateY(0) rotateZ(0);
        max-height: 600px;
    }
}
@keyframes pv3d-three-action1 {
    0%{ 
        transform:translate3d(-10px, -30px ,-10px) scale(.7) rotateX(30deg) rotateY(-20deg) rotateZ(20deg);
        max-height: 300px;
    }
    100%{
        transform:translate3d(0px, 0,200px) scale(.9)  rotateX(0) rotateY(0) rotateZ(0);
        max-height: 600px;
    }
}
.preserve3d-three .item:nth-child(2n+1).out  {

    -webkit-animation: pv3d-three-action1-out .36s ease-in-out 0s forwards;
    animation: pv3d-three-action1-out .36s ease-in-out 0s forwards;
    z-index: 3000;
}

@-webkit-keyframes pv3d-three-action1-out {
    0%{ 
        -webkit-transform:translate3d(0px, 0,200px) scale(.9)  rotateX(0) rotateY(0) rotateZ(0);
        max-height: 600px;
    }
    100%{
        -webkit-transform:translate3d(-10px, -30px ,-10px) scale(.7) rotateX(30deg) rotateY(-20deg) rotateZ(20deg);
        max-height: 300px;
    }
}
@-moz-keyframes pv3d-three-action1-out {
    0%{ 
        -moz-transform:translate3d(0px, 0,200px) scale(.9)  rotateX(0) rotateY(0) rotateZ(0);
        max-height: 600px;
    }
    100%{
        -moz-transform:translate3d(-10px, -30px ,-10px) scale(.7) rotateX(30deg) rotateY(-20deg) rotateZ(20deg);
        max-height: 300px;
    }
}
@-ms-keyframes pv3d-three-action1-out {
    0%{ 
        -ms-transform:translate3d(0px, 0,200px) scale(.9)  rotateX(0) rotateY(0) rotateZ(0);
        max-height: 600px;
    }
    100%{
        -ms-transform:translate3d(-10px, -30px ,-10px) scale(.7) rotateX(30deg) rotateY(-20deg) rotateZ(20deg);
        max-height: 300px;
    }
}
@-o-keyframes pv3d-three-action1-out {
    0%{ 
        -o-transform:translate3d(0px, 0,200px) scale(.9)  rotateX(0) rotateY(0) rotateZ(0);
        max-height: 600px;
    }
    100%{
        -o-transform:translate3d(-10px, -30px ,-10px) scale(.7) rotateX(30deg) rotateY(-20deg) rotateZ(20deg);
        max-height: 300px;
    }
}
@keyframes pv3d-three-action1-out {
    0%{ 
        transform:translate3d(0px, 0,200px) scale(.9)  rotateX(0) rotateY(0) rotateZ(0);
        max-height: 600px;
    }
    100%{
        transform:translate3d(-10px, -30px ,-10px) scale(.7) rotateX(30deg) rotateY(-20deg) rotateZ(20deg);
        max-height: 300px;
    }
}
.preserve3d-three .item:nth-child(2n+2).hover  {
    -webkit-animation: pv3d-three-action2 .36s ease-in-out 0s forwards;
    animation: pv3d-three-action2 .36s ease-in-out 0s forwards;
    z-index: 3000;
}

@-webkit-keyframes pv3d-three-action2 {
    0%{
        -webkit-transform:translate3d(0, 30px ,0) scale(.7) rotateX(30deg) rotateY(-20deg) rotateZ(20deg);
        max-height: 300px;
    }
    100%{
        -webkit-transform:translate3d(0,0,200px) scale(.9)  rotateX(0) rotateY(0) rotateZ(0);
        max-height: 600px;
    }
}
@-moz-keyframes pv3d-three-action2 {
    0%{
        -moz-transform:translate3d(0, 30px ,0) scale(.7) rotateX(30deg) rotateY(-20deg) rotateZ(20deg);
        max-height: 300px;
    }
    100%{
        -moz-transform:translate3d(0,0,200px) scale(.9)  rotateX(0) rotateY(0) rotateZ(0);
        max-height: 600px;
    }
}
@-ms-keyframes pv3d-three-action2 {
    0%{
        -ms-transform:translate3d(0, 30px ,0) scale(.7) rotateX(30deg) rotateY(-20deg) rotateZ(20deg);
        max-height: 300px;
    }
    100%{
        -ms-transform:translate3d(0,0,200px) scale(.9)  rotateX(0) rotateY(0) rotateZ(0);
        max-height: 600px;
    }
}
@-o-keyframes pv3d-three-action2 {
    0%{
        -o-transform:translate3d(0, 30px ,0) scale(.7) rotateX(30deg) rotateY(-20deg) rotateZ(20deg);
        max-height: 300px;
    }
    100%{
        -o-transform:translate3d(0,0,200px) scale(.9)  rotateX(0) rotateY(0) rotateZ(0);
        max-height: 600px;
    }
}
@keyframes pv3d-three-action2 {
    0%{
        transform:translate3d(0, 30px ,0) scale(.7) rotateX(30deg) rotateY(-20deg) rotateZ(20deg);
        max-height: 300px;
    }
    100%{
        transform:translate3d(0,0,200px) scale(.9)  rotateX(0) rotateY(0) rotateZ(0);
        max-height: 600px;
    }
}
.preserve3d-three .item:nth-child(2n+2).out  {
    -webkit-animation: pv3d-three-action2-out .36s ease-in-out 0s forwards;
    animation: pv3d-three-action2-out .36s ease-in-out 0s forwards;
    z-index: 2000;
}

@-webkit-keyframes pv3d-three-action2-out {
    0%{
        -webkit-transform:translate3d(0,0,200px) scale(.9)  rotateX(0) rotateY(0) rotateZ(0);
        max-height: 600px;
    }
    100%{
        -webkit-transform:translate3d(0, 30px ,0) scale(.7) rotateX(30deg) rotateY(-20deg) rotateZ(20deg);
        max-height: 300px;
    }
}
@-moz-keyframes pv3d-three-action2-out {
    0%{
        -moz-transform:translate3d(0,0,200px) scale(.9)  rotateX(0) rotateY(0) rotateZ(0);
        max-height: 600px;
    }
    100%{
        -moz-transform:translate3d(0, 30px ,0) scale(.7) rotateX(30deg) rotateY(-20deg) rotateZ(20deg);
        max-height: 300px;
    }
}
@-ms-keyframes pv3d-three-action2-out {
    0%{
        -ms-transform:translate3d(0,0,200px) scale(.9)  rotateX(0) rotateY(0) rotateZ(0);
        max-height: 600px;
    }
    100%{
        -ms-transform:translate3d(0, 30px ,0) scale(.7) rotateX(30deg) rotateY(-20deg) rotateZ(20deg);
        max-height: 300px;
    }
}
@-o-keyframes pv3d-three-action2-out {
    0%{
        -o-transform:translate3d(0,0,200px) scale(.9)  rotateX(0) rotateY(0) rotateZ(0);
        max-height: 600px;
    }
    100%{
        -o-transform:translate3d(0, 30px ,0) scale(.7) rotateX(30deg) rotateY(-20deg) rotateZ(20deg);
        max-height: 300px;
    }
}
@keyframes pv3d-three-action2-out {
    0%{
        transform:translate3d(0,0,200px) scale(.9)  rotateX(0) rotateY(0) rotateZ(0);
        max-height: 600px;
    }
    100%{
        transform:translate3d(0, 30px ,0) scale(.7) rotateX(30deg) rotateY(-20deg) rotateZ(20deg);
        max-height: 300px;
    }
}
.preserve3d-three .item:nth-child(2n+3).hover  {
    -webkit-animation: pv3d-three-action3 .36s ease-in-out 0s forwards;
    animation: pv3d-three-action3 .36s ease-in-out 0s forwards;
    z-index: 3000;
}

@-webkit-keyframes pv3d-three-action3 {
    0%{
        -webkit-transform:translate3d(10px,90px ,10px) scale(.7) rotateX(30deg) rotateY(-20deg) rotateZ(20deg);
        max-height: 300px;
    }  
    100%{
        -webkit-transform:translate3d(0,0,200px) scale(.9)  rotateX(0) rotateY(0) rotateZ(0);
        max-height: 600px;
    }
}
@-moz-keyframes pv3d-three-action3 {
    0%{
        -moz-transform:translate3d(10px,90px ,10px) scale(.7) rotateX(30deg) rotateY(-20deg) rotateZ(20deg);
        max-height: 300px;
    }  
    100%{
        -moz-transform:translate3d(0,0,200px) scale(.9)  rotateX(0) rotateY(0) rotateZ(0);
        max-height: 600px;
    }
}
@-ms-keyframes pv3d-three-action3 {
    0%{
        -ms-transform:translate3d(10px,90px ,10px) scale(.7) rotateX(30deg) rotateY(-20deg) rotateZ(20deg);
        max-height: 300px;
    }  
    100%{
        -ms-transform:translate3d(0,0,200px) scale(.9)  rotateX(0) rotateY(0) rotateZ(0);
        max-height: 600px;
    }
}
@-o-keyframes pv3d-three-action3 {
    0%{
        -o-transform:translate3d(10px,90px ,10px) scale(.7) rotateX(30deg) rotateY(-20deg) rotateZ(20deg);
        max-height: 300px;
    }  
    100%{
        -o-transform:translate3d(0,0,200px) scale(.9)  rotateX(0) rotateY(0) rotateZ(0);
        max-height: 600px;
    }
}
@keyframes pv3d-three-action3 {
    0%{
        transform:translate3d(10px,90px ,10px) scale(.7) rotateX(30deg) rotateY(-20deg) rotateZ(20deg);
        max-height: 300px;
    }  
    100%{
        transform:translate3d(0,0,200px) scale(.9)  rotateX(0) rotateY(0) rotateZ(0);
        max-height: 600px;
    }
}
.preserve3d-three .item:nth-child(2n+3).out  {
    -webkit-animation: pv3d-three-action3-out .36s ease-in-out 0s forwards;
    animation: pv3d-three-action3-out .36s ease-in-out 0s forwards;
    z-index: 1000;
}

@-webkit-keyframes pv3d-three-action3-out {
    0%{
        -webkit-transform:translate3d(0,0,200px) scale(.9)  rotateX(0) rotateY(0) rotateZ(0);
        max-height: 600px;
    }  
    100%{
        -webkit-transform:translate3d(10px,90px ,10px) scale(.7) rotateX(30deg) rotateY(-20deg) rotateZ(20deg);
        max-height: 300px;
    }
}
@-moz-keyframes pv3d-three-action3-out {
    0%{
        -moz-transform:translate3d(0,0,200px) scale(.9)  rotateX(0) rotateY(0) rotateZ(0);
        max-height: 600px;
    }  
    100%{
        -moz-transform:translate3d(10px,90px ,10px) scale(.7) rotateX(30deg) rotateY(-20deg) rotateZ(20deg);
        max-height: 300px;
    }
}
@-ms-keyframes pv3d-three-action3-out {
    0%{
        -ms-transform:translate3d(0,0,200px) scale(.9)  rotateX(0) rotateY(0) rotateZ(0);
        max-height: 600px;
    }  
    100%{
        -ms-transform:translate3d(10px,90px ,10px) scale(.7) rotateX(30deg) rotateY(-20deg) rotateZ(20deg);
        max-height: 300px;
    }
}
@-o-keyframes pv3d-three-action3-out {
    0%{
        -o-transform:translate3d(0,0,200px) scale(.9)  rotateX(0) rotateY(0) rotateZ(0);
        max-height: 600px;
    }  
    100%{
        -o-transform:translate3d(10px,90px ,10px) scale(.7) rotateX(30deg) rotateY(-20deg) rotateZ(20deg);
        max-height: 300px;
    }
}
@keyframes pv3d-three-action3-out {
    0%{
        transform:translate3d(0,0,200px) scale(.9)  rotateX(0) rotateY(0) rotateZ(0);
        max-height: 600px;
    }  
    100%{
        transform:translate3d(10px,90px ,10px) scale(.7) rotateX(30deg) rotateY(-20deg) rotateZ(20deg);
        max-height: 300px;
    }
}


/*------default pv3d four-------*/
.preserve3d-four .item:nth-child(2n+1)  {
    -webkit-transform:translate3d(30px, 70px ,0) scale(.66) rotateX(30deg) rotateY(-20deg) rotateZ(20deg);
    -moz-transform:translate3d(30px, 70px ,0) scale(.66) rotateX(30deg) rotateY(-20deg) rotateZ(20deg);
    -ms-transform:translate3d(30px, 70px ,0) scale(.66) rotateX(30deg) rotateY(-20deg) rotateZ(20deg);
    -o-transform:translate3d(30px, 70px ,0) scale(.66) rotateX(30deg) rotateY(-20deg) rotateZ(20deg);
    transform:translate3d(30px, 70px ,0) scale(.66) rotateX(30deg) rotateY(-20deg) rotateZ(20deg);
    z-index: 4000;
}


.preserve3d-four .item:nth-child(2n+2) {
    -webkit-transform:translate3d(15px, 30px ,0) scale(.66) rotateX(30deg) rotateY(-20deg) rotateZ(20deg);
    -moz-transform:translate3d(15px, 30px ,0) scale(.66) rotateX(30deg) rotateY(-20deg) rotateZ(20deg);
    -ms-transform:translate3d(15px, 30px ,0) scale(.66) rotateX(30deg) rotateY(-20deg) rotateZ(20deg);
    -o-transform:translate3d(15px, 30px ,0) scale(.66) rotateX(30deg) rotateY(-20deg) rotateZ(20deg);
    transform:translate3d(15px, 30px ,0) scale(.66) rotateX(30deg) rotateY(-20deg) rotateZ(20deg);
    z-index: 3000;
}

.preserve3d-four .item:nth-child(2n+3) {
    -webkit-transform:translate3d(0, -10px ,0) scale(.66) rotateX(30deg) rotateY(-20deg) rotateZ(20deg);
    -moz-transform:translate3d(0, -10px ,0) scale(.66) rotateX(30deg) rotateY(-20deg) rotateZ(20deg);
    -ms-transform:translate3d(0, -10px ,0) scale(.66) rotateX(30deg) rotateY(-20deg) rotateZ(20deg);
    -o-transform:translate3d(0, -10px ,0) scale(.66) rotateX(30deg) rotateY(-20deg) rotateZ(20deg);
    transform:translate3d(0, -10px ,0) scale(.66) rotateX(30deg) rotateY(-20deg) rotateZ(20deg);
    z-index: 2000;
}

.preserve3d-four .item:nth-child(2n+4) {
    -webkit-transform:translate3d(-15px, -50px ,0) scale(.66) rotateX(30deg) rotateY(-20deg) rotateZ(20deg);
    -moz-transform:translate3d(-15px, -50px ,0) scale(.66) rotateX(30deg) rotateY(-20deg) rotateZ(20deg);
    -ms-transform:translate3d(-15px, -50px ,0) scale(.66) rotateX(30deg) rotateY(-20deg) rotateZ(20deg);
    -o-transform:translate3d(-15px, -50px ,0) scale(.66) rotateX(30deg) rotateY(-20deg) rotateZ(20deg);
    transform:translate3d(-15px, -50px ,0) scale(.66) rotateX(30deg) rotateY(-20deg) rotateZ(20deg);
    z-index: 1000;
}

.preserve3d-four .item:nth-child(2n+1).hover  {

    -webkit-animation: pv3d-four-action1 .36s ease-in-out 0s forwards;
    animation: pv3d-four-action1 .36s ease-in-out 0s forwards;
}

@-webkit-keyframes pv3d-four-action1 {
    0%{ 
        -webkit-transform:translate3d(30px, 70px ,0) scale(0.66)  rotateX(30deg) rotateY(-20deg) rotateZ(20deg);
        max-height: 300px;
    }
    100%{
        -webkit-transform:translate3d(20px,0,300px) scale(.9)  rotateX(0) rotateY(0) rotateZ(0);
        max-height: 600px;
    }
}
@-moz-keyframes pv3d-four-action1 {
    0%{ 
        -moz-transform:translate3d(30px, 70px ,0) scale(0.66)  rotateX(30deg) rotateY(-20deg) rotateZ(20deg);
        max-height: 300px;
    }
    100%{
        -moz-transform:translate3d(20px,0,300px) scale(.9)  rotateX(0) rotateY(0) rotateZ(0);
        max-height: 600px;
    }
}
@-ms-keyframes pv3d-four-action1 {
    0%{ 
        -ms-transform:translate3d(30px, 70px ,0) scale(0.66)  rotateX(30deg) rotateY(-20deg) rotateZ(20deg);
        max-height: 300px;
    }
    100%{
        -ms-transform:translate3d(20px,0,300px) scale(.9)  rotateX(0) rotateY(0) rotateZ(0);
        max-height: 600px;
    }
}
@-o-keyframes pv3d-four-action1 {
    0%{ 
        -o-transform:translate3d(30px, 70px ,0) scale(0.66)  rotateX(30deg) rotateY(-20deg) rotateZ(20deg);
        max-height: 300px;
    }
    100%{
        -o-transform:translate3d(20px,0,300px) scale(.9)  rotateX(0) rotateY(0) rotateZ(0);
        max-height: 600px;
    }
}
@keyframes pv3d-four-action1 {
    0%{ 
        transform:translate3d(30px, 70px ,0) scale(0.66)  rotateX(30deg) rotateY(-20deg) rotateZ(20deg);
        max-height: 300px;
    }
    100%{
        transform:translate3d(20px,0,300px) scale(.9)  rotateX(0) rotateY(0) rotateZ(0);
        max-height: 600px;
    }
}
.preserve3d-four .item:nth-child(2n+1).out  {

    -webkit-animation: pv3d-four-action1-out .36s ease-in-out 0s forwards;
    animation: pv3d-four-action1-out .36s ease-in-out 0s forwards;
}

@-webkit-keyframes pv3d-four-action1-out {
    0%{ 
        -webkit-transform:translate3d(20px,0,300px) scale(.9)  rotateX(0) rotateY(0) rotateZ(0);
        max-height: 600px;
    }
    100%{
        -webkit-transform:translate3d(30px, 70px ,0) scale(0.66)  rotateX(30deg) rotateY(-20deg) rotateZ(20deg);
        max-height: 300px;
    }
}
@-moz-keyframes pv3d-four-action1-out {
    0%{ 
        -moz-transform:translate3d(20px,0,300px) scale(.9)  rotateX(0) rotateY(0) rotateZ(0);
        max-height: 600px;
    }
    100%{
        -moz-transform:translate3d(30px, 70px ,0) scale(0.66)  rotateX(30deg) rotateY(-20deg) rotateZ(20deg);
        max-height: 300px;
    }
}
@-ms-keyframes pv3d-four-action1-out {
    0%{ 
        -ms-transform:translate3d(20px,0,300px) scale(.9)  rotateX(0) rotateY(0) rotateZ(0);
        max-height: 600px;
    }
    100%{
        -ms-transform:translate3d(30px, 70px ,0) scale(0.66)  rotateX(30deg) rotateY(-20deg) rotateZ(20deg);
        max-height: 300px;
    }
}
@-o-keyframes pv3d-four-action1-out {
    0%{ 
        -o-transform:translate3d(20px,0,300px) scale(.9)  rotateX(0) rotateY(0) rotateZ(0);
        max-height: 600px;
    }
    100%{
        -o-transform:translate3d(30px, 70px ,0) scale(0.66)  rotateX(30deg) rotateY(-20deg) rotateZ(20deg);
        max-height: 300px;
    }
}
@keyframes pv3d-four-action1-out {
    0%{ 
        transform:translate3d(20px,0,300px) scale(.9)  rotateX(0) rotateY(0) rotateZ(0);
        max-height: 600px;
    }
    100%{
        transform:translate3d(30px, 70px ,0) scale(0.66)  rotateX(30deg) rotateY(-20deg) rotateZ(20deg);
        max-height: 300px;
    }
}
.preserve3d-four .item:nth-child(2n+2).hover  {

    -webkit-animation: pv3d-four-action2 .36s ease-in-out 0s forwards;
    animation: pv3d-four-action2 .36s ease-in-out 0s forwards;
    z-index: 4000;
}

@-webkit-keyframes pv3d-four-action2 {
    0%{
        -webkit-transform:translate3d(15px, 30px ,0) scale(.66) rotateX(30deg) rotateY(-20deg) rotateZ(20deg);
        max-height: 300px;
    }
    100%{
        -webkit-transform:translate3d(20px,0,300px) scale(.9)  rotateX(0) rotateY(0) rotateZ(0);
        max-height: 600px;
    }
}
@-moz-keyframes pv3d-four-action2 {
    0%{
        -moz-transform:translate3d(15px, 30px ,0) scale(.66) rotateX(30deg) rotateY(-20deg) rotateZ(20deg);
        max-height: 300px;
    }
    100%{
        -moz-transform:translate3d(20px,0,300px) scale(.9)  rotateX(0) rotateY(0) rotateZ(0);
        max-height: 600px;
    }
}
@-ms-keyframes pv3d-four-action2 {
    0%{
        -ms-transform:translate3d(15px, 30px ,0) scale(.66) rotateX(30deg) rotateY(-20deg) rotateZ(20deg);
        max-height: 300px;
    }
    100%{
        -ms-transform:translate3d(20px,0,300px) scale(.9)  rotateX(0) rotateY(0) rotateZ(0);
        max-height: 600px;
    }
}
@-o-keyframes pv3d-four-action2 {
    0%{
        -o-transform:translate3d(15px, 30px ,0) scale(.66) rotateX(30deg) rotateY(-20deg) rotateZ(20deg);
        max-height: 300px;
    }
    100%{
        -o-transform:translate3d(20px,0,300px) scale(.9)  rotateX(0) rotateY(0) rotateZ(0);
        max-height: 600px;
    }
}
@keyframes pv3d-four-action2 {
    0%{
        transform:translate3d(15px, 30px ,0) scale(.66) rotateX(30deg) rotateY(-20deg) rotateZ(20deg);
        max-height: 300px;
    }
    100%{
        transform:translate3d(20px,0,300px) scale(.9)  rotateX(0) rotateY(0) rotateZ(0);
        max-height: 600px;
    }
}
.preserve3d-four .item:nth-child(2n+2).out  {

    -webkit-animation: pv3d-four-action2-out .36s ease-in-out 0s forwards;
    animation: pv3d-four-action2-out .36s ease-in-out 0s forwards;
    z-index: 3000;
}

@-webkit-keyframes pv3d-four-action2-out {
    0%{
        -webkit-transform:translate3d(20px,0,300px) scale(.9)  rotateX(0) rotateY(0) rotateZ(0);
        max-height: 600px;
    }
    100%{
        -webkit-transform:translate3d(15px, 30px ,0) scale(.66) rotateX(30deg) rotateY(-20deg) rotateZ(20deg);
        max-height: 300px;
    }
}
@-moz-keyframes pv3d-four-action2-out {
    0%{
        -moz-transform:translate3d(20px,0,300px) scale(.9)  rotateX(0) rotateY(0) rotateZ(0);
        max-height: 600px;
    }
    100%{
        -moz-transform:translate3d(15px, 30px ,0) scale(.66) rotateX(30deg) rotateY(-20deg) rotateZ(20deg);
        max-height: 300px;
    }
}
@-ms-keyframes pv3d-four-action2-out {
    0%{
        -ms-transform:translate3d(20px,0,300px) scale(.9)  rotateX(0) rotateY(0) rotateZ(0);
        max-height: 600px;
    }
    100%{
        -ms-transform:translate3d(15px, 30px ,0) scale(.66) rotateX(30deg) rotateY(-20deg) rotateZ(20deg);
        max-height: 300px;  
    }
}
@-o-keyframes pv3d-four-action2-out {
    0%{
        -o-transform:translate3d(20px,0,300px) scale(.9)  rotateX(0) rotateY(0) rotateZ(0);
        max-height: 600px;
    }
    100%{
        -o-transform:translate3d(15px, 30px ,0) scale(.66) rotateX(30deg) rotateY(-20deg) rotateZ(20deg);
        max-height: 300px;
        
    }
}
@keyframes pv3d-four-action2-out {
    0%{
        transform:translate3d(20px,0,300px) scale(.9)  rotateX(0) rotateY(0) rotateZ(0);
        max-height: 600px;
    }
    100%{
        transform:translate3d(15px, 30px ,0) scale(.66) rotateX(30deg) rotateY(-20deg) rotateZ(20deg);
        max-height: 300px;
    }
}
.preserve3d-four .item:nth-child(2n+3).hover  {

    -webkit-animation: pv3d-four-action3 .36s ease-in-out 0s forwards;
    animation: pv3d-four-action3 .36s ease-in-out 0s forwards;
    z-index: 4000;
}

@-webkit-keyframes pv3d-four-action3 {
    0%{
        -webkit-transform:translate3d(0, -10px ,0) scale(.66) rotateX(30deg) rotateY(-20deg) rotateZ(20deg);
        max-height: 300px;
    }
    100%{
        -webkit-transform:translate3d(20px,0,300px) scale(.9)  rotateX(0) rotateY(0) rotateZ(0);
        max-height: 600px;
    }
}
@-moz-keyframes pv3d-four-action3 {
    0%{
        -moz-transform:translate3d(0, -10px ,0) scale(.66) rotateX(30deg) rotateY(-20deg) rotateZ(20deg);
        max-height: 300px;
    }
    100%{
        -moz-transform:translate3d(20px,0,300px) scale(.9)  rotateX(0) rotateY(0) rotateZ(0);
        max-height: 600px;
    }
}
@-ms-keyframes pv3d-four-action3 {
    0%{
        -ms-transform:translate3d(0, -10px ,0) scale(.66) rotateX(30deg) rotateY(-20deg) rotateZ(20deg);
        max-height: 300px;
    }
    100%{
        -ms-transform:translate3d(20px,0,300px) scale(.9)  rotateX(0) rotateY(0) rotateZ(0);
        max-height: 600px;
    }
}
@-o-keyframes pv3d-four-action3 {
    0%{
        -o-transform:translate3d(0, -10px ,0) scale(.66) rotateX(30deg) rotateY(-20deg) rotateZ(20deg);
        max-height: 300px;
    }
    100%{
        -o-transform:translate3d(20px,0,300px) scale(.9)  rotateX(0) rotateY(0) rotateZ(0);
        max-height: 600px;
    }
}
@keyframes pv3d-four-action3 {
    0%{
        transform:translate3d(0, -10px ,0) scale(.66) rotateX(30deg) rotateY(-20deg) rotateZ(20deg);
        max-height: 300px;
    }
    100%{
        transform:translate3d(20px,0,300px) scale(.9)  rotateX(0) rotateY(0) rotateZ(0);
        max-height: 600px;
    }
}
.preserve3d-four .item:nth-child(2n+3).out  {

    -webkit-animation: pv3d-four-action3-out .36s ease-in-out 0s forwards;
    animation: pv3d-four-action3-out .36s ease-in-out 0s forwards;
    z-index: 2000;
}

@-webkit-keyframes pv3d-four-action3-out {
    0%{
        -webkit-transform:translate3d(20px,0,300px) scale(.9)  rotateX(0) rotateY(0) rotateZ(0);
        max-height: 600px;
    }
    100%{
        -webkit-transform:translate3d(0, -10px ,0) scale(.66) rotateX(30deg) rotateY(-20deg) rotateZ(20deg);
        max-height: 300px;
    }
}
@-moz-keyframes pv3d-four-action3-out {
    0%{
        -moz-transform:translate3d(20px,0,300px) scale(.9)  rotateX(0) rotateY(0) rotateZ(0);
        max-height: 600px;
    }
    100%{
        -moz-transform:translate3d(0, -10px ,0) scale(.66) rotateX(30deg) rotateY(-20deg) rotateZ(20deg);
        max-height: 300px;
    }
}
@-ms-keyframes pv3d-four-action3-out {
    0%{
        -ms-transform:translate3d(20px,0,300px) scale(.9)  rotateX(0) rotateY(0) rotateZ(0);
        max-height: 600px;
    }
    100%{
        -ms-transform:translate3d(0, -10px ,0) scale(.66) rotateX(30deg) rotateY(-20deg) rotateZ(20deg);
        max-height: 300px;
    }
}
@-o-keyframes pv3d-four-action3-out {
    0%{
        -o-transform:translate3d(20px,0,300px) scale(.9)  rotateX(0) rotateY(0) rotateZ(0);
        max-height: 600px;
    }
    100%{
        -o-transform:translate3d(0, -10px ,0) scale(.66) rotateX(30deg) rotateY(-20deg) rotateZ(20deg);
        max-height: 300px;
    }
}
@keyframes pv3d-four-action3-out {
    0%{
        transform:translate3d(20px,0,300px) scale(.9)  rotateX(0) rotateY(0) rotateZ(0);
        max-height: 600px;
    }
    100%{
        transform:translate3d(0, -10px ,0) scale(.66) rotateX(30deg) rotateY(-20deg) rotateZ(20deg);
        max-height: 300px;
    }
}
.preserve3d-four .item:nth-child(2n+4).hover  {
    -webkit-animation: pv3d-four-action4 .36s ease-in-out 0s forwards;
    animation: pv3d-four-action4 .36s ease-in-out 0s forwards;
    z-index: 4000;
}

@-webkit-keyframes pv3d-four-action4 {
    0%{
        -webkit-transform:translate3d(-15px, -50px ,0) scale(.66) rotateX(30deg) rotateY(-20deg) rotateZ(20deg);
        max-height: 300px;
    }  
    100%{
        -webkit-transform:translate3d(20px,0,300px) scale(.9)  rotateX(0) rotateY(0) rotateZ(0);
        max-height: 600px;
    }
}
@-moz-keyframes pv3d-four-action4 {
    0%{
        -moz-transform:translate3d(-15px, -50px ,0) scale(.66) rotateX(30deg) rotateY(-20deg) rotateZ(20deg);
        max-height: 300px;
    }  
    100%{
        -moz-transform:translate3d(20px,0,300px) scale(.9)  rotateX(0) rotateY(0) rotateZ(0);
        max-height: 600px;
    }
}
@-ms-keyframes pv3d-four-action4 {
    0%{
        -webkit-transform:translate3d(-15px, -50px ,0) scale(.66) rotateX(30deg) rotateY(-20deg) rotateZ(20deg);
        max-height: 300px;
    }  
    100%{
        -webkit-transform:translate3d(20px,0,300px) scale(.9)  rotateX(0) rotateY(0) rotateZ(0);
        max-height: 600px;
    }
}
@-o-keyframes pv3d-four-action4 {
    0%{
        -o-transform:translate3d(-15px, -50px ,0) scale(.66) rotateX(30deg) rotateY(-20deg) rotateZ(20deg);
        max-height: 300px;
    }  
    100%{
        -o-transform:translate3d(20px,0,300px) scale(.9)  rotateX(0) rotateY(0) rotateZ(0);
        max-height: 600px;
    }
}
@keyframes pv3d-four-action4 {
    0%{
        transform:translate3d(-15px, -50px ,0) scale(.66) rotateX(30deg) rotateY(-20deg) rotateZ(20deg);
        max-height: 300px;
    }  
    100%{
        transform:translate3d(20px,0,300px) scale(.9)  rotateX(0) rotateY(0) rotateZ(0);
        max-height: 600px;
    }
}
.preserve3d-four .item:nth-child(2n+4).out  {
    -webkit-animation: pv3d-four-action4-out .36s ease-in-out 0s forwards;
    animation: pv3d-four-action4-out .36s ease-in-out 0s forwards;
    z-index: 1000;
}

@-webkit-keyframes pv3d-four-action4-out {
    0%{
        -webkit-transform:translate3d(20px,0,300px) scale(.9)  rotateX(0) rotateY(0) rotateZ(0);
        max-height: 600px;
    }  
    100%{
        -webkit-transform:translate3d(-15px, -50px ,0) scale(.66) rotateX(30deg) rotateY(-20deg) rotateZ(20deg);
        max-height: 300px;
    }
}
@-moz-keyframes pv3d-four-action4-out {
    0%{
        -moz-transform:translate3d(20px,0,300px) scale(.9)  rotateX(0) rotateY(0) rotateZ(0);
        max-height: 600px;
    }  
    100%{
        -moz-transform:translate3d(-15px, -50px ,0) scale(.66) rotateX(30deg) rotateY(-20deg) rotateZ(20deg);
        max-height: 300px;
    }
}
@-ms-keyframes pv3d-four-action4-out {
    0%{
        -webkit-transform:translate3d(20px,0,300px) scale(.9)  rotateX(0) rotateY(0) rotateZ(0);
        max-height: 600px;
    }  
    100%{
        -webkit-transform:translate3d(-15px, -50px ,0) scale(.66) rotateX(30deg) rotateY(-20deg) rotateZ(20deg);
        max-height: 300px;
    }
}
@-o-keyframes pv3d-four-action4-out {
    0%{
        -o-transform:translate3d(20px,0,300px) scale(.9)  rotateX(0) rotateY(0) rotateZ(0);
        max-height: 600px;
    }  
    100%{
        -o-transform:translate3d(-15px, -50px ,0) scale(.66) rotateX(30deg) rotateY(-20deg) rotateZ(20deg);
        max-height: 300px;
    }
}
@keyframes pv3d-four-action4-out {
    0%{
        transform:translate3d(20px,0,300px) scale(.9)  rotateX(0) rotateY(0) rotateZ(0);
        max-height: 600px;
    }  
    100%{
        transform:translate3d(-15px, -50px ,0) scale(.66) rotateX(30deg) rotateY(-20deg) rotateZ(20deg);
        max-height: 300px;
    }
}

/*------matt pv3d full -------*/
.preserve3d-full .item:nth-child(2n+1)  {
    -webkit-transform:translate3d(0, -40px,0) scale(.66) rotateX(30deg) rotateY(-20deg) rotateZ(20deg);
    -moz-transform:translate3d(0, -40px,0) scale(.66) rotateX(30deg) rotateY(-20deg) rotateZ(20deg);
    -ms-transform:translate3d(0, -40px,0) scale(.66) rotateX(30deg) rotateY(-20deg) rotateZ(20deg);
    -o-transform:translate3d(0, -40px,0) scale(.66) rotateX(30deg) rotateY(-20deg) rotateZ(20deg);
    transform:translate3d(0, -40px,0) scale(.66) rotateX(30deg) rotateY(-20deg) rotateZ(20deg);
    z-index: 5000;

}


.preserve3d-full .item:nth-child(2n+2) {
    -webkit-transform:translate3d(80px, -40px,0) scale(.66) rotateX(30deg) rotateY(-20deg) rotateZ(20deg);
    -moz-transform:translate3d(80px, -40px,0) scale(.66) rotateX(30deg) rotateY(-20deg) rotateZ(20deg);
    -ms-transform:translate3d(80px, -40px,0) scale(.66) rotateX(30deg) rotateY(-20deg) rotateZ(20deg);
    -o-transform:translate3d(80px, -40px,0) scale(.66) rotateX(30deg) rotateY(-20deg) rotateZ(20deg);
    transform:translate3d(80px, -40px,0) scale(.66) rotateX(30deg) rotateY(-20deg) rotateZ(20deg);
    z-index: 4000;
}

.preserve3d-full .item:nth-child(2n+3) {
    -webkit-transform:translate3d(160px, -40px,0) scale(.66) rotateX(30deg) rotateY(-20deg) rotateZ(20deg);
    -moz-transform:translate3d(160px, -40px,0) scale(.66) rotateX(30deg) rotateY(-20deg) rotateZ(20deg);
    -ms-transform:translate3d(160px, -40px,0) scale(.66) rotateX(30deg) rotateY(-20deg) rotateZ(20deg);
    -o-transform:translate3d(160px, -40px,0) scale(.66) rotateX(30deg) rotateY(-20deg) rotateZ(20deg);
    transform:translate3d(160px, -40px,0) scale(.66) rotateX(30deg) rotateY(-20deg) rotateZ(20deg);
    z-index: 3000;
}

.preserve3d-full .item:nth-child(2n+4) {
    -webkit-transform:translate3d(240px, -40px,0) scale(.66) rotateX(30deg) rotateY(-20deg) rotateZ(20deg);
    -moz-transform:translate3d(240px, -40px,0) scale(.66) rotateX(30deg) rotateY(-20deg) rotateZ(20deg);
    -ms-transform:translate3d(240px, -40px,0) scale(.66) rotateX(30deg) rotateY(-20deg) rotateZ(20deg);
    -o-transform:translate3d(240px, -40px,0) scale(.66) rotateX(30deg) rotateY(-20deg) rotateZ(20deg);
    transform:translate3d(240px, -40px,0) scale(.66) rotateX(30deg) rotateY(-20deg) rotateZ(20deg);
    z-index: 2000;
}
.preserve3d-full .item:nth-child(2n+5) {
    -webkit-transform:translate3d(320px, -40px ,0) scale(.66) rotateX(30deg) rotateY(-20deg) rotateZ(20deg);
    -moz-transform:translate3d(320px, -40px,0) scale(.66) rotateX(30deg) rotateY(-20deg) rotateZ(20deg);
    -ms-transform:translate3d(320px, -40px,0) scale(.66) rotateX(30deg) rotateY(-20deg) rotateZ(20deg);
    -o-transform:translate3d(320px, -40px,0) scale(.66) rotateX(30deg) rotateY(-20deg) rotateZ(20deg);
    transform:translate3d(320px, -40px,0) scale(.66) rotateX(30deg) rotateY(-20deg) rotateZ(20deg);
    z-index: 1000;
}


.preserve3d-full .item:nth-child(2n+1).hover  {
    -webkit-animation: pv3d-full-action1 .5s ease-in-out 0s forwards;
    animation: pv3d-full-action1 .5s ease-in-out 0s forwards;

}

@-webkit-keyframes pv3d-full-action1 {
    0%{ 
        -webkit-transform:translate3d(0, -40px,0) scale(.66) rotateX(30deg) rotateY(-20deg) rotateZ(20deg);
        max-height: 300px;
    }
    100%{
        -webkit-transform:translate3d(200px, -80px,300px) scale(.9) rotateX(0) rotateY(0) rotateZ(0);
        max-height: 600px;
    }
}
@-moz-keyframes pv3d-full-action1 {
    0%{ 
        -moz-transform:translate3d(0, -40px,0) scale(.66) rotateX(30deg) rotateY(-20deg) rotateZ(20deg);
        max-height: 300px;
    }
    100%{
        -moz-transform:translate3d(200px, -80px,300px) scale(.9) rotateX(0) rotateY(0) rotateZ(0);
        max-height: 600px;
    }
}
@-ms-keyframes pv3d-full-action1 {
    0%{ 
        -ms-transform:translate3d(0, -40px,0) scale(.66) rotateX(30deg) rotateY(-20deg) rotateZ(20deg);
        max-height: 300px;
    }
    100%{
        -ms-transform:translate3d(200px, -80px,300px) scale(.9) rotateX(0) rotateY(0) rotateZ(0);
        max-height: 600px;
    }
}
@-o-keyframes pv3d-full-action1 {
    0%{ 
        -o-transform:translate3d(0, -40px,0) scale(.66) rotateX(30deg) rotateY(-20deg) rotateZ(20deg);
        max-height: 300px;
    }
    100%{
        -o-transform:translate3d(200px, -80px,300px) scale(.9) rotateX(0) rotateY(0) rotateZ(0);
        max-height: 600px;
    }
}
@keyframes pv3d-full-action1 {
    0%{ 
        transform:translate3d(0, -40px,0) scale(.66) rotateX(30deg) rotateY(-20deg) rotateZ(20deg);
        max-height: 300px;
    }
    100%{
        transform:translate3d(200px, -80px,300px) scale(.9) rotateX(0) rotateY(0) rotateZ(0);
        max-height: 600px;
    }
}

.preserve3d-full .item:nth-child(2n+1).out  {
    -webkit-animation: pv3d-full-action1-out .5s ease-in-out 0s forwards;
    animation: pv3d-full-action1-out .5s ease-in-out 0s forwards;
}

@-webkit-keyframes pv3d-full-action1-out {
    0%{ 
        -webkit-transform:translate3d(200px, -80px,300px) scale(.9) rotateX(0) rotateY(0) rotateZ(0);
        max-height: 600px;
    }
    100%{
        -webkit-transform:translate3d(0, -40px,0) scale(.66) rotateX(30deg) rotateY(-20deg) rotateZ(20deg);
        max-height: 300px;
    }
}
@-moz-keyframes pv3d-full-action1-out {
    0%{ 
        -moz-transform:translate3d(200px, -80px,300px) scale(.9) rotateX(0) rotateY(0) rotateZ(0);
        max-height: 600px;
    }
    100%{
        -moz-transform:translate3d(0, -40px,0) scale(.66) rotateX(30deg) rotateY(-20deg) rotateZ(20deg);
        max-height: 300px;
    }
}
@-ms-keyframes pv3d-full-action1-out {
    0%{ 
        -ms-transform:translate3d(200px, -80px,300px) scale(.9) rotateX(0) rotateY(0) rotateZ(0);
        max-height: 600px;
    }
    100%{
        -ms-transform:translate3d(0, -40px,0) scale(.66) rotateX(30deg) rotateY(-20deg) rotateZ(20deg);
        max-height: 300px;
    }
}
@-o-keyframes pv3d-full-action1-out {
    0%{ 
        -o-transform:translate3d(200px, -80px,300px) scale(.9) rotateX(0) rotateY(0) rotateZ(0);
        max-height: 600px;
    }
    100%{
        -o-transform:translate3d(0, -40px,0) scale(.66) rotateX(30deg) rotateY(-20deg) rotateZ(20deg);
        max-height: 300px;
    }
}
@keyframes pv3d-full-action1-out {
    0%{ 
        transform:translate3d(200px, -80px,300px) scale(.9) rotateX(0) rotateY(0) rotateZ(0);
        max-height: 600px;
    }
    100%{
        transform:translate3d(0, -40px,0) scale(.66) rotateX(30deg) rotateY(-20deg) rotateZ(20deg);
        max-height: 300px;
    }
}

.preserve3d-full .item:nth-child(2n+2).hover  {

    -webkit-animation: pv3d-full-action2 .5s ease-in-out 0s forwards;
    animation: pv3d-full-action2 .5s ease-in-out 0s forwards;
    z-index: 6000;
}

@-webkit-keyframes pv3d-full-action2 {
    0%{
        -webkit-transform:translate3d(80px, -40px ,0) scale(.66) rotateX(30deg) rotateY(-20deg) rotateZ(20deg);
        max-height: 300px;
    } 
    100%{
        -webkit-transform:translate3d(200px, -80px ,300px) scale(.9) rotateX(0) rotateY(0) rotateZ(0);
        max-height: 600px
    }
}
@-moz-keyframes pv3d-full-action2 {
    0%{
        -moz-transform:translate3d(80px, -40px ,0) scale(.66) rotateX(30deg) rotateY(-20deg) rotateZ(20deg);
        max-height: 300px;
    } 
    100%{
        -moz-transform:translate3d(200px, -80px ,300px) scale(.9) rotateX(0) rotateY(0) rotateZ(0);
        max-height: 600px
    }
}
@-ms-keyframes pv3d-full-action2 {
    0%{
        -ms-transform:translate3d(80px, -40px ,0) scale(.66) rotateX(30deg) rotateY(-20deg) rotateZ(20deg);
        max-height: 300px;
    } 
    100%{
        -ms-transform:translate3d(200px, -80px ,300px) scale(.9) rotateX(0) rotateY(0) rotateZ(0);
        max-height: 600px
    }
}
@-o-keyframes pv3d-full-action2 {
    0%{
        -o-transform:translate3d(80px, -40px ,0) scale(.66) rotateX(30deg) rotateY(-20deg) rotateZ(20deg);
        max-height: 300px;
    } 
    100%{
        -o-transform:translate3d(200px, -80px ,300px) scale(.9) rotateX(0) rotateY(0) rotateZ(0);
        max-height: 600px
    }
}
@keyframes pv3d-full-action2 {
    0%{
        transform:translate3d(80px, -40px ,0) scale(.66) rotateX(30deg) rotateY(-20deg) rotateZ(20deg);
        max-height: 300px;
    } 
    100%{
        transform:translate3d(200px, -80px ,300px) scale(.9) rotateX(0) rotateY(0) rotateZ(0);
        max-height: 600px
    }
}
.preserve3d-full .item:nth-child(2n+2).out  {

    -webkit-animation: pv3d-full-action2-out .5s ease-in-out 0s forwards;
    animation: pv3d-full-action2-out .5s ease-in-out 0s forwards;
    z-index: 4000;
}

@-webkit-keyframes pv3d-full-action2-out {
    0%{
        -webkit-transform:translate3d(200px, -80px ,300px) scale(.9) rotateX(0) rotateY(0) rotateZ(0);
        max-height: 600px;
    } 
    100%{
        -webkit-transform:translate3d(80px, -40px ,0) scale(.66) rotateX(30deg) rotateY(-20deg) rotateZ(20deg);
        max-height: 300px;
    }
}
@-moz-keyframes pv3d-full-action2-out {
    0%{
        -moz-transform:translate3d(200px, -80px ,300px) scale(.9) rotateX(0) rotateY(0) rotateZ(0);
        max-height: 600px;
    } 
    100%{
        -moz-transform:translate3d(80px, -40px ,0) scale(.66) rotateX(30deg) rotateY(-20deg) rotateZ(20deg);
        max-height: 300px;
    }
}
@-ms-keyframes pv3d-full-action2-out {
    0%{
        -ms-transform:translate3d(200px, -80px ,300px) scale(.9) rotateX(0) rotateY(0) rotateZ(0);
        max-height: 600px;
    } 
    100%{
        -ms-transform:translate3d(80px, -40px ,0) scale(.66) rotateX(30deg) rotateY(-20deg) rotateZ(20deg);
        max-height: 300px;
    }
}
@-o-keyframes pv3d-full-action2-out {
    0%{
        -o-transform:translate3d(200px, -80px ,300px) scale(.9) rotateX(0) rotateY(0) rotateZ(0);
        max-height: 600px;
    } 
    100%{
        -o-transform:translate3d(80px, -40px ,0) scale(.66) rotateX(30deg) rotateY(-20deg) rotateZ(20deg);
        max-height: 300px;
    }
}
@keyframes pv3d-full-action2-out {
    0%{
        transform:translate3d(200px, -80px ,300px) scale(.9) rotateX(0) rotateY(0) rotateZ(0);
        max-height: 600px;
    } 
    100%{
        transform:translate3d(80px, -40px ,0) scale(.66) rotateX(30deg) rotateY(-20deg) rotateZ(20deg);
        max-height: 300px;
    }
}
.preserve3d-full .item:nth-child(2n+3).hover  {
    -webkit-animation: pv3d-full-action3 .5s ease-in-out 0s forwards;
    animation: pv3d-full-action3 .5s ease-in-out 0s forwards;
    z-index: 6000;
}

@-webkit-keyframes pv3d-full-action3 {
    0%{
        -webkit-transform:translate3d(160px, -40px ,0) scale(.66) rotateX(30deg) rotateY(-20deg) rotateZ(20deg);
        max-height: 300px;
    }
    100%{
        -webkit-transform:translate3d(200px, -80px ,300px) scale(.9) rotateX(0) rotateY(0) rotateZ(0);
        max-height: 600px;
    }
}
@-moz-keyframes pv3d-full-action3 {
    0%{
        -moz-transform:translate3d(160px, -40px ,0) scale(.66) rotateX(30deg) rotateY(-20deg) rotateZ(20deg);
        max-height: 300px;
    }
    100%{
        -moz-transform:translate3d(200px, -80px ,300px) scale(.9) rotateX(0) rotateY(0) rotateZ(0);
        max-height: 600px;
    }
}
@-ms-keyframes pv3d-full-action3 {
    0%{
        -ms-transform:translate3d(160px, -40px ,0) scale(.66) rotateX(30deg) rotateY(-20deg) rotateZ(20deg);
        max-height: 300px;
    }
    100%{
        -ms-transform:translate3d(200px, -80px ,300px) scale(.9) rotateX(0) rotateY(0) rotateZ(0);
        max-height: 600px;
    }
}
@-o-keyframes pv3d-full-action3 {
    0%{
        -o-transform:translate3d(160px, -40px ,0) scale(.66) rotateX(30deg) rotateY(-20deg) rotateZ(20deg);
        max-height: 300px;
    }
    100%{
        -o-transform:translate3d(200px, -80px ,300px) scale(.9) rotateX(0) rotateY(0) rotateZ(0);
        max-height: 600px;
    }
}
@keyframes pv3d-full-action3 {
    0%{
        transform:translate3d(160px, -40px ,0) scale(.66) rotateX(30deg) rotateY(-20deg) rotateZ(20deg);
        max-height: 300px;
    }
    100%{
        transform:translate3d(200px, -80px ,300px) scale(.9) rotateX(0) rotateY(0) rotateZ(0);
        max-height: 600px;
    }
}

.preserve3d-full .item:nth-child(2n+3).out  {
    -webkit-animation: pv3d-full-action3-out .5s ease-in-out 0s forwards;
    animation: pv3d-full-action3-out .5s ease-in-out 0s forwards;
    z-index: 3000;
}

@-webkit-keyframes pv3d-full-action3-out {
    0%{
        -webkit-transform:translate3d(200px, -80px ,300px) scale(.9) rotateX(0) rotateY(0) rotateZ(0);
        max-height: 600px;
    }
    100%{
        -webkit-transform:translate3d(160px, -40px ,0) scale(.66) rotateX(30deg) rotateY(-20deg) rotateZ(20deg);
        max-height: 300px;
    }
}
@-moz-keyframes pv3d-full-action3-out {
    0%{
        -moz-transform:translate3d(200px, -80px ,300px) scale(.9) rotateX(0) rotateY(0) rotateZ(0);
        max-height: 600px;
    }
    100%{
        -moz-transform:translate3d(160px, -40px ,0) scale(.66) rotateX(30deg) rotateY(-20deg) rotateZ(20deg);
        max-height: 300px;
    }
}
@-ms-keyframes pv3d-full-action3-out {
    0%{
        -ms-transform:translate3d(200px, -80px ,300px) scale(.9) rotateX(0) rotateY(0) rotateZ(0);
        max-height: 600px;
    }
    100%{
        -ms-transform:translate3d(160px, -40px ,0) scale(.66) rotateX(30deg) rotateY(-20deg) rotateZ(20deg);
        max-height: 300px;
    }
}
@-o-keyframes pv3d-full-action3-out {
    0%{
        -o-transform:translate3d(200px, -80px ,300px) scale(.9) rotateX(0) rotateY(0) rotateZ(0);
        max-height: 600px;
    }
    100%{
        -o-transform:translate3d(160px, -40px ,0) scale(.66) rotateX(30deg) rotateY(-20deg) rotateZ(20deg);
        max-height: 300px;
    }
}
@keyframes pv3d-full-action3-out {
    0%{
        transform:translate3d(200px, -80px ,300px) scale(.9) rotateX(0) rotateY(0) rotateZ(0);
        max-height: 600px;
    }
    100%{
        transform:translate3d(160px, -40px ,0) scale(.66) rotateX(30deg) rotateY(-20deg) rotateZ(20deg);
        max-height: 300px;
    }
}

.preserve3d-full .item:nth-child(2n+4).hover  {
    -webkit-animation: pv3d-full-action4 .5s ease-in-out 0s forwards;
    animation: pv3d-full-action4 .5s ease-in-out 0s forwards;
    z-index: 6000;
}

@-webkit-keyframes pv3d-full-action4 {
    0%{
        -webkit-transform:translate3d(240px, -40px ,0) scale(.66) rotateX(30deg) rotateY(-20deg) rotateZ(20deg);
        max-height: 300px;
    }
       
    100%{
        -webkit-transform:translate3d(200px, -80px ,300px) scale(.9) rotateX(0) rotateY(0) rotateZ(0);
        max-height: 600px;
    }
}
@-moz-keyframes pv3d-full-action4 {
    0%{
        -moz-transform:translate3d(240px, -40px ,0) scale(.66) rotateX(30deg) rotateY(-20deg) rotateZ(20deg);
        max-height: 300px;
    }
       
    100%{
        -moz-transform:translate3d(200px, -80px ,300px) scale(.9) rotateX(0) rotateY(0) rotateZ(0);
        max-height: 600px;
    }
}
@-ms-keyframes pv3d-full-action4 {
    0%{
        -ms-transform:translate3d(240px, -40px ,0) scale(.66) rotateX(30deg) rotateY(-20deg) rotateZ(20deg);
        max-height: 300px;
    }
       
    100%{
        -ms-transform:translate3d(200px, -80px ,300px) scale(.9) rotateX(0) rotateY(0) rotateZ(0);
        max-height: 600px;
    }
}
@-o-keyframes pv3d-full-action4 {
    0%{
        -o-transform:translate3d(240px, -40px ,0) scale(.66) rotateX(30deg) rotateY(-20deg) rotateZ(20deg);
        max-height: 300px;
    }
       
    100%{
        -o-transform:translate3d(200px, -80px ,300px) scale(.9) rotateX(0) rotateY(0) rotateZ(0);
        max-height: 600px;
    }
}
@keyframes pv3d-full-action4 {
    0%{
        transform:translate3d(240px, -40px ,0) scale(.66) rotateX(30deg) rotateY(-20deg) rotateZ(20deg);
        max-height: 300px;
    }
       
    100%{
        transform:translate3d(200px, -80px ,300px) scale(.9) rotateX(0) rotateY(0) rotateZ(0);
        max-height: 600px;
    }
}

.preserve3d-full .item:nth-child(2n+4).out  {
    -webkit-animation: pv3d-full-action4-out .5s ease-in-out 0s forwards;
    animation: pv3d-full-action4-out .5s ease-in-out 0s forwards;
    z-index: 2000;
}

@-webkit-keyframes pv3d-full-action4-out {
    0%{
        -webkit-transform:translate3d(200px, -80px ,300px) scale(.9) rotateX(0) rotateY(0) rotateZ(0);
        max-height: 600px;
    }
       
    100%{
        -webkit-transform:translate3d(240px, -40px ,0) scale(.66) rotateX(30deg) rotateY(-20deg) rotateZ(20deg);
        max-height: 300px;
    }
}
@-moz-keyframes pv3d-full-action4-out {
    0%{
        -moz-transform:translate3d(200px, -80px ,300px) scale(.9) rotateX(0) rotateY(0) rotateZ(0);
        max-height: 600px;
    }
       
    100%{
        -moz-transform:translate3d(240px, -40px ,0) scale(.66) rotateX(30deg) rotateY(-20deg) rotateZ(20deg);
        max-height: 300px;
    }
}
@-ms-keyframes pv3d-full-action4-out {
    0%{
        -ms-transform:translate3d(200px, -80px ,300px) scale(.9) rotateX(0) rotateY(0) rotateZ(0);
        max-height: 600px;
    }
       
    100%{
        -ms-transform:translate3d(240px, -40px ,0) scale(.66) rotateX(30deg) rotateY(-20deg) rotateZ(20deg);
        max-height: 300px;  
    }
}
@-o-keyframes pv3d-full-action4-out {
    0%{
        -o-transform:translate3d(200px, -80px ,300px) scale(.9) rotateX(0) rotateY(0) rotateZ(0);
        max-height: 600px;
    }
       
    100%{
        -o-transform:translate3d(240px, -40px ,0) scale(.66) rotateX(30deg) rotateY(-20deg) rotateZ(20deg);
        max-height: 300px;
    }
}
@keyframes pv3d-full-action4-out {
    0%{
        transform:translate3d(200px, -80px ,300px) scale(.9) rotateX(0) rotateY(0) rotateZ(0);
        max-height: 600px;
    }
       
    100%{
        transform:translate3d(240px, -40px ,0) scale(.66) rotateX(30deg) rotateY(-20deg) rotateZ(20deg);
        max-height: 300px;
    }
}

.preserve3d-full .item:nth-child(2n+5).hover  {

    -webkit-animation: pv3d-full-action5 .5s ease-in-out 0s forwards;
    animation: pv3d-full-action5 .5s ease-in-out 0s forwards;
    z-index: 6000;
}

@-webkit-keyframes pv3d-full-action5 {
    0%{
        -webkit-transform:translate3d(320px, -40px ,0) scale(.66) rotateX(30deg) rotateY(-20deg) rotateZ(20deg);
        max-height: 300px;
    }
       
    100%{
        -webkit-transform:translate3d(200px, -80px ,300px) scale(.9) rotateX(0) rotateY(0) rotateZ(0);
        max-height: 600px;
    }
}
@-moz-keyframes pv3d-full-action5 {
    0%{
        -moz-transform:translate3d(320px, -40px ,0) scale(.66) rotateX(30deg) rotateY(-20deg) rotateZ(20deg);
        max-height: 300px;
    }
       
    100%{
        -moz-transform:translate3d(200px, -80px ,300px) scale(.9) rotateX(0) rotateY(0) rotateZ(0);
        max-height: 600px;
    }
}
@-ms-keyframes pv3d-full-action5 {
    0%{
        -ms-transform:translate3d(320px, -40px ,0) scale(.66) rotateX(30deg) rotateY(-20deg) rotateZ(20deg);
        max-height: 300px;
    }
       
    100%{
        -ms-transform:translate3d(200px, -80px ,300px) scale(.9) rotateX(0) rotateY(0) rotateZ(0);
        max-height: 600px;
    }
}
@-o-keyframes pv3d-full-action5 {
    0%{
        -o-transform:translate3d(320px, -40px ,0) scale(.66) rotateX(30deg) rotateY(-20deg) rotateZ(20deg);
        max-height: 300px;
    }
       
    100%{
        -o-transform:translate3d(200px, -80px ,300px) scale(.9) rotateX(0) rotateY(0) rotateZ(0);
        max-height: 600px;
    }
}
@keyframes pv3d-full-action5 {
    0%{
        transform:translate3d(320px, -40px ,0) scale(.66) rotateX(30deg) rotateY(-20deg) rotateZ(20deg);
        max-height: 300px;
    }
       
    100%{
        transform:translate3d(200px, -80px ,300px) scale(.9) rotateX(0) rotateY(0) rotateZ(0);
        max-height: 600px;
    }
}

.preserve3d-full .item:nth-child(2n+5).out  {

    -webkit-animation: pv3d-full-action5-out .5s ease-in-out 0s forwards;
    animation: pv3d-full-action5-out .5s ease-in-out 0s forwards;
    z-index: 1000;
}

@-webkit-keyframes pv3d-full-action5-out {
    0%{
        -webkit-transform:translate3d(200px, -80px ,300px) scale(.9) rotateX(0) rotateY(0) rotateZ(0);
        max-height: 600px;
    }
       
    100%{
        -webkit-transform:translate3d(320px, -40px ,0) scale(.66) rotateX(30deg) rotateY(-20deg) rotateZ(20deg);
        max-height: 300px;
    }
}
@-moz-keyframes pv3d-full-action5-out {
    0%{
        -moz-transform:translate3d(200px, -80px ,300px) scale(.9) rotateX(0) rotateY(0) rotateZ(0);
        max-height: 600px;
    }
       
    100%{
        -moz-transform:translate3d(320px, -40px ,0) scale(.66) rotateX(30deg) rotateY(-20deg) rotateZ(20deg);
        max-height: 300px;
    }
}
@-ms-keyframes pv3d-full-action5-out {
    0%{
        -ms-transform:translate3d(200px, -80px ,300px) scale(.9) rotateX(0) rotateY(0) rotateZ(0);
        max-height: 600px;
    }
       
    100%{
        -ms-transform:translate3d(320px, -40px ,0) scale(.66) rotateX(30deg) rotateY(-20deg) rotateZ(20deg);
        max-height: 300px;
    }
}
@-o-keyframes pv3d-full-action5-out {
    0%{
        -o-transform:translate3d(200px, -80px ,300px) scale(.9) rotateX(0) rotateY(0) rotateZ(0);
        max-height: 600px;
    }
       
    100%{
        -o-transform:translate3d(320px, -40px ,0) scale(.66) rotateX(30deg) rotateY(-20deg) rotateZ(20deg);
        max-height: 300px; 
    }
}
@keyframes pv3d-full-action5-out {
    0%{
        transform:translate3d(200px, -80px ,300px) scale(.9) rotateX(0) rotateY(0) rotateZ(0);
        max-height: 600px;
    }
       
    100%{
        transform:translate3d(320px, -40px ,0) scale(.66) rotateX(30deg) rotateY(-20deg) rotateZ(20deg);
        max-height: 300px;
    }
}



/*help animate*/
.help-list li a.animate {
    opacity: 1;
    /*-webkit-animation-name:'help-item';
    -webkit-animation-duration: .4s;
    -webkit-animation-delay: 1s;
    -webkit-animation-timing-function: ease-in-out;
    -webkit-animation-iteration-count: 1;
    

    animation-name:'help-item';
    animation-duration: .4s;
    animation-delay: 1s;
    animation-timing-function: ease-in-out; 
    animation-iteration-count: 1;*/

    -webkit-animation: help-item .4s ease-in-out 0s forwards;
    animation: help-item .4s ease-in-out 0s forwards;
} 

@-webkit-keyframes help-item {
    0% {width: 54px; height: 54px; background-size: 54px;}
    100% {width: 80px; height: 80px; background-size: 80px;}
}
@-moz-keyframes help-item {
    0% {width: 54px; height: 54px; background-size: 54px;}
    100% {width: 80px; height: 80px; background-size: 80px;}
}
@-ms-keyframes help-item {
    0% {width: 54px; height: 54px; background-size: 54px;}
    100% {width: 80px; height: 80px; background-size: 80px;}
}
@-o-keyframes help-item {
    0% {width: 54px; height: 54px; background-size: 54px;}
    100% {width: 80px; height: 80px; background-size: 80px;}
}
@keyframes help-item {
    0% {width: 54px; height: 54px; background-size: 54px;}
    100% {width: 80px; height: 80px; background-size: 80px;}
}