@charset "utf-8";
.space-top {padding-top: var(--space-140);}
.space-bot {padding-bottom: var(--space-140);}
.dot-list > li {text-indent: -11px; padding-left: 11px; line-height: 1.5em;}
.dot-list > li:not(:last-child) {margin-bottom: clamp(5px, calc(10 / var(--inner) * 100vw), 10px);}
.dot-list > li:before {content: '·'; margin-right: 8px; font-weight: 900;}
.table-wrap table {position: relative; width: 100%; border-collapse: collapse; text-align: center;  border-radius: var(--radius-24); overflow: hidden;}
.table-wrap table:after {content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 100%; border: 1px solid #ddd; border-radius: var(--radius-24);}
.table-wrap th, .table-wrap td {padding: var(--space-15) 10px; border: 1px solid #ddd;}
.table-wrap th {font-size: var(--font-size-18); font-weight: 500; color: var(--primary-color); background: rgba(29,153,185,.05); border-top: 0;}
.table-wrap th:last-child, .table-wrap td:last-child {border-right: 0;}
.table-wrap th.table-tit {background: var(--primary-color); color: #fff;}
.dot-tit {position: relative; padding-left: 20px;}
.dot-tit:before {content: ''; position: absolute; left: 0; top: 50%;width: 8px; height: 8px; background: var(--primary-color); border-radius: 100%; transform: translateY(-50%);}
.sec-full {position: relative; width: 100%; height: 100vh; overflow: hidden;}
.sec-full video, .sec-full .bg img {position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1;}

.page-greetings {gap: 30px var(--space-80);}
.greeting-img {width: 37.5%;}
.corporate-split-img {position: relative;}
.corporate-split-img:before {content: ''; z-index:-1; position: absolute; left: 0; right: 0; height: 10%; bottom: 14%; background: linear-gradient(to right, #fff, #e8f4f6,#fff);}
.business-fields {gap: var(--space-20)}
.business-field {border: 1px solid var(--primary-color); border-radius: var(--radius-16); overflow: hidden; background: rgba(29,153,185,.03);}
.business-field:nth-child(even) {border-color: #666; background: rgba(012,102,102,.03);}
.business-field h3 {padding: clamp(7px, calc(13 / var(--inner) * 100vw), 13px) 0; background: var(--primary-color); font-weight: 500;}
.business-field:nth-child(even) h3{background: #666;}
.business-field ul {padding: var(--space-20);}
.org-network-txt {padding: clamp(8px, calc(17 / var(--inner) * 100vw), 17px) 15px; border: 1px solid var(--primary-color); border-radius: 40px;}
.root_daum_roughmap .cont {display: none;}
.root_daum_roughmap .wrap_map, .root_daum_roughmap {width: 100% !important;}
.location-infoes {gap: 30px var(--space-50);}
.location-info {padding-left: var(--location-gap); margin-top: var(--space-45);}
.location-info h2 {position: relative;}
.location-info h2:before {content: ''; position: absolute; left: calc(var(--location-gap) * -1); top: 50%; height: 1px; width: calc(var(--location-gap) * .72); background: #999;}
.location-info li {display: flex;}
.location-info li:not(:last-child) {margin-bottom: var(--space-15);}
.location-info li strong {min-width: 120px;}
.sec-research-info {position: relative; border-bottom: 1px solid #eee;}
.sec-research-info:after {content: ''; position: absolute; left: 50%; bottom: 0; width: 12px; height: 12px; background: var(--primary-color); border-radius: 100%; transform: translate(-50%, 50%);}
.research-info-graphic {padding: var(--space-100) var(--space-30); border-radius: var(--radius-24); background: rgba(29,153,185,.1);}
.research-info-items {gap: var(--space-65) var(--space-50); flex-wrap: wrap;}
.research-info-item {width: calc((100% - var(--space-50) * 2) / 3);}
.research-portfolio-cnt {padding: var(--space-100) 0; background: url('/images/sub/bg-research-portfolio.jpg') no-repeat top center / cover;}
.research-portfolio-cnt ul {display: flex; flex-wrap: wrap; margin: calc(clamp(5px, calc(12 / var(--inner) * 100vw), 12px) * -1)}
.research-portfolio-cnt li {width: 25%; padding: clamp(5px, calc(12 / var(--inner) * 100vw), 12px);}
.research-portfolio-box {display: flex; flex-direction: column; justify-content: space-between; height: 100%; padding:var(--space-30) 15px; background: #fff; border-radius: 8px;}

.sec-platform-welcome {display: flex; align-items: center; gap: 25px clamp(35px, calc(95 / var(--inner) * 100vw), 95px);}
.sec-platform-welcome .img {width: 50%;}
.data-platform-tag {width: fit-content; font-size: var(--font-size-20); background: linear-gradient(to right, var(--primary-color), var(--dark-color)); -webkit-background-clip: text; -webkit-text-fill-color: transparent;}
.platform-box {position: relative; z-index: 1; height: 100%; padding: var(--space-50) var(--space-40); border-radius: var(--radius-16); background: #f4f4f4;}
.platform-box .num {display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; margin-bottom: var(--space-35); border-radius: 100%; background: var(--primary-color); color: #fff; font-size: var(--font-size-18); font-weight: 800;}
.platform-box .icon {position: absolute; right: 0; bottom: 0; z-index: -1;}
.sec-platform-boxes ul {display: flex; gap: 10px;}
.sec-platform-boxes li {width: calc((100% - 10px * 3) / 4);}
.sec-platform-list ul,
.sec-esg-cnt ul {display: flex; flex-wrap: wrap; gap: var(--space-20);}
.sec-platform-list li,
.sec-esg-cnt li {width: calc((100% - var(--space-20)) / 2); padding: var(--space-25) var(--space-30); padding-left: calc(var(--space-30) + 11px); border-radius: var(--radius-16); background: #f4f4f4;}
.sec-platform-list small {display: block; margin-top: 5px; text-indent: 0; font-size: var(--font-size-16); font-weight: 400; color: #505050;}
.sec-platform-list .dot-list li:not(:last-child),
.sec-esg-cnt .dot-list li:not(:last-child) {margin-bottom: 0;}
.sec-platform-gallery ul {display: flex; flex-wrap: wrap; gap: 25px 0; margin: 0 calc(var(--space-20) * -1);}
.sec-platform-gallery li {width: 25%; padding: 0 var(--space-20); line-height: 1.5em;}
.platform-gallery-item .img {position: relative; border-radius: var(--radius-16); box-shadow: 6px 6px 24px rgba(0,0,0,.08); overflow: hidden;}
.platform-gallery-item .img:after {position: absolute; content:''; top: 0; right: 0; bottom: 0; left: 0; border: 1px solid #eee; border-radius: var(--radius-16);}
.sec-platform-welcome .chk-list {gap: 10px;}
.sec-platform-welcome .icon-chk {margin-bottom: 5px;}
.sec-esg-cnt {padding: var(--space-100) 0; background: url('/images/sub/bg-esg-performance.jpg') no-repeat center center / cover;}
.sec-esg-cnt .dot-list li:before {color: var(--primary-color);}

.recruit-requirements {border-top:2px solid var(--dark-color); border-bottom: 2px solid var(--dark-color);}
.recruit-requirement {display: flex; align-items: center;}

.page-recruit {max-width: 1000px;margin: 0 auto;}
.recruit-requirement {padding: var(--space-35) 0; font-size: var(--font-size-18);}
.recruit-requirement:not(:last-child) {border-bottom: 1px dotted #ddd;}
.recruit-requirement .tit {display: flex; align-items: center; gap: 20px; font-size: var(--font-size-26); font-weight: 800; color: var(--primary-color);}
.recruit-requirement .tit,
.recruit-requirement ul {width: 50%;}
.recruit-shortcut h4 {width: fit-content; background: linear-gradient(to right, var(--primary-color), var(--dark-color)); -webkit-background-clip: text; -webkit-text-fill-color: transparent;}
.recruit-shortcut-btns {gap: 10px;}
.recruit-shortcut-btns a {display: flex; flex: 1; justify-content: space-between; padding: var(--space-15) var(--space-35);font-size: var(--font-size-18); font-weight: 700; color: var(--primary-color); border: 2px solid var(--primary-color); border-radius: 40px;}
.recruit-shortcut-btns a:after {content: '→'; font-size: var(--font-size-20); font-weight: 700;}
.recruit-shortcut-btns a:hover {background: var(--primary-color); color: #fff;}

.history-cnt {position: relative; display: flex;}
.history-cnt:before {content: ''; position: absolute; top: 12px; left: 0; right: 12px; height: 8px; margin-top: -4px; background: #f1f1f1; z-index: -1;}
.history-cnt:after {content:''; position: absolute; right: 0; top: -2px; width: 16px; height: 28px; background: url('/images/sub/history-arrow.png') no-repeat center center; background-size: contain;}
.history-item {flex: 1; padding-right: var(--space-65);}
.history-date {width: fit-content;}
.history-date span {position: relative; display: block; width: fit-content; margin-bottom: var(--space-25); padding: 8px 20px; border-radius:100px; background: #49b8d5; font-size: var(--font-size-20); line-height: 1.5em; font-weight: 700; color: #fff;}
.history-date.type2 span {background: #1785a1;}
.history-date.type3 span {background: #0a5c71;}
.history-date.type4 span {background: #02303c;}
.history-date:before {display: block; content:''; width: 24px; height: 24px; margin: 0 auto var(--space-30); border-radius: 100%; background: #fff; border: 3px solid #49b8d5;}
.history-date.type2:before {border-color: #1785a1;}
.history-date.type3:before {border-color: #0a5c71;}
.history-date.type4:before {border-color: #02303c;}
.history-list {font-size: var(--font-size-18); font-weight: 700; line-height: 1.6667em;}
.history-list>ul>li {position: relative; padding-left: 15px;}
.history-list>ul>li:not(:last-child) {margin-bottom: var(--space-25);}
.history-list>ul>li:before {content:''; position: absolute; top: .75em; left: 0; width: 5px; height: 5px; border-radius: 100%; background: #ccc;}
.history-list small {display: block; font-size: var(--font-size-16); font-weight: 400; color: #878787; line-height: 1.625em;}