.how-key-vertical {

}

.how-key-vertical .wrapper-content {
	display: flex;
	/* grid-template-columns: calc(40% - clamp(2rem, -6.819rem + 14.2241vw, 10.25rem)) auto; */
	grid-template-columns: unset;
	padding-top: 0;
	padding-bottom: 0;
	column-gap: unset;
	/* padding-bottom: 24px; */
	padding-left: 12%;
}

.how-key-vertical .wrapper-content .left-block-content {
	/*max-width: calc(clamp(21.875rem, -10.3276rem + 51.9397vw, 52rem) - clamp(2rem, -6.819rem + 14.2241vw, 10.25rem));*/
}

/*.how-key-vertical .wrapper-content .left-block-content .left-block-content-wrapper {*/
/*	max-width: 536px;*/
/*}*/

.how-key-vertical .wrapper-content .left-block-content .left-block-content-wrapper h2 {
	color: var(--wp--preset--color--black);
	font-size: 32px;
	line-height: 48px;
	font-weight: var(--wp--custom--typography--font-weight--600);
	margin-bottom: 24px;
	padding-bottom: 0;
	max-width: 396px;
}

.how-key-vertical.key-vertical-b-page .wrapper-content .left-block-content .left-block-content-wrapper h2 {
	font-size: 64px;
	line-height: 80px;
	max-width: 560px;
}
.how-key-vertical.key-vertical-b-page .wrapper-content .left-block-content .left-block-content-wrapper {
	max-width: 560px;
}

.how-key-vertical .wrapper-content .left-block-content .left-block-content-wrapper p {
	font-family: var(--wp--preset--font-family--paragraph);
	font-style: normal;
	font-weight: var(--wp--custom--typography--font-weight--400);
	font-size: var(--wp--preset--font-size--body-large);
	line-height: var(--wp--custom--typography--line-height--body-large);
	letter-spacing: 0.02em;
	color: rgba(0, 0, 0, 0.81);
	max-width: 396px;
}

.how-key-vertical .wrapper-content .container-accordion {
	margin: 0 auto;
	background-color: inherit;
}

.how-key-vertical .wrapper-content .container-accordion .my-accordion:not(:last-child) .my-accordion-item {
	border-bottom: 2px solid rgba(0, 0, 0, 0.08);
}

.how-key-vertical .wrapper-content .container-accordion .my-accordion .my-accordion-item .my-accordion-content {
	display: flex;
	align-items: flex-start;
	opacity: 0;
	max-height: 0;
	overflow: hidden;
	gap: 64px;
}

.how-key-vertical .wrapper-content .container-accordion .my-accordion .my-accordion-item .my-accordion-content p {
	width: 100%;
	margin-right: 101px;
	margin-bottom: 0;
	color: #000000cf;
}

.how-key-vertical .wrapper-content .container-accordion .my-accordion .my-accordion-item .my-accordion-content .percent-wrap {
	/* margin-top: -20px; */
	display: flex;
	flex-direction: column;
	font-weight: var(--wp--custom--typography--font-weight--700);
	position: relative;
	letter-spacing: 0.02em;
	/* min-width: 150px; */
	/*font-weight: var(--wp--custom--typography--font-weight--700);*/
}
.how-key-vertical .wrapper-content .container-accordion .my-accordion .my-accordion-item .my-accordion-content .percent-wrap > div {
	margin-bottom: 5px;
	color: #00829B;
}

.how-key-vertical .wrapper-content .container-accordion .my-accordion .my-accordion-item .my-accordion-content .percent-wrap .percent {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 30px;
}
.how-key-vertical .wrapper-content .container-accordion .my-accordion .my-accordion-item .my-accordion-content .percent-wrap .percent-content{
	font-size: 18px;
}

.how-key-vertical .wrapper-content .container-accordion .my-accordion .my-accordion-item .my-accordion-content .percent-wrap .percent .percent-icon {
	font-size: 36px;
	line-height: 63px;
}

.how-key-vertical .wrapper-content .container-accordion .my-accordion .my-accordion-item button {
	font-family: var(--wp--preset--font-family--heading);
	position: relative;
	display: flex;
	text-align: left;
	justify-content: space-between;
	width: 100%;
	color: #000000;
	font-size: var(--wp--preset--font-size--heading-3);
	font-weight: var(--wp--custom--typography--font-weight--600);
	line-height: clamp(2.0625rem, 0.0582rem + 3.2328vw, 3.9375rem);
	border: none;
	background: none;
	outline: none;
	padding: 0;
	align-items: center;
}

.how-key-vertical .wrapper-content .container-accordion .my-accordion .my-accordion-item {
	padding: 24px 0;
}

.how-key-vertical .wrapper-content .container-accordion .my-accordion:first-child .my-accordion-item {
	padding-top: 0;
}

