* {
	padding: 0px;
	margin: 0px;
	user-select: none;
}

body {
	position: relative;
	top: 0px;
	right: 0px;
	min-width: 1000px;
	transition: all 1s cubic-bezier(0.65, 0, 0.076, 1);
}
.insert {
	margin: 10px auto;
	width: 15%;
	min-width: 150px;
	height: 48px;
	line-height: 48px;
	text-align: center;
	border-radius: 10px;
	background-color: rgba(204, 204, 204, 0.5);
	filter: drop-shadow(8px 8px 10px rgba(122, 121, 121, 0.904));
	cursor: pointer;
}

.insert:hover {
	filter: drop-shadow(8px 8px 10px pink);
}

.insertPic {
	vertical-align: middle;
	margin: 0px 50px;
}

.clear {
	position: absolute;
	right: 28%;
	top: 30px;
	width: 32px;
	height: 32px;
	cursor: pointer;
}

.clearPic {
	display: block;
	width: 100%;
	height: 100%;
}

.clearPic:hover,
.insert:hover .insertPic {
	animation: Rotate 1.2s forwards;
}

.contentInput {
	width: 20%;
	min-width: 300px;
	height: 100px;
	margin: 50px auto 10px;
	padding: 10px;
	background-color: rgba(204, 204, 204, 0.5);
	border-radius: 15px;
	overflow-y: auto;
}

.content {
	position: relative;
	top: 0px;
	left: 0px;
	width: 15%;
	min-width: 200px;
	padding: 10px;
	margin: 0px auto;
}

.contentChild {
	margin: 0px 0px 20px 0px;
	width: 100%;
	min-width: 200px;
	border: 2px solid rgba(255, 255, 255, 0);
	font-size: 16px;
	border-radius: 10px;
	word-break: break-all;
	background-color: rgba(204, 204, 204, 0.5);
	filter: drop-shadow(5px 5px 5px rgba(122, 121, 121, 0.5));
	transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
}

.contentChild:hover {
	border: 2px solid rgba(135, 207, 235, 0.5);
}

.contentChild:before {
	display: inline-block;
	width: 24px;
	height: 100%;
	margin-right: 10px;
	text-align: center;
	border-radius: 10px;
	background-color: #fff;
	content: attr(list-index);
}

.tip {
	width: 20%;
	min-width: 300px;
	margin: 0 auto;
	padding-left: 70px;
	box-sizing: border-box;
	border-radius: 10px;
	background-color: rgba(204, 204, 204, 0.5);
}

.rightMenu {
	position: absolute;
	left: 0px;
	right: 0px;
	width: 50px;
	background-color: #fff;
	border-radius: 10px;
	font-size: 16px;
	text-align: center;
	border: 1px solid #ccc;
}

.menuClear {
	width: 50px;
	height: 20px;
	line-height: 20px;
}

.switch {
	position: absolute;
	right: 32%;
	top: 30px;
}

.checkbox {
	display: none;
}

.slider {
	width: 60px;
	height: 30px;
	background-color: lightgray;
	border-radius: 20px;
	overflow: hidden;
	display: flex;
	align-items: center;
	border: 4px solid transparent;
	transition: 0.3s;
	box-shadow: 0 0 10px 0 rgb(0, 0, 0, 0.25) inset;
	cursor: pointer;
}

.slider::before {
	content: "";
	display: block;
	width: 100%;
	height: 100%;
	background-color: #fff;
	transform: translateX(-30px);
	border-radius: 20px;
	transition: 0.3s;
	box-shadow: 0 0 10px 3px rgb(0, 0, 0, 0.25);
}

.checkbox:checked ~ .slider::before {
	transform: translateX(30px);
	box-shadow: 0 0 10px 3px rgb(0, 0, 0, 0.25);
	background-color: #000;
}

.checkbox:checked ~ .slider {
	background-color: #ffffff80;
}

@keyframes Rotate {
	from {
		transform: rotate(0deg);
	}
	to {
		transform: rotate(360deg);
	}
}

.clearfix::before,
.clearfix::after {
	content: "";
	display: table;
}
.clearfix::after {
	clear: both;
}
.clearfix {
	*zoom: 1;
}