* {
    padding: 0;
    margin: 0;
    outline: none;
    border: 0;
    font-style: normal;
    box-sizing: border-box;
    -webkit-appearance: none;
    list-style: none;
}

html {
    /* 基于750宽度的设计稿，1rem = 100px */
    font-size: 13.333vw;
}

body {
    background-color: #fffefa;
    font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
}

#form {
    width: 100%;
    overflow: hidden;
    color: white;
}

header {
    width: 100%;
    overflow: hidden;
    line-height: 1.2rem;
    background-color: #5F259F;
    font-size: 0.32rem;
    text-align: center;
    font-weight: bold;
}

.form-content {
    width: 100%;
    overflow: hidden;
    position: relative;
    padding: 0 .3rem .4rem;
}

.f-t {
    width: 100%;
    overflow: hidden;
    color: #212121;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.f-t-t1 {
    font-size: .3rem;
    text-align: center;
    line-height: 1rem;
}

.f-money {
    display: inline-flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    font-size: .7rem;
    color: #5F259F;
}

.f-money-small {
    font-size: .4rem;
}

.f-timer {
    font-size: .3rem;
}
#datetime {
    display: none;
}
.f-t-t2 {
    font-size: .3rem;
    margin: .35rem 0;
}
.tit-p1 {
    font-size: .3rem;
    color: #212121;
    margin: .55rem 0 .2rem;
}
.bank-div {
    width: 100%;
    overflow: hidden;
}
.bank-div-cont {
    width: 100%;
    overflow: hidden;
    margin-bottom: .3rem;
}
.bank-div-list {
    width: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: flex-start;
}
.bank-div-list > li {
    width: 100%;
    height: 1.2rem;
    overflow: hidden;
    cursor: pointer;
    background-color: #fff;
    border: 1px solid #e7e8e3;
    border-radius: .1rem;
    margin-top: .15rem;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
    padding: 0 .2rem 0 .15rem;
    position: relative;
}

.bank-div-list > li img {
    width: 1.87rem;
}
.bank-div-list > li span {
    width: .4rem;
    height: .4rem;
    border: 1px solid #999;
    border-radius: 50%;
    display: none;
}
.bank-div-list > li::after {
    content: '';
    width: .13rem;
    height: .13rem;
    transform: rotate(45deg);
    border-style: solid;
    border-width: 3px;
    border-color: #444 #444 transparent transparent;
}
.bank-div-list > li i {
    width: .44rem;
    height: .44rem;
    border-radius: 50%;
    display: none;
}
.bank-div-list > li i img {
    width: 100%;
}
.bank-div-list > li.yes span {
    display: none;
}
.bank-div-list > li.yes i {
    display: none;
}

.needQr::before {
    content: '';
    width: .5rem;
    height: .5rem;
    position: absolute;
    top: 50%;
    right: .3rem;
    background: url("sm_icon.png") no-repeat;
    background-size: cover;
    transform: translate(-50%, -50%);
    opacity: .8;
}
.tips1 {
    width: 100%;
    overflow: hidden;
    color: #FF7F9F;
    border: 1px solid #ccc;
    font-size: .28rem;
    border-radius: 5px;
    padding: .3rem;
}
.tips1 li:nth-child(1) {
    margin-bottom: .1rem;
}
.tips2 {
    width: 100%;
    overflow: hidden;
    color: #212121;
    border: 1px solid #ccc;
    font-size: .28rem;
    border-radius: 5px;
    padding: .3rem;
    margin-top: .3rem;
}
.tips2 dt {
    font-size: .34rem;
    font-weight: bold;
}
.tips2 dd{
    margin-top: .2rem;
    line-height: .38rem;
    color: #333;
}
.create-popup {
    width: 100%;
    height: 100vh;
    position: fixed;
    bottom:0;
    left:0;
    z-index: 10;
}
.create-popup > .c-pop-mask {
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,.5);
    display: block;
}
.create-popup > div {
    width: 100%;
    height: 68vh;
    background-color: #f5f5f5;
    border-radius:8px 8px 0 0;
    border-top: 1px solid #ccc;
    padding: .8rem .3rem .5rem;
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 1;
}
.c-pop-hide {
    width: .5rem;
    height: .5rem;
    border-radius: 50%;
    border: 1px solid #666;
    position: absolute;
    top: .2rem;
    right: .2rem;
}
.c-pop-hide::before, .c-pop-hide::after {
    content: '';
    position: absolute;
    background: #666;
    transform: translate(-50%, -50%) rotate(45deg);
}
.c-pop-hide::before {
    width: 60%;
    height: 1px;
    top: 50%;
    left: 50%;
}
.c-pop-hide::after {
    width: 1px;
    height: 60%;
    top: 50%;
    left: 50%;
}
#qrcode2, #qrcode3 {
    width: fit-content;
    height: fit-content;
    margin: 0 auto;
}

.ewm-btn-style {
    display: block;
    margin: .36rem auto;
    width: 100%;
    height: fit-content;
    font-size: .36rem;
    color: #fff;
    background: #5F259F;
    border-radius: 5px;
    padding: .28rem .44rem;
}
.video {
    width: 1.3em;
    height: 2.55rem;
    overflow: hidden;
    margin: .4rem auto .8rem;
    background: #cccccc;
    position: absolute;
    top: 1.5rem;
    right: .2rem;
}
.video video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
}
.pop-p {
    font-size: .32rem;
    text-align: center;
    margin-top: .55rem;
}
.pop-p li {
    line-height: .45rem;
}
.download-div {
    width: 300px;
    height: 400px;
    position: fixed;
    top: 99999px;
    left: 99999px;
    padding: .4rem;
    background: #FFF;
    z-index: 99;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.f-money-popup {
    overflow: hidden;
    text-align: center;
}
#qrcode3 {
    margin-top: .4rem;
}
.down-d-timer {
    font-size: .32rem;
    margin-top: .4rem;
}
.down-order {
    font-size: .26rem;
    margin-bottom: .4rem;
}
.download-bg {
    background: #5ac18a;
}

.popup-wt {
    width: 1.2rem;
    height: 1.2rem;
    position:fixed;
    bottom: 3rem;
    right: .24rem;
    z-index: 10;
}

.popup-wt img {
    width: 100%;
    float: left;
}

.button-style {
    outline-style: none;
    border: 1px solid #ccc;
    border-radius: 3px;
    padding: 10px 14px;
    width: 100%;
    font-size: 20px;
    margin-bottom: 10px;
}

.button-style.valid {
    background-color: #409eff;
    border: 1px solid #409eff;
}

.down-timer-text {
    display: inline-flex;
    align-items: center;
}
.down-timer-text::before {
    content: '10s';
    animation: countdown 10s steps(10) forwards;
}


@keyframes countdown {
    0% { content: "10s"; }
    10% { content: "9s"; }
    20% { content: "8s"; }
    30% { content: "7s"; }
    40% { content: "6s"; }
    50% { content: "5s"; }
    60% { content: "4s"; }
    70% { content: "3s"; }
    80% { content: "2s"; }
    90% { content: "1s"; }
    100% { content: "0s"; }
}
@media screen and (min-width: 750px) {
    html, body {
        font-size: 72px;
        max-width: 750px;
        margin: 0 auto;
    }
}