@font-face { font-family: 'S-CoreDream-5Medium'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/S-CoreDream-5Medium.woff') format('woff'); font-weight: normal; font-style: normal; }
@font-face { font-family: 'S-CoreDream-3Light'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/S-CoreDream-3Light.woff') format('woff'); font-weight: normal; font-style: normal; }
* {margin:0; padding:0; color:#333;}
#rouletteBox img {display:block; width:100%;}
#rouletteBox {width:100%; height:auto; margin:0; padding:0; position:relative; top:0; left:0; display:block; user-select: none; font-family:'S-CoreDream-3Light';}
#rouletteBox > div.bg {width:100%; height:auto; aspect-ratio:130 / 443; position:relative; background:url('https://swimg.wowtv.co.kr/static/images/event_img/2024/roulette/img_01_2.png') no-repeat; background-size:100% 100%; background-position:top left; display: flex; flex-direction: row; flex-wrap: nowrap; align-content: center; justify-content: center; align-items: center;}
#rouletteBox > div.bg > img.rotate_plate {z-index:1; position:absolute; top:40.8%; display:block; width:83% !important;}
#rouletteBox > div.bg > img.cover {z-index:2; position:absolute; top:40.6%; display:block; width:84% !important; cursor:pointer; opacity:100;}
#rouletteBox > div.bg > img.point {z-index:3; position:absolute; top:39.5%; display:block; width:7.5% !important; transform-origin:3.5vw 3.5vw;}
#rouletteBox > div.bg > img.rotate_btn {z-index:1; position:absolute; top:66%; left:14.5%; display:block; width:80% !important; cursor:pointer;}
#rouletteBox > img.notice {display:block; width:100%; position:relative;}
.rotate_start {
-moz-animation-fill-mode: forwards, normal; -webkit-animation-fill-mode: forwards, normal; animation-fill-mode: forwards, normal; 
-moz-animation-name: rspin, spin; -webkit-animation-name: rspin, spin; animation-name: rspin, spin; 
-moz-animation-delay: 0s, 1s; -webkit-animation-delay: 0s, 1s; animation-delay: 0s, 1s;
-moz-animation-duration: 1s, .3s; -webkit-animation-duration: 1s, .3s; animation-duration: 1s, .3s;
-moz-animation-iteration-count: 1, 5; -webkit-animation-iteration-count: 1, 5; animation-iteration-count: 1, 5; 
-moz-animation-direction: normal, normal; -webkit-animation-direction: normal, normal; animation-direction:  normal, normal; 
-moz-animation-timing-function: ease-out, linear; -webkit-animation-timing-function: ease-out, linear; animation-timing-function: ease-out, linear;
}

.rotate_stop {
-moz-animation-fill-mode: normal; -webkit-animation-fill-mode: normal; animation-fill-mode: normal; 
-moz-animation-name: stop; -webkit-animation-name: stop; animation-name: stop; 
-moz-animation-delay: -2s; -webkit-animation-delay: -2s; animation-delay: -2s;
-moz-animation-duration: 5s; -webkit-animation-duration: 5s; animation-duration: 5s;
-moz-animation-iteration-count: 1; -webkit-animation-iteration-count: 1; animation-iteration-count: 1; 
-moz-animation-direction: normal; -webkit-animation-direction: normal; animation-direction:  normal; 
-moz-animation-timing-function: ease-in-out; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out;
}

@keyframes rspin { 
	0%{transform:rotate(5deg);}
	100% {transform:rotate(0deg);} 
}

@keyframes spin { 
	0% {transform:rotate(0deg);}
	100%{transform:rotate(360deg);}
}

@keyframes stop { 
}

@keyframes point { 
	0% {transform:rotate(0deg);} 
	100%{transform:rotate(-5deg);}
}

img.swal2-image {width:70vw !important; margin-top:-15vw !important; font-family: 'S-CoreDream-3Light' !important;}
span.money {color:#9a6bf0; font-weight:bolder; /*font-family: 'S-CoreDream-5Medium';*/}
button.swal2-confirm {width:50vw !important; font-size:5vw !important; font-family: 'S-CoreDream-3Light' !important;}
.swal2-title > div {font-family: 'S-CoreDream-3Light' !important;}
div.swal2-popup {width:80% !important;}

@media screen and (min-width:1024px) {
/*	#rouletteBox {display:none;}*/
}