* {
	margin:0;
	padding:0;
}
li {
	list-style:none;
}
.box {
	width:300px;
	height:300px;
	border:1px solid #000;
	border-radius:50%;
	position:relative;
	margin-left:50px;
	margin-top:20px;
}
.box div {
	position:absolute;
	opacity:0.5;
}
.ul li {
	position:absolute;
	left:149px;
	top:0;
	transform-origin:center 150px;
}
.ul li span {
	width:2px;
	height:4px;
	background:#000;
	display:block;
}
.ul li:nth-of-type(5n) span {
	width:2px;
	height:10px;
	background:red;
}
.ul li span i {
	display:inline-block;
	margin:10px 0 0 -10px;
}
.ul li:nth-of-type(5) span i {
	transform-origin:8px 7px;
	transform:rotate(-50deg);
}
.ul li:nth-of-type(10) span i {
	transform-origin:8px 7px;
	transform:rotate(-70deg);
}
.ul li:nth-of-type(15) span i {
	transform-origin:8px 7px;
	transform:rotate(-100deg);
}
.ul li:nth-of-type(20) span i {
	transform-origin:8px 7px;
	transform:rotate(-120deg);
}
.ul li:nth-of-type(25) span i {
	transform-origin:9px 9px;
	transform:rotate(-170deg);
}
.ul li:nth-of-type(30) span i {
	transform-origin:9px 10px;
	transform:rotate(-190deg);
}
.ul li:nth-of-type(35) span i {
	transform-origin:9px 10px;
	transform:rotate(-220deg);
}
.ul li:nth-of-type(40) span i {
	transform-origin:9px 10px;
	transform:rotate(100deg);
}
.ul li:nth-of-type(45) span i {
	transform-origin:9px 10px;
	transform:rotate(80deg);
}
.ul li:nth-of-type(50) span i {
	transform-origin:9px 10px;
	transform:rotate(50deg);
}
.ul li:nth-of-type(55) span i {
	transform-origin:9px 10px;
	transform:rotate(15deg);
}
.s {
	width:6px;
	height:30px;
	left:147px;
	top:120px;
	transform-origin:3px bottom;
}
.f {
	width:4px;
	height:60px;
	left:148px;
	top:90px;
	transform-origin:2px bottom;
}
.m {
	width:2px;
	height:150px;
	left:149px;
	top:0;
	transform-style:preserve-3d;
	transform-origin:1px bottom;
}
.box .yd {
	width:6px;
	height:6px;
	border:2px solid #000;
	background:#fff;
	border-radius:50%;
	left:145px;
	top:146px;
	opacity:1;
}