@charset "utf-8";
:root {
  --wrapper-bg-color: #deebfb; /*레이아웃 색상*/
  --font-color-base: #041820;
  --color-base: #5ca1f7; /* 메인컬러 */
  --color-base-hover: rgba(92, 161, 247, 0.8); /* 메인컬러 hover */
  --color-point: #0ccac6; /* 포인트컬러 */
  --color-point-hover: rgba(12, 202, 198, 0.8); /* 포인트컬러 hover */
  --color-gray: #e4e9f1; /* 회색 컬러 */
  --color-gray2: #f1f4f9; /* 회색 컬러2 */
  --bor-color: #e4e6e7;
  --bor-color2: #CDD1D2;

  /* 예약창 컬러 설정 */
  /* 예약창 - 예약상태 컬러 설정 */
  --color-res01: #5ca1f7; /*예약등록 c01*/
  --color-res02: #b38af2; /*확인콜완료 c02*/
  --color-res03: #5cf76e; /*확인콜부재 c03 */
  --color-res04: #00a156; /*해피콜부재 c04*/
  --color-res05: #13b8c2; /*내원 c05*/
  --color-res06: #cad3e3; /*귀가 c06*/
  --color-res07: #f18d71; /*예약취소 c07 */
  --color-res08: #545454; /*미방문 c08 */

  /* 예약창 - 내원상태 컬러 설정 */
  --color-visit01: #5ca1f7; /*진료대기 c09*/
  --color-visit02: #b38af2; /*진료중 c10*/
  --color-visit03: #041820; /*진료완료 c11*/
  --color-visit04: #00a156; /*상담중 c12*/
  --color-visit05: #13b8c2; /*수납대기 c13*/
  --color-visit06: #041820; /*수납완료 c14*/
  --color-visit07: #0096d1; /*시술중 c15*/
  --color-visit08: #002f80; /*수술중 c16*/
}

