/* ----------扔帽子 start----------- */
.animation-box_cap {
    position: fixed;
    bottom: 0px;
    width: 1170px;
    left: 50%;
    transform: translateX(-50%);
    height: 100px;
    overflow: hidden;
    cursor: pointer;
    margin-left: -15px;
}

.animation-box_cap.active {
    animation: animationbox 1s linear;
    animation-fill-mode: forwards;
}

.animation-box_cap.back {
    animation: animationbox-back 1s linear;
    animation-fill-mode: backwards;
    animation-delay: 1s;
}

@keyframes animationbox {
    0% {
        height: 100px;
    }

    100% {
        height: 400px;
    }
}

@keyframes animationbox-back {
    0% {
        height: 400px;
    }

    100% {
        height: 100px;
    }
}

.animation-box_cap .school {
    position: absolute;
    bottom: 0;
    z-index: 9;
    width: 1170px;
}

/* 背景动画 */
.animation-box_cap .bg {
    position: absolute;
    z-index: 0;
    bottom: 0;
    transform: translateY(100%);
}

.animation-box_cap.active .bg {
    animation: animation-bg 1s linear;
    animation-fill-mode: forwards;
}

.animation-box_cap.back .bg {
    animation: animation-bg-back 1s linear;
    animation-fill-mode: forwards;
}

