/* color palette*/
:root {
    --primary: #8C35FA;
    --secondary: #5B1EA8;
    --tertiary: #faf8ff;
    --sucess: #63ff63;
    --info: #FDE41F;
    --warning: red;
    --gray1: #ffffff;
    --gray2: #eaeaea;
    --gray3: #d3d3d3;
    --gray4: #bbbbbb;
    --gray5: #6F6f6f;
    --gray6: #222222;
    --bg: #ffffff;
}
*,
::before,
::after {
    box-sizing: border-box; /* 1 */
    border-width: 0; /* 2 */
    border-style: solid; /* 2 */
    border-color: #ccc; /* 2 */
}
img {
    -webkit-user-drag: none;
    -khtml-user-drag: none;
    -moz-user-drag: none;
    -o-user-drag: none;
    user-drag: none;
}
/* #custom-datepicker# */
#ui-datepicker-div{
    font-family: 'Noto Sans KR', sans-serif;
    background-color: white;
}
.ui-datepicker-header {
    background-color: rgba(140, 53, 250, 0.05);
    color: #444;
}
.ui-datepicker-title {
    font-weight: 500;
    background: #F3F7FA;
    border-radius: 10px;
    display: flex;
    gap: 15px;
    justify-content: center;
    align-items: center;
}
.ui-datepicker-title select{
    background: #F3F7FA;
    width: 35%;
}
.ui-datepicker-calendar thead th{
    font-weight: 500;
}
.ui-datepicker-title *:focus{
    outline: none;
}
.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default, .ui-button, html .ui-button.ui-state-disabled:hover, html .ui-button.ui-state-disabled:active{
    border: none;
    background: none;
    font-weight: normal;
    color: #444;
    text-align: center;
    padding: 3px 5px;
}
.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active, a.ui-button:active, .ui-button:active, .ui-button.ui-state-active:hover {
    border: 1px solid #323B50;
    background: #323B50;
    border-radius: 5px;
    font-weight: normal;
    color: #fff;
}
.ui-widget-header .ui-icon {
    background-image: none;
}
.ui-datepicker-prev{
    background-image: url(../img/icon_left.svg);
    background-repeat: no-repeat;
    background-position: 50%;
}
.ui-datepicker-prev > span, .ui-datepicker-next > span {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

.ui-datepicker-next{
    background-image: url(../img/icon_right.svg);
    background-repeat: no-repeat;
    background-position: 50%;
}


body {
    min-width: 1000px;
    width : 100%;
    font-family: "Pretendard", sans-serif;
    color: #111;
    /*font-weight: bold;*/
    line-height: 1.2;
    letter-spacing: -0.01em;
    position: relative;
}
/*.fixwidth {*/
/*    width: 870px;*/
/*    margin: 0 auto;*/
/*}*/

/*a {*/
/*    display: block;*/
/*    box-sizing: border-box;*/
/*    color: #111;*/
/*    text-decoration: none;*/
/*    text-align: center;*/
/*    font-size: 16px;*/
/*    font-weight: 500;*/
/*}*/

/*.review_image{*/
/*    margin-top: 25px;*/
/*    max-width: 870px;*/
/*}*/

/*.bg_n_rp {*/
/*    background-repeat: no-repeat;*/
/*}*/
/*input {*/
/*    font-family: "Pretendard Variable", "Pretendard", sans-serif;*/
/*    font-size: 16px;*/
/*    font-weight: 400;*/
/*    border: 1px solid #ddd;*/
/*    background-color: transparent;*/
/*    color: #999;*/
/*}*/
/*.input_default {*/
/*    font-family: "Pretendard Variable", "Pretendard", sans-serif;*/
/*    font-size: 16px;*/
/*    font-weight: 400;*/
/*    border: 1px solid #ddd;*/
/*    background-color: transparent;*/
/*    color: #999;*/
/*}*/
/*.disabled {*/
/*    background-color: rgba(239, 239, 239, 0.3);*/
/*}*/
/*button {*/
/*    display: block;*/
/*    margin: 0 auto;*/
/*    font-family: "Pretendard Variable", "Pretendard", sans-serif;*/
/*    font-size: 16px;*/
/*    font-weight: 700;*/
/*    text-align: center;*/
/*    background-color: transparent;*/
/*    border: none;*/
/*    cursor: pointer;*/
/*}*/
/*.color_highlight {*/
/*    color: #8c35fa;*/
/*}*/
/*.a_span_default {*/
/*    position: absolute;*/
/*    width: 1px;*/
/*    height: 1px;*/
/*    overflow: hidden;*/
/*    clip: rect(0,0,0,0);*/
/*}*/

/*헤더 부분*/
/*header {*/
/*    height: 80px;*/
/*    display: flex;*/
/*    justify-content: space-between;*/
/*    align-items: center;*/
/*    padding: 0 55px;*/
/*    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);*/
/*}*/

/*.image_width_88 {*/
/*    width: 88px;*/
/*}*/

/*.gnb {*/
/*    display: flex;*/
/*    gap: 50px;*/
/*}*/

/*.gnb > li.active > a {*/
/*    color: #5b1ea8;*/
/*}*/
/*.utility {*/
/*    text-align: right;*/
/*    position: relative;*/
/*}*/
/*.utility > ul {*/
/*    display: flex;*/
/*    position: relative;*/
/*}*/
/*!* 로그인 되었을 때 *!*/
/*.hidden {*/
/*    display: none;*/
/*}*/
/*!* 로그인 안 되었을 때 *!*/
/*.utility > ul.hidden {*/
/*    display: none;*/
/*}*/
/*.utility > ul > li:last-child::before {*/
/*    content: "";*/
/*    display: block;*/
/*    position: absolute;*/
/*    height: 12px;*/
/*    top: 50%;*/
/*    transform: translateY(-50%);*/
/*    border-right: 1px solid #ddd;*/
/*}*/
/*.utility_a {*/
/*    text-decoration: none;*/
/*    color: #555;*/
/*    font-size: 15px;*/
/*    font-weight: 600;*/
/*}*/
.login {
    padding-left: 26px;
    background-image: url('../img/user-01.png');
}
.logout {
    padding: 0 15px 0 23px;
    background-image: url('../img/logout.png');
    background-position-y: center;
}
.my {
    padding-left: 15px;
}

/* form 요소 common */
/*.form_fixwidth {*/
/*    width: 600px;*/
/*    margin: 0 auto;*/
/*}*/
.form_list {
    margin-top: 40px;
}
.form_item {
    width: 100%;
}
.form_h2 {
    width: 200px;
    height: 82px;
    margin: 58px auto 0 auto;
}
.form_h2 > img {
    width: 100%;
    height: 100%;
}
.form_header {
    border-bottom: 1px solid #8e96a0;
    padding-bottom: 9px;
    margin-top: 50px;
}
.form_n_p {
    padding-bottom: 20px;
}
.form_header > h3 {
    font-size: 30px;
}
.form_header > p {
    margin-top: 23px;
    display: flex;
    justify-content: space-between;

    font-family: "ABeeZee", sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: #5e6a7c;
}
.agreeInfoFlex {
    display: flex;
    justify-content: space-between;
}

.login_box {
    border: 1px solid #ddd;
    border-radius: 20px;
    margin-top: 23px;
}
.form_content {
    padding: 46px 50px;
    display: flex;
    flex-direction: column;
}
.form_title {
    font-size: 18px;
}
.required_mark {
    color: #ec0033;
    font-weight: 500;
}
.form_label {
    margin-top: 15px;
    display: flex;
    justify-content: space-between;
}
.form_label > span {
    color: #555;
    line-height: 50px;
    padding: 0 6px;
}
.form_input_item {
    width: 100%;
    height: 50px;
    line-height: 50px;

    border-radius: 10px;
    padding: 0 16px;
    box-sizing: border-box;
    font-weight: 500;
}
.button_wrap {
    margin-top: 40px;
}
.button_wrap > div {
    margin: 18px auto 50px auto;
    width: 400px;
    display: flex;
}
.button_wrap > div > a {
    width: 248px;
    padding: 16px 18px;
    letter-spacing: 0;
    font-weight: 400;
}
.find_submit {
    width: 400px;
    height: 50px;
    line-height: 50px;
    border-radius: 12px;
    color: #fff;
    font-size: 21px;
    background-color: #8046F1;
}

.upload_button {
    display: block;
    width: 130px;
    height: 50px;
    line-height: 50px;
    border-radius: 10px;
    background-color: #777;
    margin-left: 10px;

    color: #fff;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0;
    text-align: center;
    position: relative;
    cursor: pointer;
}
.upload_button::before {
    content: "";
    display: inline-block;
    width: 20px;
    height: 20px;
    background-image: url('../img/upload_icon.png');
    background-repeat: no-repeat;
    background-position: center;
    padding-right: 7px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}
.upload_button > span {
    padding-left: 30px;
}
.upload_button > input {
    display: none;
}
.guide_text {
    margin-top: 10px;
    color: #8C35FA;
    font-size: 13px;
    letter-spacing: 0;
}
.submit {
    width: 400px;
    height: 50px;
    line-height: 50px;
    margin: 100px auto;
    border-radius: 12px;
    color: #fff;
    font-size: 21px;
    background-color: #8C35FA;
}


/* 로그인 */
.login_submit, .move_to_signup {
    width: 400px;
    height: 50px;
    line-height: 50px;
    border-radius: 12px;
    font-size: 21px;
}
.login_submit {
    background-color: #8046F1;
    color: #fff;
    border: none;
    cursor: pointer;
    margin-bottom: 30px;
}
.move_to_signup {
    margin: 0 auto;
    color: #6123DA;
    border: 1px solid #6123DA;
    background-color: #fff;
    text-decoration: none;
    margin-top: 18px;
}

/* 회원가입 */
.signup_required {
    margin-top: 58px;
}
.signup_select {
    margin-top: 50px;
}
.signup_select > div {
    padding-bottom: 11px;
}
.error_text {
    font-weight: 400;
    margin-top: 11px;
    padding-left: 6px;
    color: #D8515E;
}
.upload_box {
    display: flex;
}
.upload_box > div {
    width: 70%;
}
.upload_button {
    width: 130px;
    height: 50px;
    line-height: 50px;
    border-radius: 10px;
    background-color: #777;
    margin-left: 10px;

    color: #fff;
    font-size: 14px;
    letter-spacing: 0;
    position: relative;
}
.upload_button::before {
    content: "";
    display: inline-block;
    width: 20px;
    height: 20px;
    background-image: url('../img/upload_icon.png');
    background-repeat: no-repeat;
    background-position: center;
    padding-right: 7px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}
.upload_button > span {
    padding-left: 30px;
}
.upload_button > input {
    display: none;
}
.guide_text {
    display: block;
    margin-top: 10px;
    color: #8C35FA;
    font-size: 13px;
    font-weight: 400;
    letter-spacing: 0;
}
.signup_submit {
    background-color: #8046F1;
    margin: 55px auto 70px auto;
}
/* 회원가입 완료창 */
.character_image {
    display: block;
    max-width: 350px;
    margin: 80px auto 0 auto;
}
.ment_wrap {
    margin-top: 70px;
    font-size: 30px;
    text-align: center;
}
.link_wrap {
    margin-top: 75px;
    display: flex;
    gap: 70px;
    justify-content: center;
}
.link_wrap > a {
    padding: 0 100px;
    line-height: 50px;
    background-color: #8C35FA;
    border-radius: 15px;
    font-size: 16px;
    color: #fff;
}
/* my page 공통 속성 */
.wrap {
    min-height: calc(100vh - 500px);
    width: 1500px;
    display: flex;
    margin: 60px auto 0 auto;
    justify-content: space-between;
}
.aside_transparent {
    width: 270px;
}
.aside_box {
    width: 270px;
    margin-top: 60px;
    border: 1px solid #5B1EA8;
    border-radius: 15px;
    padding: 40px 20px;
    box-sizing: border-box;
}
.aside_box > ul {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.aside_box > ul > li {
    height: 50px;
    line-height: 50px;
    border-radius: 10px;
    padding: 0px 20px 0px 54px;
    box-sizing: border-box;
    cursor: pointer;

    font-weight: 700;
    background-repeat: no-repeat;
    background-size: 25px 25px;
    background-position: 20px 13px;
}
.aside_box > ul > li a {
    text-decoration: none;
    text-align: left;
    color: #5B1EA8;
}
.aside_box > ul > li.active > a {
    color: #fff;
}
.aside_box > ul > li.active {
    background-color: #5B1EA8;
    color: #fff;
}
.my_info {background-image: url('../img/icon_user_purple.png');}
.pw_info {background-image: url('../img/icon_pw_purple.png');}
.dropitem {
    background-image: url('../img/icon_manage_purple.png');
    position: relative;
}
.my_info.active {background-image: url('../img/icon_user_white.png');}
.pw_info.active {background-image: url('../img/icon_pw_white.png');}
.dropitem.active {background-image: url('../img/icon_manage_white.png');}

.dropitem > span {
    color: #5B1EA8;
}
.dropitem > span::after {
    content: "";
    display: block;
    width: 24px;
    height: 24px;
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);

    background-image: url('../img/drop_up_purple.png');
}
.dropitem.up > span::after {
    background-image: url('../img/drop_down_purple.png');
}
.dropmenu {
    font-size: 15px;
}
/* .dropmenu 스타일 속성 우선순위 이슈로 따로 작성 */
.aside_box > ul > li:last-child {
    font-weight: 500;
    height: 200%;
    padding: 0;
}
.dropmenu > ul > li {
    border-radius: 10px;
}
.dropmenu > ul > li > a {
    padding-left: 54px;
}
.dropmenu > ul > li.active {
    background-color: #5B1EA8;
    color: #fff;
}
.dropmenu > ul > li.active > a {
    color: #fff;
}
.content_box {
    margin: 0;
}
.my_info_content, .company_info_content, .change_pw {
    margin-top: 60px;
}
.info_header > h3 {
    font-size: 30px;
    font-weight: 700;
}
.info_header > h3 > span {
    font-size: 20px;
    font-weight: 500;
    color: #777;
    padding-left: 7px;
}
.form_wrap {
    gap: 35px;
    padding: 50px 40px;
}
.form_long {
    width: 100%;
}

/* my page - manage 페이지 */
.manage_class {
    margin-top: 60px;
    display: flex;
    justify-content: space-between;
}
.manage_button_wrap {
    display: flex;
    gap: 8px;
}
.batch_edit {
    border: 1px solid #ddd;
    padding: 0 15px 0 40px;
    box-sizing: border-box;
    background-repeat: no-repeat;
    background-position: 15px center;
    border-radius: 10px;
    height: 40px;
    color: #777;
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
}
.batch_message {
    background-image: url('../img/message_button.png');
}
.batch_time {
    background-image: url('../img/time_button.png');
}
.resend {
    background-color: #8C35FA;
    color: #fff;
    padding: 0 30px;
    border-radius: 10px;
}
.delete {
    background-color: #777;
    color: #fff;
    padding: 0 30px;
}
.table_wrap {
    margin-top: 40px;
    border: 1px solid #ddd;
    border-radius: 15px;
    overflow: hidden;
}
.table_wrap > table {
    width: 100%;
    border-collapse: collapse;
    border-style: none;
    letter-spacing: 0;
    text-align: center;
}
.table_wrap > table > thead {
    background-color: #f7f7f7;
    font-size: 14px;
    font-weight: 600;
}
.table_wrap > table > tbody {
    font-size: 15px;
    font-weight: 400;
}
.table_wrap tr {
    line-height: 50px;
    position: relative;
}

.class_name {
    text-align: left;
    font-weight: 600;
    padding-left: 40px;
    position: relative;
}
.edit {
    border: none;
    width: 16px;
    height: 16px;
    background-color: transparent;
    background-image: url('../img/edit_button.png');
    background-repeat: no-repeat;
    background-size: 16px;
    display: inline-block;
    /*margin-left: 12px;*/
    /*transform: translateY(-50%);*/
    cursor: pointer;
}
.link {
    border: none;
    width: 16px;
    height: 16px;
    background-color: transparent;
    background-image: url('../img/link_button.png');
    background-repeat: no-repeat;
    background-size: 16px;
    display: inline-block;
    margin: 0 0 0 12px;
    cursor: pointer;
}
.link > span {
    display: block;
    width: 1px;
    height: 1px;
    clip: rect(0,0,0,0);
    overflow: hidden;
}
.tableEditInput {
    padding: 3px 0 3px 5px;
}
.save {
    display: inline-block;
    margin-left: 10px;
    padding: 4px 10px;
    background-color: #323B50;
    border-radius: 10px;
    color: #fff;
    font-size: 13px;
}
.cancel {
    display: inline-block;
    margin-left: 10px;
    padding: 4px 10px;
    background-color: var(--gray4);
    border-radius: 10px;
    color: #111;
    font-size: 13px;
}
.tableButton {
    margin: 0;
    font-size: 11px;
}
.tableButtonWrap {
    display: flex;
    gap: 5px;
    margin-top: -5px;
    margin-bottom: 10px;
}
.table_checkbox {
    padding: 0 15px;
}
/*input[type="checkbox"] {*/
/*    width: 15px;*/
/*    height: 15px;*/
/*    border-radius: 3px;*/
/*    position: absolute;*/
/*    top: 50%;*/
/*    transform: translateY(-50%);*/
/*    margin: 0;*/
/*}*/
/*input[type="checkbox"]:checked::after{*/
/*    content:"";*/
/*    display: block;*/
/*    width: 15px;*/
/*    height: 15px;*/
/*    background-image: url('../img/checkbox_checked.png');*/
/*    background-size: 15px;*/
/*    background-repeat: no-repeat;*/
/*    position: absolute;*/
/*    left: 0;*/
/*    top:0;*/
/*}*/
.payment, .pay_info {
    display: block;
    width: 100px;
    margin: 0 auto;
    line-height: 30px;
    padding: 0 5px;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    text-align: center;

    cursor: pointer;
}
.payment {
    border: 1px solid #8C35FA;
    border-radius: 8px;
    color: #8C35FA;
}
.payment:hover {
    background-color: #8C35FA;
    color: #fff;
}
.pay_info {
    border-radius: 8px;
    background-color: #ddd;
    color: #555;
}
.pay_info:hover {
    border: 1px solid #ddd;
    background-color: #fff;
    color: #777;
}
.class_setting {
    display: block;
    margin-right: 50px;
    position: relative;
}
.class_setting > a {
    width: 24px;
    height: 24px;
    background-image: url('../img/settings.png');
    background-repeat: no-repeat;
    background-size: 24px;

    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.page_idc_wrap {
    margin-top: 40px;
}
.page_number {
    display: flex;
    gap: 24px;
    align-items: center;
    width: 300px;
    height: 30px;
    margin: 0 auto;
}
.page_number > button {
    width: 15px;
    height: 15px;
    padding: 0;
}
.to_start {
    background-image: url('../img/to_start.png');
    background-size: 15px;
}
.prev {
    background-image: url('../img/prev.png');
    background-size: 8px;
}
.next {
    background-image: url('../img/next.png');
    background-size: 8px;
}
.to_end {
    background-image: url('../img/to_end.png');
    background-size: 15px;
}
.page_number > ol {
    display: flex;
    gap: 10px;
}
.page_number > ol > li > a {
    display: block;
    width: 30px;
    height: 30px;
    line-height: 30px;
    border-radius: 50%;

    text-align: center;
    text-decoration: none;
    color: #555;
    font-size: 15;
    font-weight: 500;
}
.page_number > ol > li.active > a {
    background-color: #5B1EA8;
    color: #fff;
    font-weight: 700;
}
.page_number > button > span {
    display: block;
    width: 1px;
    height: 1px;
    clip: rect(0,0,0,0);
    overflow: hidden;
}
.idc_button_wrap {
    float: right;
    margin-top: -30px;
}
.idc_button_wrap > button {
    display: inline-block;
    font-size: 15px;
    border-radius: 10px;
    height: 40px;
    line-height: 40px;
}
.button_edit {
    color: #5B1EA8;
    background-color: #ECDDFF;
    padding: 0 25px;
}
.button_save {
    color: #fff;
    background-color: #8C35FA;
    padding: 0 50px;
}
.chosen_gift {
    display: flex;
    align-items: center;
    justify-content: center;
}
.chosen_gift_name {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 150px;
}
.resend_separately > button {
    color: #777;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-weight: 600;
    font-size: 13px;
    padding: 7px 20px;
}
.resend_separately > button.inactive {
    color: #555;
    background-color: #ddd;
    cursor: default;
}
.resend_separately > button.active {
    color: var(--primary);
    border: 1px solid var(--primary);
}
.resend_separately > button.active:hover {
    color: #fff;
    background-color: var(--primary);
}
.check_detail {
    display: block;
    margin-right: 10px;
}
.check_detail > button {
    color: #777;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-weight: 600;
    font-size: 13px;
    padding: 7px 20px;
}
/* manage - class 모달창 - 확정클래스 보기 */
.confirmed_class {
    width: 600px;
    height: 65%;
}
.class_content {
    width: 470px;
    margin: 0 auto;
}
.class_img {
    margin: 30px auto;
    width: 100%;
    height: 260px;
    border: 1px solid #ddd;
    border-radius: 10px;
}
.class_info {
    margin-top: 30px;
}
.class_info > h3 {
    font-size: 18px;
    text-align: center;
}
.class_info > ul {
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    font-size: 16px;
    font-weight: 400;
}
.class_info > ul > li {
    display: flex;
}
.sort {
    display: block;
    font-weight: 600;
    width: 120px;
}
/* 모달창 - 결제정보 - 계좌이체 시 */
.pay_cash {
    width: 500px;
}
.pay_content {
    margin-top: 40px;
    border-top: 1px solid #ddd;
}
.pay_content > ul {
    margin: 30px auto;
}
.pay_content > ul > li {
    display: flex;
    justify-content: space-between;
}
.pay_content > ul > li:not(:first-child) {
    margin-top: 20px;
}
.list_title {
    font-weight: 500;
    color: #777;
}

/* 모달창 - 결제정보 - 카드결제 시 */
.card_info {
    margin-top: 30px;
    padding: 0 15px;
    width: 400px;
    line-height: 50px;
    border: 1px solid #ddd;
    border-radius: 10px;
    background-color: #f9f9f9;
    color: #5B1EA8;
}

/* 모달창 - 메세지 일괄 발송 */
.message_modal_header {
    text-align: center;
}
.messageContent {
    width: 100%;
    margin: 20px auto 0 auto;
}
.default_message {
    display: block;
    position: relative;
}
.default_message > span {
    display: block;
    padding-left: 25px;
}
.messageContent > textarea {
    resize: none;
    margin: 20px 0 40px 0;
    padding: 20px;
    border: 1px solid #999;
    border-radius: 10px;
    color: #999;
    width: 100%;
    height: 270px;

    font-family: 'Pretendard-Regular', sans-serif;
}
/* 모달창 - 상세 정보 보기 */
.detail_modal_content {
    border-top: 1px solid #ddd;
    padding: 50px 50px 0;
    margin: 40px 0 60px 0;
    display: flex;
    flex-direction: column;
    gap: 20px;
    font-weight: 400;
}
.detail_modal_content > li {
    display: flex;
}
/* 결제하기 페이지 */
.pay_header {
    margin: 130px auto 0 auto;
    text-align: center;
}
.pay_header > h3 {
    font-size: 35px;
}
.pay_header > p {
    margin-top: 12px;
    font-size: 16px;
    font-weight: 600;
    color: #999;
}
.pay_wrap {
    margin-top: 60px;
}
.pay_class {
    display: flex;
    gap: 24px;
}
.pay_button > a {
    display: block;
    box-sizing: border-box;
    width: 400px;
    height: 150px;
    line-height: 150px;
    text-align: right;
    border-radius: 18px;
    padding: 0 80px;
    text-decoration: none;

    background-repeat: no-repeat;
    background-size: 25px;
}
.pay_button > a > span.small_type {
    margin-left: 10px;
    padding: 5px 15px;
    line-height: 25px;
    font-size: 14px;
    font-weight: 400;
    background-color: rgba(0,0,0,0.2);
    border-radius: 5px;
}
.pay_button > span {
    display: block;
    margin-top: 15px;
    color: #333;
    font-size: 13px;
    font-weight: 400;
    text-align: center;
}
.pay_button > a > span {
    color: #fff;
    font-size: 18px;
}
.pay_cash > a {
    background-color: #5B1EA8;
    background-image: url('../img/pay_cash.png');
    background-position: 110px center;
}
.pay_card > a {
    background-color: #8C35FA;
    background-image: url('../img/pay_card.png');
    background-position: 92px center;
}
.pay_later {
    display: block;
    text-align: center;
    margin-top: 60px;
    color: #666;
    font-size: 16px;
    font-weight: 600;
}
/* 결제하기 모달창 */
.form_item:not(:first-child) {
    margin-top: 30px;
}
.form_title {
    font-size: 16px;
}
.account_info {
    margin-top: 80px;
}
.account_info > h4 {
    font-size: 18px;
}
.account_info > ul {
    margin-top: 7px;
    font-size: 16px;
    font-weight: 400;
    color: #777;
}
.account_info > ul > li:not(:first-child) {
    margin-top: 4px;
}
.bank_info {
    padding-left: 25px;
    background-repeat: no-repeat;
    background-size: 16px;
    background-position: 0px center;
}
.wooribank {
    background-image: url('../img/wooribank.png');
}
.kbbank {
    background-image: url('../img/kbbank.png');
}
.deposit_info {
    margin-top: 40px;
}
.deposit_info > h3 {
    font-size: 18px;
}
.deposit_info > p {
    margin-top: 17px;
    font-size: 13px;
    font-weight: 300;
}
.deposit_info > ul {
    margin-top: 40px;
    display: flex;
    gap: 15px;
    font-size: 14px;
    font-weight: 300;
    line-height: 1.6;
}
.deposit_info > ul > li {
    border: 1px solid #ddd;
    border-radius: 12px;
    padding: 15px 30px;
    flex: 1;
}
.total_amount {
    display: flex;
    justify-content: space-between;
    margin-top: 35px;
    font-size: 18px;
    font-weight: 500;
}
.pay_highlight {
    color: #5B1EA8;
}
.pay_submit {
    margin: 50px auto 40px auto;
}
/* 결제 완료창 */
.complete_image {
    display: block;
    max-width: 350px;
    margin: 150px auto 0;
}
.ment_wrap > p {
    font-size: 18px;
    font-weight: 400;
    margin-top: 12px;
    color: #999;
}
/* 푸터 부분 */
.footer::before {
    content: "";
    display: block;
    margin-bottom: 100px;
}
.footer {
    position: absolute;
    right: 0;
    left: 0;
    z-index: -1;
}
.footerWrap {
    background-color: #d2cad8;
    padding: 50px 0;
}
.footerWrap > fixwidth {
    display: flex;
    justify-content: space-between;
}
.footerNav > ul {
    display: flex;
    position: relative;
}
.footerNav > ul > li:not(.first)::before {
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    height: 12px;
    border-right: 1px solid #767676;
}
.footerNav > ul > li > a {
    color: #111;
    text-decoration: none;
    font-weight: 400;
    font-size: 12px;
    line-height: 22px;
    padding: 0 16px;
}
.footerNav > ul > li.first > a {
    padding: 0 16px 0 0 ;
}
.footerNav > ul > li.thin > a {
    color: #505050;
}
.footerSection1 > img {
    margin-top: 28px;
    width: 116px;
}
.footertext {
    margin-top: 24px;
    font-size: 12px;
    font-weight: 400;
    line-height: 20px;
    color: #767676;
}
.footertext > div > p:last-child {
    margin-top: 6px;
}
.footertext > p {
    margin-top: 12px;
}
.footertext > div > p > span {
    display: inline-block;
    padding-right: 5px;
}
.footertext > div > p > span:last-child {
    padding-right: 0;
}
.footerSection2 > div > h5 {
    color: #505050;
    font-weight: 400;
    line-height: 1.5;
}
.footerSection2 > div > span {
    color: #111;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.5;
    margin-top: 12px;
}
.footer_sns {
    margin-top: 12px;
    display: flex;
    gap: 8px;
}
.footer_sns > li {
    width: 24px;
    height: 24px;
}
.footer_sns > li > a {
    display: block;
    height: 100%;
    background-size: contain;
    background-repeat: no-repeat;
    background-size: 24px;
}
.footer_sns > li:nth-child(1) > a {
    background-image: url('../img/logo_blog.png');
}
.footer_sns > li:nth-child(2) > a {
    background-image: url('../img/logo_insta.png');
}


/* --------------------------------------------------------------- */
/* 모달창 - 공통 스타일 */
/*.modalWrap {*/
/*    max-height: 100%;*/
/*    position: absolute;*/
/*    bottom: -100%;*/
/*    left: 0;*/
/*    right: 0;*/
/*    transition: 0.3s;*/
/*}*/
/*.modal_bg {*/
/*    position: fixed;*/
/*    top: 0;*/
/*    right: 0;*/
/*    bottom: 0;*/
/*    left: 0;*/
/*    z-index: 100;*/
/*    background-color: rgba(0, 0, 0, 0.5);*/
/*}*/
.modal-wrap {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 100;
}
.modal-background {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 100;
}
.modal.wide-width {
    width: auto;
    min-width: 600px;
    max-height: 90%;
}
.modal {
    width: 600px;
    max-height: 75%;
    overflow-y: scroll;
    border-radius: 20px;
    background-color: #fff;
    color: #111;
    letter-spacing: -0.01em;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 40px 20px 30px 20px;
    box-sizing: border-box;
    z-index: 101;
}
.modal::-webkit-scrollbar {width: 5px;}
.modal::-webkit-scrollbar-thumb {
    background-color: #999;
    background-clip: padding-box;
    border: 15px solid transparent;
    border-right: 0;
    border-left: 0;
    border-radius: 5px;
}
.modal_form_header {
    border-bottom: 1px solid #8e96a0;
    padding-bottom: 9px;
    margin-top: 20px;
    font-size: 30px;
}
.modal_form_header > p {
    margin-top: 23px;
    display: flex;
    justify-content: space-between;

    font-family: "ABeeZee", sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: #5e6a7c;
}
.modal_h > h2 {
    font-size: 20px;
}
.modal_h > p {
    margin-top: 15px;
    color: #777;
    font-weight: 400;
}
.close {
    border: none;
    padding: 0;
    width: 20px;
    height: 20px;
    background-repeat: no-repeat;
    background-color: transparent;
    background-image: url('../img/close.png');
    cursor: pointer;

    position: absolute;
    top: 40px;
    right: 40px;
}
.modal_submit {
    width: 300px;
    height: 50px;
    margin: 50px auto;
    border-radius: 15px;
    background-color: #8c35fa;
    color: #fff;
    font-size: 18px;
}
.submit_n_margin {
    margin: 0 auto;
}
/* 모달창 - 문의하기 */
#inquiry_c {
    margin-top: 40px;
}
#inquiry_c > li > h3 {
    font-size: 18px;
    font-weight: 700;
}
#inquiry_c > li > textarea {
    resize: none;
    margin-top: 15px;
    width: 100%;
    height: 150px;
    border: 1px solid #ddd;
    border-radius: 12px;
    padding: 16px;
    box-sizing: border-box;

    font-family: 'Pretendard-Regular', sans-serif;
}

