@charset "UTF-8";

.ranbox_top { padding: 45px 10px 18px; background: #edeaff; margin: 1rem 0 2rem 0; position: relative;}

.mole_container {padding: 20px; margin: 1.5rem 0; border: 1px solid #ddd; border-radius: 5px;}

.mole_info {padding: 10px; margin-bottom: 1rem; background: #111; border-radius: 3px; text-align: center; color: #fff;}
.mole_info a {font-size: 12px; position: relative; color: #fff;}
.mole_info a:hover {color: #000;}
.mole_info a span {background: #272c36; color: #fff; padding: 5px 10px; border-radius: 3px; margin-left: 5px;}
.mole_info a span:hover {opacity: 0.7;}
.mole_info img {position: absolute; width: 40px; top: -13px; left: -42px;}

.mole_tab ul {display: flex; justify-content: space-around; margin-bottom: 1rem;}
.mole_tab ul a {flex: 0 0 50%; text-align: center; display: inline-flex; justify-content: center; color: #fff;}
.mole_tab ul a li {width: 99%; background: #111; padding: 5px 0; border-radius: 3px;}
.mole_tab ul a li:hover {background: #ff9600;}
.mole_tab ul a li.mole_active {background: #ff9600;}

.mole_upto_money {}
.mole_upto_money>span img {width: 40px; position: absolute; top: -14px; left: -30px; z-index: 1;}
.mole_upto_money>span span {background: #272c36; color: #fff; padding: 10px 15px; font-weight: bold; border-radius: 15px 15px 0 0; font-size: 13px;}

.bodymove {
  animation: 1s bodymove ease-out infinite;
}

@keyframes bodymove {
  0% {
    opacity: 0;
    transform: translateY(80%);
  }
  20% {
    opacity: 0;
  }
  48% {
    opacity: 0.7;
  }
  50% {
    opacity: 1;
    transform: translateY(0%);
  }

  75% {
    opacity: 1;
    transform: translateY(0%);
  }

  100% {
    opacity: 1;
    transform: translateY(20%);
  }
}

.bodymove2 {
  animation: 2s bodymove2 ease-out infinite;
}

@keyframes bodymove2 {
  0% {
    opacity: 0;
    transform: translateY(80%);
  }
  20% {
    opacity: 0;
  }
  48% {
    opacity: 0.7;
  }
  50% {
    opacity: 1;
    transform: translateY(0%);
  }

  75% {
    opacity: 1;
    transform: translateY(0%);
  }

  100% {
    opacity: 1;
    transform: translateY(20%);
  }
}

.bodymove3 {
  animation: 2.5s bodymove3 ease-out infinite;
}

@keyframes bodymove3 {
  0% {
    opacity: 0;
    transform: translateY(80%);
  }
  20% {
    opacity: 0;
  }
  48% {
    opacity: 0.7;
  }
  50% {
    opacity: 1;
    transform: translateY(0%);
  }

  75% {
    opacity: 1;
    transform: translateY(0%);
  }

  100% {
    opacity: 1;
    transform: translateY(20%);
  }
}


.mole_item {background: url('img/aboxbg.jpg') no-repeat; background-size: 100% 100%; position: relative; height: 400px;}
.mole_item button {padding: 0 !important; position: absolute;}

.mole_item .mole-box {position: relative; width: 100%;}
.mole_item .mole-box img {width: 60px; position: absolute; left: 0; top: 0;}
.mole_item .mole_txt img {width: 100px;}
.aboxbtn-1 {left: 23%; top: 15%;}
.aboxbtn-2 {left: 45%; top: 15%;}
.aboxbtn-3 {left: 67.5%; top: 15%;}
.aboxbtn-4 {left: 23%; top: 44.5%;}
.aboxbtn-5 {left: 45%; top: 44.5%;}
.aboxbtn-6 {left: 67.5%; top: 44.5%;}
.aboxbtn-7 {left: 23%; top: 74%;}
.aboxbtn-8 {left: 45%; top: 74%;}
.aboxbtn-9 {left: 67.5%; top: 74%;}

#select_one.boxh-one,
#select_two.boxh-two,
#select_sam.boxh-sam,
#select_sa.boxh-sa,
#select_o.boxh-o,
#select_yuk.boxh-yuk,
#select_seven.boxh-seven,
#select_pal.boxh-pal,
#select_goo.boxh-goo
{display: none;}

#select_one,
#select_two,
#select_sam,
#select_sa,
#select_o,
#select_yuk,
#select_seven,
#select_pal,
#select_goo,
#select_box
{
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgb(0 0 0 / 20%);
  z-index: 1111;
  backdrop-filter blur(1px);

}

.mole_txt {font-size: 14px;}

.box_open {background: #fff; width: 500px; text-align: center; padding: 30px; position: relative; border-radius: 10px; box-shadow: 0 0px 13px 1px #00000091;}
.box_open center {margin-top:1rem;}
.box_open input {width: 135px; height: 40px; color: #fff; font-weight: bold;}
.box_open input:hover {color: #fff; opacity: 0.7;}
.box_open .btn-open {background: #272c36;}
.box_open .btn-close {background: #525252;}

.box_hist_table table {width: 100%;}
.box_hist_table thead {font-size: 14px; background: #f3f3f3; text-align: center;}
.box_hist_table tbody {text-align: center;}
.box_hist_table tbody tr {height: 30px;}
.box_hist_table tbody tr:nth-child(even) {background: #ffeded;}

.noboxcoup {width: 100%; height: 100%; background: #0000009c; position: relative;}
.noboxcoup p { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 1rem; color: #fff;}

@media all and (max-width:767px){
	.mole_container {padding: 0;}

  .mole_item .mole-box img {width: 50px; position: absolute; left: 0; top: 0;}
  .aboxbtn-1 {left: 23%; top: 18%;}
  .aboxbtn-2 {left: 45%; top: 18%;}
  .aboxbtn-3 {left: 67.5%; top: 18%;}
  .aboxbtn-4 {left: 23%; top: 47.5%;}
  .aboxbtn-5 {left: 45%; top: 47.5%;}
  .aboxbtn-6 {left: 67.5%; top: 47.5%;}
  .aboxbtn-7 {left: 23%; top: 77%;}
  .aboxbtn-8 {left: 45%; top: 77%;}
  .aboxbtn-9 {left: 67.5%; top: 77%;}

  .mole_upto_money>span span {font-size: 12px;}
}

@media all and (max-width:575px){

  .mole_item .mole-box img {width: 50px; position: absolute; left: 0; top: 0;}
  .aboxbtn-1 {left: 22%; top: 18%;}
  .aboxbtn-2 {left: 44%; top: 18%;}
  .aboxbtn-3 {left: 66.5%; top: 18%;}
  .aboxbtn-4 {left: 22%; top: 47.5%;}
  .aboxbtn-5 {left: 44%; top: 47.5%;}
  .aboxbtn-6 {left: 66.5%; top: 47.5%;}
  .aboxbtn-7 {left: 22%; top: 77%;}
  .aboxbtn-8 {left: 44%; top: 77%;}
  .aboxbtn-9 {left: 66.5%; top: 77%;}
}

@media all and (max-width:476px){

  .mole_item .mole-box img {width: 42px; position: absolute; left: 0; top: 0;}
  .aboxbtn-1 {left: 20%; top: 18%;}
  .aboxbtn-2 {left: 42%; top: 18%;}
  .aboxbtn-3 {left: 64.5%; top: 18%;}
  .aboxbtn-4 {left: 20%; top: 47.5%;}
  .aboxbtn-5 {left: 42%; top: 47.5%;}
  .aboxbtn-6 {left: 64.5%; top: 47.5%;}
  .aboxbtn-7 {left: 20%; top: 77%;}
  .aboxbtn-8 {left: 42%; top: 77%;}
  .aboxbtn-9 {left: 64.5%; top: 77%;}
}