.index-banner-solgan,
.index-stroke-mask-round,
.index-stroke-mask-round-box span,
.index-about-title,
.index-about-title-left,
.index-about-title-right,
.index-about-info-left,
.index-about-info-right,
.index-about-info-bottom,
.a1,
.a2,
.a3,
.header-logo-img,
.header-logo span,
.header-menu-box li,
.index-banner-box,
.index-stroke-box .title,
.index-stroke-list, 
.index-service-box .title,
.index-service-list-img-box,
.index-service-list-title,
.stroke-list,
.banner-solgan-box .title,
.banner-solgan,
.data-title,
.data-title i,
.data-select-box li,
#date_group,
.stroke-page-title,
.stroke-page-info-img-box,
.stroke-out-day-box,
.stroke-offer-title, 
.stroke-offer-money,
.stroke-offer-contact,
.stroke-offer-contact span,
.stroke-flight-list-box,
.stroke-introduction-box,
.stroke-itinerary .title,
.stroke-itinerary-edit,
.stroke-related .title,
.stroke-itinerary-edit,
.stroke-related-list,
.contact-box .title,
.contact-box .title i,
.contact-info-form li,
.contact-info-list li,
.contact-info-title,
.map-box,
.service-page .title,
.service-page-img,
.service-page-editor,
.back
{
  opacity: 0;
}
.header-logo-img{
	animation: fade 2s linear 0s 1 forwards;
}
.header-logo span{
	animation: fade 2s linear 1s 1 forwards;
}
.fade{
    animation: fadeInDown 1s linear 0.2s 1 forwards;
}
.header-logo span:after{
	transform: scaleX(0);
	transform-origin: left;
	animation: line 1s linear 1.5s 1 forwards;
}
.index-solgan-line-right.active{
	transform: scaleY(1);
}
.index-solgan-line-bottom.active{
	transform: scaleX(1);
}
.index-about-info-box.active .index-about-title{
	animation: fade .6s linear 0s 1 forwards;
}

.index-about-info-box.active .index-about-title-left,
.index-about-info-box.active .index-about-title-right,
.index-about-info-box.active .index-about-info-left,
.index-about-info-box.active .index-about-info-right,
.index-about-info-box.active .index-about-info-bottom{
	opacity: 1;
	transition: all .6s linear;
	transition-delay: .6s;
}

.index-about-info-box.active .a1{
	opacity: 1;
	transition: all 1.5s linear;
	transition-delay: 1s;
}
.index-about-info-box.active .a2{
	animation: fadeInRight3 0.6s linear 1s 1 forwards;

}
.index-about-info-box.active .a3{
	animation: fade 1s linear 1.5s 1 forwards;
}

.header-menu-box li:nth-child(1){
	animation: fadeInLeft 1s linear 0s 1 forwards;
}
.header-menu-box li:nth-child(2){
	animation: fadeInLeft 1s linear .5s 1 forwards;
}

.header-menu-box li:nth-child(3){
	animation: fadeInLeft 1s linear 1s 1 forwards;
}

.header-menu-box li:nth-child(4){
	animation: fadeInLeft 1s linear 1.5s 1 forwards;
}

.header-menu-box li:nth-child(5){
	animation: fadeInLeft 1s linear 2s 1 forwards;
}
.index-banner-box{
	animation: fade 1.5s linear .5s 1 forwards;
}
.index-stroke-box.active .title,
.index-service-box.active .title
{
	animation: fade .6s linear 0s 1 forwards;
}
.index-stroke-box.active .title:after, 
.index-service-box.active .title:after{
	transform: scaleX(1);
	transition: all .4s linear;
	transition-delay: 1s;
}
.index-stroke-list.active{
	animation: fade 1s linear 0s 1 forwards;
}

