/* ============================================================
 * COMMON
 * ============================================================ */
.title-main h2 {
  position: relative;
  display: inline-block;
  font-size: 1.875rem;
  font-weight: 700;
}

.title-main h2 span {
  position: absolute;
  right: -14px;
  bottom: 7px;
  width: 7px;
  height: 7px;
  background-color: #002a71;
  border-radius: 50%;
}

.title-main div {
  text-transform: uppercase;
  font-size: 3rem;
  font-weight: 900;
  line-height: 1.5;
}

.title-main p {
  font-size: 1.3rem;
  font-weight: 500;
  color: #666666;
}

.title-main a {
  display: inline-flex;
  align-items: end;
  gap: 10px;
  font-size: 1.25rem;
  font-weight: 500;
  color: #666666;
}

.title-main a svg {
  width: 70px;
  padding-bottom: 4px;
}

/* COMMON 반응형 — 섹션 제목(.title-main) 타이포를 단계적으로 축소.
   섹션별 오버라이드는 margin/weight/color 위주라 크기는 여기서 관리한다.
   (.energy .title-main p 만 자체 크기가 있어 그 부제는 energy 단계에서 처리) */
@media screen and (max-width: 1440px) {
  .title-main h2 {
    font-size: 1.75rem;
  }
  .title-main div {
    font-size: 2.75rem;
  }
  .title-main p {
    font-size: 1.25rem;
  }
  .title-main a {
    font-size: 1.2rem;
  }
  .title-main a svg {
    width: 64px;
  }
}

@media screen and (max-width: 1280px) {
  .title-main h2 {
    font-size: 1.625rem;
  }
  .title-main div {
    font-size: 2.5rem;
  }
  .title-main p {
    font-size: 1.2rem;
  }
  .title-main a {
    font-size: 1.15rem;
  }
  .title-main a svg {
    width: 60px;
  }
}

@media screen and (max-width: 1024px) {
  .title-main h2 {
    font-size: 1.5rem;
  }
  .title-main div {
    font-size: 2.25rem;
  }
  .title-main p {
    font-size: 1.15rem;
  }
  .title-main a {
    font-size: 1.1rem;
  }
  .title-main a svg {
    width: 54px;
  }
}

@media screen and (max-width: 768px) {
  .title-main h2 {
    font-size: 1.375rem;
  }
  .title-main div {
    font-size: 2rem;
  }
  .title-main p {
    font-size: 1.1rem;
  }
  .title-main a {
    font-size: 1.05rem;
  }
  .title-main a svg {
    width: 48px;
  }
}

@media screen and (max-width: 480px) {
  .title-main h2 {
    font-size: 1.25rem;
  }
  .title-main div {
    font-size: 1.625rem;
  }
  .title-main p {
    font-size: 1rem;
  }
  .title-main a {
    font-size: 1rem;
  }
  .title-main a svg {
    width: 42px;
  }
}

@media screen and (max-width: 360px) {
  .title-main h2 {
    font-size: 1.15rem;
  }
  .title-main div {
    font-size: 1.45rem;
  }
  .title-main p {
    font-size: 0.95rem;
  }
  .title-main a svg {
    width: 38px;
  }
}

/* ============================================================
 * hero__slide 메인 슬라이드 영역
 * ============================================================ */
.hero-slide {
  width: 100%;
}

.hero-slide .swiper-slide {
  width: 100%;
  height: 100vh;
}

.hero-slide__bg {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: -1;
  overflow: hidden;
}

.hero-slide__bg img,
.hero-slide__bg video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 6s;
}

.hero-slide__text {
  height: 100%;
  color: #ffffff;
  line-height: 1.2;
}

.hero-slide__text .inner {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: end;
  padding-bottom: 150px;
}

.hero-slide__text .txt1 {
  font-size: 4.375rem;
  font-weight: 800;
}

