/* ----------------------------------------
	faq.html
-------------------------------------------*/

.faq .sec{
	padding-bottom: 16%;
}
.faq #contents .con__in h3.tit{
	margin-bottom: 10%;
}
.toggle{
	display: none;
}
.qa-item{
	position: relative;
	margin-bottom: 2%;
	border-radius: 12px;
	background-color: #fff;
}
.question,
.answer{
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	transform: translateZ(0);
	transition: all 0.3s;
	text-align: justify;
	font-size: 16px;
}
.question{
	display: flex;
	width: 100%;
	margin: 0;
	padding: 4%;
	padding-right: 88px;
}
.question:hover{
	color: var(--green);
}
.question .title-icon,
.answer .title-icon{
	width: 60px;
}
.question .title-icon{
	background: url(../img/shops/ic_q.jpg) left top / 36px auto no-repeat;
}
.answer .title-icon{
	background: url(../img/shops/ic_a.jpg) left top / 36px auto no-repeat;
}
.question-text,
.answer-text{
	display: block;
	width: calc(100% - 60px);
}
.question-text,
.answer-text .strong{
	font-weight: bold;
}
.question::after,
.question::before{
	content: "";
	position: absolute;
	right: 48px;
	top: 40%;
	width: 2px;
	height: 30px;
	background-color: var(--font-black);
	transition: all 0.3s;
}
.question::after{
	transform: rotate(90deg);
}
.answer{
	display: flex;
	width: 100%;
	max-height: 0;
	overflow: hidden;
	padding: 0 10% 0 4%;
}
.answer-text{
	margin-bottom: 4%;
}
.toggle:checked + .question + .answer{
	max-height: 800px;
	transition: all 1.5s;
}
.toggle:checked + .question::before{
	transform: rotate(90deg) !important;
}

@media screen and (max-width: 650px){

	.faq #contents .con__in h3.tit{
		margin-bottom: 12%;
	}
	.qa-item{
		margin-bottom: 4%;
		border-radius: 8px;
	}
	.question,
	.answer{
		font-size: 13px;
	}
	.question{
		padding: 6% 4%;
		padding-right: 60px;
	}
	.question .title-icon,
	.answer .title-icon{
		width: 48px;
		background-size: 32px auto;
	}
	.question-text,
	.answer-text{
		width: calc(100% - 48px);
	}
	.question::after,
	.question::before{
		right: 32px;
		height: 20px;
	}
	.answer-text{
		margin-bottom: 6%;
	}
}