/*title*/
.fa_bgen h2{
    
}
.fa_htitle.fa_text_w h2 {
    color: #fff;
}
.fa_htitle.fa_text_w h4 {
    color: #fff;
    /* font-weight: 300; */
}
.fa_htitle {
    margin-bottom: 3vw;
}

.fa_htitle h2 {
    font-size: var(--f50);
    font-weight: 600;
    color: var(--main-color);
    text-transform: capitalize;
    /* display: block; */
    color: #aaccd2;
    font-family: 'Barlow Condensed', sans-serif;
    line-height: 1;
}

.fa_htitle h4 {
    margin-top: 10px;
    color: #333;
    font-size: var(--f30);
    font-weight: 500;
}
/*banner*/

.fa_Home .fa_hBanner {
    position: relative;
    /* background: #000; */
    overflow: hidden;
}

.fa_Home .fa_hBanner .fa_li {
    overflow: hidden;
    position: relative;
    background: #000;
}

.fa_Home .fa_hBanner .fa_pic {
    font-size: 0;
    line-height: 1;
    overflow: hidden;
    position: relative;
    background: #000;
}

.fa_Home .fa_hBanner .fa_pic .fa_water{
    position: absolute;
    left:0;
    right:0;
    bottom:0;
    top: 0;
    z-index: 2;
    text-align: center;
    display: flex;
    align-items: center;
    mix-blend-mode: lighten;
    opacity: 0.5;
}
.fa_Home .fa_hBanner .fa_win span{
    position:absolute;
    z-index:2;
    
}

.fa_Home .fa_hBanner .fa_win span img{
    width:auto;
}
.fa_Home .fa_hBanner .fa_win span.fa_s1{
    left: 0;
    bottom: 0;
    -webkit-animation: spanline linear 10s infinite;
    animation: spanline linear 10s infinite;
}
.fa_Home .fa_hBanner .fa_win span.fa_s2{
    left:5%;
    top:-15%;
    -webkit-animation: spanline linear 5s infinite;
    animation: spanline linear 5s infinite
}

.fa_Home .fa_hBanner .fa_win span.fa_s3{
    left:0;
    bottom:-10%;
    opacity:0.5;
    -webkit-animation: spanline linear 12s infinite;
    animation: spanline linear 12s infinite
}

.fa_Home .fa_hBanner .fa_pic .fa_water img{
    width:100%;
    height: 80%;
    object-fit: contain;
    object-position: center;
}
.fa_Home .fa_hBanner .fa_pic img,
.fa_Home .fa_hBanner .fa_pic video {
    width: 100%;
    height: 100vh;
    object-fit: cover;
    opacity: 0.8;
}

.fa_Home .fa_hswp_btn>div {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    color: #fff;
    background: rgba(31, 75, 104, 0.3);
    padding: 20px 5px;
    font-size: 30px;
    z-index: 10;
    cursor: pointer;
}

.fa_Home .fa_hBanner .fa_tit {
    position: absolute;
    left: 0%;
    transform: translateY(-50%);
    z-index: 5;
    /* text-align: center; */
    transition: all 0.5s;
    top: 50%;
    right: 0;
}

.fa_Home .fa_hBanner .fa_pic .fa_wrap:before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    z-index: 0;
    margin-left: -52px;
    margin-top: -38px;
    width: 242px;
    height: 189px;
    background: url(../images/btt1bg.png) center no-repeat;
}

.fa_Home .fa_hBanner .fa_tit .fa_wrap {
    max-width: var(--wrapper);
    width: 96%;
    padding: 0 10px;
    margin: auto;
    position: relative;
    /* text-align: right; */
}

.fa_Home .fa_hBanner .fa_tit h4 {
    font-size: var(--f18);
    opacity: 0;
    transform: translateY(30px);
    color: rgba(255, 255, 255, 1);
    /* margin-top: 3vw; */
    max-width: 720px;
    line-height: 1.5; 
    font-family: 'Barlow Condensed', sans-serif;
    margin: auto;
    letter-spacing: 3px;
}

