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

html{
	background:#223344;
	padding-bottom:25vh;
	.overflow-y:scroll;
}

body{
	max-width:1920px;
	margin:0 auto;
	user-select:none;
}

::-webkit-scrollbar{width:9px;}
::-webkit-scrollbar-track{background:#555;}
::-webkit-scrollbar-thumb{background:#007399; border-radius:5px; cursor:pointer;}

.clear{clear:both;}

.clowrap{
	width:630px;
	margin:0 auto;
	margin-top:30px;
	position:relative;
}

.clock{
	display:block;
	width:100%;
	margin:0 auto;
	cursor:pointer;
}

.handa{
	position:absolute;
	z-index:3;
	top:calc(50% - 5px);
	left:50%;
	transform-origin: 0% 50%;
	border-radius:5px;
	width:30%;
	height:10px;
	background:#999;
}

.handb{
	position:absolute;
	z-index:4;
	top:calc(50% - 3px);
	left:50%;
	transform-origin: 0% 50%;
	border-radius:9px;
	width:40%;
	height:6px;
	background:#999;
}

.bpoint{
	position:absolute;
	z-index:9;
	width:27px;
	aspect-ratio:1/1;
	left:50%;
	top:50%;
	transform:translate(-50%, -50%);
	border-radius:50%;
	background:darkorange;
	cursor:pointer;
}

.brand{
	position:absolute;
	font-family:montserrat;
	font-size:40px;
	top:25%;
	left:50%;
	transform:translatex(-50%);
	color:#bbb;
	letter-spacing:1px;
}

.clock {
  position: relative;
  width: 630px;
  aspect-ratio:1/1;
  border: 5px solid #bbb;
  border-radius: 50%;
}

.ticks {
  position: absolute;
  width: 100%;
  height: 100%;
}

.ticks div {
  position: absolute;
  width: 100%;
  height: 100%;
  transform: rotate(calc(6deg * var(--i)));
}

.ticks div::before {
  content: "";
  position: absolute;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  width: 3px;
  height: 10px;
  background: #bbb;
}

.ticks div:nth-child(5n)::before {
  height: 20px;
  width: 5px;
}

.numbers div {
  position: absolute;
  width: 100%;
  height: 100%;
  text-align: center;
  transform: rotate(calc(30deg * var(--i)));
  font-family:montserrat;
	font-size: clamp(20px, 5vw, 36px);
  color: #bbb;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding-top: 50px;
}

.numbers div span {
  display: block;
  transform: rotate(calc(-30deg * var(--i)));
}

.ops{
	text-align:center;
	font-size:0;
	margin-top:25px;
}

.op{
	display:inline-block;
	width:99px;
	.background:#ddd;
	color:#ddd;
	margin:0 20px;
	font-family:montserrat;
	font-size:16px;
	letter-spacing:2px;
	line-height:30px;
	border:2px solid #ddd;
	border-radius:20px;
	cursor:pointer;
	position:relative;
}

.op:active{bottom:2px;}


@media only screen and (max-width: 700px){
	.clowrap{width:100%; padding:0 25px;}
	.clock{width:100%; border:4px solid #bbb;}
	.ticks div::before {top:9px; width:2px;}
	.ticks div:nth-child(5n)::before {width:4px;}
	.numbers div{padding-top:36px;}
	.bpoint{width:23px;}
	.brand{font-size:25px}
	.op{display:block;margin:14px auto; font-size:18px; width:108px;}
}