/* ==============================
   기본 스타일 초기화
============================== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: Arial, sans-serif;
  line-height: 1.5;
}

/* ==============================
   웹폰트: Jeju Gothic
============================== */
@font-face {
  font-family: 'Jeju Gothic';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_231029@1.1/JalnanGothic.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* 기본 텍스트 스타일 */
.ag-highlight-title,
.ag-section-left h2,
.ag-section-left p {
  font-family: 'Jeju Gothic', sans-serif !important;
  font-weight: 400;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  letter-spacing: .02em;
}

/* ==============================
   헤더 (PC 버전 기본)
============================== */
header {
  background-color: #fff;
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: 20px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  flex-direction: row;
}

header .ag-logo img {
  height: 60px;
}

header .ag-center {
  flex-grow: 1;
  text-align: center;
}

header .ag-partner-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 313px;
  padding: 7px 30px 7px 50px;
  margin-left: -10px;
  margin-right: 24px;
  border: 1px solid #bfbfbf;
  border-radius: 10px;
  background: #fff;
  color: #003366;
  font-size: 30px;
  font-weight: bold;
  text-align: center;
  text-decoration: none;
  box-shadow: 0 4px 6px rgba(0,0,0,.1);
  transition: background-color .3s, box-shadow .3s;
}

header .ag-partner-btn .icon {
  background: #7fbae7;
  color: #fff;
  border-radius: 50%;
  width: 40px; height: 40px;
  display: flex; justify-content: center; align-items: center;
  margin-left: 30px;
  font-size: 18px;
}

header .ag-partner-btn:hover {
  background: #f0f8ff;
  box-shadow: 0 6px 12px rgba(0,0,0,.2);
}

/* 오른쪽 텍스트 */
header .ag-right {
  text-align: left;
}

header .umbot-text {
  font-size: 46px !important;
  color: #459bdc !important;
  font-weight: 800 !important;
  margin: 0 10px 0 0;
  display: inline-block;
}

header .ag-right p {
  font-size: 16px;
  color: #333;
  font-weight: 700;
  margin-left: 0;
  display: inline-block;
  line-height: 1.3;
}

header .ag-right p br {
  display: block;
}

/* ==============================
   Section 1 : 메인 배너
================================== */

/* 메인 배너 */
.ag-hero {
  position: relative;
  width: 100%;
  height: 800px; /* PC 기준 높이 */
  display: flex;
  justify-content: center;
  align-items: center;
  background: url('../img/main_bg.jpg') center/cover no-repeat;
  overflow: hidden;
}

/* 콘텐츠 래퍼 */
.ag-hero-inner {
  position: absolute;
  inset: 0;
  width: min(90%, 1300px); /* 90% 이내에서 1300px 제한 */
  margin: 0 auto;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  justify-content: space-between;
  align-items: center;
  pointer-events: none;
}

/* 상단 좌측 배너 이미지 */
.ag-hero-left {
  position: absolute;
  top: 0;
  left: -50px;
  z-index: 2;
  pointer-events: none;
}
/* PC에서 배너 이미지 크기 설정 */
.ag-hero-left img {
  width: auto;
  height: auto;
  max-width: 90%; /* 최대 너비 90%로 설정 */
  max-height: 90%; /* 최대 높이 90%로 설정 */
}

/* 모바일에서는 배너 이미지 크기 작게 설정 */
@media (max-width: 768px) {
  .ag-hero-left img {
    max-width: 60%; /* 모바일에서는 너비를 60%로 설정하여 작게 보이게 */
    max-height: 60%; /* 모바일에서는 최대 높이를 60%로 설정 */
  }
}


/* 좌측 하단 제품 이미지 */
.ag-hero-left-bottom {
  position: absolute;
  left: -150px;
  bottom: 8%;
  max-width: 479px;
  z-index: 3;
  pointer-events: none;
  filter: drop-shadow(0 14px 30px rgba(0,0,0,.15));
}
.ag-hero-left-bottom img {
  width: 100%;
  height: auto;
  display: block;
}

/* 상단 중앙 텍스트 배너 이미지 */
.ag-hero-text-banner {
  position: absolute;
  top: 10%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 4;
}
.ag-hero-text-banner img {
  height: 158px;
  width: auto;
  max-width: 100%;
  display: block;
  position: relative;
  left: 20px;
}

/* 중단 카피 */
.ag-hero-new-text {
  position: absolute;
  top: 30%;
  left: 50%;
  transform: translateX(-50%);
  color: #fff;
  text-align: center;
  line-height: 1.5;
  z-index: 4;
  font-size: clamp(18px, 2.2vw, 22px);
}
.ag-hero-new-text p {
  margin: 10px 0;
  font-weight: 700;
  font-size: clamp(22px, 3vw, 28px);
}

/* 중단 아래 텍스트(이미지) */
.ag-hero-main-text {
  position: absolute;
  top: 40%;
  left: 54%;
  transform: translateX(-50%);
  z-index: 4;
}
.ag-hero-main-text img {
  width: 100%;
  max-width: 603px;
  height: auto;
  display: block;
}

/* 하단 카피 */
.ag-hero-footer-text {
  position: absolute;
  top: 70%;
  left: 50%;
  transform: translateX(-50%);
  color: #fff;
  text-align: center;
  line-height: 1.5;
  z-index: 4;
  font-size: clamp(22px, 3.4vw, 36px);
  font-weight: 700;
}
.ag-hero-footer-text p {
  margin: 10px 0;
}
.blue-text {
  color: #00b7ee;
}

/* 우측 장식 이미지 */
.ag-hero-right {
  position: absolute;
  top: 75%;
  right: 3%;
  transform: translateY(-50%);
  max-width: 22%;
  z-index: 2;
  pointer-events: none;
}
.ag-hero-right img {
  width: 100%;
  height: auto;
  display: block;
}



