@charset "UTF-8";
/*-------------------------------------------------
title       : 메인
Author      : 플랜아이 광주
Create date : 2020-02-14
-------------------------------------------------*/
@import url("../../css/odometer-theme-default.css");


.container { width: 160rem; max-width: calc(100% - 2rem); margin-left: auto !important; margin-right: auto !important; }

#wrap { position: relative; }

#header { position: absolute; }

#header.fixed { position: fixed; }

#visual { overflow: hidden; position: relative; z-index: 0; max-width: 100%; height: calc(100vh - 5.4rem); text-transform: uppercase; }

#visual:before { display: block; clear: both; width: 100vw; height: 16rem; content: ''; position: absolute; top: auto; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); bottom: 0; background: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0.001)), to(#111111)); background: linear-gradient(180deg, rgba(255, 255, 255, 0.001) 0%, #111111 100%); z-index: 10; }

#visual .desc { position: absolute; top: auto; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); bottom: 20rem; width: 160rem; max-width: calc(100% - 2rem); margin-left: auto !important; margin-right: auto !important; text-align: right; }

#visual .desc.type2 p { font-size: 5.2rem; line-height: 6rem; }

#visual .desc p { font-size: 6.4rem; line-height: 1.2; color: #fff; font-weight: 900; }
/* 모바일 메인 문구 강제 다운(PC 영향 없음) */
@media (max-width: 768px){

  /* 가운데 정렬 */
  body #visual .desc,
  body #visual .desc p,
  body #visual .desc h6{ 
    text-align:center !important;
  }

  /* ✅ 메인 큰 문구(p) 글자 크기 강제 다운 */
  body #visual .desc p{
    font-size: clamp(26px, 5.2vw, 26px) !important;
    line-height: 1.18 !important;
    font-weight: 700 !important;   /* 900이면 너무 두꺼움 */
    margin: 0 auto 10px !important;
  }

  /* 두 줄 span을 모바일에서 줄바꿈 */
  body #visual .desc p > span{
    display:block !important;
    width:100% !important;
    margin: 2px 0 !important;
  }

  /* strong/point 때문에 더 두꺼워지는 것 방지 */
  body #visual .desc p strong{
    font-weight: 700 !important;
    font-size: inherit !important;
  }
  body #visual .desc p .point strong{
    font-weight: 800 !important;  /* 강조는 800 정도면 충분 */
  }

  /* 보조문구(h6)도 약간 줄이기 */
  body #visual .desc h6{
    font-size: clamp(13px, 3.6vw, 16px) !important;
    line-height: 1.35 !important;
    margin: 6px auto 12px !important;
  }

  /* 버튼도 가운데 */
  body #visual .desc a{
    display:inline-block !important;
    margin: 0 auto !important;
  }
}

#visual .desc h6 { font-size: 2.1rem; line-height: 1.2; color: #fff; font-weight: 500; margin-top:20px;}

#visual .desc p span { display: block; overflow: hidden; }

#visual .desc p span strong { font-weight: 900; opacity: 0; display: inline-block; }

#visual .desc p span:first-child strong { -webkit-transform: translateX(-60px); transform: translateX(-60px); -webkit-transition: .3s; transition: .3s; -webkit-transition-delay: .6s; transition-delay: .6s; }

#visual .desc p span.point strong { color: #2FD37E; -webkit-transform: translateX(60px); transform: translateX(60px); -webkit-transition: .3s .7s; transition: .3s .7s; }

#visual .desc a { position: relative; color: #fff; font-size: 1.8rem; font-weight: 600; display: inline-block; padding: 1.9rem 5.7rem 1.9rem 3rem; margin-top: 4rem; border: 2px solid #fff; -webkit-transition: .4s; transition: .4s; }

#visual .desc a:after { position: absolute; top: 50%; left: auto; -webkit-transform: translateY(-50%); transform: translateY(-50%); right: 3rem; font-family: "remixicon"; content: '\f0f4'; font-weight: 100; }

#visual .desc a:hover, #visual .desc a:focus { background: #fff; color: #151515; }

#visual .more_txt { position: absolute; top: auto; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); bottom: 12rem; color: #fff; width: 160rem; max-width: calc(100% - 2rem); margin-left: auto !important; margin-right: auto !important; font-size: 1.6rem; font-weight: 600; text-align: left; text-transform: uppercase; }

#visual .more_txt > * { display: inline-block; vertical-align: middle; }

#visual .more_txt span { width: 12px; height: 14px; margin-left: 10px; -webkit-transform: translateY(-3px); transform: translateY(-3px); }

#visual .more_txt span:before, #visual .more_txt span:after { content: ''; display: block; width: 7px; height: 7px; border-bottom: 2px solid #fff; border-right: 2px solid #fff; -webkit-transform: rotate(45deg); transform: rotate(45deg); -webkit-animation: animate 2s infinite; animation: animate 2s infinite; }

#visual .more_txt span:after { -webkit-animation-delay: -0.2s; animation-delay: -0.2s; }

@-webkit-keyframes animate { 0% { opacity: 0;
    -webkit-transform: rotate(45deg) translate(-1px, -1px);
            transform: rotate(45deg) translate(-1px, -1px); }
  50% { opacity: 1; }
  100% { opacity: 0;
    -webkit-transform: rotate(45deg) translate(1px, 1px);
            transform: rotate(45deg) translate(1px, 1px); } }

@keyframes animate { 0% { opacity: 0;
    -webkit-transform: rotate(45deg) translate(-1px, -1px);
            transform: rotate(45deg) translate(-1px, -1px); }
  50% { opacity: 1; }
  100% { opacity: 0;
    -webkit-transform: rotate(45deg) translate(1px, 1px);
            transform: rotate(45deg) translate(1px, 1px); } }

/* ── 유튜브 슬라이더 (Slick 대체) ── */
#visual .v_slider { position: relative; width: 100%; height: 100%; overflow: hidden; }

#visual .v_slider .slide {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  background-position: center; background-repeat: no-repeat; background-size: cover;
  opacity: 0; z-index: 1;
  -webkit-transition: opacity 0.9s ease; transition: opacity 0.9s ease;
}

#visual .v_slider .slide.active { opacity: 1; z-index: 2; }

/* 활성 슬라이드 텍스트 애니메이션 */
#visual .v_slider .slide.active .desc p span strong {
  -webkit-transform: translateX(0) !important; transform: translateX(0) !important; opacity: 1;
}

/* ── 유튜브 iframe 래퍼 ── */
.yt-wrap {
  position: absolute; inset: 0;
  overflow: hidden; z-index: 1;
  pointer-events: none;
  -webkit-transition: opacity 0.5s ease, visibility 0.5s ease;
  transition: opacity 0.5s ease, visibility 0.5s ease;
}

