@charset "UTF-8";
@import url("/css/app/font.css");

/*        공통 css     */
*, ::after, ::before {
    box-sizing: border-box;
}
html {
    height: 100%;
}
body {
    position: relative; min-height: 100%; margin: 0; text-align: left; line-height: 24px; font-size: 16px; font-weight: 300; letter-spacing: 0.9px; color: #37465d; font-family: 'Noto Sans JP', 'Noto Sans KR', 'Malgun Gothic', dotum, sans-serif; word-break: keep-all;
}
html, h1, h2, h3, h4, h5, h6, p, form, fieldset, img {
    margin: 0; padding: 0; border: 0
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
    display:block;
}
ul, dl, dt, dd {
    margin: 0; padding: 0; list-style: none;
}
span, div {
    cursor: default;
}
label, input, textarea, select, button {
    display: inline-block; outline: 0; font-family: 'Noto Sans JP', 'Noto Sans KR', 'Malgun Gothic', Arial, sans-serif, "Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
}
select {
    appearance : none ;
    -webkit-appearance : none ;
}
select::-ms-expand {
    display: none; /* IE 10, 11 */
}
select:after {
    content: "▼"; position: absolute; top: 0; right: 0;
}
a, button {
    cursor: pointer; word-break: keep-all;
}
a {
    color: #37465d; text-decoration: none;
}
button a {
    color: #fff;
}
textarea {
    min-height: 8rem;
}
input[type=text], input[type=email], input[type=password], input[type=number], textarea, label, select {
    padding: 8px 0; font-size: 16px; color: #37465d; line-height: 24px;
}
input[type=text], input[type=email], input[type=password], input[type=number], textarea {
    padding-left: 20px; padding-right: 20px; border: 1px solid #dfdce9; border-radius: 5px;
}
input::placeholder, textarea::placeholder {
    font-size: 16px; font-weight: 300; color: #dfdce9; line-height: 20px;
}
input[type=text]:disabled, input[type=email]:disabled, input[type=password]:disabled, input[type=number]:disabled, textarea:disabled {
    background-color: transparent; border: none !important; cursor: default;
}
input:focus, a:focus, button:focus {
    outline: none;
}
input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px white inset;
}


.row {
    display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap;
}
.row.center {
    justify-content: center;
}
.wauto { width: auto; } .w5 { width: 5%; } .w15 { width: 15%; } .w25 { width: 25%; } .w35 { width: 35%; } .w45 { width: 45%; } .w55 { width: 55%; } .w65 { width: 65%; } .w75 { width: 75%; } .w85 { width: 85%; } .w95 { width: 95%; }
.w10 { width: 10%; } .w20 { width: 20%; } .w30 { width: 30%; } .w40 { width: 40%; } .w50 { width: 50%; } .w60 { width: 60%; } .w70 { width: 70%; } .w80 { width: 80%; } .w90 { width: 90%; } .w100 { width: 100%; }

.ml0 { margin-left: 0; } .mlauto { margin-left: auto; }
.ml5 { margin-left: 5%; } .ml15 { margin-left: 15%; } .ml25 { margin-left: 25%; } .ml35 { margin-left: 35%; } .ml45 { margin-left: 45%; } .ml55 { margin-left: 55%; } .ml65 { margin-left: 65%; } .ml75 { margin-left: 75%; } .ml85 { margin-left: 85%; } .ml95 { margin-left: 95%; }
.ml10 { margin-left: 10%; } .ml20 { margin-left: 20%; } .ml30 { margin-left: 30%; } .ml40 { margin-left: 40%; } .ml50 { margin-left: 50%; } .ml60 { margin-left: 60%; } .ml70 { margin-left: 70%; } .ml80 { margin-left: 80%; } .ml90 { margin-left: 90%; } .ml100 { margin-left: 100%; }
.mr0 { margin-right: 0; } .mrauto { margin-right: auto; }
.mr5 { margin-right: 5%; } .mr15 { margin-right: 15%; } .mr25 { margin-right: 25%; } .mr35 { margin-right: 35%; } .mr45 { margin-right: 45%; } .mr55 { margin-right: 55%; } .mr65 { margin-right: 65%; } .mr75 { margin-right: 75%; } .mr85 { margin-right: 85%; } .mr95 { margin-right: 95%; }
.mr10 { margin-right: 10%; } .mr20 { margin-right: 20%; } .mr30 { margin-right: 30%; } .mr40 { margin-right: 40%; } .mr50 { margin-right: 50%; } .mr60 { margin-right: 60%; } .mr70 { margin-right: 70%; } .mr80 { margin-right: 80%; } .mr90 { margin-right: 90%; } .mr100 { margin-right: 100%; }
.mt10 { margin-top: 10px; } .mt20 { margin-top: 20px; } .mt30 { margin-top: 30px; }
.mb10 { margin-bottom: 10px; } .mb20 { margin-bottom: 20px; }

