@charset "utf-8";

@keyframes container {
	from { transform: translateX(0); }
	to { transform: translateX(-50%); }
}

.intro {position:relative;}

/* 비전 */
.vision .vision {}
.vision .vision-tit {display:flex; gap:100px;}
.vision .vision-tit>div {width:calc((100% - 100px)/2);}
.vision .vision-tit .txt {}
.vision .vision-tit .txt h3 {padding:0 0 35px; margin:0 0 30px; font-size:var(--fontSize2); font-weight:800; line-height:1.2; position:relative;}
.vision .vision-tit .txt h3:after {width:50px; height:3px; background:var(--primary); left:0; bottom:0; position:absolute; content:''; display:block;}
.vision .vision-tit .txt p {font-size:var(--fontSize4);}
.vision .vision-tit .txt p+p {padding:30px 0 0;}
.vision .vision-tit .img {border-radius:20px; overflow:hidden;}
.vision .vision-tit .img img {width:100%; height:100%; object-fit:cover;}
 
.vision .vision-video {padding:100px 0;}
.vision .vision-video .videoArea {padding:100px 0 0; background: rgba(0, 0, 0, 0.03);}
.vision .vision-video .video {display:flex; border-radius:20px 20px 0 0; overflow:hidden;}
.vision .vision-video .video video {width:100%;}
.vision .vision-video .con {padding:100px; background:var(--darkGray); border-radius: 0 0 20px 20px;}
.vision .vision-video .con p {color:#fff; }
.vision .vision-video .con p.tit {padding:0 0 50px; font-size:var(--fontSize2); font-weight:800; line-height:1.2;text-align:center;}
.vision .vision-video .con p.txt {font-size:var(--fontSize4);}
.vision .vision-video .con p.txt+p.txt {padding:30px 0 0;}

.vision .deco {position:absolute; right:0; bottom:0; z-index:-1;}

/* ************************ 태블릿 이하(~1199) ************************ */
@media (max-width: 1024px) {
	
	/* 비전 */
	.vision .vision-tit {flex-direction:column; gap:60px;}
	.vision .vision-tit>div {width:100%;}
	.vision .vision-tit .txt h3 {padding:0 0 30px; margin:0 0 25px;}
	.vision .vision-tit .txt p+p {padding:25px 0 0;}
	
	.vision .vision-video {padding:80px 0}
	.vision .vision-video .videoArea {padding:0; background:transparent;}
	.vision .vision-video .con {padding:80px;}
	
	.vision .deco {width:50%;}
	
	
	
	
}

/* ************************ 모바일 ************************ */
@media (max-width: 767px) {
	
	/* 비전 */
	.vision .vision-tit {gap:40px;}
	.vision .vision-tit>div {width:100%;}
	.vision .vision-tit .txt h3 {padding:0 0 20px; margin:0 0 17rpx;}
	.vision .vision-tit .txt h3:after {width:35px; height:3px;}
	.vision .vision-tit .txt p+p {padding:20px 0 0;}
	
	.vision .vision-video {padding:50px 0}
	.vision .vision-video .con {padding:30px;}
	

	
}