* {
    margin: 0;
    padding: 0;
}

html,
body {
    overflow: hidden;
}

.home-top {
    width: 100vw;
    height: 120px;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10;
}

.miaowu-logo {
    width: 246px;
    object-fit: cover;
    position: absolute;
    left: 74px;
    top: 54px;
}

.pay-btn {
    width: 112px;
    height: 52px;
    background-image: url(../img/pay.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100%;
    position: absolute;
    right: 56px;
    top: 54px;
    cursor: pointer;
    overflow: unset;
}

.relative {
    position: relative;
}

.pay-btn1 {
    background-image: url(../img/pay-hover.png);
}

.hot-icon {
    width: 54px;
    position: absolute;
    top: -20px;
    right: -12px;
}

.swiper-pagination {
    position: fixed;
    right: 2vw !important;
    top: 50vh;
}

.swiper-container {
    width: 100%;
    height: 100vh;
}

.swiper-slide {
    width: 100%;
    text-align: center;
    margin-bottom: 0 !important;
}

.swiper-itme1,
.swiper-itme2,
.swiper-itme3,
.swiper-itme4,
.swiper-itme5 {
    width: 100%;
    height: 100%;

    background-repeat: no-repeat;
    background-size: cover;
    background-position: top;

}

.swiper-itme1 {
    background-image: url(../img/1.png);
}

.swiper-itme2 {
    background-image: url(../img/2.png);
}

.swiper-itme3 {
    background-image: url(../img/3.png);
}

.swiper-itme4 {
    background-image: url(../img/4.png);
}

.swiper-itme5 {
    background-image: url(../img/5.png);
}

.swiper-bottom {
    width: 100vw;
    height: 280px;
    position: absolute;
    bottom: 0;
    left: 0;
    background-image: url(../img/bottom.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    z-index: 1;
}

.swiper-pagination-bullet {
    width: 12px;
    height: 12px;
    border-radius: 12px;
    opacity: 1;
    background-color: rgba(0, 0, 0, 0.1);
}

.swiper-pagination-bullet-active {
    height: 40px;
    background-color: #9B28DB;
}

.down-load {
    width: 582px;
    height: 85px;
    position: absolute;
    left: calc((100vw - 582px) / 2);
    top: calc((100vh + 200px) / 2);
    z-index: 15;
}

.android-down,
.iphone-down {
    width: 271px;
    height: 85px;
    background-image: url(../img/android.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100%;
    float: left;
    cursor: pointer;
}

.iphone-down {
    background-image: url(../img/iphone.png);
    float: right;
}

.clear {
    clear: both;
}

.android-down:hover,
.iphone-down:hover {
    opacity: 0.6;
    cursor: pointer;
}

/* .android-down:hover + .android-code{
    display: block;
} */
/* .iphone-down:hover + .iphone-code{
    display: block;
} */
.android-code,
.iphone-code {
    width: 200px;
    height: 212px;
    position: absolute;
    top: -212px;
    left: 40px;
    background-image: url(../img/code-hover.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100%;
    display: none;
}

.iphone-code {
    left: auto;
    right: 40px;
}

.android-code img,
.iphone-code img {
    width: 174px;
    margin: calc((200px - 174px) / 2);
}

footer {
    position: absolute;
    width: 100%;
    bottom: 5px;
    left: 0;
    z-index: 10;
    text-align: center;
    height: 50px;
    color: white;
}

.bei-an1,
.bei-an,
.bei-an2 {
    display: none;
}

.mobile-download {
    display: none;
}

.hand {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    left: 50%;
    font-size: 16px;
    transform: translateX(-50%);
    top: calc((100vh + 100px) / 2);
    z-index: 15;
    font-weight: 500;
    cursor: pointer;
}

.hand img {
    width: 24px;
    height: 24px;
    margin-right: 8px;
}

/* 移动端适配 - 隐藏.swiper-itme1-5内部的内容和.home-top */
@media screen and (max-width: 768px) {

    /* 隐藏顶部logo区域 */
    .home-top {
        display: none !important;
    }

    /* 隐藏.swiper-itme1内部的下载按钮和二维码 */
    .swiper-itme1 .down-load {
        display: none !important;
    }

    /* 隐藏.swiper-itme2-4内部的底部元素 */
    .swiper-itme2 .swiper-bottom,
    .swiper-itme3 .swiper-bottom,
    .swiper-itme4 .swiper-bottom {
        display: none !important;
    }

    /* 隐藏.swiper-itme5内部的内容 */
    .swiper-itme5 .bei-an,
    .swiper-itme5 .bei-an1,
    .swiper-itme5 .bei-an2,
    .swiper-itme5 .swiper-bottom,
    .index-footer-content {
        display: none !important;
    }

    /* 更改移动端背景图片 */
    .swiper-itme1 {
        background-image: url(../img/mobile_1.png) !important;
        background-size: 100% 100%;
        position: relative;
    }

    .swiper-itme2 {
        background-image: url(../img/mobile_2.png) !important;
        background-size: 100% 100%;
        position: relative;
    }

    .swiper-itme3 {
        background-image: url(../img/mobile_3.png) !important;
        background-size: 100% 100%;
        position: relative;
    }

    .swiper-itme4 {
        background-image: url(../img/mobile_4.png) !important;
        background-size: 100% 100%;
        position: relative;
    }

    .swiper-slide-mobile-none {
        display: none !important;
    }

    .mobile-download {
        display: block;
        width: 88%;
        position: absolute;
        bottom: 4%;
        left: 50%;
        transform: translateX(-50%);
        display: flex;
        justify-content: space-between;

    }

    .mobile-android-down,
    .mobile-iphone-down {
        width: 46%;
        height: 85px;
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
        height: 46px;
        background: linear-gradient(139deg, #8777FF 0%, #CC55FF 100%);
        box-shadow: inset 0px 0px 6px 0px rgba(255, 255, 255, 0.5);
        border-radius: 24px;
        font-family: PingFangSC, PingFang SC;
        font-weight: 600;
        font-size: 14px;
        color: #FFFFFF;
        line-height: 1;
        outline: none;
        text-decoration: none;
        border: none;
        -webkit-tap-highlight-color: transparent;
    }

    .mobile-android-down:active,
    .mobile-iphone-down:active,
    .mobile-android-down:focus,
    .mobile-iphone-down:focus {
        outline: none;
        -webkit-tap-highlight-color: transparent;
    }

    .mobile-download-img {
        width: 20px;
        height: 20px;
        margin-right: 10px;
    }

    .hand {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        left: 50%;
        font-size: 14px;
        transform: translateX(-50%);
        top: 87%;
        z-index: 15;
        font-weight: 500;
        cursor: pointer;
    }

    .hand img {
        width: 18px;
        height: 18px;
        margin-right: 8px;
    }
}