body{ color: #000000; }
#airbudsu img{ max-width: 100%; width: 100%; vertical-align: bottom; }

.float-left{ float: left; }
.clear{ clear: both; }
.center{ text-align: center; }
.big{ font-size: 3vw; line-height: 3.8vw; }
.middle{ font-size: 3vw; line-height: 3.6vw; margin: 1vw 0px 2vw 0px;  }
.small{ font-size: 1.4vw; line-height: 2vw; }
.opacity{ opacity: 0; filter: alpha(opacity=0); }
#airbudsu .box1{ overflow: hidden; position: relative; }
#airbudsu .box1 .bigText{ font-size: 8vw; line-height: 8vw; font-weight: bold; }
#airbudsu .box1 .black{ color: #000000; width: 45%; position: absolute; left: -23%; top: 20%; text-align: right;
  transition: all 0.3s linear; -moz-transition: all 0.3s linear; -webkit-transition: all 0.3s linear; -o-transition: all 0.3s linear; 
  transform:rotate(-10deg);
  -ms-transform:rotate(-10deg);  
  -moz-transform:rotate(-10deg); 
  -webkit-transform:rotate(-10deg);
  -o-transform:rotate(-10deg);
}
#airbudsu .box1 .black.active{ top: 14%; left: 8%; }
#airbudsu .box1 .red{ color: #ffffff; width: 50%; position: absolute; right: -14%; top: 20%; 
  transition: all 0.3s linear; -moz-transition: all 0.3s linear; -webkit-transition: all 0.3s linear; -o-transition: all 0.3s linear;
   transform:rotate(-10deg);
  -ms-transform:rotate(-10deg);  
  -moz-transform:rotate(-10deg); 
  -webkit-transform:rotate(-10deg);
  -o-transform:rotate(-10deg);
}
#airbudsu .box1 .red.active{ top: 31%; right: 8%; }
#airbudsu .box1 .img1{ width: 20%; position: absolute; left: 23%; top: 34%; 
  transform:rotate(-18deg);
  -ms-transform:rotate(-18deg);
  -moz-transform:rotate(-18deg);
  -webkit-transform:rotate(-18deg);
  -o-transform:rotate(-18deg);
}
#airbudsu .box1 .img2{ width: 11%; position: absolute; left: 43%; top: 19%;  }
#airbudsu .box1 .img3{ width: 7%; position: absolute; left: 59%; top: 4%; }
#airbudsu .box1 .img4{ width: 8%; position: absolute; left: 72%; top: 1%; }
#airbudsu .box1 .smallText{ font-size: 3vw; line-height: 3vw; position: absolute; width: 40%; left: 40%; top: 65%; text-align: right; 
  color: #ffffff; 
}
#airbudsu .box1 .smallText.active{ 
  -webkit-animation:toRight 0.3s linear 0.6s forwards;
  -o-animation:toRight 0.3s linear 0.6s forwards;
  -moz-animation:toRight 0.3s linear 0.6s forwards;
  animation:toRight 0.3s linear 0.6s forwards; 
}
@-webkit-keyframes toRight{
  0% { opacity: 0; filter: alpha(opacity=0); left: 30%}
  50% { opacity: 1; filter: alpha(opacity=100); left: 30%}
  100%{ opacity: 1; filter: alpha(opacity=100); left: 40%; }
}
@keyframes toRight{
  0% { opacity: 0; filter: alpha(opacity=0); left: 30%}
  50% { opacity: 1; filter: alpha(opacity=100); left: 30%}
  100%{ opacity: 1; filter: alpha(opacity=100); left: 40%; }
}
#airbudsu .box1 .img1.active{ 
  -webkit-animation:show 0.3s linear 0.3s forwards;
  -o-animation:show 0.3s linear 0.3s forwards;
  -moz-animation:show 0.3s linear 0.3s forwards;
  animation:show 0.3s linear 0.3s forwards; 
}
#airbudsu .box1 .img2.active{ 
  -webkit-animation:show 0.3s linear 0.3s forwards;
  -o-animation:show 0.3s linear 0.3s forwards;
  -moz-animation:show 0.3s linear 0.3s forwards;
  animation:show 0.3s linear 0.3s forwards; 
  
}
#airbudsu .box1 .img3.active{ 
  -webkit-animation:show 0.3s linear 0.3s forwards;
  -o-animation:show 0.3s linear 0.3s forwards;
  -moz-animation:show 0.3s linear 0.3s forwards;
  animation:show 0.3s linear 0.3s forwards; 
}
#airbudsu .box1 .img4.active{ 
  -webkit-animation:show 0.3s linear 0.3s forwards;
  -o-animation:show 0.3s linear 0.3s forwards;
  -moz-animation:show 0.3s linear 0.3s forwards;
  animation:show 0.3s linear 0.3s forwards; 
}
@-webkit-keyframes show{
  0% { opacity: 0; filter: alpha(opacity=0); 
    transform:rotate(-18deg);
    -ms-transform:rotate(-18deg);
    -moz-transform:rotate(-18deg);
    -webkit-transform:rotate(-18deg);
    -o-transform:rotate(-18deg);
  }
  50% { opacity: 1; filter: alpha(opacity=100); 
    transform:rotate(-18deg);
    -ms-transform:rotate(-18deg);
    -moz-transform:rotate(-18deg);
    -webkit-transform:rotate(-18deg);
    -o-transform:rotate(-18deg);
  }
  100%{ opacity: 1; filter: alpha(opacity=100); 
    transform:rotate(0deg);
    -ms-transform:rotate(0deg);
    -moz-transform:rotate(0deg);
    -webkit-transform:rotate(0deg);
    -o-transform:rotate(0deg);
  }
}
@keyframes show{
  0% { opacity: 0; filter: alpha(opacity=0); 
    transform:rotate(-18deg);
    -ms-transform:rotate(-18deg);
    -moz-transform:rotate(-18deg);
    -webkit-transform:rotate(-18deg);
    -o-transform:rotate(-18deg);
  }
  50% { opacity: 1; filter: alpha(opacity=100); 
    transform:rotate(-18deg);
    -ms-transform:rotate(-18deg);
    -moz-transform:rotate(-18deg);
    -webkit-transform:rotate(-18deg);
    -o-transform:rotate(-18deg);
  }
  100%{ opacity: 1; filter: alpha(opacity=100); 
    transform:rotate(0deg);
    -ms-transform:rotate(0deg);
    -moz-transform:rotate(0deg);
    -webkit-transform:rotate(0deg);
    -o-transform:rotate(0deg);
  }
}
#airbudsu .box2{ overflow: hidden;  padding: 10% 19.4%; }
#airbudsu .box2 .li{ float: left; width: 30%; margin-right: 5%; font-size: 1vw; color: #ffffff; position: relative; }
#airbudsu .box2 .li.mr{ margin-right: 0%; }
#airbudsu .box2 .li.mt{ margin-bottom: 4%; }
#airbudsu .box2 .li .boxB{ width: 90%; left: 5%; top: 4%; position: absolute;  }
#airbudsu .box2 .li .boxB .bigs{ color: #000000; font-size: 1.4vw; line-height: 1.8vw; }
#airbudsu .box2 .li .boxB .circle{ width: 2vw; height: 2vw; overflow: hidden; border-radius: 2vw; background-color: #ffffff; display: inline-block; 
  vertical-align: middle; 
}
#airbudsu .box3{ position: relative; }
#airbudsu .box3 .img{}
#airbudsu .box3 .pbox{ width: 40%; position: absolute; left: 50%; top: 12%; }
#airbudsu .box3 .pbox .b{ font-size: 3vw; line-height: 3.4vw; margin-bottom: 1%; }
#airbudsu .box3 .pbox .m{ font-size: 3vw; line-height: 3.4vw; margin-bottom: 3%; }
#airbudsu .box3 .pbox .s{ font-size: 1.4vw; line-height: 2.4vw; }
#airbudsu .box3 .pbox .tips{ font-size: 0.8vw; line-height: 1.4vw; color: #aaaaaa; margin-top: 8%; }
#airbudsu .box4{ background-color: #000000; overflow: hidden; position: relative; }
#airbudsu .box4 .pbox{ width: 63%; position: absolute; top:70px; left: 18.5%; color: #ffffff; text-align: center; z-index: 1; }
#airbudsu .box4 .pbox .big{ background: linear-gradient(to right, #cff3ff, #80bcff); -webkit-background-clip: text; color: transparent; }
#airbudsu .box4 .pbox .middle{ margin: 0vw 0px 1vw 0px; }
#airbudsu .box4 .img{ width: 74%; position: absolute; left: 13%; bottom: -4%; display: block; }
#airbudsu .box4 .boxB{ display: none; }
#airbudsu .box4 .boxHome{ position: relative; }
#airbudsu .box4 .line{ position: absolute; top: 69.5%; left: 42%; height: 10vw; width: 2px; background-color: #ffffff;transition: all 0.3s linear; 
  opacity: 0; filter: opacity(0);
}
#airbudsu .box4 .line2{ position: absolute; top: 89.9%; left: 37%; height: 2px; width: 5vw; background-color: #ffffff;transition: all 0.3s linear; 
  opacity: 0; filter: opacity(0); 
}
#airbudsu .box4 .numLine{ font-size: 6vw; position: absolute; width: 17%; top: 88%; right: 66%; color: #ffffff; text-align: right; transition: all 0.3s linear; 
  opacity: 0; filter: opacity(0);
}
#airbudsu .box4 .line.active{ opacity: 1; filter: opacity(100); }
#airbudsu .box4 .line2.active{ opacity: 1; filter: opacity(100); }
#airbudsu .box4 .numLine.active{ opacity: 1; filter: opacity(100); }

