/* #################################### FONTS IMPORT #################################### */
/* ################## 몬세라트 ################## */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100..900&display=swap');


/* ################## 페이퍼로지 ################## */
@font-face {
    font-family: 'Paperozi';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-3Light.woff2') format('woff2');
    font-weight: 300;
    font-display: swap;
} /* =300 */

@font-face {
    font-family: 'Paperozi';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-5Medium.woff2') format('woff2');
    font-weight: 500;
    font-display: swap;
} /* =500 */

@font-face {
    font-family: 'Paperozi';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-7Bold.woff2') format('woff2');
    font-weight: 700;
    font-display: swap;
} /* =700 */


/* ################## 프리텐다드 ################## */
@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Light.woff2') format('woff2');
    font-weight: 300;
    font-display: swap;
} /* =300 */

@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Medium.woff2') format('woff2');
    font-weight: 500;
    font-display: swap;
} /* =500 */

@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Bold.woff2') format('woff2');
    font-weight: 700;
    font-display: swap;
} /* =700 */

@font-face {
    font-family: 'Paperozi';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-9Black.woff2') format('woff2');
    font-weight: 900;
    font-display: swap;
} /* =900 */


/* ################## 롯데마트 ################## */
@font-face {
    font-family: 'LotteMartDream';
    src: url('//cdn.jsdelivr.net/korean-webfonts/1/corps/lottemart/LotteMartDream/LotteMartDreamMedium.woff2') format('woff2'),
         url('//cdn.jsdelivr.net/korean-webfonts/1/corps/lottemart/LotteMartDream/LotteMartDreamMedium.woff') format('woff');
    font-weight: 400;
    font-display: swap;
}


:root{
    /* #################################### FONTS #################################### */
    --main-fnt: 'Paperozi';
    --sub-fnt: 'Pretendard';
    --eng-fnt: "Montserrat", sans-serif;

    /* #################################### COLORS #################################### */
    --f-red: #B61B2D;
    --grn: #519E51;
    --nav: #0B1746;
    --pup: #6668F9;
    --vlo: #494BC8;
    --yel: #F9E000;
    --blk: #222222;
    --gry: #777777;
    --lgy: #BBBBBB;
    --dgy: #F7F7F7;
    --wht: #FFFFFF;
    --tsd: 0 0 3px rgba(0,0,0,0.5);

    /* #################################### FONT-SIZES #################################### */
    --fs-8: 8px;
    --fs-10: 10px;
    --fs-11: 11px;
    --fs-12: 12px;
    --fs-13: 13px;
    --fs-14: 14px;
    --fs-15: 15px;
    --fs-16: 16px;
    --fs-17: 17px;
    --fs-18: 18px;
    --fs-20: 20px;
    --fs-22: 22px;
    --fs-24: 24px;
    --fs-26: 26px;
    --fs-28: 28px;
    --fs-30: 30px;
    --fs-32: 32px;
    --fs-33: 33px;
    --fs-36: 36px;
    --fs-40: 40px;
    --fs-44: 44px;
    --fs-48: 48px;
    --fs-50: 50px;
    --fs-54: 54px;
    --fs-60: 60px;
    --fs-64: 64px;
    --fs-70: 70px;

    /* #################################### FLEX-GAPS #################################### */
    --gap-1: 4px;
    --gap-2: 8px;
    --gap-3: 12px;
    --gap-4: 16px;
    --gap-5: 20px;
    --gap-6: 24px;
    --gap-7: 28px;
    --gap-8: 32px;
    --gap-9: 36px;
    --gap-10: 40px;
    --gap-11: 44px;
    --gap-12: 48px;
    --gap-13: 52px;
    --gap-14: 56px;
    --gap-15: 60px;
    --gap-16: 64px;
    --gap-17: 68px;
    --gap-18: 72px;
    --gap-19: 76px;
    --gap-20: 80px;
    --gap-25: 100px;
    --gap-30: 120px;
    --gap-40: 160px;

    /* ######### 섹션 내부크기 ######### */
    --sec-inner: 1280px;
}
@media (max-width:768px){
    :root{
        /* #################################### FONT-SIZES #################################### */
        --fs-8: 2.13vw;
        --fs-10: 2.67vw;
        --fs-11: 2.93vw;
        --fs-12: 3.20vw;
        --fs-14: 3.73vw;
        --fs-15: 4.00vw;
        --fs-16: 4.27vw;
        --fs-17: 4.53vw;
        --fs-18: 4.80vw;
        --fs-20: 5.33vw;
        --fs-22: 5.87vw;
        --fs-24: 6.40vw;
        --fs-26: 6.93vw;
        --fs-28: 7.47vw;
        --fs-30: 8.00vw;
        --fs-32: 8.53vw;
        --fs-33: 9.60vw;
        --fs-40: 10.67vw;
        --fs-44: 11.73vw;
        --fs-50: 13.33vw;
        --fs-54: 14.40vw;
        --fs-60: 16.00vw;
        --fs-64: 17.07vw;
        --fs-70: 18.67vw;

        /* #################################### FLEX-GAPS #################################### */
        --gap-1: 1.07vw;
        --gap-2: 2.13vw;
        --gap-3: 3.2vw;
        --gap-4: 4.27vw;
        --gap-5: 5.33vw;
        --gap-6: 6.4vw;
        --gap-7: 7.47vw;
        --gap-8: 8.53vw;
        --gap-9: 9.6vw;
        --gap-10: 10.67vw;
        --gap-11: 11.73vw;
        --gap-12: 12.8vw;
        --gap-13: 13.87vw;
        --gap-14: 14.93vw;
        --gap-15: 16vw;
        --gap-16: 17.07vw;
        --gap-17: 18.13vw;
        --gap-18: 19.2vw;
        --gap-19: 20.27vw;
        --gap-20: 21.33vw;
        --gap-25: 26.67vw;
        --gap-30: 32vw;
        --gap-40: 42.67vw;
    }
}