@charset "UTF-8";
/* Type ⋮ con_com.scss · Author ⋮ Gahye Park · Create date ⋮ 2023. 12. 27 */
/* Type ⋮ animation.scss · Author ⋮ Gahye Park · Create date ⋮ 2023. 12. 27 */
/* Type ⋮ _mixin.scss · Author ⋮ Gahye Park · Create date ⋮ 2023. 12. 27 */
@import "/assets/fonts/pretendard/fonts.css";
@import "/assets/fonts/NotoSansKR/fonts.css";
@import "/assets/fonts/line-awesome/line-awesome.min.css";
@import "/assets/fonts/xeicon/xeicon.min.css";
@import "/assets/fonts/pretendard/fonts.css";
@import "/assets/fonts/NotoSansKR/fonts.css";
@import "/assets/fonts/line-awesome/line-awesome.min.css";
@import "/assets/fonts/xeicon/xeicon.min.css";
@font-face {
  font-family: "GongGothicMedium";
  src: url("https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_20-10@1.0/GongGothicMedium.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}
/*************************************
    # dashboard 공통 변수 
************************************/
/* font family */
/* font color */
input[class*=InpSel],
textarea[class*=InpSel],
[class*=InpSel] select {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

[class*=li-w]:after {
  content: "";
  display: block;
  clear: both;
}

/* responsive */
@keyframes bellRing {
  0%, 50% {
    transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
  }
  5%, 15%, 25%, 35%, 45% {
    transform: rotate(10deg);
    -webkit-transform: rotate(10deg);
    -moz-transform: rotate(10deg);
  }
  10%, 20%, 30%, 40% {
    transform: rotate(-10deg);
    -webkit-transform: rotate(-10deg);
    -moz-transform: rotate(-10deg);
  }
}
@keyframes rightArr {
  0%, 50% {
    transform: translateX(0);
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
  }
  5%, 15%, 25%, 35%, 45% {
    transform: translateX(3px);
    -webkit-transform: translateX(3px);
    -moz-transform: translateX(3px);
  }
  10%, 20%, 30%, 40% {
    transform: translateX(-3px);
    -webkit-transform: translateX(-3px);
    -moz-transform: translateX(-3px);
  }
}
@keyframes check {
  0% {
    height: 0;
    width: 0;
  }
  25% {
    height: 0;
    width: 5px;
  }
  50% {
    height: 10px;
    width: 5px;
  }
}
@keyframes check2 {
  0% {
    height: 0;
    width: 0;
  }
  25% {
    height: 0;
    width: 4px;
  }
  50% {
    height: 8px;
    width: 4px;
  }
}
@keyframes rotate {
  0% {
    transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
  }
  50% {
    transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
  }
  100% {
    transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
  }
}
@keyframes rotateY {
  0% {
    transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
  }
  50% {
    transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
  }
  100% {
    transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
  }
}
@keyframes rotateCenterY {
  0% {
    transform: translateX(-50%) rotateY(0deg);
    -webkit-transform: translateX(-50%) rotateY(0deg);
    -moz-transform: translateX(-50%) rotateY(0deg);
  }
  50% {
    transform: translateX(-50%) rotateY(360deg);
    -webkit-transform: translateX(-50%) rotateY(360deg);
    -moz-transform: translateX(-50%) rotateY(360deg);
  }
  100% {
    transform: translateX(-50%) rotateY(0deg);
    -webkit-transform: translateX(-50%) rotateY(0deg);
    -moz-transform: translateX(-50%) rotateY(0deg);
  }
}
@keyframes bounce {
  0%, 20%, 53%, 80%, to {
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
  }
  40%, 43% {
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    transform: translate3d(0, -30px, 0);
    -webkit-transform: translate3d(0, -30px, 0);
    -moz-transform: translate3d(0, -30px, 0);
  }
  70% {
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    transform: translate3d(0, -15px, 0);
    -webkit-transform: translate3d(0, -15px, 0);
    -moz-transform: translate3d(0, -15px, 0);
  }
  90% {
    transform: translate3d(0, -4px, 0);
    -webkit-transform: translate3d(0, -4px, 0);
    -moz-transform: translate3d(0, -4px, 0);
  }
}
.bounce {
  animation-name: bounce;
  transform-origin: center bottom;
}

@keyframes flash {
  0%, 50%, to {
    opacity: 1;
  }
  25%, 75% {
    opacity: 0;
  }
}
.flash {
  animation-name: flash;
}

@keyframes pulse {
  0% {
    transform: scaleX(1);
    -webkit-transform: scaleX(1);
    -moz-transform: scaleX(1);
  }
  50% {
    transform: scale3d(1.05, 1.05, 1.05);
    -webkit-transform: scale3d(1.05, 1.05, 1.05);
    -moz-transform: scale3d(1.05, 1.05, 1.05);
  }
  to {
    transform: scaleX(1);
    -webkit-transform: scaleX(1);
    -moz-transform: scaleX(1);
  }
}
.pulse {
  animation-name: pulse;
}

@keyframes rubberBand {
  0% {
    transform: scaleX(1);
    -webkit-transform: scaleX(1);
    -moz-transform: scaleX(1);
  }
  30% {
    transform: scale3d(1.25, 0.75, 1);
    -webkit-transform: scale3d(1.25, 0.75, 1);
    -moz-transform: scale3d(1.25, 0.75, 1);
  }
  40% {
    transform: scale3d(0.75, 1.25, 1);
    -webkit-transform: scale3d(0.75, 1.25, 1);
    -moz-transform: scale3d(0.75, 1.25, 1);
  }
  50% {
    transform: scale3d(1.15, 0.85, 1);
    -webkit-transform: scale3d(1.15, 0.85, 1);
    -moz-transform: scale3d(1.15, 0.85, 1);
  }
  65% {
    transform: scale3d(0.95, 1.05, 1);
    -webkit-transform: scale3d(0.95, 1.05, 1);
    -moz-transform: scale3d(0.95, 1.05, 1);
  }
  75% {
    transform: scale3d(1.05, 0.95, 1);
    -webkit-transform: scale3d(1.05, 0.95, 1);
    -moz-transform: scale3d(1.05, 0.95, 1);
  }
  to {
    transform: scaleX(1);
    -webkit-transform: scaleX(1);
    -moz-transform: scaleX(1);
  }
}
.rubberBand {
  animation-name: rubberBand;
}

@keyframes shake {
  0%, to {
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
  }
  10%, 30%, 50%, 70%, 90% {
    transform: translate3d(-10px, 0, 0);
    -webkit-transform: translate3d(-10px, 0, 0);
    -moz-transform: translate3d(-10px, 0, 0);
  }
  20%, 40%, 60%, 80% {
    transform: translate3d(10px, 0, 0);
    -webkit-transform: translate3d(10px, 0, 0);
    -moz-transform: translate3d(10px, 0, 0);
  }
}
.shake {
  animation-name: shake;
}

@keyframes headShake {
  0% {
    transform: translateX(0);
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
  }
  6.5% {
    transform: translateX(-6px) rotateY(-9deg);
    -webkit-transform: translateX(-6px) rotateY(-9deg);
    -moz-transform: translateX(-6px) rotateY(-9deg);
  }
  18.5% {
    transform: translateX(5px) rotateY(7deg);
    -webkit-transform: translateX(5px) rotateY(7deg);
    -moz-transform: translateX(5px) rotateY(7deg);
  }
  31.5% {
    transform: translateX(-3px) rotateY(-5deg);
    -webkit-transform: translateX(-3px) rotateY(-5deg);
    -moz-transform: translateX(-3px) rotateY(-5deg);
  }
  43.5% {
    transform: translateX(2px) rotateY(3deg);
    -webkit-transform: translateX(2px) rotateY(3deg);
    -moz-transform: translateX(2px) rotateY(3deg);
  }
  50% {
    transform: translateX(0);
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
  }
}
.headShake {
  animation-timing-function: ease-in-out;
  animation-name: headShake;
}

@keyframes swing {
  20% {
    transform: rotate(15deg);
    -webkit-transform: rotate(15deg);
    -moz-transform: rotate(15deg);
  }
  40% {
    transform: rotate(-10deg);
    -webkit-transform: rotate(-10deg);
    -moz-transform: rotate(-10deg);
  }
  60% {
    transform: rotate(5deg);
    -webkit-transform: rotate(5deg);
    -moz-transform: rotate(5deg);
  }
  80% {
    transform: rotate(-5deg);
    -webkit-transform: rotate(-5deg);
    -moz-transform: rotate(-5deg);
  }
  to {
    transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
  }
}
.swing {
  transform-origin: top center;
  animation-name: swing;
}

@keyframes tada {
  0% {
    transform: scaleX(1);
    -webkit-transform: scaleX(1);
    -moz-transform: scaleX(1);
  }
  10%, 20% {
    transform: scale3d(0.9, 0.9, 0.9) rotate(-3deg);
    -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate(-3deg);
    -moz-transform: scale3d(0.9, 0.9, 0.9) rotate(-3deg);
  }
  30%, 50%, 70%, 90% {
    transform: scale3d(1.1, 1.1, 1.1) rotate(3deg);
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate(3deg);
    -moz-transform: scale3d(1.1, 1.1, 1.1) rotate(3deg);
  }
  40%, 60%, 80% {
    transform: scale3d(1.1, 1.1, 1.1) rotate(-3deg);
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate(-3deg);
    -moz-transform: scale3d(1.1, 1.1, 1.1) rotate(-3deg);
  }
  to {
    transform: scaleX(1);
    -webkit-transform: scaleX(1);
    -moz-transform: scaleX(1);
  }
}
.tada {
  animation-name: tada;
}

@keyframes wobble {
  0% {
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
  }
  15% {
    transform: translate3d(-25%, 0, 0) rotate(-5deg);
    -webkit-transform: translate3d(-25%, 0, 0) rotate(-5deg);
    -moz-transform: translate3d(-25%, 0, 0) rotate(-5deg);
  }
  30% {
    transform: translate3d(20%, 0, 0) rotate(3deg);
    -webkit-transform: translate3d(20%, 0, 0) rotate(3deg);
    -moz-transform: translate3d(20%, 0, 0) rotate(3deg);
  }
  45% {
    transform: translate3d(-15%, 0, 0) rotate(-3deg);
    -webkit-transform: translate3d(-15%, 0, 0) rotate(-3deg);
    -moz-transform: translate3d(-15%, 0, 0) rotate(-3deg);
  }
  60% {
    transform: translate3d(10%, 0, 0) rotate(2deg);
    -webkit-transform: translate3d(10%, 0, 0) rotate(2deg);
    -moz-transform: translate3d(10%, 0, 0) rotate(2deg);
  }
  75% {
    transform: translate3d(-5%, 0, 0) rotate(-1deg);
    -webkit-transform: translate3d(-5%, 0, 0) rotate(-1deg);
    -moz-transform: translate3d(-5%, 0, 0) rotate(-1deg);
  }
  to {
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
  }
}
.wobble {
  animation-name: wobble;
}

@keyframes jello {
  0%, 11.1%, to {
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
  }
  22.2% {
    transform: skewX(-12.5deg) skewY(-12.5deg);
    -webkit-transform: skewX(-12.5deg) skewY(-12.5deg);
    -moz-transform: skewX(-12.5deg) skewY(-12.5deg);
  }
  33.3% {
    transform: skewX(6.25deg) skewY(6.25deg);
    -webkit-transform: skewX(6.25deg) skewY(6.25deg);
    -moz-transform: skewX(6.25deg) skewY(6.25deg);
  }
  44.4% {
    transform: skewX(-3.125deg) skewY(-3.125deg);
    -webkit-transform: skewX(-3.125deg) skewY(-3.125deg);
    -moz-transform: skewX(-3.125deg) skewY(-3.125deg);
  }
  55.5% {
    transform: skewX(1.5625deg) skewY(1.5625deg);
    -webkit-transform: skewX(1.5625deg) skewY(1.5625deg);
    -moz-transform: skewX(1.5625deg) skewY(1.5625deg);
  }
  66.6% {
    transform: skewX(-0.78125deg) skewY(-0.78125deg);
    -webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg);
    -moz-transform: skewX(-0.78125deg) skewY(-0.78125deg);
  }
  77.7% {
    transform: skewX(0.390625deg) skewY(0.390625deg);
    -webkit-transform: skewX(0.390625deg) skewY(0.390625deg);
    -moz-transform: skewX(0.390625deg) skewY(0.390625deg);
  }
  88.8% {
    transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
    -webkit-transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
    -moz-transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
  }
}
.jello {
  animation-name: jello;
  transform-origin: center;
}

@keyframes heartBeat {
  0% {
    transform: scale(1);
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
  }
  14% {
    transform: scale(1.3);
    -webkit-transform: scale(1.3);
    -moz-transform: scale(1.3);
  }
  28% {
    transform: scale(1);
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
  }
  42% {
    transform: scale(1.3);
    -webkit-transform: scale(1.3);
    -moz-transform: scale(1.3);
  }
  70% {
    transform: scale(1);
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
  }
}
.heartBeat {
  animation-name: heartBeat;
  animation-duration: 1.3s;
  animation-timing-function: ease-in-out;
}

@keyframes bounceIn {
  0%, 20%, 40%, 60%, 80%, to {
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  0% {
    opacity: 0;
    transform: scale3d(0.3, 0.3, 0.3);
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    -moz-transform: scale3d(0.3, 0.3, 0.3);
  }
  20% {
    transform: scale3d(1.1, 1.1, 1.1);
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    -moz-transform: scale3d(1.1, 1.1, 1.1);
  }
  40% {
    transform: scale3d(0.9, 0.9, 0.9);
    -webkit-transform: scale3d(0.9, 0.9, 0.9);
    -moz-transform: scale3d(0.9, 0.9, 0.9);
  }
  60% {
    opacity: 1;
    transform: scale3d(1.03, 1.03, 1.03);
    -webkit-transform: scale3d(1.03, 1.03, 1.03);
    -moz-transform: scale3d(1.03, 1.03, 1.03);
  }
  80% {
    transform: scale3d(0.97, 0.97, 0.97);
    -webkit-transform: scale3d(0.97, 0.97, 0.97);
    -moz-transform: scale3d(0.97, 0.97, 0.97);
  }
  to {
    opacity: 1;
    transform: scaleX(1);
    -webkit-transform: scaleX(1);
    -moz-transform: scaleX(1);
  }
}
.bounceIn {
  animation-duration: 0.75s;
  animation-name: bounceIn;
}

@keyframes bounceInDown {
  0%, 60%, 75%, 90%, to {
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  0% {
    opacity: 0;
    transform: translate3d(0, -3000px, 0);
    -webkit-transform: translate3d(0, -3000px, 0);
    -moz-transform: translate3d(0, -3000px, 0);
  }
  60% {
    opacity: 1;
    transform: translate3d(0, 25px, 0);
    -webkit-transform: translate3d(0, 25px, 0);
    -moz-transform: translate3d(0, 25px, 0);
  }
  75% {
    transform: translate3d(0, -10px, 0);
    -webkit-transform: translate3d(0, -10px, 0);
    -moz-transform: translate3d(0, -10px, 0);
  }
  90% {
    transform: translate3d(0, 5px, 0);
    -webkit-transform: translate3d(0, 5px, 0);
    -moz-transform: translate3d(0, 5px, 0);
  }
  to {
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
  }
}
.bounceInDown {
  animation-name: bounceInDown;
}

@keyframes bounceInLeft {
  0%, 60%, 75%, 90%, to {
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  0% {
    opacity: 0;
    transform: translate3d(-3000px, 0, 0);
    -webkit-transform: translate3d(-3000px, 0, 0);
    -moz-transform: translate3d(-3000px, 0, 0);
  }
  60% {
    opacity: 1;
    transform: translate3d(25px, 0, 0);
    -webkit-transform: translate3d(25px, 0, 0);
    -moz-transform: translate3d(25px, 0, 0);
  }
  75% {
    transform: translate3d(-10px, 0, 0);
    -webkit-transform: translate3d(-10px, 0, 0);
    -moz-transform: translate3d(-10px, 0, 0);
  }
  90% {
    transform: translate3d(5px, 0, 0);
    -webkit-transform: translate3d(5px, 0, 0);
    -moz-transform: translate3d(5px, 0, 0);
  }
  to {
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
  }
}
.bounceInLeft {
  animation-name: bounceInLeft;
}

@keyframes bounceInRight {
  0%, 60%, 75%, 90%, to {
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  0% {
    opacity: 0;
    transform: translate3d(3000px, 0, 0);
    -webkit-transform: translate3d(3000px, 0, 0);
    -moz-transform: translate3d(3000px, 0, 0);
  }
  60% {
    opacity: 1;
    transform: translate3d(-25px, 0, 0);
    -webkit-transform: translate3d(-25px, 0, 0);
    -moz-transform: translate3d(-25px, 0, 0);
  }
  75% {
    transform: translate3d(10px, 0, 0);
    -webkit-transform: translate3d(10px, 0, 0);
    -moz-transform: translate3d(10px, 0, 0);
  }
  90% {
    transform: translate3d(-5px, 0, 0);
    -webkit-transform: translate3d(-5px, 0, 0);
    -moz-transform: translate3d(-5px, 0, 0);
  }
  to {
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
  }
}
.bounceInRight {
  animation-name: bounceInRight;
}

@keyframes bounceInUp {
  0%, 60%, 75%, 90%, to {
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  0% {
    opacity: 0;
    transform: translate3d(0, 3000px, 0);
    -webkit-transform: translate3d(0, 3000px, 0);
    -moz-transform: translate3d(0, 3000px, 0);
  }
  60% {
    opacity: 1;
    transform: translate3d(0, -20px, 0);
    -webkit-transform: translate3d(0, -20px, 0);
    -moz-transform: translate3d(0, -20px, 0);
  }
  75% {
    transform: translate3d(0, 10px, 0);
    -webkit-transform: translate3d(0, 10px, 0);
    -moz-transform: translate3d(0, 10px, 0);
  }
  90% {
    transform: translate3d(0, -5px, 0);
    -webkit-transform: translate3d(0, -5px, 0);
    -moz-transform: translate3d(0, -5px, 0);
  }
  to {
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
  }
}
.bounceInUp {
  animation-name: bounceInUp;
}

@keyframes bounceOut {
  20% {
    transform: scale3d(0.9, 0.9, 0.9);
    -webkit-transform: scale3d(0.9, 0.9, 0.9);
    -moz-transform: scale3d(0.9, 0.9, 0.9);
  }
  50%, 55% {
    opacity: 1;
    transform: scale3d(1.1, 1.1, 1.1);
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    -moz-transform: scale3d(1.1, 1.1, 1.1);
  }
  to {
    opacity: 0;
    transform: scale3d(0.3, 0.3, 0.3);
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    -moz-transform: scale3d(0.3, 0.3, 0.3);
  }
}
.bounceOut {
  animation-duration: 0.75s;
  animation-name: bounceOut;
}

@keyframes bounceOutDown {
  20% {
    transform: translate3d(0, 10px, 0);
    -webkit-transform: translate3d(0, 10px, 0);
    -moz-transform: translate3d(0, 10px, 0);
  }
  40%, 45% {
    opacity: 1;
    transform: translate3d(0, -20px, 0);
    -webkit-transform: translate3d(0, -20px, 0);
    -moz-transform: translate3d(0, -20px, 0);
  }
  to {
    opacity: 0;
    transform: translate3d(0, 2000px, 0);
    -webkit-transform: translate3d(0, 2000px, 0);
    -moz-transform: translate3d(0, 2000px, 0);
  }
}
.bounceOutDown {
  animation-name: bounceOutDown;
}

@keyframes bounceOutLeft {
  20% {
    opacity: 1;
    transform: translate3d(20px, 0, 0);
    -webkit-transform: translate3d(20px, 0, 0);
    -moz-transform: translate3d(20px, 0, 0);
  }
  to {
    opacity: 0;
    transform: translate3d(-2000px, 0, 0);
    -webkit-transform: translate3d(-2000px, 0, 0);
    -moz-transform: translate3d(-2000px, 0, 0);
  }
}
.bounceOutLeft {
  animation-name: bounceOutLeft;
}

@keyframes bounceOutRight {
  20% {
    opacity: 1;
    transform: translate3d(-20px, 0, 0);
    -webkit-transform: translate3d(-20px, 0, 0);
    -moz-transform: translate3d(-20px, 0, 0);
  }
  to {
    opacity: 0;
    transform: translate3d(2000px, 0, 0);
    -webkit-transform: translate3d(2000px, 0, 0);
    -moz-transform: translate3d(2000px, 0, 0);
  }
}
.bounceOutRight {
  animation-name: bounceOutRight;
}

@keyframes bounceOutUp {
  20% {
    transform: translate3d(0, -10px, 0);
    -webkit-transform: translate3d(0, -10px, 0);
    -moz-transform: translate3d(0, -10px, 0);
  }
  40%, 45% {
    opacity: 1;
    transform: translate3d(0, 20px, 0);
    -webkit-transform: translate3d(0, 20px, 0);
    -moz-transform: translate3d(0, 20px, 0);
  }
  to {
    opacity: 0;
    transform: translate3d(0, -2000px, 0);
    -webkit-transform: translate3d(0, -2000px, 0);
    -moz-transform: translate3d(0, -2000px, 0);
  }
}
.bounceOutUp {
  animation-name: bounceOutUp;
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.fadeIn {
  animation-name: fadeIn;
}

@keyframes fadeInDown {
  0% {
    opacity: 0;
    transform: translate3d(0, -100%, 0);
    -webkit-transform: translate3d(0, -100%, 0);
    -moz-transform: translate3d(0, -100%, 0);
  }
  to {
    opacity: 1;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
  }
}
.fadeInDown {
  animation-name: fadeInDown;
}

@keyframes fadeInDownBig {
  0% {
    opacity: 0;
    transform: translate3d(0, -2000px, 0);
    -webkit-transform: translate3d(0, -2000px, 0);
    -moz-transform: translate3d(0, -2000px, 0);
  }
  to {
    opacity: 1;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
  }
}
.fadeInDownBig {
  animation-name: fadeInDownBig;
}

@keyframes fadeInLeft {
  0% {
    opacity: 0;
    transform: translate3d(-100%, 0, 0);
    -webkit-transform: translate3d(-100%, 0, 0);
    -moz-transform: translate3d(-100%, 0, 0);
  }
  to {
    opacity: 1;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
  }
}
.fadeInLeft {
  animation-name: fadeInLeft;
}

@keyframes fadeInLeftBig {
  0% {
    opacity: 0;
    transform: translate3d(-2000px, 0, 0);
    -webkit-transform: translate3d(-2000px, 0, 0);
    -moz-transform: translate3d(-2000px, 0, 0);
  }
  to {
    opacity: 1;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
  }
}
.fadeInLeftBig {
  animation-name: fadeInLeftBig;
}

@keyframes fadeInRight {
  0% {
    opacity: 0;
    transform: translate3d(100%, 0, 0);
    -webkit-transform: translate3d(100%, 0, 0);
    -moz-transform: translate3d(100%, 0, 0);
  }
  to {
    opacity: 1;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
  }
}
.fadeInRight {
  animation-name: fadeInRight;
}

@keyframes fadeInRightBig {
  0% {
    opacity: 0;
    transform: translate3d(2000px, 0, 0);
    -webkit-transform: translate3d(2000px, 0, 0);
    -moz-transform: translate3d(2000px, 0, 0);
  }
  to {
    opacity: 1;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
  }
}
.fadeInRightBig {
  animation-name: fadeInRightBig;
}

@keyframes fadeInUp {
  0% {
    opacity: 0;
    transform: translate3d(0, 100%, 0);
    -webkit-transform: translate3d(0, 100%, 0);
    -moz-transform: translate3d(0, 100%, 0);
  }
  to {
    opacity: 1;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
  }
}
.fadeInUp {
  animation-name: fadeInUp;
}

@keyframes fadeInUpBig {
  0% {
    opacity: 0;
    transform: translate3d(0, 2000px, 0);
    -webkit-transform: translate3d(0, 2000px, 0);
    -moz-transform: translate3d(0, 2000px, 0);
  }
  to {
    opacity: 1;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
  }
}
.fadeInUpBig {
  animation-name: fadeInUpBig;
}

@keyframes fadeOut {
  0% {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
.fadeOut {
  animation-name: fadeOut;
}

@keyframes fadeOutDown {
  0% {
    opacity: 1;
  }
  to {
    opacity: 0;
    transform: translate3d(0, 100%, 0);
    -webkit-transform: translate3d(0, 100%, 0);
    -moz-transform: translate3d(0, 100%, 0);
  }
}
.fadeOutDown {
  animation-name: fadeOutDown;
}

@keyframes fadeOutDownBig {
  0% {
    opacity: 1;
  }
  to {
    opacity: 0;
    transform: translate3d(0, 2000px, 0);
    -webkit-transform: translate3d(0, 2000px, 0);
    -moz-transform: translate3d(0, 2000px, 0);
  }
}
.fadeOutDownBig {
  animation-name: fadeOutDownBig;
}

@keyframes fadeOutLeft {
  0% {
    opacity: 1;
  }
  to {
    opacity: 0;
    transform: translate3d(-100%, 0, 0);
    -webkit-transform: translate3d(-100%, 0, 0);
    -moz-transform: translate3d(-100%, 0, 0);
  }
}
.fadeOutLeft {
  animation-name: fadeOutLeft;
}

@keyframes fadeOutLeftBig {
  0% {
    opacity: 1;
  }
  to {
    opacity: 0;
    transform: translate3d(-2000px, 0, 0);
    -webkit-transform: translate3d(-2000px, 0, 0);
    -moz-transform: translate3d(-2000px, 0, 0);
  }
}
.fadeOutLeftBig {
  animation-name: fadeOutLeftBig;
}

@keyframes fadeOutRight {
  0% {
    opacity: 1;
  }
  to {
    opacity: 0;
    transform: translate3d(100%, 0, 0);
    -webkit-transform: translate3d(100%, 0, 0);
    -moz-transform: translate3d(100%, 0, 0);
  }
}
.fadeOutRight {
  animation-name: fadeOutRight;
}

@keyframes fadeOutRightBig {
  0% {
    opacity: 1;
  }
  to {
    opacity: 0;
    transform: translate3d(2000px, 0, 0);
    -webkit-transform: translate3d(2000px, 0, 0);
    -moz-transform: translate3d(2000px, 0, 0);
  }
}
.fadeOutRightBig {
  animation-name: fadeOutRightBig;
}

@keyframes fadeOutUp {
  0% {
    opacity: 1;
  }
  to {
    opacity: 0;
    transform: translate3d(0, -100%, 0);
    -webkit-transform: translate3d(0, -100%, 0);
    -moz-transform: translate3d(0, -100%, 0);
  }
}
.fadeOutUp {
  animation-name: fadeOutUp;
}

@keyframes fadeOutUpBig {
  0% {
    opacity: 1;
  }
  to {
    opacity: 0;
    transform: translate3d(0, -2000px, 0);
    -webkit-transform: translate3d(0, -2000px, 0);
    -moz-transform: translate3d(0, -2000px, 0);
  }
}
.fadeOutUpBig {
  animation-name: fadeOutUpBig;
}

@keyframes flip {
  0% {
    transform: perspective(400px) scaleX(1) translateZ(0) rotateY(-1turn);
    -webkit-transform: perspective(400px) scaleX(1) translateZ(0) rotateY(-1turn);
    -moz-transform: perspective(400px) scaleX(1) translateZ(0) rotateY(-1turn);
    animation-timing-function: ease-out;
  }
  40% {
    transform: perspective(400px) scaleX(1) translateZ(150px) rotateY(-190deg);
    -webkit-transform: perspective(400px) scaleX(1) translateZ(150px) rotateY(-190deg);
    -moz-transform: perspective(400px) scaleX(1) translateZ(150px) rotateY(-190deg);
    animation-timing-function: ease-out;
  }
  50% {
    transform: perspective(400px) scaleX(1) translateZ(150px) rotateY(-170deg);
    -webkit-transform: perspective(400px) scaleX(1) translateZ(150px) rotateY(-170deg);
    -moz-transform: perspective(400px) scaleX(1) translateZ(150px) rotateY(-170deg);
    animation-timing-function: ease-in;
  }
  80% {
    transform: perspective(400px) scale3d(0.95, 0.95, 0.95) translateZ(0) rotateY(0deg);
    -webkit-transform: perspective(400px) scale3d(0.95, 0.95, 0.95) translateZ(0) rotateY(0deg);
    -moz-transform: perspective(400px) scale3d(0.95, 0.95, 0.95) translateZ(0) rotateY(0deg);
    animation-timing-function: ease-in;
  }
  to {
    transform: perspective(400px) scaleX(1) translateZ(0) rotateY(0deg);
    -webkit-transform: perspective(400px) scaleX(1) translateZ(0) rotateY(0deg);
    -moz-transform: perspective(400px) scaleX(1) translateZ(0) rotateY(0deg);
    animation-timing-function: ease-in;
  }
}
.animated.flip {
  backface-visibility: visible;
  animation-name: flip;
}

@keyframes flipInX {
  0% {
    transform: perspective(400px) rotateX(90deg);
    -webkit-transform: perspective(400px) rotateX(90deg);
    -moz-transform: perspective(400px) rotateX(90deg);
    animation-timing-function: ease-in;
    opacity: 0;
  }
  40% {
    transform: perspective(400px) rotateX(-20deg);
    -webkit-transform: perspective(400px) rotateX(-20deg);
    -moz-transform: perspective(400px) rotateX(-20deg);
    animation-timing-function: ease-in;
  }
  60% {
    transform: perspective(400px) rotateX(10deg);
    -webkit-transform: perspective(400px) rotateX(10deg);
    -moz-transform: perspective(400px) rotateX(10deg);
    opacity: 1;
  }
  80% {
    transform: perspective(400px) rotateX(-5deg);
    -webkit-transform: perspective(400px) rotateX(-5deg);
    -moz-transform: perspective(400px) rotateX(-5deg);
  }
  to {
    transform: perspective(400px);
    -webkit-transform: perspective(400px);
    -moz-transform: perspective(400px);
  }
}
.flipInX {
  backface-visibility: visible !important;
  animation-name: flipInX;
}

@keyframes flipInY {
  0% {
    transform: perspective(400px) rotateY(90deg);
    -webkit-transform: perspective(400px) rotateY(90deg);
    -moz-transform: perspective(400px) rotateY(90deg);
    animation-timing-function: ease-in;
    opacity: 0;
  }
  40% {
    transform: perspective(400px) rotateY(-20deg);
    -webkit-transform: perspective(400px) rotateY(-20deg);
    -moz-transform: perspective(400px) rotateY(-20deg);
    animation-timing-function: ease-in;
  }
  60% {
    transform: perspective(400px) rotateY(10deg);
    -webkit-transform: perspective(400px) rotateY(10deg);
    -moz-transform: perspective(400px) rotateY(10deg);
    opacity: 1;
  }
  80% {
    transform: perspective(400px) rotateY(-5deg);
    -webkit-transform: perspective(400px) rotateY(-5deg);
    -moz-transform: perspective(400px) rotateY(-5deg);
  }
  to {
    transform: perspective(400px);
    -webkit-transform: perspective(400px);
    -moz-transform: perspective(400px);
  }
}
.flipInY {
  backface-visibility: visible !important;
  animation-name: flipInY;
}

@keyframes flipOutX {
  0% {
    transform: perspective(400px);
    -webkit-transform: perspective(400px);
    -moz-transform: perspective(400px);
  }
  30% {
    transform: perspective(400px) rotateX(-20deg);
    -webkit-transform: perspective(400px) rotateX(-20deg);
    -moz-transform: perspective(400px) rotateX(-20deg);
    opacity: 1;
  }
  to {
    transform: perspective(400px) rotateX(90deg);
    -webkit-transform: perspective(400px) rotateX(90deg);
    -moz-transform: perspective(400px) rotateX(90deg);
    opacity: 0;
  }
}
.flipOutX {
  animation-duration: 0.75s;
  animation-name: flipOutX;
  backface-visibility: visible !important;
}

@keyframes flipOutY {
  0% {
    transform: perspective(400px);
    -webkit-transform: perspective(400px);
    -moz-transform: perspective(400px);
  }
  30% {
    transform: perspective(400px) rotateY(-15deg);
    -webkit-transform: perspective(400px) rotateY(-15deg);
    -moz-transform: perspective(400px) rotateY(-15deg);
    opacity: 1;
  }
  to {
    transform: perspective(400px) rotateY(90deg);
    -webkit-transform: perspective(400px) rotateY(90deg);
    -moz-transform: perspective(400px) rotateY(90deg);
    opacity: 0;
  }
}
.flipOutY {
  animation-duration: 0.75s;
  backface-visibility: visible !important;
  animation-name: flipOutY;
}

@keyframes lightSpeedIn {
  0% {
    transform: translate3d(100%, 0, 0) skewX(-30deg);
    -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg);
    -moz-transform: translate3d(100%, 0, 0) skewX(-30deg);
    opacity: 0;
  }
  60% {
    transform: skewX(20deg);
    -webkit-transform: skewX(20deg);
    -moz-transform: skewX(20deg);
    opacity: 1;
  }
  80% {
    transform: skewX(-5deg);
    -webkit-transform: skewX(-5deg);
    -moz-transform: skewX(-5deg);
  }
  to {
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
  }
}
.lightSpeedIn {
  animation-name: lightSpeedIn;
  animation-timing-function: ease-out;
}

@keyframes lightSpeedOut {
  0% {
    opacity: 1;
  }
  to {
    transform: translate3d(100%, 0, 0) skewX(30deg);
    -webkit-transform: translate3d(100%, 0, 0) skewX(30deg);
    -moz-transform: translate3d(100%, 0, 0) skewX(30deg);
    opacity: 0;
  }
}
.lightSpeedOut {
  animation-name: lightSpeedOut;
  animation-timing-function: ease-in;
}

@keyframes rotateIn {
  0% {
    transform-origin: center;
    transform: rotate(-200deg);
    -webkit-transform: rotate(-200deg);
    -moz-transform: rotate(-200deg);
    opacity: 0;
  }
  to {
    transform-origin: center;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    opacity: 1;
  }
}
.rotateIn {
  animation-name: rotateIn;
}

@keyframes rotateInDownLeft {
  0% {
    transform-origin: left bottom;
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    opacity: 0;
  }
  to {
    transform-origin: left bottom;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    opacity: 1;
  }
}
.rotateInDownLeft {
  animation-name: rotateInDownLeft;
}

@keyframes rotateInDownRight {
  0% {
    transform-origin: right bottom;
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    opacity: 0;
  }
  to {
    transform-origin: right bottom;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    opacity: 1;
  }
}
.rotateInDownRight {
  animation-name: rotateInDownRight;
}

@keyframes rotateInUpLeft {
  0% {
    transform-origin: left bottom;
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    opacity: 0;
  }
  to {
    transform-origin: left bottom;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    opacity: 1;
  }
}
.rotateInUpLeft {
  animation-name: rotateInUpLeft;
}

@keyframes rotateInUpRight {
  0% {
    transform-origin: right bottom;
    transform: rotate(-90deg);
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    opacity: 0;
  }
  to {
    transform-origin: right bottom;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    opacity: 1;
  }
}
.rotateInUpRight {
  animation-name: rotateInUpRight;
}

@keyframes rotateOut {
  0% {
    transform-origin: center;
    opacity: 1;
  }
  to {
    transform-origin: center;
    transform: rotate(200deg);
    -webkit-transform: rotate(200deg);
    -moz-transform: rotate(200deg);
    opacity: 0;
  }
}
.rotateOut {
  animation-name: rotateOut;
}

@keyframes rotateOutDownLeft {
  0% {
    transform-origin: left bottom;
    opacity: 1;
  }
  to {
    transform-origin: left bottom;
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    opacity: 0;
  }
}
.rotateOutDownLeft {
  animation-name: rotateOutDownLeft;
}

@keyframes rotateOutDownRight {
  0% {
    transform-origin: right bottom;
    opacity: 1;
  }
  to {
    transform-origin: right bottom;
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    opacity: 0;
  }
}
.rotateOutDownRight {
  animation-name: rotateOutDownRight;
}

@keyframes rotateOutUpLeft {
  0% {
    transform-origin: left bottom;
    opacity: 1;
  }
  to {
    transform-origin: left bottom;
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    opacity: 0;
  }
}
.rotateOutUpLeft {
  animation-name: rotateOutUpLeft;
}

@keyframes rotateOutUpRight {
  0% {
    transform-origin: right bottom;
    opacity: 1;
  }
  to {
    transform-origin: right bottom;
    transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    opacity: 0;
  }
}
.rotateOutUpRight {
  animation-name: rotateOutUpRight;
}

@keyframes hinge {
  0% {
    transform-origin: top left;
    animation-timing-function: ease-in-out;
  }
  20%, 60% {
    transform: rotate(80deg);
    -webkit-transform: rotate(80deg);
    -moz-transform: rotate(80deg);
    transform-origin: top left;
    animation-timing-function: ease-in-out;
  }
  40%, 80% {
    transform: rotate(60deg);
    -webkit-transform: rotate(60deg);
    -moz-transform: rotate(60deg);
    transform-origin: top left;
    animation-timing-function: ease-in-out;
    opacity: 1;
  }
  to {
    transform: translate3d(0, 700px, 0);
    -webkit-transform: translate3d(0, 700px, 0);
    -moz-transform: translate3d(0, 700px, 0);
    opacity: 0;
  }
}
.hinge {
  animation-duration: 2s;
  animation-name: hinge;
}

@keyframes jackInTheBox {
  0% {
    opacity: 0;
    transform: scale(0.1) rotate(30deg);
    -webkit-transform: scale(0.1) rotate(30deg);
    -moz-transform: scale(0.1) rotate(30deg);
    transform-origin: center bottom;
  }
  50% {
    transform: rotate(-10deg);
    -webkit-transform: rotate(-10deg);
    -moz-transform: rotate(-10deg);
  }
  70% {
    transform: rotate(3deg);
    -webkit-transform: rotate(3deg);
    -moz-transform: rotate(3deg);
  }
  to {
    opacity: 1;
    transform: scale(1);
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
  }
}
.jackInTheBox {
  animation-name: jackInTheBox;
}

@keyframes rollIn {
  0% {
    opacity: 0;
    transform: translate3d(-100%, 0, 0) rotate(-120deg);
    -webkit-transform: translate3d(-100%, 0, 0) rotate(-120deg);
    -moz-transform: translate3d(-100%, 0, 0) rotate(-120deg);
  }
  to {
    opacity: 1;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
  }
}
.rollIn {
  animation-name: rollIn;
}

@keyframes rollOut {
  0% {
    opacity: 1;
  }
  to {
    opacity: 0;
    transform: translate3d(100%, 0, 0) rotate(120deg);
    -webkit-transform: translate3d(100%, 0, 0) rotate(120deg);
    -moz-transform: translate3d(100%, 0, 0) rotate(120deg);
  }
}
.rollOut {
  animation-name: rollOut;
}

@keyframes zoomIn {
  0% {
    opacity: 0;
    transform: scale3d(0.3, 0.3, 0.3);
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    -moz-transform: scale3d(0.3, 0.3, 0.3);
  }
  50% {
    opacity: 1;
  }
}
.zoomIn {
  animation-name: zoomIn;
}

@keyframes zoomInDown {
  0% {
    opacity: 0;
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
    -moz-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }
  60% {
    opacity: 1;
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    -moz-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}
.zoomInDown {
  animation-name: zoomInDown;
}

@keyframes zoomInLeft {
  0% {
    opacity: 0;
    transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
    -moz-transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }
  60% {
    opacity: 1;
    transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
    -moz-transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}
.zoomInLeft {
  animation-name: zoomInLeft;
}

@keyframes zoomInRight {
  0% {
    opacity: 0;
    transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
    -moz-transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }
  60% {
    opacity: 1;
    transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
    -moz-transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}
.zoomInRight {
  animation-name: zoomInRight;
}

@keyframes zoomInUp {
  0% {
    opacity: 0;
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
    -moz-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }
  60% {
    opacity: 1;
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    -moz-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}
.zoomInUp {
  animation-name: zoomInUp;
}

@keyframes zoomOut {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
    transform: scale3d(0.3, 0.3, 0.3);
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    -moz-transform: scale3d(0.3, 0.3, 0.3);
  }
  to {
    opacity: 0;
  }
}
.zoomOut {
  animation-name: zoomOut;
}

@keyframes zoomOutDown {
  40% {
    opacity: 1;
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }
  to {
    opacity: 0;
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);
    -moz-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);
    transform-origin: center bottom;
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}
.zoomOutDown {
  animation-name: zoomOutDown;
}

@keyframes zoomOutLeft {
  40% {
    opacity: 1;
    transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0);
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0);
    -moz-transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0);
  }
  to {
    opacity: 0;
    transform: scale(0.1) translate3d(-2000px, 0, 0);
    -webkit-transform: scale(0.1) translate3d(-2000px, 0, 0);
    -moz-transform: scale(0.1) translate3d(-2000px, 0, 0);
    transform-origin: left center;
  }
}
.zoomOutLeft {
  animation-name: zoomOutLeft;
}

@keyframes zoomOutRight {
  40% {
    opacity: 1;
    transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0);
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0);
    -moz-transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0);
  }
  to {
    opacity: 0;
    transform: scale(0.1) translate3d(2000px, 0, 0);
    -webkit-transform: scale(0.1) translate3d(2000px, 0, 0);
    -moz-transform: scale(0.1) translate3d(2000px, 0, 0);
    transform-origin: right center;
  }
}
.zoomOutRight {
  animation-name: zoomOutRight;
}

@keyframes zoomOutUp {
  40% {
    opacity: 1;
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    -moz-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }
  to {
    opacity: 0;
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0);
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0);
    -moz-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0);
    transform-origin: center bottom;
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}
.zoomOutUp {
  animation-name: zoomOutUp;
}

@keyframes slideInDown {
  0% {
    transform: translate3d(0, -100%, 0);
    -webkit-transform: translate3d(0, -100%, 0);
    -moz-transform: translate3d(0, -100%, 0);
    visibility: visible;
  }
  to {
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
  }
}
.slideInDown {
  animation-name: slideInDown;
}

@keyframes slideInLeft {
  0% {
    transform: translate3d(-100%, 0, 0);
    -webkit-transform: translate3d(-100%, 0, 0);
    -moz-transform: translate3d(-100%, 0, 0);
    visibility: visible;
  }
  to {
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
  }
}
.slideInLeft {
  animation-name: slideInLeft;
}

@keyframes slideInRight {
  0% {
    transform: translate3d(100%, 0, 0);
    -webkit-transform: translate3d(100%, 0, 0);
    -moz-transform: translate3d(100%, 0, 0);
    visibility: visible;
  }
  to {
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
  }
}
.slideInRight {
  animation-name: slideInRight;
}

@keyframes slideInUp {
  0% {
    transform: translate3d(0, 100%, 0);
    -webkit-transform: translate3d(0, 100%, 0);
    -moz-transform: translate3d(0, 100%, 0);
    visibility: visible;
  }
  to {
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
  }
}
.slideInUp {
  animation-name: slideInUp;
}

@keyframes slideOutDown {
  0% {
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
  }
  to {
    visibility: hidden;
    transform: translate3d(0, 100%, 0);
    -webkit-transform: translate3d(0, 100%, 0);
    -moz-transform: translate3d(0, 100%, 0);
  }
}
.slideOutDown {
  animation-name: slideOutDown;
}

@keyframes slideOutLeft {
  0% {
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
  }
  to {
    visibility: hidden;
    transform: translate3d(-100%, 0, 0);
    -webkit-transform: translate3d(-100%, 0, 0);
    -moz-transform: translate3d(-100%, 0, 0);
  }
}
.slideOutLeft {
  animation-name: slideOutLeft;
}

@keyframes slideOutRight {
  0% {
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
  }
  to {
    visibility: hidden;
    transform: translate3d(100%, 0, 0);
    -webkit-transform: translate3d(100%, 0, 0);
    -moz-transform: translate3d(100%, 0, 0);
  }
}
.slideOutRight {
  animation-name: slideOutRight;
}

@keyframes slideOutUp {
  0% {
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
  }
  to {
    visibility: hidden;
    transform: translate3d(0, -100%, 0);
    -webkit-transform: translate3d(0, -100%, 0);
    -moz-transform: translate3d(0, -100%, 0);
  }
}
.slideOutUp {
  animation-name: slideOutUp;
}

.animated {
  animation-duration: 1s;
  animation-fill-mode: both;
}

.animated.infinite {
  animation-iteration-count: infinite;
}

.animated.delay-1s {
  animation-delay: 1s;
}

.animated.delay-2s {
  animation-delay: 2s;
}

.animated.delay-3s {
  animation-delay: 3s;
}

.animated.delay-4s {
  animation-delay: 4s;
}

.animated.delay-5s {
  animation-delay: 5s;
}

.animated.fast {
  animation-duration: 0.8s;
}

.animated.faster {
  animation-duration: 0.5s;
}

.animated.slow {
  animation-duration: 2s;
}

.animated.slower {
  animation-duration: 3s;
}

@media (prefers-reduced-motion: reduce), (print) {
  .animated {
    animation-duration: 1ms !important;
    transition-duration: 1ms !important;
    animation-iteration-count: 1 !important;
  }
}
/* Type ⋮ _mixin.scss · Author ⋮ Gahye Park · Create date ⋮ 2023. 12. 27 */
@font-face {
  font-family: "GongGothicMedium";
  src: url("https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_20-10@1.0/GongGothicMedium.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}
/*************************************
    # dashboard 공통 변수 
************************************/
/* font family */
/* font color */
input[class*=InpSel],
textarea[class*=InpSel],
[class*=InpSel] select {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

[class*=li-w]:after {
  content: "";
  display: block;
  clear: both;
}

/* responsive */
/*--📕 Style Guide Layout 📕--*/
.Guide_con .con_com_con {
  display: none;
}
.Guide_con .Guide-tit {
  display: block;
  margin-bottom: 0.75rem;
  color: #107F93;
  font-size: 1.4rem;
  font-weight: 700;
}
.Guide_con .Guide-tit:before {
  content: "🚩";
  display: inline-block;
  margin-right: 0.5rem;
}
.Guide_con .code-all-ctrl {
  display: inline-block;
  padding: 0.15rem 0.5rem;
  border-radius: 1rem;
  background: #107F93;
  font-size: 0.8rem;
  color: #fff;
  line-height: 1;
}
.Guide_con .code-all-ctrl > span {
  position: relative;
  display: inline-block;
}
.Guide_con .code-all-ctrl > span:after {
  display: inline-block;
  margin-left: 0.25rem;
  font-family: "Line Awesome Free";
  font-weight: 700;
  transition: all 0.3s;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  content: "\f106";
}
.Guide_con .code-all-ctrl.active > span:after {
  transform: rotate(180deg);
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
}
.Guide_con #con_com_box {
  padding-top: 1.5rem;
}
.Guide_con .Guide-titBox {
  margin: 1rem 0;
  padding: 0 1rem 1rem;
  border-bottom: 2px dotted #999;
  color: #000;
  text-align: center;
}
.Guide_con .Guide-titBox h3 {
  position: relative;
  margin-bottom: 0.5rem;
  padding-bottom: 0.5rem;
  font-size: 1.2rem;
  font-weight: 700;
}
.Guide_con .Guide-titBox h3:before {
  content: "";
  display: block;
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 3rem;
  height: 1px;
  margin-left: -1.5rem;
  background: #282c34;
  border-radius: 1px;
}
.Guide_con .Guide-titBox h3 .Guide-titBox p {
  margin-top: 0.25rem;
  font-size: 0.7rem;
}
.Guide_con .Guide-titBox2 {
  position: relative;
  margin: 1.5rem 0 2rem;
  border-top: 2px solid #107F93;
}
.Guide_con .Guide-titBox2 > a {
  display: block;
  position: absolute;
  top: -0.75rem;
  left: 0;
  padding: 0.15rem 0.5rem;
  border-radius: 1rem;
  background: #107F93;
  font-size: 0.8rem;
  color: #fff;
  line-height: 1;
}
.Guide_con .Guide-titBox2 > a > span {
  position: relative;
  display: inline-block;
}
.Guide_con .Guide-titBox2 > a > span:after {
  content: "\f106";
  display: inline-block;
  margin-left: 0.25rem;
  font-family: "Line Awesome Free";
  font-weight: 700;
  transition: all 0.3s;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
}
.Guide_con .Guide-titBox2.active > a span:after {
  transform: rotate(180deg);
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
}
.Guide_con .Guide-titBox2 .com-code {
  width: 100%;
  font-size: 0.6rem;
  -moz-tab-size: 2;
  tab-size: 2;
}
.Guide_con .Guide-titBox2 .com-code pre code.hljs {
  display: block;
  padding: 0 1rem;
  overflow-x: auto;
}
.Guide_con .Guide-titBox2 .com-code .hljs {
  display: block;
  padding: 0 1rem;
  background: #282c34;
  color: #abb2bf;
}
.Guide_con .Guide-titBox2 .com-code .hljs .hljs-comment, .Guide_con .Guide-titBox2 .com-code .hljs .hljs-quote {
  color: #5c6370;
  font-style: italic;
}
.Guide_con .Guide-titBox2 .com-code .hljs .hljs-doctag, .Guide_con .Guide-titBox2 .com-code .hljs .hljs-formula, .Guide_con .Guide-titBox2 .com-code .hljs .hljs-keyword {
  color: #c678dd;
}
.Guide_con .Guide-titBox2 .com-code .hljs .hljs-deletion, .Guide_con .Guide-titBox2 .com-code .hljs .hljs-name, .Guide_con .Guide-titBox2 .com-code .hljs .hljs-section, .Guide_con .Guide-titBox2 .com-code .hljs .hljs-selector-tag, .Guide_con .Guide-titBox2 .com-code .hljs .hljs-subst {
  color: #9a7174;
}
.Guide_con .Guide-titBox2 .com-code .hljs .hljs-literal {
  color: #56b6c2;
}
.Guide_con .Guide-titBox2 .com-code .hljs .hljs-addition, .Guide_con .Guide-titBox2 .com-code .hljs .hljs-attribute, .Guide_con .Guide-titBox2 .com-code .hljs .hljs-meta .Guide_con .Guide-titBox2 .com-code .hljs .hljs-string, .Guide_con .Guide-titBox2 .com-code .hljs .hljs-regexp, .Guide_con .Guide-titBox2 .com-code .hljs .hljs-string {
  color: #98c379;
}
.Guide_con .Guide-titBox2 .com-code .hljs .hljs-attr, .Guide_con .Guide-titBox2 .com-code .hljs .hljs-number, .Guide_con .Guide-titBox2 .com-code .hljs .hljs-selector-attr, .Guide_con .Guide-titBox2 .com-code .hljs .hljs-selector-class, .Guide_con .Guide-titBox2 .com-code .hljs .hljs-selector-pseudo, .Guide_con .Guide-titBox2 .com-code .hljs .hljs-template-variable, .Guide_con .Guide-titBox2 .com-code .hljs .hljs-type, .Guide_con .Guide-titBox2 .com-code .hljs .hljs-variable {
  color: #d19a66;
}
.Guide_con .Guide-titBox2 .com-code .hljs .hljs-bullet, .Guide_con .Guide-titBox2 .com-code .hljs .hljs-link, .Guide_con .Guide-titBox2 .com-code .hljs .hljs-meta, .Guide_con .Guide-titBox2 .com-code .hljs .hljs-selector-id, .Guide_con .Guide-titBox2 .com-code .hljs .hljs-symbol, .Guide_con .Guide-titBox2 .com-code .hljs .hljs-title {
  color: #61aeee;
}
.Guide_con .Guide-titBox2 .com-code .hljs .hljs-built_in, .Guide_con .Guide-titBox2 .com-code .hljs .hljs-class .Guide_con .Guide-titBox2 .com-code .hljs .hljs-title, .Guide_con .Guide-titBox2 .com-code .hljs .hljs-title.class_ {
  color: #e6c07b;
}
.Guide_con .Guide-titBox2 .com-code .hljs .hljs-emphasis {
  font-style: italic;
}
.Guide_con .Guide-titBox2 .com-code .hljs .hljs-strong {
  font-weight: 700;
}
.Guide_con .Guide-titBox2 .com-code .hljs .hljs-link {
  text-decoration: underline;
}
.Guide_con .tabs-under {
  margin-bottom: 1.5rem;
}
.Guide_con .tabs-under li a,
.Guide_con .tabs-under li#current a {
  background: transparent;
  border-radius: 0;
  border-bottom: 3px solid #dfdfdf;
  border-style: solid;
  font-size: 0.8rem;
  box-shadow: none;
}
.Guide_con .tabs-under li#current a {
  border-color: #107F93;
}

/*--🔸 tab + tab-info-box 🔸--*/
.tab-info-box {
  padding: 1rem;
  background: #fff;
}
.tab-info-box .tab-info-total {
  margin-bottom: 0.5rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid #ccc;
  overflow: hidden;
}
.tab-info-box .tab-info-total > em {
  margin-left: 0.25rem;
  color: #555;
  font-size: 0.7rem;
}
.tab-info-box .tab-info-total > em > strong {
  color: #107F93;
  font-weight: 700;
}
.tab-info-box .tab-info-cont {
  height: 31rem;
  overflow-y: scroll;
}
.tab-info-box .tab-info-cont > ul > li {
  padding: 0.75rem 1rem;
}
.tab-info-box .tab-info-cont > ul > li + li {
  border-top: 1px dotted #ccc;
}
.tab-info-box .tab-info-cont > ul > li .info-cont-tit {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.5rem;
}
.tab-info-box .tab-info-cont > ul > li .info-cont-tit > strong {
  color: #333;
  font-size: 0.8rem;
  font-weight: 600;
}
.tab-info-box .tab-info-cont > ul > li .info-cont-tit > a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.2rem;
  height: 1.2rem;
  border: 1px solid #ccc;
  color: #555;
  font-size: 0.8rem;
  text-align: center;
  transition: all 0.3s;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
}
.tab-info-box .tab-info-cont > ul > li .info-cont-tit > a.active {
  border-color: #107F93;
  color: #107F93;
}
.tab-info-box .tab-info-cont > ul > li ul > li {
  position: relative;
}
.tab-info-box .tab-info-cont > ul > li ul > li:before {
  content: "";
  display: inline-block;
  width: 0.25rem;
  height: 0.25rem;
  margin-right: 0.35rem;
  background: #107F93;
  border-radius: 50%;
  vertical-align: middle;
}
.tab-info-box .tab-info-cont::-webkit-scrollbar {
  width: 0.15rem;
}
.tab-info-box .tab-info-cont::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #7BC6AC 0.78%, #65A1D3 100.16%);
  border-radius: 0.5rem;
  background-clip: padding-box;
  border: 0;
}
.tab-info-box .tab-info-cont::-webkit-scrollbar-track {
  background: #E8E8E8;
  border-radius: 0.5rem;
}

/*--🔸 Common form 🔸--*/
label {
  margin-right: 0.5rem;
  font-size: 0.8rem;
  vertical-align: middle;
}
label input {
  margin-right: 0.25rem;
  vertical-align: middle;
}

input.w100 {
  width: 100%;
}
input.w80 {
  width: 80%;
}
input.w60 {
  width: 60%;
}
input.w50 {
  width: 50%;
}
input.w40 {
  width: 40%;
}
input.w30 {
  width: 30%;
}
input.w20 {
  width: 20%;
}
input.mx-w5 {
  width: 100%;
  max-width: 5rem;
}
input.mx-w10 {
  width: 100%;
  max-width: 10rem;
}
input.mx-w20 {
  width: 100%;
  max-width: 20rem;
}
input.mx-w30 {
  width: 100%;
  max-width: 30rem;
}
input.mx-w40 {
  width: 100%;
  max-width: 40rem;
}

/*--🔸 Width, Height(fix size) 🔸--*/
.W-100 {
  width: 100% !important;
}
.W-80 {
  width: 80% !important;
}
.W-60 {
  width: 60% !important;
}
.W-50 {
  width: 50% !important;
}
.W-40 {
  width: 40% !important;
}
.W-30 {
  width: 30% !important;
}
.W-20 {
  width: 20% !important;
}

.Hpx-100 {
  height: 5rem !important;
}
.Hpx-80 {
  height: 4rem !important;
}
.Hpx-60 {
  height: 3rem !important;
}
.Hpx-50 {
  height: 2.5rem !important;
}
.Hpx-40 {
  height: 2rem !important;
}
.Hpx-30 {
  height: 1.5rem !important;
}
.Hpx-20 {
  height: 1rem !important;
}

/* min-height / widht */
.min-h-1 {
  min-height: 19rem !important;
}
.min-h-2 {
  min-height: 32.4rem !important;
}
.min-h-3 {
  min-height: 40rem !important;
}
.min-h-4 {
  min-height: 27.5rem !important;
}

/*--🔸 Title(common) 🔸--*/
[class^=titT] {
  margin-bottom: 1rem;
}

[class^=tit]:first-of-type {
  margin-top: 0;
}

/*--🔸 Title(text type) 🔸--*/
.titT1 {
  color: #333;
  font-size: 1rem;
  font-weight: 600;
}
.titT2 {
  color: #333;
  font-size: 0.9rem;
  font-weight: 500;
}
.titT3 {
  color: #333;
  font-size: 1.2rem;
  font-weight: 600;
}
.titT5 {
  color: #fff;
  font-size: 1.3rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
}

/*--🔸 Title(until) 🔸--*/
.tit-util {
  display: inline-block;
  margin-left: 0.25rem;
  padding: 0.15rem 0.25rem;
  background: #107F93;
  border-radius: 0.7rem;
  color: #fff;
  font-size: 0.7rem;
  font-weight: 400;
  text-align: center;
  vertical-align: middle;
}

/*--🔸 Title(flex) 🔸--*/
.titFlex {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.titFlex [class^=srh-filter] {
  width: auto;
}
.titFlex [class^=titT] {
  margin-bottom: 0;
}

/*--🔸 Title(tit + btns) 🔸--*/
x .tit-btns-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 1rem 0 0.5rem;
}
x .tit-btns-wrap [class^=tit] {
  margin: 0;
  flex: 1;
}
x .tit-btns-wrap .btns {
  margin: 0;
}

.tit-btn-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.tit-btn-wrap [class^=tit] {
  margin: 0;
}
.tit-btn-wrap .btns {
  margin: 0;
}

.tit-table-wrap {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  border-top: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
  padding: 1rem 0;
  margin-bottom: 1rem;
}

.tit-table-wrap2 {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.tit-table-wrap2 [class^=tit] {
  margin: 0;
}

.tit-table-wrap3 {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  border-bottom: 1px solid #ccc;
  padding: 1rem 0;
}
.tit-table-wrap3 [class^=tit] {
  margin: 0;
}

/*--🔸 Title(info) 🔸--*/
.tit-info {
  position: relative;
  display: inline-block;
  color: #107F93;
  font-size: 1.1rem;
  z-index: 50;
}
.tit-info-cont {
  position: absolute;
  display: none;
  top: 0.5rem;
  left: 250%;
  width: 25rem;
  padding: 0.5rem 1rem;
  border: 1px solid #ccc;
  background: #fff;
  line-height: 1.5;
  font-weight: 400;
  text-align: left;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.05);
}
.tit-info-cont:before {
  content: "";
  position: absolute;
  top: 0;
  left: -1.5rem;
  width: 0;
  height: 0;
  border-bottom: 1.5rem solid transparent;
  border-right: 1.5rem solid #fff;
  z-index: 1;
}
.tit-info-cont:after {
  content: "";
  position: absolute;
  top: -0.05rem;
  left: -1.6rem;
  width: 0;
  height: 0;
  border-bottom: 1.6rem solid transparent;
  border-right: 1.6rem solid #ccc;
}
.tit-info.active .tit-info-cont {
  display: block;
}

/*--🔸 Badge(common) 🔸--*/
.badge1 {
  display: inline-flex;
  padding: 0.3rem 1rem;
  justify-content: center;
  align-items: center;
  border-radius: 2.5rem;
  background: #EEF2F5;
  height: 1.45rem;
}
.badge1 > span {
  color: #555;
  font-size: 0.7rem;
  font-weight: 400;
}

.badge2 {
  display: inline-flex;
  padding: 0 1rem;
  justify-content: center;
  align-items: center;
  border-radius: 2.5rem;
  border: 1px solid #BAC6CF;
  background: #fff;
}
.badge2 > span {
  color: #555;
  font-size: 0.7rem;
  font-weight: 400;
}

.badge3 {
  display: inline-flex;
  padding: 0.15rem 1rem;
  justify-content: center;
  align-items: center;
  border-radius: 2.5rem;
  background: #28424D;
}
.badge3 > span {
  color: #fff;
  font-size: 0.8rem;
  font-weight: 400;
}

.badge4 {
  display: inline-flex;
  padding: 0.15rem 1rem;
  justify-content: center;
  align-items: center;
  border-radius: 2.5rem;
  background: #434B57;
}
.badge4 > span {
  color: #fff;
  font-size: 0.8rem;
  font-weight: 400;
}

.badge5 {
  display: inline-flex;
  padding: 0.15rem 1rem;
  justify-content: center;
  align-items: center;
  border-radius: 2.5rem;
  border: 1px solid #525F70;
  background: rgba(255, 255, 255, 0.05);
}
.badge5 > span {
  color: #fff;
  font-size: 0.8rem;
  font-weight: 400;
}

.badge6 {
  display: inline-flex;
  padding: 0.15rem 1rem;
  justify-content: center;
  align-items: center;
  border-radius: 2.5rem;
  background: linear-gradient(90deg, #22859B 11%, #009A80 89%);
}
.badge6 > span {
  color: #fff;
  font-size: 0.8rem;
  font-weight: 400;
}

/*--🔸 Bullet(common) 🔸--*/
.bu-st1, .bu-st2, .bu-st3, .bu-st4 {
  position: relative;
  margin-top: 0.25rem;
  padding-left: 0.75rem;
  color: #666;
  font-size: 0.7rem;
}
.bu-st1:before, .bu-st2:before, .bu-st3:before, .bu-st4:before {
  content: "";
  position: absolute;
  top: 0.45rem;
  left: 0;
}
.bu-st1:before {
  top: 0.4rem;
  width: 0.25rem;
  height: 0.25rem;
  background: #009A80;
  border-radius: 50%;
}
.bu-st2:before {
  width: 3px;
  height: 3px;
  background: #9a9a9a;
}
.bu-st3:before {
  width: 6px;
  height: 2px;
  background: #888;
}
.bu-st4 {
  font-size: 0.7rem;
}
.bu-st4:before {
  width: 6px;
  height: 1px;
  background: #9a9a9a;
}

/*--🔸 List(Bullet type) 🔸--*/
.list-st1 > li, .list-st2 > li, .list-st3 > li, .list-st4 > li {
  position: relative;
  margin-top: 0.25rem;
  padding-left: 0.5rem;
  color: #333;
  font-size: 0.75rem;
}
.list-st1 > li:before, .list-st2 > li:before, .list-st3 > li:before, .list-st4 > li:before {
  content: "";
  position: absolute;
  top: 0.45rem;
  left: 0;
}
.list-st1 > li:before {
  top: 0.4rem;
  width: 0.25rem;
  height: 0.25rem;
  background: #009A80;
  border-radius: 50%;
}
.list-st2 > li:before {
  width: 3px;
  height: 3px;
  background: #9a9a9a;
}
.list-st3 > li:before {
  width: 6px;
  height: 2px;
  background: #888;
}
.list-st4 > li {
  font-size: 0.65rem;
}
.list-st4 > li:before {
  width: 6px;
  height: 1px;
  background: #9a9a9a;
}

li.bu-none:before {
  display: none !important;
}

/*--🔸 Bullet(text type) 🔸--*/
.list-stT1 > li, .list-stT2 > li {
  position: relative;
  margin-top: 0.25rem;
  color: #666;
  font-size: 0.7rem;
}
.list-stT2 {
  padding-left: 0.75rem;
}
.list-stT2 > li {
  font-style: 0.65rem;
}

/*--🔸 Bullet(fix width) 🔸--*/
[class*=li-w] {
  margin: -0.25rem;
}
[class*=li-w] > li {
  float: left;
  padding: 0.25rem 0.25rem 0.25rem 0.75rem;
}
[class*=li-w] li:before {
  top: 0.725rem;
}
[class*=li-w].li-w100 li {
  width: 100%;
  float: none;
}
[class*=li-w].li-w50 li {
  width: 50%;
}
[class*=li-w].li-w30 > li {
  width: 33%;
}
[class*=li-w].li-w25 > li {
  width: 25%;
}
[class*=li-w].li-w20 > li {
  width: 20%;
}

[class^=list-ol][class*=li-w] > li + li {
  margin-top: 0;
}
[class^=list-ol][class*=li-w] > li > span.num {
  top: 0.25rem;
}

/*--🔸 List(sequential list) 🔸--*/
.list-ol1 > li {
  position: relative;
  padding-left: 1.5rem;
  color: #666;
  font-size: 0.7rem;
}
.list-ol1 > li + li {
  margin-top: 0.5rem;
}
.list-ol1 > li > span.num {
  position: absolute;
  left: 0;
  top: 0;
  width: 1.25rem;
  height: 1.25rem;
  color: #107F93;
  font-size: 0.85rem;
  font-weight: 700;
  line-height: 1.25rem;
  text-align: center;
}

.list-ol2 > li {
  position: relative;
  padding-left: 1.5rem;
  color: #666;
  font-size: 0.7rem;
}
.list-ol2 > li + li {
  margin-top: 0.5rem;
}
.list-ol2 > li > em.num {
  position: absolute;
  top: 0.35rem;
  left: 0;
  width: 1.1rem;
  height: 1.1rem;
  border-radius: 50%;
  background: #107F93;
  color: #fff;
  text-align: center;
  font-weight: 600;
  font-size: 0.7rem;
  line-height: 1.1rem;
}
.list-ol2 > li > strong {
  display: inline-block;
  color: #262626;
  font-size: 1.1rem;
  font-weight: 600;
  vertical-align: middle;
}
.list-ol2 > li > span {
  display: block;
}

/*--🔸 Text(Font Family) 🔸--*/
.ff5 {
  font-family: "GongGothicMedium";
  font-weight: 500;
}

.ff3 {
  font-family: "Pretendard";
}

/*--🔸 Text(Font color) 🔸--*/
.pc--red, .pc--gray, .pc--blue, .pc--navy, .pc--org, .pc--black, .pc--green, .pc--yellow, .pc--white {
  font-size: 0.7rem;
  color: #666;
}
.pc-red {
  color: #F07A80 !important;
}
.pc-gray {
  color: #666 !important;
}
.pc-blue {
  color: #3B6CCA !important;
}
.pc-navy {
  color: #3e4e6f !important;
}
.pc-org {
  color: #ff4400 !important;
}
.pc-black {
  color: #000 !important;
}
.pc-green {
  color: #11cd1e !important;
}
.pc-yellow {
  color: #eb8809 !important;
}
.pc-white {
  color: #fff !important;
}

/*--🔸 Text(Text background) 🔸--*/
.bg-red, .bg-gray, .bg-blue, .bg-navy, .bg-org, .bg-black, .bg-green, .bg-yellow {
  padding: 0.1rem 0.5rem;
  color: #fff !important;
  font-size: 0.7rem;
}
.bg-red {
  background: #fa0026 !important;
}
.bg-gray {
  background: #666 !important;
}
.bg-blue {
  background: #3B6CCA !important;
}
.bg-navy {
  background: #3e4e6f !important;
}
.bg-org {
  background: #ff4400 !important;
}
.bg-black {
  background: #000 !important;
}
.bg-green {
  background: #11cd1e !important;
}
.bg-yellow {
  background: #eb8809 !important;
}

/*--🔸 Text(Font weight) 🔸--*/
.Tline-b {
  text-decoration: underline !important;
}
.Tline-bgB {
  -webkit-box-shadow: inset #e7e9ff 0 -0.5rem 0;
  box-shadow: inset #e7e9ff 0 -0.5rem 0;
}

.f-weightB {
  font-weight: bold !important;
}

.font-FR {
  font-weight: 400 !important;
}
.font-FM {
  font-weight: 600 !important;
}
.font-FB {
  font-weight: 700 !important;
}

/*--🔸 Text(Font size) 🔸--*/
.fs12 {
  font-size: 0.6rem !important;
}
.fs13 {
  font-size: 0.65rem !important;
}
.fs14 {
  font-size: 0.7rem !important;
}
.fs16 {
  font-size: 0.8rem !important;
}
.fs18 {
  font-size: 0.9rem !important;
}
.fs20 {
  font-size: 1rem !important;
}
.fs22 {
  font-size: 1.1rem !important;
}
.fs24 {
  font-size: 1.2rem !important;
}
.fs26 {
  font-size: 1.3rem !important;
}

/*--🔸 Text(link) 🔸--*/
a.bu-link, a.bu-linkL, a.bu-mail, a.bu-mailL, a.bu-down, a.bu-downL, a.bu-tel, a.bu-telL, a.bu-down {
  position: relative;
  display: inline-block;
  color: #1f4665;
  font-weight: 700;
}
a.bu-link:before, a.bu-linkL:before, a.bu-mail:before, a.bu-mailL:before, a.bu-down:before, a.bu-downL:before, a.bu-tel:before, a.bu-telL:before, a.bu-down:before {
  display: inline-block;
  padding-right: 0.15rem;
  font-size: 0.8rem;
  font-family: "Line Awesome Free";
}
a.bu-link:after, a.bu-linkL:after, a.bu-mail:after, a.bu-mailL:after, a.bu-down:after, a.bu-downL:after, a.bu-tel:after, a.bu-telL:after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: #1f4665;
}
a.bu-link:before, a.bu-linkL:before {
  content: "\f0c1";
}
a.bu-mail:before, a.bu-mailL:before {
  content: "\f0e0";
}
a.bu-down:before, a.bu-downL:before {
  content: "\f019";
}
a.bu-tel:before, a.bu-telL:before {
  content: "\f095";
}

.txt_p > [class^=bu-],
[class^=list_st] > li > [class^=bu-] {
  margin: 0 0.25rem;
}

/*--🔸 Text(주의/경고/말풍선) 🔸--*/
div + .bu-atte, div + .bu-wnrn, div + .bu-ment, table + .bu-atte, table + .bu-wnrn, table + .bu-ment, ul + .bu-atte, ul + .bu-wnrn, ul + .bu-ment {
  margin-top: 1rem;
}

.bu-atte {
  position: relative;
  margin-top: 0.25rem;
  color: #927575;
  font-size: 0.7rem;
  font-weight: 500;
}
.bu-atte:before {
  content: "※";
  display: inline-block;
  padding-right: 0.25rem;
  color: #927575;
  vertical-align: middle;
}

.bu-wnrn {
  margin-top: 0.25rem;
  color: #262626;
  font-size: 0.7rem;
  font-weight: 500;
}
.bu-wnrn:before {
  content: "\e9a6";
  display: inline-block;
  padding-right: 0.25rem;
  color: #107F93;
  font-family: "xeicon";
  vertical-align: middle;
}

.bu-ment {
  margin-top: 0.25rem;
  color: #262626;
  font-size: 0.7rem;
  font-weight: 500;
}
.bu-ment:before {
  content: "\ea1c";
  display: inline-block;
  padding-right: 0.25rem;
  color: #107F93;
  font-family: "xeicon";
  vertical-align: middle;
}

.bu-wnrn-line {
  margin-top: 0.25rem;
  color: #262626;
  font-size: 0.7rem;
}
.bu-wnrn-line:before {
  content: "\e9a7";
  display: inline-block;
  padding-right: 0.25rem;
  color: #000;
  font-family: "xeicon";
  vertical-align: middle;
}

.bu-ment-line {
  margin-top: 0.25rem;
  color: #262626;
  font-size: 0.7rem;
}
.bu-ment-line:before {
  content: "\ea1d";
  display: inline-block;
  padding-right: 0.25rem;
  color: #000;
  font-family: "xeicon";
  vertical-align: middle;
}

/*--🔸 Grid sort 🔸--*/
.grid-sort {
  overflow: hidden;
  margin-top: 1rem;
}
.grid-sort:after {
  content: "";
  display: block;
  clear: both;
}
.grid-sort .paging {
  padding-top: 0.5rem;
  float: left;
  color: #84878D;
  font-size: 0.7rem;
}
.grid-sort .paging strong {
  display: inline-block;
  margin-left: 0.25rem;
  color: #107F93;
  font-weight: 700;
}
.grid-sort .paging > span + span {
  display: inline-block;
  margin-left: 1rem;
}
.grid-sort .page-count {
  float: right;
}

/*--🔸 Table(default type) 🔸--*/
div[class*=tbl-st] {
  position: relative;
  width: 100%;
  margin-top: 0.25rem;
  background: #fff;
  /* Table scroll */
}
div[class*=tbl-st] table {
  position: relative;
  width: 100%;
  text-align: center;
  table-layout: auto;
  /* Add row */
  /*--🔸 Table(tree type) 🔸--*/
  /* hover */
}
div[class*=tbl-st] table th {
  padding: 0.5rem;
  color: #333;
  background: #EEF2F5;
  font-size: 0.7rem;
  font-weight: 600;
  line-height: 1.2;
  vertical-align: middle;
  white-space: nowrap;
}
div[class*=tbl-st] table td {
  position: relative;
  height: 2rem;
  padding: 0.25rem 0.5rem;
  border-bottom: 1px solid #e1e1e1;
  color: #333;
  font-size: 0.7rem;
  line-height: 1.2;
  vertical-align: middle;
}
div[class*=tbl-st] table td a:not([class^=btn-style]) {
  display: inline-block;
  font-weight: 700;
  vertical-align: middle;
}
div[class*=tbl-st] table td .num-down {
  color: #5CACEA;
  font-size: 1rem;
}
div[class*=tbl-st] table td [class^=bar-graph-] {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 1rem;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  text-align: right;
}
div[class*=tbl-st] table td [class^=bar-graph-] > em {
  display: inline-block;
  height: 100%;
  background: #5CACEA;
}
div[class*=tbl-st] table td .bar-graph-up {
  text-align: left;
}
div[class*=tbl-st] table td .bar-graph-up > em {
  background: #EA5C5C;
}
div[class*=tbl-st] table td em.up {
  color: #fe3c4e;
  font-weight: 700;
}
div[class*=tbl-st] table td em.up:after {
  content: "\e92f";
  display: inline-block;
  margin-left: 0.25rem;
  font-size: 0.75rem;
  font-family: "xeicon";
}
div[class*=tbl-st] table td em.down {
  color: #309bfa;
  font-weight: 700;
}
div[class*=tbl-st] table td em.down:after {
  content: "\e935";
  display: inline-block;
  margin-left: 0.25rem;
  font-size: 0.75rem;
  font-family: "xeicon";
}
div[class*=tbl-st] table thead th[scope=colgroup] {
  background: #EEF2F5;
  border-bottom: 0;
}
div[class*=tbl-st] table tbody th[scope=row] {
  background: #F3F8F7;
  color: #333;
  font-size: 0.8rem;
  font-weight: 700;
}
div[class*=tbl-st] table tfoot th[scope=row] {
  background: #F3F8F7;
  color: #107F93;
  font-weight: 700;
}
div[class*=tbl-st] table tfoot td {
  background: #F3F8F7;
  color: #107F93;
  font-weight: 700;
}
div[class*=tbl-st] table thead tr[class^=tbl-bg-] th {
  border-top: 1px solid #e1e1e1;
}
div[class*=tbl-st] table:first-of-type thead tr[class^=tbl-bg-] th {
  border-top: 2px solid #e1e1e1;
}
div[class*=tbl-st] table .add-row-wrap {
  background: #DBE4EB;
  border-bottom: 1px solid #ccc;
}
div[class*=tbl-st] table .add-row-wrap td {
  border-bottom: 0;
}
div[class*=tbl-st] table .add-row-wrap .add-row {
  display: flex;
  height: 2rem;
  background: #F5F5F5;
  border: 2px dashed #DCDCDC;
  border-radius: 0.25rem;
  text-align: center;
  justify-content: center;
  align-content: space-around;
  flex-wrap: wrap;
}
div[class*=tbl-st] table .add-row-wrap .add-row:before {
  content: "\f055";
  color: #333;
  font-family: "Line Awesome Free";
  font-size: 1.1rem;
  font-weight: 900;
  transition: all 0.3s;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
}
div[class*=tbl-st] table.treegrid tr.level1 td:nth-of-type(2) {
  padding-left: 1.9rem;
}
div[class*=tbl-st] table.treegrid tr.level2 td:nth-of-type(2) {
  padding-left: 3rem;
}
div[class*=tbl-st] table.treegrid tr.level3 td:nth-of-type(2) {
  padding-left: 4rem;
}
div[class*=tbl-st] table.treegrid td.chked {
  font-weight: 700;
}
div[class*=tbl-st] table.treegrid .toggle-feature {
  margin-right: 0.35rem;
  color: #333;
  font-size: 1rem;
  vertical-align: middle;
}
div[class*=tbl-st] table tr.click-hover {
  transition: all 0.3s;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
}
div[class*=tbl-st] table tr.click-hover:hover {
  background: #D3EAEA;
  font-weight: 500;
}
div[class*=tbl-st] table tr.click-hover:focus {
  background: #D3EAEA;
  font-weight: 500;
}
div[class*=tbl-st] table td.text-overflow {
  max-width: 6rem;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
div[class*=tbl-st] table [class^=btn-style] {
  white-space: nowrap;
}
div[class*=tbl-st] table.ac tr td {
  text-align: center;
}
div[class*=tbl-st] table.al tr td {
  text-align: left;
}
div[class*=tbl-st] table.ar tr td {
  text-align: right;
}
div[class*=tbl-st] [class^=list-st] > li {
  color: #333;
}
div[class*=tbl-st] .tbl-txt {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
}
div[class*=tbl-st] .tbl-flex {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}
div[class*=tbl-st].scroll-gr-y {
  overflow-y: auto;
  padding-right: 1rem;
}
div[class*=tbl-st].scroll-gr-y.ht1 {
  height: 19.2rem;
}
div[class*=tbl-st].scroll-gr-y.ht2 {
  height: 12.329rem;
}
div[class*=tbl-st].scroll-gr-y::-webkit-scrollbar {
  width: 0.5rem;
}
div[class*=tbl-st].scroll-gr-y::-webkit-scrollbar-thumb {
  border: 0;
  border-radius: 0.5rem;
  background: linear-gradient(90deg, #22859B 11%, #009A80 89%);
  background-clip: padding-box;
}
div[class*=tbl-st].scroll-gr-y::-webkit-scrollbar-track {
  border-radius: 0.5rem;
  background: rgba(238, 242, 245, 0.5);
}
div[class*=tbl-st].scroll-x {
  overflow-x: auto;
  padding-bottom: 1rem;
}
div[class*=tbl-st].scroll-x::-webkit-scrollbar {
  height: 0.5rem;
}
div[class*=tbl-st].scroll-x::-webkit-scrollbar-thumb {
  background-color: #22859B;
  border-radius: 2.5rem;
  border: 2px solid #D5DEE2;
  background-clip: padding-box;
}
div[class*=tbl-st].scroll-x::-webkit-scrollbar-track {
  background-color: #D5DEE2;
  border-radius: 2.5rem;
}
div[class*=tbl-st].scroll-x2 {
  overflow-x: scroll;
  padding-bottom: 1rem;
}
div[class*=tbl-st].scroll-x2 td {
  white-space: nowrap;
}
div[class*=tbl-st].scroll-x2::-webkit-scrollbar {
  height: 0.5rem;
}
div[class*=tbl-st].scroll-x2::-webkit-scrollbar-thumb {
  background-color: #22859B;
  border-radius: 2.5rem;
  border: 2px solid #D5DEE2;
  background-clip: padding-box;
}
div[class*=tbl-st].scroll-x2::-webkit-scrollbar-track {
  background-color: #D5DEE2;
  border-radius: 2.5rem;
}

/*--🔸 Table(vertical type) 🔸--*/
.tbl-st-row table th {
  border-right: 1px solid #e1e1e1;
}

/*--🔸 Table(four sided line type) 🔸--*/
div.tbl-st2 table {
  margin-left: 0 !important;
  border-left: 1px solid #d7d7d7;
  border-top: 2px solid #18766B;
}
div.tbl-st2 table th {
  border-bottom: 1px solid #d7d7d7;
  border-right: 1px solid #d7d7d7;
}
div.tbl-st2 table td {
  border-bottom: 1px solid #d7d7d7;
  border-right: 1px solid #d7d7d7;
  text-align: left;
}
div.tbl-st2 table thead th[scope=colgroup] {
  border-bottom: 1px solid #d7d7d7;
}
div.tbl-st2 table tfoot th {
  background: #f6f6f6;
  color: #107F93;
  font-weight: 700;
}
div.tbl-st2 table tfoot td {
  background: #f6f6f6;
  color: #107F93;
  font-weight: 700;
}

/*--🔸 Table(상단 단위 표기) 🔸--*/ /*  */
.tbl-utile {
  margin-bottom: 0.5rem;
  text-align: right;
  line-height: 1.2;
  font-size: 0.7rem;
}

/*--🔸 Table(tr, td background 색상) 🔸--*/
.tbl-bg- { /* 그린 */
  /* 블루 */
  /* 옐로우 */
  /* 레드 */
  /* 그린 */
  /* 그린 */
  /* 그린 텍스트 */
  /* 그린 텍스트 */
  /* 그레이 */
}
.tbl-bg-g, .tbl-bg-g th {
  color: #868686 !important;
  background-color: #F5F5F5 !important;
}
.tbl-bg-bl, .tbl-bg-bl th {
  color: #868686 !important;
  background-color: #dff6f8 !important;
}
.tbl-bg-ye, .tbl-bg-ye th {
  color: #868686 !important;
  background-color: #f5f0df !important;
}
.tbl-bg-re, .tbl-bg-re th {
  color: #868686 !important;
  background-color: #fceff0 !important;
}
.tbl-bg-gr, .tbl-bg-gr th {
  color: #fff !important;
  background-color: #18766B !important;
}
.tbl-bg-gr2, .tbl-bg-gr2 td {
  color: #fff !important;
  background-color: #18766B !important;
}
.tbl-bg-gr2 .bg-white, .tbl-bg-gr2 td .bg-white {
  color: #333 !important;
  background: #fff !important;
}
.tbl-bg-gr3, .tbl-bg-gr3 th td {
  color: #18766B !important;
  background-color: #EEF2F5 !important;
}
.tbl-bg-gr3, .tbl-bg-gr3 td {
  color: #18766B !important;
  background-color: #EEF2F5 !important;
}
.tbl-bg-gray, .tbl-bg-gray th {
  color: #777 !important;
  background-color: #F6F6F6 !important;
}

/*--🔸 Table(tr, td border 색상) 🔸--*/
.tbl- {
  /* 선 없음(테이블 좌, 우 선 없는 테이블 사용시 필요) */
}
.tbl-L {
  border: 1px solid #e1e1e1 !important;
}
.tbl-L-T {
  border-top: 1px solid #e1e1e1 !important;
}
.tbl-L-B {
  border-bottom: 1px solid #e1e1e1 !important;
}
.tbl-L-B2 {
  border-bottom: 1px solid #BAC6CF !important;
}
.tbl-L-L {
  border-left: 1px solid #e1e1e1 !important;
}
.tbl-L-R {
  border-right: 1px solid #e1e1e1 !important;
}
.tbl-Lb {
  border: 1px solid #000 !important;
}
.tbl-Lb-T {
  border-top: 1px solid #000 !important;
}
.tbl-Lb-B {
  border-bottom: 1px solid #000 !important;
}
.tbl-Lb-L {
  border-left: 1px solid #000 !important;
}
.tbl-Lb-R {
  border-right: 1px solid #000 !important;
}
.tbl-Lbl {
  border: 1px solid #107F93 !important;
}
.tbl-Lbl-T {
  border-top: 1px solid #107F93 !important;
}
.tbl-Lbl-B {
  border-bottom: 1px solid #107F93 !important;
}
.tbl-Lbl-L {
  border-left: 1px solid #107F93 !important;
}
.tbl-Lbl-R {
  border-right: 1px solid #107F93 !important;
}
.tbl-Lre {
  border: 1px solid #ff6363 !important;
}
.tbl-Lre-T {
  border-top: 1px solid #ff6363 !important;
}
.tbl-Lre-B {
  border-bottom: 1px solid #ff6363 !important;
}
.tbl-Lre-L {
  border-left: 1px solid #ff6363 !important;
}
.tbl-Lre-R {
  border-right: 1px solid #ff6363 !important;
}
.tbl-Lgr {
  border: 1px solid #099e5e !important;
}
.tbl-Lgr-T {
  border-top: 1px solid #099e5e !important;
}
.tbl-Lgr-B {
  border-bottom: 1px solid #099e5e !important;
}
.tbl-Lgr-L {
  border-left: 1px solid #099e5e !important;
}
.tbl-Lgr-R {
  border-right: 1px solid #099e5e !important;
}
.tbl-Lye {
  border: 1px solid #f9ba00 !important;
}
.tbl-Lye-T {
  border-top: 1px solid #f9ba00 !important;
}
.tbl-Lye-B {
  border-bottom: 1px solid #f9ba00 !important;
}
.tbl-Lye-L {
  border-left: 1px solid #f9ba00 !important;
}
.tbl-Lye-R {
  border-right: 1px solid #f9ba00 !important;
}
.tbl-LT-none {
  border-top: none !important;
}
.tbl-LB-none {
  border-bottom: none !important;
}
.tbl-LL-none {
  border-left: none !important;
}
.tbl-LR-none {
  border-right: none !important;
}

/*--🔸 Calendar Table(tr, td background 색상) 🔸--*/
#calendar .fc-toolbar {
  justify-content: end;
}
#calendar .fc-header-toolbar .fc-toolbar-title {
  margin-right: 0.5rem;
  color: #262626;
  font-weight: 600;
  font-size: 1.1rem;
}
#calendar .fc-button-group {
  margin-top: 0.2rem;
}
#calendar .fc-button-group > .fc-button {
  display: block;
  width: 1.7rem;
  height: 1.2rem;
  padding: 0;
  border: 1px solid #E1E1E1;
  background: transparent;
  border-radius: 0.15rem;
  font-size: 0.7rem;
  text-align: center;
  transition: all 0.3s;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
}
#calendar .fc-button-group > .fc-button > span {
  display: none;
}
#calendar .fc-button-group > .fc-button:before {
  content: "\f104";
  display: inline-block;
  color: #A2A2A2;
  font-family: "Line Awesome Free";
  font-weight: 700;
  font-size: 0.7rem;
  line-height: calc(1.2rem - 2px);
  transition: all 0.3s;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
}
#calendar .fc-button-group > .fc-button + .fc-button:before {
  content: "\f105";
}
#calendar .fc-view > table > thead > tr > th,
#calendar .fc-view > table > tbody > tr > th {
  color: #a2a2a2;
  font-size: 0.7rem;
  font-weight: 400;
  line-height: 1.2;
}
#calendar .fc-view > table > thead > tr > td,
#calendar .fc-view > table > tbody > tr > td {
  color: #333;
  line-height: 1.2;
  font-size: 0.7rem !important;
}
#calendar .fc-view > table > thead > tr > td .fc-event-time,
#calendar .fc-view > table > tbody > tr > td .fc-event-time {
  display: none;
}
#calendar .fc-view > table > thead > tr > td .fc-event-title,
#calendar .fc-view > table > tbody > tr > td .fc-event-title {
  font-size: 0.8rem;
}
#calendar .fc-view > table > thead > tr > td {
  border-bottom: 2px solid #e1e1e1;
}
#calendar .fc-view > table .fc-col-header tbody th {
  border-bottom: 0;
  padding: 0.25rem;
}
#calendar .fc-daygrid-day-top {
  flex-direction: inherit;
  color: #333;
}
#calendar .fc-daygrid-day.fc-day-today {
  position: relative;
  background: transparent !important;
}
#calendar .fc-daygrid-day.fc-day-today:before {
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;
  width: 0;
  height: 0;
  border: 0.35rem solid #107F93;
  border-top: 0.35rem solid transparent;
  border-left: 0.35rem solid transparent;
}
#calendar .fc-daygrid-day.fc-day-today .fc-daygrid-day-number {
  color: #107F93;
  font-weight: 700;
}

