@font-face {
    font-family: SFProText-Regular;
    src: 
        local('SFProText-Regular'),
        url(../fonts/SFProText-Regular.ttf);
}

* {
    margin: 0;
    padding: 0;
    -webkit-tap-highlight-color:rgba(238,238,238,.4);
}
body {
    background: #FFF;
    text-align: center;
    font-family: PingFangSC-Regular;
    color: #333;
    letter-spacing: 0;
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);

}
.mainWrap {
    width: 100%;
    margin: 0 auto;
    max-width: 7.5rem;
}

.btnWrap {
    box-sizing: border-box;
    /* height: 1.68rem; */
    position: fixed;
    z-index: 100;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: white;
    padding: .4rem;
    box-shadow: 0 -6px 18px 0 rgba(0, 0, 0, 0.04);
    height: calc(1.68rem + constant(safe-area-inset-bottom));
    height: calc(1.68rem + env(safe-area-inset-bottom));
}
.btnWrap button {
    display: block;
    width: 100%;
    height: .88rem;
    line-height: .88rem;
    text-align: center;
    border-radius: .24rem;
    background-color: #00c1bc;
    border: 0;
    font-family: SFProText;
    font-size: .32rem;
    font-weight: 500;
    font-family: SFProText-Regular;
    color: white;
    outline: none;
}

/* swiper */
.swiper-container {
    height: calc(100vh - 1.68rem - constant(safe-area-inset-bottom));
    height: calc(100vh - 1.68rem - env(safe-area-inset-bottom));
}

.swiper-pagination {
    position: fixed!important;
    bottom: 2.24rem;
    top: auto!important;
    transform: none!important;
    right: .4rem!important;
}
.my-bullet {
    display: block;
    margin-bottom: .1rem;
    width: .08rem;
    height: .08rem;
    border-radius: .04rem;
    background: rgba(0,193,188,.3);
}
.my-bullet:last-child {
    margin-bottom: 0;
}
.my-bullet-active {
    height: .18rem;
    background: rgba(0,193,188,1);
}

.swiper-slide {
    /* padding-bottom: 1.68rem; */
    /* height: calc(100vh); */
    box-sizing: border-box;
    overflow: hidden;
    position: relative;
    background-size: 100%!important;
    background-repeat: no-repeat!important;
    padding: 0 .57rem;
    padding-top: 3.4rem;
    /* box-shadow: 0 1rem 10px -8px rgba(0, 0, 0, 0.04) inset; */
    /* margin-bottom: 1rem; */
}
.swiper-slide .main {
    width: 100%;
    height: 100%;
    z-index: 10;
    background-size: 100%!important;
    background-repeat: no-repeat!important;
}
.swiper-slide .decoration {
    z-index: -1;
    position: absolute;
}
.swiper-slide .warranty {
    z-index: 11;
    position: absolute;
}

/* 各个滑动块 */
.slide1 {
    background: url(../images/img-bg-end-1.png);
}
.slide1 .decoration, .slide3 .decoration {
    width: 2.41rem;
    left: 0;
    bottom: 1rem;
}
.slide1 .warranty, .slide3 .warranty {
    width: 1.42rem;
    right: .16rem;
    bottom: 5.05rem;
}

.slide2 {
    background: url(../images/img-bg-end-2.png);
}
.slide2 .decoration, .slide4 .decoration {
    width: 1.74rem;
    right: 0;
    bottom: 4.54rem;
}
.slide2 .warranty, .slide4 .warranty {
    width: 1.13rem;
    left: .4rem;
    bottom: 1.8rem;
}
.register-directly-link {
    position: absolute;
    right: .4rem;
    top: 1.1rem;
    color: #00c1bc;
    font-size: .28rem;
    z-index: 99999;
  }

.slide3 {
    background: url(../images/img-bg-end-3.png);
}
.slide4 {
    background: url(../images/img-bg-end-4.png);
}

