.index-banner-slong-title,
.index-banner-slong-p{
  opacity: 0;
}
.pages-main-bg{
  animation: banner-slick2 1s ease-out 0s 1 both;
}

.index-banner-slong.slick-active .index-banner-slong-title{
  animation: index-banner-slong-p 1s ease 0s 1 forwards;
}

.index-banner-slong.slick-active .index-banner-slong-p:nth-child(2){
  animation: index-banner-slong-p 1s ease .3s 1 forwards;
}
.index-banner-slong.slick-active .index-banner-slong-p:nth-child(3){
  animation: index-banner-slong-p 1s ease .6s 1 forwards;
}

@keyframes banner-slick2 {
  from {
      opacity: 0.5;

      transform: scale(1.1) translate(0px , -40px);
  }
  to {
      opacity: 1;
      transform: scale(1) translate(0px , 0px);
  }
}
@keyframes index-banner-slong-p {
  from {
      opacity: 0;
      transform: skewX(-10deg);
      -webkit-transform: translate3d(0, 50%, 0) skewX(-10deg);
      transform: translate3d(0, 50%, 0) skewX(-10deg);
  }
  to {
      opacity: 1;
      -webkit-transform: translate3d(0, 0%, 0) skewX(-10deg);
      transform: translate3d(0, 0%, 0) skewX(-10deg);
  }
}

/*-----------------------------------------------------------*/
.header-style1.header2{
  padding: 10px 0;
  background-color: #FFF;
  box-shadow: rgba(0,0,0,0.75) 0px 1px 3px;
}


#index .header-style1.header2{
  background-color: #FFF;
}

.marketing-list-mask,
.business-list-img-mask{
  width: 100%;
  height: 100%;
  display: block;
  background-color: #61c1be;
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  opacity: 0;
  transform: translate(-100px,0px) scale(1,1);
}
.marketing-list.active .marketing-list-mask,
.business-list-block.active .business-list-img-mask,
.marketing_page_right.active .marketing-list-mask,
.promotion-list.active .marketing-list-mask{
  opacity: 1;
  animation: marketing-list-mask .5s linear 0s 1 both;
}
.marketing-list.active .marketing-list-img-box .main-bg,
.business-list-block.active .business-list-img-box .main-bg,
.marketing_page_right.active .marketing-page-info-list-img .main-bg,
.promotion-list.active .promotion-list-img-box .main-bg{

  animation: fade .5s linear .2s 1 forwards; 
}
.marketing-list-img-box .main-bg,
.business-list-img-box .main-bg,
.marketing-page-info-list-img .main-bg,
.promotion-list-img-box .main-bg{
  opacity: 0;

}

@keyframes marketing-list-mask {
  0%{
    transform: translate(-100px,0px) scale(1,1);
  }
  50%{
    transform: translate(0px,0px) scale(1,1);
    transform-origin: right;
  }
  100%{
    transform: translate(0px,0px) scale(0,1);
    transform-origin: right;
  }
}
/*---------------------------------*/
.main-title,
.business-list-info-title,
.business-list-article,
.business-list-read,
.business-page-info-img,
.business-page-info,
.marketing_page_title,
.marketing_page_img,
.marketing-page-edit-box,
.promotion-title-box,
.promotion-article,
.promotion-page-box,
.faq-list {
  opacity: 0;
}

.main-title-line,
.main-title-line:after{
  transform: scale(0,1);
}
.promotion-list-border-box .promotion-list-border-top{
  transform: scale(0,1);
  transform-origin: left;
}
.promotion-list-border-box .promotion-list-border-left{
   transform: scale(1,0);
  transform-origin: top;
}

.main-title-line:after{
  transform-origin: right;
}
.main-title-line{
  transform-origin: left;
}

.main-title-box.active .main-title{
  animation: fade .5s ease 0s 1 forwards;
}
.main-title-box.active .main-title-line{
  animation: line .5s linear 0s 1 forwards;
}


.main-title-box.active .main-title-line:after{
  animation: line .5s ease .5s 1 forwards;
}
.business-list-block.active .business-list-info-title{
  animation: fade .5s ease 0s 1 forwards;
}
.business-list-block.active .business-list-article{
  animation: fadeInUp .5s ease 0s 1 forwards;
}
.business-list-block.active .business-list-read{
  animation: fade .5s ease .2s 1 forwards;
}



.business-page-info-img.active{
 animation: fadeInUp .8s ease 0s 1 forwards;
}
.business-page-info.active{
  animation: fade .8s ease .2s 1 forwards;
}

.marketing_page_left.active .marketing_page_title{
  opacity: 1;
}

.marketing_page_left.active .marketing_page_img{
  animation: fadeInUp .8s ease 0s 1 forwards;
}

.marketing_page_left.active .marketing-page-edit-box{
  animation: fade .8s ease .2s 1 forwards;
}

.promotion-list.active .promotion-list-img-box{

  box-shadow: rgba(0, 0, 0, 0.75) 1px 1px 3px;
}
.promotion-list.active .promotion-list-info-box{

  box-shadow: rgba(0, 0, 0, 0.75) 1px 1px 3px;
}


.promotion-list.active .promotion-list-border-top{
  animation: line .8s ease .5s 1 forwards;
}
.promotion-list.active .promotion-list-border-left{
  animation: line2 .8s ease .5s 1 forwards;
}

.promotion-page-box .promotion-list-border-top{
  animation: line .3s linear .5s 1 both;
}
.promotion-page-box .promotion-list-border-left {
  animation: line2 .3s linear .5s 1 both;
}
.promotion-page-box .promotion-list-border-box2 .promotion-list-border-top{
  animation: line .3s linear .5s 1 both;
  transform-origin: right;
}
.promotion-page-box .promotion-list-border-box2 .promotion-list-border-right{
  animation: line2 .3s linear .5s 1 both;
  transform-origin: top;
}
.promotion-page-box .promotion-list-border-box3 .promotion-list-border-bottom{
  animation: line .3s linear .5s 1 both;
  transform-origin: right;
}
.promotion-page-box .promotion-list-border-box3 .promotion-list-border-right{
  animation: line2 .3s linear .5s 1 both;
  transform-origin: bottom;
}
.promotion-page-box .promotion-list-border-box4 .promotion-list-border-bottom{
  animation: line .3s linear .5s 1 both;
  transform-origin: left;
}
.promotion-page-box .promotion-list-border-box4 .promotion-list-border-left{
  animation: line2 .3s linear .5s 1 both;
  transform-origin: bottom;
}


.promotion-list.active .promotion-title-box{
  animation: fade .8s ease .2s 1 forwards;
}

.promotion-list.active .promotion-article{
  animation: fadeInUp .8s ease .3s 1 forwards;
}

.promotion-page-box{
  animation: fadeInUp .8s ease .0s 1 forwards;

}

.faq-list.active{
  animation: fade .8s ease 0s 1 forwards;
}