.calendar-legend {
  margin-top: 0.5rem;
  text-align: right;
}
.calendar-legend > strong {
  display: inline-block;
  margin-right: 0.25rem;
  color: #5C5C5C;
  font-weight: 600;
  font-size: 0.8rem;
  vertical-align: middle;
}
.calendar-legend ul {
  display: inline-block;
  vertical-align: middle;
}
.calendar-legend ul > li {
  display: inline-block;
  vertical-align: middle;
}
.calendar-legend ul > li > span {
  display: block;
  width: 4rem;
  line-height: 1.1rem;
  border-radius: 0.25rem;
  background: #F58283;
  color: #fff;
  text-align: center;
}
.calendar-legend ul > li.legend2 > span {
  background: #FE925E;
}
.calendar-legend ul > li.legend3 > span {
  background: #FDB100;
}
.calendar-legend ul > li.legend4 > span {
  background: #95D56D;
}
.calendar-legend ul > li.legend5 > span {
  background: #55D8D0;
}
.calendar-legend ul > li.legend6 > span {
  background: #5FAAFF;
}

/*--🔸 Round Table 🔸--*/
.round-table table {
  position: relative;
  width: 100%;
  text-align: center;
  -webkit-overflow-scrolling: touch;
  word-break: keep-all; /* word-break:break-all;강제 줄바꿈 */
  border-spacing: 0.5rem;
  border-collapse: separate;
}
.round-table table tbody {
  transform: translateY(-0.5rem);
  -webkit-transform: translateY(-0.5rem);
  -moz-transform: translateY(-0.5rem);
}
.round-table table th {
  position: relative;
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  color: #262626;
  line-height: 1.2;
  font-size: 1rem;
  font-weight: 500;
  text-align: center;
  vertical-align: middle;
  z-index: 1;
}
.round-table table td {
  position: relative;
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  color: #107F93;
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1.2;
  overflow: hidden;
  text-align: left;
}
.round-table table td.rst-td {
  padding-bottom: 2.75rem;
}
.round-table table td.rst-td .rst {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 0.5rem 1rem;
  color: #262626;
  font-size: 1rem;
  font-weight: 700;
  text-align: center;
  overflow: hidden;
}
.round-table table td.rst-td .rst a {
  position: absolute;
  top: 50%;
  right: 1rem;
  padding: 0.25rem 1rem;
  border: 1px solid #DCDCDC;
  border-radius: 0.25rem;
  background: #fff;
  color: #777;
  font-size: 0.8rem;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
}
.round-table table td > ol > li {
  font-size: 0.8rem;
  color: #107F93;
}
.round-table table td > ol > li > span.num {
  top: -0.15rem;
}
.round-table table td > ol > li > ul > li {
  color: #555;
  font-size: 0.75rem;
  font-weight: 400;
}
.round-table table td > ul > li {
  color: #555;
  font-size: 0.75rem;
  font-weight: 400;
}
.round-table table .rd-tbl-c1 {
  background: #E3E3E3;
}
.round-table table .rd-tbl-c2 {
  background: #D0D0D0;
}
.round-table table .rd-tbl-c3 {
  background: #66A2D4;
  color: #fff !important;
}
.round-table table .rd-tbl-c4 {
  background: #3986C6;
  color: #fff !important;
}
.round-table table .rd-tbl-c5 {
  background: #7BC6AD;
  color: #fff !important;
}
.round-table table .rd-tbl-c6 {
  background: #71B4C0;
  color: #fff !important;
}
.round-table table .rd-tbl-b1 {
  border: 1px solid #D0D0D0;
}

