* {
    margin: 0;
    padding: 0;
}

ul,
li {
    list-style: none;
}

a {
    text-decoration: none;
}

img {
    border: none;
}

html,
body {
    min-height: 100%;
    height: 100%;
    overflow: hidden;
}

.music {
    position: fixed;
    top: .4rem;
    right: .4rem;
    z-index: 11112;
    width: .5rem;
    height: .5rem;
    background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABhCAMAAAAX8fTVAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAADJUExURUxpcd/f3jUyMe3s7MXEw6+urf///x0aGGRiYCsoJomHhklGRP////////j4+NXV1f///////////////6Sjov///9zb25KRkCIfHfHx8XVzcf///////////////////+jo6P///9HQ0P///2xqabi3t1JPTvX19Z+enf///////////////3x6eYOBgGFfXj88O////////////83NzOLi4llXVf///////////7++vv////z8/P///////////////////////8pfFYAAAABCdFJOUwD0yPns5vjC0sXbzBTy/fKUOsS74w/03sP61rXLB9gd+NHwXtTpzvzhd1KJp9ja0clELGvv9tDioF3q4/5MBa2qmh7y+nYAAARWSURBVGje5Zppe6IwEIAV14aIigdV0VqlKt5H69HWXlv+/49aJUGuJCTgsvvszsc28SWZyVxJJvM3SbG6nS9qxlvpJG9GbTHfVotXBfRmldqNFZKbWmXWu9ISBh0C4ALqDJIvqPpdsiKk9F1NhJjVLS6pf8RGPIYR5Vz2JLlyGPMYC/H05f/5Xb4gKxIEJ4GSIhfyOz/q55M4Y+r9gcZkLYGQSOtJwztqKrqMmju3r5mAKqbWd0fWhBYzcI1WXbYAU1pL1TXoAT+j4iLagEPaLqbCieh2nBm5FeCUVc6Z0+lynfA7Z3weAm6BeWfWHYcHKN47yxgCIWk7i7kvcjMeJCAo0gMnpWs4WwViiLNlBlsvjiNpgljSdJwMj+0WQEwpRFvyICnDpVBPZS/ZXvl3jBYyDS6dm4VVi0P7BtPvqtFfqjJPqcrwyXizxuxjvkaHiHlexvQNw9YrsxcyQqMmrDFD7MUIsRb9ZxSh1x3W64HjS8L5BXKLekTwAD8wRGd5nZaOXGWQ8YHmLgEnxGqwPmeJxgSTCxRuG4AbYjU2jGEo9tcCORyaOBSAWPowUvd+rbxwLsQLYUa1rD3gxcu4RYlDmxOiO6h+k4Zpo8Ti1gN5RbEQcEJWQB47e6ZRVIMM7NUDQamDxgs5HRLToVjv5IOpBQ8k3i2FF3L2CsretTPSmVGC+zWz/5AFIhAAdxdKFlJVPwsExIkY5OSQLxmqSt2vSsClrEUhALZHDWosXftdC1JJGQpD7L23v3gfdjKw7FNKNTpG0CH4dBMM+cF36LcCmRYBYgdckxaHtxgyF0hRSBCTbP4ocZljyIInJDIgcGzpBIXK9s8ufG5eiQ0Be+JeK75k0k6FylJ8SHNPmiyVvanRm+0dYXwIIEZJaNcSzxhyw+1UaBBGTClhSOmfgaSyXckVD6IVn9iEKTmxz4QTH0ay+A9jUrdCEb9bSeogmZXd/EqunllybXmDFhxO8sfjSFspqCrgg/iDFgq/1BJLPo7drlGfGxIIv8xEQjqG+5pckEAiwUqJDjkrJiSYEtGTO7NsxYUEkztqmgpzVlxIKE2lJtyaFRsSSrhx6aCHFqLHh4RLB0oRpFixIYQiCJdzQdUfKBCTV+0vHIXp5p3IGEeHHmJhSimxG0QIR9ZMLLGdrseS3CLzS3T9uiI3C8htjxZpKWokg9b2oDRwNmEjzkXHaWoDBx/IoHkq/QCD2e2IakVdmmqBD4UjL+I934pksJpq1PbgYYQ9WDk74ck2VOaVDbXRCeVVs7kcbgSiLkHrKbZsU2k+p9NGT+dCINO9v8bVxn33z1/SeK+b2mIMgeumdC7O4l0BFgSvANO5zDxneylcy57SlxQumN3mvXNVLhOMAMpaoqtytwD7rZf+YQz7+UL8xxg9zocYi89E7z0+vW8MKE9KKt1McilO6a9jSl+DayCwTS/Iz3yu+57o5G5607rxfH6w9GzUzw+Wupn/Tn4BxSif6EQyMIMAAAAASUVORK5CYII=');
    background-size: 100% 100%;
    border-radius: 50%;
}

