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

.sub-sec {padding:var(--space-100) 0;}
.sub-sec.bg {background:#fafafa;}

.doc-tit {position:relative; padding-left:28px; margin-bottom:var(--space-30); font-size:var(--font-size-26); line-height:1.3em; color:#242424;}
.doc-tit:before {content:''; position:absolute; top:.5em; left:0; width:8px; height:8px; background:var(--color-primary); border-radius:2px;}

/* 회사개요 */
.company-overview {display:flex; align-items:center; gap:var(--space-40) var(--space-90);}
.company-overview .image {width:42%; max-width:500px;}
.company-overview .content {flex:1 1 auto; min-width:0; width:1%;}
.company-overview .content .title {margin-bottom:var(--space-30); padding-left:.7em; text-indent:-.7em; font-size:var(--font-size-28); line-height:1.3em;}
.company-overview .content .subtitle {margin-bottom:var(--space-40); font-size:var(--font-size-18); font-weight:600; line-height:1.4em; color:var(--color-primary);}
.company-overview .content .text {font-size:var(--font-size-18); line-height:1.5em; color:#454545;}
.our-business {padding:0 var(--space-container); text-align:center;}

/* 제품정보 */
.product-title {border-bottom:1px solid var(--color-primary); padding-bottom:var(--space-40); margin-bottom:var(--space-80);}
.product-title h2 {font-size:var(--font-size-28); line-height:1.3em; color:var(--color-primary);}

.product-section {margin-bottom:var(--space-100);}
.product-section:last-child {margin-bottom:0;}

.prod-model {padding:var(--space-60) var(--space-37); background: #F5F5F5; text-align:center;}
.prod-model .cards {display:flex; align-items:center; justify-content:space-between; gap:var(--space-37);}
.prod-model .card {flex:1; background:#fff; overflow:hidden;}
.prod-model .card .img {background:#fff; border-bottom:1px solid #ddd;}
.prod-model .card .info {background:#fff; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:var(--space-24);}
.prod-model .card .info h4 {font-size:var(--font-size-20); font-weight:700; line-height:1.4em; color:#242424; margin-bottom:var(--space-10);}
.prod-model .card .info .value {font-size:var(--font-size-16); font-weight:600; line-height:1.625em; color:var(--color-primary);}
.prod-model .card .info.row {flex-direction:row; gap:var(--space-37);}
.prod-model .content {margin-top:var(--space-40);}
.prod-model .content p {font-size:var(--font-size-20); font-weight:700; line-height:1.4em; color:var(--color-primary);}
.prod-model .table-img {width:100%; height:260px; display:flex; align-items:center; justify-content:center;}

.prod-feature {margin-bottom:var(--space-20); padding:var(--space-40); background:#F5F5F5;}
.prod-feature:last-child {margin-bottom:0;}
.prod-feature h3 {display:flex; align-items:flex-start; gap:var(--space-10); font-size:var(--font-size-20); font-weight:700; line-height:1.3em; color:#242424;}
.prod-feature h3 .number {display:inline-flex; align-items:center; justify-content:center; width:25px; height:25px; background:#242424; border-radius:50%; font-size:var(--font-size-16); font-weight:600; line-height:1em; color:#fff;}
.prod-feature h3 .tit {flex:1 1 auto; min-width:0; width:1%;}
.prod-feature .content {color:#454545; line-height:1.62em; margin-top:var(--space-20);}
.prod-feature .content ul {list-style:disc; padding-left:1.5em; display:flex; flex-direction:column; gap:4px;}
.prod-feature .images {display:flex; gap:var(--space-25); margin-top:var(--space-30);}
.prod-feature .images .multiply {mix-blend-mode:multiply;}
.prod-feature .images .label {display:inline-flex; align-items:center; justify-content:center; height:32px; padding:0 var(--space-20); background:var(--color-primary); border-radius:40px; font-size:var(--font-size-16); font-weight:600; line-height:1.625em; color:#fff; text-decoration:none;}
.prod-feature .images.between {justify-content:space-between; align-items:center;}
.prod-feature .images.between .content-box {flex:1; margin-left:var(--space-40);}
.prod-feature .images.between .content-box {max-width:621px; min-height:300px;}
.prod-feature .images .img {display:flex; flex-direction:column; align-items:center; justify-content:center; gap:var(--space-20);}
.prod-feature .images.center {justify-content: center; gap:var(--space-90);}
.prod-feature .images.gap-50 {gap:var(--space-50);}
.prod-feature .images.mgb-50 {margin-bottom:var(--space-50);}
.prod-feature .images.st2 {align-items:flex-end; gap:var(--space-40);}
.prod-feature .images.st2 .img:first-child {margin-right:var(--space-20);}
.prod-feature .img-cnt {background:#fff; border:1px solid #ddd; display:flex;}
.prod-feature .img-cnt .img {display:flex; align-items:center; justify-content:center; border-right:1px solid #ddd;}
.prod-feature .img-cnt .cnt {flex:1 1 auto; min-width:0; width:1%; padding:var(--space-40); display:flex; align-items:center;}
.prod-feature.flex {display:flex; justify-content:space-between; gap:var(--space-40);}
.prod-feature.flex .img-wrap {display:flex; gap:var(--space-10);}

.feature-cards {display:flex; gap:var(--space-30); margin-bottom:var(--space-20);}
.feature-cards .card {flex:1; background:#f5f5f5; border:1px solid #ddd; overflow:hidden;}
.feature-cards .card .img {background:#fff; border-bottom:1px solid #ddd;}
.feature-cards .card .info {padding:var(--space-24); text-align:center; display:flex; flex-direction:column; justify-content:center;}
.feature-cards .card .info h4 {font-size:var(--font-size-20); font-weight:700; line-height:1.4em; color:#242424;}
.feature-cards .card .info .subtitle {margin-top:var(--space-10); font-size:var(--font-size-16); font-weight:600; line-height:1.625em; color:var(--color-primary); margin-bottom:var(e-10);}
.feature-cards .card .info .text {font-size:var(--font-size-16); line-height:1.625em; color:#454545;}
.feature-cards .card .info .devider {width:60px; height:1px; background:#ddd; margin:var(--space-16) auto;}
.feature-cards .card .table-img {width:100%; height:300px; background:#fff; display:flex; align-items:center; justify-content:center;}

.prod-model-size {display:flex; flex-wrap:wrap; gap:var(--space-40);}
.prod-model-size .card {flex:0 0 calc(50% - var(--space-20)); background:#fff; border:1px solid #ddd; overflow:hidden;}
.prod-model-size .card .img {background:#fff; border-bottom:1px solid #ddd;}
.prod-model-size .card .info {background:#F5F5F5; padding:var(--space-40) var(--space-24); text-align:center; min-height:140px; display:flex; flex-direction:column; justify-content:center;}
.prod-model-size .card .info h4 {font-size:var(--font-size-20); font-weight:700; line-height:1.4em; color:#242424; margin-bottom:var(--space-10);}
.prod-model-size .card .info .value {font-size:var(--font-size-16); font-weight:600; line-height:1.625em; color:var(--color-primary);}

.spec-table table {width:100%; border-collapse:collapse; border-spacing:0px;}
.spec-table table th,
.spec-table table td {height:clamp(40px, calc(60 / var(--inner) * 100vw), 60px); padding:8px; border:1px solid #ddd; line-height:1.625em;}
.spec-table thead th {font-weight:600; color:#fff; background:#454545;}
.spec-table tbody th {background:#f8f8f8; color:#242424; font-weight:400;}
.spec-table tbody td {color:#454545; text-align:center;}
.spec-table tbody td.bg {background:#888888; color:#fff;}
.spec-table tr th:first-child,
.spec-table tr td:first-child {border-left:0;}
.spec-table tr th:last-child,
.spec-table tr td:last-child {border-right:0;}
.spec-table table td .bold {font-weight:700;}
.spec-table .space {display:flex; flex-wrap:wrap; justify-content:center; gap:0 var(--space-40);}

.spec-note {text-align:right; margin-bottom:var(--space-16); margin-top:-2em; font-size:var(--font-size-20); font-weight:700; line-height:1.4em;}

.digital-feature-images {display:grid; grid-template-columns:repeat(6, 1fr); gap:var(--space-50) var(--space-40); text-align:center;}
.digital-feature-images .image {grid-column:span 2;}
.digital-feature-images .image.wide {grid-column:span 3;}
.digital-feature-images .between {display:flex; justify-content:space-between; gap:var(--space-24);}
.digital-feature-images .between .text {height:80px; padding:8px; display:flex; align-items:center; justify-content:center; font-size:var(--font-size-16); font-weight:600; line-height:1.625em; background:#F5F5F5; border-radius:4px;}
.digital-feature-images .img-item {display:flex; flex-direction:column; align-items:center; gap:var(--space-30);}
.digital-feature-images .img-item .label {display:inline-flex; align-items:center; justify-content:center; height:32px; padding:0 var(--space-20); background:var(--color-primary); border-radius:40px; font-size:var(--font-size-16); font-weight:600; line-height:1.625em; color:#fff;}

.profiler-3d-images {display:grid; grid-template-columns:repeat(3, 1fr); gap:var(--space-60) var(--space-50); margin-top:var(--space-30);}
.profiler-3d-images .img-item {display:flex; flex-direction:column; align-items:center; gap:var(--space-30);}
.profiler-3d-images .img-item .label {display:inline-flex; align-items:center; justify-content:center; height:32px; padding:0 var(--space-20); background:var(--color-primary); border-radius:40px; font-size:var(--font-size-16); font-weight:600; line-height:1.625em; color:#fff;}

.afm-comparison {display:flex; gap:var(--space-30); margin-top:var(--space-30); margin-bottom:var(--space-30);}
.afm-comparison .img-item {flex:1; display:flex; flex-direction:column; border:1px solid #ddd; background:#fff; overflow:hidden;}
.afm-comparison .img-item .caption {flex:1 1 auto; min-height:0; height:1%; display:flex; align-items:center; padding:10px; font-size:var(--font-size-16); font-weight:700; line-height:1.625em; color:#242424;}

.afm-measurement-table {margin-top:var(--space-30);}

.afm-spec-tables {display:flex; gap:var(--space-40);}
.afm-spec-tables .spec-table {flex:1;}

.optical-models-title {text-align:center; margin:var(--space-40) 0 var(--space-30);}
.optical-models-title p {font-size:var(--font-size-20); font-weight:700; line-height:1.4em; color:#242424;}