@charset "UTF-8";

/* 기본 초기화 */
* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Noto Sans KR', sans-serif; }
ul, li { list-style: none; }
a { text-decoration: none; color: #333; }

/* 레이아웃 */
.wrap { min-height: 100vh; display: flex; flex-direction: column; }
main { flex: 1; padding: 50px 20px; text-align: center; }

/* -------------------------------------
   Header & GNB (click방식 및 반응형)
------------------------------------- */
header {
   position: relative;
   border-bottom: 1px solid #ddd;
   background-color: #fff;
   z-index: 1000;
}

.header-inner {
   display: flex;
   justify-content: space-between;
   align-items: center;
   max-width: 1200px;
   margin: 0 auto;
   height: 60px;
   padding: 0 20px;
}

.logo { font-size: 24px; font-weight: bold; color: #b11623; letter-spacing: -1px; }

/* 모바일용 햄버거 버튼 (PC에서는 숨김) */
.m-menu-btn {
   display: none;
   font-size: 28px;
   background: none;
   border: none;
   cursor: pointer;
   color: #333;
}

/* 1 Depth 메뉴 */
.gnb { display: flex; height: 100%; }
.gnb > li { height: 100%; }
.gnb > li > a {
   display: flex;
   align-items: center;
   padding: 0 40px;
   height: 100%;
   font-size: 18px;
   font-weight: 500;
}

/* 와이드 메가 메뉴 (2, 3 Depth) */
.mega-menu {
   position: absolute;
   top: 80px;
   left: 0;
   width: 100%;
   background-color: #fff;
   border-top: 1px solid #eee;
   border-bottom: 1px solid #ddd;
   box-shadow: 0 10px 10px rgba(0,0,0,0.05);
   display: none; /* 기본 숨김 */
   padding: 40px 0;
}

/* hover 대신 active 클래스가 있을 때만 펼침 */
.gnb > li.active .mega-menu { display: block; }
.gnb > li.active > a { color: #b11623; }

.mega-inner {
   max-width: 1200px;
   margin: 0 auto;
   display: flex;
   gap: 50px;
}

/* 2 Depth, 3 Depth 스타일 */
.depth2 > li { margin-bottom: 20px; min-width: 150px; }
.depth2 > li > a { font-size: 16px; font-weight: bold; display: block; margin-bottom: 15px; border-bottom: 2px solid #333; padding-bottom: 5px;}
.depth3 > li { margin-bottom: 8px; }
.depth3 > li > a { font-size: 14px; color: #666; font-weight: normal; }
.depth3 > li > a:hover { color: #b11623; text-decoration: underline; }

/* -------------------------------------
   모바일 (하이브리드 앱) 반응형 스타일
------------------------------------- */
@media screen and (max-width: 768px) {
   .header-inner { flex-wrap: wrap; }
    
   /* 모바일에서는 햄버거 버튼 보이기 */
   .m-menu-btn { display: block; }
    
   /* PC용 가로 메뉴를 숨기고 세로로 변경 */
   .gnb {
      display: none;
      flex-direction: column;
      width: 100%;
      position: absolute;
      top: 80px;
      left: 0;
      background-color: #fff;
      height: auto;
      border-top: 1px solid #ddd;
   }
    
   /* 햄버거 버튼 누르면 메뉴 보이기 */
   .gnb.show { display: flex; }
    
   .gnb > li > a { padding: 20px; border-bottom: 1px solid #eee; justify-content: space-between; }
    
   /* 모바일 메가메뉴는 전체 화면이 아닌 아코디언 방식 */
   .mega-menu { position: relative; top: 0; padding: 20px; box-shadow: none; border-bottom: none; background-color: #f9f9f9; }
   .mega-inner { flex-direction: column; gap: 20px; padding: 0 20px; }
}

/* -------------------------------------
   Main Content (세라젬 스타일 메인 슬라이더)
------------------------------------- */
main { flex: 1; padding: 0; text-align: left; }

/* 1. 메인 배너 슬라이더 컨테이너 */
.main-banner {
   width: 100%;
   height: 600px;
   position: relative;
}

/* 개별 슬라이드 설정 */
.swiper-slide {
   position: relative;
   display: flex;
   align-items: center;
   justify-content: center;
   background-size: cover;
   background-position: center;
   background-repeat: no-repeat;
}

/* 🖼️ 슬라이드별 배경 이미지 (나중에 본인 폴더 경로로 수정하세요!) */
/* 예시: .slide-bg-1 { background-image: url('../images/main/main_bg_1.jpg'); } */
/*.slide-bg-1 { background-image: url('https://images.unsplash.com/photo-1540555700478-4be289fbecef?q=80&w=1920&auto=format&fit=crop'); } */
/*.slide-bg-2 { background-image: url('https://images.unsplash.com/photo-1515377905703-c4788e51af15?q=80&w=1920&auto=format&fit=crop'); } */
/*.slide-bg-3 { background-image: url('https://images.unsplash.com/photo-1600585154340-be6161a56a0c?q=80&w=1920&auto=format&fit=crop'); } */

/* 어두운 오버레이 필터 */
.swiper-slide::after {
   content: '';
   position: absolute;
   top: 0; left: 0; width: 100%; height: 100%;
   background: rgba(0,0,0,0.4); 
   z-index: 0;
}

/* 텍스트 컨테이너 */
.banner-text {
   position: relative;
   z-index: 1; /* 필터 위로 올리기 */
   text-align: center;
   color: #fff;
   padding: 0 20px;
}
.banner-text h2 { font-size: 48px; font-weight: 700; margin-bottom: 20px; text-shadow: 0 2px 10px rgba(0,0,0,0.3); }
.banner-text p { font-size: 20px; font-weight: 300; margin-bottom: 40px; }

/* 포인트 버튼 (기존과 동일) */
.btn-primary {
   display: inline-block;
   padding: 15px 40px;
   background-color: #b11623;
   color: #fff;
   font-size: 18px;
   font-weight: bold;
   border-radius: 30px;
   transition: background 0.3s, transform 0.3s;
}
.btn-primary:hover { background-color: #8a101b; transform: scale(1.05); }

/* Swiper 화살표 색상 변경 (세라젬 레드) */
.swiper-button-next, .swiper-button-prev { color: #fff !important; opacity: 0.7; transition: 0.3s; }
.swiper-button-next:hover, .swiper-button-prev:hover { opacity: 1; color: #b11623 !important; }
.swiper-pagination-bullet-active { background-color: #b11623 !important; }

/* 모바일 반응형 */
@media screen and (max-width: 768px) {
   .main-banner { height: 450px; }
   .banner-text h2 { font-size: 32px; }
   .banner-text p { font-size: 16px; }
}

/* -------------------------------------
   Sub Page Common (서브 페이지 공통)
------------------------------------- */
.sub-visual {
   position: relative;
   width: 100%;
   height: 180px; /* 텍스트가 두 줄이므로 높이를 살짝 키움 */
   background: url('../images/sub/sub_visual_default.jpg') no-repeat center center/cover;
   display: flex;
   align-items: center;
   justify-content: center;
   text-align: center; /* 내부 텍스트 무조건 가운데 정렬 */
}
/* 배경 이미지 어두운 필터 (글씨를 돋보이게 함) */
/*
.sub-visual::after {
   content: '';
   position: absolute;
   top: 0; left: 0; width: 100%; height: 100%;
   background: rgba(0,0,0,0.5); 
}
*/
/* 💡 텍스트를 하나로 묶어주는 박스 (부모에 있던 color: #fff 제거) */
.visual-text-box {
   position: relative;
   z-index: 1;
}

/* 메인 영문 타이틀 (진한 색상으로 변경) */
.visual-text-box h2 {
	  font-family: 'Montserrat', sans-serif; /* 영문 프리미엄 폰트 적용 */
   color: #111;            /* 완전 검은색보다 살짝 부드러운 진한 색 */
   font-size: 42px;
   font-weight: 700;       /* Montserrat의 700 굵기는 아주 단단하고 예쁩니다 */
   margin-bottom: 15px; 
   letter-spacing: 0px;    /* Montserrat은 기본 자간이 예뻐서 0px로 두는 것이 좋습니다 */
}

/* 서브 국문 카피 (어두운 회색으로 변경) */
.visual-text-box p {
	  font-family: 'Noto Sans KR', sans-serif; /* 국문 가독성 폰트 적용 */
   color: #555;            /* 밝은 배경에서 가독성이 좋은 짙은 회색 */
   font-size: 18px;
   font-weight: 400;       /* 300(얇음)에서 400(기본)으로 변경하여 가독성 확보 */
   letter-spacing: -0.5px;
}

/* 모바일 화면 대응 */
@media screen and (max-width: 768px) {
   .sub-visual { height: 250px; }
   .visual-text-box h2 { font-size: 30px; margin-bottom: 10px; }
   .visual-text-box p { font-size: 15px; padding: 0 20px; word-break: keep-all; }
}
.sub-visual h2 {
   position: relative;
   z-index: 1;
   color: #111111;    /* 글자색상을 흰색에서 어두운색으로 */
   font-size: 28px;
   font-weight: 700;
   letter-spacing: -1px;
}

.sub-inner {
   max-width: 1200px;
   margin: 10px auto 100px;     /* 위쪽 여백 조정 */
   padding: 0 20px;
}
.sub-title {
   text-align: left; /* 좌측 정렬로 모던하게 변경 */
   font-size: 32px;
   font-weight: 700;
   margin-bottom: 30px;
   color: #111;
   border-bottom: 2px solid #111;
   padding-bottom: 15px;
}

/* -------------------------------------
   유튜브 홍보 배너 (고객지원 페이지용)
------------------------------------- */
.youtube-banner {
   display: flex;
   justify-content: space-between;
   align-items: center;
   background-color: #fcf7f3; 
   border-radius: 12px;
   padding: 40px 50px;
   margin-bottom: 60px;
    
   /* 💡 아래 3줄을 추가해 보세요! */
   margin-top: -60px; /* 배너를 위로 60px 끌어올려 비주얼 배경과 겹치게 함 */
   position: relative;
   z-index: 10;       /* 끌어올린 배너가 배경에 묻히지 않고 위로 올라오게 함 */
   box-shadow: 0 10px 30px rgba(0,0,0,0.08); /* 겹친 부분에 예쁜 그림자 추가 */
   
   overflow: hidden;
   font-family: 'Noto Sans KR', sans-serif; 
}

/* 왼쪽 텍스트 영역 */
.yb-text-area {
   position: relative;
   z-index: 2;
}

.yb-sub {
   /* 💡 상위 부모(youtube-banner)의 폰트를 이어받지만, 명확하게 한 번 더 지정 */
   font-family: 'Noto Sans KR', sans-serif;
   font-size: 18px;
   color: #555;
   margin-bottom: 10px;
   letter-spacing: -0.5px;
}

.yb-sub .highlight {
   color: #e6192b; 
   font-weight: 700;
}

.yb-main {
   /* 💡 메인 타이틀에도 동일하게 한글 폰트 지정 */
   font-family: 'Noto Sans KR', sans-serif;
   font-size: 36px;
   font-weight: 700;
   color: #111;
   display: flex;
   align-items: center;
   gap: 15px;
}

/* 제목 옆 긴 화살표 라인 효과 */
.yb-main::after {
   content: '';
   display: inline-block;
   width: 60px;
   height: 1px;
   background-color: #111;
   position: relative;
}

/* 오른쪽 일러스트 및 버튼 영역 */
.yb-image-area {
   display: flex;
   flex-direction: column;
   align-items: flex-end;
   position: relative;
   z-index: 2;
}

/* 오른쪽 하단 유튜브 버튼 */
.yb-btn {
   /* 💡 버튼 글씨에도 한글 폰트 지정 */
   font-family: 'Noto Sans KR', sans-serif;
   display: inline-flex;
   align-items: center;
   gap: 8px;
   background-color: #eaddd5; 
   color: #555;
   padding: 10px 20px;
   border-radius: 4px;
   font-size: 15px;
   font-weight: 500;
   text-decoration: none;
   transition: 0.3s ease;
   margin-top: 20px;
}

.yb-btn:hover {
   background-color: #e6192b;
   color: #fff;
}

/* 유튜브 버튼 아이콘 */
.yb-btn svg {
   width: 24px;
   height: 24px;
  /* transition: 0.3s ease; */
}

/* 💡 아이콘의 기본 색상을 빨간색으로 지정하고, 변화 애니메이션 적용 */
.yb-btn svg path {
   fill: #e6192b;
   transition: fill 0.3s ease;
}

/* 💡 버튼에 마우스가 올라갔을 때(hover) 아이콘 색상을 흰색으로 변경 */
.yb-btn:hover svg path {
   fill: #ffffff;
}

/* 모바일 반응형 처리 */
@media screen and (max-width: 768px) {
   .youtube-banner {
      flex-direction: column;
      align-items: flex-start;
      padding: 30px 20px;
   }
   .yb-sub { font-size: 15px; }
   .yb-main { font-size: 26px; flex-wrap: wrap; }
   .yb-main::after { width: 40px; }
   .yb-image-area { width: 100%; align-items: flex-start; margin-top: 30px; }
   .yb-btn { width: 100%; justify-content: center; }
}

/* -------------------------------------
   고객지원 (Customer Support) 전용 스타일
------------------------------------- */
/* 1. 콜센터 안내 박스 */
.cs-info-box {
   background-color: #f9f9f9;
   border: 1px solid #eee;
   border-radius: 12px;
   padding: 20px 20px;
   text-align: center;
   margin-bottom: 50px;
}
.cs-info-box h4 { font-size: 22px; color: #333; margin-bottom: 15px; font-weight: 500; }
.cs-info-box .phone { font-size: 54px; font-weight: 700; color: #b11623; letter-spacing: -1px; margin-bottom: 15px; }
.cs-info-box .time { font-size: 16px; color: #666; line-height: 1.6; }

/* 2. 퀵 메뉴 (그리드) */
.cs-quick-menu {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
   gap: 20px;
   margin-bottom: 80px;
}
.cs-quick-card {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   background: #fff;
   border: 1px solid #ddd;
   border-radius: 12px;
   padding: 40px 20px;
   text-align: center;
   transition: all 0.3s ease;
}
.cs-quick-card:hover {
   border-color: #b11623;
   box-shadow: 0 10px 20px rgba(177, 22, 35, 0.08);
   transform: translateY(-5px);
}
.cs-quick-card svg {
   width: 48px;
   height: 48px;
   fill: none;
   stroke: #333;
   stroke-width: 1.5;
   margin-bottom: 20px;
   transition: stroke 0.3s;
}
.cs-quick-card:hover svg { stroke: #b11623; }
.cs-quick-card h5 { font-size: 20px; font-weight: 600; color: #111; margin-bottom: 10px; }
.cs-quick-card p { font-size: 15px; color: #666; word-break: keep-all; }

/* -------------------------------------
   게시판 (Board Style - 공지사항용)
------------------------------------- */
.board-wrap { width: 100%; }
.board-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; }
.board-top .title-sm { font-size: 22px; font-weight: 700; color: #111; }
.board-top .more-btn { font-size: 14px; color: #666; }
.board-top .more-btn:hover { color: #b11623; text-decoration: underline; }

.board-table { width: 100%; border-collapse: collapse; border-top: 2px solid #111; text-align: center; }
.board-table th, .board-table td { padding: 18px 10px; border-bottom: 1px solid #ddd; font-size: 16px; }
.board-table th { background-color: #f9f9f9; font-weight: 500; color: #333; }
.board-table td.title { text-align: left; padding-left: 20px; }
.board-table td.title a { color: #333; transition: 0.3s; }
.board-table td.title a:hover { color: #b11623; text-decoration: underline; font-weight: 500; }

@media screen and (max-width: 768px) {
   .board-table th:nth-child(1), .board-table td:nth-child(1), 
   .board-table th:nth-child(3), .board-table td:nth-child(3) { display: none; }
   .board-table td.title { padding-left: 10px; }
   .cs-info-box .phone { font-size: 40px; }
}

/* -------------------------------------
   Footer (하단 영역 - 세라젬 스타일)
------------------------------------- */
.footer {
   background-color: #fafafa; /* 세라젬처럼 아주 밝은 회색 바탕 */
   border-top: 1px solid #eaeaea;
   padding: 50px 0;
   font-family: 'Noto Sans KR', sans-serif;
   color: #555;
}

.footer-inner {
   max-width: 1200px;
   margin: 0 auto;
   padding: 0 20px;
}

/* 상단: 메뉴 */
.f-top {
   margin-bottom: 30px;
   padding-bottom: 30px;
   border-bottom: 1px solid #eaeaea;
}

.f-menu {
   display: flex;
   flex-wrap: wrap;
   gap: 25px;
}

.f-menu li a {
   font-size: 15px;
   color: #555;
   text-decoration: none;
   font-weight: 400;
}

/* 개인정보처리방침 강조 (대기업 필수 규칙) */
.f-menu li a.privacy {
   color: #111;
   font-weight: 700;
}

/* 중단: 기업 정보 & 고객센터 */
.f-main {
   display: flex;
   justify-content: space-between;
   margin-bottom: 40px;
}

/* 왼쪽 기업 정보 */
.f-logo {
   font-family: 'Montserrat', sans-serif;
   font-size: 20px;
   font-weight: 700;
   color: #b2b2b2;
   margin-bottom: 15px;
}

/* 푸터 기업 정보 상세 영역 스타일 조정 */
.f-company-details {
   /* 폰트를 프리텐다드로 지정 (없을 경우 시스템 기본 고딕) */
   font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, Roboto, 'Helvetica Neue', 'Segoe UI', 'Apple SD Gothic Neo', 'Noto Sans KR', 'Malgun Gothic', sans-serif;
}

/* 푸터 기본 텍스트 (실제 값의 스타일) */
.f-company-details p {
   font-family: 'Pretendard', sans-serif;
   font-size: 13.5px;
   line-height: 1.8;
   color: #555;            /* 🟢 실제 데이터 값은 조금 더 또렷하게 변경 (#767676 -> #555) */
   letter-spacing: -0.3px;
   margin-bottom: 4px;
}

/* [새로 추가] 앞쪽 안내 타이틀(라벨) 전용 스타일 */
.f-company-details .f-lbl {
   color: #a0a0a0;         /* 🟢 값보다 미세하게 더 연한 회색으로 설정 */
   font-weight: 300;       /* 🟢 굵기를 값(400)보다 한 단계 얇게 처리하여 세련미 강조 */
   margin-right: 4px;      /* 타이틀과 값 사이의 미세한 간격 떨어뜨리기 */
}

.f-company-details span {
   font-weight: 400;       /* 일반 기본 굵기 */
   position: relative;
   padding-right: 12px;
   margin-right: 8px;
   display: inline-block;
}

/* 상호, 대표자, 번호 사이의 세로 구분선(|) 디자인 */
.f-company-details span:not(:last-child)::after {
   content: '';
   position: absolute;
   right: 0;
   top: 55%;
   transform: translateY(-50%);
   width: 1px;
   height: 11px;
   background-color: #e0e0e0; /* 구분선이 너무 진하지 않게 처리 */
}

/* 오른쪽 고객센터 */
.f-cs {
   text-align: right;
}

.cs-title {
   font-size: 32px;
   font-weight: 700;
   color: #111;
}

.cs-phone {
   font-family: 'Montserrat', sans-serif;
   font-size: 32px;
   font-weight: 700;
   color: #111;
   margin: 5px 0;
   letter-spacing: -1px;
}

.cs-time {
   font-size: 13px;
   color: #777;
   line-height: 1.5;
}

/* SNS 영역 그룹 */
.f-sns {
   display: flex;
   justify-content: flex-end;
   gap: 10px;
   margin-top: 15px;
}

/* SNS 둥근 버튼 바탕 */
.f-sns li a {
   display: flex;
   align-items: center;
   justify-content: center;
   width: 38px;
   height: 38px;
   background-color: #eee;
   border-radius: 50%;
   text-decoration: none;
   transition: all 0.3s ease; /* 부드러운 색상 전환 애니메이션 */
}

.f-sns li a:hover {
   background-color: #111;
   color: #fff;
}

/* SNS SVG 아이콘 기본 스타일 */
.f-sns li a svg {
   width: 18px;
   height: 18px;
   fill: #999; /* 기본은 연한 회색 */
   transition: fill 0.3s ease;
}

/* 마우스 오버(Hover) 시 각 브랜드 고유 컬러로 변경 */
/* 1. 유튜브 오버 시 (빨간색) */
.f-sns li a.sns-yt:hover { background-color: #ff0000; }
.f-sns li a.sns-yt:hover svg { fill: #fff; }

/* 2. 인스타그램 오버 시 (핑크/마젠타) */
.f-sns li a.sns-ig:hover { background-color: #E1306C; }
.f-sns li a.sns-ig:hover svg { fill: #fff; }

/* 3. 블로그 오버 시 (네이버 초록색) */
.f-sns li a.sns-bl:hover { background-color: #03c75a; }
.f-sns li a.sns-bl:hover svg { fill: #fff; }

/* 4. 카카오 채널 오버 시 (카카오 옐로우) */
.f-sns li a.sns-ko:hover { background-color: #FEE500; }
.f-sns li a.sns-ko:hover svg { fill: #3A2929; }

/* 하단: 카피라이트 & 패밀리 사이트 */
.f-bottom {
   display: flex;
   justify-content: space-between;
   align-items: center;
}

.copyright {
   font-family: 'Montserrat', sans-serif;
   font-size: 13px;
   color: #999;
}

.family-site select {
   padding: 8px 15px;
   font-size: 13px;
   color: #555;
   border: 1px solid #ddd;
   border-radius: 4px;
   background-color: #fff;
   outline: none;
   cursor: pointer;
}

/* 모바일 반응형 */
@media screen and (max-width: 768px) {
   .f-menu { gap: 15px; justify-content: center; }
   .f-main { flex-direction: column; gap: 40px; }
   .f-info { text-align: center; }
   
   .f-company-details p {
      font-size: 13px;
      line-height: 1.6;
   }
   
   /* 모바일에서는 구분선 없애고 줄바꿈 처리 */
   .f-company-details span {
      display: block;
      padding-right: 0;
      margin-right: 0;
   }
   .f-company-details span::after { display: none; }
   
   .f-cs { text-align: center; }
   .f-sns { justify-content: center; }
   .f-bottom { flex-direction: column; gap: 20px; text-align: center; }
}

/* -------------------------------------
   고객지원 LNB (서브 탭 메뉴)
------------------------------------- */
.cs-lnb {
   margin-bottom: 40px;
   border-bottom: 1px solid #ddd;
}
.cs-lnb ul {
   display: flex;
   flex-wrap: wrap;
}
.cs-lnb li {
   flex: 1; /* 너비를 균등하게 분할 */
   text-align: center;
}
.cs-lnb li a {
   display: block;
   padding: 18px 10px;
   font-size: 16px;
   font-weight: 500;
   color: #777;
   text-decoration: none;
   border-bottom: 3px solid transparent;
   transition: 0.3s;
}
.cs-lnb li.active a,
.cs-lnb li a:hover {
   color: #111;
   border-bottom-color: #111; /* 활성화 시 검은색 밑줄 */
   font-weight: 700;
}

/* -------------------------------------
   FAQ 카테고리 필터
------------------------------------- */
.faq-category {
   display: flex;
   gap: 10px;
   margin-bottom: 30px;
   flex-wrap: wrap;
}
.cat-btn {
   padding: 10px 25px;
   border: 1px solid #ddd;
   background-color: #fff;
   border-radius: 30px;
   font-size: 15px;
   color: #555;
   cursor: pointer;
   transition: all 0.2s;
   font-family: inherit;
}
.cat-btn.active, 
.cat-btn:hover {
   background-color: #111;
   color: #fff;
   border-color: #111;
}

/* -------------------------------------
   FAQ 아코디언 리스트
------------------------------------- */
.faq-list {
   border-top: 2px solid #111;
}
.faq-item {
   border-bottom: 1px solid #eee;
}
.faq-q {
   display: flex;
   align-items: center;
   padding: 25px 20px;
   cursor: pointer;
   transition: 0.3s;
}
.faq-q:hover {
   background-color: #fafafa;
}
.q-mark {
   font-family: 'Montserrat', sans-serif;
   font-size: 24px;
   font-weight: 700;
   color: #b11623;
   margin-right: 15px;
}
.q-cat {
   font-size: 16px;
   color: #777;
   margin-right: 15px;
   min-width: 80px;
}
.q-txt {
   font-size: 17px;
   color: #111;
   font-weight: 500;
   flex: 1; /* 남은 공간 모두 차지 */
}
.toggle-icon {
   width: 14px;
   height: 14px;
   position: relative;
   margin-left: 20px;
}
.toggle-icon::before, 
.toggle-icon::after {
   content: '';
   position: absolute;
   background-color: #555;
   transition: 0.3s;
}
.toggle-icon::before { top: 6px; left: 0; width: 100%; height: 2px; }
.toggle-icon::after { top: 0; left: 6px; width: 2px; height: 100%; }

/* FAQ 답변 영역 (숨김 처리) */
.faq-a {
   display: none;
   background-color: #f9f9f9;
   padding: 30px 20px;
   border-top: 1px dashed #ddd;
}
.a-inner {
   display: flex;
   align-items: flex-start;
}
.a-mark {
   font-family: 'Montserrat', sans-serif;
   font-size: 24px;
   font-weight: 700;
   color: #777;
   margin-right: 15px;
}
.a-txt {
   font-size: 16px;
   color: #555;
   line-height: 1.6;
   padding-top: 5px;
}

/* 💡 아코디언 활성화(열림) 상태 클래스 */
.faq-item.active .faq-a {
   display: block;
}
.faq-item.active .toggle-icon::after {
   transform: rotate(90deg);
   opacity: 0; /* 열렸을 때 + 모양이 - 모양으로 변함 */
}
.faq-item.active .q-txt {
   color: #b11623;
}

.no-data {
   text-align: center;
   padding: 60px 0;
   color: #777;
   font-size: 16px;
}

/* 모바일 반응형 처리 */
@media screen and (max-width: 768px) {
   .cs-lnb li a { padding: 15px 5px; font-size: 14px; }
   .faq-q { padding: 20px 10px; flex-wrap: wrap; }
   .q-cat { min-width: auto; margin-right: 10px; font-size: 14px; }
   .q-txt { font-size: 15px; width: 100%; margin-top: 5px; }
   .toggle-icon { position: absolute; right: 15px; margin-top: -30px; }
   .faq-a { padding: 20px 10px; }
   .a-txt { font-size: 15px; }
}