#airbudsu .box5{ overflow: hidden; position: relative; }
#airbudsu .box5 .pbox{ width: 74%; left: 13%; top: 6%; position: absolute; color: #000000; text-align: center; }
#airbudsu .box5 .ul{ width: 92%; position: absolute; left: 6%; top: 87%; margin-left: 7.5%;  }
#airbudsu .box5 .ul .li{ position: relative; float: left; width: 33.33%; box-sizing: border-box;padding-left: 5%; }
#airbudsu .box5 .ul .l2{ padding-left: 4%; margin-left: -8%; }
#airbudsu .box5 .ul .l3{ padding-left: 4%; }
#airbudsu .box5 .ul .li .icon{ position: absolute; width: auto; left: 0%; top: 20%; }
#airbudsu .box5 .ul .li .i2{ width: auto; }
#airbudsu .box5 .ul .li .i3{ width: auto; }
#airbudsu .box5 .ul .li .b{ font-size: 2vw; line-height: 2.4vw; font-weight: bold; }
#airbudsu .box5 .ul .li .s{ font-size: 1.2vw; line-height: 1.8vw; }
#airbudsu .box5 .tips{ font-size: 0.8vw; line-height: 1.2vw; width: 70%; left: 15%; top: 96%; position: absolute; color: #82ABD4; 
  text-align: center;
}
#airbudsu .box6{ overflow: hidden; position: relative; }
#airbudsu .box6 .img1{ width: 16%; margin-left: 60%; margin-top: 8%; margin-bottom: 2%; }
#airbudsu .box6 .img2{ width: 74%; margin: 2% auto 0px auto; display: block; }
#airbudsu .box6 .img3{ position: absolute; width: 5%; top: 24%; left: 70%; }
#airbudsu .box6 .pbox{ position: absolute; width: 48%; left: 13%; top: 24%; }
#airbudsu .box6 .pbox .big{ margin-bottom: 8%; }
#airbudsu .box6 .pbox .tips{ font-size: 0.8vw; color: #aaaaaa; margin-top: 9%; }
#airbudsu .box6 .pbox .li{ font-size: 1.2vw; margin-bottom: 4%; }
#airbudsu .box6 .pbox .li .icon{ width: 4%; margin-right: 10px; vertical-align: middle; }
#airbudsu .box6 .circle-blue{ position: absolute; width: 15%; height: 24%; top: 18%; left: 65%; }
.blue-1,.blue-2, .blue-3,.blue-4{  background: url(/new/Images/airbudsu/overview/banner6_7_new.png) no-repeat top center; }
.blue-1{ -webkit-animation: scale1 0.7s linear infinite; animation: scale1 0.7s linear infinite; }
.blue-2{ -webkit-animation: scale2 0.7s linear infinite; animation: scale2 0.7s linear infinite; }
.blue-3{ -webkit-animation: scale3 0.7s linear infinite; animation: scale3 0.7s linear infinite; }
.blue-4{ -webkit-animation: scale4 0.7s linear infinite; animation: scale4 0.7s linear infinite; }
@-webkit-keyframes scale1 {
   0% {
      -webkit-transform: scale(0.1);
      transform: scale(0.1);
      opacity: 0;
      filter: alpha(opacity=0)
   }

   100% {
      -webkit-transform: scale(0.6);
      transform: scale(0.6);
      opacity: 0.3;
      filter: alpha(opacity=30)
   }
}

