body {
  margin: 0;
}

.jack-banner-wrap {
  width: 300px;
  height: 250px;
  display: block;
  float: left;
  background: #000;
}

.jack-banner-wrap a img {
  border: 0;
  margin: 0;
}

#jack-banner {
  position: relative;
  width: 300px;
  height: 250px;
  background-color: #1b1b1b;
  overflow: hidden;

}

#jack-banner .jack-slide {
  position: absolute;
  width: 300px;
  height: 250px;
  top: 0px;
  left: 0px;
  float: left;
  background: url('../images/bg_jack_hot.jpg') no-repeat center top;
}


#jack-banner .jack-slide .bottle {
  position: absolute;
  width: 98px;
  height: 250px;
  bottom: 0px;
  right: 0px;
  float: left;
  background: url('../images/bottle.png') no-repeat center top;
}

#jack-banner .jack-slide .smoke {
  position: absolute;
  width: 113px;
  height: 145px;
  top: 2px;
  right: 78px;
  float: left;
  background: url('../images/smoke.png');

  -webkit-animation: 25s scroll 1 linear forwards;
  animation: 25s scroll 1 linear forwards;
}

@-webkit-keyframes scroll {
  100% {
    background-position: 0px -1170px;
  }
}

@keyframes scroll {
  100% {
    background-position: 0px -1170px;
  }
}

#jack-banner .jack-slide .smoke_overlay {
  position: absolute;
  width: 109px;
  height: 81px;
  top: 2px;
  right: 74px;
  float: left;
  background: url('../images/smoke_overlay.png');
}

#jack-banner .jack-slide .drink {
  position: absolute;
  width: 85px;
  height: 217px;
  bottom: 0px;
  right: 90px;
  float: left;
  background: url('../images/drink.png') no-repeat center top;
}

#jack-banner .jack-slide .cinnamon {
  position: absolute;
  width: 56px;
  height: 50px;
  bottom: 0px;
  right: 0px;
  float: left;
  background: url('../images/cinnamon.png') no-repeat center top;
}

#jack-banner .jack-slide .apple {
  position: absolute;
  width: 55px;
  height: 49px;
  bottom: 0px;
  right: 84px;
  float: left;
  background: url('../images/apple.png') no-repeat center top;
}



#jack-banner .jack-slide .footer-text {
  position: absolute;
  width: 93px;
  height: 21px;
  bottom: 16px;
  left: 20px;
  float: right;
}

#jack-banner .jack-slide .button {
  position: absolute;
  width: 90px;
  height: 35px;
  bottom: 60px;
  left: -100px;
  float: left;
  background: #bc2a27 url('../images/btn_text.png') no-repeat center center;
  border-radius: 3px;
  transition: all 150ms linear;
  transform: scale(1);
  -webkit-animation-name: jack-animate-button, jack-animate-buttonpulse, jack-animate-buttonpulse;
  animation-name: jack-animate-button, jack-animate-buttonpulse, jack-animate-buttonpulse;
  -webkit-animation-delay: 2400ms, 3100ms, 6800ms;
  animation-delay: 2400ms, 3100ms, 6800ms;
  -webkit-animation-duration: 500ms, 600ms, 600ms;
  animation-duration: 500ms, 600ms, 600ms;
  -webkit-animation-fill-mode: forwards, forwards, forwards;
  animation-direction: forwards, forwards, forwards;
  -webkit-animation-iteration-count: 1, 1, 1;
  animation-iteration-count: 1, 1, 1;
}

@-webkit-keyframes jack-animate-button {
  0% {
    left: -100px;
  }
  100% {
    left: 21px;
  }
}

@keyframes jack-animate-button {
  0% {
    left: -100px;
  }
  100% {
    left: 21px;
  }
}

@-webkit-keyframes jack-animate-buttonpulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.15);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes jack-animate-buttonpulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.15);
  }
  100% {
    transform: scale(1);
  }
}


#jack-banner .jack-slide .pretitle {
  position: absolute;
  width: 70px;
  height: 16px;
  top: -100px;
  left: 20px;
  float: right;

  -webkit-animation-name: jack-animate-pretitle;
  animation-name: jack-animate-pretitle;
  -webkit-animation-delay: 400ms;
  animation-delay: 400ms;
  -webkit-animation-duration: 500ms;
  animation-duration: 500ms;
  -webkit-animation-fill-mode: forwards;
  animation-direction: forwards;
  -webkit-animation-iteration-count: 1;
  animation-iteration-count: 1;
}

