@charset "utf-8";
/* 서브공통 */
.doc-top-label {font-size: var(--font-size-20); font-weight: 600; line-height: 1.7em; color: var(--color-primary);}
.doc-top-tit {margin-top: var(--space-16); font-size: var(--font-size-44); line-height: 1.363em; color: var(--color-sub); font-weight: 600;}
.bg-color {background-color: #FAFAFA;}

.com-tab ul {display: flex; align-items: center; justify-content: center; gap: var(--space-48); margin-bottom: var(--space-80); border-bottom: 2px solid #EEE;}
.com-tab ul li {text-align: center;}
.com-tab ul li a {display: block; padding-bottom: 14px; font-size: var(--font-size-20); font-weight: 600; line-height: 1.7em; color: #878787; transition: .4s;}
.com-tab ul li.active a {position: relative; color: var(--color-primary);}
.com-tab ul li.active a:after {content: ""; position: absolute; bottom: -2px; left: 0; width: 100%; height: 2px; background: var(--color-primary);}

/********************* 회사소개 *********************/
/* 인사말 */
.greeting-cont {align-items: flex-start; gap: var(--space-120);}
.greeting-img {width: 46%; max-width: fit-content; border-radius: var(--radius-16); overflow: hidden;}
.greeting-desc-wrap {flex: 1; display: flex; flex-direction: column;}
.greeting-company {height: 70px; display: flex; align-items: center; justify-content: flex-end; margin-bottom: 6px;}
.greeting-desc {margin-top: var(--space-48); font-size: var(--font-size-18); line-height: 1.777em;}
.greeting-desc p {margin-bottom: var(--space-24);}
.greeting-desc p:last-child {margin-bottom: 0;}
.greeting-desc-wrap .sign {margin-top: var(--space-48); font-size: var(--font-size-20); font-weight: 600; line-height: 1.7em; color: var(--color-sub);}

/* 비전 */
.vision-txt-wrap {align-items: flex-start; min-height: 400px; padding: var(--space-48);background: url(/images/sub/vision.jpg?v=1) no-repeat center / cover; border-radius: var(--radius-16); }
.vision-label {display: inline-block; padding: var(--space-8) var(--space-24); background-color: rgba(255, 255, 255, 0.16); border-radius: 8px; font-size: var(--font-size-16); font-weight: 600; line-height: 1.5em; color: #fff;}
.vision-txt .vision-tit {font-size: var(--font-size-28); line-height: 1.5em; color: #fff;}
.vision-txt .vision-desc {margin-top: var(--space-24); font-size: var(--font-size-18); line-height: 1.777em; color: #fff;}
.core-value-list {flex-wrap: wrap; align-items: stretch; gap: 20px 0;}
.core-value-item {flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--space-24); padding: var(--space-48) 12px var(--space-48) 0; border-left: 1px solid #dfdfdf;}
.core-value-head {display: flex; flex-direction: column; gap: 12px; position: relative;padding-left: var(--space-24); border-left: 1px solid transparent;}
.core-value-head:before {content: ""; position: absolute; left: -2px; top: 0; width: 1px; height: 100%; background-color: var(--color-primary); opacity: 0; transition: opacity 0.3s ease;}
.core-value-item:hover .core-value-head:before {opacity: 1;}
.core-value-item .icon {display: flex; align-items: center; justify-content: center; width: 48px; height: 48px;}
.core-value-item .icon img {display: block; max-width: 100%; max-height: 100%;}
.core-value-item .tit {font-size: var(--font-size-24); font-weight: 600; line-height: 1.666em; letter-spacing: -0.02em; color: #2c2c2c; transition: color 0.3s ease;}
.core-value-item:hover .tit {color: var(--color-primary);}
.core-value-item .desc {padding-left: var(--space-24); font-size: var(--font-size-16); line-height: 1.75em; letter-spacing: -0.02em; color: #505050;}

/********************* 회사연혁 *********************/
.history-content {padding-bottom: var(--space-100);}
.history-img {margin-bottom: var(--space-28); border-radius: var(--radius-24); overflow: hidden; max-width: fit-content;}
.history-img img {min-height: 200px; object-fit: cover;}
.history-item {display: flex; align-items: start;}
.history-item .year-wrap {flex: 1; max-width: 480px; position:relative;}
.history-item .year-wrap:before {position:absolute; content:""; top:10px; right:-15px; width:32px; height:32px; border-radius:100%; border:8px solid transparent; background:linear-gradient(#fff, #fff) padding-box, linear-gradient(180deg, #D42C31 0%, #A42226 100%) border-box;}
.history-item .year-tit {font-size: var(--font-size-40); font-weight: 600; line-height: 1.35em; color: var(--color-sub);}
.history-item .year {display: block; margin-top: var(--space-14); font-size: var(--font-size-28); font-weight: 500; line-height: 1.5em; color: #878787;}
.history-list-wrap {flex:1; min-width:0; width:1%; padding:11px 0 var(--space-100) 100px; position:relative;}
.history-item:last-child .history-list-wrap {padding-bottom: 0;}
.history-tit {margin-bottom: var(--space-20); font-size: var(--font-size-24); font-weight: 600; line-height: 1.666em; color: #2c2c2c;}
.history-list-wrap:after {position:absolute; content:""; left:0; top:10px; width:0; height:100%; border-left:1px dashed #ccc; z-index:-1;}
.history-list li {margin-bottom:8px; display:flex; font-size: var(--font-size-18); line-height:1.777em;}
.history-list li:last-child {margin-bottom: 0;}
.history-list li {display: flex; align-items: flex-start; gap: 8px;}
.history-list li:before {content: ''; flex-shrink: 0; display: inline-block; width: 4px; height: 4px; margin-top: 14px; background: var(--color-primary); border-radius: 100%;}
.history-tag {display: flex; flex-wrap: wrap; gap: 8px; margin-top: var(--space-28);}
.history-tag li {padding: 4px var(--space-16); background-color: #FDF5F5; border-radius: 100px; font-size: var(--font-size-16); font-weight: 500; line-height: 1.5em; color: #D42C31;}

/* 조직도 */
.organization-img {text-align: center;}

/* 찾아오시는 길 */
.root_daum_roughmap {width: 100% !important;}
.root_daum_roughmap .wrap_map {height: 500px !important;}
.root_daum_roughmap .wrap_controllers {display: none !important;}
.map {margin-bottom: var(--space-36); border-radius: var(--radius-16); overflow: hidden;}

.lct-tit {margin-bottom: var(--space-36); font-size: var(--font-size-32); font-weight: 600; line-height: 1.437em; color: #2c2c2c;}
.lct-item-wrap {flex-wrap: wrap; gap: 20px 0;}
.lct-item {display: flex; align-items: center; gap: var(--space-24); min-width: 270px;}
.lct-item .icon-wrap {display: flex; align-items: center; justify-content: center; width: 72px; height: 72px; flex-shrink: 0; border-radius: 8px; border: 1px solid #eee;}
.lct-item .icon {width: 24px; height: 24px;}
.lct-item dl dt {margin-bottom: 8px; color: var(--color-primary); font-size: var(--font-size-18); line-height: 1.77em;font-weight: 600;}
.lct-item dl dd { font-size: var(--font-size-16); line-height: 1.5em; font-weight: 500;}

/********************* 사업분야 *********************/

.business-list {padding:40px 0 0 0; border-bottom:1px solid #ddd; border-top:2px solid #686868;}
.business-list ul {display:flex; flex-wrap:wrap; margin:0 -14px;}
.business-list ul li {width:25%; padding:0 14px; margin-bottom:28px; text-align:center;}
.business-list ul li.none {width:100%; padding:70px 0; margin:0; text-align:center; color:#767676;}
.business-list ul li a {display:block;}
.business-list ul li .thumb {position:relative; padding-bottom:133.5%; margin-bottom:24px; border-radius: var(--radius-16); overflow:hidden;}
.business-list ul li .thumb img {position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); -ms-transform:translate(-50%,-50%); -webkit-transform:translate(-50%,-50%); width:auto !important; height:auto !important; max-width:100%; max-height:100%; object-fit:contain;}
.business-list ul li .thumb:after {content:""; position:absolute; top:0; left:0; right:0; bottom:0; border-radius: var(--radius-16); border:1px solid rgba(0,0,0,.08);}
.business-list ul li .tit {display: flex; justify-content: center; gap: 12px; color:#2c2c2c; font-size:20px; line-height:1.7em; font-weight: 600; transition: .4s;}
.business-list ul li a:hover .tit {justify-content: space-between; color: var(--color-primary);}
.business-list ul li .tit:after {content: ""; display: none; width: 32px; height: 32px; background: #D42C31 url(../images/sub/business-icon.svg) no-repeat center / 16px; border-radius: 100%; flex-shrink: 0;}
.business-list ul li a:hover .tit:after {display: block;}
.business-list ul li .date {color:#767676; font-size:14px; line-height:1.3em; margin-top:6px;}

/* 상세페이지 */
.business-view-top {display: flex; align-items: flex-start; gap: var(--space-120); margin-bottom: var(--space-120);}
.business-slider {position: relative; width: 46%; max-width: 640px; border: 1px solid #EEE;}
.business-slide {background: #fff;}
/* @ 이미지 구석으로 가는 현상이 있어서 임시로 넣음 */
.business-slide .img {display: flex; align-items: center; justify-content: center; width: 100%; aspect-ratio: 1 / 1; margin: 0; overflow: hidden;}
.business-slide .img img {width: 100%; height: 100%; object-fit: contain;}
/* @ 여기까지 */
.biz-nav {position: absolute; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; background: #fff url(../images/sub/business-arrow.svg) no-repeat center / 14px; border: 1px solid #EEE; backdrop-filter: blur(12px); border-radius: 4px; transition: .4s; z-index: 1;}
.biz-nav.biz-next {right: var(--space-28); transform: translateY(-50%) rotate(180deg);}
.biz-nav.biz-prev {left: var(--space-28);}
.biz-nav:hover {background-color: #121212; background-image: url(../images/sub/business-arrow-active.svg);}
.biz-nav.swiper-button-disabled {opacity: 0.5; pointer-events: none;}
.business-pagination .swiper-pagination-bullet-active {background: var(--color-primary);}

.business-info {flex: 1; padding-top: var(--space-20);}
.business-info .cate {font-size: var(--font-size-18); font-weight: 600; line-height: 1.777em; color: var(--color-primary); }
.business-info .tit {margin-top: 10px; font-size: var(--font-size-42); font-weight: 600; line-height: 1.38em; color: var(--color-sub);}
.business-info .desc {margin-top: var(--space-24); font-size: var(--font-size-18); line-height: 1.777em; color: #505050;}
.business-spec-wrap {display: flex; flex-direction: column; gap: 16px;}
.business-spec-box {padding: var(--space-24) var(--space-28); border-radius: var(--radius-16); background: #fafafa; border: 1px solid #eee;}
.business-spec-tit {font-size: var(--font-size-16); font-weight: 600; line-height: 1.5em; letter-spacing: -0.02em; color: #878787;}
.business-spec-list {margin-top: var(--space-20); align-items: flex-start;}
.business-spec-list ul {display: flex; flex-wrap: wrap; gap: 10px 0;}
.business-spec-list li {flex: 1 1 50%; min-width: 0; display: flex; align-items: flex-start; gap: 8px; padding-right: 10px; font-size: var(--font-size-18); line-height: 1.666em; letter-spacing: -0.02em; color: #2c2c2c;}
.business-spec-list li:before {content: ''; flex-shrink: 0; width: 4px; height: 4px; border-radius: 100%; background: var(--color-primary); margin-top: 13px;}
.business-btn-wrap {margin-top: var(--space-24); display: flex; gap: var(--space-10);}
.business-btn {flex: 1; max-width: 350px; display: flex; align-items: center; justify-content: center; padding: 16px; border-radius: 8px; border: 1px solid #eee; color: #2C2C2C; font-size: var(--font-size-18); font-weight: 600; line-height: 1.777em; letter-spacing: -0.02em; text-align: center;}
.business-btn.type2 {max-width: 142px;}
.business-btn.focus {background: var(--color-primary); border: 1px solid var(--color-primary); color: #fff;}
.business-detail-wrap {margin-bottom: var(--space-120);}
.business-detail-tit {padding-bottom: var(--space-24); border-bottom: 1px solid #dfdfdf; font-size: var(--font-size-32); font-weight: 600; line-height: 1.437em; color: #2c2c2c;}
.business-detail {margin-top: var(--space-40);}
.business-detail .img {margin-top: var(--space-20);}

/********************* 사업실적 *********************/
.project-list {padding:40px 0 0 0; border-bottom:1px solid #ddd; border-top:2px solid #686868;}
.project-list ul {display:flex; flex-wrap:wrap; margin:0 -14px;}
.project-list ul li {width:33.333%; padding:0 14px; margin-bottom:56px; text-align:center;}
.project-list ul li.none {width:100%; padding:70px 0; margin:0; text-align:center; color:#767676;}
.project-list ul li a {display:block;}
.project-list ul li .thumb {position:relative; padding-bottom:75%; margin-bottom:24px; border-radius: var(--radius-16); overflow:hidden;}
.project-list ul li .thumb img {position:absolute; top:50%; left:0; transition:.4s ease-in-out; transform:translateY(-50%); -ms-transform:translateY(-50%); -webkit-transform:translateY(-50%); width:100%; height:auto !important; max-width:100%; min-height:100%; object-fit:cover;}
.project-list ul li .thumb:after {content:""; position:absolute; top:0; left:0; right:0; bottom:0; border-radius: var(--radius-16); border:1px solid rgba(0,0,0,.08);}
.project-list ul li .tit {color:#2c2c2c; font-size:20px; line-height:1.7em; font-weight: 600;}
.project-list ul li .date {color:#484848; font-size:16px; line-height:1.3em; margin-top:12px;}


/********************* 커뮤니티 *********************/
.archive-list ul {display:flex; flex-wrap:wrap; margin:0 -20px;}
.archive-list ul li {width:25%; padding:0 20px; margin-bottom:40px; text-align:center;}
.archive-list ul li.none {width:100%; padding:70px 0; margin:0; text-align:center; color:#767676;}
.archive-list ul li a {display:block;}
.archive-list ul li .thumb {position:relative; padding-bottom:141.6%; margin-bottom:24px; border-radius: var(--radius-16); overflow:hidden;}
.archive-list ul li .thumb img {position:absolute; top:50%; left:0; transition:.4s ease-in-out; transform:translateY(-50%); -ms-transform:translateY(-50%); -webkit-transform:translateY(-50%); width:100%; height:auto !important; max-width:100%; min-height:100%; object-fit:cover;}
.archive-list ul li .thumb:after {content:""; position:absolute; top:0; left:0; right:0; bottom:0; border-radius: var(--radius-16); border:1px solid rgba(0,0,0,.06); background: transparent; transition:.4s;}
.archive-list ul li a:hover .thumb:after {background: rgba(0, 0, 0, 0.64);}
.archive-list ul li .thumb:before {content:""; position:absolute; top:50%; left:50%; transform: translate(-50%, -50%); width: 56px; height: 56px; background: #D42C31 url(../images/sub/down-icon.svg) no-repeat center / 24px; border-radius: 100%; opacity: 0; transition:.4s; z-index: 1;}
.archive-list ul li a:hover .thumb:before {opacity: 1;}
.archive-list ul li .tit {color:#2c2c2c; font-size:20px; line-height:1.7em; font-weight: 600;}


/********************* 견적문의 *********************/
.inquiry-btn {padding: var(--space-16) var(--space-30); font-size: var(--font-size-20); line-height: 1.7em; font-weight: 600; border: none; background: var(--color-primary); color: #fff; cursor: pointer;}