[v-cloak] {
    display: none; 
} 
@font-face {
    font-family: 'SpoqaHanSansNeo-Regular';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2108@1.1/SpoqaHanSansNeo-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'SpoqaHanSansNeo-Bold';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2108@1.1/SpoqaHanSansNeo-Bold.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'SpoqaHanSansNeo-Light';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2108@1.1/SpoqaHanSansNeo-Light.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'SpoqaHanSansNeo-Medium';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2108@1.1/SpoqaHanSansNeo-Medium.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
#mainFrame_wrap{padding-bottom:0px !important;}
.clearfix{*zoom:1;}
.clearfix:after{content: '';display:block;clear:both;}
#roulettepage{position:relative;}

.container img{max-width: 100%;}
.container *{font-family: 'SpoqaHanSansNeo-Regular';}
.container{width:100%;height: 100%;margin:0 auto;background-image: url(../images/roulette_bg.jpg);background-size: cover;background-position: center top;padding-bottom: 8.59vw;}
.container.doubles{background-image: url(../images/roulette_double_m_bg.png) !important;}

.title{text-align: center;padding-top:10.93vw;position:relative;}
.title>p>img{width:85.62vw;}
.title>a{width:26.56vw;display: inline-block;margin:2.5vw 0 7.34vw 0;}
.roulette{position:relative;width:300px;height:420px;margin:0 auto;margin-top:9.68vw;}
.roulette canvas{position: absolute;top:0px;left:50%;z-index: 200;transform: translateX(-50%) rotate(-23deg);box-shadow: 0px 0px 30px 15px rgb(10 29 111 / 45%);border-radius: 50%;}
.roulette:after{content: '';position: absolute;top:-1px;left:50%;transform: translateX(-50%);width:302px;height: 302px;background-color: #703b11;border-radius: 50%;}
.top_cover {position: absolute;left:50%;transform: translateX(-50%);top:-3px;z-index: 200;width:300px;}
.pointer{position: absolute;left:50%;transform: translateX(-50%);top:-25px;z-index: 300;width:30px;}
.roulette .bottombg{position: absolute;bottom:21px;left:50%;transform: translateX(-50%);width:300px;}
.gaugewrap>#gaugebar{height: 15px;left:3px;top:3px;max-width: 97%;}
.btn_area{width:300px;height: 300px;position: relative;margin:0 auto;}
.stbtn{position: absolute;left:50%;transform:translate(-50%, -50%);top:50%;letter-spacing: 1px;z-index: 300;outline:none;border:none;border-radius: 50%;width:100px;}
.roulcont{position:absolute;top:-50px;right:-20px;width:120px;height: 113px;background-repeat: no-repeat;background-size: contain;background-image: url(../images/new_contimg.png);z-index: 190;}
.roulcont>span{display: inline-block;width:100%;padding-top:38px;text-align:center;font-size: 16px;font-weight: 800;color:#ffd800;}
.notice_pop{position: absolute;left:50%;bottom:-225%;transform: translateX(-50%);z-index:400;display: none;width: 95%;}
.notice_pop>a.pop_close{position: absolute;right: 7vw;top: 6vw;width:4vw;}
.sub_notice{text-align: center;}
/* 팝업 */
.gift_pop{position: absolute;z-index: 1000;}
.gift_pop>.pop_inner{width:100%;height:100%;left:50%;top: 38%;transform: translate(-50%, -50%);position: fixed;}
.gift_pop>.pop_inner>img{width: 125%;height: 168.37vw;transform: translate(-50%, -50%);position: fixed;background-size: cover;left:  50%;top: 50%;}
.gift_pop>.pop_inner>.pop_cont{left:50%;top:50%;transform: translate(-50%, -50%);width: 93.09vw;height: 111.37vw;background-image: url(../images/popup_bg.png);position: fixed;background-size: cover;}
.gift_pop>.pop_inner>.pop_cont> img{width:100%;}
.gift_pop>.pop_inner>.pop_cont>ul{position: fixed;top:0;padding: 67vw 16vw 0 36vw;}
.gift_pop>.pop_inner>.pop_cont>ul>li{font-size: 3.125vw;color:#fff;height: 7vw;line-height: 6.5vw;text-align: center;font-weight: 600;width:23vw;}
.gift_pop>.pop_inner>.pop_cont>a{position: absolute;width:32.03vw;height: 11.56vw;bottom: 12vw;left:50%;transform: translateX(-50%);}
.gift_pop>.pop_inner>.pop_cont>a > img {width:100%;}
.ani_pop_back {position: fixed;width: 100%;height: 100%;}
.ani_pop_top {position: relative;top: -7.0vw;left: 2.4vw;width: 89vw;}

.gaugewrap{width:199px !important;height: 25px !important;background-color: transparent !important;background-size: contain;background-repeat: no-repeat;margin:0 auto;border: none !important;}
.header-gauge{width:auto !important;}
.sub_title{text-align: center;height:34px;}
.sub_title>p>img{width:65.93vw;}
.header-gauge{bottom:65px !important;}
.header-gauge>h2>img{width:110px;}

.roultxt>p{text-align: center;padding-top:7.81vw;}
.roultxt>p>img{width:71.87vw;}
.container.doubles .roultxt{padding-top:3vw;}

.howto{width: 71.87vw;height: 57.7vw;background-image: url(../images/roul_gaevent_bg.png?v=3);background-repeat: no-repeat;background-size: contain;padding: 4.06vw 7.65vw 5.12vw 7.65vw;box-sizing: border-box;position: relative;margin: 0 auto;}
.howto.on{background-image: url(../images/roul_howto_bg.png);}
.howto .info {content:url(../images/btn_guerrilla_on.png);float:left;width:28vw;}
.howto .how {float:left;width:28vw;}
.howto.on .info {content:'';}
.howto.on .how {content:url(../images/btn_howto_on.png);}

.sub_container img{max-width: 100%;}
.sub_container *{font-family: 'SpoqaHanSansNeo-Regular';}
.sub_container{background-image: url(../images/sub_bg.jpg);background-size: cover;background-position: center top;padding-bottom: 8.59vw;}
.sub_container.doubles {padding-top:4vw;}
.history{width:71.87vw;height: 69.37vw;background-image: url(../images/roul_history_bg.png);padding:14.06vw 2.65vw 3.12vw 3.12vw;box-sizing: border-box;background-size: cover;margin:0 auto;margin-top:4.21vw;position: relative;}
.not_login{text-align: center;}
.not_login>p{font-size: 3.43vw;color:#fff;padding:14.06vw 0 3.12vw 0;}
.not_login>p>span{color:#79f6a8;}
.not_login>a{width:29.6875vw;display: inline-block;}
.history>.his_list{width:93%;margin: 0 auto;}
.history>.his_list>table{border-collapse: separate;border-spacing: 0px 5px;}
.history>.his_list>table tr{
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#50e4ff+0,ffffff+30,ffffff+100 */
   /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#cdf7ff+0,ffffff+30,ffffff+100 */
background: #cdf7ff; /* Old browsers */
background: -moz-linear-gradient(left,  #cdf7ff 0%, #ffffff 30%, #ffffff 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left,  #cdf7ff 0%,#ffffff 30%,#ffffff 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right,  #cdf7ff 0%,#ffffff 30%,#ffffff 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cdf7ff', endColorstr='#ffffff',GradientType=1 ); /* IE6-9 */
}
.history>.his_list>table tr:first-child{background:none;}
.history>.his_list>table th,.history>.his_list>table td{text-align: center;font-size: 2.81vw;height: 6.09vw;}
.history>.his_list>table th{color:#9fffff;}
.history>.his_list>table td{color:#084d1f;}
.history>.his_list>table td:nth-child(1){border-top-left-radius: 5px;border-bottom-left-radius: 5px;}
.history>.his_list>table td:nth-child(3){border-top-right-radius: 5px;border-bottom-right-radius: 5px;}
.his_btn{text-align: center;position: absolute;left:0;bottom: 1.5vw;width:100%;}
.his_btn>a{display: inline-block;width: 10.25vw;}
.his_btn>a+a{margin-left: 6.25vw;}


@media screen and (min-width: 400px) {
    .history{margin-top:15vw;}
}
@media screen and (min-width: 674px) {
    #roulettepage{height: auto;padding-bottom: 10vw;}
    .container{overflow: inherit;}
    .roulette{width:400px;height: 520px;}
    .roulette canvas{width:100%;}
    .top_cover{width:400px;}
    .pointer{width:40px;}
    .btn_area{width:400px;height: 400px;}
    .roulette:after{display: none;}
    .roulette .bottombg{width:520px;bottom:3px;}
    .header-gauge{bottom:55px !important;}
    .roulcont{top:-40px;right: 0;}
    .gaugewrap{width: 240px !important;}
}
/* galaxy fold */
@media screen and (max-width: 280px) {
    .container{height: 55%;}
    .sub_container{height: 35%;}
    .roulette{width:250px;height: 370px;}
    .roulette canvas{width:100%;}
    .btn_area{width:250px;height: 250px;}
    .roulette:after{display: none;}
    .roulette .bottombg{width:100%;}
    .roulcont{top:-50px;right: -12px;width: 111px;}
    .gaugewrap{width:160px !important;height: 19px !important;}
    .gaugewrap>#gaugebar{height: 10.5px;}
    .sub_notice img {width:50% !important;}
    #roulettepage{height: 425vw;}
}