body.loading {
    position: fixed;
    width: 100%;
}

body.no-scroll {
    overflow: hidden;
}

.html-text-component {
    padding: 0;
}

.raffle-container {
    width: 100%;
}

.raffle-container * {
    box-sizing: border-box;
}

.raffle-container img {
    width: 100%;
}

.raffle-container .ra-red {
    color: #ce0e2d;
}

.raffle-container .ra-rel {
    position: relative;
}

.raffle-container .ra-abo {
    position: absolute;
}

.raffle-container .ra-flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.raffle-container .ra-s1 {
    width: 100vw;
    margin: 0 auto;
}

.raffle-container .ra-s1 .s1-img {
    width: 32.5vw;
}

.raffle-container .ra-s1 .s1-text {
    width: 22.395833vw;
    text-align: center;
    margin-right: 2.604167vw;
}

.raffle-container .ra-s1 .s1-desc {
    width: 20.833333vw;
    margin: 0 auto;
    margin-top: 2.34375vw;
    font-size: 0.9375vw;
    line-height: 1.6;
}

.raffle-container .ra-s1 .s1-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 3.125vw;
}

.raffle-container .ra-s1 .s1-btn1 {
    font-size: 1.25vw;
    font-weight: bold;
    margin-right: 1.041667vw;
}

.raffle-container .ra-s1 .s1-btn2 a {
    font-size: 0.625vw;
    color: #ffffff;
    font-weight: bold;
    padding: 0.729167vw 1.822917vw;
    border-radius: 2.5vw;
    background-color: #000000;
    cursor: pointer;
}

.raffle-container .ra-s1 .s1-btn2 a:hover {
    background-color: #707070;
}

.raffle-container .ra-bg {
    background-color: #f5f5f5;
    padding-bottom: 3.125vw;
    position: relative;
}

.raffle-container .ra-title {
    font-size: 2.291667vw;
    text-align: center;
    font-weight: bold;
    line-height: 1.25;
    padding-top: 2.447917vw;
    padding-bottom: 1.71875vw;
}

.raffle-container .ra-contenr {
    width: 61.979167vw;
    margin: 0 auto;
}

.raffle-container .ra-s2 {
    position: relative;
}

.raffle-container .ra-s2 .ra-s2-text {
    position: absolute;
    top: 9vw;
    left: 50%;
    transform: translateX(-50%);
    font-size: 1.875vw;
    font-weight: 700;
    color: #ce0e2d;
    line-height: 1.2;
    text-align: center;
    z-index: 3;
    display: none;
}

.raffle-container .ra-s2 .ra-s2-mask {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    display: none;
}

.raffle-container .ra-s3 {
    display: none;
    position: relative;
}

.raffle-container .ra-s3 .s3-text {
    width: 29.6875vw;
    top: 4.47vw;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
}

.raffle-container .ra-s3 h2 {
    font-size: 3.333333vw;
    font-weight: 700;
    line-height: 1.3125;
    margin-bottom: 1.041667vw;
    margin: 2.29vw 0 0.833vw;
}

.raffle-container .ra-s3 .ra-coupon-code-text {
    font-size: 1.25vw;
    line-height: 1.66;
    margin: 0;
    margin-bottom: 0.468vw;
    font-weight: 500;
}

.raffle-container .ra-s3 .ra-coupon-time {
    font-size: 1.25vw;
    line-height: 1.5;
    margin: 0;
    margin-bottom: 0.468vw;
    color: rgba(0, 0, 0, 0.5);
}

.raffle-container .ra-s3 .ra-color {
    color: #d20a2c;
}

.raffle-container .ra-s3 .s3-writing {
    font-size: 1.25vw;
    color: #000000;
    width: 30vw;
    height: 3.333333vw;
    line-height: 3.333333vw;
    background-color: #e6e6e6;
    top: 24.739583vw;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    border-radius: 1.666667vw;
    display: none;
}

.raffle-container .ra-button {
    align-items: center;
    justify-content: center;
    margin-top: 1.25vw;
    display: none;
}

