﻿body{background:#222;padding:0;margin:0;font:20px/1 Arial,'Simsun';overflow:hidden}
#wrap{width:640px;/*box-shadow:10px -10px 10px #2A271C inset;*/position:absolute;top:-1000%;left:50%;margin:-480px 0 0 -320px;background:url('../images/wrap.jpg') #234997;background-size:100% 100%;/*border-radius:20px*/}
#load{width:240px;height:240px;float:left;color:#fff;text-align:center;position:absolute;top:50%;left:50%;margin:-120px 0 0 -120px}
#load p{position:absolute;bottom:0;left:-25%;width:150%;white-space:nowrap;display:none;}
#load .p266{
    position:relative;
    top:-200px;
    display:block;
    width:146px;
    height:104px;
    margin:0 auto;
    border-radius:15px;
}

#load #percent{
    position:relative;
    top:68px;
    font-size:26px;
    letter-spacing: 2px;;
    color:#fff;
    font-family:fantasy;
    -webkit-transition: all 1s;
    transition: all 1s;
}

.grab{position:absolute;top:-1000%;left:0;}


.spinner {
    width: 60px;
    height: 60px;
    -webkit-animation: rotate 1.4s infinite ease-in-out, background 1.4s infinite ease-in-out alternate;
    animation: rotate 1.4s infinite ease-in-out, background 1.4s infinite ease-in-out alternate;
    position:absolute;
    top:50%;
    left:50%;
    margin:-30px 0 0 -30px;
}

@-webkit-keyframes rotate {
    0% {
        -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg);
        transform: perspective(120px) rotateX(0deg) rotateY(0deg);
    }
    50% {
        -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(0deg);
        transform: perspective(120px) rotateX(-180deg) rotateY(0deg);
    }
    100% {
        -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-180deg);
        transform: perspective(120px) rotateX(-180deg) rotateY(-180deg);
    }
}

@keyframes rotate {
    0% {
        -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg);
        transform: perspective(120px) rotateX(0deg) rotateY(0deg);
    }
    50% {
        -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(0deg);
        transform: perspective(120px) rotateX(-180deg) rotateY(0deg);
    }
    100% {
        -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-180deg);
        transform: perspective(120px) rotateX(-180deg) rotateY(-180deg);
    }
}
@-webkit-keyframes background {
    0% {
        background-color: #e33935;
    }
    50% {
        background-color: #30addd;
    }
    100% {
        background-color: #66b851;
    }
}
@keyframes background {
    0% {
        background-color: #e33935;
    }
    50% {
        background-color: #30addd;
    }
    100% {
        background-color: #66b851;
    }
}