/* common */
html,body,div,span,applet,object,iframe,h1,h2,h3, h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,dialog,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; font: inherit; vertical-align: baseline; }
article,aside,details,dialog,figcaption,figure,footer,header,hgroup,menu,nav,section {display: block;}
ol,ul,li {list-style: none}
blockquote,q {quotes: none}
blockquote:before,blockquote:after,q:before,q:after  {content: ''; content: none;}
ins {background-color: #ff9; color: #000; text-decoration: none;}
del {text-decoration: line-through;}
table {border-collapse: collapse; border-spacing: 0;}
abbr[title], dfn[title] {border-bottom:1px dotted #000; cursor: help}
hr {display: block; height: 1px; border: 0; border-top: 1px solid #c7c7c7; margin: 1em 0; padding: 0;}
*{margin:0; padding:0;-webkit-box-sizing: border-box; box-sizing: border-box; }
*::before, *::after { -webkit-box-sizing: border-box; box-sizing: border-box;}
li{list-style:none;}
img {border:0 none;}
.hidden {position:absolute; left:-9999px; top:-9999px; width:0; height:0; font-size:0; line-height:0;}
form {min-width: auto;}
input[type="image"] {border:0 none;}
label {display: inline-block;}
button, input[type="submit"] {cursor: pointer; border:0 none;}
button::-moz-focus-inner {border: 0 none; padding: 0;}
body {background-color:#ffffff; word-wrap:break-word; word-break:break-all;  zoom:1; -webkit-text-size-adjust: 100%;}
body,html {position:relative; height:100%;}

th,td,input,select,textarea,button {font-size:12px; letter-spacing: -.4px; line-height:1.5; font-family: 'Nanum Gothic', sans-serif;} /* color값은 디자인가이드에 맞게사용 */
a{text-decoration:none; color:var(--font-color-base); transition:.2s;} /* color값은 디자인가이드에 맞게사용 */
pre { line-height: 2;white-space: pre-wrap;}
body a:hover, body a:focus { 
    text-decoration: none; 
    /*color: var(--color-base);*/
}
html {
  font-size: 100%;
  font-family: 'Nanum Gothic', sans-serif;
  color: var(--font-color-base);
}
.rd_only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  border: 0 !important;
}

input[type='text'],
input[type='search'],
input[type='password'] {
  -webkit-appearance: none;
  -webkit-border-radius: 0;
}

input[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
}

textarea,
input[type='submit'] {
  -webkit-appearance: none;
  -webkit-border-radius: 0;
}

select,
select.form-control,
select.input-sm {
  padding: 0 25px 0 10px;
  background-image: url('../img/icons/ico_arrow-down.svg');
  background-repeat: no-repeat;
  background-size: 18px 9px;
  background-position: right 10px center;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

select:focus {
  border-color: var(--color-base);
}

select::-ms-expand {
  display: none;
}

/* --- placeholder */
input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
  color: #b1b1b1;
}

input::-moz-placeholder,
textarea::-moz-placeholder {
  color: #b1b1b1;
}

input:-ms-input-placeholder,
textarea:-ms-input-placeholder {
  color: #b1b1b1;
}

input::-ms-input-placeholder,
textarea::-ms-input-placeholder {
  color: #b1b1b1;
}

input::placeholder,
textarea::placeholder {
  color: #b1b1b1;
}

input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
  color: #b1b1b1;
}

input::-moz-placeholder,
textarea::-moz-placeholder {
  color: #b1b1b1;
}

input:-ms-input-placeholder,
textarea:-ms-input-placeholder {
  color: #b1b1b1;
}

input:focus::-webkit-input-placeholder,
textarea:focus::-webkit-input-placeholder {
  color: #b1b1b1;
}

input:focus::-moz-placeholder,
textarea:focus::-moz-placeholder {
  color: #b1b1b1;
}

input:focus:-ms-input-placeholder,
textarea:focus:-ms-input-placeholder {
  color: #b1b1b1;
}

input:focus::-ms-input-placeholder,
textarea:focus::-ms-input-placeholder {
  color: #b1b1b1;
}

input:focus::placeholder,
textarea:focus::placeholder {
  color: #b1b1b1;
}
input[type='date'],
input[type='text'],
input[type='search'],
input[type='number'],
input[type='password'],
input[type='tel'],
input[type='email'],
textarea {
  border: 1px solid var(--bor-color);
  padding: 0 10px;
  border-radius: 5px;
  background-color: #fff;
  color: var(--font-color-base);
}

/* date picker */
#startDate,
#endDate,
.date_pick[type='text'] {
  padding-right: 30px;
  background-repeat: no-repeat;
  background-position: center right 10px;
  background-size: 13px auto;
  background-image: url('../img/icons/ico_calendar.svg');
}

.date_pick_recall[type='text'] {
  padding-right: 30px;
  background-repeat: no-repeat;
  background-position: center right 10px;
  background-size: 13px auto;
  background-image: url('../img/icons/ico_calendar.svg');
}

.date_pick[type='text']:disabled {
  color: dimgray;
}


input[type='number']::-webkit-outer-spin-button,
input[type='number']::-webkit-inner-spin-button {
  -webkit-appearance: none;
}

select,
select.form-control,
select.input-sm {
  border: 1px solid var(--bor-color);
  border-radius: 5px;
  background-color: #fff;
  color: var(--font-color-base);
  cursor: pointer;
}

select.form-control,
select.input-sm {
  height: auto;
  font-size: inherit;
}

input[type='date'],
input[type='text'],
input[type='search'],
input[type='number'],
input[type='password'],
input[type='tel'],
input[type='email'],
select {
  height: 30px;
}
/*
input[readonly]:not(.hasDatepicker),
textarea[readonly]:not(.hasDatepicker),
select[readonly]:not(.hasDatepicker) {
    background-color: var(--color-gray2);
}*/
.ui-widget{
    font-family: 'Nanum Gothic', sans-serif;
}
.ui-widget-header {
  border: 0;
  background: #fff;
}
.ui-datepicker .ui-datepicker-title {
  font-size: 12px;
}
.ui-datepicker select.ui-datepicker-month,
.ui-datepicker select.ui-datepicker-year {
  height: auto;
}

.ui-datepicker .ui-datepicker-prev,
.ui-datepicker .ui-datepicker-next {
  position: absolute;
  top: 3px !important;
  width: 1.4em;
  height: 1.4em;
  border: 0 !important;
  outline: none !important;
  cursor: pointer;
}
.ui-datepicker .ui-datepicker-prev .ui-icon,
.ui-datepicker .ui-datepicker-next .ui-icon {
  display: none !important;
}
.ui-datepicker .ui-datepicker-prev {
  left: 2px !important;
  background: url('../img/icons/ico_arrow-left.svg') no-repeat center / 8px auto;
}
.ui-datepicker .ui-datepicker-next {
  right: 2px !important;
  background: url('../img/icons/ico_arrow-right.svg') no-repeat center / 8px auto;
}

.ui-datepicker td span, 
.ui-datepicker td a {
    display: block;
    width: 32px;
    height: 32px;
    line-height: 32px;
    border-radius: 50%;
    border: 0;
    text-align: center;
    padding: 0;
} 

.ui-state-default,
.ui-widget-content .ui-state-default,
.ui-widget-header .ui-state-default,
.ui-button,
html .ui-button.ui-state-disabled:hover,
html .ui-button.ui-state-disabled:active {
  border: 0;
  background: #fff;
}
.ui-state-active,
.ui-widget-content .ui-state-active,
.ui-widget-header .ui-state-active,
a.ui-button:active,
.ui-button:active,
.ui-button.ui-state-active:hover {
  color: #fff !important;
  /*border: 1px solid var(--color-base);*/
  background: var(--color-base);
}

/* sun */
.ui-datepicker th.ui-datepicker-week-end:first-of-type,
.ui-datepicker td.ui-datepicker-week-end:first-of-type a {
    color: #df1f1f;
}
/* saturday */
.ui-datepicker th.ui-datepicker-week-end:last-of-type,
.ui-datepicker td.ui-datepicker-week-end:last-of-type a {
    color: #0e66b0;
}

textarea {
  padding: 10px;
  resize: none;
}

input:focus,
textarea:focus,
select:focus {
  border-color: var(--color-base);
  outline: none;
}

input[type='radio'] {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

input[type='radio'] + label {
  display: inline-block;
  position: relative;
  padding-left: 25px;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  line-height: 20px;
  margin: 5px 0;
  margin-right: 10px;
}

label.type_none_txt {
  display: block;
  width: 20px;
  height: 1.0625rem;
  font-size: 0;
  padding-left: 0;
  line-height: 0;
}

input[type='radio'] + label:last-of-type {
  margin-right: 0;
}

input[type='radio'] + label:before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 20px;
  height: 20px;
  text-align: center;
  background: transparent;
  border: 2px solid #333;
  border-radius: 50%;
}

input[type='radio'] + label:after {
  content: '';
  position: absolute;
  top: 5px;
  left: 5px;
  width: 10px;
  height: 10px;
  background: transparent;
  border-radius: 50%;
}

input[type='radio'] + label:active:before,
input[type='radio']:checked + label:active:before {
  -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), inset 0px 1px 3px rgba(0, 0, 0, 0.1);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), inset 0px 1px 3px rgba(0, 0, 0, 0.1);
}

input[type='radio']:disabled + label {
  color: dimgray;
}

input[type='radio']:disabled + label:before {
  border-color: dimgray;
}

