@charset "utf-8";

/**
 * mobi custom
 */
.unidocu_sheet_popup .mbsc-btn {border:1px solid;}

/**
 * modal popup
 */
.uni-modal-popup {
  -webkit-overflow-scrolling: touch
}

/* list */

.mbsc-lv-unico .mbsc-lv-item {
  /*background: inherit;*/
  /*color: inherit;*/
  margin-bottom: 5px;
  border-bottom: 1px solid #e4e6e7;
  background-color: #fff;
}


/**
 * mask
 */

.uni-mask{
  top:0;
  position: absolute;z-index: 99998;
  width: 100%;
  height: 100%;
}
.uni-mask > .uni-mask-loader{
  position: absolute;z-index: 99999;
}
.uni-mask > .uni-mask-glass{
  background: #000;
  width: 100%;
  height: 100%;
  opacity: 0.3;
}

/**
 *
 * All animations must live in their own file
 * in the animations directory and be included
 * here.
 *
 */
/**
 * Styles shared by multiple animations
 */
/**
 * Dots
 */
@-webkit-keyframes scale {
  0% {
  -webkit-transform: scale(1);
  transform: scale(1);
  opacity: 1; }

  45% {
  -webkit-transform: scale(0.1);
  transform: scale(0.1);
  opacity: 0.7; }

  80% {
  -webkit-transform: scale(1);
  transform: scale(1);
  opacity: 1; } }
@keyframes scale {
  0% {
  -webkit-transform: scale(1);
  transform: scale(1);
  opacity: 1; }

  45% {
  -webkit-transform: scale(0.1);
  transform: scale(0.1);
  opacity: 0.7; }

  80% {
  -webkit-transform: scale(1);
  transform: scale(1);
  opacity: 1; } }

.ball-pulse > div:nth-child(0) {
  -webkit-animation: scale 0.75s -0.36s infinite cubic-bezier(.2, .68, .18, 1.08);
  animation: scale 0.75s -0.36s infinite cubic-bezier(.2, .68, .18, 1.08); }
.ball-pulse > div:nth-child(1) {
  -webkit-animation: scale 0.75s -0.24s infinite cubic-bezier(.2, .68, .18, 1.08);
  animation: scale 0.75s -0.24s infinite cubic-bezier(.2, .68, .18, 1.08); }
.ball-pulse > div:nth-child(2) {
  -webkit-animation: scale 0.75s -0.12s infinite cubic-bezier(.2, .68, .18, 1.08);
  animation: scale 0.75s -0.12s infinite cubic-bezier(.2, .68, .18, 1.08); }
.ball-pulse > div:nth-child(3) {
  -webkit-animation: scale 0.75s 0s infinite cubic-bezier(.2, .68, .18, 1.08);
  animation: scale 0.75s 0s infinite cubic-bezier(.2, .68, .18, 1.08); }
.ball-pulse > div {
  background-color: #fff;
  width: 15px;
  height: 15px;
  border-radius: 100%;
  margin: 2px;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  display: inline-block; }

@-webkit-keyframes ball-pulse-sync {
  33% {
  -webkit-transform: translateY(10px);
  transform: translateY(10px); }

  66% {
  -webkit-transform: translateY(-10px);
  transform: translateY(-10px); }

  100% {
  -webkit-transform: translateY(0);
  transform: translateY(0); } }

@keyframes ball-pulse-sync {
  33% {
  -webkit-transform: translateY(10px);
  transform: translateY(10px); }

  66% {
  -webkit-transform: translateY(-10px);
  transform: translateY(-10px); }

  100% {
  -webkit-transform: translateY(0);
  transform: translateY(0); } }

.ball-pulse-sync > div:nth-child(0) {
  -webkit-animation: ball-pulse-sync 0.6s -0.21s infinite ease-in-out;
  animation: ball-pulse-sync 0.6s -0.21s infinite ease-in-out; }
.ball-pulse-sync > div:nth-child(1) {
  -webkit-animation: ball-pulse-sync 0.6s -0.14s infinite ease-in-out;
  animation: ball-pulse-sync 0.6s -0.14s infinite ease-in-out; }
.ball-pulse-sync > div:nth-child(2) {
  -webkit-animation: ball-pulse-sync 0.6s -0.07s infinite ease-in-out;
  animation: ball-pulse-sync 0.6s -0.07s infinite ease-in-out; }
.ball-pulse-sync > div:nth-child(3) {
  -webkit-animation: ball-pulse-sync 0.6s 0s infinite ease-in-out;
  animation: ball-pulse-sync 0.6s 0s infinite ease-in-out; }
