/*
+----------------------------------------------------------------------+
| Copyright (c) 2010-2026 STUDYMAX. co. Ltd
+----------------------------------------------------------------------+
| 작업일 : 2021-01-20
| 파일설명 : 맥스 기능성페이지 개선 - 고객센터 CSS
+----------------------------------------------------------------------+
| 작업자 : 최진영
| 20250922 고객센터 FAQ 검색영역 레이아웃 사이즈 변경 by 김경훈
| 20250929 FAQ 카테고리 추가로 인한 탭 버튼 사이즈 변경 by 김경훈
| 20260519 자주 묻는 질문 TOP 3 카드 영역 + 섹션 디자인 추가 by 심헌
+----------------------------------------------------------------------+
*/

/* RNB 메뉴 */
.rnbWrap {top: 411px; margin-left: 580px;}

/* 페이지 타이틀 */
.titleBox {padding:0 0 24px 12px; box-sizing:border-box; border-bottom:2px solid #000;}
.titleText {font-size:32px; font-family:'NotoSansKR-Bold'; color:#010101; line-height:1;}

/* 섹션 공통 (자주 묻는 질문 TOP 3 / 검색으로 빨리 찾기) */
.sectionTitle {margin-top:36px; margin-bottom:16px; font-size:24px; font-family:'NotoSansKR-Bold'; color:#2a2a2a; line-height:1.2;}

/* 자주 묻는 질문 TOP 3 카드 */
.top3Section {margin-top:8px;}
.top3List {margin:0; padding:0; list-style:none; display:flex; gap:18px;}
.top3Item {flex:1 1 0; min-width:0; min-height:240px; padding:28px 30px; box-sizing:border-box; border:1px solid #e5e5e5; border-radius:16px; background:#fff; cursor:pointer; display:flex; flex-direction:column; transition:box-shadow .15s;}
.top3Item:hover {box-shadow:0 4px 12px rgba(0,0,0,.08);}
.top3Category {font-size:24px; font-family:'NotoSansKR-Bold'; color:#333; line-height:1.2;}
.top3QuestText {margin-top:12px; font-size:20px; font-family:'NotoSansKR-Regular'; color:#555; line-height:1.45; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;}
.top3Bottom {margin-top:auto; display:flex; justify-content:space-between; align-items:flex-end;}
.top3GoBtn {display:inline-flex; align-items:center; gap:4px; font-size:16px; font-family:'NotoSansKR-Regular'; color:#1a1a1a;}
.top3GoText {font-family:inherit;}
.top3GoArrow {font-family:inherit;}
.top3Icon {display:inline-flex; align-items:flex-end;}
.top3Icon img {max-width:60px; max-height:60px; object-fit:contain;}

/* 검색으로 빨리 찾기 */
.searchSection {margin-top:8px; padding-bottom:33px; border-bottom:1px solid #ccc;}
.searchArea {margin:0;}
.selectField {font-size:0;}
.select {display:inline-block; width:189px; height:58px !important; padding:0 14px; box-sizing:border-box; border:1px solid #999; font-size:16px; vertical-align:middle;}
.searchInput {display:inline-block; width:746px; height:58px; margin-left:8px; padding:0 18px; box-sizing:border-box; border:1px solid #999; font-size:16px; vertical-align:middle;}
.searchBtn {display:inline-block; width:149px; height:58px; margin-left:8px; color:#fff; font-size:16px; font-family:'NotoSansKR-Bold'; background:#292929; cursor:pointer; border:none; padding:0; vertical-align:middle;}
/* 이전 안내 박스 흔적 정리 (현 마크업에선 사용 안 함, 안전을 위한 reset) */
.searchBox {padding:0; border:0; border-radius:0; background:none;}
.searchBoxText {display:none;}

.infoBox {width:22%; padding:18px 29px; box-sizing:border-box; border:1px solid #e4e4e4; border-radius:3px;}
.infoBoxLine_1 .text {margin-left:5px; font-size:24px; font-family:'NotoSansKR-Medium'; line-height:1.2;}
.infoBoxLine_2 {margin:11px 0; font-size:24px; font-family:'NotoSansKR-Bold'; color:#e70a24;}
.infoBoxLine_3 {font-size:18px; font-family:'NotoSansKR-Regular';}
.infoBoxLine_4 {font-size:16px; font-family:'NotoSansKR-Regular'; color:#999;}

/* 탭 버튼 영역 */
.tabBtnBox {margin-top:44px; font-size:0;}
.tabBtn {display:inline-block; width:calc(100% / 9); padding:22px 0; box-sizing:border-box;font-size:16px; font-family:'NotoSansKR-Medium'; color:#999; background:#f5f5f5; border:1px solid #ccc; border-left:0; border-bottom:2px solid #000; text-align:center; cursor:pointer;}
.tabBtn.on {color:#000; background:#fff; border:2px solid #000; border-bottom-color:#fff;}
.tabBtn:first-child {border-left:1px solid #ccc;}
.tabBtn:first-child.on {border-left:2px solid #000;}
.tabBtn.bdRight_0 {border-right:0;}

/* 탭 컨텐츠 영역 */
.faqListBox {display:none;}
.faqListBox.on {display:block;}
.questArea {padding:27px 0; box-sizing:border-box; font-size:0; border-bottom:1px solid #acacac; cursor:pointer;}
.questArea .category {display:inline-block; width:calc(100% / 6); padding:0 17px; box-sizing:border-box; text-align:center;}
.questArea .category .icon {display:inline-block; width:100%; padding:10px 0; box-sizing:border-box; font-size:16px; font-family:'NotoSansKR-Regular'; color:#999; border:1px solid #ccc; border-radius:30px;}
.questArea .questText {display:inline-block; width:calc((100% / 6)*5); padding-left:15px; box-sizing:border-box; font-size:18px; font-family:'NotoSansKR-Regular'; background:url('/smciImages/front/customer/faq/ico_arrow_down.png') no-repeat 98% 55%/12px 7px;}
.faqListItem.on .questText {color:#e70a24; background-image:url('/smciImages/front/customer/faq/ico_arrow_up.png');}
.faqListItem.noData {padding:27px 0; box-sizing:border-box; font-size:18px; font-family:'NotoSansKR-Regular'; text-align:center;}
.answerArea {display:none; padding:33px 50px; box-sizing:border-box; background:#f9f9f9; font-size:18px; font-family:'NotoSansKR-Regular'; line-height:1.8; border-bottom:1px solid #acacac;}
.answerArea * {font-size:18px; font-family:'NotoSansKR-Regular'; line-height:1.8;}