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

.doc-cnt {color:#484848;}
.doc-cnt:not(:last-child) {margin-bottom:var(--space-120);}
.doc-cnt.bg {padding:var(--space-100) 0; background:#F7F9FC;}

.doc-tit {margin-bottom:var(--space-70); color:#222; font-size:var(--font-size-36); line-height:1.3em; letter-spacing:-.03em; text-align:center;}

.s-tit {position:relative; padding-left:20px; margin-bottom:var(--space-30); font-size:var(--font-size-28); font-weight:600; line-height:1.3em; letter-spacing:-.03em; color:var(--color-primary);}
.s-tit:before {content:""; position:absolute; top:.25em; left:0; width:10px; aspect-ratio:1/2; background:url('/images/sub/bullet.svg') 50% 50% / contain no-repeat;}

.sub-top-box {padding:var(--space-60); border-radius:var(--radius-16); background:#fff; box-shadow:0 0 16px 0 rgba(0, 0, 0, 0.08); font-size:var(--font-size-20); font-weight:500; line-height:1.78em; letter-spacing:-.03em; text-align:center;}
.sub-top-box.st2 {padding:var(--space-40); font-size:var(--font-size-28); line-height:1.5em; color:#222;}
.sub-top-box em {font-style:normal; opacity:0.24; font-family:serif; font-weight:700; color:var(--color-primary);}
.sub-top-box .han {margin-bottom:var(--space-30); font-family:ChosunGs; font-size:clamp(28px, calc(60 / var(--inner) * 100vw), 60px); line-height:1.3em; letter-spacing:-.03em;}
.sub-top-box .lg-txt {margin-bottom:var(--space-10); font-weight:600;}
.sub-top-box .sm-txt {font-size:var(--font-size-16); font-weight:400;}

/* COMPANY */
.greetings .img {border-radius:var(--radius-24); overflow:hidden; margin-bottom:var(--space-60);}
.greetings .wrap {display:flex; flex-wrap:wrap; justify-content:space-between; gap:var(--space-50); margin-left:var(--space-40); max-width:1135px;}
.greetings .left p {font-size:var(--font-size-28); font-weight:600; line-height:1.5em; letter-spacing:-.03em; color:var(--color-primary);}
.greetings .right {width:100%; max-width:685px; color:#484848;}
.greetings .sign {display:flex; gap:10px; align-items:center; margin-top:var(--space-40);}
.greetings .sign strong {font-weight:600;}
.greetings .sign img {vertical-align:middle;}

.company-overview .txt-1 {margin-bottom:var(--space-60); font-size:var(--font-size-24); font-weight:600; line-height:1.5em; letter-spacing:-.03em; text-align:center;}
.company-overview .txt-2 {margin-bottom:var(--space-40); border-radius:var(--radius-16); padding:var(--space-40); background:#fff;  box-shadow:0 0 16px 0 rgba(0, 0, 0, 0.08);
font-size:var(--font-size-28); font-weight:500; line-height:1.5em; letter-spacing:-.03em; color:var(--color-primary); text-align:center;}
.company-overview .txt-2 em {font-style:normal; opacity:0.24; font-family:serif; font-weight:700;}
.company-overview .txt-3 {margin-bottom:var(--space-100); color:#484848; text-align:center;}

.history {position:relative;}
.history:before {content:""; position:absolute; bottom:0; right:0; z-index:-1; width:clamp(120px, calc(240 / var(--inner) * 100vw), 240px); aspect-ratio:240/233; background:url("/images/sub/logo-gray.png") 50% 50%/contain no-repeat;}
.history .group {display:flex;}
.history .group .year {min-width:150px; position:relative; top:-.1em; font-size:var(--font-size-32); font-weight:700; line-height:1em; letter-spacing:-.03em;}
.history .group .list {flex:1; position:relative; border-left:1px solid #ddd; padding-left:70px; padding-bottom:80px; color:#484848; line-height:1.5em;}
.history .group .list:before {content:""; position:absolute; top:0; left:-12px; width:24px; height:24px; background:url("/images/sub/history-bullet.svg") 50% 50% / contain no-repeat;}
.history .group .list ul {display:grid; gap:var(--space-16);}
.history .group .list ul li {display:flex;}
.history .group .list ul li .month {min-width:94px; color:var(--color-primary); font-weight:600;}
.history .group .list ul li .text {flex:1;}
.history .group:last-child .list {padding-bottom:40px;}

.vision {position:relative; display:flex; max-width:1050px; margin:0 auto; text-align:center;}
.vision .item {flex:1; position:relative; display:flex; align-items:center; justify-content:center; aspect-ratio:1/1; margin:0 -1px; padding:var(--space-40); background:#fff; border-radius:300px; border:2px solid #ddd;}
.vision .item .inner {display:flex; flex-direction:column; align-items:center; gap:var(--space-30);}
.vision .item .txt {font-size:var(--font-size-20); font-weight:500; line-height:1.7em; letter-spacing:-.03em;}
.vision .outline {position:absolute; inset:0; width:100%; height:100%; display:flex; pointer-events:none;}
.vision .outline div {flex:1; height:50%; margin:0 -1px; border:2px solid var(--color-primary); border-bottom:0; border-radius:300px 300px 0 0;}
.vision .outline div:nth-child(2) {-webkit-transform:translateY(100%) scaleY(-1); transform:translateY(100%) scaleY(-1);}

.strategy {display:grid; grid-template-columns:repeat(3, 1fr); gap:var(--space-20); text-align:center;}
.strategy .item {display:flex; flex-direction:column; align-items:center; gap:var(--space-30); padding:var(--space-60) var(--space-20); border-radius:var(--radius-24); background:#fff; box-shadow:0 0 16px 0 rgba(0, 0, 0, 0.08);}
.strategy .item .txt {font-size:var(--font-size-20); font-weight:500; line-height:1.7em; letter-spacing:-.03em;}

.slideshow {position:relative; overflow:hidden; }
.slideshow .items {position:relative; overflow:hidden;}
.slideshow .item {opacity:0.24; transition:.2s; text-align:center;}
.slideshow .item .img {position:relative; width:100%; aspect-ratio:4/3; overflow:hidden; border-radius:var(--radius-16);}
.slideshow .item .img img {position:absolute; inset:0; width:100%; height:100%; object-fit:cover;}
.slideshow .item .txt {margin-top:var(--space-30); font-size:var(--font-size-28); font-weight:600; line-height:1.3em; letter-spacing:-.03em;}
.slideshow .slick-slide {width:880px; padding:0 140px;}
.slideshow .slick-current .item {opacity:1;}
.slideshow .slick-arrow {position:absolute; top:45%; display:flex; align-items:center; justify-content:center; -webkit-transform:translateY(-50%); transform:translateY(-50%); z-index:30; width:var(--space-80); height:var(--space-80); background:#fff; border:2px solid #ddd; border-radius:100%; color:#ddd; font-size:var(--font-size-40); line-height:1.5em; font-weight:600; transition:.2s;}
.slideshow .slick-arrow:hover {background:var(--color-primary); border-color:var(--color-primary); color:#fff;}
.slideshow .slick-prev {left:50%; margin-left:-480px;}
.slideshow .slick-next {right:50%; margin-right:-480px;}

/* PRODUCT */
.prod-info {display:flex; flex-wrap:wrap; gap:var(--space-30); padding:var(--space-50) 0; border-bottom:1px solid #ddd;}
.prod-info:first-child {border-top:1px solid #ddd;}
.prod-info .title {min-width:clamp(260px, calc(395 / var(--inner) * 100vw), 395px); }
.prod-info .title .s-tit {margin-bottom:0;}
.prod-info .content {flex:1; padding-top:4px;}
.prod-info .content table {width:100%; border-collapse:collapse; border-spacing:0px; border-top:2px solid #868686; color:#222;}
.prod-info .content table th,
.prod-info .content table td {padding:14px 20px; border:1px solid #ddd;}
.prod-info .content table thead th {color:#222; font-weight:600; line-height:1.3em; letter-spacing:-.03em; background:#fafafa;}
.prod-info .content table tbody th {font-weight:400;}
.prod-info .content table tr th:first-child,
.prod-info .content table tr td:first-child {border-left:0;}
.prod-info .content table tr th:last-child,
.prod-info .content table tr td:last-child {border-right:0;}
.prod-info .content dl {position:relative; padding-left:15px;}
.prod-info .content dl:before {content:""; position:absolute; top:.675em; left:0; width:5px; height:5px; background:var(--color-primary); border-radius:100%;}
.prod-info .content dl dt {font-weight:600;}
.prod-info .content .tt {position:relative; padding-left:15px; font-weight:600;}
.prod-info .content .tt:before {content:""; position:absolute; top:.675em; left:0; width:5px; height:5px; background:var(--color-primary); border-radius:100%;}
.prod-info .content .items {display:grid; grid-template-columns:repeat(3, 1fr); gap:var(--space-10); margin-top:var(--space-10);}
.prod-info .content .items .item {display:flex; flex-direction:column; border:1px solid #ddd; border-radius:var(--radius-8); overflow:hidden; text-align:center;}
.prod-info .content .items .item .img {border-bottom:1px solid #ddd;}
.prod-info .content .prod-imgs {gap:var(--space-20); max-width:700px;}
.prod-info .content .link {text-decoration:underline; color:var(--color-primary); font-weight:500;}

.prod-info .content .items .item .txt {display:flex; flex-direction:column; justify-content:center; align-items:center; flex:1; min-height:4em; height:1%; padding:12px 8px; line-height:1.3em; color:#484848}

.prod-notice {margin-top:var(--space-20); color:var(--color-primary); font-weight:600; line-height:1.5em;}

.prod-imgs {display:grid; grid-template-columns:repeat(2, 1fr); gap:var(--space-30);}

/* 지속가능경영 */
.mission {padding:var(--space-90) 0; background:url("/images/sub/mission-bg.jpg") 50% 50% / cover no-repeat; text-align:center; color:#fff;}
.mission .doc-tit {margin-bottom:var(--space-30); color:#fff;}
.mission p {font-size:var(--font-size-20); font-weight:600; line-height:1.5em; letter-spacing:-.03em;}

.core-value {display:grid; grid-template-columns:repeat(3, 1fr); gap:var(--space-20); text-align:center;}
.core-value .item {display:flex; flex-direction:column; align-items:center; gap:var(--space-20); padding:var(--space-60) var(--space-20); border-radius:var(--radius-24); background:#fff; box-shadow:0 0 16px 0 rgba(0, 0, 0, 0.08);}
.core-value .item .img {margin-bottom:var(--space-10);}
.core-value .item .tit {font-size:var(--font-size-20); font-weight:600; line-height:1.5em; letter-spacing:-.03em;}

.equipments {display:grid; grid-template-columns:repeat(3, 1fr); gap:var(--space-40); text-align:center;}
.equipments .item .img {margin-bottom:var(--space-20); border:1px solid #ddd; border-radius:var(--radius-16); overflow:hidden;}
.equipments .item .txt {font-size:var(--font-size-20); font-weight:600; line-height:1.3em; letter-spacing:-.03em;}

/* SUPPORT */
.recruit-info .heading {margin-bottom:var(--space-120); text-align:center;}
.recruit-info .heading .doc-tit {margin-bottom:var(--space-30);}
.recruit-info .content:not(:last-child) {margin-bottom:var(--space-80);}
.recruit-info .text-box {border:1px solid #ddd; border-radius:var(--radius-16); padding:var(--space-24); text-align:center;}
.recruit-info .step {display:grid; grid-template-columns:repeat(5, 1fr); gap:var(--space-20);}
.recruit-info .step-item {display:flex; flex-direction:column; align-items:center; gap:var(--space-20); padding:var(--space-40); border:1px solid #ddd; border-radius:var(--radius-16); font-size:var(--font-size-20); font-weight:600; line-height:1.3em; letter-spacing:-.03em;}
.recruit-info .step-item:nth-child(1) .num {color:#B1D0EE;}
.recruit-info .step-item:nth-child(2) .num {color:#57A2EB;}
.recruit-info .step-item:nth-child(3) .num {color:#398BDD;}
.recruit-info .step-item:nth-child(4) .num {color:#3679BC;} 
.recruit-info .step-item:nth-child(5) .num {color:#0055A9;}

.recruit-info-2 {display:grid; grid-template-columns:repeat(2, 1fr); gap:var(--space-20);}
.recruit-info-2 .box {display:flex; flex-direction:column; align-items:center; gap:var(--space-20); padding:var(--space-40); border:1px solid #ddd; border-radius:var(--radius-16); font-size:var(--font-size-20); font-weight:600; line-height:1.3em; letter-spacing:-.03em;}
.recruit-info-2 .box .tit {color:var(--color-primary);}

.contact-info {display:grid; grid-template-columns:repeat(3, 1fr); gap:var(--space-20); text-align:center;}
.contact-info .box {display:flex; flex-direction:column; align-items:center; gap:var(--space-40); padding:var(--space-60); border-radius:var(--radius-32); box-shadow: 0 0 16px 0 rgba(0, 0, 0, 0.08);}
.contact-info .box .tit {margin-bottom:var(--space-20); font-size:var(--font-size-24); font-weight:600; line-height:1.3em; letter-spacing:-.03em; color:var(--color-primary);}

.map-wrap .root_daum_roughmap {border-radius:var(--radius-16); overflow:hidden; width:100% !important;}
.map-wrap .root_daum_roughmap .map_border,
.map-wrap .root_daum_roughmap .wrap_controllers,
.map-wrap .root_daum_roughmap .cont {display:none;}

.location-info {display:flex; flex-wrap:wrap; justify-content:space-between;  align-items:center; gap:var(--space-30); margin-top:var(--space-40); color:#484848;}
.location-info .address {font-size:var(--font-size-20); font-weight:600; line-height:1.3em; letter-spacing:-.03em;}

.location-info .txt {display:flex; align-items:center; gap:var(--space-10);}
.location-info .tel-wrap {display:flex;  gap:var(--space-30) var(--space-80);}