/* 비활성 슬라이드 iframe 완전 숨김 (추천 화면 차단) */
#visual .slide:not(.active) .yt-wrap { visibility: hidden; opacity: 0; }

/* 유튜브 iframe: 전체 화면 커버 (16:9 비율 유지) */
.yt-wrap iframe, .yt-wrap > div {
  position: absolute;
  top: 50%; left: 50%;
  width: 100vw; height: 56.25vw;   /* 16:9 */
  min-width: 177.78vh;              /* 높이 기준 너비 */
  min-height: 100vh;
  -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%);
  pointer-events: none;
}

/* "동영상 더보기" 추천 화면 차단 레이어 */
.yt-wrap::after {
  content: ''; position: absolute; inset: 0;
  z-index: 10; pointer-events: none;
}

/* 유튜브 오버레이 (투명도 낮춤 → 영상 잘 보이게) */
.yt-overlay {
  background: linear-gradient(135deg,
    rgba(10,20,40,0.45) 0%,
    rgba(10,20,40,0.18) 60%,
    rgba(10,20,40,0.08) 100%) !important;
  z-index: 2;
}

/* ══════════════════════════════════════════
   슬라이드 1 : AI 로고(왼) + 카피(우) 분할 레이아웃
   ══════════════════════════════════════════ */

/* desc 오버라이드: 좌우 분할 flex */
#visual .slide1-ai-desc {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  width: 100%; max-width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 12;
  text-align: left;
  text-transform: none;
  padding: 0;
  background: transparent;
  -webkit-transform: none; transform: none;
}

/* 슬라이드1 전용: 하단 그라데이션 약화 (영상 잘 보이게) */
#visual .slide1.active ~ .slide-prev,
#visual .slide1.active ~ .slide-next { z-index: 13; }
#visual .slide1 .yt-overlay {
  background: linear-gradient(135deg,
    rgba(10,20,40,0.25) 0%,
    rgba(10,20,40,0.10) 60%,
    rgba(10,20,40,0.05) 100%) !important;
}

/* ── 왼쪽 영역 (로고) ── */
.ai-left {
  flex: 0 0 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

/* ── 로고 컨테이너: 2×2 그리드 (간격 좁게) ── */
.ai-logos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  justify-items: center;
  align-items: center;
}

/* ── 개별 로고: 큰 사이즈 ── */
.ai-logo {
  width: 230px; height: 100px;
  object-fit: contain;
  opacity: 0;
  filter: drop-shadow(0 6px 24px rgba(0,0,0,0.45));
}

/* 위 2개: 위에서 내려옴 */
.ai-logo-top {
  -webkit-transform: translateY(-120px);
  transform: translateY(-120px);
}
/* 아래 2개: 아래에서 올라옴 */
.ai-logo-bottom {
  -webkit-transform: translateY(120px);
  transform: translateY(120px);
}

/* 슬라이드 활성 → 로고 진입 + 흔들림 체이닝 */
#visual .slide.active .ai-logo-top {
  -webkit-animation: aiFromTop 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) forwards,
                     aiFloat 3s ease-in-out 1.6s infinite;
  animation: aiFromTop 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) forwards,
             aiFloat 3s ease-in-out 1.6s infinite;
}
#visual .slide.active .ai-logo-bottom {
  -webkit-animation: aiFromBottom 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) forwards,
                     aiFloat 3s ease-in-out 1.6s infinite;
  animation: aiFromBottom 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) forwards,
             aiFloat 3s ease-in-out 1.6s infinite;
}

/* 순차 딜레이 */
#visual .slide.active .ai-logo-1 { -webkit-animation-delay: 0.3s, 1.6s; animation-delay: 0.3s, 1.6s; }
#visual .slide.active .ai-logo-2 { -webkit-animation-delay: 0.5s, 1.8s; animation-delay: 0.5s, 1.8s; }
#visual .slide.active .ai-logo-3 { -webkit-animation-delay: 0.4s, 1.7s; animation-delay: 0.4s, 1.7s; }
#visual .slide.active .ai-logo-4 { -webkit-animation-delay: 0.6s, 1.9s; animation-delay: 0.6s, 1.9s; }

/* 위에서 내려옴 */
@-webkit-keyframes aiFromTop {
  0%   { opacity: 0; -webkit-transform: translateY(-120px); }
  100% { opacity: 1; -webkit-transform: translateY(0); }
}
@keyframes aiFromTop {
  0%   { opacity: 0; transform: translateY(-120px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* 아래에서 올라옴 */
@-webkit-keyframes aiFromBottom {
  0%   { opacity: 0; -webkit-transform: translateY(120px); }
  100% { opacity: 1; -webkit-transform: translateY(0); }
}
@keyframes aiFromBottom {
  0%   { opacity: 0; transform: translateY(120px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* 천천히 흔들림 (떠다니는 느낌) */
@-webkit-keyframes aiFloat {
  0%, 100% { -webkit-transform: translateY(0); }
  50%      { -webkit-transform: translateY(-10px); }
}
@keyframes aiFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}

/* ── 오른쪽 영역 (카피 3줄) ── */
.ai-right {
  flex: 0 0 50%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding-left: 4%;
  overflow: visible;
}

/* 슬라이드1 span 블록화 해제 (기존 #visual .desc p span{display:block} 오버라이드) */
#visual .slide1-ai-desc p span {
  display: inline !important;
  overflow: visible !important;
}

/* 1줄: AI가 검색, 추천하도록 — 반드시 한 줄 */
#visual .slide1-ai-desc p.ai-copy-line1 {
  font-size: clamp(24px, 5.5vw, 84px) !important;
  font-weight: 800 !important;
  color: #fff;
  line-height: 1.3;
  letter-spacing: -0.01em;
  text-shadow: 0 2px 16px rgba(0,0,0,0.5);
  margin-bottom: 8px;
  white-space: nowrap;
  opacity: 0;
  -webkit-transform: translateX(100px);
  transform: translateX(100px);
}

/* 노란색 강조 (AI, 검색, 추천) — 같은 폰트 크기 유지, 색상만 변경 */
.ai-hl-yellow {
  color: #f7d11d;
  font-weight: inherit;
  font-size: inherit;
  text-shadow:
    0 0 12px rgba(247,209,29,0.6),
    0 0 28px rgba(247,209,29,0.3),
    0 2px 16px rgba(0,0,0,0.5);
}

/* 2줄: AI에 특화된 홈페이지 구축 — 윗줄보다 2단계 작게, 흰색 */
#visual .slide1-ai-desc p.ai-copy-line2 {
  font-size: clamp(18px, 3.5vw, 54px) !important;
  font-weight: 700 !important;
  color: #fff;
  line-height: 1.3;
  letter-spacing: -0.01em;
  text-shadow: 0 2px 14px rgba(0,0,0,0.5);
  margin-bottom: 14px;
  white-space: nowrap;
  opacity: 0;
  -webkit-transform: translateX(100px);
  transform: translateX(100px);
}

/* 3줄: 설명문 — 작고 가벼운 흰색, 한 줄 */
#visual .slide1-ai-desc p.ai-copy-line3 {
  font-size: 25px !important;
  font-weight: 300 !important;
  color: rgba(255,255,255,0.7);
  line-height: 1.5;
  letter-spacing: 0;
  text-shadow: 0 1px 10px rgba(0,0,0,0.4);
  white-space: nowrap;
  opacity: 0;
  -webkit-transform: translateX(100px);
  transform: translateX(100px);
}

/* 슬라이드 활성 → 3줄 순차 슬라이드인 + 2초 후 깜빡임 */

/* 1줄: 1.0s 슬라이드인 → 3.0s(=1.0+2.0) 2번 깜빡 */
#visual .slide.active .ai-copy-line1 {
  -webkit-animation: aiSlideIn 0.7s ease forwards,
                     aiBlink 0.4s ease 3.0s 2;
  animation: aiSlideIn 0.7s ease forwards,
             aiBlink 0.4s ease 3.0s 2;
  -webkit-animation-delay: 1.0s, 3.0s;
  animation-delay: 1.0s, 3.0s;
}

