@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css");

:root{
    /* Color */
    --c-primary : #1EC95B;
    --c-point : #FC1D01;
    --c-background-neutral : #F5F5F7;
    --c-background-yellow : #F8FAEC;
    --c-background-blue : #EAFAFF;
    --c-text01 : #000000;
    --c-text02 : #333333;
    --c-text03 : #666666;
    --c-text04 : #999999;
    --c-gradient-red : linear-gradient(90deg, #FC1D01 0%, #FDA245 100%);
    --c-gradient-green : linear-gradient(90deg, #1EC95B 0%, #01D29C 100%);
    --c-border-neutral : #F5F5F7;
    --c-border-blue : #E4E8F1;
    --c-border-black : #000000;
    --c-success : #1EC95B;
    --c-warning : #FC1D01;

    /* Typography */
    --f-display : 2.7rem; /* 54px */
    --f-fontSize01 : 2rem; /* 40px */
    --f-fontSize02 : 1.6rem; /* 32px */
    --f-fontSize03 : 1.3rem; /* 26px */
    --f-fontSize04 : 1.1rem; /* 22px */
    --f-fontSize05 : 1rem; /* 20px */
    --f-body1 : 0.9rem; /* 18px */
    --f-body2 : 0.8rem; /* 16px */
    --f-detail : 0.7rem; /* 14px */

    /* letter spacing (Typography와 함께 사용) */
    --ls-display : ;

    /* Shadows */
    --s-shadow-neutral01 : 0px 4px 10px 0px rgba(0, 0, 0, 0.12);
    --s-shadow-neutral02 : 0px 8px 20px 0px rgba(0, 0, 0, 0.12);
    --s-shadow-neutral03 : 0px 14px 40px 0px rgba(0, 0, 0, 0.14);
    --s-shadow-blue01 : 0px 4px 10px 0px #EBEFF4;
    --s-shadow-blue02 : 0px 8px 20px 0px #EBEFF4;
    --s-shadow-blue03 : 0px 14px 40px 0px #EBEFF4;

    /* Radius */
    --r-radius01: 12px;
    --r-radius02: 24px;
    --r-radius03: 9999999px;
}


#art-portfolio {background: #122139; font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif; text-align: left; font-size: var(--f-body1); padding: 4rem 0;}
#art-portfolio .max-width{padding: 0;}
#art-portfolio .art-portfolio-con {margin: 0 auto; display: flex; align-items: center; justify-content: center;}
#art-portfolio .art-portfolio-img {aspect-ratio: 143 / 215; width: 4.6rem; background-image: url("https://s3.ap-northeast-2.amazonaws.com/img.edmuhak.com/uhak/r/v1/programs/fashion-design/fashion-design-img04-240627.png"); background-repeat: no-repeat; background-position: center; background-size: cover; margin-right: 1.2rem;}
#art-portfolio .art-portfolio-text > span {display: inline-block;margin-bottom: .8rem;aspect-ratio:368/42;}
#art-portfolio .art-portfolio-text > span > img {width: 18.4rem; object-fit: cover;}
#art-portfolio .art-portfolio-text > p {font-size: var(--f-body2); color: var(--c-text04); line-height: 166%; text-align: left;}
#art-portfolio .art-portfolio-link{display: flex; color: #fff; justify-content: center; font-size: var(--f-fontSize02);}
#art-portfolio .art-portfolio-link > div + div{margin-left: 1.6rem;}






@media (max-width: 1200px) {
    #art-portfolio .max-width{padding: 0 16px;}
}
@media screen and (max-width: 768px) {
    :root{

        /* Typography */
        --f-display : 2.153rem; /* 28px */
        --f-fontSize01 : 1.923rem; /* 25px */
        --f-fontSize02 : 1.692rem; /* 22px */
        --f-fontSize03 : 1.538rem; /* 20px */
        --f-fontSize04 : 1.384rem; /* 18px */
        --f-fontSize05 : 1.23rem; /* 16px */
        --f-body1 : 1.153rem; /* 15px */
        --f-body2 : 1.076rem; /* 14px */
        --f-detail : 1rem; /* 13px */

    }


    #art-portfolio{padding: 50px 0;text-align:center;}
    #art-portfolio .art-portfolio-con {display: block;}
    #art-portfolio .art-portfolio-img{width: 4.464rem; margin: 0 auto 12px; aspect-ratio: 58/82; background-image: url("https://s3.ap-northeast-2.amazonaws.com/img.edmuhak.com/uhak/r/v1/programs/fashion-design/fashion-design-img04-mo.png"); }
    #art-portfolio .art-portfolio-text{width: 100%;}
    #art-portfolio .art-portfolio-text > span {margin-bottom: 12px;aspect-ratio: 241/28;}
    #art-portfolio .art-portfolio-text > span > img{width: 18.54rem;}
    #art-portfolio .art-portfolio-text > p{ font-size: var(--f-body1); line-height: 150%; text-align: center; }
    #art-portfolio .art-portfolio-link{display: block;}
    #art-portfolio .art-portfolio-link a{line-height: 130%;}
    #art-portfolio .art-portfolio-link > div + div{margin-left: 0; margin-top: 4px;}
}