.how-key-vertical .wrapper-content .container-accordion .my-accordion:last-child .my-accordion-item {
	padding-bottom: 0;
}

.how-key-vertical .wrapper-content .container-accordion .my-accordion .my-accordion-item button:hover,
.how-key-vertical .wrapper-content .container-accordion .my-accordion .my-accordion-item button:focus {
	cursor: pointer;
}

.how-key-vertical .wrapper-content .container-accordion .my-accordion .my-accordion-item button:hover::after,
.how-key-vertical .wrapper-content .container-accordion .my-accordion .my-accordion-item button:focus::after {
	cursor: pointer;
}

.how-key-vertical .wrapper-content .container-accordion .my-accordion .my-accordion-item button .number-title {
	height: 18px;
	line-height: 130%;
	font-weight: 600;
	display: inline-block;
	font-size: 14px;
	text-align: left;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	width: 30px;
}

.how-key-vertical .wrapper-content .container-accordion .my-accordion .my-accordion-item button .accordion-title {
	/*padding: 1em 1.5em 1em 0;*/
	font-family: var(--wp--preset--font-family--heading);
	font-weight: var(--wp--custom--typography--font-weight--750);
	font-size: 24px;
	max-width: unset;
	letter-spacing: 0.01em;
	line-height: 31.2px;
}
.how-key-vertical .wrapper-content .container-accordion .my-accordion .my-accordion-item button.collapsed .accordion-title {
	color: rgba(37, 37, 37, 1);
}

.how-key-vertical .wrapper-content .container-accordion .my-accordion .my-accordion-item button .icon {
	display: inline-block;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	right: 10px;
	width: 30px;
	height: 30px;
}

.how-key-vertical .wrapper-content .container-accordion .my-accordion .my-accordion-item button .icon::before {
	content: "";
	position: absolute;
	display: block;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 30px;
	height: 5.33px;
	background: #000000;
	border-radius:50px;
}

.how-key-vertical .wrapper-content .container-accordion .my-accordion .my-accordion-item button .icon::after {
	display: block;
	position: absolute;
	content: "";
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 5.33px;
	height: 30px;
	background: #000000;
	border-radius:50px;
}

.how-key-vertical .wrapper-content .container-accordion .my-accordion .my-accordion-item button.collapsed .icon::after {
	width: 0;
}

.how-key-vertical .wrapper-content .container-accordion .my-accordion .my-accordion-item button.collapsed+.my-accordion-content {
	opacity: 1;
	min-height: 180px;
	max-height: unset;
	padding-top: 35.5px;
	padding-bottom: 35.5px;
	padding-left: 0;
}

.how-key-vertical .wrapper-content .container-accordion .my-accordion .my-accordion-item button.collapsed+.my-accordion-content p {
	font-weight: 400;
	font-size: 20px;
	line-height: 35px;
	letter-spacing: 0.02em;
	color: rgba(0, 0, 0, 0.81);
	margin-right: 0;
	width: 80%;
}

.how-key-vertical .wrapper-content .container-accordion .my-accordion .my-accordion-item button {
	color: rgba(0, 0, 0, 0.47);
}

.how-key-vertical .wrapper-content .container-accordion .my-accordion .my-accordion-item button .icon::before {
	background-color: rgba(0, 0, 0, 0.47);
}

.how-key-vertical .wrapper-content .container-accordion .my-accordion .my-accordion-item button .icon::after {
	background-color: rgba(0, 0, 0, 0.47);
}

.how-key-vertical .wrapper-content .container-accordion .my-accordion .my-accordion-item button+.my-accordion-content {
	color: #bbbbbb;
}


/* @media only screen and (min-width: 1200px) and (max-width: 1500px) {
	.how-key-vertical .wrapper-content .container-accordion .my-accordion .my-accordion-item button .number-title {

	}
	.how-key-vertical .wrapper-content .container-accordion .my-accordion .my-accordion-item button .accordion-title {
		font-size: 30px;
		font-weight: var(--wp--custom--typography--font-weight--600);
		max-width: 500px;
	}
	.how-key-vertical .wrapper-content .container-accordion .my-accordion .my-accordion-item button .number-title {
		width: 80px;
	}
	.how-key-vertical .wrapper-content .container-accordion .my-accordion .my-accordion-item button[aria-expanded="true"] + .my-accordion-content {
		padding-left: 0;
	}
} */

