@charset "UTF-8";

/* UI 키트 */
/* Font-Family */
.font-AppleSDGothicNeo {font-family: 'AppleSDGothicNeo', sans-serif;}
.font-NanumSquare {font-family: 'NanumSquare', sans-serif;}

/* Font Size */
.fz30 {font-size: 3.0rem !important;}
.fz28 {font-size: 2.8rem !important;}
.fz26 {font-size: 2.6rem !important;}
.fz24 {font-size: 2.4rem !important;}
.fz22 {font-size: 2.2rem !important;}
.fz20 {font-size: 2.0rem !important;}
.fz18 {font-size: 1.8rem !important;}
.fz17 {font-size: 1.7rem !important;}
.fz16 {font-size: 1.6rem !important;}
.fz15 {font-size: 1.5rem !important;}
.fz14 {font-size: 1.4rem !important;}
.fz13 {font-size: 1.3rem !important;}
.fz12 {font-size: 1.2rem !important;}
.fz10 {font-size: 1.0rem !important;}

/*  Font Weight */
.fw100 {font-weight: 100 !important;}
.fw200 {font-weight: 200 !important;}
.fw300 {font-weight: 300 !important;}
.fw400 {font-weight: 400 !important;}
.fw500 {font-weight: 500 !important;}
.fw600 {font-weight: 600 !important;}
.fw700 {font-weight: 700 !important;}
.fw800 {font-weight: 800 !important;}
.fw900 {font-weight: 900 !important;}