/*service*/
.index-service-list-line{
  transform: scaleY(0);
  transform-origin: top;
}
.index-service-list-title-box:after{
  transform: scaleX(0);
  transform-origin: left;
}
.index-service-list.active li .index-service-list-img-box,
.service-list-box li .index-service-list-img-box{
  animation: fade 1.5s linear 1s 1 forwards;
}
.index-service-list.active li .index-service-list-line
{
  transform:  scaleY(1);
  transition: all .4s linear;
  transition-delay: 1.5s;
}
.service-list-box li .index-service-list-line{
  animation: line2 .4s linear 1.5s 1 forwards;
}
.service-list-box li .index-service-list-title-box:after,
.stroke-page-title:after{
  animation: line .4s linear 2s 1 forwards;
}
.index-service-list.active li .index-service-list-title,
.service-list-box li .index-service-list-title
{
  animation: fadeInRight2 1.5s linear 1.5s 1 forwards;
}
.index-service-list.active li .index-service-list-title-box:after
{
  transform:  scaleX(1);
  transition: all 1s linear;
  transition-delay: 2s;
}
.stroke-page-title,
.service-page .title{
  animation: fade 1s linear 1s 1 forwards;
}
.service-page{
   animation: top-up 1s ease-in 0.5s 1 forwards;
}
.service-page .title:after{
  transform: scaleX(0);
  animation: line 1s linear 1.5s 1 forwards;
}
.service-page-img{
  animation: fade 1s linear 1.5s 1 forwards;
}
.service-page-editor{
  animation: fade 1s linear 1.8s 1 forwards;
}
.back{
  animation: fade 1s linear 2s 1 forwards;
}
/*baner*/
.banner-solgan-box .title{
  animation: text 2s linear 0s 1 forwards;
}
.banner-solgan{
  animation: text2 2s linear 0.5s 1 forwards;
}
/*data*/
.data-title,
.contact-box .title{
  animation: fade 1s linear 1s 1 forwards;
}
.data-title i{
  animation: fadeInUp2 1s linear 1.5s 1 forwards;
}
.data-select-box li:nth-child(1){
  animation: fade 1s linear 1.8s 1 forwards;
}
.data-select-box li:nth-child(2){
  animation: fadeInLeft2 1s linear 1.8s 1 forwards;
}
.data-select-box li:nth-child(3){
  animation: fadeInLeft2 1s linear 2.1s 1 forwards;
}
#date_group{
  animation: fade 1s linear 2.1s 1 forwards;
}

/*stroke*/
.stroke-list{
  animation: fade 1s linear 1s 1 forwards;
}
.stroke-page-info-img-box,
.contact-box .title i{
  animation: fade 1s linear 1.5s 1 forwards;
}
.stroke-out-day-box{
  animation: fade 1s linear 1.8s 1 forwards;
}
.stroke-offer-title{
  animation: fade 1s linear 2s 1 forwards;
}
.stroke-offer-money{
  animation: fade 1s linear 2.2s 1 forwards;
}
.stroke-offer-contact{
  animation: fadeInRight2 1s linear 2.4s 1 forwards;
}
.stroke-offer-contact span{
  animation: fade 1s linear 2.6s 1 forwards;
}
.stroke-offer-contact span img{
  transform: translate(0px,20px);
  animation: mouse 2s linear 3s 1 forwards;
}
.stroke-flight-list-box{
  animation: fade 1s linear 3s 1 forwards;
}
.stroke-introduction-box{
  animation: fade 1s linear 3.2s 1 forwards;
}
.stroke-itinerary.active .title,
.stroke-related.active .title
{
  animation: fade 1s linear 0s 1 forwards;
}
.stroke-itinerary.active .stroke-itinerary-edit,
.stroke-related.active .stroke-related-list
{
  animation: fade 1s linear 0.5s 1 forwards;
}

