.animate-crossshow {
    -webkit-animation: crossshow_bg .5s ease-in-out 4s 2;
    -moz-animation: crossshow_bg .5s ease-in-out 4s 2;
    -o-animation: crossshow_bg .5s ease-in-out 4s 2;
    animation: crossshow_bg .5s ease-in-out 4s 2;
}

.animate-crossshow .animate-crossshow-content {
    -webkit-animation: crossshow_content 1s ease-in-out 5s both;
    -moz-animation: crossshow_content 1s ease-in-out 5s both;
    -o-animation: crossshow_content 1s ease-in-out 5s both;
    animation: crossshow_content 1s ease-in-out 5s both;
}

.animate-crossshow::after {
    content: '';
    display: block;
    position: absolute;
    -webkit-animation: crossshow_after 4s ease-in-out both;
    -moz-animation: crossshow_after 4s ease-in-out both;
    -o-animation: crossshow_after 4s ease-in-out both;
    animation: crossshow_after 4s ease-in-out both;
    border-right: 1px solid #5b2613;
    border-bottom: 1px solid #5b2613;
    /* bottom: 50%;
    right: 50%;
    width: 219px;
    height: 97px; */
}

.animate-crossshow::before {
    content: '';
    display: block;
    position: absolute;
    -webkit-animation: crossshow_before 4s ease-in-out both;
    -moz-animation: crossshow_before 4s ease-in-out both;
    -o-animation: crossshow_before 4s ease-in-out both;
    animation: crossshow_before 4s ease-in-out both;
    border-left: 1px solid #5b2613;
    border-top: 1px solid #5b2613;
    /* top: 49.5%;
    left: 49.9%;
    width: 219px;
    height: 97px; */
}

.animate-helicopter-fly {
    /* 飞机飞过来 */
    /* top: -5%;
    left: 90%;
    top: 20%;
    left: 74%; */
    transform-origin: center center;

    -webkit-animation: helicopter_top 2s cubic-bezier(0.13, 1.21, 0.71, 0.93) 6s both
    , helicopter_left 2s cubic-bezier(0.13, 1.21, 0.71, 0.93) 6s both;
    -moz-animation: helicopter_top 2s cubic-bezier(0.13, 1.21, 0.71, 0.93) 6s both
    , helicopter_left 2s cubic-bezier(0.13, 1.21, 0.71, 0.93) 6s both;
    -o-animation: helicopter_top 2s cubic-bezier(0.13, 1.21, 0.71, 0.93) 6s both
    , helicopter_left 2s cubic-bezier(0.13, 1.21, 0.71, 0.93) 6s both;
    animation: helicopter_top 4s cubic-bezier(0.13, 1.21, 0.71, 0.93) 6s both
    , helicopter_left 4s cubic-bezier(0.13, 1.21, 0.71, 0.93) 6s both;
}

.animate-helicopter-shake {

    -webkit-animation: helicopter_shake .6s linear both infinite alternate;
    -moz-animation: helicopter_shake .6s linear both infinite alternate;
    -o-animation: helicopter_shake .6s linear both infinite alternate;
    animation: helicopter_shake .6s linear both infinite alternate;
}

.animate-helicopter-updown {

    -webkit-animation: helicopter_updown 2s linear 6s both infinite alternate;
    -moz-animation: helicopter_updown 2s linear 6s both infinite alternate;
    -o-animation: helicopter_updown 2s linear 6s both infinite alternate;
    animation: helicopter_updown 2s linear 6s both infinite alternate;
}



@-webkit-keyframes helicopter_near {
    0% {
        transform: scale(0);
    }
    to {
        transform: scale(1);
    }
}
@-moz-keyframes helicopter_near {
    0% {
        transform: scale(0);
    }
    to {
        transform: scale(1);
    }
}
@-o-keyframes helicopter_near {
    0% {
        transform: scale(0);
    }
    to {
        transform: scale(1);
    }
}
@keyframes helicopter_near {
    0% {
        transform: scale(0);
    }
    to {
        transform: scale(1);
    }
}

@-webkit-keyframes helicopter_top {
    0% {
        top: -14%;
    }
    to {
        top: 20%;
    }
}
@-moz-keyframes helicopter_top {
    0% {
        top: -14%;
    }
    to {
        top: 20%;
    }
}
@-o-keyframes helicopter_top {
    0% {
        top: -14%;
    }
    to {
        top: 20%;
    }
}
@keyframes helicopter_top {
    0% {
        top: -14%;
    }
    to {
        top: 20%;
    }
}

@-webkit-keyframes helicopter_left {
    0% {
        /* left: 90%; */
        left: 82%;
    }
    to {
        left: 74%;
    }
}
@-moz-keyframes helicopter_left {
    0% {
        /* left: 90%; */
        left: 82%;
    }
    to {
        left: 74%;
    }
}
@-o-keyframes helicopter_left {
    0% {
        /* left: 90%; */
        left: 82%;
    }
    to {
        left: 74%;
    }
}
@keyframes helicopter_left {
    0% {
        /* left: 90%; */
        left: 82%;
    }
    to {
        left: 74%;
    }
}

