@charset "UTF-8";
.bg-vision,
.bg-block,
.bg-block__item{ width:100%; height:1060px; position:absolute; left:0; top:0;}

.bg-vision{ -webkit-mask-image:url(../images/bg-mask02.webp);
			mask-image:url(../images/bg-mask02.webp);
			-webkit-mask-repeat:no-repeat;
			mask-repeat:no-repeat;
			-webkit-mask-size:0vw 0vw;
			mask-size:0vw 0vw; 
			-webkit-mask-position:center center;
			mask-position:center center;
			--Size-mask:145vw;
            }				   
.bg-vision [class*="-block"]{ background-position:center top; background-size:auto; background-repeat:no-repeat; position:absolute; inset:0;}
.sec-block{ background-image:url(../images/bg-vision.webp); }	
.furniture-block{ background-image:url(../images/vision-furniture.webp);}	
.gift-block{ background-image:url(../images/vision-gift.webp);}	
.mob01-block{ background-image:url(../images/vision-mob01.webp);}	
.mob02-block{ background-image:url(../images/vision-mob02.webp);}	

.vision-con{ width:78%; max-width:1148px; margin-inline:auto; padding-top:5.55rem; position:relative; z-index:1;}

.cha-block{ width:100%; aspect-ratio:1148 / 1014; margin-inline:auto; margin-top:-22rem; margin-bottom:-12rem; position:relative; left:-2rem; }
.cha-block__item{ position:absolute; inset:0; }
.cha-block [class*="-block"]{ background-position:top center; background-size:100% auto; background-repeat:no-repeat; position:absolute; inset:0; }
.cha01-block{ background-image:url(../images/cha01.webp);}
.cha02-block{ background-image:url(../images/cha02.webp);}

.cha-block .card-tt-block{ width:fit-content; margin-inline:auto; top:44%; left:3%; position:relative; display:none;}
.card-tt-block p{ width:fit-content; margin-inline:auto;
                  text-align:center; font-family:sicuveiw, sans-serif; font-size:var(--FontSize-card);
				  font-weight:500;
                 }						  

/* sec-mask fadeIn */
[data-at="entry"].visible.bg-vision{ animation-name:sec-mask_fadeIn; 
									 animation-duration:0.8s;
									 animation-delay:0s;
									 animation-fill-mode:forwards;
									 animation-timing-function:ease-in-out;
									 transform-origin:center center;
									 animation-composition:accumulate;
									}	
@keyframes sec-mask_fadeIn{
								0%{ -webkit-mask-size:0vw 0vw;
									mask-size:0vw 0vw; 
									filter:brightness(0.1);
								}
								100%{ -webkit-mask-size:var(--Size-mask) var(--Size-mask);
									mask-size:var(--Size-mask) var(--Size-mask); 
									filter:brightness(1);
								}
		                	}

.vision-con .logo-anniv-block{ opacity:0;}
[data-at="entry"].visible.vision-con .logo-anniv-block{ animation-name:vision-logo_fadeIn; 
														animation-duration:0.5s;
														animation-delay:0.05s;
														animation-fill-mode:forwards;
														animation-timing-function:ease;
														animation-composition:accumulate;
														transform-origin:center center;
														}			
@keyframes vision-logo_fadeIn{ 0%{ transform:translateY(5%) scale(1.4); filter:brightness(0) blur(5px); opacity:0;}
                              100%{ transform:translateY(0%) scale(1); filter:brightness(1) blur(0px); opacity:1;}
						      }


/* cha fadeIn */
.cha-block{ opacity:0;}
[data-at="entry"].visible.vision-con .cha-block{
						animation-name:vision-cha_fadeIn;
						animation-duration:0.7s;
						animation-delay:0.2s;
						animation-fill-mode:forwards;
						animation-timing-function:ease;
                        animation-composition:accumulate;
						transform-origin:center center;
                        }			
@keyframes vision-cha_fadeIn{ 0%{ transform:scale(0.88); filter:brightness(0) blur(5px); opacity:0;}
                              100%{ transform:scale(1); filter:brightness(1) blur(0px); opacity:1;}
						      }

/* mob fadeIn */
.bg-block__item:has(.mob01-block, .mob02-block){ opacity:0;}
[data-at="entry"].visible.bg-vision .bg-block__item:has(.mob01-block){
						animation-name:vision-mob01_fadeIn; 
						animation-duration:0.6s;
						animation-delay:0.3s;
						animation-fill-mode:forwards;
						animation-timing-function:ease;
                        animation-composition:accumulate;
						transform-origin:center center;
                        }			
@keyframes vision-mob01_fadeIn{ 0%{ left:5%; top:3%; filter:brightness(0) blur(5px); opacity:0;}
                              100%{ left:0%; top:0%; filter:brightness(1) blur(0px); opacity:1;}
						      }

[data-at="entry"].visible.bg-vision .bg-block__item:has(.mob02-block){
							animation-name:vision-mob02_fadeIn; 
							animation-duration:0.6s;
							animation-delay:0.3s;
							animation-fill-mode:forwards;
							animation-timing-function:ease;
							animation-composition:accumulate;
							transform-origin:center center;
							}			
@keyframes vision-mob02_fadeIn{ 0%{ left:-5%; top:3%; filter:brightness(0) blur(5px); opacity:0;}
                              100%{ left:0%; top:0%; filter:brightness(1) blur(0px); opacity:1;}
						      }