/* 2줄: 1.3s 슬라이드인 → 3.8s(깜빡 시작 = 1줄 끝난 뒤) 2번 깜빡 */
#visual .slide.active .ai-copy-line2 {
  -webkit-animation: aiSlideIn 0.7s ease forwards,
                     aiBlink 0.4s ease 3.8s 2;
  animation: aiSlideIn 0.7s ease forwards,
             aiBlink 0.4s ease 3.8s 2;
  -webkit-animation-delay: 1.3s, 3.8s;
  animation-delay: 1.3s, 3.8s;
}

/* 3줄: 1.6s 슬라이드인, 깜빡임 없음 */
#visual .slide.active .ai-copy-line3 {
  -webkit-animation: aiSlideIn 0.7s ease forwards;
  animation: aiSlideIn 0.7s ease forwards;
  -webkit-animation-delay: 1.6s;
  animation-delay: 1.6s;
}

/* 오른쪽에서 날아옴 */
@-webkit-keyframes aiSlideIn {
  0%   { opacity: 0; -webkit-transform: translateX(100px); }
  100% { opacity: 1; -webkit-transform: translateX(0); }
}
@keyframes aiSlideIn {
  0%   { opacity: 0; transform: translateX(100px); }
  100% { opacity: 1; transform: translateX(0); }
}

/* 깜빡임 */
@-webkit-keyframes aiBlink {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.12; }
}
@keyframes aiBlink {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.12; }
}

/* ── 모바일 최적화 ── */
@media (max-width: 1024px) {
  .ai-logo {
    width: 140px; height: 140px;
  }
  .ai-logos { gap: 6px; }
}

@media (max-width: 768px) {
  /* 모바일: 상하 분할로 전환 */
  #visual .slide1-ai-desc {
    flex-direction: column;
    padding: 0 5%;
  }
  .ai-left {
    flex: 0 0 auto;
    height: auto;
    margin-bottom: 20px;
  }
  .ai-right {
    flex: 0 0 auto;
    align-items: center;
    text-align: center;
    padding-left: 0;
  }
  .ai-logo {
    width: 90px; height: 90px;
  }
  .ai-logos { gap: 4px; }
  #visual .slide1-ai-desc p.ai-copy-line1 {
    font-size: clamp(30px, 4.2vw, 24px) !important;
    white-space: nowrap;
  }
  #visual .slide1-ai-desc p.ai-copy-line2 {
    font-size: clamp(20px, 3.4vw, 18px) !important;
    white-space: normal !important;
  }
  #visual .slide1-ai-desc p.ai-copy-line3 {
    font-size: 16px !important;
    white-space: normal;
  }
}

@media (max-width: 420px) {
  .ai-logo {
    width: 70px; height: 70px;
  }
  .ai-logos { gap: 2px; }
  #visual .slide1-ai-desc p.ai-copy-line3 {
    font-size: 14px !important;
  }
}

/* ══════════════════════════════════════════ */
/* ── 슬라이드 2: 좌측 50% AI 로고 + 카피 ── */
/* ══════════════════════════════════════════ */

#visual .slide2-ai-desc {
  position: absolute !important;
  top: 0; left: 0; right: 0; bottom: 0;
  width: 100% !important;
  display: flex !important;
  align-items: center;
  z-index: 5;
  background: transparent !important;
  text-align: left !important;
  transform: none !important;
}

.s2-left {
  flex: 0 0 50%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding-left: 5%;
}

/* ── 슬라이드2 로고 영역 ── */
.s2-logos {
  display: flex;
  flex-direction: row;
  gap: 16px;
  margin-bottom: 30px;
}

.s2-logo {
  width: 80px; height: 80px;
  object-fit: contain;
  opacity: 0;
  -webkit-transform: translateY(-80px);
  transform: translateY(-80px);
}

/* 슬라이드2 활성 → 로고 위에서 아래로 순차 등장 */
#visual .slide.active .s2-logo1 {
  -webkit-animation: s2LogoDrop 0.6s ease forwards;
  animation: s2LogoDrop 0.6s ease forwards;
  animation-delay: 0.3s;
}
#visual .slide.active .s2-logo2 {
  -webkit-animation: s2LogoDrop 0.6s ease forwards;
  animation: s2LogoDrop 0.6s ease forwards;
  animation-delay: 0.5s;
}
#visual .slide.active .s2-logo3 {
  -webkit-animation: s2LogoDrop 0.6s ease forwards;
  animation: s2LogoDrop 0.6s ease forwards;
  animation-delay: 0.7s;
}
#visual .slide.active .s2-logo4 {
  -webkit-animation: s2LogoDrop 0.6s ease forwards;
  animation: s2LogoDrop 0.6s ease forwards;
  animation-delay: 0.9s;
}

