@charset "UTF-8";
html,body{  
	font-size:16px;
	font-weight:500;
	font-family:'Noto Sans TC','Arial', sans-serif;
	
	color:#fff; 
	background:#fff;
	
 	width:100%; height:100%; margin:0;
	
	text-size-adjust:none;
	-webkit-text-size-adjust:none;
	-moz-text-size-adjust:none;
	-ms-text-size-adjust:none;
	-webkit-font-smoothing:antialiased;
	-moz-osx-font-smoothing:grayscale; 
}
.bg-contain{ background-repeat:no-repeat; background-size:contain; background-position:center;  }
.bg-child{ width:100%; height:100%; top:0; left:0; position:absolute; }
.video-container{ position:fixed; width:100%; height:100%; top:0; left:0; overflow:hidden; }
.video-container > video{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%)}

.avatar-select-container{ position:absolute; width:15%; left:45%; top:33.5%; height:42.6%; transform:translateY(0%) scale(0);   }

.avatar-select-container.active{ transform:translateY(0%) scale(1.1); transition:transform 900ms cubic-bezier(0,.48,.27,1);  }

#hammer-a{ left:25%; transition-delay:0 }
#hammer-b{ left:42%; transition-delay:200ms}
#hammer-c{ left:59%; transition-delay:100ms}

.avatar-select-container.zoom{ transform:translateY(0%) scale(1.5); transition:transform 1000ms cubic-bezier(0,.48,.27,1); transition-delay:0!important  }

#hammer-a.zoom{   transition-delay:0; transform:translateX(-55%) scale(1.5); }
#hammer-b.zoom{  transition-delay:50ms}
#hammer-c.zoom{ transition-delay:100ms; transform:translateX(55%) scale(1.5);}


.double#hammer-a{ left:37%; transition-delay:0 }
.double#hammer-b{ left:54%; transition-delay:0 }


.avatar-base{ background-image:url("../img/checkin/ship-base.png"); background-size:contain; background-position:bottom center; background-repeat:no-repeat; position:absolute; width:100%; height:95%; top:0; left:0;  }

.avatar-select-container-inner{ position:relative; width:100%; height:100%; background-color:rgba(255,0,0,0); transform:translateY(-5%)}
.avatar-select-ele{ position:absolute; width:100%; height:100%; left:50%; top:50%; transform:translate(-50%,-50%); 
	animation-duration:.5s; animation-delay:0s; animation-timing-function:ease-out;  animation-fill-mode:forwards;  animation-iteration-count:3; border:0px solid blue
}

.avatar-select-ele > div{ position:absolute; width:100%; height:100%; top:50%; left:50%;  background-size:contain; background-repeat:no-repeat; background-position:center; animation:ani-avatar-float 3s 0ms infinite alternate linear;  }

.spaceship-logo{ background-repeat:no-repeat; background-size:contain; background-position:center; position:absolute; width:33%!important; top:33%!important; height:33%!important; transform:translateZ(10)!important; right:-23%!important; left:auto!important; z-index:1; background-image:url(../img/logo-frame.png); }
.spaceship-logo .bg-child{ transform:scale(0.7);}

@keyframes ani-avatar-float{
	0%{ transform:translate(-50%, -50%); }
	25%{transform:translate(-50%, -51%);  }
	50%{transform:translate(-50%, -50%);  }
	75%{transform:translate(-50%, -49%);  }
	100%{transform:translate(-50%, -50%);  }
}

.all-avatar-select-container{ position:absolute; top:49%; left:50%; transform:translate(-50%,-50%) }

.luckydraw-banner-container{position:absolute; top:5%; left:50%; transform:translate(-50%,0%) scale(0); background-image:url(../img/luckydraw-headline.png); width:60%; height:22%;  }
.luckydraw-banner-container.active{ transform:translate(-50%,0%); transition:transform 600ms cubic-bezier(0,.48,.27,1);  animation:ani-banner-float 3s 650ms infinite alternate linear; }
@keyframes ani-banner-float{
	0%{ transform:translate(-50%, 0%); }
	25%{transform:translate(-50%, -1%);  }
	50%{transform:translate(-50%, 0%);  }
	75%{transform:translate(-50%, 1%);  }
	100%{transform:translate(-50%, 0%);  }
}


.tag-container{ position:absolute; left:50%; bottom:0; height:6vw; display:flex; font-family: 'HWT'; transform:translate(-50%, 50%)}
.tag-container > img{ width:auto; height:100%;}
.tag-container > div{ width:auto; min-width:10.5vw; background-image:url("../img/checkin/tag_02.png"); background-size:auto 100%; background-repeat:repeat-x; background-position:left center; position:relative;  }
.tag-container > div > div:last-child{ position:absolute; top:50%; border-top:2px dashed white; width:100%; left:0%;}
.tag-container > div > div:nth-child(1){ position:absolute; bottom:58%;  left:-1%; font-size:1.2vw; }
.tag-container > div > div:nth-child(2){ position:absolute; top:60%; left:-1%; font-size:1.2vw; }


.tag-container{ clip-path:polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);  transition:clip-path 400ms cubic-bezier(0,.48,.27,1);  }
.tag-container.active { clip-path:polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%); transition:clip-path 400ms  cubic-bezier(0,.48,.27,1); }



#hammer-a.zoom .tag-container{   transition-delay:450ms;   }
#hammer-b.zoom .tag-container{  transition-delay:500ms}
#hammer-c.zoom .tag-container{ transition-delay:550ms; }