.hero-slide__text .txt2 {
  font-size: 5rem;
  font-weight: 900;

  /* 글자 그라데이션: 민트 → 블루 → 민트 (반복해야 이음새 없이 순환) */
  background: linear-gradient(90deg, #00ffd8, #0a57ed, #00ffd8);
  background-size: 200% auto;
  /* 글자보다 2배 넓게 깔아 흐를 공간 확보 */
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  /* 구형 브라우저 폴백 */

  /* 그라데이션 흐름 애니메이션 */
  animation: txt2-wave 4s ease-in-out infinite alternate;
}

@keyframes txt2-wave {
  0% {
    background-position: 0% center;
  }

  100% {
    background-position: 200% center;
  }
}

.hero-slide__text .txt3 {
  font-size: 1.375rem;
  margin-top: 20px;
}

/* HERO TEXT SLIDE-IN ANIMATION
  ─────────────────────────────────────────── */
.hero-slide__text .txt1,
.hero-slide__text .txt2,
.hero-slide__text .txt3 {
  opacity: 0;
  transform: translateY(70px);
  transition: opacity 1.6s cubic-bezier(0.22, 1, 0.36, 1),
    transform 1.6s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform, opacity;
}

/* 순차 딜레이 */
.hero-slide__text .txt2 {
  transition-delay: 0.3s;
}

.hero-slide__text .txt3 {
  transition-delay: 0.6s;
}

/* 활성 슬라이드 */
.swiper-slide-active .hero-slide__text .txt1,
.swiper-slide-active .hero-slide__text .txt2,
.swiper-slide-active .hero-slide__text .txt3 {
  opacity: 1;
  transform: translateX(0);
}

/* hero 반응형 — 실제 클래스(.txt1 / .txt2 / .txt3 / .inner)만 다룬다.
   기존 .hero__slide__* · pagewrap · scroll · swiper-pagination · bg__2 는
   마크업에 없는 죽은 셀렉터라 제거했다. 브레이크포인트는 사이트 공통(1600~360).
   1600 은 큰 화면에서 기본 크기가 적당해 생략. */
@media screen and (max-width: 1440px) {
  .hero-slide__text .inner {
    transform: translateY(-80px);
  }
  .hero-slide__text .txt1 {
    font-size: 3.75rem;
  }
  .hero-slide__text .txt2 {
    font-size: 4.25rem;
  }
  .hero-slide__text .txt3 {
    font-size: 1.3rem;
  }
}

@media screen and (max-width: 1280px) {
  .hero-slide__text .inner {
    transform: translateY(-60px);
  }
  .hero-slide__text .txt1 {
    font-size: 3.25rem;
  }
  .hero-slide__text .txt2 {
    font-size: 3.625rem;
  }
  .hero-slide__text .txt3 {
    font-size: 1.25rem;
  }
}

@media screen and (max-width: 1024px) {
  .hero-slide__text .inner {
    transform: translateY(-40px);
  }
  .hero-slide__text .txt1 {
    font-size: 2.75rem;
  }
  .hero-slide__text .txt2 {
    font-size: 3rem;
  }
  .hero-slide__text .txt3 {
    font-size: 1.2rem;
  }
}

@media screen and (max-width: 768px) {
  /* 모바일 주소창 대응: vh 대신 svh, 텍스트는 아래 여백만 조정 */
  .hero-slide .swiper-slide {
    height: 90svh;
  }
  .hero-slide__text .inner {
    transform: none;
    padding-bottom: 100px;
  }
  .hero-slide__text .txt1 {
    font-size: 2.25rem;
  }
  .hero-slide__text .txt2 {
    font-size: 2.5rem;
  }
  .hero-slide__text .txt3 {
    font-size: 1.1rem;
    line-height: 1.5;
  }
}

@media screen and (max-width: 480px) {
  .hero-slide .swiper-slide {
    height: 80svh;
  }
  .hero-slide__text .inner {
    padding-bottom: 70px;
  }
  .hero-slide__text .txt1 {
    font-size: 1.875rem;
  }
  .hero-slide__text .txt2 {
    font-size: 2.125rem;
  }
  .hero-slide__text .txt3 {
    font-size: 1rem;
  }
}

@media screen and (max-width: 360px) {
  .hero-slide__text .txt1 {
    font-size: 1.5rem;
  }
  .hero-slide__text .txt2 {
    font-size: 1.75rem;
  }
  .hero-slide__text .txt3 {
    font-size: 0.95rem;
  }
}

/* ============================================================
 * Section - intro (Technology / Materials)
 *  → 분리: assets/css/intro.css
 * ============================================================ */
/* ============================================================
 * Section - value Sustainable Energy Innovation
 * ============================================================ */
.value {
  padding: 150px 0;
  display: flex;
  justify-content: space-between;
  gap: 40px;
}

.value .title-main {
  width: 30%;
  padding-left: calc((100% - 1600px) / 2 + 50px);
}

.value .title-main h2 {
  margin-bottom: 20px;
}

.value .title-main div {
  margin-bottom: 6px;
}

.value .title-main a {
  margin-top: 60px;
}

.value .content {
  flex: 1;
  min-width: 0;
}

/* HERO TEXT SLIDE-IN ANIMATION
  ─────────────────────────────────────────── */
.value-slide {
  width: 100%;
  height: 100%;
  flex-shrink: 0;
}

.value-slide .swiper-slide {
  width: 100%;
  height: 100%;
}

.value-slide__bg {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: -1;
  border-radius: 38px;
  overflow: hidden;
}

.value-slide__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.value-slide__text {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: end;
  padding: 50px;
  color: #ffffff;
}

.value-slide__text .txt1 {
  font-size: 2.375rem;
  font-weight: 800;
  margin-bottom: 10px;
}

.value-slide__text .txt2 {
  font-size: 1.4rem;
  font-weight: 500;
}

/* value 반응형 — 제목 타이포는 공통(.title-main)에서 처리.
   여기서는 레이아웃(≤1024 세로 스택)·여백·슬라이더 카드 텍스트를 다룬다.
   나란히 있을 때 슬라이더 높이가 제목 높이에 stretch 되므로, 스택하면
   .value-slide 에 실제 높이를 직접 준다. 브레이크포인트는 공통(1600~360). */
@media screen and (max-width: 1280px) {
  .value {
    padding: 120px 0;
  }
}

@media screen and (max-width: 1024px) {
  /* 좌우 배치 → 세로 스택 */
  .value {
    flex-direction: column;
    padding: 90px 30px;
    gap: 40px;
  }
  .value .title-main {
    width: 100%;
    padding-left: 0;
  }
  .value .content {
    flex: none;
    width: 100%;
  }
  .value-slide {
    height: 420px;
  }
  .value-slide__text {
    padding: 40px;
  }
  .value-slide__text .txt1 {
    font-size: 2rem;
  }
}

@media screen and (max-width: 768px) {
  .value {
    padding: 70px 20px;
  }
  .value-slide {
    height: 360px;
  }
  .value-slide__bg {
    border-radius: 24px;
  }
  .value-slide__text {
    padding: 30px;
  }
  .value-slide__text .txt1 {
    font-size: 1.75rem;
  }
  .value-slide__text .txt2 {
    font-size: 1.2rem;
  }
}

@media screen and (max-width: 480px) {
  .value {
    padding: 60px 15px;
  }
  .value-slide {
    height: 300px;
  }
  .value-slide__bg {
    border-radius: 18px;
  }
  .value-slide__text {
    padding: 24px;
  }
  .value-slide__text .txt1 {
    font-size: 1.5rem;
  }
  .value-slide__text .txt2 {
    font-size: 1.1rem;
  }
}

@media screen and (max-width: 360px) {
  .value-slide {
    height: 260px;
  }
  .value-slide__text .txt1 {
    font-size: 1.375rem;
  }
}

/* ============================================================
 * Section - energy FROM SEAWATER TO ENERGY
 * ============================================================ */
.energy {
  position: relative;
  color: #fff;
}

.energy-bg video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 6s;
}