@-webkit-keyframes helicopter_shake {
    0% {
        -webkit-transform: translateY(-2px) rotateZ(35deg);
        -moz-transform: translateY(-2px) rotateZ(35deg);
        -ms-transform: translateY(-2px) rotateZ(35deg);
        -o-transform: translateY(-2px) rotateZ(35deg);
        transform: translateY(-2px) rotateZ(35deg);
    }
    to {
        -webkit-transform: translateY(2px) rotateZ(45deg);
        -moz-transform: translateY(2px) rotateZ(45deg);
        -ms-transform: translateY(2px) rotateZ(45deg);
        -o-transform: translateY(2px) rotateZ(45deg);
        transform: translateY(2px) rotateZ(45deg);
    }
}
@-moz-keyframes helicopter_shake {
    0% {
        -webkit-transform: translateY(-2px) rotateZ(35deg);
        -moz-transform: translateY(-2px) rotateZ(35deg);
        -ms-transform: translateY(-2px) rotateZ(35deg);
        -o-transform: translateY(-2px) rotateZ(35deg);
        transform: translateY(-2px) rotateZ(35deg);
    }
    to {
        -webkit-transform: translateY(2px) rotateZ(45deg);
        -moz-transform: translateY(2px) rotateZ(45deg);
        -ms-transform: translateY(2px) rotateZ(45deg);
        -o-transform: translateY(2px) rotateZ(45deg);
        transform: translateY(2px) rotateZ(45deg);
    }
}
@-o-keyframes helicopter_shake {
    0% {
        -webkit-transform: translateY(-2px) rotateZ(35deg);
        -moz-transform: translateY(-2px) rotateZ(35deg);
        -ms-transform: translateY(-2px) rotateZ(35deg);
        -o-transform: translateY(-2px) rotateZ(35deg);
        transform: translateY(-2px) rotateZ(35deg);
    }
    to {
        -webkit-transform: translateY(2px) rotateZ(45deg);
        -moz-transform: translateY(2px) rotateZ(45deg);
        -ms-transform: translateY(2px) rotateZ(45deg);
        -o-transform: translateY(2px) rotateZ(45deg);
        transform: translateY(2px) rotateZ(45deg);
    }
}
@keyframes helicopter_shake {
    0% {
        -webkit-transform: translateY(-2px) rotateZ(35deg);
        -moz-transform: translateY(-2px) rotateZ(35deg);
        -ms-transform: translateY(-2px) rotateZ(35deg);
        -o-transform: translateY(-2px) rotateZ(35deg);
        transform: translateY(-2px) rotateZ(35deg);
    }
    to {
        -webkit-transform: translateY(2px) rotateZ(45deg);
        -moz-transform: translateY(2px) rotateZ(45deg);
        -ms-transform: translateY(2px) rotateZ(45deg);
        -o-transform: translateY(2px) rotateZ(45deg);
        transform: translateY(2px) rotateZ(45deg);
    }
}

@-webkit-keyframes helicopter_updown {
    0% {
        -webkit-transform: translateY(-5px);
        -moz-transform: translateY(-5px);
        -ms-transform: translateY(-5px);
        -o-transform: translateY(-5px);
        transform: translateY(-5px);
    }
    to {
        -webkit-transform: translateY(5px);
        -moz-transform: translateY(5px);
        -ms-transform: translateY(5px);
        -o-transform: translateY(5px);
        transform: translateY(5px);
    }
}
@-moz-keyframes helicopter_updown {
    0% {
        -webkit-transform: translateY(-5px);
        -moz-transform: translateY(-5px);
        -ms-transform: translateY(-5px);
        -o-transform: translateY(-5px);
        transform: translateY(-5px);
    }
    to {
        -webkit-transform: translateY(5px);
        -moz-transform: translateY(5px);
        -ms-transform: translateY(5px);
        -o-transform: translateY(5px);
        transform: translateY(5px);
    }
}
@-o-keyframes helicopter_updown {
    0% {
        -webkit-transform: translateY(-5px);
        -moz-transform: translateY(-5px);
        -ms-transform: translateY(-5px);
        -o-transform: translateY(-5px);
        transform: translateY(-5px);
    }
    to {
        -webkit-transform: translateY(5px);
        -moz-transform: translateY(5px);
        -ms-transform: translateY(5px);
        -o-transform: translateY(5px);
        transform: translateY(5px);
    }
}
@keyframes helicopter_updown {
    0% {
        -webkit-transform: translateY(-5px);
        -moz-transform: translateY(-5px);
        -ms-transform: translateY(-5px);
        -o-transform: translateY(-5px);
        transform: translateY(-5px);
    }
    to {
        -webkit-transform: translateY(5px);
        -moz-transform: translateY(5px);
        -ms-transform: translateY(5px);
        -o-transform: translateY(5px);
        transform: translateY(5px);
    }
}

