html {
    box-sizing: border-box;
}

*,
*:before,
*:after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-size: .2rem;
    background-color: #8d1f1d;
}

.container {
    width: 7.5rem;
    height: 14.4rem;
    background: url('//png.pookcdn.net/puic-net/mobile/ddz/ks/0601/bg.png')no-repeat;
    background-size: contain;
    margin: 0 auto;
    position: relative;
    text-align: center;
}

.header {
    width: 7.5rem;
    height: 147px;
    background: url('//png.pookcdn.net/puic-net/mobile/ddz/ks/0601/header_01.png')no-repeat;
    background-size: contain;
    position: fixed;
    top: 0;
    z-index: 2;
}

.logo {
    float: left;
    width: 1.23rem;
    height: 1.17rem;
    background: url('//png.pookcdn.net/puic-net/mobile/ddz/ks/0601/logo.png')no-repeat;
    background-size: contain;
    margin-left: .26rem;
    margin-top: .15rem;
}

.text {
    float: left;
    width: 2.21rem;
    height: .9rem;
    text-align: left;
    margin-left: .14rem;
    margin-top: .2rem;
}

.header_btn {
    float: left;
    width: 2.44rem;
    height: .8rem;
    background: url('//png.pookcdn.net/puic-net/mobile/ddz/ks/0601/header_btn.png')no-repeat;
    background-size: contain;
    animation: beat 2s linear infinite;
    -webkit-animation: beat 2s linear infinite;
    margin-left: .93rem;
    margin-top: .35rem;
    cursor: pointer;
}

@keyframes beat {
    0% {
        transform: scale(.9);
        -webkit-transform: scale(.9);
        -moz-transform: scale(.9);
        -ms-transform: scale(.9);
        -o-transform: scale(.9);
    }
    50% {
        transform: scale(1.1);
        -webkit-transform: scale(1.1);
        -moz-transform: scale(1.1);
        -ms-transform: scale(1.1);
        -o-transform: scale(1.1);
    }
    100% {
        transform: scale(.9);
        -webkit-transform: scale(.9);
        -moz-transform: scale(.9);
        -ms-transform: scale(.9);
        -o-transform: scale(.9);
    }
}

.title {
    width: 6.81rem;
    height: 1.82rem;
    margin-top: 2rem;
}

.hb_btn {
    width: 3.15rem;
    height: 1.11rem;
    margin-top: 3rem;
    cursor: pointer;
}

.nav {
    width: 100%;
    position: absolute;
    top: 11.5rem;
    left: 0;
}

.nav img {
    width: 1.29rem;
    height: 1.16rem;
    margin-left: .13rem;
}

.footer {
    width: 7.5rem;
    position: absolute;
    left: 50%;
    bottom: .2rem;
    transform: translateX(-3.75rem);
    text-align: center;
    -webkit-transform: translateX(-3.75rem);
    -moz-transform: translateX(-3.75rem);
    -ms-transform: translateX(-3.75rem);
    -o-transform: translateX(-3.75rem);
}

.footer p {
    color: #f6bb91;
    margin-top: .1rem;
}