.play{
    width: 600px;
    margin: 0 auto;
}
.play-top{
	margin-bottom:20px;
}
.play .level{
    font-size: 38px;
    color: #7c0000;
    font-weight: bold;
    float: left;
    margin-top: 15px;
    margin-left: 10px;
}

.play .clock{
    font-size: 42px;
    color: #fff;
    font-weight: bold;
    float: right;
    background: url(../images/img201.png) left top no-repeat;
    width: 205px;
    height: 65px;
    padding-top:40px;
    text-align: center;
}

.play .puzzle{
    clear: both;
    width: 600px;
    height: 600px;
    background:url(../images/back06.png) left top no-repeat;
    overflow: hidden;
	
}
.puzzle-inner{
	padding-left:15px;
	padding-top:15px;
}

.play .puzzle ul{
    position: relative;
}



.play .puzzle li{
    display: inline-block;
    vertical-align: middle;
    position: relative;
	border:2px solid #deded7;
	margin-right:2px;
	margin-bottom:2px;
}

.play .puzzle .level-1 li{
    width: 280px;
    height: 280px;
}

.play .puzzle .level-2 li{
    width: 185px;
    height: 185px;
}

.play .puzzle .level-3 li{
    width: 137px;
    height: 137px;
}

.play .puzzle .level-4 li{
    width: 25%;
    height: 25%;
}

.play .puzzle .level-5 li{
    width: 20%;
    height: 20%;
}


.play .puzzle li img{
    position: absolute;
    width: 100%;
    height: 100%;
}

.play .hint{
    margin-top: 22px;
}

.play .goal{
    width: 168px;
    height: 168px;
    border: 3px solid #deded7;
    overflow: hidden;
	margin:0 auto;
}

.play .goal img{
    width: 100%;
}
.undergoal{
	text-align:center;
	color:#7c0000;
}
.play .message{
    width: 390px;
    height: 168px;
    border: 6px solid #703a98;
    border-radius: 20px;
    float: right;
    background-color: #fff;
    color: #703a98;
    font-size: 30px;
    font-weight: bold;
    padding: 35px;
}

.ui-draggable-handle {
    -ms-touch-action: none;
    touch-action: none;
}

.ui-draggable-dragging {
    z-index: 1;
}

/**** Loading Wrap ****/
        .loadingLayout {
            position: absolute;
            top: 0px;
            bottom: 0px;
            left: 0px;
            height: 100%;
            width: 100%;
            background: #FFF;
            z-index: 99999;
        }
        .loadingWrap {
            position: absolute;
            left: 50%;
            top: 50%;
            margin: -50px 0 0 -50px;
        }
        .loadingWrap div {
            margin: 10px;
        }
        .loadingWrap #load {
            position: absolute;
            left: 50%;
            top: 34px;
            width: 80px;
            color: #fff;
            font: 24px calibri;
            text-align: center;
        }
        .loadingWrap #cercle {
            height: 100px;
            width: 100px;
            position: absolute;
            border-radius: 50%;
            background: linear-gradient(#ffe64f, #fbf7c8);
            animation: turnCercle 2s infinite;
            -webkit-animation: turnCercle 5s infinite;
            animation-timing-function: linear;
            -webkit-animation-timing-function: linear;
        }
        .loadingWrap #cercleCache {
            height: 80px;
            width: 80px;
            position: absolute;
            border-radius: 50%;
            background-color: #ffe64f;
            z-index: 5;
        }
        @-webkit-keyframes turnCercle {
            0% {
                -webkit-transform: rotate(0deg);
            }
            100% {
                -webkit-transform: rotate(10080deg);
            }
        }
        @keyframes turnCercle {
            0% {
                transform: rotate(0deg);
            }
            100% {
                transform: rotate(10080deg);
            }
        }
        
        
.loaders {
    position:fixed;width:100%;top:0px;bottom:0px;
    background-color: #000;
    opacity:.8;
    display:none;
}

.loaders-bg-4 {
  background-color: #000;
}

.loader {
  position:absolute;
  left:50%;top:50%;
  margin:-50px 0 0 -50px;
  width: 100px;
  height: 100px;
  vertical-align: middle;
}


/*  $Loader Bars
    ========================================================================== */
.loaders-bg-4 p{position:absolute;left:50%;top:50%;margin:-40px 0 0 20px;font-family:'微软雅黑';color:#FFF;}
.loader-bars:before,
.loader-bars:after,
.loader-bars span {
  content: '';
  display: block;
  position: absolute;
  left: 0px;
  top: 0;
  width: 15px;
  height: 45px;
  background-color: #fff;
  -webkit-animation: grow 1.5s linear infinite;
  animation: grow 1.5s linear infinite;
}
.loader-bars:after {
  left: 20px;
  -webkit-animation: grow 1.5s linear -0.5s infinite;
  animation: grow 1.5s linear -0.5s infinite;
}

.loader-bars span {
  left: 40px;
  -webkit-animation: grow 1.5s linear -1s infinite;
  animation: grow 1.5s linear -1s infinite;
}

@-webkit-keyframes grow {
  0% {
    -webkit-transform: scaleY(0);
    transform: scaleY(0);
    opacity: 0;
  }
  50% {
    -webkit-transform: scaleY(1);
    transform: scaleY(1);
    opacity: 1;
  }
  100% {
    -webkit-transform: scaleY(0);
    transform: scaleY(0);
    opacity: 0;
  }
}
@keyframes grow {
  0% {
    -webkit-transform: scaleY(0);
    transform: scaleY(0);
    opacity: 0;
  }
  50% {
    -webkit-transform: scaleY(1);
    transform: scaleY(1);
    opacity: 1;
  }
  100% {
    -webkit-transform: scaleY(0);
    transform: scaleY(0);
    opacity: 0;
  }
}
@-webkit-keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
    tranform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    tranform: rotate(360deg);
  }
}
@keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
    tranform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    tranform: rotate(360deg);
  }
}
@-webkit-keyframes spinreverse {
  0% {
    -webkit-transform: rotate(0deg);
    tranform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(-360deg);
    tranform: rotate(-360deg);
  }
}
@keyframes spinreverse {
  0% {
    -webkit-transform: rotate(0deg);
    tranform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(-360deg);
    tranform: rotate(-360deg);
  }
}