/* cha anime */
[data-at="entry"].visible.vision-con .cha01-block{
						animation-name:vision-cha01_an;
						animation-duration:2s;
						animation-delay:0s;
						animation-iteration-count:infinite;
						animation-timing-function:ease-in-out;
                        animation-composition:accumulate;
						transform-origin:center center;
						}

@keyframes vision-cha01_an{ 0%{transform:translateY(-0.6%) rotate(0.7deg);}
			              60%{ transform:translateY(0.9%) rotate(-0.2deg);}
						  100%{ transform:translateY(-0.6%) rotate(0.7deg);}
			            }	
[data-at="entry"].visible.vision-con .cha02-block{
						animation-name:vision-cha02_an; 
						animation-duration:2s;
						animation-delay:0s;
						animation-iteration-count:infinite;
						animation-timing-function:ease-in-out;
                        animation-composition:accumulate;
						transform-origin:center center;
                        }						
@keyframes vision-cha02_an{ 0%{ transform:translateY(-0.6%) rotate(-0.2deg);}
			              60%{ transform:translateY(0.9%) rotate(0.7deg);}
						  100%{ transform:translateY(-0.6%) rotate(-0.2deg);}
			            }	
/* mob anime */
[data-at="entry"].visible.bg-vision .mob01-block{
						animation-name:vision-mob01_an; 
						animation-duration:2s;
						animation-delay:0s;
						animation-iteration-count:infinite;
						animation-timing-function:ease-in-out;
                        animation-composition:accumulate;
						transform-origin:center center;
                        }						
@keyframes vision-mob01_an{ 0%{ transform:translateY(-0.8%) translateX(-0.1%) ; }
			              60%{ transform:translateY(0.5%) translateX(0.1%);}
						  100%{ transform:translateY(-0.8%) translateX(-0.1%) ; }
			            }	

[data-at="entry"].visible.bg-vision .mob02-block{
						animation-name:vision-mob02_an; 
						animation-duration:2s;
						animation-delay:0s;
						animation-iteration-count:infinite;
						animation-timing-function:ease-in-out;
						transform-origin:center center;
                        animation-composition:accumulate;
                        }	
@keyframes vision-mob02_an{ 0%{ transform:translateY(0%); }
							25%{ transform:translateY(-1%); }
							30%{ transform:translateY(0%); }
							100%{ transform:translateY(0%); }
			            }	

@media (max-width:1500px){

					.bg-vision [class*="-block"]{ background-size:132.15vw auto;}   

					.vision-con{ width:80.5vw; padding-top:min(7.05vw,5.4rem); }
					.cha-block{ margin-top:min(-24.75vw, -5.4rem); margin-bottom:-12vw; left:-1.95vw; }

}
@media (max-width:1200px){

					.bg-vision{ --Size-mask:185vw;}
					.bg-vision [class*="-block"]{ background-size:100% auto;}
					.sec-block{ background-image:url(../images/bg-vision-m.webp); }	
					.furniture-block{ background-image:url(../images/vision-furniture-m.webp); }	
					.gift-block{ background-image:url(../images/vision-gift-m.webp);}	
					.mob01-block{ background-image:url(../images/vision-mob01-m.webp);}	
					.mob02-block{ background-image:none;}	

					.vision-con{ width:99.5vw; padding-top:8vw;}

					.cha-block{ width:100%; aspect-ratio:1294 / 1139; 
						        margin-top:-29.50vw;; margin-bottom:-15vw; left:-1.95vw;
							   }
					.cha-block [class*="-block"]{ background-position:top center; background-size:100% auto; background-repeat:no-repeat; position:absolute; inset:0; }
					.cha01-block{ background-image:url(../images/cha01-m.webp); }
					.cha02-block{ background-image:url(../images/cha02-m.webp); }

}  
@media (max-width:900px){

						.bg-vision{  -webkit-mask-size:500vw 500vw;
									 mask-size:500vw 500vw;  
									}
						[data-at="entry"].visible.bg-vision{ animation-name:none;}	

						.bg-vision [class*="-block"]{ background-size:100% auto;}
						.bg-vision .sec-block{ background-image:url(../images/bg-vision-s.webp); background-position:center -2.85vw; }	
						.furniture-block{ background-image:none;}	
						.gift-block{ background-image:none;}	
						.mob01-block{ background-image:none;}	

						.vision-con{ width:100%; padding-top:0;}
						.cha-block{ width:92.98%; max-width:620px; aspect-ratio:851 / 711; margin-inline:auto; margin-top:min(-3.5vw, -1.6rem); margin-bottom:-2.5vw; position:relative;  left:0vw;}
                        .cha01-block{ background-image:url(../images/bg-card-s.webp); }
						.cha02-block{ display:none;}
						@keyframes vision-cha_fadeIn{  0%{ transform:translateY(5%); filter:brightness(0) blur(5px); opacity:0;}
													   100%{ transform:translateY(0%); filter:brightness(1) blur(0px); opacity:1;}
													}		
						[data-at="entry"].visible.vision-con .cha01-block{ animation-name:none;}								
			

}  
@media (max-width:760px){

					.bg-vision .sec-block{ background-position:center 0.8vw; }

					.card-block{ margin-top:-5.55vw; }
}