.fixed_bg_01{


opacity: 0;
z-index: 0;
transition: 1s;

}


.fixed_bg_01.visible{


opacity: 1;
z-index: 500;
transition: 1s;
    
}

.text1 {
    position: relative;
    top: 50px;
    opacity: 0;
     z-index: 10;
     -webkit-transition:all 1s;
    -moz-transition:all 1s;
    -ms-transition:all 1s;
    -o-transition:all 1s;
    transition:all 1s;

    
}


.text1.visible {
    position: relative;
    top: 0px;
    opacity: 1;
    z-index: 10;
    -webkit-transition:all 1s;
    -moz-transition:all 1s;
    -ms-transition:all 1s;
    -o-transition:all 1s;
    transition:all 1s;

    
}




.video_slogan_img{
        top: 50px;
        transition: 1s;
        opacity: 0;
}
.video_slogan_img.visible{
        top: 0;
        transition: 1s;
        opacity: 1;
}


.vga_img_slogan_2{
    opacity: 0;
}

.vga_img_slogan_2.visible{
    opacity: 1;
}


.vga_img_flow{

    opacity: 0;
    transition: 1.5s;
}


.vga_img_flow.visible{

    opacity: 1;
    transition: 1.5s;
}




.text15 {
    position: relative;
    top: 50px;
    opacity: 0;
     z-index: 10;
     -webkit-transition:all 1.5s;
    -moz-transition:all 1.5s;
    -ms-transition:all 1.5s;
    -o-transition:all 1.5s;
    transition:all 1.5s;

    
}


.text15.visible {
    position: relative;
    top: 0px;
    opacity: 1;
    z-index: 10;
    -webkit-transition:all 1.5s;
    -moz-transition:all 1.5s;
    -ms-transition:all 1.5s;
    -o-transition:all 1.5s;
    transition:all 1.5s;

    
}



.text17 {
    position: relative;
    top: 50px;

     z-index: 10;
     -webkit-transition:all 1.5s;
    -moz-transition:all 1.5s;
    -ms-transition:all 1.5s;
    -o-transition:all 1.5s;
    transition:all 1.5s;
    display: block;

    
}


.text17.visible {
    position: relative;
    top: 0px;
    z-index: 10;
    -webkit-transition:all 1.5s;
    -moz-transition:all 1.5s;
    -ms-transition:all 1.5s;
    -o-transition:all 1.5s;
    transition:all 1.5s;
    display: none;

    
}





#section3 {
    height: calc(100vh - 55px);
    overflow: hidden;
}


#section8 {
    height: calc(100vh - 55px);
    overflow: hidden;
}

.clip {
    position: absolute;
    width: 100%;
    top: -94.87%;
    transform: scale(4, 1);
}

.swiper-container-vertical>.swiper-pagination-bullets {
    right: 0;
    top: 99.1%;
}

.swiper-pagination.swiper-pagination1 {
    width: 100%;
    display: flex;
    justify-items: center;
    align-self: flex-end;
    position: absolute;
    bottom: 0;
 /*    flex-direction: column; */
}

.swiper-pagination.swiper-pagination1 .swiper-pagination-bullet {
    transition: all .8s;
    width: 100%;
    height: 5px;
    background: #000;
    filter: saturate(0) brightness(.7);
    opacity: 1;
    border-radius: 0;
}



.swiper-pagination.swiper-pagination1 .swiper-pagination-bullet-active {
    opacity: 1;
    filter: saturate(1);
    background: #00ffff;
}


.swiper-pagination.swiper-pagination2 {
    width: 5%;
    height: 80vh;
    display: block;    
    position: absolute;
    top: 50%;
 /*    flex-direction: column; */
}


.swiper-pagination.swiper-pagination2 .swiper-pagination-bullet {
    transition: all .8s;
    width: 5%;
    height: 20vh;
    background: #000;
    filter: saturate(0) brightness(.7);
    opacity: 1;
    border-radius: 0;
   
}



.swiper-pagination.swiper-pagination2 .swiper-pagination-bullet-active {
    opacity: 1;
    filter: saturate(1);
    background: #00ffff;
}


.swiper-container-vertical#section8>.swiper-pagination-bullets{
     transform: translate3d(-80vw, -90%, 0);
}







#clip3text {
    opacity: 0;
    -webkit-transition: all 1.5s ease;
    -moz-transition: all 1.5s ease;
    -ms-transition: all 1.5s ease;
    -o-transition: all 1.5s ease;
    transition: all 1.5s ease;
    color: white;
    /* background: rgba(0,255,255,0.4); */
    position: absolute;
    padding: 1vw 2vw;
    left: 10%;
    width: 35%;
    margin-top: 13%;
    z-index: 5;
    border-radius: 2px;
}