.pos-relative { position: relative; }
.d-none { display: none; } .d-block { display: block; } .d-inline-block { display: inline-block; }
.t-center { text-align: center !important; } .t-left { text-align: left !important; } .t-right { text-align: right !important; }
.bg-color1 { background-color: #AD1457 !important; } .bg-color2 { background-color: #F4511E !important; } .bg-color3 { background-color: #E4C441 !important; } .bg-color4 { background-color: #0B8043 !important; }
.bg-color5 { background-color: #3F51B5 !important; } .bg-color6 { background-color: #8E24AA !important; } .bg-color7 { background-color: #D81B60 !important; } .bg-color8 { background-color: #EF6C00 !important; }
.bg-color9 { background-color: #C0CA33 !important; } .bg-color10 { background-color: #009688 !important; } .bg-color11 { background-color: #7986CB !important; } .bg-color12 { background-color: #795548 !important; }
.bg-color13 { background-color: #D50000 !important; } .bg-color14 { background-color: #F09300 !important; } .bg-color15 { background-color: #7CB342 !important; } .bg-color16 { background-color: #039BE5 !important; }
.bg-color17 { background-color: #B39DDB !important; } .bg-color18 { background-color: #616161 !important; } .bg-color19 { background-color: #E67C73 !important; } .bg-color20 { background-color: #F6BF26 !important; }
.bg-color21 { background-color: #33B679 !important; } .bg-color22 { background-color: #4285F4 !important; } .bg-color23 { background-color: #9E69AF !important; } .bg-color24 { background-color: #A79B8E !important; }

.button {
    position: relative; display: inline-block; padding: 7px 15px; font-size: 16px; line-height: 24px; color: #fff; letter-spacing: 0.9px; border: none; border-radius: 5px; background-color: transparent; transition: all .3s; overflow: hidden; z-index: 1;
}
.button:before {
    content: ''; position: absolute; bottom: 0; left: 0; width: 0%; height: 100%; background-color: rgba(0, 0, 0, 0.1); transition: all .3s; z-index: -1;
    border-top-right-radius: 50%; border-bottom-right-radius: 50%;
}
.button:after {
    content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 100%; background-color: #4129fb; z-index: -2;
}
.button:hover:before {
    width: 100%;  border-top-right-radius: 0; border-bottom-right-radius: 0;
}
.button.small {
    padding: 3px 5px; font-size: 12px; line-height: 20px;
}
.button.large {
    padding: 15px 30px; font-size: 18px; line-height: 27px;
}
.button.blue:after {
    background-color: #0059A6;
}
.button.cancel {
    color: #1d81e1;
}
.button.cancel:after {
    background-color: #e3eaf0;
}
.button.outline {
    color: #0690ef;
}
.button.outline:after {
    background-color: transparent; border: 1px solid #0690ef; border-radius: 5px;
}
.button.outline.white {
    color: #fff;
}
.button.outline.white:after {
    border-color: #fff;
}
.btn-input-inner {
    position: absolute; top: 0; right: 0; padding: 8px 10px;
}
.btn-input-inner .button {
    font-size: 12px; line-height: 20px; padding: 3px 5px;
}
.btn-input-inner .button:not(:first-child) {
    margin-left: 5px;
}
.move-arrow {
    font-size: 14px; color: #777; cursor: pointer;
}
.notice {
    font-size: 14px; line-height: 20px; color: #666;
}


.layer-popup {
    display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 4; overflow-y: scroll; /*background-color: rgba(0, 0, 0, 0.3);*/
}
/* 스크롤바 설정*/
.layer-popup::-webkit-scrollbar, .layer-popup .popup-content::-webkit-scrollbar {
    width: 8px;
}
/* 스크롤바 막대 설정*/
.layer-popup::-webkit-scrollbar-thumb, .layer-popup .popup-content::-webkit-scrollbar-thumb {
    height: 17%;
    background-color: #C5BDFD;
    border-radius: 20px;
}

/* 스크롤바 뒷 배경 설정*/
.layer-popup::-webkit-scrollbar-track, .layer-popup .popup-content::-webkit-scrollbar-track {
    background-color: #EEEEEE;
}
.layer-popup .inner {
    position: relative; max-width: 500px; margin: 100px auto 50px; padding: 20px; background-color: #f7f6fa; border-radius: 5px; box-shadow: 0 0 30px 0 #bcb6ce;
}
.layer-popup .inner.large {
    max-width: 900px;
}
.layer-popup .inner.semi-large {
    max-width: 700px;
}
.layer-popup .inner .title {
    margin-top: 0;
}
.layer-popup .btn-popup-close {
    position: absolute; top: 15px; right: 25px; font-size: 1.5rem; cursor: pointer;
}
.layer-popup .popup-header {
    margin-bottom: 20px; font-size: 1.2rem;
}
.layer-popup .popup-content {
    max-height: calc(100vh - 350px); padding-bottom: 30px; overflow-y: auto;
}
.layer-popup .popup-footer {
    margin-top: 20px; text-align: right;
}

.select-wrap {
    position: relative; padding: 8px 0; font-size: 16px; line-height: 24px; color: #37465d; background-color: #fff; border: 1px solid #dfdce9; border-radius: 5px; cursor: pointer;
}
.select-wrap:after {
    content: "▼"; position: absolute; top: 8px; right: 10px;
}
.select-wrap .select-text {
    padding-left: 20px; padding-right: 30px; cursor: pointer;
}
.select-wrap .select-option {
    display: none; position: absolute; top: 1px; left: -1px; min-width: calc(100% + 2px); background-color: #fff; border: 1px solid #dfdce9; z-index: 2;
}
.select-wrap .select-option li {
    padding: 5px 20px;
}
.select-wrap .select-option li:hover {
    background-color: #ddd;
}
.select-wrap .select-option li.on {
    font-weight: 500;
}

.radio-wrap {
    display: flex; flex-wrap: wrap;
}
.radio-wrap input[type=radio] {
    display: none;
}
 .radio-wrap .radio {
    position: relative; margin-left: 20px; padding-left: 40px; cursor: pointer;
}
.radio-wrap .radio:before {
    content: ' '; position: absolute; top: 0; left: 0; display: block; width: 24px; height: 24px; background-color: #fff; border-radius: 12px; border: 1px solid #dcdcdc;
}
.radio-wrap input[type=radio]:checked ~ .radio:after {
    content: ' '; position: absolute; top: 5px; left: 5px; display: block; width: 14px; height: 14px; background-color: #4129fb; border-radius: 7px;
}
.radio-wrap .radio.disable {
    color: #aaa; cursor: default;
}
.radio-wrap .radio.disable:before {
    background-color: #aaa;
}
.radio-wrap .radio label {
    padding: 0;
}
.checkbox-wrap {
    display: flex; flex-wrap: wrap; padding: 0;
}
.checkbox-wrap input[type=checkbox] {
    display: none;
}
.checkbox-wrap .check-shape {
    position: relative; width: 24px; height: 24px; margin-right: 10px; border: 1px solid #dcdcdc; border-radius: 12px; cursor: pointer;
}
.checkbox-wrap .check-shape:before {
    content: ' '; position: absolute; top: 3.5px; left: 7px; display: none; width: 9px; height: 13px; border-right: 3.5px solid #fff; border-bottom: 3.5px solid #fff; transform: rotate(45deg);
}
.checkbox-wrap .check-text {
    font-size: 16px; line-height: 24px; color: #333; cursor: pointer;
}
.checkbox-wrap input[type=checkbox]:checked ~ .check-shape {
    border: none; background-color: #4129fb;
}
.checkbox-wrap input[type=checkbox]:checked ~ .check-shape:before {
    display: block; border-color: #fff;
}
.checkbox-wrap input[type=checkbox]:disabled ~ .check-shape {
    border-color: #ddd !important;
}
.checkbox-wrap input[type=checkbox]:disabled ~ .check-shape:before {
    border-color: #ddd !important;
}

.upload-file-wrap {
    position: relative;
}
.upload-file-wrap .input-file {
    display: none;
}
.upload-file-wrap .filename {
    display: block; width: 100%; height: 100%; padding: 8px 100px 8px 20px; color: #dfdce9; background-color: #fff; border: 1px solid #dfdce9;
}
.image-preview-wrap {
    width: 100%; margin-top: 20px; text-align: center;
}
.image-preview-wrap img {
    max-width: 100%; max-height: 300px;
}

.loading-wrap {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.3); z-index: 9999;
}
.loading-wrap div {
    position: absolute; top: calc(50% - 25px); left: calc(50% - 25px); width: 50px; height: 50px; text-align: center; background-color: #fff; border-radius: 15px;
}
.loading-wrap div i {
    display: block; margin-top: 10px; font-size: 30px;
}
.alert-wrap {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.3); z-index: 9999;
}
.alert-wrap > div {
    position: absolute; top: 150px; left: calc(50% - 175px); width: calc(100% - 10px); max-width: 400px; text-align: center; background-color: #fff; /*border-top: 30px solid #1d81e1;*/ border-radius: 10px;
}
.alert-wrap .msg {
    padding: 40px 20px 30px; line-height: 20px;
}
.alert-wrap .msg label {
    margin-left: 30px; padding: 10px 0;
}
.alert-wrap .btn-wrap {
    margin: 0 20px 20px; text-align: right;
}
.alert-wrap .btn-wrap .button {
    padding: 5px 15px; font-size: 16px; border-radius: 5px;
}
.alert-wrap .btn-wrap .btn-cancel {
    color: #1d81e1; background-color: #e3eaf0;
}
.alert-wrap .multi-alert-msg {
    max-width: 520px; padding: 40px 30px;
}
.alert-wrap .multi-alert-msg .title {
    margin-bottom: 40px; font-size: 22px; font-weight: bold;
}
.alert-wrap .multi-alert-msg .desc {
    margin-bottom: 25px;
}
.alert-wrap .multi-alert-msg .custom-content-wrap {
    margin-bottom: 30px;
}
.alert-wrap .multi-alert-msg .custom-content-wrap .radio-wrap .radio {
    margin-left: 0;
}
.alert-wrap .multi-alert-msg .button-wrap .button {
    padding: 15px; color: #fff;
}
.alert-wrap .multi-alert-msg .button-wrap .button:after {
    background-color: #4129fb;
}

.tooltip {
    position: absolute; display: none; padding: 15px; background-color: #fff; border: 1px solid #dcdcdc; z-index: 5;
}

.btn-toggle {
    position: relative; width: 25px; height: 21px; cursor: pointer; text-indent: -9999px;
}
.btn-toggle:before, .btn-toggle:after, .btn-toggle .bar {
    width: 25px; height: 3px; background-color: #37465d; border-radius: 3px; transition: all 0.3s;
}
.btn-toggle:before, .btn-toggle .bar, .btn-toggle:after {
    content: " "; position: absolute; left: 0;
}
.btn-toggle:before {
    top: 0;
}
.btn-toggle:after {
    bottom: 0;
}
.btn-toggle .bar {
    top: 9px; cursor: pointer;
}
.btn-toggle.active:before {
    -webkit-transform: translateY(9px) rotate(-135deg);
    transform: translateY(9px) rotate(-135deg);
}
.btn-toggle.active:after {
    -webkit-transform: translateY(-9px) rotate(135deg);
    transform: translateY(-9px) rotate(135deg);
}
.btn-toggle.active .bar {
    -webkit-transform: rotate3d(0, 1, 0, 90deg);
    transform: rotate3d(0, 1, 0, 90deg);
}


.icon-circle {
    width: 40px; height: 40px; margin-right: 10px; border: 2px solid #37465d; cursor: pointer; border-radius: 20px;
}
.icon-circle.on {
    position: relative;
}
.icon-circle.on:after {
    content: ' '; position: absolute; top: 6px; left: 10px; display: block; width: 15px; height: 20px; border-bottom: 5px solid #fff; border-right: 5px solid #fff; transform: rotate(45deg); -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg);
}

.status-unavailable {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%; display: flex; align-items: center; background: rgba(0, 0, 0, 0.5); z-index: 9999;
}
.status-unavailable .title {
    width: 100%; font-size: 4vh; font-weight: bold; line-height: 6vh; text-align: center; color: #fff;
}
.tab {
    display: flex; flex-wrap: wrap; align-items: center; width: 100%;
}
.tab > input[type=radio], .tab > .tab-content {
    display: none;
}
.tab > .tab-content {
    padding-top: 20px; border-top: 1px solid #dcdcdc;
}
.tab .tab-item {
    margin-bottom: -1px; padding: 12px 0; text-align: center; background-color: #eee; border: 1px solid #dcdcdc; border-bottom: none; z-index: 1; cursor: pointer;
}
.tab > input[type=radio]:checked + .tab-item {
    background-color: #fff;
}
#tab1-1:checked ~ .tab-content.tab1-1,
#tab1-2:checked ~ .tab-content.tab1-2,
#tab1-3:checked ~ .tab-content.tab1-3,
#tab1-4:checked ~ .tab-content.tab1-4 {
    display: block;
}


.ui-datepicker {
    display: none; padding: 10px; background-color: #fff; border: 1px solid #ddd; border-radius: 10px;
}
.ui-datepicker-header {
    padding: 10px 0;
}
.ui-datepicker-title {
    text-align: center;
}
.ui-datepicker-title .ui-datepicker-month, .ui-datepicker-title .ui-datepicker-year {
    padding: 5px; margin: 0 5px; border-radius: 5px;
}
.ui-datepicker-prev {
    float: left; margin-top: 5px;
}
.ui-datepicker-next {
    float: right; margin-top: 5px;
}
.ui-datepicker-prev span, .ui-datepicker-next span {
    display: block; text-indent: -9999px; overflow: hidden; cursor: pointer;
}
.ui-datepicker-prev span {
    width: 10px; height: 17px; background-image: url('/images/cal_left.png');
}
.ui-datepicker-next span {
    width: 10px; height: 17px; background-image: url('/images/cal_right.png');
}
.ui-datepicker-calendar tr th {
    border-bottom: 1px solid #ddd;
}
.ui-datepicker-calendar tr th,
.ui-datepicker-calendar tr td {
    display: inline-block; width: 30px; height: 30px; font-size: 14px; font-weight: 300; text-align: center;
}
.ui-datepicker-calendar tr td.ui-state-disabled {
    color: #aaa;
}
.ui-datepicker-calendar tr td.ui-datepicker-today a {
    font-weight: bold; text-decoration: underline;
}
.ui-datepicker-current-day {
    background-color: #0059a6; border-radius: 5px;
}
.ui-datepicker-current-day a {
    color: #fff;
}



/*              Container & Header & Footer             */
.container {
    position: relative; width: 100%; max-width: 1100px; min-height: 100%; margin: 0 auto; padding: 59px 0 40px;
}
.container.no-header {
    padding-top: 0;
}
.container.no-footer {
    padding-bottom: 0;
}
.container.login {
    min-height: calc(100vh - 40px); padding: 0; display: grid; align-items: center;
}
.content {
    min-height: calc(100vh - 103px); padding: 30px 10px; background-color: #fff;
}
.footer {
    position: absolute; bottom: 0; width: 100%; padding: 9px 0 11px 0; font-size: 12px; line-height: 18px; color: #bcb6ce; text-align: center;
}
.footer img {
    height: 18px; margin-right: 30px; vertical-align: middle;
}



/*        Nav bar     */
.navbar {
    position: fixed; top: 0; right: 0; left: 0; z-index: 3; align-items: center; background-color: #fff; box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
}
.navbar .inner {
    position: relative; flex-direction: row; -ms-flex-direction: row; flex-flow: row nowrap; -ms-flex-flow: row nowrap; -ms-flex-pack: start; flex-wrap: wrap; -ms-flex-wrap: wrap;
    align-items: center; -ms-flex-align: center; display: flex; display: -ms-flexbox; width: 100%; max-width: 1100px; height: 58px; margin: 0 auto;
}

.navbar .navbar-brand {
    display: flex; margin-left: 50px; padding: 0; font-size: 1.3rem; font-weight: 500; line-height: inherit; white-space: nowrap;
}
.navbar .navbar-brand img {
    max-height: 50px;
}
.navbar .subtext {
    margin-left: 20px; font-size: 18px; font-weight: normal; line-height: 27px; color: #333;
}
.navbar .nav {
    margin-left: 20px;
}
.navbar .nav .nav-link {
    font-size: 1.2rem;
}
.navbar .nav .nav-title {
    display: inline-block; text-align: center;
}
.navbar .nav .nav-title img {
    display: block; max-height: 50px;
}
.navbar .nav-right {
    position: absolute; top: 20px; right: 20px;
}
.admin .navbar .logout {
    font-size: 0.7rem; line-height: 1rem;
}
.admin .navbar .cur-time {
    font-size: 0.9rem; line-height: 1.2rem;
}

@media (max-width: 500px) {
    .navbar .inner {
        height: 50px;
    }
    .navbar .navbar-brand {
        margin-left: 15px;
    }
    .navbar .navbar-brand img {
        max-height: 23px;
    }
    .navbar .subtext {
        margin-left: 10px; font-size: 16px; line-height: 24px;
    }
    .navbar .nav .nav-link {
        font-size: 1rem;
    }
    .navbar .nav-right {
        top: 15px; font-size: 0.8rem;
    }
    .container {
        padding-top: 50px;
    }
    .footer {
        font-size: 10px; line-height: 15px; letter-spacing: 0.5px;
    }
    .footer img {
        height: 15px; margin-right: 10px;
    }
    .footer div {
        display: block;
    }
}



/*              Login             */
/*
.content.login {
    min-height: initial; width: 420px; margin: 0 auto; padding: 0; background-color: transparent;
}
.content.login .logo {
    margin-bottom: 40px; font-size: 24px; line-height: 32px; font-weight: 300; letter-spacing: -1px; text-align: center;
}
.content.login .login-form {
    padding: 40px 30px; background-color: #fff; border-radius: 5px; box-shadow: 0 0 20px 0 #bcb6ce;
}
.content.login .login-form .title {
    margin-bottom: 40px; text-align: center;
}
.content.login .login-form .title span {
    font-size: 24px; line-height: 32px; font-weight: 300; letter-spacing: -1px; vertical-align: middle;
}
.content.login .login-form .title img {
    max-height: 32px; vertical-align: middle;
}
.content.login .login-form .subtext {
    margin-bottom: 40px; text-align: center;
}
.content.login .login-form input[type=text], .content.login .login-form input[type=email], .content.login .login-form input[type=password] {
    display: block; width: 100%; margin-bottom: 14px;
}
.content.login .login-form button[type=submit] {
    display: block; width: 100%; padding: 10px 20px;
}
.content.login .login-guide {
    margin-top: 40px;
}
.content.login .login-guide h3 {
    margin-bottom: 10px; font-weight: 400;
}
.content.login .login-guide p {
    font-size: 14px;
}
.content.login .login-guide .temp-pass-link {
    display: block; margin-top: 20px; margin-right: 20px; font-size: 16px; font-weight: 500; text-align: center; color: #37465d; text-decoration: underline;
}

@media (max-width: 500px) {
    .content.login {
        width: calc(100% - 75px);
    }
    .content.login .login-form {
        margin: 30px 20px;
    }
    .content.login .login-form .title {
        margin: 30px 0 20px;
    }
    .content.login .login-form .title span {
        display: block; margin-top: 10px; margin-left: 0;
    }
    .content.login .login-form .temp-pass-link {
        margin-right: 12px; font-size: 14px;
    }
}*/


/*              Admin Common             */
.admin .content-title {
    padding: 0.5rem 0; font-size: 1.2rem; font-weight: 300;
}
.admin .content section {
    margin-top: 1.5rem; padding: 1rem 2rem; background-color: #fff; border: 1px solid #dcdcdc; border-radius: 10px;
}
.admin .content .section-title {
    margin-bottom: 1.5rem; font-size: 1rem; font-weight: 300;
}
.admin .content .filter-wrap {
    display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; justify-content: space-between; align-items: center;
}
.admin .content .table-wrap {
    background-color: #fff; padding: 2rem 2rem 1rem;
}
.admin .content .list-table {
    width: 100%; border-spacing: 0; font-size: 0.8rem; line-height: 1.2rem;
}
.admin .content .list-table tr {
    cursor: pointer;
}
.admin .content .list-table tr:hover, .admin .content .list-table tr:nth-child(even):hover {
    background-color: #eee;
}
.admin .content .list-table tr:nth-child(even) {
    background-color: #f8f9fa;
}
.admin .content .list-table th, .admin .content .list-table td {
    padding: 8px 5px; text-align: center;
}
.admin .content .list-table th {
    font-weight: 400; border-bottom: 1px solid #333;
}
.admin .content .list-table td {
    font-weight: 300; border-bottom: 1px solid #ddd;
}
.admin .content .section-bottom {
    position: relative; margin: 2.5rem 0 1rem; text-align: center;
}
.admin .content .section-bottom .button:not(:first-child) {
    margin-left: 10px;
}
.admin .content .pagination {
    display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; justify-content: center;
}
.admin .content .pagination li a {
    display: inline-block; width: 1.6rem; height: 1.6rem; margin: 0 0.3rem; padding: 0.3rem 0; font-size: 0.8rem; line-height: 1rem;
}
.admin .content .pagination li.on a {
    color: #fff; background-color: #4129fb;
}
.admin .content .table-wrap .section-bottom .button.right {
    position: absolute; right: 0; top: 0;
}
.button.admin {
    padding: 0.8rem 1.5rem; font-size: 0.8rem; line-height: 1rem; border-radius: 0;
}
.admin label {
    font-size: 0.85rem;
}



/*              Admin Container & Header & Footer             */
body.admin {
    /*background-color: #f7f6fa;*/
}
.admin .navbar {
    box-shadow: 0 0 10px 0 #ccc; z-index: 4;
}
.admin .navbar .inner {
    max-width: inherit; height: 3rem; justify-content: center;
}
.admin .navbar .inner > .row {
    position: absolute; left: 12px;
}
.admin .navbar .navbar-brand {
    position: static; margin-left: 0;
}
.admin .navbar .nav-right {
    top: 0; right: 2rem; text-align: right;
}
.admin .container {
    max-width: inherit; margin: 0; padding: 0;
}
.admin .container .sidebar {
    position: fixed; width: 12rem; height: 100%; padding-top: 58px; background-color: #fff; border-right: 1px solid #dcdcdc; z-index: 3; transition: all 0.3s;
}
.admin .container .content {
    min-height: 100vh; margin-left: 12rem; padding: 74px 2rem 38px; background-color: #eee; transition: all 0.3s;
}
.admin .sidebar .btn-sidebar-toggle {
    position: absolute; top: 113px; left: 60px; cursor: pointer; transition: all 0.3s;
}
.admin .sidebar .btn-sidebar-toggle.active {
    left: 12.5rem;
}
.admin .sidebar .nav-menu-list {
    padding: 1rem 0.3rem 2rem;
}
.admin .sidebar .nav-menu-list li {
    position: relative;
}
.admin .sidebar .nav-menu-list li.link:before {
    content: ''; position: absolute; bottom: 0; left: 0; width: 0%; height: 100%; background-color: #4129fb; transition: all .3s; z-index: -1;
    border-top-right-radius: 50%; border-bottom-right-radius: 50%;
}
.admin .sidebar .nav-menu-list li.link:hover:before {
    width: 100%; border-radius: 0.3rem;
}
.admin .sidebar .nav-menu-list li.link:hover a {
    color: #fff;
}
.admin .sidebar .nav-menu-list .menu-item a {
    display: block; margin-bottom: 0.3rem; padding: 0.3rem 0.5rem; text-align: left; font-size: 0.8rem; font-weight: 300; color: #555;
}
.admin .sidebar .nav-menu-list .menu-item a > span {
    display: inline; cursor: pointer;
}
.admin .sidebar .nav-menu-list li.on {
    background-color: #4129fb; border-radius: 0.3rem;
}
.admin .sidebar .nav-menu-list li.on:before {
    display: none;
}
.admin .sidebar .nav-menu-list li.on a {
    color: #fff; font-weight: 500;
}
.admin .sidebar .nav-menu-list .menu-item a .menu-icon {
    float: left; margin-top: 4px; margin-right: 10px; font-size: 0.8rem;
}
.admin .sidebar .nav-menu-list .menu-item a .arrow {
    float: right; display: block; margin-top: 5px;
}
.admin .sidebar .nav-menu-list .menu-item .sub-menu-list {
    display: none; padding-left: 30px; padding-bottom: 10px; transition: all 0.3s;
}
.admin .sidebar .nav-menu-list .menu-item .sub-menu-list.open {
    display: block;
}
.admin .sidebar .nav-menu-list .menu-item .sub-menu-list .sub-menu-item > a {
    padding: 0.2rem 0.5rem; margin-bottom: 0.2rem; font-size: 0.8rem; text-align: left;
}
.admin .sidebar .sidebar-footer {
    position: absolute; left: 0; bottom: 40px; width: 100%; text-align: center;
}
.admin .sidebar .sidebar-footer .button {
    padding: 5px 40px; font-size: 16px;
}

.admin .container .sidebar.min {
    width: 50px;
}
.admin > .container > .sidebar.min ~ .content {
    margin-left: 50px;
}
.admin .sidebar.min .header .inner .logo {
    display: none;
}
.admin .sidebar.min .header h3 {
    display: none;
}
.admin .sidebar.min .nav-menu-list {
    padding: 20px 0;
}
.admin .sidebar.min .nav-menu-list li.open {
    background-color: #fff;
}
.admin .sidebar.min .nav-menu-list li.open > a {
    color: #3C4A62; font-weight: 500;
}
.admin .sidebar.min .nav-menu-list li.on {
    border-radius: 0;
}
.admin .sidebar.min .nav-menu-list li.link:hover:before {
    border-radius: 0px;
}
.admin .sidebar.min .nav-menu-list .menu-item a {
    margin-bottom: 0; padding: 13px 0; text-align: center;
}
.admin .sidebar.min .nav-menu-list .menu-item a .menu-icon {
    float: none; margin: 0; font-size: 24px;
}
.admin .sidebar.min .nav-menu-list .menu-item a > span {
    display: none;
}
.admin .sidebar.min .nav-menu-list .menu-item a .arrow {
    display: none;
}
.admin .sidebar.min .nav-menu-list .menu-item .sub-menu-list {
    display: none;
}
.admin .sidebar.min .nav-menu-list .menu-item:hover .sub-menu-list {
    display: block; position: absolute; top: 0; left: 49px; width: 200px; padding: 10px; background-color: #fff;
}
.admin .sidebar.min .sidebar-footer .button {
    display: none;
}


.admin .input-section .row {
    margin-bottom: 10px;
}
.row .desc.small {
    margin-left: calc(20% + 20px); margin-top: 5px; font-size: 14px; line-height: 16px;
}
.row .desc.warning {
    color: red;
}
.row .input-loading-wrap {
    position: absolute; top: 0; right: 0; display: flex; align-items: center; justify-content: center; z-index: 1; width: 80%; height: 100%; background-color: rgba(247, 246, 250, 0.5);
}

.tree .empty-text {
    margin-top: 40px; padding: 40px; font-size: 20px; text-align: center; border: 3px dashed #ddd;
}
.tree .top {
    position: relative; display: inline-block; width: 20px; height: 20px; margin-left: 20px; font-size: 20px; color: #999; text-align: center; cursor: pointer;
}
.tree .top:after {
    content: " "; position: absolute; top: 21px; left: 10px; width: 30px; height: 28px; border-left: 1px solid #ccc;
}
.tree .top.empty:after {
    display: none;
}
.tree .sortable {
    min-height: 20px; padding-left: 60px;
}
.tree .sortable.empty {
    border-bottom: 1px dashed #ccc;
}
.tree .sortable .location {
    position: relative; display: table; padding-top: 5px;
}
.tree .sortable .location:before {
    content: " "; position: absolute; top: 23px; left: -30px; width: 30px; height: 100%; border-top: 1px solid #ccc; border-left: 1px solid #ccc;
}
.tree .sortable .location:last-child:before {
   border-left: none;
}
.tree .sortable .location:first-child:after {
    content: " "; position: absolute; top: 0px; left: -30px; width: 30px; height: 23px; border-left: 1px solid #ccc;
}
.tree > .sortable > .location:first-child:after {
    border-left: none;
}
.tree .sortable .location div {
    position: relative; display: inline-block;
}
.tree .sortable .location .item {
    display: inline-block; padding: 5px 10px; border: 1px solid #ccc;
}
.tree .sortable .location .btn-list-view-toggle {
    position: absolute; top: 6px; left: -36.5px; color: #4129fb; z-index: 1; cursor: pointer;
}
.tree .sortable .location .btn-add-child {
    margin-left: 10px; color: #4129fb; cursor: pointer;
}
.tree .sortable .location .location-input {
    width: 150px;
}
.tree .sortable .location .button {
    margin-left: 5px; font-size: 12px; line-height: 20px; padding: 3px 5px;
}
.admin .room-add .layer-popup .sortable .item {
    cursor: pointer;
}
.admin .room-add .layer-popup .sortable .item.on, .admin .room-add .layer-popup .sortable .item:hover {
    color: #fff; background-color: #0690ef;
}
.input-section .row .checkbox-wrap {
    padding: 8px 0;
}
.input-section .row .checkbox-wrap ~ .desc {
    margin-left: 35px; font-size: 14px; line-height: 20px; color: #666;
}



/*              Login             */

.content.login {
    width: 324px; min-height: initial; margin: 0 auto; padding: 0; background-color: transparent;
}
.content.login .logo {
    margin-bottom: 30px; font-size: 24px; line-height: 32px; font-weight: 300; letter-spacing: -1px; text-align: center;
}
.content.login .logo img {
    height: 36px;
}
.content.login input {
    width: 100%; margin-bottom: 10px; padding: 17px 30px;
}
.content.login .label-url {
    width: 100%; margin-bottom: 10px; padding: 0 30px 0 20px; font-size: 14px; border: 1px solid #dcdcdc; letter-spacing: -0.5px;
}
.content.login .label-url > input {
    width: 114px; margin: 10px 0; padding: 7px 10px; font-size: 16px; border: none;
}
.content.login .btn-login {
    width: 100%; margin-top: 10px; padding: 17px 30px; font-size: 18px; line-height: 27px;
}
.content.login .btn-login:after {
    background-color: #4129fb;
}
.content.login .checkbox-wrap {
    margin-top: 20px;
}
.content.login .checkbox-wrap .check-text {
    font-weight: bold;
}
.content.login .login-guide {
    margin-top: 30px; border-top: 1px solid #dcdcdc; padding-top: 10px;
}
.content.login .btn-send-temppass {
    width: 100%; padding: 17px 30px; font-size: 18px; font-weight: normal; line-height: 27px; text-align: center; color: #333; border: 1px solid #c1cdce;
}
.content.login .btn-send-temppass:after {
    background-color: #fff;
}
.content.login .subtext {
    margin-bottom: 20px; text-align: center;
}
.content.login .guide-text {
    margin-top: 12px; font-size: 12px; line-height: 18px; color: #999; letter-spacing: -0.5px;
}



/*              Tablet             */

.container.tablet {
    max-width: none; height: 100%; padding: 0; overflow: hidden;
}
.container.tablet .content-wrap {
    background-repeat: repeat-y; background-position: top center; background-size: 100%;
}
.container.tablet .content-wrap .content.tablet {
    height: 100vh; padding: 10vh 7.81vw; background-color: rgba(0, 0, 0, 0.7); overflow-y: auto;
}

.content.tablet .title-wrap {
    position: relative; margin-bottom: 2vh; color: #fff;
}
.content.tablet .title-wrap .title {
    width: calc(100% - 51.25vh); margin-left: 8.75vh; font-size: 10vh; font-weight: bold; line-height: 15vh; word-break: break-all; overflow: hidden; white-space: nowrap;
}
.content.tablet .title-wrap .title .animation {
    display: inline-block; min-width: calc(100% - 8.75vh);
    animation: infiniteHorizontalMove 10s linear infinite; -moz-animation: infiniteHorizontalMove 10s linear infinite; -webkit-animation: infiniteHorizontalMove 10s linear infinite; -o-animation: infiniteHorizontalMove 10s linear infinite;
}
.content.tablet .title-wrap .title-sub {
    position: absolute; top: 1.25vh; right: 0;
}
.content.tablet .title-wrap .title-sub .cur-date {
    width: 26vh; margin-right: 14vh; font-size: 4.375vh; font-weight: normal; line-height: 6.5vh
}
.content.tablet .title-wrap .title-sub .cur-time {
    margin-top: 0.5vh; font-size: 3.25vh; font-weight: bold; line-height: 4.75vh;
}
.content.tablet .title-wrap .title-sub .btn-toggle {
    position: absolute; top: 1vh; right: 0; width: 10vh; height: 9.25vh; padding: 2.5vh; border-radius: 0.625vh;
}
.content.tablet .title-wrap .title-sub .btn-toggle:before, .content.tablet .title-wrap .title-sub .btn-toggle:after,
.content.tablet .title-wrap .title-sub .btn-toggle > div {
    width: 5vh; height: 0.75vh; background-color: #fff; border-radius: 1.25vh; border-top-right-radius: 0; transition: all 0.3s;
}
.content.tablet .title-wrap .title-sub .btn-toggle:before {
    top: 2.5vh; left: 2.5vh;
}
.content.tablet .title-wrap .title-sub .btn-toggle:after {
    bottom: 2.5vh; left: 2.5vh;
}
.content.tablet .title-wrap .title-sub .btn-toggle .bar {
    top: 4.25vh; left: 2.5vh;
}
.content.tablet .title-wrap .title-sub .btn-toggle.on {
    background-color: #fff; border-bottom-left-radius: 0; border-bottom-right-radius: 0;
}
.content.tablet .title-wrap .title-sub .btn-toggle.on:before, .content.tablet .title-wrap .title-sub .btn-toggle.on:after,
.content.tablet .title-wrap .title-sub .btn-toggle.on > div {
    background-color: #4129fb;
}
.content.tablet .title-wrap .title-sub .btn-toggle .toggle-menu-wrap {
    position: absolute; top: 9.25vh; right: 0; width: 40vh; height: initial; margin-top: 0; text-indent: 0; transform: scale(1, 0); transform-origin: top left; transition: all 0.3s;
}
.content.tablet .title-wrap .title-sub .btn-toggle.on .toggle-menu-wrap {
    transform: scale(1, 1); background-color: #fff; z-index: 1;
}
.content.tablet .title-wrap .title-sub .btn-toggle .toggle-menu-wrap ul li {
    width: 100%; font-size: 3.75vh; font-weight: bold; line-height: 5.625vh; text-indent: 0; letter-spacing: -1.5px; color: #000; text-align: center;
}
.content.tablet .title-wrap .title-sub .btn-toggle .toggle-menu-wrap ul li.on {
    color: #fff; background-color: #4129fb;
}
.content.tablet .title-wrap .title-sub .btn-toggle .toggle-menu-wrap ul li a {
    display: block; padding: 2.81vh 2.5vh;
}
.content.tablet .title-wrap .title-sub .btn-toggle .toggle-menu-wrap ul li.on a {
    color: #fff;
}
.content.tablet .location-wrap {
    display: flex; margin-bottom: 2.5vh;
}
.content.tablet .location-wrap .select-wrap {
    margin-right: 0.625vh; padding: 1.8125vh 0; font-size: 2.5vh; line-height: 3.625vh; letter-spacing: -1px; color: #fff; background-color: transparent; border: 1px solid #fff;
}
.content.tablet .location-wrap .select-wrap:after {
    top: 1.875vh; right: 5vh;
}
.content.tablet .location-wrap .select-wrap .select-text {
    padding-left: 5vh; padding-right: 10vh;
}
.content.tablet .location-wrap .select-wrap .select-option {
    top: 7.375vh; color: #000; border-radius: 0.625vh;
}
.content.tablet .location-wrap .select-wrap .select-option > li {
    padding: 1.8125vh 5vh; font-size: 2.5vh; line-height: 3.625vh; letter-spacing: -1px;
}
.content.tablet .location-wrap .select-wrap .select-option > li.on {
    color: #fff; background-color: #4129fb; border-radius: 0.625vh
}
.content.tablet .room-list-wrap .room-list .room {
    display: inline-block; width: 320px; margin-right: 30px; margin-bottom: 20px; padding: 10px; background-color: #fff; border-radius: 5px;
    animation: tableColFadeIn 1s; -moz-animation: tableColFadeIn 1s; -webkit-animation: tableColFadeIn 1s; -o-animation: tableColFadeIn 1s;
}
.content.tablet .room-list-wrap .room-list .room a > div {
    height: 200px; margin-bottom: 10px; border-radius: 5px; background-repeat: no-repeat; background-position: center center; background-size: cover;
}
.content.tablet .room-list-wrap .room-list .room .room-location {
    display: block; margin-bottom: 10px; font-size: 14px; font-weight: lighter; line-height: 20px; letter-spacing: -0.7px; color: #434343; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.content.tablet .room-list-wrap .room-list .room .room-name {
    display: block; font-size: 28px; font-weight: bold; line-height: 41px; letter-spacing: -1.4px; text-align: center; color: #000; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.content.tablet .not-available-text {
    width: 100%; font-size: 60px; font-weight: bold; line-height: 89px; color: #fff; text-align: center;
}

.content.tablet .room-info-wrap {
    display: flex; height: 63vh; margin-top: 0.875vh; color: #fff;
}
.content.tablet .room-info-wrap .not-available-text {
    display: none;
}
.content.tablet .room-info-wrap.not-available {
    align-items: center;
}
.content.tablet .room-info-wrap.not-available .not-available-text {
    display: block;
}
.content.tablet .room-info-wrap.not-available .left, .content.tablet .room-info-wrap.not-available .right {
    display: none;
}
.content.tablet .room-info-wrap .left {
    position: relative; width: calc(100% - 40vh);
}
.content.tablet .room-info-wrap .left .schedule-title {
    font-size: 4.375vh; font-weight: bold; line-height: 6.5vh;
}
.content.tablet .room-info-wrap .left .schedule-sub-title {
    margin-top: 2.5vh; font-size: 4.375vh; font-weight: bold; line-height: 6.5vh;
}
.content.tablet .room-info-wrap .left .schedule-status {
    position: absolute; left: 0; bottom: 0; font-size: 6.25vh; font-weight: bold; line-height: 9.25vh;
}
.content.tablet .room-info-wrap .left .schedule-reserve {
    display: none; position: absolute; left: 0; bottom: 0;
}
.content.tablet .room-info-wrap .left .schedule-reserve .radio-title {
    margin-bottom: 2.5vh; font-size: 4.375vh; font-weight: bold; line-height: 6.5vh;
}
.content.tablet .room-info-wrap .left .schedule-reserve .radio-wrap {
    font-size: 5vh; font-weight: bold; line-height: 7.375vh;
}
.content.tablet .room-info-wrap .left .schedule-reserve .radio-wrap .radio {
    margin-right: 6.25vh; padding-left: 8.75vh;
}
.content.tablet .room-info-wrap .left .schedule-reserve .radio-wrap .radio:before {
    top: 0.625vh; left: 0px; width: 6.25vh; height: 6.25vh; border-radius: 3.125vh;
}
.content.tablet .room-info-wrap .left .schedule-reserve .radio-wrap .radio.on:after {
    content: ' '; position: absolute; top: 1.875vh; left: 1.25vh; width: 3.75vh; height: 3.75vh; background-color: #4129fb; border-radius: 1.875vh;
}
.content.tablet.meeting .room-info-wrap .left .schedule-title {
    margin-top: 0.875vh; font-size: 5.5vh; font-weight: bold; line-height: 8.125vh;
}
.content.tablet.over .room-info-wrap .left .schedule-sub-title,
.content.tablet.meeting .room-info-wrap .left .schedule-sub-title {
    display: none;
}
.content.tablet.meeting .room-info-wrap .left .schedule-status {
    font-size: 25vh; font-weight: bold; line-height: 37vh; color: #ff3400;
}
.content.tablet.empty .room-info-wrap .left .schedule-status {
    display: none;
}
.content.tablet.empty .room-info-wrap .left .schedule-reserve {
    display: block;
}
.content.tablet .room-info-wrap .right {
    width: 40vh;
}
.content.tablet .room-info-wrap .right .timeline {
    position: relative; display: flex; flex-wrap: wrap; height: 47.625vh; overflow-y: scroll; -ms-overflow-style: none;
}
.content.tablet .room-info-wrap .right .timeline::-webkit-scrollbar {
    display: none;
}
.content.tablet .room-info-wrap .right .timeline:after {
    content: ' '; display: block; width: 100%; height: 38.875vh;
}
.content.tablet .room-info-wrap .right .bar {
    position: absolute; left: 5vh; top: 8.75vh; width: calc(100% - 5vh); height: 0.375vh; margin-top: -1.5px; background-color: #fff;
}
.content.tablet .room-info-wrap .right .bar:before {
    content: " "; position: absolute; top: -0.9375vh; left: -1.25vh; width: 2.25vh; height: 2.25vh; background-color: #fff; border-radius: 1.125vh;
}
.content.tablet .room-info-wrap .right .timeline .time {
    width: 5vh; margin-top: 7.125vh;
}
.content.tablet .room-info-wrap .right .timeline .time > div {
    position: relative; padding-bottom: 7.875vh; font-size: 2.25vh; font-weight: bold; line-height: 3.375vh; border-right: 1px solid #fff;
}
.content.tablet .room-info-wrap .right .timeline .time > div:after {
    content: " "; position: absolute; top: 1.625vh; right: 0; width: 1.25vh; height: 1.625vh; border-top: 1px solid #fff;
}
.content.tablet .room-info-wrap .right .timeline .schedule-list {
    width: calc(100% - 8.5vh); margin: 8.8125vh 0 1.6875vh 2.5vh;
}
.content.tablet .room-info-wrap .right .timeline .schedule-list .schedule {
    margin-bottom: 1.25vh; padding: 1.5vh 2.5vh; font-size: 2.25vh; line-height: 3.375vh; border: 1px solid #fff; border-radius: 0.625vh;
}
.content.tablet .room-info-wrap .right .timeline .schedule-list .schedule.on {
    background-color: #4129fb; border: 1px solid #4129fb;
}
.content.tablet .room-info-wrap .right .timeline .schedule-list .schedule.small {
    display: flex; padding: 0.5vh 2.5vh; letter-spacing: -0.5px;
}
.content.tablet .room-info-wrap .right .timeline .schedule-list .schedule .schedule-time,
.content.tablet .room-info-wrap .right .timeline .schedule-list .schedule .schedule-title {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.content.tablet .room-info-wrap .right .timeline .schedule-list .schedule .schedule-time {
    font-weight: bold;
}
.content.tablet .room-info-wrap .right .timeline .schedule-list .schedule.small .schedule-time {
    margin-right: 1.25vh;
}
.content.tablet .room-info-wrap .right .timeline .schedule-list .schedule.tiny {
    padding: 0;
}
.content.tablet .room-info-wrap .right .timeline .schedule-list .schedule.tiny > div {
    display: none;
}
.content.tablet .room-info-wrap .right .button {
    display: none; width: 40vh; margin-top: 2.5vh; padding: 3.125vh 0; font-size: 5vh; font-weight: bold; line-height: 7.5vh;
}
.content.tablet.meeting .room-info-wrap .right .button.btn-end-meeting,
.content.tablet.waiting .room-info-wrap .right .button.btn-start-meeting,
.content.tablet.over .room-info-wrap .right .button.btn-start-meeting,
.content.tablet.empty .room-info-wrap .right .button.btn-reserve-meeting {
    display: block;
}
.content.tablet .room-info-wrap .right .button:after {
    background-color: #4129fb;
}
.content.tablet.meeting .title-wrap .title:before,
.content.tablet.waiting .title-wrap .title:before,
.content.tablet.over .title-wrap .title:before,
.content.tablet.empty .title-wrap .title:before {
    content: ' '; position: absolute; top: 4.375vh; left: 0; display: inline-block; width: 6.25vh; height: 6.25vh; background-color: #00d238; border-radius: 3.125vh;
}
.content.tablet.empty .room-info-wrap .right .button.btn-reserve-meeting:after,
.content.tablet.empty .room-info-wrap .left .schedule-reserve .radio-wrap .radio.on:after {
    background-color: #00d238;
}
.content.tablet.waiting .title-wrap .title:before,
.content.tablet.waiting .room-info-wrap .right .button.btn-start-meeting:after {
    background-color: #ebb400;
}
.content.tablet.meeting .title-wrap .title:before,
.content.tablet.over .title-wrap .title:before,
.content.tablet.meeting .room-info-wrap .right .button.btn-end-meeting:after,
.content.tablet.over .room-info-wrap .right .button.btn-start-meeting:after {
    background-color: #ff3400;
}
.content.tablet.meeting .room-info-wrap .right .timeline .schedule-list .schedule.on,
.content.tablet.over .room-info-wrap .right .timeline .schedule-list .schedule.on {
    background-color: #ff3400; border: 1px solid #ff3400;
}


/*      Office Gate 추가      */
.content.tablet.gate.over .room-info-wrap .left .schedule-status {
    display: none;
}
.content.tablet.gate.meeting .room-info-wrap .right .button.btn-entrance-meeting,
.content.tablet.gate.over .room-info-wrap .right .button.btn-entrance-meeting {
    display: block;
}
.content.tablet.gate .room-info-wrap .right .button.btn-entrance-meeting:after {
    background-color: #ff3400;
}

.password-wrap {
    display: none; position: absolute; top: 0; left: 0; width: 100vw; height: 100vh; z-index: 2;
}
.password-wrap > .background {
    position: absolute; top: 0; left: 0; width: 100vw; height: 100vh;
}
.password-wrap > .inner {
    position: absolute; top: 7.5vh; right: 6.25vw; width: 45vh; height: 85vh; padding: 5vh 3.25vh; background-color: #000; border-radius: 10px; z-index: 3;
}
.password-wrap .desc, .password-wrap .desc-fail {
    font-size: 3vh; font-weight: bold; line-height: 4.5vh; letter-spacing: -1.3px; text-align: center;
}
.password-wrap .desc-fail {
    display: none;
}
.password-wrap .input-password {
    width: 32.5vh; height: 7.5vh; margin-top: 4.5vh; font-size: 4.5vh; font-weight: bold; line-height: 7.5vh; text-align: center; border: 1px solid #fff; border-radius: 5px;
}
.password-wrap .input-password-wrap {
    display: flex; flex-wrap: wrap; justify-content: center;
}
.password-wrap .input-password-wrap .btn-input-number,
.password-wrap .input-password-wrap .btn-password-submit,
.password-wrap .input-password-wrap .btn-password-cancel {
    display: block; font-weight: bold; color: #fff; background-color: transparent; border: 1px solid #fff; border-radius: 5px;
}
.password-wrap .input-password-wrap .btn-input-number {
    width: 10vh; height: 10vh; margin-top: 1.25vh; margin-left: 1.25vh; font-size: 5vh;
}
.password-wrap .input-password-wrap .btn-input-number:nth-child(3n) {
    margin-left: 0;
}
.password-wrap .input-password-wrap .btn-input-number:nth-child(12) {
    margin: 1.25vh 10vh;
}
.password-wrap .input-password-wrap .btn-input-back {
    position: absolute; right: 8.125vh; bottom: 16.875vh; background-color: transparent; border: none;
}
.password-wrap .input-password-wrap .btn-input-back > img {
    width: 6.25vh; height: 3.25vh;
}
.password-wrap .input-password-wrap .btn-password-submit,
.password-wrap .input-password-wrap .btn-password-cancel {
    width: 15.625vh; height: 7.5vh; font-size: 3.5vh;
}
.password-wrap .input-password-wrap .btn-password-cancel {
    margin-left: 1.25vh;
}
.gate-open-text {
    display: none; position: absolute; top: 42.5vh; left: calc(50vw - 37.5vh); width: 75vh; max-width: 90vw; font-size: 6.25vh; padding: 3.5vh 0; font-weight: bold; line-height: 8vh; text-align: center; background-color: #000; border-radius: 10px; z-index: 3;
}

.gate-admin-open-wrap {
    display: none; position: absolute; top: 0; left: 0; width: 100vw; height: 100vh; z-index: 2;
}
.gate-admin-open-wrap > .background {
    position: absolute; top: 0; left: 0; width: 100vw; height: 100vh;
}
.gate-admin-open-wrap > .inner {
    position: absolute; top: 7.5vh; left: calc(50vw - 22.5vh); width: 45vh; max-width: 90vw; padding: 3.75vh 5vh; background-color: #fff; border-radius: 10px; z-index: 3;
}
.gate-admin-open-wrap .title {
    margin-bottom: 1.25vh; font-size: 4.375vh; font-weight: bold; line-height: 6.5vh; color: #333; letter-spacing: -0.1px; text-align: center;
}
.gate-admin-open-wrap .desc, .gate-admin-open-wrap .desc-fail {
    font-size: 2vh; line-height: 3vh; color: #999; letter-spacing: -0.1px; text-align: center;
}
.gate-admin-open-wrap .desc-fail {
    display: none;
}
.gate-admin-open-wrap .input-wrap {
    display: flex; flex-wrap: wrap; justify-content: center; margin-top: 1.25vh;
}
.gate-admin-open-wrap .input-wrap input {
    width: 32.5vh; height: 7.5vh; margin-top: 1.25vh; border-color: #999;
}
.gate-admin-open-wrap .input-wrap input::placeholder {
    color: #999;
}
.gate-admin-open-wrap .input-wrap button {
    width: 15.625vh; height: 7.5vh; margin-top: 2.5vh; font-size: 2.25vh; line-height: 3.375vh; color: #fff; border: none; border-radius: 5px;
}
.gate-admin-open-wrap .input-wrap .btn-admin-gate-submit {
    background-color: #0063b0;
}
.gate-admin-open-wrap .input-wrap .btn-admin-gate-cancel {
    margin-left: 1.25vh; background-color: #153d8f;
}



@keyframes tableColFadeIn {
    from { background-color: #eee; opacity: 0; }
    to { background-color: #fff; opacity: 1; }
}
@-moz-keyframes tableColFadeIn { /* Firefox */
    from { background-color: #eee; opacity: 0; }
    to { background-color: #fff; opacity: 1; }
}
@-webkit-keyframes tableColFadeIn { /* Safari and Chrome */
    from { background-color: #eee; opacity: 0; }
    to { background-color: #fff; opacity: 1; }
}
@-o-keyframes tableColFadeIn { /* Opera */
    from { background-color: #eee; opacity: 0; }
    to { background-color: #fff; opacity: 1; }
}



/*              Front Common             */
body.front {
    background-color: #eee;
}
.front .content {
    background-color: transparent;
}
.front .button {
    color: #666; border: 1px solid #dcdcdc; border-radius: 0;
}
.front .button:after {
    background-color: #fff;
}
.front .button.btn-submit {
    padding: 15.5px 0; font-size: 17px; line-height: 25px;color: #fff; border: none;
}
.front .button.btn-submit:after {
    background-color: #4129fb;
}
.front .toggle-arrow {
    content: ' '; position: absolute; width: 15.55px; height: 15.55px; border-right: 1px solid #666; border-bottom: 1px solid #666; -webkit-transform: rotate(45deg); transform: rotate(45deg);
}
input[type=checkbox]:checked ~ .toggle-arrow {
    border-top: 1px solid #666; border-left: 1px solid #666; border-bottom: none; border-right: none;
}
.front .nav-right .btn-toggle input[type=checkbox] {
    display: none;
}
.front .nav-right input[type=checkbox] {
    display: none;
}
.front .nav-right .btn-toggle .toggle-menu-wrap {
    position: absolute; top: 40px; right: -10px; min-width: 200px; height: initial; margin-top: 0; text-indent: 0; text-align: center; border: 1px solid #dfdce9; border-radius: 10px; transform: scale(1, 0); transform-origin: top left; transition: all 0.3s;
}
.front .nav-right .btn-toggle.on .toggle-menu-wrap {
    transform: scale(1, 1); background-color: #fff; z-index: 3;
}
.front .nav-right .btn-toggle .toggle-menu-wrap li {
    padding: 11.5px 30px; font-size: 16px; line-height: 24px; color: #666; border-bottom: 1px solid #dcdcdc;
}
.front .nav-right .btn-toggle .toggle-menu-wrap li.login-user-info {
    font-size: 12px; line-height: 18px; color: #999;
}
.front .nav-right .btn-toggle .toggle-menu-wrap li.login-user-info .avatar {
    display: inline-block; width: 70px; height: 70px; border: 1px solid #dcdcdc; border-radius: 35px;
}
.front .nav-right .btn-toggle .toggle-menu-wrap li.login-user-info .name {
    font-size: 14px; line-height: 20px; color: #333;
}

.front .content .location-wrap {
    display: flex; flex-wrap: wrap; align-items: center; margin-bottom: 20px; padding: 14px 30px; background-color: #fff; border: 1px solid #dcdcdc; border-radius: 10px;
}
.front .content .location-wrap .location-select-title {
    margin-left: 8px; margin-right: 30px; padding: 0; font-size: 22px; font-weight: bold; line-height: 33px; color: #333;
}
.front .content .location-wrap .select-wrap {
    margin-right: 10px; padding: 10.5px 0; border: 1px solid #dcdcdc; border-radius: 0;
}
.front .content .location-wrap .select-wrap:after {
    content: ' '; top: 13px; right: 23px; width: 15.55px; height: 15.55px; border-right: 1px solid #666; border-bottom: 1px solid #666; -webkit-transform: rotate(45deg); transform: rotate(45deg);
}
.front .content .location-wrap .select-wrap .select-text, .front .content .location-wrap .select-wrap .select-option li {
    padding-left: 30px; font-size: 18px; line-height: 27px; color: #666; white-space: nowrap;
}
.front .content .location-wrap .select-wrap .select-text {
    padding-right: 63px;
}
.front .content .location-wrap .select-wrap .select-option {
    top: 48px;
}
.front .content .location-wrap .select-wrap .select-option li {
    padding: 11.5px 30px;
}
.front .content .location-wrap .select-wrap .select-option li.on {
    font-weight: inherit; color: #fff; background-color: #4129fb;
}

.front .content .room-banner-wrap {
    position: relative; margin-bottom: 20px; padding: 25px 65px; background-color: #fff; border: 1px solid #dcdcdc; border-radius: 10px; transition: all 0.3s;
}
.front .content .room-banner-wrap .empty-room-title {
    padding: 0 0 0 20px; font-size: 22px; font-weight: bold; line-height: 33px; color: #333;
}
.front .content .location-wrap .toggle-arrow {
    display: none;
}
.front .content .room-banner-wrap .toggle-arrow {
    top: 29px; left: 39px; padding: 0;
}
.front .content .location-wrap input[type=checkbox], .front .content .room-banner-wrap input[type=checkbox] {
    display: none;
}
.front .content .room-banner-wrap input[type=checkbox]:checked ~ .toggle-arrow {
    top: 40px;
}
 .front .content .room-banner-wrap .room-banner {
     display: none; margin-top: 25px; transform-origin: top left; transition: all 0.3s;
 }
.front .content .room-banner-wrap input[type=checkbox]:checked ~ .room-banner {
    display: flex; flex-wrap: wrap; justify-content: center;
}
.front .content .room-banner-wrap .room-banner .banner {
    width: 225px; margin: 0 16px; cursor: pointer; background-position: center; background-size: cover;
}
.front .content .room-banner-wrap .room-banner .banner:hover {
    box-shadow: 0 3px 12px 0 rgba(0, 0, 0, 0.16);
}
.front .content .room-banner-wrap .room-banner .banner .inner {
    padding: 10px; background-color: rgba(0, 0, 0, 0.5); color: #fff;
}
.front .content .room-banner-wrap .room-banner .banner .room-location {
    font-size: 12px; line-height: 18px; letter-spacing: -0.7px; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.front .content .room-banner-wrap .room-banner .banner .room-name.online:before,
.front .content .schedule-wrap .schedule-calendar .room-wrap .title-wrap .name.online:before,
.front .content .schedule-wrap .schedule-calendar .officecall-desc:before {
    content: ' '; display: inline-block; width: 23px; height: 23px; margin-right: 5px; background-position: center; background-size: cover; vertical-align: middle;
}
.front .content .room-banner-wrap .room-banner .banner .room-name.online:before {
    background-image: url("/images/officecall_icon_w.gif");
}
.front .content .room-banner-wrap .room-banner .banner .room-name {
    margin-bottom: 2px; font-size: 16px; font-weight: bold; line-height: 24px; letter-spacing: -0.9px; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.front .content .room-banner-wrap .room-banner .banner .time {
    margin-top: 2px; font-size: 15px; line-height: 22px; letter-spacing: -0.9px; text-align: center;
}
.front .content .room-banner-wrap .room-banner .banner .btn-reserve {
    margin-top: 8px; padding: 15px; width: 100%; font-size: 15px; line-height: 22px; color: #fff; border: none;
}
.front .content .room-banner-wrap .room-banner .banner .btn-reserve:after {
    background-color: #4129fb;
}
.front .content .room-banner-wrap .room-banner .slick-arrow {
    position: absolute; top: calc(50% - 20px); width: 28.28px; height: 28.28px; text-indent: -9999px; background-color: transparent; border: 1px solid #666; transform: rotate(45deg);
}
.front .content .room-banner-wrap .room-banner .slick-arrow.slick-prev {
    left: -27px; border-top: none; border-right: none;
}
.front .content .room-banner-wrap .room-banner .slick-arrow.slick-next {
    right: -28px; border-left: none; border-bottom: none;
}

.front .content .schedule-wrap {
    position: relative; padding: 25px 39px; background-color: #fff; border: 1px solid #dcdcdc; border-radius: 10px;
}
.front .content .schedule-wrap .schedule-title {
    display: flex;
}
.front .content .schedule-wrap .schedule-title .left, .front .content .schedule-wrap .schedule-title .right {
    display: flex; flex-wrap: wrap; align-items: center;
}
.front .content .schedule-wrap .schedule-title .left .date {
    margin-right: 25px; font-size: 26px; font-weight: bold; line-height: 50px; color: #333;
}
.front .content .schedule-wrap .schedule-title .left button {
    padding: 10.5px 0; font-size: 18px; line-height: 27px; color: #666; border: 1px solid #dcdcdc; border-radius: 0;
}
.front .content .schedule-wrap .schedule-title .left button:after {
    background-color: #fff;
}
.front .content .schedule-wrap .schedule-title .left .btn-prev-week, .front .content .schedule-wrap .schedule-title .left .btn-next-week {
    position: relative; width: 50px; height: 50px; margin-right: 10px;
}
.front .content .schedule-wrap .schedule-title .left .btn-prev-week:after, .front .content .schedule-wrap .schedule-title .left .btn-next-week:after {
    content: ' '; position: absolute; top: 17px; width: 15.5px; height: 15.5px; border: 1px solid #666; background-color: transparent; border-radius: 0; -webkit-transform: rotate(45deg); transform: rotate(45deg);
}
.front .content .schedule-wrap .schedule-title .left .btn-prev-week:after {
    left: 19px; border-top: none; border-right: none;
}
.front .content .schedule-wrap .schedule-title .left .btn-next-week:after {
    left: 12px; border-bottom: none; border-left: none;
}
.front .content .schedule-wrap .schedule-title .left .btn-switch-cal {
    width: 100px;
}
.front .content .schedule-wrap .schedule-title .right {
    justify-content: flex-end;
}
.front .content .schedule-wrap .schedule-title .right .radio {
    margin-left: 30px; padding-left: 45px; line-height: 30px;
}
.front .content .schedule-wrap .schedule-title .right .radio:before {
    width: 30px; height: 30px; border-radius: 15px;
}
.front .content .schedule-wrap .schedule-title .right .radio:after {
    top: 7px; left: 7px; width: 16px; height: 16px; border-radius: 8px;
}
.front .content .schedule-wrap .schedule-calendar {
    position: relative; margin-top: 30px;
}
.front .content .schedule-wrap .schedule-calendar .time-wrap {
    display: flex; justify-content: flex-end;
}
.front .content .schedule-wrap .schedule-calendar .time-wrap > div {
    width: calc((100% - 235px) / 12); text-align: center;
}
.front .content .schedule-wrap .schedule-calendar .officecall-desc {
    position: absolute; top: 0; left: 0; color: #666;
}
.front .content .schedule-wrap .schedule-calendar .officecall-desc:before {
    margin-right: 10px; background-image: url("/images/officecall_icon_b.png");
}
.front .content .schedule-wrap .schedule-calendar .room-wrap {
    display: flex; margin-top: 6px;
}
.front .content .schedule-wrap .schedule-calendar .room-wrap .title-wrap {
    width: 235px;
}
.front .content .schedule-wrap .schedule-calendar .room-wrap .title-wrap .room-row {
    width: 235px; height: 80px; padding-top: 16px; border: 1px solid #dcdcdc; border-top: none;
}
.front .content .schedule-wrap .schedule-calendar .room-wrap .title-wrap .room-row.on {
    border-left: 12px solid #4129fb;
}
.front .content .schedule-wrap .schedule-calendar .room-wrap .title-wrap .room-row:first-child {
    border-top: 1px solid #dcdcdc;
}
.front .content .schedule-wrap .schedule-calendar .room-wrap .title-wrap .location {
    width: 100%; padding-left: 30px; font-size: 14px; line-height: 20px; letter-spacing: -0.7px; color: #000; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.front .content .schedule-wrap .schedule-calendar .room-wrap .title-wrap .name {
    width: 100%; padding-left: 30px; font-size: 18px; font-weight: bold; line-height: 27px; letter-spacing: -0.9px; color: #333; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.front .content .schedule-wrap .schedule-calendar .room-wrap .title-wrap .name.online:before {
    background-image: url("/images/officecall_icon.gif");
}
.front .content .schedule-wrap .schedule-calendar .room-wrap .time-schedule-wrap {
    width: calc(100% - 235px);
}
.front .content .schedule-wrap .schedule-calendar .time-schedule-wrap .schedule-row {
    position: relative; display: flex; justify-content: flex-end; width: 100%;
}
.front .content .schedule-wrap .schedule-calendar .time-schedule-wrap .td {
    width: calc(100% / 12); height: 80px; border: 1px solid #dcdcdc; border-top: none; border-left: none;
}
.front .content .schedule-wrap .schedule-calendar .time-schedule-wrap .schedule-row:first-child .td {
    border-top: 1px solid #dcdcdc;
}
.front .content .schedule-wrap .schedule-calendar .time-schedule-wrap .schedule {
    position: absolute; top: 5px; width: 230px; height: 70px; margin-left: 5px; font-size: 14px; font-weight: normal; line-height: 20px; letter-spacing: -0.7px; color: #fff; background-color: #4129fb; border-radius: 10px;
}
.front .content .schedule-wrap .schedule-calendar .time-schedule-wrap .schedule.reg,
.front .content .schedule-wrap .schedule-calendar .time-schedule-wrap .schedule.join,
.front .content .schedule-wrap .schedule-calendar .time-schedule-wrap .schedule.reg > div,
.front .content .schedule-wrap .schedule-calendar .time-schedule-wrap .schedule.join > div {
    cursor: pointer;
}
.front .content .schedule-wrap .schedule-calendar .time-schedule-wrap .schedule.officecall:after {
    content: ' '; position: absolute; top: 13px; right: 15px; width: 21px; height: 21px; background-image: url(/images/officecall_icon_w.gif); background-position: center; background-size: cover;
}
.front .content .schedule-wrap .schedule-calendar .time-schedule-wrap .schedule .name {
    margin-top: 13px; margin-left: 15px; margin-bottom: 5px;
}
.front .content .schedule-wrap .schedule-calendar .time-schedule-wrap .schedule .time {
    margin-left: 15px; margin-bottom: 13px;
}
.front .content .schedule-wrap .schedule-calendar .time-schedule-wrap .schedule.small.officecall:after,
.front .content .schedule-wrap .schedule-calendar .time-schedule-wrap .schedule.small .name,
.front .content .schedule-wrap .schedule-calendar .time-schedule-wrap .schedule.small .time {
    display: none;
}
.front .content .schedule-wrap .schedule-calendar .cur-time-line {
    position: absolute; top: 30px; width: 1px; height: calc(100% - 30px); background-color: #4129fb; z-index: 2;
}
.front .content .schedule-wrap .empty-room {
    display: none; padding: 50px; font-size: 30px; text-align: center;
}

.front .content .schedule-wrap.week .schedule-calendar .date-wrap {
    display: flex; justify-content: flex-end;
}
.front .content .schedule-wrap.week .schedule-calendar .date-wrap > div {
    width: calc((100% - 280px) / 5); text-align: center;
}
.front .content .schedule-wrap.week .schedule-calendar .date-wrap > div .date {
    display: inline-block; width: 30px; margin-right: 3px; line-height: 30px;
}
.front .content .schedule-wrap.week .schedule-calendar .date-wrap .today .date {
    color: #fff; background-color: #4129fb; border-radius: 50%;;
}
.front .content .schedule-wrap.week .schedule-calendar .room-wrap .title-wrap .room-row {
    cursor: pointer;
}
.front .content .schedule-wrap.week .schedule-calendar .room-wrap .title-wrap .room-row .location,
.front .content .schedule-wrap.week .schedule-calendar .room-wrap .title-wrap .room-row .name {
    color: #aaa;
}
.front .content .schedule-wrap.week .schedule-calendar .room-wrap .title-wrap .room-row.on .location,
.front .content .schedule-wrap.week .schedule-calendar .room-wrap .title-wrap .room-row.on .name {
    color: #333;
}
.front .content .schedule-wrap.week .schedule-calendar .room-wrap .title-wrap .room-image-wrap {
    width: 100%; height: 160px; background-position: center; background-size: cover;
}
.front .content .schedule-wrap.week .schedule-calendar .time-schedule-wrap {
    position: relative; display: flex;
}
.front .content .schedule-wrap.week .schedule-calendar .time-schedule-wrap .cur-time-line {
    right: auto; left: 0; width: calc(100% - 45px); height: 1px; margin-left: 45px; font-size: 12px; font-weight: bold; line-height: 18px; color: #4129fb;;
}
.front .content .schedule-wrap.week .schedule-calendar .time-schedule-wrap .cur-time-line > div {
    margin-top: -9px; margin-left: -40px;
}
.front .content .schedule-wrap.week .schedule-calendar .time-schedule-wrap .time-wrap {
    flex-flow: column; justify-content: flex-start; width: 45px; margin-top: -40px; padding-right: 10px;
}
.front .content .schedule-wrap.week .schedule-calendar .time-schedule-wrap .time-wrap > div {
    width: 100%; padding: 28px 0; text-align: right;
}
.front .content .schedule-wrap.week .schedule-calendar .time-schedule-wrap .schedule-row-wrap {
    display: flex; flex-wrap: wrap; width: calc(100% - 45px);
}
.front .content .schedule-wrap.week .schedule-calendar .time-schedule-wrap .schedule-row {
    flex-flow: column; justify-content: flex-start; width: calc(100% / 5);
}
.front .content .schedule-wrap.week .schedule-calendar .time-schedule-wrap .schedule-row .td {
    width: 100%;
}
.front .content .schedule-wrap.week .schedule-calendar .time-schedule-wrap .schedule-row:first-child .td {
    border-top: none; border-left: 1px solid #dcdcdc;
}
.front .content .schedule-wrap.week .schedule-calendar .time-schedule-wrap .schedule-row .td:first-child {
    border-top: 1px solid #dcdcdc;
}
.front .content .schedule-wrap.week .schedule-calendar .time-schedule-wrap .schedule {
    width: calc(100% - 6px); margin-left: 3px; margin-top: 3px;
}


#reserveScheduleLayerPopup {
    background-color: rgba(0, 0, 0, 0.6);
}
#reserveScheduleLayerPopup .inner {
    width: 100%; max-width: 600px; margin: 0 0 0 auto; padding: 32px 35px 47px; background-color: #fff; border-radius: 10px 0 0 10px; box-shadow: none; transform-origin: top right; transition: all 0.3s; transform: scale(0, 1);
}
.front .layer-popup .btn-popup-close {
    top: 32px; right: 35px;
}
.front .layer-popup .btn-popup-close:before, .front .layer-popup .btn-popup-close:after {
    content: ' '; position: absolute; width: 42.4px; height: 42.4px; border-top: 1px solid #707070;
}
.front .layer-popup .btn-popup-close:before {
    top: 10px; right: -19px; transform: rotate(-45deg);
}
.front .layer-popup .btn-popup-close:after {
    top: 10px; right: 10px; transform: rotate(45deg);
}
.front .layer-popup .popup-header {
    margin-bottom: 30px;
}
.front .layer-popup .popup-header .title {
    max-width: calc(100% - 60px); font-size: 22px; font-weight: bold; line-height: 33px; color: #333; word-break: break-all;
}
#reserveScheduleLayerPopup .popup-content {
   max-height: inherit; padding-bottom: 0;
}
#reserveScheduleLayerPopup .popup-content label.tab-item {
    width: 160px;
}
#reserveScheduleLayerPopup .popup-content label {
    width: 22.6%; padding: 11.5px 0; font-size: 18px; line-height: 27px; color: #666;
}
#reserveScheduleLayerPopup .popup-content input[type=text] {
    width: 77.4%; margin-bottom: 8px; padding: 10.5px 22px; font-size: 18px; line-height: 27px; color: #666; border: 1px solid #dcdcdc; border-radius: 0;
}
#reserveScheduleLayerPopup .popup-content .reserve-date-wrap {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; width: 77.4%;
}
#reserveScheduleLayerPopup .popup-content .reserve-date-wrap div {
    font-size: 18px; font-weight: bold;
}
#reserveScheduleLayerPopup .popup-content .reserve-date-wrap input[type=text] {
    width: calc(50% - 20px);
}
#reserveScheduleLayerPopup .popup-content .reserve-date-wrap #reserveDate {
    width: 100%;
}
#reserveScheduleLayerPopup .popup-content .btn-select-user,
#reserveScheduleLayerPopup .popup-content .btn-add-guest {
    margin-top: 15px; padding: 10.5px 22px; font-size: 18px; line-height: 27px;
}
#reserveScheduleLayerPopup .popup-content textarea,
#reserveScheduleLayerPopup .popup-content .guest-list-wrap,
#reserveScheduleLayerPopup .popup-content .user-list-wrap {
    width: 77.4%; height: 150px; margin-bottom: 8px; padding: 11px 22px; border: 1px solid #dcdcdc; overflow: auto;
}
#reserveScheduleLayerPopup .popup-content .user-list-wrap .user,
#reserveScheduleLayerPopup .popup-content .guest-list-wrap .user {
    width: 240px; margin-bottom: 4px; padding: 4px 20px; font-size: 18px; line-height: 32px; color: #fff; background-color: #4129fb; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer;
}
#reserveScheduleLayerPopup .popup-content .recurring-reserve-wrap {
    position: relative; margin-bottom: 24px; padding: 20px 15px 20px; border: 1px solid #dcdcdc; border-radius: 10px;
}
#reserveScheduleLayerPopup .popup-content .recurring-reserve-wrap .title {
    padding: 0 0 0 40px;
}
#reserveScheduleLayerPopup .popup-content .recurring-reserve-wrap .toggle-arrow {
    top: 21px; left: 18px; width: 15.55px; padding: 0;
}
#reserveScheduleLayerPopup .popup-content .recurring-reserve-wrap input[type=checkbox] {
    display: none;
}
#reserveScheduleLayerPopup .popup-content .recurring-reserve-wrap input[type=checkbox]:checked ~ .toggle-arrow {
    top: 32px;
}
#reserveScheduleLayerPopup .popup-content .recurring-reserve-wrap .recurring-reserve-input {
    display: none; margin-top: 15px;
}
#reserveScheduleLayerPopup .popup-content .recurring-reserve-wrap input[type=checkbox]:checked ~ .recurring-reserve-input {
    display: block;
}
#reserveScheduleLayerPopup .popup-content .recurring-reserve-input label {
    width: 22.8%; padding: 13px 0; font-size: 16px; line-height: 24px;
}
#reserveScheduleLayerPopup .popup-content .recurring-reserve-input .weekday {
    width: 10%; margin-right: 1.2%; margin-bottom: 8px; padding: 11.5px 0; font-size: 18px; line-height: 27px; text-align: center; color: #666; border: 1px solid #dcdcdc;
}
#reserveScheduleLayerPopup .popup-content .recurring-reserve-input .weekday:last-child {
    margin-right: 0;
}
#reserveScheduleLayerPopup .popup-content .recurring-reserve-input .weekday.on {
    color: #fff; background-color: #4129fb;
}
#reserveScheduleLayerPopup .popup-content .recurring-reserve-input input[type=text] {
    width: 77.2%;
}
#reserveScheduleLayerPopup .popup-content .checkbox-wrap {
    width: 100%; padding: 0; margin-bottom: 10px;
}
#reserveScheduleLayerPopup .popup-content .multi-checkbox-row .checkbox-wrap {
    width: auto; margin-right: 65px;
}
#reserveScheduleLayerPopup .popup-content .checkbox-wrap .check-shape {
    border-color: #ccc;
}
#reserveScheduleLayerPopup .popup-content .checkbox-wrap .check-shape:before {
    display: block; border-right: 3.5px solid #eee; border-bottom: 3.5px solid #eee;
}
#reserveScheduleLayerPopup .popup-content .checkbox-wrap input[type=checkbox]:checked ~ .check-shape:before {
    border-color: #fff;
}
#reserveScheduleLayerPopup .popup-content .schedule-color-wrap {
    margin-top: 26px; /*padding-top: 16px; border-top: 1px solid #dcdcdc;*/
}
#reserveScheduleLayerPopup .popup-content .schedule-color-wrap label {
    width: auto; margin-right: 14px; padding: 0;
}
#reserveScheduleLayerPopup .popup-content .schedule-color-wrap label:last-child {
    margin-right: 0;
}
#reserveScheduleLayerPopup .popup-content .schedule-color-wrap label .radio {
    width: 60px; height: 60px; margin-left: 0; border-radius: 30px;
}
#reserveScheduleLayerPopup .popup-content .schedule-color-wrap label .radio:before {
    top: -6px; left: auto; right: -6px; background-color: #4129fb; border: 2px solid #fff;
}
#reserveScheduleLayerPopup .popup-content .schedule-color-wrap input[type=radio]:checked ~ .radio:after {
    content: ' '; position: absolute; top: -1px; left: auto; right: 2px; display: block; width: 9px; height: 13px; background-color: transparent; border-right: 3.5px solid #fff; border-bottom: 3.5px solid #fff; transform: rotate(45deg);
}
.front .content .schedule-wrap .schedule-calendar .time-schedule-wrap .schedule.color1,
#reserveScheduleLayerPopup .popup-content .schedule-color-wrap .color1 .radio {
    background-color: #4129fb;
}
.front .content .schedule-wrap .schedule-calendar .time-schedule-wrap .schedule.color2,
#reserveScheduleLayerPopup .popup-content .schedule-color-wrap .color2 .radio {
    background-color: #0086c1;
}
.front .content .schedule-wrap .schedule-calendar .time-schedule-wrap .schedule.color3,
#reserveScheduleLayerPopup .popup-content .schedule-color-wrap .color3 .radio {
    background-color: #008871;
}
#reserveScheduleLayerPopup .popup-footer .button {
    width: 100%; margin-top: 10px; padding: 15.5px 0; font-size: 17px; line-height: 25px; color: #fff; border: none;
}
#reserveScheduleLayerPopup .popup-footer .button[type=submit]:after {
    background-color: #4129fb;
}
#reserveScheduleLayerPopup .popup-footer .btn-del-reserve {
    color: #333; border: 1px solid #dcdcdc;
}