#inquiry_c > li:not(.first) {
    margin-top: 30px;
}
#tel {
    display: flex;
    gap: 6px;
}
#tel > select, #tel > select~input {
    display: block;
    margin-top: 15px;
    height: 50px;
    padding: 12px;
    box-sizing: border-box;
    border: 1px solid #ddd;
    border-radius: 10px;

    font-family: 'Pretendard-Regular', sans-serif;
    font-size: 16px;
    color: #111;
}
#tel > select {
    width: 120px;
}
#tel > select~input {
    width: 380px;
}
.round_checkbox {
    position: relative;
    display: inline-block;
}
.round_checkbox > input {
    position: absolute;
    top: 0;
    left:0;

    appearance: none;
    border-radius: 50%;
    border: none;
    margin: 0;
}
.round_checkbox > label {
    display: inline-block;
    height: 2em;
    font-weight: 600;
    padding-left: 30px;
    background-repeat: no-repeat;
    background-image: url('../img/check.png');
}
.round_checkbox > input[type="checkbox"]:checked + label {
    background-image: url('../img/checked.png');
}
.round_checkbox > input[type="checkbox"]::after {
    display: none;
}
#term {
    width: 100%;
    height: 100px;
    border-radius: 10px;
    background-color: #f9f9f9;
    margin-top: 15px;
    padding: 12px;
    box-sizing: border-box;

    color: #777;
    font-size: 13px;
    font-weight: 400;

    overflow-y: scroll;
    white-space: pre-line;
}
#term > strong {
    font-weight: 700;
}
#term::-webkit-scrollbar {width: 2px;}
#term::-webkit-scrollbar-thumb {width: 2px; background-color: #ddd;}
.agreeAll {
    margin: 20px 0 0 20px;
}
/* 모달창 - FAQ */
#faq_c {
    margin-top: 52px;
}
#faq_c > li {
    border: 1px solid #ddd;
    border-radius: 10px;
    padding: 20px;
    box-sizing: border-box;
    cursor: pointer;
}
#faq_c > li:not(.first) {
    margin-top: 10px;
}
#faq_c > li > h3 {
    font-size: 16px;
    font-weight: 600;
    height: 24px;
    line-height: 24px;
    padding-left: 36px;
    background-image: url('../img/faq_logo.png');
    background-repeat: no-repeat;

    position: relative;
}
#faq_c > li > h3::after {
    content: "";
    display: block;
    width: 24px;
    height: 24px;
    background-image: url('../img/drop_down.png');
    background-repeat: no-repeat;
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
}
#faq_c > li.down > h3::after {
    background-image: url('../img/drop_up.png');
}
/*.dropslide {*/
/*    height: 100px;*/
/*    margin-top: 20px;*/
/*    font-size: 15px;*/
/*    font-weight: 400;*/
/*    line-height: 1.8;*/
/*    color: #777;*/
/*    overflow-y: scroll;*/
/*!*}*!*/
/*.dropslide::-webkit-scrollbar {width: 2px;}*/
/*.dropslide::-webkit-scrollbar-thumb {width: 2px; background-color: #ddd;}*/
.terms {
    white-space: pre-line;
}
.terms > strong {
    font-weight: 700;
}
/* 약관 모달창 */
.term_detail {
    margin-top: 52px;
}
.term_detail > li {
    border: 1px solid #ddd;
    border-radius: 10px;
    padding: 20px;
    box-sizing: border-box;
    cursor: pointer;
}
.term_detail > li > div.checkbox-wrapper-4 {
    font-size: 16px;
    font-weight: 600;
    width: 100%;
    height: 24px;
    line-height: 24px;
    position: relative;
}
.term_detail > li > div.checkbox-wrapper-4::after {
    content: "";
    display: block;
    width: 24px;
    height: 24px;
    background-image: url('/assets/images/drop_down.png');
    background-repeat: no-repeat;
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
}
.term_detail > li.down > div.checkbox-wrapper-4::after {
    background-image: url('/assets/images/drop_up.png');
}
.term_detail input[type="checkbox"]:checked::after {
    background: none;
}