#clip3text.visible {
    opacity: 1;
    margin-top: 8%;
    -webkit-transform: none;
    -moz-transform: none;
    -ms-transform: none;
    -o-transform: none;
    transform: none;
    z-index: 5;
}

#clip3img {
    opacity: 1;
    -webkit-transition: all 1.5s ease;
    -moz-transition: all 1.5s ease;
    -ms-transition: all 1.5s ease;
    -o-transition: all 1.5s ease;
    transition: all 1.5s ease;
    color: white;
    position: absolute;
    right: 0%;
    width: 135%;
    margin-top: 1px;
    z-index: 4;
}

#clip3img.visible {
    opacity: 1;
    right: 0%;
    width: 100%;
    -webkit-transform: none;
    -moz-transform: none;
    -ms-transform: none;
    -o-transform: none;
    transform: none;
    z-index: 4;
}



#clip4text {
    opacity: 0;
    -webkit-transition: all 1.5s ease;
    -moz-transition: all 1.5s ease;
    -ms-transition: all 1.5s ease;
    -o-transition: all 1.5s ease;
    transition: all 1.5s ease;
    color: white;
    /* background: rgba(0,255,255,0.4); */
    position: absolute;
    padding: 1vw 2vw;
    left: 10%;
    width: 35%;
    margin-top: 8%;
    z-index: 5;
    border-radius: 2px;
}

#clip4text.visible {
    opacity: 1;
    margin-top: 8%;
    -webkit-transform: none;
    -moz-transform: none;
    -ms-transform: none;
    -o-transform: none;
    transform: none;
    z-index: 5;

}


#clip4img {
    opacity: 0;
    -webkit-transition: all 3s ease;
    -moz-transition: all 3s ease;
    -ms-transition: all 3s ease;
    -o-transition: all 3s ease;
    transition: all 3s ease;
    color: white;
    position: absolute;
    left: 50%;
    width: 40%;
    margin-top: 8%;
    z-index: 4;
}

#clip4img.visible {
    opacity: 1;
    -webkit-transition: all 3s ease;
    -moz-transition: all 3s ease;
    -ms-transition: all 3s ease;
    -o-transition: all 3s ease;
    transition: all 3s ease;
    left: 50%;
    width: 40%;
    z-index: 4;
}


#clip4img_1 {
    opacity: 0;
    -webkit-transition: all 3s ease;
    -moz-transition: all 3s ease;
    -ms-transition: all 3s ease;
    -o-transition: all 3s ease;
    transition: all 3s ease;
    color: white;
    position: absolute;
    left: 10%;
    width: 40%;
    margin-top: 8%;
    z-index: 4;
}

#clip4img_1.visible {
    opacity: 1;
    -webkit-transition: all 3s ease;
    -moz-transition: all 3s ease;
    -ms-transition: all 3s ease;
    -o-transition: all 3s ease;
    transition: all 3s ease;
    left: 10%;
    width: 40%;
    z-index: 4;
}



#clip5text {
    opacity: 1;
    -webkit-transition: all 1.5s ease;
    -moz-transition: all 1.5s ease;
    -ms-transition: all 1.5s ease;
    -o-transition: all 1.5s ease;
    transition: all 1.5s ease;
    color: white;
    /* background: rgba(0,255,255,0.4); */
    position: absolute;
    padding: 1vw 2vw;
    left: 13%;
    width: 40%;
    margin-top: 7%;
    z-index: 5;
    border-radius: 2px;
}


#clip5img {
    opacity: 1;
    -webkit-transition: all 3s ease;
    -moz-transition: all 3s ease;
    -ms-transition: all 3s ease;
    -o-transition: all 3s ease;
    transition: all 3s ease;
    color: white;
    position: absolute;
    left: 56%;
    width: 23%;
    margin-top: 5%;
    z-index: 4;
}





#clip6text {
    opacity: 1;
    -webkit-transition: all 1.5s ease;
    -moz-transition: all 1.5s ease;
    -ms-transition: all 1.5s ease;
    -o-transition: all 1.5s ease;
    transition: all 1.5s ease;
    color: white;
    /* background: rgba(0,255,255,0.4); */
    position: absolute;
    padding: 1vw 2vw;
    left: 13%;
    width: 40%;
    margin-top: 24%;
    z-index: 5;
    border-radius: 2px;
}



#clip6img {
    opacity: 1;
    -webkit-transition: all 3s ease;
    -moz-transition: all 3s ease;
    -ms-transition: all 3s ease;
    -o-transition: all 3s ease;
    transition: all 3s ease;
    color: white;
    position: absolute;
    left: 56%;
    width: 18%;
    margin-top: 22%;
    z-index: 4;
}



