html * {
    outline: 0;
    -webkit-text-size-adjust: none;
    -webkit-tap-highlight-color: transparent
}

body, nav, dl, dt, dd, p, h1, h2, h3, h4, ul, ol, li, input, button, textarea, footer {
    margin: 0;
    padding: 0
}

body {
    font: 62.5%/1.5 -apple-system, BlinkMacSystemFont, "PingFang SC", "Helvetica Neue", STHeiti, "Microsoft Yahei", Tahoma, Simsun, sans-serif;
    -webkit-font-smoothing: antialiased;
    -webkit-text-size-adjust: 100%;
    min-width: 320px
}

h1, h2, h3, h4, h5, h6 {
    font-size: 100%
}

img {
    vertical-align: middle;
    border: 0;
    -webkit-tap-highlight-color: transparent
}

em, i {
    font-style: normal
}

img {
    max-width: 100%;
    border: 0
}

input:focus {
    outline: 0
}

table {
    border-collapse: collapse;
    border-spacing: 0
}

ol, ul, li {
    list-style: none
}

textarea {
    resize: none
}

a {
    text-decoration: none;
    color: #333
}

.cf:after {
    content: " ";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden
}

.cf {
    min-height: 1%
}

.fl {
    float: left
}

.fr {
    float: right
}

.hide {
    display: none
}

.show {
    display: block
}

.ellipsis {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden
}

.break {
    word-break: break-all;
    word-wrap: break-word
}

html {
    font-size: 100px;
    font-size: 13.33333vw
}

@media screen and (max-width: 320px) {
    html {
        font-size: 42.66667px;
        font-size: 13.33333vw
    }
}

@media screen and (min-width: 321px) and (max-width: 360px) {
    html {
        font-size: 48px;
        font-size: 13.33333vw
    }
}

@media screen and (min-width: 361px) and (max-width: 375px) {
    html {
        font-size: 50px;
        font-size: 13.33333vw
    }
}

@media screen and (min-width: 376px) and (max-width: 393px) {
    html {
        font-size: 52.4px;
        font-size: 13.33333vw
    }
}

@media screen and (min-width: 394px) and (max-width: 412px) {
    html {
        font-size: 54.93333px;
        font-size: 13.33333vw
    }
}

@media screen and (min-width: 413px) and (max-width: 414px) {
    html {
        font-size: 55.2px;
        font-size: 13.33333vw
    }
}

@media screen and (min-width: 415px) and (max-width: 480px) {
    html {
        font-size: 64px;
        font-size: 13.33333vw
    }
}

@media screen and (min-width: 481px) and (max-width: 540px) {
    html {
        font-size: 72px;
        font-size: 13.33333vw
    }
}

@media screen and (min-width: 541px) and (max-width: 640px) {
    html {
        font-size: 85.33333px;
        font-size: 13.33333vw
    }
}

@media screen and (min-width: 641px) and (max-width: 720px) {
    html {
        font-size: 96px;
        font-size: 13.33333vw
    }
}

@media screen and (min-width: 721px) and (max-width: 750px) {
    html {
        font-size: 100px;
        font-size: 13.33333vw
    }
}

@media screen and (min-width: 751px) {
    html {
        font-size: 100px
    }
}

.shareHead .hd-down {
    box-sizing: border-box
}

@media screen and (min-width: 751px) {
    html {
        font-size: 100px
    }

    body {
        width: 750px;
        margin: 0 auto
    }

    [data-dpr='1'] body {
        width: 750px;
        margin: 0 auto
    }
}

body {
    background: #2e1a57
}

.ftimg,.f-ohter{
    background: url(../images/fimg10.png) no-repeat 0 0;
    background-size: 100% 100%;
    background-color: transparent;
    width: 5.01rem;
    height: 0.63rem;
    margin: 0.5rem auto 0
}

