4688 lines
96 KiB
CSS
4688 lines
96 KiB
CSS
@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;
|
|
} |