@import url(style_set.less);

// 인트로
.sec_intro {
	.content {
		background-image: url(../img/sub/company/bg.png);
	}
}

.content:not(:first-child) {
	padding: 0;
}

// 회사소개
.sec_1 {
	.bg {
		width: 100%;
		height: 40rem;
		border-radius: @round_2;
		background-image: url(../img/sub/company/company_bg.png);
		background-attachment: fixed;
		background-repeat: no-repeat;
		background-size: cover;
		background-position: center;
		@media @web {
			height: 35rem;
		}
		@media @laptop {
			height: 30rem;
		}
		@media @tab {
			height: 20rem;
		}
		@media @mobile_l {
			height: 15rem;
		}
	}
	.desc {
		margin-bottom: 0;
		margin-top: 5.2rem;
		@media @tab {
			br {
				display: none;
			}
		}
	}
}

// 연혁
.sec_2 {
	.divide {
		background-image: url(../img/sub/company/history_bg.png);
		@media @laptop {
			margin-bottom: 0;
		}
	}
	.cont_1 {
		overflow: visible;
	}
	.layout {
		display: flex;
		justify-content: space-between;
		.history_tit {
			width: 50%;
			height: max-content;
			flex: 0 0 auto;
			position: sticky;
			top: 14rem;
			left: 0;
			.wrap {
				width: 100%;
				height: 100%;
				display: flex;
				gap: 2rem;
				.img_box {
					width: 8rem;
					height: 8rem;
					border-radius: 50px;
					display: flex;
					align-items: center;
					justify-content: center;
					margin-top: 1rem;
					gap: 3rem;
					flex: 0 0 auto;
					img {
						max-width: 60%;
						max-height: 60%;
					}
				}
			}
		}
		.history_item {
			flex: 1 1 auto;
			position: relative;
			margin-left: 8rem;
			.desc {
				display: flex;
				flex-direction: column;
				gap: 8rem;
				.item {
					position: relative;
					&:before {
						content: "";
						background-color: @color_white;
						width: 3.2rem;
						height: 3.2rem;
						position: absolute;
						top: 0;
						left: -1.6rem;
						border-radius: 50%;
					}
					&:after {
						content: "";
						width: 1.6rem;
						height: 1.6rem;
						position: absolute;
						top: 0.8rem;
						left: -0.8rem;
						border-radius: 50%;
						border: 5px solid @color_main;
						box-sizing: border-box;
					}
					.inner {
						margin-left: 3rem;
						display: flex;
						flex-direction: column;
						gap: 1.6rem;
						overflow: hidden;
						.month {
							display: flex;
							flex-direction: column;
							gap: 1rem;
							ul {
								display: flex;
								.hd {
									width: 8rem;
									flex: 0 0 auto;
								}
								.txt {
									flex: 1 1 100%;
									color: @color_sub_txt;
									display: flex;
									flex-direction: column;
									gap: 1.6rem;
								}
							}
						}
					}
				}
				&:before {
					position: absolute;
					top: 0;
					left: 0;
					width: 1px;
					height: 100%;
					background-color: @color_lightgray;
					content: "";
				}
			}
		}
		@media @web {
			.history_item {
				margin-left: 5rem;
			}
		}
		@media @laptop {
			flex-direction: column;
			.history_tit {
				width: 100%;
				top: 0;
				z-index: 1;
				padding-top: 6.2rem;
				background-color: @color_white;
				border-bottom: 1px dotted @color_lightgray;
				height: auto;
				.wrap {
					padding: 3rem 0;
					align-items: center;
				}
			}
			.history_item {
				margin-top: 10rem;
				margin-left: 5rem;
			}
		}
		@media @mobile_l {
			.history_tit {
				padding-top: 4.2rem;
				.wrap {
					padding: 2rem 0;
					align-items: flex-start;
					gap: 1rem;
					.img_box {
						width: 5rem;
						height: 5rem;
					}
				}
			}
			.history_item {
				margin-top: 5rem;
				margin-left: 2rem;
				.desc {
					gap: 4rem;
				}
			}
		}
	}
	.layout_1 .img_box {
		border: 5px solid #1a8be9;
		background-color: @color_main;
	}
	.layout_2 {
		margin-top: 14rem;
		.img_box {
			border: 5px solid @color_black;
			background-color: @color_black;
		}
		@media @tab {
			margin-top: 10rem;
		}
		@media @mobile_l {
			margin-top: 6rem;
		}
	}
	@media @laptop {
		.sec_tit {
			margin-bottom: 0;
		}
	}
}