#selectUserLayerPopup, #guestUserLayerPopup {
    align-items: center; background-color: rgba(0, 0, 0, 0.3);
}
#selectUserLayerPopup .inner, #guestUserLayerPopup .inner {
    box-shadow: none;
}
#selectUserLayerPopup .inner .popup-content {
    display: flex; flex-wrap: wrap; justify-content: space-between;
}
#selectUserLayerPopup .inner .popup-content .user-list,
#selectUserLayerPopup .inner .popup-content .select-user-list {
    width: calc(50% - 5px); background-color: #fff; border: 1px solid #dcdcdc; overflow: auto;
}
#selectUserLayerPopup .inner .popup-content .select-user-list {
    margin-left: 10px; padding: 20px;
}
#selectUserLayerPopup .inner .popup-content .select-user-list .user {
    display: inline-block; margin-left: 5px; margin-bottom: 10px; padding: 5px 10px; color: #fff; background-color: #4129fb;
}
#selectUserLayerPopup .inner .popup-content .select-user-list .user .del-selected-user {
    position: relative; display: inline-block; width: 16px; height: 16px; margin-left: 5px; cursor: pointer;
}
#selectUserLayerPopup .inner .popup-content .select-user-list .user .del-selected-user:before,
#selectUserLayerPopup .inner .popup-content .select-user-list .user .del-selected-user:after {
    content: ''; position: absolute; left: 7px; width: 16px; height: 16px; border-left: 2px solid #fff;
}
#selectUserLayerPopup .inner .popup-content .select-user-list .user .del-selected-user:before {
    top: -3px; transform: rotate(-45deg);
}
#selectUserLayerPopup .inner .popup-content .select-user-list .user .del-selected-user:after {
     top: 7px; transform: rotate(45deg);
}

