@charset "utf-8";

/* main common */
.main-title-box{padding:0 0 5.4rem;}
.main-title{font-size:4.2rem;line-height:5.04rem;color:var(--color123);font-weight:var(--font-weight-medium);text-align:center;}
.main-desc{padding:2rem 0 0;font-size:1.6rem;line-height:2.24rem;font-weight:var(--font-weight-semibold);color:var(--black03);text-align:center;}

/* 흐르는 텍스트 */
.flow-outer{width:100%;overflow:hidden;}
.flow-outer .flow-box{white-space:nowrap;overflow:hidden;}
.flow-outer .flow-box:hover .flow-txt-box, 
.flow-outer .flow-box.pause .flow-txt-box{animation-play-state:paused;}
.flow-outer .flow-box .flow-txt-box{display:inline-block;animation-duration:200s;animation-timing-function:linear;animation-iteration-count:infinite;}
.flow-outer .flow-box .flow-txt-box.left:not(.clone){animation-name:flowLeft;}
.flow-outer .flow-box .flow-txt-box.left.clone{animation-name:flowLeftClone;}
.flow-outer .flow-box .flow-txt-box.right:not(.clone){animation-name:flowRight;}
.flow-outer .flow-box .flow-txt-box.right.clone{animation-name:flowRightClone;}
.flow-outer .flow-box .flow-txt-box .flow-txt-list{display:flex;margin:0;padding:0 2rem;height:100%;overflow:visible;}
.flow-outer .flow-box .flow-txt-box .flow-txt-list > li{font-weight:var(--font-weight-bold);font-size:16rem;line-height:1;}

@media screen and (max-width:768px) {
	/* main common - 모바일 수급 전 임시 수치 */
	.main-title-box{padding:0 9px 3rem;}
	.main-title{font-size:2.2rem;line-height:2.6rem;word-break:break-all;}	
	.main-desc{display:none;padding:1.5rem 0 0;font-size:1.4rem;line-height:1.96rem;}

	.flow-outer .flow-box .flow-txt-box .flow-txt-list > li{font-size:10rem;}
}

@keyframes flowLeft{
	0%{transform:translateX(0);}
	50%{transform:translateX(-100%);}
	50.01%{transform:translateX(100%);}
	100%{transform:translateX(0);}	
}
/*복제 키프레임*/
@keyframes flowLeftClone{
	0%{transform:translateX(0);}
	100%{transform:translateX(-200%);}
}
@keyframes flowRight {
	0% {transform: translateX(0);}
	50% {transform: translateX(100%);}
	50.01% {transform: translateX(-100%);}
	100% {transform: translateX(0);}
}
/* 복제 키프레임 */
@keyframes flowRightClone {
	0% {transform: translateX(-200%);}
	100% {transform: translateX(0);}
}