@charset "utf-8";
/* doc.css는 디자인페이지 스타일을 정의합니다. */

.company-wrap {max-width:1120px; margin:0 auto; padding:32px 0;}
.company-wrap .sub-title {padding:0; margin-bottom:20px;}
.company-wrap .sub-title h2 {font-size:var(--font-size-28); font-weight:500; line-height:1.3em; color:#2C2C2C; letter-spacing:-.03em;}
.company-wrap .real-cont {padding-bottom:0;}

/* greetings */
.greetings {display:flex; flex-direction:column; align-items:flex-start; font-size:15px; line-height:1.6em; letter-spacing:-.02em; color:#676767;}
.greetings-body {display:flex; flex-direction:column; gap:10px; width:100%;}
.greetings-offer {display:flex; flex-direction:column; gap:10px; width:100%;}
.greetings-list {display:flex; flex-direction:column; gap:2px; width:100%; padding:14px; background:#f6f6f6;}
.greetings-list .item {display:flex; align-items:center; width:100%;}
.greetings-list .item dt {flex-shrink:0; width:180px; color:#cda079; font-weight:500;}
.greetings-list .item dd {color:#676767;}
.greetings-list .item dd strong {color:#505050; font-weight:500;}
.greetings-sign {color:#676767; font-size:15px; font-weight:500; line-height:24px; letter-spacing:-.02em; margin-top:11px;}
.greetings-sign span {display:inline-block; vertical-align:middle;}
.greetings-sign img {vertical-align:middle; margin:0 12px 0 16px; height:16px;}

/* business */
.business-wrap {max-width:1400px; margin:0 auto; background:#2c353e; padding:130px 30px 40px;}
.business-content {display:flex; flex-direction:column; width:100%; max-width:1200px; margin:0 auto;  color:#fff;}
.business-head {display:flex; align-items:flex-end; justify-content:space-between; gap:60px; width:100%;}
.business-body {display:flex; align-items:stretch; justify-content:space-between; gap:60px; width:100%;}
.business-showcase {display:flex; flex:1 1 auto; flex-direction:column; min-width:0; padding-right:0;}
.business-intro {display:flex; align-items:flex-end; gap:24px; padding-bottom:28px; color:#949ca7;}
.business-intro h2 {flex:0 0 auto; margin:0; font-size:22px; font-weight:700; line-height:1.35em; letter-spacing:-.03em;}
.business-intro p {margin:0; font-size:15px; font-weight:500; line-height:1.33em; letter-spacing:-.03em;}
.business-category-head {display:flex; flex:0 0 372px; flex-direction:column; gap:14px; margin-bottom:20px;}
.business-swiper {position:relative; width:100%; background:#fff; overflow:hidden;}
.business-swiper .swiper-slide {display:flex; align-items:center; justify-content:center; aspect-ratio:1.365 / 1; background:#fff;}
.business-swiper .swiper-slide img {display:block; width:100%; height:100%; object-fit:contain;}
.business-slide-button {position:absolute; z-index:5; top:50%; width:32px; height:32px; padding:0; border:0; background:transparent; transform:translateY(-50%); cursor:pointer;}
.business-slide-button.prev {left:20px;}
.business-slide-button.next {right:20px;}
.business-slide-button img {display:block; width:100%; height:100%; object-fit:contain;}
.business-slide-button.swiper-button-disabled {opacity:.35; cursor:default;}
.business-order {display:flex; flex-direction:column; align-items:center; gap:12px; padding-top:20px;}
.business-button {display:inline-flex; align-items:center; justify-content:center; min-height:50px; padding:8px 24px; background:#414d5b; color:#fff; font-size:20px; font-weight:600; line-height:34px; letter-spacing:-.4px; text-decoration:none; border:0; transition:background-color .2s ease, color .2s ease;}
.business-button:hover, .business-button:focus-visible {background:#cda079; color:#2c2c2c;}
.business-order .business-button {padding:12px 64px;}
.business-order p {margin:0; color:#cda079; font-size:16px; font-weight:500; line-height:26px; letter-spacing:-.32px; text-align:center;}
.business-menu {display:flex; flex:0 0 372px; flex-direction:column; justify-content:space-between; gap:30px;}
.business-menu-main {display:flex; flex-direction:column; gap:14px;}
.business-category-title {display:flex; align-items:center; justify-content:flex-end; gap:40px;}
.business-category-title span {flex:1 1 auto; height:1px; background:#414d5b;}
.business-category-title h3 {flex:0 0 auto; margin:0; color:#fff; font-size:28px; font-weight:500; line-height:1.35em; letter-spacing:-.03em; text-align:right;}
.business-category-title h3 small {display:inline-block; font-size:16px; font-weight:500; line-height:1.35em; letter-spacing:-.03em; color: rgba(255, 255, 255, 0.70);}
.business-price-tabs {display:flex; gap:6px;}
.business-price-tabs a {display:flex; flex:1 1 0; align-items:center; justify-content:center; min-width:0; padding:10px 8px; background:#fff; color:#2c2c2c; font-size:18px; font-weight:500; line-height:28px; letter-spacing:-.36px; text-decoration:none; transition:background-color .2s ease;}
.business-price-tabs a:hover, .business-price-tabs a:focus-visible, .business-price-tabs a.active {background:#cda079;}
.business-list {display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:12px;}
.business-list .item {position:relative; display:flex; flex-direction:column; justify-content:flex-end; text-align:right; min-height:180px; border:8px solid #949CA7; padding:12px;}
.business-list .item:before {content:""; position:absolute; top:12px; left:12px; width:24px; height:24px; background:url('/images/sub/line.svg') 50% 50%/contain no-repeat; z-index:1;}
.business-list .item .tit {font-size:20px; font-weight:500; line-height:1.5em; color:#fff;}
.business-list .item .txt {margin-top:2px; font-size:14px; line-height:1.4em; color: rgba(255, 255, 255, 0.80);}
.business-list .item:hover {border-color:#CDA079;}
.business-list .item.active {border-color:#CDA079;}
.business-contact {display:flex; flex-direction:column; align-items:flex-end; gap:16px;}
.business-contact p {margin:0; color:rgba(255,255,255,.9); font-size:20px; font-weight:500; line-height:34px; letter-spacing:-.4px; white-space:nowrap;}
.business-contact p a {color:inherit; text-decoration:none;}
.business-contact p a:hover, .business-contact p a:focus-visible {text-decoration:underline;}

/* board */
.board-btn-area {display:flex; justify-content:flex-end; padding:16px 0;}
.board-btn-area .business-button {min-width:120px;}

/* order */
.order-wrap {display:flex; max-width:1460px; margin:0 auto; padding:130px var(--space-container) 40px;}
.order-layout {--order-text:#2c2c2c; --order-body:#505050; --order-muted:#676767; --order-line:#ddd; --order-soft:#fafafa; --order-point:#cda079; --order-alert:#b31818; display:flex; align-items:stretch; gap:48px; width:100%;}
.order-layout *, .order-layout *:before, .order-layout *:after {box-sizing:border-box;}
.order-content {flex:1 1 auto; min-width:0;}
.order-heading {display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom:30px;}
.order-heading h2 {margin:0; color:var(--order-text); font-size:28px; font-weight:500; line-height:38px; letter-spacing:-.56px;}
.order-heading p {margin:0; color:var(--order-alert); font-size:16px; font-weight:500; line-height:26px; letter-spacing:-.32px; text-align:right;}
.order-heading p span {color:var(--order-alert);}
.order-submit {display:flex; align-items:center; justify-content:center; width:100%; min-height:64px; padding:16px 32px; border:0; border-radius:80px; background:var(--order-point); color:#fff; font-size:18px; font-weight:600; line-height:32px; letter-spacing:-.36px; cursor:pointer; transition:background-color .2s ease;}
.order-submit:hover, .order-submit:focus-visible {background:#b88960;}
.order-side {display:flex; flex:0 0 372px; flex-direction:column; gap:10px; min-width:0;}
.contact-card {padding:20px 24px; border:1px solid #eee; border-radius:8px; background:#414d5b; color:#fff; overflow:hidden;}
.contact-card h2 {margin:0 0 16px; padding-bottom:14px; border-bottom:1px solid rgba(255,255,255,.1); color:#fff; font-size:20px; font-weight:600; line-height:34px; letter-spacing:-.4px;}
.contact-list {display:flex; flex-direction:column; gap:12px; margin:0; padding:0 12px;}
.contact-item {display:flex; align-items:flex-end; justify-content:space-between; gap:14px;}
.contact-item > div {min-width:0;}
.contact-item dt {margin:0 0 2px; color:rgba(255,255,255,.7); font-size:16px; font-weight:500; line-height:26px; letter-spacing:-.32px;}
.contact-item dd {margin:0; color:#fff; font-size:16px; font-weight:500; line-height:26px; letter-spacing:-.32px;}
.contact-item a {color:inherit; text-decoration:none;}
.contact-item a:hover, .contact-item a:focus-visible {text-decoration:underline;}
.contact-icon {flex-shrink:0; width:32px; height:32px; border-radius:50%; background-color:rgba(255,255,255,.16); background-repeat:no-repeat; background-position:50% 50%;}
.contact-icon.phone {background-image:url('/images/sub/icon-tel.svg');}
.contact-icon.email {background-image:url('/images/sub/icon-email.svg');}
.contact-icon.time {background-image:url('/images/sub/icon-clock.svg');}
.contact-notice {display:flex; flex-direction:column; gap:12px; margin-top:16px; padding:14px 16px; border-radius:4px; background:rgba(0,0,0,.24); color:rgba(255,255,255,.9); font-size:16px; font-weight:500; line-height:26px; letter-spacing:-.32px;}
.contact-notice p {margin:0;}
.member-card {display:flex; flex:1 1 auto; flex-direction:column; justify-content:space-between; gap:30px; min-height:0; padding:24px; border:1px solid #eee; border-radius:8px; background:#f1f1f1; overflow:hidden;}
.member-card h2 {margin:0 0 10px; color:var(--order-text); font-size:20px; font-weight:600; line-height:34px; letter-spacing:-.4px;}
.member-card ul {display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:6px 0; margin:0; padding:0; list-style:none;}
.member-card li {position:relative; min-width:0; padding-left:12px; color:var(--order-muted); font-size:16px; font-weight:400; line-height:26px; letter-spacing:-.32px; white-space:nowrap;}
.member-card li:before {content:""; position:absolute; top:11px; left:0; width:4px; height:4px; border-radius:50%; background:#ccc;}
.member-link {display:flex; align-items:center; justify-content:center; width:100%; min-height:50px; padding:12px 32px; border-radius:80px; background:var(--order-text); color:#fff; font-size:16px; font-weight:600; line-height:26px; letter-spacing:-.32px; text-decoration:none; transition:background-color .2s ease;}
.member-link:hover, .member-link:focus-visible {background:var(--order-point);}

/* portfolio */
.portfolio {max-width:1400px; margin:0 auto;}
.portfolio-hero {display:flex; justify-content:flex-end; flex-direction:column; height:clamp(320px, calc(400 / var(--inner) * 100vw), 400px); padding: 0 clamp(16px, calc(160 / var(--inner) * 100vw), 160px) clamp(20px, calc(60 / var(--inner) * 100vw), 60px) clamp(16px, calc(160 / var(--inner) * 100vw), 160px); background:url('/images/sub/portfolio-hero.jpg') 50% 50%/cover no-repeat; color:#CDA079;}
.portfolio-hero h2 {font-size:clamp(40px, calc(100 / var(--inner) * 100vw), 100px); font-weight:300; line-height:1em; letter-spacing:-.03em;}
.portfolio-hero p {font-size:clamp(30px, calc(80 / var(--inner) * 100vw), 80px); font-weight:300; line-height:1em; letter-spacing:-.03em;}

.portfolio-heading {display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; padding:var(--space-80) var(--space-container) 0; text-align:center;}
.portfolio-heading h2 {display:flex; justify-content:center; align-items:flex-end; padding:0 12px 16px 12px;  gap:8px; border-bottom:1px solid #949CA7;}
.portfolio-heading h2 large {padding:2px 12px; background:#CDA079; color:#FFF; font-size: var(--font-size-40); font-weight:300; line-height:1.33em; letter-spacing:-0.03em;}
.portfolio-heading h2 small {color:#CDA079; text-align: right; font-size: var(--font-size-20); font-weight: 300; line-height:1em; letter-spacing: -0.03em;}
.portfolio-heading p {color:#949CA7; font-size:var(--font-size-32); font-weight:300; line-height:1.45em; letter-spacing:-.05em;}

.portfolio-article {padding:var(--space-60) clamp(16px, calc(60 / var(--inner) * 100vw), 60px) var(--space-80);}
.portfolio-article.bg {background:#F4F5F7;}
.portfolio-article-inner {max-width:1160px;}
.portfolio-article-title {margin-bottom:var(--space-48); display:flex; align-items:flex-end; justify-content:space-between; gap:24px;}
.portfolio-article-title h3 {padding:10px 4px 0 4px; border-top:2px solid #CDA079; color:#CDA079; font-size:var(--font-size-28); font-weight: 300; line-height: 1.5em; letter-spacing: -0.03em;}
.portfolio-article-title .btn {display:inline-flex; align-items:center; justify-content:center; padding:14px 24px; background:var(--color-primary); color:#fff; font-size:var(--font-size-16); font-weight:600; line-height:1.2em;}
.portfolio-article-title .btn:hover, .portfolio-article-title .btn:focus-visible {background:var(--color-secondary);}
.portfolio-list {display:flex; margin-left:clamp(0px, calc(100 / var(--inner) * 100vw), 100px);}
.portfolio-items {display:grid; grid-template-columns:repeat(6, 1fr); gap:var(--space-20);}
.portfolio-item {display:block; aspect-ratio:1/1; overflow:hidden; border:8px solid #949CA7;}
.portfolio-item img {display:block; width:100%; height:100%; object-fit:cover; transition:.4s;}
.portfolio-item:hover {border-color:#CDA079;}
.portfolio-item:hover img {transform:scale(1.05);}

.bottom-join {margin-top:var(--space-80); padding:0 clamp(16px, calc(60 / var(--inner) * 100vw), 60px); display:flex; flex-direction:column; align-items: flex-end; gap:16px;}
.bottom-join .btn {display:inline-flex; align-items:center; justify-content:center; padding:12px 24px; background:var(--color-secondary); color:#fff; font-size:var(--font-size-20); font-weight:600; line-height:1.2em;}
.bottom-join .btn:hover, .bottom-join-inner .btn:focus-visible {background:var(--color-primary);}
.bottom-join .cs-number {color:#878787; font-size:var(--font-size-20); font-weight:500; line-height:1.7em; letter-spacing:-.03em;}

.modal-portfolio {border-radius:0 !important; width:100%; max-width:800px; padding:20px; position:relative;}
.modal-portfolio .swiper-slide img {display:block; width:100%; height:100%; aspect-ratio:76/68; object-fit:contain;}
.modal-portfolio .slide-btn {position:absolute; top:50%; -webkit-transform:translateY(-50%); transform:translateY(-50%); z-index:10; width:32px; aspect-ratio:1; display:flex; align-items:center; justify-content:center; background:transparent; border:0; padding:0; cursor:pointer;}
.modal-portfolio .slide-btn svg {display:block;}
.modal-portfolio .slide-prev {left:var(--space-40);}
.modal-portfolio .slide-next {right:var(--space-40);}

html:has(.modal-portfolio) .modal a.close-modal {top:20px; right:20px; z-index:10; width:28px; height:28px; background:url('/images/sub/close.svg') 50% 50% no-repeat;}