.timer-area {
    margin-top: 4.4rem;
    margin-bottom: 4rem;
}
.timer-area > span {
    display: block;
    margin-bottom: 1.6rem;
    letter-spacing: -0.02em;
    color: var(--color-800700);
    font-weight: 500;
}
.timer-area .timer {
    display: flex;
    justify-content: center;
    gap: 1rem;
}
.timer-area .timer > div {
    flex-direction: column;
    gap: 2rem;
    color: var(--color-E1251B);
    width: 12.8rem;
}
.timer-area .timer > div.circle {
    width: 2rem;
    font-size: 9.6rem;
    font-family: 'impact';
    text-align: center;
}
.timer-area .timer > div p {
    font-size: 12rem;
    font-family: 'impact';
}
.timer-area .timer > div span {
    line-height: 1.2;
    font-size: 2.8rem;
}

@media (max-width: 1200px) {

    .timer-area {
        margin-top: 4.0rem;
        margin-bottom: 3.6rem;
    }
    .timer-area > span {
        margin-bottom: 1.2rem;
    }
    .timer-area .timer {
        gap: 0.8rem;
    }
    .timer-area .timer > div {
        gap: 1.2rem;
        width: 10.8rem;
    }
    .timer-area .timer > div.circle {
        width: 2rem;
        font-size: 6.6rem;
    }
    .timer-area .timer > div p {
        font-size: 8rem;
    }
    .timer-area .timer > div span {
        font-size: 2.2rem;
    }
}


@media (max-width: 767px) {
    .timer-area .timer {
        gap: 0.2rem;
    }
    .timer-area .timer > div {
        gap: 0.6rem;
        width:7.8rem;
    }
    .timer-area .timer > div.circle {
        width: 1.8rem;
        font-size: 4.6rem;
    }
    .timer-area .timer > div p {
        font-size: 5.6rem;
    }
    .timer-area .timer > div span {
        font-size: 1.6rem;
    }
}