/* 动画开始 */
.header-wrap{
    border-bottom: 0;
}
.bannerFla{    
    position: relative;
    margin:0 auto;
    background:url(../images/ele_img_1.png) no-repeat;
    background-size: 100% 100%;
    font-size: 19px;
    overflow: hidden;
}
.bannerFla:after{
    content: '';
    display: block;
    padding-top: 45%;

}
.banner-bar{
    position: absolute;
    left:50%;
    top:50%;
    transform: translate(-50%,-50%);
    animation:bannerBar 40s linear;
    background:#fff;
    width:100%;
    height:100%;
    opacity: 0;
}
.banner-line{
    z-index: 1;
    position: absolute;
    left:50%;
    top:50%;
    width:100%;
    height:1px;
    background:#fff;
    transform: translate(-50%,0);
    animation:bannerLine 40s linear;
    opacity: 0;
}
.vertical-line{
    z-index: 1;
    position: absolute;
    width:100%;
    height:100%;    
}
.vertical-line:after,.vertical-line:before,.vertical-line span{
    top:0;
    content: '';
    display: block;
    position: absolute;
    height:100%;
    border-left: 1px solid #fff;
    opacity: 0;
}
.vertical-line:before{
    left:25%;
    animation:verticalLine1 40s linear;
}
.vertical-line span{
    left:50%;
    animation:verticalLine2 40s linear;
    animation-delay: 0.4s;
}
.vertical-line:after{
    left:75%;
    animation:verticalLine3 40s linear;
    animation-delay: 0.8s;
}
.banner-logo{    
    z-index: 3;
    position: absolute;
    left:0;
    top:25%;
    width:25%;
    padding:0 3%;
    box-sizing: border-box;
    transform:translate(0, -50%) rotate(0deg) scale(.6);
    animation:bannerLogo 40s linear;
    opacity: 0;
    animation-fill-mode: forwards;
}
.banner-logo img{
    width: 100%;
}
.banner-text{
    position: absolute;
    z-index: 3;
    top:50%;
    left:48%;
    width:25%;
    box-sizing: border-box;
    padding:5px 3%;
    color:#fff;
    opacity: 0;
    font-size:1em;
    animation:bannerText 40s linear;
}
.banner-title{
    position: absolute;
    z-index: 3;
    top:25%;
    left:77%;
    width:25%;
    box-sizing: border-box;
    padding:5px 3%;
    color:#fff;
    font-size:1.5em;
    transform:translate(0, -50%);
    opacity: 0;
    animation:bannerTitle 40s linear;
    line-height: 120%;
}
.bannerFlaImg{
    position: absolute;
    width:25%;
    height:50%;
    background-position: center center;
    background-size: cover;
    overflow: hidden;
    background-repeat: no-repeat;
}
.bannerFlaImg::after{
    position: absolute;
    width:100%;
    height:100%;
    content: '';
    display: block;
}
.bannerFlaImg p{    
    position: absolute;
    padding:5px 10px;
    right:10px;
    bottom:10px;
    color:#fff;
    background:rgba(0,0,0,.6);
    border-radius: 5px;
}
.bannerFlaImg.img1{
    left:0;
    top:0;
    animation:flaImg1 40s linear;
    opacity: 0;
}
.bannerFlaImg.img1::after{   
    background:#fff;
    animation:flaImg1After 40s linear;
}
.bannerFlaImg.img2{
    top:50%;
    left:50%;
    animation:flaImg2 40s linear;
    opacity: 0;
}
.bannerFlaImg.img2::after{   
    background:#fff;
    animation:flaImg2After 40s linear;
}
.bannerFlaImg.img3{
    top:50%;
    left:75%;
    animation:flaImg3 40s linear;
    opacity: 0;
}
.bannerFlaImg.img3::after{   
    background:#fff;
    animation:flaImg3After 40s linear;
}
.bannerFlaImg.img4{
    top:50%;
    left:25%;
    animation:flaImg4 40s linear;
    opacity: 0;
}
.bannerFlaImg.img4::after{   
    background:#fff;
    animation:flaImg4After 40s linear;
}
.bannerFlaImg.img5{
    top:0%;
    left:75%;
    animation:flaImg5 40s linear;
    opacity: 0;
}
.bannerFlaImg.img5::after{   
    background:#fff;
    animation:flaImg5After 40s linear;
}
.bannerFlaImg.img6{
    top:0%;
    left:0%;
    width:50%;
    height: 100%;
    animation:flaImg6 40s linear;
    opacity: 0;    
    z-index: 2;
    background-position: center bottom;
}
.bannerFlaImg.img6::after{   
    height:150%;
    transform: translateY(0);
    background:url(../images/shade1_1.png) no-repeat left bottom;
    animation:flaImg6After 40s linear;
    background-size: 100% 100%;
    
}
.bannerFlaImg.img7{
    top:50%;
    left:50%;
    width:25%;
    animation:flaImg7 40s linear;
    opacity: 0;   
}
.bannerFlaImg.img7::after{   
    background:#fff;
    animation:flaImg7After 40s linear;
}
.bannerFlaImg.img8{
    top:0%;
    left:75%;
    width:25%;
    animation:flaImg8 40s linear;
    opacity: 0;   
    background-size:cover;
    background-position: left 0;
}
.bannerFlaImg.img8::after{   
    background:#aaff75;
    animation:flaImg8After 40s linear;
}
.bannerFlaImg.img17{
    top:50%;
    left:75%;
    width:25%;
    animation:flaImg17 40s linear;
    opacity: 0;   
    background-size:cover;
    background-position: left 0;
}
.bannerFlaImg.img17::after{   
    background:#aaff75;
    animation:flaImg17After 40s linear;
}
.bannerFlaImg.img9{
    top:0%;
    left:50%;
    width:23%; 
    height:50%; 
    animation:flaImg9 40s ease-out;
    background-position: center 50%;
    opacity: 0;
}
.bannerFlaImg.img10{
    top:50%;
    left:-50%;
    width:25%; 
    height:50%; 
    animation:flaImg10 40s ease-out;    
    background-position: center 25%;
    opacity: 0;
}
.bannerFlaImg.img11{
    top:0%;
    left:75%;
    width:25%; 
    height:100%; 
    animation:flaImg11 40s ease-out;
    opacity: 0;
    z-index: 2;    
    margin-left:1px;
}
.bannerFlaImg.img11::after{   
    background:#cee052;
    animation:flaImg11After 4s linear infinite;
}
.bannerFlaImg.img11 div{
    position: absolute;
    left:0px;
    top:0;
    bottom:0;
    width:100%; 
    height:100%;
    overflow: hidden;

}
.bannerFlaImg.img11 div img{   
    position: absolute; 
    right:0;
    min-width:100%;
    height: 100%    
}
.bannerFlaImg.img11 div:nth-child(1){
    animation:flaImg11Left 40s ease-out;
    transform:translateX(-100%)
}
.bannerFlaImg.img11 div:nth-child(2){
    animation:flaImg11Left 40s ease-out;
    transform:translateX(-100%);
    animation-delay: 3s;    
    text-align: right;
}
.bannerFlaImg.img12{
    top:50%;
    left:48%;
    width:27%; 
    height:50%; 
    animation:flaImg12 40s ease-out;
    opacity: 0;    
}
.bannerFlaImg.img13{
    top:50%;
    left:48%;
    width:27%; 
    height:50%; 
    animation:flaImg13 40s ease-out;
    opacity: 0;        
}

