@charset "utf-8";
/* 서브공통 */
.sub-top {padding: var(--space-120) 0 var(--space-100); text-align: center;}
.sub-top h3 {font-size: var(--font-size-20); font-weight: 600; color: var(--color-primary); line-height: 1.7em; letter-spacing: -0.02em;}
.sub-top .top-desc {margin-top: var(--space-30); font-size: var(--font-size-40); font-weight: 700; line-height: 1.35em; letter-spacing: -0.02em; color: #2c2c2c;}
.sub-top p .gray {color: #999; font-weight: 500;}
.sub-top p .primary {color: var(--color-primary); font-weight: 700;}
.sub-top .top-desc-sub {margin-top: var(--space-24); font-size: var(--font-size-20); font-weight: 400; line-height: 1.7em; letter-spacing: -0.02em;}

/* tab */
.com-tab {text-align: center;}
.com-tab ul {display: inline-flex; align-items: center; justify-content: center; gap: 8px; margin: 0 auto; padding: 8px; background: #F5F5F5; border-radius: 40px; text-align: center;}
.com-tab ul li a {display: block; padding: var(--space-12) var(--space-32) ;color: #999; font-size: var(--font-size-18); line-height: 1.778em; letter-spacing: -0.02em; font-weight: 600; border-radius: 80px;}
.com-tab ul li.active a,
.com-tab ul li a:hover {color: #fff; background: var(--color-sub);}

/********************* 회사소개 *********************/
/* 인사말 */
.greeting-section {background: linear-gradient(178deg, rgba(255, 255, 255, 0.04) 1.05%, rgba(151, 248, 111, 0.04) 45.18%, rgba(23, 130, 255, 0.06) 78.5%, rgba(255, 255, 255, 0.04) 106.56%);}
.greeting-section .sub-top p {font-weight: 500;}
.greeting-content {padding-bottom: var(--space-50);}
.greeting-content .img {border-radius: var(--radius-16); overflow:hidden;}
.greeting-title {font-size: var(--font-size-32); font-weight: 600; line-height: 1.437em; letter-spacing: -0.02em;}
.greeting-desc p {margin-bottom: var(--space-34); font-size: var(--font-size-20); line-height: 1.7em; letter-spacing: -0.02em;}
.greeting-desc p:last-child {margin-bottom: 0;}
.greeting-sign {font-size: var(--font-size-20); line-height: 1.7em; letter-spacing: -0.02em; font-weight: 600;}

/* 회사연혁 */

.history-box {display: none;}
.history-box.on {display: block;}
.history-img {position: relative; margin-bottom: var(--space-80); border-radius: var(--radius-16); overflow:hidden;}
.history-img .txt {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: var(--font-size-56); font-weight: 600; line-height: 1.25em; letter-spacing: -.02em; color: #fff; width: 100%; text-align: center;}
.history .item {display:flex;}
.history .item h3 {margin-bottom:40px; font-size: 48px; font-weight: 700; letter-spacing: -.02em; line-height: 1.291em; color: #2c2c2c; text-align:left; width:292px; line-height:1em; margin:-8px 0 0;}
.history .list {flex:1 1 auto; min-width:0; width:1%; padding:0 0 100px 92px; position:relative;}
.history .list:before {position:absolute; content:""; background:#6AE039; margin-left:-15px; top:-4px; left:0; width:32px; height:32px; border-radius:100%; border:10px solid #EAFAE4;}
.history .list:after {position:absolute; content:""; left:0; top:0; width:1px; height:100%; background:#eee; z-index:-1;}
.history .list li {margin-bottom:30px; font-size: var(--font-size-18); line-height:1.7em; letter-spacing: -0.02em; color: #505050;}
.history .list li:last-child {margin-bottom:0;}
.history .list strong {line-height:1em; min-width:45px; font-size:20px; color:#242424; font-weight:600;}
.history .item:last-child .list {padding-bottom:0;} 
.history .item:last-child .list:after {display:none;}

/* 오시는 길 */
.root_daum_roughmap {width: 100% !important;}
.root_daum_roughmap .wrap_map {height: 560px !important;}
.root_daum_roughmap .wrap_controllers {display: none !important;}

.location-content .map {position: relative; border-radius: var(--radius-24); overflow:hidden;}
.location-info-wrap {position: absolute; top: 20px; left: 20px; min-width: 400px; background: #fff url(/images/sub/location-bg.png) no-repeat right 20px bottom 20px / 243px; box-shadow: 0 0 16px 0 rgba(0, 0, 0, 0.08) ; border-radius: var(--radius-16); padding: var(--space-40); z-index: 1;}
.location-title {display: inline-block; position: relative; margin-bottom: var(--space-40); font-size: var(--font-size-28); font-weight: 600; line-height: 1.5em; letter-spacing: -0.02em; color: #2c2c2c;}
.location-title::after {content: ""; display: block; width: 6px; height: 6px; background: var(--color-sub); border-radius: 100%; position: absolute; top: 0; right: -14px;}
.location-info dl {font-size: var(--font-size-18); line-height: 1.777em; letter-spacing: -0.02em; color: #505050; }
.location-info dl dt {margin-bottom: 4px; font-weight: 600;}

/********************* 제품소개 *********************/
.product-content {background: url(../images/sub/product-bg.jpg) no-repeat center center / cover; padding: var(--space-100) 0 var(--space-120);}
.product-info-wrap .box {gap: var(--space-80);}
.product-info-wrap .box .img-wrap {width: clamp(400px, calc(680 / var(--inner) * 100vw), 680px); border-radius: var(--radius-16); overflow:hidden;}
.product-info-wrap .box .img {display: block; position: relative; padding-bottom: 75%;}
.product-info-wrap .box .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;}
.product-info .title {margin-bottom: var(--space-36); padding-bottom: var(--space-36); border-bottom: 1px solid rgba(255, 255, 255, 0.16);}
.product-info .title h4 {font-size: var(--font-size-40); font-weight: 700; line-height: 1.35em; letter-spacing: -0.02em; color: #fff;}
.info-desc p {margin-bottom: var(--space-20); font-size: var(--font-size-18); line-height: 1.777em; letter-spacing: -0.02em; color: #eee;}
.info-desc p:last-child {margin-bottom: 0;}
.type-title {display: flex; align-items: center; flex-wrap: wrap; gap: 0 12px; font-size: var(--font-size-28); font-weight: 600; line-height: 1.5em; letter-spacing: -0.02em; color: #fff; margin-bottom: var(--space-40);}
.type-title span {font-size: var(--font-size-16); font-weight: 400; line-height: 1.875em; letter-spacing: -0.02em; color: rgba(255, 255, 255, 0.70);}
.product-type .type-desc {display: block; font-size: var(--font-size-16); font-weight: 400; line-height: 1.875em; letter-spacing: -0.02em; color: rgba(255, 255, 255, 0.70); margin-bottom: var(--space-12);}
.type-list {gap: 8px; flex-wrap: wrap;}
.type-list li {flex: 1; min-width: 200px; padding: var(--space-24) var(--space-20); background: rgba(255, 255, 255, 0.08); border-radius: var(--radius-16);}
.type-list li p {display: flex; align-items: center; flex-wrap: wrap; gap: 0 10px;position: relative; padding-left: 14px; font-size: var(--font-size-20); font-weight: 500; line-height: 1.7em; letter-spacing: -0.02em; color: #fff;}
.type-list li p span {font-size: var(--font-size-18); font-weight: 400; line-height: 1.777em; letter-spacing: -0.02em; color: rgba(255, 255, 255, 0.70);}
.type-list li p:before {content: ""; display: block; position: absolute; top: 13px; left: 0; width: 4px; height: 4px; background:#fff; border-radius: 100%;}

/* 압력용기 탭 */
.pressure-content {display: none;}
.pressure-content.on {display: block;}
.com-tab.product-tab ul {background: rgba(255, 255, 255, 0.16); flex-wrap: wrap;}

/* 슬라이드 */
.com-slide-btn {width: 40px !important; height: 40px !important; border-radius: 100%; background: rgba(0, 0, 0, 0.24) url(/images/sub/product-arrow.svg) no-repeat center center / 16px; backdrop-filter: blur(12px); transition: background 0.3s ease;}
.com-slide-btn:hover {background: #2C2C2C url(/images/sub/product-arrow.svg) no-repeat center center / 16px;}
.com-slide-btn.next {right: 20px;}
.com-slide-btn.prev {left: 20px;}
.swiper-button-next:after, .swiper-button-prev:after {display: none;}
.com-slide-btn.swiper-button-prev {transform: rotate(180deg);}
.com-pagination {bottom: 15px !important;}
.com-pagination .swiper-pagination-bullet {width: 8px; height: 8px; margin: 0 8px !important; transition: .3s;}
.com-pagination .swiper-pagination-bullet-active {width: 40px; border-radius: 4px; background: var(--color-sub);}

/********************* 기술지원 *********************/
.tech-item {padding: var(--space-100) 0; border-top: 1px solid #eee;}
.tech-item:last-child {padding-bottom: 0;}
.tech-item .tit {display: flex; align-items: center; gap: var(--space-16); font-size: var(--font-size-32); font-weight: 600; line-height: 1.437em; letter-spacing: -0.02em; color: #2c2c2c; margin-bottom: var(--space-40);}
.tech-item .tit:before {content: ""; display: block; width: 20px; height: 20px; background: url(/images/sub/tit-icon.svg) no-repeat center center / contain; }
.tech-box {gap: var(--space-60);}
.tech-box .img {flex-shrink: 0; width: clamp(400px, calc(600 / var(--inner) * 100vw), 600px); border-radius: var(--radius-16); overflow:hidden; border:1px solid #eee;}
.tech-box .img.type2 {width: 100%; border-radius: 8px;}
.tech-desc p {margin-bottom: var(--space-60); font-size: var(--font-size-18); line-height: 1.777em; letter-spacing: -0.02em; color: #505050;}
.tech-desc p:last-child {margin-bottom: 0;}
.tech-desc h4 {display: flex; align-items: flex-start; gap: var(--space-12); font-size: var(--font-size-20); font-weight: 600; line-height: 1.7em; letter-spacing: -0.02em; color: #2c2c2c; margin-bottom: var(--space-30);}
.tech-desc h4:before {content: ""; display: block; width: 2px; height: 20px; margin-top: 7px; background: #A8BFDA; border-radius: 100px;}

/* 국내 해외 인허가 */
.tech-item.type2 .tit {flex: 1;}
.tech-item.type2 .tech-box {flex: 0 1 51.5%;}
.tech-desc-list {display: flex; flex-wrap: wrap; gap: 8px;}
.tech-desc-list li {padding: var(--space-12) var(--space-16);  border-radius: 8px; border:1px solid #eee;}
.tech-desc-list.list1 li {flex: 0 1 calc(50% - 4px);}
.tech-desc-list li p {position: relative; padding-left: 14px; font-size: var(--font-size-16); line-height: 1.875em; letter-spacing: -0.02em; color: #2c2c2c;}
.tech-desc-list li p:before {content: ""; display: block; width: 4px; height: 4px; background:var(--color-primary); border-radius: 100%; position: absolute; top: 12px; left: 0;}

/* 인증 흐름 순서  */
.permit-flow {list-style: none; margin: 0; padding: 0; }
.permit-flow li {display: flex; align-items: center; gap: var(--space-24); margin-bottom: var(--space-16);}
.permit-flow li:last-child {margin-bottom: 0;} 
.permit-track {display: flex; flex-direction: column; align-items: center; position: relative; width: 97px; min-width: 97px; }
.permit-track:after {content: ""; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); width: 0; height: 42px; border-left: 1px dashed #A8BFDA; }
.permit-flow li:last-child .permit-track:after {display: none;}
.permit-badge {display: flex; align-items: center; justify-content: center; box-sizing: border-box; width: 100%; margin: 0; padding: 4px var(--space-8); border: 1px solid var(--color-primary); border-radius: 100px; background: #fff; font-size: var(--font-size-16); font-weight: 600; line-height: 1.875em; letter-spacing: -0.02em; color: var(--color-primary); text-align: center; }
.permit-desc {display: flex; align-items: center; flex: 1 1 auto; min-width: 0; margin: 0; padding: var(--space-16) var(--space-32); border: 1px solid #eee; border-radius: 100px; background: #fafafa; font-size: var(--font-size-18); font-weight: 400; line-height: 1.777em; letter-spacing: -0.02em; color: #2c2c2c; }

.tech-desc-list.list2 li {flex: 0 1 calc(20% - 7px);}
.tech-desc .note {padding: var(--space-12) var(--space-16); border-radius: 8px; border:1px solid #eee; font-size: var(--font-size-16); font-weight: 400; line-height: 1.875em; letter-spacing: -0.02em;}
.tech-desc .note p {position: relative; padding-left: 24px; }
.tech-desc .note p:before {content: ""; display: block; width: 14px; height: 14px; background:url(/images/sub/tech-note.svg) no-repeat center center / contain; position: absolute; top: 9px; left: 0;}
.tech-desc .num {padding: var(--space-24); background: #FAFAFA; border-radius: 8px; border:1px solid #eee; text-align: center;}
.tech-desc .num dt {font-size: var(--font-size-24); font-weight: 600; line-height: 1.583em; letter-spacing: -0.02em;}
.tech-desc .num dd {font-size: var(--font-size-16); font-weight: 500; line-height: 1.875em; letter-spacing: -0.02em; color: #999;}


/********************* 산업분야 *********************/
.industry-slider {margin-bottom: var(--space-24); border-radius: var(--radius-16); overflow:hidden;}
.industry-slider.border {border:1px solid #eee;}
.industry-list {display: flex; gap: var(--space-24); flex-wrap: wrap;}
.industry-item {flex: 1; display: flex; flex-direction: column; align-items: center; gap: var(--space-32); padding: var(--space-48) var(--space-10); border-radius: var(--radius-16); border:1px solid #eee;}
.industry-item .txt {font-size: var(--font-size-18); font-weight: 400; line-height: 1.777em; letter-spacing: -0.02em; text-align: center;}

/********************* 기업실적 *********************/
/* 기업실적 */
.project-list {border-radius: var(--radius-16); overflow:hidden; border:1px solid #ddd;}
.board-list.project-list table {border-top: none;}
.board-list.project-list table thead th {padding: var(--space-20) 5px; background: #0A0F2B; font-size: var(--font-size-16); font-weight: 600; line-height: 1.875em; letter-spacing: -0.02em; color: #fff;}
.board-list.project-list table tbody td {padding: var(--space-20) 5px; font-size: var(--font-size-16); font-weight: 400; line-height: 1.875em; letter-spacing: -0.02em; color: #484848; border: 1px solid #ddd;}
.board-list.project-list table tbody td:last-child {border-right: none;}
.board-list.project-list table tbody td:first-child {border-left: none;}
.board-list.project-list table tbody tr:last-child td {border-bottom: none;}

/* 제작현장 */
.project-tab {margin-bottom: var(--space-60);}
.project-tab ul {display: flex; flex-wrap: wrap; gap: 8px; justify-content: center;}
.project-tab ul li a {display: block; padding: var(--space-12) var(--space-32); border-radius: 80px; border:1px solid #eee; font-size: var(--font-size-18); font-weight: 600; line-height: 1.778em; letter-spacing: -0.02em; color: #999; text-align: center;}
.project-tab ul li.active a,
.project-tab ul li a:hover {background: var(--color-sub); border-color: var(--color-sub); color: #fff;}

/********************* 고객지원 *********************/