body {
    line-height: 1;
}

.container {
    min-height: 100vh;
    padding-bottom: .4rem;
}

.banner {
    display: block;
    width: 100%;
}

.query-btn {
    position: absolute;
    right: 0;
    top: 5rem;
    width: 1.59rem;
    height: .66rem;
}

.ad img {
    width: 100%;
}

.content {
    margin: .2rem auto .5rem;
    padding: .44rem 0;
    width: 6.9rem;
    background-color: #fff;
    border-radius: .4rem;
}

.golden-input-warp {
    margin: 0 auto .29rem;
    position: relative;
    display: block;
    padding: .22rem 0 0 .24rem;
    width: 6.1rem;
    height: .9rem;
    box-sizing: border-box;
    /*background-color: #fff;*/
}


.input-warp input, .golden-input-warp input {
    display: block;
    margin: 0;
    border: none;
    width: 5.5rem;
    height: .5rem;
    line-height: .5rem;
    background-color: transparent;
    font-size: .3rem;
    outline: none;
}


.golden-code-input-warp {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    margin: 0 auto .2rem;
    padding: .12rem 0 0 .24rem;
    width: 6.1rem;
    height: .9rem;
    box-sizing: border-box;
    border-radius: .1rem;
}

.golden-input-warp::after, .golden-code-input-warp::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 200%;
    height: 200%;
    border: 1px solid red;
    transform-origin: 0 0;
    transform: scale(.5);
    border-radius: .2rem;
    pointer-events: none;
}

.code-input-warp input, .golden-code-input-warp input {
    display: block;
    margin: 0;
    border: none;
    width: 3rem;
    height: .5rem;
    line-height: .5rem;
    background-color: transparent;
    font-size: .3rem;
    outline: none;
}

.code-btn, .golden-code-btn {
    position: relative;
    width: 1.94rem;
    height: .4rem;
    font-family: PingFang-SC-Medium;
    font-size: .3rem;
    cursor: pointer;
    text-align: center;
    line-height: .38rem;
}

.code-btn::before, .golden-code-btn::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 1px;
    height: 100%;
    background-color: #e6e6e6;
}

.pic-input-wrap {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    margin: 0 auto .2rem;
    width: 6.1rem;
    height: 1.02rem;
    box-sizing: border-box;
}

.pic-input-wrap label,
.pic-input-wrap input {
    position: relative;
    width: 3.7rem;
    height: 1.02rem;
    box-sizing: border-box;
}

.pic-input-wrap input {
    padding-left: .24rem;
    border: .02rem solid #cfb587;
    border-radius: .51rem;
}


.pic-code-btn .pic-code {
    display: block;
    width: 2.1rem;
    height: 1.02rem;
    border-radius: .51rem;
}

.order-query-input-warp,
.order-query-input-warp input {
    display: block;
    box-sizing: border-box;
    margin: 0 auto .29rem;
    width: 4.5rem;
    height: 0.9rem;
    background-color: #fff;
    border-radius: 0.45rem;
}

.order-query-input-warp input {
    padding-left: .27rem;
    border: .01rem solid #cfb587;
}


.exchange-btn {
    margin: .28rem auto 0;
    width: 6.04rem;
    height: 1.02rem;
    font-size: 0.34rem;
    color: #fbfeff;
    text-align: center;
    line-height: 1.02rem;
    background-image: linear-gradient(0deg,
    #376aeb 0%,
    #48a7ff 100%),
    linear-gradient(
            #fff,
            #fff);
    background-blend-mode: normal,
    normal;
    border-radius: 0.51rem;
}


.recharge-btn {
    margin: .3rem auto 0;
    display: flex;
    justify-content: center;
    width: 5rem;
    height: .9rem;
    line-height: .9rem;
    font-size: .28rem;
    font-weight: 700;
    color: #fff;
    box-sizing: border-box;
    background-blend-mode: normal,
    normal;
    border-radius: .45rem;
}


.tip-wrap {
    box-sizing: border-box;
    position: relative;
    margin: 0 auto;
    padding: .4rem .36rem .64rem;
    width: 6.9rem;
    background-color: #fff;
    font-size: .28rem;
    line-height: .41rem;
    color: #f4daa2;
    border-radius: .4rem;
}

.tip-wrap div:first-of-type {
    display: flex;
    justify-content: center;
    padding-bottom: .34rem;
}

.tip-wrap .title {
    position: relative;
    font-size: .3rem;
    font-weight: 700;
    color: #666;
}


.tip-wrap .tip {
    font-size: .26rem;
    font-weight: normal;
    font-stretch: normal;
    line-height: .44rem;
    color: #666;
}

.modal {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: rgba(0, 0, 0, .58);
}

.modal .m-content {
    position: relative;
    margin: 3.4rem auto 0;
    padding-bottom: .6rem;
    width: 6rem;
    /*height: 4.19rem;*/
    background-color: #fff;
    border-radius: .2rem;
}

.m-content .golden-code-input-warp {
    width: 4.8rem;
}

.m-content .golden-code-input-warp input {
    width: 2rem;
}

.m-content .m-title {
    height: 1.46rem;
    line-height: 1.46rem;
    font-family: PingFang-SC-Medium;
    font-size: .32rem;
    font-weight: 700;
    color: #333;
    text-align: center;
}

.m-content .golden-title {
    color: #ff504b;
}

.query-input-warp, .golden-input-warp {
    width: 4.8rem;
}

#queryExchangeCodeBtn {
    display: block;
    margin: .3rem auto 0;
    height: .9rem;
    width: 4.5rem;
    line-height: .9rem;
    border-radius: .45rem;
    text-align: center;
    font-size: .34rem;
}

.close-btn {
    position: absolute;
    right: .2rem;
    top: .2rem;
    width: .24rem;
    height: .24rem;
}

a,
img,
a:focus {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

#popup, .second-confirm {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 11;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4);
    display: none;
}

.second-confirm-popup-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    box-sizing: border-box;
    width: 5.82rem;
    height: 3.49rem;
    background-color: #fff;
    border-radius: 0.4rem;
    text-align: center;
    overflow: hidden;
}

