@charset "utf-8";

.w145 { width: 145px !important; }
.w160 { width: 160px !important; }
.w240 { width: 240px !important; }

.p_0 { padding: 0 !important; }

.m_0 { margin: 0 !important; }


/* GRID LAYOUT */
.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 { --bs-gutter-y: 0; --bs-gutter-x: 0; } 
.row { --bs-gutter-x: 1.5rem; --bs-gutter-y: 0; display: flex; flex-wrap: wrap; margin-top: calc(-1 * var(--bs-gutter-y)); margin-right: calc(-0.5 * var(--bs-gutter-x)); margin-left: calc(-0.5 * var(--bs-gutter-x)); }
.row > * { flex-shrink: 0; /* max-width: 100%; width: 100%; */ margin-top: var(--bs-gutter-y); padding-right: calc(var(--bs-gutter-x) * 0.5); padding-left: calc(var(--bs-gutter-x) * 0.5); } 

.col { flex-basis: 0; flex-grow: 1; max-width: 100%; -webkit-box-flex: 1; -ms-flex-positive: 1; } 

.col { flex: 1 0 0%; }
.col-auto { flex: 0 0 auto; width: auto; }
.col-1 { flex: 0 0 auto; width: 8.33333333%; }
.col-2 { flex: 0 0 auto; width: 16.66666667%; }
.col-3 { flex: 0 0 auto; width: 25%; }
.col-4 { flex: 0 0 auto; width: 33.33333333%; }
.col-5 { flex: 0 0 auto; width: 41.66666667%; }
.col-6 { flex: 0 0 auto; width: 50%; }
.col-7 { flex: 0 0 auto; width: 58.33333333%; }
.col-8 { flex: 0 0 auto; width: 66.66666667%; }
.col-9 { flex: 0 0 auto; width: 75%; }
.col-10 { flex: 0 0 auto; width: 83.33333333%; }
.col-11 { flex: 0 0 auto; width: 91.66666667%; }
.col-12 { flex: 0 0 auto; width: 100%; }

