@import "_mixins";
@import "_variables";

.box-01 {
	.home_slider {
		.swiper-slide {
			height: 840px;
			display: flex;
			align-items: flex-end;
			padding: 160px 0;
			overflow: hidden;

			.slide-bg {
				img {
					position: absolute;
					top: 50%;
					left: 50%;
					transform: translateX(-50%) translateY(-50%);
					min-width: 100%;
					min-height: 100%;
					width: auto;
					max-width: fit-content;
					z-index: 1;
					overflow: hidden;
					filter: brightness(0.7);
				}
			}
			.slide-data {
				position: relative;
				width: 100%;
				z-index: 1;

				h2 {
					color: $cTxtWhite;
					font-size: 45px;
					font-weight: 400;
					text-transform: uppercase;

					strong {
						font-weight: 700;
					}
					span {
						position: relative;
						margin-right: 40px;

						&::before {
							content: "";
							position: absolute;
							top: calc(50% - 4px);
							right: 0;
							width: 30px;
							height: 3px;
							background: $cWhite;
							transform: translate(calc(100% + 8px), -50%);
						}
					}
				}
				ul {
					position: relative;
					margin-bottom: 35px;
					padding: 0;
					list-style: none;
					display: flex;
					flex-direction: row;
					align-items: center;
					column-gap: 35px;
					row-gap: 10px;
					width: fit-content;

					&::before {
						content: "";
						position: absolute;
						right: 0;
						bottom: calc(-30px / 2);
						width: 100vw;
						height: 2px;
						background: $cWhite;
					}

					li {
						position: relative;
						color: $cTxtWhite;
						font-size: 25px;

						&:not(:last-child) {
							&::before {
								content: "";
								position: absolute;
								top: calc(50% - 3px);
								right: 0;
								width: 20px;
								height: 2px;
								background: $cWhite;
								transform: translate(calc(100% + 8px), -50%);
							}
						}
					}
				}
				h3 {
					position: relative;
					color: $cTxtWhite;
					font-size: 25px;
					margin-bottom: 35px;

					&::before {
						content: "";
						position: absolute;
						right: 55%;
						bottom: calc(-30px / 2);
						width: 100vw;
						height: 2px;
						background: $cWhite;
					}
				}
			}

			@include respond-below(sm) {
				height: 700px;
			}
		}
		.swiper-pagination {
			position: absolute;
			right: 50px;
			bottom: 50px;
			width: auto;
			display: flex;
			justify-content: flex-end;
			gap: 30px;

			.swiper-pagination-bullet {
				color: #fff;
				background: transparent !important;
				position: relative;
				display: block;
				height: 30px;
				width: 30px;
				opacity: 1 !important;

				&::before {
					display: block;
					height: 30px;
					width: 30px;
					position: absolute;
					top: 0;
					left: 0;
					font-size: 22px;
				}

				&:first-child::before {
					content: "01";
				}

				&:nth-child(2)::before {
					content: "02";
				}

				&:nth-child(3)::before {
					content: "03";
				}

				&:nth-child(4)::before {
					content: "04";
				}

				&.swiper-pagination-bullet-active {
					margin-right: 70px;
					position: relative;

					&::after {
						content: "";
						display: block;
						height: 1px;
						width: 50px;
						background: #fff;
						position: absolute;
						top: 50%;
						right: -75px;
					}

					&:last-child {
						margin-right: 0 !important;
					}

					&:nth-child(2) {
						margin-left: 70px;
						// margin-right: 4px;

						&::after {
							// display: none;
							right: auto;
							left: -80px;
						}
					}
				}
			}
		}
	}
}

