/* ------------------------------------------
 * IT书包
 * 网址：www.itshubao.com
 * 整理：yinq<3331653644@qq.com> 
 -------------------------------------------- */

.transition, input[type=radio]:after, input[type=checkbox][type=radio]:after, input[type=checkbox]:after {
	-moz-transition: all 0.25s cubic-bezier(0.75, 0.01, 0.48, 2);
	-o-transition: all 0.25s cubic-bezier(0.75, 0.01, 0.48, 2);
	-webkit-transition: all 0.25s cubic-bezier(0.75, 0.01, 0.48, 2);
	transition: all 0.25s cubic-bezier(0.75, 0.01, 0.48, 2);
}
.bgTransition, input[type=radio]:before, input[type=checkbox][type=radio]:before, input[type=checkbox]:before {
	-moz-transition: all 0.25s ease-in-out;
	-o-transition: all 0.25s ease-in-out;
	-webkit-transition: all 0.25s ease-in-out;
	transition: all 0.25s ease-in-out;
}
input[type=radio], input[type=checkbox] {
	position: relative;
}
input[type=radio]:before, input[type=radio]:after, input[type=checkbox]:before, input[type=checkbox]:after {
	content: "";
	position: absolute;
}
input[type=radio]:before, input[type=checkbox]:before {
	height: 100%;
}
input[type=radio][type=radio], input[type=checkbox][type=radio] {
	border-radius: 30px;
}
input[type=radio][type=radio]:before, input[type=checkbox][type=radio]:before {
	width: 100%;
	border-radius: 30px;
	background-color: #2c3f52;
	box-shadow: 0 0 0 1px #2c3f52;
}
input[type=radio][type=radio]:after, input[type=checkbox][type=radio]:after {
	width: 100%;
	height: 100%;
	border-radius: 30px;
	background-color: #15202a;
	-moz-transform: scale(0, 0);
	-ms-transform: scale(0, 0);
	-webkit-transform: scale(0, 0);
	transform: scale(0, 0);
}
input[type=radio][type=radio]:checked:after, input[type=checkbox][type=radio]:checked:after {
	-moz-transform: scale(0.75, 0.75);
	-ms-transform: scale(0.75, 0.75);
	-webkit-transform: scale(0.75, 0.75);
	transform: scale(0.75, 0.75);
}
input[type=radio][type=radio]:checked:before, input[type=checkbox][type=radio]:checked:before {
	background-color: #85ff7a;
	box-shadow: 0 0 0 1px #85ff7a;
}
input[type=radio][type=checkbox]:before, input[type=checkbox][type=checkbox]:before {
	width: 200%;
	background-color: #2c3f52;
	box-shadow: 0 0 0 1px #2c3f52;
	-moz-transform: translate(-25%, 0);
	-ms-transform: translate(-25%, 0);
	-webkit-transform: translate(-25%, 0);
	transform: translate(-25%, 0);
	border-radius: 30px;
}
input[type=radio][type=checkbox]:after, input[type=checkbox][type=checkbox]:after {
	width: 80%;
	height: 80%;
	margin-top: 10%;
	margin-left: 10%;
	background-color: #15202a;
	border-radius: 30px;
	-moz-transform: translate(60%, 0);
	-ms-transform: translate(60%, 0);
	-webkit-transform: translate(60%, 0);
	transform: translate(60%, 0);
}
input[type=radio][type=checkbox]:checked:after, input[type=checkbox][type=checkbox]:checked:after {
	-moz-transform: translate(-60%, 0);
	-ms-transform: translate(-60%, 0);
	-webkit-transform: translate(-60%, 0);
	transform: translate(-60%, 0);
}
input[type=radio][type=checkbox]:checked:before, input[type=checkbox][type=checkbox]:checked:before {
	background-color: #85ff7a;
	box-shadow: 0 0 0 1px #85ff7a;
}
* {
	-webkit-tap-highlight-color: transparent;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}
html {
	background-color: #15202a;
}
input {
	display: block;
	margin: 36px;
}
input[type=radio], input[type=checkbox] {
	cursor: pointer;
	width: 30px;
	height: 30px;
}
.radio, .check {
	position: absolute;
	-moz-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	top: 50%;
	left: 50%;
}
.radio {
	margin-left: -36px;
}
.check {
	margin-left: 36px;
}