/*contact*/
.contact-info-form li.name,
.contact-info-title{
  animation: fadeInUp2 1s linear 0.5s 1 forwards;
}
.contact-info-form li.phone,
.contact-info-list li:nth-child(2){
  animation: fadeInUp2 1s linear 0.8s 1 forwards;
}
.contact-info-form li.mail,
.contact-info-list li:nth-child(3){
  animation: fadeInUp2 1s linear 1.1s 1 forwards;
}
.contact-info-form li.contact-date,
.contact-info-list li:nth-child(4){
  animation: fadeInUp2 1s linear 1.4s 1 forwards;
}
.contact-info-form li.textarea,
.map-box,
.contact-info-list li:nth-child(5){
  animation:  fadeInUp2 1s linear 1.7s 1 forwards;
}
.contact-info-form li.button,
.contact-info-list li:nth-child(6){
  animation:  fadeInUp2 1s linear 1.9s 1 forwards;
}

@-webkit-keyframes fadeInRight2 {
  from {
    opacity: 0;
    -webkit-transform: translate3d(3%, 0, 0);
    transform: translate3d(3%, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes fadeInRight2 {
  from {
    opacity: 0;
    -webkit-transform: translate3d(3%, 0, 0);
    transform: translate3d(3%, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}


@-webkit-keyframes fadeInRight3 {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(3%, 0, 0);
    transform: translate3d(3%, 0, 0);
  }

  50%{
    opacity: 0;
    -webkit-transform: translate3d(1.5%, 0, 0);
    transform: translate3d(1.5%, 0, 0);
  }

  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes fadeInRight3 {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(3%, 0, 0);
    transform: translate3d(3%, 0, 0);
  }

  50%{
    opacity: 0;
    -webkit-transform: translate3d(1.5%, 0, 0);
    transform: translate3d(1.5%, 0, 0);
  }

  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}


/*淡入上升*/

@-webkit-keyframes fadeInDown2 {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -10px, 0);
    transform: translate3d(0, -10px, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes fadeInDown2 {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -10px, 0);
    transform: translate3d(0, -10px, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}


/*字浮出*/
@-webkit-keyframes text {
  0% {
    opacity: 0;
    text-shadow: rgba(0,0,0,0.6) 0px 0px 0px;
  }

  50% {
    opacity: 1;
    text-shadow: rgba(0,0,0,0.6) 0px 0px 0px;
  }
  100%{
    opacity: 1;
    text-shadow: rgba(0,0,0,0.6) 2px 2px 2px;
  }
}

@keyframes text {
 0% {
    opacity: 0;
    text-shadow: rgba(0,0,0,0.6) 0px 0px 0px;
  }

  50% {
    opacity: 1;
    text-shadow: rgba(0,0,0,0.6) 0px 0px 0px;
  }
  100%{
    opacity: 1;
    text-shadow: rgba(0,0,0,0.6) 2px 2px 2px;
  }
}

@-webkit-keyframes text2 {
  0% {
    opacity: 0;
    text-shadow: rgba(0,0,0,0.6) 0px 0px 0px;
  }

  50% {
    opacity: 1;
    text-shadow: rgba(0,0,0,0.6) 0px 0px 0px;
  }
  100%{
    opacity: 1;
    text-shadow: rgba(0,0,0,0.6) 3px 3px 2px;
  }
}

@keyframes text2 {
 0% {
    opacity: 0;
    text-shadow: rgba(0,0,0,0.6) 0px 0px 0px;
  }

  50% {
    opacity: 1;
    text-shadow: rgba(0,0,0,0.6) 0px 0px 0px;
  }
  100%{
    opacity: 1;
    text-shadow: rgba(0,0,0,0.6) 3px 3px 2px;
  }
}


/*下方進入*/
@-webkit-keyframes fadeInUp2 {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 10px, 0);
    transform: translate3d(0, 10px, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes fadeInUp2 {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 10px, 0);
    transform: translate3d(0, 10px, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

/*左邊進入*/
@-webkit-keyframes fadeInLeft2 {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-10px, 0, 0);
    transform: translate3d(-10px, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes fadeInLeft2 {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-10px, 0, 0);
    transform: translate3d(-10px, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}