@charset "UTF-8";

#contents {
	padding-bottom: 25.6rem;

	@media screen and (max-width: 767px) {
		padding-bottom: 6rem;
	}

	#staff-banner {
		width: 100%;
		padding-left: 6.25%;
		box-sizing: border-box;

		@media screen and (max-width: 767px) {
			padding: 0 2rem;
		}

		.flex-banner-contents {
			display: flex;
			gap: 4rem;
			justify-content: space-between;

			.text-contents {
				width: 76rem;

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

				.breadcrumbs {
					margin-top: 4rem;
					margin-bottom: 8rem;

					@media screen and (max-width: 767px) {
						margin-top: 0rem;
						margin-bottom: 1rem;
					}
				}

				.list-category {
					display: flex;
					flex-wrap: wrap;
					gap: 1rem;
					margin-bottom: 1.6rem;

					@media screen and (max-width: 767px) {
						margin-bottom: 1rem;
					}

					& span {
						font-family: var(--zen);
						font-style: normal;
						font-weight: 700;
						font-size: 2rem;
						line-height: 1;
						letter-spacing: 0.1em;
						color: #ffffff;
						padding: 1.9rem 4rem;
						border-radius: 10rem;
						background-color: #e60012;

						@media screen and (max-width: 767px) {
							font-size: 1.4rem;
							padding: 1rem 2rem;
						}
					}
				}

				.list-title {
					font-family: var(--zen);
					font-style: normal;
					font-weight: 700;
					font-size: 4rem;
					line-height: 150%;
					letter-spacing: 0.1em;
					color: #000000;
					margin-bottom: 1.6rem;

					@media screen and (max-width: 767px) {
						margin-bottom: 1rem;
						font-size: 2rem;

						& br {
							/* display: none; */
						}
					}
				}

				.flex-info {
					display: flex;
					gap: 1.6rem;
					margin-bottom: 0.1rem;
					align-items: center;

					@media screen and (max-width: 767px) {
						gap: 1rem;
					}

					.start {
						font-family: var(--zen);
						font-style: normal;
						font-weight: 500;
						font-size: 1.6rem;
						line-height: 150%;
						letter-spacing: 0.05em;
						color: #000000;

						@media screen and (max-width: 767px) {
							font-size: 1.4rem;
						}
					}

					.name {
						font-family: var(--zen);
						font-style: normal;
						font-weight: 700;
						font-size: 1.8rem;
						line-height: 150%;
						letter-spacing: 0.05em;
						color: #000000;

						@media screen and (max-width: 767px) {
							font-size: 1.6rem;
						}
					}
				}

				.department-flex {
					display: flex;
					gap: 0.8rem;
					margin-bottom: 3.2rem;
					align-items: center;

					@media screen and (max-width: 767px) {
						margin-bottom: 1rem;
					}

					& div {
						font-family: var(--zen);
						font-style: normal;
						font-weight: 700;
						font-size: 1.6rem;
						line-height: 150%;
						letter-spacing: 0.05em;
						color: #000000;

						@media screen and (max-width: 767px) {
							font-size: 1.4rem;
						}
					}
				}

				.comment {
					background-color: #f3f5f6;
					border-radius: 0.8rem;
					padding: 2.4rem;
					box-sizing: border-box;
					font-family: var(--zen);
					font-style: normal;
					font-weight: 500;
					font-size: 1.8rem;
					line-height: 160%;
					letter-spacing: 0.1em;
					color: #000000;
					max-width: 63rem;

					@media screen and (max-width: 767px) {
						padding: 2rem;
						font-size: 1.4rem;
					}
				}
			}

			.banner-img {
				width: 100rem;

				@media screen and (max-width: 767px) {
					width: calc(100% + 2rem);
					margin-bottom: 2rem;
				}

				& img {
					width: 100%;
					vertical-align: top;
				}
			}
		}
	}

	#interview {
		padding-top: 13.3rem;
		padding-bottom: 12rem;

		@media screen and (max-width: 767px) {
			padding-top: 6rem;
			padding-bottom: 6rem;
		}

		.block {
			width: 100%;
			margin-bottom: 6.4rem;

			@media screen and (max-width: 767px) {
				margin-bottom: 4rem;
			}

			.flex-contents {
				display: flex;
				gap: 10.4rem;

				@media screen and (max-width: 767px) {
					gap: 1rem;
					flex-direction: column;
				}

				.text-contents {
					flex: 1;
					width: 100%;

					.title {
						font-family: var(--zen);
						font-style: normal;
						font-weight: 700;
						font-size: 2.6rem;
						line-height: 150%;
						letter-spacing: 0.08em;
						color: #e60012;
						margin-bottom: 2.4rem;

						@media screen and (max-width: 767px) {
							font-size: 1.6rem;
							margin-bottom: 1rem;
						}
					}

					.description {
						font-family: var(--zen);
						font-style: normal;
						font-weight: 400;
						font-size: 1.8rem;
						line-height: 180%;
						letter-spacing: 0.1em;
						color: #000000;

						@media screen and (max-width: 767px) {
							font-size: 1.4rem;
						}
					}
				}

				.img-contents {
					width: 60rem;
					border-radius: 0.8rem;
					overflow: hidden;

					@media screen and (max-width: 767px) {
						width: 100%;
						margin-bottom: 1rem;
					}
				}
			}
		}

		.block:last-child {
			margin-bottom: 0;
		}
	}
}