.fttxt {
    background: #1e0f26;
    color: #63468f;
    padding: .4rem 0;
    text-align: center;
    line-height: .44rem;
    font-size: .24rem;
    margin-top: 0.42rem
}

.shareHead {
    position: relative;
    min-height: 4rem
}

.shareHead .hdimg {
    display: block;
    width: 100%
}

.shareHead .hd-down {
    position: absolute;
    left: 0;
    top: 0;
    background: rgba(0, 0, 0, 0.8);
    width: 100%;
    padding: .1rem .2rem;
    height: .9rem
}

.shareHead .hd-down .logo {
    float: left;
    width: 1.94rem;
    height: .48rem;
    margin-top: .08rem
}

.shareHead .hd-down .txt {
    float: left;
    font-size: .24rem;
    width: 3.1rem;
    height: .28rem;
    line-height: .3rem;
    border-left: 1px solid #fff;
    margin-left: .15rem;
    padding-left: .15rem;
    color: #e7bf93;
    margin-top: .2rem
}

.shareHead .hd-down .btn {
    float: right;
    width: 1.5rem;
    height: .54rem;
    background: #e7bf93;
    color: #000;
    text-align: center;
    line-height: .56rem;
    font-size: .24rem;
    border-radius: .27rem;
    margin-top: .08rem
}

.fixbtn {
    background: #1e0f26;
    height: 1rem;
    padding: 0 0 .3rem
}

.fixbtn a {
    display: block;
    width: 6.34rem;
    height: 0.87rem;
    background: url(../images/fimg12.png) no-repeat 0 0;
    background-size: 100% 100%;
    background-color: transparent;
    text-align: center;
    line-height: 0.91rem;
    font-size: .32rem;
    color: #fff;
    font-weight: bold;
    position: fixed;
    left: 50%;
    bottom: .45rem;
    margin-left: -3.05rem;
    z-index: 2
}

.shareBody {
    position: relative
}

.shareBody .wrap {
    overflow: initial;
    padding-top: 1px
}

.shareBody .panel {
    width: 7.12rem;
    margin: 0 auto
}

.shareBody .panel .panel-hd {
    overflow: hidden;
    line-height: 99
}

.shareBody .panel .panel-bd {
    background: url(../images/fimg3.png) no-repeat center 0.1rem;
    background-size: 6.87rem auto;
    background-color: #392368;
    border: #a87ff1 solid 1px;
    padding: .4rem .3rem;
    border-radius: 0.2rem;
    color: #fff;
    line-height: .45rem;
    font-size: .26rem;
    position: relative
}

.shareBody .panel .panel-bd::after {
    content: '';
    background: url(../images/fimg3.png) no-repeat 0 0;
    background-size: 100% 100%;
    background-color: transparent;
    width: 6.87rem;
    height: 0.14rem;
    position: absolute;
    bottom: 0.1rem;
    left: 50%;
    margin-left: -3.43rem
}

.shareBody .panel .panel-bd a {
    color: #62AAE6;
    text-decoration: underline
}

.shareBody .panelDesc .panel-hd {
    background: url(../images/fimg2.png) no-repeat 0 0;
    background-size: 100% 100%;
    background-color: transparent;
    height: 0.66rem
}

.shareBody .panelDesc .text {
    text-align: justify
}

.shareBody .panelJoin {
    position: relative;
    z-index: 0
}

.shareBody .panelJoin::before {
    content: '';
    background: url(../images/fimg8.jpg) no-repeat 0 0;
    background-size: 100% 100%;
    background-color: transparent;
    width: 7.5rem;
    height: 1.88rem;
    position: absolute;
    left: -0.19rem;
    top: -1.3rem;
    z-index: -1
}

.shareBody .panelJoin .panel-bd {
    padding: 0.4rem 0.4rem 0.2rem
}

.shareBody .panelJoin .panel-hd {
    background: url(../images/fimg7.png) no-repeat 0 0;
    background-size: 100% 100%;
    background-color: transparent;
    width: 4.27rem;
    height: 0.37rem;
    margin: 0 auto 0.24rem
}

