:root{
    /* width */
    --maxWh: 75rem;

    /* size */
    --size4: 0.25rem;
    --size8: 0.5rem;

    --shadow1: 0 4px 14px rgba(0, 0, 0, 0.06);
    --shadow2: 0 2px 10px rgba(0, 0, 0, 0.03);

    /* color */
    --white: #fff;
    --black: #000;
    --mainColor: #54c3f1;
    --mainOpColor: #ddf3ff;
    --subColor: #13568d;
    --hovColor: #7bd1ff;
    --baseColor: #555555;
    --kakaoCol: #FEE500;
    --kakaoColB: #181600;

    --b333: #333333;
    --b666: #666666;
    --b777: #777777;
    --b888: #888888;
    --b999: #999999;
    --bAAA: #AAAAAA;
    --bD9: #D9D9D9;
    --bEEE: #EEEEEE;
    --bf2: #F2F2F2;
    --bf9: #f9f9f9;
    --bf8: #f8f8f8;
    --bfb: #fbfbfb;

    /* font size */
    --ftS01vw: 1.66vw; /* 32px */
    --ftS02vw: 1.3vw; /* 25px */
    --ftS03vw: 1.04vw; /* 20px */
    --ftS04vw: 0.93vw; /* 18px */
    --ftS05vw: 0.83vw; /* 16px */
    --ftS06vw: 0.78vw; /* 15px */
    --ftS07vw: 0.72vw; /* 14px */
    --ftS08vw: 0.62vw; /* 12px */
    --ftS09vw: 0.52vw; /* 10px */
    --ftS10vw: 0.41vw; /* 8px */
    
    --ftS01rem: 2rem; /* 32px */
    --ftS02rem: 1.56rem; /* 25px */
    --ftS03rem: 1.25rem; /* 20px */
    --ftS04rem: 1.12rem; /* 18px */
    --ftS05rem: 1rem; /* 16px */
    --ftS06rem: 0.93rem; /* 15px */
    --ftS07rem: 0.87rem; /* 14px */
    --ftS08rem: 0.75rem; /* 12px */
    --ftS09rem: 0.62rem; /* 10px */
    --ftS10rem: 0.5rem; /* 8px */

    
    /* font-weight  */
    --ftW400: 400;
    --ftW500: 500;
    --ftW600: 600;
    --ftW700: 700;

    /* padding / margin */
    --mg140: 8.75rem; /* 140px */
    --mg130: 8.12rem; /* 130px */
    --mg120: 7.5rem; /* 120px */
    --mg100: 6.25rem; /* 100px */
    --mg90: 5.62rem; /* 90px */
    --mg70: 4.37rem; /* 70px */
    --mg80: 5rem; /* 80px */
    --mg60: 3.75rem; /* 60px */
    --mg50: 3.12rem; /* 50px */
    --mg40: 2.5rem; /* 40px */
    --mg30: 1.87rem; /* 30px */
    --mg25: 1.56rem; /* 25px */
    --mg20: 1.25rem; /* 20px */
    --mg15: 0.93rem; /* 15px */
    --mg30: 1.87rem; /* 30px */
    --mg15: 0.93rem; /* 15px */
    --mg10: 0.65rem; /* 10px */
    --mg5: 0.31rem; /* 5px */

    --pd140: 8.75rem; /* 140px */
    --pd130: 8.12rem; /* 130px */
    --pd120: 7.5rem; /* 120px */
    --pd100: 6.25rem; /* 100px */
    --pd90: 5.62rem; /* 90px */
    --pd80: 5rem; /* 80px */
    --pd70: 4.37rem; /* 70px */
    --pd60: 3.75rem; /* 60px */
    --pd50: 3.12rem; /* 50px */    
    --pd40: 2.5rem; /* 40px */
    --pd30: 1.87rem; /* 30px */
    --pd25: 1.56rem; /* 25px */
    --pd20: 1.25rem; /* 20px */
    --pd15: 0.93rem; /* 15px */
    --pd10: 0.65rem; /* 10px */
    --pd5: 0.31rem; /* 5px */

    /* transition */
    --ttionFtC: color 0.2s linear;
    --ttionBG: background-color 0.2s linear;
    --ttionopac1: opacity 0.4s linear;
    --ttionopac2: opacity 0.2s linear;
}

@keyframes popAni {
    0%{
        opacity: 0;
        transform: translate(0, -10%);
    }100%{
        opacity: 1;
        transform: translate(0, 0);
    }
}
@keyframes popAni2 {
    0%{
        opacity: 0;
    }100%{
        opacity: 1;
    }
}
@keyframes popAni3 {
    0%{
        opacity: 0;
        transform: translate(-50%, -60%);
    }100%{
        opacity: 1;
        transform: translate(-50%, -50%);
    }
}