input[type='radio']:checked + label:before {
  background: #fff;
  border-color: var(--color-base);
}

input[type='radio']:checked + label:after {
  background: var(--color-base);
}

input[type='checkbox'] {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

input[type='checkbox'] + label {
  position: relative;
  padding-left: 18px;
  margin: 5px 0;
  margin-right: 15px;
  cursor: pointer;
}

input[type="checkbox"]+label:empty {
    margin: 0;
    margin-right: 0;
    padding-left: 0;
    width: 12px;
    height: 12px; 
}
input[type="checkbox"]+label:empty:before {
    top: 0;
}

input[type='checkbox'] + label:last-child {
  margin-right: 0 !important;
}

input[type='checkbox'] + label:before {
  content: '\f00c';
  position: absolute;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  text-align: center;
  top: 1.5px;
  left: 0;
  width: 12px;
  height: 12px;
  color: transparent;
  background: #fff;
  border: 1px solid var(--color-base);
  border-radius: 0;
  font-family: 'FontAwesome';
  font-size: 8px;
  font-weight: 300;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
input[type='checkbox']:checked + label:before {
  /*color: var(--color-base);
  border-color: var(--color-base);*/

  color: #fff;
  border-color: var(--color-base);
  background-color: var(--color-base);
}

/* data tooltip */
[data-tooltip-text] {
  position: relative;
  font-size: 12px;
  cursor: pointer;
}
[data-tooltip-text]:hover:before {
  content: attr(data-tooltip-text);
  position: absolute;
  bottom: 100%;
  left: 50%;
  background-color: #333132;
  -webkit-box-shadow: 0 2px 3px 0 rgba(50, 50, 50, 0.4);
  box-shadow: 0 2px 3px 0 rgba(50, 50, 50, 0.4);
  border-radius: 5px;
  color: #fff;
  font-size: 12px;
  padding: 5px 12px;
  width: auto;
  min-width: 50px;
  max-width: 300px;
  word-wrap: break-word;
  z-index: 10001;
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
  margin-bottom: 11px;
  white-space: nowrap;
  line-height: 1;
}
[data-tooltip-text]:hover:after {
  content: '';
  position: absolute;
  border-right: 5px solid transparent;
  border-top: 7px solid #333132;
  border-left: 5px solid transparent;
  bottom: 100%;
  left: 50%;
  margin-bottom: 5px;
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
  z-index: 10001;
}

/* 모바일 가로고정 */
/* 모바일 환경에서만 적용 */
@media (orientation: portrait) {
  html {
    transform: rotate(-90deg);
    transform-origin: top left;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100vh;
    height: 100vw;
  }
}
/* base */
.t_l {
  text-align: left !important;
}
.t_c {
  text-align: center !important;
}
.t_r {
  text-align: right !important;
}

.pos_r {
  position: relative;
}
.pos_a {
  position: absolute;
}

.pos_area_c {
    position-area: center;
}

/* flex */
.d_f {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}
.a_c {
  -webkit-box-align: center !important;
  -ms-flex-align: center !important;
  align-items: center !important;
}
.j_c {
  -webkit-box-pack: center !important;
  -ms-flex-pack: center !important;
  justify-content: center !important;
}
.j_b {
  -ms-flex-pack: justify !important;
  justify-content: space-between !important;
}
.j_s {
  justify-content: flex-start !important;
}
.j_e {
  justify-content: flex-end !important;
}

/**
COLOR
**/
.font-color-base {
  color: var(--font-color-base) !important;
}
.color_000 {
  color: #000 !important;
}
.color_222 {
  color: #222 !important;
}
.color_666 {
  color: #666 !important;
}
.color_888 {
  color: #888 !important;
}
.color_999 {
  color: #999 !important;
}
.color_red {
  color: #e84809 !important;
}

.color_fff {
  color: #fff !important;
}
.color_base {
  color: var(--color-base) !important;
} /* 메인컬러 */
.color_point {
  color: var(--color-point) !important;
} /* 포인트 컬러 */
.color_gray {
  color: var(--color-gray) !important;
} /* 회색 컬러 */
.color_gray2 {
  color: var(--color-gray2) !important;
} /* 회색 컬러2 */

.bg_base {
  background-color: var(--color-base) !important;
}
.bg_point {
  background-color: var(--color-point) !important;
}
.bg_gray {
  background-color: var(--color-gray) !important;
}
.bg_gray2 {
  background-color: var(--color-gray2) !important;
}
.bg_222 {
  background-color: #222 !important;
}
.bg_fff {
  background-color: #fff !important;
}
.bg_000 {
  background-color: #000 !important;
}
.bg_red {
    background-color: #e84809 !important;
}
/**
FONT
**/
p {
  line-height: 1.5;
  font-weight: 400;
}
/*
h2{font-size:40px}
h3{font-size:30px}
h4{font-size:25px}
h5{font-size:20px}
h6{font-size:18px}
*/
.fw_400 {
  font-weight: 400 !important;
}
.fw_700 {
  font-weight: 700 !important;
}
.fw_800 {
  font-weight: 800 !important;
}

.fs_16 {
  font-size: 16px !important;
}
.fs_15 {
  font-size: 15px !important;
}
.fs_14 {
  font-size: 14px !important;
}
.fs_13 {
  font-size: 13px !important;
}
.fs_11 {
  font-size: 11px !important;
}
.fs_0 {
  font-size: 0 !important;
}

/**
WIDTH
**/
.mw-100 {
  max-width: 100% !important;
}

.w-25 {
  width: 25% !important;
}
.w-30 {
  width: 30% !important;
}
.w-40 {
  width: 40% !important;
}
.w-50 {
  width: 50% !important;
}
.w-60 {
  width: 60% !important;
}
.w-70 {
  width: 70% !important;
}
.w-75 {
  width: 75% !important;
}

.w-100 {
  width: 100% !important;
}

/**
HEIGHT
**/
.mh-100 {
  max-height: 100% !important;
}
.h-10 {
  height: 10% !important;
}
.h-25 {
  height: 25% !important;
}
.h-50 {
  height: 50% !important;
}
.h-75 {
  height: 75% !important;
}
.h-90 {
  height: 90% !important;
}
.h-100 {
  height: 100% !important;
}

/**
MARGIN
**/
.m0 {
  margin: 0 !important;
}
.mt5 {
  margin-top: 5px !important;
}
.mt10 {
  margin-top: 10px !important;
}
.mt15 {
  margin-top: 15px !important;
}
.mt20 {
  margin-top: 20px !important;
}
.mt25 {
  margin-top: 25px !important;
}
.mt30 {
  margin-top: 30px !important;
}
.mt35 {
  margin-top: 35px !important;
}
.mt40 {
  margin-top: 40px !important;
}
.mt50 {
  margin-top: 50px !important;
}

.mb0 {
  margin-bottom: 0 !important;
}
.mb5 {
  margin-bottom: 5px !important;
}
.mb10 {
  margin-bottom: 10px !important;
}
.mb20 {
  margin-bottom: 20px !important;
}
.mb25 {
  margin-bottom: 25px !important;
}
.mb30 {
  margin-bottom: 30px !important;
}
.mb35 {
  margin-bottom: 35px !important;
}
.mb40 {
  margin-bottom: 40px !important;
}
.mb50 {
  margin-bottom: 50px !important;
}

.ml10 {
  margin-left: 10px !important;
}
.ml20 {
  margin-left: 20px !important;
}
.mr5 {
  margin-right: 5px !important;
}
.mr10 {
  margin-right: 10px !important;
}
.mr20 {
  margin-right: 20px !important;
}
.mr40 {
  margin-right: 40px !important;
}

/**
PADDING
**/
.p0 {
  padding: 0 !important;
}
.p10 {
  padding: 10px !important;
}
.p20 {
  padding: 20px !important;
}
.p30 {
  padding: 30px !important;
}
.p40 {
  padding: 40px !important;
}
.p50 {
  padding: 50px !important;
}

.pt0 {
  padding-top: 0 !important;
}
.pr0 {
  padding-right: 0 !important;
}
.pb0 {
  padding-bottom: 0 !important;
}
.pl0 {
  padding-left: 0 !important;
}
.pt5 {
  padding-top: 5px !important;
}
.pt20 {
  padding-top: 20px !important;
}
.pt30 {
  padding-top: 30px !important;
}
.pt40 {
  padding-top: 40px !important;
}
.pt50 {
  padding-top: 50px !important;
}

.pb20 {
  padding-bottom: 20px !important;
}
.pb30 {
  padding-bottom: 30px !important;
}
.pb40 {
  padding-bottom: 40px !important;
}
.pb50 {
  padding-bottom: 50px !important;
}

.pl10 {
  padding-left: 10px !important;
}
.pl15 {
    padding-left: 15px !important;
}
.pl20 {
  padding-left: 20px !important;
}
.pl30 {
  padding-left: 30px !important;
}
.pl50 {
  padding-left: 50px !important;
}
.pr20 {
  padding-right: 20px !important;
}
.pr10 {
  padding-right: 10px !important;
}

.ver_top {
  vertical-align: top;
}

.display_block {
  display: block;
}
.display_inline-block {
  display: inline-block;
}

/**
BUTTON
**/
.w100 {width: 100%;}
.btn_wrap {
  text-align: center;
  font-size: 0;
}
.btn_wrap .btn {
  margin-left: 4px !important;
}
.btn_wrap .btn:first-child {
  margin: 0 !important;
}

.btn {
  display: inline-block;
  font-size: 12px;
  position: relative;
  text-align: center;
  vertical-align: top;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
}
/*
.btn:after{content:'';position:absolute;left:0;top:0;width:100%;height:100%;
	-webkit-transform-origin:right center;transform-origin:right center;
	-webkit-transform:scale(0,1);-ms-transform:scale(0,1);transform:scale(0,1);
	-webkit-transition:Transform 0.5s ease;-o-transition:Transform 0.5s ease;transition:Transform 0.5s ease;}
    */
.btn span {
  position: relative;
}

/* SIZE */
.btnSizeL {
  height: 50px;
  line-height: 50px;
}
.btnSizeM {
  height: 35px;
  line-height: 35px;
}

.btnSizeS {
  height: 30px;
  line-height: 30px;
}
.btnSizeXS {
  height: 25px;
  line-height: 25px;
}
.btnSizeXXS {
  height: 20px;
  line-height: 20px;
}

/* COLOR */
.btn.btnColorW {
  color: var(--font-color-base);
  border: 1px solid var(--font-color-base);
  background-color: #fff;
}
.btn.btnColorW:hover {
}

.btn.btnColorB {
  color: #fff;
  background-color: var(--color-base);
}
.btn.btnColorB:hover {
}

/* 할인/환불 버튼 */
.btn.btnColor_refund {
  color: #fff;
  background-color: var(--color-base);
}
.btn.btnColor_discount {
  color: #fff;
  background-color: #F29D86;
}
.btn.btnColor_refund:hover,
.btn.btnColor_discount:hover {
  background-color: #555;
}

.btn.btnColorG2 {
  background-color: var(--color-gray2);
}
.btn.btnColorG2:hover {
  background-color: var(--color-gray);
}

.btn.btnColorP {
  color: #fff;
  background-color: var(--color-point);
}
.btn.btnColorP:hover {
}

.btn.btnColorRes02 {
  color: #fff;
  background-color: var(--color-res02);
}
.btn.btnColorRes02:hover {
}

.btn.btnColorR { /* red */
    color: #fff;
    background-color: #e84809;
}
.btn.btnColorR:hover {
}
  

.btn.btnColorWT {
  color: #222;
  border: 1px solid #fff;
  background-color: #fff;
}
.btn.btnColorWT:hover {
}

.btn.btnColorWW {
  color: #222;
  border: 1px solid var(--bor-color);
}
.btn.btnColorWW:hover {
}

.btnColorBB {
  color: #fff;
  background-color: var(--font-color-base);
}
.btnColorBB:hover {
  background-color: #333;
}

.btnColorO {
  color: #fff;
  background-color: rgba(255, 160, 49, 1);
}
.btnColorO:hover {
  background-color: #333;
}

.btnColorA {
  color: #fff;
  background-color: #aaa;
}
.btnColorA:hover {
  background-color: #999;
}

.btn.disabled {
  cursor: not-allowed;
}
.disabled.btnColorW {
  color: #ddd;
  border-color: #ddd;
}
.disabled.btnColorG {
  color: #ddd;
  border-color: #ddd;
}
.disabled.btnColorP {
  background: #ddd;
}

/* TYPE */
.btnTypeB {
}
.btnTypeR.btnSizeL {
  border-radius: 10px;
}
.btnTypeR.btnSizeM {
  border-radius: 5px;
}
.btnTypeR.btnSizeS {
  border-radius: 5px;
}
.btnTypeR.btnSizeXS {
  border-radius: 5px;
}
.btnTypeR.btnSizeXXS {
  border-radius: 5px;
}

.btnTypeC.btnSizeL {
    border-radius: 25px;
}
.btnTypeC.btnSizeM {
    border-radius: 20px;
}
.btnTypeC.btnSizeS {
    border-radius: 15px;
}
.btnTypeC.btnSizeXS {
    border-radius: 12.5px;
}
.btnTypeC.btnSizeXXS {
    border-radius: 10px;
}

/* layout */
#wrapper {
  position: relative;
  display: flex;
  /*min-width: 1540px;*/
  /*min-width: 1800px;*/
  width: 100vw;
  /*min-height: 100%;*/
  /*height: 100vh;*/
  height: 100%;
  font-size: 12px;
  margin: 0 auto;
  background: var(--wrapper-bg-color);
  overflow: hidden;
}
body.portrait #wrapper {
  width: 100vh;
  height: 100vw;
}

