/* Animate Set */
#pro_banner { width:100%; height:655px; margin-top:12px; overflow:hidden; }
#pro_banner > ul { position:relative; width:100%; height:100%; }
#pro_banner ul > li { position:absolute; }
.forwards { 
	-webkit-animation-fill-mode:forwards;
	-moz-animation-fill-mode:forwards;
	-ms-animation-fill-mode:forwards;
	-o-animation-fill-mode:forwards;
	animation-fill-mode:forwards;
}
.backwards {
	-webkit-animation-fill-mode:backwards;
	-moz-animation-fill-mode:backwards;
	-ms-animation-fill-mode:backwards;
	-o-animation-fill-mode:backwards;
	animation-fill-mode:backwards;
}

#pro_banner li.Head {
  top:300px;
  left:-500px;
  padding-bottom:20px;
	width: initial;
	height: initial;
  color:#fff;
  font-family:微軟正黑體;
  font-size:40px;
  line-height:40px;
  text-shadow:3px 3px 5px rgba(0,0,0,0.8);
  background:url(animate/HeadLine.png) no-repeat bottom left;
  background-size:contain;
  z-index:15;
	-webkit-animation-name:Head-animation;
	-webkit-animation-duration:8s;	
	-moz-animation-name:Head-animation;
	-moz-animation-duration:8s;	
	-ms-animation-name:Head-animation;
	-ms-animation-duration:8s;	
	-o-animation-name:Head-animation;
	-o-animation-duration:8s;	
	animation-name:Head-animation;
	animation-duration:8s;
}
#pro_banner li.Text {
  top:415px;
  left:-500px;
	width: initial;
	height: initial;
  font-family:微軟正黑體;
  font-size:18px;
  line-height:24px;
  color:#fff;
  text-shadow:3px 3px 5px rgba(0,0,0,0.8);
  z-index:15;
	-webkit-animation-name:Text-animation;
	-webkit-animation-duration:9s;	
	-moz-animation-name:Text-animation;
	-moz-animation-duration:9s;	
	-ms-animation-name:Text-animation;
	-ms-animation-duration:9s;	
	-o-animation-name:Text-animation;
	-o-animation-duration:9s;	
	animation-name:Text-animation;
	animation-duration:9s;
}
#pro_banner li.Head, #pro_banner li.Text{
	-webkit-animation-play-state:1;
	-webkit-animation-timing-function:ease-out;
	-webkit-animation-iteration-count:1;
	
	-moz-animation-play-state:1;
	-moz-animation-timing-function:ease-out;
	-moz-animation-iteration-count:1;
	
	-ms-animation-play-state:1;
	-ms-animation-timing-function:ease-out;
	-ms-animation-iteration-count:1;
	
	-o-animation-play-state:1;
	-o-animation-timing-function:ease-out;
	-o-animation-iteration-count:1;
	
	animation-play-state:1;
	animation-timing-function:ease-out;
	animation-iteration-count:1;
}
@-webkit-keyframes Head-animation {
  0%    { opacity:0; color:transparent; text-shadow:0 0 5px #fff; }
  95%   { opacity:0; left:60px; color:transparent; text-shadow:0 0 5px #fff; }
  100%  { opacity:1; left:80px; color:#fff; text-shadow:3px 3px 5px rgba(0,0,0,0.8); }
}
@-webkit-keyframes Text-animation {
  0%    { opacity:0; color:transparent; text-shadow:0 0 5px #fff; }
  95%   { opacity:0; left:60px; color:transparent; text-shadow:0 0 5px #fff; }
  100%  { opacity:1; left:80px; color:#fff; text-shadow:3px 3px 5px rgba(0,0,0,0.8); }
}
@-moz-keyframes Head-animation {
  0%    { opacity:0; color:transparent; text-shadow:0 0 5px #fff; }
  95%   { opacity:0; left:60px; color:transparent; text-shadow:0 0 5px #fff; }
  100%  { opacity:1; left:80px; color:#fff; text-shadow:3px 3px 5px rgba(0,0,0,0.8); }
}
@-moz-keyframes Text-animation {
  0%    { opacity:0; color:transparent; text-shadow:0 0 5px #fff; }
  95%   { opacity:0; left:60px; color:transparent; text-shadow:0 0 5px #fff; }
  100%  { opacity:1; left:80px; color:#fff; text-shadow:3px 3px 5px rgba(0,0,0,0.8); }
}
@-ms-keyframes Head-animation {
  0%    { opacity:0; color:transparent; text-shadow:0 0 5px #fff; }
  95%   { opacity:0; left:60px; color:transparent; text-shadow:0 0 5px #fff; }
  100%  { opacity:1; left:80px; color:#fff; text-shadow:3px 3px 5px rgba(0,0,0,0.8); }
}
@-ms-keyframes Text-animation {
  0%    { opacity:0; color:transparent; text-shadow:0 0 5px #fff; }
  95%   { opacity:0; left:60px; color:transparent; text-shadow:0 0 5px #fff; }
  100%  { opacity:1; left:80px; color:#fff; text-shadow:3px 3px 5px rgba(0,0,0,0.8); }
}
@-o-keyframes Head-animation {
  0%    { opacity:0; color:transparent; text-shadow:0 0 5px #fff; }
  95%   { opacity:0; left:60px; color:transparent; text-shadow:0 0 5px #fff; }
  100%  { opacity:1; left:80px; color:#fff; text-shadow:3px 3px 5px rgba(0,0,0,0.8); }
}
@-o-keyframes Text-animation {
  0%    { opacity:0; color:transparent; text-shadow:0 0 5px #fff; }
  95%   { opacity:0; left:60px; color:transparent; text-shadow:0 0 5px #fff; }
  100%  { opacity:1; left:80px; color:#fff; text-shadow:3px 3px 5px rgba(0,0,0,0.8); }
}
@keyframes Head-animation {
  0%    { opacity:0; color:transparent; text-shadow:0 0 5px #fff; }
  95%   { opacity:0; left:60px; color:transparent; text-shadow:0 0 5px #fff; }
  100%  { opacity:1; left:80px; color:#fff; text-shadow:3px 3px 5px rgba(0,0,0,0.8); }
}
@keyframes Text-animation {
  0%    { opacity:0; color:transparent; text-shadow:0 0 5px #fff; }
  95%   { opacity:0; left:60px; color:transparent; text-shadow:0 0 5px #fff; }
  100%  { opacity:1; left:80px; color:#fff; text-shadow:3px 3px 5px rgba(0,0,0,0.8); }
}


/* TV */
#pro_banner #tv { background-color:#000; }
#tv .bg { width:1366px; height:667px; background-repeat:no-repeat; }
#tv .bg > div { width:1366px; height:667px; background-repeat:no-repeat; position:absolute; }
#tv .bg.shadow { background-image:url(animate/tv/BG-shadow.png); z-index:10 }

#tv .bg.gray .univer {
  background-image:url(animate/tv/BG-univer-gray.jpg);
  z-index:2;
  opacity:1;
	-webkit-animation: tv-univer-animation 20s infinite ease-in-out alternate;
	-moz-animation: tv-univer-animation 20s infinite ease-in-out alternate;
	-ms-animation: tv-univer-animation 20s infinite ease-in-out alternate;
	-o-animation: tv-univer-animation 20s infinite ease-in-out alternate;
	animation: tv-univer-animation 20s infinite ease-in-out alternate;
}
#tv .bg.gray .galaxy {
  background-image:url(animate/tv/BG-galaxy-gray.png);
  z-index:3;
  opacity:1;
	-webkit-animation: tv-galaxy-animation 30s infinite ease-in-out alternate;
	-moz-animation: tv-galaxy-animation 30s infinite ease-in-out alternate;
	-ms-animation: tv-galaxy-animation 30s infinite ease-in-out alternate;
	-o-animation: tv-galaxy-animation 30s infinite ease-in-out alternate;
	animation: tv-galaxy-animation 30s infinite ease-in-out alternate;
}
#tv .bg.color .univer {
  background-image:url(animate/tv/BG-univer-color.jpg);
  z-index:4;
  opacity:1;
	-webkit-animation: tv-univer-animation 20s infinite ease-in-out alternate;
	-moz-animation: tv-univer-animation 20s infinite ease-in-out alternate;
	-ms-animation: tv-univer-animation 20s infinite ease-in-out alternate;
	-o-animation: tv-univer-animation 20s infinite ease-in-out alternate;
	animation: tv-univer-animation 20s infinite ease-in-out alternate;
}
#tv .bg.color .galaxy {
  background-image:url(animate/tv/BG-galaxy-color.png);
  z-index:5;
  opacity:1;
	-webkit-animation: tv-galaxy-animation 30s infinite ease-in-out alternate;
	-moz-animation: tv-galaxy-animation 30s infinite ease-in-out alternate;
	-ms-animation: tv-galaxy-animation 30s infinite ease-in-out alternate;
	-o-animation: tv-galaxy-animation 30s infinite ease-in-out alternate;
	animation: tv-galaxy-animation 30s infinite ease-in-out alternate;
}

#tv .bg.color {
  z-index:9;
	clip:rect(0,1366px,677px,0);
  -webkit-animation: tv-cTg-animation 2s 2s 1 ease-in forwards;
  -moz-animation: tv-cTg-animation 2s 2s 1 ease-in forwards;
  -ms-animation: tv-cTg-animation 2s 2s 1 ease-in forwards;
  -o-animation: tv-cTg-animation 2s 2s 1 ease-in forwards;
  animation: tv-cTg-animation 2s 2s 1 ease-in forwards;
}

#tv .bg.star-1 {
  background:url(animate/tv/Star-1.png) no-repeat;
  z-index:12;
  opacity:0;
  -webkit-animation: tv-starA-animation 7s 0.2s 1 ease-out;
  -moz-animation: tv-starA-animation 7s 0.2s 1 ease-out;
  -ms-animation: tv-starA-animation 7s 0.2s 1 ease-out;
  -o-animation: tv-starA-animation 7s 0.2s 1 ease-out;
  animation: tv-starA-animation 7s 0.2s 1 ease-out;
}
#tv .bg.star-2 {
  background:url(animate/tv/Star-2.png) no-repeat;
  z-index:12;
  opacity:0;
  -webkit-animation: tv-starB-animation 7s 1 ease-out;
  -moz-animation: tv-starB-animation 7s 1 ease-out;
  -ms-animation: tv-starB-animation 7s 1 ease-out;
  -o-animation: tv-starB-animation 7s 1 ease-out;
  animation: tv-starB-animation 7s 1 ease-out;
}
#tv .bg.Text-BG {
  background:#0e1333;
  z-index:8;
  opacity:1;
  -webkit-animation: tv-TextBG-animation 7s 2s 1 ease-out;
  -moz-animation: tv-TextBG-animation 7s 2s 1 ease-out;
  -ms-animation: tv-TextBG-animation 7s 2s 1 ease-out;
  -o-animation: tv-TextBG-animation 7s 2s 1 ease-out;
  animation: tv-TextBG-animation 7s 2s 1 ease-out;
}

#tv .tv {
	top:0;
	left:50%;
  width:716px;
  height:454px;
  background:url(animate/tv/item-TV.png) no-repeat;
  background-size:cover;
  z-index:20;
  opacity:0;
	-webkit-transform:scale(1) translate(-135px,160px);
	-moz-transform:scale(1) translate(-135px,160px);
	transform:scale(1) translate(-135px,160px);
  -webkit-animation: tv-animation 2s 2s 1 ease-in forwards;
  -moz-animation: tv-animation 2s 2s 1 ease-in forwards;
  -ms-animation: tv-animation 2s 2s 1 ease-in forwards;
  -o-animation: tv-animation 2s 2s 1 ease-in forwards;
  animation: tv-animation 2s 2s 1 ease-in forwards;
}
#tv .screen {
  top:166px;
  right:101px;
  width:710px;
  height:404px;
  z-index:9;
  opacity:1;
  background:url(animate/tv/item-screen.jpg) no-repeat;
  -webkit-animation: tv-sc-animation 4s 2s 1 ease-in;
  -moz-animation: tv-sc-animation 4s 2s 1 ease-in;
  -ms-animation: tv-sc-animation 4s 2s 1 ease-in;
  -o-animation: tv-sc-animation 4s 2s 1 ease-in;
  animation: tv-sc-animation 4s 2s 1 ease-in;
}


/* WebKit Animations */
@-webkit-keyframes tv-univer-animation {
  0%    { -webkit-transform:scale(1); }
  100%  { -webkit-transform:scale(1.1); }
}
@-webkit-keyframes tv-galaxy-animation {
  0%    { -webkit-transform:scale(1); }
  100%  { -webkit-transform:scale(0.9); }
}
@-webkit-keyframes tv-cTg-animation {
  0%    { clip:rect(0,1366px,677px,0); }
  100%  { clip:rect(160px,1260px,570px,550px); }
}
@-webkit-keyframes tv-sc-animation {
  0%    { opacity:0; }
  40%   { opacity:0; }
  50%   { opacity:1; }
  100%  { opacity:1; }
}
@-webkit-keyframes tv-animation {
  0%    { -webkit-transform:scale(1.95) translate(-190px,100px); opacity:0; }
  100%  { -webkit-transform:scale(1) translate(-135px,160px); opacity:1; }
}
@-webkit-keyframes tv-starA-animation {
  0%    { -webkit-transform:scale(0.85); opacity:1; }
  80%   { -webkit-transform:scale(1); }
  100%  { -webkit-transform:scale(3); opacity:0; }
}
@-webkit-keyframes tv-starB-animation {
  0%    { -webkit-transform:scale(0.9); opacity:1; }
  80%   { -webkit-transform:scale(1.1); opacity:1; }
  100%  { -webkit-transform:scale(3.1); opacity:0; }
}
@-webkit-keyframes tv-TextBG-animation {
  0%    { opacity:0; }
  81%   { opacity:0; }
  100%  { opacity:1; }
}


/* moz Animations */
@-moz-keyframes tv-univer-animation {
  0%    { -moz-transform:scale(1); }
  100%  { -moz-transform:scale(1.1); }
}
@-moz-keyframes tv-galaxy-animation {
  0%    { -moz-transform:scale(1); }
  100%  { -moz-transform:scale(0.9); }
}
@-moz-keyframes tv-cTg-animation {
  0%    { clip:rect(0,1366px,677px,0); }
  100%  { clip:rect(160px,1260px,570px,550px); }
}
@-moz-keyframes tv-sc-animation {
  0%    { opacity:0; }
  40%   { opacity:0; }
  50%   { opacity:1; }
  100%  { opacity:1; }
}
@-moz-keyframes tv-animation {
  0%    { -moz-transform:scale(1.95) translate(-190px,100px); opacity:0; }
  100%  { -moz-transform:scale(1) translate(-135px,160px); opacity:1; }
}
@-moz-keyframes tv-starA-animation {
  0%    { -moz-transform:scale(0.7); opacity:0; }
  80%   { -moz-transform:scale(1); opacity:1; }
  100%  { -moz-transform:scale(3); opacity:0; }
}
@-moz-keyframes tv-starB-animation {
  0%    { -moz-transform:scale(0.8); opacity:0; }
  80%   { -moz-transform:scale(1); opacity:1; }
  100%  { -moz-transform:scale(3); opacity:0; }
}
@-moz-keyframes tv-TextBG-animation {
  0%    { opacity:0; }
  81%   { opacity:0; }
  100%  { opacity:1; }
}


/* ms Animations */
@-ms-keyframes tv-univer-animation {
  0%    { -ms-transform:scale(1); }
  100%  { -ms-transform:scale(1.1); }
}
@-ms-keyframes tv-galaxy-animation {
  0%    { -ms-transform:scale(1); }
  100%  { -ms-transform:scale(0.9); }
}
@-ms-keyframes tv-cTg-animation {
  0%    { clip:rect(0,1366px,677px,0); }
  100%  { clip:rect(160px,1260px,570px,550px); }
}
@-ms-keyframes tv-sc-animation {
  0%    { opacity:0; }
  40%   { opacity:0; }
  50%   { opacity:1; }
  100%  { opacity:1; }
}
@-ms-keyframes tv-tv-animation {
  0%    { -ms-transform:scale(1.95) translate(-190px,100px); opacity:0; }
  100%  { -ms-transform:scale(1) translate(-135px,160px); opacity:1; }
}
@-ms-keyframes tv-starA-animation {
  0%    { -ms-transform:scale(0.7); opacity:0; }
  80%   { -ms-transform:scale(1); opacity:1; }
  100%  { -ms-transform:scale(3); opacity:0; }
}
@-ms-keyframes tv-starB-animation {
  0%    { -ms-transform:scale(0.8); opacity:0; }
  80%   { -ms-transform:scale(1); opacity:1; }
  100%  { -ms-transform:scale(3); opacity:0; }
}
@-ms-keyframes tv-TextBG-animation {
  0%    { opacity:0; }
  81%   { opacity:0; }
  100%  { opacity:1; }
}


/* o Animations */
@-o-keyframes tv-univer-animation {
  0%    { -o-transform:scale(1); }
  100%  { -o-transform:scale(1.1); }
}
@-o-keyframes tv-galaxy-animation {
  0%    { -o-transform:scale(1); }
  100%  { -o-transform:scale(0.9); }
}
@-o-keyframes tv-cTg-animation {
  0%    { clip:rect(0,1366px,677px,0); }
  100%  { clip:rect(160px,1260px,570px,550px); }
}
@-o-keyframes tv-sc-animation {
  0%    { opacity:0; }
  40%   { opacity:0; }
  50%   { opacity:1; }
  100%  { opacity:1; }
}
@-o-keyframes tv-animation {
  0%    { -o-transform:scale(1.95) translate(-190px,100px); opacity:0; }
  100%  { -o-transform:scale(1) translate(-135px,160px); opacity:1; }
}
@-o-keyframes tv-starA-animation {
  0%    { -o-transform:scale(0.7); opacity:0; }
  80%   { -o-transform:scale(1); opacity:1; }
  100%  { -o-transform:scale(3); opacity:0; }
}
@-o-keyframes tv-starB-animation {
  0%    { -o-transform:scale(0.8); opacity:0; }
  80%   { -o-transform:scale(1); opacity:1; }
  100%  { -o-transform:scale(3); opacity:0; }
}
@-o-keyframes tv-TextBG-animation {
  0%    { opacity:0; }
  81%   { opacity:0; }
  100%  { opacity:1; }
}


/* Animations */
@keyframes tv-univer-animation {
  0%    { transform:scale(1); }
  100%  { transform:scale(1.1); }
}
@keyframes tv-galaxy-animation {
  0%    { transform:scale(1); }
  100%  { transform:scale(0.9); }
}
@keyframes tv-cTg-animation {
  0%    { clip:rect(0,1366px,677px,0); }
  100%  { clip:rect(160px,1260px,570px,550px); }
}
@keyframes sc-animation {
  0%    { opacity:0; }
  40%   { opacity:0; }
  50%   { opacity:1; }
  100%  { opacity:1; }
}
@keyframes tv-animation {
  0%    { transform:scale(1.95) translate(-190px,100px); opacity:0; }
  100%  { transform:scale(1) translate(-135px,160px); opacity:1; }
}
@keyframes tv-starA-animation {
  0%    { transform:scale(0.7); opacity:0; }
  80%   { transform:scale(1); opacity:1; }
  100%  { transform:scale(3); opacity:0; }
}
@keyframes tv-starB-animation {
  0%    { transform:scale(0.8); opacity:0; }
  80%   { transform:scale(1); opacity:1; }
  100%  { transform:scale(3); opacity:0; }
}
@keyframes tv-TextBG-animation {
  0%    { opacity:0; }
  81%   { opacity:0; }
  100%  { opacity:1; }
}


/* Ferigeratior */
#pro_banner #fr { background-color:#32baae; }
#fr li {
	background-repeat:no-repeat;
	height:100%;
	width:100%;
}
#fr li.bg.b1 {
	background:url(animate/fr/BG-1.jpg);
	z-index:1;
}
#fr li.bg.b2 {
	background:url(animate/fr/BG-2.jpg);
	z-index:2;
  opacity:0;
  -webkit-animation: fr-Alpha-animation 0.5s 7.5s 1 ease-in-out forwards;
  -moz-animation: fr-Alpha-animation 0.5s 7.5s 1 ease-in-out forwards;
  -ms-animation: fr-Alpha-animation 0.5s 7.5s 1 ease-in-out forwards;
  -o-animation: fr-Alpha-animation 0.5s 7.5s 1 ease-in-out forwards;
  animation: fr-Alpha-animation 0.5s 7.5s 1 ease-in-out forwards;
}
#fr li.item.fr1 {
  top: -150px;
  right: 120px;
  width:449px;
  height:1075px;
	background:url(animate/fr/item-Fr-close.png) no-repeat;
	z-index:3;
  -webkit-transform:scale(0.3);
  -moz-transform:scale(0.3);
  -ms-transform:scale(0.3);
  -o-transform:scale(03);
  transform:scale(0.3);
  -webkit-animation: fr-move-animation 4s 1 ease-in-out forwards;
  -moz-animation: fr-move-animation 4s 1 ease-in-out forwards;
  -ms-animation: fr-move-animation 4s 1 ease-in-out forwards;
  -o-animation: fr-move-animation 4s 1 ease-in-out forwards;
  animation: fr-move-animation 4s 1 ease-in-out forwards;
}
#fr li.item.fr2 {
  top:0;
  right:0;
  width:625px;
  height:655px;
	background:url(animate/fr/item-Fr-Open.png) no-repeat;
	z-index:4;
  opacity:0;
  -webkit-animation: fr-Alpha-animation 1s 3s 1 ease-in-out forwards;
  -moz-animation: fr-Alpha-animation 1s 3s 1 ease-in-out forwards;
  -ms-animation: fr-Alpha-animation 1s 3s 1 ease-in-out forwards;
  -o-animation: fr-Alpha-animation 1s 3s 1 ease-in-out forwards;
  animation: fr-Alpha-animation 1s 1 3s ease-in-out forwards;
}
#fr li.logo {
  top:228px;
  right:213px;
  width:333px;
  height:239px;
  z-index:5;
  opacity:0;
  -webkit-transform: scale(0.19);
  -moz-transform: scale(0.19);
  -ms-transform: scale(0.19);
  -o-transform: scale(0.19);
  transform: scale(0.19);
  -webkit-animation: fr-Halo-animation 5s 3s 1 ease-in-out forwards;
  -moz-animation: fr-Halo-animation 5s 3s 1 ease-in-out forwards;
  -ms-animation: fr-Halo-animation 5s 3s 1 ease-in-out forwards;
  -o-animation: fr-Halo-animation 5s 3s 1 ease-in-out forwards;
  animation: fr-Halo-animation 5s 3s 1 ease-in-out forwards;
}
#fr li.logo > div { position:absolute; }
#fr li.logo .halo {
  width:333px;
  height:239px;
  background:url(animate/fr/logo-Plasma-Halo.png) no-repeat;
  -webkit-animation: fr-Alpha-animation 0.5s 3s infinite ease-in-out alternate;
  -moz-animation: fr-Alpha-animation 0.5s 3s infinite ease-in-out alternate;
  -ms-animation: fr-Alpha-animation 0.5s 3s infinite ease-in-out alternate;
  -o-animation: fr-Alpha-animation 0.5s 3s infinite ease-in-out alternate;
  animation: fr-Alpha-animation 0.5s 3s infinite ease-in-out alternate;
}
#fr li.logo .plasma {
  width:300px;
  height:206px;
  margin:10px 15px;
  background:url(animate/fr/logo-Plasma.png) no-repeat;
}
#fr .Text-BG {
  background:#32baaf;
  z-index:2;
  opacity:0;
  -webkit-animation: fr-Alpha-animation 2s 9.5s 1 ease-out forwards;
  -moz-animation: fr-Alpha-animation 2s 9.5s 1 ease-out forwards;
  -ms-animation: fr-Alpha-animation 2s 9.5s 1 ease-out forwards;
  -o-animation: fr-Alpha-animation 2s 9.5s 1 ease-out forwards;
  animation: fr-Alpha-animation 2s 9.5s 1 ease-out forwards;
}
#fr li.Head, #fr li.Text {
	-webkit-animation-delay:5s;
	-moz-animation-delay:5s;
	-ms-animation-delay:5s;
	-o-animation-delay:5s;
	animation-delay:5s;
}
#fr li.Text { top:450px; }

/* WebKit Animations */
@-webkit-keyframes fr-move-animation {
  0%    { -webkit-transform:scale(0.3); }
  70%   { -webkit-transform:scale(1); top:-214px; right:175px; }
  80%   { -webkit-transform:scale(1); opacity:1; }
  100%  { -webkit-transform:scale(1); top:-214px; right:175px; opacity:0; }
}
@-webkit-keyframes fr-Alpha-animation {
  0%    { opacity:0; }
  100%  { opacity:1; }
}
@-webkit-keyframes fr-Halo-animation {
  0%    { opacity:0; }
  30%   { opacity:1; }
  85%   { -webkit-transform:scale(0.19); right:213px; opacity:1; }
  100%  { -webkit-transform:scale(4); right:500px; opacity:0; }
}
/* moz Animations */
@-moz-keyframes fr-move-animation {
  0%    { -moz-transform:scale(0.3); }
  70%   { -moz-transform:scale(1); top:-214px; right:175px; }
  80%   { -moz-transform:scale(1); opacity:1; }
  100%  { -moz-transform:scale(1); top:-214px; right:175px; opacity:0; }
}
@-moz-keyframes fr-Alpha-animation {
  0%    { opacity:0; }
  100%  { opacity:1; }
}
@-moz-keyframes fr-Halo-animation {
  0%    { opacity:0; }
  60%   { -moz-transform:scale(0.19); right:213px; opacity:1; }
  100%  { -moz-transform:scale(4); right:500px; opacity:0; }
}
/* ms Animations */
@-ms-keyframes fr-move-animation {
  0%    { -ms-transform:scale(0.3); }
  70%   { -ms-transform:scale(1); top:-214px; right:175px; }
  80%   { -ms-transform:scale(1); opacity:1; }
  100%  { -ms-transform:scale(1); top:-214px; right:175px; opacity:0; }
}
@-ms-keyframes fr-Alpha-animation {
  0%    { opacity:0; }
  100%  { opacity:1; }
}
@-ms-keyframes fr-Halo-animation {
  0%    { opacity:0; }
  60%   { -ms-transform:scale(0.19); right:213px; opacity:1; }
  100%  { -ms-transform:scale(4); right:500px; opacity:0; }
}
/* o Animations */
@-o-keyframes fr-move-animation {
  0%    { -o-transform:scale(0.3); }
  70%   { -o-transform:scale(1); top:-214px; right:175px; }
  80%   { -o-transform:scale(1); opacity:1; }
  100%  { -o-transform:scale(1); top:-214px; right:175px; opacity:0; }
}
@-o-keyframes fr-Alpha-animation {
  0%    { opacity:0; }
  100%  { opacity:1; }
}
@-o-keyframes fr-Halo-animation {
  0%    { opacity:0; }
  60%   { -o-transform:scale(0.19); right:213px; opacity:1; }
  100%  { -o-transform:scale(4); right:500px; opacity:0; }
}
/* Animations */
@keyframes fr-move-animation {
  0%    { transform:scale(0.3); }
  70%   { transform:scale(1); top:-214px; right:175px; }
  80%   { transform:scale(1); opacity:1; }
  100%  { transform:scale(1); top:-214px; right:175px; opacity:0; }
}
@keyframes fr-Alpha-animation {
  0%    { opacity:0; }
  100%  { opacity:1; }
}
@keyframes fr-Halo-animation {
  0%    { opacity:0; }
  60%   { transform:scale(0.19); right:213px; opacity:1; }
  100%  { transform:scale(4); right:500px; opacity:0; }
}



/* WASHING MACHINE */
#pro_banner #wm {
  background:#486986; /* Old browsers */
  background:-moz-linear-gradient(top,  #486986 0%, #8da2b4 100%); /* FF3.6+ */
  background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#486986), color-stop(100%,#8da2b4)); /* Chrome,Safari4+ */
  background:-webkit-linear-gradient(top,  #486986 0%,#8da2b4 100%); /* Chrome10+,Safari5.1+ */
  background:-o-linear-gradient(top,  #486986 0%,#8da2b4 100%); /* Opera 11.10+ */
  background:-ms-linear-gradient(top,  #486986 0%,#8da2b4 100%); /* IE10+ */
  background:linear-gradient(to bottom,  #486986 0%,#8da2b4 100%); /* W3C */
  filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#486986', endColorstr='#8da2b4',GradientType=0 ); /* IE6-9 */
}
#wm li.cloud { width:100%; height:100%; }
#wm li.cloud > div { position:absolute; background-repeat:no-repeat; }

#wm li.cloud .c1 { width:491px; height:413px; top:100px; left:0; }
#wm li.cloud .c2 { width:789px; height:280px; top:450px; left:300px; }
#wm li.cloud .c3 { width:645px; height:460px; top:30px; right:0; }

#wm li.cloud.white .c1 { background-image:url(animate/wm/item-cloud-1w.png); }
#wm li.cloud.white .c2 { background-image:url(animate/wm/item-cloud-2w.png); }
#wm li.cloud.white .c3 { background-image:url(animate/wm/item-cloud-3w.png); }

#wm li.cloud.black .c1 { background-image:url(animate/wm/item-cloud-1b.png); }
#wm li.cloud.black .c2 { background-image:url(animate/wm/item-cloud-2b.png); }
#wm li.cloud.black .c3 { background-image:url(animate/wm/item-cloud-3b.png); }

#wm li.cloud.black {
	top:0;
  z-index:2;
  -webkit-animation: wm-dTt-animation 4s 1 ease-in-out;
  -moz-animation: wm-dTt-animation 4s 1 ease-in-out;
  -ms-animation: wm-dTt-animation 4s 1 ease-in-out;
  -o-animation: wm-dTt-animation 4s 1 ease-in-out;
  animation: wm-dTt-animation 4s 1 ease-in-out;
}
#wm li.cloud.white {
  opacity:0;
  z-index:4;
  -webkit-animation: wm-BG-animation 1s 12s 1 ease-in-out forwards;
  -moz-animation: wm-BG-animation 1s 12s 1 ease-in-out forwards;
  -ms-animation: wm-BG-animation 1s 12s 1 ease-in-out forwards;
  -o-animation: wm-BG-animation 1s 12s 1 ease-in-out forwards;
  animation: wm-BG-animation 1s 12s 1 ease-in-out forwards;
}
#wm li.clothes {	
	top:700px;
	width:1366px;
	height:550px;
	z-index:6;
	background-image:url(animate/wm/item-Clothes.png);
	background-size:cover;
  -webkit-animation: wm-dTt-animation 4s 0.5s 1 ease-in-out forwards;
  -moz-animation: wm-dTt-animation 4s 0.5s 1 ease-in-out forwards;
  -ms-animation: wm-dTt-animation 4s 0.5s 1 ease-in-out forwards;
  -o-animation: wm-dTt-animation 4s 0.5s 1 ease-in-out forwards;
  animation: wm-dTt-animation 4s 0.5s 1 ease-in-out forwards;
}
#wm li.wm {
  right:50px;
  bottom:-600px;
  width:396px;
  height:577px;
  z-index:7;
  background:url(animate/wm/item-wm.png) no-repeat;
  -webkit-animation: wm-wm-animation 2s 4s 1 ease-in-out forwards;
  -moz-animation: wm-wm-animation 2s 4s 1 ease-in-out forwards;
  -ms-animation: wm-wm-animation 2s 4s 1 ease-in-out forwards;
  -o-animation: wm-wm-animation 2s 4s 1 ease-in-out forwards;
  animation: wm-wm-animation 2s 4s 1 ease-in-out forwards;
}
#wm li.wm-r {
	top:-10px;
	bottom:-10px;
	right:-550px;
  width:550px;
	z-index:10;
	overflow:hidden;
	background:url(animate/wm/BG-wm-Rotation.png) no-repeat #1d8fc6 center center;
	-webkit-box-shadow:inset 0 0 10px rgba(0,0,0,0.5);
	-moz-box-shadow:inset 0 0 10px rgba(0,0,0,0.5);
	-ms-box-shadow:inset 0 0 10px rgba(0,0,0,0.5);
	-o-box-shadow:inset 0 0 10px rgba(0,0,0,0.5);
	box-shadow:inset 0 0 10px rgba(0,0,0,0.5);
  -webkit-animation: wm-wmR-animation 2s 7s 1 ease-in-out forwards;
  -moz-animation: wm-wmwmRanimation 2s 7s 1 ease-in-out forwards;
  -ms-animation: wm-wmR-animation 2s 7s 1 ease-in-out forwards;
  -o-animation: wm-wmR-animation 2s 7s 1 ease-in-out forwards;
  animation: wm-wmR-animation 2s 7s 1 ease-in-out forwards;
}
#wm li.wm-r > div {
	position:absolute;
	top:288px;
	left:30px;
	width:489px;
	height:284px;
}
#wm li.wm-r .w1 {
	opacity:0;
	background:url(animate/wm/BG-wm-Rotation-01.png) no-repeat center center;
  -webkit-animation: wm-wmRA-animation 0.4s 6.2s ease-in-out infinite;
  -moz-animation: wm-wmRA-animation 0.4s 2.2s ease-in-out infinite;
  -ms-animation: wm-wmRA-animation 0.4s 2.2s ease-in-out infinite;
  -o-animation: wm-wmRA-animation 0.4s 2.2s ease-in-out infinite;
  animation: wm-wmRA-animation 0.4s 2.2s ease-in-out infinite;
}
#wm li.wm-r .w2 {
	opacity:0;
	background:url(animate/wm/BG-wm-Rotation-02.png) no-repeat center center;
  -webkit-animation: wm-wmRA-animation 0.4s 6.4s ease-in-out infinite;
  -moz-animation: wm-wmRA-animation 0.4s 2.4s ease-in-out infinite;
  -ms-animation: wm-wmRA-animation 0.4s 2.4s ease-in-out infinite;
  -o-animation: wm-wmRA-animation 0.4s 2.4s ease-in-out infinite;
  animation: wm-wmRA-animation 0.4s 2.4s ease-in-out infinite;
}
#wm li.bubble { width:100%; height:100%; }
#wm li.bubble > div {
	position:absolute;
  width:150px;
  height:150px;
  z-index:11;
  background:url(animate/wm/item-Bubble.png) no-repeat;
}
#wm li.bubble .b1 {
  -webkit-transform:scale(0.1);
  -moz-transform:scale(0.1);
  -ms-transform:scale(0.1);
  -o-transform:scale(0.1);
  transform:scale(0.1);
  -webkit-animation: wm-BBb1-animation 4s 10s 1 linear forwards;
  -moz-animation: wm-BBb1-animation 4s 10s 1 linear forwards;
  -ms-animation: wm-BBb1-animation 4s 10s 1 linear forwards;
  -o-animation: wm-BBb1-animation 4s 10s 1 linear forwards;
  animation: wm-BBb1-animation 4s 10s 1 linear forwards;
}
#wm li.bubble .b2 {
  -webkit-transform:scale(0.1);
  -moz-transform:scale(0.1);
  -ms-transform:scale(0.1);
  -o-transform:scale(0.1);
  transform:scale(0.1);
  -webkit-animation: wm-BBb2-animation 3s 10.2s 1 linear forwards;
  -moz-animation: wm-BBb2-animation 3s 10.2s 1 linear forwards;
  -ms-animation: wm-BBb2-animation 3s 10.2s 1 linear forwards;
  -o-animation: wm-BBb2-animation 3s 10.2s 1 linear forwards;
  animation: wm-BBb2-animation 3s 10.2s 1 linear forwards;
}
#wm li.bubble .b3 {
  -webkit-transform:scale(0.1);
  -moz-transform:scale(0.1);
  -ms-transform:scale(0.1);
  -o-transform:scale(0.1);
  transform:scale(0.1);
  -webkit-animation: wm-BBb3-animation 4.3s 9.5s 1 linear forwards;
  -moz-animation: wm-BBb3-animation 4.3s 9.5s 1 linear forwards;
  -ms-animation: wm-BBb3-animation 4.3s 9.5s 1 linear forwards;
  -o-animation: wm-BBb3-animation 4.3s 9.5s 1 linear forwards;
  animation: wm-BBb3-animation 4.3s 9.5s 1 linear forwards;
}
#wm li.bubble .b4 {
  -webkit-transform:scale(0.1);
  -moz-transform:scale(0.1);
  -ms-transform:scale(0.1);
  -o-transform:scale(0.1);
  transform:scale(0.1);
  -webkit-animation: wm-BBb4-animation 3.5s 10.8s 1 linear forwards;
  -moz-animation: wm-BBb4-animation 3.5s 10.8s 1 linear forwards;
  -ms-animation: wm-BBb4-animation 3.5s 10.8s 1 linear forwards;
  -o-animation: wm-BBb4-animation 3.5s 10.8s 1 linear forwards;
  animation: wm-BBb4-animation 3.5s 10.8s 1 linear forwards;
}

#wm li.bg-blue {
	width:100%;
	height:100%;
	z-index:3;
	opacity:0;
	background:url(animate/wm/BG-SkyRepeat.jpg) repeat-x;
  -webkit-animation: wm-BG-animation 1s 12s 1 ease-in-out forwards;
  -moz-animation: wm-BG-animation 1s 12s 1 ease-in-out forwards;
  -ms-animation: wm-BG-animation 1s 12s 1 ease-in-out forwards;
  -o-animation: wm-BG-animation 1s 12s 1 ease-in-out forwards;
  animation: wm-BG-animation 1s 12s 1 ease-in-out forwards;
}
#wm .Text-BG {
  background:#95db61;
  width:100%;
  height:100%;
  z-index:11;
  opacity:0;
  -webkit-animation: wm-BG-animation 2s 15s 1 ease-in-out forwards;
  -moz-animation: wm-BG-animation 2s 15s 1 ease-in-out forwards;
  -ms-animation: wm-BG-animation 2s 15s 1 ease-in-out forwards;
  -o-animation: wm-BG-animation 2s 15s 1 ease-in-out forwards;
  animation: wm-BG-animation 2s 15s 1 ease-in-out forwards;
}
#wm li.wm2 {
  right:150px;
  bottom:-120px;
  width:396px;
  height:577px;
  z-index:12;
  opacity:0;
  background:url(animate/wm/item-wm.png) no-repeat;
  -webkit-animation: wm-BG-animation 2s 15s 1 ease-in-out forwards;
  -moz-animation: wm-BG-animation 2s 15s 1 ease-in-out forwards;
  -ms-animation: wm-BG-animation 2s 15s 1 ease-in-out forwards;
  -o-animation: wm-BG-animation 2s 15s 1 ease-in-out forwards;
  animation: wm-BG-animation 2s 15s 1 ease-in-out forwards;
}
#wm li.Head, #wm li.Text {
	-webkit-animation-delay:10s;
	-moz-animation-delay:10s;
	-ms-animation-delay:10s;
	-o-animation-delay:10s;
	animation-delay:10s;
}
#wm li.Text { top:450px; }


