/**
 * ime4 CSS
 * index
 * 2014-10-21
 */

*,*:before,*:after{
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
html {
    height: 100%;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
}
body{
    height: 100%;
    background-color: #ebeeed;
    display: none;
    margin: 0;
    color: white;
    position: relative;
    font-family: "微软雅黑",Helvetica,Arial,sans-serif;

    font-size: 18px;
    line-height: 40px;
}
div{
    position: relative;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

.hide{
    display: none;
}
.txt-yellow{
    color: #0072e6;
}
.txt-green{
    color: #004ddb;
}
.txt-blue{
    color: #008edf;
}
.txt-warn{
    color: #ffc03e;
}
.txt-pink{
    color: #ff68d4;
}
.txt-white{
    color: #ffffff;
}
.txt-md{
    font-size: 28px;
}
.txt-sm{
    font-size: 16px;
}
.txt-lg{
    font-size: 38px;
}
.full{
    width: 100%;
    height: 100%;
}

.snow1 {
    width: 100%;
    height: 100%;
    z-index:9999;
}
.active .snow1 {
    width: 100%;
    height: 100%;
    z-index:9999;
    -webkit-animation: snow1 8s infinite;
}
@-webkit-keyframes snow1{0%{-webkit-transform: translate3d(0,0,0);}100%{-webkit-transform: translate3d(0,50%,0);}}
.snow2 {
    width: 100%;
    height: 100%;
    z-index:9998;
}
.active .snow2 {
    width: 100%;
    height: 100%;
    z-index:9998;
    -webkit-animation: snow2 8s 5s infinite;
}
@-webkit-keyframes snow2{0%{-webkit-transform: translate3d(0,0,0);}100%{-webkit-transform: translate3d(0,50%,0);}}
#main{
    background-color:white;
    overflow: hidden;
    margin: 0 auto;
    width: 100%;
    height: 100%;
}

#guide{
    z-index: 999;
    opacity: 0;
    position: absolute;
    bottom: 1%;
    left: 50%;
    width: 9.58333333%;
    margin-left: -4.79166666%;

    animation: guide 1.5s infinite;
    -webkit-animation: guide 1.5s infinite;
    -moz-animation: guide 1.5s infinite;
    -o-animation: guide 1.5s infinite;
}
@keyframes guide{70%{bottom:4.5%;opacity:1;}100%{bottom:7%;opacity:0;}}
@-webkit-keyframes guide{70%{bottom:4.5%;opacity:1;}100%{bottom:7%;opacity:0;}}
@-moz-keyframes guide{70%{bottom:4.5%;opacity:1;}100%{bottom:7%;opacity:0;}}
@-o-keyframes guide{70%{bottom:4.5%;opacity:1;}100%{bottom:7%;opacity:0;}}
.lingxi{
    z-index: 999;
    position: absolute;
    bottom: 2%;
    left: 4%;
    width: 15%;
}
.lingxi_last{
    z-index: 999;
    position: absolute;
    bottom: 1%;
    left: 4%;
    width: 15%;
}

#notSupport{
    position: absolute;
    top: 0;
    text-align: center;
    width: 100%;
    z-index: 10000;
    background-color: white;
    color: #515151;
    height: 100%;
    padding-top: 40%;
}
#audio{
    opacity: 0;
    height: 0;
    width: 0;
}

#load{
    z-index: 1000;
    position: absolute;
    width: 100%;
    height: 100%;
    background: white;
    top: 0;
    left: 0;
}

