.banner-logo,
.introduction-box.active .introduction-title{
  animation: fade 2s ease-in  1 forwards;
}
.about-box.active .title-p,
.contact-box.active .title-p
{
  animation: fade 2s ease-in  .4s forwards;
}

.store-info-block.active .store-border-box span{
  transform: scaleX(1);
  transform-origin: left;
  transition: all .4s linear;
  transition-delay: 1s;
}
.store-border-box span{
  transform: scaleX(0);
}
.about-box.active .title-icon,
.contact-box.active .title-icon,
.store-info-block.active .store-info-icon
{
  animation: bird .8s ease-out 1 forwards;
}
.about-box .title-icon,
.contact-box .title-icon,
.store-info-block .store-info-icon{
    transform: scale(0);
}
.about-box.active .title:after{
  width: 100%;
}
.about-box.active .about-info-p1{
  animation: fade 1s ease-in 1s 1 forwards;
}
.about-box.active .about-info-p2{
  animation: fadeInLeft 1s ease-in 1.5s 1 forwards;
}
.about-box.active .about-info-p3{
  animation: fadeInLeft 1s ease-in 2s 1 forwards;
}

.big-store.active .big-store-left,
.s-store.active .s-store-img-box1
{
  animation: fade 1s ease-in 0s 1 forwards;
}

.big-store.active .big-store-middle,
.s-store.active .s-store-img-box2{
  animation: fadeInLeft 1s ease-in 0.5s 1 forwards;
}

.big-store.active .big-store-right,
.s-store.active .s-store-img-box3{
  animation: fadeInLeft 1s ease-in 1s 1 forwards;
}
.s-store.active .s-store-img-box4{
  animation: fadeInLeft 1s ease-in 1.5s 1 forwards;
}
.about-info-p1,
.about-info-p2,
.about-info-p3,
.contact-box .title-p,
.about-bird,
.about-box .title-p,
.introduction-text,
.introduction-title,
.introduction-youtube-img,
.introduction-title-logo,
.store-info-title span,
.store-info-list li,
.big-store-title-box span,
.big-store-title,
.s-store-title-box span,
.s-store-title,
.big-store-left,
.big-store-middle,
.big-store-right,
.s-store-img-box1,
.s-store-img-box2,
.s-store-img-box3,
.s-store-img-box4,
.products-title-icon,
.prdocuts-title-icon2,
.prdocuts-title-icon3,
.prdocuts-title-p,
.products-left-list li,
.products-right-periphery li,
.products-left-periphery li,
.products-food-1-box,
.prodcuts-food2,
.prodcuts-food3,
.prodcuts-food4,
.prodcuts-food5,
.contact-info-p,
.contact-enter-p1,
.contact-enter-p2,
.contact-enter-list li,
.contact-list li,
.contact-bird,
.footer-logo,
.footer-list,
.footer-map,
.prdocuts-title-p2,
.contact-info-p2,
.store-title
{
  opacity: 0;
}
.about-bird-box.active .about-bird{
  animation: fadeInLeft 2s ease-in  1 forwards;
}
.about-bird{
  transition: all .4s ease-in;
}
.about-bird.active{
  left: -150px;
  transition: all .4s ease-in;
}

.introduction-box.active .introduction-title-logo,
.products-left.active .products-title-icon,
.products-right.active .products-title-icon,
.products-food.active .products-title-icon
{
  animation: rotate 2s ease-in  1 forwards;
}
.introduction-box.active .introduction-text,
.products-left.active .prdocuts-title-p,
.products-right.active .prdocuts-title-p,
.products-left.active .prdocuts-title-icon2,
.products-right.active .prdocuts-title-icon2,
.products-food.active .prdocuts-title-icon2,
.products-food.active .prdocuts-title-p,
.products-food.active .prdocuts-title-p2
{
  animation: fade 1s ease-in 1s 1 forwards;
}

.contact-box.active .contact-info-p{
  animation: fade 1s ease-in 1s 1 forwards;
}
.contact-box.active .contact-info-p2{
  animation: fade 1s ease-in 1s 1 forwards;
}
.introduction-box.active .introduction-youtube-img{
  animation: fadeInRight 2s ease-in  1 forwards;
}
.introduction-box.active .introduction-youtube{
  height: 400px;
}
.store-info-block.active .store-info-title span

