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

.doc-tit {margin-bottom:var(--space-40); font-size: var(--font-size-40); color: var(--color-dark); line-height:1em; font-weight:400;} 

.doc-cnt {padding-top:var(--space-150);} 

.doc-sub-cnt {padding-bottom:var(--header-height) 0;} 
.doc-sub-cnt:last-child {padding-bottom:0;} 

.table-style table {width:100%; border-collapse:collapse; border-spacing:0px; border-top:1px solid #1f1f1f; line-height:1.5em;} 
.table-style table th {padding:13px; border:1px solid #ddd; border-top:0; font-weight:600; background:#fafafa;} 
.table-style table td {padding:13px; text-align:center; border:1px solid #ddd; border-top:0; color: #454545;} 
.table-style tr th:first-child,
.table-style tr td:first-child {border-left:0;} 
.table-style tr th:last-child,
.table-style tr td:last-child {border-right:0;} 
.table-style span {display:inline-block;} 
.table-style .normal {font-weight:400;} 

.bt0 {border-top: 0 !important;} 

.pt0 {padding-top:0 !important;} 
.pb0 {padding-bottom:0 !important;} 

.pt120 {padding-top:var(--space-120) !important;} 

.mt100 {margin-top:var(--space-100) !important;} 

.mb40 {margin-bottom:var(--space-40) !important;} 
.mb60 {margin-bottom:var(--space-60) !important;} 

.txt-primary {color: var(--color-primary) !important;} 
.txt-second {color: var(--color-secondary) !important;} 
.txt-dark {color: var(--color-dark) !important;} 

.txt-grey {color: #888888 !important;} 

.bg-grey {background-color: #f9f9f9;} 

.flex-wrap {display:flex;} 

.dot-list > li {position:relative; margin-bottom: 5px; padding-left:13px; font-size: var(--font-size-14);} 
.dot-list > li:last-child {margin-bottom:0;} 
.dot-list > li:before {content:""; position:absolute; top:10px; left:0; width:5px; height:5px; background-color: #ddd; border-radius: 100%;} 
.dot-list > li small {font-size: var(--font-size-14); color: #878787;} 

.myriad-italic {font-family: "myriad-pro", sans-serif !important; font-weight: 400 !important; font-style: italic !important; letter-spacing: 0 !important;} 
.myriad-italic.cn {font-size: var(--font-size-22); padding:0 5px;} 

.haboro {font-family: "haboro-contrast-normal", sans-serif;} 
.haboro-ext {font-family: "haboro-contrast-extended", sans-serif; font-weight:800; letter-spacing: -0.06em;} 

/* greetings */
.greetings .img img {box-shadow: 2.5px 4.33px 20px 0px rgba(0, 0, 0, 0.1); border-radius: var(--border-radius-24);} 
.greetings .flex-wrap {padding-top:var(--space-60);} 
.greetings .flex-wrap > div {width:50%;} 
.greetings .tit {position: relative; padding-top:var(--space-40); padding-left:var(--space-50);} 
.greetings .tit::before {content: ""; position:absolute; top:0; left:0; width:48px; height:35px; background: url(/images/sub/quotes.png) no-repeat center/contain;} 
.greetings .tit h3 {font-weight:600; font-size: var(--font-size-40); color: #121212; line-height:1.35em;} 
.greetings p {margin-bottom:var(--space-10);} 
.greetings p:last-child {margin-bottom:0;} 
.greetings .sign {text-align:right; padding-top:var(--space-30);} 
.greetings .sign .ceo {font-size: var(--font-size-18); display:flex; align-items: center; justify-content: end;} 
.greetings .sign img {display:inline-block; margin-left:var(--space-20);} 

/* vision */
.doc-txt {font-size: var(--font-size-20); line-height:1.6em;} 

.reverse-list {width:100%; max-width: 1920px; margin:0 auto;} 
.reverse-list .cnt {display:flex; margin-top:var(--space-100); align-items: center;} 
.reverse-list .cnt > div {width:50%;} 
.reverse-list .cnt .img {padding-right:var(--space-100);} 
.reverse-list .cnt .img img {border-top-right-radius: var(--border-radius-24); border-bottom-right-radius: var(--border-radius-24); box-shadow: 2.5px 4.33px 20px 0px rgba(0, 0, 0, 0.1);} 
.reverse-list .cnt .txt {max-width: 700px;} 
.reverse-list .cnt:nth-child(even) {flex-direction: row-reverse;} 
.reverse-list .cnt:nth-child(even) .img {padding-left:var(--space-100); padding-right:0;} 
.reverse-list .cnt:nth-child(even) .img img {border-top-right-radius: 0; border-bottom-right-radius: 0; border-top-left-radius: var(--border-radius-24); border-bottom-left-radius: var(--border-radius-24);} 
.reverse-list .cnt:last-child {padding-bottom:0;} 
.reverse-list .cnt h3 {position:relative; margin-bottom:var(--space-30); font-weight:600; font-size: var(--font-size-20); line-height:1.5em; color: var(--color-dark);} 
.reverse-list .cnt .haboro-ext {position: absolute; top: -10px; left:0; display:block; font-size: var(--font-size-64); line-height:1em; z-index:-1; color: rgba(1,1,1,0.1);} 
.reverse-list .cnt p {margin-bottom:var(--space-15);} 
.reverse-list .cnt p:last-child {margin-bottom:0;} 

/* 회사연혁 & 특허 및 인증 */
.history {position: relative; height: 980px; overflow: hidden; background: url(/images/sub/history.jpg) no-repeat center / cover; padding-top: var(--space-150); display: flex; flex-direction: column; align-items: center;} 
.history .tit {color: #fff; width: 50%; position: sticky; top: 0; z-index: 10;} 
.his-wrap {width: 50%; padding-left:10px; position: relative; max-height: calc(980px - 150px); /* .history 높이에서 .tit 높이를 뺀 값 */
overflow-y: auto; scrollbar-width: none; /* Firefox에서 스크롤바 숨기기 */
-ms-overflow-style: none; /* IE 및 Edge에서 스크롤바 숨기기 */} 
.history .tit {color:#fff; width: 50%;} 
.history .tit span {display: block; font-size: var(--font-size-18); padding-bottom:var(--space-60);} 
.history .tit p {font-size: var(--font-size-40); line-height:1.35em;} 
.history .his-wrap .his-list {position: relative; display:block; margin-bottom:var(--space-120);} 
.history .his-wrap .his-list .year {width: 100%; margin-bottom: 60px; font-size:var(--font-size-32); color:#fff; margin-left: -10px;ine-height: normal;} 
.history .his-wrap .his-list .con {position: relative;} 
.history .con:before {position: absolute; content:''; background: rgba(255,255,255,0.2); width:1px; top:22px; left:0; height:66%;} 
.history .his-list:nth-child(2) .con:before {height: 89%;} 
 .history.cn .con:before { height: 87%;}
 .history.cn  .his-list:nth-child(2) .con:before {height: 93%;}
 [lang=en]  .history .con:before { height: 63%;}
 [lang=en]  .history .his-list:nth-child(2) .con:before {height: 90%;}
.history .his-wrap .his-list .con dl {position: relative; padding-left:var(--space-60); margin-bottom: var(--space-70);} 
.history .his-wrap .his-list .con dl:before {content:''; position: absolute; top:5px; left:0; transform:translateX(-50%); width:17px; height:17px; background: url(/images/sub/dot-history.png) no-repeat center/contain;} 
.history .his-wrap .his-list .con dl>dt {color:#fff; font-size:var(--font-size-20);} 
.history .his-wrap .his-list .con dl>dd {color:#fff; font-size:var(--font-size-18); padding-top:var( --space-15);} 

.patent-list {padding-top:var(--space-40); border-top:2px solid #121212;} 
.patent-list ul {display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-70) var(--space-40);} 
.patent-list ul li {text-align:center;} 
.patent-list ul li .img {margin-bottom:10px;} 

/* 고객사 */
.partner-list ul {display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-60) var(--space-20);} 
.partner-list ul li {text-align:center;} 
.partner-list ul li .img {margin-bottom:5px;} 

.map {position:relative; padding-bottom:var(--space-180);} 
.map iframe {width:100% !important; height:650px !important;} 
.address-info {display: flex; /* position: absolute; left: 50%; transform: translateX(-50%); bottom:0; */
 width: 100%; margin: var(--space-60) auto 0; height: auto; max-width: 1400px; padding: var(--space-60); background-color: rgb(244, 244, 244); border-radius: var(--border-radius-16); box-shadow: 0px 5px var(--space-20) 0px rgba(0, 0, 0, 0.1);} 
.address-info .cop {padding-right:var(--space-50); font-size: var(--font-size-32); color: var(--color-dark); border-right: 1px solid #ddd;} 
.address-info .info {display:flex; flex-direction: column; justify-content: center; gap: var(--space-20); padding: 10px 0 10px var(--space-40);} 
.address-info .address {font-size: var(--font-size-20); line-height:1.5em; color: #121212;} 
.address-info .ico-list {display:flex; gap: var(--space-100);} 
.address-info .ico-list .wrap {display:flex; align-items: center;} 
.address-info .ico-list .wrap .ico {margin-right:10px;} 
.address-info .ico-list .wrap p {font-size: var(--font-size-18);} 

.sub-head {padding:var(--space-100) 0 var(--space-80); text-align:center;} 
.sub-head.type2 {padding:0 0 clamp(60px, calc( 130 / var(--inner) * 100vw ), 130px);}
.sub-head h3 {font-size: var(--font-size-80); line-height:1em;} 
.sub-head .line {width:1px; height:var(--space-100); margin:var(--space-30) auto; background-color: #121212;} 
.sub-head .t0 {font-size:clamp(16px, calc( 24 / var(--inner) * 100vw ), 24px); font-weight:500;color: #121212;}
.sub-head .t1 {margin-bottom:10px; font-size: var(--font-size-32); color: #121212; line-height: initial;} 
.sub-head .t2 {color: #878787; line-height: initial;}
.sub-head .t3 {color:#121212;line-height:2;}
.sub-head .t0 + .t1 {margin-top:clamp(15px, calc( 24 / var(--inner) * 100vw ), 24px);}
.sub-head .t1 + .t3 {margin-top:clamp(20px, calc( 40 / var(--inner) * 100vw ), 40px);}

.brand .bg {width: 100%; background: url(/images/sub/bg-story.jpg) no-repeat center/cover; background-attachment: fixed; border-radius: var(--border-radius-16); display: flex; flex-direction: column; justify-content: end;} 
 .brand .bg .txt-wrap {width:100%; max-width: 1400px; margin:0 auto; padding-top:380px; padding-bottom:var(--space-80);} 
.brand .bg p {margin-bottom:var(--space-20); color: #fff; font-size: var(--font-size-18); line-height:1.666em;} 
.brand .bg p:last-child {margin-bottom:0;} 

.value-list {display:grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, calc( 100 / var(--inner) * 100vw ), 100px );;} 
.value-list li .img {margin-bottom:var(--space-30);} 
.value-list .txt-wrap {min-height: 30vh; border-bottom: 1px solid #ddd;} 
.value-list .tit {margin-bottom:var(--space-20); font-size: var(--font-size-32); color: #121212; letter-spacing: -0.04em; line-height:1.3em;} 
.value-list .desc {line-height:1.63em;} 

.banner {padding:var(--space-120) 0; background: url(/images/sub/bg-story2.jpg) no-repeat center/cover; text-align:center;} 
.banner p {text-align:center; color: #fff; font-size: var(--font-size-24); line-height:1.5em;} 

.product-tab {margin-bottom:var(--space-80);} 
.product-tab ul {display:flex; justify-content:center; gap:15px;} 
.product-tab ul li a {display:flex; justify-content:center; align-items:center; width: 180px; height: 48px; border-radius:50vh; background:#fff; color:#121212; text-align:center; border: 1px solid #121212; font-weight:600; font-size: var(--font-size-18);} 
.product-tab ul li.active a {background:#121212; color: #fff;} 

.filter-wrap {display:flex; gap:var(--space-40); margin-bottom:var(--space-60); padding-bottom:var(--space-20); border-bottom: 1px solid #ddd;} 
.filter-wrap .checkbox {position: relative; vertical-align: middle; margin-top: 0; width: 62px; height: 30px;} 
.filter-wrap .checkbox label {color: #878787; font-size: var(--font-size-14); text-align: center; display: flex; justify-content: center; align-items: center;} 
.filter-wrap .checkbox label:before {content: ""; position: absolute; top: 0; left: 0; margin: 0; width: 100%; height: 100%; background-color: #f4f4f4; border: 0; border-radius: 4px; z-index: -1; vertical-align: middle;} 
.filter-wrap .checkbox input:checked + label {color: #fff; font-weight:600;} 
.filter-wrap .checkbox input:checked + label:before {background: var(--color-dark);} 

.total-page strong {color: #006845;} 

.mold .bg {background: url(/images/sub/bg-mold.jpg) no-repeat center/cover; padding:var(--space-80) 0 var(--space-120);} 

/* 생산공정 */
.production-list> li {display:flex; align-items: center; padding:var(--space-80) 0; border-bottom: 1px solid #ddd;} 
.production-list> li:first-child {padding-top:0;} 
.production-list> li:last-child {border-bottom: 1px solid #121212;} 
.production-list >li .tit {width:18%; font-size: var(--font-size-40); color: #121212;} 
.production-list> li .step-list {flex: 1 1 auto; width:1%; min-width:0;} 

.step-list {display:grid; grid-template-columns: repeat(5, 1fr); gap: 40px 59px;} 
.step-list li {position:relative; width: 180px; height: 180px; display: flex; justify-content: center; align-items: center; flex-direction: column; border: 1px solid #00635b; border-radius: 100%;} 
.step-list li::after {content: ""; position: absolute; top:50%; right: -41px; transform: translateY(-50%); width:20px; height:13px; background: url(/images/sub/triangle.png) no-repeat center/contain;} 
.step-list li:last-child::after {display:none !important;} 
.step-list li:nth-child(5)::after {display:none;} 

.step-list li .step {margin:var(--space-20) 0 9px; font-size: var(--font-size-14); color:#00635b; line-height: 1em;} 
.step-list li .name {line-height: 1em; color: #121212; font-weight:600; font-size: var(--font-size-18);} 
.production-list.en .step-list li .name {font-size: 13px;} 
.production-list.en .step-list li .step {margin: var(--space-20) 0 5px;} 

.video-list {display:grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-40);} 
.video-list .tit {font-size: var(--font-size-32); color: #121212; line-height:1em; margin-bottom:var(--space-20);} 
.video-list .video-wrap {max-width:670px; margin:0 auto} 

/* QC/CS */
.img-list {display:grid; grid-template-columns: repeat(3, 1fr); gap: 0 var(--space-40);} 
.img-list .img {margin-bottom:var(--space-30);} 
.img-list .tit {margin-bottom:var(--space-10); color: var(--color-primary); font-weight:600; font-size: var(--font-size-20); line-height:1.5em;} 
.img-list .dot-list li {margin-bottom: 10px; font-size: var(--body-font-size); line-height:1.63em;} 

/*250522 추가*/
.flxWrap {display:flex; flex-wrap:wrap;}
.subsec-pd {padding:clamp(60px, calc( 130 / var(--inner) * 100vw ), 130px) 0;overflow:hidden;}
.main-color {color:#00635b !important;}
.text-center {text-align:center !important;}
.insub-title .title {font-size:clamp(20px, calc( 40 / var(--inner) * 100vw ), 40px); color:#121212; line-height:1.1;font-weight:400;}
.insub-title .sub-tit {margin-top:clamp(12px, calc( 16 / var(--inner) * 100vw ), 16px); font-size:clamp(16px, calc( 20 / var(--inner) * 100vw ), 20px); color:#878787;}
.contwrap + .contwrap {margin-top:clamp(40px, calc( 110 / var(--inner) * 100vw ), 110px);}
.map-contain {padding:clamp(40px, calc( 80 / var(--inner) * 100vw ), 80px) 0;background:#f5f5f5;}
.map-contain .dotitem {display:flex; justify-content:center; padding-top:clamp(30px, calc( 60 / var(--inner) * 100vw ), 60px); }
.map-contain .dotlist {display:flex; align-items:center; padding:0 clamp(10px, calc( 20 / var(--inner) * 100vw ), 20px);}
.map-contain .dotlist .square {width:clamp(42px, calc( 58 / var(--inner) * 100vw ), 58px); height:clamp(14px, calc( 19 / var(--inner) * 100vw ), 19px);}
.map-contain .dotlist .square.bg1 {background:#31cca6;}
.map-contain .dotlist .square.bg2 {background:#747474;}
.map-contain .dotlist .name {display:inline-block;margin-left:10px; color:#878787;}
.contwrap .titlebx {flex:1 0 clamp(160px, calc( 225 / var(--inner) * 100vw ), 225px); max-width:clamp(160px, calc( 225 / var(--inner) * 100vw ), 225px);}
.contwrap .imginfobx {flex:1 0 auto; width:1%;}
.contwrap .textlist {margin-bottom:clamp(20px, calc( 50 / var(--inner) * 100vw ), 50px); padding-bottom:clamp(10px, calc( 15 / var(--inner) * 100vw ), 15px); border-bottom:1px solid #878787;}
.contwrap .textitem + .textitem {margin-top:2px;}
.contwrap .textitem {color:#121212;}
.contwrap .imglist {display:flex; flex-wrap:wrap; margin:-20px;}
.contwrap .imgitem {width:50%; padding:20px;}