/* .index{
  padding-bottom: 0.2rem;
} */
/* 1.甜的心情 */
.sweet{
  background: #fafafa;
  text-align: center;
  padding: 0.55rem 0;
}
.sweet .all-text{
  color: #5b5b5b;
}
.sweet .one-title{
  color: #5b5b5b;
  margin: 0.2rem 0 0.1rem 0;
}
.sweet .cat{
  margin: 0.24rem auto 0;
}
.sweet .cat img{
  width: 1rem;
}
/* 3~7高度 */
.cake{
  padding-top: 0.55rem;
  height: 4.9rem;
  position: relative;
}
.cake a{
  height: 100%;
}
.cake .content{
  text-align: center;
  margin-bottom: 0.3rem;
}
.cake .content .one-title{
  margin-bottom: .1rem;
}
.cake .content .two-title{
  margin-bottom: .05rem;
}
.cake .content .all-text{
  color: #5b5b5b;
}
.cake .content .btn, .sweet .content .btn{
  display: inline-block;
  background-color: #FFD100;
  font-size: 12px;
  color: #0e040c;
  border-radius: 14px;
  padding-left: 16px;
  padding-right: 34px;
  line-height: 28px;
  margin-top: .15rem;
  position: relative;
  z-index: 1;
}
.cake .content .btn i, .sweet .content .btn i{
  display: inline-block;
  width: 24px;
  height: 24px;
  background-color: #fff;
  border-radius: 50%;
  position: absolute;
  right: 2px;
  top: 2px;
}
/* 动画 */
.anim{
  position: absolute;
  animation-duration: 1s;
  animation-delay: 0.1s;
  animation-timing-function: linear;
  animation-fill-mode: both;
}
.anim-line{
  animation-delay: 0.2s;
  overflow: hidden;
}
/* 3. inbox */
.inbox{
  background: url(../img/index/inbox.jpg) no-repeat center center;
  background-size: cover;
}
.inbox-a1{
  width: 0.43rem;
  bottom: 2.5rem;
  right: 0.3rem;
  /* animation-name: inbox-a1; */
}
@keyframes inbox-a1{
	from {
    bottom: 1.9rem;
    right: 1.4rem;
    transform: rotate(-180deg);
    opacity: 0;
  }
	to {
    bottom: 2.5rem;
    right: 0.3rem;
    transform: rotate(0deg);
    opacity: 1;
  }
}
.inbox-a2{
  width: 0.33rem;
  bottom: 2rem;
  left: 0.4rem;
  /* animation-name: inbox-a2; */
}
@keyframes inbox-a2{
	from {
    bottom: 1.95rem;
    left: 1.45rem;
    transform: rotate(-180deg);
    opacity: 0.1;
  }
	to {
    bottom: 2rem;
    left: 0.4rem;
    transform: rotate(0deg);
    opacity: 1;
  }
}
.inbox-a3{
  width: 0.57rem;
  bottom: 0.4rem;
  right: 0.4rem;
  /* animation-name: inbox-a3; */
}
@keyframes inbox-a3{
	from {
    bottom: 1.15rem;
    right: 1.4rem;
    transform: rotate(-180deg);
    opacity: 0.1;
  }
	to {
    bottom: 0.4rem;
    right: 0.4rem;
    transform: rotate(0deg);
    opacity: 1;
  }
}
.inbox-a4{
  bottom: 2.1rem;
  left: 2.32rem;
  /* animation-name: inbox-a4; */
}
.inbox-a4 img{
  width: 0.57rem;
}
@keyframes inbox-a4{
	from {
    width: 0;
    opacity: 0.1;
  }
	to {
    width: 0.57rem;
    opacity: 1;
  }
}
.inbox-a5{
  bottom: 2.15rem;
  right: 2.3rem;
  /* animation-name: inbox-a5; */
}
.inbox-a5 img{
  width: 0.62rem;
}
@keyframes inbox-a5{
	from {
    width: 0;
    opacity: 0.1;
  }
	to {
    width: 0.62rem;
    opacity: 1;
  }
}
.inbox-a6{
  top: 3.62rem;
  right: 1.2rem;
  transform: rotate(-25deg);
  /* animation-name: inbox-a6; */
}
.inbox-a6 img{
  height: 0.72rem;
  transform: rotate(140deg);
}
@keyframes inbox-a6{
	from {
    height: 0;
    opacity: 0.1;
  }
	to {
    height: 0.72rem;
    opacity: 1;
  }
}
/* 4. 芝士条 */
.cheese{
  background: url(../img/index/cheese.jpg) no-repeat center center;
  background-size: cover;
}
.cheese-a1{
  width: 0.46rem;
  position: absolute;
  top: 2.2rem;
  right: 0.7rem;
  animation-duration: 1.5s;
  animation-timing-function: ease;
  /* animation-name: cheese-a1; */
}
@keyframes cheese-a1{
	0% {
    top: 1.6rem;
    right: 0.2rem;
    opacity: 0.1;
    transform: rotate(180deg);
  }
  60%{
    top: 2.2rem;
    right: 0.7rem;
    opacity: 1;
    transform: rotate(0deg);
  }
  80%{
    top: 2rem;
    right: 0.7rem;
  }
	100% {
    top: 2.2rem;
    right: 0.7rem;
  }
}
.cheese-a2{
  width: 0.45rem;
  position: absolute;
  bottom: 0.7rem;
  left: 0.5rem;
  transform: rotate(5deg);
  animation-duration: 1.8s;
  animation-timing-function: ease;
  /* animation-name: cheese-a2; */
}
@keyframes cheese-a2{
	0% {
    bottom: 0.2rem;
    left: 0.1rem;
    opacity: 0.1;
    transform: rotate(90deg);
  }
  60%{
    bottom: 0.7rem;
    left: 0.5rem;
    opacity: 1;
    transform: rotate(5deg);
  }
  80%{
    bottom: 0.9rem;
    left: 0.5rem;
  }
	100% {
    bottom: 0.7rem;
    left: 0.5rem;
  }
}
/* 5. 好酥芙 */
.snow{
  background: url(../img/index/snow.jpg) no-repeat center center;
  background-size: cover;
  overflow: hidden;
}
.snow-a1{
  width: 0.7rem;
  position: absolute;
  top: 1.85rem;
  right: 0.4rem;
  animation-duration: 1.5s;
  /* animation-name: snow-a1; */
}
@keyframes snow-a1{
	0% {
    top: 1.45rem;
    right: -0.3rem;
  }
  60%{
    top: 1.85rem;
    right: 0.4rem;
  }
	100% {
    transform: rotate(25deg);
  }
}
.snow-a2{
  width: 0.33rem;
  position: absolute;
  right: 0.2rem;
  bottom: 0.35rem;
  animation-duration: 1.5s;
  /* animation-name: snow-a2; */
}
@keyframes snow-a2{
	0% {
    transform: scale(0) rotate(-180deg);
    opacity: 0;
  }
  60%{
    transform: scale(1) rotate(0deg);
    opacity: 1;
    bottom: 0.35rem;
  }
  80%{
    bottom: 0.65rem;
  }
	100% {
    bottom: 0.35rem;
  }
}
.snow-a3{
  width: 0.43rem;
  position: absolute;
  bottom: 0.7rem;
  left: 0.55rem;
  animation-duration: 1.8s;
  /* animation-name: snow-a3; */
}
@keyframes snow-a3{
	0% {
    transform: scale(0) rotate(-180deg);
    opacity: 0;
  }
  60%{
    transform: scale(1) rotate(0deg);
    opacity: 1;
    bottom: 0.7rem;
  }
  80%{
    bottom: 0.9rem;
  }
	100% {
    bottom: 0.7rem;
  }
}
/* 6. 小情酥 */
.crisp{
  background: url(../img/index/crisp.jpg) no-repeat center center;
  background-size: cover;
}
.crisp-a1{
  width: 0.46rem;
  position: absolute;
  top: 2.92rem;
  right: 0.45rem;
  transform: rotate(-45deg);
  /* animation-name: crisp-a1; */
  animation-delay: 0.5s;
}
@keyframes crisp-a1{
	from {
    transform: scale(0) rotate(-45deg);
  }
	to {
    transform: scale(1) rotate(-45deg);
  }
}
.crisp-a2{
  width: 0.29rem;
  position: absolute;
  top: 2.2rem;
  left: 0.78rem;
  z-index: 1;
  /* animation-name: crisp-a1; */
  animation-delay: 0.7s;
}
.crisp-a3{
  width: 0.41rem;
  position: absolute;
  bottom: 0.68rem;
  left: 0.52rem;
  /* animation-name: crisp-a1; */
}
.crisp-a4{
  position: absolute;
  bottom: 0.48rem;
  left: 0.84rem;
  /* animation-name: crisp-a4; */
  animation-duration: 0.5s;
}
.crisp-a4 img{
  width: 1.9rem;
}
@keyframes crisp-a4{
	from {
    width: 0;
    opacity: 0;
  }
	to {
    width: 1.9rem;
    opacity: 1;
  }
}
.crisp-a5{
  position: absolute;
  bottom: 0.65rem;
  left: 2.56rem;
  /* animation-name: crisp-a5; */
  animation-delay: 0.5s;
  animation-duration: 0.5s;
}
.crisp-a5 img{
  width: 0.45rem;
}
@keyframes crisp-a5{
	from {
    width: 0;
    opacity: 0;
  }
	to {
    width: 0.45rem;
    opacity: 1;
  }
}
.crisp-a6{
  position: absolute;
  bottom: 2.02rem;
  left: 0.96rem;
  animation-duration: 1s;
  animation-delay: 1s;
  /* animation-name: crisp-a6; */
}
.crisp-a6 img{
  width: 0.5rem;
}
@keyframes crisp-a6{
	from {
    opacity: 0;
  }
	to {
    opacity: 1;
  }
}
/* 7. 一口 */
.bite{
  background: url(../img/index/bite.jpg) no-repeat center center;
  background-size: cover;
}
.bite-a1{
  width: 0.51rem;
  left: 0.45rem;
  bottom: 2rem;
  transform: rotate(225deg);
  /* animation-name: bite-a1; */
}
@keyframes bite-a1{
	0% {
    transform: scale(0) rotate(0deg);
    opacity: 0;
  }
  60%{
    transform: scale(1) rotate(225deg);
    bottom: 2rem;
    opacity: 1;
  }
  80%{
    bottom: 2.2rem;
  }
	100% {
    bottom: 2rem;
  }
}
.bite-a2{
  width: 0.51rem;
  position: absolute;
  right: 0.35rem;
  bottom: 0.6rem;
  transform: rotate(-45deg);
  /* animation-name: bite-a2; */
  animation-delay: 0.3s;
}
@keyframes bite-a2{
	0% {
    transform: scale(0) rotate(135deg);
    opacity: 0;
  }
  60%{
    transform: scale(1) rotate(-45deg);
    bottom: 0.6rem;
    opacity: 1;
  }
  80%{
    bottom: 0.8rem;
  }
	100% {
    bottom: 0.6rem;
  }
}

