@charset "utf-8";

/* ********** Reset ********** */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,p,table,th,td,form,fieldset,legend,textarea,input,select,textarea,button,article,aside,dialog,footer,header,section,footer,nav,figure,main{margin:0;padding:0}
article,aside,dialog,header,section,footer,nav,figure,main{display:block}
html{font-size:14px}
html,body{height:100%;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;-webkit-overflow-scrolling:touch}
body{background:#fff;font-family:'Pretendard JP','Apple SD Gothic Neo','돋움',Dotum, sans-serif;-webkit-text-size-adjust:none;}
body,input,select,textarea,button{font-family:'Pretendard JP','Apple SD Gothic Neo','돋움',Dotum, sans-serif;font-size:1.4rem;color:var(--base)}
img,form,fieldset,svg{border:0;vertical-align:top}
ul,ol{list-style:none}
button{overflow:visible;border:0;outline:none;background-color:transparent;cursor:pointer;-webkit-apperance:none}
button:disabled, .disabled input, .disabled, .readonly, .readonly input, input:-moz-read-only, input:disabled{cursor:default}
button::-moz-focus-inner{padding:0;border:0}
address,caption,em{font-style:normal}
button,button:active,button:focus,button:hover,
a,a:active,a:focus,a:hover{color:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;-webkit-touch-callout:none}
table{table-layout:fixed;border-collapse:collapse;border-spacing:0}
input,select,textarea{border:0 none;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;-webkit-text-size-adjust:none;-webkit-box-sizing:border-box;box-sizing:border-box}
input[type="number"]::-webkit-outer-spin-button,input[type="number"]::-webkit-inner-spin-button{border:0 none;-webkit-appearance:none;-moz-appearance:none;appearance:none;-webkit-text-size-adjust:none;border-radius:0;-webkit-box-sizing:border-box;box-sizing:border-box}
input[type=radio],input[type=checkbox]{overflow:hidden;position:absolute;top:0;left:0;width:0;height:0;font-size:0;color:transparent;text-indent:-9999px}
input:focus{outline:none}
input::-ms-clear,input::-ms-reveal,input::-ms-check{display:none}
label{-webkit-tap-highlight-color:transparent}
img{display:block;width:100%;height:100%;-o-object-fit:cover;object-fit:cover}
input:-webkit-autofill{-webkit-box-shadow:0 0 0 1000px rgba(255,255,255,0.8) inset;box-shadow:0 0 0px 1000px transparent inset;-webkit-transition:background-color 5000s ease-in-out 0s;transition:background-color 5000s ease-in-out 0s;-webkit-text-fill-color:var(--base)}
::-webkit-contacts-auto-fill-button, ::-webkit-credentials-auto-fill-button{visibility:hidden;position:absolute;right:0;pointer-events:none}

/* color variables */
:root{
    --primary:#0DD6DD;
    --base:#272727;
    --point:#FF2233;
    --gray:#F4F6FA;
    --gray2:#E3E6F0;
    --gray3:#F0F2F7;
    --gray4:#E7EAF2;
    --gray5:#ECEEF4;
}

/* icons */
.ico_price_next{display:inline-block;-ms-flex:0 0 24px;flex:0 0 24px;width:24px;height:24px;-webkit-box-flex:0}
.ico_security{display:inline-block;position:relative;z-index:1;width:22px;height:22px;vertical-align:middle}
.ico_trashcan{display:inline-block;width:20px;height:20px;background-image:url("data:image/svg+xml,%3Csvg width='21' height='21' viewBox='0 0 21 21' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.00004 3H13M3.83337 5.5H5.50004M17.1667 5.5H15.5M5.50004 5.5V16.75C5.50004 17.4404 6.05968 18 6.75004 18H14.25C14.9404 18 15.5 17.4404 15.5 16.75V5.5M5.50004 5.5H15.5' stroke='white' style='stroke:white;stroke-opacity:1;' stroke-width='1.25'/%3E%3Cpath d='M8.83337 8V15.5' stroke='white' style='stroke:white;stroke-opacity:1;' stroke-width='1.25'/%3E%3Cpath d='M12.1666 15.5V8' stroke='white' style='stroke:white;stroke-opacity:1;' stroke-width='1.25'/%3E%3C/svg%3E%0A");background-repeat:no-repeat;background-position:center;background-size:contain;vertical-align:bottom}
.ico_magnetic{display:inline-block;width:48px;height:38px;background:url(../img/img_card_magnetic.png) no-repeat center/100% 100%}
.ico_check{background:url(../img/ico_check16x16@2x.png) no-repeat center/16px 16px}
.ico_complete_check{display:inline-block;position:absolute;top:50%;left:50%;z-index:1;width:32px;height:32px;background-size:32px 32px;transform:translate(-50%, -50%);content:''}
.ico_mail{display:inline-block;flex:0 0 20px;width:20px;height:20px;background:url(../img/ico_mail@2x.png) no-repeat center/100% 100%;vertical-align:middle}
.ico_next{display:inline-block;width:20px;height:20px;background:url(../img/ico_next20x20@2x.png) no-repeat center/100% 100%;vertical-align:middle}
.ico_dot{display:inline-block;width:6px;height:6px;margin-top:3px;margin-left:7px;background:var(--point);border-radius:99px;vertical-align:top}
.ico_status{display:block;position:relative;width:60px;height:60px;margin:40px auto;border-radius:50%}
.ico_status::after{display:inline-block;position:absolute;top:50%;left:50%;width:32px;height:32px;background-repeat:no-repeat;background-position:center;background-size:cover;transform:translate(-50%, -50%);content:''}
.ico_status.error{background:rgba(255, 34, 51, 0.07)}
.ico_status.error::after{background-image:url(../img/ico_error.svg)}
.ico_status.warning{background:#F4F6FA}
.ico_status.warning::after{background-image:url(../img/ico_exclamation.svg)}

/* common */
.blind,legend,caption{overflow:hidden;position:absolute;top:0;left:0;width:1px;height:1px;font-size:1px;line-height:100px;white-space:nowrap}
.txt_error{color:var(--point)}
.em{font-weight:700}
.loading_spinner_box{position:fixed;top:50%;left:50%;z-index:110;width:56px;width:60px;height:56px;height:60px;-webkit-transform:translate(-50%, -50%);-ms-transform:translate(-50%, -50%);transform:translate(-50%, -50%);border-radius:50%}
.loading_spinner{position:absolute;top:50%;left:50%;width:40px;height:40px;transform:translate(-50%, -50%)}
.scroll_lock{overflow:hidden}

/* layout */
.wrap,.wrap_popup,.wrap_card_info,.wrap_password,.wrap_status,.wrap_order_detail,.wrap_sub{display:flex;flex-direction:column;min-width:320px;min-height:100%;margin: 0 auto}
.wrap .header{padding-top:60px}
.wrap_main{padding-bottom:190px}
.wrap_main .header{padding-top:40px}
.wrap_main .main{flex:1}
.wrap_main.has_bottom_gap{padding-bottom:340px}
.wrap_popup .popup_inner{position:relative}
.wrap_popup .header{padding-top:60px}
.wrap_popup .popup_main{padding-right:16px;padding-left:16px}
.wrap_popup .bottom_area{padding-bottom:16px}
.wrap_card_info .popup_main{padding-bottom:140px}
.wrap_password .popup_main{display:flex;flex-direction:column;padding-right:18px;padding-left:18px}
.wrap_password .bottom_area{padding-top:60px}
.wrap_sub .header,.wrap_status .header{padding-top:60px}
.wrap_status .status_desc{margin-bottom:24px;padding:0 16px;font-size:12px;line-height:18px;color:#808080;text-align:center}
.wrap_status .main .status_desc{max-width:343px;margin:0 auto 24px auto}
.wrap_status .bottom_area{padding-top:16px}
.wrap_order_detail .main{padding-bottom:120px}
.wrap_order_detail .popup_inner{position:relative}
.wrap_order_detail .header{padding-top:0}
.wrap_order_detail .popup_title{padding-top:60px;font-size:22px;line-height:26px;color:var(--base);text-align:center}
.wrap_order_detail .popup_main{padding-right:16px;padding-left:16px}
.wrap_order_detail .bottom_area{padding-bottom:16px}
.wrap_sub .wrap_inner{position:relative}
.wrap_sub .header .title{padding-top:20px}
.wrap_sub .main{padding:0 16px}

/* common scrollbar */
.scrollbar-inner > .scroll-element.scroll-y{top:0;right:14px;bottom:8px;height:auto}
.scrollbar-inner>.scroll-element .scroll-element_track{background-color:transparent}
.scrollbar-inner > .scroll-element .scroll-bar{width:8px}

/* input */
.input_area{position:relative;padding-top:28px;font-size:0}
.input_area.has_linebreak{margin-top:28px;border-top:1px solid #F4F6FA;}
.input_heading{display:block;padding:0 2px;font-size:16px;font-weight:700;color:var(--base)}
.input_heading:first-of-type{margin:36px 0 16px}
.input_heading + .input_area{padding-top:0}
.input_area .input_title{padding-left:2px;font-size:13px;font-weight:500;line-height:16px;color:var(--base);text-align:left}
.input_area .input_box{margin-top:10px;-webkit-box-sizing:border-box;box-sizing:border-box}
.input_area .input_box_embed{position:relative;width:100%;height:44px;margin-top:10px;padding:1px 15px;border:1px solid;border-color:var(--gray4);border-radius:8px;box-sizing:border-box}
.input_area .input{z-index:2}
.input_area .input_guide{margin-top:12px;padding:0 2px;font-size:11px;font-weight:400;line-height:16px;color:#808080}
.input_area .input_guide .link_input_guide{font-size:11px;line-height:18px;color:var(--base);text-decoration:underline}
.input_field_flex{display:-webkit-box;display:-ms-flexbox;display:flex;justify-content:flex-start;align-items:center;white-space:nowrap;-webkit-box-pack:start;-ms-flex-pack:start;-webkit-box-align:center;-ms-flex-align:center}
.input_field_flex .input_flex_inner{width:100%;margin-left:6px}
.input_field_flex .input_flex_inner:first-of-type{margin-left:0}
.input_cvv .input_field_flex .input_box,
.input_cvv .input_field_flex .input_box_embed{-ms-flex:0 0 calc(25% - 4.5px);flex:0 0 calc(25% - 4.5px);width:25%;-webkit-box-flex:0}
.input_area.input_field_flex .select_wrap{width:100%}
.input_radio .input_box{padding:8px 0 8px 1px}
.input_radio .input_box + .input_box{margin-left:8px}
.input_radio .input_box{-ms-flex:0 0 80px;flex:0 0 80px;margin-top:8px;-webkit-box-flex:0}
.input_box{position:relative}
.input_box .ico{display:inline-block;position:absolute;top:0;left:0;border:1px solid;border-color:#DCDFEB;background:#fff;-webkit-box-sizing:border-box;box-sizing:border-box}
.input_box .ico_check{width:22px;height:22px;border-radius:5px}
.input_box .ico_radio{width:22px;height:22px;border-radius:12px}
.input[type="checkbox"]:checked + .txt_label .ico_check::after{position:absolute;top:50%;left:50%;width:16px;height:16px;background:url(../img/ico_check16x16@2x.png) no-repeat center/100% 100%;-webkit-transform:translate(-50%, -50%);-ms-transform:translate(-50%, -50%);transform:translate(-50%, -50%);content:''}
.input[type="radio"]:checked + .txt_label .ico_radio::after{position:absolute;top:50%;left:50%;width:10px;height:10px;-webkit-transform:translate(-50%, -50%);-ms-transform:translate(-50%, -50%);transform:translate(-50%, -50%);content:'';border-radius:12px}
.input_box .txt_label{display:inline-block;position:relative;padding-top:3px;padding-bottom:4px;padding-left:32px;font-size:13px;font-weight:700;line-height:17px;color:var(--base);cursor:pointer;vertical-align:top}
.input_box .input:disabled + .txt_label{cursor:default}
.input_box .input:disabled + .txt_label .ico{border-color:var(--gray5);background:var(--gray);cursor:default}
.input_box .txt_unit{position:absolute;top:50%;right:50%;z-index:2;margin-right:-25px;padding-left:4px;font-size:14px;font-weight:700;line-height:17px;color:var(--base);transform:translate(-50%, -50%);pointer-events:none}
.input_box.is-complete .input[type="text"],
.input_box.is-complete .input[type="number"],
.input_box_embed.is-complete{border-color:var(--gray4);background:#fff}
.input_box.is-invalid .input[type="text"],
.input_box.is-invalid .input[type="number"],
.input_box_embed.is-invalid{border-color:var(--point) !important;background:#fff !important;color:var(--point)}
.input[type="text"],
.input[type="number"],
.modify_input_box .modify_input{position:relative;width:100%;height:44px;padding:1px 15px;border:1px solid;border-color:var(--gray4);background:#fff;font-size:14px;font-weight:700;color:var(--base);text-align:center;vertical-align:middle;border-radius:8px}
.input.type_left{text-align:left}
.input[type="text"]::placeholder,
.input[type="number"]::placeholder{color:rgba(39, 39, 39, 0.3)}
.input[type="text"]:focus,
.input[type="number"]:focus{background:#fff}
@media (hover: hover) and (pointer: fine) {
    .input_box .txt_label:hover .ico{border-color:#ABB2CB}
}

/* btn */
.btn{position:relative;width:50%;padding:17px 0;background:var(--gray3);font-size:0;text-align:center}
.btn .txt{display:block;font-size:15px;font-weight:500;line-height:18px}
.btn.is-press{background:var(--gray2)}
.btn:disabled{background:var(--gray);cursor:default;pointer-events:none}
.btn_point::after{visibility:hidden;position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.1);opacity:0;content:'';pointer-events:none}
.btn_point.is-press::after{display:block;visibility:visible;opacity:1;-webkit-transition:opacity 0.1s ease, visibility 0.1s ease;-o-transition:opacity 0.1s ease, visibility 0.1s ease;transition:opacity 0.1s ease, visibility 0.1s ease}
.btn_point:disabled{background:var(--gray)}
.btn_point:disabled .txt{color:var(--base);opacity:0.2}
.btn_point .txt{position:relative;z-index:1}
.btn_variant{display:block;position:relative;padding:12px 10px 12px 16px;background:#fff;font-size:0;border-radius:8px}
.btn_variant .txt{font-size:14px;font-weight:400;line-height:20px;color:var(--base);text-align:left;vertical-align:middle}
.txt_email{display:flex;flex-wrap:nowrap;align-items:center;max-width:100%;padding-right:30px}
.btn_variant .email_name{display:inline-block;flex-grow:0;flex-shrink:1;overflow:hidden;max-width:100%;white-space:nowrap;text-overflow:ellipsis;vertical-align:top}
.btn_variant .email_domain{flex-shrink:0;white-space:nowrap;}
.btn_variant .ico_mail{margin-right:10px}
.btn_variant .ico_next{position:absolute;top:50%;right:9px;margin-left:10px;transform:translateY(-50%)}
.btn_layer{position:relative;min-width:68px;padding:15px 20px 14px 20px;font-size:14px;font-weight:400;line-height:17px;border-radius:10px}
.btn_layer:focus::after,
.btn_layer:active::after,
.btn_layer.is-press::after{border-radius:10px}
.btn_layer:disabled{cursor:default;pointer-events:none}
.btn_manage{position:relative;min-width:98px;;border:1px solid;border-radius:10px;vertical-align:middle;-webkit-box-sizing:border-box;box-sizing:border-box}
.btn_manage .txt{display:block;position:relative;z-index:1;font-size:14px;font-weight:400;line-height:17px;color:#fff}
.btn_cancel{padding:13px 15px 12px 15px;border-color:var(--base);background:var(--base)}
.btn_cancel.is-press{background:#000}
.btn_delete{margin-left:6px;padding:8px 18px 10px 18px;border-color:#fff;background:var(--point)}
.btn_delete.is-press:after{display:block;position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.1);content:'';border-radius:10px}
.btn_delete .txt{display:inline-block;margin:0 6px}
@media (hover: hover) and (pointer: fine) {
    .btn:hover{background:var(--gray2);-webkit-transition:all .1s ease;;-o-transition:all .1s ease;transition:all .1s ease}
    .btn_point:hover::after{display:block;visibility:visible;opacity:1;transition:opacity 0.2s ease, visibility 0.2s ease}
    .btn_layer:hover::after{border-radius:10px}
    .btn_manage:hover{transition:all .1s ease}
    .btn_cancel:hover{background:#000}
    .btn_delete:hover::after{display:block;position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.1);content:'';border-radius:10px}
}

/* select */
.select_wrap{position:relative;margin-top:8px;border:1px solid var(--gray4);border-radius:8px;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
.select_wrap.is-selecting{border-bottom-color:transparent;border-radius:8px 8px 0 0}
.select_wrap.is-selecting .select_inner{display:block}
.select_wrap.is-selecting .selected_cur:after{transform:translateY(-50%) rotate(180deg)}
.select_wrap.is-disabled{color:rgba(39, 39, 39, 0.3);pointer-events:none}
.select_wrap .scroll-wrapper{border-top:0}
.select_wrap.is-disabled .selected_cur:after{border-top:6px solid rgba(39, 39, 39, 0.3)}
.selected_cur,.select_item{font-size:14px;font-weight:400;line-height:17px;cursor:pointer;box-sizing:border-box}
.selected_cur{display:block;position:relative;padding:13px 40px 13px 16px;font-weight:700;user-select:none}
.selected_cur:after{position:absolute;top:50%;right:13px;width:0;height:0;border-top:6px solid #000;border-right:5px solid transparent;border-left:5px solid transparent;transform:translateY(-50%);content:''}
.select_inner{display:none;overflow:auto;position:absolute;left:-1px;z-index:10;width:100%;max-height:220px;border:1px solid;border-top:0;border-top-color:transparent;background-color:#fff;border-radius: 0 0 8px 8px}
.select_item{padding:14px 40px 13px 16px}
.select_item.is-press{background:var(--gray5)}
@media (hover: hover) and (pointer: fine) {
    .select_item:hover{background:var(--gray5)}
}

/* badge */
.badge{display:-webkit-box;display:-ms-flexbox;display:flex;justify-content:center;align-items:center;position:absolute;z-index:2;width:auto;padding:3px 3px 2px;border:1px solid;pointer-events:none;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-box-align:center;-ms-flex-align:center;border-radius:5px}
.badge .txt_badge{font-size:9px;font-weight:700;line-height:9px;text-align:center}

/* header */
.header{padding:0 16px}
.header .title{font-size:23px;font-weight:700;line-height:27px;color:var(--base)}
.header .title_type2{font-size:22px;font-weight:700;line-height:26px;color:var(--base);text-align:center}
.header .title_type3{font-size:18px;font-weight:700;line-height:26px;color:var(--base);text-align:center}
.header .title_sub{padding-top:20px;font-size:12px;line-height:18px;color:#808080;text-align:center}
.header .title_sub.type2{color:#272727}
.header .popup_title{font-size:22px;line-height:26px;color:var(--base);text-align:center}

/* section */
.section{position:relative;padding-right:16px;padding-left:16px}
.section .section_title{padding-top:36px;padding-right:2px;padding-left:2px;font-size:16px;font-weight:700;line-height:19px;color:var(--base)}
.section .section_subtitle{padding-top:36px;padding-right:2px;padding-left:2px;font-size:13px;font-weight:500;line-height:16px;color:var(--base)}
.section.type_divider:before{display:block;width:100%;height:1px;margin-top:32px;background:var(--gray3);content:''}
.section_price_info{padding-bottom:6px}
.section_register_info{padding-top:24px}
.section_agreement .info_list .info_item{color:#808080}
.section_agreement .info_list .info_item:only-child{padding-bottom:24px}
.section_agreement .input_box .txt_label{padding-left:36px;font-weight:400;line-height:18px}

/* card logo */
.card_logo{display:block;width:60px;height:40px;background-repeat:no-repeat;background-size:contain}
.card_logo.visa{background-image:url('../img/registeredPaymentMethod/VISA.png')}
.card_logo.amex{background-image:url('../img/registeredPaymentMethod/AMEX.png')}
.card_logo.diners{background-image:url('../img/registeredPaymentMethod/DINERS.png')}
.card_logo.master{background-image:url('../img/registeredPaymentMethod/MASTER.png')}
.card_logo.jcb{background-image:url('../img/registeredPaymentMethod/JCB.png')}

/* price_info_area */
.price_info_area{position:relative;margin-top:24px}
.price_info_area::before{position:absolute;top:0;left:0;width:100%;height:100%;border:1px solid;content:'';border-radius:10px;-webkit-box-sizing:border-box;box-sizing:border-box}
.price_info_area .ico_primary_next{-ms-flex:0 0 24px;flex:0 0 24px;-webkit-box-flex:0}
.price_info_area .price_info_top{position:relative;padding:18px 28px 16px;border-bottom:1px solid;border-radius:10px 10px 0 0}
.price_info_area .txt_note{position:relative;z-index:1;font-size:13px;font-weight:500;line-height:19px;color:var(--base);text-align:center;word-break:break-all}
.price_info_area .price_info_bottom{position:relative;padding:16px 0;text-align:center;border-radius:10px}
.price_list{display:-webkit-box;display:-ms-flexbox;display:flex;justify-content:center;align-items:center;width:100%;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-box-align:center;-ms-flex-align:center}
.price_item{position:relative;width:50%}
.price_item:only-child{width:100%}
.price_item .item_name{padding:0 10px;font-size:11px;font-weight:400;line-height:14px;color:var(--base);word-break:break-all}
.price_item .item_price{position:relative;margin-top:2px;padding:0 10px;font-size:19px;font-weight:700;line-height:24px;color:var(--base);word-break:break-word}
.price_item .badge{bottom:-21px;left:50%;-webkit-transform:translateX(-50%);-ms-transform:translateX(-50%);transform:translateX(-50%)}

/* info_list */
.info_list{margin-top:14px}
.info_list .info_item{position:relative;padding-left:18px;font-size:12px;font-weight:400;line-height:18px;color:var(--base)}
.info_list .info_item:before{display:inline-block;position:absolute;top:8px;left:8px;width:2px;height:2px;background:#000;content:'';border-radius:50%}
.info_list .info_item + .info_item{margin-top:4px}

/* method_list */
.method_list{display:-webkit-box;display:-ms-flexbox;display:flex;gap:5px;-ms-flex-wrap:wrap;flex-wrap:wrap;justify-content:flex-start;align-items:flex-start;width:100%;margin-top:14px;font-size:0;-webkit-box-pack:start;-ms-flex-pack:start;-webkit-box-align:start;-ms-flex-align:start}
.method_list .method_item{flex: 0 0 calc(50% - 2.5px);position:relative;width:50%;height:52px;font-size:15px;font-weight:400;line-height:15px;border-radius:10px;-webkit-box-sizing:border-box;box-sizing:border-box}
.method_list .method_item::after{visibility:hidden;position:absolute;top:0;left:0;width:100%;height:100%;opacity:0;content:'';pointer-events:none}
.method_list .method_item.is-active.is-press::after{display:block;visibility:visible;background:rgba(0,0,0,0.1);opacity:1;transition:opacity 0.1s ease, visibility 0.1s ease;border-radius:10px}
.method_list .method_item:not(.is-active).is-press{background:var(--gray2)}
.method_list .method_item .link{display:inline-flex;justify-content:flex-start;align-items:center;width:100%;height:100%;min-height:52px;padding-left:6px;box-sizing:border-box}
.method_list .method_item .img_logo{display:inline-block;flex:0 0 24px;position:relative;z-index:2;width:24px;height:24px;padding-left:10px}
.method_list .method_item .txt{overflow:hidden;position:relative;z-index:1;padding-right:10px;padding-left:10px;font-size:14px;font-weight:400;line-height:17px;color:var(--base);word-wrap:break-word;-webkit-box-sizing:content-box;box-sizing:content-box}
.method_list .method_item .txt.type_s{font-size:12px}
.method_list .badge{top:-4px;left:-2px}
@media (hover: hover) and (pointer: fine) {
    .method_list .method_item.is-active:hover:after{display:block;visibility:visible;background:rgba(0,0,0,0.1);opacity:1;transition:opacity 0.1s ease, visibility 0.1s ease;border-radius:10px}
    .method_list .method_item:not(.is-active):hover{background:var(--gray2);transition:all .1s ease}
}

/* pay_promotion_cont */
.pay_promotion_area{margin-top:12px}
.pay_promotion_area .ico_arrow_down{display:inline-block;width:24px;height:24px;margin-bottom:12px}
.pay_promotion_area .pay_promotion_inner{padding:20px 12px;background:var(--gray);border-radius:12px}
.pay_promotion_area .promotion_banner{overflow:hidden;position:relative;width:100%;border-radius:8px}
.pay_promotion_area .sub_title{font-size:15px;font-weight:500}
.pay_promotion_area .sub_title .method{display:block;margin-bottom:5px;font-size:12px;font-weight:400;color:var(--base)}
.pay_promotion_box{font-size:0;text-align:center}
.pay_promotion_box .link_banner{margin-top:14px}

/* pay_promotion_cont - banner */
.link_banner{display:block;min-width:264px;max-width:319px;height:100%;margin:0 auto;border-radius:8px}
.link_banner .banner_desc{padding-left:20px}
.link_banner .banner_desc .txt{font-size:15px;font-weight:400;line-height:18px;color:#fff;text-align:left}
.link_banner .banner_desc .txt + .txt{margin-top:4px}
.link_banner .img_cont{width:100px;height:auto}

/* banner - desc list */
.desc_list{margin-top:14px;font-size:0}
.desc_item{font-size:12px;line-height:18px}
.desc_item + .desc_item{margin-top:4px}

/* register_info_box */
.register_info_box{padding:19px 20px 15px 20px;border:1px solid;border-radius:10px 10px 0 0}
.register_info_box .ico_check{display:inline-block;-ms-flex:0 0 24px;flex:0 0 24px;position:relative;z-index:1;width:24px;height:24px;-webkit-box-flex:0;border-radius:50%}
.register_info_box .ico_check::before{display:inline-block;position:absolute;top:4px;right:4px;width:16px;height:16px;background:url(../img/ico_check16x16@2x.png) no-repeat center/100% 100%;content:''}
.register_list{font-size:0}
.register_list .register_item + .register_item{margin-top:3px}
.register_item .txt_card_num{margin-top:6px;font-size:12px;font-weight:700;;line-height:14px;color:var(--base);text-align:center}
.register_info_box .btn_variant{margin-top:16px}
.register_info_inner{display:flex;justify-content:start;align-items:center}
.register_info_inner .link_register{padding:0 11px}

/* installment_select_box */
.installment_select_box{padding:20px;border:1px solid;border-top:0;border-radius:0 0 10px 10px;}
.installment_select_box .title{padding-left:4px;font-size:13px;font-weight:700;line-height:18px}

/* guide_list */
.guide_list{margin:8px 0}
.guide_list .guide_item{position:relative;padding-left:18px;font-size:12px;font-weight:400;line-height:18px;color:#808080}
.guide_list .guide_item + .guide_item{margin-top:4px}
.guide_list .guide_item::before{display:inline-block;position:absolute;top:7px;left:7px;width:2px;height:2px;background:#000;content:'';border-radius:50%}
.guide_list .link{font-weight:700;text-decoration:underline;text-decoration-thickness:1px}

/* agreement_wrap */
.agreement_wrap{display:-webkit-box;display:-ms-flexbox;display:flex;justify-content:space-between;align-items:center;padding:20px 4px 20px 2px;-webkit-box-pack:justify;-ms-flex-pack:justify;-webkit-box-align:center;-ms-flex-align:center}
.agreement_wrap .txt_label{font-weight:400}
.agreement_wrap .link_box{line-height:1}
.agreement_wrap .link_more{font-size:13px;line-height:24px;text-decoration:underline}

/* bottom_area */
.bottom_area{min-height:52px;padding-top:56px;padding-right:16px;padding-bottom:calc(env(safe-area-inset-bottom) + 16px);padding-left:16px}
.bottom_area.type_limit{padding-right:16px;padding-left:16px}
.bottom_area.type_fixed{position:fixed;bottom:0;left:0;z-index:15;width:100%;padding:0 16px 16px;background:#fff;box-sizing:border-box}
.bottom_area.type_limit .btn_wrap{max-width:343px;margin:0 auto}
.btn_wrap{display:-webkit-box;display:-ms-flexbox;display:flex;align-items:center;overflow:hidden;font-size:0;-webkit-box-align:center;-ms-flex-align:center;border-radius:10px}
.btn_wrap.type_full .btn{width:100%}
.wrap_popup .bottom_area.type_limit{padding-right:18px;padding-left:18px}
.wrap_popup .bottom_area.type_limit .btn_wrap{max-width:339px}

/* order_detail */
.order_detail_box{margin-top:14px}
.order_detail_list{margin:0 auto;padding:22px 20px;background:var(--gray);border-radius:12px;-webkit-box-sizing:border-box;box-sizing:border-box}
.order_detail_list .order_detail_item{display:-webkit-box;display:-ms-flexbox;display:flex;justify-content:start;-webkit-box-pack:start;-ms-flex-pack:start}
.order_detail_list .order_detail_item + .order_detail_item{margin-top:16px}
.order_detail_list .label{flex-shrink:0;width:100px;font-size:13px;font-weight:400;line-height:16px;-ms-flex-negative:0;box-sizing:border-box}
.order_detail_list .value{font-size:13px;font-weight:400;line-height:16px;word-break:break-all}
.wrap_status .order_detail_box{margin-top:0;padding:0 16px}
.wrap_status .order_detail_list{max-width:343px}
.wrap_status .order_detail_list .label{width:72px}
.wrap_status .ico_status:has(.ico_complete_check){margin:40px auto 54px}

/* guide_detail_box */
.guide_detail_box{margin:14px 2px 0;padding:16px;border:1px solid var(--gray4);background:#fff;border-radius:12px;box-sizing:border-box}
.guide_detail_box .txt_guide{font-size:11px;font-weight:400;line-height:18px;color:#808080}
.guide_detail_box .link_guide{font-size:11px;line-height:18px;color:var(--base);text-decoration:underline;word-break:break-all}
.guide_detail_box ~ .agreement_wrap .txt_label{padding-left:36px}

/* dimmed */
.dimmed{position:fixed;top:0;right:0;bottom:0;left:0;z-index:20;width:100%;height:100%;background:rgba(0, 0, 0, 0.7)}

/* layer_wrap */
.layer_wrap{position:fixed;top:50%;left:50%;z-index:120;width:100%;-webkit-box-shadow: 0px 15px 30px 0px rgba(17, 17, 17, 0.15);box-shadow: 0px 15px 30px 0px rgba(17, 17, 17, 0.15);background:#fff;-webkit-transform:translate(-50%, -50%);-ms-transform:translate(-50%, -50%);transform:translate(-50%, -50%);border-radius:16px;-webkit-box-sizing:border-box;box-sizing:border-box}
.layer_wrap .layer_title{font-size:22px;font-weight:700;line-height:26px;text-align:center}
.layer_wrap .layer_sub{padding-top:32px;font-size:16px;font-weight:500;line-height:19px;color:var(--base);text-align:center}
.ly_btn_wrap{padding-top:40px;text-align:right}

/* layer - 내 카드 관리 */
.ly_card_management{max-width:359px;padding:60px 16px 40px}
.card_management_inner .txt_guide{margin-top:16px;font-size:12px;font-weight:400;line-height:18px;color:#808080;text-align:center}
.card_management_inner .link_manage{font-size:12px;line-height:18px;color:red;text-decoration:underline}
.card_management_inner.is-active .management_dialog{display:-webkit-box;display:-ms-flexbox;display:flex;justify-content:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-box-align:center;-ms-flex-align:center}
.card_management_inner.is-active .link_manage{color:#808080;text-decoration:none;pointer-events:none}
.detail_card_box{position:relative;margin:24px auto 0;padding-bottom:20px;background:var(--gray3);font-size:0;border-radius:12px}
.detail_card_box .card_name{padding:20px 20px 0;font-size:16px;font-weight:400;line-height:19px;color:var(--base)}
.detail_card_box .ico_magnetic{margin:35px 0 0 20px}
.card_detail_list{display:-webkit-box;display:-ms-flexbox;display:flex;justify-content:space-between;align-items:center;margin-top:35px;padding:0 20px;-webkit-box-pack:justify;-ms-flex-pack:justify;-webkit-box-align:center;-ms-flex-align:center;-webkit-box-sizing:border-box;box-sizing:border-box}
.card_detail_list .card_num_box{font-size:0}
.card_detail_list .masking_num::after{display:inline-block;margin-left:10px;font-size:12px;font-weight:400;line-height:20px;content:'●●●●'}
.card_detail_list .masking_num:first-child:after{margin-left:0}
.card_detail_list .card_num_last{margin-left:10px;font-size:16px;font-weight:700;line-height:20px;color:var(--primary_active);vertical-align:bottom}
.card_detail_list .card_logo{display:inline-block;vertical-align:top}
.management_dialog{display:none;position:absolute;top:0;left:0;z-index:1;width:100%;height:100%;border:1px solid var(--point);background:rgba(255, 34, 51, 0.8);border-radius:12px;-webkit-box-sizing:border-box;box-sizing:border-box}
.management_dialog .btn_area{display:block;position:absolute;top:50%;left:50%;font-size:0;white-space:nowrap;-webkit-transform:translate(-50%, -50%);-ms-transform:translate(-50%, -50%);transform:translate(-50%, -50%)}
.management_dialog .ico_trashcan{position:relative;z-index:1}

.modify_input_box{display:flex;justify-content:space-between;align-items:center;margin-top:16px}
.modify_input_box .modify_input{padding-left:46px;font-weight:400;line-height:18px;color:var(--base);text-align:left}
.modify_input_box .modify_input::placeholder{color:rgba(39, 39, 39, 0.3)}
.modify_input_box .btn_modify:after{visibility:hidden;position:absolute;top:0;left:0;z-index:1;width:100%;height:100%;background:rgba(0, 0, 0, 0.1);opacity:0;content:'';pointer-events:none;border-radius:8px}
.modify_input_box.is-disabled .modify_input{border-color:var(--gray4);background:var(--gray);color:var(--base);pointer-events:none}
.modify_input_box.is-disabled .btn_modify.is-press{background:var(--gray2)}
.modify_input_box.is-disabled .btn_modify .txt{color:var(--base)}
.modify_input_box.is-invalid .modify_input{border-color:var(--point)}
.modify_input_box.typing .btn_modify .txt{color:#fff}
.modify_input_box.typing .btn_modify.is-press:after{visibility:visible;opacity:1;transition:opacity .1s ease, visibility .1s ease}
.modify_email{position:relative;width:100%}
.modify_email .ico_mail{position:absolute;top:50%;left:16px;z-index:1;transform:translateY(-50%)}
.btn_modify{flex-shrink:0;position:relative;margin-left:5px;padding:13px 14px;background:var(--gray3);font-size:0;border-radius:10px}
.btn_modify .txt{position:relative;z-index:2;font-size:14px;font-weight:400;line-height:18px;color:rgba(39, 39, 39, 0.3);letter-spacing:.9px}
@media (hover: hover) and (pointer: fine) {
    .modify_input_box.is-disabled .btn_modify:hover{background:var(--gray2)}
    .modify_input_box.typing .btn_modify:hover:after{visibility:visible;opacity:1;transition:opacity .1s ease, visibility .1s ease}
}

/* loading_area */
.loading_area{position:fixed;top:0;left:0;z-index:100;width:100%;height:100%;background:rgba(255, 255, 255, 0.8)}


/* 팝업 - 카드 정보 입력 */
.input_birth .input_box .input{padding-right:33px;padding-left:15px}
.input_birth .card_logo{margin-top:10px;margin-right:10px;margin-left:auto}
.input_cvv .img_guide{display:block;flex:0 0 214px;width:214px;height:44px;margin:10px 0 0 27px}
.input_radio .input_guide{margin-top:14px;line-height:18px}
.input_installment .select_wrap{width:calc(50% - 3px);margin-top:10px}
.input_user_email{margin-top:28px;border-top:1px solid var(--gray)}

/* 팝업 - 비밀번호 입력 */
.password_dot_wrap{display:flex;justify-content:center;align-items:center;padding-top:60px;padding-bottom:60px;font-size:0}
.password_dot_wrap .password_dot{display:inline-block;width:22px;height:22px;background:var(--gray2);transition:background-color 0.5s ease;border-radius:12px}
.password_dot_wrap .password_dot + .password_dot{margin-left:16px}
.password_dot_wrap .password_dot.on,
.password_dot_wrap .password_dot.error{transition:none}
.password_dot_wrap .password_dot.on.error{background:var(--point)}
.password_dot.reset_ani:nth-child(1){transition-delay:0s}
.password_dot.reset_ani:nth-child(2){transition-delay:0.1s}
.password_dot.reset_ani:nth-child(3){transition-delay:0.2s}
.password_dot.reset_ani:nth-child(4){transition-delay:0.3s}
.password_dot.reset_ani:nth-child(5){transition-delay:0.4s}
.password_dot.reset_ani:nth-child(6){transition-delay:0.5s}
.error_message{position:absolute;top:50%;left:50%;padding-top:12px;transform:translateX(-50%)}
.error_message .txt_error{font-size:12px;font-weight:400;line-height:18px;text-align:center}
.alert_box{position:relative;width:100%;min-width:284px;max-width:339px;;margin-right:auto;margin-left:auto;padding:9px;border:0;font-size:0;text-align:center;border-radius:10px;box-sizing:border-box}
.alert_box .txt_alert{display:inline-block;position:relative;z-index:1;margin:0 4px 0 8px;font-size:12px;font-weight:400;vertical-align:middle}
.key_area{width:272px;margin:0 auto;padding-top:40px;font-size:0}
.key_area .key_list{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-start;text-align:center}
.key_area .btn_key{display:inline-block;position:relative;width:62px;height:62px;background-color:var(--gray);transition:background-color 0.5s ease;border-radius:50%}
.key_area .btn_key.is-press{background:var(--gray2)}
.key_area .key_item.is-active .btn_key{transition:none}
.key_area .btn_key img{display:block;width:24px;height:24px;margin:0 auto;pointer-events:none}
.key_area .btn_key.empty{background:transparent;pointer-events:none}
.key_area .btn_key .txt_num{font-size:20px;font-weight:500;line-height:24px;}
.key_area .btn_del:after{position:absolute;top:50%;left:50%;width:24px;height:24px;background:url(../img/ico_key_del.png) no-repeat center/100% 100%;transform:translate(-50%, -50%);content:''}
@media (hover: hover) and (pointer: fine) {
    .btn_key:hover{background:var(--gray2)}
}

/* 패스워드 키보드 */
.PW_K{display:inline-block;width:70px;height:70px;background-size:280px 210px;pointer-events:none;vertical-align:middle;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}
.I_0{background-position:-4px -4px}
.I_1{background-position:-74px -4px}
.I_2{background-position:-144px -4px}
.I_3{background-position:-214px -4px}
.I_4{background-position:-4px -74px}
.I_5{background-position:-74px -74px}
.I_6{background-position:-144px -74px}
.I_7{background-position:-214px -74px}
.I_8{background-position:-4px -144px}
.I_9{background-position:-74px -144px}
.I_10{background-position: -164px -164px}

/* 해상도 대응 */
/* 320px ~ 359px */
@media screen and (max-width:359px){
    /* ly_card_management */
    .ly_card_management{width:304px}
    .detail_card_box .ico_magnetic{margin:28px 0 0 20px}
    .card_num_box .masking_num{display:none}
    .card_detail_list{margin-top:27px;padding:0 20px 0 20px}
}

/* 360px ~ 374px */
@media screen and (min-width:360px) and (max-width:374px){
    /* ly_card_management */
    .ly_card_management{width:344px}
    .detail_card_box .ico_magnetic{margin:41px 0 0 20px}
    .card_detail_list{margin-top:41px;padding:0 18px 0 20px}
    .card_detail_list .masking_num::after{margin-left:7px}
    .card_detail_list .card_num_last{margin-left:7px}
}

/* 551px ~  */
@media screen and (min-width:551px){
    /* method_list */
    .method_list .method_item{flex:0 0 calc((100% / 3) - 3.5px);width:calc(100% / 3)}

    /* register_info_box */
    .register_info_inner{min-height:51px}
}

/* 701px ~ */
@media screen and (min-width:701px){
    /* method_list */
    .method_list .method_item{flex:0 0 calc(25% - 4px);width:25%}
}

/* 가로모드 */
@media screen and (orientation:Landscape){
    .layer_wrap{overflow-y:auto;max-height:90%}
}