.box-02 {
	padding-top: 60px;
	margin-bottom: 100px;

	.row {
		&.row_1 {
			position: relative;
			padding-bottom: 60px;
			margin-bottom: 60px;

			&::before {
				content: "";
				position: absolute;
				bottom: 0;
				left: 15px;
				right: 15px;
				height: 1px;
				background: $cGray;
			}

			ul {
				padding: 0;
				margin: 0;
				list-style: none;
				display: flex;
				flex-direction: row;
				column-gap: 35px;

				li {
					font-size: 18px;
					font-weight: 300;
					border: 1px solid $cBlack;
					text-align: center;
					padding: 18px;
				}
			}

			@include respond-below(md) {
				ul {
					flex-wrap: wrap;
					row-gap: 35px;

					li {
						flex: 1;
					}
				}
			}
		}
		&.row_2 {
			.col-left {
				text-align: right;

				@include respond-below(md) {
					text-align: left;
				}
			}
			.col-right {
				p {
					font-size: 14px;
					margin-bottom: 20px;
				}

				a {
					position: relative;
					color: $cTxtBlack;
					font-size: 16px;
					font-weight: 400;

					margin-left: auto;
					display: block;
					max-width: fit-content;
					padding-right: 70px;

					&::before {
						content: "";
						position: absolute;
						right: 0;
						top: 50%;
						height: 2px;
						width: 50px;
						background: $cBlack;
						transform: translateY(-50%);
					}

					&::after {
						content: "";
						position: absolute;
						right: 1px;
						top: 50%;
						height: 12px;
						width: 12px;
						border-right: 3px solid $cBlack;
						border-bottom: 3px solid $cBlack;
						transform: translateY(-50%) rotate(-45deg);
					}
				}
			}
		}
	}
}

.box-03 {
	margin-bottom: 150px;

	@include respond-below(sm) {
		margin-bottom: 100px;
	}

	ul {
		list-style: none;
		padding: 20px 0 15px;
		margin: 0;

		li {
			line-height: 1;
			color: $cTxtBlack;
			font-size: 12px;
			font-weight: 700;
			border-bottom: 1px solid $cSandDarker;
			margin-bottom: 3px;
			width: fit-content;

			a {
				color: $cTxtBlack;
			}
		}
	}

	h3 {
		position: relative;
		width: 100%;
		max-width: 150px;
		margin-bottom: 0;

		a {
			position: relative;
			padding-bottom: 30px;

			&::before {
				content: "";
				position: absolute;
				left: 0;
				bottom: 10px;
				height: 2px;
				width: 30px;
				background: $cBlack;
				transform: translateY(-50%);
			}

			&::after {
				content: "";
				position: absolute;
				left: 30px;
				bottom: 0;
				height: 12px;
				width: 12px;
				border-right: 2px solid $cBlack;
				border-bottom: 2px solid $cBlack;
				transform: translate(-100%, -50%) rotate(-45deg);
			}
		}

		a {
			color: $cTxtBlack;
			font-size: 20px;
			font-weight: 400;
		}

		@include respond-below(md) {
			margin: 0 auto;

			a {
				&::before {
					left: 50%;
					transform: translate(-50%, -50%);
				}
				&::after {
					left: 50%;
					transform: translate(10%, -50%) rotate(-45deg);
				}
			}
		}
	}
}

.box-04 {
	margin-bottom: 100px;

	.col-left {
		p {
			font-size: 14px;
			font-weight: 300;
			text-align: right;
			margin-bottom: 0;
			line-height: 2;
		}

		@include respond-below(lg) {
			p {
				br {
					display: none;
				}
			}
		}
		@include respond-below(md) {
			order: 1;

			p {
				text-align: left;
			}
		}
	}
	.col-right {
		position: relative;

		&::before {
			content: "";
			position: absolute;
			left: -45px;
			top: 0;
			bottom: 0;
			width: 2px;
			background: $cBlack;
		}

		h2 {
			position: relative;
			margin-bottom: 0;

			a {
				position: relative;
				padding-bottom: 40px;
				&::before {
					content: "";
					position: absolute;
					left: 0;
					bottom: 10px;
					height: 2px;
					width: 30px;
					background: $cBlack;
					transform: translateY(-50%);
				}

				&::after {
					content: "";
					position: absolute;
					left: 30px;
					bottom: 0;
					height: 12px;
					width: 12px;
					border-right: 2px solid $cBlack;
					border-bottom: 2px solid $cBlack;
					transform: translate(-100%, -50%) rotate(-45deg);
				}
			}
		}

		a {
			color: $cTxtBlack;
		}

		@include respond-below(md) {
			&::before {
				display: none;
			}

			h2 {
				padding-bottom: 0;
				a {
					margin-bottom: 8px;
					&::before {
						display: none;
					}
					&::after {
						display: none;
					}
					br {
						display: none;
					}
				}
			}
		}
	}
}

