@charset "UTF-8";

.prog_box {
  background: url('/img/widgetimg/pc_jackpot_bg.png') no-repeat;
  background-size: 100% 100%;
  padding-bottom: 27%;
  position: relative;
}

.prog_box .rank_adm {position: absolute; top: 5px; right: 5px; z-index: 11; background: #333; color: #fff; padding: 5px 10px; border-radius: 5px;}
.prog_box .rank_adm:hover {background: red;}

.prog_container {display: flex; width: 100%; height: 100%; position: absolute;}
.prog_container>div {flex: 0 0 56%; position: relative;}
.prog_container>div:last-child {flex: auto;}

.nums_box {
  position: absolute;
  left: 29%;
  top: 48%;
  width: 75%;
}
.nums {
  display: inline-block;
  width: 9.7%;
	color: #000;
	border-radius: 5px;
	font-family: "Kode Mono", monospace;
	font-weight: bold;
	text-shadow: 1px 3px 3px #00000069;
	font-size: 1.4rem;
  text-align: center;
}
.nums_comma {position: relative;}
.nums_comma span {position: absolute; top: -6px; left: -7px; font-size: 2rem; font-weight: bold; color: #fff;}


.jp_rank_box {
  display: flex;
  position: absolute;
  justify-content: space-between;
  top: 15.8%;
  left: 55%;
  width: 77%;
  transform: translate(-50%, 0);
  color: #fff;
  font-size: 20px;
  font-weight: bold;
  text-shadow: 0px 0px 3px #000000;
  text-align: center;
}

.jp_rank_box:nth-child(2) {top: 42.5%;}
.jp_rank_box:nth-child(3) {top: 68%;}

.jp_name {flex: 0 0 49%;}
.jp_money {flex: 0 0 36%;}

@media all and (max-width:880px) {
  .nums_box {
    top: 47%;
  }
  .nums {width: 9.3%; font-size: 1.2rem;}
  .nums_comma span {font-size: 1.5rem;}

  .jp_rank_box {font-size: 1.2rem;}
}

@media all and (max-width:767px) {
  .nums_box {
    top: 48%;
  }
  .nums {width: 9.6%;}
  .nums_comma span {font-size: 1.5rem; top: -1px; left: -6px;}

  .jp_rank_box {font-size: 1rem;}
}

@media all and (max-width:640px) {
  .nums_box {
    top: 48%;
  }
  .nums {width: 9.4%; font-size: 1rem;}
  .nums_comma span {font-size: 1.3rem; top: 1px; left: -5px;}
}

@media all and (max-width:540px) {
  .nums_box {
    top: 48%;
  }
  .nums {width: 9.1%; font-size: 12px;}
  .nums_comma span {font-size: 1.3rem; top: -4px; left: -5px;}

  .jp_rank_box {font-size: 12px;}
  .jp_rank_box:nth-child(2) {top: 42%;}
}

@media all and (max-width:480px) {
  .prog_box {
    background: url('/img/widgetimg/mo_jackpot_bg.png') no-repeat;
    background-size: 100% 100%;
    padding-bottom: 100%;
  }
  .prog_container {flex-direction: column;}
  .prog_container>div {flex: 0 0 53%;}

  .nums_box {
    top: 77%;
    left: 20.5%;
  }
  .nums {width: 10.7%; font-size: 1rem;}
  .nums_comma span { font-size: 1.5rem; top: 0; left: -5px;}

  .jp_rank_box {font-size: 1rem; top: 10%; left: 53%; width: 66%;}
  .jp_rank_box:nth-child(2) {top: 40%;}
  .jp_rank_box:nth-child(3) {top: 70%;}
  .jp_name {flex: 0 0 53%;}
}

@media all and (max-width:380px) {
  .nums_box {top: 76%;}
  .nums {width: 10.5%; font-size: 1rem;}
  .nums_comma span {left: -7px;}

  .jp_rank_box {font-size: 1rem; top: 9%; left: 53%; width: 66%;}
  .jp_rank_box:nth-child(2) {top: 39%;}
  .jp_rank_box:nth-child(3) {top: 69%;}
}