@charset "utf-8";
/* 공통 */
.sub-pd { padding: 120px 0;}
.sub-pd.first { padding-bottom: 120px; padding-top: 0; } 
.sub-pd.last { padding-top: 120px; padding-bottom: 0; }
.subtit { font-size: var(--font-size34); margin-bottom: 30px; font-weight: 700; line-height: 1.6em; }
.subtit.tc { text-align: center; }
.subtit span { color: var(--color-primary); }
.subtit.mg { margin-bottom: 50px; }
.subtxt { font-size: var(--font-size18); line-height: 1.666em; font-weight: 400; }
.subtxt.tc { text-align: center; }

/* sub2 공통 */
.sub2-tit { font-size: var(--font-size22); font-weight: 400; line-height: 1.36em; }
.sub2-tit strong {font-weight: 600;}
.sub2-img { margin: 50px 0; border-radius: 16px; overflow: hidden;}
.sub2-txt p { margin-bottom: 35px; color: #454545; letter-spacing: -.03em;}
.sub2-txt p:last-child { margin-bottom: 0; }
.sub2-txt p.subtxt-tit { font-size: var(--font-size18); font-weight: 700;  margin-bottom: 5px; }

/* 내부정보관리규정 */
.rule-gray { padding: 40px; background: #f8f8f8; border: 1px solid #ddd;}
.rule-gray .subtxt { line-height: 1.778em; margin-bottom: 35px; }
.rule-gray .subtxt:last-child { margin-bottom: 0; }
.rule-tit { font-size: var(--font-size28); color: #242424; font-weight: 600; line-height: 1.2em; margin-bottom: 25px; }

/* 브로슈어 */
.brochure { display: flex; padding-top: 20px; border-top: 1px solid #242424; gap: 50px 40px; flex-wrap: wrap;}
.brochure .col { width: calc(100%/2 - 20px); display: flex; align-items: center;}
.brochure .col .thumb { width: 51%; }
.brochure .col .thumb>div { position: relative; overflow: hidden; padding-bottom: 139%; display: block; }
.brochure .col .thumb>div::after { content: ""; position: absolute; left: 0; top: 0; right: 0; bottom: 0; margin: auto; border: 1px solid #ddd;}
.brochure .col .thumb>div img { position: absolute; top: 50%; left: 0; transform: translateY(-50%); -ms-transform: translateY(-50%); -webkit-transform: translateY(-50%); width: 100%; height: auto !important; max-width: 100%; min-height: 100%; object-fit: contain; }
.brochure .col .info { width: 49%; padding-left: 40px; }
.brochure .col .info h4 { font-size: var(--font-size26); line-height: 1.2em; color: #242424; font-weight: 600; }
.brochure .col .info p { line-height: 1.3em; margin: 10px 0 50px; }

/* 홍보영상 */
.video-sec { background: #ececec; margin-top: 80px; }

/* 상상협력제안 */
.pp-organ { text-align: center; padding: 60px 10px; border: 1px solid #ddd; border-radius: 16px; }
.pp-txt.mt { margin-top: 55px; }
.pp-txt h4 { font-size: var(--font-size24); font-weight: 600; line-height: 1.25em; color: #242424; margin-bottom: 24px; }
.pp-txt p { position: relative; padding-left: 12px; }
.pp-txt p::before { content: ""; position: absolute; left: 0; width: 4px; height: 4px; border-radius: 4px; background: var(--color-primary); top: 12px; }

/* ESG경영 */
.esg { margin-top: 35px; }
.esg .col { margin-bottom: 30px; padding: 30px; border: 1px solid #ddd; display: flex; border-radius: 16px; border: 1px solid #ddd; align-items: center;}
.esg .col .info { flex: 1 1 auto; min-width:0; width:1%; padding-left: 30px; }
.esg .col .info h4 { font-size: var(--font-size24); font-weight: 600; color: #242424; line-height: 1.2em; margin-bottom: 8px; } 

/* sub6 공통 */
.sub6-wrap { border-top: 1px solid #ddd;}
.sub6-wrap .col { display: flex; align-items: center; border-bottom: 1px solid #ddd; padding: 38px 40px;}
.sub6-wrap .col .titbox { display: flex; margin-right: 100px; align-items: flex-start;}
.sub6-wrap .col .titbox h4 { padding-left: 30px; font-size: var(--font-size24); font-weight: 600; color: #242424; line-height: 1.2em; } 
.sub6-wrap .col .info { flex:1 1 auto; min-width:0; width:1%; }
.sub6-wrap .col .info .group { margin-bottom: 35px; }
.sub6-wrap .col .info .group:last-child { margin-bottom: 0;}
.sub6-wrap .col .info .group h5 { font-size: var(--font-size18); font-weight: 600; line-height: 1.444em; }
.sub6-wrap .col .info .group .subtxt { line-height: 1.444em; }
.sub6-wrap .col .info .group .subtxt strong { font-weight: 500; }
.sub6-wrap .col .info .group a { font-weight: 400; color: #888; border-radius: 30px; border: 1px solid #ddd; display: inline-block; padding: 11px 24px 9px; margin-top: 20px; }
.sub6-wrap .col .info .group a:hover { border-color: var(--color-primary); color: #fff; background: var(--color-primary);}
.jum-txt p { position: relative; padding-left: 10px; line-height: 1.444em; }
.jum-txt p::before { content: ""; position: absolute; left: 0; width: 5px; height: 1px; background: #454545; top: 12px; }

/* 인재상 */ 
.talent { margin-top: 55px; display: flex; gap: 75px 40px; flex-wrap: wrap;}
.talent .col { width: calc(100%/2 - 20px); text-align: center; }
.talent .col img { width: 100%; border-radius: 16px; }
.talent .col .subtxt { line-height: 1.333em; margin-top: 27px; }

/* 인재육성 */
.tn-big { margin-bottom: 60px; border-radius: 32px; overflow: hidden;}

/* 복리후생 */
.wf .col { padding: 60px 0; display: flex; align-items: center; border-bottom: 1px dashed #ddd;}
.wf .col:first-child { padding-top: 0; }
.wf .col:last-child { padding-bottom: 0; border: none; }
.wf .col .circle { width: 200px; height: 200px; border-radius: 100%; display: flex; align-items: center; justify-content: center; background: var(--color-primary);}
.wf .col:nth-child(even) .circle { background: var(--color-secondary);}
.wf .col .info { flex:1 1 auto; min-width:0; width:1%; padding-left: 80px; }
.wf .col .info h4 { font-size: var(--font-size24); font-weight: 600; line-height: 1.25em; color: #242424; margin-bottom: 15px; }

/* 입사지원안내 */
.sp-tit { font-size: var(--font-size30); text-align: center; font-weight: 400; line-height: 1.2em; margin-bottom: 75px; }

/*******************회사소개 ********************/
.flex {display: flex;}
.flex-center {display: flex; align-items: center; justify-content: center;}
.flex-col {display: flex; flex-direction: column;}
.flex-col-center {display: flex; flex-direction: column; align-items: center; justify-content: center;}
.sub.contain {max-width: 1260px;}
/* CEO 인사말 */
.greetings-head {text-align: center; margin-bottom: 50px; }
.greetings-tit {font-size: var(--font-size30); font-weight: 400; line-height: 1.2em; color: #454545; margin-bottom: 30px; }
.greetings-tit strong {color: var(--color-primary); font-weight: 600;}
.greetings-slogan {font-size: var(--font-size22); line-height: 1.36em; color: #454545; }
.greetings-img-wrap {display: flex; position: relative; gap: 20px; width: 100%; aspect-ratio: 1200/380; margin-bottom: 50px;}
.greetings-img-main {max-width:740px; aspect-ratio: 740/380; border-radius: 16px; overflow: hidden;}
.greetings-img-main > div ,
.greetings-sub-item > div {position: relative; overflow: hidden;}
.greetings-img-main > div {padding-bottom: 51.5%;}
.greetings-sub-item > div {padding-bottom: 41%;}
.greetings-img-main > div img ,
.greetings-sub-item > div img {position: absolute; top: 50%; left: 0; transition: .4s ease-in-out; transform: translateY(-50%); -ms-transform: translateY(-50%); -webkit-transform: translateY(-50%); width: 100%; height: auto !important; max-width: 100%; min-height: 100%; object-fit: cover;
}
.greetings-img-sub {display: flex; flex-direction: column; gap: 20px; flex: 1;}
.greetings-sub-item {max-width: 440px; flex: 1; border-radius: 16px; overflow: hidden;}
.greetings-txt {display: flex; flex-direction: column; gap: 30px; padding-bottom: 30px; margin-bottom: 30px; border-bottom: 1px solid #ddd;}
.greetings-txt p {font-size: var(--font-size18); line-height: 1.666em; color: #454545; word-break: keep-all;}
.greetings-sign {font-size: var(--font-size18); color: #454545; }
.greetings-sign strong {font-size: var(--font-size24); font-weight: 600; }
.greetings-cont {position: relative;}
.grt-txt-bg {position: absolute; width: 100%; height: 145px; bottom: 0; left: 0; background: url(../images/sub/sub1-1-bg.png) no-repeat center left / cover;}
.grt-txt-wrap {padding-right: 40px;}

/* 회사개요 */
.ovv-section {margin-bottom: 120px;}
.ovv-section:last-child {margin-bottom: 0;}
.ovv-section1 {display: flex; align-items: center; justify-content: center; position: relative; background: url(../images/sub/sub1-2-bg.jpg) no-repeat center / cover; width: 100%; aspect-ratio: 1920/583; min-height: 500px;}
.ovv-section1 .contain {position: relative; z-index: 1; }
.ovv-overview-head {margin-bottom: 60px; color: #fff;}
.ovv-overview-tit {font-size: var(--font-size34); font-weight: 700;  text-transform: uppercase; margin-bottom: 25px; }
.ovv-overview-company {font-size: var(--font-size18); line-height: 1.66em; }
.ovv-cards {display: flex; gap:32px; flex-wrap: wrap; }
.ovv-card {flex: 1; background: rgba(255,255,255,.3); border-radius: 16px; padding: 30px; border: 1px solid #ffffff40}
.ovv-card-icon {display: flex; align-items: center; justify-content: center; width: 50px; height: 50px; border-radius: 50%; margin-bottom: 30px; }
.ovv-card-label {display: block; font-size: var(--font-size18); color: #fcfcfc; margin-bottom: 17px; font-weight: 700; }
.ovv-card-value {font-size: var(--font-size20); font-weight: 400; color: #fcfcfc; line-height: 1.18em; }

/* 경영이념 */
.ovv-tit {font-size: var(--font-size34); font-weight: 700; color: #242424; text-align: center; margin-bottom: 60px; line-height: 1em;}
.ovv-philosophy-cards {display: flex; gap:36px; flex-wrap: wrap; }
.ovv-philosophy-card {flex: 1; background: #e8eef5; border-radius: 16px; padding: 80px 0; text-align: center; }
.ovv-philosophy-card:nth-of-type(2) {background: #F5F6F8; }
.ovv-philosophy-icon {display: flex; align-items: center; justify-content: center; width: 100px; height: 100px; border-radius: 16px; margin: 0 auto 40px;}
.ovv-philosophy-card-tit {font-size: var(--font-size24); font-weight: 600; color: #242424; margin-bottom:18px; }
.ovv-philosophy-card-desc {font-size: var(--font-size18); line-height: 1.44em; color: #454545; }

/* 사훈 */
.ovv-motto-list {display: flex; flex-direction: column; gap: 40px; padding-top: 60px; border-top: 1px solid #ddd;}
.ovv-motto-item {display: flex; gap: 40px; align-items: center; }
.ovv-motto-icon {flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 100px; height: 100px;}
.ovv-motto-body {flex: 1; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 18px; }
.ovv-motto-tit {font-size: var(--font-size24); font-weight: 600; color: #242424; line-height: 1.25em; }
.ovv-motto-desc {font-size: var(--font-size18); line-height: 1.44em; color: #454545; }

/* 사내전경 */
.ovv-scenery-grid {display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--font-size18); }
.ovv-scenery-item {border-radius: 16px; overflow: hidden;}

/* CI소개 */
.ci-bg-wrap {border-radius: 32px; overflow: hidden; margin-bottom: 40px;}
.ci-logo-wrap {gap: 86px; align-items: center; justify-content: flex-end; margin-bottom: 120px;}
.ci-logo-wrap .bar {width: 86px; height: 1px; background: #ddd;}
.ci-txt p {font-size: var(--font-size18); line-height: 1.666em; color: #454545; letter-spacing: -.03em;}

/* 연혁 */
.history-title {margin-bottom:10px; font-size: var(--font-size18); font-weight:600; color:var(--color-primary); line-height: 1.2em;}
.history-item {display:flex; align-items: flex-start; flex-wrap: wrap; gap:40px 60px; margin-bottom: 80px;}
.history-item:last-child {margin-bottom: 0; padding-bottom: 0;}
.history-item-reverse {flex-direction: row-reverse;}
.history-item .year-title {display: block; width: 100%; font-size:80px; font-weight:600; color:#eaeaea; position:relative; line-height: 1em;}
.history-img-wrap > div{border-radius: 16px; overflow: hidden;}
.history-item-reverse .year-title {text-align: right;}
.history .item-list {position: relative; padding:0 0 0 15px; flex: 1;}
.history .item-list:before {top:0; width:2px; position:absolute; content:''; left:0; background-color:var(--color-primary); height:100%; }
.history .history-item-reverse .item-list:before {background-color: #64B721;}
.history .item {margin-bottom: 25px;}
.history .item:last-child {margin-bottom: 0;}
.history .item:last-child:before {display:none;}
.history .item .year {min-width: 75px; font-size:var(--font-size18); font-weight:700; color:var(--color-primary); position:relative;}
.history .history-item-reverse .item .year {color: #64B721;}
.history .item .history-desc {position:relative; font-size: var(--font-size18); font-weight:400; color: #454545; line-height:1.55em;}
.history-desc p {position: relative; padding-left: 7px; letter-spacing: -.03em;}
.history-desc p:before {content: ""; position: absolute; left: 0; width: 2px; height: 2px; border-radius: 100%; background: var(--color-primary); top: 12px; background: #454545;}
.history-img-wrap {flex: 1;}

/* 인증 */
.certi-wrap {display: grid; grid-template-columns: repeat(4, 1fr); gap: 60px 40px;}
.certi-wrap .img {border: 1px solid #ddd;}
.certi-wrap .img img {display: block; width: 100%; height: auto;}

/* 오시는길 */
.drc-section {margin-bottom: 120px;}
.drc-section:last-child {margin-bottom: 0;}
.drc-tit {font-size: var(--font-size34); font-weight: 700; color: #242424; line-height: 1.25em; margin-bottom: 35px; }
.map-wrap {position: relative;}
.map-wrap .map iframe { height: 440px; width: 100%; }
.root_daum_roughmap {width: 100% !important;}
.root_daum_roughmap .wrap_map {height: 440px !important;}
.drc-info {display: flex; justify-content: flex-end; gap: 80px; padding: 55px 20px 95px 0;}
.drc-info dl {display: flex; align-items: center; gap: 14px;}
.drc-info dl dt:before {content: ""; display: block; width: 6px; height: 6px; background: var(--color-primary);}
.drc-info dl dt {display: flex; align-items: center; gap: 14px; font-size: var(--font-size18); font-weight: 600; color: var(--color-primary); letter-spacing: -.03em;}
.drc-info dl dd {font-size: 16px; color: #454545; letter-spacing: -.03em;}
.drc-adress {position: absolute; bottom: 0; left: 0; max-width: 340px; font-size: var(--font-size24); line-height: 1.33em; color: #f8f8f8; background: var(--color-primary); padding: 50px 40px 50px 30px ; z-index: 1; font-weight: 600;}
.drc-adress p.small {font-size: 17px; color: #fff;margin-bottom: 70px; font-weight: 400; }

/******************* 제품소개 ********************/
.card-list .link-item .info .sub-tit {font-size: 16px; color: #454545; line-height: 1.25em; min-height: 40px;}
.product-btn {display: inline-flex; align-items: center; gap: 16px; padding: 10px 20px; color: #888; font-size: 15px; border-radius: 29px; border: 1px solid #ddd; transition: .3s; line-height: 1em;} 
.product-btn:after {content: ""; width: 27px; height: 27px; background: url(../images/sub/pd-arrow.png) no-repeat center center / contain; transition: .3s;}
.card-list .link-item:hover .product-btn {border-color: var(--color-primary); color: #fff; color: var(--color-primary);}
.card-list .link-item:hover .product-btn:after {background-image: url(../images/sub/pd-arrow-active.png);}

/* 상세페이지 */
.pd-view-top {display: flex; align-items: center; gap: 80px; margin-bottom: 120px;}
.slide-wrap { flex: 1; max-width: 600px;}
.pd-board-swiper .thumb { position: relative; padding-bottom: 89.5%; display: block; background: #fff; border-radius: 8px; overflow: hidden;}
.pd-board-swiper .thumb img { position: absolute; left: 50%; top: 50%; width: 100%; height: 100%; object-fit: contain ; transform: translate(-50%, -50% );}
.pd-board-swiper { width: 100%; margin-bottom: 20px; }
.pd-thumb-swiper { width: 100%; }
.pd-thumb-swiper .swiper-slide { cursor: pointer;}
.pd-thumb-swiper .thumb {position: relative; padding-bottom: 100%; display: block; border-radius: 8px; overflow: hidden; }
.pd-thumb-swiper .thumb img { position: absolute; left: 50%; top: 50%; width: 100%; height: 100%; object-fit: contain ; max-width: 100%; max-height: 100%; transform: translate(-50%, -50% );}
.pd-thumb-swiper .thumb img {opacity: 0.5;}
.swiper-slide-thumb-active .thumb img {opacity: 1;}
.pd-thumb-swiper .thumb::after { content: ""; position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto; border: 1px solid #ddd; border-radius: 8px;}
.pd-thumb-swiper .swiper-slide.swiper-slide-thumb-active .thumb::after { border: 2px solid var(--color-primary);}
.pd-view-info .tit {font-size: 56px; font-weight: 700; color: #242424; margin-bottom: 25px; line-height: 1em;}
.pd-view-info .sub-tit {font-size: var(--font-size18); color: #454545; line-height: 1.44em; padding-bottom: 50px; border-bottom: none; background-image: repeating-linear-gradient(90deg, #ddd 0, #ddd 8px, transparent 8px, transparent 14px); background-size: 100% 1px; background-repeat: repeat-x; background-position: bottom;}
.pd-view-desc {padding: 50px 0; border-bottom: none; background-image: repeating-linear-gradient(90deg, #ddd 0, #ddd 8px, transparent 8px, transparent 14px); background-size: 100% 1px; background-repeat: repeat-x; background-position: bottom;}
.pd-view-desc .desc-tit {font-size: var(--font-size18); font-weight: 600; color: #888; margin-bottom: 15px; }
.pd-view-desc .desc-txt {position: relative; padding-left: 12px; font-size: var(--font-size18); color: #454545; line-height: 1.44em; }
.pd-view-desc .desc-txt:before {content: "-"; position: absolute; left: 0;}
.pd-view-info .back-btn {display: inline-flex; align-items: center; justify-content: center; width: 200px; height: 60px; color: #888; font-size: var(--font-size18); font-weight: 500; border-radius: 30px; border: 1px solid #ddd; transition: .3s; margin-top: 50px;}
.pd-view-info .back-btn:hover {color: #fff; border-color:var(--color-primary); background: var(--color-primary);}

.pd-view-bottom {padding-bottom: 120px; border-bottom: 1px solid #ddd;}
.pd-view-bottom-section {margin-bottom: 80px;}
.pd-view-bottom-section:last-child {margin-bottom: 0;}
.pd-view-bottom-tit {font-size: var(--font-size26); font-weight: 600; color: var(--color-primary); background: #F1F5FA; border-top: 2px solid var(--color-primary); padding: 25px;}
.pd-view-bottom-list {margin: 0; padding:20px 30px;}
.pd-view-bottom-list li {position: relative; padding-left:12px; font-size: var(--font-size18); color: #454545; line-height: 1.666em; }
.pd-view-bottom-list li::before {content: "-"; position: absolute; left: 0;}
.pd-view-img {width: 100%; margin-top: 120px;}
.pd-view-img > div {position: relative; padding-bottom: 89.5%; display: block; overflow: hidden;}
.pd-view-img > div img {position: absolute; left: 50%; top: 50%; width: 100%; height: 100%; object-fit: contain; transform: translate(-50%, -50%);
}