.fa_Home .fa_hBanner .fa_tit h3 {
    font-size: var(--f60);
    color: #fff;
    transition: all 0.5s;
    opacity: 0;
    transform: translateY(20px);
    line-height: 1;
    margin-top: var(--f30);
    position:relative;
    display:inline-block;
}
.fa_Home .fa_hBanner  .swiper-slide-active .fa_tit h3:before{
    width:100%;
}
.fa_Home .fa_hBanner .fa_tit h3 span{
    position:relative;
}
.fa_Home .fa_hBanner .fa_tit h6 {
    font-size: var(--f30);
    transition: all 0.5s;
    opacity: 0;
    transform: translateY(30px);
    font-weight: 400;
    text-transform: capitalize;
    color: #fff;
    position: relative;
    line-height: 1.5;
}
.fa_Home .fa_hBanner .fa_More{
    margin-top:3vw;
    transition: all 0.5s;
    opacity: 0;
    transform: translateY(20px);
}
.fa_Home .fa_hBanner  .swiper-slide-active .fa_More{
    opacity: 1;
    transform: translateY(-0%);
    transition: all 0.8s 0.8s;
}

.fa_Home .fa_hBanner .swiper-slide-active .fa_tit h4 {
    opacity: 0.6;
    transform: translateY(-0%);
    transition: all 0.8s 0.8s;
}

.fa_Home .fa_hBanner .swiper-slide-active .fa_tit h3 {
    opacity: 1;
    transform: translateY(-0%);
    transition: all 0.8s 0.5s;
}

.fa_Home .fa_hBanner .swiper-slide-active .fa_tit h6 {
    opacity: 1;
    transform: translateY(-0%);
    transition: all 0.8s 0.6s;
}

.fa_Home .fa_swp_button {
    position: absolute;
    left:50%;
    transform:translateX(-50%);
    width:96%;
    padding:0 10px;
    bottom:5%;
    max-width:var(--wrapper);
    z-index: 5;
}

.fa_Home .fa_swp_button span{
    display: inline-block;
    width:15px;
    height:15px;
    border:#fff solid 1px;
    border-radius: 500px;
    margin-right:10px;
    cursor: pointer;
    transition:all 0.5s;
    background: transparent;
    opacity: 1;
}

.fa_Home .fa_swp_button span.swiper-pagination-bullet-active{
    box-shadow: 2px 2px 5px #1679ba;
    background: var(--main-color);
    border-color: var(--main-color);
}
    
@media screen and (max-width: 768px) {
    .fa_Home .fa_hBanner .fa_tit h3,
    .fa_Home .fa_hBanner .fa_tit h6 {
        font-size: var(--f20);
        margin:5px 0 0;
    }
    .fa_Home .fa_hBanner .fa_tit h4 {
        display:none;
    }
    .fa_htitle .fa_tt_span {
        display: none;
    }
    .fa_Home .fa_hBanner .fa_pic img,
    .fa_Home .fa_hBanner .fa_pic video {
        min-height: 400px;
        object-fit: cover;
        height: 50vh;
    }
    .fa_Home .homeBanner_navbtn {
        display:none;
    }
    .fa_Home .fa_hBanner .fa_win{
        display:none;
    }
}

/**/
.fa_hAbout{
    position:relative;
    background: #fff;
    
}
.fa_hAbout .fa_right .fa_tit{
    /* margin: 3vw 0 0; */
    /* max-width: 500px; */
}

.fa_hAbout .fa_right .fa_tit h3{
    font-size:var(--f30);
    color:#aaccd2;
    margin-bottom:2vw;
    padding-left:2vw;
    border-left:#aaccd2 solid 3px;
}
.fa_hAbout .fa_right .fa_tit p{
    color:#666;
    line-height: 1.8;
    font-size: 15px;
}
.fa_hAbout .fa_right .fa_entit{
    text-align:right;
    font-size: 3vw;
    font-family: 'Barlow Condensed';
    color: var(--main2-color);
    opacity: 0.2;
    line-height: 1;
}
    .fa_hAbout .fa_right .fa_link{
        text-align: left;
        /* text-decoration: underline; */
        margin-top: 2vw;
        /* margin-bottom: 5vw; */
    }
.fa_hAbout .fa_left .fa_wrap h3{
    font-size: var(--f60);
    text-transform: uppercase;
    color: #aaccd2;
    font-family:
    'Barlow Condensed', sans-serif;
    margin: auto;
    font-weight: 600;
}
.fa_hAbout .fa_left .fa_wrap h4{
font-size:var(--f30);
    color:#333;
    
}

    .fa_hAbout .fa_right .fa_link a{
        color: #aaccd2;
        font-size:var(--f18);
        display:inline-block;
        position:relative;
        overflow:hidden;
        transition:all 0.5s;
    }

    .fa_hAbout .fa_right .fa_link a:hover{
        color:var(--main-color);
    }
    .fa_hAbout .fa_right .fa_link a:before{
        content:"";
        right:0;
        bottom:0;
        width:100%;
        background:#aaccd2;
        position:absolute;
        height:1px;
        transition:all 0.5s;
        
    }

    .fa_hAbout .fa_right .fa_link a:after{
        content:"";
        left:0;
        bottom:0;
        width:0%;
        background:var(--main-color);
        position:absolute;
        height:1px;
        transition:all 0.5s;
        
    }

    .fa_hAbout .fa_right .fa_link a:hover:after{
        width:100%;
    }
