@charset 'utf-8'; 

/* *********************************************************************************************************************************************************************************************
														[ QR코드 class="qr_code" ]
********************************************************************************************************************************************************************************************* */
/* QR코드 열림 */
body.on_qr {overflow:hidden;}
body.on_qr #header {z-index:100;}
body.on_qr .ui_qr_code {opacity:1; top:0; z-index:9999;}
body.on_qr .ui_qr_code .head {z-index:100;}
body.on_qr .close_qr {bottom:44px; z-index:999;}

/* setting */
.ui_qr_code {background-color:#ffffff; overflow-x:hidden; overflow-y:auto; opacity:0; position:fixed; right:0; left:0; top:100%; margin:0 auto; max-height:100vh; height:100%; max-width:540px; width:100%;}
.ui_qr_code {transition:top 0.4s ease-in-out, opacity 0.4s 0.2s;}

.ui_qr_code .head {background-color:#ffffff; display:flex; align-items:center; box-sizing:border-box; position:sticky; left:0; top:0; padding:0 16px 11px 16px; height:56px; width:100%; z-index:-1;}
.ui_qr_code .head {transition:opacity 0.2s;}
.ui_qr_code .head .tit_18 {text-indent:8px;}
.ui_qr_code .head .icon_sprite_32 {background-image:url(../images/common/icon_32x32.png); background-size:494px auto;}
.ui_qr_code .head .btn_set {margin-left:auto;}

.ui_qr_code .qr_pymnt_wrap {padding-bottom:150px;}
.ui_qr_code .box_shape {position:relative;}
 
/* QR닫기버튼 */
.ui_qr_code .close_qr {background-color:#37d243; border-radius:50%; box-shadow:0 4px 10px rgba(0,0,0,0.2); position:fixed; left:50%; bottom:100%; margin-left:-24px; height:48px; width:48px; z-index:-1;}
.ui_qr_code .close_qr .deco {display:block; position:absolute; left:50%; top:50%; margin:-9px 0 0 -9px; height:18px; width:18px;}
.ui_qr_code .close_qr .deco {transition:transform 0.3s ease-in-out;}
.ui_qr_code .close_qr .deco i {background-color:#ffffff; display:block; border-radius:3px; position:absolute; left:50%; top:50%; margin:-9px 0 0 -1px; height:100%; width:2px;}
.ui_qr_code .close_qr .deco .strk_01 {transform:rotate(45deg);}
.ui_qr_code .close_qr .deco .strk_02 {transform:rotate(-45deg);}
.ui_qr_code .close_qr .deco .strk_01,
.ui_qr_code .close_qr .deco .strk_02 {transition:transform 0.3s 0.1s ease-in-out;}
.ui_qr_code .close_qr.hide {animation:qr_hide 0.3s 0.4s forwards;}

@keyframes qr_hide {
    0% {bottom:44px;}
    100% {bottom:-20%;}
}
@-moz-keyframes qr_hide {
    0% {bottom:44px;}
    100% {bottom:-20%;}
}
@-webkit-keyframes qr_hide {
    0% {bottom:44px;}
    100% {bottom:-20%;}
}
@-o-keyframes qr_hide {
    0% {bottom:44px;}
    100% {bottom:-20%;}
}

/* 체크박스띄우기 */
.ui_qr_code .qr_pymnt .form_chk,
.ui_qr_code .prd_set .form_chk {position:absolute; left:0; top:0; padding:0; height:100%; width:100%;}
.ui_qr_code .qr_pymnt .form_chk .icon,
.ui_qr_code .prd_set .form_chk .icon {left:auto; right:0; top:50%; margin-top:-10px;}

/* ------------------------------ [ 쿠폰 ] ------------------------------------------------------------------------------------------------------------------------------ */
/* 쿠폰:선택전 */
.ui_qr_code .cp_box {background:#eeeeee;}
.ui_qr_code .cp_box .cp_cnt:before,
.ui_qr_code .cp_box .cp_cnt:after {background-color:#eeeeee;}
.ui_qr_code .cp_box .cp_cnt .input_chk:after {background-color:#f9f9f9;}
.ui_qr_code .cp_box .cp_cnt .form_chk .icon {background-color:#ffffff;}

/* 쿠폰:선택후 */
.ui_qr_code .cp_set:before {background:linear-gradient(62deg, #50e2c4 7%, #895eee 100%); content:""; border-radius:24px; opacity:0; position:absolute; left:0; top:0; height:0; width:100%;}
.ui_qr_code .cp_set.on:before {opacity:1; height:100%;}
.ui_qr_code .cp_set.on .cp_box {background:transparent;}
.ui_qr_code .cp_set.on .cp_box .cp_cnt:before,
.ui_qr_code .cp_set.on .cp_box .cp_cnt:after {background-color:#836bea;}

/* 쿠폰만있을때 */
.ui_qr_code .cpn_none {overflow:hidden; margin-top:32px; padding:0 16px;}
.ui_qr_code .cpn_none .cotn {display:flex; flex-direction:column; align-items:center; padding:28px 16px;}
.ui_qr_code .cpn_none p {text-align:center;}
.ui_qr_code .cpn_none .btn_wrap {margin-top:16px;}
.ui_qr_code .cpn_none .btn_wrap .btn {width:150px;}

/* 쿠폰 링크 있을 시 */
.ui_qr_code .cp_box.type01 .cp_cnt .go_view{width:85%;}
.ui_qr_code .cp_box.type01 .cp_cnt .top_cnt .form_chk .icon{margin:-10px -10px 0 0;right:50%;}
.ui_qr_code .cp_box.type01 .cp_cnt .top_cnt .form_chk{width:15%; left:auto;}

.ui_qr_code .cp_wrap {overflow:hidden; padding:0;}
.ui_qr_code .cp_wrap .coupon_list {padding:11px 16px 0;}
.ui_qr_code .cp_wrap .cp_enroll {position:relative;}
.ui_qr_code .cp_wrap .cp_enroll .amount p {color:#666666; font-size:14px;}
.ui_qr_code .cp_wrap .cp_enroll .input_chk {position:inherit; top:auto; margin-top:0; height:auto; width:auto;}

/* 쿠폰:비활성 */
.ui_qr_code .cp_wrap.disable .cp_enroll .amount p,
.ui_qr_code .cp_wrap.disable .cp_enroll .form_chk .txt {color:#dddddd;}
.ui_qr_code .cp_wrap.disable .cp_set .cp_box {background:#f6f6f6;}
.ui_qr_code .cp_wrap.disable .cp_set .img_area {opacity:0.4;}
.ui_qr_code .cp_wrap.disable .cp_set .txt_area .tit,
.ui_qr_code .cp_wrap.disable .cp_set .txt_area .label p,
.ui_qr_code .cp_wrap.disable .cp_set .btm_cnt .tit,
.ui_qr_code .cp_wrap.disable .cp_set .btm_cnt p,
.ui_qr_code .cp_wrap.disable .cp_set .cou_day,
.ui_qr_code .cp_wrap.disable .cp_set .txt_area p {color:#dddddd;}
.ui_qr_code .cp_wrap.disable .cp_set .cp_box .cp_cnt:before,
.ui_qr_code .cp_wrap.disable .cp_set .cp_box .cp_cnt:after {background-color:#f6f6f6;}
.ui_qr_code .cp_wrap.disable .cp_cnt .top_cnt .form_chk .icon {background-color:#eeeeee;}
.ui_qr_code .cp_wrap.disable .cp_cnt .top_cnt .input_chk:after {background-color:#f9f9f9;}
.ui_qr_code .cp_wrap.disable .cp_set .cp_box .btm_box .present {opacity:0.4; z-index:0;}

/* ------------------------------ [ 이벤트 배너 ] -------------------------------------------------------------------------------------------------------------------------- */
.ui_qr_code .event_wrap {overflow:hidden; margin-top:32px; padding:0 16px;}
.ui_qr_code .event_wrap .event_set {overflow:hidden; position:relative;}
.ui_qr_code .event_wrap .event_set ~ .event_set {margin-top:16px;}
.ui_qr_code .event_wrap .event_set .img img {display:block; width:100%;}

.ui_qr_code .close_qr.hide .deco {transform:rotate(-90deg);}
.ui_qr_code .close_qr.hide .strk_01 {transform:rotate(0);}
.ui_qr_code .close_qr.hide .strk_02 {transform:rotate(0);}

/* QR 코드 이미지 영역 공통 - index, index_btmpop */
.qr_wrap .qr_box {overflow:hidden; border-radius:24px; box-sizing:border-box; position:relative; margin:0 auto; padding:4px; height:272px; width:272px;}
.qr_wrap .qr_box:before {content:""; position:absolute; left:0; top:0; height:100%; width:100%; transition:0.4s; background:linear-gradient(45deg, #50e2c4 10%, #895eee);}
.qr_wrap .qr_box .code_area {background-color:#ffffff; overflow:hidden; border-radius:20px; box-sizing:border-box; position:relative; padding:12px; height:100%; width:100%; z-index:2;}
.qr_wrap .qr_box .code_area img {display:block; object-fit:contain; position:relative; height:100%; width:100%;}

.qr_pymnt {padding:28px 16px 0 16px; margin-top:24px;}
.qr_pymnt .bg_box_flx {overflow:inherit; margin-top:0;}
.qr_pymnt .box_shape {position:relative; border-radius:16px;}
.qr_pymnt .cotn {border-radius:14px; padding:16px; height:100%;}
.qr_pymnt .cotn .txt_link {display:block;}
.qr_pymnt .cotn .form_chk .icon {right:14px;}
.qr_pymnt .cotn .tit {color:#666666; font-size:14px; font-weight:bold; margin-bottom:6px;}

/* 포인트 */
.qr_pymnt .point .price p {font-weight:bold;}
.qr_pymnt .point .price p strong {font-size:20px;}

/* 간편결제있음 */
.qr_pymnt .has_easy .txt_link {display:block; position:relative; margin-bottom:6px; z-index:1;}
.qr_pymnt .has_easy p {font-size:18px; font-weight:bold;}
.qr_pymnt .has_easy .chc_card,
.qr_pymnt .has_easy .chc_card_02 {overflow:hidden; color:#666666; font-size:12px; font-weight:normal; line-height:1em; text-overflow:ellipsis; white-space:nowrap;}
.qr_pymnt .has_easy .chc_card {max-width:41%;}
.qr_pymnt .has_easy .chc_card_02 {max-width:70%;}

.qr_pymnt .easy_pay > .txt_link {position:absolute; right:8px; top:-28px;}
.qr_pymnt .easy_pay .mny_left {overflow:hidden; margin-top:8px;}
.qr_pymnt .easy_pay .mny_left .chc_card {float:left;}
.qr_pymnt .easy_pay .mny_left .price {float:left; margin-left:4px;}
.qr_pymnt .easy_pay .mny_left .price p {color:#666666; font-size:12px; font-weight:normal; line-height:1em;}
.qr_pymnt .easy_pay .mny_left .price p strong {font-weight:normal;}

/* ==== 포인트, 결제수단활성화 ==== */
.qr_pymnt .box_shape.on {background:linear-gradient(to right, #50e2c4, #895eee);}

/* 결제 - 비활성 class="disable" ==== */
.qr_pymnt.disable .tit,
.qr_pymnt.disable .price,
.qr_pymnt.disable .price strong,
.qr_pymnt.disable .txt_link,
.qr_pymnt.disable p {color:#dddddd;}

/* 간편결제없음 */
.qr_pymnt .none_easy {width:100%;}
.qr_pymnt .none_easy .txt_link {text-align:center;}

/* 간편결제 수단 다음에도 이용 */
.qr_pymnt_wrap .next_easy {padding:11px 18px 24px;}
.qr_pymnt_wrap .next_easy .input_chk {justify-content:end;}
.qr_pymnt_wrap .next_easy .input_chk .form_chk {display:flex; align-items:center;}
.qr_pymnt_wrap .next_easy .input_chk .txt {font-size:13px;}

/* 결제 관리 */
.qr_pay_set a {color:#666; font-weight:500; font-size:13px; text-decoration:underline;}
.qr_pay_set a:before {content:''; display:inline-block; position:relative; bottom:-2px; width:22px; height:15px; background:url(../images/common/ico_sprout.png) center no-repeat; background-size:contain; margin-right:8px;}

/* ==== 메세지 ==== */
.qr_wrap .info_copy {text-align:center; position:relative; padding-top:10px;}
.qr_wrap .info_copy > p {display:inline-block; color:#666666; font-size:14px; font-weight:bold; line-height:24px; position:relative; padding-right:32px;}
.qr_wrap .info_copy > p:after {background:url(../images/qr_code/icon_smile.png) no-repeat 0 0; background-size:cover; content:""; position:absolute; right:0; right:0; height:24px; width:24px;}

/* 선택별 메세지 - 토스트형식 */
.info_copy .fade_msg div {text-align:center; opacity:0; position:absolute; left:50%; top:0; transform:translateX(-50%); width:100%; z-index:-1;}
.info_copy .fade_msg div p {background-color:#222222; border-radius:20px; box-sizing:border-box; display:inline-block; color:#ffffff; font-size:14px; font-weight:bold; line-height:1em; padding:13px 32px; height:39px; min-width:210px;}
.info_copy .fade_msg div p:after {background-position:0 0; background-repeat:no-repeat; background-size:cover; content:""; display:inline-block; vertical-align:middle; margin-left:6px; height:17px; width:17px;}
.info_copy .fade_msg .pickup p:after {background-image:url(../images/common/icon_ticket.svg);}
.info_copy .fade_msg .point p:after {background-image:url(../images/common/icon_point.svg);}
.info_copy .fade_msg .paid p:after {background-image:url(../images/common/icon_paid.svg);}
.info_copy .fade_msg .coupon p:after {background-image:url(../images/common/icon_ticket.svg);}
.info_copy .fade_msg .coupon_max p:after {display:none;}
.info_copy .fade_msg div.active {animation:msg_show 6.0s forwards;}

@keyframes msg_show {
    0% {opacity:0; top:0; z-index:-1;}
    1% {opacity:1; top:0; z-index:1;}
    13% {opacity:1; top:8px; z-index:1;}
    90% {opacity:1; top:8px; z-index:1;}
    100% {opacity:0; top:0; z-index:-1;}
}
@-moz-keyframes msg_show {
    0% {opacity:0; top:0; z-index:-1;}
    1% {opacity:1; top:0; z-index:1;}
    13% {opacity:1; top:8px; z-index:1;}
    90% {opacity:1; top:8px; z-index:1;}
    100% {opacity:0; top:0; z-index:-1;}
}
@-webkit-keyframes msg_show {
    0% {opacity:0; top:0; z-index:-1;}
    1% {opacity:1; top:0; z-index:1;}
    13% {opacity:1; top:8px; z-index:1;}
    90% {opacity:1; top:8px; z-index:1;}
    100% {opacity:0; top:0; z-index:-1;}
}
@-o-keyframes msg_show {
    0% {opacity:0; top:0; z-index:-1;}
    1% {opacity:1; top:0; z-index:1;}
    13% {opacity:1; top:8px; z-index:1;}
    90% {opacity:1; top:8px; z-index:1;}
    100% {opacity:0; top:0; z-index:-1;}
}

/* ------------------------------ [ QR결제 - 바닥팝업 ] ------------------------------------------------------------------------------------------------------------------------- */
.qr_pop_pay[class*="max"] {height:87.685vh; padding-bottom:0 !important;}
.qr_pop_pay[class*="max"] .head + .contents {height:100%; max-height:100%; padding-bottom:130px;}
.qr_pop_pay .head {margin:20px 0 14px 0; display:flex; align-items:center; box-sizing:border-box; position:sticky; left:0; top:0; padding:0px 20px; height:30px; width:100%; z-index:-1;}
.qr_pop_pay .head .icon_sprite_32.setting {margin-left:auto; right:4px; position:relative;}
.qr_pop_pay .head .btn_switch .form_chk {width:82px;}
.qr_pop_pay .head .btn_switch .form_chk .icon {transition:transform 0.2s ease-in-out;}
.qr_pop_pay .head .btn_switch .form_chk input:checked ~ .icon {transform:translateX(55px);}
.qr_pop_pay .head .btn_switch .form_chk input:checked ~ .icon {border:2px solid #744AEB;}
.qr_pop_pay .head .btn_switch .form_chk input:checked ~ .bg {background:#744AEB;}
.qr_pop_pay .head .btn_switch .form_chk .switch {font-size:12px;}
.qr_pop_pay .head .btn_switch input ~ .switch.on {display:none; left:8px;}
.qr_pop_pay .head .btn_switch .form_chk .switch.off {right:8px; color:#aaa;}
.qr_pop_pay .head .btn_switch input:checked ~ .switch.off {display:none;}
.qr_pop_pay .head .btn_switch input:checked ~ .switch.on {display:flex;}
.qr_pop_pay .head .btn_switch .form_chk .bg {transition-duration:0.2s, 0s; transition-timing-function:ease-in-out, ease-in-out;}
.qr_pop_pay .head .qricon_list {position:absolute; width:30px; height:30px;}
/* 점포출입 - 무인점포 이용약관 */
.qr_pop_pay .head .store_enter {position:absolute; right:101px;}
.qr_pop_pay .head .store_enter.type_btn .form_chk {display:flex; align-items:center; justify-content:center; margin:8px 0 0; padding:0 8px; height:24px;}/*바이셀프_v2*/
.qr_pop_pay .head .store_enter.type_btn .form_chk .txt {color:#aaaaaa; font-size:12px; line-height:0;}/*바이셀프_v2*/
.qr_pop_pay .head .store_enter.type_btn[class*="n_bdr"] .form_chk .icon {border:none; border-radius:50px; background-color:#EEEEEE;}/*바이셀프_v2*/
.qr_pop_pay .head .store_enter.type_btn .form_chk input:checked ~ .icon {background-color:#37D243;}/*바이셀프_v2*/
.qr_pop_pay .head .store_enter.type_btn .form_chk input:checked ~ .txt {color:#ffffff;}/*바이셀프_v2*/

.qr_pop_pay .head .icon_light {right:62px; background:url(../images/common/icon_light.png); background-size:contain;}
.qr_pop_pay .head .icon_setting {right:20px; background:url(../images/qr_code/icon_setting.png); background-size:contain;}

.qr_pop_pay .qr_wrap .qr_box {width:183px !important; height:183px !important;}
.qr_pop_pay .qr_wrap .qr_box .code_area:before {background:url(../images/common/icon_loading.png) no-repeat 0 0; background-size:100% auto; content:""; position:absolute; left:50%; top:50%; margin:-28px 0 0 -28px; height:56px; width:56px; display:none;}
.qr_pop_pay .qr_wrap .qr_box .code_area:before {animation:load 0.7s linear infinite;}
.qr_pop_pay .qr_wrap .qr_box .code_area.qr_loading:before {display:block;}
.qr_pop_pay .qr_wrap.dim_on .qr_box > .go_view {z-index:2;}

/* issues/5126_수정 */
.qr_pop_pay .qr_wrap.dim_on {position: relative;}
.qr_pop_pay .qr_wrap.dim_on .qr_box .code_area::after {content:''; position:absolute; top:0; left:0%; width:100%; height:100%; border-radius:12px; background:rgba(0,0,0, 0.7) !important; z-index:3;}
.qr_pop_pay .qr_wrap.dim_on .qr_box .dim_cotn {position:absolute; top:0; left:0; z-index: 2; width:100%; height:100%; display:flex; flex-flow:column nowrap; justify-content:center; align-items:center; gap:4px 0; color:#ffffff;}
.qr_pop_pay .qr_wrap.dim_on .qr_box .dim_cotn > p {font-size:16px; font-weight: 700; line-height:24px; text-align:center; color: #ffffff;}
.qr_pop_pay .qr_wrap.dim_on .qr_box .q_mark_wh {width:21px; height: 21px;background:url(../images/qr_code/dim_info.svg) no-repeat center/ contain;}
.qr_pop_pay .qr_wrap.dim_on .qr_box .code_area::after {content:''; position:absolute; top:0; left:0%; width:100%; height:100%; border-radius:12px; background:rgba(0,0,0, 0.7) !important; z-index:3;}
.qr_pop_pay .qr_wrap.dim_on .qr_box .code_area::after,
.qr_pop_pay .qr_wrap.dim_on .qr_box .dim_cotn {animation:dimfade 1s; -moz-animation:dimfade 1s; -webkit-animation:dimfade 1s; -o-animation:dimfade 1s;}
.qr_pop_pay .qr_wrap.dim_on .qr_box .dim_cotn .btn_password {box-sizing:border-box; flex:none; padding:0 15px; height:28px; color:#000; font-size:12px; font-weight:bold; line-height:28px; border-radius:24px; background-color:#fff;}

/* QR결제 - 바닥팝업 :: QR size 관련 */
.qr_wrap .qr_box .qr_size141 {padding: 17px;}
.qr_wrap .qr_box .qr_size131 {padding: 22px;}
.qr_wrap .qr_box .qr_size121 {padding: 27px;}
.qr_wrap .qr_box .qr_size111 {padding: 32px;}

@keyframes dimfade {
    from {opacity:0;}
    to {opacity:1;}
}
@-moz-keyframes dimfade {
    from {opacity:0;}
    to {opacity:1;}
}
@-webkit-keyframes dimfade {
    from {opacity:0;}
    to {opacity:1;}
}
@-o-keyframes dimfade {
    from {opacity:0;}
    to {opacity:1;}
}

@keyframes load {
    0% {transform:rotate(0);}
    100% {transform:rotate(360deg);}
}
@-moz-keyframes load {
    0% {transform:rotate(0);}
    100% {transform:rotate(360deg);}
}
@-webkit-keyframes load {
    0% {transform:rotate(0);}
    100% {transform:rotate(360deg);}
}
@-o-keyframes load {
    0% {transform:rotate(0);}
    100% {transform:rotate(360deg);}
}

/* 케이스별 노출 */
.qr_pop_pay .info_copy {padding-top:10px;}
.qr_pop_pay .state_wrap {display:flex; justify-content:center; padding:4px 12px; margin:0 auto; width:fit-content; background:#f8f8f8; border-radius:19px;}
.qr_pop_pay .state_wrap .icon_barcode {margin-right:2px; display:block; overflow:hidden; height:20px; width:28px; background-repeat:no-repeat; background-size:20px auto; background-position:right;}
.qr_pop_pay .state_wrap .icon_barcode.qr_point {background-image:url(../images/qr_code/icon_qrpoint.png); width:20px;}
.qr_pop_pay .state_wrap .icon_barcode.qr_pay {background-image:url(../images/qr_code/icon_qrpay.png);}
.qr_pop_pay .state_wrap .icon_barcode.qr_cpn {background-image:url(../images/qr_code/icon_qrcpn.png);}
.qr_pop_pay .state_wrap .icon_barcode.qr_store {background-image:url(../images/qr_code/icon_store.png);}
.qr_pop_pay .state_wrap p {position:relative; overflow:hidden; white-space:nowrap; display:flex; align-items:center; font-size:12px; line-height:16px;}
.qr_pop_pay .state_wrap p.fade_out {animation:fadeOut 0.35s cubic-bezier(0, 0, 0.05, 0.1), collapseWidth 0.35s cubic-bezier(0, 0, 0.05, 0.1) forwards;}
.qr_pop_pay .state_wrap p.fade_in {animation:fadeIn 0.5s ease-in-out forwards, expandWidth 0.3s ease-in-out forwards;}
.qr_pop_pay .state_wrap p .qrcpn_num {margin-left:2px; font-size:12px; line-height:16px; font-weight:700; color:#222;}

@keyframes fadeIn {
    0% {opacity:0;}
    100% {opacity:1;}
}
@-moz-keyframes fadeIn {
    0% {opacity:0;}
    100% {opacity:1;}
}
@-webkit-keyframes fadeIn {
    0% {opacity:0;}
    100% {opacity:1;}
}
@-o-keyframes fadeIn {
    0% {opacity:0;}
    100% {opacity:1;}
}

@keyframes expandWidth {
    0% {max-width:0;}
    100% {max-width:100px;}
}
@-moz-keyframes expandWidth {
    0% {max-width:0;}
    100% {max-width:100px;}
}
@-webkit-keyframes expandWidth {
    0% {max-width:0;}
    100% {max-width:100px;}
}
@-o-keyframes expandWidth {
    0% {max-width:0;}
    100% {max-width:100px}
}

@keyframes fadeOut {
    0% {opacity:1;}
    100% {opacity:0;}
}
@-moz-keyframes fadeOut {
    0% {opacity:1;}
    100% {opacity:0;}
}
@-webkit-keyframes fadeOut {
    0% {opacity:1;}
    100% {opacity:0;}
}
@-o-keyframes fadeOut {
    0% {opacity:1;}
    100% {opacity:0;}
}

@keyframes collapseWidth {
    0% {max-width:100px}
    100% {max-width:0; display:none;}
}
@-moz-keyframes collapseWidth {
    0% {max-width:100px}
    100% {max-width:0; display:none;}
}
@-webkit-keyframes collapseWidth {
    0% {max-width:100px}
    100% {max-width:0; display:none;}
}
@-o-keyframes collapseWidth {
    0% {max-width:100px}
    100% {max-width:0; display:none;}
}

/* 남은시간 */
.qr_wrap {position:relative; padding-bottom:26px;}
.qr_wrap .time {overflow:hidden; display:flex; justify-content:center; align-items:end; min-height:20px; position:absolute; bottom:0; left:50%; transform:translateX(-50%);}
.qr_wrap .time p {position:relative; display:flex; bottom:1px; font-size:11px; line-height:16px; font-weight:bold;}
.qr_wrap .time p strong {margin:0 6px 0 8px; display:flex; font-size:14px; color:#744AE8;}
.qr_wrap .time .refresh {display:flex; background:url(../images/qr_code/qr_refresh.png)no-repeat; width:20px; height:20px; background-size:20px auto;}
.qr_wrap .time .refresh.on {animation:refresh 1.2s ease-in-out forwards;}

@keyframes refresh {
    0% {transform:scale(0.9);}
    20% {transform:scale(1);}
    26% {transform:rotate(0deg);}
    100% {transform:rotate(360deg);}
}
@-moz-keyframes refresh {
    0% {transform:scale(0.9);}
    20% {transform:scale(1);}
    26% {transform:rotate(0deg);}
    100% {transform:rotate(360deg);}
}
@-webkit-keyframes refresh {
    0% {transform:scale(0.9);}
    20% {transform:scale(1);}
    26% {transform:rotate(0deg);}
    100% {transform:rotate(360deg);}
}
@-o-keyframes refresh {
    0% {transform:scale(0.9);}
    20% {transform:scale(1);}
    26% {transform:rotate(0deg);}
    100% {transform:rotate(360deg);}
}

/* ------------------------------ [ 탭 구분 - 결제,적립 / 픽업] ------------------------------------------------------------------------------------------------------------------ */
.qr_pop_pay .qr_pymnt_wrap .tabs_content {display:none;}
.qr_pop_pay .qr_pymnt_wrap .tabs_content.current {display:block;}
.qr_pop_pay .qr_pymnt_wrap .list_sort {padding:10px 0;}
.qr_pop_pay .qr_pymnt_wrap .list_sort .tab_menu_fix {width:100%;}

/* ------------------------------ [ 결제 탭 ] ------------------------------------------------------------------------------------------------------------------ */
.qr_pop_pay .qr_pymnt_wrap .easy_pay {position:relative; margin-bottom:16px; z-index:100;}
.qr_pop_pay .easy_pay_tip {display:flex; margin:6px 0 8px 0;}
.qr_pop_pay .easy_pay_tip .btn_month_event {display:inline-flex; align-items:center; padding:4px; margin-left:auto;}
.qr_pop_pay .easy_pay_tip .icon_qr_event {display:block; width:18px; height:18px; margin-right:4px; background:url('../images/qr_code/icon_qr_event.svg') center/18px no-repeat;}
.qr_pop_pay .easy_pay_tip .btn_month_event span {display:block; margin-right:2px; font-size:13px; line-height:18px; letter-spacing:-0.13px;}
.qr_pop_pay .easy_pay_tip .icon_arrow {width:14px; height:14px; background:url('../images/common/icon_arrow_bk_right.svg') no-repeat center/14px;}

.qr_pop_pay .qr_pymnt_wrap .easy_pay .box_shape {padding:0; border-radius:16px;}
.qr_pop_pay .qr_pymnt_wrap .easy_pay .select_card {margin:0; overflow:visible; padding:14px 0 14px; min-height:auto; border-radius:16px; background:#F8F8F8;}
.qr_pop_pay .qr_pymnt_wrap .easy_pay .select_card .swiper {position:relative; overflow:visible; border-radius:0px; padding-bottom:0 !important; max-height:200px;}
.qr_pop_pay .qr_pymnt_wrap .easy_pay .select_card .swiper-slide {width:66.388%; position:relative;}
.qr_pop_pay .qr_pymnt_wrap .easy_pay .select_card .swiper-slide.swiper-slide-active {z-index:0;}
.qr_pop_pay .qr_pymnt_wrap .easy_pay .select_card .swiper-slide.swiper-slide-next {z-index:-1;}
.qr_pop_pay .qr_pymnt_wrap .easy_pay .select_card .swiper-slide .cupay_msg {opacity:0; max-height:0; overflow:hidden; transition: opacity 0.4s cubic-bezier(0.25, 0.1, 0.25, 1), max-height 0.4s cubic-bezier(0.25, 0.1, 0.25, 1);}
.qr_pop_pay .qr_pymnt_wrap .easy_pay .select_card .swiper-slide-active .cupay_msg {opacity:1; max-height:100px;}
.qr_pop_pay .qr_pymnt_wrap .easy_pay .select_card .cupay_msg ul {margin-top:10px; display:flex; justify-content:center; flex-direction:column; align-items:center;}
.qr_pop_pay .qr_pymnt_wrap .easy_pay .select_card .cupay_msg ul li {font-size:12px; word-break:inherit;}
.qr_pop_pay .qr_pymnt_wrap .easy_pay .select_card .cupay_msg ul li ~ li {margin-top:2px;}

.qr_pop_pay .qr_pymnt_wrap .input_chk_wrap {padding-left:12px; margin-bottom:20px; position:relative; z-index:0;}
.qr_pop_pay .qr_pymnt_wrap .input_chk_wrap .input_chk.disable .txt,
.qr_pop_pay .qr_pymnt_wrap .input_chk_wrap .input_chk.disable .qrpoint_txt {color:#ccc;}
.qr_pop_pay .qr_pymnt_wrap .input_chk_wrap.all_cpn_wrap {margin-bottom:26px;}
.qr_pop_pay .qr_pymnt_wrap .input_chk_wrap .use_point .txt {color:#222;}
.qr_pop_pay .qr_pymnt_wrap .input_chk_wrap .all_cpn .txt {color:#000;}
.qr_pop_pay .qr_pymnt_wrap .input_chk_wrap .qrpoint_txt {color:#603EF4; font-weight:700;}

/* CU머니 - 등록 */
.qr_pop_pay .qr_pymnt_wrap .card_set .box_shape {height:121px; transition:none;}
.qr_pop_pay .qr_pymnt_wrap .card_set .box_shape.bg_nopaid .cotn {padding:29px 18px 34px !important; border-radius:0 !important;}
.qr_pop_pay .qr_pymnt_wrap .card_set .default_nocard {display:flex; align-items:center; height:100%;}
.qr_pop_pay .qr_pymnt_wrap .card_set .default_nocard p {color:#666666; text-align:center; flex:1; position:relative; padding-top:47px; font-size:13px; font-weight:700;}
.qr_pop_pay .qr_pymnt_wrap .card_set .default_nocard p:before {background:url(../images/qr_code/deco_smile.png) no-repeat 0 0; background-size:100% auto; content:""; position:absolute; left:50%; top:7px; margin-left:-16px; height:32px; width:32px;}
.qr_pop_pay .qr_pymnt_wrap .card_set .reg_card p:before {background:url(../images/qr_code/icon_payplus_b.png) no-repeat 0 0; background-size:100% auto; height:24px; width:24px;}
.qr_pop_pay .qr_pymnt_wrap .card_set .reg_card.paycard_setting p {color:#222; font-size:13px; line-height:18px; font-weight:700;}
.qr_pop_pay .qr_pymnt_wrap .card_set .reg_card.paycard_setting p.qr_cumoney img {width:46px; height:11.19px;}
.qr_pop_pay .qr_pymnt_wrap .card_set .cu_mny_info .namecard_wrap {display:flex; align-items:center;}
.qr_pop_pay .qr_pymnt_wrap .card_set .cu_mny_info .namecard_wrap .tit_18 {white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis !important;}
.qr_pop_pay .qr_pymnt_wrap .card_set .cu_mny_info .main_card_label {padding:4px 8px 0; margin-left:2px; min-width:47px; background:rgba(0, 0, 0, 0.2); color:#fff; font-size:12px; flex:none;}

.qr_pop_pay .qr_pymnt_wrap .qr_pymnt .easy_pay .cotn {display:flex; align-items:center;}
.qr_pop_pay .qr_pymnt_wrap .easy_pay > .box_shape > .cotn {padding:0; overflow:visible; border-radius:0 !important; transition:none !important;}
.qr_pop_pay .qr_pymnt_wrap .pymnt_method .easy_pay .card_set .box_shape.bg_easypaid .cotn {padding:14px 20px 20px;}
.qr_pop_pay .qr_pymnt_wrap .pymnt_method .easy_pay .card_set .box_shape.bg_easypaid .group_mny {margin-top:9.2%;}
/* .qr_pop_pay .qr_pymnt_wrap .pymnt_method .easy_pay .card_set .box_shape.bg_easypaid .amnt_area {overflow:hidden;} */
.qr_pop_pay .qr_pymnt_wrap .pymnt_method .easy_pay .card_set .box_shape.bg_easypaid .avble_amnt {white-space:nowrap; overflow:hidden !important; text-overflow:ellipsis !important; margin-top:3px;}
.qr_pop_pay .qr_pymnt_wrap .pymnt_method .easy_pay .card_set .box_shape.bg_charge .cotn {padding-top:12px;}
.qr_pop_pay .qr_pymnt_wrap .pymnt_method .easy_pay .card_set .box_shape.bg_charge .group_mny {margin-bottom:-4px;}
.qr_pop_pay .qr_pymnt_wrap .pymnt_method .easy_pay .card_set .cotn {padding:14px 20px; overflow:visible;} /* overflow:visible은 .tooltip 영역 보이기 위한 css */
.qr_pop_pay .qr_pymnt_wrap .pymnt_method .easy_pay .card_set .company_card .cotn {justify-content:end; padding:20px 22px 17px;}
.qr_pop_pay .qr_pymnt_wrap .pymnt_method .easy_pay .card_set .tooltip {top:32px; left:50%; transform:translateX(-50%); width:100%; min-width:280px; box-sizing:border-box; box-shadow:-2px 0px 12px 0px rgba(0, 0, 0, 0.08); z-index:30 !important;}

@media (min-width:375px) and (max-width:540px) {
    .qr_pop_pay .qr_pymnt_wrap .pymnt_method .easy_pay .card_set .box_shape.bg_easypaid .group_mny {margin-top:9.5%;}
}
@media (max-width:375px) {
    .qr_pop_pay .qr_pymnt_wrap .pymnt_method .easy_pay .card_set .box_shape.bg_charge .group_mny {margin-bottom:-5px;}
    .qr_pop_pay .qr_pymnt_wrap .pymnt_method .select_card.qr_card .group_mny .changecard_area {margin-bottom:-4px;}
}
@media (max-width:320px) {
    .qr_pop_pay .qr_pymnt_wrap .pymnt_method .easy_pay .card_set .box_shape.bg_easypaid .group_mny {margin-top:15px;}
    .qr_pop_pay .qr_pymnt_wrap .pymnt_method .easy_pay .card_set .box_shape.bg_charge .group_mny {margin-bottom:-4px;}
    .qr_pop_pay .qr_pymnt_wrap .pymnt_method .select_card.qr_card .group_mny .changecard_area {margin-bottom:-8px;}
    .qr_pop_pay .qr_pymnt_wrap .pymnt_method .select_card.qr_card .group_mny .changecard_area a::before {bottom:0 !important;}
    .qr_pop_pay .select_card.qr_card .avble_amnt .price p,
    .qr_pop_pay .select_card.qr_card .avble_amnt .price p + p {max-width:124px; font-size:18px !important;}
    .qr_pop_pay .select_card.qr_card .avble_amnt .price p + p strong {font-size:18px !important;}
    .qr_pop_pay .select_card.qr_card .avble_amnt .price p strong {font-size:18px !important;}
}

@media (max-width:280px) {
    .qr_pop_pay .qr_pymnt_wrap .pymnt_method .easy_pay .card_set .box_shape.bg_easypaid .group_mny {margin-top:17px;}
    .qr_pop_pay .qr_pymnt_wrap .pymnt_method .select_card.qr_card .group_mny .changecard_area {margin-bottom:-6px;}
    .qr_pop_pay .qr_pymnt_wrap .pymnt_method .select_card.qr_card .group_mny .changecard_area a::before {bottom:2px !important;}
    .qr_pop_pay .qr_pymnt_wrap .pymnt_method .easy_pay .card_set .tooltip {min-width:240px !important;}
}

/* CU머니 - 결제 케이스별 머니 및 기업카드 */
.qr_pop_pay .qr_pymnt_wrap .pymnt_method .select_card.qr_card .card_set .cu_mny_info {overflow:visible;}
.qr_pop_pay .qr_pymnt_wrap .pymnt_method .select_card.qr_card .card_set .cu_mny_info .card_typewrap {display:flex; align-items:center;}
.qr_pop_pay .qr_pymnt_wrap .pymnt_method .select_card.qr_card .card_set .cu_mny_info .namecard_wrap {margin-top:5px;}
.qr_pop_pay .qr_pymnt_wrap .pymnt_method .select_card.qr_card .card_set .cu_mny_info .card_div .logo {display:block; height:16px;}
.qr_pop_pay .qr_pymnt_wrap .pymnt_method .select_card.qr_card .card_set .cu_mny_info.custom_card01 .card_div .logo {background:url(../images/qr_code/logo_cum.png) no-repeat 0 0; background-size:auto 100%; width:40px; filter:brightness(0);}
.qr_pop_pay .qr_pymnt_wrap .pymnt_method .select_card.qr_card .card_set .cu_mny_info.custom_card02 .card_div .logo {background:url(../images/qr_code/logo_cum_fam.svg) no-repeat 0 0; background-size:auto 100%; width:79px;}
.qr_pop_pay .qr_pymnt_wrap .pymnt_method .select_card.qr_card .card_set .cu_mny_info.custom_card03 .card_div .logo {background:url(../images/qr_code/logo_easypay.png) no-repeat 0 0; background-size:auto 100%; width:64px; filter:brightness(0);}
.qr_pop_pay .qr_pymnt_wrap .pymnt_method .select_card.qr_card .card_set .cu_mny_info.custom_card03 .card_div {display:inline-block;}
.qr_pop_pay .qr_pymnt_wrap .pymnt_method .select_card.qr_card .card_set .cu_mny_info.custom_card03 .btn_tip {margin-left:2px; width:16px; height:16px;}

.qr_pop_pay .qr_pymnt_wrap .pymnt_method .select_card.qr_card .card_set .btn_tip .q_mark_16 {background:url(../images/qr_code/qr_info01.png) no-repeat 0 0; background-size:cover;}
.qr_pop_pay .qr_pymnt_wrap .pymnt_method .select_card.qr_card .card_set .tooltip .cotn {padding:0 !important;}
.qr_pop_pay .qr_pymnt_wrap .pymnt_method .select_card.qr_card .card_set .tooltip .cotn .info_area ul {margin-top:6px;}
.qr_pop_pay .qr_pymnt_wrap .pymnt_method .select_card.qr_card .card_set .tooltip .btn_close {top:-2px; right:0px;}

.qr_pop_pay .qr_pymnt_wrap .pymnt_method .select_card.qr_card .avble_amnt .price {display:flex; align-items:center;}
.qr_pop_pay .qr_pymnt_wrap .pymnt_method .select_card.qr_card .avble_amnt .price p {font-size:22px; font-weight:bold;}
.qr_pop_pay .qr_pymnt_wrap .pymnt_method .select_card.qr_card .avble_amnt .price p strong {font-size:24px; line-height:30px; font-weight:700;}
.qr_pop_pay .qr_pymnt_wrap .pymnt_method .select_card.qr_card .avble_amnt .price p + p {margin-left:4px; white-space:nowrap;}
.qr_pop_pay .qr_pymnt_wrap .pymnt_method .select_card.qr_card .avble_amnt .price .today_use {font-size:11px !important; line-height:16px; color:#444; text-align:left;}
.qr_pop_pay .qr_pymnt_wrap .pymnt_method .select_card.qr_card .avble_amnt > p {display:flex; flex-wrap:wrap; font-size:12px; line-height:16px; white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis !important;}
.qr_pop_pay .qr_pymnt_wrap .pymnt_method .select_card.qr_card .avble_amnt span.card_name {margin-right:4px; margin-top: 0; overflow:hidden !important; text-overflow:ellipsis !important; color: #222222;} /* margin-top, color는 mypage.css의 card_name 영향으로 추가 */
.qr_pop_pay .qr_pymnt_wrap .pymnt_method .select_card.qr_card .avble_amnt span.card_num {font-size:12px;}

/* issues/4297#note_131221 */
.qr_pop_pay .qr_pymnt_wrap .pymnt_method .select_card.qr_card .group_mny {display:flex; justify-content:space-between; align-items:center; margin-top:21px;}
.qr_pop_pay .qr_pymnt_wrap .pymnt_method .select_card.qr_card .group_mny .charge_area,
.qr_pop_pay .qr_pymnt_wrap .pymnt_method .select_card.qr_card .group_mny .changecard_area {font-weight:700; font-size:14px; margin-left:17px;}
.qr_pop_pay .qr_pymnt_wrap .pymnt_method .select_card.qr_card .group_mny .charge_area a,
.qr_pop_pay .qr_pymnt_wrap .pymnt_method .select_card.qr_card .group_mny .changecard_area a {position:relative; display:inline-block; white-space:nowrap;}
.qr_pop_pay .qr_pymnt_wrap .pymnt_method .select_card.qr_card .group_mny .charge_area a::before,
.qr_pop_pay .qr_pymnt_wrap .pymnt_method .select_card.qr_card .group_mny .changecard_area a::before {content:""; position:absolute; width:100%; height:1px; background-color:#000; bottom:1px; left:0;}
.qr_pop_pay .qr_pymnt_wrap .pymnt_method .select_card.qr_card .card_div.any_money {display:flex; align-items:center; height:auto;}
.qr_pop_pay .qr_pymnt_wrap .pymnt_method .select_card.qr_card .card_div.any_money img {width:30px;}
.qr_pop_pay .qr_pymnt_wrap .pymnt_method .select_card.qr_card .card_div.any_money p {margin-left:4px; font-size:20px; line-height:26px; font-weight:700;}
.qr_pop_pay .qr_pymnt_wrap .pymnt_method .select_card.qr_card .amnt_area {display:flex; flex-direction:row; align-items:flex-start; flex-wrap:wrap;}

/* CU머니, 카드 유형별 배경색 및 이미지 */
.qr_pop_pay .box_shape.bg_nopaid {background:#eee;} /* 결제 수단 사용하지 않음 */
.qr_pop_pay .box_shape.bg_cuset {background:#E3B3FF;} /* CU머니로 결제 수단 선택 */
.qr_pop_pay .box_shape.bg_easypaid {background:#A4DEFA;} /* CU간편결제 */
.qr_pop_pay .box_shape.bg_charge {background:#E3B3FF;} /* 잔돈 */
.qr_pop_pay .box_shape.bg_naver {background:#00DE5A;} /* 네이버페이 */
.qr_pop_pay .box_shape.bg_naver:before {background:url(../images/qr_code/logo_npay.png) no-repeat 0 0; background-size:100% auto; content:""; position:absolute; left:50%; top:22px; transform:translateX(-50%); width:70px; height:28px;}
.qr_pop_pay .box_shape.bg_payco {background:#FA2828;} /* 페이코 */
.qr_pop_pay .box_shape.bg_payco:before {background:url(../images/qr_code/logo_payco.png) no-repeat 0 0; background-size:100% auto; content:""; position:absolute; left:50%; top:30px; transform:translateX(-50%); width:70px; height:17px;}
.qr_pop_pay .box_shape.bg_paybook {background:#E7394A;} /* 페이북 */
.qr_pop_pay .box_shape.bg_paybook:before {background:url(../images/qr_code/logo_paybook.png) no-repeat 0 0; background-size:100% auto; content:""; position:absolute; left:50%; top:22px; transform:translateX(-50%); width:69px; height:27px;}
.qr_pop_pay .box_shape.bg_disabled {background:rgba(0, 0, 0, 0.7);} /* 카드 사용 불가 */

.qr_pop_pay .qr_pymnt_wrap .pymnt_method .btn_wrap {justify-content:center;}
.qr_pop_pay .qr_pymnt_wrap .pymnt_method .btn_wrap a {width:89.42%; border-radius:24px; color:#444; line-height:40px; height:40px;}
.qr_pop_pay .qr_pymnt_wrap .pymnt_method .easy_pay.cu_card .icon {left:0;}
.qr_pop_pay .qr_pymnt_wrap .pymnt_method .easy_pay.cu_card span.txt {color:#000;}

/* CU간편결제 카드 딤처리 */
.qr_pop_pay .qr_pymnt_wrap .pymnt_method .easy_pay .bg_disabled {display:none;}
.qr_pop_pay .qr_pymnt_wrap .pymnt_method .easy_pay .disabled_card {position: relative;}
.qr_pop_pay .qr_pymnt_wrap .pymnt_method .easy_pay .disabled_card .bg_disabled {position: absolute; top: 0; left: 0; width: 100%; display:block; z-index:2;}
.qr_pop_pay .qr_pymnt_wrap .pymnt_method .easy_pay .disabled_card .bg_disabled .cotn > * {display:flex; justify-content: center; align-items: center; height:100%; color: #ffffff;}
.qr_pop_pay .qr_pymnt_wrap .pymnt_method .easy_pay .disabled_card .cupay_msg.dimmed_msg{display: block;}
.qr_pop_pay .qr_pymnt_wrap .pymnt_method .easy_pay .cupay_msg.dimmed_msg {display: none;}


/* 포인트 및 쿠폰 모두 사용 - 비활성화 */
.qr_pop_pay .disable .form_chk input ~ .icon,
.qr_pop_pay .disable .form_chk input ~ .txt {cursor:default;}
.qr_pop_pay .disable .form_chk input ~ .icon {background-color:#eeeeee; border:1px solid #eeeeee;}
.qr_pop_pay .disable .form_chk input ~ .icon:before {width:0;}
.qr_pop_pay .disable .form_chk input ~ .icon:after {transition:none; width:13px;}
.qr_pop_pay .disable .form_chk input ~ .txt {color:#dddddd;}

/* 쿠폰 - [D] 디폴트 */
.qr_pop_pay .qr_pymnt_wrap .coupon_list .cp_box {background:#eeeeee;}
.qr_pop_pay .qr_pymnt_wrap .cp_box .cp_cnt:before,
.qr_pop_pay .qr_pymnt_wrap .cp_cnt:after {background-color:#eeeeee;}
.qr_pop_pay .qr_pymnt_wrap .cp_set .txt_area .tit,
.qr_pop_pay .qr_pymnt_wrap .cp_set .txt_area .label p {transition:color 0.1s;}
.qr_pop_pay .qr_pymnt_wrap .cp_set:before {transition:height 0.3s ease-in-out, opacity 0.1s 0.1s;}

/* 쿠폰 - 클릭 시 */
.qr_pop_pay .qr_pymnt_wrap .cp_set.on .cp_box {transition:background 0.5s;}
.qr_pop_pay .qr_pymnt_wrap .cp_set.on .cp_box.type01 {background:linear-gradient(62deg, #50e2c4 7%, #895eee 100%);} /* .cp_set.on시 보더라인 구현 */
.qr_pop_pay .qr_pymnt_wrap .cp_set.on .cp_box .cp_cnt:before,
.qr_pop_pay .qr_pymnt_wrap .cp_set.on .cp_box .cp_cnt:after {background:#836bea; transition:background 0s 0s !important;}
.qr_pop_pay .qr_pymnt_wrap .cp_set.on .cp_box .cp_cnt:before {transition:background 0.3s 0.1s;}
.qr_pop_pay .qr_pymnt_wrap .cp_set.on .cp_box .cp_cnt:after {transition:background 0.3s 0.3s;}

.qr_pop_pay .qr_pymnt_wrap .pick_prd ul li {margin-top:10px;}
.qr_pop_pay .qr_pymnt_wrap .pick_prd .prd_set .box_shape.on {background:linear-gradient(62deg, #50e2c4 7%, #895eee 100%);}
.qr_pop_pay .qr_pymnt_wrap .pick_prd .prd_li.horzn_style01 .prd_set.prd_link .form_chk .icon {margin-top:-10px;}
.qr_pop_pay .qr_pymnt_wrap .pick_prd .prd_li.horzn_style01 .prd_set .txt_wrap .name {white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis !important;}
.qr_pop_pay .qr_pymnt_wrap .cp_wrap .coupon_list {margin-bottom:8px; padding:0;}
.qr_pop_pay .qr_pymnt_wrap .cp_wrap .coupon_list li + li {margin-top:8px;}
.qr_pop_pay .qr_pymnt_wrap .cp_wrap .cp_cnt .top_cnt .go_view {width:85%; z-index:15;}
.qr_pop_pay .qr_pymnt_wrap .top_cnt .img_area {background:#fff;}
.qr_pop_pay .qr_pymnt_wrap .txt_qr {padding-left:24px; font-size:13px; color:#666;}
.qr_pop_pay .qr_pymnt_wrap .pymt_noti .box_shape {padding:16px 12px 16px 16px; border-radius:16px;}
.qr_pop_pay .qr_pymnt_wrap .pymt_noti.tp_26 {margin-top:26px;}

/* ------------------------------ [ 픽업 탭 ] ------------------------------------------------------------------------------------------------------------------ */
.qr_pop_pay .qr_pymnt_wrap .pick_list_wrap {padding-bottom:0 !important;}
.qr_pop_pay .qr_pymnt_wrap .data_none {padding:10px 0 16px !important;}
.qr_pop_pay .qr_pymnt_wrap .data_none .mn_copy {font-size:24px;}
.qr_pop_pay .qr_pymnt_wrap .data_none .mn_copy ~ .sb_copy {color:#444; line-height:24px;}
.qr_pop_pay .qr_pymnt_wrap .data_none img {margin:16px auto 0; width:53.94%;}

.qr_pymnt_wrap .pick_prd {margin-top:10px; padding-bottom:10px; padding:0 16px;}
.qr_pymnt_wrap .pick_prd .cp_wrap {padding:0 16px;}
.qr_pymnt_wrap .pick_prd .prd_li.horzn_style01 > ul > li:first-child {border-top:none;}
.qr_pymnt_wrap .pick_prd .prd_li.horzn_style01 > ul > li {border-bottom:0; padding:0;}
.qr_pymnt_wrap .pick_prd .prd_li.horzn_style01 > ul > li ~ li {margin-top:10px;}
.qr_pymnt_wrap .pick_prd .prd_li.horzn_style01 .prd_set {overflow:inherit; padding:0;}
.qr_pymnt_wrap .pick_prd .prd_li.horzn_style01 .prd_set .obj_wrap {align-items:flex-start; position:relative;}
.qr_pymnt_wrap .pick_prd .prd_li.horzn_style01 .prd_set .img_info_wrap .img {width:64px !important; height:64px !important; border-radius:12px !important;} /* issues/4297#note_131091 */
.qr_pymnt_wrap .pick_prd .box_shape > .cotn {overflow:inherit; padding:16px;}
.qr_pymnt_wrap .pick_prd .prd_set .tit {color:#666666; font-size:14px; font-weight:bold; margin-bottom:6px;}
.qr_pymnt_wrap .pick_prd .txt_wrap .date {font-size:13px;}
.qr_pymnt_wrap .pick_prd .txt_wrap .store_loc {color:#666666; font-size:13px; margin-top:4px;}
.qr_pymnt_wrap .pick_prd .obj_wrap .input_chk {right:0;}

/*  픽업 - 상품 비활성 */
.qr_pop_pay .qr_pymnt_wrap .pick_prd.disable .prd_set .tit,
.qr_pop_pay .qr_pymnt_wrap .pick_prd.disable .prd_set .name,
.qr_pop_pay .qr_pymnt_wrap .pick_prd.disable .txt_wrap .date,
.qr_pop_pay .qr_pymnt_wrap .pick_prd.disable .txt_wrap .store_loc {color:#dddddd;}
.qr_pop_pay .qr_pymnt_wrap .pick_prd.disable .img {opacity:0.4;}
.qr_pop_pay .qr_pymnt_wrap .pick_prd.disable .btn_tip .q_mark_16 {background-image:url(../images/common/icon_qmark_02.svg);}

/* 픽업 - 상품 및 쿠폰 선택 */
.qr_pop_pay .qr_pymnt_wrap .pick_prd {margin-top:0; padding:0;}
.qr_pop_pay .qr_pymnt_wrap .pick_prd .prd_li.horzn_style01 {overflow:visible;}
.qr_pop_pay .qr_pymnt_wrap .pick_prd .prd_set .box_shape {border-radius:16px;}
.qr_pop_pay .qr_pymnt_wrap .pick_prd .prd_set .box_shape > .cotn {border-radius:15px;}
.qr_pop_pay .qr_pymnt_wrap .pick_prd .prd_set .box_shape:before {background:linear-gradient(90deg, #50e2c4 10%, #895eee); content:""; left:0; border-radius:17px; position:absolute; left:0; top:0; opacity:0; height:0; width:100%;}
.qr_pop_pay .qr_pymnt_wrap .pick_prd .prd_set .box_shape:before {transition:height 0.5s, opacity 0.3s 0.1s;}
.qr_pop_pay .qr_pymnt_wrap .pick_prd .prd_set.on .box_shape:before {opacity:1; height:100%;} /* 선택:class="on" */

/* 픽업 - 툴팁 */
.qr_pop_pay .pick_prd .prd_set .btn_tip {vertical-align:-3px; margin-left:4px; height:16px; width:16px;}
.qr_pop_pay .pick_prd .prd_set .tooltip {margin-top:4px; top:40px; left:29px; width:73.6% !important;}
.qr_pop_pay .pick_prd .prd_set .tooltip p {color:#666666; font-size:14px;}

/* issues/4583 QR 결제 팝업 bottom sheet popup 기능관련 추가 작업 */
html.hidden {overflow: hidden; overscroll-behavior: none;}
body.hidden {overflow-y: hidden; min-height: 100vh;}
body.hidden.dim:before {z-index:1000;}
.transparent_dimd {position: fixed; top: 0; left: 0; z-index: 1000; width: 100%; height: 100%; opacity: 0.4; background: rgba(0,0,0,0);}

.bottom_sheet {display: flex; align-items: center; flex-direction: column; justify-content: flex-end; overflow: hidden; position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none;  opacity: 0; transition: 0.1s linear; z-index: 999; overscroll-behavior: contain;}
.bottom_sheet.show {display: block; opacity: 1; pointer-events: auto;}
.bottom_sheet .sheet_dimd {position: fixed; top: 0; left: 0; z-index: -1; width: 100%; height: 100%; opacity: 0.4; background: #000;}
.bottom_sheet .qr_pop_pay {display: block; bottom: 0; padding-bottom: 0; min-height: 0;}
.bottom_sheet .qr_pop_pay .draggable_area {display: flex; align-items: center; position: absolute; width: 100%; left: 0; top: 0; box-sizing: border-box; padding: 16px 10px; cursor: grab; user-select: none;}
.bottom_sheet .qr_pop_pay .draggable_area::before {content: ""; display: block; width: 40px; height: 4px; margin: 0 auto; background: #dddddd; border-radius: 50px;}