.SpecialNotice div{
	transition:all 0.5s;
}

.banner_img_div .baseBG{
	background-color: #e0e4e7;
}

.banner_img_div .TextArea{
	color: #fff;
	width: 100%;
	height: 100%;
	z-index: 20;	
	color: #ffffff;
	text-shadow: 0px 0px 6px #000000;
}

.banner_img_div .TextArea .Title{   
	font-family: "나눔 고딕", sans-serif;  
	font-size: 20px;    
	font-weight: bold;    
}

.banner_img_div .TextArea .SideText{  
	font-family: "나눔 고딕", sans-serif;  
	font-size: 12px;
}

.banner_img_div .TextArea .Memo{  
	font-family: "나눔 고딕", sans-serif;  
	font-size: 12px;
}


.banner_img_div .LogoArea {
	position: absolute;
	top:0px;	
}


.banner_img_div .baseBG{
	width: 100%;
	aspect-ratio: 500/500;
	background-position: center bottom;
	background-size: 100%;
	background-image: url('/data/img/SpecialNotice/2026/SummerVacation/img/baseBG-500.png?v0.3');    
}


.banner_img_div .object[data-part="01"] {
	width: 100%;
	max-width: 280px;
	aspect-ratio: 815/762;	
	background-image: url('/data/img/SpecialNotice/2026/SummerVacation/img/object-01.png?v0.3');    
	background-position: center center;
	background-size: 100%;		
	left: -140px;
	bottom: 0px;
	z-index: 1;
}

.banner_img_div .object[data-part="02"] {
	width: 100%;
	aspect-ratio: 729 / 631;
	max-width: 300px;
	background-image: url(/data/img/SpecialNotice/2026/SummerVacation/img/object-02.png?v0.3);
	background-size: 100%;
	right: -150px;
	bottom: 0px;
	z-index: 1;
}

.banner_img_div .object[data-part="03"] {
    width: 100%;
    aspect-ratio: 924 / 477;
    max-width: 250px;

    background-image: url('/data/img/SpecialNotice/2026/SummerVacation/img/object-03.png?v0.3');
    background-size: 100%;
    background-repeat: no-repeat;

    position: absolute;
    left: 50%;    
    transform: translateX(-50%);

    bottom: 0;
    z-index: 2;
}

@keyframes sparkle { /*반짝 반짝*/
	  5% {
	    box-shadow: 0 0 1px 1px #fffdf5, 0 0 2px 1px #fff;
	  }
	  6% {
	    box-shadow: 0 0 0px 0px #fff, 0 0 0px 0px #fffdf5;
	  }
	  7% {
	    box-shadow: 0 0 1px 1px #fffdf5, 0 0 2px 1px #fff7cc;
	  }
	  8% {
	    box-shadow: 0 0 0px 0px #fff, 0 0 0px 0px #fffdf5;
	  }

	  34% {
	    box-shadow: 0 0 0px 0px #fff, 0 0 0px 0px #fffdf5;
	  }

	  54% {
	    box-shadow: 0 0 0px 0px #fff, 0 0 0px 0px #fffdf5;
	  }

	  55% {
	    box-shadow: 0 0 1px 1px #fffdf5, 0 0 2px 1px #fff;
	  }
	  56% {
	    box-shadow: 0 0 0px 0px #fff, 0 0 0px 0px #fffdf5;
	  }
	  57% {
	    box-shadow: 0 0 1px 1px #fffdf5, 0 0 2px 1px #fff7cc;
	  }
	  58% {
	    box-shadow: 0 0 0px 0px #fff, 0 0 0px 0px #fffdf5;
	  }

	}



@media (min-width: 768px){
	.banner_img_div .baseBG{
		background-size: 180%;
		background-image: url('/data/img/SpecialNotice/2026/SummerVacation/img/baseBG-1300.png?v0.3');    
	}


	.banner_img_div .object[data-part="01"] {
	  max-width: 450px;
	  bottom: -30px;
	}

	.banner_img_div .object[data-part="02"] {	  
	  max-width: 500px;	  
	  right: -260px;
	  bottom: -30px;
	}

	.banner_img_div .object[data-part="03"] {
	  max-width: 400px;
	}

	
}

