@font-face {
  font-family: "NanumSquareNeo-Variable";
  src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_11-01@1.0/NanumSquareNeo-Variable.woff2")
    format("woff2");
  font-weight: normal;
  font-style: normal;
}
.bean-daily-gamble {
  margin-top: unset !important;
}
.daily-gamble {
  max-width: 500px;
  width:100%;
  height: 100%;
}

.daily-gamble .daily-gamble-wrap {
  width: 100%;
  min-height: 100vh;
  /* mobile viewport bug fix */
  min-height: -webkit-fill-available;
}
.daily-gamble .daily-gamble-wrap .daily-gamble-top {
    width: 500px;
  height: 50px;
  background:rgb(118,201,220,1);
  display: flex;
  justify-content: space-between;
  padding: 10px 12px 10px 15px;
  position: fixed;
  top: 50px;
  z-index: 10;
}
.daily-gamble .daily-gamble-wrap .title-deco-area {
    max-width: 500px; width:100%;
  position: fixed;
  top: 100px;
  z-index: 4;
  display: flow-root;
}
.daily-gamble .daily-gamble-wrap .title-deco-area img {
  width: 100%;
}
.daily-gamble .daily-gamble-wrap .daily-gamble-top .daily-gamble-title .titlep {
  color: #fff;
  font-size: 17px;
  font-weight: 700;
  font-family: "NanumSquareNeo-Variable";
  padding-top: 6px;
}

.daily-gamble .daily-gamble-wrap .daily-gamble-top .mykong-account {
  background: #fff;
  height: 30px;
  width: 160px;
  line-height: 30px;
  border-radius: 50px;
  display: flex;
  justify-content:flex-end;  gap:5px;
  box-shadow: 1px 1px 2px #9d9d9d, inset 0px 1px 2px #afafaf;
  position: relative;
}
.daily-gamble .daily-gamble-wrap .daily-gamble-top .mykong-account .gamble-kong {position: absolute; bottom:calc(50% - 21px); left:0px; height:42px;}
.daily-gamble
  .daily-gamble-wrap
  .daily-gamble-top
  .mykong-account
  .kong-add-btn {
  background: none;
}
.daily-gamble .daily-gamble-wrap .daily-gamble-top .mykong-account .gamble-kong,
.daily-gamble
  .daily-gamble-wrap
  .daily-gamble-top
  .mykong-account
  .kong-add-btn
  .kong-add {
  padding: 3px;
}
.daily-gamble
  .daily-gamble-wrap
  .daily-gamble-top
  .mykong-account
  .kong-add-btn
  .kong-add {
  height: 100%;
}
.daily-gamble
  .daily-gamble-wrap
  .daily-gamble-top
  .mykong-account
  .balance-area {
  width: 90px;
}
.daily-gamble
  .daily-gamble-wrap
  .daily-gamble-top
  .mykong-account
  .balance-area
  .balance {
  display: -webkit-box;
  word-wrap: break-word;
  overflow: hidden;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
  -webkit-line-clamp: 1;
  text-align: right;
  font-weight: 600;
  font-family: "NanumSquareNeo-Variable";
}
/* 컨텐츠 시작*/
.daily-gamble .daily-gamble-wrap .daily-content-wrap {
  width: 100%;
  height: calc(100vh - 100px);
  position: absolute;
  top: 100px;
}
.daily-gamble .daily-gamble-wrap .daily-content-wrap .daily-content-area {
  width: 100%;
  height: calc(100% - 45px);
  overflow-y: auto;
  overflow-x: hidden;
  padding: 10px;
}

.daily-bean-box {
  width: 100%;
  height: 100px;
  position: relative;
  border-radius: 10px;
  margin-top: 15px;
}
.daily-bean-box .bean-box-info {
  box-shadow: 1px 1px 11px #d0e3d9;
  padding: 10px 20px;
  border-radius: 15px;
  display: flow-root;
}

.daily-bean-box .bean-box-info .bean-box-area {
  width: 80px;
  height: 80px;
  background: #fff395;
  border-radius: 50px;
  float: left;
}
.daily-bean-box .bean-box-info .bean-box-area .bean-box-img {
  width: 75%;
  position: relative;
  left: 50%;
  transform: translate(-50%, 2px);
}
.daily-bean-box .bean-box-info .bean-box-text {
  float: left;
  top: 50%;
  position: relative;
  transform: translate(20px, 50%);
}
.daily-bean-box .bean-box-info .bean-box-text .title {
  font-family: "NanumSquareNeo-Variable";
  font-size: 15px;
  font-weight: bold;
}
.daily-bean-box .bean-box-info .bean-box-text .sub-title {
  font-family: "NanumSquareNeo-Variable";
  color: #03c75b;
  font-weight: 400;
  margin-top: 5px;
}
.daily-bean-box .bean-box-info .bean-box-text .success {
  display: none;
}
/*식탐콩 박스 오픈*/
.daily-gamble-wrap .bean-box-open {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 60px;
  overflow: hidden;
}
.daily-gamble-wrap .bean-box-open .bean-box-open-bg {
  width: 100%;
  height: 100%;
  background: black;
  opacity: 0.7;
}
.daily-gamble-wrap .bean-box-open .bean-box-close {
  width: 30px;
  height: 30px;
  right: 15px;
  position: absolute;
  border: 2px solid #b0e548;
  background: #74a510;
  border-radius: 50px;
  z-index: 2;
  top: 60px;
}

