@charset "UTF-8";

/* ----------------------------------------- 회사소개 Start ----------------------------------------- */
/* [ 기업개요 > 개요 ] */
.overview-area .overview-wrap{display:flex; align-items: center; gap:80rem;}
.overview-area .overview-wrap:nth-child(2){flex-direction: row-reverse;}
.overview-area .overview-wrap .txt-wrap{top:0 !important;}
.overview-area .overview-wrap .txt-wrap .f-t2{overflow:hidden; position:relative;}
.overview-area .overview-wrap .txt-wrap .f-t2 span{display:block; transform:translateY(100%); transition:transform 0.8s ease;}
.overview-area .overview-wrap.active .txt-wrap .f-t2 span{transform:translateY(0); transition-delay: 0.2s;}
.overview-area .overview-wrap .img{overflow:hidden; width:600rem; height:800rem; border-radius:var(--border-radius-lg);}
.overview-area .overview-wrap .img img{position:relative;width:100%;}
.overview-area .overview-wrap .txt-wrap{flex:1;}
.overview-area .overview-wrap .txt-wrap .f-b3-r{position:relative; top:40rem; margin-top:32rem; color:var(--Color-Gray-800); opacity:0; transition:top 1s ease, opacity 1s ease;}
.overview-area .overview-wrap.active .txt-wrap .f-b3-r{top:0; opacity:1; transition-delay: 0.4s;}
.beyond-area{text-align: center;}
.beyond-area .f-d2{overflow:hidden; position:relative; top:0 !important; line-height:1.1;}
.beyond-area .f-d2 span{display:block; transform:translateY(100%); transition:transform 0.8s ease;}
.beyond-area .f-b3-r{margin-top:40rem; color:var(--Color-Gray-800);}
.beyond-area .img{overflow:hidden; top:0 !important; margin-top:80rem; height:600rem; border-radius: var(--border-radius-lg); opacity:1 !important;}
.beyond-area .img span{overflow:hidden; display:block; width:100%; height:0; transition:height 0.8s ease;}
.beyond-area .img img{width:100%; height:600rem;}
.beyond-area.active .f-d2 span{transform:translateY(0);}
.beyond-area.active .img span{height:600rem; transition-delay: 0.6s;}
.organization-chart{display:flex; flex-direction: column; align-items: center; width:100%;}
.organization-chart .logo:nth-child(1){display:inline-flex; align-items: center; justify-content: center; position:relative; width:434rem; height:128rem; background:var(--Color-Gray-White); border-radius: 64rem;}
.organization-chart .logo:nth-child(1):after{display:block; content:""; position:absolute; bottom:-80rem; left:50%; transform:translateX(-50%); width:1px; height:81rem; background:var(--Color-Gray-400);}
.organization-chart .logo:nth-child(2){display:inline-flex; align-items: center; justify-content: center; position:relative; margin-top:80rem; width:432rem; height:96rem; background:var(--Color-Blue-Primary); border-radius: 64rem;}
.organization-chart .logo:nth-child(2):after{display:block; content:""; position:absolute; bottom:-88rem; left:50%; transform:translateX(-50%); width:1px; height:88rem; background:var(--Color-Gray-400);}
.organization-chart .group-area{display:flex; gap: 16rem; position:relative; margin-top:135rem; width:100%;}
.organization-chart .group-area:before{display:block; content:""; position:absolute; top:-48rem; left:50%; transform:translateX(-50%); width:1060rem; height:1px; background:var(--Color-Gray-400);}
.organization-chart .group-area .group-wrap{width:calc((100% - 96rem) / 7);}
.organization-chart .group-area .group-wrap .f-b3-m{display:flex; align-items: center; justify-content: center; position:relative; width:100%; height:114rem; text-align: center; background:var(--Color-Gray-White); border:1px solid #8AA0C8; border-radius:var(--border-radius-md); box-shadow: 0 8rem 16rem 0 rgba(0,0,0,0.12);}
.organization-chart .group-area .group-wrap .f-b3-m:before{display:block; content:""; position:absolute; top:-49rem; left:50%; transform:translateX(-50%); width:1px; height:48rem; background:var(--Color-Gray-400);}
.organization-chart .group-area .group-wrap .f-b4-m{position:relative; margin-top:30rem; padding:15rem 0; text-align: center; background:#E6EAF3; border-radius:28rem; z-index:1;}
.organization-chart .group-area .group-wrap .f-b4-m:before{display:block; content:""; position:absolute; top:-31rem; left:50%; transform:translateX(-50%); width:1px; height:31rem; background:var(--Color-Gray-400);}

@media all and (max-width: 1024px) {
  .overview-area .overview-wrap{flex-direction: column; gap:40rem;}
  .overview-area .overview-wrap .img{width:100%; height:438rem;}
  .overview-area .overview-wrap .txt-wrap .f-b3-r{margin-top:24rem;}
  .overview-area .overview-wrap:nth-child(2){flex-direction: column; margin-top:60rem;}
  .beyond-area .img{margin-top:40rem; height:480rem;}
  .beyond-area .img img{height:480rem;}
  .beyond-area.active .img span{height:480rem;}
}

/* [ 기업개요 > 가치체계 ] */
.vision-area{position:relative;}
.vision-area .vision{overflow:hidden; position:relative; left:0; padding:80rem; width:1220rem; height:720rem; border-radius:var(--border-radius-lg); cursor:pointer; transition: left 0.8s ease;}
.vision-area .vision:nth-child(2){position:absolute; top:0; left:560rem;}
.vision-area .vision:nth-child(3){position:absolute; top:0; left:1120rem;}
.vision-area .vision .bg{position:absolute; top:0; left:0; width:100%; height:100%;}
.vision-area .vision .bg img{transform:scale(1); width:100%; height:100%; object-fit: cover; transition:var(--transition-default);}
.vision-area .vision:hover .bg img{transform:scale(1.1);}
.vision-area .vision .txt-wrap{position:relative; color:var(--Color-Gray-White); z-index:1;}
.vision-area .vision .txt-wrap .f-t1{transform:scale(0.82); transition:var(--transition-default); transform-origin: left;}
.vision-area .vision .txt-wrap .f-b2-r{margin-top:32rem; opacity:0; transition:var(--transition-default)}
.vision-area .vision.on .txt-wrap .f-t1{transform:scale(1)}
.vision-area .vision.on .txt-wrap .f-b2-r{opacity:1;}
.vision-area:has(.vision.active:nth-child(1)) .vision:nth-child(2){left:1240rem}
.vision-area:has(.vision.active:nth-child(1)) .vision:nth-child(3){left:2480rem}
.vision-area .vision.active:nth-child(2){left:0}
.vision-area:has(.vision.active:nth-child(2)) .vision:nth-child(1){left:-1240rem}
.vision-area:has(.vision.active:nth-child(2)) .vision:nth-child(3){left:1240rem}
.vision-area .vision.active:nth-child(3){left:calc((100vw - 1260rem) / 2)}
.vision-area:has(.vision.active:nth-child(3)) .vision:nth-child(1){left:-2140rem}
.vision-area:has(.vision.active:nth-child(3)) .vision:nth-child(2){left:calc((100vw - 3740rem) / 2)}
.vision-area .vision.active .txt-wrap .f-t1{transform:scale(1)}
.vision-area .vision.active .txt-wrap .f-b2-r{opacity:1; transition-delay: 0.15s;}
.core-value-area{display:flex; gap:20rem; flex-wrap:wrap;}
.core-value-area .core-value-wrap{display:flex; flex-direction: column; gap:36rem 0; align-items: center; position:relative; width:calc((100% - 20rem) / 2); min-height:509rem; padding:64rem; text-align: center; background:var(--Color-Gray-White); border-radius:var(--border-radius-lg);}
.core-value-area .core-value-wrap .f-b3-r{margin-top:16rem; color: var(--Color-Gray-800);}

@media all and (max-width: 1024px) {
  .vision-area .vision{margin-top:60rem; padding:0; width:100%; height:auto; border-radius: 0; cursor: unset;}
  .vision-area .vision:first-child{margin-top:0;}
  .vision-area .vision:nth-child(2),
  .vision-area .vision:nth-child(3){position:relative; left:0;}
  .vision-area .vision .bg{overflow:hidden; position:relative; height:194rem; border-radius: var(--border-radius-md);}
  .vision-area .vision .txt-wrap{margin-top:40rem;}
  .vision-area .vision .txt-wrap .f-t1{transform:scale(1); color:var(--Color-Gray-900)}
  .vision-area .vision .txt-wrap .f-b2-r{margin-top:20rem; color:var(--Color-Gray-800); opacity:1;}
  .core-value-area .core-value-wrap{gap:24rem 0; padding:32rem 20rem; min-height:0;}
  .core-value-area .core-value-wrap .icon img{width:160rem; height:160rem;}
}

@media all and (max-width: 600px) {
  .core-value-area .core-value-wrap{width:100%;}
}


/* [ 기업개요 > CI ] */
.ci-area .img-wrap{display:flex; align-items: center; justify-content: center; width:100%; height:560rem; background:var(--Color-Blue-Light); border-radius:var(--border-radius-lg);}
.ci-area .img-wrap img{width:640rem;}
.ci-area .txt-wrap{margin-top:64rem; text-align: center;}
.ci-area .txt-wrap .btn-wrap{margin-top: 40rem;}
.color-system-area{overflow:hidden; display:flex; border-radius:var(--border-radius-lg);}
.color-system-area .color-system-item{padding:24rem; width:20%; height:480rem; color:var(--Color-Gray-White); background:var(--Color-Gray-White);}
.color-system-area .color-system-item.eco{background:url("/common/kr/images/bg-hd-eco-green.jpg") no-repeat bottom center / 100% auto #00E600;}
.color-system-area .color-system-item.heritage{background:url("/common/kr/images/bg-hd-heritage-green.jpg") no-repeat bottom center / 100% auto #00AD1D;}
.color-system-area .color-system-item.prosperity{background:url("/common/kr/images/bg-hd-prosperity-green.jpg") no-repeat bottom center / 100% auto #008233;}
.color-system-area .color-system-item.discovery{background:url("/common/kr/images/bg-hd-discovery-blue.jpg") no-repeat bottom center / 100% auto #003087;}
.color-system-area .color-system-item.trust{background:url("/common/kr/images/bg-hd-trust-blue.jpg") no-repeat bottom center / 100% auto #002554;}
.color-system-area .color-system-item .f-d1-r{margin-top:114rem;}
.cont-sec:has(.margin-rule-area){display:flex; justify-content: space-between;}
.margin-rule-area .margin-rule-item{padding:48rem 65rem 64rem 48rem; margin-top:40rem; width:755rem; border:1px solid var(--Color-Gray-300); border-radius:var(--border-radius-md);}
.margin-rule-area .margin-rule-item:first-child{margin-top:0;}
.margin-rule-area .margin-rule-item .f-h2{margin-bottom:40rem;}
.margin-rule-area .margin-rule-item img{padding-left:15rem; width:630rem;}
.ci-info-area .ci-info-wrap{display:flex; gap:12rem;}
.ci-info-area .ci-info-wrap .ci-info{position:relative; padding:30rem; width:calc((100% - 24rem) / 3); background:var(--Color-Gray-White); border-radius:var(--border-radius-md); border:1px solid var(--Color-Gray-300);}
.ci-info-area .ci-info-wrap .ci-info .num{display:flex; align-items: center; justify-content: center; position:absolute; top:30rem; right:30rem; width:32rem; height:32rem; color:var(--Color-Gray-White); background:var(--Color-Green-Primary); border-radius:50%;}
.ci-info-area .ci-info-wrap .ci-info .f-h2{color:var(--Color-Blue-Primary);}
.ci-info-area .ci-info-wrap .ci-info .f-b4-r{margin-top:20rem; color:var(--Color-Gray-800);}
.ci-info-area .img{display: flex; justify-content: center; margin-top:140rem;}
.ci-info-area .img img{width:941rem;}
.font-download-area{text-align: center;}
.font-download-area .f-t2{color:var(--Color-Blue-Primary);}
.font-download-area .f-b3-r{margin-top:24rem; color: var(--Color-Gray-800);}
.font-download-area .btn-wrap{margin-top: 60rem;}

@media all and (max-width: 1024px) {
  .ci-area .img-wrap{height:320rem;}
  .ci-area .img-wrap img{width:260rem;}
  .ci-area .txt-wrap{margin-top:24rem;}
  .ci-area .txt-wrap .btn-wrap{flex-wrap:wrap; margin-top:20rem;}
  .color-system-area{flex-direction: column; gap:20rem; border-radius:0;}
  .color-system-area .color-system-item{width:100%; height:167rem; border-radius:var(--border-radius-lg);}
  .color-system-area .color-system-item.eco{background:url("/common/kr/images/bg-hd-eco-green-mo.jpg") no-repeat right center / auto 100% #00E600;}
  .color-system-area .color-system-item.heritage{background:url("/common/kr/images/bg-hd-heritage-green-mo.jpg") no-repeat right center / auto 100% #00AD1D;}
  .color-system-area .color-system-item.prosperity{background:url("/common/kr/images/bg-hd-prosperity-green-mo.jpg") no-repeat right center / auto 100% #008233;}
  .color-system-area .color-system-item.discovery{background:url("/common/kr/images/bg-hd-discovery-blue-mo.jpg") no-repeat right center / auto 100% #003087;}
  .color-system-area .color-system-item.trust{background:url("/common/kr/images/bg-hd-trust-blue-mo.jpg") no-repeat right center / auto 100% #002554;}
  .color-system-area .color-system-item .f-d1-r{margin-top:8rem;}
  .cont-sec:has(.margin-rule-area){flex-direction: column;}
  .margin-rule-area{margin-top:20rem;}
  .margin-rule-area .margin-rule-item{padding:24rem 15rem; margin-top:20rem; width:100%;}
  .margin-rule-area .margin-rule-item .f-h2{margin-bottom:24rem;}
  .margin-rule-area .margin-rule-item img{padding-left:0; max-width:100%;}
  .ci-info-area .ci-info-wrap{flex-wrap:wrap;}
  .ci-info-area .ci-info-wrap .ci-info{width:100%;}
  .ci-info-area .ci-info-wrap .ci-info .f-h2{margin-bottom:6rem;}
  .ci-info-area .ci-info-wrap .ci-info .f-b4-r{margin-top:16rem;}
  .ci-info-area .img{display:flex; justify-content: center; margin-top:120rem;}
  .ci-info-area .img img{max-width:100%; width:auto;}
  .font-download-area .btn-wrap{flex-wrap:wrap; margin-top: 40rem;}
}

/* [ 인사말 ] */
.ceo-list {display: flex; justify-content: space-between; gap: 20rem;}
.ceo-list .ceo {position: relative; width: 100%; height: 680rem; padding: 80rem; border-radius: var(--border-radius-lg); overflow: hidden;}
.ceo-list .ceo .txts .position {margin-bottom: 16rem;}
.ceo-list .ceo .img {position: absolute; bottom: 0; right: 0;}
.ceo-list .ceo .img img {width: 100%;}
.ceo-list .ceo:first-child {background-color: #E6EAF3;}
.ceo-list .ceo:last-child {background-color: #E6F3EB;}
.ceo-list .ceo:first-child .img {width: 545rem;}
.ceo-list .ceo:last-child .img {width: 496rem;}

@media all and (max-width: 1024px) {
  .ceo-list .ceo {padding:24rem; height: 420rem;}
  .ceo-list .ceo .txts .position {margin-bottom: 8rem;}
  .ceo-list .ceo:first-child .img {width:340rem;}
  .ceo-list .ceo:last-child .img {width:320rem; right: -32rem;}
}

@media all and (max-width: 600px) {
  .ceo-list {flex-direction: column;}
}


/* [ 헤리티지 ] */
.history-con-wrap .history-con .img-wrap:has(.visual-wrap)::after,
.history-con-wrap .history-con .img-wrap:has(.visual-wrap) .img-con .history-img::after {display:block; content:""; position:absolute; top:0; right:0; bottom: 0; width:100%; height:100%;}
.history-con-wrap .history-con .img-wrap:has(.visual-wrap)::after {z-index: 2; background:var(--Color-Gray-White); transition:width 0.7s ease;}
.history-con-wrap .history-con .img-wrap:has(.visual-wrap) .img-con .history-img::after {z-index: 1; background:var(--Color-Blue-500); transition:width 0.8s ease;}
.history-con-wrap {position: unset !important; opacity: 1 !important;}
.history-con-wrap.active .history-con .img-wrap:has(.visual-wrap)::after {width:0; transition-delay:0.45s;}
.history-con-wrap.active .history-con .img-wrap:has(.visual-wrap) .img-con .history-img::after {width:0; transition-delay:0.8s;}

.history-area {position: relative;}
.history-con .img-wrap {position: relative; height: 300vh;}
.history-con .img-wrap:has(.visual-wrap) {height: 550vh;}
.history-con .img-wrap .img-con {display: flex; justify-content: center; position: absolute; left: 0; right: 0; top: 0; bottom: 0; /* width: 100vw; */ width: 100%; height: 100vh;}
.history-con .img-wrap .img-con .history-img {position: absolute; top: 50%; overflow: hidden; width: 100%; height: 100%;}
.history-con .img-wrap .img-con .history-img:has(.visual-wrap) {top: 0; width: 1220rem; height: 60%; border-radius: 24rem;}
.history-con .img-wrap .img-con .history-img :is(.history-wrap, .visual-wrap) {display: flex; align-items: center; justify-content: center; width: 100%; height: 100%;}
.history-con .img-wrap .img-con .history-img:has(.visual-wrap) .history-wrap {opacity: 0; visibility: hidden;}
.history-con .img-wrap .img-con .history-img .visual-wrap {position: absolute; top: 0; left: 0; right: 0; bottom: 0;}
.history-con .img-wrap .img-con .history-img .img {position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%;}
.history-con .img-wrap .img-con .history-img .img img {width: 100%; height: 100%; object-fit: cover;}
.history-con .img-wrap .img-con .history-img .img-dimd {position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, .5);}
.history-con .img-wrap .img-con .history-img .txt-div {width: 1220rem;}
.history-con .img-wrap .img-con .history-img .history-wrap .txt-div {position: relative; text-align: center; color: #fff;}
.history-con .img-wrap .img-con .history-img .history-wrap .txt-div .year {overflow: hidden; transition: font 1s ease, top 1s ease;}
.history-con .img-wrap .img-con .history-img .history-wrap .txt-div:not(.active) .year {font-size: 160rem;}
.history-con .img-wrap .img-con .history-img .history-wrap .txt-div .year span {display: block;}
.history-con .img-wrap .img-con .history-img .history-wrap .txt-div .f-t1:not(.year) {margin-top: 142rem;}
.history-con .img-wrap .img-con .history-img .history-wrap .txt-div .f-b3-r {margin-top: 40rem;}
.history-con .img-wrap .img-con .history-img .visual-wrap .img-dimd {opacity: 0;}
.history-con .img-wrap .img-con .history-img .visual-wrap .txt-div {position: relative; color: #fff;}
.history-con .img-wrap .img-con .history-img .visual-wrap .txt-div .f-h2 {position:relative; top:80rem; opacity:0; transition:top 1s ease, opacity 1s ease;}
.history-con .img-wrap .img-con .history-img .visual-wrap .txt-div .f-d3 {position:relative; top:80rem; margin-top:64rem; opacity:0; transition:top 1s ease, opacity 1s ease;}
.history-con .img-wrap .img-con .history-img .visual-wrap .txt-div .f-b3-r {position:relative; top:80rem; margin-top:40rem; opacity:0; transition:top 1s ease, opacity 1s ease;}
.history-con .img-wrap .img-con .history-img .visual-wrap .txt-div .btns {position:relative; top:80rem; margin-top:40rem; opacity:0; transition:top 1s ease, opacity 1s ease;}
.history-con .img-wrap .img-con .history-img .visual-wrap .txt-div.active .f-h2 {top:0; opacity:1;}
.history-con .img-wrap .img-con .history-img .visual-wrap .txt-div.active .f-d3 {top:0; opacity:1; transition-delay: 0.15s;}
.history-con .img-wrap .img-con .history-img .visual-wrap .txt-div.active .f-b3-r {top:0; opacity:1; transition-delay: 0.3s;}
.history-con .img-wrap .img-con .history-img .visual-wrap .txt-div.active .btns {top:0; opacity:1; transition-delay: 0.45s;}

/* motion */
.history-con .img-wrap .img-con .history-img .txt-div {position: relative;}
.history-con .img-wrap .img-con .history-img .txt-div .year {position: absolute; top: calc(50% - 120rem); width: 100%; text-align: center; line-height: 150%;}
.history-con .img-wrap .img-con .history-img .txt-div .year span {transform: translateY(100%); transition: transform 1s ease;}
.history-con .img-wrap .img-con .history-img .txt-div .year.on span {transform: translateY(0);}
.history-con .img-wrap .img-con .history-img .txt-div .f-t1:not(.year),
.history-con .img-wrap .img-con .history-img .txt-div .f-b3-r {position: relative; top: 80rem; opacity: 0; transition: top 1s ease, opacity 1s ease;}
.history-con .img-wrap .img-con .history-img .txt-div .f-t1:not(.year) {transition-delay: 0s;}
.history-con .img-wrap .img-con .history-img .txt-div .f-b3-r {transition-delay: 0s;}
.history-con .img-wrap .img-con .history-img .txt-div.active .year {top: 0;}
.history-con .img-wrap .img-con .history-img .txt-div.active .year span {transform: translateY(0);}
.history-con .img-wrap .img-con .history-img .txt-div.active .f-t1:not(.year),
.history-con .img-wrap .img-con .history-img .txt-div.active .f-b3-r {top: 0; opacity: 1;}
.history-con .img-wrap .img-con .history-img .txt-div.active .f-t1:not(.year) {transition-delay: .3s;}
.history-con .img-wrap .img-con .history-img .txt-div.active .f-b3-r {transition-delay: .45s;}

.history-con .con-wrap {display: flex; justify-content: space-between; width: 753rem;}
.history-con:nth-child(odd) .con-wrap {margin-left: auto; margin-right: 195rem;}
.history-con:nth-child(even) .con-wrap {margin-left: 195rem;}
.history-con .con-wrap :is(.fixed-year, .year) {font-family: "Pretendard-Bold"; font-size: 160rem; color: var(--Color-Blue-Primary); line-height: 1;}
.history-con .con-wrap .fixed-year {flex-shrink: 0; width: 205rem; text-align: right;}
.history-con .con-wrap .history-list {flex: 1;}
.history-con .con-wrap .history-list .list-wrap {margin-bottom: 240rem;}
.history-con .con-wrap .history-list .list-wrap .year span {display: none;}
.history-con .con-wrap .history-list .list-wrap .list-divs {display: flex; flex-direction: column; gap: 32rem; margin-top: 80rem;}
.history-con .con-wrap .history-list .list-wrap .list-divs .list-div {display: flex; gap: 24rem;}

.history-btn-wrap.on {bottom: -1px !important;}
.history-btn-wrap{position: fixed; bottom: -80rem; left: 0; right: 0; width:100%; height:80rem; background: rgba(0,0,0,.4); backdrop-filter: blur(20px); z-index: 5; border-top: 1px solid rgba(255,255,255,.2); transition:bottom 0.8s ease;}
.history-btn-wrap .swiper-container{padding:0 60rem; height:100%;}
.history-btn-wrap .swiper-container .swiper-slide{display:flex; align-items: center; position:relative; margin:0 16rem; width:auto; height:100%;}
.history-btn-wrap .swiper-container .swiper-slide:first-child{margin-left:0;}
.history-btn-wrap .swiper-container .swiper-slide:last-child{margin-right:0;}
.history-btn-wrap .swiper-container .swiper-slide span{color:var(--Color-Gray-White)}
.history-btn-wrap .swiper-container .swiper-slide.on:before{display:block; content:""; position:absolute; top:-1px; left:0; right: 0; width:100%; height:1px; background:var(--Color-Green-Eco)}
.history-btn-wrap .swiper-container .swiper-slide.on span{color:var(--Color-Green-Eco)}

.history-con .con-wrap .history-list .list-wrap .list-divs.100vh {min-height: calc(100vh - 260rem - 80rem - 160rem);}

@media all and (max-width: 1024px) {
  .history-con .img-wrap {height: 100vh;}
  .history-con .img-wrap:has(.visual-wrap) {height: 400vh;}
  .history-con .img-wrap .img-con:not(:has(.visual-wrap)) {position: unset;}
  .history-con .img-wrap .img-con .history-img:has(.visual-wrap) {width: calc(100% - 32rem); height: 80%; border-radius: 16rem;}
  .history-con .img-wrap .img-con .history-img:not(:has(.visual-wrap)) {top: 0; position: unset;}
  .history-con .img-wrap .img-con .history-img .txt-div {width: calc(100% - 32rem);}
  .history-con .img-wrap .img-con .history-img .history-wrap .txt-div:not(.active) .year {font-size: 24rem;}
  .history-con .img-wrap .img-con .history-img .history-wrap .txt-div .f-t1:not(.year) {margin-top: 60rem;}
  .history-con .img-wrap .img-con .history-img .history-wrap .txt-div .f-b3-r {margin-top: 20rem;}
  .history-con .img-wrap .img-con .history-img .visual-wrap .txt-div .f-d3 {margin-top:32rem;}
  .history-con .img-wrap .img-con .history-img .visual-wrap .txt-div .f-b3-r {margin-top:24rem;}
  .history-con .con-wrap {display: block; width: calc(100% - 32rem); margin: 0 auto !important;}
  .history-con .con-wrap :is(.fixed-year, .year) {font-size: 48rem;}
  .history-con .con-wrap .fixed-year {display: none;}
  .history-con .con-wrap .history-list {padding-top: 120rem;}
  .history-con .con-wrap .history-list .list-wrap {padding-bottom: 120rem; margin: unset;}
  .history-con .con-wrap .history-list .list-wrap .year span {display: inline-block;}
  .history-con .con-wrap .history-list .list-wrap .list-divs {gap: 48rem; margin-top: 24rem;}

  .history-con .img-wrap .img-con .history-img .txt-div .year {top: 0; line-height: 140%;}
  .history-con .img-wrap .img-con .history-img .txt-div .f-t1:not(.year),
  .history-con .img-wrap .img-con .history-img .txt-div .f-b3-r {top: 40rem;}

  .history-con .con-wrap .history-list .list-wrap .list-divs.100vh {min-height: unset;}

  .history-btn-wrap .swiper-container{padding:0 16rem;}
  .history-btn-wrap .swiper-container .swiper-slide {margin: 0 8rem;}

  .scroll-motion2 {position: relative; opacity: 0; top: 40rem; transition: top 1s ease, opacity 1s ease;}
  .scroll-motion2.active {opacity: 1; top: 0;}
}


/* [ 헤리티지 > 그룹 50년사 ] */
.layer-popup:has(.history-pop) .pop-area {width: 1414rem;}
.layer-popup:has(.history-pop) .pop-area .pop-wrap{padding-bottom:0; border-radius: 0;}
.layer-popup:has(.history-pop) .pop-area .pop-wrap .pop-cont {overflow-y:auto;padding:120rem;}
.layer-popup:has(.history-pop) .pop-area .pop-wrap .pop-cont::-webkit-scrollbar {width: 6rem; background: var(--Color-Gray-100); border-radius: 999rem;}
.layer-popup:has(.history-pop) .pop-area .pop-wrap .pop-cont::-webkit-scrollbar-thumb {background: var(--Color-Gray-500); border-radius: 999rem;}
.layer-popup:has(.history-pop) .btn-close{position:absolute; top:20rem; right:20rem; width:40rem; height:40rem; background:url("/common/kr/images/icon-close-btn-white.svg") no-repeat center center/40rem auto;}
.history-pop .f-b4-r {margin-top: 24rem;}
.history-pop .file-list {display: grid; grid-template-columns: repeat(3, 1fr); gap: 20rem; margin-top: 96rem;}
.history-pop .file-list .item .cover-box {position: relative; height: 266rem;}
.history-pop .file-list .item .cover-box::before {content: ""; position: absolute; bottom: 0; left: 0; width: 100%; height: 180rem; border-radius: var(--border-radius-md); background-color: var(--Color-Blue-Light);}
.history-pop .file-list .item .cover-box .f-h3 {position: absolute; top: 0; left: 0; color:var(--Color-Blue-Primary)} 
.history-pop .file-list .item .cover-box .img {position:relative; width: 120rem; height: 100%; margin: 0 auto; z-index:1;}
.history-pop .file-list .item .cover-box .img img {width: 100%; height: 100%; object-fit: cover; box-shadow: 5px 5px 10px 0 rgba(0,0,0,0.1);}
.history-pop .file-list .item .btn-wrap {margin-top:26rem;}

@media all and (max-width: 1024px) {
  .layer-popup:has(.history-pop) .pop-area .pop-wrap .pop-cont{padding:80rem 16rem;}
  .layer-popup:has(.history-pop) .btn-close{top:16rem; right:16rem; background:url("/common/kr/images/icon-close-btn-48.svg") no-repeat center center/40rem auto;}
  .history-pop .f-b4-r{margin-top:20rem;}
  .history-pop .file-list{display:flex; flex-direction: column; gap:60rem; margin-top:48rem;}
}

/* [ 주요계열사 ] */
.group-company{display:flex; gap:120rem; position:relative; top:0 !important; left:50%; transform:translateX(-50%); width:1400rem; opacity:1 !important}
.group-company .img{overflow:hidden; width:800rem; height:533rem; border-radius: var(--border-radius-lg);}
.group-company .img span{overflow:hidden; display:block; width:0; height:100%; transition:width 0.8s ease;}
.group-company .img img{width:800rem; height:533rem; object-fit: cover;}
.group-company .txt-wrap{width:480rem;}
.group-company .txt-wrap .logo{position:relative; top:80rem; opacity:0; transition:top 1s ease, opacity 1s ease;}
.group-company .txt-wrap .f-t3{position:relative; margin-top:60rem; padding-bottom:48rem;}
.group-company .txt-wrap .f-t3:after{display:block; content:""; position:absolute; bottom:0; left:0; width:0; height:1px; background:var(--Color-Gray-300); transition:width 0.8s ease;}
.group-company .txt-wrap .f-t3 span{position:relative; top:80rem; opacity:0; transition:top 1s ease, opacity 1s ease;}
.group-company .txt-wrap .txt-div{display:flex; align-items: center; position:relative; padding:32rem 0;}
.group-company .txt-wrap .txt-div:after{display:block; content:""; position:absolute; bottom:0; left:0; width:0; height:1px; background:var(--Color-Gray-300); transition:width 0.8s ease;}
.group-company .txt-wrap .txt-div .f-b4-b{position:relative; top:80rem; width:112rem; opacity:0; transition:top 0.6s ease, opacity 0.6s ease;}
.group-company .txt-wrap .txt-div :is(.f-b3-r, .btns){position:relative; top:80rem; width:calc(100% - 112rem); opacity:0; transition:top 0.6s ease, opacity 0.6s ease;}
.group-company .txt-wrap .txt-div .btns .site-btn {display: flex; align-items: center; justify-content: flex-start; width: 56rem; height: 56rem; padding-left: 48rem; border-radius: 999rem; background: url("/common/kr/images/icon-site-link.svg") no-repeat center left 16rem / 24rem auto  var(--Color-Blue-Primary); transition: width .4s ease; overflow: hidden;}
.group-company .txt-wrap .txt-div .btns .site-btn:hover {width: 183rem;}
.group-company .txt-wrap .txt-div .btns .site-btn span {opacity: 0; color: var(--Color-Gray-White); white-space: nowrap; transition: opacity .4s ease;}
.group-company .txt-wrap .txt-div .btns .site-btn:hover span {opacity: 1;}
.group-company.active .img span{width:800rem;}
.group-company.active .txt-wrap .logo{top:0; opacity:1;}
.group-company.active .txt-wrap .f-t3:after{width:100%; transition-delay: 0.4s;}
.group-company.active .txt-wrap .f-t3 span{top:0; opacity:1; transition-delay: 0.2s;}
.group-company.active .txt-wrap .txt-div:nth-child(1):after{width:100%; transition-delay:0.5s}
.group-company.active .txt-wrap .txt-div:nth-child(1) .f-b4-b{top:0; opacity:1; transition-delay: 0.3s;}
.group-company.active .txt-wrap .txt-div:nth-child(1) :is(.f-b3-r, .btns){top:0; opacity:1; transition-delay: 0.3s;}
.group-company.active .txt-wrap .txt-div:nth-child(2):after{width:100%; transition-delay:0.7s}
.group-company.active .txt-wrap .txt-div:nth-child(2) .f-b4-b{top:0; opacity:1; transition-delay: 0.5s;}
.group-company.active .txt-wrap .txt-div:nth-child(2) :is(.f-b3-r, .btns){top:0; opacity:1; transition-delay: 0.5s;}
.group-company.active .txt-wrap .txt-div:nth-child(3):after{width:100%; transition-delay:0.9s}
.group-company.active .txt-wrap .txt-div:nth-child(3) .f-b4-b{top:0; opacity:1; transition-delay: 0.7s;}
.group-company.active .txt-wrap .txt-div:nth-child(3) :is(.f-b3-r, .btns){top:0; opacity:1; transition-delay: 0.7s;}
.group-company.active .txt-wrap .txt-div:nth-child(4):after{width:100%; transition-delay:1.1s}
.group-company.active .txt-wrap .txt-div:nth-child(4) .f-b4-b{top:0; opacity:1; transition-delay: 0.9s;}
.group-company.active .txt-wrap .txt-div:nth-child(4) :is(.f-b3-r, .btns){top:0; opacity:1; transition-delay: 0.9s;}

@media all and (max-width: 1024px) {
  .cont-sec:has(.group-company){margin-top:20rem;}
  .group-company{flex-direction: column; gap:60rem; width:100%;}
  .group-company .img{width:100%; height:437rem;}
  .group-company.active .img span{width:100%;}
  .group-company .img img{width:100%; height:437rem;}
  .group-company .txt-wrap{width:100%;}
  .group-company .txt-wrap .f-t3{margin-top:32rem; padding-bottom:24rem;}
  .group-company .txt-wrap .txt-div{flex-direction: column; align-items: flex-start; gap:6rem; padding:24rem 0;}
  .group-company .txt-wrap .txt-div .f-b3-r{width:100%;}
}
/* ----------------------------------------- 회사소개 End ----------------------------------------- */




/* ----------------------------------------- 사업소개 Start ----------------------------------------- */
.center-txt-wrap{margin:0 auto; width:910rem;}
.center-txt-wrap .tit {margin-bottom: 80rem;}
.center-txt-wrap .sub-tit {margin-bottom: 40rem;}
.center-txt-wrap .txt {color: var(--Color-Gray-800);}
.center-txt-wrap .name {margin-top: 80rem;}
.center-txt-wrap .btns {display: flex; flex-wrap: wrap; margin-top: 80rem; gap: 8rem;}
.center-txt-wrap .icon-info-txt{margin-top:24rem;}

@media all and (max-width: 1024px) {
  .center-txt-wrap{width:100%;}
  .center-txt-wrap .sub-tit {margin-bottom: 24rem;}
  .center-txt-wrap .name {margin-top: 24rem;}
}

.busi-product-wrap{position:relative; left:50%; transform:translateX(-50%); width:1840rem; height:800rem;}
.busi-product-wrap .product-btn-area{overflow:hidden; position:absolute; right:155rem; top:50%; transform:translateY(-50%); width:290rem; border:1px solid rgba(255,255,255,0.5); border-radius:var(--border-radius-xs); z-index:2;}
.busi-product-wrap .product-btn-area .swiper-wrapper{flex-direction: column;}
.busi-product-wrap .product-btn-area .swiper-slide{padding:20rem 30rem; color:var(--Color-Gray-White); background:rgba(26,26,26,0.5); border-bottom:1px solid rgba(255,255,255,0.5); transition:var(--transition-icon)}
.busi-product-wrap .product-btn-area .swiper-slide:last-child{border-bottom:0;}
.busi-product-wrap .product-btn-area .swiper-slide.on{background:var(--Color-Blue-Primary)}
.busi-product-wrap .product-img-area{position:relative; width:100%; height:100%; z-index:1;}
.busi-product-wrap .product-img-area .img{display:none; overflow:hidden; position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); width:100%; height:100%; border-radius:var(--border-radius-lg)}
.busi-product-wrap .product-img-area .img img{width:100%; height:100%; object-fit: cover;}
/* .busi-product-wrap .product-img-area .img:first-child{display:block;} */
.busi-product-wrap .product-img-area .img.on{z-index:10;}
.busi-product-wrap .product-con-area{position:absolute; top:50%; left:155rem; transform:translateY(-50%); padding:40rem; width:500rem; color:var(--Color-Gray-White); border-radius: 4rem; background-color:rgba(0,48,135,0.8); z-index:2;}
.busi-product-wrap .product-con-area .btn-close{position:absolute; right:40rem; top:40rem; width:32rem; height:32rem; background:url("/common/kr/images/icon-close-btn-white.svg") no-repeat center center/32rem auto;}
.busi-product-wrap .product-con-area .f-h2{padding-right:40rem;}
.busi-product-wrap .product-con-area .f-b4-r{margin-top:20rem;}
.busi-product-wrap .product-con-area .f-d2-r{margin-top:20rem;}

@media all and (max-width: 1024px) {
  .busi-product-wrap{display:flex; padding-bottom:24rem; align-items: flex-end; width:100vw; height:600rem;}
  .busi-product-wrap .product-btn-area{overflow:visible; position:relative; right:auto; top:auto; transform:translateY(0); padding:0 16rem; width:100%; border:0;}
  .busi-product-wrap .product-btn-area .swiper-wrapper{flex-direction: row;}
  .busi-product-wrap .product-btn-area .swiper-slide{min-width:200rem; width:auto; border:1px solid rgba(255,255,255,0.5)}
  .busi-product-wrap .product-btn-area .swiper-slide:first-child{border-radius: var(--border-radius-xs) 0 0 var(--border-radius-xs);}
  .busi-product-wrap .product-btn-area .swiper-slide:last-child{border:1px solid rgba(255,255,255,0.5); border-left:0; border-radius: 0 var(--border-radius-xs) var(--border-radius-xs) 0;}
  .busi-product-wrap .product-btn-area .swiper-slide:only-child{border-radius: var(--border-radius-xs); border-left:1px solid rgba(255,255,255,0.5)}
  .busi-product-wrap .product-img-area{position:absolute; top:0; left:0;}
  .busi-product-wrap .product-img-area .img{border-radius:0;}
  .busi-product-wrap .product-con-area{top:24rem; left:16rem; transform:translateY(0); padding:24rem; width:calc(100% - 32rem);}
  .busi-product-wrap .product-con-area .btn-close{top:20rem; right:20rem;}
}
/* ----------------------------------------- 사업소개 End ----------------------------------------- */





/* ----------------------------------------- 지속가능경영 Start ----------------------------------------- */
/* [ ESG Library > 보고서 ] */
.esg-report-list{display:grid; grid-template-columns: repeat(3, 1fr); gap: 80rem 20rem;}
.esg-report-list .img{display:flex; align-items: center; justify-content: center; width:100%; height:320rem; background:var(--Color-Blue-Light); border-radius: var(--border-radius-md);}
.esg-report-list .img img{box-shadow: 0 8px 16px 0 rgba(0,0,0,0.08);}
.esg-report-list .f-h3{overflow:hidden; margin-top:24rem; text-align: center; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-break: break-all;}
.esg-report-list .btn-wrap{margin-top:24rem;}
.esg-report-list .img img{max-width:70%; max-height:70%;}
/* .esg-report-list .esg-report-item .img img{max-width:279rem; max-height:280rem;} */
/* .esg-report-list .esg-report-item.horizontal .img img{max-width:279rem;}
.esg-report-list .esg-report-item.vertical .img img{max-width:180rem;} */

@media all and (max-width: 1024px) {
  .cont-area:has(.esg-report-list) .cont-tit-wrap .cont-txt{margin-top: 8rem;}
  .esg-report-list{grid-template-columns: repeat(2, 1fr); gap:40rem;}
}

@media all and (max-width: 600px) {
  .esg-report-list{grid-template-columns: repeat(1, 1fr);}
  .esg-report-list .img{height:260rem;}
}

/* [ ESG Library > 평가등급 ] */
.esg-eval-list{display:grid; grid-template-columns: repeat(2, 1fr); gap: 20rem;}
.esg-eval-list .esg-eval-item{overflow:hidden; display:flex; height:240rem; border:1px solid var(--Color-Gray-300); border-radius:var(--border-radius-md)}
.esg-eval-list .esg-eval-item .img{display:flex; align-items: center; justify-content: center; width:240rem; background:var(--Color-Blue-Light)}
.esg-eval-list .esg-eval-item:nth-child(1) .img img {width: 154rem;}
.esg-eval-list .esg-eval-item:nth-child(2) .img img {width: 128rem;}
.esg-eval-list .esg-eval-item:nth-child(3) .img img {width: 158rem;}
.esg-eval-list .esg-eval-item:nth-child(4) .img img {width: 118rem;}
.esg-eval-list .esg-eval-item .txt-wrap{display:flex; flex-direction: column; align-items: flex-end; gap:21rem; justify-content: flex-end; padding:24rem 40rem; width:360rem; text-align: right;}
.esg-eval-list .esg-eval-item .txt-wrap .grade-wrap{display:flex; gap:16rem; padding:4rem 12rem; color: var(--Color-Gray-700); background:#F1F8F4; border-radius:var(--border-radius-xs)}
.esg-eval-list .esg-eval-item .txt-wrap .grade-wrap span{color:var(--Color-Green-Primary)}
.esg-eval-list .esg-eval-item .txt-wrap .f-d1-r{margin-top:38rem; color:var(--Color-Gray-800)}
.esg-eval-list .esg-eval-item .txt-wrap .f-d3{color:var(--Color-Green-Primary); white-space: nowrap;}

@media all and (max-width: 1024px) {
  .esg-eval-list .esg-eval-item{flex-direction: column; height:auto;}
  .esg-eval-list .esg-eval-item .img{width:100%; height:200rem;}
  .esg-eval-list .esg-eval-item:nth-child(1) .img img {width: 198rem;}
  .esg-eval-list .esg-eval-item:nth-child(2) .img img {width: 183rem;}
  .esg-eval-list .esg-eval-item:nth-child(3) .img img {width: 248rem;}
  .esg-eval-list .esg-eval-item:nth-child(4) .img img {width: 162rem;}
  .esg-eval-list .esg-eval-item .txt-wrap{padding:24rem; width:100%;}
  .esg-eval-list .esg-eval-item .txt-wrap .f-d3{font-size:44rem;}
  .esg-eval-list .esg-eval-item .txt-wrap .f-d1-r{margin-top:8rem;}
}
@media all and (max-width: 600px) {
  .esg-eval-list{display:flex; flex-direction: column;}
}
/* ----------------------------------------- 지속가능경영 End ----------------------------------------- */






/* ----------------------------------------- 미디어 Start ----------------------------------------- */
.iframe-area iframe{display:block;}
/* ----------------------------------------- 미디어 End ----------------------------------------- */





/* ----------------------------------------- 투자정보 Start ----------------------------------------- */
/* [ 재무정보 > 신용등급 ] */
.form-table tbody td .symbol-txt{display:flex; flex-direction: column; align-items: center;}
.form-table tbody td .symbol-txt .f-b4-r:nth-child(2){position:relative; left:-5rem;}
.form-table tbody td .symbol-txt .f-b4-r:nth-child(3){position:relative; left:-2rem;}

/* [ 지배구조 > 지배구조평가 > 기업지배구조헌장 ] */
.article-area .gray-border-swiper{margin-top:32rem;}
.article-area .gray-border-info{transition-delay:0.6s}
.article-area .cont-box:first-child{transition-delay:0.6s}

/* [ 지배구조 > 이사회 ] */
.annual-status-wrap{display:none;}
.annual-status-wrap.on{display:block;}
.annual-status-wrap .form-table:first-child{transition-delay:0.45s}
.annual-status-wrap .form-table thead th{word-break:auto-phrase;}
.annual-status-wrap .form-table thead th,
.annual-status-wrap .form-table tbody td{padding:18rem 10rem;}

/* [ 지배구조 > 감사기구 ] */
.auditor-box {position: relative; padding: 80rem; border-radius: var(--border-radius-md); border: 1px solid var(--Color-Gray-300);}
.auditor-box .logo {position: absolute; right: 80rem; top: 80rem; width: 300rem;}
.auditor-box .logo img {width: 100%;}
.auditor-box .info .name {color: var(--Color-Blue-Primary); margin-bottom: 16rem;}
.auditor-box .info .tel {margin-top: 8rem;}
.auditor-box .list-table {margin-top: 60rem;}

@media all and (max-width: 1024px) {
  .auditor-box{padding:32rem 24rem 172rem;}
  .auditor-box .logo{right:auto; top:auto; left:32rem; bottom:32rem; width:222rem;}
}

/* [ 지배구조 > 계열사 ] */
.affiliate-main {position: relative; padding: 200rem 0; color: #fff;}
.affiliate-main .tit-wrap .txt {margin-top: 16rem;}
.affiliate-main .list-wrap {display: flex; justify-content: flex-end; margin-top: 60rem; padding-right: 84rem;}
.affiliate-main .list-wrap .list {display: grid; grid-template-columns: repeat(2, 205rem); gap: 106rem;}
.affiliate-main .list-wrap .list .item {display: flex; flex-direction: column; justify-content: space-between;}
.affiliate-main .list-wrap .list .item .name {margin-bottom: 8rem;}
.affiliate-main .bg {position: absolute; top: 0; left: 50%; bottom: 0; transform: translateX(-50%); z-index: -1; width: 100vw; height: 100%; overflow: hidden;}
.affiliate-main .bg::before {content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 1; background: rgba(0, 0, 0, .6);}
.affiliate-main .bg img {position: relative; width: 100%; height: calc(100% + 220rem); object-fit: cover;}
.affiliate-sub {display: flex; flex-direction: column; gap: 80rem;}
.affiliate-sub .affi-div:not(:first-child) {padding-top: 80rem; border-top: 1px solid rgba(0, 0, 0, 0); transition: border 1s ease;}
.affiliate-sub .affi-div.active:not(:first-child) {border-top: 1px solid var(--Color-Gray-300);}
.affiliate-sub .affi-div {display: flex; justify-content: space-between; align-items: center;}
.affiliate-sub .affi-div .blue-chk {flex-shrink: 0; padding-left: 24rem; color: var(--Color-Blue-Primary); background: url("/common/kr/images/icon-blue-check.svg") no-repeat top 3rem left / 16rem auto;}
.affiliate-sub .affi-div .tit-wrap {width: 345rem;}
.affiliate-sub .affi-div .tit-wrap .name {display: flex; justify-content: space-between; gap: 10rem; margin-bottom: 8rem;}
.affiliate-sub .affi-div .tit-wrap .name .blue-chk {margin-top: 5rem;}
.affiliate-sub .affi-div .tit-wrap .num {color: #003087;}
.affiliate-sub .affi-div .list {display: grid; grid-template-columns: repeat(2, 1fr); gap: 16rem;}
.affiliate-sub .affi-div .list .item {display: flex; flex-direction: column; justify-content: space-between; width: 338rem; padding: 40rem; background-color: #f2f5f9; border-radius: 12px; overflow: hidden;}
.affiliate-sub .affi-div .list .item .name {display: flex; justify-content: space-between; gap: 10rem; margin-bottom: 8rem;}

@media all and (max-width: 1024px) {
  .affiliate-main{padding:120rem 0 160rem;}
  .affiliate-main .list-wrap{margin-top:87rem; padding:0; width:100%;}
  .affiliate-main .list-wrap .list{grid-template-columns:repeat(2, calc((100% - 12rem) / 2)); gap:40rem 12rem; width:100%;}
  .affiliate-sub{gap:60rem;}
  .affiliate-sub .affi-div{flex-direction: column; gap:40rem;}
  .affiliate-sub .affi-div:not(:first-child){padding-top:60rem;}
  .affiliate-sub .affi-div .tit-wrap{width:100%;}
  .affiliate-sub .affi-div .list{gap:8rem; width:100%;}
  .affiliate-sub .affi-div .list .item{display: block; width:100%; padding:24rem;}
}

@media all and (max-width: 600px) {
  .affiliate-sub .affi-div .list{grid-template-columns: repeat(1, 1fr);}
}

/* [ IR자료실 > Annual Report ] */
.report-banner{position:relative; margin-bottom:60rem; color:var(--Color-Gray-White); background:url("/common/kr/images/bg-report-banner.jpg") no-repeat center center / cover; border-radius:var(--border-radius-md);}
.report-banner > a{display:block; padding:40rem; background:url("/common/kr/images/img-report-banner.png") no-repeat right 50rem bottom/284rem auto;}
.report-banner .f-t2{margin:8rem 0 10rem;}
.report-banner .f-t2 span{padding-right:56rem; background:url("/common/kr/images/icon-total-report-arrow-wthie.svg") no-repeat right center/40rem auto;}
.report-banner.active{transition-delay:0.3s}

@media all and (max-width: 1024px) {
  .report-banner{background-image:url("/common/kr/images/bg-report-banner-mo.jpg");}
  .report-banner > a{padding-bottom:173rem; background:url("/common/kr/images/img-report-banner.png") no-repeat center bottom/213rem auto;}
  .report-banner .f-t2{margin:8rem 0 16rem;}
  .report-banner .f-t2 span{padding-right:40rem; background-size:24rem auto;}
}

/* [ IR자료실 > 감사보고서 ] */
.form-table.no-border .flex-txt-wrap{display:flex; justify-content: space-between;}
.form-table.no-border .flex-txt-wrap .txt-div{width:820rem;}
.form-table.no-border .flex-txt-wrap .btn{display:flex; justify-content: center; align-items: center; width:120rem;}

@media all and (max-width: 1024px) {
  .form-table.no-border .flex-txt-wrap{flex-wrap:wrap;}
  .form-table.no-border .flex-txt-wrap .txt-div{width:100%;}
  .form-table.no-border .flex-txt-wrap .btn{margin-top:24rem; width:calc((100% - 8rem) / 2)}
  .form-table.no-border .flex-txt-wrap .btn .square-border-btn{width:100%;}
}

/* [ IR문의 ] */
.ir-contact {display: flex; flex-direction: column; gap:8rem;}
.ir-contact .contact {display: flex; gap: 24rem;}
.ir-contact .contact .tit {flex-shrink: 0; width: 90rem; color: var(--Color-Gray-800);}

.ir-area .cont-sec:not(:first-child){margin-top:120rem;}
.ir-area .cont-sec:nth-child(1){transition-delay: 0.15s;}
.ir-area .cont-sec:nth-child(2){transition-delay: 0.3s;}
.ir-area .ir-contact {flex-direction: row; gap: 17rem;}
.ir-area .ir-contact .contact {align-items: center; gap: 4rem; position: relative;}
.ir-area .ir-contact .contact:not(:first-child):after {display:block; content:""; position:absolute; top:7rem; left:-9rem; width:1px; height:12rem; background:var(--Color-Gray-200);}
.ir-area .ir-contact .contact .tit {width: auto;}
.ir-inquiry-step{display:flex; gap:16rem;}
.ir-inquiry-step .step-box{display:flex; align-items: flex-start; justify-content: space-between; padding:32rem; width:calc((100% - 34rem) / 3); background:var(--Color-Blue-Light); border-radius:var(--border-radius-md);}
.ir-inquiry-step .step-box .txt-wrap .f-b4-r{margin-top:8rem; color:var(--Color-Gray-800);}
.ir-inquiry-step .step-box .num{display:inline-flex; align-items: center; justify-content: center; width:32rem; height:32rem; color:var(--Color-Gray-White); background:var(--Color-Green-Primary); border-radius:50%;}
.ir-reserve-area{display:flex; gap:20rem;}
.ir-reserve-area .ir-reserve-wrap{display:flex; flex-direction: column; align-items: center; justify-content: center; padding:48rem; width:calc((100% - 20rem) / 2); border:1px solid var(--Color-Gray-300); border-radius:var(--border-radius-md);}
.ir-reserve-area .ir-reserve-wrap .calendar{position:relative;}
.ir-reserve-area .ir-reserve-wrap .calendar .year-month-div{display:flex; justify-content: center; align-items: center; gap:20rem; margin-bottom:40rem;}
.ir-reserve-area .ir-reserve-wrap .calendar .year-month-div button.disabled{opacity:0.25; cursor:default;}
.ir-reserve-area .ir-reserve-wrap .calendar .year-month-div .next-btn{width:24rem; height:24rem; background:url("/common/kr/images/icon-calendar-next-arrow.svg") no-repeat center center / 100% auto;}
.ir-reserve-area .ir-reserve-wrap .calendar .year-month-div .prev-btn{width:24rem; height:24rem; background:url("/common/kr/images/icon-calendar-prev-arrow.svg") no-repeat center center / 100% auto;}
.ir-reserve-area .ir-reserve-wrap .calendar .today-btn{position:absolute; top:2rem; right:0; padding:12rem 16rem; min-width:0;}
.ir-reserve-area .ir-reserve-wrap .calendar .today-btn.hide{display:none;}
.ir-reserve-area .ir-reserve-wrap .calendar .today-btn span{font-size:14rem;}
.ir-reserve-area .ir-reserve-wrap .calendar .day{display:flex; margin-bottom:16rem;}
.ir-reserve-area .ir-reserve-wrap .calendar .day p{display:flex; align-items: center; justify-content: center; width:72rem; height:32rem;}
.ir-reserve-area .ir-reserve-wrap .calendar .day p:first-child{color:var(--Color-Red)}
.ir-reserve-area .ir-reserve-wrap .calendar .week-div{display:flex; flex-wrap:wrap; gap:4rem 0;}
.ir-reserve-area .ir-reserve-wrap .calendar .week-div a{display:flex; flex-direction: column; align-items: center; gap:8rem; padding:8rem; width:72rem; height:73rem; border-radius: 4rem;}
.ir-reserve-area .ir-reserve-wrap .calendar .week-div a.disabled{cursor:default;}
.ir-reserve-area .ir-reserve-wrap .calendar .week-div a .date{font-size:16rem; font-family:"Pretendard-Bold"; line-height:160%; letter-spacing: -0.5px;}
.ir-reserve-area .ir-reserve-wrap .calendar .week-div a .txt{display:block; padding:2rem 0; width:100%; text-align: center; font-size:12rem; font-family:"Pretendard-Regular"; line-height:160%; letter-spacing: -0.5px; border-radius:2rem;}
.ir-reserve-area .ir-reserve-wrap .calendar .week-div a.today .txt{color:var(--Color-Gray-White); background:var(--Color-Blue-Primary);}
.ir-reserve-area .ir-reserve-wrap .calendar .week-div a.possible .txt{color:var(--Color-Blue-Primary); background:var(--Color-Blue-Light);}
.ir-reserve-area .ir-reserve-wrap .calendar .week-div a.select{background:url("/common/kr/images/icon-calendar-check-white.svg") no-repeat center bottom 11rem/21rem auto var(--Color-Blue-Primary);}
.ir-reserve-area .ir-reserve-wrap .calendar .week-div a.select .date{color:var(--Color-Gray-White);}
.ir-reserve-area .ir-reserve-wrap .calendar .week-div a.select .txt{display:none;}
.ir-reserve-area .ir-reserve-wrap .calendar .week-div a:nth-child(7n-6) span,
.ir-reserve-area .ir-reserve-wrap .calendar .week-div a.holiday span{color:var(--Color-Red) !important}
.ir-reserve-area .ir-reserve-wrap .calendar .week-div a:nth-child(7n) span,
.ir-reserve-area .ir-reserve-wrap .calendar .week-div a.today span,
.ir-reserve-area .ir-reserve-wrap .calendar .week-div a.disabled span{color:var(--Color-Gray-500)}
.ir-reserve-area .ir-reserve-wrap .no-select{display:none; text-align: center;}
.ir-reserve-area .ir-reserve-wrap .no-select.on{display:block;}
.ir-reserve-area .ir-reserve-wrap .no-select .f-h3{padding-top:240rem; background:url("/common/kr/images/icon-calendar-select.svg") no-repeat center top / 200rem auto;}
.ir-reserve-area .ir-reserve-wrap .no-select .f-b4-r{margin-top:16rem; color:var(--Color-Gray-800);}
.ir-reserve-area .ir-reserve-wrap .select-date{display:none; padding:32rem; width:100%;}
.ir-reserve-area .ir-reserve-wrap .select-date.on{display:block;}
.ir-reserve-area .ir-reserve-wrap .select-date .f-h2{margin-top:16rem;}
.ir-reserve-area .ir-reserve-wrap .select-date .select-time{margin-top:60rem; width:100%;}
.ir-reserve-area .ir-reserve-wrap .select-date .select-time button{margin-top:16rem; width:100%;}
.ir-reserve-area .ir-reserve-wrap .select-date .select-time button.on{background:var(--Color-Blue-Primary); border:1px solid var(--Color-Blue-Primary);}
.ir-reserve-area .ir-reserve-wrap .select-date .select-time button.on span{color:var(--Color-Gray-White);}

@media all and (max-width: 1024px) {
  .ir-area .ir-contact {flex-direction: column; gap: 8rem; width: 100%; margin-top: 4rem;}
  .ir-area .ir-contact .contact {align-items: flex-start; gap: 24rem;}
  .ir-area .ir-contact .contact:not(:first-child):after {display: none;}
  .ir-area .ir-contact .contact .tit {width: 90rem;}

  .ir-inquiry-step{flex-direction: column; gap:12rem;}
  .ir-inquiry-step .step-box{padding:24rem; width:100%;}
  .ir-area .cont-sec:not(:first-child){margin-top:80rem;}
  .ir-reserve-area{flex-direction: column;}
  .ir-reserve-area .ir-reserve-wrap{padding:60rem 24rem; width:100%;}
  .ir-reserve-area .ir-reserve-wrap:has(.calendar){padding:26rem 10rem 16rem;}
  .ir-reserve-area .ir-reserve-wrap .calendar{width:100%;}
  .ir-reserve-area .ir-reserve-wrap .calendar .year-month-div{margin-bottom:60rem;}
  .ir-reserve-area .ir-reserve-wrap .calendar .today-btn{top:-7rem; right:0;}
  .ir-reserve-area .ir-reserve-wrap .calendar .day{justify-content: center;}
  .ir-reserve-area .ir-reserve-wrap .calendar .day p{width:calc(100% / 7); height:24rem;}
  .ir-reserve-area .ir-reserve-wrap .calendar .week-div a{gap:6rem; padding:2rem 1rem; width:calc(100% / 7); height:54rem;}
  .ir-reserve-area .ir-reserve-wrap .calendar .week-div a.select{background:url("/common/kr/images/icon-calendar-check-white.svg") no-repeat center bottom 6rem/16rem auto var(--Color-Blue-Primary)}
  .ir-reserve-area .ir-reserve-wrap .calendar .week-div a .txt{font-size:10rem;}
  .ir-reserve-area .ir-reserve-wrap .no-select .f-h3{padding-top:190rem; background-image:url("/common/kr/images/icon-calendar-select-mob.svg"); background-size:150rem auto;}
  .ir-reserve-area .ir-reserve-wrap .select-date{padding:0;}
  .ir-reserve-area .ir-reserve-wrap .select-date .select-time button{padding:16rem;}
  .ir-reserve-area .ir-reserve-wrap .select-date .select-time button:nth-child(3){margin-top:8rem;}
}

/* [ IR문의 > IR문의 신청 ] */
.visitor-wrap .visitor-list {position: relative; display: flex; flex-direction: column; gap: 120rem;}
.visitor-wrap .visitor-list .item .form-wrap {display: grid; grid-template-columns: repeat(2, 1fr); gap: 24rem 20rem;}
.visitor-wrap .visitor-list .item:first-child .btns {display: none;}
.visitor-wrap .visitor-list .item .btns {margin-top: 40rem;}
.visitor-wrap .visitor-total {display: flex; justify-content: flex-end; gap: 8rem; align-items: center; margin-top: 40rem; color: var(--Color-Gray-800);}
.visitor-wrap .visitor-total span {color: var(--Color-Gray-900);}
/* chk */
.visitor-wrap .visitor-list:not(:has(.item:nth-child(2))) .item:first-child:has(.btns) {padding-bottom: 66rem  /* .visitor-total height 26rem + .btns margin-top 40rem */;}
.visitor-wrap:has(.visitor-list .item .btns) .visitor-total {position: absolute; right: 0; bottom: 15rem;}
.visitor-wrap:not(:has(.item:nth-child(2))) .visitor-total {bottom: 0 !important;}

@media all and (max-width: 1024px) {
  .visitor-wrap .visitor-list {gap: 80rem;}
  .visitor-wrap .visitor-list .item .form-wrap {grid-template-columns: repeat(1, 1fr); gap: 32rem;}
  .visitor-wrap .visitor-list .item .btns {margin-top: 32rem;}
  .visitor-wrap .visitor-total {margin-top: 32rem;}
  /* chk */
  .visitor-wrap .visitor-list:not(:has(.item:nth-child(2))) .item:first-child:has(.btns) {padding-bottom: 56rem  /* .visitor-total height 24rem + .btns margin-top 32rem */;}
  .visitor-wrap:has(.visitor-list .item .btns) .visitor-total {bottom: 12rem;}
}
/* ----------------------------------------- 투자정보 End ----------------------------------------- */





/* ----------------------------------------- 지속가능경영 Start ----------------------------------------- */
/* common */
#wrap:has(.half-wrap .left-div.sticky) {overflow: unset;}
.half-wrap {position: relative; display: flex; justify-content: space-between; align-items: start; column-gap: 100rem;}
.half-wrap .right-div {width: 755rem; margin-left: auto;}
.half-wrap .center-div {width: 910rem; margin: 0 auto;}
.half-wrap .left-div.sticky {position: sticky; opacity: 1; top: 160rem; transition: top .3s ease;}
.half-wrap .left-div.sticky .tit {position: relative; opacity: 0; top: 80rem; transition: top 1s ease, opacity 1s ease;}
.half-wrap.active .left-div.sticky .tit {top: 0; opacity: 1;}
#wrap:has(#header.hide) .half-wrap .left-div.sticky {top: 60rem;}
@media all and (max-width: 1024px) {
  #wrap:has(.half-wrap .left-div.sticky) {overflow: hidden;}
  .half-wrap{flex-direction: column; gap:20rem;}
  .half-wrap .right-div{width:100%;}
  .half-wrap .center-div {width: 100%;}
  .half-wrap .left-div.sticky {position: unset;}
  #contents:has(.ceo-list) .half-wrap{gap:40rem;}
}

.round-img-wrap {height: 480rem; border-radius: var(--border-radius-lg); overflow: hidden;}
.round-img-wrap.h567 {height: 567rem;}
.round-img-wrap.small {height: 400rem;}
.round-img-wrap img {width: 100%; height: 100%; object-fit: cover;}
@media all and (max-width: 1024px) {
  .round-img-wrap {height: 240rem !important;}
  /* .round-img-wrap.h567 {height: 567rem;}
  .round-img-wrap.small {height: 400rem;} */
}

.txt-cont {margin-top: 80rem;}
.txt-cont .item {padding: 80rem 0; border-top: 1px solid var(--Color-Gray-200);}
.txt-cont .item:has(.tits) {padding: 60rem 0;}
.txt-cont .item:first-child {padding-top: 0 !important; border-top: none;}
.txt-cont .item:last-child {padding-bottom: 0 !important;}
.txt-cont .item .tits {display: flex; justify-content: space-between; align-items: center; gap: 20rem;}
.txt-cont .item .tits .tit {margin-bottom: 0;}
.txt-cont .item .tits .btns {flex-shrink: 0;}
.txt-cont .item .tit {margin-bottom: 24rem;}
.txt-cont .item .txt {color: var(--Color-Gray-800);}
.txt-cont .item .con {margin-top: 40rem;}
/* Focus Area */
.txt-cont.focus-area {margin-top: 0;}
.txt-cont.focus-area .item {border-top: none; border-bottom: 1px solid var(--Color-Gray-200);}
.txt-cont.focus-area .item:last-child {padding-bottom: 80rem; border-bottom:0;}
@media all and (max-width: 1024px) {
  .txt-cont {margin-top: 40rem;}
  .txt-cont .item {padding: 60rem 0;}
  .txt-cont .item:has(.tits) {padding: 60rem 0;}
  .txt-cont .item .tits {display: block;}
  .txt-cont .item .tits .tit {margin-bottom: 40rem;}
  .txt-cont .item .con {margin-top: 40rem;}
  /* Focus Area */
  .txt-cont.focus-area .item:last-child {padding-bottom: 80rem;}
}

/* [ 개요 ] */
.overviews-area {position: relative; top: 0 !important; left: -352rem; width: calc(100vw + 1px); height: 600vh;}
.overviews-area .overview-fixed {width: 100%; height: 100vh;}
.overviews-area .overview-fixed .align-wrap {display: flex; align-items: flex-start; justify-content: center; width: 100%; height: 100%;}
.overviews-area .overview-fixed .fixed-visual {position: relative; width: 1220rem; /* height: 640rem; */ height: 60vh; border-radius: 24rem; overflow: hidden;}
.overviews-area:before {content: ""; position: absolute; top: 0; right: 0; bottom: 0; z-index: 3; width: 100%; height: 100%; background: var(--Color-Gray-White); transition: width .7s ease;}
.overviews-area .overview-fixed .fixed-visual:after {content: ""; position: absolute; top: 0; right: 0; bottom: 0; z-index: 2; width: 100%; height: 100%; background: var(--Color-Blue-500); transition: width .8s ease;}
.overviews-area.active::before {width: 0; transition-delay: .45s;}
.overviews-area.active .overview-fixed .fixed-visual:after {width: 0; transition-delay: .8s;}
.overviews-area .overview-fixed .fixed-visual .motion-visual {width: 100%; height: 100%;}
.overviews-area .overview-fixed .fixed-visual .motion-visual:first-child {position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 1;}
.overviews-area .overview-fixed .fixed-visual .motion-visual:last-child {position: relative; z-index: 2; visibility: hidden; opacity: 0; background-color: var(--Color-Gray-White);}
.overviews-area .overview-fixed .fixed-visual .motion-visual .img {position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%;}
.overviews-area .overview-fixed .fixed-visual .motion-visual .img img {width: 100%; height: 100%; object-fit: cover;}
.overviews-area .overview-fixed .fixed-visual .motion-visual .img-dimd {position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 1; width: 100%; height: 100%; background: #000; opacity: 0;}
.overviews-area .overview-fixed .fixed-visual .motion-visual .txt-div {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 3; color: var(--Color-Gray-White); transition: opacity .3s ease;}
.overviews-area .overview-fixed .fixed-visual .motion-visual .txt-div p {position: relative; top: 80rem; opacity: 0; transition:var(--transition-default);}
.overviews-area .overview-fixed .fixed-visual .motion-visual .txt-div.active p {top: 0; opacity: 1;}
.overviews-area .overview-fixed .fixed-visual .motion-visual .txt-div.hide {opacity: 0; pointer-events: none;}
.overviews-area .overview-fixed .fixed-visual .motion-visual .txt-div.active p:nth-child(2){transition-delay: 0.15s}
.overviews-area .overview-fixed .fixed-visual .motion-visual .txt-div.active p:nth-child(3){transition-delay: 0.3s}
.overviews-area .overview-fixed .fixed-visual .motion-visual .txt-div.active p:nth-child(4){transition-delay: 0.45s}
.overviews-area .overview-fixed .fixed-visual .motion-visual .txt-div .category {margin-bottom: 64rem;}
.overviews-area .overview-fixed .fixed-visual .motion-visual .txt-div .txt {margin-top: 24rem;}
.esg-wrap {position: relative; z-index: 2; height: 100%; margin-left: 0;}
.esg-wrap .esg-list {position: absolute; left: 0; display: flex; flex-wrap: nowrap; align-items: center; gap: 20rem; height: 100%;}
.esg-wrap .esg-list .item:first-child {width: 100vw; height: 100vh; border-radius: 0;}
.esg-wrap .esg-list .item {position: relative; flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 910rem; height: 720rem; border-radius: var(--border-radius-md); overflow: hidden;}
.esg-wrap .esg-list .item .tit {position: relative; color: var(--Color-Gray-White); opacity: 0; transition: opacity .4s ease;}
.esg-wrap .esg-list .item.active .tit {opacity: 1;}
.esg-wrap .esg-list .item .img {position: relative;}
.esg-wrap .esg-list .item .img::before {content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, .5);}

@media all and (max-width: 1024px) { 
  .overviews-area {left: -16rem; width: 100vw;}
  .overviews-area .overview-fixed .fixed-visual {width: calc(100% - 32rem); height: 80vh; border-radius: 12rem;}
  .overviews-area .overview-fixed .fixed-visual .motion-visual .txt-div {width: calc(100% - 32rem);}
  .overviews-area .overview-fixed .fixed-visual .motion-visual .txt-div .category {margin-bottom: 32rem;}

  .esg-wrap .esg-list {padding-right: 32rem;}
  .esg-wrap .esg-list .item {width: 480rem; height: 480rem;}
}

/* [ 개요 ] */
/* 중점 추진 과제 */
.vision-cont .img-wrap {height: 240rem; margin-bottom: 60rem; border-radius: var(--border-radius-sm); overflow: hidden;}
.vision-cont .img-wrap img {width: 100%; height: 100%; object-fit: cover;}
.vision-cont .txt-wrap {display: grid; grid-template-columns: repeat(2, 1fr); gap: 80rem;}
.vision-cont .txt-wrap .txt-item .tit {margin-bottom: 16rem;}
.vision-cont .txt-wrap .txt-item .txts {display: flex; flex-direction: column; gap: 6rem;}
.vision-cont .txt-wrap .txt-item .txts .dot {color: var(--Color-Gray-800);}

@media all and (max-width: 1024px) {
  .vision-cont .img-wrap {margin-bottom: 40rem;}
  .vision-cont .txt-wrap {grid-template-columns: repeat(1, 1fr); gap: 40rem;}
  .vision-cont .txt-wrap .txt-item .txts {display: flex; flex-direction: column; gap: 6rem;}
}

/* [ 환경 > 기후변화대응 & 사회 > 인권경영 ] */
 /* 탄소중립 추진 방향 & 인권경영 프로세스 */
.process-wrap .arrow {position: absolute; right: 176rem; top: 0; z-index: 1; width: calc(100% - 352rem); height: 60rem; border: 3rem solid var(--Color-Blue-Primary); border-radius: 12rem 12rem 0 0; border-bottom: 0;}
.process-wrap .arrow::after {content: ""; position: absolute; bottom: 1px; left: -1px; transform: translate(-50%, 0); width: 0; height: 0; border-style: solid; border-width: 15rem 9rem 0 9rem; border-color: var(--Color-Blue-Primary) transparent transparent transparent;}
.process-wrap .arrow::before {content: ""; position: absolute; bottom: 0; left: 0; transform: translate(-50%, 0); width: 15rem; height: 15rem; background-color: var(--Color-Gray-White);}

.process-cont {position: relative; display: flex; justify-content: space-between;}
.process-cont:has(.item:nth-child(3)) {padding: 60rem 16rem 0; padding-bottom: 0;}
.process-cont:has(.item:nth-child(4)) {padding: 24rem 0 0;}
.process-cont::before {content: ""; position: absolute; left: 0; right: 0; width: 100%; border-radius: 999rem; border: 2px dashed #B0BBCA;}
.process-cont:has(.item:nth-child(3))::before {top: 46rem;}
.process-cont:has(.item:nth-child(4))::before {top: 0;}
.process-cont:has(.item:nth-child(4))::after {display: none;}
.process-cont:has(.item:nth-child(3))::before {height: 352rem;}
.process-cont:has(.item:nth-child(4))::before {height: 296rem;}
.process-cont .item {display: flex; flex-direction: column; align-items: center;}
.process-cont:has(.item:nth-child(3)) .item {width: 320rem;}
.process-cont:has(.item:nth-child()) .item {width: auto;}
.process-cont .item .circle {position: relative; flex-shrink: 0; display: flex; align-items: center; justify-content: center; text-align: center; color: #000; border-radius: 50%;}
.process-cont:has(.item:nth-child(3)) .item .circle {width: 320rem; height: 320rem; padding: 40rem;}
.process-cont:has(.item:nth-child(4)) .item .circle {width: 248rem; height: 248rem; padding: 30rem;}
.process-cont .item:nth-child(1) .circle {background-color: #E6EAF3;}
.process-cont .item:nth-child(2) .circle {background-color: #E6F3EB;}
.process-cont .item:nth-child(3) .circle {background-color: #F7F5E5;}
.process-cont .item:nth-child(4) .circle {background-color: #F7EAE5;}
.process-cont .item:not(:first-child) .circle::before {content: ""; position: absolute; top: 50%; transform: translateY(-50%); width: 14rem; height: 24rem; background: url("/common/kr/images/icon-process-arrow-right.svg") no-repeat center center / 100% auto;}
.process-cont:has(.item:nth-child(3)) .item:not(:first-child) .circle::before {left: -65rem;}
.process-cont:has(.item:nth-child(4)) .item:not(:first-child) .circle::before {left: -30rem;}
.process-cont .item .circle .step {margin-bottom: 4rem; color: var(--Color-Blue-Primary); text-transform: uppercase;}
.process-cont .item .txts {position: relative; flex: 1; margin-top: 80rem; padding: 24rem; border: 1px solid var(--Color-Gray-300); border-radius: var(--border-radius-sm);}
.process-cont:has(.item:nth-child(3)) .item .txts {flex: 1;}
.process-cont:has(.item:nth-child(4)) .item .txts {flex: none;}
.process-cont .item .txts::before {content: ""; position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); width: 1px; height: 80rem; background-color: #B0BBCA;}
.process-cont .item .txts .disc {margin-top: 8rem; color: var(--Color-Gray-700);}
.process-cont .item .txts .dots {margin-top: 20rem;}
.process-cont .item .txts .dots .dot {color: var(--Color-Gray-800);}
.process-cont .item .txts .dots .dot + .dot {margin-top: 4rem;}

@media all and (max-width: 1024px) {
  .process-wrap .arrow {right: -8rem; top: 120rem; width: 24rem; height: calc(100% - 370rem); border: 2rem solid var(--Color-Blue-Primary); border-radius: 0 4rem 4rem 0; border-left: 0;}
  .process-wrap .arrow::after {top: 0; left: 1px; bottom: unset; transform: translate(0, -50%); border-width: 6rem 10rem 6rem 0; border-color: transparent var(--Color-Blue-Primary) transparent transparent;}
  .process-wrap .arrow::before {top: 0; bottom: unset; transform: translate(0, -50%); width: 10rem; height: 10rem;}

  .process-cont{flex-direction: column; align-items: center; gap:58rem; padding:0;}
  .process-cont .item{max-width:100%; width:auto;}
  .process-cont:has(.item:nth-child(3)){padding:0;}
  .process-cont:has(.item:nth-child(3)) .item{width:100%;}
  .process-cont::before{display:none;}
  .process-cont:has(.item:nth-child(3)) .item .circle{width:240rem; height:240rem;}
  .process-cont .item:not(:first-child) .circle::before{top:-40rem; left:50%; transform:translate(-50%,0) rotate(90deg)}
  .process-cont:has(.item:nth-child(3)) .item:not(:first-child) .circle::before{left:50%;}
  .process-cont .item .txts{margin-top:24rem; padding:20rem; width:500rem;}
  .process-cont .item .txts::before{height:24rem;}
}
@media all and (max-width: 600px) {
  .process-wrap .arrow {height: calc(100% - 400rem);}

  .process-cont .item .txts{width:100%;}
}

/* [ 환경 > 환경경영 ] */
/* 환경경영 추진 전략 */
.strategy-chart {padding: 60rem 40rem; background-color: var(--Color-Blue-Light); border-radius: var(--border-radius-lg);}
.strategy-chart .tits {display: flex; justify-content: center !important; margin-bottom: 60rem;}
.strategy-chart .tits .tit {display: inline-flex; align-items: center; min-height: 56rem; margin-bottom: 60rem; padding: 12rem 32rem; text-align: center; color: var(--Color-Gray-White); background-color: var(--Color-Blue-Primary); border-radius: 999rem;}
.strategy-chart .columns {position: relative; display: flex; justify-content: space-between;}
.strategy-chart .columns::before {content: ""; position: absolute; left: 50%; bottom: 40rem; transform: translateX(-50%); width: 108rem; height: 367rem; background: url("/common/kr/images/icon-strategy-arrow.svg") no-repeat center center / 100% auto;}
.strategy-chart .columns .column {display: flex; flex-direction: column; gap: 40rem;}
.strategy-chart .columns .column .txt {position: relative; display: flex; align-items: center; justify-content: center; padding:10rem; width: 360rem; height: 80rem; color: #000; border-radius: var(--border-radius-md); border: 1px solid #B0BFDA; background-color: var(--Color-Gray-White); box-shadow: 0 0 2rem 0 rgba(0, 0, 0, 0.06), 0 4rem 8rem 0 rgba(0, 0, 0, 0.08);}
.strategy-chart .columns .column .txt:not(:first-child)::before {content: ""; position: absolute; top: -26rem; left: 50%; transform: translateX(-50%); width: 16rem; height: 10rem; background: url("/common/kr/images/icon-process-arrow-bottom.svg") no-repeat center center / 100% auto;}

@media all and (max-width: 1024px) {
  .strategy-chart{padding:40rem 20rem;}
  .txt-cont .strategy-chart .tits{display:flex; justify-content: center; margin-bottom:24rem;}
  .txt-cont .strategy-chart .tits .tit{margin-bottom:0;}
  .strategy-chart .columns{flex-direction: column; gap:38rem;}
  .strategy-chart .columns::before{bottom:auto; top:50%; transform:translate(-50%, -50%); width: 16rem; height: 10rem; background: url("/common/kr/images/icon-process-arrow-bottom.svg") no-repeat center center / 100% auto;}
  .strategy-chart .columns .column{gap:38rem;}
  .strategy-chart .columns .column .txt{width:100%; height:auto; min-height:74rem;}
}

/* [ 사회 > 사회공헌 ] */
/* core value */
.corevalue-cont {width: 100%; height: 300dvh;}
.corevalue-cont .corevalue-list {display: flex; flex-direction: column; gap: 8rem; width: 100%; height: 100dvh; padding-bottom: 200rem;}
.corevalue-cont .corevalue-list .item {position: relative; height: 80rem; padding: 0 160rem; overflow: hidden; transition: all .6s ease;}
.corevalue-cont .corevalue-list .item.on {height: calc(100% - 160rem - 16rem);}
.corevalue-cont .corevalue-list .item .txt-wrap {position: absolute; top: 50%; left: 160rem; transform: translateY(-50%); z-index: 1;  width: 540rem; color: var(--Color-Gray-White); opacity: 0; transition: opacity .4s ease;}
.corevalue-cont .corevalue-list .item .txt-wrap .txt {margin-top: 48rem;}
.corevalue-cont .corevalue-list .item.on .txt-wrap {opacity: 1;}
.corevalue-cont .corevalue-list .item .img-wrap {position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; border-radius: var(--border-radius-lg); overflow: hidden;}
.corevalue-cont .corevalue-list .item .img-wrap::after {content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, .5);}
.corevalue-cont .corevalue-list .item .img-wrap img {position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 100%; height: calc(100dvh - 200rem - 160rem - 8rem); object-fit: cover;}

@media all and (max-width: 1024px) {
  .corevalue-cont{height:auto;}
  .corevalue-cont .corevalue-list{gap:60rem; height:auto; padding-bottom:0;}
  .corevalue-cont .corevalue-list .item{display:flex; flex-direction: column-reverse; gap:40rem; padding:0; height:auto;}
  .corevalue-cont .corevalue-list .item.on{height:auto;}
  .corevalue-cont .corevalue-list .item .img-wrap{position:relative; height:194rem;}
  .corevalue-cont .corevalue-list .item .img-wrap::after{display:none;}
  .corevalue-cont .corevalue-list .item .img-wrap img{position:relative; left:0; top:0; transform:translate(0,0); width:100%; height:100%;}
  .corevalue-cont .corevalue-list .item .txt-wrap{position:relative; top:0; lefT:0; transform:translateY(0); width:100%; color: var(--Color-Gray-900); opacity:1;}
  .corevalue-cont .corevalue-list .item .txt-wrap .txt{margin-top:20rem; color:var(--Color-Gray-800)}
}

/* CP 운영실적 */
.date-cont {display: flex; flex-direction: column; gap: 40rem;}
.date-cont .item .dot {margin-top: 12rem; color: var(--Color-Gray-800);}
@media all and (max-width: 1024px) {
  .date-cont {gap: 24rem;}
  .date-cont .item .dot {margin-top: 8rem;}
}
/* ----------------------------------------- 지속가능경영 End ----------------------------------------- */





/* ----------------------------------------- ETC Start ----------------------------------------- */
/* 개인정보처리방침 */
.article-area .form-btn{justify-content: flex-end; margin-bottom:20rem;}
.article-area .form-btn .form-select{width:320rem; height:48rem;}
.article-area .blue-bg-info:has(.info-sec){display:block; padding:60rem;}
.article-area .blue-bg-info .info-sec{width:100%;}
.article-area .blue-bg-info .info-sec ~ .info-sec{margin-top:32rem; padding-top:32rem; border-top:1px solid var(--Color-Gray-300);}
.article-area .blue-bg-info .info-sec .f-h2,
.article-area .blue-bg-info .info-sec .f-b4-b{margin-bottom:24rem;}
.article-area .blue-bg-info .info-sec .f-b4-r{color:var(--Color-Gray-800);}
.article-area .blue-bg-info .info-sec .f-b4-r ~ .f-b4-r{margin-top:24rem;}
.article-area .blue-bg-info  + .cont-div{margin-top:80rem;}
.article-area .cont-div .f-b3-b,
.article-area .cont-box .f-b3-b,
.article-area .cont-box .f-b4-m{margin-bottom:16rem;}
.article-area .cont-div .f-b4-r,
.article-area .cont-box .f-b4-r{color:var(--Color-Gray-800)}
.article-area .cont-div .dot-txt,
.article-area .cont-box .dot-txt{position:relative; padding-left:34rem;}
.article-area .cont-div .dot-txt:before,
.article-area .cont-box .dot-txt:before{display:block; content:""; position:absolute; top:11rem; left:10rem; width:3px; height:3px; background:var(--Color-Gray-900); border-radius:50%;}
.article-area .cont-div .txt-wrap .f-b4-r,
.article-area .cont-box .txt-wrap .f-b4-r{margin-top:8rem;}
.article-area .cont-div .txt-wrap .f-b4-r .txt-wrap .f-b4-r,
.article-area .cont-box .txt-wrap .f-b4-r .txt-wrap .f-b4-r{padding-left:20rem; text-indent: -20rem;}
.article-area .cont-div .txt-wrap .f-b4-r .txt-wrap.narrow .f-b4-r,
.article-area .cont-box .txt-wrap .f-b4-r .txt-wrap.narrow .f-b4-r{padding-left:14rem; text-indent: -14rem;}
.article-area .cont-div .form-table{margin-top:16rem;}
.article-area .cont-div .txt-wrap + .form-table{margin-top:32rem;}
.article-area .cont-div .form-table + .txt-wrap{margin-top:24rem;}
.article-area .no-indent{padding-left:0 !important; text-indent: 0 !important;}

@media all and (max-width: 1024px) {
  .article-area .blue-bg-info:has(.info-sec){padding:40rem;}
  .article-area .blue-bg-info + .cont-div{margin-top:60rem;}
  .article-area .cont-div .form-table{margin-top:24rem;}
}


/* 사이트맵 */
.sitemap-area .sitemap-list{display:flex; align-items: flex-start; padding:80rem 0; border-top:1px solid var(--Color-Gray-300)}
.sitemap-area .sitemap-list:first-child{padding:0 0 80rem; border-top:0;}
.sitemap-area .sitemap-list:last-child {padding-bottom: 0;}
.sitemap-area .sitemap-list .one-depth{padding-right:10rem; width:200rem; color:var(--Color-Blue-Primary);}
.sitemap-area .sitemap-list .depth-wrapper{display:flex; flex-direction: column; gap:16rem; flex:1;}
.sitemap-area .sitemap-list .depth-wrapper .depth-list{display:flex;}
.sitemap-area .sitemap-list .depth-wrapper .depth-list .two-depth{padding-right:10rem; width:240rem;}
.sitemap-area .sitemap-list .depth-wrapper .depth-list .three-depth-div{display:flex; flex-wrap:wrap; gap:8rem 0; flex:1}
.sitemap-area .sitemap-list .depth-wrapper .depth-list .three-depth-div .three-depth{padding-right:10rem; width:260rem;}
.sitemap-area .sitemap-list.active:nth-child(1){transition-delay:0.15s}
.sitemap-area .sitemap-list.active:nth-child(2){transition-delay:0.3s}

@media all and (max-width: 1024px) {
  .sitemap-area .sitemap-list{flex-wrap:wrap;padding:40rem 0;}
  .sitemap-area .sitemap-list:first-child{padding:0 0 40rem;}
  .sitemap-area .sitemap-list:last-child{padding:40rem 0 0 0;}
  .sitemap-area .sitemap-list .one-depth{padding:9rem 0; width:100%;}
  .sitemap-area .sitemap-list .depth-wrapper{gap:0;}
  .sitemap-area .sitemap-list .depth-wrapper .depth-list{flex-direction: column;}
  .sitemap-area .sitemap-list .depth-wrapper .depth-list .two-depth{padding:9rem 0 9rem 16rem; width:auto;}
  .sitemap-area .sitemap-list .depth-wrapper .depth-list .three-depth-div{flex-direction: column; gap:0;}
  .sitemap-area .sitemap-list .depth-wrapper .depth-list .three-depth-div .three-depth{padding:9rem 0 9rem 16rem; width:auto;}
}

/* 에러 페이지 */
.error-area {display: flex; align-items: center; justify-content: center; min-height: 100dvh; padding: 100rem 0;}
.error-area .error-div {text-align: center;}
.error-area .error-div .tit {padding-top: 240rem; margin-bottom: 20rem; background: url("/common/kr/images/icon-site-error.svg") no-repeat center top / 200rem auto;}
.error-area .error-div .f-b4-r {margin-top: 40rem; color: var(--Color-Gray-800);}
.error-area .error-div .btns {margin-top: 40rem;}

@media all and (max-width: 1024px) {
  .error-area{padding:60rem 16rem;}
  .error-area .error-div .tit{padding-top:190rem; background-image: url("/common/kr/images/icon-site-error-mob.svg"); background-size:150rem auto;}
}

/* 사이트 점검 안내 */
.check-div {text-align: center;}
.check-div .tit {padding-top: 240rem; background: url("/common/kr/images/icon-site-complete.svg") no-repeat center top / 200rem auto;}
.check-div .txt {margin-top: 20rem; color: var(--Color-Gray-800);}
.check-div .blue-bg-info {width: 600rem; margin: 40rem auto 0;}
.check-area {display: flex; align-items: center; justify-content: center; min-height: 100dvh; padding: 100rem 0;}
.check-area .check-div .tit {background-image: url("/common/kr/images/icon-site-check.svg");}
.check-area .check-div .blue-bg-info {width: 800rem;}
.check-area .check-div .blue-bg-info .info-line ~ .info-line {margin-top: 10rem;}
.check-area .check-div .blue-bg-info .info-line .th {width: auto;}
.check-area .blue-bg-info .info-line .th {color:var(--Color-Gray-800);}
.check-area .blue-bg-info .info-line .td {color:var(--Color-Gray-900);}

@media all and (max-width: 1024px) {
  .check-div .tit {padding-top: 190rem; background-image: url("/common/kr/images/icon-site-complete.svg"); background-size: 150rem auto;}
  .check-div .blue-bg-info {justify-content: flex-start; width: 100%;}

  .check-area{padding:60rem 16rem;}
  .check-area .check-div{width:100%;}
  .check-area .check-div .tit {background-image: url("/common/kr/images/icon-site-check-mob.svg");}
  .check-area .check-div .blue-bg-info {width: 100%;}
  .check-area .check-div .blue-bg-info p{text-align: left;}
  .check-area .check-div .blue-bg-info .info-line ~ .info-line{margin-top: 16rem;}
}


/* 브라우저 업데이트 안내 */
/* .browser-pop.layer-popup .pop-area .pop-wrap .pop-fixed .pop-head{display:flex; justify-content: flex-end; padding:3rem 56rem 1rem 0;} */
.browser-pop .browser-wrap{padding-top: 40rem;}
.browser-pop .browser-wrap .browser-box{display:flex; align-items: center; gap:12rem; margin:24rem 0;}
.browser-pop .browser-wrap .browser-box .browser-item{display:flex; align-items: center; justify-content: center; width:calc(100% / 3); height:200rem; background:#F1F4F8; border-radius: var(--border-radius-md);}
.browser-pop .browser-wrap .browser-box .browser-item .f-b4-b{padding-top:80rem; width:90%; text-align: center;}
.browser-pop .browser-wrap .browser-box .browser-item.chrome .f-b4-b{background:url("/common/kr/images/icon-google-chrome-logo.svg") no-repeat center top / 65rem auto;}
.browser-pop .browser-wrap .browser-box .browser-item.edge .f-b4-b{background:url("/common/kr/images/icon-edge-logo.svg") no-repeat center top / 64rem auto;}
.browser-pop .browser-wrap .browser-box .browser-item.firefox .f-b4-b{background:url("/common/kr/images/icon-firefox-logo.svg") no-repeat center top / 64rem auto;}
.browser-pop .browser-wrap .browser-box .browser-item .f-b4-b span{padding-right:20rem; background:url("/common/kr/images/icon-link-arrow.svg") no-repeat right center / 16rem auto;}
.browser-pop .browser-wrap .f-b4-r{text-align: center; color: var(--Color-Gray-800);}
.browser-pop .browser-wrap .f-b4-r ~ .f-b4-r{margin-top: 20rem;}
.browser-pop .browser-wrap .f-b4-b{color: var(--Color-Gray-900);}

@media all and (max-width: 1024px) {
  .browser-pop .browser-wrap .browser-box{flex-direction: column; gap:12rem;}
  .browser-pop .browser-wrap .browser-box .browser-item{width:100%;}
}
/* ----------------------------------------- ETC End ----------------------------------------- */