@keyframes s2LogoDrop {
  0%   { opacity: 0; transform: translateY(-80px); }
  60%  { opacity: 1; transform: translateY(8px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* ── 슬라이드2 카피 3줄 ── */
/* span 블록화 해제 */
#visual .slide2-ai-desc p span {
  display: inline !important;
  overflow: visible !important;
}

#visual .slide2-ai-desc p.s2-copy-line1 {
  font-size: clamp(24px, 5.5vw, 84px) !important;
  font-weight: 800 !important;
  color: #fff;
  line-height: 1.2;
  letter-spacing: -0.02em;
  text-shadow: 0 2px 16px rgba(0,0,0,0.5);
  margin-bottom: 8px;
  white-space: nowrap;
  opacity: 0;
  -webkit-transform: translateX(-100px);
  transform: translateX(-100px);
}

#visual .slide2-ai-desc p.s2-copy-line2 {
  font-size: clamp(18px, 3.5vw, 54px) !important;
  font-weight: 700 !important;
  color: #fff;
  line-height: 1.3;
  letter-spacing: -0.01em;
  text-shadow: 0 2px 14px rgba(0,0,0,0.5);
  margin-bottom: 14px;
  white-space: nowrap;
  opacity: 0;
  -webkit-transform: translateX(-100px);
  transform: translateX(-100px);
}

#visual .slide2-ai-desc p.s2-copy-line3 {
  font-size: 25px !important;
  font-weight: 400 !important;
  color: rgba(255,255,255,0.85);
  line-height: 1.5;
  text-shadow: 0 1px 10px rgba(0,0,0,0.4);
  white-space: nowrap;
  opacity: 0;
  -webkit-transform: translateX(-100px);
  transform: translateX(-100px);
}

/* 강조 색상 */
.s2-hl-cyan {
  color: #00e5ff;
  font-weight: inherit;
  font-size: inherit;
  text-shadow:
    0 0 12px rgba(0,229,255,0.5),
    0 0 28px rgba(0,229,255,0.25),
    0 2px 16px rgba(0,0,0,0.5);
}
.s2-hl-green {
  color: #2fd37e;
  font-weight: inherit;
  font-size: inherit;
  text-shadow:
    0 0 12px rgba(47,211,126,0.5),
    0 0 28px rgba(47,211,126,0.25),
    0 2px 16px rgba(0,0,0,0.5);
}

/* 슬라이드2 활성 → 카피 왼쪽에서 오른쪽 순차 슬라이드인 */
@keyframes s2SlideIn {
  0%   { opacity: 0; transform: translateX(-100px); }
  100% { opacity: 1; transform: translateX(0); }
}

#visual .slide.active .s2-copy-line1 {
  -webkit-animation: s2SlideIn 0.7s ease forwards;
  animation: s2SlideIn 0.7s ease forwards;
  animation-delay: 1.2s;
}
#visual .slide.active .s2-copy-line2 {
  -webkit-animation: s2SlideIn 0.7s ease forwards;
  animation: s2SlideIn 0.7s ease forwards;
  animation-delay: 1.5s;
}
#visual .slide.active .s2-copy-line3 {
  -webkit-animation: s2SlideIn 0.7s ease forwards;
  animation: s2SlideIn 0.7s ease forwards;
  animation-delay: 1.8s;
}

/* ── 슬라이드2 모바일 반응형 ── */
@media (max-width: 768px) {
  .s2-left {
    flex: 0 0 100%;
    align-items: center;
    text-align: center;
    padding-left: 0;
    padding: 0 3%;
  }
  .s2-logos { gap: 8px; margin-bottom: 16px; }
  .s2-logo { width: 55px; height: 55px; }
  #visual .slide2-ai-desc p.s2-copy-line1 {
    font-size: clamp(30px, 4.2vw, 24px) !important;
    white-space: normal !important;
  }
  #visual .slide2-ai-desc p.s2-copy-line2 {
    font-size: clamp(20px, 3.4vw, 18px) !important;
    white-space: normal !important;
  }
  #visual .slide2-ai-desc p.s2-copy-line3 {
    font-size: 16px !important;
    white-space: normal;
  }
}

@media (max-width: 420px) {
  .s2-logo { width: 45px; height: 45px; }
  .s2-logos { gap: 4px; }
}

/* ══════════════════════════════════════════
   슬라이드 3: AI 시대 카피
   ══════════════════════════════════════════ */

#visual .v_slider .slide .desc.slide3-ai-desc {
  position: absolute !important;
  top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  display: flex !important;
  align-items: center;
  justify-content: flex-end;
  z-index: 5;
  background: transparent !important;
  text-align: right !important;
  transform: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.s3-content {
  width: 55%;
  padding-right: 5%;
  text-align: right;
}

#visual .slide3-ai-desc p.s3-copy-line1 {
  font-size: clamp(24px, 5.5vw, 84px) !important;
  font-weight: 800 !important;
  color: #fff;
  line-height: 1.2;
  letter-spacing: -0.02em;
  text-shadow: 0 2px 16px rgba(0,0,0,0.5);
  margin-bottom: 8px;
  opacity: 0;
  transform: translateY(40px);
}

#visual .slide3-ai-desc p.s3-copy-line2 {
  font-size: clamp(18px, 3.5vw, 54px) !important;
  font-weight: 700 !important;
  color: #fff;
  line-height: 1.3;
  letter-spacing: -0.01em;
  text-shadow: 0 2px 14px rgba(0,0,0,0.5);
  margin-bottom: 14px;
  opacity: 0;
  transform: translateY(40px);
}

#visual .slide3-ai-desc h6 {
  font-size: 25px !important;
  font-weight: 500 !important;
  color: rgba(255,255,255,0.9);
  line-height: 1.5;
  text-shadow: 0 1px 10px rgba(0,0,0,0.4);
  margin-top: 20px;
  opacity: 0;
  transform: translateY(40px);
}

/* override: span 인라인 유지 */
#visual .slide3-ai-desc p span,
#visual .slide3-ai-desc h6 span {
  display: inline !important;
  overflow: visible !important;
}

/* 슬라이드3 활성 → 아래에서 위로 순차 페이드인 */
@keyframes s3FadeUp {
  0%   { opacity: 0; transform: translateY(40px); }
  100% { opacity: 1; transform: translateY(0); }
}

#visual .slide.active .s3-copy-line1 {
  animation: s3FadeUp 0.7s ease forwards;
  animation-delay: 0.5s;
}
#visual .slide.active .s3-copy-line2 {
  animation: s3FadeUp 0.7s ease forwards;
  animation-delay: 0.9s;
}
#visual .slide3-ai-desc h6 {
  opacity: 0;
}
#visual .slide.active .slide3-ai-desc h6 {
  animation: s3FadeUp 0.7s ease forwards;
  animation-delay: 1.3s;
}
#visual .slide3-ai-desc a {
  margin-top: 30px;
  opacity: 0;
  transform: translateY(20px);
}
#visual .slide.active .slide3-ai-desc a {
  animation: s3FadeUp 0.5s ease forwards;
  animation-delay: 1.7s;
}