@media (min-width: 1024px){
	.banner_img_div .baseBG{
		background-size: 160%;
		background-image: url('/data/img/SpecialNotice/2026/SummerVacation/img/baseBG-1300.png?v0.3');    
	}


	.banner_img_div .object[data-part="01"] {
	  max-width: 700px;
	  left: -240px;
	}

	.banner_img_div .object[data-part="02"] {	  
	  max-width: 650px;
	  right: -365px;
	}

	.banner_img_div .object[data-part="03"] {
	  width: 100%;		
	  max-width: 550px;

	}
}



@media (min-width: 1280px){

	@keyframes sparkle { /*반짝 반짝*/
	  5% {
	    box-shadow: 0 0 3px 3px #fffdf5, 0 0 5px 3px #fff;
	  }
	  6% {
	    box-shadow: 0 0 0px 0px #fff, 0 0 0px 0px #fffdf5;
	  }
	  7% {
	    box-shadow: 0 0 3px 3px #fffdf5, 0 0 5px 3px #fff7cc;
	  }
	  8% {
	    box-shadow: 0 0 0px 0px #fff, 0 0 0px 0px #fffdf5;
	  }

	  34% {
	    box-shadow: 0 0 0px 0px #fff, 0 0 0px 0px #fffdf5;
	  }

	  54% {
	    box-shadow: 0 0 0px 0px #fff, 0 0 0px 0px #fffdf5;
	  }

	  55% {
	    box-shadow: 0 0 3px 3px #fffdf5, 0 0 5px 3px #fff;
	  }
	  56% {
	    box-shadow: 0 0 0px 0px #fff, 0 0 0px 0px #fffdf5;
	  }
	  57% {
	    box-shadow: 0 0 3px 3px #fffdf5, 0 0 5px 3px #fff7cc;
	  }
	  58% {
	    box-shadow: 0 0 0px 0px #fff, 0 0 0px 0px #fffdf5;
	  }
	}


	.banner_img_div .TextInfor {
	    bottom: 20%;
	}

	.banner_img_div .TextInfor .Title{
	    font-size: 30px;
	}

	.banner_img_div .TextInfor .SideText{
	    font-size: 18px;
	}

	.banner_img_div .TextInfor {
	    bottom: 16%;
	}

	.banner_img_div .baseBG{				
		background-image: url('/data/img/SpecialNotice/2026/SummerVacation/img/baseBG.png?v0.3');    
		background-size: 140%;
	}

	.banner_img_div .object[data-part="01"] {
	  
	}

	.banner_img_div .object[data-part="02"] {		
		max-width: 700px;
		right: -300px;
	}

	.banner_img_div .object[data-part="03"] {			  	  
	  max-width: 750px;
	}


}

@media (min-width: 1680px){
	.banner_img_div .TextArea .Title{   
		font-size: 40px;    
	}

	.banner_img_div .TextArea .SideText{  
		font-size: 30px;
	}

	.banner_img_div .TextArea .Memo{  	
		font-size: 18px;
	}

	.banner_img_div .object[data-part="01"] {
		max-width: 815px;	  
	}

	.banner_img_div .object[data-part="02"] {		
		max-width: 729px;
	}

	.banner_img_div .object[data-part="03"] {		
	}
}

@media (min-width: 1920px){

	.banner_img_div .baseBG{						
		background-image: url('/data/img/SpecialNotice/2026/SummerVacation/img/baseBG.png?v0.3');    
		background-size: 105%;
	}

}



@media (min-width: 2100px){	

	.banner_img_div .TextArea .Title{ 	  
	  font-size: 45px;
	}

	.banner_img_div .TextArea .SideText{
	  font-size: 25px;
	}

	.banner_img_div .object[data-part="01"] {	
		left: 0px;
	}

	.banner_img_div .object[data-part="02"] {					
		right: 0px;	
	}

	.banner_img_div .object[data-part="03"] {		
		max-width: 924px;
	}


}



.EffectArea {
    overflow: hidden;
    pointer-events: none;
    z-index: 2;
}

.EffectArea span {
    width: 2px;
    height: 2px;
    background-color: #ffd8a8; /* 추천 색상 중 하나 */
    border-radius: 50%;
    opacity: 0;
    animation: sparkle 2s infinite ease-in-out;
}




@keyframes sparkle {
    0%, 100% {
        opacity: 0;
        transform: scale(0.5);
    }
    50% {
        opacity: 1;
        transform: scale(1.5);
    }
}

.baseBG {
    z-index: 1; /* 또는 더 높은 값 */
}


.EffectArea {
    z-index: 2;
}

.TextArea,
.LogoArea,
.BgLayer,
.SecendBG {
    z-index: 3; /* 또는 더 높은 값 */
}
