@font-face {
    font-family: 'timefont';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2302_01@1.0/TheJamsil5Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: 'datefont';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2302_01@1.0/TheJamsil5Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
}


body {
  font-size: 1.1em;
  font-family: 'Spoqa Han Sans Neo';
  font-weight:300;
  background-image: url('../image/001.png');
  background-size: cover;
  background-repeat: initial;
  margin: 0 0;
}


        .time {padding-top: 200px; top: 10px; width: 90%; color: black; text-align: center; font-size: 2.6em; font-family: 'NEXON Lv1 Gothic OTF Bold', 'sans-serif'; font-weight:900;}

        .ampm {padding-top: 200px; padding-right: 10px; width: 100%; text-valign: bottom; text-align: center; color: gray; font-size: 0.9em; font-family:
        'NEXON Lv1 Gothic OTF Bold', 'sans-serif'; font-weight:900;}

        .time2 {padding-top: 200px; top: 10px; width: 100%; color: black; text-align: center; color: black; font-size: 3.2em; font-family: 'NEXON Lv1 Gothic OTF Bold', 'sans-serif'; font-weight:700;}

        .date1 {padding-top: 5px; padding-bottom: 5px; width: 100%; color: black; align: center; text-align: center; background-color: skyblue; color: white; font-size: 1.3em; font-family: 'NEXON Lv1 Gothic OTF Bold', 'sans-serif'; font-weight:400;}

        .date {padding-top: 5px; padding-bottom: 5px; width: 100%; color: black; align: center; text-align: center; background-color: #4da6ff; color: white; font-size: 1.3em; font-family: 'NEXON Lv1 Gothic OTF Bold', 'sans-serif'; font-weight:500;}

        .time3 {padding-top: 200px; top: 10px; width: 100%; color: black; text-align: center; color: black; font-size: 3.2em; font-family: 'timefont', 'sans-serif'; font-weight:700;}

        .date3 {padding-top: 10px; padding-bottom: 10px; width: 100%; color: black; align: center; text-align: center; background-color: #bfdfae; color: black; font-size: 1.3em; font-family: 'datefont', 'sans-serif'; font-weight:400;}

        .date4 {padding-top: 0px; padding-bottom: 0px; width: 100%; color: black; align: center; text-align: center; background-color: #bfdfae; color: black; font-size: 1.1em; font-family: 'timefont', 'sans-serif'; font-weight:400;}



@media (max-width: 767px){

        .ampm {padding-top: 10px; padding-right: 10px; width: 100%; text-valign: bottom; text-align: center; color: gray; font-size: 0.9em; font-family:
        'NEXON Lv1 Gothic OTF Bold', 'sans-serif'; font-weight:900;}

        .time3 {padding-top: 10px; top: 0px; width: 100%; color: black; text-align: center; color: black; font-size: 3.2em; font-family: 'timefont', 'sans-serif'; font-weight:700;}

        .date3 {padding-top: 10px; padding-bottom: 10px; width: 100%; color: black; align: center; text-align: center; background-color: #bfdfae; color: black; font-size: 1.3em; font-family: 'datefont', 'sans-serif'; font-weight:400;}


}