/* ── 슬라이드3 모바일 반응형 ── */
@media (max-width: 768px) {
  .s3-content {
    width: 100%;
    padding: 0 4%;
    text-align: center;
  }
  #visual .slide3-ai-desc {
    justify-content: center;
    text-align: center !important;
  }
  #visual .slide3-ai-desc p.s3-copy-line1 {
    font-size: clamp(30px, 4.2vw, 24px) !important;
  }
  #visual .slide3-ai-desc p.s3-copy-line2 {
    font-size: clamp(20px, 3.4vw, 18px) !important;
    white-space: normal;
  }
  #visual .slide3-ai-desc h6 {
    font-size: 16px !important;
  }
}

@media (max-width: 420px) {
  #visual .slide3-ai-desc p.s3-copy-line1 {
    font-size: clamp(30px, 4.2vw, 24px) !important;
  }
}

/* ══════════════════════════════════════════ */

/* ── 슬라이더 prev/next 버튼 ── */
#visual .slide-prev,
#visual .slide-next {
  position: absolute; top: 50%;
  -webkit-transform: translateY(-50%); transform: translateY(-50%);
  z-index: 10;
  background: rgba(255,255,255,0.15);
  border: 1.5px solid rgba(255,255,255,0.3);
  color: #fff; width: 46px; height: 46px;
  border-radius: 50%; font-size: 1.4rem;
  cursor: pointer; display: flex;
  align-items: center; justify-content: center;
  -webkit-transition: background 0.3s, transform 0.3s;
  transition: background 0.3s, transform 0.3s;
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
#visual .slide-prev { left: 1.8rem; }
#visual .slide-next { right: 1.8rem; }
#visual .slide-prev:hover,
#visual .slide-next:hover {
  background: rgba(255,255,255,0.32);
  -webkit-transform: translateY(-50%) scale(1.08); transform: translateY(-50%) scale(1.08);
}

/* ── 닷 인디케이터 ── */
#visual .slide-dots {
  position: absolute; bottom: 10rem; left: 50%;
  -webkit-transform: translateX(-50%); transform: translateX(-50%);
  z-index: 10; display: flex; gap: 9px;
}
#visual .slide-dots .dot {
  width: 12px; height: 12px;
  border-radius: 50%; border: 2px solid #fff;
  background: transparent; cursor: pointer;
  -webkit-transition: background 0.3s; transition: background 0.3s;
  padding: 0;
}
#visual .slide-dots .dot.active { background: #fff; }

/* ── 모바일 유튜브 슬라이더 최적화 ── */
@media (max-width: 768px) {
  #visual .slide-prev { left: 10px; width: 38px; height: 38px; font-size: 1rem; }
  #visual .slide-next { right: 10px; width: 38px; height: 38px; font-size: 1rem; }
  #visual .slide-dots { bottom: 8rem; }
}

#contents { margin: 5.4rem 0 0; }

.section::after { display: block; clear: both; width: 100%; height: 0; content: ''; }

#section1 .search { width: 100rem; max-width: calc(100% - 2rem); margin: auto; padding: 12rem 0 8rem; }

#section1 .search p { position: relative; border-bottom: 8px solid #137B44; -webkit-box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3); box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3); color: #137B44; padding: 1.5rem 2rem 1.5rem 0; margin-bottom: 2.9rem; }

#section1 .search p:after { display: block; clear: both; content: ''; }

#section1 .search p > * { float: left; }

#section1 .search p input { background: transparent; border: 0; height: 6rem; width: calc(100% - 4rem); padding: 0 2rem 0 1rem; display: inline-block; font-size: 5.2rem; }

#section1 .search p input::-webkit-input-placeholder { text-transform: uppercase; font-weight: 900; color: #137B44; line-height: inherit; }

#section1 .search p input:-ms-input-placeholder { text-transform: uppercase; font-weight: 900; color: #137B44; line-height: inherit; }

#section1 .search p input::-ms-input-placeholder { text-transform: uppercase; font-weight: 900; color: #137B44; line-height: inherit; }

#section1 .search p input::placeholder { text-transform: uppercase; font-weight: 900; color: #137B44; line-height: inherit; }

#section1 .search p button { float: right; font-size: 4rem; font-weight: 900; width: 4rem; height: 6rem; line-height: 6rem; }

#section1 .search p.bar label:after { display: none; }

@-webkit-keyframes flash { 0% { opacity: 1; }
  100% { opacity: 0; } }

@keyframes flash { 0% { opacity: 1; }
  100% { opacity: 0; } }

#section1 .search .recommend:after { display: block; clear: both; content: ''; }

#section1 .search .recommend a { float: left; margin: 0 3rem; font-size: 1.8rem; line-height: 2; color: #fff; opacity: .7; -webkit-transition: opacity .2s; transition: opacity .2s; position: relative; z-index: 0; }

#section1 .search .recommend a:hover, #section1 .search .recommend a:focus { text-decoration: underline; }

#section1 .search .recommend a:before { position: absolute; top: 50%; left: auto; -webkit-transform: translateY(-50%); transform: translateY(-50%); left: -3rem; width: 1px; height: 1.4rem; background: #454545; content: ''; }

#section1 .search .recommend a:first-child { margin-left: 0; }

#section1 .search .recommend a:first-child:before { display: none; }

#section1 .search .recommend a.more { opacity: 1; float: right; font-size: 2.4rem; line-height: 1; margin: 0; -webkit-transform: translateY(6px); transform: translateY(6px); }

#section1 .search .recommend a.more:before { display: none; }

#section1 .search .recommend a:hover, #section1 .search .recommend a:focus { opacity: 1; }

#section2 { padding: 0 0 0; }

#section2 h2 { font-weight: 900; text-transform: uppercase; color: #181312; }

#section2 .txt_center .more { position: relative; color: #111; font-size: 1.8rem; font-weight: 600; display: inline-block; padding: 1.6rem 6.8rem; margin-top: 5rem; text-transform: uppercase; border: 2px solid #111; -webkit-transition: .4s; transition: .4s; }

#section2 .txt_center .more:hover, #section2 .txt_center .more:focus { background: #111; border-color: transparent; color: #fff; }

#section2 .event_wrap .slider { width: 100%;/* margin-left: 8%;*/ color: #111; position: relative; }

#section2 .event_wrap .slider .e_slider { z-index: 0; }

