@-webkit-keyframes fade-in {
0% { opacity: 0; }
100% { opacity: 1; } 
}
  
@keyframes fade-in {
0% { opacity: 0; }
100% { opacity: 1; } 
}
  
@-webkit-keyframes fade-out {
0% { opacity: 1; }
100% { opacity: 0; } 
}
  
@keyframes fade-out {
0% { opacity: 1; }
100% { opacity: 0; } 
}
  
@-webkit-keyframes scale-in-center {
0% { -webkit-transform: scale(0); transform: scale(0); opacity: 0; }
100% { -webkit-transform: scale(1); transform: scale(1); opacity: 1; } 
}
  
@keyframes scale-in-center {
0% { -webkit-transform: scale(0); transform: scale(0); opacity: 0; }
100% { -webkit-transform: scale(1); transform: scale(1); opacity: 1; } 
}
  
@-webkit-keyframes scale-in-br {
0% { -webkit-transform: scale(0); transform: scale(0); -webkit-transform-origin: 100% 100%; transform-origin: 100% 100%; opacity: 0; }
100% { -webkit-transform: scale(1); transform: scale(1); -webkit-transform-origin: 100% 100%; transform-origin: 100% 100%; opacity: 1; } 
}
  
@keyframes scale-in-br {
0% { -webkit-transform: scale(0); transform: scale(0); -webkit-transform-origin: 100% 100%; transform-origin: 100% 100%; opacity: 0; }
100% { -webkit-transform: scale(1); transform: scale(1); -webkit-transform-origin: 100% 100%; transform-origin: 100% 100%; opacity: 1; } 
}
  
@-webkit-keyframes scale-out-center {
0% { -webkit-transform: scale(1); transform: scale(1); opacity: 1; }
100% { -webkit-transform: scale(0); transform: scale(0); opacity: 0; } 
}
  
@keyframes scale-out-center {
0% { -webkit-transform: scale(1); transform: scale(1); opacity: 1; }
100% { -webkit-transform: scale(0); transform: scale(0); opacity: 0; } 
}
  
@-webkit-keyframes scale-out-br {
0% { -webkit-transform: scale(1); transform: scale(1); -webkit-transform-origin: 100% 100%; transform-origin: 100% 100%; opacity: 1; }
100% { -webkit-transform: scale(0); transform: scale(0); -webkit-transform-origin: 100% 100%; transform-origin: 100% 100%; opacity: 0; } 
}
  
@keyframes scale-out-br {
0% { -webkit-transform: scale(1); transform: scale(1); -webkit-transform-origin: 100% 100%; transform-origin: 100% 100%; opacity: 1; }
100% { -webkit-transform: scale(0); transform: scale(0); -webkit-transform-origin: 100% 100%; transform-origin: 100% 100%; opacity: 0; } 
}
  
@-webkit-keyframes puff-out-center {
0% { -webkit-transform: scale(1); transform: scale(1); -webkit-filter: blur(0px); filter: blur(0px); opacity: 1; }
100% { -webkit-transform: scale(2); transform: scale(2); -webkit-filter: blur(2px); filter: blur(2px); opacity: 0; } 
}
  
@keyframes puff-out-center {
0% { -webkit-transform: scale(1); transform: scale(1); -webkit-filter: blur(0px); filter: blur(0px); opacity: 1; }
100% { -webkit-transform: scale(2); transform: scale(2); -webkit-filter: blur(2px); filter: blur(2px); opacity: 0; } 
}
  