.bannerFlaImg.img14{
    top:0%;
    left:0%;
    width:0; 
    height:0; 
    animation:flaImg14 40s ease-out;
    background-position: right 30%;
}
.bannerFlaImg.img15{
    top: 0;
    left: 48%;
    width: 0%; 
    height:0%; 
    animation:flaImg15 40s ease-out;          
}
.bannerFlaImg.img16{
    top:50%;
    left:25%;
    width:0; 
    height:0; 
    animation:flaImg16 40s ease-out;
    background-color: #f4f0f1;
    background-size: cover;
    background-position: center center;
}

@media screen and (min-width:700px){

@keyframes bannerBar{
    0%{
        opacity: 1;;        
    }
    0.4%{
        background:#993300;
        width:5%;
        height:8%;

    }
    1%{
        background:#993300;
        width:64%;
        opacity: 1;
    }
    1.6%{
        opacity: 0;
    }   
    1.8%{
        opacity: 1;   
    }           
    2%{
        width:100%;
        height:8%;
    }
    2.2%{
        height:100%;
        background:#fff;
        opacity: 1;
    }
    2.5%{       
        opacity: 0;
    }
    100%{       
        opacity: 0;
    }
}

@keyframes bannerLine{    
    0%{
        opacity: 0;
    }
    2.5%{        
        opacity: 0;
    }
    2.6%{
        opacity: 1;
    }
    84%{
        opacity: 1;

    }
    84.5%{        
        opacity: 0;  
    }
}

@keyframes verticalLine1{    
    0%{
        opacity: 0;
    }
    2.6%{
       
        opacity: 0;
    }
    2.8%{        
        opacity: 1;
    }
    22.5%{   
        left:25%;
        opacity: 1;        
    }
    23.8%{   
        left:15%;        
    }
    24.5%{   
        left:50%;
        
    }
    51%{     
        left: 50%;   
    }
    52%{     
        left: 25%;   
    }
    84%{
        opacity: 1;
    }
    84.5%{        
        opacity: 0;  
    }
    100%{     
        left: 25%;   
    }
}
@keyframes verticalLine2{    
    0%{
        opacity: 0;
    }
   2.6%{
       
        opacity: 0;
    }
    2.8%{        
        opacity: 1;
    }
    51%{     
        left: 50%;   
    }    
    51.5%{     
        left: 48%;   
        opacity: 1;  
    }
    83%{
        opacity: 1;
    }
    83.5%{        
        opacity: 0;  
    }
    100%{     
        left: 48%;   
    }
}
@keyframes verticalLine3{    
    0%{
        opacity: 0;
    }
    2.6%{
       
        opacity: 0;
    }
    2.8%{        
        opacity: 1;
    }
    34%{        
        left: 75%;   
        opacity: 1;
    } 
    35%{        
        left: 85%;   
        opacity: 1;
    } 
    36%{        
        left: 75%;   
        opacity: 1;
    } 
    
    52%{     
        left: 75%;   
        opacity: 1;  
    }
    82%{
        opacity: 1;
    }
    82.5%{        
        opacity: 0;  
    }
    100%{     
        left: 75%;   
    }
}

@keyframes bannerLogo{       
    5%{
        opacity: 0;
    }
    5.25%{
        opacity: 1;
        left:0;
    }
    6%{        
        left:44%;
        top:25%;
    }
    6.5%{        
        left:44%;
        top:40%;
    }
    9%{    
        left:44%;
        top:40%;
        transform:translate(0, -50%) rotate(0deg) scale(.6);
        opacity: 1;
    }
    10%{    
        left:44%;
        top:40%;
        transform:translate(50%, -100%) rotate(160deg) scale(0.3);
        opacity: 0;
    }
    85%{    
        left:50%;
        top:50%;
        transform:translate(-50%, -50%) rotate(0) scale(1.5);
        opacity: 0;
    }
    87%{    
        left:50%;
        top:50%;
        transform:translate(-50%, -50%) rotate(0) scale(1);
        opacity: 1;
    }
    100%{    
        left:50%;
        top:50%;
        transform:translate(-50%, -50%) rotate(0) scale(1);
        opacity: 1;
    }
    
}
@keyframes bannerText{       
   
    6.5%{        
        opacity: 0;
    }
    6.8%{        
        opacity: 1;
    }
    7%{        
        opacity: 0;
    }
    7.5%{        
        opacity: 1;
        left:48%;
    }
    8%{    
        left:50%;    
    }
    8.2%{    
        left:48%;    
    }
    10.2%{ 
        left:48%;    
        top:50%;
    }
    10.8%{    
        top:45%;        
    }
    31.4%{  
        left:48%; 
        top:45%; 
    }
    
    32.8%{  
        left:23%; 
        top:45%;  
        opacity: 1;
    }

    51%{     
        left:23%; 
        top:45%;  
    }
    52%{     
        left:48%; 
        top:45%; 
        opacity: 1;   
    }
    75%{     
        top:45%; 
    }
    76%{     
        left:48%; 
        top:65%; 
        transform: translate(0, 0);
        opacity: 1;   
    }
    84%{
        opacity: 1;
    }
    84.5%{        
        opacity: 0;  
    }
    100%{     
        left:48%; 
        top:65%;
    }
}
@keyframes bannerTitle{     
    9.1%{
        opacity: 0;
    } 
    9.2%{    
        top:25%;
        left:77%;  
        color:#fff;
        opacity: 1;
    }
    10.2%{    
        top:40%;
        left:48%; 
        color:#FF9000;
    }
    10.8%{    
        top:37%;        
    }
    29.6%{  
        color:#FF9000;                
        left:48%;
    }
    30.6%{   
        color:#ffff01; 
        top:37%; 
        left:23%;
        opacity: 1;
    }
    51%{     
        top:37%; 
        left:23%;  
    }
    52%{     
        left:48%; 
        top:37%; 
        color:#ffff01; 
        opacity: 1;   
    }
    74%{     
        top:37%; 
        transform: translate(0, -50%);
    }
    75%{     
        left:48%; 
        top:50%; 
        transform: translate(0, 0);
        opacity: 1;   
    }
    84%{
        opacity: 1;
    }
    84.5%{
        left:48%; 
        top:50%; 
        transform: translate(0, 0);
        color:#ffff01; 
        opacity: 0;  
    }
    100%{ 
        opacity: 0;                 
    }  
}
@keyframes flaImg1{         
    10.8%{    
        opacity: 0;
    }
    11.2%{   
        opacity: 1;
        
    }   
    20%{
        left:0;
        top:0;
        width:25%;
        height:50%;
    } 
    21%{
        left:12.5%;
        top:25%;
        width:0;
        height:0;
    } 
    100%{
        left:12.5%;
        top:25%;
        width:0;
        height:0;
    } 
}
@keyframes flaImg1After{    
    11.2%{   
        opacity: 1;
        
    }               
    12.8%{   
        opacity: 0;
        
    }   
    15.2%{ 
        opacity: 0;
        
    }    
    15.6%{   
        opacity: .4;
        
    }  
    16%{   
        background:#fff;
        opacity: 0;
        
    }  
    19%{   
        background:#aaff75;
        opacity: 0;
        
    }  
    20%{   
        opacity: 1;
        
    }   
}
@keyframes flaImg2{         
    11.2%{    
        opacity: 0;
    }
    11.6%{   
        opacity: 1;
        
    }   
    32%{  
        opacity: 1;
    }    
    34%{           
        opacity: 0;
    } 
   
}
@keyframes flaImg2After{    
    11.6%{   
        opacity: 1;
        
    }               
    12.2%{   
        background:#fff;
        opacity: 0;
        
    }   
    15.8%{ 
        background:#ff9000;
        opacity: 0;
        
    }    
    16.2%{   
        opacity: .4;
        
    }  
    16.6%{   
        background:#ff9000;
        opacity: 0;
        
    } 
    30.8%{  
        background:#fff;  
        opacity: 0;
    }
    32%{  
        opacity: 0;
    }    
    33%{           
        opacity: 1;
    }
    
}
@keyframes flaImg3{         
    11.6%{    
        opacity: 0;
    }
    12%{   
        opacity: 1;
        
    }
    31.4%{  
        opacity: 1;
    }    
    32.8%{           
        opacity: 0;
    }
}
@keyframes flaImg3After{    
    12%{   
        opacity: 1;    
    }               
    12.6%{   
        opacity: 0;
        background:#fff;
    }
    13.6%{ 
        background:#cee052;  
        opacity: 0;
        
    }
    15%{   
        opacity: .4;
        
    }
    15.4%{   
        background:#cee052;  
        opacity: 0;
        
    }   
    30.2%{  
        background:#fff;  
        opacity: 0;
    }
    30.6%{  
        opacity: 1;
    }
    31%{   
       opacity: 0;
    }
    31.4%{  
        opacity: 0;
    }    
    32.8%{           
        opacity: 1;
    }
}
@keyframes flaImg4{         
    12%{    
        opacity: 0;
    }
    12.4%{   
        opacity: 1;
        
    }
    21.5%{
        top: 50%;
        left: 25%;
        width:25%;
        height:50%;
    } 
    22.5%{
        top: 75%;
        left: 37.5%;
        width:0;
        height:0;
    } 
    100%{
        top: 75%;
        left: 37.5%;
        width:0;
        height:0;
    } 
   
}
@keyframes flaImg4After{    
    12.4%{   
        opacity: 1;
        
    }               
    13%{   
        opacity: 0;
        
    }   
    14.6%{ 
        opacity: 0;
        
    }
    15%{   
        opacity: .4;
        
    }
    15.4%{   
        background:#fff;
        opacity: 0;
        
    }   
    21.5%{   
        background:#ff9000;
        opacity: 0;
        
    }     
    22.5%{   
        opacity: 1;
        
    }   
    
}
@keyframes flaImg5{         
    12.4%{    
        opacity: 0;
    }
    12.8%{   
        opacity: 1;
        
    }
    31.8%{  
        opacity: 1;
    }    
    33%{           
        opacity: 0;
    }
   
}
@keyframes flaImg5After{    
    12.8%{   
        opacity: 1;
        
    }               
    13.4%{   
        background:#fff;
        opacity: 0;
        
    }   
    15.8%{ 
        background:#aaff75;
        opacity: 0;
        
    }    
    16.2%{   
        opacity: .4;
        
    }  
    16.6%{   
        background:#aaff75;
        opacity: 0;
    }
    29.8%{  
        background:#fff;
        opacity: 0;
    }
    30.2%{  
        opacity: 1;
    }
    30.6%{   
       opacity: 0;
    }
    31.8%{  
        opacity: 0;
    }    
    33%{           
        opacity: 1;
    }
}

/*  -7% */
@keyframes flaImg6{         
    24%{    
        opacity: 0;        
    }
    25%{          
        opacity: 1;
    }
        
    50%{        
        opacity: 1;
    }
    51%{        
        opacity: 0;
    }
}
@keyframes flaImg6After{  
    25%{                  
        transform: translateY(0);    
    }  
    27%{   
        transform: translateY(-100%);
        
    }
    28%{   
        transform: translateY(-100%);
        opacity: 1; 
    }
    28.5%{   
        transform: translateY(-100%);
        opacity: 0; 
    }
    28.8%{   
        transform: translateY(0);
    }
    29.2%{   
        opacity: 1; 
        
    }
    29.6%{   
        opacity: 0; 
        
    }
    30.8%{  
        opacity: 0;
    }
    31.2%{  
        opacity: 1;
    }
    31.6%{   
       opacity: 0;
    }
    100%{   
        opacity: 0;
    }
    
}

@keyframes flaImg7{         
    38%{        
        opacity: 0;
    }
    39%{        
        opacity: 1;
    } 
    50%{        
        opacity: 1;
    }
    51%{        
        opacity: 0;
    }
}
@keyframes flaImg7After{  
    39%{        
        opacity: 1;
    }
    40%{        
        opacity: 0;
    }
    50%{        
        opacity: 0;
    }
    51%{        
        opacity: 1;
    }
    
}

@keyframes flaImg8{             
    39%{        
        opacity: 0;
    }
    40%{        
        opacity: 1;
    } 
    41%{        
        background-position: 0 0;
    } 
    49%{        
        opacity: 1;
        background-position: right 0;
    } 
    51%{        
        opacity: 0;
        background-position: right 0;
    } 
}
@keyframes flaImg8After{  
    37%{        
        opacity: 0;
    }
    39%{        
        opacity: 1;
    }
    41%{        
        opacity: 0;
    }
    49%{        
        opacity: 0;
    } 
    50.5%{        
        opacity: 1;
    } 
    51.5%{        
        opacity: 0;
    }
    
}
@keyframes flaImg17{             
    40%{        
        opacity: 0;
    }
    41%{        
        opacity: 1;
    } 
   
    49%{        
        opacity: 1;
    } 
    51%{        
        opacity: 0;
    } 
}
@keyframes flaImg17After{  
    38%{        
        opacity: 0;
    }
    40%{        
        opacity: 1;
    }
    41%{        
        opacity: 0;
    }
    49%{        
        opacity: 0;
    } 
    50.5%{        
        opacity: 1;
    } 
    51.5%{        
        opacity: 0;
    }
    
}

@keyframes flaImg9{             
    51%{          
        opacity: 0;
        left:50%;
    }   
    54.1%{         
        left:25%;
        opacity: 1;
    }
    71%{         
        left:25%;
        top:0;
        height:50%;
        width:23%;
        opacity: 1;
    }
    78%{ 
        left:25%;
        top:0;
        height:50%;
        width:23%;       
        opacity: 1;
    }
    84%{
        opacity: 1;
    }
    84.5%{
        opacity: 0;
    }
    100%{         
        left:25%;
        top:0;
        height:50%;
        width:23%;  
        opacity: 0;
    }
}
@keyframes flaImg10{             
    51%{          
        opacity: 0;
        left:-25%;
    }   
    54.1%{         
        left:0;
        opacity: 1;
    }
    71%{         
        left:0;
        top:50%;
        height: 50%;
        width: 25%;
        opacity: 1;
    }
    78%{ 
        left:0;
        top:50%;
        height: 50%;
        width: 25%;       
        opacity: 1;
    }
     84%{
        opacity: 1;
    }
    84.5%{
        left:0;
        top:50%;
        height: 50%;
        width: 25%; 
        opacity: 0;
    }
   
}

@keyframes flaImg11{             
    51%{          
        opacity: 0;
        
    }   
    51.5%{         
        opacity: 1;
    }
    84%{
        opacity: 1;
    }
    84.5%{
        opacity: 0;
    }
    
}
@keyframes flaImg11After{    
    0%{   
        opacity: 0;        
    } 
    17%{
        opacity: 0;
    }
    19%{
        opacity: .6;
    }
    21%{
        opacity: 0;
    }
    100%{
        opacity: 0;
    }
}
@keyframes flaImg11Left{             
    51.5%{          
        transform: translateX(-100%)
        
    }   
    54.1%{         
        transform: translateX(0)
    }
    100%{         
        transform: translateX(0)
    }
}

@keyframes flaImg12{             
    53%{          
        opacity:0;
        -webkit-transform:scale3d(.1,.1,.1) translate3d(0,1000px,0);
        transform:scale3d(.1,.1,.1) translate3d(0,1000px,0);
        -webkit-animation-timing-function:cubic-bezier(0.550,0.055,0.675,0.190);
        animation-timing-function:cubic-bezier(0.550,0.055,0.675,0.190)
    }   
    54.1%{         
        opacity:1;
        -webkit-transform:scale3d(1,1,1) translate3d(0,0,0);
        transform:scale3d(1,1,1) translate3d(0,0,0);
        -webkit-animation-timing-function:cubic-bezier(0.175,0.885,0.320,1);
        animation-timing-function:cubic-bezier(0.175,0.885,0.320,1)
    }
    57%{         
        opacity:1;
        -webkit-transform:scale3d(1,1,1) translate3d(0,0,0);
        transform:scale3d(1,1,1) translate3d(0,0,0);
        -webkit-animation-timing-function:cubic-bezier(0.175,0.885,0.320,1);
        animation-timing-function:cubic-bezier(0.175,0.885,0.320,1)
    }
    57.2%{
        -webkit-transform:perspective(400px);
        transform:perspective(400px)        
    }
    58%{
        -webkit-transform:perspective(400px) rotate3d(1,0,0,-20deg);
        transform:perspective(400px) rotate3d(1,0,0,-20deg);opacity:1
    }
    59%{
        -webkit-transform:perspective(400px) rotate3d(1,0,0,90deg);
        transform:perspective(400px) rotate3d(1,0,0,90deg);opacity:0;
    }
}
@keyframes flaImg13{             
    60%{          
        opacity:0;
        -webkit-transform:scale3d(.1,.1,.1) translate3d(0,1000px,0);
        transform:scale3d(.1,.1,.1) translate3d(0,1000px,0);
        -webkit-animation-timing-function:cubic-bezier(0.550,0.055,0.675,0.190);
        animation-timing-function:cubic-bezier(0.550,0.055,0.675,0.190)
    }   
    63.1%{         
        opacity:1;
        -webkit-transform:scale3d(1,1,1) translate3d(0,0,0);
        transform:scale3d(1,1,1) translate3d(0,0,0);
        -webkit-animation-timing-function:cubic-bezier(0.175,0.885,0.320,1);
        animation-timing-function:cubic-bezier(0.175,0.885,0.320,1)
    }
    69%{         
        opacity:1;
        -webkit-transform:scale3d(1,1,1) translate3d(0,0,0);
        transform:scale3d(1,1,1) translate3d(0,0,0);
        -webkit-animation-timing-function:cubic-bezier(0.175,0.885,0.320,1);
        animation-timing-function:cubic-bezier(0.175,0.885,0.320,1)
    }
    69.2%{
        -webkit-transform:perspective(400px);
        transform:perspective(400px)        
    }
    70%{
        -webkit-transform:perspective(400px) rotate3d(1,0,0,-20deg);
        transform:perspective(400px) rotate3d(1,0,0,-20deg);opacity:1
    }
    71%{
        -webkit-transform:perspective(400px) rotate3d(1,0,0,90deg);
        transform:perspective(400px) rotate3d(1,0,0,90deg);opacity:0;
    }
}
@keyframes flaImg14{             
    77%{          
        width: 0;
        height: 0;
    }  
    78%{          
        width: 25%;
        height: 50%;
    }  
    84%{
        opacity: 1;
    }
    84.5%{
        opacity: 0;
        width: 25%;
        height: 50%;
    }
    100%{ 
        opacity: 0;                 
    }   
    
}
@keyframes flaImg15{             
    77%{      
        left: 75%;    
        width: 0;
        height: 0;
    }  
    78%{          
        left: 48%;
        width: 27%; 
        height:50%;
    }  
    84%{
        opacity: 1;
    }
    84.5%{
        opacity: 0;
        width: 27%; 
        height:50%;
    }
    100%{ 
        opacity: 0;                 
    }      
    
}
@keyframes flaImg16{             
    77%{          
        left: 48%;   
        width: 0;
        height: 0;
    }  
    78%{          
        left: 25%;
        width: 23%;
        height: 50%;
    }  
    84%{
        opacity: 1;
    }
    84.5%{
        opacity: 0;
        width: 23%;
        height: 50%;
    }
    100%{ 
        opacity: 0;                 
    }    
     
    
}
}




