.fl_wrap{}
.fl_wrap:after{content: "";display: block;clear: both;}
.fl_l{float: left;}
.fl_r{float: right;}
.body-bg-wrap {
    min-height:100vh;
    background:url('/img/bg.jpg') center/cover no-repeat;
    opacity:0;
    animation: bgImageFade 0.8s ease-out forwards;
}


#container_title.bg-custom #gw-sub-head-container{position: relative;z-index: 10;border-bottom: 1px solid #cfcfcf;}
#container_title.bg-aboutUs #gw-sub-head-container{background: url('/img/custom/bg_sub_01.jpg');background-size: cover;    background-position: 50%;    animation: bgZoomOut 1.2s ease-out forwards;}
#container_title.bg-aboutUs-ceo #gw-sub-head-container{background: url('/img/custom/bg_sub_01.jpg');background-size: cover;    background-position: 50%;    animation: bgZoomOut 1.2s ease-out forwards;}
#container_title.bg-aboutUs-history #gw-sub-head-container{background: url('/img/custom/bg_sub_01_2.jpg');background-size: cover;    background-position: 50%;    animation: bgZoomOut 1.2s ease-out forwards;}
#container_title.bg-aboutUs-vision #gw-sub-head-container{background: url('/img/custom/bg_sub_01_3.jpg');background-size: cover;    background-position: 50%;    animation: bgZoomOut 1.2s ease-out forwards;}
#container_title.bg-aboutUs-countries #gw-sub-head-container{background: url('/img/custom/bg_sub_01_4.jpg');background-size: cover;    background-position: 50%;    animation: bgZoomOut 1.2s ease-out forwards;}
#container_title.bg-aboutUs-cert #gw-sub-head-container{background: url('/img/custom/bg_sub_01_5.jpg');background-size: cover;    background-position: 50%;    animation: bgZoomOut 1.2s ease-out forwards;}
#container_title.bg-aboutUs-loc #gw-sub-head-container{background: url('/img/custom/bg_sub_01_6.jpg');background-size: cover;    background-position: 50%;    animation: bgZoomOut 1.2s ease-out forwards;}
#container_title.bg-products #gw-sub-head-container{background: url('/img/custom/bg_sub_02.jpg');background-size: cover;    background-position: 50%;    animation: bgZoomOut 1.2s ease-out forwards;background-position-y: 60%;}
#container_title.bg-reference #gw-sub-head-container{background: url('/img/custom/bg_sub_03.jpg');background-size: cover;    background-position: 50%;background-position-y:100%;    animation: bgZoomOut 1.2s ease-out forwards;}
#container_title.bg-contact #gw-sub-head-container{background: url('/img/custom/bg_sub_04.jpg');background-size: cover;    background-position: 50%;    animation: bgZoomOut 1.2s ease-out forwards;}
#container_title.bg-news #gw-sub-head-container{background: url('/img/custom/bg_sub_05.jpg');background-size: cover;    background-position: 50%;    animation: bgZoomOut 1.2s ease-out forwards;}
#container_title.bg-esg #gw-sub-head-container{background: url('/img/custom/bg_sub_06.jpg');background-size: cover;    background-position: 50%;    animation: bgZoomOut 1.2s ease-out forwards;background-position-y: 52%;}

#container_title.bg-custom #gw-sub-head-container::after{
  content:'';
  position:absolute;
  inset:0;
  background: rgba(0, 0, 0, 0.1);   /* 딤 강도 */
  pointer-events:none;        }