@-webkit-keyframes spin-0 {
from { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
to { -webkit-transform: rotate(360deg); transform: rotate(360deg); } 
}
  
@keyframes spin-0 {
from { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
to { -webkit-transform: rotate(360deg); transform: rotate(360deg); } 
}
  
@-webkit-keyframes spin {
from { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
to { -webkit-transform: rotate(360deg); transform: rotate(360deg); } 
}
  
@keyframes spin {
from { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
to { -webkit-transform: rotate(360deg); transform: rotate(360deg); } 
}
  
@-webkit-keyframes spin-1 {
from { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
to { -webkit-transform: rotate(360deg); transform: rotate(360deg); } 
}
  
@keyframes spin-1 {
from { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
to { -webkit-transform: rotate(360deg); transform: rotate(360deg); } 
}
  
@-webkit-keyframes spin-2 {
from { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
to { -webkit-transform: rotate(308.57143deg); transform: rotate(308.57143deg); } 
}
  
@keyframes spin-2 {
from { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
to { -webkit-transform: rotate(308.57143deg); transform: rotate(308.57143deg); } 
}
  
@-webkit-keyframes spin-3 {
from { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
to { -webkit-transform: rotate(257.14286deg); transform: rotate(257.14286deg); } 
}
  
@keyframes spin-3 {
from { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
to { -webkit-transform: rotate(257.14286deg); transform: rotate(257.14286deg); } 
}
  
@-webkit-keyframes spin-4 {
from { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
to { -webkit-transform: rotate(205.71429deg); transform: rotate(205.71429deg); } 
}
  
@keyframes spin-4 {
from { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
to { -webkit-transform: rotate(205.71429deg); transform: rotate(205.71429deg); } 
}
  
@-webkit-keyframes spin-5 {
from { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
to { -webkit-transform: rotate(154.28571deg); transform: rotate(154.28571deg); } 
}
  
@keyframes spin-5 {
from { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
to { -webkit-transform: rotate(154.28571deg); transform: rotate(154.28571deg); } 
}
  
@-webkit-keyframes spin-6 {
from { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
to { -webkit-transform: rotate(102.85714deg); transform: rotate(102.85714deg); } 
}
  
@keyframes spin-6 {
from { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
to { -webkit-transform: rotate(102.85714deg); transform: rotate(102.85714deg); } 
}
  
@-webkit-keyframes spin-7 {
from { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
to { -webkit-transform: rotate(51.42857deg); transform: rotate(51.42857deg); } 
}
  
@keyframes spin-7 {
from { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
to { -webkit-transform: rotate(51.42857deg); transform: rotate(51.42857deg); } 
}
  
@-webkit-keyframes rotation-1 {
from { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
to { -webkit-transform: rotate(6840deg); transform: rotate(6840deg); } 
}
  
@keyframes rotation-1 {
from { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
to { -webkit-transform: rotate(6840deg); transform: rotate(6840deg); } 
}
  
@-webkit-keyframes rotation-2 {
from { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
to { -webkit-transform: rotate(6788.57143deg); transform: rotate(6788.57143deg); } 
}
  
@keyframes rotation-2 {
from { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
to { -webkit-transform: rotate(6788.57143deg); transform: rotate(6788.57143deg); } 
}
  
@-webkit-keyframes rotation-3 {
from { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
to { -webkit-transform: rotate(6737.14286deg); transform: rotate(6737.14286deg); } 
}
  
@keyframes rotation-3 {
from { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
to { -webkit-transform: rotate(6737.14286deg); transform: rotate(6737.14286deg); } 
}
  
@-webkit-keyframes rotation-4 {
from { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
to { -webkit-transform: rotate(6685.71429deg); transform: rotate(6685.71429deg); } 
}
  
@keyframes rotation-4 {
from { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
to { -webkit-transform: rotate(6685.71429deg); transform: rotate(6685.71429deg); } 
}
  
@-webkit-keyframes rotation-5 {
from { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
to { -webkit-transform: rotate(6634.28571deg); transform: rotate(6634.28571deg); } 
}
  
@keyframes rotation-5 {
from { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
to { -webkit-transform: rotate(6634.28571deg); transform: rotate(6634.28571deg); } 
}
  
@-webkit-keyframes rotation-6 {
from { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
to { -webkit-transform: rotate(6582.85714deg); transform: rotate(6582.85714deg); } 
}
  
@keyframes rotation-6 {
from { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
to { -webkit-transform: rotate(6582.85714deg); transform: rotate(6582.85714deg); } 
}
  
@-webkit-keyframes rotation-7 {
from { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
to { -webkit-transform: rotate(6531.42857deg); transform: rotate(6531.42857deg); } 
}
  
@keyframes rotation-7 {
from { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
to { -webkit-transform: rotate(6531.42857deg); transform: rotate(6531.42857deg); } 
}
  
@-webkit-keyframes shake {
10%, 90% { -webkit-transform: translate3d(-2px, -1px, 0); transform: translate3d(-2px, -1px, 0); }
20%, 80% { -webkit-transform: translate3d(4px, 2px, 0); transform: translate3d(4px, 2px, 0); }
30%, 50%, 70% { -webkit-transform: translate3d(-8px, -4px, 0); transform: translate3d(-8px, -4px, 0); }
40%, 60% { -webkit-transform: translate3d(8px, 4px, 0); transform: translate3d(8px, 4px, 0); } 
}
  
@keyframes shake {
10%, 90% { -webkit-transform: translate3d(-2px, -1px, 0); transform: translate3d(-2px, -1px, 0); }
20%, 80% { -webkit-transform: translate3d(4px, 2px, 0); transform: translate3d(4px, 2px, 0); }
30%, 50%, 70% { -webkit-transform: translate3d(-8px, -4px, 0); transform: translate3d(-8px, -4px, 0); }
40%, 60% { -webkit-transform: translate3d(8px, 4px, 0); transform: translate3d(8px, 4px, 0); } 
}
  
@-webkit-keyframes vibrate-3 {
0% { -webkit-transform: translate(0); transform: translate(0); }
10% { -webkit-transform: translate(-2px, -2px); transform: translate(-2px, -2px); }
20% { -webkit-transform: translate(2px, -2px); transform: translate(2px, -2px); }
30% { -webkit-transform: translate(-2px, 2px); transform: translate(-2px, 2px); }
40% { -webkit-transform: translate(2px, 2px); transform: translate(2px, 2px); }
50% { -webkit-transform: translate(-2px, -2px); transform: translate(-2px, -2px); }
60% { -webkit-transform: translate(2px, -2px); transform: translate(2px, -2px); }
70% { -webkit-transform: translate(-2px, 2px); transform: translate(-2px, 2px); }
80% { -webkit-transform: translate(-2px, -2px); transform: translate(-2px, -2px); }
90% { -webkit-transform: translate(2px, -2px); transform: translate(2px, -2px); }
100% { -webkit-transform: translate(0); transform: translate(0); } 
}
  
@keyframes vibrate-3 {
0% { -webkit-transform: translate(0); transform: translate(0); }
10% { -webkit-transform: translate(-2px, -2px); transform: translate(-2px, -2px); }
20% { -webkit-transform: translate(2px, -2px); transform: translate(2px, -2px); }
30% { -webkit-transform: translate(-2px, 2px); transform: translate(-2px, 2px); }
40% { -webkit-transform: translate(2px, 2px); transform: translate(2px, 2px); }
50% { -webkit-transform: translate(-2px, -2px); transform: translate(-2px, -2px); }
60% { -webkit-transform: translate(2px, -2px); transform: translate(2px, -2px); }
70% { -webkit-transform: translate(-2px, 2px); transform: translate(-2px, 2px); }
80% { -webkit-transform: translate(-2px, -2px); transform: translate(-2px, -2px); }
90% { -webkit-transform: translate(2px, -2px); transform: translate(2px, -2px); }
100% { -webkit-transform: translate(0); transform: translate(0); } 
}
  
/*
.eventkiki-win-container { position: absolute; background: rgba(0, 0, 0, 0.66); z-index: 4; top: 0; left: 0; bottom: 0; right: 0; -webkit-backdrop-filter: saturate(175%) blur(6px); backdrop-filter: saturate(175%) blur(6px); -webkit-animation: fade-in 0.5s cubic-bezier(0.39, 0.575, 0.565, 1) both; animation: fade-in 0.5s cubic-bezier(0.39, 0.575, 0.565, 1) both; overflow-y: auto; } 

.eventkiki-win-container.eventkiki-win-container-out {   -webkit-animation: fade-out 0.5s cubic-bezier(0.39, 0.575, 0.565, 1) both;   animation: fade-out 0.5s cubic-bezier(0.39, 0.575, 0.565, 1) both; }
body .eventkiki-win { font-family: "Noto Sans Kr", sans-serif; padding: 1rem; text-align: center; color: rgba(255, 255, 255, 0.6); } body .eventkiki-win .eventkiki-win-heading {   font-size: 2rem;   color: rgba(255, 255, 255, 0.8);   text-align: center;   margin: 0 1rem 0; } body .eventkiki-win .eventkiki-win-item {   margin: 1rem 0; }   body .eventkiki-win .eventkiki-win-item .eventkiki-win-item-img { -webkit-animation: scale-in-center 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) both; animation: scale-in-center 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) both; -webkit-animation-delay: 0.3s; animation-delay: 0.3s; } body .eventkiki-win .eventkiki-win-item .eventkiki-win-item-img img {   width: 100%;   border-top-left-radius: 0.25rem;   border-top-right-radius: 0.25rem;   border-bottom-right-radius: 0.25rem;   border-bottom-left-radius: 0.25rem; }   body .eventkiki-win .eventkiki-win-item .eventkiki-win-item-icon { border-top-left-radius: 50%; border-top-right-radius: 50%; border-bottom-right-radius: 50%; border-bottom-left-radius: 50%; width: 10rem; height: 10rem; margin: 1rem auto; -webkit-animation: scale-in-center 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) both; animation: scale-in-center 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) both; -webkit-animation-delay: 0.3s; animation-delay: 0.3s; border: solid 1px rgba(255, 255, 255, 0.5); background: transparent; } body .eventkiki-win .eventkiki-win-item .eventkiki-win-item-icon i {   color: rgba(255, 255, 255, 0.7);   font-size: 5rem;   line-height: 10rem; } body .eventkiki-win .eventkiki-win-category {   font-size: 1rem;   font-weight: bold;   margin: 0 0 1rem 0;   color: rgba(255, 255, 255, 0.4);   -webkit-animation: fade-in 0.5s cubic-bezier(0.39, 0.575, 0.565, 1) both;   animation: fade-in 0.5s cubic-bezier(0.39, 0.575, 0.565, 1) both;   -webkit-animation-delay: 0.4s;   animation-delay: 0.4s; } body .eventkiki-win .eventkiki-win-amount {   margin: 0 0 1rem 0;   line-height: 1.3;   font-size: 2rem;   font-weight: bold;   -webkit-animation: fade-in 0.5s cubic-bezier(0.39, 0.575, 0.565, 1) both;   animation: fade-in 0.5s cubic-bezier(0.39, 0.575, 0.565, 1) both;   -webkit-animation-delay: 0.5s;   animation-delay: 0.5s;   letter-spacing: -0.1rem;   color: rgba(255, 255, 255, 0.6); } body .eventkiki-win .eventkiki-win-category + .eventkiki-win-amount {   margin: -1rem 0 1rem 0; } body .eventkiki-win .fortune-cookie-result {   border-radius: 1rem;   padding: 1rem;   color: rgba(0, 0, 0, 0.7);   background-color: rgba(255, 255, 255, 0.8);   margin: 0 0 1rem 0;   word-break: keep-all; }   body .eventkiki-win .fortune-cookie-result h2 { font-size: 1.5rem; margin: 0 0 1rem; }   body .eventkiki-win .fortune-cookie-result p { font-size: 1.25rem; }
body .eventkiki-content-label { display: block; width: 100%; font-size: 0.875rem; color: rgba(255, 255, 255, 0.6); }
body .eventkiki-content-input { -webkit-appearance: none; -moz-appearance: none; appearance: none; display: block; border-radius: 1000vw; font-size: 1rem; line-height: 2.5rem; height: 2.5rem; width: 100%; -webkit-box-sizing: border-box; box-sizing: border-box; padding: 0 1rem; background: rgba(0, 0, 0, 0.5); border: solid 1px rgba(255, 255, 255, 0.5); color: white; margin: 0 0 0.25rem 0; }
body .eventkiki-content-btn { background: none; border: none; margin: 0; padding: 0; font-weight: bold; border-radius: 1000vh; padding: 0 1rem; line-height: 2.5rem; height: 2.5rem; font-size: 1rem; -webkit-box-shadow: 0 0.2rem 0.75rem rgba(0, 0, 0, 0.1); box-shadow: 0 0.2rem 0.75rem rgba(0, 0, 0, 0.1); -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); -webkit-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; background: rgba(255, 255, 255, 0.5); color: rgba(0, 0, 0, 0.7); margin: 0 0 0.25rem 0; } body .eventkiki-content-btn i {   margin-right: 0.5rem; } body .eventkiki-content-btn.btn-block {   width: 100%; }
body .link-eventkiki { position: absolute; bottom: 0.7rem; width: 100%; text-align: center; } body .link-eventkiki a {   background-color: rgba(0, 0, 0, 0.2);   -webkit-backdrop-filter: blur(4px);   backdrop-filter: blur(4px);   color: white;   text-decoration: none;   font-family: sans-serif;   font-size: 0.6rem;   padding: 0.25rem 0.5rem;   border-radius: 3000rem;   display: inline-block; }
  
 */

.ladder-body { margin: 0; padding: 0; background-position: top center; background-size:100%; background-repeat: no-repeat; text-align:center; }
.ladder-body button, .ladder-body input { outline: none; }
.ladder-body .ladder-content { width:20em; font-size:1em; margin:1em auto 0 auto; background-image:url(../images/layer_popup/ladder_line.png); background-position: top center; background-repeat: no-repeat; background-size: 100%; height:24em; position: relative; } 

.ladder-body .ladder-content .ladder-btn-container { width:100%;  display: -webkit-box; display: -ms-flexbox;   display: flex;   -ms-flex-pack: distribute;   justify-content: space-around;   padding: 0 0 0 0; margin:0 }  
.ladder-body .ladder-content .ladder-btn-container a { position:relative; display:block; float:left; width:21.74%;  margin-left:4.346%; border: 0; padding:21.74% 0 0 0; background-position:center center; background-repeat:no-repeat; background-size:100% auto; background-image:url(../images/layer_popup/ladder_bg.png); cursor: pointer; }
.ladder-body .ladder-content .ladder-btn-container a > span{ position:absolute; left:0; top:50%; display:block; width:100%; margin-top:-0.55em; font-size:1.176em; line-height:1.1em; font-family: 'GmarketSansBold'; letter-spacing:-0.05em}
.ladder-body .ladder-content .ladder-btn-container .ladder-btn:first-child{ margin-left:0}
.ladder-body .ladder-content .ladder-btn-container .ladder-btn:hover {   -webkit-transform: translateY(-10%);   -ms-transform: translateY(-10%);   transform: translateY(-10%); }
.ladder-body .ladder-content .ladder-btn-container .ladder-btn:active {  -webkit-transform: translateY(5%);   -ms-transform: translateY(5%);   transform: translateY(5%); }

.ladder-body .ladder-content .ladder-reward-container { width:100%;  display: -webkit-box; display: -ms-flexbox;   display: flex;   -ms-flex-pack: distribute;   justify-content: space-around;   padding: 0 0 0 0; margin:15.2em 0 0 0 }
.ladder-body .ladder-content .ladder-reward-container a { position:relative; display:block; float:left; width:21.74%;  margin-left:4.346%; border: 0; padding:21.74% 0 0 0; background-position:center center; background-repeat:no-repeat; background-size:100% auto; background-image:url(../images/layer_popup/ladder_bg.png); cursor: pointer; }
.ladder-body .ladder-content .ladder-reward-container a:first-child{ margin-left:0}
.ladder-body .ladder-content .ladder-reward-container a > span{ position:absolute; left:0; top:50%; display:block; width:100%; margin-top:-0.54em; font-size:1.176em; line-height:1.1em; font-family: 'GmarketSansBold'; letter-spacing:-0.05em}

.ladder-body .ladder-content .ladder-cover {   position: absolute;   top:19%;   width:100%;  display: -webkit-box;   display: -ms-flexbox;   display: flex;  -webkit-box-pack: center;   -ms-flex-pack: center;   justify-content: center; }   
.ladder-body .ladder-content .ladder-cover img { width:20em; height: auto; }