@charset "utf-8";
:root {
    --black : #222222;
    --black-50 : rgba(34, 34, 34, 0.5);
    --black-70 : rgba(34, 34, 34, 0.7);

    --neutral-100 : #f6f6f6;
    --neutral-300 : #8f8f8f;
    --neutral-500 : #1d232e;

    --gray : #d0d0d0;
    --gray-01 : #fafafa;
    --gray-02 : #eff0f6;
    --gray-03 : #888888;
    --gray-04 : #363636;
    --gray-25 : #fcfcfd;
    --gray-50 : #f9fafb;
    --gray-100 : #f2f4f7;
    --gray-200 : #eaecf0;
    --gray-300 : #d0d5dd;
    --gray-400 : #98a2b3;
    --gray-500 : #667085;
    --gray-600 : #475467;
    --gray-700 : #344054;
    --gray-800 : #1d2939;
    --gray-900 : #101828;

    --purple-25 : #fcfaff;
    --purple-50 : #f9f5ff;
    --purple-100 : #f4ebff;
    --purple-200 : #e9d7fe;
    --purple-300 : #d6bbfb;
    --purple-400 : #b692f6;
    --purple-500 : #9e77ed;
    --purple : #7f56d9;
    --purple-700 : #6941c6;
    --purple-800 : #53389e;
    --purple-900 : #42307d;
    --purple-logo : #7102FF;

    --tag-red : #e04f4f;
    --tag-red-light : #ffe4e5;
    --tag-green : #18c69c;
    --tag-blue : #d0f7ff;
    --tag-blue-light : #ecf4fc;
    --tag-blue-dark : #1077ab;
    --tag-blue-deep : #0052B4;

    --success : #39b855;
    --error : #fb5058;
    --disabled : #f5f5f5;
    --empty : #d4d4d4;

    --shadow-01 : 0px 3px 5px 0px rgba(16, 24, 40, 0.05);
    --shadow-02 : 0px 2px 6px 0px rgba(16, 24, 40, 0.09);
    --shadow-04 : 0px 2px 3px 0px rgba(16, 24, 40, 0.06), 0px 2px 7px 2px rgba(16, 24, 40, 0.10);
    --shadow-08 : 0px 4px 6px -2px rgba(16, 24, 40, 0.03), 0px 12px 16px -4px rgba(16, 24, 40, 0.08);
    --shadow-16 : 0px 8px 8px -4px rgba(16, 24, 40, 0.03), 0px 20px 24px -4px rgba(16, 24, 40, 0.08);
    --shadow-32 : 0px 24px 48px -12px rgba(16, 24, 40, 0.18);
    --shadow-64 : 0px 32px 64px -12px rgba(16, 24, 40, 0.20);
    --shadow-btn : 0px -3px 5px 0px rgba(16, 24, 40, 0.05);
}



/** ---------- common ---------- **/
/*? hide */
.hide { display: none !important; }
.m_only, .m-only { display: none !important; }
@media (max-width:480px){
    .m_only, .m-only { display: block !important; }
    .pc_only { display: none !important; }
}

/*?  margin  */
.mt04 { margin-top: 4px !important; }
.mt08 { margin-top: 8px !important; }
.mt12 { margin-top: 12px !important; }
.mt16 { margin-top: 16px !important; }
.mt24 { margin-top: 24px !important; }
.mt36 { margin-top: 36px !important; }
.mt64 { margin-top: 64px !important; }
.mb04 { margin-bottom: 4px !important; }
.mb08 { margin-bottom: 8px !important; }
.mb12 { margin-bottom: 12px !important; }
.mb16 { margin-bottom: 16px !important; }
.mb24 { margin-bottom: 24px !important; }
.mb36 { margin-bottom: 36px !important; }
.pt0 { padding-top: 0 !important; }
.pt08 { padding-top: 8px !important; }
.pt16 { padding-top: 16px !important; }
.pt24 { padding-top: 24px !important; }
.pt36 { padding-top: 36px !important; }
.pb08 { padding-bottom: 8px !important; }
.pb16 { padding-bottom: 16px !important; }
.pb24 { padding-bottom: 24px !important; }
.pb36 { padding-bottom: 36px !important; }

/*?  box-shadow  */
.shadow_01 { box-shadow: var(--shadow-01) }
.shadow_02 { box-shadow: var(--shadow-02) }
.shadow_04 { box-shadow: var(--shadow-04) }
.shadow_08 { box-shadow: var(--shadow-08) }
.shadow_16 { box-shadow: var(--shadow-16) }
.shadow_32 { box-shadow: var(--shadow-32) }
.shadow_64 { box-shadow: var(--shadow-64) }

