/*esg overview*/

.esgContainer .rowTxt > h2 {
    position: absolute;
    left: 0;
    top: 0;
}

.esgContainer .esgHero{    width: 100%;
height: 100vh;
    height: calc(var(--vh, 1vh) * 100);
    background-image: url(/images/contents/esg_hero01.png);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    position: relative;
    overflow: hidden;
    border-radius: 12px;
}

.esgContainer .esgHero .common-topWrap{position:absolute;bottom:5vh; left:5vw;}

.esgContainer .esgHero .title{color:#fff;}

.esgContainer .esgHero .title em {color:#fff;}

.esg-sc {margin-top:100px;}

.esg-quote-wrap{

  text-align: center;
  background:#F9F9FA;
  border-radius:12px;
}


.esg-quote{
 display: flex; align-items: center; justify-content: center; width: 100%; height: 164rem; font-weight: 300; font-size: 25rem; color: #111; background: #F9F9FA; border-radius: 12rem; 
}

.esg-quote em{
 color:#000;
 font-weight:700;
}


.esg-quote>span{
    display: inline-flex;
    gap:5px;
}

.esg-quote::before{
content: ""; width: 29rem; height: 80rem; margin-right: 26rem; background: url(/images/contents/esg_environ_icn01.svg) no-repeat;             
}

.esg-quote::after{
content: ""; width: 29rem; height: 80rem; margin-left: 26rem; background: url(/images/contents/esg_environ_icn02.svg)bottom center no-repeat;               
}

.esg-goal{

}


.esg-goal__list{
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid rgba(0,0,0,.08);
}

.esg-goal__item{
  display: grid;
  grid-template-columns: 520px 1fr; 
  column-gap: 120px;
  align-items: start;
  padding: 34px 0;
  border-bottom: 1px solid rgba(0,0,0,.08);
}


.esg-goal__left{
  display: flex;
  align-items: flex-start;
  gap: 22px;
  min-width: 0;
}

.esg-goal__icon{
  width: 56px;
  height: 56px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 56px;
}

.esg-goal__icon img{
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.esg-goal__tit{
  margin: 0;
  font-size: 25rem;
  font-weight: 600;
  color: #111;
  letter-spacing: -0.02em;
  white-space: nowrap;      
  overflow: hidden;
  text-overflow: ellipsis;
}

.esg-goal__desc{
  margin: 0;
  font-size: 20rem;
  line-height: 1.8;
  color: rgba(0,0,0,.55);
}

.mo_esg{display:none;}

.height_mo{
    padding: 25px 12px 12px 12px !important;
}

/*human right*/

.hr-hero-bg{   width: 100%;
    height: 676rem;
    background-image: url(/images/contents/esg_hero02.png);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    position: relative;
    overflow: hidden;
    margin-bottom:100px;
    border-radius: 12px;
}

.hr-sc,.em-sc{    padding-top: 62px;
    border-top: 1px solid #002D74;padding-left:initial !important;padding-right:initial !important;}

.hr-imgBox{margin-bottom:100px;}

.hr-sc .line{    width: 100%;
    height: 1px;
    border: 1px solid #DFDFDF;
    display: block;
    margin: 90px 0;}

.esg-hr-tit,.hr-policy__tit{
 font-size:23rem;
 font-weight:500;
 color:#111;
 margin-bottom:30px;
}

.esg-hr-desc,.hr-policy__desc{
 font-size:20rem;
 font-weight:300;
 color:#111;}

.hr-policy li {margin-bottom:50px;}

.hr-policy li:last-child{margin-bottom:initial;}

.hr-policy__tit{margin-bottom:16px;}

.esgContainer .hr-sc .conBox + .conBox{
 margin-top:initial;
}

.sc4-mg{margin-bottom:50px;}

.report-btn{width:249px;border:2px solid #002D74; border-radius:64px;margin-top:40px;}

.report-btn .js-open-complain{
    display: inline-flex;
    align-items: center;
    gap: 30px;
    padding:18px 0;
    font-size:20rem;
    color:#002d74;
    width: 100%;
    justify-content: center;
}


.report-btn__arrow{
  width: 12px;
  height: 12px;
  display: inline-block;
  border-right: 2px solid #0b3d91;
  border-top: 2px solid #0b3d91;
  transform: rotate(45deg); /* > 모양 */
}

/* ===== Modal Base ===== */
.modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
}

.modal.is-open {
  display: block;
}

.modal__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.45);
}

/* 팝업 크기: 1000 x 780 */
.modal__dialog {
  position: absolute;
  left: 50%;
  top: 50%;
    width: clamp(360px, calc(100vw - 24px), 1000px);
  height: 780px;
  transform: translate(-50%, -50%);
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 20px 60px rgba(0,0,0,.25);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* Header */
.modal__header {
    flex: 0 0 auto;
    padding: 65px 62px 0 62px;

    display: flex;
    align-items: center;
    justify-content: space-between
}

.modal__titleWrap {
    display: flex;
    align-items: baseline;
    gap: 10px;
    min-width: 0;
    width: 100%;
    justify-content: space-between;
    border-bottom: 1px solid #002D74;
    padding-bottom: 15px;
}

.modal__title {
  font-size: 30rem;
  font-weight: 700;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  color:#002D74;
  text-overflow: ellipsis;
}

.modal__required {
  font-size: 16rem;
  color: #002D74;
  white-space: nowrap;
}

.modal__close {
    width: 34px;
    height: 34px;
    border: 0;
    background: #002D74;
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
    color: #fff;
    border-radius: 8rem;
    position: absolute;
    top: 14rem;
    right: 14rem;
}

.modal__body{
  flex:1 1 auto;
  overflow:auto;
  padding:40px 62px 90px 62px;
  background:#fff;
}

html.is-modal-open, body.is-modal-open{overflow:hidden;}

/* ===== form UI ===== */
.cform__sec{padding:10px 0 14px;}
.cform__sec.last-form{padding-bottom:56px;border-bottom:1px solid #dfdfdf;}
.cform__h3{margin:0 0 30px; font-size:25rem; font-weight:700; color:#222;}

.req{color:#2b58a5; font-weight:700;}

.cform__radios{display:flex; gap:18px; align-items:center; margin-bottom:42px;}
.cform__radio{display:inline-flex; gap:8px; align-items:center; font-size:18rem; color:#222; cursor:pointer;}
.cform__radio input{accent-color:#2b58a5;}

.cform__grid2{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap: 26px 30px;
}

.cfield__lab{position: relative;display:block; font-size:18rem; color:#222; margin:0 0 8px; font-weight:600;}
.cfield__inp, .cfield__ta{
  width:100%;
  border:1px solid transparent;
  background:#f6f6f6;
  border-radius: 6px !important;
  padding:12px 12px;
  font-size:13px;
  outline:none;
}
.cfield__inp:focus, .cfield__ta:focus{border-color:#2b58a5; background:#fff;}
.cfield{margin-bottom:30px;}
.cfield__ta{resize:vertical; min-height:140px;}

.ctypeGrid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
}

.req{    position: relative;}

.ctype{display:block; cursor:pointer;}
.ctype input{position:absolute; opacity:0; pointer-events:none;}
.ctype__card{
  display:block;
  border:1px solid transparent;
  border-radius:8px;
   padding: 24px 14px 24px 64px !important;
  background:#fafafa;
  min-height:78px;
}

.ctype__card::before,.ctype__card::after{
  top:50% !important;
 transform:translateY(-50%);
  left:20px !important;
}

.ctype__card::after{
   left:26px !important;
}
.ctype__tit{display:block; font-size:18rem; font-weight:700; color:#222; margin-bottom:6px;}
.ctype__sub{display:block; font-size:16px; color:#7a7a7a; line-height:1.35;}
.ctype input:checked + .ctype__card{
  border-color:#2b58a5;
}

.consentBox{
  border:1px solid #eee;
  background:#fafafa;
  border-radius:8px;
  padding:14px;
  margin-bottom:20px;
}
.consentBox__txt{    font-size: 16rem;
    color: #7d7d7d;
    line-height: 1.55;}
.cform__radio--single{margin-top:6px;}

.cform__submit{padding:18px 0 0; display:flex; justify-content:center;}
.btnSend{
  width:229px;
  height:64px;
  border:0;
  border-radius:65px;
  background:#002D74;
  color:#fff;
  font-size:20rem;
  font-weight:700;
  cursor:pointer;
}

#reporterFields .cfield{margin-bottom:initial;}
.is-hidden { display: none !important; }

.req::after {
    content: '';
    display: block;
    position: absolute;
    left: 4px;
    top: 3rem;
    width: 6rem;
    height: 6rem;
    background-color: var(--ci-color);
    border-radius: 50%;
}

/*ethical management*/

.em-hero-bg{
  width: 100%;
    height: 676rem;
    background-image: url(/images/contents/esg_hero03.png);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    position: relative;
    overflow: hidden;
    margin-bottom:100px;
    border-radius: 12px;
}

.ethic-goal__tit{
  margin: 0 0 22px;
  font-weight: 700;
  color: #111;
  letter-spacing: -0.02em;
}


.ethic-goal__list{
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0; 
}

.ethic-goal__item{
  padding: 22px 18px 18px;
  position: relative;
}

.ethic-goal__item + .ethic-goal__item{
  border-left: 1px solid #DFDFDF;
}

.ethic-goal__item:first-child{
  border-left: 1px solid #DFDFDF;
}

.ethic-goal__item:last-child{
  border-right: 1px solid #DFDFDF;
}

.ethic-goal__item

.ethic-goal__card{
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ethic-goal__img{
  display: block;
  border-radius: 12px;
  overflow: hidden;
  aspect-ratio: 16 / 10; 
}

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

.ethic-goal__txt{
  margin: 0;
  font-size: 20rem;
  font-weight:500;
  line-height: 1.5;
  color: #111;
  word-break: keep-all;
}

@media (max-width: 1200px) {

    .modal__close{
     top:12rem;
     right:12rem;
}

.modal__header {
    padding: 59px 20px 0 20px;
}

.modal__body {
    padding: 30px 20px 90px 20px;
}

.modal__titleWrap {
    padding-bottom:5px;
    flex-direction: column;
}

.modal__title{
   font-size:18rem;
}

.modal__desc{
  font-size:14rem;
}

.cform__h3{
  margin: 0 0 14px;
  font-size:18rem;
}

.cform__grid2{
    grid-template-columns: 1fr;
    gap: 20px;
}

.ctypeGrid {
    grid-template-columns: 1fr;
}

.cfield__inp, .cfield__ta {
    padding: 15px 12px;
    font-size:15rem;
}

.cform__radios{margin-bottom:11px;}

.cform__sec.last-form{
 padding-bottom:30px;
}

.cform__sec.info{
 margin-top:30px !important; 
}
 
.cfield{
  margin-bottom:20px;
}

.none-gap{gap:initial;}

    .esgContainer .rowTxt > h2{position:relative;}

.esgContainer .hr-sc .rowTxt > h2{margin-bottom:30px;}

    .esgContainer .esgHero {
        height: 530rem;
        background-position: 36%;
    }

    .esg-quote-wrap{padding:32px 0;margin-top:30px;}

    .esg-quote{font-size:18rem;padding: initial;}
    
.esg-quote>span{
    display: inline;
}

.esg-goal{margin-top:30px;}

.esg-goal__item{
    grid-template-columns: 1fr;
    row-gap: 12px;
    column-gap: 0;
    align-items: start;
    padding: 26px 0;
  }


  .esg-goal__left{
    gap: 16px;
  }

  .esg-goal__icon{
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
  }


  .esg-goal__tit{
    white-space: normal;
    font-size: 16px;
    line-height: 1.4;
  }

  .esg-goal__desc{
    margin-left: calc(44px + 16px);
    font-size: 13px;
    line-height: 1.8;
  }	

.hr-hero-bg,.em-hero-bg{height:400rem;}

.imgBox .mo{
display:block;}

   .imgBox{margin-top:30px;}


}
@media (max-width: 767px) {
.esg-quote{height:initial;}
.esg-quote::before {background: url(/images/contents/esg_environ_icn01_m.svg) no-repeat;     margin-right: 2rem;}
.esg-quote::after {background: url(/images/contents/esg_environ_icn02_m.svg)bottom center no-repeat;     margin-left: 4rem;}

  .pc_esg{display:none;}
  .mo_esg{display:block;}
  .ethic-goal__list{
    grid-template-columns: 1fr;
  }
.ethic-goal__item + .ethic-goal__item{
  border-left: none;
  }

.ethic-goal__item{
border-bottom: 1px solid #dfdfdf;
}


.ethic-goal__item:first-child{
  border-left: none;
}

.ethic-goal__item:last-child{
  border-right: none;
  border-bottom: none;
}

}