/* 标题 */
.active .title{
    animation: title1 1s forwards;
}

@keyframes title1 {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}
/* 第一屏 */
.active .opone{
    animation: title2 1s forwards;
}
@keyframes title2 {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}
/* 第二屏 */
.active .newleft{
    animation: new1 1s forwards;
}
@keyframes new1 {
    from {
        left: -100%;
        opacity: 0;
    }

    to {
        left: 0;
        opacity: 1;
    }
}

.active .newright{
    animation: new2 1s forwards;
}
@keyframes new2 {
    from {
        right: -100%;
        opacity: 0;
    }

    to {
        right: 0;
        opacity: 1;
    }
}
/* 第三屏 */
.active .problock{
    animation: protop 1s forwards;
}
@keyframes protop {
    from {
        top: 100%;
        opacity: 0;
        transform: translateY(0%);
    }


    to {
        top: 50%;
        opacity: 1;
    }
}
/* 第四屏 */
.active .media{
    animation: meright 1s forwards;
}
@keyframes meright {
    from {
        width: 0;
        opacity: 0;
    }

    to {
       width: 100%;
       opacity: 1;
    }
}
/* 第五屏 */
.active .serac{
    animation: setop 1s forwards;
    position: relative;
}
@keyframes setop {
    from {
       bottom: -100px;
       opacity: 0;
    }

    to {
     bottom: 0px;
     opacity: 1;
    }
}
/* 第六屏 */
.active .hy{
    animation: hybottom 1s forwards;
    position: relative;
}
.active .bottom{
    animation: hybottom 1s forwards;
    position: relative;
}

@keyframes hybottom {
    from {
       bottom: -100px;
       opacity: 0;
    }

    to {
     bottom: 0px;
     opacity: 1;
    }
}

.active .edu{
    animation: hyright 1s forwards;
    position: relative;
}
@keyframes hyright {
    from {
       right: -200px;
       opacity: 0;
    }

    to {
     right: 0px;
     opacity: 1;
    }
}


/* 新闻详情 */
.newdecon .leftnav{
    animation: new1 1s forwards;
    position: relative;
}
.newdecon .newright{
    animation: new2 1s forwards;
    position: relative;
}