.daily-gamble-wrap .bean-box-open .bean-box-close .box-close-btn {
  width: 30px !important;
  height: 30px;
  position: absolute;
  bottom: -2px;
  left: -2px;
  background: none;
}
.daily-gamble-wrap .bean-box-open .bean-box-close:before {
  transform: rotate(45deg);
}
.daily-gamble-wrap .bean-box-open .bean-box-close:after {
  transform: rotate(-45deg);
}
.daily-gamble-wrap .bean-box-open .bean-box-close:before,
.daily-gamble-wrap .bean-box-open .bean-box-close:after {
  position: absolute;
  right: 11px;
  top: 5px;
  content: "";
  height: 15px;
  width: 3px;
  background-color: #fff;
  z-index: -1;
}

.daily-gamble-wrap .bean-box-open .box-open-area {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  background:url(/assets/img/egg/bg_3.png) no-repeat ; background-position:bottom 100px center ;
}
.daily-gamble-wrap .bean-box-open .box-open-area .open-text-info {
  width: 100%;
  position: relative;
  margin-bottom: 70px;
}
.daily-gamble-wrap .bean-box-open .box-open-area .open-text-info .info-arrow {
  position: absolute;
  width: 35px;
  left: 45%;
  transform: translate(-50%, 0px);
  top: 35px;
}
.daily-gamble-wrap
  .bean-box-open
  .box-open-area
  .open-text-info
  .info-arrow
  .arrow_bean {
  transform: rotate(293deg);
  width: 100%;
  position: absolute;
  margin: 0 !important;
}
.daily-gamble-wrap .bean-box-open .box-open-area .open-text-info .info-text {
  position: absolute;
  font-family: "NanumSquareNeo-Variable";
  color: rgba(25,121,138,1);
  font-size: 20px;
  font-weight: bold;
  width: 100%;
  display: flex;
  justify-content: center;
}
.daily-gamble-wrap .bean-box-open .box-open-area .main-open-btn {
  left: 50%;
  width: 100%;
  position: relative;
  transform: translate(-50%, 220px);
  background: none;
  z-index: 2;
  bottom: 100px;
}

@media screen and (max-width: 499px){

}
.daily-gamble-wrap .bean-box-open .box-open-area .main-open-btn img {
  width: 60%;
  margin-top: -30px;
}
.daily-gamble-wrap
  .bean-box-open
  .box-open-area
  .main-open-btn
  .bean-box-bg-wrap {
  width: 100%;
  height: 100%;
}
.daily-gamble-wrap
  .bean-box-open
  .box-open-area
  .main-open-btn
  .bean-box-bg-wrap
  .bean-box-bg {
  width: 100%;
  height: 105%;
  min-height:100vh;
  background: black;
  position: absolute;
  z-index: 1;
  opacity: 0.7;
  top: -80px;
  left: 50%;
  transform: translate(-50%, 10px);
  border-radius: 20px;
}
.daily-gamble-wrap
  .bean-box-open
  .box-open-area
  .main-open-btn
  .bean-box-bg-wrap
  .bean-bg-text {
  color: #fff;
  position: absolute;
  font-family: "NanumSquareNeo-Variable";
  z-index: 4;
  left: 50%;
  transform: translate(-50%, -20px);
  font-size: 23px;
  top: 10%;
}
.daily-gamble-wrap .bean-box-open .box-open-area .box-touch {
  font-family: "NanumSquareNeo-Variable";
  font-size: 19px;
  color: #fff;
  background: none;
  width: 90%;
  position: relative;
  left: 50%;
  transform: translate(-50%, 140px);
  padding: 10px 0;
  border-radius: 10px;
}
.daily-gamble-wrap .bean-box-open .box-open-area .box-touch img {width:100%;}
.daily-gamble-wrap .bean-box-open .bean-box-effect {
  position: absolute;
  z-index: 5;
  top: 0;
  width: 100%;
  height: 100%;
}
.daily-gamble-wrap .bean-box-open .bean-box-effect .effect-img {
  position: relative;
  left: 50%;
  width: 100%;
  transform: translate(-50%, -125px);
}