.raffle-container .ra-button .ra-btnText:first-child {
    margin-right: 2.5vw;
}

.raffle-container .ra-button .ra-btnText {
    font-size: 0.677083vw;
    color: #ffffff;
    font-weight: bold;
    line-height: 1.385;
    padding: 0.78125vw 1vw;
    min-width: 6.25vw;
    border-radius: 4.895833vw;
    background-color: #ce0e2d;
    text-align: center;
    cursor: pointer;
}

.raffle-container .ra-button .ra-btnText.disabled {
    background-color: #b3b3b3;
}

.raffle-container .ra-s4 {
    position: fixed;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgba(0, 0, 0, 0.4);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
    z-index: -1;
}

.raffle-container .ra-s4 .s4-bomb {
    width: 34.166667vw;
}

.raffle-container .ra-s4 .s4-close {
    width: 2.5vw;
    margin-bottom: 1.041667vw;
    margin-left: 31.25vw;
    cursor: pointer;
}

.raffle-container .ra-s4 .s4-bg {
    background: #fff;
    border-radius: 0.416667vw;
}

.raffle-container .ra-s4 h2 {
    font-size: 2.135417vw;
    font-weight: bold;
    text-align: center;
    line-height: 1.25;
    padding-top: 1.5625vw;
}

.raffle-container .ra-s4 .s4-icon {
    width: 25.78125vw;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 1.875vw;
}

.raffle-container .ra-s4 .s4-icon dl {
    width: 5.208333vw;
    cursor: pointer;
}

.raffle-container .ra-s4 .s4-icon dl dt {
    width: 4.375vw;
    margin: 0 auto;
}

.raffle-container .ra-s4 .s4-icon dl dd {
    font-size: 1.09375vw;
    text-align: center;
    margin-top: 0.520833vw;
}