.pc #wrapper {
  min-width: 1700px;
}
.admin_nav {
  position: relative;
  width: 70px;
  height: 100%;
  flex-shrink: 0;
  background-color: #fff;
  /* -webkit-box-shadow: 10px 0px 10px rgba(0, 0, 0, .02);
    box-shadow: 10px 0px 10px rgba(0, 0, 0, .02);*/
  -webkit-transition: 0.3s all ease-in-out;
  transition: 0.3s all ease-in-out;
  z-index: 10;
}

.admin_nav .admin_nav__head {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  height: 78px;
  padding: 0;
  /*-webkit-transition: .2s .4s all;
    transition: .2s .4s all;*/
}

.admin_nav .admin_nav__head .logo img {
  width: 50px;
  /*
    -webkit-transition: .2s all;
    transition: .2s all;
    */
}

.admin_nav .admin_nav__body {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: calc(100% - 78px);
  padding: 0;
  -webkit-transition: 0.2s all;
  transition: 0.2s all;
  /*overflow: hidden;*/
}

.admin_nav .admin_nav__body .gnb .gnb_depth1 > li.gnb_item {
  position: relative;
  line-height: 1.4;
  height: 60px;
  cursor: pointer;
}

.admin_nav .admin_nav__body .gnb .gnb_depth1 > li.gnb_item i {
  position: absolute;
  top: 0;
  left: 0;
  width: 70px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: transparent !important;
  pointer-events: none;
  z-index: 1;
}
.admin_nav .admin_nav__body .gnb .gnb_depth1 > li.gnb_item i:before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background-color: var(--color-base);
  opacity: 0;
}
.admin_nav .admin_nav__body .gnb .gnb_depth1 > li.gnb_item i svg {
  width: 29px;
  z-index: 3;
}
.admin_nav .admin_nav__body .gnb .gnb_depth1 > li.gnb_item i svg path {
  fill: var(--color-base);
}