/* alert 창 */
/*.w-full {*/
/*    position: fixed;*/
/*    top: 0;*/
/*    right: 0;*/
/*    bottom: 0;*/
/*    left: 0;*/
}
/*.w-full > div.close_modal {*/
/*    width:100%;*/
/*    height: 100%;*/
/*    background-color: rgba(0, 0, 0, 0.5);*/
/*}*/
/*.popup-container {*/
/*    width: 400px;*/
/*    height: 200px;*/
/*    border-radius: 20px;*/
/*    background-color: #fff;*/
/*    position: absolute;*/
/*    top: 50%;*/
/*    left: 50%;*/
/*    transform: translate(-50%, -50%);*/
/*    z-index: 101;*/
/*}*/
.popup_button {
    top: 20px;
    right: 20px;
    background-size: 15px;
}
/*.bg-white {*/
/*    text-align: center;*/
/*    margin: 70px auto;*/
/*    padding: 0 50px;*/
/*}*/
.btn-full {
    width: 100%;
    margin: 25px 0;
    line-height: 30px;
    border-radius: 12px;
    background-color: #8C35FA;
    color: #fff;
    font-weight: 500;
}
.btn-half {
    width: 50%;
    margin: 25px 0;
    line-height: 30px;
    border-radius: 10px;
    font-weight: 500;
}
.btn-wrap {
    display: flex;
    gap: 15px;
}
.btn-purple {
    background-color: var(--primary);
    color: #fff;
}
.btn-grey {
    background-color: var(--gray4);
}
.checkbox-wrapper-29 {
    --size: 1rem;
    --background: #fff;
    font-size: var(--size);
}

