@charset "UTF-8";
/* CSS Document */

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; 
}
body.flat{ background:#fff;  }

img{ border:none; padding:0; margin:0;  }
a{ font-size:inherit; color:inherit; /*text-decoration:none;*/ -webkit-tap-highlight-color:rgba(0,0,0,0);  }
body, html, div, select, input, textarea, img, span{ font-family:'Noto Sans TC','Arial', sans-serif; -webkit-tap-highlight-color:rgba(0,0,0,0); }

h1,h2,h3,h4{ font-weight:inherit; font-size:inherit; line-height:inherit; margin:0; padding:0; display:inherit; }
p{ margin:0 0 1em 0; }

input{ background-color:transparent; border:none; color:#fff;  }
input:focus, textarea:focus{ outline:none;    }
input:-webkit-autofill, input:-webkit-autofill:focus, input:-webkit-autofill:hover {
    background:#111; -webkit-box-shadow:inset 0 0 0px 9999px #111; box-shadow:inset 0 0 0px 9999px #111; color:#ffffff; -webkit-text-fill-color:#ffffff !important;
}

ul, li{  padding:0; margin-left:0.8em; list-style-type: decimal; }
ol, ol li{ margin-left:0; padding-left:0; }
ol{ margin-left:0em; margin-top:0; }
ol li{ margin-bottom:0em; list-style-position:inside;  }
ul li{ margin-bottom:0.75em }
ul li:last-child{ margin-bottom:0em }

button{ padding:0; margin:0; border:none; font-family:inherit; font-size:inherit; font-weight:inherit; color:inherit; line-height:1; cursor:pointer; background:transparent }

#canvasQR{ position:absolute; left:-1000vw; z-index:10; background:red; pointer-events:none; opacity:0.5 }

.clear{ clear:both; }
.bg-contain{ background-repeat:no-repeat; background-size:contain; background-position:center;  }
.bg-child{ width:100%; height:100%; top:0; left:0; position:absolute; }
.bg-ani-linear{  animation-iteration-count:infinite; animation-timing-function:linear; }
 
.desktop-only{display:none }
.mobile-only{  }

/* text style */
.txt-black{ color:#000; }
.txt-white{ color:#fff; }
.txt-grey{ color:#464646; }
.txt-lightgrey{ color: #B0B0B0; }

.txt-bold{ font-weight:800; }

.txt-giant{ font-size:3.5em; }
.txt-big{ font-size:1.6em; }
.txt-hl{ font-size:1.2em;  }
.txt-small{ font-size:0.9em; }
.txt-mini{ font-size:0.8em; }


.txt-hl .lang-en{ font-size:.9em; }
.txt-inter{ font-family: 'Inter', 'Noto Sans TC', sans-serif; }
/* text style */


/* header */
.stars-container, .crosses-container, .papers-container{ position:absolute; width:100%; left:0; top:0; height:55%; pointer-events:none }
.star-container, .cross-container, .paper-container{ position:absolute; }
.star-container {  background:radial-gradient(#9b9b9b, #222); border-radius:1000px; mix-blend-mode:color-dodge; animation:ani-star 3s infinite alternate; filter:blur(0.1em); }
@keyframes ani-star{
	0%{ transform:scale(1); filter:blur(0.1em); }
	50%{ transform:scale(.9);  filter:blur(0.15em);  }
	100%{transform:scale(1); filter:blur(0.1em);  }
}

.crosses-container{  mix-blend-mode:screen; height:25%; }
.cross-container{ background-image:url("../img/cross.png"); background-size:contain; background-repeat:no-repeat; }

.papers-container{  height:100%; overflow:hidden}
.paper-container{ background-image:url("../img/paper-a.png"); background-size:contain; background-repeat:no-repeat; animation:ani-paper 11s infinite linear; width:2em; height:2em }

.paper-container.type-b{ background-image:url("../img/paper-b.png");  }
.paper-container.type-c{ background-image:url("../img/paper-c.png");  }
.paper-container.type-d{ background-image:url("../img/paper-d.png");  }

@keyframes ani-paper{
	0%{ transform:translateY(-100%) rotateX(0) rotateY(0); }
	100%{transform:translateY(calc(100vh)) rotateX(300deg) rotateY(720deg);  }
}
/* header */


/* common */

.page-container{  position:absolute; width:100%; height:100%; min-height:900px; display:flex; justify-content:center; align-items:center; overflow:hidden; border:0px solid #ff0; background: rgb(132,142,214); background: linear-gradient(180deg, rgba(132,142,214,1) 0%, rgba(107,188,241,1) 12%, rgba(163,225,240,1) 32%); opacity:0; pointer-events:none }
.page-container-inner{  position:relative; margin:auto; width:90%; text-align:center; border:0px solid #f00;}

.page-container.active{ opacity:1; pointer-events:all; }


.btw-button{ line-height:1; font-weight:500; padding:0.7em 0.75em 0.8em 0.75em; background:#F06D21; border-radius:10em; min-width:9em; letter-spacing:.1em; box-shadow: 0px .25em 0px 0px #AA4D1E; height:2.5em; vertical-align:middle   }
.btw-button span{ font-size:1.2em; font-family: 'burn'; line-height:1;  }


.btw-button.disabled{ pointer-events:none;   background:#B6B4B4; box-shadow: 0px .25em 0px 0px #808080;}
.btw-button.invisible{ pointer-events:none; opacity:0; }


.form-title span{ font-weight:600}
/* common */




/* section */
.overlay-container{ position:fixed; width:100%; height:calc(100% - 0em);  top:0; left:0; background: rgba(0, 0, 0, 0.6);
background-blend-mode: screen; overflow:auto; transform:translate(-1000%,0); opacity:0;  transition:transform 0ms 400ms, opacity 200ms 300ms linear }
.overlay-container.active{ transform:translate(0,0); opacity:1; transition:transform 0ms 0ms, opacity 200ms linear}
.overlay-container-inner{  padding:2em 0em; width:100%; position:relative; min-height:calc(100% - 4em); display:flex; align-items:center; }

.overlay-close{ position:absolute; right:0; top:0; border-radius:1000px; border:3px solid #000; width:3.5em; height:3.5em; background:#fff; transform:translate(40%, -40%)}
.overlay-close > div{ position:absolute; top:50%; left:50%; background:#000; width:3px; height:66%; border-radius:100px; transform:translate(-50%, -50%) rotate(-45deg)}
.overlay-close > div:nth-child(2){ transform:translate(-50%, -50%) rotate(45deg)}

.overlay-container-body{ background:#00764d; border:3px solid #000; padding:2em 1em; margin:0em auto; border-radius:1.5em; width:calc(80% - 2em); max-width:640px; position:relative;   }
.overlay-container .tnc-button-inner{ pointer-events:none }

.overlay-panel-container{ border-radius: 2em; background:rgba(62, 188, 237, 0.95); height:auto; width:calc(100% - 6em); margin:auto; padding:2.5em 0 2.5em 0; text-align:center; transform:translate(0,100vh); transition:transform 400ms  }
.overlay-panel-container .btw-button{ display:block; margin:auto; margin:1.5em auto 1em auto}

.overlay-container.active .overlay-panel-container{  transform:translate(0,0) }
/* section */



/* KV */
.key-visual-container{ position:absolute; width:100%; padding-bottom:70%; left:0; top:55%; pointer-events:none;  }
.key-visual-store-container{  width:100%; height:90%; left:0%;  }
.key-visual-cloud-container{ height:150%; min-height:calc(60vh); background-repeat:no-repeat; background-size:cover; background-position:top center;   }
.key-visual-carpet-container, .key-visual-carpet-clouds-container{ top:57.5%; height:60%;  background-size:cover; background-position:top center }
.key-visual-rainbow-container{ top:-24%; height:50%; width:90%; left:4%; background-position:center top;   }
 
.key-visual-carpet-clouds-container > div{ background-image:url("../img/clouds.png"); top:100%; background-position:top center; background-size:100% auto; /*height:calc(59vh - 50vw - 70vw - 0px);*/ background-repeat:no-repeat;  transform:translateY(-50%); width:100%; padding-bottom:66.9%; height:0;  }
.key-visual-carpet-clouds-container{ animation:ani-float 1s 0ms infinite alternate linear; }

.key-visual-deco-container{ position:absolute; }
.key-visual-deco-container > div{ width:100%; position:absolute; top:0; left:0;  transform:translate(-50%, 0%) scale(0) }

.key-visual-deco-container.sim-card{ width:10%; left:80%; top:calc(0px - 30%); }
.key-visual-deco-container.sim-card > div{ padding-bottom:142.7%; background-image:url("../img/8K_Sim.png"); transform:translate(-50%,-50%) scale(0) }

.key-visual-deco-container.tissue{ width:19%; left:90%; top:calc(0px + 12%); }
.key-visual-deco-container.tissue > div{ padding-bottom:89%; background-image:url("../img/8K_Tissue.png"); }

.key-visual-deco-container.beer{ width:25%; left:73%; top:calc(45%); }
.key-visual-deco-container.beer > div{ padding-bottom:89%; background-image:url("../img/8K_Beer.png");  }

.key-visual-deco-container.ice-cream{ width:18%; left:85%; top:calc(68%); }
.key-visual-deco-container.ice-cream > div{ padding-bottom:136.8%; background-image:url("../img/8K_Icecream.png");  }

.key-visual-deco-container.chips{ width:21%; left:13%; top:calc(62%); }
.key-visual-deco-container.chips > div{ padding-bottom:128.4%; background-image:url("../img/8K_chips.png"); }

.key-visual-deco-container.cafe{ width:19%; left:25%; top:calc(42%); }
.key-visual-deco-container.cafe > div{ padding-bottom:128.4%; background-image:url("../img/8K_Cafe.png");  }

.key-visual-deco-container.candy{ width:16%; left:6%; top:calc(25%); }
.key-visual-deco-container.candy > div{ padding-bottom:102.4%; background-image:url("../img/8K_Candy.png"); }

.key-visual-deco-container.bar{ width:12%; left:11%; top:calc(-15%); }
.key-visual-deco-container.bar > div{ padding-bottom:119.7%; background-image:url("../img/8K_Bar.png"); transform:translate(-50%,-50%) scale(0) }

.spaceship-avatar{ position:absolute; width:24%; top:30%; left:4%; transform:scale(0) translateX(-90%); }
.spaceship-avatar:nth-child(even){  width:24%; top:3%; right:5%; left:auto}
.spaceship-avatar > div{ position:absolute; width:100%; padding-bottom:100%; top:0; left:0; animation:ani-float-em 1s 1300ms infinite alternate linear; pointer-events:none }


.active .spaceship-avatar{ transform:scale(1) translateX(0%); transition:transform 600ms 1500ms  }
.active .spaceship-avatar:nth-child(even){ transition:transform 700ms 1000ms  }

.page-container.home.countdown.active  .key-visual-deco-container > div{ transform:translate(-50%, 0%) scale(0)!important; opacity:0; transition:opacity 400ms 0ms, transform .5s 0s cubic-bezier(0,.48,.27,1)}

.page-container.home.countdown.active  .spaceship-avatar{  transform:scale(0) translateX(90%)!important; transition-delay:0.1s!important; transition-duration:400ms!important   }

.page-container.home.countdown.active  .home-intro-container{ opacity:0; transform:translateY(-2em);  transition:opacity .5s 0ms linear, transform 500ms 0ms cubic-bezier(0,.48,.27,1)}

.page-container.home.countdown.active .key-visual-rainbow-container{  clip-path:circle(0%);  transform:translateY(15%) scale(0.5); transition:clip-path 400ms 200ms, transform 400ms 200ms cubic-bezier(0,.48,.27,1) }

.page-container.home.countdown.active .key-visual-store-container{ transform:translateY(20%) scale(0.7); transition: transform 800ms 200ms cubic-bezier(0,.48,.27,1);   }
.page-container.home.countdown.active .key-visual-carpet-container{ transform:translateY(9%) scale(0.7); transition: transform 800ms 200ms cubic-bezier(0,.48,.27,1) }

.page-container.home.countdown.active .key-visual-cloud-container{ opacity:0; transform:translateY(33%); transition:opacity 600ms 100ms linear, transform 1000ms 100ms cubic-bezier(0,.48,.27,1)}
.page-container.home.countdown.active .key-visual-carpet-clouds-container > div{ transform:translateY(-45%); transition:transform 1000ms 100ms cubic-bezier(0,.48,.27,1)}

.earth-container{ position:absolute; width:200vw; height:200vw; left:50%; top:calc(75% - 0vw); opacity:0;  transform:translate(-50%,6%); background-image:url("../img/table/earth-back.png"); background-size:contain; background-position:center; background-repeat:no-repeat; background-blend-mode: screen; pointer-events:none;  
 }
@keyframes ani-earth{
	0%{ transform: rotate(0); }
	100%{transform: rotate(359deg);  }
}
.earth-container > div{ animation:ani-earth 60s infinite linear; }
.earth-container > div > div{  background-image:url("../img/table/earth.png"); background-size:contain; background-position:center; background-repeat:no-repeat;  }

.page-container.home.countdown.active .earth-container{ top:55%; opacity:1;  transition:opacity 600ms 300ms linear, top 1000ms 300ms cubic-bezier(0,.48,.27,1) }

.game-intro-container{ position:absolute; width:90%; left:5%; top:0em; display:flex; text-align:center; align-items:center; height:calc(65% - 0em - 0vw); opacity:0; transform:translateY(2em); pointer-events:none;  }
.game-intro-container-inner{ width:100% }

.table-no-container{
	line-height:1; padding:.6em 0; width:12em; margin:0 auto 1em auto ;font-family: 'burn'; font-size:1.5rem;
	border-radius: 1rem;
border: 2px solid #FFF000;
background: linear-gradient(90deg, #FF4301 0%, #FF8301 100%);
box-shadow: 0px .2em 0px 0px #93502A;
}


.page-container.home.countdown.active .game-intro-container{  opacity:1; transform:translateY(0em); transition:opacity 500ms 500ms linear, transform 500ms 500ms cubic-bezier(0,.48,.27,1)}

.table-countdown-container{ width:10em; height:10em; position:relative; margin:auto; }
.table-countdown-container-label{ position:absolute; width:100%; left:0; text-align:center; top:50%; transform:translateY(-50%); height:1em; font-family: 'burn'; font-size:1.8rem;}
.table-countdown-container-bg{ background-image:url("../img/table/clock.png"); background-size:contain; background-position:center; background-repeat:no-repeat;}
.table-countdown-container-bg.active{  animation:ani-clock 1s 0s 60;}
@keyframes ani-clock{
	0%{ transform:rotate(0); }
	100%{transform:rotate(359deg);  }
}
/* KV */


/* GAME */
.page-container.home.gaming.active .game-intro-container{ transform:scale(0); transition:transform 400ms }
.page-container.home.countdown.gaming.active .key-visual-store-container{ transform:translateY(150%) scale(0.7); opacity:0; transition:opacity 600ms linear, transform 600ms cubic-bezier(0,.48,.27,1); }
.page-container.home.countdown.gaming.active .key-visual-carpet-container{ transform:translateY(150%) scale(0.7); opacity:0; transition:opacity 500ms linear, transform 500ms cubic-bezier(0,.48,.27,1); }
.page-container.home.countdown.gaming.active .key-visual-carpet-clouds-container > div{ transform:translateY(50%); opacity:0; transition:opacity 400ms linear, transform 400ms 0ms cubic-bezier(0,.48,.27,1); }
.page-container.home.countdown.gaming.active .earth-container{ top:75%; transform-origin:top center;transform:translate(-50%,6%) scale(0.6); transition: transform 600ms cubic-bezier(0,.48,.27,1), top 600ms cubic-bezier(0,.48,.27,1)  }

.game-bg-container{ position:absolute; background-image:url("../img/table/bg.jpg"); background-repeat:no-repeat; background-size:100% auto; background-position:center bottom; width:100vw; height:798vw; bottom:0; opacity:0; }

.game-bg-container.active{  animation:ani-game-bg 61s 0s 1 linear; animation-fill-mode: forwards;}

@keyframes ani-game-bg{
	0%{ transform:translateY(0); }
	100%{transform:translateY(calc(100% - 100vh));  }
}

.page-container.home.countdown.gaming.active .game-bg-container{ opacity:1; transition:opacity 600ms linear}

.game-header{ position:fixed; width:100vw; height:19.4vw; background-image:url("../img/table/header.png"); background-repeat:no-repeat; background-size:100% auto; background-position:center top; left:0; top:0; transform:translateY(-100%); pointer-events:none}
.game-header > div{ font-family: 'burn'; line-height:1; position:absolute; top:50%; transform:translateY(-55%); height:1em; font-size:1.5em; text-shadow: 0px 2px 0px #707070; }
.game-header > div:nth-child(1){ left:22.5%}
.game-header > div:nth-child(2){ left:81%}

.page-container.home.countdown.gaming.active .game-header{ transform:translateY(0%); transition:transform 400ms 200ms }


.game-overlay{ position:fixed; width:100%; height:100%; top:0; left:-1000vw; background:rgba(0, 0, 0, 0.60); opacity:0 }
.page-container.home.countdown.gaming.active .game-overlay{ left:0; opacity:1;  transition:opacity 400ms 200ms linear}

.game-overlay > div:nth-child(1){ font-family: 'burn'; line-height:1; position:absolute; top:50%; width:100%; left:0; text-align:center; font-size:5em; transform:translateY(-50%);}

.page-container.home.countdown.gaming.active .game-overlay > div:nth-child(1){ animation:ani-game-countdownthree 1s 0s 3 ; }
@keyframes ani-game-countdownthree{
	0%{ transform:translateY(-50%) scale(2); }
	50%{transform:translateY(-50%) scale(1);  }
}

.game-start{ position:absolute; width:20em; max-width:90vw; transform:translate(-50%,-50%) scale(2); opacity:0; top:50%; left:50%;}
.game-start.active{ transform:translate(-50%,-50%) scale(1);  opacity:1; transition:transform 500ms 0ms  }

.ufo-container{ position:absolute; background-repeat:no-repeat; background-size:contain; background-position:center; background-image:url("../img/table/ufo.png"); transform:translate(-50%,-60%); left:50%; top:80%; width:44vw; height:44vw; opacity:0}

.global-light{ mix-blend-mode:screen; width:100%; background-repeat:no-repeat; background-size:contain; background-position:center; background-image:url("../img/table/globe-light.png"); height:100%; position:absolute; top:86%; transform:translateY(-50%); opacity:0}


.page-container.home.countdown.gaming.active .ufo-container{  opacity:1; transform:translate(-50%,-70%);  transition:opacity 500ms 600ms linear, transform 500ms 600ms }
.page-container.home.countdown.gaming.active .global-light{  opacity:1;  transition:opacity 700ms 500ms linear; animation:ani-game-light 3s 1.2s infinite ;}
@keyframes ani-game-light{
	0%{ opacity:1}
	50%{opacity:0.9;  }
	100%{opacity:1;  }
}

.flare-container{ background-image:url("../img/table/flare.png");	mix-blend-mode:screen; background-blend-mode:screen; position:absolute; width:70%; height:60%; top:50%; left:50%; background-repeat:no-repeat; background-size:contain; background-position:center; transform:translate(-50%,-50%) scale(0); animation:ani-game-flare .6s 0s 1; animation-fill-mode:forwards;  }
@keyframes ani-game-flare{
	0%{  transform:translate(-50%,-50%) scale(0); opacity:0}
	20%{  transform:translate(-50%,-50%); opacity:1 }
	80%{  transform:translate(-50%,-50%); opacity:1 }
	100%{ transform:translate(-50%,-50%); opacity:0;  }
}

.coins-container, .congrats-coins-container{ position:absolute; width:100%; height:100%; top:0; left:0; overflow:hidden; pointer-events:none; }
.coin-container{  position:absolute; top:0%; transform:translateY(-100%); width:16vw; height:16vw;  animation:ani-game-coin 26s 0s 1 linear; animation-fill-mode:forwards}
.coin-container > div{ position:absolute; width:100%; height:100%; top:0; left:0; background-repeat:no-repeat; background-size:contain; background-position:center;  }

.coin-container:before{  background-image:url("../img/table/flare.png");	mix-blend-mode:screen; background-blend-mode:screen; position:absolute; width:100%; height:100%; top:0; left:0; background-repeat:no-repeat; background-size:contain; background-position:center; transform:scale(2)  }

.coin-container > div:nth-child(2){background-image:url("../img/table/game_reaction_great.png"); width:200%; top:0; transform:translateY(-50%); opacity:0; left:-50%;}
.coin-container > div:nth-child(1){ background-image:url("../img/table/coin.png");	 }

.coin-container.pause{ animation:none; opacity:0; transition:opacity 400ms .2s  }
.coin-container.pause > div:nth-child(2){  animation:ani-game-great .3s 0s 1; animation-fill-mode:forwards; }
@keyframes ani-game-great{
	0%{ transform:translateY(-50%); opacity:0; }
	100%{ transform:translateY(-100%); opacity:1;  }
}


@keyframes ani-game-coin{
	0%{ transform:translateY(-100%); } 
	100%{transform:translateY(101vh); }
}


.page-container.home.countdown.gaming.finish.active .ufo-container{ opacity:0; transition-delay:0s;  }
.page-container.home.countdown.gaming.finish.active .global-light{ opacity:0; animation:none}
.page-container.home.countdown.gaming.finish.active .game-bg-container{ opacity:0; transition:opacity 600ms linear}
.page-container.home.countdown.gaming.finish.active .game-header{  transform:translateY(-100%); }
.page-container.home.countdown.gaming.finish.active .coins-container{ opacity:0; }
 
.page-container.home.countdown.gaming.finish.active .key-visual-carpet-clouds-container > div{ transform:translateY(-45%); opacity:1; transition:opacity 400ms 100ms linear, transform 400ms 100ms cubic-bezier(0,.48,.27,1); }
.page-container.home.countdown.gaming.finish.active .key-visual-store-container{ transform:translateY(50%) scale(0.7); transition:opacity 400ms 200ms linear,  transform 800ms 200ms cubic-bezier(0,.48,.27,1); opacity:1;  }
.page-container.home.countdown.gaming.finish.active .key-visual-carpet-container{ transform:translateY(50%) scale(0.7); transition:opacity 400ms 200ms linear,  transform 800ms 200ms cubic-bezier(0,.48,.27,1); opacity:1; }

.page-container.home.countdown.gaming.finish.active .key-visual-cloud-container{ opacity:1; transform:translateY(30%); transition:opacity 400ms 0ms linear, transform 400ms 0ms cubic-bezier(0,.48,.27,1)}


.page-container.home.countdown.gaming.finish.active .earth-container{ top:calc(75% - 0vw); opacity:0;  transform:translate(-50%,6%); transition: transform 600ms cubic-bezier(0,.48,.27,1), top 600ms cubic-bezier(0,.48,.27,1)  }

.page-container.home.countdown.gaming.finish.active .key-visual-rainbow-container{ clip-path:circle(100%); transform:translateY(120%) scale(0.65); transition:clip-path 800ms 400ms, transform 800ms 400ms cubic-bezier(0,.48,.27,1)  }

.finish-container{ width:75%; position:absolute; left:12.5%; top:4%; pointer-events:none; opacity:0; transform:translateY(100%) scale(0); }
.page-container.finish .finish-container{  opacity:1; transform:translateY(0%); transition: transform 400ms 300ms cubic-bezier(0,.48,.27,1), opacity 400ms 300ms linear; animation:ani-game-finish 1s 700ms infinite; }
@keyframes ani-game-finish{
	0%{ transform:scale(1); } 
	50%{transform:scale(0.95); }
	100%{ transform:scale(1); }
}


.finish-panel-container{ width:80vw; height:91.2vw; background-repeat:no-repeat; background-size:contain; background-position:center; background-image:url("../img/table/panel.png"); position:absolute; left:10vw; top:calc(39% + 0em); transform:translateY(-25%);  pointer-events:none; opacity:0; ;}

.page-container.finish .finish-panel-container{  opacity:1; transform:translateY(-50%); transition: transform 400ms 400ms cubic-bezier(0,.48,.27,1), opacity 400ms 400ms linear }


.panel-ufo-container{ background-repeat:no-repeat; background-size:contain; background-position:center top; background-image:url("../img/table/ufo.png");  width:42%; top:100%; height:50%; position:absolute; left:29%; transform:translateY(-38%); opacity:0}
.page-container.finish .panel-ufo-container{  opacity:1; transform:translateY(-48%); transition: transform 400ms 500ms cubic-bezier(0,.48,.27,1), opacity 400ms 500ms linear; 
animation:ani-game-panel-ufo 2s 900ms infinite alternate; }

@keyframes ani-game-panel-ufo{
	0%{ transform:translate(0%, -48%); } 
	24%{transform:translate(-40%, -48%); }
	50%{transform:translate(0%, -48%); }
	75%{transform:translate(40%, -48%); }
	100%{transform:translate(0%, -48%); }
}

.panel-ufo-container > div{ position:absolute; width:55%; padding-bottom:55%;  background-repeat:no-repeat; background-size:contain; background-position:center top; background-image:url("../img/table/coin.png"); left:50%; bottom:100%; transform:translate(-48%, 10%)}

.panel-table-container, .panel-rank-container{ position:absolute; text-align:center; font-family: 'burn'; line-height:1; width:100%; left:0; font-size:7vw; transform:translateY(-50%); top:13%}



.page-container.home.countdown.gaming.finish.active .game-overlay{ display:none}
.page-container.home.countdown.gaming.finish.ranking.active .finish-container{ animation:none; transform:scale(0)}
.page-container.home.countdown.gaming.finish.ranking.active .finish-panel-container{ display:none}


.ranking-panel-container{ width:80vw; height:104vw; background-repeat:no-repeat; background-size:contain; background-position:center; background-image:url("../img/table/ranking-panel.png"); position:absolute; left:10vw; top:calc(37% + 0em); transform:translateY(-25%);  pointer-events:none; opacity:0; pointer-events:none;}
.ranking-panel-container .panel-table-container{ top:7%}
.ranking-panel-container .panel-ufo-container{ width:40%; left:30%; top:105%}

.congrats-container{ width:80%; position:absolute; left:10%; top:2.5%; pointer-events:none; opacity:0; transform:translateY(100%) scale(0);pointer-events:none; }
.page-container.congrats .congrats-container{  opacity:1; transform:translateY(0%); transition: transform 400ms 300ms cubic-bezier(0,.48,.27,1), opacity 400ms 300ms linear; animation:ani-game-finish 1s 700ms infinite; }
.page-container.congrats .ranking-panel-container{ background-image:url("../img/table/congrats-panel.png"); }

.page-container.ranking .ranking-panel-container{  opacity:1; transform:translateY(-50%); transition: transform 400ms 0ms cubic-bezier(0,.48,.27,1), opacity 400ms 0ms linear }

.panel-rank-container{ font-size:26vw; top:53% }


.ranking-panel-container .flare-container{ width:95%; height:100%; top:50%; left:50%;   transform:translate(-50%,-50%) scale(1);  }
.page-container.ranking .ranking-panel-container .flare-container{ animation:ani-game-flare-rank 2s 0s infinite; opacity:1!important; }
@keyframes ani-game-flare-rank{
	0%{  transform:translate(-50%,-50%) scale(1); opacity:1}
	50%{  transform:translate(-50%,-50%) scale(0.99); opacity:.8 }
	100%{ transform:translate(-50%,-50%) scale(1); opacity:1;  }
}

/* GAME */



/* landing */
.page-container.home.inactive .home-intro-container, .page-container.avatar.tix .key-visual-rainbow-container, .page-container.avatar.tix .avatar-option-container{ display:none!important}


.home-intro-container{ position:absolute; width:90%; left:5%; top:0em; display:flex; text-align:center; align-items:center; height:calc(55% - 0em - 15vw);  }
.home-intro-txt-container, .home-intro-container-inner{  width:100%}
.home-intro-txt-container > img:nth-child(1){ margin-bottom:.5em}
.qrcode-container{ position:relative; margin:1em auto 0em auto; background:#fff; width:8em; height:8em}

.home-desktop-intro-container{ display:none; opacity:0; }

.page-container.home{ opacity:1; position:relative}
.key-visual-container > div, .home-intro-container, .stars-container > div, .crosses-container > div, .papers-container{ opacity:0 }
.page-container.home .key-visual-store-container{ transform:translateY(15%) scale(0.95); }
.page-container.home .key-visual-banner-container{ opacity:1; clip-path:polygon(50% 0%, 50% 0%, 50% 100%, 50% 100%);   }
.page-container.home .key-visual-rainbow-container{ opacity:1; clip-path:circle(0%);  transform:translateY(15%) scale(0.5);   }

.page-container.home.active .stars-container > div, .page-container.avatar .stars-container > div{ opacity:1; transition:opacity 300ms linear}
.page-container.home.active .crosses-container > div, .page-container.avatar .crosses-container > div{ opacity:1; transition:opacity 500ms 100ms linear}
.papers-container.active{ opacity:1;transition:opacity 500ms 400ms linear}

.page-container.home.active .key-visual-cloud-container, .page-container.home.active .key-visual-carpet-clouds-container{ opacity:1; transition:opacity 500ms 0ms linear}
.page-container.home.active .key-visual-store-container{ opacity:1; transform:translateY(0); transition:opacity 200ms 200ms linear, transform 800ms 200ms cubic-bezier(0,.48,.27,1) }
.page-container.home.active .key-visual-store-container > div{  animation:ani-float 2s 500ms infinite alternate linear; }

.page-container.home.active .key-visual-rainbow-container{ clip-path:circle(100%); transform:translateY(0%) scale(1); transition:clip-path 800ms 600ms, transform 800ms 600ms cubic-bezier(0,.48,.27,1)  }
.page-container.home.active .key-visual-rainbow-container > div{  animation:ani-float 1s 1300ms infinite alternate linear; }

.page-container.home .key-visual-carpet-container{ overflow:hidden;  }
.page-container.home .key-visual-carpet-container > div{  transform:translateY(-100%) scale(0.2); transform-origin:bottom center; }
.page-container.home.active .key-visual-carpet-container{ opacity:1; transition:opacity 0s 500ms; }
.page-container.home.active .key-visual-carpet-container > div{ transform:translateY(0%); transition: transform 1100ms 600ms cubic-bezier(0,.48,.27,1); animation:ani-float 2s 500ms infinite alternate linear;  }


.key-visual-deco-container > div{ transition:opacity 0s 500ms, transform .6s .5s cubic-bezier(0,.48,.27,1)  } 
.page-container.home.active .key-visual-deco-container { opacity:1; animation:ani-float-em 2s 500ms infinite alternate linear; }
.page-container.home.active .key-visual-deco-container > div {  transform:translate(-50%,0);  }
.page-container.home.active .key-visual-deco-container.sim-card > div, .page-container.home.active .key-visual-deco-container.bar > div {  transform:translate(-50%,-50%); }


.key-visual-deco-container.sim-card > div{ transition-delay:600ms;  }
.key-visual-deco-container.tissue > div{ transition-delay:650ms; }
.key-visual-deco-container.beer > div{ transition-delay:700ms; }
.key-visual-deco-container.ice-cream > div{ transition-delay:750ms; }
.key-visual-deco-container.chips > div{ transition-delay:850ms; }
.key-visual-deco-container.cafe > div{ transition-delay:950ms; }
.key-visual-deco-container.candy > div{transition-delay:1100ms; }
.key-visual-deco-container.bar > div{ transition-delay:1300ms; }


.home-intro-container{  transform:translateY(1em); } 
.home-intro-container .btw-button{ transform:translateY(.5em); left:-100vw; position:relative; }
.page-container.home.active .home-intro-container{ opacity:1; transform:translateY(0); transition:opacity .5s 1200ms linear, transform 800ms 1200ms cubic-bezier(0,.48,.27,1)}
.page-container.home.active .home-intro-container .btw-button{ left:0; opacity:1; transform:translateY(0); transition:left 0s 1400ms linear, opacity .4s 1400ms linear, transform 500ms 1400ms cubic-bezier(0,.48,.27,1)}


@keyframes ani-float{
	0%{ transform:translateY(0%); }
	100%{transform:translateY(-1%);  }
}
@keyframes ani-float-five{
	0%{ transform:translateY(0%); }
	100%{transform:translateY(5%);  }
}
@keyframes ani-float-ten{
	0%{ transform:translateY(0%); }
	100%{transform:translateY(-10%);  }
}
@keyframes ani-float-em{
	0%{ transform:translateY(0%); }
	100%{transform:translateY(-.5em);  }
}
/* landing */



@media only screen and (min-width:1024px) {
	
}
@media only screen and (min-width:0px)  and (max-width:1023px) {
}
@media only screen and (min-width:0px)  and (max-width:768px) {
	.page-container{ min-height:165vw; }
}


@media only screen and (min-width:0px) and (max-width:479px) {
	html,body{  font-size:13px; }
}

@media only screen and (min-width:480px) and (max-width:768px) {
	html,body{  font-size:13px; }
}

@media only screen and (min-width:767px)  and (max-width:1023px) {
	html,body{  font-size:14px; }
}

@media only screen and (min-width:1024px) and (max-width:1279px) {
	html,body{  font-size:15px; }
	 
	.page-container{   min-height:800px; }
}

@media only screen and (min-width:1280px) and (max-width:1599px) {
	html,body{  font-size:16px; }
	.txt-hl{ font-size:1.3em }
	 
	.page-container{   min-height:900px; }
}
@media only screen and (min-width:1600px) {
	html,body{  font-size:17px; }
	.txt-hl{ font-size:1.4em }
}



.loader-container{ position:fixed; width:100%; height:100%; top:0; left:0; text-align:center; align-items:center; background:rgba(62, 188, 237, 0.9);display:none}
.loader-container-inner{ text-align:center; margin:auto; font-family: 'Inter', 'Noto Sans TC', sans-serif;  }
.loader-container.active{ display:flex}