body {
    padding-bottom: env(safe-area-inset-bottom);
    margin: 0;
    font-size: 32px;
    font-family: PingFangSC-Regular,DroidSansFallback,Microsoft YaHei,\\5FAE\8F6F\96C5\9ED1,Arial,Helvetica,Verdana,sans-serif;
    transition: scroll .5s;
    padding: 0 0 env(safe-area-inset-bottom);

    height: 100%;
	}
		#app {
    min-height: 100vh;
    height: 100%;
    max-width: 10rem;
    margin: 0 auto;
}

* {
    box-sizing: border-box;
}
		.payment-unlock-page {
    background: #fff url(../img/bg_base.e968f4e.png) repeat;
    background-size: 1.6rem;
    color: #4c4b58;
    min-height: 100vh;
    position: relative;
    z-index: 1;
    overflow: hidden;
    padding-bottom: 1.6rem;
}
.payment-unlock-page:before {
    content: "";
    width: 9.98667rem;
    height: 7.92rem;
    background: url(../img/top-bg.2057572.png);
    background-size: 100% 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
}
.payment-unlock-title {
    width: 8.24rem;
    height: 0.49333rem;
    margin: 1.86667rem auto 0;
    background: url(../img/payment_unlock_title.119cadb.png) no-repeat 50%;
    background-size: 100% 100%;
}
.unlock-desc {
    background: #fff;
    box-shadow: 0 1px 4px 0 hsl(54deg 11% 50% / 47%);
    margin: 0.4rem 0.53333rem 0;
    border-radius: 0.34667rem;
    padding: 0 0.4rem;
    overflow: hidden;
}
.unlock-desc .unlock-desc-top {
    margin: 0.61333rem 0 0;
}
.unlock-desc .unlock-desc-pic {
    width: 3.50667rem;
    height: 1.96rem;
    background: url(../img/payment_unlock_desc_pic.d885275.png) no-repeat 50%;
    background-size: 100% 100%;
    margin-right: 0.8rem;
    margin-top: 0.45333rem;
}
.fs-14 {
    font-size: 14px;
}

.text--bold {
    font-weight: 700;
}
.unlock-desc .unlock-desc-tis {
    margin-bottom: 0.26667rem;
}
.fs-14 {
    font-size: 14px;
}
.text--bold {
    font-weight: 700;
}
.color--light {
    color: #999;
}


.flex {
    display: flex;
}
.price-red {
    color: #ff3d3d;
}
mt--10 {
    margin-top: 0.13333rem;
}

.unlock-desc .unlock-desc-btn {
    height: 1.17333rem;
    background: #ffdd2b;
    border-radius: 0.58667rem;
    color: #4c4b58;
    line-height: 1.17333rem;
    text-align: center;
    font-size: .42667rem;
    margin-bottom: 0.53333rem;
}
.mt--60 {
    margin-top: 0.8rem;
}
.unlock-desc .unlock-desc-text {
    margin-bottom: 0.53333rem;
    font-weight: 400;
    color: #63636b;
    line-height: .56rem;
}
.padding-block-between {
    padding: 0.2rem 0.53333rem 0.4rem;
}

.unlock-box {
    position: relative;
    margin: 0.4rem 0 0;
    overflow: hidden;
}
.unlock-box-title {
    height: 0.93333rem;
    border-radius: 0.10667rem;
    font-size: .50667rem;
    font-weight: 600;
    color: #4c4b58;
    line-height: .93333rem;
    text-align: center;
    position: relative;
    margin-bottom: 0.26667rem;
}
h1, h2, h3, h4, h5, h6, p, ul {
    margin: 0;
    padding: 0;
}
.unlock-box-title :after, .unlock-box-title :before {
    content: "";
    display: inline-block;
    width: 1.06667rem;
    height: 0.26667rem;
    position: absolute;
    top: 50%;
    margin-top: -0.13333rem;
}

.unlock-box-title :before {
    background: url(../img/title-left.cccfa67.png);
    background-size: 100% 100%;
    left: 0.26667rem;
}
.unlock-box-title :after {
    background: url(/statics/xgcs/title-rigth.23689bf.png);
    background-size: 100% 100%;
    right: 0.26667rem;
}