/**
 *   移动端样式
*/
@media screen and (max-width:700px){   
    .bannerFla{
        height:calc(100vh - 60px);        
    }
    .bannerFla:after{
        padding-top: 0;
    }
    .bannerFlaImg{
        width: 50%;
        height: 25%;
    }
    .banner-line{
        left:50%;
        width: 1px;
        height: 100%;
        transform: translate(0,-50%);
    }
    .vertical-line:after, .vertical-line:before, .vertical-line span{
        left: 0;
        height:0;
        width:100%;
        border-top: 1px solid #fff;
    }
    .vertical-line:before{
        top:25%;
    }
    .vertical-line span{
        top:50%;
    }
    .vertical-line:after{
        top:75%;
    }
    .banner-logo{
        top:12.5%;
        left:0;
        width:50%;
    }
    .banner-text{
        left:52%;
        top:50%;
        width:50%;
    }
    
    .bannerFlaImg.img3{
        left: 50%;
        top: 75%;
    }
    .bannerFlaImg.img4{
        left: 50%;
        top: 25%;
    }
    .bannerFlaImg.img5{
        left:0%;
        top:75%;
    }
    .bannerFlaImg.img6{      
        height:50%;
        width: 100%;  
        background-size: auto 100%;
        background-position: center top;     
    }
    .bannerFlaImg.img7{      
        height:25%;
        width:50%;
        background-position: center 10%;
    }
    .bannerFlaImg.img8{
        left:0%;
        top:75%;
        height:calc(25% - 1px);
        width:50%;
    }
    .bannerFlaImg.img17{
        left:50%;
        top:75%;
        height:calc(25% + 1px);
        width:50%;        
    }
    .bannerFlaImg.img9{
        left:0%;
        top:25%;
        height:25%; 
        width:50%; 
    }
    .bannerFlaImg.img10{
        left:50%;
        top:-50%;
        height:25%; 
        width:50%; 
    }
    .bannerFlaImg.img11{
        left:0%;
        top:50%;
        height:calc(50% - 1px); 
        width:50%; 
        z-index: 0;
    }
    .bannerFlaImg.img11 div img{    
        height:auto;
        height:100%;
    }
    .bannerFlaImg.img12{
        left:50%;
        top:25%;
        height:25%; 
        width:50%;   
    }
    .bannerFlaImg.img13{
        left:50%;
        top:25%;
        height:25%; 
        width:50%;       
    }
   
    .bannerFlaImg.img16{
        left: 0;
        top: 25%;   
        background-color: transparent;    
        background-size: cover;
    }
    .bannerFlaImg.img15{
        left:50%;
        top:0%;
    }
    
}