/*#section2 .event_wrap .slider .e_slider:before { position: absolute; right: 0; width: 8%; content: ''; height: 100%; background: -webkit-gradient(linear, right top, left top, from(rgba(17, 17, 17, 0.8)), to(rgba(255, 255, 255, 0))); background: linear-gradient(270deg, rgba(17, 17, 17, 0.8) 0%, rgba(255, 255, 255, 0)); z-index: 1; }*/

#section2 .event_wrap .slider .slick-slide { width: 37rem !important; margin-right: 4rem; }

#section2 .event_wrap .slider .slick-slide .img { position: relative; width: 80%; height: 100%; padding-bottom: 100%; display: block; margin: 1.2rem 0 3rem; overflow: hidden; }

#section2 .event_wrap .slider .slick-slide .img img { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: 100%; }

#section2 .event_wrap .slider .slick-slide .date_wrap > * { display: inline-block; vertical-align: middle; font-size: 1.4rem; line-height: 3.14286; }

#section2 .event_wrap .slider .slick-slide .date_wrap .date { font-weight: 600; }

#section2 .event_wrap .slider .slick-slide .date_wrap [class*="day"] { color: #137B44; font-weight: 400; }

#section2 .event_wrap .slider .slick-slide .date_wrap [class*="day"]:before { display: inline-block; vertical-align: middle; content: ''; width: 1px; height: 12px; background: #666; margin: 0 1.2rem 0 .8rem; }

#section2 .event_wrap .slider .slick-slide .date_wrap .dday { font-weight: 700; }

#section2 .event_wrap .slider .slick-slide .tit { font-size: 2.2rem; line-height: 1.63636; font-weight: 500; height: 4.8rem; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; word-break: keep-all; }

#section2 .event_wrap .slider .slick-slide .more { position: absolute; bottom: 1.6rem; right: 2rem; text-transform: uppercase; color: #137B44; font-weight: 900; font-size: 1.4rem; opacity: 0; }

#section2 .event_wrap .slider .slick-slide .more:after { display: inline-block; vertical-align: middle; font-family: "remixicon"; content: '\ea12'; }

#section2 .event_wrap .slider .slick-slide .line:before, #section2 .event_wrap .slider .slick-slide .line:after { position: absolute; background: #137B44; content: ''; -webkit-transition: .3s; transition: .3s; }

#section2 .event_wrap .slider .slick-slide .line:before { width: 0%; height: 6px; }

#section2 .event_wrap .slider .slick-slide .line:after { width: 6px; height: 0%; }

#section2 .event_wrap .slider .slick-slide .line.line1:before { left: 0; top: 0; }

#section2 .event_wrap .slider .slick-slide .line.line1:after { left: 0; top: 0; }

#section2 .event_wrap .slider .slick-slide .line.line2:before { right: 0; bottom: 0; }

#section2 .event_wrap .slider .slick-slide .line.line2:after { right: 0; bottom: 0; }

#section2 .event_wrap .slider .slick-slide a { display: block; border: 1px solid #aaa; padding: 2.8rem 3rem 5rem; position: relative; }

#section2 .event_wrap .slider .slick-slide a:hover .line:before, #section2 .event_wrap .slider .slick-slide a:focus .line:before { width: 100%; }

#section2 .event_wrap .slider .slick-slide a:hover .line:after, #section2 .event_wrap .slider .slick-slide a:focus .line:after { height: 100%; }

#section2 .event_wrap .slider .slide_controls { position: absolute; right: 0;  top: 0; }

#section2 .event_wrap .slider .slide_controls:before { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: 2px; height: 3.6rem; background: #ddd; content: ''; top: 40%; }

#section2 .event_wrap .slider .slide_controls button { font-size: 4.2rem; font-weight: 400; opacity: .32; margin: 0 1rem; }

#section2 .event_wrap .slider .slide_controls button:hover, #section2 .event_wrap .slider .slide_controls button:focus { opacity: 1; }

#section2 .event_wrap .slider .slide_controls button.slick-disabled { opacity: 1; }

#section2 .event_wrap h2 { font-size: 5.2rem; line-height: 1.15385; margin-bottom: 1.4rem; }

#section2 .kdis_news {position:relative; margin-top:10rem;}

#section2 .kdis_news::before {content:""; position:absolute; width:100vw; height:100%; background:#f8f8f8; z-index:-1;left:50%; transform:translateX(-50%);}
 
#section2 .kdis_news .container {padding:5rem 0;}

#section2 .kdis_news h2 { font-size: 7rem; line-height: 1.28571; text-align: center; margin: 0 0 4.8rem; }

#section2 .kdis_news h2 strong { color: #137B44; font-weight: 900; }

#section2 .kdis_news .news { margin-left: -7.4rem; }

#section2 .kdis_news .news:after { display: block; clear: both; content: ''; }

#section2 .kdis_news .news .date { color: #137B44; font-size: 1.8rem; line-height: 2.44444; font-weight: 700; }

#section2 .kdis_news .news .tit { font-size: 3rem; line-height: 1.26667; font-weight: 700; color: #000; word-break: keep-all; height: 3.5rem; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; margin-bottom: 3.2rem; }

#section2 .kdis_news .news .tit span { background-position: 0 96%; background-size: 0 2px; background-repeat: no-repeat; background-image: -webkit-gradient(linear, left top, left bottom, from(#111), to(#111)); background-image: linear-gradient(#111, #111); -webkit-transition: .2s; transition: .2s; }

#section2 .kdis_news .news .img { position: relative; }

#section2 .kdis_news .news .img .category { display: inline-block; color: #111; position: absolute; left: 0; top: -9px; padding: 4px 1rem; font-weight: 900; z-index: 1; }

#section2 .kdis_news .news .img .category.type1 { background: #137B44; }

#section2 .kdis_news .news .img .category.type2 { background: #FACB4D; }

#section2 .kdis_news .news .img .category.type3 { background: #2FCBE0; }

#section2 .kdis_news .news .img span { display: block; overflow: hidden; width: 100%; padding-bottom: 100%; position: relative; }

#section2 .kdis_news .news .img span img { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); }

#section2 .kdis_news .news div.sl { float: left; width: calc(33.3333333% - 7.4rem); margin-left: 7.4rem; }

#section2 .kdis_news .news div.sl a { display: block; padding: 4.3rem 4rem 0; position: relative; }

#section2 .kdis_news .news div.sl a:before { position: absolute; z-index: -1; width: 100%; height: 100%; content: '';  height: calc(100% - 4rem); top: 0; left: 0; background-image:linear-gradient(-45deg, transparent 2rem, #aaa 0);}

