@charset "UTF-8";
@import url('interaction.css');
@import url('https://webfontworld.github.io/gmarket/GmarketSans.css');/*GmarketSans 300/500/700*/

/*common*/
.c_blue {color: #1971C2 !important;}
.c_green {color: #78B857 !important;}
.c_black {color: #000 !important;}
.mt0    {margin-top:0 !important;}
.mt5    {margin-top:5px !important;}
.mt10    {margin-top:10px !important;}
.mt15    {margin-top:15px !important;}
.mt20    {margin-top:20px !important;}
.mt25    {margin-top:25px !important;}
.mt30    {margin-top:30px !important;}
.mt50    {margin-top:50px !important;}

.mg15 {margin:15px !important;}
.mg16 {margin: 16px !important;}
.w10p   {width:10% !important;}
.w20p   {width:20% !important;}
.w30p   {width:30% !important;}
.w40p   {width:40% !important;}
.w50p   {width:50% !important;}
.w60p   {width:60% !important;}
.w70p   {width:70% !important;}
.w80p   {width:80% !important;}

.inline-block   {display:inline-block !important;}
.alignR {text-align: right !important;}
.alignC {text-align: center !important;}
.alignL {text-align: left !important;}

/*최대높이값*/
.mh90svh {max-height: 90svh !important;}

.pdb0   {padding-bottom:0 !important;}

.bdb_none   {border-bottom:none !important;}


.microAlert .microModal__btn   {white-space: nowrap;}

/*랜딩페이지*/
.LandingPage    {
    position: relative;
    max-width: 720px;
    height:100vh;
    margin:0 auto;
    background-image: linear-gradient(166deg, #78B857, 60%, #C5ECE7);
}
.LandingPage h1{
    font-size:0;
    width:100%;
    height:100%;
    background:url(../../images/bnft/main_logo_w.png) no-repeat center center;
}

/*혜택 리스트*/
.benefit_main_video video {
    width: 100%;
    height: auto;
}

.benefit_main_bannerWrap {
    position: relative;
    width: 100%;
    height: 250px;
    overflow: hidden;
}

.benefit_main_banner {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.benefit_bn {
    display: none;
    width: 100%;
    height: 100%;
}

.benefit_bn img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.benefit_main_bannerWrap .pagination {
    position: absolute;
    bottom: 10px;
    width: 100%;
    text-align: center;
    z-index: 1;
}

.benefit_main_bannerWrap .pagination button {
    display: inline-block;
    width: 10px;
    height: 10px;
    margin: 0 5px;
    border-radius: 50%;
    background: #fff;
    border: none;
    cursor: pointer;
    transition: background 0.3s ease;
}

.benefit_main_bannerWrap .pagination button.active {
    background: #78b857;
}

.icon_tab-bar-benefit  {
    width: 24px;
    height: 24px;
    background-image: url(../../images/bnft/icon_tab-bar-benefit.png);
}
.benefit_main   {
    margin:20px 16px;
}

.benefit_main h2.bnf_title   {
    font-size: 20px;
    font-weight: 700;
    color: #16191d;
    margin-bottom:16px;
}
.benefitCategory    {

}
.benefitCategory_list   {

}
.benefitCategory_list > li   {
    margin-bottom:18px;
}
.benefitCategory_list > li > a   {
    position:relative;
    padding:25px;
    display:flex;
    gap:25px;
    background:#fff;
    border-radius:10px;
}
.benefitCategory_list > li > a .img   {
    display:block;
    width:42px;
    height:42px;
}
.benefitCategory_list > li > a .live    {
    display:block;
    position:absolute;
    left:11px;
    bottom:11px;
    width:68px;
    height:26px;
    overflow:hidden;
}
.benefitCategory_list > li > a .live > img,
.benefitCategory_list > li > a .img > img   {
    width:100%;
    height:100%;
}
.benefitCategory_list label.check_new   {
    font-size: 10px;
    color: #ffffff;
    background-color: #ff0000;
    border-radius: 999px;
    display: inline-block;
    position: absolute;
    top: 5px;
    left: 5px;
    padding: 2px 0 3px;
    width: 20px;
    height: 20px;
    font-weight: 600;
    text-align: center;
}
.benefitCategory_list label.check_done   {
    font-size: 12px;
    color: #2E302C;
    background-color: #F0F5E9;
    border-radius: 5px;
    display: inline-block;
    position: absolute;
    right: 16px;
    top: 16px;
    padding: 5px 12px;
}
.benefitCategory_list > li > a .tit1   {
    font-size:14px;
    color:#78B857;
}
.benefitCategory_list > li > a .tit2   {
    font-size:16px;
    font-weight:500;
}

.microBottomSheet .microModal__close2 {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    width: 100%;
    height: 100%;
}
.microBottomSheet .microModal__close2::after {
    content: "";
    display: block;
    width: 18px;
    height: 18px;
    background-image: url(../../images/bnft/icon_modal-close.png);
    background-size: cover;
    margin: 20px 20px 0 0;
}



/*add benefit*/
.icon_nav-home {
    width: 24px;
    height: 24px;
    background-image: url(../../images/bnft/icon_nav-home.svg);
}
.icon_nav-set {
    width: 24px;
    height: 24px;
    background-image: url(../../images/bnft/icon_nav-set.svg);
}
.icon_nav-calendar {
    width: 24px;
    height: 24px;
    background-image: url(../../images/bnft/icon_nav-calendar.svg);
}
.icon_nav-close {
    width: 24px;
    height: 24px;
    background-image: url(../../images/bnft/icon_nav-close.svg);
}
.icon_nav-trash {
    width: 24px;
    height: 24px;
    background-image: url(../../images/bnft/icon_nav-trash.svg);
}
.icon_nav-capsule   {
    width: 24px;
    height: 24px;
    background-image: url(../../images/bnft/icon_nav-capsule.svg);
}
/*출석체크*/
.eventAtt .sub-box {
    position: relative;
    padding: 16px;
    background-color: #ffffff;
    border:none;
}
.Att-box    {
    position: relative;
    width:100%;
    height:auto;
    overflow: hidden;
}
.Att-bg    {
    /* position: absolute;
    top:0;
    left:0; */
    width:100%;
    height:100%;
    max-height: 550px;
    overflow: hidden;
}
.Att-bg img {
    width:100%;
    height:auto;
}
.Att-cnt1    {
    position:absolute;
    bottom:124px;
    left:15px;
    width: calc(100% - 30px);
    height: 70px;
    flex-grow: 0;
    margin: 0;
    padding: 24px 50px 0 53px;
    border-radius: 10px;
    border: solid 3px #1a9d8e;
    background-color: #fff;
}
.Att-cnt1 .tit    {
    position:absolute;
    top:-24px;
    left:50%;
    transform: translateX(-50%);
    font-size: 17px;
    font-weight: 700;
    background-color: #1a9d8e;
    padding: 8px 30px 10px;
    color:#fff;
    border-radius: 999px;
    white-space: nowrap;
}
.Att-cnt1 .cnt-wrap {
    display:flex;
    justify-content: center;
}
.Att-cnt1 .cnt-wrap p {
    display: inline-block;
    font-size: 17px;
    color: #000;
    font-weight: 700;
    text-align: left;
    padding-left: 36px;
    white-space: nowrap;
}
.Att-cnt1 .cnt-wrap p + p{
    margin-left:100px;
}
.Att-cnt1 .cnt1    {
    background-image: url(../../images/bnft/ico_atd01_green.svg);
    background-repeat:no-repeat;
    background-size: 24px;
}
.Att-cnt1 .cnt2    {
    background-image: url(../../images/bnft/ico_atd02_green.svg);
    background-repeat:no-repeat;
    background-size: 28px;
}

.Att-cnt2    {
    position:absolute;
    bottom:16px;
    left:15px;
    width: calc(100% - 30px);
    height: 95px;
    flex-grow: 0;
    margin: 0;
    padding: 15px;
    border-radius: 10px;
    background-color: #fff;
}
.Att-cnt2 ul li    {
    color: rgba(0, 0, 0, 0.7);
    font-size: 12px;
    line-height:1.8;
}
.Att-cnt2 ul li::before    {
    display:inline-block;
    width:2px;
    height:2px;
    border-radius: 999px;
    background-color: rgba(0, 0, 0, 0.7);
    content:'';
    line-height:1.5;
    vertical-align: middle;
    margin-right:5px;
}
/*출석체크 달력*/
.calendar-wrap  {
    background:#fff;
    border-radius: 10px;
    margin:15px;
    overflow:hidden;
}
.calendar-wrap .month-tit  {
    font-size: 24px;
    font-weight: 700;
    padding:10px;
    text-align: center;
    border-bottom:1px solid rgba(0, 0, 0, 0.2);
}
.calendar {
    /* max-width: 600px; */
    margin: 0 auto 20px auto;

    overflow: hidden;
}

.weekdays {
    display: flex;
    border-bottom:1px solid #eee;
}

.day {
    flex: 1;
    text-align: center;
    padding: 5px;
    font-size: 12px;
}

.days {
    display: grid;
    justify-items: center;
    grid-template-columns: repeat(7, 1fr);
    gap: 1px;
    background-color: #fff;
}

.days div {
    position: relative;
    width:36px;
    height:36px;
    text-align: center;
    line-height:31px;
    border:2px solid #fff;
    border-radius:999px;
    margin:7px;
    cursor: pointer;
}
.days .today    {
    border:2px solid #78b857;
    color:#78b857;
}
.days .success  {
    background:#78b857 url(../../images/bnft/ico_check_white.svg) no-repeat center center;
    background-size:12px;
    font-size:0;
}
.days .steps {
    position: absolute;
    font-size: 11px;
    text-align: center;
    color: #666;
    bottom: -18px;
    width: 100%;
    height: 14px;
    border-radius: 0;
    line-height: 1;
    margin: 0;
    border: none;
}

.eventAtt__btnContainer {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    margin-bottom: 12px;
}
.btn.Att-check  {
    font-size: 20px;
    background-color:#78b857;
    padding:20px;
    color:#fff;
    height: auto;
    font-weight: 700;
}
.ico_check_white    {
    display:inline-block;
    width:28px;
    height:28px;
    background: url(../../images/bnft/ico_atd01_white.svg) no-repeat;
    vertical-align: middle;
    margin-right:5px;
}
.ico_alarm  {
    display:inline-block;
    width:28px;
    height:28px;
    background: url(../../images/bnft/ico_atd03.svg) no-repeat center center;
    vertical-align: middle;
    margin-right:5px;
}
.eventAtt-banner    {
    width:100%;
    height:auto;
}
.eventAtt-banner img    {
    width:100%;
    height:auto;
}
.comment-box    {
    background: #fff;
    padding:16px;
    padding-bottom: 100px;
    margin-bottom: -100px;
}
.microModal__content .sub_tit   {
    color:#000;
    font-weight:600;
    margin-bottom:5px;
}
.modal-icon-mile    {
    width:52px;
    height:52px;
    background:url(../../images/bnft/ico_mile.svg) no-repeat center center;
    background-size:50px;
    font-size:0;
    display:inline-block;
    margin:8px auto 10px;
}
.modal-icon-lose    {
    width:52px;
    height:52px;
    background:url(../../images/bnft/ico_lose.svg) no-repeat center center;
    background-size:48px;
    font-size:0;
    display:inline-block;
    margin:8px auto 10px;
}
.modal-icon-coupon    {
    width:124px;
    height:48px;
    background:url(../../images/bnft/ico_coupon.svg) no-repeat center center;
    background-size:122px;
    font-size:0;
    display:inline-block;
    margin:8px auto;
}
.modal-icon-coupon2    {
    width:45px;
    height:45px;
    background:url(../../images/bnft/ico_coupon2.svg) no-repeat center center;
    background-size:45px;
    font-size:0;
    display:inline-block;
    margin:8px auto;
}
.modal-icon-present    {
    width:52px;
    height:48px;
    background:url(../../images/bnft/ico_present.svg) no-repeat center center;
    background-size:44px;
    font-size:0;
    display:inline-block;
    margin:8px auto 10px;
}
.microModal__content .bg-box    {
    padding:16px;
    background:#F4F4F4;
    border-radius:10px;
    margin:20px 0;
}
.microModal__content .bg-box li    {
    color:#000;
    text-align:left;
}

/*만보기*/
.stepTodayWrap  {

}
/*만보기*/
#chartContainer {
    position: relative;
    width: 300px;
    height: 300px;
    margin: 50px auto;
}
.stepChart  {
    margin:15px;
    position: relative;
    background-color:#fff;
    border-radius: 10px;
    padding:20px;
}
.stepChart .cnt_step    {
    font-size:15px;
    font-weight:700;
    display: inline-block;
    margin: 10px 0 0 10px;
}
.stepChart .cnt_step b    {
    font-size:30px;
    color:#78B857;
    margin-right:10px;
    font-family: 'GmarketSans';
    font-weight: 700;
}
.stepChart .cnt_detail {
    width:98px;
    position:absolute;
    top:20px;
    right:16px;
}
.stepChart .cnt_km,
.stepChart .cnt_kcal {
    font-family: 'GmarketSans';
    font-size:12px;
    color:rgba(0, 0, 0, 0.6);
    margin-bottom: 8px;
    white-space: nowrap;
}
.stepChart .cnt_km b,
.stepChart .cnt_kcal b {
    display:inline-block;
    font-weight: 700;
    width:64px;
    height:20px;
    text-align:right;
}
.stepChart .cnt_km b {
    background:url(../../images/bnft/ico_walk.svg) no-repeat left center;
}
.stepChart .cnt_kcal b {
    background:url(../../images/bnft/ico_fire.svg) no-repeat left center;
}
.stepGrpWrap    {
    margin:20px 0;
    position: relative;
}
.stepGrpWrap .tit1    {
    display: block;
    position: absolute;
    top: 70px;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
}
.stepGrpWrap .tit2    {
    font-size:18px;
    text-align:center;
    display: block;
    position: absolute;
    top: 90px;
    left: 50%;
    transform: translateX(-50%);
}
.stepGrpWrap .tit2 b    {
    font-size:20px;
    font-family: 'GmarketSans';
    font-weight: 700;
}
.stepGrpWrap .ico    {
    width:80px;
    height:80px;
    margin:0 auto;
}
.stepGrpWrap .ico img    {
    width:100%;
    height:100%;
}
.stepGrpWrap .tit3    {
    font-size:20px;
    font-weight: 700;
    text-align:center;
}
.stepInboxWrap  {
    display:flex;
}
.stepInboxWrap .step_inbox  {
    width:calc(50% - 8px);
    background-color: #F4F4F4;
    border-radius: 10px;
    padding:20px;
    text-align:center;
}
.stepInboxWrap .step_inbox + .step_inbox  {
    margin-left:16px;
}
.stepInboxWrap .step_inbox .ico_step01  {
    background:url(../../images/bnft/ico_present.svg) no-repeat;
    display:block;
    width:44px;
    height:46px;
    background-size: 100%;
    margin:15px auto;
}
.stepInboxWrap .step_inbox .ico_step02  {
    background:url(../../images/bnft/ico_mile.svg) no-repeat;
    display:block;
    width:44px;
    height:46px;
    background-size: 100%;
    margin:15px auto;
}
.stepInboxWrap .step_inbox .tit1    {
    font-size:12px;
}
.stepInboxWrap .step_inbox .tit2    {
    font-family: 'GmarketSans';
    font-size:16px;
    font-weight: 700;
}
.stepStamp  {
    margin: 15px;
    position: relative;
    background-color: #F6FFF1;
    border-radius: 10px;
}
.stepStampBox1  {
    position: relative;
    padding:20px;
    border-bottom:2px dashed #B9C7B1;
}
.stepStampBox1 .tit {
    font-family: 'GmarketSans';
    font-weight: 500;
    font-size:21px;
}
.stepStampBox1 .tit b {
    color:#78B857;
    font-weight:700;
}
.stepStampBox1 .ico_step  {
    position: absolute;
    top:8px;
    right:10px;
    display:block;
    width:72px;
    height:72px;
    background: url(../../images/bnft/ico_step_km_green.gif) no-repeat;
    background-size: 72px;
}
.stampPaper {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    max-width: 340px;
    margin: 10px auto;
}
.stampPaper li {
    width: 48px;
    margin: 10px;
    border-radius: 999px;
    border: 3px solid #C3C3C3;
    background:url(../../images/bnft/icon_walk_off.svg) no-repeat center;
    height: 48px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 0;
}
.stampPaper li:last-child {
    background:url(../../images/bnft/icon_walk_ok_off.svg) no-repeat center;
}
.stampPaper li.success:last-child {
    background:url(../../images/bnft/icon_walk_ok_on.svg) no-repeat center;
}
.stampPaper li.success {
    border-color:#78B857;
    background:#78B857 url(../../images/bnft/icon_walk_on.svg) no-repeat center;
}
.stepStampBox2  {
    position: relative;
    padding:20px;
    border-bottom:2px dashed #B9C7B1;
}
.stepStampBox2 > a  {
    display:flex;
    justify-content: center;
}

.stepStampBox2 .product_img  {
    min-width:120px;
    min-height:120px;
    width:120px;
    height:120px;
    margin-right:25px;
    overflow:hidden;
    background-color:#fff;
    border-radius:10px;
    border:1px solid #DADADA;
}
.stepStampBox2 .product_img > img  {
    width:100%;
    height:100%;
    overflow:hidden;
}
.stepStampBox2 .product_txt  {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.stepStampBox2 .product_txt .tit1  {
    font-family: 'GmarketSans';
    font-weight: 500;
    font-size:16px;
    word-break: keep-all;
}
.stepStampBox2 .product_txt .tit2  {
    max-width:220px;
}
.stepStampBox3  {
    width:100%;
    height:145px;
}
.stepStampBox3 .walkAvg  {
    display:flex;
    justify-content: center;
    margin:20px auto;
}
.stepStampBox3 .walkAvg li  {
    width:33.33%;
    border-right:1px solid rgba(0,0,0,0.2);
    text-align:center;
}
.stepStampBox3 .walkAvg li .tit1  {
    white-space:nowrap;
}
.stepStampBox3 .walkAvg li .tit2  {
    white-space:nowrap;
}
.stepStampBox3 .walkAvg li .tit2 b  {
    color:#78B857;
    font-size:16px;
    font-family: 'GmarketSans';
    font-weight: 700;
    margin-right:5px;
}
.stepStampBox3 .walkAvg li:last-child{
    border-right: none;
}
.stepStampBox3 .walkAvg li i  {
    display:block;
    width:45px;
    height:45px;
    margin:10px auto;

}
.stepStampBox3 .walkAvg li i.ico_step03_1  {
    background: url(../../images/bnft/ico_route.svg) no-repeat center;
    background-size:100%;
}
.stepStampBox3 .walkAvg li i.ico_step03_2  {
    background: url(../../images/bnft/ico_mile.svg) no-repeat center;
    background-size:100%;
}
.stepStampBox3 .walkAvg li i.ico_step03_3  {
    background: url(../../images/bnft/ico_present.svg) no-repeat center;
    background-size:92%;
}


.stepCalendar  {
    background:#fff;
    border-radius: 10px;
    margin:15px;
    overflow:hidden;
}
.stepCalendar .month-tit  {
    font-size: 24px;
    font-weight: 700;
    padding:10px;
    text-align: center;
    border-bottom:1px solid rgba(0, 0, 0, 0.2);
}

.stepDays {
    display: grid;
    justify-items: center;
    grid-template-columns: repeat(7, 1fr);
    gap: 1px;
    background-color: #fff;
}

.stepDays div {
    position: relative;
    width:36px;
    height:36px;
    text-align: center;
    line-height:31px;
    border:2px solid #fff;
    border-radius:999px;
    margin:10px 0 15px;
}
.stepDays .today    {
    border:2px solid #78b857;
    color:#78b857;
}
.stepDays .success  {
    background:rgba(120, 184, 87, 1) url(../../images/bnft/icon_walk_on.svg) no-repeat center center;
    background-size: 100%;
    font-size: 0;
}
.stepDays .success1  {
    background:rgba(120, 184, 87, 0.4);
    font-size: 14px;
    color:#fff;
}
.stepDays .success2  {
    background:rgba(120, 184, 87, 0.6);
    font-size: 14px;
    color:#fff;
}
.stepDays .success3  {
    background:rgba(120, 184, 87, 0.8);
    font-size: 14px;
    color:#fff;
}
.stepDays .steps {
    position: absolute;
    font-size: 11px;
    text-align: center;
    color: #666;
    bottom: -18px;
    width: 100%;
    height: 14px;
    border-radius: 0;
    line-height: 1;
    margin: 0;
    border: none;
}
.stepCalendarRegend {
    display:flex;
    justify-content: center;
}
.stepCalendarRegend li {
    margin:0 10px;
    width:50px;
    font-size:12px;
    text-align: center;
}
.stepCalendarRegend li::before {
    content: '';
    display:block;
    width:15px;
    height:15px;
    border-radius: 999px;
    margin:0 auto 8px;
}
.stepCalendarRegend li:nth-child(1)::before {
    background:rgba(120, 184, 87, 0.4);
}
.stepCalendarRegend li:nth-child(2)::before {
    background:rgba(120, 184, 87, 0.6);
}
.stepCalendarRegend li:nth-child(3)::before {
    background:rgba(120, 184, 87, 0.8);
}
.stepCalendarRegend li:nth-child(4)::before {
    background:rgba(120, 184, 87, 1);
}

/*환경설정 토글*/
fieldset.toggle {
    border: none;
    display: flex;
    flex-direction: column;
    padding:20px 16px;
}
fieldset.toggle label {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
}

fieldset.toggle label [type="checkbox"] {
    appearance: none;
    position: relative;
    background-color: #CACACA;
    border-radius: 999px;
    width: 72px;
    height: 36px;
}

fieldset.toggle label [type="checkbox"]::before {
    content: "OFF";
    position: absolute;
    font-size:11px;
    left: 0;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    transform: scale(0.8);
    background-color: white;
    transition: left 250ms linear;
    color: #111;
    line-height: 36px;
    padding-left: 8px;
}

fieldset.toggle label [type="checkbox"]:checked {
    background-color: #78B857;
    border-color: #78B857;
}

fieldset.toggle label [type="checkbox"]:checked::before {
    background-color: white;
    left: 36px;
    content: "ON";
    padding-left:10px;
}

fieldset.toggle label [type="checkbox"]:disabled {
    border-color: lightgray;
    opacity: 0.7;
    cursor: not-allowed;
}

fieldset.toggle label [type="checkbox"]:disabled::before {
    background-color: lightgray;
}

fieldset.toggle label [type="checkbox"]:disabled + span {
    opacity: 0.7;
    cursor: not-allowed;
}

fieldset.toggle label [type="checkbox"]:focus-visible {
    outline-offset: max(2px, 0.1em);
    outline: max(2px, 0.1em) solid tomato;
}
fieldset.toggle label span.md {
    font-size:16px;
}
.setting_tit    {
    font-size:14px;
    font-size: 14px;
    margin: 0 16px;
    padding-top:20px;
    color: #1c7ed6;
}
.setting_description    {
    font-size:13px;
    color:rgba(0, 0, 0, 0.7);
    margin: 0 16px 20px;
}
.setting_list  {
    background-color:#fff;
    margin:20px 0;
}
.setting_list .settingInbox  {
    position: relative;
    /* border-top:1px solid #DEE2E6; */
}
.setting_list span  {
    display:block;
    padding:16px;
    font-size:16px;
}
.setting_list a  {
    display:block;
    padding:16px;
    font-size:16px;
    background:#fff url("../../images/bnft/ico_next_list.svg") no-repeat calc(100% - 16px) center;
}
.licenseBox    {
    padding:16px;
}
.ver_comment    {
    color:rgba(0, 0, 0, 0.7);
    margin-right:16px;
}
.setting_list .between   {
    display: inline-flex;
    justify-content: space-between;
    align-content: center;
    align-items: center;
    width: 100%;
}
.set_update {
    position: absolute;
    right:16px;
    top:50%;
    transform: translateY(-50%);
}
/*행운복권*/
.luckyLottoryWrap   {
    margin:15px;
}
.LuckyLottory   {
    position:relative;
    width:100%;
    height:auto;
    min-height:405px;
    background: #032f09;
    border-radius: 10px;
}
.LuckyLottory .LottoImg {
    width: 100%;
    height: auto;
    /* max-width: 500px; */
    margin: 0 auto;
}
.LuckyLottory .LottoImg img {
    width: 100%;
    /* height: 100%; */
}
.LottoInbox {
    width:calc(100% - 60px);
    /* max-width:440px; */
    height:184px;
    background:#fff url(../../images/bnft/lucky_scrach_bg.png);
    border-radius:10px;
    position: absolute;
    bottom:50px;
    left:50%;
    transform: translateX(-50%);
}
.LottoInbox .tit   {
    font-size: 16px;
    text-align: center;
    padding: 20px 0;
    color: #377941;
    width: 100%;
    font-weight: 600;
    border-bottom: 1px solid #C8C8C8;
}
.LottoInbox .tit::before   {
    display:inline-block;
    content: '';
    color: #377941;
    width: 24px;
    height: 24px;
    background:url(../../images/bnft/ico_finger.svg) no-repeat;
    vertical-align: -5px;
    margin-right: 8px;
}
.LottoInbox .tit2   {
    position: absolute;
    bottom: -40px;
    font-size: 14px;
    text-align: center;
    margin: 10px 0;
    color: #fff;
    width: 100%;
}
.luckyScrachBox {
    position: relative;
    height: 72px;
    width: 80%;
    margin: 20px auto;
    display: block;
    overflow: hidden;
}
.luckyScrachBox .scrachMask {
    /* background-image: linear-gradient(137deg, #d3d3d3, #e9e9e9, #ddd, #eee, #ddd); */
    display: block;
    border-radius: 999px;
    position: absolute;
    top: 0;
    max-width: 250px;
    left: 50%;
    width: 100%;
    height: 100%;
    font-size: 0;
    transform: translateX(-50%);
}
.luckyScrachBox .scrachGift {
    display:flex;
    justify-content: center;
    gap: 5%;
    margin-top: 5px;
}
.luckyScrachBox .scrachGift li {

}
.LuckyGift  {
    margin-bottom:20px;
}
.LuckyGift .tit  {
    font-size: 16px;
    font-family: GmarketSans;
    font-weight: 700;
    text-align:center;
    margin:15px 0;
}
.LuckyGiftInbox {
    background:#fff;
    border-radius:10px;
    overflow:hidden;
    padding:15px;
    text-align:center;
}
.LuckyGiftInbox img {
    width:100%;
    height:auto;
}
/*룰렛*/
.rouletteWrap   {
    position: relative;
    margin:15px;
    min-height:680px;
    background-color: #E0F8FF;
    border-radius:10px;
}
.roulette-container {
    position: absolute;
    text-align: center;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 350px;
    height: 350px;
    background: url(../../images/bnft/roulette_game.svg) no-repeat center 58%;
    background-size: 86%;
}

#rouletteCanvas {
    text-align: center;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.rouletteBtn    {
    width:79px;
    height:83px;
    display: block;
    position: absolute;
    left:50%;
    top:50%;
    transform: translate(-50%, -50%);
    background: url(../../images/bnft/btn_start.svg) no-repeat center;
    background-size: 100%;
    font-size:0;
}

.roulette   {
    position:relative;
    width:100%;
    height:auto;
    border-radius: 10px;
}
.roulette .rouletteImg   {
    width:100%;
    height:100%;
    /* max-width:500px; */
    margin:0 auto;
}
.roulette .rouletteImg img   {
    width:100%;
    height:100%;
}
.roulette {
    width:100%;
    height:100%;

}
.rouletteInbox  {
    position: absolute;
    top: 35%;
    width: 100%;
    height: 400px;
}

.roulette .rouletteCnt  {
    position:absolute;
    top:26%;
    left:50%;
    display:inline-block;
    font-size: 14px;
    color:#fff;
    padding:5px 30px 10px 30px;
    background:#14B48D;
    border-radius: 999px;
    transform: translateX(-50%);
    white-space: nowrap;
}
.roulette .rouletteCnt > b  {
    font-size: 20px;
    font-weight:600;
    margin-left:20px;
}

.roulette-pointer   {
    position: absolute;
    top:10px;
    left:50%;
    transform: translateX(-50%);
    font-size:0;
    width:42px;
    height:42px;
    display:block;
    background:url(../../images/bnft/ico_poiner.svg) no-repeat 100%;
    z-index: 1;
}
.roulette-icons {
    width:100%;
    height:100%;
}
.roulette-icons i {
    position:absolute;
    display:block;
    width:65px;
    height:65px;
    background-size:100%;
    font-size:0;
    z-index:1;
}
.roulette-icons i.ri01 {
    top:20%;
    left:0;
    background:url(../../images/bnft/roulette_ico1.png) no-repeat center;
}
.roulette-icons i.ri02 {
    top:20%;
    right:0;
    background:url(../../images/bnft/roulette_ico2.png) no-repeat center;
}
.roulette-icons i.ri03 {
    right:10%;
    bottom:10%;
    background:url(../../images/bnft/roulette_ico3.png) no-repeat center;
}
.rouletteWrap .bm_txt  {
    position:absolute;
    bottom:3%;
    left:5%;
}
.rouletteWrap .bm_txt li  {
    color:rgba(0, 0, 0, 0.8);
    font-size: 12px;
}

.ico_hand {
    width: 46px;
    height: 46px;
    background: url(../../images/bnft/roulette_hand.png) no-repeat 100%;
    position: absolute;
    bottom: 30%;
    right: 30%;
    opacity: 0;
    animation: moveAndFadeIn 1s forwards; /* Adjust duration as needed */
    z-index: 1;
}

@keyframes moveAndFadeIn {
    0% {
        bottom: 30%;
        right: 30%;
        opacity: 0;
    }
    100% {
        bottom: 43%;
        right: 43%;
        transform: translate(50%, 50%);
        opacity: 1;
    }
}

/*이벤트보기*/
.eventViewList  {

}
.eventViewList li  {
    position: relative;
    padding:20px;
    box-sizing: border-box;
    margin: 15px;
    background-color: #fff;
    border-radius: 10px;
}
.eventViewList li a  {
    display: block;
    letter-spacing: -0.05em;
}
.eventViewList .li_tit  {
    width: calc(100% - 80px);
    color:rgba(0,0,0,0.9);
    font-size:14px;
}
.eventViewList .li_txt  {
    color: #1971C2;
    font-size:12px;
    margin:5px 0;
}
.eventViewList .li_date  {
    color: rgba(0,0,0,0.7);
    font-size:12px;
}
.eventViewList .li_mile {
    display: flex;
    align-items: center; /* 수직 중앙 정렬 */
    justify-content: center; /* 수평 중앙 정렬 */
    position: absolute;
    top: 20px;
    right: 20px;
    border-radius: 999px;
    width: 76px;
    height: 32px;
    background: #DEE9F3 url(../../images/bnft/ico_mile_blue.svg) no-repeat 8px center;
    background-size: 20px; /* 아이콘 크기 조절 */
}
.eventViewList .li_mile span {
    font-size: 12px;
    font-family: 'GmarketSans';
    font-weight: 700;
    color: #1971C2;
    margin-left: 25px; /* 아이콘과의 간격 조절 */
}

.eventViewList .li_mile.on  {
    background: #EBEBEB;
    background-image: none; /* 배경 이미지를 제거하여 아이콘이 보이지 않도록 합니다 */
    display: flex;
    align-items: center;
    justify-content: center; /* 텍스트를 중앙 정렬합니다 */
}

.eventViewList .li_mile.on span {
    color: #7c7c7c;
    margin-left: 0; /* 왼쪽 마진을 제거합니다 */
    padding: 0; /* 패딩을 제거하여 여백을 없앱니다 */
    line-height: normal; /* 라인 높이를 기본값으로 설정합니다 */
    display: inline; /* display 속성을 inline으로 설정합니다 */
}

.eventViewList .li_mile.on span  {
    color: #7c7c7c;
    display: block;
    text-align: center;
    padding:0;
    line-height: 3;
}
/*적립안내토스트팝업*/
.topupPoint {
    position: sticky;
    top:0;
    left:0;
    width: 100%;
    height: 50px;
    text-align: center;
    padding: 15px 0 0;
    background-color: #EEEEEE;
    z-index: 1;
}
.topupPoint.noSticky {
    position: relative;
    top:auto;
    left:auto;
}
.topupPoint.noSticky + .bottomBtnControls {
    margin:15px;
}
.topupPoint span {
    font-size:14px;
    font-weight: 600;
}
.topupPoint span b {
    color:#1971C2;
}
.topupPoint i {
    display: inline-block;
    width:20px;
    height:20px;
    line-height: 1.5;
    vertical-align: -6px;
    margin:0 5px;
}
.topupPoint .ico_clock {
    background: url(../../images/bnft/ico_clock.svg) no-repeat;
    background-size: 20px;
}
.topupPoint .ico_mile {
    background: url(../../images/bnft/ico_mile.svg) no-repeat;
    background-size: 20px;
}
/*라이브쇼핑참여*/
.liveThumnail   {
    position: relative;
}
.liveThumnail.no-podcast   {/*방송이 없을 경우*/
    width:100%;
    height:400px;
    position: relative;
    background:#00094a url(../../images/bnft/nopodcast.svg) no-repeat;
    background-position: center;
    border:1px solid;
}
.liveThumnail.no-podcast .tit   {/*방송이 없을 경우*/
    position:absolute;
    bottom:90px;
    width:100%;
    font-size:24px;
    font-weight: 600;
    font-family:GmarketSans;
    color:#B0F9FF;
    text-align: center;
}
.liveThumnail.no-podcast .txt   {/*방송이 없을 경우*/
    position:absolute;
    bottom:40px;
    width:100%;
    font-size:14px;
    color:#AED4EF;
    padding-top:10px;
    text-align: center;
}
.liveThumnail .live_status   {
    position: absolute;
    top:15px;
    left: 15px;
    white-space: nowrap;
}
.liveThumnail .live_status::before   {
    content:'방송예정';
    display:inline-block;
    color: #fff;
    font-weight: 700;
    background-color: #000000;
    vertical-align: 0;
    padding:3px 10px 4px;
    border-radius: 999px;
    margin-right:10px;
}
.liveThumnail .live_status.live::before   {
    content:'LIVE';
    display:inline-block;
    color: #fff;
    font-weight: 700;
    font-family: GmarketSans;
    background-color: #BB3838;
    vertical-align: 0;
    padding:5px 10px 2px;
    border-radius: 999px;
    margin-right:10px;
}
/* .liveThumnail .live_status .live_time   {
    display:none;
} */
.liveThumnail .live_status .live_time   {
    display:inline-block;
}
.liveThumnail .live_status.live .live_time::before   {
    content:'';
    display:inline-block;
    width:16px;
    height:16px;
    background:url(../../images/bnft/ico_play.svg) no-repeat;
    background-size:16px;
    vertical-align: -3px;
    margin-right:5px;
}
.liveThumnail .live_img   {
    width: 100%;
    min-height:400px;
    background: transparent url(../../images/bnft/noImg.svg) no-repeat center center;
    background-size: 60px;
}
.liveThumnail .live_img img   {
    width: 100%;
    height:100%;
}
.liveThumnail .live_tit   {
    position:absolute;
    bottom:0;
    width:100%;
    color: #fff;
    font-size: 20px;
    font-weight: 600;
    text-align: center;
    padding:15px;
    background-color: rgba(0, 0, 0, 0.5);
}
.liveThum_tit   {
    padding:20px 15px;
    font-size: 16px;
    font-weight: 600;
}
.liveThumList   {

}
.liveThumList li   {
    padding:15px 15px 15px 130px;
    background-color: #fff;
    margin-bottom: 10px;
}
.liveThumList li   {
    position: relative;
    min-height:124px;
}
.liveThumList .thumnail   {
    position: absolute;
    top:15px;
    left:15px;
    width:100px;
    height:94px;
    background: transparent url(../../images/bnft/noImg.svg) no-repeat center center;
    background-size: 30px;
}
.liveThumList .thumnail p   {
    position: absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:rgba(0, 0, 0, 0.5);
    color:#fff;
    font-size:16px;
    font-weight: 600;
    text-align: center;
    padding-top: 20px;
}
.liveThumList .thumnail img   {
    width:100%;
    height:100%;
}
.liveThumList .txt1   {
    font-size: 13px;
    color: rgba(0, 0, 0, 0.7);
    margin-bottom: 5px;
}
.liveThumList .txt2   {
    font-size: 14px;
    color: rgba(0, 0, 0);
    font-weight: 500;
    margin-bottom: 15px;
}
.liveThumList .txt3   {
    position: absolute;
    bottom: 18px;
    font-size: 13px;
    color: rgba(0, 0, 0, 0.7);
    white-space: nowrap;
}
.liveThumList .live_btn   {
    font-size: 12px;
    color: #fff;
    padding:8px 15px 10px;
    line-height: 1;
    background-color: #78B857;
    border-radius:5px;
}
.liveThumList .live_btn.outline   {
    color: #78B857;
    background-color: #fff;
    border:1px solid #78B857;
}
.liveThumList .live_btn i   {
    display: inline-block;
    width: 15px;
    height: 15px;
    vertical-align: -3px;
    margin-right:5px;
}
.liveShopping__btnControls  {
    display: grid;
    gap: 6px;
    padding: 0 16px 20px;
}
.liveShopping__btnControls .live_btn   {
    color: #78B857;
    border: 1px solid #78B857;
    background-color: #fff;
}
.liveShopping__btnControls .live_btn i   {
    display: inline-block;
    width: 15px;
    height: 15px;
    vertical-align: -3px;
    margin-right:5px;
}
.liveShopping__btnControls .live_btn .ico_alarm2   {
    background: #fff url(../../images/bnft/ico_check_green.svg) no-repeat center;
    background-size:24px;
}
.liveShopping__btnControls .live_btn.outline .ico_alarm2   {
    background: #fff url(../../images/bnft/ico_atd03_green.svg) no-repeat center;
    background-size:24px;
}
/*할인소식공유*/
.discountThumnail   {
    width:100%;
    margin-bottom:15px;
}
.discountThumnail img   {
    width:100%;
    height:100%;
}
.discountSlider {
    overflow: hidden;
    width: 100%;
    position: relative;
}
.discountSlider ul {
    display: flex;
    width:100%;
    transition: margin 0.5s;
}
.discountSlider li {
    position: relative;
    width:calc(50vw - 7px);
    max-width:360px;
    flex: 0 0 auto;
    transition: margin 0.5s;
    padding: 0 0 15px 15px;
}
.discountList li a   {
    display:block;
}
.discountList li .thumnail   {
    width:100%;
}
.discountList li .thumnail img   {
    width:100%;
    height: auto;
}
.discountList li .tit  {
    width:100%;
    word-break: keep-all;
    margin:15px 0;
}
.discountList li .txt1  {
    font-size:12px;
    color: rgba(0, 0, 0, 0.7);
    padding-left:20px;
    background:url(../../images/bnft/ico_discount.svg) no-repeat;
    margin-bottom:5px;
}
.discountList li .txt2  {
    font-size:12px;
    color: rgba(0, 0, 0, 0.7);
    padding-left:20px;
    background:url(../../images/bnft/ico_mile_green.svg) no-repeat;
    margin-bottom:15px;
}
.discountList li .txt3  {
    font-size:12px;
    color: rgba(0, 0, 0, 0.7);
    text-align: center;
}
.discountList li .btn.green  {
    color: #fff;
    background-color: #78B857;
    width:calc(100% - 15px);
    margin-bottom:10px;
}
.btn.link_share {
    background:#D9D9D9;
    border-radius: 0;
    padding:10px;
    height:50px;
}
.ico_share {
    display:inline-block;
    width:20px;
    height:20px;
    background:url(../../images/bnft/ico_share.svg) no-repeat;
}

/*베스트리뷰보기*/
.bestReviewWrap {

}
.bestReviewWrap .brTop {
    padding:24px 15px;
    background:#EFF3FF url(../../images/bnft/ico_feedback.svg) no-repeat 90% 28px;
    background-size:100px;
}
.bestReviewWrap .brTop .tit {
    font-size: 20px;
    font-weight: 600;
    margin-bottom:15px;
}
.bestReviewWrap .brTop .txt {
    color:rgba(0, 0, 0, 0.7);
}
.revieBox   {
    position: relative;
    padding:20px 20px 60px;
}
.reviewTit   {
    font-size: 16px;
    color:#000;
    margin-bottom:15px;
    font-weight:500;
}
.reviewTit::before   {
    content:'';
    display:inline-block;
    width:24px;
    height:24px;
    background:url(../../images/bnft/ico_user.svg) no-repeat;
    vertical-align: middle;
    margin-right:3px;
}
.reviewTit b   {
    color: #1971C2;
    font-weight:500;
}
.reviewProduct  {
    display:flex;
    gap:20px;
    align-items: center;
    margin-bottom:20px;
}
.reviewProduct .thum  {
    width:120px;
    height:100px;
    border-radius:10px;
    border:1px solid rgba(0, 0, 0, 0.1);
    overflow: hidden;
    background: #fff url(../../images/bnft/noImg.svg) no-repeat center center;
    background-size: 30px;
}
.reviewProduct .thum img  {
    width:100%;
    height:100%;
}
.reviewProduct .tit  {
    font-size: 16px;
    font-weight: 500;
    color: #000;
    word-break: keep-all;
}
/*리뷰슬라이드*/
.reviewSlider {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.reviewSlider ul {
    display: flex;
    padding: 0;
    margin: 0;
    width: 100%; /* Assuming 3 slides */
    transition: margin-left 0.5s;
}

.reviewSlider li {
    list-style: none;
    width: 100%;
    flex: 0 0 100%;
    cursor: pointer;
}

.reviewSlider img {
    width: 100%;
    display: block;
}

.bestReviewWrap .pagination {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
}

.bestReviewWrap .pagination .dot {
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background-color: #DFDFDF;
    margin: 0 5px;
    cursor: pointer;
}

.bestReviewWrap .pagination .dot.active {
    background-color: #78B857;
}
.bestReviewList {

}
.bestReviewList li {
    background:#fff;
    margin-bottom:10px;
}
.bestReviewList li .revieBox {
    padding-bottom:20px;
}
/*관심분야 설정*/
.favoriteWrap   {

}
.fvTop  {
    padding: 24px 15px;
    background: #EFF3FF;
    background-size: 100px;
}
.fvTop .tit  {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 5px;
}
.fvTop .txt  {
    color: rgba(0, 0, 0, 0.7);
}
.favoriteBox {
    padding: 20px;
    background-color: #fff;
}

.favoriteList {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
    justify-content: center;    /* 중앙정렬 */
    max-width: 360px;
    margin: 0 auto;
    padding: 0;
}

.favoriteList li {
    width: 78px;            /* 아이템 너비 조정 */
    flex: 0 0 auto;
}
.favoriteList li a   {
    display:block;
}
.favoriteList li .img   {
    position: relative;
    display:block;
    width:72px;
    height:72px;
    border-radius:999px;
    background-color:#F1F1F1;
    text-align:center;
}
.favoriteList li .img > img   {
    position: absolute;
    top:50%;
    left:50%;
    max-width:42px;
    height:auto;
    transform:translate(-50%, -50%);
}
.favoriteList li.on .img   {
    background-color:#fff;
    border:2px solid #78b857;
}
.favoriteList li .tit {
    text-align: center;
    margin-top: 5px;
    font-size: 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.favoriteList li.on .tit   {
    color: #78b857;
    text-decoration: underline;
    font-weight: 600;;
}
/*
.favoriteList i.ico_fv01    {background-image: url(../../images/bnft/ico_fv01.png);}
.favoriteList i.ico_fv02    {background-image: url(../../images/bnft/ico_fv02.png);}
.favoriteList i.ico_fv03    {background-image: url(../../images/bnft/ico_fv03.png);}
.favoriteList i.ico_fv04    {background-image: url(../../images/bnft/ico_fv04.png);}
.favoriteList i.ico_fv05    {background-image: url(../../images/bnft/ico_fv05.png);}
.favoriteList i.ico_fv06    {background-image: url(../../images/bnft/ico_fv06.png);}
.favoriteList i.ico_fv07    {background-image: url(../../images/bnft/ico_fv07.png);}
.favoriteList i.ico_fv08    {background-image: url(../../images/bnft/ico_fv08.png);}
.favoriteList i.ico_fv09    {background-image: url(../../images/bnft/ico_fv09.png);}
.favoriteList i.ico_fv10    {background-image: url(../../images/bnft/ico_fv10.png);}
.favoriteList i.ico_fv11    {background-image: url(../../images/bnft/ico_fv11.png);}
.favoriteList i.ico_fv12    {background-image: url(../../images/bnft/ico_fv12.png);}*/
.favoriteAgree  {
    padding:15px;
    background:#fff;
}
.favoriteCheckbox  {
    position: relative;
    display: block;
    margin: 16px auto;
    border: 2px solid #1971C2;
    border-radius: 999px;
    padding: 8px 15px 10px;
}
.favoriteCheckbox .control-label    {
    color:#1971C2;
    font-size: 14px;
}
.favoriteCheckbox .b-checkbox.checkbox input[type=checkbox] + .check {
    position: absolute;
    top: 5px;
    right: 7px;
    width: 1.8em;
    height: 1.8em;
    border-radius:999px;
    background-size: 70% 70%;
}

.favoriteCheckbox .b-checkbox.checkbox input[type=checkbox]:checked + .check {
    border-radius:999px;
    background-color:#1971C2;
}
.favoriteAgree .bottomComment   {
    font-size:12px;
    color:rgba(0, 0, 0, 0.7);
}
/*토스트팝업*/
.toastPop {
    visibility: hidden;
    width: 90%;
    max-width: 300px;
    background-color: rgba(0, 0, 0, 0.6);
    color: white;
    text-align: center;
    border-radius: 10px;
    padding: 32px 15px;
    position: fixed;
    z-index: 1;
    left: 50%;
    top: 50%;
    transform:translate(-50%, -50%);
    font-size: 16px;
    opacity: 0;
    transition: opacity 0.3s, visibility 0.3s;
    word-break: keep-all;
}
.toastPop.show {
    visibility: visible;
    opacity: 1;
}
.toastPop .ico_check_circle {
    display:block;
    position: absolute;
    top:40px;
    left:30px;
    width:40px;
    height:40px;
    background:url(../../images/bnft/ico_check_circle.svg) no-repeat center center;
}

.toastPop p.tit {
    padding-left:70px;
    text-align:left;
    font-size:18px;
    margin-bottom:5px;
}
.toastPop p.txt {
    padding-left:70px;
    text-align:left;
    font-size:14px;
    margin-bottom:5px;
}
.toastPop .agree,
.toastPop .disagree {display:none;}
/*도전ox퀴즈*/
.quizWrap   {
    position: relative;
}
.quizWrap .quizThumnail   {
    width: 100%;
    margin-bottom: 15px;
}
.quizWrap .quizThumnail img   {
    width: 100%;
    height: 100%;
}

.quizWrap .quizDate   {
    position: absolute;
    top:72%;
    left:50%;
    transform:translateX(-50%);
    width:150px;
    height:40px;
    text-align: center;
    font-size: 16px;
    font-weight: 600;
    padding:8px 15px 7px;
    background:#fff;
    border-radius: 999px;
}

.quizStamp   {
    position: relative;
    display:flex;
    align-items: center;
    gap:5px;
    position: absolute;
    top:85%;
    left:50%;
    transform:translateX(-50%);
}
.quizStamp li   {
    position: relative;
    font-family: GmarketSans;
    font-size:16px;
    font-weight: 600;
    color: #78B857;
    width:40px;
    height:40px;
    border:2px solid #78B857;
    text-align:center;
    line-height: 2.5;
    border-radius: 999px;
    background-color:#fff;
    z-index:1;
}
.quizStamp li.on   {
    background:#78B857 url(../../images/bnft/icon_walk_on.svg) no-repeat center center;
    background-size:40px;
    font-size:0;
}
.quizStamp li.on.fail   {
    background:#E81717 url(../../images/bnft/ico_fail.svg) no-repeat center center;
    border-color:#E81717;
    background-size:24px;
    font-size:0;
}
.quizStamp::before   {
    content:'';
    display:block;
    width:90%;
    height:2px;
    background:#78B857;
    border-radius: 999px;
    position: absolute;
    top:50%;
    left:0;
}
.quizStamp li.location::after  {
    display: block;
    content: '';
    position: absolute;
    top:-13px;
    left:15%;
    width:23px;
    height:66px;
    background: transparent url(../../images/bnft/ico_quiz_location.svg) no-repeat center;
}

.quizBox    {
    margin:15px;
    background:#fff;
    border-radius: 10px;
}
.quizBox .tit    {
    font-size: 18px;
    font-weight: 600;
    color: #1971C2;
    padding:20px;
    border-bottom:3px solid #F4F6F8;
}
.ico_question   {
    display:inline-block;
    width:24px;
    height:24px;
    background: url(../../images/bnft/ico_help.svg) no-repeat;
    vertical-align: -5px;
    margin-right:5px;
}
.quizBox .con    {
    position: relative;
    padding:20px;
}
.quizBox .txt    {
    font-size:16px;
    font-weight: 500;
}
.quizBox .qzSelect  {
    display:flex;
    justify-content: center;
    gap:20px;
    margin:30px auto;
}
.quizBox .qzSelect a  {
    display:block;
    width:120px;
    height:100px;
    font-family:'GmarketSans';
    font-size:40px;
    font-weight: 600;
    text-align:center;
    padding:27px;
    border:2px solid #eee;
    border-radius: 10px;
    line-height: 1.3;
}
.quizBox .qzSelect a.on {
    color:#fff;
    background:#1971C2;
}

.bottomAlram    {
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin: 30px 15px;
}
.bottomAlram p.tit    {
    line-height: 1.5;
    font-size: 14px;
    color: rgba(0, 0, 0, 0.7);
    letter-spacing: -0.05em;
    width: calc(100% - 100px);
    word-break: keep-all;
}
.bottomAlram .live_btn   {
    font-size: 12px;
    color: #78B857;
    padding:8px 15px 10px;
    line-height: 1;
    background-color: #78B857;
    border-radius:5px;
    white-space: nowrap;
    background-color: #fff;
    border:1px solid #78B857;
}
.bottomAlram .live_btn.outline   {
    color: #78B857;
}
.bottomAlram .live_btn i   {
    display: inline-block;
    width: 15px;
    height: 15px;
    vertical-align: -3px;
    margin-right:5px;
}
.bottomAlram .live_btn .ico_alarm2   {
    background: url(../../images/bnft/ico_check_green.svg) no-repeat center;
    background-size:18px;
}
.bottomAlram .live_btn.outline .ico_alarm2   {
    background: url(../../images/bnft/ico_atd03_green.svg) no-repeat center;
    background-size:18px;
}
#quizResult.btn.theme.gray    {
    background-color:#7E8282 !important;
}
/*뉴트리 캡슐만들기*/
.header.full_game .header__controls-wrapper    {
    background-color: #E0FFF0;
}
.microModal.microAlert.gameIntro .microModal__container    {
    overflow: unset;
}
.gameIntroWrap .tit  {
    font-weight: 700;
    font-size: 16px;
    line-height: 1.25;
    color: #16191d;
    box-sizing: border-box;
}
.gameIntroWrap  {

}
.ico_intro01  {
    width:52px;
    height:52px;
    display:block;
    margin:30px auto;
    background: #fff url(../../images/bnft/ico_leaf.svg) no-repeat;
    background-size: cover;
    font-size: 0;
}
.ico_intro02  {
    width:77px;
    height:86px;
    display:block;
    margin:30px auto;
    background: #fff url(../../images/bnft/ico_intro02.png) no-repeat;
    background-size: cover;
    font-size: 0;
}
.ico_intro03  {
    width:90px;
    height:90px;
    display:block;
    margin:30px auto;
    background: #fff url(../../images/bnft/ico_intro03.png) no-repeat;
    background-size: cover;
    font-size: 0;
}
.gamePaging {
    position: relative;
    height: 20px;
    text-align: center;
    margin-top: 30px;
}
.gamePaging span {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: #D7D7D7;
    margin: 0 5px;
    cursor: pointer;
}
.gamePaging span.active {
    background-color: #78B857;
}
.gameTop    {
    position: absolute;
    top: 0;
    width: calc(100% - 36px);
    display: block;
    color: #fff;
    font-size: 18px;
    background: transparent url(../../images/bnft/ico_capsule01.png) no-repeat center top;
    padding: 110px 0 16px;
    background-size: 90px;
    transform: translateY(-100%);
}
.microModal__btnContainer .btn.lg.theme {
    padding:0;
    width:100%;
}

/*캡슐만들기선택리스트*/
.gameListWrap   {
    background:#E0FFE3;
    padding:16px;
}
.gameListTop    {
    background: url(../../images/bnft/ico_gametop.png) no-repeat 90% 4px;
    background-size: 66px;
}
.gameListTop .txt1    {
    font-size: 16px;
}
.gameListTop .txt2    {
    font-size: 16px;
    color: #fff;
    font-weight: 600;
    background-color: #78B857;
    border-radius: 999px;
    padding:12px 0;
    text-align:center;
    margin:20px 0 16px;
}
.productSelectWrap    {
    display: flex;
    flex-direction: column;
    gap:16px;
}
.gameProduct   {
    position: relative;
    display: flex;
    gap: 16px;
    align-items: center;
    padding:10px;
    background-color: #fff;
    border-radius:10px;
}
.gameProduct .thum   {
    width:90px;
    height:90px;
    background: #E8EDEF url(../../images/bnft/noImg.svg) no-repeat center center;
    background-size: 30px;
    border-radius: 5px;
    overflow:hidden;
}
.gameProduct .thum img   {
    width:100%;
    height:100%;
}
.gameProduct .gpTit   {
    width: calc(100% - 108px);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}
.gameProduct .gpTit .tit   {
    width:100%;
    margin-bottom:20px;
}
.gameProduct .gpTit .tit b   {
    display:block;
    font-size:16px;
}
.gameProduct .gpTit .level   {
    display: inline-block;
    font-size:12px;
    margin-right:10px;
}
.gameProduct .gpTit .levelImg   {
    display: flex;
    gap:5px;
}

.gameProduct button.btn {
    position: absolute;
    bottom:10px;
    right:10px;
}

.gameProduct input[type="radio"] {
    position: absolute;
    top: 50%;
    left: 10px;
    transform: translateY(-50%);
    opacity: 0;
}
.gameProduct input[type="radio"] + label {
    font-size: 0;
    display: block;
    width: 20px;
    height: 20px;
    border: 2px solid #78b857;
    border-radius: 999px;
    line-height: 1;
    position: absolute;
    top: 10px;
    left: 10px;
}
.gameProduct.selected input[type="radio"] + label::after {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 12px;
    height: 12px;
    content: '';
    display: block;
    background: #78b857;
    border-radius: 999px;
}
.gameProduct.selected {
    background-color: rgba(0, 0, 0, 0.1);
}
/*뉴트리 캡슐만들기 게임*/
.ncGameWrap {
    position: relative;
    background-color: #E0FFF0;
    padding:16px;
    height: calc(100vh - 102px);
    margin-bottom: -140px;
    overflow-x: auto;
}
.ncGameWrap .ncGameTop {
    padding:24px 10px 24px 100px;
    background: #fff url(../../images/bnft/nc_img1.png) no-repeat 15px center;
    border-radius:10px;
}
.ncGameWrap .ncGameTop > p {
    font-size:16px;
    color:#000;
    font-weight: 500;
}
.ncGameWrap .ncGameTop > span {
    font-size:13px;
    color:#000;
}
.ncGameWrap .ncGameBody {
    position: absolute;
    /* width: 390px; */
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    height: 320px;
    margin: 0 auto;
    width: 390px;
}
/*공기방울애니메이션*/
.bubble-container {
    position: absolute;
    top: 23px;
    right: 10px;
    width: 60px;
    height: 150px;
    overflow: hidden;
}
.bubble {
    background-color: rgba(111, 186, 199, 0.5);
    border-radius: 50%;
    position: absolute;
    animation: float ease-in-out infinite;
}
@keyframes float {
    0% { opacity: 0; transform: translateY(0); }
    25% { opacity: 1; }
    75% { opacity: 1; transform: translateY(-15px); }
    100% { opacity: 0; transform: translateY(-20px); }
}
.flask-container {
    display: flex;
    height:200px;
    max-width: 390px;
    padding:0;
    margin: 50px auto;
    background: url(../../images/bnft/nc_table.svg) no-repeat bottom left;
    background-size: 100%;
}
.flask-container > [class*="flask"] {
    width: 20%;
}
.svgContainer {
    position: relative;
    width: 100%;
    height: 100%;
}
.svgContainer img {
    width: auto;
    height: auto;
    position: absolute;
    bottom:20px;
    display: none;
}
/* .flask-container .flask2 img {
    left: 4px;
}
.flask-container .flask3 img {
    left: -20px;
}
.flask-container .flask4 img {
    left: -30px;
} */
.flask-container .flask1    {
    width:21%;
    margin-left:2%;
}
.flask-container .flask2    {
    width:18%;
}
.flask-container .flask3    {
    width:14%;
}
.flask-container .flask4 .svgContainer img    {
    bottom:22px;
}
.flask-container .flask5 .svgContainer img    {
    bottom:22px;
}
.flask-container .flask1 .svgContainer,
.flask-container .flask2 .svgContainer  {
    padding-left:10px;
}
.flask-container .line2 .svgContainer {
    transform:translateX(6px);
}
.flask-container .line1 {
    position: absolute;
    top: 23px;
    left: 50%;
    display: block;
    width: 62px;
    height: 66px;
    transform: translateX(-131px);
}
.flask-container .line2 {
    position: absolute;
    top: 16px;
    left: 50%;
    display: block;
    width: 72px;
    height: 109px;
    transform: translateX(-18px);
}
.flask-container .line1 {
    position: absolute;
    top: 86px;
    left: 50%;
    display: block;
    width: 73px;
    height: 68px;
    transform: translateX(-130px);
}
.flask-container .line2 {
    position: absolute;
    top: 127px;
    left: 50%;
    display: block;
    width: 73px;
    height: 68px;
    transform: translateX(-20px);
}
.flask-container .line3 {
    position: absolute;
    top: 125px;
    left: 50%;
    display: block;
    width: 73px;
    height: 68px;
    transform: translateX(62px);
}
/* .flask-container .line1 img,
.flask-container .line2 img {
    position:relative;
    top:auto;
    left:auto;
    bottom:auto;
} */
.gameStepTit   {
    text-align: center;
    color: black;
    font-size: 18px;
    font-weight: 600;
}
.bar-container {
    position: relative;
    width: calc(100% - 130px);
    height: 15px;
    background-color: #fff;
    border-radius: 999px 0 0 999px;
    margin: 50px auto;
    transform: translateX(-30px);
}
.percentage-bar {
    height: 15px;
    background-color: #bbb;
    border-radius: 999px;
}
.bar-container.flask01 .percentage-bar {
    background-color: #00D3D9;
}
.bar-container.flask02 .percentage-bar {
    background-color: #1971C2;
}
.bar-container.flask03 .percentage-bar {
    background-color: #B929DD;
}
.bar-container.flask04 .percentage-bar {
    background-color: #60B98C;
}
.bar-container.flask05 .percentage-bar {
    background-color: #FFB27A;
}
.per-flask {
    display:block;
    position: absolute;
    top: -25px;
    right: -60px;
    width:60px;
    height:60px;
    font-size:0;
    border-radius: 999px;
}
.per-flask span {
    position: absolute;
    bottom: -30px;
    font-size: 16px;
    color: #000;
    font-weight: 600;
    text-align: center;
    width: 100%;
}
.ico_flask {
    display:block;
    width:60px;
    height:60px;
    font-size:0;
    border-radius: 999px;
    margin:20px auto;
    background-color:#aaa;
}
.ico_flask.flask01,
.bar-container.flask01 .per-flask  {
    background:#00D3D9 url(../../images/bnft/ico_flask1.svg) no-repeat center center;
}
.ico_flask.flask02,
.bar-container.flask02 .per-flask  {
    background:#1971C2 url(../../images/bnft/ico_flask2.svg) no-repeat center center;
}
.ico_flask.flask03,
.bar-container.flask03 .per-flask  {
    background:#B929DD url(../../images/bnft/ico_flask3.svg) no-repeat center center;
}
.ico_flask.flask04,
.bar-container.flask04 .per-flask  {
    background:#60B98C url(../../images/bnft/ico_flask4.svg) no-repeat center center;
}
.ico_flask.flask05,
.bar-container.flask05 .per-flask  {
    background:#FFB27A url(../../images/bnft/ico_flask5.svg) no-repeat center center;
}
.bar-container .per-txt    {
    margin: 10px auto 45px;
    text-align: left;
    font-size: 16px;
}
.ico_acorn   {
    display: inline-block;
    background: url(../../images/bnft/ico_acorn.svg) no-repeat;
    background-size: 16px;
    width: 20px;
    vertical-align: -2px;
    height: 16px;
    margin-right: 5px;
}
.ico_leaf   {
    display: inline-block;
    background: url(../../images/bnft/ico_leaf.svg) no-repeat;
    background-size: 16px;
    width: 20px;
    vertical-align: -2px;
    height: 16px;
    margin-right: 5px;
}
.bottomFixed {
    position: absolute;
    bottom: 30px;
    left: 16px;
    width: calc(100% - 32px);
}
.bottomBtnControls.beetween.bottomFixed {
    position: absolute;
    bottom: 30px;
    left: 16px;
    width: calc(100% - 32px);
}

.btn.theme2.outline {
    border-color: #613c1c;
}
.leaf_cnt   {
    width:50%;
    text-align:right;
}

/*뉴트리캡슐만들기 모으기 리스트*/
.capsuleCollectWrap   {

}
.capsuleCollectTop   {
    position: relative;
    padding:16px;
    background-color: #E0FFE3;
}
.capsuleCollectTop .main-tit   {
    font-size: 16px;
    font-weight: 600;
}
.capsuleCollectTop .sub-tit   {
    position: absolute;
    top:16px;
    right:16px;
    font-size:14px;
}
.capsuleCollectTop .innerIcon {
    position: relative;
    height:250px;
}
.capsuleCollectTop .innerIcon .img {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    width: 124px;
    height: 124px;
    border-radius: 999px;
    display: block;
    background-color: #fff;
    margin: 24px auto;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.25);
}
.capsuleCollectTop .innerIcon::before {
    content: '';
    width: 46px;
    height: 46px;
    background: url(../../images/bnft/ico_leaf.svg) no-repeat;
    position: absolute;
    left: 50%;
    transform: translateX(30px);
    top: 25px;
    z-index: 1;
    background-size: cover;
}
.capsuleCollectTop .innerIcon::after {
    content: '';
    width: 46px;
    height: 46px;
    background: url(../../images/bnft/ico_leaf.svg) no-repeat;
    position: absolute;
    left: 50%;
    top: 40px;
    transform: translateX(-80px) rotate(250deg);
    z-index: 1;
    background-size: cover;
}
.capsuleCollectTop .innerIcon .img > img {
    width: 60px;
    height: 60px;
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.capsuleCollectTop .innerIcon .txt1 {
    font-size: 18px;
    text-align: center;
    padding-top: 180px;
}
.capsuleCollectTop .innerIcon .txt2 {
    font-size: 18px;
    text-align: center;
    margin-bottom:15px;
}
.capsuleCollectTop .innerIcon .txt2 b {
    color:#77b857;
}
.capsuleCollectTop .nowCoinCnt  {
    background: #c7e8ca;
    color: #264a14;
    font-size: 16px;
    text-align: right;
    padding: 16px;
    margin: 16px -16px -16px;
}
.capsuleCollectTop .nowCoinCnt i.icon  {
    display: inline-block;
    content: '';
    width: 16px;
    height: 16px;
    background: url(../../images/bnft/ico_leaf.svg) no-repeat;
    background-size: cover;
    vertical-align: -3px;
    margin-right: 5px;
}
.capsuleCollectTop .pagination {
    position: absolute;
    bottom: 18px;
    width: calc(100% - 32px);
    text-align: center;
    z-index: 1;
}

.capsuleCollectTop .pagination button {
    display: inline-block;
    width: 10px;
    height: 10px;
    margin: 0 5px;
    border-radius: 50%;
    background: #fff;
    border: none;
    cursor: pointer;
    transition: background 0.3s ease;
}
.capsuleCollectTop .pagination button.active {
    background: #78b857;
}

.capsuleCollectListWrap   {
    background-color: #fff;
}
.capsuleCollectListWrap h2.bnf_title {
    font-size: 18px;
    font-weight: 700;
    color: #16191d;
    padding: 20px 16px 0;
}
.capsuleCollectListWrap h2.bnf_title b    {
    color:#77b857;
}
.capsuleCollectList li   {
    margin:16px;
}
.capsuleCollectList li   {
    position: relative;
    padding: 16px 0;
    display: flex;
    align-items: center;
    gap: 25px;
    border-bottom:1px solid rgba(0, 0, 0, 0.1);
}
.capsuleCollectList li:last-child{
    border-bottom:none;
}
.capsuleCollectList li .img   {
    width: 90px;
    height: 90px;
    background: #f7f7f7;
    border-radius: 10px;
    position: relative;
}
.capsuleCollectList li .img > img   {
    width: 42px;
    height: 42px;
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.capsuleCollectList li .txt .tit{
    font-size:16px;
    color:#000;
    font-weight:600;
    margin-bottom:10px;
}
.capsuleCollectList li .txt .acorn{
    font-size:14px;
    font-weight:600;
}
.capsuleCollectList li .txt .acorn::before {
    display: inline-block;
    content: '';
    width: 20px;
    height: 20px;
    background: url(../../images/bnft/ico_acorn.svg) no-repeat;
    background-size: cover;
    vertical-align: -3px;
    margin-right: 5px;
}
.capsuleCollectList li .txt .leaf{
    font-size:14px;
    font-weight:600;
}
.capsuleCollectList li .txt .leaf::before {
    display: inline-block;
    content: '';
    width: 16px;
    height: 16px;
    background: url(../../images/bnft/ico_leaf.svg) no-repeat;
    background-size: cover;
    vertical-align: -3px;
    margin-right: 5px;
}
/*캡슐만들기 현재상태*/
.gameStatus {
    text-align:center;

}
.gameStatus .tit {
    font-size:18px;
    color:#000;
    font-weight: 500;
}
.gameStatus .tit b {
    color: #77b857;
}
.gameStatus .tit2 {
    font-size:16px;
    color:#77b857;
    margin-top:10px;
}
.gameStatusBarWrap  {
    width: 90%;
    margin: 50px auto 0;
}
.gameStatusBar  {
    position: relative;
    display: flex;
    width: 100%;
    height: 10px;
    background-color: #D9D9D9;
    justify-content: space-between;
    font-size: 0;
    border-radius: 999px;
    margin:40px 0;
}
.gameStatusBar.status01  {

}
.gameStatusBar span  {
    width:24px;
    height:24px;
    border-radius: 999px;
    background:#fff;
    border:2px solid #D9D9D9;
    margin: -7px 0 0 0;
    z-index: 1;
}
.gameStatusBar span.on  {
    background-color: #78B857;
    border-color: #78B857;
}
.gameStatusBar span.first  {
    width: 40px;
    height: 40px;
    border-radius: 0;
    border: none;
    z-index: 1;
    margin-top: -15px;
    margin-left: -15px;
    background: url(../../images/bnft/ico_leaf.svg) no-repeat;
    background-size: 36px;
}
.gameStatusBar span.last  {
    position: relative;
}
.gameStatusBar span.last::before  {
    display:block;
    content:'';
    position: absolute;
    top:0;
    right:15px;
    width: 60px;
    height: 60px;
    border-radius: 0;
    border: none;
    margin-top: -32px;
    margin-right: -36px;
    background: url(../../images/bnft/ico_giftPill.png) no-repeat;
    background-size: 60px;
    z-index: 1;
}
.gameStatusBar span.last.on::after{
    display: block;
    content: '';
    position: absolute;
    top: -56px;
    right: -35px;
    width: 90px;
    height: 90px;
    background: url(../../images/bnft/ico_star.svg) no-repeat;
    background-size: 90px;
    animation: fadeInAndGrow 2s ease-in-out infinite;
}
@keyframes fadeInAndGrow {
    0% {
        opacity: 0;
        transform: scale(0);
    }
    50% {
        opacity: 1;
        transform: scale(1);
    }
    100% {
        opacity: 0;
        transform: scale(0);
    }
}


.gameStatusBar .per {
    position: absolute;
    top:0;
    left:0;
    height:10px;
    background-color: #78B857;
    border-radius: 999px;
}
.gameGift   {

}
.gameGift .tit   {
    font-size: 16px;
    color:#000;
    font-weight: 500;
}
.gameGiftInbox  {
    display:flex;
    gap:20px;
    border:1px solid rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    padding:10px;
    align-items: center;
    margin:16px 0 5px;
}
.gameGiftInbox .img  {
    width:80px;
    height:80px;
    border-radius: 5px;
    overflow: hidden;
}
.gameGiftInbox .img > img  {
    width:100%;
    height:100%;
}
.gameGiftInbox .txt  {

}
.gameGiftInbox .txt .txt1  {
    font-size: 14px;
    color:rgba(0, 0, 0, 0.7);
}
.gameGiftInbox .txt .txt2  {
    font-size: 16px;
    color:#000;
    font-weight: 500;
}
.gameGift .btn.giftReset    {
    background-color: #fff;
    margin-bottom:16px;
}
.ico_giftReset  {
    display:inline-block;
    width:27px;
    height:27px;
    background: url('../../images/bnft/icon_reset.svg') no-repeat;
    background-size: cover;
}


.gameCoupon {

}
.gameCoupon .tit   {
    position: relative;
    font-size: 16px;
    color:#000;
    font-weight: 500;
}
.gameCoupon .tit a   {
    display: block;
}
.gameCoupon .tit::after {
    position: absolute;
    top:0;
    right:0;
    content:'';
    width: 24px;
    height: 24px;
    background: url(../../images/bnft/ico_next.svg) no-repeat;
    background-size: cover;
}

.gameCouponInbox  {
    position: relative;
    display:flex;
    gap:8px;
    border:2px solid #0c3f8b;
    padding:10px;
    align-items: center;
    margin:16px 0 50px;
    overflow: hidden;
    border-radius:10px;
}
.gameCouponInbox .barcode  {
    display: inline-flex;
    justify-content: center;
    width:20px;
}
.gameCouponInbox .img  {
    width: 102px;
    height: 80px;
    border-radius: 5px;
    overflow: hidden;
    border-left: 1px dashed #dedede;
    border-right: 1px dashed #dedede;
    padding:0 10px;
}
.gameCouponInbox .img > img  {
    width:100%;
    height:100%;
}
.gameCouponInbox .txt  {
    text-align: center;
    width: calc(100% - 140px);
}
.gameCouponInbox .txt::before  {
    content: '····························································';
    color: #A8A8A8;
    position: absolute;
    top: 0;
    right: 10px;
    letter-spacing: 0.2em;
    text-align: center;
    width: calc(100% - 160px);
    overflow: hidden;
}
.gameCouponInbox .txt::after  {
    display:block;
    content: '····························································';
    color: #A8A8A8;
    position: absolute;
    bottom: 0;
    right: 10px;
    letter-spacing: 0.2em;
    text-align: center;
    width: calc(100% - 160px);
    overflow: hidden;
}
.gameCouponInbox::after  {
    position: absolute;
    right: 0;
    top: 22px;
    width: calc(100% - 140px);
    text-align: center;
    content: 'FREE VOUCHER COUPON';
    display: block;
    font-size: 8px;
    letter-spacing: 0.6em;
    line-height: 1;
    margin-top: -5px;
    color: #000;
    font-weight: 100;
}
.gameCouponInbox .txt .txt1  {
    padding-top: 10px;
    font-size: 13px;
    color:rgba(0, 0, 0, 0.7);
}
.gameCouponInbox .txt .txt2  {
    font-size: 16px;
    color:#000;
    font-weight: 500;
    line-height:1.2;
    word-break: keep-all;
}

.ico_present  {
    display: inline-block;
    width: 26px;
    height: 27px;
    background: url(../../images/bnft/ico_present.svg) no-repeat;
    background-size: cover;
    vertical-align: -8px;
    margin-right: 5px;
}
.microModal__content .comment-box   {
    padding:16px 0 50px;
}
/*도토리보유내역*/
.acornListTop   {
    display:flex;
    align-items: center;
    justify-content: space-between;
    margin:16px;
}
.acornListTop .acornAll   {
    font-size: 16px;
    font-weight: 500;
    color:#000;
}
.acornListTop .acornDay   {
    font-size: 14px;
    color:rgba(0, 0, 0, 0.7);
}
.acornList  {
    border-top:1px solid #DEE2E6;
}
.acornList li  {
    display:flex;
    align-items: center;
    background-color: #fff;
    border-bottom:1px solid #DEE2E6;
    padding:16px 20px;
}
.acornList li span.tit  {
    width:50%;
    font-size: 16px;
    font-weight: 500;
}
.acornList li span.dayTime  {
    width:30%;
}
.acornList li span.cnt  {
    display: inline-flex;
    justify-content: flex-end;
    width: 20%;
    color:#1971C2;
    font-weight: 500;
}
.acornList li span.cnt.minus  {
    color:#c10000;
}
.acornList li .ico_flask01  {
    display: inline-block;
    width: 25px;
    height: 25px;
    background: url(../../images/bnft/ico_flask1.svg) no-repeat center;
    background-size: 9px;
    margin-left: 10px;
    vertical-align: -6px;
}
.acornList li .ico_flask02  {
    display: inline-block;
    width: 25px;
    height: 23px;
    background: url(../../images/bnft/ico_flask2.svg) no-repeat center;
    background-size: 25px;
    margin-left: 10px;
    vertical-align: -6px;
}
.acornList li .ico_flask03  {
    display: inline-block;
    width: 25px;
    height: 23px;
    background: url(../../images/bnft/ico_flask3.svg) no-repeat center;
    background-size: 20px;
    margin-left: 10px;
    vertical-align: -6px;
}
.acornList li .ico_flask04  {
    display: inline-block;
    width: 25px;
    height: 23px;
    background: url(../../images/bnft/ico_flask4.svg) no-repeat center;
    background-size: 16px;
    margin-left: 10px;
    vertical-align: -6px;
}
.acornList li .ico_flask05  {
    display: inline-block;
    width: 25px;
    height: 23px;
    background: url(../../images/bnft/ico_flask5.svg) no-repeat center;
    background-size: 16px;
    margin-left: 10px;
    vertical-align: -6px;
}
/*섭취챌린지*/
.challengeWrap {
    position: relative;
    padding:16px;
}

.challengeIntro {
    background: #DEFBFF url(../../images/bnft/img_challenge.png) no-repeat 95% center;
    padding:30px 16px;
    margin: -16px -16px 16px;
}
.challengeIntro > b {
    color:#1971C2
}
.challengeMain__innerTitle  {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 16px;
}
.challengeWrap .headerTab   {
    margin:0 -16px;
}
.ps_info    {
    font-size:13px;
    color:#666968;
    margin-top:20px;
    background:url(../../images/bnft/icon_info.svg) no-repeat left 2px;
    padding-left:22px;
}
.challenge_checklist    {
    background: #fff;
    margin: 0 -16px;
}
.challenge_checklist li    {
    position: relative;
    height:110px;
    padding:16px;
}
.challenge_checklist li .b-checkbox.checkbox     {
    display:flex;
    align-items: flex-start;
}
.checkProduct   {
    position: relative;
    display: block;
    width: 100%;
    height: 80px;
}
.checkProduct .thum   {
    position:absolute;
    top:0;
    left:10px;
    width:80px;
    height:80px;
    background: #E8EDEF url(../../images/bnft/noImg.svg) no-repeat center center;
    background-size: 30px;
    border-radius: 5px;
    overflow:hidden;
}
.checkProduct .thum img   {
    width:100%;
    height:100%;
}
.checkProduct .tit   {
    line-height: 1.2;
    padding-left: 100px;
}
.checkProduct .code   {
    display:block;
    padding-left: 100px;
}
.checkProduct .code span   {
    display:inline-block;
    font-size:11px;
    color:#fff;
    background:#ccc;
    line-height: 1;
    padding:4px 8px;
    border-radius:4px;
}
.checkProduct .code .c01   {
    background-color: #FF7A00;
}
.checkProduct .code .c02   {
    background-color: #29BFBD;
}
.checkProduct .dayCheck   {
    position:absolute;
    bottom:0;
    left:100px;
    font-size:13px;
    color:rgba(0, 0, 0, 0.7);
    padding-left:20px;
    background:url(../../images/bnft/ico_tablet.svg) no-repeat left 2px;
}
/*섭취챌린지 데이달력*/
.day_calendarWrap   {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0;
}
.day_calendar {
    width:100%;
    background-color: white;
    padding: 16px;
}
.day_calendar .calendar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}
.day_calendar .Month {
    font-size:18px;
    font-weight:600;
}
.day_calendar .calendar-days {
    display: flex;
    gap: 4px;
    justify-content: space-between;
}
.day_calendar .day {
    width: 48px;
    height: 50px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border-radius: 2px;
    transition: all 0.3s;
    background-color:#F4F6F8;
}
.day_calendar .day.today {
    border:2px solid #1971C2;
}
.day_calendar .day.center .day-number {
    color: #1971C2;
    font-weight: 600;
}
.day_calendar .day.focused {
    border:2px solid #1971C2;
}
.day_calendar .day.center {
    border:2px solid #1971C2;
    color: #1971C2;
}
.day_calendar .day-name {
    font-size: 0.8em;
    color: #777;
}
.day_calendar .day-number {
    font-size: 14px;
}
button.btnDayCalendar {
    color: #666;
    font-size:11px;
    padding: 5px 10px;
    border-radius: 5px;
    cursor: pointer;
}

/*섭취챌린지 리스트*/
.challengeBar-container {
    background:#fff;
    padding:20px 16px;
}
.challengeBar-container h3 {
    font-size:16px;
    font-weight:600;
    background:url('../../images/bnft/ico_checklist.svg') no-repeat left 3px;
    padding-left:24px;
    margin-bottom:16px;
}
.challengeBar-container .bar {
    position:relative;
    width:85%;
    height: 15px;
    background-color: #DBE5EE;
    border-radius: 999px;
}
.challengeBar-container .per {
    height: 15px;
    background-color: #1971C2;
    border-radius: 999px;
}
.challengeBar-container .per-txt {
    font-size: 14px;
    color: #1971C2;
    width: 15%;
    position: absolute;
    display: block;
    font-weight: 600;
    right: -15%;
    top: -5px;
    text-align: right;
}
.challengeProduct   {
    position: relative;
    width: calc(100% - 32px);
    margin: 0 16px;
}
.challengeProduct > a   {
    display: flex;
    gap: 16px;
    align-items: center;
    padding:16px 0;
}

.challengeProduct + .challengeProduct   {
    border-top:2px solid #DEE2E6;
}
.challengeProduct .thum   {
    width:80px;
    height:80px;
    background: #E8EDEF url(../../images/bnft/noImg.svg) no-repeat center center;
    background-size: 30px;
    border-radius: 5px;
    overflow:hidden;
}
.challengeProduct .thum img   {
    width:100%;
    height:100%;
}
.challengeProduct .cpTit   {
}
.challengeProduct .cpTit .tit   {
    padding-right: 60px;
    margin-bottom:5px;
}
.challengeProduct .cpTit .dayCheck   {
    font-size:13px;
    color:rgba(0, 0, 0, 0.7);
    background:url(../../images/bnft/ico_tablet.svg) no-repeat 0 2px;
    padding-left:22px;
}
.challengeProduct .drugCheck  {
    display:flex;
    position:absolute;
    bottom:16px;
    right:0;
    height:25px;
    width:auto;
    z-index: 1;
}
.challengeProduct .drugCheck span  {
    display:block;
    font-size:0;
    width:30px;
    height:24px;
    background:url(../../images/bnft/ico_drug_off.svg) no-repeat center center;
    cursor: pointer;
}
.challengeProduct .drugCheck span.drug_on  {
    background:url(../../images/bnft/ico_drug_on.svg) no-repeat center center;
}
.challenge_add  {
    position:fixed;
    right:20px;
    bottom:16px;
    z-index: 10;
}
.btn_add_challenge  {
    width:44px;
    height:44px;
    background:#78B857 url(../../images/bnft/ico_plus_green.svg) no-repeat center center;
    background-size: 18px;
    border-radius:9999px;
    font-size:0;
    filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.1));
}

/*섭취챌린지 통계달력*/
.challenge_stats01 {
    margin: 16px;
}

.challenge_stats01 h3.tit01 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: url(../../images/bnft/ico_flag.svg) no-repeat;
    font-size: 16px;
    font-weight: 600;
    padding-left: 24px;
    line-height: 1.2;
    margin-bottom: 16px;
}
.challenge_stats01 h3.tit01 span.inTit {
    display: block;
    font-size: 16px;
}
.challenge_stats01 h3.tit01 span.dday {
    display: block;
    font-size: 12px;
    color: rgba(0, 0, 0, 0.7);
}
.challenge_stats01 h3.tit01 b,
.challenge_stats01 h3.tit01 span b {
    color: #1971C2;
}

.stats-calendar {
    background: #fff;
    border-radius: 4px;
    overflow: hidden;
}

.stats-header {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 16px;
}

.stats-month {
    font-size: 20px;
    font-weight: 600;
}

.stats-days {
    display: flex;
    padding: 5px 0;
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
    margin-bottom: 4px;
}

.stats-days div {
    flex: 1;
    text-align: center;
    font-size: 12px;
}

.stats-dates {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0;
    height: 340px;
    overflow: hidden;
    overflow-y:scroll;
}

.stats-dates .month-container {
    width: 100%;
    padding: 0 16px 16px;
}

.stats-dates .month-header {
    text-align: left;
    padding: 16px 0;
    font-size: 16px;
    font-weight: bold;
}

.stats-dates .dates-grid {
    display: flex;
    flex-wrap: wrap;
    gap:4px;
}

.stats-dates .dates-grid div {
    position: relative;
    width: calc(100% / 7 - 4px);
    height: 45px;
    /* border-radius:999px; */
    text-align: center;
    padding: 5px;
    line-height: 2.2;
    cursor: pointer;
}
.stats-dates .dates-grid div.today {
    font-weight: bold;
    line-height: 1.8;
}
.stats-dates .dates-grid div.today::after {
    position: absolute;
    top:0;
    left:50%;
    transform:translateX(-50%);
    display:block;
    content:'';
    width:36px;
    height:36px;
    border-radius:9999px;
    border: 2px solid #78B857;
    background: #fff;
    z-index: 3;
}
.stats-dates .dates-grid div.today::before {
    display: block;
    content: '오늘';
    position: absolute;
    bottom: -7px;
    color: #78b857;
    left: 0;
    text-align: center;
    font-size: 9px;
    width: 100%;
    z-index: 4;

    height: auto;
    top: auto;
    background: inherit;
    transform: unset;
    border-radius: 0;
}
.stats-dates .dates-grid div.today.stats_ing::after {
    background-color:#77b85750;
}
.stats-dates .dates-grid div span{
    display:block;
    position: absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    z-index:4;
    line-height: 2.3;
}
.stats-calendar .stats_done {color:#fff;}
/*진행중*/
.stats-calendar .stats_ing::before {
    display: block;
    width:36px;
    height:36px;
    border-radius:9999px;
    position: absolute;
    content: '';
    top:0;
    left:50%;
    transform:translateX(-50%);
    background:#77b85750;
    z-index:1;
}
.stats-calendar .stats_done::before {
    display: block;
    width:36px;
    height:36px;
    border-radius:9999px;
    position: absolute;
    content: '';
    top:0;
    left:50%;
    transform:translateX(-50%);
    background:#77b857;
}
.stats-calendar .dates-grid div.today.stats_done::before    {
    background: none;
    transform: unset;
    border-radius: 0;
    height: auto;
    top: auto;
}
.stats-dates .dates-grid div.stats_done::after{
    content: '';
    display: block;
    position: absolute;
    top: 8px;
    right: -12px;
    width: 22px;
    height: 20px;
    background: #78b857;
    z-index: 1;
}
.stats-dates .dates-grid div.stats_done.hide-after::after {
    display: none;
}
.stats-dates .dates-grid div.today::after {
    display: block !important;
    width: 36px;
    height: 36px;
    border-radius: 9999px;
    position: absolute;
    content: '';
    top: 0;
    left: 50%;
    transform: translateX(-50%);
}
.stats-dates .dates-grid div.stats_30done::before,
.stats-dates .dates-grid div.today.stats_30done::before {
    content:'성공';
    color:#ff7a00;
}
.stats-dates .dates-grid div.stats_30done::after{
    display: block;
    width:36px;
    height:36px;
    border-radius:9999px;
    position: absolute;
    content: '';
    top:0;
    left:50%;
    transform:translateX(-50%);
    background: #FF7A00;
    border-color:#FF7A00;
    z-index: 1;
}
.stats-dates .dates-grid div.stats_30done span{
    color:#fff;
}
.challengeReward {
    position: relative;
}
.challengeReward h3.tit02 {
    font-size: 16px;
    font-weight: 600;
    line-height: 1.2;
    padding: 16px;
}
.rewardRegend   {
    display:flex;
    gap:10px;
    position: absolute;
    top:16px;
    right:16px;
}
.rewardRegend li   {
    font-size:12px;
}
.rewardRegend li::before   {
    display:inline-block;
    content:'';
    width:12px;
    height:12px;
    border-radius: 999px;
    margin-right:5px;
    vertical-align: -1px;
    background-color: #666;
}
.rewardRegend li.c01::before   {
    background-color: #1971C2;
}
.rewardRegend li.c02::before   {
    background-color: #FF6B00;
}
.rewardTotal    {
    display:flex;
    justify-content: space-around;
    gap:10px;
    padding:0 16px 16px
}
.rewardTotal a    {
    display:block;
    width:33%;
    border-radius:999px;
    border:2px solid #666;
    font-weight:600;
    height:42px;
    line-height:2.5;
    text-align:right;
    padding:0 10px;
    letter-spacing: -0.05em;
}
.rewardTotal .reward01  {
    background:#fff url(../../images/bnft/ico_mile_blue.svg) no-repeat 10px center;
    background-size:20px;
    color:#1971C2;
    border-color:#1971C2;
}
.rewardTotal .reward02  {
    background:#fff url(../../images/bnft/ico_mile_org.svg) no-repeat 10px center;
    background-size:20px;
    color:#FF6B00;
    border-color:#FF6B00;
}
.rewardTotal .reward03  {
    background:#fff url(../../images/bnft/ico_coupon_org.svg) no-repeat 10px center;
    background-size:20px;
    color:#FF6B00;
    border-color:#FF6B00;
}
.challengeProductNow    {

}
.challengeProductNow h3.tit02 {
    font-size: 16px;
    font-weight: 600;
    line-height: 1.2;
    padding: 16px;
}

/*섭취제품관리 설정*/
.productManagement  {
    margin-bottom:10px;
}
.productManagement li  {
    background:#fff url("../../images/bnft/ico_next_list.svg") no-repeat calc(100% - 16px) center;
    border-bottom:1px solid #DEE2E6;
}
.productManagement li a  {
    display:block;
    padding:16px;
    font-size:18px;
}
.productManagement li fieldset.toggle   {
    padding:11px 16px;
}
.productManagement li fieldset.toggle label span{
    font-size:18px;
}
.topProductBox  {
    position: relative;
    padding: 16px;
}
.topProductBox .sub-tab__trigger  {
    padding: 0;
}
.btn-cpWrite    {
    position: absolute;
    right:16px;
    top:16px;
    font-size:0;
    width:30px;
    height:30px;
    background:url(../../images/bnft/ico_pen.svg) no-repeat center center;
    z-index: 1;
}
.cpDate    {
    position: absolute;
    right:16px;
    bottom:16px;
    font-size:12px;
    color:rgba(0, 0, 0, 0.7);
    text-align:right;
}
/*섭취제품 관리*/
.challengeInfo  {
    margin:16px;
}
h3.sub-tit  {
    font-size: 16px;
    font-weight: 700;
    margin: 16px 0;
}
h3.sub-tit i  {
    vertical-align: -6px;
}
.challengeInfo .ciProduct  {
    position: relative;
    background:#fff;
    padding:16px;
    margin: 0 -16px;
}
.challengeInfo .ciProduct .checkProduct .thum   {
    left:0;
}
.bottomBtnControls.fixed   {
    margin:0 16px;
    position:fixed;
    bottom:16px;
    width: calc(100% - 32px);
    max-width:688px;
}
.challengeSet   {
    position: relative;
    margin:16px;
}
.challengeSet .challengeDate    {
    position:absolute;
    right:0;
    top:0;
    font-size:16px;
}
.challengeSet .ciSetBox   {
    position: relative;
    background:#fff;
    padding:30px 16px 16px;
    margin: 0 -16px;
    text-align:center;
}
.challengeSet .ciSetBox .custom-radio-container   {
    justify-content: center;
}

/*섭취카운팅*/
.ci_counter {
    display: flex;
    align-items: center;
    background-color: white;
    padding: 20px 0;
    justify-content: center;
}
.ci_button {
    font-size: 24px;
    width: 40px;
    height: 40px;
    color: #000;
    cursor: pointer;
    border-radius: 4px;
    background-image: linear-gradient(to bottom, #fff, #eee);
    border: 1px solid #BEBEBE;
}
.ci_button:hover {
    background-color: #0056b3;
}
.ci_button:disabled {
    background-color: #cccccc;
    cursor: not-allowed;
}
.ci_count {
    font-size: 24px;
    margin: 0 20px;
    min-width: 30px;
    text-align: center;
}
.ci_counter span{
    font-size: 16px;
    margin:0 10px;
}

.challengeMemo   {
    position: relative;
    margin:16px;
}
.white_textarea {
    width:calc(100% + 32px);
    margin:0 -16px;
    background:#fff;
    font-size:16px;
    padding:16px;
}
/*섭취알림설정*/
.challengeAlarmSet    {
    font-size: 16px;
    background-color: #fff;
    padding:50px 0;
}
.challengeAlarmSet label span    {
    font-weight: 600;
}

.challengeAlarmSetList  {
    margin:16px;
}
.alarmList   {
    background-color: #fff;
    margin:0 -16px;
}
.alarmList li   {
    display: flex;
    border-bottom: 1px solid #DEE2E6;
    justify-content: space-between;
    align-items: center;
}
.alarmList li span a   {
    display: block;
    font-size: 16px;
    padding: 16px 60px 16px 16px;
    background: url(../../images/bnft/ico_next_list.svg) no-repeat right center;
}
/*섭취챌린지 알림시간 타임피커*/
.challenge-time-picker {
    text-align: center;
    margin-top:20px;
}
.challenge-time-picker .tit {
    margin-top: 0;
    font-size: 18px;
}
.challenge-picker-container {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 20px 0 50px;
}
.challenge-picker-column {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0 10px;
}
.challenge-arrow,
.challenge-next {
    position:relative;
    font-size: 0;
    cursor: pointer;
    user-select: none;
    background-image: linear-gradient(180deg, white, #E0E0E0);
    width: 54px;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 5px;
    border: 1px solid #bebebe;
}
.challenge-arrow:after {
    content:'';
    display: block;
    position: absolute;
    width:17px;
    height:9px;
    background: url('../../images/bnft/ico_up.svg') no-repeat center center;
}
.challenge-next:after {
    content:'';
    display: block;
    position: absolute;
    width:17px;
    height:9px;
    background: url('../../images/bnft/ico_down.svg') no-repeat center center;
}
.challenge-value {
    font-size: 24px;
    font-family: 'GmarketSans';
    font-weight: 400;
    margin: 15px 0 10px;
    width: 60px;
    height:48px;
    cursor: pointer;
    white-space: nowrap;
    line-height: 2;
}
.challenge-select {
    font-size: 24px;
    font-family: 'GmarketSans';
    font-weight: 400;
    width: 60px;
    height:48px;
    margin: 15px 0 10px;
    text-align: center;
    display: none;
}
/*모바일스탬프*/
.microModal__title.card__title  {
    text-align:left;
    transform: none;
    left: 16px;
    font-weight:400;
}
.card_title {
    background: url(../../images/bnft/ico_stamp_card.svg) no-repeat 0 3px;
    background-size: 23px;
    font-size: 16px;
    padding-left:30px;

}
.card_title b {
    font-size: 18px;
    color: #78B857;
}
.stampCardWrap  {
    position: relative;
}
.stampCard  {
    position: relative;
    color:#fff;
    width:100%;
    height:320px;
    background-color: #78B857;
    overflow: hidden;
}
.stampCardTop {
    display:flex;
    align-items: center;
    justify-content: space-between;
    padding:16px;
}
.stampCard .shopName  {
    display: flex;
    align-items: center;
    gap:10px;
    font-size:18px;
    font-weight:700;
}
.stampCard .shopName_none  {
    font-size:18px;
    text-align: center;
    margin:20px auto 0 auto;
}
.stampCard .btn_reply  {
    display: inline-block;
    width:18px;
    height:18px;
    font-size: 0;
    background:url(../../images/bnft/ico_reset2.svg) no-repeat;
    background-size: cover;
}
.stampCard .cardCnt  {
    font-size: 16px;
    color:rgba(255,255,255,0.7);
}
.stampCard .cardCnt > b  {
    color:rgba(255,255,255,1);
}
.stampCard .stampArea  {
    display:flex;
    flex-wrap:wrap;
    align-items: center;
    max-width: 360px;
    margin: 0 auto;
}
.stampCard .stampArea li  {
    display: inline-flex;
    width: 20%;
    margin: 10px 0;
    align-items: center;
    justify-content: center;
}

.stampCard .stampArea li span  {
    display:inline-flex;
    justify-content: center;
    align-items: center;
    width:50px;
    height:50px;
    border-radius: 999px;
    background-color: rgba(255,255,255,0.5);
    color:#fff;
    text-align:center;
}
.stampCard .stampArea li.on span  {
    background:#fff url(../../images/bnft/stamp_nutricore.svg) no-repeat center center;
    background-size:30px;
    font-size:0;
}
.stampCardbm    {
    margin:20px;
    text-align:center;
    font-size:14px;
    line-height:1.8;
}


.stampCardWrap .pagination {
    position: absolute;
    bottom: 20px;
    width: 100%;
    text-align: center;
    z-index: 1;
}

.stampCardWrap .pagination button {
    display: inline-block;
    width: 10px;
    height: 10px;
    margin: 0 5px;
    border-radius: 50%;
    background: #78b857;
    border:2px solid #fff;
    cursor: pointer;
    transition: background 0.3s ease;
}
.stampCardWrap .pagination button.active {
    background: #fff;
}
.stampCardComement  {
    display:flex;
    align-items: center;
    justify-content: space-between;
    padding:20px 16px;
    background-color: #F4F6F8;
}
.stampCardGiftWrap  {
    padding:0 16px 16px;
    background-color: #F4F6F8;
}
.stampCardGift  {
    border:1px solid rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    background-color: #Fff;
}
.stampCardGift .productInfo  {
    display:flex;
}
.stampCardGift .ps  {
    font-size:14px;
    color:rgba(0, 0, 0, 0.7);
    padding:16px;
    border-top:1px solid rgba(0, 0, 0, 0.1);
}
.productInfoBox {
    display: flex;
    gap: 20px;
    border-radius: 10px;
    padding: 10px;
    align-items: center;
}
.productInfoBox .img  {
    width:80px;
    height:80px;
    border-radius: 5px;
    overflow: hidden;
}
.productInfoBox .img > img  {
    width:100%;
    height:100%;
}
.productInfoBox .txt  {
    width: calc(100% - 110px);
}
.productInfoBox .txt .txt1  {
    font-size: 14px;
    color:rgba(0, 0, 0, 0.7);
}
.gameGiftInbox .txt .txt2  {
    font-size: 16px;
    color:#000;
    font-weight: 500;
}
/*적립내역*/
.stampCollectListWrap   {

}
.stampcollectTop   {
    margin:16px;
    display:flex;
    align-items: center;
    justify-content: space-between;
}
.stampcollectTop .txt1   {
    font-size:16px;
    font-weight: 600;
    background: url(../../images/bnft/ico_stamp_card.svg) no-repeat 0 3px;
    background-size: 23px;
    padding-left: 30px;
}
.stampcollectTop .txt2   {
    font-size: 14px;
}
.stampCollectList   {
    background-color: #fff;
    border-top:1px solid #DEE2E6;
}
.stampCollectList li   {
    padding:16px;
    border-bottom:1px solid #DEE2E6;
}
.stampCollectList .txtTop   {
    display:flex;
    align-items: center;
    justify-content: space-between;
}
.stampCollectList .txtBm   {
    display:flex;
    align-items: center;
    justify-content: flex-end;
    gap:20px;
    margin-top:8px;
}
.stampCollectList .shopName   {
    font-size: 18px;
    font-weight: 500;
    width: calc(100% - 100px);
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}
.stampCollectList .time   {

}
.stampCollectList .payment   {

}
.stampCollectList .cnt   {
    color:#78B857;
    background: url(../../images/bnft/icon_stamp_cnt.svg) no-repeat left center;
    background-size: 16px;
    padding-left: 20px;
}

/*qr코드이벤트*/
.qrEventWrap    {
    margin:50px 16px;
    text-align: center;
}
.qrEventWrap .txt01    {
    font-size: 24px;
    font-weight: 700;
    margin-bottom:20px;
}
.qrEventWrap .date    {
    font-size: 16px;
    color: #78B857;
    margin-bottom:5px;
}
.qrEventWrap .txt02    {
    font-size: 16px;
    margin-bottom:50px;
}
.qrEventWrap .txt03    {
    padding-top:170px;
    font-size: 18px;
    margin-bottom:50px;
}
.qrEventWrap .txt03 span    {
    display: block;
    color: #78B857;
    font-weight: 600;
}
.qrEventWrap .txt03.ico01    {
    background: url(../../images/bnft/icon_qr01.png) no-repeat center top;
}
.qrEventWrap .txt03.ico02    {
    background: url(../../images/bnft/icon_qr02.png) no-repeat center top;
}
.qrEventWrap .txt03.ico03    {
    background: url(../../images/bnft/icon_qr03.png) no-repeat center top;
}
.qrEventWrap .txt04    {
    font-size: 16px;
    margin-top:20px;
}

/*QR코드이벤트선물확인*/
.microModal__top.bdb_none.bg    {
    background-color: #F4F6F8;
}
.qrEventGiftWrap    {
    text-align: center;
    padding:30px 0;
    background-color: #F4F6F8;
}
.qrEventGiftWrap .tit    {
    font-size: 18px;
    color: #000;
}
.qrCouponBox    {
    position: relative;
    width:320px;
    height:220px;
    text-align: left;
    color:#000;
    border: 1px solid #D9D9D9;
    padding:22px 30px;
    margin:20px auto;
    background-color: #fff;
    overflow: hidden;
}
.qrCouponBox::after {
    display: block;
    position: absolute;
    top: 82px;
    right: -84px;
    width: 220px;
    height: 53px;
    background-color: #77b857;
    color: rgba(255, 255, 255, 0.2);
    font-size: 20px;
    font-family: 'GmarketSans';
    font-weight: 700;
    transform: rotate(270deg);
    content: 'COUPON';
    text-align: center;
    line-height: 2.8;
}
.qrCouponBox .qcNo    {
    font-size: 16px;
}
.qrCouponBox .qcCnt    {
    font-size: 40px;
    font-family: 'GmarketSans';
    font-weight: 700;
    margin:10px 0 0;
}
.qrCouponBox .qcTxt01    {
    font-size:18px;
    margin-bottom:5px;
}
.qrCouponBox .qcTxt02,
.qrCouponBox .qcTxt03    {
    font-size:14px;
    color: rgba(0, 0, 0, 0.7);
}

.qrEventGiftWrap .txt   {
    max-width: 320px;
    margin: 0 auto 20px;
    word-break: keep-all;
}










@media (min-width:380px) {
    .stats-dates .dates-grid div.stats_done::after {
        right: -18px;
        width: 32px;
    }
}

@media (min-width:480px) {
    .stats-dates .dates-grid div.stats_done::after {
        right: -23px;
        width: 42px;
    }
}

@media (min-width:580px) {
    .stats-dates .dates-grid div.stats_done::after {
        right: -28px;
        width: 52px;
    }
}
@media (min-width:680px) {
    .stats-dates .dates-grid div.stats_done::after {
        right: -38px;
        width: 72px;
    }
}

@media (min-width: 720px) {
    .challenge_add {
        right: calc(50% - 330px);
    }
}

.quizDate {
    padding: 10px 15px;
    word-break: keep-all;
    text-align: center;
}

.quizDate p {
    font-size: 14px;
    line-height: 1.4;
    white-space: nowrap;
}

/* 비활성화된 제품 컨테이너 스타일 */
.challengeProduct.product-disabled {
    opacity: 0.6;
    pointer-events: none;
}

.challengeProduct .product-link-disabled {
    display: flex;
    gap: 16px;
    align-items: center;
    padding: 16px 0;
    cursor: not-allowed;
    color: inherit;
    text-decoration: none;
}

/* 비활성화 상태에서도 기존 레이아웃 유지 */
.challengeProduct.product-disabled .thum,
.challengeProduct.product-disabled .cpTit,
.challengeProduct.product-disabled .drugCheck {
    pointer-events: none;
}

.challengeProduct.product-disabled .drugCheck span.disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* 베스트리뷰보기 레이아웃 개선 - 리뷰보러가기 버튼 항상 표시 */
.sub-page {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.bestReviewWrap {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.revieBox {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.reviewSlider {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0; /* flex item이 내용에 따라 축소될 수 있도록 */
}

.reviewSlider ul {
    flex: 1;
    min-height: 0;
}

.reviewSlider li {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.reviewText {
    flex: 1;
    line-height: 1.6;
    padding-right: 10px;
    margin-bottom: 20px;
    word-break: break-word; /* 긴 단어 줄바꿈 처리 */
    -webkit-overflow-scrolling: touch; /* iOS에서 부드러운 스크롤 */
    scroll-behavior: smooth;
}

/* collapsed 상태: 3줄만 표시 */
.reviewText.collapsed {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    max-height: calc(3 * 1.6em); /* 3줄 * line-height */
}

/* expanded 상태: 전체 텍스트 표시 */
.reviewText.expanded {
    display: block;
    max-height: none;
    overflow: visible;
}

/* 더보기/접기 버튼 스타일 - 강화된 버전 */
.reviewText-toggle {
    background: none;
    border: none;
    color: #1971C2;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    padding: 8px 12px;
    margin: 10px 0 5px 0;
    text-decoration: underline;
    position: relative;
    z-index: 10; /* 상위 요소보다 높은 z-index */
    display: inline-block;
    border-radius: 4px;
    /* 터치 영역 확보 */
    min-height: 44px;
    min-width: 80px;
    line-height: 28px;
    text-align: center;
    /* 터치 디바이스 최적화 */
    touch-action: manipulation;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.reviewText-toggle:hover,
.reviewText-toggle:focus {
    color: #0c5d97;
    background-color: rgba(25, 113, 194, 0.1);
    outline: none;
}

.reviewText-toggle:active {
    background-color: rgba(25, 113, 194, 0.2);
    transform: translateY(1px);
}

/* 리뷰 슬라이드 영역 구분을 위한 추가 스타일 */
.reviewSlider li {
    list-style: none;
    width: 100%;
    flex: 0 0 100%;
    cursor: pointer;
    position: relative;
}

/* 더보기 버튼이 있는 영역은 클릭 방지 */
.reviewText-toggle-area {
    position: relative;
    z-index: 10;
    pointer-events: auto;
}

/* 기존 리뷰 텍스트 스타일 수정 */
.reviewText {
    flex: 1;
    line-height: 1.6;
    padding-right: 10px;
    margin-bottom: 10px; /* 버튼과의 간격 조정 */
    word-break: break-word;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
}

/* collapsed 상태: 3줄만 표시 */
.reviewText.collapsed {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    max-height: calc(3 * 1.6em);
}

/* expanded 상태: 전체 텍스트 표시 */
.reviewText.expanded {
    display: block;
    max-height: none;
    overflow: visible;
}

/* 모바일 환경에서 더 나은 스크롤 경험 */
@media (max-height: 667px) {
    .reviewText.expanded {
        max-height: calc(100vh - 400px);
        overflow-y: auto;
    }
}

@media (max-height: 568px) {
    .reviewText.expanded {
        max-height: calc(100vh - 350px);
        overflow-y: auto;
    }
}

/* 교환권 상태 메시지 스타일 추가 */
.exchange-completed {
    color: #28a745;
    font-weight: bold;
    background: #d4edda;
    padding: 4px 8px;
    border-radius: 4px;
    border: 1px solid #c3e6cb;
}

.exchange-ready {
    color: #007bff;
    font-weight: bold;
    background: #d1ecf1;
    padding: 4px 8px;
    border-radius: 4px;
    border: 1px solid #bee5eb;
}