@import url("sub.css");

.footer{background: var(--bk000);}

section{margin-top: -1px;}

/* ABOUT — TOP */
.aboutTop{position:relative; box-sizing:border-box; background:var(--sub3); padding-top:150px; z-index:2;}
.aboutTop_title{max-width:1610px; width:90%; margin:0 auto 200px; box-sizing:border-box;}
.aboutTop_title_txt{display:flex; align-items:center; justify-content:space-between; width:300px; margin:0 auto; opacity:0; text-transform:uppercase; white-space:nowrap; color:var(--white); text-align:center;}
@media (prefers-reduced-motion:reduce){.aboutTop_title_txt{width:100%; opacity:0.5;}}

.aboutTop_visual{position:relative; width:100%; padding: 280px 0; overflow:hidden; box-sizing:border-box; --aboutTopVeil:100%;}
.aboutTop_visual::after{content:''; display:block; width:var(--aboutTopVeil); height:100%; background:var(--sub3); position:absolute; left:0; top:0; z-index:2; pointer-events:none;}
@media (prefers-reduced-motion:reduce){.aboutTop_visual{--aboutTopVeil:0%;}}
.aboutTop_bg{position:absolute; inset:0; z-index:0; background:var(--bk000);}
.aboutTop_bg img{display:block; width:100%; height:100%; object-fit:cover; object-position:center center;}
.aboutTop_logo{position:absolute; left:50%; top:346px; z-index:3; transform: translateX(-50%); pointer-events:none; opacity:0;}
.aboutTop_logo.is-ready,.aboutTop_logo.is-drawn{opacity:1;}
.aboutTop_logo svg{display:block; max-width:814px; width:100%; height:auto; object-fit:contain;}
.aboutTop_logo_path{fill:transparent; stroke:var(--white); stroke-width:1.2; stroke-linecap:round; stroke-linejoin:round;}
.aboutTop_logo.is-drawn .aboutTop_logo_path{fill:var(--white); stroke:transparent;}
@media (prefers-reduced-motion:reduce){.aboutTop_logo{opacity:1;}.aboutTop_logo_path{fill:var(--white); stroke:transparent;}}
.aboutTop_cont{position: relative; z-index:2; display:flex; flex-direction:column; align-items:flex-start; gap:200px; max-width:800px; width:90%; box-sizing:border-box; margin: 0 auto;}
.aboutTop_sub3{color:var(--sub3); letter-spacing: 0.56px;}
.aboutTop_main{color:var(--main); letter-spacing: 0.64px;}
.aboutTop_row{display:flex; align-items:center; justify-content:space-between; width:100%; box-sizing:border-box;}
.aboutTop_row--trio{text-transform:uppercase; line-height:171.43%;}
.aboutTop_row--trio .aboutTop_row_side{width:80px; flex-shrink:0;}
.aboutTop_row--trio .aboutTop_row_mid{flex:1; text-align:center;}
.aboutTop_row--trio .aboutTop_row_side--end{text-align:right;}
.aboutTop_block{display:flex; flex-direction:column; align-items:flex-start; gap:20px; width:100%;}
.aboutTop_row--log{text-transform:uppercase; line-height:175%;}
.aboutTop_row--log .aboutTop_row_side{width:50px; flex-shrink:0;}
.aboutTop_row--log .aboutTop_row_mid{flex:1; text-align:center; white-space:nowrap;}
.aboutTop_row--log .aboutTop_row_side--end{text-align:right;}
.aboutTop_stack{display:flex; flex-direction:column; align-items:center; gap:0; width:100%; max-width:448px; margin:0 auto; text-align:center; text-transform:uppercase; line-height:171.43%;}
.aboutTop_stack p{width:100%;}
.aboutTop_stack br{display: block;}
.aboutTop_block--foot{gap:10px;}
.aboutTop_row--foot{text-transform:uppercase; line-height:171.43%; white-space:nowrap;}
.aboutTop_row_foot_tit{min-width:0; letter-spacing: 0.56px;}
.aboutTop_row_foot_link{flex-shrink:0; text-align:right;}
.aboutTop_row_foot_link a{color:inherit; text-decoration:none; letter-spacing: 0.56px;}
.aboutTop_desc{width:100%; text-align:justify; line-height:185%; font-size:0.611rem;}
.aboutTop_desc p{width: 100%; text-align:justify; text-align-last: justify;}



/* ABOUT — PHILOSOPHY */
.aboutPhilosophy{position:relative; z-index:2; background:var(--grayBg2);}
.aboutPhilosophy_in{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:30px; width:90%; max-width:1610px; margin:0 auto; box-sizing:border-box; text-align:center;}
.aboutPhilosophy_tit{color:var(--main); text-transform:uppercase;}
.aboutPhilosophy_eng{color:var(--main); opacity:0.7; text-align:center;}
.aboutPhilosophy_kor{color:var(--main); opacity:0.7; text-align:center;}

