@charset "utf-8";

/* ABOUT US */
.about-page { padding-bottom: 150px; }
.about-tab { position: fixed; right: 15px; top: 50%; z-index: 40; transform: translateY(-50%); display: flex; flex-direction: column; gap: 20px; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .3s ease, visibility .3s; }
.about-tab.show { opacity: 1; visibility: visible; pointer-events: auto; }
.about-tab a { display: flex; align-items: center; gap: 12px; color: #b7b7b7; font-size: var(--font-size18); font-weight: 600; line-height: 1.44em; letter-spacing: -.02em; font-family: 'Pretendard';}
.about-tab a .num { width: auto; opacity: 1; }
.about-tab a .txt { white-space: nowrap; letter-spacing: .1em; }
.about-tab a .txt.en { text-transform: uppercase; }
.about-tab a.on { color: var(--color-primary); }
.about-tab a.on .num { opacity: 1; color: var(--color-primary); }
.about-tab a.on i { opacity: 1; background: var(--color-primary); }
.about-h3 { margin: 150px 0 80px; padding-top: 0; scroll-margin-top: 100px; font-size: var(--font-size32); font-weight: 700; line-height: 1em; letter-spacing: -.03em; color: #121212; }
.about-h3.pd { margin-bottom: 40px; }
.about-value { display: flex; flex-direction: column; gap: 48px; --value-title: 320px; }
.about-value li { display: flex; align-items: flex-start; gap: 40px; }
.about-value li strong { display: block; flex: 0 0 var(--value-title); width: var(--value-title); margin: 0; font-family: var(--suit); font-size: var(--font-size32); font-weight: 700; line-height: 1.3em; letter-spacing: -.02em; color: #121212; word-break: keep-all; }
.about-value li strong::after { content: none; display: none; }
.about-value li strong span { display: inline-block; padding: 0 10px; font-weight: 100; }
.about-value li p { flex: 1 1 auto; min-width: 0; margin: 0; font-size: var(--font-size32); font-weight: 400; line-height: 1.6em; letter-spacing: -.02em; color: #505050; }
.about-value-tit { font-size: var(--font-size28); font-weight: 600; line-height: 1.44em; letter-spacing: -.02em; color: #121212; margin-bottom: 80px; }
.about-hist-en { margin: 0 0 40px; font-size: var(--font-size28); font-weight: 600; line-height: 1.44em; letter-spacing: -.02em; color: #121212; }
.about-hist-tit { margin: 0 0 20px; font-size: var(--font-size24); font-weight: 700; line-height: 1.3em; letter-spacing: -.02em; color: #121212; }
.about-hist-desc { margin: 0 0 40px; font-size: var(--font-size20); font-weight: 400; line-height: 1.6em; letter-spacing: -.02em; color: #505050; }
.about-hist-desc strong { font-weight: 700; color: var(--color-primary); }
.about-greet .banner { position: relative; overflow: hidden; border-radius: 32px; }
.about-greet .banner img { display: block; width: 100%; }
.about-greet .banner::after { content: ""; position: absolute; inset: 0; }
.about-greet .banner .logo { position: absolute; left: 50px; top: 50%; z-index: 1; transform: translateY(-50%); color: rgba(255,255,255,.5); font-family: var(--notoserif); font-size: var(--font-size32); font-weight: 400; line-height: 1em; letter-spacing: -.02em; }
.about-greet .body { display: flex; gap: 80px; align-items: flex-start; margin-top: 40px; }
.about-greet .thumb { flex: 0 0 557px; width: 557px; overflow: hidden; border-radius: 32px; background: transparent; }
.about-greet .thumb img { display: block; width: 100%; }
.about-greet .txt { flex: 1 1 auto; min-width: 0; }
.about-greet .txt p { margin: 0 0 16px; font-size: var(--font-size18); font-weight: 400; line-height: 1.77em; letter-spacing: -.02em; color: #505050; }
.about-greet .txt .corp { margin-top: 16px; font-weight: 600; color: #121212; }
.about-greet .sign { display: flex; align-items: center; gap: 16px; margin-top: 16px; }
.about-greet .sign span { font-size: var(--font-size20); font-weight: 600; line-height: 1.7em; color: #121212; }
.about-greet .sign img { display: block; width: auto; height: 40px; }
.about-history { position: relative; padding: 0; background: #f6f6f8; }
.about-history .contain { padding-top: 0; }
.about-history .intro { display: flex; flex-direction: column; gap: 60px; margin-bottom: 60px; text-align: left; }
.about-history .intro .txt { display: flex; flex-direction: column; gap: 24px; }
.about-history .intro .tit { margin: 0; font-family: var(--suit); font-size: var(--font-size56); font-weight: 700; line-height: 1.25em; letter-spacing: -.02em; color: #121212; }
.about-history .intro .tit em { font-style: normal; color: var(--color-primary); }
.about-history .intro .desc { margin: 0; font-family: var(--suit); font-size: var(--font-size24); font-weight: 400; line-height: 1.77em; letter-spacing: -.02em; color: #505050; }
.about-history .intro .since { margin: 0; font-family: var(--suit); font-size: 100px; font-weight: 700; line-height: 1em; letter-spacing: -.03em; color: #d8d8d8; }
.about-history .list { position: relative; display: flex; flex-direction: column; gap: 80px; }
.about-history .list::before { content: ""; position: absolute; left: 50%; top: 13px; bottom: 13px; width: 1px; background: #A4A4A4; transform: translateX(-50%); }
.about-history .list > li { position: relative; width: 50%; box-sizing: border-box; }
.about-history .list > li.right { margin-left: 50%; padding-left: 0; }
.about-history .list > li.left { padding-right: 0; text-align: right; }
.about-history .list > li .year { display: flex; align-items: center; gap: 15px; margin-bottom: 24px; }
.about-history .list > li.right .year { justify-content: flex-start; }
.about-history .list > li.left .year { justify-content: flex-end; }
.about-history .list > li .year .dot { flex: 0 0 20px; width: 20px; height: 20px; border-radius: 50%; background: url(../images/sub/hst-dot.png) center no-repeat; background-size: contain; }
.about-history .list > li.right .year .dot { margin-left: -10px; }
.about-history .list > li.left .year .dot { margin-right: -10px; }
.about-history .list > li .year .line { flex: 0 0 60px; width: 60px; height: 1px; background: #A4A4A4; }
.about-history .list > li .year span { flex: 1 1 auto; min-width: 0; font-family: var(--suit); font-size: var(--font-size32); font-weight: 700; line-height: 1.44em; letter-spacing: -.02em; color: #121212; }
.about-history .list > li.left .year span { text-align: right; }
.about-history .list > li ul { display: flex; flex-direction: column; }
.about-history .list > li.right ul { padding-left: 34px; }
.about-history .list > li.left ul { padding-right: 34px; }
.about-history .list > li ul li { position: relative; display: flex; align-items: center; gap: 24px; font-family: var(--suit); font-size: var(--font-size18); font-weight: 400; line-height: 1.55em; letter-spacing: -.02em; color: #505050; }
.about-history .list > li.left ul li { flex-direction: row-reverse; justify-content: flex-start; text-align: right; }
.about-history .list > li ul li::before { content: ""; flex: 0 0 5px; width: 5px; height: 5px; border-radius: 50%; background: #ccc; }
.about-org { margin-bottom: 40px; }
.about-members .lead { position: relative; margin-bottom: 50px; padding-bottom: 50px; border-bottom: 2px solid #ddd; }
.about-members .lead p { margin: 0 0 24px; font-size: var(--font-size28); font-weight: 400; line-height: 1.44em; letter-spacing: -.02em; color: #121212; }
.about-members .lead h4 { margin: 0 0 24px; font-size: var(--font-size24); font-weight: 700; line-height: 1.3em; letter-spacing: -.02em; color: #121212; }
.about-members .lead span { display: block; font-size: var(--font-size20); font-weight: 400; line-height: 1.6em; letter-spacing: -.02em; color: #505050; }
.about-members .lead strong { font-weight: 700; color: var(--color-primary); }
.about-members .lead::after { content: ""; position: absolute; left: 0; bottom: -2px; width: 140px; height: 2px; background: var(--color-primary); }
.about-members .ceo { position: relative; display: flex; gap: 80px; align-items: center; justify-content: space-between; margin-bottom: 80px; padding: 80px; border-radius: 32px; overflow: hidden; color: #fff; background: var(--color-primary) url("../images/sub/sub1-bg.jpg") center / cover no-repeat; }
.about-members .ceo .left,
.about-members .ceo .right { position: relative; z-index: 1; }
.about-members .ceo .left { flex: 0 0 160px; }
.about-members .ceo .role { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 48px; font-size: 1em; font-weight: 600; line-height: 1.875em; }
.about-members .ceo .role::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: #fff; }
.about-members .ceo strong { display: block; margin-bottom: 24px; font-size: var(--font-size56); font-weight: 700; line-height: 1.25em; letter-spacing: -.02em; }
.about-members .ceo strong::after { content: ""; display: block; width: 48px; height: 2px; margin-top: 24px; background: #fff; }
.about-members .ceo em { display: block; font-style: normal; font-size: var(--font-size20); font-weight: 600; line-height: 1.6em; }
.about-members .ceo .right { flex: 1 1 auto; min-width: 0; max-width: 815px; padding: 40px; border: 1px solid rgba(255,255,255,.18); border-radius: 16px; background: rgba(255,255,255,.12); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.about-members .ceo .right li { padding: 0 0 16px; margin-bottom: 24px; border-bottom: 1px solid rgba(255,255,255,.2); font-size: var(--font-size18); font-weight: 400; line-height: 1.77em; letter-spacing: -.02em; }
.about-members .ceo .right li:last-child { margin-bottom: 0; border-bottom: 0; padding-bottom: 0; }
.about-members .grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }
.about-members .grid > li { position: relative; min-height: 355px; padding: 40px; border: 1px solid #ddd; border-radius: 16px; background: #fff; box-sizing: border-box; }
.about-members .grid > li::before { content: ""; position: absolute; left: 0; top: 0; width: 80px; height: 80px; border-top: 2px solid var(--color-primary); border-left: 2px solid var(--color-primary); border-top-left-radius: 16px; pointer-events: none; }
.about-members .grid strong { display: block; margin-bottom: 8px; font-size: var(--font-size28); font-weight: 700; line-height: 1.5em; letter-spacing: -.02em; color: #121212; }
.about-members .grid em { display: block; margin-bottom: 31px; padding-bottom: 31px; border-bottom: 1px solid #ddd; font-style: normal; font-size: var(--font-size18); font-weight: 600; line-height: 1.77em; color: var(--color-primary); }
.about-members .grid ul li { margin-bottom: 8px; font-size: var(--font-size18); font-weight: 400; line-height: 1.77em; color: #505050; }
.about-contact .map { margin-bottom: 60px; }
.about-contact .map img { display: block; width: 100%; }
.about-contact .map iframe { width: 100%; height: 550px; }
.about-contact .tit { margin: 0 0 60px; font-size: var(--font-size32); font-weight: 500; line-height: 1.44em; letter-spacing: -.02em; color: #121212; }
.about-contact .tit strong { font-weight: 700; color: var(--color-primary); }
.about-contact .info { display: flex; gap: 40px; }
.about-contact .info li { display: flex; gap: 20px; align-items: center; flex: 1 1 0; min-width: 0; }
.about-contact .info strong { display: block; margin-bottom: 8px; font-size: var(--font-size22); font-weight: 600; line-height: 1.45em; color: #121212; }
.about-contact .info p { margin: 0; font-size: var(--font-size18); font-weight: 400; line-height: 1.55em; color: #505050; }
[lang="en"] .about-members .ceo .left { flex: 1 1 auto; }
[lang="en"] .about-members .ceo strong { font-size: var(--font-size40);}

/* BUSINESS */
.biz-page { padding-bottom: 150px; }
.biz-dia { margin-bottom: 80px; }
.biz-approach { display: flex; flex-direction: column; gap: 50px; margin: 0; padding: 0; list-style: none; }
.biz-approach > li { display: flex; flex-direction: column; gap: 16px; }
.biz-approach > li .num { display: inline-flex; align-items: center; justify-content: center; width: 50px; height: 23px; border-radius: 24px; background: #121212; color: #fff; font-family: var(--suit); font-size: 14px; font-weight: 600; line-height: 1.5; letter-spacing: -.03em; }
.biz-approach > li .box { width: 100%; }
.biz-approach > li .bar { display: block; width: 100%; height: 3px; background: var(--color-primary); }
.biz-approach > li .card { border: 1px solid #ddd; border-top: 0; box-sizing: border-box; }
.biz-approach > li.type1 .card { display: flex; align-items: flex-end; gap: 60px; padding: 80px 60px; background: #fff; }
.biz-approach > li.type1 .txt { flex: 0 0 625px; width: 625px; max-width: calc(100% - 695px); }
.biz-approach > li.type1 .stat { display: flex; align-items: center; justify-content: space-between; flex: 0 0 635px; width: 635px; max-width: 100%; padding: 40px; background: #edeef1; box-sizing: border-box; }
.biz-approach > li.type1 .stat .item { flex: 0 0 175px; width: 175px; }
.biz-approach > li.type1 .stat .item.wide { flex: 0 0 320px; width: 320px; }
.biz-approach > li.type1 .stat em { display: block; margin-bottom: 4px; font-family: var(--suit); font-size: 42px; font-weight: 800; font-style: normal; line-height: 56px; letter-spacing: -.02em; color: var(--color-primary); }
.biz-approach > li.type1 .stat span { display: block; font-family: var(--suit); font-size: var(--font-size18); font-weight: 400; line-height: 32px; letter-spacing: -.02em; color: #505050; }
.biz-approach > li.type2 .card { display: flex; flex-direction: column; gap: 50px; padding: 80px 60px; background: #edeef1; }
.biz-approach > li.type3 .card { display: flex; flex-direction: column; gap: 50px; padding: 80px 60px; background: #fff; }
.biz-approach .txt .en { margin: 0 0 8px; font-family: var(--suit); font-size: 16px; font-weight: 700; line-height: 30px; letter-spacing: -.02em; color: rgba(23,34,71,.8); }
.biz-approach .txt strong { display: block; margin: 0 0 16px; font-family: var(--suit); font-size: var(--font-size20); font-weight: 700; line-height: 1.45em; letter-spacing: -.02em; color: #121212; }
.biz-approach .txt .desc { margin: 0; font-family: var(--suit); font-size: var(--font-size18); font-weight: 400; line-height: 32px; letter-spacing: -.02em; color: #505050; }
.biz-approach .tags { display: flex; flex-wrap: wrap; gap: 12px; margin: 0; padding: 0; list-style: none; }
.biz-approach .tags li { display: flex; align-items: center; gap: 11px; padding: 10px 18px; border: 1px solid #ddd; background: #fff; box-sizing: border-box; }
.biz-approach .tags li span { font-family: var(--suit); font-size: var(--font-size18); font-weight: 400; line-height: 32px; letter-spacing: -.02em; color: #505050; white-space: nowrap; }
.biz-approach .irr { display: flex; align-items: center; gap: 24px; width: 100%; padding: 40px; background: #edeef1; box-sizing: border-box; }
.biz-approach .irr > em { flex: 0 0 auto; font-family: var(--suit); font-size: 42px; font-weight: 800; font-style: normal; line-height: 56px; letter-spacing: -.02em; color: var(--color-primary); }
.biz-approach .irr strong { display: block; font-family: var(--suit); font-size: var(--font-size18); font-weight: 600; line-height: 32px; letter-spacing: -.02em; color: #505050; }
.biz-approach .irr span { display: block; font-family: var(--suit); font-size: var(--font-size18); font-weight: 400; line-height: 32px; letter-spacing: -.02em; color: #505050; }
.biz-client {display:flex; flex-direction:column; gap:40px; width:100%;}
.biz-client .group {background:#fff; border:1px solid #ddd; border-radius:16px; box-sizing:border-box;}
.biz-client .biz-client-hd {display:flex; align-items:center; justify-content:space-between; gap:20px; width:100%; padding:0; margin:0; border:0; background:transparent; cursor:pointer; text-align:left; padding: 30px; }
.biz-client .biz-client-hd .tt {display:flex; align-items:center; gap:12px; flex:1; min-width:0; font-family:'SUIT',sans-serif; font-weight:700; font-size:var(--font-size32); line-height:1.33em; letter-spacing:-0.64px; color:#121212;  }
.biz-client .biz-client-hd .tt img {display:block; width:21px; height:12px; flex-shrink:0;}
.biz-client .biz-client-hd > svg {display:block; width:48px; height:48px; flex-shrink:0; transition:transform .25s ease; transform:rotate(0deg);}
.biz-client .group.on .biz-client-hd > svg {transform:rotate(180deg);}
.biz-client .biz-client-bd {display:none; padding: 30px; padding-top: 0; }
.biz-client .group.on .biz-client-bd {display:block;}
.biz-client .biz-client-bd ul {display:flex; flex-wrap:wrap; gap:20px; margin:0; padding:0; list-style:none;}
.biz-client .biz-client-bd li {display:flex; align-items:center; justify-content:center; width:calc((100% - 80px) / 5); margin:0; box-sizing:border-box; background:#fff; border-radius:8px; overflow:hidden; position: relative; }
.biz-client .biz-client-bd li::after { content: ""; position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto; border-radius: 8px; border: 1px solid #ddd;}
.biz-client .biz-client-bd li img {display:block; max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain;}
.biz-aum { display: flex; align-items: center; justify-content: space-between; gap: 40px; min-height: 296px; padding: 60px 100px; border-radius: 16px; color: #fff;  box-sizing: border-box; background: url(../images/sub/sub2-bg.jpg) center no-repeat; background-size: cover;}
.biz-aum .txt { flex: 1 1 auto; min-width: 0; max-width: 581px; }
.biz-aum .txt strong { display: block; margin-bottom: 8px; font-family: var(--suit); font-size: 46px; font-weight: 800; line-height: 56px; letter-spacing: -.02em; }
.biz-aum .txt p { margin: 0; font-family: var(--suit); font-size: var(--font-size18); font-weight: 400; line-height: 32px; letter-spacing: -.02em; }
.biz-aum .nums { display: flex; gap: 60px; flex: 0 0 auto; margin: 0; padding: 0; list-style: none; }
.biz-aum .nums li span { display: block; margin-bottom: 4px; font-family: var(--suit); font-size: var(--font-size18); font-weight: 500; line-height: 32px; letter-spacing: -.02em; }
.biz-aum .nums li em { display: flex; align-items: flex-end; gap: 3px; font-family: var(--suit); font-size: 42px; font-weight: 800; font-style: normal; line-height: 56px; letter-spacing: -.02em; }
.biz-aum .nums li em i { display: block; padding-bottom: 8px; font-family: var(--suit); font-size: 16px; font-weight: 400; font-style: normal; line-height: 26px; letter-spacing: -.02em; color: rgba(255,255,255,.8); }

/* 포트폴리오 */
.portfolio { padding-top: 120px; }
.pf-tabs { display: flex; flex-direction: column; align-items: center; gap: 40px; }
.pf-tab { display: flex; align-items: center; margin: 0; padding: 0; list-style: none; border-radius: 500px; background: #ebebeb; }
.pf-tab li a { display: flex; align-items: center; justify-content: center; padding: 18px 48px; border-radius: 500px; font-family: var(--suit); font-size: var(--font-size18); font-weight: 700; line-height: 28px; letter-spacing: -.02em; color: #878787; box-sizing: border-box; }
.pf-tab li.active a { background: var(--color-primary); color: #fff; }
.pf-cate { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px; margin-bottom: 80px; }
.pf-cate li a { display: flex; align-items: center; justify-content: center; padding: 10px 30px; border: 1px solid #ddd; border-radius: 500px; background: #fff; font-family: var(--suit); font-size: var(--font-size18); font-weight: 700; line-height: 28px; letter-spacing: -.02em; color: #505050; box-sizing: border-box; }
.pf-cate li.active a { border-color: var(--color-primary); background: #edeef1; color: var(--color-primary); }
.pf-list { display: flex; gap: 60px 39px; flex-wrap: wrap;}
.pf-list li { width: calc(100%/3 - 26px); }
.pf-list li a { display: block; }
.pf-list li .thumb { padding-bottom: 120%; display: block; position: relative; overflow: hidden; border-radius: 32px; margin-bottom: 24px; }
.pf-list li .thumb img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover;}
.pf-list li .tit { display: flex; justify-content: space-between; align-items: center; }
.pf-list li .tit strong { padding-right: 15px; flex: 1 1 auto; min-width: 0; width: 1%; font-size: var(--font-size22); font-weight: 700; line-height: 1.54em; color: #121212; max-height:3.08em; overflow:hidden; text-overflow:ellipsis; word-break:break-all; white-space:normal; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;}
.pf-list li .tit .view { display: inline-block; width: 81px; height: 52px; border-radius: 26px; background-color: #e5e5e5; background-repeat: no-repeat; background-position: center; background-size: 24px; transition: .3s; background-image: url(../images/sub/pf-view.png);}
.pf-list li a:hover .tit .view { background-image: url(../images/sub/pf-view-w.png); background-color: var(--color-primary);}

.about-sec + .about-sec,
.biz-sec + .biz-sec { position: relative; }
.about-sec + .about-sec::before,
.biz-sec + .biz-sec::before { content: ""; position: absolute; left: max(30px, calc((100% - 1500px) / 2 + 30px)); right: max(30px, calc((100% - 1500px) / 2 + 30px)); top: -75px; height: 1px; background: #e3e3e3; }

/* About: sub visual removed, office photo behind the CEO message. */
body:has(.about-page) .sub-visual.bg1 { display: none; }
.about-sec.about-greet-hero {
  position: relative;
  background: transparent;
  padding: 150px 0 100px;
}
.about-sec.about-greet-hero::before { content: none; }
.about-sec.about-greet-hero > .contain { position: relative; z-index: 1; }
.about-sec.about-greet-hero .about-h3 { margin-top: 0; }
.about-org img { display: block; width: 100%; height: auto; }
@media (max-width: 1024px) {
  .about-sec.about-greet-hero { padding: 110px 0 72px; }
}
@media (max-width: 767px) {
  .about-sec.about-greet-hero { padding: 88px 0 48px; }
}

/* Business: same treatment as the about greeting. */
body:has(.biz-page) .sub-visual.bg2 { display: none; }
.biz-sec.biz-hero {
  position: relative;
  background: transparent;
  padding: 150px 0 100px;
}
.biz-sec.biz-hero::before { content: none; }

/* About and business: building photo repeats down the page at full width. */
body:has(.about-page) #contArea.bg,
body:has(.biz-page) #contArea.bg {
  position: relative;
  background-color: #fff;
  background-image: url("/images/sub/building-bg.jpg");
  background-repeat: repeat-y;
  background-position: center top;
  background-size: 100% auto;
}
body:has(.about-page) #contArea.bg::before,
body:has(.biz-page) #contArea.bg::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: rgba(255, 255, 255, .82);
  pointer-events: none;
}
body:has(.about-page) #contArea.bg > *:not(.about-tab),
body:has(.biz-page) #contArea.bg > *:not(.about-tab) { position: relative; z-index: 1; }
body:has(.about-page) .about-tab,
body:has(.biz-page) .about-tab { position: fixed; z-index: 80; }
body:has(.about-page) .about-history { background: transparent; }
.biz-sec.biz-hero > .contain { position: relative; z-index: 1; }
.biz-sec.biz-hero .about-h3 { margin-top: 0; }
@media (max-width: 1024px) {
  .biz-sec.biz-hero { padding: 110px 0 72px; }
}
@media (max-width: 767px) {
  .biz-sec.biz-hero { padding: 88px 0 48px; }
}