#schedule {
	.gray-box {
		background-color: #f3f5f6;
		padding: 12rem 16rem;
		box-sizing: border-box;
		border-radius: 0.8rem;

		@media screen and (max-width: 767px) {
			padding: 4rem 2rem;
		}

		.schedule-bar {
			& ul {
				display: flex;
				flex-direction: column;

				& li {
					border-left: #cbd0d6 2px solid;
					border-top: #cbd0d6 2px solid;
					position: relative;

					@media screen and (max-width: 767px) {
						border-left: none;
						border-top: none;
						width: 100%;
					}

					&:after {
						content: "";
						position: absolute;
						left: -0.8rem;
						top: -0.8rem;
						width: 1.6rem;
						height: 1.6rem;
						border-radius: 1.6rem;
						border: 0.3rem solid #e60012;
						background-color: #f3f5f6;

						@media screen and (max-width: 767px) {
							display: none;
						}
					}

					.card {
						width: min-content;
						position: relative;
						margin-top: -5rem;
						margin-bottom: 6.6rem;
						border-radius: 2rem;
						background-color: #ffffff;
						padding: 3.2rem;
						box-sizing: border-box;
						min-width: 59.2rem;

						@media screen and (max-width: 767px) {
							min-width: 100%;
							padding: 2rem;
							width: 100%;
							margin-top: 0;
							margin-bottom: 2rem;
						}

						.time-title-flex {
							display: flex;
							gap: 1.6rem;
							align-items: baseline;
							margin-bottom: 1.6rem;

							@media screen and (max-width: 767px) {
								gap: 1rem;
								margin-bottom: 1rem;
								flex-direction: column;
							}

							.schedule-hours {
								font-family: var(--overpass);
								font-style: normal;
								font-weight: 700;
								font-size: 2.2rem;
								line-height: 2.8rem;
								color: #e60012;
								white-space: nowrap;

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

							.schedule-title {
								font-family: var(--zen);
								font-style: normal;
								font-weight: 700;
								font-size: 2.2rem;
								line-height: 3.2rem;
								letter-spacing: 0.05em;
								color: #000000;
								white-space: nowrap;

								@media screen and (max-width: 767px) {
									font-size: 1.6rem;
									line-height: 1.5;
									white-space: wrap;
								}
							}
						}

						.description-img-flex {
							display: flex;
							gap: 1.6rem;

							@media screen and (max-width: 767px) {
								flex-direction: column-reverse;
								gap: 1rem;
							}

							.description-cont {
								width: 100%;
								flex: 1;
								font-family: var(--zen);
								font-style: normal;
								font-weight: 400;
								font-size: 1.6rem;
								line-height: 160%;
								letter-spacing: 0.1em;
								color: #000000;

								@media screen and (max-width: 767px) {
									font-size: 1.4rem;
								}
							}

							.img-cont {
								width: 23.2rem;
								border-radius: 0.8rem;
								overflow: hidden;

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

								& img {
									width: 100%;
									vertical-align: top;
								}
							}
						}
					}
				}

				& li:nth-child(odd) {
					/* background-color: #ffffff; */
					padding-left: 7rem;
					width: fit-content;

					@media screen and (max-width: 767px) {
						padding-left: 0;
					}
				}

				& li:nth-child(even) {
					width: 100%;
					padding-left: 7rem;
					display: flex;
					justify-content: flex-end;

					@media screen and (max-width: 767px) {
						padding-left: 0;
					}

					.card {
						align-self: flex-end;
					}
				}

				& li:last-child {
					border-left: none;
					@media screen and (max-width:767px){
						width: 100%;
					}
				}
			}
		}
	}
}