.g-0,
.gx-0 { --bs-gutter-x: 0; } 
.g-0,
.gy-0 { --bs-gutter-y: 0; } 
.g-1,
.gx-1 { --bs-gutter-x: 1px; } 
.g-1,
.gy-1 { --bs-gutter-y: 1px; } 
.g-2,
.gx-2 { --bs-gutter-x: 2px; } 
.g-2,
.gy-2 { --bs-gutter-y: 2px; } 
.g-3,
.gx-3 { --bs-gutter-x: 3px; } 
.g-3,
.gy-3 { --bs-gutter-y: 3px; } 
.g-4,
.gx-4 { --bs-gutter-x: 4px; } 
.g-4,
.gy-4 { --bs-gutter-y: 4px; } 
.g-5,
.gx-5 { --bs-gutter-x: 5px; } 
.g-5,
.gy-5 { --bs-gutter-y: 5px; } 
.g-6,
.gx-6 { --bs-gutter-x: 6px; } 
.g-6,
.gy-6 { --bs-gutter-y: 6px; } 
.g-7,
.gx-7 { --bs-gutter-x: 7px; } 
.g-7,
.gy-7 { --bs-gutter-y: 7px; } 
.g-8,
.gx-8 { --bs-gutter-x: 8px; } 
.g-8,
.gy-8 { --bs-gutter-y: 8px; } 
.g-9,
.gx-9 { --bs-gutter-x: 9px; } 
.g-9,
.gy-9 { --bs-gutter-y: 9px; } 
.g-10,
.gx-10 { --bs-gutter-x: 10px; } 
.g-10,
.gy-10 { --bs-gutter-y: 10px; } 
.g-11,
.gx-11 { --bs-gutter-x: 11px; } 
.g-11,
.gy-11 { --bs-gutter-y: 11px; } 
.g-12,
.gx-12 { --bs-gutter-x: 12px; } 
.g-12,
.gy-12 { --bs-gutter-y: 12px; } 
.g-13,
.gx-13 { --bs-gutter-x: 13px; } 
.g-13,
.gy-13 { --bs-gutter-y: 13px; } 
.g-14,
.gx-14 { --bs-gutter-x: 14px; } 
.g-14,
.gy-14 { --bs-gutter-y: 14px; } 
.g-15,
.gx-15 { --bs-gutter-x: 15px; } 
.g-15,
.gy-15 { --bs-gutter-y: 15px; } 
.g-16,
.gx-16 { --bs-gutter-x: 16px; } 
.g-16,
.gy-16 { --bs-gutter-y: 16px; } 
.g-17,
.gx-17 { --bs-gutter-x: 17px; } 
.g-17,
.gy-17 { --bs-gutter-y: 17px; } 
.g-18,
.gx-18 { --bs-gutter-x: 18px; } 
.g-18,
.gy-18 { --bs-gutter-y: 18px; } 
.g-19,
.gx-19 { --bs-gutter-x: 19px; } 
.g-19,
.gy-19 { --bs-gutter-y: 19px; } 
.g-20,
.gx-20 { --bs-gutter-x: 20px; } 
.g-20,
.gy-20 { --bs-gutter-y: 20px; } 
.g-21,
.gx-21 { --bs-gutter-x: 21px; } 
.g-21,
.gy-21 { --bs-gutter-y: 21px; } 
.g-22,
.gx-22 { --bs-gutter-x: 22px; } 
.g-22,
.gy-22 { --bs-gutter-y: 22px; } 
.g-23,
.gx-23 { --bs-gutter-x: 23px; } 
.g-23,
.gy-23 { --bs-gutter-y: 23px; } 
.g-24,
.gx-24 { --bs-gutter-x: 24px; } 
.g-24,
.gy-24 { --bs-gutter-y: 24px; } 
.g-25,
.gx-25 { --bs-gutter-x: 25px; } 
.g-25,
.gy-25 { --bs-gutter-y: 25px; } 
.g-26,
.gx-26 { --bs-gutter-x: 26px; } 
.g-26,
.gy-26 { --bs-gutter-y: 26px; } 
.g-27,
.gx-27 { --bs-gutter-x: 27px; } 
.g-27,
.gy-27 { --bs-gutter-y: 27px; } 
.g-28,
.gx-28 { --bs-gutter-x: 28px; } 
.g-28,
.gy-28 { --bs-gutter-y: 28px; } 
.g-29,
.gx-29 { --bs-gutter-x: 29px; } 
.g-29,
.gy-29 { --bs-gutter-y: 29px; } 
.g-30,
.gx-30 { --bs-gutter-x: 30px; } 
.g-30,
.gy-30 { --bs-gutter-y: 30px; } 
.g-31,
.gx-31 { --bs-gutter-x: 31px; } 
.g-31,
.gy-31 { --bs-gutter-y: 31px; } 
.g-32,
.gx-32 { --bs-gutter-x: 32px; } 
.g-32,
.gy-32 { --bs-gutter-y: 32px; } 
.g-33,
.gx-33 { --bs-gutter-x: 33px; } 
.g-33,
.gy-33 { --bs-gutter-y: 33px; } 
.g-34,
.gx-34 { --bs-gutter-x: 34px; } 
.g-34,
.gy-34 { --bs-gutter-y: 34px; } 
.g-35,
.gx-35 { --bs-gutter-x: 35px; } 
.g-35,
.gy-35 { --bs-gutter-y: 35px; } 
.g-36,
.gx-36 { --bs-gutter-x: 36px; } 
.g-36,
.gy-36 { --bs-gutter-y: 36px; } 
.g-37,
.gx-37 { --bs-gutter-x: 37px; } 
.g-37,
.gy-37 { --bs-gutter-y: 37px; } 
.g-38,
.gx-38 { --bs-gutter-x: 38px; } 
.g-38,
.gy-38 { --bs-gutter-y: 38px; } 
.g-39,
.gx-39 { --bs-gutter-x: 39px; } 
.g-39,
.gy-39 { --bs-gutter-y: 39px; } 
.g-40,
.gx-40 { --bs-gutter-x: 40px; } 
.g-40,
.gy-40 { --bs-gutter-y: 40px; } 


