@charset "UTF-8";
html,body{  
	font-size:16px;
	font-weight:500;
	font-family:'Noto Sans TC','Arial','burn11', sans-serif;
	
	color:#fff; 
	background: linear-gradient(180deg, rgba(132,142,214,1) 0%, rgba(107,188,241,1) 22%, rgba(163,225,240,1) 62%);
	
 	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; 
}

.txt-how{ font-size:.57vw;line-height: 1.3;letter-spacing:0.05em}
.txt-black{ font-weight:700}
.txt-burn{font-family: 'burn11'; }

.bg-contain{ background-repeat:no-repeat; background-size:contain; background-position:center;  }
.bg-child{ width:100%; height:100%; top:0; left:0; position:absolute; }

.page-container{ position:fixed; width:100%; height:100%; top:0; left:0; overflow:hidden; }



.stars-container, .crosses-container, .papers-container{ position:absolute; width:100%; left:0; top:0; height:30%!important; pointer-events:none; overflow-x:hidden}
.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.1vw); }
@keyframes ani-star{
	0%{ transform:scale(1); filter:blur(0.1vw); }
	50%{ transform:scale(.9);  filter:blur(0.15vw);  }
	100%{transform:scale(1); filter:blur(0.1vw);  }
}

.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%!important; 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:2vw; 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);  }
}




/* landing */

.landing-page-container .logotype-container{position:absolute; width:50%; left:25%; top:14%}
.landing-page-container .logo-container{position:absolute; width:19.6%; left:40.2%; top:6.3%}     


.seven-container{position:absolute; width:41.6%; left:29.2%; top:35%; padding-bottom: 100%}

.seven-container > div:nth-child(1){position:absolute; width:100%;}
.seven-container > div:nth-child(2){position:absolute; width:97%;left:1.5% ;top:6.8%}
.seven-container > div:nth-child(3){position:absolute; width:35%;left:32.5% ;top:25.2% }


.coins-container > div:nth-child(1){position:absolute; width:6%; left:19%; top:14% ;transform: rotate(-10deg)}
.coins-container > div:nth-child(2){position:absolute; width:3.3%; left:25%; top:10%;transform: rotate(10deg); }
.coins-container > div:nth-child(3){position:absolute; width:4%; left:75%; top:13%;transform: rotate(10deg);  }
.coins-container > div:nth-child(4){position:absolute; width:4%; left:23%; top:33%;transform: rotate(-10deg); }
.coins-container > div:nth-child(5){position:absolute; width:2.4%; left:29%; top:34.7%;transform: rotate(10deg);  }
.coins-container > div:nth-child(6){position:absolute; width:6%; left:68%; top:33%;transform: rotate(10deg);z-index: 1;  }


.shop-container > div:nth-child(1){position:absolute; width:12%; left:3.9%; bottom:-7% ;animation:ani-shop 3.5s linear infinite alternate; display:none}
.shop-container > div:nth-child(2){position:absolute; width:11%; left:11.2%; bottom:41% ;animation:ani-shop 2s linear infinite alternate; display:none}
.shop-container > div:nth-child(3){position:absolute; width:7.6%; left:12.5%; top:25% ;animation:ani-shop 1.5s linear infinite alternate;}
.shop-container > div:nth-child(4){position:absolute; width:22.4%; left:6.6%; top:51% ;animation:ani-shop 2.5s linear infinite alternate;}
.shop-container > div:nth-child(5){position:absolute; width:23.7%; left:69%; top:55% ;animation:ani-shop 3s linear infinite alternate;}
.shop-container > div:nth-child(6){position:absolute; width:8.8%; left:82.8%; top:25% ;animation:ani-shop 1.5s linear infinite alternate;}
.shop-container > div:nth-child(7){position:absolute; width:12.9%; right:13.5%; bottom:19% ;animation:ani-shop 2.5s linear infinite alternate; display:none}
.shop-container > div:nth-child(8){position:absolute; width:6%; right:5%; bottom:44% ;animation:ani-shop 2s linear infinite alternate; display:none}