#private {
	padding-top: 12rem;

	@media screen and (max-width: 767px) {
		padding-top: 6rem;
	}

	.gray-container {
		background-color: #f3f5f6;
		padding: 6.4rem 14.4rem;
		box-sizing: border-box;
		border-radius: 2rem;
		margin-bottom: 7.2rem;

		@media screen and (max-width: 767px) {
			padding: 4rem 2rem;
			margin-bottom: 4rem;
		}

		.slide-contents-flex {
			width: 100%;
			display: flex;
			gap: 4.8rem;

			@media screen and (max-width: 767px) {
				gap: 5rem;
				flex-direction: column;
			}

			.slide-img {
				width: 42rem;
				height: 42rem;
				overflow: hidden;
				border-radius: 2rem;
				position: relative;
				flex-shrink: 0;

				@media screen and (max-width: 767px) {
					width: 100%;
					height: auto;
					aspect-ratio: 1 / 1;
				}

				.private-slider {
					width: 100%;
					height: 100%;

					.slide {
						width: 100%;
						height: 42rem;

						@media screen and (max-width: 767px) {
							height: auto;
							aspect-ratio: 1 / 1;
						}
					}
				}

				& img {
					width: 100%;
					height: 100%;
					object-fit: cover;

					@media screen and (max-width: 767px) {
						height: auto;
						object-fit: cover;
					}
				}
			}

			.text-cont {
				width: 100%;
				flex: 1;

				.slide-title {
					font-family: var(--zen);
					font-style: normal;
					font-weight: 700;
					font-size: 2.4rem;
					line-height: 3.5rem;
					letter-spacing: 0.07em;
					color: #e60012;
					margin-bottom: 1.6rem;

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

				.slide-description {
					font-family: var(--zen);
					font-style: normal;
					font-weight: 400;
					font-size: 1.8rem;
					line-height: 3.5rem;
					letter-spacing: 0.07em;
					color: #000000;

					@media screen and (max-width: 767px) {
						font-size: 1.4rem;
						line-height: 1.65;
					}
				}
			}
		}
	}

	/* Slider Navigation Controls */
	.private-slider-controls {
		position: absolute;
		bottom: 2rem;
		left: 50%;
		transform: translateX(-50%);
		display: flex;
		align-items: center;
		gap: 2.4rem;
		z-index: 5;

		@media screen and (max-width: 767px) {
			bottom: 1.5rem;
			gap: 1.6rem;
		}

		/* Arrow styling */
		.slick-arrow {
			position: relative !important;
			left: auto !important;
			right: auto !important;
			margin: 0 !important;
			width: 4rem;
			height: 4rem;
			border: none;
			cursor: pointer;
			transition: opacity 0.3s ease-in-out;
			font-size: 0;
			flex-shrink: 0;
			background: url("../../img/archive/staff/button-icon.png") no-repeat center / contain;

			@media screen and (max-width: 767px) {
				width: 3rem;
				height: 3rem;
			}

			&:hover {
				opacity: 0.7;
			}
		}

		.slick-prev {
			transform: scaleX(-1);
			order: 1;
			top: auto;
			margin-top: 0;
		}

		.slick-next {
			order: 3;
			transform: none;
			top: auto;
			margin-top: 0;
		}

		/* Dots styling */
		.slick-dots {
			order: 2;
			position: relative;
			display: flex !important;
			align-items: center;
			gap: 1.6rem;
			list-style: none;
			margin: 0;
			padding: 0;
			bottom: auto;
			left: auto;

			@media screen and (max-width: 767px) {
				gap: 1.2rem;
			}

			li {
				margin: 0;
				padding: 0;

				button {
					width: 1.6rem;
					height: 1.6rem;
					border-radius: 50%;
					background: #b9c3d2;
					border: 0.1rem solid #fff;
					cursor: pointer;
					font-size: 0;
					padding: 0;
					transition: all 0.3s ease-in-out;

					@media screen and (max-width: 767px) {
						width: 1.2rem;
						height: 1.2rem;
					}

					&:hover {
						background: #e60012;
						border-color: #e60012;
					}
				}

				&.slick-active button {
					background: #e60012;
					border-color: #e60012;
				}
			}
		}

		.slick-dots li button::before {
			content: none;
		}

		.slick-dots li {
			width: 1.6rem;
			height: 1.6rem;
		}
	}

	.slick-dotted.slick-slider {
		margin-bottom: 0;
	}

	.slick-prev:before {
		content: "";
	}

	.article-navigate {
		display: flex;
		justify-content: space-between;

		@media screen and (max-width: 767px) {
			flex-direction: column;
			gap: 1rem;

			.common-btn {
				width: fit-content;
				padding-left: 1.4rem;
				padding-right: 1.4rem;
				@media screen and (max-width:767px){
				width: 100%;
				}
			}
		}

		.nav-btns-flex {
			display: flex;
			gap: 3.2rem;

			@media screen and (max-width: 767px) {
				gap: 1rem;
				justify-content: space-between;
			}
		}
	}
}