.raffle-container .ra-s4 .s4-text {
    width: 27.8125vw;
    margin: 0 auto;
    margin-top: 2.083333vw;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.raffle-container p {
    line-height: 1.6;
}

.raffle-container .ra-s4 .s4-href {
    font-size: 1.1975vw;
    line-height: 1.3;
    width: 27.291667vw;
    margin: 0 auto;
    margin-top: 1.041667vw;
    padding-bottom: 1.875vw;
    color: #656565;
    cursor: pointer;
    word-break: break-all;
}

.raffle-container .ra-s4 .s4-text p {
    font-size: 1.354167vw;
    font-weight: bold;
    margin-left: 0.260417vw;
}

.raffle-container .ra-s4 .s4-text img {
    width: 1.302083vw;
    cursor: pointer;
}

.raffle-container .ra-toast {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1000;
    min-width: 30vw;
    background-color: #b3b3b3;
    color: #ffffff;
    line-height: 1.33;
    font-size: 1.25vw;
    padding: 0.83vw 2vw;
    font-weight: 700;
    border-radius: 1.7vw;
    text-align: center;
    display: none;
}

.raffle-container .ra-tips-text-list {
    display: none;
}

.raffle-container .raffle-loading-wrap {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1000;
    background-color: #fff;
    display: none;
}

body.loading .raffle-container .raffle-loading-wrap {
    display: block;
}

.raffle-container .raffle-loading {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}
.raffle-container .raffle-up-tips {
    display: none;
    width: 100%;
    padding: 0 20px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    font-size: 14px;
    line-height: 1.375;
    color: #000;
}

.raffle-container .raffle-loading .loading-icon {
    width: 46px;
    animation: loading-animation 0.9s infinite linear;
}

.raffle-container .raffle-loading .loading-text {
    font-size: 12px;
    color: #989898;
    margin-top: 24px;
    line-height: 1.375;
}

@media (max-aspect-ratio: 11/10) {
    .raffle-container .ra-flex {
        display: block;
    }
    .raffle-container .ra-s1 {
        width: 100%;
    }
    .raffle-container .ra-s1 .s1-img {
        width: 100%;
    }
    .raffle-container .ra-s1 .s1-text {
        width: 70.138889vw;
        margin: 0 auto;
        margin-top: 2.777778vw;
    }
    .raffle-container .ra-s1 .s1-desc {
        width: 70.833333vw;
        margin-top: 2.777778vw;
        font-size: 3.333333vw;
    }
    .raffle-container .ra-s1 .s1-btn {
        display: none;
    }
    .raffle-container .ra-contenr {
        width: 100%;
        margin-top: 7.777778vw;
    }
    .raffle-container .ra-bg {
        background-color: #fff;
        padding-bottom: 0;
    }
    .raffle-container .ra-title {
        font-size: 6.111111vw;
        padding-top: 0;
        padding-bottom: 0;
        position: absolute;
        top: 5.555556vw;
        text-align: center;
        width: 100%;
        z-index: 3;
    }
    .raffle-container .ra-s2 .ra-s2-text {
        top: 34.444vw;
        font-size: 5vw;
    }
    .raffle-container .ra-s3 .s3-text {
        width: 79.166667vw;
        top: 22.2vw;
    }
    .raffle-container .ra-s3 h2 {
        margin-top: 6.1vw;
        font-size: 8.888889vw;
        margin-bottom: 2.222vw;
    }
    .raffle-container .ra-s3 .ra-coupon-code-text {
        font-size: 3.333333vw;
        margin-bottom: 1.25vw;
    }
    .raffle-container .ra-s3 .ra-coupon-time {
        font-size: 3.333333vw;
    }
    .raffle-container .ra-s3 .s3-writing {
        font-size: 3.333333vw;
        width: 80vw;
        height: 8.888889vw;
        line-height: 8.888889vw;
        bottom: 0;
        top: -4.444444vw;
        border-radius: 4.444444vw;
    }
    .raffle-container .ra-mobshow {
        display: block;
    }
    .raffle-container .ra-button {
        position: absolute;
        bottom: 8.611111vw;
        text-align: center;
        width: 100%;
        margin-top: 0;
    }
    .raffle-container .ra-button .ra-btnText:first-child {
        margin-right: 6.666667vw;
    }
    .raffle-container .ra-button .ra-btnText {
        font-size: 3.611111vw;
        padding: 4.166667vw 1vw;
        min-width: 33.333vw;
        text-align: center;
        border-radius: 13.055556vw;
    }
    .raffle-container .ra-s4 .s4-bomb {
        width: 91.111111vw;
    }
    .raffle-container .ra-s4 .s4-close {
        width: 6.666667vw;
        margin-bottom: 2.777778vw;
        margin-left: 83.333333vw;
    }
    .raffle-container .ra-s4 .s4-bg {
        background: #fff;
        border-radius: 1.111111vw;
    }
    .raffle-container .ra-s4 h2 {
        font-size: 5.694444vw;
        padding-top: 4.166667vw;
    }
    .raffle-container .ra-s4 .s4-icon {
        width: 68.75vw;
        margin-top: 5vw;
    }
    .raffle-container .ra-s4 .s4-icon dl {
        width: 13.888889vw;
    }
    .raffle-container .ra-s4 .s4-icon dl dt {
        width: 11.666667vw;
    }
    .raffle-container .ra-s4 .s4-icon dl dd {
        font-size: 2.777778vw;
        margin-top: 1.388889vw;
    }
    .raffle-container .ra-s4 .s4-text {
        width: 74.166667vw;
        margin-top: 2.083333vw;
    }
    .raffle-container .ra-s4 .s4-text p {
        font-size: 3.6vw;
        margin-left: 0.694444vw;
    }
    .raffle-container .ra-s4 .s4-href {
        font-size: 3.194vw;
        width: 72.777778vw;
        margin-top: 2.777778vw;
        padding-bottom: 6.666667vw;
    }
    .raffle-container .ra-s4 .s4-text img {
        width: 3.472222vw;
    }
    .raffle-container .ra-toast {
        min-width: 80vw;
        max-width: 100%;
        font-size: 3.33vw;
        font-weight: 500;
        padding: 2.22vw 2vw;
        border-radius: 4.85vw;
    }
}

@keyframes loading-animation {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}