.admin_nav .admin_nav__body .gnb .gnb_depth1 > li.gnb_item > a {
  position: relative;
  width: 160px;
  height: 60px;
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  padding: 10px 10px 10px 70px;
  background-color: var(--color-base) !important;
  transition: none;
  -webkit-box-shadow: 12px 12px 15px rgba(0, 0, 0, 0.1);
  box-shadow: 12px 12px 15px rgba(0, 0, 0, 0.1);
  display: none !important;
}
.admin_nav .admin_nav__body .gnb .gnb_depth1 > li.gnb_item > a span {
  display: flex;
  align-items: center;
  height: 100%;
}

.admin_nav .admin_nav__body .gnb .gnb_depth1 > li.gnb_item.on i {
  /*background-color: var(--color-base-hover) !important;*/
}
.admin_nav .admin_nav__body .gnb .gnb_depth1 > li.gnb_item.on i:before {
  opacity: 0.18;
}
.admin_nav .admin_nav__body .gnb .gnb_depth1 > li.gnb_item:hover i svg path {
  fill: #fff;
}
.admin_nav .admin_nav__body .gnb .gnb_depth1 > li.gnb_item:hover > a {
  display: block !important;
}
.admin_nav .admin_nav__body .gnb .gnb_depth1 > li.gnb_item:hover i {
  /*background-color: var(--color-base) !important;*/
}
.admin_nav .admin_nav__body .gnb .gnb_depth1 > li.gnb_item:hover i:before {
  opacity: 1;
}
.admin_nav .admin_nav__body .nav_btn {
  position: relative;
  margin: 0 10px 20px;
  padding-top: 20px;
}

