@charset "utf-8";
/* 서브공통 */
.sub-top {margin-bottom: var(--space-80); text-align: center;}
.sub-top .label {display: block; margin-bottom: 8px; font-size: var(--font-size-20); font-weight: 600; line-height: 1.7em; letter-spacing: -0.02em; color: var(--color-primary);}
.sub-top .desc {font-size: var(--font-size-32); font-weight: 600; line-height: 1.437em; letter-spacing: -0.02em; color: var(--color-sub);}
.sub-top .txt {font-size: var(--font-size-18); line-height: 1.777em; letter-spacing: -0.02em; color: #505050; margin-top: var(--space-36);}

/********************* 회사소개 *********************/
/* 인사말 */
.greeting-content .flex {align-items: center; gap: var(--space-80);}
.greeting-content .greeting-img {flex-shrink: 0; width: clamp(400px, calc(640 / var(--inner) * 100vw), 640px); border-radius: var(--radius-24); overflow: hidden;}
.greeting-content .greeting-txt-wrap {flex:1; min-width:0;}
.greeting-txt-wrap .sub-top {margin-bottom: var(--space-48); text-align: left;}
.greeting-txt-wrap .sub-top .desc {font-weight: 500;}
.greeting-txt-wrap .sub-top .desc strong {font-weight: 600;}
.greeting-content .cont {margin-bottom: var(--space-48); font-size: var(--font-size-18); line-height: 1.777em; letter-spacing: -0.02em;}
.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-20); font-weight: 600; line-height: 1.7em; letter-spacing: -0.02em; color: var(--color-sub);}

/* 비전 및 경영이념 */
.vision-section {padding-bottom: var(--space-80);}
.vision-bg {border-radius: var(--radius-24); overflow: hidden;}
.vision-bg img {min-height: 200px; object-fit: cover;}

