@import url('https://fonts.googleapis.com/css2?family=Kanit&display=swap');
/*-----------------------for PC-----------------------*/
@media screen and (min-width:801px) {
.countdown {
    display: block;
    width: 500px;
    height: 100px;
    margin: 0 auto;
    border: 1px solid #FF363A
  }
  .countdown li {
    display: inline-block;
    font-size: 15px;
    list-style-type: none;
    padding: 3px;
    text-transform: uppercase;
    font-family: 'Kanit', sans-serif;
      text-align: center;
  }
  .countdown li span {
    display: block;
    height: 108px;
    width: auto;
    font-size: 80px;
   /* border-radius: 20%;*/
    background: #fff;
    color: #000;
    padding: 80px 10px 0px 10px;
      font-family: 'Kanit', sans-serif;
    font-family: 'Oswald', 'Noto Sans TC', sans-serif;
    /* offset-x | offset-y | blur-radius | spread-radius | color */
    /*box-shadow: 0px 2px 10px 2px rgba(0, 0, 0, 0.3), inset 1px 1px 5px #474747;*/
    /*border: 3px solid #000000;*/
    }}
/*------------------for mobile------------------------*/
@media screen and (max-width:800px) {
  
  .countdown {
    display: inline-block;
    text-align: center;
    margin-top: 310px;
  }
  .countdown li {
    display: inline-block;
    font-size: 13px;
    list-style-type: none;
    padding: 2px;
    text-transform: uppercase;
    font-family: "Oswald";
  }
  .countdown li span {
    display: block;
    height: 60px;
    width: 60px;
    font-size: 30px;
    border-radius: 20%;
    background: #fff;
    color: #000;
    padding: 15px 10px 10px 10px;
    font-family: 'Oswald', 'Noto Sans TC', sans-serif;
    /* offset-x | offset-y | blur-radius | spread-radius | color */
    box-shadow: 0px 2px 10px 2px rgba(0, 0, 0, 0.3), inset 1px 1px 5px #474747;
    border: 3px solid #000000;
    }}