#guestUserLayerPopup .btn-add-guest-input {
    margin-left: 20px; color: #1d81e1; font-weight: 300;
}
#guestUserLayerPopup .user-list .guest-input-row {
    display: flex; flex-wrap: wrap; width: 100%; margin-bottom: 10px;
}
#guestUserLayerPopup .user-list .guest-input-row input {
    width: calc((100% - 60px) / 3); margin-left: 5px;
}
#guestUserLayerPopup .user-list .guest-input-row input:first-child {
    margin-left: 0px;
}
#guestUserLayerPopup .user-list .guest-input-row .del-guest-input {
    margin-left: auto; font-size: 14px; line-height: 40px; cursor: pointer;
}

#officecallScheduleLayerPopup {
    background-color: rgba(0, 0, 0, 0.6);
}
#officecallScheduleLayerPopup .inner {
    margin-top: calc(50vh - 135px); padding: 32px 35px 45px; background-color: #fff; border-radius: 10px; box-shadow: none;
}
#officecallScheduleLayerPopup .popup-header .title {
    max-width: inherit; text-align: center;
}
#officecallScheduleLayerPopup .popup-content {
    display: flex; flex-wrap: wrap; align-items: center; padding-bottom: 0;
}
#officecallScheduleLayerPopup .popup-content .officecall-title {
    margin-bottom: 10px; font-size: 18px; line-height: 27px;
}
#officecallScheduleLayerPopup .popup-content .officecall-title:before {
    content: ""; display: inline-block; width: 24px; height: 24px; margin-right: 15px; background-image: url("/images/officecall_icon.gif"); background-position: center; background-size: cover; vertical-align: middle;
}
#officecallScheduleLayerPopup .popup-content .officecall-link {
    display: inline-block; width: calc(100% - 45px); color: #268bff; text-overflow: ellipsis; overflow: hidden; white-space: nowrap;
}
#officecallScheduleLayerPopup .popup-content .btn-copy {
    margin-left: 15px; padding: 0; border: none; background: none;
}