/*--🔸 Pager 🔸--*/
.pager {
  text-align: center;
  margin-top: 1rem;
}
.pager > * {
  position: relative;
  display: inline-block;
  margin: 0 0.25rem;
  color: #555;
  font-size: 0.7rem;
  font-weight: 400;
  transition: color 0.3s;
  -webkit-transition: color 0.3s;
  -moz-transition: color 0.3s;
}
.pager > a {
  width: 1.5rem;
  height: 1.5rem;
  line-height: 1.5rem;
  border-radius: 0.25rem;
  transition: all 0.3s;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
}
.pager > a:hover {
  background: #EEF2F5;
}
.pager .active {
  width: 1.5rem;
  height: 1.5rem;
  line-height: 1.5rem;
  border-radius: 0.25rem;
  background: linear-gradient(90deg, #22859B 11%, #009A80 89%);
  font-weight: 500;
  color: #fff;
}
.pager .arr {
  position: relative;
  margin: 0 0.1rem;
}
.pager .arr.prev {
  margin-right: 0.5rem;
}
.pager .arr.next {
  margin-left: 0.5rem;
}
.pager .arr:before {
  content: "\f104";
  font-family: "Line Awesome Free";
  font-size: 0.8rem;
  font-weight: 800;
}
.pager .arr.next:before {
  content: "\f105";
}
.pager .arr.frst:before {
  content: "\f100";
}
.pager .arr.last:before {
  content: "\f101";
}
.pager a.dot:before {
  content: "···";
}

/*--🔸 tui grid 🔸--*/
.tui-grid-cell-has-input .tui-grid-cell-content.unlocked.locked:after {
  content: "\e964";
  display: inline-block;
  margin-left: 0.25rem;
  font-family: "xeicon";
  line-height: 1;
  vertical-align: middle;
}
.tui-grid-cell-has-input .tui-grid-cell-content.unlocked.mine .mine-btn {
  display: inline-block;
  padding: 0.25rem 0.5rem;
  vertical-align: middle;
  color: #555;
  font-size: 0.65rem;
  border: 1px solid #ccc;
  border-radius: 1rem;
  line-height: 1;
}

/*--🔸 Up/Down 🔸--*/
.up-down-count.up {
  color: #fe3c4e !important;
  font-weight: 700;
}
.up-down-count.up > span {
  color: #fe3c4e !important;
}
.up-down-count.up:after {
  content: "\e92f";
  display: inline-block;
  margin-left: 0.15rem;
  font-size: 0.75rem;
  font-family: "xeicon";
}
.up-down-count.down {
  color: #309bfa !important;
  font-weight: 700;
}
.up-down-count.down > span {
  color: #309bfa !important;
}
.up-down-count.down:after {
  content: "\e935";
  display: inline-block;
  margin-left: 0.15rem;
  font-size: 0.75rem;
  font-family: "xeicon";
}

/*--🔸 Checkbox/Radio 🔸--*/
/* type1 */
.checkbox-radio-type01 {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  vertical-align: middle;
}
.checkbox-radio-type01 + .checkbox-radio-type01 {
  margin-left: 0.5rem;
}
.checkbox-radio-type01 label {
  margin: 0;
  font-size: 0.7rem;
  line-height: 1;
}
.checkbox-radio-type01 label > input {
  margin-right: 0.25rem;
}
.checkbox-radio-type01 input[type=checkbox], .checkbox-radio-type01 input[type=radio] {
  position: relative;
  width: 0.8rem;
  height: 0.8rem;
  border-radius: 0.25rem;
  border: 1px solid #BAC6CF;
  background: #fff;
}
.checkbox-radio-type01 input[type=checkbox]:after {
  content: "";
  position: absolute;
  left: 2px;
  top: 8px;
  width: 4px;
  height: 9px;
  border-radius: 0.05rem;
  border-right: 2px solid #fff;
  border-top: 2px solid #fff;
  transform-origin: left top;
  transform: scaleX(-1) rotate(135deg);
}
.checkbox-radio-type01 input[type=checkbox]:checked {
  border: 1px solid none;
  background: #107F93;
}
.checkbox-radio-type01 input[type=checkbox]:checked:after {
  border-color: #fff;
  animation-delay: 0;
  animation-duration: 0.5s;
  animation-name: check;
  animation-timing-function: linear;
  animation-iteration-count: 1;
}
.checkbox-radio-type01 input[type=radio] {
  border-radius: 50%;
}
.checkbox-radio-type01 input[type=radio]:after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0.25rem;
  height: 0.25rem;
  border-radius: 50%;
  background: #c8ccd4;
  transform: translate(-50%, -50%) scale(3.6);
  -webkit-transform: translate(-50%, -50%) scale(3.6);
  -moz-transform: translate(-50%, -50%) scale(3.6);
  opacity: 0;
}
.checkbox-radio-type01 input[type=radio]:checked {
  border-color: #107F93;
}
.checkbox-radio-type01 input[type=radio]:checked:after {
  background: #107F93;
  transform: translate(-50%, -50%) scale(1);
  -webkit-transform: translate(-50%, -50%) scale(1);
  -moz-transform: translate(-50%, -50%) scale(1);
  transition: all 0.2s;
  -webkit-transition: all 0.2s;
  -moz-transition: all 0.2s;
  opacity: 1;
}

