@charset "utf-8";
.page-greetings {display: flex; gap: 20px var(--space-75);}
.greeting-txt {width: 50%;}
.greeting-txt h2 {margin-bottom: var(--space-35); font-size: var(--font-size-30); line-height: 1.46667em; color: var(--dark-color);}
.greeting-txt .sign {gap: 17px;}

.page-history .contain {position: relative; max-width: 1660px;}
.page-history .contain:before {position: absolute; content: ''; top: clamp(10px, calc( 55 / var(--inner) * 100vw ), 55px); bottom: 0; left: 50%; width: 1px; background: var(--primary-color);}
.history-item {display: flex; width: 50%; gap: 20px; margin-left: auto;}
.history-list strong {display: block;margin-bottom: 5px; font-weight: 600; font-size: var(--font-size-18);}
.history-list ul:not(:last-child) {margin-bottom: 10px;}
.history-list li {position: relative; padding-left: 10px; text-indent: -10px; width: fit-content;}
.history-list li:before {content: '·'; margin-right: 5px;}
.history-txt {flex:1; padding-left: var(--history-space); padding-top: clamp(10px, calc( 55 / var(--inner) * 100vw ), 55px);}
.history-year {position: relative; margin-bottom: var(--space-15); font-size: var(--font-size-30); line-height: 1.2em; color: var(--primary-color); font-weight: 700;}
.history-year:before {position: absolute; content:''; top: 50%; left: calc(var(--history-space) * -1); width: 40px; height: 40px; margin-top: -20px; margin-left: -20px; background: var(--primary-color); border: 13px solid #e6f0ff; border-radius: 100%;}
.history-img {width: 45%;}
.history-img .img:not(:last-child) {margin-bottom: 10px;}
.history-item:nth-child(even) {margin-left: 0; flex-direction: row-reverse; text-align: right;}
.history-item:nth-child(even) .history-txt {padding-left: 0; padding-right: var(--history-space);}
.history-item:nth-child(even) .history-list li {margin-left: auto;}
.history-item:nth-child(even) .history-year:before {left: auto; right: calc(var(--history-space) * -1); margin-left: 0; margin-right: -20px;}
.page-org {background: url("/images/sub/bg-org.jpg") no-repeat center center / cover;}

.page-mission-vision {line-height: 1.5em;}
.page-mission-vision .full-img {margin-bottom: var(--space-25);}
.sec-tit h2 {margin-bottom: 10px; font-size: var(--font-size-30); line-height: 1.2em;  font-weight: 600; color: var(--dark-color);}
.sec-tit {margin-bottom: var(--space-25);}
.vision-boxes {gap: var(--space-30); margin-bottom: var(--space-30);}
.text-box {padding: var(--space-25); border-radius: var(--radius-24); border: 10px solid #e6f0ff; text-align: center; font-weight: 700; color: var(--dark-color);}
.vision-box {position: relative; padding: clamp(20px, calc( 60 / var(--inner) * 100vw ), 60px) clamp(15px, calc( 20 / var(--inner) * 100vw ), 20px); border: 1px solid #ddd; border-radius: var(--radius-24); overflow: hidden;}
.vision-box h3 {font-size: var(--font-size-20); line-height: 1.2em; margin-bottom: 10px; color: var(--dark-color);}
.vision-box .txt {width: fit-content; margin: 0 auto;}
.vision-box .num {display: flex; align-items: center; justify-content: center; position: absolute; top: 0; left: 0; width: 52px; height: 52px; border-radius: 0 0 var(--radius-24) 0; font-size: var(--font-size-20); font-weight: 700; color: #fff; background: var(--secondary-color);}
.root_daum_roughmap .cont {display: none;}
.root_daum_roughmap .wrap_map, .root_daum_roughmap, .location-map iframe {width: 100% !important;}
.location-cnt {display: flex; align-items: center; gap: 20px 30px; margin-top: clamp(20px, calc( 30 / var(--inner) * 100vw ), 30px);}
.location-info h3 {font-size: var(--font-size-20); line-height: 1.2em; margin-bottom: var(--space-20); color: var(--dark-color);}
.location-info span {display: inline-block; height: fit-content; position: relative; width: 64px; padding-left: 10px; font-weight: 700; color: var(--dark-color);}
.location-info span:before {position: absolute; content: ''; width: 2px; height: 14px; background: var(--secondary-color); top: 50%; left: 0; margin-top: -7px;}
.location-info li {display: flex;}
.location-info li:not(:last-child) {margin-bottom: 5px;}
.location-boxes {width: 56.6667%; padding: 10px var(--space-40); background: #f3f4f5; border-radius: var(--radius-16); padding: clamp(20px, calc( 30 / var(--inner) * 100vw ), 30px);}
.location-box {padding: var(--space-25) 0;}
.location-box:not(:last-child) {border-bottom: 1px solid #ddd;}
.location-box h4 {margin-bottom: var(--space-25);}

.location-help {display: flex; flex-wrap: wrap; gap: 5px 0;}
.location-help span:not(:last-child):after, .nation-box:after {content: ''; display: inline-block; width: 8px; height: 12px; margin: 0 9px; background: url("/images/sub/location-arrow.png") no-repeat center center / contain;}

.underline-txt {position: relative; width: fit-content; font-weight: 700; color: var(--dark-color); z-index:1; display: inline;background: linear-gradient(to bottom, transparent 40%, #e6f0ff 40%);}

.business-strength-items {display: flex; gap: 30px 15px;}
.business-strenth-item h3 {font-size: var(--font-size-20); line-height: 1.2em; margin: var(--space-15) 0 clamp(5px, calc( 10 / var(--inner) * 100vw ), 10px) 0; color: var(--dark-color);}
.business-strenth-item h4 {margin-bottom: var(--space-20);}
.business-strenth-item .video-item {position: relative; width: 100%; padding-bottom: 76.9235%; border: 1px solid #ddd; border-radius: var(--radius-24); overflow: hidden;}
.business-strenth-item .video-item video {position: absolute; width: 100%; height: 100%; left: 0; top: 0; object-fit: cover;}
.dot-list>li {position: relative; padding-left: 10px; text-indent: -10px; width: fit-content;}
.dot-list>li:before {content: '·'; margin-right: 5px; color: var(--dark-color);}
.full-photo-wrap {position: relative;}
.full-photo-wrap .full-txt {position: relative; width: 50%; margin-left: auto; margin-right: var(--space-40); padding: var(--space-40); padding-bottom: 0; margin-top: calc(clamp(30px, calc( 80 / var(--inner) * 100vw ), 80px) * -1); background: #fff; border-radius: var(--radius-16); }
.business-strength-items ~ .dot-list {margin-top: clamp(20px, calc( 30 / var(--inner) * 100vw ), 30px);}
.business-buyer-list ul {display: flex; flex-wrap: wrap; gap: 28px 0; margin: 0 -11px;}
.business-buyer-list li {width: calc(100% / 6);padding: 0 11px;}
.business-product-list ul {display: flex; flex-wrap: wrap; margin: -4px;}
.business-product-list li {width: 20%; padding: 4px;}
.sec-pdq {background: url('/images/sub/bg-pdq.jpg') no-repeat center center; background-size: cover;}
.pdq-boxes {gap: clamp(12px, calc( 22 / var(--inner) * 100vw ), 22px);}
.pdq-box {flex:1; border-radius: var(--radius-24); border: 1px solid #ddd; background: #e7f0ff; overflow: hidden;}
.pdq-box-txt {padding: var(--space-25) 12px;}

.page-esg .sec-welcome-banner {padding: var(--space-60) 20px; background: url("/images/sub/esg-welcome-banner.jpg") no-repeat center center / cover; border-radius: var(--radius-24); text-align: center; color: #fff;}
.page-esg .sec-welcome-banner .sec-tit {margin-bottom: 0;}
.page-esg .sec-welcome-banner .sec-tit h2 {margin-bottom: var(--space-25); color: #fff;}
.sec-esg .group {display: flex; border: 1px solid #ddd; border-radius: var(--radius-24); overflow: hidden;}
.sec-esg .group:not(:last-child) {margin-bottom: 30px;}
.esg-img {display: flex; align-items: center; justify-content: center; width: 35%; padding: 10px; background: #e6f0ff;}
.esg-txt {flex:1; padding: var(--space-35); padding-left: var(--space-50);}
.esg-txt h3 {font-size: var(--font-size-20); line-height: 1.2em; margin-bottom: var(--space-15); color: var(--dark-color);}
.esg-txt h4 {margin-bottom: var(--space-20);}
.esg-txt ul {display: flex; flex-wrap:wrap;}
.esg-txt li {flex: 1 1 auto; min-width: 50%;}
.esg-txt li:not(:last-child) {margin-bottom: 5px;}

.global-overview-keywords, .global-overview-nations {gap: var(--space-20);}
.keyword-box {padding: 20px; border: 1px solid #ddd; border-radius: var(--radius-24);}
.keyword-box-txt {margin-top: var(--space-15);}
.global-overview-map {margin: var(--space-20) 0;}
.nation-box {flex: 1 1 auto; position: relative; padding: var(--space-35); padding-right: 45px; background: #f4f6f9; border-radius: var(--radius-24);}
.nation-box:after {position: absolute; top: 50%; transform: translateY(-50%); right: 15px; width: 10px; height: 20px; margin: 0; background-image: url("/images/sub/nation-arrow.png");}

.page-global-info .group {display: flex; gap: var(--space-60);}
.page-global-info .group:not(:last-child) {margin-bottom: var(--space-80); padding-bottom: var(--space-80); border-bottom: 1px solid #ddd;}
.page-global-info .sec-tit {flex:1;}
.page-global-info .sec-tit span {display: inline-block;}
.global-info-cnt {width: 63.9167%;}
.global-info-imgs {display: flex; gap: var(--space-20); margin-bottom: var(--space-25);}
.global-info-txt ul {display: flex; flex-wrap: wrap;}
.global-info-txt li {display: flex; gap: 5px; height: 1.75em; line-height: 1.5em;}
.global-info-txt li:nth-child(odd) {min-width: 277px;}
.global-info-txt li:nth-child(even) {flex: 1; min-width: calc(100% - 277px);}
.global-info-txt li:not(:last-child) {margin-bottom: 10px;}
.global-info-txt .icon {margin-top: -3px;}
.global-info-txt li div {flex: 1;}
.ideal-items {display: flex; gap: clamp(20px, calc( 70 / var(--inner) * 100vw ), 70px); padding: clamp(20px, calc( 40 / var(--inner) * 100vw ), 40px) clamp(20px, calc( 80 / var(--inner) * 100vw ), 80px); border: 5px solid #f4f6f9; border-radius: 190px;}
[lang="en"] .ideal-items {padding-left:clamp(20px, calc( 50 / var(--inner) * 100vw ), 50px); padding-right: clamp(20px, calc( 50 / var(--inner) * 100vw ), 50px);}
.ideal-circle {flex:1; position: relative; line-height: 1.5em;}
.ideal-circle:before {content:''; display: block; width: 100%; padding-bottom: 100%; border-radius: 100%; background: #90abdc;}
.ideal-circle .wrap {display: flex; flex-direction: column; align-items: center; justify-content: center; position: absolute; top: var(--space-20); left: var(--space-20); right: var(--space-20); bottom: var(--space-20); border-radius: 100%; background: #fff;}
.ideal-circle h3 {font-size: var(--font-size-20); line-height: 1.2em; margin: var(--space-15) 0; color: var(--dark-color);}
.ideal-circle:nth-child(2):before {background: #6488c8;}
.ideal-circle:nth-child(3):before {background: #4978bc;}
.ideal-circle:not(:last-child):after {content:''; position: absolute; top: 50%; right: calc(clamp(-10px, calc( 50 / var(--inner) * 100vw ), 50px) * -1); transform: translateY(-50%); width: 30px; height: 4px; background: linear-gradient(to right, #90abdc, #6488c8); border-radius: 2px;}
.ideal-circle:nth-child(2):after {background: linear-gradient(to right, #6488c8, #4978bc);}
.group-tit-desc {margin-bottom: var(--space-30);}
.border-left-txt {padding-left: 24px; border-left:3px solid var(--primary-color);}
.border-left-txt strong {display: block; font-weight: 700; font-size: var(--font-size-20); line-height: 1.2em; margin-bottom: var(--space-20); color: var(--dark-color);}
.group-hr-system {background: #f4f6f9;}
.hr-system {padding: var(--space-50); background: #fff; border-radius: var(--radius-24); border: 1px solid #ddd;}
.hr-system-item:not(:last-child)  .hr-system-cnt {margin-bottom: var(--space-30); padding-bottom: var(--space-30); border-bottom: 1px dashed #ddd;}
.hr-system-item {display: flex;}
.hr-system-item h3 {display: flex; align-items: center; width: 200px; height: fit-content; padding-right: 20px; font-size: var(--font-size-20); line-height: 1.2em; color: var(--dark-color);}
.hr-system-item h3 .num {display: flex; align-items: center; justify-content: center; width: 40px; min-width: 40px; height: 40px; border-radius: 100%; background: var(--secondary-color); color: #fff; font-size: var(--font-size-20); font-weight: 700; margin-right: 10px;}
.hr-system-cnt {flex:1;}
.hr-system-cnt > *:not(:last-child), .hr-document-list li:not(:last-child) {margin-bottom: 10px;}
.hr-document-list li {display: flex; gap: 10px;}
.hr-document-list strong {display: flex; align-items: center; justify-content: center; width: 60px; height: 30px; border-radius: 15px; border: 1px solid var(--secondary-color); color: var(--secondary-color);}
[lang="en"] .hr-document-list strong {width: 130px;}
.hr-contact-list {display: flex; gap: 10px clamp(30px, calc( 50 / var(--inner) * 100vw ), 50px); flex-wrap: wrap;}
.hr-contact-list li {display: flex; gap: 8px var(--space-25); border-left: 2px solid var(--secondary-color); padding-left: 10px;}
.hr-contact-list strong {color: var(--dark-color);}
.welfare-boxes {display: flex; gap: var(--space-20); flex-wrap: wrap;}
.welfare-box {display: flex; gap: var(--space-30); width: calc((100% - var(--space-20)) / 2); padding: var(--space-40); border: 1px solid #ddd; border-radius: var(--radius-24);}
.welfare-box-txt {flex:1;}
.welfare-box h3 {font-size: var(--font-size-20); line-height: 1.2em; margin-bottom: var(--space-15); color: var(--dark-color);}
.welfare-box ul {display: flex; flex-wrap: wrap; gap: var(--space-10) var(--space-30);}
[lang="en"] .welfare-box ul {flex-direction: column;}
.welfare-box ul li {min-width: calc((100% - var(--space-30)) / 2)}
.global-affiliates .group:not(:last-child) {margin-bottom: 20px;}
.global-affiliates-item {position: relative; padding: var(--space-50); background: #f4f6f9; border-radius: var(--radius-24);}
.global-affiliates-item:before {position: absolute; content: ''; top: 0; left: 0; width: 13px; height: 13px; background: var(--secondary-color);}
.affiliates-tit {display: flex; flex-wrap: wrap;font-size: var(--font-size-20); font-weight: 700; line-height: 1.2em; margin-bottom: var(--space-20); color: var(--dark-color);}
.affiliates-tit span:not(:last-child):after {content: ''; display: inline-block; width: 1px; height: 16px; margin: 0 var(--space-15); background: #ddd;}
.global-affiliates-item .hr-contact-list {gap:10px clamp(30px, calc( 40 / var(--inner) * 100vw ), 40px);}
.table-wrap table {width: 100%; border-collapse: collapse; border-top: 1px solid var(--primary-color); text-align: center;}
.table-wrap table th, .table-wrap table td {border-bottom: 1px solid #ddd; padding: var(--space-15) 10px;}
.table-wrap table th {background: #e6f0ff; color: var(--primary-color); border-color: #fff !important;}
.table-wrap table td {background: #fff;}
.table-wrap table th:not(:last-child), .table-wrap table td:not(:last-child) {border-right: 1px solid #ddd;}
.table-wrap table th:not(:last-child), .table-wrap table td:not(:last-child) {border-right: 1px solid #ddd;}