@font-face{font-family:OfficeNoto;src:url(assets/NotoSansKR-Regular.woff2)}
@font-face{font-family:OfficeNoto;src:url(assets/NotoSansKR-Bold.woff2);font-weight:700}
#office-page{--accent:#262626;--soft:#f6f5f2;font-family:OfficeNoto,"맑은 고딕",sans-serif;color:#242424;line-height:1.8}
#office-page *{box-sizing:border-box}
#office-page a{text-decoration:none;color:inherit}
#office-page h1,#office-page h2,#office-page h3,#office-page p,#office-page figure{margin:0;word-break:keep-all}
#office-page .inner{max-width:1120px;margin:auto;padding:0 24px}
#office-page .crumb{padding:22px 24px;font-size:12px;color:#777;max-width:1120px;margin:auto}
#office-page .hero{max-width:1200px;margin:auto;display:grid;grid-template-columns:1fr 1fr;background:var(--soft)}
#office-page .hero-copy{padding:65px 44px;align-self:center}
#office-page .kicker{color:var(--accent);font-size:12px;font-weight:700;margin-bottom:18px}
#office-page h1{font-size:42px;line-height:1.45;letter-spacing:-1.5px}
#office-page .lead{font-size:16px;color:#666;margin:24px 0 28px}
#office-page .button{display:inline-flex;background:var(--accent);color:#fff;padding:14px 22px;align-items:center;gap:30px;font-size:14px}
#office-page .hero img{width:100%;height:100%;min-height:480px;object-fit:cover}
#office-page .hero figure{position:relative;overflow:hidden}
#office-page figcaption{font-size:10px;color:#888;margin-top:12px}
#office-page .hero figcaption{position:absolute;bottom:0;left:0;background:#fffffff0;padding:6px 12px;margin:0}
#office-page .benefits{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;padding:26px 24px;border-bottom:1px solid #ddd;max-width:1120px;margin:auto;font-size:14px}
#office-page .benefits strong{display:block;font-size:17px;margin-bottom:5px}
#office-page .benefits span{font-size:12px;color:#777}
#office-page .section{padding:80px 0}
#office-page h2{font-size:31px;line-height:1.5;letter-spacing:-1px}
#office-page .section-intro{font-size:15px;color:#777;margin:16px 0 30px}
#office-page .types{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:35px}
#office-page .type{border-top:2px solid var(--accent);padding-top:22px}
#office-page .type .num{font-size:12px;color:#888;margin-bottom:12px}
#office-page h3{font-size:20px;line-height:1.5;margin-bottom:12px}
#office-page .type p{font-size:14px;color:#666}
#office-page .type a{display:inline-block;margin-top:22px;border-bottom:1px solid #555;font-size:13px}
#office-page .soft{background:var(--soft)}
#office-page .services{display:grid;grid-template-columns:1fr 1fr;column-gap:50px;margin-top:35px}
#office-page .service{border-top:1px solid #d8d8d8;padding:25px 0;display:grid;grid-template-columns:40px 1fr;gap:10px}
#office-page .service>b{color:var(--accent);font-size:14px}
#office-page .service p{font-size:14px;color:#777}
#office-page .photo-band{display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:center}
#office-page .photo-band img{width:100%;max-height:380px;object-fit:cover}
#office-page .photo-band p{font-size:15px;color:#666;margin:20px 0}
#office-page .checklist{list-style:none;padding:0;margin:30px 0 0;display:grid;grid-template-columns:1fr 1fr;gap:12px}
#office-page .checklist li{padding:17px 20px;background:#f6f6f6;font-size:14px}
#office-page .checklist b{display:block;margin-bottom:5px}
#office-page .checklist span{color:#777;font-size:13px}
#office-page .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:25px;margin-top:35px}
#office-page .step{padding:23px 0;border-top:1px solid #ccc}
#office-page .step>b{font-size:12px;color:var(--accent)}
#office-page .step h3{margin-top:12px}
#office-page .step p{font-size:14px;color:#777}
#office-page details{border-bottom:1px solid #ddd;padding:21px 0}
#office-page summary{font-size:16px;cursor:pointer;line-height:1.6}
#office-page details p{font-size:14px;color:#777;margin-top:15px}
#office-page .contact{background:var(--accent);color:white;padding:55px 0 65px}
#office-page .contact p{color:#eee;font-size:15px;margin:18px 0 24px}
#office-page .contact .button{background:white;color:#222;margin-right:8px}
#office-page .contact .kakao{background:#fee500}
#office-page .contact small{display:block;font-size:12px;color:#eee;margin-top:22px}
#office-page.mall{--accent:#df2029;--soft:#faf7f7}
#office-page.mall .hero{grid-template-columns:1.12fr 1fr}
#office-page.mall h1{font-size:39px}
#office-page.mall .hero-copy{border-top:4px solid var(--accent)}
#office-page.mall .types{gap:15px}
#office-page.mall .type{background:#fafafa;padding:25px}
#office-page.mall .benefits strong{color:var(--accent)}
#office-page a:focus-visible,#office-page summary:focus-visible{outline:2px solid #466d99;outline-offset:4px}
@media(max-width:760px){#office-page .hero,#office-page.mall .hero{grid-template-columns:1fr}
#office-page .hero-copy{padding:35px 22px}
#office-page h1,#office-page.mall h1{font-size:31px;letter-spacing:-1px}
#office-page .hero img{height:280px;min-height:0}
#office-page .inner{padding:0 22px}
#office-page .benefits{grid-template-columns:1fr;padding:22px;gap:15px}
#office-page .benefits>div{display:flex;gap:15px;align-items:baseline;justify-content:space-between}
#office-page .benefits strong{font-size:14px}
#office-page .section{padding:48px 0}
#office-page h2{font-size:26px}
#office-page .types,#office-page .services,#office-page .photo-band,#office-page .checklist,#office-page .steps{grid-template-columns:1fr}
#office-page .types{gap:24px}
#office-page .photo-band{gap:25px}
#office-page .photo-band img{max-height:280px}
#office-page .contact .button{display:flex;justify-content:space-between;margin:10px 0}
#office-page .lead{font-size:15px}
#office-page .step{padding:17px 0}
#office-page .steps{gap:0}
#office-page .crumb{padding:18px 22px}
#office-page .kicker{margin-bottom:12px}}
#office-page.gabi .photo-band{grid-template-columns:1.15fr 1fr}
#office-page.gabi .types .type{border-top:1px solid #bbb}
#office-page.mall .services{background:white;padding:10px 25px}
#office-page.mall .steps .step{border-top:3px solid var(--accent)}
#office-page .type>b{display:block;font-size:12px;color:#888;margin-bottom:14px}
@media(max-width:760px){#office-page.gabi .photo-band{grid-template-columns:1fr}}
/*OFFICE1 begin — 기존 틀에서 번지는 기본값만 시안 기본값으로 되돌림 */
:where(#office-page){font-size:16px}
:where(#office-page) .hero{position:static;min-height:0;top:auto;left:auto;padding:0;gap:normal;overflow:visible}
:where(#office-page) .hero h1{grid-column:auto;font-weight:700;white-space:normal}
:where(#office-page) .section h2,:where(#office-page) .contact h2{font-weight:700}
:where(#office-page) img{display:block;max-width:100%;vertical-align:baseline}
:where(#office-page) .section{border-bottom:0}
#office-page section[id]{scroll-margin-top:12px}
@media(max-width:760px){#office-page.gabi section[id]{scroll-margin-top:160px}}
/*OFFICE1 end*/
/*SIZE1 begin — 가비 사내카페 글자 줄임(10/27 대장님)*/
#office-page.gabi h1{font-size:34px}
#office-page.gabi h2{font-size:26px}
#office-page.gabi h3{font-size:18px}
#office-page.gabi .lead{font-size:15px}
#office-page.gabi summary{font-size:15px}
#office-page.gabi .section-intro{font-size:14px}
@media(max-width:760px){#office-page.gabi h1{font-size:26px}
#office-page.gabi h2{font-size:22px}
#office-page.gabi h3{font-size:17px}
#office-page.gabi .lead{font-size:14px}}
/*SIZE1 end*/