.anima_head {
    opacity: 1;
position: relative;
animation: viewDir 6s infinite;
animation-delay: 5s;
}

@keyframes viewDir {
0%{
opacity: 0;
width: 0%;
display: none;
}
50%{
opacity: 1;
width: 100%;
display: block;
}
100%{
opacity: 0;
width: 0%;
}
}


.anima_white {
width: 500px;
height: 50px;
background: linear-gradient(360deg, #ffffff, #ffffff);
transform: skew(-53deg);
border: 1px solid #80808085;
position: relative;
}
.anima_white::before {
content: '';
background: #030f80;
width: 10px;
position: absolute;
z-index: 999;
height: 100%;
left: 7px;
}
.anima_white::after {
content: '';
background: #030f80;
width: 10px;
position: absolute;
z-index: 999;
height: 100%;
right: 7px;
}
.anim_grey {
background: #bb0215;
/* transform: skew(0deg); */
position: absolute;
width: 70%;
right: 50px;
position: absolute;
height: 20px;
top: 42px;
z-index: 999;
}
.anim_grey::before {
background: #383534;
position: absolute;
content: '';
width: 95%;
right: 9px;
position: absolute;
height: 20px;
/* top: 40px; */
z-index: -1;
}
.anim_blue {
    width: 100%;
    height: 77px;
    position: absolute;
    bottom: -14px;
    z-index: 999;
    left: 35px;
    width: 135px;
    transition: all 0.5s;
    animation: anim_top 2s linear;
}

@keyframes anim_top{
0%{
height: 13px;
opacity: 0;
}
50%{
height: 50px;
opacity: 0.8;
}
100%{
height: 77px;
opacity: 1;
}
}
.anima_blue {
background: linear-gradient(3deg,#010e76, #273cb3, #010e76);
width: 100%;
height: 100%;
position: absolute;
z-index: 999;
}
.anim_blue::before {
background: #0e25b0;
content: '';
position: absolute;
top: 0;
right: -18px;
width: 60px;
height: 15px;
transform: skew(69deg);
z-index: -1;
isolation: isolate;
}
.anim_blue::after {
background: blue;
content: '';
background: #1527af;
position: absolute;
bottom: 0;
left: -18px;
width: 40px;
height: 14px;
transform: skew(69deg);
z-index: -1;
isolation: isolate;
}
.site_nme {
height: 100%;
position: absolute;
top: -3px;
display: flex;
align-items: center;
justify-content: center;
font-family: poppins;
font-weight: 700;
letter-spacing: 1px;
color: #000;
font-size: 22px;
left: 42%;
}
.site_tite {
position: absolute;
color: white;
font-family: poppins;
letter-spacing: 6px;
bottom: -16px;
left: 50%;
}
.site_tite::before {
position: absolute;
background: linear-gradient(90deg, transparent 0%, #383534 5%, #383534 100%);
content: '';
top: 5px;
right: 0;
width: 104%;
height: 72%;
z-index: 9999;
animation: smallHead 2s linear forwards;
}
@keyframes smallHead {
0%{
width: 105%;
}
50%{
width: 50%;
}
100%{
width: 0%;
}
}
.glb_img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 9999;
display: flex;
align-items: center;
justify-content: center;
}
.glb_img img {
transform: skew(53deg);
width: 40px;
animation: scalein 3s linear forwards;
}
@keyframes scalein {
0%{
transform: skew(53deg) scale(0);
}
50%{
transform: skew(53deg) scale(0.5);
}
100%{
transform:  skew(53deg) scale(1);
}
}

.hide_showtxt {
margin: 0;
padding: 0;
}
.hide_showtxt::before {
content: '';
right: 0;
position: absolute;
width: 105%;
height: 63%;
margin: 0;
padding: 0;
background: linear-gradient(90deg, transparent 0%, #ffff 5%, #fff 100%);
animation: run 2s linear forwards;
/* animation-delay: 5s; */
}

@keyframes run {
0%{
width: 105%;
}
50%{
width: 50%;
}
100%{
width: 0%;
}
}
.news_anim {
    position: absolute;
    z-index: 999;
    bottom: 45px;
    left: 45px;
}


@media only screen and (max-width : 800px){
    .news_anim {
        position: absolute;
        z-index: 999;
        bottom: 10px;
        left: 8px;
        width: 250px;
    }
    .anima_white {
        width: 85%;
        margin: auto;
        height: 25px;
    }
    .anim_blue {
        width: 100%;
        height: 35px !important;
        position: absolute;
        bottom: -6px;
        z-index: 999;
        left: 20px;
        width: 40px;
        transition: all 0.5s;
        animation: anim_top 2s linear;
    }
    .glb_img img {
        transform: skew(53deg);
        width: 15px;
        animation: scalein 3s linear forwards;
    }
    .anim_grey {
        background: #bb0215;
        position: absolute;
        width: 64%;
        right: 35px;
        position: absolute;
        height: 11px;
        top: 18px;
        z-index: 999;
    }
    .anim_grey::before {
        background: #383534;
        position: absolute;
        content: '';
        width: 95%;
        right: 9px;
        position: absolute;
        height: 100%;
        /* top: 40px; */
        z-index: -1;
    }
    
    .anim_blue::before {
        background: #0e25b0;
        content: '';
        position: absolute;
        top: 0;
        right: -7px;
        width: 31px;
        height: 6px;
        transform: skew(69deg);
        z-index: -1;
        isolation: isolate;
    }
    .anim_blue::after {
        background: #0e25b0;
        content: '';
        position: absolute;
        bottom: 0;
        left: -7px;
        width: 31px;
        height: 6px;
        transform: skew(69deg);
        z-index: -1;
        isolation: isolate;
    }
    .site_nme {
        height: 100%;
        position: absolute;
        top: -3px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: poppins;
        font-weight: 700;
        letter-spacing: 1px;
        color: #000;
        font-size: 10px;
        left: 37%;
    }
    .site_tite {
        position: absolute;
        color: white;
        font-family: poppins;
        letter-spacing: 6px;
        bottom: -5px;
        left: 89px;
        font-size: 7px;
    }
    .site_tite::before{
        top: 0px;
    }
    .anima_white::before {
        width: 4px;
        left: 5px;
    }
    .anima_white::after {
        width: 4px;
        right: 5px;
    }
}