/* type2 */
.checkbox-radio-type02 {
  display: inline-flex;
  vertical-align: middle;
  align-items: center;
  gap: 7px;
}
.checkbox-radio-type02 + .checkbox-radio-type02 {
  margin-left: 0.5rem;
}
.checkbox-radio-type02 label {
  margin: 0;
  font-size: 0.7rem;
  line-height: 1;
}
.checkbox-radio-type02 label > input {
  margin-right: 0.25rem;
}
.checkbox-radio-type02 input[type=checkbox], .checkbox-radio-type02 input[type=radio] {
  position: relative;
  width: 0.8rem;
  height: 0.8rem;
  border-radius: 0.25rem;
  border: 1px solid #BAC6CF;
  background: #fff;
}
.checkbox-radio-type02 input[type=checkbox]:after {
  content: "";
  position: absolute;
  left: 2px;
  top: 8px;
  width: 4px;
  height: 9px;
  border-radius: 0.05rem;
  border-right: 2px solid #fff;
  border-top: 2px solid #fff;
  transform-origin: left top;
  transform: scaleX(-1) rotate(135deg);
}
.checkbox-radio-type02 input[type=checkbox]:checked {
  border: 1px solid none;
  background: #107F93;
}
.checkbox-radio-type02 input[type=checkbox]:checked:after {
  border-color: #fff;
  animation-delay: 0;
  animation-duration: 0.5s;
  animation-name: check;
  animation-timing-function: linear;
  animation-iteration-count: 1;
}
.checkbox-radio-type02 input[type=radio] {
  border-radius: 50%;
}
.checkbox-radio-type02 input[type=radio]:after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0.25rem;
  height: 0.25rem;
  border-radius: 50%;
  background: #c8ccd4;
  transform: translate(-50%, -50%) scale(3.6);
  -webkit-transform: translate(-50%, -50%) scale(3.6);
  -moz-transform: translate(-50%, -50%) scale(3.6);
  opacity: 0;
}
.checkbox-radio-type02 input[type=radio]:checked {
  border-color: #107F93;
  background: #107F93;
}
.checkbox-radio-type02 input[type=radio]:checked:after {
  background: #fff;
  transform: translate(-50%, -50%) scale(1);
  -webkit-transform: translate(-50%, -50%) scale(1);
  -moz-transform: translate(-50%, -50%) scale(1);
  transition: all 0.2s;
  -webkit-transition: all 0.2s;
  -moz-transition: all 0.2s;
  opacity: 1;
}