.fa_hAbout .fa_right .fa_link a:hover:before{
        width:0%;
    }
.fa_hAbout .fa_jump{
    display:flex;
    justify-content:space-between;
    margin-top:2vw;
}
.fa_hAbout .fa_jump i{
    
    color:#aaccd2;
    font-size:16px;
}
.fa_hAbout .fa_jump dd{
    color:#333;
    font-size:16px;
}
.fa_hAbout .fa_jump span{
    color:#aaccd2;
        font-family: 'Barlow Condensed', sans-serif;
    font-size:var(--f50);
    line-height:1;
    
}
@media screen and (min-width: 769px) {
    .fa_hAbout{
        display: flex;
        align-items:flex-end;
    }
    .fa_hAbout .fa_left{
        width: 50%;
        position:relative;
        /* border-right:#eee solid 1px; */
        background:#fff;
    }
    
    .fa_hAbout .fa_left .fa_wrap{
        width:96%;
        margin: 0 0 0 auto;
        padding: var(--f50) 0 var(--f50) 10px;
        max-width: 800px;
    }
    .fa_hAbout .fa_left .fa_pic{
        position:relative;
    }
    .fa_hAbout .fa_right{
        width: 50%;
        border-left: #eee solid 1px;
        background: #f5fafc;
        position:relative;
    }
    .fa_hAbout .fa_right:before{
        content:"";
        position:absolute;
        left:0;
        top:208px;
        height:1px;
        /* background:#eee; */
        width:100%;
    }
    
    .fa_hAbout .fa_right:after{
        content:"";
        position:absolute;
        right:0;
        bottom:0;
        width: 100%;
        height:calc(100% - 208px);
        background: rgba(170,204,210,0.1);
        -webkit-clip-path: polygon(0 0, 0 100%, 100% 100%);
clip-path: polygon(0 0, 0 100%, 100% 100%);
    }
    .fa_hAbout .fa_right .fa_pic{
        /* max-width: 300px; */
        margin:0 0 0 auto;
        /* border-bottom: solid 1px #ddd; */
        display: flex;
        align-items: flex-end;
        justify-content: flex-end;
    }
    .fa_hAbout .fa_right .fa_pic .fa_ttt{
        font-size: 16px;
        color: #86a2a5;
        text-align:right;
        padding:30px;
        font-family: 'Barlow Condensed', sans-serif;
        letter-spacing: 8px;
        opacity: 0.6;
    }
    .fa_hAbout .fa_right .fa_pic .fa_Img{
        height: 200px;
        width: 40%;
        max-width: 300px;
    }
    .fa_hAbout .fa_right .fa_wrap{
        width:96%;
        max-width:810px;
        padding-right:10px;
        padding-left: 8vw;
        /* margin-top: 5vw; */
        /* margin-bottom: 4vw; */
        height: calc(100% - 208px);
        padding-bottom: 4vw;
        display: flex;
        align-items: flex-end;
        padding-top: 4vw;
        position:relative;
        z-index:5;
    }
}

@media screen and (max-width: 768px) {
    .fa_hAbout{
        padding:30px 20px;
    }
    .fa_hAbout .fa_entit{
        margin-bottom:30px;
    }
    .fa_hAbout .fa_right{
        margin-top:30px;
    }
   .fa_hAbout .fa_right .fa_tit p{
        font-size:14px;
        margin:30px 0;
    }
     .fa_hAbout .fa_right .fa_link{
         margin-top:20px;
     }
} 
/**/
.fa_hPro{
    background:#aaccd2;
    position:relative;
}
.fa_hPro .fa_li .fa_info .fa_ico{
    padding-bottom:100%;
    border-radius:500px;
    overflow:hidden;
    background:#fff;
    margin-bottom: 30px;
}

