/*html, body {
    height: 100%;
    overflow: hidden;
}*/

.pageHeader {
    height: 58px;
    margin: 0;
    width: 100%;
    background-color: #57068c;
    text-align: center;
    position: fixed;
}

.pageContent {
    padding: 93px 15px 15px 15px;
    margin: 0;
    height: 100%;
    width: 100%;
    overflow-y: auto;
}

.actionLayer {
    position: absolute;
    animation: bg 2s ease-in-out infinite;
    -webkit-animation: bg 2s ease-in-out infinite;
    height: 12px;
    width: 100%;
}

.actionLayer1 {
    top: 25px;
    z-index: 3;
    height: 30px;
    background-color: #57068c;
}

    .actionLayer1 .head {
        background: url(../../../Images/Service/bolangtou_1.svg);
        position: absolute;
        top: 100%;
        left: 0px;
        right: 0px;
        height: 12px;
    }

.actionLayer2 {
    top: 25px;
    z-index: 2;
    height: 30px;
    background-color: #694089;
    animation-delay: -0.5s;
}

    .actionLayer2 .head {
        background: url(../../../Images/Service/bolangtou_2.svg);
        position: absolute;
        top: 100%;
        left: 0px;
        right: 0px;
        height: 12px;
        background-position: -40px 0;
    }

.actionLayer3 {
    top: 25px;
    z-index: 1;
    height: 30px;
    background-color: #908e91;
    animation-delay: -1s;
}

    .actionLayer3 .head {
        background: url(../../../Images/Service/bolangtou_3.svg);
        position: absolute;
        top: 100%;
        left: 0px;
        right: 0px;
        height: 12px;
        background-position: -60px 0;
    }

@-webkit-keyframes bg {
    0%, 100% {
        -webkit-transform: translateY(12px);
        transform: translateY(12px);
    }

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

@keyframes bg {
    0%, 100% {
        -webkit-transform: translateY(12px);
        transform: translateY(12px);
    }

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

@-webkit-keyframes straw {
    0%, 100% {
        -webkit-transform: translateY(-2px) rotate(6deg);
        transform: translateY(-2px) rotate(6deg);
    }

    50% {
        -webkit-transform: translateY(0px) rotate(6deg);
        transform: translateY(0px) rotate(6deg);
    }
}

@keyframes straw {
    0%, 100% {
        -webkit-transform: translateY(-2px) rotate(6deg);
        transform: translateY(-2px) rotate(6deg);
    }

    50% {
        -webkit-transform: translateY(0px) rotate(6deg);
        transform: translateY(0px) rotate(6deg);
    }
}

@media screen and (max-width: 520px) {
    .pageHeader {
        height: 131px;
    }

    /*.pageContent {
        top: 168px;
    }*/
    .actionLayer1 {
        top: 113px;
    }

    .actionLayer2 {
        top: 113px;
    }

    .actionLayer3 {
        top: 113px;
    }
}