.ball-pulse-sync > div {
  background-color: #fff;
  width: 15px;
  height: 15px;
  border-radius: 100%;
  margin: 2px;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  display: inline-block; }

@-webkit-keyframes ball-scale {
  0% {
  -webkit-transform: scale(0);
  transform: scale(0); }

  100% {
  -webkit-transform: scale(1);
  transform: scale(1);
  opacity: 0; } }

@keyframes ball-scale {
  0% {
  -webkit-transform: scale(0);
  transform: scale(0); }

  100% {
  -webkit-transform: scale(1);
  transform: scale(1);
  opacity: 0; } }

.ball-scale > div {
  background-color: #fff;
  width: 15px;
  height: 15px;
  border-radius: 100%;
  margin: 2px;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  display: inline-block;
  height: 60px;
  width: 60px;
  -webkit-animation: ball-scale 1s 0s ease-in-out infinite;
  animation: ball-scale 1s 0s ease-in-out infinite; }

@-webkit-keyframes rotate {0% {-webkit-transform: rotate(0deg);transform: rotate(0deg); }50% {-webkit-transform: rotate(180deg);transform: rotate(180deg); }100% {-webkit-transform: rotate(360deg);transform: rotate(360deg); } }
@keyframes rotate {0% {-webkit-transform: rotate(0deg);transform: rotate(0deg); }50% {-webkit-transform: rotate(180deg);transform: rotate(180deg); } 100% {-webkit-transform: rotate(360deg);transform: rotate(360deg); } }