/* @media only screen and (min-width: 993px) and (max-width: 1199px) {
	.how-key-vertical.key-vertical-b-page .wrapper-content .left-block-content .left-block-content-wrapper h2 {
		font-size: 36px;
		line-height: 54px;
		color: #000000;
	}
	.how-key-vertical.key-vertical-b-page .wrapper-content .left-block-content .left-block-content-wrapper {
		max-width: 400px;
	}
	.how-key-vertical .wrapper-content .container-accordion .my-accordion .my-accordion-item button .number-title {

	}
	.how-key-vertical .wrapper-content .container-accordion .my-accordion .my-accordion-item button .accordion-title {
		font-size: 22px;
		font-weight: var(--wp--custom--typography--font-weight--600);
		max-width: 500px;
	}
	.how-key-vertical .wrapper-content .container-accordion .my-accordion .my-accordion-item button .number-title {
		width: 80px;
	}
	.how-key-vertical .wrapper-content .container-accordion .my-accordion .my-accordion-item button[aria-expanded="true"] + .my-accordion-content {
		padding-left: 82px;
	}
} */

@media (max-width: 992px) {
	.how-key-vertical.key-vertical-b-page .wrapper-content .left-block-content .left-block-content-wrapper h2 {
		font-size: 36px;
		line-height: 54px;
		color: #000000;
	}
	.how-key-vertical .wrapper-content .left-block-content {
		max-width: 100%;
	}
	.how-key-vertical .wrapper-content .container-accordion .my-accordion .my-accordion-item button .number-title {
		width: 49px;
	}
	.how-key-vertical .wrapper-content .container-accordion .my-accordion .my-accordion-item button[aria-expanded="true"] + .my-accordion-content {
		padding-left: 0;
	}
	.how-key-vertical .wrapper-content .left-block-content .left-block-content-wrapper {
		max-width: 100%;
	}
	.how-key-vertical .wrapper-content {
		grid-template-columns: auto;
		padding-top: 0;
		padding-bottom: 24px;
		max-width: 100% !important;
		padding-left: unset;
	}

	.how-key-vertical.page-vertical-b .wrapper-content {
		padding-top: 0;
	}

	.how-key-vertical .wrapper-content .left-block-content .left-block-content-wrapper h2 {
		max-width: 100%;
		color: var(--wp--preset--color--black);
		font-size: 22px;
		line-height: 33px;
		font-weight: var(--wp--custom--typography--font-weight--600);
		margin-bottom: 16px;
	}

	.how-key-vertical .wrapper-content .left-block-content .left-block-content-wrapper p {
		font-family: var(--wp--preset--font-family--paragraph);
		font-style: normal;
		font-weight: var(--wp--custom--typography--font-weight--400);
		font-size: var(--wp--preset--font-size--body-large);
		line-height: var(--wp--custom--typography--line-height--body-large);
		letter-spacing: 0.02em;
		color: rgba(0, 0, 0, 0.81);
		max-width: 100%;
		white-space: pre-wrap;
		margin: 0;
	}

	.how-key-vertical .wrapper-content .container-accordion {
		margin: 0 auto;
		background-color: inherit;
		padding-top: 24px;
		/* max-width: 80vw; */
	}

	.how-key-vertical .wrapper-content .container-accordion .my-accordion .my-accordion-item {
		padding-top: 24px;
		padding-bottom: 24px;
	}

	.how-key-vertical .wrapper-content .container-accordion .my-accordion:not(:last-child) .my-accordion-item {
		border-bottom: 2px solid rgba(0, 0, 0, 0.08);
	}

	.how-key-vertical .wrapper-content .container-accordion .my-accordion .my-accordion-item .my-accordion-content {
		flex-wrap: wrap;
	}

	.how-key-vertical .wrapper-content .container-accordion .my-accordion .my-accordion-item .my-accordion-content p {
		/* max-width: 70vw; */
		width: 100% !important;
		line-height: 35px;
	}
	.how-key-vertical .wrapper-content .container-accordion .my-accordion .my-accordion-item .my-accordion-content {
		overflow: auto;
	}

	.how-key-vertical .wrapper-content .container-accordion .my-accordion .my-accordion-item .my-accordion-content .percent-wrap .percent {
		justify-content: flex-start;
	}

	.how-key-vertical .wrapper-content .container-accordion .my-accordion .my-accordion-item .my-accordion-content .percent-wrap {
		/* line-height: 80px; */
		margin-top: 0;
		/* padding-left: clamp(3rem, -3.7478rem + 10.8836vw, 9.3125rem); */
		row-gap: 11px;
	}

	.how-key-vertical .wrapper-content .container-accordion .my-accordion .my-accordion-item .my-accordion-content .percent-wrap .percent {
		font-size: 30px;
		/* line-height: 80px; */
		font-weight: var(--wp--custom--typography--font-weight--600);
	}

	.how-key-vertical .wrapper-content .container-accordion .my-accordion .my-accordion-item button.collapsed+.my-accordion-content p {
		padding-bottom: 12px;
	}

	.how-key-vertical .wrapper-content .container-accordion .my-accordion .my-accordion-item .my-accordion-content .percent-wrap .percent .percent-icon {
		font-size: 32px;
		letter-spacing: -0.02em;
		position: relative;
		top: -2px;
		font-weight: 400;
		align-self: end;
	}

	.how-key-vertical .wrapper-content .container-accordion .my-accordion .my-accordion-item button {
		position: relative;
		display: flex;
		align-items: center;
		width: 100%;
		color: #000000;
		border: none;
		background: none;
		padding: 0;
	}

	.how-key-vertical .wrapper-content .container-accordion .my-accordion .my-accordion-item button:hover,
	.how-key-vertical .wrapper-content .container-accordion .my-accordion .my-accordion-item button:focus {
		cursor: pointer;
	}

	.how-key-vertical .wrapper-content .container-accordion .my-accordion .my-accordion-item button:hover::after,
	.how-key-vertical .wrapper-content .container-accordion .my-accordion .my-accordion-item button:focus::after {
		cursor: pointer;
	}

	.how-key-vertical .wrapper-content .container-accordion .my-accordion .my-accordion-item button .number-title {
		font-family: var(--wp--preset--font-family--paragraph);
		font-size: 16px;
		font-weight: var(--wp--custom--typography--font-weight--500);
		font-style: normal;
		line-height: 16px;
		letter-spacing: 0.04em;
		display: flex;
		align-items: center;
		justify-content: flex-start;
	}

	.how-key-vertical .wrapper-content .container-accordion .my-accordion .my-accordion-item button .accordion-title {
		line-height: 33px;
		display: inline-block;
		font-size: 22px;
		font-weight: var(--wp--custom--typography--font-weight--600);
		width: 100%;
		padding-right: 32px;
	}

	.how-key-vertical .wrapper-content .container-accordion .my-accordion .my-accordion-item button .icon {
		display: inline-block;
		position: absolute;
		right: 0;
		width: 32px;
		height: 32px;
	}

	.how-key-vertical .wrapper-content .container-accordion .my-accordion .my-accordion-item button .icon::before {
		width: 24px;
		height: 2px;
	}

	.how-key-vertical .wrapper-content .container-accordion .my-accordion .my-accordion-item button .icon::after {
		width: 2px;
		height: 24px;
	}

	.how-key-vertical .wrapper-content .container-accordion .my-accordion .my-accordion-item button.collapsed .icon::after {
		width: 0;
	}

	.how-key-vertical .wrapper-content .container-accordion .my-accordion .my-accordion-item button.collapsed+.my-accordion-content {
		opacity: 1;
		flex-direction: column;
		min-height: 240px;
		justify-content: space-between;
		padding-top: 12px;
		padding-bottom: 0;
		gap: 0;
	}

	.how-key-vertical .wrapper-content .container-accordion .my-accordion .my-accordion-item .my-accordion-content .percent-wrap .percent {
		text-align: left;
		letter-spacing: -0.02em;
	}

	.how-key-vertical .wrapper-content .container-accordion .my-accordion .my-accordion-item .my-accordion-content .percent-wrap .percent-content {
		text-align: left;
		margin-top: 0;
	}

	.how-key-vertical .wrapper-content .container-accordion .my-accordion .my-accordion-item button {
		color: rgba(0, 0, 0, 0.47);
	}

	.how-key-vertical .wrapper-content .container-accordion .my-accordion .my-accordion-item button+.my-accordion-content {
		color: rgba(0, 0, 0, 0.47);
	}
}



/*@media (max-width: 767px) {*/
/*	.how-key-vertical .wrapper-content .container-accordion .my-accordion .my-accordion-item button .accordion-title {*/
/*		padding-left: 0;*/
/*	}*/
/*	.how-key-vertical .wrapper-content .container-accordion .my-accordion .my-accordion-item .my-accordion-content p {*/
/*		padding-left: 60px;*/
/*	}*/
/*	.how-key-vertical .wrapper-content .container-accordion .my-accordion .my-accordion-item .my-accordion-content .percent-wrap {*/
/*		padding-left: 55px;*/
/*	}*/
/*}*/
/*@media (max-width: 375px) {*/
/*	.how-key-vertical .wrapper-content .container-accordion .my-accordion .my-accordion-item button .accordion-title {*/
/*		padding-left: 0;*/
/*	}*/
/*	.how-key-vertical .wrapper-content .container-accordion .my-accordion .my-accordion-item .my-accordion-content p {*/
/*		padding-left: 60px;*/
/*	}*/
/*	.how-key-vertical .wrapper-content .container-accordion .my-accordion .my-accordion-item .my-accordion-content .percent-wrap {*/
/*		padding-left: 55px;*/
/*	}*/
/*}*/