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

/* 공통 */
.point {color:var(--color-primary);}
.dot-list {display:flex; flex-direction:column;}
.dot-list li {position:relative; padding-left:20px; font-size:var(--font-size-18); line-height:1.7em;}
.dot-list li::before {content:""; position:absolute; top:0.6em; left:0; width:5px; height:5px; border-radius:50%; background:#ccc;}

/* 인사말 */
.greeting {display:flex; flex-direction:column; gap:var(--space-60);}
.greeting .visual {position:relative; padding:0 var(--space-30) var(--space-50) 0;}
.greeting .visual .photo {display:block; position:relative; z-index:2; overflow:hidden; height: clamp(150px, calc(480 / var(--inner) * 100vw), 480px); border-top-left-radius:clamp(40px, calc(160 / var(--inner) * 100vw), 160px);}
.greeting .visual .photo img {width:100%; height:100%; object-fit:cover;}
.greeting .visual .panel {position:absolute; top:var(--space-50); right:0; bottom:0; left:var(--space-50); z-index:1; background:linear-gradient(180deg, #51b3e5 0%, #24429a 100%);}
.greeting .visual .en {position:absolute; bottom:var(--space-14); left:var(--space-20); color:rgba(255,255,255,0.4); font-size:var(--font-size-16); font-weight:600; line-height:1.55; letter-spacing:8px;}
.greeting .text {display:flex; flex-direction:column; gap:var(--space-40);}
.greeting .lead p {font-size:var(--font-size-32); font-weight:600; line-height:1.4em;}
.greeting .bar {position:relative; width:100%; height:1px; background:#ddd;}
.greeting .bar::before {content:""; position:absolute; top:-1px; left:0; width:120px; height:3px; background:var(--color-primary);}
.greeting .desc {display:flex; flex-direction:column; gap:var(--space-26);}
.greeting .desc p {font-size:var(--font-size-18); line-height:1.78em;}
.greeting .desc .sign {font-size:var(--font-size-20); font-weight:600;}

/* 연혁 */
.history {display:flex; flex-direction:column; gap:var(--space-150);}
.history .intro {display:flex; align-items:flex-start; justify-content:space-between; gap:var(--space-100);}
.history .lead {flex-shrink:0; width:34.286%; display:flex; flex-direction:column;}
.history .lead .icon {display:block; width:clamp(35px, calc(55 / var(--inner) * 100vw), 55px); height:clamp(25px, calc(40 / var(--inner) * 100vw), 40px); margin-bottom: 12px;}
.history .lead .icon svg {width:100%; height:100%; object-fit:contain;}
.history .lead .tit {font-size:var(--font-size-48); font-weight:600; line-height:1.25em; color:#121212;}
.history .lead .desc {margin-top:var(--space-40); font-size:var(--font-size-18); line-height:1.67em;}
.history .lead .img {overflow:hidden; margin-top:var(--space-20); border-radius: var(--radius-16);}
.history .lead .img img {width:100%; height:100%; object-fit:cover;}
.history .timeline {position:relative; flex-shrink:0; width: calc(50% + (clamp(20px, calc(32 / var(--inner) * 100vw), 32px) / 2)); min-width:0; display:flex; flex-direction:column; gap:var(--space-100); padding-top:var(--space-20);}
.history .timeline::before {content:""; position:absolute; top:clamp(20px, calc(32 / var(--inner) * 100vw), 32px); bottom:0; left: calc(clamp(20px, calc(32 / var(--inner) * 100vw), 32px) / 2); width:1px; background:#d9d9d9;}
.history .timeline .year {position:relative; z-index:1; display:flex; align-items:center; gap:var(--space-20); margin-bottom:var(--space-30);}
.history .timeline .year .dot {flex-shrink:0; width:clamp(20px, calc(32 / var(--inner) * 100vw), 32px); height:clamp(20px, calc(32 / var(--inner) * 100vw), 32px); border-radius:50%; border: 8px solid #e4e8f2; background: var(--color-primary); font-size: 0;}
.history .timeline .year .bar {flex-shrink:0; width:clamp(30px, calc(60 / var(--inner) * 100vw), 60px); height:1px; background:#ddd; font-size: 0;}
.history .timeline .year strong {font-size:var(--font-size-32); font-weight:600; color:#121212;}
.history .timeline .dot-list {padding-left: calc(clamp(20px, calc(32 / var(--inner) * 100vw), 32px) + var(--space-100));}
.history .approval {display:flex; flex-direction:column; gap:var(--space-30);}
.history .approval .tit {font-size:var(--font-size-32); font-weight:600; line-height:1.3em; color:#121212;}
.history .approval .table {width:100%; border-top:2px solid var(--color-primary); border-collapse:collapse;}
.history .approval .table tr {border-bottom:1px solid #ddd;}
.history .approval .table tr:nth-child(even) {background:#f8f9fc;}
.history .approval .table th, .history .approval .table td {padding:var(--space-20); vertical-align:middle;}
.history .approval .year {text-align:center; font-size:var(--font-size-18); font-weight:600; color:var(--color-primary);}
.history .approval .cont {padding-left:var(--space-40);}


/* 비전 */
.vision {display:flex; flex-direction:column; gap:var(--space-150);}
.vision .top {display:flex; flex-direction:column; gap:var(--space-60);}
.vision .diagram {margin:0 auto;}
.vision .diagram img {width:100%; height:auto;}
.vision .item-list {display:flex; flex-direction:column; gap:var(--space-30);}
.vision .item-list li {display:flex; align-items:center; gap:var(--space-40); padding:var(--space-40); border-radius:var(--radius-16); background:#fff; box-shadow:6px 6px 15px rgba(0,0,0,0.1);}
.vision .item-list .badge {flex-shrink:0; display:inline-flex; align-items:center; justify-content:center; min-width:100px; padding: 4px var(--space-16); border-radius:32px; background:var(--color-primary); color:#fff; font-size:var(--font-size-16); font-weight:500; line-height: 1.5;}
.vision .item-list .bar {flex-shrink:0; width:1px; height:clamp(18px, calc(26 / var(--inner) * 100vw), 26px); background:#ddd;}
.vision .item-list .tit {flex-shrink:0; width:17%; font-size:var(--font-size-24); font-weight:600; color:#121212;}
.vision .item-list .desc {font-size:var(--font-size-18);}
.vision .goal {display:flex; flex-direction:column; gap:var(--space-40);}
.vision .goal .tit {font-size:var(--font-size-32); font-weight:600; line-height:1.3em; color:#121212;}
.vision .goal .cards {display:flex; gap:var(--space-40);}
.vision .goal .cards li {display:flex; flex-direction:column; align-items:center; gap:var(--space-32); flex:1; min-width:0; padding:var(--space-60) var(--space-30); border-radius:16px; background:#f7f7f7; text-align:center;}
.vision .goal .icon {width:clamp(60px, calc(72 / var(--inner) * 100vw), 72px); height:clamp(60px, calc(72 / var(--inner) * 100vw), 72px);}
.vision .goal .icon img {width:100%; height:100%; object-fit:contain;}
.vision .goal .name {font-size:var(--font-size-24); font-weight:600; color:#121212;}
.vision .goal .txt {font-size:var(--font-size-18); line-height:1.33em;}

/* 찾아오시는 길 */
.directions {display:flex; flex-direction:column; gap:var(--space-80); justify-content:space-between;}
.directions .root_daum_roughmap_landing {border-radius:var(--radius-16); width:100% !important; height:clamp(280px, calc(400 / var(--inner) * 100vw), 400px) !important; margin-bottom:0;}
.directions .place {display:flex; flex-direction:column;}
.directions .head {display:flex; align-items:center; gap:var(--space-10); padding-bottom: var(--space-40); border-bottom: 2px solid #505050; margin-bottom: var(--space-40);}
.directions .head .icon {flex-shrink:0; width:24px; height:24px;}
.directions .head .tit {font-size:var(--font-size-32); font-weight:600; color:#121212;}
.directions .line {width:100%; height:1px; background:#ddd;}
.directions .cont {display:flex; align-items:flex-start; gap:var(--space-100);}
.directions .info {flex-shrink:0; width:31.8%; display:flex; flex-direction:column; gap:var(--space-20);}
.directions .info .item {display:flex; gap:var(--space-40); font-size:var(--font-size-18);}
.directions .info dt {flex-shrink:0; width:50px; font-weight:600; color:#121212;}
.root_daum_roughmap .wrap_map {height:100% !important;}
.root_daum_roughmap .wrap_controllers {display:none !important;}
.root_daum_roughmap .cont {display:none !important;}
.root_daum_roughmap .map_border {display:none !important;}

/* 제품소개 공통 */
.prod {display:flex; flex-direction:column; gap:var(--space-120); line-height: 1.3;}
.prod .intro {display:flex; flex-direction:column; align-items:center; gap:var(--space-40); text-align:center;}
.prod .lead {font-size:var(--font-size-26); font-weight:700; line-height:1.38em; color:#121212;}
.prod .line {width:2px; height:40px; background:var(--color-primary); opacity:.6;}
.prod .desc {font-size:var(--font-size-18); line-height:1.56em;}
.prod .lineup {display:flex; flex-direction:column; gap:var(--space-40);}
.prod .lineup .tit {font-size:var(--font-size-40); font-weight:600; text-align:center; color:#121212;}
.prod .list {display:flex; flex-direction:column;}
.prod .item {display:flex; flex-direction:column; gap:var(--space-26); padding:var(--space-80) 0; scroll-margin-top:calc(var(--header-height) + var(--space-60)); border-bottom:1px solid #ddd;}
.prod .item:first-child {padding-top:0;}
.prod .item:last-child {border-bottom:0; padding-bottom: 0;}
.prod .head {display:flex; align-items:center; gap: 12px;}
.prod .head .icon {flex-shrink:0; width:28px; height:18px; object-fit:contain;}
.prod .name {font-size:var(--font-size-32); font-weight:600; color:#121212;}
.prod .body {display:flex; align-items:center; justify-content:space-between; gap:var(--space-60);}
.prod .img-wrap {flex-shrink:0; width:43.143%;}
.prod .img {position: relative; display:flex; align-items:center; justify-content:center; width:100%; height: 0; overflow:hidden; padding-bottom:89.075%; border:1px solid #ddd; border-radius: var(--radius-16); background:#fff;}
.prod .img img {max-width: calc(100% - var(--space-40)); max-height: calc(100% - var(--space-40)); object-fit:contain; position: absolute; top:50%; left:50%; transform:translate(-50%,-50%); -ms-transform:translate(-50%,-50%); -webkit-transform:translate(-50%,-50%);}
.prod .info {flex:1; min-width:0; display:flex; flex-direction:column;}
.prod .tags {display:flex; flex-wrap:wrap; gap:var(--space-24); padding-bottom: var(--space-30); border-bottom: 1px solid #ddd; margin-bottom: var(--space-30);}
.prod .tags li {display:inline-flex; align-items:center; gap:var(--space-18); padding:var(--space-12) var(--space-20); border-radius:8px; background:#f2f4f9;}
.prod .tags .lbl {font-size:var(--font-size-18); font-weight:600;}
.prod .tags .val {position:relative; padding-left:var(--space-18); font-size:var(--font-size-18);}
.prod .tags .val::before {content:""; position:absolute; top:50%; left:0; width:1px; height:14px; margin-top:-7px; background:#ddd;}
.prod .bar {width:100%; height:1px; background:#ddd;}
.prod .spec {display:flex; flex-direction:column; gap: 20px;}
.prod .spec-item {display:flex; gap:var(--space-40);}
.prod .spec dt {font-size:var(--font-size-16); font-weight:600; position: relative; padding-left: 13px; line-height: 1.5em; width: 72px; flex-shrink: 0;}
.prod .spec dt::before {content:""; flex-shrink:0; width:5px; height:5px; border-radius:50%; background:var(--color-primary); position: absolute; top: 0.55em; left: 0;}
.prod .spec dd {font-size:var(--font-size-16); line-height:1.5em;}
.prod .spec .dot-list {margin-top:var(--space-8);}
.prod .spec .dot-list li {font-size:var(--font-size-16); line-height: 1.5em; padding-left: 13px;}
.prod .spec .dot-list li::before {top: 0.55em;}
.prod .detail {display:inline-flex; align-items:center; gap: 10px; padding:var(--space-16) var(--space-32); border:1px solid #ddd; border-radius: var(--radius-8); background:#fff; font-size:var(--font-size-15); font-weight:600; line-height: 1.47; color:#676767; margin-top: var(--space-60); margin-right: auto;}
.prod .detail .icon {width:16px; height:16px; background: url('/images/sub/prod-detail.svg') no-repeat center / contain; transition: .2s; font-size: 0; margin-bottom: 2px;}
.prod .detail:hover {border-color:var(--color-primary); color:#fff; background:var(--color-primary);}
.prod .detail:hover .icon {background: url('/images/sub/prod-detail-on.svg') no-repeat center / contain;}

/* 채용안내 - 복리후생 */
.welfare {display:flex; flex-direction:column; gap:var(--space-100);}
.welfare .group {display:flex; flex-direction:column; gap:var(--space-40);}
.welfare .tit {font-size:var(--font-size-32); font-weight:600; color:#121212;}
.welfare .cards {display:grid; grid-template-columns: repeat(4, 1fr); gap:var(--space-20);}
.welfare .cards li {display:flex; flex-direction:column; align-items:center; gap:var(--space-32); padding:var(--space-60) var(--space-20); border:1px solid #ddd; border-radius:8px; background:#fff; text-align:center;}
.welfare .icon {width:72px; height:72px;}
.welfare .icon img {width:100%; height:100%; object-fit:contain;}
.welfare .info {display:flex; flex-direction:column; gap:var(--space-20);}
.welfare .name {font-size:var(--font-size-24); font-weight:600; color:#121212;}
.welfare .txt {font-size:var(--font-size-18); line-height:1.33em;}