@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; }


/* landing */

.landing-page-container .logotype-container{position:absolute; width:26.5%; left:36.75%; top:15%}
.landing-page-container .logo-container{position:absolute; width:10%; left:45%; top:7%}     


.seven-container{position:absolute; width:21%; left:39.5%; top:36%;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:3.8%}
.seven-container > div:nth-child(3){position:absolute; width:35%;left:32.5% ;top:13.2% }


.coins-container > div:nth-child(1){position:absolute; width:3.2%; left:33.5%; top:13% ;transform: rotate(-10deg)}
.coins-container > div:nth-child(2){position:absolute; width:1.8%; left:36.5%; top:10%;transform: rotate(10deg)}
.coins-container > div:nth-child(3){position:absolute; width:1.9%; left:63%; top:15%;transform: rotate(10deg)}
.coins-container > div:nth-child(4){position:absolute; width:1.9%; left:36%; top:34%;transform: rotate(-10deg)}
.coins-container > div:nth-child(5){position:absolute; width:1.2%; left:38.5%; top:37%;transform: rotate(10deg)}
.coins-container > div:nth-child(6){position:absolute; width:3.2%; left:59%; top:36%;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;}
.shop-container > div:nth-child(2){position:absolute; width:11%; left:11.2%; bottom:41% ;animation:ani-shop 2s linear infinite alternate;}
.shop-container > div:nth-child(3){position:absolute; width:4%; left:30.5%; bottom:56% ;animation:ani-shop 1.5s linear infinite alternate;}
.shop-container > div:nth-child(4){position:absolute; width:11.8%; left:27.5%; bottom:5% ;animation:ani-shop 2.5s linear infinite alternate;}
.shop-container > div:nth-child(5){position:absolute; width:12%; right:28.2%; bottom:-6% ;animation:ani-shop 3s linear infinite alternate;}
.shop-container > div:nth-child(6){position:absolute; width:4.5%; right:28.5%; bottom:51% ;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;}
.shop-container > div:nth-child(8){position:absolute; width:6%; right:5%; bottom:44% ;animation:ani-shop 2s linear infinite alternate;}


.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:16%;left:23.5%; top:25%;transform: scale(0)}
.time-circle{position:relative; width:100%;animation:ani-time-rotate 1s linear infinite ;}
.landing-page-container .timecount-container .countdown{font-size:2.2vw ;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:32.5%; left:39%;top:22%;background-color: rgb(18, 116, 80,0.3);padding: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:.2vw }
.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:7%; left:34.5%;bottom:5%}
.ufo-container > div:nth-child(2) {position:absolute; width:2.5%; left:36.8%; bottom:25%}


.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(110%,-20%); transition:transform 500ms}
.page-container.active .landing-page-container .coins-container > div:nth-child(2) > div{transform:translate(160%,-100%); transition:transform 500ms}
.page-container.active .landing-page-container .coins-container > div:nth-child(3) > div{transform:scale(1.5) translate(-140%,-70%); transition:transform 500ms}
.page-container.active .coins-container > div:nth-child(4) > div{transform:translate(-80%,-200%); transition:transform 500ms}
.page-container.active .landing-page-container .coins-container > div:nth-child(5) > div{transform:scale(1.5) translate(1200%,-470%); transition:transform 500ms}
.page-container.active .landing-page-container .coins-container > div:nth-child(6) > div{transform:scale(1.2) translate(400%,-50%); 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.2) translate(-70%,-90%); transition:transform 500ms   }
.page-container.active .landing-page-container .shop-container > div:nth-child(4) > div{ transform:scale(0.8) translate(-100%,40%); transition:transform 500ms   }
.page-container.active .landing-page-container .shop-container > div:nth-child(5) > div{ transform:scale(0.7) translate(128%,15%); transition:transform 500ms   }
.page-container.active .landing-page-container .shop-container > div:nth-child(6) > div{ transform: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:20%; left:40%; top:5%;display:flex;align-items: center;  } 