@keyframes scale1 {
   0% {
      -webkit-transform: scale(0.1);
      transform: scale(0.1);
      opacity: 0;
      filter: alpha(opacity=0)
   }

   100% {
      -webkit-transform: scale(0.6);
      transform: scale(0.6);
      opacity: 0.3;
      filter: alpha(opacity=30)
   }
}

@-webkit-keyframes scale2 {
   0% {
      -webkit-transform: scale(0.6);
      transform: scale(0.6);
      opacity: 0.3;
      filter: alpha(opacity=30)
   }

   100% {
      -webkit-transform: scale(0.95);
      transform: scale(0.95);
      opacity: 0.6;
      filter: alpha(opacity=60)
   }
}

@keyframes scale2 {
   0% {
      -webkit-transform: scale(0.6);
      transform: scale(0.6);
      opacity: 0.3;
      filter: alpha(opacity=30)
   }

   100% {
      -webkit-transform: scale(0.95);
      transform: scale(0.95);
      opacity: 0.6;
      filter: alpha(opacity=60)
   }
}

@-webkit-keyframes scale3 {
   0% {
      -webkit-transform: scale(0.95);
      transform: scale(0.95);
      opacity: 0.6;
      filter: alpha(opacity=60)
   }

   100% {
      -webkit-transform: scale(1.3);
      transform: scale(1.3);
      opacity: 0.3;
      filter: alpha(opacity=30)
   }
}