/* form_info_area */
.desc_list_box + .form_info_area { margin-top: 15px; }
.form_info_area .info-item .label { color: #575C6B; font-size: 14px; font-weight: 500; line-height: 17px; }
.form_info_area .info-item .cnt { margin-top: 3px; }

/* form_control */
.form_control { position: relative; width: 100%; height: 36px; border: none; border-bottom: 1px solid #2C334D; padding: 0 10px; font-size: 15px; color: #222; font-weight: 500; }
.form_control:focus,
.form_control.ty02:focus,
select.form_control:focus { outline: none; border-color: #00B5D5; }
.form_control::placeholder { color: #AAA; font-size: 14px; font-weight: 500; }
.form_control.ty02 { border: 1px solid #DDE3E8; background-color: #fff; border-radius: 5px; font-size: 14px; }
.form_control.ty02:not(select):read-only { border-color: #dde3e8; background-color: #eff1f2; }
.form_control.error,
.form_control.error:focus { border-color: #ef1010; }
.form_control.error + .error_msg { color: #ef1010; font-size: 12px; font-weight: 400; line-height: 14px; margin-top: 2px; }

/* layer popup */
.layer_popup { display:none; position: relative; z-index: 990; } 
.dim { position:fixed; top:0; left:0; width:100%; height:100%; background: rgba(0,0,0,0.5); transition:none; z-index:1000; } 

.layer_popup_area.lg { width: 1000px; } 
.layer_popup_area.md { width: 760px; } 
.layer_popup_area.sm { width: 420px; }

.layer_popup_area { overflow: hidden; position:fixed; top:50%; left:50%; transform: translate(-50%, -50%); border-radius: 16px; z-index: 1001;  box-shadow: 0px 4px 30px 0px rgba(0, 0, 0, 0.3); background-color: #fff; } 
.layer_head { display: flex; justify-content: space-between; align-items: center; height: 60px; padding: 0 24px; background-color: #00B5D5; } 
.layer_head .left { width: calc(100% - 20px); } 
.layer_head .left .title { color: #fff; font-size: 20px; font-weight: 700; line-height: 24px; } 
.layer_head .pop_close { display: inline-block; overflow: hidden; width: 24px; height: 24px; text-indent: -9999px; background-image: url('../images/common/ico_pop_close.svg'); transition: all .3s; } 
.layer_head .pop_close:hover { transform:rotate(90deg) } 
.layer_body .layer_cont { padding: 20px 24px 40px; } 
.layer_body .pop_tit_area { display: flex; justify-content: space-between; align-items: center; }
.layer_body .pop_tit_area .tit { color: #2c334d; font-size: 22px; font-weight: 600; }
.layer_footer { display: flex; justify-content: flex-end; align-items: center; gap: 8px; padding: 12px 24px; border-top: 1px solid #E6E8EC; } 

.layer_popup_area.alert { display: flex; flex-direction: column; overflow: hidden; width: 320px; height: 280px; margin: 0; padding: 0; padding-top: 0; border: 0; border-top: 0; border-radius: 20px; background: none; } 
.layer_popup_area.alert .alert_body { flex: 1; padding: 34px 0 20px; background-color: #fff; } 
.layer_popup_area.alert .alert_body .alert_cont { padding: 68px 40px 0; background-repeat: no-repeat; background-size: 50px auto; background-position: 50% 0; background-image: url('../images/common/img_alert01.svg'); } 
.layer_popup_area.alert .alert_body .alert_cont.id { background-image: url(../images/common/img_alert02.svg); } 
.layer_popup_area.alert .alert_body .alert_cont .tit { color: #384264; font-size: 18px; font-weight: 700; text-align: center; line-height: 20px; } 
.layer_popup_area.alert .alert_body .alert_cont .desc { margin-top: 8px; text-align: center; color: #778186; font-size: 13px; font-weight: 400; line-height: 18px; }
.layer_popup_area.alert .alert_body .alert_cont .desc strong { color: #384264; font-weight: 500; }
.layer_popup_area.alert .alert_footer { display: flex; justify-content: center; background-color: #fff; padding-bottom: 30px; }

.scroll_y { height: 100%; overflow-y: auto; overflow-x: hidden; }
.scroll_y::-webkit-scrollbar { width: 6px; }
.scroll_y::-webkit-scrollbar-thumb { border-radius: 6px; background: rgba(0, 0, 0, 0.2); }
.scroll_y::-webkit-scrollbar-track { background: #ebebeb; }


/* button */
.btn_group { display: flex; justify-content: center; align-items: center; gap: 4px; }
.btn_group.ty02 { gap: 8px; }
.btn_group.ty03 { gap: 10px; }

.btn { display: inline-flex; justify-content: center; align-items: center; gap: 4px; border-radius: 6px; min-width: 80px; height: 36px; padding: 0 14px; font-size: 14px; font-weight: 600; line-height: 18px; transition: all .2s; color: #fff; background-color: #00B5D5; }
.btn:hover { background-color: #0091AA; }
.btn.ty02 { background-color: #575C6B; }
.btn.ty02:hover { background-color: #464a56; }
.btn.ty03 { background-color: #A0A7A9; }
.btn.ty03:hover { background-color: #757e80; }

.btn.line { color: #00B5D5; border: 1px solid #00B5D5; border-radius: 6px; background-color: rgba(0, 181, 213, 0.1); }
.btn.line:hover { color: #fff; background-color: #00b5d5; }
.btn.line.ty02 { color: #575C6B; background-color: rgba(87, 92, 107, 0.1); border-color: #575C6B; }
.btn.line.ty02:hover { color: #fff; background-color: #575C6B; }
.btn.line.ty03 { color: #21248E; background-color: #E9EAF4; border-color: #21248E; }
.btn.line.ty03:hover { color: #fff; background: #21248E; }
.btn.line.ty04 { color: #575C6B; background: #fff; border-color: #575C6B; padding: 0 10px; }
.btn.line.ty04:hover { color: #fff; background-color: #575C6B; }
.btn.line.ty05 { color: #EC6161; background-color: #FFE9E9; border-color: #EC6161; }
.btn.line.ty05:hover { color: #fff; background-color: #EC6161; } 

.btn.lg { min-width: 120px; height: 46px; border: none; border-radius: 10px; font-size: 16px; font-weight: 600; padding: 0 20px; }
.btn.sm { min-width: 69px; height: 32px; border-radius: 5px; font-size: 13px; padding: 0 9px; }

.btn.pop { min-width: 94px; height: 46px; border-radius: 10px; font-size: 16px; }

.ico { display: inline-block; width: 16px; height: 16px; background-size: 16px auto; background-repeat: no-repeat; background-position: center; }
.ico.plus { background-image: url(../images/common/ico_plus.svg); }
.btn:hover .ico.plus { background-image: url(../images/common/ico_plus_h.svg); background-size: 16px auto; }
.ico.delete { background-image: url(../images/common/ico_delete.svg); }
.btn:hover .ico.delete { background-image: url(../images/common/ico_delete_h.svg); }
.ico.file { background-image: url(../images/common/ico_file.svg); }
.btn:hover .ico.file,
.ico.file_w { background-image: url(../images/common/ico_file_w.svg); }
.ico.down { background-image: url(../images/common/ico_down.svg); }
.btn:hover .ico.down { background: url(../images/common/ico_down_w.svg); }
.ico.search { background-image: url(../images/common/ico_search_w.svg); }

.btn.disabled { pointer-events: none; color: #AAA; background-color: #DDDDDD; }
.btn.line.disabled { color: #A0A7A9; border-color: #A0A7A9; background-color: #F6F7F7; }