// 조직도
.sec_3 {
	.divide {
		background-image: url(../img/sub/company/org_bg.png);
		text-align: center;
	}
	.layout {
		display: flex;
		flex-direction: column;
		gap: 2rem;
		.item {
			width: 100%;
			img{
				max-width: 100%;
			}
		}
	}
	.item {
		text-align: center;
		.depth {
			&:not(.bot .depth) {
				height: 6.2rem;
				display: flex;
				align-items: center;
				justify-content: center;
				border-radius: @round_3;
				position: relative;
			}
			&:before {
				content: "";
				position: absolute;
				top: -6px;
				left: 50%;
				transform: translateX(-50%);
				width: 12px;
				height: 12px;
				border-radius: 50%;
				border: 3px solid @color_white;
				box-sizing: border-box;
				background-color: @color_main;
			}
			&:after {
				position: absolute;
				content: "";
				background-color: @color_black;
				z-index: -1;
			}
		}
		.top {
			width: 30rem;
			margin: auto;
			box-shadow: 0 0 0 5px rgba(252, 58, 0, 0.5);
			&:after {
				width: 1px;
				background-color: @color_black;
				top: 100%;
				height: 5.2rem;
			}
			&:before {
				display: none;
			}
		}
		.mid {
			margin: 0 auto;
			margin-top: 10rem;
			display: flex;
			justify-content: center;
			.group {
				display: flex;
				position: relative;
				margin: 0 auto;
				gap: 9rem;
				&:nth-child(1) {
					&:before {
						position: absolute;
						content: "";
						background-color: @color_black;
						width: calc(100% - 25rem);
						height: 1px;
						top: -5rem;
						left: 50%;
						transform: translateX(-50%);
					}
				}
				.depth {
					width: 25rem;
					position: relative;
					background-color: @color_white;
					&:after {
						width: 1px;
						height: 11rem;
						bottom: 0;
					}
				}
			}
		}
	}
	.item_1 {
		padding: 1rem 0;
		margin-bottom: 5rem;
		.top {
			background-color: @color_main;
			color: @color_white;
		}
		.mid {
			.group {
				.depth {
					border: 2px solid @color_main;
				}
			}
		}
	}
	.item_2 {
		padding: 5rem 0;
		background-color: @color_bg;
		border-radius: @round_2;
		position: relative;
		z-index: -1;
		.top {
			background-color: @color_white;
			border: 2px solid @color_main;
		}
		.mid {
			flex-direction: column;
			gap: 3rem;
			.fake {
				opacity: 0;
			}
			.group {
				.depth {
					border: 2px solid @color_black;
					&:nth-child(2)::after {
						display: none;
					}
				}
				.connection::after {
					height: 18rem;
					top: -5rem;
				}
			}
		}
		.bot {
			display: flex;
			gap: 6rem;
			justify-content: center;
			margin: auto;
			margin-top: 14rem;
			position: relative;
			width: max-content;
			.depth {
				width: 24rem;
				height: 15rem;
				background-color: @color_white;
				border: 2px solid @color_gray;
				border-radius: @round_3;
				padding: 3rem;
				display: flex;
				flex-direction: column;
				gap: 1.6rem;
				position: relative;
				&:after {
					width: 1px;
					height: 22rem;
					left: 50%;
					transform: translateX(-50%);
					bottom: 0;
				}
			}
			&:before {
				width: calc(100% - 24rem);
				height: 1px;
				background-color: @color_black;
				content: "";
				position: absolute;
				top: -7.2rem;
			}
		}
	}
	@media @web {
		.item .mid .group {
			gap: 4rem;
		}
		.item_2 .bot {
			gap: 3rem;
		}
	}
	@media @laptop {
		.item_2 {
			.bot {
				.depth {
					width: 18rem;
					height: auto;
					&:after {
						height: 24rem;
					}
				}
				&:before {
					width: calc(100% - 18rem);
				}
			}
		}
	}
	@media @tab {
		.item {
			.depth:not(.top, .connection):after {
				display: none;
			}
			.top:after {
				height: 6rem;
			}
			.mid {
				margin-top: 6rem;
				.group {
					flex-direction: column;
					&:nth-child(1):before {
						display: none;
					}
					.depth {
						width: 30rem;
					}
				}
			}
		}
		.item_2 {
			.mid {
				.group .connection::after {
					height: 12rem;
					top: 0;
				}
				.fake {
					display: none !important;
				}
			}
			.bot {
				flex-direction: column;
				margin-top: 6rem;
				.depth {
					width: 30rem;
				}
				&:before {
					display: none;
				}
			}
		}
	}
	@media @mobile_l {
		.item {
			.depth:not(.bot .depth) {
				height: 5.2rem !important;
				width: 90%;
				margin: 0 auto;
			}
			.mid .group {
				width: 100%;
				gap: 2rem;
			}
		}
		.item_2 .bot {
			gap: 2rem;
			.depth {
				padding: 2rem;
				gap: 1rem;
			}
		}
	}
}

// 인정서
.sec_4 {
	.layout {
		display: flex;
		gap: 2rem;
		.item {
			width: 100%;
			border-radius: @round_1;
			background-color: @color_bg;
			padding: 5rem;
			display: flex;
			flex-direction: column;
			align-items: center;
			img {
				width: 60%;
				margin: auto;
				box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
			}
			p {
				margin-top: 2.4rem;
				text-align: center;
			}
			@media @web {
				img {
					max-width: 80%;
				}
			}
			@media @laptop {
				padding: 3rem;
			}
		}
		@media @tab_s {
			flex-direction: column;
		}
		@media @mobile_l {
			.item {
				padding: 2rem;
				img {
					max-width: 96%;
				}
			}
		}
	}
}