@charset "utf-8";
header{
    display:flex;flex-wrap:wrap;
    justify-content:center;align-items:center;
    position:relative;
    width:var(--WID); height:var(--HEI-header);
    box-shadow:var(--boxShadow);}

h1{font-size:0.9rem; font-weight:normal; cursor:pointer;}
h1 img{width:1em;height:auto;}

#btn_help{
    display:block;position:absolute;
    right:1rem;top:50%;
    transform:translateY(-50%);
    width:22px; aspect-ratio:1/1;
    background:transparent url(../img/ic_qusetion.svg) no-repeat center center / cover;
    border:none;
}

#wrap_about{
    position:fixed; z-index:100;
    top:0;left:0;
    width:100%;height:100vh;
    background:var(--bg-tp);
    backdrop-filter:var(--blur);
    animation: showModal .5s both ease-in-out;}

#about{
    position:absolute;
    top:50%;left:50%;
    transform:translate(-50%,-50%);
    width:80%; max-width:300px;
    padding:2rem 1rem;
    background:var(--box);
    text-align:center; font-weight:100; font-size:.9rem;
    border-radius:14px;
    box-shadow:var(--boxShadow);
    animation: insideModal .5s .25s both ease-in-out;}

#about > div{
    margin-bottom:2rem;
    padding:.5rem 1rem;
    background:var(--f_blur);
    line-height:180%;
    font-size:13px;
}

#about p{margin:1em auto;}
#about a{
    text-decoration:underline wavy var(--mint);
    font-weight:500;color:#fff;}

#btn_close_about{
    padding:.7em 1em .6em; margin-top:1em;
    border:none; border-radius:4px;
    background:var(--mint);
    box-shadow:var(--boxShadow); 
    font-size:14px; color:var(--bg);
}

/* 애니메이션 */
@keyframes showModal {
    0%{transform:scale(1.5); opacity:0;}
    100%{transform:scale(1); opacity:1;}   
}
@keyframes insideModal {
    0%{transform:translate(-50%, -100%);}
    100%{transform:translate(-50%,-50%);}
}