/* 약어 정리 */

:root{
 --blue:#003DA5;
 --red:#D62828;
 --yellow:#F4C300;
 --void:#FFFFFF;
 --gap:4px;
}

/* Desktop view 지정 (1200 px 이상) */


/* 전체 요소 */

*{
margin:0;
padding:0;
box-sizing:border-box;
}

/* header */

.header{
display:grid;
font-family:'Jeju Gothic',sans-serif;
width:min(1440px,95vw);
margin:0 auto;
padding:20px 0;
grid-template-columns:1fr auto;
align-items:center;
}

.site_logo{
color:#fff;}
.logo_f{color:var(--red)}
.logo_l{color:var(--yellow)
}

.header_tools img{
    width:32px;
    height:32px;
    display:block;
}
.header_tools a{
    display:flex;
    justify-content:center;
    align-items:center;

    width:40px;
    height:40px;
}

.header_tools img{
    transition:transform .2s ease;
}

.header_tools a:hover img{
    transform:scale(1.1);
}


/* subheader */

.subheader{
display:grid;
gap:var(--gap);
font-family:'Jeju Gothic',sans-serif;
width:min(1440px,95vw);
margin:0 auto;
    grid-template-columns:
        2.2fr
        repeat(10, 1fr)
        2.2fr;
grid-template-rows:50px;
}

.subheader_item{
    display:block;
    padding:6px;
    font-size:1rem;
    line-height:1.2;
}


.subheader_main{
    grid-column:1 / span 6; grid-row:1 / span 1;
    background:var(--yellow);
    text-decoration:none;
}

.subheader_sub{
    grid-column:7 / span 3; grid-row:1 / span 1;
    background:#fff;
}

.subheader_void{
    grid-column:10 / span 3; grid-row:1 / span 1;
    background:var(--red);
}

.subheader_item:not([href]){
    cursor:default;
}


/* footer */

.footer{
color:white;
font-family:'Nanum Gothic',sans-serif;
width:min(1440px,95vw);
margin:0 auto;
padding:12px 0;
text-align:center;
line-height:1.2;
font-size:0.8rem;
}

.footer p{
margin:0.4rem 0;
}

.footer a{
color:white;
text-decoration:none;
}

.footer a:hover{
text-decoration:underline;
}


/* social grid */

.social{
grid-area:social;
background:#fff;
color:#000;
display:grid;
grid-template-columns:repeat(4,1fr);
align-items:center;
justify-items:center;
padding-inline:10px;
}

.social img{
width:50px;
height:50px;
display:block;
}


/* Tablet view 지정 (768~1199 px) */

@media screen and (max-width:1199px){

.social img{
width:32px;
height:32px;
display:block;
}

}


/* Mobile view 지정 (767 px 이하) */

@media screen and (max-width:767px){

.social img{
width:32px;
height:32px;
display:block;
}

}