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

/* 공통 */
.sub-sec {margin-bottom:var(--space-120);}
.sub-sec:last-child {margin-bottom:0;}
.sub-sec.bg {background:#f6f7f9 url('/images/sub/biz-hero-bg.svg') no-repeat right bottom; padding:var(--space-80) 0;}

.sub-tab {margin-bottom:var(--space-80); text-align:center;}
.sub-tab ul {display:flex; justify-content:center; flex-wrap:wrap; gap:var(--space-20);}
.sub-tab ul li a {display:block; padding:var(--space-14) var(--space-30); font-size:var(--font-size-20); font-weight:500; line-height:1.3em; letter-spacing:-.03em; color:#888; border-radius:50px; background:#F1F1F1;}
.sub-tab ul li.active a {color:#fff; background:var(--color-primary);}

.doc-tit {display:flex; align-items:center; gap:var(--space-20); margin-bottom:var(--space-30);}
.doc-tit:after {content:""; flex:1; min-width:0; height:1px; background:var(--color-primary);}
.doc-tit h3 {flex-shrink:0; font-size:var(--font-size-28); font-weight:600; line-height:1.3em; letter-spacing:-.03em; color:var(--color-primary);}


/* 회사소개 */
.greetings-wrap {background:rgba(31, 44, 97, 0.04); padding:var(--space-80) 0;}
.greetings {display:flex; gap:var(--space-100);}
.greetings .image {flex-shrink:0; width:42%; max-width:485px;}
.greetings .image img {display:block; width:100%;  border-radius:var(--radius-16);}
.greetings .content {position:relative; flex:1; min-width:0; max-width:615px;}
.greetings .content:before {content:""; position:absolute; left:-27px; top:0; width:37px; aspect-ratio:37/26; background:url('/images/sub/quote.svg') no-repeat center / contain; pointer-events:none;}
.greetings .content h2 {position:relative; margin-bottom:var(--space-30); font-size:var(--font-size-32); font-weight:700; line-height:1.31em; letter-spacing:-.03em; color:var(--color-primary);}
.greetings .content .line {position:relative; width:100%; height:2px; margin-bottom:var(--space-30); background:#ddd;}
.greetings .content .line:after {content:""; position:absolute; left:0; top:0; width:50px; height:2px; background:var(--color-primary);}
.greetings .content p {margin-bottom:1.55em; font-size:var(--font-size-18); line-height:1.55em; letter-spacing:-.03em; color:#454545;}
.greetings .content p:last-child {margin-bottom:0;}

.members-title p {font-size:var(--font-size-32); line-height:1.43em; letter-spacing:-.03em;}
.members-title p strong {font-weight:600;}
.members-devider {position:relative; width:100%; height:2px; margin:var(--space-50) 0; background:#ddd;}
.members-devider:after {content:""; position:absolute; left:0; top:0; width:50px; height:2px; background:var(--color-primary);}
.members-list {margin-bottom:var(--space-60);}
.members-list .items {display:grid; grid-template-columns:repeat(3, 1fr); gap:var(--space-60) var(--space-30);}
.members-list .item a {display:block; text-align:center;}
.members-list .item .thumb {overflow:hidden; aspect-ratio:38/45; background:#fafafa; border-radius:var(--radius-16);}
.members-list .item .thumb img {display:block; width:100%; height:100%; object-fit:cover;}
.members-list .item .info {margin-top:var(--space-24);}
.members-list .item .info .name {font-size:var(--font-size-22); font-weight:600; line-height:1.3em; letter-spacing:-.03em; color:#242424;}
.members-list .item .info .position {margin-top:4px; font-size:var(--font-size-18); line-height:1.3em; letter-spacing:-.03em; color:#454545;}
.members-list .none {grid-column: 1 / -1; width:100%; padding:70px 0; text-align:center; color:#767676; border-bottom:1px solid #ddd;}

.members-profile {padding:var(--space-80) 0; background:#f6f7f9;}
.members-profile .contain {display:flex; gap:var(--space-80);}
.members-profile .image {flex-shrink:0; width:45%; max-width:511px;}
.members-profile .image img {display:block; width:100%; border-radius:var(--radius-16);}
.members-profile .summary {flex:1; min-width:0; display:flex; flex-direction:column; justify-content:center;}
.members-profile .summary .head .position {margin-bottom:var(--space-12); font-size:var(--font-size-20); font-weight:600; line-height:1.5em; letter-spacing:-.03em; color:var(--color-primary);}
.members-profile .summary .head .tit {font-size:var(--font-size-40); font-weight:700; line-height:1.3em; letter-spacing:-.03em; color:var(--color-primary);}
.members-profile .summary .head .en {font-size:var(--font-size-20); line-height:1.3em; letter-spacing:0.06em; color:#454545;}
.members-profile .summary .line {margin:var(--space-48) 0 var(--space-50); height:2px; background:linear-gradient(to right, var(--color-primary) 0, var(--color-primary) 16.02%, #ddd 16.02%, #ddd 100%);}
.members-profile .summary .tags {margin-bottom:var(--space-30); display:flex; flex-wrap:wrap; gap:var(--space-10); padding:0; list-style:none;}
.members-profile .summary .tags li {padding:var(--space-14) var(--space-20); background:#fff; border-radius:100px; font-size:var(--font-size-18); font-weight:600; line-height:1.4em; letter-spacing:-.03em; color:var(--color-primary);}
.members-profile .summary .intro {margin-bottom:var(--space-30); padding:var(--space-30) var(--space-20); background:#fff; border-radius:var(--radius-16); font-size:var(--font-size-18); line-height:1.75em; letter-spacing:-.03em; color:#454545;}
.members-profile .summary .contact {display:flex; flex-wrap:wrap; gap:var(--space-30); align-items:center; font-size:var(--font-size-18); line-height:1.5em; letter-spacing:-.03em; color:#454545;}
.members-profile .summary .contact .item {display:flex; align-items:center; gap:var(--space-8);}
.members-profile .summary .contact .ico {flex-shrink:0; line-height:0; width:24px; aspect-ratio:1/1;}
.members-profile .summary .contact .ico img {display:block; width:100%; height:100%; object-fit:contain;}
.members-profile .summary .contact a:hover {text-decoration:underline;}
.members-detail {margin-top:var(--space-120);}
.members-detail .sec {border-bottom:1px solid #ddd; margin-bottom:var(--space-80);}
.members-detail .tit-row {display:flex; align-items:center; gap:var(--space-20); width:100%;}
.members-detail .tit-row .tit {flex-shrink:0; font-size:var(--font-size-28); font-weight:600; line-height:1.2em; letter-spacing:-.03em; color:var(--color-primary);}
.members-detail .tit-row .rule {flex:1 1 auto; min-width:0; width:1%; height:1px; background:var(--color-primary);}
.members-detail .content {padding:var(--space-40) 0;font-size:var(--font-size-18); line-height:1.75em; letter-spacing:-.03em; color:#454545;}
.members-detail .content  ul li {position:relative; padding-left:10px;}
.members-detail .content  ul li:before {content:""; position:absolute; left:0; top:.7em; width:4px; height:4px; margin-top:-2px; border-radius:50%; background:var(--color-primary);}

.directions-map {position:relative; height:clamp(240px, calc(450 / var(--inner) * 100vw), 450px); background:#eee; border-radius:var(--radius-16); overflow:hidden;}
.directions-map .root_daum_roughmap {width:100% !important; height:100% !important;}
.directions-map .root_daum_roughmap .wrap_map {height:100% !important;}
.directions-info {display:flex; gap:var(--space-40); margin-top:var(--space-40);}
.directions-info .info-box {flex:1; padding:var(--space-30); background:#F9F9F9; border-radius:var(--radius-16);}
.directions-info .info-box .title {display:flex; align-items:center; justify-content:space-between; gap:var(--space-10);}
.directions-info .info-box .title h3 {font-size:var(--font-size-24); font-weight:600; line-height:1.3em; letter-spacing:-.03em; color:var(--color-primary);}
.directions-info .info-box .title .icon {flex-shrink:0; line-height:0; width:clamp(36px, calc(50 / var(--inner) * 100vw), 50px); aspect-ratio:1/1;}
.directions-info .info-box .title .icon img {display:block; width:100%; height:100%; object-fit:contain;}
.directions-info .info-box .content {display:flex; flex-direction: column; gap:var(--space-8); margin-top:var(--space-50); font-size:var(--font-size-18); line-height:1.55em; letter-spacing:-.03em; color:#454545;}
.directions-info .info-box .content p.flex {display:flex; flex-wrap:wrap; gap:var(--space-8) 20px;}

/* 제공 서비스 */
.biz-hero {display:flex; gap:var(--space-60);}
.biz-hero .image {width:42%; max-width:484px; flex-shrink:0;}
.biz-hero .image img {display:block; width:100%; border-radius:var(--radius-16);}
.biz-hero .content {flex:1; min-width:0; display:flex; flex-direction:column; justify-content:center;}
.biz-hero .content h3 {font-size:var(--font-size-32); font-weight:700; line-height:1.3em; letter-spacing:-.03em; color:var(--color-primary);}
.biz-hero .content .line {margin:var(--space-36) 0; height:2px; background:linear-gradient(to right, var(--color-primary) 0, var(--color-primary) 16.02%, #ddd 16.02%, #ddd 100%);}
.biz-hero .content p {font-size:var(--font-size-18); line-height:1.55em; letter-spacing:-.03em; color:#454545;}

.biz-cases {display:grid; grid-template-columns:repeat(2, 1fr); gap:var(--space-20);} 
.biz-cases .item {position:relative; display:flex; flex-direction:column; justify-content:center; padding:var(--space-30); height:210px; overflow:hidden; border-radius:var(--radius-16); text-align:center; color:#fff; font-size:var(--font-size-20); line-height:1.5em; letter-spacing:-.03em;}
.biz-cases .item .image {position:absolute; left:0; top:0; width:100%; height:100%;}
.biz-cases .item .image img {display:block; width:100%; height:100%; object-fit:cover;}
.biz-cases .item .content {position:relative; z-index:1;}
.biz-cases .item .content .num {margin-bottom:var(--space-16); line-height:1.2em;}
.biz-cases .item .content .txt {font-weight:600;}

.biz-areas {display:flex; flex-direction:column; justify-content:center; gap:var(--space-40);}
.biz-areas .item {display:flex; align-items:center; gap:var(--space-30); padding:var(--space-40) var(--space-60); border:1px solid #ddd; border-radius:var(--radius-16);}
.biz-areas .item .content {display:flex; gap:var(--space-30); flex:1; min-width:0%;}
.biz-areas .item .content .num {flex-shrink:0; font-size:var(--font-size-20); line-height:1.3em;}
.biz-areas .item .content .text {flex:1; min-width:0; display:flex; flex-direction:column; gap:var(--space-16);}
.biz-areas .item .content .text h4 {font-size:var(--font-size-22); font-weight:600; line-height:1.3em; letter-spacing:-.03em;}
.biz-areas .item .content .text p {font-size:var(--font-size-18); line-height:1.55em; letter-spacing:-.03em; color:#454545;}
.biz-areas .item .icon {flex-shrink:0; line-height:0; width:42px; aspect-ratio:1/1;}
.biz-areas .item .icon svg {display:block; width:100%; height:100%; object-fit:contain;}

.biz-bnr {position:relative; overflow:hidden; display:flex; align-items:center; justify-content:center; min-height:250px; border-radius:var(--radius-16); text-align:center; padding:var(--space-40);}
.biz-bnr .image {position:absolute; left:0; top:0; width:100%; height:100%; margin:0;}
.biz-bnr .image img {display:block; width:100%; height:100%; object-fit:cover;}
.biz-bnr .content {position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; gap:var(--space-20);}
.biz-bnr .content .txt {font-size:var(--font-size-20); line-height:1.6em; letter-spacing:-.03em; color:#fff;}
.biz-bnr .content .txt strong {font-weight:600;}
.biz-bnr .content .line {width:clamp(80px, calc(100 / var(--inner) * 100vw), 100px); height:1px; background:#fff;}

/* 고객 후기 및 리뷰 */
.reviews {display:grid; grid-template-columns:repeat(3, 1fr); gap:var(--space-50) var(--space-30); margin-bottom:var(--space-60);}
.reviews .link-item {display:flex; flex-direction:column; padding:var(--space-50); border:1px solid #ddd; border-radius:var(--radius-16);}
.reviews .link-item .cnt-area {flex:1; min-height:0;}
.reviews .link-item .cnt-area:before {content:""; display:block; margin-bottom:var(--space-30); width:38px; aspect-ratio:38/26; background:url('/images/sub/quote-2.svg') no-repeat center / contain;}
.reviews .link-item .cnt-area .tit {height:calc(1.3em * 2); font-size:var(--font-size-22); font-weight:600; line-height:1.3em; letter-spacing:-.03em;  overflow:hidden; text-overflow:ellipsis; white-space:normal; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;}
.reviews .link-item .cnt-area .line {width:100%; height:1px; background:#ddd; margin:var(--space-20) 0;}
.reviews .link-item .cnt-area .desc {height:calc(1.62em * 5); font-size:var(--font-size-16); line-height:1.62em; letter-spacing:-.03em; color:#505050; overflow:hidden; text-overflow:ellipsis; white-space:normal; display:-webkit-box; -webkit-line-clamp:5; -webkit-box-orient:vertical;}
.reviews .link-item .cat-area {flex-shrink:0; margin-top:var(--space-30);}
.reviews .link-item .cat-area .cate {display:flex; align-items:center; gap:var(--space-8); font-size:var(--font-size-18); font-weight:600; line-height:1.2em; letter-spacing:-.03em; color:var(--color-primary);}
.reviews .link-item .cat-area .cate:before {content:""; display:inline-block; width:var(--font-size-18); aspect-ratio:1/1; background:url('/images/sub/check.svg') no-repeat center / contain; vertical-align:middle;}
.reviews .link-item:hover {border:1px solid var(--color-primary); background:#F6F7F9; box-shadow:2px 2px 16px 0 rgba(31, 44, 97, 0.25);}

/* 모달팝업 */
#popReview.modal {max-width:clamp(360px, calc(480 / var(--inner) * 100vw), 480px);}
.modal-content {padding:var(--space-80);}
.modal-header {border-bottom:1px solid #ddd; padding-bottom:var(--space-30); margin-bottom:var(--space-30);}
.modal-header:before {content:""; display:block; margin-bottom:var(--space-40); width:clamp(32px, calc(46 / var(--inner) * 100vw), 46px); aspect-ratio:38/26; background:url('/images/sub/quote-2.svg') no-repeat center / contain;}
.modal-header h2 {font-size:var(--font-size-32); font-weight:600; line-height:1.3em; letter-spacing:-.03em;}
.modal-body {font-size:var(--font-size-18); line-height:1.62em; letter-spacing:-.03em; color:#505050;}
.modal-body .cate { margin-top:var(--space-40); display:flex; align-items:center; gap:var(--space-8); font-size:var(--font-size-22); font-weight:600; line-height:1.2em; letter-spacing:-.03em; color:var(--color-primary);}
.modal-body .cate:before {content:""; display:inline-block; width:var(--font-size-22); aspect-ratio:1/1; background:url('/images/sub/check.svg') no-repeat center / contain; vertical-align:middle;}

.modal-close {display:flex; align-items:center; justify-content:center; position:absolute; top:-40px; right:0; width:28px; aspect-ratio:1/1;}
.modal-close svg {display:block; width:100%; height:100%; object-fit:contain;}

.modal-direction {position:absolute; top:50%; z-index:10; transform:translateY(-50%); width:clamp(48px, calc(64 / var(--inner) * 100vw), 64px); aspect-ratio:1/1; background:rgba(255,255,255,0.4); border:0; border-radius:50%; display:flex; align-items:center; justify-content:center;}
.modal-direction svg {display:block; width:clamp(12px, calc(16 / var(--inner) * 100vw), 16px); height:auto;}
.modal-direction.prev {left:calc(var(--space-110) * -1);}
.modal-direction.next {right:calc(var(--space-110) * -1);}
.modal-direction:hover {background:rgba(255,255,255,0.2);}