#swipe{
    background-color:white;
    overflow: hidden;
    width: 100%;
    height: 700%;

    cursor: -webkit-grab;
    cursor: grab;
    cursor: -moz-grab;
    cursor: -o-grab;
    cursor: -ms-grab;
}
#swipe:active{
    cursor: -webkit-grabbing;
    cursor: -grabbing;
    cursor: -moz-grabbing;
    cursor: -o-grabbing;
    cursor: -ms-grabbing;
}
#swipe>div{
    overflow: hidden;
    height: 14.28571428%;
    width: 100%
}
#swipe>div>div,#swipe>div>img{
    position: absolute;
}
/*==================== p ====================*/
.p0-a>img, .p0-b>div, .p0-b>div>img, .p1-a>img, .p1-d>img, .p3-c>img, .p3-c>div, .p3-d>div,
.p4-c>img, .p4-b1, .p5-c>img, .p6-icon, .lock2-a>img,.lock1-h>img,.lock1-h>div
{
    position: absolute;
}
#p0{
    background: url(../img/lockbg0.jpg) no-repeat;
    background-size: 100% 100%;
}
#p1{
    background: url(../img/lockbg1.jpg) no-repeat;
    background-size: 100% 100%;
}
#p2{
   background-color:#49adc6;
    background-size: 100% 100%;
}
#p3{
    background-color:#4f5586;
    background-size: 100% 100%;
}

.line{
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
/*===========weixinguide========*/
#Pop {				
    width: 100%;				
    height: 100%;
    display: block;
    overflow: hidden;
    position: absolute;
    z-index: 99;
    left: 0px;
    right: 0px;
    top: 0px;
    margin-top: auto;
    margin-left: auto;
    margin-right: auto;
	background-color: rgba(0, 0, 0, 0.5);
 }

#popmain {
	position: absolute;
    top: 0;
    width: 100%;
    height:140px;
    background: url(../img/weixin.jpg) no-repeat;
    background-size: 100% 100%;
    color: #3e3e3e;
}
/*========== p0 ==========*/
.lock0-title{    
    top: 5%;
    right:27%;
    width: 45%;
    text-align: center;
}
.lock0-girl{    
    bottom: 5%;
    right:2%;
    width: 90%;
    text-align: center;
}
.lock-logo{    
    top: 1%;
    right:2%;
    width: 25%;
    text-align: center;
}
.lock-down{
    z-index: 999;
    position: absolute;
    bottom: 0%;
    
    width: 100%;
    text-align: center;
}
.downbutton{       
    width: 40%; 
  
}
.lock-down-small{
    z-index: 999;
    position: absolute;
    bottom: 2%;
    right:4%;
    width: 16%;
    text-align: center;
}
.lock0-a{
    top:35px;
    width: 100%;
    text-align: center;
}

/*========== p1 ==========*/
.lock1-b{
    top:111px;
    width: 85%;
    left:8%;
     z-index:1;
}
.lock1-c{
    top:285px;
    width: 40%;
    right:30%;
    z-index:2;
}