.counter-page-container .logo-container .countdown{font-size: 2.2vw; 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;}
.planet-container > div:nth-child(2) { position:absolute; width:4.6%; left:-2.1%; top:56.1% ;animation:ani-planet 2s linear infinite alternate;}
.planet-container > div:nth-child(3) { position:absolute; width:2.9%; left:22%; top:24% ;animation:ani-planet 5s linear infinite alternate;}
.planet-container > div:nth-child(4) { position:absolute; width:1%; left:24.2%; top:31.5% ;animation:ani-planet 2s linear infinite alternate;}
.planet-container > div:nth-child(5) { position:absolute; width:4.5%; left:20%; top:31.5% ;animation:ani-planet 4s linear infinite alternate;}
.planet-container > div:nth-child(6) { position:absolute; width:4.5%; left:29%; top:4% ;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;}
.planet-container > div:nth-child(8) { position:absolute; width:3.5%; right:-0.3%; top:54%;animation:ani-planet 4s linear infinite alternate; }
.planet-container > div:nth-child(9) { position:absolute; width:7%; left:27%; bottom:-3% ;animation:ani-planet 5s linear infinite alternate;}
.planet-container > div:nth-child(10) { position:absolute; width:4.5%; right:28.5%; bottom:-1% ;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;}
.planet-container > div:nth-child(12) { position:absolute; width:2.7%; right:21.9%; bottom:4% ;animation:ani-planet 5s linear infinite alternate;}


.earth-container > div:nth-child(1) { position:absolute; width:50%; left:25%; bottom:-141% }
.earth-container > div:nth-child(2) { position:absolute; width:50%; left:25%; bottom:-11%; mix-blend-mode:screen  }

.group-container{display:flex;position: absolute;width: 52%;left:24%;bottom:16%; }
.group{display:block;width:4%; margin: 0 .3vw; 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:4vw ;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:18.2%; left:41.6%; top:15%;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:10%; left:45%; top:7%}   

.finish-page-container .seven-container{position:absolute; width:21%; left:39.5%; top:36%;padding-bottom: 100%;z-index: 1}
.finish-page-container .seven-container > div:nth-child(1){position:absolute; width:100%;}
.finish-page-container .seven-container > div:nth-child(2){position:absolute; width:97%;left:1.5% ;top:3.8%}
.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:3.2%; left:32.8%; top:7% ;transform: rotate(-10deg)}
.finish-page-container .coins-container > div:nth-child(2){position:absolute; width:1.8%; left:35.8%; top:4%;transform: rotate(10deg)}
.finish-page-container .coins-container > div:nth-child(3){position:absolute; width:1.9%; left:64%; top:9%;transform: rotate(10deg)}
.finish-page-container .coins-container > div:nth-child(4){position:absolute; width:1.9%; left:40.8%; top:40%;transform: rotate(-10deg)}
.finish-page-container .coins-container > div:nth-child(5){position:absolute; width:1.2%; left:40.5%; top:33%;transform: rotate(10deg);}
.finish-page-container .coins-container > div:nth-child(6){position:absolute; width:1.9%; left:64.3%; top:23%;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);}
.finish-page-container .coins-container > div:nth-child(8){position:absolute; width:3%; left:1.5%; top:66.5%;transform: rotate(-10deg);}
.finish-page-container .coins-container > div:nth-child(9){position:absolute; width:1.9%; left:18%; top:16%;transform: rotate(10deg);}
.finish-page-container .coins-container > div:nth-child(10){position:absolute; width:2.8%; left:20%; top:22%;transform: rotate(-10deg);}
.finish-page-container .coins-container > div:nth-child(11){position:absolute; width:2.8%; right:23%; bottom:26.5%;transform: rotate(10deg);}
.finish-page-container .coins-container > div:nth-child(12){position:absolute; width:3.7%; right:19%; bottom:10%;transform: rotate(-10deg);}
.finish-page-container .coins-container > div:nth-child(13){position:absolute; width:2.8%; right:0.7%; top:31%;transform: rotate(-10deg);}
.finish-page-container .coins-container > div:nth-child(14){position:absolute; width:4%; right:-1.6%; top:9%;transform: rotate(10deg);}