#selectUserLayerPopup .inner .popup-content .user-count {
    width: 100%; margin-left: 20px; margin-bottom: 10px;
}
#selectUserLayerPopup .inner .popup-content .user-count > i {
    margin-right: 10px; color: #4129fb;
}
#selectUserLayerPopup .inner .popup-content .user-count > span {
    font-size: 14px;
}
#selectUserLayerPopup .inner .popup-content .user-count .count {
    font-weight: bold; color: #4129fb;
}
#selectUserLayerPopup .inner .popup-content .search-input {
    position: relative; border-bottom: 1px solid #dfdce9;
}
#selectUserLayerPopup .inner .popup-content .search-input > input {
    padding-left: 50px; padding-right: 50px; border: none;
}
#selectUserLayerPopup .inner .popup-content .search-input #searchTextDelIcon,
#selectUserLayerPopup .inner .popup-content .search-input #searchIcon {
    position: absolute; top: 0px; padding: 12px; color: #dfdce9; cursor: pointer;
}
#selectUserLayerPopup .inner .popup-content .search-input #searchIcon {
    left: 0;
}
#selectUserLayerPopup .inner .popup-content .search-input #searchTextDelIcon {
    right: 0;
}
.organization-list {
    padding: 20px;
}
.organization-list .organization-item {
    position: relative; display: flex; align-items: center; flex-wrap: wrap; padding-top: 5px; padding-left: 20px;
}
.organization-list .organization-item > ul {
    display: none;
}
.organization-list .organization-item.active > ul {
    display: block;
}
.organization-list .organization-item .group-arrow {
    position: absolute; top: 9px; left: 0; color: #ccc; cursor: pointer;
}
.organization-list .organization-item .checkbox-wrap {
    width: 100%; flex-wrap: nowrap; white-space: nowrap;
}
.organization-list .organization-item .checkbox-wrap > .check-shape {
    width: 16px; height: 16px; margin-top: 4px;
}
.organization-list .organization-item .checkbox-wrap > .check-shape:before {
    top: 2.3px; left: 5px; width: 7px; height: 8.5px;
}
.organization-list .organization-item .checkbox-wrap > .check-text {
    font-size: 14px;
}
.organization-list .organization-item .checkbox-wrap > .check-text > i {
    margin-right: 5px;
}

