@keyframes iTranslate {
    0% {
        transform: translateY(-40px);
        opacity: 0;
    }

    50% {
        transform: translateY(10px);
    }

    100% {
        transform: translateY(0px);
        opacity: 1;
    }
}

@-moz-keyframes iTranslate {
    0% {
        -moz-transform: translateY(-40px);
        opacity: 0;
    }

    50% {
        -moz-transform: translateY(10px);
    }

    100% {
        -moz-transform: translateY(0px);
        opacity: 1;
    }
}

@-webkit-keyframes iTranslate {
    0% {
        -webkit-transform: translateY(-40px);
        opacity: 0;
    }

    50% {
        -webkit-transform: translateY(10px);
    }

    100% {
        -webkit-transform: translateY(0px);
        opacity: 1;
    }
}

@-o-keyframes iTranslate {
    0% {
        -o-transform: translateY(-40px);
        opacity: 0;
    }

    50% {
        -o-transform: translateY(10px);
    }

    100% {
        -o-transform: translateY(0px);
        opacity: 1;
    }
}





@keyframes besc1 {
    0% {
        transform: translateX(-40px);
        opacity: 0;
    }

    50% {
        transform: translateX(10px);
    }

    100% {
        transform: translateX(0px);
        opacity: 1;
    }
}

@-moz-keyframes besc1 {
    0% {
        -moz-transform: translateX(-40px);
        opacity: 0;
    }

    50% {
        -moz-transform: translateX(10px);
    }

    100% {
        -moz-transform: translateX(0px);
        opacity: 1;
    }
}

@-webkit-keyframes besc1 {
    0% {
        -webkit-transform: translateX(-40px);
        opacity: 0;
    }

    50% {
        -webkit-transform: translateX(10px);
    }

    100% {
        -webkit-transform: translateX(0px);
        opacity: 1;
    }
}

@-o-keyframes besc1 {
    0% {
        -o-transform: translateX(-40px);
        opacity: 0;
    }

    50% {
        -o-transform: translateX(10px);
    }

    100% {
        -o-transform: translateX(0px);
        opacity: 1;
    }
}




.i-ban ul {
    /*width: 1920px;*/
	width:100%;
    height: 640px;
    position: relative;
}

/*.ele1 {
    -webkit-animation: iTranslate 0.5s ease-out forwards;
    -moz-animation: iTranslate 0.5s ease-out forwards;
    -o-animation: iTranslate 0.5s ease-out forwards;
    animation: iTranslate 0.5s ease-out forwards;
}*/
.i-ban li.active .ele1 {
    -webkit-animation: iTranslate 0.5s ease-out forwards;
    -moz-animation: iTranslate 0.5s ease-out forwards;
    -o-animation: iTranslate 0.5s ease-out forwards;
    animation: iTranslate 0.5s ease-out forwards;
}

.i-ban li.active .ele2 {
    -webkit-animation: iTranslate 1.5s ease-out forwards;
    -moz-animation: iTranslate 1.5s ease-out forwards;
    -o-animation: iTranslate 1.5s ease-out forwards;
    animation: iTranslate 1.5s ease-out forwards;
    animation-delay: 0.5s;
    -webkit-animation-delay: 0.5s;
}

.i-ban li.active .ele3 {
    -webkit-animation: besc1 1.5s ease-out forwards;
    -moz-animation: besc1 1.5s ease-out forwards;
    -o-animation: besc1 1.5s ease-out forwards;
    animation: besc1 1.5s ease-out forwards;
    animation-delay: 0.5s;
    -webkit-animation-delay: 0.5s;
}

.ele4 {

  -webkit-animation: besc1 1.5s ease-out forwards;
    -moz-animation: besc1 1.5s ease-out forwards;
    -o-animation: besc1 1.5s ease-out forwards;
    animation: besc1 1.5s ease-out forwards;
    animation-delay: 0.5s;
    -webkit-animation-delay: 0.5s;
}


.i-btns-item.active {
    background-color: #0091ea;
}

.i-btns-item {
    width: 47px;
    height: 6px;
    background-color: #000;
    filter: alpha(opacity=50);
    opacity: 0.5;
    float: left;
    margin-left: 7px;
    cursor: pointer;
}

.i-btns {
    height: 6px;
    position: absolute;
    right: 50%;
    bottom: 90px;
    z-index: 1;
}

.i-ban li {
    width: 1920px;
    height: 640px;
    position: absolute;
    left: 0px;
    top: 0px;
    display: none;
    -webkit-perspective: 500;
    -moz-perspective: 500;
    -o-perspective: 500;
    perspective: 500;
}