/* WebKit Animations */
@-webkit-keyframes wm-dTt-animation {
  0%    { top:700px; }
  100%  { top:0; }
}
@-webkit-keyframes wm-wm-animation {
  0%    { bottom:-600px; }
  100%  { bottom:-120px; }
}
@-webkit-keyframes wm-wmR-animation {
  0%    { right:-550px; }
  100%  { right:0; }
}
@-webkit-keyframes wm-wmRA-animation {
  0%    { opacity:0; }
  100%  { opacity:1; }
}
@-webkit-keyframes wm-BG-animation {
  0%    { opacity:0; }
  100%  { opacity:1; }
}
@-webkit-keyframes wm-BBb1-animation {
  0%    { top:300px; left:1000px; opacity:0; }
  10%   { opacity:1; }
  35%   { top:200px; left:700px; }
  65%   { top:250px; left:400px; }
  100%  { top:150px; left:100px; -webkit-transform:scale(0.8); }
}
@-webkit-keyframes wm-BBb2-animation {
  0%    { top:310px; left:1020px; opacity:0; }
  5%    { opacity:1; }
  55%   { top:400px; left:850px; }
  100%  { top:350px; left:530px; -webkit-transform:scale(0.5); }
}
@-webkit-keyframes wm-BBb3-animation {
  0%    { top:330px; left:1050px; opacity:0; }
  20%   { opacity:1; }
  35%   { top:250px; left:900px; }
  65%   { top:330px; left:600px; }
  100%  { top:130px; left:300px; -webkit-transform:scale(0.3); }
}
@-webkit-keyframes wm-BBb4-animation {
  0%    { top:350px; left:1030px; opacity:0; }
  15%   { opacity:1; }
  35%   { top:200px; left:650px; }
  65%   { top:250px; left:400px; }
  100%  { top:450px; left:130px; -webkit-transform:scale(0.2); }
}
/* moz Animations */
@-moz-keyframes wm-dTt-animation {
  0%    { top:700px; }
  100%  { top:0; }
}
@-moz-keyframes wm-wm-animation {
  0%    { bottom:-600px; }
  100%  { bottom:-120px; }
}
@-moz-keyframes wm-wmR-animation {
  0%    { right:-550px; }
  100%  { right:0; }
}
@-moz-keyframes wm-wmRA-animation {
  0%    { opacity:0; }
  100%  { opacity:1; }
}
@-moz-keyframes wm-BG-animation {
  0%    { opacity:0; }
  100%  { opacity:1; }
}
@-moz-keyframes wm-BBb1-animation {
  0%    { top:300px; left:1000px; opacity:0; }
  10%   { opacity:1; }
  35%   { top:200px; left:700px; }
  65%   { top:250px; left:400px; }
  100%  { top:150px; left:100px; -moz-transform:scale(0.8); }
}
@-moz-keyframes wm-BBb2-animation {
  0%    { top:310px; left:1020px; opacity:0; }
  5%    { opacity:1; }
  55%   { top:400px; left:850px; }
  100%  { top:350px; left:530px; -moz-transform:scale(0.5); }
}
@-moz-keyframes wm-BBb3-animation {
  0%    { top:330px; left:1050px; opacity:0; }
  20%   { opacity:1; }
  35%   { top:250px; left:900px; }
  65%   { top:330px; left:600px; }
  100%  { top:130px; left:300px; -moz-transform:scale(0.3); }
}
@-moz-keyframes wm-BBb4-animation {
  0%    { top:350px; left:1030px; opacity:0; }
  15%   { opacity:1; }
  35%   { top:200px; left:650px; }
  65%   { top:250px; left:400px; }
  100%  { top:450px; left:130px; -moz-transform:scale(0.2); }
}
/* ms Animations */
@-ms-keyframes wm-dTt-animation {
  0%    { top:700px; }
  100%  { top:0; }
}
@-ms-keyframes wm-wm-animation {
  0%    { bottom:-600px; }
  100%  { bottom:-120px; }
}
@-ms-keyframes wm-wmR-animation {
  0%    { right:-550px; }
  100%  { right:0; }
}
@-ms-keyframes wm-wmRA-animation {
  0%    { opacity:0; }
  100%  { opacity:1; }
}
@-ms-keyframes wm-BG-animation {
  0%    { opacity:0; }
  100%  { opacity:1; }
}
@-ms-keyframes wm-BBb1-animation {
  0%    { top:300px; left:1000px; opacity:0; }
  10%   { opacity:1; }
  35%   { top:200px; left:700px; }
  65%   { top:250px; left:400px; }
  100%  { top:150px; left:100px; -ms-transform:scale(0.8); }
}
@-ms-keyframes wm-BBb2-animation {
  0%    { top:310px; left:1020px; opacity:0; }
  5%    { opacity:1; }
  55%   { top:400px; left:850px; }
  100%  { top:350px; left:530px; -ms-transform:scale(0.5); }
}
@-ms-keyframes wm-BBb3-animation {
  0%    { top:330px; left:1050px; opacity:0; }
  20%   { opacity:1; }
  35%   { top:250px; left:900px; }
  65%   { top:330px; left:600px; }
  100%  { top:130px; left:300px; -ms-transform:scale(0.3); }
}
@-ms-keyframes wm-BBb4-animation {
  0%    { top:350px; left:1030px; opacity:0; }
  15%   { opacity:1; }
  35%   { top:200px; left:650px; }
  65%   { top:250px; left:400px; }
  100%  { top:450px; left:130px; -ms-transform:scale(0.2); }
}
/* o Animations */
@-o-keyframes wm-dTt-animation {
  0%    { top:700px; }
  100%  { top:0; }
}
@-o-keyframes wm-wm-animation {
  0%    { bottom:-600px; }
  100%  { bottom:-120px; }
}
@-o-keyframes wm-wmR-animation {
  0%    { right:-550px; }
  100%  { right:0; }
}
@-o-keyframes wm-wmRA-animation {
  0%    { opacity:0; }
  100%  { opacity:1; }
}
@-o-keyframes wm-BG-animation {
  0%    { opacity:0; }
  100%  { opacity:1; }
}
@-o-keyframes wm-BBb1-animation {
  0%    { top:300px; left:1000px; opacity:0; }
  10%   { opacity:1; }
  35%   { top:200px; left:700px; }
  65%   { top:250px; left:400px; }
  100%  { top:150px; left:100px; -o-transform:scale(0.8); }
}
@-o-keyframes wm-BBb2-animation {
  0%    { top:310px; left:1020px; opacity:0; }
  5%    { opacity:1; }
  55%   { top:400px; left:850px; }
  100%  { top:350px; left:530px; -o-transform:scale(0.5); }
}
@-o-keyframes wm-BBb3-animation {
  0%    { top:330px; left:1050px; opacity:0; }
  20%   { opacity:1; }
  35%   { top:250px; left:900px; }
  65%   { top:330px; left:600px; }
  100%  { top:130px; left:300px; -o-transform:scale(0.3); }
}
@-o-keyframes wm-BBb4-animation {
  0%    { top:350px; left:1030px; opacity:0; }
  15%   { opacity:1; }
  35%   { top:200px; left:650px; }
  65%   { top:250px; left:400px; }
  100%  { top:450px; left:130px; -o-transform:scale(0.2); }
}
/* Animations */
@keyframes wm-dTt-animation {
  0%    { top:700px; }
  100%  { top:0; }
}
@keyframes wm-wm-animation {
  0%    { bottom:-600px; }
  100%  { bottom:-120px; }
}
@keyframes wm-wmR-animation {
  0%    { right:-550px; }
  100%  { right:0; }
}
@keyframes wm-wmRA-animation {
  0%    { opacity:0; }
  100%  { opacity:1; }
}
@keyframes wm-BG-animation {
  0%    { opacity:0; }
  100%  { opacity:1; }
}
@keyframes wm-BBb1-animation {
  0%    { top:300px; left:1000px; opacity:0; }
  10%   { opacity:1; }
  35%   { top:200px; left:700px; }
  65%   { top:250px; left:400px; }
  100%  { top:150px; left:100px; transform:scale(0.8); }
}
@keyframes wm-BBb2-animation {
  0%    { top:310px; left:1020px; opacity:0; }
  5%    { opacity:1; }
  55%   { top:400px; left:850px; }
  100%  { top:350px; left:530px; transform:scale(0.5); }
}
@keyframes wm-BBb3-animation {
  0%    { top:330px; left:1050px; opacity:0; }
  20%   { opacity:1; }
  35%   { top:250px; left:900px; }
  65%   { top:330px; left:600px; }
  100%  { top:130px; left:300px; transform:scale(0.3); }
}
@keyframes wm-BBb4-animation {
  0%    { top:350px; left:1030px; opacity:0; }
  15%   { opacity:1; }
  35%   { top:200px; left:650px; }
  65%   { top:250px; left:400px; }
  100%  { top:450px; left:130px; transform:scale(0.2); }
}



