/* 구분 -----------------------------------*/
/**** pc ****/
@media only all and (min-width:768px) {.SCF_1010_0 .subbgtopimg { width: 100%; float: left; height:calc(var(--subtop-h) - 30px);  overflow: hidden; position: relative!important;  margin-bottom: 0px!important}

}
/**** pc2 ****/
@media all and (max-width:1560px) and (min-width:768px) {
	
	.SCF_1010_0 .subbgtopimg { width: 100%; float: left; height:300px;  overflow: hidden; position: relative!important;  margin-bottom: 0px!important}

}
/**** 모바일 ****/
@media only all and (max-width:767px) {.SCF_1010_0 .subbgtopimg { width: 100%; float: left; height:200px;  overflow: hidden; position: relative!important;  margin-bottom: 0px!important}
}
/**** 모바일2 ****/
@media only all and (max-width:400px) {
}
/* 구분 //end -----------------------------------*/





/* 구분 -----------------------------------*/
/**** pc ****/
@media only all and (min-width:768px) {
	
.SCF_1010_0 .subbgtopimg .wg_img1 { width: 100%; height:100%; position: absolute; top: 0px;left: 0px; z-index: 0!important; overflow: hidden}
	

	.SCF_1010_0 .subbgtopimg .wg_img1:before{ width: 100%; height:80px; position: absolute; top: -80px; left: 0px; z-index: 0; content: "";   background-color: var(--primary-opacity80);z-index: 99999999;}
	
	.SCF_1010_0 .subbgtopimg .wg_img1  img {height:auto; width: 2560PX; -webkit-animation: sub_top_ani  2s forwards; /* Safari 4.0 - 8.0 */
  animation: sub_top_ani 2s forwards; position: absolute; top: 0PX; left:50%; margin-left: -1280PX}

}
/**** pc2 ****/
@media all and (max-width:1800px) and (min-width:768px) {
	
		
	.SCF_1010_0 .subbgtopimg .wg_img1  img {height:auto; width: 1960PX; -webkit-animation: sub_top_ani  2s forwards; /* Safari 4.0 - 8.0 */
  animation: sub_top_ani 2s forwards; position: absolute; top: 0PX; left:50%; margin-left: -1000PX}
	
}
/**** 모바일 ****/
@media only all and (max-width:767px) {
	
.SCF_1010_0 .subbgtopimg .wg_img1 { width: 100%; height:100%; position: absolute; top: 0px;left: 0px; z-index: 0!important; overflow: hidden; background-color: #000}
	

	.SCF_1010_0 .subbgtopimg .wg_img1:before{ width: 100%; height:80px; position: absolute; top: -20px; left: 0px; z-index: 0; content: "";   background-color: var(--primary-opacity80);z-index: 99999999;}
	
	.SCF_1010_0 .subbgtopimg .wg_img1  img {height:auto; width:250%; -webkit-animation: sub_top_ani_m  2s forwards; /* Safari 4.0 - 8.0 */
  animation: sub_top_ani_m 2s forwards; position: absolute; top: 0PX;left:30%; margin-left: -100%;}

}
/**** 모바일2 ****/
@media only all and (max-width:400px) {
}
/* 구분 //end -----------------------------------*/






@keyframes sub_top_ani {
  from { opacity:0; transform: translateY(-60px); }
  to   { opacity:1; transform:  translateY(0px);  }
}

@keyframes sub_top_ani_m {
  from { opacity:0; transform: translateY(-20px); }
  to   { opacity:0.6; transform:  translateY(0px);  }
}
/* 구분 -----------------------------------*/
/**** pc ****/
@media only all and (min-width:768px) {.SCF_1010_0 .subbgtopimg  .contents-container{  padding: 80PX 0PX; height: 100%!important; display: inline-block; text-align: left!important; display: flex;  justify-content: center;  align-items: center; }
	
}
/**** pc2 ****/
@media all and (max-width:1860px) and (min-width:768px) {
	
	.SCF_1010_0 .subbgtopimg  .contents-container{   padding: 80PX clamp(20px, 3.906vw, 30px);  height: 100%!important; display: inline-block; text-align: left!important; display: flex;  justify-content: center;  align-items: center; }
}
/**** 모바일 ****/
@media only all and (max-width:767px) {.SCF_1010_0 .subbgtopimg  .contents-container{  padding: 40PX 20PX!important; height: 100%!important; display: inline-block; text-align: left!important; display: flex;  justify-content: center;  align-items: center; }
	
}
/**** 모바일2 ****/
@media only all and (max-width:400px) {
}
/* 구분 //end -----------------------------------*/



 .SCF_1010_0 .wg_boxin{ width: 100%!important; float: left;   }
 .SCF_1010_0 .wg_boxin .wg_img1{ width:100%!important; float: left;   }


/* 구분 -----------------------------------*/
/**** pc ****/
@media only all and (min-width:768px) {
	
.SCF_1010_0 .wg_tx3{ width: 100%!important; float: left; color: #fff;  line-height: 130%; margin-top: 30px}
 .SCF_1010_0 .wg_tx3 .intx{ width: 100%!important; float: left; color: #fff; font-size:calc(var(--tit-md-size) * 1.2); margin-bottom: 20px; font-weight: 800; line-height: 130%;}
}
/**** pc2 ****/
@media all and (max-width:1280px) and (min-width:768px) {
}
/**** 모바일 ****/
@media only all and (max-width:767px) {
	
.SCF_1010_0 .wg_tx3{ width: 100%!important; float: left; color: #fff;font-size:calc(var(--tit-mds-size) * 0.8);  line-height: 130%; margin-top: 10px}
.SCF_1010_0 .wg_tx3 .intx{ width: 100%!important; float: left; color: #fff; font-size:calc(var(--tit-mds-size) * 0.8); margin-bottom: 20px; font-weight: 800; line-height: 130%;}
}
/**** 모바일2 ****/
@media only all and (max-width:400px) {
}
/* 구분 //end -----------------------------------*/



/* 기존 CSS에 추가할 애니메이션 스타일 */
.SCF_1010_0 .wg_tx1,
.SCF_1010_0 .wg_tx2 { 
    width: 100% !important; 
    float: left; 
    height: auto;  
    overflow: hidden;
    position: relative;
} 
/* 구분 -----------------------------------*/
/**** pc ****/
@media only all and (min-width:768px) {
	
.SCF_1010_0 .wg_tx1 .intx,
.SCF_1010_0 .wg_tx2 .intx { 
    width: 100% !important; 
    float: left; 
    color: #fff; 
    font-size: calc(var(--tit-md-size) * 0.9); 
    margin-bottom: 0px; 
    font-weight: 800; 
    line-height: 130%;
} 

}
/**** pc2 ****/
@media all and (max-width:1280px) and (min-width:768px) {
}
/**** 모바일 ****/
@media only all and (max-width:767px) {
	
.SCF_1010_0 .wg_tx1 .intx,
.SCF_1010_0 .wg_tx2 .intx { 
    width: 100% !important; 
    float: left; 
    color: #fff; 
    font-size: calc(var(--tit-md-size) * 0.7); 
    margin-bottom: 0px; 
    font-weight: 800; 
    line-height: 130%; letter-spacing: -1px
} 

}
/**** 모바일2 ****/
@media only all and (max-width:400px) {
}
/* 구분 //end -----------------------------------*/


/* 단어별 애니메이션을 위한 스타일 */
.SCF_1010_0 .word {
    display: inline-block;
    transform: translateY(100%);
    opacity: 0;
    transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94), 
                opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    margin-right:2px;
}

.SCF_1010_0 .word.animate {
    transform: translateY(0);
    opacity: 1;
}


/* 기본 단어 스타일 */
.SCF_1010_0 .word {
    display: inline-block;
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.6s ease;
}

/* 애니메이션 활성화 */
.SCF_1010_0 .word.animate {
    opacity: 1;
    transform: translateY(0);
}

/* 처음 1-7번째 글자 색상 (원하는 색상으로 변경) */
.SCF_1010_0.highlight-char {
    color: var(--primary);; /* 주황색 예시 - 원하는 색상으로 변경하세요 */
}

/* 나머지 글자 색상 (기본 색상) */
.SCF_1010_0 .normal-char {
    color: inherit; /* 또는 원하는 기본 색상 */
}

/* 추가적인 스타일링이 필요한 경우 */
.SCF_1010_0 .highlight-char.animate {
    color: var(--primary);; /* 애니메이션 후에도 색상 유지 */
}