@charset "utf-8";

/* 슬로건 */
.about-slogan-section {padding-block: var(--space-160) calc(var(--space-160) + var(--space-40));}
.about-slogan-section .slogan-wrap {display: flex; align-items: flex-end; justify-content: space-between; column-gap: var(--space-40);}
.about-slogan-section .slogan-wrap .display-hero {width: 59.267%; color: var(--text-strong);}
.about-slogan-section .slogan-wrap .note-wrap {display: flex; flex-direction: column; row-gap: var(--space-8); flex: none; width: 19.397%;}
.about-slogan-section .slogan-wrap .note-wrap .ui-label {color: var(--text-muted);}
.about-slogan-section .slogan-wrap .note-wrap .caption-default {color: var(--text-secondary);}

/* 관점 */
.about-perspective-section {padding-bottom: calc(var(--space-160) + var(--space-80));}
.about-perspective-section .perspective-wrap {display: flex; align-items: flex-start; justify-content: space-between;}
.about-perspective-section .perspective-wrap .img-wrap {position: relative; flex: none; width: 44.989%; aspect-ratio: 4 / 5; overflow: hidden; background-color: var(--bg-image-placeholder);}
.about-perspective-section .perspective-wrap .img-wrap img, .about-perspective-section .perspective-wrap .img-wrap .img-placeholder {position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;}
.about-perspective-section .perspective-wrap .txt-wrap {display: flex; flex-direction: column; row-gap: var(--space-24); flex: none; width: 32.328%; padding-top: 15.086%;}
.about-perspective-section .perspective-wrap .txt-wrap .ui-label {color: var(--text-muted);}
.about-perspective-section .perspective-wrap .txt-wrap .display-section {color: var(--text-strong);}
.about-perspective-section .perspective-wrap .txt-wrap .body-large {color: var(--text-primary);}

/* 포지셔닝 */
.about-positioning-section {padding-bottom: calc(var(--space-160) + var(--space-80));}
.about-positioning-section .tit-wrap {display: flex; flex-direction: column; row-gap: var(--space-16);}
.about-positioning-section .tit-wrap .ui-label {color: var(--text-secondary);}
.about-positioning-section .tit-wrap .display-section {color: var(--text-strong);}
.about-positioning-section .positioning-list {display: flex; flex-direction: column; align-items: flex-start; padding-top: 104px;}
.about-positioning-section .positioning-list .positioning-item {display: flex; flex-direction: column; row-gap: var(--space-16); width: 100%; max-width: 420px;}
.about-positioning-section .positioning-list .positioning-item:nth-child(2) {max-width: 400px; margin-top: 56px; margin-left: 56.897%;}
.about-positioning-section .positioning-list .positioning-item:nth-child(3) {max-width: 440px; margin-top: 96px; margin-left: 9.052%;}
.about-positioning-section .positioning-list .positioning-item .num {color: var(--text-muted);}
.about-positioning-section .positioning-list .positioning-item .body-large {color: var(--text-primary);}
.about-positioning-section .positioning-list .positioning-item .body-small {color: var(--text-primary);}
.about-positioning-section .positioning-list .positioning-item .keyword-txt {color: var(--text-muted);}

/* 먹의 미학 */
.about-ink-section {padding-block: var(--space-160); background-color: var(--bg-muted);}
.about-ink-section .ink-wrap {display: flex; align-items: center; column-gap: var(--space-120);}
.about-ink-section .ink-wrap .img-wrap {position: relative; flex: none; width: 60.022%; aspect-ratio: 16 / 9; overflow: hidden; background-color: var(--bg-image-placeholder);}
.about-ink-section .ink-wrap .img-wrap img, .about-ink-section .ink-wrap .img-wrap .img-placeholder {position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;}
.about-ink-section .ink-wrap .txt-wrap {display: flex; flex-direction: column; row-gap: var(--space-24); flex: 1 1 auto; min-width: 0;}
.about-ink-section .ink-wrap .txt-wrap .ui-label {color: var(--text-muted);}
.about-ink-section .ink-wrap .txt-wrap .editorial-quote-kr {color: var(--text-strong);}
.about-ink-section .ink-wrap .txt-wrap .body-large {color: var(--text-primary);}
.about-ink-section .ink-wrap .txt-wrap .body-default {color: var(--text-secondary);}

/* 소재 · 아틀리에 */
.about-material-section {padding-bottom: calc(var(--space-160) + var(--space-80));}
.about-material-section .material-wrap {display: flex; align-items: center; justify-content: space-between;}
.about-material-section .material-wrap .txt-wrap {display: flex; flex-direction: column; row-gap: var(--space-24); flex: none; width: 23.707%; padding-top: 6.466%;}
.about-material-section .material-wrap .txt-wrap .ui-label {color: var(--text-muted);}
.about-material-section .material-wrap .txt-wrap .display-section {color: var(--text-strong);}
.about-material-section .material-wrap .txt-wrap .body-large {color: var(--text-primary);}
.about-material-section .material-wrap .txt-wrap .body-default {color: var(--text-secondary);}
.about-material-section .material-wrap .img-wrap {position: relative; flex: none; overflow: hidden; background-color: var(--bg-image-placeholder);}
.about-material-section .material-wrap .img-wrap img, .about-material-section .material-wrap .img-wrap .img-placeholder {position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;}
.about-material-section .material-wrap .img-wrap.textile {width: 37.5%; aspect-ratio: 1 / 1;}
.about-material-section .material-wrap .img-wrap.atelier {width: 27.478%; margin-top: 17.241%; aspect-ratio: 3 / 4;}

