@charset "gb2312";
body,h1,h2,h3,h4,h5,h6,p,dl,dt,dd,ul,ol,li,form,fieldset,legend,button,input,textarea,th,td,div,input{margin:0;padding:0;word-wrap:break-word;}
body,html,input{font:12px "Microsoft Yahei",arial,\5b8b\4f53,"Helvetica Neue",Helvetica,STHeiTi,sans-serif;}
h1,h2,h3,h4,h5,h6{font-size:100%;}
h1{font-size:34px;}h2{font-size:24px;}h3{font-size:18px;}h4{font-size:16px;}h5{font-size:14px;}h6{font-size:12px;}
input,label,img,th{vertical-align:middle;}
ul,ol,li{list-style:none;}
img{margin: 0;padding: 0;border: none;}
body{overflow: hidden;margin: 0 auto;max-width:750px;background: #fff4a5;position: relative;}

.page{perspective: 500;-webkit-perspective: 500;}
.cover,.page,.load,.windBells,.hope,.mask,.mask_bg{width: 7.5rem;height: 100%;position: absolute;left: 0;top: 0;overflow: hidden;}
.cover{z-index: 100;background: #e0dede url(../images/cover.jpg) top center no-repeat;background-size: 100% auto;transform-origin: top center;-webkit-transform-origin: top center;}
.load{z-index: 500;background: #fff;}
.move{position: absolute;width: 3.8rem;height: 3.5rem;left: 0;top: 3.5rem;overflow: hidden;}
.kit{left: 0;width: 3rem;position: absolute;}
.dcm{left: 1.8rem;width: 2rem;position: absolute;top: 2rem;}
.kit img{width: 2.3rem;}
.dcm img{width: 2rem;}
.count{position: absolute;bottom: 0;left: .4rem;}
.bird{background: url(../images/bird.gif);width: 2.24rem;height: 1.86rem;position: absolute;background-size: 100% 100%;left: 2.5rem;top: .5rem;}
.ly{position: absolute;right: 0;top: 0;background: url(../images/ly.jpg);width: 2.52rem;height: 3.47rem;background-size: 100% 100%;}
.ly2{position: absolute;left: 0;top: 0;background: url(../images/ly2.jpg);width: 2.58rem;height: 3.12rem;background-size: 100% 100%;}
.copy{position: absolute;bottom: .5rem;left: 0;width: 7.5rem;text-align: center;font-size: .28rem;color: #066706;}

.cover_butter{background: url(../images/cover_butter.gif) top center no-repeat;width: 3.85rem;height: 3.15rem;position: absolute;background-size: cover;top: 2.7rem;right: 2rem;}
.curtain_l{background: url(../images/curtain_l.png) top center no-repeat;;width: 2.63rem;height: 6.14rem;position: absolute;left: 0;background-size: cover;top: .6rem;z-index: 20;}
.curtain_r{background: url(../images/curtain_r.png) top center no-repeat;;width: 2.26rem;height: 6.16rem;position: absolute;right: 0;background-size: cover;top: .6rem;z-index: 20;}
.door{width: 2.88rem;position: absolute;top: 1.43rem;height: 4.61rem;opacity: .8;filter: alpha(opacity=80);z-index: 15;}
.door_l{background: url(../images/cover_l.png) top center no-repeat;left: .89rem;background-size: cover;}
.door_r{background: url(../images/cover_r.png) top center no-repeat;right: .88rem;background-size: cover;}

.finger{position: absolute;height: 1.68rem;width: 3rem;right: 0;top: 9rem;z-index: 20;}
.fingerImg{background: url(../images/finger.png);width: 1.15rem;height: 1.68rem;background-size: 100% 100%;position: absolute;left: 1rem;z-index: 5;}
.finger .cirlce{width: .3rem;height: .3rem;border-radius: .3rem;border: 1px solid green;position: absolute;z-index: 2;}
.finger .cirlce1,.finger .cirlce3{left: .9rem;top: .3rem;}
.finger .cirlce2,.finger .cirlce4{top: -.1rem;right: 1.45rem;}
.finger .cirlce1,.finger .cirlce2{-webkit-animation: cirlce1 2s linear infinite;animation: cirlce1 2s linear infinite;}
.finger .cirlce3{-webkit-animation: cirlce3 .5s linear infinite;animation: cirlce3 .5s linear infinite;}
.finger .cirlce4{-webkit-animation: cirlce4 .5s linear infinite;animation: cirlce4 .5s linear infinite;}


.cover.on .door_l{animation: doorl 2s linear .2s forwards;-webkit-animation: doorl 2s linear .2s forwards;transform-origin: left center;-webkit-transform-origin: left center;}
.cover.on .door_r{animation: doorr 2s linear .2s forwards;-webkit-animation: doorr 2s linear .2s forwards;transform-origin: right center;-webkit-transform-origin: right center;}

.windBells{display: none;background: url(../images/bg_2.jpg) top center no-repeat;background-size: 100% 100%;opacity: 0;filter: alpha(opacity=0);}
.wind_bell{transform-origin: center top;-webkit-transform-origin: center top;background:url(../images/wind_bell.png) center bottom no-repeat;position: absolute;width: 2rem;left: 3rem;height: 5rem;top: 3rem;background-size: 100% auto;-webkit-animation: rotate 1s linear;animation: rotate 1s linear;}

.bell{position: absolute;top: 0;transform-origin: top center;-webkit-transform-origin: top center;}
.bell1{background: url(../images/bell1.png) top center no-repeat;left: .53rem;background-size: 100% 100%;width: .68rem;height: 6.14rem;}
.bell2{background: url(../images/bell2.png) top center no-repeat;left: 1.41rem;background-size: 100% 100%;width: .66rem;height: 5.85rem;}
.bell3{background: url(../images/bell3.png) top center no-repeat;left: 2.2rem;background-size: 100% 100%;width: .74rem;height: 5.9rem;}
.bell4{background: url(../images/bell4.png) top center no-repeat;left: 3.3rem;background-size: 100% 100%;width: .82rem;height: 7.4rem;}
.bell5{background: url(../images/bell5.png) top center no-repeat;left: 4.5rem;background-size: 100% 100%;width: .68rem;height: 4.72rem;}
.bell6{background: url(../images/bell6.png) top center no-repeat;left: 5.2rem;background-size: 100% 100%;width: 1.13rem;height: 6.66rem;}
.bell7{background: url(../images/bell7.png) top center no-repeat;left: 6.4rem;background-size: 100% 100%;width: .58rem;height: 5.2rem;}

.windBells.on .bell1{-webkit-animation: rotate 2s linear infinite;animation: rotate 2s linear infinite;}
.windBells.on .bell2{-webkit-animation: rotate 2s -.5s linear infinite;animation: rotate 2s -.5s linear infinite;}
.windBells.on .bell3{-webkit-animation: rotate 2s linear infinite;animation: rotate 2s linear infinite;}
.windBells.on .bell4{-webkit-animation: rotate4 2.5s linear infinite;animation: rotate4 2.5s linear infinite;}
.windBells.on .bell5{-webkit-animation: rotate 2s linear infinite;animation: rotate 2s linear infinite;}
.windBells.on .bell6{-webkit-animation: rotate 2s -.5s linear infinite;animation: rotate 2s -.5s linear infinite;}
.windBells.on .bell7{-webkit-animation: rotate4 2.5s linear infinite;animation: rotate4 2.5s linear infinite;}

.tip{position: absolute;background: url(../images/shake.png);width: 2.57rem;height: 1.06rem;background-size: 100% 100%;bottom: 3.3rem;right: .5rem;-webkit-animation: rotate 2s linear infinite;animation: rotate 2s linear infinite;display: none;}
.fly{position: absolute;background: url(../images/fly.gif);width: 5.55rem;height: 4rem;bottom: 1rem;left: -.5rem;background-size: 100% 100%;}
.leaf{position: absolute;width: .8rem;height: 1.2rem;background: url(../images/leaf.png);background-size: 100% 100%;top: 2.5rem;left: 3rem;display: none;}
.leaf.on{-webkit-animation: leaf 2.5s linear forwards;animation: leaf 2.5s linear forwards;}

.letter{position: absolute;left: 0;bottom: -4.55rem;width: 7.5rem;height: 4.55rem;}

.news{width: 6.5rem;background: #fff;position: absolute;left: .5rem;top: 1.55rem;height: 7rem;padding-bottom: 3rem;z-index: 30;display: none;}
.news.on{-webkit-animation: news 2s linear forwards;animation: news 2s linear forwards;}
.news1{top: -7rem;}
.news1.on{-webkit-animation: fyy 1s linear forwards;animation: fyy 1s linear forwards;}
.text{width: 5.5rem;margin-left: .5rem;font-size: .3rem;line-height: .56rem;}
.text p{text-indent: 2em;}
.text h2{font-size: .34rem;line-height: .56rem;margin-bottom: .2rem;color: #e30414;margin-top: .2rem;}
.icon{position: absolute;right: 0;background: width: 1.07rem;height: 1.05rem;background:url(../images/icon.png);background-size: 100% 100%;left: 0;top: -1.05rem;}
.letter_back{position: absolute;background: url(../images/letter_back.png) top center;width: 7.5rem;height: 1.38rem;background-size: 100% 100%;top: 0;left: 0;z-index: 20;}
.letter_fornt{position: absolute;background: url(../images/letter_fornt.png);width: 7.5rem;height: 4.55rem;background-size: 100% 100%;top: 0;left: 0;z-index: 40;}
.btn{position: absolute;width: 1.8rem;height: .6rem;background: #fff;border-radius: .15rem;top: 2.6rem;color: #1e8143;z-index: 600;text-align: center;line-height: .6rem;font-size: .3rem;}
.share{left: .5rem;}
.reload{right: .5rem;}

.mask{z-index: 10000;background: rgba(0,0,0,.6);display: none;opacity: 0;}
.mask_bg{background: url(../images/bg_5.png) top center;background-size: 100% 100%;}



@keyframes fyy {
  0% {
    transform:translate(0rem,0rem);
  }
  100% {
    transform:translate(0rem,8.5rem);
  }
}
@-webkit-keyframes fyy {
  0% {
  }
  100% {
    transform:translate(0rem,8.5rem);
  }
}

@keyframes cirlce1 {
  0% {
    transform:scale(0);
  }
  100% {
    transform:scale(1.2);
  }
}
@-webkit-keyframes cirlce1 {
   0% {
    -webkit-transform:scale(0);
  }
  100% {
    -webkit-transform:scale(1.2);
  }
}

@keyframes cirlce3 {
  0% {
    transform:translate(0rem,0rem);
  }
  70%{
    transform:translate(-.5rem,.7rem);
  }
  100% {
    transform:translate(-.8rem,1rem);
  }
}
@-webkit-keyframes cirlce3 {
   0% {
    -webkit-transform:translate(0rem,0rem);
  }
  70%{
    -webkit-transform:translate(-.5rem,.7rem);
  }
  100% {
    -webkit-transform:translate(-.8rem,1rem);
  }
}

@keyframes cirlce4 {
  0% {
    transform:translate(0rem,0rem);
  }
  70%{
    transform:translate(.5rem,-.7rem);
  }
  100% {
    transform:translate(.8rem,-1rem);
  }
}
@-webkit-keyframes cirlce4 {
  0% {
    -webkit-transform:translate(0rem,0rem);
  }
  70%{
    -webkit-transform:translate(.5rem,-.7rem);
  }
  100% {
    -webkit-transform:translate(.8rem,-1rem);
  }
}

@keyframes letter {
  0% {
    transform:translate(0rem,0rem);
  }
  100% {
    transform:translate(0rem,4.55rem);
  }
}
@-webkit-keyframes letter {
  0% {
  }
  100% {
    transform:translate(0rem,4.55rem);
  }
}

@keyframes news {
  0% {
    transform: rotate(0deg) scale(0);
  }
  100% {
    transform: rotate(720deg) scale(1);
  }
}
@-webkit-keyframes news {
  0% {
    -webkit-transform: rotate(0deg) scale(0);
  }
  100% {
    -webkit-transform: rotate(720deg) scale(1);
  }
}

@keyframes doorl {
  0% {
    transform: rotateY(0deg);
  }
  100% {
    transform: rotateY(-120deg);
  }
}
@-webkit-keyframes doorl {
  0% {
    -webkit-transform: rotateY(0deg);
  }
  100% {
    -webkit-transform: rotateY(-120deg);
  }
}

@keyframes doorr {
  0% {
    transform: rotateY(0deg);
  }
  100% {
    transform: rotateY(120deg);
  }
}
@-webkit-keyframes doorr {
  0% {
    -webkit-transform: rotateY(0deg);
  }
  100% {
    -webkit-transform: rotateY(120deg);
  }
}

@keyframes leaf {
  0% {
    transform: rotateY(0deg) translateY(0rem);
  }
  100% {
    transform: rotateY(1080deg) translateY(4rem);
  }
}
@-webkit-keyframes leaf {
  0% {
    -webkit-transform: rotateY(0deg) translateY(0rem);
  }
  100% {
    -webkit-transform: rotateY(1080deg) translateY(4rem);
  }
}

@keyframes tip {
  0% {
    transform: rotateY(30deg);
  }
  100% {
    transform: rotateY(120deg);
  }
}
@-webkit-keyframes tip {
  0% {
    -webkit-transform: rotateY(30deg);
  }
  100% {
    -webkit-transform: rotateY(120deg);
  }
}

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

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

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

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