@charset "utf-8";
/* 공통 */
.tc { text-align: center;}
.sub-subtit { font-size: var(--font-size18); font-weight: 600; line-height: 1.77em; color: var(--color-primary); margin-bottom: 20px; }
.sub-subtit.clr { margin-bottom: 16px; color: #ccc; }
.subtit { font-size: var(--font-size36); font-weight: 600; line-height: 1.38em; color: #2c2c2c; margin-bottom: 32px; }
.subtit span { color: var(--color-primary);}
.subtxt { font-size: var(--font-size20); line-height: 1.7em; }

/* CEO 인사말 */
.gt { position: relative; }
.gt-img { margin: 60px 0; border-radius: 16px; overflow: hidden;}
.gt .txt.mg { margin-bottom: 180px; }
.gt .txt p { margin-bottom: 40px; }
.gt .txt p:last-child { margin-bottom: 0; }
.gt .ceo { font-size: var(--font-size20); font-weight: 600; color: #2c2c2c; line-height: 1.7em; padding-top: 20px; border-top: 1px solid #eee; margin-top: 60px; text-align: right; }
.gt .symbol { position: absolute; left: 0; bottom: 120px; z-index: -1; }

/* 경영이념 */
.mn-flex { display: flex; align-items: center; margin-bottom: 160px; }
.mn-flex>div { width: calc(100%/2);}
.mn-flex .img { border-radius: 0 160px 0 0; overflow: hidden;}
.mn-flex .img img { width: 100%; }
.mn-flex .info { padding-left: 80px; }
.mn-wrap { display: flex; gap: 24px; flex-wrap: wrap;}
.mn-wrap .item { width: calc(100%/3 - 16px); padding: 40px 10px; text-align: center; border-radius: 16px; position: relative; }
.mn-wrap .item::before { content: ""; position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto; border-radius: 16px; border: 1px solid #eee; transition: .2s;}
.mn-wrap .item .en-tit { margin: 24px 0 10px; color: #ccc; font-weight: 600; line-height: 1.5em; }
.mn-wrap .item .tt { margin-bottom: 18px; font-size: var(--font-size32); font-weight: 600; line-height: 1.43em; color: #2c2c2c; transition: .2s;}
.mn-wrap .item .txt { font-size: var(--font-size18); line-height: 1.77em; }
.mn-wrap .item:hover::before { border-color: var(--color-primary);}
.mn-wrap .item:hover .tt { color: var(--color-primary);}

/* 비전&미션 */
.vs-bg { padding: 100px 10px; border-radius: 16px; background: url(../images/sub/sub1-3-img.jpg) center no-repeat; background-size: cover; color: #fff; margin-bottom: 160px; }
.vs-bg .sub-subtit { color: rgba(255, 255, 255, 0.50);}
.vs-bg .subtit { color: #fff;}
.vs-bg .subtxt { color: rgba(255, 255, 255, 0.80);}
.vs-wrap { display: flex; margin-top: 80px; flex-wrap: wrap; gap: 24px; }
.vs-wrap .item { width: calc(100%/4 - 18px); padding: 24px; border-radius: 16px; border: 1px solid #EEE; background: #FFF; transition: .2s;}
.vs-wrap .item .icon { width: 60px; height: 60px; border-radius: 8px; border: 1px solid #EEE; background: #FAFAFA; display: flex; align-items: center; justify-content: center; transition: .2s;}
.vs-wrap .item .tt { margin: 60px 0 18px; transition: .2s; font-size: var(--font-size24); font-weight: 600; line-height: 1.66em; color: #2c2c2c; }
.vs-wrap .item .txt { font-size: var(--font-size18); font-weight: 500; line-height: 1.77em; transition: .2s;}
.vs-wrap .item:hover { border-color: var(--color-primary); background: var(--color-primary);}
.vs-wrap .item:hover .icon { background: #fff; border-color: #fff; }
.vs-wrap .item:hover .tt { color: #fff; }
.vs-wrap .item:hover .txt { color: #FCEDE5; }

/* 연혁 */
.hst { border-top: 1px solid #eee; border-bottom: 1px solid #eee; }
.hst-wrap { padding: 80px 0; position: relative; border-left: 1px solid #eee; border-right: 1px solid #eee;}
.hst-wrap::before { content: ""; position: absolute; left: 28%; top: 0; width: 1px; height: 100%; background: #eee; }
.hst-wrap .group { margin-bottom: 100px; display: flex; align-items: flex-start;}
.hst-wrap .group:last-child { margin-bottom: 0; }
.hst-wrap .group .year { width: 28%; font-size: var(--font-size48); font-weight: 600; line-height: 1.29em; color: var(--color-primary); padding-right: 20px; padding-left: 32px; position: relative; border-left: 2px solid var(--color-primary); }
.hst-wrap .group .year::after { content: ""; position: absolute; right: -9px; width: 18px; height: 18px; top: 0; background: #fff; border: 6px solid var(--color-primary); border-radius: 18px; bottom: 0; margin: auto; }
.hst-wrap .group .info { width: 72%; padding-left: 48px; padding-top: 11px; }
.hst-wrap .group .info .item { margin-bottom: 27px; display: flex; align-items: flex-start;}
.hst-wrap .group .info .item:last-child { margin-bottom: 0; }
.hst-wrap .group .info .item .month { width: 60px; font-size: var(--font-size24); font-weight: 600; line-height: 1.66em; color: #2c2c2c; }
.hst-wrap .group .info .item ul { flex: 1 1 auto; min-width: 0; width: 1%; padding-top: 4px; }
.hst-wrap .group .info .item ul li { position: relative; padding-left: 14px; margin-bottom: 10px; }
.hst-wrap .group .info .item ul li:last-child { margin-bottom: 0; }
.hst-wrap .group .info .item ul li::before { content: ""; position: absolute; left: 0; top: 14px; width: 4px; height: 4px; border-radius: 4px; background: #ccc; }

/* 사업장 소개 */
.factory .item { display: flex; align-items: center; margin-bottom: 100px; gap: 80px; }
.factory .item:last-child { margin-bottom: 0; }
.factory .item > div { width: calc(100%/2 - 40px);}
.factory .item .img { border-radius: 16px; overflow: hidden;}
.factory .item .info .tt { font-size: var(--font-size32); font-weight: 600; line-height: 1.43em; color: #2c2c2c; padding-bottom: 28px; margin-bottom: 28px; border-bottom: 1px solid #eee;}
.factory .item .info ul li { margin-bottom: 16px; display: flex; align-items: flex-start;}
.factory .item .info ul li:last-child { margin-bottom: 0; }
.factory .item .info ul li img { position: relative; top: 6px; }
.factory .item .info ul li .txt { flex: 1 1 auto; min-width: 0; width: 1%; font-size: var(--font-size20); line-height: 1.7em; padding-left: 16px; }

/* 연구개발분야 */
.area-wrap { display: flex; border-radius: 16px; overflow: hidden;}
.area-wrap .item { height: 400px; position: relative; width: calc(100%/2); transition: .3s;}
.area-wrap .item img { width: 100%; height: 100%; object-fit: cover; }
.area-wrap .item .abbox { position: absolute; left: 0; top: 0; width: 100%; height: 100%; color: #fff; padding: 28px; display: flex; flex-direction: column; justify-content: space-between; }
.area-wrap .item .abbox::before { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.68); transition: .3s;}
.area-wrap .item .abbox .num { text-align: right; position: relative; z-index: 1; }
.area-wrap .item .abbox .num span { display: inline-flex; width: 48px; height: 48px; border-radius: 8px; background: rgba(255, 255, 255, 0.16); backdrop-filter: blur(12px); align-items: center; justify-content: center; color: #fff; font-size: var(--font-size20); font-weight: 600; line-height: 1.7em; }
.area-wrap .item .abbox .info { position: relative; z-index: 1; }
.area-wrap .item .abbox .info .en-tt { color: rgba(255,255,255,0.6); font-weight: 600; line-height: 1.5em; margin-bottom: 6px; }
.area-wrap .item .abbox .info .tt { font-size: var(--font-size28); font-weight: 600; line-height: 1.5em; color: #fff; }
.area-wrap .item .abbox .info ul { margin-top: 0; max-height: 0; overflow: hidden; opacity: 0; visibility: hidden; transition: opacity .3s, visibility .3s, max-height .3s, margin-top .3s; }
.area-wrap .item .abbox .info ul li { position: relative; margin-bottom: 4px; padding-left: 14px; color: rgba(255,255,255,0.8); font-size: var(--font-size18); line-height: 1.77em; font-weight: 500; }
.area-wrap .item .abbox .info ul li:last-child { margin-bottom: 0; }
.area-wrap .item .abbox .info ul li::before { content: ""; position: absolute; left: 0; width: 4px; height: 4px; border-radius: 4px; background: rgba(255, 255, 255, 0.80); top: 13px; }
.area-wrap .item:hover { width: 80%; }
.area-wrap .item:hover .abbox::before { opacity: 0; }
.area-wrap .item:hover .abbox .info ul { opacity: 1; visibility: visible; max-height: 200px; margin-top: 24px; transition: opacity .6s .3s, visibility .6s .3s, max-height .6s .3s, margin-top .6s .3s; }

/* 부설연구소 */
.lab-list { display: flex; gap: 24px; flex-wrap: wrap; margin-bottom: 60px; }
.lab-list .item { width: calc(100%/2 - 12px); }
.lab-list .item .img { margin-bottom: 28px; position: relative; }
.lab-list .item .img img { width: 100%; height: 100%; object-fit: cover; border-radius: 16px 16px 16px 160px; }
.lab-list .item .img .num { font-size: var(--font-size32); font-weight: 600; line-height: 1.43em; color: var(--color-primary); position: absolute; left: 0; bottom: -10px; z-index: 1; }
.lab-list .item .tt { font-size: var(--font-size32); font-weight: 600; line-height: 1.43em; color: #2c2c2c; margin: 28px 0; }
.lab-list .item ul li { position: relative; padding-left: 14px; margin-bottom: 16px; }
.lab-list .item ul li:last-child { margin-bottom: 0; }
.lab-list .item ul li::before { content: ""; position: absolute; left: 0; top: 15px; width: 4px; height: 4px; border-radius: 4px; background: #ccc; }
.lab-note { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 24px; border-radius: 16px; border: 1px solid #eee; background: #fff; }
.lab-note .ico { display: block; width: 14px; height: 22px; background: url(../images/sub/sub2-2-ico.png) center no-repeat; background-size: contain; flex-shrink: 0; }
.lab-note p { font-size: var(--font-size20); font-weight: 500; line-height: 1.7em; color: #2c2c2c; }

/* 인증 및 실적 */
.certi-tab { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 80px; }
.certi-tab li { display: inline-block; }
.certi-tab li a { display: inline-block; padding: 10px 24px; border-radius: 50px; border: 1px solid #EEE; background: #F9F9F9; color: #878787; font-weight: 600; font-size: var(--font-size18); line-height: 1.77em; }
.certi-tab li.active a, 
.certi-tab li a:hover { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }
.certi-tit { font-size: var(--font-size32); font-weight: 600; line-height: 1.43em; color: #2c2c2c; margin-bottom: 40px; position: relative; padding-left: 30px; }
.certi-tit::before { content: ""; position: absolute; left: 0; top: 17px; width: 16px; height: 16px; background: url(../images/sub/tit-bf.png) center no-repeat; background-size: contain; }
.certi-tbl-wrap { overflow: auto;}
.certi-tbl { width: 100%; border-collapse: collapse; border-top: 1px solid #2c2c2c; table-layout: fixed; }
.certi-tbl thead th { background: #fafafa; border-bottom: 1px solid #eee; border-right: 1px solid #eee; border-top: 1px solid #2c2c2c; padding: 12px 24px; text-align: center; font-size: var(--font-size18); font-weight: 600; color: #2c2c2c; line-height: 1.77em; vertical-align: middle; }
.certi-tbl thead th:last-child { border-right: 0; }
.certi-tbl thead th span { display: block; font-size: var(--font-size16); font-weight: 500; color: #a8a8a8; line-height: 1.5em; }
.certi-tbl tbody td { border-bottom: 1px solid #eee; border-right: 1px solid #eee; padding: 12px 24px; font-size: var(--font-size18); font-weight: 400; color: #505050; line-height: 1.77em; text-align: center; vertical-align: middle; word-break: keep-all; }
.certi-tbl tbody td:last-child { border-right: 0; }
.certi-tbl tbody td.subject { text-align: left; }

/* 연구 역량 */
.capacity { padding-top: 100px; margin-top: 100px; border-top: 1px dashed #eee; }
.capacity .subtit { margin-bottom: 60px; }
.capa-wrap { display: flex; flex-wrap: wrap; gap: 24px; }
.capa-wrap .item { width: calc((100% - 48px) / 3); border: 1px solid #eee; border-radius: 16px; padding: 24px 16px 16px 28px; display: flex; flex-direction: column; gap: 24px; background: #fff; }
.capa-wrap .item .txt { min-height: 120px;}
.capa-wrap .item .txt .tt { font-size: var(--font-size20); font-weight: 600; line-height: 1.7em; color: #2c2c2c; margin-bottom: 4px; }
.capa-wrap .item .txt .en { font-size: var(--font-size18); line-height: 1.77em; color: #a8a8a8; }
.capa-wrap .item .icon { width: 68px; height: 68px; border: 1px solid #eee; border-radius: 8px; background: #fafafa; display: flex; align-items: center; justify-content: center; margin-left: auto; }

/* 품질관리 */
.qlty-big { height: 400px; border-radius: 16px; overflow: hidden; margin-bottom: 80px; }
.qlty-big img { width: 100%; height: 100%; object-fit: cover; }
.qlty-flex { display: flex; align-items: flex-start; }
.qlty-flex>div { width: calc(100%/2);}
.qlty-top { margin-bottom: 160px; }
.qlty-grid { display: flex; flex-wrap: wrap; }
.qlty-grid .item { width: 50%; position: relative; padding: 0 0 24px 0; }
.qlty-grid .item:nth-child(odd) { padding-right: 32px; border-right: 1px dashed #eee; }
.qlty-grid .item:nth-child(even) { padding-left: 32px; }
.qlty-grid .item:nth-child(-n+2) { border-bottom: 1px dashed #eee; padding-bottom: 24px; margin-bottom: 0; }
.qlty-grid .item:nth-child(n+3) { padding-top: 32px; padding-bottom: 0; }
.qlty-grid .item .tt::before { content:""; display: block; width: 16px; height: 16px; background: url(../images/sub/tit-bf.png) center no-repeat; background-size: contain; margin-bottom: 18px; }
.qlty-grid .item .tt { font-size: var(--font-size22); font-weight: 600; line-height: 1.63em; color: #2c2c2c; margin-bottom: 18px; position: relative; }
.qlty-grid .item .en { font-size: var(--font-size18); line-height: 1.77em; color: #a8a8a8; }
.qlty-btm { align-items: stretch; }
.qlty-btm .left { display: flex; flex-direction: column; justify-content: space-between; }
.qlty-btm .logos { display: flex; gap: 9px; align-items: flex-start; }
.qlty-btm .right { display: flex; gap: 24px; }
.qlty-btm .right .cert { width: calc(100%/2 - 12px); }

/* 사업분야 */
.biz { position: relative; }
.biz .item { display: flex; align-items: center; gap: 80px; }
.biz .item > div { width: calc(100%/2 - 40px);}
.biz .item .img { border-radius: 16px 16px 160px 16px; overflow: hidden; }
.biz .item .img img { width: 100%; display: block; }
.biz .item .info { position: relative; z-index: 1; }
.biz .item .info .subtit { margin-bottom: 0; }
.biz .item .info .subtxt { margin-top: 24px; }
.biz .item .info .subtxt:first-of-type { margin-top: 32px; }
.biz .symbol { position: absolute; right: -240px; top: 20%; z-index: 0; pointer-events: none; }
.biz-top { margin-bottom: 100px; }
.biz-top .subtit { margin-bottom: 40px; }
.biz-top .icon { display: flex; align-items: center; justify-content: center; }
.biz-list { display: flex; flex-direction: column; gap: 80px; margin-bottom: 100px; }
.biz-list .item.reverse { flex-direction: row-reverse; }
.biz-list .item.reverse .img { border-radius: 16px 16px 16px 160px; }
.biz-list .item .titbox { margin-bottom: 32px; }
.biz-list .item .titbox .tt { font-size: var(--font-size24); font-weight: 600; line-height: 1.66em; color: #2c2c2c; margin-bottom: 8px; }
.biz-list .item .titbox .point { position: relative; display: inline-block; font-size: var(--font-size32); font-weight: 600; line-height: 1.43em; color: var(--color-primary); padding-left: 14px; }
.biz-list .item .titbox .point::before { content: ""; position: absolute; left: 0; top: 7px; width: 32px; height: 32px; border-radius: 50%; background: rgba(238, 130, 69, 0.16); z-index: -1; }
.biz-list .item .info .subtxt { margin-top: 24px; }
.biz-list .item .info .subtxt:first-of-type { margin-top: 0; }
.biz-btn { text-align: center; }
.biz-btn a { display: inline-flex; align-items: center; justify-content: center; gap: 10px; background: #121212; color: #fff; font-size: var(--font-size18); font-weight: 600; line-height: 1.77em; padding: 10px 28px; border-radius: 8px; }
.biz-btn a::after { content: ""; width: 14px; height: 14px; background: url(../images/main/sec1-view.png) center no-repeat; background-size: contain; }

/* 주가정보 */
.stock-top { display: flex; gap: 24px; margin-bottom: 60px; }
.stock-box { border: 1px solid #eee; border-radius: 16px; background: #fff; padding: 32px; height: 240px; display: flex; flex-direction: column; justify-content: space-between; }
.stock-box.current { width: 708px; flex-shrink: 0; }
.stock-box:not(.current) { flex: 1 1 auto; min-width: 0; }
.stock-box .tt { font-size: var(--font-size18); font-weight: 500; line-height: 1.77em; color: #505050; }
.stock-box.current .btm { display: flex; align-items: flex-end; justify-content: space-between; }
.stock-box.current .price { display: flex; align-items: flex-end; gap: 8px; }
.stock-box.current .price .num { font-size: 68px; font-weight: 600; line-height: 1em; color: #2c2c2c; }
.stock-box.current .price .unit { font-size: var(--font-size24); font-weight: 500; line-height: 1.66em; color: rgba(44, 44, 44, 0.5); }
.stock-box.current .compari { display: flex; align-items: center; gap: 20px; font-size: 16px; font-weight: 500; line-height: 1.5em; }
.stock-box.current .compari .percent { display: inline-flex; align-items: center; gap: 8px; }
.stock-box.current .compari .percent svg { display: block; }
.stock-box.current .compari.plus { color: #f40006; }
.stock-box.current .compari.plus .percent svg { transform: rotate(180deg); }
.stock-box.current .compari.minus { color: #25b6ff; }
.stock-box:not(.current) .num { font-size: var(--font-size36); font-weight: 600; line-height: 1.38em; color: #2c2c2c; text-align: right; }
.stock-tbl { display: flex; border-top: 1px solid #2c2c2c; }
.stock-tbl .col { flex: 1 1 auto; min-width: 0; }
.stock-tbl .th { background: #fafafa; border-bottom: 1px solid #eee; border-right: 1px solid #eee; padding: 16px 24px; text-align: center; font-size: var(--font-size18); font-weight: 600; line-height: 1.77em; color: #2c2c2c; }
.stock-tbl .td { border-bottom: 1px solid #eee; border-right: 1px solid #eee; padding: 16px 24px; text-align: center; font-size: var(--font-size18); line-height: 1.77em; color: #505050; }
.stock-tbl .col:last-child .th,
.stock-tbl .col:last-child .td { border-right: 0; }

/* IR자료 */
.ir-point { display: flex; flex-wrap: wrap; gap: 24px; margin-bottom: 160px; }
.ir-point .item { width: calc((100% - 72px) / 4); padding: 24px; border-radius: 16px; border: 1px solid #eee; background: #fafafa; }
.ir-point .item:nth-child(n+5) { width: calc((100% - 48px) / 3); }
.ir-point .item .label { display: inline-flex; align-items: center; justify-content: center; padding: 6px 14px; border-radius: 8px; border: 1px solid var(--color-primary); background: #fff; color: var(--color-primary); font-size: 16px; font-weight: 600; line-height: 1.5em; margin-bottom: 24px; }
.ir-point .item .txt { font-size: var(--font-size20); font-weight: 500; line-height: 1.7em; color: #2c2c2c; }
.ir-global .titbox { margin-bottom: 60px; }
.ir-global .titbox .subtit { margin-bottom: 0; }
.ir-map { position: relative; width: 100%; }
.ir-map > img { width: 100%; display: block; }
.ir-map .dot { position: absolute; width: 24px; height: 24px; border: 7px solid var(--color-primary); border-radius: 50%; background: #fff; cursor: pointer; z-index: 1; box-sizing: border-box; }
.ir-map .dot .name { position: absolute; left: 50%; bottom: calc(100% + 10px); transform: translateX(-50%); padding: 8px 24px; border-radius: 8px; border: 1px solid #ddd; background: #fff; font-size: var(--font-size20); font-weight: 600; line-height: 1.7em; color: #2c2c2c; white-space: nowrap; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .2s, visibility .2s; }
.ir-map .dot:hover { z-index: 2; }
.ir-map .dot:hover .name { opacity: 1; visibility: visible; }