:root{
    /* basic size 1rem */
    --basic-font-pc:20px;
    --basic-font-tab:18px;
    --basic-font-mobile:14px;

    /* main color */
    --main-color: #BEDCFF;

    /* font */
    --heading1: 1.6rem; 
    --heading2: 1.4rem; 
    --heading3: 1.25rem; 
    --heading4: 1rem;
    --body: 1rem;
    --weight1: 700; 
    --weight2: 400; 
    --lnh120: 1.2;
    --lnh150: 1.5;
}

 p{
        line-height: var(--lnh150);
    }

.pf {
font-family: "Italiana", sans-serif;
font-weight: 400;
font-style: normal;
}

h1{
    font-size: var(--heading1);
    font-weight: var(--weight1);
}

h2{
    font-size: var(--heading2);
    font-weight: var(--weight1);
}

h3{
    font-size: var(--heading3);
    font-weight: var(--weight1);
}

h4{
    font-size: var(--heading4);
    font-weight: var(--weight1);
}

html{
    font-size: var(--basic-font-pc);
    font-family: 'Pretendard', sans-serif;
    scroll-behavior: smooth;
}



em{
    font-style: inherit;
    color: #90A0EE;
}

.bold{
    font-weight: var(--weight1);
}

.title-btn {
    border: 1px solid var(--main-color);
    min-width: 180px;
    border-radius: 20px;
    background-color: var(--main-color);
    color: #1e1e1e;
    margin: 3rem auto 1rem;
    padding: .5rem 1rem;
    text-align: center;
    display: table;
}


@media (min-width: 2000px){
    .common-frame{
        max-width: 1920px;
        margin: 0 auto;
    }
    html{
        font-size:24px;
    }
}

@media (max-width:1999px){
    .common-frame{
        width: auto;
        margin: 0 3rem;
    }
}

@media (max-width:1024px){
    html{
        font-size: var(--basic-font-tab);
    }    
    .common-frame{
        width: auto;
        margin: 0 2rem;
    }
}

@media (max-width:768px){
    html{
        font-size: var(--basic-font-mobile);
    }
    .common-frame{
        width: auto;
        margin: 0 1rem;
    }

    .title-btn {
        min-width: 180px;
    }
    
}