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

.sub-sec:not(:last-child) {margin-bottom:var(--space-120);}
.sub-sec.bg-gray {padding:var(--space-120) 0; background:#F6F6F6;}

.doc-tit {margin-bottom:var(--space-90); font-size:var(--font-size-36); line-height:1.3em; letter-spacing:-.01em; text-align:center;}

/* ABOUT */
.about-word {display:flex; justify-content:center; margin-bottom:var(--space-100);}
.about-word .inner {display:grid; gap:36px;  max-width:464px;}
.about-word .word-wrap {display:flex; align-items:center; gap:var(--space-50);}
.about-word .word-wrap .word {display:flex; flex-direction:column; align-items:center; gap:var(--space-15); width:122px; padding:23px 15px 15px 15px; background:#f0f0f0; border-radius:var(--radius-24); text-align:center;}
.about-word .word-wrap .word img {width:55px;}
.about-word .word-wrap .word p {font-weight:500; line-height:1.3em; letter-spacing:-.03em; color:#454545;}
.about-word .word-wrap .word p strong {font-size:1.13em;}
.about-word .word-wrap .meaning {flex:1; color:#454545; line-height:1.3em}
.about-word .word-wrap .meaning ol {display:flex; flex-wrap:wrap; gap:var(--space-30);}
.about-word .word-wrap .meaning ol li {position:relative; padding-left:30px;}
.about-word .word-wrap .meaning ol li .num {position:absolute; left:0; top:-.15em; display:flex; align-items:center; justify-content:center; min-width:24px; min-height:24px; background:#9F9F9F; border-radius:50%; font-size:var(--font-size-14); font-weight:700; line-height:1em; color:#fff;}

.about-text {padding-bottom:var(--space-30); text-align:center;}
.about-text p {font-size:var(--font-size-18); line-height:1.3em; letter-spacing:-.01em; color:#454545;}
.about-text p strong {font-size:1.13em;}
.about-text .text-1 {margin-bottom:var(--space-20); color:var(--color-primary); font-size:var(--font-size-20); font-weight:700; line-height:1.5em; letter-spacing:-.03em;}
.about-text .text-2 {margin-bottom:var(--space-50); color:#454545; font-size:var(--font-size-20); font-weight:700; line-height:1.5em; letter-spacing:-.03em;}
.about-text .text-3 {color:#454545; font-size:var(--font-size-16); font-weight:300; line-height:1.625em; letter-spacing:-.03em;}

.history {display:flex; justify-content:center;}
.history .group {position:relative; padding-left:var(--space-100); padding-bottom:var(--space-80);}
.history .group:before {content:''; position:absolute; left:5px; top:10px; width:1px; height:100%; background:#ddd; z-index:-1;}
.history .group:after {content:''; position:absolute; left:0; top:.3em; width:11px; height:11px; background:var(--color-primary); border-radius:50%;}
.history .group .date {margin-bottom:12px; font-size:var(--font-size-26); font-weight:700; line-height:1em; letter-spacing:-.01em;}
.history .group .text {font-size:var(--font-size-16); font-weight:300; line-height:1.6em; letter-spacing:-.03em; color:#454545;}
.history .group:last-child {padding-bottom:0;}
.history .group:last-child::before {height:6px;}

.people:not(:last-child) {margin-bottom:var(--space-80);}
.people h3 {margin-bottom:var(--space-40); font-size:var(--font-size-26); line-height:1.3em; letter-spacing:-.03em;}
.people .cards {display:grid; grid-template-columns:repeat(3, 1fr); gap:var(--space-24);}
.people .card {display:flex; flex-direction:column; gap:var(--space-15); padding:30px 40px; background:#fff; border-radius:var(--radius-24);}
.people .card .name {line-height:1.3em; letter-spacing:-.01em; color:#454545;}
.people .card .name strong {margin-right:var(--space-15); font-size:var(--font-size-20); line-height:1.3em; color:#242424;}
.people .card .position {font-weight:700; line-height:1.5em; letter-spacing:-.03em; color:var(--color-primary);}
.people .card .license {font-weight:500; line-height:1.5em; letter-spacing:-.03em; color:#454545;}

.root_daum_roughmap {width:100% !important;}
.root_daum_roughmap .cont {display:none;}

.location-info-wrap {display:flex; justify-content:space-between; gap:var(--space-50); margin-top:var(--space-50);}

.location-info h3 {margin-bottom:var(--space-30); font-size:var(--font-size-20); line-height:1.3em; letter-spacing:-.03em;}
.location-info .info {display:grid; gap:var(--space-24); color:#454545; line-height:1.5em;}
.location-info .info dl {display:flex; align-items:center; gap:var(--space-20);}
.location-info .info dt {display:flex; align-items:center; gap:12px; width:clamp(130px, calc(215 / var(--inner) * 100vw), 215px); font-size:var(--font-size-18); font-weight:700;}
.location-info .info dt i {display:flex; align-items:center; justify-content:center; width:40px; height:40px; background-color:var(--color-primary); background-position:50% 50%; background-repeat:no-repeat; background-size:24px auto;}
.location-info .info dt .icon-address {background-image:url("/images/sub/icon-map.svg");}
.location-info .info dt .icon-tel {background-image:url("/images/sub/icon-tel.svg");}
.location-info .info dt .icon-fax {background-image:url("/images/sub/icon-fax.svg");}
.location-info .info dt .icon-mail {background-image:url("/images/sub/icon-email.svg");}
.location-info .info dt .icon-instagram {background-image:url("/images/sub/icon-instagram.svg");}
.location-info .info dd {flex:1 1 auto; min-width:0; width:1%; font-weight:300;}

.location-img {width:40%; max-width:360px;}
.location-img img {border-radius:var(--radius-24);}

/* RECRUIT */
.recruit-info {max-width:742px; margin:0 auto;}
.recruit-info h2 {margin-bottom:var(--space-120); font-size:var(--font-size-32); line-height:1.3em; letter-spacing:-.03em; text-align:center;}
.recruit-info .group {padding:20px 0; line-height:1.625em; letter-spacing:-.03em; color:#454545; font-weight:300;}
.recruit-info .group:not(:last-child) {border-bottom:1px solid #454545;}
.recruit-info .group h3 {margin-bottom:8px; font-size:var(--font-size-18); font-weight:700; line-height:1.3em; letter-spacing:-.03em; color:#242424;}
.recruit-info .group ul {display:flex; flex-direction:column; gap:5px;}
.recruit-info .group ul li {position:relative; padding-left:.7em;}
.recruit-info .group ul li:before {content:''; position:absolute; left:0; top:.6em; width:4px; height:4px; background:#454545; border-radius:50%;}

/* PROJECTS - 목록 */
.project-list .none {padding:70px 0; text-align:center; color:#767676;}
.project-list .items {display:grid; grid-template-columns:repeat(4, 1fr); gap:var(--space-24);}
.project-list .item {display:block; position:relative;}
.project-list .item .thumb {position:relative; aspect-ratio:332/240; overflow:hidden;}
.project-list .item .thumb img {position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:.5s;}
.project-list .item .title {position:absolute; inset:0; width:100%; height:100%; padding:24px; font-size:var(--font-size-20); font-weight:700; line-height:1.3em; letter-spacing:-.03em; color:#fff; background:rgba(0,0,0,.3); transition:.2s;}

@media (hover: hover) and (pointer: fine) {
    .project-list .item .title {opacity:0;}
    .project-list .item:hover .thumb img {transform:scale(1.05);}
    .project-list .item:hover .title {opacity:1;}
}

.post-more {text-align:center; margin-top:50px;}
.post-more button {background:none; border:0;}

/* PROJECTS - 상세 */
.project-popup-content {position:relative; padding:clamp(20px, calc(52 / var(--inner) * 100vw), 52px); background:#fff;}
.project-popup-content .project-slider {margin-bottom:var(--space-40);}

.project-popup-close {padding:18px 0; text-align:right;}
.project-popup-close .modal-close {display:inline-flex; align-items:center; vertical-align:middle; gap:14px; font-size:16px; font-weight:700; line-height:1.2em; color:#fff;}
.project-popup-close .modal-close:before {content:'닫기';}
.project-popup-close .modal-close:after {content:''; width:20px; height:20px; background:url('/images/sub/pop-close.svg') 50% 50%/contain no-repeat;}

.project-btn {position:absolute; top:50%; z-index:20; -webkit-transform:translateY(-50%); transform:translateY(-50%); width:clamp(40px, calc(70 / var(--inner) * 100vw), 70px); height:clamp(40px, calc(70 / var(--inner) * 100vw), 70px); border:1px solid #fff; cursor:pointer; -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none; -webkit-user-drag:none; -moz-user-drag:none; user-drag:none;}
.project-btn:before {content:''; position:absolute; inset:0; background:url('/images/sub/pop-btn.svg') 50% 50% no-repeat;}
.project-btn:hover {background-color:var(--color-primary); border-color:var(--color-primary);}
.project-btn.prev {left:calc(0px - var(--space-100));}
.project-btn.next {right:calc(0px - var(--space-100));}
.project-btn.next:before {-webkit-transform:scaleX(-1); transform:scaleX(-1);}

.project-image {margin-bottom:var(--space-40);}
.project-image img {display:block; width:100%;}

.project-slider {position:relative; margin-bottom:var(--space-50);}
.project-slider .swiper {position:relative;}
.project-slider .swiper-slide img {display:block; width:100%; aspect-ratio:1400/720; object-fit:cover;}
.project-slider .swiper-button {width:30px; height:30px; margin-top:-15px; color:#fff;}
.project-slider .swiper-button:after {font-size:26px;}
.project-slider .swiper-button-prev {left:20px;}
.project-slider .swiper-button-next {right:20px;}
.project-slider .swiper-pager {margin-top:var(--space-40); font-size:var(--font-size-24); font-weight:700; line-height:1em;}

.project-content {max-width:1200px; margin:0 auto;}
.project-content .project-title {margin-bottom:var(--space-30);}

.project-title {display:flex; align-items:center; gap:var(--space-30); margin-bottom:var(--space-40);}
.project-title h2 {flex:1; font-size:var(--font-size-24); line-height:1.3em; letter-spacing:-.03em; display:flex; align-items:center;}
.project-title .more {display:inline-block; padding:8px 20px; border:1px solid #ddd; border-radius:60px; font-weight:600;}
.project-title .more:hover {color:#fff; background:#242424; border-color:#242424;}

.project-text {margin-bottom:var(--space-80);}

.project-detail dl {display:flex; gap:0 var(--space-20); padding:var(--space-20) 0;}
.project-detail dl:not(:last-child) {border-bottom:1px solid #ddd;}
.project-detail dl dt {width:clamp(100px, calc(220 / var(--inner) * 100vw), 220px); font-size:var(--font-size-18); font-weight:500; line-height:1.5em; letter-spacing:-.03em; color:#242424;}
.project-detail dl dd {flex:1; display:grid; align-items:center; gap:4px; font-size:var(--font-size-16); font-weight:500; line-height:1.5em; letter-spacing:-.03em; color:#454545;}

.project-button {text-align:center; margin-top:var(--space-80);}
.project-button .btn-back {display:inline-block; background:#242424; border-radius:60px; padding:18px 36px; color:#fff; font-size:var(--font-size-18); font-weight:700; line-height:1.3em; letter-spacing:-.03em;}