/*--🔸 Box(default) 🔸--*/
[class^=box-st] {
  position: relative;
  margin-top: 1rem;
  padding: 1.5rem;
}

.box-st1 {
  border: 1px solid #e0e0e0;
  background: #fff;
}

/*--🔸 Tab(default) 🔸--*/
div[class^=tab-st] {
  position: relative;
  margin-bottom: 0.6rem;
  overflow: hidden;
}

div[class^=tab-st] ul[class^=tab-st] {
  margin-bottom: 0;
}

ul[class^=tab-st] {
  position: relative;
  margin-bottom: 2.5rem;
  text-align: center;
  overflow: hidden;
}

ul[class^=tab-st] + *[class^=tit] {
  margin-bottom: 0;
}

ul[class^=tab-st] a[target=_blank] > span:after {
  content: "\f35d";
  display: inline-block;
  padding-left: 0.35rem;
  font-size: 0.89rem;
  font-family: "Line Awesome Free";
  font-weight: 700;
}

ul[class^=tab-st] a, ul[class^=tab-st]:before {
  transition: all 0.3s;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
}

div[class^=tab-st].w50 {
  width: 50%;
}

/* Tab */
.tab-st {
  width: 100%;
  /* Tab(1차) */
  /* Tab(2차) */
  /* Tab(3차) */
  /* Tab(4차) */
}
.tab-st1 > li, .tab-st2 > li, .tab-st3 > li, .tab-st4 > li {
  float: left;
}
.tab-st1 {
  background: #fff;
}
.tab-st1:before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: #E1E1E1;
}
.tab-st1 li a {
  position: relative;
  display: table;
  width: auto;
  height: 2.3rem;
  padding: 0 1.5rem;
  color: #A2A2A2;
  font-size: 0.8rem;
  font-weight: 400;
  table-layout: fixed;
  transition: all 0.3s;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
}
.tab-st1 li a:before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0;
  height: 3px;
  background: linear-gradient(90deg, #22859B 11%, #009A80 89%);
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  transition: all 0.3s;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  z-index: 1;
}
.tab-st1 li a > span {
  position: relative;
  display: table-cell;
  width: 100%;
  max-height: 1.8rem;
  line-height: 1.1;
  vertical-align: middle;
  overflow: hidden;
}
.tab-st1 li.on a {
  color: #333;
  font-weight: 700;
}
.tab-st1 li.on a:before {
  width: 100%;
}
.tab-st1 li.on a[target=_blank]:before {
  color: #333;
}
.tab-st2 {
  overflow: hidden;
}
.tab-st2:before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #E7E7E7;
}
.tab-st2 li a {
  position: relative;
  display: table;
  width: auto;
  height: 1.9rem;
  padding: 0 1.5rem;
  background: #E7E7E7;
  color: #A2A2A2;
  font-size: 0.8rem;
  table-layout: fixed;
  overflow: hidden;
  transition: all 0.3s;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
}
.tab-st2 li a:before {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  height: 100%;
  background: #fff;
  transition: all 0.3s;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
}
.tab-st2 li a > span {
  position: relative;
  display: table-cell;
  width: 100%;
  max-height: 1.8rem;
  vertical-align: middle;
  line-height: 1.1;
  overflow: hidden;
}
.tab-st2 li.on a {
  font-weight: 900;
}
.tab-st2 li.on a > span {
  background: linear-gradient(90deg, #22859B 11%, #009A80 89%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  color: #64A0D3;
}
.tab-st2 li.on a:before {
  top: 0;
}
.tab-st2 li.on a[target=_blank]:before {
  color: #333;
}
.tab-st3 li a {
  position: relative;
  display: table;
  min-width: 7rem;
  width: auto;
  height: 1.75rem;
  padding: 0 0.5rem;
  background: #fff;
  color: #8D8D8D;
  font-size: 0.8rem;
  table-layout: fixed;
  overflow: hidden;
  transition: all 0.3s;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
}
.tab-st3 li a > span {
  position: relative;
  display: table-cell;
  width: 100%;
  max-height: 1.8rem;
  line-height: 1.1;
  vertical-align: middle;
  overflow: hidden;
}
.tab-st3 li.on a {
  background: #107F93;
  font-weight: 700;
}
.tab-st3 li.on a > span {
  color: #fff;
}
.tab-st3 li.on a:before {
  top: 0;
}
.tab-st3 li.on a[target=_blank]:before {
  color: #333;
}
.tab-st3 li:first-of-type > a {
  border-radius: 2.5rem 0 0 2.5rem;
}
.tab-st3 li:first-of-type.on > a {
  background: linear-gradient(90deg, #22859B 11%, #009A80 89%);
}
.tab-st3 li:last-of-type > a {
  border-radius: 0 2.5rem 2.5rem 0;
}
.tab-st3 li:last-of-type.on > a {
  background: linear-gradient(90deg, #22859B 11%, #009A80 89%);
}
.tab-st3 li:not(.on) > a {
  border: 1px solid #ccc;
}
.tab-st4 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: #fff;
  border-radius: 5rem;
  border: 1px solid #BAC6CF;
}
.tab-st4 li {
  width: 50%;
  padding: 0 0.2rem;
}
.tab-st4 li a {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  padding: 0.55rem 1.5rem;
}
.tab-st4 li a:before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 80%;
  border-radius: 5rem;
  background: linear-gradient(90deg, #22859B 11%, #009A80 89%);
  opacity: 0;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  transition: all 0.3s;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
}
.tab-st4 li a > span {
  position: relative;
  display: table-cell;
  width: 100%;
  max-height: 1.8rem;
  line-height: 1.1;
  vertical-align: middle;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.tab-st4 li.on a {
  color: #fff;
  font-weight: 700;
}
.tab-st4 li.on a:before {
  width: 100%;
  opacity: 1;
}
.tab-st4 li.on a[target=_blank]:before {
  color: #A5A7B3;
}
.tab-st4 li:hover:not(.on) > a:before {
  background: #EEF2F5 !important;
  width: 100%;
  opacity: 1;
}
.tab-st4.type2 {
  border: 1px solid #525F70;
  background: rgba(255, 255, 255, 0.05);
  color: #fff;
  width: 25%;
  margin: 0;
}

/* Tab(list type) */
.tab-list {
  overflow: hidden;
  margin: -0.25rem;
}
.tab-list li {
  width: 25%;
  float: left;
  padding: 0.25rem;
}
.tab-list li a {
  display: block;
  padding: 0.75rem 0.5rem;
  border-radius: 0.5rem;
  border: 1px solid #ccc;
  color: #fff;
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1rem;
  text-align: center;
  transition: all 0.3s;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
}
.tab-list li#current a {
  background: linear-gradient(320deg, rgba(255, 175, 123, 0.2), rgba(215, 109, 119, 0.2), rgba(118, 96, 246, 0.15));
  color: #fff;
  font-weight: 600;
}

/* Tab(step type) */
.tab-order-st1 {
  display: flex;
  gap: 0 1.5rem;
}
.tab-order-st1 > li {
  position: relative;
}
.tab-order-st1 > li > div {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  width: 2.5rem;
  height: 2.3rem;
  border-radius: 50%;
  padding: 0 0.4rem;
  border: 2px solid #ccc;
}
.tab-order-st1 > li > div > strong {
  position: relative;
  display: inline-block;
  color: #107F93;
  font-size: 0.8rem;
  z-index: 1;
}
.tab-order-st1 > li > div .txt {
  position: relative;
  z-index: 1;
  display: none;
  font-weight: 600;
}
.tab-order-st1 > li.on > div {
  background: linear-gradient(90deg, #22859B 11%, #009A80 89%);
  color: #fff;
  border-color: transparent;
  border-radius: 2.5rem;
  width: fit-content;
}
.tab-order-st1 > li.on > div:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, #22859B 11%, #009A80 89%);
  border-radius: 2.5rem;
}
.tab-order-st1 > li.on > div > strong {
  color: #fff;
}
.tab-order-st1 > li.on > div .txt {
  display: block;
  font-weight: 600;
  word-break: break-all;
  word-break: keep-all;
}
.tab-order-st1 > li + li:before {
  content: "\f105";
  position: absolute;
  top: 50%;
  left: -1.15rem;
  color: #A2A2A2;
  font-family: "Line Awesome Free";
  font-size: 0.8rem;
  font-weight: 700;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
}

/*--🔸 Tab(fix width) 🔸--*/
[class*=Tab_w] > li a {
  width: 100% !important;
}

.Tab_w50 > li {
  width: 50%;
}
.Tab_w30 > li {
  width: 33%;
}
.Tab_w20 > li {
  width: 20%;
}
.Tab_w10 > li {
  width: 10%;
}

/*--🔸 Btns(버튼들 감싸는 레이아웃) 🔸--*/
.btns {
  margin-top: 1rem;
  display: flex;
  align-items: center;
}
.btns.f1 [class^=btn-style] {
  flex: 1;
}

/*--🔸 Btn(default) 🔸--*/
[class^=btn-style] {
  position: relative;
  display: inline-block;
  min-width: 2rem;
  height: 2rem;
  margin: 0.15rem;
  padding: 0 1rem;
  border-radius: 0.25rem;
  color: #fff;
  font-size: 0.8rem;
  font-weight: 400;
  line-height: calc(2rem - 2px);
  text-align: center;
  vertical-align: middle;
  overflow: hidden;
  transition: all 0.3s;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
}
[class^=btn-style] span {
  position: relative;
  z-index: 2;
}
[class^=btn-style] i {
  margin-right: 0.25rem;
}
[class^=btn-style] em.hid + i {
  margin-right: 0;
}

/* lage size */
[class^=btn-style].btn-lage {
  width: 10rem;
}
[class^=btn-style].btn-lage i {
  font-size: 0.7rem;
  vertical-align: middle;
}

/* small size */
[class^=btn-style].btn-small {
  height: 1.35rem;
  font-size: 0.7rem;
  line-height: 1.35rem;
}
[class^=btn-style].btn-small i {
  font-size: 0.7rem;
  vertical-align: middle;
}

/* round */
[class^=btn-style].btn-round {
  height: 1.4rem;
  padding: 0 0.75rem;
  border-radius: 1rem;
  font-size: 0.7rem;
  line-height: calc(1.4rem - 2px);
}
[class^=btn-style].btn-round:before {
  border-radius: 1rem;
}
[class^=btn-style].btn-round i.las.la-search {
  transform: rotate(-90deg);
  -webkit-transform: rotate(-90deg);
  -moz-transform: rotate(-90deg);
}

.btn-style1 {
  border: 1px solid #BAC6CF;
  background: #fff;
  color: #333;
  font-weight: 500;
}
.btn-style1 i {
  color: #777;
}
.btn-style2 {
  background: linear-gradient(90deg, #22859B 11%, #009A80 89%);
  border: 0;
  line-height: 2rem;
}
.btn-style2:before {
  content: "";
  position: absolute;
  top: 1px;
  left: 1px;
  width: calc(100% - 2px);
  height: calc(100% - 2px);
  border-radius: 0.25rem;
  background: #fff;
  opacity: 0;
  transition: all 0.3s;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
}
.btn-style3 {
  border: 1px solid #107F93;
  background: #fff;
  color: #107F93;
  font-weight: 500;
}
.btn-style4 {
  border: 1px solid #E42648;
  background: #fff;
  color: #E42648;
  font-weight: 500;
}
.btn-style5 {
  border: 1px solid #83858F;
  background: #16343C;
  color: #fff;
  font-weight: 500;
}
.btn-style6 {
  border: 1px solid #E42648;
  background: #E42648;
  color: #fff;
}
.btn-style7 {
  border: 1px solid #EEF2F5;
  background: #EEF2F5;
  color: #555;
}
.btn-style8 {
  border: 1px solid #60616B;
  background: #60616B;
  color: #fff;
}
.btn-style9 {
  border: 1px solid #E6894F;
  background: #E6894F;
  color: #fff;
}

/* btn : icon */
.btn-icon {
  display: inline-block;
  color: #949494;
  font-size: 1.3rem;
}

/* more btn */
.more-btn {
  display: inline-block;
  width: 1.3rem;
  height: 1.3rem;
  margin-left: 0.25rem;
  border-radius: 0.25rem;
  border: 1px solid #BAC6CF;
  background: #fff;
  text-align: center;
}
.more-btn > i {
  display: block;
  line-height: 1.3rem;
  transition: all 0.3s;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
}

/*--🔸 Image Size(zoom function) 🔸--*/
.rsp_img {
  position: relative;
  width: auto;
  max-width: 100%;
  text-align: center;
}
.rsp_img img {
  max-width: 100%;
}
.rsp_img .btn-zoom {
  position: absolute;
  display: block;
  bottom: 0;
  right: 0;
  width: 2rem;
  height: 2rem;
  background: #2f2f37;
  text-align: center;
  z-index: 100;
  overflow: hidden;
}
.rsp_img .btn-zoom:before {
  content: "\f31e";
  display: inline-block;
  color: #fff;
  font-size: 1.1rem;
  font-family: "Line Awesome Free";
  font-weight: 700;
  line-height: 2rem;
}

/*--🔸 Image Size(100%) 🔸--*/
.img-w100 {
  position: relative;
  text-align: center;
}
.img-w100 img {
  max-width: 100%;
}
.img-w100 .btns {
  position: absolute;
  top: 0;
  right: 0;
  margin: 0;
}

/*--🔸 Comming soon 🔸--*/
.Coming-soon {
  padding: 2.5rem 1rem;
  border: 5px solid #DCDCDC;
  background: #fff;
  text-align: center;
}
.Coming-soon h3 {
  color: #222;
  font-size: 1.5rem;
}
.Coming-soon p {
  position: relative;
  margin-top: 1.5rem;
  padding-top: 1.5rem;
}
.Coming-soon p:before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 2rem;
  height: 3px;
  margin-left: -1rem;
  background: #222;
}

/*--🔸 Display 🔸--*/
.disIb {
  display: inline-block !important;
}

.disB {
  display: block !important;
}

/*--🔸 Flex st🔸--*/
.flex-con1 {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.flex-con2 {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.flex-con3 {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.flex-con4 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.f1 {
  flex: 1;
}

/*--🔸 Input/Select 🔸--*/
input[class*=InpSel],
textarea[class*=InpSel],
[class*=InpSel] select {
  position: relative;
  height: 2rem;
  padding: 0 0.5rem;
  border-radius: 0.25rem;
  border: 1px solid #DCDCDC;
  background: #fff;
  color: #333;
  font-size: 0.75rem;
  z-index: 1;
  transition: all 0.3s;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
}
input[class*=InpSel]::placeholder,
textarea[class*=InpSel]::placeholder,
[class*=InpSel] select::placeholder {
  color: #A2A2A2;
}
input[class*=InpSel][readonly=readonly],
textarea[class*=InpSel][readonly=readonly],
[class*=InpSel] select[readonly=readonly] {
  background: #DCDCDC;
}

[class*=InpSel]:disabled,
[class*=InpSel] select:disabled {
  border: 1px solid #DCDCDC;
  background: #F3F3F3;
}

textarea[class*=InpSel] {
  width: 100%;
  height: 7.2rem;
  padding: 0.5rem;
}

.InpSel-wrong:focus {
  outline: 0;
}
.InpSel-wrong:focus::placeholder {
  color: #A2A2A2;
}

[class*=InpSel]:not(.InpSel-wrong):not([disabled]):focus,
textarea[class*=InpSel]:not([disabled]):focus,
[class*=InpSel] select:focus {
  border: double 1px transparent;
  background-image: linear-gradient(#fff, #fff), linear-gradient(90deg, #22859B 11%, #009A80 89%);
  background-origin: border-box;
  background-clip: padding-box, border-box;
  outline: 0;
}

input[class*=InpSel].InpSel-wrong:focus {
  border: double 1px transparent;
  background-image: linear-gradient(#fff, #fff), linear-gradient(90deg, #B12727 0%, #B12727 10%);
  background-origin: border-box;
  background-clip: padding-box, border-box;
  outline: 0;
  box-shadow: 0 0 0.5rem rgba(177, 39, 39, 0.3);
}

[class*=InpSel] textarea {
  resize: none;
}

/* input,select width */
.InpSel {
  /* input select width % */
  /* input select width px */
}
.InpSel-wrong {
  border: 1px solid #C26C65;
}
.InpSel-wrong + .input-wrong-txt {
  display: block;
  color: #B12727;
  font-size: 0.7rem;
}
.InpSel-w5 {
  width: 5% !important;
}
.InpSel-w10 {
  width: 10% !important;
}
.InpSel-w15 {
  width: 15% !important;
}
.InpSel-w20 {
  width: 20% !important;
}
.InpSel-w30 {
  width: 30% !important;
}
.InpSel-w40 {
  width: 40% !important;
}
.InpSel-w50 {
  width: 50% !important;
}
.InpSel-w60 {
  width: 60% !important;
}
.InpSel-w70 {
  width: 70% !important;
}
.InpSel-w80 {
  width: 80% !important;
}
.InpSel-w90 {
  width: 90% !important;
}
.InpSel-w100 {
  width: 100% !important;
}
.InpSel-50 {
  width: 50px !important;
}
.InpSel-80 {
  width: 80px !important;
}
.InpSel-100 {
  width: 100px !important;
}
.InpSel-150 {
  width: 150px !important;
}
.InpSel-200 {
  width: 200px !important;
}
.InpSel-250 {
  width: 250px !important;
}
.InpSel-300 {
  width: 300px !important;
}
.InpSel-350 {
  width: 350px !important;
}
.InpSel-400 {
  width: 400px !important;
}
.InpSel-450 {
  width: 450px !important;
}
.InpSel-500 {
  width: 500px !important;
}

.select-group {
  position: relative;
  display: inline-block;
  height: 2rem;
  padding: 0;
  border: 0;
}
.select-group:after {
  content: "\f107";
  position: absolute;
  right: 0.5rem;
  top: 50%;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  font-size: 1rem;
  font-weight: 700;
  font-family: "Line Awesome Free";
  color: #A2A2A2;
  line-height: 2rem;
  z-index: 1;
  transition: transform 0.3s;
  -webkit-transition: transform 0.3s;
  -moz-transition: transform 0.3s;
}
.select-group select {
  position: relative;
  display: block;
  padding: 0 2rem 0 0.5rem;
  width: 100%;
  height: 100%;
  font-size: 0.7rem;
  color: #333;
  background: #fff;
}
.select-group select:focus {
  outline: 0;
}
.select-group.focus:after {
  transform: translateY(-50%) rotate(180deg);
  -webkit-transform: translateY(-50%) rotate(180deg);
  -moz-transform: translateY(-50%) rotate(180deg);
}

/* input + 단위 */
.input-util {
  display: inline-block;
  margin-left: 0.25rem;
}

.input-wrap {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}
.input-wrap input {
  flex: 1;
}
.input-wrap .unit {
  color: #333;
  font-size: 0.75rem;
  font-weight: 400;
}

/*--🔸 Datepicker 🔸--*/
.calendar-input {
  position: relative;
  max-width: 8.15rem;
}
.calendar-input .calendar-picker-btn {
  position: absolute;
  top: 0.6rem;
  right: 0.5rem;
  z-index: 2;
  justify-content: center;
  align-content: space-around;
  flex-wrap: wrap;
}
.calendar-input .calendar-picker-btn:before {
  content: "\f133";
  color: #A2A2A2;
  font-family: "Line Awesome Free";
  font-weight: 900;
  font-size: 0.8rem;
}
.calendar-input.time {
  width: 5.7rem;
}
.calendar-input.time .calendar-picker-btn:before {
  content: "\f017";
}

.calendar-input .calendar-picker-clear-btn{
  display: block;
  position: absolute;
  top: 0.6rem;
  right: 1.25rem;
  z-index: 2;


}

.calendar-picker {
  display: inline-block;
  vertical-align: middle;
}
.calendar-picker .calendar-input {
  display: inline-block;
  vertical-align: middle;
}
.calendar-picker em {
  display: inline-block;
  color: #A2A2A2;
  font-size: 0.8rem;
  vertical-align: middle;
}

.ui-datepicker {
  padding: 0.25rem 0.5rem;
  border: 1px solid #DCDCDC !important;
}
.ui-datepicker * {
  font-family: "Pretendard" !important;
}
.ui-datepicker .ui-datepicker-title {
  margin: 0;
  text-align: left;
}
.ui-datepicker .ui-widget-header {
  border: 0;
  background: transparent;
  color: #666;
  font-size: 0.8rem;
  font-weight: 500;
}
.ui-datepicker .ui-datepicker-prev {
  top: 0.5rem;
  left: inherit;
  right: 1.5rem;
  width: 0.7rem;
  height: 0.7rem;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #A2A2A2;
  font-size: 0.7rem;
  line-height: 0.7rem;
}
.ui-datepicker .ui-datepicker-prev:before {
  content: "\f104";
  font-family: "Line Awesome Free";
  font-weight: 700;
}
.ui-datepicker .ui-datepicker-prev .ui-icon {
  background: transparent !important;
}
.ui-datepicker .ui-datepicker-next {
  top: 0.5rem;
  right: 0.5rem;
  width: 0.7rem;
  height: 0.7rem;
  border: 0 !important;
  background: transparent !important;
  border-radius: 0 !important;
  color: #A2A2A2;
  font-size: 0.7rem;
  line-height: 0.7rem;
}
.ui-datepicker .ui-datepicker-next:before {
  content: "\f105";
  font-family: "Line Awesome Free";
  font-weight: 700;
}
.ui-datepicker .ui-datepicker-next .ui-icon {
  background: transparent !important;
}
.ui-datepicker th {
  color: #A2A2A2 !important;
  font-weight: 400 !important;
}
.ui-datepicker td > a {
  position: relative;
  border: 0 !important;
  border-radius: 50%;
  background: transparent !important;
  color: #107F93 !important;
  font-weight: 400 !important;
  text-align: center !important;
  transition: all 0.3s;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
}
.ui-datepicker td > a:before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1.25rem;
  height: 1.25rem;
  background: #ebebeb !important;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  z-index: -1;
  opacity: 0;
  transition: all 0.3s;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
}
.ui-datepicker td.ui-datepicker-today a {
  color: #107F93 !important;
  font-weight: 600 !important;
}
.ui-datepicker td.ui-datepicker-current-day a {
  color: #fff !important;
}
.ui-datepicker td.ui-datepicker-current-day a:before {
  background: linear-gradient(90deg, #22859B 11%, #009A80 89%) !important;
  opacity: 1;
}

.dateBtn {
  display: inline-block;
  vertical-align: middle;
}
.dateBtn [class^=btn-style] {
  color: #777;
}

/*--🔸 Search filter 🔸--*/
[class^=srh-filter] {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  height: auto;
  border-radius: 0.5rem;
  border: 1px solid #BAC6CF;
  background: #EEF2F5;
  padding: 0.6rem;
  margin-bottom: 0.5rem;
  /* 키워드 */
}
[class^=srh-filter] > ul {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  flex: 2;
}
[class^=srh-filter] > ul > li > div {
  display: inline-flex;
  flex-direction: column;
  gap: 0.25rem;
  width: 100%;
}
[class^=srh-filter] > ul > li > div .srh-tit {
  color: #84878D;
}
[class^=srh-filter] > ul > li > div .custom-select {
  width: 100%;
}
[class^=srh-filter] > ul > li > div [class^=btn-style] {
  margin: 0;
  width: 100%;
}
[class^=srh-filter] > ul > li > div .calendar-picker {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  width: 100%;
}
[class^=srh-filter] > ul > li > div .calendar-picker > .calendar-input {
  flex: 1;
  max-width: unset;
}
[class^=srh-filter] > ul > li.srh-f1 {
  flex: 1;
}
[class^=srh-filter] > ul > li.srh-f1 > div {
  display: flex;
}
[class^=srh-filter] > ul > li.srh-f1 > div .srh-tit {
  white-space: nowrap;
}
[class^=srh-filter] > ul > li.srh-f1 > div *:not(.srh-tit) {
  width: 100%;
}
[class^=srh-filter] .keyword {
  display: flex;
  width: 100%;
  margin-top: 0.55rem;
  justify-content: space-between;
  align-items: center;
}
[class^=srh-filter] .keyword > span {
  width: 4rem;
  color: #107F93;
  font-size: 0.7rem;
}
[class^=srh-filter] .keyword > ul {
  display: flex;
  width: 100%;
  align-items: center;
}
[class^=srh-filter] .keyword > ul > li {
  padding: 0 0.25rem;
}
[class^=srh-filter] .keyword > ul > li > a {
  padding: 0.2rem 1.1rem;
  border: 1px solid #ccc;
  border-radius: 0.25rem;
  color: #555;
  font-size: 0.7rem;
}

/* serch form */
.srh-frm {
  position: relative;
  display: inline-block;
  vertical-align: middle;
}
.srh-frm .InpSel {
  width: 100%;
}
.srh-frm button {
  position: absolute;
  top: 0.15rem;
  right: 0.5rem;
  color: #A2A2A2;
  font-size: 1.5rem;
  z-index: 1;
}
.srh-frm button i {
  transform: rotate(-90deg);
  -webkit-transform: rotate(-90deg);
  -moz-transform: rotate(-90deg);
  transition: all 0.3s;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
}

/*--🔸 Write box 🔸--*/
.write-box {
  padding: 1.5rem;
  background: #F6F6F6;
  box-shadow: 0 3px 5px 1px rgba(0, 0, 0, 0.25);
}
.write-box .essential {
  display: inline-block;
  margin-left: 0.25rem;
  color: #F36363;
}
.write-box > dl {
  display: flex;
}
.write-box > dl > dt {
  width: 5.5rem;
  color: #262626;
  font-size: 1.1rem;
  font-weight: 600;
}
.write-box > dl > dt > strong {
  display: inline-block;
}
.write-box > dl > dd {
  width: calc(100% - 5.5rem);
  padding-left: 1rem;
}
.write-box > dl > dd > dl > dt {
  display: block;
  margin-top: 0.5rem;
  color: #5C5C5C;
  font-size: 0.8rem;
}
.write-box > dl > dd > dl > dd {
  display: block;
  margin-top: 0.25rem;
}

/*--🔸 Attached file 🔸--*/
.attach-file {
  display: flex;
}
.attach-file .btn-style2 {
  width: 5rem;
  margin: 0 0 0 0.25rem;
}

.attach-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.attach-icon:before {
  content: "\eb74";
  font-family: "xeicon";
  color: #666;
  font-size: 1rem;
  font-weight: 400;
  transition: all 0.3s;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
}
.attach-icon:hover:before {
  font-weight: 600;
}

.attach-file-form {
  border-top: 1px solid #ccc;
  padding: 0.7rem 0;
}
.attach-file-form .file-load {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 1rem;
  border-radius: 0.5rem;
  border: 2px dashed #ccc;
  background: #F9F9F9;
  margin-bottom: 0.5rem;
}
.attach-file-form .file-guide > ul {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.attach-file-form .file-guide > ul > li > span {
  padding-left: 0.5rem;
  font-size: 0.6rem;
  font-weight: 400;
  word-wrap: break-word;
  word-break: keep-all;
}
.attach-file-form .file-guide > ul > li > span:before {
  content: "*";
  margin-right: 0.25rem;
}

.attach-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  border-top: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
  padding: 1rem 0;
}
.attach-list .attach-hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.attach-list .attach-hd .num {
  font-size: 0.8rem;
  font-weight: 500;
}
.attach-list .attach-hd .num > strong {
  color: #8183ED;
  font-weight: 700;
  margin-right: 0.25rem;
}
.attach-list .attach-list-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: auto;
  border-radius: 0.75rem;
  border: 1px solid #ccc;
  background: #fff;
  padding: 0.25rem 1rem;
}
.attach-list .attach-list-box .tit {
  display: inline-flex;
  align-items: center;
}
.attach-list .attach-list-box .tit > i {
  margin-right: 0.25rem;
}
.attach-list .delete {
  color: #333;
  font-size: 0.8rem;
  font-weight: 400;
  transition: all 0.2s;
  -webkit-transition: all 0.2s;
  -moz-transition: all 0.2s;
  white-space: nowrap;
}
.attach-list .delete > i {
  margin-right: 0.25rem;
}
.attach-list .delete:hover {
  font-weight: 600;
}
.attach-list .download {
  color: #333;
  font-size: 0.8rem;
  font-weight: 400;
  transition: all 0.2s;
  -webkit-transition: all 0.2s;
  -moz-transition: all 0.2s;
}
.attach-list .download > i {
  margin-right: 0.25rem;
}
.attach-list .download:hover {
  font-weight: 600;
}
.attach-list > ul {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  max-height: 14.5rem;
  overflow-y: auto;
}

/*--🔸 Layer popup 🔸--*/
.layer-bg {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  z-index: 100;
}

.layer-wrap {
  position: fixed;
  top: 50%;
  left: 50%;
  min-width: 25rem;
  max-height: 80%;
  padding: 1.5rem 1rem;
  border-radius: 0.25rem;
  background: #fff;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  z-index: 101;
  overflow: auto;
}
.layer-wrap::-webkit-scrollbar {
  width: 0.5rem;
}
.layer-wrap::-webkit-scrollbar-track {
  border-radius: 0.5rem;
  background: rgba(0, 0, 0, 0.05);
}
.layer-wrap::-webkit-scrollbar-thumb {
  border-radius: 0.5rem;
  background: rgba(0, 0, 0, 0.2);
}
.layer-wrap [class^=titT] {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}
.layer-wrap .titT1 {
  border-bottom: 1px solid #BAC6CF;
  padding: 0.3rem 0 0.7rem 0;
  margin-bottom: 1rem;
}
.layer-wrap .layer-cont {
  max-height: 31rem;
  overflow: hidden;
  overflow-y: auto;
}
.layer-wrap .layer-cont::-webkit-scrollbar {
  width: 0.15rem;
}
.layer-wrap .layer-cont::-webkit-scrollbar-track {
  border-radius: 0.5rem;
  background: rgba(0, 0, 0, 0.05);
}
.layer-wrap .layer-cont::-webkit-scrollbar-thumb {
  border-radius: 0.5rem;
  background: rgba(0, 0, 0, 0.2);
}
.layer-wrap .layer-cont .tit-input {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.layer-wrap .layer-cont .tit-input > div {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.layer-wrap .layer-cont .tit-input > div > span {
  display: inline-block;
  min-width: 4.5rem;
  font-size: 0.8rem;
  font-weight: 600;
}
.layer-wrap .layer-cont .tit-input > div > input {
  flex: 1;
}
.layer-wrap .layer-cont .tit-input > div .select-group {
  flex: 1;
}
.layer-wrap .btns {
  display: flex;
  gap: 1rem;
}
.layer-wrap .btns > a {
  flex: 1;
}
.layer-wrap .btns2 {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  margin-top: 1rem;
}
.layer-wrap .btns2.ar {
  justify-content: right;
}
.layer-wrap .btns2.ac {
  justify-content: center;
}
.layer-wrap .btns2.al {
  justify-content: left;
}
.layer-wrap .btn-close-layer {
  color: #262626;
  font-size: 0.9rem;
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  transition: 0.3s;
}
.layer-wrap .btn-close-layer:hover {
  transform: rotate(360deg);
  -webkit-transform: rotate(360deg);
  -moz-transform: rotate(360deg);
}

/*--🔸 Width(fix) 🔸--*/
[class^=fix-w] {
  flex: auto !important;
}
[class^=fix-w] + li {
  flex: auto !important;
}

.fix-w10 {
  width: 10% !important;
}
.fix-w20 {
  width: 20% !important;
}
.fix-w25 {
  width: 25% !important;
}
.fix-w30 {
  width: 30% !important;
}
.fix-w40 {
  width: 40% !important;
}
.fix-w50 {
  width: 50% !important;
}
.fix-w60 {
  width: 60% !important;
}
.fix-w70 {
  width: 70% !important;
}
.fix-w80 {
  width: 80% !important;
}
.fix-w90 {
  width: 90% !important;
}
.fix-w100 {
  width: 100% !important;
}

/*--🔸 Padding(fix) 🔸--*/
.pd0 {
  padding: 0 !important;
}
.pd5 {
  padding: 0.25rem !important;
}
.pd10 {
  padding: 0.5rem !important;
}
.pd15 {
  padding: 0.75rem !important;
}
.pd20 {
  padding: 1rem !important;
}
.pd30 {
  padding: 1.5rem !important;
}
.pdt0 {
  padding-top: 0 !important;
}
.pdt5 {
  padding-top: 0.25rem !important;
}
.pdt10 {
  padding-top: 0.5rem !important;
}
.pdt15 {
  padding-top: 0.75rem !important;
}
.pdt20 {
  padding-top: 1rem !important;
}
.pdt30 {
  padding-top: 1.5rem !important;
}
.pdt40 {
  padding-top: 2rem !important;
}
.pdt50 {
  padding-top: 2.5rem !important;
}
.pdt55 {
  padding-top: 2.55rem !important;
}
.pdt60 {
  padding-top: 3rem !important;
}
.pdt5n {
  padding-top: -0.25rem !important;
}
.pdt10n {
  padding-top: -0.5rem !important;
}
.pdr0 {
  padding-right: 0 !important;
}
.pdr5 {
  padding-right: 0.25rem !important;
}
.pdr10 {
  padding-right: 0.5rem !important;
}
.pdr15 {
  padding-right: 0.75rem !important;
}
.pdr20 {
  padding-right: 1rem !important;
}
.pdr30 {
  padding-right: 1.5rem !important;
}
.pdb0 {
  padding-bottom: 0 !important;
}
.pdb5 {
  padding-bottom: 0.25rem !important;
}
.pdb10 {
  padding-bottom: 0.5rem !important;
}
.pdb15 {
  padding-bottom: 0.75rem !important;
}
.pdb20 {
  padding-bottom: 1rem !important;
}
.pdb30 {
  padding-bottom: 1.5rem !important;
}
.pdb40 {
  padding-bottom: 2rem !important;
}
.pdb50 {
  padding-bottom: 2.5rem !important;
}
.pdb55 {
  padding-bottom: 2.55rem !important;
}
.pdb60 {
  padding-bottom: 3rem !important;
}
.pdl0 {
  padding-left: 0 !important;
}
.pdl5 {
  padding-left: 0.25rem !important;
}
.pdl10 {
  padding-left: 0.5rem !important;
}
.pdl15 {
  padding-left: 0.75rem !important;
}
.pdl20 {
  padding-left: 1rem !important;
}
.pdl30 {
  padding-left: 1.5rem !important;
}

/*--🔸 Margin(fix) 🔸--*/
.mg0 {
  margin: 0 !important;
}
.mg5 {
  margin: 0.25rem !important;
}
.mg10 {
  margin: 0.5rem !important;
}
.mg15 {
  margin: 0.75rem !important;
}
.mg20 {
  margin: 1rem !important;
}
.mg30 {
  margin: 1.5rem !important;
}
.mgt0 {
  margin-top: 0 !important;
}
.mgt5 {
  margin-top: 0.25rem !important;
}
.mgt6 {
  margin-top: 0.3rem !important;
}
.mgt10 {
  margin-top: 0.5rem !important;
}
.mgt15 {
  margin-top: 0.75rem !important;
}
.mgt20 {
  margin-top: 1rem !important;
}
.mgt30 {
  margin-top: 1.5rem !important;
}
.mgt40 {
  margin-top: 2rem !important;
}
.mgt5n {
  margin-top: -0.25rem !important;
}
.mgt10n {
  margin-top: -0.5rem !important;
}
.mgr5 {
  margin-right: 0.25rem !important;
}
.mgr10 {
  margin-right: 0.5rem !important;
}
.mgr15 {
  margin-right: 0.75rem !important;
}
.mgr20 {
  margin-right: 1rem !important;
}
.mgr30 {
  margin-right: 1.5rem !important;
}
.mgb0 {
  margin-bottom: 0 !important;
}
.mgb5 {
  margin-bottom: 0.25rem !important;
}
.mgb10 {
  margin-bottom: 0.5rem !important;
}
.mgb15 {
  margin-bottom: 0.75rem !important;
}
.mgb20 {
  margin-bottom: 1rem !important;
}
.mgb30 {
  margin-bottom: 1.5rem !important;
}
.mgl5 {
  margin-left: 0.25rem !important;
}
.mgl10 {
  margin-left: 0.5rem !important;
}
.mgl15 {
  margin-left: 0.75rem !important;
}
.mgl20 {
  margin-left: 1rem !important;
}
.mgl30 {
  margin-left: 1.5rem !important;
}

/*--🔸 width, height(100%) 🔸--*/
.w100 {
  width: 100% !important;
}

.h100 {
  height: 100% !important;
}

/*--🔸 width, height(auto) 🔸--*/
.wAuto {
  width: auto !important;
}

.hAuto {
  height: auto !important;
}

/*--🔸 Line 🔸--*/
.line1 {
  display: block;
  margin: 1.25rem 0;
  border-top: 2px solid #D9D9D9;
}

/*--🔸 highchart / svg chart 🔸--*/
/* highcharts */

/* highcharts 폰트 전체 적용 */
.highcharts-root {
  font-family: "Pretendard", "NotoSans", "돋움", "Dotum", "굴림", "Gulim", AppleGothic, UnDotum, Arial, Tahoma, Verdana, sans-serif !important;
}
.chart *{
  font-family: "Pretendard", "NotoSans", "돋움", "Dotum", "굴림", "Gulim", AppleGothic, UnDotum, Arial, Tahoma, Verdana, sans-serif !important;
}
.chart *:not(.pie-cont) {
  color: #505050;
  font-size: 0.65rem;
}
.chart.chart-boder-b {
  border-bottom: 1px solid #ccc;
}
.chart .highcharts-axis *,
.chart .highcharts-axis-labels * {
  fill: #505050;
}
.chart .legend-none .highcharts-legend text {
  color: #505050;
  cursor: inherit;
  fill: #505050;
}
.chart .highcharts-legend text {
  color: #505050;
  fill: #505050;
}
.chart .highcharts-pie-series .highcharts-label .pie-cont {
  color: #fff;
  font-size: 0.7rem;
  font-weight: 400;
  stroke: transparent;
  fill: #fff;
  stroke-width: 0;
}
.chart .highcharts-pie-series .highcharts-label .pie-cont-bg {
  display: inline-block;
  padding: 0.25rem 0.5rem;
  border-radius: 1rem;
  background: rgba(0, 0, 0, 0.2);
}
.chart .highcharts-pie-series .highcharts-label .pie-cont-num {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.9rem;
}
.chart .datalebel-over {
  display: block;
  color: #fff;
  font-size: 0.7rem;
  font-weight: 400;
  text-align: center;
  fill: #fff;
}
.chart .datalebel-over > strong {
  display: block;
  margin: 0.15rem 0;
  color: #fff;
  font-size: 1.1rem;
  font-weight: 600;
  fill: #fff;
}
.chart .datalebel-over > em {
  position: absolute;
  transform: translateX(-140px);
  -webkit-transform: translateX(-140px);
  -moz-transform: translateX(-140px);
}
.chart .datalebel-over > em + strong {
  margin: 0;
}
.chart .datalebel-over2 {
  border-radius: 1rem;
  font-size: 0.7rem;
  color: #fff;
}
.chart .datalebel-over2 > strong {
  position: relative;
  display: inline-block;
  padding: 0.15rem 0.5rem;
  color: #fff;
  z-index: 1;
}
.chart .datalebel-total {
  position: relative;
  z-index: 2;
  display: block;
  color: #5C5C5C;
  font-size: 0.7rem;
  font-weight: 400;
  text-align: center;
  fill: #0c0606;
}
.chart .datalebel-total > em {
  display: block;
  margin: 0.15rem 0;
  color: #5C5C5C;
  font-size: 0.8rem;
  font-weight: 700;
  fill: #5C5C5C;
}
.chart .datalebel-total > strong {
  display: block;
  margin: 0.15rem 0;
  color: #5C5C5C;
  font-size: 0.7rem;
  font-weight: 700;
  fill: #5C5C5C;
}
.chart.pie .highcharts-series-group path {
  stroke: transparent;
  stroke-width: 0;
}
.chart.pie .highcharts-legend span {
  display: flex;
  color: #5C5C5C;
  font-weight: 700;
  font-size: 0.8rem;
  fill: #5C5C5C;
  dominant-baseline: text-after-edge;
  fill: #5C5C5C;
}
.chart.pie .highcharts-legend span > em {
  color: #5C5C5C;
  font-weight: 700;
  font-size: 0.8rem;
  fill: #5C5C5C;
  dominant-baseline: text-after-edge;
}
.chart.pie .highcharts-legend span strong {
  color: #5C5C5C;
  font-size: 1.1rem;
}
.chart.pie .highcharts-legend .pie-cont {
  margin-left: 0.5rem;
  dominant-baseline: text-after-edge;
}
.chart.pie .highcharts-legend-item > span {
  transform: translateY(-10px);
  -webkit-transform: translateY(-10px);
  -moz-transform: translateY(-10px);
}
.chart.pie.donut .highcharts-legend-item:before {
  position: absolute;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: #fff;
  transform: translate(50%, 9px);
  -webkit-transform: translate(50%, 9px);
  -moz-transform: translate(50%, 9px);
  content: "";
}
.chart.pie.donut .highcharts-legend-item > span {
  transform: translateY(-10px);
  -webkit-transform: translateY(-10px);
  -moz-transform: translateY(-10px);
}
.chart.pie.donut .donut-total {
  color: #333;
  font-size: 1.6rem;
  font-weight: 700;
}
.chart.pie.donut .donut-total > em {
  display: inline-block;
  margin-left: 0.25rem;
  color: #555;
  font-size: 0.8rem;
  font-weight: 400;
  vertical-align: middle;
}
.chart.pie .highcharts-subtitle .donut-tit {
  color: #262626 !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
}
.chart.pie .highcharts-subtitle .donut-tit2 {
  display: block;
  color: #3E3E3E !important;
  font-size: 1rem !important;
}
.chart.pie .highcharts-subtitle .donut-stit {
  display: block;
  margin-top: 0.5rem;
  color: #5C5C5C !important;
  font-size: 0.8rem !important;
}
.chart.pie .highcharts-subtitle .donut-stit2 {
  display: block;
  color: #3E3E3E !important;
  font-size: 1rem !important;
  line-height: 1;
}
.chart.pie .highcharts-subtitle .donut-stit2 > em {
  color: #3E3E3E;
  font-size: 2.5rem;
  font-weight: 700;
}
.chart.bar-graph-color-chart .bar-graph-color-label {
  display: block;
  width: 100px;
  text-align: left;
}
.chart.bar-graph-color-chart .bar-graph-color-label > em {
  display: inline-block;
  width: 0.8rem;
  height: 0.8rem;
  margin-right: 0.25rem;
  vertical-align: middle;
}
.chart.gauge .highcharts-axis *, .chart.gauge .highcharts-axis-labels * {
  color: transparent !important;
  fill: none !important;
}
.chart.gauge .pie-cont-bg {
  color: #5C5C5C;
  font-size: 0.9rem;
  text-align: center;
}
.chart.gauge .pie-cont-bg .pie-cont {
  display: block;
  background: linear-gradient(90deg, #7BC6AB 0%, #64A0D3 83.51%);
  color: #64A0D3;
  font-size: 2.5rem;
  font-weight: 800;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.chart.gauge .pie-cont-bg .pie-cont > em {
  color: #262626 !important;
  font-size: 1rem !important;
  -webkit-text-fill-color: #262626;
}
.chart.vtGraph .highcharts-data-labels {
  width: 100%;
}
.chart.vtGraph .highcharts-data-labels .highcharts-label:first-of-type text {
  font-size: 0.9rem !important;
}
.chart.vtGraph .highcharts-data-labels .highcharts-label text {
  color: #fff !important;
  font-size: 1.1rem !important;
  font-weight: 600 !important;
  fill: #fff !important;
  stroke: none !important;
}
.chart.vtGraph .highcharts-data-labels .highcharts-label text > tspan {
  display: none !important;
}
.chart.twoline [class^=pie-cont-bg] {
  padding: 0.1rem 0.5rem;
  border-radius: 0.5rem;
  background: linear-gradient(90deg, #7BC6AB 0%, #64A0D3 100%);
  color: #fff !important;
  font-size: 0.8rem !important;
  font-weight: 700;
}
.chart .legend-srl > span > strong {
  float: right;
}
.chart .legend-srl > span > strong > em {
  font-weight: 700;
}

/* chart : guage */
.guage-wrap {
  position: relative;
  width: 85%;
  margin: auto;
}
.guage-wrap .guage-chart1 .st0 {
  fill: #8397EA;
}
.guage-wrap .guage-chart1 .st1 {
  opacity: 0.5;
  fill: #EBEAEA;
}
.guage-wrap .guage-chart1 .st2 {
  fill: #D4D6EC;
}
.guage-wrap .guage-chart1 .st3 {
  fill: #283584;
}
.guage-wrap .guage-chart1 .st4 {
  fill: #6EB79B;
}
.guage-wrap .guage-chart1 .st5 {
  fill: #F3F9F7;
}
.guage-wrap .guage-chart1 .st6 {
  fill: none;
}
.guage-wrap .guage-chart1 .st7 {
  fill: #2C493E;
}
.guage-wrap .guage-chart1 .st8 {
  fill: #B2B2B2;
}
.guage-wrap .guage-chart1 .st9 {
  fill: #FBFBFC;
}
.guage-wrap .guage-chart1 .st10 {
  fill: #606060;
}
.guage-wrap .guage-chart1 .st11 {
  fill: #FFA178;
}
.guage-wrap .guage-chart1 .st12 {
  fill: #FDF2EC;
}
.guage-wrap .guage-chart1 .st13 {
  fill: #D84200;
}
.guage-wrap .guage-chart1 .st14 {
  fill: #E06463;
}
.guage-wrap .guage-chart1 .st15 {
  fill: #FDEFEF;
}
.guage-wrap .guage-chart1 .st16 {
  fill: #A31010;
}
.guage-wrap .guage-chart1 .st17 {
  clip-path: url(#SVGID_00000158028489623362084620000013154996806529741715_);
  fill: #EBEAEA;
}
.guage-wrap .guage-chart1 .st18 {
  fill: #EBEAEA;
}
.guage-wrap .guage-chart1 #pin [id^=pin] {
  display: none;
}
.guage-wrap .guage-chart1 [id^=level] {
  opacity: 0.75;
}
.guage-wrap.gauge-level1 #level1 {
  opacity: 1;
}
.guage-wrap.gauge-level1 #pin #pin1 {
  display: block;
}
.guage-wrap.gauge-level2 #level2 {
  opacity: 1;
}
.guage-wrap.gauge-level2 #pin #pin2 {
  display: block;
}
.guage-wrap.gauge-level3 #level3 {
  opacity: 1;
}
.guage-wrap.gauge-level3 #pin #pin3 {
  display: block;
}
.guage-wrap.gauge-level4 #level4 {
  opacity: 1;
}
.guage-wrap.gauge-level4 #pin #pin4 {
  display: block;
}
.guage-wrap.gauge-level5 #level5 {
  opacity: 1;
}
.guage-wrap.gauge-level5 #pin #pin5 {
  display: block;
}
.guage-wrap .guage-state {
  position: absolute;
  bottom: 1.5rem;
  left: 50%;
  color: #107F93;
  font-size: 1.1rem;
  font-weight: 700;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
}

/* badge-staus */
/* 정상 */
.status-badge1 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 1rem;
  border-radius: 1rem;
  background: #36D5BB;
  color: #fff;
  font-size: 0.7rem;
  font-weight: 400;
  margin-left: 0.25rem;
}