#clip8text {
    opacity: 0;
    -webkit-transition: all 1.5s ease;
    -moz-transition: all 1.5s ease;
    -ms-transition: all 1.5s ease;
    -o-transition: all 1.5s ease;
    transition: all 1.5s ease;
    color: white;
    /* background: rgba(0,255,255,0.4); */
    position: absolute;
    padding: 1vw 2vw;
    left: 32%;
    width: 50%;
    margin-top: 8%;
    z-index: 5;
    border-radius: 2px;
}

#clip8text.visible {
    opacity: 1;
    margin-top: 8%;
    -webkit-transform: none;
    -moz-transform: none;
    -ms-transform: none;
    -o-transform: none;
    transform: none;
    z-index: 5;
}

#clip8img {
    opacity: 1;
    -webkit-transform: TranslateX(-13%);
    -moz-transform: TranslateX(-13%);
    -ms-transform: TranslateX(-13%);
    -o-transform: TranslateX(-13%);
    transform: TranslateX(-13%);
    -webkit-transition: all 1.5s ease;
    -moz-transition: all 1.5s ease;
    -ms-transition: all 1.5s ease;
    -o-transition: all 1.5s ease;
    transition: all 1.5s ease;
    color: white;
    position: absolute;
    left: 33%;
    width: 70%;
    margin-top: 18%;
    z-index: 4;
}

#clip8img.visible {
    opacity: 1;
    left: 33%;
    width: 40%;
    -webkit-transform: none;
    -moz-transform: none;
    -ms-transform: none;
    -o-transform: none;
    transform: none;
    margin-top:18%;
    z-index: 4;
}



#clip11text {
    opacity: 0;
    -webkit-transition: all 1.5s ease;
    -moz-transition: all 1.5s ease;
    -ms-transition: all 1.5s ease;
    -o-transition: all 1.5s ease;
    transition: all 1.5s ease;
    color: white;
    /* background: rgba(0,255,255,0.4); */
    position: absolute;
    padding: 1vw 2vw;
    left: 32%;
    width: 50%;
    margin-top: 8%;
    z-index: 5;
    border-radius: 2px;
}

#clip11text.visible {
    opacity: 1;
    margin-top: 8%;
    -webkit-transform: none;
    -moz-transform: none;
    -ms-transform: none;
    -o-transform: none;
    transform: none;
    z-index: 5;
}



#clip11img {
    opacity: 0;
    -webkit-transition: all 1.5s ease;
    -moz-transition: all 1.5s ease;
    -ms-transition: all 1.5s ease;
    -o-transition: all 1.5s ease;
    transition: all 1.5s ease;
    color: white;
    position: absolute;
    left: 33%;
    width: 38%;
    margin-top: 19%;
    z-index: 4;
}

#clip11img.visible {
    opacity: 1;
    left: 33%;
    width: 38%;
    -webkit-transform: none;
    -moz-transform: none;
    -ms-transform: none;
    -o-transform: none;
    transform: none;
    margin-top:19%;
    z-index: 4;
}



#clip12text {
    opacity: 0;
    -webkit-transition: all 1.5s ease;
    -moz-transition: all 1.5s ease;
    -ms-transition: all 1.5s ease;
    -o-transition: all 1.5s ease;
    transition: all 1.5s ease;
    color: white;
    /* background: rgba(0,255,255,0.4); */
    position: absolute;
    padding: 1vw 2vw;
    left: 32%;
    width: 50%;
    margin-top: 8%;
    z-index: 5;
    border-radius: 2px;
}

#clip12text.visible {
    opacity: 1;
    margin-top: 8%;
    -webkit-transform: none;
    -moz-transform: none;
    -ms-transform: none;
    -o-transform: none;
    transform: none;
    z-index: 5;
}



#clip12img {
    opacity: 0;
    -webkit-transition: all 1.5s ease;
    -moz-transition: all 1.5s ease;
    -ms-transition: all 1.5s ease;
    -o-transition: all 1.5s ease;
    transition: all 1.5s ease;
    color: white;
    position: absolute;
    left: 33%;
    width: 40%;
    margin-top: 17%;
    z-index: 4;
}

#clip12img.visible {
    opacity: 1;
    left: 33%;
    width: 40%;
    -webkit-transform: none;
    -moz-transform: none;
    -ms-transform: none;
    -o-transform: none;
    transform: none;
    margin-top:17%;
    z-index: 4;
}









/* .fixed_bottom_nav::after{
background-image:linear-gradient(180deg, rgba(255, 255, 250, 0.8) 0%,rgba(255, 255, 250, 0.2) 5%, rgba(255, 255, 255, 0.1) 50%,rgba(255, 255, 255, 0.0) 51%,  rgba(255, 255, 255, 0) 90%);
width: 100%;
left: 0;
height: 40px;
content: "";
position: absolute;
opacity: 0.8;
top: 0;
} */