/* ABOUT — LINE LOGO */
.aboutLineLogo{position:relative; z-index:2; background:var(--grayBg2); overflow:hidden; padding: 0 0 50px;}
.aboutLineLogo_frame{position:relative; width:100%; aspect-ratio:1920/660;}
.aboutLineLogo_bg{position:absolute; inset:0; z-index:0; width:100%; height:100%; pointer-events:none;}
.aboutLineLogo_logo{position:absolute; inset:0; z-index:1; width:100%; height:100%; pointer-events:none;}
.aboutLineLogo_bg svg,.aboutLineLogo_logo svg{display:block; width:100%; height:100%;}
.aboutLineLogo_bar{transform-box:fill-box; transform-origin:center center;}
.aboutLineLogo_letter{fill:none; stroke:#2A2924; stroke-width:1;}
.aboutLineLogo_txt{position:relative; top: -100px; z-index:2; width:90%; max-width:700px; margin:0 auto; color:var(--main); opacity:0.7; text-align:center; }
.aboutLineLogo_txt br{display:inline;}
@media (prefers-reduced-motion:reduce){.aboutLineLogo_txt{opacity:0.7; transform:none;}}

/* ABOUT — LOGO VER */
.aboutLogoVer{display:flex; align-items:stretch; width:100%; height:631px; overflow:hidden; box-sizing:border-box;}
.aboutLogoVer_col{position:relative; flex:1 1 50%; width:50%; height:100%; overflow:hidden; box-sizing:border-box; display: flex; flex-direction: column; justify-content: center; align-items: center;}
.aboutLogoVer_col--brand{background:var(--grayBg2); --logoVerBrandVeil:100%;}
.aboutLogoVer_col--brand::after{content:''; display:block; width:100%; height:var(--logoVerBrandVeil); background:var(--grayBg2); position:absolute; left:0; bottom:0; top:auto; z-index:5; pointer-events:none;}
.aboutLogoVer_bg{position:absolute; left:0; top:0; z-index:0; width:100%; height:100%; background:url("/about/img/logo-ver-bg.png") repeat left top / 15px auto; pointer-events:none;}
.aboutLogoVer_brand{position: relative; z-index:3; width:52.92%; max-width:508px; aspect-ratio:508/233; box-sizing:border-box;}
.aboutLogoVer_brandSvg{display:block; width:100%; height:100%; overflow:visible;}
.aboutLogoVer_path{fill:var(--main); stroke:none;}
@media (prefers-reduced-motion:reduce){.aboutLogoVer_col--brand{--logoVerBrandVeil:0%;}}
.aboutLogoVer_col--line{background:#e5e0d5; --logoVerLineVeil:100%;}
.aboutLogoVer_col--line::after{content:''; display:block; width:100%; height:var(--logoVerLineVeil); background:var(--grayBg2); position:absolute; left:0; top:0; bottom:auto; z-index:5; pointer-events:none;}
.aboutLogoVer_lineBg{position:absolute; inset:0; z-index:1; background:url("/about/img/logo-ver-line-bg.png") repeat left top/71px auto; pointer-events:none;}
.aboutLogoVer_lineBg::before{content: ''; display: block; width: 100%; height: 1px; border-top:1px solid rgba(42,41,36,0.1); position: absolute; left: 0; top: 0;}
.aboutLogoVer_lineBg::after{content: ''; display: block; width: 100%; height: 1px; border-top:1px solid rgba(42,41,36,0.1); position: absolute; left: 0; bottom: 0;}

@media (prefers-reduced-motion:reduce){.aboutLogoVer_col--line{--logoVerLineVeil:0%;}}
.aboutLogoVer_line{position:absolute; inset:0; z-index:3; width:100%; height:100%; pointer-events:none;}
.aboutLogoVer_line svg{display:block; width:100%; height:100%;}
.aboutLogoVer_linePath{fill:none;}
@media (prefers-reduced-motion:reduce){.aboutLogoVer_linePath,.aboutLogoVer_lineNode{opacity:1;}}

/* ABOUT — INFO */
.aboutInfo{position:relative; z-index:2; background:var(--grayBg2);}
.aboutInfo_in{display:flex; flex-direction:column; align-items:center; gap:70px; width:90%; max-width:1610px; margin:0 auto; box-sizing:border-box; text-align:center;}
.aboutInfo_head{display:flex; flex-direction:column; align-items:center; gap:30px;}
.aboutInfo_logo{max-width:499px; width:100%;}
.aboutInfo_logo svg{display:block; width:100%; height:auto; overflow:visible;}
.aboutInfo_logo_path{fill:var(--main); stroke:none;}
.aboutInfo_formula{display:flex; align-items:flex-start; justify-content:center; gap:15px; color:var(--main);}
.aboutInfo_paren{opacity:0.3;}
.aboutInfo_tagline{color:var(--main);}
.aboutInfo_body{display:flex; flex-direction:column; align-items:center; gap:30px;}
.aboutInfo_lead{display:flex; flex-direction:column; align-items:center; gap:5px; color:var(--main);}
.aboutInfo_eng{color:var(--main); opacity:0.7; text-align:center;}
.aboutInfo_kor{color:var(--main); opacity:0.7; text-align:center;}
.aboutInfo_kor--narrow{max-width:448px;}
.aboutInfo_eng br, .aboutInfo_kor br{display:inline;}



/* ABOUT — DESIGN */
.aboutDesign{position:relative; z-index:2; background:var(--main);}
.aboutDesign::before{content:""; position:absolute; left:0; top:-1px; z-index:0; width:100%; height:200px; background:var(--grayBg2); pointer-events:none;}
.aboutDesign_grid{position:relative; z-index:1; display:grid; grid-template-columns:repeat(2, minmax(0, 805px)); justify-content:center; width:90%; max-width:1610px; margin:0 auto; box-sizing:border-box;}
.aboutDesign_item{position:relative; aspect-ratio:805/1080; overflow:hidden;}
.aboutDesign_dimd{position:absolute; left:0; top:0; z-index:2; width:100%; height:100%; pointer-events:none; will-change:transform;}
.aboutDesign_item1 .aboutDesign_dimd{background:var(--sub); left:0; top:0; right:auto; bottom:auto;}
.aboutDesign_item2 .aboutDesign_dimd{background:var(--sub3); right:0; top:0; left:auto; bottom:auto;}
.aboutDesign_item3 .aboutDesign_dimd{background:var(--sub2); right:0; bottom:0; left:auto; top:auto;}
.aboutDesign_item4 .aboutDesign_dimd{background:var(--grayBg2); left:0; bottom:0; right:auto; top:auto;}
.aboutDesign_item img{position:relative; z-index:1; display:block; width:100%; height:100%; object-fit:cover; object-position:center center; transform-origin:center center; will-change:transform; opacity:0;}
.aboutDesign.is-ready .aboutDesign_item img{opacity:1;}
.aboutDesign_item:not(.is-revealed) .aboutDesign_dimd{transform:none;}
@media (prefers-reduced-motion:reduce){.aboutDesign_dimd{opacity:0;}.aboutDesign.is-ready .aboutDesign_item img{opacity:1;}}

/* ABOUT — SEC (VISUAL SYSTEM / APPROACH) */
.aboutSec{position:relative; z-index:2; background:var(--main);}
.aboutSec_in{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:30px; width:90%; max-width:1610px; margin:0 auto; box-sizing:border-box; text-align:center;}
.aboutSec_tit{color:var(--white); text-transform:uppercase;}
.aboutSec_eng{color:var(--white); opacity:0.7; text-align:center;}
.aboutSec_kor{color:var(--white); opacity:0.7; text-align:center;}
.aboutSec_eng br, .aboutSec_kor br{display:inline;}
.aboutSec--light{background:var(--grayBg2); padding-top: 400px !important; margin-top: -1px;}
.aboutSec--light .aboutSec_tit,.aboutSec--light .aboutSec_eng,.aboutSec--light .aboutSec_kor{color:var(--main);}

/* ABOUT — IMG AREA */
.aboutImgArea{position:relative; z-index:2; display:flex; flex-direction:column; gap:10px; background:var(--main); box-sizing:border-box;}
.aboutImgArea_row{display:flex; gap:10px; width:100%; box-sizing:border-box;}
.aboutImgArea_row--top{justify-content:flex-start;}
.aboutImgArea_row--bot{justify-content:flex-end;}
.aboutImgArea_item{position:relative; flex:0 0 calc(100% * 790 / 1920); aspect-ratio:790/480; overflow:hidden; background:var(--bk000); box-sizing:border-box;}
.aboutImgArea_dimd{position:absolute; left:0; top:0; z-index:2; width:100%; height:100%; background:var(--main); pointer-events:none; will-change:transform;}
.aboutImgArea_item1 .aboutImgArea_dimd{left:0; top:0; right:auto; bottom:auto;}
.aboutImgArea_item2 .aboutImgArea_dimd{right:0; top:0; left:auto; bottom:auto;}
.aboutImgArea_item3 .aboutImgArea_dimd{right:0; bottom:0; left:auto; top:auto;}
.aboutImgArea_item4 .aboutImgArea_dimd{left:0; bottom:0; right:auto; top:auto;}
.aboutImgArea_item img{position:relative; z-index:1; display:block; width:100%; height:100%; object-fit:contain; object-position:center center; transform-origin:center center; will-change:transform; opacity:0;}
.aboutImgArea.is-ready .aboutImgArea_item img{opacity:1;}
.aboutImgArea_item:not(.is-revealed) .aboutImgArea_dimd{transform:none;}
@media (prefers-reduced-motion:reduce){.aboutImgArea_dimd{opacity:0;}.aboutImgArea.is-ready .aboutImgArea_item img{opacity:1;}}

/* ABOUT — COLOR */
.aboutColor-wrap{overflow: hidden;}
.aboutColor{position:relative; z-index:3; background:var(--grayBg2); box-sizing:border-box;}
.aboutColor_top{position:absolute; left:0; top:0; z-index:0; width:100%; height:200px; background:var(--main); pointer-events:none;}

.aboutColor_ci{position:absolute; right:0; bottom:-330px; z-index:0; width:33.39%; max-width:641px; pointer-events:none; opacity:0; filter:blur(24px); will-change:opacity, filter;}
.aboutColor_ci.is-in{opacity:1; filter:blur(0);}
.aboutColor_ci img{display:block; width:100%; height:auto;}

@media (prefers-reduced-motion:reduce){.aboutColor_ci{opacity:1; filter:none;}}
.aboutColor_in{position:relative; z-index:1; display:flex; align-items:flex-start; justify-content:space-between; gap: 80px; width:90%; max-width:1610px; margin:0 auto; box-sizing:border-box;}
.aboutColor_mid{display:flex; gap:10px; align-items:flex-start; flex-shrink:0; flex: 2;}
.aboutColor_card{position:relative; flex:1; height:700px; overflow:hidden; box-shadow:0 8px 20px rgba(0,0,0,0.2); box-sizing:border-box; opacity:0;}
@media (prefers-reduced-motion:reduce){.aboutColor_card{opacity:1;}}
.aboutColor_card1{margin-top:0;}
.aboutColor_card2{margin-top:300px;}
.aboutColor_card3{margin-top:400px;}
.aboutColor_card4{margin-top:150px;}
.aboutColor_bg{position:absolute; inset:0; z-index:0; background-repeat:no-repeat; background-position:center center; background-size:cover; pointer-events:none;}
.aboutColor_grad{position:absolute; inset:0; z-index:1; pointer-events:none;}
.aboutColor_card1 .aboutColor_grad{background:linear-gradient(180deg, #f2ead7 12.714%, rgba(242,234,215,0) 100%);}
.aboutColor_card2 .aboutColor_grad{background:linear-gradient(180deg, #5e6754 0%, rgba(94,103,84,0) 100%);}
.aboutColor_card3 .aboutColor_grad{background:linear-gradient(180deg, #2a2924 0%, rgba(42,41,36,0) 100%);}
.aboutColor_card4 .aboutColor_grad{background:linear-gradient(180deg, #383838 9.714%, rgba(56,56,56,0) 100.86%);}
.aboutColor_txt{position:relative; z-index:2; display:flex; flex-direction:column; align-items:flex-start; gap:20px; padding:70px 50px; box-sizing:border-box;}
.aboutColor_name{margin:0; letter-spacing: 1.5px;}
.aboutColor_nameIndent{display:inline-block; padding-left:20px;}
.aboutColor_meta{display:flex; align-items:flex-start; gap:15px; text-transform:uppercase;}
.aboutColor_metaLab,.aboutColor_metaVal{margin:0; letter-spacing: 0.56px;}
.aboutColor_card1 .aboutColor_name,.aboutColor_card1 .aboutColor_meta{color:var(--main);}
.aboutColor_card2 .aboutColor_name,.aboutColor_card2 .aboutColor_meta{color:var(--sub);}
.aboutColor_card3 .aboutColor_name,.aboutColor_card3 .aboutColor_meta,.aboutColor_card4 .aboutColor_name,.aboutColor_card4 .aboutColor_meta{color:var(--white);}
.aboutColor_name br,.aboutColor_metaLab br,.aboutColor_metaVal br{display:inline;}






/* ABOUT — LOG IMG */
.aboutLogImg{position:relative; z-index:2; background:var(--grayBg2); box-sizing:border-box;}
.aboutLogImg_row{display:flex; gap:10px; width:100%; box-sizing:border-box;}
.aboutLogImg_item{position:relative; overflow:hidden; box-sizing:border-box;}
.aboutLogImg_dimd{position:absolute; left:0; top:0; z-index:2; width:100%; height:100%; pointer-events:none; will-change:transform;}
.aboutLogImg_item1 .aboutLogImg_dimd{background:var(--sub3); left:0; top:0; right:auto; bottom:auto;}
.aboutLogImg_item2 .aboutLogImg_dimd{background:var(--main); right:0; top:0; left:auto; bottom:auto;}
.aboutLogImg_item3 .aboutLogImg_dimd{background:var(--sub); right:0; bottom:0; left:auto; top:auto;}
.aboutLogImg_item4 .aboutLogImg_dimd{background:var(--sub2); left:0; bottom:0; right:auto; top:auto;}
.aboutLogImg_item > img{position:relative; z-index:1; display:block; width:100%; height:100%; object-fit:cover; object-position:center center; transform-origin:center center; will-change:transform; opacity:0;}
.aboutLogImg.is-ready .aboutLogImg_item > img{opacity:1;}
.aboutLogImg_item:not(.is-revealed) .aboutLogImg_dimd{transform:none;}
@media (prefers-reduced-motion:reduce){.aboutLogImg_dimd{opacity:0;}.aboutLogImg.is-ready .aboutLogImg_item > img{opacity:1;}}
.aboutLogImg_item1{flex:1 1 0; min-width:0; aspect-ratio:955/1280;}
.aboutLogImg_col{flex:1 1 0; min-width:0; display:flex; flex-direction:column; gap:10px;}
.aboutLogImg_item2{width:100%; aspect-ratio:955/635;}
.aboutLogImg_bot{display:flex; gap:10px; width:100%;}
.aboutLogImg_item3{flex:0 0 calc(100% * 350 / 955); width:calc(100% * 350 / 955); aspect-ratio:350/635;}
.aboutLogImg_item4{flex:1 1 0; min-width:0; aspect-ratio:595/635;}


/* ABOUT — PALETTE (COLOR + TYPOGRAPHY) */
.aboutPalette{position:relative; z-index:2; background: var(--grayBg2); box-sizing:border-box;}
.aboutPalette .aboutPalette_in{position:relative; z-index:2; background: linear-gradient(180deg, rgba(242, 234, 215, 0.00) 0%, #F2EAD7 79.59%);box-sizing:border-box;}
.aboutPalette_logoBg{position:relative; z-index:0; display:flex; justify-content:center; width:100%; margin-bottom:-80px; pointer-events:none; box-sizing:border-box;}
.aboutPalette_logoSvg{display:block; width:90%; max-width:1610px; height:auto; opacity:0.05;}
.aboutPalette_logoLetter{fill:var(--main); opacity:0;}
.aboutPalette_logoBg.is-in .aboutPalette_logoLetter{opacity:1;}
@media (prefers-reduced-motion:reduce){.aboutPalette_logoLetter{opacity:1;}}

.aboutPalette_ci{position:absolute; right:0; bottom:100px; z-index:0; width:47.8%; max-width:918px; pointer-events:none; opacity:0; filter:blur(0); will-change:opacity, filter; --aboutPaletteCiBlur:15px;}
.aboutPalette_ci.is-shown{opacity:1; filter:blur(0);}
.aboutPalette_ci.is-in{opacity:1; filter:blur(var(--aboutPaletteCiBlur));}
.aboutPalette_ci img{display:block; width:100%; height:auto;}
@media (prefers-reduced-motion:reduce){.aboutPalette_ci{opacity:1; filter:blur(var(--aboutPaletteCiBlur));}}


.aboutPalette_color{position:relative; z-index:1; display:flex; align-items:flex-start; justify-content:center; gap:30px; width:90%; max-width:1610px; margin:0 auto; box-sizing:border-box;}
.aboutPalette_head{position:sticky; top:0; z-index:2; align-self:flex-start; flex:1 1 0; min-width:0; display:flex; flex-direction:column; align-items:flex-start; gap:30px; padding:150px 0; box-sizing:border-box; margin-bottom: 500px;}
.aboutPalette_tit{color:var(--main); text-transform:uppercase;}
.aboutPalette_eng{color:var(--main); opacity:0.7;}
.aboutPalette_kor{color:var(--main); opacity:0.7;}
.aboutPalette_eng br,.aboutPalette_kor br{display:inline;}
.aboutPalette_swatch{flex:0 0 665px; width:665px; display:flex; flex-direction:column; align-items:stretch; box-sizing:border-box;}
.aboutPalette_chip{position:relative; display:flex; flex-direction:column; box-sizing:border-box; opacity:0;}
.aboutPalette_chip.is-in{opacity:1;}
@media (prefers-reduced-motion:reduce){.aboutPalette_chip{opacity:1;}}

.aboutPalette_chip--lg{justify-content:space-between; width:100%; height:665px; padding:40px;}
.aboutPalette_chip--sm{justify-content:center; width:100%; height:110px; padding:40px;}
.aboutPalette_chip--half{flex:1 1 0; min-width:0; justify-content:flex-end; height:332px; padding:40px;}
.aboutPalette_chip--oatmeal{background:var(--sub); color:var(--main);}
.aboutPalette_chip--sageLeaf{background:#b2b49c; color:var(--main);}
.aboutPalette_chip--sageForest{background:var(--sub2); color:var(--sub);}
.aboutPalette_chip--shadow{background:#3b3c36; color:var(--sub);}
.aboutPalette_chip--wood{background:var(--sub3); color:var(--sub);}
.aboutPalette_chip--ivory{background:var(--grayBg2); color:var(--main);}
.aboutPalette_chip--black{background:var(--main); color:var(--white); border-right:1px solid rgba(239,237,232,0.3); border-bottom:1px solid rgba(239,237,232,0.3);}
.aboutPalette_code{display:flex; align-items:flex-start; justify-content:space-between; width:100%; text-transform:uppercase; box-sizing:border-box;}
.aboutPalette_code--narrow{width:395px; max-width:100%;}
.aboutPalette_codeCol{flex:1 1 0; min-width:0; display:flex; align-items:center; gap:15px;}
.aboutPalette_codeLab,.aboutPalette_codeVal,.aboutPalette_chipName p{margin:0; letter-spacing: 0.56px;}
.aboutPalette_codeLab br,.aboutPalette_codeVal br{display:inline;}
.aboutPalette_chipName{display:flex; flex-direction:column; align-items:flex-start;}
.aboutPalette_tone{position:absolute; top:0; bottom:0; display:flex; align-items:center; justify-content:center; width:60px; color:var(--sub); box-sizing:border-box;}
.aboutPalette_tone--80{right:120px; background:#7a816c;}
.aboutPalette_tone--50{right:60px; background:#969a84;}
.aboutPalette_tone--30{right:0; background:#b2b49c;}
.aboutPalette_pair{display:flex; align-items:stretch; width:100%;}

.aboutPalette_type{position:relative; z-index:1; display:flex; flex-direction:column; align-items:flex-start; margin:0 auto; margin-top: -500px; gap:150px; width:90%; max-width:1610px; box-sizing:border-box;}
.aboutPalette_typeSpec{display:flex; flex-direction:column; align-items:flex-start; gap:100px; width:100%; max-width:665px; box-sizing:border-box;}
.aboutPalette_face{display:flex; flex-direction:column; align-items:stretch; gap:30px; width:100%; color:var(--main); box-sizing:border-box;}
.aboutPalette_faceTit{width:100%; padding-bottom:15px; border-bottom:1px solid rgba(42,41,36,0.5); box-sizing:border-box;}
.aboutPalette_faceTit p{margin:0;}
.aboutPalette_faceSample{display:flex; align-items:center; gap:50px; width:100%; box-sizing:border-box;}
.aboutPalette_faceBig{margin:0; flex-shrink:0; text-align:center; line-height:110%;}
.aboutPalette_faceChars{margin:0; flex-shrink:0;}
.aboutPalette_faceChars br{display:inline;}
.aboutPalette_faceMeta{display:flex; align-items:flex-start; justify-content:space-between; width:100%; padding-top:20px; border-top:1px solid rgba(42,41,36,0.2); box-sizing:border-box; text-transform:none; line-height:162.5%;}
.aboutPalette_faceMeta > p{margin:0;}
.aboutPalette_faceMetaRight{display:flex; align-items:flex-start; gap:10px; opacity:0.7;}
.aboutPalette_faceMetaRight > p,.aboutPalette_faceMetaList p{margin:0;}
.aboutPalette_faceMetaList{display:flex; flex-direction:column; align-items:flex-start;}
.aboutPalette_faceList{display:flex; flex-direction:column; align-items:stretch; gap:60px; width:100%;}
.aboutPalette_faceItem{display:flex; flex-direction:column; align-items:stretch; gap:30px; width:100%;}
.aboutPalette_faceItem--light .aboutPalette_faceBig,.aboutPalette_faceItem--light .aboutPalette_faceChars,.aboutPalette_faceItem--light .aboutPalette_faceMetaRight,.aboutPalette_faceItem--light .aboutPalette_faceMetaRight p{font-weight:300;}
.aboutPalette_faceItem--regular .aboutPalette_faceBig,.aboutPalette_faceItem--regular .aboutPalette_faceChars,.aboutPalette_faceItem--regular .aboutPalette_faceMetaRight,.aboutPalette_faceItem--regular .aboutPalette_faceMetaRight p{font-weight:400;}
.aboutPalette_faceItem--bold .aboutPalette_faceBig,.aboutPalette_faceItem--bold .aboutPalette_faceChars,.aboutPalette_faceItem--bold .aboutPalette_faceMetaRight,.aboutPalette_faceItem--bold .aboutPalette_faceMetaRight p{font-weight:700;}
.aboutPalette_typeHead{display:flex; flex-direction:column; align-items:flex-start; gap:30px; max-width:673px; box-sizing:border-box;}



/* ABOUT — BANNER */
.aboutBanner{position:relative; z-index:2; display:flex; flex-direction:column; align-items:center; gap:150px; background:var(--bk000); box-sizing:border-box; overflow: hidden;}
.aboutBanner_top{position:absolute; left:0; top:-2px; z-index:0; width:100%; height:300px; background:var(--sub); pointer-events:none;}
.aboutBanner_img{position:relative; z-index:1; overflow:hidden; background:var(--bk000); box-sizing:border-box;}
.aboutBanner_dimd{position:absolute; left:0; top:0; z-index:2; width:100%; height:100%; background:var(--bk000); pointer-events:none; will-change:transform;}
.aboutBanner_img1 .aboutBanner_dimd{left:0; top:0; right:auto; bottom:auto; background: var(--sub2);}
.aboutBanner_img2 .aboutBanner_dimd{background:var(--bk000); right:0; top:0; left:auto; bottom:auto;}
.aboutBanner_img3 .aboutBanner_dimd{background:var(--bk000); left:0; bottom:0; right:auto; top:auto;}
.aboutBanner_img img{position:relative; z-index:1; display:block; width:100%; height:100%; object-fit:cover; object-position:center center; transform-origin:center center; will-change:transform; opacity:0;}
.aboutBanner.is-ready .aboutBanner_img img{opacity:1;}
.aboutBanner_img:not(.is-revealed) .aboutBanner_dimd{transform:none;}
@media (prefers-reduced-motion:reduce){.aboutBanner_dimd{opacity:0;}.aboutBanner.is-ready .aboutBanner_img img{opacity:1;}}
.aboutBanner_img1{width:90%; max-width:1610px; aspect-ratio:1610/980;}
.aboutBanner_mid{position:relative; z-index:1; display:flex; flex-direction:column; align-items:stretch; gap:20px; width:90%; max-width:1610px; box-sizing:border-box;}
.aboutBanner_rowTxt{display:flex; align-items:center; justify-content:space-between; width:100%; color:var(--sub); text-transform:uppercase; box-sizing:border-box;}
.aboutBanner_rowTxt > p{flex-shrink:0; width:50px; margin:0; letter-spacing: 0.64px;}
.aboutBanner_rowMid{flex:1; width:auto !important; text-align:center; white-space:nowrap; letter-spacing: 0.64px;}
.aboutBanner_rowEnd{text-align:right;}
.aboutBanner_stack{display:flex; flex-direction:column; align-items:center; width:100%; max-width:448px; margin:0 auto; color:var(--sub); text-align:center; text-transform:uppercase;}
.aboutBanner_stack p{width:100%; margin:0; letter-spacing: 0.56px;}
.aboutBanner_stackGap{line-height:100%; min-height:24px;}
.aboutBanner_full{position:relative; z-index:1; display:flex; flex-direction:column; gap:10px; width:100%;}
.aboutBanner_img2{width:100%; aspect-ratio:1920/980;}
.aboutBanner_img3{width:100%; aspect-ratio:1920/1200;}
.aboutBanner_foot{position:relative; z-index:1; display:flex; flex-direction:column; gap:20px; width:90%; max-width:1610px; box-sizing:border-box;}
.aboutBanner_footTxt{display:flex; align-items:flex-start; justify-content:space-between; gap: 20px; width:100%; color:var(--sub); box-sizing:border-box;}
.aboutBanner_footLeft,.aboutBanner_footRight{margin:0; letter-spacing: 0.56px;}
.aboutBanner_footLeft{text-align:left;}
.aboutBanner_footRight{text-align:right;}
.aboutBanner_footLeft br,.aboutBanner_footRight br{display:inline;}
.aboutBanner_title{display:flex; justify-content:center;}
.aboutBanner_studio{display:flex; align-items:center; justify-content:space-between; width:300px; margin:0; opacity:0.2; color:var(--white); text-transform:uppercase; white-space:nowrap;}
@media (prefers-reduced-motion:reduce){.aboutBanner_studio{width:100%; opacity:0.5;}}





/*******************************************************************************
    @media 1760px
*******************************************************************************/
@media all and (max-width:1760px){
/* ABOUT — TOP */
.aboutTop_logo svg{max-width:740px;}
.aboutTop_cont{max-width:760px;}


/* ABOUT — LINE LOGO */
.aboutLineLogo{padding:0 0 40px;}
.aboutLineLogo_txt{top:-80px;}

/* ABOUT — LOGO VER */
.aboutLogoVer{height:580px;}
.aboutLogoVer_brand{max-width:460px;}

/* ABOUT — INFO */
.aboutInfo_in{gap:60px;}
.aboutInfo_logo{max-width:460px;}

/* ABOUT — DESIGN */
.aboutDesign::before{height:180px;}

/* ABOUT — IMG AREA */
.aboutImgArea_item{flex:0 0 calc(100% * 790 / 1760);}



/* ABOUT — PALETTE (COLOR + TYPOGRAPHY) */
.aboutPalette_logoBg{margin-bottom:-40px;}

.aboutPalette_color{gap:50px;}
.aboutPalette_head{flex:auto; width: calc(50% - 25px);}
.aboutPalette_swatch{flex:auto; width:calc(50% - 25px);}

.aboutPalette_eng br, .aboutPalette_kor br{display: none;}

.aboutPalette_code--narrow{width:100%; flex-direction: column;}

.aboutPalette_typeSpec{max-width: calc(50% - 25px); width: 100%;}
.aboutPalette_typeHead{max-width: calc(50% - 25px); width: 100%;}



}
/*******************************************************************************
    @media 1500px
*******************************************************************************/
@media all and (max-width:1500px){
/* ABOUT — TOP */
.aboutTop{padding-top:120px;}
.aboutTop_title{margin:0 auto 160px;}
.aboutTop_visual{padding:220px 0;}
.aboutTop_logo{top:280px;}
.aboutTop_logo svg{max-width:680px;}
.aboutTop_cont{gap:80px; max-width:720px;}

/* ABOUT — PHILOSOPHY */
.aboutPhilosophy_in{gap:28px;}

/* ABOUT — LINE LOGO */
.aboutLineLogo{padding:0 0 36px;}
.aboutLineLogo_txt{top:-70px;}

/* ABOUT — LOGO VER */
.aboutLogoVer{height:540px;}
.aboutLogoVer_brand{max-width:420px;}

/* ABOUT — INFO */
.aboutInfo_in{gap:56px;}
.aboutInfo_head,.aboutInfo_body{gap:28px;}
.aboutInfo_logo{max-width:420px;}
.aboutInfo_formula{gap:12px;}

/* ABOUT — DESIGN */
.aboutDesign::before{height:160px;}



/* ABOUT — SEC (VISUAL SYSTEM / APPROACH) */
.aboutSec_in{gap:28px;}


/* ABOUT — COLOR */
.aboutColor_in{gap: 60px;}


}
/*******************************************************************************
    @media ~1300px
*******************************************************************************/
@media all and (max-width:1300px){
/* ABOUT — TOP */
.aboutTop{padding-top:100px;}
.aboutTop_title{margin:0 auto 120px;}
.aboutTop_visual{padding:180px 0;}
.aboutTop_logo{top:230px;}
.aboutTop_logo svg{max-width:560px;}
.aboutTop_cont{gap:150px; max-width:640px;}
.aboutTop_row--trio .aboutTop_row_side{width:70px;}
.aboutTop_block{gap:16px;}

/* ABOUT — PHILOSOPHY */
.aboutPhilosophy_in{gap:24px;}

/* ABOUT — LINE LOGO */
.aboutLineLogo{padding:0 0 30px;}
.aboutLineLogo_txt{top:-50px;}

/* ABOUT — LOGO VER */
.aboutLogoVer{height:480px;}
.aboutLogoVer_brand{width:58%; max-width:360px;}

/* ABOUT — INFO */
.aboutInfo_in{gap:48px;}
.aboutInfo_head,.aboutInfo_body{gap:24px;}
.aboutInfo_logo{max-width:380px;}
.aboutInfo_formula{gap:10px;}
.aboutInfo_kor--narrow{max-width:400px;}

/* ABOUT — DESIGN */
.aboutDesign::before{height:120px;}



/* ABOUT — SEC (VISUAL SYSTEM / APPROACH) */
.aboutSec_in{gap:24px;}



/* ABOUT — COLOR */
.aboutColor_top{height:150px;}
.aboutColor_in{gap: 10px;}
.aboutColor_card{height:550px;}
.aboutColor_card2{margin-top:250px;}
.aboutColor_card3{margin-top:350px;}
.aboutColor_card4{margin-top:100px;}
.aboutColor_txt{padding:50px 30px;}


/* ABOUT — PALETTE (COLOR + TYPOGRAPHY) */
.aboutPalette_ci{bottom:300px; --aboutPaletteCiBlur:5px;}

.aboutPalette_color{gap:30px;}
.aboutPalette_head{width: calc(60% - 15px); padding:100px 0; margin-bottom: 300px;}
.aboutPalette_swatch{width:calc(40% - 15px);}

.aboutPalette_chip--lg{height:500px; padding:30px;}
.aboutPalette_chip--sm{height:130px; padding:30px;}
.aboutPalette_chip--half{height:130px; padding:30px;}
.aboutPalette_code{flex-direction: column;}
.aboutPalette_pair{flex-direction: column;}
.aboutPalette_tone{width:40px;}
.aboutPalette_tone--80{right:80px;}
.aboutPalette_tone--50{right:40px;}
.aboutPalette_tone--30{right:0;}

.aboutPalette_type{margin-top: -300px; gap:100px;}
.aboutPalette_typeSpec{max-width: calc(60% - 15px);}
.aboutPalette_faceBig{font-size: 4.444rem;}
.aboutPalette_faceChars{font-size:1.111rem;}
.aboutPalette_typeHead{max-width: calc(60% - 15px);}



}
/*******************************************************************************
    @media  ~980px               
*******************************************************************************/
@media all and (max-width:980px){
/* ABOUT — TOP */
.aboutTop_title{margin:0 auto 80px;}
.aboutTop_visual{padding:140px 0;}
.aboutTop_logo{top:190px; width:90%;}
.aboutTop_logo svg{max-width:420px;}
.aboutTop_cont{gap:100px; max-width:80%;}
.aboutTop_row--trio .aboutTop_row_side{width:64px;}
.aboutTop_row--log{gap:6px;}
.aboutTop_row--log .aboutTop_row_side{width:36px;}
.aboutTop_row--log .aboutTop_row_mid{min-width:0; white-space:nowrap; letter-spacing:0.16px;}
.aboutTop_stack{max-width:100%;}
.aboutTop_row--foot{flex-wrap: wrap; gap:8px; white-space:normal;}
.aboutTop_row_foot_link{text-align:left;}
.aboutTop_sub3,.aboutTop_row_foot_tit,.aboutTop_row_foot_link a{letter-spacing:0.4px;}
.aboutTop_main{letter-spacing:0.48px;}

/* ABOUT — PHILOSOPHY */
.aboutPhilosophy_in{gap:20px; max-width:100%;}
.aboutPhilosophy_eng br,.aboutPhilosophy_kor br{display:none;}

/* ABOUT — LINE LOGO */
.aboutLineLogo{padding:0 0 100px;}
.aboutLineLogo_txt{top:-20px; max-width:100%; text-wrap: balance;}
.aboutLineLogo_txt br{display:none;}

/* ABOUT — LOGO VER */
.aboutLogoVer{height:400px;}
.aboutLogoVer_brand{width:62%; max-width:280px;}
.aboutLogoVer_lineBg{background-size:60px auto;}

/* ABOUT — INFO */
.aboutInfo_in{gap:40px; max-width:100%;}
.aboutInfo_head,.aboutInfo_body{gap:20px;}
.aboutInfo_logo{max-width:320px;}
.aboutInfo_formula{gap:8px;}
.aboutInfo_kor--narrow{max-width:100%;}
.aboutInfo_eng br,.aboutInfo_kor br{display:none;}

/* ABOUT — DESIGN */
.aboutDesign::before{height:80px;}

/* ABOUT — IMG AREA */
.aboutImgArea_item{flex:0 0 calc((100% - 10px) / 2);}



/* ABOUT — SEC (VISUAL SYSTEM / APPROACH) */
.aboutSec_in{gap:20px; max-width:100%;}
.aboutSec_eng br,.aboutSec_kor br{display:none;}

.aboutSec--light{padding-top: 300px !important;}

/* ABOUT — COLOR */
.aboutColor_top{height:100px;}
.aboutColor_ci{bottom:-300px; width:42%; max-width:360px;}
.aboutColor_in{display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:10px; align-items:start;}
.aboutColor_mid{display:contents;}
.aboutColor_card{flex:none; width:100%; height:auto; aspect-ratio:360/700;}
.aboutColor_card1{margin-top:0;}
.aboutColor_card2{margin-top:150px;}
.aboutColor_card3{margin-top:-100px;}
.aboutColor_card4{margin-top:80px;}
.aboutColor_txt{padding:40px 30px;}


/* ABOUT — BANNER */
.aboutBanner{gap:100px;}
.aboutBanner_top{height:200px;}



/* ABOUT — PALETTE (COLOR + TYPOGRAPHY) */
.aboutPalette_logoBg{margin-bottom:-20px;}
.aboutPalette_ci{bottom:100px; width:100%; max-width:300px; --aboutPaletteCiBlur:2px;}

.aboutPalette_color{gap:50px; flex-direction: column-reverse; }
.aboutPalette_head{width: 100%; gap:20px; padding:0; margin-bottom: 0; position: relative;}
.aboutPalette_swatch{width:100%;}

.aboutPalette_chip--lg{height:300px;}

.aboutPalette_type{margin-top: 100px; padding: 0 0 30px !important; gap:50px;}
.aboutPalette_typeSpec{gap:50px; max-width: 100%;}
.aboutPalette_face{gap:30px;}
.aboutPalette_faceSample{gap:30px;}
.aboutPalette_faceMeta{padding-top:15px;}
.aboutPalette_faceMetaRight{gap:10px;}
.aboutPalette_faceList{gap:30px;}
.aboutPalette_faceItem{gap:20px;}
.aboutPalette_typeHead{gap:20px; max-width: 100%;}


}
/*******************************************************************************
    @media 481~680px
*******************************************************************************/
@media all and (max-width:680px){

/* font-size */
.aboutTop_title_txt{font-size: 16px;}
.fsE14{font-size: 0.75rem;}
.aboutColor_name{font-size:16px;}
.aboutColor_metaLab, .aboutColor_metaVal{font-size: 0.65rem;}

.aboutPalette_chipName .fsE14{font-size: 0.75rem;}
.aboutPalette_chipName .fsE30{font-size: 16px;}
.aboutPalette_codeLab,
.aboutPalette_codeVal{font-size: 0.65rem;}



/* ABOUT — TOP */
.aboutTop{padding-top:80px;}
.aboutTop_title{margin:0 auto 48px;}
.aboutTop_title_txt{width:200px;}
.aboutTop_visual{padding:100px 0;}
.aboutTop_logo{top:136px;}
.aboutTop_logo svg{max-width:260px;}
.aboutTop_cont{gap:60px;}
.aboutTop_row--trio .aboutTop_row_side{width:54px;}
.aboutTop_row--log{align-items:center; gap:4px; font-size:0.75rem; line-height:160%;}
.aboutTop_row--log .aboutTop_row_side{width:30px;}
.aboutTop_row--log .aboutTop_row_mid{min-width:0; white-space:nowrap; letter-spacing:0;}
.aboutTop_block{gap:12px;}
.aboutTop_block--foot{gap:8px;}
.aboutTop_row--foot{gap:6px;}
.aboutTop_desc{text-align:left; line-height:170%;}




/* ABOUT — PHILOSOPHY */
.aboutPhilosophy_in{gap:16px;}
.aboutPhilosophy_eng,.aboutPhilosophy_kor{line-height:165%;}

/* ABOUT — LINE LOGO */
.aboutLineLogo{padding:0 0 80px;}
.aboutLineLogo_txt{top:0; line-height:165%;}

/* ABOUT — LOGO VER */
.aboutLogoVer{height:250px;}
.aboutLogoVer_brand{width:68%; max-width:200px;}
.aboutLogoVer_bg{background-size:10px auto;}
.aboutLogoVer_lineBg{background-size:40px auto;}

/* ABOUT — INFO */
.aboutInfo_in{gap:28px;}
.aboutInfo_head,.aboutInfo_body{gap:16px;}
.aboutInfo_logo{max-width:240px;}
.aboutInfo_formula{gap:6px;}
.aboutInfo_lead{gap:4px;}
.aboutInfo_eng,.aboutInfo_kor{line-height:165%;}

/* ABOUT — DESIGN */
.aboutDesign::before{height:60px;}
.aboutDesign_grid{grid-template-columns:repeat(2, minmax(0, 1fr));}



/* ABOUT — SEC (VISUAL SYSTEM / APPROACH) */
.aboutSec_in{gap:16px;}
.aboutSec_eng,.aboutSec_kor{line-height:165%;}

.aboutSec--light{padding-top: 200px !important;}


/* ABOUT — LOG IMG */
.aboutLogImg_row{flex-wrap: wrap;}
.aboutLogImg_item1{flex: auto; width: 100%;}


/* ABOUT — COLOR */
.aboutColor_top{height:60px;}
.aboutColor_ci{bottom:-200px; width:42%; max-width:360px;}
.aboutColor_txt{gap:15px; padding:30px 20px;}
.aboutColor_meta{gap:5px;}

.aboutColor_card2{margin-top:80px;}
.aboutColor_card3{margin-top:-60px;}
.aboutColor_card4{margin-top:40px;}


/* ABOUT — BANNER */
.aboutBanner{gap:50px;}
.aboutBanner_top{height:160px;}
.aboutBanner_mid{gap:15px;}
.aboutBanner_rowTxt > p{width:40px;}
.aboutBanner_full{gap:8px;}
.aboutBanner_foot{gap:15px;}
.aboutBanner_studio{width:170px;}
.aboutBanner_rowTxt > p{font-size:0.75rem; line-height:160%;}
.aboutBanner_rowMid{min-width:0; white-space:nowrap; letter-spacing:0;}




/* ABOUT — PALETTE (COLOR + TYPOGRAPHY) */
.aboutPalette_logoBg{margin-bottom:0;}
.aboutPalette_ci{bottom:150px; max-width:200px; --aboutPaletteCiBlur:1px;}

.aboutPalette_color{gap:40px;}
.aboutPalette_head{gap:15px;}

.aboutPalette_chip--lg{height:200px; padding:20px;}
.aboutPalette_chip--sm{height:100px; padding:20px;}
.aboutPalette_chip--half{height:100px; padding:20px;}

.aboutPalette_type{margin-top: 60px; gap:40px;}
.aboutPalette_typeSpec{gap:30px;}
.aboutPalette_face{gap:20px;}
.aboutPalette_faceTit{padding-bottom:10px;}
.aboutPalette_faceBig{font-size: 3.333rem;}
.aboutPalette_faceChars{font-size:1rem;}
.aboutPalette_faceSample{gap:15px; flex-direction: column;}
.aboutPalette_faceMeta{padding-top:15px;}
.aboutPalette_faceMetaRight{gap:10px;}
.aboutPalette_faceList{gap:30px;}
.aboutPalette_faceItem{gap:20px;}
.aboutPalette_typeHead{gap:15px;}


}