/* AIR CONDITIONING  */
#pro_banner #ac { background-color:#afdce9; }
#ac li.bg {
	background-repeat:no-repeat;
	height:100%;
	width:100%;
}
#ac li.bg.cold {
  opacity:0;
  background-image:url(animate/ac/BG-cold.jpg);
  -webkit-animation: ac-Alpha-animation 1s 2s 1 linear forwards;
  -moz-animation: ac-Alpha-animation 1s 2s 1 linear forwards;
  -ms-animation: ac-Alpha-animation 1s 2s 1 linear forwards;
  -o-animation: ac-Alpha-animation 1s 2s 1 linear forwards;
  animation: ac-Alpha-animation 1s 2s 1 linear forwards;
}
#ac li.bg.warm { background-image:url(animate/ac/BG-warm.jpg); }
#ac li.item.ac {
  top:40px;
  left:450px;
  width:681px;
  height:274px;
  z-index:10;
  background-image:url(animate/ac/item-AC.png);
  -webkit-transform:scale(0.5);
  -moz-transform:scale(0.5);
  -ms-transform:scale(0.5);
  -o-transform:scale(0.5);
  transform:scale(0.5);
  -webkit-animation: ac-AC-animation 2s 7s 1 ease-in-out forwards;
  -moz-animation: ac-AC-animation 2s 7s 1 ease-in-out forwards;
  -ms-animation: ac-AC-animation 2s 7s 1 ease-in-out forwards;
  -o-animation: ac-AC-animation 2s 7s 1 ease-in-out forwards;
  animation: ac-AC-animation 2s 7s 1 ease-in-out forwards;
}
#ac li.wind {
  width:100%;
  height:100%;
  -webkit-animation: ac-Alpha2-animation 2s 5s 1 linear forwards;
  -moz-animation: ac-Alpha2-animation 2s 5s 1 linear forwards;
  -ms-animation: ac-Alpha2-animation 2s 5s 1 linear forwards;
  -o-animation: ac-Alpha2-animation 2s 5s 1 linear forwards;
  animation: ac-Alpha2-animation 2s 5s 1 linear forwards;
}
#ac li.wind > div {
  position:absolute;
  top:210px;
  left:635px;
  width:270px;
  height:10px;
  opacity:0.1;
  background-color:rgba(255,255,255,0.81);
  -webkit-transform:perspective(800px) rotateX(45deg);
  -moz-transform:perspective(800px) rotateX(45deg);
  -ms-transform:perspective(800px) rotateX(45deg);
  -o-transform:perspective(800px) rotateX(45deg);
  transform:perspective(800px) rotateX(45deg);
  -webkit-animation: ac-Wind-animation 1s infinite linear;
  -moz-animation: ac-Wind-animation 1s infinite linear;
  -ms-animation: ac-Wind-animation 1s infinite linear;
  -o-animation: ac-Wind-animation 1s infinite linear;
  animation: ac-Wind-animation 1s infinite linear;
}
#ac li.wind .box2 {
	-webkit-animation-delay:0.25s;
	-moz-animation-delay:0.25s;
	-ms-animation-delay:0.25s;
	-o-animation-delay:0.25s;
	animation-delay:0.25s;
}
#ac li.wind .box3 {
	-webkit-animation-delay:0.5s;
	-moz-animation-delay:0.5s;
	-ms-animation-delay:0.5s;
	-o-animation-delay:0.5s;
	animation-delay:0.5s;
}
#ac li.wind .box4 {
	-webkit-animation-delay:0.75s;
	-moz-animation-delay:0.75s;
	-ms-animation-delay:0.75s;
	-o-animation-delay:0.75s;
	animation-delay:0.75s;
}
#ac li.bubble {
  width:100%;
  height:100%;
  opacity:0;
  -webkit-animation: ac-Alpha2-animation 5s 3s 1 linear forwards;
  -moz-animation: ac-Alpha2-animation 5s 3s 1 linear forwards;
  -ms-animation: ac-Alpha2-animation 5s 3s 1 linear forwards;
  -o-animation: ac-Alpha2-animation 5s 3s 1 linear forwards;
  animation: ac-Alpha2-animation 5s 3s 1 linear forwards;
}
#ac li.bubble > div {
  position:absolute;
  background:url(animate/ac/item-Bubble.png) no-repeat;
  background-size:cover;
  width:150px;
  height:150px;
  -webkit-animation: ac-bubble-animation 5s infinite linear;
  -moz-animation: ac-bubble-animation 5s infinite linear;
  -ms-animation: ac-bubble-animation 5s infinite linear;
  -o-animation: ac-bubble-animation 5s infinite linear;
  animation: ac-bubble-animation 5s infinite linear;
}
#ac li.bubble .b1 {
  top:170px;
  left:200px;
  width:50px;
  height:50px;
}
#ac li.bubble .b2 {
  top:300px;
  left:1000px;
  width:20px;
  height:20px;
	-webkit-animation-delay:0.5s;
	-moz-animation-delay:0.5s;
	-ms-animation-delay:0.5s;
	-o-animation-delay:0.5s;
	animation-delay:0.5s;
}
#ac li.bubble .b3 {
  top:264px;
  left:511px;
  width:30px;
  height:30px;
	-webkit-animation-delay:1.5s;
	-moz-animation-delay:1.5s;
	-ms-animation-delay:1.5s;
	-o-animation-delay:1.5s;
	animation-delay:1.5s;
}
#ac li.bubble .b4 {
  top:420px;
  left:400px;
  width:35px;
  height:35px;
	-webkit-animation-delay:0.75s;
	-moz-animation-delay:0.75s;
	-ms-animation-delay:0.75s;
	-o-animation-delay:0.75s;
	animation-delay:0.75s;
}
#ac li.bubble .b5 {
  top:420px;
  left:1140px;
  width:50px;
  height:50px;
	-webkit-animation-delay:1.25s;
	-moz-animation-delay:1.25s;
	-ms-animation-delay:1.25s;
	-o-animation-delay:1.25s;
	animation-delay:1.25s;
}
#ac li.bubble .b6 {
  top:470px;
  left:80px;
  width:20px;
  height:20px;
	-webkit-animation-delay:0.25s;
	-moz-animation-delay:0.25s;
	-ms-animation-delay:0.25s;
	-o-animation-delay:0.25s;
	animation-delay:0.25s;
}
#ac li.bubble .b7 {
  top:470px;
  left:680px;
  width:70px;
  height:70px;
}
#ac .Text-BG {
  background:#64d3b3;
  width:100%;
  height:100%;
  z-index:9;
  opacity:0;
  -webkit-animation: wm-BG-animation 2s 7s 1 ease-in-out forwards;
  -moz-animation: wm-BG-animation 2s 7s 1 ease-in-out forwards;
  -ms-animation: wm-BG-animation 2s 7s 1 ease-in-out forwards;
  -o-animation: wm-BG-animation 2s 7s 1 ease-in-out forwards;
  animation: wm-BG-animation 2s 7s 1 ease-in-out forwards;
}
#ac li.Head, #ac li.Text {
  z-index:12;
	-webkit-animation-delay:3s;
	-moz-animation-delay:3s;
	-ms-animation-delay:3s;
	-o-animation-delay:3s;
	animation-delay:3s;
}
#ac li.Text { top:450px; }