.checkbox-wrapper-29 *,
.checkbox-wrapper-29 *::after,
.checkbox-wrapper-29 *::before {
    box-sizing: border-box;
}

.checkbox-wrapper-29 input[type="checkbox"] {
    visibility: hidden;
    display: none;
}

.checkbox-wrapper-29 .checkbox__label {
    width: var(--size);
}

.checkbox-wrapper-29 .checkbox__label:before {
    content: ' ';
    display: block;
    height: var(--size);
    width: var(--size);
    position: absolute;
    top: calc(var(--size) * 0.125);
    left: 0;
    background: var(--background);
}

.checkbox-wrapper-29 .checkbox__label:after {
    content: ' ';
    display: block;
    height: var(--size);
    width: var(--size);
    border: calc(var(--size) * .14) solid #000;
    transition: 200ms;
    position: absolute;
    top: calc(var(--size) * 0.125);
    left: 0;
    background: var(--background);
}

.checkbox-wrapper-29 .checkbox__label:after {
    transition: 100ms ease-in-out;
}

.checkbox-wrapper-29 .checkbox__input:checked ~ .checkbox__label:after {
    border-top-style: none;
    border-right-style: none;
    -ms-transform: rotate(-45deg); /* IE9 */
    transform: rotate(-45deg);
    height: calc(var(--size) * .5);
    border-color: green;
}