.ball-rotate {position: relative; }
.ball-rotate > div {background-color: #fff;width: 15px;height: 15px;border-radius: 100%;margin: 2px;-webkit-animation-fill-mode: both;animation-fill-mode: both;position: relative; }
.ball-rotate > div:first-child {-webkit-animation: rotate 1s 0s cubic-bezier(.7, -.13, .22, .86) infinite;animation: rotate 1s 0s cubic-bezier(.7, -.13, .22, .86) infinite; }
.ball-rotate > div:before, .ball-rotate > div:after {
  background-color: #fff;
  width: 15px;
  height: 15px;
  border-radius: 100%;
  margin: 2px;
  content: "";
  position: absolute;
  opacity: 0.8; }
.ball-rotate > div:before {top: 0;left: -28px; }
.ball-rotate > div:after {top: 0;left: 25px; }

@keyframes rotate { 0% {-webkit-transform: rotate(0deg) scale(1);transform: rotate(0deg) scale(1); } 50% {-webkit-transform: rotate(180deg) scale(0.6);transform: rotate(180deg) scale(0.6); } 100% {-webkit-transform: rotate(360deg) scale(1);transform: rotate(360deg) scale(1); }}

.ball-clip-rotate > div {
  background-color: #fff;
  width: 15px;
  height: 15px;
  border-radius: 100%;
  margin: 2px;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  border: 2px solid #fff;
  border-bottom-color: transparent;
  height: 25px;
  width: 25px;
  background: transparent !important;
  display: inline-block;
  -webkit-animation: rotate 0.75s 0s linear infinite;
  animation: rotate 0.75s 0s linear infinite;
}

@keyframes rotate {
  0% {
  -webkit-transform: rotate(0deg) scale(1);
  transform: rotate(0deg) scale(1); }

  50% {
  -webkit-transform: rotate(180deg) scale(0.6);
  transform: rotate(180deg) scale(1); }

  100% {
  -webkit-transform: rotate(360deg) scale(1);
  transform: rotate(360deg) scale(1); }
}

@keyframes scale {
  30% {
  -webkit-transform: scale(0.3);
  transform: scale(0.3); }

  100% {
  -webkit-transform: scale(1);
  transform: scale(1); } }

.tt-suggestion{
  padding:10px;
}
.tt-suggestion:active{
  background: #114ba0;
}


/**
 Popup
 Search
 */

.layer-modal {
  /* display: none; */
  position: fixed;
  _position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10000;
  background-color: #f6f6f8;
  -webkit-overflow-scrolling: touch;
}
.layer-modal .header{
  position: inherit;
}
.layer-modal .content-area{
  margin-top:0;
}
.layer-modal .pop-modal-container .wrap {
  height:100%;
}
.layer-modal .pop-modal-container .content-area {
  overflow:auto;height:calc(100vh - 14.5vw)
}
.mbsc-datepicker-tab-expand {
  height: unset !important;
}
.mbsc-datepicker .mbsc-calendar {
  border-radius: 20px !important;
}
/**
 mobile-pop
 */
.mobile-pop-lock {
  -ms-touch-action: none;
  touch-action: none;
}
.mobile-pop-wrapper {

}
.mobile-pop-area {
  z-index: 99998; pointer-events: auto;
}
.mobile-pop-overlay {
  z-index: 11;position: absolute;width: 100%; height: 100%;top: 0; left: 0;background: rgba(0,0,0,.5);filter: alpha(opacity=50);
}
.mobile-pop-dialog {
  z-index: 12;position: absolute; top:50%; left:50%; width:280px; height:auto; background-color: #fff; border: 5px solid #575df9;-webkit-font-smoothing: antialiased;-webkit-tap-highlight-color: rgba(0,0,0,0);
}
.mobile-pop-content {

}
.mobile-pop-header {

}
.mobile-pop-body {

}
.mobile-pop-bottom {

}


/**
 photo wrap
 */
.img_wrap {margin: 0px 0;}
.img_cont {
  border: 1px dashed #c6c9d1;
  /*width: 288px;*/
  height: 316px;
  border-radius: 5px;
  margin: 0 auto
}
.img_area {
  position: relative;
  width: 100%;
  /*height: 316px*/
  height:75vw;
}
.img_cw{
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  text-align: center;
  overflow: hidden;
}
.img_cw:before {
  content: ' ';
  display: inline-block;
  vertical-align: middle;
  height: 100%;
}
/* 사진첨부 추가 */
.img_wrap.add .img_cw:before {
  content: none
}
.img_wrap.add .img_cw img {
  /*padding-top: 40px;*/
  vertical-align: middle;
  display: inline-block;
}
.img-box {
  margin-top: 3vw;
}

/**
noteview
 */
.note-view{

}

/****************************************************
 모비스크롤 캘린더
 */

.dw-cal-pnl .dw-cal-row .dw-cal-day[data-day="0"] {
  color:red
}
.dw-cal-pnl .dw-cal-row .dw-cal-day[data-day="6"] {
  color:blue
}

.dw-cal-pnl .dw-cal-row .dw-cal-day-marked {
  //color:red
}

/*.dw-cal-pnl .dw-cal-row .dw-cal-day-marked {*/
/*  color:green;*/
/*}*/


.usage-pjt-area button {
  width: 100%;
  height: 8vw;
  margin-top: 3vw;
  line-height: 8vw;
  font-size: 3.6vw;
}

.btn-versionDelete {
  margin-left: 10px;
  background-color: blue;
  color: white;
  border: none;
  cursor: pointer;
  border-radius: 5px;
  padding: 5px;
  position: relative;
}

.createVersion {
  position: relative;
  top: -2px;
}

.check-label.version {
  margin-left: 10px;
  position: relative;
  top: 2px;
}

/* --- 자원예약 --- */

.red-star + * .mobi-select-inp-10,
.red-star + * .mobi-select-inp-20,
.red-star + * .inp-40 {
  border: 1px dashed rgba(255, 37, 58, .5);
}

.red-star + * .mobi-select.readonly-20px {
  border: 1px dashed #ddd;
  width: 10%;
  height: 1.9rem;
  margin-top: -0.5rem;
  font-size: 0.95rem;
  text-align: center;
  padding: 0;
}

.red-star + * .mobi-select.readonly-40px {
  border: 1px dashed #ddd;
  width: 20%;
  height: 1.9rem;
  margin-top: -0.5rem;
  font-size: 0.95rem;
  text-align: center;
  padding: 0;
}


.mobi-select-inp-10 {
  font-family: "SCD-4";
  height: 1.9rem;
  margin-top: -0.5rem;
  font-size: 0.95rem;
  border: 1px dashed #ddd;
  border-radius: 0;
  background-color: #fff;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 10%;
  text-align: center;
}

.mobi-select-inp-20 {
  font-family: "SCD-4";
  height: 1.9rem;
  margin-top: -0.5rem;
  font-size: 0.95rem;
  border: 1px dashed #ddd;
  border-radius: 0;
  background-color: #fff;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 20%;
  text-align: center;
}

.mobi-select-inp-10-readOnly {
  font-family: "SCD-4";
  height: 1.9rem;
  margin-top: -0.5rem;
  font-size: 0.95rem;
  border: 1px dashed #ddd;
  border-radius: 0;
  background-color: #fff;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 10%;
  text-align: center;
}

.mobi-select-inp-20-readOnly {
  font-family: "SCD-4";
  height: 1.9rem;
  margin-top: -0.5rem;
  font-size: 0.95rem;
  border: 1px dashed #ddd;
  border-radius: 0;
  background-color: #fff;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 20%;
  text-align: center;
}

.inp-40 {
  font-family: "SCD-4";
  height: 1.9rem;
  margin-top: -0.5rem;
  font-size: 0.95rem;
  border: 1px dashed #ddd;
  border-radius: 0;
  background-color: #fff;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 40%;
  text-align: center;
}

.inp-40-read-only {
  font-family: "SCD-4";
  height: 1.9rem;
  margin-top: -0.5rem;
  font-size: 0.95rem;
  border: 1px dashed #ddd;
  border-radius: 0;
  background-color: #fff;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 40%;
  text-align: center;
}

.reservation-btn-area .btn-slt-line2 {
  width: inherit;
  height: inherit;
  padding: 0 0.5rem;
  font-size: 0.75rem;
  color: #6dc34a;
  border: 1px solid #6dc34a;
}

.useUserList {
  padding-bottom: 4.8rem;
}

.useUserList dl.panel-list > dt {
  position: relative;
  height: 3.1rem;
  padding: 0 1.2rem;
  font-family: 'SCD-5';
  line-height: 3.1rem;
  background-color: #fff3e5;
}

.useUserList .panel-list .btn-area a i {
  vertical-align: middle;
  font-size: 1.45rem;
  color: #6dc34a;
}

.useUserList .panel-list .empty .btn-area a {
  width: inherit;
  height: inherit;
}

.useUserList .panel-list .btn-area a {
  display: inline-block;
  width: 1.45rem;
  height: 1.45rem;
  line-height: 1.45rem;
}

.useUserList dl.panel-list dt .btn-area {
  top: -0.125rem;
}

.useUserList dl.panel-list dt .btn-area.inline {
  display: inline;
  position: relative;
  right: inherit;
  margin-left: 0.5rem;
  text-align: left;
}

.useUserList .panel-list .btn-area {
  position: absolute;
  top: calc(50% - 0.85rem);
  right: 1.2rem;
}

.useUserList .top-panel .template-explain dd {
  position: relative;
  padding: 1.2rem;
  line-height: 1.5rem;
  background-color: #fff;
}

.useUserList .panel-list .btn-area .btn-slt-line {
  width: inherit;
  height: inherit;
  padding: 0 0.5rem;
  font-size: 0.75rem;
  background-color: rgba(34, 34, 34, .1);
}

.useUserList .panel-list .btn-area .btn-slt-line2 {
  width: inherit;
  height: inherit;
  padding: 0 0.5rem;
  font-size: 0.75rem;
  color: #ff8b00;
  border: 1px solid #ff8b00;
}

.useUserList .panel-list.slt-user dd,
.useUserList .panel-list.line-1 dd {
  padding: 0;
}

.useUserList .panel-list.slt-user .user-line {
  position: relative;
  padding: 0 1.2rem;
  height: 3.1rem;
  line-height: 3.1rem;
}

.useUserList .panel-list.slt-user .user-line.on {
  background-color: #fff8d5;
}

.useUserList .panel-list.slt-user .user-line.required {
  background-color: rgba(255, 240, 0, .1);
}

.useUserList .panel-list.slt-user .user-line.default {
  background-color: #fffdf3;
}

.useUserList .panel-list.slt-user .user-line.bg-grn {
  background-color: #e9fbee;
}

.useUserList .panel-list.slt-user .user-line.bg-blu {
  background-color: #e2f5ff;
}

.useUserList .panel-list.slt-user .user-line.add-btn-on {
  height: inherit;
  padding: 0.7rem 1.2rem;
  line-height: inherit;
}

.useUserList .panel-list.slt-user .user-line + .user-line {
  border-top: 1px dashed #ddd;
}

.useUserList .panel-list.slt-user .user-line > a:first-child {
  overflow: hidden;
  display: inline-block;
  width: calc(100% - 5.8rem);
  word-wrap: break-word;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.useUserList .panel-list.slt-user dd span:first-child {
  display: inline-block;
  width: 4.2rem;
  text-align: center;
}

.useUserList .panel-list.slt-user dd span.basic {
  color: #555;
}

.useUserList .panel-list.slt-user dd span.approval {
  color: #ff8b00;
}

.useUserList .panel-list.slt-user dd span.agree,
.useUserList .panel-list.slt-user dd span.receive {
  color: #00c0b5;
}

.useUserList .panel-list.slt-user dd .team-name {
  overflow: hidden;
  display: inline-block;
  max-width: 6.1rem;
  word-wrap: break-word;
  white-space: nowrap;
  text-overflow: ellipsis;
  vertical-align: top;
  color: #999;
}

.useUserList .panel-list.slt-user dd span + span {
  margin-left: 0.2rem;
}

.useUserList .panel-list.slt-user dd .btn-area {
  display: flex;
  top: calc(50% - 0.8rem);
  /* top: 0; */
  right: 1.2rem;
}

.useUserList .panel-list.slt-user .user-line.add-btn-on .btn-area {
  top: 0.7rem;
}

.useUserList .panel-list.slt-user dd .btn-area i {
  display: inline-block;
}

.useUserList .panel-list.slt-user dd .add-btn-area {
  display: none;
  padding: 0.2rem 0;
}

.useUserList .panel-list.slt-user .user-line.add-btn-on .add-btn-area {
  display: block;
}

/* user-line v2 */
.useUserList .panel-list.slt-user .user-line.user-info > a:first-child {
  width: 100%;
}

.useUserList .panel-list.slt-user .user-line.user-info a span:first-child {
  display: none;
}

.useUserList .panel-list.slt-user .user-line.user-info a .team-name {
  max-width: 11.7rem;
}

.useUserList .panel-list.slt-user dd .add-btn-area a {
  display: inline-block;
  padding: 0 0.5rem;
  height: 1.45rem;
  line-height: 1.45rem;
  font-size: 0.75rem;
  background-color: #eee;
}

.useUserList .panel-list.slt-user dd .add-btn-area a + a {
  margin-left: 0.2rem;
}

.useUserList .panel-list.line-1 > dd {
  overflow: hidden;
}

.useUserList .panel-list dd .bo-t {
  padding-top: 1rem;
  border-top: 1px solid #eee;
}

.useUserList .panel-list .write-area {
  display: inline-block;
  width: 100%;
  padding: 0.2rem 0 0.7rem;
}

.useUserList .panel-list .write-area .add-explain {
  margin-top: 0.5rem;
  font-size: 0.85rem;
  color: #999;
}

.useUserList .panel-list.line-1 dl {
  float: left;
  position: relative;
  width: calc(100% - 2.6rem);
  padding: 1rem 1.2rem 0.7rem;
}

.useUserList .panel-list.line-1 dl + dl {
  border-top: 1px solid #f6f6f8;
}

.useUserList .panel-list.line-1 dl dt {
  color: #777;
}

.useUserList .panel-list.line-1 dl.in-write-pop {
  padding-bottom: 1.2rem;
}

.useUserList .panel-list.line-1 dl.in-write-pop dt {
  padding-bottom: 0.5rem;
}

.useUserList .panel-list.line-1 dl.in-write-pop dd textarea {
  overflow: hidden;
  display: -webkit-box;
  padding-right: 2.6rem;
  word-wrap: break-word;
  text-overflow: ellipsis;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

.useUserList .panel-list.line-1 dl.in-write-pop dd {
  position: relative;
}

.useUserList .panel-list.line-1 dl.in-write-pop dd > i {
  position: absolute;
  top: 0;
  right: 0;
  width: 2.6rem;
  height: 4.2rem;
  line-height: 4.2rem;
  font-size: 1.4rem;
  color: #222;
  background-color: rgba(255, 248, 213, .3);
}

.useUserList-view .panel-list .write-area .period-area {
  width: calc(100% - 3.5rem);
  margin-top: -0.2rem;
}

.useUserList .panel-list .write-area dt,
.useUserList .panel-list .write-area dd {
  float: left;
}

.useUserList .panel-list .write-area dt {
  width: 5.8rem;
  color: #777;
}

.useUserList .panel-list .write-area.dd-wid-100 dt {
  display: none;
}

.useUserList .panel-list .write-area dd {
  width: calc(100% - 5.8rem);
}

.useUserList .panel-list .write-area.dd-wid-100 dd {
  overflow: auto;
  width: calc(100vw - 2.4rem);
}

.useUserList .panel-list .write-area .inp {
  width: 100%;
  box-sizing: border-box;
}

.useUserList .panel-list .write-area .period-area .inp {
  width: calc(100% - 1.9rem);
}

.useUserListdetail-view .panel-list.in-slt .slt {
  width: calc(100vw - 2.4rem);
}

.useUserList .panel-list .slt-noti {
  margin: 0.7rem 0.5rem 0;
  font-size: 0.85rem;
  color: #777;
}

.useUserList .panel-list .guide-in-link {
  margin: 0.7rem 0.5rem 0;
  font-size: 0.85rem;
  color: #ff8b00;
}

.useUserList .panel-list .guide-in-link a {
  text-decoration: underline;
}