/* ------------------------------------------
 * IT书包
 * 网址：www.itshubao.com
 * 整理：yinq<3331653644@qq.com> 
 -------------------------------------------- */
*, *:after, *:before {
	box-sizing: border-box;
}
body {
	margin: 0;
	height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}
input[type="radio"] {
	display: none;
}
.cont {
	width: 120px;
	position: absolute;
	margin-left: -60px;
}
.cont label:before {
	cursor: pointer;
	content: "";
	display: block;
	height: 20px;
	width: 20px;
	border: 2px solid #111;
	border-radius: 50%;
	float: left;
	margin: 0 10px;
}
.cont .slider > .dot {
	height: 10px;
	width: 10px;
	border-radius: 50%;
	position: relative;
	top: 5px;
	left: 15px;
	opacity: 0;
	background-color: #111;
	transition: all 0.3s;
}
.cont input[type="radio"]:checked ~ .slider > .dot {
	opacity: 1;
}
.cont .line1 {
	height: 60px;
	width: 2px;
	background-color: #111;
	position: absolute;
	transform-origin: bottom;
	transform: translateX(59px) translateY(20px);
	transition: all 0.3s;
}
.cont .line2 {
	position: absolute;
	height: 50vh;
	width: 2px;
	background-color: #111;
	transform: translateX(59px) translateY(80px);
}
.cont .dot2 {
	position: absolute;
	height: 6.66667px;
	width: 6.66667px;
	background-color: #111;
	border-radius: 50%;
	transform: translateX(56.66667px) translateY(76.66667px);
}
.cont #r1:checked ~ .slider > .dot, .cont #r4:checked ~ .slider > .dot {
	transform: translateX(0);
}
.cont #r1:checked ~ .slider > .line1, .cont #r4:checked ~ .slider > .line1 {
	transform: translateX(59px) translateY(20px) rotate(-30deg) scaleY(1.2);
}
.cont #r2:checked ~ .slider > .dot, .cont #r5:checked ~ .slider > .dot {
	transform: translateX(40px);
}
.cont #r2:checked ~ .slider > .line1, .cont #r5:checked ~ .slider > .line1 {
	transform: translateX(59px) translateY(20px);
}
.cont #r3:checked ~ .slider > .dot, .cont #r6:checked ~ .slider > .dot {
	transform: translateX(80px);
}
.cont #r3:checked ~ .slider > .line1, .cont #r6:checked ~ .slider > .line1 {
	transform: translateX(59px) translateY(20px) rotate(30deg) scaleY(1.2);
}
.cont:nth-of-type(2) {
	transform: scaleY(-1) translateY(60px);
}
.zapp, .zapp:after, .zapp:before {
	content: "";
	position: absolute;
	height: 40px;
	width: 4px;
	margin-left: -2px;
	background-color: #f00;
}
.zapp {
	transform: translateY(-40px);
}
.zapp:after {
	transform: translateX(42px);
}
.zapp:before {
	transform: translateX(-38px);
}
#c1:checked ~ #c4:checked ~ .zapp {
	display: none;
}