@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; } 
@font-face { font-family: "NeoDunggeunmo"; src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.3/NeoDunggeunmo.woff")
 format("woff"); font-weight: normal; font-style: normal; } 
.egg-gamble-container { margin-top: unset !important; } 
/* .egg-gamble { width: 100%; height:calc(100vh - 50px); background: url(../img/egg/bg_2.png) top center no-repeat rgba(133,149,152,1); background-size: 100% auto; position: absolute; }  */
.egg-gamble { width: 100%; height:calc(100vh - 50px);  background-color: var(--main-bg-color); background-size: 100% auto; position: absolute; } 



.egg-gamble .egg-gamble-wrap { width: 100%; height: 100vh;  padding-bottom: 60px;;  /* mobile viewport bug fix */ overflow-y: auto;}
 /* min-height: -webkit-fill-available; position: relative; overflow-y: auto; }  */
/* .egg-gamble .egg-gamble-wrap .gamble-box-title { width:100%; max-width:500px; background:url(../img/egg/bg_top.png); background-size: 100% 64px; height:64px; display: flex; align-items: center; justify-content: space-between; padding: 0 12px 0 0; position: fixed; top: 50px; z-index: 2; }  */
.egg-gamble .egg-gamble-wrap .gamble-box-title { width:100%; max-width:500px; background:url(../img/egg/bg_top1.png); background-size: 100% 64px; height:60px; display: flex; align-items: center; justify-content: space-between; padding: 0 12px 0 0; position: fixed; top: 50px; z-index: 2; } 
.egg-gamble .egg-gamble-wrap .gamble-box-title .gamble-titlep { color: #fff; font-size: 17px; font-weight: 700; font-family: "NanumSquareNeo-Variable"; height:95%; } 
.egg-gamble .egg-gamble-wrap .gamble-box-title .gamble-titlep img { height:100%; } 
.egg-gamble .agg-input { position: relative; background:url(../img/egg/bg_input.png) no-repeat; width:174px; height:41px; margin-top:5px; } 
.egg-gamble .agg-input img { position: absolute; width:auto; } 
.egg-gamble .agg-input img.pic1 { top:0px; left:8px; height:38px; } 
.egg-gamble .agg-input img.pic2 { top:8px; right:12px; height:23px; } 
.egg-gamble .agg-input .balance-area { border: none; background: none; display: flex; align-items: center; justify-content: flex-end; padding:0px 45px 3px 20px; color: #fff; font-weight: 900; font-size: 18px; width:100%; text-align: right; text-shadow: 0 0 9px rgba(255,255,86,0.7); display: flex; align-items: center; height:100%; } 



.egg-gamble .egg-gamble-wrap .my-inventory-wrap { color: #ffffff; background: #ff9b00; right: 10px; display: flex; align-items: center; justify-content: center; top: 106px; position: absolute; font-family: "NanumSquareNeo-Variable"; padding: 6px 15px; border-radius: 5px; z-index: 3; } 
.egg-gamble .egg-gamble-wrap .prize_btn { background: #ff9b00; font-family: "NanumSquareNeo-Variable"; top: 106px; color: #fff; padding: 6px 15px; border-radius: 5px; z-index: 3; position: absolute; right: 103px; } 
/*공유하기*/
.egg-gamble .egg-gamble-wrap .share-wrap { width: 100%; height: 100%; z-index: 557; position: absolute; top: 0; } 
.egg-gamble .egg-gamble-wrap .share-wrap .share-bg { width: 100%; height: 100%; background: black; opacity: 0.7; } 
.egg-gamble .egg-gamble-wrap .share-wrap .share-area { position: absolute; z-index: 6; width: 80%; background: #fff; left: 10%; top: 250px; border-radius: 15px; } 
.egg-gamble .egg-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; } 
.egg-gamble .egg-gamble-wrap .share-wrap .share-area .share-close { width: 30px; height: 30px; position: absolute; right: 2px; top: 1px; cursor: pointer; } 
.egg-gamble .egg-gamble-wrap .share-wrap .share-area .share-close:before { transform: rotate(45deg); } 
.egg-gamble .egg-gamble-wrap .share-wrap .share-area .share-close:after { transform: rotate(-45deg); } 
.egg-gamble .egg-gamble-wrap .share-wrap .share-area .share-close:before,
.egg-gamble .egg-gamble-wrap .share-wrap .share-area .share-close:after { position: absolute; right: 13px; top: 5px; content: ""; height: 19px; width: 3px; background-color: #fff; border-radius: 5px; } 
.egg-gamble .egg-gamble-wrap .share-wrap .share-area button { width: 30px; height: 30px; background: none; } 
.egg-gamble .egg-gamble-wrap .share-wrap .share-area .share-list { display: flex; margin: 20px 0 20px 0; } 
.egg-gamble .egg-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; } 
.egg-gamble .egg-gamble-wrap .share-wrap .share-area .share-list .share-link { display: block; width: 66px; height: 65px; float: left; } 
.egg-gamble 
 .egg-gamble-wrap
 .share-wrap
 .share-area
 .share-list
 .share-link
 img { display: flex; margin: 5px auto; } 
.egg-gamble 
 .egg-gamble-wrap
 .share-wrap
 .share-area
 .share-list
 .share-link
 span { font-family: "NanumSquareNeo-Variable"; font-size: 13px; } 
.egg-gamble .egg-gamble-wrap .title-deco-area { width: 500px; position: fixed; top: 100px; z-index: 2; display: flow-root; } 
.egg-gamble .egg-gamble-wrap .title-deco-area .prize-btn { background: #ffbe00; color: #fff; float: right; margin-right: 10px; padding: 5px 10px; border-radius: 5px; font-family: "NanumSquareNeo-Variable"; margin-top: 3px; } 
.egg-gamble .egg-gamble-wrap .title-deco-area img { width: 100%; } 
.egg-gamble .egg-gamble-wrap .gamble-box-wrap { width: 100%; height: 100%; position: relative; top:120px; padding: 0 0 220px 0}

.egg-gamble .egg-gamble-wrap .success-product-pop { width: 100%; height: 100%; position: absolute; top: 0; z-index: 556; } 
.egg-gamble .egg-gamble-wrap .success-product-pop .product-pop-bg { width: 100%; height: 100%; background: black; opacity: 0.7; } 
.egg-gamble .egg-gamble-wrap .success-product-pop .product-pop-wrap { width: 100%; height: 100%; position: absolute; top: 0; } 
.egg-gamble 
 .egg-gamble-wrap
 .success-product-pop
 .product-pop-wrap
 .product-pop-area { left: 50%; position: absolute; transform: translate(-50%, 50px); width: 100%; margin: 0 auto; height: 700px; background: url(/assets/img/egg/bg_pup_a.png) center top no-repeat; background-size: 100%; z-index: 4; position: relative; } 

.egg-gamble .egg-gamble-wrap .success-product-pop .product-pop-wrap .product-pop-area .innerBox { padding-top:25%;; display: flex; flex-direction: column; align-items: center; width:60%; margin: 0 auto; } 
.egg-gamble 
 .egg-gamble-wrap
 .success-product-pop
 .product-pop-wrap
 .product-pop-area
 .box-title { font-family: "NanumSquareNeo-Variable"; font-size: 24px; text-align: center; font-weight: 900; padding: 10px; color: #FFF; letter-spacing: -1px;; } 
.egg-gamble 
 .egg-gamble-wrap
 .success-product-pop
 .product-pop-wrap
 .product-pop-area
 .box-product {   box-shadow: 0 0 7px rgba(0,0,0,.3) inset, 0 3px 0 rgba(240,154,202,1) inset; 
    font-size:16px; font-weight:700;
    border-radius:30px; display: flex; align-items: center;   padding:15px 20px; width:100%; text-align: center; justify-content: center; } 
.egg-gamble 
 .egg-gamble-wrap
 .success-product-pop
 .product-pop-wrap
 .product-pop-area
 .product-pop-close { padding:20px 0 0 0; } 
.egg-gamble 
 .egg-gamble-wrap
 .success-product-pop
 .product-pop-wrap
 .product-pop-area
 .product-pop-close
 .pop-close { background: none; } 
.egg-gamble 
 .egg-gamble-wrap
 .success-product-pop
 .product-pop-wrap
 .product-pop-area
 .product-pop-close
 .pop-close img { width:100%; } 
.egg-gamble 
 .egg-gamble-wrap
 .gamblebox-open-wrap
 .box-success-effect
 .skin-skill-on,
.egg-gamble 
 .egg-gamble-wrap
 .gamblebox-open-wrap
 .box-fail-effect
 .skin-skill-on,
.egg-gamble 
 .egg-gamble-wrap
 .gamblebox-open-wrap
 .box-Specialeffect
 .skin-skill-on { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -80px); text-shadow: -1px 0 #000, 0 1px #000, -1px 0 #000, 0 1px #000; width: 100%; } 
.egg-gamble 
 .egg-gamble-wrap
 .gamblebox-open-wrap
 .box-success-effect
 .skill-com-area,
.egg-gamble 
 .egg-gamble-wrap
 .gamblebox-open-wrap
 .box-fail-effect
 .skill-com-area,
.egg-gamble 
 .egg-gamble-wrap
 .gamblebox-open-wrap
 .box-Specialeffect
 .skill-com-area { animation: skill-com 0.3s 0.3s; /*이름, 진행시간, 가속도, 지연시간, 반복횟수, 연결방향*/
 animation-delay: 0.2s; animation-fill-mode: both; } 
@keyframes skill-com { 
 0% { opacity: 0; } 
 50% { opacity: 1; transform: translate(0, -10px); } 

 100% { opacity: 1; } 
 }
.egg-gamble 
 .egg-gamble-wrap
 .gamblebox-open-wrap
 .box-success-effect
 .skin-skill-on
 p,
.egg-gamble 
 .egg-gamble-wrap
 .gamblebox-open-wrap
 .box-fail-effect
 .skin-skill-on
 p,
.egg-gamble 
 .egg-gamble-wrap
 .gamblebox-open-wrap
 .box-Specialeffect
 .skin-skill-on
 p { font-family: "NeoDunggeunmo"; font-size: 35px; text-align: center; color: #ffee00; } 


.egg-gamble .egg-gamble-wrap .gamble-box-wrap .egg-box-wrap .bean-box-area { padding: 0 15px; } 
.egg-gamble .egg-gamble-wrap .gamble-box-wrap:after { content: ""; display: block; clear: both; } 

.egg-gamble .egg-gamble-wrap .gamble-box-wrap .gamble-box-tag { position: absolute; width: 90px; z-index: 1; left: -6px; top: -6px; } 
.egg-gamble 
 .egg-gamble-wrap
 .gamble-box-wrap
 .gamble-vipbox-wrap
 .box-content { display: flex; } 
.egg-gamble .egg-gamble-wrap .gamble-box-wrap .gamble-vipbox-wrap { width: 100%; background: rgba(210,192,250,1); background: url(../img/bg_2_section.png) top center no-repeat; background-size: 100% auto; height:150px; border-radius: 10px; padding:5px 20px; margin:10px 0; position: relative; display: flex; justify-content:flex-end; padding: 10px 0 10px 10px; top: 2px; position: relative; left: 50%; transform: translate(-50%, 0); margin-top: 10px; } 

.gamble-vipbox-wrap .box-locking-bg,
/* .gamble-vipbox-wrap .box-soldout-bg { width: 100%; height: 100%; position: absolute;  right: 0; top: 0; left: 50%; transform: translate(-50%, -6px); z-index: 2; border-radius: 10px;
background:url(/assets/img/egg/bg_soldout.png) no-repeat; background-size: cover; }  */
.gamble-vipbox-wrap .box-soldout-bg { width: 100%; height: 100%; position: absolute;  right: -5px; left:-5px; bottom:-5px; top: 0px;   z-index: 2; border-radius: 10px;  background: rgba(202,229,226,.8); z-index:1 !important; } 

.gamble-vipbox-wrap .box-locking-bg .locking-info { display: flex; justify-content: center; line-height: 30px; margin-top: 70px; } 
.gamble-vipbox-wrap .box-soldout-bg .soldout-info {  } 
.gamble-vipbox-wrap .box-locking-bg .locking-info .locking-img { width: 20px; } 
.gamble-vipbox-wrap .box-locking-bg .locking-info .locking-img img { width: 100%; vertical-align: middle; } 
.gamble-vipbox-wrap .box-locking-bg .locking-info .locking-class { color: #fff; font-size: 18px; font-family: "NanumSquareNeo-Variable"; margin-left: 10px; } 
.gamble-vipbox-wrap .box-locking-bg .locking-info .locking-class span { font-family: "NanumSquareNeo-Variable"; } 
.gamble-vipbox-wrap .box-soldout-bg .soldout-info .soldout-text { transform: rotate(352deg); color: #ff0000; font-weight: bold; font-size: 20px; border: 4px solid; letter-spacing: 2.5px; padding: 10px 35px; font-family: "NanumSquareNeo-Variable"; margin-left: 10px; } 

.egg-gamble .egg-gamble-wrap .gamble-box-wrap .dailybox { width: 93%; background: #fff; display: flex; left: 50%; position: absolute; transform: translate(-50%, 0); border-radius: 10px; border: 4px solid #a4e2af; padding: 10px 0 10px 10px; top: 2px; } 

.egg-gamble .egg-gamble-wrap .gamble-box-wrap .blueline {}

.egg-gamble .egg-gamble-wrap .gamble-box-wrap .dailybox { margin-top: 390px; } 

.egg-gamble 
 .egg-gamble-wrap
 .gamble-box-wrap
 .gamble-vipbox-wrap
 .gamble-box-area { width: 28%; line-height: 130px; } 
.egg-gamble 
 .egg-gamble-wrap
 .gamble-box-wrap
 .gamble-vipbox-wrap
 .gamble-box-area
 img { width: 100%; vertical-align: middle; cursor: pointer; } 
.egg-gamble 
 .egg-gamble-wrap
 .gamble-box-wrap
 .gamble-vipbox-wrap
 .vipvox-info { width: 72%; margin-left: 15px; display: flow-root; padding-right: 5px; } 
.egg-gamble 
 .egg-gamble-wrap
 .gamble-box-wrap
 .gamble-vipbox-wrap
 .vipvox-info
 .box-open-title { font-size: 18px; color: #ff5050; font-weight: bolder; font-family: "NanumSquareNeo-Variable"; float: left; max-width: 89%; width: 89%; overflow: hidden; -webkit-box-orient: vertical; display: -webkit-box; -webkit-line-clamp: 2; text-overflow: ellipsis; margin-bottom: 5px; line-height: 22px; } 

.egg-gamble 
 .egg-gamble-wrap
 .gamble-box-wrap
 .gamble-vipbox-wrap
 .vipvox-info
 .success-product-list { width: 20px; background: none; float: right; bottom: 1px; right: 2px; position: relative; } 
.egg-gamble 
 .egg-gamble-wrap
 .gamble-box-wrap
 .gamble-vipbox-wrap
 .vipvox-info
 .success-product-list
 img { width: 100%; } 
.egg-gamble 
 .egg-gamble-wrap
 .gamble-box-wrap
 .egg-box-wrap
 .gamble-vipbox-wrap
 .box-content
 .vipvox-info
 .gamble-box-date { color: #3d3d3d; margin: 5px 0 5px 0; font-family: "NanumSquareNeo-Variable"; box-shadow: inset 0 -9px 0 #bfffa1; font-weight: 600; float: left; } 
.egg-gamble 
 .egg-gamble-wrap
 .gamble-box-wrap
 .egg-box-wrap
 .blueline
 .box-content
 .vipvox-info
 .gamble-box-amount { color: #3d3d3d; margin: 5px 0 5px 0; font-family: "NanumSquareNeo-Variable"; box-shadow: inset 0 -9px 0 #bfffa1; font-weight: 600; float: left; } 
.egg-gamble 
 .egg-gamble-wrap
 .gamble-box-wrap
 .gamble-vipbox-wrap
 .vipvox-info
 .gamble-box-date
 span,
.egg-gamble 
 .egg-gamble-wrap
 .gamble-box-wrap
 .egg-box-wrap
 .blueline
 .box-content
 .vipvox-info
 .gamble-box-amount
 span { font-weight: 600; color: #3d3d3d; font-family: "NanumSquareNeo-Variable"; } 
.egg-gamble 
 .egg-gamble-wrap
 .gamble-box-wrap
 .kongbox
 .vipvox-info
 .box-open-title { font-size: 18px; color: #1985c3; font-weight: bolder; font-family: "NanumSquareNeo-Variable"; } 
.egg-gamble 
 .egg-gamble-wrap
 .gamble-box-wrap
 .dailybox
 .vipvox-info
 .box-open-title { font-size: 18px; color: #009640; font-weight: bolder; margin-bottom: 10px; font-family: "NanumSquareNeo-Variable"; } 
.egg-gamble 
 .egg-gamble-wrap
 .gamble-box-wrap
 .gamble-vipbox-wrap
 .vipvox-info
 .gamble-box-info { font-family: "NanumSquareNeo-Variable"; line-height: 17px; float: left; width: 100%; } 
.egg-gamble 
 .egg-gamble-wrap
 .gamble-box-wrap
 .gamble-vipbox-wrap
 .box-open-area { width: 100%; display: flex; justify-content: space-around; align-items: end; } 
.egg-gamble 
 .egg-gamble-wrap
 .gamble-box-wrap
 .gamble-vipbox-wrap
 .box-open-area
 .box-open-btn { background: #03c75b; display: flex; width: 100%; justify-content: space-between; border-radius: 100px; padding: 10px 7px; margin-top: 20px; height: 44px; } 
.egg-gamble 
 .egg-gamble-wrap
 .gamble-box-wrap
 .gamble-vipbox-wrap
 .box-open-area
 .box-bean-sale { position: relative; display: flex; margin-left: 40px; top: 20px; } 
.egg-gamble 
 .egg-gamble-wrap
 .gamble-box-wrap
 .gamble-vipbox-wrap
 .box-open-area
 .box-bean-sale
 .sale-line { width: 55px; display: inline-block; height: 2px; background: #e30800; top: -3px; position: relative; font-family: "NanumSquareNeo-Variable"; z-index: 1; } 
.egg-gamble 
 .egg-gamble-wrap
 .gamble-box-wrap
 .gamble-vipbox-wrap
 .box-open-area
 .box-bean-sale
 .fix-price { font-family: "NanumSquareNeo-Variable"; position: absolute; font-weight: 700; margin-left: 4px; margin-top: -10px; color: #636363; font-size: 13px; text-decoration-color: #e30800; } 
.egg-gamble 
 .egg-gamble-wrap
 .gamble-box-wrap
 .gamble-vipbox-wrap
 .box-open-area
 .box-bean-sale
 .price-down { position: absolute; margin-top: -8px; margin-left: 40px; color: #e30800; font-size: 25px; font-family: "NanumSquareNeo-Variable"; transform: rotate(-25deg); } 
.egg-gamble 
 .egg-gamble-wrap
 .gamble-box-wrap
 .gamble-vipbox-wrap
 .box-open-area
 .box-open-btn
 .open-bean-info { background: #fff; border-radius: 50px; width: 52%; height: 30px; margin-top: -3px; display: flex; justify-content: space-between; } 
.egg-gamble 
 .egg-gamble-wrap
 .gamble-box-wrap
 .gamble-vipbox-wrap
 .box-open-area
 .box-open-btn
 .open-bean-info
 .open-price { text-align: center; font-size: 14px; font-weight: 600; font-family: "NanumSquareNeo-Variable"; margin: 6px 8px 0 0; } 
.egg-gamble 
 .egg-gamble-wrap
 .gamble-box-wrap
 .gamble-vipbox-wrap
 .box-open-area
 .box-open-btn
 .open-bean-info
 img { width: 20px; vertical-align: -8px; object-fit: contain; margin-left: 5px; } 
.egg-gamble 
 .egg-gamble-wrap
 .gamble-box-wrap
 .gamble-vipbox-wrap
 .box-open-area
 .box-open-btn
 .open-bean-title { font-family: "NanumSquareNeo-Variable"; font-size: 15px; color: #fff; font-weight: 700; margin-top: 3px; width: 55%; padding-left: 3px; } 

/* 박스 오픈 css */
.egg-gamble .egg-gamble-wrap .gamblebox-open-wrap .box-open-bg { background: black; position: absolute; width: 100%; height: 100%; z-index: 2; top: 0; opacity: 0.7; } 
.egg-gamble .egg-gamble-wrap .gamblebox-open-wrap .box-open-area { position: absolute; z-index: 557; top: 0; width: 100%; height: 100%; } 
.egg-gamble 
 .egg-gamble-wrap
 .gamblebox-open-wrap
 .box-open-area
 .main-open-btn { left: 50%; width: 100%; position: relative; transform: translate(-50%, 90%); background: none; z-index: 2; } 

.egg-gamble 
 .egg-gamble-wrap
 .gamblebox-open-wrap
 .box-open-area
 .main-open-btn
 img { width: 60%; margin-top: -30px; } 

.egg-gamble 
 .egg-gamble-wrap
 .gamblebox-open-wrap
 .box-open-area
 .main-open-btn
 .box-touch { font-family: "NanumSquareNeo-Variable"; font-size: 19px; color: #fff; padding-top: 40px; } 

.egg-gamble 
 .egg-gamble-wrap
 .gamblebox-open-wrap
 .box-open-area
 .gamble-box-close,
.egg-gamble 
 .egg-gamble-wrap
 .gamblebox-open-wrap
 .gamble-box-fail
 .gamble-box-close { width: 40px; height: 40px; right: 15%; position: absolute; border: 2px solid #03a5d1;     background-image: linear-gradient(180deg, #a0dedb, #03a5d1); border-radius: 50px; z-index: 557; top: 100px; } 
.egg-gamble 
 .egg-gamble-wrap
 .gamblebox-open-wrap
 .gamble-box-fail
 .gamble-box-close { z-index: 3; } 
.egg-gamble 
 .egg-gamble-wrap
 .gamblebox-open-wrap
 .box-open-area
 .gamble-box-close
 .box-close-btn,
.egg-gamble 
 .egg-gamble-wrap
 .gamblebox-open-wrap
 .gamble-box-fail
 .gamble-box-close
 .box-close-btn { width: 30px !important; height: 30px; position: absolute; bottom: -2px; left: -2px; background: none; } 

.egg-gamble 
 .egg-gamble-wrap
 .gamblebox-open-wrap
 .box-open-area
 .gamble-box-close:before,
.egg-gamble 
 .egg-gamble-wrap
 .gamblebox-open-wrap
 .gamble-box-fail
 .gamble-box-close:before { transform: rotate(45deg); } 
.egg-gamble 
 .egg-gamble-wrap
 .gamblebox-open-wrap
 .box-open-area
 .gamble-box-close:after,
.egg-gamble 
 .egg-gamble-wrap
 .gamblebox-open-wrap
 .gamble-box-fail
 .gamble-box-close:after { transform: rotate(-45deg); } 
.egg-gamble 
 .egg-gamble-wrap
 .gamblebox-open-wrap
 .box-open-area
 .gamble-box-close:before,
.egg-gamble 
 .egg-gamble-wrap
 .gamblebox-open-wrap
 .box-open-area
 .gamble-box-close:after,
.egg-gamble 
 .egg-gamble-wrap
 .gamblebox-open-wrap
 .gamble-box-fail
 .gamble-box-close:before,
.egg-gamble 
 .egg-gamble-wrap
 .gamblebox-open-wrap
 .gamble-box-fail
 .gamble-box-close:after { position: absolute; right: 16px; top: 7px; content: ""; height: 20px; width: 3px; background-color: #fff; z-index: -1; } 

.egg-gamble .egg-gamble-wrap .gamblebox-open-wrap .box-fail-effect,
.egg-gamble .egg-gamble-wrap .gamblebox-open-wrap .box-success-effect,
.egg-gamble .egg-gamble-wrap .gamblebox-open-wrap .box-Specialeffect { position: absolute; z-index: 3; top: 0; width: 100%; height: 100%; } 
.egg-gamble .egg-gamble-wrap .gamblebox-open-wrap .box-fail-effect img,
.egg-gamble .egg-gamble-wrap .gamblebox-open-wrap .box-success-effect img,
.egg-gamble .egg-gamble-wrap .gamblebox-open-wrap .box-Specialeffect img { position: relative; left: 50%; width: 100%; transform: translate(-50%, -20px); } 
/* 당첨 */

.egg-gamble .egg-gamble-wrap .gamblebox-open-wrap .gamble-box-success,
.egg-gamble .egg-gamble-wrap .gamblebox-open-wrap .gamble-box-fail { position: absolute; z-index: 557; top: 0; width: 100%; height: 100%; } 

.egg-gamble 
 .egg-gamble-wrap
 .gamblebox-open-wrap
 .gamble-box-success
 .gamble-success-wrap
 .gamble-success-product
 .success-product,
.egg-gamble 
 .egg-gamble-wrap
 .gamblebox-open-wrap
 .gamble-box-fail
 .gamble-fail-wrap
 .gamble-fail-product
 .fail-product { height: 220px; display: inline-block; left: 50%; position: relative; transform: translate(-50%, 0px); margin-top: 150px; } 
.egg-gamble 
 .egg-gamble-wrap
 .gamblebox-open-wrap
 .gamble-box-success
 .gamble-success-wrap
 .success-img-sub { position: absolute; z-index: 5; width: 100%; } 
.egg-gamble 
 .egg-gamble-wrap
 .gamblebox-open-wrap
 .gamble-box-success
 .gamble-success-wrap
 .gamble-success-product
 .success-product
 .success-img,
.egg-gamble 
 .egg-gamble-wrap
 .gamblebox-open-wrap
 .gamble-box-fail
 .gamble-fail-wrap
 .gamble-fail-product
 .fail-product
 .fail-img { position: unset !important; top: unset !important; height: 100%; } 
.egg-gamble 
 .egg-gamble-wrap
 .gamblebox-open-wrap
 .gamble-box-success
 .gamble-success-wrap,
.egg-gamble 
 .egg-gamble-wrap
 .gamblebox-open-wrap
 .gamble-box-fail
 .gamble-fail-wrap { padding: 10px; margin-top: 50px; } 
.egg-gamble 
 .egg-gamble-wrap
 .gamblebox-open-wrap
 .gamble-box-success
 .gamble-success-wrap
 .success-product-wrap,
.egg-gamble 
 .egg-gamble-wrap
 .gamblebox-open-wrap
 .gamble-box-fail
 .gamble-fail-wrap
 .fail-product-wrap { 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: 4; position: relative; } 
.egg-gamble 
 .egg-gamble-wrap
 .gamblebox-open-wrap
 .gamble-box-success
 .gamble-success-wrap
 .gamble-success-com,
.egg-gamble 
 .egg-gamble-wrap
 .gamblebox-open-wrap
 .gamble-box-fail
 .gamble-fail-wrap
 .gamble-fail-com { text-align: center; line-height: 25px; font-size: 17px; max-width: 90%; position: relative; transform: translate(-50%, 0); left: 50%; padding-bottom: 10px; } 
.egg-gamble 
 .egg-gamble-wrap
 .gamblebox-open-wrap
 .gamble-box-success
 .gamble-success-wrap
 .gamble-success-com
 .success-com,
.egg-gamble 
 .egg-gamble-wrap
 .gamblebox-open-wrap
 .gamble-box-fail
 .gamble-fail-wrap
 .gamble-fail-com
 .fail-com { font-family: "NanumSquareNeo-Variable"; font-weight: 700; } 
.egg-gamble 
 .egg-gamble-wrap
 .gamblebox-open-wrap
 .gamble-box-success
 .gamble-success-wrap
 .gamble-success-com
 .success-com
 .success-type { font-family: "NanumSquareNeo-Variable"; font-weight: 700; color: #03c75b; } 

.egg-gamble 
 .egg-gamble-wrap
 .gamblebox-open-wrap
 .gamble-box-success
 .gamble-box-check,
.egg-gamble 
 .egg-gamble-wrap
 .gamblebox-open-wrap
 .gamble-box-fail
 .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: 5; } 

.egg-gamble 
 .egg-gamble-wrap
 .gamble-box-wrap
 .egg-box-wrap::-webkit-scrollbar { width: 10px; /* 스크롤바의 너비 */}

.egg-gamble 
 .egg-gamble-wrap
 .gamble-box-wrap
 .egg-box-wrap::-webkit-scrollbar-thumb { height: 30%; /* 스크롤바의 길이 */
 background: #d4d4d4; /* 스크롤바의 색상 */
 border-radius: 10px; } 

.egg-gamble 
 .egg-gamble-wrap
 .gamble-box-wrap
 .egg-box-wrap::-webkit-scrollbar-track { background: #c5c5c55b; /*스크롤바 뒷 배경 색상*/}

.egg-gamble 
 .egg-gamble-wrap
 .gamble-box-wrap
 .egg-box-wrap::-webkit-scrollbar { width: 10px; /* 스크롤바의 너비 */}

.egg-gamble 
 .egg-gamble-wrap
 .gamble-box-wrap
 .egg-box-wrap::-webkit-scrollbar-thumb { height: 30%; /* 스크롤바의 길이 */
 background: #67cc24; /* 스크롤바의 색상 */
 border-radius: 10px; } 
/*등급 팝업 시작*/
.egg-gamble-container .egg-gamble .class_pop_wrap { position: absolute; top: 0; z-index: 557; width: 100%; height: 100%; } 
.egg-gamble-container .egg-gamble .class_pop_wrap .class_pop_bg { width: 100%; height: 100%; background: black; opacity: 0.7; } 
.egg-gamble-container .egg-gamble .class_pop_wrap .class_pop_area { width: 100%; height: 100%; position: absolute; top: 0; } 
.egg-gamble-container
 .egg-gamble 
 .class_pop_wrap
 .class_pop_area
 .six_class_pop { width: 80%; position: relative; left: 50%; transform: translate(-50%, 120px); } 
.egg-gamble-container
 .egg-gamble 
 .class_pop_wrap
 .class_pop_area
 .six_class_pop
 img { width: 100%; object-fit: cover; border-radius: 5px; } 
.egg-gamble-container
 .egg-gamble 
 .class_pop_wrap
 .class_pop_area
 .six_class_pop
 .six_class_close { width: 30px; height: 30px; right: 2px; position: absolute; border-radius: 3px; z-index: 2; } 

.egg-gamble-container
 .egg-gamble 
 .class_pop_wrap
 .class_pop_area
 .six_class_pop
 .six_class_close
 button { width: 30px; height: 30px; background: none; } 
.egg-gamble-container
 .egg-gamble 
 .class_pop_wrap
 .class_pop_area
 .six_class_pop
 .six_class_close:before { transform: rotate(45deg); } 
.egg-gamble-container
 .egg-gamble 
 .class_pop_wrap
 .class_pop_area
 .six_class_pop
 .six_class_close:before,
.egg-gamble-container
 .egg-gamble 
 .class_pop_wrap
 .class_pop_area
 .six_class_pop
 .six_class_close:after { position: absolute; right: 13px; top: 6px; content: ""; height: 20px; width: 2px; background-color: #000000; font-family: "NanumSquareNeo-Variable"; border-radius: 3px; } 
.egg-gamble-container
 .egg-gamble 
 .class_pop_wrap
 .class_pop_area
 .six_class_pop
 .six_class_close:after { transform: rotate(-45deg); } 

/*등급 팝업 끝*/