@-webkit-keyframes crossshow_after {
    0% {
        bottom: 50%;
        right: 50%;
        width: 0;
        height: 0;
    }
    33% {
        bottom: 50%;
        right: 50%;
        width: 0;
        height: 97px;
    }
    66% {
        bottom: 50%;
        right: 50%;
        width: 219px;
        height: 97px;
    }
    to {
        bottom: 4%;
        right: 0%;
        width: 219px;
        height: 97px;
    }
}

@-moz-keyframes crossshow_after {
    0% {
        bottom: 50%;
        right: 50%;
        width: 0;
        height: 0;
    }
    33% {
        bottom: 50%;
        right: 50%;
        width: 0;
        height: 97px;
    }
    66% {
        bottom: 50%;
        right: 50%;
        width: 219px;
        height: 97px;
    }
    to {
        bottom: 4%;
        right: 0%;
        width: 219px;
        height: 97px;
    }
}

@-o-keyframes crossshow_after {
    0% {
        bottom: 50%;
        right: 50%;
        width: 0;
        height: 0;
    }
    33% {
        bottom: 50%;
        right: 50%;
        width: 0;
        height: 97px;
    }
    66% {
        bottom: 50%;
        right: 50%;
        width: 219px;
        height: 97px;
    }
    to {
        bottom: 4%;
        right: 0%;
        width: 219px;
        height: 97px;
    }
}

@keyframes crossshow_after {
    0% {
        bottom: 50%;
        right: 50%;
        width: 0;
        height: 0;
    }
    33% {
        bottom: 50%;
        right: 50%;
        width: 0;
        height: 97px;
    }
    66% {
        bottom: 50%;
        right: 50%;
        width: 219px;
        height: 97px;
    }
    to {
        bottom: 4%;
        right: 0%;
        width: 219px;
        height: 97px;
    }
}

@-webkit-keyframes crossshow_before {
    0% {
        top: 49.5%;
        left: 49.9%;
        width: 0;
        height: 0;
    }
    33% {
        top: 49.5%;
        left: 49.9%;
        width: 0;
        height: 84px;
    }
    66% {
        top: 49.5%;
        left: 49.9%;
        width: 219px;
        height: 84px;
    }
    to {
        top: 0%;
        left: 0%;
        width: 219px;
        height: 84px;
    }
}

@-moz-keyframes crossshow_before {
    0% {
        top: 49.5%;
        left: 49.9%;
        width: 0;
        height: 0;
    }
    33% {
        top: 49.5%;
        left: 49.9%;
        width: 0;
        height: 84px;
    }
    66% {
        top: 49.5%;
        left: 49.9%;
        width: 219px;
        height: 84px;
    }
    to {
        top: 0%;
        left: 0%;
        width: 219px;
        height: 84px;
    }
}

@-o-keyframes crossshow_before {
    0% {
        top: 49.5%;
        left: 49.9%;
        width: 0;
        height: 0;
    }
    33% {
        top: 49.5%;
        left: 49.9%;
        width: 0;
        height: 84px;
    }
    66% {
        top: 49.5%;
        left: 49.9%;
        width: 219px;
        height: 84px;
    }
    to {
        top: 0%;
        left: 0%;
        width: 219px;
        height: 84px;
    }
}

@keyframes crossshow_before {
    0% {
        top: 49.5%;
        left: 49.9%;
        width: 0;
        height: 0;
    }
    33% {
        top: 49.5%;
        left: 49.9%;
        width: 0;
        height: 84px;
    }
    66% {
        top: 49.5%;
        left: 49.9%;
        width: 219px;
        height: 84px;
    }
    to {
        top: 0%;
        left: 0%;
        width: 219px;
        height: 84px;
    }
}

@-webkit-keyframes crossshow_bg {
    0% {
        background-color: rgba(255, 255, 255, 0.5);
    }
    to {
        background-color: rgba(255, 255, 255, 0);
    }
}

@-moz-keyframes crossshow_bg {
    0% {
        background-color: rgba(255, 255, 255, 0.5);
    }
    to {
        background-color: rgba(255, 255, 255, 0);
    }
}

@-o-keyframes crossshow_bg {
    0% {
        background-color: rgba(255, 255, 255, 0.5);
    }
    to {
        background-color: rgba(255, 255, 255, 0);
    }
}

@keyframes crossshow_bg {
    0% {
        background-color: rgba(255, 255, 255, 0.5);
    }
    to {
        background-color: rgba(255, 255, 255, 0);
    }
}

@-webkit-keyframes crossshow_content {
    0% {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@-moz-keyframes crossshow_content {
    0% {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@-o-keyframes crossshow_content {
    0% {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes crossshow_content {
    0% {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}