#wrapper {
    display: none;
    position: absolute;
    z-index: 100;
}

.Center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.i1 {
    background: url(../img/空心.png) no-repeat;
    width: 53px;
    height: 58px;
    z-index: 111;
}

.i1:hover {
    transition: all .8s;
    transform: translate(-50%, -50%) scale(1.2);
    -webkit-transform: translate(-50%, -50%) scale(1.2);
    -moz-transform: translate(-50%, -50%) scale(1.2);
    -o-transform: translate(-50%, -50%) scale(1.2);
    -ms-transform: translate(-50%, -50%) scale(1.2);
}

.i2 {
    background: url(../img/归墟.png) no-repeat;
    width: 243px;
    height: 242px;
    z-index: 110;
    transform: translate(-50%, -50%) rotate(0deg) scale(1.0);
    transition: All 0.4s ease-in-out;
    -webkit-transition: All 0.4s ease-in-out;
    -moz-transition: All 0.4s ease-in-out;
    -o-transition: All 0.4s ease-in-out;
}

.i2:hover {
    transition: all .8s;
    transform: translate(-50%, -50%) rotate(360deg) scale(1.1);
    -webkit-transform: translate(-50%, -50%) rotate(360deg) scale(1.1);
    -moz-transform: translate(-50%, -50%) rotate(360deg) scale(1.1);
    -o-transform: translate(-50%, -50%) rotate(360deg) scale(1.1);
    -ms-transform: translate(-50%, -50%) rotate(360deg) scale(1.1);
}

.i3 {
    background: url(../img/盘轨1.png) no-repeat;
    width: 360px;
    height: 360px;
}
.Roller{
    transition: All .7s linear;
    -webkit-transition: All .7s linear;
    -moz-transition: All .7s linear;
    transform: translate(-50%, 0) rotate(0deg);
    position: absolute;
    left: 50%;
    top: 25px;
    width: 159px;
    height: 73px;
    transform-origin: 80px 135px;
    display: block;
    opacity: 0;
    z-index: 10;
}
.Roller #canvasId{
    transform: translate(-138px, -6px) rotate(0deg);
    position: absolute;
    width:450;
    height:450;
    opacity: 0;
}

.Roller:hover{
    filter:hue-rotate(70deg);
}

.Rotater {
    position: absolute;
    left: 50%;
    top: 22px;
    width: 100px;
    height: 50px;
    opacity: 1;
    transform-origin: 50px 160px;
    display: block;
    z-index: 111;
}

#Radius:hover #canvasId{
  opacity: 1;
}
div #Layer{
    opacity: 0;
}
div #Layer:hover{
    opacity: 1;
}
/*幕的进度条样式*/
.sliderRage{
    border-radius: 10px;
	transition: all .1s linear;
	-webkit-appearance: none;
    appearance: none;
    width: 100px;/*滑动条的高低*/
    height:11px;/*滑动条的粗细*/
    position: absolute;
    top: 0;
    right: 2px;/*滑动条距离左边元素的位置*/
}
.sliderRage:focus {
    outline: none;
}
.sliderRage::-webkit-slider-thumb {
    -webkit-appearance: none;
    height: 16px; /*滑动圆球的大小*/
    width: 16px;/*滑动圆球的大小*/
    margin-top: -4px;/* 设置滑动圆球的左右位置*/
    background: #ffffff;
    border-radius: 50%; /*外观设置为圆形*/
    border: solid 0.2em rgba(110, 190, 255, 0.5); /*设置边框*/
    box-shadow: 0 .09em .09em #baeffa; /*添加底部阴影*/
    transition: all .1s linear;
   
}
.sliderRage::-webkit-slider-runnable-track {
    height: 11px;/*滑动条的粗细 */
    width: 100px;/*滑动条的高低*/
    border-radius: 10px; /*将轨道设为圆角的*/
    border: solid 0.1em #0d1112;
    box-shadow: 0 0 0 #0d1112, 0 0 0 #0d1112;
    transition: all .1s linear;

}

.sliderRage::-webkit-slider-thumb:hover{
    border: solid 0.4em rgba(29, 116, 187, 0.747);
    box-shadow: 0 .2em .3em #baeffa; /*添加底部阴影*/
}
.Rotater span{
    font-family: 华文新魏, sans-serif;
    font-size: 15px;
    position: absolute;
    bottom: -13px;
    transform: translate(-50%,0) rotate(180deg);
    left: 50%;
}

.sliderRage:focus {
    outline: none;
}
/* 幕的选择对勾样式-动画设置 */
@-moz-keyframes dhbottomcheck {
	0% {
	height:0;
}
100% {
	height:20px;
}
}@-webkit-keyframes dhbottomcheck {
	0% {
	height:0;
}
100% {
	height:20px;
}
}@keyframes dhbottomcheck {
	0% {
	height:0;
}
100% {
	height:20px;
}
}
@keyframes dhtopcheck {
	0% {
	height:0;
}
50% {
	height:0;
}
100% {
	height:50px;
}
}
@-webkit-keyframes dhtopcheck {
	0% {
	height:0;
}
50% {
	height:0;
}
100% {
	height:50px;
}
}
@-moz-keyframes dhtopcheck {
	0% {
	height:0;
}
50% {
	height:0;
}
100% {
	height:50px;
}
}
.fullCheck {
    display:none;
	height:20px;
	width:20px;
}