.fa_hPro .fa_li .fa_info .fa_ico img{
    transform:translate(-50%,-50%) scale(0.8);
}
.fa_hPro .fa_li  .fa_tit h3{
    font-size:var(--f24);
    color:#fff;
    text-align:center;
    
}
.fa_hPro .fa_li  .fa_tit p{
    margin-top:15px;
    font-size: 14px;
    color: rgba(255,255,255,0.6);
    line-height: 1.6;
}
.fa_hPro .fa_li  .fa_tit p:last-child{
    text-align:center;
}
.fa_hPro .fa_li  .fa_tit p a{
    font-size:20px;
    color:#fff;
    display:inline-block;
    padding:2px 30px;
    border-radius:500px;
    background:rgba(0,0,0,0.1);
    margin-top:20px;
    transition:all 0.5s;
    position:relative;
    overflow:hidden;
    
}

.fa_hPro .fa_li  .fa_tit p a i{
    position:relative;
}
.fa_hPro .fa_li  .fa_tit p a:before{
    content:"";
    position:absolute;
    left:0;
    right:0;
    top:0;
    bottom:0;
    border-radius:500px;
    background:var(--main2-color);
    transform:translateX(-100%);
    transition:all 0.5s;
    
}
.fa_hPro .fa_li  .fa_tit p a:hover:before{
    transform:translateX(0%);
}
.fa_hPro .fa_sum{
    color:rgba(255,255,255,0.8);
    line-height:1.8;
    
}
.fa_hPro .fa_pagebtn{
    display: flex;
    align-items:flex-end;
    margin-top:30px;
}
.fa_hPro .fa_pagebtn .fa_page_num{
    font-size:var(--f26);
    color: #507a82;
    opacity:0.5;
}
.fa_hPro .fa_pagebtn .fa_probtn{
    width:150px;
    margin-left:20px;
    text-align:right;
}
.fa_hPro .fa_pagebtn .fa_page_num>*{
    
        font-family: 'Barlow Condensed', sans-serif;
    
}
.fa_hPro .fa_pagebtn .fa_probtn>div{
    width:50px;
    height:50px;
    background:rgba(255,255,255,0.5);
    color: #507a82;
    display: inline-flex;
    align-items:center;
    justify-content: center;
    border-radius: 500px;
    font-size:20px;
    cursor:pointer;
    transition:all 0.5s;
}
.fa_hPro .fa_pagebtn .fa_probtn>div:hover{
    background:var(--main-color);
    color:#fff;
}
.fa_hPro .swiper-slide{
    overflow: hidden;
}
     .fa_hPro .fa_li .fa_info{
         transition:all 0.8s;
         
 
-webkit-clip-path: polygon(0 0, 100% 0, 100% 0%, 0 0%);
clip-path: polygon(0 0, 100% 0, 100% 0%, 0 0%);
     }
     
     .fa_hPro .swiper-slide-active  .fa_li .fa_info{
          
-webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
transition-delay: 0.2s;
     }
     .fa_hPro .fa_li .fa_proimg{
          transition:all 0.8s;
          -webkit-clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
     }
     .fa_hPro .swiper-slide-active .fa_proimg{
         -webkit-clip-path: polygon(0% 0, 100% 0, 100% 100%, 0% 100%);
clip-path: polygon(0% 0, 100% 0, 100% 100%, 0% 100%);
         transition-delay: 0.2s;
     }
@media screen and (min-width: 769px) {
    
.fa_hPro .fa_htitle{
}
.fa_hPro{
    display:flex;
    align-items: flex-end;
    position:relative;
    overflow: hidden;
}
    .fa_hPro .fa_bg:before{
        position:absolute;
        left:0;
        bottom:0;
        top:0;
        width:50%;
        content:"";
        mix-blend-mode: darken;
        background:url(../images/p1.png) no-repeat left bottom / auto 100%;
        -webkit-animation: rospan linear 10s infinite;
        animation: rospan linear 5s infinite;
        transform-origin: left bottom;
    }
    .fa_hPro .fa_bg:after{
        position:absolute;
        left:0;
        bottom:0;
        top:0;
        width:50%;
        content:"";
        mix-blend-mode: darken;
        background:url(../images/p2.png) no-repeat left bottom / auto 100%;
        -webkit-animation: rospan2 linear 10s infinite;
        animation: rospan2 linear 5s infinite;
        transform-origin: left top;
    }
    .fa_hPro .fa_left{
        width:50%;
        position:relative;
    }
    .fa_hPro .fa_left .fa_wrapbox{
        width:96%;
        max-width:810px;
        padding-right: 15vw;
        padding-left:10px;
        margin:0 0 0 auto;
        text-align:right;
        padding-bottom: 5vw;
        padding-top: 200px;
    }
     .fa_hPro .fa_left  h3{
         font-size:var(--f24);
         color:#fff;
     }
    .fa_hPro .fa_left p{
        max-width:300px;
        color:#fff;
        font-size:14px;
    }
    .fa_hPro .fa_right{
        width:60%;
        margin-left:-10%;
        position:relative;
    }
     .fa_hPro .fa_li{
         position:relative;
     }
     .fa_hPro .fa_proimg{
         height: 80vh;
     }
    
     .fa_hPro .fa_li .fa_info{
         position:absolute;
         left:0;
         top:0;
         background: var(--main-color);
         width: 50%;
         max-width: 350px;
         padding: 3vw 4vw;
     }
}

