@charset "utf-8";
@import url(/static/styles/base.css);
/* @import url(/static/styles/font_gmarket.css); */


/* MOBILE BASIC */
.gate-wrapper{position:relative; width: 100%; min-height:100vh; padding:0px 20px 102px; color:var(--font-neutral-6); font-weight:400; background-color: #E7E9F5;}
.gate-wrapper .inner{margin:0 auto; width: 100%;}
.logo{position: absolute; top: 20px; left: 24px; width: 40px;height: 40px;}
.key-visual{position: relative; margin: 0 -20px -56px; padding-top: 62px; z-index: 1;}
.key-visual .visual-lap{position: relative; margin: 0 auto; width: 74.3589%; max-width: 580px;}
.key-visual .obj1{opacity: 0; position: relative; top: 0px; left: -3%; animation: ani 0.5s 0s forwards;}
.key-visual .obj2{position: absolute; top: -42px; right: -8.96%; width: 84px;height: 64px;}
.key-visual .bubble1{opacity: 0; position: absolute; top: 25.66%; left: 3px; width: 24.827%; z-index: 2; animation: ani 0.5s 0.2s forwards;}
.key-visual .bubble2{opacity: 0; position: absolute; top: 0; right: 26.896%; width: 20.689%; z-index: 2; animation: ani 0.5s 0.4s forwards;}
.key-visual .bubble3{opacity: 0; position: absolute; top: 45.025%; right: 3.103%; width: 23.448%; z-index: 2; animation: ani 0.5s 0.6s forwards;}
.key-visual .title{opacity: 0; position: absolute; left: 50%; margin-left: -141px; color:transparent;  bottom: 20%; width: 282px;height: 44px; font-weight: 700;  line-height: 44px; text-align: center; animation: ani 0.5s 0.8s forwards; background: url(/static/images/gate/title.svg) no-repeat center/100%;}
.key-visual + .rbox{margin-top: -12%;}
@keyframes ani {
    0%{opacity: 0; transform: translateY(10px);}
    100%{opacity: 1; transform: translateY(0px);}
}
@media (min-width:600px){
    .key-visual .title{font-size: 55px;}
    .key-visual + .rbox{margin-top: -50px;}
}
.tab-ui-apply {z-index: 2; margin-bottom: 16px;}
.tab-content-wrap .tab-content {display: none}
.tab-content-wrap .tab-content.active {display: block}
.rbox-wrap{margin-top: 20px; }
.rbox-wrap .rbox{margin: 0; border-radius: 4px;}
.rbox-wrap .rbox + .rbox{margin-top: 2px;}
.rbox-wrap .rbox:first-child{border-radius: 28px 28px 4px 4px;}
.rbox-wrap .rbox:last-child{border-radius: 4px 4px 28px 28px;}
.rbox{position: relative; padding: 25px 24px 32px; background-color: var(--white); border-radius: 28px; z-index: 2;}
.rbox + .rbox {margin-top: 20px;}
.rbox.faq {margin-top: 20px;}
.rbox .rbox-head{position: relative; padding: 7px 52px 7px 0; margin-bottom: 21px; font-size: 22px; color: var(--font-point-5); font-weight: 700; border-bottom: 1px solid rgba(26, 58, 109, 0.05);}
.rbox .rbox-head [class*=ico]{position: absolute; right: 0; top: 0; width: 44px; height: 44px; background-position: center; background-repeat: no-repeat; background-size: contain;}
.rbox .rbox-head .ico1{background-image: url(/static/images/gate/ico_money.png);}
.rbox .rbox-head .ico2{background-image: url(/static/images/gate/ico_store.png);}
.rbox .rbox-head .ico3{background-image: url(/static/images/comm/logo/etc-bc-s-1-l.png);}
.rbox .rbox-head .ico4{background-image: url(/static/images/gate/ico_note.png);}
.rbox .rbox-head .ico5{background-image: url(/static/images/gate/ico_bill.png);}
.rbox .rbox-head .ico6{background-image: url(/static/images/gate/ico_box.png);}
.rbox .rbox-body{font-size: 16px; color: var(--font-neutral-6); font-weight: 400; line-height: 24px;}
.rbox .rbox-body p+p{margin-top: 12px;}
.rbox .rbox-body p + .soon {margin-top: 24px;}
.rbox .rbox-body .soon + .soon {margin-top: 20px;}
.rbox .rbox-body .soon {position: relative; padding-left: 42px;}
.rbox .rbox-body .soon .eq {position: absolute;top: 0;left: 0; min-width: 36px; color: var(--white); font-size: 13px;line-height: 20px;font-weight: 700;background-color:#6168C0; padding:2px 8px; border-radius: 100px;}
.rbox .rbox-body .soon > strong {display: block; margin-bottom: 8px;}
.rbox .rbox-body .soon p.d {margin-top: 10px;}
.rbox .rbox-body .soon p.d + .d {margin-top: 4px;}
.rbox .rbox-body .day-of-week {margin-top: 24px;padding-top: 24px;border-top: 1px solid var(--line);}
.rbox .rbox-body .day-of-week .tit {margin-bottom: 20px; text-align: center; color: var(--font-neutral-5); font-size: 19px; line-height: 28px; font-weight: 700;}
.rbox .rbox-body .day-of-week .tab-week {margin: 32px 0 12px;}
.rbox .rbox-body .day-of-week .list--dot {margin: 20px 0 0;}
.rbox .rbox-body .day-of-week .list--dot li {font-size: 16px;line-height: 24px;}
.rbox .rbox-body .day-of-week .list--dot li + li {margin-top: 8px;}

.rbox .inf-tab-where {margin-top: 12px;border-top: 1px solid var(--gray-300 ); border-bottom: 1px solid var(--gray-300 );}
.rbox .inf-tab-where th,
.rbox .inf-tab-where td {text-align: center;}
.rbox .inf-tab-where th {padding:10px 10px; font-size: 15px;line-height: 22px;color: var(--font-neutral-2); border-bottom: 1px solid var(--line);}
.rbox .inf-tab-where td {padding:12px 10px; font-size: 15px;line-height: 22px;color: var(--font-neutral-4); font-weight: 700;}
.rbox .inf-tab-where tbody th {padding:12px 10px; font-size: 15px;line-height: 22px;color: var(--font-neutral-4); font-weight: 700;border-bottom: 0 none;}
.rbox .line-btn{margin: 30px auto 0; padding: 11px 16px; display: block; height: 48px; border: var(--button-outline-border); border-radius: 12px; font-size: 17px; color: var(--button-outline-tc); font-weight: 700; cursor: pointer;}
.rbox .line-btn:active{background:var(--button-outline-active)}
.rbox .line-btn[disabled] {color:var(--button-outline-disabled-tc); border-color:var(--button-outline-disabled-border); pointer-events:none;}
.rbox.my-coupon .line-btn {margin-top: 20px;}
.rbox.is .rbox-body .tab-is {margin-left: -42px;margin-bottom: 20px;width: calc(100% + 42px);}
.rbox.is .rbox-body .tab-is th {padding: 10px 4px;}

.alert-cont {position: relative; padding:32px 24px; background: #fff; border-radius: 28px;}
.alert-cont .alert {display: flex; align-items: center;}
.alert-cont .text {flex:1; margin-right: 3px; word-break: keep-all;}
.alert-cont .tit {font-size: 22px; font-weight: 700; line-height: 30px; color: var(--font-point-5);}
.alert-cont .desc {margin-top: 2px;font-size: 16px;line-height: 24px;color: var(--font-neutral-6);}
.alert-cont .alert__switch {flex-shrink: 0; pointer-events: none;}
.tooltip-trigger {width: 20px; height: 20px; vertical-align: -3px; overflow: hidden; text-indent: -999px; -webkit-mask: var(--info); mask: var(--info); background-color: var(--gray-300);}
.tooltip-content .list--dot li {color: var(--gray-40); line-height: 22px;}
.tooltip-content .list--dot li::before {background-color: var(--gray-60);}
.tooltip-content .list--dot li + li {margin-top: 8px;}

.rbox.up {margin-bottom: 2px; border-radius: 28px 28px 4px 4px;;}
.rbox.foot {margin-top: 2px; border-radius: 4px 4px 28px 28px;}
.rbox.able-store .tit {margin-bottom: 20px;font-size: 20px;font-weight: 700;line-height: 28px;color: var(--font-neutral-2);}
.rbox.able-store .lists {position: relative;top: 2px; display: grid; justify-content:start; grid-template-columns:1.56fr 1fr;}
.rbox.able-store .item {display: flex; align-items: center; padding-bottom: 16px;}
.rbox.able-store .item:nth-child(n+3) {padding-top: 15px; border-top:1px solid var(--line)}
.rbox.able-store .item:nth-last-of-type(odd) {padding-right:12px;}
.rbox.able-store .item .txt {line-height: 24px;font-size: 16px;color: var(--font-neutral-4); white-space: nowrap;}
.rbox.able-store .item::before {position: relative; top: -2px; content: ''; width: 28px;height: 28px; margin-right: 8px; flex-shrink: 0;}
.rbox.able-store .item.mart::before {background: url(/static/images/comm/img-3d-shoppingpaper.png) no-repeat center/100%;}
.rbox.able-store .item.cloth::before {background: url(/static/images/comm/img-3d-cloth.png) no-repeat center/100%;}
.rbox.able-store .item.hair::before {background: url(/static/images/comm/img-3d-hair.png) no-repeat center/100%;}
.rbox.able-store .item.glass::before {background: url(/static/images/comm/img-3d-glasses.png) no-repeat center/100%;}
.rbox.able-store .item.academy::before {background: url(/static/images/comm/img-3d-kindergarden.png) no-repeat center/100%;}
.rbox.able-store .item.med::before {background: url(/static/images/comm/img-3d-insurance.png) no-repeat center/100%;}
.rbox.able-store .item.fran::before {background: url(/static/images/comm/img-3d-gs25.png) no-repeat center/100%;}
.rbox.able-store .item.fran {grid-column:1 / span 2; align-items:flex-start; padding-right:0}
.rbox.able-store .item.fran .txt {white-space: normal;}

.rbox.able-store .lists.disable {grid-template-columns:1fr}
.rbox.able-store .item.disable {border-top:none; align-items: flex-start; padding-bottom:10px;}
.rbox.able-store .item.disable:nth-last-of-type(n+3) {padding-top: 0;}
.rbox.able-store .item.disable:nth-last-of-type(odd) {padding-right:0;}
.rbox.able-store .item.disable::before {margin-right: 10px; background: url(/static/images/comm/img-3d-x.png) no-repeat center/100%;}
.rbox.able-store .item.disable:nth-child(n+3) {padding-top: 0;}
.rbox.able-store .item.disable .txt {white-space: normal;}
.rbox.able-store .desc {position: relative;padding-left: 20px; font-size: 14px;line-height: 20px;color: var(--font-neutral-7);}
.rbox.able-store .desc::before {position: absolute;top: 8px;left: 10px;content: ''; width: 2px;height: 2px;border-radius: 10px; background-color: var(--font-neutral-7);}
.rbox.able-store .tit + .lists ~ .tit {margin-top: 32px;padding-top: 20px;border-top: 1px solid var(--line);}
.rbox.able-store .item .txt em {display: block; font-size: 14px;line-height: 20px;color: var(--font-neutral-7);}


@media (max-width:350px){
    .rbox.able-store .item {align-items: flex-start;}
    .rbox.able-store .item .txt {font-size: 15px; white-space: normal;}
}

.rbox.faq .rbox-head {margin-bottom: 12px;}
.rbox .card-tit{margin-bottom: 20px; font-size: 19px; color: var(--font-neutral-5); font-weight: 700; line-height: 28px; text-align: center;}
.rbox .card-list{margin:0 -4px; display: grid; row-gap:17px; column-gap:7px; grid-template-columns: repeat(auto-fit, minmax(72px, 1fr));}
.rbox .card-list .card-item{min-width: 72px; text-align: center;}
.rbox .card-list .card-item .ico{display: inline-block; margin: 8px 0 6px; width: 36px; height: 36px; background-position: center; background-repeat: no-repeat; background-size: contain;}
.rbox .card-list .card-item .ico.shift {width: 42px;height: 44px; margin:4px 0 2px;}
.rbox .card-list .card-item .ico img {vertical-align: top;}
.rbox .card-list .card-item .name{display: block; font-size: 12px; color: var(--font-neutral-4); font-weight: 400; line-height: 20px;}
.rbox .toggle-cont{margin-bottom: -16px;}
.rbox .toggle-item{padding:11px 0; border-bottom: 1px solid rgba(26, 58, 109, 0.05);}
.rbox .toggle-item:last-child{border-bottom: none;}
.rbox .toggle-item-head{position: relative; padding:4px 28px 4px 0; font-size: 17px; color: var(--font-neutral-6); font-weight: 700; line-height: 26px;}
.rbox .toggle-item-head::after{content:''; position: absolute; right: 2px; top: 10px; display: block; width: 16px; height: 16px; -webkit-mask:var(--arrow-right-normal); mask:var(--arrow-down-normal); background-color:var(--gray-900); opacity: 0.25; }
.rbox .contact-call {margin-top: 17px;padding-top: 12px;border-top: 1px solid var(--line);}
.rbox .contact-call .inf {font-size: 15px;line-height: 22px;color: var(--font-point-4);}
.rbox .contact-call .inf + .inf {margin-top: 4px;}
.rbox .toggle-item-body{display: none; padding-top: 6px; font-size: 16px; color: var(--font-neutral-4); font-weight: 400; line-height: 24px;}
.rbox .toggle-item.on .toggle-item-head{color: var(--font-neutral-4);}
.rbox .toggle-item.on .toggle-item-body{display: block;}
.rbox .toggle-item.on .toggle-item-head::after{transform: rotate(180deg); opacity: 1;}
.rbox .other-pays {margin:18px -4px 0; padding: 24px 20px; border-radius: 20px; background-color:var(--background-color-2);}
.rbox .other-pays .head {display: flex; align-items: center;}
.rbox .other-pays .tit {font-weight: 700;font-size: 16px;line-height: 24px;color: var(--font-neutral-4);}
.rbox .other-pays a {margin-left: auto; color: var(--font-neutral-7); font-size: 14px;line-height: 20px;text-decoration: underline; text-underline-offset: 5px;}
.rbox .other-pays .txt {margin-top: 8px;color: var(--font-neutral-6); font-size: 14px;line-height: 20px;}
.rbox .other-pays .item + .item {margin-top: 14px; border-top: 1px solid var(--line); padding-top: 22px;}

.rbox.my-coupon {margin-top: 20px;}

.promo-wrap .promo-bnr {margin-top: 20px; display: flex; justify-content: space-between; align-items: center; width: 100%; padding: 20px 24px; border-radius: 28px; background-color: rgba(127, 95, 255, 0.20); cursor: pointer;}
.promo-wrap .promo-bnr .tit {flex: 1;text-align: left;}
.promo-wrap .promo-bnr .tit span {display: block;color: var(--font-neutral-4);font-size: 15px;line-height: 22px;}
.promo-wrap .promo-bnr .tit strong {display: block;color: var(--font-neutral-2);font-size: 19px;line-height: 28px;}
.promo-wrap .promo-bnr::after {flex-shrink: 0; display: block; width: 80px; height: 80px; margin-left: 6px; border-radius: 50%; background: var(--background-color-1) url(/static/images/comm/img-coffee.png) center/66px no-repeat; content: '';}

.rbox.promo-cont {overflow: hidden; padding:0 24px; transition:max-height .8s ease-out; max-height: 0; margin-top:0;}
.rbox.promo-cont.expand {max-height: 640px; padding:25px 24px 32px; margin-top: 20px;}
.rbox .promo-info {display: flex; padding: 12px 0; align-items: center;}
.rbox .promo-info::before {content: '';flex-shrink: 0; width: 72px; height: 72px; margin-right: 20px; background: url(/static/images/comm/img-coffee.png) center / 72px no-repeat;}
.rbox .promo-info .txt {flex: 1; word-break: keep-all;}
.rbox .promo-info .txt .sub {display: block; margin-bottom: 2px; color: var(--font-neutral-6);}
.rbox .promo-info .txt strong {display: block; color: var(--font-neutral-3);}
.rbox .promo-info .txt .p-txt {color: var(--font-point-2);}
.rbox.promo-cont .step {padding: 20px 0 2px;}
.rbox.promo-cont .step > li {position: relative; padding: 0 0 34px 38px;}
.rbox.promo-cont .step > li::before {content: ''; position: absolute; top: 28px;left: 10px;height: calc(100% - 28px);border: 1px dashed rgba(204, 213, 235, 0.40);}
.rbox.promo-cont .step > li:last-child {padding-bottom: 0;}
.rbox.promo-cont .step > li:last-child::before {display: none;}
.rbox.promo-cont .step .num {position: absolute;top: 3px;left: 0;width: 22px;border-radius: 50%;background: linear-gradient(0deg, rgba(0, 0, 0, 0.10) 0%, rgba(0, 0, 0, 0.10) 100%), rgba(204, 213, 235, 0.40);text-align: center;font-size: 14px;line-height: 22px;color: var(--white);font-weight: 700;}
.rbox.promo-cont .step .tit {font-weight: 700; font-size: 18px; line-height: 26px; color: var(--font-neutral-3);}
.rbox.promo-cont .step .txt {color: var(--font-neutral-5);}
.rbox.promo-cont .step .tit + .txt {margin-top: 4px;}
.rbox.promo-cont .step .btn {padding-top: 10px;text-align: right;}
.rbox.promo-cont .step .btn-view {display: inline-block;padding-bottom: 1px;border-bottom: 1px solid var(--button-underline-color); color: var(--font-neutral-7);cursor: pointer;}

.notice-cont{margin-top: 32px; padding:0 4px;}
.notice-cont .tit{margin-bottom: 10px; font-size: 17px; color: var(--font-neutral-4); font-weight: 700; line-height: 26px;}
.notice-cont .txt{font-size: 16px; color: var(--font-neutral-6); font-weight: 400; line-height: 24px;}
.notice-cont .txt > li{position: relative; margin-top: 8px; padding-left: 12px;}
.notice-cont .txt > li::before{content: ''; position: absolute; left: 0; top: 10px; display: block; width: 3px; height: 3px; border-radius: 50%; background-color: var(--font-neutral-6);}
.notice-cont .txt > li.compliance {text-align:right;}
.notice-cont .txt > li.compliance::before {display: none;}
.notice-cont .txt .link {color: var(--font-neutral-6); text-decoration: underline; text-underline-offset: 3px;}
.notice-cont + .notice-cont {margin-top: 40px;padding-top: 40px;border-top: 1px solid var(--line); }

.bottom-fixed-wrap {position:fixed; left:0; bottom:0; z-index:50; width:100%; display: flex; padding:0 20px 14px; background-color:#E7E9F5; box-sizing:border-box;}
.bottom-fixed-wrap::before {display:block; content:''; position:absolute; left:0; top:-12px; width:100%; height:12px; background: linear-gradient(0deg, #E7E9F5 0%, rgba(231, 233, 245, 0.00) 100%);}
.bottom-fixed-wrap button + button{margin-left: 8px;}
.bottom-fixed-wrap .btn-fill {width:100%; height:var(--button-height); color:var(--button-primary-tc); font-size:var(--button-font-size); font-weight:700; text-align:center; line-height:var(--button-height); background-color:var(--button-primary); border-radius:var(--button-radius);}
.bottom-fixed-wrap .btn-fill:active{background:var(--button-primary-active)}
.bottom-fixed-wrap .btn-fill[disabled] {color:var(--button-primary-disabled-tc); background-color:var(--button-primary-disabled); pointer-events:none;}
.bottom-fixed-wrap .btn-line {display: block; width: 100%; height: var(--button-height); color: var(--button-outline-tc); background-color: var(--button-outline); font-size: var(--button-font-size); font-weight: 700; text-align: center; border-radius: var(--button-radius);}
.bottom-fixed-wrap .btn-line:active{background:var(--button-outline-active)}
.bottom-fixed-wrap .btn-line[disabled] {color:var(--button-outline-disabled-tc); pointer-events:none;}

.lpop--wrap2 .week-pop-con{padding: 0 24px 24px; font-size: 16px; color: var(--font-neutral-6); font-weight: 400; line-height: 24px;}
.lpop--wrap2 .week-pop-con .today-check {margin-bottom: 12px;font-size: 18px;line-height: 26px;font-weight: 700; color: var(--font-neutral-2); border-radius: 20px; padding:16px 20px; text-align: center; background-color: var(--background-color-2);}
.lpop--wrap2 .week-pop-con p + p{margin-top: 12px;}
.lpop--wrap2 .week-pop-con .fc1{color: var(--font-point-1);}
.lpop--wrap2 .week-pop-con .week-table{margin-top: 24px; width: 100%; font-size: 16px; font-weight: 700; color: var(--font-neutral-4); border-top: 1px solid #969DAB; border-bottom: 1px solid #969DAB;}
.lpop--wrap2 .week-pop-con .week-table thead th{height: 44px;}
.lpop--wrap2 .week-pop-con .week-table tbody td{height: 44px; border-top: 1px solid rgba(0, 0, 0, .05); text-align: center;}
.lpop--wrap2 .not-bc {padding: 0 20px 24px;}
.lpop--wrap2 .not-bc .card-alert {text-align: center; padding:16px 20px; background-color: var(--background-color-2); border-radius: 20px;}
.lpop--wrap2 .not-bc .card-alert p {font-size: 16px;line-height: 24px;color: var(--font-neutral-6);}
.lpop--wrap2 .not-bc .card-alert .bc-logo {}
.lpop--wrap2 .not-bc .card-alert .bc-logo::before {content: ''; display: inline-block; vertical-align: -3px; width: 20px;height: 20px;margin-right: 4px; background:url(/static/images/comm/logo/etc-bc-s-1-l.png) no-repeat center/100%;}
.lpop--wrap2 .not-bc .txt {margin: 12px 4px 0;color: var(--font-neutral-5); font-size: 16px;line-height: 24px;}
.lpop--wrap2 .not-bc .btn-submit {margin-top: 24px;}
.lpop--wrap2 .not-bc .go-notBC {margin-top: 20px; text-align: center;}
.lpop--wrap2 .not-bc .go-notBC a {font-size: 16px;line-height: 24px;color: var(--font-neutral-7); text-decoration: underline; text-underline-offset: 7px;}



@media (min-width:769px){
    .gate-wrapper .inner{position: relative; max-width: 680px;}
    .logo {left: 0; top: 50px; max-width: 120px;}
    .key-visual{position: relative; margin: 0 0 -72px; padding-top: 96px; z-index: 1;}
    .key-visual .visual-lap{position: relative; margin: 0 auto; width: 100%; max-width: 100%; height: 315px;}
    .key-visual .pc-obj1{display: block; position: relative; left: 40px;}
    .key-visual .obj1{position: absolute; top: -12px; left: 40px; width: 260px;}
    .key-visual .obj2{position: absolute; top: -47px; right: 0; max-width: 120px;}
    .key-visual .bubble1{position: absolute; top: 70px; left: 50px; width: 66px; z-index: 2;}
    .key-visual .bubble2{position: absolute; top: -12px; right: auto; left:184px; width: 54px; z-index: 2;}
    .key-visual .bubble3{position: absolute; top: 132px; right: auto; left:239px; width: 61px; z-index: 2;}
    .key-visual .title{position: absolute; left: auto; right: 71px; bottom: auto; top: 70px; text-align: right; width: 329px;height: 50px;}
    .key-visual + .rbox{margin-top: -70px;}
    .tab-ui-apply {padding-top: 7px; margin-left: 40px; margin-right: 40px;}
    .rbox-wrap {padding: 0 20px;}
    .rbox.able-store {padding-bottom: 24px;}
    .rbox.able-store .lists {grid-template-columns:1.25fr 1fr;}
    .rbox .card-list {column-gap:3px;}
    .rbox .contact-call .inf br {display: none;}
    .notice-cont{padding: 0 24px; margin-top: 36px;}
    .rbox {margin-left: 20px;margin-right: 20px;}
    .bottom-fixed-wrap {left: 50%; max-width: 680px; transform: translateX(-50%);}
    .promo-wrap .promo-bnr {margin-left: 20px;margin-right: 20px;width: calc(100% - 40px)}
}