.box-05 {
	margin-bottom: 150px;

	@include respond-below(sm) {
		margin-bottom: 100px;
	}

	ul {
		padding: 0;
		margin: 0;
		list-style: none;
		display: grid;
		grid-template-columns: 1fr 1fr 1fr;
		grid-template-rows: 290px 290px;
		gap: 40px;
		grid-template-areas:
			"t1 t2 t2"
			"t3 t4 t5";

		li {
			display: flex;
			flex-direction: column;
			justify-content: flex-end;
			padding: 30px;
			position: relative;

			img {
				position: absolute;
				inset: 0;
				height: 100%;
				object-fit: cover;
			}
			h3 {
				position: relative;
				color: $cTxtWhite;
				font-size: 26px;
				font-weight: 700;
				z-index: 1;

				a {
					color: $cTxtWhite;
					font-size: 26px;
				}
			}
			p {
				position: relative;
				color: $cTxtWhite;
				font-size: 16px;
				font-weight: 200;
				margin-bottom: 0;
				z-index: 1;

				a {
					color: $cTxtWhite;
					font-size: 16px;
					font-weight: 200;
				}
			}

			&.tile-1 {
				grid-area: t1;
			}
			&.tile-2 {
				grid-area: t2;
			}
			&.tile-3 {
				grid-area: t3;
			}
			&.tile-4 {
				grid-area: t4;
			}
			&.tile-5 {
				grid-area: t5;
				justify-content: flex-start;
				border: 1px solid $cSandDarker;

				h3 {
					color: $cTxtBlack;
					font-size: 32px;
					font-weight: 500;

					&:last-child {
						font-weight: 300;

						a {
							position: relative;
							padding-bottom: 40px;
							&::before {
								content: "";
								position: absolute;
								left: 5px;
								bottom: 10px;
								height: 2px;
								width: 50px;
								background: $cBlack;
								transform: translateY(-50%);
							}

							&::after {
								content: "";
								position: absolute;
								left: 55px;
								bottom: 0;
								height: 12px;
								width: 12px;
								border-right: 2px solid $cBlack;
								border-bottom: 2px solid $cBlack;
								transform: translate(-100%, -50%) rotate(-45deg);
							}
						}
					}

					a {
						color: $cTxtBlack;
					}
				}
			}
		}

		@include respond-below(md) {
			grid-template-columns: 1fr 1fr;
			grid-template-rows: 290px 290px 290px;
			grid-template-areas:
				"t2 t2"
				"t1 t3"
				"t4 t5";
		}

		@include respond-below(sm) {
			grid-template-columns: 1fr;
			grid-template-rows: 290px 290px 290px 290px 290px;
			grid-template-areas:
				"t1"
				"t2"
				"t3"
				"t4"
				"t5";

			li {
				img {
					max-width: unset !important;
				}
			}
		}
	}
}

.box-06 {
	margin-bottom: 60px;

	.col-left {
		position: relative;

		&::before {
			content: "";
			position: absolute;
			top: 0;
			bottom: 0;
			right: -1px;
			width: 2px;
			background: $cBlack;
		}

		h2 {
			width: 100%;
			max-width: 270px;
			margin-left: auto;
			text-align: right;
		}
		p {
			font-size: 14px;
			font-weight: 300;
			text-align: right;
			max-width: 380px;
			margin-bottom: 0;
			margin-left: auto;
			line-height: 2;
		}

		@include respond-below(md) {
			margin-bottom: 45px;

			&::before {
				display: none;
			}

			h2 {
				max-width: unset;
				text-align: left;
			}
			p {
				max-width: unset;
				text-align: left;
			}
		}
	}
	.col-right {
		ul {
			list-style: none;
			margin: 0;
			padding: 0;
			display: flex;
			flex-direction: row;
			align-items: center;
			flex-wrap: wrap;
			gap: 30px;
		}
	}
}