﻿/*s0===================*/

/*s1==================================*/

.s1.active .left,
.s3.active .left,
.s5.active .left{
    left: 0;
    -webkit-transition: all 0.8s;
    -moz-transition: all 0.8s;
    -ms-transition: all 0.8s;
    -o-transition: all 0.8s;
    transition: all 0.8s;
}
.s1 .left,
.s3 .left,
.s5 .left{
    left: -9999px;
    -webkit-transition-delay: 0.7s;
    -moz-transition-delay: 0.7s;
    -ms-transition-delay: 0.7s;
    -o-transition-delay: 0.7s;
    transition-delay: 0.7s;
}
/*===============================*/
.s1 .right .pao1,
.s1 .right .pao2,
.s1 .right .man,
.s4 .left .icon1,
.s4 .left  .icon2,
.s4 .left  .icon3,
.s4 .left  .icon4,
.s4 .left  .icon5,
.s5 .right .man5
{
    -webkit-transition: all 0.6s;
    -moz-transition: all 0.6s;
    -ms-transition: all 0.6s;
    -o-transition: all 0.6s;
    transition: all 0.6s;
    -webkit-transform: scale(0.01, 0.01);
    -moz-transform: scale(0.01, 0.01);
    -ms-transform: scale(0.01, 0.01);
    -o-transform: scale(0.01, 0.01);
    transform: scale(0.01, 0.01);
}
.s1.active .right .pao1,
.s1.active .right .pao2,
.s1.active .right .man,
.s4.active .left  .icon1,
.s4.active .left  .icon2,
.s4.active .left  .icon3,
.s4.active .left  .icon4,
.s4.active .left  .icon5,
.s5.active .right .man5
{
    -webkit-transform: scale(1, 1);
    -moz-transform: scale(1, 1);
    -ms-transform: scale(1, 1);
    -o-transform: scale(1, 1);
    transform: scale(1, 1);


}
.s1.active .right .pao1{
    -webkit-transition-delay: 0.8s;
    -moz-transition-delay:0.8s;
    -ms-transition-delay: 0.8s;
    -o-transition-delay: 0.8s;
    transition-delay: 0.8s;

}
.s1.active .right .pao2{
    -webkit-transition-delay: 1s;
    -moz-transition-delay: 1s;
    -ms-transition-delay: 1s;
    -o-transition-delay: 1s;
    transition-delay: 1s;

}
/*================*/
.s1 .right .man{
    -webkit-transform: scale(2.1, 0.0001);
    -moz-transform: scale(2.1, 0.0001);
    -ms-transform: scale(2.1, 0.0001);
    -o-transform: scale(2.1, 0.0001);
    transform: scale(2.1, 0.0001);
}
.s1.active .right .man{
    -webkit-transform: scale(1, 1);
    -moz-transform: scale(1, 1);
    -ms-transform: scale(1, 1);
    -o-transform: scale(1, 1);
    transform: scale(1, 1);


}
.s1.active .right .man{
    -webkit-transition-delay:0.8s;
    -moz-transition-delay: 0.8s;
    -ms-transition-delay: 0.8s;
    -o-transition-delay: 0.8s;
    transition-delay: 0.8s;
}
/*s2===============================*/
.s2.active .right,
.s4.active .right,
.s6.active .right{
    right: 0;
    -webkit-transition: all 0.6s;
    -moz-transition: all 0.6s;
    -ms-transition: all 0.6s;
    -o-transition: all 0.6s;
    transition: all 0.6s;
    -webkit-transition-delay:0.6s;
    -moz-transition-delay: 0.6s;
    -ms-transition-delay: 0.6s;
    -o-transition-delay: 0.6s;
    transition-delay: 0.6s;
}
/*=================*/
.s2 .right,
.s4 .right,
.s6 .right{
    right: -9999px;


}
.s2.active .right {
}
.s2.active .right,
.s4.active .right,
.s6.active .right{
    right: 0;
    -webkit-transition: all 0.6s;
    -moz-transition: all 0.6s;
    -ms-transition: all 0.6s;
    -o-transition: all 0.6s;
    transition: all 0.6s;
    -webkit-transition-delay:0.6s;
    -moz-transition-delay: 0.6s;
    -ms-transition-delay: 0.6s;
    -o-transition-delay: 0.6s;
    transition-delay: 0.6s;
}

.s3 .right .runman{
    left: -2222px;
}
.s3.active .right .runman{
    left: 0;
    -webkit-transition:all 0.4s 0.7s;
    -moz-transition:all 0.4s 0.7s;
    -ms-transition:all 0.4s 0.7s;
    -o-transition:all 0.4s 0.7s;
    transition:all  0.4s 0.7s;
}
.s3 .right .file{
    left:900%;

}
.s3.active .right .file{
    left: 0;
    -webkit-transition:all 0.9s 0.9s;
    -moz-transition:all 0.9s 0.9s;
    -ms-transition:all 0.9s 0.9;
    -o-transition:all 0.9s 0.9s;
    transition:all  0.39s 0.9s;
    bottom: 0;
}


.s4 .left .name{
    bottom: -900%;

}
.s4.active .left .name{
    bottom: 0;
    -webkit-transition:all 0.6s 0.9s;
    -moz-transition:all 0.6s 0.9s;
    -ms-transition:all 0.6s 0.9;
    -o-transition:all 0.6s 0.9s;
    transition:all  0.6s 0.9s;
}
.s4.active .left .icon1 {
    -webkit-transition-delay: 1.4s;
    -moz-transition-delay: 1.4s;
    -ms-transition-delay: 1.4s;
    -o-transition-delay: 1.4s;
    transition-delay: 1.4s;
}
.s4.active .left  .icon2 {
    -webkit-transition-delay: 1.8s;
    -moz-transition-delay: 1.8s;
    -ms-transition-delay: 1.8s;
    -o-transition-delay: 1.8s;
    transition-delay: 1.8s;
}
.s4.active .left  .icon3 {
    -webkit-transition-delay: 2.2s;
    -moz-transition-delay: 2.2s;
    -ms-transition-delay: 2.2s;
    -o-transition-delay: 2.2s;
    transition-delay: 2.2s;
}
.s4.active .left  .icon4 {
    -webkit-transition-delay: 2.5s;
    -moz-transition-delay: 2.5s;
    -ms-transition-delay: 2.5s;
    -o-transition-delay: 2.5s;
    transition-delay: 2.5s;
}
.s4.active .left  .icon5 {
    -webkit-transition-delay: 2.6s;
    -moz-transition-delay: 2.6s;
    -ms-transition-delay: 2.6s;
    -o-transition-delay: 2.6s;
    transition-delay: 2.6s;
}
.s4.active .left  .icon1,
.s4.active .left  .icon2,
.s4.active .left  .icon3,
.s4.active .left  .icon4,
.s4.active .left  .icon5{
    transition-duration: 0.3s;
    -webkit-transition-duration: 0.3s;
    -moz-transition-duration: 0.3s;
    -ms-transition-duration: 0.3s;
    -o-transition-duration: 0.3s;
    transition-duration: 0.3s;
}