@charset "utf-8";
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    height: 100%;
    background-color: #6241bb;
    font: .2rem/1 "microsoft yahei";
    -webkit-user-select: text;
}

.container {
    position: relative;
    margin: 0 auto;
    width: 7.5rem;
    height: 28.1rem;
    background: url('//png.pookcdn.net/puic-net/mobile/ddz/ks/0708/bg.jpg');
    background-size: 100% 100%;
}

.container2 {
    position: relative;
    margin: 0 auto;
    width: 7.5rem;
    height: 28.1rem;
    background: url('//png.pookcdn.net/puic-net/mobile/ddz/ks/0708/bg2.jpg');
    background-size: 100% 100%;
}

.header {
    width: 7.5rem;
    height: 1.98rem;
    background: url('//png.pookcdn.net/puic-net/mobile/ddz/ks/0708/header.png');
    background-size: 100% 100%;
    position: fixed;
    top: 0;
    z-index: 2;
}

.btn_01 {
    display: inline-block;
    width: 2.64rem;
    height: .92rem;
    position: absolute;
    right: .3rem;
    top: .5rem;
}

.btn_01 img {
    width: 100%;
    height: 100%;
}

.btn_02 {
    display: inline-block;
    width: 2.99rem;
    height: 1.02rem;
    position: absolute;
    top: 16.5rem;
    left: 30%;
    animation: beat 2s linear infinite;
    -webkit-animation: beat 2s linear infinite;
}

.btn_02 img {
    width: 100%;
    height: 100%;
}

.swiper {
    padding-top: 19rem;
}

.swiper-slide {
    width: 3.13rem !important;
}

.swiper-slide img {
    width: 3.13rem;
    height: 5.23rem;
}

.btn_03 {
    display: inline-block;
    width: 2.99rem;
    height: 1.02rem;
    position: absolute;
    top: 24.5rem;
    left: 50%;
    transform: translateX(-1.5rem);
    -webkit-transform: translateX(-1.5rem);
    -moz-transform: translateX(-1.5rem);
    -ms-transform: translateX(-1.5rem);
    -o-transform: translateX(-1.5rem);
}

.btn_03 img {
    width: 100%;
    height: 100%;
}

.footer {
    width: 7.5rem;
    position: absolute;
    bottom: .8rem;
    text-align: center;
    color: #fff;
    padding: 0 .2rem;
}

.footer p {
    margin-top: 10px;
}

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