/* switch组件 */
.switch-component {
	position:relative;
	margin-left:380px;
	margin-top:97px;
	width:60px;
	height:30px;
	background-color:#ddd;
	border-radius:30px;
	border:none;
	outline:none;
	-webkit-appearance:none;
	transition:all .2s ease;
}
/* 按钮 */
        			.switch-component::after {
	content:'';
	position:absolute;
	top:0;
	left:0;
	width:50%;
	height:100%;
	background-color:#fff;
	border-radius:50%;
	transition:all .2s ease;
}
/* checked状态时，背景颜色改变 */
        			.switch-component:checked {
	background-color:#86c0fa;
}
/* checked状态时，按钮位置改变 */
        			.switch-component:checked::after {
	left:50%;
}
/* checked状态时，按钮位置改变 */
        			 .div {
	box-shadow:1px 2px 4px rgba(0,0,0,.6);
	position:relative;
	width:800px;
	height:400px;
	margin:200px auto;
	border:1px solid #ddd;
	border-radius:10px;
	background-color:#f9f9f9;
}
.divSel {
	background:linear-gradient(45deg,red,blue,green);
	box-shadow:1px 2px 10px rgba(0,0,0,.5);
	position:relative;
	width:800px;
	height:400px;
	margin:200px auto;
	border:1px solid #86c0fa;
	border-radius:10px;
	background-color:#f9f9f9;
}
/* checked未选中 */
        			 .middleDivNoSel {
	position:absolute;
	margin:1% 35%;
	font-size:50px;
	font-weight:bold;
	color:#ddd;
	width:200px;
	height:100px;
	border:1px solid #ddd;
	border-radius:10px;
	display:flex;
	justify-content:center;
	align-items:center;
}
/* checked已选中 */
        			 .middleDivSel {
	position:absolute;
	margin:1% 35%;
	font-size:50px;
	font-weight:bold;
	color:#86c0fa;
	width:200px;
	height:100px;
	border:1px solid #86c0fa;
	border-radius:10px;
	display:flex;
	justify-content:center;
	align-items:center;
}
/* 按钮禁用 已选中 */
        			 .buttonDivDis {
	position:absolute;
	bottom:10px;
	right:10px;
	background-color:#f9f9f9;
	width:100px;
	height:40px;
	color:#ddd;
	font-weight:bold;
	border:1px solid #ddd;
	border-radius:5px;
}
.buttonDiv {
	position:absolute;
	bottom:10px;
	right:10px;
	background-color:#f9f9f9;
	width:100px;
	height:40px;
	font-weight:bold;
	color:#86c0fa;
	border:1px solid #86c0fa;
	border-radius:5px;
}
/* 取消按钮 */
        			 #btnCacle {
	font-weight:bold;
	position:absolute;
	bottom:10px;
	right:130px;
	width:100px;
	height:40px;
	overflow:hidden;
	border:none;
	outline:none;
	color:#dddddf;
	background:none;
	z-index:999;
}
#btnCacle::before {
	content:'';
	position:absolute;
	transform-origin:0 0;
	left:50%;
	top:50%;
	width:200%;
	height:200%;
	background:linear-gradient(green,red);
	animation:rotate 3s linear infinite;
	z-index:-2;
}
#btnCacle::after {
	content:'';
	position:absolute;
	transform-origin:0 0;
	left:2px;
	top:2px;
	width:calc(100% - 4px);
	height:calc(100% - 4px);
	background-color:#f9f9f9;
	border-radius:3px;
	z-index:-1;
}
@keyframes rotate {
	to {
	transform:rotate(1turn)
}
}