@keyframes bgZoomOut {
    0% {
        transform: scale(1.08); /* 약간 확대된 상태에서 시작 */
        opacity: 0;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}
/* 래퍼/컨테이너: 드롭다운이 밖으로 나와도 보이도록 overflow:visible */
.breadcrumb-container-wrap { position: relative; overflow: visible; }
.breadcrumb-container {
  display: flex; align-items: center;
  list-style: none; margin: 0;
  overflow: visible;
}
.breadcrumb-container > li { position: relative; }          /* 홈 아이콘 li 포함 */
.breadcrumb-container > li.crumb { position: relative; }    /* 드롭다운 기준점 */

/* 트리거 링크(현재 1뎁스/2뎁스 텍스트) */
.crumb > .crumb-link {
  display: inline-flex; align-items: center; white-space: nowrap;
  text-decoration: none; color: #333;line-height: 1.2;width: 7em;line-height: 1em;
}
.d1-crumb.active > .crumb-link {color:#fff; }
.d2-crumb.active > .crumb-link {color:#fff; }

.caret {
  width:0; height:0; border-left:5px solid transparent; border-right:5px solid transparent;
  border-top:6px solid currentColor; transition: transform .18s ease;margin: .5em .2em 0 .5em;
}

/* 드롭다운 패널(항상 부모 li.crumb 기준 ↓로 뜬다) */
.crumb > .dropdown {
  position: absolute;
  top: 100%;         /* 트리거 바로 아래 */
  left: 0;           /* 부모 li의 좌측 기준 */
  z-index: 9999;

  min-width: max(220px, 100%);   /* 트리거보다 좁지 않게 */
  max-width: min(560px, 90vw);
  background: #fff;
  border: 1px solid #e6e6e6;

  /* 보임/숨김: display 대신 visibility/opacity로 부드럽게 */
  visibility: hidden;
  opacity: 0;
  transform: translateY(6px);
  transition: visibility .001s linear .12s, opacity .12s ease, transform .12s ease;
  pointer-events: none;    /* 닫힐 때 클릭 차단 */
}

/* 호버-브릿지(보이지 않는 hover 연결) – a와 dropdown 사이 끊김 방지 */
.crumb > .crumb-link::after {
  content:"";
  position: absolute; left: -8px; right: -8px; bottom: -1px; height: 10px;
  background: transparent;
}

/* 메뉴 항목 스타일 */
.crumb .dropdown[role="menu"] { list-style: none; margin: 0;}
.crumb .dropdown li[role="none"] > a[role="menuitem"]{
  display: block; padding: 16px 10px;
  color: #444; text-decoration: none;
}
.crumb .dropdown li[role="none"] > a[role="menuitem"]:hover,
.crumb .dropdown li[role="none"] > a[role="menuitem"]:focus { background: #FFC421; }
.crumb .dropdown li.active > a[role="menuitem"] { background: #FFC421; color:#111; }

/* 열림 조건: 링크 hover/focus 또는 패널 hover/focus 유지 시 켜짐 */
.crumb > .crumb-link:hover + .dropdown,
.crumb > .crumb-link:focus + .dropdown,
.crumb > .crumb-link:focus-visible + .dropdown,
.crumb > .dropdown:hover,
.crumb > .dropdown:focus-within {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0s;
  pointer-events: auto;
}

/* 열렸을 때 케럿 회전(선택) */
.crumb:hover > .crumb-link .caret,
.crumb:focus-within > .crumb-link .caret { transform: rotate(180deg); }

/* 오른쪽 끝에서 잘릴 때는 해당 li에 align-right 클래스만 추가 */
.crumb.align-right > .dropdown { right: 0; left: auto; }

.breadcrumb-container > li:not(:first-child):before{content: " ";    margin-right: 5px;    border-left: 1px solid red;    line-height: 3em;    margin-left: 10px;display: inline-block;}


/* contents */
#gw-sub-head-container{height: 400px !important;}

#container_wr{background-color: #fff !important;}

.c_sub_contents_wrapper{background-color: #fff;}
.c_sub_contents_wrapper .c_sub_title > h2{font-family: 'Pretendard_B';font-weight: 700;font-style: Bold;font-size: 56px;leading-trim: NONE;line-height: 70px;letter-spacing: 0%;text-align: center;margin: 1.5em 0;}


#container_title.bg-custom .gw-sub-head-con-1200{width: 100%;}
#container_title.bg-custom .gw-sub-theme-title{width: 70%;margin: 2em auto 0;}
#container_title.bg-custom .breadcrumb-container-wrap{width: 100%;border-top: 1px solid rgba(228, 228, 228, 0.678);position: relative;bottom: -85px;}
#container_title.bg-custom .breadcrumb-container-wrap .breadcrumb-container{width: 70%;margin: 0 auto;}



/*ceo*/

.c_sub_contents_wrapper{width: 80%;margin: 0 auto;min-width: 1600px;;}
.c_sub_contents_wrapper .c_sub_title > h2{margin: 90px 0;}

.c_sub_contents_wrapper .c_sub_content .c_sub_cont_l{width: 29%;margin-right: 1%;}
.c_sub_contents_wrapper .c_sub_content .c_sub_cont_l > h3{font-size: 32px;   font-family: 'Pretendard_B';line-height: 40px;margin-right: 1.5em;}
.c_sub_contents_wrapper .c_sub_content .c_sub_cont_r{width: 69%;min-width: 1024px;}
.c_sub_contents_wrapper .c_sub_content .c_sub_cont_r > p{font-size: 16px;line-height: 24px;color: #293040;    font-family: 'Pretendard_R';margin-bottom: 1em;}
.c_sub_contents_wrapper .c_sub_content .c_sub_cont_r .c_sub_cont_sig{margin-top: 1.5em;}
.c_sub_contents_wrapper .c_sub_content .c_sub_cont_r .c_sub_cont_sig > h5{font-size: 18px;line-height: 26px;display: inline-block;}
.c_sub_contents_wrapper .c_sub_content .c_sub_cont_r .c_sub_cont_sig > span > img{width: 130px;}


.c_sub_contents_wrapper .c_sub_ceo_img{width: 100%;height: 460px;background: url('/img/custom/aboutUs_ceo.jpg');    background-size: cover;    background-position-y: 50%;margin-top: 80px;}


/*history*/

.c_sub_content.c_sub_content_history{}
.c_sub_content.c_sub_content_history .c_sub_cont_l{width: 19%;margin-right: 5%;}
.c_sub_content.c_sub_content_history .c_sub_cont_l > h3{font-size: 56px;line-height: 70px;}
.c_sub_content.c_sub_content_history .c_sub_cont_r{border-left: 1px solid #F3F3F8;    padding-left: 26px;}


.c_sub_content.c_sub_content_history section.tl{position: relative;}
.c_sub_content.c_sub_content_history section.tl.active::before{  content: "";                 /* 필수! 비워두면 아무것도 안 나옴 */
  position: absolute;
  left: -27px;                 /* 리스트 왼쪽으로 이동 */
  top: 35px;                   /* 세로 정렬 맞추기 */
  height: var(--line-height, 100px);
  width: 2px;                  /* 동그라미 크기 */
  height: 120px;
  background-color: #F3F3F8; 
}

.c_sub_content.c_sub_content_history section.tl .tl-year{font-family: 'Pretendard_SB';width: 100%;border-top: 1px solid #F3F3F8;}
.c_sub_content.c_sub_content_history section.tl .tl-year.active::before{   content: "";
  position: absolute;
  left: -27px;
  top: 37px;
  width: 2px;
  height: var(--line-height, 82px);
  background-color: #FFC421;
  display: block;  /* 색상 (노란색) */
  }

.c_sub_content.c_sub_content_history section.tl .tl-year.tl-year-lastChild{border-bottom: 1px solid #F3F3F8;}
.c_sub_content.c_sub_content_history section.tl .tl-year .tl-year__label{width: 6%;    font-weight: 700;    font-size: 24px;    line-height: 25px;    padding: 25px 0;position: relative;}
.c_sub_content.c_sub_content_history section.tl .tl-year__label.active::before{  content: "";                 /* 필수! 비워두면 아무것도 안 나옴 */
  position: absolute;
  left: -30px;                 /* 리스트 왼쪽으로 이동 */
  top: 35px;                   /* 세로 정렬 맞추기 */
  width: 8px;                  /* 동그라미 크기 */
  height: 8px;
  background-color: #F3F3F8;   /* 색상 (노란색) */
  border-radius: 50%;  }
.c_sub_content.c_sub_content_history section.tl .tl-year__label.active::before{background-color: #FFC421;}
.c_sub_content.c_sub_content_history section.tl .tl-year ul.tl-list{width: 90%;padding: 25px 0;}
.c_sub_content.c_sub_content_history section.tl .tl-year ul.tl-list li.tl-item{width: 100%;line-height: 25px;margin-bottom: 1em;}
.c_sub_content.c_sub_content_history section.tl .tl-year ul.tl-list li.tl-item:last-child{margin-bottom: 0;}
.c_sub_content.c_sub_content_history section.tl .tl-year ul.tl-list li.tl-item:after{content: '';display: block;clear: both;;}
.c_sub_content.c_sub_content_history section.tl .tl-year ul.tl-list li.tl-item .tl-date{float: left;width: 9%;font-weight: 600;margin-right: 1%;}
.c_sub_content.c_sub_content_history section.tl .tl-year ul.tl-list li.tl-item .tl-desc{float: left;width: 90%;}

/*vision*/
.c_sub_contents_intro_wrap{}
.c_sub_contents_intro_wrap .c_contents_intro_title > h4{font-size: 32px;line-height: 40px;font-family: 'Pretendard_EB';text-align: center;margin: 1em 0;} 
.c_sub_contents_intro_wrap .c_contents_intro_para{}
.c_sub_contents_intro_wrap .c_contents_intro_para p{font-size: 18px;line-height: 26px;text-align: center;margin-top: -.5em;}
.c_sub_contents_intro_wrap .c_contents_intro_para > p:first-child{margin-bottom: 1em;font-family: 'Pretendard_SB';}
.c_sub_contents_intro_wrap .c_contents_intro_para > p:last-child{font-family: 'Pretendard_M';}

/* ===== Variables ===== */
:root{
  --bg: #fff9ef;        /* 전체 배경(아이보리) */
  --text: #111315;
  --muted: #7a808c;
  --yellow: #f4c109;    /* 노란색(원/라인/배지) */
  --line: 1px;          /* 십자 라인 두께 */
  --core: 250px;        /* 중앙 원 크기 */
  --maxw: 1200px;
}

/* ===== Base ===== */
*{box-sizing:border-box}
.mgoal{background:var(--bg); padding:64px 20px;margin-top: 90px;}
.mgoal-head{max-width:var(--maxw); margin:0 auto 40px; text-align:center;}
.mgoal-head h2{font-size: 32px;height: 40px;margin-bottom: 1em;font-family: 'Pretendard_B';}
.mgoal-head .sub{font-size: 18px;line-height: 26px;font-family: 'Pretendard_R';margin-bottom: 2em;;}

/* ===== Diagram wrap ===== */
.mgoal-diagram{
  position:relative;
  max-width:var(--maxw);
  min-height:550px;          /* 캔버스 높이 */
  margin:0 auto;
}

/* 십자 라인 */
.mgoal-diagram::before,
.mgoal-diagram::after{
  content:"";
  position:absolute;
  left:50%; top:50%;
  transform:translate(-50%,-50%);
  background:var(--yellow);
  opacity:.75;
}
.mgoal-diagram::before{ /* 가로 */
  width:70%;
  height:1px;
}
.mgoal-diagram::after{  /* 세로 */
  width:1px;
  height:70%;
}

/* ===== 중앙 원 & 로고 ===== */
.core{
  position:absolute;
  left:50%; top:50%;
  width:var(--core); height:var(--core);
  transform:translate(-50%,-50%);
  background:var(--yellow);
  border-radius:50%;
  display:grid;
  place-items:center;
  z-index: 100;
}
.core>.logo{
  display:flex; align-items:center; gap:6px;
  font-weight:800; letter-spacing:.3px;
  font-size:40px;width: auto !important;
}
.core>.logo>img{width: 50%;position: relative;left: 25%;}
.logo-word{padding:4px 6px;}
.logo-badge{
  padding:4px 10px 6px;
  border:1px solid #111; border-radius:6px;
  background:#ffd545;  /* 노란 배경 살짝 더 밝게 */
}
.logo-r{font-size:18px; vertical-align:top; margin-left:2px}

/* ===== Goal cards (number + title + sub) ===== */
.card{
  position:absolute;
  width:320px;
  max-width:32vw;
  color:var(--text);
}
.card .badge{
  display:inline-block;
  font-weight:700;
  font-size:12px;
  line-height:1;
  padding:6px 8px;
  background:#ffe9a6;
  color:#835700;
  margin-bottom:10px;
}
.card h3{
  font-family: 'Pretendard_SB';
  margin:0 0 6px;
  font-size:20px;
  line-height:1.25;
}
.card p{
  margin:0; color:var(--muted);
}

/* 사분면 위치 */
.q1{ /* 좌상단 */
  right:56%;
  bottom:68%;
  text-align:left;
}
.q2{ /* 우상단 */
  left:56%;
  bottom:68%;
  text-align:right;
}
.q3{ /* 좌하단 */
  right:56%;
  top:68%;
  text-align:left;
}
.q4{ /* 우하단 */
  left:56%;
  top:68%;
  text-align:right;
}

/* ===== Responsive ===== */
@media (max-width: 1020px){
  :root{ --core: 280px; }
  .mgoal-diagram::before{ width:80% }
  .mgoal-diagram::after{ height:80% }
}

@media (max-width: 820px){
  :root{ --core: 240px; }
  .card{ width:300px; max-width:42vw; }
}

/* 모바일: 세로 스택 */
@media (max-width: 640px){
  .mgoal-head h2{font-size:26px}
  .mgoal-diagram{
    min-height: auto;
    padding: 12px 0 8px;
  }
  .mgoal-diagram::before,
  .mgoal-diagram::after{ display:none; } /* 라인 숨김 */
  .core{
    position:static; margin:0 auto 28px; transform:none;
    width:200px; height:200px;
  }
  .card{
    position:static; width:auto; max-width:none;
    text-align:left; margin:24px 0;
  }
}


/* ===== Variables (필요시 여기만 수정) ===== */
:root{
  --padX: 28px;

  --yellow: #f9bf1c;      /* 메인 노란색 */
  --yellow-soft: #ffe08a; /* 배지/강조용(필요시) */
  --ink: #121417;         /* 본문 글색 */
  --muted: #6c7380;       /* 보조 글색 */
  --lavender: #f3f3fa;    /* 가운데 원 배경(아주 옅은 보라) */
  --rule: #dfe4ec;        /* 가는 구분선 */
  --guide: #d7b03b;       /* 가이드 라인(노란 계열) */

  --circle: 250px;        /* 원 지름 */
  --overlap: 15px;       /* 원 겹치는 정도 (왼쪽 -> 오른쪽) */
}

/* ===== Layout ===== */

.about-circles{padding:60px var(--padX);margin: 5em 0 3em 0;}

.ac-wrap{
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 36px;
  align-items: center;
  position: relative;
}

/* 왼쪽 텍스트 */
.ac-text h2{
  margin: 0 0 18px;
  font-size: 32px;
  line-height: 40px;
  font-weight: 700;
  font-family: 'Pretendard_B';
}
.ac-rule{
    border: 0;
    height: 1px;
    background: #D2D3D9;
    position: relative;
    width: 105%;
    display: block;
    margin: 3em 0;
}
.ac-text p{
  margin: 0;
  color: var(--muted);
  font-size: 16px;line-height: 24px;
  font-family: 'Pretendard_R';
}
/* 오른쪽 다이어그램 영역 */
.ac-diagram{
  position: relative;
  min-height: calc(var(--circle) + 40px);
}
/* 원 공통 */
.ac-circle{
  position:absolute;
  top: 50%;
  width: var(--circle);
  height: var(--circle);
  border-radius: 50%;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  text-align: center;
  padding: 22px;
}

/* 각 원의 배치 (왼쪽 → 가운데 → 오른쪽) */
.ac-c1{              /* 왼쪽: 노란색 꽉 채움 */
  left: 0;
  background: var(--yellow);
}
.ac-c2{              /* 가운데: 옅은 배경 */
  left: calc(var(--circle) - var(--overlap));
  background: var(--lavender);
}
.ac-c3{              /* 오른쪽: 외곽선만 */
  left: calc(2 * (var(--circle) - var(--overlap)));
  background: #fff;
  border: 2px solid var(--yellow);
}

/* 라벨(텍스트) */
.ac-label{
  font-weight: 800;
  font-size: 22px;
  line-height: 1.25;
  color: var(--ink);
}
.ac-label--light{ color: #fff; }              /* 노란 원 위 흰 글씨 */
.ac-label--accent{ color: var(--yellow); }    /* 외곽선 원 안 노란 글씨 */

/* ===== Responsive ===== */
@media (max-width: 1100px){
  :root{ --circle: 280px; --overlap: 160px; }
  .ac-text h2{ font-size: 34px; }
}
@media (max-width: 920px){
  :root{ --circle: 240px; --overlap: 140px; }
  .ac-wrap{ grid-template-columns: 1fr; }
  .ac-diagram{ margin-top: 12px; }
}
@media (max-width: 600px){
  :root{ --circle: 210px; --overlap: 120px; }
  .ac-text h2{ font-size: 28px; }
  .ac-label{ font-size: 18px; }
}



/*serving Countries*/
:root{
  --ink:#111318;         /* 본문 */
  --muted:#737b89;       /* 보조 텍스트 */
  --line:#e8edf3;        /* 얇은 라인 */
  --yellow:#f4c109;      /* 메인 포인트 */
  --maxw:1200px;
}

*{box-sizing:border-box}

.global-reach{padding:48px 20px 56px}
.gr-top{
  max-width:var(--maxw);
  margin:0 auto 28px;
  display:grid;
  grid-template-columns: 520px 1fr; /* 좌/우 */
  gap: 24px;
  align-items:start;
}

/* 좌측 블록 */
.brand{margin-bottom:12px}
.logo{display:inline-flex; align-items:center; gap:6px; font-weight:800; letter-spacing:.2px}
.logo .w1{background:#ffd64c; padding:4px 8px; border-radius:6px 0 0 6px}
.logo .w2{background:#ffd64c; padding:4px 10px; border:2px solid #111; border-radius:0 6px 6px 0}
.logo .r{margin-left:2px; font-size:14px; vertical-align:top}
.tagline{margin-top:6px; font-size:14px; color:var(--muted)}

.metrics{display:flex; gap:40px; margin:18px 0 16px}
.metric .val{font-size:44px; font-weight:900; color:#ffb400} /* 900+, 131+ 색감 */
.metric .label{font-size:13px; color:var(--muted)}

.lede{margin:12px 0 0; max-width:520px}

/* 우측 지구 그래픽 */
.gr-right{position:relative; min-height:360px}
.globe{width:100%; height:auto; display:block; opacity:.95}

/* 하단 국가 목록 */
.country-grid{
  display:flex;
  flex-wrap:wrap;              /* 칼럼 수가 많아지면 자동 줄바꿈 */
  column-gap:36px;
  gap:14px 36px;
}

.country-col{
  list-style:none;
  margin:0;
  padding:0;
  min-width:110px;             /* 칼럼 폭 */
}

.country-col li{
  font-size: 12px;
  line-height:20px;
  color:#6c7685;               /* 예시 색상 */
  white-space:nowrap;
}

.gr-list{margin-top: -150px;
  display:grid;
  max-width:var(--maxw);margin: 0 auto;margin-top: -240px;}
.gr-list ul.countries{padding-top: 4em;border-top: 1px solid #D2D3D9;margin-top: 10em;}

/* 반응형: 화면 좁을 때 칼럼 폭 줄이기 */
@media (max-width:1200px){ .country-col{min-width:160px;} }
@media (max-width:900px) { .country-col{min-width:140px;} }
@media (max-width:640px) { .country-col{min-width:120px;} }


/*certificate*/

#gw-sub-head-menu-container{display: none;}


/*location*/
.offices { max-width:1200px; margin:0 auto; padding:16px; }

/* Tabs */
.office-tabs { display:flex;justify-content:center; margin:10px 0 24px; }
.office-tabs label{
  min-width:220px; text-align:center;
  padding:12px 16px; border:1px solid #e5e9f0;
  background:#fff; color:#959eab; font-weight:600; cursor:pointer;
  transition:.15s;
}
#tab-hq:checked    ~ .office-tabs label[for="tab-hq"],
#tab-seoul:checked ~ .office-tabs label[for="tab-seoul"]{
  background:#ffc325; color:#1c2331; border-color:#ffc325;
}

/* Panels */
.office-panel{ display:none; }
#tab-hq:checked    ~ #panel-hq{ display:block; }
#tab-seoul:checked ~ #panel-seoul{ display:block; }

.office_map_wrap{margin-top: 5em;margin-bottom: 1.5em;}
.office-title{ font-size:28px; font-weight:800; color:#1f2a39; margin:0 0 12px; width: 30%;font-family: 'Pretendard_B';}
.office-meta{ margin-bottom:16px; width: 70%;}
.office-address{ margin:0 0 8px; color:#2d3a4a; line-height:1.6; }
.office-contacts{ display:flex; flex-wrap:wrap; gap:14px 22px; list-style:none; margin:0; padding:0; color:#6c7685; font-weight:500; }
.office-contacts b{ margin-right:6px; color:#2d3a4a; }

.office-map{
  width:100%; height:420px;
  background:#f5f7fa; border:1px solid #e5e9f0; border-radius:6px;
  margin-bottom: 5em;
}

@media (max-width:768px){
  .office-tabs label{ min-width:160px; }
  .office-map{ height:320px; }
}




/*breadcrumbs detail*/
.breadcrumb-container > li > a{padding-right: 1em;border-right: 1px solid #c5c5c573;height: 1.7em;margin: 1.2em 0 1em 0;;}
.breadcrumb-container > li:last-child > a{border: none;}

.breadcrumb-container > li > a > i.xi-home{font-size: 1.5em;    padding-top: 0.2em;}

/*mobile _ ceo*/
@media (max-width:768px){
.c_sub_contents_wrapper .c_sub_title{display: none;}
.breadcrumb-container-wrap{display: none;}
.c_sub_contents_wrapper{min-width: 100%;text-align: center;padding-top: 4em;}
.c_sub_contents_intro_wrap .c_contents_intro_title > h4 {padding-bottom: 2em;}
.c_sub_contents_wrapper .c_sub_content .c_sub_cont_l > h3{margin-right: 0;}
}

/*mobile _ history*/
@media (max-width:768px){
.c_sub_content.c_sub_content_history section.tl .tl-year.active::before{display: none;}
.c_sub_content.c_sub_content_history section.tl .tl-year .tl-year__label::before, 
.c_sub_content.c_sub_content_history section.tl .tl-year .tl-year__label::after{display: none;}
#gw-sub-head-container.on .gw-sub-theme-title{text-align: center;}
.c_sub_content.c_sub_content_history .c_sub_cont_l > h3{font-size: 36px;}
.c_sub_content.c_sub_content_history section.tl .tl-year ul.tl-list{width: 100%;}
.c_sub_content.c_sub_content_history section.tl .tl-year ul.tl-list li.tl-item .tl-date{width: 100%;margin: 0;}
.c_sub_content.c_sub_content_history section.tl .tl-year ul.tl-list li.tl-item .tl-desc{width: 100%;}
}
@media (max-width:1300px){
.c_sub_content.c_sub_content_history section.tl .tl-year .tl-year__label{width: 100%;}
.c_sub_cont.c_sub_cont_l{width: 100% !important;margin: 0 auto;margin-right: 0 !important;margin-left: 0 !important;padding: 0 3em 3em 3em;}
.c_sub_cont.c_sub_cont_r{width: 100% !important;margin: 0 auto;margin-right: 0 !important;margin-left: 0 !important;padding: 0 3em 3em 3em;min-width: 100% !important;}
}

/*mobile_vision*/

@media (max-width:1024px){
.c_sub_contents_intro_wrap .c_contents_intro_para{padding: 0 2em;}
.c_sub_contents_intro_wrap .c_contents_intro_para_esg{padding-top: 4em;}
article.card{text-align: center;}
.ac-circle {left: 0;width: 40%;   height: 70%;    border-radius: 50%;    transform: translateY(-70%);}
.ac-circle.ac-c2{left: 33%;}
.ac-circle.ac-c3{left: 66%;}
.ac-label {        font-size: 12px;}
section.about-circles{margin-bottom: 0;padding-bottom: 0;}
}


/*mobile_servingCountries*/

@media (max-width:768px){
.gr-list ul.countries{border-top: none;margin-top: 3em !important;}
.gr-right{display: none;}
.gr-list {margin-top: 0;}
.gr-top {display: block;}
}

@media (max-width:1024px){
.gr-list ul.countries{margin-top: 10em;}
}


/*mobile_boards*/

@media (max-width:768px){
  #gw-bo-list .gallery .gall_img {height: 107vw;}
	#gw-bo-list .gallery .gall_img > a > img{height: 107vw !important;}
}
/*mobile_boards*/

@media (max-width:768px){
.office-title {width: 100%;}
.office-meta {width: 100%;}
.office-contacts {display: block;}
}


#gw-bo-list .btn_bo_user{margin-top: 3em;}


/* 처음엔 살짝 아래 + 투명 */
.fade-seq{
    opacity: 0;
    transform: translateY(80px);
    transition: opacity 1s ease-out, transform 1s ease-out;
}

/* 보여줄 때 */
.fade-seq.is-show{
    opacity: 1;
    transform: translateY(0);
}



/*featuredProducts*/
/* ===== Featured Products Simple Style ===== */
.fp-wrap{max-width:1200px;margin:0 auto;padding:60px 20px;}
.fp-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:24px;}
.fp-title{font-size:28px;font-weight:800;letter-spacing:-0.02em;}
.fp-desc{color:rgba(0,0,0,0.6);font-size:14px;margin-top:6px;line-height:1.4;}

.fp-grid{display:grid;grid-template-columns:repeat(4, 1fr);gap:18px;}
.fp-col{border:1px solid rgba(0,0,0,0.08);border-radius:14px;overflow:hidden;background:#fff;}
.fp-col-head{padding:16px 16px 12px;border-bottom:1px solid rgba(0,0,0,0.06);display:flex;align-items:center;justify-content:space-between;gap:10px;}
.fp-cat{font-size:16px;font-weight:800;}
.fp-more{font-size:13px;text-decoration:none;color:rgba(0,0,0,0.65);}
.fp-more:hover{color:#000;text-decoration:underline;}

.fp-list{list-style:none;margin:0;padding:10px;}
.fp-item{margin:0;}
.fp-link{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px;border-radius:12px;text-decoration:none;border:1px solid rgba(0,0,0,0.06);transition:all .2s;}
.fp-link:hover{transform:translateY(-1px);border-color:rgba(0,0,0,0.18);}
.fp-name{font-size:14px;font-weight:700;line-height:1.25;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.fp-meta{font-size:12px;color:rgba(0,0,0,0.5);white-space:nowrap;}

.fp-empty{padding:14px;color:rgba(0,0,0,0.5);font-size:13px;}

@media (max-width:1024px){
  .fp-grid{grid-template-columns:repeat(2, 1fr);}
}
@media (max-width:520px){
  .fp-grid{grid-template-columns:1fr;}
  .fp-wrap{padding:40px 16px;}
}

/* thumbnail add */
.fp-link{
  gap:12px;
  justify-content:flex-start; /* 썸네일 왼쪽 + 텍스트 오른쪽 */
}

.fp-thumb{
  width:52px;
  height:52px;
  border-radius:12px;
  overflow:hidden;
  flex:0 0 52px;
  border:1px solid rgba(0,0,0,0.06);
  background:rgba(0,0,0,0.03);
}

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

.fp-text{
  display:flex;
  flex-direction:column;
  gap:6px;
  min-width:0; /* 줄임표 깨짐 방지 */
}

.fp-meta{
  white-space:nowrap;
}


/* ===== Featured Product Card ===== */
.fp-list{
  grid-template-columns: repeat(2, 1fr); /* 한 카테고리당 2 x 2 = 4개 */
  gap:14px;
}

.fp-card{
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:12px;
  border:1px solid rgba(0,0,0,0.08);
  border-radius:14px;
  text-decoration:none;
  transition:all .25s ease;
}

.fp-card:hover{
  transform:translateY(-2px);
  border-color:#FFC421;
}




/* 제품명 */
.fp-card .fp-name{
  font-size:14px;
  font-weight:700;
  line-height:1.3;
  color:#111;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  text-align:center;
}

/* 썸네일 wrapper를 정사각형으로 강제 (aspect-ratio 대신 padding-top) */
.fp-card .fp-thumb{
  position: relative;
  width: 100%;
  display: block;          /* span이면 꼭 필요 */
  overflow: hidden;
  border-radius: 16px;
  background: #f2f2f2;

  /* 전역/기존 영향 제거 */
  height: auto !important;
  padding: 0 !important;
}

/* 정사각형 높이 확보 */
.fp-card .fp-thumb::before{
  content: "";
  display: block;
  padding-top: 100%;       /* ✅ 1:1 */
}

/* 이미지는 wrapper를 꽉 채우기 */
.fp-card .fp-thumb img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100% !important; /* 전역 img height:auto 덮기 */
  object-fit: cover;
  object-position: center;
  display: block;
}

.fp-thumb{ position:relative; width:100%; }
.fp-thumb::before{ content:""; display:block; padding-top:100%; }
.fp-thumb img{
  position:absolute; inset:0;
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  display:block;
}

/* 카드 자체는 column */
.fp-card{
  display:flex;
  flex-direction:column;
}

/* 썸네일 wrapper: 정사각형 강제 */
.fp-card .fp-thumb{
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: 16px;
  background: #f2f2f2;

  /* 중요: flex 영향 제거 */
  flex: none;
}

/* 정사각형 높이 확보 */
.fp-card .fp-thumb::before{
  content:"";
  display:block;
  padding-top:100%;   /* ✅ 1:1 */
}

/* 이미지가 wrapper를 꽉 채우도록 */
.fp-card .fp-thumb img{
  position:absolute;
  inset:0;
  width:100%;
  height:100% !important;
  object-fit:cover;
  display:block;
}

.fp-search{
  margin-top: 12px;
  display:flex;
  justify-content:flex-end;
}

.fp-search form{
  display:flex;
  gap:8px;
  align-items:center;
}

.fp-search input{
  width: 350px;
  max-width: 60vw;
  height: 40px;
  padding: 0 30px;
  border: 1px solid rgba(0,0,0,0.15);
  border-radius: 12px;
  outline: none;
}

.fp-search button{
  height: 40px;
  padding: 0 14px;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,0.15);
  background: #fff;
  cursor: pointer;
}

.fp-search button:hover{
  border-color:#000;
}

.fp-search-clear{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  text-decoration:none;
  border:1px solid rgba(0,0,0,0.12);
  color:#111;
  font-size: 18px;
  line-height: 1;
}

.fp-search-clear:hover{
  border-color:#000;
}

/* ===== Featured search polish ===== */
.fp-head{
  align-items: center;
}

.fp-search{
  margin-top: 0;
  margin-left: auto;
  display:flex;
  justify-content:flex-end;
}

.fp-search form{
  position: relative;
  display:flex;
  align-items:center;
  gap:10px;
}

/* input */
.fp-search input{
  width: 350px !important;
  max-width: 62vw;
  height: 44px;
  padding: 0 24px 0 44px !important;                 /* 왼쪽 아이콘 + 오른쪽 X 공간 */
  border: 1px solid rgba(0,0,0,0.10);
  border-radius: 14px;
  background: rgba(255,255,255,0.95);
  outline: none;
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.fp-search input:focus{
  border-color: rgba(0,0,0,0.28);
  box-shadow: 0 10px 28px rgba(0,0,0,0.08);
  transform: translateY(-1px);
}


/* 버튼 */
.fp-search button{
  height: 55px;
  padding: 0 20px;
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,0.10);
  background: #fff;
  cursor: pointer;
  font-size: 13px;
  font-weight: 700;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.fp-search button:hover{
  border-color: rgba(0,0,0,0.22);
  box-shadow: 0 10px 24px rgba(0,0,0,0.08);
  transform: translateY(-1px);
}

/* X(클리어) 버튼: input 안쪽 우측에 겹치기 */
.fp-search-clear{
  position:absolute;
  right: 110px;                           /* 버튼이 있을 때 기준 (Search 버튼 폭 감안) */
  width: 30px;
  height: 30px;
  border-radius: 10px;
  border: 1px solid rgba(0,0,0,0.10);
  background: rgba(255,255,255,0.92);
  display:flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  color: rgba(0,0,0,0.65);
  font-size: 18px;
  line-height: 1;
  transition: transform .2s ease, border-color .2s ease, opacity .2s ease;
}

.fp-search-clear:hover{
  border-color: rgba(0,0,0,0.22);
  transform: translateY(-1px);
  color: rgba(0,0,0,0.85);
}

/* 반응형 */
@media (max-width: 520px){
  .fp-search{
    width:100%;
    margin-top: 14px;
    justify-content:flex-start;
  }
  .fp-search input{
    width: 100%;
    max-width: none;
  }
  .fp-search-clear{
    right: 92px; /* 모바일에서 버튼 폭이 줄어드는 경우 보정 */
  }
}



/* =============================
   ESG Page (Hard-coded)
   ============================= */
:root{
  --esg-max: 1200px;
  --esg-pad: 24px;
  --esg-radius: 18px;

  --c-text: #0c1220;
  --c-sub: #4b5563;
  --c-line: rgba(15, 23, 42, .10);

  --c-e: #56a83a;   /* E */
  --c-s: #d48b1f;   /* S */
  --c-g: #2d6da7;   /* G */

  --bg-soft: #f7f7fb;
  --bg-warm: #fbf4ea;
  --shadow: 0 12px 30px rgba(0,0,0,.08);
}

/* 페이지 래퍼 */
.esg-wrap{
  color: var(--c-text);
  background: #fff;
}
.esg-inner{
  max-width: var(--esg-max);
  margin: 0 auto;
  padding: 0 var(--esg-pad);
}

/* 섹션 공통 */
.esg-section{
  padding: 84px 0;
}
.esg-section--soft{ background: #fff;  margin-top: 11em;}
.esg-section--warm{ background: var(--bg-warm);}
.esg-section--gray{padding-top: 0;}

.esg-h1{
  font-size: clamp(30px, 4vw, 44px);
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 0 0 10px;
  text-align: center;
}
.esg-lead{
  max-width: 860px;
  margin: 0 auto;
  color: var(--c-sub);
  text-align: center;
  font-size: clamp(14px, 1.6vw, 16px);
  line-height: 1.7;
}

/* 상단 다이어그램 영역 */
.esg-diagram{
  margin-top: 42px;
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 34px;
  align-items: center;
}
.esg-diagram__visual{
  position: relative;
  border-radius: var(--esg-radius);
  background: #fff;
  box-shadow: var(--shadow);
  padding: 28px;
  overflow: hidden;
}
.esg-diagram__note{
  display: grid;
  gap: 16px;
}

/* E/S/G 원형 3개 */
.esg-bubbles{
  position: relative;
  width: min(520px, 100%);
  aspect-ratio: 1 / 1;
  margin: 0 auto;
}
.esg-bubble{
  position: absolute;
  width: 62%;
  aspect-ratio: 1/1;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
  box-shadow: 0 14px 26px rgba(0,0,0,.12);
}
.esg-bubble--e{ background: var(--c-e); top: 0; left: 19%; }
.esg-bubble--s{ background: var(--c-s); bottom: 0; left: 0; }
.esg-bubble--g{ background: var(--c-g); bottom: 0; right: 0; }

.esg-bubble__badge{
  position: absolute;
  top: 12px;
  left: 12px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255,255,255,.18);
  display: grid;
  place-items: center;
  font-weight: 800;
  letter-spacing: .02em;
}

.esg-bubble__icon{
  width: 70px;
  height: 70px;
  opacity: .95;
}
.esg-bubble__title{
  margin-top: 10px;
  font-weight: 800;
  font-size: 16px;
  letter-spacing: .01em;
}

.esg-pill{
  display: grid;
  gap: 6px;
  padding: 18px 18px;
  border: 1px solid var(--c-line);
  border-radius: 14px;
  background: #fff;
}
.esg-pill__kicker{
  font-weight: 800;
  font-size: 13px;
  letter-spacing: .02em;
}
.esg-pill__text{
  margin: 0;
  color: var(--c-sub);
  font-size: 14px;
  line-height: 1.7;
}

/* 섹션 타이틀 */
.esg-title{
  text-align: center;
  margin: 0 0 8px;
  font-size: clamp(22px, 3vw, 30px);
  letter-spacing: -0.02em;
  font-family: 'Pretendard_B';
  font-weight: 700;
}
.esg-subtitle{
  text-align: center;
  margin: 0 auto 34px;
  max-width: 760px;
  color: var(--c-sub);
  line-height: 1.7;
  font-size: 14px;
  font-family: 'Pretendard_R';
}

.esg-wrap{
  counter-reset: esg_env 0 esg_soc 0 esg_gov 0;
  width: 100%;margin: 0 auto;min-width: 1600px;
}
/* 카드 그리드 */
.esg-cards{
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(4, 1fr);
}
.esg-card{
  background: #fff;
  border: 1px solid var(--c-line);
  padding: 18px 40px 16px;
  box-shadow: 0 10px 18px rgba(0,0,0,.06);
  min-height: 132px;
  position: relative;
  overflow: visible;
}
.esg-cards-env .esg-card{}
.esg-cards-env .esg-card::before{
  counter-increment: esg_env;
  content: "0" counter(esg_env);
  background-color: #65AB2F;
}
.esg-cards-soc .esg-card::before{
  counter-increment: esg_soc;
  content: "0" counter(esg_soc);
  background-color: #DE9014;
}
.esg-cards-gov .esg-card::before{
  counter-increment: esg_gov;
  content: "0" counter(esg_gov);
  background-color: #3272B0;
}
.esg-card:before{
  position:absolute;
  inset: 0;
  background: radial-gradient(800px 220px at 20% -10%, rgba(0,0,0,.04), transparent 60%);
  pointer-events:none;
  margin-top: 20px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 12px;
  color: #fff;    
  position: absolute;
  left: calc(50% - 17px);
  top: -34px;
}
.esg-num:before{
  font-family: 'Pretendard_BL';font-size: 4em;position: absolute;width: 100%;height: 100%;font-weight: 900;left: .3em;
}

.esg-cards-env .esg-num:before{
  content: "F";
  color: #65ab2f34;
}
.esg-cards-soc .esg-num:before{
  content: "S";
  color: #de911421;
}
.esg-cards-gov .esg-num:before{
  content: "G";
  color: #3271b02a;
}

.esg-card p{
  margin: 12px 0 0;
  color: var(--c-sub);
  line-height: 1.65;
  font-size: 13.5px;
  text-align: center;
}

/* Commitment 섹션 */
.esg-commit{
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 34px;
  align-items: center;
}
.esg-commit:before{
    /* padding: 5em; */
    position: absolute;
    border: 1px solid #D2D3D9;
    content: "";
    border-radius: 310px;
    width: 200%;
    height: 500px;
    min-height: 80%;
    z-index: 2;
    left: -120%;
  }
.esg-commit__box{
  background: #fff;
  border-radius: 22px;
  padding: 28px;
}
.esg-commit__h{
  margin: 0 0 20px;
  font-size: 22px;
  letter-spacing: -0.02em;
  font-family: 'Pretendard_B';
}
.esg-commit__p{
  margin: 0;
  color: var(--c-sub);
  line-height: 1.75;
  font-size: 14px;
}

/* 원형 이미지(배경으로 처리) */
.esg-commit__circle{
  width: min(600px, 90%);
  aspect-ratio: 1/1;
  margin: 0 auto;
  border-radius: 50%;
  background: #dbeafe; /* placeholder */
  box-shadow: 0 14px 26px rgba(0, 0, 0, 0.082);
  border: 2px solid #D2D3D9;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  background-image: url('/img/custom/img_esg_00.jpg');;
  z-index: 6;
}

/* =============================
   Scroll Transitions
   ============================= */
.reveal{
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .75s ease, transform .75s ease;
  will-change: opacity, transform;
}
.reveal.is-in{
  opacity: 1;
  transform: translateY(0);
}

/* 스태거 */
.stagger > *{
  opacity: 0;
  transform: translateY(14px);
}
.stagger.is-in > *{
  opacity: 1;
  transform: translateY(0);
  transition: opacity .7s ease, transform .7s ease;
}
.stagger.is-in > *:nth-child(1){ transition-delay: .05s; }
.stagger.is-in > *:nth-child(2){ transition-delay: .12s; }
.stagger.is-in > *:nth-child(3){ transition-delay: .19s; }
.stagger.is-in > *:nth-child(4){ transition-delay: .26s; }
.stagger.is-in > *:nth-child(5){ transition-delay: .33s; }
.stagger.is-in > *:nth-child(6){ transition-delay: .40s; }

/* =============================
   RWD
   ============================= */
@media (max-width: 520px){
  .esg-wrap{min-width: 100%;width: 100%;;}
  .esg-diagram{ grid-template-columns: 1fr; }
  .esg-commit{ grid-template-columns: 1fr; }
  .esg-section{ padding: 64px 0; }
  .esg-cards{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px){
  .esg-inner{ padding: 0 16px; }
  .esg-diagram__visual{ padding: 18px; }
  .esg-cards{ grid-template-columns: 1fr !important; }
  .esg-bubbles{ width: min(420px, 100%); }
  .esg-bubble__icon{ width: 58px; height: 58px; }
}
.esg-visual-wrap{
  position:relative;
  max-width:1000px;
  margin:80px auto 0;
  aspect-ratio:1/1;
}


/* ===== 전체 래퍼 ===== */
.esg-block{
  padding: 300px 20px 80px 20px;
  background:#fff;
}

.esg-inner{
  position: relative;
  max-width: 80%;
  margin: 0 auto;
  padding: 3em 0;
}
.esg-inner-diagram{
  width: 80%;
}


/* ===== 다이어그램 영역 ===== */
.esg-diagram{
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none; /* 텍스트박스 클릭 방해 방지 */
}

.esg-cluster{
  position: relative;
  width: min(520px, 46vw);
  aspect-ratio: 1 / 1;
}

/* ===== 원(노드) ===== */
.esg-node{
  --size: 320px;
  --ring: 16px;

  position:absolute;
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  border: var(--ring) solid #fff;
  box-sizing: border-box;

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

.esg-node.is-e{ background:#66b12d; top: 0%; left: 50%; transform: translateX(-50%); z-index: 3; }
.esg-node.is-s{ background:#e39a1a; bottom: -5%; left: -5%; z-index: 1; }
.esg-node.is-g{ background:#2f6fb4; bottom: -5%; right: -5%; z-index: 2; }

/* 아이콘 자리 */
.esg-icon{
  width: 38%;
  aspect-ratio: 1 / 1;   /* 정사각형 아이콘 유지 */
  display:flex;
  align-items:center;
  justify-content:center;
}

.esg-icon svg{
  width:90%;
  height:90%;
  display:block;
}
/* 뱃지 */
.esg-badge{
  --bsize: 90px;

  position:absolute;
  width: var(--bsize);
  height: var(--bsize);
  border-radius: 50%;
  background:#fff;
  border: 7px solid #fff;
  box-shadow: 0 10px 30px rgba(0,0,0,.12);

  display:flex;
  align-items:center;
  justify-content:center;
}
.esg-badge span{
  font-weight: 800;
  font-size: 26px;
  line-height: 1;
  color: #fff;
}
.esg-node.is-e .esg-badge{ top: -40px; left: 50%; transform: translateX(-50%); }
.esg-node.is-s .esg-badge{ left: -40px; top: 50%; transform: translateY(-50%); }
.esg-node.is-g .esg-badge{ right: -40px; top: 50%; transform: translateY(-50%); }

.esg-node.is-e .esg-badge{ background:#66b12d; }
.esg-node.is-s .esg-badge{ background:#e39a1a; }
.esg-node.is-g .esg-badge{ background:#2f6fb4; }

/* ===== 플로팅 텍스트 박스 ===== */
.esg-float{
  position: absolute;
  max-width: 360px;
  background: transparent; /* 이미지처럼 배경 없는 느낌 */
  pointer-events: auto;
}

.esg-float__title{
  margin: 0 0 8px;
  font-size: 22px;
  letter-spacing: -0.02em;
  font-family: 'Pretendard_SB';
}

.esg-float__desc{
  margin: 0;
  color: #7a7f8a;
  font-size: 15px;
  line-height: 1.7;
}

/* 제목 색상 */
.esg-float__title.is-e{ color:#66b12d; }
.esg-float__title.is-s{ color:#e39a1a; }
.esg-float__title.is-g{ color:#2f6fb4; }

/* 데스크탑 배치 (이미지 느낌) */
.esg-float--e{
  top: -70%;
  left: 0;
}
.esg-float--s{
  bottom: -190%;
  left: 0;
}
.esg-float--g{
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  text-align: left;
}

/* ===== 반응형: 모바일에서는 다이어그램 아래로 스택 ===== */
@media (max-width: 1200px){
.c_sub_contents_wrapper {
    width: 100% ;
    min-width: 100%;
}
.esg-block{
  padding: 20px 20px 80px 20px;
  background:#fff;
}
  .esg-inner{
    min-height: auto;
    display: grid;
    grid-template-columns: 1fr;
    gap: 26px;
  }
  .esg-float {min-width: 250px;}
  .esg-diagram{
    position: relative;
    inset: auto;
    pointer-events: auto;
    width: 95%;
    margin: 0 auto;
  }

  .esg-cluster{
    width: min(100%, 80vw);
    aspect-ratio: 1 / 1;
  }
  .esg-section--soft{margin-top: -3em;}
  .esg-section--gray{padding-top: 0;}
  .esg-commit:before{border: none;}

  .esg-node{ --size: 47vw; --ring: 10px; }

  /* 플로팅을 일반 flow로 내려서 "다이어그램 아래 정렬" */
  .esg-float{
    position: relative;
    max-width: 90%;
    margin: 0 auto;
    padding: 0 2px;
    width: 90%;
    text-align: center;
    top: 0;
    left: 0;
    right: 0;
    margin-bottom: 1.5em;
  }
  .esg-float--g{
    transform: none;
    top: auto;
    right: auto;
    margin-bottom: 3em;
  }

  .esg-node.is-s {left: -14%;}
  .esg-node.is-g {right: -14%;}

}

/* 더 작은 화면에서 제목 크기 줄이기 */
@media (max-width: 520px){
  .esg-float__title{ font-size: 22px; }
  .esg-float__desc{ font-size: 14px; }
  .esg-diagram{width: 100%;  }
}


html, body, p, div, li, ul, h1, h2, h3{
  word-break: keep-all !important;
  overflow-wrap: break-word !important;
  word-wrap: break-word;
  line-break: strict;
  
}


/* 스크롤 임계점 넘었을 때: 메뉴 컬러/보더 */
#hd.is-scrolled{
  border-bottom: 1px solid #ddd;
  position: fixed;
  background-color: #fff;
}

/* gnb 1뎁스 링크 컬러 */
#hd.is-scrolled #gnb_1dul .gnb_1da{
  color: #000 !important;
}

#hd.is-scrolled .gnb-sns li a{color: #000;}
#hd.is-scrolled .xi-globus:before{color: #000;}