.checkbox-wrap .identify-wrap {
    display: none; margin-left: 20px;
}
.checkbox-wrap .identify-wrap span {
    display: none; color: #4129fb;
}
.checkbox-wrap .identify-wrap span i {
    margin-right: 5px;
}
.checkbox-wrap > input[type=checkbox]:checked ~ .identify-wrap {
    display: inline-block;
}


@media (max-width: 1080px) {
    .front .content .location-wrap {
        position: relative; display: block; margin-bottom: 10px; padding: 15px; border-radius: 5px;
    }
    .front .content .location-wrap .toggle-arrow, .front .content .room-banner-wrap .toggle-arrow {
        top: 15px; left: 25px; display: block; padding: 0;
    }
    .front .content .location-wrap input[type=checkbox]:checked ~ .toggle-arrow,
    .front .content .room-banner-wrap input[type=checkbox]:checked ~ .toggle-arrow {
        top: 26px;
    }
    .front .content .location-wrap .location-select-title {
        margin-left: 0; padding-left: 45px; font-size: 18px; line-height: 27px;
    }
    .front .content .location-wrap .select-wrap {
        display: none; margin-right: 0; margin-bottom: 5px;
    }
    .front .content .location-wrap .select-wrap:nth-child(4) {
        margin-top: 15px;
    }
    .front .content .location-wrap input[type=checkbox]:checked ~ .select-wrap {
        display: block;
    }

    .front .content .room-banner-wrap {
        margin-bottom: 10px; padding: 15px 32px; border-radius: 5px;
    }
    .front .content .room-banner-wrap .empty-room-title {
        padding-left: 28px; font-size: 18px; line-height: 27px;
    }
    .front .content .room-banner-wrap .room-banner {
        margin-top: 15px; margin-bottom: 10px;
    }
    .front .content .room-banner-wrap .room-banner .banner {
        width: 140px; margin: 0 3px;
    }
    .front .content .room-banner-wrap .room-banner .banner .btn-reserve {
        margin-top: 5px; padding: 11px 0; font-size: 12px; line-height: 18px;
    }
    .front .content .room-banner-wrap .room-banner .slick-arrow {
        top: calc(50% - 12px); width: 16px; height: 16px;
    }
    .front .content .room-banner-wrap .room-banner .slick-arrow.slick-prev {
        left: -14px;
    }
    .front .content .room-banner-wrap .room-banner .slick-arrow.slick-next {
        right: -14px;
    }
    .front .content .schedule-wrap {
        padding: 15px; border-radius: 5px;
    }
    .front .content .schedule-wrap .schedule-title .left .date {
        margin-left: 5px; font-size: 18px; line-height: 40px;
    }
    .front .content .schedule-wrap .schedule-title .left .btn-prev-week,
    .front .content .schedule-wrap .schedule-title .left .btn-next-week {
        width: 40px; height: 40px; margin-right: 8px;
    }
    .front .content .schedule-wrap .schedule-title .left .btn-prev-week:after,
    .front .content .schedule-wrap .schedule-title .left .btn-next-week:after {
        top: 14px; width: 10.2px; height: 10.2px;
    }
    .front .content .schedule-wrap .schedule-title .left .btn-prev-week:after {
        left: 15px;
    }
    .front .content .schedule-wrap .schedule-title .left button {
        padding: 7px 0; font-size: 16px; line-height: 24px;
    }
    .front .content .schedule-wrap .schedule-title .left .btn-switch-cal {
        width: 80px;
    }
    .front .content .schedule-wrap .schedule-calendar {
        margin-top: 12px;
    }
    .front .content .schedule-wrap .schedule-calendar .time-wrap > div {
        width: calc((100% - 130px) / 6);
    }
    .front .content .schedule-wrap .schedule-calendar .time-wrap > div:nth-child(2n) {
        display: none;
    }
    .front .content .schedule-wrap .schedule-calendar .room-wrap {
        margin-top: 3px;
    }
    .front .content .schedule-wrap .schedule-calendar .room-wrap .title-wrap {
        width: 130px;
    }
    .front .content .schedule-wrap .schedule-calendar .room-wrap .title-wrap .room-row {
        width: 130px; padding-top: 18px;
    }
    .front .content .schedule-wrap .schedule-calendar .room-wrap .title-wrap .room-row.on {
        border-left: 4px solid #4129fb;
    }
    .front .content .schedule-wrap .schedule-calendar .room-wrap .title-wrap .location {
        padding: 0 6px;
    }
    .front .content .schedule-wrap .schedule-calendar .room-wrap .title-wrap .name {
        padding: 0 6px;
    }
    .front .content .schedule-wrap .schedule-calendar .room-wrap .time-schedule-wrap {
        width: calc(100% - 130px); font-size: 12px; line-height: 18px;
    }
    .front .content .schedule-wrap .schedule-calendar .time-schedule-wrap .schedule-row .td:nth-child(2n - 1) {
        border-right: none;
    }
    .front .content .schedule-wrap .schedule-calendar .time-schedule-wrap .schedule {
        margin-left: 2px; border-radius: 5px;
    }

    .front .content .schedule-wrap.week .schedule-title .left .date {
        width: 100%; margin-left: 0px; margin-bottom: 5px;
    }
    .front .content .schedule-wrap.week .schedule-calendar .date-wrap > div {
        width: calc((100% - 165px) / 5);
    }
    .front .content .schedule-wrap.week .schedule-calendar .date-wrap > div .week {
        display: none;
    }
    .front .content .schedule-wrap.week .schedule-calendar .date-wrap > div .date-text {
        display: none;
    }
    .front .content .schedule-wrap.week .schedule-calendar .time-wrap > div:nth-child(2n) {
        display: block;
    }
    .front .content .schedule-wrap.week .schedule-calendar .time-schedule-wrap .time-wrap {
        width: 35px; padding-right: 7px; font-size: 16px; line-height: 24px;
    }
    .front .content .schedule-wrap.week .schedule-calendar .time-schedule-wrap .schedule-row-wrap {
        width: calc(100% - 35px);
    }
    .front .content .schedule-wrap.week .schedule-calendar .time-schedule-wrap .schedule-row .td:nth-child(2n - 1) {
        border-right: 1px solid #dcdcdc;
    }
    .front .content .schedule-wrap.week .schedule-calendar .time-schedule-wrap .schedule .name,
    .front .content .schedule-wrap.week .schedule-calendar .time-schedule-wrap .schedule .time {
        display: none;
    }
    .front .content .schedule-wrap.week .schedule-calendar .time-schedule-wrap .cur-time-line {
        width: calc(100% - 35px); margin-left: 35px; letter-spacing: -0.5px;
    }
    .front .content .schedule-wrap.week .schedule-calendar .time-schedule-wrap .cur-time-line > div {
        margin-left: -33px;
    }
}


