@charset "utf-8";
/* CSS Document */
html,body,div,ol,ul,h1,h2,h3,h4,h5,h6,p,th,td,dl,dd,form,iframe,input,textarea,select,label,article,aside,footer,header,menu,nav,section,time,audio,video{margin:0;padding:0; font-size: 18px; line-height: 1.2em;}
article,aside,footer,header,hgroup,nav,section,canvas,video{display:block;}
body{font-size:100%;font-family:Helvetica,STHeiti,Droid Sans Fallback;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;-webkit-tap-highlight-color:rgba(0,0,0,0);}
textarea{resize:none;}
iframe,img{border:0;}
ul,ol{list-style:none;}
input,select,textarea{outline:0;-webkit-user-modify:read-write-plaintext-only;}
input{-webkit-appearance:none;}
a{text-decoration:none; }


html,body{ width: 100% height: 100%; background:#ece9e0 url(../images/bg.jpg); background-size:cover;}
.inner{ position:relative; width:100%; height:100%;}
.lay{ position:absolute; top:0; left:0; width:100%; height:100%; display:none; overflow:hidden;}
.clear{ clear:both}
.after{ display:none}
/*loading*/
.loading{ position:absolute; top:0; left:0; display:block; background:#fff;z-index: 999; width: 100%; height: 100%; background:url(https://www.h5anli.com/wxactivities/forgirls/images/bg.jpg); background-size:cover}
@keyframes changebgl
{
    0%,100%{ background:url(https://www.h5anli.com/wxactivities/forgirls/images/loading-p1.png); background-size:100% 100%;}
    25%  {background:url(https://www.h5anli.com/wxactivities/forgirls/images/loading-p2.png); background-size:100% 100%;}
    50%  {background:url(https://www.h5anli.com/wxactivities/forgirls/images/loading-p3.png); background-size:100% 100%;}
    75%  {background:url(https://www.h5anli.com/wxactivities/forgirls/images/loading-p4.png); background-size:100% 100%;}
}
@-webkit-keyframes changebgl 
{
    0%,100%{ background:url(https://www.h5anli.com/wxactivities/forgirls/images/loading-p1.png); background-size:100% 100%;}
    25%  {background:url(https://www.h5anli.com/wxactivities/forgirls/images/loading-p2.png); background-size:100% 100%;}
    50%  {background:url(https://www.h5anli.com/wxactivities/forgirls/images/loading-p3.png); background-size:100% 100%;}
    75%  {background:url(https://www.h5anli.com/wxactivities/forgirls/images/loading-p4.png); background-size:100% 100%;}
}
.changebgl{ -webkit-animation: changebgl 8s; animation: changebgl 8s;}
.infinite{animation-iteration-count: infinite;-webkit-animation-iteration-count: infinite;}
.lpic{ width:302px; height:303px; position:absolute; top:20%; left:50%; margin-left:-151px;background:url(https://www.h5anli.com/wxactivities/forgirls/images/loading-p1.png); background-size:100% 100%;}
.lnum{ width:397px; height:46px; position:absolute; top:20%; margin-top:400px; left:50%; margin-left:-198.5px; background:url(https://www.h5anli.com/wxactivities/forgirls/images/loading-w1.png); background-size:cover}
.lnum span{font-size: 50px; color: #333; margin-left:265px; line-height: 52px;}
.lword{ position:absolute; bottom:10%; width:653px; height:26px; background:url(https://www.h5anli.com/wxactivities/forgirls/images/loading-w2.png); background-size:cover; left:50%; margin-left:-326.5px;}

/*第一屏 lay1*/
.lay1{ background:url(../images/bg.jpg); background-size:cover}
.title{ transition:all ease 0.5s; width:639px; height:331px; /*background:url(https://www.h5anli.com/wxactivities/forgirls/images/p1-w1.png);*/ background-size:cover; position:absolute; top:5%; left:50%; margin-left:-319.5px; top: 50%; margin-top: -165.5px;}
.titlepart{ position:absolute; top:5%; left:50%;}
.titlepart.t1{ width:85px; height:82px; background:url(https://www.h5anli.com/wxactivities/forgirls/images/p1-w16.png); margin-left: -319px; margin-top: -16px;}
.titlepart.t2{ width:140px; height:133px; background:url(https://www.h5anli.com/wxactivities/forgirls/images/p1-w11.png); margin-left: -250px; margin-top: 26px;}
.titlepart.t3{ width:162px; height:139px; background:url(https://www.h5anli.com/wxactivities/forgirls/images/p1-w12.png); margin-left: -109px; margin-top: 26px;}
.titlepart.t4{ width:134px; height:128px; background:url(https://www.h5anli.com/wxactivities/forgirls/images/p1-w13.png); margin-left: 52px; margin-top: 7px;}
.titlepart.t5{ width:74px; height:68px; background:url(https://www.h5anli.com/wxactivities/forgirls/images/p1-w14.png);  margin-left: 170px; margin-top: 104px;}
.titlepart.t6{ width:501px; height:95px; background:url(https://www.h5anli.com/wxactivities/forgirls/images/p1-w15.png); margin-left: -256px; margin-top: 182px;}
.titlepart.t7{ width:109px; height:107px; background:url(https://www.h5anli.com/wxactivities/forgirls/images/p1-w17.png); margin-left: 210px; margin-top: 208px;}

.personarea{width: 682px; height: 764px; overflow: hidden; position: absolute; top: 62%; left: 50%; margin-left: -341px; margin-top: -351px;}
.person{ width:331px; height:382px; float:left;}
.person .img{ width:331px; height:332px;}

.person.p1{ margin-right:10px;}
.person.p2{ margin-left:10px;}
.person.p3{ margin-right:10px;}
.person.p4{ margin-left:10px;}
.person.p1 .img{ background:url(https://www.h5anli.com/wxactivities/forgirls/images/p1-p1.png); background-size:cover;}/*t:-(h+a) l:-(w+a)*/
.person.p2 .img{   background:url(https://www.h5anli.com/wxactivities/forgirls/images/p1-p2.png); background-size:cover;}/*t:-(h+a) l:a*/
.person.p3 .img{   background:url(https://www.h5anli.com/wxactivities/forgirls/images/p1-p3.png); background-size:cover; }/*t:a l:-(w+a)*/
.person.p4 .img{   background:url(https://www.h5anli.com/wxactivities/forgirls/images/p1-p4.png); background-size:cover;}/*t:a l:a*/   

.person.p1 .name{ width:117px; height:30px; background:url(https://www.h5anli.com/wxactivities/forgirls/images/p1-w2.png); background-size:cover; margin:auto}
.person.p2 .name{ width:116px; height:30px; background:url(https://www.h5anli.com/wxactivities/forgirls/images/p1-w3.png); background-size:cover; margin:auto}
.person.p3 .name{ width:117px; height:30px; background:url(https://www.h5anli.com/wxactivities/forgirls/images/p1-w4.png); background-size:cover; margin:auto}
.person.p4 .name{ width:115px; height:30px; background:url(https://www.h5anli.com/wxactivities/forgirls/images/p1-w5.png); background-size:cover; margin:auto}
.person.p1 .name,.person.p2 .name,.person.p3 .name,.person.p4 .name{ margin-top: 5px;}
.info{ display:none; width:500px; height:500px; box-sizing:border-box; padding:30px; position:absolute; top:50%; left:50%; margin-top:-250px; margin-left:-250px; z-index:998; background:#eee; border:30px solid #fff; border-radius:20px;}
.words{ font-size: 42px; color: #333; margin-top: 20px;}
.sure{ font-size: 36px; width: 300px; margin: auto; height: 80px; text-align: center; line-height: 80px; background: #EBE7DD; border: 10px solid #fff; margin-top: 20px; border-radius: 20px;}



.before .me{  display:none; width: 302px; height: 490px; background: url(https://www.h5anli.com/wxactivities/forgirls/images/p2-p3.png); position: absolute; left: 50%; bottom: -10px; margin-left: 50px; }
.before .zhufu{ width: 390px; height: 275px; bottom: 11%; left: 4%; position: absolute;}
.before .sanba{ display:none; width: 142px; height: 41px; background: url(https://www.h5anli.com/wxactivities/forgirls/images/p2-w2.png); background-size: cover; float: left; margin-top: 35px; margin-right: 14px;}
.before .funvjie{ display:none; width:234px; height:79px; background:url(https://www.h5anli.com/wxactivities/forgirls/images/p2-w1.png); background-size:cover; float:left;}
.before .kuaile{ display:none;  width:304px; height:58px; background:url(https://www.h5anli.com/wxactivities/forgirls/images/p2-w3.png); background-size:cover; margin-top: 10px;}
.before .bala{ display:none;  width:287px; height:45px; background:url(https://www.h5anli.com/wxactivities/forgirls/images/p2-w4.png); background-size:cover; margin-top:50px;}
.before .blackline{ display:none; width:42px; height:78px; background:url(https://www.h5anli.com/wxactivities/forgirls/images/blackline.png); position:absolute; top: 50%; left: 50%;}
.before .say{ display:none; width:262px; height:177px; background:url(https://www.h5anli.com/wxactivities/forgirls/images/p2-p2.png); left:50%; top:50%; position:absolute;}
.ani{ display:none;}
.black{ position:absolute; top:0; left:0; width:100%; height:100%; background:#111; z-index:999; display:none}
/*第二屏 lay2*/
.lay2{ background:url(https://www.h5anli.com/wxactivities/forgirls/images/lay2.jpg); background-size:cover}
.lay2 .before .duifang{ display:none; width: 339px; height: 547px; background: url(https://www.h5anli.com/wxactivities/forgirls/images/p2-p1.png); background-size: cover; position: absolute; top: 50%; left: 50%; margin-top: -450px; margin-left: -306px;}
.lay2 .ani{ width:605px; height:1122px; position:absolute; bottom:0; left:50%; margin-left:-342.5px;}
.lay2 .ani.ani1{ background:url(https://www.h5anli.com/wxactivities/forgirls/images/p2-p41.png); background-size:cover}
.lay2 .ani.ani2{ width: 663px; background:url(https://www.h5anli.com/wxactivities/forgirls/images/p2-p42.png); background-size:cover}
.lay2 .ani.ani3{ width:515px; background:url(https://www.h5anli.com/wxactivities/forgirls/images/p2-p43.png); background-size:cover}
.lay2 .blackline{ margin-top: -380px; margin-left: -240px;}
.lay2 .say{ margin-top: -480px; margin-left: 40px;}



/*第二屏 lay3*/
.lay3{ background:url(https://www.h5anli.com/wxactivities/forgirls/images/lay3.jpg); background-size:cover}
.lay3 .before .duifang{ width: 440px; height: 593px; background: url(https://www.h5anli.com/wxactivities/forgirls/images/p3-p1.png); background-size: cover; position: absolute; top: 50%; left: 50%; margin-top: -475px; margin-left: -256px;}
.lay3 .ani{ width:683px; height:1235px; position:absolute; bottom:0; left:50%; margin-left:-341.5px;}
.lay3 .ani.ani1{ background:url(https://www.h5anli.com/wxactivities/forgirls/images/p3-p51.png); background-size:cover}
.lay3 .ani.ani2{ width: 663px; background:url(https://www.h5anli.com/wxactivities/forgirls/images/p3-p52.png); background-size:cover}
.lay3 .say{ margin-top: -500px; margin-left: 100px;}
.lay3 .blackline{ margin-top: -400px; margin-left: -150px;}

/*第三屏 lay4*/
.lay4{ background:url(https://www.h5anli.com/wxactivities/forgirls/images/lay4.jpg); background-size:cover}
.lay4 .before .duifang{     width: 374px; height: 558px; background: url(https://www.h5anli.com/wxactivities/forgirls/images/p4-p1.png); background-size: cover; position: absolute; top: 50%; left: 50%; margin-top: -330px; margin-left: -187px;}
.lay4 .ani{ width:708px; height:1013px; position:absolute; bottom:0; left:50%; margin-left:-341.5px;}
.lay4 .ani.ani1{ background:url(https://www.h5anli.com/wxactivities/forgirls/images/p4-p4.png); background-size:cover}
.lay4 .ani.ani2{ background:url(https://www.h5anli.com/wxactivities/forgirls/images/p4-p5.png); background-size:cover; margin-left: -351.5px;}
.lay4 .say{ margin-top: -405px; margin-left: 100px;}
.lay4 .blackline{ margin-top: -200px; margin-left: -120px;}

/*第四屏 lay5*/
.lay5{ background:url(https://www.h5anli.com/wxactivities/forgirls/images/lay5.jpg); background-size:cover}
.lay5 .before .duifang{ width:474px; height:599px; background: url(https://www.h5anli.com/wxactivities/forgirls/images/p5-p1.png); background-size: cover; position: absolute; top: 50%; left: 50%; margin-top: -341px; margin-left: -324px;}
.lay5 .ani{height:927px; position:absolute; bottom:0; left:50%; margin-left:-341.5px;}
.lay5 .ani.ani1{ width:610px; margin-left:-371px; background:url(https://www.h5anli.com/wxactivities/forgirls/images/p5-p3.png); background-size:cover}
.lay5 .ani.ani2{ width:455px; margin-left:-211.5px; background:url(https://www.h5anli.com/wxactivities/forgirls/images/p5-p4.png); background-size:cover;}
.lay5 .ani.ani3{ width:442px; margin-left:-201px; background:url(https://www.h5anli.com/wxactivities/forgirls/images/p5-p5.png); background-size:cover;}
.lay5 .say{ margin-top: -405px; margin-left: 100px;}
.lay5 .blackline{ margin-top: -300px; margin-left: -190px;}


.lay6.r2{ background:url(https://www.h5anli.com/wxactivities/forgirls/images/p6-p41.jpg); background-size:cover}
.lay6.r3{ background:url(https://www.h5anli.com/wxactivities/forgirls/images/p6-p21.jpg); background-size:cover}
.lay6.r4{ background:url(https://www.h5anli.com/wxactivities/forgirls/images/p6-p31.jpg); background-size:cover}
.lay6.r5{ background:url(https://www.h5anli.com/wxactivities/forgirls/images/p6-p11.jpg); background-size:cover}
.lay6 .banner{ width:674px; height:397px; position:absolute; top:15%; left:50%; margin-left:-337px;}
.lay6.r2 .banner{ background:url(https://www.h5anli.com/wxactivities/forgirls/images/p6-p4.png); background-size:cover;}
.lay6.r3 .banner{ background:url(https://www.h5anli.com/wxactivities/forgirls/images/p6-p2.png); background-size:cover;}
.lay6.r4 .banner{ background:url(https://www.h5anli.com/wxactivities/forgirls/images/p6-p3.png); background-size:cover;}
.lay6.r5 .banner{ background:url(https://www.h5anli.com/wxactivities/forgirls/images/p6-p1.png); background-size:cover;}
.lay6 .jixu{ width:501px; height:77px; background:url(https://www.h5anli.com/wxactivities/forgirls/images/jixu.png); background-size:cover; position:absolute; left:50%; margin-left:-250.5px; top:15%; margin-top:550px}
.lay6 .fangqi{ width:417px; height:77px; background:url(https://www.h5anli.com/wxactivities/forgirls/images/giveup.png); background-size:cover; position:absolute; left:50%; margin-left:-208.5px; top:15%; margin-top:700px}

.lay7{ background:url(https://www.h5anli.com/wxactivities/forgirls/images/bg.jpg); background-size:100% 100%;}
.lay7 .bg{ width:464px; height:84px; background:url(https://www.h5anli.com/wxactivities/forgirls/images/flower.png); background-size:cover; position:absolute; bottom:0; left:50%; margin-left:-232px;}
.personarea2{ width:530px; height:195px; overflow:hidden; position:absolute; top:3%; left:50%; margin-left:-265px;}
.personarea2 div{ float:left;}
.personarea2 .pp1{ width: 138px; height: 162px; background: url(https://www.h5anli.com/wxactivities/forgirls/images/p2-p1.png); background-size: cover; transform: rotate(-12deg); margin-top: 10px; margin-left: 5px;}
.personarea2 .pp2{ width:116px; height:164px; background:url(https://www.h5anli.com/wxactivities/forgirls/images/p4-p1.png); background-size:cover; transform: rotate(-5deg); margin-left: -9px;}
.personarea2 .pp3{ width: 155px; height: 164px; background: url(https://www.h5anli.com/wxactivities/forgirls/images/p3-p1.png); background-size: cover; transform: rotate(1deg); margin-left: -25px;}
.personarea2 .pp4{ width: 156px; height: 159px; background: url(https://www.h5anli.com/wxactivities/forgirls/images/p5-p1.png); background-size: cover; transform: rotate(13deg); margin-left: -25px; margin-top: 21px;}
.letter{ width:631px; height:691px; background:url(https://www.h5anli.com/wxactivities/forgirls/images/word.png); background-size:cover; position:absolute; top:3%; left:50%; margin-left:-315.5px; margin-top:210px;}
.again{ width:292px; height:106px; background:url(https://www.h5anli.com/wxactivities/forgirls/images/again.png); position:absolute; bottom:9%; left:25%; margin-left:-146px;}
.share{width:292px; height:106px; background:url(https://www.h5anli.com/wxactivities/forgirls/images/share.png); position:absolute; bottom:9%; left:75%; margin-left:-146px;}

.sharearea{ position:absolute; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.8); display:none}
.sbg{ width:323px; height:253px; background:url(https://www.h5anli.com/wxactivities/forgirls/images/38.png); background-size:cover; position:absolute; top: 80px; right:40px;}
.evenlop{width: 147px; height: 126px; background: url(https://www.h5anli.com/wxactivities/forgirls/images/evenlop.png); background-size: cover; position: absolute; top: 165px; right: 305px; transform: translate(250px,-160px); transition: all ease 1s;}
.shareword{ width:612px; height:120px; background:url(https://www.h5anli.com/wxactivities/forgirls/images/shareword.png); background-size:cover; position:absolute; top: 80px; margin-top:300px; left:50%; margin-left:-306px;}

.gray { opacity:0.5;  -webkit-filter: grayscale(100%);  -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%);  filter: grayscale(100%); filter: gray;}
.transforms {
    -webkit-animation-name: transforms;
    animation-name: transforms;
    -webkit-animation-duration: 3s;
    animation-duration: 3s;
    animation-timing-function: linear;
    -webkit-animation-timing-function: linear;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite
}

@-webkit-keyframes transforms {
    0%{ -webkit-transform:none; opacity:1}
    60%{ -webkit-transform:translate(250px,-160px); opacity:1}
  100%{ opacity:0}
}

@keyframes transforms {
    0%{ -webkit-transform:none; opacity:1}
    60%{ -webkit-transform:translate(250px,-160px); opacity:1}
  100%{ opacity:0}

}



/*音乐*/
.music{ width:39px; height:46.5px; background:url(https://www.h5anli.com/wxactivities/forgirls/images/music.png); background-size:cover; position:fixed; top:12px; right:12px; z-index:999}
.roate {
    -webkit-animation-name: roate;
    animation-name: roate;
    -webkit-animation-duration: 5s;
    animation-duration: 5s;
    animation-timing-function: linear;
    -webkit-animation-timing-function: linear;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite
}

@-webkit-keyframes roate {
    0%,100%{ -webkit-transform:rotate(0deg)}
    50%{ -webkit-transform:rotate(360deg)}
}

@keyframes roate {
    0%,100%{ -webkit-transform:rotate(0deg)}
    50%{ -webkit-transform:rotate(360deg)}
}


/*iphone4 适配*/
@media (max-height:1000px){
.title{ transform:scale(0.8,0.8); -webkit-transform: scale(0.8,0.8);}
.personarea{ top:64%; transform:scale(0.8,0.8); -webkit-transform: scale(0.8,0.8);}
.lay6 .fangqi{ top:5%}
.lay6 .jixu{ top:5%}
.lword{ bottom:6%}
.letter{ transform: scale(0.8,0.8); -webkit-transform: scale(0.8,0.8); margin-top: 145px;}
.again{ transform: scale(0.8,0.8); -webkit-transform: scale(0.8,0.8);}
.share{ transform: scale(0.8,0.8); -webkit-transform: scale(0.8,0.8);}
}