@-webkit-keyframes jack-animate-pretitle {
  0% {
    top: -100px;
  }
  100% {
    top: 20px;
  }
}

@keyframes jack-animate-pretitle {
  0% {
    top: -100px;
  }
  100% {
    top: 20px;
  }
}


#jack-banner .jack-slide .title1 {
  position: absolute;
  width: 200px;
  height: 100px;
  top: 45px;
  left: 20px;
  float: left;

  -webkit-animation-name: jack-animate-title1;
  animation-name: jack-animate-title1;
  -webkit-animation-delay: 4500ms;
  animation-delay: 4500ms;
  -webkit-animation-duration: 1000ms;
  animation-duration: 1000ms;
  animation-direction: forwards;
  -webkit-animation-fill-mode: forwards;
  -webkit-animation-iteration-count: 1;
  animation-iteration-count: 1;
}

@-webkit-keyframes jack-animate-title1 {
  0% {
    left: 20px;
  }
  100% {
    left: -320px;
  }
}

@keyframes jack-animate-title1 {
  0% {
    left: 20px;
  }
  100% {
    left: -320px;
  }
}


#jack-banner .jack-slide .title1 .line01 {
  position: absolute;
  width: 3px;
  height: 0px;
  top: 0px;
  left: 0px;
  float: left;
  background: url('../images/head_line.png') no-repeat center top;

  -webkit-animation-name: jack-animate-line01;
  animation-name: jack-animate-line01;
  -webkit-animation-delay: 500ms;
  animation-delay: 500ms;
  -webkit-animation-duration: 900ms;
  animation-duration: 900ms;
  -webkit-animation-fill-mode: forwards;
  animation-direction: forwards;
  -webkit-animation-iteration-count: 1;
  animation-iteration-count: 1;
}

@-webkit-keyframes jack-animate-line01 {
  0% {
    height: 0px;
  }
  100% {
    height: 96px;
  }
}

@keyframes jack-animate-line01 {
  0% {
    height: 0px;
  }
  100% {
    height: 96px;
  }
}

#jack-banner .jack-slide .title1 .title1_01 {
  position: absolute;
  width: 110px;
  height: 45px;
  top: -100px;
  left: 20px;
  float: left;

  -webkit-animation-name: jack-animate-title1_01;
  animation-name: jack-animate-title1_01;
  -webkit-animation-delay: 600ms;
  animation-delay: 600ms;
  -webkit-animation-duration: 500ms;
  animation-duration: 500ms;
  -webkit-animation-fill-mode: forwards;
  animation-direction: forwards;
  -webkit-animation-iteration-count: 1;
  animation-iteration-count: 1;
}

@-webkit-keyframes jack-animate-title1_01 {
  0% {
    top: -100px;
  }
  100% {
    top: 0px;
  }
}

@keyframes jack-animate-title1_01 {
  0% {
    top: -100px;
  }
  100% {
    top: 0px;
  }
}

#jack-banner .jack-slide .title1 .title1_02 {
  position: absolute;
  width: 110px;
  height: 45px;
  top: -100px;
  left: 20px;
  float: left;

  -webkit-animation-name: jack-animate-title1_02;
  animation-name: jack-animate-title1_02;
  -webkit-animation-delay: 700ms;
  animation-delay: 700ms;
  -webkit-animation-duration: 500ms;
  animation-duration: 500ms;
  -webkit-animation-fill-mode: forwards;
  animation-direction: forwards;
  -webkit-animation-iteration-count: 1;
  animation-iteration-count: 1;
}

@-webkit-keyframes jack-animate-title1_02 {
  0% {
    top: -100px;
  }
  100% {
    top: 60px;
  }
}

@keyframes jack-animate-title1_02 {
  0% {
    top: -100px;
  }
  100% {
    top: 60px;
  }
}



#jack-banner .jack-slide .title2 {
  position: absolute;
  width: 200px;
  height: 100px;
  top: 45px;
  left: 320px;
  float: left;

  -webkit-animation-name: jack-animate-title2;
  animation-name: jack-animate-title2;
  -webkit-animation-delay: 4500ms;
  animation-delay: 4500ms;
  -webkit-animation-duration: 500ms;
  animation-duration: 500ms;
  animation-direction: forwards;
  -webkit-animation-fill-mode: forwards;
  -webkit-animation-iteration-count: 1;
  animation-iteration-count: 1;
}

@-webkit-keyframes jack-animate-title2 {
  0% {
    left: 320px;
  }
  100% {
    left: 15px;
  }
}

