@charset "utf-8";
.page-greeting {gap: 25px 35px;}
.page-greeting .txt {display: flex; flex-direction: column; gap:var(--space-30); width: 47.58335%; background: url('/images/sub/greeting-logo.png') no-repeat right bottom;}
.greeting-sign {display: flex; align-items: center; gap: var(--space-15); margin-top: var(--space-30);}

.sec-concept {padding-bottom: var(--space-100);}
.concept-item:not(:last-child) {margin-bottom: var(--space-60);}
/* .concept-item h2 {width: 25%;} */
.concept-item h2 {margin-bottom: var(--space-25);}
.concept-box {padding: var(--space-40); border-radius: var(--radius-16); background: rgba(6, 57, 110, 0.03);}
.concept-box h3 {position: relative; display: flex; justify-content: center; margin-bottom: var(--space-25);}
.concept-box h3:before {content: '“'; margin-right: 10px; font-family: 'Noto Sans KR', sans-serif; font-size: clamp(30px, calc(56 / var(--inner) * 100vw), 56px); line-height: .5em; color: rgba(6, 57, 110, 0.20); font-weight: 900;}
.concept-box h3:after {content: '”'; margin-left: 10px; font-family: 'Noto Sans KR', sans-serif; font-size: clamp(30px, calc(48 / var(--inner) * 100vw), 48px); line-height: .5em; color: rgba(6, 57, 110, 0.20); font-weight: 900;}

.sec-value {padding: var(--space-100) 0 0; background: url('/images/sub/bg-value.jpg') no-repeat center center; background-size: cover;}
.sec-value h2 {margin-bottom: var(--space-80);}