.slide1 .main {
    background: url(../images/img-white-1.png);
}
.slide2 .main {
    background: url(../images/img-white-2.png);
}
.slide3 .main {
    background: url(../images/img-white-3.png);
}
.slide4 .main {
    background: url(../images/img-white-4.png);
}
/* 如果设备像素大于等于2，则用2倍图 */
@media screen and (-webkit-min-device-pixel-ratio: 2), screen and (min–moz-device-pixel-ratio: 2) {
    .slide1 {
        background-image: url(../images/img-bg-end-1@2x.png);
    }
    .slide2 {
        background-image: url(../images/img-bg-end-2@2x.png);
    }
    .slide3 {
        background-image: url(../images/img-bg-end-3@2x.png);
    }
    .slide4 {
        background-image: url(../images/img-bg-end-4@2x.png);
    }

    .slide1 .main {
        background: url(../images/img-white-1@2x.png);
    }
    .slide2 .main {
        background: url(../images/img-white-2@2x.png);
    }
    .slide3 .main {
        background: url(../images/img-white-3@2x.png);
    }
    .slide4 .main {
        background: url(../images/img-white-4@2x.png);
    }
}
/* 如果设备像素大于等于3，则用3倍图 */
@media screen and (-webkit-min-device-pixel-ratio: 3), screen and (min–moz-device-pixel-ratio: 3) {
    .slide1 {
        background-image: url(../images/img-bg-end-1@3x.png);
    }
    .slide2 {
        background-image: url(../images/img-bg-end-2@3x.png);
    }
    .slide3 {
        background-image: url(../images/img-bg-end-3@3x.png);
    }
    .slide4 {
        background-image: url(../images/img-bg-end-4@3x.png);
    }

    .slide1 .main {
        background: url(../images/img-white-1@3x.png);
    }
    .slide2 .main {
        background: url(../images/img-white-2@3x.png);
    }
    .slide3 .main {
        background: url(../images/img-white-3@3x.png);
    }
    .slide4 .main {
        background: url(../images/img-white-4@3x.png);
    }
}

/* 小屏兼容（375/667:iphone8） */
@media screen and (min-aspect-ratio: 375/600) {
    .swiper-slide {
        background-position: 0 -0.2rem!important;
        padding: 0 .8rem;
        padding-top: 2.6rem;
    }
    .slide1 {
        background: url(../images/img-bg-iphone-8-01.png);
    }
    .slide1 .decoration, .slide3 .decoration {
        width: 2.41rem;
        left: 0;
        bottom: 1rem;
    }
    .slide1 .warranty, .slide3 .warranty {
        width: 1.42rem;
        right: .16rem;
        bottom: 5.05rem;
    }
    
    .slide2 {
        background: url(../images/img-bg-iphone-8-02.png);
    }
    .slide2 .decoration, .slide4 .decoration {
        width: 1.74rem;
        right: 0;
        bottom: 4.54rem;
    }
    .slide2 .warranty, .slide4 .warranty {
        width: 1.13rem;
        left: .4rem;
        bottom: 1.8rem;
    }
    
    .slide3 {
        background: url(../images/img-bg-iphone-8-03.png);
    }
    .slide4 {
        background: url(../images/img-bg-iphone-8-04.png);
    }

    .slide1 .main {
        background: url(../images/img-white-iphone-8-1.png);
    }
    .slide2 .main {
        background: url(../images/img-white-iphone-8-2.png);
    }
    .slide3 .main {
        background: url(../images/img-white-iphone-8-3.png);
    }
    .slide4 .main {
        background: url(../images/img-white-iphone-8-4.png);
    }
}
/* 如果设备像素大于等于2，则用2倍图 */
@media screen and (min-aspect-ratio: 375/600) and (-webkit-min-device-pixel-ratio: 2), screen and (min-aspect-ratio: 375/600) and (min–moz-device-pixel-ratio: 2) {
    .slide1 {
        background-image: url(../images/img-bg-iphone-8-01@2x.png);
    }
    .slide2 {
        background-image: url(../images/img-bg-iphone-8-02@2x.png);
    }
    .slide3 {
        background-image: url(../images/img-bg-iphone-8-03@2x.png);
    }
    .slide4 {
        background-image: url(../images/img-bg-iphone-8-04@2x.png);
    }

    .slide1 .main {
        background: url(../images/img-white-iphone-8-1@2x.png);
    }
    .slide2 .main {
        background: url(../images/img-white-iphone-8-2@2x.png);
    }
    .slide3 .main {
        background: url(../images/img-white-iphone-8-3@2x.png);
    }
    .slide4 .main {
        background: url(../images/img-white-iphone-8-4@2x.png);
    }
}
/* 如果设备像素大于等于3，则用3倍图 */
@media screen and (min-aspect-ratio: 375/600) and (-webkit-min-device-pixel-ratio: 3), screen and (min-aspect-ratio: 375/600) and (min–moz-device-pixel-ratio: 3) {
    .slide1 {
        background-image: url(../images/img-bg-iphone-8-01@3x.png);
    }
    .slide2 {
        background-image: url(../images/img-bg-iphone-8-02@3x.png);
    }
    .slide3 {
        background-image: url(../images/img-bg-iphone-8-03@3x.png);
    }
    .slide4 {
        background-image: url(../images/img-bg-iphone-8-04@3x.png);
    }

    .slide1 .main {
        background: url(../images/img-white-iphone-8-1@3x.png);
    }
    .slide2 .main {
        background: url(../images/img-white-iphone-8-2@3x.png);
    }
    .slide3 .main {
        background: url(../images/img-white-iphone-8-3@3x.png);
    }
    .slide4 .main {
        background: url(../images/img-white-iphone-8-4@3x.png);
    }
}