/* 컬렉션 */
.about-prelude-section {padding-block: var(--space-40) calc(var(--space-160) + var(--space-40));}
.about-prelude-section .prelude-wrap {display: flex; align-items: center; column-gap: var(--space-120);}
.about-prelude-section .prelude-wrap .img-wrap {position: relative; flex: none; width: 64.978%; aspect-ratio: 16 / 9; overflow: hidden; background-color: var(--bg-image-placeholder);}
.about-prelude-section .prelude-wrap .img-wrap img, .about-prelude-section .prelude-wrap .img-wrap .img-placeholder {position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;}
.about-prelude-section .prelude-wrap .txt-wrap {display: flex; flex-direction: column; align-items: flex-start; row-gap: var(--space-20); flex: 1 1 auto; min-width: 0;}
.about-prelude-section .prelude-wrap .txt-wrap .ui-label {color: var(--text-muted);}
.about-prelude-section .prelude-wrap .txt-wrap .display-section {color: var(--text-strong);}
.about-prelude-section .prelude-wrap .txt-wrap .body-large {color: var(--text-primary);}
.about-prelude-section .prelude-wrap .txt-wrap .square-btn {margin-top: var(--space-16);}

@media screen and (max-width: 1440px) {
    .about-slogan-section .slogan-wrap .display-hero {width: 63.953%;}
    .about-slogan-section .slogan-wrap .note-wrap {width: 20.93%;}

    .about-perspective-section .perspective-wrap .txt-wrap {width: 34.884%; padding-top: 16.279%;}

    .about-positioning-section .positioning-list {padding-top: 96px;}
    .about-positioning-section .positioning-list .positioning-item:nth-child(2) {margin-top: 52px;}
    .about-positioning-section .positioning-list .positioning-item:nth-child(3) {margin-top: 88px;}

    .about-material-section .material-wrap .txt-wrap {width: 25.581%; padding-top: 6.977%;}
    .about-material-section .material-wrap .img-wrap.atelier {margin-top: 18.605%;}
}

@media screen and (max-width: 1024px) {
    .about-slogan-section .slogan-wrap .display-hero {width: 66.496%;}
    .about-slogan-section .slogan-wrap .note-wrap {width: 21.721%;}

    .about-perspective-section .perspective-wrap .txt-wrap {width: 36.27%; padding-top: 16.906%;}

    .about-positioning-section .positioning-list {padding-top: 88px;}
    .about-positioning-section .positioning-list .positioning-item {max-width: 400px;}
    .about-positioning-section .positioning-list .positioning-item:nth-child(2) {max-width: 400px; margin-top: 48px; margin-left: 53.279%;}
    .about-positioning-section .positioning-list .positioning-item:nth-child(3) {max-width: 420px; margin-top: 80px; margin-left: 9.836%;}

    .about-ink-section .ink-wrap {column-gap: var(--space-48);}

    .about-material-section .material-wrap .txt-wrap {width: 26.639%; padding-top: 7.275%;}
    .about-material-section .material-wrap .img-wrap.atelier {width: 27.561%; margin-top: 19.365%;}

    .about-prelude-section .prelude-wrap {column-gap: var(--space-48);}
}

@media screen and (max-width: 768px) {
    .about-slogan-section {padding-top: var(--space-40);}
    .about-slogan-section .slogan-wrap {flex-direction: column; align-items: stretch; row-gap: var(--space-32);}
    .about-slogan-section .slogan-wrap .display-hero, .about-slogan-section .slogan-wrap .note-wrap {width: 100%;}

    .about-perspective-section .perspective-wrap {flex-direction: column; row-gap: var(--space-32);}
    .about-perspective-section .perspective-wrap .img-wrap, .about-perspective-section .perspective-wrap .txt-wrap {width: 100%; padding-top: 0;}

    .about-positioning-section .positioning-list {padding-top: 64px;}
    .about-positioning-section .positioning-list .positioning-item, .about-positioning-section .positioning-list .positioning-item:nth-child(2), .about-positioning-section .positioning-list .positioning-item:nth-child(3) {max-width: none;}
    .about-positioning-section .positioning-list .positioning-item:nth-child(2) {width: calc(100% - 40px); margin-top: 48px; margin-left: 40px;}
    .about-positioning-section .positioning-list .positioning-item:nth-child(3) {width: calc(100% - 16px); margin-top: 64px; margin-left: 16px;}

    .about-ink-section .ink-wrap, .about-prelude-section .prelude-wrap {flex-direction: column; align-items: stretch; row-gap: var(--space-20);}
    .about-ink-section .ink-wrap .img-wrap, .about-prelude-section .prelude-wrap .img-wrap {width: 100%;}

    .about-material-section .material-wrap {flex-direction: column; align-items: stretch; row-gap: var(--space-32);}
    .about-material-section .material-wrap .txt-wrap, .about-material-section .material-wrap .img-wrap.textile, .about-material-section .material-wrap .img-wrap.atelier {width: 100%; margin-top: 0; padding-top: 0;}

    .about-prelude-section .prelude-wrap .txt-wrap .square-btn {width: 100%; min-width: 0;}
}