.sliderImgPuzzleBox { position: relative; padding-top: 1px; padding-bottom: 1px; z-index: 9; }

.block { position: absolute; left: 0; top: 0; }

.canvasContainer { display: none; position: absolute; background: #fff; overflow: hidden; }

.sliderImgPuzzleContainer { position: relative; text-align: center; width: 100%; height: 100%; font-size: 14px; color: #45494c; border: 1px solid #e6e6e6; background: #ffffff; }

    .sliderImgPuzzleContainer.sliderImgPuzzleContainer_success { border: 1px solid #52ccba; background-color: #d2f4ef; }

.sliderImgPuzzleContainer_active .sliderImgPuzzle { background: #1991fa; }

.sliderImgPuzzleContainer_active .sliderImgPuzzleMask { border: 1px solid #1991fa; background: #d1e9fe; }

.sliderImgPuzzleContainer_success .sliderImgPuzzle { background-color: #52ccba !important; }

.sliderImgPuzzleContainer_success .sliderImgPuzzleMask { border: 1px solid #52ccba; background-color: #d2f4ef; }

.sliderImgPuzzleContainer_success .sliderImgPuzzleIcon { background-position: 0 0 !important; }

.sliderImgPuzzleContainer_fail .sliderImgPuzzle { background-color: #f57a7a !important; }

.sliderImgPuzzleContainer_fail .sliderImgPuzzleMask { border: 1px solid #f57a7a; background-color: #fce1e1; }

.sliderImgPuzzleContainer_fail .sliderImgPuzzleIcon { background-position: 0 -82px !important; }

.sliderImgPuzzleContainer_active .sliderImgPuzzleText, .sliderImgPuzzleContainer_success .sliderImgPuzzleText, .sliderImgPuzzleContainer_fail .sliderImgPuzzleText { visibility: hidden }

.sliderImgPuzzleMask { position: absolute; left: -1px; top: -1px; height: 100%; border: 1px solid rgba(0, 0, 0, 0.00); background-color: rgba(0, 0, 0, 0.00); /*transition: background,border .2s linear;*/ }

#inner { position: absolute; z-index: 1; bottom: 0; left: 0; }

.sliderImgPuzzle { position: absolute; top: -1px; left: -1px; width: 48px; height: 100%; background: #fff; box-shadow: 0 0 3px rgba(0,0,0,0.1); cursor: pointer; transition: background .2s linear; padding: 1px; z-index: 2; }

    .sliderImgPuzzle:hover { background: #1991fa; }

        .sliderImgPuzzle:hover .sliderImgPuzzleIcon { background-position: 0 -13px; }

.sliderImgPuzzleIcon { position: absolute; top: 0; left: 0; bottom: 0; right: 0; margin: auto; width: 14px; height: 12px; background: url(./icon.png) 0 -26px; background-size: 34px 471px; }

.refreshIcon { position: absolute; right: 0; top: 0; width: 34px; height: 34px; cursor: pointer; background: url(./icon.png) 0 -437px; background-size: 34px 471px; z-index: 3; }

.sliderImgPuzzvarext { position: absolute; left: 0; top: 0; text-align: center; width: 100%; height: 100%; display: block; }

.sliderImgPuzzleErrorBox { width: 100%; height: 100%; display: none; position: absolute; z-index: 1; left: 0; top: 0; background: #eee; }

.sliderImgPuzzleErrorIcon { position: absolute; left: 0; right: 0; bottom: 0; top: 0; margin: auto; background: url(./icon.png) 0 -150px; background-size: 34px 471px; width: 34px; height: 33px; }

.sliderImgPuzzleErrorText { position: absolute; left: 0; top: 0; text-align: center; font-size: 12px; right: 0; bottom: 0; width: 100%; margin: auto; display: inline-block; height: 20px; padding-top: 60px; }

.sliderImgPuzzleLodingIcon { display: none; position: absolute; left: 0; right: 0; bottom: 0; top: 0; margin: auto; background: url(./icon.png) 0 -184px; background-size: 34px 471px; width: 34px; height: 34px; -webkit-animation: rotate360 .8s linear infinite; z-index: 1; }


@-webkit-keyframes rotate360 {

    0% { -webkit-transform: rotate(0deg); }

    25% { -webkit-transform: rotate(90deg); }

    50% { -webkit-transform: rotate(180deg); }

    75% { -webkit-transform: rotate(270deg); }

    100% { -webkit-transform: rotate(360deg); }
}