#section2 .kdis_news .news div.sl a:after { position: absolute; top: 1px; left: 1px; width: calc(100% - 2px); height: calc(100% - 4rem - 2px); /*border: 2rem solid transparent; border-right: 2rem solid #aaa; border-bottom: 2rem solid #aaa;*/ background-image: linear-gradient(-45deg, transparent 2rem, #fff 0); z-index:-1; content: ''; }

#section2 .kdis_news .news div.sl a:hover .tit span, #section2 .kdis_news .news div.sl a:focus .tit span { background-size: 100% 2px; }

#section3 { padding: 10rem 0 17rem; background: url("../img/main/sec33_bg_wt.jpg") no-repeat center top/cover; }

#section3 .mobile { display: none; }

#section3 .left { float: left; width: calc(100% - 78rem); padding-right: 10rem; margin-top: 10rem; }

#section3 .left h2 { font-size: 7rem; line-height: 1.28571; text-transform: uppercase; color: #111; margin-bottom: 3.6rem; padding-bottom: 9rem; position: relative; }

#section3 .left h2:before { background: #707070; position: absolute; left: 0; bottom: -1px; width: calc(100% + 10.6rem); height: 2px; content: ''; }

#section3 .left h2 .point { color: #137B44; display: block; }

#section3 .left h2 strong { font-weight: 900; }

#section3 .left h3 { font-size: 4.2rem; line-height: 1.0; color: #000; margin-bottom: 1.0rem; font-weight: 700; word-break: keep-all; }

#section3 .left p { font-size: 2rem; line-height: 1.7; color: #222; margin-bottom: 2.6rem; word-break: keep-all; }

#section3 .left .more { color: #137B44; text-transform: uppercase; font-weight: 900; }

#section3 .left .more::after { -webkit-transform: rotate(0); transform: rotate(0); -webkit-transition: all 0.2s; transition: all 0.2s; }

#section3 .left .more:hover::after, #section3 .left .more:focus::after { -webkit-transform: rotate(180deg) translateY(2px); transform: rotate(180deg) translateY(2px); }

#section3 .left .more:after { display: inline-block; vertical-align: middle; font-family: "remixicon"; content: '\ea12'; }

#section3 .right { float: right; color: #2c2c2c; width: 78rem; height: 78rem; position: relative; }

#section3 .right:before { background: #707070; position: absolute; right: -98.2%; top: 47.4%; -webkit-transform: translateY(-50%); transform: translateY(-50%); width: 100%; height: 2px; content: ''; }

#section3 .right .box { text-transform: uppercase; text-align: center; display: table; width: 39rem; height: 39rem; margin: auto; position: absolute; }

#section3 .right .box:before { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: 26.3rem; height: 26.3rem; border: 1px solid #707070; -webkit-transform: rotate(45deg) translate(-50%, -50%); transform: rotate(45deg) translate(-50%, -50%); content: ''; -webkit-transform-origin: 22px -15px; transform-origin: 22px -15px; z-index: 0; }

#section3 .right .box.first { left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); top: 0; }

#section3 .right .box.first strong { margin: 0 0 0 1rem; }

#section3 .right .box.second { left: 0; top: 19.5rem; }

#section3 .right .box.third { right: 0; top: 19.5rem; }

#section3 .right .box.fourth { left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); bottom: 0; }

#section3 .right .box.fourth:before { border-color: #137B44; background: #137B44; }

#section3 .right .box.fourth .desc { display: block; margin-top: 8.2rem; margin-left: -1rem; }

#section3 .right .desc { display: table-cell; vertical-align: middle; position: relative; z-index: 1; }

#section3 .right .tit { font-size: 2.8rem; line-height: 2.14286; font-weight: 900; }

#section3 .right .txt { font-size: 1.6rem; line-height: 1.5; }

#section3 .right strong { color: #137B44; font-size: 4.4rem; line-height: 1.36364; font-weight: 900; margin-right: 1rem; }





#section4 .grid a { display: block; position: relative; overflow: hidden; }

#section4 .grid a::before { display: block; clear: both; width: 100%; height: 24rem; content: ''; position: absolute; top: auto; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); bottom: 0; background: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0)), to(rgba(17, 17, 17, 0.8))); background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(17, 17, 17, 0.8)); z-index: 1; }

#section4 .grid a:hover .txt, #section4 .grid a:focus .txt { text-decoration: underline; }

#section4 .grid a:hover .img, #section4 .grid a:focus .img { -webkit-filter: grayscale(0); filter: grayscale(0); }

#section4 .grid .desc { position: absolute; left: 3rem; bottom: 3rem; width: calc(100% - 6rem); z-index: 1; }

#section4 .grid .tit > * { display: inline-block; vertical-align: middle; color: #fff; font-size: 1.4rem; }

#section4 .grid .tit img { margin-top: -2px; }

#section4 .grid .tit .date { opacity: .7; padding-left: 10px; position: relative; }

#section4 .grid .tit .date:before { position: absolute; left: 0; top: 9px; height: 4px; width: 4px; border-radius: 50%; content: ''; background: #fff; }

#section4 .grid .tit strong { text-transform: capitalize; margin: 0 6px; }

#section4 .grid .txt { overflow: hidden; text-overflow: ellipsis; width: 90%; white-space: nowrap; display: block; color: #fff; opacity: .8; }

#section4 .grid .img { -webkit-filter: grayscale(1); filter: grayscale(1); -webkit-transition: .2s; transition: .2s; display: block; position: relative; padding-top: 56.25%; height: 0; }

#section4 .grid .img img { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); height: auto; width: 100%; }

#section4 .grid:nth-of-type(3) .img, #section4 .grid:nth-of-type(5) .img { padding-top: 112.5%; }

@media (max-width: 2560px) { .sns_wrap { width: 160rem; max-width: calc(100% - 2rem); margin-left: auto !important; margin-right: auto !important; }
  .grid_sizer, .grid { width: 33.33333%; } }

@media (max-width: 1920px) { .sns_wrap { width: 100%; max-width: 100%; }
  .grid_sizer, .grid { width: 33.33333%; } }

@media (max-width: 640px) { .sns_wrap { width: 100%; max-width: 100%; }
  .grid_sizer, .grid { width: 50%; }
  .grid:last-of-type { width: 100%; } }

