*{padding:0px;margin:0px;font-family:"微软雅黑";font-size:100%; font-style:normal}
dd,dl,dt,em,i,p,textarea,a,div{padding:0px;margin:0px;}
a{text-decoration:none;}
img{border:0px;}
ul,li{padding:0px;margin:0px;list-style:none;}
.fl{ float:left}
.fr{ float:right}
body{margin:0px; padding:0px; color:#ffc476; background:#fff; color:#000000}
a{
-webkit-tap-highlight-color: rgba(0,0,0,0);
-webkit-tap-highlight-color: transparent;
}
.none{ display:none}

.fot2{ position:absolute; left:200px; bottom:20px; background:#CC6; width:100px; height:100px;}

/*js 原代码*/
html{ min-width:320px; max-width:640px; margin:0 auto;}  
#btn{ width:300px; height:90px;  position:absolute; left:50%; margin-left:-150px; bottom:80px; z-index:50} 
#btn em{ display:block; position:absolute; left:195px; top:50px; z-index:100}

#btn1{ width:300px; height:90px;  position:absolute; left:50%; margin-left:-150px; bottom:80px; z-index:50} 

#showImg{ width:100%; height:100%; overflow:hidden; position:relative;}  
#showImg img{ position:absolute;}  
.showDh{ -webkit-transition:all linear .1s; transition:all linear .1s;}  
.cont .start{ width:300px; height:90px;  position:absolute; left:50%; bottom:80px; margin-left:-150px; z-index:100}

/*js 原代码*/



.cont{ width:640px; height:1039px; margin:0px auto; overflow:hidden; position:relative}

.page1{ position:absolute; left:0px; top:0px; z-index:10; }
.page2{ position:absolute; left:0px; top:0px; z-index:9 }
.page2_1{ position:absolute; left:0px; top:0px; z-index:8 }
.page2_1 em{ display:block; position:absolute; left:0px; top:205px;}
.page3{ position:absolute; left:0px; top:0px; z-index:7 }
.page4{ position:absolute; left:0px; top:0px; z-index:6 }
.page5{ position:absolute; left:0px; top:0px; z-index:5}


.page2 b{  position:absolute; left:255px; top:55px;}



.page3 .dhtext{ position:absolute; left:0px; top:0px; z-index:7; width:100%; }

.page3 .dhtext em img:nth-of-type(1){ position:absolute; left:24px; top:11px}
.page3 .dhtext em img:nth-of-type(2){ position:absolute; right:30px; top:73px}
.page3 .dhtext em img:nth-of-type(3){ position:absolute; left:24px; top:148px}
.page3 .dhtext em img:nth-of-type(4){ position:absolute; right:30px; top:210px}
.page3 .dhtext span{ position:absolute; top:477px; left:190px; }


.page3 .duhkan em img{animation: 0.2s linear forwards; transform:translateX(620px);-webkit-animation: 0.2s linear forwards; -webkit-transform:translateX(620px);}
.page3 .dhtext em img:nth-of-type(1){animation-name:duhaDhl;-webkit-animation-name:duhaDhl;}
.page3 .dhtext em img:nth-of-type(2){animation-name:duhaDhR; animation-delay:0.2s;-webkit-animation-name:duhaDhR; -webkit-animation-delay:0.2s}
.page3 .dhtext em img:nth-of-type(3){animation-name:duhaDhl; animation-delay:0.4s;-webkit-animation-name:duhaDhl; -webkit-animation-delay:0.4s}
.page3 .dhtext em img:nth-of-type(4){animation-name:duhaDhR; animation-delay:0.8s;-webkit-animation-name:duhaDhR; -webkit-animation-delay:0.8s;}



.page4 em{ position:absolute; left:60px; top:150px;z-index:6;}
.page4 .buzou{ position:absolute; left:0px; top:0px;z-index:6; width:640px;}

.page4 .buzou img{ position:absolute; }

.page4 .buzou img:nth-of-type(1){  z-index:3}
.page4 .buzou img:nth-of-type(2){  z-index:4}
.page4 .buzou img:nth-of-type(3){  z-index:5}


.page5 em{ position:absolute; left:325px; top:125px;z-index:5;}



@keyframes duhaDhl {  
0%{ transform:translateX(-620px);transform-origin:left center;}
100%{transform:translateX(0px);transform-origin:left top; }
}
@-webkit-keyframes duhaDhl {  
0%{ -webkit-transform:translateX(-620px);-webkit-transform-origin:left center;}
100%{-webkit-transform:translateX(0px);-webkit-transform-origin:left top; }
}


@keyframes duhaDhR {  
0%{ transform:translateX(620px);transform-origin:left center;}
100%{transform:translateX(0px);transform-origin:left top; }
}
@-webkit-keyframes duhaDhR {  
0%{ -webkit-transform:translateX(620px);-webkit-transform-origin:left center;}
100%{-webkit-transform:translateX(0px);-webkit-transform-origin:left top; }
}



.page1_text{ position:absolute; left:137px; top:806px; z-index:10; }

/*第一屏对话框出现*/
.text_anima{animation:titleone 0.4s linear forwards;-webkit-animation:titleone 0.4s linear forwards;}
@keyframes titleone{
0%{ transform:scale(0.3); opacity:0} 
100%{ transform:scale(1); opacity:1}
}
@-webkit-keyframes titleone{
0%{ -webkit-transform:scale(0.3); opacity:0} 
100%{ -webkit-transform:scale(1); opacity:1}
}



/* 第二屏放大*/
.gammax{animation:fanda 0.7s linear forwards;-webkit-animation:fanda 0.7s linear forwards;}
@keyframes fanda {  
0%{  transform:scale(5);transform-origin:left top; }
100%{transform:scale(1);transform-origin:left top; }
}
@-webkit-keyframes fanda {  
0%{  -webkit-transform:scale(5);-webkit-transform-origin:left top; }
100%{-webkit-transform:scale(1);-webkit-transform-origin:left top; }
}


/* 第一屏缩小*/
.gammin{animation:yidong 0.7s linear forwards;-webkit-animation:yidong 0.7s linear forwards;}
@keyframes yidong {  
0%{ transform:translate(0px,0px) ; transform:scale(1);transform-origin:left center; }
100%{transform:translate(120px,540px);transform:scale(0);transform-origin:140px center; }
}

@-webkit-keyframes yidong {  
0%{ -webkit-transform:translate(0px,0px) ; -webkit-transform:scale(1);-webkit-transform-origin:left center; }
100%{-webkit-transform:translate(120px,540px);-webkit-transform:scale(0);-webkit-transform-origin:140px center; }
}


/*第一屏文字缩小*/
.onetext{animation:textmin 1s linear forwards;-webkit-animation:textmin 1s linear forwards;}
@keyframes textmin {  
0%{  transform:scale(1);transform-origin:left top;}
100%{transform:scale(0);transform-origin:-20px 250px;}
}
@-webkit-keyframes textmin {  
0%{  -webkit-transform:scale(1);-webkit-transform-origin:left top;}
100%{-webkit-transform:scale(0);-webkit-transform-origin:-20px 250px;}
}



.kihhand{ position:absolute; left:110px; top:430px;z-index:200; }

.handlc{ position:absolute; left:370px; top:660px; z-index:200; }

/*第二屏手闪烁*/
.handlc_anima{animation:handss 1s linear infinite;-webkit-animation:handss 1s linear infinite;}
@keyframes handss{
0%{ opacity:0.2; } 
5%{ opacity:0.3; } 
10%{ opacity:0.4; } 
15%{ opacity:0.5; } 
20%{ opacity:0.6; } 
21%{ opacity:1; } 
79%{ opacity:1; } 
80%{ opacity:0.6; } 
85%{ opacity:0.5; } 
90%{ opacity:0.4; } 
95%{ opacity:0.3; } 
100%{ opacity:0.2; } 
}

@-webkit-keyframes handss{
0%{ opacity:0.2; } 
5%{ opacity:0.3; } 
10%{ opacity:0.4; } 
15%{ opacity:0.5; } 
20%{ opacity:0.6; } 
21%{ opacity:1; } 
79%{ opacity:1; } 
80%{ opacity:0.6; } 
85%{ opacity:0.5; } 
90%{ opacity:0.4; } 
95%{ opacity:0.3; } 
100%{ opacity:0.2; } 
}


/*@-webkit-keyframes handss{
0%{ opacity:0.14; } 
5%{ opacity:0.24; } 
10%{ opacity:0.32; } 
15%{ opacity:0.41; } 
20%{ opacity:0.49; } 
25%{ opacity:0.58; } 
30%{ opacity:0.66; } 
35%{ opacity:0.75; } 
40%{ opacity:0.83; } 
45%{ opacity:0.92; } 
50%{ opacity:1; } 
55%{ opacity:0.92; } 
60%{ opacity:0.83; } 
65%{ opacity:0.75; } 
70%{ opacity:0.66; } 
75%{ opacity:0.58; } 
80%{ opacity:0.49; } 
85%{ opacity:0.41; } 
90%{ opacity:0.32; } 
95%{ opacity:0.24; } 
100%{ opacity:0.14; } 
}*/

/*流程*/
.liuchen{ width:640px; position:absolute; left:0px; top:0px; z-index:9}
.liuchen .img img{ position:absolute; }

.liuchen .img img:nth-of-type(1){  z-index:3}
.liuchen .img img:nth-of-type(2){  z-index:4}
.liuchen .img img:nth-of-type(3){  z-index:5}


/*流程 切换*/
.liuchen_anima{animation:chulia 0.3s linear forwards;-webkit-animation:chulia 0.3s linear forwards;}
@keyframes chulia{
0%{ transform:translateY(1039px) } 
100%{ transform:translateY(0px) }

}
@-webkit-keyframes chulia{
0%{ -webkit-transform:translateY(1039px) } 
100%{ -webkit-transform:translateY(0px) }

}

.liuchen .xioalian{ position:absolute; left:265px; top:156px; z-index:900}

/*笑脸放大*/
.xlDh{animation:maxxiaol 0.7s linear forwards;-webkit-animation:maxxiaol 0.7s linear forwards;}
@keyframes maxxiaol{
0%{ transform:scale(1);  transform-origin:center center; opacity:1;} 
100%{ transform:scale(2.5); transform-origin:center -120px; opacity:0;}

}
@-webkit-keyframes maxxiaol{
0%{ -webkit-transform:scale(1);  -webkit-transform-origin:center center; opacity:1;} 
100%{ -webkit-transform:scale(2.5); -webkit-transform-origin:center -120px; opacity:0;}

}


/*透明度动画 */

.bjycdh{animation:bjyincna 0.7s linear forwards;-webkit-animation:bjyincna 0.7s linear forwards;}

@keyframes bjyincna{
0%{  opacity:1;} 
100%{  opacity:0;}
}

@-webkit-keyframes bjyincna{
0%{  opacity:1;} 
100%{  opacity:0;}
}


/* 第二屏缩小*/
.min_cj3{animation:cj3min 0.7s linear forwards;-webkit-animation:cj3min 0.7s linear forwards;}
@keyframes cj3min {  
0%{ transform:scale(1);transform-origin:420px 620px; }
100%{transform:scale(0);transform-origin:420px 620px; }
}
@-webkit-keyframes cj3min {  
0%{ -webkit-transform:scale(1);-webkit-transform-origin:420px 620px; }
100%{-webkit-transform:scale(0);-webkit-transform-origin:420px 620px; }
}

.kafebj{animation:cj23bj 0.6s linear forwards;-webkit-animation:cj23bj 0.6s linear forwards;}

@keyframes cj23bj{
0%{  opacity:1;} 
100%{  opacity:0;}
}
@-webkit-keyframes cj23bj{
0%{  opacity:1;} 
100%{  opacity:0;}
}

/* 第二屏缩大*/
.pg3_max{animation:cj3max 0.7s linear forwards;-webkit-animation:cj3max 0.7s linear forwards;}
@keyframes cj3max {  
0%{  transform:scale(5);transform-origin:190px 620px; }
100%{transform:scale(1);transform-origin:190px 620px; }
}
@-webkit-keyframes cj3max {  
0%{  -webkit-transform:scale(5);-webkit-transform-origin:190px 620px; }
100%{-webkit-transform:scale(1);-webkit-transform-origin:190px 620px; }
}



/* 第三屏缩小*/
.min_cj4{animation:cj4min 0.7s linear forwards;-webkit-animation:cj4min 0.7s linear forwards;}
@keyframes cj4min {  
0%{  transform:scale(1);transform-origin:left center; }
100%{transform:scale(0);transform-origin:150px 410px; }
}
@-webkit-keyframes cj4min {  
0%{  -webkit-transform:scale(1);-webkit-transform-origin:left center; }
100%{-webkit-transform:scale(0);-webkit-transform-origin:150px 410px; }
}

/* 第四屏放大*/
.max_cj5{animation:cj5max 0.7s linear forwards;-webkit-animation:cj5max 0.7s linear forwards;}
@keyframes cj5max {  
0%{  transform:scale(5);transform-origin:150px 410px; }
100%{transform:scale(0);transform-origin:150px 410px; }
}

@-webkit-keyframes cj5max {  
0%{  -webkit-transform:scale(5);-webkit-transform-origin:150px 410px; }
100%{-webkit-transform:scale(0);-webkit-transform-origin:150px 410px; }
}


/* 第四屏缩小*/
.min_cj5{animation:cj5min 0.7s linear forwards;-webkit-animation:cj5min 0.7s linear forwards;}
@keyframes cj5min {  
0%{ transform:scale(1);transform-origin:center center; }
100%{transform:scale(0);transform-origin:center center; }
}
@-webkit-keyframes cj5min {  
0%{ -webkit-transform:scale(1);-webkit-transform-origin:center center; }
100%{-webkit-transform:scale(0);-webkit-transform-origin:center center; }
}


/* 第五屏放大*/
.pg5_max{animation:cj5max 0.7s linear forwards;-webkit-animation:cj5max 0.7s linear forwards;}
@keyframes cj5max {  
0%{  transform:scale(5);transform-origin:center center; }
100%{transform:scale(1);transform-origin:center center; }
}

@-webkit-keyframes cj5max {  
0%{  -webkit-transform:scale(5);-webkit-transform-origin:center center; }
100%{-webkit-transform:scale(1);-webkit-transform-origin:center center; }
}

/*显示*/

.csksyc{animation:yicanks 0.5s linear forwards;-webkit-animation:yicanks 0.5s linear forwards;}

@keyframes yicanks{
0%{  opacity:1;} 
100%{  opacity:0;}
}
@-webkit-keyframes yicanks{
0%{  opacity:1;} 
100%{  opacity:0;}
}

.divshow{animation:xiansi 0.5s linear forwards;-webkit-animation:xiansi 0.5s linear forwards;}

@keyframes xiansi{
0%{  opacity:0;} 
100%{  opacity:1;}
}
@-webkit-keyframes xiansi{
0%{  opacity:0;} 
100%{  opacity:1;}

}