@charset "utf-8";

/* 회사개요 */
.outline { width: 100%; position: relative;}
.outline-box { display: flex; z-index: 1; position: relative; padding-bottom: 100px; }
.outline-left {background: url(../images/sub/sub1_1.png) center no-repeat; background-size: cover; height: 540px; border-radius: 0 100px 0 0; max-width: 45%; width: 100%; box-shadow: 10px 10px 20px rgba(0,0,0,0.2); }
.outline-right { padding-top: 30px; padding-left: 120px;}
.outline-right>h3 { font-size: 56px; font-weight: 700; color: #333; line-height: 1.2em;}
.outline-right>h3 span { color: #069ba2;}
.outline-abbox { width: 100%; background: #f2f6fa; height: 430px; position: absolute; bottom: 0; left: 0;}
.outline-textbox { margin-top: 100px;}
.outline-textbox span { font-size: 20px; font-weight: 700; line-height: 1.5em; letter-spacing: -.03em; color: #004c94;}
.outline-textbox p { font-size: 18px; font-weight: 300; color: #454545; letter-spacing: -.03em; line-height: 1.556em; margin-top: 30px;}

/* 회사연혁 */
.history { background: url(../images/sub/sub1_2.png) 0 150% no-repeat; background-size: contain; width: 100%; position: relative; padding: 25px 0 50px; margin-top: 20px;}
.group:first-child .groupbox { margin-bottom: 40px;}
.group:nth-child(4) .groupbox { margin-bottom: 70px;}
.group:last-child .groupbox { margin-bottom: 0;}
.groupbox{ display: flex; align-items: flex-start; margin-bottom: 100px;}
.history .group:nth-child(even) .groupbox { text-align: right; flex-direction: row-reverse;}
.history .group {position:relative; }
.history .group:last-child{margin-bottom:0;}
.history .group .year {font-size:22px; line-height:1.3em; letter-spacing:-.03em; font-weight: 700; color: #333333; position: relative; padding-top: 5px;}
.groupbox span { font-size: 18px; line-height: 2.2em; font-weight: 300; color: #333; letter-spacing: -.03em; }
.history .group:nth-child(odd) span {padding-left: 60px;}
.history .group:nth-child(even) span { padding-right: 60px;}
.history .group:nth-child(odd) .groupbox { width: 50%; position: relative; margin-left: 50%;}
.history .group:nth-child(even) .groupbox { width: 50%; position: relative;  margin-left: 0;}
.history .group:nth-child(even) span {text-align:right;}
.history:before {content:''; position: absolute; width: 1px; background-color: #ddd; left: 0; right: 0; margin: auto; top: 0; bottom: 15px;}
.history .group:nth-child(odd) .year::before {left: -24px; border: 13px solid transparent;  background-image:linear-gradient(#fff, #fff),linear-gradient(to left, #004c94 0%, #14a392 80%); background-origin: border-box;
background-clip: content-box, border-box;}
.history .group:nth-child(even) .year::before {right: -24px;  border: 13px solid #999; background: #fff;}
.history .group .year:before {content:''; position:absolute; width:48px; height:48px; border-radius:100%; top: 0; bottom: 0; margin: auto;}
.history .group:nth-child(odd) .year { padding-left: 50px;}
.history .group:nth-child(even) .year { padding-right: 50px; text-align: right;}

/* MISSION & VISION */
.vision { width: 100%; background: url(../images/sub/mission_bg.jpg) center no-repeat; background-size: cover; padding: 100px 0; }
.vision-list{ display: flex; justify-content: space-between; gap: 40px;}
.vision-list>li { text-align: center;}
.vision-imgbox { position: relative; border-radius: 15px;} 
.vision-imgbox>img { width: 100%; object-fit: cover; display: block;}
.vision-ttl { width: 100px; height: 100px; position: absolute; bottom: -20px; right: -20px; color: #fff; display: flex; justify-content: center; align-items: center; font-size: 20px; letter-spacing: -.03em; font-weight: 600;border-radius: 30px 0 30px 0;}
.vision-imgbox .clr1 { background: #004c94;}
.vision-imgbox .clr2 { background: #008aa2;}
.vision-imgbox .clr3 { background: #15a391;}
.vision-list>li>p { font-size: 18px; font-weight: 300; letter-spacing: -.03em; line-height: 1.556em; margin-top: 60px;}

/* 조직도 */
.organ { width: 100%; background: #f2f6fa; padding: 100px 0; text-align: center;}
.organ .contain>h3 { font-size: 35px; line-height: 1.3em; color: #333; letter-spacing: -.03em; font-weight: 200;}
.organ-fw { font-weight: 500;}
.organ-clr { font-weight: 500; color: #004c94;}
.organ-img { margin-top: 60px;}

/* 찾아오시는 길 */
.contact-box {  margin-top: 40px; display: flex; align-items: center; }
.contact-logo { width: 34%; text-align: center;}
.contact-list { width: 66%; padding: 5px 0; border-left: 1px solid #ddd; padding-left: 100px;}
.contact-list>li { display: flex; margin-bottom: 20px;}
.contact-list>li:last-child{ margin-bottom: 0;}
.con-ttl { font-size: 18px; font-weight: 600; letter-spacing: -.03em; color: #333; width: 150px; position: relative; padding-left: 40px;}
.contact-text { font-size: 18px; font-weight: 400; letter-spacing: -.03em; color: #454545; line-height: 1.556em;} 
.contact-text span { color: #999; font-weight: 300;}
.con-address::before { content: ""; position: absolute; left: 0; top: 3px; width: 20px; height: 20px; background: url(../images/sub/sub_locate.png) center no-repeat;}
.con-fax::before { content: ""; position: absolute; left: 0; top: 3px; width: 20px; height: 20px; background: url(../images/sub/sub_fax.png) center no-repeat;}
.con-tel::before { content: ""; position: absolute; left: 0; top: 3px; width: 20px; height: 20px; background: url(../images/sub/sub_tel.png) center no-repeat;}

/* 우리가 하는 일 */
.work { width: 100%; position: relative;}
.work-bg { width: 100%; height: 475px; background: url(../images/sub/sub2_1.jpg) center no-repeat; background-size: cover; }
.work-list { display: flex; gap: 10px; justify-content: space-between; position: relative; margin-top: -150px;}
.work-list>li { width: calc(100%/3);  border-radius: 15px; }
.work-list>li:first-child { background: url(../images/sub/sub_work1.png) center no-repeat; background-size: cover; }
.work-list>li:nth-child(2) { background: url(../images/sub/sub_work2.png) center no-repeat; background-size: cover; }
.work-list>li:last-child { background: url(../images/sub/sub_work3.png) center no-repeat; background-size: cover; }
.work-grabox { width: 100%; height: 380px; padding: 50px 0 100px 40px; background: rgba(0,0,0,0.85) ; position: relative; border-radius: 15px; }
.work-grabox>h2 { color: #fff; font-size: 34px; font-weight: 600; line-height: 1.2em;}
.work-sub { margin-top: 35px; display: block;}
.work-sub>li { color: #fff; font-size: 18px; font-weight: 300; letter-spacing: -.03em; line-height: 1em; margin-bottom: 20px; position: relative;padding-left: 12px;}
.work-sub>li:last-child { margin-bottom: 0;}
.work-sub>li::before { position: absolute; content: ""; left: 0; top: 5px; width: 4px; height: 4px; border-radius: 100%; background-color: #fff;}
.work-grabox>img { position: absolute; bottom: -20px; right: -20px; z-index: 1;}
.work-list>li:hover>.work-grabox { background: linear-gradient(to right, #14a392, #004c94);}
.work-list>li:hover>.work-grabox .work-sub { display: none;}
.work-list>li:hover>.work-grabox .work-sub-m { display: block;}
.work-sub-m { display: none;}
.work-sub-m>li { font-size: 16px; line-height: 1.2em; margin-bottom: 12px; font-weight: 300;}

/* PLM 컨설팅 */
.consult-img { margin-top: 10px;}

/* PLM 구축서비스 및 유지보수 */
.build-sec1 { padding-bottom: 120px;}
.build-sec1>h2 { font-size: 50px; font-weight: 700; color: #2c2c2c; letter-spacing: -.03em; line-height: 1em;}
.build-sec1>span { font-size: 16px; font-weight: 500; line-height: 1.5em; color: #004c94; display: block; margin-top: 5px;}
.build-sec1-box { padding-top: 30px; margin-top: 30px; border-top: 1px solid #ddd;}
.build-sec1-box>p { font-size: 16px; font-weight: 400; line-height: 1.6em; color: #505050; letter-spacing: -.03em;}
.build-sec1-box>img { width: 100%; display: block; margin-top: 40px;}

.build-sec2 { width: 100%; background: #f2f6fa; padding: 120px 0;}
.build-sec2 .contain { display: flex; }
.build-tit { font-size: 30px; font-weight: 600; line-height: 1.25em; letter-spacing: -.03em; color: #333; position: relative; width: 18%;}
.build-tit::before { content: ""; position: absolute; left: 0; top: -20px; width: 14px; height: 14px; border-radius: 100%; background: #0fa394;}
.build-ctt { width: 82%;}
.build-sec2-list { display: flex; justify-content: space-between; gap: 40px;} 
.build-sec2-list>li { width: calc(100%/4); background: #fff;border-radius: 6px; box-shadow: 2px 2px 16px rgba(0,0,0,0.14); padding: 30px; }
.build-sec2-list>li>h4 { font-size: 18px; font-weight: 700; line-height: 1.2em; color: #0fa394; margin-top: 25px; letter-spacing: -.03em;}
.build-sec2-list>li>p { font-size: 16px; font-weight: 400; line-height: 1.2em; letter-spacing: -.03em; margin-top: 10px;}
.build-mr { margin-left: -10px;}

.build-sec3 { padding: 120px 0 100px;}
.build-sec3 .contain { display: flex;}
.build-sec3-list { border-top: 1px solid #333333;}
.build-sec3-list>li { border-bottom: 1px solid #ddd; padding: 30px 20px; display: flex;}
.build-sec3-ttlbox { width: 55%;}
.build-sec3-ttl { font-size: 22px; font-weight: 600; line-height: 1.2em; letter-spacing: -.03em; color: #333; position: relative; padding-left: 15px; margin-bottom: 15px;}
.build-sec3-ttl:last-child { margin-bottom: 0;}
.build-sec3-ttl::before { width: 5px; height: 5px; border-radius: 100%; content: ""; position: absolute; left: 0; top: 10px;  background: #333;}
.build-sec3-sub>li{ font-size: 16px; line-height: 1.556em; font-weight: 300; color: #454545; letter-spacing: -.03em; margin-bottom: 10px;}
.build-sec3-sub>li:last-child { margin-bottom: 0;}
.build-sec3-sub>li>span { display: block; padding-left: 15px; margin-top: 3px;}

.build-sec4 { width: 100%; background: #f8f8f8; padding: 120px 0 100px;}
.build-sec4 .contain { display: flex;}
.build-sec4-imgbox { width: 100%; display: flex; align-items: center; justify-content: center; padding: 70px; background: #fff; border: 4px solid #ddd; gap: 70px;}
.build-sec4-list { width: 23%; }
.build-sec4-list>li { width: 100%; border: 1px solid #ddd; font-size: 18px; font-weight: 400; letter-spacing: -.03em; color: #333; padding: 13px 0; text-align: center; margin-bottom: 40px;}
.build-sec4-list>li:last-child { margin-bottom: 0;}

.build-sec5 { padding-top: 120px;}
.build-sec5 .contain { display: flex;}
.build-sec5-list { display: flex; justify-content: space-between; gap: 80px;}
.build-sec5-list>li { text-align: center;}
.build-sec5-imgbox { border-radius: 100%;}
.build-sec5-imgbox img { border-radius: 100%;}
.build-sec5-list>li>h4 { font-size: 22px; line-height: 1.5em; letter-spacing: -.03em; font-weight: 500; color: #333; margin-top: 20px;}

/* PLM 패키지 공급 */
.team-sec2 { padding: 100px 0; background: #f8f8f8;}
.team-sec2-box { display: flex; gap: 30px; background: #fff; border: 4px solid #ddd; align-items: center;}
.team-ttl { width: 150px; border-radius: 24px; padding: 10px 0; color: #fff; font-weight: 200; font-size: 16px; letter-spacing: -.03em; text-align: center;}
.team-list>li { display: flex; margin-bottom: 60px; align-items: center;}
.team-list>li:last-child { margin-bottom: 0;}
.team-clr1 { background: #7d885e;}
.team-clr2 { background: #708ea7;}
.team-clr3 { background: #b18757;}
.team-txt { font-size: 16px; line-height: 1.2em; letter-spacing: -.03em; font-weight: 300; color: #333; padding-left: 20px;}
.team-sec2-bt { line-height: 68px !important; min-width: 240px !important;  display: inline-block; font-weight: 400 !important;}
.team-sec2-btbox { text-align: center; margin-top: 60px;}

/* PLM 업종특화패키지 */
.pkg-sec1 { padding-bottom: 100px; }
.pkg-sec1-box { background: #fff; border: 6px solid #f1f1f1; padding: 50px 50px 50px 75px; display: flex; margin-bottom: 60px; gap: 50px;}
.pkg-sec1-box>div { width: 50%;}
.pkg-sec1-text>h3 { font-size: 80px; font-weight: 700; line-height: 1em; letter-spacing: -.03em; font-family: 'Noto Sans', sans-serif;}
.pkg-sec1-text>p { font-size: 22px; line-height: 1.636em; font-weight: 400; color: #333; letter-spacing: -.03em; margin-top: 40px;}
.pkg-sec1-text>p span { font-weight: 700;}
.pkg-sec1-img img{ width: 100%; display: block;}
.pkg-clr1 { color: rgba(0,76,148,0.2); }
.pkg-clr2 { color: rgba(20,163,146,0.2); }
.pkg-mg { margin-bottom: 0;}

.pkg-sec2 { padding: 100px 0; background: #f2f6fa;}
.pkg-sec2 .contain { display: flex; align-items: center; gap: 20px;}
.pkg-left { width: 43%; background: #fff; }
.pkg-right { width: 43%; background: #fff;}
.pkg-center { width: 14%; text-align: center;}
.pkg-text { padding: 45px 50px 60px; border: 1px solid #ccc;}

.pkg-ttl { width: 100%; padding: 30px 0; color: #fff; font-size: 26px; line-height: 1.5em; letter-spacing: -.03em; font-weight: 500; text-align: center;}
.pkg-t-clr1{ background: #777;}
.pkg-t-clr2 { background: linear-gradient(to right, #14a392, #004c94);}
.pkg-text { display: flex;}
.pkg-text-left { position: relative; border-right: 1px solid #ddd; padding: 20px 40px 20px 0;}
.pkg-text-left>li { font-size: 18px; font-weight: 600; color: #999; letter-spacing: -.03em; line-height: 1.2em; margin-bottom: 60px; position: relative;}
.pkg-text-left>li:last-child { margin-bottom: 0;}
.pkg-text-left>li::after { content: ""; position: absolute; right: -45px; top: 6px; width: 9px; height: 9px; border-radius: 100%; background: #999;}
.af-clr1::after { background: #cf0000 !important;}
.af-clr2::after { background: #60a01b !important;}
.pkg-text-right { padding: 20px 0 20px 60px;}
.pkg-text-right>li { font-size: 22px; font-weight: 600; line-height: 1em; color: #555; letter-spacing: -.03em; margin-bottom: 59.8px;}
.pkg-text-right>li:last-child { margin-bottom: 0;}
.mb-ps>li { margin-bottom: 71px;}
.pkg-center>p { color: #0fa394; font-weight: 500; font-size: 20px; line-height: 1.333em; letter-spacing: -.03em; margin-top: 30px;}

/* 고객사 */
.csm { background: #f8f8f8; padding: 100px 0 90px; } 

/* 실적 */
.pfm-list { border-top: 1px solid #242424;}
.pfm-list>li { padding: 30px 10px; border-bottom: 1px solid #ddd; display: flex;}
.pfm-ttl { font-size: 18px; font-weight: 700; line-height: 1em; letter-spacing: -.03em; color: #333; padding-left: 15px; position: relative; width: 20%;}
.pfm-ttl::before { border-radius: 5px; width: 5px; height: 5px; background: #333; content: ""; position: absolute; left: 0; top: 6px;}
.pfm-sub>li { font-size: 16px; font-weight: 300; color: #454545; letter-spacing: -.03em; margin-bottom: 7px; padding-left: 7px; position: relative;}
.pfm-sub>li::before { width: 2px; height: 2px; border-radius: 100%; background: #454545; content: ""; position: absolute; left: 0; top: 12px;}
.pfm-sub>li:last-child { margin-bottom: 0;}
.pfm-clr { color: #004c94;}

/* 인재채용 */
.hm-common-ttl { font-size: 42px; line-height: 1em; letter-spacing: -.03em; font-weight: 700; color: #333;}
.hm-common-txt { font-size: 18px; font-weight: 300; line-height: 1.1em; letter-spacing: -.03em; color: #454545; margin-top: 20px;}

.hm-sec1 {padding-bottom: 100px;}
.hm-sec1-list { margin-top: 40px; display: flex; gap: 40px; flex-wrap: wrap;}
.hm-sec1-list>li { border: 1px solid #ddd; width: calc(100%/2 - 20px); padding: 60px 20px 60px 60px; display: flex; align-items: center;}
.hm-sec1-tlt { font-size: 20px; line-height: 1em; color: #fff; font-weight: 700; display: flex; align-items: center; justify-content: center; width: 135px; height: 135px; position: relative; }
.hm-sec1-txt { font-size: 16px; font-weight: 300; line-height: 1.556em; color: #454545; letter-spacing: -.03em; padding-left: 50px; width: 75%;}
.hm-clr1::after { width: 100%; height: 100%; position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto; content: ""; z-index: -1; background: #14a392; border-radius: 30px;}
.hm-clr2::after { width: 100%; height: 100%; position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto; content: ""; z-index: -1; background: #0090a3; border-radius: 100%;}
.hm-clr3::after { width: 100%; height: 100%; position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto; content: ""; z-index: -1; background: #00689b; border-radius: 30px; transform: rotate(45deg);}
.hm-clr4::after { width: 100%; height: 100%; position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto; content: ""; z-index: -1; background: #004d94; border-radius: 0 30px 0 30px;}

.hm-sec2 { padding: 100px 0; background: #fafafa;}
.hm-sec2-box { display: flex; align-items: center; justify-content: center; width: 100%; background: #fff; border: 1px solid #ddd;margin-top: 40px; padding: 60px 0;}

.hm-sec3 { padding-top: 100px;}
.hm-sec3-list { margin-top: 40px; display: flex; justify-content: space-between; gap: 30px; flex-wrap: wrap;}
.hm-sec3-list>li { border: 1px solid #ddd; width: calc(100%/3 - 20px); padding: 30px; position: relative; overflow: hidden; height: 200px;}
.hm-sec3-list>li>h4 { font-size: 22px; line-height: 1em; font-weight: 700; letter-spacing: -.03em; color: #333; margin-bottom: 20px;}
.hm-sec3-sub>li { line-height: 1.5em; font-size: 16px; font-weight: 300; color: #454544; letter-spacing: -.03em; padding-left: 10px; position: relative; margin-bottom: 3px;}
.hm-sec3-sub>li:last-child { margin-bottom: 0;}
.hm-sec3-sub>li::before { content: ""; position: absolute; left: 0; top: 10px; background: #073d88; width: 3px; height: 3px; border-radius: 100%;}
.hm-sec3-list>li>img { position: absolute; right: -22px; bottom: -22px;}