/*
+----------------------------------------------------------------------+
| Copyright (c) 2010 - 2025 SPEAKINGMAX @ WEAVERSBRAIN.Co.Ltd
+----------------------------------------------------------------------+
| 작업일 : 2025-02-28
| 파일설명 : 맥스 AI 사이트 고객센터 페이지 CSS
+----------------------------------------------------------------------+
| 작업자 : 최진영 
+----------------------------------------------------------------------+
| 수정이력
|
+----------------------------------------------------------------------+ 
*/

@charset "utf-8";

/* ====================================================================================
	MOBILE
==================================================================================== */

/* 페이지 레이아웃 */
.faqWrap {
	margin-top:var(--header-height);
	padding:20px 20px 50px;
}
.faqWrap .section.pageDesc {
	word-break: keep-all;
}
.faqWrap .section.contents .article {
	margin-top:40px;
}
.faqWrap .section.contents .articleTitle {
	margin-bottom: 10px;
	color: #555;
}

/* FAQ */
.faqWrap .section.contents .searchForm .formUIBox .formUI.btn {
	padding-right:70px;
}
.faqWrap .section.contents .searchForm .button.search {
	display: inline-block;
	position:absolute;
	top:5px;
	right:10px;
	width: auto;
	height:auto;
	padding: 2px 10px;
	border-radius:8px;
}
.faqWrap .section.contents .tabBtnBox {
	width: 100%;
	margin-top:10px;
}
.faqWrap .section.contents .tabBtnBox .tabBtn {
	display:inline-block;
	position:relative;
	margin-top:10px;
	margin-right:10px;
	padding:5px 10px;
	color:#000;
	border:1px solid #f1f1f1;
	border-radius:30px;
}
.faqWrap .section.contents .tabBtnBox .tabBtn.on {
	color:#fff;
	background:#c362ff;
	border-color:#c362ff;
}
.faqWrap .section.contents .faqList {
	margin-top:20px;
}
.faqWrap .section.contents .faqList .listItem {
	padding:20px;
	margin-bottom:20px;
	background:#fff;
	border-radius: 12px;
	border:1px solid #e7e7e7;
	cursor:pointer;
}
.faqWrap .section.contents .faqList .listItem:last-child {
	margin-bottom:0;
}
.faqWrap .section.contents .faqList .listItem .title {
	color:#555;
	word-break: keep-all;
}
.faqWrap .section.contents .faqList .listItem .title .gubun {
	display: none;
}
.faqWrap .section.contents .faqList .listItem .title .textBox {
	display:flex;
	justify-content: space-between;
	align-items: center;
}
.faqWrap .section.contents .faqList .listItem .title .textBox .text {
	display:block;
}
.faqWrap .section.contents .faqList .listItem .title .textBox .toggleIcon {
	display:inline-block;
	position:relative;
	width:24px;
	height:24px;
	background:transparent url('/assets/images/common/icon/icon_arrow_down_black.png') no-repeat 0 0/100%;
}
.faqWrap .section.contents .faqList .listItem.on .title .toggleIcon {
	background-image:url('/assets/images/common/icon/icon_arrow_down_purple.png');
}
.faqWrap .section.contents .faqList .listItem .contents {
	display:none;
	margin-top:20px;
	padding-top:20px;
	color:#555;
	word-break: keep-all;
	border-top:1px solid #e7e7e7;
}
.faqWrap .section.contents .faqList .listItem .contents * {
	/*
		contents 내부의 내용이 백오피스의 웹 에디터로 가공되어 넘어오기 때문에
		웹 에디터의 인라인 태그 스타일보다 우선적으로 적용하기 위해 important 사용
	*/
	font-family: 'Pretendard-Regular' !important;
	font-size: 16px !important;
	vertical-align: top;
}
.faqWrap .section.contents .faqList .listItem .contents img {
	max-width:100%;
}
.faqWrap .section.contents .faqList .listItem.on .title .textBox .text {
	color:#833ecf;
}
.faqWrap .section.contents .faqList .listItem.noData {
	padding:50px 20px;
	text-align: center;
	cursor:default;
}

/* 고객센터 */
.faqWrap .section.contents .counsel .box {
	display:flex;
	justify-content: space-between;
	align-items: center;
	height:100px;
	margin-bottom:20px;
}
.faqWrap .section.contents .counsel .box .iconImg {
	width:60px;
}
.faqWrap .section.contents .counsel .box .textBox {
	width:calc(100% - 80px);
}
.faqWrap .section.contents .counsel .box .textBox .title {
	color:#424242;
}
.faqWrap .section.contents .counsel .box .textBox .sub {
	color:#616161
}


/* ====================================================================================
	TABLET
==================================================================================== */
@media only screen and (min-width : 768px) {

}


/* ====================================================================================
	PC
==================================================================================== */
@media only screen and (min-width : 1024px) {

	.faqWrap {
		width:1000px;
		margin:130px auto;
	}
	.faqWrap .section.contents .article.counsel {
		display:grid;
		grid-template-columns: 1fr 1fr;
	}
	.faqWrap .section.contents .article.counsel .articleTitle {
		grid-column: 1 / 3;
	}
	.faqWrap .section.contents .faqList .listItem .title {
		display:flex;
		justify-content: space-between;
		align-items: center;
	}
	.faqWrap .section.contents .faqList .listItem .title .gubun {
		display: inline-block;
		width:110px;
		padding:4px 0;
		text-align: center;
		border:1px solid #e7e7e7;
		border-radius: 30px;
	}
	.faqWrap .section.contents .faqList .listItem .title .textBox {
		margin-top:0;
		width:calc(100% - 120px);
	}
	.faqWrap .section.contents .faqList .listItem .contents {
		padding-left:120px;
	}
	.faqWrap .section.contents .faqList .listItem.noData {
		padding:100px 20px;
	}
	
	.faqWrap .section.contents .counsel .box {
		margin-bottom: 0;
	}
	.faqWrap .section.contents .counsel .box .textBox {
		width:calc(100% - 100px);
	}
	.faqWrap .section.contents .counsel .box.kakao .iconImg {
		cursor: pointer;
	}

}