section { width: 100%; margin: 0 auto;}
section:not(.section01) {margin-top: 10rem;}
main .container { max-width: 160rem; width: 100%; padding-top: 8rem; margin: 0 auto;}
.container_full { max-width: 192rem; width: 100%; margin: 0 auto;}
.container_full2 { max-width: 192rem; width: 100%; margin: 0 auto; padding-top: 8rem; max-height: 91.1rem; height: 100%;}
h2 {font-size: 6rem;}
.main h2.page_title {font-size: 3.2rem;font-weight: 600;margin: 0 0 1.6rem;text-align: left;}
.main h2.page_title.center {text-align: center;}

span.big_title {display: block;font-size: 6rem;font-weight: 600;text-align: left;margin-top: 2rem;}
.main .section02 span.big_title.center {margin-top: 8rem;}
span.big_title b{font-size: 6rem;font-weight: 600;color: var(--primary-700);}
span.big_title.center {text-align: center;}

p.sub_title {font-size: 3.2rem;font-weight: 500;margin: 1rem 0 3rem;}
p.sub_title.center {text-align: center;}
.white {color: white;}
@media (max-width: 1600px) {.container { max-width: 160rem; width: 100%; margin: 12rem auto 0; padding: 0 1rem;}.main h2.page_title { font-size: 3rem; margin: 0 0 1.6rem;}span.big_title { font-size: 5.4rem; margin-top: 2rem;}span.big_title b{ font-size: 5.4rem;}p.sub_title { font-size: 3rem; margin: 1rem 0 3rem;}}
@media (max-width: 1024px) {main .container { max-width: 160rem; width: 100%; padding-top: 2rem; margin: 0 auto;}.container_full2 { max-height: auto; height: 100%;}}

/* 풀페이지 */
#fp-nav.fp-left {left: 10px !important;}
#fp-nav ul li a span { background: var(--primary-600)!important; /* 라이브러리 기본 스타일 덮어쓰기 */
}

#fp-nav ul li a.active span {background: var(--primary-800) !important;}
/* ---------- section01 */
.main .section01 {width: 100%;height: 100vh; /* 화면 전체 높이 강제 지정 */position: relative;overflow: hidden;padding: 0 !important; /* fullPage.js 등에서 생길 수 있는 패딩 제거 */}

/* 내부 컨테이너들이 부모 높이(100vh)를 물려받도록 설정 */
.main .section01 .container_full {width: 100%;height: 100%; /* 부모 높이 꽉 채움 */max-width: none; /* 너비 제한 해제 */padding: 0;margin: 0;}

.main .section01 .main_visual {width: 100%;height: 100%; /* 부모 높이 꽉 채움 (핵심!) */background-size: cover;       /* 빈틈없이 채우기 */background-position: center;  /* 중앙 정렬 */background-repeat: no-repeat;/* 텍스트 정중앙 정렬을 위한 Flex 설정 */display: flex;flex-direction: column;justify-content: center;align-items: center;/* 텍스트가 잘 보이도록 배경을 약간 어둡게 처리 (선택사항) */position: relative; }

/* 배경 이미지 연결 (HTML 클래스와 매칭) */
.main .section01 .slide01 {background-image: url('../../img/slide1.jpg'); }


/* 텍스트 스타일 */
.main_text {text-align: center;padding: 0 20px; /* 모바일에서 글자가 화면 끝에 붙지 않도록 여백 */z-index: 10; /* 배경보다 위에 위치 */}