@keyframes scale3 {
   0% {
      -webkit-transform: scale(0.95);
      transform: scale(0.95);
      opacity: 0.6;
      filter: alpha(opacity=60)
   }

   100% {
      -webkit-transform: scale(1.3);
      transform: scale(1.3);
      opacity: 0.3;
      filter: alpha(opacity=30)
   }
}

@-webkit-keyframes scale4 {
   0% {
      -webkit-transform: scale(1.3);
      transform: scale(1.3);
      opacity: 0.3;
      filter: alpha(opacity=30)
   }

   100% {
      -webkit-transform: scale(1.8);
      transform: scale(1.8);
      opacity: 0;
      filter: alpha(opacity=0)
   }
}

@keyframes scale4 {
   0% {
      -webkit-transform: scale(1.3);
      transform: scale(1.3);
      opacity: 0.3;
      filter: alpha(opacity=30)
   }

   100% {
      -webkit-transform: scale(1.8);
      transform: scale(1.8);
      opacity: 0;
      filter: alpha(opacity=0)
   }
}
#airbudsu .box7{ position: relative; overflow: hidden; }
#airbudsu .box7 .pbox{ width: 74%; top: 8%; left: 13%; position: absolute; color: #000000; text-align: center; }
#airbudsu .box7 .pbox .big{ margin-bottom: 3%; }
#airbudsu .box8{ overflow: hidden; position: relative; }
#airbudsu .box8 .pbox{ width: 74%; margin: 4% auto 2% auto; text-align: center; }
#airbudsu .box8 .clientWindowDouble{ position: relative; }
#airbudsu .box8 .clientWindow{ position: relative; width: 100%; height: 50vw; }
#airbudsu .box8 .clientWindow .position{ position: absolute; width: 20%; left: 40%; top: 18%; }
#airbudsu .box8 .clientWindow .p1{ z-index: 1; opacity: 0; filter: opacity(0); 
  transform:scale(1.2);
  -ms-transform:scale(1.2);  
  -moz-transform:scale(1.2); 
  -webkit-transform:scale(1.2);
  -o-transform:scale(1.2);
}
#airbudsu .box8 .clientWindow .p2{ z-index: 2; 
  transform:scale(0.8);
  -ms-transform:scale(0.8);  
  -moz-transform:scale(0.8); 
  -webkit-transform:scale(0.8);
  -o-transform:scale(0.8);
}
#airbudsu .box8 .clientWindow .p3{ z-index: 1; opacity: 0; filter: opacity(0); 
  transform:scale(1.2);
  -ms-transform:scale(1.2);  
  -moz-transform:scale(1.2); 
  -webkit-transform:scale(1.2);
  -o-transform:scale(1.2);
}
#airbudsu .box8 .clientWindow .text{ text-align: center; font-size: 2vw; margin-top: 8%; }
#airbudsu .box8 .clientWindow .t2{ opacity: 0; filter: opacity(0); }
#airbudsu .box8 .clientWindow .rightShou{ position: absolute; right: 0%; top: 12%; width: 52%; }
#airbudsu .box8 .clientWindow .leftShou{ position: absolute; left: 0%; top: 56%; width: 52%;
  transform:rotate(180deg);
  -ms-transform:rotate(180deg);  
  -moz-transform:rotate(180deg); 
  -webkit-transform:rotate(180deg);
  -o-transform:rotate(180deg);
}

