css

+@charset "utf-8";
+@import url('https://fonts.googleapis.com/css?family=Noto+Sans+KR|Noto+Serif+KR');
+
+body {
+  margin: auto;
+  text-align: center;
+  font-family: 'Noto Sans KR', sans-serif;
+}
+
+.output {
+  width: 2em;
+  height: 2em;
+  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25);
+  solid silver;
+  color: #fff;
+  margin: .5em .25em;
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 50%;
+  border: 3px solid transparent;
+}
+
+.output.c1 {
+  background: #FDD835;
+  color: #212121;
+}
+
+.output.c2 {
+  background: #1976D2;
+}
+
+.output.c3 {
+  background: #D32F2F;
+}
+
+.output.c4 {
+  background: #616161;
+}
+
+.output.c5 {
+  background: #388E3C;
+}
+
+.output.match,
+[id^="output"] {
+  border: 3px solid #FF9800;
+}
+
+.output.match_b,
+#output6 {
+  border: 3px solid #9E9E9E;
+}
+
+#stats {
+  text-align: center;
+  width: 100%;
+  position: absolute;
+  top: calc(50% + 160px);
+}
+
+#stats progress {
+  width: 600px;
+  max-width: calc(100% - 2em);
+}
+
+#lottotable {
+  padding: 1em 0 0 0;
+  margin: 0;
+  font-size: 12px;
+  text-align: left;
+  width: 100%;
+  position: absolute;
+  display: flex;
+  flex-flow: wrap;
+  top: calc(50% + 225px);
+  counter-reset: li;
+  overflow: hidden;
+}
+
+#lottotable li {
+  display: inline-table;
+  text-align: center;
+  flex: auto;
+  /* box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25); */
+  margin: .5em 0;
+  margin-left: 2em;
+  padding: 0;
+  position: relative;
+  max-width: 30em;
+  transition: .25s;
+}
+
+#lottotable li::before {
+  content: counter(li);
+  counter-increment: li;
+  position: absolute;
+  top: 1em;
+  right: 100%;
+}
+
+#lottotable li:nth-of-type(100n) {
+  margin-bottom: 3em;
+}
+
+.win {
+  font-weight: bold;
+  border-radius: .5em;
+}
+
+.win1 {
+  background: gold;
+  box-shadow: 0 2px 5px #b39700;
+}
+
+.win1:hover {
+  box-shadow: 0 5px 7px #b39700;
+}
+
+.win2 {
+  background: gold;
+  box-shadow: 0 2px 5px #b39700;
+}
+
+.win2:hover {
+  box-shadow: 0 5px 7px #b39700;
+}
+
+.win3 {
+  background: gold;
+  box-shadow: 0 2px 5px #b39700;
+}
+
+.win3:hover {
+  box-shadow: 0 5px 7px #b39700;
+}
+
+.win4 {
+  background: silver;
+  box-shadow: 0 2px 5px gray;
+}
+
+.win4:hover {
+  box-shadow: 0 5px 7px gray;
+}
+
+.win5 {
+  background: #cd7f32;
+  box-shadow: 0 2px 5px #905923;
+}
+
+.win5:hover {
+  box-shadow: 0 5px 7px #905923;
+}
+
+.win:after {
+  color: #8c0017;
+  position: absolute;
+  top: -1em;
+  right: -1em;
+  border: 5px double #8c0017;
+  border-radius: 50%;
+  padding: 0.25em;
+  transform: rotate(-15deg);
+}
+
+.win1:after {
+  content: "1등";
+}
+
+.win2:after {
+  content: "2등";
+}
+
+.win3:after {
+  content: "3등";
+}
+
+.win4:after {
+  content: "4등";
+}
+
+.win5:after {
+  content: "5등";
+}
+
+#winner {
+  width: 600px;
+  max-width: calc(100% - 2em);
+  height: 200px;
+  margin: auto;
+  text-align: center;
+  position: absolute;
+  top: calc(50% - 100px);
+  left: calc(50% - 300px);
+  transition: .25s, top 0s;
+}
+
+#winner h2 {
+  margin-top: 1.5em;
+}
+
+#winner.pinned {
+  max-width: 100%;
+  font-size: 12px;
+  width: 100%;
+  left: 0;
+  height: 75px;
+  position: fixed;
+  top: 0;
+  margin: 0;
+}
+
+#winner.pinned h2 {
+  font-size: 12px;
+  margin: .5em 0 0;
+}
+
+.shadow {
+  box-shadow: 0 2px 5px rgba(0, 0, 0, .25);
+  border-radius: 3px;
+  background: #fff;
+}
+
+.shadow-right {
+  box-shadow: 2px 0 6px 0 rgba(60, 64, 67, .15);
+}
+
+.shadow-bottom {
+  box-shadow: 0 2px 6px 0 rgba(60, 64, 67, .15);
+}
+
+.shadow-top-inset {
+  box-shadow: inset 0 7px 6px -5px rgba(60, 64, 67, .15);
+}
+
+.shadow-bottom-inset {
+  box-shadow: inset 0 -7px 6px -5px rgba(60, 64, 67, .15);
+}
+
+.shadow-top-inset.shadow-bottom-inset {
+  box-shadow: inset 0 7px 6px -5px rgba(60, 64, 67, .15), inset 0 -7px 6px -5px rgba(60, 64, 67, .15);
+}
+
+.translation {
+  /* color: rgba(0, 0, 0, .38); */
+  opacity: .65;
+  font-size: .75em;
+  font-style: italic;
+  font-family: 'Noto Sans KR', sans-serif;
+}
+
+.key {
+  transition: .25s;
+  text-shadow: 0 -1px #e0e0e0;
+  box-shadow: 0 6px #e0e0e0;
+  border: 1px solid #e0e0e0;
+  border-radius: 5px;
+  margin: -.5em .25em .25em;
+  padding: .25em .75em;
+  background: white;
+  color: #212121;
+  font-size: .75em;
+  vertical-align: top;
+  display: inline-block;
+  cursor: pointer;
+  font-family: 'Noto Sans KR', sans-serif;
+}
+
+.key:active,
+.key.on {
+  box-shadow: 0 0px #e0e0e0;
+  margin: 0 .25em -.25em;
+}
+
+/* ***** mobile ***** */
+@media handheld, only screen and (max-device-width:480px), only screen and (max-device-width:320px), screen and (max-width:600px) {
+  body {
+    font-size: 12px;
+  }
+
+  #winner {
+    height: 150px;
+    top: calc(50% - 75px);
+    margin: 1em;
+    left: inherit;
+  }
+
+  #winner.pinned {}
+
+  #lottotable {
+    font-size: 6px;
+  }
+}