@charset "utf-8";
@font-face {
    font-family: 'Pretendard-Regular';
    src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
}

body,button,input,textarea,a,label,select {
    font-family:'Pretendard-Regular', dotum, sans-serif;
    font-size: 12px;
    color: white;
}
body {padding: 0;margin: 0;background: #ffffff;}
div {position: relative;}
ul, li {list-style: none;margin: 0;padding: 0}
.pb_container {
  width: 830px;
  height: 640px;
  background:url(../assets/img/powerball/bg.jpg) no-repeat;
  overflow: hidden;
}

.pb_header {width: 100%;height: 100px;/* overflow:hidden; */}

.pb_header .pb_header_content {width: 100%;height: 100%;/* overflow:hidden; */display: flex;}
.pb_header_content .pb_header_left{display:block;width:25%;height: 100%;}
.pb_header_content .pb_header_center{width:50%;height: 100%;text-align: center;/* overflow:hidden; */} 
.pb_header_content .pb_header_right {width:25%;height: 100%;overflow:hidden;}
.pb_header .pb_header_content .pb_notice {
    position: absolute;
    width: 100%;
    bottom: -10px;
    padding-left: 10px;
    margin: 0 auto;
    font-size: 13px;
    text-shadow: 0 0 3px black;
}


.pb_header .pb_header_content .pb_header_right{}
.pb_header_timer {
    margin: 20px 20px;
    width: calc(100% - 40px);
    height: 40px;
    text-align: center;
    border-radius: 20px;
    background: #054350;
    box-shadow: inset 0 0 8px 1px rgb(0 0 0 / 70%);
    overflow: hidden;
}

.gmImg {
    display: block;
    position: absolute;
    background-image: url(../assets/img/powerball/img.png);
    cursor: pointer;
}

.topbtnBox {
    display: flex;
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.topbtnBox button {
    top: 41px;
    width: 45px;
    height: 45px;
    background-color: transparent;
    border: none
}

.topbtnBox .btn_ranking {
    left: 40px;
    background-position: 0 -67px
}

.topbtnBox .btn_mypick {
    left: 95px;
    background-position: -45px -67px
}

.topbtnBox .btn_help {
    right: 130px;
    background-position: -90px -67px
}

.topbtnBox .btn_scrap {
    right: 80px;
    background-position: -135px -67px
}

.topbtnBox .btn_sound {
    right: 30px;
    background-position: -180px -67px
}

.topbtnBox .btn_sound.off {
    background-position: -225px -67px
}

.popupbg {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-color: rgba(0,0,0,.5);
    overflow: hidden;
    z-index: 1;
}

.popuplayer {
    position: absolute;
    top: 0;
    right: 15px;
    width: 800px;
    z-index: 1500;
    background-color: #1b2429;
    box-sizing: border-box;
    padding-bottom: 10px
}

.popuplayer h2 {
    display: flex;
    align-items: center;
    justify-content: left;
    position: relative;
    background-position: 0 -125px;
    background-color: #0d3443;
    color: #fff;
    padding: 0 30px;
    height: 75px;
    font-weight: 700;
    letter-spacing: -1px
}

.popuplayer h3 {
    display: flex;
    align-items: center;
    justify-content: left;
    position: relative;
    height: 30px;
    background-position: 0 -141px;
    margin: 10px 0;
    padding: 0 20px;
    color: #4ab1c4;
    font-weight: 700;
    letter-spacing: -1px
}

.popuplayer ul.thlep {
    padding: 0 30px;
    margin: 0
}

.popuplayer .rankingScroll {
    display: none;
    height: 228px;
    margin: 25px 30px 10px;
    overflow: hidden;
    overflow-y: scroll
}

.popuplayer .mypickScroll {
    display: none;
    height: 228px;
    margin: 25px 30px 10px;
    overflow: hidden;
    overflow-y: scroll
}

.popuplayer .lodingBox {
    height: 228px;
    margin: 25px 30px 10px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center
}

.popuplayer ul.thlep li {
    line-height: 20px;
    color: #839299;
    font-size: 12px;
    letter-spacing: -1px
}

.popuplayer ul.mrank,.popuplayer ul.trank {
    padding-right: 15px
}

.popuplayer ul.mrank li,.popuplayer ul.trank li {
    display: flex;
    height: 40px;
    margin-bottom: 7px;
    border-radius: 5px;
    background-color: #131313;
    align-items: center;
    justify-content: left
}

.popuplayer ul.mrank li .col,.popuplayer ul.trank li .col {
    display: flex;
    height: 20px;
    align-items: center;
    justify-content: center;
    border-left: 1px solid rgba(255,255,255,.1);
    font-size: 12px;
    color: #fff;
    font-weight: 700;
    letter-spacing: -1px
}

.popuplayer ul.mrank li .col:first-child,.popuplayer ul.trank li .col:first-child {
    border: none
}

.popuplayer ul.trank li .rankNum {
    width: 55px
}

.popuplayer ul.trank li .rankNum .rankicon {
    position: relative;
    width: 23px;
    height: 22px
}

.popuplayer ul.trank li .rankNum .rankicon.r1 {
    background-position: -270px -67px
}

.popuplayer ul.trank li .rankNum .rankicon.r2 {
    background-position: -293px -67px
}

.popuplayer ul.trank li .rankNum .rankicon.r3 {
    background-position: -316px -67px
}

.popuplayer ul.trank li .nickBox {
    justify-content: left;
    width: 152px;
    padding: 0 12px
}

.popuplayer ul.trank li .nickBox .nick {
    margin-left: 3px
}

.popuplayer ul.trank li .pickRow {
    width: 69px
}

.popuplayer ul.trank li .pickRate {
    width: 130px;
    letter-spacing: 0
}

.popuplayer .mypickStats .rate .red,.popuplayer ul.mrank li .red,.popuplayer ul.trank li .red {
    color: #fe5e3a
}

.popuplayer .mypickStats .rate .blue,.popuplayer ul.mrank li .blue,.popuplayer ul.trank li .blue {
    color: #4695d7
}

.popuplayer ul.mrank li .gray {
    color: #7d7b7c
}

.popuplayer ul.trank li .todayMsg {
    justify-content: left;
    flex: 1;
    padding: 0 12px
}

.popuplayer ul.trank li .roomChat {
    width: 60px
}

.popuplayer ul.mrank li .round {
    width: 150px;
    letter-spacing: 0
}

.popuplayer ul.mrank li .mypick,.popuplayer ul.mrank li .category {
    width: 140px;
    letter-spacing: 0
}

.popuplayer ul.mrank li .result {
    flex: 1;
    color: #
}

.popuplayer .mypickStats {
    display: none;
    height: 50px;
    border-top: 1px solid #0a2833;
    border-bottom: 1px solid #0a2833;
    background-color: #114153;
    align-items: center;
    justify-content: center
}

.popuplayer .mypickStats .nickBox {
    margin-right: 20px;
    color: rgba(255,255,255,.5)
}

.popuplayer .mypickStats .nickBox .nick {
    color: #fff;
    font-weight: 700
}

.popuplayer .mypickStats .rate {
    color: #fff;
    margin-right: 20px
}

.popuplayer .default {
    line-height: 20px;
    color: #839299;
    font-size: 12px;
    letter-spacing: -1px;
    padding: 15px 30px 0
}

.popuplayer .default.btm {
    padding: 0 30px 15px
}

.popuplayer .codebox {
    display: flex;
    border-radius: 5px;
    padding: 10px;
    align-items: center;
    justify-content: center;
    background-color: #110803;
    margin: 10px 30px
}

.popuplayer .codebox p {
    flex: 1;
    word-break: break-all;
    color: #4ab1c4;
    font-family: Tahoma,Helvetica,sans-serif;
    font-size: 12px;
    letter-spacing: 0;
    padding: 10px 20px 10px 10px;
    margin-right: auto;
    text-align: left;
    margin-top: 15px
}

.popuplayer .codebox button {
    width: 145px;
    height: 45px;
    border-radius: 5px;
    background-color: #0d3443;
    color: #fff;
    font-weight: 700;
    border: none;
}

.popuplayer button.layer_close {
    z-index: 1;
    top: 22px;
    right: 22px;
    width: 31px;
    height: 31px;
    background-color: transparent;
    border: none;
    background-position: -175px -28px
}

.popuplayer button.arrow_close {
    position: relative;
    width: 14px;
    height: 7px;
    background-position: -206px -28px;
    margin: 0 auto
}



/*.pb_header .pb_header_content .pb_header_right .pb_switches{position: absolute;top: 0;width: 100%;height: auto;}
.pb_switches>ul {padding: 17px 10px 0;display: flex;list-style: none;flex-direction: row;justify-content: flex-end;}
.pb_switches>ul>li {
    width: 30px;
    height: 30px;
    cursor: pointer;
    margin: 0 2.5px;
    background: url(../assets/img/powerball/sp_dark_func.svg) no-repeat
}
.pb_switches>ul>li.btn_mode {background-position: 0 0}

.pb_switches>ul>li.btn_share {background-position: -35px 0}

.pb_switches>ul>li.btn_tip {background-position: -70px 0}

.pb_switches>ul>li.btn_sound.on {background-position: -105px 0}

.pb_switches>ul>li.btn_sound {background-position: -105px -35px}

.pb_switches>ul>li.btn_share.on {background-position: 0 -35px;z-index: 3}*/

.pb_header .pb_header_timer {
  width: 100%;
  text-align: center;
  font-size:1.0em;
  font-weight: bold;
  color: white;
  background: linear-gradient(90deg,#414E8E 0%,#A0D9FC 47.63%,#414E8E 98.62%);
  overflow: hidden;
}

.sup_time {
  position: absolute;
  top: 0;
  width: 100%;
  line-height: 40px;
  font-size: 14px;
  margin: 0;
  z-index: 1;
  text-shadow: 0 0 3px black;
}

.pb_body {display: flex;/* width: 100%; */height: 520px;padding: 10px 0;/* background: #0d1122; */justify-content: space-evenly;}

.pb_body_left {
    display: block;
    width: calc(5% - 20px);
    height: calc(100% - 40px);
}
.pb_body_center {
    width: 46%;
    height: calc(100% - 20px);
    padding: 15px 0 0;
    margin-right: 10px;
    border-radius: 34px;
    /* border: 1px solid #181f31; */
    /* background: #06070e; */
    overflow: hidden;
}
.pb_body_right {width: 34%;height: calc(100% - 40px);padding: 10px;margin-left: 10px;border-radius: 10px;overflow: hidden;}
.pb_body_right:before {
    /* content: ''; */
    /* width: calc(100% + 2px); */
    /* height: 5px; */
    /* position: absolute; */
    /* left: -1px; */
    /* top: -1px; */
    /* background: linear-gradient(90deg,#414E8E 0%,#A0D9FC 47.63%,#414E8E 98.62%); */
  }

.history {height: calc(100% - 30px);overflow: hidden;}
.history ul {width: 100%;height: 100%;}
.history li {list-style:none;}
.history_title {
  padding: 9px;
  font-size: 17px;
  color: #ebebeb;
  text-align: center;
  margin-bottom: 0px;
  font-weight: bold;
  text-shadow: 0 0 3px black;
}



/*.lottery_wrap.speedkeno .contents .side:before,.lottery_wrap.keno_ladder .contents .side:before {
    background: linear-gradient(90deg,#3E666F 0%,#7DDBF0 47.63%,#3E666F 98.62%)
}

.lottery_wrap.powerkeno_ladder .contents .side:before {
    background: linear-gradient(90deg,#0C9EBE 0%,#9FD8FB 47.63%,#0C9EBE 98.62%)
}
*/

.hist_item {border-radius: 5px;background-color: #1c6a85;/* border: 1px solid #445277; */margin-bottom: 8px;}
.hist_round{
  text-align:center;
  font-size: 13px;
  color:white;
  background: linear-gradient(to bottom, #1d6b87, #13475b);
  height:30px;
  line-height:30px;
  border: 1px solid #17576f;
  border-bottom: 1px solid #083e4b;
  border-radius: 5px 5px 0 0px;
  text-shadow: 0 0 3px black;
}
.hist_cov {
    background: linear-gradient(to bottom, #1d6b87, #13475b);
    border: 1px solid #17576f;
    border-top: 0;
    border-radius: 0 0 5px 5px;
}
.hist_balls {
  display: flex;
  height: 60px;
  line-height: 60px;
  color:white;
  justify-content: center;
  align-items: center;
  zoom: .7;
}
.hist_ball{
  display: flex;
  font-size: 18px;
  align-items: center;
  justify-content: center;
}

.hist_ball.rpb::before, .result_ball.rpb::before {
    position: absolute;
    content: 'p';
    font-size: 11px;
    background: #ffb400;
    background: -webkit-linear-gradient(45deg, #ffb400, #f0cc77);
    background: linear-gradient(45deg, #ffb400, #f0cc77);
    width: 14px;
    height: 14px;
    padding: 0 0 1px 1px;
    top: -3px;
    right: -3px;
    line-height: 14px;
    font-family: Arial, Helvetica, sans-serif;
    border-radius: 5px;
    font-weight: 400;
    display: block;
    text-align: center;
    font-weight: 600;
    border: 1px solid rgba(0, 0, 0, 0.5);
    text-shadow: 0 0 0;
    z-index: 1;
    color: #424242;
}

.hist_status{
  display: flex;
  height: 60px;
  line-height: 60px;
  color: white;
  zoom: .7;
  align-items: center;
  justify-content: center;
}

.pb_game{
  width: 100%;
  height: 532px;
  background: url('../assets/img/powerball/background_wall.gif') no-repeat;
/*  -webkit-filter: brightness(60%);
  filter: brightness(60%);*/
  border-radius: 30px;
  zoom: 0.745;
  overflow: hidden;
}

.pb_status {width: 100%;height: 300px;text-align: center;}

.pb_abs.ready {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 300px;
  height: 100px;
  margin-top: -50px;
  margin-left: -150px;
  font-size: 1.0em;
  background-color: rgb(71 71 71 / 35%);
  box-shadow: 0 0 16px 2px #000000;
  text-align:center;
  border: solid 1px #4d4d4d;
  border-radius: 20px;
}
.pb_abs.ready img {margin-top: 15px;}

.ready_round {
  height: 100%;
  line-height: 40px;
  font-size:20px;
  text-shadow: 0 0 3px black;
}

.pb_abs {
  position: absolute;
  left:0;
  top:0;
  width: 100%;
  height: 100%;
}

.pb_ball_result, .pb_stick {
  position: absolute;
  left:0;
  top:0;
  /* width:532px; */
  /* height: 532px; */
}

.pb_result_bar {
  position: absolute;
  left: -10px;
  top: 361px;
  width: 525px;
  height: 170px;
  overflow:hidden;
}



.pb_result_ball_effect{
  position:absolute;
  
  width:250px;
  height:250px; 
  
  margin-top:7px;
}

.pb_result_ball_effect:first-child {
  left:-53px;
}
.pb_result_ball_effect:nth-child(2){
  left:24px;
}
.pb_result_ball_effect:nth-child(3){
  left:102px;
}
.pb_result_ball_effect:nth-child(4){
  left:180px;
}
.pb_result_ball_effect:nth-child(5){
  left:258px;
}
.pb_result_ball_effect:nth-child(6){
  left:336px;
}

.pb_result_ball_effect div{
  position:absolute;
  left:50%;
  top:50%;
  transform: translate(-50%,-50%);  
}

.pb_result_ball { 
  width:200px;
  height:200px;
}

.pb_result_ball_num{
  position:absolute;
  left:50%;
  top:50%;
  transform: translate(-50%,-50%);
  color:  #FFFAF0;
  font-family: swagger,sans-serif;
  font-size:1.8em;
  font-weight: bold;
}

.result_panel{
  display:none;
  left: 50%;
  top: 50%;
  width:300px;
  height: 200px;
  margin-top: -100px;
  margin-left: -150px;
  line-height: 50px;
  background: #132f44;
  border-radius: 26px;
  font-size: 16px;
  box-shadow: 0 0 16px 2px #000000;
  text-align: center;
  border: solid 1px #043b5e;
}
.result_panel p {
    margin: 0;
    font-size: 18px;
}

.result_panel #result_powerball, .result_panel #result_sum {
    display: block;
    width: 100%;
    height: 60px;
    padding: 5px;
}
.result_panel #result_powerball div, .result_panel #result_sum div {background:url(../assets/img/powerball/result_ball.png) no-repeat;float: left;width: 55px;height: 55px;margin: 5px;}
#result_powerball .result_ball, #result_sum .result_ball{background-position:-122px -22px}

.status_row{
  position:relative;
  float:left;
  margin-top:10px;
  width:90%;
  left: calc(50% - 240px);
  height:40px;
  line-height:40px;
}
.pct_left{
  position: relative;
  float:left;
  top: calc(50% - 12px);
  width:45%;
  height:25px;
  border-radius: 15px 0 0 15px;
  background-color: #4682B4;
  overflow:hidden;
}
.pct_left_bg{
  position: relative;
  float:left; 
  width: 100%;
  height:100%;
  border-radius: 15px 0 0 15px;
  background:url('../assets/img/powerball/bg_time_gauge.png') #014ee4 repeat;
  
}
.pct_left_text{
  position: absolute;
  left:0;
  top: 0;
  width:90%;
  height:100%;
  line-height:25px;
  color:white;
  text-align:left;
  padding-left:10px;
}

.pct_right{
  position: relative;
  float:right;
  width:45%;
  height:25px;
  top: calc(50% - 12px);
  border-radius:0 15px 15px 0;
  background-color: #4682B4;
  overflow:hidden;
}
.pct_right_bg{
  position: relative;
  float:right;
  width: 100%;
  height:100%;
  border-radius:0 15px 15px 0;
  background:url('../assets/img/powerball/bg_time_gauge.png') #FF3030 repeat;
  
}

.pct_right_text{
  position: absolute;
  left:0;
  top: 0;
  width:95%;
  height:100%;
  line-height:25px;
  color:white;
  text-align:right;
}

.pct_mid{
  position:relative;
  float:none;
  top: calc(50% - 15px);
  left: calc(50% - 50px);
  width:90px;
  height: 30px;
}

.pct_mid_bg{
  position: relative;
  width: 100%;
  height:100%;
  border-radius:15px 15px 15px 15px;
  
  background:linear-gradient(to bottom, #ffffff,#E8E8E8);
}

.pct_mid_text{
  position:absolute;
  left:0;
  top:0;
  width:100%;
  height:100%;
  text-align:center;
  line-height:30px;
  color: #373b3f;
  font-size:1.3em;
  text-shadow: 1px 1px 1px rgba(255,255,255, .22);
}
.pct_bg_normal {
  background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#E8E8E8));
}
.pct_bg_blue {
  background: -webkit-gradient(linear, left top, left bottom, from(#018ee4), to(#014ee4));
}
.pct_bg_red {
  background: -webkit-gradient(linear, left top, left bottom, from(#F03030), to(#FF3030));
}


.bet_b {
  position: relative;
  float: left;
  width:30%;  
  height: 25px;
  top: 5px;
  margin-left:13px;
  
}
.bet_b_tag {
  position: relative;
  float: left;
  margin-top:-6px;
  margin-left:-10px;
  width:35px;
  height:35px;
  line-height:35px;
  background:white;
  border-radius: 15px 15px 15px 15px;
  
  font-size: 1.3em;
  z-index:99;
}

.bet_b_percent {
  position: absolute;
  float:right;
  width:90%;
  height:100%;
  left:9%;
  background: #4971c1;
  border-radius: 0px 10px 10px 0px;
  overflow:hidden;
}
.bet_b_bg {
  position: absolute;
  left:0;
  height:25px;
  width:100%;
  
  border-radius: 0px 10px 10px 0px;
  overflow:hidden;
}
.bet_b:nth-child(1) .bet_b_bg{
  background:url('../assets/img/powerball/bg_time_gauge.png') #014ee4 repeat;
}

.bet_b:nth-child(2) .bet_b_bg{
  background:url('../assets/img/powerball/bg_time_gauge.png') #FF3030 repeat;
}

.bet_b:nth-child(3) .bet_b_bg{
  background:url('../assets/img/powerball/bg_time_gauge.png') #30aa18 repeat;
}

.bet_b_text {
  position: absolute;
  left:20px;
  line-height:25px;
  top:0;
  color:white;
  overflow:hidden;
}

.skip {
  left: 20px;
  top:20px;
  font-size: 18px;
  color:red;
  cursor:pointer;
}

.nicescroll-rails {width: 17px;top: 153px !important;}
.nicescroll-cursors {border: 1px solid rgb(62 71 107)  !important;}

.timer_gauge {
    display: block;
    height: 40px;
    background-color: #57911c!important;
    -webkit-animation: cssProgressActiveRight 1.5s linear infinite;
    animation: cssProgressActiveRight 1.5s linear infinite;
    background-image: linear-gradient( -45deg,rgba(255,255,255,0.2) 25%,transparent 25%,transparent 50%,rgba(255,255,255,0.2) 50%,rgba(255,255,255,0.2) 75%,transparent 75%,transparent );
    background-size: 20px 20px;
    box-shadow: inset 0 0 14px 0px rgb(0 0 0 / 70%);
}

@-webkit-keyframes cssProgressActiveRight {
    0% {
        background-position: 0 0
    }

    100% {
        background-position: -20px -20px
    }
}

@-ms-keyframes cssProgressActiveRight {
    0% {
        background-position: 0 0
    }

    100% {
        background-position: -20px -20px
    }
}

@keyframes cssProgressActiveRight {
    0% {
        background-position: 0 0
    }

    100% {
        background-position: -20px -20px
    }
}