@media screen and (max-width: 768px) {
   .fa_hPro .fa_left{
       padding:40px 20px;
   } 
    .fa_hPro .fa_sum{
        font-size:14px;
    }
.fa_hPro .fa_li .fa_info .fa_ico{
    padding-bottom: 60%;
    border-radius:0px;
    overflow:hidden;
    background:#fff;
    margin-bottom: 10px;
}
    .fa_hPro .fa_li .fa_info .fa_tit{
        padding:30px 20px;
    }
.fa_hPro .fa_pagebtn .fa_probtn{
    display:flex;
    width:100px;
    justify-content:space-between;
}
    
.fa_hPro .fa_pagebtn .fa_probtn>div{
    width:30px;
    height:30px;
    font-size:20px;
    margin:0;
}
}   
/**/
.fa_hCase{
    background:#f5fafc;
}
.fa_hCase .swiper-container{
    overflow: visible;
}
.fa_hCase .fa_lii .fa_Img{
    padding-bottom: 45%;
}

.fa_hCase .fa_lii .fa_right h3{
    font-size:var(--f26);
    color:var(--main-color);
    margin-bottom:20px;
}
.fa_hCase .fa_lii .fa_right p{
    font-size:16px;
    line-height:1.8;
    color: #999;
}
.fa_hCase .fa_swplist{
    position:relative;
}
.fa_hCase .fa_casebtn{
    /* margin-top: 3vw; */
    position: absolute;
    right: 0;
    top: 0;
    z-index: 5;
    text-align:right;
}

.fa_hCase .fa_casebtn .fa_casepage{
    font-size:var(--f50);
    color:#aaccd2;
    font-family: 'Barlow Condensed', sans-serif;
    margin-bottom:10px;
}

.fa_hCase .fa_casebtn .fa_casepage *{
    font-family: 'Barlow Condensed', sans-serif;
}
.fa_hCase .fa_casebtn .fa_case_btn>div{
    font-size:30px;
    color:#aaccd2;
    line-height:0.8;
    display:inline-block;
    margin-left:10px;
    cursor:pointer;
    
}
.fa_hCase .fa_casebtn .fa_case_btn>div.fa_btn_r{
    padding-left:15px;
    border-left:#aaccd2 solid 1px;
}
@media screen and (min-width: 769px) {
    
.fa_hCase .fa_lii{
    position: relative;
    display: block;
}

.fa_hCase .fa_lii .fa_left{
    width:80%;
    transition:all 0.8s;
    transform:translateX(30%);
    filter:grayscale(1);
    opacity: 0.3;
}

.fa_hCase .swiper-slide-active .fa_lii .fa_left{
    
    filter:grayscale(0);
    transform:translateX(0%);
    
        transition-delay:0.3s;
    opacity:1;
}
.fa_hCase .fa_lii .fa_right{
    bottom:10%;
    right:0;
    width:60%;
    max-width:500px;
    background: #fff;
    padding:3vw;
    position: absolute;
    opacity:0;
    transform:translateX(30%);
    transition:all 0.8s;
    border-top: var(--main-color) solid 5px;
    /* box-shadow: 0 0 30px rgba(0,0,0,0.1); */
}
    .fa_hCase .swiper-slide-active .fa_lii .fa_right{
        
    opacity:1;
    transform:translateX(0%);
        transition-delay:0.3s;
    } 
}

