@charset "utf-8";


.bodyWrap {
	position: relative;
	width: calc(100% - 80px);
	margin: 110px auto 40px;
	background: #fff;
	border-radius: 8px;
	padding-bottom:80px;
}

	.bodyWrap .bodyTitle {
		display: block;
		text-align: center;
		margin-top: 86px;
		padding: 30px 0 30px;
	}

		.bodyWrap .bodyTitle strong {
			display: block;
			text-align: center;
			font-family: "Noto Sans KR";
			font-size: 60px;
			font-weight: bold;
			/* letter-spacing: -0.025em; */
			color: #222;
			text-transform: uppercase;
		}


.ceo {
	margin-bottom: 40px;
}

	.ceo .conwrap {
		display: flex;
		margin: 0 auto;
		width: 1300px;
	}

		.ceo .conwrap > div {
			width: 50%;
		}

		.ceo .conwrap .text_wrap {
			background: #fff;
			border-radius: 8px;
			text-align: center;
			padding: 120px 3%;
		}

			.ceo .conwrap .text_wrap * {
				letter-spacing: -0.025em;
			}

			.ceo .conwrap .text_wrap strong {
				display: block;
				font-size: 56px;
				font-weight: 100;
				color: #000;
				line-height: 1.2;
			}

				.ceo .conwrap .text_wrap strong:after {
					content: "";
					display: block;
					width: 60px;
					height: 1px;
					background: #333;
					margin: 34px auto 31px;
				}

			.ceo .conwrap .text_wrap p {
				font-size: 17px;
				font-weight: 300;
				line-height: 1.7;
				color: #555;
			}

				.ceo .conwrap .text_wrap p b {
					font-weight: 500;
					color: #333;
				}

				.ceo .conwrap .text_wrap p.ceo {
					margin-top: 54px;
				}

					.ceo .conwrap .text_wrap p.ceo img {
						margin-left: 8px;
					}



		.ceo .conwrap .img_wrap {
			display: flex;
			justify-content: center;
			align-items: center;
			text-align: center;
		}

			.ceo .conwrap .img_wrap img {
				max-width: 95%;
				max-height: 95%;
				object-fit: contain;
				opacity: 0;
				filter: blur(15px);
			}


.ceo.in-view .conwrap .img_wrap img {
	opacity: 1;
	filter: blur(0px);
	transition: 1.2s 0.1s;
}

.ceo .conwrap .text_wrap strong,
.ceo .conwrap .text_wrap .p_wrap {
	opacity: 0;
	transform: translateY(30px);
}

	.ceo.in-view .conwrap .text_wrap strong, .ceo.in-view .conwrap .text_wrap .p_wrap {
		opacity: 1;
		transform: translateY(0);
		transition: 0.7s 0.7s;
	}


.history {
	width: 94%;
	max-width: 1400px;
	margin: 0 auto;
}


.history .history_g {
	margin-top: 100px;
}

