@charset "utf-8";
/* CSS Document */
.index_bar0 .title.active img{
    transform: translateY(0px);
	opacity: 1;
}
.index_bar0 .title.active h3{
    transform: translateY(0);
    opacity: 1;
}
.index_bar0 .swiper-slide:nth-of-type(1){
	transform: translateY(60px);
    transition: all 1s;
    transition-delay: 0.3s;
    opacity: 0;
}
.index_bar0 .swiper-slide:nth-of-type(2){
	transform: translateY(60px);
    transition: all 1s;
    transition-delay: 1s;
    opacity: 0;
}
.index_bar0 .swiper-slide.active:nth-of-type(1),.index_bar0 .swiper-slide.active:nth-of-type(2){
    transform: translateY(0);
    opacity: 1;
}
.index_bar2 .title.active img{
    transform: translateY(0px);
	opacity: 1;
}
.index_bar2 .title.active h3{
    transform: translateY(0);
    opacity: 1;
}
.index_bar2 .swiper-slide:nth-of-type(1){
	transform: translateY(60px);
    transition: all 1s;
    transition-delay: 0.3s;
    opacity: 0;
}
.index_bar2 .swiper-slide:nth-of-type(2){
	transform: translateY(60px);
    transition: all 1s;
    transition-delay: 1s;
    opacity: 0;
}
.index_bar2 .swiper-slide.active:nth-of-type(-n+2){
    transform: translateY(0);
    opacity: 1;
}
.index_bar3 .title.active img{
    transform: translateY(0px);
	opacity: 1;
}
.index_bar3 .title.active h3{
    transform: translateY(0);
    opacity: 1;
}
.index_bar3 .ul::before{
    width: 0;
    transition: all 1s;
    transition-delay: 0s;
}
.index_bar3 .ul.active::before{
    width: 30%;
}
.index_bar3 .ul .swiper-slide{
	transform: translateY(60px) skewy(-3deg) rotateY(5deg);
    transition: all 1s;
    transition-delay: 1s;
    opacity: 0;
}
.index_bar3 .ul .swiper-slide:nth-of-type(2){
    transition-delay: 1.3s;
}
.index_bar3 .ul .swiper-slide.active{
    transform: translateY(0) skewy(0) rotateY(0);
    opacity: 1;
}
.index_bar3 .ul .swiper-slide .txt{
    transition: all 1s;
    transition-delay: 1.3s;
    opacity: 0;
}
.index_bar3 .ul .swiper-slide:nth-of-type(2) .txt{
    transition-delay: 1.6s;
}
.index_bar3 .ul .swiper-slide.active .txt{
    opacity: 1;
}
.index_bar4 .trtop{
    transform: translateY(60px);
    transition: all 1s;
    opacity: 0;
}
.index_bar4 .contain .right img{
    transition-delay: 0.3s;
}
.index_bar4 .contain .right p:nth-of-type(1){
    transition-delay: 0.9s;
}
.index_bar4 .contain .right p:nth-of-type(2){
    transition-delay: 1.5s;
}
.index_bar4 .contain .right p:nth-of-type(3){
    transition-delay: 1.8s;
}
.index_bar4 .more{
    transition-delay: 2.1s;
}
.index_bar4 .trtop.active{
    opacity: 1;
    transform: translateY(0);
}
.about1 .img{
    transform: translateY(60px);
    transition: all 1s;
    opacity: 0;
    transition-delay: 0.3s;
}
.about1.active .img{
    opacity: 1;
    transform: translateY(0);
}
.about1 .title3{
    transform: translateY(-60px);
    transition: all 1s;
    transition-delay: 1s;
    position: relative;
    z-index: 5;
    opacity: 0;
}
.about1.active .title3{
    opacity: 1;
    transform: translateY(0);
}
.about1 .box h3{
    transform: translateX(0px) rotate(-90deg);
    transition: all 1s;
    opacity: 0;
    transition-delay: 0.3s;
}
.about1 .box.active h3{
    opacity: 1;
    transform: translateX(10%) rotate(-90deg);
}
.about1 .box .txt{
    transform: translateX(60px);
    transition: all 1s;
    opacity: 0;
    transition-delay: 0.6s;
}
.about1 .box.active .txt{
    opacity: 1;
    transform: translateX(0);
}
.about1s .ll{
    transform: translateY(60px);
    transition: all 1s;
    opacity: 0;
    transition-delay: 0.3s;
}
.about1s.active .ll{
    opacity: 1;
    transform: translateY(0);
}
.about1s .title4{
    transform: translateY(60px);
    transition: all 1s;
    opacity: 0;
    transition-delay: 0.3s;
}
.about1s.active .title4{
    opacity: 1;
    transform: translateY(0);
}
.about1s .box .txt p{
    transform: translateY(60px);
    transition: all 1s;
    opacity: 0;
    transition-delay: 1s;
}
.about1s.active .box .txt p{
    opacity: 1;
    transform: translateY(0);
}
.about2 .title4{
    transform: translateY(60px);
    transition: all 1s;
    opacity: 0;
    transition-delay: 0.3s;
}
.about2.active .title4{
    opacity: 1;
    transform: translateY(0);
}
.about2 .btn{
    transform: translateY(60px);
    transition: all 1s;
    opacity: 0;
    transition-delay: 0.6s;
}
.about2.active .btn{
    opacity: 1;
    transform: translateY(0);
}
.about2 .contain{
    transform: translateY(60px);
    transition: all 1s;
    opacity: 0;
    transition-delay: 1s;
}
.about2.active .contain{
    opacity: 1;
    transform: translateY(0);
}
.about3 .title4{
    transform: translateY(60px);
    transition: all 1s;
    opacity: 0;
    transition-delay: 0.3s;
}
.about3.active .title4{
    opacity: 1;
    transform: translateY(0);
}
.about3 .top dl{
    transform: translateY(60px);
    transition: all 1s;
    opacity: 0;
    transition-delay: 0.6s;
}
.about3.active .top dl{
    opacity: 1;
    transform: translateY(0);
}
.about3 ul{
    transform: translateY(60px);
    transition: all 1s;
    opacity: 0;
    transition-delay: 1s;
}
.about3.active ul{
    opacity: 1;
    transform: translateY(0);
}
.pro .title2{
    transform: translateY(60px);
    transition: all 1s;
    opacity: 0;
    transition-delay: 0.3s; 
}
.pro.active .title2{
    opacity: 1;
    transform: translateY(0);
}
.p_nav{
    transform: translateY(60px);
    transition: all 1s;
    opacity: 0;
    transition-delay: 0.6s; 
}
.pro .p_nav.on{
    opacity: 1;
    transform: translateY(0);
}
.pro .right{
    transform: translateY(60px);
    transition: all 1s;
    opacity: 0;
    transition-delay: 1s; 
}
.pro.active .right{
    opacity: 1;
    transform: translateY(0);
}
.pro_d .title2{
    transform: translateY(60px);
    transition: all 1s;
    opacity: 0;
    transition-delay: 0.3s; 
}
.pro_d.active .title2{
    opacity: 1;
    transform: translateY(0);
}
.pro_d .p_nav.on{
    opacity: 1;
    transform: translateY(0);
}
.pro_d .right{
    transform: translateY(60px);
    transition: all 1s;
    opacity: 0;
    transition-delay: 1s; 
}
.pro_d.active .right{
    opacity: 1;
    transform: translateY(0);
}
.pro_d .bar2{
    transform: translateY(60px);
    transition: all 1s;
    opacity: 0;
    transition-delay: 0.3s; 
}
.pro_d .bar2.active{
    opacity: 1;
    transform: translateY(0);
}
.pro_d .bar3{
    transform: translateY(60px);
    transition: all 1s;
    opacity: 0;
    transition-delay: 0.3s; 
}
.pro_d .bar3.active{
    opacity: 1;
    transform: translateY(0);
}
.news .title3 img{
    transform: translateY(60px);
    transition: all 1s;
    opacity: 0;
    transition-delay: 0.3s; 
}
.news.active .title3 img{
    opacity: 1;
    transform: translateY(0);
}
.news .title3 h3{
    transform: translateY(60px);
    transition: all 1s;
    opacity: 0;
    transition-delay: 0.6s; 
}
.news.active .title3 h3{
    opacity: 1;
    transform: translateY(0);
}
.news ul{
    transform: translateY(60px);
    transition: all 1s;
    opacity: 0;
    transition-delay: 1s; 
}
.news.active  ul{
    opacity: 1;
    transform: translateY(0);
}
.news_d .top h2{
    transform: translateY(60px);
    transition: all 1s;
    opacity: 0;
    transition-delay: 0.3s; 
}
.news_d.active .top h2{
    opacity: 1;
    transform: translateY(0);
}
.news_d .top span{
    transform: translateY(60px);
    transition: all 1s;
    opacity: 0;
    transition-delay: 0.8s; 
}
.news_d.active .top span{
    opacity: 1;
    transform: translateY(0);
}
.news_d .txt{
    transform: translateY(60px);
    transition: all 1s;
    opacity: 0;
    transition-delay: 1.2s; 
}
.news_d.active  .txt{
    opacity: 1;
    transform: translateY(0);
}
.contact .mbox{
    transform: translateY(-60px) translateX(-50%);
    transition: all 1s;
    opacity: 0;
    transition-delay: 0.3s; 
}
.contact.active .mbox{
    opacity: 1;
    transform: translateY(0) translateX(-50%); 
}
.contact .message .title3 img{
    transform: translateX(-60px);
    transition: all 1s;
    opacity: 0;
    transition-delay: 0.3s; 
}
.contact .message.active .title3 img{
    opacity: 1;
    transform: translateX(0); 
}
.contact .message .title3 h3{
    transform: translateY(60px);
    transition: all 1s;
    opacity: 0;
}
.contact .message .title3.active h3{
    opacity: 1;
    transform: translateY(0); 
}
.contact .message .right{
    transform: translateX(60px);
    transition: all 1s;
    opacity: 0;
    transition-delay: 0.6s; 
}
.contact .message.active .right{
    opacity: 1;
    transform: translateX(0); 
}