.daily-gamble-wrap .share-wrap {
  width: 100%;
  height: 100%;
  z-index: 4;
  position: absolute;
}
.daily-gamble-wrap .share-wrap .share-bg {
  width: 100%;
  height: 100%;
  background: black;
  opacity: 0.7;
}
.daily-gamble-wrap .share-wrap .share-area {
  position: absolute;
  z-index: 6;
  width: 80%;
  background: #fff;
  left: 10%;
  top: 250px;
  border-radius: 15px;
}

.daily-gamble-wrap .share-wrap .share-area .share-title {
  text-align: center;
  display: block;
  font-size: 20px;
  font-weight: bold;
  padding: 10px;
  color: #fff;
  font-family: "NanumSquareNeo-Variable";
  background: #91e75c;
  border-radius: 15px 15px 0 0;
}
.daily-gamble-wrap .share-wrap .share-area .share-close {
  position: relative;
  padding-right: 8px;
  float: right;
  margin-top: -39px;
}
.daily-gamble-wrap .share-wrap .share-area .share-close button {
  width: 30px;
  height: 30px;
  background: none;
}
.daily-gamble-wrap .share-wrap .share-area .share-close::after {
  transform: rotate(-45deg);
}
.daily-gamble-wrap .share-wrap .share-area .share-close::before {
  transform: rotate(45deg);
}
.daily-gamble-wrap .share-wrap .share-area .share-close::after,
.daily-gamble-wrap .share-wrap .share-area .share-close::before {
  position: absolute;
  right: 22px;
  top: 6px;
  content: "";
  height: 20px;
  width: 2px;
  background-color: #ffff;
}
.daily-gamble-wrap .share-wrap .share-area .share-list {
  display: flex;
  margin: 20px 0 20px 0;
}
.daily-gamble-wrap .share-wrap .share-area .share-list .share-item {
  margin-top: 1px;
  width: calc(100% / 3);
  text-align: center;
  display: flex;
  justify-content: center;
}
.daily-gamble-wrap .share-wrap .share-area .share-list .share-item .share-link {
  display: block;
  width: 66px;
  height: 65px;
  float: left;
}
.daily-gamble-wrap
  .share-wrap
  .share-area
  .share-list
  .share-item
  .share-link
  img {
  display: flex;
  margin: 5px auto;
}
.daily-gamble-wrap
  .share-wrap
  .share-area
  .share-list
  .share-item
  .share-link
  span {
  font-family: "NanumSquareNeo-Variable";
  font-size: 13px;
}
.bean-box-success .box-open-bg {
  background: black;
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 10;
  top: 0;
  opacity: 0.7;
}
.bean-box-success .bean-success-wrap {
  padding: 10px;
  position: relative;
  z-index: 16;
  top: 50px;
}
.bean-box-success .bean-success-wrap .success-img-sub {
  position: absolute;
  width: 100%;
}
.bean-box-success .bean-success-wrap .bean-success-area {
    width: 100%;
    max-width: 480px;
    margin: 0 auto;
    height: 700px;
    background: url(/assets/img/egg/bg_pup_a.png) center top no-repeat;
    background-size: 100%;
    z-index: 20;
    position: relative;
}

.bean-box-success
  .bean-success-wrap
  .bean-success-area
  .bean-box-success
  .success-bean {
    height: 220px;
    display: inline-block;
    left: 50%;
    position: relative;
    transform: translate(-50%, 0px);
    margin-top: 150px;
}

.bean-box-success
  .bean-success-wrap
  .bean-success-area
  .bean-box-success
  .success-bean
  .success-img {
  position: unset !important;
  height: 100%;
}

.bean-box-success .bean-success-wrap .bean-success-area .gamble-success-com {
  text-align: center;
  line-height: 25px;
  font-size: 17px;
  max-width: 90%;
  position: relative;
  transform: translate(-50%, 0);
  left: 50%;
  padding-bottom: 10px;
}

.bean-box-success
  .bean-success-wrap
  .bean-success-area
  .gamble-success-com
  .success-com {
  font-family: "NanumSquareNeo-Variable";
  font-weight: 700;
}

.bean-box-success
  .bean-success-wrap
  .bean-success-area
  .gamble-success-com
  .success-com
  .success-type {
  font-family: "NanumSquareNeo-Variable";
  font-weight: 700;
  color: #03c75b;
}
.bean-box-success .gamble-box-check {
    color: #fff;
    font-family: "NanumSquareNeo-Variable";
    left: 50%;
    top: 500px;
    position: absolute;
    transform: translate(-50%, 20px);
    background: none;
    padding: 0;
    font-size: 20px;
    width: 70%;
    z-index: 1000;
}