@media only screen and (max-width: 1080px), only screen and (max-device-width:1080px) {
     html,body {
         font-size:168.75px;
     }
   }
     @media only screen and (max-width: 960px), only screen and (max-device-width:960px) {
     html,body {
         font-size:150px;
     }
   }
     @media only screen and (max-width: 800px), only screen and (max-device-width:800px) {
     html,body {
         font-size:125px;
     }
   }
     @media only screen and (max-width: 720px), only screen and (max-device-width:720px) {
     html,body {
         font-size:112.5px;
     }
   }
     @media only screen and (max-width: 640px), only screen and (max-device-width:640px) {
     html,body {
         font-size:100px;
     }
   }
     @media only screen and (max-width: 600px), only screen and (max-device-width:600px) {
     html,body {
         font-size:93.75px;
     }
   }
     @media only screen and (max-width: 540px), only screen and (max-device-width:540px) {
     html,body {
         font-size:84.375px;
     }
   }
     @media only screen and (max-width: 480px), only screen and (max-device-width:480px) {
     html,body {
         font-size:75px;
     }
   }
     @media only screen and (max-width: 414px), only screen and (max-device-width:414px) {
     html,body {
         font-size:64.6875px;
     }
   }
     @media only screen and (max-width: 400px), only screen and (max-device-width:400px) {
     html,body {
         font-size:62.5px;
     }
   }
     @media only screen and (max-width: 375px), only screen and (max-device-width:375px) {
     html,body {
         font-size:58.59375px;
     }
   }
     @media only screen and (max-width: 360px), only screen and (max-device-width:360px) {
     html,body {
         font-size:56.25px;
     }
   }
     @media only screen and (max-width: 320px), only screen and (max-device-width:320px) {
     html,body {
         font-size:50px;
     }
   }
     @media only screen and (max-width: 240px), only screen and (max-device-width:240px) {
     html,body {
         font-size:37.5px;
     }
   }
  @charset "utf-8";

/* 浏览器样式清除 reset */
body,form,div,span,ul,ol,li,p,pre,dl,dt,dd,h1,h2,h3,h4,h5,h6,em,a,fieldset,legend,address,label,textarea,select,input,figure,table,th,td,b,i{margin:0;padding:0;}
body, button, input, select, textarea{ font:12px/1.5 Tahoma,Arial,'宋体'; }
fieldset,img{border:0;}
ul,li{list-style:none;}
em,i{font-style:normal;}
table{border-collapse:separate;border-spacing:0;}
a{text-decoration:none;}
a:hover{ text-decoration:none;}
a:focus,input,button,select,textarea{outline:none; font-size:100%;}
h1,h2,h3,h4,h5,h6{ font-size:100%; font-variant: normal;}
input,select,img{ vertical-align:middle;}
legend{ display:none;}
textarea{resize:none;}
button {cursor:pointer;}

html,body{ height:100%; width:100%; position: relative; overflow:hidden;}
.wrap{ display: block; height:100%; width:100%; position:absolute; left:0px; top:0px; z-index:2;  -webkit-transform:scale(0.09); opacity:0;}
body{ background:url(../images/bg.jpg) repeat 0 0;  background-size:1rem 1rem;}