{
  animation: fade 1s ease-in .5s 1 forwards;
}
.store-info-block.active .store-info-list .store-title:nth-child(1){
  animation: fadeInDown 0.5s ease-in 1s 1 forwards;
}
.store-info-block.active .store-info-list li.store-taiwan:nth-child(2){
  animation: fadeInLeft 0.5s ease-in 1.2s 1 forwards;
}
.store-info-block.active .store-info-list li:nth-child(3){
  animation: fadeInLeft 0.5s ease-in 2s 1 forwards;
}
.store-info-block.active .store-info-list li:nth-child(4){
  animation: fadeInLeft 0.5s ease-in 2.5s 1 forwards;
}
.store-info-block.active .store-info-list .store-title:nth-child(5){
  animation: fadeInDown 0.5s ease-in 2.8s 1 forwards;
}
.store-info-block.active .store-info-list li:nth-child(6){
  animation: fadeInLeft 0.5s ease-in 3s 1 forwards;
}
.store-info-block.active .store-info-list li:nth-child(7){
  animation: fadeInLeft 0.5s ease-in 3.5s 1 forwards;
}
.store-info-block.active .store-info-list li:nth-child(8){
  animation: fadeInLeft 0.5s ease-in 4s 1 forwards;
}
.store-info-block.active .store-info-list li:nth-child(9){
  animation: fadeInLeft 0.5s ease-in 4.5s 1 forwards;
}
.store-info-block.active .store-info-list .store-title:nth-child(10){
  animation: fadeInDown 0.5s ease-in 4.8s 1 forwards;
}
.store-info-block.active .store-info-list li:nth-child(11){
  animation: fadeInLeft 0.5s ease-in 5s 1 forwards;
}
.store-info-block.active .store-info-list li:nth-child(12){
  animation: fadeInLeft 0.5s ease-in 5.5s 1 forwards;
}
.store-info-block.active .store-info-list li:nth-child(13){
  animation: fadeInLeft 0.5s ease-in 6s 1 forwards;
}
.store-info-block.active .store-info-list li:nth-child(14){
  animation: fadeInLeft 0.5s ease-in 6.5s 1 forwards;
}


.store-info-border.active .s-b-t{
  transform: scaleX(1);
  transition: all .4s linear;
}
.store-info-border.active .s-b-r{
  transform: scaleY(1);
  transition: all .4s linear;

}
.store-info-border.active .s-b-b{
  transform: scaleX(1);
  transition: all .4s linear;

}
.store-info-border.active .s-b-l{
  transform: scaleY(1);
  transition: all .4s linear;

}


.contact-box.active .contact-enter-p1{
   animation: fade 1s ease-in 1.5s 1 forwards;
}
.contact-box.active .contact-enter-p2
{
  animation: fadeInLeft 0.5s ease-in 2s 1 forwards;
}
.contact-box.active .contact-enter-list li
{
  animation: fadeInLeft 0.5s ease-in 2.5s 1 forwards;
}


.store-pig-img.active{
  animation: pig 1s linear 0s 1 forwards;
}
.big-store-title-box.active span,
.s-store-title-box.active span,
.products-left-list.active li:nth-child(1),
.products-left-list.active li:nth-child(4)
{
  animation: fadeInLeft2 1s ease-in 0s 1 forwards;
}
.products-left-list.active li:nth-child(2),
.products-left-list.active li:nth-child(5)
{
  animation: fadeInLeft2 1s ease-in 0.5s 1 forwards;
}
.products-left-list.active li:nth-child(3),
.products-left-list.active li:nth-child(6)
{
  animation: fadeInLeft2 1s ease-in 1s 1 forwards;
}
.big-store-title-box.active .big-store-title,
.s-store-title-box.active .s-store-title{
   animation: fade 1s ease-in 1s 1 forwards;
}
.footer-box.active .footer-logo
{
   animation: fade 1s ease-in 0s 1 forwards;
}
.footer-box.active .footer-list{
  animation: fadeInDown 1s ease-in 0s 1 forwards;
}
.footer-box.active .footer-map{
  animation: fadeInDown 1s ease-in 0.3s 1 forwards;
}
/*.products-right.active .products-title{
  animation: bottom 1s ease-in 1.5s 1 forwards;
}*/
.products-left-periphery.active li:nth-child(1){
  animation: periphery .5s linear 0s 1 forwards;

}
.products-right-periphery.active li:nth-child(2){
  animation: periphery .5s linear 0.5s 1 forwards;

}
.products-left-periphery.active li:nth-child(2){
  animation: periphery .5s linear 1s 1 forwards;
}

.products-right-periphery.active li:nth-child(3){
  animation: periphery .5s linear 1.5s 1 forwards;
}