.avatar-container > div:nth-child(1){position:absolute; width:5%; left:-1.4%; bottom:34%;animation:ani-avatar-leftup 4s linear infinite alternate;}
.avatar-container > div:nth-child(2){position:absolute; width:3%; left:1.5%; top:12%;animation:ani-avatar-leftdown 4s linear infinite alternate;}
.avatar-container > div:nth-child(3){position:absolute; width:5%; left:18.5%; top:2%;animation:ani-avatar-leftdown 4s linear infinite alternate;}
.avatar-container > div:nth-child(4){position:absolute; width:6%; left:20%; bottom:2%;animation:ani-avatar-leftup 4s linear infinite alternate;}
.avatar-container > div:nth-child(5){position:absolute; width:3.5%; right:24%; top:6%;animation:ani-avatar-rightdown 4s linear infinite alternate;}
.avatar-container > div:nth-child(6){position:absolute; width:5%; right:20%; top:8%;animation:ani-avatar-rightdown 4s linear infinite alternate;}
.avatar-container > div:nth-child(7){position:absolute; width:6.5%; right:1.5%; bottom:-5.5%;animation:ani-avatar-rightup 4s linear infinite alternate;}
.avatar-container > div:nth-child(8){position:absolute; width:4%; right:-0.3%; bottom:11%;animation:ani-avatar-rightup 4s linear infinite alternate;}


.cloud-container{position:absolute; width:100%; left:0%; bottom:-1%}

@keyframes ani-shop {
    0%   { transform:translateY(0%) }
	50%   { transform:translateY(2%)}
	100% { transform:translateY(0%) }
}

@keyframes ani-avatar-leftup {
    0%   { transform:translate(0%,0%) }
	50%   { transform:translate(20%,-20%)}
	100% { transform:translate(0%,0%) }
}

@keyframes ani-avatar-leftdown {
    0%   { transform:translate(0%,0%) }
	50%   { transform:translate(20%,20%)}
	100% { transform:translate(0%,0%) }
}

@keyframes ani-avatar-rightup {
    0%   { transform:translate(0%,0%) }
	50%   { transform:translate(-20%,-20%)}
	100% { transform:translate(0%,0%) }
}

@keyframes ani-avatar-rightdown {
    0%   { transform:translate(0%,0%) }
	50%   { transform:translate(-20%,20%)}
	100% { transform:translate(0%,0%) }
}



.how-to-container{position:relative; width:90%;height:100vh;opacity:0;transform: translateY(100%); margin:auto; }
.how-to-container > div:nth-child(1){position:absolute; left:0%; top:10%; ;}
.how-to-container > div:nth-child(2){ position:absolute;right:0%; top:10%; ;}
.how-to-container-inner{position:absolute; width:16.2%; height:76%; }
.how-to-container-inner > div:nth-child(1){ position:absolute;width:65%; left:17.5%;top:5%}
.how-to-container-inner > div:nth-child(2){ position:absolute;width:100%;bottom:-1% }
.how-to-container-inner > div:nth-child(3){ position:absolute;width:48%; left:26%;bottom:30%;animation:ani-ufo 3s linear infinite alternate;}
.how-to-container-inner > div:nth-child(4){ position:absolute;width:17%; left:41.5%;top:30%;animation:ani-coin-catch 3s linear infinite;}
.how-to-container-inner > div:nth-child(5){ position:absolute;width:17%; left:26%;top:21%;animation:ani-coin-drop 1.5s linear infinite;animation-delay:-1s}
.how-to-container-inner > div:nth-child(6){ position:absolute;width:17%; left:51%;top:11%;animation:ani-coin-drop 1.5s linear infinite;animation-delay:-2s}
.how-to-container-inner > div:nth-child(7){ position:absolute;width:13%; right:18%;bottom:28%;animation:ani-drag 3s linear infinite alternate;}
.how-to-container-inner > div:nth-child(8){ position:absolute;width:86%; left:7%;bottom:2%}
.how-to-container-inner > div:nth-child(9){ position:absolute;width:5%; left:calc(50% + 3.6vw); bottom:calc(2% + 4vw); }
.how-to-container-inner > div:nth-child(10){ position:absolute;width:5%; left:calc(50% - .2vw); bottom:calc(2% + 1.8vw)}
.how-to-txt{text-align: center}

