@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: 15.12rem;
    background: url('//png.pookcdn.net/puic-net/mobile/ddz/ks/0731/bg.jpg')no-repeat;
    background-size: 100% 100%;
}

.header {
    width: 7.5rem;
    height: 1.44rem;
    background: url('//png.pookcdn.net/puic-net/mobile/ddz/ks/0731/header.jpg') no-repeat;
    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: .2rem;
}

.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;
}

.lb {
    width: 7.35rem;
    height: 2.36rem;
    background: url('//png.pookcdn.net/puic-net/mobile/ddz/ks/0731/lb.png') no-repeat;
    background-size: 100% 100%;
    position: absolute;
    top: 10.3rem;
    left: .1rem;
}

.lb span {
    display: inline-block;
    width: .14rem;
    height: .14rem;
    background-color: #eb390e;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    margin-left: .2rem;
    position: absolute;
}

.a1 {
    left: 0;
}

.a2 {
    left: .6rem;
}

.a3 {
    left: 1.2rem;
}

.a4 {
    left: 1.8rem;
}

.a5 {
    left: 2.4rem;
}

.a6 {
    left: 3rem;
}

.a7 {
    left: 3.6rem;
}

.a8 {
    left: 4.2rem;
}

.a9 {
    left: 4.8rem;
}

.a10 {
    left: 5.4rem;
}

.a11 {
    left: 6rem;
}

.a12 {
    left: 6.6rem;
}

.a13 {
    left: 7rem;
    top: .6rem;
}

.a14 {
    left: 7rem;
    top: 1.2rem;
}

.a15 {
    left: 7rem;
    top: 1.8rem;
}

.a16 {
    left: 6.6rem;
    top: 1.95rem;
}

.a17 {
    left: 6rem;
    top: 1.95rem;
}

.a18 {
    left: 5.4rem;
    top: 1.95rem;
}

.a19 {
    left: 4.8rem;
    top: 1.95rem;
}

.a20 {
    left: 4.2rem;
    top: 1.95rem;
}

.a21 {
    left: 3.6rem;
    top: 1.95rem;
}

.a22 {
    left: 3rem;
    top: 1.95rem;
}

.a23 {
    left: 2.4rem;
    top: 1.95rem;
}

.a24 {
    left: 1.8rem;
    top: 1.95rem;
}

.a25 {
    left: 1.2rem;
    top: 1.95rem;
}

.a26 {
    left: .6rem;
    top: 1.95rem;
}

.a27 {
    left: 0rem;
    top: 1.95rem;
}

.a28 {
    left: -.18rem;
    top: 1.8rem;
}

.a29 {
    left: -.18rem;
    top: 1.2rem;
}

.a30 {
    left: -.18rem;
    top: .6rem;
}

.btn_03 {
    display: inline-block;
    width: 2.99rem;
    height: 1.02rem;
    position: absolute;
    left: 50%;
    top: 12.6rem;
    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: .2rem;
    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);
    }
}