.finish-page-container .shop-container > div:nth-child(1){position:absolute; width:8.5%; left:18%; bottom:5% ;animation:ani-shop 3.5s linear infinite alternate;}
.finish-page-container .shop-container > div:nth-child(2){position:absolute; width:7.9%; left:-0.5%; bottom:70% ;animation:ani-shop 2s linear infinite alternate;}
.finish-page-container .shop-container > div:nth-child(3){position:absolute; width:6%; left:25%; bottom:56% ;animation:ani-shop 1.5s linear infinite alternate;}
.finish-page-container .shop-container > div:nth-child(4){position:absolute; width:9.8%; left:29%; bottom:9% ;animation:ani-shop 2.5s linear infinite alternate;}
.finish-page-container .shop-container > div:nth-child(5){position:absolute; width:9.7%; right:30.6%; bottom:5.5% ;animation:ani-shop 3s linear infinite alternate;}
.finish-page-container .shop-container > div:nth-child(6){position:absolute; width:4.5%; right:26%; bottom:50% ;animation:ani-shop 1.5s linear infinite alternate;}
.finish-page-container .shop-container > div:nth-child(7){position:absolute; width:8%; right:18%; top:2% ;animation:ani-shop 2.5s linear infinite alternate;}
.finish-page-container .shop-container > div:nth-child(8){position:absolute; width:6.3%; right:1%; bottom:5% ;animation:ani-shop 2s 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:30.3%; left:34.8%;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: .1vw 0}
.result-table-container > div:nth-child(2) {margin-top: 0.2vw}


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

.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: 21.5px;letter-spacing: 3px; }
.winner-icon{background-image: url("../img/game/trophy.png");background-repeat: no-repeat;background-size: contain;width:1.6vw; height:1.6vw; transform:scaleX(-1)}
.winner-empty{ width:1.6vw; height:1.6vw; }


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

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

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



.page-container.result-page .finish-page-container .logotype-container{position:absolute; width:5.7%; left:47.15%; top:15%;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% ,-21%); transition:transform 500ms }


.page-container.result-page .finish-page-container .coins-container > div:nth-child(4) > div{transform:translate(-500%,-350%); transition:transform 500ms}
.page-container.result-page .finish-page-container .coins-container > div:nth-child(5) > div{transform: translate(-700%,-20%); transition:transform 500ms}
.page-container.result-page .finish-page-container .coins-container > div:nth-child(7) > div{transform: translate(265%,185%) scale(0.9); transition:transform 500ms}
.page-container.result-page .finish-page-container .coins-container > div:nth-child(8) > div{transform: translate(-20%,140%) scale(1.1); transition:transform 500ms}
.page-container.result-page .finish-page-container .coins-container > div:nth-child(10) > div{transform: translate(50%,-180%); transition:transform 500ms}
.page-container.result-page .finish-page-container .coins-container > div:nth-child(11) > div{transform: translate(100%,100%) scale(0.9); transition:transform 500ms}
.page-container.result-page .finish-page-container .coins-container > div:nth-child(12) > div{transform: translate(30%,50%) scale(0.9); transition:transform 500ms}
.page-container.result-page .finish-page-container .coins-container > div:nth-child(13) > div{transform: translate(30%,-140%); transition:transform 500ms}
.page-container.result-page .finish-page-container .coins-container > div:nth-child(14) > div{transform: translate(-10%,-55%); transition:transform 500ms}


.page-container.result-page .finish-page-container .shop-container > div:nth-child(1) > div{transform:translate(0%,20%) scale(0.9); transition:transform 500ms}
.page-container.result-page .finish-page-container .shop-container > div:nth-child(2) > div{transform:translate(-17%,-20%) scale(0.7); transition:transform 500ms}
.page-container.result-page .finish-page-container .shop-container > div:nth-child(3) > div{transform:translate(-45%,-20%) scale(0.75); transition:transform 500ms}
.page-container.result-page .finish-page-container .shop-container > div:nth-child(4) > div{transform:translate(-50%,-50%) scale(0.77); transition:transform 500ms}
.page-container.result-page .finish-page-container .shop-container > div:nth-child(5) > div{transform:translate(120%,-40%) scale(0.63); transition:transform 500ms}
.page-container.result-page .finish-page-container .shop-container > div:nth-child(6) > div{transform:translate(-50%,-40%); transition:transform 500ms}
.page-container.result-page .finish-page-container .shop-container > div:nth-child(7) > div{transform:translate(-30%,-15%) scale(0.8); transition:transform 500ms}
.page-container.result-page .finish-page-container .shop-container > div:nth-child(8) > div{transform:translate(15%,25%) scale(0.9); transition:transform 500ms}


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



/* finish */