.management-section {padding:var(--space-80) 0 var(--space-120); background: #FAFAFA;}
.management-cont .list {display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-48); margin: 0; padding: 0; list-style: none;}
.management-cont .item {display: flex; flex-direction: column; gap: var(--space-36);}
.management-cont .item .cont {display: flex; flex-direction: column; gap: var(--space-12);}
.management-cont .item .tit-wrap {display: flex; flex-direction: column; align-items: flex-start;}
.management-cont .item .num {color: #dceef8; font-size: var(--font-size-68); font-weight: 500; line-height: 1.206em; letter-spacing: -.02em;}
.management-cont .item .tit {color: var(--color-sub); font-size: var(--font-size-28); font-weight: 600; line-height: 1.5em; letter-spacing: -.02em;}
.management-cont .item .txt {color: #505050; font-size: var(--font-size-18); line-height: 1.778; letter-spacing: -.02em;}
.management-cont .item .img {margin: 0; border-radius: var(--radius-24) 140px var(--radius-24) var(--radius-24); overflow: hidden;}

/* 회사연혁 */
.history-img {margin-bottom: var(--space-56); border-radius: var(--radius-24); overflow: hidden;}
.history-img img {min-height: 200px; object-fit: cover;}
.history-item {display: flex; align-items: start;}
.history-item .year {flex-shrink: 0; flex: 1;}
.history-item .year h2 {margin-bottom: 4px; font-size: var(--font-size-48); font-weight: 700; letter-spacing: -.02em; line-height: 1.29em; color: var(--color-primary);}
.history-item .year p {font-size: var(--font-size-18); font-weight: 500; letter-spacing: -.02em; line-height: 1.777em; color: #999;}
.history-item .item-wrap {flex:1;}
.history .item {display:flex;}
.history .item h3 {font-size: var(--font-size-32); font-weight: 600; letter-spacing: -.02em; line-height: 1.437em; color: var(--color-sub); text-align:left; width:78px; margin-right: 60px;}
.history .list {flex:1 1 auto; min-width:0; width:1%; padding:3px 0 45px 60px; position:relative;}
.history .list:before {position:absolute; content:""; background:var(--color-primary); top:10px; left:-10px; width:20px; height:20px; border-radius:100%; border:5px solid #DCEEF8;}
.history .list:after {position:absolute; content:""; left:0; top:10px; width:1px; height:100%; background:#eee; z-index:-1;}
.history .list > li {gap: var(--space-24); margin-bottom:10px; display:flex; font-size: var(--font-size-18); line-height:1.77em;}
.history .list > li:last-child {margin-bottom:0;}
.history .list > li .sub-list {padding-top: 2px;}
.history .list strong {min-width:25px; font-size:var(--font-size-20); font-weight: 600; line-height: 1.7em; color:var(--color-sub);}
.history .item:last-child .list {padding-bottom:120px;} 
.history-item:last-child .item:last-child .list {padding-bottom: 0;}
.history-item:last-child .item:last-child .list:after {display:none;}

.history .sub-list > li {margin-bottom: 4px; font-size: var(--font-size-18); line-height: 1.777em; letter-spacing: -.02em; color: #484848;}
.history .sub-list > li:last-child {margin-bottom: 0;}


/* 찾아오시는 길 */
.root_daum_roughmap {width: 100% !important;}
.root_daum_roughmap .wrap_map {height: 500px !important;}
.root_daum_roughmap .wrap_controllers {display: none !important;}
.map iframe {width: 100%; height: 500px;} 

.map {margin-bottom: var(--space-40); border-radius: var(--radius-24); overflow: hidden;}
.lct-item-wrap {flex-wrap: wrap; gap: 20px;}
.lct-item-wrap .flex {gap: var(--space-64);}
.lct-item .icon {width: 20px; height: 20px; flex-shrink: 0;}
.lct-item {display: flex; align-items: center; gap: 12px; font-size: var(--font-size-20); font-weight: 500; line-height: 1.7em; letter-spacing: -.02em;}
.lct-item.address {flex-direction: column; gap: 2px; align-items: flex-start;}
.lct-item.address dt{color: var(--color-primary); font-size: var(--font-size-16); font-weight: 600; line-height: 1.875em; letter-spacing: -.02em;}
.address dd {font-size: var(--font-size-24); font-weight: 600; line-height: 1.583em; letter-spacing: -.02em;}

/********************* 제품정보 *********************/
.product-tab {display: flex; margin-bottom: var(--space-80);}
.product-tab li {flex:1; text-align: center;}
.product-tab li a {display: block; padding: 0 10px var(--space-24); border-bottom: 1px solid #ddd; color: #999; font-size: var(--font-size-20); font-weight: 600; line-height: 1.7em; letter-spacing: -.02em; white-space: nowrap;}
.product-tab li.active a, .product-tab li a:hover {border-bottom: 1px solid var(--color-primary); color: var(--color-primary);}

.prod-detail {display: flex; flex-direction: column; gap: var(--space-24); padding-bottom: var(--space-80); margin-bottom: var(--space-80); border-bottom: 1px solid #ddd;}
.prod-detail .row {display: flex; align-items: center; gap: var(--space-80);}
.prod-detail .row .img {flex-shrink: 0; width: clamp(280px, calc(720 / var(--inner) * 100vw), 720px); margin: 0; border-radius: var(--radius-24); overflow: hidden;}
.prod-detail .row .img >div {position:relative; padding-bottom:67%;  overflow:hidden;}
.prod-detail .row .img >div 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;}
.prod-detail .row .cont {display: flex; flex-direction: column; flex: 1; min-width: 0;}
.prod-detail .intro {margin-bottom: var(--space-36); display: flex; flex-direction: column; gap: var(--space-16);}
.prod-detail .pd-tit-wrap {gap: 20px;}
.prod-detail .intro .tit {color: var(--color-primary); font-size: var(--font-size-40); font-weight: 700; line-height: 1.4em; letter-spacing: -.02em;}
.prod-detail .intro .sub {color: #222; font-size: var(--font-size-20); font-weight: 600; line-height: 1.7em; letter-spacing: -.02em;}
.prod-detail .intro .txt {color: rgba(34, 34, 34, 0.7); font-size: var(--font-size-18); line-height: 1.778; letter-spacing: -.02em;}
.prod-detail .intro .txt p {margin: 0;}
.prod-detail .feat {display: flex; flex-direction: column; gap: var(--space-16);}
.prod-detail .feat .badge {display: inline-flex; align-items: center; justify-content: center; align-self: flex-start; padding: 4px var(--space-16); border-radius: 100px; background: #dceef8; color: var(--color-primary); font-size: var(--font-size-16); font-weight: 600; line-height: 1.875em; letter-spacing: -.02em;}
.prod-detail .feat .list {display: flex; flex-direction: column; gap: var(--space-8); margin: 0; padding: 0; list-style: none;}
.prod-detail .feat .item {display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-8); position: relative; padding-left: 12px;}
.prod-detail .feat .item::before {content: ""; flex-shrink: 0; position: absolute; top: 12px; left: 0; width: 4px; height: 4px; border-radius: 50%; background: var(--color-primary);}
.prod-detail .feat .label {color: #505050; font-size: var(--font-size-16); font-weight: 600; line-height: 1.875em; letter-spacing: -.02em;}
.prod-detail .feat .desc {color: #505050; font-size: var(--font-size-16); line-height: 1.875em; letter-spacing: -.02em;}
.prod-detail .down-wrap {display: flex; flex-wrap: wrap; gap: var(--space-24); align-items: stretch; margin-bottom: var(--space-36);}
.prod-detail .use-box {display: flex; flex: 1; flex-wrap: wrap; align-items: center; gap: var(--space-12); min-width: 0; padding: var(--space-16) var(--space-24); border-radius: var(--radius-16); background: #fafafa;}
.prod-detail .use-box .tit {flex-shrink: 0; color: var(--color-primary); font-size: var(--font-size-16); font-weight: 600; line-height: 1.875em; letter-spacing: -.02em;}
.prod-detail .use-box .txt {margin: 0; color: #505050; font-size: var(--font-size-16); line-height: 1.875em; letter-spacing: -.02em;}
.prod-detail .download {display: inline-flex; align-items: center; justify-content: center; gap: var(--space-10); flex-shrink: 0; padding: 10px 20px; border: 1px solid #EFEFEF; border-radius: 80px; background: #fff; color: #878787; font-size: var(--font-size-16); font-weight: 600; line-height: 1.875em; letter-spacing: -.02em; text-decoration: none; box-sizing: border-box;}
.prod-detail .download:hover {background: var(--color-primary); color: #fff; border-color: var(--color-primary);}
.prod-detail .download .ico {flex-shrink: 0; width: 24px; height: 24px; background: url(../images/common/download2.svg) no-repeat 50% 50% / 16px; transition: .3s;}
.prod-detail .download:hover .ico {background-image: url(../images/common/download3.svg);}

.prod-spec {margin-top: var(--space-80);}
.prod-spec .row {display: flex; align-items: center; gap: var(--space-80);}
.prod-spec .img {position: relative; flex-shrink: 0; width: clamp(240px, calc(640 / var(--inner) * 100vw), 640px); border-radius: var(--radius-24); overflow: hidden;}
.prod-spec .img > div {position:relative; padding-bottom:100%; overflow:hidden;}
.prod-spec .img >div 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;}
.prod-spec .img:after {content:""; position:absolute; top:0; left:0; right:0; bottom:0; border:1px solid #ddd; border-radius: var(--radius-24); }

.prod-spec .cont {display: flex; flex-direction: column; gap: var(--space-28); flex: 1; min-width: 0;}
.prod-spec .block {display: flex; flex-direction: column; gap: var(--space-6);}
.prod-spec .block .tit {margin: 0; color: #505050; font-size: var(--font-size-18); font-weight: 600; line-height: 1.778em; letter-spacing: -.02em;}
.prod-spec .block .list {display: flex; flex-direction: column; gap: var(--space-8); margin: 0; padding: 0; list-style: none;}
.prod-spec .item {display: flex; align-items: center; gap: 10px; position: relative; padding-left: 14px;}
.prod-spec .item.col {align-items: flex-start;}
.prod-spec .item::before {content: ""; flex-shrink: 0; position: absolute; top: 12px; left: 0; width: 4px; height: 4px; border-radius: 50%; background: var(--color-primary);}
.prod-spec .item .bar {flex-shrink: 0; width: 4px; height: 17px; margin-top: 6px; border-radius: 2px; background: var(--color-primary);}
.prod-spec .item .txt {color: #505050; font-size: var(--font-size-16); line-height: 1.875em; letter-spacing: -.02em;}

/********************* 기술 및 인증 *********************/
/* 연구소소개 */
.rnd-content {padding-bottom: var(--space-120);}
.rnd-content .sub-top .desc {font-size: var(--font-size-36); line-height: 1.38em;}
.rnd-content .rnd-cards .list {display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-48); margin: 0; padding: 0; list-style: none;}
.rnd-content .rnd-cards .item {display: flex; flex-direction: column; justify-content: space-between; border: 1px solid #ddd; border-radius: var(--radius-24); overflow: hidden;}
.rnd-content .rnd-cards .cont {display: flex; flex-direction: column; gap: var(--space-24); padding: var(--space-32) var(--space-32) var(--space-40);}
.rnd-content .rnd-cards .head {display: flex; flex-direction: column; align-items: flex-start; gap: 5px;}
.rnd-content .rnd-cards .num {color: #dceef8; font-size: var(--font-size-60); font-weight: 500; line-height: 1.233em; letter-spacing: -.02em;}
.rnd-content .rnd-cards .tit {margin: 0; color: var(--color-sub); font-size: var(--font-size-28); font-weight: 600; line-height: 1.5em; letter-spacing: -.02em;}
.rnd-content .rnd-cards .en {margin: 0; color: #999; font-size: var(--font-size-16); line-height: 1.875em; letter-spacing: -.02em;}
.rnd-content .rnd-cards .txt {color: #505050; font-size: var(--font-size-16); line-height: 1.875em; letter-spacing: -.02em;}
.rnd-content .rnd-cards .img img {width: 100%; aspect-ratio: 448 / 240; object-fit: cover;}

.rnd-banner {padding: var(--space-120) 0; background: url(../images/sub/rnd-bg.jpg) no-repeat center center / cover; text-align: center;}
.rnd-banner .head {margin-bottom: var(--space-36);}
.rnd-banner .head .tit {color: #fff; font-size: var(--font-size-32); font-weight: 600; line-height: 1.437em; letter-spacing: -.02em;}
.rnd-banner .txt {color: #fff; font-size: var(--font-size-18); line-height: 1.778; letter-spacing: -.02em;}

/* 기술 및 인증 */
.certi-list {display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-48) var(--space-40);}
.certi-list .item .img {position: relative; padding-bottom: 140.7%; margin-bottom: var(--space-20); border: 1px solid #ddd; border-radius: var(--radius-16); overflow: hidden;}
.certi-list .item .img 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;}
.certi-list .item .tit {text-align: center;}
.certi-list .item .tit span {position: relative; padding-left: 12px; color: var(--color-sub); font-size: var(--font-size-18); font-weight: 600; line-height: 1.777em; letter-spacing: -.02em;}
.certi-list .item .tit span::before {content: ""; position: absolute; top: 9px; left: 0; width: 4px; height: 4px; background: var(--color-primary); border-radius: 50%; }

/* 테스트 설비 */
.equip-list {padding:20px 0 0 0; border-bottom:1px solid #ddd;}
.equip-list ul {display:flex; flex-wrap:wrap; margin:0 -24px;}
.equip-list ul li {width:33.333%; padding:0 24px; margin-bottom:40px; text-align:center;}
.equip-list ul li.none {width:100%; padding:70px 0; margin:0; text-align:center; color:#767676;}
.equip-list ul li a {display:block;}
.equip-list ul li .thumb {position:relative; padding-bottom:67%; margin-bottom:25px; border-radius: var(--radius-16); overflow:hidden;}
.equip-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:contain;}
.equip-list ul li .thumb:after {content:""; position:absolute; top:0; left:0; right:0; bottom:0; border-radius: var(--radius-16); border:1px solid #ddd}
.equip-list ul li .tit {color:#222; font-size:20px; font-weight: 600; line-height:1.2em;}

/********************* 홍보센터 *********************/
/* 홍보영상 */
.video-list {border-top:2px solid #868686;}
.video-list ul li {display:flex; padding:20px 0; border-bottom:1px solid #ddd;}
.video-list .thumb {width:240px; margin-right:20px;}
.video-list .thumb a {display:block; position:relative; padding-bottom:75%; overflow:hidden;}
.video-list .thumb a 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;}
.video-list .thumb a:after {content:""; position:absolute; top:0; left:0; right:0; bottom:0; border:1px solid rgba(0,0,0,.08);}
.video-list .info {flex:1 1 auto; min-width:0; width:1%; padding: 10px 0;}
.video-list .tit {color:#2c2c2c; font-size:18px; font-weight:600; line-height:1.4em; max-height:1.4em; overflow:hidden; text-overflow:ellipsis; word-break:break-all; white-space:nowrap;}
.video-list .txt {margin-top:20px; color:#505050; font-size:16px; line-height:1.5em; max-height:4.5em; overflow:hidden; text-overflow:ellipsis; word-break:break-all; white-space:normal; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical;}
.video-list .date {margin-top:20px; color:#999; font-size:14px; line-height:1.3em;}
.video-list ul li.none {display:block; width:100%; padding:70px 0; margin:0; text-align:center; color:#767676;}

/* CI */
.ci-content {padding-bottom: var(--space-80); border-bottom: 1px solid #ddd; margin-bottom: var(--space-80);}
.ci-wrap {padding: var(--space-120) 0; border-radius: var(--radius-24); overflow: hidden; border: 1px solid #ddd; background: url(../images/sub/ci-bg.png) no-repeat center center / cover;}

.ci-palette .list {display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-24); margin: 0; padding: 0; list-style: none;}
.ci-palette .box {display: flex; justify-content: space-between; align-items: center; padding: var(--space-36); border: 1px solid #ddd; border-radius: var(--radius-16); background: #fff; box-sizing: border-box;}
.ci-palette .box .cont {display: flex; flex-direction: column; gap: 26px;}
.ci-palette .head .tit {margin: 0; color: var(--color-sub); font-size: var(--font-size-24); font-weight: 600; line-height: 1.583em; letter-spacing: -.02em;}
.ci-palette .head .code {margin: 0; color: #999; font-size: var(--font-size-18); font-weight: 500; line-height: 1.778em; letter-spacing: -.02em;}
.ci-palette .cmyk {display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-16); color: #505050; font-size: var(--font-size-16); line-height: 1.875em; letter-spacing: -.02em;}
.ci-palette .cmyk .label {font-weight: 600;}
.ci-palette .chip {flex-shrink: 0; width: clamp(80px, calc(132 / var(--inner) * 100vw), 132px); height: clamp(80px, calc(132 / var(--inner) * 100vw), 132px); min-height: 0; border-radius: 100px;}
.ci-palette .box.blue .chip {background: var(--color-primary);}
.ci-palette .box.navy .chip {background: #2e3192;}
.ci-palette .box.gray .chip {background: #808080;}

/********************* 고객지원 *********************/
.board-form .input {border-radius: 8px;}
.form-agree .scroll-box {border-radius: 8px;}
.form-agree .checkbox label:before {border-radius: 4px;}
.inquiry-btn {border-radius: 8px;}
/* faq */
.faq li.active .tit {border-bottom: 1px solid #ddd;}
.faq .buttons {margin-top: 40px;}
.faq .btn-pack {border-radius: 8px;}

/* 채용정보 */
.recruit-img {margin-bottom: var(--space-80); border-radius: var(--radius-24); overflow: hidden;}

.recruit-guide {display: flex; flex-direction: column; gap: var(--space-24); margin-bottom: var(--space-80);}
.recruit-guide .row {display: flex; flex-wrap: wrap; gap: var(--space-24);}
.recruit-guide .card {flex: 1; min-height: 346px; padding: var(--space-32); border-radius: var(--radius-24); background: #fafafa; box-sizing: border-box;}
.recruit-guide .head {display: flex; flex-direction: column; gap: var(--space-12); padding-bottom: var(--space-20); border-bottom: 1px solid #ddd; margin-bottom: var(--space-20);}
.recruit-guide .num {display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 100px; background: #dceef8; color: var(--color-primary); font-size: var(--font-size-16); font-weight: 600; line-height: 1.875em; letter-spacing: -.02em;}
.recruit-guide .tit {margin: 0; color: var(--color-sub); font-size: var(--font-size-24); font-weight: 600; line-height: 1.583em; letter-spacing: -.02em;}
.recruit-guide .line {width: 100%; height: 0; border-top: 1px solid #ddd;}
.recruit-guide .list {display: flex; flex-direction: column; gap: var(--space-12); margin: 0; padding: 0; list-style: none;}
.recruit-guide .item {position: relative; padding-left: 12px; color: #505050; font-size: var(--font-size-18); line-height: 1.778em; letter-spacing: -.02em;}
.recruit-guide .item::before {content: ""; position: absolute; top: 13px; left: 0; width: 4px; height: 4px; border-radius: 50%; background: var(--color-primary);}

.recruit-guide .pair {display: flex; align-items: flex-start; gap: 22px;}
.recruit-guide .name {display: block; width: 62px; font-size: var(--font-size-18); font-weight: 600; line-height: 1.778; letter-spacing: -.02em;}
.recruit-content .com-btn:hover {border-color: var(--color-primary); color: var(--color-primary);}
.recruit-content .com-btn:hover span {background-image: url(../images/common/download2.svg);}
.recruit-content .btn-wrap {text-align: center;}