* {
  margin: 0;
  padding: 0;
  background: none;
  border: 0;
  box-sizing: border-box;
}

.clock_body {
  background-image:
    radial-gradient(
      circle,
      #000,
      #fff,
      #fff
    );
}

.clock {
  position: relative;
  width: 200px;
  height: 200px;
  margin: auto;
  border-radius: 200px;
}

.clock:before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 10px;
  background: #f00;
  border-radius: 10px;
  z-index: 123;
  margin: -5px 0 0 -5px;
}

.labels-v:before,
.labels-h:before,
.labels-v:after,
.labels-h:after,
.labels-v2:before,
.labels-h2:before,
.labels-v2:after,
.labels-h2:after,
.labels-v3:before,
.labels-h3:before,
.labels-v3:after,
.labels-h3:after {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding-top: 5px;
  text-align: center;
  font-family: sans-serif;
}

.labels-v:before {
  content: '12';
  font-weight: bold;
  -webkit-transform: rotate(0deg);
          transform: rotate(0deg);
}

.labels-v2:before {
  content: '1';
  -webkit-transform: rotate(30deg);
          transform: rotate(30deg);
}

.labels-v3:before {
  content: '2';
  -webkit-transform: rotate(60deg);
          transform: rotate(60deg);
}

.labels-h:before {
  content: '3';
  font-weight: bold;
  -webkit-transform: rotate(90deg);
          transform: rotate(90deg);
}

.labels-h2:before {
  content: '4';
  -webkit-transform: rotate(120deg);
          transform: rotate(120deg);
}

.labels-h3:before {
  content: '5';
  -webkit-transform: rotate(150deg);
          transform: rotate(150deg);
}

.labels-v:after {
  content: '6';
  font-weight: bold;
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
}

.labels-v2:after {
  content: '7';
  -webkit-transform: rotate(210deg);
          transform: rotate(210deg);
}

.labels-v3:after {
  content: '8';
  -webkit-transform: rotate(240deg);
          transform: rotate(240deg);
}

.labels-h:after {
  content: '9';
  font-weight: bold;
  -webkit-transform: rotate(270deg);
          transform: rotate(270deg);
}

.labels-h2:after {
  content: '10';
  -webkit-transform: rotate(300deg);
          transform: rotate(300deg);
}

.labels-h3:after {
  content: '11';
  -webkit-transform: rotate(330deg);
          transform: rotate(330deg);
}

@-webkit-keyframes clock {
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}

@keyframes clock {
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
.hours,
.minutes,
.seconds {
  display: none;
  position: absolute;
  bottom: 50px;
  width: 6px;
  height: 100px;
  -webkit-transform: rotate(0deg);
          transform: rotate(0deg);
}
.hours:before,
.minutes:before,
.seconds:before {
  content: '';
  position: absolute;
  bottom: 50%;
  left: 0;
  width: 100%;
}

.hours {
  left: 97px;
  width: 6px;
  /*-webkit-animation: clock 86400s steps(60, end) infinite;
          animation: clock 86400s steps(60, end) infinite;*/
}
.hours:before {
  height: 40%;
  background: #000;
  border-radius: 6px;
}

.minutes {
  left: 98px;
  width: 4px;
  /*-webkit-animation: clock 3600s steps(60, end) infinite;
          animation: clock 3600s steps(60, end) infinite;*/
}
.minutes:before {
  height: 55%;
  background: #666;
  border-radius: 4px;
}

.seconds {
  left: 99px;
  width: 2px;
  /*-webkit-animation: clock 60s steps(60, end) infinite;
          animation: clock 60s steps(60, end) infinite;*/
}
.seconds:before {
  height: 75%;
  background: #f00;
  border-radius: 2px;
}
.seconds:after {
  content: '';
  position: absolute;
  top: -15px;
  left: -4px;
  width: 6px;
  height: 6px;
  background: #fff;
  border-radius: 6px;
  border: 2px solid #f00;
}