.history .history_item {
	position: relative;
	display: flex;
	justify-content: space-between;
	padding-bottom: 186px;
}

	.history .history_item:before {
		content: "";
		position: absolute;
		top: 0;
		left: 50%;
		width: 1px;
		height: 100%;
		background: #ccc;
	}

	.history .history_item > div {
		width: calc(50% - 65px);
	}

	.history .history_item .img_g {
		margin-top: 10px;
	}

	.history .history_item:not(:nth-child(4)) .img_g > div {
		border-radius: 8px;
		overflow: hidden;
	}

	.history .history_item .img_g img {
		position: relative;
		width: 100%;
	}

	.history .history_item .year_g {
		position: relative;
		font-family: "Montserrat";
		font-size: 56px;
		font-weight: 600;
		letter-spacing: -0.025em;
		line-height: 1.2;
		color: #000;
	}

		.history .history_item .year_g:before {
			content: "";
			position: absolute;
			top: 50%;
			width: 9px;
			height: 9px;
			margin-top: -4px;
			background: #447e58;
		}

	.history .history_item .history_l {
		padding: 52px 0 0;
	}

		.history .history_item .history_l li {
			display: flex;
		}

			.history .history_item .history_l li * {
				letter-spacing: -0.025em;
			}

			.history .history_item .history_l li span.year {
				display: block;
				width: 70px;
				font-family: "Montserrat";
				font-size: 18px;
				font-weight: 600;
				line-height: 2.6;
				color: #000;
			}

			.history .history_item .history_l li p {
				width: calc(100% - 70px);
				font-size: 17px;
				line-height: 2.6;
				padding-left: 5%;
				word-break: keep-all;
				color: #555;
			}

	.history .history_item:first-child {
		padding-top: 0px;
	}

	.history .history_item:last-child {
		padding-bottom: 50px;
	}

	.history .history_item:nth-child(even) .img_g {
		order: 2;
	}

	.history .history_item:nth-child(even) .text_g {
		order: 1;
	}

		.history .history_item:nth-child(even) .text_g .year_g {
			text-align: right;
		}

		.history .history_item:nth-child(even) .text_g .history_l li {
			justify-content: flex-end;
		}

			.history .history_item:nth-child(even) .text_g .history_l li .year {
				order: 2;
				text-align: right;
			}

	.history .history_item:nth-child(odd) .text_g .history_l li .year {
		text-align: right;
	}

	.history .history_item:nth-child(even) .text_g .history_l li p {
		order: 1;
		text-align: right;
		padding-right: 5%;
		padding-left: 0;
	}

	.history .history_item:nth-child(odd) .year_g:before {
		left: -69px;
	}

	.history .history_item:nth-child(even) .year_g:before {
		right: -70px;
	}


.history .section_tab,
.history .section_tit strong {
	transform: translateY(30px);
	opacity: 0;
}

	.history .section_tab.in-view,
	.history .section_tit.in-view strong {
		transform: translateY(0);
		opacity: 1;
		transition: 0.8s;
	}

.history .history_item .img_g img {
	transform: scale(1.07);
	transition: transform 0.9s;
}

.history .history_item.in-view .img_g img {
	transform: scale(1);
}

.history .history_item .year_g {
	opacity: 0;
	transform: translateY(30px);
	transition: 0.8s 0.3s;
}

.history .history_item.in-view .year_g {
	opacity: 1;
	transform: translateY(0);
}

.history .history_l li {
	opacity: 0;
	transform: translateY(30px);
	transition: 0.7s;
}

	.history .history_l li.in-view {
		opacity: 1;
		transform: translateY(0);
	}

.history .certify_l {
	opacity: 0;
	transform: translateY(30px);
	transition: 0.7s 0.2s;
}

	.history .certify_l.in-view {
		opacity: 1;
		transform: translateY(0);
	}


.brand .section1 .conwrap .img_wrap img {
	opacity: 0;
	filter: blur(15px);
}

.brand .section1.in-view .conwrap .img_wrap img {
	opacity: 1;
	filter: blur(0px);
	transition: 1.2s 0.1s;
}

.brand .section1 .conwrap .text_wrap strong,
.brand .section1 .conwrap .text_wrap .p_wrap {
	opacity: 0;
	transform: translateY(30px);
}

.brand .section1.in-view .conwrap .text_wrap strong {
	opacity: 1;
	transform: translateY(0);
	transition: 0.7s 0.7s;
}

.brand .section1.in-view .conwrap .text_wrap .p_wrap {
	opacity: 1;
	transform: translateY(0);
	transition: 0.7s 0.9s;
}

.brand .section2 .inner .bg {
	transform: scale(1.07);
}

.brand .section2.in-view .inner .bg {
	transform: scale(1);
	transition: transform 1.5s;
}

.brand .section2.in-view .text_wrap strong.tit.splitting .char {
	-webkit-animation: text-active-animation 1.2s cubic-bezier(0.4, 0, 0.2, 1) both;
	animation: text-active-animation 1.2s cubic-bezier(0.4, 0, 0.2, 1) both;
	animation-delay: calc(0.2s + var(--char-index) * 30ms);
}

.brand .section2 .text_wrap span.sub_tit,
.brand .section2 .text_wrap p {
	opacity: 0;
	transform: translateY(30px);
}