@keyframes animation-bg {
    0% {
        transform: translateY(100%);
    }

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

@keyframes animation-bg-back {
    0% {
        transform: translateY(0px);
    }

    100% {
        transform: translateY(100%);
    }
}

/* 帽子动画 */
.animation-box_cap .hat,
.animation-box_cap .hat1 {
    position: absolute;
    z-index: 1;
    bottom: 0;
    transform: translateY(100%) translateX(-5%);
}

.animation-box_cap.active .hat,
.animation-box_cap.active .hat1 {
    animation: animation-hat 0.8s linear;
    animation-fill-mode: forwards;
    animation-delay: 1s;
}

.animation-box_cap.active .hat1 {
    animation-delay: 1.3s;
}

.animation-box_cap.back .hat,
.animation-box_cap.back .hat1 {
    animation: animation-hat-back 0.5s linear;
    animation-fill-mode: forwards;
}

@keyframes animation-hat {
    0% {
        transform: translateY(100%) translateX(-5%);
        bottom: 0;
    }

    100% {
        transform: translateY(0px) translateX(-5%);
        bottom: 0px;
    }
}

@keyframes animation-hat-back {
    0% {
        transform: translateY(0px) translateX(-5%);
        bottom: 0px;
    }

    100% {
        transform: translateY(-100%) translateX(-5%);
        bottom: 400px;
    }
}

/* 第一条logo动画 */
.animation-box_cap .logo-up {
    position: absolute;
    z-index: 1;
    top: 180px;
    left: 47%;
    transform: translateX(-50%);
    opacity: 1;
    opacity: 1;
    width: 1200px;
    height: 200px;
    /* border: 1px solid red; */
    background: url("/e_html/gk/assets/images/ani/cap_logo.png");
    background-repeat: no-repeat;
    background-size: 1200px 200px;
    background-position: 0 0;
}

/* 第二条logo动画 */
.animation-box_cap .logo-bottom {
    position: absolute;
    z-index: 1;
    top: 160px;
    left: 50%;
    transform: translateX(-35%);
    opacity: 1;
    opacity: 1;
    width: 283px;
    height: 58px;
    background: url("/e_html/gk/assets/images/ani/cap_logo.png");
    background-repeat: no-repeat;
    background-size: 283px 140px;
    background-position: -70px -73px;
    border: 1px solid red;
}

.animation-box_cap.active .logo-up,
.animation-box_cap.active .logo-bottom {
    animation: animation-logo 2s linear;
    animation-fill-mode: forwards;
    animation-delay: 2s;
}

.animation-box_cap.active .logo-bottom {
    animation-delay: 2.5s;
}

.animation-box_cap.back .logo-up,
.animation-box_cap.back .logo-bottom {
    animation: animation-logo-back 0.6s linear;
    animation-fill-mode: forwards;
}

/* 关闭 */

.close_wap {
    position: fixed;
    bottom: 0px;
    width: 1170px;
    height: 17px;
    left: 50%;
    transform: translateX(-50%);
    margin-left: -13px;
}
.close_wap .close_btn {
    width: 30px;
    height: 17px;
    line-height: 16px;
    font-size: 12px;
    text-align: center;
    border: 1px solid red;
    color: red;

    position: absolute;
    top: -20px;
    right: -33px;
    right: -30px;
    right: -45px;
    cursor: pointer;
}

/* IE9 */
.animation-box_capIE {
    position: fixed;
    bottom: 0px;
    width: 1170px;
    left: 50%;
    transform: translateX(-50%);
    height: 100px;
    overflow: hidden;
    cursor: pointer;
    margin-left: -15px;
}

.animation-box_capIE .school {
    position: absolute;
    bottom: 0;
    z-index: 9;
    width: 1170px;
}

.animation-box_capIE .bg {
    position: absolute;
    z-index: 0;
    bottom: 0;
}

.animation-box_capIE .logo-up {
    position: absolute;
    z-index: 1;
    top: 190px;
    width: 1200px;
    height: 200px;
    /* background: url('/e_html/gk/assets/images/ani/cap_logo.png'); */
    background-repeat: no-repeat;
    background-size: 1200px 200px;
    background-position: 0 0;
}

.animation-box_capIE .logo-bottom {
    position: absolute;
    z-index: 1;
    top: 168px;
    left: 46%;
    width: 283px;
    height: 58px;
    /* background: url('/e_html/gk/assets/images/ani/cap_logo.png'); */
    background-repeat: no-repeat;
    background-size: 283px 140px;
    background-position: -70px -73px;
}

.animation-box_capIE .hat,
.animation-box_capIE .hat1 {
    position: absolute;
    z-index: 1;
    top: 88px;
    left: 0px;
    transform: translateY(100%) translateX(10%);
}
/* //----------小火车 start-------------- */
.animation-box_train {
    position: fixed;
    bottom: 0px;
    width: 1170px;
    left: 50%;
    transform: translateX(-50%);
    height: 100px;
    overflow: hidden;
    cursor: pointer;
}

.animation-box_train.active {
    animation: animationbox 1s linear;
    animation-fill-mode: forwards;
    animation-delay: 2s;
}

@keyframes animationbox {
    0% {
        height: 100px;
    }

    100% {
        height: 400px;
    }
}

.animation-box_train .train {
    position: absolute;
    transform: translateX(50px);
    bottom: 12px;
    z-index: 9;
    width: 1026px;
    height: 96px;
    background-repeat: no-repeat;
    background-size: 1170px 96px;
    background-position: 0 0px;
}

.animation-box_train .road-box {
    overflow: hidden;
    position: absolute;
    bottom: 0;
    z-index: 1;
}

/* 铁路运行动画 */
.animation-box_train .road-box .road {
    transform: translateX(0px);
    z-index: 1;
}

.animation-box_train.active .road-box .road {
    animation: animation-road 2s linear;
    animation-fill-mode: forwards;
}

@keyframes animation-road {
    0% {
        transform: translateX(0px);
    }

    100% {
        transform: translateX(-198px);
    }
}

/* 旗子动画 */
.animation-box_train .station {
    position: absolute;
    bottom: 12px;
    z-index: 2;
    right: 0;
    transform: translateX(100%);
    width: 99px;
    height: 96px;
    background: url("https://www.gaokao.cn/assets/images/ani/train.png");
    background-repeat: no-repeat;
    background-size: 1170px 96px;
    background-position: -1075px 0;
}

.animation-box_train.active .station {
    animation: animation-station 1s linear;
    animation-fill-mode: forwards;
    animation-delay: 1s;
}

@keyframes animation-station {
    0% {
        transform: translateX(100%);
    }

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

/* 背景动画 */
.animation-box_train .bg {
    position: absolute;
    bottom: 12px;
    z-index: 0;
    transform: translateY(100%);
}

.animation-box_train.active .bg {
    animation: animation-bg 1s linear;
    animation-fill-mode: forwards;
    animation-delay: 2s;
}

@keyframes animation-bg {
    0% {
        transform: translateY(100%);
    }

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

/* 左上角logo动画 */
.animation-box_train .left-logo-box {
    position: absolute;
    z-index: 2;
    margin-left: 200px;
    width: 214px;
    height: 200px;
    transform: translateY(0) translateX(210px) rotate(-30deg);
    overflow: hidden;
}

.animation-box_train .left-logo-box .left-logo {
    position: absolute;
    z-index: 2;
    top: 40px;
    transform: translateY(0) translateX(-210px) rotate(30deg);
    width: 214px;
    height: 124px;
    background-repeat: no-repeat;
    background-size: 640px 124px;
    background-position: 0px 0;
}

.animation-box_train.active .left-logo-box {
    animation: animation-left-logo-box 2s linear;
    animation-fill-mode: forwards;
    top: -25px;
    left: -175px;
    animation-delay: 3.5s;
}

@keyframes animation-left-logo-box {
    0% {
        transform: translateY(0) translateX(210px) rotate(-30deg);
    }

    100% {
        transform: translateY(107px) translateX(25px) rotate(-30deg);
    }
}

.animation-box_train.active .left-logo-box .left-logo {
    animation: animation-left-logo 2s linear;
    animation-fill-mode: forwards;
    animation-delay: 3.5s;
}

@keyframes animation-left-logo {
    0% {
        transform: translateY(0) translateX(-210px) rotate(30deg);
    }

    100% {
        transform: translateY(0) translateX(0px) rotate(30deg);
    }
}

/* 右上角logo图1 */
.animation-box_train .right-logo-up {
    position: absolute;
    z-index: 2;
    top: 100px;
    right: 125px;
    opacity: 0;
    width: 293px;
    height: 55px;
    background-repeat: no-repeat;
    background-size: 640px 124px;
    background-position: -273px 0;
}

/* 右上角logo图2 */
.animation-box_train .right-logo-bottom {
    position: absolute;
    z-index: 2;
    top: 155px;
    right: 45px;
    opacity: 0;
    width: 303px;
    height: 58px;
    background-repeat: no-repeat;
    background-size: 640px 124px;
    background-position: -338px -64px;
}

.animation-box_train.active .right-logo-up,
.animation-box_train.active .right-logo-bottom {
    animation: animation-right-logo 1.5s linear;
    animation-fill-mode: forwards;
    animation-delay: 4.5s;
}

.animation-box_train.active .right-logo-bottom {
    animation-delay: 5.5s;
}

@keyframes animation-right-logo {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

/* // ie9 */
.animation-box_trainIE {
    position: fixed;
    bottom: 0px;
    width: 1170px;
    left: 50%;
    transform: translateX(-50%);
    height: 100px;
    overflow: hidden;
    cursor: pointer;
}

.animation-box_trainIE .train {
    position: absolute;
    transform: translateX(50px);
    bottom: 12px;
    z-index: 9;
    width: 1026px;
    height: 96px;
    background-repeat: no-repeat;
    background-size: 1170px 96px;
    background-position: 0 0px;
}

.animation-box_trainIE .road-box {
    overflow: hidden;
    position: absolute;
    bottom: 0;
    z-index: 1;
}

.animation-box_trainIE .station {
    position: absolute;
    bottom: 12px;
    z-index: 2;
    right: 0;
    width: 99px;
    height: 96px;
    background: url("/e_html/gk/assets/images/ani/train.png");
    background-repeat: no-repeat;
    background-size: 1170px 96px;
    background-position: -1075px 0;
}

.animation-box_trainIE .bg {
    position: absolute;
    bottom: 12px;
    z-index: 0;
}

.animation-box_trainIE .left-logo-box {
    position: absolute;
    z-index: 2;
    margin-left: 200px;
    width: 214px;
    height: 200px;
    overflow: hidden;
    top: 85px;
    left: -175px;
}

.animation-box_trainIE .left-logo-box .left-logo {
    position: absolute;
    z-index: 2;
    top: 40px;
    width: 214px;
    height: 124px;
    background-repeat: no-repeat;
    background-size: 640px 124px;
    background-position: 0px 0;
}

.animation-box_trainIE .right-logo-up {
    position: absolute;
    z-index: 2;
    top: 100px;
    right: 125px;
    width: 293px;
    height: 55px;
    background-repeat: no-repeat;
    background-size: 640px 124px;
    background-position: -273px 0;
}

.animation-box_trainIE .right-logo-bottom {
    position: absolute;
    z-index: 2;
    top: 155px;
    right: 45px;
    width: 303px;
    height: 58px;
    background-repeat: no-repeat;
    background-size: 640px 124px;
    background-position: -338px -64px;
}

/* //-----------小火车 end---------------- */