/* 모바일 */
@media (max-width: 768px) {
  /* 헤더 수직 정렬 */
  header {
    flex-direction: column; /* 세로 정렬 */
    align-items: center;
  }

  header .ag-logo img {
    height: 60px;
  }

  header .ag-center {
    margin-top: 10px;
  }

  /* 협력사 모집 버튼 크기 및 스타일 */
  header .ag-partner-btn {
    width: 230px; /* 버튼 크기 조정 */
    font-size: 18px;
    margin-bottom: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: auto;
    margin-right: auto;
  }

  header .ag-partner-btn .icon {
    width: 24px;
    height: 24px;
    font-size: 14px;
  }

  /* 오른쪽 텍스트 스타일 */
  header .ag-right {
    display: flex;
    flex-direction: row; /* 한 줄로 배치 */
    justify-content: center;
    align-items: center;
    font-size: 18px;
    text-align: center;
    margin-top: 10px;
  }

  /* UmBot 텍스트 스타일 */
  header .umbot-text {
    font-size: 22px !important;
    color: #459bdc !important;
    font-weight: 800 !important;
    margin: 0;
  }

  /* UmBot 텍스트와 그 옆의 텍스트 한 줄로 배치 */
  header .ag-right p {
    font-size: 16px;
    letter-spacing: -0.5px;
    color: #333;
    font-weight: 700;
    margin-left: 10px;
    line-height: 1.0;
    white-space: nowrap; /* 한 줄로 표시 */
  }

  /* 줄바꿈을 없애서 한 줄로 보이게 */
  header .ag-right p br {
    display: none;
  }

  /* 메인 배너 */
  .ag-hero {
    height: 560px; /* 모바일 화면에 맞게 높이 조정 */
  }

  .ag-hero-left {
    width: 30vw; /* 상품 이미지 크기 조정 */
    left: 0;
  }

  /* 상품 이미지 크기 키우기 */
  .ag-hero-left-bottom {
    left: 50%;
    bottom: 15%;
    transform: translateX(-50%);
    width: 55%; /* 이미지 크기 확대 */
  }

  .ag-hero-text-banner {
    top: 8%;
  }

  .ag-hero-text-banner img {
    height: 70px;
    width: 100%; /* 세로 크기 설정, 가로는 100%로 확장 */
    object-fit: contain;
    left: 0;
  }

  .ag-hero-new-text {
    top: 23%;
    font-size: 16px;
  }

  .ag-hero-new-text p {
    font-size: 18px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .ag-hero-main-text {
    top: 33%;
    width: 77%;
  }

  .ag-hero-main-text img {
    max-width: 100%;
  }

  .ag-hero-footer-text {
    top: 86%;
    font-size: 16px;
  }

  .ag-hero-right {
    display: block;
  }
}


@media (max-width: 768px) {
  /* 메인 배너 */
  .ag-hero {
    height: 560px; /* 모바일 화면에 맞게 높이 조정 */
  }

  .ag-hero-left {
    width: 30vw; /* 상품 이미지 크기를 100%로 확장 */
    left: 0; /* 위치 조정 */
  }

  /* 상품 이미지 크기 키우기 */
  .ag-hero-left-bottom {
    left: 50%;
    bottom: 15%;
    transform: translateX(-50%);
    width: 55%; /* 이미지 크기 확대 */
    height: auto;
  }

  .ag-hero-text-banner {
    top: 8%;
  }

  .ag-hero-text-banner img {
    height: 70px; /* 세로 크기 설정 */
    width: auto;  /* 가로 크기는 비율에 맞게 자동으로 설정 */
    max-width: 100%; /* 가로 크기가 100%를 넘지 않도록 설정 */
    object-fit: contain; /* 이미지 비율 유지 */
    left: 0; /* 위치 설정 */
  }

  .ag-hero-new-text {
    top: 23%;
    font-size: 16px;
  }

.ag-hero-new-text p {
  font-size: 18px;
  white-space: nowrap; /* 텍스트가 한 줄로 표시되도록 */
  overflow: hidden;    /* 넘치는 텍스트 숨김 */
  text-overflow: ellipsis; /* 텍스트가 넘치면 "..."으로 표시 */
}

  .ag-hero-main-text {
    top: 33%;
	width: 77%; /* 이미지 크기 확대 */
  }

  .ag-hero-main-text img {
    max-width: 100%;
  }

  .ag-hero-footer-text {
    top: 86%;
    font-size: 16px;
  }

  .ag-hero-right {
    display: block;
  }
}







/* ==============================
   Section 2 : 무료체험 체크포인트
============================== */

/* 섹션 래퍼 (데스크탑 기본) */
.ag-section-two {
  width: 100%;
  height: 1055px; /* 데스크탑 고정 높이 유지 */
  padding: 80px 0;
  background-color: #f4f4f4;
  position: relative;
}

/* 텍스트 영역 (상단) */
.ag-section-left {
  width: 100%;
  text-align: center;
  position: relative;
  z-index: 2;
}

/* 1줄: 회색 라운드 배지 */
.ag-highlight-title {
  display: inline-block;
  padding: 9px 34px 4px;
  background-color: #898989;
  border-radius: 40px;
  font-size: 34px;
  color: #fff;
  margin-bottom: 15px;
}
.ag-highlight-title span {
  color: #ffe900;
}

/* 2줄: 타이틀 */
.ag-section-left h2 {
  font-size: 76px;
  font-weight: 900;
  margin: 15px 0 10px;
  color: #333;
}
.ag-section-left h2 .ag-red {
  color: #ce1d25;
}

/* 3줄: 설명 */
.ag-section-left p {
  font-size: 40px;
  color: #555;
  margin: 10px 0;
}

/* 인라인 강조 박스 (붉은색) */
.ag-box-red {
  background-color: #e60000;
  color: #fff;
  padding: 3px 8px;
  border-radius: 2px;
  font-weight: bold;
  display: inline-block;
  margin-left: 5px;
}

/* 초록 테이블 배경 래퍼 (데스크탑 기준 위치) */
.ag-checkpoints-table-wrapper {
  width: 1427px;
  height: 595px;
  position: absolute;
  left: 0;
  top: 320px; /* 테이블 수직 위치(데스크탑) */
  display: block;
  background: url('../img/s02_table_bg.png') center / cover no-repeat;
  margin-left: 0;
}

/* 체크포인트 테이블 (공통) */
.ag-checkpoints-table {
  border-collapse: separate !important;
  border-spacing: 40px 10px; /* 가로/세로 간격 */
  padding-right: 180px; /* 우측 여백 */
  padding-top: 40px; /* 표 전체 상단 여백 */
  width: auto; /* 배경 래퍼 위에서 우측 정렬 */
  margin-left: auto;
}
.ag-checkpoints-table td {
  padding: 28px 40px;
  text-align: center;
  vertical-align: middle;
  width: auto;
}
.ag-checkpoints-table img {
  width: 108px;
  height: 108px;
  object-fit: cover;
  display: block;
  margin: 30px 0 30px auto;
}
.ag-checkpoints-table p {
  font-size: 22px;
  color: #fff;
  margin-top: 15px;
}

/* 2행만 상단 간격 축소 */
.ag-checkpoints-table tr:nth-child(2) td {
  padding-top: 0;
}
.ag-checkpoints-table tr:nth-child(2) p {
  margin-top: 4px;
}

/* 1행 하단 간격 소폭 축소(선택) */
.ag-checkpoints-table tr:first-child td {
  padding-bottom: 2px;
}

/* 우측 인물 이미지 (테이블 위로) */
.ag-section-right {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 100%;
  text-align: right;
  z-index: 10;
}
.ag-section-right img {
  width: 580px;
  height: auto;
  margin-bottom: 0;
}

/* 아이콘 색 왜곡 리셋 */
.ag-sec2 .ag-checkpoints-table img,
.ag-section-two .ag-checkpoints-table img {
  filter: none !important;
  mix-blend-mode: normal !important;
  opacity: 1 !important;
}
.ag-sec2 .ag-checkpoints-table,
.ag-section-two .ag-checkpoints-table {
  filter: none !important;
  opacity: 1 !important;
  mix-blend-mode: normal !important;
}
.ag-sec2 .ag-checkpoints-table td,
.ag-section-two .ag-checkpoints-table td {
  filter: none !important;
  opacity: 1 !important;
  mix-blend-mode: normal !important;
}



/* 태블릿: 1024px 이하 */
@media (max-width: 1024px) {
  .ag-section-two {
    height: auto; /* 고정 높이 해제 */
    padding: 56px 0 72px; /* 하단 여유 */
  }

  /* 배경 래퍼를 고정 배치 → 흐름 안으로 */
  .ag-checkpoints-table-wrapper {
    position: relative;
    top: auto;
    left: auto;
    width: 100%;
    height: auto;
    aspect-ratio: 1427 / 595; /* 배경 비율 유지 */
    padding: 20px 24px; /* 내부 여백 */
    margin: 24px auto 0;
  }

  .ag-checkpoints-table {
    border-spacing: 28px 10px;
    padding-right: 24px; /* 우측 여백 축소 */
    padding-top: 24px;
    margin: 0 auto; /* 중앙 정렬 */
  }
  .ag-checkpoints-table td {
    padding: 20px 24px;
  }
  .ag-checkpoints-table img {
    width: 90px;
    height: 90px;
    margin: 16px auto;
  }
  .ag-checkpoints-table p {
    font-size: 18px;
  }

  .ag-highlight-title {
    font-size: 26px;
    padding: 8px 20px 4px;
  }
  .ag-section-left h2 {
    font-size: 52px;
  }
  .ag-section-left p {
    font-size: 28px;
  }

  .ag-section-right img {
    width: 380px;
  }
}

/* 모바일: 768px 이하 — 2열 그리드 전환 + 여자사진 축소/겹침방지 */
@media (max-width: 768px) {
  .ag-section-two {
    height: auto !important;
    padding: 48px 0 56px !important;
  }

  .ag-checkpoints-table-wrapper {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 8.5;
    padding: 16px;
    margin: 0 auto;
  }

  .ag-checkpoints-table {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important; /* 2열 */
    gap: 20px 24px !important;
    padding-right: 20px;
    padding-top: 20px;
    margin: 0 auto;
  }
  .ag-checkpoints-table td {
    padding: 20px 16px;
    text-align: center;
  }

  .ag-checkpoints-table img {
    width: 80px !important; /* 작은 크기로 축소 */
    height: 80px !important;
    margin: 12px auto;
  }

  .ag-checkpoints-table p {
    font-size: 16px !important;
    margin-top: 12px !important;
  }

  .ag-highlight-title {
    font-size: 22px;
    padding: 6px 16px 4px;
  }
  .ag-section-left h2 {
    font-size: 40px;
  }
  .ag-section-left p {
    font-size: 22px;
  }

  /* 여자사진 축소 및 겹침 방지 */
  .ag-section-right {
    position: absolute !important;
    bottom: 0 !important;
    right: 1% !important;
    z-index: 2 !important; /* 그리드보다 위로 */
    margin: 0 !important;
  }

  .ag-section-right img {
    width: 170px !important; /* 이미지 크기 축소 */
    height: auto !important;
    margin: 0 !important;
  }
}

/* 모바일 최종: 6개 항목 위치 및 스타일 조정 */
@media (max-width: 768px) {
  .ag-checkpoints-table-wrapper {
    background: url('../img/s02_table_bg_m.png') left / cover no-repeat !important; /* 배경 포커스 이동 */
    background-size: cover; /* 배경 사이즈 조정 */
  }

  .ag-checkpoints-table {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important; /* 2열 */
    margin: -30px 0 10px 0;

  }

  .ag-checkpoints-table td {
    padding: 26px 4px;
    text-align: center;
  }

  .ag-checkpoints-table img {
    width: 70px !important; /* 여자 사진을 더 작게 축소 */
    height: 70px !important;
    margin: 12px auto;
  }

  .ag-checkpoints-table p {
    font-size: 14px !important; /* 글씨 크기 조금 더 작게 */
    margin-top: 8px !important; /* 글씨와 아이콘 사이 간격 줄임 */
    white-space: nowrap !important; /* 강제로 한 줄로 고정 */
    width: 80% !important; /* 텍스트 폭을 더 좁게 설정 */
    margin: 0 auto !important; /* 중앙 정렬 */
    line-height: 1.4 !important; /* 줄 간격 설정 */
    overflow: visible !important; /* 텍스트가 길어져도 잘리지 않도록 설정 */
  }

  .ag-highlight-title {
    font-size: 22px;
    padding: 6px 16px 4px;
    line-height: 1.4; /* 줄 간격 설정 */
  }

  .ag-section-left h2 {
    font-size: 32px;
    line-height: 1.2; /* 타이틀 두 줄로 나오도록 설정 */    
  }

  /* 두 줄로 타이틀 나오게 */
  .ag-section-left h2 br {
    display: block;
  }

  .ag-section-left h2 span {
    font-size: 32px;  /* 두 번째 줄 크기 설정 */
  }

  .ag-section-left p {
    font-size: 18px; /* 텍스트 크기 조금 더 작게 */
	max-width: 65%;
	margin: 0 auto; /* 수평 중앙 정렬 */
    text-align: center; /* 텍스트 중앙 정렬 */
	margin-bottom: 20px; 
  }
}



/* 6가지 사항 강조 깜박임 */
.ag-box-red {
  background-color: #e60000;
  color: #fff;
  padding: 3px 8px;
  border-radius: 2px;
  font-weight: bold;
  display: inline-block;
  margin-left: 5px;

  animation: blinkBox 1.0s infinite;
}

@keyframes blinkBox {
  0%, 100% { background-color: #e60000; color: #fff; }
  50% { background-color: #ffc600; color: #fff; }
}


  .blink-img {
    width: 600px; /* 이미지 크기 */
    animation: swap 1.4s infinite steps(1); /* 1.4초 주기, 무한 반복 */
  }

  @keyframes swap {
    0%, 49%   { content: url("../img/main_text_01.png"); }
    50%, 100% { content: url("../img/main_text_02.png"); }
  }








/* ========== Section 3 : 동영상  ========== */
.ag-sec3{
  --ag3-max: 1240px; --ag3-red:#e51a2f; --ag3-orange:#ff7a00;
  --ag3-white:#fff; --ag3-text:#e8e8e8; --ag3-video-w:700px;
  --ag3-gap-top:28px; --ag3-gap-btm:16px;
  padding: clamp(48px, 8vw, 96px) 24px;
  background: url('../img/section3_bg.jpg') no-repeat top center / cover;
  color: var(--ag3-text);
  font-family: 'Noto Sans KR', system-ui, -apple-system, sans-serif;
}
.ag-sec3 .ag3__container{ max-width: var(--ag3-max); margin: 0 auto; display:grid; gap: clamp(24px, 5vw, 48px); }

/* Rows */
.ag-sec3 .ag3-row{ display:grid; grid-template-columns: var(--ag3-video-w) 1fr; align-items:center; }
.ag-sec3 .ag3-row--top{ column-gap: var(--ag3-gap-top); margin-top:70px; }
.ag-sec3 .ag3-row--btm{ column-gap: var(--ag3-gap-btm); }

/* Video */
.ag-sec3 .ag3-media{ width: var(--ag3-video-w); }
.ag-sec3 .ag3-card{ border-radius:16px; overflow:hidden; background:rgba(20,20,20,.65); border:1px solid rgba(255,255,255,.10); box-shadow:0 10px 30px rgba(0,0,0,.35); }
.ag-sec3 .ag3-frame{ position:relative; aspect-ratio:16/9; background:#000; isolation:isolate; }
.ag-sec3 .ag3-frame iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; z-index:1; }

/* 전화배지 */
.ag-sec3 .ag3-phone{ position:absolute; top:16px; right:20px; display:flex; flex-direction:column; align-items:center; justify-content:center; border-radius:8px; overflow:hidden; box-shadow:0 6px 16px rgba(0,0,0,.35); z-index:3; width:auto!important; height:auto!important; white-space:nowrap; }
.ag-sec3 .ag3-phone .label{ background:#000; color:#fff; font-weight:900; padding:8px 14px; font-size:18px; line-height:1.15; }
.ag-sec3 .ag3-phone .number{ background:#ffcc33; color:#000; font-weight:900; padding:10px 16px; font-size:26px; line-height:1.15; }
.ag-sec3 .ag3-phone .number a{ color:inherit; text-decoration:none; }

/* Copy */
.ag-sec3 .ag3-copy{ text-align:left; margin-left:60px; }
.ag-sec3 .ag3-hero{ margin:0 0 12px; }
.ag-sec3 .ag3-hero-line{ display:block; font-family:'BM DoHyeon','Noto Sans KR',sans-serif; letter-spacing:-.01em; text-shadow:0 2px 8px rgba(0,0,0,.45); font-size:clamp(28px,4.6vw,48px); line-height:1.3; }
.ag-sec3 .ag3-hero-line--white{ color:var(--ag3-white); }
.ag-sec3 .ag3-hero-line--red{ color:var(--ag3-red); }

/* 배지형 불릿 */
.ag-sec3 .ag3-bullets{ margin:8px 0 0; padding:0; list-style:none; display:grid; gap:10px; text-align:left; }
.ag-sec3 .ag3-bullets li{ position:relative; }
.ag-sec3 .ag3-badge{ position:relative; display:inline-flex; align-items:center; padding:8px 16px; font-weight:800; color:#fff; font-size:clamp(16px,1.6vw,20px); line-height:1.1; }
.ag-sec3 .ag3-badge--red::before, .ag-sec3 .ag3-badge--orange::before{ content:""; position:absolute; z-index:-1; inset:0; left:-2px; right:-2px; transform:skewX(-14deg); transform-origin:left center; border-radius:2px; }
.ag-sec3 .ag3-badge--red::before{ background:var(--ag3-red); }
.ag-sec3 .ag3-badge--orange::before{ background:var(--ag3-orange); }
.ag-sec3 .ag3-bullets li p{ margin:.25rem 0 7px; color:#e6e6e6; font-size:clamp(14px,1.6vw,16px); }

/* Row2 text */
.ag-sec3 .ag3-text{ text-align:left; }
.ag-sec3 .ag3-title{ margin:0 0 8px; font-family:'BM DoHyeon','Noto Sans KR',sans-serif; line-height:1.3; font-size:clamp(30px,3.2vw,42px); }
.ag-sec3 .ag3-title .line1{ display:block; color:#fff; }
.ag-sec3 .ag3-title .line2{ display:block; color:var(--ag3-red); }
.ag-sec3 .ag3-desc{ margin:0; color:#ddd; font-size:clamp(14px,1.6vw,18px); }

/* 데스크톱 정렬 */
@media (min-width:981px){
  .ag-sec3 .ag3-row--btm{ margin-top:120px; margin-bottom:40px; grid-template-columns:1fr var(--ag3-video-w)!important; column-gap:56px!important; align-items:start!important; }
  .ag-sec3 .ag3-row--btm .ag3-text{ justify-self:end!important; align-self:start!important; transform:translateY(30px); }
}

/* 모바일: 텍스트 → 동영상1 + 하단여백 + 전화배지 축소 */
@media (max-width:980px){
  .ag-sec3 {
    margin-top: -30px; 
  }
  .ag-sec3 .ag3-row{ grid-template-columns:1fr; row-gap:14px; }
  .ag-sec3 .ag3-media{ width:100%; }
  .ag-sec3 .ag3-copy{ margin-left:0; }
  .ag-sec3 .ag3-row--top{ grid-template-columns:1fr!important; grid-template-areas:"copy" "media"; row-gap:14px; margin-bottom:22px; }
  .ag-sec3 .ag3-row--top .ag3-copy{ grid-area:copy; margin:0 0 8px; }
  .ag-sec3 .ag3-row--top .ag3-media{ grid-area:media; }
  .ag-sec3 .ag3-row--btm{ margin-top:12px; margin-bottom:0; }

  .ag-sec3 .ag3-phone{ top:12px; right:12px; border-radius:6px; }
  .ag-sec3 .ag3-phone .label{ padding:6px 10px; font-size:14px; }
  .ag-sec3 .ag3-phone .number{ padding:6px 12px; font-size:18px; }
}








/* ========== Section 4 : 한국 품질만족 1위  ========== */
.ag-section-four{
  position:relative; width:100%;
  padding: clamp(56px, 8vw, 96px) 24px clamp(48px, 6vw, 72px);
  color:#fff; overflow:hidden; background:transparent;
}
.ag-section-four::before{ content:""; position:absolute; inset:0; z-index:0; background:url('../img/section4_bg.jpg') center/cover no-repeat; }
.ag-section-four > *{ position:relative; z-index:1; }
.ag-four__container{ max-width:1240px; margin:0 auto; }

/* 헤더 */
.ag-four__header{ display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:32px; margin-bottom: clamp(24px, 3.5vw, 36px); }
.ag-four__title{ grid-column:2; justify-self:center; text-align:center; font-family:'JalnanGothic',sans-serif; font-size: clamp(62px, 6.5vw, 84px); font-weight:400; letter-spacing:-.02em; line-height:1.1; text-shadow:0 2px 0 rgba(0,0,0,.18); }
.ag-four__medal{ grid-column:3; justify-self:end; inline-size: clamp(170px,26vw,320px); }
.ag-four__medal-img{ width:100%; height:auto; display:block; }

/* 본문: 좌 인증서 / 우 불릿 */
.ag-four__grid{ display:grid; grid-template-columns:1.05fr 1fr; gap: clamp(16px, 3.2vw, 32px); align-items:start; }
.ag-four__left{ display:flex; gap: clamp(12px, 2.4vw, 20px); justify-content:flex-start; align-items:flex-start; }
.ag-four__card{ flex:1 1 0; max-width:329px; background:transparent; border:1px solid rgba(255,255,255,.08); box-shadow:0 16px 36px rgba(0,0,0,.35); border-radius:0; overflow:hidden; }
.ag-four__card img{ display:block; width:100%; height:auto; object-fit:cover; }

.ag-four__bullets{ max-width:520px; margin-left:40px; padding:0; list-style:none; display:block; font-family:'JalnanGothic','Noto Sans KR',sans-serif; }
.ag-four__bullet{ position:relative; display:flex; align-items:stretch; background:#0d0d0d; border-radius:16px; overflow:hidden; min-height:60px; padding:0;  margin-top: 20px;  box-shadow:0 10px 22px rgba(0,0,0,.28); }
.ag-four__bullet + .ag-four__bullet{ margin-top:18px; }
.ag-four__num{ position:relative; z-index:0; flex:0 0 auto; display:flex; align-items:center; justify-content:center; padding:5px 20px 0 16px; color:#fff; font-family:'JalnanGothic',sans-serif; font-weight:500; font-size:clamp(22px, 2.6vw, 36px); letter-spacing:-.01em; transform:skewX(-6deg); }
.ag-four__num::before{ content:""; position:absolute; inset:0; z-index:-1; left:-18px; right:-12px; background:#d00111; transform:skewX(-16deg); transform-origin:right center; }
.ag-four__text{ flex:1 1 auto; display:flex; align-items:center; padding:0 4px 0 30px; color:#fff; font-family:'JalnanGothic','Noto Sans KR',sans-serif; font-weight:500; font-size:clamp(16px, 2vw, 20px); letter-spacing:-.01em; transform:skewX(-6deg); }
.ag-four__text .em, .ag-four__text em{ color:#d00111; }

/* PC: 불릿 상단 여백 + 인증서와 간격 */
@media (min-width:1025px){
  .ag-four__grid{ column-gap:44px; }
  .ag-four__bullets{ margin-top:22px; }
}

/* 모바일: 타이틀 1줄 + 메달/타이틀 중앙 + 인증서 2열 */
@media (max-width:640px){
  .ag-four__header{ grid-template-columns:1fr!important; justify-items:center!important; row-gap:10px; margin-bottom:14px; }
  .ag-four__title{ font-size: clamp(24px, 6vw, 32px); margin-bottom:6px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .ag-four__title br{ display:none; }
  .ag-four__medal{ grid-column:1; justify-self:center; inline-size:min(200px,58vw)!important; }

  .ag-four__grid{ grid-template-columns:1fr!important; gap:14px; }
  .ag-four__left{ display:grid!important; grid-template-columns:repeat(2, minmax(0,1fr)); column-gap:10px; row-gap:10px; align-items:start; margin-top:4px; }
  .ag-four__card{ max-width:100%; box-sizing:border-box; transform:scale(.94); transform-origin:top center; }
  .ag-four__bullets{ margin-top:10px; transform:none!important; margin-left:0!important; }
  .ag-four__text{ letter-spacing:-.05em; display: inline-block; transform: scaleX(0.95); transform-origin: left; margin-top: 20px; padding:0 0px 0 30px; }

}
@media (max-width:380px){
  .ag-four__card{ transform:scale(.90); }
}


/* ============== S4 폰트 고정(append-only) ============== */
/* 이미 로드돼 있으면 중복 선언은 무시됨 */
@font-face{
  font-family:'JalnanGothic';
  src:url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_231029@1.1/JalnanGothic.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;  /* 로딩 동안 임시 폰트 사용 → 깜빡임 최소화 */
}

/* 섹션4 내부 텍스트 전부 Jalnan 고정 */
.ag-section-four .ag-four__title,
.ag-section-four .ag-four__text,
.ag-section-four .ag-four__num,
.ag-section-four .ag-four__bullets,
.ag-section-four .ag-four__bullets *,
.ag-section-four .ag-four__card,
.ag-section-four .ag-four__card *{
  font-family: 'JalnanGothic','Noto Sans KR',system-ui,-apple-system,sans-serif !important;
  font-synthesis: none;               
  -webkit-font-smoothing: antialiased;  /* 맥 렌더링 안정화 */
}

.ag-section-four [style*="font-family"]{
  font-family: 'JalnanGothic','Noto Sans KR',system-ui,-apple-system,sans-serif !important;
}


/* 0) 섹션4 내부에 들어온 의도치 않은 배경 제거 */
.ag-section-four,
.ag-section-four .ag-four__header,
.ag-section-four .ag-four__title,
.ag-section-four .ag-four__grid,
.ag-section-four .ag-four__bullets{
  background: transparent !important;
}

/* 1) 섹션 배경(이미지) 강제 복구 */
.ag-section-four{
  position: relative !important;
  overflow: hidden;
}
.ag-section-four::before{
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  background: url('/theme/sample03/img/section4_bg.jpg') center/cover no-repeat !important;
}
/* 내용물은 항상 배경 위 */
.ag-section-four > *{
  position: relative !important;
  z-index: 1 !important;
}

/* 2) PC: 4개 항목(불릿) 상단 여백 + 좌/우 간격 보강 */
@media (min-width: 1025px){
  .ag-section-four .ag-four__grid{
    column-gap: 44px !important;     /* 인증서와 항목 간 간격 */
  }
  .ag-section-four .ag-four__bullets{
    margin-top: 22px !important;     /* 4개 항목 탑 여백 */
  }
}

/* 3) 모바일: 메달(1위 수상)과 타이틀 중앙 정렬 강제 */
@media (max-width: 768px){
  /* 헤더를 단일 컬럼 + 중앙 정렬 */
  .ag-section-four .ag-four__header{
    display: grid !important;
    grid-template-columns: 1fr !important;
    justify-items: center !important;
    row-gap: 10px !important;
    margin-bottom: 14px !important;
  }

  .ag-section-four .ag-four__title{
    grid-column: 1 !important;
    justify-self: center !important;
    text-align: center !important;
    font-size: clamp(24px, 6vw, 32px) !important;
    margin: 0 0 6px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  .ag-section-four .ag-four__title br{ display: none !important; }

  .ag-section-four .ag-four__medal{
    grid-column: 1 !important;
    justify-self: center !important;
    inline-size: min(220px, 60vw) !important;
    margin: 6px auto 0 !important;
  }
  .ag-section-four .ag-four__medal,
  .ag-section-four .ag-four__medal-img,
  .ag-section-four .ag-four__medal img{
    display: block !important;
    margin-left: auto !important;
    margin-right: auto !important;
    height: auto !important;
  }

  /* 본문은 단일 컬럼(인증서 → 항목 순) */
  .ag-section-four .ag-four__grid{
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  /* 인증서 2열(폭 좁으면 자동 줄바꿈 없이 축소) */
  .ag-section-four .ag-four__left{
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
    column-gap: 10px !important;
    row-gap: 10px !important;
    margin-top: 4px !important;
  }
  .ag-section-four .ag-four__card{
    max-width: 100% !important;
    box-sizing: border-box !important;
    transform: scale(.94) !important;   /* 살짝 축소로 두 장 한 줄 확보 */
    transform-origin: top center !important;
  }

  /* 항목 리스트는 인증서 아래로 */
  .ag-section-four .ag-four__bullets{
    margin-top: 10px !important;
    transform: none !important;
    margin-left: 0 !important;
  }
}

/* 초협소에서도 2열 유지하고 싶을 때(선택) */
@media (max-width: 380px){
  .ag-section-four .ag-four__card{ transform: scale(.90) !important; }
}


.ag-sec3 .ag3-bullets,
.ag-sec3 .ag3-bullets li,
.ag-sec3 .ag3-badge{
  background: transparent !important;   /* 전역 배경 누수 차단 */
}

.ag-sec3 .ag3-badge{
  position: relative;
  display: inline-flex;                  /* 텍스트 너비만 차지 */
  align-items: center;
  padding: 8px 16px;
  font-weight: 800;
  color: #fff;
  font-size: clamp(16px,1.6vw,20px);
  line-height: 1.1;
  border-radius: 0;
  overflow: visible;
  isolation: isolate;
}

.ag-sec3 .ag3-badge--red::before,
.ag-sec3 .ag3-badge--orange::before{
  content: "";
  position: absolute; z-index: -1; inset: 0;
  left: -2px; right: -2px;              /* 이음매 방지용 살짝 오버드로우 */
  transform: skewX(-14deg);
  transform-origin: left center;
  border-radius: 2px;
}
.ag-sec3 .ag3-badge--red::before    { background: var(--ag3-red) !important; }
.ag-sec3 .ag3-badge--orange::before { background: var(--ag3-orange) !important; }

/* 배지 아래 설명문단 */
.ag-sec3 .ag3-bullets li p{
  margin: .25rem 0 7px;
  color: #e6e6e6;
  font-size: clamp(14px,1.6vw,16px);
}

/* 리스트 항목 자체가 빨개지는 전역 규칙 대응 */
.ag-sec3 .ag3-bullets li{
  background: transparent !important;
  box-shadow: none !important;
}


.ag-sec3 .ag3-frame{ position: relative; isolation: isolate; }

.ag-sec3 .ag3-phone{
  position: absolute; top: 16px; right: 20px;
  display: inline-flex;                 /* 내용 너비만큼 */
  flex-direction: column;
  align-items: stretch;                 /* 자식 width:100%가 컨테이너 꽉 채움 */
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 6px 16px rgba(0,0,0,.35);
  z-index: 3;

  /* 전역 누수 차단 */
  width: auto !important;
  height: auto !important;
  left: auto !important;
  bottom: auto !important;
}

.ag-sec3 .ag3-phone .label,
.ag-sec3 .ag3-phone .number{
  display: block;
  width: 100%;                        
  text-align: center;
  white-space: nowrap;
  font-weight: 900;
  line-height: 1.15;
}

@media (min-width: 981px){ /* PC 크게 */
  .ag-sec3 .ag3-phone .label{
    background:#000; color:#fff;
    font-size: 18px; padding: 8px 14px;
  }
  .ag-sec3 .ag3-phone .number{
    background:#ffcc33; color:#000;
    font-size: 26px; padding: 10px 16px;
  }
}

@media (max-width: 980px){ /* 모바일 작게 */
  .ag-sec3 .ag3-phone{ top: 12px; right: 12px; border-radius: 6px; }
  .ag-sec3 .ag3-phone .label{
    background:#000; color:#fff;
    font-size: 14px; padding: 6px 10px;
  }
  .ag-sec3 .ag3-phone .number{
    background:#ffcc33; color:#000;
    font-size: 18px; padding: 6px 12px;
  }
  .ag-sec3 .ag3-phone .number a{ color: inherit; text-decoration: none; }
}







/* ==================================
   Section 5 : 상품 테이블
================================== */

:root{
  --ag5-max: 1400px;
  --ag5-teal: #1f8d7e;
  --ag5-gray:#f3f5f6;
  --ag5-dark:#222;
  --ag5-text:#333;
}

/* 섹션 베이스 */
.ag-section-five{
  width:100%;
  padding: 70px 24px 80px;
  background:#fff;
  color:var(--ag5-text);
}
.ag5__container{ max-width:var(--ag5-max); margin:0 auto; }

/* 히어로 타이틀 */
.ag5__hero-title{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; width:100%;
  margin:0 auto clamp(40px, 6vw, 70px);
}
.ag5__title{
  margin:20px auto 0; max-width:1100px;
  line-height:1.25; font-weight:900; color:#111; text-align:center;
}
.ag5__title .line1,
.ag5__title .line2,
.ag5__title .line3,
.ag5__title .em{
  font-family: 'JalnanGothic','Noto Sans KR',system-ui,-apple-system,sans-serif !important;
  font-weight: normal; letter-spacing: -0.02em;
}
.ag5__title .line1,
.ag5__title .line2,
.ag5__title .line3{ display:inline-block; width:auto; }
.ag5__title .line1{ font-size: clamp(20px, 3vw, 28px); color:#555; margin-bottom:26px; }
/* ⬇️ PC 원복(크게) */
.ag5__title .line2{ font-size: clamp(66px, 5vw, 72px); margin-bottom:8px; }
.ag5__title .line3{ font-size: clamp(58px, 4.5vw, 65px); color:#000; }
.ag5__title .em{ color:#285c58; }

/* 히어로 레이아웃: 좌/우 */
.ag5__hero{
  display:flex; align-items:flex-start; gap:28px; margin-top:26px;
}

/* 좌측: 제품 + 카피(겹치기) — PC 원복 수치 */
.ag5__left{ position:relative; flex:1 1 50%; min-width:0; }
.ag5__mainimg{
  position:relative; top:-250px; left:-130px;           /* 원복 위치 */
  display:block; width:306px; height:auto;
  filter:drop-shadow(0 14px 30px rgba(0,0,0,.15));
}
.ag5__copy{ position:absolute; top:15px; left:110px; z-index:2; }
.ag5__copy-img{ display:block; max-width:577px; height:auto; }

/* 우측: 특징 카드(통이미지) — PC 원복 수치 */
.ag5__card{ flex:1 1 50%; min-width:0; display:flex; justify-content:flex-start; margin-top:16px; }
.ag5__card--image{ background:none; padding-bottom:24px; border:0; box-shadow:none; border-radius:16px; overflow:hidden; }
.ag5__card-img{ display:block; max-width:577px; height:auto; margin:0; }
/* ag05_img02만(전 구간) 여백 추가 */
.ag5__card-img[src*="ag05_img02.png"]{ margin-bottom:28px; }

/* ===== 제품 카드 그리드 ===== */
.ag5__products{
  display:grid; grid-template-columns: repeat(4, 1fr);
  gap:30px; margin-top: -40px;
}

/* 단일 카드 */
.ag5p{
  display:flex; flex-direction:column;
  background:#fff; border:1px solid #c5cbd3; border-radius:0;
  box-shadow:0 12px 24px rgba(0,0,0,.25); overflow:visible;
}
.ag5p__head{
  display:flex; align-items:center; justify-content:center; text-align:center;
  background:#008678; color:#fff; font-family:'JalnanGothic','Noto Sans KR',system-ui,-apple-system,sans-serif;
  font-weight:500; font-size:24px; padding:13px 18px 8px; border-bottom:1px solid rgba(0,0,0,.06);
}
.ag5p__head > *{ margin:0 !important; float:none !important; }
.ag5p__body{ padding:18px; text-align:center; }
.ag5p__body img{
  display:block; width:100%; max-width:280px; height:auto; margin:0 auto 4px;
  object-fit:contain; filter:none !important;
}
.ag5p__speclist{ list-style:none; margin:0; padding:0; display:grid; gap:6px; }
.ag5p__speclist li{ display:grid; grid-template-columns:100px 1fr; align-items:center; gap:5px; }
.ag5p__speclist .key{
  min-width:100px; justify-self:start; text-align:center; background:#008678; color:#fff;
  font-weight:500; font-size:14px; padding:6px 12px; border-radius:6px;
}
.ag5p__speclist .val{
  justify-self:stretch; text-align:left; background:#eee; color:#333; font-size:14px;
  padding:6px 7px; letter-spacing:-0.02em; border-radius:6px;
}
/* 3번째 항목만 두 줄 높이 */
.ag5p__speclist li:nth-child(3){ align-items:stretch; }
.ag5p__speclist li:nth-child(3) .val{
  display:flex; align-items:center; line-height:1.0; min-height:calc(1.6em * 2);
  padding:10px 6px; white-space:normal; word-break:break-word;
}
.ag5p__speclist li:nth-child(3) .key{ display:flex; align-items:center; justify-content:center; }

.ag5p__foot{ background:transparent; border-top:none; text-align:center; padding:0 0 18px; }
.ag5p__foot > strong{
  display:inline-block; background:#777; color:#fff; font-weight:800;
  padding:5px 25px; border-radius:999px; box-shadow:0 6px 14px rgba(0,0,0,.12);
}
.ag5p__foot > strong .price{ font-size:28px; color:#0ff; font-weight:600; }


/* 큰 태블릿 이하: 오프셋 완화만 */
@media (max-width: 1200px){
  .ag5__mainimg{ top:-180px; left:-80px; }
  .ag5__copy{ left:64px; }
}

/* 태블릿(≤980px): 세로 스택 + 절대배치 해제 */
@media (max-width: 980px){
  .ag5__hero{ flex-direction:column; align-items:center; gap:18px; margin-top:10px; }
  .ag5__left{ width:100%; }

  /* 카피/제품 이미지 일반 흐름으로 전환 */
  .ag5__copy{ position:static; z-index:auto; text-align:center; margin-bottom:8px; }
  .ag5__copy-img{ width:min(92vw, 540px); max-width:100%; height:auto; }

  .ag5__mainimg{
    position:relative; top:0; left:0; transform:none; margin:0 auto;
    width:min(64vw, 360px); height:auto;
    filter:drop-shadow(0 10px 24px rgba(0,0,0,.15));
  }

  /* 우측 카드 이미지도 중앙·가변 */
  .ag5__card{ width:100%; justify-content:center; margin-top:0; }
  .ag5__card-img{ width:min(92vw, 560px); max-width:100%; height:auto; }

  /* 히어로 타이틀 축소(태블릿 이하) */
  .ag5__title .line2{ font-size: clamp(34px, 8vw, 48px); }
  .ag5__title .line3{ font-size: clamp(28px, 7.2vw, 40px); }

  /* ag05_product.png — 모바일에서만 70% 축소 */
  .ag5__mainimg[src*="ag05_product.png"]{
    width: calc(min(64vw, 360px) * .7); 
	margin-bottom: 40px;
  }

  /* ag05_img02.png — 모바일 하단 여백 보강 */
  .ag5__card--image{ padding-bottom: 28px; }
  .ag5__card-img[src*="ag05_img02.png"]{
    margin-bottom: 24px !important;
    display: block;
  }
}

/* 모바일(≤560px): 더 타이트하게 */
@media (max-width: 560px){
  .ag5__hero-title{ margin-bottom:28px; }
  .ag5__title .line1{ margin-bottom:16px; }

  .ag5__copy-img{ width:86vw; }
  .ag5__mainimg{ width:62vw; }

  /* ag05_product.png — 모바일 최하단 구간에서도 70% 유지 */
  .ag5__mainimg[src*="ag05_product.png"]{
    width: calc(62vw * .7);
  }

  /* ag05_img02.png — 더 좁은 화면에서 여백 조금 추가 */
  .ag5__card--image{ padding-bottom: 32px; }
  .ag5__card-img[src*="ag05_img02.png"]{
    margin-bottom: 56px !important;
  }
}

/* 카드 그리드 반응형 */
@media (max-width: 900px){
  .ag5__products{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px){
  .ag5__products{ grid-template-columns: 1fr; }
  .ag5p__body img{ max-width:240px; }
}






/* ==================================
   Section 6 : 보도자료 
================================== */

/* 섹션 래퍼 */
.ag-section-six{
  position: relative;
  width: 100%;
  padding: 90px 24px;
  overflow: hidden;
  background: transparent;
}

/* 배경 이미지 + 컬러 오버레이 */
.ag6__bg{
  position: absolute;
  inset: 0;
  background: url('/mnt/data/06.jpg') center/cover no-repeat; /* 프로젝트 경로에 맞게 교체 */
  z-index: 0;
}
.ag-section-six::before{
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(155,209,203,.85); /* 불투명 흰배경 방지, 색감 유지 */
  z-index: 1;
}

/* 컨테이너 */
.ag6__container{
  position: relative;
  z-index: 2;
  max-width: 1460px;
  margin: 0 auto;
}

/* 헤드 타이틀 (한 줄 구성) */
.ag6__hero-title{
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: 100%;
  margin: 0 auto clamp(56px, 6vw, 74px);
  background: transparent;
}
.ag6__title{
  display: flex;
  justify-content: center;
  gap: 10px;
  margin: 0 auto;
  max-width: 1100px;
  font-family: 'Jeju Gothic', sans-serif;
  font-weight: 500;
  line-height: 1.1;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: -20px;
}
.ag6__title .line1{
  font-size: clamp(36px, 5.2vw, 62px);
  color: #0099a7;
  opacity: .95;
}
.ag6__title .line2{
  font-size: clamp(36px, 5.2vw, 62px);
  color: #006561;
}

/* 뉴스 카드 그리드 */
.ag6__news{
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 24px;
}

/* 카드 */
.ag6card{
  display: flex;
  flex-direction: column;
  background: #fff;
  color: #333;
  border-radius: 18px;
  box-shadow: 0 8px 22px rgba(0,0,0,.18);
  padding: 25px;
  height: auto;
  min-height: 500px; /* 모바일에서만 해제 */
}
.ag6card img{
  width: 100%;
  height: 280px;
  object-fit: contain;
  margin-bottom: 14px;
}
.ag6card__title {
  font-size: 18px; /* 기본 글꼴 크기 */
  font-weight: bold; /* 제목을 두껍게 */
  color: #333; /* 글꼴 색상 */
  margin: 10px 0; /* 제목의 위아래 여백 */
  line-height: 1.4; /* 줄 간격 조정 */
  text-align: left; /* 제목을 왼쪽 정렬 */
  text-decoration: none; /* 링크 스타일 제거 */
}
.ag6card__title:hover {
  color: #007a5f; /* 마우스 올렸을 때 색상 변경 */
}
.ag6card__desc{
  font-size: 14px;
  color: #4a4a4a;
  line-height: 1.6;
  margin: 0 0 12px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ag6card__link{
  margin-top: auto;
  align-self: flex-start;
  color: #0f6f65;
  font-weight: 800;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
}
.ag6card__link:hover{ opacity: .85; }

/* 반응형 */
@media (max-width: 1024px){
  .ag6__news{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 540px){
  /* 섹션/타이틀 여백 축소 */
  .ag-section-six{ padding: 36px 16px; }      /* 90px → 36px */
  .ag6__hero-title{ margin: 0 auto 18px; }
  .ag6__title{ margin: 0 auto; }

  /* 그리드/카드 압축 → 기사 아래 흰여백 감소 */
  .ag6__news{ gap: 16px; }                    /* 24px → 16px */
  .ag6card{
    padding: 16px;                            /* 30px → 16px */
    min-height: 0;                            /* 500px 제한 해제 */
  }
  .ag6card img{
    height: 150px;                            /* 280px → 150px */
    margin-bottom: 10px;
  }
  .ag6card__title{ margin: 2px 0 6px; }
  .ag6card__desc{
    margin: 0 0 6px;
    -webkit-line-clamp: 2;                    /* 내용 줄 수 축소 */
  }
  .ag6card__link{ margin-top: 4px; }
}






/* ==================================
   Section 7 : 설치 후기 
================================== */

:root{
  --ag7-max: 1400px;
  --ag7-yellow: #ffd54d;
  --ag7-card-shadow: 0 14px 28px rgba(0,0,0,.25);
}

/* 섹션 + 배경 */
.ag-section-seven{
  position: relative;
  width: 100%;
  padding: clamp(60px, 7vw, 100px) 24px;
  overflow: hidden;
  color: #fff;
  background: transparent; /* 흰 배경 차단 */
}
.ag7__bg{
  position: absolute; inset: 0; z-index: 0;
  background: url('/theme/sample03/img/section7_bg.jpg') center / cover no-repeat;
}
.ag7__container{ position: relative; z-index: 1; max-width: var(--ag7-max); margin: 0 auto; }

/* 헤더 */
.ag7__header{
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  text-align: center;
  margin-bottom: clamp(32px, 5vw, 56px);
  background: transparent;
}
.ag7__titles,
.ag7__title{ background: transparent; }

/* 트로피(기본 = PC 레이아웃) */
.ag7__trophy{
  position: absolute;
  left: -180px;
  top: -70px;
  transform: translateY(-10%);
}
.ag7__trophy-img{ display: block; height: auto; } /* PC는 본래 크기 사용 */

/* 텍스트 타이틀(텍스트 버전일 때) */
.ag7__titles{ max-width: 900px; }
.ag7__title{
  margin: 0; line-height: 1.15; font-weight: 900;
  display: inline-flex; gap: 14px; flex-wrap: wrap; align-items: baseline; justify-content: center;
}
.ag7__title .w{ font-size: clamp(24px, 3.8vw, 42px); color: #eaf6ff; }
.ag7__title .y{
  font-size: clamp(28px, 4.6vw, 54px);
  color: #1b3340; background: var(--ag7-yellow);
  padding: 6px 12px; border-radius: 10px; box-shadow: inset 0 -2px 0 rgba(0,0,0,.12);
}
/* 이미지 타이틀을 쓰는 경우 */
.ag7__titles img{ display: block; width: auto; max-width: 900px; height: auto; }

/* 카드 그리드 */
.ag7__grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: clamp(24px, 3vw, 40px);
}

/* 카드 공통 */
.ag7card{
  position: relative;
  background: #fff;
  border-radius: 16px;
  box-shadow: var(--ag7-card-shadow);
  color: #333;
  display: flex; flex-direction: column;
  overflow: visible; /* 이미지 돌출 허용 */
}
.ag7card__media{ position: relative; height: 180px; overflow: visible; }
.ag7card__media img{
  width: calc(100% - 24px); height: 100%;
  object-fit: cover; display: block; margin: 0 auto;
  transform: translateY(-12px);
  border-radius: 12px;
  box-shadow: 0 12px 24px rgba(0,0,0,.28);
}
.ag7card__place{
  position: absolute; left: 12px; bottom: 20px;
  background: rgba(0,0,0,.6); color: #fff; font-weight: 900;
  padding: 6px 10px; border-radius: 8px; letter-spacing: .02em;
  backdrop-filter: blur(2px);
}
.ag7card__body{ padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 10px; }
.ag7card__meta{ display: flex; align-items: center; justify-content: space-between; font-size: 13px; color: #777; }
.ag7card__label{ font-weight: 800; color: #888; }
.ag7card__stars{ color: #ffcc33; font-size: 16px; letter-spacing: 2px; }
.ag7card__text{
  font-size: 14px; color: #444; line-height: 1.6;
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
}

/* ===== 데스크톱 전용(≥1025px): 원래 배치 + 지그재그 + 2행 강조 ===== */
@media (min-width: 1025px){
  .ag7__header{ margin-top: 32px; }  /* 상단 여백 */
  .ag7__grid{ row-gap: 80px; }

  .ag7__grid .ag7card{ transition: transform .25s ease; }
  .ag7__grid .ag7card:nth-child(3n+2){ transform: translateY(-16px); }
  .ag7__grid .ag7card:nth-child(3n+1),
  .ag7__grid .ag7card:nth-child(3n){   transform: translateY(12px); }

.ag7__grid .ag7card:nth-child(n+4):nth-child(-n+6) .ag7card__media img{
  transform: translateY(-12px); /* -22px → -12px (10px 더 내려옴) */
  box-shadow: 0 14px 28px rgba(0,0,0,.30);
}
  .ag7__grid .ag7card:nth-child(4){ transform: translateY(14px); }
  .ag7__grid .ag7card:nth-child(5){ transform: translateY(-18px); }
  .ag7__grid .ag7card:nth-child(6){ transform: translateY(14px); }
}

/* ===== 태블릿(≤1024px): 2열 + 지그재그 해제 ===== */
@media (max-width: 1024px){
  .ag7__grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
  .ag7__grid .ag7card{ transform: none !important; }
  .ag7__grid .ag7card .ag7card__media img{ transform: translateY(-12px) !important; }
}

/* ===== 모바일(≤560px): 트로피/타이틀 중앙 정렬 + 트로피 살짝 확대 ===== */
@media (max-width: 560px){
  .ag7__header{ flex-direction: column; align-items: center; }
  .ag7__trophy{
    position: static; transform: none;
    margin-bottom: 10px; display: flex; justify-content: center;
  }
  .ag7__trophy-img{ width: min(150px, 34vw); height: auto; } /* 모바일만 확대 제한 */
  .ag7__titles{ display: flex; justify-content: center; }
  .ag7__titles img{ width: min(360px, 90vw); height: auto; }

  .ag7__grid{ grid-template-columns: 1fr; }
  .ag7card__media{ height: 160px; }
}




/* ==================================
   Section 8 : 고객문의 
================================== */

/* Tokens */
:root{
  --ag8-navy:#060c2a;     /* 섹션 배경(짙은 남색) */
  --ag8-red:#e61c1c;      /* CTA/전화 강조 빨강 */
  --ag8-brand:#2a8f7f;    /* 브랜드 그린 */
  --ag8-card:#ffffff;     /* 카드 배경 */
  --ag8-text:#111;
  --ag8-muted:#6f7a86;
  --ag8-max:1200px;
}

/* 섹션 래퍼 */
.ag-section-eight{
  position: relative;
  width: 100%;
  background: var(--ag8-navy);
  padding: clamp(56px, 8vw, 96px) 24px;
  color: #fff;
  overflow: hidden;
}

/* 2열 컨테이너 */
.ag8__container{
  max-width: var(--ag8-max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 2fr;     /* 왼쪽 좁게 / 오른쪽 넓게 */
  gap: clamp(24px, 4vw, 48px);
  align-items: start;
}

/* 왼쪽 인포 */
.ag8__left{ padding-left: clamp(0px, 2vw, 8px); }
.ag8__inquiry{
  margin: 0 0 8px;
  font-size: clamp(24px, 2.5vw, 36px);
  font-weight: 900;
  letter-spacing: -.02em;
}
.ag8__phone{
  margin: 0 0 18px;
  font-size: clamp(30px, 5vw, 58px);
  font-weight: 900;
  line-height: 1.05;
  color: var(--ag8-red);
}
.ag8__phone a{ color: inherit; text-decoration: none; }
.ag8__hours{ margin: 0 0 18px; color:#d6d9e3; font-size: 16px; }
.ag8__desc{  margin: 0; color:#d6d9e3; font-size: 20px; line-height: 1.6; }

/* 오른쪽 카드 */
.ag8__card{
  background: var(--ag8-card);
  color: var(--ag8-text);
  border-radius: 20px;
  box-shadow: 0 14px 36px rgba(0,0,0,.25);
  padding: clamp(20px, 3vw, 36px);
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
}
.ag8__title{
  text-align: center;
  margin: 4px 0 18px;
  font-size: clamp(28px, 3vw, 40px);
  font-weight: 900;
  letter-spacing: -.02em;
}
.ag8__title .brand{ color: var(--ag8-brand); font-weight: 900; }

/* 폼: 라벨-필드 2열 */
.ag8__form{
  display: grid;
  grid-template-columns: 110px 1fr;  /* 라벨 너비 */
  gap: 14px 16px;
  align-items: center;
}
.ag8__form > label{
  font-weight: 800;
  color: #444;
  text-align: right;
}
.ag8__form input[type="text"],
.ag8__form input[type="tel"],
.ag8__form textarea{
  width: 100%;
  padding: 12px 14px;
  border: 1px solid #dcdfe4;
  border-radius: 6px;
  font-size: 15px;
  outline: none;
  transition: box-shadow .15s ease, border-color .15s ease;
  background: #fff;
}
.ag8__form input:focus,
.ag8__form textarea:focus{
  border-color: var(--ag8-brand);
  box-shadow: 0 0 0 3px rgba(42,143,127,.15);
}

/* 개인정보 동의 */
.ag8__consent{
  grid-column: 1 / -1;              /* 한 줄 전체 */
  display: flex; align-items: center; gap: 8px;
  justify-content: flex-end;
  margin-top: 4px;
  color: #555;
  font-size: 14px;
  text-align:right;
}
.ag8__consent input{ accent-color: var(--ag8-brand); }

/* 제출 버튼 */
.ag8__submit{
  grid-column: 1 / -1;              /* 한 줄 전체 중앙 */
  justify-self: center;
  margin-top: 6px;
  border: 0;
  border-radius: 999px;
  padding: 14px 36px;
  font-size: 18px;
  font-weight: 900;
  color: #fff;
  background: var(--ag8-red);
  cursor: pointer;
  box-shadow: 0 10px 20px rgba(230,28,28,.35);
  transition: transform .05s ease, filter .15s ease;
}
.ag8__submit:hover{  filter: brightness(1.05); }
.ag8__submit:active{ transform: translateY(1px); }


@keyframes blinkEffect {
  0%   { background-color: #008cff; color: #fff; } /* 파란색 */
  50%  { background-color: #ff4444; color: #fff; } /* 빨간색 */
  100% { background-color: #008cff; color: #fff; }
}

.blink {
  animation: blinkEffect 1.0s infinite;
}

/* 폰트: 잘난고딕 적용 */
.ag8__inquiry,
.ag8__title,
.ag8__title .brand,
.ag8__title b,
.ag8__submit{
  font-family: 'JalnanGothic','Noto Sans KR',system-ui,-apple-system,sans-serif !important;
  font-weight: 900;             /* Jalnan 단일 굵기 보정 */
  letter-spacing: -0.02em;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
}

@media (min-width: 981px){
  /* PC 전용: 왼쪽 블록 위치 보정 */
  .ag8__left{
    margin-top: 100px;          /* 위 여백 100 */
    margin-right: 60px;         /* 오른쪽 여백 60 */
  }
}

@media (max-width: 980px){
  .ag8__container{ grid-template-columns: 1fr; }
  .ag8__left{ order: 2; text-align: center; margin-top: 0; margin-right: 0; }
  .ag8__card{ order: 1; }
  .ag8__form{ grid-template-columns: 100px 1fr; }
}

@media (max-width: 560px){
  .ag8__form{ grid-template-columns: 1fr; }
  .ag8__form > label{ text-align: left; }
  .ag8__submit{ width: 100%; }
}


/* S8: 고객문의 전화번호를 한 줄로 고정 */
.ag-section-eight .ag8__phone,
.ag-section-eight .ag8__phone a{
  white-space: nowrap;     /* 줄바꿈 금지 */
  word-break: normal;      /* 단어 중간 분리 방지 */
  overflow-wrap: normal;   /* 강제 개행 방지 */
  hyphens: none;           /* 하이픈 자동 줄바꿈 방지 */
  display: inline-block;   /* 안전한 크기 계산 */
}



.ag8__consent {
  display: block;
  text-align: left;
  margin-top: 5px;
  margin-left: 130px;
  font-size: 16px;
  line-height: 1.5;
}

.ag8__consent input[type="checkbox"] {
  margin-right: 6px;
  vertical-align: middle;
}

.ag8__consent label {
  display: inline;
  font-weight: 400;
}

.ag8__consent label a {
  color: #333;
  text-decoration: underline;
  white-space: normal;
}

@media (max-width: 560px) {
  .ag8__consent {
    font-size: 16px;
    max-width: 320px;
	margin-left: 10px;
    width: 100%;
    line-height: 1.5;
    word-break: keep-all;
    white-space: normal;
  }

  .ag8__consent label {
    display: block;
    width: 100%;
  }

  .ag8__consent input[type="checkbox"] {
    vertical-align: middle !important;  /* ⬅️ 이 줄이 체크박스를 텍스트 중앙 정렬 */
    margin-right: 6px !important;
  }

  .ag8__consent label a {
    display: inline;
    white-space: normal;
  }
}







/* =========================
   Bottom Section 
========================= */

/* 이 섹션 전용 컨테이너 폭 변수 */
.ag-section-bottom{
  --ag-bottom-max: 1400px;

  width: 100%;
  background: #333;
  padding: 40px 0;
  color: #fff;
}

.ag-section-bottom .ag-section-inner{
  max-width: var(--ag-bottom-max);
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 0 20px;
}

/* 버튼 컨테이너(PC) */
.ag-section-bottom .ag-partner-btn-container{
  display: flex;
  flex-grow: 1;
  justify-content: center;
}

/* 버튼(PC) — 반투명 유지 */
.ag-section-bottom .ag-partner-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 313px;
  padding: 7px 30px;
  padding-left: 50px;
  margin-left: -10px;          /* 기존 톤 유지 */
  margin-right: 24px;
  border: 1px solid rgba(191,191,191,0.7);
  border-radius: 10px;
  background: rgba(255,255,255,0.78);
  color: #003366;
  text-decoration: none;
  text-align: center;
  font-weight: 700;
  font-size: 30px;
  line-height: 1;
  transform: scale(0.8);       /* PC에서만 축소 */
  box-shadow: 0 4px 6px rgba(0,0,0,.1);
  transition: background-color .3s, box-shadow .3s, transform .2s;
}
.ag-section-bottom .ag-partner-btn:hover{
  background: rgba(240,248,255,0.88);
  box-shadow: 0 6px 12px rgba(0,0,0,.2);
}
.ag-section-bottom .ag-partner-btn:focus-visible{
  outline: 2px solid currentColor;
  outline-offset: 3px;
}

/* 아이콘(PC) */
.ag-section-bottom .ag-partner-btn .icon{
  width: 40px;
  height: 40px;
  display: flex; align-items: center; justify-content: center;
  margin-left: 30px;
  border-radius: 50%;
  background: #7fbae7;
  color: #fff;
  font-size: 18px;
  line-height: 1;
}

/* 회사 정보(PC) */
.ag-section-bottom .ag-footer-info{
  font-size: 14px;
  color: #ccc;
  text-align: left;
}
.ag-section-bottom .ag-footer-info p{
  margin: 5px 0;
  line-height: 1.5;
}
.ag-section-bottom .ag-footer-info p strong{ font-weight: 700; }


@media (max-width: 768px){
  /* 버튼만 상단, 나머지는 아래 */
  .ag-section-bottom .ag-section-inner{
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
  .ag-section-bottom .ag-section-inner > *{
    order: 2;
    width: 100%;
  }
  .ag-section-bottom .ag-partner-btn-container{
    order: 1;                 /* 버튼 최상단 */
    width: 100%;
    display: block;
    text-align: center;
    margin-bottom: 16px;      /* 버튼 하단 여백 */
  }

  /* 버튼: 풀폭 + 크게 */
  .ag-section-bottom .ag-partner-btn{
    display: inline-flex; 
    gap: 12px;
    white-space: nowrap; flex-wrap: nowrap;
	margin: 0 auto;       /* 좌우 자동 여백으로 가운데 정렬 */
    width: 100%;
    max-width: none;
    margin-bottom: 20px;
    padding: 16px 20px;
    font-size: 22px;
    border-radius: 12px;
    transform: none;          /* 모바일에서 축소 제거 */
    background: rgba(255,255,255,0.78);  /* 반투명 유지 */
    border-color: rgba(191,191,191,0.7);
  }
  .ag-section-bottom .ag-partner-btn .icon{
    width: 34px; height: 34px; font-size: 16px;
    margin-left: 0;           /* 고정 여백 제거 */
  }

  /* 회사 정보 & 카피라이트 */
  .ag-section-bottom .ag-footer-info{
    font-size: 13px;
    display: flex; flex-direction: column; gap: 6px;
  }
  .ag-section-bottom .ag-footer-info p:last-child{
    order: 99;
    margin-top: 10px;
    font-size: 12px;
    white-space: nowrap; word-break: keep-all;
    text-align: center;
    opacity: .85;
  }
}

/* 초소형(<=480px) */
@media (max-width: 480px){
  .ag-section-bottom .ag-partner-btn{
    font-size: 20px;
    padding: 14px 16px;
  }
  .ag-section-bottom .ag-partner-btn .icon{
    width: 30px; height: 30px; font-size: 14px;
  }
}