.products-food-box1.active .products-food-1-box{
   animation: fadeInDown  1s ease-in 0s 1 forwards;
}  
.products-food-box2.active  .prodcuts-food2{
  animation: fadeInLeft2 1s ease-in 0.5s 1 forwards;
}
.products-food-box2.active  .prodcuts-food3{
  animation: fadeInDown 1s ease-in 0.5s 1 forwards;
}
.products-food-box2.active  .prodcuts-food4{
  animation: fadeInDown 1s ease-in 0.5s 1 forwards;
}
.products-food-box2.active  .prodcuts-food5{
  animation: fadeInRight2 1s ease-in 0.5s 1 forwards;
}
.contact-list.active li:nth-child(1){
  animation: fade 1s ease-in .5s 1 forwards;
}
.contact-list.active li:nth-child(2){
  animation: fade 1s ease-in 1s 1 forwards;
}
.contact-list.active li:nth-child(3){
  animation: fade 1s ease-in 1.5s 1 forwards;
}
.contact-list.active li:nth-child(4){
  animation: fade 1s ease-in 2s 1 forwards;
}
.contact-list.active li:nth-child(5){
  animation: fade 1s ease-in 2.5s 1 forwards;
}
.contact-bird.active
{
  animation: fadeInLeft 1s ease-in 0s 1 forwards;
}
.contact-bird.active img
{
  animation: bird-move 2s ease-in-out 1.5s infinite alternate;
}
.store-pig-img{
  transform: scale(0);
}
.store-pig-img.active img{
  animation: bird-move 2s ease-in-out 1s infinite alternate;
}
.products-block-icon{
  transform: scale(0);
}
.products-block-icon.active{
  animation: bird2 .6s ease-in 0s 1 forwards;
}
.products-block-icon.active img{
  animation: bird3 5s linear 1s infinite alternate;
}
.introduction-box .introduction-youtube-img img{
  animation: bird4 5s linear 1s infinite alternate;
}
.store-bg{
  animation: store-bg 3s linear 0s infinite ;
  right: -181px;
}
/*照片*/
@keyframes periphery{
  0%{
    opacity: 0;

  }

  100%{
    opacity: 1;
  
  }
}
/*波浪移動*/
@keyframes store-bg{
  form {
    right: -181px;
  }
   to {
    
      right: 0px;
  }
}
/*鳥移動*/
@keyframes bird-move {
  form {
    -webkit-transform: none;
    transform: none;
  }
   to {
    
    -webkit-transform: translate3d(0, 30px, 0);
    transform: translate3d(0, 30px, 0);
  }
}

@keyframes bird2 {
     0% { transform: translate3d(-460px, 200px, 0) scale(0.1); } 

    100% { transform: translate3d(0, 0, 0) scale(1);        } 

}
/* 鳥旋轉 */
@keyframes bird3 {
     0% { transform: rotate(0deg)} 
    100% { transform: rotate(10deg);} 
}
@keyframes bird4 {
     0% { transform: rotate(0deg) } 
    100% { transform: rotate(3deg) } 

}
/*圓圈旋轉*/
@keyframes rotate2 {
     0% { transform: rotate(0deg)} 
    100% { transform: rotate(720deg);} 
}

/* 波浪 */
@-webkit-keyframes wave {
  from {
    transform: scaleX(1)
  }

  to {
     transform: scaleX(1.05)
  }
}

