@charset "utf-8";
/* index_ko.css */
/* Order: 1) Typography vars 2) Section overrides 3) Breakpoints */

:root {

    /* 폰트 관련 ko 설정 */

    /* 폰트패밀리-ko */
    --main-font-01: 'HsJandari';
    --main-font-02: 'Paperozi', sans-serif;
    --main-font-03: 'Suit', sans-serif;
    --sub-font-01: "DynaPuff", system-ui;


    /* 1-6. 폰트 설정 */
    --font-weight-nomoral: 600;
    --font-weight-bold: 700;

    font-family: var(--main-font-03);
    font-optical-sizing: auto;
    font-style: normal;

    /* h : title */
    h2 {
        font-family: var(--main-font-01);
        font-size: var(--pc-size-h2-ko);
        line-height: var(--pc-line-height-h2-ko);
        letter-spacing: -2px;
        font-weight: 400;
    }

    h3 {
        font-family: var(--main-font-02);
        font-weight: var(--font-weight-bold);
        font-size: var(--pc-size-h3-ko);
        line-height: var(--pc-line-height-h3-ko);
    }

    h4 {}

    h5 {}

    h6 {}

    /* p : des, text */
    p {
        font-family: var(--main-font-03);
        font-size: var(--pc-size-p);
        line-height: var(--pc-line-height-p);
        font-weight: var(--font-weight-nomoral);
    }


}

article.pet-shop .inner .wrapper-txt {
    max-width: 790px;
}


/***********************************************************/
/* 반응형 - 한글 폰트 설정 */
/* pc2: 노트북 & 테블릿 가로 (해상도 1200px ~ 1540px)*/
/* 기준 1540px인 이유 : pc버전 영문,일본어 inner 최대 너비가 1500px임 */
@media all and (max-width:1540px) {
    :root {

        /* h : title */
        h2 {
            font-size: var(--pc2-size-h2-ko);
            line-height: var(--pc2-line-height-h2-ko);
            letter-spacing: -2px;
            font-weight: 400;
        }

        h3 {
            font-weight: var(--font-weight-bold);
            font-size: var(--pc2-size-h3-ko);
            line-height: var(--pc2-line-height-h3-ko);
        }

        h4 {}

        h5 {}

        h6 {}

        /* p : des, text */
        p {}

    }

}

/***********************************************************/


/***********************************************************/
/* 테블릿 (해상도 800px ~ 1199px)*/
@media all and (max-width:1199px) {
    :root {

        /* h : title */
        h2 {
            font-size: var(--tab-size-h2-ko);
            line-height: var(--tab-line-height-h2-ko);
            letter-spacing: -2px;
            font-weight: 400;
        }

        h3 {
            font-weight: var(--font-weight-bold);
            font-size: var(--tab-size-h3-ko);
            line-height: var(--tab-line-height-h3-ko);
        }

        h4 {}

        h5 {}

        h6 {}

        /* p : des, text */
        p {}

        html,
        body,
        button,
        a {
            font-size: var(--tab-size-p-ko);
            line-height: var(--tab-line-height-p-ko);
        }

    }

}

/* 800px~1023px : 레이아웃 유지를 위한 폰트 크기 및 특정 코드 변경 구간 */
@media all and (max-width: 1023px) {

    /*style***************************************************/
    :root {

        /* h : title */
        h2 {
            font-size: 54px;
            line-height: 60px;
            letter-spacing: -2px;
        }

        h3 {
            font-size: 28px;
            line-height: 32px;
        }

        h4 {}

        h5 {}

        h6 {}

        /* p : des, text */
        p {
            font-size: 18px;
            line-height: 22px;
            font-weight: var(--font-weight-nomoral);
        }

        html,
        body,
        button,
        a {
            font-size: 18px;
            line-height: 22px;
            font-weight: var(--font-weight-nomoral);
        }

        /* 각종 inner 설정 */

        .inner {
            width: var(--tab-width);
            max-width: var(--tab-con-width);
            column-gap: 0;
            padding: var(--tab-padding);
        }

    }


    /***********************************************************/



    /***********************************************************/
    @media all and (max-width: 799px) {

        :root {

            /* h : title */
            h2 {
                font-family: var(--main-font-01);
                font-size: var(--mobile-size-h2-ko);
                line-height: var(--mobile-line-height-h2-ko);
                letter-spacing: -2px;
                font-weight: 400;
            }

            h3 {
                font-family: var(--main-font-02);
                font-weight: var(--font-weight-bold);
                font-size: var(--mobile-size-h3-ko);
                line-height: var(--mobile-line-height-h3-ko);
            }

            h4 {}

            h5 {}

            h6 {}

            /* p : des, text */
            p {
                font-family: var(--main-font-03);
                font-size: var(--mobile-size-p-ko);
                line-height: var(--mobile-line-height-p-ko);
                font-weight: var(--font-weight-nomoral);
            }

            html,
            body,
            button,
            a {
                font-size: var(--mobile-size-p-ko);
                line-height: var(--mobile-line-height-p-ko);
            }

            /* 각종 inner 설정 */

            .inner {
                width: var(--mobile-width);
                max-width: var(--mobile-con-width);
                column-gap: 0;
                padding: var(--mobile-padding);
            }



        }


    }

}

/***********************************************************/
@media all and (max-width: 370px) {
    /* 320px~370px 고려한 글자 크기 */

    article.raise-loop .wrapper-txt h2 {
        font-size: 44px;
    }

    article.ai-pet-life .wrapper-txt h2 {
        font-size: 44px;
    }

    article.ai-pet-life .wrapper-txt h2 span {
        width: 56px;
    }

}



/***********************************************************/