/* subtitle-seq1-3.css
   - 1280 x 410 Title Section (지속가능경영)
   - padding 140 top/bottom → 가운데 130px = dot 15 + title 96 + sub 19
*/

/* =========================
   Title Section (1280 x 410)
========================= */
.sub-title-section {
  width: 100%;
  background: #fff;
}

.sub-title-section__inner {
  width: 100%;
  max-width: 1280px;
  height: 410px;
  margin: 0 auto;
  box-sizing: border-box;
  padding: 140px 0;

  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
}

.sub-title-box {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* dot: 15px */
.page-point {
  position: static;
  width: 15px;
  height: 15px;
  display: block;
}

/* page-point 애니메이션: translate(-50%) 없이 Y축만 */
.page-point[data-enter="back"] {
  opacity: 0;
  transform: translateY(var(--pp-out-y)) scale(var(--pp-out-scale));
  will-change: transform, opacity;
  transition:
    transform var(--pp-dur) var(--pp-ease-back),
    opacity   var(--pp-dur) ease;
  transition-delay: 400ms;
}
.page-point[data-enter="back"].is-in {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* 지속가능경영: 96px */
.sub-title-text {
  display: flex;
  align-items: center;
  height: 96px;
  white-space: nowrap;
  line-height: 1;
}

/* =========================
   지속가능경영 콘텐츠 섹션 (1280 x 1860)
========================= */
.sub-em-section {
  width: 100%;
  background: var(--c-f);
}

.sub-em-section__inner {
  width: 100%;
  max-width: 1280px;
  height: 1860px;
  margin: 0 auto;
  box-sizing: border-box;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}

/* =========================
   2x1 그리드 (1280 x 880)
   padding 140 top/bottom → row 600px
   cols: 0.65fr | 1fr, gap 60
========================= */
.em-grid {
  width: 100%;
  height: 880px;
  box-sizing: border-box;
  padding: 140px 0;

  display: grid;
  grid-template-columns: 0.65fr 1fr;
  grid-template-rows: 600px;
  column-gap: 60px;
}

/* 좌측 이미지 영역(있으면) */
.em-grid__left{
  min-height: 1px;
}

/* 그리드 우측 열: 상단 왼쪽 시작 */
.em-grid__right {
  height: 600px;

  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
}

/* 우측 상단 콘텐츠 박스 (w: 열 전체, h: 94, gap: 10) */
.em-right-top {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 10px;

  border-bottom: 1px solid var(--c-g0);
  box-sizing: border-box;

  height: 94px;
  flex-shrink: 0;
}

.em-right-top__label {
  margin: 0;
  line-height: 20px; /* ✅ B6(14/20) 맞춤 */
}

.em-right-top__title {
  margin: 0;
}

/* =========================
   섹션 2 (1280 x 1299)
========================= */
.sub-em-section2 {
  width: 100%;
  background: var(--c-white);
}

.sub-em-section2__inner {
  width: 100%;
  max-width: 1280px;
  height: auto;
  margin: 0 auto;
  box-sizing: border-box;
  padding: 140px 0;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 80px;
}

/* 섹션2 상단 텍스트박스 (h: 159) */
.em2-top {
  width: 100%;
  height: 159px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 12px;
  border-bottom: 1px solid var(--c-g0);
  box-sizing: border-box;
}

.em2-title-box {
  width: 100%;
  max-width: 1280px;
  height: 127px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 16px;
  padding-bottom: 20px;
  box-sizing: border-box;
}



/* =========================
   섹션2 인증 그리드 (2x1, 행 350px, col: 244 | 1fr, gap 60)
========================= */
.em2-cert-grid {
  width: 100%;
  display: grid;
  grid-template-columns: 244px 1fr; /* ✅ 핵심: 좌측 244 고정 */
  grid-template-rows: 350px;
  column-gap: 60px;
}

.em2-cert-grid__left{
  width: 244px;
  height: 350px;
  box-sizing: border-box;

  background: #fff;              /* ✅ 가운데는 흰색 */
  border-radius: 30px 0 30px 0;

  /* ✅ 바깥 그림자 */
  box-shadow: 4px 4px 20px 0 rgba(0,0,0,0.10);
  overflow: hidden;

  display: flex;
  flex-direction: column;
  align-items: center;
}

/* 오른쪽 영역: padding + 1x2 그리드 */
.em2-cert-grid__right{
  height: 350px;              /* grid row 고정값과 동일 */
  box-sizing: border-box;
  padding: 50px 40px;         /* ✅ 상하 50 / 좌우 40 */

  /* ✅ 오른쪽 정보영역 스타일 */
  background: var(--c-f);                 /* 전체 배경 덮기 */
  border-radius: 30px 0 30px 0;           /* 좌상단/우하단 30 */
  box-shadow: 4px 4px 20px 0 rgba(0,0,0,0.10); /* 바깥 그림자 */

  display: grid;
  grid-template-rows: 0.5fr 1fr; /* ✅ 1행 0.5fr / 2행 1fr */
}

.em2-cert-right__row1{
  box-sizing: border-box;
  border-bottom: 1px solid var(--c-g0);

  display: flex;
  flex-direction: column;      /* ✅ 2줄 스택 */
  align-items: flex-start;     /* ✅ 왼쪽 정렬 */
  justify-content: flex-start; /* ✅ 위에서 시작 */
  gap: 0px;                    /* 줄 사이 간격(원하면 조절) */
}

/* p 기본 마진 제거 */
.em2-cert-right__title,
.em2-cert-right__sub{
  margin: 0;
}
.em2-cert-right__headline,
.em2-cert-right__body{
  margin: 0;
}

.em2-cert-right__row2{
  box-sizing: border-box;

  display: flex;
  flex-direction: column;  /* ✅ gap이 의미 있으려면 세로 스택 */
  align-items: flex-start; /* 좌측 */
  justify-content: flex-end; /* 아래 */

  gap: 12px;               /* ✅ row2 내부 요소 간격 */
}
/* ✅ 내부 높이 계산: 350 - (10*2) = 330
   label 60 고정이면 thumb는 270이 맞음 */
.em2-cert-thumb{
  width: 100%;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}
.em2-cert-img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 텍스트 영역 60px */
.em2-cert-label {
  width: 244px;
  height: 60px;
  flex-shrink: 0;
  gap: 10px;              /* ✅ 아이콘-텍스트 간격 */
  display: flex;
  align-items: center;
  justify-content: center;      /* ✅ "인증 상세보기" 가운데 */
  text-align: center;
  background: var(--c-f);
}
.em2-cert-glass{
  width: 20px;            /* 필요하면 조절 */
  height: 20px;
  display: block;
  object-fit: contain;
}

@media (min-width: 800px) and (max-width: 1279px){
  .sub-em-section2__inner{
    gap: 120px;
  }
  /* 2x1 → 1x2 (위=왼쪽카드 330, 아래=오른쪽정보 330) */
  .em2-cert-grid{
    grid-template-columns: 1fr;
    grid-template-rows: 330px 330px;
    row-gap: 24px;
    column-gap: 0;
  }

  /* 왼쪽 카드: 350 x 330, 왼쪽 정렬 */
  .em2-cert-grid__left{
    width: 350px;
    height: 330px;
    justify-self: start;
  }
  .em2-cert-img{
    width: 100%;
    height: 100%;
  }

  .em2-cert-label{
    width: 100%;
  }
  .em2-cert-grid__right{
    width: 100%;
    height: 330px;                   /* 유지 */
  }
}

@media (max-width: 799px){
  .sub-em-section2__inner{
    gap: 100px;
  }
  .em2-cert-label{
    height: 56px;
  }
   /* 2x1 → 1x2 (위=왼쪽카드 330, 아래=오른쪽정보 350) */
  .em2-cert-grid{
    grid-template-columns: 1fr;
    grid-template-rows: 330px 350px;
    row-gap: 16px;
    column-gap: 0;
  }

  /* 왼쪽 카드: 335 x 330, 가운데 정렬 */
  .em2-cert-grid__left{
    width: 335px;
    height: 330px;
    justify-self: center;
  }

  .em2-cert-img{
    width: 100%;
    height: 100%;
  }

  .em2-cert-label{
    width: 100%;
  }
  .em2-cert-grid__right{
    width: 335px;
    height: 350px;
    justify-self: center;
  }
  .em2-cert-right__row1{ height: 108px; gap: 10px; }
  .em2-cert-right__row2{ height: 142px; gap: 24px; justify-content: flex-start; }
  .em2-cert-grid__right{ padding: 40px 40px; grid-template-rows: 108px 142px; row-gap: 20px; }
}
/* =========================
   하단 영역 (1280 x 980)
========================= */
.em-bottom {
  width: 100%;
  max-width: 1280px;
  height: 980px;
  box-sizing: border-box;
  padding-bottom: 140px;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 120px;
}

/* 선언문 텍스트박스 (1280 x 86) */
.em-statement {
  width: 100%;
  height: 86px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.em-statement p {
  margin: 0;
  text-align: center;
}

/* =========================
   4x1 카드 그리드 (1280 x 600)
========================= */
.em-card-grid {
  width: 100%;
  max-width: 1280px;
  height: 600px;
  display: grid;
  grid-template-columns: repeat(4, 320px);
  grid-template-rows: 600px;
}

.em-card-grid__item {
  width: 320px;
  height: 600px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.em-card-grid__item + .em-card-grid__item {
  border-left: 0.5px solid var(--c-g1);
}
.em-card-grid__item .em-card {
  transition: transform 0.3s ease-in-out;
}
.em-card-grid__item:hover .em-card {
  transform: scale(1.08);
}

.em-card {
  width: 320px;
  height: 314px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 32px;
}

.em-card__icon {
  width: 65px;
  height: 52px;
  padding: 40px 0;
  margin: 0 auto;
  box-sizing: content-box;

}

.em-card__title {
  margin: 0;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.em-card__desc {
  margin: 0;
  width: 251px;
  height: 78px;
  text-align: center;
}

/* 외곽선(em-right-top 하단 border)과 본문 사이 간격 */
.em-right-desc {
  margin-top: 71px; /* ✅ Desktop */
}

/* 1) 기본 p 마진 제거 */
.em-right-desc p{
  margin: 0;
}

/* 2) 첫 문단 제외, 두번째부터 문단 간격 */
.em-right-desc p + p{
  margin-top: 35px; /* ✅ 이미지처럼 맞추고 싶으면 여기 값만 조절 */
}

/* 반응형 줄바꿈: 기본 숨김 */
.em-br-mobile { display: none; }
.em-stmt-br { display: none; }
.em2-br-tablet { display: none; }
.em2-br-mobile { display: none; }

/* =========================
   Tablet (800–1279px)
========================= */
@media (min-width: 800px) and (max-width: 1279px) {
  .em-grid {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    height: auto;
    column-gap: 0;
    row-gap: 60px;
    padding-left: 20px;
    padding-right: 20px;
  }

  .em-comma { display: none; }
  .em-br-mobile { display: inline; }

  .em-grid__right { height: auto; }

  .em-right-top { height: 156px; }    /* ✅ Tablet 고정 */
  .em-right-desc { margin-top: 40px; }/* ✅ Tablet 본문 간격 */

  .em-statement {
    height: 172px;
    gap: 12px;
    justify-content: center;
    align-items: flex-start;
  }
  .em-statement p { text-align: left; }
  .em-stmt-br { display: inline; }
  .em-bottom { padding-left: 20px; padding-right: 20px; height: auto; }

  .sub-em-section__inner { height: 2523px; }

  .sub-em-section2__inner { padding-left: 20px; padding-right: 20px; }
  .em2-br-tablet { display: inline; }
  .em2-top { height: 220px; }
  .em2-title-box { height: 188px; gap: 24px; padding-bottom: 40px; }

  .em-card-grid {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 400px);
    height: 800px;
  }
  .em-card-grid__item {
    width: auto;
    height: 400px;
  }
  .em-card-grid__item + .em-card-grid__item {
    border-left: none;
  }
}
/* =========================
   Mobile (<800px)
========================= */
@media (max-width: 799px) {
  /* ✅ 모바일: 1열 + 이미지(위) → 텍스트(아래) */
  .em-grid{
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    height: auto;
    row-gap: 24px;      /* 필요하면 조절 */
    padding-left: 19px; /* 모바일 프레임 여백 원하면 */
    padding-right: 19px;
  }

  /* ✅ 순서 강제 */
  .em-grid__left  { order: 1; }
  .em-grid__right { order: 2; height: auto; }

  .em-right-top { height: 144px; }     /* 네가 고정값 원하는 그대로 */
  .em-right-desc { margin-top: 40px; }
  .em-comma { display: none; }      /* ✅ 콤마 숨김 */
  .em-br-mobile { display: inline; }/* ✅ 줄바꿈 활성 */

  .sub-em-section__inner { height: 3486px; }

  .sub-em-section2__inner { padding-left: 20px; padding-right: 20px; }
  .em2-br-mobile { display: inline; }
  .em2-br-tablet { display: inline; }
  .em2-top { height: 208px; align-items: center; text-align: center; }
  .em2-title-box { height: 176px; gap: 24px; padding-bottom: 40px; align-items: center; }

  .em-statement { height: 132px; align-items: center; }
  .em-statement p { text-align: center; }
  .em-stmt-br { display: inline; }
  .em-bottom { padding-left: 20px; padding-right: 20px; height: auto; }

  .em-card-grid {
    grid-template-columns: 335px;
    grid-template-rows: repeat(4, 400px);
    height: 1600px;
    justify-content: center;
  }
  .em-card-grid__item {
    width: 335px;
    height: 400px;
  }
  .em-card-grid__item + .em-card-grid__item {
    border-left: none;
  }
}