.checkbox-wrapper-29 .checkbox {
    position: relative;
    display: flex;
    cursor: pointer;
    /* Mobile Safari: */
    -webkit-tap-highlight-color: rgba(0,0,0,0);
}

.checkbox-wrapper-29 .checkbox__label:after:hover,
.checkbox-wrapper-29 .checkbox__label:after:active {
    border-color: green;
}

.checkbox-wrapper-29 .checkbox__label {
    margin-right: calc(var(--size) * 0.45);
}
.uploaded_file {
    width: 70%;
    margin: 0;
    padding: 0 16px;
    border: 1px solid #999;
    background-color: #ddd;
    border-radius: 10px;
    color: #999;
    font-weight: 400;
    text-align: left;
}

/* 개인정보처리방침- 새창 */
.term_page_main {
    margin: 10px;
    height: 90vh;
}
.term_title {
    font-size: 16px;
    font-weight: 500;
}
.term_page_box {
    margin-top: 10px;
    padding: 10px;
    height: 100%;
    line-height: 1.6;
    font-size: 12px;
    font-weight: 400;
    color: #777;
    background-color: #f9f9f9;

    white-space: pre-line;
    overflow-y: scroll;
}
.term_page_box > strong {
    font-weight: 700;
}
.term_table {
    margin-top: 5px;
}
.term_table  th, .term_table td {
    border: 1px solid #e0e0e0;
    padding: 0 15px;
    text-align: left;
    line-height: 4;
}
.send_input_wrap {
    margin: 20px 0;
    text-align: center;
}
.sendTimeInput {
    width: 250px;
    height: 30px;
    border: 1px solid #ddd;
    border-radius: 6px;
    color: #999;
    padding: 0 15px;
    text-align: center;
    font-family: "Pretendard", sans-serif;
    font-size: 14px;
    cursor: pointer;
}
select.sendTimeInput {
    width: 120px;
}
.sendTimeMessage {
    background-color: #f9f9f9;
    border-radius: 10px;
    padding: 25px 20px;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.2;
    margin-bottom: 40px;
}
.sendTimeMessage > p:not(:first-child) {
    margin-top: 10px;
}