.main_text h1 {font-size: 8rem;font-weight: 700;color: #fff;line-height: 1.2;margin-bottom: 2rem;text-shadow: 0 4px 10px rgba(0,0,0,0.4);}

.main_text p {font-size: 3.2rem;font-weight: 400;color: #fff;text-shadow: 0 2px 5px rgba(0,0,0,0.5);word-break: keep-all; /* 단어 단위로 줄바꿈 */}

/* 오버레이 (배경이 너무 밝을 때 글씨 잘 보이게 하기 위해) */
.main .section01 .main_visual::before {content: '';position: absolute;top: 0; left: 0; width: 100%; height: 100%;background: rgba(0, 0, 0, 0);z-index: 0;}


/* --- [애니메이션] 텍스트가 아래에서 위로 올라오는 효과 --- */
@keyframes fadeInUp {from { opacity: 0; transform: translateY(60px); /* 60px 아래에서 시작 */}to { opacity: 1; transform: translateY(0);    /* 원래 위치로 이동 */}}

/* 기본 애니메이션 클래스 */
.fade-up {opacity: 0; /* 처음엔 안 보임 */animation: fadeInUp 1s ease-out forwards; /* 1.2초 동안 실행 */}

/* 딜레이 클래스 (p 태그용) */
.fade-up.delay {animation-delay: 0.8s; /* 초 뒤에 시작 */}


/* --- [반응형] --- */

/* 노트북/태블릿 (1440px 이하) */
@media (max-width: 1440px) {.main_text h1 { font-size: 6rem;}.main_text p { font-size: 2rem;}}

/* 태블릿 (1024px 이하) */
@media (max-width: 1024px) {.main .section01 { height: 100vh !important; /* 모바일에서도 높이 유지 */}.main_text h1 { font-size: 4.5rem; margin-bottom: 1.5rem;}.main_text p { font-size: 1.8rem;}}

/* 모바일 (768px 이하) */
@media (max-width: 768px) {.main_text h1 { font-size: 3.2rem; margin-bottom: 1.2rem;}.main_text p { font-size: 1.5rem; line-height: 1.5;}}



/* ---------- section02 */
.main .section02 {max-width: 192rem;width: 100%;height: 100%;margin: 160px auto 0;}

.main .section02 .article_wrap {width:100%;position: relative;display: flex;padding: 0;background-size: cover;background-position: center;opacity: 1;/* transition: background-image 0.5s ease; */transition: opacity 0.6s 0.2s, transform 0.6s 0.2s;  /* 0.4s delay */height: 60rem;overflow: hidden;}
.main .section02 .article_wrap.on {opacity: 1;transform: none;}


.main .section02 .article_wrap::before {content: "";position: absolute;inset: 0;z-index: 1;opacity: 0;pointer-events: none;background-image: var(--big-bg, none);background-position: center center;background-size: cover;transition: opacity 0.4s;}

/*  
.main .section02 .article_wrap.reveal1::before,
.main .section02 .article_wrap.reveal2::before,
.main .section02 .article_wrap.reveal3::before {opacity: 1;}
.main .section02 .article_wrap.reveal1 .article,
.main .section02 .article_wrap.reveal2 .article,
.main .section02 .article_wrap.reveal3 .article {background: transparent !important;}

.main .section02 .article_wrap.reveal1 .article:not(.active) *,
.main .section02 .article_wrap.reveal2 .article:not(.active) *,
.main .section02 .article_wrap.reveal3 .article:not(.active) * {opacity: 0 !important;pointer-events: none;transition: opacity 0.3s;}
*/

/* ✅ active 카드(hover 중)만 텍스트 보임 (구체적인 우선순위!)
.main .section02 .article_wrap.reveal1 .article.active *,
.main .section02 .article_wrap.reveal2 .article.active *,
.main .section02 .article_wrap.reveal3 .article.active * {opacity: 1 !important;pointer-events: auto;transition: opacity 0.3s;}
*/

/* hover 시 카드 확대 및 강조 효과 */
.main .article_wrap .article:hover {transform: scale(1.02); /* 1.05배 확대 (원하는 만큼 숫자 조정) */box-shadow: 0 10px 20px rgba(0,0,0,0.3); /* 살짝 그림자를 주어 입체감 추가 (선택사항) */}


/* 카드 개별 스타일 */
.main .article_wrap .article {min-width: 30rem; /* 카드가 너무 작아지는 것 방지 */flex: 1 1 33.3%; /* 유연한 반응형 비율 */padding: 20px;background-color: rgba(0,0,0,0.3);color: #fff;cursor: pointer;transition: transform 0.3s, background 0.3s;position: relative;z-index: 2;background-size: cover;background-position: center;background-repeat: no-repeat;display: flex;flex-direction: column;justify-content: flex-end;}

.main .article,
.main .article_wrap::before {background-position: center center;background-size: cover;border: 1px solid white;}

/* hover 시 카드 살짝 튀어나오는 효과 */
/* .article_wrap .article:hover {transform: translateY(-5px);} */

/* reveal1 상태에서 카드 배경 투명 
.main .section02 .article_wrap.reveal1 .article {background: transparent !important;}
*/

.main .article h3 {margin-bottom: 2rem;text-align: center;font-size: 3.6rem;text-shadow: 0 2px 8px rgba(0,0,0,0.35);}
.main .article p {font-size: 2.6rem;font-weight: 500;text-align: center;margin-bottom: 10rem;text-shadow: 0 2px 8px rgba(0,0,0,0.35);}

.main .section02 .article_wrap::before {z-index: 1;   /* 배경(아래) */}
.main .article_wrap .article {z-index: 2;   /* 카드 내용(위) */position: relative;}

@media screen and (max-width: 1440px) {
.main .section02 .article_wrap { height: 54rem; /* 기존 700px → 540px 정도로 줄이기 */}
.main .article_wrap .article { padding: 16px;}
.main .article h3 { font-size: 2.4rem; margin-bottom: 20px;}
.main .article p { font-size: 1.6rem; margin-bottom: 6px;}}

@media (max-width:800px) {.main .section02 { margin: 8rem auto 0; /* 160px -> 80px 로 축소 */ height: auto !important; /* fullPage 높이 강제 무시 및 내용물에 맞춤 */ padding-bottom: 8rem; /* 섹션 3과 겹치지 않도록 하단 여백 추가 */}.main .section02 .article_wrap { flex-direction: column; height: auto !important;}
.main .article_wrap .article { flex: none; width: 100%; height: 20rem !important; /* 원래 비율 유지하되 필요시 auto 로 조정 가능 */ background-size: cover; /* 유지 필요 */ background-position: center;}/* ::before 배경도 비례 축소 */.main .section02 .article_wrap::before { background-size: cover; background-position: center;}}


/* --------- section03 섹션03 */

.main .section03 .main_title_wrap{position: relative;}
.main .section03 .main_title_wrap .page_title{position: absolute;top: 2rem;left: 0;}
.main .section03 .main_title_wrap .big_title{position: absolute;top: 8rem;left: 0;}


/* 상단 타이틀 */
.section03 .page_title {font-size: 3rem;font-weight: 600;margin-bottom: 12px;}

.section03 .big_title {display: block;font-size: 6.4rem;font-weight: 700;}

/* ============================ 레이아웃 ============================ */
.section03 .product_wrap {display: flex;justify-content: space-between;gap: 60px;margin-top: 48px;position: relative;}

/* 텍스트 영역 */
.section03 .product_text_area {flex: 0 0 40%;margin-top: 20rem;}

.section03 .product_text_area .pt_title {font-size: 4.4rem;font-weight: 700;margin-bottom: 3.4rem;}

.section03 .product_text_area .pt_sub {font-size: 2.8rem;line-height: 1.5;margin-bottom: 2rem;}

.section03 .product_text_area .pt_desc {font-size: 2.4rem;line-height: 1.5;margin-bottom: 2rem;}

/* More 버튼 */
.section03 .product_text_area .btn_more {display: inline-flex;align-items: center;justify-content: center;min-width: 120px;height: 40px;padding: 0 20px;border-radius: 999px;border: 1px solid #222;font-size: 1.4rem;font-weight: 500;color: #222;text-decoration: none;transition: background 0.2s ease, color 0.2s ease;}

.section03 .product_text_area .btn_more:hover {background: #222;color: #fff;}

/* ============================ 이미지 영역 (Swiper) ============================ */

/* 슬라이더 영역 자체 폭 보장 */
.section03 .product_img_area {flex: 0 0 60%;}

/* Swiper 컨테이너가 부모 폭을 꽉 채우도록 */
.section03 .product_img_area .swiper {width: 100%;height: auto;}

/* 슬라이드 폭 강제 */
.section03 .product_img_area .swiper-wrapper {display: flex;}

.section03 .product_img_area .swiper-slide {width: 100% !important;flex-shrink: 0;text-align: right;}

.section03 .product_img_area img {max-width: 95rem;width: 100%;height: auto;display: inline-block;}

/* ============================ 버튼 + 페이지 + 진행바 ============================ */

/* 버튼/페이지/프로그레스 바 묶음 */
.section03 .swiper_button_wrap {display: flex;align-items: center;justify-content: center;gap: 40px;margin-top: 40px;position: absolute;bottom: 6rem;left: 36rem;}

/* Swiper 네비게이션 버튼(동그라미) */
.section03 .swiper_button_wrap .swiper-button-next2,
.section03 .swiper_button_wrap .swiper-button-prev2 {width: 40px;height: 40px;border-radius: 50%;border: 1px solid #ccc;display: flex;align-items: center;justify-content: center;cursor: pointer;background: #fff;font-size: 20px;transition: 0.2s;}

/* arrow_btn 클래스를 써도 동일하게 동작하도록 */
.section03 .arrow_btn {width: 40px;height: 40px;border-radius: 50%;border: 1px solid #ccc;display: flex;align-items: center;justify-content: center;cursor: pointer;background: #fff;font-size: 20px;transition: 0.2s;}

.section03 .swiper_button_wrap .swiper-button-next2:hover,
.section03 .swiper_button_wrap .swiper-button-prev2:hover,
.section03 .arrow_btn:hover {background: #222;color: #fff;border-color: #222;}

/* 가운데 (페이지 + 프로그레스바) 묶음 */
.section03 .page_center {display: flex;flex-direction: column;align-items: center;gap: 8px;}

/* 01 / 03 */
.section03 .product_pagination {min-width: 80px;text-align: center;font-size: 1.4rem;letter-spacing: 0.2em;color: #333;}

/* 프로그레스 바 */
.section03 .product_progress_wrap {width: 90px;height: 2px;background: #ddd;overflow: hidden;border-radius: 999px;}

.section03 .product_progress_bar {width: 0;height: 100%;background: #222;transform-origin: left center;}

/* ============================ 하단 탭 (애니메이션 포함) ============================ */ .section03 .products_tab_wrap { margin-top: 1rem; border-bottom: 1px solid #e3e3e3; /* 줄은 그대로 */ padding-top: 0;                /* 위 패딩은 필요 없음 */ display: flex; gap: 40px;}/* 탭을 줄 위로 살짝 올리기 */.section03 .products_tab_btn { background: #fff; border: 0; padding: 0 0 1rem; font-size: 1.4rem; color: #999; cursor: pointer; position: relative;}

/* 밑줄 애니메이션 기본 */
.section03 .products_tab_btn::after {content: "";position: absolute;left: 0;bottom: 0;height: 2px;width: 0;background: #222;transition: width 0.3s ease;}

.section03 .products_tab_btn.active {color: #222;}

.section03 .products_tab_btn.active::after {width: 100%;}





/* ============================ 반응형 ============================ */
@media (max-width: 1700px) {
  .section03 .page_title {   font-size: 2.8rem;   margin-bottom: 10px; }
  .section03 .big_title {   display: block;   font-size: 6rem; }
  .section03 .product_wrap {   margin-top: 3rem;   padding: 0 4rem; }
  .main .section03 .main_title_wrap .page_title{   left: 4rem; }
  .main .section03 .main_title_wrap .big_title{   top: 6rem;   left: 4rem; }
  .section03 .product_text_area {   flex: 0 0 40%;   margin-top: 16rem; } }
  
  @media (max-width: 1500px) { .section03 .page_title {   font-size: 2.4rem;   margin-bottom: 10px; }
  .section03 .big_title {   display: block;   font-size: 5.2rem; }
  .section03 .product_wrap {   margin-top: 3rem;   padding: 0 4rem; }
  .main .section03 .main_title_wrap .page_title{   left: 4rem; }
  .main .section03 .main_title_wrap .big_title{   top: 6rem;   left: 4rem; }
  .section03 .product_text_area {   flex: 0 0 40%;   margin-top: 14rem; }
  .section03 .product_text_area .pt_title {   font-size: 3.6rem;   font-weight: 700;   margin-bottom: 3.4rem; }
  .section03 .product_text_area .pt_sub {   font-size: 2.4rem;   line-height: 1.5;   margin-bottom: 2rem; }
  .section03 .swiper_button_wrap {   display: flex;   align-items: center;   justify-content: center;   gap: 40px;   margin-top: 40px;   position: absolute;   bottom: 0;   left: 20rem; }
  .section03 .products_tab_wrap{   padding: 0 4rem; } }

 @media (max-width: 1024px) { .section03 {   padding: 70px 0; }
 .section03 .product_wrap {   gap: 40px;   flex-direction: column;         /* 태블릿부터는 세로로 */   padding: 0 1rem; }
 .main .section03 .main_title_wrap .page_title{   left: 1rem; }
 .main .section03 .main_title_wrap .big_title{   top: 6rem;   left: 1rem; }
 .section03 .product_text_area {   flex: 0 0 100%;   margin-top: 12rem;               /* 데스크탑 20rem보다 줄여줌 */ }
 .section03 .product_img_area {   flex: 0 0 100%; } /* 태블릿에서는 절대 위치 해제하고 가운데 정렬 */ .section03 .swiper_button_wrap {   position: static;               /* absolute 해제 */   margin: 3rem auto 0;   justify-content: center; }
 .section03 .swiper_button_wrap .swiper-button-prev2, .section03 .swiper_button_wrap .swiper-button-next2 {   position: static;               /* 개별 버튼도 위치 초기화 */   transform: none; }
 .section03 .products_tab_wrap{   padding: 0 1rem; }}@media (max-width: 768px) { .section03 .big_title {   font-size: 2.6rem; }
 .section03 .product_wrap {   flex-direction: column;   align-items: flex-start; }
 .section03 .product_text_area, .section03 .product_img_area {   flex: 0 0 100%;   width: 100%; }
 .section03 .product_img_area .swiper-slide {   text-align: center; } /* 모바일에서 버튼/페이지 묶음 */ .section03 .swiper_button_wrap {   position: static;               /* 완전히 일반 흐름으로 */   margin: 2rem auto 0;   gap: 24px; }
 .section03 .swiper_button_wrap .swiper-button-prev2, .section03 .swiper_button_wrap .swiper-button-next2 {   width: 32px;   height: 32px;   font-size: 1.6rem;   position: static;   transform: none; } /* 탭 영역 */ .section03 .products_tab_wrap {   gap: 24px;   flex-wrap: wrap;   margin-top: 2rem; }
 .section03 .products_tab_btn {   margin-top: 0;   font-size: 1.3rem; }}



/* ----- 섹션04 */
.main .section04 .container_full {max-width: 192rem;width: 100%;height: 100%;background-image: url(../../img/main_tech0.jpg);background-repeat: no-repeat;  /* 1. 이미지 반복 금지 (잘려도 반복 안 함) */ background-size: cover;        /* 2. 비율을 유지하면서 빈 공간 없이 가득 채우기 */ background-position: center;   /* 3. (추천) 이미지가 잘릴 때 중앙을 기준으로 보여줌 */padding-top: 8rem;}
.main .section04 .container_full .page_title {font-size: 2.8rem;font-weight: 500;color: rgba(255,255,255,0.8);}
.main .section04 .container_full .big_title {font-size: 6.4rem;font-weight: 700;color: white;}
.main .section04 .container_full .sub_title {font-size: 2.8rem;font-weight: 500;color: white;margin: 0;}
.main_tech_wrap {display: flex;justify-content: flex-end;margin-top: 4rem;margin-right: 27rem;}
.main_tech_article_wrap {display: inline-flex;flex-direction: column;gap: 2rem;}
.main_tech_article_wrap article.main_tech {padding: 4rem 8rem 4rem 3rem;display: inline-flex;gap: 3rem;align-items: center;border: 2px solid white;border-radius: 2rem;background-color: rgba(31,37,48,.5);}
.main_tech_article_wrap article.main_tech .main_tech_text_wrap {display: flex;flex-direction: column;gap: 2rem;}
.main_tech_article_wrap article.main_tech .main_tech_text_wrap span{font-size: 2.6rem;font-weight: 600;color: white;}
.main_tech_article_wrap article.main_tech .main_tech_text_wrap p{font-size: 2rem;font-weight: 500;color: white;}

/* 기본 트랜지션 설정 (부드럽게) */
.container_full {transition: background-image 0.5s ease-in-out;}

/* 1번째 자식에 호버했을 때 부모 배경 변경 */
.container_full:has(.main_tech:nth-child(1):hover) {background-image: url('../../img/main_tech1.jpg'); }

/* 2번째 자식에 호버했을 때 */
.container_full:has(.main_tech:nth-child(2):hover) {background-image: url('../../img/main_tech2.jpg');}

/* 3번째 자식에 호버했을 때 */
.container_full:has(.main_tech:nth-child(3):hover) {background-image: url('../../img/main_tech3.jpg');}

@media (max-width:1500px) {
.main_tech_wrap { display: flex; justify-content: center; margin-top: 4rem; margin-right: 0; margin-bottom: 2rem;}
}
@media (max-width:1024px) {.main .section04 .container_full { padding-bottom: 2rem;}.main_tech_wrap { display: flex; justify-content: center; margin-top: 4rem; margin-right: 0; margin-bottom: 2rem;}
}
@media (max-width: 780px) {.main_tech_article_wrap article.main_tech .main_tech_text_wrap span{ font-size: 2rem; font-weight: 600; color: white;}.main_tech_article_wrap article.main_tech .main_tech_text_wrap p{ font-size: 1.6rem; font-weight: 500; color: white;}
}
@media (max-width: 500px) {.main .section04 .container_full { padding-left: 2rem; padding-right: 2rem;}.main_tech_article_wrap article.main_tech .main_tech_text_wrap span{ font-size: 1.6rem; font-weight: 600; color: white;}.main_tech_article_wrap article.main_tech .main_tech_text_wrap p{ font-size: 1.4rem; font-weight: 500; color: white;}
}


/* ----- 섹션05 */
.main_video {margin: 0 auto;width: 80%;height: auto; display: block;}

@media (max-width: 768px) {.main_video { margin: 0 auto; width: 100%; height: auto;  display: block;}}

/* ------------Swiper 스와이퍼 */
/* 색/크기 변수 */
:root { --nav_size: 56px; --nav_bg: rgba(0,0,0,.38); --nav_bg_hover: rgba(0,0,0,.6); --nav_color: #fff; --nav_shadow: 0 6px 18px rgba(0,0,0,.25);}/* 버튼 공통 */
.section01 .nav_btn { width: var(--nav_size); height: var(--nav_size); border-radius: 9999px; background: var(--nav_bg); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); box-shadow: var(--nav_shadow); display: flex; align-items: center; justify-content: center; transition: background .2s ease, transform .2s ease, opacity .2s ease; color: var(--nav_color);}/* Swiper 기본 화살표는 :after로 들어와요 → 크기/색만 조정 */
.section01 .nav_btn::after { font-size: 20px;      /* 기본 44px → 줄임 */ font-weight: 700; color: var(--nav_color);}
.section02 .nav_btn::after { font-size: 20px;      /* 기본 44px → 줄임 */ font-weight: 700; }


.swiper-button-prev.swiper-button-prev2,
.swiper-button-next.swiper-button-next2 {position: absolute;   /* static 무시하고 절대 위치 */top: auto;bottom: 0;background-color: var(--primary-100);      /* 원 배경색 */border-radius: 50%;           /* 둥근 버튼 유지 */width: 44px; height: 44px;opacity: 0.5;z-index: 10;          /* 다른 요소 위에 보이게 */}
.swiper-button-prev.swiper-button-prev2 { top:50%; left: 0; z-index: 20;}
.swiper-button-next.swiper-button-next2 { top:50%; right: 0; z-index: 20;}
.swiper-button-next2::after,
.swiper-button-prev2::after {color: #222;  /* 원하는 색상 */font-size: 12px !important;             /* 크기도 조정 가능 */font-weight: 800;}
.swiper-button-prev2 .swiper-navigation-icon {color: #222 !important;   width: 12px !important; }
.swiper-button-next2 .swiper-navigation-icon {color: #222 !important;   width: 12px !important; }


/* 이 슬라이더의 화살표 색 + 크기 */
.mySwiper {height: 100%; --swiper-theme-color: #ffffff;     /* 화살표 & 활성 불릿 색 */ --swiper-navigation-size: 5rem;    /* 화살표 크기(기본 44px) */}
.mySwiper.mySwiper2 {height: 80rem; --swiper-theme-color: var(--primary-500);     /* 화살표 & 활성 불릿 색 */ --swiper-navigation-size: 2rem;    /* 화살표 크기(기본 44px) */}/* 호버 색만 따로 주고 싶으면 */
.section01 .swiper-button-prev:hover,.section01 .swiper-button-next:hover { color: var(--primary-600);                   /* 호버 시 화살표 색 */}
/* 위치 보정 */.section01 .swiper-button-prev { left: 16px; right: auto; }
.section01 .swiper-button-next { right: 16px; left: auto; }
.section01 .nav_btn { top: 50%; transform: translateY(-50%); }
/* 호버/활성/비활성 */
.section01 .nav_btn:hover { background: var(--nav_bg_hover); transform: translateY(-50%) scale(1.05); }
.section01 .nav_btn:active { transform: translateY(-50%) scale(0.98); }.section01 .swiper-button-disabled { opacity: .35; pointer-events: none; }
.section02 .nav_btn:hover { background: var(--nav_bg_hover); transform: translateY(-50%) scale(1.05); }
.section02 .nav_btn:active { transform: translateY(-50%) scale(0.98); }
.section02 .swiper-button-disabled { opacity: .35; pointer-events: none; }/* 페이지네이션: 점이 '길어지는' 스타일 */.section01 .swiper-pagination { bottom: 20px !important; }
.section01 .swiper-pagination-bullet { width: 4rem; height: 1rem; border-radius: 9999px; background: rgba(255,255,255,1); opacity: 1; transition: all .25s ease;}
.section01 .swiper-pagination-bullet-active { width: 2rem; background: var(--primary-500);}/* 다크 이미지 위 가독성 확보용(선택) */
.section01 .swiper-pagination { filter: drop-shadow(0 2px 4px rgba(0,0,0,.25)); }/* 모바일: 버튼 살짝 작게, 필요 시 숨김 */
@media (max-width: 768px) { :root { --nav_size: 44px; } /* 버튼 완전 숨기고 스와이프만 쓰고 싶으면 아래 주석 해제 .section01 .nav_btn { display: none; } */}

/* 탭 컨테이너 */
#tabs-swiper2 {position: relative;display: grid;grid-template-columns: repeat(8, 1fr);column-gap: 0;margin: 18px auto 0;padding-bottom: 14px;max-width: 1200px;box-sizing: border-box;}

/* 탭 버튼 */
#tabs-swiper2 .tab {--p: 0; /* 0~1 진행도 */justify-self: start;align-self: center;width: 100%;text-align: left;border: 0;background: none;padding: 0;font-size: 1.8rem;font-weight: 700;cursor: pointer;white-space: nowrap;
/* 기본색 + 채워지는 애니메이션 */background: linear-gradient(90deg, #111, #111) 0 0 / calc(var(--p) * 100%) 100% no-repeat, linear-gradient(#cfcfcf, #cfcfcf);-webkit-background-clip: text;background-clip: text;color: transparent;-webkit-text-fill-color: transparent;
transition: background-size 0.12s linear;}

#tabs-swiper2 .tab:not(.is-active) {opacity: 0.5;}


/* 활성 탭 */
#tabs-swiper2 .tab.is-active {color: #111;}



/* 진행선(브랜드 색) — 활성 밑줄 위에서 좌→우로 채움 */
#tabs-swiper2 .tabs-progress {background: var(--primary-700, #283D99);left: 0;width: 0;transform-origin: left center;transition: none; /* JS로 제어 */z-index: 2;}

@media (max-width: 1200px) {#tabs-swiper2 .tab { font-size: 1.2rem; padding: 0 1rem;}} 

@media (max-width: 800px) {#tabs-swiper2 { max-width: 660px; /* 필요 시 */}#tabs-swiper2 .tab { font-size: 1rem; padding: 0 0.4rem;}} 
@media (max-width: 660px) {#tabs-swiper2 { max-width: 660px; /* 필요 시 */ width: 100%;}#tabs-swiper2 .tab { white-space: wrap;}
} 


/* -- JS 풀 스크롤 페이지 */

@media (min-width: 1025px) {html,body {}
.js_full { transition: transform 0.75s ease; will-change: transform;}
.js_full > .section:not(.footer_section) { min-height: 100vh; box-sizing: border-box;}
.js_full > .footer_section { min-height: auto;}
.js_full > section:last-of-type { margin-bottom: 0;}}

@media (max-width: 1024px) {html,body { overflow: auto;}
.js_full { height: auto; transform: none !important;}
.js_full > .section { min-height: auto;}}