.qna {
	margin-bottom: 30vh;
}

/* 카테고리 탭 */

/* 탭 전체 스타일 */
.tabs {
	padding-bottom: 40px;
	width: 100%;
}

/* 탭 스타일 */
.tab_item {
	width: 9%;
	height: 5vh;
	font-size: 1.3vw;
	background-color: #fff;
	text-align: center;
	color: #333333;
	display: flex;
	float: left;
	font-weight: bold;
	transition: all 0.2s ease;
	border-radius: 30px;
    justify-content: center;
    align-items: center;
    box-shadow: 5px 5px 5px #9e9e9e90;
	cursor: pointer;
	display: flex;
	margin-right: 2%;
	margin-bottom: 5vh;
}

.tab_item:hover {
	width: 11%;
}

/* 라디오 버튼 UI삭제*/
input[name="tab_item"] {
	display: none;
}

/* 탭 컨텐츠 스타일 */
.tab_content {
	display: none;
	clear: both;
	overflow: hidden;
}


/* 선택 된 탭 콘텐츠를 표시 */
#all:checked~#all_content,
#act:checked~#act_content,
#apply:checked~#apply_content {
	display: block;
}

/* 선택된 탭 스타일 */
.tabs input:checked+.tab_item {
	background-color: #FF7710;
	color: #fff;
	box-shadow: 5px 5px 5px #ff781094;
}


/* 질문, 답변 */

.collapsible {
	cursor: pointer;
	width: 100%;
	text-align: left;
	display: grid;
	grid-template-columns: 10% 80% 10%;
	grid-template-rows: 1fr;
	justify-items: center;
	align-items: center;
	padding: 1% 0 1% 0;
	border: none;/*버튼이라 그런지? 이걸 하지 않으면 테두리 생김*/
	background-color: #f6f6f6;/*이걸 하지 않으면 내용 때문에 배경 회색으로 채워짐*/
}

.qna_Q {
	font-family: 'Montserrat', sans-serif;
	grid-column: 1;
	/*border: solid 1px black;*/
	width: 50%;
	font-size: 3vw;
	text-align: left;
	color: #FF7710;
	font-weight: 600;
	opacity: 0.5;
}

.qna_question {
	grid-column: 2;
	text-align: left;
	/* border: solid 1px blue; */
	width: 100%;
	font-size: 1.3vw;
	font-weight: 550;
}

.active_Q {
	grid-column: 3;
}


/* 내용 숨김 "+" */
.collapsible:after {
	content: '\002B';
	float: right;
	margin-left: 5px;
	color: #b3b3b3;
	font-size: 2vw;
}

/* 내용 드러남 "-" */
.active_Q:after {
	content: "\2212";
	color: #000000;
}

.content {
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.2s ease-out;
	background-color: #f1f1f1;
	display: flex;
	justify-content: center;
	align-items: center;
	border-bottom: solid 1.5px rgb(219, 219, 219);
}

.content p {
	width: 90%;
	margin: 10% 0% 10% 0%;
	line-height: 150%;
	font-size: 1vw;
	color: #5a5a5a;
}

.qna_sns {
	width: 100%;
	color: #FF7710;
	font-size: 1.2vw;
	text-align: center;
}

.qna a {
	text-decoration-line: underline;
	font-weight: 600;
	color: #FF7710;
}

@media (max-width: 1200px) {

	/* 탭 스타일 */
	.tab_item {
		width: 20%;
		height: 5vh;
		font-size: 2vw;
	}

	.tab_item:hover {
		width: 25%;
	}

	/* 질문, 답변 */

	.collapsible {
		padding: 2% 0 2% 0;
	}

	.qna_Q {
		width: 100%;
		font-size: 5vw;
	}

	.qna_question {
		font-size: 2vw;
		font-weight: 600;
	}

	/* 내용 숨김 "+" */
	.collapsible:after {
		content: '\002B';
		float: right;
		margin-left: 5px;
		color: rgb(179, 179, 179);
		font-size: 3vw;
	}

	/* 내용 드러남 "-" */
	.active_Q:after {
		content: "\2212";
		color: rgb(0, 0, 0);
	}

	.content p {
		margin: 20% 0% 20% 0%;
		font-size: 1.7vw;
	}

	.qna_sns {
		font-size: 1.8vw;
	}
}

@media (max-width: 600px) {

	/* 탭 스타일 */
	.tab_item {
		width: 25%;
		height: 5vh;
		font-size: 4vw;
	}

	.tab_item:hover {
		width: 30%;
	}

	.collapsible {
		grid-template-columns: 15% 70% 15%;
		padding: 5% 0 5% 0;
	}

	.qna_Q {
		width: 100%;
		font-size: 10vw;
	}

	.qna_question {
		font-size: 5vw;
		font-weight: 600;
	}

	/* 내용 숨김 "+" */
	.collapsible:after {
		font-size: 7vw;
		width: 100%;
		text-align: center;
	}
	
	.content p {
		width: 90%;
		margin: 60% 0% 60% 0%;
		line-height: 150%;
		font-size: 4vw;
		color: #5a5a5a;
	}

	.qna_sns {
		font-size: 5vw;
		line-height: 150%;
	}
}