/* Color */
.color-primary {color: rgb(88, 48, 216);}
.color-secondary {color: rgb(153, 169, 191);}
.color-error {color: #ff5959;}
.color-success {color: #48bb78;}
.color-link {color: #1e90ff;}
.color-grayblue {color: #757b82;}
.color-white {color: #fff;}
.color-gray {color: rgb(142, 144, 147);}
.color-gray_50 {color: rgb(174, 174, 174);}
.color-gray_100 {color: rgb(165, 179, 197);}
.color-gray_150 {color: #f2f2f2;}
.color-gray_200 {color: #e1e1e1;}
.color-gray_300 {color: #bdbdbd;}
.color-gray_400 {color: #909090;}
.color-gray_500 {color: #606060;}
.color-black {color: #000;}
.color-blue_100 {color: #f7f9fc;}
.color-blue_150 {color: #f5f9fc;}
.color-blue_200 {color: #eff4fb;}
.color-blue_300 {color: #e4e9f2;}
.color-blue_400 {color: #d8dbe1;}
.color-blue_450 {color: #c5cee0;}
.color-blue_500 {color: #b7c2d8;}
.color-blue_600 {color: #8f9bb3;}
.color-blue_700 {color: #718096;}
.color-blue_800 {color: #2e3a59;}
.color-blue_900 {color: #262d40;}
.color-blue_1000 {color: #0a1220;}

.bg-color-primary {background-color: rgb(88, 48, 216);}
.bg-color-secondary {background-color: rgb(153, 169, 191);}
.bg-color-error {background-color: #ff5959;}
.bg-color-success {background-color: #48bb78;}
.bg-color-link {background-color: #1e90ff;}
.bg-color-grayblue {background-color: #757b82;}
.bg-color-white {background-color: #fff;}
.bg-color-gray {background-color: rgb(246, 247, 251);}
.bg-color-gray_100 {background-color: rgb(248, 248, 248);}
.bg-color-gray_150 {background-color: #f2f2f2;}
.bg-color-gray_200 {background-color: #e1e1e1;}
.bg-color-gray_300 {background-color: #bdbdbd;}
.bg-color-gray_400 {background-color: #909090;}
.bg-color-gray_500 {background-color: #606060;}
.bg-color-black {background-color: #000;}
.bg-color-blue_100 {background-color: #f7f9fc;}
.bg-color-blue_150 {background-color: #f5f9fc;}
.bg-color-blue_200 {background-color: #eff4fb;}
.bg-color-blue_300 {background-color: #e4e9f2;}
.bg-color-blue_400 {background-color: #d8dbe1;}
.bg-color-blue_450 {background-color: #c5cee0;}
.bg-color-blue_500 {background-color: #b7c2d8;}
.bg-color-blue_600 {background-color: #163c88;}
.bg-color-blue_700 {background-color: #718096;}
.bg-color-blue_800 {background-color: #2e3a59;}
.bg-color-blue_900 {background-color: #262d40;}
.bg-color-blue_1000 {background-color: #0a1220;}

.bg-color-kakao {background-color: rgb(255, 219, 67);}
.bg-color-naver {background-color: #1cc100;}

/* 경고텍스트 */
.text-notice {display: none; position: relative; font-size: 1.0rem; color: #fb3b3b; padding-left: 15px;}
.text-notice.active {display: block;}
.text-notice.success {}
.text-notice.error {}
.text-notice.success:before {position: absolute; top: 50%; left: 0; transform: translateY(-50%); content: url('../img/icon-alert_success.svg'); width: 12px; height: 12px;}
.text-notice.error:before {position: absolute; top: 50%; left: 0; transform: translateY(-50%); content: url('../img/icon-alert_error.svg'); width: 12px; height: 12px;}

/* Border */
.border-bottom {border-bottom: 1px solid;}
.border-color-primary {border-color: #003154;}

/* Form */

/* Input */
.form-insert {}
/* Item Component */
.data-item {margin-bottom: 10px;}
.data-item:last-child {margin-bottom: 0;}
.data-item .item-title {display: flex; justify-content: space-between; font-size: 1.8rem; font-weight: 600; color: rgb(43, 43, 42); margin-bottom: 17px;}
.data-item .item-title .selected_count {}
.data-item .item-title .selected_count.count_over {color: rgb(227, 61, 89);}
.data-item .item-address {position: relative; display: flex; justify-content: space-between; padding-right: 30%; font-size: 1.8rem; font-weight: 600; color: rgb(43, 43, 42); margin-bottom: 17px;}
.data-item .item-address .btn-delete_address {position: absolute; top: 50%; right: 0; transform: translateY(-50%); content: ''; width: 24px; height: 24px; background: url('../img/icon-delete_circle.svg'); cursor: pointer;}
.data-item .item-tip {position: relative; top: -10px; font-size: 1.4rem; font-weight: 400; color: rgb(174, 174, 174); margin-bottom: 7px;}

.item-field {}
.item-field .field-component {position: relative; display: flex; align-items: center; width: 100%; height: 60px; border: 1px solid rgb(221, 221, 221); border-radius: 12px; margin: 0 0 17px 0; transition: border-color 0.15s;}
.item-field .field-component:focus-within {border-color: rgb(88, 48, 216);}

.item-field.devide-2 {display: flex; gap: 8px; align-items: center;}
.item-field.devide-2 > div {width: calc((100% / 2) - 4px); margin-bottom: 0;}
.item-field.devide-2 .dash {font-size: 18px; font-weight: 400; color: rgb(192, 194, 197);}

.item-field.devide-3 {display: flex; gap: 8px;}
.item-field.devide-3 > div {width: calc((100% / 3) - 6px);}

.item-field.devide-date {display: flex;}
.item-field.devide-date .field-component {margin-right: 8px;}
.item-field.devide-date .field-component:first-child {width: 200%;}
.item-field.devide-date .field-component:last-child {margin-right: 0;}

.item-field.devide-address {}
.item-field.devide-address .field-component {margin-bottom: 17px;}
.item-field.devide-address .field-component:last-child {margin-bottom: 0;}

/* Input */
.item-field .field-component .input-after {margin-left: 14px;}
.item-field .field-component .input-before {font-size: 16px; font-weight: 400; color: rgb(142, 144, 147); margin-right: 14px;}
.item-field .field-component .input-before .timer {font-size: 1.2rem; font-weight: 500; color: rgb(88, 48, 216); white-space: nowrap;}
.item-field input {width: 100%; height: 100%; border: none; background: transparent; padding: 0 16px; font-size: 1.6rem; font-weight: 400;}
.item-field input::placeholder {color: rgb(142, 144, 147);} 
.item-field input.input-floor {font-size: 14px; padding: 0;}
/* With Button */
.item-field .field-component.button-combined {border: none;}
.item-field .field-component.button-combined input {width: calc(100% - 128px); height: 60px; border: 1px solid rgb(221, 221, 221); border-radius: 12px; transition: border-color 0.15s;}
.item-field .field-component.button-combined input:focus {border-color: rgb(88, 48, 216);}
.item-field .field-component.button-combined button {display: inline-flex; justify-content: center; align-items: center; width: 120px; height: 60px; border-radius: 12px; margin-left: 8px; font-size: 1.6rem; cursor: pointer;}
/* TextArea */
.item-field .field-component.textarea {height: auto; padding: 20px 16px;}
.item-field .field-component.textarea textarea {width: 100%; min-height: 60px; border: none; transition: border-color 0.15s; font-size: 1.6rem; resize: none;}
.item-field .field-component.textarea textarea:focus {border-color: rgb(88, 48, 216);}
.item-field .field-component.textarea textarea::placeholder {color: rgb(142, 144, 147);}
/* Note & Tag */
.field-note {}
.field-note .note-list {}
.field-note .note-list .nl-item {position: relative; font-size: 15px; font-weight: 400; color: rgb(142, 144, 147); margin-right: 8px; padding-right: 8px;}
.field-note .note-list .nl-item::after {position: absolute; top: 50%; right: 0; transform: translateY(-50%); width: 1px; height: 13px; content: ''; background-color: rgb(174, 174, 174);}
.field-note .note-list .nl-item:last-child {margin-right: 0; padding-right: 0;}
.field-note .note-list .nl-item:last-child::after {background-color: none; width: 0; height: 0;}
.field-note .note-etc {margin-top: 12px;}
.field-note .note-etc .ne-item {display: inline-block; background-color: rgb(88, 48, 216); border-radius: 4px; padding: 4px; margin: 0 4px 4px 0; font-size: 11px; font-weight: 400; color: #fff;}
.field-note .note-etc .ne-item:last-child {margin-right: 0;}
/* Alert Message */
.item-field .field-alert {display: none; position: relative; top: -10px;}
.item-field .field-alert.active {display: block;}
.item-field .field-alert .alert-text {position: relative; font-size: 1.20rem; font-weight: 600; padding-left: 20px;}
.item-field .field-alert.success .alert-text {color: rgb(88, 48, 216);}
.item-field .field-alert.success .alert-text::before {position: absolute; top: -1px; left: 0; content: ''; width: 15px; height: 15px; background: url('../img/icon-success.svg');}
.item-field .field-alert.error .alert-text {color: rgb(227, 61, 89);}
.item-field .field-alert.error .alert-text::before {position: absolute; top: -1px; left: 0; content: ''; width: 15px; height: 15px; background: url('../img/icon-error.svg');}
/* SelectBox */
.nice-select {width: 100% !important; border: none !important; border-radius: 0 !important; height: auto !important; line-height: auto !important; padding: 0 16px !important; background-color: transparent !important; font-size: 17px !important; margin-right: 6px;}
.nice-select:hover {border-color: transparent !important;}
.nice-select.open .list {width: 100%; max-height: 176px; overflow-y: auto;}
.nice-select .option {font-size: 13px;}
/* .nice-select .option:first-child {display: none !important;} */
.nice-select .option:hover, .nice-select .option.focus, .nice-select .option.selected.focus {background-color: rgb(245, 245, 245);}
/* SelectBox - searchbox hidden */
.nice-select.open .nice-select-search-box {visibility: hidden; display: none;}
.nice-select .list {padding-top: 0 !important;}
/* Sort option */
.list-sort {}
.list-sort .selectbox {font-size: 13px !important; font-weight: 400; color: rgb(142, 144, 147);}
.list-sort .selectbox option {}
/* Disable */
.item-field .field-component.disabled {pointer-events: none; background-color: rgb(248, 248, 248);}
.item-field .field-component.disabled:focus-within {border-color: rgb(221, 221, 221);}
.item-field .field-component.disabled input {pointer-events: none; cursor: default; color: rgb(142, 144, 147);}
.item-field .field-component.disabled textarea {background-color: rgb(248, 248, 248); color: rgb(142, 144, 147);}
.item-field .field-component.disabled select {pointer-events: none; cursor: default; color: rgb(142, 144, 147);}
/* Readonly */
.item-field.flex-set-change .field-component {flex-direction: column; height: auto; align-items: flex-start;}
.item-field .field-component .read-content {padding: 20px 16px; font-size: 16px; font-weight: 400; color: rgb(142, 144, 147);}
.item-field .field-component .read-content.text-area {height: 160px; overflow-y: auto;}
/* Tags */
.item-field .tags {position: relative; top: -10px; display: flex; flex-wrap: wrap;}
.item-field .tags .tag {position: relative; display: inline-flex; align-items: center; font-size: 1.1rem; color: rgb(142, 144, 147); padding: 2px 4px 2px 4px; background-color: rgb(232, 233, 234); margin: 0 4px 4px 0;}
.item-field .tags .tag .tag-delete {position: relative; top: -1px; width: 13px; height: 13px; background: url('../img/icon-close_s.svg') center center no-repeat; background-size: cover; margin-left: 4px; cursor: pointer;}
/* .item-field .tags .tag:after {position: absolute; top: 50%; right: 4px; transform: translateY(-50%); content: ''; width: 13px; height: 13px; background: url('../img/icon-close_s.svg'); cursor: pointer;} */
/* Select List Item */
.select-list {}
.select-list .select-item {position: relative; display: flex; flex-direction: column; justify-content: center; width: 100%; min-height: 76px; padding: 28px 16px; background-color: #fff; border-radius: 12px; margin-bottom: 17px; transition: box-shadow 0.15s;}
.select-list .select-item.active {box-shadow: 0 3px 10px 0 rgb(210, 213, 222);;}
.select-list .select-item::before {position: absolute; top: 26px; right: 16px; content: ''; width: 24px; height: 24px; background: url('../img/icon-check.svg'); background-size: cover;}
.select-list .select-item.active::before {background: url('../img/icon-check_active.svg'); background-size: cover;}
.select-list .select-item:last-child {margin-bottom: 0;}
.select-list .select-item .item-desc {font-size: 16px; font-weight: 700;}
.select-list .select-item input {position: relative; display: none; align-items: center; width: 100%; border: 1px solid rgb(221, 221, 221); border-radius: 12px; padding: 20px 16px; margin: 17px 0 0 0; transition: border-color 0.15s; font-size: 16px;}
.select-list .select-item input:focus {border-color: rgb(88, 48, 216);}
.select-list .select-item.active input {display: flex;}
.select-list .select-item.link-map {flex-direction: row; justify-content: unset; cursor: pointer;}
.select-list .select-item.link-map::before {width: 0; height: 0; background: none;}
.select-list .select-item.link-map .item-desc {width: 100%;}
.select-list .select-item.link-map .item-desc .address {max-width: 200px;}
.select-list .select-item.link-map .item-desc .addr_detail {font-size: 14px; font-weight: 400; color: rgb(142, 144, 147); margin-top: 8px;}
.select-list .select-item.link-map .select-after {margin-right: 8px;}
.select-list .select-item.link-map .select-before {}
/* Check List Item */
.check-list .check-item {position: relative; display: flex; justify-content: space-between; align-items: center; width: 100%; min-height: 76px; padding: 28px 16px; background-color: #fff; border-radius: 12px; margin-bottom: 17px; transition: box-shadow 0.15s;}
.check-list .check-item.active {}
.check-list .check-item .item-desc {font-size: 16px; font-weight: 700;}
.check-list .check-item .show-terms {color: rgb(174, 174, 174);}
.check-list .check-item.check-all {position: relative; padding: 0 16px 0 48px;}
.check-list .check-item.check-all:before {position: absolute; top: 50%; left: 16px; transform: translateY(-50%); content: ''; width: 24px; height: 24px; background: url('../img/icon-check.svg'); background-size: cover;}
.check-list .check-item.check-all.active:before {background: url('../img/icon-check_active.svg'); background-size: cover;}
.check-list .check-item.check-normal {position: relative; padding: 0 16px 0 48px;}
.check-list .check-item.check-normal:before {position: absolute; top: calc(50% - 1px); left: 16px; transform: translateY(-50%); content: ''; width: 24px; height: 24px; background: url('../img/icon-check.svg'); background-size: cover;}
.check-list .check-item.check-normal.active:before {background: url('../img/icon-check_active.svg'); background-size: cover;}

/* Image */
/* .item-field .image-container {display: flex; flex-wrap: wrap; gap: 10px;}
.item-field .image-container .image-item.btn-file_add {position: relative; background-color: rgb(232, 233, 234); border: 1px solid rgb(232, 233, 234); border-radius: 12px;}
.item-field .image-container .image-item.btn-file_add:before {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); content: ''; width: 24px; background: url('../img/icon-cross.svg') center center no-repeat;}
.item-field .image-container .image-item {position: relative; width: calc((100% / 3) - 7px); cursor: pointer;}
.item-field .image-container .image-item:before {content:''; display: block; padding-top: 100%;}
.item-field .image-container .image-item .img {position: absolute; top: 0; width: 100%; height: 100%; background-size: cover; background-position: 50% 50%; border: 1px solid rgb(232, 233, 234); border-radius: 12px;}
.item-field .image-container .image-item img {width: 100%;} */
.item-field .image-container {display: flex; flex-wrap: wrap; gap: 10px 10px;}
.item-field .image-container .image-item {position: relative; width: calc((100% / 3) - 7px); text-align: center;}
.item-field .image-container .image-item .item-img {position: relative; width: 100%; padding-top: calc(100% / 1 * 1); cursor: pointer;}
.item-field .image-container .image-item .item-img img {position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; border: 1px solid rgb(232, 233, 234); border-radius: 12px;}
.item-field .image-container .image-item .delete-img {position: absolute; top: 4px; right: 4px; width: 18px; height: 18px; cursor: pointer;}
.item-field .image-container .image-item .delete-img::after {content: ''; display: block; width: 100%; height: 100%; background: url('../img/icon-delete_dark.svg');}
.item-field .image-container .image-item.btn-file_add .item-img {position: relative; background: url('../img/img-rectangle.svg') center center no-repeat; background-size: cover;}
.item-field .image-container .image-item.btn-file_add .item-img::after {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); content: ''; width: 24px; height: 24px; background: url('../img/icon-camera.svg');}
.item-field .image-container .image-item.btn-file_add .delete-img {display: none;}
.item-field .image-container .image-item .item-img .input-file {display: none;}
.item-field .image-container .image-item.btn-file_add .item-img .input-file {position: absolute; top: 0; left: 0; display: block; width: 100%; height: 100%; z-index: 5; opacity: 0;}

/* Select Item (Popup) */
.item-field .item-select {border: 1px solid rgb(221, 221, 221); border-radius: 12px; text-align: center; padding: 19px 0; font-size: 1.6rem; font-weight: 500;}
.item-field .item-select.active {background-color: rgb(88, 48, 216); color: #fff;}
/* Button */
.btn_global {position: relative; display: flex; justify-content: center; align-items: center; width: 100%; height: 58px; font-size: 17px; border-radius: 12px;}
.button-primary {font-weight: 700; color: #fff; background-color: rgb(88, 48, 216); border: 1px solid rgb(88, 48, 216);}
.button-secondary {font-weight: 700; color: rgb(88, 48, 216); background-color: #fff; border: 1px solid rgb(88, 48, 216);}
.button-kakao {font-weight: 400; color: #000; background-color: rgb(255, 219, 67);}
.btn_global img {margin-right: 20px;}
.btn_global.disabled {background-color: rgb(221, 221, 221); border-color: rgb(221, 221, 221); color: rgb(174, 174, 174); font-weight: 500; pointer-events: none; cursor: default;}
.btn_application {position: relative; display: inline-flex; justify-content: center; align-items: center; padding: 0 30px; height: 58px; font-size: 17px; border-radius: 12px;}
.btn_compact {position: relative; display: flex; justify-content: center; align-items: center; width: 100%; height: 58px; font-size: 16px; font-weight: 500; color: #fff; border-radius: 12px; background-color: rgb(88, 48, 216); border: 1px solid rgb(88, 48, 216);}
.btn_compact img {margin-right: 8px;}
.btn_more {position: relative; display: flex; justify-content: center; align-items: center; width: 100%; height: 58px; font-size: 16px; font-weight: 500; color: rgb(142, 144, 147); border-radius: 12px; background-color: rgb(248, 248, 248); border: 1px solid rgb(248, 248, 248);}
.btn_invite {position: relative; width: 100%; height: 76px; display: flex; align-items: center; background-color: #fff; box-shadow: 0 3px 10px 0 rgba(210, 213, 222, 0.7); border-radius: 12px; padding: 0 16px; font-size: 16px; font-weight: 700; cursor: pointer;}
.btn_invite img {margin-right: 8px;}
.btn_modal-ok {position: relative; display: flex; justify-content: center; align-items: center; width: 100%; height: 50px; font-size: 16px; font-weight: 500; color: rgb(255, 255, 255); border-radius: 8px; background-color: rgb(88, 48, 216); border: 1px solid rgb(88, 48, 216);}
.btn_modal-cancel {position: relative; display: flex; justify-content: center; align-items: center; width: 100%; height: 50px; font-size: 16px; font-weight: 500; color: rgb(174, 174, 174); border-radius: 8px; background-color: rgb(255, 255, 255); border: 1px solid rgb(221, 221, 221);}

/* Info Data Field */
.info-item {margin-bottom: 42px;}
.info-item .info-header {display: flex; justify-content: space-between; align-items: center;}
.info-item .info-header .header-name {font-size: 18px; font-weight: 600;}
.info-item .info-header .header-link {font-size: 13px; font-weight: 400; color: rgb(174, 174, 174);}
.info-item .info-header .header-link::after {}
.info-item .info-body {margin-top: 23px;}
.info-item .info-body .info-item {display: flex; justify-content: space-between; margin-bottom: 22px;}
.info-item .info-body .info-item:last-child {margin-bottom: 0;}
.info-item .info-body .info-item .data-name {font-size: 16px; font-weight: 400; color: rgb(142, 144, 147);}
.info-item .info-body .info-item .data-content {max-width: 200px; font-size: 16px; font-weight: 500; text-align: right;}
.info-item .info-body .info-item.point .data-name {font-weight: 500; color: rgb(43, 43, 42);}
.info-item .info-body .info-item.point .data-content {font-weight: 700;}

/* Toggle Button */
.button-field {margin-bottom: 14px;}
.button-field:last-child {margin-bottom: 0;}
.button-field .button-desc {position: relative; top: -2px; font-size: 16px; font-weight: 400; margin-bottom: 8px;}
.button-field .button-row {display: flex;}
.button-field .button-row .button-toggle {flex: 1; display: flex; justify-content: center; align-items: center; height: 60px; margin-right: 8px; font-size: 16px; font-weight: 500; color: rgb(142, 144, 147); background-color: #fff; border: 1px solid rgb(221, 221, 221); border-radius: 12px; transition: background-color 0.15s, border-color 0.15s, color 0.15s;}
.button-field .button-row .button-toggle:last-child {margin-right: 0;}
.button-field .button-row .button-toggle.active {background-color: rgb(88, 48, 216); border-color: rgb(88, 48, 216); color: #fff;}

/* Component */
/* 체크박스 */
.item-checkbox {position: relative; width: 100%;}
.item-checkbox:after {display: block; clear: both; content: '';}
.item-checkbox > input[type="checkbox"] {display: none;}
.item-checkbox > input[type="checkbox"] + label {display: inline-flex; align-items: center; width: 20px; height: 20px; background: #fff; border: 2px solid #e1e1e1; cursor: pointer; border-radius: 3px; transition: border 0.15s;}
.item-checkbox > input[type="checkbox"]:checked + label {width: 20px; height: 20px; background: url('../img/icon-checked.png') center center no-repeat; background-size: cover; border: 2px solid #003154;}
.item-checkbox >  input[type="checkbox"] + label > span {position: absolute; left: 25px; display: block; font-size: 1.4rem; line-height: 21px;}

/* Modal */
.modal {position: relative;}
.modal .modal-wrapper {display: none; position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); width: calc(100% - 54px); overflow-y: scroll; background-color: #fff; box-shadow: 0 3px 16px rgba(0, 0, 0, 0.16); border-radius: 12px; padding: 30px 16px 16px 16px; z-index: 105;}
.modal .modal-wrapper.active {display: block;}
.modal .modal-wrapper.sub-modal {z-index: 106;}
.modal .modal-wrapper .modal-content p {line-height: 24px;}
.modal .modal-wrapper .modal-footer {}
.modal .modal-wrapper .modal-footer .modal-button {}
.modal .modal-wrapper .modal-footer .modal-button button {margin-right: 8px; cursor: pointer;}
.modal .modal-wrapper .modal-footer .modal-button button:last-child {margin-right: 0;}

/* Popup */
.popup {position: relative;}
.popup .popup-wrapper {position: fixed; background-color: #fff; width: 100%; z-index: 105;}
/* Popup - Bottom */
.popup .popup-wrapper.popup-bottom {left: 0; bottom: -150%; border-radius: 12px 12px 0 0; transition: bottom 0.5s; padding: 20px 27px 60px 27px}
.popup .popup-wrapper.popup-bottom.reset {bottom: -80%;}
.popup .popup-wrapper.popup-bottom.active {bottom: 0;}
.bottom-sheet {position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 100%; height: 45px; z-index: 5;}
.bottom-sheet::after {position: absolute; top: 16px; left: 50%; transform: translateX(-50%); content: ''; width: 30px; height: 3px; background-color: rgb(221, 221, 221);}
/* Popup - FullScreen */
.popup .popup-wrapper.popup-full {display: none; left: 0; top: 0; height: 100%; overflow-y: auto;}
.popup .popup-wrapper.popup-full.active {display: block;}
.popup .popup-wrapper.popup-full .pf-header {position: relative; display: flex; justify-content: center; align-items: center; height: 70px; border-bottom: 1px solid rgb(244, 244, 244);}
.popup .popup-wrapper.popup-full .pf-header .header-title {width: 100%; font-size: 1.8rem; text-align: center;}
.popup .popup-wrapper.popup-full .pf-header .header-after {position: absolute; top: 50%; left: 16px; transform: translateY(-50%);}
.popup .popup-wrapper.popup-full .pf-header .header-before {position: absolute; top: 50%; right: 16px; transform: translateY(-50%);}
.popup .popup-wrapper.popup-full .pf-header .header-before .btn_reset {font-size: 12px; font-weight: 500; color: rgb(174, 174, 174);}

.popup .popup-wrapper.popup-full .pf-body {padding: 27px 27px 40px 27px; min-height: calc(100vh - 300px);}
.popup .popup-wrapper.popup-full .pf-footer {position: relative; bottom: 0; left: 0; width: 100%; padding: 0 27px 60px 27px; background-color: #fff;}
/* .popup .popup-wrapper.popup-full .pf-footer {position: sticky; bottom: 0; left: 0; width: 100%; padding: 0 27px 60px 27px; background-color: #fff;} */
.popup .popup-wrapper.popup-full .pf-footer .tags {position: relative; top: auto; bottom: calc(100% + 16px); left: 0; padding: 12px 0;}

.popup .btn-close_popup {position: absolute; top: 16px; right: 27px; z-index: 10;}
.popup .header-after.btn-close_popup {right: auto;}

/* 스크롤 커버 - class 'wrap'에게 addClass 'not_scroll' */
.not_scroll{position: fixed; overflow: hidden; width: 100%; height: 100%}
.not_scroll #main {position: relative; top: 0;}
.overflow-scroll {overflow-x: scroll;}

/* 퀵 스타일링 */
.border-none {border: none !important;}
.border-active {border: 1px solid rgb(88, 48, 216) !important;}
.underline {text-decoration: underline !important;}
.em {position: relative;}
.em-text {position: relative; z-index: 2;}
.em-underline {position: absolute; bottom: 0; left: 0; content: ''; width: 100%; height: 14px; background-color: #fff000; border-radius: 7px; z-index: 1;}
.hidden {visibility: hidden; display: none !important; opacity: 0;}
.line-1 {display: inline-block; width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}

.height-max-content {height: max-content !important;}

.text-align-left {text-align: left;}
.text-align-center {text-align: center;}
.text-align-left {text-align: right;}
.fixed-center {position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%;}
.fixed-bottom {position: fixed !important; bottom: 0; left: 0; width: 100%;}
.flex-wrap {flex-wrap: wrap;}
.flex-align-left {display: flex; justify-content: flex-start; align-items: center;}
.flex-align-center {display: flex; justify-content: center; align-items: center;}
.flex-align-right {display: flex; justify-content: flex-end; align-items: center;}
.flex-column-center {display: flex; flex-direction: column; align-items: center;}
.flex-between-align {display: flex; justify-content: space-between; align-items: center;}

.h100p {height: 100% !important;}
/* Box-Shadow */
.box-shadow-01 {box-shadow: 0 3px 16px rgba(157, 157, 157, 0.12);}

/* 토글 버튼 */
/* .toggle-button {position: relative; display: inline-block; width: 40px; height: 20px; background-color: rgb(228, 229, 237); box-shadow: 0px 2px 2px 0 rgb(8 96 112 / 5%); border-radius: 12px; cursor: pointer; transition: background-color 0.25s ease-in-out;}
.toggle-button:after {position: absolute; top: 50%; left: 4px; transform: translateY(-50%); content: ''; width: 16px; height: 16px; background-color: #fff; border-radius: 50%; transition: left 0.25s ease-in-out;}
.toggle-button.active {background-color: #283046;}
.toggle-button.active:after {left: 20px;} */

/* 인풋박스 스타일링 */
/* input {display: inline-block; background-color: #f3f5f8; border: 1px solid #e4e7ed; border-radius: 1px; color: #000; box-sizing: border-box; text-align: right;}
input:focus {outline: none;} */

/* 체크박스 스타일링 */
/* .form-checkbox {position: relative; display: inline-flex; width: 125px;}
.form-checkbox:after {display: block; clear: both; content: '';}
.form-checkbox > input {}
.form-checkbox > input[type="checkbox"] {display: none;}
.form-checkbox > input[type="checkbox"] + label {display: inline-flex; align-items: center; width: 15px; height: 15px; background: #fff; border-radius: 3px; border: 1px solid #e6e6e6; cursor: pointer; border-radius: 3px;}
.form-checkbox > input[type="checkbox"]:checked + label {background: url(../img/icon-check.png) center center no-repeat; background-size: cover;}
.form-checkbox > label {}
.form-checkbox >  input[type="checkbox"] + label > span {position: absolute; left: 25px; display: block;} */

/* 셀렉트박스 스타일링 */
/* select {color: #000; background-color: #fff; border: 1px solid #e4e7ed; border-radius: 1px;}
select:focus {outline: none;}
select > option {} */

/* 스크롤바 스타일링 */
/* ::-webkit-scrollbar {width: 4px; background: none;}
::-webkit-scrollbar-thumb {background: #bcbcbc; border-radius: 10px; opacity: .4;}
::-webkit-scrollbar-track {background: none;} */

/* 마진 & 패딩 */
.p-0{padding:0} .p-3{padding:3px} .p-5{padding:5px} .p-10{padding:10px} .p-15{padding:15px} .p-20{padding:20px} .p-25{padding:25px} .p-30{padding:30px} .p-35{padding:35px} .p-40{padding:40px} .p-45{padding:45px} .p-50{padding:50px} .p-55{padding:55px} .p-60{padding:60px} .p-65{padding:65px} .p-70{padding:70px} .p-75{padding:75px} .p-80{padding:80px} .p-85{padding:85px} .p-90{padding:90px} .p-95{padding:95px} .p-100{padding:100px} .pt-0{padding-top:0} .pt-3{padding-top:3px} .pt-5{padding-top:5px} .pt-10{padding-top:10px} .pt-15{padding-top:15px} .pt-20{padding-top:20px} .pt-25{padding-top:25px} .pt-30{padding-top:30px} .pt-35{padding-top:35px} .pt-40{padding-top:40px} .pt-45{padding-top:45px} .pt-50{padding-top:50px} .pt-55{padding-top:55px} .pt-60{padding-top:60px} .pt-65{padding-top:65px} .pt-70{padding-top:70px} .pt-75{padding-top:75px} .pt-80{padding-top:80px} .pt-85{padding-top:85px} .pt-90{padding-top:90px} .pt-95{padding-top:95px} .pt-100{padding-top:100px} .pr-0{padding-right:0} .pr-3{padding-right:3px} .pr-5{padding-right:5px} .pr-10{padding-right:10px} .pr-15{padding-right:15px} .pr-20{padding-right:20px} .pr-25{padding-right:25px} .pr-30{padding-right:30px} .pr-35{padding-right:35px} .pr-40{padding-right:40px} .pr-45{padding-right:45px} .pr-50{padding-right:50px} .pr-55{padding-right:55px} .pr-60{padding-right:60px} .pr-65{padding-right:65px} .pr-70{padding-right:70px} .pr-75{padding-right:75px} .pr-80{padding-right:80px} .pr-85{padding-right:85px} .pr-90{padding-right:90px} .pr-95{padding-right:95px} .pr-100{padding-right:100px} .pb-0{padding-bottom:0} .pb-3{padding-bottom:3px} .pb-5{padding-bottom:5px} .pb-10{padding-bottom:10px} .pb-15{padding-bottom:15px} .pb-20{padding-bottom:20px} .pb-25{padding-bottom:25px} .pb-30{padding-bottom:30px} .pb-35{padding-bottom:35px} .pb-40{padding-bottom:40px} .pb-45{padding-bottom:45px} .pb-50{padding-bottom:50px} .pb-55{padding-bottom:55px} .pb-60{padding-bottom:60px} .pb-65{padding-bottom:65px} .pb-70{padding-bottom:70px} .pb-75{padding-bottom:75px} .pb-80{padding-bottom:80px} .pb-85{padding-bottom:85px} .pb-90{padding-bottom:90px} .pb-95{padding-bottom:95px} .pb-100{padding-bottom:100px} .pl-0{padding-left:0} .pl-3{padding-left:3px} .pl-5{padding-left:5px} .pl-10{padding-left:10px} .pl-15{padding-left:15px} .pl-20{padding-left:20px} .pl-25{padding-left:25px} .pl-30{padding-left:30px} .pl-35{padding-left:35px} .pl-40{padding-left:40px} .pl-45{padding-left:45px} .pl-50{padding-left:50px} .pl-55{padding-left:55px} .pl-60{padding-left:60px} .pl-65{padding-left:65px} .pl-70{padding-left:70px} .pl-75{padding-left:75px} .pl-80{padding-left:80px} .pl-85{padding-left:85px} .pl-90{padding-left:90px} .pl-95{padding-left:95px} .pl-100{padding-left:100px}
.m-0{margin:0} .m-3{margin:3px} .m-5{margin:5px} .m-10{margin:10px} .m-15{margin:15px} .m-20{margin:20px} .m-25{margin:25px} .m-30{margin:30px} .m-35{margin:35px} .m-40{margin:40px} .m-45{margin:45px} .m-50{margin:50px} .m-55{margin:55px} .m-60{margin:60px} .m-65{margin:65px} .m-70{margin:70px} .m-75{margin:75px} .m-80{margin:80px} .m-85{margin:85px} .m-90{margin:90px} .m-95{margin:95px} .m-100{margin:100px} .mt-0{margin-top:0} .mt-3{margin-top:3px} .mt-5{margin-top:5px} .mt-10{margin-top:10px} .mt-15{margin-top:15px} .mt-20{margin-top:20px} .mt-25{margin-top:25px} .mt-30{margin-top:30px} .mt-35{margin-top:35px} .mt-40{margin-top:40px} .mt-45{margin-top:45px} .mt-50{margin-top:50px} .mt-55{margin-top:55px} .mt-60{margin-top:60px} .mt-65{margin-top:65px} .mt-70{margin-top:70px} .mt-75{margin-top:75px} .mt-80{margin-top:80px} .mt-85{margin-top:85px} .mt-90{margin-top:90px} .mt-95{margin-top:95px} .mt-100{margin-top:100px} .mr-0{margin-right:0} .mr-3{margin-right:3px} .mr-5{margin-right:5px} .mr-10{margin-right:10px} .mr-15{margin-right:15px} .mr-20{margin-right:20px} .mr-25{margin-right:25px} .mr-30{margin-right:30px} .mr-35{margin-right:35px} .mr-40{margin-right:40px} .mr-45{margin-right:45px} .mr-50{margin-right:50px} .mr-55{margin-right:55px} .mr-60{margin-right:60px} .mr-65{margin-right:65px} .mr-70{margin-right:70px} .mr-75{margin-right:75px} .mr-80{margin-right:80px} .mr-85{margin-right:85px} .mr-90{margin-right:90px} .mr-95{margin-right:95px} .mr-100{margin-right:100px} .mb-0{margin-bottom:0} .mb-3{margin-bottom:3px} .mb-5{margin-bottom:5px} .mb-10{margin-bottom:10px} .mb-15{margin-bottom:15px} .mb-20{margin-bottom:20px} .mb-25{margin-bottom:25px} .mb-30{margin-bottom:30px} .mb-35{margin-bottom:35px} .mb-40{margin-bottom:40px} .mb-45{margin-bottom:45px} .mb-50{margin-bottom:50px} .mb-55{margin-bottom:55px} .mb-60{margin-bottom:60px} .mb-65{margin-bottom:65px} .mb-70{margin-bottom:70px} .mb-75{margin-bottom:75px} .mb-80{margin-bottom:80px} .mb-85{margin-bottom:85px} .mb-90{margin-bottom:90px} .mb-95{margin-bottom:95px} .mb-100{margin-bottom:100px} .ml-0{margin-left:0} .ml-3{margin-left:3px} .ml-5{margin-left:5px} .ml-10{margin-left:10px} .ml-15{margin-left:15px} .ml-20{margin-left:20px} .ml-25{margin-left:25px} .ml-30{margin-left:30px} .ml-35{margin-left:35px} .ml-40{margin-left:40px} .ml-45{margin-left:45px} .ml-50{margin-left:50px} .ml-55{margin-left:55px} .ml-60{margin-left:60px} .ml-65{margin-left:65px} .ml-70{margin-left:70px} .ml-75{margin-left:75px} .ml-80{margin-left:80px} .ml-85{margin-left:85px} .ml-90{margin-left:90px} .ml-95{margin-left:95px} .ml-100{margin-left:100px}
/* 퍼센테이지 */
.w01p {width: 1%;}.w02p {width: 2%;}.w03p {width: 3%;}.w04p {width: 4%;}.w05p {width: 5%;}.w06p {width: 6%;}.w07p {width: 7%;}.w08p {width: 8%;}.w09p {width: 9%;}.w10p {width: 10%;}.w11p {width: 11%;}.w12p {width: 12%;}.w13p {width: 13%;}.w14p {width: 14%;}.w15p {width: 15%;}.w16p {width: 16%;}.w17p {width: 17%;}.w18p {width: 18%;}.w19p {width: 19%;}.w20p {width: 20%;}.w21p {width: 21%;}.w22p {width: 22%;}.w23p {width: 23%;}.w24p {width: 24%;}.w25p {width: 25%;}.w26p {width: 26%;}.w27p {width: 27%;}.w28p {width: 28%;}.w29p {width: 29%;}.w30p {width: 30%;}.w31p {width: 31%;}.w32p {width: 32%;}.w33p {width: 33%;}.w34p {width: 34%;}.w35p {width: 35%;}.w36p {width: 36%;}.w37p {width: 37%;}.w38p {width: 38%;}.w39p {width: 39%;}.w40p {width: 40%;}.w41p {width: 41%;}.w42p {width: 42%;}.w43p {width: 43%;}.w44p {width: 44%;}.w45p {width: 45%;}.w46p {width: 46%;}.w47p {width: 47%;}.w48p {width: 48%;}.w49p {width: 49%;}.w50p {width: 50%;}.w51p {width: 51%;}.w52p {width: 52%;}.w53p {width: 53%;}.w54p {width: 54%;}.w55p {width: 55%;}.w56p {width: 56%;}.w57p {width: 57%;}.w58p {width: 58%;}.w59p {width: 59%;}.w60p {width: 60%;}.w61p {width: 61%;}.w62p {width: 62%;}.w63p {width: 63%;}.w64p {width: 64%;}.w65p {width: 65%;}.w66p {width: 66%;}.w67p {width: 67%;}.w68p {width: 68%;}.w69p {width: 69%;}.w70p {width: 70%;}.w71p {width: 71%;}.w72p {width: 72%;}.w73p {width: 73%;}.w74p {width: 74%;}.w75p {width: 75%;}.w76p {width: 76%;}.w77p {width: 77%;}.w78p {width: 78%;}.w79p {width: 79%;}.w80p {width: 80%;}.w81p {width: 81%;}.w82p {width: 82%;}.w83p {width: 83%;}.w84p {width: 84%;}.w85p {width: 85%;}.w86p {width: 86%;}.w87p {width: 87%;}.w88p {width: 88%;}.w89p {width: 89%;}.w90p {width: 90%;}.w91p {width: 91%;}.w92p {width: 92%;}.w93p {width: 93%;}.w94p {width: 94%;}.w95p {width: 95%;}.w96p {width: 96%;}.w97p {width: 97%;}.w98p {width: 98%;}.w99p {width: 99%;}.w100p {width: 100%;}
/* 인덱스 */
.z-100 {z-index: 100 !important;} .z-105 {z-index: 105 !important;} .z-110 {z-index: 110 !important;} .z-115 {z-index: 115 !important;} .z-120 {z-index: 120 !important;}

/****************************** 라이브러리 커스터마이징 ******************************/

@media screen and (max-width: 768px) {
}