@charset "utf-8"; @import url("./ui.variable.css"); /**************************************************
Layout
***************************************************/
html,body { min-height: 100%; height: 100%; } 
#wrapper { position: relative; min-height: 100%; } 
#container { padding-top: 56px; padding-bottom: 70px; } 



/**************************************************
COMMON
***************************************************/
.no-js { visibility: hidden; opacity: 0; } 


a,
button { cursor: pointer; } 
a:disabled,
button:disabled { cursor: auto; } 
a.disabled,
button.disabled { cursor: auto; } 


/* GRID LAYOUT */
.guide_grid_column { display: flex; justify-content: center; align-items: center; height: 100%; padding: 13px; color: #fff; font-size: 13px; text-align: center; background-color: #6476c9; } 
.row > div:nth-child(even) .guide_grid_column { background-color: #5160a9; } 
.grid_container.guide_bg { border: 1px solid #99abff; background: #eaedfd; } 


.d_flex { display: flex; } 

.justify_start { justify-content: flex-start; } 
.justify_end { justify-content: flex-end; } 
.justify_center { justify-content: center; } 
.justify_between { justify-content: space-between; } 
.justify_around { justify-content: space-around; } 


.align_start { align-items: start; } 
.align_end { align-items: end; } 
.align_center { align-items: center; } 
.align_baseline { align-items: baseline; } 
.align_stretch { align-items: stretch; } 


.flex_row { flex-direction: row; } 
.flex_row_reverse { flex-direction: row-reverse; } 
.flex_column { flex-direction: column; } 
.flex_column_reverse { flex-direction: column-reverse; } 



.text_start { text-align: start; } 
.text_center { text-align: center; } 
.text_end { text-align: end; } 


.grid_container { } 


.grid_container { --gutter-y: 0; --gutter-x: 0; } 
.row { --gutter-y: 0; --gutter-x: 0; display: flex; flex-wrap: wrap; margin-top: calc(-1 * var(--gutter-y)); margin-right: calc(-0.5 * var(--gutter-x)); margin-left: calc(-0.5 * var(--gutter-x)); } 
.row > * { flex-shrink: 0; /* max-width: 100%; width: 100%; */ margin-top: var(--gutter-y); padding-right: calc(var(--gutter-x) * 0.5); padding-left: calc(var(--gutter-x) * 0.5); } 




.col { flex-basis: 0; flex-grow: 1; max-width: 100%; -webkit-box-flex: 1; -ms-flex-positive: 1; } 
.col_1 { -ms-flex: 0 0 8.33333333%; flex: 0 0 8.33333333%; max-width: 8.33333333%; -webkit-box-flex: 0; } 
.col_2 { -ms-flex: 0 0 16.66666667%; flex: 0 0 16.66666667%; max-width: 16.66666667%; -webkit-box-flex: 0; } 
.col_3 { -ms-flex: 0 0 25%; flex: 0 0 25%; max-width: 25%; -webkit-box-flex: 0; } 
.col_4 { -ms-flex: 0 0 33.333333%; flex: 0 0 33.333333%; max-width: 33.333333%; -webkit-box-flex: 0; } 
.col_5 { -ms-flex: 0 0 41.666667%; flex: 0 0 41.666667%; max-width: 41.666667%; -webkit-box-flex: 0; } 
.col_6 { -ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50%; -webkit-box-flex: 0; } 
.col_7 { -ms-flex: 0 0 58.33333333%; flex: 0 0 58.33333333%; max-width: 58.33333333%; -webkit-box-flex: 0; } 
.col_8 { -ms-flex: 0 0 66.66666667%; flex: 0 0 66.66666667%; max-width: 66.66666667%; -webkit-box-flex: 0; } 
.col_9 { -ms-flex: 0 0 75%; flex: 0 0 75%; max-width: 75%; -webkit-box-flex: 0; } 
.col_10 { -ms-flex: 0 0 83.33333333%; flex: 0 0 83.33333333%; max-width: 83.33333333%; -webkit-box-flex: 0; } 
.col_11 { -ms-flex: 0 0 91.66666667%; flex: 0 0 91.66666667%; max-width: 91.66666667%; -webkit-box-flex: 0; } 
.col_12 { -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; -webkit-box-flex: 0; } 

.col_auto { -ms-flex: 0 0 auto; flex: 0 0 auto; max-width: none; width: auto; -webkit-box-flex: 0; } 

.g_0,
.gx_0 { --gutter-x: 0; } 
.g_0,
.gy_0 { --gutter-y: 0; } 
.g_1,
.gx_1 { --gutter-x: 1px; } 
.g_1,
.gy_1 { --gutter-y: 1px; } 
.g_2,
.gx_2 { --gutter-x: 2px; } 
.g_2,
.gy_2 { --gutter-y: 2px; } 
.g_3,
.gx_3 { --gutter-x: 3px; } 
.g_3,
.gy_3 { --gutter-y: 3px; } 
.g_4,
.gx_4 { --gutter-x: 4px; } 
.g_4,
.gy_4 { --gutter-y: 4px; } 
.g_5,
.gx_5 { --gutter-x: 5px; } 
.g_5,
.gy_5 { --gutter-y: 5px; } 
.g_6,
.gx_6 { --gutter-x: 6px; } 
.g_6,
.gy_6 { --gutter-y: 6px; } 
.g_7,
.gx_7 { --gutter-x: 7px; } 
.g_7,
.gy_7 { --gutter-y: 7px; } 
.g_8,
.gx_8 { --gutter-x: 8px; } 
.g_8,
.gy_8 { --gutter-y: 8px; } 
.g_9,
.gx_9 { --gutter-x: 9px; } 
.g_9,
.gy_9 { --gutter-y: 9px; } 
.g_10,
.gx_10 { --gutter-x: 10px; } 
.g_10,
.gy_10 { --gutter-y: 10px; } 
.g_11,
.gx_11 { --gutter-x: 11px; } 
.g_11,
.gy_11 { --gutter-y: 11px; } 
.g_12,
.gx_12 { --gutter-x: 12px; } 
.g_12,
.gy_xs_12 { --gutter-y: 12px; } 
.g_13,
.gx_13 { --gutter-x: 13px; } 
.g_13,
.gy_13 { --gutter-y: 13px; } 
.g_14,
.gx_14 { --gutter-x: 14px; } 
.g_14,
.gy_14 { --gutter-y: 14px; } 
.g_15,
.gx_15 { --gutter-x: 15px; } 
.g_15,
.gy_15 { --gutter-y: 15px; } 
.g_16,
.gx_16 { --gutter-x: 16px; } 
.g_16,
.gy_16 { --gutter-y: 16px; } 
.g_17,
.gx_17 { --gutter-x: 17px; } 
.g_17,
.gy_17 { --gutter-y: 17px; } 
.g_18,
.gx_18 { --gutter-x: 18px; } 
.g_18,
.gy_18 { --gutter-y: 18px; } 
.g_19,
.gx_19 { --gutter-x: 19px; } 
.g_19,
.gy_19 { --gutter-y: 19px; } 
.g_20,
.gx_20 { --gutter-x: 20px; } 
.g_20,
.gy_xs_20 { --gutter-y: 20px; } 
.g_21,
.gx_21 { --gutter-x: 21px; } 
.g_21,
.gy_21 { --gutter-y: 21px; } 
.g_22,
.gx_22 { --gutter-x: 22px; } 
.g_22,
.gy_22 { --gutter-y: 22px; } 
.g_23,
.gx_23 { --gutter-x: 23px; } 
.g_23,
.gy_23 { --gutter-y: 23px; } 
.g_24,
.gx_24 { --gutter-x: 24px; } 
.g_24,
.gy_24 { --gutter-y: 24px; } 
.g_25,
.gx_25 { --gutter-x: 25px; } 
.g_25,
.gy_25 { --gutter-y: 25px; } 
.g_26,
.gx_26 { --gutter-x: 26px; } 
.g_26,
.gy_26 { --gutter-y: 26px; } 
.g_27,
.gx_27 { --gutter-x: 27px; } 
.g_27,
.gy_27 { --gutter-y: 27px; } 
.g_28,
.gx_28 { --gutter-x: 28px; } 
.g_28,
.gy_28 { --gutter-y: 28px; } 
.g_29,
.gx_29 { --gutter-x: 29px; } 
.g_29,
.gy_29 { --gutter-y: 29px; } 
.g_30,
.gx_30 { --gutter-x: 30px; } 
.g_30,
.gy_30 { --gutter-y: 30px; } 
.g_31,
.gx_31 { --gutter-x: 31px; } 
.g_31,
.gy_31 { --gutter-y: 31px; } 
.g_32,
.gx_32 { --gutter-x: 32px; } 
.g_32,
.gy_32 { --gutter-y: 32px; } 
.g_33,
.gx_33 { --gutter-x: 33px; } 
.g_33,
.gy_33 { --gutter-y: 33px; } 
.g_34,
.gx_34 { --gutter-x: 34px; } 
.g_34,
.gy_34 { --gutter-y: 34px; } 
.g_35,
.gx_35 { --gutter-x: 35px; } 
.g_35,
.gy_35 { --gutter-y: 35px; } 
.g_36,
.gx_36 { --gutter-x: 36px; } 
.g_36,
.gy_36 { --gutter-y: 36px; } 
.g_37,
.gx_37 { --gutter-x: 37px; } 
.g_37,
.gy_37 { --gutter-y: 37px; } 
.g_38,
.gx_38 { --gutter-x: 38px; } 
.g_38,
.gy_38 { --gutter-y: 38px; } 
.g_39,
.gx_39 { --gutter-x: 39px; } 
.g_39,
.gy_39 { --gutter-y: 39px; } 
.g_40,
.gx_40 { --gutter-x: 40px; } 
.g_40,
.gy_40 { --gutter-y: 40px; } 





.section { padding: 0 20px; } 








/* FORM */
input.form_control::-ms-reveal,
input.form_control::-ms-clear { display: none; }
.form_control.no_border { height: 28px; padding-left: 0; border: 0; color: #000; font-size: 22px; font-weight: 500; box-shadow: none; letter-spacing: 1px; } 
.form_control.no_border::-webkit-input-placeholder { color: #D4D7DC; font-size: 22px; } 
.form_control.no_border::-moz-placeholder { color: #D4D7DC; font-size: 22px; } 
.form_control.no_border:-ms-input-placeholder { color: #D4D7DC; font-size: 22px; } 


select.form_control.no_border { padding-right: 17px; background: url('../images/common/img_select_arrow.svg') no-repeat right center; background-size: 14px auto; } 




.form_check_wrap { display: flex; flex-wrap: wrap; gap: 2px 12px } 
.form_check_wrap .form_check { display: inline-block; } 
.form_check input { display: none; } 
.form_check label { display: inline-block; color: #000; font-size: 14px; font-weight: 500; cursor: pointer; line-height: 20px; } 
.form_check input + label::before { content: ""; display: inline-block; width: 20px; height: 20px; margin-right: 8px; vertical-align: -4px; background-repeat: no-repeat; background-position: 50%; /* transition: all .3s; */ background-size: 100% auto; } 
.form_check input + label:empty::before { margin-right: 0; } 
.form_check input:disabled + label { color: #999; cursor: auto; } 

.form_check input[type='checkbox'] + label::before { background-image: url('../images/common/ico_chk.svg'); } 
/* .form_check input[type='checkbox']:hover + label::before { background-image: url('../images/common/ico_chk_hover.svg'); } */
.form_check input[type='checkbox']:disabled + label::before { background-image: url('../images/common/ico_chk_disabled.svg'); } 
.form_check input[type='checkbox']:checked + label::before { border: 0; background-color: transparent; background-image: url('../images/common/ico_chk_on.svg'); } 
/* .form_check input[type='checkbox']:checked:disabled + label::before { border: 0; background-color: transparent; background-image: url('../images/components/ico_chk_on_dis.svg'); } */

.form_check input[type='radio'] + label::before { } 
/* .form_check input[type='radio']:hover + label::before { border-color: #3617CE; } */
/* .form_check input[type='radio']:disabled + label::before { background-color: #eee; } */
.form_check input[type='radio']:checked + label::before { border: 0; background-color: transparent; background-image: url('../images/components/ico_rdo_on.svg'); } 
/* .form_check input[type='radio']:checked:disabled + label::before { border: 0; background-color: transparent; background-image: url('../images/components/ico_rdo_on_dis.svg'); } */





.form_check.ty02 input[type='checkbox'] + label { color: #50555C; font-size: 14px; font-weight: 500; text-align: left; line-height: 16.71px; } 
.form_check.ty02 input[type='checkbox'] + label::before { vertical-align: -5px; background-image: url('../images/common/ico_chk_ty02.svg'); } 
/* .form_check.ty02 input[type='checkbox']:hover + label::before { background-image: url('../images/common/ico_chk_ty02_hover.svg'); } 
.form_check.ty02 input[type='checkbox']:disabled + label::before { background-image: url('../images/common/ico_chk_ty02_disabled.svg'); } */
.form_check.ty02 input[type='checkbox']:checked + label { color: #000; font-weight: 600 !important; } 
.form_check.ty02 input[type='checkbox']:checked + label::before { border: 0; background-color: transparent; background-image: url('../images/common/ico_chk_ty02_on.svg'); } 







.title_area + .form_field_area { margin-top: 32px; } 





.form_field_area .form_item .input_field { display: block; position: relative; padding: 16px 16px; border-radius: 12px; outline: 1px solid #D4D7DC; background-color: #fff; outline-offset: -1px; } 








.form_field_area .form_item .input_field:focus-within { outline: 2px solid #2E3033; outline-offset: -2px; } 
.form_field_area .form_item .input_field.error { outline: 2px solid #F71010; outline-offset: -2px; } 
.form_field_area .form_item .input_field.disabled { background-color: #F4F6F8; } 
.form_field_area .form_item .input_field.disabled .form_control.no_border { background-color: #F4F6F8; } 
.form_field_area .form_item .input_field.disabled .btn_clear { visibility: hidden; opacity: 0; } 
.form_field_area .form_item .input_field.disabled .btn_pw_view { visibility: hidden; opacity: 0; } 


.valid_text { margin-top: 8px; color: #858B93; font-size: 13px; font-weight: 500; line-height: 15.6px; } 
.valid_text.error { color: #F71010; } 
.valid_text.success { color: #04BA6D; } 



/* .form_field_area .form_item .input_field::after { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; border: 1px solid #D4D7DC; border-radius: 12px; } */
/* .form_field_area .form_item .input_field input:checked + label::after { border-color: #2E3033; } */
/* .form_field_area .form_item .input_field:focus-within::after { border: 2px solid #2E3033; } */
.form_field_area .form_item + .form_item { margin-top: 24px; } 
.form_field_area .form_item .input_field .form_tit_area { margin-bottom: 10px } 
.form_field_area .form_item .input_field .form_tit_area .left { font-size: 0; } 
.form_field_area .form_item .input_field .form_tit_area .left .tit { position: relative; color: #858B93; font-size: 12px; font-weight: 500; text-align: left; line-height: 14.4px; } 
.form_field_area .form_item .input_field .form_tit_area .left .tit.req { padding-right: 6px; } 
.form_field_area .form_item .input_field .form_tit_area .left .tit.req:after { content: ''; position: absolute; top: 0; right: 0; width: 4px; height: 4px; margin-left: 2px; border-radius: 50%; vertical-align: 4px; background-color: #FF4040; } 

.form_field_area .form_item .input_field .form_cont { position: relative; z-index: 1; } 
.form_field_area .form_item .input_field .form_cont .form_control { width: 100%; } 



.form_field_area .form_item .input_field.ty02 { padding: 0; outline: 0; } 
.form_field_area .form_item .input_field.ty02 > input[type="radio"],
.form_field_area .form_item .input_field.ty02 > input[type="checkbox"] { display: none; position: relative; z-index: -1; } 

.form_field_area .form_item .input_field.ty02 > input + label { display: block; padding: 16px; border-radius: 12px; outline: 1px solid #D4D7DC; } 
.form_field_area .form_item .input_field.ty02 > input:checked + label { outline: 2px solid #2E3033; } 


.form_field_area .form_item .input_field.ty02 > input + label .form_cont { display: none; } 
.form_field_area .form_item .input_field.ty02 > input:checked + label .form_cont { display: block; } 



.form_field_area .form_item .input_field.ty02 > input + label .form_tit_area { margin-bottom: 0; padding: 6px 0; } 
.form_field_area .form_item .input_field.ty02 > input + label .form_tit_area .tit { color: #50555C; font-size: 16px; font-weight: 500; } 


.form_field_area .form_item .input_field.ty02 > input:checked + label .form_tit_area { margin-bottom: 12px; padding: 0; } 
.form_field_area .form_item .input_field.ty02 > input:checked + label .form_tit_area .tit { color: #858B93; font-size: 12px; font-weight: 500; text-align: left; line-height: 14.4px; } 
.form_field_area .form_item .input_field.ty02 > input:checked + label .input_group { } 


.input_group .text_field { width: 100%; padding-right: 7px; color: #D4D7DC; font-size: 22px; font-weight: 500; text-align: left; line-height: 28px; word-break: break-word; } 
.input_group .text_field.enter { color: #000; } 
.input_group.detail { margin: 16px -15px 0; padding: 16px 15px 0; border-top: 1px solid #D4D7DC; } 
.input_guide { margin-top: 6px; } 
.input_guide > li { color: #858B93; font-size: 13px; font-weight: 500; text-align: left; line-height: 15.6px; } 
.input_guide > li + li { margin-top: 4px; } 
.input_guide > li strong { color: #50555C; } 


.valid_chk_text { display: flex; align-items: center; margin-top: 8px; gap: 12px; } 
.valid_chk_text > span { padding-left: 20px; color: #858B93; font-size: 13px; font-weight: 500; text-align: left; background-size: 16px auto; background-position: 0 50%; background-repeat: no-repeat; background-image: url('../images/common/img_valid_chk.svg'); line-height: 15.6px; } 

.valid_chk_text > span.success { color: #000; background-image: url('../images/common/img_valid_chk_success.svg'); } 
.valid_chk_text > span.error { color: #F71010; background-image: url('../images/common/img_valid_chk_error.svg'); } 


.valid_chk_text.center { justify-content: center; text-align: center; } 
.valid_chk_text > span.ico_none { padding: 0; background-image: none; } 


.input_group { display: flex; align-items: center; } 
.input_group_append { display: flex; align-items: center; } 

.btn_clear { visibility: hidden; opacity: 0; width: 16px; height: 16px; border-radius: 50%; background-color: #858B93; background-image: url('../images/common/btn_clear.svg'); background-size: 8px auto; background-position: 50%; background-repeat: no-repeat; } 
.btn_clear.active { visibility: visible; opacity: 1; } 
.btn_clear + .btn_check { margin-left: 16px; } 


.btn_check { display: inline-flex; justify-content: center; align-items: center; height: 28px; padding: 0 10px; border-radius: 6px; color: var(--primary); font-size: 13px; font-weight: 500; text-align: center; background-color: var(--secondary); line-height: 15.6px; } 

.btn_check.ty02 { padding: 0 14px; border-radius: 50px; font-size: 14px; } 

.btn_check.disabled,
.btn_check:disabled { color: #B5B9C0; background-color: #ECEEF0; } 

.btn_pw_view { display: inline-flex; visibility: hidden; opacity: 0; width: 20px; height: 20px; text-indent: -9999px; background-image: url('../images/common/ico_pw_view.svg'); }
.btn_pw_view.active { visibility: visible; opacity: 1; }
.btn_pw_view.on { background-image: url('../images/common/ico_pw_view_on.svg'); }
.btn_pw_view + .btn_clear { margin-left: 11px; }
 


/**************************************************
MAIN
***************************************************/


/**************************************************
SUB
***************************************************/





 
 #header { position: fixed; top: 0; left: 0; width: 100%; background-color: #fff; z-index: 100; } 
 /* #header .sub_header_title { font-size: 14px; font-weight: 700; text-align: left; line-height: 16.8px; } */
#header .section { display: flex; justify-content: space-between; align-items: center; height: 56px; } 
#header .section .left { position: relative; z-index: 1; } 
#header .section .left .btn_back { display: inline-block; width: 24px; height: 56px; height: 24px; text-indent: -9999px; background-repeat: no-repeat; background-size: 24px auto; background-position: 50%; background-image: url('../images/common/btn_back.svg'); } 
#header .section .right { position: relative; z-index: 1; } 


.header_title { display: flex; justify-content: center; align-items: center; position: absolute; top: 0; left: 0; width: 100%; height: 100%; } 
.header_title .title { color: #000000; font-size: 16px; font-weight: 700; text-align: center; line-height: 19.2px; } 









.title_area { /* margin-top: 10px; */ margin-top: 10px; } 
.title_area.ty02 { max-width: 360px; margin: 0 auto; } 
.title_area .title { color: #000000; font-size: 24px; font-weight: 700; line-height: 32px; } 
.title_area .desc { margin-top: 12px; color: #50555C; font-size: 16px; font-weight: 500; line-height: 22px; } 

.title_area.center .title { text-align: center; } 
.title_area.center .desc { margin-top: 12px; text-align: center; } 
.color_primary { color: var(--primary); } 


.multi_steps > li.is_active:before { content: counter(stepNum); color: #fff; font-size: 10px; font-weight: 400; } 
.multi_steps > li.is_active ~ li:before { content: counter(stepNum); color: #858B93; font-size: 10px; font-weight: 400; } 


.multi_steps > li.is_active:after, .multi_steps > li.is_active ~ li:after { background-color: #D4D7DC; } 
.multi_steps { /* display: table; width: 100%; table-layout: fixed; */
 display: flex; } 
.multi_steps > li { /* display: table-cell; */ flex: 1; position: relative; color: var(--primary); font-size: 14px; font-weight: 400; text-align: center; counter-increment: stepNum; z-index: 99; } 
.multi_steps > li:before { content: ''; display: block; width: 22px; height: 22px; margin: 0 auto 12px; border-radius: 50%; color: #fff; font-size: 10px; text-align: center; background: url('../images/common/img_step_checked.svg') no-repeat 50%; background-color: var(--tertiary); line-height: 22px; } 
.multi_steps > li:after { content: ''; position: absolute; top: 10px; left: 50%; width: 100%; height: 4px; background-color: var(--primary); z-index: -1; } 

.multi_steps > li:last-child:after { display: none; } 
.multi_steps > li.is_active:before { border-color: var(--primary); background: none; background-color: var(--primary); } 
.multi_steps > li.is_active ~ li { color: #858B93; font-weight: 400; } 
.multi_steps > li.is_active ~ li:before { border-color: #ECEEF0; background-color: #ECEEF0; background-size: 0; } 




.sub_title_area { display: flex; justify-content: space-between; align-items: center; margin-top: 20px; margin-bottom: 8px; } 
.sub_title_area .left .sub_title { font-size: 16px; font-weight: 600; line-height: 19px; } 



.box_line { border: 1px solid #D4D7DC; border-radius: 12px; } 



/**************************************************
FOOTER
**************************************************/
#footer { position: fixed; right: 0; bottom: 0; left: 0; padding-top: 12px; padding-bottom: 24px; z-index: 1; background-color: #fff; } 




.btm_btn_area { position: relative; margin-top: 60px; text-align: center; } 
.btn_step { display: inline-flex; justify-content: center; align-items: center; /* position: relative; */ width: 80px; height: 80px; border-radius: 50%; color: #fff; font-size: 18px; font-weight: 600; background-color: var(--primary); line-height: 28px; } 
.btn_step:disabled,
.btn_step.disabled { color: #B5B9C0; background-color: #ECEEF0; } 
.btm_btn_area .btm_area { margin-top: 10px; } 




/* 로그인 */
.section.bg_login { position: relative; } 
.section.bg_login::after { content: ''; position: absolute; top: -20px; right: 0; width: 147px; height: 185px; background: url('../images/page/img_bg_login.gif') no-repeat 50%; z-index: -1; background-size: 100% auto; } 

.login_save { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; } 
.login_save .form_check input + label { color: #444; font-weight: 500; } 
.login_save .form_check input + label::before { margin-right: 5px; } 
.login_save .btn_login_info { color: #858B93; font-size: 13px; font-weight: 500; text-align: right; line-height: 20px; } 

.login_save .btn_login_info_list { display: flex; } 
.login_save .btn_login_info_list > li { position: relative; } 
.login_save .btn_login_info_list > li + li { margin-left: 6px; padding-left: 6px; } 
.login_save .btn_login_info_list > li + li::before { content: ""; position: absolute; top: 50%; left: 0; width: 1px; height: 10px; margin-top: -5px; background-color: #d4d7dc; } 
.login_save .btn_login_info_list > li .btn_login_info { vertical-align: top; } 
.login_save .btn_login_info { display: inline-block; } 


.login_sns_area { position: relative; margin-top: 169px; } 
.tooltip_sns { display: flex; justify-content: center; align-items: center; position: absolute; top: -56px; left: 50%; min-width: 244px; height: 32px; border-radius: 40px; transform: translateX(-50%); background-color: #F4F6F8; } 

.tooltip_sns p { display: flex; align-items: center; color: #2E3033; font-size: 13px; line-height: 16px; } 
.tooltip_sns p strong { margin-left: 2px; font-weight: 600; } 


/**************************************************
BUTTON
**************************************************/
.btn_group { display: flex; } 


.btn { display: flex; justify-content: center; align-items: center; position: relative; width: 100%; height: 56px; border-radius: 100px; color: #fff; font-size: 16px; font-weight: 600; text-align: center; line-height: 52px; cursor: pointer; } 
.btn::before { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; border-radius: 100px; background-image: var(--gradient); z-index: -1; background-size: 200% auto; transition: all .3s; } 
.btn:hover::before { background-position: right center; } 


.btn.ty02 { color: #858B93; } 
.btn.ty02::before { background: linear-gradient(0deg, #ECEEF0, #ECEEF0); } 


.btn.sm { height: 44px; font-size: 14px; line-height: 40px; } 
.btn.line.sm { border-width: 2px; } 

.btn:disabled,
.btn.disabled,
.btn.line:disabled,
.btn.line.disabled { border-color: #ECEEF0; color: #B5B9C0; background: #ECEEF0; pointer-events: none; cursor: auto; } 
.btn.disabled::before,
.btn:disabled::before { background: #ECEEF0; } 

.btn .ico { width: 16px; height: 16px; margin-right: 6px; background-repeat: no-repeat; background-size: 100% auto; background-position: 50%; } 
.btn .ico.photo { background-image: url('../images/page/ico_photo.svg'); } 
.btn:hover .ico.photo { background-image: url('../images/page/ico_photo_h.svg'); } 
.btn_sns { cursor: pointer; } 

/* LINE BUTTON */
.btn.line { border: 1px solid var(--primary); color: var(--primary); line-height: 54px; background-color: #fff; transition: all .3s; } 
.btn.line::before { display: none; } 
.btn.line:hover { color: #fff; background-color: var(--primary); } 



/* TEXT BUTTON */
.btm_area { margin-top: 16px; text-align: center; } 
.btn_txt { display: inline-block; color: #8C9396; font-size: 14px; font-weight: 500; text-decoration: underline; line-height: 22px; } 
.btn_txt:hover,
.btn_txt:active,
.btn_txt:focus { text-decoration: underline; } 

.ico_sns { display: inline-flex; width: 48px; height: 48px; background-repeat: no-repeat; background-size: 100% auto; background-position: 50%; } 
.ico_sns.xs { width: 16px; height: 16px; } 
.ico_sns.sm { width: 24px; height: 24px; } 
.ico_sns.md { width: 32px; height: 32px; } 

i.naver { background-image: url('../images/common/ico_naver.svg'); } 
i.kakao { background-image: url('../images/common/ico_kakao.svg'); } 
i.google { background-image: url('../images/common/ico_google.svg'); } 
i.apple { background-image: url('../images/common/ico_apple.svg'); } 


.btn.sns i { position: absolute; top: 50%; left: 24px; width: 28px; height: 28px; transform: translateY(-50%); background-repeat: no-repeat; background-position: 50%; background-size: 100% auto; } 
.btn.naver::before { background: #03CA00; } 
.btn.naver:hover::before { background: #04b701; } 
.btn.kakao::before { background: #FFDB00; } 
.btn.kakao:hover::before { background: #f3d100; } 
.btn.apple::before { background: #232323; } 
.btn.apple:hover::before { background: #141414; } 


.btn.naver i { background-image: url('../images/common/img_naver.svg'); } 
.btn.kakao i { background-image: url('../images/common/img_kakao.svg'); } 
.btn.apple i { background-image: url('../images/common/img_apple.svg'); } 

.btn.sns.kakao { color: #000; } 

.login_sns_area .btn_group { display: flex; justify-content: center; gap: 20px; } 

.btn.bd {border: 1px solid #B5B9C0;color: #50555C;line-height: 54px;background-color: #fff;transition: all .3s;}
.btn.bd::before { display: none; }
.btn.bd:hover { color: #fff; background-color: var(--primary); }

.form_check_box > input { display: none; } 
.form_check_box > input + label { display: flex; align-items: center; position: relative; min-height: 80px; width: 100%; padding: 14px 18px 15px 56px; border-radius: 12px; outline: 1px solid #D4D7DC; cursor: pointer; } 
.form_check_box > input + label::before { content: ''; position: absolute; top: 50%; left: 20px; width: 20px; height: 20px; margin-top: -10px; background-repeat: no-repeat; background-size: 100% auto; background-position: 50%; background-image: url('../images/common/ico_chk.svg'); } 
.form_check_box > input:checked + label:before { background-image: url('../images/common/ico_chk_on.svg'); } 

.form_check_box > input:checked + label { outline: 2px solid #2E3033; outline-offset: -1px; } 

.form_check_box > input + label .id_area { flex: 1; } 
.form_check_box > input + label .id { display: block; color: #000000; font-size: 20px; font-weight: 600; text-align: left; font-family: Pretendard; line-height: 22px; word-break: break-all; } 
.form_check_box > input + label .grid_container,
.form_check_box > input + label .grid_container > .row { width: 100%; height: 100%; } 


.form_check_box > input + label .txt_sns { display: block; margin-top: 10px; color: #858B93; font-size: 12px; font-weight: 500; text-align: left; font-family: Pretendard; line-height: 14px; } 


.form_check_box > input + label .grid_container > .row > .col_xs_12 { display: flex; justify-content: space-between; align-items: center; gap: 0 5px; } 

.form_check_box .company_list { display: flex; align-items: center; } 
.form_check_box .company_list .company { width: 24px; height: 24px; border-radius: 50%; text-indent: -9999px; } 
.form_check_box .company_list .company.img_skrentercar { background: url('../images/page/img_company_rentercar.svg') no-repeat 50%; } 
.form_check_box .company_list .company.img_mycar { background: url('../images/page/img_company_mycar.svg') no-repeat 50%; } 
.form_check_box .company_list .company.img_smartcare { background: url('../images/page/img_company_smartcare.svg') no-repeat 50%; } 
.form_check_box .company_list .company.img_ods { background: url('../images/page/img_company_ods.svg') no-repeat 50%; } 
.form_check_box .company_list .company.img_billycar { background: url('../images/page/img_company_billycar.svg') no-repeat 50%; } 
.form_check_box .company_list .company.img_direct { background: url('../images/page/img_company_direct.svg') no-repeat 50%; } 
.form_check_box .company_list .company.img_evlink { background: url('../images/page/img_company_evlink.svg') no-repeat 50%; } 
.form_check_box .company_list .company + .company { margin-left: -10px; } 

.form_check_box .connection_list .txt { color: #858b93; font-size: 14px; font-weight: 500; line-height: 17px; } 
.form_check_box .connection_list .btn_group { margin-top: 7px; font-size: 0; gap: 0 5px; } 

.form_check_box > input:disabled + label { background-color: #F5F5F5; outline: 0; cursor: default; } 
.form_check_box > input:disabled + label::before { background-image: url('../images/common/ico_chk_disabled.svg') } 

.connection_list_top { display: flex; } 
.tooltip_box { position: relative; margin-left: 4px; font-size: 0; } 
.tooltip_box .tooltip_open_btn { display: inline-block; width: 16px; height: 16px; text-indent: -9999px; background: url('../images/common/ico_tooltip_open.svg') no-repeat 50%; } 
.tooltip_box .tooltip_close_btn { display: inline-block; position: absolute; top: 7px; right: 10px; width: 12px; height: 12px; text-indent: -9999px; background: url('../images/common/ico_tooltip_close.svg') no-repeat 50%; } 
.tooltip_box .tooltip_cont { display: none; position: absolute; top: calc(100% + 7px); left: -46px; width: max-content; padding: 7px 24px 7px 10px; border: 1px solid #FE710D; border-radius: 8px; z-index: 1; background-color: #fff; } 
.tooltip_box .tooltip_cont p { color: #000; font-size: 11px; font-weight: 500; line-height: 13.2px; } 

.tooltip_box.active .tooltip_cont { display: block; } 

.form_check_box > input:disabled + label .ico_sns,
.form_check_box > input:disabled + label .company_list .company { opacity: 0.5; mix-blend-mode: Luminosity; } 


.form_check_box > input + label .tag { display: inline-block; margin-top: 4px; padding: 3px 8px; border-radius: 8px; color: #858b93; font-size: 12px; font-weight: 500; background-color: #e4e4e4; line-height: 14.4px; } 


.title_area + .fixed_content { margin-top: 32px; } 

.fixed_content { max-width: 360px; margin: 0 auto; } 
.fixed_content + .join_btn_group { margin-top: 20px; } 



.tooltip { position: absolute; top: 100%; left: 50%; margin-top: 17px; padding: 9px 22px; border-radius: 50px; transform: translateX(-50%); background-color: #F4F6F8 } 
.tooltip::before { content: ''; position: absolute; top: -9px; left: 50%; width: 10px; height: 11px; background: url('../images/common/img_tooltip_arrow.svg'); transform: translateX(-50%); } 
.tooltip.btm::before { top: 100%; margin-top: -2px; margin-left: -10px; rotate: 180deg; } 

.tooltip p { color: #2E3033; font-size: 13px; font-weight: 400; white-space: nowrap; line-height: 16px; } 
.tooltip p strong { font-weight: 600; } 

.btn_group.btm { flex-direction: column; align-items: center; position: relative; } 
.btn_group.btm .tooltip { position: relative; top: auto; bottom: auto; left: 0; margin-top: 0; margin-bottom: 17px; transform: none; } 
.btn_group.btm .tooltip::before { top: auto; bottom: -9px; overflow: hidden; transform: translateX(-50%) rotate(180deg); } 

/* 추가정보 */
.form_box_check_area { margin-top: 32px; } 
.form_field_area .form_box_check_area { margin-top: 0; } 
.form_box_check > input { display: none; } 
.form_box_check > input + label { display: block; padding: 16px; border-radius: 12px; outline: 1px solid #D4D7DC; cursor: pointer; /* outline-offset: -1px; */ } 

.form_box_check > input + label .txt { display: block; color: #858B93; font-size: 16px; font-weight: 500; text-align: center; line-height: 19.09px; } 

.form_box_check:hover > input + label { outline: 1px solid var(--primary); outline-offset: -1px; } 
.form_box_check:hover > input + label .txt { color: var(--primary); font-weight: 700; } 

.form_box_check > input:checked + label { outline: 2px solid var(--primary); outline-offset: -2px; background-color: var(--quaternary); } 
.form_box_check > input:checked + label .txt { color: var(--primary); font-weight: 700; } 

.form_box_check > input:disabled + label { background-color: #ECEEF0; cursor: auto; } 
.form_box_check > input:disabled + label .txt { color: #B5B9C0; } 
.form_box_check:hover > input:disabled + label { outline-color: #D4D7DC; outline-offset:0; } 
.form_box_check:hover > input:disabled + label .txt { font-weight: 500; } 

.form_box_check_area .form_box_check.ty03 { display: inline-block; } 


.form_box_check > input + label .img_box { margin-bottom: 9px; text-align: center; } 
.form_box_check > input + label .img_box .img { display: inline-flex; width: 60px; height: 60px; background-repeat: no-repeat; background-size: 100% auto; background-position: 50%; } 



.form_box_check.ty02 > input + label { background-color: #ECEEF0; } 
.form_box_check.ty02 > input + label .img_box .img.male { background-image: url('../images/page/img_male.svg'); } 
.form_box_check.ty02 > input + label .img_box .img.female { background-image: url('../images/page/img_female.svg'); } 

.form_box_check.ty02:hover > input + label { background-color: #fff; } 
.form_box_check.ty02:hover label .img_box .img.male { background-image: url('../images/page/img_male_checked.svg'); } 
.form_box_check.ty02:hover label .img_box .img.female { background-image: url('../images/page/img_female_checked.svg'); } 

.form_box_check.ty02 > input:checked + label { background-color: var(--quinary); } 
.form_box_check.ty02 > input:checked + label .img_box .img.male { background-image: url('../images/page/img_male_checked.svg'); } 
.form_box_check.ty02 > input:checked + label .img_box .img.female { background-image: url('../images/page/img_female_checked.svg'); } 

.form_box_check.ty02 > input:disabled + label { pointer-events: none; background-color: #ECEEF0; } 
.form_box_check.ty02 > input:disabled + label .img_box .img.male { background-image: url('../images/page/img_male.svg'); } 
.form_box_check.ty02 > input:disabled + label .img_box .img.female { background-image: url('../images/page/img_female.svg'); } 



.form_box_check_area + .form_field_area { margin-top: 20px; } 
.form_field_area + .form_check_wrap { margin-top: 12px; } 
.form_field_area + .section_divider { margin: 15px -20px; } 



/* 약관동의 */

.terms_chk_area { margin-top: 32px; border: 1px solid #D4D7DC; border-radius: 12px; } 
.form_check.all_check { display: block;; } 
.form_check.all_check input + label { display: flex; align-items: center; height: 69px; padding: 0 15px; border-bottom: 1px solid #D4D7DC; color: #000000; font-size: 18px; font-weight: 600; } 
.form_check.all_check input[type='checkbox'] + label::before { width: 24px; height: 24px; margin-right: 10px; } 

.terms_chk_area .terms_chk_list { padding: 0 11px 23px; } 


.terms_chk_list > li .form_check_inner { display: flex; justify-content: space-between; align-items: center; height: 48px; padding: 0 6px; } 
.form_check label em { margin-left: 4px; color: #858B93; } 

.terms_chk_list > li .form_check_inner .btn_view { color: #858B93; font-size: 12px; font-weight: 400; text-align: left; text-decoration: underline; line-height: 14.4px; } 
.terms_chk_list > li .form_check_inner + .grid_container { margin-top: 6px; padding-left: 44px; } 
.terms_chk_list > li + li { margin-top: 5px; } 

.form_check_depth { margin: 0px 6px 0; padding: 10px 8px;}
.terms_depth_chk .top_frm { display: flex; justify-content: space-between; align-items: center; padding: 0 6px; } 
.terms_depth_chk .top_frm .btn_toggle { display: flex; align-items: center; position: relative; width: 100%; height: 22px; transition: all 0.3s; } 
.terms_depth_chk .top_frm .btn_toggle .tit { color: #50555C; font-size: 13px; font-weight: 400; text-align: left; line-height: 15.6px; } 
.terms_depth_chk .top_frm .btn_toggle::after { content: ''; position: absolute; top: 5px; right: 0; width: 12px; height: 12px; background: url('../images/common/btn_toggle_arr.svg'); } 

.terms_depth_chk.active .top_frm .btn_toggle::after { transform: rotate(180deg); } 

.terms_depth_chk .btm_frm { display: none; } 
.terms_depth_chk .btm_frm .depth_chk_box { padding: 14px; border-radius: 12px; background-color: #F4F6F8; } 

.terms_depth_chk .form_check.ty02 input[type='checkbox'] + label { font-size: 13px; font-weight: 400; text-align: left; line-height: 15.6px; } 
.terms_depth_chk .form_check.ty02 input[type='checkbox'] + label::before { width: 16px; height: 16px; margin-right: 4px; vertical-align: -4px; } 



.form_check.ty03 input[type='checkbox'] + label { color: #000; font-size: 13px; font-weight: 400; line-height: 15.6px; } 
.form_check.ty03 input[type='checkbox'] + label::before { width: 16px; height: 16px; margin-right: 4px; vertical-align: -3px; } 


.form_check.ty04 input[type='checkbox'] + label { color: #50555C; font-size: 14px; font-weight: 400; text-align: left; line-height: 16.8px; } 
.form_check.ty04 input[type='checkbox'] + label::before { width: 16px; height: 16px; margin-right: 4px; vertical-align: -3px; } 

.form_check.ty04 input[type='checkbox']:checked + label { color: #000000; } 

.input_field + .form_check.ty04 { margin-top: 5.5px; } 


.depth_chk_box_item { display: flex; justify-content: space-between; align-items: center; font-size: 0; } 
.depth_chk_box_item .btn_view { color: #858B93; font-size: 12px; font-weight: 400; text-align: left; text-decoration: underline; line-height: 16px; transition: all .3s; } 
.depth_chk_box_item .btn_view:hover { color: #000; } 



.terms_chk_area.ty02 .terms_chk_list .terms_depth_chk .top_frm { display: flex; justify-content: space-between; align-items: center; } 
.terms_chk_area.ty02 .terms_chk_list .terms_depth_chk .top_frm .form_check_inner { flex: auto; } 
.terms_chk_area.ty02 .terms_chk_list .terms_depth_chk .top_frm .btn_toggle { width: 30px; } 
.terms_chk_area.ty02 .terms_info { padding: 14px 14px 5px; border-radius: 12px; background-color: #F4F6F8; } 
.terms_chk_area.ty02 .terms_info p { color: #50555C; font-size: 13px; font-weight: 400; line-height: 20px; } 





.form_item_area .top_frm { margin-bottom: 4px; } 
.form_item_area .top_frm .left .tit { color: #858B93; font-size: 12px; font-weight: 500; font-family: Pretendard; line-height: 14.4px; } 

.form_check_group { display: flex; align-items: center; height: 36px; padding: 2px; border-radius: 10px; background-color: #F4F6F8; gap: 0 4px; } 
.form_check_group .form_gp_check { flex: 1; } 
.form_gp_check > input { display: none; } 
.form_gp_check > input + label { display: flex; justify-content: center; align-items: center; height: 30px; border: 2px solid #F4F6F8; border-radius: 10px; cursor: pointer; } 

.form_gp_check > input + label .txt { display: block; color: #9DA3B3; font-size: 13px; font-weight: 600; text-align: center; line-height: 19.09px; } 

.form_gp_check:hover > input + label { border: 0; background-color: #E5E8EF; } 
.form_gp_check:hover > input + label .txt { color: #000; } 

.form_gp_check > input:checked + label { border: 2px solid #000; background-color: #fff; } 
.form_gp_check > input:checked + label .txt { color: #000; } 

/* 개인정보 */
.round_check_area { margin-top: 20px; /* border: 1px solid #D4D7DC; border-radius: 100px; */ } 
.round_check_area .check_item { } 
.round_check_area .check_item > input { display: none; } 

.round_check_area .check_item > input + label { display: flex; justify-content: center; align-items: center; height: 48px; border-radius: 12px; color: #B5B9C0; font-size: 16px; font-weight: 500; text-align: center; line-height: 16.71px; background-color: #ECEEF0; outline: 2px solid #ECEEF0; outline-offset: -2px; } 
.round_check_area .check_item > input:checked + label { height: 50px; margin: -1px; color: var(--primary); font-weight: 700; background-color: var(--quaternary); outline-offset: -2px; outline: 2px solid var(--primary); line-height: 24px; } 

.round_check_area .check_item > input:disabled + label { pointer-events: none; background-color: #ECEEF0; } 






.title_area + .round_check_area { margin-top: 32px; } 
.round_check_area + .info_list_area { margin-top: 32px; } 


.info_list_area + .form_field_area { margin-top: 20px; } 

.sub_title_area + .img_license_guide { margin-top: 30px; } 
.img_license_guide { margin: 32px 0; padding: 0 10px; } 
.img_license_guide .img_box { position: relative; /* margin: 0 auto; */ text-align: center; } 
.img_license_guide .img_box .img_license { display: inline-flex; width: 280px; height: 158px; background-repeat: no-repeat; background-size: 100% auto; background-position: 50%; background-image: url('../images/page/img_license_guide.svg'); } 



.img_license_guide .img_box img { max-width: 280px; } 
.img_license_guide .img_box::before { content: ''; position: absolute; top: -10px; left: 50%; width: 300px; height: 178px; background: url('../images/page/bg_license_guide.svg') no-repeat 50%; transform: translateX(-50%); background-size: 100% auto; } 
.img_license_guide .btn_area { max-width: 280px; margin: 0 auto; margin-top: 32px; padding: 0 10px; } 
.img_license_guide .btn_area.hide { display: none; } 

.form_check.all_check.sm { padding: 20px 0 12px; border-bottom: 1px solid #ECEEF0; } 
.form_check.all_check.sm input + label { height: 20px; padding: 0; border: 0; font-size: 16px; font-weight: 600; background: none; outline: none; } 
.form_check.all_check.sm input + label::before { width: 20px; height: 20px; margin-right: 8px; } 

.terms_chk_list.ty02 { padding: 12px 0 0; } 
.terms_chk_list.ty02 > li { padding: 0; } 
.terms_chk_list.ty02 > li + li { margin-top: 16px; } 

.terms_chk_list.ty02 > li .form_check_inner { height: 20px; padding: 0; } 

.terms_chk_list.ty03 { margin-top: 16px; } 
.terms_chk_list.ty03 > li { padding: 0; } 
.terms_chk_list.ty03 > li .form_check_inner { height: 20px; padding: 0; } 

.terms_chk_list.ty04 { padding: 11px; } 


.terms_chk_area.complete .terms_chk_list > li .form_check_inner:first-child { margin-top: 0; }
.terms_chk_area.complete .terms_chk_list > li { position: relative; }
.terms_chk_area.complete .terms_chk_list > li + li::before { content: ""; position: absolute; top: -3px; right: 12px; left: 12px; height: 1px; border-top: 1px solid #ddd; box-sizing: border-box; }
.terms_chk_area.complete .form_check label { cursor: default; }
.terms_chk_area .terms_text { color: #000; font-size: 13px; font-weight: 600; line-height: 16px; }
.terms_chk_area .terms_text.ty02 { color: #FF4040; }

.img_motion_area { max-width: 320px; margin: 0 auto; margin-top: 8px; } 
.img_motion_area img { width: 100%; } 



.join_btn_group { max-width: 360px; margin: 0 auto; margin-top: 12px; } 

.item_sns_btn { } 
.item_sns_btn .tooltip { position: relative; max-width: 258px; margin-top: 30px; margin-bottom: 17px; text-align: center; } 
.item_sns_btn .btn.sns + .btn.sns { margin-top: 12px; } 

.item_sns_btn.ty02 .btn.sns { margin-top: 12px; } 
.connection_area .connection_txt { margin: 30px 0; color: #50555C; font-size: 16px; font-weight: 500; text-align: center; line-height: 22px; } 
.connection_area .btn_group { margin-top: 12px; } 


.toast { position: fixed; bottom: -96px; left: 50%; max-width: 193px; width: auto; padding: 11.5px 20px; border-radius: 50px; transform: translateX(-50%); background-color: rgba(0, 0, 0, 0.6); z-index: 1000; transition: 0.4s; } 
.toast p { color: #fff; font-size: 14px; font-weight: 500; text-align: center; white-space: nowrap; line-height: 16.71px; } 

.toast.show_toast { bottom: 134px; } 


.form_field_area + .join_btn_group { margin-top: 20px; } 
.connection_txt.line { position: relative; margin: 24px 0; color: #858B93; font-size: 13px; line-height: 16px; } 
.connection_txt.line::before,
.connection_txt.line::after { content: ""; position: absolute; top: 50%; width: 136px; height: 1px; transform: translateY(-50%); background-color: #d9d9d9; } 
.connection_txt.line::before { left: 0; } 
.connection_txt.line::after { right: 0; } 

.join_btn_group .connection_area + .btn_group { justify-content: center; margin-top: 20px; font-size: 0; gap: 0 20px; } 


/**************************************************
POPUP
**************************************************/
.pop_open_group { max-width: 320px; margin: 0 auto; } 
.dim { position: fixed; top: 0; right: 0; bottom: 0; left: 0; background-color: rgba(0, 0, 0, 0.3); z-index: 1000; } 
.layer_popup { display:none; position: relative; z-index: 990; } 
.layer_popup .popup_area { display: flex; flex-direction: column; justify-content: center; position:fixed; top:50%; left:50%; max-width: 640px; max-height: 640px; width: 100%; height: 100%; padding: 20px; z-index:1001; transform:translate(-50%,calc(-50% - 0.5px)); } 
.layer_popup .popup_area .popup_head .pop_close { display: inline-block; } 

.popup_area.lg { max-width: 1000px; } 
.popup_area.md { max-width: 700px; } 
.popup_area.sm { max-width: 380px; } 


.popup_area .popup_head { display: flex; justify-content: space-between; align-items: center; padding: 20px; border-bottom: 1px solid #D4D7DC; border-radius: 12px 12px 0 0; background-color: #fff; } 
.popup_area .popup_head .left { width: calc(100% - 20px); } 
.popup_area .popup_head .title { color: #000; font-size: 18px; font-weight: 600; line-height: 22px; letter-spacing: -1px; } 
.popup_area .popup_head .title em { display: inline-block; margin-left: 5px; vertical-align: top; color: #858B93; line-height: 22px; } 
.popup_area .popup_head .title em.color_primary { color: var(--primary); } 
.popup_area .popup_head .right { width: 20px; font-size: 0; text-align: right; } 
.popup_area .popup_head .pop_close { display: none; overflow: hidden; width: 16px; height: 16px; vertical-align: top; text-indent: -9999px; background-image: url('../images/common/ico_pop_close.svg'); transition: all .3s; background-size: 100% auto; background-repeat: no-repeat; } 
/* .popup_area .popup_head .pop_close:hover { transform:rotate(90deg); } */

.popup_area .popup_body { max-height: calc(100% - 115px); padding: 20px 20px 40px; background-color: #fff; border-radius: 0 0 10px 10px;} 
.popup_cont { max-height: 100%; height: 100%; } 
.popup_area .popup_footer { display: flex; justify-content: center; align-items: center; overflow: hidden; margin-top: -1px; padding: 0; border-radius: 0 0 12px 12px; } 
.popup_area .popup_footer .btn { flex: 1; height: 52px; border-radius: 0; font-size: 16px; line-height: 52px; } 
.popup_area .popup_footer .btn::before { border-radius: 0; } 
.popup_area .popup_footer .btn + .btn { margin: 0; } 

.popup_cont .scroll_y { max-height: 100%; height: 100%; margin-right: -16px; padding-right: 16px; } 

/* AGREE */
.agree_tit { color: #50555c; font-size: 13px; line-height: 20px; } 
.agree_txt { color: #50555c; font-size: 13px; line-height: 20px; } 


/* SCROLL */
.scroll_y { overflow-y: auto; overflow-x: hidden; } 
.scroll_y::-webkit-scrollbar { width: 4px; } 
.scroll_y::-webkit-scrollbar-track { background: transparent; } 
.scroll_y::-webkit-scrollbar-thumb { border-radius: 100px; background: #858B93; } 

/**************************************************
ALERT
**************************************************/
.alert { display: none; position: relative; z-index: 990; } 
.alert_area { position:fixed; top:50%; left:50%; width: 280px; z-index:1001; transform:translate(-50%,-50%); } 
.alert_area .alert_body { padding: 35px 20px; border: 1px solid #EAEAEA; border-radius: 12px 12px 0 0; background-color: #fff; } 
.alert_cont .alert_tit { display: flex; justify-content: center; align-items: center; min-height: 78px; color: #2e3033; font-size: 18px; font-weight: 700; text-align: center; line-height: 26px; } 

.alert_cont .alert_txt { color: #50555c; font-size: 16px; text-align: center; line-height: 22px; } 
.alert_cont .alert_tit + .alert_txt { margin-top: 8px; } 
.alert_area .alert_footer { display: flex; overflow: hidden; margin-top: -1px; border-top: 0; border-radius: 0 0 12px 12px; } 
.alert_area .alert_footer .btn { flex: 1; height: 52px; border-radius: 0; font-size: 16px; } 
.alert_area .alert_footer .btn::before { border-radius: 0; } 


.alert_area .alert_footer .btn + .btn { flex: none; width: 168px; } 
.alert_cont .alert_desc { color: #50555C; font-size: 16px;font-weight: 400;text-align: center;line-height: 20px; } 
.step_info{ margin-top: 10px; padding: 12px 0; border-radius: 10px; background-color: #F4F6F8; }
.step_info ul{ display: flex; flex-wrap: wrap; justify-content: center; }
.step_info ul > li{ display: flex; align-items: center; position: relative; padding-right: 20px; color: #50555C; font-size: 14px; line-height: 22px; }
.step_info ul > li::after { content: ''; position: absolute; top: 4px; right: 2px; width: 16px; height: 16px; background: url('../images/common/img_step_arr.svg') no-repeat 50%;background-size: 16px auto; }
.step_info ul > li:last-child{ padding-right: 0; }
.step_info ul > li:last-child::after{ display: none; }
.step_info ul > li strong{ margin-right: 4px; color: #03CA00; font-weight: 600; }
.step_info ul > li .ico{ display: inline-flex; width: 22px; height: 22px; margin: 0 4px; background: url('../images/common/ico_alert_step.svg') no-repeat 50%; background-size: 22px auto; }




.alert_txt + .faild_count_box { margin-top: 14px; } 
.faild_count_box { text-align: center; } 
.faild_count_box .faild_count { display: inline-block; padding: 11px 31px 11px 30px; border-radius: 23px; color: #50555C; font-size: 16px; font-weight: 500; background-color: #F4F6F8; line-height: 18px; } 
.faild_count_box .faild_count em { margin-left: 6px; font-weight: 700; } 

.alert.ty02 .alert_area { padding-top: 81px; } 
.alert.ty02 .alert_area::before { content: ""; position: absolute; top: 0; left: 50%; width: 86px; height: 94px; transform: translateX(-50%); background-image: url('../images/common/img_alert_illust01.gif'); background-size: 86px auto; } 
.alert.ty02 .alert_area .alert_body { min-height: 174px; padding: 40px 20px 26px; } 
.alert.ty02 .alert_area .alert_body .alert_tit { min-height: auto; } 

/**************************************************
SUB CONTENTS 
**************************************************/
.illust_img_box { /* margin-top: 20px; */ margin-top: 30px; text-align: center; } 
.illust_img_box img { max-width: 320px; width: 100%; vertical-align: top; } 
.illust_img_box.ty02 img { max-width: 180px; } 
/* .illust_img_box + .info_list_area { margin-top: 20px; } */
.illust_img_box + .info_list_area { margin-top: 35px; } 
.title_area + .info_list_area { margin-top: 32px; } 

.info_list_area.first { margin-top: 20px; } 

.info_list_area { padding: 23px; } 
.info_list_area .info_cont .info_label .txt { color: #858B93; font-size: 12px; font-weight: 500; line-height: 15px; } 
.info_list_area .info_cont .info_detail { margin-top: 4px; } 
.info_list_area .info_cont .info_detail .info { color: #000; font-size: 18px; font-weight: 500; line-height: 22px; } 
.info_list_area .info_cont .info_detail .info .ico_sns { margin-left: 4px; vertical-align: -6px; } 

.info_list_area .info_cont .info_label.ty02 { display: flex; justify-content: space-between; align-items: center; } 
.info_list_area .info_cont .info_label.ty02 + .info_detail { margin-top: 0; } 



.intro_img_area { overflow: hidden; margin: 60px -20px 0; } 

.intro_img_box { display: flex; position: relative; height: 70px; white-space: nowrap; } 
.intro_img_box + .intro_img_box { margin-top: 20px; } 
.marquee_right_first,
.marquee_right_second { position: absolute; left: 0; animation: marquee_right_first 37s linear infinite; -webkit-animation: marquee_right_first 37s linear infinite; } 
.marquee_left_first,
.marquee_left_second { position: absolute; right: 0; animation: marquee_left_first 37s linear infinite; -webkit-animation: marquee_left_first 37s linear infinite; } 
.marquee_right_second { left: 1419px; } 
.marquee_left_second { right: 1419px; } 

.marquee_area { display: flex; width: 1419px; height: 70px; font-size: 0; white-space: nowrap; animation-play-state: running; will-change: transform; } 
.marquee_area img { height: 70px; margin: 0 7.5px; } 

@keyframes marquee_right_first { 
 0% { -webkit-transform: translateX(0); transform: translateX(0); } 
 100% { -webkit-transform: translateX(-100%); transform: translateX(-100%); } 
 }

 @keyframes marquee_left_first { 
 0% { -webkit-transform: translateX(0); transform: translateX(0); } 
 100% { -webkit-transform: translateX(100%); transform: translateX(100%); } 
 }
 



/* Mypage */

.title_area + .list_item_info_box { margin-top: 8px; } 
.list_item_info_box { padding: 20px 0; } 
.list_item_info_box .tit_area { margin-bottom: 12px; } 
.list_item_info_box .tit_area .tit { color: #000000; font-size: 18px; font-weight: 700; text-align: left; line-height: 21.6px; } 
.list_item_info_box .item_list > li { display: flex; justify-content: space-between; align-items: center; } 
.list_item_info_box .item_list > li + li { margin-top: 10px; } 
.list_item_info_box .item_list > li .txt { color: #858B93; font-size: 12px; font-weight: 500; text-align: left; line-height: 14.4px; } 
.list_item_info_box .item_list > li .cont { color: #50555C; font-size: 13px; font-weight: 500; text-align: left; line-height: 16.8px; } 

.list_item_info_area { } 
.nodata { padding-top: 150px; } 
.nodata p { padding-top: 75px; color: #838383; font-size: 16px; font-weight: 500; text-align: center; line-height: 19.2px; background-repeat: no-repeat; background-size: 60px auto; background-position: 50% 0; background-image: url('../images/common/img_nodata.svg'); } 


.list_item_info_area + .btm_btn_area { margin-top: 18px; } 
.list_item_info_area + .pagination_area { margin-top: 40px; } 
.btm_btn_area .btn_underline { color: var(--primary); font-size: 14px; font-weight: 500; text-align: center; text-decoration: underline; line-height: 22px; } 
.section_divider { display: block; margin: 0 -20px; border: 0; border-color: #F4F6F8; border-style: solid; border-width: 10px 0 0 0; } 
.section_divider.ty02 { margin: 0; border-color: #ddd; border-width: 1px 0 0 0; } 
.filter_area + .list_item_info_area { margin-top: 6px; } 

.inner_scroll > .section { display: flex; flex-direction: column; max-height: calc(100vh - 126px); } 
.inner_scroll .list_item_info_area { flex: 1; margin-right: -10px; padding-right: 10px; overflow-y: auto; } 


.title_area + .filter_area { margin-top: 32px; } 
.filter_area { display: flex; justify-content: space-between; align-items: center; } 
.filter_area .right { display: flex; align-items: center; } 
.filter_area .right .txt_filter { margin-right: 10px; color: #838383; font-size: 13px; font-weight: 500; line-height: 15.6px; } 
.filter_area .right .btn_filter { display: inline-flex; width: 36px; height: 36px; border-radius: 12px; background-color: #F4F6F8; background-repeat: no-repeat; background-size: 20px auto; background-image: url('../images/page/btn_filter.svg'); background-position: 50%; transition: all .3s; } 
.filter_area .right .btn_filter:hover { background-color: #ebebeb; } 
select.form_control.ty02 { height: 36px; padding: 0 31px 0 12px; border: 0; border-radius: 12px; color: #000; font-size: 14px; font-weight: 600; background-size: 12px auto; background-position: right 12px center; background-image: url('../images/common/img_select_arrow2.svg'); background-repeat: no-repeat; background-color: #F4F6F8; line-height: 16.8px; background-color: #F4F6F8; } 

.filter_area .right { min-width: 200px; } 
.filter_area .right .form_check_group { width: 100%; } 


.form_box_check.ty03 > input + label { display: inline-block; padding: 13px 30px; border-radius: 500px; outline: 1px solid #D4D7DC; background-color: #fff; cursor: pointer; } 
.form_box_check.ty03 > input + label .txt { color: #838383; font-size: 18px; line-height: 22px; } 

.form_box_check.ty03:hover > input + label { outline: 1px solid #000; } 
.form_box_check.ty03:hover > input + label .txt { color: #000; font-weight: 500; } 

.form_box_check.ty03 > input:checked + label { outline: 2px solid #000; background-color: #fff; } 
.form_box_check.ty03 > input:checked + label .txt { color: #000; font-weight: 600; } 

.form_check.direct_input { margin-top: 15px; padding-top: 18px; border-top: 1px dashed #ddd; } 


.form_check.direct_input { margin-top: 15px; padding-top: 18px; border-top: 1px dashed #ddd; } 


.direct_input_box { display: block; width: 100%; margin-top: 10px; } 
.form_check.direct_input input + label { display: flex; flex-wrap: wrap; color: #838383; font-size: 18px; font-weight: 500; cursor: pointer; line-height: 20px; transition: all .3s; } 
.form_check.direct_input input + label::before { content: ""; display: inline-block; width: 20px; height: 20px; margin-right: 8px; vertical-align: -5px; background-repeat: no-repeat; background-position: 50%; transition: all .3s; background-size: 100% auto; } 
.form_check.direct_input input + label:empty::before { margin-right: 0; } 
.form_check.direct_input input:disabled + label { color: #999; pointer-events: none; } 

.form_check.direct_input input[type='radio'] + label::before { background-image: url('../images/common/ico_chk.svg'); } 
.form_check.direct_input input[type='radio']:hover + label { color: #000; } 
.form_check.direct_input input[type='radio']:hover + label::before { background-image: url('../images/common/ico_chk_hover.svg'); } 
.form_check.direct_input input[type='radio']:disabled + label::before { background-image: url('../images/common/ico_chk_disabled.svg'); } 
.form_check.direct_input input[type='radio']:checked + label { color: #000; } 
.form_check.direct_input input[type='radio']:checked + label::before { border: 0; background-color: transparent; background-image: url('../images/common/ico_chk_on.svg'); } 


textarea.form_control { display: block; width: 100%; padding: 16px 20px; border: 0; border-radius: 12px; color: #000; font-size: 16px; outline: 1px solid #D4D7DC; background-color: #fff; line-height: 24px; } 
textarea.form_control::-webkit-input-placeholder { color: #D4D7DC; font-size: 16px; } 
textarea.form_control::-moz-placeholder { color: #D4D7DC; font-size: 16px; } 
textarea.form_control:-ms-input-placeholder { color: #D4D7DC; font-size: 16px; } 
textarea.form_control:focus { outline: 2px solid #000; outline-offset: -2px; } 




.guidance_list { margin-top: 32px; } 
.guidance_cont { padding: 20px; border-radius: 12px; background-color: #F4F6F8; } 
.guidance_cont .guidance_title { position: relative; padding-left: 30px; color: #000; font-size: 16px; font-weight: 700; line-height: 24px; } 
.guidance_cont .guidance_title::before { content: ""; position: absolute; top: 0; left: 0; width: 24px; height: 24px; background-image: url('../images/page/ico_guidance_info.svg'); background-size: 100% auto; } 
.guidance_cont .guidance_txt { margin-top: 12px; } 
.guidance_cont .guidance_txt .txt { color: #666; font-size: 14px; font-weight: 500; line-height: 20px; } 
.guidance_cont .guidance_txt .txt em { font-weight: 700; } 
.guidance_cont .guidance_txt .txt .color_primary { color: var(--primary); } 

.guidance_list + .guidance_chk { display: inline-block; margin-top: 24px; } 
.form_check.guidance_chk input + label { color: #000; font-weight: 600; } 



/* ERROR */
.center_cont { position: absolute; top: 50%; left: 50%; width: 100%; padding: 0 20px; transform: translate(-50%, -50%); } 
.center_cont .title_area:first-child { margin-top: 0; } 
.error_wrap .illust_img_box { margin-top: 0px; } 
.error_wrap .illust_img_box + .title_area { margin-top: 32px; } 
.error_wrap .title_area .desc { line-height: 22px; } 
.error_wrap #footer .btn_group.btm .grid_container { width: 100%; } 




/* 주소검색 */
.popup_area.popup_addr { max-width: 480px; max-height: inherit; } 
.popup_area.popup_addr .popup_body { overflow: hidden; max-height: calc(100% - 63px); padding-bottom: 1px; border-radius: 0 0 12px 12px; } 
.popup_area.popup_addr .popup_body .popup_cont { display: flex; flex-direction: column; align-items: center; } 
.popup_area.popup_addr .popup_body .popup_cont .scroll_y { position: relative; width: 100%; } 
.popup_area.popup_addr .popup_body .popup_cont .scroll_y .loader_area { position: sticky; bottom: 10px; } 
.popup_area.popup_addr .section_divider { width: 120%; } 

.list_address_guide { width: 100%; } 
.list_address_guide .desc { color: #2E3033; font-size: 16px; font-weight: 700; text-align: left; line-height: 21px; } 
.list_address_guide .info_list { margin-top: 20px; padding-bottom: 40px; } 
.list_address_guide .info_list > li + li { margin-top: 12px; } 
.list_address_guide .info_list > li em { display: block; position: relative; padding-left: 9px; font-size: 14px; font-weight: 500; text-align: left; line-height: 20px; } 
.list_address_guide .info_list > li em::before { content: ''; position: absolute; top: 50%; left: 0; width: 4px; height: 4px; border-radius: 50%; transform: translateY(-50%); background-color: #858B93; } 

.list_address_guide .info_list > li p { padding-left: 9px; color: #858B93; font-size: 14px; font-weight: 400; text-align: left; line-height: 20px; } 


.search_form { display: flex; width: 100%; } 



/* .popup_area.popup_addr .scroll_y { height: 316px; } */
.addr_info { display: block; width: 100%; } 
.total { position: relative; color: #50555C; font-size: 14px; font-weight: 500; background-color: #fff; } 
.total strong { color: #FE730A; font-weight: 600; } 

.list_address_area { position: relative; margin-top: -2px; background-color: #fff; } 

.list_address_area > #list > ul > li { padding: 12px 0; } 
.list_address_area > #list > ul > li + li { border-top: 1px solid #D4D7DC } 

.list_address_area > #list > ul > li .no { display: block; margin-bottom: 5px; color: #2E3033; font-size: 14px; font-weight: 600; text-align: left; line-height: 16.8px; } 


.list_address_area > #list > ul > li .road_addr { display: flex; width: 100%; color: #2E3033; gap: 7px; } 
.list_address_area > #list > ul > li .road_addr .info { padding-top: 1px; font-size: 13px; font-weight: 500; text-align: left; line-height: 20px; } 
.list_address_area > #list > ul > li .road_addr.ty02 .info { padding-left: 9px; color: #50555C; } 

.list_address_area > #list > ul > li .road_addr + .road_addr { margin-top: 6px; } 
.list_address_area > #list > ul > li .road_addr .tit_addr { display: inline-flex; align-items: center; height: 21px; padding: 0 8px; border-radius: 50px; color: #FE730A; font-size: 11px; font-weight: 500; background-color: #FFEADA; } 
.list_address_area > #list > ul > li .road_addr.ty02 .tit_addr { color: #858B93; background-color: #ECEEF0; } 


.list_address_area { } 


.pagination_area { display: none; position: relative; margin-top: 20px; padding: 4px 0; text-align: center; } 
.pagination_area .left { position: absolute; top: 0; left: 0; } 
.pagination_area .right { position: absolute; top:0; right: 0; } 
.pagination_area .pagination { display: inline-block; } 
.pagination { position: relative; font-size:0; text-align: center; } 
.pagination button { display: inline-block; /* width: 24px; height: 24px; */ margin: 0 5px; border:1px solid transparent; border-radius: 50%; -webkit-box-sizing: border-box; box-sizing: border-box; color: #666; font-size: 14px; font-weight: 500; line-height: 22px; background-repeat: no-repeat; background-position: 50%; background-size: 24px auto; transition: all .3s; } 
.pagination button:hover { color: #444; } 
.pagination button.active { color: #FE730A; } 
.pagination button.prev { width: 24px; height: 24px; margin: 0 0 0 0; text-indent: -9999px; background-image: url("../images/common/ico_pagination_prev.svg"); } 
.pagination button.prev:hover { background-image: url("../images/common/ico_pagination_prev_h.svg"); } 
.pagination button.next { width: 24px; height: 24px; margin: 0 0 0 0; text-indent: -9999px; background-image: url("../images/common/ico_pagination_next.svg"); } 
.pagination button.next:hover { background-image: url("../images/common/ico_pagination_next_h.svg"); } 
.pagination button.first { width: 24px; height: 24px; text-indent: -9999px; background-image: url("../images/common/ico_pagination_first.svg"); } 
.pagination button.first:hover { background-image: url("../images/common/ico_pagination_first_h.svg"); } 
.pagination button.last { width: 24px; height: 24px; text-indent: -9999px; background-image: url("../images/common/ico_pagination_last.svg"); } 
.pagination button.last:hover { background-image: url("../images/common/ico_pagination_last_h.svg"); } 


.pagination button.prev:disabled { background-image: url("../images/common/ico_pagination_prev_disabled.svg"); } 
.pagination button.next:disabled { background-image: url("../images/common/ico_pagination_next_disabled.svg"); } 
.pagination button.first:disabled { background-image: url("../images/common/ico_pagination_first_disabled.svg"); } 
.pagination button.last:disabled { background-image: url("../images/common/ico_pagination_last_disabled.svg"); } 



/* LOADING */
.loading_wrap { position: fixed; top: 0; right: 0; bottom: 0; left: 0; background-color: rgba(0, 0, 0, 0.7); z-index: 9999; } 

.loading_area { display: flex; justify-content: center; align-items: center; position:absolute; top:50%; left:50%; width:200px; height: 200px; transform:translate(-50%,-50%); } 
.loading_area img { width: 100%; } 



.btn_group.btm .grid_container { max-width: 450px; width: 100%; } 


/* 탈퇴불가 */
.desc_box { margin-top: 20px; padding: 20px; border-radius: 12px; background-color: #F4F6F8; } 
.desc_box .desc { color: #50555c; font-size: 16px; font-weight: 400; text-align: center; line-height: 22px; } 

/* 약관변경 */
.title_area + .agree_area { margin-top: 32px; } 

.agree_area .agree_title { color: #000; font-size: 16px; font-weight: 600; line-height: 19px; } 
.agree_area .agree_title span { margin-left: 4px; color: #858B93; font-size: 16px; font-weight: 500; line-height: 19px; } 
.agree_area .agree_box { margin-top: 10px; padding: 9px 10px 10px; } 
.agree_area .agree_sub_title { color: #000; font-size: 14px; font-weight: 600; line-height: 17px; } 
.agree_area .agree_cont { max-height: 172px; margin-top: 10px; padding: 14px; border-radius: 12px; background-color: #F4F6F8; overflow-y: auto; } 
.agree_area .agree_cont p { color: #50555C; font-size: 13px; line-height: 20px; } 
.agree_area .agree_cont strong { color: #FB5226; font-size: 13px; line-height: 20px; } 


.agree_area.ty02 .agree_cont { max-height: 429px; margin-top: 0; }



/* 약관 */
.new_agree_area { word-break: keep-all; word-wrap: break-word; } 
.new_agree_tit { margin: 20px 0 0 0; padding: 0; color:#000; font-size:16px; font-weight:700; line-height: 24px; font-family: 'Pretendard'; } 
.new_agree_tit em { color: #858B93; font-weight: 500; font-style: normal; } 
.new_agree_tit.first { margin-top: 0; } 
.new_agree_sub_tit { margin: 20px 0 0 0; padding: 0; color: #222; font-size: 14px; font-weight: 700; line-height: 18px; font-family: 'Pretendard'; } 
.new_agree_sub_tit.first { margin-top: 0; } 
.new_agree_desc { margin: 10px 0 0 0; padding: 0; color: #222; font-size: 13px; font-weight:500; line-height: 18px; font-family: 'Pretendard'; } 
.new_agree_desc_btm { margin: 10px 0 0 0; padding: 0; color: #50555c; font-size: 13px; font-weight:500; line-height: 18px; font-family: 'Pretendard'; } 
.new_agree_list { margin: 10px 0 0 0; padding: 0; list-style: none; } 
.new_agree_list li { margin: 0; color: #50555c; font-size: 13px; font-weight: 500; line-height: 18px; font-family: 'Pretendard'; } 
.new_agree_list li p { margin: 0; color: #50555c; font-size: 13px; font-weight: 500; line-height: 18px; font-family: 'Pretendard'; } 
.new_agree_list.in { margin-top: 0; } 
.new_agree_list.in li { padding-left: 15px; } 
.new_agree_list.in .tbl_style02 { margin-top: 10px; } 
.terms_chk_area .terms_info p.new_agree_desc { font-weight: 500; line-height: 18px; } 
.terms_chk_area .terms_info p.new_agree_desc_btm { font-weight: 500; line-height: 18px; } 
.terms_chk_area .terms_info .new_agree_list li { font-size: 13px; font-weight: 500; line-height: 18px; } 
.terms_chk_area .terms_info .new_agree_list li p { font-size: 13px; font-weight: 500; line-height: 18px; } 

.new_agree_tit + .mb_scroll_box { margin-top: 10px; } 
.new_agree_sub_tit + .mb_scroll_box { margin-top: 10px; } 
.new_agree_desc + .mb_scroll_box { margin-top: 10px; } 
.new_agree_list li p + .mb-scroll-x { margin-top: 10px; } 
.tbl_style02 caption { display: none; } 
.tbl_style02 { width:100%; padding:0; border-top: 1px solid #a4a4a4; border-right: 1px solid #ECECEC; /* table-layout:fixed; */ border-spacing:0px; border-collapse:collapse; font-family: 'Pretendard'; } 
.tbl_style02 thead th { height:42px; padding: 8px 10px; border-bottom: 1px solid #ECECEC; border-left: 1px solid #ECECEC; box-sizing: border-box; vertical-align:middle; color: #50555C; font-size: 13px; font-weight: 500; text-align:center; line-height: 18px; background-color: #D7E0EA; font-family: 'Pretendard'; } 
.tbl_style02 tbody th, 
.tbl_style02 tbody td { height:42px; padding: 8px 10px; border-bottom: 1px solid #ECECEC; border-bottom: 1px solid #ECECEC; border-left: 1px solid #ECECEC; box-sizing: border-box; vertical-align:middle; color: #50555c; font-size: 13px; font-weight: 500; text-align:left; line-height: 18px; font-family: 'Pretendard'; background-color: #fff; } 
.tbl_style02 tbody th { color: #50555C; font-weight: 500; background-color: #D7E0EA; } 
.tbl_style02 tbody td strong { display: block; color: #222; font-size: 13px; font-weight: 700; font-family: 'Pretendard'; line-height: 18px; } 
.tbl_style02 tbody td strong + strong { margin-top: 8px; } 






.loader_area { display: flex; justify-content: center; align-items: center; position: fixed; right: 0; bottom: 30px; left: 0; height: 50px; } 
.loader { display: inline-block; position: relative; width: 40px; height: 40px; border-radius: 50%; box-sizing: border-box; background: linear-gradient(0deg, rgba(255, 61, 0, 0.2) 33%, var(--primary) 100%); animation: rotation 1s linear infinite; } 
.loader::after { content: ''; position: absolute; top: 50%; left: 50%; width: 36px; height: 36px; border-radius: 50%; box-sizing: border-box; background: #fff; transform: translate(-50%, -50%); } 
@keyframes rotation { 
 0% { transform: rotate(0deg) } 
 100% { transform: rotate(360deg) } 
 }