@keyframes wave {
  from {
    transform: scaleX(1)
  }

  to {
     transform: scaleX(1.05)
  }

}
/*淡入下來*/
@-webkit-keyframes fadeInDown {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -30%, 0);
    transform: translate3d(0, -30%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes fadeInDown {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -30%, 0);
    transform: translate3d(0, -30%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}
/*淡入上來*/
@-webkit-keyframes fadeInDown {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 30%, 0);
    transform: translate3d(0, 30%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes fadeInDown {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 30%, 0);
    transform: translate3d(0, 30%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

/*淡入*/
@-webkit-keyframes fade {
  from {
    opacity: 0;
   
  }

  to {
    opacity: 1;

  }
}
@keyframes fade {
 from {
    opacity: 0;
   
  }

  to {
    opacity: 1;

  }
}
/*放大微旋轉*/

@-webkit-keyframes rotate {
  0% {
    transform: scale(1);
  }
  49%{
    transform: scale(1.1);
  }
  50%{
    transform: scale(1.1) rotate(-5deg) ;
  }
  60%{
    transform: scale(1.1) rotate(5deg) ;
  }
  70%{
    transform: scale(1.1) rotate(-3deg) ;
  }
  80%{
    transform: scale(1.1) rotate(3deg) ;
  }

  90% {
    transform: scale(1.05) rotate(0deg) ;

  }
  100% {
    transform: scale(1) rotate(0deg) ;

  }
}
@keyframes rotate {
  0% {
    opacity: 0;
    transform: scale(1);
  }
  10%{
    opacity:1; 
  }
  25%{
    opacity: 1 scale(1.05);
  }
  49%{
    transform: scale(1.1);
  }
  50%{
    transform: scale(1.1) rotate(-5deg) ;
  }
  60%{
    transform: scale(1.1) rotate(5deg) ;
  }
  70%{
    transform: scale(1.1) rotate(-3deg) ;
  }
  80%{
    transform: scale(1.1) rotate(3deg) ;
  }

  90% {
    transform: scale(1.05) rotate(0deg) ;

  }
  100% {
    opacity:1; 
    transform: scale(1) rotate(0deg) ;

  }
}


@-webkit-keyframes zoomInUp {
  from {
    opacity: 0;
    -webkit-transform: scale3d(.1, .1, .1) translate3d(0, 500px, 0);
    transform: scale3d(.1, .1, .1) translate3d(0, 500px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
    animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
    transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
  }
  100%{
    opacity: 1;
  }
}

@keyframes zoomInUp {
  from {
    opacity: 0;
    -webkit-transform: scale3d(.1, .1, .1) translate3d(0, 500px, 0);
    transform: scale3d(.1, .1, .1) translate3d(0, 500px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
    animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
    transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
  }
   100%{
    opacity: 1;
  }
}
/*左邊淡入近來*/
@-webkit-keyframes fadeInLeft {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-5%, 0, 0);
    transform: translate3d(-5%, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes fadeInLeft {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-5%, 0, 0);
    transform: translate3d(-5%, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}
/*左邊淡入近來2*/
@-webkit-keyframes fadeInLeft2 {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-30px, 0, 0);
    transform: translate3d(-30px, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes fadeInLeft2 {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-30px, 0, 0);
    transform: translate3d(-30px, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}
/*右邊淡入近來*/
@-webkit-keyframes fadeInRight {
  from {
    opacity: 0;
    -webkit-transform: translate3d(5%, 0, 0);
    transform: translate3d(5%, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes fadeInRight {
  from {
    opacity: 0;
    -webkit-transform: translate3d(5%, 0, 0);
    transform: translate3d(5%, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}
/*右邊淡入近來2*/
@-webkit-keyframes fadeInRight2 {
  from {
    opacity: 0;
    -webkit-transform: translate3d(30px, 0, 0);
    transform: translate3d(30px, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes fadeInRight2 {
  from {
    opacity: 0;
    -webkit-transform: translate3d(30px, 0, 0);
    transform: translate3d(30px, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

/* 豬 */

@keyframes pig {
  0%{
    transform: translate(400px, -100px) rotate(55deg) scale(0.4);
  }
  30% {
    transform: translate(200px, -150px) rotate(18deg) scale(0.7); 
  }

  70% {
    transform: translate(0px, 0px) rotate(0deg) scale(1);  
  }
  100% {
    transform: translate(0px, 0px) rotate(0deg) scale(1);  
  }
}

/*鳥2*/
@keyframes bird {
    0% { transform: translate3d(-400px, -200px, 0) scale(0.1); } 
    25% { transform: translate3d(-300px, -300px, 0) scale(0.3); }   
    50% { transform: translate3d(-200px, -200px, 0) scale(0.5); }
    75% { transform: translate3d(-100px, -100px, 0) scale(0.7); }
    100% { transform: translate3d(0px, 0, 0) scale(1);        } 
}

/*增加margin-bottom*/
@-webkit-keyframes bottom {
  from {
    margin-bottom: 0;
  }

  to {
    margin-bottom: 70px;
  }
}

@keyframes bottom {
   from {
    margin-bottom: 0;
  }

  to {
    margin-bottom: 70px;
  }
}
/*快速上滑*/
@-webkit-keyframes bounceInUp {
  from, 60%, 75%, 90%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }

  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 3000px, 0);
    transform: translate3d(0, 3000px, 0);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(0, -20px, 0);
    transform: translate3d(0, -20px, 0);
  }

  75% {
    -webkit-transform: translate3d(0, 10px, 0);
    transform: translate3d(0, 10px, 0);
  }

  90% {
    -webkit-transform: translate3d(0, -5px, 0);
    transform: translate3d(0, -5px, 0);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes bounceInUp {
  from, 60%, 75%, 90%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }

  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 3000px, 0);
    transform: translate3d(0, 3000px, 0);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(0, -20px, 0);
    transform: translate3d(0, -20px, 0);
  }

  75% {
    -webkit-transform: translate3d(0, 10px, 0);
    transform: translate3d(0, 10px, 0);
  }

  90% {
    -webkit-transform: translate3d(0, -5px, 0);
    transform: translate3d(0, -5px, 0);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}