.music-off {
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABjCAMAAABaOVXeAAAABGdBTUEAALGPC/xhBQAAAM9QTFRFm5qZ////////WlhWv76+////////tbSz////////5ubm////////Qj8+uLe3n56d////////////////////////rKuq////VFFQ/////////////////Pz8////Ih8d////////bGppf358////kpGQ3NvbpKOi////////sK+u////7+/v0M/PdnRy////ODY01tXV+Pj46+rqiIeGMC0sYV9e8/Pz////TktKSUZE9fX1xsXEKSYk4N/f/v7+////ZGJgAAAAHRoY////E5WErwAAAER0Uk5T4E6I0OoHi+ftBvfja8rp4njJHiydwOVRz0Y32D7+xcOoD9TZs97047qU5l7679bQyPL9+dvG0fsVzcz87cX1/vXSAMLxTtjiAAAE50lEQVRo3u2aWUObShSAaWu1RpO01ayaRbM1C2SFAAlpcPj/v+kaZlhmHxLl3od7HnWGL8xZ5xy0txxE+x/yKRD7+f5rtzK/O77L3bzS/Xr/bH8oxK6N262AklZ7XLM/BmJP+8eAK8f+1L4Y0nz8EUjkx2PzIkjtT6Akf76cDWnQiNX68C7rFY1pnAV56OKP1ycb31144F28hetvJjqO6j5kh/xMP2BYtkxAiWmVh+lVPzNCHtrJ3vWoDrhSH62Tle2HLJBpYrTLXgcIpdNbJgY9VYeME4QBFMRIMGNFyPd+fFA9oCib+ND631Ug9jxaPzGBspiTaNfclkPsJ7R49goyiTFDG59sGSRm6AuQURY6j0JAbqOzqoIzpBqd2K0QEgWSAThLBlGQEUEi292AM2XDtGQMMr2UkVCmPMjvy84KP7HfHAhS+kT8FGcjDjTIYeZsCIq7S/kvXXqiFUsqJmvkYe3Ebm5BJxI6/448MI20Xl/8IjdwlSZa84qiGA15hv8pSfS6R3r9JlpUgmueKciv8O/bjiJkJjrVDgxjv0hIA+6lY/uNxYQES9HP6cE1DQIC0+2Q8ct3DhMSDEURFOb+Cg5pwo1kdPdOz9w6TIgwFyDdNzHII/tF4CPTlH26PKny/eUQLnhMQ15g4UAldOMvpLg4ZBuh1gMexoCFxUsKAiPjjOF7JGUPzcNHDhdsRxzVzFJxUks54oix1oeUWPt75CTOLi4ty0zIKOWQIeQFXj5cIKfso6jgFhI7Y/mMmzqvEFIL/3BgvzdOiSHATGzgYHJVX4shMCGWgQJln4pvg/hldO55jWMIDCkWEFNCS05DgGeUhtxcaiWhRYtVsuIbfcrG9mSkdsNfXKCDjLeKlaLFAViUIyJKkYZA724V6U16HIpPkHt5pRVRFlVGzjkl3DqvCrtHkGuFEgVR1kMGpP7+J4dXuFwjSFclJSLts5Z6u2DLUKgPb3kIUuG7IpviUy4x4bpjBUHCUmglLbATCgkZFFibzVVUGp0gd+Fpe0CZQiV45l4vjJF3CHIUBBWW9gPFm0sYWI5ZIbGNuZ8JAdYWxjH3MyFR+t05WSGqik/neAUKrnhFE8YLCTkFN2E1ZySrla2MgjujUlhJQVpqFDysXGe4w4WQ8oyslPg3u2ss1E/Uj2tR/KtAwUO9NGmZr9rN1VVp1HPhrcCnKiWW4EkLpt8dz4b9q13SNSog9ckpRPoVFhLmFd3X9IEChSgkRCXRt1nAhkgpZEnEL+6cVcCDYJWSQnGHinraVrx1wIfE1YUDVMrUtz6n4B4FIghd84sKbt7VwZuJISIKfXXgXIKcQAKJKDtL4RKErnOk6uscSJ3K+7rCdY5zMS22mAysMxJSlguViynnij1kQnSyhqEbOnBjW6lZ0GNCCNUZuqfYLOC0PVivspQn3i277cFp4BRpI17L8zS3gcNpRRULBOMgZ/BbUbymmlfCBnLVjpQhaqpx24P1GxTBVodyUSF5itqDgkanZ/UGg95rUSlBixud+bRsc2k+59NGz2cg8Hb7dMloI5oGPd3++0Oa9LjJyMbIMG7KZ3CGjQCVrSzrCDCfYSYxljVkY1njvLFsPgNmelTus0bl/uiiUXlOQ/98Pl84yRfVDzEa//VPSnL6OEb0mc/x4z7ziUBN8oOl5sd+sHSp/ANc8sfGDvmuMAAAAABJRU5ErkJggg==')
}