/* 이상 */
.status-badge2 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 1rem;
  border-radius: 1rem;
  background: #FFB027;
  color: #fff;
  font-size: 0.7rem;
  font-weight: 400;
  margin-left: 0.25rem;
}

/* 중단 */
.status-badge3 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 1rem;
  border-radius: 1rem;
  background: #FC1F1F;
  color: #fff;
  font-size: 0.7rem;
  font-weight: 400;
  margin-left: 0.25rem;
}

/* 운영 중비중 */
.status-badge4 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 1rem;
  border-radius: 1rem;
  background: #536aff;
  color: #fff;
  font-size: 0.7rem;
  font-weight: 400;
  margin-left: 0.25rem;
}

/* 미사용 */
.status-badge5 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 1rem;
  border-radius: 1rem;
  background: #000;
  color: #fff;
  font-size: 0.7rem;
  font-weight: 400;
  margin-left: 0.25rem;
}

/* 기본 아이콘 사이즈 */
.list-icon-size {
  width: 1rem;
  height: 1rem;
  color: #a1a1a1;
}

/* flex 정렬 */
/*--🔹 responsive 🔹--*/
@media (min-width: 769px) {
  /*--🔸 Table(default type) 🔸--*/
  /* Add row */
  div[class*=tbl-st] table .add-row-wrap .add-row:hover:before {
    transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
  }
  /*--🔸 Calendar Table(tr, td background 색상) 🔸--*/
  #calendar .fc-button-group .fc-button:hover, #calendar .fc-button-group .fc-button:focus {
    border-color: #c4c4c4;
    outline: 0;
    box-shadow: none;
  }
  #calendar .fc-button-group .fc-button:hover:before, #calendar .fc-button-group .fc-button:focus:before {
    transform: translateX(-0.1rem);
    -webkit-transform: translateX(-0.1rem);
    -moz-transform: translateX(-0.1rem);
  }
  #calendar .fc-button-group .fc-button.fc-next-button:hover:before, #calendar .fc-button-group .fc-button.fc-next-button:focus:before {
    transform: translateX(0.1rem);
    -webkit-transform: translateX(0.1rem);
    -moz-transform: translateX(0.1rem);
  }
  /*--🔸 Datepicker 🔸--*/
  .ui-datepicker td:not(.ui-datepicker-today, .ui-datepicker-current-day) a:hover {
    color: #333 !important;
  }
  .ui-datepicker td:not(.ui-datepicker-today, .ui-datepicker-current-day) a:hover:before {
    opacity: 1;
  }
  .ui-datepicker select.ui-datepicker-year,
  .ui-datepicker select.ui-datepicker-month {
    margin-right: 0.25rem;
    border: 1px solid #DCDCDC;
  }
  .calendar-input [class*=InpSel]:hover + .calendar-picker-btn:before {
    color: #107F93;
  }
  /*--🔸 Tab(default) 🔸--*/
  .tab-st {
    /* Tab(1차) */
    /* Tab(2차) */
  }
  .tab-st1 li:not(.on) a:hover {
    color: #333;
    font-weight: 700;
  }
  .tab-st2 li.on a:hover, .tab-st2 li.on a:hover:after {
    color: #22499d;
    font-weight: 600;
  }
  /* Tab(list type) */
  .tab-list li:not(#current) a:hover {
    color: #fff;
    font-weight: 700;
    background: linear-gradient(90deg, #22859B 11%, #009A80 89%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  /*--🔸 Btn(default) 🔸--*/
  [class^=btn-style]:hover {
    background: transparent;
  }
  .btn-style1:hover {
    background: #EEF2F5;
  }
  .btn-style2:hover {
    background: linear-gradient(90deg, #22859B 11%, #009A80 89%);
  }
  .btn-style2:hover > span {
    color: #107F93;
    background: linear-gradient(90deg, #22859B 11%, #009A80 89%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  .btn-style2:hover:before {
    opacity: 1;
  }
  .btn-style3:hover {
    background: #F1FAFC;
  }
  .btn-style4:hover {
    color: #fff;
    background: #E42648;
  }
  .btn-style5:hover {
    color: #16343C;
  }
  .btn-style6:hover {
    color: #E42648;
    border: 1px solid #E42648;
  }
  .btn-style7:hover {
    background: #fff;
  }
  .btn-style8:hover {
    background: #fff;
    color: #333;
  }
  .btn-style9:hover {
    background: #fff;
    color: #333;
  }
  /* more btn */
  .more-btn:hover > i {
    transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
  }
  /*--🔸 Input/Select 🔸--*/
  input[class*=InpSel]:disabled:hover {
    background: #F3F3F3 !important;
    border: 1px solid #DCDCDC !important;
  }
  input[class*=InpSel]:not([disabled]):hover,
  input[class*=InpSel]:not(.InpSel-wrong):hover,
  textarea[class*=InpSel]:not([disabled]):hover,
  [class*=InpSel] select:not([disabled]):hover {
    border: double 1px transparent;
    background-image: linear-gradient(#fff, #fff), linear-gradient(90deg, #22859B 11%, #009A80 89%);
    background-origin: border-box;
    background-clip: padding-box, border-box;
    outline: 0;
  }
  input[class*=InpSel].InpSel-wrong:hover {
    border: double 1px transparent;
    background-image: linear-gradient(#fff, #fff), linear-gradient(90deg, #B12727 0%, #B12727 10%);
    background-origin: border-box;
    background-clip: padding-box, border-box;
    outline: 0;
  }
  /*--🔸 Search filter 🔸--*/
  [class^=srh-filter] .keyword > ul > li > a:hover {
    border-color: #107F93;
  }
  /* serch form */
  .srh-frm .InpSel:hover + button {
    color: #107F93;
  }
  .srh-frm button:hover {
    color: #107F93;
  }
  .srh-frm button:hover i {
    transform: rotate(-90deg) translateX(-0.05rem);
    -webkit-transform: rotate(-90deg) translateX(-0.05rem);
    -moz-transform: rotate(-90deg) translateX(-0.05rem);
  }
}
/* 1600px */
@media (max-width: 1600px) {
  .col-wrap {
    flex-wrap: wrap;
  }
  .col-wrap [class^=col-md] {
    width: 100%;
  }
}
/* 1200px */
@media (max-width: 1200px) {
  [class^=srh-filter].res1 > ul > li {
    display: flex;
    align-items: center;
  }
  [class^=srh-filter].res1 > ul > li > div {
    flex: 1;
  }
  .tbl-st {
    max-width: 100%;
    overflow-x: auto;
    padding-bottom: 1rem;
  }
  .tbl-st::-webkit-scrollbar {
    height: 0.25rem;
  }
  .tbl-st table {
    width: calc(100% + 1px) !important;
    table-layout: auto !important;
  }
  .tbl-st.scroll-gr-y::-webkit-scrollbar {
    width: 0.25rem !important;
  }
}
/* 1024 */
@media (max-width: 1400px) {
  /* 탭 : 반응형 */
  div.reactTab {
    height: 0;
    margin-bottom: 1.5rem;
    padding-top: 2.25rem;
    overflow: hidden;
    /* Tab(1차) */
    /* Tab(2차) */
    /* Tab(3차) */
  }
  div.reactTab ul[class^=tab-st] {
    position: static;
    display: block;
    margin: 0;
    text-align: left;
    margin-bottom: 0;
    overflow: hidden;
  }
  div.reactTab ul[class^=tab-st] > li {
    display: block;
    width: 100% !important;
    /* Tab(active) */
  }
  div.reactTab ul[class^=tab-st] > li a {
    position: relative;
    display: table;
    table-layout: fixed;
    width: 100%;
    height: 2.25rem;
    padding: 0 0.5rem 0;
    color: #8c8c8c;
    background: #f7f8fc;
  }
  div.reactTab ul[class^=tab-st] > li.on a {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
  }
  div.reactTab ul[class^=tab-st] > li.on a:after {
    content: "\e944";
    position: absolute;
    top: 50%;
    right: 1rem;
    font-family: "xeicon";
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    transition: all 0.3s;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    z-index: 2;
  }
  div.reactTab ul[class^=tab-st] > li.on span, div.reactTab ul[class^=tab-st] > li#current span {
    padding: 0;
  }
  div.reactTab ul[class^=tab-st] > li.on span:before, div.reactTab ul[class^=tab-st] > li.on span:before, div.reactTab ul[class^=tab-st] > li#current span:before, div.reactTab ul[class^=tab-st] > li#current span:before {
    display: none;
  }
  div.reactTab ul > li.on a, div.reactTab.ov ul > li.on a, div.reactTab ul[class^=tab-st] > li#current a {
    padding: 0 2.25rem 0 0.5rem;
  }
  div.reactTab.ov ul > li.on > a:after {
    transform: translateY(-50%) rotate(180deg);
    -webkit-transform: translateY(-50%) rotate(180deg);
    -moz-transform: translateY(-50%) rotate(180deg);
  }
  div.reactTab.tab-st1-box .tab-st1 > li.on > a {
    background: #fff;
  }
  div.reactTab.tab-st-box2 .tab-st2:before {
    display: none;
  }
  div.reactTab.tab-st-box2 .tab-st2 > li.on > a {
    background: #fff;
  }
  div.reactTab.tab-st-box3 {
    border-radius: 0.5rem;
  }
  div.reactTab.tab-st-box3 .tab-st3 > li > a {
    border-radius: 0;
  }
  div.reactTab.tab-st-box3 .tab-st3 > li.on > a {
    border-radius: 0.5rem;
  }
  div.reactTab.tab-st-box3 .tab-st3 > li.on > a:after {
    color: #fff;
  }
  /* Tab(1차) */
  .tab-st1 > li {
    width: 50%;
    margin: 0;
  }
  /* Tab(1차) */
  .tab-st2 > li {
    width: 50%;
    margin: 0;
  }
  /* Tab(1차) */
  .tab-st3 > li {
    width: 50%;
    margin: 0;
  }
  .tab-st3 > li > a {
    width: 100%;
  }
  /* 탭 :개수 지정 */
  .Tab_w20 > li {
    width: 25%;
  }
  /* 리스트 :가로 나열 */
  .li_w20 > li {
    width: 25%;
  }
  /* 테이블 - 기타 */
  .tbl_utile {
    margin-top: 0;
  }
}
/* 850px */
@media screen and (max-width: 850px) {
  [class^=srh-filter] > ul > li {
    width: 100%;
  }
}
/* 768px */
@media (max-width: 768px) {
  div[class*=tbl-st] table td {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}
/* 480px */
@media (max-width: 480px) {
  input[class*=InpSel], textarea[class*=InpSel], [class*=InpSel] select {
    font-size: 0.7rem;
  }
}