@media (max-width: 600px) {
    .tooltip {
        display: none;
    }
    #reserveScheduleLayerPopup .inner {
        width: calc(100% - 20px); max-height: calc(100% - 20px); margin: 10px auto; padding: 20px 15px 10px; border-radius: 0px;
    }
    .front .layer-popup .btn-popup-close {
        top: 20px; right: 20px;
    }
    .front .layer-popup .popup-header {
        margin-bottom: 20px;
    }
    #reserveScheduleLayerPopup .popup-content {
        max-height: calc(100vh - 257px);
    }
    #reserveScheduleLayerPopup .popup-content label {
        width: 100%; padding: 5px 0;
    }
    #reserveScheduleLayerPopup .popup-content label.tab-item {
        width: 50%; padding: 12px 0;
    }
    #reserveScheduleLayerPopup .popup-content input[type=text] {
        width: 100%; margin-bottom: 5px;
    }
    #reserveScheduleLayerPopup .popup-content .reserve-date-wrap,
    #reserveScheduleLayerPopup .popup-content textarea,
    #reserveScheduleLayerPopup .popup-content .user-list-wrap,
    #reserveScheduleLayerPopup .popup-content .guest-list-wrap,
    #reserveScheduleLayerPopup .popup-content .recurring-reserve-input input[type=text] {
        width: 100%;
    }
    #reserveScheduleLayerPopup .popup-content #reservationName {
        background-color: #eee;
    }
    #reserveScheduleLayerPopup .popup-content .btn-select-user {
        margin-left: 10px;
    }
    #reserveScheduleLayerPopup .popup-content .btn-add-guest {
        margin-left: 10px;
    }
    #selectUserLayerPopup .inner .popup-content > div {
        padding: 10px;
    }
    #selectUserLayerPopup .inner .popup-content .user {
        margin-bottom: 5px; font-size: 14px; line-height: 18px; letter-spacing: -0.5px;
    }
    #reserveScheduleLayerPopup .popup-content .recurring-reserve-wrap {
        margin-bottom: 10px; padding: 15px;
    }
    #reserveScheduleLayerPopup .popup-content .recurring-reserve-wrap .toggle-arrow {
        top: 16px;
    }
    #reserveScheduleLayerPopup .popup-content .recurring-reserve-wrap input[type=checkbox]:checked ~ .toggle-arrow {
        top: 26px;
    }
    #reserveScheduleLayerPopup .popup-content .recurring-reserve-input label {
        width: 100%; padding: 10px 0;
    }
    #reserveScheduleLayerPopup .popup-content .recurring-reserve-input .weekday {
        width: calc((100% - 30px) / 7); margin-right: 5px; margin-bottom: 5px; padding: 9px; font-size: 13px; line-height: 19px;
    }
    #reserveScheduleLayerPopup .popup-content .notice-check-input .check-text {
        font-size: 14px; letter-spacing: -0.2px;
    }
    #reserveScheduleLayerPopup .popup-content .multi-checkbox-row .checkbox-wrap {
        width: 50%; margin-right: 0;
    }
    #reserveScheduleLayerPopup .popup-content .schedule-color-wrap {
        margin-top: 15px;
    }

    #officecallScheduleLayerPopup {
        overflow-y: inherit;
    }
    #officecallScheduleLayerPopup .inner {
        width: calc(100% - 10px); padding: 20px 15px 25px; border-radius: 0;
    }
}

@keyframes infiniteHorizontalMove {
    from { transform: translateX(calc(84.38vw - 41.25vh)); }
    to { transform: translateX(-100%); }
}