#pagination > li {
    color: #999;
    font-size: 20px;
    cursor: pointer;
}
#pagination > li.active {
    color: #5B1EA8;
}




/* 관리자 페이지 */
.manager_menu {
    margin-top: 28px;
}
.manager_menu > li {
    height: 52px;
    color: #ddd;
    padding: 0 20px;
}
.manager_menu > li > a {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    height: 100%;
}

/* 애니메이션 */
.zoomin {
    animation: zoomin 5s infinite ease;
}

@keyframes zoomin {
    0% {
        opacity: 0;
    }
    30% {
        opacity: 1;
    }
    50% {
        opacity: 1;
    }
    60% {
        opacity: 0;
    }
    100% {
        opacity: 0;
    }
}
.slideup {
    animation: slideup 5s infinite;
    animation-delay: 2.5s;
    transform: translateY(100%);
}
@keyframes slideup {
    0% {
        transform: translateY(100%);
    }
    50% {
        transform: translateY(0);
        opacity: 1;
    }
    51% {
        opacity: 0;
    }
    100% {
        opacity: 0;
        transform: translateY(100%);
    }
}



/** 체크박스 **/
.checkbox-wrapper-15 .cbx {
 -webkit-user-select: none;
 user-select: none;
 -webkit-tap-highlight-color: transparent;
 cursor: pointer;
}
.checkbox-wrapper-15 .cbx span {
    display: inline-block;
    vertical-align: middle;
    transform: translate3d(0, 0, 0);
}
.checkbox-wrapper-15 .cbx span:first-child {
    position: relative;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    transform: scale(1);
    vertical-align: middle;
    border: 1px solid #B9B8C3;
    transition: all 0.2s ease;
}
.checkbox-wrapper-15 .cbx span:first-child svg {
    position: absolute;
    z-index: 1;
    top: 8px;
    left: 6px;
    fill: none;
    stroke: white;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 16px;
    stroke-dashoffset: 16px;
    transition: all 0.3s ease;
    transition-delay: 0.1s;
    transform: translate3d(0, 0, 0);
}
.checkbox-wrapper-15 .cbx span:first-child:before {
    content: "";
    width: 100%;
    height: 100%;
    background: #506EEC;
    display: block;
    transform: scale(0);
    opacity: 1;
    border-radius: 50%;
    transition-delay: 0.2s;
}
.checkbox-wrapper-15 .cbx span:last-child {
    margin-left: 8px;
}
.checkbox-wrapper-15 .cbx span:last-child:after {
    content: "";
    position: absolute;
    top: 8px;
    left: 0;
    width: 100%;
    transform-origin: 0 0;
    transform: scaleX(0);
}
.checkbox-wrapper-15 .cbx:hover span:first-child {
    border-color: #3c53c7;
}

.checkbox-wrapper-15 .inp-cbx:checked + .cbx span:first-child {
    border-color: #3c53c7;
    background: #3c53c7;
    animation: check-15 0.6s ease;
}
.checkbox-wrapper-15 .inp-cbx:checked + .cbx span:first-child svg {
    stroke-dashoffset: 0;
}
.checkbox-wrapper-15 .inp-cbx:checked + .cbx span:first-child:before {
    transform: scale(2.2);
    opacity: 0;
    transition: all 0.6s ease;
}
.checkbox-wrapper-15 .inp-cbx:checked + .cbx span:last-child {
    transition: all 0.3s ease;
}
.checkbox-wrapper-15 .inp-cbx:checked + .cbx span:last-child:after {
    transform: scaleX(1);
    transition: all 0.3s ease;
}

@keyframes check-15 {
    50% {
        transform: scale(1.2);
    }
}


/* admin 선물 등록하기 */
.depth.active > div {
    background-color: #fff;
    border: 1px solid #323B50;
    color: #323B50;
}
.depth.done > div {
    background-color: #323B50;
    color: #fff;
}
.depth::after {
    content: "";
}

.budget_category > li {
    border: 1px solid #ddd;
    border-radius: 10px;
    line-height: 48px;
    padding: 0 30px;
    text-align: center;
    color: #555;
    font-weight: 700;
    cursor: pointer;
}
.budget_category > li.active {
    background-color: #323B50;
    color: #fff;
}

#budget_input.disabled {
    border: none;
    background-color: #eee;
}
.anniversary_radio input[type="radio"] {
    display: none;
}
.anniversary_radio input[type="radio"]:checked + span {
    background-color: #323B50;
    color: #fff;
}

.anniversary_radio > span {
    display: block;
    border: 1px solid #ddd;
    border-radius: 10px;
    line-height: 48px;
    padding: 0 30px;
    text-align: center;
    color: #555;
    font-weight: 700;
    cursor: pointer;
}

.anniversary_template input[type="radio"] {
    display: none;
}
.anniversary_template input[type="radio"]:checked + img {
    outline: 2px solid #1C2B88;
    padding: 1px;
}

/* checkbox */
.checkbox-wrapper-4 * {
    box-sizing: border-box;
}
.checkbox-wrapper-4 .cbx {
    -webkit-user-select: none;
    user-select: none;
    cursor: pointer;
    padding: 6px 8px;
    border-radius: 6px;
    overflow: hidden;
    transition: all 0.2s ease;
    display: inline-block;
}
.checkbox-wrapper-4 .cbx:not(:last-child) {
    margin-right: 6px;
}
.checkbox-wrapper-4 .cbx:hover {
    background: rgba(0,119,255,0.06);
}
.checkbox-wrapper-4 .cbx span {
    float: left;
    vertical-align: middle;
    transform: translate3d(0, 0, 0);
}
.checkbox-wrapper-4 .cbx span:first-child {
    position: relative;
    width: 18px;
    height: 18px;
    border-radius: 4px;
    transform: scale(1);
    border: 1px solid #cccfdb;
    transition: all 0.2s ease;
    box-shadow: 0 1px 1px rgba(0,16,75,0.05);
}
.checkbox-wrapper-4 .cbx span:first-child svg {
    position: absolute;
    top: 3px;
    left: 2px;
    fill: none;
    stroke: #fff;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 16px;
    stroke-dashoffset: 16px;
    transition: all 0.3s ease;
    transition-delay: 0.1s;
    transform: translate3d(0, 0, 0);
}
.checkbox-wrapper-4 .cbx span:last-child {
    padding-left: 8px;
    line-height: 18px;
}
.checkbox-wrapper-4 .cbx:hover span:first-child {
    border-color: #07f;
}
.checkbox-wrapper-4 .inp-cbx {
    position: absolute;
    visibility: hidden;
}
.checkbox-wrapper-4 .inp-cbx:checked + .cbx span:first-child {
    background: #07f;
    border-color: #07f;
    animation: wave-4 0.4s ease;
}
.checkbox-wrapper-4 .inp-cbx:checked + .cbx span:first-child svg {
    stroke-dashoffset: 0;
}
.checkbox-wrapper-4 .inline-svg {
    position: absolute;
    width: 0;
    height: 0;
    pointer-events: none;
    user-select: none;
}
@media screen and (max-width: 640px) {
    .checkbox-wrapper-4 .cbx {
        width: 100%;
        display: inline-block;
    }
}
@-moz-keyframes wave-4 {
    50% {
        transform: scale(0.9);
    }
}
@-webkit-keyframes wave-4 {
    50% {
        transform: scale(0.9);
    }
}
@-o-keyframes wave-4 {
    50% {
        transform: scale(0.9);
    }
}
@keyframes wave-4 {
    50% {
        transform: scale(0.9);
    }
}