@keyframes jack-animate-title2 {
  0% {
    left: 320px;
  }
  100% {
    left: 15px;
  }
}



#jack-banner .jack-slide .title2 .line02 {
  position: absolute;
  width: 3px;
  height: 0px;
  top: 0px;
  left: 0px;
  float: left;
  background: url('../images/head_line.png') no-repeat center top;

  -webkit-animation-name: jack-animate-line02;
  animation-name: jack-animate-line02;
  -webkit-animation-delay: 5000ms;
  animation-delay: 5000ms;
  -webkit-animation-duration: 900ms;
  animation-duration: 900ms;
  -webkit-animation-fill-mode: forwards;
  animation-direction: forwards;
  -webkit-animation-iteration-count: 1;
  animation-iteration-count: 1;
}

@-webkit-keyframes jack-animate-line02 {
  0% {
    height: 0px;
  }
  100% {
    height: 37px;
  }
}

@keyframes jack-animate-line02 {
  0% {
    height: 0px;
  }
  100% {
    height: 37px;
  }
}


#jack-banner .jack-slide .title2 .title2_01 {
  position: absolute;
  width: 184px;
  height: 31px;
  top: -100px;
  left: 15px;
  float: left;

  -webkit-animation-name: jack-animate-title2_01;
  animation-name: jack-animate-title2_01;
  -webkit-animation-delay: 5000ms;
  animation-delay: 5000ms;
  -webkit-animation-duration: 500ms;
  animation-duration: 500ms;
  -webkit-animation-fill-mode: forwards;
  animation-direction: forwards;
  -webkit-animation-iteration-count: 1;
  animation-iteration-count: 1;
}

@-webkit-keyframes jack-animate-title2_01 {
  0% {
    top: -100px;
  }
  100% {
    top: 0px;
  }
}

@keyframes jack-animate-title2_01 {
  0% {
    top: -100px;
  }
  100% {
    top: 0px;
  }
}

#jack-banner .jack-slide .title2 .title2_02 {
  position: absolute;
  width: 110px;
  height: 45px;
  top: -150px;
  left: 15px;
  float: left;

  -webkit-animation-name: jack-animate-title2_02;
  animation-name: jack-animate-title2_02;
  -webkit-animation-delay: 5100ms;
  animation-delay: 5100ms;
  -webkit-animation-duration: 500ms;
  animation-duration: 500ms;
  -webkit-animation-fill-mode: forwards;
  animation-direction: forwards;
  -webkit-animation-iteration-count: 1;
  animation-iteration-count: 1;
}

@-webkit-keyframes jack-animate-title2_02 {
  0% {
    top: -150px;
  }
  100% {
    top: 50px;
  }
}

@keyframes jack-animate-title2_02 {
  0% {
    top: -150px;
  }
  100% {
    top: 50px;
  }
}


#jack-banner .jack-slide .title2 .plus {
  position: absolute;
  width: 11px;
  height: 11px;
  top: 62px;
  left: -420px;
  float: left;

  -webkit-animation-name: jack-animate-plus;
  animation-name: jack-animate-plus;
  -webkit-animation-delay: 5200ms;
  animation-delay: 5200ms;
  -webkit-animation-duration: 600ms;
  animation-duration: 600ms;
  -webkit-animation-fill-mode: forwards;
  animation-direction: forwards;
  -webkit-animation-iteration-count: 1;
  animation-iteration-count: 1;
}

@-webkit-keyframes jack-animate-plus {
  0% {
    left: -420px;
  }
  100% {
    left: 0px;
  }
}

@keyframes jack-animate-plus {
  0% {
    left: -420px;
  }
  100% {
    left: 0px;
  }
}

#jack-banner .jack-slide .title2 .title2_03 {
  position: absolute;
  width: 110px;
  height: 45px;
  top: -150px;
  left: 15px;
  float: left;

  -webkit-animation-name: jack-animate-title2_03;
  animation-name: jack-animate-title2_03;
  -webkit-animation-delay: 5300ms;
  animation-delay: 5300ms;
  -webkit-animation-duration: 500ms;
  animation-duration: 500ms;
  -webkit-animation-fill-mode: forwards;
  animation-direction: forwards;
  -webkit-animation-iteration-count: 1;
  animation-iteration-count: 1;
}

@-webkit-keyframes jack-animate-title2_03 {
  0% {
    top: -150px;
  }
  100% {
    top: 72px;
  }
}

@keyframes jack-animate-title2_03 {
  0% {
    top: -150px;
  }
  100% {
    top: 72px;
  }
}