@charset "UTF-8";
/* CSS Document */
.rgc_www_cover{
    aspect-ratio: 16/9;
    background-color: #002549;
    display: flex;
    justify-content: center;
}

.rgc_www_cover>img{
    width: 50%;
    margin: auto;
    object-fit: contain;
}

.www_scroll{
    position: relative;
    width: 100%;
    background-color: #002549;
    aspect-ratio: 16 / 9;
    margin: auto;
    overflow-y: hidden;
    border-bottom-left-radius: 30px;
    border-bottom-right-radius: 30px;
    border: solid 2px white;
    border-top: none;
}

#img_scroll{
    width: 100%;
    position: absolute;
    left: 0;
    top: 0;
}

.start_scroll{
    /*opacity:.1;*/
    animation: www_main 16s infinite;
}


.www_scroll_1>.screen_bar{
    border-top:none;
    border-left: none;
    border-right: none;
}

.www_scroll_1{
    aspect-ratio: 16 / 11.294;
    overflow-y: hidden;
    border: solid 2px white;
    border-radius: 30px;
}
.macbook{
    display: inline-block;
    width: 100%;
    background: url('../img/rgc_www/macbook.jpg') top center no-repeat;
    background-size: contain;
    margin-lef: auto;
    margin-right: auto;
}

.macbook:after {
  padding-top: 62.5%;
  display: block;
  content: '';
}
.screen_macbook{
    position: absolute;
    top: 9.7%;
    margin: 3.61% 20%;
    width: 60%;
    height: 61.9%;
}


@keyframes www_main
{
    0%{
        transform:translateY(0%);
        opacity:1;
    }10%,
    10.01%{
        transform:translateY(0%);
    }25%,
    25.01%{
        transform:translateY(-26%)
    }37.5%,
    37.501%{
        transform:translateY(-26%)
    }50%,
    50.001%{
        transform:translateY(-51%)
    }62.5%,
    62.501%{
        transform:translateY(-51%)
    }75%,
    75.001%{
         transform:translateY(-76%)
    }85.0%,
    85.01%{
         transform:translateY(-76%)
    }90%,
    
    90.01%{
        transform:translateY(-87.25%);
        opacity:1;
    }99%,
    99.01%{
        opacity:1; 
        transform:translateY(-87.25%)
    }99.1%,
    99.11%{
        opacity:0; 
        transform:translateY(-87.25%)
    }99.9%,
        
    100%{transform:translateY(0%);
        opacity:0;}
}


/* --------------------- 1024px ------------*/
@media (max-width: 1024px){

    
    
    
}

/* --------------------- 768px ------------*/
@media (max-width: 768px){

    
    

}

/* --------------------- 576px ------------*/
@media (max-width: 576px){
.rgc_www_cover{
    aspect-ratio: 1/1;
}

.rgc_www_cover>img{
    width: 75%;

}



}




/* --------------------- 400px ------------*/
@media (max-width: 400px){

.www_scroll{

    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;

} 
    
    
}