/* 新品 */
.new-box{
  background: url(../img/index/new.jpg) no-repeat center center;
  background-size: cover;
}
.new-a1{
  width: 0.76rem;
  bottom: 2rem;
  left: 0.72rem;
  /* animation-name: new-a1; */
}
.new-a2{
  width: 0.41rem;
  bottom: 0.72rem;
  right: 0.48rem;
  /* animation-name: new-a1; */
  animation-delay: 0.3s;
}
@keyframes new-a1{
	from {
    opacity: 0;
    bottom: 1.65rem;
    left: 0.84rem;
    transform: scale(0.1);
  }
	to {
    opacity: 1;
    bottom: 2rem;
    left: 0.72rem;
    transform: scale(1);
  }
}
@keyframes new-a2{
	from {
    opacity: 0;
    transform: scale(0.1);
  }
	to {
    opacity: 1;
    transform: scale(1);
  }
}

/* 豆乳脆脆 */
.soya-box{
  background: url(../img/index/soya.jpg) no-repeat center center;
  background-size: cover;
  padding-top: 0.45rem;
}
.soya-box .soya-logo{
  width: 1.7rem;
  margin-left: 0.12rem;
  margin-bottom: 0.05rem;
}
.soya-a1{
  width: 0.22rem;
  position: absolute;
  top: 2.9rem;
  right: .3rem;
  z-index: 1;
  /* animation-name: soya-a1; */
}
@keyframes soya-a1{
	0% {
    opacity: 0;
    right: 1.2rem;
    transform: rotate(-360deg);
  }
  100% {
    opacity: 1;
    right: .3rem;
    transform: rotate(-90deg);
  }
}
.soya-a2{
  width: 0.22rem;
  position: absolute;
  top: 2.65rem;
  left: 0.3rem;
  z-index: 1;
  animation-duration: 1.5s;
  animation-timing-function: ease-in-out;
  /* animation-name: soya-a2; */
}
@keyframes soya-a2{
	0% {
    opacity: 0;
    left: 1rem;
    transform: rotate(360deg);
  }
  100% {
    opacity: 1;
    left: .3rem;
    transform: rotate(-90deg);
  }
}
.soya-a3{
  width: 0.63rem;
  position: absolute;
  /* bottom: 0.05rem;
  left: 0.25rem; */
  bottom: 0.3rem;
  left: 0.6rem;
  z-index: 1;
  /* transform-origin: right 75%; */
  /* animation-name: soya-a3; */
  /* animation-iteration-count: infinite;
  animation-duration: 3.5s;
  animation-timing-function: ease-in-out; */
}
@keyframes soya-a3{
  from {
    opacity: 0;
    transform: scale(0.1);
  }
	to {
    opacity: 1;
    transform: scale(1);
  }
}
/* 微醺 */
.tipsy-box{
  background: url(../img/index/tipsy.jpg) no-repeat center center;
  background-size: cover;
}
.tip-a1{
  width: 0.4rem;
  position: absolute;
  bottom: 0.5rem;
  right: 0.68rem;
  z-index: 1;
  /* animation-name: tip-a1; */
  animation-duration: 1.2s;
}
@keyframes tip-a1{
	0% {
    opacity: 0;
    bottom: 0.5rem;
    transform: rotate(-180deg);
  }
  45%{
    opacity: 1;
    bottom: 0.5rem;
    transform: rotate(0deg);
  }
  75%{
    bottom: 0.9rem;
  }
  100% {
    bottom: 0.5rem;
  }
}
.tip-a2{
  width: 0.4rem;
  position: absolute;
  top: 2.65rem;
  left: .5rem;
  z-index: 1;
  /* animation-name: tip-a2; */
}
@keyframes tip-a2{
	0% {
    opacity: 0;
    transform: scale(0.1) rotate(270deg);
  }
  100% {
    opacity: 1;
    transform: scale(1) rotate(0deg);
  }
}
.tip-a3{
  width: 0.38rem;
  position: absolute;
  top: 2.45rem;
  right: 0.6rem;
  z-index: 1;
  /* animation-name: tip-a3; */
}
@keyframes tip-a3{
	from {
    opacity: 0;
    transform: scale(0.1);
  }
	to {
    opacity: 1;
    transform: scale(1);
  }
}
/* 小鲜盒 */
.fresh-box{
  background: url(../img/index/fresh.jpg) no-repeat center center;
  background-size: cover;
}
.fresh-a1{
  width: 0.51rem;
  position: absolute;
  bottom: 0.7rem;
  right: 0.58rem;
  z-index: 1;
  /* animation-name: fresh-a1; */
  animation-duration: 1.2s;
}
@keyframes fresh-a1{
	0% {
    opacity: 0;
    bottom: 0.7rem;
    transform: rotate(270deg);
  }
  45%{
    opacity: 1;
    bottom: 0.7rem;
    transform: rotate(0deg);
  }
  75%{
    bottom: 1.1rem;
  }
  100% {
    bottom: 0.7rem;
  }
}
.fresh-a2{
  width: 0.57rem;
  position: absolute;
  top: 2.2rem;
  left: .4rem;
  z-index: 1;
  /* animation-name: fresh-a2; */
}
@keyframes fresh-a2{
  from {
    opacity: 0;
    top: 1.8rem;
    left: .18rem;
    transform: scale(0.1) rotate(-30deg);
  }
	to {
    opacity: 1;
    top: 2.2rem;
    left: .4rem;
    transform: scale(1) rotate(0deg);
  }
}