html,
    body {
        position: relative;
        height: 100%;
        /* overflow: hidden; */
        /* font-family: "微软雅黑"; */
    }
    
    body {
        background: #eee;
        font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
        font-size: 14px;
        color: #000;
        margin: 0;
        padding: 0;
    }
    
    .swiper-container {
        width: 100%;
        height: 100%;
    }
    
    .swiper-slide {
        text-align: center;
        font-size: 18px;
        background: #fff;
        /* Center slide text vertically */
        display: -webkit-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        -webkit-justify-content: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        -webkit-align-items: center;
        align-items: center;
    }
    
    .absolute {
        position: absolute;
    }
    
    p {
        margin: 0;
    }
    /* .mouse {
    width: 4.63%;
    bottom: 5%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 99;
    animation: mouse 1s linear infinite alternate;
}

@keyframes mouse {
    0% {
        bottom: 5%;
    }
    50% {
        bottom: 6%;
    }
    100% {
        bottom: 5%;
    }
} */
    
    .detail {
        cursor: pointer;
        z-index: 99;
        height: 1.99rem;
        left: .5rem;
        top: 50%;
        /* transform: translateY(-50%); */
        margin-top: calc(-1.99rem/2);
        animation: detail 2s linear infinite;
    }
    
    @keyframes detail {
        0% {
            transform: scale(.9);
        }
        50% {
            transform: scale(1)
        }
        100% {
            transform: scale(.9)
        }
    }
    /* 第一屏 */
    
    .one {
        position: relative;
        background: url(../images/1/bg1.jpg) center right no-repeat;
        background-size: cover;
    }
    
    .logo {
        height: 1.42rem;
        top: 1rem;
        right: .2rem;
    }
    
    .buy {
        height: 2.5rem;
        left: .5rem;
        bottom: .5rem;
        z-index: 10;
        position: fixed;
        animation: buy 1s linear infinite;
    }
    
    @keyframes buy {
        0% {
            left: .5rem;
        }
        50% {
            left: .6rem;
        }
        100% {
            left: .5rem;
        }
    }
    
    .pic1 {
        height: 1.24rem;
        top: 1rem;
        left: .2rem;
    }
    /* 第二屏 */
    
    .two {
        position: relative;
        background: url(../images/2/bg2a.jpg) bottom right no-repeat;
        background-size: cover;
    }
    /* .date {
    height: 23%;
    color: #9037ba;
    font-size: .28rem;
    bottom: 2.8rem;
    right: 2.4rem;
    transform: rotate(90deg);
    font-weight: 700;
}

.content {
    height: 23%;
    font-size: .2rem;
    bottom: 2.5rem;
    right: 1rem;
    color: #000;
    text-align: left;
    line-height: .4rem;
    transform: rotate(90deg);
} */
    /* 第三屏 */
    
    .three {
        position: relative;
        background: url(../images/3/bg3.jpg) center no-repeat;
        background-size: cover;
    }
    /* .title4 {
    width: 64.11%;
    top: 0;
    left: 21%;
    transform: translateY(0%);
    transition: transform .25s;
}

.pic2 {
    width: 22.13%;
    bottom: 0;
    left: 35%;
}

.pic3 {
    width: 22.29%;
    bottom: 0;
    left: 0;
}

.pic4 {
    width: 7.39%;
    bottom: 22%;
    left: 30%;
}

.pic5 {
    width: 10.68%;
    bottom: 0;
    left: 18%;
}

.pic6 {
    width: 21.45%;
    bottom: 0;
    right: 0;
}

.pic7 {
    width: 16.77%;
    bottom: 19%;
    right: 25%;
}

.pic8 {
    width: 14.21%;
    bottom: 5%;
    right: 14.5%;
} */
    /* 弹窗 */
    
    .toggle {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 9999;
        overflow: hidden;
    }
    
    .toggle .mask {
        position: absolute;
        height: 100%;
        width: 100%;
        top: 0;
        left: 0;
        background-color: rgba(7, 2, 9, .8);
    }
    
    .tk {
        position: relative;
        top: 50%;
        left: 50%;
        height: 8.78rem;
        width: 6.07rem;
        transform: translate(-50%, -50%);
        background: url(../images/toggle.png) no-repeat;
        background-size: cover;
    }
    
    .close {
        height: .52rem;
        right: .3rem;
        bottom: .3rem;
    }
    
    .bt {
        display: flex;
        justify-content: center;
        align-items: center;
        transform: rotate(90deg);
        position: absolute;
        top: 49%;
    }
    
    .bt p {
        font-size: .4rem;
        color: #fbe68e;
        letter-spacing: .02rem;
        font-weight: 700;
        text-align: center;
    }
    
    .top,
    .bottom {
        height: .29rem;
    }
    
    .tg-box {
        width: 4.5rem;
        height: 7.5rem;
        top: .64rem;
        right: 1.2rem;
        /* transform: rotate(90deg);
        -webkit-transform: rotate(90deg);*/
        overflow: hidden;
        overflow-x: auto;
    }
    
    .tg-box1 {
        /* width: 4.5rem;
        height: 7.5rem;
        top: -1.5rem;
        right: 1.5rem; */
        width: 20rem;
        height: 4.5rem;
        transform: rotate(90deg);
        -webkit-transform: rotate(90deg);
        /* overflow-x: auto; */
        margin-top: 1.5rem;
    }
    
    .banner-img1 {
        width: 7.3rem;
        border-radius: .05rem;
        margin: 0 6.35rem;
        display: block;
        /* transform: rotate(-90deg);
        -webkit-transform: rotate(-90deg); */
    }
    
    .wenzi {
        width: 7.3rem;
        margin: .1rem auto;
        font-size: .24rem;
        letter-spacing: .01rem;
        text-indent: 2em;
        line-height: .4rem;
        color: #fbefb4;
        text-align: left;
        /* transform: rotate(-90deg);
        -webkit-transform: rotate(-90deg); */
    }
    
    .pagination {
        position: absolute;
        left: 0;
        text-align: center;
        bottom: 5px;
        width: 100%;
    }
    
    .swiper-pagination-switch {
        display: inline-block;
        width: 15px;
        height: 15px;
        border-radius: 15px;
        background: #999;
        box-shadow: 0px 1px 2px #555 inset;
        margin: 0 3px;
        cursor: pointer;
    }
    
    .swiper-active-switch {
        background: #fff;
    }
    /* 第四屏 */
    
    .four {
        position: relative;
        background: url(../images/4/bg4.jpg) center no-repeat;
        background-size: cover;
    }
    
    .title4 {
        height: 6.49rem;
        bottom: 1.5rem;
        right: .5rem;
    }
    /* 弹窗 */
    
    .tg2 {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        /* background: url(../images/4/four-toggle.png) top no-repeat;
    background-position: 0 -700px;
    background-size: cover; */
        z-index: 999;
    }
    
    .four-close {
        width: 3.12%;
        top: 20%;
        right: 15%;
        cursor: pointer;
    }
    
    .tg-title {
        width: 33.17%;
        margin: 5% auto 0;
        display: block;
    }
    
    .four-box {
        width: 53.95%;
        height: 100%;
        margin: 2% auto 0;
        display: flex;
        flex-direction: column;
    }
    
    .container-four {
        width: 100%;
        padding-top: 43%;
        text-align: center;
        border: 5px solid #f9e1b5;
        border-radius: 10px;
        box-sizing: border-box;
        height: auto;
    }
    
    .toggle .swiper-wrapper {
        height: 100%!important;
        position: absolute;
        left: 0;
        top: 0;
    }
    
    .toggle .swiper-slide img {
        width: 100%;
    }
    
    .tg2 .wenzi {
        width: 100%;
    }
    /* 第五屏 */
    
    .five {
        position: relative;
        background: url(../images/5/bg5.jpg) top right no-repeat;
        background-size: cover;
    }
    
    .title5 {
        height: 1.53rem;
        bottom: 3rem;
        right: .3rem;
    }
    /* 弹窗 */
    
    .tg3 {
        width: 72.18%;
        position: absolute;
        bottom: -1%;
        left: 13.91%;
        z-index: 999;
    }
    
    .five-toggle {
        width: 100%;
        height: 100%;
    }
    
    .five-close {
        width: 4.11%;
        top: 20%;
        right: 9%;
        cursor: pointer;
    }
    
    .tg5-r {
        width: 18.38%;
        bottom: 0;
        right: 9%;
    }
    
    .tg5-l {
        width: 26.92%;
        bottom: 0;
        left: 4.5%;
    }
    
    .five-box {
        width: 72.2%;
        height: 100%;
        top: 22%;
        left: 50%;
        transform: translateX(-50%);
    }
    
    .container-five {
        width: 83.6%;
        padding-top: 46%;
        text-align: center;
        border: 5px solid #f9e1b5;
        border-radius: 5px;
        height: auto;
        box-sizing: border-box;
    }
    
    .tg3 .wenzi {
        width: 83.6%;
        margin: 0 auto;
    }
    /* 第六屏 */
    
    .six {
        position: relative;
        background: url(../images/6/bg6.jpg) center no-repeat;
        background-size: cover;
    }
    
    .title6 {
        height: 5.29rem;
        top: 50%;
        transform: translateY(-50%);
        right: .3rem;
    }
    /* 弹窗 */
    
    .tg4 {
        width: 64.63%;
        position: absolute;
        top: 0;
        left: 17.68%;
        z-index: 999;
    }
    
    .six-toggle {
        width: 100%;
    }
    
    .six-close {
        width: 4.27%;
        top: 17.5%;
        right: 12.5%;
        cursor: pointer;
    }
    
    .tg6-r {
        width: 14.42%;
        bottom: 0;
        right: 5%;
    }
    
    .tg6-l {
        width: 13.8%;
        bottom: 0;
        left: 7.5%;
    }
    
    .six-box {
        width: 65%;
        height: 75%;
        top: 17.5%;
        left: 50%;
        transform: translateX(-50%);
    }
    
    .container-six {
        width: 92.05%;
        padding-top: 45%;
        text-align: center;
        border: 5px solid #f9e1b5;
        border-radius: 5px;
        height: auto;
        box-sizing: border-box;
    }
    
    .tg4 .wenzi {
        width: 92.05%;
    }
    /* 底部 */
    
    .footer {
        height: 100%;
        width: 0.4rem;
        background-color: rgba(0, 0, 0, 0.5);
        position: absolute;
        left: 0;
        top: 0;
        z-index: 999;
    }
    
    .banquan {
        color: #fff;
        display: inline-block;
        font-size: .2rem;
        text-align: center;
        height: .2rem;
        width: 100%;
        position: fixed;
        left: -46.7%;
        z-index: 9999;
        top: 50%;
        transform: rotate(90deg);
        margin: 0;
    }
    /* ::-webkit-scrollbar {
    -webkit-appearance: none;
}

::-webkit-scrollbar:vertical {
    width: .05rem;
}

::-webkit-scrollbar:horizontal {
    height: .05rem;
}

::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, .3);
} */
    
     ::-webkit-scrollbar-track-piece {
        background-color: rgba(0, 0, 0, 0);
        border-left: 1px solid rgba(0, 0, 0, 0);
    }
    
     ::-webkit-scrollbar {
        width: 2.5px;
        height: 3px;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px;
    }
    
     ::-webkit-scrollbar-thumb {
        background-color: rgba(0, 0, 0, 0.5);
        background-clip: padding-box;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px;
        min-height: 28px;
    }
    
     ::-webkit-scrollbar-thumb:hover {
        background-color: rgba(0, 0, 0, 0.5);
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px;
    }