@media (max-width: 500px) { .sns_wrap { width: 100%; max-width: 100%; }
  .grid_sizer, .grid { width: 100%; }
  #section4 .grid a .img { padding-top: auto; height: auto; } }
  


#section3 {position: relative; z-index: 0;}
#section3::before {content:"" ; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(to bottom, #fff, transparent 46%); z-index: -1;}
#section3 .sec3-title {margin-bottom: 6rem;}
#section3 .sec3-title-wrap {display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 2.4rem;}  
#section3 .sec3-title h2 {font-size: 7rem; font-weight: 900; text-align: left; margin-bottom: 0; line-height: 1.2;}
#section3 .sec3-title h2 span {color: #137B44;}
#section3 .sec3-title-number {display: flex; align-items: center;}
#section3 .sec3-title-number > img {width: 19.8rem; padding-right: 2.4rem; margin-right: 2.4rem;}
#section3 .sec3-title-number ul {display: flex; margin: 0 -2.4rem; position: relative;}
#section3 .sec3-title-number ul::before {content: ""; width: 36.7rem; height: 11.6rem; background: url(../img/main/sec3-bubble.png) no-repeat center center / contain; position: absolute; top: -9.8rem; left: 0;}
#section3 .sec3-title-number ul::after {content: ""; width: 43.7rem; height: 11.6rem; position: absolute; top: -10.8rem; right: 14rem; background: #fff;  transition: 1.5s;}
#section3 .sec3-title-number ul.active::after {width: 0;}
#section3 .sec3-title-number ul > li {padding: 0 2.4rem; display: flex; flex-direction: column; align-items: center; position: relative; }
#section3 .sec3-title-number ul > li::before {content: ""; width: 1px; height: 8rem; border-right: 1px dashed #ddd; position: absolute; left: 0; top: 50%; transform: translateY(-50%);}
#section3 .sec3-title-number ul > li .num {display: flex; align-items: flex-end; }
#section3 .sec3-title-number ul > li .num b {font-size: 6rem; font-weight: 700;}
#section3 .sec3-title-number ul > li .num b * {font-family: "Poppins"; font-size: 6rem;}
#section3 .sec3-title-number ul > li .num  em {font-size: 4rem; font-weight: 700; font-family: "Poppins"}
#section3 .sec3-title-number ul > li .txt {opacity: .7; color: #111; font-weight: 400; text-align: center;}
#section3 .sec3-title > a {font-size: 1.6rem; color: #137B44; font-weight: 700;}
#section3 .sec3-title > a:hover {text-decoration: underline; text-underline-position: under;}

#section3 .sec3-box h3 {font-size: 4.4rem; font-weight: 600; color: #111; margin-bottom: 3.2rem;}
#section3 .sec3-box-tab {margin-bottom: 2.4rem;}
#section3 .sec3-box-tab > ul {display: flex; gap: 1.2rem;}
#section3 .sec3-box-tab > ul > li {width: 100%;}
#section3 .sec3-box-tab > ul > li > a {display: flex; align-items: center; justify-content: center; height: 5.1rem; text-align: center; border: 1px solid #E8E8E8; background: #F8F8F8; }
#section3 .sec3-box-tab > ul > li > a span {position: relative;}
#section3 .sec3-box-tab > ul > li > a span::before {content: ""; width: .8rem; height: .8rem; border-radius: 50%; background: #2FD37E; position: absolute; left: -2rem; top: 50%; transform: translateY(-50%); opacity: 0;}
#section3 .sec3-box-tab > ul > li > a.active {background: #111; font-weight: 700; color: #fff;}
#section3 .sec3-box-tab > ul > li > a.active span::before {opacity: 1;}
#section3 .sec3-box-tab .select {position: relative; display: none;}
#section3 .sec3-box-tab .select::before {position: absolute; top: 50%; transform: translateY(-50%); right: 1.5rem; font-family: "remixicon"; content: '\ea50';  transition: all 0.2s; font-size: 18px;}
#section3 .sec3-box-tab .select::after {position: absolute; top: 50%; transform: translateY(-50%); left: 1.8rem; content: ''; width: .8rem; height: .8rem; border-radius: 50%; background: #137B44;}
#section3 .sec3-box-tab .select select { border: 1px solid #151515; background: #fff; width: 100%; text-align: left; padding: 0 3.5rem; height: 6rem; font-weight: 700; font-size: 15px;}
#section3 .sec3-box-contents article {display: none}
#section3 .sec3-box-contents article.active {display: flex;}
#section3 .sec3-box-contents article .img {width: 40%; aspect-ratio: 1 / .6;} 
#section3 .sec3-box-contents article .img img {width: 100%; height: 100%; object-fit: cover;}
#section3 .sec3-box-contents article .txt {width: 60%; background: #137B44; color: #fff; padding: 6rem; display: flex; flex-direction: column; gap: 4rem; justify-content: space-between;}
#section3 .sec3-box-contents article .txt-title {font-size: 3.2rem; font-weight: 700; display: block; margin-bottom: 2rem;}
#section3 .sec3-box-contents article .txt .list {counter-reset: number 0;}
#section3 .sec3-box-contents article .txt .list > li {position: relative; padding-left: 2.2rem;}
#section3 .sec3-box-contents article .txt .list > li::before {counter-increment: number 1; content: counter(number) ') '; left: 0; position: absolute;} 
#section3 .sec3-box-contents article .txt > a {width: 24rem; border: 2px solid #225189; padding: 1rem; display: flex; align-items: center; justify-content: center; gap: 2rem; background: #225189; color: #fff; font-weight: 700; transition: .4s;}
#section3 .sec3-box-contents article .txt > a i {font-size: 2.4rem; font-weight: 400;}
#section3 .sec3-box-contents article .txt > a:hover {background: #137B44; color: #fff; border-color: #fff;}

/* =========================================================
   Mobile Font Optimization (PC 영향 없음)
   - iOS/Android 자동 글자 확대 방지
   - 작은 화면에서 rem(루트 폰트) 스케일을 부드럽게 조정
   ========================================================= */
@media (max-width: 1024px){
  html{
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    /* 1rem: 8px ~ 10px 범위에서 화면폭에 따라 자동 조절 */
    font-size: clamp(8px, 2.4vw, 10px);
  }

  body{
    line-height: 1.6;
    word-break: keep-all;
    overflow-wrap: anywhere;
  }

  /* 텍스트 렌더링 안정화 */
  body, p, li, dt, dd, a, span, strong, em, label, input, textarea, button{
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }
}

/* iOS에서 input/textarea 포커스 시 화면이 확대되는 현상 방지 */
@media (max-width: 768px){
  input, select, textarea, button{
    font-size: 16px;
  }
}

/* 기본: 둘 다 숨김 처리 */
.pc-br,
.pc-mo {
    display: none;
}

/* =========================
   PC에서만 줄바꿈 적용
   ========================= */
@media (min-width: 769px) {
    .pc-br {
        display: inline;
    }
}

/* =========================
   모바일에서만 줄바꿈 적용
   ========================= */
@media (max-width: 768px) {
    .pc-mo {
        display: inline;
    }
}