.sub-title{ padding-left: 24px; position: relative; margin-bottom: 10px;}
.sub-title:before { left: 0; background: #00bcd4;}
.sub-title:after { left: 6px; background: #0094de;}
.sub-title:before, .sub-title:after { position: absolute; top: 50%; transform: translateY(-60%); width: 14px; height: 14px; opacity: .8; border-radius: 100%; content: "";}
.blue-bg-box{background: #f1faff; padding: 20px; color: #85a6b6; border-radius: 10px;}
.blue-bg-box li{position: relative; padding-left: 12px;}
.blue-bg-box li:before{content: ""; position: absolute; left: 0; top: 7px; width: 3px; height: 3px; border-radius: 50%; background: #8babbb;}
.blue-bg-box li + li{margin-top: 7px;}
.sub-title-mini{display: inline-block; padding-left: 10px; word-break: keep-all; color: #33a9e5;}
.br-txt br{display: none;}
@media (min-width: 992px) {
    .sub-title{ padding-left: 45px; margin-bottom: 20px;}
    .sub-title:before, .sub-title:after { width: 20px; height: 20px;}
    .sub-title:after {left: 14px;}
    .blue-bg-box{padding: 40px;}
    .blue-bg-box li{padding-left: 16px;}
    .blue-bg-box li + li{margin-top: 15px;}
    .blue-bg-box li:before{content: ""; position: absolute; left: 0; top: 9px; width: 4px; height: 4px; }
    .br-txt br{display: block;}
}

.greeting-box .greeting-img{position: relative; z-index: 0; text-align: center; margin-bottom: 50px;}
.greeting-box .greeting-txt{text-align: center;}
.greeting-img .greeting-shape{position: absolute; bottom: -40px; right: 0; animation: rotate360_image 10s linear infinite; z-index: -1; max-width: 120px;}
.sign-img-box{margin-top: 10px; display: block;}
.sign-img-box img{max-width: 80px;}
@keyframes rotate360_image{
    100% {
        transform: rotate(360deg);
    }
}
@media (min-width: 768px) {
    .greeting-box .greeting-img{width: 40%; display: inline-block; vertical-align: middle; margin-bottom: 0;}
    .greeting-box .greeting-txt{width: calc(100% - 40% - 24px); display: inline-block; margin-left: 20px; vertical-align: top; text-align: left;}
    .greeting-img .greeting-shape{max-width: inherit; bottom: -70px; left: -75px; right: inherit;}
    .sign-img-box{margin-left: 20px; margin-top: 0; display: inline-block;}
    .sign-img-box img{max-width: 110px;}
}

.sub-business-box .sub-business-list{font-size: 0; position: relative; overflow: hidden;}
.sub-business-box .sub-business-list .sub-business-img{height: 200px; overflow: hidden; border-radius: 10px; display: block; vertical-align: top; position: relative;}
.sub-business-box .sub-business-list .sub-business-img img{position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);}
.sub-business-box .sub-business-list .sub-business-txt-box{max-width: 95%; margin: -34px auto 10px auto;box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);}
.sub-business-box .sub-business-list .sub-business-title{padding: 20px; background: linear-gradient(to left, #0094de, #26297e); color: #fff; border-radius: 10px 10px 0 0;}
.sub-business-box .sub-business-list .sub-business-detail{background: #fff; padding: 20px; border-radius: 0 0 10px 10px;}
.sub-business-box .sub-business-detail li{font-weight: 600; position: relative; padding-left: 12px; word-break: keep-all;}
.sub-business-box .sub-business-detail li:before{content: ""; position: absolute; left: 0; top: 7px; width: 3px; height: 3px; border-radius: 50%; background: #26297e;}
.sub-business-box .sub-business-detail li + li{margin-top: 10px; font-weight: 600;}
.sub-business-box .sub-business-list + .sub-business-list{margin-top: 30px;}
.representative-box .representative-bg-gray{background: #f7f7f7; padding: 20px;  border-radius: 10px;}
.performance-swiper{position: relative; padding-bottom: 40px;}
.performance-swiper .performance-box .performance-img{width: 100%; padding-bottom: 66.164%; position: relative; border-radius: 10px; overflow: hidden;}
.performance-swiper .performance-box .performance-img img{    position: absolute;  top: 50%; left: 50%; transform: translate(-50%, -50%); max-width: 100%; width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease;}
.img-three-box .img-three-list + .img-three-list{margin-top: 20px;}
@media (min-width: 768px) {
    .sub-business-box .sub-business-list .sub-business-img{width: calc(60% - 20px); height: 350px; margin: 0 10px; display: inline-block;}
    .sub-business-box .sub-business-list .sub-business-txt-box{width: calc(50% - 20px); margin: 0 10px; display: inline-block; vertical-align: top; box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);  position: absolute; right: 0; top: 50%; transform: translateY(-50%); max-width: 100%;}
    .sub-business-box .sub-business-list + .sub-business-list{margin-top: 60px;}
    .sub-business-box .sub-business-list .sub-business-title{padding: 24px 30px;}
    .sub-business-box .sub-business-list .sub-business-detail{padding: 40px 30px;}
    .sub-business-box .sub-business-detail li{ padding-left: 16px;}
    .sub-business-box .sub-business-detail li:before{content: ""; position: absolute; left: 0; top: 9px; width: 4px; height: 4px;}
    .representative-box .representative-bg-gray{padding: 30px 20px;}
    .img-three-box{font-size: 0; margin: 0 -10px;}
    .img-three-box .img-three-list{width: calc(100% / 3  - 20px); margin: 0 10px; vertical-align: top; display: inline-block;}
    .img-three-box .img-three-list + .img-three-list{margin-top: 0px;}
    .img-three-box .img-three-list:nth-child(n+4){margin-top: 20px;}
}

.be-fore li{padding-left: 14px; position: relative;}
.be-fore li:before{content: ""; width: 3px; height: 3px; background: #aaa; border-radius: 50%; position: absolute; left: 0; top: 9px;}
.be-fore li + li{margin-top: 6px;}

.sub-business-box .sub-business-list {
  display: flex;
  align-items: center;
  gap: 30px;
}

.sub-business-box .sub-business-list .sub-business-img {
  flex: 0 0 50%;
  height: 350px;
  border-radius: 10px;
  overflow: hidden;
  position: relative;
}

.sub-business-box .sub-business-list .sub-business-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  top: 0;
  left: 0;
  transform: none;
}

.sub-business-box .sub-business-list .sub-business-txt-box {
  flex: 1;
  margin: 0;
  position: static;
  transform: none;
  background: #fff;
  border: 1px solid #eee;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.sub-business-box .sub-business-list .sub-business-title {
  padding: 20px 24px;
  background: none;
  color: #222;
  font-size: 20px;
  font-weight: 700;
  border-bottom: 1px solid #eee;
}

.sub-business-box .sub-business-list .sub-business-detail {
  background: none;
  padding: 20px 24px;
}

@media (max-width: 768px) {
  .sub-business-box .sub-business-list {
    flex-direction: column;
    align-items: stretch;
    margin-bottom: 60px;
  }

  .sub-business-box .sub-business-list .sub-business-img {
    flex: none;
    width: 100%;
    height: auto;
    margin: 0;
  }

  .sub-business-box .sub-business-list .sub-business-img img {
    width: 100%;
    height: auto;
    position: static;
    transform: none;
  }

  .sub-business-box .sub-business-list .sub-business-txt-box {
    width: 100%;
    margin: 0;
    border-top: none;
    border-radius: 0 0 10px 10px;
  }
  .sub-business-box .sub-business-list {
    gap: 10px;
}
}

.main-m-history{position: relative;}
.main-m-history .layout-defult{width: 100%;}
.main-m-history .sec2-box{padding-top: 0px;}
.main-m-history:before{content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 35vh; background: linear-gradient(to top, #26297e 0%, #0094de 80%);}
.w-view-btn{background-color:transparent; padding: 14px 40px; border: 1px solid #fff;}
.m-history-box{font-size: 0; padding-top: 20px;}
.m-history-box .m-history-left{text-align: center; color: #fff; position: relative; z-index: 1;}
.m-history-swiper{overflow: hidden; position: relative; padding: 40px 0; cursor: url(../images/main/drag_icon.png), url(../images/main/drag_icon.png) 5 5, auto; }
.m-history-swiper .m-history-list{display: block; padding: 60px 30px; background: rgba(255, 255, 255, 0.3); border-radius: 10px; box-shadow: 2px 2px 10px rgba(0,0,0,0.1); margin: 10px;}
.m-history-swiper .swiper-slide-active .m-history-list .mh-title{ color: #0094de;}
.m-history-swiper .swiper-slide-active .m-history-list {background: rgba(255, 255, 255, 1);}
.m-history-swiper .swiper-slide-active .m-history-list .mh-txt-detail{color: #071921;}
.m-history-swiper .m-history-list .mh-date{margin-bottom: 5px; display: inline-block;}
.m-history-swiper .m-history-list .mh-txt-detail{color: #666; position: relative; padding-left: 10px; word-break: keep-all;}
.m-history-swiper .m-history-list .mh-txt-detail:before{content: ""; position: absolute; left: 0; top: 9px; width: 4px; height: 4px; border-radius: 50%; background: #0094de;}
.m-history-swiper .m-history-list .mh-txt-list + .mh-txt-list{margin-top: 10px;}
.m-history-swiper .swiper-pagination{bottom: 0; top: auto; background: #ccc; height: 6px;}
.m-history-swiper .swiper-pagination-progressbar .swiper-pagination-progressbar-fill{background: #0094de;}

@media(min-width:768px) {
    .main-m-history{min-height: 700px; padding: 170px 0;}
    .main-m-history .sec2-box{padding-top: 55px;}
    .main-m-history:before{content: ""; position: absolute; top: 0; left: 0; width: 300px; height: 100%;}
    .m-history-box{padding-top: 0px;}
    .m-history-box .m-history-left{width: calc(30% - 20px); padding-left: 50px; display: inline-block; vertical-align: middle; text-align: left; margin-top: 0;}
    .m-history-box .m-history-right{width: calc(70% - 20px); display: inline-block; vertical-align: middle;}
    .m-history-swiper .swiper-slide-active .m-history-list {margin-top: -40px;}
    .m-history-swiper{padding: 60px 0;}
}
@media(min-width:1440px) {
    .main-m-history:before{content: ""; position: absolute; top: 0; left: 0; width: 650px;}
    .m-history-box .m-history-left{ padding-left: 100px;}
}
@media(min-width:1650px) {
    .main-m-history:after{font-size: 220px;}
}

.purpose-box{background: #fff; border-radius: 30px 0 30px 0; padding: 30px; font-size: 0; border: 2px solid #26297e;}
.purpose-box .purpose-txt{margin-top: 10px;}
.purpose-box.mission .purpose-title{color: #26297e;}
.purpose-box.mission .purpose-txt{color: #8486c2;}
.purpose-box.vision{border: 2px solid #0094de;}
.purpose-box.vision .purpose-title{color: #0094de;}
.purpose-box.vision .purpose-txt{color: #75adc9;}
.core-value-box{background: linear-gradient(to bottom, #f2f2f2, rgba(128, 128, 128, 0)); border-radius: 30px 30px 0 0; padding: 50px 20px;}
.core-value-ul{font-size: 0;}
.core-value-ul .core-value-li{ background: #fff; padding: 20px; border-radius: 20px; box-shadow: 2px 2px 10px rgba(0,0,0,0.1); word-break: keep-all;}
.core-value-ul .core-value-li:nth-child(n+2){margin-top: 20px;}
.core-value-ul .core-value-li .core-value-txt{color: #666;}

.future-goals-ul{font-size: 0;}
.future-goals-ul .future-goals-li{background: #ecf9ff; padding: 30px 10px; border-radius: 20px; word-break: keep-all;}
.future-goals-ul .future-goals-li:nth-child(n+2){margin-top: 20px;}
.future-goals-ul .future-goals-li hr{ margin-top: 20px; margin-bottom: 20px; border: 0; border-top: 1px solid #caeeff;}
.future-goals-ul .future-goals-li .future-goals-title{color: #0094e0;}
.future-goals-ul .future-goals-li .future-goals-txt{color: #75adc9;}
@media(min-width:768px) {
    .purpose-box{padding: 50px 40px;}
    .purpose-box .purpose-title{width: 160px; display: inline-block; vertical-align: middle;}
    .purpose-box .purpose-txt{width: calc(100% - 160px - 100px); margin-left: 100px; display: inline-block; vertical-align: middle; margin-top: 0;}
    .core-value-ul .core-value-li{width: calc(100% / 2 - 20px); margin: 0 10px; display: inline-block; vertical-align: top; padding: 30px 20px;}
    .core-value-ul .core-value-li:nth-child(n+2){margin-top: 0px;}
    .core-value-ul .core-value-li:nth-child(n+3){margin-top: 20px;}
}
@media(min-width:992px) {
    .core-value-ul .core-value-li{width: calc(100% / 5 - 20px);}
    .core-value-ul .core-value-li:nth-child(n+3){margin-top: 0px;}
    .future-goals-ul .future-goals-li{width: calc(100% / 3 - 20px); margin: 0 10px; display: inline-block; vertical-align: top;  padding: 40px 10px;}
    .future-goals-ul .future-goals-li:nth-child(n+2){margin-top: 0px;}
}

/* WTS-21 : 핵심가치 / VISION 2030 카드 가로·세로 크기 통일 (국문·영문 공통)
   - inline-block 은 카드마다 글 길이만큼 높이가 달라지므로 grid 로 바꿔 같은 줄 카드 높이를 맞춘다
   - subgrid 지원 브라우저에서는 아이콘·제목·설명(구분선) 시작 위치까지 카드끼리 정렬한다 */
@media(min-width:768px) {
    .core-value-ul{display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; padding: 0 10px;}
    .core-value-ul .core-value-li,
    .core-value-ul .core-value-li:nth-child(n){width: auto; margin: 0;}
}
@media(min-width:992px) {
    .core-value-ul{grid-template-columns: repeat(5, minmax(0, 1fr));}
    .future-goals-ul{display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; padding: 0 10px;}
    .future-goals-ul .future-goals-li,
    .future-goals-ul .future-goals-li:nth-child(n){width: auto; margin: 0;}
}
@supports (grid-template-rows: subgrid) {
    @media(min-width:768px) {
        .core-value-ul .core-value-li{display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 0; align-content: start;}
    }
    @media(min-width:992px) {
        .future-goals-ul .future-goals-li{display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 0; align-content: start;}
        .future-goals-ul .future-goals-li .future-goals-title{align-self: center;}
        /* hr 의 기본 좌우 margin:auto 가 grid 안에서는 폭 0 으로 줄어 구분선이 사라지므로 폭을 채운다 */
        .future-goals-ul .future-goals-li hr{width: 100%; margin-left: 0; margin-right: 0;}
    }
}

.bg-gray{ background: #f7f7f7; padding: 40px 20px;}
.logo-top-box .logo-top-img { padding: 50px 20px; background: #fff;}
.logo-border-grey{border: 1px solid #ddd; padding: 20px; text-align: center;}
.logo-wh50-box {font-size: 0; overflow: hidden;}
.logo-wh50-box .logo-wh50-item:nth-child(n+2){margin-top: 20px;}
.reco-img-box{background: #ecf9ff; padding: 40px 20px;}
.reco-img-box img{max-width: 70%;}
@media(min-width:992px) {
    .bg-gray{ padding: 60px 20px;}
    .logo-top-box .logo-top-img { padding: 100px 20px;}
    .reco-img-box{padding: 60px 20px;}
    .reco-img-box img{max-width: 100%;}
    .logo-wh50-box {margin: 0 -10px; }
    .logo-wh50-box .logo-wh50-item{width: calc(100% / 2 - 20px); margin: 0 10px; display: inline-block; vertical-align: top; }
    .logo-wh50-box .logo-wh50-item:nth-child(n+2){margin-top: 0px;}
    .logo-border-grey{padding: 40px 20px;}
}

.catalog-box{font-size: 0; overflow: hidden; padding: 20px 0;}
.catalog-box .catalog-img img{box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1); max-width: 70%;}
.catalog-box .catalog-txt{margin-top: 40px; text-align: center;}
.catalog-box .catalog-download{padding: 16px 26px; background: #fff; border: 1px solid #e7e7e7; min-width: 140px; border-radius: 30px; text-align: left; box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1); color: #444; position: relative; display: inline-block;}
.catalog-box .catalog-download .catalog-download-icon-box{position: absolute; top: calc(50% - 2px); right: 30px; transform: translate(0%,-50%);}
.catalog-box .catalog-download .catalog-download-icon-box img{max-width: 14px;}
@media(min-width:768px) {
    .catalog-box .catalog-img{width: calc(50% - 40px); margin: 0 20px; display: inline-block; vertical-align: middle;}
    .catalog-box .catalog-txt{width: calc(50% - 40px); margin: 0 20px; display: inline-block; vertical-align: middle; margin-top: 0; text-align: left;}
    .catalog-box .catalog-img img{max-width: 100%;}
    .catalog-box .catalog-download{padding: 20px 30px;}
    .catalog-box .catalog-download{ min-width: 170px;}
    .catalog-box .catalog-download .catalog-download-icon-box img{max-width: 16px;}
}

.youtube-wrap{ position: relative; width: 100%; padding-bottom: 56.25%; margin-bottom: 5px;}
.youtube-wrap iframe { position: absolute; width: 100%; height: 100%;}

.recruit-box .recruit_banner{display: block;  background: #4672e8; color: #fff; padding: 30px 20px; border-radius: 10px; position: relative;}
.recruit-box .recruit_banner .rbt-img{position: absolute; right: -10px; bottom: 0; max-width: 160px;}
.recruit-box .recruit_banner .rbt-bnt{display: inline-block; background: #fff; color: #4672e8; padding: 6px 30px; border-radius: 60px;}
.recruitment-info-box{font-size: 0;}
.recruitment-info-box .recruitment-list +.recruitment-list {margin-top: 20px;}
.recruitment-info-box .recruitment-list .recruitment-lnk{display: block; border: 1px solid #e7e7e7; padding: 30px 20px; border-radius: 10px; transition: 0.5s;}
.recruitment-info-box .recruitment-list .recruitment-lnk:hover{border: 1px solid #0094de; transition: 0.5s;}
.recruitment-info-box .recruitment-list .recruitment-lnk .recruitment-title{overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; width: 100%;}
.recruitment-info-box .recruitment-list .recruitment-lnk .recruitment-state{background: #0094de; display: inline-block; padding: 4px 10px; color: #fff;}
.recruitment-info-box .recruitment-list .recruitment-lnk.recruit-end{cursor: default; pointer-events: none; background: #f7f7f7; color: #999;}
.recruitment-info-box .recruitment-list .recruitment-lnk.recruit-end .recruitment-state{background: #444;}
.recruitment-info-box .recruitment-list .recruitment-lnk .recruitment-period{color: #999;}

:root{
  --card-bg:#fff;
  --card-bd:#e9eef3;
  --txt:#1f2a37;
  --muted:#6b7280;
  --blue:#2563eb;
  --green:#16a34a;
  --orange:#f97316;
  --shadow: 0 6px 20px rgba(2,6,23,.06);
}

.talent-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap:20px;
  margin-top:20px;
}
@media (max-width: 900px){
  .talent-grid{ grid-template-columns: 1fr; }
}
.talent-card{
  background: var(--card-bg);
  border:1px solid var(--card-bd);
  border-radius: 18px;
  padding:24px;
  box-shadow: var(--shadow);
  transition: transform .2s ease, box-shadow .2s ease;
}
.talent-card:hover{
  transform: translateY(-3px);
  box-shadow: 0 10px 28px rgba(2,6,23,.10);
}
.talent-badge{
  width:72px; height:72px;
  display:grid; place-items:center;
  border-radius: 18px;
  margin-bottom:14px;
  background: #eef2ff;
}
.talent-badge svg{ width:34px; height:34px; fill:#fff; opacity:.95; }
.badge-blue{ background: linear-gradient(135deg,#3b82f6,#1d4ed8); }
.badge-green{ background: linear-gradient(135deg,#22c55e,#15803d); }
.badge-orange{ background: linear-gradient(135deg,#fb923c,#c2410c); }

.talent-title{
  font-weight:800;
  font-size:20px;
  color:var(--txt);
  margin-bottom:6px;
}
.talent-desc{
  color:var(--muted);
  line-height:1.6;
  font-size:15px;
}

.benefit-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap:22px;
  margin-top:20px;
}
@media (max-width: 1100px){
  .benefit-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 680px){
  .benefit-grid{ grid-template-columns: 1fr; }
}
.benefit-card{
  background: var(--card-bg);
  border:1px solid var(--card-bd);
  border-radius: 16px;
  padding:22px 20px;
  box-shadow: var(--shadow);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.benefit-card:hover{
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(2,6,23,.10);
  border-color:#d7e1ec;
}
.benefit-head{
  display:flex; align-items:center; gap:10px; margin-bottom:10px;
}
.benefit-ico{
  width:36px; height:36px; border-radius:10px;
  background:#e2f0ff; display:grid; place-items:center; flex:0 0 auto;
}
.benefit-ico svg{ width:20px; height:20px; fill:#334155; opacity:.9; }
.benefit-title{
  font-size:18px; font-weight:800; color:var(--txt);
}
.benefit-list{ margin:8px 0 0; padding-left:18px; color:var(--txt); }
.benefit-list li{
  margin:6px 0 6px 47px;
  position:relative;
}
.benefit-list li::marker{ color:#1d4174; }

.list-inline-box {
	text-align: center;
	padding-top: 20px;
}

.list-inline-item {
	margin: -10px 0;
	width: 100%;
	transition: 0.3s;
}

.value-item {
	width: 180px;
	height: 180px;
	border-radius: 100%;
	position: relative;
	border: 2px solid #94c8ff;
	font-weight: 500;
	font-size: 10px;
	margin: 0 auto;
}

.value-item:hover {
	background: linear-gradient(-45deg, #1fdeaf 10%, #213f9a 60%, #0062d0 100%);
	border: 0;
	color: #fff;
	box-shadow: 10px 24px 30px rgba(0, 142, 208, .12);
	z-index: 2;
}

.value-item:hover .txt-eng:before {
	background: rgba(255, 255, 255, .1);
	;
}

.value-item .value-in-box {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 90%;
	transform: translate(-50%, -50%);
}

.value-item .txt-kor {
	font-size: 1.750em;
	font-weight: 600;
}

.value-item .txt-eng {
	font-size: 1.250em;
}

.value-item .txt-eng:before {
	display: block;
	margin: 7px auto;
	content: "";
	width: 60%;
	height: 1px;
	background: rgba(0, 0, 0, .1);
}

@media (min-width: 533px) {
	.list-inline-box {
		padding-top: 40px;
	}

	.list-inline-item {
		margin: 0 -10px;
		width: auto;
	}

	.value-item .txt-eng:before {
		margin: 14px auto;
	}
}

@media (min-width: 1200px) {
	.list-inline-item {
		margin: 0 -20px;
	}

	.value-item {
		width: 360px;
		height: 360px;
		border-width: 4px;
		font-size: 16px;
	}
}

.benefit-card.slide-top {
  --stagger: 0s;
  transition:
    opacity 600ms ease var(--stagger),
    top 600ms ease var(--stagger),
    transform .2s ease,
    box-shadow .2s ease,
    border-color .2s ease;
}

.benefit-card.slide-top:nth-child(1) { --stagger: 0.10s; }
.benefit-card.slide-top:nth-child(2) { --stagger: 0.25s; }
.benefit-card.slide-top:nth-child(3) { --stagger: 0.40s; }
.benefit-card.slide-top:nth-child(4) { --stagger: 0.55s; }
.benefit-card.slide-top:nth-child(5) { --stagger: 0.70s; }
.benefit-card.slide-top:nth-child(6) { --stagger: 0.85s; }

.slide-top.is-visible,
.slide-top.on,
.slide-top.active {
  opacity: 1;
  top: 0;
}

@media(min-width:768px) {
    .recruit-box .recruit_banner .rbt-img{position: absolute; right: 30px; bottom: 0; max-width: 250px;}
}
@media(min-width:992px) {
    .recruit-box .recruit_banner{padding: 40px 30px;}
    .recruit-box .recruit_banner .rbt-img{max-width: 100%;}
    .recruitment-info-box .recruitment-list{display: inline-block; width: calc(100%/ 3 - 40px); margin: 0 20px; vertical-align: top;}
    .recruitment-info-box .recruitment-list +.recruitment-list {margin-top: 0px;}
    .recruitment-info-box .recruitment-list .recruitment-lnk{padding: 40px;}
}

.esg-policy{font-size: 0;}
.esg-policy .esg-policy-list{ margin-top: 10px; vertical-align: top; text-align: center; border: 1px solid #eee; padding: 20px 10px; word-break: keep-all;}
.esg-policy .esg-policy-list .esg-policy-num{ background: #0094de; display: inline-block; color: #fff; width: 36px; text-align: center; height: 36px; border-radius: 50%; font-weight: 700; padding: 8px 5px;}

@media(min-width:768px) {
    .esg-policy .esg-policy-list{width: calc(100% / 2 - 20px);  margin: 10px; display: inline-block;}
}
@media(min-width:992px) {
    .esg-policy .esg-policy-list{width: calc(100% / 3 - 20px);}
}

.map-direction-box{background: #f5fcff; padding: 20px;}
.map-direction-box .map-direction-title{color: #0094e0; display: inline-block; width: 200px;}
.map-direction-box .map-direction-txt{color: #75adc9;  vertical-align: top; margin-top: 10px;}
.map-direction-box .map-direction-txt span{display: inline-block; width: 20px; height: 20px; background: #0094e0; color: #fff; border-radius: 50%; vertical-align: middle; padding: 3px 7px; margin-right: 3px;}
.map-direction-box .map-direction-txt .map-direction-list +  .map-direction-list{margin-top: 6px;}

@media(min-width:992px) {
    .map-direction-box{padding: 40px 30px;}
    .map-direction-box .map-direction-txt{width: calc(100% - 244px); padding-left: 40px; display: inline-block; margin-top: 0;}
    .map-direction-box .map-direction-txt span{ width: 26px; height: 26px; padding: 4px 8px; margin-right: 6px;}
    .map-direction-box .map-direction-txt .map-direction-list +  .map-direction-list{margin-top: 10px;}
}

.blue-table-box .basic-table thead{background: #2f9ad0;}
.blue-table-box .basic-table th { color: #fff; border-right: 1px solid #d2e5ef; border-bottom: 1px solid #d2e5ef;}
.blue-table-box .basic-table td { border-bottom: 1px solid #d2e5ef; border-right: 1px solid #d2e5ef; padding: 17px 15px;}
.blue-table-box .basic-table tr:last-child td{ border-bottom: 1px solid #d2e5ef!important;}

.sub-quick-nav{text-align: left; overflow-x: auto; overflow-y: hidden; padding: 20px 15px;}
.sub-quick-nav-con{width: calc(190px* 8);}
.sub-quick-nav-con .sub-quick-nav-item{display: inline-block; min-width: 177px; margin: 0 5px; vertical-align: top;}
.sub-quick-nav-item .m-nav-a{background: #fff; padding: 20px; display: block; backdrop-filter: blur(50px); -webkit-backdrop-filter: blur(50px); min-height: 150px;  transition: 0.5s; border-radius: 10px; border: 2px solid #26297e; color: #26297e;}
.sub-quick-nav-item .m-nav-a .con-on{opacity: 0;}
.sub-quick-nav-item .m-nav-a .con-on .con-txt{vertical-align: middle; display: none; padding: 30px;}
.sub-quick-nav-item .m-nav-a .plus-icon{position: absolute; bottom: 15px; right: 15px; background: rgb(41 42 128); border-radius: 50%; width: 40px; height: 40px;}
.sub-quick-nav-item .m-nav-a .plus-icon span{position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); color: #fff; font-weight: 600; font-size: 26px;  transition: transform 0.2s ease-out;  transform-origin: center;}
.sub-quick-nav-item .m-nav-a .quick-nav-icon{position: absolute; left: 20px; bottom: 15px;}
.sub-quick-nav-item .m-nav-a .quick-nav-icon img{max-width: 32px;}
.sub-quick-nav-item .m-nav-a .con-on .con-txt .ellipsis-txt2{ width: 100%;  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;}
@keyframes roll-fast {
    0% {
        transform: translate(-50%,-50%) rotate(0deg);
    }
    100% {
        transform: translate(-50%,-50%) rotate(360deg);
    }
}
@media(min-width:768px) {
    .sub-quick-nav-con {width: calc(260px* 6);}
    .sub-quick-nav-con .sub-quick-nav-item{ min-width: 240px;}
}
@media(min-width:1440px) {
    .sub-quick-nav-con {width: inherit; text-align: center;}
    .sub-quick-nav-con .sub-quick-nav-item{width: calc(100% / 4 - 24px); display: inline-block; margin: 0 10px; vertical-align: top; border-radius: 10px; overflow: hidden; text-align: left;}
    .sub-quick-nav-con .sub-quick-nav-item:nth-child(n+5){margin-top: 20px;}
    .sub-quick-nav-item .m-nav-a{padding: 30px; min-height: 200px;}
    .sub-quick-nav-item .m-nav-a .quick-nav-icon{position: absolute; left: 40px; bottom: 30px;}
    .sub-quick-nav-item .m-nav-a .plus-icon{position: absolute; bottom: 20px; right: 20px; width: 50px; height: 50px;}
    .sub-quick-nav-item .m-nav-a:hover{background: rgba(38,41,126,0.9); transition: 0.5s; color: #fff;}
    .sub-quick-nav-item .m-nav-a:hover .con-off{display: none;}
    .sub-quick-nav-item .m-nav-a:hover .con-on{position: absolute; top: 0px; left: 0px; opacity: 1; width: 100%; height: 100%;}
    .sub-quick-nav-item .m-nav-a:hover .con-on .con-txt{display: table;}
    .sub-quick-nav-item .m-nav-a:hover .plus-icon{background: #fff; }
    .sub-quick-nav-item .m-nav-a:hover .plus-icon span{color: rgba(38,41,126,1);  animation: roll-fast 0.6s ease-in-out; animation-iteration-count: 1; }
    .sub-quick-nav-item .m-nav-a:hover .quick-nav-icon{display: none;}
}
@media(min-width:1500px) {
}

.cert-auth-top{text-align: center;}
.cert-auth-top li{width: calc(100%/ 2 - 24px); margin: 0 10px; display: inline-block; vertical-align: top;}
.cert-auth-top .cert-auth-top-txt{margin-top: 10px;}
.cert-auth-top .cert-auth-top-img{height: 0; overflow: hidden; position: relative; background: #f9f9f9; padding-bottom: 142%;}
.cert-auth-top .cert-auth-top-img img{max-width: 100%; position: absolute; min-height: 100%; left: 50%; top: 50%; transform: translate(-50%, -50%);}
@media(min-width:768px) {
    .cert-auth-top li{width: calc(100%/ 4 - 24px); margin: 0 10px;}
}

:root{
  --dfx-blue: #1e90ff;
  --dfx-gray: #a3a6ad;
  --text-main: #111827;
}

.mission-block{ margin:32px 0 120px; }

.mission-kicker{
  display: block;
  font-size: 20px;
  font-weight: 700;
  color: #1e40af;
  letter-spacing: 0.1em;
  margin-bottom: 20px;
}

.mission-hero{
  margin:0; line-height:1.25; font-weight:700;
  font-size:clamp(28px, 4.2vw, 46px); letter-spacing:-0.02em;
}
.mission-hero .gray{ color:var(--dfx-gray); }
.mission-hero .accent{ color:var(--dfx-blue); font-weight:700; }

@media (max-width:480px){ .mission-hero{ line-height:1.3; } }

.vision {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  height: 100vh;
  max-height: 100vh;
  overflow: hidden;
}

.vision .visual {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.vision .visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.vision .text {
  padding: 0 60px;
  text-align: left;
}

.vision .smallTitle {
  display: inline-block;
  font-size: 14px;
  font-weight: 700;
  color: #1e40af;
  letter-spacing: 0.1em;
  margin-bottom: 10px;
}

.vision .font58 {
  font-size: clamp(28px, 3.5vw, 52px);
  line-height: 1.3;
  color: #111;
}
.vision .font58 .thin { color: #6b7280; font-weight: 300; }
.vision .font58 .bold { color: #111827; font-weight: 800; }

@media (max-width: 860px) {
  .vision {
    grid-template-columns: 1fr;
    height: auto;
  }
  .vision .visual {
    height: 60vh;
  }
  .vision .text {
    text-align: center;
    padding: 40px 20px;
  }
}

.vision-full {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-height: 100vh;
  overflow: hidden;
}

.vision-image {
  position: absolute;
  top: 0; left: 0;
  width: 50%;
  height: 100%;
  overflow: hidden;
}

.vision-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.vision-text {
  position: relative;
  width: 50%;
  padding: 0 80px;
  color: #111;
  text-align: left;
  background: rgba(255,255,255,0.85);
  box-sizing: border-box;
}

.vision-text small {
  display: block;
  font-size: 20px;
  font-weight: 700;
  color: #1e40af;
  letter-spacing: 0.1em;
  margin-bottom: 10px;
}

.vision-text h2 {
  font-family: 'Poppins', 'Pretendard', sans-serif;
  font-size: clamp(28px, 2.6vw, 46px);
  font-weight: 300;
  line-height: 1.4;
}
.vision-text h2 .bold { font-weight: 700; color: #000; }

@media (max-width: 960px) {
  .vision-full {
    flex-direction: column;
  }
  .vision-image {
    position: relative;
    width: 100%;
    height: 60vh;
  }
  .vision-text {
    width: 100%;
    padding: 40px 24px;
    background: #fff;
    text-align: center;
  }
}

.core-value-detail2{ margin-top:60px; }

.cv2-row{
  display:grid;
  grid-template-columns: 220px 140px 1fr;
  align-items:center;
  gap:10px;
  margin-bottom:52px;
  position:relative;
}

.core-value-box-mini{
  width: 200px;
  text-align:center;
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:16px;
  padding:24px 16px;
  box-shadow:0 6px 16px rgba(0,0,0,0.06);
}
.core-value-box-mini img{
  width:60px; height:60px; object-fit:contain; margin-bottom:12px;
}
.core-value-box-mini .cv2-title{ font-weight:800; font-size:18px; color:#111827; }
.core-value-box-mini .cv2-sub{ font-size:14px; color:#64748b; }

.cv2-rail{
  position: relative;
  height: 1px;
  align-self: center;
  background: linear-gradient(90deg, rgba(30,58,138,0.2) 0%, rgba(2,6,23,0.06) 60%, rgba(255,255,255,0) 100%);
}
.cv2-rail:before{
  content:"";
  position:absolute; left:0; right:0; top:-1px; height:3px;
  background: linear-gradient(180deg, rgba(255,255,255,0.6), rgba(255,255,255,0));
  pointer-events:none;
}
.cv2-dot{
  position:absolute; left:-10px; top:-6px;
  width:12px; height:12px; border-radius:50%;
  background: radial-gradient(circle at 30% 30%, #1e3a8a, #0f172a);
  box-shadow:
    0 0 0 6px rgba(30,58,138,0.08),
    0 4px 10px rgba(2,6,23,0.15);
}

.cv2-right{ width:100%; }
.cv2-desc{
  background:#f8fafc;
  border:1px solid #e5e7eb;
  border-radius:12px;
  padding:24px 28px;
  color:#111827;
  line-height:1.85;
  box-shadow:0 8px 20px rgba(0,0,0,0.05);
}

.cv2-list{ margin:0; padding-left:20px; }
.cv2-list li{ margin:6px 0; }
.cv2-quote{
  margin-top:14px;
  border:1px dashed #cbd5e1;
  background:#fff;
  border-radius:10px;
  padding:16px 18px;
  color:#0f172a;
}

@media (max-width: 980px){
  .cv2-row{
    grid-template-columns: 1fr;
    gap:18px;
    margin-bottom:40px;
  }
  .core-value-box-mini{ width: 80%; margin: 0 auto 4px; }
  .cv2-rail{ display:none; }
  .cv2-desc{ text-align: left; }
}

.cv2-list li {
  position: relative;
  margin: 8px 0;
  padding-left: 14px;
  list-style: none;
  line-height: 1.7;
}

.cv2-list li::before {
  content: "•";
  position: absolute;
  left: 0;
  top: 0;
  color: #1e3a8a;
  font-size: 20px;
  line-height: 1;
}

.svc-cards{
  --card-radius: 18px;
  --card-radius-hover: 50px;
  --img-radius: 12px;
  --img-radius-hover: 40px;
  --hover-bg: #f6f7fa;
  --ring-color: #eef5fc;
  --dt-color-hover: #292a80;

  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  list-style:none;
  margin:0; padding:0;
}
@media (max-width: 1200px){ .svc-cards{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px){  .svc-cards{ grid-template-columns: 1fr; } }

.svc-card{
  display:block;
  height:100%;
  padding:24px;
  color:#222;
  text-decoration:none;
  background:#fff;
  border-radius: var(--card-radius);
  box-shadow: 0 2px 10px rgba(20,36,80,.06);
  transition: background-color .22s ease, border-radius .22s ease, box-shadow .22s ease, transform .2s ease;
  position:relative;
  overflow:hidden;
  border:1px solid #e9eef7;
}

.svc-card::before{
  content:"";
  position:absolute; inset:0;
  border-radius: inherit;
  border:2px solid transparent;
  transition: border-color .22s ease, opacity .22s ease;
  opacity:0; pointer-events:none;
}

.svc-card > em{
  display:block;
  opacity:.06;
  font-weight:800;
  font-size:38px;
  line-height:1;
  color:#696969;
}

.svc-card dl{ margin:10px 0 0 0; }
.svc-card dt{ font-weight:800; font-size:22px; color:#111; transition: color .25s ease; }
.svc-card dd{ margin:10px 0 0 0; color:#6b7280; font-size:15px; line-height:1.5; }

.svc-card .imgBox{ margin-top:16px; }
.svc-card .imgBox .img{
  aspect-ratio: 4/3;
  overflow:hidden;
  border-radius: var(--img-radius);
  background:#fff;
  display:flex; align-items:center; justify-content:center;
  transition: border-radius .26s ease;
}
.svc-card .imgBox img{
  max-width:100%; height:auto; display:block;
  transform: scale(1);
  border-radius: inherit;
  transition: transform .6s cubic-bezier(.2,.8,.2,1), border-radius .26s ease;
  -webkit-user-drag:none; user-select:none; pointer-events:none;
}

@media (hover:hover) and (pointer:fine){
  .svc-card:hover, .svc-card:focus-visible{
    background: var(--hover-bg);
    border-radius: var(--card-radius-hover);
    box-shadow: 0 10px 28px rgba(20,36,80,.10);
    transform: translateY(-2px);
  }
  .svc-card:hover::before, .svc-card:focus-visible::before{
    border-color: var(--ring-color);
    opacity:1;
  }
  .svc-card:hover .imgBox .img,
  .svc-card:focus-visible .imgBox .img{
    border-radius: var(--img-radius-hover);
  }
  .svc-card:hover .imgBox img,
  .svc-card:focus-visible .imgBox img{
    transform: scale(1.04);
    border-radius: var(--img-radius-hover);
  }
  .svc-card:hover dt, .svc-card:focus-visible dt{
    color: var(--dt-color-hover);
  }
}

.svc-card:focus-visible{ outline:3px solid #a9b4e6; outline-offset:3px; }

/* WTS-22 : 사업영역 카드 가로·세로 크기 통일 (국문·영문 공통)
   - 모든 줄의 높이를 가장 긴 카드 기준으로 맞춘다(grid-auto-rows:1fr)
   - 글 길이가 달라도 이미지는 카드 하단에 붙여 카드끼리 이미지 위치·크기를 맞춘다
   - 이미지 원본 비율이 달라 여백이 생기던 것을 박스에 꽉 채운다(object-fit:cover) */
.svc-cards{ grid-auto-rows: 1fr; }
.svc-cards > li{ display:flex; min-width:0; }
.svc-card{ display:flex; flex-direction:column; width:100%; }
.svc-card .imgBox{ margin-top:auto; padding-top:16px; }
.svc-card .imgBox .img img{ width:100%; height:100%; object-fit:cover; }

.sub-business-box .biz-cards{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px;
}

.sub-business-box .biz-card{
  display:block;
  border-radius: 10px;
  overflow: hidden;
  background:#fff;
  border: 1px solid #d5dbea;
  box-shadow:
    0 2px 10px rgba(0,0,0,.08),
    0 8px 0 rgba(0,0,0,0.06);
  transition: transform .15s ease, box-shadow .15s ease;
  text-decoration:none;
  color: inherit;
}

@media (hover:hover){
  .sub-business-box .biz-card:hover{
    transform: translateY(-2px);
    box-shadow:
      0 6px 16px rgba(0,0,0,.12),
      0 10px 0 rgba(0,0,0,0.05);
  }
}

.sub-business-box .biz-card .card-head{
  padding: 16px 18px 12px;
  background: linear-gradient(180deg, #2b5fb4 0%, #4a7bcf 100%);
  position: relative;
}

.sub-business-box .biz-card .card-title{
  display:block;
  font-weight: 800;
  font-size: 22px;
  color: #ffffff;
  text-shadow:
    -1px -1px 0 rgba(22,41,84,.6),
     1px -1px 0 rgba(22,41,84,.6),
    -1px  1px 0 rgba(22,41,84,.6),
     1px  1px 0 rgba(22,41,84,.6);
  letter-spacing: .02em;
}

.sub-business-box .biz-card .card-sub{
  display:block;
  margin-top: 6px;
  font-size: 14px;
  font-weight: 700;
  color: #fffb4d;
  text-shadow: 0 1px 0 rgba(0,0,0,.2);
}

.sub-business-box .biz-card .card-img{
  aspect-ratio: 4 / 3;
  background:#fff;
  position: relative;
  overflow: hidden;
}

.sub-business-box .biz-card .card-img img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit: cover;
  -webkit-user-drag: none;
  user-select: none;
  transition: transform .45s ease;
}

@media (hover:hover){
  .sub-business-box .biz-card:hover .card-img img{
    transform: scale(1.04);
  }
}

/* 같은 줄 카드 높이 맞춤
   - 제목 줄 수가 달라 카드 높이가 어긋나던 것을, 파란 제목 영역이 남는 높이를 채우도록 해 이미지 시작선을 맞춘다
   - 제목은 위, 연도·설명은 아래로 붙인다(space-between) */
.sub-business-box .biz-card{ display:flex; flex-direction:column; }
.sub-business-box .biz-card .card-head{
  flex:1 1 auto;
  display:flex; flex-direction:column; justify-content:space-between;
}
.sub-business-box .biz-card .card-title{ margin-bottom:auto; }
.sub-business-box .biz-card .card-img{ flex:0 0 auto; }

@media (max-width: 1024px){
  .sub-business-box .biz-cards{
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .sub-business-box .biz-card .card-title{ font-size: 20px; }
}
.biz-card {
  cursor: default !important;
}

.biz-card:hover {
  text-decoration: none;
  transform: none;
}

.small_t {
  font-size: 16px;
  color: #222223;
  line-height: 1.6;
  font-weight: 400;
}
.sgeth-mtxt {
  font-size: 20px;
  color: #222223;
  line-height: 4.6;
  font-weight: 600;
}
.sgeth-mtxt u,
.ethic-doc__title u,
.sgeth-card--declaration u {
  text-decoration-skip-ink: none;
  text-underline-offset: 4px;
}

.sgeth-card--declaration { padding: 0; background: transparent; }

.ethic-doc{
  max-width: 760px; margin: 0 auto; background:#fff;
  border: 2px solid #222; padding: 22px 22px 26px;
  box-sizing: border-box;
  font-family: "Malgun Gothic", Apple SD Gothic Neo, "Noto Sans KR", system-ui, sans-serif;
  color:#111;
}
.ethic-doc__title{
  margin: 4px 0 18px; text-align:center;
  font-size: 22px; line-height:5.4; font-weight:800;

}
.ethic-doc__body{ font-size:15px; line-height:1.8; }

.ethic-doc__body .indent{
  text-indent: 22px; margin: 14px 0 10px;
}

.ethic-list{
  margin: 8px 0 14px 18px; padding: 0;
}
.ethic-list > li{
  margin: 4px 0; padding-left: 6px;
}

.date-line{
  text-align: center; margin: 82px 0 64px; font-size: 16px; letter-spacing: .05em;
}
.date-line .underline{
  display:inline-block; min-width:64px; border-bottom:1px solid #000; line-height:1.6;
}
.date-line .year{ display:inline-block; min-width:40px; border-bottom:1px solid #000; }

.sign-table{
  width:100%; border-collapse: collapse; margin-top: 14px 0 50px;
  border:1px solid #000;
}
.sign-table th, .sign-table td{
  border:1px solid #000; padding:10px 12px; vertical-align: middle;
  font-size:14px; line-height:1.6;
}
.sign-table th{ text-align:left; background:#f7f7f7; font-weight:700; }
.sign-cell{ text-align:center; }
.sign-title{ font-weight:700; }

@media print{
  .ethic-doc{ border-width:1px; }
  .ethic-doc__title{ font-size:20px; }
}
.ethic-list {
  list-style: decimal;
  margin: 8px 0 14px 24px;
  padding: 0;
}

.ethic-list > li {
  margin: 6px 0;
  line-height: 1.7;
}

.ethic-list {
  list-style: decimal;
  margin-left: 20px;
}

.sgeth-wrap .ethic-doc .ethic-list {
  list-style: decimal !important;
  margin: 10px 0 16px 26px;
  padding-left: 0;
  counter-reset: none !important;
}

.sgeth-wrap .ethic-doc .ethic-list > li {
  display: list-item !important;
  list-style: decimal !important;
  margin: 6px 0;
  line-height: 1.8;
}

.sgeth-wrap .ethic-doc .ethic-list { list-style-position: outside; }

.sgeth-card--declaration2 {
    padding: 22px 32px 18px;
    margin-top: 40px;
}
.sgeth-card2 {
    background: var(--sg-card);
    border: 1px solid var(--sg-line);
    border-radius: 16px;
    padding: 32px;
    box-shadow: 0 8px 24px rgba(10, 40, 100, .08);
        width: 800px;
}
.sgeth-card2{
  width:800px;
  margin-left:auto;
  margin-right:auto;
}

@media (max-width: 820px){
  .sgeth-card2{
    width:100%;
    margin-left:auto;
    margin-right:auto;
    border-radius:12px;
    padding: 20px;
  }

  .ethic-doc{
    max-width: 800px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .ethic-doc .sign-table{
    min-width: 800px;
    display: table;
    white-space: nowrap;
  }
}

.sgeth-section:has(.ethic-doc) .sgeth-title {
  text-align: center;
  justify-content: center;
}

.csr-hero{
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  background: #f3f5f8 var(--csr-hero-img, url('../images/content/csr-hero.jpg')) center right / cover no-repeat;
  min-height: 180px;
  margin: 0 0 28px;
  box-shadow: 0 8px 24px rgba(10,40,100,.06);
}

.csr-hero::before{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(90deg,
    rgba(255,255,255,.96) 0%,
    rgba(255,255,255,.94) 38%,
    rgba(255,255,255,.70) 58%,
    rgba(255,255,255,.28) 75%,
    rgba(255,255,255,0) 92%);
  pointer-events:none;
}

.csr-hero__inner{
  position: relative;
  z-index: 1;
  padding: 26px 24px;
}

.csr-hero__copy{
  max-width: 760px;
}

.csr-hero__title{
  margin: 0 0 20px;
  font-weight: 800;
  font-size: 22px;
  line-height: 1.45;
  color: #222;
}

.csr-hero__desc{
  margin: 0;
  font-size: 15px;
  line-height: 1.5;
  color: #9d9d9d;
  word-break: keep-all;
}

@media (min-width: 992px){
  .csr-hero{ min-height: 196px; }
  .csr-hero__inner{ padding: 32px 34px; }
  .csr-hero__title{ font-size: 24px; }
  .csr-hero__desc{ font-size: 15px; }
}

@media (max-width: 767.98px){
  .csr-hero{ min-height: 160px; }
  .csr-hero::before{
    background: linear-gradient(90deg,
      rgba(255,255,255,.98) 0%,
      rgba(255,255,255,.95) 50%,
      rgba(255,255,255,.10) 90%,
      rgba(255,255,255,0) 100%);
  }
  .csr-hero__inner{ padding: 20px 18px; }
  .csr-hero__title{ font-size: 20px; }
  .csr-hero__desc{ font-size: 14px; line-height: 1.8; }
}

.top-txt-title-content{
  margin-bottom: 16px;
}

/* 해외사업현황 세계지도 (sub02/menu_09) */
.overseas-map{
  position: relative;
  padding: 36px 28px;
  border-radius: 18px;
  background: linear-gradient(160deg, #6f9cf5 0%, #4a7ee6 45%, #2f62cf 100%);
  box-shadow: 0 10px 30px rgba(47,98,207,.25);
  overflow: hidden;
}
.overseas-map .map-canvas{
  position: relative;
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  aspect-ratio: 1025 / 625;
}
.overseas-map .map-base,
.overseas-map .map-pins{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  display: block;
}
.overseas-map .map-base{ filter: drop-shadow(0 6px 10px rgba(20,50,120,.18)); }
.overseas-map .map-lines line{ stroke: #1d3d8f; stroke-opacity: .55; stroke-width: 1; }
.overseas-map .map-dots circle{ fill: #1d3d8f; stroke: #fff; stroke-width: 2; }
.overseas-map .map-labels{ margin: 0; padding: 0; list-style: none; }
.overseas-map .map-label{
  position: absolute;
  transform: translate(-50%, -50%);
}
.overseas-map .map-link{
  display: flex; align-items: center; gap: 7px;
  padding: 6px 11px 6px 7px;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 4px 12px rgba(16,40,100,.18);
  white-space: nowrap;
  font-size: 14px; font-weight: 700; color: #1f2d4d;
  line-height: 1.2;
  text-decoration: none;
  transition: transform .15s ease, box-shadow .15s ease, color .15s ease;
}
.overseas-map .map-link:hover,
.overseas-map .map-link:focus-visible{
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(16,40,100,.28);
  color: #2b5fb4;
  text-decoration: none;
}
.overseas-map .map-link img{
  width: auto; height: 18px;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(0,0,0,.1);
}
.overseas-map .map-legend{ display: none; }
@media (max-width: 1024px){
  .overseas-map{ padding: 22px 12px; }
  .overseas-map .map-link{ font-size: 12px; gap: 4px; padding: 4px 7px 4px 5px; border-radius: 6px; }
  .overseas-map .map-link img{ height: 13px; }
}
@media (max-width: 640px){
  .overseas-map{ padding: 14px 8px; border-radius: 12px; }
  .overseas-map .map-link{ padding: 3px; gap: 0; }
  .overseas-map .map-link span{ display: none; }
  .overseas-map .map-link img{ height: 11px; }
  .overseas-map .map-legend{
    display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 8px;
    margin: 14px 0 0; padding: 0; list-style: none;
  }
  .overseas-map .map-legend .map-link{ padding: 6px 8px; gap: 6px; font-size: 13px; }
  .overseas-map .map-legend .map-link span{ display: inline; }
  .overseas-map .map-legend .map-link img{ height: 14px; }
}

/* 지도에서 국가 클릭 시 이동한 주요 사업 카드 강조 */
.sub-business-box .biz-card{ scroll-margin-top: 120px; }
.sub-business-box .biz-card.is-target{
  animation: bizCardPulse 1.6s ease;
}
@keyframes bizCardPulse{
  0%, 100%{ box-shadow: 0 2px 10px rgba(0,0,0,.08), 0 8px 0 rgba(0,0,0,0.06); }
  25%, 60%{ box-shadow: 0 0 0 4px #4a7bcf, 0 8px 24px rgba(43,95,180,.35); }
}

/* 주요 사업 카드 상단 국기 */
.sub-business-box .biz-card .card-flags{
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px;
  padding: 12px 18px;
  background: #fff;
  border-bottom: 1px solid #d5dbea;
}
.sub-business-box .biz-card .card-flag{
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 14px; font-weight: 700; color: #1f2d4d;
}
.sub-business-box .biz-card .card-flag img{
  width: auto; height: 24px;
  border-radius: 3px;
  box-shadow: 0 0 0 1px rgba(0,0,0,.12);
}
.overseas-map .map-legend{ display: none; }
@media (max-width: 640px){
  .overseas-map .map-legend{
    display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 8px 12px;
    margin: 14px 0 0; padding: 12px 8px 0; list-style: none;
    border-top: 1px solid #d5dbea;
  }
  .overseas-map .map-legend li{ display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: #1f2d4d; }
  .overseas-map .map-legend img{ width: auto; height: 15px; border-radius: 2px; box-shadow: 0 0 0 1px rgba(0,0,0,.12); }
}