/* webkit Animations */
@-webkit-keyframes ac-Alpha-animation {
  0%    { opacity:0; }
  100%  { opacity:1; }
}
@-webkit-keyframes ac-Alpha2-animation {
  0%    { opacity:0; }
  5%    { opacity:1; }
  95%   { opacity:1; }
  100%  { opacity:0; }
}
@-webkit-keyframes ac-Wind-animation {
  0%    { top:210px; }
  60%   { top:460px; opacity:0.5; -webkit-transform:scale(2) perspective(100px) rotateX(35deg); }
  100%  { top:610px; height:20px; opacity:0; -webkit-transform:scale(4) perspective(100px) rotateX(80deg); }
}
@-webkit-keyframes ac-bubble-animation {
    from { -webkit-transform: rotate(0deg) translateX(20px) rotate(0deg); }
    to   { -webkit-transform: rotate(360deg) translateX(20px) rotate(-360deg); }
}
@-webkit-keyframes ac-AC-animation {
    from { -webkit-transform:scale(0.5); top:40px; left:450px; }
    to   { -webkit-transform:scale(0.8); top:260px; left:650px; }
}
/* moz Animations */
@-moz-keyframes ac-Alpha-animation {
  0%    { opacity:0; }
  100%  { opacity:1; }
}
@-moz-keyframes ac-Alpha2-animation {
  0%    { opacity:0; }
  5%    { opacity:1; }
  95%   { opacity:1; }
  100%  { opacity:0; }
}
@-moz-keyframes ac-Wind-animation {
  0%    { top:210px; }
  60%   { top:460px; opacity:0.5; -moz-transform:scale(2) perspective(100px) rotateX(35deg); }
  100%  { top:610px; height:20px; opacity:0; -moz-transform:scale(4) perspective(100px) rotateX(80deg); }
}
@-moz-keyframes ac-bubble-animation {
    from { -moz-transform: rotate(0deg) translateX(20px) rotate(0deg); }
    to   { -moz-transform: rotate(360deg) translateX(20px) rotate(-360deg); }
}
@-moz-keyframes ac-AC-animation {
    from { -moz-transform:scale(0.5); top:40px; left:450px; }
    to   { -moz-transform:scale(0.8); top:260px; left:650px; }
}
/* ms Animations */
@-ms-keyframes ac-Alpha-animation {
  0%    { opacity:0; }
  100%  { opacity:1; }
}
@-ms-keyframes ac-Alpha2-animation {
  0%    { opacity:0; }
  5%    { opacity:1; }
  95%   { opacity:1; }
  100%  { opacity:0; }
}
@-ms-keyframes ac-Wind-animation {
  0%    { top:210px; }
  60%   { top:460px; opacity:0.5; -ms-transform:scale(2) perspective(100px) rotateX(35deg); }
  100%  { top:610px; height:20px; opacity:0; -ms-transform:scale(4) perspective(100px) rotateX(80deg); }
}
@-ms-keyframes ac-bubble-animation {
    from { -ms-transform: rotate(0deg) translateX(20px) rotate(0deg); }
    to   { -ms-transform: rotate(360deg) translateX(20px) rotate(-360deg); }
}
@-ms-keyframes ac-AC-animation {
    from { -ms-transform:scale(0.5); top:40px; left:450px; }
    to   { -ms-transform:scale(0.8); top:260px; left:650px; }
}
/* o Animations */
@-o-keyframes ac-Alpha-animation {
  0%    { opacity:0; }
  100%  { opacity:1; }
}
@-o-keyframes ac-Alpha2-animation {
  0%    { opacity:0; }
  5%    { opacity:1; }
  95%   { opacity:1; }
  100%  { opacity:0; }
}
@-o-keyframes ac-Wind-animation {
  0%    { top:210px; }
  60%   { top:460px; opacity:0.5; -o-transform:scale(2) perspective(100px) rotateX(35deg); }
  100%  { top:610px; height:20px; opacity:0; -o-transform:scale(4) perspective(100px) rotateX(80deg); }
}
@-o-keyframes ac-bubble-animation {
    from { -o-transform: rotate(0deg) translateX(20px) rotate(0deg); }
    to   { -o-transform: rotate(360deg) translateX(20px) rotate(-360deg); }
}
@-o-keyframes ac-AC-animation {
    from { -o-transform:scale(0.5); top:40px; left:450px; }
    to   { -o-transform:scale(0.8); top:260px; left:650px; }
}
/* Animations */
@keyframes ac-Alpha-animation {
  0%    { opacity:0; }
  100%  { opacity:1; }
}
@keyframes ac-Alpha2-animation {
  0%    { opacity:0; }
  5%    { opacity:1; }
  95%   { opacity:1; }
  100%  { opacity:0; }
}
@keyframes ac-Wind-animation {
  0%    { top:210px; }
  60%   { top:460px; opacity:0.5; transform:scale(2) perspective(100px) rotateX(35deg); }
  100%  { top:610px; height:20px; opacity:0; transform:scale(4) perspective(100px) rotateX(80deg); }
}
@keyframes ac-bubble-animation {
    from { transform: rotate(0deg) translateX(20px) rotate(0deg); }
    to   { transform: rotate(360deg) translateX(20px) rotate(-360deg); }
}
@keyframes ac-AC-animation {
    from { transform:scale(0.5); top:40px; left:450px; }
    to   { transform:scale(0.8); top:260px; left:650px; }
}



