@charset "UTF-8";
/* CSS Document */
/**
 *Description：微信大屏幕婚庆版
 *Date       ：2015.06.040
 *Author     ：dongyg
**/

html, body, div, p, span, label, img, a, ol, ul, dl, dt, dd, li, table, tr, td, th, tbody, thead, tfoot, form, fieldset, legent, h1, h2, h3, h4, h5, h6, strong, b, em, blockquote, cite, pre, code, hr, br, input, button, textarea,article, aside, details, figcaption, figure, footer, header, group, menu, nav, section { padding:0px; margin:0px; }
a { border:0 none; cursor:pointer; }
ol, ul { list-style-type:none; }
em,i{ font-style:normal;}
a:link, a:visited { text-decoration:none; }
.clearfix:after{clear:both; content:""; display:block; height:0; visibility:hidden; line-height:0;}
.clearfix { zoom:1; }
.clear { clear:both; height:0; width:0; display:block; visibility:hidden; overflow:hidden;}
.left { float:left; display:inline; }
.right { float:right; display:inline; }
.block{ display:block;}
.hidden{ display:none;}
h1, h2, h3, h4, h5, h6 { font-weight:normal; font-size:1em; }

body{ font-family:"Microsoft yahei", "SimHei"; color:#313131;}


.container{ width:100%;height:100%; position:absolute; left:0px; top:0px;}

.shu{ 
  background: url(../images/shu.png) center bottom no-repeat;
  background-size: cover;
  width: 5.3rem;
  height: 6.35rem;
  position: absolute;
  left: 50%;
  bottom: 1rem;
}
/*头像列表*/
.avatar-list{ 
  width: 5.3rem;
  height: 5.35rem; 
  position:relative;
}
.avatar-list li{ position:absolute;}
.avatar-list li .txt{ display:none; width: 3.5rem; height: 0.7rem; overflow: hidden; border: 0.02rem solid #fbdbcb; -moz-border-radius:10px; border-radius: 0.1rem; background:rgba(252,208,145,0.9); position:absolute; top: 0.21rem; left: 1.4rem;}
.avatar-list li .txt .inner{ width: 2.7rem; height: 0.7rem; overflow:hidden; position:relative; margin:0 0.2rem 0 0.62rem;}
.avatar-list li .txt em{ display:block; background:url(../images/txt-ico.png) no-repeat; background-size: cover; width: 0.78rem;; height:0.7rem; position:absolute; left:0px; top:0px; z-index:1;}
.avatar-list li .txt h4{ display:inline-block; width: auto; height:0.7rem; font-size: 0.3rem; line-height:0.7rem; white-space:pre; padding-right: 0.25rem;}
.avatar-list li.big3{ -webkit-transform:scale(0.6);}
.avatar-list li.big2{ -webkit-transform:scale(0.5);}
.avatar-list li.big1{ -webkit-transform:scale(0.4);}
.avatar-list li.on{ z-index:1;}
.avatar-list li.on .txt,.avatar-list li.ava-new .txt{ display:block;}
.ava-new{ left: 0.24rem; top: 1.47rem; z-index:100;}
.ava-new .box-inner{ -webkit-transform:scale(0.9) rotate(-15deg);}
.ava1{ left: 0.735rem; top: 1.295rem; -webkit-transform:scale(0.6);}
.ava1 .box{ -webkit-transform:scale(0.8) rotate(-20deg);}
.ava2{ left: 1.365rem; top: 0.98rem; -webkit-transform:scale(0.4);}
.ava2 .box-inner{ -webkit-transform:scale(0.8) rotate(10deg);}
.ava3{ left:1.785rem; top: 0.42rem; -webkit-transform:scale(0.4);}
.ava4{ left: 2.17rem; top: 1.08rem; -webkit-transform:scale(0.6);}
.ava5{ left:3.05rem; top: 0.56rem; -webkit-transform:scale(0.5);}
.ava5 .box-inner{ -webkit-transform:scale(0.8) rotate(-35deg);}
.ava6{ left: 3.9rem; top: 0.7rem; -webkit-transform:scale(0.6);}
.ava6 .box-inner{ -webkit-transform:scale(0.9) rotate(15deg);}
.avatar-list li.ava6 .txt{ position:absolute; right: 1.26rem;; left:auto;}
.ava7{ left: 1.58rem; top: 1.65rem; -webkit-transform:scale(0.5);}
.ava8{ left: 2.38rem; top: 1.6rem; -webkit-transform:scale(0.4);}
.ava8 .box-inner{ -webkit-transform:scale(0.8) rotate(-15deg);}
.ava9{ left: 2.87rem; top: 1.7rem; -webkit-transform:scale(0.5);}
.ava10{ left: 3.78rem; top: 1.7rem; -webkit-transform:scale(0.4);}
.avatar-list li.ava10 .txt{ position:absolute; right: 1.26rem; left:auto;}
.ava11{ left: 4.3rem; top: 1.9rem; -webkit-transform:scale(0.6);}
.ava11 .box-inner{ -webkit-transform:scale(0.9) rotate(-15deg);}
.avatar-list li.ava11 .txt{ position:absolute; right: 1.4rem; left:auto;}
.ava12{ left: 3.08rem; top: 2rem; -webkit-transform:scale(0.6);}
.ava12 .box-inner{ -webkit-transform:scale(0.9) rotate(25deg);}
.ava13{ left: 4.165rem; top: 2.625rem; -webkit-transform:scale(0.4);}
.ava13 .box-inner{ -webkit-transform:scale(0.8) rotate(40deg);}
.avatar-list li.ava13 .txt{ position:absolute; right: 1.12rem; left:auto;}
.ava14{ left: 3.57rem; top: 3rem; -webkit-transform:scale(0.4);}
.avatar-list li.ava14 .txt{ position:absolute; right: 1.3rem; left:auto;}
.ava15{ left: 2.73rem; top: 2.73rem; -webkit-transform:scale(0.5);}
.ava15 .box-inner{ -webkit-transform:scale(0.8) rotate(-25deg);}
.ava16{ left: 2.17rem; top: 2.366rem; -webkit-transform:scale(0.5);}
.ava16 .box-inner{ -webkit-transform:scale(0.8) rotate(25deg);}
.ava17{ left: 1.61rem; top: 2.338rem; -webkit-transform:scale(0.6);}
.ava17 .box-inner{ -webkit-transform:scale(0.8) rotate(25deg);}
.ava18{ left:0.98rem; top: 1.778rem; -webkit-transform:scale(0.4);}
.ava18 .box-inner{ -webkit-transform:scale(0.8) rotate(25deg);}
.ava19{ left: 0.4rem; top: 2.19rem; -webkit-transform:scale(0.6);}
.ava20{ left: 1.26rem; top: 2.828rem; -webkit-transform:scale(0.4);}
.ava20 .box-inner{ -webkit-transform:scale(0.8) rotate(-40deg);}
.ava21{ left: 1.61rem; top: 3rem; -webkit-transform:scale(0.5);}
.ava21 .box-inner{ -webkit-transform:scale(0.8) rotate(40deg);}
.ava22{ left: 1.19rem; top: 3.535rem; -webkit-transform:scale(0.5);}
.ava23{ left: 2.38rem; top: 3.234rem; -webkit-transform:scale(0.6);}
.ava23 .box-inner{ -webkit-transform:scale(0.8) rotate(20deg);}


.box-inner{ width: 1.24rem; height: 1.14rem; padding: 0.1rem; background:url(../images/heart-bg.png) center -0.05rem no-repeat; -moz-background-size:100% auto; background-size:100% auto; overflow:hidden; position:relative;-webkit-transform:scale(0.8);}
.box1{ width: 0.7rem; height: 0.35rem; overflow:hidden; -moz-border-radius: 0.35rem 0.35rem 0 0; border-radius:0.35rem 0.35rem 0 0; -webkit-transform:rotate(-45deg); position:absolute; left:-0.06rem; top: 0.14rem; border: 0.02rem solid #fbdbcb; border-bottom: none;}
.box1 img{ width: 1.2rem; -webkit-transform:rotate(45deg); position:absolute; left:-0.2rem; top: 0.05rem;}
.box2{ width: 0.7rem; height: 0.35rem; overflow:hidden; -moz-border-radius: 0.35rem 0.35rem 0 0; border-radius: 0.35rem 0.35rem 0 0; -webkit-transform:rotate(45deg); position:absolute; left: 0.666rem; top: 0.14rem; border-left: 0.02rem solid #fbdbcb; border-bottom: none;}
.box2 img{ width: 1.2rem; -webkit-transform:rotate(-45deg); position:absolute; right:-0.2rem; top: 0.05rem;}
.box3{ width: 0.7rem;; height: 0.7rem;; overflow:hidden; -webkit-transform:rotate(45deg); position:absolute; left: 0.33rem; top: 0.35rem; border-right: 0.02rem solid #fbdbcb; border-bottom: 0.02rem solid #fbdbcb;}
.box3 img{ width: 1.2rem; -webkit-transform:rotate(-45deg); position:absolute; bottom:-0.19rem; left:-0.3rem;}


.avatar-list li.on .txt,.ava-new {
  -webkit-animation-name: zoomIn ;
  -moz-animation-name: zoomIn;
       animation-name: zoomIn;
  -webkit-animation-duration: 2s;
  -moz-animation-duration: 2s;
       animation-duration: 2s;
  -webkit-animation-fill-mode: both;
  -moz-animation-fill-mode: both;
       animation-fill-mode: both;
  -webkit-animation-iteration-count: infinite;
  -moz-animation-iteration-count: infinite;
       animation-iteration-count: infinite;
  -webkit-animation-iteration-count:1;
  -moz-animation-iteration-count:1;
       animation-iteration-count:1;
}
.ava-new{-webkit-animation-duration: 1s;
  -moz-animation-duration: 1s;
     animation-duration: 1s;}
@-webkit-keyframes zoomIn {
  0% {
    opacity: 0;
    -webkit-transform: scale3d(.3, .3, .3);
    transform: scale3d(.3, .3, .3);
  }
  20% {
    opacity: 1;
  }
}
@-moz-keyframes zoomIn {
  0% {
    opacity: 0;
    -webkit-transform: scale3d(.3, .3, .3);
    -moz-transform: scale3d(.3, .3, .3);
         transform: scale3d(.3, .3, .3);
  }

  20% {
    opacity: 1;
  }

}
@keyframes zoomIn {
  0% {
    opacity: 0;
    -webkit-transform: scale3d(.3, .3, .3);
    -moz-transform: scale3d(.3, .3, .3);
         transform: scale3d(.3, .3, .3);
  }

  20% {
    opacity: 1;
  }

}

.avatar-list li.on .box{
  -webkit-animation-name: bounceIn2 ;
  -moz-animation-name: bounceIn2;
       animation-name: bounceIn2;
  -webkit-animation-duration: 2s;
  -moz-animation-duration: 2s;
       animation-duration: 2s;
  -webkit-animation-fill-mode: both;
  -moz-animation-fill-mode: both;
       animation-fill-mode: both;
  -webkit-animation-iteration-count: infinite;
  -moz-animation-iteration-count: infinite;
       animation-iteration-count: infinite;
  -webkit-animation-iteration-count:1;
  -moz-animation-iteration-count:1;
       animation-iteration-count:1;
}
@-webkit-keyframes bounceIn2 {
  0%, 20%, 40%, 60%, 80%, 100% {
    -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }

  0% {
    opacity: 1;
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  50% {
  opacity: 1;
    -webkit-transform: scale3d(1.4, 1.4, 1.4);
    transform: scale3d(1.4, 1.4, 1.4);
  }

  100% {
    opacity: 1;
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}
@-webkit-keyframes bounceIn {
  0%, 20%, 40%, 60%, 80%, 100% {
    -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }

  0% {
    opacity: 0;
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  25% {
    opacity: .8;
    -webkit-transform: scale3d(.8, .8, .8);
    transform: scale3d(.8, .8, .8);
  }

  50% {
  opacity: 1;
    -webkit-transform: scale3d(1.2, 1.2, 1.2);
    transform: scale3d(1.2, 1.2, 1.2);
  }

  75% {
    opacity: .8;
    -webkit-transform: scale3d(.8, .8, .8);
    transform: scale3d(.8, .8, .8);
  }

  100% {
    opacity: 1;
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}
@-moz-keyframes bounceIn {
  0%, 20%, 40%, 60%, 80%, 100% {
    -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    -moz-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
         transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }


  0% {
    opacity: 0;
    -webkit-transform: scale3d(.3, .3, .3);
    -moz-transform: scale3d(.3, .3, .3);
         transform: scale3d(.3, .3, .3);
  }

  50% {
  opacity: 1;
    -webkit-transform: scale3d(1.2, 1.2, 1.2);
    -moz-transform: scale3d(1.2, 1.2, 1.2);
         transform: scale3d(1.2, 1.2, 1.2);
  }

  100% {
    opacity: 1;
    -webkit-transform: scale3d(0.8, 0.8, 0.8);
    -moz-transform: scale3d(0.8, 0.8, 0.8);
         transform: scale3d(0.8, 0.8, 0.8);
  }
}
@keyframes bounceIn {
  0%, 20%, 40%, 60%, 80%, 100% {
    -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    -moz-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
         transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }


  0% {
    opacity: 0;
    -webkit-transform: scale3d(.3, .3, .3);
    -moz-transform: scale3d(.3, .3, .3);
         transform: scale3d(.3, .3, .3);
  }

  50% {
  opacity: 1;
    -webkit-transform: scale3d(1.2, 1.2, 1.2);
    -moz-transform: scale3d(1.2, 1.2, 1.2);
         transform: scale3d(1.2, 1.2, 1.2);
  }

  100% {
    opacity: 1;
    -webkit-transform: scale3d(0.8, 0.8, 0.8);
    -moz-transform: scale3d(0.8, 0.8, 0.8);
         transform: scale3d(0.8, 0.8, 0.8);
  }
}

.heart{     
  width: 100%;
  height: 1.8rem;
  background: url(../images/15.png) no-repeat;
  background-size: cover;
  position: absolute;
  bottom: 1.1rem;
}
.heartAni{ -webkit-animation:heartS 4s infinite linear;-moz-animation:heartS 4s infinite linear;animation:heartS 4s infinite linear;}
@-webkit-keyframes heartS {
  0%{ background-image:url(../images/15.png);}
  2.5%{ background-image:url(../images/16.png);}
  5%{ background-image:url(../images/17.png);}
  7.5%{ background-image:url(../images/18.png);}
  10%{ background-image:url(../images/19.png);}
  12.5%{ background-image:url(../images/20.png);}
  15%{ background-image:url(../images/21.png);}
  17.5%{ background-image:url(../images/22.png);}
  20%{ background-image:url(../images/23.png);}
  22.5%{ background-image:url(../images/24.png);}
  25%{ background-image:url(../images/25.png);}
  27.5%{ background-image:url(../images/26.png);}
  30%{ background-image:url(../images/27.png);}
  32.5%{ background-image:url(../images/28.png);}
  35%{ background-image:url(../images/29.png);}
  37.5%{ background-image:url(../images/30.png);}
  40%{ background-image:url(../images/31.png);}
  42.5%{ background-image:url(../images/32.png);}
  45%{ background-image:url(../images/33.png);}
  47.5%{ background-image:url(../images/34.png);}
  50%{ background-image:url(../images/35.png);}
  52.5%{ background-image:url(../images/34.png);}
  55%{ background-image:url(../images/33.png);}
  57.5%{ background-image:url(../images/32.png);}
  60%{ background-image:url(../images/31.png);}
  62.5%{ background-image:url(../images/30.png);}
  65%{ background-image:url(../images/29.png);}
  67.5%{ background-image:url(../images/28.png);}
  70%{ background-image:url(../images/27.png);}
  72.5%{ background-image:url(../images/26.png);}
  75%{ background-image:url(../images/25.png);}
  77.5%{ background-image:url(../images/24.png);}
  80%{ background-image:url(../images/23.png);}
  82.5%{ background-image:url(../images/22.png);}
  85%{ background-image:url(../images/21.png);}
  87.5%{ background-image:url(../images/20.png);}
  90%{ background-image:url(../images/19.png);}
  92.5%{ background-image:url(../images/18.png);}
  95%{ background-image:url(../images/17.png);}
  97.5%{ background-image:url(../images/16.png);}
  100%{ background-image:url(../images/15.png);}
}
@-moz-keyframes heartS {
  0%{ background-image:url(../images/15.png);}
  2.5%{ background-image:url(../images/16.png);}
  5%{ background-image:url(../images/17.png);}
  7.5%{ background-image:url(../images/18.png);}
  10%{ background-image:url(../images/19.png);}
  12.5%{ background-image:url(../images/20.png);}
  15%{ background-image:url(../images/21.png);}
  17.5%{ background-image:url(../images/22.png);}
  20%{ background-image:url(../images/23.png);}
  22.5%{ background-image:url(../images/24.png);}
  25%{ background-image:url(../images/25.png);}
  27.5%{ background-image:url(../images/26.png);}
  30%{ background-image:url(../images/27.png);}
  32.5%{ background-image:url(../images/28.png);}
  35%{ background-image:url(../images/29.png);}
  37.5%{ background-image:url(../images/30.png);}
  40%{ background-image:url(../images/31.png);}
  42.5%{ background-image:url(../images/32.png);}
  45%{ background-image:url(../images/33.png);}
  47.5%{ background-image:url(../images/34.png);}
  50%{ background-image:url(../images/35.png);}
  52.5%{ background-image:url(../images/34.png);}
  55%{ background-image:url(../images/33.png);}
  57.5%{ background-image:url(../images/32.png);}
  60%{ background-image:url(../images/31.png);}
  62.5%{ background-image:url(../images/30.png);}
  65%{ background-image:url(../images/29.png);}
  67.5%{ background-image:url(../images/28.png);}
  70%{ background-image:url(../images/27.png);}
  72.5%{ background-image:url(../images/26.png);}
  75%{ background-image:url(../images/25.png);}
  77.5%{ background-image:url(../images/24.png);}
  80%{ background-image:url(../images/23.png);}
  82.5%{ background-image:url(../images/22.png);}
  85%{ background-image:url(../images/21.png);}
  87.5%{ background-image:url(../images/20.png);}
  90%{ background-image:url(../images/19.png);}
  92.5%{ background-image:url(../images/18.png);}
  95%{ background-image:url(../images/17.png);}
  97.5%{ background-image:url(../images/16.png);}
  100%{ background-image:url(../images/15.png);}
}
@keyframes heartS {
  0%{ background-image:url(../images/15.png);}
  2.5%{ background-image:url(../images/16.png);}
  5%{ background-image:url(../images/17.png);}
  7.5%{ background-image:url(../images/18.png);}
  10%{ background-image:url(../images/19.png);}
  12.5%{ background-image:url(../images/20.png);}
  15%{ background-image:url(../images/21.png);}
  17.5%{ background-image:url(../images/22.png);}
  20%{ background-image:url(../images/23.png);}
  22.5%{ background-image:url(../images/24.png);}
  25%{ background-image:url(../images/25.png);}
  27.5%{ background-image:url(../images/26.png);}
  30%{ background-image:url(../images/27.png);}
  32.5%{ background-image:url(../images/28.png);}
  35%{ background-image:url(../images/29.png);}
  37.5%{ background-image:url(../images/30.png);}
  40%{ background-image:url(../images/31.png);}
  42.5%{ background-image:url(../images/32.png);}
  45%{ background-image:url(../images/33.png);}
  47.5%{ background-image:url(../images/34.png);}
  50%{ background-image:url(../images/35.png);}
  52.5%{ background-image:url(../images/34.png);}
  55%{ background-image:url(../images/33.png);}
  57.5%{ background-image:url(../images/32.png);}
  60%{ background-image:url(../images/31.png);}
  62.5%{ background-image:url(../images/30.png);}
  65%{ background-image:url(../images/29.png);}
  67.5%{ background-image:url(../images/28.png);}
  70%{ background-image:url(../images/27.png);}
  72.5%{ background-image:url(../images/26.png);}
  75%{ background-image:url(../images/25.png);}
  77.5%{ background-image:url(../images/24.png);}
  80%{ background-image:url(../images/23.png);}
  82.5%{ background-image:url(../images/22.png);}
  85%{ background-image:url(../images/21.png);}
  87.5%{ background-image:url(../images/20.png);}
  90%{ background-image:url(../images/19.png);}
  92.5%{ background-image:url(../images/18.png);}
  95%{ background-image:url(../images/17.png);}
  97.5%{ background-image:url(../images/16.png);}
  100%{ background-image:url(../images/15.png);}
}

.heart3{ width: 0.28rem; height: 0.53rem; position:absolute; left: 0.19rem; bottom: 0.36rem;}
.heart3 span{ display:block; background-image:url(../images/heart2.png); background-repeat:no-repeat; position:absolute;}
.t10{ width:21px; height:19px; background-position:right bottom; right:0px; bottom:0px; -webkit-animation:eart10 4s infinite linear;-webkit-animation-iteration-count:1;}
.t11{ width:9px; height:9px; background-position:-28px -32px; left:28px; top:32px; -webkit-animation:eart11 4s infinite linear;-webkit-animation-iteration-count:1;}
.t12{ width:15px; height:13px; background-position:left top; left:0px; top:0px; -webkit-animation:eart12 4s infinite linear;-webkit-animation-iteration-count:1;}
@-webkit-keyframes eart10 {
  0%{ opacity:0;}
  10%{ opacity:1;}
}
@-webkit-keyframes eart11 {
  0%,10%{ opacity:0;}
  20%{ opacity:1;}
}
@-webkit-keyframes eart12 {
  0%,20%{ opacity:0;}
  30%{ opacity:1;}
}


.wrap{ width:100vw; height:100vh; background:url(../images/bg-2000-828.jpg) center top no-repeat; -moz-background-size:cover; background-size:cover; overflow:hidden;}
@media screen and (max-width:1024px){
  .wrap{ width:100vw; background-image:url(../images/bg-1000-828.jpg);}
  .shu{ background-image:url(../images/shu2.png); margin-left:-2.2rem;}
  .heart3{ display:block;}
}