.admin_nav .admin_nav__body .nav_btn button {
  display: block;
  width: 100%;
  /*height: 40px;*/
  font-size: 0;
  margin-top: 5px;
  background-size: 18px auto;
  background-repeat: no-repeat;
  background-position: center center;
}
.admin_nav .admin_nav__body .nav_btn .notice {
  position: relative;
  background-image: url('../img/icons/ico_notice.svg');
}

.admin_nav .admin_nav__body .nav_btn .chat {
  position: relative;
  background-size:25px auto;
  background-image: url('../img/icons/ico_cht.png');
}

.admin_nav .admin_nav__body .nav_btn .notice .count {
  position: absolute;
  right: -7px;
  top: -7px;
  width: 24px;
  height: 24px;
  line-height: 24px;
  font-size: 12px;
  font-weight: 400;
  text-align: center;
  color: #fff;
  background-color: var(--color-base);
  border-radius: 50%;
}
.admin_nav .admin_nav__body .nav_btn .chart {
  background-image: url('../img/icons/ico_chart.svg');
}
.admin_nav .admin_nav__body .nav_btn .logout {
  background-image: url('../img/icons/ico_logout.svg');
}
.admin_contents {
  display: flex;
  flex-direction: column;
  width: calc(100% - 70px);
  height: 100%;
  transition: 0.3s all ease-in-out;
}

.admin_contents .admin_header {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 50px;
  flex-shrink: 0;
  padding: 0 10px 0 20px;
}

.admin_contents .admin_header .admin_header__left p {
  font-size: 24px;
  font-weight: 800;
}

.admin_header__left p {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.icon_center {
  display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    justify-content: flex-start; /* 가로 방향 왼쪽 정렬 */
}

.admin_contents .admin_header .admin_header__right {
  display: flex;
}

.admin_contents .admin_header .admin_header__right > * + * {
  margin-left: 10px;
}

.admin_contents .admin_header .admin_header__right .label_user {
  font-size: 14px;
  font-weight: 700;
  line-height: 18px;
  /*
    margin-right: 10px;
    padding-left: 25px;
    background-image: url("../img/icons/ico_user.png");
    background-repeat: no-repeat;
    background-position: left center;
    */
}
.admin_contents .admin_header .admin_header__right .label_user > * {
  vertical-align: baseline;
}
.admin_contents .admin_header .admin_header__right .label_user strong {
  font-size: 18px;
  font-weight: 800;
  margin-right: 10px;
}
.admin_contents .admin_header .admin_header__right .label_user span {
  opacity: 0.6;
}
.admin_contents #contents {
  width: 100%;
  height: calc(100% - 50px); 
  padding: 0 10px 10px;
}

#footer {
  height: 138px;
  text-align: center;
  padding: 40px 0;
}

#footer p {
  font-size: 14px;
  font-weight: 400;
  line-height: 1.6;
}

.border-solid-right-none {
  border-right:none !important;
}

.border-solid-left-none {
  border-left:none !important;
}

.border-solid-top-none {
  border-top:none !important;
}

.border-solid-bottom-none {
  border-bottom:none !important;
}

.white_space {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 로딩바 */
.custom-loader {
  display: none; 
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* background-color: rgba(0, 0, 0, 0.5); */
  background-color: transparent;
  z-index: 9999; 
  justify-content: center;
  align-items: center;
}

.custom-loader.active {
  display: flex; 
}

.custom-loader .spinner {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: conic-gradient(#0000 10%, #000);
  -webkit-mask: radial-gradient(farthest-side, #0000 calc(100% - 8px), #000 0);
  animation: s3 1s infinite linear;
}

@keyframes s3 {
  to {
      transform: rotate(1turn);
  }
}

.rcpop{
  border: 1px solid #ccc;
  display:none;
  position:absolute;
  top:0;
  left:0;
  z-index: 101;
  background:#fff;
  border-radius: 5px;
  -webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.2);
  -moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.2);
  box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.2);
}

.rcpop.on{
  display:block;
}

.rcpop ul{
  width:80px;
}

.rcpop ul li{
  font-size: 10px;
  font-weight: bolder;
  height:30px;
  line-height: 30px;
  text-align: center;
}

.rcpop ul li a{
  display:block;
}

.rcpop ul li a:hover{
  background:rgba(106, 177, 255, 0.21);
}

.rcpop .w100px li{
  line-height:35px;
  height:35px;
}
.rcpop.ver2{
  border-radius: 0px;
  font-size:12px;
}
.rcpop.ver2 ul{
  width:100px;
  padding:5px 0;
}
.rcpop.ver2 .bor-b-g{
  padding-bottom:5px;
  margin-bottom:5px;
}
.rcpop.ver2 ul li{
  height:auto;
  line-height:25px;
  text-align: left;
  padding:0;
}
.rcpop.ver2 ul li a{
  padding-left:10px;
  display:block;
  color:#666666;
  text-decoration: none;
}

.rcpop.ver2 ul li a:hover{
  background:rgba(106, 177, 255, 0.21);
  color:#548BC7
}

.rcpop.ver2 ul li a.txt_cfblue {
  color: cornflowerblue;
  font-weight: bold;
}

.rcpop.ver2 ul li a.txt_cfviolet {
  color: blueviolet;
  font-weight: bold;
}

