@charset "utf-8";
@import url(https://fonts.googleapis.com/earlyaccess/notosanssc.css);
@import url("../font/nanumsquare/nanumsquare.css");
/* ---------------  common-custom ---------------------------------------*/
html { height: 100%; }
body {font-family: 'SquarePlus', Meiryo, 'NanumSquare', 'Noto Sans SC', sans-serif; font-size: 0.938rem; height: 100%; }
body > :first-child { height: 100%; }
p,h1,h2,h3,h4,h5,h6,.nav-link { transform: skew(-0.03deg); color:#222; }
.tr_skew{transform: skew(-0.03deg);}
/* bootstrap-select custom */
.bootstrap-select>.dropdown-toggle.btn-light,
.bootstrap-select>.dropdown-toggle.btn-light:focus,
.bootstrap-select>.dropdown-toggle.btn-light:active {
    border: 1px solid #ced4da;
    background: #fff;
    outline: none !important;
}
/* button */
button { font-family: 'SquarePlus', Meiryo, 'NanumSquare', 'Noto Sans SC', sans-serif; }
button:focus {
    outline: none;
}
.btn:focus, .btn.focus,
.btn:not(:disabled):not(.disabled).active:focus,
.btn:not(:disabled):not(.disabled):active:focus,
.show>.btn.dropdown-toggle:focus,
.show>.btn.dropdown-toggle.focus {
    box-shadow: none;
}
.disabledbutton {
    pointer-events: none;
    opacity: 0.4;
}
.modifyDiv{
    position: absolute;
    top: 40%;
    left: 30%;
    text-align: center;
    z-index: 1;
    background: white;
    padding: 2em;
    border: 1px solid;
}
.home_row{
    flex-wrap: nowrap;
}
.home_content{
    padding-right: 0px;
}
.url_bar{
    display: flex; padding-top: 15px;justify-content: space-between;padding-right: 15px;
    padding-left: 4px
}

/* input */
label {
    color: #222;
    font-weight: 700;
    transform: skew(-0.03deg);
}
[type=search], select:focus {
    outline: none;
}
.form-control:focus {
    box-shadow: none;
    border-color: #1a263a;
}
select.form-control:focus {
    border-color: #ced4da;
}
.form-control::placeholder {
    opacity: .7;
}
.form-control:disabled, .form-control[readonly]:focus {
    border-color: #ced4da;
}
.custom-file-label.plus_file::after {
    content: '\f0c6';
    font-family: "SquarePlus", "Font Awesome 5 Free", sans-serif;
    font-weight: 900;
}
.custom-file-label.selected {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
/* 라디오 custom */
.custom_radio input[type="radio"] {
    position: absolute;
    left: -9999px
}
.custom_radio input[type="radio"]+label {
    padding-left: 1.4rem;
}
.custom_radio input[type="radio"]+label:before {
    content: '';
    background: #fff;
    border: 1px solid #a8a8a8;
    height: 16px;
    width: 16px;
    border-radius: 50%;
    position: absolute;
    top: 3px;
    left: 0;
}
.play_line{
    margin-bottom: 0px;
    margin-top: 20px;
}
.play_icon{
    margin-right: 5px;
    color: red;
}
.custom_radio input[type="radio"]+label:after {
    content: '';
    background: #ff609c;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    position: absolute;
    top: 7px;
    left: 4px;
    opacity: 0;
}
.custom_radio input[type="radio"]:checked+label:before {
    border-color: #ff609c;
}
.custom_radio input[type="radio"]:checked+label:after {
    opacity: 1;
}
.footer_size{
    width: 400px;
}
/* 체크박스 custom (square) */
.custom_checkbox {
    display: inline-block;
    position: relative;
    padding-left: 25px;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    margin: 0;
}
.custom_checkbox input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}
.checkmark {
    position: absolute;
    top: 4px;
    left: 0;
    height: 15px;
    width: 15px;
    background-color: transparent;
    border: 1px solid #a8a8a8;
}
.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}
.custom_checkbox input:checked ~ .checkmark {
    border: 1px solid #ff609c;
}
.custom_checkbox input:checked ~ .checkmark:after {
    display: block;
}
.custom_checkbox .checkmark:after {
    left: 4px;
    top: 1px;
    width: 5px;
    height: 8px;
    border: solid #ff609c;
    border-width: 0 2px 2px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
    border-radius: 1px;
}
/* custom 체크박스 단독사용 */
.check_only {
    display: flex;
    justify-content: center;
    margin: 0;
    padding: 0;
}
.check_only .custom_checkbox {
    padding-left: 0;
}
.check_only .checkmark {
    position: static;
    display: block;
}
.check_only .checkmark:after {
    left: 5px;
    top: 2px;
}
/* popover */
.popover a {
    color: #252525;
    text-decoration: none;
}
/* card */
.card {
    border-radius: 0;
}
/*
.card:hover {
    box-shadow: 0 5px 15px 5px rgba(164, 173, 186, .25);
    transition: box-shadow .2s ease;
}
*/
.card-title {
    font-weight: 800;
    font-size: 1.125rem;
    transform: skew(-0.03deg);
}
.card-footer {
    background: #fff;
    border-top: 0;
}
/* pagination */
.page-link {
    position: relative;
    display: block;
    padding: .2rem .6rem;
    margin-left: -1px;
    line-height: 1.5;
    color: #333;
    background-color: #fff;
    border: 1px solid #dee2e6;
}
.page-item:first-child .page-link,
.page-item:last-child .page-link {
    border-radius: 0;
}
.page-item.disabled .page-link {
    color: #868296;
}
.page-link:hover,
.page-item.active .page-link {
    background: #272c33;
    border-color: #272c33;
    color: #fff;
}
.page-link:focus {
    box-shadow: none;
}
ul.pagination {
    margin-bottom: 0;
}
/* Modal */
.modal-header {
    border-bottom: 0;
    padding: .2rem .5rem 0;
    justify-content: center;
}
.modal-header-text {
    width: 100%;
    text-align: center;
    transform: translateX(14px);
}
.modal-body {
    padding: 1rem 1.5rem;
}
.modal-footer {
    border-top: 0;
}
.modal-title {
    width: 100%;
    padding-bottom: .5rem;
    letter-spacing: -1px;
    font-weight: 700;
    color: #222;
    margin-bottom: 1rem;
}
/* Right Sidebar Modal */
.modal.right .modal-dialog {
    position: fixed;
    margin: auto;
    max-width: 350px;
    width: 100%;
    height: 100%;
    -webkit-transform: translate3d(0%, 0, 0);
    -ms-transform: translate3d(0%, 0, 0);
    -o-transform: translate3d(0%, 0, 0);
    transform: translate3d(0%, 0, 0);
}
.modal.right .modal-content {
    height: 100%;
    overflow: hidden auto;
}
.modal.right .modal-body {
    padding: 15px 15px 80px;
}
.modal.right.fade .modal-dialog {
    right: -320px;
    -webkit-transition: opacity 0.3s linear, right 0.3s ease-out;
    -moz-transition: opacity 0.3s linear, right 0.3s ease-out;
    -o-transition: opacity 0.3s linear, right 0.3s ease-out;
    transition: opacity 0.3s linear, right 0.3s ease-out;
}
.modal.right.fade.show .modal-dialog {
    right: 0;
}
.list_mobile_width{
    width: 77%;
}
/* Table */
table tbody td {
    cursor: pointer;
    transform: skew(-0.03deg);
}
table.table {
    border: 1px solid #dee2e6;
    box-sizing: border-box;
}
table.table thead th {
    white-space: nowrap;
    vertical-align: middle;
    text-align: center;
    transform: skew(-0.03deg);
    padding: 1rem;
    border-top: 0;
    border-bottom: 1px solid #ff609c;
}
table.table tbody td, table.table tbody th {
    vertical-align: middle;
    text-align: center;
    padding: 1rem;
}
table.table tbody tr:first-child td,
table.table tbody tr:first-child th {
    border-top: 0;
}
/* dataTable */
table.dataTable.no-footer {
    border-color: #dee2e6;
}
/* dataTable sorting */
table.dataTable>thead .sorting,
table.dataTable>thead .sorting_asc,
table.dataTable>thead .sorting_desc,
table.dataTable>thead .sorting_asc_disabled,
table.dataTable>thead .sorting_desc_disabled {
    position: relative;
    background-image: none;
}
table.dataTable thead>tr>th.sorting_asc,
table.dataTable thead>tr>th.sorting_desc,
table.dataTable thead>tr>th.sorting,
table.dataTable thead>tr>td.sorting_asc,
table.dataTable thead>tr>td.sorting_desc,
table.dataTable thead>tr>td.sorting {
    padding-right: 20px;
}
table.dataTable>thead .sorting:before,
table.dataTable>thead .sorting_asc:before,
table.dataTable>thead .sorting_desc:before,
table.dataTable>thead .sorting_asc_disabled:before,
table.dataTable>thead .sorting_desc_disabled:before {
    position: absolute;
    bottom: .6rem;
    display: block;
    opacity: 0;
    right: .5em;
    content: "\f0de";
    font-family: "SquarePlus", "Font Awesome 5 Free", sans-serif;
    font-weight: 900;
}
table.dataTable>thead .sorting:after,
table.dataTable>thead .sorting_asc:after,
table.dataTable>thead .sorting_desc:after,
table.dataTable>thead .sorting_asc_disabled:after,
table.dataTable>thead .sorting_desc_disabled:after {
    position: absolute;
    bottom: 1rem;
    display: block;
    opacity: 0;
    right: .5em;
    content: "\f0dd";
    font-family: "SquarePlus", "Font Awesome 5 Free", sans-serif;
    font-weight: 900;
}
table.dataTable>thead .sorting_asc:before,
table.dataTable>thead .sorting_desc:after {
    opacity: .5;
}
/* 업무시간 테이블 */
table.time_table {
    table-layout: fixed;
    width: 100%;
    text-align: center;
}
table.time_table td {
    padding: .5rem .3rem;
    cursor: auto;
    transform: none;
}
table.time_table th {
    padding: .5rem .3rem;
    transform: skew(-0.03deg);
}
table.time_table thead th:first-child {
    width: 10%;
}
table.time_table .form-inline {
    justify-content: center;
    flex-wrap: nowrap;
}
table.time_table .form-control {
    margin: 0 .2rem .1rem;
}
/* 운영시간 테이블 */
table.book_set_table {
    width: 50%;
    margin: .5rem 0;
}
table.book_set_table td {
    padding: .3rem;
    cursor: auto;
    transform: initial;
}
table.book_set_table th {
    padding: .3rem;
    transform: skew(-0.03deg);
    white-space: nowrap;
    text-align: center;
}
table.book_set_table .form-inline {
    justify-content: center;
    flex-wrap: nowrap;
}
table.book_set_table .form-control {
    margin: 0 .1rem .25rem;
}
/* dataTable Length */
.tb_length .dataTables_length select {
    height: calc(2.25rem + 2px);
    border: 1px solid #ced4da;
}

@media(min-width: 769px) {
    /* dataTable Filter */
    .tb_filter input {
        display: block;
        width: 100%;
        padding: .375rem .75rem;
        font-size: 0.938rem;
        line-height: 1.6;
        color: #495057;
        background-color: #fff;
        background-clip: padding-box;
        border: 1px solid #ced4da;
        border-radius: .25rem;
        transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;}
}
@media(max-width: 768px) {
    /* dataTable Filter */
    .tb_filter input {
        display: block;
        width: 88%;
        padding: .375rem .75rem;
        font-size: 0.938rem;
        line-height: 1.6;
        color: #495057;
        background-color: #fff;
        background-clip: padding-box;
        border: 1px solid #ced4da;
        border-radius: .25rem;
        transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
    }
}
.tb_filter .input-group-prepend {
    margin-bottom: .5rem;
    margin-right: -5px;
    z-index: 1;
}
.tb_filter .input-group {
    flex-wrap: nowrap;
}
.tb_filter .input-group-text {
    background: #fff;
    border-right: 0;
}
.font-color-pink{
    color: #ff609c;
}
/* dataTable Pagination */
.dataTables_wrapper .dataTables_paginate .paginate_button {
    border: 1px solid #dee2e6;
    color: #67757c;
    border-radius: 0;
    margin-left: 0;
    padding: .2rem .6rem;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:active,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover {
    background: #fff;
    border: 1px solid #dee3e7;
    box-shadow: none;
    color: #222 !important;
    cursor: default;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover,
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: #222;
    border-color: #222;
    color: #fff !important;
}
.tb_paging .dataTables_paginate {
    padding-top: 0;
}
.dataTables_wrapper .dataTables_paginate .ellipsis {
    padding: 0 .5rem;
}
/* switch */
.switch.switch-text {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    width: 55px;
    height: 24px;
    background-color: transparent;
    cursor: pointer;
    margin-bottom: 0;
}
.switch2.switch-text {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    width: 100px;
    height: 24px;
    background-color: transparent;
    cursor: pointer;
    margin-bottom: 0;
}
.switch.switch-text .switch-input, .switch2.switch-text .switch-input {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
}
.switch-pill .switch-label, .switch-pill .switch-handle {
    border-radius: 50em!important;
}
.switch.switch-text .switch-label, .switch2.switch-text .switch-label {
    position: relative;
    display: block;
    height: inherit;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    background-color: #fff;
    border: 1px solid #adb5bd;
    border-radius: 2px;
}
.switch-primary>.switch-input:checked~.switch-label, .switch2.switch-primary .switch-label {
    background: #007bff!important;
    border-color: #0062cc;
}
.switch-secondary>.switch-input:checked~.switch-label, .switch2.switch-secondary .switch-label {
    background: #868e96 !important;
    border-color: #6c757d;
}
.switch-success>.switch-input:checked~.switch-label, .switch2.switch-success .switch-label {
    background: #28a745 !important;
    border-color: #1e7e34;
}
.switch-warning>.switch-input:checked~.switch-label, .switch2.switch-warning .switch-label {
    background: #ffc107!important;
    border-color: #d39e00;
}
.switch-info>.switch-input:checked~.switch-label, .switch2.switch-info .switch-label {
    background: #17a2b8 !important;
    border-color: #117a8b;
}
.switch-danger>.switch-input:checked~.switch-label, .switch2.switch-danger .switch-label {
    background: #dc3545 !important;
    border-color: #bd2130;
}
.switch-pink>.switch-input:checked~.switch-label, .switch2.switch-pink .switch-label {
    background: #ff609c !important;
    border-color: #FF4B8F;
}
.switch-pill .switch-label::before {
    right: 6px!important;
}
.switch2.switch-pill .switch-label::before {
    right: 0 !important;
}
.switch.switch-text .switch-label::before, .switch.switch-text .switch-label::after {
    position: absolute;
    top: 50%;
    width: 50%;
    margin-top: -.5em;
    line-height: 1;
    text-align: center;
    transition: inherit;
}
.switch.switch-text .switch-label::before {
    right: 1px;
    color: #adb5bd;
    content: attr(data-off);
}
.switch2.switch-text .switch-label::before {
    position: absolute;
    top: 50%;
    width: 50%;
    margin-top: -.5em;
    line-height: 1;
    text-align: center;
    transition: inherit;
    content: attr(data-on);
    z-index: 2;
    color: #ddd;
    opacity: .8;
}
.switch.switch-text .switch-input:checked~.switch-label::before {
    opacity: 0;
}
.switch2.switch-text .switch-input:checked~.switch-label::before{
    color: #000;
}
.switch-pill .switch-label::after {
    left: 2px !important
}
.switch.switch-text .switch-label::after {
    left: 1px;
    color: #fff;
    content: attr(data-on);
    opacity: 0;
}
.switch2.switch-text .switch-label::after {
    position: absolute;
    top: 50%;
    width: 50%;
    margin-top: -.5em;
    line-height: 1;
    text-align: center;
    transition: inherit;
    content: attr(data-off);
    z-index: 2;
}
.switch.switch-text .switch-input:checked~.switch-label::after {
    opacity: 1;
}
.switch2.switch-text .switch-input:checked~.switch-label::after{
    color: #ddd;
    opacity: .8;
}
.switch.switch-text .switch-handle {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 20px;
    height: 20px;
    background: #fff;
    border: 1px solid #adb5bd;
    border-radius: 1px;
    transition: left .15s ease-out;
}
.switch2.switch-text .switch-handle {
    position: absolute;
    top: 2px;
    right: 48px;
    width: 50%;
    height: 20px;
    background: #fff;
    border: 1px solid #adb5bd;
    border-radius: 1px;
    transition: left .15s ease-out;
}
.switch-primary>.switch-input:checked~.switch-handle {
    border-color: #0062cc;
}
.switch.switch-text .switch-input:checked~.switch-handle {
    border: 1px solid #F9FAFA;
    left: 33px;
}
.switch2.switch-text .switch-input:checked~.switch-handle{
    right: 2px;
}
/* --------------- header ----------------*/
header {
    min-height: 65px;
    position: relative;
    z-index: 1030;
}
header .navbar {
    background: #fff;
    padding: 0;
    justify-content: flex-start;
    border-bottom: 1px solid #dee3e7;
}
/* header의 logo */
header .logo {
    display: flex;
    background: #222;
    text-align: center;
    padding: .5rem;
    width: 230px;
    height: 65px;
    text-decoration: none;
    font-weight: 400;
    font-size: 1.25rem;
    color: #ff609c;
    line-height: 2.4;
    letter-spacing: 1px;
    transform: skew(-0.03deg);
    margin-bottom: -1px;
    justify-content: center;
    align-items: center;
}
header .logo-sm {
    display: none;
    max-width: 100%;
    height: auto;
}
/* header right menu*/
header nav ul .input-group {
    padding: .7rem .7rem .5rem .2rem;
}
header .navbar-light .navbar-text {
    color: #222;
    font-size: 1rem;
    transform: skew(-0.03deg);
}
header .navbar-text div {
    display: inline-block;
}
header .navbar-text .strong {
    font-weight: bolder;
}
header label {
    margin: 0 0 0 .5rem;
}
/*
header .initial {
    background: #ff609c;
    padding: .282rem .55rem;
    border-radius: 30px;
    color: #fff;
    font-weight: bold;
}
*/
header .logout_btn {
    padding: .2rem .5rem;
    font-weight: 800;
}
header .logout_btn:after {
    content: attr(data-name);
}
header .alert_btn {
    padding: 0 .2rem;
    background: transparent;
    color: #ff609c;
    font-size: 1.563rem;
    border: 0;
    cursor: pointer;
}
header .alert_badge {
    background: #e4007f;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    position: absolute;
    top: 5px;
    right: 0;
}
/* sidebar open and close button*/
header .sidebar-toggle{
    text-decoration: none;
    padding: .75rem;
    display: none;
}
header .sidebar-toggle:before {
    content: "\f0c9";
    font-family: "SquarePlus", "Font Awesome 5 Free", sans-serif;
    font-weight: 900;
    color: #666;
    font-size: 1.25rem;
}
/* language button */
html[lang="en"] span:not(:lang(en)),
html[lang="ja"] span:not(:lang(ja)),
html[lang="zh"] span:not(:lang(zh)) {
    display: none;
}
html[lang="en"] a.en,
html[lang="ja"] a.ja,
html[lang="zh"] a.zh {
    background: rgba(90,98,104,.3);
}
/* dropdown
header .dropdown-menu {
    left: 50%;
    transform: translateX(-50%);
    min-width: 5rem;
    padding: 0;
}
header .dropdown-item {
    padding: .6rem 1.5rem;
    font-weight: 700;
}
header .dropdown-item.active, .dropdown-item:active {
    background: rgba(90,98,104,.3);
}
header .dropdown .btn {
    min-width: 130px;
}
header .dropdown-toggle::after {
    display: none;
}
header .dropdown img {
    padding-bottom: 2px;
}
*/
.header_profile .dropdown-toggle::before {
    content: '\f007';
    font-family: "SquarePlus", "Font Awesome 5 Free", sans-serif;
    font-weight: 900;
    color: #fff;
    font-size: .875rem;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
}
.header_profile .dropdown-toggle::after {
    display: none;
}
.header_profile .btn {
    position: relative;
    width: 35px;
    height: 35px;
    background: radial-gradient(#FF609C 65%, transparent 67%);
    border: 1px solid rgba(0, 0, 0, .05);
    border-radius: 50%;
    padding: 0;
    overflow: hidden;
}
.header_profile .btn:not(:disabled):not(.disabled).active,
.header_profile .btn:not(:disabled):not(.disabled):active {
    background: radial-gradient(#FF609C 65%, transparent 67%);
}
.header_profile img {
    position: relative;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 2;
}
.header_profile .dropdown-menu {
    left: initial;
    right: 0;
    width: max-content;
    max-width: 13rem;
}
.header_profile .dropdown-menu p {
    line-height: 1.2;
    margin-bottom: 0;
}
.header_profile .dropdown-item {
    cursor: pointer;
}
/* -------- Right Sidebar ------------- */
.alert_group .list-group-item {
    border: 0;
    padding: 1rem 0;
    display: flex;
    align-items: center;
}
.alert_group .list-group-item div:first-child {
    width: 60px;
    height: 60px;
    background: #ff609c;
    border-radius: 50%;
    justify-content: center;
    display: flex;
    align-items: center;
    font-size: 1.125rem;
    font-weight: 800;
    color: #fff;
}
.alert_group .list-group-item div p {
    margin: 0;
    word-break: keep-all;
    font-size: .875rem;
}
/* -------- Left sidebar(aside) ----------*/
.left-sidebar {
    background: #222;
    position: fixed;
    top: 0;
    left: -251px;
    padding-top: 65px;
    min-height: 100vh;
    width: 230px;
    height: 100%;
    z-index: 910;
}
/* 스크롤바는 숨김처리, 기능은 활성화 */
.scroll-sidebar {
    overflow-y: auto;
    height: 93%;
    width: auto;
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none; /* Firefox */
}
.scroll-sidebar::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera*/
}
/* sidebar의 리스트(ul) 안의 a 태그 */
.main_list .nav-link {
    color: #fff;
    padding: .75rem 1.25rem;
    white-space: nowrap;
    position: relative;
    font-weight: 300;
}
.main_list .nav-link span {
    margin-left: 1.063rem;
}
.main_list .nav-link i {
    font-size: 1.25rem;
    color: #f7f7f7;
    max-width: 26px;
    width: 100%;
    text-align: center;
    vertical-align: bottom;
}
.sub_list .nav-item.active a {
    color: #ff609c;
}
/* sidebar의 대분류 리스트(ul)의 오른쪽 arrow */
.arrow:before {
    content: "\f105";
    font-family: "SquarePlus", "Font Awesome 5 Free", sans-serif;
    font-weight: 900;
    font-size: 1rem;
    color: #f7f7f7;
    float: right;
    -webkit-transition: transform .3s ease;
    -o-transition: transform .3s ease;
    transition: transform .3s ease;
}
.home_left > .arrow:before {
    content: none;
    font-family: "SquarePlus", "Font Awesome 5 Free", sans-serif;
    font-weight: 900;
    font-size: 1rem;
    color: #f7f7f7;
    float: right;
    -webkit-transition: transform .3s ease;
    -o-transition: transform .3s ease;
    transition: transform .3s ease;
}
.arrow[aria-expanded="true"]:before {
    transform: rotate(90deg);
    -webkit-transition: transform .3s ease;
    -o-transition: transform .3s ease;
    transition: transform .3s ease;
}
/* sidebar의 소분류 리스트(ul) */
.sub_list {
    background: #222;
}
.sub_list .nav-link {
    padding: .75rem 1.25rem .75rem 4rem;
}
/* sidebar-collapse */
/* header의 bar button 클릭 시 미니 사이드바 */
.sidebar-collapse .logo {
    width: 65px;
}
.sidebar-collapse .mini-txt {
    display: none;
}
.sidebar-collapse .logo-lg {
    display: none;
}
.sidebar-collapse .logo-sm {
    display: block;
}
.sidebar-collapse .left-sidebar {
    width: 65px;
}
.sidebar-collapse .scroll-sidebar {
    position: absolute;
}
.sidebar-collapse .arrow {
    pointer-events: none;
}
.sidebar-collapse .arrow span {
    display: none;
}
.sidebar-collapse .arrow:before {
    display: none;
}
.sidebar-collapse .content {
    -webkit-transition: all .3s ease;
    transition: all .3s ease;
}
.sidebar-collapse .mini-bar .collapse {
    display: none;
}
.nav-item.active.mini-bar {
    background: transparent;
}
.mini-bar {
    cursor: pointer;
    position: relative;
}
.mini-bar .sub_list {
    padding-left: 0;
}
.mini-bar .sub_list .nav-link {
    padding-left: .75rem;
}
.mini-bar:hover .arrow {
    width: 230px;
    background: #222;
}
.mini-bar:hover .arrow span {
    display: inline-block;
    z-index: 911;
}
.mini-bar .arrow i {
    vertical-align: initial;
}
.mini-bar:hover .collapse {
    display: block;
    position: absolute;
    left: 65px;
    z-index: 912;
    width: 185px;
}
.left-sidebar.open {
    left: 0;
}
/* --------- main (contents) ----------- */
.content {
    background: #F7F7F8;
    position: relative;
    min-height: calc(100vh - 119px);
    z-index: 900;
    -webkit-transition: all .3s ease;
    transition: all .3s ease;
}
/* ----------- the newly created class -------- */
.w-auto {
    width: auto;
}
.text_red {
    color: red;
}
.text_pink {
    color: #ff609c;
}
.color_777 {
    color: #777;
}
.ml-6 {
    margin-left: 4rem !important;
}
.word-break-keep {
    word-break: keep-all;
}
.flex-100 {
    flex: 0 0 100% !important;
}
.flex-1 {
    flex: 1;
}
.min_w {
    min-width: 180px;
}
/* 메인 */
.main-p-l {
    padding: 1rem .5rem 1rem 1rem;
}
.main-p-r {
    padding: 1rem 1rem 1rem .5rem;
}
.main_profile {
    background-image: url("../image/logo/logo_b.png"), linear-gradient(to right, #222, #222);
    background-repeat: no-repeat;
    background-position: 97% 10%;
    display: flex;
    padding: 1.75rem;
    flex: 0 0 60%;
}
.main_profile h3 {
    color: #fff;
    font-weight: 400;
}
.main_profile h3+h3 {
    font-weight: 800;
}
.main_profile .store_name {
    flex: 1;
    align-self: flex-end;
    margin-left: 1.5rem;
}
.main_book {
    flex: 0 0 40%;
    display: flex;
    padding: 2rem 1rem;
}
.main_book div {
    flex: 1;
    text-align: center;
    position: relative;
    align-self: center;
}
.main_book p {
    margin-bottom: .3rem;
    font-size: 1.125rem;
    font-weight: 400;
}
.main_book p+p {
    margin-bottom: 0;
    font-size: 1.75rem;
    font-weight: 800;
}
.main_book div+div:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    color: #ff609c;
    width: 1px;
    height: 100%;
    background: #ff609c;
}
.main_tb tbody td {
    cursor: initial;
}
/* 고객조회 */
.customer_list_tb thead th:first-child {
    width: 3% !important;
}
.add_btn {
    color: #fff;
    background: #ff609c;
    font-weight: 800;
    padding: .375rem 1.45rem;
    transform: skew(-0.03deg);
}
.add_btn:after {
    content: attr(data-name);
}
.delete_btn {
    color: #ff609c;
    background: #fff;
    border: 1px solid #ff609c;
    font-weight: 800;
    padding: .375rem 1.45rem;
}
.delete_btn:after {
    content: attr(data-name);
}
/* 이미지 */
.store_img {
    display: inline-block;
    position: relative;
    width: 160px;
    height: 160px;
    background: radial-gradient(#FF609C 67%, transparent 69%);
    border: 1px solid rgba(0, 0, 0, .05);
    border-radius: 50%;
}
.user_img, .admin_img {
    display: inline-block;
    position: relative;
    width: 160px;
    height: 160px;
    background: radial-gradient(#FF609C 67%, transparent 69%);
    border: 1px solid rgba(0, 0, 0, .05);
    border-radius: 50%;
}
.info_temp_img {
    display: inline-block;
    position: relative;
    width: 140px;
    height: 140px;
    background: radial-gradient(#FF609C 67%, transparent 69%);
    border: 1px solid rgba(0, 0, 0, .05);
    border-radius: 50%;
    margin-bottom: 25px !important;
}
.reservation_complete{
    background-color: #00b300;
}
.reservation_holiday{
    background-color: #bebabe;
    background-image: linear-gradient(45deg,lightgrey 10%, white 10% 20%,lightgrey 20% 30%, white 30% 40%,lightgrey 40% 50%, white 50% 60%,lightgrey 60% 70%, white 70% 80%,lightgrey 80% 90%, white 90%);
}
.reservation_impossible{
    background-color: #E5E7E9;
}
.reservation_possible{
    background-color:#ffa5c7;
}
.reservation_wait{
    background-color:#FFC300;
}
.represent:before {
    content: attr(data-name);
    position: absolute;
    bottom: -25px;
    left: 50%;
    z-index: 1000;
    color: #ff609c;
    font-weight: 700;
    transform: translate(-50%, 0) skew(-0.03deg);
    white-space: nowrap;
    font-size: 0.875rem;
}
.user_img img, .store_img img,
.info_temp_img img, .admin_img img {
    position: relative;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    z-index: 2;
}
.user_img .file-input,
.store_img .file-input,
.info_temp_img .file-input,
.admin_img .file-input {
    position: absolute;
    bottom: 0;
    right: 0;
    background: #222;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    margin: 0;
    cursor: pointer;
    z-index: 3;
}
.user_img .file-input:after,
.store_img .file-input:after,
.info_temp_img .file-input:after,
.admin_img .file-input:after{
    content: '\f030';
    font-family: "SquarePlus", "Font Awesome 5 Free", sans-serif;
    font-weight: 900;
    color: #f7f7f7;
    font-size: 1.375rem;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.user_img input,
.store_img input,
.info_temp_img input,
.admin_img input {
    display: none;
}
.user_img:after, .admin_img:after {
    content: '\f007';
    font-family: "SquarePlus", "Font Awesome 5 Free", sans-serif;
    font-weight: 900;
    color: #fff;
    font-size: 4.5rem;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
}
.store_img:after, .info_temp_img:after {
    content: '\f302';
    font-family: "SquarePlus", "Font Awesome 5 Free", sans-serif;
    font-weight: 900;
    color: #fff;
    font-size: 4.5rem;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
}
/* 고객추가 */
.save_btn {
    color: #fff;
    background: #ff609c;
    font-weight: 800;
    padding: .375rem 1.45rem;
    transform: skew(-0.03deg);
}

.change_version {
    color: #ff609c;
    background: #fff;
    border: 1px solid #ff609c;
    font-weight: 800;
    padding: .375rem 1.45rem;
    transform: skew(-0.03deg);
    margin-bottom: .5rem;
}

/* 고객정보 */
.book_count {
    display: flex;
    flex-wrap: wrap;
}
.book_count div {
    position: relative;
    text-align: center;
    flex: 0 0 20%;
    padding: 1.25rem 0;
}
.book_count div:after {
    content: '';
    position: absolute;
    top: 26px;
    right: 0;
    border: 1px solid #ff609c;
    height: 60px;
}
.book_count div:last-child:after {
    display: none;
}
.edit_btn {
    background: #fff;
    border: 1px solid #dee3e7;
    color: #bebabe;
    font-size: 0.938rem;
    font-weight: 800;
    padding: .25rem .75rem;
    transform: skew(-0.03deg);
}
/* 시술정보 */
.info_card {
    margin-bottom: 1rem;
}
.info_card .card-header {
    background: transparent;
    padding: .875rem 1.25rem;
    border-bottom: 1px solid #ff609c;
    display: flex;
    justify-content: space-between;
}
.info_card .card-header h5 {
    font-size: 1.125rem;
    font-weight: 800;
    transform: skew(-0.03deg);
    margin-bottom: 0;
    align-self: center;
}
.info_card .card-header .dropdown-toggle {
    padding: 0;
    color: #222;
    background: transparent;
    border: 0;
    cursor: pointer;
}
.info_card .dropdown-toggle::after {
    display: none;
}
.info_card .dropdown-menu {
    min-width: 1px;
}
.info_card .dropdown-item {
    transform: skew(-0.03deg);
    text-align: center;
    cursor: pointer;
}
.info_card table {
    width: 100%;
    text-align: center;
}
.info_card table td {
    padding: .5rem;
    white-space: nowrap;
    width: 25%;
}
/* 시술추가 */
.add_outline_btn {
    background: #fff;
    border: 1px solid #ff609c;
    color: #ff609c;
    font-weight: 800;
    transform: skew(-0.03deg);
}
.add_outline_btn:after {
    content: attr(data-name);
}
.img_notice {
    line-height: 2.2;
    font-size: 0.875rem;
    margin-left: .75rem;
}
.del_info {
    color: #ff609c;
    background: #fff;
    border: 1px solid #ff609c;
    font-weight: 800;
    padding: .375rem 1.45rem;
}
.cancel_btn {
    color: #ff609c;
    background: #fff;
    border: 1px solid #ff609c;
    font-weight: 800;
    padding: .375rem 1.45rem;
}
/* 챗봇정보 */
.bot_notice {
    font-size: 1.125rem;
    margin: 1rem;
    word-break: keep-all;
}
.font_weight_eb {
    font-weight: 800;
}
.bot_box {
    flex: 0 0 50%;
    text-align: center;
    min-height: 200px;
    padding: 1rem;
    position: relative;
}
.bot_box.line_one {
    flex: 0 0 100%;
}
.bot_box label {
    font-size: 1.125rem;
    font-weight: 800;
}
.bot_box div {
    background-image: url("../image/speech_bubble.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    padding: 2rem;
}
.bot_box textarea {
    resize: none;
    font-size: .938rem;
    text-align: center;
    border: 0;
    font-weight: 400;
}
.bot_box textarea::-webkit-scrollbar {
    width: 2px;
}
.bot_box textarea::-webkit-scrollbar-track {
    background: transparent;
}
.bot_box textarea::-webkit-scrollbar-thumb {
    border-radius: 3px;
    background: #ffdfeb;
}
.bot_box .switch {
    position: absolute;
    bottom: 24px;
    right: 16px;
}
.bot_box .btn {
    position: absolute;
    bottom: 24px;
    right: 16px;
    background: #ff609c;
    color: #fff;
    border-radius: 30px;
    padding: .2rem .813rem;
    font-size: .813rem;
    font-weight: 700;
}
/* 직원관리 */
.btn_outline_pink {
    background: #fff;
    color: #ff609c;
    border: 1px solid #ff609c;
}
.btn_pink {
    background: #ff609c;
    color: #fff;
    border: 1px solid #ff609c;
    font-weight: 800;
}
.btn_home_complete_modal_en {
    background: #fff;
    color: #ff609c;
    border: 1px solid #ff609c;
    font-weight: 800;
}
i.manager {
    color: #ff609c;
    margin-left: -1.25rem;
    margin-right: .313rem;
}
.tel_input select {
    display: inline-block;
    width: calc(40% - 5px);;
}
.tel_input input {
    display: inline-block;
    width: 60%;
}
.id_input {
    display: flex;
}
.id_input .btn:before {
    content: attr(data-name);
    font-weight: 700;
}
.admin_card h5 {
    min-height: 1.5rem;
}
/* tab */
/*.nav-tabs::-webkit-scrollbar {
    display: none;
}*/
.info_tab, .manage_tab, .setting_tab {
    padding: 1rem 0;
}
.info_tab .nav-tabs,
.manage_tab .nav-tabs,
.setting_tab .nav-tabs {
    border-bottom: 1px solid #ff609c;
    overflow: auto hidden;
    flex-wrap: nowrap;
    white-space: nowrap;
}
.info_tab .nav-link,
.manage_tab .nav-link,
.setting_tab .nav-link {
    color: #bebabe;
    padding: 1rem;
    font-weight: 700;
}
.info_tab .nav-tabs .nav-link:hover,
.manage_tab .nav-tabs .nav-link:hover,
.setting_tab .nav-tabs .nav-link:hover,
.info_tab .nav-tabs .nav-link:focus,
.manage_tab .nav-tabs .nav-link:focus,
.setting_tab .nav-tabs .nav-link:focus {
    border-color: transparent;
    color: #bebebe;
}
.info_tab .nav-tabs .nav-link.active,
.manage_tab .nav-tabs .nav-link.active,
.setting_tab .nav-tabs .nav-link.active {
    border-color: transparent;
    border-bottom: 3px solid #ff609c;
    color: #222;
    font-weight: 800;
}
.s_manage .dataTables_length select {
    height: calc(2.25rem + 2px);
    border: 1px solid #ced4da;
}
/* 고객정보 페이지용 탭 */
.info_tab .nav-item {
    margin: 0 .625rem;
}
.info_tab .nav-item.r_side {
    margin: 0 1rem 0 auto;
}
.info_tab .nav-item .add_btn:after {
    content: attr(data-name);
}
.info_tab table {
    min-width: 70%;
}
.info_tab td {
    padding: .5rem;
    white-space: nowrap;
}
/* 직원관리 페이지용 탭 */
.manage_tab .nav-item,
.setting_tab .nav-item {
    margin: 0 1.5rem;
}
/* 버튼형식 탭 */
.nav_btn a {
    padding: .375rem .75rem;
    color: #ff609c;
    border: 1px solid #ff609c;
    border-top-left-radius: .25rem;
    border-bottom-left-radius: .25rem;
}
.nav_btn a+a {
    margin-left: -1px;
    border-radius: 0 .25rem .25rem 0;
}
.nav_btn a.active {
    background: #ff609c;
    color: #fff;
}
.time_btn {
    font-size: .875rem;
    padding: .25rem;
    float: right;
    transform: skew(-0.03deg);
    color: #ff609c;
}
.time_btn:hover {
    color: #ff609c;
}
.time_btn:focus {
    text-decoration: none;
}
/* 기본 설정 */
.input_notice {
    font-size: 0.813rem;
    letter-spacing: -1px;
}
.setting_tab .form-row {
    justify-content: center;
}
.user_setting {
    border: 0;
    border-top: 1px solid rgba(0, 0, 0, .1);
}
.user_setting .card-header div {
    color: #222;
    text-decoration: none;
    font-weight: 800;
    cursor: pointer;
}
.user_setting .card-header div[aria-expanded=true]:after {
    content: "\f106";
    font-family: "SquarePlus", "Font Awesome 5 Free", sans-serif;
    font-weight: 900;
    float: right;
}
.user_setting .card-header div[aria-expanded=false]:after {
    content: "\f107";
    font-family: "SquarePlus", "Font Awesome 5 Free", sans-serif;
    font-weight: 900;
    float: right;
}
.set_notice {
    border: 1px solid #dee2e6;
    background: rgba(0, 0, 0, .01);
    padding: 1rem !important;
    margin: .5rem;
    border-radius: 5px;
}
.set_notice p {
    margin-bottom: 0;
    padding-left: 13px;
    word-break: keep-all;
    font-size: .813rem;
}
.set_notice p:before {
    content: '*';
    position: absolute;
    top: 3px;
    left: 0;
}
.switch_notice {
    position: absolute;
    font-size: 0.813rem;
    letter-spacing: -1px;
}
.week_check_box {
    display: flex;
    flex-wrap: wrap;
    border: 1px solid #dee2e6;
    border-radius: 10px;
    padding: .5rem;
}
.week_check_box .form-check {
    margin: .3rem;
    min-width: calc(20% - .6rem);
    white-space: nowrap;
}
.shop_url {
    flex-wrap: nowrap;
}
.shop_url .form-group {
    width: 12%;
    margin-right: .5rem;
}
.shop_url .form-group input {
    width: 100% !important;
}
.check_btn {
    border: 1px solid #ff609c;
    color: #ff609c;
    font-weight: 800;
    background: #fff;
}
.check_btn:after {
    content: attr(data-name);
}

.btn_move_work_hour{
    border: 1px solid #ff609c;
    color: #ff609c;
    font-weight: 700;
    height: 30px;
    background: #fefefe;
    padding: 0px 10px 0px 10px;
    margin-top: 0px;
    margin-bottom: 5px;
}
.btn_move_work_hour:after {
    content: attr(data-name);
}

.qr_howtouse {
    border: 1px solid #ff609c;
    color: #ff609c;
    font-weight: 700;
    height: 30px;
    background: #fefefe;
    padding: 0px 10px 0px 10px;
    margin-top: 0px;
    margin-bottom: 5px;
}
.qr_howtouse:before {
    content: attr(data-name);
}
.qr_download {
    border: 1px solid #ff609c;
    color: #ffffff;
    font-weight: 700;
    height: 30px;
    background: #ff609c;
    padding: 0px 10px 0px 10px;
    margin-top: 5px;
}
.copy_btn {
    border: 1px solid #ff609c;
    color: #ff609c;
    font-weight: 800;
    margin-left:5px;
    background: #fefefe;
}
.copy_btn1 {
    border: 1px solid #ff609c;
    color: #fefefe;
    font-weight: 800;
    margin-left:5px;
    background: #ff609c;
}
.copy_btn:after {
    content: attr(data-name);
}
/* 메신저 설정 */
.messenger_notice {
    padding: .6rem;
}
.messenger_notice h5 {
    font-size: 1.125rem;
    margin-bottom: 1.5rem;
}
.biz_join {
    display: flex;
    justify-content: center;
    margin-bottom: 1rem;
}
.biz_join_btn {
    background: #fae301;
    color: #391b1b;
    font-weight: 800;
    font-size: .938rem;
    transform: skew(-0.03deg);
    border-radius: 20px;
    padding: .5rem 1rem;
}
.form-group.biz_agree {
    align-self: center;
}
.form-group.biz_agree .form-check {
    white-space: nowrap;
}
/* 예약 시간관리 */
.pre_btn, .next_btn {
    border: 1px solid #dee3e7;
    background: #fff;
    border-radius: 0;
}
.date_group .btn:hover,
.date_group .btn:active,
.date_group .btn:focus {
    z-index: 0;
}
.date_group .btn_pink {
    white-space: initial;
}
.book_time_tb {
    width: 100%;
    max-width: 315px;
    min-width: 180px;
    margin: 0 .5rem .5rem;
}
.book_time_tb tr {
    display: block;
}
.book_time_tb th {
    display: block;
    border-bottom: 1px solid #dee3e7;
    padding: .75rem .5rem;
    text-align: center;
}
.book_time_tb td {
    display: block;
    border: 1px solid #dee3e7;
    padding: .75rem .5rem;
    border-bottom: 0;
    text-align: center;
}
.book_time_tb td:last-child {
    border-bottom: 1px solid #dee3e7;
}
.book_time_tb .t_work {
    background: #ffa5c7;
}
.book_time_tb .t_disable {
    background: #bebabe;
}
.book_time_tb .t_closed {
    background-size: 8px 8px;
    background-image: linear-gradient(45deg, transparent 45%, rgba(16, 25, 40, 0.2) 50%, rgba(16, 25, 40, 0.2) 50%, transparent 55%);
    background-color: #f0f0f0;
}
.cld_admin_name,
.book_time_admin {
    background: #f896bf;
    width: 110px;
    height: 110px;
    border-radius: 50%;
    color: #fff;
    font-size: 1.5rem;
    font-weight: 800;
    align-items: center;
    display: flex;
    justify-content: center;
    margin: 0 auto;
    line-height: 1;
    word-break: break-word;
    text-align: center;
}
/* 직원별 컬러 */
.cld_admin_name.c_f49aa8,
.cld_bundle.c_f49aa8 .cld_event,
.book_time_admin.c_f49aa8 {
    background: #f49aa8;
}
.cld_admin_name.c_f8b6ae,
.cld_bundle.c_f8b6ae .cld_event,
.book_time_admin.c_f8b6ae {
    background: #f8b6ae;
}
.cld_admin_name.c_facdad,
.cld_bundle.c_facdad .cld_event,
.book_time_admin.c_facdad {
    background: #facdad;
}
.cld_admin_name.c_fcc88f,
.cld_bundle.c_fcc88f .cld_event,
.book_time_admin.c_fcc88f {
    background: #fcc88f;
}
.cld_admin_name.c_fbad87,
.cld_bundle.c_fbad87 .cld_event,
.book_time_admin.c_fbad87 {
    background: #fbad87;
}
.cld_admin_name.c_f8837a,
.cld_bundle.c_f8837a .cld_event,
.book_time_admin.c_f8837a {
    background: #f8837a;
}
.t_manage_legend {
    display: flex;
    justify-content: flex-end;
    padding: 1rem .938rem 0;
    text-align: right;
}
.t_manage_legend .t_operate div,
.t_manage_legend .t_closed div,
.t_manage_legend .t_work div,
.t_manage_legend .t_disable div {
    display: inline-block;
}
.t_manage_legend .t_operate div:first-child {
    border: 1px solid #dee3e7;
    width: 20px;
    height: 10px;
    margin: 0 0 0 1rem;
}
.t_manage_legend .t_work div:first-child {
    border: 1px solid #ffa5c7;
    background: #ffa5c7;
    width: 20px;
    height: 10px;
    margin: 0 0 0 1rem;
}
.t_manage_legend .t_closed div:first-child {
    border: 1px solid #bebabe;
    background-size: 8px 8px;
    background-image: linear-gradient(45deg, transparent 45%, rgba(16, 25, 40, 0.2) 50%, rgba(16, 25, 40, 0.2) 50%, transparent 55%);
    background-color: #eef0f2;
    width: 20px;
    height: 10px;
    margin: 0 0 0 1rem;
}
.t_manage_legend .t_disable div:first-child {
    border: 1px solid #bebabe;
    background: #bebabe;
    width: 20px;
    height: 10px;
    margin: 0 0 0 1rem;
}
/* 공휴일 관리 */
.h_manage_tb tbody td {
    white-space: nowrap;
}
/* 예약분석 */
.stts {
    display: flex;
    flex-direction: column;
    min-height: 220px;
    justify-content: center;
    padding: 0 .7rem;
}
.stts h5 {
    font-size: 1.125rem;
}
.stts h3 {
    font-weight: 800;
    margin: 0;
}
.stts p {
    margin: 0;
}
.stts p span {
    padding-left: .5rem;
    font-weight: 800;
}
.w_header {
    background: #fff;
    border: 0;
    font-size: 1.125rem;
    transform: skew(-0.03deg);
}
/* 예약 현황관리 */
.status_tb tbody td:last-child {
    width: 15%;
}
/* 스타일북 */
.img_wrap {
    position: relative;
    width: calc(20% - 6px);
    margin: 3px;
    border: 1px solid #dee3e7;
}
.img_thumbnail {
    position: relative;
    padding-top: 100%;
    overflow: hidden;
}
.img_thumbnail .img_box {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    -webkit-transform: translate(50%,50%);
    -ms-transform: translate(50%,50%);
    transform: translate(50%,50%);
}
.img_thumbnail .img_box img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    -webkit-transform: translate(50%,50%);
    -ms-transform: translate(50%,50%);
    transform: translate(-50%,-50%);
    object-fit: contain;
}
.img_wrap .check_only {
    position: absolute;
    top: 0;
    right: 0;
    justify-content: flex-end;
    align-items: center;
    padding: .75rem;
}
.img_wrap .checkmark {
    background: #fff;
}
.list_length {
    display: inline-block;
    width: auto;
    padding: 4px;
    font-size: inherit;
    color: #000;
    border-radius: 3px;
}
.list_paging {
    justify-content: flex-end;
}
.list_paging .page-link:hover {
    background: #222;
    border-color: #222;
    color: #fff !important;
}
/* 스타일북 추가 */
.img_wrap .img_num {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 2;
    background: #222;
    color: #fff;
    padding: .063rem .459rem;
}
h6.sub_title {
    font-weight: 800;
    margin-bottom: 0;
    line-height: 2.3;
    white-space: nowrap;
}
.upload_multi {
    background: transparent;
    border: 1px solid #ff609c;
    border-radius: 5px;
    text-align: center;
    width: 60%;
    margin: 1.875rem auto;
    padding: 1.25rem;
    cursor: pointer;
}
.upload_multi p {
    color: #ff609c;
    font-weight: 800;
}
.upload_multi p:last-child {
    font-weight: initial;
    margin-bottom: 0;
}
/*datepicker readnonly 백그라운드 흰색*/
.datePickerForm[readonly] {
    cursor: pointer !important;
    background-color: white !important;
}
.modal_datePickerForm[readonly] {
    cursor: pointer !important;
    background-color: white !important;
}
/* 예약 승인관리 (캘린더) */
main.cld_h {
    height: calc(100% - 65px);
}
.row.cld_h {
    height: calc(100% - 81.59px);
}
.calendar_op {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: .5rem;
}
.calendar_op .opbox_1 {
    flex: 1;
}
.calendar_add {
    float: right;
}
.calendar_wrap {
    clear: both;
    position: relative;
    display: flex;
    overflow: auto;
    width: 100%;
    height: calc(100% - 5.25rem);
}
.cld_blank {
    position: sticky;
    top: 0;
    left: 0;
    z-index: 100;
}
.cld_blank div {
    background: #fff;
    width: 42px;
    height: 126px;
    position: absolute;
}
.cld_timeline {
    display: table;
    position: sticky;
    padding-top: 126px;
    left: 0;
    background: #fff;
    z-index: 51;
}
.cld_box {
    display: table;
    width: 100%;
    height: 100%;
}
.cld_header {
    flex-direction: row;
    display: flex;
    position: sticky;
    top: 0;
    z-index: 50;
    background: #fff;
}
.cld_bundle {
    height: 1080px;
    position: relative;
    width: 100%;
    min-width: 20%;
    background: repeating-linear-gradient(white, white 59px, #bebabe 60px);
    border-right: 1px solid #dee3e7;
}
.cld_timeline .cld_square {
    font-size: .688rem;
    text-align: center;
    height: 60px;
    width: 42px;
    box-shadow: inset -2px 0 0 rgba(0, 0, 0, .15);
}
.cld_sheet {
    display: flex;
    flex-direction: row;
}
.cld_admin {
    position: relative;
    width: 100%;
    min-width: 20%;
    background: #fff;
    top: 0;
    z-index: 50;
    height: 126px;
    box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .15);
}
.cld_admin .cld_admin_name {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    overflow: hidden;
}
.cld_event {
    position: absolute;
    top: 0;
    left: 0;
    background: #f896bf;
    width: 100%;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .8);
    z-index: 10;
    border-radius: 3px;
}
.cld_txt {
    color: #fff;
    transform: skew(-0.03deg);
    padding: .25rem .5rem 0;
    line-height: 1;
    font-size: .813rem;
}
.cld_txt small {
    display: block;
}
.cld_week {
    position: relative;
    width: 100%;
    min-width: 14.285%;
    background: #fff;
    top: 0;
    z-index: 50;
    height: 126px;
    box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .15);
}
.cld_date {
    position: absolute;
    width: 99%;
    display: flex;
    border-bottom: 3px solid #f896bf;
    margin: 2rem .063rem 0;
    min-height: 75px;
    color: #f896bf;
}
.cld_date .date_num {
    font-size: 1.75rem;
    padding-right: .5rem;
    align-self: center;
    font-weight: 800;
}
.cld_date .date_txt {
    font-size: 1.125rem;
    align-self: center;
    padding-top: .375rem;
    transform: skew(-0.03deg);
    font-weight: 700;
}
.weekly_sheet .cld_bundle {
    min-width: 14.285%;
}
/* 날짜별 지정 컬러 */
.cld_week:nth-child(2) .cld_date {
    border-color: #f49aa8;
    color: #f49aa8;
}
.weekly_sheet .cld_bundle:nth-child(2) .cld_event {
    background: #f49aa8;
}
.cld_week:nth-child(3) .cld_date {
    border-color: #f8b6ae;
    color: #f8b6ae;
}
.weekly_sheet .cld_bundle:nth-child(3) .cld_event {
    background: #f8b6ae;
}
.cld_week:nth-child(4) .cld_date {
    border-color: #facdad;
    color: #facdad;
}
.weekly_sheet .cld_bundle:nth-child(4) .cld_event {
    background: #facdad;
}
.cld_week:nth-child(5) .cld_date {
    border-color: #fcc88f;
    color: #fcc88f;
}
.weekly_sheet .cld_bundle:nth-child(5) .cld_event {
    background: #fcc88f;
}
.cld_week:nth-child(6) .cld_date {
    border-color: #fbad87;
    color: #fbad87;
}
.weekly_sheet .cld_bundle:nth-child(6) .cld_event {
    background: #fbad87;
}
.cld_week:last-child .cld_date {
    border-color: #f8837a;
    color: #f8837a;
}
.weekly_sheet .cld_bundle:last-child .cld_event {
    background: #f8837a;
}
/* 알림 설정 */
.b_plus_left .btn-group {
    min-width: 65%;
    align-items: stretch;
}
.b_plus_left .btn-group .btn {
    display: flex;
    font-size: 1.125rem;
    border: 1px solid #dee3e7;
    border-radius: 10px !important;
    color: #bebabe;
    font-weight: 700;
    margin-bottom: 1rem;
    text-align: left;
    padding: .657rem 1.875rem .657rem 1.25rem;
    width: 100%;
    white-space: initial;
    align-items: center;
    word-break: keep-all;
}
.b_plus_left .btn-group .btn:after {
    content: '\f105';
    font-family: "SquarePlus", "Font Awesome 5 Free", sans-serif;
    font-weight: 900;
    position: absolute;
    right: 1.25rem;
}
.b_plus_left .btn-group .btn.active {
    border-color: #ff609c;
    color: #ff609c;
}
.b_plus_left .btn-group .btn:last-child {
    margin-bottom: 0;
}
.b_plus_right form .alert_btn {
    text-align: right;
}
.count_ch {
    float: right;
    font-size: .813rem;
    color: #222;
    transform: skew(-0.03deg);
}
/* 첫 로그인 모달창 */
.modal form.basic_set {
    padding-top: 1.5rem;
}
.modal form.basic_set .form-control {
    padding: .75rem 1rem;
    line-height: 1.5;
    border-radius: .625rem;
}
.modal form.basic_set select.form-control {
    height: auto;
}
.modal form.basic_set .btn-group .btn {
    padding: 0;
    margin: .5rem .5rem 0;
    border: 5px solid transparent;
    border-radius: 18px;
}
.modal form.basic_set .btn-group .btn:not(:disabled):not(.disabled).active {
    border-color: #ff609c;
}
.modal form.basic_set .btn-group .btn.disabled,
.modal form.version .btn-group .btn.disabled {
    pointer-events: none;
}
.qr_notice {
    margin: 2rem 0;
    color: #ff609c;
}
.qr_url {
    margin: 2rem 0 1.5rem;
    font-weight: 800;
}
.qr_code {
    max-width: 12.5rem;
    max-height: 12.5rem;
    margin: 0 auto;
}
.modal form.version .btn-group {
    width: 100%;
    justify-content: center;
}
.modal form.version .btn {
    flex: 0 0 40%;
    color: #bebabe;
    padding: 0;
    margin: .5rem;
    border: 1px solid #bebabe;
    border-radius: 10px !important;
}
.modal form.version .btn label {
    display: block;
    color: #fff;
    background: #bebabe;
    width: 100%;
    border-radius: 10px 10px 0 0;
    font-size: 1.5rem;
    padding: 1.375rem 1rem;
    cursor: pointer;
}
.modal form.version .btn h5 {
    color: #bebabe;
    font-weight: 800;
    margin: 2rem 0;
}
.modal form.version .btn-group .btn:not(:disabled):not(.disabled).active {
    border-color: #ff609c;
    color: #ff609c;
}
.modal form.version .btn-group .btn:not(:disabled):not(.disabled).active label,
.modal form.version .btn-group .btn:not(:disabled):not(.disabled).active ul.check_list li:before {
    background: #ff609c;
}
.modal form.version .btn-group .btn:not(:disabled):not(.disabled).active ul.check_list ul li:before {
    background: none;
    color: #ff609c;
}
.modal form.version .btn-group .btn:not(:disabled):not(.disabled).active h5 {
    color: #ff609c;
}
.modal form.version ul.check_list {
    list-style: none;
    text-align: left;
    width: 80%;
    margin: 1rem auto 3rem;
    padding-left: 1.875rem;
}
.modal form.version ul.check_list li {
    position: relative;
    font-weight: 800;
    margin-bottom: 1rem;
}
.modal form.version ul.check_list li:before {
    content: '\f00c';
    font-family: "SquarePlus", "Font Awesome 5 Free", sans-serif;
    font-weight: 900;
    font-size: .625rem;
    text-align: center;
    position: absolute;
    top: 2px;
    left: -1.875rem;
    background: #bebabe;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    color: #fff;
    line-height: 2;
}
.modal form.version ul.check_list ul {
    list-style: none;
    padding-left: 0;
}
.modal form.version ul.check_list ul li {
    font-weight: normal;
    margin: 0;
}
.modal form.version ul.check_list ul li:before {
    content: '-';
    background: none;
    width: auto;
    color: #bebabe;
    left: -.625rem;
}
.step_box {
    padding-left: 9rem;
    width: 90%;
    margin:0 auto;
}
.step_box_title {
    font-size: 1.25rem;
    color: #ff609c;
    font-weight: 800;
    padding: .5rem 0;
    position: relative;
}
.step_box_title:before {
    background: #ff609c;
    color: #fff;
    padding: 0.375rem 0.75rem;
    border-radius: 22px;
    position: absolute;
    top: 3px;
    left: -8rem;
    font-size: 1.125rem;
}
.step_box .step_box_title:before {
    content: attr(data-name);
}
.step_box_info {
    position: relative;
    padding: 1rem 0;
    word-break: keep-all;
}
.step_box_info a {
    color: #222;
    font-weight: 800;
}
.step_box_info:before {
    content: '';
    color: #ff609c;
    position: absolute;
    left: -5.5rem;
    border-left: 1px solid #ff609c;
    height: calc(100% - 2rem);
}
.step_box.step_3 .step_box_info:before {
    display: none;
}
.step_box_info p {
    padding-left: .75rem;
    position: relative;
}
.step_box_info p:before {
    content: '*';
    position: absolute;
    left: 0;
}
.step_box.step_1 .step_box_info p:first-child:before {
    display: none;
}
.btn_yellow {
    background: #fae301;
    color: #222;
    border: 1px solid #fae301;
    font-weight: 800;
}
.two_btn_box {
    display: flex;
    justify-content: center;
    width: 100%;
}
.two_btn_box .btn {
    min-width: 23%;
    transform: skew(-0.03deg);
    margin: 0 1.5rem;
}
.cs_num {
    font-size: .875rem;
    text-align: center;
    font-weight: 700;
    margin-top: 1.5rem;
}
.invite_accept p img,
.complete_ko p img {
    max-width: 100%;
    height: auto;
}
.invite_accept p {
    font-size: 1.313rem;
    text-align: center;
    margin-top: 4rem;
    margin-bottom: .5rem;
    word-break: keep-all;
}
.complete_ko h3 {
    font-weight: 800;
    line-height: 1.8;
    margin-bottom: -2.5rem;
    word-break: keep-all;
}
.complete_ko p {
    font-size: 1.313rem;
    text-align: center;
    margin-top: -2.5rem;
    line-height: 1.8;
    word-break: keep-all;
}
/* 슈퍼 관리자 */
.modal .tel_input select {
    display: inline-block;
    width: calc(46% - 5px);
}
.modal .tel_input input {
    display: inline-block;
    width: 54%;
}
.modal .shop_url input {
    display: inline-block;
    width: 47%;
}
/* --------------- Media Query --------------- */
@media (min-width: 1200px) {
    .tb_filter label {
        width: 50%;
    }

    /* 고객정보 */
    .info_tab .table-responsive {
        min-height: 297px;
    }
    .border-xl-pink {
        border-right: 1px solid #ff609c;
    }
    .shop_url .form-group {
        margin-right:70px;
    }
    .desk_btn {
        position: fixed;
        font-size: 40px;
        border-radius: 12px;
        box-shadow: 1px 1px 1px 1px gray;
        right: 15px;
        bottom: 15px;
        width: 77px;
        height: 74px;
        font-family: "SquarePlus", "Font Awesome 5 Free", sans-serif;
        font-weight: 900;
        z-index: 100;
    }
}

@media (max-width: 1199.98px) {
    /* 태블릿 해상도에서의 br */

    .list_mobile_right{
        text-align: center;
        width: 150px;
    }
    .tab_br {
        display: block;
    }

    .list_mobile_width{
        width: 100%;
    }
    .customer_add form .form-row,
    .admin_add form .form-row,
    .setting_tab form .form-row {
        justify-content: center;
    }
    /* 메인 */
    .lg_grid {
        display: flex;
    }
    .main-p-l {
        width: 100%;
        padding: 1rem 1rem .5rem 1rem;
    }
    .main-p-r {
        padding: .5rem 1rem 1rem 1rem;
    }
    /* 고객정보 */
    .book_count div {
        flex: 0 0 25%;
    }
    .book_count div:first-child {
        flex: 0 0 100%;
        padding-bottom: 0;
    }
    .book_count div:first-child:after {
        display: none;
    }
    .info_tab .nav-item .add_btn {
        padding: .5rem 1rem;
    }
    .info_tab .nav-item .add_btn:after {
        content: '\f067';
        font-family: "SquarePlus", "Font Awesome 5 Free", sans-serif;
        font-weight: 900;
    }
    .info_tab .table-responsive {
        min-height: 209px;
    }
    .bot_box.line_one {
        flex: 0 0 50%;
    }

    /* 운영시간 테이블 */
    table.book_set_table {
        width: 100%;
    }
    /* 스타일북 */
    .img_wrap {
        width: calc(33% - 6px);
    }
    /* 예약 승인관리 (캘린더) */
    .calendar_op .opbox_1 {
        flex: 0 68%;
    }
    .calendar_op .opbox_2 {
        flex: 0 30%;
    }
    .calendar_op .opbox_3 {
        width: 100%;
        text-align: center;
    }
    .calendar_add .add_btn {
        position: fixed!important;
        bottom: 23px;
        right: 29px;
        width: auto;
        border-radius: 10px;
        box-shadow: 0 3px 3px 0 rgba(0, 0, 0, .14), 0 1px 7px 0 rgba(0, 0, 0, .12), 0 3px 1px -1px rgba(0, 0, 0, .2);
        z-index: 100;
    }
    .list_add .add_btn {
        position: fixed;
        bottom: 23px;
        right: 1.8rem;
        width: auto;
        border-radius: 10px;
        box-shadow: 0 3px 3px 0 rgba(0, 0, 0, .14), 0 1px 7px 0 rgba(0, 0, 0, .12), 0 3px 1px -1px rgba(0, 0, 0, .2);
        z-index: 100;
    }
    .calendar_add .add_btn {
        position: absolute;
        padding: .5rem 1rem;
    }
    .calendar_add .add_btn:after {

        font-family: "SquarePlus", "Font Awesome 5 Free", sans-serif;
        font-weight: 900;
    }
    .list_add .add_btn {
        padding: .5rem 1rem;
    }
    .list_add .add_btn:after {

        font-family: "SquarePlus", "Font Awesome 5 Free", sans-serif;
        font-weight: 900;
    }

    .cld_admin, .cld_bundle {
        /*min-width: 33.3%;*/
    }
    .cld_week, .weekly_sheet .cld_bundle {
        min-width: 25%;
    }
    /* 알림 설정 */
    .b_plus_left .btn-group {
        flex-direction: row;
        flex-wrap: wrap;
        margin-top: 1rem;
    }
    .b_plus_left .btn-group .btn {
        width: calc(50% - 1rem);
        margin: 0 .5rem 1rem;
        padding: .5rem 1.125rem .5rem .75rem;
        font-size: .813rem;
        border-radius: 7px !important;
    }
    .b_plus_right form {
        width: 100% !important;
        padding: 0 1rem;
        border: 1px solid rgba(0,0,0,.125);
        border-radius: 3px;
    }
    .b_plus_right form .alert_btn {
        margin-bottom: 1.5rem;
    }
    .b_plus_left .btn-group .btn:last-child {
        margin-bottom: 1rem;
    }
    .b_plus_left .btn-group .btn:after {
        right: .688rem;
    }
    .id_input .btn:before {
        content: '\f00c';
        font-family: "SquarePlus", "Font Awesome 5 Free", sans-serif;
        font-weight: 900;
    }
    .tb_top.filters .tb_filter label {
        width: 50%;
    }
    .shop_url .form-group {
        flex: 1;
        width: auto;
    }
}
@media (max-width: 991.98px) {
    header .navbar-text div.hide-txt {
        display: none;
    }
    /* dataTable & option */
    .tb_paging .dataTables_paginate {
        margin-top: 0;
        float: none;
        text-align: center;
    }
    .list_paging {
        justify-content: center;
    }
    .st_info,
    .tb_info {
        text-align: center;
    }
    /* 테이블 상단의 검색 및 추가/삭제 버튼 */
    .tb_top .re_1 {
        display: none;
    }
    .tb_top .re_2 {
        flex: 0 0 60%;
    }
    .add_btn, .delete_btn {
        padding: .375rem .75rem;
    }
    /*.add_btn:after {*/
    /*    content: '\f067';*/
    /*    font-family: "SquarePlus", "Font Awesome 5 Free", sans-serif;*/
    /*    font-weight: 900;*/
    /*}*/
    .delete_btn:after {
        content: '\f2ed';
        font-family: "SquarePlus", "Font Awesome 5 Free", sans-serif;
        font-weight: 900;
    }
    .del_info, .cancel_btn {
        display: block;
        width: 100%;
    }
    .del_info:after {
        display: none;
    }
    /* modal */
    .modal-body, .modal-footer .btn {
        font-size: small;
    }
    /* 메인 */
    /*.lg_grid {*/
    /*    display: initial;*/
    /*}*/
    /* 고객추가 등록버튼 */
    .r_footer .save_btn {
        display: block;
        width: 100%;
    }
    /* 고객정보 */
    .basic_info div {
        padding: 1rem 0 0;
        border-top: 1px solid #dee3e7;
    }
    .basic_info div:last-child {
        border-bottom: 1px solid #dee3e7;
    }
    .info_temp_img {
        width: 120px;
        height: 120px;
    }
    .info_tab .nav-item .add_btn {
        position: fixed;
        bottom: 15px;
        right: 15px;
        width: auto;
        border-radius: 10px;
        box-shadow: 0 3px 3px 0 rgba(0, 0, 0, .14), 0 1px 7px 0 rgba(0, 0, 0, .12), 0 3px 1px -1px rgba(0, 0, 0, .2);
        z-index: 100;
    }
    /* 직원관리 */
    .s_manage .tb_top .re_2 {
        flex: 0 0 50%;
    }
    .s_manage .dataTables_length {
        display: none;
    }
    /* 예약분석 */
    .anal_today {
        position: absolute;
        width: auto;
        top: -3px;
        left: 45px;
    }
    .anal_today .btn {
        padding: 0 .5rem;
        border-radius: 15px;
    }
    /* 설정 */
    .form-group.biz_agree {
        margin: 1rem 0 1.5rem;
    }
    .b_plus_right form .alert_btn {
        text-align: center;
    }
    .modal form.version .btn {
        flex: 0 0 calc(50% - 1rem);
        white-space: initial;
        word-break: keep-all;
    }
    .step_box {
        width: 100%;
        padding-left: 8rem;
    }
    .step_box_title:before {
        left: -7rem;
    }
    .step_box_info:before {
        left: -4.5rem;
    }
    .modal .shop_url input {
        width: calc(100% - 114px);
    }
    .id_input .btn:before {
        content: attr(data-name);
        font-weight: 700;
    }
    .tb_top.filters .form-inline {
        display: block;
    }
    .tb_top.filters .form-inline label {
        display: block;
    }
    .tb_top.filters .form-control {
        width: 100%;
    }
    .tb_top.filters span.tilde {
        display: none;
    }
    .tb_top.filters .btn {
        width: 100%;
        margin-bottom: 1rem;
    }
    .tb_top.filters .tb_filter label {
        width: 100%;
    }
    .check_btn:after {
        content: '\f00c';
        font-family: "SquarePlus", "Font Awesome 5 Free", sans-serif;
        font-weight: 900;
    }
    /* STAN WORK (2023-04-26) */
    .copy_btn_mobile:after {
        content: '☍';
        font-family: "SquarePlus", "Font Awesome 5 Free", sans-serif;
        font-weight: 900;
    }
}
@media (min-width: 768px) {

    /* header */
    #pc_toggle {
        display: block;
    }
    .mobile_size{
        display: none;
    }
    /* Left sidebar(aside) */
    .left-sidebar {
        left: 0;
    }
    /* main(contents) */
    .content {
        margin-left: 230px;
        min-height: calc(100vh - 65px);
    }
    .sidebar-collapse .content {
        margin-left: 65px;
    }
    .r_footer {
        text-align: right;
    }
    .text-md-nowrap {
        white-space: nowrap;
    }
}
@media (max-width: 767.98px) {
    .home_row{
        flex-wrap: wrap;
    }

    .guide_video{
        width: 300px;
        height: 280px;
    }
    .play_line{
        font-size: 17px;
    }
    .footer_size{
        width: 350px;
        margin: 0 auto;
    }
    .home_content{
        padding-right: 15px;
    }
/* header */
    .sidebar-collapse header, header {
        min-height: 119px;
    }
    .sidebar-collapse header .logo, header .logo {
        width: 100%;
    }
    .sidebar-collapse .logo-lg, .logo-lg {
        display: block;
    }
    .sidebar-collapse .logo-sm ,.logo-sm {
        display: none;
    }
    .sidebar-collapse .mini-txt {
        display: inline-block;
    }
    #mobile_toggle {
        display: block;
    }
    /* Left sidebar(aside) */
    .sidebar-open .left-sidebar {
        padding-top: 119px;
        left: 0;
    }
    /* 타이틀 크기 변경 */
    .content .container-fluid > :first-child h3 {
        margin: .75rem 0 !important;
        font-size: 1.25rem;
    }
    /* 업무시간 테이블 */
    table.time_table thead {
        display: none;
    }
    table.time_table tr {
        display: block;
        margin-bottom: 10px;
        border: 1px solid #dee2e6;
        border-radius: 5px;
    }
    table.time_table th, table.time_table td {
        display: block;
        position: relative;
        padding-left: 30%;
    }
    table.time_table td:before {
        display: flex;
        position: absolute;
        left: 0;
        top: 0;
        width: 30%;
        height: 100%;
        justify-content: center;
        align-items: center;
        line-height: 1;
        word-break: keep-all;
    }
    table.time_table tbody th {
        padding-left: 0;
        padding-right: 0;
    }
    table.time_table td:nth-child(2):before {
        content: attr(data-start);
        font-weight: bold;
    }
    table.time_table td:nth-child(3):before {
        content: attr(data-close);
        font-weight: bold;
    }
    table.time_table .form-control {
        width: 40%;
    }
    .biz_join_btn {
        width: 100%;
    }
    .modifyDiv{
        top: 17%;
        left: auto;
    }
    /* 예약 승인관리 (캘린더) */
    main.cld_h {
        height: calc(100% - 119px);
    }
    .row.cld_h {
        height: calc(100% - 48px);
    }
    .cld_week, .weekly_sheet .cld_bundle {
        min-width: 33.3%;
    }
}
@media (max-width: 575.98px) {
    /* 모바일 해상도에서 텍스트 숨김처리 */
    .hide-txt {
        display: none;
    }
    header .dropdown .btn {
        min-width: 3rem;
    }
    /*header .dropdown-menu {
        left: 50%;
        transform: translateX(-80%);
    }*/
    /* 그룹관리 */
    .add_btn_only {
        width: 100%;
    }
    /* 챗봇정보 말풍선 */
    .bot_box {
        flex: 0 0 100%;
    }
    .bot_box.line_one {
        flex: 0 0 100%;
    }
    /* 직원관리 */
    .s_manage .tb_top .re_2 {
        flex: 0 0 100%;
        margin-top: .5rem;
    }
    .s_manage .tb_top .re_2 label {
        width: 100%;
    }
    .s_manage .tb_top .re_3 {
        position: absolute;
        top: 0;
        right: 0;
        width: auto;
    }
    .s_manage .tb_top .re_3 .add_btn,
    .s_manage .tb_top .re_3 .delete_btn {
        width: auto;
    }
    .s_manage .tb_top .re_3 .add_btn:after {
        content: '\f067';
        font-family: "SquarePlus", "Font Awesome 5 Free", sans-serif;
        font-weight: 900;
    }
    .s_manage .tb_top .re_3 .delete_btn:after {
        content: '\f2ed';
        font-family: "SquarePlus", "Font Awesome 5 Free", sans-serif;
        font-weight: 900;
    }
    header .logout_btn:after {
        content: '\f2f5';
        font-family: "SquarePlus", "Font Awesome 5 Free", sans-serif;
        font-weight: 900;
    }
    /* 예약 승인관리 (캘린더) */
    html {
        height: initial;
    }
    .calendar_op {
        display: block;
    }
    .cld_admin, .cld_bundle {
        /*min-width: 50%;*/
    }
    .calendar_wrap {
        height: calc(100% - 11rem);
    }
    /* 설정 */
    .shop_url .form-group {
        margin-bottom: 0;
    }
    .change_version {
        width: 100%;
    }
}
@media (max-width: 430px) {
    header label {
        width: 21px;
        margin: 0;
    }
    .web_size{
        display: none;
    }
    /* dataTable */
    .tb_top .re_2 {
        flex: 0 0 100%;
    }
    .tb_filter label {
        width: 100% !important;
    }
    .st_top .re_3 div,
    .tb_top .re_3 div {
        float: initial !important;
        text-align: center;
    }
    .st_top .re_1 {
        display: none;
    }
    .add_btn, .delete_btn {
        width: 48%;
    }
    .one_btn {
        width: 100%;
    }
    .add_btn:after {
        content: attr(data-name);
    }
    .delete_btn:after {
        content: attr(data-name);
    }
    /* 모바일 해상도에서의 br */
    .mb_br {
        display: block;
    }
    /* 메인 */
    .main_profile .store_img {
        display: none;
    }
    .main_profile .store_name {
        margin-left: 0;
    }
    /* 고객정보 */
    .book_count div p.h6 {
        font-size: 0.813rem;
    }
    /* 시술추가 - 이미지 추가 버튼 */
    .add_outline_btn.img_add {
        position: absolute;
        padding: 0 .4rem;
        line-height: 1;
        top: -24px;
        left: 100px;
    }
    .add_outline_btn.img_add:after {
        content: '\f067';
        font-family: "SquarePlus", "Font Awesome 5 Free", sans-serif;
        font-weight: 900;
    }
    .del_info {
        width: 100%;
    }
    table.time_table .form-inline {
        flex-wrap: wrap;
    }
    table.time_table .form-control {
        width: 65%;
    }
    .mb_date {
        justify-content: space-between;
    }
    .mb_date span {
        display: none;
    }
    .mb_date label {
        display: initial !important;
        flex: 0 0 13%;
        white-space: nowrap;
    }
    .mb_date .form-control {
        flex: 0 0 85%;
    }
    /* 예약 시간관리 */
    .date_group .btn {
        padding: .25rem .5rem;
        font-size: .875rem;
        line-height: 1.5;
    }
    /* 운영시간 테이블 */
    table.book_set_table tr {
        display: block;
    }
    table.book_set_table tbody tr {
        border: 1px solid #dee2e6;
        border-radius: 5px;
        margin-bottom: 10px;
        padding-top: 5px;
    }
    table.book_set_table .form-control {
        width: 45%;
    }
    table.book_set_table .form-inline {
        flex-wrap: wrap;
        justify-content: initial;
    }
    /* 예약 승인관리 (캘린더) */
    .cld_admin, .cld_bundle {
        /*min-width: 100%;*/
    }
    .cld_week, .weekly_sheet .cld_bundle {
        min-width: 100%;
    }
    /* 설정 */
    .shop_url {
        flex-wrap: wrap;
    }
    .form-group.biz_agree .form-check {
        white-space: initial;
    }
    /* 알림 설정 */
    .b_plus_left .btn-group {
        flex-direction: column;
        width: 100%;
    }
    .b_plus_left .btn-group .btn {
        width: 100%;
        margin: 0 0 .5rem;
    }
    .b_plus h6 {
        font-size: .938rem;
    }
    .b_plus_right .form-control {
        font-size: .938rem;
    }
    .modal form.basic_set .btn-group .btn {
        margin: 0 .188rem;
    }
    .modal form.version .btn-group {
        flex-wrap: wrap;
    }
    .modal form.version .btn {
        flex: 0 0 calc(100% - 1rem);
    }
    .step_box {
        padding-left: 0;
    }
    .step_box .step_box_title:before {
        position: initial;
        display: block;
        background: transparent;
        color: #ff609c;
        padding: 0;
        content: attr(data-name)'.';
    }
    .two_btn_box .btn {
        min-width: 38%;
        margin: 0 .75rem;
    }
    .invite_accept h4 {
        font-size: 1.25rem;
    }
    .invite_accept p {
        font-size: 1rem;
    }
    .complete_ko h3 {
        font-size: 1.5rem;
        margin-bottom: -1.5rem;
    }
    .complete_ko p {
        margin-top: -1.5rem;
    }
    .shop_url span {
        width: 100%;
    }
}
@media (max-width: 360px) {
    .info_temp_img {
        width: 115px;
        height: 115px;
    }
    .biz_join {
        flex-wrap: wrap;
    }
    .biz_join .btn {
        margin: 0 0 .5rem !important;
    }
    .id_input .btn:before {
        content: '\f00c';
        font-family: "SquarePlus", "Font Awesome 5 Free", sans-serif;
        font-weight: 900;
    }
}
@media (max-width: 320px) {
    table.book_set_table th {
        font-size: .813rem;
    }
    table.book_set_table .form-control {
        width: 43%;
        font-size: .688rem;
    }
    /* 설정 */
    .shop_url .form-group {
        margin: 0 0 .5rem;
    }
    .check_btn {
        width: 100%;
    }
    .check_btn:after {
        content: attr(data-name);
    }
    .copy_btn {
        width: 100%;
    }
    .copy_btn:after {
        content: attr(data-name);
    }
    .two_btn_box .btn {
        min-width: 42%;
        margin: 0 .25rem;
    }
    .modal form.basic_set .btn-group {
        flex-wrap: wrap;
    }
    .modal form.basic_set .btn-group .btn {
        margin: 0 .75rem;
    }
}
@media (max-width: 812px) and (orientation: landscape) {
    html {
        height: initial;
    }
}