- 신청 마감 임박 -
00
00
00
00
Days Hours Minutes Seconds

<style>

  .countdown-card {

    width: 320px; /* 80% of 400px */

    height: 145.6px; /* 80% of 182px */

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    gap: 5.6px; /* 80% of 7px */

    border-radius: 17.6px; /* 80% of 22px */

    border: 4.8px solid black; /* 80% of 6px */

    padding: 17.6px; /* 80% of 22px */

    margin: 0 auto;

  }


  .title {

    font-size: 17.6px; /* 80% of 22px */

    margin-top: 8.8px; /* 80% of 11px */

    margin-bottom: 5.6px; /* 80% of 7px */

    font-weight: 900; /* 80% of 950 */

  }


  .time-boxes {

    display: flex;

    margin-bottom: 3.2px; /* 80% of 4px */

  }


  .time-box {

    width: 58.4px; /* 80% of 73px */

    height: 58.4px; /* 80% of 73px */

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    gap: 3.2px; /* 80% of 4px */

    border-radius: 17.6px; /* 80% of 22px */

    border: 1.5px solid #4D4D4D; /* 80% of 1.5px */

    margin-right: 8.8px; /* 80% of 11px */

  }


  .time-box:last-child {

    margin-right: 0;

  }


  .time-box .number {

    font-size: 22px; /* 80% of 22px */

    font-weight: 700; /* 80% of 700 */

    color: #F45050;

  }


  .labels {

    display: flex;

    justify-content: space-between;

    width: 271.2px; /* 80% of 339px */

  }


  .label {

    font-size: 8.8px; /* 80% of 11px */

    color: black;

    flex: 1;

    text-align: center;

    font-weight: 200; /* 80% of 200 */

  }

</style>




<div class="countdown-card">


  <div class="title">- 신청 마감 임박 -</div>


  <div class="time-boxes">


    <div class="time-box days"> <!-- Added Day item -->


      <span class="number">00</span>


    </div>


    <div class="time-box hours">


      <span class="number">00</span>


    </div>


    <div class="time-box minutes">


      <span class="number">00</span>


    </div>


    <div class="time-box seconds">


      <span class="number">00</span>


    </div>


  </div>


  <div class="labels">


    <span class="label">Days</span> <!-- Updated label to Days -->


    <span class="label">Hours</span>


    <span class="label">Minutes</span>


    <span class="label">Seconds</span>


  </div>


</div>




<script>


function updateCounter() {


  const currentTime = new Date();


  const midnight = new Date(currentTime);


  midnight.setHours(24, 0, 0, 0); // Set to midnight




  const difference = midnight - currentTime;




  const days = Math.floor(difference / (1000 * 60 * 60 * 24)); // Calculate days


  const hours = Math.floor((difference % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));


  const minutes = Math.floor((difference % (1000 * 60 * 60)) / (1000 * 60));


  const seconds = Math.floor((difference % (1000 * 60)) / 1000);




  document.querySelector('.days .number').textContent = days.toString().padStart(2, '0'); // Update Days


  document.querySelector('.hours .number').textContent = hours.toString().padStart(2, '0');


  document.querySelector('.minutes .number').textContent = minutes.toString().padStart(2, '0');


  document.querySelector('.seconds .number').textContent = seconds.toString().padStart(2, '0');


}




updateCounter();


setInterval(updateCounter, 1000); // Update every second


</script>