/*banner-p*/
.banner-p{
  animation: fade 3s ease  1 alternate;
}
@-webkit-keyframes fade{
  from {
    opacity: 0;
    transform: translate3d(0, 20%, 0);
  
  }

  to {
    opacity: 1;
    transform: none;

  }
}
@keyframes fade{
  from {
    opacity: 0;
     transform: translate3d(0, 20%, 0);
  }

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

.banner-p1{
  animation: fade 3s ease  1 alternate;
}
@-webkit-keyframes fade{
  from {
    opacity: 0;
    transform: translate3d(0, 20%, 0);
  
  }

  to {
    opacity: 1;
    transform: none;

  }
}
@keyframes fade{
  from {
    opacity: 0;
     transform: translate3d(0, 20%, 0);
  }

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

.banner-p2{
  animation: fade2 6s  1 alternate; 
}
@-webkit-keyframes fade2{
 from {
    
    opacity: 0;
     transform: translate3d(0, 80%, 0);
  }

  to {
    opacity: 1;
    transform: none;
  }

}
@keyframes fade2{
 from {
    
    opacity: 0;
     transform: translate3d(0, 80%, 0);
  }

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



/*title-icon*/
.title-icon-animate{
  transform-origin: 0 100%;
  animation: title-hr 1.5s ease 1s 1 alternate;
} 
.title-icon-animate2{
	transform-origin: 0 100%;
	animation: title-hr 1.5s ease  1 alternate;
} 
@-webkit-keyframes title-hr{
  from {
    transform: scaleX(0);
 	
  }

  to {
    transform: scaleX(1);

  }
}
@keyframes title-hr{
  from {
    transform: scaleX(0);
 	
  }

  to {
    transform: scaleX(1);

  }
}
/*.title-icon:before{
  animation: title-hr-icon 1.3s ease both;
}*/

@-webkit-keyframes title-hr-icon{
  0% {
    
    opacity: 0;

  }
  80%{
     opacity: 0;
  }
  100% {
    opacity: 1;

  }

}
@keyframes title-hr-icon{
  0% {
    
    opacity: 0;

  }
  80%{
     opacity: 0;
  }
  100% {
    opacity: 1;

  }
}

/*about-icon*/
/*.about-title-icon:before{
  animation: title-hr-icon 1.3s ease both;
}*/
.about-title-icon{
	
	transform: rotate(90deg);
	animation: title-hr2 1.5s ease both;
}

@-webkit-keyframes title-hr2{
  from {
    transform: scaleY(0) rotate(90deg);

 
  }

  to {
  	transform: scaleY(1) rotate(90deg);

  }

}
 @keyframes title-hr2{
  from {
    transform: scaleY(0) rotate(90deg);

 
  }

  to {
    transform: scaleY(1) rotate(90deg);

  }
} 
/*淡入*/
.animation-fadein{
  animation: fadeIn 2s ease 1 alternate;
  display: block;
}

/*.fadeIn {
  animation: fadeIn  1.5s ease 1 alternate;

}*/
@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.fadeIn {
  animation: fadeInUp  1.5s ease 1 alternate;

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

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

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

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


/*回列表*/

.back-animate{
  animation: left1 3s ease both; 
}
@-webkit-keyframes left1{
  from {
    transform: translate3d(0%, 0, 0);
  
  }

  to {
  transform: translate3d(-100%, 0, 0);

  }
}
@keyframes left1{
  from {
    transform: translate3d(0%, 0, 0);
  
  }

  to {
  transform: translate3d(-100%, 0, 0);

  }
}



/*service*/
.service-title:after{
    animation: service 3s ease both;
}
@-webkit-keyframes service{
  from {
    transform: scaleX(0);

  }

  to {
    transform: scaleX(1);


  }
}
@keyframes service{
  from {
    transform: scaleX(0);
 
  }

  to {
    transform: scaleX(1);


  }
}





/*過場動畫*/


.loading-logo-box{
    width: 290px;
    max-width: 100%;
    display: block;
    margin: 0 auto;

}
.loading-logo{
    width: 70px;
    max-width: 100%;
    display: inline-block;
    vertical-align: bottom;
    transition: all .4s ease;
   /*  animation: fadeIn-loading 1.2s infinite ease-in-out;
    -webkit-animation-delay: -1.1s;
    animation-delay: -1.1s; */
}
.loading-logo-title{
    display: inline-block;
    font-size: 0;
    color: #d11d1d;
    font-weight: bold;
    vertical-align: bottom;

}

.loading-logo-title span:nth-child(1){
    font-size: 40px;
    font-weight: bold;
    transition: all .4s ease;
    animation: fadeIn-loading2 1.2s infinite ease-in-out;
    -webkit-animation-delay: -1.0s;
    animation-delay: -1.0s;
}
.loading-logo-title span:nth-child(2){
    font-size: 40px;
    font-weight: bold;
    transition: all .4s ease;
    animation: fadeIn-loading2 1.2s infinite ease-in-out;
    -webkit-animation-delay: -0.9s;
    animation-delay: -0.9s;
}
.loading-logo-title span:nth-child(3){
    font-size: 40px;
    font-weight: bold;
    transition: all .4s ease;
    animation: fadeIn-loading2 1.2s infinite ease-in-out;
    -webkit-animation-delay: -0.8s;
    animation-delay: -0.8s;
}
.loading-logo-title span:nth-child(4){
    font-size: 30px;
    font-weight: bold;
    transition: all .4s ease;
    animation: fadeIn-loading2 1.2s infinite ease-in-out;
    -webkit-animation-delay: -0.7s;
    animation-delay: -0.7s;
}
.loading-logo-title span:nth-child(5){
    font-size: 30px;
    font-weight: bold;
    transition: all .4s ease;
    animation: fadeIn-loading2 1.2s infinite ease-in-out;
    -webkit-animation-delay: -0.6s;
    animation-delay: -0.6s;
}
.loading-logo-title span:nth-child(6){
    font-size: 30px;
    font-weight: bold;
    transition: all .4s ease;
    animation: fadeIn-loading2 1.2s infinite ease-in-out;
    -webkit-animation-delay: -0.5s;
    animation-delay: -0.5s;
}


.animation-fadein{
  animation: fadeIn 1s ease .5s 1 alternate;
  display: block;
}
@-webkit-keyframes fadeIn-loading {
  0%, 40%, 100% { opacity: 1 }  
  20% {  opacity: 0; }
}

@keyframes fadeIn-loading {
  0%, 40%, 100% { opacity:1 }  
  20% {  opacity: 0; }
}

@-webkit-keyframes fadeIn-loading2 {
  0%, 40%, 100% { color: #d11d1d }  
  20% {      color: #f65252 }
}

@keyframes fadeIn-loading2 {
  0%, 40%, 100% { color: #d11d1d }  
  20% {      color: #f65252 }
}

/* 
@-webkit-keyframes fadeIn-logo {
  0% {
    opacity: 0;
  }

  50% {
    opacity: 1;
  }
   100% {
    opacity: 0;
  }
}

@keyframes fadeIn-logo {
  0% {
    opacity: 0;
  }

  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }

}

@-webkit-keyframes fadeIn-logo-title {
  0%{
    opacity: 0;
  }
  25% {
    opacity: 0;
  }

  75% {
    opacity: 1;
  }
  100%{
    opacity: 0;
  }
}

@keyframes fadeIn-logo-title {
  0%{
    opacity: 0;
  }
  25% {
    opacity: 0;
  }

  75% {
    opacity: 1;
  }
   100%{
    opacity: 0;
  }
}


@-webkit-keyframes fadeIn-logo-title2 {
  0%{
    opacity: 0;
  }
  25% {
    opacity: 0;
  }
  
  75% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}
@keyframes fadeIn-logo-title2 {
  0%{
    opacity: 0;
  }
  25% {
    opacity: 0;
  }
  
  75% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}



@-webkit-keyframes fadeIn {
  0%{
    opacity: 0;
  }
  25% {
    opacity: 0;
  }

  75% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@keyframes fadeIn {
  0%{
    opacity: 0;
  }
  25% {
    opacity: 0;
  }

  75% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
} */