/*? Typography */
.title_01 { font-size: 44px; font-weight: 700; line-height: 57px; }
.title_02 { font-size: 26px; font-weight: 700; line-height: 34px; }
.title_03 { font-size: 24px; font-weight: 700; line-height: 30px; }
.title_04 { font-size: 18px; font-weight: 700; line-height: 22px; }
.fs_01 { font-size: 18px; line-height: 24px; }
.fs_02 { font-size: 16px; line-height: 22px; }
.fs_03 { font-size: 14px; line-height: 20px; }
.fs_04 { font-size: 13px; line-height: 18px; }
.fs_05 { font-size: 12px; line-height: 16px; }
.fw_400 { font-weight: 400; }
.fw_500 { font-weight: 500; }
.fw_600 { font-weight: 600; }
.fw_700 { font-weight: 700; }
.fc_purple { color: var(--purple); }
.fc_red { color: var(--tag-red); }
.fc_green { color: #42BC00; }
.fc_gray { color: var(--gray-03); }



/** ---------- form ---------- **/
.icon_radio { position: relative; width: 20px; height: 20px; background: #ffffff; border: 1px solid var(--gray-300); border-radius: 50%; display: inline-block; }
.icon_radio::after { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 8px; height: 8px; border-radius: 50%; content: ''; display: block; }
.icon_radio.sm { width: 16px; height: 16px; }
.icon_radio.sm::after { width: 6px; height: 6px; }
.icon_chkbox,
.icon_chkbox02 { position: relative; width: 20px; height: 20px; background: url(../../resources/image/icon/icon_checkbox_w.svg) no-repeat center center, #ffffff; background-size: 14px; border: 1px solid var(--gray-300); border-radius: 50%; display: inline-block; }

/*? radio / checkbox */
input[type=checkbox],
input[type=radio] { display: none; }
input:checked + label .icon_radio,
.on > .icon_radio,
.icon_radio.on { border: 1px solid var(--purple); }
input:checked + label .icon_radio::after,
.on > .icon_radio::after,
.icon_radio.on::after { background: var(--purple); }
input:checked + label .icon_chkbox ,
.on > .icon_chkbox { background: url(../../resources/image/icon/icon_checkbox_p.svg) no-repeat center center,var(--purple-50); background-size: 14px; border: 1px solid var(--purple); } 
input:checked + label .icon_chkbox02 ,
.on > .icon_chkbox02 { background: url(../../resources/image/icon/icon_checkbox_w.svg) no-repeat center center,var(--purple); background-size: 14px; border: 1px solid var(--purple); } 

/*? check_box (default) */
.check_box.default { display: inline-block; }
.check_box.default input[type=checkbox] { display: none; }
.check_box.default input[type=checkbox] + label { display: inline-block; width: 16px; height: 16px; background: #ffffff; border: 1px solid #D0D5DD; border-radius: 4px; }
.check_box.default input[type=checkbox]:checked + label { background: url(../../resources/image/icon/icon_checkbox_p.svg) no-repeat center center,var(--purple-50); background-size: 12px; border: 1px solid var(--purple); }

/*? select_box */
.select_box { position: relative; width: 100%; height: 56px; font-size: 16px; font-weight: 400; color: var(--neutral-500); padding: 16px; background: url(../image/icon/icon_toggle_b.svg) no-repeat calc(100% - 16px) center, #ffffff; background-size: 20px; border: 1px solid var(--gray-300); border-radius: 8px; box-sizing: border-box; cursor: pointer; display: block; }

/*? input_box */
.input_list > li { margin-bottom: 12px; }
.input_list > li:last-of-type { margin-bottom: 0; }
.input_box { position: relative; width: 100%; }
.input_box .frm_input { width: 100%; height: 56px; font-size: 16px; font-weight: 400; color: var(--neutral-500); padding: 16px; background: #ffffff; border: 1px solid var(--gray-300); border-radius: 8px; box-sizing: border-box; transition: all 0.1s ease; }
.input_box.type_button .frm_input { padding-right: 100px !important; }
.input_box .frm_input.type_small { height: 40px; font-size: 14px; }
.input_box .frm_input.valid,
.input_box .frm_input.focus { padding: 24px 16px 8px; }
.input_box .frm_input.focus { border: 1px solid var(--purple); }
.input_box.error .frm_input { border: 1px solid var(--error); }

.input_box .frm_label { position: absolute; left: 16px; top: 18px; font-size: 16px; font-weight: 400; color: var(--neutral-300); transition: all 0.2s; }
.input_box .frm_input.focus + .frm_label,
.input_box .frm_input.valid + .frm_label,
.input_box.error .frm_input + .frm_label { top: 8px; font-size: 12px; line-height: 16px; }
.input_box.error .frm_input + .frm_label { color: var(--error); }

.input_box .frm_button { position: absolute; right: 8px; top: 8px; min-width: 80px; font-size: 14px; font-weight: 400; color: #ffffff; line-height: 40px; text-align: center; padding: 0 16px; background: var(--purple); border-radius: 8px; display: inline-block; z-index: 5; }

.input_box.type_no_label .frm_input.valid,
.input_box.type_no_label .frm_input.focus { padding: 16px; }

/*? error_message */
.error_message { height: 0px; font-size: 13px; color: var(--error); line-height: 20px; overflow: hidden; transition: all 0.5s ease-in-out; }
.error .error_message { height: 20px; margin-top: 4px; }
.error + .error_message { height: 20px; margin-top: 4px; }


/** ---------- component ---------- **/
/*? label */
.label { height: 20px; font-size: 14px; font-weight: 400; color: var(--purple); line-height: 16px; padding: 2px 10px; background: var(--purple-50); border-radius: 12px; margin: 0 4px 4px 0; }
.bedge { height: 20px; font-size: 12px; font-weight: 500; line-height: 20px; padding: 0 6px; border-radius: 10px; }
.bedge.red { color: var(--tag-red); background: var(--tag-red-light); }
.bedge.blue { color: var(--tag-blue-deep); background: var(--tag-blue-light); }

/*? tab  */
.tab_cont_wrap .tab_cont { display: none; }
.tab_cont_wrap .tab_cont.active { display: block; }



/** ---------- layout ---------- **/
#wrap { position: relative; width: 100%; max-width: 480px; min-width: 360px; height: auto; min-height: 100%; margin: 0 auto; background: #ffffff; box-shadow: 0px 2px 15px rgba(200, 203, 222, 0.7); }
#wrap section { overflow: hidden; }
.min_hei_hd { min-height: calc(100vh - 68px); }
.section_hidden { overflow: hidden !important; }
.fix_btn_bottom { position: relative; padding-bottom: 90px; }
.fix_btn_bottom_lg { position: relative; padding-bottom: 130px; }
.contents_center { display: flex; flex-direction: column; justify-content: center; min-height: calc(100vh - 68px); }
.cont_box { padding: 24px 20px; }

/*? border */
.bd_top { border-top: 8px solid var(--gray-01); }
.bd_bottom { border-bottom: 8px solid var(--gray-01); }

/*? background-color */
.bg_gray { background-color: var(--gray-01); }
.bg_purple { background-color: var(--purple-50); }



/** ---------- button ---------- **/
/*? btn_sub_text */
.btn_sub_text { width: 100%; text-align: center; padding-bottom: 10px; }
.btn_sub_text strong { display: block; font-size: 14px; font-weight: 600; color: var(--purple); line-height: 18px; }
.btn_sub_text em { display: block; font-size: 13px; font-weight: 400; color: var(--gray-500); line-height: 18px; }

/*? main_btn_box */
.main_btn_box { position: static; width: 100%; max-width: 480px; min-width: 360px; padding: 10px 20px 20px; background: #ffffff; z-index: 1000; }
.main_btn_box.type_no_bg { background: transparent; }
.main_btn_box.type_gradient { padding: 20px; background: rgb(255,255,255); background: linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 90%, rgba(255,255,255,0) 100%); }
.main_btn_box.type_shadow { box-shadow: var(--shadow-btn) }
.main_btn_box.type_border { border-top: 1px solid var(--gray-02); }
.main_btn_box.type_fixed { position: fixed; left: 50%; bottom: 0; transform: translateX(-50%); }
.main_btn_box .btn { position: relative; width: 100%; height: 52px; font-size: 18px; font-weight: 600; color: #ffffff; line-height: 20px; text-align: center; padding: 16px; background: var(--purple); border: none; border-radius: 8px; box-sizing: border-box; display: block; pointer-events: all; }
.main_btn_box .btn:disabled,
.main_btn_box .btn.disabled { color: var(--gray-400); background: var(--gray-200); pointer-events: none; }
.main_btn_box .btn.type_arrow::after { width: 20px; height: 20px; background: url(../../resources/image/icon/icon_circle_right_w.svg) no-repeat center center; background-size: contain; content: ''; display: inline-block; vertical-align: -4px; margin-left: 6px; }
.main_btn_box .btn .count { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); display: inline-block; min-width: 18px; height: 18px; font-size: 12px; font-weight: 700; color: var(--purple); line-height: 18px; text-align: center; padding: 0 6px; background: #ffffff; border-radius: 9px; }
.main_btn_box .btn .price { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); display: inline-block; font-size: 13px; font-weight: 700; color: #ffffff; line-height: 14px; text-align: right; }

/*? cont_btn_box */
.cont_btn_box { position: relative; width: 100%; text-align: center; margin-top: 24px; } 
.cont_btn_box.type_border { padding-top: 24px; border-top: 1px solid var(--gray-02); }
.cont_btn_box .btn { display: inline-block; font-size: 14px; font-weight: 700; color: var(--purple); line-height: 18px; padding: 10px 16px; border: 1px solid var(--purple-200); border-radius: 8px; box-sizing: border-box; } 
.cont_btn_box .btn::after { width: 16px; height: 16px; vertical-align: -3px; content: ''; display: inline-block; }
.cont_btn_box .btn.type_arrow::after { background: url(../../resources/image/icon/icon_circle_right_p.svg) no-repeat center center; margin-left: 4px; }
.cont_btn_box .btn.type_arrow_bottom::after { background: url(../../resources/image/icon/icon_circle_bottom_p.svg) no-repeat center center; margin-left: 4px; }
.cont_btn_box .btn.type_add::after { background: url(../../resources/image/icon/icon_plus_p.svg) no-repeat center center; margin-left: 4px; }