@charset "UTF-8";

.page-banner {
	&:after {
		content: "";
		position: absolute;
		top: 50%;
		right: 0;
		transform: translateY(-50%);
		width: 100rem;
		height: 60rem;
		background: url("../../img/page/employee_benefits/banner-img.png") no-repeat center left / contain;
		@media screen and (max-width: 767px) {
			width: 35.7rem;
			height: 21.4rem;
			top: unset;
			transform: unset;
			bottom: 0;
		}
	}
}

#data {
	padding-top: 20rem;
	padding-bottom: 20rem;
	display: flex;
	flex-direction: column;
	gap: 12rem;
	@media screen and (max-width: 767px) {
		padding-top: 6rem;
		padding-bottom: 6rem;
		gap: 6rem;
	}
	.gray-container {
		background-color: #f3f5f6;
		width: 100%;
		padding: 16rem;
		box-sizing: border-box;
		border-radius: 5rem;
		@media screen and (max-width: 767px) {
			padding: 4rem 2rem;
			border-radius: 2rem;
		}
		.flex-data {
			display: flex;
			flex-wrap: wrap;
			gap: 3.2rem;
			@media screen and (max-width: 1080px) {
				gap: 3rem;
			}
			@media screen and (max-width: 767px) {
				gap: 2rem;
			}
			& li {
				display: flex;
				flex-direction: column;
				align-items: center;
				.title {
					margin-bottom: 0.8rem;
					font-family: var(--zen);
					font-style: normal;
					font-weight: 700;
					font-size: 2.4rem;
					line-height: 150%;
					text-align: center;
					letter-spacing: 0.08em;
					color: #e60012;
					width: 100%;
					@media screen and (max-width: 767px) {
						font-size: 1.6rem;
					}
				}
				.img-container {
					width: 16.8rem;
					margin-bottom: 0.8rem;
					@media screen and (max-width: 767px) {
						width: 12.8rem;
					}
					& img {
						width: 100%;
						vertical-align: top;
					}
				}
				& p {
					font-family: var(--zen);
					font-style: normal;
					font-weight: 400;
					font-size: 1.6rem;
					line-height: 160%;
					letter-spacing: 0.05em;
					color: #000000;
					width: 100%;
					text-align: left;
					@media screen and (max-width: 767px) {
						font-size: 1.4rem;
					}
				}
			}
			.half {
				max-width: 66.4rem;
				width: 48.8%;
				background-color: #fff;
				border-radius: 1rem;
				padding: 2.4rem 3.2rem;
				box-sizing: border-box;
				@media screen and (max-width: 1080px) {
					width: 48.5%;
				}
				@media screen and (max-width: 767px) {
					width: 100%;
					padding: 2.4rem 2rem;
				}
			}
			.third {
				max-width: 43.2rem;
				width: 31.7%;
				background-color: #fff;
				border-radius: 1rem;
				padding: 2.4rem 3.2rem;
				box-sizing: border-box;
				@media screen and (max-width: 1080px) {
					width: 31.5%;
				}
				@media screen and (max-width: 767px) {
					width: 100%;
					padding: 2.4rem 2rem;
				}
			}
		}
	}
}