.clock {
  position: relative;
  background-color: #222;
  display: flex;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  border: 10px solid rgb(156, 154, 154);
  align-items: center;
  justify-content: center;
  margin: 50px auto;
}

.circle {
  position: absolute;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background-color: #fff;
  z-index: 2;
  display: flex;
  align-items: center;
}
.circle > div {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background-color: red;
  margin: 0 auto;
  z-index: 2;
}

/* 时针 */
.line-h {
  display: none;
  position: absolute;
  width: 46px;
  height: 12px;
  border-radius: 6px;
  background-color: transparent;
}

.line-h div {
  width: 110px;
  background: #fff;
  height: 12px;
  border-radius: 6px;
}

/* 分针 */
.line-m {
  display: none;
  position: absolute;
  width: 46px;
  height: 8px;
  border-radius: 4px;
  background-color: transparent;
}

.line-m div {
  width: 150px;
  background: #fff;
  height: 8px;
  border-radius: 4px;
}

/* 秒针 */
.line-s {
  display: none;
  position: absolute;
  width: 60px;
  height: 4px;
  border-radius: 2px;
  background-color: transparent;
  z-index: 2;
}

.line-s div {
  width: 160px;
  background: red;
  height: 4px;
  border-radius: 2px;
}

/* 12个小时的点位 */
.dotH {
  position: absolute;
  height: 6px;
  width: 300px;
  background: #fff;
}

.dotH div {
  position: absolute;
  height: 8px;
  top: -1px;
  left: 15px;
  width: 270px;
  background-color: #222;
}

.dotH1 {
  transform: rotate(0deg);
}

.dotH2 {
  transform: rotate(30deg);
}

.dotH3 {
  transform: rotate(60deg);
}

.dotH4 {
  transform: rotate(90deg);
}

.dotH5 {
  transform: rotate(120deg);
}

.dotH6 {
  transform: rotate(150deg);
}

.num-date {
  position: absolute;
  top: 60%;
  color: #fff;
  font-size: 14px;
}
.num-time {
  position: absolute;
  top: 72%;
  color: #222;
  font-size: 14px;
  direction: flex;
}
.num-time > span {
  flex: 1;
  background-color: #fff;
  margin: 0 1px;
  padding: 4px;
  box-shadow: inset 0 0 5px 1px #2c3b3e;
}

/* 60个分的点 */
.dotM {
  position: absolute;
  height: 3px;
  width: 300px;
  background: #fff;
}

.dotM div {
  position: absolute;
  height: 5px;
  top: -1px;
  left: 5px;
  width: 290px;
  background-color: #222;
}

.dotM1 {
  transform: rotate(6deg);
}

.dotM2 {
  transform: rotate(12deg);
}

.dotM3 {
  transform: rotate(18deg);
}

.dotM4 {
  transform: rotate(24deg);
}

.dotM5 {
  transform: rotate(36deg);
}

.dotM6 {
  transform: rotate(42deg);
}

.dotM7 {
  transform: rotate(48deg);
}

.dotM8 {
  transform: rotate(54deg);
}

.dotM9 {
  transform: rotate(66deg);
}

.dotM10 {
  transform: rotate(72deg);
}

.dotM11 {
  transform: rotate(78deg);
}

.dotM12 {
  transform: rotate(84deg);
}

.dotM13 {
  transform: rotate(96deg);
}

.dotM14 {
  transform: rotate(102deg);
}

.dotM15 {
  transform: rotate(108deg);
}

.dotM16 {
  transform: rotate(114deg);
}

.dotM17 {
  transform: rotate(126deg);
}

.dotM18 {
  transform: rotate(132deg);
}

.dotM19 {
  transform: rotate(138deg);
}

.dotM20 {
  transform: rotate(144deg);
}

.dotM21 {
  transform: rotate(156deg);
}

.dotM22 {
  transform: rotate(162deg);
}

.dotM23 {
  transform: rotate(168deg);
}

.dotM24 {
  transform: rotate(174deg);
}

/* 数字 */
.num {
  position: absolute;
  width:274px;
  height: 26px;
}
.num div {
  position: absolute;
  color: #fff;
  width: 26px;
  height: 26px;
  line-height: 26px;
  text-align: center;
}
.num div:first-child {
  top: 0;
  left: 0;
}
.num div:last-child {
  top: 0;
  right: 0;
}
.num1_7 {
  transform: rotate(120deg);
}
.num1_7 div {
  transform: rotate(-120deg);
}
.num2_8 {
  transform: rotate(150deg);
}
.num2_8 div {
  transform: rotate(-150deg);
}
.num3_9 {
  transform: rotate(180deg);
}
.num3_9 div {
  transform: rotate(-180deg);
}
.num4_10 {
  transform: rotate(210deg);
}
.num4_10 div {
  transform: rotate(-210deg);
}
.num5_11 {
  transform: rotate(240deg);
}
.num5_11 div {
  transform: rotate(-240deg);
}
.num6_12 {
  transform: rotate(270deg);
}
.num6_12 div {
  transform: rotate(-270deg);
}