.newDepth.active > div {
    background-color: #fff;
    border: 1px solid #323B50;
    color: #323B50;
    transition-duration: 200;
    animation: blink 2s infinite;
}
@keyframes blink {
    50% {
        background-color: #323B50;
        border: none;
        color: white;
    }
}
.newDepth.done > div > span {
    display: none;
}
.newDepth.done > div > svg.doneCheck {
    display: inline;
}

.newDepth.done > div {
    background-color: #323B50;
    color: #fff;
}
.newDepth:not(:first-child)::before {
    content: "";
    position: absolute;
    display: block;
    width: 150%;
    top: 20%;
    left: -50%;
    border-bottom: 2px solid #ddd;
}
.newDepth:not(:last-child)::after {
    content: "";
    position: absolute;
    display: block;
    width: 150%;
    top: 20%;
    left: 50%;
    border-bottom: 2px solid #ddd;
}
.newDepth:first-child::after {
    width: 120%;
}
.newDepth:last-child::before {
    width: 100%;
}
.newDepth.active::before, .newDepth.active::after, .newDepth.done::before, .newDepth.done::after {
    border-bottom-color: #323B50;
}


.soldoutImg > div {
    filter: brightness(0.5);
}
.soldoutImg > svg {
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

.giftName > a {
    text-overflow: ellipsis;
    overflow: hidden;
    width: 100%;
    height: 35px;
    line-height: 1.4;
    font-size: 12px;
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    /*word-break: keep-all;*/
}
.giftName:hover + .giftFullName {
    display: block;
}
.giftFullName {
    margin-left: -70px;
}

.giftCart::-webkit-scrollbar {width: 2px;}
.giftCart::-webkit-scrollbar-thumb {width: 2px; background-color: #ddd;}

.category.active > a > span {
    color: #1C2B88;
    /*padding-bottom: 2px;*/
    /*border-bottom: 2px solid #1C2B88;*/
    font-weight: 700;
    text-decoration: underline;
    text-underline-position: under;
    text-underline-offset: 1px;
    text-decoration-thickness: 2px;
}

/* swiper scrollbar custom */
.swiper-scrollbar {
    background-color: #fefefe;
}
.swiper-scrollbar-drag {
    background-color: #dedede;
}


.main-workspace-table-row {
    position: relative;
    line-height: 50px;
    border-bottom: 1px solid #ebebeb;
}
.main-workspace-table-row > td {
    position: relative;
    z-index: 10;
}

.list_slider:before {
    content: "";
    width: 14px;
    height: 14px;
    position: absolute;
    bottom: 3px;
    left: 3px;
    background-color: #fff;
    border-radius: 50%;
    transition: 0.4s;
}
.checkbox_wrap input:checked + .list_slider {
    background-color: #A8DCF3;
}
.checkbox_wrap input:checked + .list_slider:before {
    transform: translateX(20px);
}

.activeButton.off:hover,.activeButton.on:hover {
    background-color: white;
    color: #1C2B88;
    border: 1px solid #1C2B88;
}
.activeButton.on {
    background-color: #CCE9F6;
    border: 1px solid #CCE9F6;
}
.activeButton.off {
    background-color: white;
    color: #555;
    border: 1px solid #cccccc;
}

.product_lists_li.active {
    outline: 2px solid #1C2B88;
    position: relative;
}
.product_lists_li.active > div > div > a {
    background-color: #999EBA;
}
.product_lists_li.active > div > div > a > svg > path {
    stroke: #B7BCD9;
}
.product_lists_li.active::after {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: rgba(28,43,136,0.3);
    background-image: url('/assets/images/check_icon.svg');
    background-repeat: no-repeat;
    background-position: center 60px;
    background-size: 50px;
}

.demoTooltip {
    position: absolute;
    z-index: 10;
    top: 45px;
    right: 10px;
    background-color: #D7EAF8;
    padding: 15px;
    padding-top: 18px;
    width: 220px;
}

.demoTooltip::before {
    content:'';
    width: 0;
    height: 0;
    position: absolute;
    top: -10px;
    right: 20px;
    border: 10px solid transparent;
    border-top-width: 0;
    border-bottom-color: #D7EAF8;
}

.demoButton:hover > img {
    animation: slideLeft 1s;
}
.demoButton:hover {
    background-color: #fff;
}
@keyframes slideLeft {
    50% {
        transform: translateX(-10px);
    }
    100% {
        transform: translateX(0px);
    }
}

.recommendHover:hover > .recommendTooltip {
    display: block;
}
.recommendTooltip {
    position: absolute;
    z-index: 5;
    top: -68px;
    left: 50%;
    transform: translateX(-50%);
    background-color: #EFE9F8;
    padding: 10px;
    width: 130px;
}

.recommendTooltip::after {
    content:'';
    width: 0;
    height: 0;
    position: absolute;
    bottom: -6px;
    left: 50%;
    transform: translateX(-50%);
    border: 7px solid transparent;
    border-bottom-width: 0;
    border-top-color: #EFE9F8;
}

.messageTextarea::-webkit-scrollbar {
    display: none;
}
/* ( 크롬, 사파리, 오페라, 엣지 ) 동작 */
.messageTextarea::-webkit-scrollbar {
    display: none;
}
.messageTextarea {
    -ms-overflow-style: none; /* 인터넷 익스플로러 */
    scrollbar-width: none; /* 파이어폭스 */
}

.textHistory::-webkit-scrollbar {
    display: none;
}
/* ( 크롬, 사파리, 오페라, 엣지 ) 동작 */
.textHistory::-webkit-scrollbar {
    display: none;
}
.textHistory {
    -ms-overflow-style: none; /* 인터넷 익스플로러 */
    scrollbar-width: none; /* 파이어폭스 */
}
.textHistory > li:not(:first-child) {
    border-top: 1px solid #ddd;
}

.messageFullBtn:hover + .messageFull {
    display: block;
}


/* 사이드 내비게이션 */
.icon {
    display: block;
    background-repeat: no-repeat;
}
.menu-icon {
    width: 24px;
    height: 24px;
    background-size: 24px;
}
.icon-gift {
    background-image:  url(../img/icon-gift.png);
}
.icon-gift-dark {
    background-image: url(../img/icon-gift-dark.png);
}
.icon-list {
    background-image:  url(../img/icon-list.png);
}
.icon-personal {
    background-image:  url(../img/icon-personal.png);
}
.icon-folder {
    background-image:  url(../img/icon-folder.png);
}
.icon-book {
    background-image:  url(../img/icon-book.png);
}

/* 연락 그룹 관리 */
.edit-name-wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
}
.delete-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
}
.icon-delete {
    width: 24px;
    height: 24px;
    background-image: url(../img/icon-delete.png);
    background-size: 24px;
}
.link-btn {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    height: 32px;
    border: 1px solid #D7D7D7;
    color: #555;
    border-radius: 5px;
    padding: 0 16px;
}



/* 토글 - 탭 */
.toggle-container {
    position: relative;
    display: flex;
    align-items: center;
    width: 200px;
    background: #F5F5F5;
    border-radius: 5px;
    overflow: hidden;
    height: 42px;
    margin-bottom: 20px;
}

.toggle-label {
    flex: 1;
    position: relative;
    z-index: 1;
    cursor: pointer;
    text-align: center;
    height: 38px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 500;
    color: #888;
}

.toggle-label input {
    display: none;
}

.toggle-container::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 2px;
    transform: translateY(-50%);
    width: calc(50% - 2px);
    height: 38px;
    background: #fff;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    transition: transform 0.3s ease;
}

/* 첫 번째 tab 선택 시 */
.toggle-label:nth-of-type(1) input:checked ~ span {
    color: #3173C3;
}
.toggle-container:has(.toggle-label:nth-of-type(1) input:checked)::before {
    transform: translateX(0) translateY(-50%);
}

