.gift-wrapper {
    padding: .42667rem
}

.gift-wrapper .banner {
    width: 100%;
    margin-bottom: .32rem;
    aspect-ratio: 4/1;
    -webkit-aspect-ratio: 4/1
}

.gift-wrapper .banner img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.gift-wrapper .card {
    padding: .32rem;
    background-color: var(--bg_color_L2);
    border: .02667rem solid var(--Stroke_color);
    border-radius: .21333rem;
    margin-bottom: .32rem
}

.gift-wrapper .title {
    font-size: .34667rem;
    color: var(--text_secondary);
    margin-bottom: .32rem
}

.gift-wrapper .inputCode {
    width: 100%;
    height: .93333rem;
    margin-bottom: .32rem;
    background-color: var(--bg_color_L4);
    border: .02667rem solid var(--Stroke_color);
    border-radius: .21333rem;
    padding: 0 .32rem;
    line-height: .93333rem;
    box-sizing: border-box;
    outline: none;
    font-size: .32rem;
    color: var(--text_primary);
    min-width: 0
}

.gift-wrapper .inputCode::placeholder {
    color: var(--text_placeholder);
    font-size: .32rem
}

.gift-wrapper .num {
    font-size: .34667rem;
    color: #fff;
    margin-bottom: .32rem
}

.gift-wrapper .num span {
    font-size: .37333rem;
    color: #ffe76b
}

.gift-wrapper .handle {
    width: 100%;
    display: flex;
    justify-content: center
}

.gift-wrapper .handle .btn {
    width: 6.66667rem;
    height: 1.17333rem;
    color: var(--text_btn_main);
    text-align: center;
    font-size: .42667rem;
    height: 1.06667rem;
    line-height: .53333rem;
    background: var(--main_gradient_color, linear-gradient(180deg, #06D6FD 0%, #0070F4 100%));
    font-weight: 600;
    border-radius: .66667rem;
    background-size: cover;
    display: flex;
    justify-content: center;
    align-items: center
}

.gift-wrapper .contact {
    display: flex;
    justify-content: center;
    gap: .4rem
}

.gift-wrapper .contact .btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .16rem;
    width: 4rem;
    font-size: .32rem;
    padding: .13333rem .32rem;
    border: .02667rem solid var(--Stroke_color);
    background-color: var(--bg_color_L4);
    border-radius: .21333rem;
    color: var(--text_secondary)
}

.gift-wrapper .contact .icon {
    width: .64rem;
    height: .64rem;
    flex-shrink: 0
}

.gift-wrapper .contact span {
    display: inline-block;
    height: auto;
    word-break: auto-phrase;
    line-height: 1.2;
    flex: 0;
    flex-basis: 1.73333rem
}

.gift-wrapper article {
    max-width: 100vw
}

.gift-wrapper article * {
    max-width: 100%;
    height: auto
}

.record-card .record-list li {
    display: flex;
    background: var(--bg_color_L3, #304059)
}

.record-card .record-list li>div {
    flex: 1;
    height: 1.04rem;
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--text_primary, #D4E8FF);
    text-align: center;
    font-size: .37333rem
}

.record-card .record-list li:nth-child(odd) {
    background: var(--bg_color_L2, #202733)
}

.record-card .record-list li:last-child {
    border-radius: 0 0 .21333rem .21333rem
}

.record-card .record-list li.record-head {
    border-radius: .21333rem .21333rem 0 0;
    background: var(--secondary_color2, #304059)
}

.record-card .record-list li+li {
    border-top: .02667rem solid var(--Dividing_line_color, #354053)
}

.record-card .record-list li .record-amount {
    color: var(--text_secondary);
    border-left: .02667rem solid var(--Dividing_line_color, #354053)
}

.rebate-icon {
    width: .64rem;
    height: .64rem
}