.rcpop.ver2 ul .bor-b-g {
  border-bottom: 1px solid #ccc;
}
/* 05.19 8:00 수정*/
.rcpop.ver2 ul li .R-arr::after{
  content: "";
  display: block;
  width: 10px;
  height: 10px;
  background: url(../img/calendar_arrow_R_grey.png)no-repeat center / contain;
  float: right;
  margin: 7px 5px;
}
/* 05.19 수정 ~3804 */
.rcpop.ver2 ul li ul{
  display: none;
  background: #fff;
  position: absolute;
  left: 0%;
  top: 70px;
  background:#fff;
  -webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.1);
  -moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.1);
  box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.1);
}
.rcpop.ver2 ul li .top-2{
  top: 2px;
}
.rcpop.ver2 ul li .top-80{
  top: 66px;
}
.rcpop.ver2 ul li .top-120{
  top: 96px;
}
.rcpop.ver2 ul li .top-160{
  top: 127px;
}
.rcpop.ver2 ul li ul li{
  border-bottom: none !important;
}
.rcpop.ver2 ul li:hover ul{
  display: block;
  left: 100%;
}

.more-info {
  display: none;
}

.more-info.active {
  display: block;
}

/* 라벨 스타일 */
.reservationRadio input[type='radio'] + label {
  display: inline-block !important;
  position: relative !important;
  padding-left: 25px !important;
  cursor: pointer !important;
  -webkit-user-select: none !important;
  -moz-user-select: none !important;
  -ms-user-select: none !important;
  line-height: 20px !important;
  margin: 5px 0 !important;
  margin-right: 10px !important;
}

/* 라디오 테두리 */
.reservationRadio input[type='radio'] + label:before {
  content: '' !important;
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  width: 20px !important;
  height: 20px !important;
  text-align: center !important;
  background: transparent !important;
  border: 2px solid #333 !important;
  border-radius: 50% !important;
}

/* 선택 표시 (비어 있음) */
.reservationRadio input[type='radio'] + label:after {
  content: '' !important;
  position: absolute !important;
  top: 5px !important;
  left: 5px !important;
  width: 10px !important;
  height: 10px !important;
  background: transparent !important;
  border-radius: 50% !important;
}


.reservationRadio input[type='radio']:checked + label:before {
  background: #fff  !important;
  border-color: var(--color-base) !important;
}

.reservationRadio input[type='radio']:checked + label:after {
  background: var(--color-base)  !important;
}

select.ui-datepicker-year, select.ui-datepicker-month {
  background-image: none;
  width: auto !important;
}

.onelineOverFlow{
	white-space:nowrap;
	overflow:hidden;
	word-break:break-all;
	text-overflow:ellipsis;
}

#settingTabCont09 button {
  display: none;
}

#settingTabCont09 button.active {
  display: block;
}

.bg-transparent {
    background-color: transparent !important;
} 

.cursor-pointer {
  cursor: pointer;
}

.d-flex {
  display: flex !important;
}

.card-progress .progress {
  height: 3px;
  flex: 1;
  margin: 0 5px;
}


/* ###### 3.13 Progress ###### */
.progress {
  height: auto;
  border-radius: 0;
}

.progress-bar {
  border-radius: 3px;
  height: 13px;
  font-size: 12px;
}

.progress-bar-xs {
  height: 5px;
}

.progress-bar-sm {
  height: 8px;
}

.progress-bar-lg {
  height: 15px;
}

.progress {
  display: flex;
  overflow: hidden;
  font-size: 0.65625rem;
  background-color: #f0f0f8;
  border-radius: 3px;
}

.progress-bar {
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: #fff;
  text-align: center;
  white-space: nowrap;
  background-color: var(--primary-bg-color);
  transition: width 0.6s ease;
}

@media (prefers-reduced-motion: reduce) {
  .progress-bar {
      transition: none;
  }
}

.progress-bar-striped {
  background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
  background-size: 1rem 1rem;
}

.progress-bar-animated {
  animation: progress-bar-stripes 1s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
  .progress-bar-animated {
      animation: none;
  }
}

.progress-sm .progress-bar {
  border-radius: 1px;
}


.progress {
  display: flex;
  overflow: hidden;
  font-size: 0.65625rem;
  background-color: #f0f0f8;
  border-radius: 3px;
}


.progress-style .table th,
.progress-style .table td {
    padding: 0.75rem;
    vertical-align: middle;
}

.progress-style.progress {
    overflow: visible !important;
}

.progress-style.progress .progress-bar:after {
    content: "";
    width: 15px;
    height: 15px;
    border-radius: 50%;
    box-shadow: 0 5px 5px rgba(0, 0, 0, 0.2);
    background: #fff;
    position: absolute;
    right: -5px;
    top: -5px;
}

.progress-style .bg-primary-gradient.progress-bar:after,
.progress-style .bg-primary.progress-bar:after {
    border: 4px solid var(--primary-bg-color);
}

.progress-style .bg-secondary.progress-bar:after {
    border: 4px solid #f74f75;
}

.progress-style .bg-danger.progress-bar:after {
    border: 4px solid #f34343;
}

.progress-style .bg-teal.progress-bar:after {
    border: 4px solid #29ddee;
}

.progress-style .bg-pink.progress-bar:after {
    border: 4px solid #f754fa;
}

.progress-style .bg-success.progress-bar:after {
    border: 4px solid #24d5b8;
}

.progress-style .bg-danger-gradient.progress-bar:after {
    border: 4px solid #f34343;
}

.progress-style .bg-warning.progress-bar:after {
    border: 4px solid #ffbd5a;
}

.progress-style .bg-info.progress-bar:after {
    border: 4px solid #4ec2f0;
}

.progress-style .bg-orange.progress-bar:after {
    border: 4px solid #fd7e14;
}

.progress-style.progress .progress-bar {
    box-shadow: none;
    border-radius: 0;
    position: relative;
    -webkit-animation: animate-positive 2s;
    animation: animate-positive 2s;
}