/* 두 번째 tab 선택 시 */
.toggle-label:nth-of-type(2) input:checked ~ span {
    color: #3173C3;
}
.toggle-container:has(.toggle-label:nth-of-type(2) input:checked)::before {
    right: 2px;
    transform: translateX(100%) translateY(-50%);
}

/* 연락 그룹 관리 - 그룹 타입 */
.contact-group-type {
    font-size: 13px;
    font-weight: 500;
    padding: 4px 8px;
    border-radius: 3px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.contact-group-type.client {
    background-color: #F2FFF1;
    color: #18962F;
}
.contact-group-type.employee {
    background-color: #F4F9FF;
    color: #3173C3;
}

/* 연락 그룹 관리 - 모달 */
.contact-box-wrap {
    margin-top: 32px;
    display: flex;
    gap: 32px;
    justify-content: center;
    align-items: center;
}
.contact-box {
    border: 1px solid #D7D7D7;
    border-radius: 3px;
    display: flex;
    flex-direction: column;
    /*gap: 12px;*/

    min-width: 400px;
    height: 500px;
    overflow-y: auto;
}
.contact-header {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    border-bottom: 1px solid #EDEDED;
}
.contact-list {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    overflow-y: auto;
}
.contact-list > li {
    height: 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
}
.contact-title {
    font-size: 18px;
    font-weight: 500;
}
.icon-next {
    width: 20px;
    height: 20px;
    background-image: url(../img/icon-next.png);
    background-size: 20px;
}
.icon-prev {
    width: 20px;
    height: 20px;
    background-image: url(../img/icon-prev.png);
    background-size: 20px;
}
.btn-column-wrap {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.btn-next, .btn-prev {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 6px;
    background-color: #F5F5F5;
    border-radius: 999px;
}


/* 체크박스 */
.checkbox-wrap {
    box-sizing: border-box;
}
.checkbox-label {
    -webkit-user-select: none;
    user-select: none;
    cursor: pointer;
    padding: 4px;
    border-radius: 6px;
    overflow: hidden;
    transition: all 0.2s ease;
    /*display: inline-block;*/
    display: block;
}
.checkbox-label:hover {
    background: rgba(0,119,255,0.06);
}
.checkbox-label span {
    float: left;
    vertical-align: middle;
    transform: translate3d(0, 0, 0);
}
.checkbox-svg {
    position: relative;
    width: 18px;
    height: 18px;
    border-radius: 4px;
    transform: scale(1);
    border: 1px solid #cccfdb;
    transition: all 0.2s ease;
    box-shadow: 0 1px 1px rgba(0,16,75,0.05);
}
.checkbox-svg svg {
    position: absolute;
    top: 3px;
    left: 2px;
    fill: none;
    stroke: #fff;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 16px;
    stroke-dashoffset: 16px;
    transition: all 0.3s ease;
    transition-delay: 0.1s;
    transform: translate3d(0, 0, 0);
}
.checkbox-text {
    padding-left: 8px;
    line-height: 18px;
    display: flex;
    gap: 8px;
}
.checkbox-label:hover .checkbox-svg {
    border-color: #07f;
}
.checkbox-wrap input[type="checkbox"] {
    display: none;
}
.checkbox-wrap input[type="checkbox"]:checked ~ label .checkbox-svg {
    background: #07f;
    border-color: #07f;
    animation: wave-4 0.4s ease;
}

.checkbox-wrap input[type="checkbox"]:checked ~ label .checkbox-svg svg {
    stroke-dashoffset: 0;
}
.checkbox-wrap .inline-svg {
    position: absolute;
    width: 0;
    height: 0;
    pointer-events: none;
    user-select: none;
}
@media screen and (max-width: 640px) {
    .checkbox-label {
        width: 100%;
        display: inline-block;
    }
}
@-moz-keyframes wave-4 {
    50% {
        transform: scale(0.9);
    }
}
@-webkit-keyframes wave-4 {
    50% {
        transform: scale(0.9);
    }
}
@-o-keyframes wave-4 {
    50% {
        transform: scale(0.9);
    }
}
@keyframes wave-4 {
    50% {
        transform: scale(0.9);
    }
}
/* 체크박스 모양 라디오 버튼 */
.radio-checkbox-wrap * {
    box-sizing: border-box;
}
.radio-checkbox-label {
    -webkit-user-select: none;
    user-select: none;
    cursor: pointer;
    padding: 6px 8px;
    border-radius: 6px;
    overflow: hidden;
    transition: all 0.2s ease;
    display: inline-block;
}
.radio-checkbox-label:hover {
    background: rgba(0,119,255,0.06);
}
.radio-checkbox-label span {
    float: left;
    vertical-align: middle;
    transform: translate3d(0, 0, 0);
}
.radio-checkbox-label span:first-child {
    position: relative;
    width: 18px;
    height: 18px;
    border-radius: 4px;
    transform: scale(1);
    border: 1px solid #cccfdb;
    transition: all 0.2s ease;
    box-shadow: 0 1px 1px rgba(0,16,75,0.05);
}
.radio-checkbox-label span:first-child svg {
    position: absolute;
    top: 3px;
    left: 2px;
    fill: none;
    stroke: #fff;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 16px;
    stroke-dashoffset: 16px;
    transition: all 0.3s ease;
    transition-delay: 0.1s;
    transform: translate3d(0, 0, 0);
}
.radio-checkbox-label:hover span:first-child {
    border-color: #07f;
}
.radio-checkbox-input {
    position: absolute;
    visibility: hidden;
    display: none;
}
.radio-checkbox-input:checked + .radio-checkbox-label span:first-child {
    background: #07f;
    border-color: #07f;
    animation: wave-4 0.4s ease;
}
.radio-checkbox-input:checked + .radio-checkbox-label span:first-child svg {
    stroke-dashoffset: 0;
}
.radio-checkbox-svg {
    position: absolute;
    width: 0;
    height: 0;
    pointer-events: none;
    user-select: none;
}
@keyframes wave-4 {
    50% {
        transform: scale(0.9);
    }
}



/* 검색 */
.search-container {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 50%;
}
.search-container > span {
    flex-shrink: 0;
}
.modal > .search-container {
    margin: 0 auto;
    margin-top: 32px;
    width: 70%;
}
.search-input-box {
    width: 100%;
    height: 42px;
    padding: 0 12px;
    background-color: #fff;
    border: 1px solid #D7D7D7;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.search-input-box > input[type="text"] {
    flex: 1;
    height: 100%;
    background-color: transparent;
    padding-left: 8px;
}
.search-input-box > input[type="text"]::placeholder {
    color: #8A8A8A;

}
.icon-search {
    width: 20px;
    height: 20px;
    background-image: url(../img/icon-search.png);
    background-size: 20px;
}

.icon-plus-circle {
    width: 24px;
    height: 24px;
    background-image: url(../img/icon-plus.png);
    background-size: 24px;
}
.icon-minus-circle {
    width: 24px;
    height: 24px;
    background-image: url(../img/icon-minus.png);
    background-size: 24px;
}
.menu-profile-wrap {
    padding: 24px 20px;
    background-color: rgba(0,0,0,0.1);
    color: #fff;

    display: flex;
    flex-direction: column;
    gap: 24px;
}
.menu-profile {
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: center;
}
.profile-logo {
    width: 90px;
    height: 90px;
    background-color: #fff;
    border-radius: 999px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.profile-company-name {
    font-size: 12px;
}
.mypage-link {
    font-size: 12px;
    font-weight: 500;
    text-decoration: underline;
    color: #DDD;
}
.btn-gift-register {
    width: 100%;
    height: 48px;
    background-color: #FFF;
    color: #323B50;
    border-radius: 0.5rem;

    display: flex;
    gap: 1.2rem;
    justify-content: center;
    align-items: center;
}
.modal-close-btn {
    position: absolute;
    top: 20px;
    right: 12px;
    padding: 8px;
}
.icon-close {
    width: 16px;
    height: 16px;
    background-image: url("../img/close.png");
    background-size: 16px;
}

/* 표 내부 editable 클래스 (input) */
.editable {
    padding: 0 12px;
}
.table-btn-wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 0;
}
.table-btn-wrap > button {
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    height: 40px;
}