/* subtitle.css
   - 1280 x 410 Title Section
   - 중앙 정렬 타이틀 박스 + page_point + 주황 서브타이틀
   - ✅ 모션(data-enter, fadeup 등)은 submotion.css로 분리
   - 폰트(크기/자간/굵기)는 font.css 유틸 클래스(f-*)로만 관리
*/

/* =========================
   Tokens (Layout only)
========================= */
:root{
  /* Title Section */
  --title-section-h: 410px;
  --title-section-pad-top: 140px;

  --title-box-h: 96px;
}

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

.sub-title-section__inner{
  width: 100%;
  max-width: 1280px;
  height: var(--title-section-h);
  margin: 0 auto;
  box-sizing: border-box;

  padding-top: var(--title-section-pad-top);
  padding-bottom: var(--title-section-pad-top);

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

.sub-title-box{
  position: relative;
  height: var(--title-box-h);

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

  white-space: nowrap;
  box-sizing: border-box;
}

/* ✅ 줄바꿈 방지(기업소↵개 방지 핵심) */
.sub-title-text{
  display: inline-block;
  white-space: nowrap;
  line-height: 1;
}

/* page-point: flow에 포함 (15px) */
.page-point{
  width: 15px;
  height: 15px;
  display: block;
  pointer-events: none;
}

.sub-title-sub{
  height: 19px;
  line-height: 19px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

/* =========================
   Content Section (1280 x 1265)
   - 아래 패딩 200, 간격 100
   - 상단 가운데정렬, 세로 흐름
========================= */
.sub-content-section{
  width: 100%;
  background: #fff;
}

.sub-content-section__inner{
  width: 100%;
  max-width: 1280px;
  height: 1265px;
  margin: 0 auto;
  box-sizing: border-box;
  padding-bottom: 200px;

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

/* =========================
   Content Grid (1280 x 325, 2x1)
   - 간격 60, 위 패딩 20
   - 열 1fr, 행 305
========================= */
.content-grid{
  width: 100%;
  height: 325px;
  box-sizing: border-box;
  padding-top: 20px;

  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 305px;
  gap: 60px;
}

.content-grid__item{
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}

.content-grid__img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 20px;
}

/* 오른쪽 열: 간격 28, 왼쪽 가운데정렬, 위 패딩 80 */
.content-grid__item--right{
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding-top: 80px;
  gap: 28px;
}

/* 한자 이미지: top 45, left 238, 388x62, 시차 110% */
.content-hanja{
  position: absolute;
  top: 45px;
  left: 238px;
  width: 388px;
  height: 62px;
  pointer-events: none;
  will-change: transform;
}

/* 251 x 119 텍스트 박스: 간격 10, 왼쪽 상단정렬 */
.content-text-box{
  width: 251px;
  height: 119px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 10px;
}

.content-text-box p{
  margin: 0;
}

/* 500 x 78 설명 텍스트 박스 */
.content-desc-box{
  width: 500px;
  height: 78px;
}

.content-desc-box p{
  margin: 0;
}

/* =========================
   Content Info Grid (1280 x 640, 1x4)
   - 간격 20, 행 145 고정
========================= */
.content-info-grid{
  width: 100%;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: repeat(4, 145px);
  gap: 20px;
}

.content-info-grid__item{
  width: 100%;
  height: 100%;
  background: var(--c-dk-f);
  border-radius: 20px;
  box-sizing: border-box;
  padding: 24px 30px;

  display: grid;
  grid-template-columns: 56px 1fr;
  grid-template-rows: 97px;
  gap: 40px;
  align-items: center;
}

.info-item__icon{
  width: 56px;
  height: 56.8px;
  padding: 6px 4px;
  box-sizing: border-box;
}

.info-item__icon img{
  width: 46.2px;
  height: 44.8px;
  display: block;
}

.info-item__body{
  height: 97px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 10px;
}

.info-item__title{
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: 14px;
}

.info-item__desc{
  margin: 0;
}

/* =========================
   Value Section (1280 x 1076)
   - 위패딩 200, 아래패딩 180, 간격 140
========================= */
.sub-value-section{
  width: 100%;
  background: var(--c-dk-f);
  overflow: hidden;
}

.sub-value-section__inner{
  position: relative;
  width: 100%;
  max-width: 1280px;
  height: 1076px;
  margin: 0 auto;
  box-sizing: border-box;
  padding-top: 200px;
  padding-bottom: 180px;

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

.value-hanja-bg{
  position: absolute;
  top: 100px;       /* ← 값 조절: 높이면 아래로, 낮추면 위로 */
  left: 998px;
  width: 612px;
  height: 919px;
  pointer-events: none;
  will-change: transform;
}

@media (max-width: 1279px){
  .value-hanja-bg{ display: none; }
}

.value-container{
  width: 100%;
  max-width: 1280px;
  height: 696px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 72px;
}

.value-header{
  width: 556px;
  height: 244px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 48px;
}

.value-title-box{
  width: 556px;
  height: 81px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
}

.value-desc-box{
  width: 503px;
  height: 115px;
  padding: 20px 0;
  box-sizing: border-box;
  text-align: center;
}

.value-hanja-row{
  display: flex;
  align-items: center;
  gap: 18px;
}

.value-hanja-sun{
  width: 304px;
  height: 48px;
  display: block;
}

.value-hanja-every{
  width: 240px;
  height: 48px;
  display: block;
}

/* =========================
   Value Cards (1280 x 380)
   - 중앙 가운데정렬, 간격 72
========================= */
.value-cards{
  width: 100%;
  max-width: 1280px;
  height: 380px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 72px;
}

.value-card{
  width: 376px;
  height: 380px;
  display: grid;
  grid-template-columns: 376px;
  grid-template-rows: 165px 1fr;
  gap: 34px;
}

.value-card__img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 20px;
}

.value-card__body{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 24px;
}

.value-card__title-box{
  width: 376px;
  height: 80px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 12px;
  padding-bottom: 12px;
  box-sizing: border-box;
  border-bottom: 1px solid var(--c-g1);
}

.value-card__hanja{
  width: 67px;
  height: 38px;
  display: block;
}

.value-card__sub{
  height: 75px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.value-card__title-box p,
.value-card__sub p{
  margin: 0;
}

/* =========================
   CEO Section (1280 x 1016)
   - 상단 가운데정렬, 위아래패딩 140, 세로 흐름
========================= */
.sub-ceo-section{
  width: 100%;
  background: #fff;
}

.sub-ceo-section__inner{
  width: 100%;
  max-width: 1280px;
  height: 1016px;
  margin: 0 auto;
  box-sizing: border-box;
  padding-top: 140px;
  padding-bottom: 140px;

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

.ceo-header{
  width: 100%;
  max-width: 1280px;
  height: 148px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
}

.ceo-header p{
  margin: 0;
}

.ceo-header p + p{
  margin-top: 12px;
}

.ceo-header p.ceo-header__desc{
  margin-top: 24px;
}

.ceo-body{
  width: 100%;
  max-width: 1280px;
  height: 588px;
  box-sizing: border-box;
  padding-top: 60px;
  padding-bottom: 120px;

  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 60px;
}

.ceo-body__img{
  width: 610px;
  height: 408px;
  object-fit: cover;
  display: block;
  border-radius: 20px;
  flex-shrink: 0;
}

.ceo-body__right{
  width: 610px;
  height: 408px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-start;
  gap: 60px;
  flex-shrink: 0;
}

.ceo-body__text{
  width: 610px;
  height: 319px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.ceo-body__sign{
  display: flex;
  align-items: baseline;
  gap: 12px;
}

/* 데스크탑 전용 줄바꿈 */
@media (max-width: 1279px){
  .br-desk{ display: none; }
}

/* 모바일 전용 줄바꿈 */
.br-mob{ display: none; }
@media (max-width: 799px){
  .br-mob{ display: inline; }
}

/* 태블릿 (800~1279) */
@media (min-width: 800px) and (max-width: 1279px){
  .sub-content-section__inner{
    height: 1721px;
    padding-left: 20px;
    padding-right: 20px;
  }

  .content-grid{
    width: 760px;
    height: 605px;
    margin: 0 auto;
    grid-template-columns: 1fr;
    grid-template-rows: 280px auto;
    gap: 0;
  }

  .content-grid__img{
    width: 760px;
    height: 280px;
  }

  .content-hanja{
    left: 388px;
    top: 123px;
    bottom: 123px;
  }

  .content-info-grid{
    width: 760px;
    height: 816px;
    margin: 0 auto;
    grid-template-rows: repeat(4, 174px);
    gap: 40px;
  }

  .content-info-grid__item{
    grid-template-rows: 126px;
  }

  .value-container{
    width: 760px;
    height: 681px;
  }

  .value-header{
    width: 482px;
    height: 229px;
  }

  .value-title-box{
    width: 482px;
    height: 75px;
  }

  .value-hanja-sun{
    width: 263px;
    height: 42px;
  }

  .value-hanja-every{
    width: 207px;
    height: 42px;
  }

  .value-desc-box{
    width: 448px;
    height: 106px;
  }

  .value-cards{
    width: 760px;
    height: 380px;
  }

  .value-card{
    width: 344px;
    height: 380px;
    grid-template-columns: 344px;
  }

  .value-card__title-box{
    width: 344px;
  }

  .sub-ceo-section__inner{
    max-width: 800px;
    height: 1396px;
    padding-left: 20px;
    padding-right: 20px;
  }

  .ceo-header{
    width: 760px;
    height: 137px;
  }

  .ceo-body{
    width: 760px;
    height: 979px;
    flex-direction: column;
  }

  .ceo-body__img{
    width: 760px;
    height: 360px;
  }

  .ceo-body__right{
    width: 760px;
    height: 379px;
  }

  .ceo-body__text{
    width: 760px;
    height: 290px;
  }
}

/* 모바일 (~799) */
@media (max-width: 799px){
  .sub-content-section__inner{
    height: 2182.23px;
    padding-left: 20px;
    padding-right: 20px;
  }

  .content-grid{
    width: 335px;
    height: 541px;
    margin: 0 auto;
    grid-template-columns: 1fr;
    grid-template-rows: 280px 241px;
    gap: 0;
  }

  .content-grid__img{
    width: 335px;
    height: 280px;
  }

  .content-text-box{
    width: 161px;
    height: 76px;
  }

  .content-desc-box{
    width: 335px;
    height: 57px;
  }

  .content-hanja{
    display: none;
  }

  .content-info-grid{
    width: 335px;
    height: 1341.23px;
    margin: 0 auto;
    grid-template-rows: repeat(4, auto);
    gap: 40px;
  }

  .content-info-grid__item{
    grid-template-columns: 1fr;
    grid-template-rows: 56.8px 193px;
    gap: 0;
  }

  .info-item__icon{
    justify-self: end;
    align-self: center;
  }

  .info-item__body{
    height: 193px;
    gap: 16px;
  }

  .info-item__title{
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }

  .sub-value-section__inner{
    height: 1453px;
  }

  .value-container{
    width: 335px;
    height: 1113px;
  }

  .value-header{
    width: 321px;
    height: 283px;
  }

  .value-title-box{
    width: 233px;
    height: 115px;
    gap: 24px;
    white-space: nowrap;
  }

  .value-hanja-row{
    flex-direction: column;
    gap: 8px;
  }

  .value-hanja-sun{
    width: 194px;
    height: 31px;
  }

  .value-hanja-every{
    width: 153px;
    height: 31px;
  }

  .value-desc-box{
    width: 321px;
    height: 120px;
  }

  .value-cards{
    width: 335px;
    height: 758px;
    flex-direction: column;
  }

  .value-card{
    width: 335px;
    height: 343px;
    grid-template-columns: 335px;
    grid-template-rows: 165px 144px;
  }

  .value-card__title-box{
    width: 335px;
  }

  .value-card__hanja{
    width: 50px;
    height: 22px;
  }

  .sub-ceo-section__inner{
    max-width: 375px;
    height: 1351px;
    padding: 120px 20px;
  }

  .ceo-header{
    width: 335px;
    height: 124px;
  }

  .ceo-body{
    width: 335px;
    height: 987px;
    flex-direction: column;
  }

  .ceo-body__img{
    width: 335px;
    height: 335px;
  }

  .ceo-body__right{
    width: 335px;
    height: 412px;
  }

  .ceo-body__text{
    width: 335px;
    height: 330px;
  }
}