.progress-style .progress-bar {
    float: left;
    height: 100%;
    font-size: 12px;
    border-radius: 20px !important;
    line-height: 20px;
    overflow: visible !important;
    color: #fff;
    text-align: center;
    background-color: #337ab7;
    -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
    box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
    -webkit-transition: width 0.6s ease;
    -o-transition: width 0.6s ease;
    transition: width 0.6s ease;
}

.progress-style .bg-warning-gradient.progress-bar:after {
  border: 4px solid #f67536;
}

.main-traffic-detail-item .progress {
  height: 8px;
}

.mb-2,
.my-2 {
    margin-bottom: 0.5rem !important;
}

.mt-2,
.my-2 {
    margin-top: 0.5rem !important;
}

.ms-auto,
.mx-auto {
    margin-left: auto !important;
}

.ht-5 {
  height: 5px;
}

.p-0 {
  padding: 0 !important;
}
.mt-1, .my-1 {
  margin-top: 0.25rem !important;
}
.card-body {
  flex: 1 1 auto;
  padding: 1.25rem;
}

/* ######## UTILITIES ######## */
.bg-primary {
  background-color: var(--primary-bg-color) !important;
}

a.bg-primary:hover,
a.bg-primary:focus {
  background-color: var(--primary-bg-color) !important;
}

.bg-transparent {
  background: transaprent !important;
}

button.bg-primary:hover,
button.bg-primary:focus {
  background-color: var(--primary-bg-color) !important;
}

.bg-secondary {
  background-color: #f74f75 !important;
}

a.bg-secondary:hover,
a.bg-secondary:focus {
  background-color: #f74f75 !important;
}

button.bg-secondary:hover,
button.bg-secondary:focus {
  background-color: #f74f75 !important;
}

.bg-success {
  background-color: #24d5b8 !important;
}

a.bg-success:hover,
a.bg-success:focus {
  background-color: #05957d !important;
}

button.bg-success:hover,
button.bg-success:focus {
  background-color: #00927a !important;
}

.bg-info {
  background-color: #4ec2f0 !important;
}

a.bg-info:hover,
a.bg-info:focus {
  background-color: #4ec2f0 !important;
}

button.bg-info:hover,
button.bg-info:focus {
  background-color: #4ec2f0 !important;
}

.bg-warning {
  background-color: #ffbd5a !important;
}

a.bg-warning:hover,
a.bg-warning:focus {
  background-color: #f3a024 !important;
}

button.bg-warning:hover,
button.bg-warning:focus {
  background-color: #f3a024 !important;
}

.bg-danger {
  background-color: #f34343 !important;
}

a.bg-danger:hover,
a.bg-danger:focus {
  background-color: #ee1f1f !important;
}

button.bg-danger:hover,
button.bg-danger:focus {
  background-color: #ee1f1f !important;
}

.bg-purple {
  background-color: #ad4ffa !important;
}

a.bg-purple:hover,
a.bg-purple:focus {
  background-color: #5930a2 !important;
}

button.bg-purple:hover,
button.bg-purple:focus {
  background-color: #5930a2 !important;
}

.bg-light {
  background-color: #f9f9fb !important;
}

a.bg-light:hover,
a.bg-light:focus {
  background-color: #d5d9e4 !important;
}

button.bg-light:hover,
button.bg-light:focus {
  background-color: #d5d9e4 !important;
}

.bg-dark {
  background-color: #383853 !important;
}

a.bg-dark:hover,
a.bg-dark:focus {
  background-color: #283143 !important;
}

button.bg-dark:hover,
button.bg-dark:focus {
  background-color: #283143 !important;
}

.bg-white {
  background-color: #fff !important;
}

.bg-transparent {
  background-color: transparent !important;
}

.bg-gray+.select2-container--default .select2-selection--single {
  background-color: #455473;
}

.bg-gray+.select2-container--default .select2-selection--single .select2-selection__rendered {
  color: #e1e1ef;
}

.bg-gradient-blue {
  background-image: linear-gradient(to right, #1976d2 0, #64b5f6 100%);
}

.bg-primary {
  background-color: var(--primary-bg-color) !important;
}
.bg-azure {
  background-color: #45aaf2 !important;
}

.bg-red {
  background-color: #dc0441 !important;
  color: #fff !important;
}

.bg-yellow {
  background-color: #ecb403 !important;
  color: #fff !important;
}

.bg-lime {
  background-color: #1e74a0 !important;
}

.bg-green {
  background-color: #2dce89 !important;
  color: #fff !important;
}

:root {
  --primary-bg-color: #38cab3;
  --primary-bg-hover: #5cd3b9;
  --primary-bg-border: #38cab3;
  --primary02: rgba(28, 213, 174, 0.2);
  --primary05: rgba(28, 213, 174, 0.5);
  --primary-transparentcolor: rgba(28, 213, 174, 0.2);
  --transparentprimary-transparentcolor: rgba(255, 255, 255, 0.05);
  --transparent-body: #38cab3;
  --transparent-theme: rgba(0, 0, 0, 0.1);
  --blue: $primary;
  --indigo: $primary;
  --purple: $purple;
  --pink: $pink;
  --red: $danger;
  --orange: $orange;
  --yellow: $warning;
  --green: $success;
  --teal: $teal;
  --cyan: $info;
  --white: $white;
  --gray: $gray-600;
  --gray-dark: $gray-800;
  --secondary: $gray-600;
  --success: $success;
  --info: $info;
  --warning: $warning;
  --danger: $danger;
  --light: $gray-100;
  --dark: $gray-800;
  --breakpoint-xs: 0;
  --breakpoint-sm: 576px;
  --breakpoint-md: 992px;
  --breakpoint-lg: 992px;
  --breakpoint-xl: 1200px;
}