.known-btn {
    width: 5.05rem;
    height: .8rem;
    font-size: .34rem;
    align-items: center;
    color: #fff;
    border-radius: 0.4rem;
    background-color: #000;
}

.recharge-cancel-btn {
    border-right: 1px solid #f1f1f1;
}

.second-confirm {
    z-index: 10;
}

.second-confirm-popup-buttons {
    margin: .42rem auto 0;
    display: flex;
    justify-content: center;
    width: 100%;
    cursor: pointer;
}

.recharge-confirm-btn, .recharge-cancel-btn {
    width: 2rem;
    height: .7rem;
    line-height: .7rem;
    text-align: center;
    background-color: #fff;
    border-radius: 0.35rem;
    border: solid 0.02rem #999;
    font-size: 0.3rem;
    color: #999;
}

.recharge-cancel-btn {
    margin-right: .36rem;
}

.second-remind-text {
    margin-top: .26rem;
    font-size: .24rem;
    letter-spacing: -.01rem;
    color: #999;
}


/**
 使用说明，开屏弹窗
 */
.popup-content-prompt {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: .37rem 0 .44rem;
    box-sizing: border-box;
    width: 5.93rem;
    height: 7.03rem;
    background-color: #fff;
    border-radius: .4rem;
    text-align: center;
}

.popup-buttons {
    position: relative;
    display: flex;
    justify-content: space-between;
    margin: 0 auto;
    bottom: 0;
    width: 5.05rem;
    cursor: pointer;
}

.popup-content-prompt .open-screen-pop-title {
    text-align: center;
    width: 100%;
    font-size: 0.38rem;
    font-weight: bolder;
}

.second-confirm .open-screen-pop-title {
    margin-top: .45rem;
    font-size: 0.36rem;
    color: #999;
}

.popup-content-prompt .popup-content-text {
    margin: .52rem auto 0;
    width: 5.06rem;
    height: 3.45rem;
    text-align: left;
    overflow: scroll;
    box-sizing: border-box;
    font-size: 0.26rem;
    line-height: .4rem;
    color: #666;
}

.popup-content-prompt .popup-content-text img {
    width: 100%;
}

.popup-content-prompt .popup-content-text p,
.popup-content-prompt .popup-content-text span{
    line-height: .30rem;
}


.checked-wrap {
    min-height: 10px;
    display: flex;
    align-items: center;
    padding: .42rem .44rem;
    width: 100%;
}

.checked-wrap-info {
    display: flex;
    align-items: center;
    font-size: 0.26rem;
    color: #666;
}

.checked {
    margin-right: .05rem;
    width: .25rem;
    height: .25rem;
}

.input-warp, .code-input-warp {
    margin: 0 auto .29rem;
    position: relative;
    display: block;
    padding: .27rem 0 0 .24rem;
    box-sizing: border-box;
    width: 6.04rem;
    height: 1.02rem;
    border-radius: 0.51rem;
    /*background-color: #fff;*/
}

.code-input-warp {
    display: flex !important;
    justify-content: space-between;
    align-items: baseline;
}


.input-warp:after,
.code-input-warp:after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    border: 1px solid red;
    pointer-events: none;
    border-radius: 0.51rem;
}


/*.agree-choose {*/
/*    width: .35rem;*/
/*    height: .35rem;*/
/*}*/
.check {
    margin-right: .05rem;
    /*相对定位 */
    position: relative !important;
    /*清除默认样式checkbox，webkit为谷歌内核，moz为火狐内核 */
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    /*去除边框 */
    outline: none !important;
    width: .25rem !important;
    height: .25rem !important;
    background: #fff !important;
    border: .01rem solid #ddd !important;
    /*将边框设置为原型 */
    border-radius: 50% !important;
    /* transition: background 0.1s;更改颜色的过渡 */
}

/*设置选中时的伪类样式*/
.check:checked::after { /*添加一个伪类选择器，通过定位，相当于给复选框里边加一个内容 */
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    height: .15rem;
    width: .15rem;
    background-color: #000;
    border: .02rem solid #fff;
    border-radius: .15rem;
}