* {
    box-sizing: border-box;
}

:root {
    --border: 4rem;
    --fix: 0.01px;

    --vGap: 0.1rem;
    --hGap: 0.8rem;
    --stroke: 2px;
    --smallB: 1px;


    --c: calc(100dvw / 12);


    --title: 6.65dvw;
    --g: calc(var(--c) - var(--title)*0.7);
    --sG: calc(3 * var(--hGap));


    --c1: calc(var(--c) * 1 - var(--fix));
    --c2: calc(var(--c) * 2 - var(--fix));
    --c3: calc(var(--c) * 3 - var(--fix));
    --c4: calc(var(--c) * 4 - var(--fix));
    --c5: calc(var(--c) * 5 - var(--fix));
    --c6: calc(var(--c) * 6 - var(--fix));
    --c7: calc(var(--c) * 7 - var(--fix));
    --c8: calc(var(--c) * 8 - var(--fix));
    --c9: calc(var(--c) * 9 - var(--fix));
    --c10: calc(var(--c) * 10 - var(--fix));
    --c11: calc(var(--c) * 11 - var(--fix));
    --c12: calc(var(--c) * 12 - var(--fix));


    --mainColor: black;
    --bgColor: white;
    --middleColor: #E4E4E4;
    --drawColor: #161615;
    --iconColor: #161615;
    --iconBgColor: white;
    --lightGray: #CBCBCB;

    --lineH: 1.15;
    --lineHL: 1.5;
    --h1: 2.375rem;
    --h2: 1.75rem;
    --h3: 1.5rem;
    /* FIGMA 1rem */
    --font-size: 1.1rem;
    /* FIGMA 0.75rem */
    --pSmall: 0.95rem;


    --animDuration: 300ms;
    --swiperFadeDuration: 350ms;
    --animType: ease-in-out;

    --lowerMenu: 0px;
    --menuHeight: calc(var(--title) + var(--lowerMenu));
    --footerHeight: calc(var(--sG) + var(--svgSize));


    --svgSize: calc(var(--h2) + 2 * var(--vGap));
    /* --barH: calc(0.1 * var(--title)); */
    --barH: 1.25dvw;
    --cursorSize: 30px;

    --projImgRatio: 1.6;
    --categoryRatio: 1.24;
    --swiperImgRatio: auto;
}

html {
    /* font-size: calc(0.5dvw + 0.5rem); */
    font-size: calc(0.5dvw + 0.35rem);
    -webkit-text-size-adjust: none;
    -ms-text-size-adjust: none;
    text-size-adjust: none;
}

@media screen and (orientation: portrait) {
    :root {
        --title: 10.65dvw;
        --c: calc(100dvw / 10);
        --g: calc((var(--c) - var(--title)*0.7) - var(--hGap));
        --sG: calc(2 * var(--hGap));

        --stroke: 1px;

        --lowerMenu: var(--sG);

        --projImgRatio: 1.73;


        --iconColor: white;
        --iconBgColor: #161615;
    }

    html {
        font-size: calc(0.5dvw + 0.65rem);
    }

}