@keyframes ani-ufo {
    0%   { transform:translateX(-30%) }
	45%   { transform:translateX(0%)}
	55%   { transform:translateX(0%)}
	100% { transform:translateX(30%) }
}

@keyframes ani-drag {
    0%   { transform:translateX(-50%) }
	45%   { transform:translateX(0%)}
	55%   { transform:translateX(0%)}
	100% { transform:translateX(50%) }
}

@keyframes ani-coin-drop {
    0%   { transform:translateY(-100%);opacity:0; }
	5%   { opacity:1}
	100% { transform:translateY(200%) }
}

@keyframes ani-coin-catch {
    0%   { transform:translateY(-100%) }
	45%   { transform:translateY(0%);opacity:1}
	50%   { transform:translateY(0%);opacity:1}
	50%   { transform:translateY(0%);opacity:1}
	53%   { transform:translateY(0%);opacity:0}
	100% { transform:translateY(100%);opacity:0 }
}

.timecount-container{position:absolute; width:30%;left:-.5%; top:23%;transform: scale(0)}
.time-circle{position:relative; width:100%;animation:ani-time-rotate 1s linear infinite ;}
.landing-page-container .timecount-container .countdown{font-size:4.5vw ;position:absolute;left:0%; width:100%; top:43%;text-shadow: 0px 0.1vw #6F6F6F; text-align:center;  }

@keyframes ani-time-rotate {
    0%   { transform:rotate(0deg)}
	100% { transform:rotate(360deg) }
}


.table-container{position:absolute;width:calc(68.5% - 3vw); left:28.8%;top:22.3%;background-color: rgb(18, 116, 80,0.3);padding:3vw 1.5vw; border-radius:1vw ;box-shadow:0px 0.3vw rgb(6, 52, 35,0.3) ; transform: scale(0);}
.table-row{display: flex}
.table-row > div {padding:0vw; position:relative; overflow:hidden; opacity:.2; border-radius:10000px; margin:.3vw }
.table-row > div > img{ line-height:1; margin:0; padding:0; border:none; width:100%; height:auto;}
.table-row > div > div{ position:absolute; width:100%; height:95%; top:0%; left:0%; background:#454545; opacity:.7; border-radius:10000px;      }

.table-row > div.active{ opacity:1; }
.table-row > div.active > div{ display:none }


.ufo-container{z-index: 1;opacity: 0; }
.ufo-container > div:nth-child(1) { position:absolute;width:14%; left:20%;bottom:7%}
.ufo-container > div:nth-child(2) {position:absolute; width:5.4%; left:24.4%; bottom:29%}


.page-container.active .landing-page-container .logotype-container{ transform: scale(0); opacity:0; transition:transform 300ms, opacity 300ms linear   }
.page-container.active .landing-page-container .logo-container{ transform: translateY(45%); transition:transform 500ms  }

.page-container.active .landing-page-container .seven-container{transform: translateY(100%); transition:transform 500ms  }


.page-container.active .landing-page-container .coins-container > div:nth-child(1) > div{transform:translate(130%,-20%); transition:transform 500ms}
.page-container.active .landing-page-container .coins-container > div:nth-child(2) > div{transform:translate(180%,-100%); transition:transform 500ms}
.page-container.active .landing-page-container .coins-container > div:nth-child(3) > div{transform:scale(1.5) translate(-140%,-50%); transition:transform 500ms}
.page-container.active .coins-container > div:nth-child(4) > div{transform:translate(-50%,-170%); transition:transform 500ms}
.page-container.active .landing-page-container .coins-container > div:nth-child(5) > div{transform:scale(1.4) translate(1200%,-490%); transition:transform 500ms}
.page-container.active .landing-page-container .coins-container > div:nth-child(6) > div{transform:scale(1.15) translate(270%,300%); transition:transform 500ms;}

.page-container.active .landing-page-container .avatar-container > div:nth-child(1) > div{transform:translate(-100%); transition:transform 500ms }
.page-container.active .landing-page-container .avatar-container > div:nth-child(4) > div{transform:scale(0.9) translate(-150%,40%); transition:transform 500ms }
.page-container.active .landing-page-container .avatar-container > div:nth-child(5) > div{transform:translate(90%,-30%); transition:transform 500ms}
.page-container.active .landing-page-container .avatar-container > div:nth-child(6) > div{transform:translate(50%,-20%); transition:transform 500ms}
.page-container.active .landing-page-container .avatar-container > div:nth-child(7) > div{transform:translate(200%); transition:transform 500ms }
.page-container.active .landing-page-container .avatar-container > div:nth-child(8) > div{transform:translate(200%); transition:transform 500ms }

/*.page-container.active .landing-page-container .shop-container > div:nth-child(1) > div{ transform:scale(0.65) translate(-75%,20%); transition:transform 500ms   }
.page-container.active .landing-page-container .shop-container > div:nth-child(2) > div{ transform:scale(0.58) translate(-240%,0%); transition:transform 500ms   }*/
.page-container.active .landing-page-container .shop-container > div:nth-child(3) > div{ transform:scale(1) translate(-70%,-90%); transition:transform 500ms   }
.page-container.active .landing-page-container .shop-container > div:nth-child(4) > div{ transform:scale(0.63) translate(-75%,54%); transition:transform 500ms   }
.page-container.active .landing-page-container .shop-container > div:nth-child(5) > div{ transform:scale(0) translate(128%,15%); transition:transform 500ms   }
.page-container.active .landing-page-container .shop-container > div:nth-child(6) > div{ transform:scale(1) translate(-10%,-100%); transition:transform 500ms   }
/*.page-container.active .landing-page-container .shop-container > div:nth-child(7) > div{ transform:scale(0.6) translate(225%,50%); transition:transform 500ms   }
.page-container.active .landing-page-container .shop-container > div:nth-child(8) > div{ transform:scale(0.9) translate(115%,-75%); transition:transform 500ms   }*/

.page-container.active .landing-page-container .how-to-container{ transform: translateY(0%); opacity:1; transition:transform 300ms, opacity 300ms linear   }

.page-container.active .landing-page-container .timecount-container{ transform: scale(1); opacity:1; transition:transform 300ms, opacity 300ms linear   }
.page-container.active .landing-page-container .table-container{ transform: scale(1); opacity:1; transition:transform 300ms, opacity 300ms linear   }
.page-container.active .landing-page-container .ufo-container{  opacity:1; transition:opacity 300ms linear   }



/* landing */

/* countdown */
.page-container.counter-page .landing-page-container{ display:none}
.counter-page-container{ display:none; position:absolute; width:100%; height:100%; top:0; left:0; background:radial-gradient(250% 100% ellipse at bottom,rgba(198,153,255,1) 0%, rgba(178,152,254,1) 5%, rgba(149,152,253,1) 12%, rgba(127,151,252,1) 21%, rgba(112,151,252,1) 30%, rgba(102,151,252,1) 41%, rgba(100,151,252,1) 56%, rgba(94,144,241,1) 60%, rgba(80,125,213,1) 68%, rgba(58,95,168,1) 78%, rgba(27,53,106,1) 90%, rgba(0,17,51,1) 100%)}


.page-container.counter-page .counter-page-container{ display:block}
.counter-page-container .logo-container{position:absolute; width:38%; left:31%; top:4%;display:flex;align-items: center;  } 

.counter-page-container .logo-container .countdown{font-size:4vw; transform:translateY(-5%)}
.counter-page-container .logo-container > div:nth-child(1) {width:52%}
.counter-page-container .logo-container > div:nth-child(2) { width:16%;padding: 0 .5vw 0 1vw;  }
.counter-page-container .logo-container > div:nth-child(3) { width:calc(100% - 52% - 16% - 1.5vw);  }

.planet-container > div:nth-child(1) { position:absolute; width:3.8%; left:-0.7%; top:48% ;animation:ani-planet 3s linear infinite alternate; display:none}
.planet-container > div:nth-child(2) { position:absolute; width:4.6%; left:-2.1%; top:56.1% ;animation:ani-planet 2s linear infinite alternate; display:none}
.planet-container > div:nth-child(3) { position:absolute; width:2.9%; left:22%; top:24% ;animation:ani-planet 5s linear infinite alternate;display:none}
.planet-container > div:nth-child(4) { position:absolute; width:1%; left:24.2%; top:31.5% ;animation:ani-planet 2s linear infinite alternate;display:none}
.planet-container > div:nth-child(5) { position:absolute; width:4.5%; left:20%; top:31.5% ;animation:ani-planet 4s linear infinite alternate;display:none}
.planet-container > div:nth-child(6) { position:absolute; width:8.7%; left:10%; top:4.5% ;animation:ani-planet 2s linear infinite alternate;}
.planet-container > div:nth-child(7) { position:absolute; width:5%; right:19.3%; top:24% ;animation:ani-planet 3s linear infinite alternate;display:none}
.planet-container > div:nth-child(8) { position:absolute; width:3.5%; right:-0.3%; top:54%;animation:ani-planet 4s linear infinite alternate; display:none}
.planet-container > div:nth-child(9) { position:absolute; width:14%; left:5%; top:89% ;animation:ani-planet 5s linear infinite alternate; }
.planet-container > div:nth-child(10) { position:absolute; width:8.5%; left:82%; top:90% ;animation:ani-planet 2s linear infinite alternate;}
.planet-container > div:nth-child(11) { position:absolute; width:2.6%; right:20.6%; bottom:3% ;animation:ani-planet 3s linear infinite alternate; display:none}
.planet-container > div:nth-child(12) { position:absolute; width:2.7%; right:21.9%; bottom:4% ;animation:ani-planet 5s linear infinite alternate; display:none}


.earth-container > div:nth-child(1) { position:absolute; width:100%; left:0%; top:80% }
.earth-container > div:nth-child(2) { position:absolute; width:100%; left:0%; bottom:-11%; mix-blend-mode:screen  }

.group-container{display:flex;position: absolute;width:95%;left:2.5%;bottom:18%; }
.group{display:block; width:4%; margin: 0 .5%; position:relative;}

.coin-counter{ position:absolute; width:100%; bottom:100%; display:flex; flex-direction:column-reverse  }
.coin-counter > div{ margin:.05vw 0; width:100%; padding-bottom:35%; background-image: url("../img/game/coin.png") ; background-size:contain; background-repeat: no-repeat;background-position: center; transform:scale(0); animation:ani-coin-counter .5s cubic-bezier(0,1,.56,1.09) 1; animation-fill-mode:forwards; position:relative;}

.coin-counter > div:before{  content:""; position:absolute; width:200%; height:400%; transform:translate(-50%,-50%); left:50%; top:50%;mix-blend-mode:screen; background-image:url("../img/game/flare-normal.png"); background-size:contain; background-position:center; background-repeat:no-repeat;  }

.coin-counter > div.active:before{ animation:ani-coin-flare 1s linear 1; animation-fill-mode:forwards; }


@keyframes ani-coin-flare {
    0%   { transform:translate(-50%,-50%) scale(0); opacity:0}
	50% { transform:translate(-50%,-50%) scale(1); opacity:1 }
	100% { transform:translate(-50%,-50%) scale(1); opacity:0 }
}

@keyframes ani-coin-counter {
    0%   { transform:translateY(-2vw) scale(2)}
	100% { transform:scale(1) }
}


.counter-page-container .ready-count .countdown{ position: absolute; font-size:8vw ;left:0%; width:100%;  top:42%; text-shadow: 0px .1vw #6F6F6F;  text-align:center }


@keyframes ani-planet {
    0%   { transform:translateX(0%) }
	100% { transform:translateX(10%) }
}


/* countdown */

/* finish */
.page-container.finish-page .counter-page-container{ display:none}

.finish-page-container{display:none; background: linear-gradient(180deg, rgba(132,142,214,1) 0%, rgba(107,188,241,1) 22%, rgba(163,225,240,1) 62%); position:absolute; width:100%; height:100%; top:0; left:0; z-index:2 }
.page-container.finish-page .finish-page-container{ display:block}
.finish-page-container .logotype-container{position:absolute; width:34%; left:33%; top:15.5%;background-image:url("../img/game/waiting-word.png");background-repeat: no-repeat;background-size: contain;padding-bottom: 100%}
.finish-page-container .logo-container{position:absolute; width:19.6%; left:40.2%; top:6.3%}   

/*.seven-container > div:nth-child(3){position:absolute; width:35%;left:32.5% ;top:13.2% }*/


.finish-page-container .coins-container > div:nth-child(1){position:absolute; width:6%; left:19%; top:9.5% ;transform: rotate(-10deg)}
.finish-page-container .coins-container > div:nth-child(2){position:absolute; width:3.4%; left:24%; top:4.5%;transform: rotate(10deg)}
.finish-page-container .coins-container > div:nth-child(3){position:absolute; width:1.9%; left:64%; top:9%;transform: rotate(10deg); display:none }
.finish-page-container .coins-container > div:nth-child(4){position:absolute; width:3.8%; left:30%; top:37%; transform: rotate(-10deg)}
.finish-page-container .coins-container > div:nth-child(5){position:absolute; width:2.5%; left:31%; top:31%;transform: rotate(10deg);}
.finish-page-container .coins-container > div:nth-child(6){position:absolute; width:4.5%; left:69.3%; top:21%;transform: rotate(10deg);z-index: 1}

.finish-page-container .coins-container > div:nth-child(7){position:absolute; width:2.5%; left:-0.2%; top:55%;transform: rotate(10deg); display:none }
.finish-page-container .coins-container > div:nth-child(8){position:absolute; width:3%; left:1.5%; top:66.5%;transform: rotate(-10deg); display:none}
.finish-page-container .coins-container > div:nth-child(9){position:absolute; width:1.9%; left:18%; top:16%;transform: rotate(10deg);  display:none}
.finish-page-container .coins-container > div:nth-child(10){position:absolute; width:2.8%; left:20%; top:22%;transform: rotate(-10deg);  display:none}
.finish-page-container .coins-container > div:nth-child(11){position:absolute; width:2.8%; right:23%; bottom:26.5%;transform: rotate(10deg);  display:none}
.finish-page-container .coins-container > div:nth-child(12){position:absolute; width:3.7%; right:19%; bottom:10%;transform: rotate(-10deg);  display:none}
.finish-page-container .coins-container > div:nth-child(13){position:absolute; width:2.8%; right:0.7%; top:31%;transform: rotate(-10deg);  display:none}
.finish-page-container .coins-container > div:nth-child(14){position:absolute; width:4%; right:-1.6%; top:9%;transform: rotate(10deg);  display:none}



.finish-page-container .shop-container > div:nth-child(3){position:absolute; width:11.5%; left:2.5%; top:19% ;animation:ani-shop 1.5s linear infinite alternate;}
.finish-page-container .shop-container > div:nth-child(4){position:absolute; width:18.8%; left:8.6%; top:54% ;animation:ani-shop 2.5s linear infinite alternate;}
.finish-page-container .shop-container > div:nth-child(5){position:absolute; width:18.6%; left:68%; top:54% ;animation:ani-shop 3s linear infinite alternate;}
.finish-page-container .shop-container > div:nth-child(6){position:absolute; width:8.8%; left:87%; top:29.5% ;animation:ani-shop 1.5s linear infinite alternate;}

.finish-page-container .trophy-container > div:nth-child(1){position:absolute; width:11.5%; left:6%; bottom:24% ;animation:ani-shop 3.5s linear infinite alternate;}
.finish-page-container .trophy-container > div:nth-child(2){position:absolute; width:11.5%; right:6.5%; bottom:24% ;animation:ani-trophy 2s linear infinite alternate;}


@keyframes ani-trophy {
    0%   { transform:translateY(0%) scaleX(-1)}
	50%   { transform:translateY(2%)scaleX(-1)}
	100% { transform:translateY(0%) scaleX(-1)}
}



.result-table-container{position: absolute;width:60%; left:20%;top:28.5%;background-color: #fff;border-top-left-radius:1.2vw;border-top-right-radius:1.2vw;box-shadow:0px .3vw rgb(6, 52, 35,0.3) ;transform:scale(0);  }
.colume-header{display: flex; background-color: #127450; border-top-left-radius:1.2vw;border-top-right-radius:1.2vw;padding:.6vw 0;  }
.colume-header > div {width:33.33%;text-align: center}



.ranking-winner, .ranking-other{ display: flex;align-items: center}
.ranking-winner > div {width:33.33%;text-align: center;margin: .2vw 0}
.result-table-container > div:nth-child(2) {margin-top: 0.2vw}


.ranking-winner > div:nth-child(1) > div{background-color: #F06D21; width:3vw; height:3vw; border-radius:10000px;  display:flex; align-items:center; justify-content:center; margin:auto; font-size:1.3vw;}

.ranking-winner > div:nth-child(2){display:flex ;align-items: center}
.ranking-winner > div:nth-child(2) > div:nth-child(2){color:#E81C2D; font-size:2vw;letter-spacing:2px; }
.winner-icon{background-image: url("../img/game/trophy.png");background-repeat: no-repeat;background-size: contain;width:3vw; height:3vw; transform:scaleX(-1)}
.winner-empty{ width:1.6vw; height:1.6vw; }


.ranking-winner > div:nth-child(3){color:#F06D21;font-size:2vw;letter-spacing: 2px;}

.ranking-other > div {width:33.33%;text-align: center;margin: 0.4vw 0}
.ranking-other > div:nth-child(1) > div{font-size:.8vw;color:#F06D21;border-color: #F06D21; border:solid 1px; width:2vw; height:2vw;  border-radius:10000px;  display:flex; align-items:center; justify-content:center; margin:auto}

.ranking-other > div:nth-child(2){color:#127450;letter-spacing: 1px; font-size:1.5vw;}
.ranking-other > div:nth-child(3){color:#F06D21;letter-spacing: 1px; font-size:1.5vw}



.page-container.result-page .finish-page-container .logotype-container{position:absolute; width:10%; left:45%;  background-image:url("../img/game/result-word.png");background-repeat: no-repeat;background-size: contain;padding-bottom: 100%}

.page-container.result-page .finish-page-container .seven-container{transform:scale(0.6) translate(152% ,-9%); transition:transform 500ms }


.page-container.result-page .finish-page-container .coins-container > div:nth-child(4) > div{transform:rotate(-10deg) translate(-350%,-380%); transition:transform 500ms}
.page-container.result-page .finish-page-container .coins-container > div:nth-child(5) > div{transform:rotate(10deg)  translate(-600%,50%); transition:transform 500ms}
.page-container.result-page .finish-page-container .coins-container > div:nth-child(6)  > div{ transform: rotate(10deg) translate(250%, 50%); }

.page-container.result-page .finish-page-container .shop-container > div:nth-child(3) > div{transform:translate(-25%,-30%) scale(0.7); transition:transform 500ms}
.page-container.result-page .finish-page-container .shop-container > div:nth-child(4) > div{transform:translate(-40%,-50%) scale(0.7); transition:transform 500ms}
.page-container.result-page .finish-page-container .shop-container > div:nth-child(5) > div{transform:translate(80%,-80%) scale(0.63); transition:transform 500ms}
.page-container.result-page .finish-page-container .shop-container > div:nth-child(6) > div{transform:translate(-90%,-120%) scale(0.8); transition:transform 500ms}


.page-container.result-page .finish-page-container .result-table-container{transform: scale(1); transition:transform 500ms}



/* finish */