@charset "utf-8";
/* 서브공통 */
#contArea.bg-pb {padding-bottom: 0;}
.content-bg {background:linear-gradient(to top, #FAFAFA 85%, transparent 85%);}
.content-bg .contain { padding-bottom: var(--space-120);}

/********************* 회사소개 *********************/
/* 인사말 */
.greeting-content .flex {align-items: center; gap: var(--space-100);}
.greeting-content .greeting-img {flex-shrink: 0; width: clamp(400px, calc(660 / var(--inner) * 100vw), 660px); margin: 0;}
.greeting-content .greeting-txt-wrap {display: flex; flex-direction: column; gap: var(--space-50); width: clamp(400px, calc(491 / var(--inner) * 100vw), 491px);}
.greeting-content .head {display: flex; flex-direction: column; gap: var(--space-30);}
.greeting-content .label {font-size: var(--font-size-18); font-weight: 600; line-height: 1.45em; letter-spacing: -0.02em; color: var(--color-primary);}
.greeting-content .tit .line {font-size: var(--font-size-40); line-height: 1.2em; letter-spacing: -0.02em; color: var(--color-sub);}
.greeting-content .tit .line strong {font-weight: 700;}
.greeting-content .cont {font-size: var(--font-size-18); line-height: 1.4em; letter-spacing: -0.03em; color: #454545;}
.greeting-content .cont p {margin-bottom: var(--space-30);}
.greeting-content .cont p:last-child {margin-bottom: 0;}
.greeting-content .sign {font-size: var(--font-size-18); font-weight: 600; line-height: 1.4em; letter-spacing: -0.03em; color: var(--color-sub);}

/* 비전 및 경영이념 */
.vision-content .vhero {position: relative; width: 100%; height: clamp(220px, calc(350 / var(--inner) * 100vw), 350px); margin: 0 auto; overflow: hidden; margin-bottom: var(--space-80);}
.vision-content .vhero .img {position: absolute; inset: 0; margin: 0;}
.vision-content .vhero .img img {width: 100%; height: 100%; object-fit: cover;}
.vision-content .vhero .inner {position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: space-between; box-sizing: border-box; padding:var(--space-50) var(--space-60);}
.vision-content .vhero .label {font-size: var(--font-size-20); font-weight: 700; line-height: 1.7em; letter-spacing: -0.03em; color: #fff;}
.vision-content .vhero .cont {font-size: var(--font-size-18); font-weight: 600; line-height: 1.56em; letter-spacing: -0.03em; color: #fff;}
.vision-content .vlist {display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0;}
.vision-content .vlist .card {display: flex; flex-direction: column; align-items: center; box-sizing: border-box; padding: 0 var(--space-16); text-align: center;}
.vision-content .vlist .num {font-size: var(--font-size-18); font-weight: 700; line-height: 1.2em; letter-spacing: -0.03em; color: var(--color-primary);}
.vision-content .vlist .tit {margin-top: var(--space-20); font-size: var(--font-size-24); font-weight: 700; line-height: 1.2em; letter-spacing: -0.03em; color: #222;}
.vision-content .vlist .ico {display: flex; align-items: center; justify-content: center; width: 96px; height: 96px; margin:var(--space-30) 0;}
.vision-content .vlist .ico img {max-width: 100%; max-height: 92px; width: auto; height: auto; object-fit: contain;}
.vision-content .vlist .desc {font-size: var(--font-size-16); font-weight: 400; line-height: 1.69em; letter-spacing: -0.03em; color: #484848;}
.vision-content .vlist .desc p {margin: 0;}

/* 회사연혁 */
.history .item {display:flex;}
.history .item h3 {margin-bottom:40px; font-size: var(--font-size-72); font-weight: 700; letter-spacing: -.03em; line-height: 1.194em; color: var(--color-primary); text-align:left; width:200px; margin:-8px 0 0;}
.history .list {flex:1 1 auto; min-width:0; width:1%; padding:0 0 80px 250px; position:relative;}
.history .list:after {position:absolute; content:""; left:223px; top:6px; width:1px; height:100%; background:#ddd; z-index:-1;}
.history > .contain:last-of-type .list {padding-bottom:0;}
.history > .contain:last-of-type .list > li:last-child::after {content:""; position:absolute; left:-40px; top:23px; bottom:0; width:24px; height: 100%; background:#fff; z-index:1; pointer-events:none;}
.history .list > li {gap: 50px; margin-bottom:40px; display:flex; font-size: 18px; line-height:1.77em; position: relative;}
.history .list > li:before {position:absolute; content:""; background:#fff; top:7px; left:-35px; width:16px; height:16px; border-radius:100%; border:5px solid var(--color-primary);}
.history .list > li:last-child {margin-bottom:0;}
.history .list strong {min-width:73px; font-size:30px; font-weight: 700; color:var(--color-sub);}
.history .list > li > ul > li {font-size: 20px; line-height: 1.65em; color: #454545;}
.history .img {max-width: 1920px; margin: 0 auto; margin-bottom: var(--space-80);}

/* 찾아오시는 길 */
.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-40);}
.lct-item-wrap {display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-20) var(--space-50);}
.lct-item {display: flex; align-items: center; gap: var(--space-20);}
.lct-item .icon {width: 60px; height: 60px; flex-shrink: 0;}
.lct-item dl {font-size: var(--font-size-18); line-height: 1.383em;}
.lct-item dl dt {margin-bottom: var(--space-10); color: var(--color-primary);}
.lct-item dl dd {font-size: var(--font-size-18);}
.lct-item-wrap .flex {gap: var(--space-60);}
.lct-item.subway dd {align-items: center; gap: var(--space-12);}
.lct-item.subway dd span {font-size: 14px; font-weight: 500; color: #fff; background: #989383; padding: 2px 8px; border-radius: 100px;}

/********************* Business *********************/
/* 공통 */
.business-content {margin-bottom: var(--space-100);}
.business-content:last-child {margin-bottom: 0;}

.business-intro .img {margin-bottom: var(--space-70);}
.business-intro .row {display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: var(--space-40); padding: 0 var(--space-50);}
.business-intro .tit-wrap {flex: 1; min-width: min(100%, 400px);}
.business-intro .tit {font-size: var(--font-size-40); font-weight: 700; line-height: 1.43em; letter-spacing: -0.03em; color: var(--color-sub);}
.business-intro .cont {max-width: 650px; font-size: var(--font-size-18); line-height: 1.5em; letter-spacing: -0.03em; color: #454545;}

.si-features .list {display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-60); max-width: 1400px; margin: 0 auto; padding: 0; list-style: none;}
.si-features .item {display: flex; align-items: center; gap: var(--space-32);}
.si-features .ico {display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 100px; height: 100px; margin: 0; border: 1px solid #ddd; border-radius: 8px; background: #fff; box-sizing: border-box;}

.si-features .box {display: flex; flex-direction: column; gap: var(--space-16); flex: 1; min-width: 0;}
.si-features .tit {font-size: var(--font-size-24); font-weight: 700; line-height: 1.17em; letter-spacing: -0.01em; color: var(--color-sub);}
.si-features .txt {font-size: var(--font-size-18); line-height: 1.4em; letter-spacing: -0.03em; color: #454545;}

.business-cases {padding-top: var(--space-100); position: relative; background: url("../images/sub/business-bg.jpg") no-repeat top / 100%;}
.business-cases .stit {margin-bottom: var(--space-50); font-size: var(--font-size-40); font-weight: 700; line-height: 1.43em; letter-spacing: -0.03em; color: #fff;}
.business-cases .list {display: flex; gap: 40px; flex-wrap: wrap;}
.business-cases .list .item {flex: 1;}
.business-cases .card {flex: 1; display: flex; flex-direction: column; gap: var(--space-40);}
.business-cases .box {display: flex; flex-direction: column; gap: var(--space-16);}
.business-cases .tit {font-size: var(--font-size-24); font-weight: 700; line-height: 1.13em; letter-spacing: -0.03em; color: var(--color-sub);}
.business-cases .txt {font-size: var(--font-size-18); line-height: 1.5em; letter-spacing: -0.03em; color: #454545;}

.business-cta {position: relative; overflow: hidden; margin-bottom: 0;}
.business-cta .bg {position: absolute; inset: 0;}
.business-cta .img {margin: 0; width: 100%; height: 100%;}
.business-cta .img img {display: block; width: 100%; height: 100%; object-fit: cover;}
.business-cta .inner {position: relative; z-index: 1; display: flex; justify-content: center; align-items: center; padding: var(--space-100) var(--space-20);}
.business-cta .box {display: flex; flex-direction: column; align-items: center; gap: var(--space-40); max-width: 900px; text-align: center;}
.business-cta .tit {font-size: var(--font-size-40); font-weight: 700; line-height: 1.43em; letter-spacing: -0.03em; color: #fff;}
.business-cta .txt {font-size: var(--font-size-18); line-height: 1.4em; letter-spacing: -0.03em; color: #eee;}

/* it운영지원 */
.business-intro .row.type2 {padding: 0 88px;}
.business-cases.type2 .contain {display: flex; justify-content: flex-end; gap: var(--space-70);}

/********************* Product *********************/
.product-tab {display: flex; gap: var(--space-25); margin-bottom: var(--space-60); flex-wrap: wrap;}
.product-tab li a {font-size: var(--font-size-24); font-weight: 500; line-height: 1.083em; letter-spacing: -0.03em; color: #B4B4B4;}
.product-tab li.active a {font-weight: 700; color: var(--color-primary); text-decoration: underline; text-underline-offset: 3px;}
.product-tab li a:hover {color: var(--color-primary);}

.prod-top {display: flex; align-items: center; justify-content: center; gap: var(--space-70); margin-bottom: var(--space-80);}
.prod-top:last-child {margin-bottom: 0;}
.prod-top .img {flex-shrink: 0; width: clamp(400px, calc(760 / var(--inner) * 100vw), 760px); margin: 0;}
.prod-top .img > div {position:relative; padding-bottom:62%; overflow:hidden;}
.prod-top .img > div:after {content:""; position:absolute; top:0; left:0; right:0; bottom:0; border:1px solid #ddd;}
.prod-top .img 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:contain;}
.prod-top .txt .tit {font-size: var(--font-size-32); font-weight: 700; line-height: 1.2em; letter-spacing: -0.03em; color: #222; margin-bottom: var(--space-30);}
.prod-top .txt .desc {font-size: var(--font-size-16); line-height: 1.375em; letter-spacing: -0.03em; color: #454545;}

.product-list {padding:var(--space-80) 0 0 0; border-top:1px solid #ddd;}
.product-list ul li .desc {color:#454545; font-size:16px; line-height:1.375em; margin-top:12px;}
.product-summary {padding-bottom: var(--space-60); border-bottom:1px solid #ddd;}

/********************* Partner *********************/
.partner-list {display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-40) var(--space-30);}
.partner-list .item {position: relative;}
.partner-list .item .img {border-radius: 16px; overflow: hidden;}
.partner-list .item .img:after {content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 16px; border:1px solid #ddd;}
.partners-wrap {margin-bottom: var(--space-100);}
.partners-wrap:last-child {margin-bottom: 0;}
.partners-wrap .tit {font-size: var(--font-size-24); font-weight: 700; line-height: 1.167em; letter-spacing: -0.03em; color: var(--color-sub); margin-bottom: var(--space-24);}