.lock1-e{
    top:423px;
    width: 13%;
     left:9%;
    z-index:3;  
}
.active .lock1-e{
     transform:rotate3d(0, 0, 1, -5deg);
    -webkit-transform:rotate3d(0, 0, 1, -5deg);
    -moz-transform:rotate3d(0, 0, 1, -5deg);
    -o-transform:rotate3d(0, 0, 1, -5deg);
     /*animation: alock1-b1 4s linear infinite;
    -webkit-animation: alock1-b6, alock1-b6b;
    -webkit-animation-duration: 1s,2s;
-webkit-animation-timing-function: linear,linear;
-webkit-animation-delay: 0s,2s;
-webkit-animation-iteration-count: 1,infinite;
-webkit-animation-direction: normal,alternate;*/
    animation:  alock1-b6b 2s .3s linear infinite;
    -webkit-animation:  alock1-b6b 2s .3s linear infinite;
    -moz-animation: alock1-b6b 2s .3s linear infinite;
    -o-animation: alock1-b6b 2s .3s linear infinite;
}
@keyframes alock1-b6b{50%{transform:rotate3d(0, 0, 1, 5deg);}}
@-webkit-keyframes alock1-b6b{50%{-webkit-transform:rotate3d(0, 0, 1, 5deg);}}
@-moz-keyframes alock1-b6b{50%{-moz-transform:rotate3d(0, 0, 1, 5deg);}}
@-o-keyframes alock1-b6b{50%{-o-transform:rotate3d(0, 0, 1, 5deg);}}
.lock1-g1{
    top:361px;
    width: 9%;
    height:10%;
    left:31%;
    display:none;
    z-index:3;
    background: url(../img/screendark.png) no-repeat;
    background-size: 100% 100%;
}
.active .lock1-g1{
    background: url(../img/screenlight.png) no-repeat;
    background-size: 100% 100%;
    display:block;
}
.lock1-g2{
    top:361px;
    width: 9%;
    height:10%;
    left:31%;
    display:none;
    z-index:3;
    background: url(../img/screendark.png) no-repeat;
    background-size: 100% 100%;
}
.active .lock1-g2{
    background: url(../img/screend.png) no-repeat;
    background-size: 100% 100%;
    display:block;
}
.lock1-ha{
    top:255px;
    width: 30%;
    left:15%;
    z-index:5;
    opacity: 0;
    display:none;
}
.lock1-hb{
    top:275px;
    width: 20%;
    left:21%;
    z-index:6;
    font-size:20px;
    opacity: 0;
    display:none;
}
.active .lock1-ha{   
    display:block;  
     animation: alock1-h .1s ease-in;
     animation-delay: 1.2s;
     animation-fill-mode :forwards;

    -webkit-animation:alock1-h .1s ease-in;
    -webkit-animation-delay: 1.2s;
    -webkit-animation-fill-mode :forwards;

    -moz-animation:alock1-h .1s ease-in;
    -moz-animation-delay: 1.2s;
    -moz-animation-fill-mode :forwards;
    
    -o-animation:alock1-h .1s ease-in;
    -o-animation-delay: 1.2s;
    -o-animation-fill-mode :forwards;
}
.active .lock1-hb{  
    display:block;  
    animation: alock1-h .1s ease-in;
     animation-delay: 1.2s;
     animation-fill-mode :forwards;

    -webkit-animation:alock1-h .1s ease-in;
    -webkit-animation-delay: 1.2s;
    -webkit-animation-fill-mode :forwards;

    -moz-animation:alock1-h .1s ease-in;
    -moz-animation-delay: 1.2s;
    -moz-animation-fill-mode :forwards;
    
    -o-animation:alock1-h .1s ease-in;
    -o-animation-delay: 1.2s;
    -o-animation-fill-mode :forwards;
}
@keyframes alock1-h{from{transform: translate3d(30px,30px,0);opacity: 1;}to{transform: translate3d(0,0,0);opacity: 1;}}
@-webkit-keyframes  alock1-h{from{-webkit-transform: translate3d(30px,30px,0);opacity: 1;}to{-webkit-transform: translate3d(0,0,0);opacity: 1;}}
@-moz-keyframes alock1-h{from{-moz-transform: translate3d(30px,30px,0);opacity: 1;}to{-moz-transform: translate3d(0,0,0);opacity: 1;}}
@-o-keyframes alock1-h{from{-o-transform: translate3d(30px,30px,0);opacity: 1;}to{-o-transform: translate3d(0,0,0);opacity: 1;}}
/*===== p2 =====*/
.lock2-c{
    top:285px;
    width: 40%;
    right:30%;
    z-index:2;
}
.lock2-g2{
    top:361px;
    width: 9%;
    height:10%;
    left:31%;
    display:none;
    z-index:3;
    background: url(../img/screendark.png) no-repeat;
    background-size: 100% 100%;
}
.active .lock2-g2{
    background: url(../img/screenp.png) no-repeat;
    background-size: 100% 100%;
   display:block;
}
.lock2-hb{
    top:275px;
    width: 30%;
    left:17%;
    font-size:20px;
    z-index:6;
    opacity: 0;
    display:none;
}
.active .lock2-hb 
{
     display:block;
     animation: alock1-h .1s ease-in ;
     animation-delay: 1.2s;
     animation-fill-mode :forwards;

    -webkit-animation:alock1-h .1s ease-in ;
    -webkit-animation-delay: 1.2s;
    -webkit-animation-fill-mode :forwards;

    -moz-animation:alock1-h .1s ease-in ;
    -moz-animation-delay: 1.2s;
    -moz-animation-fill-mode :forwards;
    
    -o-animation:alock1-h .1s ease-in ;
    -o-animation-delay: 1.2s;
    -o-animation-fill-mode :forwards;
}
.lock2-d{
    top:190px;
    width: 8%;
    right:20%;
    display:block;
}
.active .lock2-d{
    display:block;
    animation:  alock2-e 8s  linear infinite ;
    -webkit-animation:  alock2-e 8s  linear infinite ;
    -o-animation:  alock2-e 8s  linear infinite ;
    -moz-animation:  alock2-e 8s  linear infinite ;
}
@keyframes alock2-d{25%{transform: translate3d(50%,0,0);}50%{transform: translate3d(0,0,0);}75% {transform: translate3d(-50%,0,0);}100% {transform: translate3d(0,0,0);}}
@-webkit-keyframes alock2-d{25%{-webkit-transform: translate3d(50%,0,0);}50%{-webkit-transform: translate3d(0,0,0);}75% { -webkit-transform: translate3d(-50%,0,0);}100% { -webkit-transform: translate3d(0,0,0);}}
@-moz-keyframes alock2-d{25%{-moz-transform: translate3d(50%,0,0);}50%{-moz-transform: translate3d(0,0,0);}75% { -moz-transform: translate3d(-50%,0,0);}100% { -moz-transform: translate3d(0,0,0);}}
@-o-keyframes alock2-d{25%{-o-transform: translate3d(50%,0,0);}50%{-o-transform: translate3d(0,0,0);}75% { -o-transform: translate3d(-50%,0,0);}100% { -o-transform: translate3d(0,0,0);}}
.lock2-e{
    top:140px;
    width: 13%;
    right:10%;
    display:block;
}
.active .lock2-e{
    display:block;
     animation:  alock2-d 8s  linear infinite ;
    -webkit-animation:  alock2-d 8s  linear infinite ;
    -o-animation:  alock2-d 8s  linear infinite ;
    -moz-animation:  alock2-d 8s  linear infinite ;
}
@keyframes alock2-e{25%{transform: translate3d(-100%,0,0);}50%{transform: translate3d(0,0,0);}75% {transform: translate3d(100%,0,0);}100% {transform: translate3d(0,0,0);}}
@-webkit-keyframes alock2-e{25%{-webkit-transform: translate3d(-100%,0,0);}50%{-webkit-transform: translate3d(0,0,0);}75% { -webkit-transform: translate3d(100%,0,0);}100% { -webkit-transform: translate3d(0,0,0);}}
@-moz-keyframes alock2-e{25%{-mox-transform: translate3d(-100%,0,0);}50%{-moz-transform: translate3d(0,0,0);}75% { -moz-transform: translate3d(100%,0,0);}100% { -moz-transform: translate3d(0,0,0);}}
@-o-keyframes alock2-e{25%{-o-transform: translate3d(-100%,0,0);}50%{-o-transform: translate3d(0,0,0);}75% { -o-transform: translate3d(100%,0,0);}100% { -o-transform: translate3d(0,0,0);}}
/*===== p3 =====*/
.lock3-a{
    top:142px;
    width: 12%;
    right:8%;
}
.active .lock3-a{
  
    /*-webkit-animation: alock3-a1, alock3-a2;
    -webkit-animation-duration: 1s,2s;
    -webkit-animation-timing-function: linear,linear;
    -webkit-animation-delay: 0s,1s;
    -webkit-animation-iteration-count: 1,infinite;
    -webkit-animation-direction: normal,alternate;*/
     animation:alock3-a2 2s linear infinite ;
     -webkit-animation:alock3-a2 2s linear infinite ;
     -moz-animation:alock3-a2 2s linear infinite ;
     -o-animation:alock3-a2 2s linear infinite ;
    
}
@keyframes alock3-a2{50%{transform:rotate3d(0, 0, 1, 12deg);}}
@-webkit-keyframes alock3-a2{50%{-webkit-transform:rotate3d(0, 0, 1, 12deg);}}
@-moz-keyframes alock3-a2{50%{-moz-transform:rotate3d(0, 0, 1, 12deg);}}
@-o-keyframes alock3-a2{50%{-o-transform:rotate3d(0, 0, 1, 12deg);}}
.lock3-e{
    top:285px;
    width: 40%;
    right:30%;
    z-index:2;
}
.lock3-g2{
    top:361px;
    width: 9%;
    height:10%;
    left:31%;
    display:none;
    z-index:3;
    background: url(../img/screendark.png) no-repeat;
    background-size: 100% 100%;
}
.active .lock3-g2{
    background: url(../img/screens.png) no-repeat;
    background-size: 100% 100%;
   display:block;
}
.lock3-hb{
    top:275px;
    width: 24%;
    left:21%;
    font-size:20px;
    z-index:6;
    opacity: 0;
    line-height: 20px;
    display:none;  
}
.active .lock3-hb {
     display:block;  
     animation: alock1-h .1s ease-in;
     animation-delay: 1.2s;
     animation-fill-mode :forwards;

    -webkit-animation:alock1-h .1s ease-in  ;
    -webkit-animation-delay: 1.2s;
    -webkit-animation-fill-mode :forwards;

    -moz-animation:alock1-h 4s linear  ;
    -moz-animation-delay: 1.5s;
    -moz-animation-fill-mode :forwards;
    
    -o-animation:alock1-h 4s linear  ;
    -o-animation-delay: 1.5s;
    -o-animation-fill-mode :forwards;
}
.lock3-hc{
    top:299px;
    width: 24%;
    left:23%;
    font-size:20px;
    z-index:6;
    opacity: 0;
    line-height: 20px;
    display:none; 
}
.active .lock3-hc {
     display:block;  
     animation: alock1-h .1s ease-in;
     animation-delay: 1.2s;
     animation-fill-mode :forwards;

    -webkit-animation:alock1-h .1s ease-in  ;
    -webkit-animation-delay: 1.2s;
    -webkit-animation-fill-mode :forwards;

    -moz-animation:alock1-h 4s linear  ;
    -moz-animation-delay: 1.5s;
    -moz-animation-fill-mode :forwards;
    
    -o-animation:alock1-h 4s linear  ;
    -o-animation-delay: 1.5s;
    -o-animation-fill-mode :forwards;
}
.lock3-i{
     top:190px;
    width: 7%;
    right:26%;
   
}
.active .lock3-i{
  
}
.lock3-j{
   top:140px;
    width: 12%;
    right:16%;
    display:block;
 
}
.active .lock3-j{
    
   
}
.lock3-l{
    top:321px;
    width: 10%;
    height:6%;
    left:30.5%;
    opacity:0;
    z-index:3;
    display:none;
}
.active .lock3-l{
     display:block;
    animation: alock3-j .1s 2.5s linear ;
    -animation-fill-mode :forwards;

    -webkit-animation: alock3-j .1s 2.5s linear ;
    -webkit-animation-fill-mode :forwards;

    -moz-animation: alock3-j .1s 2.5s linear ;
    -webkit-animation-fill-mode :forwards;

    -o-animation: alock3-j .1s 2.5s linear ;
     -webkit-animation-fill-mode :forwards;

}
@keyframes alock3-j{100%{opacity:1;}}
@-webkit-keyframes alock3-j{100%{opacity:1;}}
@-moz-keyframes alock3-j{100%{opacity:1;}}
@-o-keyframes alock3-j{100%{opacity:1;}}