@charset "utf-8";

@keyframes container {
	from { transform: translateX(0); }
	to { transform: translateX(-50%); }
}

.intro {position:relative;}

/* 연혁 */
.history {}
.history .motion {
	z-index:-1; font-size:var(--fontSize7); letter-spacing:5vw; font-weight:800; position:absolute; left:0; top:0; color:#000; opacity:.03;
	animation-name:container; animation-duration:10s; animation-iteration-count:infinite; animation-timing-function:linear;
}
.history h3 {padding:20px 0 0; position:relative; font-weight:400; font-size:var(--fontSize2); line-height:1.2;}
.history h3:before {width:130px; height:2px; background:var(--primary); left:0; top:0; position:absolute; display:block; content:'';}
.history h3 b {display:block; font-weight:800;}
.history .img {margin:100px 0 0; height:480px; border-radius:20px; background:#000; overflow:hidden;}
.history .img img {width:100%; height:100%; object-fit:cover; opacity:.5;}
.history .list {}
.history .list .item {padding:50px 0; display:flex; gap:120px;}
.history .list .item+.item {border-top:1px solid var(--bgcGray2);}
.history .list .item h4 {width:240px; font-size:var(--fontSize8); font-weight:400; color:var(--primary); line-height:1.2;}
.history .list .item div {width:calc(100% - 360px); padding:40px 0 0;}
.history .list .item div p {font-size:var(--fontSize9); color:#000; line-height:1.2;}



/* ************************ 태블릿 이하(~1199) ************************ */
@media (max-width: 1024px) {
	
	
	/* 연혁 */
	.history {}
	.history .img {margin:60px 0 0; height:40vw; min-height:200px;}
	.history .list .item {padding:40px 0; gap:80px;}
	.history .list .item h4 {width:170px;}
	.history .list .item div {width:calc(100% - 250px); padding:24px 0 0;}


	
	
}

/* ************************ 모바일 ************************ */
@media (max-width: 767px) {
	

	/* 연혁 */
	.history {}
	.history .img {margin:40px 0 0;}
	.history .list .item {padding:30px 0; flex-direction:column; gap:10px; align-items:start;}
	.history .list .item h4 {width:100%; line-height:1;}
	.history .list .item div {width:100%; padding:0;}

	
	
}