.page-history {display: flex; flex-direction: column; gap: var(--space-80);}
.history-banner {position: relative; height: clamp(200px, calc(400 / var(--inner) * 100vw), 400px); border-radius: var(--radius-24); overflow: hidden; background: url('/images/sub/history-banner.jpg') no-repeat center center; background-size: cover;}
.history-banner:after {content: ''; position: absolute; inset: 0; background: rgba(0, 0, 0, 0.2);}
.banner-txt {position: relative; z-index: 1; display: flex; flex-direction: column; gap: var(--space-30); padding: var(--space-60) var(--space-80);}
.banner-txt h2 {font-size: var(--font-size-50); font-weight: 900; line-height: var(--space-60); color: #fff;}
.banner-txt .divider {width: 1px; height: clamp(50px, calc(100 / var(--inner) * 100vw), 100px); background: rgba(255, 255, 255, 0.6);}
.banner-txt .banner-year {font-size: var(--font-size-30); font-weight: 700; line-height: var(--font-size-30); color: #fff;}
.history-timeline {position: relative; padding: var(--space-40) 0;}
.timeline-line {position: absolute; left: 50%; top: clamp(13px, calc(27 / var(--inner) * 100vw), 27px); bottom: 0; width: 1px; background: #ddd; transform: translateX(-50%);}
.timeline-item {position: relative; display: flex; margin-bottom: clamp(60px, calc(90 / var(--inner) * 100vw), 90px);}
.timeline-item:last-child {margin-bottom: 0;}
.timeline-right {justify-content: flex-end;}
.timeline-left {justify-content: flex-start;}
.timeline-bullet {position: absolute; left: 50%; top: 0; transform: translateX(-50%); width: clamp(18px, calc(36 / var(--inner) * 100vw), 36px); height: clamp(27px, calc(54 / var(--inner) * 100vw), 54px); background: url('/images/sub/history-bullet.svg') no-repeat center center; background-size: contain;}
.timeline-content {width: 50%; padding: 0 var(--space-40);}
.timeline-right .timeline-content {padding-left: var(--space-40); padding-right: 0;}
.timeline-left .timeline-content {padding-left: 0; padding-right: var(--space-40); text-align: right;}
.timeline-title {display: flex; flex-direction: column; gap: var(--space-30); margin-bottom: var(--space-30);}
.timeline-title .year {position: relative; font-size: var(--font-size-54); font-weight: 700; line-height: 1em; color: var(--primary-color);}
.timeline-title .year:before {content: ''; position: absolute; width: 16px; height: 16px; border-radius: 100%; border: 4px solid var(--secondary-color); top: 50%; left: calc(var(--space-40) * -1); transform: translate(-50%, -50%);}
.timeline-left .timeline-title .year:before {left: auto; right: calc(var(--space-40) * -1); transform: translate(50%, -50%);}
.timeline-title .phase {font-size: var(--font-size-32); font-weight: 600; line-height: var(--font-size-32); color: var(--dark-color);}
.timeline-title .desc {font-size: var(--font-size-16); line-height: var(--font-size-16); color: #686868;}
.timeline-list {list-style: none;}
.timeline-list li {text-indent: -.8em; padding-left: .8em; font-size: var(--font-size-18); line-height: 1.6667em;}
.timeline-list li:not(:last-child) {margin-bottom: var(--space-20);}
.timeline-list li:before {content: '• '; color: var(--primary-color); font-weight: 700;}
.timeline-left .timeline-list li {text-align: right;}

.direction-map {height: clamp(250px, calc(500 / var(--inner) * 100vw), 500px); border-radius: var(--radius-40); overflow: hidden;}
.root_daum_roughmap .wrap_map, .root_daum_roughmap {width: 100% !important; height: 100% !important;}
.root_daum_roughmap .cont {display: none;}
.direction-title h2 {display: flex; gap: 6px; width: fit-content; margin-bottom: var(--space-20); font-size: clamp(30px, calc(60 / var(--inner) * 100vw), 60px); line-height: 1em; font-weight: 700; color: var(--primary-color);}
.direction-title h2:after {content: ''; display: block; width: clamp(8px, calc(12 / var(--inner) * 100vw), 12px); height: clamp(8px, calc(12 / var(--inner) * 100vw), 12px); background: var(--secondary-color); border-radius: 100%;}

.form-row {display: flex; gap: 0 var(--space-30);}
.form-row .form-group {flex: 1;}
.form-group {display: flex; flex-direction: column; gap: var(--space-20); margin-bottom: var(--space-50);}
.form-label {font-size: var(--font-size-18); font-weight: 600; line-height: var(--font-size-18); color: var(--dark-color);}
.form-label .required {color: var(--primary-color);}
.form-input {height: clamp(40px, calc(55 / var(--inner) * 100vw), 55px); padding: 0 var(--space-20); border: 1px solid #ddd; background: #fff; font-size: var(--font-size-16); line-height: var(--font-size-18); color: #454545;}
.form-input::placeholder {color: #b1b1b1;}
.form-textarea {height: var(--space-300); padding: var(--space-20); border: 1px solid #ddd; background: #fff; font-size: var(--font-size-16); line-height: var(--font-size-18); color: #454545; resize: none;}
.form-textarea::placeholder {color: #b1b1b1;}
.captcha-wrap {display: flex; gap: clamp(5px, calc(11 / var(--inner) * 100vw), 11px);}
.captcha-img {width: clamp(60px, calc(120 / var(--inner) * 100vw), 120px); height: var(--space-55); overflow: hidden; border: 1px solid #ddd;}
.captcha-img img {width: 100%; height: 100%; object-fit: cover;}
.captcha-input {width: clamp(220px, calc(440 / var(--inner) * 100vw), 440px);}
.form-submit {display: flex; justify-content: center;}
.btn-submit {min-width: clamp(115px, calc(230 / var(--inner) * 100vw), 230px); height: clamp(50px, calc(60 / var(--inner) * 100vw), 60px); padding: 0 30px; border-radius: var(--radius-60); background: var(--primary-color); color: #fff; font-size: 18px; font-weight: 600; border: none; cursor: pointer; transition: all 0.3s;}
.btn-submit:hover {opacity: 0.9;}

.direction-cnt {position: relative; gap: 25px 35px; z-index: 1; margin-top: calc(var(--space-50) * -1);}
.direction-box {position: relative; width: 65%; padding: var(--space-50) var(--space-60); border-radius: clamp(20px, calc(80 / var(--inner) * 100vw), 80px) 0; background: var(--primary-color); color: #fff; line-height: 1.6667em;}
.direction-box:after {content: ''; position: absolute; right: 0; top: 0; width: 39.74%; height: 100%; background: url('/images/sub/direction-logo.png') no-repeat center top; background-size: contain;}
.direction-box strong {min-width:clamp(90px, calc(116 / var(--inner) * 100vw), 116px); font-size: var(--font-size-20); font-weight: 600;}
.direction-box> ul> li {display: flex;}
.direction-box> ul> li:not(:last-child) {margin-bottom: var(--space-20);}

.reference-table {width: 100%; border-collapse: collapse; border-spacing: 0;}
.reference-table thead th {padding: var(--space-15) var(--space-20);border-right: 1px solid #ddd; background: rgba(6, 57, 110, 0.05); font-size: var(--font-size-18); font-weight: 600; color: var(--dark-color); text-align: center; border-top: 2px solid var(--primary-color); border-bottom: 1px solid #ddd;}
.reference-table thead th:last-child {border-right: none;}
.reference-table tbody td {padding: var(--space-15) var(--space-20); font-size: 16px; color: #454545; text-align: center; border-bottom: 1px solid #ddd; vertical-align: middle;}
.reference-table tbody td.year {border-right: 1px solid #ddd; font-weight: 400;}
.reference-table tbody td.site {border-right: 1px solid #ddd; font-weight: 400;}

.sec-necessary {padding: var(--space-80) 0; margin-bottom: var(--space-100); background: url('/images/sub/bg-necessary.jpg') no-repeat center center; background-size: cover;}
.sec-necessary .contain {gap: 25px var(--space-80);}
.necessary-img {box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25)}
.sec-necessary h3 {margin: var(--space-30) 0;}

.sec-function h2 {margin-bottom: var(--space-80);}
.function-boxes {display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-40) var(--space-30);}
.function-box {display: flex; flex-direction: column; gap: var(--space-20); padding: clamp(19px, calc(38 / var(--inner) * 100vw), 38px) var(--space-40); border: 1px solid #ddd; border-radius: var(--radius-24); background: #fff;}
.function-box .wrap {display: flex; align-items: center; gap: var(--space-20);}
.function-icon {display: flex; align-items: center; justify-content: center; width: clamp(40px, calc(60 / var(--inner) * 100vw), 60px); height: clamp(40px, calc(60 / var(--inner) * 100vw), 60px); border-radius: 100%; flex-shrink: 0;}
.function-icon img {height: clamp(24px, calc(32 / var(--inner) * 100vw), 32px);}
.function-title {font-size: var(--font-size-22); font-weight: 600; line-height: 1em; color: var(--dark-color);}
.function-desc {font-size: var(--font-size-16); line-height: 1.625em;}

.talent-cards {display: flex; gap: 40px var(--space-30);}
.talent-card {display: flex; flex-direction: column;position: relative; flex: 1;}
.talent-card .wrap {flex: 1;margin-bottom: var(--space-30); border-radius: var(--radius-24); overflow: hidden; border: 1px solid #ddd;}
.card-img img {width: 100%; height: 100%; object-fit: cover;}
.card-content {display: flex; flex-direction: column; gap: var(--space-15); padding: var(--space-40);background: #fff;}
.card-label {font-size: var(--font-size-16); font-weight: 600; line-height: 1em; color: var(--primary-color);}
.card-title {font-size: var(--font-size-20); font-weight: 600; line-height: 1.3em; color: var(--dark-color);}
.card-desc {font-size: var(--font-size-16); line-height: 1.5em; color: #454545;}
.card-points {padding: 0 var(--space-40); list-style: none;}
.card-points li {text-indent: -.8em; padding-left: .8em; font-size: var(--font-size-16); line-height: 1.5em; color: #686868;}
.card-points li:before {content: '• '; color: var(--secondary-color);}

.business-list ul {display: flex; flex-wrap: wrap; margin: calc(var(--space-15) * -1);}
.business-list li {width: 33.33335%; padding: var(--space-15);}
.business-list-item {display: flex; justify-content: center; align-items: center; height: 100%; padding: var(--space-34) var(--space-30); border: 1px solid #ddd; border-radius: var(--radius-16); font-size: var(--font-size-20); color: #686868;}
.business-list-item:hover {border-color: var(--primary-color); color: var(--primary-color);}

.sec-business-overview {padding-bottom: var(--space-100);}
.business-view-img {position: relative; width: 100%; padding-bottom: 33.3333%; margin-bottom: var(--space-100); border-radius: var(--radius-24); overflow: hidden;}
.business-view-img img {position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;}
.sec-business-spec {padding: var(--space-100) 0; background: rgba(6, 57, 110, 0.03);}
.sec-business-spec h2 {padding-left: 10px; margin-bottom: var(--space-60); border-left: 3px solid var(--primary-color); font-size: var(--font-size-28); font-weight: 600; line-height: 1em; color: var(--dark-color);}
.business-view-boxes {display: flex; gap: var(--space-30); line-height: 1.625em;}
.business-view-boxes.type2 {flex-wrap: wrap;}
.business-view-box {display: flex; flex-direction: column; gap: var(--space-15) var(--space-25); flex: 1; padding: var(--space-30) var(--space-25); border: 1px solid #ddd; border-radius: var(--radius-24); background: #fff;}
.business-view-boxes.type2 .business-view-box {flex: 1 1 auto; width: calc((100% - var(--space-30)) / 2); flex-direction: row;}
.business-view-box .icon {width: fit-content; height: fit-content; border-radius: 100%; padding: var(--space-15); background: rgba(6, 57, 110, 0.05);}
.business-view-box .txt {flex: 1;}
.business-view-box h3 {margin-bottom: 10px;font-size: var(--font-size-22); font-weight: 600; color: var(--dark-color);}
.business-view-box p span {display: inline-block;}
.business-view-banner {padding: var(--space-100) 0; background: url('/images/sub/bg-business-banner.jpg') no-repeat center center; background-size: cover;}

.benefit-grid {display: grid; grid-template-columns: repeat(3, 1fr); max-width: 1200px; margin: 0 auto; border: 1px solid #ddd;}
.benefit-item {display: flex; flex-direction: column; gap: var(--space-30); align-items: center; justify-content: center; padding: var(--space-50) var(--space-30);}
.benefit-item.type2 {background: rgba(6, 57, 110, 0.02);}
.benefit-icon {width: clamp(50px, calc(104 / var(--inner) * 100vw), 104px); height: clamp(50px, calc(104 / var(--inner) * 100vw), 104px);}
.benefit-icon lord-icon {width: 100%; height: 100%; object-fit: contain;}
.benefit-txt {display: flex; flex-direction: column; gap: var(--space-15); text-align: center; width: 100%;}
.benefit-title {font-size: var(--font-size-20); font-weight: 600; line-height: 20px; color: var(--dark-color);}
.benefit-desc {font-size: var(--font-size-16); line-height: 26px; color: #454545;}

.recruit-process {display: flex; align-items: center; justify-content: center; gap: var(--space-20); max-width: 1200px; margin: 0 auto var(--space-100);}
.process-step {display: flex; flex-direction: column; gap: var(--space-40); align-items: center;}
.process-icon {position: relative; width: clamp(96px, calc(193 / var(--inner) * 100vw), 193px); height: clamp(96px, calc(193 / var(--inner) * 100vw), 193px);}
.icon-circle {position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;}
.icon-circle lord-icon {width: clamp(44px, calc(88 / var(--inner) * 100vw), 88px); height: clamp(44px, calc(88 / var(--inner) * 100vw), 88px); object-fit: contain;}
.process-icon.type1 .icon-circle:before {content: ''; position: absolute; inset: 0; border-radius: 100%; background: url('http://localhost:3845/assets/1a1cc9d55652d2361d7a6f35cadfb4088a90027d.svg') no-repeat center; background-size: contain;}
.process-icon.type2 .icon-circle:before {content: ''; position: absolute; inset: 0; border-radius: 100%; background: url('http://localhost:3845/assets/0e447760114704146aac9c2413a492b0be50b272.svg') no-repeat center; background-size: contain;}
.process-txt {display: flex; flex-direction: column; gap: var(--space-15); align-items: center; text-align: center;}
.step-num {font-size: var(--font-size-16); font-weight: 600; line-height: 16px;}
.step-num.type1 {color: var(--primary-color);}
.step-num.type2 {color: var(--secondary-color);}
.step-title {font-size: var(--font-size-24); font-weight: 600; line-height: 24px; color: var(--dark-color);}
.process-arrow {width: clamp(6px, calc(16 / var(--inner) * 100vw), 16px); height: clamp(10px, calc(28 / var(--inner) * 100vw), 28px); margin-bottom: clamp(40px, calc(80 / var(--inner) * 100vw), 80px);}
.process-arrow img {width: 100%; height: 100%; object-fit: contain;}

.recruit-table {display: flex; flex-direction: column; gap: var(--space-20); max-width: 1200px; margin: 0 auto var(--space-80);}
.table-row {display: flex; align-items: center; height: 80px; border-radius: var(--radius-16); background: rgba(6, 57, 110, 0.03); position: relative;}
.table-row:after {content: ''; position: absolute; left: 200px; top: 50%; transform: translateY(-50%); width: 1px; height: 20px; border-radius: var(--radius-16); background: rgba(6, 57, 110, 0.2);}
.table-title {display: flex; align-items: center; justify-content: center; width: 200px; height: 80px; padding: 10px;}
.table-title p {font-size: var(--font-size-20); font-weight: 600; line-height: 20px; color: var(--dark-color); text-align: center;}
.table-content {display: flex; align-items: center; flex: 1; height: 80px; padding: 10px var(--space-30);}
.table-content p {font-size: var(--font-size-18); line-height: 18px; color: #454545;}

.recruit-btn-wrap {display: flex; justify-content: center; max-width: 1200px; margin: 0 auto;}
.recruit-btn {display: flex; align-items: center; justify-content: center; gap: var(--space-20); width: 260px; height: 60px; border: 1px solid #000; transition: all 0.3s;}
.recruit-btn span {font-size: var(--font-size-18); font-weight: 500; line-height: 18px; color: var(--dark-color);}
.recruit-btn svg {width: 10px; height: 5px; transform: rotate(-90deg); transition: transform 0.3s;}
.recruit-btn:hover {background: var(--secondary-color); border-color: var(--secondary-color);}
.recruit-btn:hover span {color: #fff;}
.recruit-btn:hover .icon img {filter: brightness(0) invert(1);}