.unlock-box-title :after, .unlock-box-title :before {
    content: "";
    display: inline-block;
    width: 1.06667rem;
    height: 0.26667rem;
    position: absolute;
    top: 50%;
    margin-top: -0.13333rem;
}
.unlock-box-content {
    background: #fff;
    box-shadow: 0 1px 4px 0 hsl(54deg 11% 50% / 47%);
    border-radius: 0.34667rem;
    overflow: hidden;
}
.advertising-payintro {
    margin-top: 0.6rem;
}
.advertising-payintro img {
    max-width: 100%!important;
}
.unlock-bottom {
    width: 100%;
    height: 2.77333rem;
    background: #fff;
    box-shadow: 0 0.04rem 0.16rem 0 rgb(0 0 0 / 7%);
    border-radius: 0.34667rem 0.34667rem 0 0;
    position: fixed;
    left: 0;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    z-index: 2;
}
.unlock-bottom .unlock-bottom-btn {
    width: 9.2rem;
    height: 1.17333rem;
    background: #ffdd2b;
    border-radius: 0.10667rem;
    text-align: center;
    line-height: 1.17333rem;
    font-size: .42667rem;
    font-weight: 400;
    color: #4c4b58;
}
.nologin-tis-cont {
    width: 0.65333rem;
    height: 2.08rem;
    background: #fff;
    box-shadow: 0 0.01333rem 0.05333rem 0 rgb(0 0 0 / 10%);
    border-radius: 0.26667rem 0 0 0.26667rem;
    position: fixed;
    right: 0;
    top: 2.4rem;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    z-index: 5;
}
.nologin-tis-cont:before {
    content: "";
    display: inline-block;
    width: 0.32rem;
    height: 0.32rem;
    background: url(../img/ixon-tis.d29e70a.png);
    background-size: 100% 100%;
    margin-left: 0.13333rem;
}
.nologin-tis-cont p {
    font-size: 10px;
    font-weight: 500;
    color: #4c4b58;
    line-height: 1.06667rem;
    margin-left: 0.08rem;
    writing-mode: tb-rl;
    margin-top: 0.13333rem;
}
		   .icon-weixin, .icon-zhifubao{
    display: inline-block;
    vertical-align: middle;
    width: 0.66667rem;
    height: 0.66667rem;
    }
.icon-weixin {
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEsAAAA+CAMAAABUfxaqAAAAqFBMVEUAAAD///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////8j1z1tAAAAN3RSTlMA5gP8xhcKB/kT8O3YRR3Rd2hiJg+zqYJ8b1c+Iva9t62dXDky8uHMwVI2Ltygl48qSpKMiE+kTronUgAAAqNJREFUWMOt1+l6ojAUBuBPEAQRUFFQQEVErWu1y5z7v7N5RiyLhhCcvj+rT5qcJSeCQdr3T28bQ9Na9tz1zBFeZQ0ig0pk+/OCFySuTCztWEUz5pwqGQMJ4vSIuLYr8U21qM6H2NY67yRgrqOe5JKQnlO/1B8S1LJQY0nC7JrSnVADC24CHI2amIDjjRqZcUI2LHfLSnXOVLCeKrpfqj23urKMUtLVx1z4AHAohWFVv608GCvKdBlxOKFCu2Ytxre6HTApRM9nPPHPSDswxY83VaBeluXYW3qcxd7YLk5ffRNM7w2KYdFPwDMnQb1hGiU13F8Dh9lJPRLS3qVDZb6mlGZ/mirKWiRgHQOw3g0q06J947XaIXA5Mbv27drsjJ4EaSJThUjPS1XkXgh532qZwtfgF7DqEtcUqQHxnYGkSzUGuLkQ17GDg0G1hiLBD6AeqZ58wD8ecSyBLxKxlQBAmXH+nYKDXMhYVMjnxrWf43+mSmNgXCjZEeBnF3UH6D/daUp1mnwohW0FxXq0HpvG55dFV8W0mIfiZa0AwKZ0hptx1RHLbbHoAKac1115VMhpL40q0u4BpcQcz2M5z9zHgogxncJWRQXqJM5HymEutkNC4vq4s2zGp98wSdwnfqgRq2UPJM5DZsr6dETiptyBtATWJCzIz6gxxliT95Scj7krMTgYkqj58/yeTRRzMm79pHk0I0FDZOx724S4kXRnHyQW4Io+sPO3j5X+YYdHoeDGBgAKI0T+GOFZX+x1XX4dbvdgkbZUz1CQk+JvCWzWhmrtICise3NoPoQ5/J2tTTSgu7xqSNBM3OWksCndM4jtiObUqc1u6g5eocTL3n17m6i/u6/t4GWScgl1qfAj/YpfEfSyVvx/HU/rJvgtStaKfwE+0kb65SD2QAAAAABJRU5ErkJggg==) 50% no-repeat;
    background-size: 100% auto;
}
.unlock-desc .weixinbtn{background: #00b30d;color:#fff;}
.original-price {
    display: block;
    color: #919ba2;
    font-size: 12px;
    text-decoration: line-through;
}
.price-red{font-weight: 600;font-size: 15px;}