#content {
  max-width: 820px;
}


.faq_nav{
	display: flex;
	justify-content: space-between;
	margin-bottom: 90px;
}

.faq_nav li{
	width: 30%;
}

.faq_nav li a{
	display: block;
	border-radius: 8px;
	background: #F6FBFB;
	color: #2163D9;
	position: relative;
}

.faq_nav li a img{
	max-width: 246px;
	width: 100%;
}


.faq_inner{
	margin-bottom: 60px;
}


.faq_inner .inner_title{
	font-size: 2.4rem;
	font-weight: 500;
	display: block;
	position: relative;
	padding-bottom: 12px;
	margin-bottom: 40px;
	color: #333;
}

.faq_inner .inner_title::before,
.faq_inner .inner_title::after{
	content: "";
	position: absolute;
	left: 0;
  	bottom: 0;
  	height: 2px;
}

.faq_inner .inner_title::before{
	width: 156px;
	background:#2163D9;
	z-index: 2;
}

.faq_inner .inner_title::after{
	width: 100%;
	background:#EFEFEF;
	z-index: 1;
}

.faq_inner button,
.faq_inner .answer_box{
	display: flex;
	gap: 12px;
	align-items: center;
}

.faq_inner .inner_box{
	padding-bottom: 30px;
	margin-bottom: 30px;
	border-bottom: 1px solid #EFEFEF;
}

.faq_inner button{
	width: 95%;
	color: #111;
	position: relative;
	font-size: 1.8rem;
	line-height: 1.6;
}


.faq_inner button::after{
	content: "";
	position: absolute;
	margin: auto;
	width: 24px;
	height: 24px;
	background: url("../img/faq/plus_icon.svg") no-repeat;
	right: -40px;
}

.faq_inner button.open::after{
	background: url("../img/faq/open_icon.svg") no-repeat;
}


.faq_inner .answer_box{
	display: none;
	margin-top: 30px;
	line-height: 1.6;
}


.faq_inner button span,
.faq_inner .answer_box span {
  display: flex;
  width: 32px;
  height: 32px;
  padding: 4px 8px;
  text-align: center;
  border-radius: 48px;
  justify-content: center;
  font-family: "Raleway", sans-serif;
  font-weight: 500;
}

.faq_inner button span{
  color: #fff;	
  background: var(--green, #2163D9);
  border: 1px solid #2163D9;
  line-height: 1.2;
}

.faq_inner .answer_box span{
  color: #2163D9;
  background: var(--green, #fff);
  border: 1px solid #2163D9;
  line-height: 1.4;
}

/* Media Queries ================================================== */
/*896*/
@media screen and (max-width: 896px) {

	.faq_nav{
		flex-wrap: wrap;
		gap: 18px;
		margin-bottom: 70px;
	}

	.faq_inner .inner_title{
		font-size: 1.8rem;
		margin-bottom: 25px;
	}

	.faq_inner button::after{
		right: -35px;
	}


	.faq_inner .inner_title::before{
		width: 60px;
	}

	.faq_inner button{
		font-size: 1.6rem;
		width: 90%;
		text-align: left;
	}


	.faq_inner button,
	.faq_inner .answer_box{
		gap: 8px;
	}


	.faq_inner button span,
	.faq_inner .answer_box span {
	  display: flex;
	  width: 30px;
	  height: 30px;
	  padding: 0 8px;
	  line-height: 1.5;
	  align-items: center;
	  border-radius: 1000px;
	  box-sizing: border-box;
	}

}


@media screen and (max-width: 560px) {
	.faq_nav li{
		width: calc(100% / 2 - 18px);
	}
}