// <weight>: Use a value from 100 to 900
    // <uniquifier>: Use a unique and descriptive class name

    .noto-sans-<uniquifier > {
        font-family: "Noto Sans", sans-serif;
        font-optical-sizing: auto;
        font-weight: <weight>;
        font-style: normal;
        font-variation-settings:
            "wdth"100;
    }

    // <weight>: Use a value from 100 to 900
    // <uniquifier>: Use a unique and descriptive class name

    .noto-sans-kr-<uniquifier > {
        font-family: "Noto Sans KR", sans-serif;
        font-optical-sizing: auto;
        font-weight: <weight>;
        font-style: normal;
    }

    html {
        width: 100%;
        height: 100%;
        box-sizing: border-box;
    }

    body {
        width: 100%;
        min-height: 100vh;
        box-sizing: border-box;
    }

    :root {
        --main-color: #262D32;
        
        /* footer */
        --area-padding: 20px;
        --area-box-width: 1440px;
        
        /* sub */
        --sub-inner-width: 1240px;
        --sub-area-padding: 20px;
        --sub-inner-padding: 100px;
    }


    /*공통 부분*/
    .wrap {
        position: relative;
        width: 100%;
        box-sizing: border-box;
    }

    .container-wrap {
        width: 100%;
        padding: var(--sub-inner-padding) 0;
    }

    .container-wrap .container-inner {
        width: 100%;
        max-width: var(--sub-inner-width);
        margin: 0 auto;
        padding: 0 var(--sub-area-padding);
        box-sizing: border-box;
    }

    .container-wrap .container-inner .box-content {
        width: 100%;
    }

    .box-title {
        width: 100%;
        overflow: hidden;
    }