.energy .inner {
  position: absolute;
  top: 100px;
  bottom: 100px;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.energy .title-main p {
  color: #ffffff;
  font-size: 1.5rem;
}

.energy .content {
  margin: 0 auto;
  max-width: 1300px;
  width: 100%;
  border-radius: 10px;
  border: 1px solid #fff;
}

.energy-list {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  counter-reset: energy;
}

.energy-list li {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  font-weight: 300;
  padding: 30px 0 24px;
  counter-increment: energy;
}

.energy-list li span {
  font-size: 1.5rem;
  font-weight: 600;
}

.energy-list li::before {
  content: counter(energy, decimal-leading-zero);
  position: absolute;
  top: -13px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.875rem;
  font-weight: 900;
  border-radius: 50%;
  background-color: #fff;
  color: #383ac8;
  width: 28px;
  height: 28px;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* energy 반응형
   데스크톱: 배경 영상 위에 오버레이(.inner absolute, 위·아래 100px 인셋).
   섹션 높이는 영상 가로세로비로 정해져, 화면이 좁으면 영상이 납작해진다.
   - ~1024: 오버레이 유지, 인셋·폰트만 축소 (아직 5칸이 들어감).
   - ~768 부터: 5칸 가로 스텝을 폰에 우겨넣으면 빡빡하다. 오버레이를 풀고
     영상은 배경으로 깔고(.inner 를 일반 흐름으로) 스텝을 세로 스택으로 전환.
   (제목 자체 크기는 .title-main COMMON 반응형이 처리 → 여기선 부제 p 와 목록만) */
@media screen and (max-width: 1280px) {
  /* 폭이 좁아지면 영상(가로세로비) 밴드가 얇아져 오버레이가 답답해진다.
     최소 높이를 줘 밴드를 확보하고, 영상은 깔아서(cover) 채운다. */
  .energy {
    min-height: 560px;
  }
  .energy-bg {
    position: absolute;
    inset: 0;
  }
}

@media screen and (max-width: 1024px) {
  .energy .inner {
    top: 70px;
    bottom: 70px;
  }
  .energy .title-main p {
    font-size: 1.25rem;
  }
  .energy-list li {
    padding: 26px 0 20px;
  }
  .energy-list li span {
    font-size: 1.25rem;
  }
}

@media screen and (max-width: 768px) {
  /* 세로 스택은 내용 높이만큼만 → 위에서 준 min-height 는 해제 */
  .energy {
    min-height: 0;
  }
  /* 영상은 배경으로 깔고, 내용은 일반 흐름으로 쌓는다 */
  .energy-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
  }
  /* 영상 위로 올리려면 relative 여야 z-index 가 먹는다(static 은 무시됨).
     top/bottom/left/transform 은 base 의 오버레이 값이라 여기서 초기화. */
  .energy .inner {
    position: relative;
    z-index: 1;
    top: auto;
    bottom: auto;
    left: auto;
    transform: none;
    width: 100%;
    padding-top: 70px;
    padding-bottom: 70px;
    gap: 40px;
    justify-content: flex-start;
  }
  .energy .title-main p {
    font-size: 1.125rem;
  }
  /* 5칸 그리드 → 세로 스택. 각 항목: 번호(왼쪽) + 영문/국문(오른쪽) */
  .energy-list {
    grid-template-columns: 1fr;
  }
  .energy-list li {
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 16px;
    text-align: left;
    padding: 16px 20px;
    font-size: 1rem;
  }
  .energy-list li + li {
    border-top: 1px solid rgba(255, 255, 255, 0.25);
  }
  /* 번호 뱃지: 위쪽 absolute → 왼쪽 인라인 */
  .energy-list li::before {
    position: static;
    transform: none;
  }
  /* 영문 라벨을 고정폭(한 줄)으로 둬서 국문 설명이 세로로 정렬되게 */
  .energy-list li span {
    flex: 0 0 132px;
    font-size: 1rem;
    white-space: nowrap;
  }
}

@media screen and (max-width: 480px) {
  .energy .inner {
    padding-top: 56px;
    padding-bottom: 56px;
    gap: 32px;
  }
  .energy .content {
    border-radius: 8px;
  }
  .energy .title-main p {
    font-size: 1rem;
  }
  .energy-list li {
    gap: 12px;
    padding: 14px 16px;
    font-size: 0.9375rem;
  }
  .energy-list li span {
    flex: 0 0 116px;
    font-size: 0.9375rem;
  }
}

@media screen and (max-width: 360px) {
  .energy .inner {
    padding-top: 48px;
    padding-bottom: 48px;
  }
  .energy-list li {
    gap: 10px;
    padding: 12px 14px;
    font-size: 0.8125rem;
  }
  .energy-list li span {
    flex: 0 0 100px;
    font-size: 0.8125rem;
  }
  .energy-list li::before {
    width: 24px;
    height: 24px;
    font-size: 0.6875rem;
  }
}

/* ============================================================
 * Section - business ADVANCED ENERGY SOLUTIONS
 * ============================================================ */
.business {
  padding: 200px 0 140px;
  background-color: #f5f5f5;
  background-image: url(/assets/img/main/business-bg.jpg);
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: top center;
}

.business .inner {
  display: flex;
  justify-content: space-between;
  gap: 40px;
}

.business .title-main {
  width: 25%;
}

.business .title-main h2 {
  margin-bottom: 20px;
}

.business .title-main div {
  margin-bottom: 6px;
}

.business .title-main a {
  margin-top: 60px;
}

.business .content {
  flex: 1;
  min-width: 0;
}

.business-list {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.business-list li {
  width: 48%;
}

.business-list li:nth-child(even) {
  align-self: flex-end;
}

.business-list li:not(:first-child) {
  margin-top: -160px;
}

.business-list li img,
.business-list li video {
  display: block;
  width: 100%;
  border-radius: 30px;
}

.business-list li div {
  padding-left: 20px;
  margin-top: 30px;
  font-size: 1.3rem;
  color: #666666;
}

.business-list li div span {
  display: block;
  margin-bottom: 10px;
  font-size: 2.25rem;
  font-weight: 800;
  color: #000000;
}

/* business 반응형
   데스크톱: 좌 타이틀(25%) + 우 지그재그 카드(48%, 홀짝 좌우 엇갈림 -160px 겹침).
   - ~1024: 타이틀을 위로 스택(inner 세로), 카드는 폭이 넓어져 지그재그 유지.
   - ~768 부터: 카드를 폭 전체 단일 열로 풀어 세로로 쌓는다(엇갈림/겹침 해제). */
@media screen and (max-width: 1280px) {
  .business {
    padding: 160px 0 120px;
  }
}

@media screen and (max-width: 1024px) {
  .business {
    padding: 120px 0 100px;
  }
  /* 좌우 배치 → 타이틀 위, 카드 아래 */
  .business .inner {
    flex-direction: column;
    gap: 60px;
  }
  .business .title-main {
    width: 100%;
  }
  .business .title-main a {
    margin-top: 36px;
  }
}

@media screen and (max-width: 768px) {
  .business {
    padding: 90px 0 80px;
  }
  /* 지그재그 해제 → 폭 전체 단일 열 */
  .business-list {
    gap: 50px;
  }
  .business-list li {
    width: 100%;
  }
  .business-list li:nth-child(even) {
    align-self: auto;
  }
  .business-list li:not(:first-child) {
    margin-top: 0;
  }
  .business-list li img,
  .business-list li video {
    border-radius: 20px;
  }
  .business-list li div {
    margin-top: 20px;
    font-size: 1.125rem;
  }
  .business-list li div span {
    font-size: 1.75rem;
  }
}

@media screen and (max-width: 480px) {
  .business {
    padding: 70px 0 60px;
  }
  .business-list {
    gap: 40px;
  }
  .business-list li img,
  .business-list li video {
    border-radius: 16px;
  }
  .business-list li div {
    padding-left: 4px;
    margin-top: 16px;
    font-size: 1rem;
  }
  .business-list li div span {
    font-size: 1.5rem;
  }
}

/* ============================================================
 * Section - product
 * ============================================================ */
.product {
  padding: 150px 0 300px;
  position: relative;
}

.product .title-main {
  text-align: center;
  margin-bottom: 100px;
}

.product .title-main h2 {
  margin-bottom: 26px;
}

.product .title-main div {
  font-weight: 700;
}

/* Product Card
  ─────────────────────────────────────────── */
.product .content {
  display: flex;
  gap: 26px;
}

/* 제품 카드 클릭 시 각 제품 페이지로 이동.
   a 를 display:contents 로 두어 기존 절대배치 레이아웃/애니메이션에 영향 없게 한다. */
.product-card__link {
  display: contents;
}
.product-card {
  cursor: pointer;
}

.product-card {
  flex: 1 1 0;
  height: 700px;
  transition: 0.8s;
  position: relative;
  overflow: hidden;
  border-radius: 40px;
  background: linear-gradient(180deg, #fff -10%, #fff 55%, #cccccc 120%);
  border: 1px solid #fff;
}

.product-card.active {
  flex: 3 1 0;
  background: #fff;
  border-color: #03274e;
  box-shadow: 0 0 20px rgba(33, 40, 112, 0.7);
}

.product-photo {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.product-photo img {
  width: 64rem;
  max-width: none;
  height: auto;
  max-height: 700px;
  object-fit: contain;
  transform-origin: center;
  transition: transform 0.8s ease, opacity 0.6s ease;
}

/* 비활성/활성 이미지 크기 위치 */
.product-card:not(.active) .product-photo .sib {
  transform: translateX(-10px) scale(0.65);
}

.product-card.active .product-photo .sib {
  transform: translateX(0) scale(0.9);
}

.product-card:not(.active) .product-photo .lib {
  transform: translateX(0) scale(0.7);
}

.product-card.active .product-photo .lib {
  transform: translateX(0) translateY(-20px) scale(0.85);
}

.product-card:not(.active) .product-photo .pouch {
  transform: translateX(120px) scale(0.85);
}

.product-card.active .product-photo .pouch {
  transform: translateX(0) translateY(-50px) scale(0.8);
}

.product-tag {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  text-align: center;
  padding: 50px 0;
  transition: opacity 0.3s ease, visibility 0.3s;
}

.product-tag dt {
  font-size: 1.625rem;
  font-weight: 700;
  margin-bottom: 12px;
}

.product-tag dd {
  font-size: 1.25rem;
  font-weight: 500;
  color: #999999;
}

.product-tag .plus {
  position: absolute;
  left: 50%;
  bottom: 50px;
  transform: translateX(-50%);
  font-size: 2.25rem;
  font-weight: 300;
  color: #999999;
}

.product-card.active .product-tag {
  opacity: 0;
  visibility: hidden;
}

.product-detail {
  position: absolute;
  inset: 0;
  z-index: 2;
  opacity: 0;
  visibility: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 60px;
  transition: opacity 0.3s ease, visibility 0.3s;
}

/* 카드가 다 펼쳐진(.45s) 뒤 '제자리'에서 페이드인 */
.product-card.active .product-detail {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.45s ease 0.45s, visibility 0s linear 0.45s;
}

.product-txt {
  position: relative;
  white-space: nowrap;
}

.product-txt .tit {
  font-size: 3rem;
  font-weight: 800;
  margin-bottom: 12px;
}

.product-txt .desc {
  font-size: 1.6rem;
  font-weight: 400;
}

/* Product Marquee Effect
  ─────────────────────────────────────────── */
.product-marquee {
  position: absolute;
  bottom: 50px;
  left: 0;
  width: 100%;
  overflow: hidden;
  /* 넘치는 글자 숨김 */
  font-size: 9rem;
  font-weight: 900;
  line-height: 1;
  color: #f3f3f3;
}

.product-marquee__track {
  display: flex;
  width: max-content;
  /* 내용 전체 너비만큼 */
  animation: product-marquee 120s linear infinite;
  will-change: transform;
}

.product-marquee__track span {
  padding-right: 60px;
  /* 문구 사이 간격(각 span 균일 → 이음새 없음) */
  white-space: nowrap;
}

/* 절반(-50%)만큼 흘러가면 복제 문구가 딱 이어져 무한 반복 */
@keyframes product-marquee {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}

/* 움직임 최소화 설정 사용자 배려 */
@media (prefers-reduced-motion: reduce) {
  .product-marquee__track {
    animation: none;
  }
}

/* product 반응형
   데스크톱: 가로 아코디언(활성 flex:3, 비활성 flex:1, 높이 700). hover 로 활성 전환.
   - ~1024: 카드 높이·사진·폰트·마퀴 축소(가로 아코디언 유지).
   - ~768 부터: 가로 → 세로 아코디언. 카드를 세로로 쌓고 기본 접힘(사진+태그),
     탭하면 그 카드만 펼쳐 상세 표시(JS 에 click 병행 추가). */
@media screen and (max-width: 1280px) {
  .product {
    padding: 120px 0 220px;
  }
  .product-marquee {
    font-size: 6.5rem;
  }
}

@media screen and (max-width: 1024px) {
  .product {
    padding: 100px 0 180px;
  }
  .product .title-main {
    margin-bottom: 60px;
  }
  .product-card {
    height: 560px;
  }
  .product-photo img {
    width: 48rem;
    max-height: 560px;
  }
  .product-tag {
    padding: 40px 0;
  }
  .product-tag dt {
    font-size: 1.375rem;
  }
  .product-tag dd {
    font-size: 1.125rem;
  }
  .product-detail {
    padding: 44px;
  }
  .product-txt .tit {
    font-size: 2.4rem;
  }
  .product-txt .desc {
    font-size: 1.3rem;
  }
  .product-marquee {
    font-size: 5rem;
  }
}

@media screen and (max-width: 768px) {
  .product {
    padding: 80px 0 120px;
  }
  .product .title-main {
    margin-bottom: 40px;
  }
  /* 가로 아코디언 → 세로 아코디언 */
  .product .content {
    flex-direction: column;
    gap: 14px;
  }
  /* 가로 확장(flex:1/3) 대신 세로 높이로 접힘/펼침 */
  .product-card,
  .product-card.active {
    flex: none;
    width: 100%;
  }
  .product-card {
    height: 200px;
    transition: height 0.5s ease;
  }
  .product-card.active {
    height: 420px;
  }
  /* 사진: 데스크톱 변형(translate/scale)·초대형 폭 해제하고 카드에 맞춰 가운데 */
  .product-photo img {
    width: auto !important;
    height: 74% !important;
    max-height: none;
    transform: none !important;
  }
  /* 접힌 카드 태그: 왼쪽 [제품명 / #태그 #태그] + 오른쪽 + (세로 가운데).
     가운데는 사진 자리라 비워둔다. (활성 카드는 태그 숨김이라 접힌 것만 영향) */
  .product-tag {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
    align-content: center;
    column-gap: 10px;
    row-gap: 6px;
    padding: 0 28px;
  }
  .product-tag dt {
    flex-basis: 100%;
    margin-bottom: 0;
    text-align: left;
  }
  /* + 버튼: 오른쪽에 세로 가운데 */
  .product-tag .plus {
    left: auto;
    bottom: auto;
    right: 28px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.75rem;
  }
  .product-detail {
    padding: 30px;
  }
  /* 상세 문구가 좁은 폭에서 줄바꿈되도록 */
  .product-txt {
    white-space: normal;
  }
  .product-txt .tit {
    font-size: 2rem;
  }
  .product-txt .desc {
    font-size: 1.125rem;
  }
  .product-txt .desc br {
    display: none;
  }
  .product-marquee {
    font-size: 3.5rem;
    bottom: 30px;
  }
}

@media screen and (max-width: 480px) {
  .product {
    padding: 60px 0 90px;
  }
  .product-card {
    height: 180px;
  }
  .product-card.active {
    height: 380px;
  }
  .product-tag dt {
    font-size: 1.25rem;
  }
  .product-tag dd {
    font-size: 1rem;
  }
  .product-detail {
    padding: 24px;
  }
  .product-txt .tit {
    font-size: 1.625rem;
  }
  .product-txt .desc {
    font-size: 1rem;
  }
  .product-marquee {
    font-size: 2.5rem;
  }
}

/* ============================================================
 * Section - patents Patents & projects
 * ============================================================ */
.patents {
  padding: 100px 0;
}

.patents .title-main {
  position: relative;
  margin-bottom: 70px;
}

.patents .title-main h2 {
  margin-bottom: 26px;
}

.patents .title-main div {
  margin-bottom: 6px;
  font-weight: 700;
}

.patents .title-main a {
  position: absolute;
  bottom: 0;
  right: 0;
}

.patents .content {
  background: url(/assets/img/main/patents-bg.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  border-radius: 40px;
  overflow: hidden;
  color: #ffffff;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  height: 500px;
}

.patents-box {
  border-right: 1px solid #fff;
  padding: 50px 60px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.patents-box:last-child {
  border-right: none;
}

.patents-box img {
  width: 100px;
}

.patents-box h3 {
  font-size: 1.8rem;
  font-weight: 700;
}

.patents-box div {
  margin-top: auto;
  align-self: end;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background-color: rgba(0, 44, 54, 0.65);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: 1.5rem;
  line-height: 1;
  transition: all 0.2s;
}

.patents-box:hover div {
  transform: scale(1.1);
}

.patents-box div span {
  font-size: 2rem;
  font-weight: 500;
  margin-bottom: 6px;
}

.patents-box div span b {
  font-size: 4rem;
  font-weight: 700;
}

/* patents 반응형
   데스크톱: 2열 그리드(높이 500), 각 박스 아이콘+제목+원형배지(150).
   - ~768: 2열 → 1열, 가운데 세로 구분선 제거, 높이 auto, MORE 버튼 흐름 배치. */
@media screen and (max-width: 1280px) {
  .patents .content {
    height: 440px;
  }
}

@media screen and (max-width: 1024px) {
  .patents {
    padding: 80px 0;
  }
  .patents .content {
    height: 400px;
  }
  .patents-box {
    padding: 40px 44px;
  }
  .patents-box h3 {
    font-size: 1.5rem;
  }
  .patents-box div {
    width: 130px;
    height: 130px;
    font-size: 1.3rem;
  }
  .patents-box div span b {
    font-size: 3.2rem;
  }
}

@media screen and (max-width: 768px) {
  .patents {
    padding: 60px 0;
  }
  .patents .title-main {
    margin-bottom: 40px;
  }
  /* 절대배치 MORE → 제목 아래 흐름 배치 */
  .patents .title-main a {
    position: static;
    display: inline-flex;
    margin-top: 20px;
  }
  /* 2열 → 1열 */
  .patents .content {
    grid-template-columns: 1fr;
    height: auto;
  }
  .patents-box {
    border-right: none;
    padding: 36px 30px;
    min-height: 240px;
  }
  .patents-box:first-child {
    border-bottom: 1px solid #fff;
  }
  .patents-box img {
    width: 80px;
  }
}

@media screen and (max-width: 480px) {
  .patents-box {
    padding: 30px 24px;
    min-height: 200px;
  }
  .patents-box h3 {
    font-size: 1.375rem;
  }
  .patents-box div {
    width: 110px;
    height: 110px;
    font-size: 1.125rem;
  }
  .patents-box div span {
    font-size: 1.625rem;
  }
  .patents-box div span b {
    font-size: 2.75rem;
  }
}

/* ============================================================
 * Section - latest
 * ============================================================ */
.latest {
  padding: 20px 0 100px;
}

.latest .title-main {
  position: relative;
  margin-bottom: 30px;
}

/* latest 반응형
   뉴스 목록 자체는 스킨(g5/skin/latest/news/style.css)이 이미 반응형 처리.
   여기선 섹션 여백만 단계 축소. */
@media screen and (max-width: 1024px) {
  .latest {
    padding: 20px 0 80px;
  }
}

@media screen and (max-width: 768px) {
  .latest {
    padding: 10px 0 60px;
  }
  .latest .title-main {
    margin-bottom: 20px;
  }
}

@media screen and (max-width: 480px) {
  .latest {
    padding: 10px 0 50px;
  }
}

/* ============================================================
 * Section - support PRIONE Support
 * ============================================================ */
.support {
  background-color: #f5f8fc;
  padding: 100px 0;
}

.support .title-main {
  text-align: center;
  margin-bottom: 70px;
}

.support .title-main h2 {
  margin-bottom: 26px;
}

.support .title-main div {
  font-weight: 700;
}

.support-img {
  text-align: center;
}

.support-card {
  max-width: 1400px;
  width: 100%;
  margin: 0 auto;
  margin-top: -40px;
  display: grid;
  grid-template-columns: 0.55fr 0.55fr 0.9fr;
  gap: 20px;
}

.support-card li {
  color: #fff;
  border-radius: 20px;
  padding: 30px;
}

.support-card .careers {
  background-color: #002143;
}

.support-card .contact {
  background-color: #003989;
}

.support-card .catalog {
  background-color: rgba(87, 87, 87, 0.85);
}

.support-card .long {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.support-card .short,
.support-card .short a {
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.support-card .short h3 {
  font-size: 1.875rem;
  font-weight: 700;
}

.support-card .short p {
  font-size: 1.25rem;
}

.support-card .short img {
  width: 80px;
  margin-top: auto;
  align-self: end;
}

.support-card .down {
  display: flex;
  gap: 16px;
}

.support-card .down a {
  flex: 1;
  height: 170px;
  border: 1px solid #fff;
  border-radius: 5px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 6px;
  font-size: 0.9rem;
  font-weight: 300;
  transition: all 0.3s;
}

.support-card .down a:hover {
  background-color: rgba(255, 255, 255, 0.3);
}

.support-card .down a img {
  width: 20px;
}

/* support 반응형
   데스크톱: 3열(careers/contact/catalog) + 상단 카탈로그 이미지(margin-top:-40 겹침).
   - ~1024: 2열, catalog(long)는 두 칸 폭.
   - ~768: 1열 스택.
   - ~480: catalog 내부(정보|다운로드) 세로, 다운 버튼 축소. */
@media screen and (max-width: 1280px) {
  .support {
    padding: 80px 0;
  }
}

@media screen and (max-width: 1024px) {
  .support .title-main {
    margin-bottom: 50px;
  }
  .support-img img {
    width: 100%;
    max-width: 640px;
  }
  .support-card {
    grid-template-columns: 1fr 1fr;
  }
  /* 카탈로그는 두 칸 폭 차지 */
  .support-card .catalog {
    grid-column: 1 / -1;
  }
}

@media screen and (max-width: 768px) {
  .support {
    padding: 60px 0;
  }
  /* 채용공고·문의는 2열 유지(카탈로그는 두 칸 폭). 책 이미지와 안 겹치게 여백 양수로 */
  .support-card {
    grid-template-columns: 1fr 1fr;
    margin-top: 20px;
  }
  .support-card li {
    padding: 24px;
  }
  /* 채용공고·문의 버튼은 최대한 정사각형 */
  .support-card > .careers,
  .support-card > .contact {
    aspect-ratio: 1 / 1;
  }
  .support-card .short h3 {
    font-size: 1.625rem;
  }
  .support-card .short p {
    font-size: 1.125rem;
  }
  .support-card .short img {
    width: 64px;
  }
}

@media screen and (max-width: 480px) {
  /* 카탈로그 내부(정보 | 다운로드 2칸) → 세로 */
  .support-card .long {
    grid-template-columns: 1fr;
  }
  .support-card .down a {
    height: 130px;
  }
  /* 정사각형 채용공고·문의 안에 내용이 넘치지 않게 축소 */
  .support-card > li.short {
    padding: 18px;
  }
  .support-card > li.short h3 {
    font-size: 1.25rem;
  }
  .support-card > li.short p {
    font-size: 0.9375rem;
  }
  .support-card > li.short img {
    width: 44px;
  }
}