@charset "UTF-8";

@media (max-width: 1440px) {
  .cstx_corner_kr { left: 70px; top: 50px; font-size: 74px; }
  .cstx_corner_en { right: 70px; bottom: 35px; font-size: 58px; }
  .cstx_title { font-size: 92px; }
}

@media (max-width: 1200px) {
  #container .hj--numbers-inner { width: 100%; padding: 0 15px; }
  #container .hj--glass { width: 100%; }
}

@media (max-width: 1024px) {
  /* Layout & Container */
  #container .htr_next_inner { flex-direction: column; gap: 30px; padding: 80px 0; }
  #container .htr_next_visual { width: 100%; min-height: 340px; }

  /* Content Text & Buttons */
  .cstx_img { width: 320px; height: 84px; }
  .cstx_corner_kr { left: 32px; top: 28px; font-size: 52px; }
  .cstx_corner_en { right: 32px; bottom: 24px; font-size: 42px; }
  .cstx_num { font-size: 16px; margin-bottom: 16px; }
  .cstx_title { font-size: 64px; }
  .cstx_desc { font-size: 16px; margin-top: 18px; }
  .cstx_btns { gap: 12px; margin-top: 28px; }
  .cstx_btn { min-width: 130px; height: 52px; font-size: 18px; padding: 0 24px; }

  /* Grid & List */
  .hj-content-wrap { grid-template-columns: repeat(3, 1fr); }
  .hj-content-data { }

  /* Navigation & GNB */
  .gnb-menu { gap: 20px !important; width: auto !important; }
  .gnb-menu li { font-size: 14px !important; }
  .inner { height: 70px !important; padding: 0 15px; }
  .hj-submenu { font-size: 14px !important; }

  /* Footer */
  footer .hj--footer__left { width: auto; }
  footer .hj--footer__menu { display: none; }
  footer .hj--footer__main { flex-wrap: wrap; gap: 20px; }
  footer .hj--footer__top { flex-wrap: wrap; gap: 10px; }

  /* Heritage Section */
  .hj--heritage-media { height: 100%; }
  .hj--heritage-overlay { left: 50%; transform: translate(-50%, -50%); width: 100%; text-align: center; padding: 0 15px; }
  .hj--heritage-overlay p { font-size: 45px; }
  .hj--heritage-overlay h3 { font-size: 32px; }
  .hj-his-year { font-size: 54px; }

  /* Swiper & Slider */
  #container .hj--nav-swiper { padding: 0 10px; }
  #container .hj--slider__main-wrap { padding: 0 15px; }
  #container .hj--slider__thumb > .swiper-wrapper { padding: 0 15px; }

  /* info */
  #container .hj--info-wrap {padding: 80px 15px;}
  #container .hj--info-items {gap: 20px;}

  #container .hj--esg-inner {padding: 120px 15px;}
}

