@media only screen and (max-width: 1180px)
{
    .web_lf, .web_rt{
        position: absolute;
        top: 20%;
        width: 50%;
        height: 60%;
        font-family: smart;
        font-size: 16px;
        color: white;
        opacity: 0;
    }
    .web_lf p, .web_rt p{
        top: 25%;
        position: relative;
        padding: 5%;
    }
    .web_rt p{
        top: 30%;
    }
    
    .web_lf{
        text-align: right;
        animation-name: ent_LT;
        animation-duration: 1s;
        animation-timing-function: ease-in-out;
        animation-delay: 0.7s;
        animation-iteration-count: 1;
        animation-fill-mode: forwards;
        animation-direction: normal;
    }
    
    .web_rt{
        animation-name: ent_RT;
        animation-duration: 1s;
        animation-timing-function: ease-in-out;
        animation-delay: 1s;
        animation-iteration-count: 1;
        animation-fill-mode: forwards;
        animation-direction: normal;
    }
    .rot_line{
        position: absolute;
        background-color: white;
    
        animation-name: rot_Ln;
        animation-duration: 1s;
        animation-timing-function: ease-in-out;
        animation-delay: 0.01s;
        animation-iteration-count: 1;
        animation-fill-mode: forwards;
        animation-direction: normal;
    }
    
    @keyframes rot_Ln {
        0%{
            width: 0%;
            left: 50%;
            top: 50%;
            height: 1%;
            transform: rotateZ(0deg);
        }
        50%{
            width: 50%;
            left: 25%;
            top: 50%;
            height: 1%;
            transform: rotateZ(0deg);
        }
        100%{
            width: 50%;
            left: 25%;
            top: 50%;
            height: 1%;
            transform: rotateZ(90deg);
        }
    }
    
    @keyframes ent_LT{
        0%{
            left: 30%;
            opacity: 0;
        }
        50%{
            opacity: 0;
        }
        100%{
            left: 0;
            opacity: 1;
        }
    }
    @keyframes ent_RT{
        0%{
            right: 20%;
            opacity: 0;
        }
        50%{
            opacity: 0;
        }
        100%{
            right: 0%;
            opacity: 1;
        }
    }
    
    .cont_MV_web{
        box-sizing: border-box;
        /* font-size: 10.5px; */
        font-size: 60%;
        color: yellow;
        font-family: cicle_fina;
        text-shadow: 1px 1px 5px goldenrod;
        font-weight: bold;
        padding-left: 5%;
        padding-right: 5%;
        word-spacing: 3px;
    }
    
    .cont_flip{
        animation-name: ct_flip;
        animation-duration: 1s;
        animation-timing-function: ease-in-out;
        animation-delay: 2.5s;
        animation-iteration-count: 1;
        animation-fill-mode: forwards;
        animation-direction: normal;
    }
    
    @keyframes ct_flip {
        0%{
            transform: rotateX(0deg);
        }
        30%{
            transform: rotateX(180deg);
        }
        60%{
            transform: rotateX(180deg) rotateY(180deg);
        }
        80%{
            background-color: transparent;
            transform: rotateX(0deg) rotateY(180deg);
        }
        100%{
            transform: rotateX(0deg) rotateY(0deg);
        }
    }
    .web_P{
        font-family: 'Courier New', Courier, monospace;
        font-size: 10px;
        position: absolute;
        top: 10%;
        left: 15%;
        color: white;
    }
    
    /** 2d**/
    
    #grpx_lf{
        position: absolute;
        top: 20%;
        left: 15%;
    
        width: 50%;
        height: 30%;
        
        font-family: burowai, monospace;
        /* font-size: 4rem; */
        font-size: 2rem;
        text-align: center;
        color: rgb(253, 167, 135);
    
        animation-name: t_rise_flip;
        animation-duration: 1.5s;
        animation-timing-function: ease-in-out;
        animation-delay: 0.01s;
        animation-iteration-count: 1;
        animation-fill-mode: forwards;
        animation-direction: normal;
    }
    
    @keyframes t_rise_flip{
        0%{
            top: 120%;
        }
        50%{
            top: 0;
        }
    
        60%{
            top: 25%;
            height: 1%;
        }
        75%{
            top: 25%;
            height: 1%;
            width: 70%;
            transform: rotateZ(0deg);
        }
        100%{
            top: 35%;
            height: 1%;
            width: 50%;
            transform: rotateZ(90deg);
        }
    }
    
    #grpx_rt{
        font-family: smart;
        /* font-size: 1.5rem; */
        font-size: 0.75rem;
        color: rgb(92, 189, 152);
    
        position: absolute;
        width: 50%;
        height: 55%;
        top: 0%;
        left: 110%;
        opacity: 0;
    
        animation-name: ent_RT_2;
        animation-duration: 0.8s;
        animation-timing-function: ease-in-out;
        animation-delay: 2s;
        animation-iteration-count: 1;
        animation-fill-mode: forwards;
        animation-direction: normal;
    }
    #grpx_rt img{
        width: 100%;
        height: 100%;
    }
    @keyframes ent_RT_2{
        0%{
            left: 110%;
        }
        30%{
            opacity: 0;
        }
        100%{
            opacity: 1;
            left: 45%;
        }
    }
    
    #service_3_MV{
        position: absolute;
        top: 0; left: 0;
        width: 90%;
        height: 100%;
    }
    #anim_MV{
        color: wheat;
        padding-left: 5%;
    }
    
    #animata_lart{
        width: 90%;
        height: 80%;
        margin: auto;
        /* background-color: green; */
        position: relative;
    }
    #lart{
        font-size: 90%;
    }
}