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

body,html{ background-color: var(--background-color-2);}

.apply-wrapper {position:relative; min-height:100vh; padding:0 20px 80px; color:var(--font-neutral-5);  font-weight:400; background-color: var(--background-color-2);}

.apply-contents {padding:10px 0 30px 0;}
.apply-contents.padding-foot {}
.apply-contents .inc-info-top {margin:0 4px 28px; text-align: center; display: flex; align-items: center; flex-direction: row-reverse; justify-content:space-between}
.apply-contents .inc-info-top .img {width: 52.5px; height: 40px; background: url(/static/images/my/title_1.svg) no-repeat center/100%;}
.apply-contents .p-title {min-height: 32px;}
.apply-contents .p-title::before {content:'1차 민생회복 소비쿠폰'; color:var(--font-neutral-2); font-size:24px; font-weight:700; line-height:32px;}
.apply-contents .comp-sel-wrap {display:none; margin-top: 10px;}
.apply-contents .confirm-verify-num {display:none; margin-top: 4px; position: relative;}
.apply-contents .itxt01 {padding-right:112px;}
.apply-contents .confirm-time {position:absolute; right:16px; top:50%; color:#607D8B; font-size:14px; font-weight:400; text-align:right; line-height:20px; transform:translateY(-50%)}

.apply-contents .btn-confirm-wrap {margin-top: 4px;}
.apply-contents .confirm-verify-agin {display:none; margin-top: 10px; margin-bottom: 24px; text-align: right;}
.apply-contents .confirm-verify-agin button {font-size: 16px;line-height: 24px;color: var(--font-neutral-7); text-decoration: underline; text-underline-offset: 4px;}
.apply-contents .btn-confirm {display:inline-flex; align-items:center; justify-content:center; width:100%; height:var(--button-height); border:var(--button-outline-border); color:var(--button-outline-tc); font-size:var(--button-font-size); font-weight:700; text-align:center; background-color:#fff; border-radius:var(--button-radius);}
.apply-contents .btn-confirm:active{background:var(--button-outline-active)}
.apply-contents .btn-confirm:disabled {border-color:#ddd; color:rgba(0,0,0,0.3);}
.apply-contents .agree-check-terms-foot {border-top:1px solid var(--line); margin:24px 0 0; padding:30px 4px 0 14px;}
.apply-contents .agree-check-terms {padding:14px 0; display: flex; align-items: center;}
.apply-contents .agree-check-terms .btn-terms-view {margin-left: auto; opacity: .4;;}
.apply-contents .agree-check-terms label {font-size: 15px;line-height: 22px;color: var(--font-neutral-2);}
.apply-contents .itxt-desc02 {color:var(--font-neutral-1); font-size:15px;}
.agree-check-terms-foot .agree-check-terms {padding:12px 0;}
.agree-check-terms-foot .agree-check-terms label {font-weight: 700; font-size: 16px; line-height: 24px;}

.TAB_top {position: relative;}
.btn-store-pop {position: absolute;right: 0;top: 4px;display: flex; font-size: 14px; font-weight: 700; line-height: 20px; color: var(--font-neutral-5); padding: 7px 13px; border: 1px solid rgba(219, 226, 240, 0.40); border-radius: 100px; background-color: rgba(255, 255, 255, 0.30); z-index: 2;}
.btn-store-pop::before {content: ''; margin-right: 4px; width: 18px;height: 18px;background: url(/static/images/comm/img-3d-search-light.png) no-repeat center/100%;}

.tab-content-wrap .tab-content {display: none}
.tab-content-wrap .tab-content.active {display: block}
.auth-content-wrap {margin-top: 28px;}
.auth-content-wrap .auth-content {display: none}
.auth-content-wrap .auth-content.active {display: block}

.form-kko-wrap {}
.kko-waiting {padding:0 0 20px;} 
.kko-waiting .tit {font-size: 20px; margin:0 4px; line-height: 28px;font-weight: 700;color: var(--font-neutral-2);} 
.kko-waiting .desc {margin: 12px 4px 0; font-size: 14px;line-height: 20px;color: var(--font-neutral-4);} 
.kko-waiting .img-guide {position: relative; margin: 32px 4px 0; padding:24px 20px 0; text-align: center; background-color: var(--gray-60); border-radius: 24px;}
.kko-waiting .img-guide .img {width:216px; height: 230px; display: inline-block; vertical-align: top;}
.kko-waiting .img-guide .txt {position: absolute; left: 0;right: 0;bottom: 0;padding:26px 0; font-size: 14px;line-height: 20px;color: var(--font-neutral-1); border-radius: 0px 0px 20px 20px;
    background: linear-gradient(180deg, rgba(230, 232, 239, 0.00) 0%, #E6E8EF 100%);} 

.your-card {}
.your-card .tit {display: flex; align-items: center; margin:0 4px;}
.your-card .tit .txt {font-size: 20px;line-height: 28px;font-weight: 700;color: var(--font-neutral-2);}
.your-card .tit .re-select {margin-left: auto; font-size: 14px; line-height: 20px; color: var(--font-neutral-7); text-decoration: underline; text-underline-offset: 7px;}
.your-card .selected-card {margin-top: 10px; padding: 10px 18px; border-radius: 14px; display: flex; align-items: center; background-color: var(--background-color-1);}
.your-card .selected-card .logo {width: 36px; height: 36px; margin-right: 10px;}
.your-card .selected-card .logo img {display: block;}
.your-card .selected-card .logo.size-big img {width: 42px; margin-left: -3px; margin-top: -3px; max-width: none;}
.your-card .selected-card .txt {font-size: 17px;line-height: 26px;font-weight: 700;color: var(--font-neutral-4);}

.your-card ~ [class^="TAB_"] {border-top:1px solid var(--line); margin-top:28px; padding-top:28px;}

.itxt-ename-wrap {}
.itxt-ename-wrap .itxt-inwrap {display:table; table-layout:fixed; width:100%;}
.itxt-ename-wrap .itxt-cell {display:table-cell; width:55%; padding-left:3px; vertical-align:top}
.itxt-ename-wrap .itxt-cell:first-child {width:45%; padding:0 3px 0 0;}
.itxt-ename-wrap .itxt-cell .input-parent {display:block;}
.itxt-ename-wrap .itxt-desc01 {margin-top:10px; color:var(--font-point-3); font-size:14px; font-weight:400; line-height:20px; margin:10px 4px 0}

.itxt-jumin-wrap {margin-top: 10px;}
.itxt-jumin-wrap .itxt-inwrap {display:table; table-layout:fixed; width:auto; min-width:100%; max-width:none;}
.itxt-jumin-wrap .itxt-cell {display:table-cell; width:50%;}
.itxt-jumin-wrap .itxt-cell:first-child {width:calc(50% - 18px);}
.itxt-jumin-wrap .itxt-cell .input-parent {display:block;}
.itxt-jumin-wrap .dash-wrap {display:table-cell; width:18px; text-align:center; vertical-align:middle;}
.itxt-jumin-wrap .dash-wrap .dash {display:inline-block; width:8px; height:2px; vertical-align:middle; background-color:#c2c2c2;}

.tel-comp-wrap{display:flex; margin-top: 10px;}
.tel-comp-wrap .btn-comp-wrap { flex:1 1 0; }
.tel-comp-wrap .btn-comp-wrap:not(:first-child){margin-left:4px}
.tel-comp-wrap .btn-comp {display:block; width:100%; height:52px; border:1px solid var(--input-border); outline:none; color:var(--font-neutral-1); font-size:15px; font-weight:400; text-align:center; line-height:50px; background-color:#fff;box-sizing:border-box; border-radius:var(--input-radius);}
.tel-comp-wrap .btn-comp.on {border-color:var(--input-focus-border); border-width:2px; font-weight:700; line-height:48px;}

.btn-terms-cont {margin:20px 4px 0; color:var(--font-neutral-5); font-size:14px; font-weight:400; line-height:1.4;}
.btn-terms-cont .terms-cont-tit {margin-bottom:18px; font-size: 13px; color: var(--font-neutral-2); line-height: normal;}
.btn-terms-cont .btn-row {margin-top:5px; font-size:14px; line-height: 20px;}
.btn-terms-cont .btn-terms {display:inline-block; color:var(--font-neutral-7); padding-bottom:4px; text-decoration: underline; text-underline-offset: 6px;}
.btn-terms-cont .btn-terms + .btn-terms {margin-left:14px;}
.form-cvc-pw {display: flex; justify-content: space-between; align-items: center;}
.form-cvc-pw .side {flex:1;}
.form-cvc-pw .side + .side {margin-left: 20px;}
.form-cvc-pw .form-tit {white-space: nowrap;}
.form-item .cvc-input {}
.form-item .card-pw-input {width: 80px; text-align: center;}
.tooltip-trigger {width: 18px; height: 18px; vertical-align: -2px; overflow: hidden; text-indent: -999px; -webkit-mask: var(--info); mask: var(--info); background-color: var(--gray-300);}

.wcardcvc_cnt {padding:140px 24px 50px; background:url(/static/images/my/cardcvc.png) no-repeat;background-size:200px 120px;background-position:top center;text-align:center;} 
.wcardcvc_cnt .btxt {font-size:17px;font-weight:700;color:var(--font-neutral-1);line-height:26px;} 
.wcardcvc_cnt .stxt {margin-top:12px;font-size:14px; color:var(--font-neutral-5);line-height:22px;} 

.itxt-inwrap {display: flex; align-items: center;}
.itxt-inwrap .id-birth {width: 45%;}
.itxt-inwrap .id-gender {width: 48px; flex-shrink: 0; text-align: center;}
.itxt-inwrap .id-personal {width: 48%;}
.itxt-inwrap .card-month,
.itxt-inwrap .card-year {width: 80px;}
.itxt-inwrap .card-unit {margin:0 32px 0 8px; font-size: 17px;line-height: 26px;color: var(--font-neutral-4);}
.itxt-inwrap .dash {width: 8px; height: 2px; flex-shrink: 0; margin:0 4px; background-color: #C2C2C2;}
.itxt-inwrap .masking {color:#212121; letter-spacing: 5px; font-weight: 700; margin-left: 4px;}
.itxt-inwrap .mno {width: 150px; flex-shrink: 0; margin-right: 6px; white-space: nowrap;}
.itxt-inwrap .phone-number {flex: 1;}
.btn-terms-view {width: 16px;height: 16px; -webkit-mask:var(--arrow-right-normal); mask:var(--arrow-right-normal); background-color: var(--gray-500);}

.desc1 {margin:10px 4px; font-size: 14px; line-height: 20px; color: var(--font-neutral-7);}
.desc1 strong {color: var(--font-point-2);}
.form-item + .form-item{margin-top: 24px;}
.form-item .form-tit {margin-bottom: 8px; margin-left: 4px;font-size: 15px;line-height: 22px;font-weight: 700;color: var(--font-neutral-4);}
.form-item .form-selc{margin:0 -4px;}
.auth-tit {margin: 0 4px; font-size: 20px;line-height: 28px;font-weight: 700;color: var(--font-neutral-2);}
.mark-lpop-wrap {display:inline-block; margin-left: 2px; margin-top: -2px; vertical-align:middle; line-height: 0; vertical-align: middle;}
.mark-open {position: relative; display:inline-block; width:16px; height:16px; font-size:1px; line-height:1px; text-indent:-9999px; vertical-align:top; -webkit-mask:var(--info); mask:var(--info); background-color: var(--gray-300);}
.mark-inner {display:none; position:absolute; left:-4px; right:-4px; margin-top: 14px; padding:var(--tooltip-pd); border-radius: var(--tooltip-radius); background-color: var(--tooltip-box-bg); box-sizing:border-box; z-index: 51; backdrop-filter: blur(6px);}
.mark-cont {color:var(--tooltip-tc); font-size:15px; font-weight: 400; line-height:22px;}
.mark-close {display:block; overflow:hidden; position:absolute; right:12px; top:16px; width:32px; height:32px; text-indent:-9999px; background:url(/static/assets/images/benefit/untact_card/mark_x_72x72.png) 0 0 / cover no-repeat;}
.gsb-tip{padding:0 4px 0 2px; margin-bottom: 32px; font-size:14px; color:var(--font-neutral-7); font-weight: 400; line-height:normal;}

.go-my-history {position: absolute; top: -10px; transform: translateY(-100%); left: 0;right: 0; color: var(--white); display: flex; align-items: center; padding: 20px 24px; background-color: var(--button-primary); border-radius: 24px;}
.go-my-history::before {content:''; margin-right: 16px; width: 52px;height: 52px; background: url(/static/images/comm/img-3d-bill.png) no-repeat center/100%;}
.go-my-history::after {content:''; margin-left: auto; width: 16px;height: 16px; -webkit-mask:var(--arrow-right-normal); mask:var(--arrow-right-normal); background-color: var(--white);}
.go-my-history .txt {color: var(--white);}
.go-my-history .txt1 {display:block; font-size: 15px;line-height: 22px;}
.go-my-history .txt2 {display:block; font-size: 17px;font-weight: 700;line-height: 26px;}

.apply-app-type {}
.apply-app-type .your-card .selected-card {display: flex; padding: 10px 0; align-items: center; background-color: transparent;}
.apply-app-type .your-card .selected-card .re-select {margin-left: auto; font-size: 14px; line-height: 20px; color: var(--font-neutral-7); text-decoration: underline; text-underline-offset: 7px;}

.app-apply-btns {display: flex; flex-wrap: wrap; margin-top: 28px;padding-top: 28px;border-top: 1px solid var(--line);}
.app-apply-btns [class^="btn-"] {width: calc(50% - 6px);}
.app-apply-btns button {display: flex; width: 100%; align-items: center; text-align: left; padding: 24px 20px 24px 24px; font-size: 16px;font-weight: 700;line-height: 24px; color: var(--font-neutral-1); background-color: var(--background-color-1); border-radius: 20px;}
.app-apply-btns button span {margin-right: 16px; flex:1;}
.app-apply-btns button::after {content:''; margin-left: auto; flex-shrink: 0; width: 16px;height: 16px; -webkit-mask:var(--arrow-right-normal); mask:var(--arrow-right-normal); background-color: var(--gray-500);}
.app-apply-btns .btn-first {width: 100%; margin-bottom: 12px;}
.app-apply-btns .btn-first button {position: relative; font-size: 20px;line-height: 28px; height: 160px; background-color: rgba(196, 228, 243, 1); overflow: hidden;}
.app-apply-btns .btn-first button span {position: absolute;left: 24px;top: 24px;}
.app-apply-btns .btn-first button::before {position: absolute;content: ''; width: 164px;height: 189px; top: -3px;right: 11px;background: url(/static/images/my/bg_apply_btn.png) no-repeat center/100%;}
.app-apply-btns .btn-first button::after {position: absolute;left: 24px;bottom: 20px; width: 32px;height: 32px;background: url(/static/images/comm/ico-apply.svg) no-repeat center/100%; -webkit-mask: unset; mask:unset;}
.app-apply-btns .btn-view {margin-left: 12px;}

#terms-apply-pop .lpop-cont {padding:0 20px 26px;}
#terms-apply-pop .terms-list {border-top: 1px solid var(--line); padding-top: 10px;}
#terms-apply-pop .terms-list li {padding:10px 0;}
#terms-apply-pop .terms-list li button {display: flex; width: 100%; padding-left: 4px; align-items: center; font-size: 16px;line-height: 24px;color: var(--font-neutral-4);}
#terms-apply-pop .terms-list li button::after {content:''; margin-left: auto; opacity: .4; margin-left: auto; flex-shrink: 0; width: 16px;height: 16px; -webkit-mask:var(--arrow-right-normal); mask:var(--arrow-right-normal); background-color: var(--gray-500);}

.coffee-bnr {height: 40px;display: flex; align-items: center; margin:0 -20px 0; padding:0 20px; background-color: rgba(65, 86, 208, 0.1);}
.coffee-bnr::before {content:''; flex-shrink: 0; width: 24px;height: 24px; background: url(/static/images/comm/icon-bnn-coffee.png) no-repeat center/100%;}
.coffee-bnr::after {content:''; flex-shrink: 0; width: 12px;height: 12px; -webkit-mask:var(--arrow-right-normal); mask:var(--arrow-right-normal); background-color: var(--gray-500);}
.coffee-bnr p {color: var(--font-neutral-2); margin:0 8px; flex:1; font-size: 14px;font-weight: 700;line-height: 20px;}
.coffee-bnr p strong {color: var(--font-point-2);}

.coffee-bnr:not([style*="none"]) ~ .TAB_top {margin-top: 12px;}

.promo-cont {padding: 0 24px 40px;}
.promo-cont .promo-info {display: flex; padding: 12px 20px; align-items: center; background-color: #F3F5F8; border-radius: 20px;}
.promo-cont .promo-info::after {content: '';flex-shrink: 0; width: 72px; height: 72px; margin-right: 20px; background: url(/static/images/comm/img-coffee.png) center / 72px no-repeat;}
.promo-cont .promo-info .txt {flex: 1; word-break: keep-all;}
.promo-cont .promo-info .txt .sub {display: block; margin-bottom: 2px; color: var(--font-neutral-6);}
.promo-cont .promo-info .txt strong {display: block; color: var(--font-neutral-3);}
.promo-cont .promo-info .txt .p-txt {color: var(--font-point-2);}
.promo-cont .step {padding: 20px 0 2px;}
.promo-cont .step > li {position: relative; padding: 0 0 34px 38px;}
.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);}
.promo-cont .step > li:last-child {padding-bottom: 0;}
.promo-cont .step > li:last-child::before {display: none;}
.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;}
.promo-cont .step .tit {font-weight: 700; font-size: 18px; line-height: 26px; color: var(--font-neutral-3);}
.promo-cont .step .txt {color: var(--font-neutral-5);}
.promo-cont .step .tit + .txt {margin-top: 4px;}
.promo-cont .step .btn {padding-top: 10px;text-align: right;}
.promo-cont .step .btn-view {width: 100%;background-color: rgba(204, 213, 235, 0.40); border-radius: 12px; padding: 11px 16px; font-size: 17px;font-weight: 700;color: var(--font-point-4);}


body[data-inapp="Y"] .apply-wrapper {min-height:auto;}
body[data-inapp="Y"] .renew21--header {display: flex;}
body[data-inapp="Y"] .apply-app-type {display: block;}
body[data-inapp="Y"] .TAB_top,
body[data-inapp="Y"] .bottom-fixed-wrap {display: none;}

body[data-inapp="Y"] .apply-contents {padding-top: 0;}
body[data-inapp="Y"] .apply-contents .inc-info-top {margin-bottom: 20px;}
body[data-inapp="Y"] .your-card {}
body[data-inapp="Y"] .your-card .selected-card {padding: 10px 4px; margin-top: 22px;}
body[data-inapp="Y"] .your-card .selected-card .logo {width: 28px;height: 28px; margin-right: 8px;}
body[data-inapp="Y"] .your-card .selected-card .txt {font-size: 16px;line-height: 24px;}
body[data-inapp="Y"] .apply-app-type .your-card .selected-card .re-select {text-underline-offset: 6px;}
body[data-inapp="Y"] .app-apply-btns {margin-top: 22px;}

body[data-inapp="N"] .renew21--header,
body[data-inapp="N"] .apply-app-type {display: none;}
body[data-inapp="N"] .TAB_top,
body[data-inapp="N"] .bottom-fixed-wrap {display: block;}

@media(max-width:340px){
    .itxt-inwrap .mno {width:110px;}
}

@media (min-width:1024px){
    .renew21--header{margin: 0 auto; max-width: 680px;}
    .apply-wrapper{margin: 0 auto; max-width: 460px;}
    .bottom-fixed-wrap{left: 50%; max-width: 460px; transform: translateX(-50%);}
}