.music-ani {
    animation: musicRound 1s infinite linear;
    -webkit-animation: musicRound 1s infinite linear
}

@keyframes musicRound {
    0% {
        transform: rotate(0deg)
    }
    100% {
        transform: rotate(360deg)
    }
}

@-webkit-keyframes musicRound {
    0% {
        -webkit-transform: rotate(0deg)
    }
    100% {
        -webkit-transform: rotate(360deg)
    }
}

.scroll-box {
    -webkit-overflow-scrolling: touch;
    overflow: auto
}

.warp {
    position: relative;
    width: 100%;
    max-width: 750px;
    height: 100%;
    overflow: hidden;
    margin: auto;
    box-sizing: border-box;
}

.page {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.wrap {
    width: 100%;
    height: 23.12rem;
    background: url('../images/bg3.png') no-repeat 0 0/100% 100%;
}

.logo {
    display: block;
    width: 6.88rem;
    margin: auto;
    padding-top: 0.2rem;
}

.desc {
    padding: 0.64rem 0.37rem  0.37rem;
}

.desc p {
    line-height: 0.4rem;
    font-size: 0.27rem;
    color: #fff;
    text-indent: 2em;
}

.content {
    position: relative;
    margin-top: -0.28rem;
}

.swiper-container,
.curr-tit {
    position: relative;
}

.swiper-container {
    width: 4.9rem;
    height: 10.08rem;
    margin-left: 1.45rem;
}

.swiper-slide img {
    width: 100%;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
}

.swiper-slide span {
    position: absolute;
    top: 0.94rem;
    right: 0.1rem;
    display: block;
    width: 0.8rem;
    height: 0.32rem;
    line-height: 0.32rem;
    background: rgba(255, 255, 255, .7);
    font-size: 0.18rem;
    font-weight: bold;
    color: #929292;
    border-radius: 0.16rem;
    text-align: center;
}

.nav-wrapper {
    position: absolute;
    left: 0;
    top: 1.3rem;
    width: 1.55rem;
    padding-left: 0.26rem;
    box-sizing: border-box;
}

.nav-wrapper li {
    position: relative;
    width: 0.95rem;
    height: 0.44rem;
    line-height: 0.44rem;
    margin-bottom: 0.2rem;
    font-size: 0.3rem;
    color: #292929;
    border-radius: 0.05rem;
    text-align: center;
}

.nav-wrapper li.active {
    background: #2fbbd1;
    color: #fff;
}

.nav-wrapper li.active::after {
    position: absolute;
    left: 1rem;
    top: 50%;
    display: block;
    content: '';
    width: 0.15rem;
    height: 0.26rem;
    background: url('../images/arrow.png') no-repeat 0 0/100% 100%;
    margin-top: -0.13rem;
}

.curr-tit {
    width: 5.8rem;
    line-height: 0.37rem;
    background: #fff;
    margin: 0.26rem 0 0 1.05rem;
    padding: 0.2rem 0.4rem 0.2rem 0.35rem;
    font-size: 0.3rem;
    color: #282828;
    border-radius: 0.14rem;
    box-sizing: border-box;
}

.curr-tit a {
    color: #282828;
}

.curr-tit::before {
    position: absolute;
    top: 0.24rem;
    left: 0;
    display: block;
    content: '';
    width: 0.05rem;
    height: 0.3rem;
    background: #30d8c9;
    border-radius: 0.03rem;
}


.instruct {
    position: absolute;
    top: 1.95rem;
    right: 0.22rem;
    width: 0.52rem;
    height: 0.48rem;
    background: url('../images/finger.png') no-repeat 0 0/100% 100%;
}

.instruct::before,
.instruct::after {
    position: absolute;
    left: -2px;
    content: '';
    width: 0.29rem;
    height: 0.96rem;
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.instruct::before {
    top: -0.98rem;
    background-image: url('../images/arrow-up.png');
    animation: up 1s ease infinite;
}

.instruct::after {
    top: 0.36rem;
    background-image: url('../images/arrow-down.png');
    animation: down 1s ease infinite;
}

@keyframes up {
    50% {
        transform: translateY(-20px);
    }
}

@keyframes down {
    50% {
        transform: translateY(20px);
    }
}