@charset "utf-8";
/* 공통 */
.sub-pd { padding: 100px 0; }
.sub-pd.first { padding-bottom: 100px; padding-top: 0; }
.sub-pd.last { padding-bottom: 0; padding-top: 100px; }
.sub-pd.bd { border-bottom: 1px solid #ddd;}
.sub-pd.bd2 { border-bottom: 1px dashed #ddd;}
.sub-pd.bg { background: #fafafa;}
.subtit { font-size: var(--font-size28); font-weight: 600; line-height: 1.5em; color: #222; position: relative; padding-left: 36px; }
.subtit::before { content: ""; position: absolute; left: 0; width: 20px; height: 20px; background: url(../images/sub/tit-bf.png) center no-repeat; background-size: contain; top: 11px; }
.subtit.db { padding-left: 0; text-align: center; margin-bottom: 90px; }
.subtit.db::before { position: relative; left: auto; top: auto; display: block; margin: 0 auto 12px;}
.subtxt { font-size: var(--font-size18); line-height: 1.77em; margin-bottom: 35px; }
.subtxt:last-child { margin-bottom: 0; }

/* 회사소개 */
.hst { padding-top: 120px; position: relative; top: -38px; height: 100%; --hst-sticky: 300px; --hst-line-top: calc(120px + 72px + 9px); }
.hst .line { position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: 0 auto; width: 1px; height: auto; background: #ddd; z-index: -1; pointer-events: none; }
.hst .progress { position: absolute; left: 0; top: 0; width: 100%; height: 0; background: var(--color-primary); }
.hst .group { display: flex; margin-bottom: 100px; position: relative; z-index: 1; }
.hst .group:last-child { margin-bottom: 0; }
.hst .group .left { width: 50%; padding-right: 95px; text-align: right; position: relative; }
.hst .group .left::after { content: ""; position: absolute; right: -8px; top: 72px; width: 18px; height: 18px; background: url(../images/sub/hst-dot.png) center no-repeat; background-size: contain;transition: .7s;}
.hst .group .left h4 { font-size: var(--font-size24); line-height: 1.58em; color: #999; font-weight: 600; transition: color 0.35s ease;}
.hst .group .left h2 { font-size: var(--font-size48); font-weight: 700; line-height: 1.3em; color: #222; margin-top: 12px; }
.hst .group .left.active::after { background-image: url(../images/sub/hst-dot-active.png); width: 40px; height: 40px; right: -20px; }
.hst .group .right { width: 50%; padding-left: 95px; padding-top: 67px; }
.hst .group .right ul li { display: flex; line-height: 1.5em; margin-bottom: 30px; }
.hst .group .right ul li:last-child { margin-bottom: 0; }
.hst .group .right ul li .year { width: 68px; font-size: var(--font-size20); font-weight: 600; color: var(--color-primary); }
.hst .group .right ul li .txt { flex: 1 1 auto; min-width: 0; width: 1%; font-size: var(--font-size18);}
.hst .group .right ul li .txt p { margin-bottom: 10px; }
.hst .group .right ul li .txt p:last-child { margin-bottom: 0; }
.organ { text-align: center; }

/* CEO 인사말 */
.gt { display: flex; align-items: center;}
.gt .info { flex: 1 1 auto; min-width: 0; width: 1%; padding-right: 20px; }
.gt .info h4 { font-size: var(--font-size32); font-weight: 600; color: #222; line-height: 1.43em; margin-bottom: 30px; }
.gt .info h4 span { color: var(--color-primary); }
.gt .info p { line-height: 1.875em; margin-bottom: 30px; }
.gt .info p:last-child { margin-bottom: 0; }
.gt .info p strong { font-weight: 600; }
.gt .info .sign { display: flex; gap: 35px; align-items: center; margin-top: 40px; }
.gt .info .sign h5 { font-size: var(--font-size20); font-weight: 600; line-height: 1.2em; color: #222; }

/* ESG경영 */
.esg { position: relative; top: -49px; }
.esg .col { display: flex; padding: 48px 0; border-bottom: 1px solid #999;}
.esg .col:last-child { border: none; }
.esg .col .img img { border-radius: 16px; }
.esg .col .info { position: relative; flex: 1 1 auto; min-width: 0; width: 1%; padding-left: 36px; padding-top: 72px; }
.esg .col .info .fx { display: flex; align-items: center; justify-content: space-between;}
.esg .col .info h3 { line-height: 1.43em; font-size: var(--font-size32); color: #222; font-weight: 600; margin-bottom: 18px; }
.esg .col .info p { font-size: var(--font-size18); line-height: 1.666em; }
.esg .col .info .tog-btn { display: inline-block; width: 48px; height: 48px; background: url(../images/sub/sub1-3-plus.png) center no-repeat; background-size: contain; text-indent: -9999em; }
.esg .col .info .cnt { padding-top: 48px; margin-top: 142px; border-top: 1px solid #ddd; display: none; }
.esg .col .info .cnt h4 { color: #484848; font-size: var(--font-size24); line-height: 1.58em; font-weight: 600; margin-bottom: 30px; }
.esg .col .info .cnt ul li { display: flex; margin-bottom: 18px; }
.esg .col .info .cnt ul li:last-child { margin-bottom: 0; }
.esg .col .info .cnt ul li .tt { width: 274px; font-weight: 600; color: #484848; padding-left: 18px; position: relative; }
.esg .col .info .cnt ul li .tt::before { content: ""; position: absolute; left: 0; top: 8px; width: 6px; height: 6px; background: var(--color-primary); border-radius: 6px; }
.esg .col .info .cnt ul li .txt { flex: 1 1 auto; min-width: 0; width: 1%; }
.esg .col.active .info .tog-btn { background-image: url(../images/sub/sub1-3-minus.png);}

/* 인증현황 */
.cf { display: flex; align-items: flex-start;}
.cf .subtit { width: 25%; }
.cf .info { width: 75%; padding-top: 10px; }
.certi-list { display: flex; flex-wrap: wrap; gap: 55px 24px; }
.certi-list li { width: calc(100%/4 - 18px); text-align: center; }
.certi-list li .thumb { border-radius: 16px; position: relative; padding-bottom: 142%; display: block; overflow: hidden;}
.certi-list li .thumb img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }
.certi-list li .thumb::after { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; border-radius: 16px; border: 1px solid #ddd;}
.certi-list li .thumb .abbox { position: absolute; left: 0; top: 0; width: 100%; height: 100%; border-radius: 16px; display: flex; align-items: center; justify-content: center; text-align: center; color: #fff; font-size: 14px; line-height: 1.85em; font-weight: 400; background: rgba(0, 0, 0, 0.48); backdrop-filter: blur(6px); padding: 10px 20px; opacity: 0; transition: .3s;}
.certi-list li .tit { font-size: var(--font-size18); font-weight: 600; line-height: 1.5em; margin-top: 18px; }
.certi-list li:hover .thumb .abbox { opacity: 1; }
.certi-list li .txt { line-height: 1.3em; color: #999; margin-top: 8px; font-size: 16px; }
.cf-tbl-wrap { overflow: auto;}
.cf-tbl { width: 100%; border-collapse: collapse; border-top: 2px solid #686868;}
.cf-tbl tr { border-bottom: 1px solid #ddd;}
.cf-tbl tr td { border-right: 1px solid #ddd; text-align: center; padding: 20px 10px; font-size: var(--font-size18); line-height: 1.3em; }
.cf-tbl tr td.left { text-align: left; padding-left: 24px; }
.cf-tbl tr td.fw { font-weight: 600; }

/* sub2 공통 */
.sub2-tit { display: flex; align-items: flex-start;}
.sub2-tit .num { display: flex; width: 32px; height: 32px; border-radius: 32px; align-items: center; justify-content: center; background: var(--color-primary); color: #fff; font-weight: 700; line-height: 1em; margin-right: 18px; }
.sub2-tit strong { flex: 1 1 auto; min-width: 0; width: 1%; font-size: var(--font-size32); font-weight: 600; color: #222; line-height: 1.43em; position: relative; top: -6px;}
.sub2-tit strong span { padding-left: 12px; color: #999; font-size: var(--font-size24); font-weight: 500; position: relative; top: -3px; }
.sub2-wrap { border-top: 2px solid #686868;}
.sub2-wrap .col { border-bottom: 1px dashed #ddd; padding: 48px 0; display: flex; }
.sub2-wrap .col:last-child { border: none; padding-bottom: 0; }
.sub2-wrap.bd { border-top: none; }
.sub2-wrap.bd .col { padding: 0; }
.sub2-wrap.bd .subtit { width: 25%; padding-right: 20px;}
.sub2-wrap .col .sub2-tit { width: 25%; padding-right: 20px; }
.sub2-wrap .col .info { width: 75%; }
.sub2-fx .group { border: 1px solid #ddd; padding: 35px 40px; border-radius: 16px; margin-bottom: 20px; }
.sub2-fx .group:last-child { margin-bottom: 0; }
.sub2-fx .group .tt { position: relative; font-size: var(--font-size20); font-weight: 600; line-height: 1.3em; color: #222; padding-left: 24px; }
.sub2-fx .group .tt sub { font-size: 12px; }
.sub2-fx .group .tt::before { content: ""; position: absolute; left: 0; width: 8px; height: 8px; border-radius: 8px; background: var(--color-primary); top: 9px; }
.sub2-fx .group .txt { font-size: var(--font-size18); line-height: 1.5em; padding-left: 24px; margin-top: 15px; }
.sub2-fx .group.fx { display: flex; }
.sub2-fx .group.fx .tt { width: 180px; }
.sub2-fx .group.fx .tt.wt { width: 240px; }
[lang="en"] .sub2-fx .group.fx .tt.wt { width: 260px; }
.sub2-fx .group.fx .tt.w100 { width: 100%; }
.sub2-fx .group.fx .txt { padding-left: 0; flex: 1 1 auto; min-width: 0; width: 1%; margin-top: 0; }
.sub2-list { display: flex; flex-wrap: wrap; gap: 20px; }
.sub2-list li {width: calc(100%/2 - 10px); position: relative; overflow: hidden; border-radius: 16px; }
.sub2-list li .abtit { width: calc(100% - 20px); position: absolute; left: 10px; bottom: 10px; padding: 15px 18px; border-radius: 8px; border: 1px solid rgba(255, 255, 255, 0.16); background: rgba(255, 255, 255, 0.16); backdrop-filter: blur(6px); color: #fff; }
.sub2-list li .abtit strong { display: inline-block; padding-left: 24px; position: relative; font-size: var(--font-size18); font-weight: 500; line-height: 1.5em; }
.sub2-list li .abtit strong::before { content: ""; position: absolute; left: 0; top: 9px; width: 8px; height: 8px; border-radius: 8px; background: var(--color-primary);}
.sub2-list li .abtit strong span { display: inline-block; padding-left: 8px; color: rgba(255,255,255,0.5); font-size: 16px; font-weight: 400; }
.sub2-list.wt li { width: 100%; }
.sub2-list.bf li span { padding-left: 0; font-weight: 400; line-height: 1.77em; }
.sub2-list.bf li span::before { position: relative; left: auto; top: auto; display: block; margin-bottom: 18px; }

/* 주요 고객사 */
.pt-wrap .col { padding: 48px 0; border-bottom: 1px dashed #ddd; display: flex; align-items: center; }
.pt-wrap .col:last-child { border: none; padding-bottom: 0; }
.pt-wrap .col:first-child { padding-top: 0;}
.pt-wrap .col .img { text-align: center; position: relative; border-radius: 12px; overflow: hidden; margin-right: 48px; }
.pt-wrap .col .img::after { content: ""; position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto; border-radius: 12px; border: 1px solid #ddd;}
.pt-wrap .col .info { flex: 1 1 auto; min-width: 0; width: 1%; }
.pt-wrap .col .info .tt { font-size: var(--font-size20); color: #222; font-weight: 600; line-height: 1.3em; margin-bottom: 12px; }
.pt-wrap .col .info .tt span { padding-left: 16px; display: inline-block; color: #999; font-weight: 400; font-size: 16px; }
.pt-wrap .col .info .txt { font-size: var(--font-size18); line-height: 1.77em; }
.lg-backdrop { background: rgba(0,0,0,.7) !important ;}

/* sub3 공통 */
.sub3-list { display: flex; flex-wrap: wrap; gap: 20px; }
.sub3-list li { width: calc(100%/2 - 10px); border: 1px solid #ddd; padding: 35px 40px 34px; padding-right: 0; border-radius: 16px; }
.sub3-list li span { position: relative; display: block; font-size: var(--font-size18); font-weight: 500; line-height: 1.66em; padding-left: 24px; }
.sub3-list li span::before { content: ""; position: absolute; left: 0; width: 8px; height: 8px; border-radius: 8px; background: var(--color-primary); top: 10px; }
.sub3-list li p { padding-left: 24px; padding-top: 10px; }

/* 용사 */
.fg-video { display: flex; height: 100vh; }
.fg-video .item { width: calc(100%/3); height: 100%; position: relative; transition: .5s;}
.fg-video .item .video-container {position:relative; height:100%; overflow:hidden;}
.fg-video .item video { position: absolute;top:0;left:0;width:100%;height:100%; object-fit: cover;}
.fg-video .item .abbox { padding: 100px 70px; position: absolute; left: 0; top: 0; color: #fff; height: 100%; background: rgba(0,0,0,0.4); width: 100%; }
.fg-video .item .abbox .titbox { display: flex; justify-content: space-between;}
.fg-video .item .abbox .titbox .left .tt { font-size: var(--font-size48); font-weight: 700; line-height: 1.3em; }
.fg-video .item .abbox .titbox .left .small { margin-top: 12px; font-size: var(--font-size20); font-weight: 400; line-height: 1.5em; }
.fg-video .item .abbox .titbox .view { display: inline-block; width: 56px; height: 56px; background: url(../images/sub/video-plus.png) center no-repeat; background-size: contain; transition: .3s;}
.fg-video .item .abbox .txt { font-size: var(--font-size20); line-height: 1.7em; font-weight: 400; margin-top: 35px; padding-top: 40px; border-top: 1px solid rgba(255, 255, 255, 0.32); opacity: 0; transition: opacity 0.3s ease; transition-delay: 0s;}
.fg-video .item:hover { width: 67%; }
.fg-video .item:hover .abbox .titbox .view { background-image: url(../images/sub/video-minus.png); }
.fg-video .item:hover .txt { opacity: 1; transition-delay: 0.5s;}
.fg-video .item:last-child video { object-position: left;}

/* sub3 공통 */
.sub3-wrap .col { padding: 48px 0; border-bottom: 1px dashed #ddd; display: flex; align-items: center;}
.sub3-wrap .col:last-child { border: none; padding-bottom: 0; }
.sub3-wrap .col:first-child { padding-top: 0; }
.sub3-wrap .col .img { width: 40%; border-radius: 24px; overflow: hidden;}
.sub3-wrap .col .info { width: 60%; padding-left: 80px; }
.jum-txt { margin-top: 25px; }
.jum-txt p { position: relative; font-size: var(--font-size18); line-height: 1.77em; padding-left: 16px; margin-bottom: 11px; }
.jum-txt p::before { content: ""; position: absolute; left: 0; top: 13px; width: 4px; height: 4px; border-radius: 4px; background: var(--color-primary); }
.jum-txt p:last-child { margin-bottom: 0; }
.sub3-apply { margin-top: 28px; padding: 20px 18px; background: #fff; display: flex; border-radius: 12px; border: 1px solid #ddd;}
.sub3-apply .tt { width: 78px; font-weight: 600; color: var(--color-primary); }
[lang="en"] .sub3-apply .tt { width: 160px; }
.sub3-apply .txt { flex: 1 1 auto; min-width: 0; width: 1%; }
.sub3-certi { display: flex; flex-wrap: wrap; gap: 20px; }
.sub3-certi .col { width: calc(100%/2 - 10px); display: flex; border: 1px solid #ddd; padding: 28px; border-radius: 24px; align-items: center;}
.sub3-certi .col .img { text-align: center; width: 136px; padding: 10px 26px; background: #f3fafd; border-radius: 12px; }
.sub3-certi .col .img>div { border-radius: 6px; overflow: hidden; position: relative; display: block; padding-bottom: 142%; }
.sub3-certi .col .img>div img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }
.sub3-certi .col .img>div::after { content: ""; position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto; border-radius: 6px; border: 1px solid #ddd;}
.sub3-certi .col .thumb { text-align: center; width: 136px; padding: 35px 10px; background: #f3fafd; border-radius: 12px; }
.sub3-certi .col .thumb .tt { color: var(--color-primary); font-weight: 600; line-height: 1.2em; margin-top: 13px; }
.sub3-certi .col .info { flex: 1 1 auto; min-width: 0; width: 1%; padding-left: 28px; }
.sub3-certi .col .info .tit { font-size: var(--font-size18); font-weight: 500; line-height: 1.77em; }
.sub3-certi .col .info .txt { color: #999; line-height: 1.2em; margin-top: 6px; }

/* 도금 */
.ct-wrap { display: flex; flex-wrap: wrap; gap: 40px; }
.ct-wrap .col { flex: 1; }
.ct-wrap .col .img { border-radius: 24px; overflow: hidden; position: relative; }
.ct-wrap .col .video-container { border-radius: 24px; overflow: hidden; position: relative; }
.ct-wrap .col .tit { position: absolute; right: 0; top: 0; background: var(--color-primary); color: #fff; line-height: 1.1em; display: inline-block; font-size: var(--font-size24); font-weight: 600; padding: 16px 32px; border-radius: 0 0 0 24px;}
.ct-wrap .col .play-btn { width: 56px; height: 56px; border-radius: 60px; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); border: none; background: transparent url(../images/sub/play.png) center no-repeat; background-size: contain; }

/* 정밀 가공 */
.pc-wrap { display: flex; flex-wrap: wrap; gap: 40px; }
.pc-wrap .col { width: calc(100%/2 - 20px); padding: 40px; border-radius: 24px; border: 1px solid #eee; }
.pc-wrap .col .subtxt { margin: 12px 0 50px;}
.pc-group .group { margin-bottom: 20px; background: #fafafa; border: 1px solid #eee; border-radius: 12px; padding: 25px 20px;}
.pc-group .group:last-child { margin-bottom: 0; }
.pc-group .group .tt { color: var(--color-primary); line-height: 1.2em; font-weight: 600; margin-bottom: 15px; }
.pc-group .group .txt { display: flex; gap: 0 10px; flex-wrap: wrap; min-height: 60px;}
.pc-group .group .txt span { display: inline-block; width: calc(100%/5 - 8px); line-height: 1.87em; }
.pc-group .group .txt.wt span { width: 160px; }

/* 인재 채용 */
.rc-wrap { display: flex; flex-wrap: wrap; gap: 21px; }
.rc-wrap .col { width: calc(100%/3 - 14px); padding: 40px; border-radius: 24px; border: 1px solid #eee;}
.rc-wrap .col .tt { font-size: var(--font-size32); font-weight: 600; color: #222; margin: 32px 0 29px;}
.rc-list { display: flex; flex-wrap: wrap; gap: 20px; }
.rc-list li { width: calc(100%/4 - 15px); padding: 28px 24px; border-radius: 16px; border: 1px solid #eee;}
.rc-list li .tt { line-height: 1.2em; font-size: var(--font-size20); color: #222; font-weight: 600; margin-bottom: 24px; }
.rc-list li .tt span { display: inline-block; padding-left: 8px; font-size: 16px; color: #999; font-weight: 400; position: relative; top: -2px; }
.rc-list li .icon { text-align: right; }
.rc-pc { display: flex; flex-wrap: wrap; gap: 104px; justify-content: space-between; margin-bottom: 100px; }
.rc-pc .col { width: calc(100%/4 - 78px); text-align: center; position: relative; }
.rc-pc .col::after { content: ""; position: absolute; right: -79px; top: 126px; width: 52px; height: 24px; background: url(../images/sub/arrow.png) center no-repeat; background-size: contain;}
.rc-pc .col:last-child::after { display: none; }
.rc-pc .col .circle { width: 100%; height: 282px; border-radius: 100%; border: 1px solid #ddd; padding: 45px 10px; margin-bottom: 35px; }
.rc-pc .col .circle .step { color: var(--color-primary); font-weight: 600; line-height: 1.2em; }
.rc-pc .col .circle .icon { margin: 45px 0;}
.rc-pc .col .circle .tt { font-size: var(--font-size20); font-weight: 600; color: #222; line-height: 1.2em; }
.rc-pc .col .txt { line-height: 1.87em; }
.link-tc { display: flex; justify-content: center; gap: 24px;}
.link-tc a { display: flex; align-items: center; justify-content: center; width: 180px; height: 62px; border-radius: 31px; border: 1px solid #ddd; gap: 14px; line-height: 1.5em; font-weight: 600; color: #999; }
[lang="en"] .link-tc a { width: 200px; gap: 8px; }

/* 오시는 길 */
.lct-group .tit a { display: block; position: relative; padding: 45px 0; line-height: 1.2em; border-bottom: 1px solid #ddd; font-size: var(--font-size30); font-weight: 600; color: #2c2c2c;}
.lct-group .tit a::after { content: ""; position: absolute; right: 0; top: 0; bottom: 0; margin: auto; width: 32px; height: 18px; background: url(../images/sub/toggle.png) center no-repeat; background-size: contain; transition: .3s;}
.lct-cnt { padding-top: 45px; display: none; }
.lct-wrap { display: flex; align-items: flex-start;}
.lct-wrap .info { width: 46%; }
.lct-wrap .info ul li { display: flex; align-items: flex-start; margin-bottom: 22px; }
.lct-wrap .info ul li:last-child { margin-bottom: 0; }
.lct-wrap .info ul li .txt { flex: 1 1 auto; min-width: 0; width: 1%; font-size: var(--font-size18); line-height: 1.77em; padding-left: 14px; position: relative; top: -4px; }
.lct-wrap .map { width: 54%; border-radius: 24px; overflow: hidden; }
.lct-wrap .map iframe { width: 100%; height: 350px; }
.lct-group.active .tit a::after { transform: rotate(180deg); }
.lct-group.first .lct-cnt { display: block; }
.lct-group.first .tit a { pointer-events: none;}
.lct-group.first .tit a::after { display: none; }

.rc-apply p { text-align: right; font-weight: 500; margin-bottom: 15px; }
.rc-apply p span { color: var(--color-primary); font-weight: 700; }