@media (max-width: 768px) {
  /* Layout & Container */
  #container .htr_hero_inner, 
  #container .htr_next_inner { width: calc(100% - 32px); }
  #container .htr_next { clip-path: inset(14% 4% 0 4% round 24px 24px 0 0); }
  #container .htr_desc { width: 100%; max-width: none; }

  /* Sticky & Hero */
  .cstx_sticky { height: 100svh; }
  .cstx_img { width: 240px; height: 68px; }
  .cstx_corner_kr { left: 20px; top: 20px; font-size: 40px; }
  .cstx_corner_en { right: 20px; bottom: 18px; font-size: 34px; }
  .cstx_title { font-size: 48px; }
  .cstx_desc { font-size: 14px; line-height: 1.7; }
  .cstx_btns { flex-wrap: wrap; }

  /* Brand & Content Grid */
  .hj-kr-brand-name { font-size: 26px; }
  .hj-en-brand-name { font-size: 14px; }
  .hj-content-wrap { grid-template-columns: repeat(2, 1fr); min-height: 1000px; margin: 0; }

  /* Section & Items */
  .hj-section { flex-direction: column; }
  .hj-item { border-right: none; border-bottom: 1px solid #eee; }
  .hj-item:last-child { border-bottom: none; }

  /* History Timeline */
  .hj-history__item { width: 100%; left: 0 !important; text-align: left; padding: 20px; }
  .hj-history__timeline::before { left: 20px; }
  .hj-history-cont { font-size: 18px; letter-spacing: -0.8px; }
  .hj-history .hj-history__item--row { flex-direction: column; }
  .hj-history .hj-history__col--text::before, 
  .hj-history .hj-history__col--text::after { display: none; }
  .hj-history__col { width: 100%; text-align: left !important; }
  
  /* History nth-child rules */
  .hj-history__item--row:nth-child(2n) .hj-history__col--image::before { left: 0; right: auto; transform: translateX(-50%); }
  .hj-history__item--row:nth-child(2n) .hj-history__col--image::after { left: 0; right: auto; transform: none; }
  .hj-history__col--image.img_none { height: 0; }

  /* Header & Hero2 */
  header .hj--sm-modal__content { width: 70vw; }
  #container .htr_hero2 .htr_hero_inner { left: 50%; transform: translate(-50%, -50%); text-align: center; }
  #container .htr_copy { width: 100%; }
  #container .htr_hero2_inner .htr_title { display: flex; flex-direction: column; justify-content: center; align-items: center; }

  /* Numbers Section */
  #container .hj--numbers-section.hj--numbers-section-style { height: 140vh; }
  #container .hj--stats { grid-template-columns: repeat(2, 1fr); gap: 45px; }
  #container .hj--glass { padding: 25px; }
  #container .hj--tabs { flex-wrap: wrap; }

  /* Footer */
  footer .hj--family { order: 1; }
  footer .hj--footer__policies { order: 2; display: flex; flex-wrap: wrap; gap: 3px; }
  footer .hj--footer__right { text-align: left; }

  /* Slider */
  #container .hj--nav-swiper { display: none; }
  #container .hj--slider-plusimg div { padding: 0 15px; width: 100%; }
  #container .hj--slider__title { word-break: keep-all; }
  #container .hj--slider__thumb .swiper-slide { width: 100px; }
  #container .hj--slider__thumb .swiper-slide img { border-radius: 8px; }
  #container .hj--slider-text { padding: 0 15px; }

  #container .hj--stack-img {width: 120px;}
  #container .hj--stack-img img {width: 100%;}

  /* 모바일 메뉴 */
  #container .hj--sub-tab__list {flex-direction: column;padding: 0;}
  .hj--sub-tab__item {border-bottom: 1px solid #ddd;}
  .hj--sub-tab__link {text-align: left;padding: 15px;}
  .hj--submenu {position: static;border: none;}
  .hj--sub-tab__item.open .hj--submenu {display: block;}

  /* 배너 */
  #upper_banner {height: 300px;}
  #upper_banner .banner_title>h1 {font-size: 2rem}

  /* info */
  #container .hj--info-wrap>h1 {font-size: 32px; letter-spacing: -4px;}
  #container .hj--info-items {flex-direction: column;}

  /* esg-header */
  #container .hj--esg-header h2 {font-size: 36px; letter-spacing: -2.5px;}
  #container .hj--esg-header p {font-size: 16px;}

  /* esg-table */
  #container .hj--esg-table-title>h1 {font-size: 26px; line-height: 1.2;}
  #container .hj--esg-table-title>h1>img {height: 32px;margin-right: 7px;}
  #container .hj--esg-table-title>h1>br {display: inline;}
  #container .hj--esg-table-title>h1>span {font-size: 18px;}

  #container .hj--esg-table table {font-size: 14px;}
  #container .hj--esg-table thead {display: none;}
  #container .hj--esg-table tbody td.td-color {background: none;}
  #container .hj--esg-table tbody tr {display: block;border-bottom: 1px solid #ddd;padding: 16px;}
  #container .hj--esg-table tbody td {display: flex;justify-content: flex-start;padding: 8px 0;border: none;font-size: 16px;text-align: left;}
  #container .hj--esg-table tbody td::before {content: attr(data-label);font-weight: 600;color: var(--mc);margin-right: 12px;}
  #container .hj--esg-table td.is-empty {color: #333;}
  #container .hj--esg-table td.is-none {display: none}
  colgroup, col {display: none !important;}
}

@media (max-width:600px){
  #container .hj--card{width:450px;}
  #container .hj--card:last-child{width:600px;}

  #container .hj--info-subtitle {margin-bottom: 40px; letter-spacing: -3px; font-size: 28px;}
  #container .hj--info-subtitle2 {letter-spacing: -2px; font-size: 28px;}
  #container .hj--info-text {letter-spacing: -1.5px;}
}

@media (max-width: 425px) {
  .cstx_center { width: 100%; }
  .hj-content-wrap { grid-template-columns: repeat(1, 1fr); }
  .hj-history__title, .hj-history__title span { font-size: 34px; }

  #container .hj--stat h2 { font-size: 42px; }
  #container .hj--stats { grid-template-columns: repeat(1, 1fr); gap: 20px; margin: 60px 0; }

  .hj-history__col { padding-right: 0; padding-left: 25px; }
  .hj-history .hj-history__item--row { padding-right: 0; }
  .hj--heritage-title { text-align: center; padding: 0; font-size: 48px; }
  .hj--heritage-media { width: 90%; }
  .hj--heritage-overlay p { font-size: 32px; letter-spacing: 0; text-indent: 0; }
  .hj--heritage-overlay h3 { font-size: 21px; word-break: keep-all; font-weight: 400; letter-spacing: -3px; }

  #container .hj--sub-title-wrap { padding: 60px 15px; }
  #container .hj--sub-description { word-break: keep-all; }
  #container .hj--sub-description br { display: none; }
  #container .hj--slider__cont { font-size: 16px; word-break: keep-all; }
  #container .hj--slider__thumb .swiper-slide { width: 75px; }
  #container .hj--slider__thumb .swiper-slide img { border-radius: 5px; }

  #container .hj--card:not(:last-child){width:280px}
  #container .hj--hero-content .hj--year{font-size:48px !important}
  #container .hj--hero-content h2{font-size:36px !important}
  #container .hj--hero-content span{font-size:16px !important;margin-bottom:30px !important}

  #container .hj--info-image>button {bottom: 15px; right: 15px; width: 35px; height: 35px;}

  #container .hj--esg-header {margin-bottom: 50px;}
  #container .hj--esg-header h2 {font-size: 28px; letter-spacing: -1.5px;}
  #container .hj--esg-header .hj--report-desc {font-size: 16px; text-align: center;}

  #container .hj--esg-header p {text-align: center;}

  #container .hj--esg-table-title>h1 {font-size: 22px;}
  #container .hj--esg-table-title {flex-direction: column; gap: 10px; align-items: flex-start;}

  #container .hj-content-data {height: 350px;}
}

@media (max-width: 375px) {
  .hj-history__timeline::before { left: 0; }
  .hj-history__col { padding-left: 15px; }
  .hj-his-year { font-size: 34px; }
  .hj-history__item--row:nth-child(2n) .hj-history__col--image::before,
  .hj-history__item--row:nth-child(2n) .hj-history__col--image::after,
  .hj-history__col--image::before,
  .hj-history__col--image::after { left: -20px; }

  #upper_banner .banner_title>p {font-size: 1rem;}
  #upper_banner .banner_title>h1 {font-size: 1.5rem;}

  #container .hj--info-sign img {height: 50px;}
}