.banner .contentInfo .sub {
    animation: sub .5s ease-in-out 0s both;
    -moz-animation: sub .5s ease-in-out 0s both;
    -webkit-animation: sub .5s ease-in-out 0s both;
    -o-animation: sub .5s ease-in-out 0s both;
}

@keyframes sub {
    0% {
        height: 0px;
    }
    100% {
        height: 120px;
    }
}

@-moz-keyframes sub {
    0% {
        height: 0px;
    }
    100% {
        height: 120px;
    }
}

@-webkit-keyframes sub {
    0% {
        height: 0px;
    }
    100% {
        height: 120px;
    }
}

@-o-keyframes sub {
    0% {
        height: 0px;
    }
    100% {
        height: 120px;
    }
}

.banner .contentInfo .quan {
    animation: quan .2s ease-in-out .5s both;
    -moz-animation: quan .2s ease-in-out .5s both;
    -webkit-animation: quan .2s ease-in-out .5s both;
    -o-animation: quan .2s ease-in-out .5s both;
}

@keyframes quan {
    0% {
        transform: scale(0);
    }
    100% {
        transform: scale(1);
    }
}

@-moz-keyframes quan {
    0% {
        -moz-transform: scale(0);
    }
    100% {
        -moz-transform: scale(1);
    }
}

@-webkit-keyframes quan {
    0% {
        -webkit-transform: scale(0);
    }
    100% {
        -webkit-transform: scale(1);
    }
}

@-o-keyframes quan {
    0% {
        -o-transform: scale(0);
    }
    100% {
        -o-transform: scale(1);
    }
}

.banner .contentInfo .title {
    animation: tranx .8s ease-in-out .5s both;
    -moz-animation: tranx .8s ease-in-out .5s both;
    -webkit-animation: tranx .8s ease-in-out .5s both;
    -o-animation: tranx .8s ease-in-out .5s both;
}

.banner .contentInfo .info {
    animation: tranx .8s ease-in-out .7s both;
    -moz-animation: tranx .8s ease-in-out .7s both;
    -webkit-animation: tranx .8s ease-in-out .7s both;
    -o-animation: tranx .8s ease-in-out .7s both;
}

.banner .contentInfo .btn {
    animation: tranx .8s ease-in-out .9s both;
    -moz-animation: tranx .8s ease-in-out .9s both;
    -webkit-animation: tranx .8s ease-in-out .9s both;
    -o-animation: tranx .8s ease-in-out .9s both;
}

@keyframes tranx {
    0% {
        transform: translateX(-700px);
    }
    100% {
        transform: translateX(0);
    }
}

@-moz-keyframes tranx {
    0% {
        -moz-transform: translateX(-700px);
    }
    100% {
        -moz-transform: translateX(0);
    }
}

@-webkit-keyframes tranx {
    0% {
        -webkit-transform: translateX(-700px);
    }
    100% {
        -webkit-transform: translateX(0);
    }
}

@-o-keyframes tranx {
    0% {
        -o-transform: translateX(-700px);
    }
    100% {
        -o-transform: translateX(0);
    }
}

@keyframes bannerNavChildOn {
    0% {
        background: #fff;
        transform: scale(1);
    }
    50% {
        transform: scale(0);
    }
    100% {
        background: #000;
        transform: scale(1);
    }
}

@-moz-keyframes bannerNavChildOn {
    0% {
        background: #fff;
        -moz-transform: scale(1);
    }
    50% {
        transform: scale(0);
    }
    100% {
        background: #000;
        -moz-transform: scale(1);
    }
}

@-webkit-keyframes bannerNavChildOn {
    0% {
        background: #fff;
        -webkit-transform: scale(1);
    }
    50% {
        transform: scale(0);
    }
    100% {
        background: #000;
        -webkit-transform: scale(1);
    }
}

@-o-keyframes bannerNavChildOn {
    0% {
        background: #fff;
        -o-transform: scale(1);
    }
    50% {
        transform: scale(0);
    }
    100% {
        background: #000;
        -o-transform: scale(1);
    }
}