@media screen and (max-width: 768px) {
    .fa_hCase .fa_lii{
        display:block;
    }
    .fa_hCase .fa_lii .fa_right{
        background:#fff;
        padding:20px
    }
} 
/**/
.fa_hNews{
    background: #fff;
}
.fa_hNews .fa_htitle{
    position:relative;
    margin-bottom: 0;
}
.fa_hNews .fa_More{
    position:absolute;
    right:0;
    bottom: 5vw;
}
.fa_hNews .fa_Img{
    padding-bottom:50%;
}
.fa_hNews .fa_data{
    position: absolute;
    right: 20px;
    bottom: 20px;
    background: rgba(255,255,255,0.8);
    color:#333;
    font-size:14px;
    padding: 10px 20px;
    border-radius: 500px;
    font-family: 'Barlow Condensed', sans-serif;
    color: #82a8af;
}
.fa_hNews .fa_li h3{
    font-size: var(--f20);
    color:#333;
    margin: 20px 0 10px;
}
.fa_hNews .fa_li article{
    font-size:14px;
    color: #888;
    text-overflow: -o-ellipsis-lastline;
    overflow:hidden;
    text-overflow:ellipsis;
    display:-webkit-box;
    -webkit-line-clamp:2;
    line-clamp:2;
    -webkit-box-orient:vertical;
    line-height: 24px;
    height: 48px;
}
.fa_hNews .fa_li .fa_link {
    margin-top:30px;
}
.fa_hNews .fa_li .fa_link  span{
        color: #82a8af;
        font-size:14px;
        display:inline-block;
        position:relative;
        overflow:hidden;
        transition:all 0.5s;
    }

.fa_hNews .fa_li:hover .fa_link  span{
        color:var(--main-color);
    }
.fa_hNews .fa_li .fa_link  span:before{
        content:"";
        right:0;
        bottom:0;
        width:100%;
        background:#aaccd2;
        position:absolute;
        height:1px;
        transition:all 0.5s;
        
    }
.fa_hNews .fa_li .fa_link  span:after{
        content:"";
        left:0;
        bottom:0;
        width:0%;
        background:var(--main-color);
        position:absolute;
        height:1px;
        transition:all 0.5s;
        
    }

.fa_hNews .fa_li:hover .fa_link  span:after{
        width:100%;
    }
.fa_hNews .fa_li:hover .fa_link  span:before{
        width:0%;
    }
@media screen and (min-width: 769px) {
    .fa_hNews .fa_list{
        border-top:#eee solid 1px;
        border-bottom:#eee solid 1px;
    }
    .fa_hNews .fa_li{
        flex:1;
        padding:3vw;
        border-left:#eee solid 1px;
        display: block;
        transition:all 0.5s;
    }
    .fa_hNews .fa_li:hover {
        background: #f5fafc;
    }
}

@media screen and (max-width: 768px) {
    .fa_hNews{
        padding:30px 20px;
    }
    .fa_hNews .fa_More{
        display:none;
    }
    .fa_hNews .fa_li{
        margin-bottom:20px;
    }
}   
/**/
@media screen and (min-width: 769px) {}

@media screen and (max-width: 768px) {} 
/**/
@media screen and (min-width: 769px) {}

@media screen and (max-width: 768px) {}   

/**/

@keyframes spanline {
    0% {
        -webkit-transform: translateY(8%);
        transform: translateY(8%);
        opacity:0.5;
    }
    50% {
        -webkit-transform: translateY(0%);
        transform: translateY(0%);
        opacity:0.8;
    }

    100% {
        -webkit-transform: translateY(8%);
        transform: translateY(8%);
        opacity:0.5;
    }
}

@keyframes spanline2 {
    0% {
        -webkit-transform: translateY(-10%);
        transform: translateY(-10%);
        opacity:0.8;
    }

    50% {
        -webkit-transform: translateY(0%);
        transform: translateY(0%);
        opacity:0.5;
    }

    100% {
        -webkit-transform: translateY(-10%);
        transform: translateY(-10%);
        opacity:0.8;
    }
}



@keyframes rospan {
    0% {
        -webkit-transform: rotate(-20deg);
        transform: rotate(-20deg);
    }

    50% {
        -webkit-transform: rotate(-0);
        transform:  rotate(-0);
    }

    100% {
       -webkit-transform: rotate(-20deg); 
        transform: rotate(-20deg);
    }
}


@keyframes rospan2  { 
    0% {
        -webkit-transform: rotate(20deg); 
        transform: rotate(20deg);
    }

    50% {
        -webkit-transform: rotate(-0);
        transform:  rotate(-0);
    }

    100% {
       -webkit-transform: rotate(20deg);
        transform: rotate(20deg);
    }
}