.banner-title-logo,
.banner-title-img,
.mascot{
  opacity: 0;
}

.b-title,
.news-list,
.news-more,
.news-page-title,
.news-page-time,
.news-page-info-img,
.news-page-edtior,
.about-title,
.about-list,
.about-list2,
.a1,
.a2,
.a3,
.a4,
.about-carnival-title2,
.about-carnival-p,
.about-img-border,
.about-concert-box,
.about-concert-time-box,
.about-fireworks-img,
.traffic-list1-box,
.attractions-box,
.introduction-list-p,
.introduction-list1-img,
.about-fireworks-title2,
.traffic-list2-box,
.traffic-list3-box,
.traffic-list4-box{
 opacity: 0;
}
.b-title-line,
.news-page-title-line,
.news-page-line{
  transform: scale(0);
}

/* banner */
.banner-fire{
  transform: scale(0);
}
.banner-fire2-1{
  animation: firework 2s linear 0s infinite;
}
.banner-fire2-2{
  animation: firework 2s linear 0.3s infinite;
}
.banner-fire1-1{
  animation: firework2-1 2s linear 0s infinite;
}
.banner-fire1-2{
  animation: firework2-2 2s linear 0.3s infinite;
}
.banner-fire1-3{
  animation: firework2-3 2s linear 0.3s infinite;
}

.banner-title-logo{
  animation: fade 2s linear 0s 1 forwards;
}
.banner-title-img{
  animation: scale-b-fade .8s linear 0s 1 forwards;
}
.banner-waves2{
  animation: waves2 5s linear 0s infinite ;
}
.banner-waves1{
  animation: waves 6s linear 0s infinite ;
}
.mascot{
  animation: fadeInRight 1s linear 0s  forwards;
}

/* news */
.main-active .b-title{
  animation: fade .8s linear 0s 1 forwards;
}
.main-active .b-title-line{
  animation: line .8s linear 0s 1 forwards;
}
.main-active .news-list{
  animation: fade .8s linear 0.3s 1 forwards;
}
.main-active .news-more{
  animation: fade .8s linear 0.3s 1 forwards;
}
.news-page-title-line{
  transform-origin: top;
}
.main-active .news-page-title-line{
  animation: line2 .5s linear 0s 1 forwards;
}
.main-active .news-page-title{
  animation: fade .8s linear 0s 1 forwards;
}
.main-active .news-page-time{
  animation: fade .8s linear 0.2s 1 forwards;
}
.news-page-line{
  transform-origin: left;
}
.main-active .news-page-line{
  animation: line .5s linear .4s 1 forwards;
}
.main-active .news-page-info-img{
   animation: fade .8s linear 0.4s 1 forwards;
}

.main-active .news-page-edtior{
  animation: fade .8s linear 0.6s 1 forwards;
}


/* about */
.main-active .about-title{
  animation: fade .5s linear 0.2s 1 forwards;
}
.main-active .about-fireworks-title2{
   animation: fade .5s linear 0.4s 1 forwards;
}
.main-active .about-list{
  animation: fade .5s linear 0.3s 1 forwards;
}
.main-active .about-list2{
  animation: fade .5s linear 0.4s 1 forwards;
}
.main-active .a1{
  animation: fadeInLeft .8s linear 0.4s 1 forwards;
}
.main-active .a2{
  animation: fadeInRight .8s linear 0.6s 1 forwards;
}

.main-active .a3{
  animation: fadeInRight .8s linear 0.4s 1 forwards;
}

.main-active .a4{
  animation: fadeInLeft  .8s linear 0.6s 1 forwards;
}
.main-active .about-carnival-title2{
  animation: fade .5s linear 0.4s 1 forwards;
}
.main-active .about-carnival-p{
  animation: fade .5s linear 0.6s 1 forwards;
}

.main-active .about-carnival-img .about-img-border.left,
.main-active .about-carnival-img .about-img-border.right{
  animation: fadeInUp .5s linear 0.6s 1 forwards;
}
.main-active .about-carnival-img .about-img-border.mid{
  animation: fadeInDown .5s linear 0.6s 1 forwards;
}

.main-active .about-concert-box{
  animation: fade .5s linear 0.3s 1 forwards;
}

.main-active .about-concert-time-box,
.main-active .about-fireworks-img,
.main-active .traffic-list1-box{
  animation: fade .5s linear 0.3s 1 forwards;
}
.main-active .attractions-box{
  animation: fade .5s linear 0.3s 1 forwards;
}

.main-active .introduction-list3-img-box .about-img-border.left,
.main-active .introduction-list4-img-box .about-img-border.left{
  animation: fadeInLeft .5s linear 0.3s 1 forwards;
}
.main-active .introduction-list3-img-box .about-img-border.right,
.main-active .introduction-list4-img-box .about-img-border.right{
  animation: fadeInRight .5s linear 0.3s 1 forwards;
}
.main-active .introduction-list3-img-box .about-img-border.mid,
.main-active .introduction-list4-img-box .about-img-border.mid{
  animation: fade .5s linear 0.3s 1 forwards;
}
.main-active .introduction-list-p{
  animation: fade .5s linear 0.3s 1 forwards;
}

.main-active .introduction-list1-img{
  animation: fade .5s linear 0.3s 1 forwards;
}
.main-active .traffic-list2-box,
.main-active .traffic-list3-box,
.main-active .traffic-list4-box{
  animation: fade .5s linear 0.3s 1 forwards;
}