@media screen and (max-width:700px){
    .bannerFlaImg p{
        font-size:12px;
        right:5px;
        bottom:5px;
    }
    @keyframes bannerBar{
        0%{
            opacity: 1;;        
        }
        0.4%{
            background:#993300;
            width:5%;
            height:8%;
    
        }
        1%{
            background:#993300;
            width:64%;
            opacity: 1;
        }
        1.6%{
            opacity: 0;
        }   
        1.8%{
            opacity: 1;   
        }         
        
        2%{
            width:100%;
            height:8%;
        }
        2.2%{
            height:100%;
            background:#fff;
            opacity: 1;
        }
        2.5%{       
            opacity: 0;
        }
        100%{       
            opacity: 0;
        }
    }
    @-webkit-keyframes bannerBar{
        0%{
            opacity: 1;;        
        }
        0.4%{
            background:#993300;
            width:5%;
            height:8%;
    
        }
        1%{
            background:#993300;
            width:64%;
            opacity: 1;
        }
        1.6%{
            opacity: 0;
        }   
        1.8%{
            opacity: 1;   
        }         
        
        2%{
            width:100%;
            height:8%;
        }
        2.2%{
            height:100%;
            background:#fff;
            opacity: 1;
        }
        2.5%{       
            opacity: 0;
        }
        100%{       
            opacity: 0;
        }
    }
    
    @keyframes bannerLine{    
        0%{
            opacity: 0;
        }
        2.5%{        
            opacity: 0;
        }
        2.6%{
            opacity: 1;
        }
        84%{
            opacity: 1;
    
        }
        84.5%{        
            opacity: 0;  
        }
    }
    @-webkit-keyframes bannerLine{    
        0%{
            opacity: 0;
        }
        2.5%{        
            opacity: 0;
        }
        2.6%{
            opacity: 1;
        }
        84%{
            opacity: 1;
    
        }
        84.5%{        
            opacity: 0;  
        }
    }
    
    @keyframes verticalLine1{    
        0%{
            opacity: 0;
        }
        2.6%{
           
            opacity: 0;
        }
        2.8%{        
            opacity: 1;
        }
        22.5%{   
            top:25%;
            opacity: 1;
            
        }
        23.8%{   
            top:15%;
            
        }
        24.5%{   
            top:50%;
            
        }
        51%{     
            top: 50%;   
        }
        52%{     
            top: 25%;   
            opacity: 1;  
        }
        77%{
            top: 25%; 
        }
        78%{
            top: 25%; 
        }
        84%{
            opacity: 1;
        }
        84.5%{        
            opacity: 0;  
        }
        100%{     
            top: 25%;   
        }
    }
    @keyframes verticalLine2{    
        0%{
            opacity: 0;
        }
        2.6%{
           
            opacity: 0;
        }
        2.8%{
            opacity: 1;
        }
        51%{     
            top: 50%;   
        }
        53%{     
            top: 50%;   
            opacity: 1;  
        }
        83%{
            opacity: 1;
        }
        83.5%{        
            opacity: 0;  
        }
        100%{     
            top: 50%;   
        }
    }
    @keyframes verticalLine3{    
        0%{
            opacity: 0;
        }
        2.6%{
           
            opacity: 0;
        }
        2.8%{
            opacity: 1;
        }
        34%{        
            top: 75%;   
            opacity: 1;
        } 
        35%{        
            top: 85%;   
            opacity: 1;
        } 
        36%{        
            top: 75%;   
            opacity: 1;
        } 
               
        50%{     
            top: 75%;   
            opacity: 1; 
            left: 0;
            width: 100%; 
        }
        51%{     
            top: 75%;   
            left: 50%;
            width: 50%; 
            opacity: 1;  
        }
        82%{
            opacity: 1;
        }
        82.5%{        
            opacity: 0;  
        }
        100%{     
            top: 75%;   
            left: 50%;
            width: 50%;   
        }
    }
    
    @keyframes bannerLogo{       
        5%{
            opacity: 0;
        }
        5.25%{
            opacity: 1;
            left:0;
        }
        6%{        
            left:44%;
            top:12.5%;
        }
        6.5%{        
            left:44%;
            top:40%;
        }
        9%{    
            left:44%;
            top:40%;
            transform:translate(0, -50%) rotate(0deg) scale(.6);
            opacity: 1;
        }
        10%{    
            left:44%;
            top:40%;
            transform:translate(50%, -100%) rotate(160deg) scale(0.3);
            opacity: 0;
        }
        85%{    
            left:50%;
            top:50%;
            transform:translate(-50%, -50%) rotate(0) scale(1.5);
            opacity: 0;
        }
        88%{    
            left:50%;
            top:50%;
            transform:translate(-50%, -50%) rotate(0) scale(1);
            opacity: 1;
        }
        100%{    
            left:50%;
            top:50%;
            transform:translate(-50%, -50%) rotate(0) scale(1);
            opacity: 1;
        }
        
    }
    @keyframes bannerText{       
       
        6.5%{        
            opacity: 0;
        }
        6.8%{        
            opacity: 1;
        }
        7%{        
            opacity: 0;
        }
        7.5%{        
            opacity: 1;
            left:52%;
        }
        9%{        
            left:52%;
        }
        10%{    
            left:2%;    
        }
        
        10.2%{ 
            left:2%;    
            top:50%;
        }
        10.8%{    
            top:45%;        
        }
       
        20.4%{     
            left:2%; 
            top:45%;  
        }
        21.8%{     
            left:2%; 
            top:62%; 
            opacity: 1;   
        }
        51%{     
            left:2%;
            top:62%; 
        }
        52%{     
            left:52%; 
            top:62%; 
            transform: translate(0, 0);
            opacity: 1;   
        }
        84%{
            opacity: 1;
        }
        84.5%{        
            opacity: 0;  
        }
        100%{     
            left:52%; 
            top:62%; 
        }
    }
    @keyframes bannerTitle{     
        9.1%{
            opacity: 0;
        } 
        9.2%{    
            top:25%;
            left:77%;  
            color:#fff;
            opacity: 1;
        }
        10.2%{    
            top:40%;
            left:52%; 
            color:#FF9000;
        }
        10.8%{    
            top:40%;
            left:2%;         
        }
        18.6%{  
            color:#FF9000;    
            top:40%;            
            left:2%;
        }
        19.6%{   
            color:#ffff01; 
            top:57%;            
            left:2%;
            opacity: 1;
        }
       
        50%{   
            left:2%;  
            top:57%; 
        }
        51%{     
            left:52%; 
            top:57%; 
            opacity: 1;   
        }
        84%{
            opacity: 1;
        }
        84.5%{
            left:52%; 
            top:57%; 
            color:#ffff01; 
            opacity: 0;  
        }
        100%{ 
            opacity: 0;                 
        }  
    }
    @keyframes flaImg1{         
        10.8%{    
            opacity: 0;
        }
        11.2%{   
            opacity: 1;
            
        }   
        20%{
            left:0;
            top:0;
            width:50%;
            height:25%;
        } 
        21%{
            top:12.5%;
            left:25%;
            width:0;
            height:0;
        } 
        100%{
            top:12.5%;
            left:25%;
            width:0;
            height:0;
        } 
    }
    @keyframes flaImg1After{    
        11.2%{   
            opacity: 1;
            
        }               
        12.8%{   
            opacity: 0;
            
        }   
        15.2%{ 
            opacity: 0;
            
        }    
        15.6%{   
            opacity: .4;
            
        }  
        16%{   
            background:#fff;
            opacity: 0;
            
        }  
        19%{   
            background:#aaff75;
            opacity: 0;
            
        }  
        20%{   
            opacity: 1;
            
        }   
    }
    @keyframes flaImg2{         
        11.2%{    
            opacity: 0;
        }
        11.6%{   
            opacity: 1;
            
        }   
        32%{  
            opacity: 1;
        }    
        34%{           
            opacity: 0;
        } 
       
    }
    @keyframes flaImg2After{    
        11.6%{   
            opacity: 1;
            
        }               
        12.2%{   
            background:#fff;
            opacity: 0;
            
        }   
        25.8%{ 
            background:#ff9000;
            opacity: 0;
            
        }    
        16.2%{   
            opacity: .4;
            
        }  
        16.6%{   
            background:#ff9000;
            opacity: 0;
            
        } 
        30.8%{  
            background:#fff;  
            opacity: 0;
        }
        32%{  
            opacity: 0;
        }    
        33%{           
            opacity: 1;
        }
        
    }
    @keyframes flaImg3{         
        11.6%{    
            opacity: 0;
        }
        12%{   
            opacity: 1;
            
        }
        31.4%{  
            opacity: 1;
        }    
        32.8%{           
            opacity: 0;
        }
    }
    @keyframes flaImg3After{    
        12%{   
            opacity: 1;
            
        }               
        12.6%{   
            opacity: 0;
            background:#fff;
        }
        14.6%{ 
            background:#cee052;  
            opacity: 0;
            
        }
        15%{   
            opacity: .4;
            
        }
        15.4%{   
            background:#cee052;  
            opacity: 0;
            
        }   
        30.2%{  
            background:#fff;  
            opacity: 0;
        }
        30.6%{  
            opacity: 1;
        }
        31%{   
           opacity: 0;
        }
        31.4%{  
            opacity: 0;
        }    
        32.8%{           
            opacity: 1;
        }
    }
    @keyframes flaImg4{         
        12%{    
            opacity: 0;
        }
        12.4%{   
            opacity: 1;
            
        }
        21.5%{
            left: 50%;
            top: 25%;
            width:50%;
            height:25%;
        } 
        22.5%{
            left: 75%;
            top: 37.5%;
            width:0;
            height:0;
        } 
        100%{
            left: 75%;
            top: 37.5%;
            width:0;
            height:0;
        } 
       
    }
    @keyframes flaImg4After{    
        12.4%{   
            opacity: 1;
            
        }               
        13%{   
            opacity: 0;
            
        }   
        14.6%{ 
            opacity: 0;
            
        }
        15%{   
            opacity: .4;
            
        }
        15.4%{   
            background:#fff;
            opacity: 0;
            
        }   
        31.5%{   
            background:#ff9000;
            opacity: 0;
            
        }     
        32.5%{   
            opacity: 1;
            
        }   
        
    }
    @keyframes flaImg5{         
        12.4%{    
            opacity: 0;
        }
        12.8%{   
            opacity: 1;
            
        }
        31.8%{  
            opacity: 1;
        }    
        33%{           
            opacity: 0;
        }
       
    }
    @keyframes flaImg5After{    
        12.8%{   
            opacity: 1;
            
        }               
        13.4%{   
            background:#fff;
            opacity: 0;
            
        }   
        15.8%{ 
            background:#aaff75;
            opacity: 0;
            
        }    
        16.2%{   
            opacity: .4;
            
        }  
        16.6%{   
            background:#aaff75;
            opacity: 0;
        }
        29.8%{  
            background:#fff;
            opacity: 0;
        }
        30.2%{  
            opacity: 1;
        }
        30.6%{   
           opacity: 0;
        }
        31.8%{  
            opacity: 0;
        }    
        33%{           
            opacity: 1;
        }
    }
    @keyframes flaImg6{         
        24%{    
            opacity: 0;        
        }
        25%{          
            opacity: 1;
        }
            
        50%{        
            opacity: 1;
        }
        51%{        
            opacity: 0;
        }
    }
    @keyframes flaImg6After{  
        25%{                  
            transform: translateY(0);    
        }  
        27%{   
            transform: translateY(-100%);
            
        }
        28%{   
            transform: translateY(-100%);
            opacity: 1; 
        }
        28.5%{   
            transform: translateY(-100%);
            opacity: 0; 
        }
        28.8%{   
            transform: translateY(0);
        }
        29.2%{   
            opacity: 1; 
            
        }
        29.6%{   
            opacity: 0; 
            
        }
        30.8%{  
            opacity: 0;
        }
        31.2%{  
            opacity: 1;
        }
        31.6%{   
           opacity: 0;
        }
        100%{   
            opacity: 0;
        }
        
    }
    
    @keyframes flaImg7{         
        38%{        
            opacity: 0;
        }
        39%{        
            opacity: 1;
        } 
        50%{        
            opacity: 1;
        }
        51%{        
            opacity: 0;
        }
    }
    @keyframes flaImg7After{  
        39%{        
            opacity: 1;
        }
        40%{        
            opacity: 0;
        }
        50%{        
            opacity: 0;
        }
        51%{        
            opacity: 1;
        }
        
    }
    
    @keyframes flaImg8{             
        39%{        
            background-position: right 0;
            opacity: 0;
        }
        40%{        
            opacity: 1;
        } 
        41%{        
            background-position: right 0;
        } 
        49%{        
            opacity: 1;
            background-position: right 0;
        } 
        51%{        
            opacity: 0;
            background-position: right 0;
        } 
    }
    @keyframes flaImg8After{  
        37%{        
            opacity: 0;
        }
        39%{        
            opacity: 1;
        }
        41%{        
            opacity: 0;
        }
        49%{        
            opacity: 0;
        } 
        50.5%{        
            opacity: 1;
        } 
        51.5%{        
            opacity: 0;
        }
        
    }
    @keyframes flaImg17{             
        40%{        
            opacity: 0;
        }
        41%{        
            opacity: 1;
        }         
        49%{        
            opacity: 1;
        } 
        51%{        
            opacity: 0;
        } 
    }
    @keyframes flaImg17After{  
        38%{        
            opacity: 0;
        }
        40%{        
            opacity: 1;
        }
        41%{        
            opacity: 0;
        }
        49%{        
            opacity: 0;
        } 
        50.5%{        
            opacity: 1;
        } 
        51.5%{        
            opacity: 0;
        }
        
    }
    
    @keyframes flaImg9{             
        51%{          
            opacity: 0;
            top:25%;
        }   
        54.1%{         
            top:0;
            opacity: 1;
        }
        71%{         
            left:0;
            top:0;
            width:50%;
            height:25%;
            opacity: 1;
        }
        73%{        
            left:50%;
            height:0; 
            width:0;
            top:25%;
            opacity: 0;
        }
        100%{         
            opacity: 0;
        }
    }
    @keyframes flaImg10{             
        51%{          
            opacity: 0;
            top:-25%;
        }   
        54.1%{         
            top:0;
            opacity: 1;
        }
        71%{         
            top:0;
            left:50%;
            width: 50%;
            height: 25%;
            opacity: 1;
        }
        73%{        
            left:100%;
            top:0;
            width: 0;
            height:0;
            opacity: 0;
        }
       
    }
    
    @keyframes flaImg11{             
        54%{          
            opacity: 0;
            
        }   
        54.5%{         
            opacity: 1;
        }
        84%{
            opacity: 1;
        }
        84.5%{
            opacity: 0;
        }
        
    }
    @keyframes flaImg11After{    
        0%{   
            opacity: 0;        
        } 
        17%{
            opacity: 0;
        }
        19%{
            opacity: .6;
        }
        21%{
            opacity: 0;
        }
        100%{
            opacity: 0;
        }
    }
    @keyframes flaImg11Left{             
        51.5%{          
            transform: translateX(-100%)
            
        }   
        54.1%{         
            transform: translateX(0)
        }
        100%{         
            transform: translateX(0)
        }
    }
    
    @keyframes flaImg12{             
        51%{          
            opacity:0;
            -webkit-transform:scale3d(.1,.1,.1) translate3d(0,1000px,0);
            transform:scale3d(.1,.1,.1) translate3d(0,1000px,0);
            -webkit-animation-timing-function:cubic-bezier(0.550,0.055,0.675,0.190);
            animation-timing-function:cubic-bezier(0.550,0.055,0.675,0.190)
        }   
        54.1%{         
            opacity:1;
            -webkit-transform:scale3d(1,1,1) translate3d(0,0,0);
            transform:scale3d(1,1,1) translate3d(0,0,0);
            -webkit-animation-timing-function:cubic-bezier(0.175,0.885,0.320,1);
            animation-timing-function:cubic-bezier(0.175,0.885,0.320,1)
        }
        57%{         
            opacity:1;
            -webkit-transform:scale3d(1,1,1) translate3d(0,0,0);
            transform:scale3d(1,1,1) translate3d(0,0,0);
            -webkit-animation-timing-function:cubic-bezier(0.175,0.885,0.320,1);
            animation-timing-function:cubic-bezier(0.175,0.885,0.320,1)
        }
        57.2%{
            -webkit-transform:perspective(400px);
            transform:perspective(400px)        
        }
        58%{
            -webkit-transform:perspective(400px) rotate3d(1,0,0,-20deg);
            transform:perspective(400px) rotate3d(1,0,0,-20deg);opacity:1
        }
        59%{
            -webkit-transform:perspective(400px) rotate3d(1,0,0,90deg);
            transform:perspective(400px) rotate3d(1,0,0,90deg);opacity:0;
        }
    }
    @keyframes flaImg13{             
        60%{          
            opacity:0;
            -webkit-transform:scale3d(.1,.1,.1) translate3d(0,1000px,0);
            transform:scale3d(.1,.1,.1) translate3d(0,1000px,0);
            -webkit-animation-timing-function:cubic-bezier(0.550,0.055,0.675,0.190);
            animation-timing-function:cubic-bezier(0.550,0.055,0.675,0.190)
        }   
        63.1%{         
            opacity:1;
            -webkit-transform:scale3d(1,1,1) translate3d(0,0,0);
            transform:scale3d(1,1,1) translate3d(0,0,0);
            -webkit-animation-timing-function:cubic-bezier(0.175,0.885,0.320,1);
            animation-timing-function:cubic-bezier(0.175,0.885,0.320,1)
        }
        69%{         
            opacity:1;
            -webkit-transform:scale3d(1,1,1) translate3d(0,0,0);
            transform:scale3d(1,1,1) translate3d(0,0,0);
            -webkit-animation-timing-function:cubic-bezier(0.175,0.885,0.320,1);
            animation-timing-function:cubic-bezier(0.175,0.885,0.320,1)
        }
        69.2%{
            -webkit-transform:perspective(400px);
            transform:perspective(400px)        
        }
        70%{
            -webkit-transform:perspective(400px) rotate3d(1,0,0,-20deg);
            transform:perspective(400px) rotate3d(1,0,0,-20deg);opacity:1
        }
        71%{
            -webkit-transform:perspective(400px) rotate3d(1,0,0,90deg);
            transform:perspective(400px) rotate3d(1,0,0,90deg);opacity:0;
        }
    }
    @keyframes flaImg14{             
        77%{          
            height: 0;
            width: 0;
        }  
        78%{          
            height: 25%;
            width: 50%;
        }  
        84%{
            opacity: 1;
        }
        84.5%{
            opacity: 0;
            height: 25%;
            width: 50%;
        }
        100%{ 
            opacity: 0;                 
        }   
        
    }
    @keyframes flaImg16{             
        77%{      
            top: 25%;    
            width: 0;
            height: 0;
        }  
        78%{          
            top: 25%;
            height: 25%; 
            width:50%;
        }  
        84%{
            opacity: 1;
        }
        84.5%{
            opacity: 0;
            height: 25%; 
            width:50%;
        }
        100%{ 
            opacity: 0;  
            top: 25%;                
        }      
        
    }
    @keyframes flaImg15{             
        77%{          
            top: 48%;   
            width: 0;
            height: 0;
        }  
        78%{          
            top: 0%;
            height: 25%;
            width: 50%;
        }  
        84%{
            opacity: 1;
        }
        84.5%{
            opacity: 0;
            height: 25%;
            width: 50%;
        }
        100%{ 
            opacity: 0;                 
        }    
         
        
    }
    }