#airbudsu .box9{ position: relative; overflow: hidden; background-color: #F7F7F7; }
#airbudsu .box9 .pbox{ width: 40%; margin: 14% auto 14% 13%; }
#airbudsu .box9 .imgBox{ width: 16%; position: absolute; right: 13%; top: 14%; overflow: hidden; }
#airbudsu .box9 .imgTop{ position: relative; z-index: 4; }
#airbudsu .box9 .img1{ position: absolute; width: 11%; right: 32%; top: 40%; 
  transition: all 0.5s linear; -moz-transition: all 0.5s linear; -webkit-transition: all 0.5s linear; -o-transition: all 0.5s linear; 
}
#airbudsu .box9 .img11{ position: absolute; width: 11%; right: 32%; top: 40%; opacity: 0; filter: alpha(opacity=0); z-index: 2;
  transition: all 0.5s linear; -moz-transition: all 0.5s linear; -webkit-transition: all 0.5s linear; -o-transition: all 0.5s linear; 
}
#airbudsu .box9 .img11.active{ opacity: 1; filter: alpha(opacity=100); }
#airbudsu .box9 .img2{ position: absolute; width: 92%; left: 4%; top: 2%; z-index: 1; }
#airbudsu .box9 .img3{ position: absolute; width: 90%; left: 5%; bottom: -36%; z-index: 3; border-top-left-radius: 20px;
  border-top-right-radius: 20px; overflow: hidden;
  transition: all 0.4s linear 0.1s; -moz-transition: all 0.4s linear 0.1s; -webkit-transition: all 0.4s linear 0.1s; -o-transition: all 0.4s linear 0.1s;
}
#airbudsu .box9 .bg{ width: 100%; height: 100%; position: absolute; left: 0%; top: 0%; background-color: rgba(0,0,0,0.5); 
  opacity: 0; filter: alpha(opacity=0); z-index: 2;
  transition: all 0.1s linear; -moz-transition: all 0.1s linear; -webkit-transition: all 0.1s linear; -o-transition: all 0.1s linear;
}
#airbudsu .box9 .bg.active{ opacity: 1; filter: alpha(opacity=100); }
#airbudsu .box9 .img3.active{ bottom: 6%; }
#airbudsu .box10{ overflow: hidden; }
#airbudsu .box10 .pbox{ width: 74%; margin: 6% auto 4% auto; text-align: center; }
#airbudsu .box10 .img{ width: 74%; display: block; margin: 2% auto; }
#airbudsu .box11{ position: relative; overflow: hidden; }
#airbudsu .box11 .pbox{ width: 31%; left: 13%; top: 13%; position: absolute; }
#airbudsu .box11 .pbox .img{ margin-top: 10%; }
#airbudsu .box12{ overflow: hidden; position: relative; }
#airbudsu .box12 .pbox{ width: 38%; position: absolute; left: 9%; top: 25%; color: #000000; }
#airbudsu .box12 .img{  margin: 0% auto; display: block; }