.loading_wrap{-webkit-transition:opacity 0.2s linear;}
.loading_hide{opacity:0;}
.loading_wrap{position:fixed;z-index:100;top:0;left:0;width:100%;height:100%;background:rgba(77,83,97,.7);}
.loading_wrap .loading{display:block;width:3rem;height:1rem;line-height:1rem;position:absolute;left:50%;margin-left:-1.5rem;top:50%;margin-top:-0.3rem;color:#f6f2ed;font-family:"Arial","microsoft yahei";font-size:0.16rem;text-align:center}
.loading_area{display:block;height:0.82rem;width:0.82rem;background:url(../images/loading_bg.png) no-repeat 0 0;background-size:contain;position:absolute;left:50%;margin-left:-0.41rem;top:50%;margin-top:-0.8rem;border-radius:82px;box-shadow:0 0 0.06rem rgba(0,0,0,.1),0px 0 0.01rem rgba(0,0,0,0.3);}
.loading_area .bar{display:block;height:0.82rem;width:0.82rem;background:url(../images/loading_bg_2.png) no-repeat 0 0;background-size:contain;position:absolute;left:0;top:0;-webkit-animation:a_loading 3s linear infinite;}
@-webkit-keyframes a_loading{
	0%{-webkit-transform:rotate(0deg)}
	100%{-webkit-transform:rotate(360deg)}
}

.con_wrap{ display: block; height:100%; width:100%; position:absolute; left:0px; top:0px; z-index:1; display:none;}

@-webkit-keyframes a_page_arrow{
	0%{ -webkit-transform: translate(0,0px);}
	50%{ -webkit-transform: translate(0,-0.04rem);}
	100%{ -webkit-transform: translate(0,0px);}
}

.music_ctrl{ display:block; height:0.33rem; width:0.33rem; position:absolute; right:0.09rem; top:0.09rem; z-index:99;}
.music_ctrl .music_stop{ display:block; height:0.33rem; width:0.33rem; position:absolute; right:0px; top:0px; -webkit-tap-highlight-color:rgba(0,0,0,0);}
.music_ctrl .music_play{ display:none; height:0.33rem; width:0.33rem; position:absolute; right:0px; top:0px; -webkit-tap-highlight-color:rgba(0,0,0,0);}
.music_ctrl .music_stop i{display:block;height:22px;width:22px;background:url(../images/desktop_bg.png) no-repeat -62px -50px;background-size:177px 96px;position:absolute;left:5px;top:5px}
.music_ctrl .music_play i{display:block;height:22px;width:22px;background:url(../images/desktop_bg.png) no-repeat -86px -50px;background-size:177px 96px;position:absolute;left:5px;top:5px}
.music_ctrl .music_stop i{ -webkit-animation:a_music 2s linear infinite;}

@-webkit-keyframes a_music{
	0%{ -webkit-transform: rotate(0deg);}
	100%{ -webkit-transform: rotate(360deg);}
}


.con_wrap .bg{ display:block; height:100%; width:100%; z-index:1; background:url(../images/bg.jpg) repeat 0 0;  background-size:1rem 1rem; position:absolute; left:0px; top:0px;}

/*1*/
.con_wrap_1 .title_wrap .question_1{ display:block; height:0.73rem; width:2.7rem; background:url(../images/page_1_bg.png) no-repeat 0 0; background-size:2.7rem 2.9rem; position:absolute; left:0.33rem; top:0.45rem; z-index:2; line-height:9999.99rem; overflow:hidden;}
.con_wrap_1 .title_wrap .title{ display:block; height:0.53rem; width:2.7rem; background:url(../images/page_1_bg.png) no-repeat 0 -0.75rem; background-size:2.7rem 2.9rem; position:absolute; left:0.33rem; top:1.5rem; z-index:2; line-height:9999.99rem; overflow:hidden;}
.con_wrap_1 .logo_area{ display:block; height:2rem; width:2rem; position:absolute; left:50%; margin-left:-1rem; top:2.47rem; z-index:2; }
.con_wrap_1 .webank_penguin{ display:block; height:0.90rem; width:0.74rem; background:url(../images/page_1_bg.png) no-repeat -1.49rem -1.29rem; background-size:2.7rem 2.9rem; position:absolute; left:50%; margin-left:-0.36rem; bottom:0.17rem; z-index:2; }
.con_wrap_1 .webank_penguin .eye{ display:block; height:0.12rem; width:0.11rem; background:url(../images/page_1_bg.png) no-repeat -2.25rem -1.3rem; background-size:2.7rem 2.9rem; position:absolute; top:0.17rem; left:0.26rem; z-index:2; opacity:0; }
.con_wrap_1 .penguin_shadow{ display:block; height:1.59rem; width:1.47rem; background:url(../images/page_1_bg.png) no-repeat 0 -1.3rem; background-size:2.7rem 2.9rem; position:absolute; left:50%; margin-left:-0.74rem; bottom:0.17rem; -webkit-transform-origin:50% 100%;}

.webank_logo{ display:block; height:0.25rem; width:2rem; background:url(../images/webank_logo.png) no-repeat 0 0; background-size:contain; position:absolute; left:50%; margin-left:-1rem; bottom:0.35rem; z-index:2; }

.wrap_show.con_wrap_1 .title_wrap .question_1{ -webkit-animation:a_translate 0.3s 0.3s linear both;}
.wrap_show.con_wrap_1 .title_wrap .title{ -webkit-animation:a_translate 0.3s 0.6s linear both;}

.wrap_show.con_wrap_1 .webank_penguin{ -webkit-animation:a_page_1_webank_penguin 0.3s 0.9s linear both;}
.wrap_show.con_wrap_1 .webank_penguin .eye{ -webkit-animation:a_page_1_penguin_eye 1.6s 1.2s step-start infinite;}
.wrap_show.con_wrap_1 .penguin_shadow{ -webkit-animation:a_page_1_penguin_shadow 0.5s 1.2s linear both;}
.wrap_show.con_wrap_1 .webank_logo{ -webkit-animation:a_opacity 0.3s 2.0s linear both;}

.pager_wrap{ -webkit-transition:opacity 0.3s linear;}
.pager_wrap_loaded{ -webkit-animation:a_opacity 0.3s 1.7s linear both;}
.pager_wrap_show{ -webkit-animation:a_opacity 0.3s 1.2s linear both;}
.pager_wrap_hide{ -webkit-animation:a_opacity_hide 0.2s linear both;}


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

@-webkit-keyframes a_translate{
	0%{ -webkit-transform:translate(0.15rem,0); opacity:0;}
	100%{ -webkit-transform:translate(0,0px); opacity:1;}
}

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

@-webkit-keyframes a_page_1_penguin_shadow{
	0%{ opacity:0; -webkit-transform:scale(0.5,0.5);}
	50%{ opacity:1; -webkit-transform:scale(1.05,0.95);}
	60%{ opacity:1; -webkit-transform:scale(0.96,1.04);}
	70%{ opacity:1; -webkit-transform:scale(1.02,0.98);}
	80%{ opacity:1; -webkit-transform:scale(0.99,1.01);}
	90%{ opacity:1; -webkit-transform:scale(1.01,0.99);}
	100%{ opacity:1; -webkit-transform:scale(1,1);}
}

@-webkit-keyframes a_page_1_penguin_eye{
	0%{ opacity:0;}
	15%{ opacity:1;}
	30%{ opacity:0;}
	45%{ opacity:1;}
	60%{ opacity:0;}
	100%{ opacity:0;}
}

.wrap_hide_show.con_wrap_1 .title_wrap .question_1{-webkit-animation:a_translate_hide_show 0.3s linear both;}
.wrap_hide_show.con_wrap_1 .title_wrap .title{-webkit-animation:a_translate_hide_show 0.3s 0.3s linear both;}
.wrap_hide_show.con_wrap_1 .webank_penguin{ -webkit-animation:none;}
.wrap_hide_show.con_wrap_1 .webank_penguin .eye{ -webkit-animation:a_page_1_penguin_eye 1.3s step-start infinite;}
.wrap_hide_show.con_wrap_1 .penguin_shadow{ -webkit-animation:a_page_1_penguin_shadow 0.5s 0.6s linear both;}
.wrap_hide_show.con_wrap_1 .webank_logo{ -webkit-animation:none;}

@-webkit-keyframes a_translate_hide_show{
	0%{ -webkit-transform:translate(-0.15rem,0px); opacity:0;}
	100%{ -webkit-transform:translate(0,0); opacity:1;}
}

.wrap_hide.con_wrap_1 .title_wrap .question_1{-webkit-animation:a_translate_hide 0.2s linear both;}
.wrap_hide.con_wrap_1 .title_wrap .title{-webkit-animation:a_translate_hide 0.2s 0.2s linear both;}
.wrap_hide.con_wrap_1 .logo_area{-webkit-animation:a_opacity_hide 0.2s 0.4s linear both;}

@-webkit-keyframes a_page_1_penguin_shadow_hide{
	0%{ opacity:1; -webkit-transform:scale(1);}
	25%{ opacity:1; -webkit-transform:scale(1.02);}
	100%{ opacity:0; -webkit-transform:scale(0.1);}
}

@-webkit-keyframes a_translate_hide{
	0%{ -webkit-transform:translate(0,0); opacity:1;}
	100%{ -webkit-transform:translate(-0.15rem,0px); opacity:0;}
}

.wrap_show{ display:block; opacity:1; z-index:10;}
.wrap_prepare{ display:block; opacity:0; z-index:1;}

/*2*/
.title_wrap .question_2{ display:block; height:0.73rem; width:2.38rem; position:absolute; left:0.33rem; top:0.45rem; z-index:2; line-height:9999.99rem; overflow:hidden;}
.title_wrap .title{ display:block; height:0.52rem; width:2.39rem; position:absolute; left:0.33rem; top:1.5rem; z-index:2; line-height:9999.99rem; overflow:hidden;}
.title_wrap .txt{ display:block; height:0.23rem; width:0.46rem; background:url(../images/page_3_bg.png) no-repeat 0 -1.3rem; background-size:2.35rem 1.53rem; position:absolute; left:2.25rem; top:1.8rem; z-index:2; line-height:9999.99rem; overflow:hidden;}
.title_wrap .txt_2{ background-position:-0.48rem -1.3rem;}
.title_wrap .txt_3{ background-position:-0.96rem -1.3rem;}

.con_wrap_2 .logo_area{ display:block; height:2rem; width:2rem; position:absolute; left:50%; margin-left:-1rem;/* top:50%; margin-top:-1rem;*/ top:2.47rem; z-index:2; }
.con_wrap_2 .webank_penguin{ display:block; height:0.88rem; width:0.74rem; background:url(../images/page_1_bg.png) no-repeat -1.49rem -1.3rem; background-size:2.7rem 2.9rem; position:absolute; left:50%; margin-left:-0.36rem; bottom:0.17rem; z-index:2; }
.con_wrap_2 .webank_penguin .eye{ display:block; height:0.11rem; width:0.11rem; background:url(../images/page_1_bg.png) no-repeat -2.25rem -1.3rem; background-size:2.7rem 2.9rem; position:absolute; top:0.17rem; left:0.26rem; z-index:2; opacity:0; }

.wrap_show .title_wrap .question_2{ -webkit-animation:a_translate 0.3s linear both;}
.wrap_show .title_wrap .title{ -webkit-animation:a_translate 0.3s 0.3s linear both;}

.wrap_show.con_wrap_2 .webank_penguin .eye{ -webkit-animation:a_page_1_penguin_eye 1.6s step-start infinite;}

.wrap_hide_show.con_wrap_2 .title_wrap .question_2{ -webkit-animation:a_translate_hide_show 0.3s linear both;}
.wrap_hide_show.con_wrap_2 .title_wrap .title{ -webkit-animation:a_translate_hide_show 0.3s 0.3s linear both;}
.wrap_hide_show.con_wrap_2 .logo_area{ -webkit-animation:a_opacity 0.3s 0.6s linear both;}
.wrap_hide_show.con_wrap_2 .webank_logo{ -webkit-animation:none;}

.wrap_hide.con_wrap_2 .title_wrap .question_2{ -webkit-animation: a_translate_hide 0.2s linear both;}
.wrap_hide.con_wrap_2 .title_wrap .title{ -webkit-animation: a_translate_hide 0.2s 0.2s linear both;}
.wrap_hide.con_wrap_2 .logo_area{ -webkit-animation: a_opacity_hide 0.2s 0.4s linear both;}

.wrap_show_prepare.con_wrap_2 .title_wrap .question_2{ -webkit-animation:a_translate_show_prepare 0.2s linear both;}
.wrap_show_prepare.con_wrap_2 .title_wrap .title{ -webkit-animation:a_translate_show_prepare 0.2s 0.2s linear both;}

@-webkit-keyframes a_translate_show_prepare{
	0%{ -webkit-transform:translate(0,0); opacity:1;}
	100%{ -webkit-transform:translate(0.15rem,0px); opacity:0;}
}

/*2*/
.con_wrap_2 .title_wrap .title{height:0.54rem; width:1.67rem; background:url(../images/page_3_bg.png) no-repeat 0 -0.75rem; background-size:2.35rem 1.53rem;}
.con_wrap_2 .scarf_area{ display:block; height:1.61rem; width:1.5rem; position:absolute; left:50%; margin-left:-0.75rem; bottom:1.97rem; z-index:2;}
.con_wrap_2 .title_wrap .question_2{ background:url(../images/page_3_bg.png) no-repeat 0 0; background-size:2.35rem 1.53rem;}

.con_wrap_2 .scarf_area .scarf_box{ display:block; height:0.81rem; width:1.47rem; position:absolute; left:50%; margin-left:-0.74rem; bottom:0px; z-index:2; overflow:hidden;}
.con_wrap_2 .scarf_area .scarf{ display:block; height:0.81rem; width:1.47rem; background:url(../images/page_3_1_pic_1.png) no-repeat 0 0; background-size:contain; position:absolute; left:0; bottom:0; z-index:2; -webkit-transform:rotate(-179deg); -webkit-transform-origin:0.74rem 0.74rem;}
.con_wrap_2 .scarf_area .scarf_hook{ display:block; height:0.07rem; width:0.17rem; background:url(../images/page_3_1_pic_1_hook.png) no-repeat 0 0; background-size:contain; position:absolute; left:0px; bottom:-0.01rem; z-index:2;}
.con_wrap_2 .scarf_area .scarf_hook_2{ display:block; height:0.2rem; width:0.2rem; background:url(../images/bg.jpg) repeat 0 0;   background-size:1rem 1rem; position:absolute; right:-0.02rem; bottom:-0.02rem; z-index:2;}

.con_wrap_2 .scarf_area .rain_area{ display:block; height:1.61rem; width:1.5rem; position:absolute; left:0; top:0; z-index:3;}
.con_wrap_2 .scarf_area .rain_area .drop{ display:block; height:0.04rem; width:0.04rem; border-radius:4px; background:#3a4965; position:absolute; left:50%; margin-left:-0.02rem; top:-0.02rem;}
.con_wrap_2 .scarf_area .rain_area .drop_2{ margin-left:-0.2rem; top:0px;}
.con_wrap_2 .scarf_area .rain_area .drop_3{ margin-left:-0.3rem; top:0.01rem;}
.con_wrap_2 .scarf_area .rain_area .drop_4{ margin-left:-0.5rem; top:0.15rem;}
.con_wrap_2 .scarf_area .rain_area .drop_5{ margin-left:0.2rem; top:0.01rem;}
.con_wrap_2 .scarf_area .rain_area .drop_6{ margin-left:0.3rem; top:0.05rem;}
.con_wrap_2 .scarf_area .rain_area .drop_7{ margin-left:0.5rem; top:0.18rem;}
.con_wrap_2 .scarf_area .rain_area .drop_8{ margin-left:0.1rem; top:-0.02rem;}


.wrap_show.con_wrap_2 .title_wrap .question_2{ -webkit-animation:a_translate 0.3s linear both;}
.wrap_show.con_wrap_2  .title_wrap .title{ -webkit-animation:a_translate 0.3s 0.3s linear both;}
.wrap_show.con_wrap_2 .scarf_area{ -webkit-animation:a_opacity 0.3s 0.6s linear both;}
.wrap_show .title_wrap .txt{ -webkit-animation:a_opacity 0.3s 0.6s linear both;}
.wrap_show.con_wrap_2 .scarf_area .scarf_box{ -webkit-animation:a_page_3_scarf_box 1s 1.0s linear infinite; -webkit-transform-origin:50% 100%;}
.wrap_show.con_wrap_2 .scarf_area .scarf{ -webkit-animation:a_page_3_scarf 0.3s 0.7s ease both;}
.wrap_show.con_wrap_2 .scarf_area .scarf_hook_2{ -webkit-animation:a_page_3_scarf_hook_2 0.2s 0.7s linear both;}

.wrap_show .scarf_area .rain_area .drop_1{ -webkit-animation:a_drop_1 1s 0.6s linear both infinite; }
.wrap_show .scarf_area .rain_area .drop_2{ -webkit-animation:a_drop_1 0.8s 0.9s linear both infinite; }
.wrap_show .scarf_area .rain_area .drop_3{ -webkit-animation:a_drop_1 1.1s 1.0s linear both infinite; }

.wrap_show .scarf_area .rain_area .drop_4{ -webkit-animation:a_drop_1 1.1s 0.9s linear both infinite; }
.wrap_show .scarf_area .rain_area .drop_5{ -webkit-animation:a_drop_2 0.8s 0.8s linear both infinite; }
.wrap_show .scarf_area .rain_area .drop_6{ -webkit-animation:a_drop_2 1.3s 1.1s linear both infinite; }
.wrap_show .scarf_area .rain_area .drop_7{ -webkit-animation:a_drop_2 1.2s 0.7s linear both infinite; }
.wrap_show .scarf_area .rain_area .drop_8{ -webkit-animation:a_drop_2 0.9s 0.95s linear both infinite; }

@-webkit-keyframes a_drop_1{
	0%{ opacity:0; -webkit-transform:translate(0,0) scale(1,1);}
	20%{ opacity:1; -webkit-transform:translate(0,0.3rem) scale(1,2);}
	45%{ opacity:1; -webkit-transform:translate(0,0.79rem) scale(1,2);}
	50%{ opacity:1; -webkit-transform:translate(0,0.81rem) scale(1,1);}
	53%{ opacity:1; -webkit-transform:translate(0,0.81rem) scale(1,1);}
	60%{ opacity:1; -webkit-transform:translate(-0.04rem,0.7rem) scale(1,1);}
	65%{ opacity:1; -webkit-transform:translate(-0.08rem,0.65rem) scale(1,1);}
	70%{ opacity:1; -webkit-transform:translate(-0.12rem,0.62rem) scale(1,1);}
	75%{ opacity:1; -webkit-transform:translate(-0.16rem,0.65rem) scale(1,1);}
	80%{ opacity:1; -webkit-transform:translate(-0.2rem,0.7rem) scale(1,1);}
	85%{ opacity:1; -webkit-transform:translate(-0.24rem,0.81rem) scale(1,1);}
	90%{ opacity:0.8; -webkit-transform:translate(-0.28rem,0.96rem) scale(1,1);}
	95%{ opacity:0.6; -webkit-transform:translate(-0.32rem,1.16rem) scale(1,1);}
	100%{ opacity:0; -webkit-transform:translate(-0.36rem,1.46rem) scale(1,1);}
}

@-webkit-keyframes a_drop_2{
	0%{ opacity:0; -webkit-transform:translate(0,0) scale(1,1);}
	20%{ opacity:1; -webkit-transform:translate(0,0.3rem) scale(1,2);}
	45%{ opacity:1; -webkit-transform:translate(0,0.79rem) scale(1,2);}
	50%{ opacity:1; -webkit-transform:translate(0,0.81rem) scale(1,1);}
	53%{ opacity:1; -webkit-transform:translate(0,0.81rem) scale(1,1);}
	60%{ opacity:1; -webkit-transform:translate(0.04rem,0.7rem) scale(1,1);}
	65%{ opacity:1; -webkit-transform:translate(0.08rem,0.65rem) scale(1,1);}
	70%{ opacity:1; -webkit-transform:translate(0.12rem,0.62rem) scale(1,1);}
	75%{ opacity:1; -webkit-transform:translate(0.16rem,0.65rem) scale(1,1);}
	80%{ opacity:1; -webkit-transform:translate(0.2rem,0.7rem) scale(1,1);}
	85%{ opacity:1; -webkit-transform:translate(0.24rem,0.81rem) scale(1,1);}
	90%{ opacity:0.8; -webkit-transform:translate(0.28rem,0.96rem) scale(1,1);}
	95%{ opacity:0.6; -webkit-transform:translate(0.32rem,1.16rem) scale(1,1);}
	100%{ opacity:0; -webkit-transform:translate(0.36rem,1.46rem) scale(1,1);}
}

@-webkit-keyframes a_page_3_scarf_box{
	0%{ -webkit-transform:scale(1,1);}
	25%{ -webkit-transform:scale(1.02,0.98);}
	50%{ -webkit-transform:scale(0.99,1.01);}
	75%{ -webkit-transform:scale(1.01,0.99);}
	100%{ -webkit-transform:scale(1,1);}
}

@-webkit-keyframes a_page_3_scarf{
	0%{ -webkit-transform:rotate(-179deg); }
	100%{ -webkit-transform:rotate(0deg); }
}

@-webkit-keyframes a_page_3_scarf_hook_2{
	0%{ opacity:1; }
	50%{ opacity:1; }
	50.1%{ opacity:0; }
	100%{ opacity:0; }
}

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


.wrap_hide_show.con_wrap_2 .title_wrap .question_2{ -webkit-animation:none;}
.wrap_hide_show.con_wrap_2 .title_wrap .title{ -webkit-animation:none;}
.wrap_hide_show.con_wrap_2 .webank_logo{ -webkit-animation:none;}

.wrap_hide_show.con_wrap_2 .scarf_area{ -webkit-animation:none;}
.wrap_hide_show .title_wrap .txt{ -webkit-animation:a_opacity 0.3s linear both;}
.wrap_hide_show.con_wrap_2 .scarf_area .scarf_box{ -webkit-animation:a_page_3_scarf_box 1s 0.3s linear infinite; -webkit-transform-origin:50% 100%;}
.wrap_hide_show.con_wrap_2 .scarf_area .scarf{ -webkit-animation:a_page_3_scarf 0.3s ease both;}
.wrap_hide_show.con_wrap_2 .scarf_area .scarf_hook_2{ -webkit-animation:a_page_3_scarf_hook_2 0.2s 0.1s linear both;}



.wrap_hide.con_wrap_2 .scarf_area .scarf{ -webkit-animation:a_page_3_scarf_hide 0.3s 0.2s ease both;}
.wrap_hide.con_wrap_2 .scarf_area .scarf_hook_2{ -webkit-animation:a_page_3_scarf_hook_2_hide 0.2s 0.2s linear both;}
.wrap_hide.con_wrap_2 .scarf_area .rain_area{ -webkit-animation:a_page_3_rain_area_hide 0.2s 0.2s linear both;}
.wrap_hide.con_wrap_2 .scarf_area .scarf_box{ -webkit-animation:none;}
.wrap_hide.con_wrap_2 .title_wrap .txt{ -webkit-animation: a_opacity_hide 0.2s linear both;}

@-webkit-keyframes a_page_3_scarf_hide{
	0%{ -webkit-transform:rotate(0deg); }
	100%{ -webkit-transform:rotate(-177.5deg); }
}


@-webkit-keyframes a_page_3_scarf_hook_2_hide{
	0%{ opacity:0; }
	50%{ opacity:0; }
	50.1%{ opacity:1; }
	100%{ opacity:1; }
}

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


.wrap_show_prepare.con_wrap_2 .title_wrap .question_2{ -webkit-animation:a_translate_show_prepare 0.2s linear both;}
.wrap_show_prepare.con_wrap_2 .title_wrap .title{ -webkit-animation:a_translate_show_prepare 0.2s 0.2s linear both;}
.wrap_show_prepare.con_wrap_2 .title_wrap .txt{ -webkit-animation:a_translate_show_prepare 0.2s 0.2s linear both;}
.wrap_show_prepare.con_wrap_2 .scarf_area{ -webkit-animation:a_opacity_hide 0.2s 0.4s linear both;}



/*4*/
.con_wrap_3 .title_wrap .title{height:0.54rem; width:1.67rem; background:url(../images/page_3_bg.png) no-repeat 0 -0.75rem; background-size:2.35rem 1.53rem;}
.con_wrap_3 .title_wrap .question_2{ background:url(../images/page_3_bg.png) no-repeat 0 0; background-size:2.35rem 1.53rem;}

.con_wrap_3 .scarf_area{ display:block; height:1.07rem; width:1.38rem;/* background:url(../images/page_3_2_pic_1.png) no-repeat 0 0; background-size:contain;*/ position:absolute; left:50%; margin-left:-0.74rem; bottom:1.96rem; z-index:2;}
.con_wrap_3 .scarf_1{ display:block; height:0.15rem; width:0.8rem; position:absolute; left:0px; bottom:0px; -webkit-transform:rotate(-45deg); -webkit-transform-origin:0.07rem 0.07rem;}
.con_wrap_3 .scarf_2{ display:block; height:0.15rem; width:0.6rem; position:absolute; left:0px; bottom:0px; -webkit-transform:rotate(35deg) translate(0.12rem,-0.65rem); -webkit-transform-origin:0.07rem 0.07rem;}
.con_wrap_3 .scarf_3{ display:block; height:0.15rem; width:0.8rem; position:absolute; left:0px; bottom:0px; -webkit-transform:rotate(-49deg) translate(0.7rem,0.5rem); -webkit-transform-origin:0.07rem 0.07rem;}

.con_wrap_3 .scarf_1 .hook{ display:block; height:0.15rem; width:0.8rem; background:#ca2516; border-radius:15px; position:absolute; left:0px; bottom:0px;}
.con_wrap_3 .scarf_2 .hook{ display:block; height:0.15rem; width:0.6rem; background:#ca2516; border-radius:15px; position:absolute; left:0px; bottom:0px;}
.con_wrap_3 .scarf_3 .hook{ display:block; height:0.15rem; width:0.8rem; background:#ca2516; border-radius:15px; position:absolute; left:0px; bottom:0px;}

.wrap_show.con_wrap_3 .title_wrap .question_2{-webkit-animation: none;}
.wrap_show.con_wrap_3 .title_wrap .title{-webkit-animation: none;}
.wrap_show.con_wrap_3 .scarf_area{ -webkit-animation: a_page_4_scarf_area 1s 0.9s linear infinite; -webkit-transform-origin:0% 100%;}
.wrap_show.con_wrap_3 .scarf_area .scarf_1 .hook{ -webkit-animation: a_page_4_scarf_1 0.3s linear both;}
.wrap_show.con_wrap_3 .scarf_area .scarf_2 .hook{ -webkit-animation: a_page_4_scarf_2 0.3s 0.3s linear both;}
.wrap_show.con_wrap_3 .scarf_area .scarf_3 .hook{ -webkit-animation: a_page_4_scarf_3 0.3s 0.6s linear both;}
.wrap_show.con_wrap_3 .webank_logo{ -webkit-animation:none;}

@-webkit-keyframes a_page_4_scarf_1{
	0%{ width:0.15rem; opacity:1; }
	100%{ width:0.8rem; opacity:1; }
}

@-webkit-keyframes a_page_4_scarf_2{
	0%{ width:0.15rem; opacity:0; }
	1%{ width:0.15rem; opacity:1; }
	100%{ width:0.6rem; opacity:1; }
}

@-webkit-keyframes a_page_4_scarf_3{
	0%{ width:0.15rem; opacity:0; }
	1%{ width:0.15rem; opacity:1; }
	100%{ width:0.8rem; opacity:1; }
}

@-webkit-keyframes a_page_4_scarf_area{
	0%{ -webkit-transform: skew(0deg,0deg);}
	25%{ -webkit-transform: skew(2deg,0deg);}
	50%{ -webkit-transform: skew(-1deg,0deg);}
	75%{ -webkit-transform: skew(1deg,0deg);}
	100%{ -webkit-transform: skew(0deg,0deg);}
}


.wrap_hide.con_wrap_3 .scarf_area .scarf_1 .hook{ left:auto; bottom:auto; right:0px; top:0px; -webkit-animation: a_page_4_scarf_1_hide 0.2s 0.2s linear both;}
.wrap_hide.con_wrap_3 .scarf_area .scarf_2 .hook{ left:auto; bottom:auto; right:0px; top:0px; -webkit-animation: a_page_4_scarf_2_hide 0.2s 0.4s linear both;}
.wrap_hide.con_wrap_3 .scarf_area .scarf_3 .hook{ left:auto; bottom:auto; right:0px; top:0px; -webkit-animation: a_page_4_scarf_3_hide 0.2s 0.6s linear both;}
.wrap_hide.con_wrap_3 .title_wrap .txt{ -webkit-animation: a_opacity_hide 0.2s linear both;}
.wrap_hide.con_wrap_3 .scarf_area{ -webkit-animation: a_page_4_scarf_area_hide 0.2s 0.8s ease both;}

@-webkit-keyframes a_page_4_scarf_1_hide{
	0%{ width:0.8rem; opacity:1; }
	99%{ width:0.15rem; opacity:1; }
	100%{ width:0.15rem; opacity:0; }
}

@-webkit-keyframes a_page_4_scarf_2_hide{
	0%{ width:0.6rem; opacity:1; }
	99%{ width:0.15rem; opacity:1; }
	100%{ width:0.15rem; opacity:0; }
}

@-webkit-keyframes a_page_4_scarf_3_hide{
	0%{ width:0.8rem; opacity:1; }
	100%{ width:0.15rem; opacity:1; }
}

@-webkit-keyframes a_page_4_scarf_area_hide{
	0%{ -webkit-transform:translate(0,0);}
	100%{ -webkit-transform:translate(-1.23rem,-0.23rem); }
}

.wrap_show_prepare.con_wrap_3 .scarf_area .scarf_1 .hook{ left:auto; bottom:auto; right:0px; top:0px; -webkit-animation: a_page_4_scarf_1_hide 0.2s 0.2s linear both;}
.wrap_show_prepare.con_wrap_3 .scarf_area .scarf_2 .hook{ left:auto; bottom:auto; right:0px; top:0px; -webkit-animation: a_page_4_scarf_2_hide 0.2s 0.4s linear both;}
.wrap_show_prepare.con_wrap_3 .scarf_area .scarf_3 .hook{ left:auto; bottom:auto; right:0px; top:0px; -webkit-animation: a_page_4_scarf_3_hide 0.2s 0.6s linear both;}
.wrap_show_prepare.con_wrap_3 .title_wrap .txt{ -webkit-animation: a_opacity_hide 0.2s linear both;}
.wrap_show_prepare.con_wrap_3 .scarf_area{ -webkit-animation: a_page_4_scarf_area_show_hide 0.2s 0.8s ease both;}

@-webkit-keyframes a_page_4_scarf_area_show_hide{
	0%{ -webkit-transform:translate(0,0);}
	100%{ -webkit-transform:translate(-1.26rem,0.72rem); }
}

/*5*/
.con_wrap_4 .title_wrap .title{height:0.54rem; width:1.68rem; background:url(../images/page_3_bg.png) no-repeat 0 -0.75rem; background-size:2.35rem 1.53rem;}
.con_wrap_4 .title_wrap .question_2{ background:url(../images/page_3_bg.png) no-repeat 0 0; background-size:2.35rem 1.53rem;}

.con_wrap_4 .scarf_area{ display:block; height:0.81rem; width:1.47rem; position:absolute; left:50%; margin-left:-0.69rem; bottom:2.23rem; z-index:2; }


.con_wrap_4 .scarf_area .scarf_box{ display:block; height:0.81rem; width:1.47rem; position:absolute; left:50%; margin-left:-0.74rem; bottom:0px; z-index:2; overflow:hidden;}
.con_wrap_4 .scarf_area .scarf{ display:block; height:0.81rem; width:1.47rem; background:url(../images/page_3_3_pic_1.png) no-repeat 0 0; background-size:contain; position:absolute; left:0; bottom:0; z-index:2; -webkit-transform:rotate(179deg); -webkit-transform-origin:0.74rem 0.07rem;}
.con_wrap_4 .scarf_area .scarf_hook{ display:block; height:0.07rem; width:0.17rem; background:url(../images/page_3_3_pic_1_hook.png) no-repeat 0 0; background-size:contain; position:absolute; left:0px; top:0px; z-index:2;}
.con_wrap_4 .scarf_area .scarf_hook_2{ display:block; height:0.2rem; width:0.2rem; background:url(../images/bg.jpg) repeat 0 0;   background-size:1rem 1rem; position:absolute; right:-0.02rem; top:-0.02rem; z-index:2;}

.wrap_show.con_wrap_4 .title_wrap .question_2{-webkit-animation: none;}
.wrap_show.con_wrap_4 .title_wrap .title{-webkit-animation: none;}
.wrap_show.con_wrap_4 .scarf_area{ -webkit-animation:none;}
.wrap_show.con_wrap_4 .webank_logo{ -webkit-animation:none;}
.wrap_show.con_wrap_4 .scarf_area .scarf_box{ -webkit-animation:a_page_3_scarf_box 1s 0.3s linear infinite; -webkit-transform-origin:50% 0%;}
.wrap_show.con_wrap_4 .scarf_area .scarf{ -webkit-animation:a_page_5_scarf 0.3s ease both;}
.wrap_show.con_wrap_4 .scarf_area .scarf_hook_2{ -webkit-animation:a_page_3_scarf_hook_2 0.2s linear both;}
.wrap_show.con_wrap_4 .title_wrap .txt{ -webkit-animation:a_opacity 0.3s 0.3s ease both;}

.wrap_show_prepare.con_wrap_4 .scarf_area .scarf{ -webkit-animation:a_page_5_scarf_hide 0.3s 0.2s ease both;}
.wrap_show_prepare.con_wrap_4 .scarf_area .scarf_hook_2{ -webkit-animation:a_page_3_scarf_hook_2_hide 0.2s 0.2s linear both;}
.wrap_show_prepare.con_wrap_4 .scarf_area{ -webkit-animation:a_page_5_scarf_area_hide 0.2s 0.5s linear both;}
.wrap_show_prepare.con_wrap_4 .scarf_area .scarf_box{ -webkit-animation:none;}
.wrap_show_prepare.con_wrap_4 .title_wrap .txt{ -webkit-animation: a_opacity_hide 0.2s linear both;}

@-webkit-keyframes a_page_5_scarf_area_hide{
	0%{ -webkit-transform:translate(0px,0px);}
	100%{ -webkit-transform:translate(-0.06rem,0.93rem); }
}

@-webkit-keyframes a_page_5_scarf{
	0%{ -webkit-transform:rotate(179deg); }
	100%{ -webkit-transform:rotate(0deg); }
}

@-webkit-keyframes a_page_5_scarf_hide{
	0%{ -webkit-transform:rotate(0deg); }
	100%{ -webkit-transform:rotate(179deg); }
}

.wrap_hide_show.con_wrap_4 .title_wrap .question_2{ -webkit-animation:a_translate_hide_show 0.3s linear both;}
.wrap_hide_show.con_wrap_4 .title_wrap .title{ -webkit-animation:a_translate_hide_show 0.3s 0.3s linear both;}
.wrap_hide_show.con_wrap_4 .title_wrap .txt{ -webkit-animation:a_translate_hide_show 0.3s 0.3s linear both;}
.wrap_hide_show.con_wrap_4 .scarf_area{-webkit-animation:a_opacity 0.3s 0.6s linear both;}
.wrap_hide_show.con_wrap_4 .scarf_area .scarf_box{ -webkit-animation:a_page_3_scarf_box 1s 0.6s linear infinite; -webkit-transform-origin:50% 0%;}
.wrap_hide_show.con_wrap_4 .scarf_area .scarf{ -webkit-animation:a_page_5_scarf 0.3s 0.6s ease both;}
.wrap_hide_show.con_wrap_4 .scarf_area .scarf_hook_2{ -webkit-animation:a_page_3_scarf_hook_2 0.2s 0.6s linear both;}
.wrap_hide_show.con_wrap_4 .webank_logo{ -webkit-animation:a_translate_hide_show 0.3s 1.2s linear both;}


.wrap_hide.con_wrap_4 .title_wrap .question_2{ -webkit-animation:a_translate_hide 0.2s linear both;}
.wrap_hide.con_wrap_4 .title_wrap .title{ -webkit-animation:a_translate_hide 0.2s 0.2s linear both;}
.wrap_hide.con_wrap_4 .title_wrap .txt{ -webkit-animation:a_translate_hide 0.2s 0.2s linear both;}
.wrap_hide.con_wrap_4 .scarf_area{-webkit-animation:a_opacity_hide 0.2s 0.4s linear both;}
.wrap_hide.con_wrap_4 .webank_logo{ -webkit-animation:a_translate_hide 0.2s 0.6s linear both;}


/*6*/
.con_wrap_5 .logo_area .slogan{ display:block; height:0.28rem; width:2.55rem; background:url(../images/page_4_bg.png) no-repeat 0 0; background-size:2.55rem 2.4rem; position:absolute; left:50%; margin-left:-1.28rem; top:50%; margin-top:-2.4rem; z-index:2; line-height:99.99rem; overflow:hidden;}
.con_wrap_5 .logo_area .slogan_2{ display:block; height:0.25rem; width:2.53rem; background:url(../images/page_4_bg.png) no-repeat 0 -0.3rem; background-size:2.55rem 2.4rem; position:absolute; left:50%; margin-left:-1.27rem; top:50%; margin-top:-2rem; z-index:2; line-height:99.99rem; overflow:hidden;}
.con_wrap_5 .human_area{ display:block; height:1.8rem; width:1.57rem; position:absolute; left:50%; margin-left:-0.79rem; top:50%; margin-top:-1.29rem; z-index:2;}
.con_wrap_5 .human_area .human{ display:block; height:1.01rem; width:0.58rem; position:absolute; left:0.41rem; top:0.66rem; z-index:1; }
.con_wrap_5 .human_area .human .body{ display:block; height:1.01rem; width:0.58rem; background:url(../images/page_4_bg.png) no-repeat 0 -0.88rem; background-size:2.55rem 2.4rem; position:absolute; left:0px; top:0px; z-index:1; }
.con_wrap_5 .human_area .human .head{ display:block; height:0.73rem; width:0.66rem; background:url(../images/page_4_bg.png) no-repeat -0.6rem -0.88rem; background-size:2.55rem 2.4rem; position:absolute; left:0.16rem; top:-0.66rem; z-index:2; }
.con_wrap_5 .human_area .human .hand{ display:block; height:0.67rem; width:0.79rem; background:url(../images/page_4_bg.png) no-repeat -1.28rem -1rem; background-size:2.55rem 2.4rem; position:absolute; left:0.05rem; top:-0.01rem; z-index:2; }
.con_wrap_5 .human_area .human .leg_1{ display:block; height:0.49rem; width:1.03rem; background:url(../images/page_4_bg.png) no-repeat 0 -1.91rem; background-size:2.55rem 2.4rem; position:absolute; left:-0.35rem; top:0.63rem; z-index:3; }
.con_wrap_5 .human_area .human .leg_2{ display:block; height:0.43rem; width:1.05rem; background:url(../images/page_4_bg.png) no-repeat -1.28rem -0.55rem; background-size:2.55rem 2.4rem; position:absolute; left:0.07rem; top:0.65rem; z-index:2; }
.con_wrap_5 .human_area .human_2{ z-index:3;}

.con_wrap_5 .human_area .penguin{ display:block; height:0.69rem; width:0.61rem; position:absolute; left:0.77rem; top:0.67rem; z-index:2; }
.con_wrap_5 .human_area .penguin .body{ display:block; height:0.69rem; width:0.61rem; background:url(../images/page_4_bg.png) no-repeat -1.28rem -1.68rem; background-size:2.55rem 2.4rem; position:absolute; left:0px; top:0px; z-index:2; }
.con_wrap_5 .human_area .penguin .hand{ display:block; height:0.2rem; width:0.3rem;background:url(../images/page_4_bg.png) no-repeat -0.6rem -1.63rem; background-size:2.55rem 2.4rem; position:absolute; left:-0.01rem; top:0.31rem; z-index:3; }
.con_wrap_5 .human_area .penguin .foot_1{ display:block; height:0.19rem; width:0.17rem; background:url(../images/page_4_bg.png) no-repeat -0.92rem -1.63rem; background-size:2.55rem 2.4rem; position:absolute; left:0.3rem; top:0.58rem; z-index:1; }
.con_wrap_5 .human_area .penguin .foot_2{ display:block; height:0.16rem; width:0.16rem; background:url(../images/page_4_bg.png) no-repeat -1.05rem -1.91rem; background-size:2.55rem 2.4rem; position:absolute; left:0.39rem; top:0.6rem; z-index:1; }
.con_wrap_5 .human_area .shadow{ display:block; height:0.24rem; width:1.48rem; background:rgba(122,122,122,0.5); position:absolute; left:0.05rem; bottom:0px; border-radius:148px/24px;}

.con_wrap_5 .qr_code_wrap{ display:block; height:1.15rem; width:1.15rem; position:absolute; left:50%; margin-left:-0.58rem; top:50%; margin-top:1.15rem; z-index:2;}
.con_wrap_5 .qr_code_wrap .qr_code_img{ display:block; height:1.15rem; width:1.15rem; position:absolute; left:0; top:0; z-index:2;}
.con_wrap_5 .qr_code_wrap .qr_code_img .img{ display:block; height:1.15rem; width:1.15rem; background:url(../images/page_4_qr_code.png) no-repeat 0 0; background-size:contain; position:absolute; left:0; top:0; z-index:2;}
.con_wrap_5 .qr_code_wrap .qr_code_tips{ display:block; height:0.32rem; width:0.98rem; background:url(../images/page_4_bg.png) no-repeat 0 -0.55rem; background-size:2.55rem 2.4rem; position:absolute; left:0.07rem; top:1.25rem; z-index:2; line-height:99.99rem; overflow:hidden;}
.con_wrap_5 .download_wrap{position:absolute; left:50%;  width: 3rem; margin-left:-1.5rem; top:50%; margin-top:0.7rem; z-index:2;}
.con_wrap_5 .download_wrap .download_btn{display:block; background:#fcb072; color: #fff; text-align: center; height: 0.5rem; line-height: 0.5rem; font-size: 0.2rem; border-radius: 25px;  font-weight: bold;}
.con_wrap_5 .ad_wrap{width:2.5rem; position: absolute; z-index: 11; left: 50%; margin-left: -1.25rem; top: 50%; margin-top: 1.4rem;}
.con_wrap_5 .ad_wrap img{width:100%;}

.wrap_show.con_wrap_5 .logo_area .slogan{ -webkit-animation:a_translate 0.3s linear both;}
.wrap_show.con_wrap_5 .logo_area .slogan_2{ -webkit-animation:a_translate 0.3s 0.3s linear both;}
.wrap_show.con_wrap_5 .human_area{ -webkit-animation:a_translate 0.3s 0.6s linear both;}
.wrap_show.con_wrap_5 .download_wrap{ -webkit-animation:a_translate 0.3s 0.9s linear both;}
.wrap_show.con_wrap_5 .ad_wrap{ -webkit-animation:a_translate 0.3s 1.2s linear both;}


.wrap_show.con_wrap_5 .human_area .human .head{ -webkit-animation:a_page_6_human_head 2s 0.9s linear infinite; -webkit-transform-origin:45% 90%;}
.wrap_show.con_wrap_5 .human_area .human .body{ -webkit-animation:a_page_6_human_body 2s 0.9s linear infinite; -webkit-transform-origin:55% 90%;}
.wrap_show.con_wrap_5 .human_area .human .hand{ -webkit-animation:a_page_6_human_hand 2s 0.9s linear infinite; -webkit-transform-origin:5% 10%;}
.wrap_show.con_wrap_5 .human_area .human .leg_1{ -webkit-animation:a_page_6_human_leg_1 2s 0.9s linear infinite; -webkit-transform-origin:95% 100%;}
.wrap_show.con_wrap_5 .human_area .human .leg_2{ -webkit-animation:a_page_6_human_leg_2 2s 0.9s linear infinite; -webkit-transform-origin:5% 100%;}
.wrap_show.con_wrap_5 .human_area .shadow{ -webkit-animation:a_page_6_shadow 2s 0.9s linear infinite;}

@-webkit-keyframes a_page_6_human_head{
	0%{ -webkit-transform: rotate(0deg) translate(0,0); }
	25%{ -webkit-transform: rotate(-0.5deg) translate(-0.01rem,0); }
	50%{ -webkit-transform: rotate(0.5deg) translate(0.01rem,0); }
	75%{ -webkit-transform: rotate(-0.5deg) translate(-0.01rem,0); }
	100%{ -webkit-transform: rotate(0deg) translate(0,0); }
}

@-webkit-keyframes a_page_6_human_body{
	0%{ -webkit-transform: rotate(0deg); }
	25%{ -webkit-transform: rotate(-0.5deg); }
	50%{ -webkit-transform: rotate(0.5deg); }
	75%{ -webkit-transform: rotate(-0.5deg); }
	100%{ -webkit-transform: rotate(0deg); }
}

@-webkit-keyframes a_page_6_human_hand{
	0%{ -webkit-transform: rotate(0deg) translate(0,0); }
	25%{ -webkit-transform: rotate(0.4deg) translate(-0.01rem,0); }
	50%{ -webkit-transform: rotate(-0.4deg) translate(0.01rem,0); }
	75%{ -webkit-transform: rotate(0.3deg) translate(-0.01rem,0); }
	100%{ -webkit-transform: rotate(0deg) translate(0,0); }
}

@-webkit-keyframes a_page_6_human_leg_1{
	0%{ -webkit-transform: rotate(0deg); }
	25%{ -webkit-transform: rotate(0.5deg); }
	50%{ -webkit-transform: rotate(-0.5deg); }
	75%{ -webkit-transform: rotate(0.5deg); }
	100%{ -webkit-transform: rotate(0deg); }
}

@-webkit-keyframes a_page_6_human_leg_2{
	0%{ -webkit-transform: rotate(0deg); }
	25%{ -webkit-transform: rotate(-0.5deg); }
	50%{ -webkit-transform: rotate(0.5deg); }
	75%{ -webkit-transform: rotate(-0.5deg); }
	100%{ -webkit-transform: rotate(0deg); }
}

@-webkit-keyframes a_page_6_shadow{
	0%{ -webkit-transform: scale(1); }
	25%{ -webkit-transform: scale(0.98); }
	50%{ -webkit-transform: scale(1.02); }
	75%{ -webkit-transform: scale(0.99); }
	100%{ -webkit-transform: scale(1); }
}


.wrap_show.con_wrap_5 .human_area .penguin .body{ -webkit-animation:a_page_6_penguin_body 1s 0.9s linear infinite; -webkit-transform-origin:80% 100%;}
.wrap_show.con_wrap_5 .human_area .penguin .hand{ -webkit-animation:a_page_6_penguin_hand 1s 0.9s linear infinite; -webkit-transform-origin:100% 80%;}
.wrap_show.con_wrap_5 .human_area .penguin .foot_1{ -webkit-animation:a_page_6_penguin_foot 1s 0.9s linear infinite; -webkit-transform-origin:50% 70%;}
.wrap_show.con_wrap_5 .human_area .penguin .foot_2{ -webkit-animation:a_page_6_penguin_foot 1s 0.9s linear infinite; -webkit-transform-origin:50% 70%;}

@-webkit-keyframes a_page_6_penguin_body{
	0%{ -webkit-transform: scale(1,1) translate(0,0); }
	25%{ -webkit-transform: scale(0.98,1.02) translate(0,0.03rem); }
	50%{ -webkit-transform: scale(1.01,0.99) translate(0,0px); }
	75%{ -webkit-transform: scale(0.99,1.01) translate(0,-0.01rem); }
	100%{ -webkit-transform: scale(1,1) translate(0,0); }
}

@-webkit-keyframes a_page_6_penguin_hand{
	0%{ -webkit-transform: scale(1,1) translate(0,0) rotate(0deg); }
	25%{ -webkit-transform: scale(0.95,1.05) translate(0,0.03rem) rotate(2deg); }
	50%{ -webkit-transform: scale(1.02,0.98) translate(0,0) rotate(-1deg); }
	75%{ -webkit-transform: scale(0.98,1.02) translate(0,-0.01rem) rotate(1deg); }
	100%{ -webkit-transform: scale(1,1) translate(0,0) rotate(0deg); }
}

@-webkit-keyframes a_page_6_penguin_foot{
	0%{ -webkit-transform: scale(1,1); }
	25%{ -webkit-transform: scale(0.95,1.05); }
	50%{ -webkit-transform: scale(1.02,0.98); }
	75%{ -webkit-transform: scale(0.98,1.02); }
	100%{ -webkit-transform: scale(1,1); }
}

.wrap_show_prepare.con_wrap_5 .logo_area .slogan{ -webkit-animation:a_translate_show_prepare 0.2s linear both;}
.wrap_show_prepare.con_wrap_5 .logo_area .slogan_2{ -webkit-animation:a_translate_show_prepare 0.2s 0.2s linear both;}
.wrap_show_prepare.con_wrap_5 .human_area{ -webkit-animation:a_translate_show_prepare 0.2s 0.4s linear both;}
.wrap_show_prepare.con_wrap_5 .download_wrap{ -webkit-animation:a_translate_show_prepare 0.2s 0.6s linear both;}
.wrap_show_prepare.con_wrap_5 .ad_wrap{ -webkit-animation:a_translate_show_prepare 0.2s 0.8s linear both;}


/*分页*/
.pager_wrap{ display:block; height:0.08rem; width:100%; position:absolute; left:0px; bottom:1.05rem; z-index:100; opacity:0;}
.pager_wrap .pager_list{ display:block; height:0.08rem; width:100%; text-align:center;}
.pager_wrap .pager_list li{ display:inline-block; height:0.08rem; width:0.08rem; margin:0 0.03rem;}
.pager_wrap .pager_list li a{ display:inline-block; height:0.08rem; width:0.08rem; background:#c2c2c2; border-radius:8px; text-indent:-99.99rem; overflow:hidden;}
.pager_wrap .pager_list li.current a{ background:#787673;}



/*触摸引导屏*/
.desktop_wrap{ display:block; height:100%; width:100%; position:absolute; left:0px; top:0px; z-index:1; opacity:0;}
.desktop_wrap .desktop_bg{ display:block; height:100%; width:100%; background:url(../images/desktop_1_1.jpg) no-repeat 0 top; background-size:100% auto; position:absolute; left:0px; top:0px; z-index:99;}
.desktop_wrap .desktop_inner{ display:block; height:100%; width:100%; background:url(../images/desktop_1_2.jpg) no-repeat 0 bottom; background-size:100% auto; position:absolute; left:0px; top:0px; z-index:99;}
.desktop_wrap .desktop_bg .title{ display:block; height:0.34rem; width:1.77rem; background:url(../images/desktop_bg.png) no-repeat 0 0; background-size:1.77rem 0.96rem; position:absolute; left:50%; margin-left:-0.89rem; top:0.63rem; z-index:99; text-indent:-99.99rem; overflow: hidden; -webkit-transform:translate(-1.29rem,0.2rem) scale(0.3);}
.desktop_wrap .desktop_bg .icon_area{ display:block; height:3.06rem; width:3.06rem; background:rgba(220,220,220,0.7); position:absolute; left:50%; margin-left:-1.53rem; top:1.17rem; z-index:99; border-radius:50px; -webkit-transform:translate(-1.3rem,-2.14rem) scale(0.2);}
.desktop_wrap .desktop_bg .icon_area .icon_webank{ display:block; height:0.6rem; width:0.6rem; position:absolute; right:0.26rem; bottom:0.36rem; z-index:1;}
.desktop_wrap .desktop_bg .icon_area .icon_webank .icon{ display:block; height:0.6rem; width:0.6rem; background:url(../images/desktop_bg.png) no-repeat 0 -0.36rem; background-size:1.77rem 0.96rem; position:absolute; right:0; bottom:0; -webkit-animation:a_lighting 2s linear infinite; border-radius:10px;}
.desktop_wrap .desktop_bg .icon_area .icon_webank .tit{ display:block; height:0.12rem; width:0.48rem; background:url(../images/desktop_bg.png) no-repeat -0.62rem -0.36rem; background-size:1.77rem 0.96rem; position:absolute; left:50%; margin-left:-0.24rem; top:0.66rem; text-indent:-99.99rem; overflow:hidden;}
.desktop_wrap .desktop_bg .icon_area .other_icon{ display:block; height:2.61rem; width:2.59rem; background:url(../images/desktop_icon_bg.png) no-repeat 0 0; background-size:100% 100%; position:absolute; left:0.22rem; top:0.28rem;}
/*.desktop_wrap .desktop_bg .icon_area .icon_touch_area{ display:block; height:0.25rem; width:0.25rem; position:absolute; right:0.15rem; bottom:0.15rem; z-index:1; border-radius:25px; opacity:0;}
.desktop_wrap .desktop_bg .icon_area .icon_touch_area .icon_touch{ display:block; height:25px; width:25px; background:rgba(255,255,255,0.85); position:absolute; left:0px; top:0px; z-index:2; border-radius:25px;}
.desktop_wrap .desktop_bg .icon_area .icon_touch_area .touch_shadow{ display:block; height:0.33rem; width:0.33rem; background:rgba(0,0,0,0.55); position:absolute; left:-0.04rem; top:-0.04rem; z-index:1; border-radius:33px;}*/
.desktop_hide{ display:none;}

@-webkit-keyframes a_lighting{0%{box-shadow:0 0 0.2rem 0.02rem rgba(255,255,255,0),0px 0 0.03rem rgba(255,255,255,0) inset}
25%{box-shadow:0 0 0.2rem 0.02rem rgba(255,255,255,.8),0px 0 0.03rem rgba(255,255,255,.8) inset}
50%{box-shadow:0 0 0.2rem 0.02rem rgba(255,255,255,.3),0px 0 0.03rem rgba(255,255,255,.3) inset}
75%{box-shadow:0 0 0.2rem 0.02rem rgba(255,255,255,.6),0px 0 0.03rem rgba(255,255,255,.6) inset}
100%{box-shadow:0 0 0.2rem 0.02rem rgba(255,255,255,0),0px 0 0.03rem rgba(255,255,255,0) inset}}

.desktop_show{ opacity:1;}
.desktop_show_2 .desktop_bg .title{ -webkit-animation:a_desktop_title 0.3s linear both;}
.desktop_show_2 .desktop_bg .icon_area{ -webkit-animation:a_desktop_icon_area 0.3s ease both;}
.desktop_show_2 .desktop_bg .icon_area .other_icon{ -webkit-animation:a_desktop_other_icon 0.3s 0.4s linear both;}
.desktop_show_2 .desktop_bg .icon_area .icon_webank{ -webkit-animation:a_opacity 0.3s 0.3s linear both;}
.desktop_show_2 .desktop_bg .icon_area .icon_webank .tit{ -webkit-animation:a_opacity 0.3s 0.4s linear both;}/*
.desktop_show_2 .desktop_bg .icon_area .icon_touch_area{ -webkit-animation:a_desktop_icon_touch 1s 1s linear both;}*/

.main_wrap_show{ -webkit-animation:a_main_wrap 0.3s ease both; -webkit-transform-origin:79% 60%;}

@-webkit-keyframes a_main_wrap{
	0%{ -webkit-transform:scale(0.09); opacity:0; }
	100%{ -webkit-transform:scale(1); opacity:1; }
}

@-webkit-keyframes a_desktop_title{
	0%{ -webkit-transform:translate(-1.29rem,0.2rem) scale(0.3); opacity:1; }
	10%{ -webkit-transform:translate(-1.29rem,0.2rem) scale(0.3); opacity:0; }
	20%{ -webkit-transform:translate(0,0) scale(1); opacity:0; }
	100%{ -webkit-transform:translate(0,0) scale(1); opacity:1; }
}

@-webkit-keyframes a_desktop_icon_area{
	0%{ -webkit-transform:translate(-1.3rem,-2.14rem) scale(0.2); }
	100%{ -webkit-transform:translate(0,0) scale(1); }
}

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

@-webkit-keyframes a_desktop_icon_touch{
	0%{ -webkit-transform:translate(0,0) scale(1); opacity:0; }
	10%{ -webkit-transform:translate(0,0) scale(1); opacity:1; }
	60%{ -webkit-transform:translate(-0.3rem,-0.3rem) scale(1); opacity:1; }
	70%{ -webkit-transform:translate(-0.3rem,-0.3rem) scale(0.9); opacity:1; }
	90%{ -webkit-transform:translate(-0.3rem,-0.3rem) scale(0.9); opacity:1; }
	100%{ -webkit-transform:translate(-0.3rem,-0.3rem) scale(1); opacity:1; }
}



.android_version .con_wrap_2 .scarf_area{ background:url(../images/page_3_1_pic_1_android.png) no-repeat 0 0; background-size:contain; bottom:1.6rem;}
.android_version .con_wrap_2 .scarf_area .scarf_box{ display:none;}
.android_version .con_wrap_2 .scarf_area .rain_area{ display:none;}
.android_version .wrap_show.con_wrap_2 .scarf_area{-webkit-animation: a_opacity 0.3s 0.9s linear both;}
.android_version .wrap_hide_show.con_wrap_2 .scarf_area{-webkit-animation: a_opacity 0.3s 0.3s linear both;}
.android_version .wrap_hide.con_wrap_2 .scarf_area{-webkit-animation: a_opacity_hide 0.2s 0.2s linear both;}
.android_version .wrap_show_prepare.con_wrap_2 .title_wrap .title{-webkit-animation: a_translate_show_prepare 0.2s 0.4s linear both;}
.android_version .wrap_show_prepare.con_wrap_2 .scarf_area{ -webkit-animation:a_opacity_hide 0.2s 0.4s linear both;}

.android_version .con_wrap_3 .scarf_area{ background:url(../images/page_3_2_pic_1_android.png) no-repeat 0 0; background-size:contain; bottom:1.7rem;}
.android_version .con_wrap_3 .scarf_area .scarf_1{ display:none;}
.android_version .con_wrap_3 .scarf_area .scarf_2{ display:none;}
.android_version .con_wrap_3 .scarf_area .scarf_3{ display:none;}
.android_version .wrap_show.con_wrap_3 .title_wrap .txt{-webkit-animation: a_opacity 0.3s linear both;}
.android_version .wrap_show.con_wrap_3 .scarf_area {-webkit-animation: a_opacity 0.3s 0.3s linear both;}
.android_version .wrap_hide.con_wrap_3 .title_wrap .txt{-webkit-animation: a_opacity_hide 0.2s linear both;}
.android_version .wrap_hide.con_wrap_3 .scarf_area{-webkit-animation: a_opacity_hide 0.2s 0.2s linear both;}
.android_version .wrap_show_prepare.con_wrap_3 .title_wrap .txt{-webkit-animation: a_opacity_hide 0.2s linear both;}
.android_version .wrap_show_prepare.con_wrap_3 .scarf_area{ -webkit-animation:a_opacity_hide 0.2s 0.2s linear both;}

.android_version .con_wrap_4 .scarf_area{ background:url(../images/page_3_3_pic_1.png) no-repeat 0 0; background-size:contain; bottom:1.9rem;}
.android_version .con_wrap_4 .scarf_area .scarf_box{ display:none;}
.android_version .wrap_show.con_wrap_4  .title_wrap .txt {-webkit-animation: a_opacity 0.3s linear both;}
.android_version .wrap_show.con_wrap_4 .scarf_area {-webkit-animation: a_opacity 0.3s 0.3s linear both;}
.android_version .wrap_show_prepare.con_wrap_4 .scarf_area{ -webkit-animation:a_opacity_hide 0.2s 0.5s linear both;}

.android_version .wrap_show_prepare.con_wrap_4 .scarf_area .scarf{ -webkit-animation:a_page_5_scarf_hide 0.3s 0.2s ease both;}
.android_version .wrap_show_prepare.con_wrap_4 .scarf_area .scarf_hook_2{ -webkit-animation:a_page_3_scarf_hook_2_hide 0.2s 0.2s linear both;}
.android_version .wrap_show_prepare.con_wrap_4 .scarf_area{ -webkit-animation:a_page_5_scarf_area_hide 0.2s 0.5s linear both;}
.android_version .wrap_show_prepare.con_wrap_4 .scarf_area .scarf_box{ -webkit-animation:none;}
.android_version .wrap_show_prepare.con_wrap_4 .title_wrap .txt{ -webkit-animation: a_opacity_hide 0.2s linear both;}
.android_version .wrap_show_prepare.con_wrap_4 .scarf_area{ -webkit-animation:a_opacity_hide 0.2s 0.2s linear both;}

.android_version .wrap_hide_show.con_wrap_4 .title_wrap .question_2{ -webkit-animation:a_translate_hide_show 0.3s linear both;}
.android_version .wrap_hide_show.con_wrap_4 .title_wrap .title{ -webkit-animation:a_translate_hide_show 0.3s 0.3s linear both;}
.android_version .wrap_hide_show.con_wrap_4 .title_wrap .txt{ -webkit-animation:a_translate_hide_show 0.3s 0.3s linear both;}
.android_version .wrap_hide_show.con_wrap_4 .scarf_area{-webkit-animation:a_opacity 0.3s 0.6s linear both;}
.android_version .wrap_hide_show.con_wrap_4 .webank_logo{ -webkit-animation:a_translate_hide_show 0.3s 1.2s linear both;}

.android_version .wrap_hide.con_wrap_4 .title_wrap .question_2{ -webkit-animation:a_translate_hide 0.2s linear both;}
.android_version .wrap_hide.con_wrap_4 .title_wrap .title{ -webkit-animation:a_translate_hide 0.2s 0.2s linear both;}
.android_version .wrap_hide.con_wrap_4 .title_wrap .txt{ -webkit-animation:a_translate_hide 0.2s 0.2s linear both;}
.android_version .wrap_hide.con_wrap_4 .scarf_area{-webkit-animation:a_opacity_hide 0.2s 0.4s linear both;}
.android_version .wrap_hide.con_wrap_4 .webank_logo{ -webkit-animation:a_translate_hide 0.2s 0.6s linear both;}


.android_version .pager_wrap_show {-webkit-animation: a_opacity 0.3s 0.9s linear both;}


#orientation_hinter{
	position: fixed;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	background: #131313;
	z-index: 999;
	display: none;
}
#orientation_hinter .hinter_phone {
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -0.3rem 0 0 -0.57rem;
}
#orientation_hinter .hinter_phone i {
    display: block;
    width: 1.14rem;
    height: 0.6rem;
    background: url(../images/landscape_phone@2x.png) no-repeat center center transparent;
    background-size: 1.14rem 0.6rem;
    -webkit-animation: rotateHint 2.6s ease-in infinite;
            animation: rotateHint 2.6s ease-in infinite;
}
#orientation_hinter.portrait .hinter_phone {
        -webkit-transform: rotate(90deg);
                transform: rotate(90deg);
}
#orientation_hinter .hinter_rotate {
    width: 1.55rem;
    height: 0.3rem;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -0.15rem 0 0 -0.77rem;
    background: url(../images/landscape_hint@2x.png) no-repeat center center transparent;
    background-size: 1.55rem 0.3rem;
}
#orientation_hinter .hinter_text {
    position: absolute;
    right: 0;
    bottom: 15%;
    left: 0;
    color: #bbbbbb;
    font-size: 0.14rem;
    font-weight: normal;
    text-align: center;
    line-height: 1;
    display: none;
}
@-webkit-keyframes rotateHint {
    0% {
        -webkit-transform: rotate(0deg);
                transform: rotate(0deg);
        opacity: 0.2;
    }
    50% {
        -webkit-transform: rotate(90deg);
                transform: rotate(90deg);
        opacity: 1;
    }
    100% {
        -webkit-transform: rotate(90deg);
                transform: rotate(90deg);
        opacity: 0;
    }
}
@keyframes rotateHint {
    0% {
        -webkit-transform: rotate(0deg);
                transform: rotate(0deg);
        opacity: 0.2;
    }
    50% {
        -webkit-transform: rotate(90deg);
                transform: rotate(90deg);
        opacity: 1;
    }
    100% {
        -webkit-transform: rotate(90deg);
                transform: rotate(90deg);
        opacity: 0;
    }
}
@media screen and (orientation: landscape) {
    #orientation_hinter.landscape,
    #orientation_hinter.landscape .landscape {
        display: block;
    }
}
// @media screen and (orientation: portrait) {
//     #orientation_hinter.portrait,
//     #orientation_hinter.portrait .portrait {
//         display: block;
//     }
// }