.shareBody .panelJoin .arrowLine {
    padding: 0.16rem 0
}

.shareBody .panelJoin .arrowLine::before {
    display: none
}

.shareBody .join-pt1 {
    overflow: hidden
}

.shareBody .join-pt1 img {
    float: left;
    width: 1.71rem;
    height: 1.71rem;
    margin-right: .2rem;
    border: #a078e7 solid 1px;
    -webkit-box-sizing: border-box
}

.shareBody .join-pt1 p {
    font-size: .26rem;
    line-height: .44rem;
    text-align: justify;
    color: #fff;
    margin-top: .14rem
}

.shareBody .join-pt2 {
    margin-top: .25rem
}

.shareBody .join-pt2 > div {
    width: 2.9rem;
    text-align: center;
    line-height: 2.4;
    font-size: .26rem;
    color: #fff
}

.shareBody .join-pt2 > div .img {
    width: 2.9rem;
    height: 3.5rem;
    overflow: hidden;
    border: #fff solid 1px;
    box-sizing: border-box;
    border-radius: 0.1rem
}

.shareBody .join-pt2 > div .img img {
    display: block;
    width: 100%;
    height: 100%
}

.shareBody .arrowLine {
    position: relative;
    z-index: 0;
    padding-top: 0.36rem
}

.shareBody .arrowLine::before {
    content: '';
    background: url(../images/fimg6.jpg) no-repeat 0 0;
    background-size: 100% 100%;
    background-color: transparent;
    width: 100%;
    height: 2.94rem;
    position: absolute;
    left: 0;
    top: 0;
    z-index: -1
}

.shareBody .arrow {
    background: url(../images/fimg4.png) no-repeat 0 0;
    background-size: 100% 100%;
    background-color: transparent;
    display: block;
    width: .67rem;
    height: .41rem;
    margin: 0 auto;
    animation: arrow 1.5s ease-in-out infinite
}

@keyframes arrow {
    0%, 100% {
        transform: translateY(0.04rem)
    }
    50% {
        transform: translateY(-0.04rem)
    }
}

.shareBody .toolHd {
    margin-top: .3rem;
    position: relative
}

.shareBody .toolHd .logo {
    background: url(../images/tool-hd.png) no-repeat 0 0;
    background-size: 100% 100%;
    background-color: transparent;
    display: block;
    width: 2.36rem;
    height: .58rem;
    overflow: hidden;
    line-height: 99;
    margin: 0 auto
}

.shareBody .toolHd .text {
    background: url(../images/fimg5.png) no-repeat 0 0;
    background-size: 100% 100%;
    background-color: transparent;
    height: 0.34rem;
    width: 3.53rem;
    overflow: hidden;
    line-height: 999;
    margin: 0.24rem auto 0
}

.cardShow {
    margin-top: .3rem;
    overflow: hidden;
    padding-bottom: .5rem;
    position: relative;
    z-index: 1
}

.cardShow ul {
    text-align: center;
    line-height: 0;
    font-size: 0;
    white-space: nowrap
}

.cardShow li {
    display: inline-block;
    width: 4.55rem;
    height: 7.9rem;
    overflow: hidden;
    border-radius: 0.3rem;
    border: #fff solid 1px
}

.cardShow li img {
    display: block;
    width: 100%;
    height: 100%
}

.cardShow .swiper-pagination {
    text-align: center;
    line-height: 0;
    font-size: 0;
    white-space: nowrap;
    margin-top: .5rem
}

.cardShow .swiper-pagination span {
    display: inline-block;
    width: 10px;
    height: 10px;
    background: #fff;
    border-radius: 50%;
    margin: 0 .1rem;
    transition: all .4s
}

.cardShow .swiper-pagination span.swiper-pagination-bullet-active {
    background: #a179e7
}