@charset "utf-8"; /* CSS Document */
/* 메인 */
#main {
    padding: var(--sec_pd) 0px;
    transition: all 0.5s ease-in-out;
}
#main .wrap {
	max-width: fit-content;
        padding: 0 0rem 
    }
#main .main_txt_box{ 
	height: 303px;
	background-image: url("../images/main_bg.png");
    background-repeat: no-repeat;
    background-position: center top;
    background-size: contain;
	
	/*background-image: url("../images/main_bg_L.png"), url("../images/main_bg_R.png");
    background-repeat: no-repeat, no-repeat;
    background-position: 2.5% center, 97.5% center;
    background-size: contain, contain;*/
	line-height: 1.05;
	display:flex;
	justify-content: center;
	align-items: center;

}
#main .main_txt_img{ width: auto; max-width: 590px; }
    /* 메인텍스트 */
    #main .main_txt {
		padding-left: 2rem;
        text-shadow: 0px 0px 25px var(--bg_gray_f5),  0px 0px 15px var(--bg_gray_f5), 0px 0px 10px var(--bg_gray_f5);
    }
	/* 메인텍스트슬라이드 */
	#main .main_txt_slide_box{
		min-width: 488px;
		height: auto;
		aspect-ratio: 12 / 5;
		background-image: url("../images/txt_slide_bg.png");
		background-repeat: no-repeat;
		background-position: center bottom;
		background-size: contain;
		position: relative;
		overflow: hidden;
	}
	#main .main_txt_slide_box .main_txt_slide{
		display: flex;
		flex-direction: column;
		justify-content: flex-start; 
    	align-items: center;
		position: absolute;
		top: 22%;
		left: 0;
		width: 90%;
		margin-left: 5%;
		height: 70%;
		overflow: hidden;
	}   
		#main .main_txt_slide_box .main_txt_slide::before{
			content: "";
			display: block;
			width: 100%;
			height: 15%;
			background: linear-gradient(to bottom, rgba(255,255,255,1), rgba(255,255,255,0));
			position: absolute;
			top: 0;
			left: 0;
			z-index: 2;
		}
		#main .main_txt_slide_box .main_txt_slide::after{
			content: "";
			display: block;
			width: 100%;
			height: 15%;
			background: linear-gradient(to top, rgba(255,255,255,1), rgba(255,255,255,0));
			position: absolute;
			bottom: 0;
			left: 0;
			z-index: 2;
		}
		#main .main_txt_slide_box .main_txt_slide [id^="text"]{
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			text-align: center;
			flex: 0 0 auto;
			height: 100%;
			gap: 10px;
			position: absolute;
			width: 100%;
			opacity: 0;
		}
			/* 각각의 애니메이션 적용 */
			#main .main_txt_slide_box .main_txt_slide #text1 {
				animation: text1-animation 9s linear infinite;
			}

			#main .main_txt_slide_box .main_txt_slide #text2 {
				animation: text2-animation 9s linear infinite;
			}

			#main .main_txt_slide_box .main_txt_slide #text3 {
				animation: text3-animation 9s linear infinite;
			}

			@keyframes text1-animation {
				0% { opacity: 0; transform: translateY(100%); }
				10%, 30% { opacity: 1; transform: translateY(0); }
				40% { opacity: 0; transform: translateY(-100%); }
				100% { opacity: 0; transform: translateY(-100%); }
			}

			@keyframes text2-animation {
				30% { opacity: 0; transform: translateY(100%); }
				40%, 60% { opacity: 1; transform: translateY(0); }
				70% { opacity: 0; transform: translateY(-100%); }
				100% { opacity: 0; transform: translateY(-100%); }
			}

			@keyframes text3-animation {
				60% { opacity: 0; transform: translateY(100%); }
				70%, 90% { opacity: 1; transform: translateY(0); }
				100% { opacity: 0; transform: translateY(-100%); }
			}

/* ==================== 해상도 1380px 이상 ==================== */
@media screen and (min-width: 1380px) {



}


/* ==================== 모바일 레이아웃 ==================== */

@media ( max-width: 1380px ) {
#main .wrap {
        padding: 0 1rem;
    }
#main .main_txt_box{ 
	height: auto;
    background-position: center;
}
#main .main_txt_img{ width: 90%;}
	#main .main_txt_slide_box{
		min-width: 400px;
	}
}

@media ( max-width: 900px ) {
    #main .main_txt_img{ width: 80%;}
}

@media ( max-width: 600px ) {
	#main .wrap {
		gap: 0;
    }
	/*.main_txt_box*/
	#main .main_txt{
		margin-top: 3rem;
		text-align: center;
	}
	#main .main_txt_slide_box{
		margin-top: 3rem;
		min-width: 90%;
	}

   

}
/***** 가로모드 *****/
@media screen and (orientation: landscape) and ( max-width: 900px ) {

}


/* ========================================================================== */