html, body {
    margin: 0;
    width: 100%;
    height: 130vh;
    overflow: hidden;
    background: white;
    color: black;
}


.layout {
    width: 100%;
    height: 130vh;

    display: grid;
    grid-template-columns: 80% 20%;
    grid-template-rows: 10% 10% 10% 70%;

  
    box-sizing: border-box;
}


.logo {
    margin-top: 20px;
    grid-row: 1;
    grid-column: 1;

    width: 100%;
    height: 100%;

    overflow: hidden;
   
    box-sizing: border-box;
}

.logo img {
    width: 100%;
    height: 100%;
}

.login_box {
   
    margin-top: 2%;
    display: grid;
    grid-row: 1;
    grid-column: 2;

    width: 100%;
    height: 100%;

    overflow: hidden;
   
    box-sizing: border-box;
    border: 3px solid black;;
}




.banner {

    margin-top: 20px;
    grid-row: 2;
    grid-column: 1 / 3;
    
    border: 5px solid wheat;

    border-radius: 20px;
}

.login_menu {

    grid-row: 1/3;
    grid-column: 2;
    display: grid;
  

}


.menu
{   
    margin-top: 20px;
    grid-row: 3;
    grid-column: 1/3;
    display: grid;
  
    


    grid-template-columns: 25% 25% 25% 25%;



}

.menu .first_news
{   
    grid-column: 1;
    

}


.first_news button {
    
    height: 100%;
    width: 100%;
    background: wheat;
    border: 5px solid black;
    border-radius: 20px;
    font-size: 20px;
    font-style: oblique;
}

.first_news button:active {
    background: rgb(249, 236, 213);
    transform: scale(0.97);
}

/* 마우스를 올렸을 때 */
.first_news button:hover {
    background: rgb(249, 236, 213);
}



.menu .second_news
{   
    grid-column: 2;
 

}





.container {
    
    margin-top: 20px;
    grid-row: 4;
    grid-column: 1/3;
    display:block;
   
}