@charset "UTF-8";

.page-banner {
	&:after {
		content: "";
		position: absolute;
		top: 50%;
		right: 0;
		transform: translateY(-50%);
		width: 100rem;
		height: 60rem;
		background: url("../../img/page/our_work/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;
		}
	}
}

.page_container {
	padding-top: 19.2rem;
	padding-bottom: 25.6rem;
	@media screen and (max-width: 767px) {
		padding-top: 6rem;
		padding-bottom: 6rem;
	}
	.main-text {
		font-family: var(--zen);
		font-style: normal;
		font-weight: 500;
		font-size: 2.4rem;
		line-height: 180%;
		letter-spacing: 0.15em;
		color: #000000;
		margin-bottom: 8rem;
		@media screen and (max-width: 767px) {
			font-size: 1.6rem;
			margin-bottom: 4rem;
		}
	}
	.main-contents {
		display: flex;
		flex-direction: column;
		gap: 3.2rem;
		@media screen and (max-width: 767px) {
			gap: 3rem;
		}
		.gray-box {
			background-color: #f3f5f6;
			border-radius: 2rem;
			width: 100%;
			padding: 4.8rem;
			box-sizing: border-box;
			@media screen and (max-width: 767px) {
				padding: 2rem;
			}
			.red-dash-common-title {
				margin-bottom: 1.6rem;
				font-family: var(--zen);
				font-style: normal;
				font-weight: 500;
				font-size: 2.6rem;
				line-height: 1;
				letter-spacing: 0.08em;
				color: #000000;
				flex: none;
				order: 1;
				flex-grow: 0;
				padding-left: 3.2rem;
				position: relative;
				@media screen and (max-width: 767px) {
					font-size: 1.8rem;
					padding-left: 2.2rem;
				}
				&:before {
					content: "";
					position: absolute;
					left: 0;
					top: 1.2rem;
					width: 2.2rem;
					height: 4px;
					border-radius: 4.9px;
					background-color: #e60012;
					@media screen and (max-width: 767px) {
						width: 1.2rem;
						height: 3px;
						top: 0.8rem;
					}
				}
			}
			.flex-contents {
				display: flex;
				gap: 3.2rem;
				@media screen and (max-width: 767px) {
					flex-direction: column;
					gap: 1rem;
				}
				.gray-box-img {
					width: 63.2rem;
					border-radius: 1.2rem;
					overflow: hidden;
					@media screen and (max-width: 767px) {
						width: 100%;
					}
					& img {
						width: 100%;
						overflow: hidden;
					}
				}
			}
			.text-contents {
				width: 100%;
				flex: 1;
				.paragraph1 {
					margin-bottom: 2.4rem;
					font-family: var(--zen);
					font-style: normal;
					font-weight: 500;
					font-size: 1.8rem;
					line-height: 180%;
					letter-spacing: 0.1em;
					color: #000000;
					flex: none;
					order: 0;
					flex-grow: 0;
					@media screen and (max-width: 767px) {
						margin-bottom: 1rem;
						font-size: 1.4rem;
					}
				}
				.red-text {
					font-family: var(--zen);
					font-style: normal;
					font-weight: 700;
					font-size: 2rem;
					line-height: 150%;
					letter-spacing: 0.08em;
					color: #e60012;
					flex: none;
					order: 0;
					flex-grow: 0;
					margin-bottom: 1.6rem;
					@media screen and (max-width: 767px) {
						font-size: 1.6rem;
						margin-bottom: 1rem;
					}
				}
				.paragraph2 {
					font-family: var(--zen);
					font-style: normal;
					font-weight: 400;
					font-size: 1.8rem;
					line-height: 180%;
					letter-spacing: 0.1em;
					color: #000000;
					flex: none;
					order: 1;
					flex-grow: 0;
					margin-bottom: 2.4rem;
					@media screen and (max-width: 767px) {
						font-size: 1.4rem;
						margin-bottom: 1rem;
					}
				}
			}
		}
	}
}

.common-btn {
	border: #e60012 0.2rem solid;

	&:hover {
		border: #e60012 0.2rem solid;
	}
}