@charset "utf-8";
@import url("root.css");

/*root*/

.glossary_page h2 {
	position: relative;
	z-index: 10;
	height: 100px;
	display: grid;
	place-content: center;
}

/* .glossary_page .sub_page_top {
	p {
		padding-bottom: 0 !important;
	}
} */

.glossary_page h2 strong {
	font-size: 2.6rem;
	z-index: 10;
	line-height: 2.6rem;
	position: relative;

}

.glossary_page h2 strong span {
	color: var(--deep-blue);
}

.glossary_page h2::before {
	position: absolute;
	z-index: 5;
	content: "GLOSSARY";
	font-size: 10rem;
	line-height: 10rem;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
	color: #F0F0F0;
	font-family: 'Nunito Sans', sans-serif;
	font-weight: 600;
}

.glossary_page {
	section.glossary {
		padding: 55px 0;

		@media screen and (max-width:820px) {
			padding-top: 30px;
		}

		.glossary_box {
			border-radius: 20px;
			text-align: center;

			ul {
				display: flex;
				justify-content: space-between;
				align-items: flex-start;

				li {
					width: calc(50% - 6px);
					background: white;
					border-radius: 8px;
					/* padding: 35px 55px; */
					text-align: left;
					/* background: #eef9fd; */
					padding: 20px 20px 20px;
					border-radius: 8px;
					box-shadow: 0px 6px 10px rgba(0, 0, 0, .16);
					margin-bottom: 10px;
					transition: all .1s;
					transform: translateZ(0);
					cursor: pointer;

					@media screen and (max-width:820px) {
						width: 100%;
					}

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

						border-radius: 4px;

						padding: 15px;
						margin-bottom: 6px;
					}

					&:hover {
						transform: translateY(3px);
						box-shadow: 0px 3px 6px rgba(0, 0, 0, .06);

					}

					@media screen and (max-width:820px) {
						&:active {
							transform: translateY(3px);
							box-shadow: 0px 3px 6px rgba(0, 0, 0, .06);

						}

						&:hover {
							box-shadow: 0px 6px 10px rgba(0, 0, 0, .16);
							transform: translateZ(0);

						}
					}

					/* &:last-child{
						margin-bottom: 0;
					} */

					h3 {

						font-size: 1.3rem;
						letter-spacing: 0.04em;
						position: relative;
						/* padding-left: 15px; */
						line-height: 2.4rem;

						display: flex;
						align-items: flex-end;
						padding-right: 5%;

						@media screen and (max-width:820px) {
							margin: 0;
							padding: 0;
							padding-right: 8%;

						}

						@media screen and (max-width:480px) {
							font-size: 1rem;
							line-height: 1.6rem;
						}

						small {
							font-weight: 500;
							color: #414141;
						}

						i {
							color: var(--deep-blue);
							font-size: 1.4rem;
							margin-right: 8px;
							padding-top: 0;
							padding-bottom: 3px;
							margin: 0;
							margin-right: 10px;

							@media screen and (max-width:480px) {
								font-size: 1rem;
								margin-right: 5px;
							}
						}

						strong {
							font-size: 125%;
							margin-right: 0.2rem;
							font-weight: 600;
						}

						/* &::before {
							position: absolute;
							content: "";
							width: 5px;
							height: 2.4rem;
							background: var(--deep-blue);
							left: 0;
							top: .2rem;
							margin: auto;
						} */
						&::after {
							font-family: FontAwesome;
							position: absolute;
							content: "\f067";
							right: 0;
							top: 0;
							bottom: 0;
							margin: auto;
							font-weight: 500;
							font-size: 1.4rem;
							text-align: left;
							color: var(--deep-blue);
						}

						&.open {
							&::after {
								position: absolute;
								content: "\f068";
							}

						}
					}

					.text {
						/* padding-left: 36px; */
						margin-top: 20px;
						padding-top: 15px;
						border-top: 2px dotted var(--deep-blue);
						display: none;

						p {
							color: #414141;
							font-size: 1.3rem;
							line-height: 2.7rem;
							letter-spacing: 0.04em;
							font-weight: 500;

							@media screen and (max-width:480px) {
								font-size: 1.1rem;
								line-height: 2.4rem;
							}

							strong {
								font-size: 105%;
							}
						}

					}

				}
			}
		}
	}

}