.brand .section2.in-view .text_wrap span.sub_tit {
	opacity: 1;
	transform: translateY(0);
	transition: 0.9s 0.6s;
}

.brand .section2.in-view .text_wrap p {
	opacity: 0.8;
	transform: translateY(0);
	transition: 0.9s 0.8s;
}

.brand .section3:before {
	transform: scale(0);
}

.brand .section3.in-view:before {
	transform: scale(1);
	transition: transform 0.8s;
}

.brand .section3 .brand_l li {
	opacity: 0;
	transform: translateY(40px);
	transition: 0.7s 0.2s;
}

	.brand .section3 .brand_l li:nth-child(1) {
		transition-delay: 0.4s;
	}

	.brand .section3 .brand_l li.in-view {
		opacity: 1;
		transform: translateY(0);
	}



.brand .section2 {
	width: 100%;
}

	.brand .section2 .inner {
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
		width: calc(100% - 80px);
		height: 860px;
		margin: 0 auto;
		border-radius: 8px;
		overflow: hidden;
	}

		.brand .section2 .inner .bg {
			width: 100%;
			height: 100%;
			background: url(/WebImg/Brand/barnd01.JPG) no-repeat center / cover;
		}

	.brand .section2 .text_wrap {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%);
		text-align: center;
	}

		.brand .section2 .text_wrap strong.tit {
			display: block;
			font-family: "Montserrat";
			font-size: 60px;
			font-weight: 100;
			letter-spacing: -0.025em;
			color: #fff;
			text-transform: uppercase;
		}

		.brand .section2 .text_wrap span.sub_tit {
			display: block;
			text-align: center;
			font-size: 40px;
			font-weight: 300;
			color: #fff;
			letter-spacing: -0.025em;
		}

		.brand .section2 .text_wrap p {
			font-size: 17px;
			font-weight: 300;
			line-height: 1.7;
			letter-spacing: -0.025em;
			color: #fff;
			opacity: 0.8;
			margin: 29px 0 0;
		}

.brand .section3 {
	position: relative;
	padding: 200px 0 100px 0;
	background: url(/WebImg/m11_sec3_bg.png) no-repeat bottom -210px right;
}

	.brand .section3:before {
		content: "";
		position: absolute;
		top: -105px;
		left: 30px;
		width: 1100px;
		height: 1100px;
		border-radius: 50%;
		background: #fff;
		opacity: 0.5;
		z-index: -1;
	}

	.brand .section3 .inner {
		width: 94%;
		max-width: 1360px;
		margin: 0 auto;
	}

	.brand .section3 .brand_l {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		counter-reset: section;
	}

		.brand .section3 .brand_l li {
			width: 44.2%;
		}

			.brand .section3 .brand_l li:nth-child(odd) {
				margin-top: 190px;
			}

			.brand .section3 .brand_l li .img_wrap {
				position: relative;
				border-radius: 8px;
				overflow: hidden;
			}

				.brand .section3 .brand_l li .img_wrap:before {
					counter-increment: section;
					content: "BRAND MERIT 0"counter(section);
					position: absolute;
					bottom: 0;
					left: -15px;
					transform: rotate(-90deg);
					transform-origin: bottom left;
					font-family: 'Montserrat';
					font-size: 16px;
					font-weight: 500;
					letter-spacing: -0.025em;
					color: #000;
					opacity: 0.8;
				}

				.brand .section3 .brand_l li .img_wrap img {
					width: 100%;
					border-radius: 8px;
				}

			.brand .section3 .brand_l li .text_wrap {
				text-align: center;
				margin-top: 44px;
			}

				.brand .section3 .brand_l li .text_wrap strong {
					font-family: "Montserrat";
					font-size: 56px;
					font-weight: bold;
					letter-spacing: -0.025em;
					color: #000;
					text-transform: uppercase;
				}

				.brand .section3 .brand_l li .text_wrap p {
					font-size: 17px;
					font-weight: 300;
					line-height: 1.7;
					letter-spacing: -0.025em;
					color: #555;
					margin-top: 15px;
				}