.curtainCheck{
	display:none;
	height:20px;
	width:20px;
}
.check-box1 {
	height:50px;
    width:50px;
    left: 20px;
	background-color:transparent;
	position:relative;
	display:inline-block;
	-moz-box-sizing:border-box;
	-webkit-box-sizing:border-box;
	box-sizing:border-box;
	-moz-transition:border-color ease 0.2s;
	-o-transition:border-color ease 0.2s;
	-webkit-transition:border-color ease 0.2s;
	transition:border-color ease 0.2s;
    cursor:pointer;
    transform: rotate(180deg);
}
.check-box1::before,.check-box1::after {
	-moz-box-sizing:border-box;
	-webkit-box-sizing:border-box;
	box-sizing:border-box;
	position:absolute;
	height:0;
	width:10px;
	background-color:#0d09e7;
	display:inline-block;
	-moz-transform-origin:left top;
	-ms-transform-origin:left top;
	-o-transform-origin:left top;
	-webkit-transform-origin:left top;
	transform-origin:left top;
	border-radius:5px;
	content:' ';
	-webkit-transition:opacity ease .5;
	-moz-transition:opacity ease .5;
	transition:opacity ease .5;
}
.check-box1::before {
	top:52px;
	left:21px;
	-moz-transform:rotate(-135deg);
	-ms-transform:rotate(-135deg);
	-o-transform:rotate(-135deg);
	-webkit-transform:rotate(-135deg);
	transform:rotate(-135deg);
}
.check-box1::after {
	top:35px;
	left:3px;
	-moz-transform:rotate(-45deg);
	-ms-transform:rotate(-45deg);
	-o-transform:rotate(-45deg);
	-webkit-transform:rotate(-45deg);
	transform:rotate(-45deg);
}
input[class=curtainCheck]:checked + .check-box1,.check-box1.checked {
	border-color:#0d09e7;
}
input[class=curtainCheck]:checked + .check-box1::after,.check-box1.checked::after {
	height:23px;
	-moz-animation:dhbottomcheck 0.2s ease 0s forwards;
	-o-animation:dhbottomcheck 0.2s ease 0s forwards;
	-webkit-animation:dhbottomcheck 0.2s ease 0s forwards;
	animation:dhbottomcheck 0.2s ease 0s forwards;
}
input[class=curtainCheck]:checked + .check-box1::before,.check-box1.checked::before {
	height:60px;
	-moz-animation:dhtopcheck 0.4s ease 0s forwards;
	-o-animation:dhtopcheck 0.4s ease 0s forwards;
	-webkit-animation:dhtopcheck 0.4s ease 0s forwards;
	animation:dhtopcheck 0.4s ease 0s forwards;
}
/* 全屏对勾的动画 */
/* 幕的选择对勾样式-动画设置 */
@-moz-keyframes dhbottomcheck {
	0% {
	height:0;
}
100% {
	height:20px;
}
}@-webkit-keyframes dhbottomcheck {
	0% {
	height:0;
}
100% {
	height:20px;
}
}@keyframes dhbottomcheck {
	0% {
	height:0;
}
100% {
	height:20px;
}
}
@keyframes dhtopcheck {
	0% {
	height:0;
}
50% {
	height:0;
}
100% {
	height:50px;
}
}
@-webkit-keyframes dhtopcheck {
	0% {
	height:0;
}
50% {
	height:0;
}
100% {
	height:50px;
}
}
@-moz-keyframes dhtopcheck {
	0% {
	height:0;
}
50% {
	height:0;
}
100% {
	height:50px;
}
}
.check-box {
	height:50px;
    width:50px;
    left: 50px;
	background-color:transparent;
	position:relative;
	display:inline-block;
	-moz-box-sizing:border-box;
	-webkit-box-sizing:border-box;
	box-sizing:border-box;
	-moz-transition:border-color ease 0.2s;
	-o-transition:border-color ease 0.2s;
	-webkit-transition:border-color ease 0.2s;
	transition:border-color ease 0.2s;
    cursor:pointer;
    transform: rotate(180deg);
}
.check-box::before,.check-box::after {
	-moz-box-sizing:border-box;
	-webkit-box-sizing:border-box;
	box-sizing:border-box;
	position:absolute;
	height:0;
	width:10px;
	background-color:#0d09e7;
	display:inline-block;
	-moz-transform-origin:left top;
	-ms-transform-origin:left top;
	-o-transform-origin:left top;
	-webkit-transform-origin:left top;
	transform-origin:left top;
	border-radius:5px;
	content:' ';
	-webkit-transition:opacity ease .5;
	-moz-transition:opacity ease .5;
	transition:opacity ease .5;
}
.check-box::before {
	top:52px;
	left:21px;
	-moz-transform:rotate(-135deg);
	-ms-transform:rotate(-135deg);
	-o-transform:rotate(-135deg);
	-webkit-transform:rotate(-135deg);
	transform:rotate(-135deg);
}
.check-box::after {
	top:35px;
	left:3px;
	-moz-transform:rotate(-45deg);
	-ms-transform:rotate(-45deg);
	-o-transform:rotate(-45deg);
	-webkit-transform:rotate(-45deg);
	transform:rotate(-45deg);
}
input[class=fullCheck]:checked + .check-box,.check-box.checked {
	border-color:#0d09e7;
}
input[class=fullCheck]:checked + .check-box::after,.check-box.checked::after {
	height:23px;
	-moz-animation:dhbottomcheck 0.2s ease 0s forwards;
	-o-animation:dhbottomcheck 0.2s ease 0s forwards;
	-webkit-animation:dhbottomcheck 0.2s ease 0s forwards;
	animation:dhbottomcheck 0.2s ease 0s forwards;
}
input[class=fullCheck]:checked + .check-box::before,.check-box.checked::before {
	height:60px;
	-moz-animation:dhtopcheck 0.4s ease 0s forwards;
	-o-animation:dhtopcheck 0.4s ease 0s forwards;
	-webkit-animation:dhtopcheck 0.4s ease 0s forwards;
	animation:dhtopcheck 0.4s ease 0s forwards;
}