@charset "UTF-8";
/*-------------------------------------------------
title :style guied style sheet
Author :Gahye Park
Create date :2023. 05. 10
-------------------------------------------------*/
/*!
 * animate.css -https://daneden.github.io/animate.css/
 * Version - 3.7.2
 * Licensed under the MIT license - http://opensource.org/licenses/MIT
 *
 * Copyright (c) 2019 Daniel Eden
 */
@import "../font/pretendard/fonts.css";
@import "../font/NotoSansKR/fonts.css";
@import "../font/line-awesome/line-awesome.min.css";
@import "../font/xeicon/xeicon.min.css";

:root {
  /* 기존 포인트 폰트 컬러 그라디언트 색상 */
  /* 폰트 컬러 */
  --color-point-1: #3BBBCA;
  /* 요소의 배경 일 때 */
  --gradient-bg1: linear-gradient(90deg, #7CC5AE 0%, #67A4D1 100%);
  /* 그래프, 게이지 */
  --gradient-bg2: linear-gradient(180deg, #7EC7AF 0%, #68A4D4 100%);
  /* 폰트에 그라디언트 색상 */
  --gradient-text: linear-gradient(90deg, #7BC6AB 0%, #64A0D3 83.51%);
  /* 명도대비 고려 포인트 폰트 컬러 그라디언트 색상 */
  --color-point-1-second: #107F93;
  /* 요소의 배경 일 때 */
  --gradient-bg1-second: linear-gradient(90deg, #00b073 0%, #0C75CA 100%);
  /* 그래프, 게이지 */
  --gradient-bg2-second: linear-gradient(180deg, #00b073 0%, #0C75CA 100%);
  /* 폰트에 그라디언트 색상 */
  --gradient-text-second: linear-gradient(90deg, #00b073 0%, #0C75CA 83.51%);
}

@keyframes bellRing {
  0%, 50% {
    transform: rotate(0deg);
  }
  5%, 15%, 25%, 35%, 45% {
    transform: rotate(10deg);
  }
  10%, 20%, 30%, 40% {
    transform: rotate(-10deg);
  }
}

@keyframes rightArr {
  0%, 50% {
    transform: translateX(0);
  }
  5%, 15%, 25%, 35%, 45% {
    transform: translateX(3px);
  }
  10%, 20%, 30%, 40% {
    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);
  }
  50% {
    transform: rotate(360deg);
  }
  100% {
    transform: rotate(0deg);
  }
}

@keyframes rotateY {
  0% {
    transform: rotateY(0deg);
  }
  50% {
    transform: rotateY(360deg);
  }
  100% {
    transform: rotateY(0deg);
  }
}

@keyframes rotateCenterY {
  0% {
    transform: translateX(-50%) rotateY(0deg);
  }
  50% {
    transform: translateX(-50%) rotateY(360deg);
  }
  100% {
    transform: translateX(-50%) rotateY(0deg);
  }
}

@-webkit-keyframes bounce {
  0%, 20%, 53%, 80%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
  40%, 43% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    -webkit-transform: translate3d(0, -30px, 0);
    transform: translate3d(0, -30px, 0);
  }
  70% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    -webkit-transform: translate3d(0, -15px, 0);
    transform: translate3d(0, -15px, 0);
  }
  90% {
    -webkit-transform: translate3d(0, -4px, 0);
    transform: translate3d(0, -4px, 0);
  }
}

@keyframes bounce {
  0%, 20%, 53%, 80%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
  40%, 43% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    -webkit-transform: translate3d(0, -30px, 0);
    transform: translate3d(0, -30px, 0);
  }
  70% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    -webkit-transform: translate3d(0, -15px, 0);
    transform: translate3d(0, -15px, 0);
  }
  90% {
    -webkit-transform: translate3d(0, -4px, 0);
    transform: translate3d(0, -4px, 0);
  }
}

.bounce {
  -webkit-animation-name: bounce;
  animation-name: bounce;
  -webkit-transform-origin: center bottom;
  transform-origin: center bottom;
}

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

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

.flash {
  -webkit-animation-name: flash;
  animation-name: flash;
}

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

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

.pulse {
  -webkit-animation-name: pulse;
  animation-name: pulse;
}

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

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

.rubberBand {
  -webkit-animation-name: rubberBand;
  animation-name: rubberBand;
}

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

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

.shake {
  -webkit-animation-name: shake;
  animation-name: shake;
}

@-webkit-keyframes headShake {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
  6.5% {
    -webkit-transform: translateX(-6px) rotateY(-9deg);
    transform: translateX(-6px) rotateY(-9deg);
  }
  18.5% {
    -webkit-transform: translateX(5px) rotateY(7deg);
    transform: translateX(5px) rotateY(7deg);
  }
  31.5% {
    -webkit-transform: translateX(-3px) rotateY(-5deg);
    transform: translateX(-3px) rotateY(-5deg);
  }
  43.5% {
    -webkit-transform: translateX(2px) rotateY(3deg);
    transform: translateX(2px) rotateY(3deg);
  }
  50% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}

@keyframes headShake {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
  6.5% {
    -webkit-transform: translateX(-6px) rotateY(-9deg);
    transform: translateX(-6px) rotateY(-9deg);
  }
  18.5% {
    -webkit-transform: translateX(5px) rotateY(7deg);
    transform: translateX(5px) rotateY(7deg);
  }
  31.5% {
    -webkit-transform: translateX(-3px) rotateY(-5deg);
    transform: translateX(-3px) rotateY(-5deg);
  }
  43.5% {
    -webkit-transform: translateX(2px) rotateY(3deg);
    transform: translateX(2px) rotateY(3deg);
  }
  50% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}

.headShake {
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
  -webkit-animation-name: headShake;
  animation-name: headShake;
}

@-webkit-keyframes swing {
  20% {
    -webkit-transform: rotate(15deg);
    transform: rotate(15deg);
  }
  40% {
    -webkit-transform: rotate(-10deg);
    transform: rotate(-10deg);
  }
  60% {
    -webkit-transform: rotate(5deg);
    transform: rotate(5deg);
  }
  80% {
    -webkit-transform: rotate(-5deg);
    transform: rotate(-5deg);
  }
  to {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
}

@keyframes swing {
  20% {
    -webkit-transform: rotate(15deg);
    transform: rotate(15deg);
  }
  40% {
    -webkit-transform: rotate(-10deg);
    transform: rotate(-10deg);
  }
  60% {
    -webkit-transform: rotate(5deg);
    transform: rotate(5deg);
  }
  80% {
    -webkit-transform: rotate(-5deg);
    transform: rotate(-5deg);
  }
  to {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
}

.swing {
  -webkit-transform-origin: top center;
  transform-origin: top center;
  -webkit-animation-name: swing;
  animation-name: swing;
}

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

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

.tada {
  -webkit-animation-name: tada;
  animation-name: tada;
}

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

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

.wobble {
  -webkit-animation-name: wobble;
  animation-name: wobble;
}

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

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

.jello {
  -webkit-animation-name: jello;
  animation-name: jello;
  -webkit-transform-origin: center;
  transform-origin: center;
}

@-webkit-keyframes heartBeat {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  14% {
    -webkit-transform: scale(1.3);
    transform: scale(1.3);
  }
  28% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  42% {
    -webkit-transform: scale(1.3);
    transform: scale(1.3);
  }
  70% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

@keyframes heartBeat {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  14% {
    -webkit-transform: scale(1.3);
    transform: scale(1.3);
  }
  28% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  42% {
    -webkit-transform: scale(1.3);
    transform: scale(1.3);
  }
  70% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

.heartBeat {
  -webkit-animation-name: heartBeat;
  animation-name: heartBeat;
  -webkit-animation-duration: 1.3s;
  animation-duration: 1.3s;
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
}

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

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

.bounceIn {
  -webkit-animation-duration: 0.75s;
  animation-duration: 0.75s;
  -webkit-animation-name: bounceIn;
  animation-name: bounceIn;
}

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

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

.bounceInDown {
  -webkit-animation-name: bounceInDown;
  animation-name: bounceInDown;
}

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

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

.bounceInLeft {
  -webkit-animation-name: bounceInLeft;
  animation-name: bounceInLeft;
}

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

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

.bounceInRight {
  -webkit-animation-name: bounceInRight;
  animation-name: bounceInRight;
}

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

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

.bounceInUp {
  -webkit-animation-name: bounceInUp;
  animation-name: bounceInUp;
}

@-webkit-keyframes bounceOut {
  20% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9);
    transform: scale3d(0.9, 0.9, 0.9);
  }
  50%, 55% {
    opacity: 1;
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1);
  }
  to {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }
}

@keyframes bounceOut {
  20% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9);
    transform: scale3d(0.9, 0.9, 0.9);
  }
  50%, 55% {
    opacity: 1;
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1);
  }
  to {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }
}

.bounceOut {
  -webkit-animation-duration: 0.75s;
  animation-duration: 0.75s;
  -webkit-animation-name: bounceOut;
  animation-name: bounceOut;
}

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

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

.bounceOutDown {
  -webkit-animation-name: bounceOutDown;
  animation-name: bounceOutDown;
}

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

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

.bounceOutLeft {
  -webkit-animation-name: bounceOutLeft;
  animation-name: bounceOutLeft;
}

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

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

.bounceOutRight {
  -webkit-animation-name: bounceOutRight;
  animation-name: bounceOutRight;
}

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

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

.bounceOutUp {
  -webkit-animation-name: bounceOutUp;
  animation-name: bounceOutUp;
}

@-webkit-keyframes fadeIn {
  0% {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.fadeIn {
  -webkit-animation-name: fadeIn;
  animation-name: fadeIn;
}

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

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

.fadeInDown {
  -webkit-animation-name: fadeInDown;
  animation-name: fadeInDown;
}

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

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

.fadeInDownBig {
  -webkit-animation-name: fadeInDownBig;
  animation-name: fadeInDownBig;
}

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

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

.fadeInLeft {
  -webkit-animation-name: fadeInLeft;
  animation-name: fadeInLeft;
}

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

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

.fadeInLeftBig {
  -webkit-animation-name: fadeInLeftBig;
  animation-name: fadeInLeftBig;
}

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

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

.fadeInRight {
  -webkit-animation-name: fadeInRight;
  animation-name: fadeInRight;
}

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

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

.fadeInRightBig {
  -webkit-animation-name: fadeInRightBig;
  animation-name: fadeInRightBig;
}

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

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

.fadeInUp {
  -webkit-animation-name: fadeInUp;
  animation-name: fadeInUp;
}

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

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

.fadeInUpBig {
  -webkit-animation-name: fadeInUpBig;
  animation-name: fadeInUpBig;
}

@-webkit-keyframes fadeOut {
  0% {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

@keyframes fadeOut {
  0% {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

.fadeOut {
  -webkit-animation-name: fadeOut;
  animation-name: fadeOut;
}

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

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

.fadeOutDown {
  -webkit-animation-name: fadeOutDown;
  animation-name: fadeOutDown;
}

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

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

.fadeOutDownBig {
  -webkit-animation-name: fadeOutDownBig;
  animation-name: fadeOutDownBig;
}

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

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

.fadeOutLeft {
  -webkit-animation-name: fadeOutLeft;
  animation-name: fadeOutLeft;
}

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

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

.fadeOutLeftBig {
  -webkit-animation-name: fadeOutLeftBig;
  animation-name: fadeOutLeftBig;
}

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

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

.fadeOutRight {
  -webkit-animation-name: fadeOutRight;
  animation-name: fadeOutRight;
}

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

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

.fadeOutRightBig {
  -webkit-animation-name: fadeOutRightBig;
  animation-name: fadeOutRightBig;
}

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

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

.fadeOutUp {
  -webkit-animation-name: fadeOutUp;
  animation-name: fadeOutUp;
}

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

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

.fadeOutUpBig {
  -webkit-animation-name: fadeOutUpBig;
  animation-name: fadeOutUpBig;
}

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

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

.animated.flip {
  -webkit-backface-visibility: visible;
  backface-visibility: visible;
  -webkit-animation-name: flip;
  animation-name: flip;
}

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

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

.flipInX {
  -webkit-backface-visibility: visible !important;
  backface-visibility: visible !important;
  -webkit-animation-name: flipInX;
  animation-name: flipInX;
}

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

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

.flipInY {
  -webkit-backface-visibility: visible !important;
  backface-visibility: visible !important;
  -webkit-animation-name: flipInY;
  animation-name: flipInY;
}

@-webkit-keyframes flipOutX {
  0% {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }
  30% {
    -webkit-transform: perspective(400px) rotateX(-20deg);
    transform: perspective(400px) rotateX(-20deg);
    opacity: 1;
  }
  to {
    -webkit-transform: perspective(400px) rotateX(90deg);
    transform: perspective(400px) rotateX(90deg);
    opacity: 0;
  }
}

@keyframes flipOutX {
  0% {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }
  30% {
    -webkit-transform: perspective(400px) rotateX(-20deg);
    transform: perspective(400px) rotateX(-20deg);
    opacity: 1;
  }
  to {
    -webkit-transform: perspective(400px) rotateX(90deg);
    transform: perspective(400px) rotateX(90deg);
    opacity: 0;
  }
}

.flipOutX {
  -webkit-animation-duration: 0.75s;
  animation-duration: 0.75s;
  -webkit-animation-name: flipOutX;
  animation-name: flipOutX;
  -webkit-backface-visibility: visible !important;
  backface-visibility: visible !important;
}

@-webkit-keyframes flipOutY {
  0% {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }
  30% {
    -webkit-transform: perspective(400px) rotateY(-15deg);
    transform: perspective(400px) rotateY(-15deg);
    opacity: 1;
  }
  to {
    -webkit-transform: perspective(400px) rotateY(90deg);
    transform: perspective(400px) rotateY(90deg);
    opacity: 0;
  }
}

@keyframes flipOutY {
  0% {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }
  30% {
    -webkit-transform: perspective(400px) rotateY(-15deg);
    transform: perspective(400px) rotateY(-15deg);
    opacity: 1;
  }
  to {
    -webkit-transform: perspective(400px) rotateY(90deg);
    transform: perspective(400px) rotateY(90deg);
    opacity: 0;
  }
}

.flipOutY {
  -webkit-animation-duration: 0.75s;
  animation-duration: 0.75s;
  -webkit-backface-visibility: visible !important;
  backface-visibility: visible !important;
  -webkit-animation-name: flipOutY;
  animation-name: flipOutY;
}

@-webkit-keyframes lightSpeedIn {
  0% {
    -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg);
    transform: translate3d(100%, 0, 0) skewX(-30deg);
    opacity: 0;
  }
  60% {
    -webkit-transform: skewX(20deg);
    transform: skewX(20deg);
    opacity: 1;
  }
  80% {
    -webkit-transform: skewX(-5deg);
    transform: skewX(-5deg);
  }
  to {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
}

@keyframes lightSpeedIn {
  0% {
    -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg);
    transform: translate3d(100%, 0, 0) skewX(-30deg);
    opacity: 0;
  }
  60% {
    -webkit-transform: skewX(20deg);
    transform: skewX(20deg);
    opacity: 1;
  }
  80% {
    -webkit-transform: skewX(-5deg);
    transform: skewX(-5deg);
  }
  to {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
}

.lightSpeedIn {
  -webkit-animation-name: lightSpeedIn;
  animation-name: lightSpeedIn;
  -webkit-animation-timing-function: ease-out;
  animation-timing-function: ease-out;
}

@-webkit-keyframes lightSpeedOut {
  0% {
    opacity: 1;
  }
  to {
    -webkit-transform: translate3d(100%, 0, 0) skewX(30deg);
    transform: translate3d(100%, 0, 0) skewX(30deg);
    opacity: 0;
  }
}

@keyframes lightSpeedOut {
  0% {
    opacity: 1;
  }
  to {
    -webkit-transform: translate3d(100%, 0, 0) skewX(30deg);
    transform: translate3d(100%, 0, 0) skewX(30deg);
    opacity: 0;
  }
}

.lightSpeedOut {
  -webkit-animation-name: lightSpeedOut;
  animation-name: lightSpeedOut;
  -webkit-animation-timing-function: ease-in;
  animation-timing-function: ease-in;
}

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

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

.rotateIn {
  -webkit-animation-name: rotateIn;
  animation-name: rotateIn;
}

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

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

.rotateInDownLeft {
  -webkit-animation-name: rotateInDownLeft;
  animation-name: rotateInDownLeft;
}

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

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

.rotateInDownRight {
  -webkit-animation-name: rotateInDownRight;
  animation-name: rotateInDownRight;
}

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

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

.rotateInUpLeft {
  -webkit-animation-name: rotateInUpLeft;
  animation-name: rotateInUpLeft;
}

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

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

.rotateInUpRight {
  -webkit-animation-name: rotateInUpRight;
  animation-name: rotateInUpRight;
}

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

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

.rotateOut {
  -webkit-animation-name: rotateOut;
  animation-name: rotateOut;
}

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

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

.rotateOutDownLeft {
  -webkit-animation-name: rotateOutDownLeft;
  animation-name: rotateOutDownLeft;
}

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

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

.rotateOutDownRight {
  -webkit-animation-name: rotateOutDownRight;
  animation-name: rotateOutDownRight;
}

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

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

.rotateOutUpLeft {
  -webkit-animation-name: rotateOutUpLeft;
  animation-name: rotateOutUpLeft;
}

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

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

.rotateOutUpRight {
  -webkit-animation-name: rotateOutUpRight;
  animation-name: rotateOutUpRight;
}

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

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

.hinge {
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
  -webkit-animation-name: hinge;
  animation-name: hinge;
}

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

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

.jackInTheBox {
  -webkit-animation-name: jackInTheBox;
  animation-name: jackInTheBox;
}

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

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

.rollIn {
  -webkit-animation-name: rollIn;
  animation-name: rollIn;
}

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

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

.rollOut {
  -webkit-animation-name: rollOut;
  animation-name: rollOut;
}

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

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

.zoomIn {
  -webkit-animation-name: zoomIn;
  animation-name: zoomIn;
}

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

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

.zoomInDown {
  -webkit-animation-name: zoomInDown;
  animation-name: zoomInDown;
}

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

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

.zoomInLeft {
  -webkit-animation-name: zoomInLeft;
  animation-name: zoomInLeft;
}

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

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

.zoomInRight {
  -webkit-animation-name: zoomInRight;
  animation-name: zoomInRight;
}

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

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

.zoomInUp {
  -webkit-animation-name: zoomInUp;
  animation-name: zoomInUp;
}

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

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

.zoomOut {
  -webkit-animation-name: zoomOut;
  animation-name: zoomOut;
}

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

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

.zoomOutDown {
  -webkit-animation-name: zoomOutDown;
  animation-name: zoomOutDown;
}

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

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

.zoomOutLeft {
  -webkit-animation-name: zoomOutLeft;
  animation-name: zoomOutLeft;
}

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

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

.zoomOutRight {
  -webkit-animation-name: zoomOutRight;
  animation-name: zoomOutRight;
}

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

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

.zoomOutUp {
  -webkit-animation-name: zoomOutUp;
  animation-name: zoomOutUp;
}

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

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

.slideInDown {
  -webkit-animation-name: slideInDown;
  animation-name: slideInDown;
}

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

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

.slideInLeft {
  -webkit-animation-name: slideInLeft;
  animation-name: slideInLeft;
}

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

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

.slideInRight {
  -webkit-animation-name: slideInRight;
  animation-name: slideInRight;
}

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

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

.slideInUp {
  -webkit-animation-name: slideInUp;
  animation-name: slideInUp;
}

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

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

.slideOutDown {
  -webkit-animation-name: slideOutDown;
  animation-name: slideOutDown;
}

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

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

.slideOutLeft {
  -webkit-animation-name: slideOutLeft;
  animation-name: slideOutLeft;
}

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

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

.slideOutRight {
  -webkit-animation-name: slideOutRight;
  animation-name: slideOutRight;
}

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

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

.slideOutUp {
  -webkit-animation-name: slideOutUp;
  animation-name: slideOutUp;
}

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

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

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

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

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

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

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

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

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

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

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

@media (prefers-reduced-motion: reduce), (print) {
  .animated {
    -webkit-animation-duration: 1ms !important;
    animation-duration: 1ms !important;
    transition-duration: 1ms !important;
    -webkit-animation-iteration-count: 1 !important;
    animation-iteration-count: 1 !important;
  }
}

/*-------------------------------------------------
title : variables style sheet
Author : Gahye Park
Create date :2021. 12. 06
-------------------------------------------------*/
/* title : mixin style sheet ·  Author : Gahye Park · Create date :2024. 01. 04 */
/*-------------------------------------------------
title : variables style sheet
Author : Gahye Park
Create date :2021. 12. 06
-------------------------------------------------*/
/*************************************
    # dashboard 공통 변수
************************************/
/* font family */
/* font color */
input[class*=InpSel],
textarea[class*=InpSel],
[class*=InpSel] select, .tit-list ul > li > div > * {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.txt-area{
  overflow: visible !important;
  white-space: normal !important;
  word-break: keep-all !important;
  word-wrap: break-word !important;
}


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

/* responsive */
/* Guide Layout */
.Guide_con .code-all-ctrl {
  display: inline-block;
  padding: 0.15rem 0.5rem;
  background: #202026;
  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 {
  display: block;
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 3rem;
  height: 1px;
  margin-left: -1.5rem;
  background: #282c34;
  border-radius: 1px;
  content: "";
}

.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 #202026;
}

.Guide_con .Guide-titBox2 > a {
  display: block;
  position: absolute;
  top: -0.75rem;
  left: 0;
  padding: 0.15rem 0.5rem;
  background: #202026;
  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 {
  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 .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;
}

/* 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: #3BBBCA;
  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: #3BBBCA;
  color: #3BBBCA;
}

.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: #3BBBCA;
  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;
}

[class*=InpSel].mn-1{
  min-width: 6rem !important;
}
[class*=InpSel].mn-2{
  min-width: 5rem !important;
}
[class*=InpSel].mn-3{
  min-width: 16.5rem !important;
}
[class*=InpSel].mn-4{
  min-width: 8.5rem !important;
}

/* width, height */
.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;
}

/* margin - hj */
/* margin */
.mg {
  /* mgl % 추가 */
}

.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;
}

.mglw20 {
  margin-left: 20% !important;
}

/* 타이틀(공통) */
[class^=titT] {
  line-height: 1.3;
}

h3[class^=tit][class*="1"] + h4[class^=tit][class*="2"],
h4[class^=tit][class*="2"] + h5[class^=tit][class*="3"],
h5[class^=tit][class*="3"] + h6[class^=tit][class*="4"] {
  margin-top: 0.5rem;
}

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

/* 타이틀(텍스트 타입) */
.titT1 {
  margin-bottom: 0.5rem;
  color: #262626;
  font-size: 1.1rem;
  font-weight: 600;
}

.titT2 {
  margin-bottom: 0.5rem;
  color: #262626;
  font-size: 1rem;
  font-weight: 600;
}

.titT3 {
  margin-bottom: 0.5rem;
  color: #262626;
  font-size: 0.9rem;
  font-weight: 600;
}

.titT4 {
  margin-bottom: 0.5rem;
  color: #444;
  font-size: 0.8rem;
}

.titTfl-wrap {
  position: relative;
}

.titTFl {
  position: absolute !important;
  top: 0;
  left: 0;
  z-index: 1;
}

.titTFr {
  position: absolute !important;
  top: 0;
  right: 0;
  z-index: 1;
}

.titT5 {
  margin-bottom: 0.5rem;
  color: #262626;
  font-size: 2rem;
  font-weight: 700;
}

.titT6 {
  color: #444;
  font-size: 1rem;
  font-weight: 500;
}

/* 타이틀(배경 타입) (ej)*/
.tit-bg-type {
  margin-bottom: 0;
  padding: 0.25rem 1rem;
  background: #48515F;
  color: #fff;
}

.tit-bg-type2 {
  margin-bottom: 0;
  padding: 0.25rem 1rem;
  background: #E8E8E8;
  color: #fff;
  color: #444;
}

.tit-bg-type2 > em {
  color: #444;
  font-size: 0.7rem;
  font-weight: 400;
}

.tit-bg-type3 {
  background: #7AC5AB;
  color: #fff;
}

.tit-bg-type4 {
  background: #71B5C1;
  color: #fff;
}

.tit-bg-type5 {
  margin-bottom: 0;
  padding: 0.25rem 1rem;
  background: linear-gradient(90deg, #7BC6AB 0%, #64A0D3 83.51%);
  color: #fff;
}

/* 타이틀(최근업데이트) 240715*/
.update {
  display: inline-block;
  margin-left: 0.25rem;
  padding: 0.25rem 0.5rem;
  background: #F3F5FA;
  border-radius: 1rem;
  color: #5C5C5C;
  font-size: 0.7rem;
  font-weight: 300;
  text-align: center;
  vertical-align: middle;
}

/* 타이틀(설정 연도) */
.tit-util {
  display: inline-block;
  margin-left: 0.25rem;
  padding: 0.2rem 0.8rem;
  border: 1px solid #D0D5E5;
  background: #E7EAF2;
  border-radius: 0.7rem;
  color: #555;
  font-size: 0.7rem;
  font-weight: 400;
  text-align: center;
  vertical-align: middle;
}

/* 타이틀(종합수치)*/
.total-figure {
  /* 접근성 수정 */
  font-weight: 800;
  font-size: 1.75rem;
  background: linear-gradient(90deg, #00b073 0%, #0C75CA 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

/* 타이틀(flex) */
.titFlex {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.titFlex [class^=srh-filter] {
  width: auto;
}

.titFlex2 {
  display: flex;
  align-items: center;
  gap: 1.2rem;
}

.titFlex2 .subFlex {
  display: flex;
  align-items: baseline;
}

.titFlex2 .subFlex > span {
  color: #262626;
  font-size: 0.9rem;
}

.titFlex2 .subFlex > a {
  background: #F4F4F4;
  color: #555;
  font-size: 0.8rem;
  border: none;
  vertical-align: middle;
}

/* titFlex3 -(HJ) */
.titFlex3 {
  display: flex;
  gap: 0.7rem;
  align-items: baseline;
  justify-content: space-between;
  height: 1.4rem;
  margin-bottom: 0.7rem;
  position: relative;
  max-width: 30rem;
  width: 20rem;
}

.titFlex3 > h3 {
  vertical-align: baseline;
}

.titFlex3 > a {
  background: #F4F4F4;
  color: #555;
  border: none;
  position: absolute;
  top: 0;
  margin: 0;
  left: 7.6rem;
}

/* titFlex4 -(HJ) */
.titFlex4 {
  width: 24%;
  max-width: 50%;
  display: flex;
  align-items: baseline;
  position: relative;
}

.titFlex4 > h3 {
  margin-right: 1rem;
  vertical-align: baseline;
}

.titFlex4 a {
  background: #F4F4F4;
  color: #555;
  border: none;
  position: absolute;
  top: 0;
  right: 0;
  margin: 0;
}

/* 타이틀(tit + btns)*/
.tit-btns-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 1rem 0 0.5rem;
}

.tit-btns-wrap [class^=tit] {
  margin: 0;
  flex: 1;
}

.tit-btns-wrap .btns {
  margin: 0;
}

/* tit + check + btn 추가 (hj) */
.tit-check-btns {
  display: flex;
  align-items: center;
  margin: 1rem 0 0.5rem;
  gap: 0.8rem;
}

.tit-check-btns [class^=tit] {
  margin: 0;
}

.tit-check-btns .btns {
  margin: 0;
  flex: 2;
}

.tit-check-btns .btns a {
  float: right;
}

/* tit + location 추가(hj) */
.tit-location {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.tit-location [class^=tit] {
  flex: 1;
}

.tit-location .location {
  color: #7A7B7D;
  font-size: 0.7rem;
}

.tit-location .location > * {
  position: relative;
  display: inline-block;
}

.tit-location .location > * + *:before {
  display: inline-block;
  margin: 0 0.25rem;
  font-family: "Line Awesome Free";
  font-weight: 900;
  content: "\f105";
}

.tit-location .location > strong {
  color: #5B5B5C;
  font-weight: 700;
}

/* 타이틀 info */
.tit-info {
  position: relative;
  display: inline-block;
  color: #444;
  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 hsl(0, 0%, 80%);
  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;
}

/* div(flex) */
.flexWrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.flexWrap2 {
  display: flex;
  align-items: center;
  gap: 3rem;
}

.flexWrap2 > div {
  flex: 1;
}

.flexWrap3 {
  display: flex;
  gap: 1rem;
}

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



.icon-box-wrap9 ul {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0 1.3rem;
}

.icon-box-wrap9 ul > li {
  width: 100%;
}

.icon-box-wrap9 ul > li > div {
  position: relative;
  background: #ABC8D3;
  border-radius: 0.25rem;
  overflow: hidden;
  box-shadow: 2px 2px 5px 1px rgba(0, 0, 0, 0.075);
}

.icon-box-wrap9 ul > li > div:before {
  content: "";
  position: absolute;
  top: 1px;
  left: 1px;
  width: calc(100% - 2px);
  height: calc(100% - 2px);
  border-radius: 0.25rem;
  background: #fff;
  box-shadow: 0 5px 5px rgba(0, 0, 0, 0.25);
}

.icon-box-wrap9 ul > li > div .txt {
  position: relative;
  display: flex;
  padding: 0.5rem;
  border-radius: 0.25rem 0.25rem 0 0;
  border-bottom: 1px dashed #ccc;
  color: #262626;
  font-size: 1rem;
  font-weight: 700;
  text-align: center;
  align-items: center;
  justify-content: center;
}

.icon-box-wrap9 ul > li > div .txt:before {
  content: "";
  position: absolute;
  top: 1px;
  left: 1px;
  width: calc(100% - 2px);
  height: calc(100% - 1px);
  border-radius: 0.25rem;
  background: #F1F9FC;
}

.icon-box-wrap9 ul > li > div .txt > span {
  position: relative;
  z-index: 1;
}

.icon-box-wrap9 ul > li > div .txt > span > em {
  display: inline-block;
  margin-right: 0.15rem;
  color: #4DA4C5;
  font-size: 1.2rem;
  font-weight: 800;
}

.icon-box-wrap9 ul > li > div .img {
  position: relative;
  display: flex;
  height: 6.5rem;
  align-items: center;
  justify-content: center;
}

.icon-box-wrap9 ul > li > div .data-enter {
  position: relative;
  width: 100%;
  margin: 0 auto 0.5rem;
  text-align: center;
}

.icon-box-wrap9 ul > li > div .data-enter > input {
  font-weight: 700;
}

.icon-box-wrap9 ul > li > div .data-enter > span {
  display: block;
  font-size: 1.2rem;
  font-weight: 700;
}

.icon-box-wrap9 ul > li > div .data-enter > em {
  display: block;
  color: #555;
  font-size: 0.8rem;
}

.icon-box-wrap9 ul > li:not(.n-bg):first-of-type > div {
  background: linear-gradient(90deg, #7BC6AC 0%, #4DA4C5 83.51%);
}

.icon-box-wrap9 ul > li:not(.n-bg):first-of-type > div:before {
  top: 2px;
  left: 2px;
  width: calc(100% - 4px);
  height: calc(100% - 4px);
}

.icon-box-wrap9 ul > li:not(.n-bg):first-of-type > div .txt > span > em {
  color: #7BC6AD;
}

.icon-box-wrap9 ul > li:not(.n-bg):first-of-type > div .txt:before {
  top: 2px;
  left: 2px;
  width: calc(100% - 4px);
  height: calc(100% - 2px);
}

.icon-box-wrap9-2 ul > li > div .txt:before {
  background: #F4FBFA;
}

/* icon-box-wrap (HJ) */
.icon-box-wrap9-2 ul {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0 3.5rem;
  margin-top: 1.1rem;
}

.icon-box-wrap9-2 ul > li {
  width: 100%;
  position: relative;
}

.icon-box-wrap9-2 ul > li > div {
  position: relative;
  background: #ABC8D3;
  border-radius: 0.25rem;
  overflow: hidden;
  box-shadow: 2px 2px 5px 1px rgba(0, 0, 0, 0.075);
}

.icon-box-wrap9-2 ul > li > div:before {
  content: "";
  position: absolute;
  top: 1px;
  left: 1px;
  width: calc(100% - 2px);
  height: calc(100% - 2px);
  border-radius: 0.25rem;
  background: #fff;
  box-shadow: 0 5px 5px rgba(0, 0, 0, 0.25);
}

.icon-box-wrap9-2 ul > li > div .box-tit {
  position: relative;
  display: flex;
  padding: 0.7rem;
  border-radius: 0.25rem 0.25rem 0 0;
  border-bottom: 1px dashed #ccc;
  color: #262626;
  font-size: 1rem;
  font-weight: 700;
  text-align: center;
  align-items: center;
  justify-content: center;
}

.icon-box-wrap9-2 ul > li > div .box-tit:before {
  content: "";
  position: absolute;
  top: 1px;
  left: 1px;
  width: calc(100% - 2px);
  height: calc(100% - 1px);
  border-radius: 0.25rem;
  background: #F1F9FC;
}

.icon-box-wrap9-2 ul > li > div .box-tit > span {
  position: relative;
  z-index: 1;
  width: 20%;
  display: flex;
  justify-content: space-between;
}

.icon-box-wrap9-2 ul > li > div .box-tit > span > em {
  display: inline-block;
  color: #ffffff;
  font-size: 1rem;
  font-weight: 700;
  position: relative;
}

.icon-box-wrap9-2 ul > li > div .box-tit > span > em:after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  border-radius: 50%;
  width: 46px;
  height: 46px;
  background: linear-gradient(90deg, #7BC6AC 0%, #65A1D3 100%);
  z-index: -2;
}

.icon-box-wrap9-2 ul > li > div .stepCon {
  position: relative;
  display: flex;
  height: 10rem;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 1.5rem;
}

.icon-box-wrap9-2 ul > li > div .stepCon span {
  margin-top: 1.5rem;
  text-align: center;
  color: #444;
  font-size: 0.9rem;
}

.icon-box-wrap9-2 ul > li + li:after {
  position: absolute;
  content: "\f105";
  top: 50%;
  left: -2.5rem;
  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%);
  width: 1.7rem;
  height: 1.7rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #efefef;
  color: #999999;
}

.icon-box-wrap9 ul > li > div .list-stT1 li span.tit {
  font-size: 0.8rem;
  display: inline-block;
  padding: 0.1rem;
  margin-right: 0.6rem;
  width: 8rem;
  background: linear-gradient(90deg, #7BC6AC 0%, #4DA4C5 83.51%);
  font-weight: 500;
  border-radius: 1rem;
  color: #fff;
  text-align: center;
}

.icon-box-wrap9 ul > li > div .list-stT1 li span {
  font-size: 1rem;
}

.icon-box-wrap9 ul > li > div .list-stT1 li {
  padding: 0.4rem 0;
  font-size: 0.85rem;
  border-top: 1px dotted #ccc;
}

.icon-box-wrap9 ul > li > div .list-stT1 {
  min-height: 7rem;
  display: block;
  padding: 1rem 1.5rem;
}

.icon-box-wrap9 ul > li > div .list-stT1 li:first-child {
  border: 0;
}


/* icon-box-flex3추가 (ej) 240715*/
.icon-box-flex3 {
  display: flex;
  align-items: center;
  gap: 1.4rem;
}

.icon-box-flex3 .box-style1 {
  margin-top: 0;
  padding: 1rem 0.5rem;
  min-width: 9.5rem;
  min-height: 10rem;
  background: #F3F5FA;
  text-align: center;
}

.icon-box-flex3 .box-style1:first-child {
  width: calc(80% - 1.5rem);
}

.icon-box-flex3 .box-style1:first-child::after {
  content: "\f101";
  position: absolute;
  top: 50%;
  right: -1.3rem;
  font-family: "Line Awesome Free";
  font-weight: 600;
  font-size: 1rem;
  color: #D0D5E5;
}

.icon-box-flex3 .box-style1:nth-child(2) {
  width: 20%;
}

.icon-box-flex3 .box-style1:nth-child(2) .tit, .icon-box-flex3 .box-style1:nth-child(2) .img {
  text-align: left;
}

.icon-box-flex3 .box-style1:nth-child(2) .img img {
  position: absolute;
  top: 0.4rem;
  right: 0.5rem;
}

.icon-box-flex3 .box-style1 .tit {
  margin-bottom: 0.5rem;
  color: #444;
  font-size: 0.95rem;
  font-weight: 600;
}

.icon-box-flex3 .box-style1 .s-txt {
  padding: 0.3rem 0.5rem;
  background: #C5DAFB;
  border-radius: 1rem;
  color: #0750C0;
  letter-spacing: -1px;
}

.c-num {
  display: block;
  position: relative;
  padding: 0.35rem;
  background: #373C51;
  border-radius: 0.5rem;
  color: #fff;
  z-index: 1;
  font-size: 0.7rem;
  text-align: center;
}

.c-num em {
  margin-right: 0.2rem;
  font-weight: 800;
  font-size: 1rem;
  background: linear-gradient(90deg, #7DC5B2 0%, #6AA7D2 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.icon-box-flex3 .box-style1 .img {
  min-height: 4rem;
}

.icon-box-flex3 .box-style1 ul {
  display: flex;
  gap: 0.4rem;
}

.icon-box-flex3 .box-style1 ul li {
  position: relative;
  flex: 1;
  border-radius: 0.5rem;
}

.icon-box-flex3.type2 {
  gap: 0.5rem;
}

.icon-box-flex3.type2 .box-style1 {
  width: auto;
  flex-grow: 1;
  min-height: 14.7rem;
}

.icon-box-flex3.type2 .box-style1 .titT3 {
  text-align: left;
}

.icon-box-flex3.type2 .box-style1 .titT3 span {
  margin-left: 0.5rem;
  padding: 0.2rem 0.5rem;
  border: 1px solid #0750C0;
  border-radius: 1rem;
  background: #C5DAFB;
  color: #0750C0;
  font-size: 0.75rem;
}

.icon-box-flex3.type2 .box-style1 .tit, .icon-box-flex3.type2 .box-style1 .img {
  text-align: center;
}

.icon-box-flex3.type2 .box-style1:after {
  display: none;
}

.icon-box-flex3.type2 .box-style1 .img img {
  position: relative;
  top: auto;
  right: auto;
}

.icon-box-flex3.type2 .box-style1:nth-child(2) {
  background: #FAFAFA;
  border-color: #E4E4E4;
}

.icon-box-flex3.type2 .box-style1:nth-child(2) .titT3 span {
  border-color: #E4E4E4;
  background-color: #fff;
  color: #828282;
}

.icon-box-flex3.type2 .box-style1 dl {
  padding-top: 0.2rem;
  font-size: 0.75rem;
}

.icon-box-flex3.type2 .box-style1 dl dt {
  width: 20%;
  float: left;
}

.icon-box-flex3.type2 .box-style1 dl dd {
  text-align: right;
}

.icon-box-flex3.type2 .box-style1 dl dd em {
  margin-right: 0.2rem;
  color: #43C5DB;
  font-weight: 700;
}

/* tit + div 등 flex 추가 (hj) */
.tit-flex {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding-left: 0.8rem;
}

.tit-flex > span {
  color: #5C5C5C;
  font-weight: 600;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.tit-flex > span em {
  color: #555;
  font-size: 0.75rem;
  font-weight: 400;
}

/* 범례 스타일 추가 (hj) */
/* flexInput 추가(hj) */
.flexInput {
  display: flex;
  align-items: center;
  gap: 0.5rem
}


/*.flexInput [class^=InpSel] {*/
/*  margin-right: 0.4rem;*/
/*}*/

/* flexCon 추가(hj) */
.flexCon > div {
  display: flex;
  gap: 2.85rem;
  margin-bottom: 1.25rem;
}

.flexCon > div:first-of-type {
  align-items: center;
}

.flexCon > div:first-of-type input {
  flex: 2;
}

.flexCon > div:nth-of-type(2) div {
  display: flex;
  flex-direction: column;
}

.flexCon > div:nth-of-type(2) div .check-disable {
  display: flex;
  gap: 1rem;
  margin-bottom: 0.6rem;
}

.flexCon > div:nth-of-type(2) div .check-multi {
  display: flex;
  gap: 1rem;
  margin-bottom: 0.6rem;
}

.flexCon > div:nth-of-type(2) div .check-multi label {
  font-size: 0.8rem;
  color: #777;
}

.flexCon > div:nth-of-type(2) div .list-st1 {
  font-size: 0.7rem;
  color: #666;
}

.flexCon > div:nth-of-type(3) {
  align-items: center;
  gap: 0.9rem;
}

.flexCon > div:nth-of-type(3) h4 {
  white-space: nowrap;
}

/* value-t 추가(hj) */
.value-t .unit-t {
  margin-left: 0.3rem;
}

/* date-t 추가(hj) */
.period-t {
  display: inline;
}

.period-t em {
  margin: 0 0.3rem;
}

/* guide-textbox 추가(hj) */
.guide-textbox {
  display: inline-flex;
  position: relative;
  width: 1.3rem;
  height: 1.3rem;
  background: transparent;
}

.guide-textbox:before {
  content: "\e9ad";
  font-family: "xeicon";
  font-size: 1.1rem;
  vertical-align: middle;
  position: absolute;
  left: 0;
  bottom: -0.6rem;
}

.guide-textbox .guide-text {
  opacity: 0;
  position: absolute;
  left: 2.1rem;
  bottom: -1.8rem;
  z-index: 3;
  width: 45.2rem;
  padding: 0.7rem 0.85rem;
  border: 1px solid #ccc;
  background: #fff;
  white-space: nowrap;
  line-height: 1rem;
  font-size: 0.65rem;
  transition: all 0.5s;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  box-shadow: 2px 2px 10px 0px rgba(0, 0, 0, 0.1);
}

.guide-textbox .guide-text:after {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  top: 55%;
  left: -0.7rem;
  z-index: 2;
  border-bottom: 0.7rem solid #eee;
  border-left: 0.7rem transparent;
  border-right: 0.7rem solid transparent;
  transform: rotate(270deg);
  -webkit-transform: rotate(270deg);
  -moz-transform: rotate(270deg);
}

/* check-disable */
.checkbox-disable-type01 {
  display: inline-flex;
  vertical-align: middle;
  cursor: pointer;
  gap: 7px;
  margin-right: 0.6rem;
}

.checkbox-disable-type01 + .checkbox-radio-type02 {
  margin-left: 0.5rem;
}

.checkbox-disable-type01 label {
  margin: 0;
  font-size: 0.7rem;
  line-height: 1;
  cursor: pointer !important;
}

.checkbox-disable-type01 label > input {
  margin-right: 0.25rem;
}

.checkbox-disable-type01 input {
  cursor: default;
}

.checkbox-disable-type01 input[type=checkbox], .checkbox-disable-type01 input[type=radio] {
  position: relative;
  width: 0.8rem;
  height: 0.8rem;
  border: 2px solid #b5b5b5;
  background: #fff;
}

.checkbox-disable-type01 input[type=checkbox]:after {
  position: absolute;
  left: 1px;
  top: 7px;
  width: 5px;
  height: 10px;
  border-right: 2px solid #fff;
  border-top: 2px solid #fff;
  transform-origin: left top;
  transform: scaleX(-1) rotate(135deg);
  content: "";
}

.checkbox-disable-type01 input[type=checkbox]:checked {
  border: 2px solid #b5b5b5;
  background: #fff;
}

.checkbox-disable-type01 input[type=checkbox]:checked:after {
  border-color: #b5b5b5;
  animation: check 0.5s linear 1;
  opacity: 1;
}

.checkbox-disable-type02 {
  display: inline-flex;
  vertical-align: middle;
  cursor: pointer;
  gap: 7px;
  margin-right: 0.6rem;
}

.checkbox-disable-type02 + .checkbox-radio-type02 {
  margin-left: 0.5rem;
}

.checkbox-disable-type02 label {
  margin: 0;
  font-size: 0.8rem;
  color: #777;
  line-height: 1;
  cursor: pointer !important;
}

.checkbox-disable-type02 label > input {
  margin-right: 0.25rem;
}

.checkbox-disable-type02 input {
  cursor: default;
}

.checkbox-disable-type02 input[type=checkbox]:disabled, .checkbox-disable-type02 input[type=radio]:disabled {
  position: relative;
  width: 0.8rem;
  height: 0.8rem;
  border: 1px solid #dcdcdc;
  border-radius: 2px;
  background: #f3f3f3;
}

/* 블릿 */
.bu-est {
  position: relative;
}

.bu-est:before {
  content: "*";
  padding-right: 0.2rem;
  color: #FF3131;
  vertical-align: middle;
  font-weight: 400;
}

.bu-est strong {
  color: #927575;
  letter-spacing: -0.5px;
}

.bu-st1, .bu-st2, .bu-st3, .bu-st4 {
  position: relative;
  margin-top: 0.25rem;
  padding-left: 0.75rem;
  color: #666;
  font-size: 0.8rem;
}

.bu-st1:before, .bu-st2:before, .bu-st3:before, .bu-st4:before {
  position: absolute;
  top: 0.45rem;
  left: 0;
  content: "";
}

.bu-st1:before {
  top: 0.4rem;
  width: 0.3rem;
  height: 0.3rem;
  background: #3BBBCA;
  border-radius: 50%;
}

.bu-st2:before {
  width: 0.5rem;
  height: 0.05rem;
  background: #9a9a9a;
}

.bu-st3:before {
  width: 0.2rem;
  height: 0.2rem;
  background: #888;
  border-radius: 50%;
}

.bu-st4 {
  font-size: 0.7rem;
}

.bu-st4:before {
  width: 4px;
  height: 1px;
  background: #9a9a9a;
}

/* 리스트 : 블릿 타입 */
.list-st1 > li, .list-st2 > li, .list-st3 > li, .list-st4 > li {
  position: relative;
  margin-top: 0.25rem;
  padding-left: 0.75rem;
  color: #444;
  font-size: 0.8rem;
}

.list-st1 > li:before, .list-st2 > li:before, .list-st3 > li:before, .list-st4 > li:before {
  position: absolute;
  top: 0.45rem;
  left: 0;
  content: "";
}

.list-st1 > li:before {
  top: 0.4rem;
  width: 0.3rem;
  height: 0.3rem;
  background: #3BBBCA;
  border-radius: 50%;
}

.list-st2 > li:before {
  width: 0.5rem;
  height: 0.05rem;
  background: #9a9a9a;
}

.list-st3 > li:before {
  width: 0.2rem;
  height: 0.2rem;
  background: #888;
  border-radius: 50%;
}

.list-st4 > li {
  font-size: 0.75rem;
}

.list-st4 > li:before {
  width: 4px;
  height: 1px;
  background: #9a9a9a;
}

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

/* 좌측 title + 우측 vaule */
.count-info-lst1 > li {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.count-info-lst1 > li > span {
  color: #444;
}

.count-info-lst1 > li > em {
  color: #555;
  font-size: 0.8rem;
}

.count-info-lst1 > li > em > strong {
  margin-right: 0.25rem;
  color: #444;
  font-size: 0.9rem;
  font-weight: 700;
}

.count-info-lst1 > li > em .more-btn {
  margin-left: 0.25rem;
}

/* .count-info-lst2 ul {
  display: flex;
  gap: 0.25rem 0;
  flex-wrap: wrap;
}

.count-info-lst2 ul > li {
  width: 100%;
}

.count-info-lst2 ul > li > div {
  display: flex;
  width: 100%;
  padding: 0 0.5rem;
  background: linear-gradient(90deg, rgb(53, 255, 181) 0%, rgb(75, 172, 254) 100%);
  align-items: center;
  justify-content: space-between;
}

.count-info-lst2 ul > li > div > span {
  color: #fff;
  font-size: 0.9rem;
  font-weight: 600;
}

.count-info-lst2 ul > li > div > em {
  color: #fff;
  font-size: 0.75rem;
}

.count-info-lst2 ul > li > div > em > strong {
  margin-right: 0.25rem;
  color: #fff;
  font-size: 0.95rem;
  font-weight: 700;
}

.count-info-lst2 ul > li.bg2 > div {
  background: #626e88;
}

.count-info-lst2 ul > li.bg3 > div {
  background: #63889b;
}

.count-info-lst2 ul > li.bg4 > div {
  background: #6a6e79;
} */

/* 블릿 : 텍스트 타입 */
.list-stT1 > li, .list-stT2 > li {
  position: relative;
  margin-top: 0.25rem;
  color: #666;
  font-size: 0.8rem;
}

.list-stT2 {
  padding-left: 0.75rem;
}

.list-stT2 > li {
  font-size: 0.75rem;
}

/* 리스트 : 가로 나열 */
[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-ol1 > li {
  position: relative;
  padding-left: 1.5rem;
  color: #666;
  font-size: 0.8rem;
}

.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: #3BBBCA;
  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.8rem;
}

.list-ol2 > li + li {
  margin-top: 0.5rem;
}

.list-ol2 > li > em.num {
  position: absolute;
  top: 0;
  left: 0;
  width: 1.2rem;
  height: 1.2rem;
  border-radius: 50%;
  background: linear-gradient(90deg, #95DFC5 0%, #7CB6E7 80%);
  color: #fff;
  text-align: center;
  font-weight: 600;
  font-size: 0.8rem;
  line-height: 1.2rem;
}

.list-ol2 > li > strong {
  display: inline-block;
  color: #262626;
  font-size: 0.8rem;
  font-weight: 600;
  vertical-align: middle;
}

.list-ol2 > li > span {
  display: block;
}

/* 텍스트 요소 : 폰트컬러 타입 */
.pc--red, .pc--gray, .pc--blue, .pc--navy, .pc--org, .pc--black, .pc--green, .pc--yellow {
  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: #3BBBCA !important;
}

.pc-yellow {
  color: #eb8809 !important;
}

/* 텍스트 요소 : 텍스트 배경색 */
.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: #3BBBCA !important;
}

.bg-yellow {
  background: #eb8809 !important;
}

/* 텍스트 요소 : 강조 타입 */
.Tline-b {
  text-decoration: underline !important;
}

.Tline-bgB {
  -webkit-box-shadow: inset #c7e5f3 0 -0.5rem 0;
  box-shadow: inset #c7e5f3 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;
}

/* 텍스트 요소 : 폰트 크기 */
.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;
}

/* 텍스트 요소 : 링크 타입 */
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 {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: #1f4665;
  content: "";
}

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;
}

/* 텍스트 요소 : 주의/경고/말풍선 타입 */
div + .bu-atte, .bu-atte-r 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;
  word-wrap: break-word;
  word-break: keep-all;
}

.bu-atte:before {
  display: inline-block;
  padding-right: 0.25rem;
  color: #927575;
  vertical-align: middle;
  content: "※";
}

.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: #36a2d5;
  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: #36a2d5;
  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: #3BBBCA;
  font-weight: 700;
}

.grid-sort .paging > span + span {
  display: inline-block;
  margin-left: 1rem;
}

.grid-sort .page-count {
  float: right;
}

/* 0830 추가 tit-rchart */
.tit-rchart {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
}

.tit-rchart > div {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.tit-rchart > div > p {
  width: 20%;
}

/* 테이블 : 테이블 기본 타입 */
div[class*=tbl-st] {
  position: relative;
  width: 100%;
  margin-top: 0.25rem;
  background: #fff;
  overflow: hidden;
}

div[class*=tbl-st] table {
  position: relative;
  width: 100%;
  border-top: 2px solid #3BBBCA;
  text-align: center;
  -webkit-overflow-scrolling: touch; /* word-break:break-all;강제 줄바꿈 */
  table-layout: auto;
  width: 100%;
  table-layout: fixed;
  /* 행추가 */
  /* 트리형 테이블 */
}

div[class*=tbl-st] table th {
  padding: 0.5rem;
  color: #333;
  border-bottom: 1px solid #e1e1e1;
  font-weight: 400;
  line-height: 1.4;
  vertical-align: middle;
  /* font-size 수정 */
  font-size: 0.8rem;
}

div[class*=tbl-st] table td {
  position: relative;
  height: 1.89rem;
  padding: 0.2rem 0.5rem;
  border-bottom: 1px solid #e1e1e1;
  color: #444;
  line-height: 1.4;
  vertical-align: middle;
  /* font-size 수정 */
  font-size: 0.8rem;
}

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 {
  display: inline-block;
  margin-left: 0.25rem;
  font-size: 0.75rem;
  font-family: "xeicon";
  content: "\e92f";
}

div[class*=tbl-st] table td em.down {
  color: #309bfa;
  font-weight: 700;
}

div[class*=tbl-st] table td em.down:after {
  display: inline-block;
  margin-left: 0.25rem;
  font-size: 0.75rem;
  font-family: "xeicon";
  content: "\e935";
}

div[class*=tbl-st] table thead tr:last-of-type th {
  border-bottom: 1px solid #e1e1e1;
  background-color: #F7FCFC;
}

div[class*=tbl-st] table thead th[scope=colgroup] {
  background: #F7FCFC;
  border-bottom: 0;
}

div[class*=tbl-st] table tbody th[scope=row] {
  background: #F7FCFC;
  color: #555;
  font-weight: 600;
}

div[class*=tbl-st] table tfoot th[scope=row] {
  background: #f6f6f6;
  color: #3BBBCA;
  font-weight: 700;
}

div[class*=tbl-st] table tfoot td {
  background: #f6f6f6;
  color: #3BBBCA;
  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 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 {
  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;
  content: "\f055";
}

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] [class^=list-st] > li {
  color: #333;
}

div[class*=tbl-st].scroll-gr-y {
  overflow: hidden;
  overflow-y: auto;
}

div[class*=tbl-st].scroll-gr-y.ht1 {
  height: 15.379rem;
}

div[class*=tbl-st].scroll-gr-y.ht2 {
  height: 12.329rem;
}

div[class*=tbl-st].scroll-gr-y::-webkit-scrollbar {
  width: 0.15rem;
}

div[class*=tbl-st].scroll-gr-y::-webkit-scrollbar-thumb {
  border: 0;
  border-radius: 0.5rem;
  background: #d8d8d8;
  background-clip: padding-box;
}

div[class*=tbl-st].scroll-gr-y::-webkit-scrollbar-track {
  border-radius: 0.5rem;
  background: #eee;
}

/* 테이블 : 세로테이블 */
.tbl-st-row table th {
  border-right: 1px solid #e1e1e1;
}

/* 테이블 : 테이블 4면 선 */
div.tbl-st2 table {
  margin-left: 0 !important;
  border-left: 1px solid #d7d7d7;
  /* board-box, attach-flex 추가(hj) */
}

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;
}

div.tbl-st2 table thead th[scope=colgroup] {
  border-bottom: 1px solid #d7d7d7;
}

div.tbl-st2 table tfoot th {
  background: #f6f6f6;
  color: #3BBBCA;
  font-weight: 700;
}

div.tbl-st2 table tfoot td {
  background: #f6f6f6;
  color: #3BBBCA;
  font-weight: 700;
}

div.tbl-st2 table td .board-box {
  border: 1px solid #dcdcdc;
  border-radius: 0.25rem;
  height: auto;
  padding: 1rem;
  height: 20rem;
  overflow: scroll;
}

div.tbl-st2 table td .board-box span {
  display: block;
  color: #a2a2a2;
  width: 100%;
  height: 100%;
}

div.tbl-st2 table td .board-box span.extext {
  text-align: center;
  line-height: 20rem;
}

div.tbl-st2 table td .board-box2 {
  padding: 1rem 1rem 2rem 1rem;
  height: auto;
  max-height: 23rem;
  overflow: scroll;
}

div.tbl-st2 table td .board-box2 span {
  display: block;
  color: #777777;
  width: 100%;
}

div.tbl-st2 table td .attach-flex {
  display: flex;
  align-items: center;
  height: 2rem;
  gap: 0.35rem;
}

div.tbl-st2 table td .attach-flex .btns {
  display: flex;
  margin: 0;
}

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

/* tr, td background 색상 */
.tbl-bg- { /* 그린 */
  /* 블루 */
  /* 옐로우 */
  /* 레드 */
  /* 그린 */
  /* 그레이 */
  /* 진한 블루1 */
  /* 진한 블루2 */
}

.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: #868686 !important;
  background-color: #effcf6 !important;
}

.tbl-bg-gray, .tbl-bg-gray th {
  color: #777 !important;
  background-color: #F6F6F6 !important;
}

.tbl-bg-dbl1 {
  color: #fff !important;
  background-color: #2970CD !important;
}

.tbl-bg-dbl2 {
  color: #fff !important;
  background-color: #3BBBCA !important;
}
.tbl-bg-wht {
  background-color: #fff !important;
}

/* tr, td border 색상 */
.tbl- {
  /* table line 추가 - hj */
  /* 선 없음 :테이블 좌, 우 선 없는 테이블 사용시 필요 */
}

.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-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 #3BBBCA !important;
}

.tbl-Lbl-T {
  border-top: 1px solid #3BBBCA !important;
}

.tbl-Lbl-B {
  border-bottom: 1px solid #3BBBCA !important;
}

.tbl-Lbl-L {
  border-left: 1px solid #3BBBCA !important;
}

.tbl-Lbl-R {
  border-right: 1px solid #3BBBCA !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-L-T2 {
  border-top: 3px solid #e1e1e1 !important;
}

.tbl-L-R2 {
  border-right: 2px solid #e1e1e1 !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;
}

/* table 내의 상태 스타일  - HJ */
div.tbl-st2 table td .status-style, div.tbl-st2 table td .status-style .rejected2, div.tbl-st2 table td .status-style .completed2, div.tbl-st2 table td .status-style .approved2, div.tbl-st2 table td .status-style .pending2 {
  position: relative;
  width: 100%;
  border-radius: 27.5rem;
  background: #fff;
  line-height: 1;
  vertical-align: center;
  /* 접수 중 */
  /*case:접수 확인*/
  /*case:처리 완료*/
  /*case:접수 반려*/
}

div.tbl-st2 table td .status-style .pending2 {
  color: #777777;
  border: 1px solid #DCDCDC;
  padding: 0.1rem 0.5rem;
}

div.tbl-st2 table td .status-style .approved2 {
  color: #3BBBCA;
  border: 1px solid #3BBBCA;
  padding: 0.1rem 0.5rem;
}

div.tbl-st2 table td .status-style .completed2 {
  color: #2970CD;
  border: 1px solid #2970CD;
  padding: 0.1rem 0.5rem;
}

div.tbl-st2 table td .status-style .rejected2 {
  color: #F36363;
  border: 1px solid #F36363;
  padding: 0.1rem 0.5rem;
}

/* div-table 추가 (hj) */
.div-t-wrap {
  display: flex;
  gap: 1.1rem;
}

.div-t-wrap > li {
  flex: 1;
}

.div-t-wrap > li .div-table {
  border: 1px solid #ccc;
}

.div-t-wrap > li .div-table .div-t-tit {
  height: 1.5rem;
  text-align: center;
  padding: 0.25rem;
  font-weight: 700;
}

.div-t-wrap > li .div-table .div-tb .div-tr {
  display: flex;
}

.div-t-wrap > li .div-table .div-tb .div-tr > span {
  border-bottom: 1px solid #ccc;
  display: inline-block;
  text-align: center;
  padding: 0.5rem;
}

.div-t-wrap > li .div-table .div-tb .div-tr > span:first-of-type {
  border-right: 1px solid #ccc;
  flex: 1;
}

.div-t-wrap > li .div-table .div-tb .div-tr > span:nth-of-type(2) {
  text-align: right;
  flex: 3;
}

.div-t-wrap > li .div-table .div-tb .div-tr > span:nth-of-type(2) strong {
  font-weight: 700;
  margin-right: 0.45rem;
}

.div-t-wrap > li .div-table .div-tb .div-tr:last-of-type span {
  border-bottom: none;
}

.div-t-wrap > li:first-of-type .div-tb .div-tr > span {
  height: 1.9rem;
}

.div-t-wrap > li:first-of-type .div-tb .div-tr > span strong {
  color: #2970CD;
}

.div-t-wrap > li + li .div-tb .div-tr > span {
  height: 2.85rem;
  display: flex;
  justify-content: center;
  align-items: center;
  line-height: 2rem;
}

.div-t-wrap > li + li .div-tb .div-tr > span strong {
  color: #3BBBCA;
}

/* 캘린더 테이블 */
#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 {
  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;
  content: "\f104";
}

#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 {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 0;
  height: 0;
  border: 0.35rem solid #3BBBCA;
  border-top: 0.35rem solid transparent;
  border-left: 0.35rem solid transparent;
  content: "";
}

#calendar .fc-daygrid-day.fc-day-today .fc-daygrid-day-number {
  color: #3BBBCA;
  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;
}

/* pager */
.pager {
  text-align: center;
  margin-top: 1rem;
  /*240813 ej 추가*/
}

.pager > * {
  position: relative;
  display: inline-block;
  margin: 0 0.2rem;
  padding: 0 0.15rem;
  color: #a2a2a2;
  font-size: 0.7rem;
  font-weight: 400;
  transition: color 0.3s;
  -webkit-transition: color 0.3s;
  -moz-transition: color 0.3s;
}

.pager .active {
  position: relative;
  font-weight: 500;
  color: #fff;
  z-index: 1;
  /*240813 ej 추가*/
}

.pager .active::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 1.2rem;
  height: 1.2rem;
  background: #3BBBCA;
  border-radius: 1rem;
  z-index: -1;
}

.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 {
  font-family: "Line Awesome Free";
  font-size: 0.7rem;
  font-weight: 700;
  content: "\f104";
}

.pager .arr.next:before {
  content: "\f105";
}

.pager .arr.frst:before {
  content: "\f100";
}

.pager .arr.last:before {
  content: "\f101";
}

.pager a.dot:before {
  content: "···";
}

/* toast ui grind */
.up-down-count.up {
  color: #fe3c4e !important;
  font-weight: 700;
}

.up-down-count.up > span {
  color: #fe3c4e !important;
}

.up-down-count.up:before {
  display: inline-block;
  margin-right: 0.15rem;
  font-size: 0.75rem;
  font-family: "xeicon";
  content: "\e92f";
}

.up-down-count.down {
  color: #309bfa !important;
  font-weight: 700;
}

.up-down-count.down > span {
  color: #309bfa !important;
}

.up-down-count.down:before {
  display: inline-block;
  margin-right: 0.15rem;
  font-size: 0.75rem;
  font-family: "xeicon";
  content: "\e935";
}

.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;
}

/* toast 진행여부 HJ  */
.tui-grid-row-odd .tui-grid-cell-has-input .tui-grid-cell-content:last-of-type.status,
.tui-grid-row-even .tui-grid-cell-has-input .tui-grid-cell-content:last-of-type.status {
  position: relative;
  padding: 0.25rem 0.5rem;
  width: 75%;
  border-radius: 27.5rem;
  background: #fff;
  line-height: 1;
  vertical-align: middle;
  margin: 0 0 0 0.7rem;
  /*case:접수 중*/
  /*case:접수 확인*/
  /*case:처리 완료*/
  /*case:접수 반려*/
}

.tui-grid-row-odd .tui-grid-cell-has-input .tui-grid-cell-content:last-of-type.status.pending,
.tui-grid-row-even .tui-grid-cell-has-input .tui-grid-cell-content:last-of-type.status.pending {
  color: #777777;
  border: 1px solid #DCDCDC;
}

.tui-grid-row-odd .tui-grid-cell-has-input .tui-grid-cell-content:last-of-type.status.approved,
.tui-grid-row-even .tui-grid-cell-has-input .tui-grid-cell-content:last-of-type.status.approved {
  color: #3BBBCA;
  border: 1px solid #3BBBCA;
}

.tui-grid-row-odd .tui-grid-cell-has-input .tui-grid-cell-content:last-of-type.status.completed,
.tui-grid-row-even .tui-grid-cell-has-input .tui-grid-cell-content:last-of-type.status.completed {
  color: #2970CD;
  border: 1px solid #2970CD;
}

.tui-grid-row-odd .tui-grid-cell-has-input .tui-grid-cell-content:last-of-type.status.rejected,
.tui-grid-row-even .tui-grid-cell-has-input .tui-grid-cell-content:last-of-type.status.rejected {
  color: #F36363;
  border: 1px solid #F36363;
}

/* toast 등록 여부 Y,N (ej) 240712*/
.tui-grid-cell-content.regist::before {
  display: inline-block;
  font-size: 1.1rem;
  font-family: "xeicon";
  font-weight: 700;
}

.tui-grid-cell-content.regist.yes::before {
  content: "\e92b";
  color: #4BCBC7;
}

.tui-grid-cell-content.regist.no::before {
  content: "\e924";
  color: #CD6161;
}

.tui-grid-cell-content.regist.default::before {
  content: "\e91d";
  color: #EBC053;
}

/*토스트 그리드 seclet 박스 수정 (ej) 240711*/
.tui-select-box-input, .tui-select-box-item-group-label, .tui-select-box-item {
  padding: 0 0.5rem 0 0.5rem !important;
  height: 1.5rem !important;
  border-radius: 0 !important;
}

.tui-grid-container p, .tui-grid-container input, .tui-grid-container textarea {
  line-height: 1.5rem !important;
}

.tui-select-box-item {
  border: 0 !important;
}

/*토스트 그리드 합계 수정 (ej) 240711*/
.tui-grid-cell-summary {
  padding: 0.5rem !important;
  text-align: center;
  background: #f7f7f7 !important;
}

.tui-grid-summary-area {
  border-color: #ccc !important;
}

.row-color tr.tui-grid-cell-current-row {
  background-color : #EEF9F9 !important;
}

.row-color tr.tui-grid-cell-current-row .tui-grid-cell {
  background-color: transparent !important;
}


/* split형 : 리스트 목록 */
.tit-list {
  padding-top: 0.75rem;
  border-top: 3px solid #E1E1E1;
}

.tit-list ul > li + li {
  margin-top: 0.5rem;
}

.tit-list ul > li > div {
  position: relative;
  min-height: 3rem;
  padding: 0.9rem 1rem;
  border: 1px solid #E1E1E1;
  background: #fff;
  border-radius: 0.5rem;
}

.tit-list ul > li > div > * {
  display: inline-block;
  vertical-align: middle;
}

.tit-list ul > li > div > em {
  width: 5%;
  color: #84878D;
  font-size: 0.7rem;
}

.tit-list ul > li > div > span {
  width: 35%;
  color: #5C5C5C;
  font-size: 0.8rem;
  font-weight: 600;
}

.tit-list ul > li > div > strong {
  width: 55%;
  padding-right: 1rem;
  color: #262626;
  font-size: 1.1rem;
  font-weight: 600;
}

.tit-list ul > li > div > button {
  position: absolute;
  top: 50%;
  right: 1rem;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
}

.tit-list ul > li > div > button > i {
  transition: 0.3s;
  -webkit-transition: 0.3s;
  -moz-transition: 0.3s;
}

/* 시간대별 사용량 비교 legend */
.n-legend {
  display: flex;
  align-items: center;
  gap: 1rem;
  justify-content: end;
  margin-bottom: 0.5rem;
}

.n-legend > li {
  color: #444;
  font-size: 0.75rem;
  position: relative;
}

.n-legend > li.c1:before {
  content: "";
  width: 0.6rem;
  height: 0.6rem;
  background: #7A7A7A;
  display: inline-block;
  border-radius: 50%;
  margin-right: 0.25rem;
}

.n-legend > li.c2:before {
  content: "";
  width: 0.6rem;
  height: 0.6rem;
  background: #AAA;
  display: inline-block;
  border-radius: 50%;
  margin-right: 0.25rem;
}

.n-legend > li.c3:before {
  content: "";
  width: 0.6rem;
  height: 0.6rem;
  background: #126CE2;
  display: inline-block;
  border-radius: 50%;
  margin-right: 0.25rem;
}

.n-legend > li.c4:before {
  content: "";
  width: 0.6rem;
  height: 0.6rem;
  background: #43C5DB;
  display: inline-block;
  border-radius: 50%;
  margin-right: 0.25rem;
}

/* highcharts */
.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.updown [class^=datalebel-over] {
  display: block;
  color: #00BB9F !important;
  font-size: 0.9rem !important;
  fill: #00BB9F !important;
  text-align: center;
}

.chart.updown [class^=datalebel-over] > strong {
  display: block;
  color: #00BB9F !important;
  font-size: 1.1rem !important;
  fill: #00BB9F !important;
}

.chart.updown [class^=datalebel-over] > strong:before {
  font-family: "xeicon";
  content: "\e92f";
}

.chart.updown [class^=datalebel-over] > strong.down:before {
  content: "\e935";
}

.chart.updown .datalebel-over2 {
  color: #2970CD !important;
  fill: #2970CD !important;
}

.chart.updown .datalebel-over2 > strong {
  color: #2970CD !important;
  fill: #2970CD !important;
}

.chart.updown [class^=pie-cont-bg] {
  padding: 0.1rem 0.5rem;
  border-radius: 0.5rem;
  background: #00BB9F;
  color: #fff !important;
  font-size: 0.8rem !important;
  font-weight: 700;
}

.chart.updown .pie-cont-bg2 {
  background: #2970CD;
}

.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.updown2 .dataLabel {
  color: #000;
  text-align: center;
}

.chart.updown2 .dataLabel > strong {
  display: block;
  font-size: 0.8rem;
}

.chart.updown2 .dataLabel > span {
  display: block;
  color: #fe3c4e;
  font-size: 1rem;
}

.chart.updown2 .dataLabel > span:after {
  display: inline-block;
  margin-left: 0.25rem;
  font-size: 1rem;
  font-family: "xeicon";
  content: "\e92f";
}

.chart.updown2 .dataLabel > span.down {
  color: #309bfa;
}

.chart.updown2 .dataLabel > span.down:after {
  content: "\e935";
}

.chart.updown2 .dataLabel > span.down > em {
  color: #309bfa;
}

.chart.updown2 .dataLabel > span > em {
  color: #fe3c4e;
  font-size: 1.65rem;
}

.chart.updown2 .dataLabel > span > em:after {
  display: inline-block;
  font-size: 1rem;
  content: "%";
}

.chart.updown2 .bar-graph-wrap [class^=bar-graph-color-label] + [class^=bar-graph-color-label] {
  margin-top: 0.25rem;
}

.chart.updown2 .bar-graph-wrap [class^=bar-graph-color-label] > span {
  display: inline-block;
  width: 5rem;
  font-size: 0.75rem;
}

.chart.updown2 .bar-graph-wrap [class^=bar-graph-color-label] > em {
  display: inline-block;
  font-size: 1rem;
  font-weight: 700;
}

.chart.updown2 .bar-graph-wrap [class^=bar-graph-color-label] > em:after {
  content: "만원";
  display: inline-block;
  margin-left: 0.25rem;
  font-size: 0.7rem;
  font-weight: 400;
}

.chart.updown2 .bar-graph-wrap2 [class^=bar-graph-color-label] > em:after {
  content: "Mwh";
}

.chart.updown2 .bar-graph-wrap3 [class^=bar-graph-color-label] > em:after {
  content: "tCO2";
}

.chart.updown2 .bar-graph-wrap4 [class^=bar-graph-color-label] > em:after {
  content: "kWh/원";
}

.chart .legend-srl > span > strong {
  float: right;
}

.chart .legend-srl > span > strong > em {
  font-weight: 700;
}

.chart-info-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.chart-info-wrap .chart {
  width: 40%;
}

.chart-info-wrap .chart-info-txt {
  width: 60%;
  padding-left: 0.5rem;
}

.chart-info-wrap .chart-info-txt > li {
  color: #262626;
  font-size: 1.1rem;
  font-weight: 600;
}

.chart-info-wrap .chart-info-txt > li > ul {
  margin-top: 0.25rem;
}

.chart-info-wrap .chart-info-txt > li > ul > li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #444;
  font-size: 0.9rem;
}

.chart-info-wrap .chart-info-txt > li > ul > li > span {
  font-weight: 600;
}

.chart-info-wrap .chart-info-txt > li > ul > li > em {
  color: #555;
  font-size: 0.8rem;
}

.chart-info-wrap .chart-info-txt > li > ul > li > em > strong {
  font-size: 1rem;
  font-weight: 700;
}

/* highcharts 컨트롤 */
.highcharts-input-group {
  transform: translateX(calc(100% - 15rem));
  -webkit-transform: translateX(calc(100% - 15rem));
  -moz-transform: translateX(calc(100% - 15rem));
}

.highcharts-range-selector-buttons .highcharts-button {
  outline: 0 !important;
}

.highcharts-range-selector-buttons .highcharts-button rect {
  position: relative;
  float: left;
  stroke-width: 1px;
  stroke: #DCDCDC;
  fill: transparent !important;
  outline: 0 !important;
  transition: all 0.3s;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
}

.highcharts-range-selector-buttons .highcharts-button text {
  color: #A2A2A2 !important;
  font-size: 0.8rem;
  fill: #A2A2A2 !important;
  transition: all 0.3s;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
}

.highcharts-range-selector-buttons .highcharts-button.highcharts-button-pressed rect {
  stroke: #3BBBCA;
}

.highcharts-range-selector-buttons .highcharts-button.highcharts-button-pressed text {
  color: #3BBBCA !important;
  fill: #3BBBCA !important;
}

.highcharts-range-selector-buttons .highcharts-button.highcharts-button-normal:hover rect {
  stroke: #bbb;
}

.highcharts-range-selector-buttons .highcharts-button.highcharts-button-normal:hover text {
  color: #666 !important;
  fill: #666 !important;
}

.highcharts-range-input {
  transform: translate(-135px, 0);
  -webkit-transform: translate(-135px, 0);
  -moz-transform: translate(-135px, 0);
}

.highcharts-range-input + .highcharts-range-label {
  display: block !important;
  transform: translate(37px, 0);
  -webkit-transform: translate(37px, 0);
  -moz-transform: translate(37px, 0);
}

.highcharts-range-input + .highcharts-range-label + .highcharts-range-input {
  transform: translate(55px, 0);
  -webkit-transform: translate(55px, 0);
  -moz-transform: translate(55px, 0);
}

/* spliter 컨트롤 */
.spliter-nav {
  position: absolute;
  top: 50%;
  right: -1rem;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  z-index: 1;
}

.spliter-nav > a {
  display: block;
  width: 1.7rem;
  height: 1.2rem;
  border: 1px solid #E1E1E1;
  border-radius: 0.15rem;
  background: #fff;
  text-align: center;
  font-size: 0.7rem;
  color: #A2A2A2;
  transition: all 0.3s;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
}

.spliter-nav > a + a {
  margin-top: 0.25rem;
}

.spliter-nav > a > i {
  transition: all 0.3s;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
}

/* 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: #444;
  font-size: 1.1rem;
  font-weight: 700;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
}

/* 기본 텍스트 */
.txt-p {
  margin-top: 0.25rem;
  color: #555;
  font-size: 0.8rem;
  font-weight: 400;
}

/** checkbox **/
/* 체크박스 : purple */
.checkbox-radio-type01 {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  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;
  cursor: pointer !important;
}

.checkbox-radio-type01 label > input {
  margin-right: 0.25rem;
}

.checkbox-radio-type01 input {
  cursor: pointer !important;
}

.checkbox-radio-type01 input[type=checkbox], .checkbox-radio-type01 input[type=radio] {
  position: relative;
  width: 0.8rem;
  height: 0.8rem;
  border: 2px solid #b5b5b5;
  background: #fff;
}

.checkbox-radio-type01 input[type=checkbox]:after {
  position: absolute;
  left: 1px;
  top: 7px;
  width: 5px;
  height: 10px;
  border-right: 2px solid #fff;
  border-top: 2px solid #fff;
  transform-origin: left top;
  transform: scaleX(-1) rotate(135deg);
  content: "";
}

.checkbox-radio-type01 input[type=checkbox]:checked {
  border: 2px solid #475df1;
}

.checkbox-radio-type01 input[type=checkbox]:checked:after {
  border-color: #475df1;
  animation-delay: 0s;
  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: #475df1;
}

.checkbox-radio-type01 input[type=radio]:checked:after {
  background: #475df1;
  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;
}

/* 체크박스 : green */
.checkbox-radio-type02 {
  display: inline-flex;
  vertical-align: middle;
  align-items: center;
  cursor: pointer;
  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;
  cursor: pointer !important;
}

.checkbox-radio-type02 label > input {
  margin-right: 0.25rem;
}

.checkbox-radio-type02 input {
  cursor: pointer !important;
}

.checkbox-radio-type02 input[type=checkbox], .checkbox-radio-type02 input[type=radio] {
  position: relative;
  width: 0.8rem;
  height: 0.8rem;
  border: 2px solid #b5b5b5;
  background: #fff;
}

.checkbox-radio-type02 input[type=checkbox]:after {
  position: absolute;
  left: 1px;
  top: 7px;
  width: 5px;
  height: 10px;
  border-right: 2px solid #fff;
  border-top: 2px solid #fff;
  transform-origin: left top;
  transform: scaleX(-1) rotate(135deg);
  content: "";
}

.checkbox-radio-type02 input[type=checkbox]:checked {
  border: 2px solid #3BBBCA;
  background: #3BBBCA;
}

.checkbox-radio-type02 input[type=checkbox]:checked:after {
  border-color: #fff;
  animation-delay: 0s;
  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 {
  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;
  content: "";
}

.checkbox-radio-type02 input[type=radio]:checked {
  border-color: #3BBBCA;
  background: #3BBBCA;
}

.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;
}

/* 박스 : 박스 기본 타입 */
[class^=box-st] {
  position: relative;
  margin-top: 1rem;
  padding: 1.5rem;
  border-radius: 0.7rem;
}

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

.withTab .tab-st2 + .cont {
  border-radius: 0 0 0.5rem 0.5rem;
}

/* 탭 : 공통 */
div[class^=tab-st] {
  position: relative;
  margin-bottom: 0.5rem;
  overflow: hidden;
}

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

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

ul[class^=tab-st2] {
  overflow: auto;
  margin-bottom: -2px;
}

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

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

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-st {
  width: 100%;
  /* 탭 : 1차 탭 */
  /* 탭 : 2차 탭 */
  /* 탭 : 3차 탭 e-cloud 수정 1024 */
  /* tab-st4 추가 : 5차 탭 (hj) */
}

.tab-st1 > li, .tab-st2 > li, .tab-st3 > li, .tab-st6 > li {
  float: left;
}

.tab-st1 > li a, .tab-st2 > li a, .tab-st3 > li a, .tab-st6 > li a {
  width: 100%;
}

.tab-st1 {
  background: #fff;
  /*240813 ej 수정*/
}

.tab-st1:before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: #E1E1E1;
}

.tab-st1 li a {
  position: relative;
  display: table;
  width: 100%;
  height: 2.3rem;
  padding: 0 1.5rem;
  color: #666;
  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 {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0;
  height: 3px;
  background: linear-gradient(90deg, #00B073 0%, #0C75CA 100%);
  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;
  content: "";
}

.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;
  /* word-wrap: break-word;
  word-break: keep-all; */
}

.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:before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: transparent;
  border-radius: 0.5rem 0.5rem 0 0;
}

.tab-st2 li a {
  position: relative;
  display: table;
  width: auto;
  height: 1.9rem;
  padding: 0 1.5rem;
  background: transparent;
  color: #A2A2A2;
  font-size: 0.85rem;
  table-layout: fixed;
  overflow: hidden;
  transition: all 0.3s;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
}

.tab-st2 li a:before {
  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;
  content: "";
}

.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;
  white-space: nowrap;
}

.tab-st2 li.on a {
  font-weight: 900;
  border-radius: 0.5rem 0.5rem 0 0;
  border-top: 1px solid #D0D5E5;
  border-left: 1px solid #D0D5E5;
  border-right: 1px solid #D0D5E5;
}

.tab-st2 li.on a > span {
  background: linear-gradient(90deg, #00B073 0%, #0C75CA 83.51%);
  -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 {
  overflow: hidden;
}

.tab-st3 li {
  min-width: 6.5rem;
  width: 7rem;
  max-width: 12rem;
}

.tab-st3 li a {
  position: relative;
  display: table;
  width: 100%;
  height: 1.75rem;
  padding: 0 0.5rem;
  color: #666;
  font-size: 0.8rem;
  table-layout: fixed;
  overflow: hidden;
  transition: all 0.3s;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  border: 1px solid #ccc;
}

.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: #6AA7D2;
  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: 0.5rem 0 0 0.5rem;
  border-right: none;
}

.tab-st3 li:first-of-type.on > a {
  background: linear-gradient(90deg, #00B073 0%, #0C75CA 100%);
}

.tab-st3 li:last-of-type > a {
  border-radius: 0 0.5rem 0.5rem 0;
  border-left: none;
}

.tab-st3 li:last-of-type.on > a {
  background: linear-gradient(90deg, #6AA7D2 0%, #7DC5B2 100%);
}

.tab-st4 {
  border: 1px solid #ccc;
  display: flex;
  border-radius: 0.5rem;
  width: 33.8rem;
}

.tab-st4 > li {
  padding: 0.325rem 1.5rem;
  width: 20%;
  border-right: 1px solid #ccc;
}

.tab-st4 > li > span {
  white-space: nowrap;
  text-align: center;
  color: #8D8D8D;
}

.tab-st4 > li:last-child {
  border: none;
}

.tab-st4 > li.on {
  background: linear-gradient(90deg, #7DC5B2 0%, #6AA7D2 100%);
  border-color: transparent;
}

.tab-st4 > li.on > span {
  color: #fff;
  font-weight: 600;
}

.tab-st6 {
  overflow: hidden;
  margin-bottom: 0;
}

.tab-st6 li {
  min-width: 6.5rem;
  width: 7rem;
  max-width: 12rem;
}

.tab-st6 li a {
  position: relative;
  display: table;
  width: 100%;
  height: 1.75rem;
  padding: 0 0.5rem;
  color: #666;
  font-size: 0.8rem;
  table-layout: fixed;
  overflow: hidden;
  transition: all 0.3s;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  border: 1px solid #ccc;
}

.tab-st6 li a > span {
  position: relative;
  display: table-cell;
  width: 100%;
  max-height: 1.8rem;
  line-height: 1.1;
  vertical-align: middle;
  overflow: hidden;
}

.tab-st6 li.on a {
  background: #6AA7D2;
  font-weight: 700;
}

.tab-st6 li.on a > span {
  color: #fff;
}

.tab-st6 li.on a:before {
  top: 0;
}

.tab-st6 li.on a[target=_blank]:before {
  color: #333;
}

.tab-st6 li:first-of-type > a {
  border-radius: 2.5rem 0 0 2.5rem;
  border-right: none;
}

.tab-st6 li:first-of-type.on > a {
  background: linear-gradient(90deg, #00B073 0%, #0C75CA 100%);
}

.tab-st6 li:last-of-type > a {
  border-radius: 0 2.5rem 2.5rem 0;
  border-left: none;
}

.tab-st6 li:last-of-type.on > a {
  background: linear-gradient(90deg, #00B073 0%, #0C75CA 100%);
}

.tab-st-box4 > .select-group {
  display: none;
}

/* 탭 : 리스트 */
.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-width: 1px;
  border-style: dotted;
  border-color: #b8b8b8;
  background: #fff;
  color: #999;
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1rem;
  text-align: center;
  transition: all 0.3s ease;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
}

.tab-list li.on a {
  border-color: #64A0D3;
  background: #f4f7ff;
  color: #64A0D3;
  font-weight: 600;
}

/* 탭 : 순차적 */
.tab-order-st1 {
  display: flex;
  gap: 0 1.5rem;
}

.tab-order-st1 > li {
  position: relative;
}

.tab-order-st1 > li > div {
  padding: 0.5rem 0.85rem;
  border: 2px solid #D2D2D2;
  border-radius: 2.5rem;
  background: #fff;
  color: #555;
  font-size: 0.8rem;
  font-weight: 700;
}

.tab-order-st1 > li > div > strong {
  position: relative;
  display: inline-block;
  margin-right: 0.35rem;
  color: #3BBBCA;
  font-size: 0.9rem;
  z-index: 1;
}

.tab-order-st1 > li > div > span {
  position: relative;
  z-index: 1;
}

.tab-order-st1 > li.on > div {
  background: linear-gradient(90deg, #00B073 0%, #0C75CA 100%);
  color: #fff;
  border-color: transparent;
}

.tab-order-st1 > li.on > div:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, #00B073 0%, #0C75CA 100%);
  border-radius: 2.5rem;
}

.tab-order-st1 > li.on > div > strong {
  color: #fff;
}

.tab-order-st1 > li + li:before {
  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%);
  content: "\f105";
}

/* 탭 : 개수 지정 */
[class*=Tab_w] > li a {
  width: 100% !important;
}


.Tab_w50 > li {
  width: 50%;
}

.Tab_w30 > li {
  width: 33.33%;
}

.Tab_w25 > li {
  width: 25%;
}

.Tab_w20 > li {
  width: 20%;
}

.Tab_w15 > li {
  width: 16.667%;
}

.Tab_w10 > li {
  width: 10%;
}

.Tab_w-n6 > li{
  width: calc(100% / 6);
}

/* 탭 : 반응형 */
.reactTab {
  display: block;
}

.reactTab a.selectTab {
  display: none;
}

/* tab + grid */
div.tab-st-box2 + .col-wrap .col-xs-1, div.tab-st-box2 + .col-wrap .col-sm-1, div.tab-st-box2 + .col-wrap .col-md-1, div.tab-st-box2 + .col-wrap .col-lg-1, div.tab-st-box2 + .col-wrap .col-xs-2, div.tab-st-box2 + .col-wrap .col-sm-2, div.tab-st-box2 + .col-wrap .col-md-2, div.tab-st-box2 + .col-wrap .col-lg-2, div.tab-st-box2 + .col-wrap .col-xs-3, div.tab-st-box2 + .col-wrap .col-sm-3, div.tab-st-box2 + .col-wrap .col-md-3, div.tab-st-box2 + .col-wrap .col-lg-3, div.tab-st-box2 + .col-wrap .col-xs-4, div.tab-st-box2 + .col-wrap .col-sm-4, div.tab-st-box2 + .col-wrap .col-md-4, div.tab-st-box2 + .col-wrap .col-lg-4, div.tab-st-box2 + .col-wrap .col-xs-5, div.tab-st-box2 + .col-wrap .col-sm-5, div.tab-st-box2 + .col-wrap .col-md-5, div.tab-st-box2 + .col-wrap .col-lg-5, div.tab-st-box2 + .col-wrap .col-xs-6, div.tab-st-box2 + .col-wrap .col-sm-6, div.tab-st-box2 + .col-wrap .col-md-6, div.tab-st-box2 + .col-wrap .col-lg-6, div.tab-st-box2 + .col-wrap .col-xs-7, div.tab-st-box2 + .col-wrap .col-sm-7, div.tab-st-box2 + .col-wrap .col-md-7, div.tab-st-box2 + .col-wrap .col-lg-7, div.tab-st-box2 + .col-wrap .col-xs-8, div.tab-st-box2 + .col-wrap .col-sm-8, div.tab-st-box2 + .col-wrap .col-md-8, div.tab-st-box2 + .col-wrap .col-lg-8, div.tab-st-box2 + .col-wrap .col-xs-9, div.tab-st-box2 + .col-wrap .col-sm-9, div.tab-st-box2 + .col-wrap .col-md-9, div.tab-st-box2 + .col-wrap .col-lg-9, div.tab-st-box2 + .col-wrap .col-xs-10, div.tab-st-box2 + .col-wrap .col-sm-10, div.tab-st-box2 + .col-wrap .col-md-10, div.tab-st-box2 + .col-wrap .col-lg-10, div.tab-st-box2 + .col-wrap .col-xs-11, div.tab-st-box2 + .col-wrap .col-sm-11, div.tab-st-box2 + .col-wrap .col-md-11, div.tab-st-box2 + .col-wrap .col-lg-11, div.tab-st-box2 + .col-wrap .col-xs-12, div.tab-st-box2 + .col-wrap .col-sm-12, div.tab-st-box2 + .col-wrap .col-md-12, div.tab-st-box2 + .col-wrap .col-lg-12 {
  padding: 0;
}

/* tab + box */
[class^=tab-box] {
  position: relative;
  display: flex;
  height: 100%;
}

[class^=tab-box] .tb-btn {
  display: flex;
  height: 1.8rem;
  background: #E7E7E7;
  /* 접근성 수정 */
  color: #555;
  font-size: 0.8rem;
  text-align: center;
  align-items: center;
  justify-content: center;
  flex: 1;
}

[class^=tab-box] .tb-btn.active {
  /* 접근성 수정 */
  background: linear-gradient(90deg, #00b073 0%, #0C75CA 100%);
  color: #64A0D3;
  font-weight: 700;
  -webkit-background-clip: text;
  line-height: 1;
  -webkit-text-fill-color: transparent;
}

[class^=tab-box] .tb-btn.active + .tb-list-box {
  display: block;
}

[class^=tab-box] .tb-list-box {
  position: absolute;
  display: none;
  bottom: 0;
  left: 0;
  width: 100%;
  height: calc(100% - 2.25rem);
}

[class^=tab-box] .tb-list-box .tb-icon-lst {
  display: flex;
  width: 100%;
  height: 100%;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}

[class^=tab-box] .tb-list-box .tb-icon-lst:before {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1px;
  height: calc(100% - 2rem);
  border-left: 1px dashed #ccc;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  content: "";
}

[class^=tab-box] .tb-list-box .tb-icon-lst:after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: calc(100% - 2rem);
  height: 1px;
  border-top: 1px dashed #ccc;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  content: "";
}

[class^=tab-box] .tb-list-box .tb-icon-lst > li {
  display: flex;
  width: 50%;
  flex-wrap: wrap;
  justify-content: center;
}

[class^=tab-box] .tb-list-box .tb-icon-lst > li a > .img {
  display: block;
  width: 100%;
  text-align: center;
}

[class^=tab-box] .tb-list-box .tb-icon-lst > li a > .img > img {
  display: block;
  margin: auto;
  transition: 0.3s;
  -webkit-transition: 0.3s;
  -moz-transition: 0.3s;
}

[class^=tab-box] .tb-list-box .tb-icon-lst > li a > .txt {
  display: block;
  margin-top: 0.5rem;
  color: #555;
  font-size: 0.9rem;
  line-height: 1;
}

[class^=tab-box] .tb-list-box .tb-icon-lst > li a > .txt:after {
  display: inline-block;
  margin-left: 0.15rem;
  color: #777;
  font-family: "xeicon";
  font-size: 1rem;
  transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  vertical-align: middle;
  transition: 0.3s;
  -webkit-transition: 0.3s;
  -moz-transition: 0.3s;
  content: "\e931";
}

[class^=tab-box] .tb-list-box .tb-txt-lst {
  display: flex;
  height: 100%;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}

[class^=tab-box] .tb-list-box .tb-txt-lst > li {
  display: flex;
  width: 50%;
  padding: 0.5rem;
  flex-wrap: wrap;
}

[class^=tab-box] .tb-list-box .tb-txt-lst > li > ul > li {
  padding: 0 !important;
  color: #555;
  font-size: 0.75rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

[class^=tab-box] .tb-list-box .tb-txt-lst > li > ul > li:before {
  display: inline-block;
  width: 0.25rem;
  height: 0.25rem;
  margin-right: 0.5rem;
  border-radius: 50%;
  background: #D9D9D9;
  vertical-align: middle;
  content: "";
}

[class^=tab-box] .tb-list-box .tb-txt-lst > li > ul > li > a {
  position: relative;
}

[class^=tab-box] .tb-list-box .tb-txt-lst > li > ul > li > a:before {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 1px;
  background: #3BBBCA;
  transition: 0.3s;
  -webkit-transition: 0.3s;
  -moz-transition: 0.3s;
  content: "";
}

[class^=tab-box] .tb-list-box .tb-txt-lst > li > a {
  display: block;
  width: 100%;
  padding: 0.25rem 0.5rem;
  background: #FAFAFA;
  color: #444;
  font-size: 0.9rem;
  font-weight: 600;
  text-align: center;
}

[class^=tab-box] .tb-list-box .tb-txt-lst > li > a > span:after {
  display: inline-block;
  margin-left: 0.15rem;
  color: #777;
  font-family: "xeicon";
  font-size: 1rem;
  transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  vertical-align: middle;
  transition: 0.3s;
  -webkit-transition: 0.3s;
  -moz-transition: 0.3s;
  content: "\e931";
}

.tab-box2 {
  display: block;
  text-align: center;
}

.tab-box2 .tb-btn {
  position: relative;
  display: inline-block;
  width: 9rem;
  height: 1.8rem;
  margin: 0 0.15rem;
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 1rem;
  text-align: center;
  /* 접근성 수정 */
  color: #555;
}

.tab-box2 .tb-btn > span {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  color: #8D8D8D;
}

.tab-box2 .tb-btn.active {
  background: linear-gradient(90deg, #00b073 0%, #0C75CA 100%);
  -webkit-text-fill-color: inherit;
  border: none;
}

.tab-box2 .tb-btn.active > span {
  color: #fff;
}

/* veiwer-box */
.veiwer-box {
  max-height: calc(100vh - 14.5rem);
  min-height: 29.65rem;
  padding: 1.5rem;
  background: #F3F4F5;
  overflow: hidden;
  overflow-y: scroll;
}

.veiwer-box > img {
  display: block;
  margin: auto;
}

[class^=n-badge] {
  border-radius: 0.25rem;
  color: #fff;
  font-size: 0.7rem;
  padding: 0 0.5rem;
  height: 1rem;
  display: inline-block;
  line-height: 1rem;
}

.n-badge1 {
  background: #3BBBCA;
}

.n-badge2 {
  background: #545CC1;
}

.n-badge3 {
  background: #FFBB24;
}

.n-badge4 {
  background: #FD6868;
}
.n-badge5 {
  background: #7E7E7E;
}

[class^=r-badge] {
  color: #fff;
  font-size: 0.9rem;
  font-weight: 500;
  height: 1.25rem;
  display: inline-block;
  padding: 0 1rem;
  border-radius: 1rem;
  line-height: 1.25rem;
  vertical-align: middle;
  text-align: center;
}

.r-badge1 {
  background: #4B7CC7;
}

.r-badge2 {
  background: #00A4B7;
}

.r-badge3 {
  background: #009B66;
}

.r-badge4 {
  background: #545CC1;
}

[class^=p-badge] {
  border-radius: 2.5rem;
  padding: 0.1rem 0.6rem;
  text-align: center;
}

.p-badge1 {
  border: 1px solid #2970CD;
  color: #2970CD;
}

.p-badge2 {
  border: 1px solid #F3874A;
  color: #F3874A;
}

.p-badge3 {
  border: 1px solid #3BBBCA;
  color: #3BBBCA;
}

.p-badge4 {
  border: 1px solid #F34A4A;
  color: #F34A4A;
}

.p-badge5 {
  border: 1px solid #7E7E7E;
  color: #7E7E7E;
}

/* 25.02.04 추가 */
.badge-st1 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 1.4rem;
  padding: 0 0.5rem;
  border-radius: 1rem;
  border: 1px solid #ccc;
  background: #fff;
  color: #84878D;
  font-size: 0.7rem;
  font-weight: 400;
}

/* 버튼 : 버튼들 감싸는 레이아웃 */
.btns {
  margin: 1rem 0;
}

.btns > [class^=btn-style] {
  margin: 0.15rem !important;
}

/* 버튼 : 기본 */
[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;
  white-space: nowrap;
}

[class^=btn-style] i {
  margin-right: 0.25rem;
}

[class^=btn-style] em.hid + i {
  margin-right: 0;
}

[class^=btn-style].btn-lage {
  width: 10rem;
}

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

[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;
}

[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 #DCDCDC;
  background: #fff;
  color: #333;
}

.btn-style1 i {
  color: #777;
}

.btn-style2 {
  /* 접근성 수정 */
  background: linear-gradient(90deg, #00b073 0%, #0C75CA 100%);
  border: 1px solid transparent;
  line-height: 2rem;
}

.btn-style2:before {
  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;
  content: "";
}

.btn-style3 {
  border: 1px solid #AAABB1;
  background: #AAABB1;
}

.btn-style4 {
  border: 1px solid #60616B;
  background: #60616B;
}

.btn-style5 {
  border: 1px solid #83858F;
  background: #83858F;
}

.btn-style6 {
  border: 1px solid #7B99C6;
  background: #7B99C6;
}

.btn-style7 {
  border: 1px solid #59C1A1;
  background: #59C1A1;
}

.btn-style8 {
  border: 1px solid #4780A7;
  background: #4780A7;
}

.btn-style9 {
  border: 1px solid #E7E7E7;
  background: #E7E7E7;
  color: #262626;
}

.btn-style10 {
  border: 1px solid #7ACAD3;
  background: #7ACAD3;
  color: #fff;
}

.btn-style11 {
  border: 1px solid #C66B00;
  background: linear-gradient(90deg, rgb(198, 107, 0) 0%, rgb(206, 149, 40) 100%);
  color: #fff;
}

.btn-style12 {
  border: 1px solid #3BBBCA;
  background: #3BBBCA;
}

.btn-style-disable {
  opacity: 0.5;
}

/* slide-toggle (hj) 240717 */
/* tit + toggle */
.tit-toggle {
  display: flex;
  gap: 1rem;
}

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

/* more btn */
.more-btn {
  display: inline-block;
  width: 1.8rem;
  height: 1.9rem;
  margin-left: 0.25rem;
  border-radius: 0.5rem;
  border: 1px solid #ccc;
  text-align: center;
}

.more-btn > i {
  display: block;
  line-height: 1.9rem;
  transition: all 0.3s;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
}

/* circle btn */
.circle-btn-text {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  border: 1px solid #c3c3c3;
  background: #ededed;
  border-radius: 50%;
  padding: 0.5rem;
  min-width: 1.5rem;
  height: auto;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: all 0.3s;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
}

.circle-btn-text span {
  display: block;
  text-align: center;
  font-size: 0.65rem;
  color: #949494;
  transition: all 0.3s;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
}

/* circle-btn-icon */
.circle-btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2em;
  height: 2em;
  border-radius: 50%;
  background: #c3c3c3;
  color: #ededed;
  transition: all 0.3s;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
}

.circle-btn-icon i {
  font-size: 1em;
  transition: all 0.3s;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
}

/* 이미지 사이즈 :확대보기 */
.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 {
  display: inline-block;
  color: #fff;
  font-size: 1.1rem;
  font-family: "Line Awesome Free";
  font-weight: 700;
  line-height: 2rem;
  content: "\f31e";
}

/* 이미지 사이즈 :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;
}

/* 콘텐츠 준비중 */
.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 */
.disB {
  display: block !important;
}

.disIb {
  display: inline-block !important;
}

/** 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;
  z-index: 1;
  transition: all 0.3s;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  font-size: 0.8rem;
}

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, #7BC6AB 0%, #64A0D3 10%);
  background-origin: border-box;
  background-clip: padding-box, border-box;
  outline: 0;
  box-shadow: 0 0 0.5rem rgba(123, 198, 171, 0.3), 0 0 0.5rem rgba(100, 160, 211, 0.3);
}

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;
}

/* select required - HJ */
[class*=InpSel] select.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);
}
input[type=number].input-number-password {
  -webkit-text-security: disc;
  -moz-appearance: textfield;
}
input[type=number].input-number-password::-webkit-outer-spin-button,
input[type=number].input-number-password::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* 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-wrong + .select-wrong-txt {
  display: block;
  color: #B12727;
  font-size: 0.7rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.InpSel-w {
  /* 너비 추가 - hj */
}

.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-w35 {
  width: 35% !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-w85 {
  width: 85% !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;
}

.InpSel-600 {
  width: 600px !important;
}

.InpSel-700 {
  width: 700px !important;
}

.InpSel-800 {
  width: 800px !important;
}

.select-group {
  position: relative;
  display: inline-block;
  height: 2rem;
  padding: 0;
  border: 0;
}

.select-group:after {
  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;
  content: "\f107";
}

.select-group select {
  position: relative;
  display: block;
  padding: 0 2rem 0 0.5rem;
  width: 100%;
  height: 100%;
  color: #333;
  background: #fff;
  cursor: pointer;
  /* font-size 수정 */
  font-size: 0.8rem;
}

.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);
}

.select-group.small {
  height: 1.5rem;
}

.input-util {
  display: inline-block;
  margin-left: 0.25rem;
}

/* datepicker */
.calendar-input {
  position: relative;
  max-width: 8.15rem;
}

.calendar-input .calendar-picker-btn {
  position: absolute;
  top: 0.45rem;
  right: 0.5rem;
  z-index: 2;
  justify-content: center;
  align-content: space-around;
  flex-wrap: wrap;
}

.calendar-input .calendar-picker-btn:before {
  color: #A2A2A2;
  font-family: "Line Awesome Free";
  font-weight: 900;
  font-size: 1.1rem;
  content: "\f133";
}

.calendar-input.time {
  width: 5.7rem;
}

.calendar-input.time .calendar-picker-btn:before {
  content: "\f017";
}

.calendar-input.small .calendar-picker-btn {
  top: 0.25rem;
}

.calendar-input.small input[class*=InpSel], .calendar-input.small textarea[class*=InpSel], .calendar-input.small [class*=InpSel] select {
  height: 1.5rem;
}

.calendar-picker {
  display: inline-block;
  vertical-align: middle;
}

.search-wrap {
  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;
}

/* datepicker calendar custom */
.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 {
  font-family: "Line Awesome Free";
  font-weight: 700;
  content: "\f104";
}

.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 {
  font-family: "Line Awesome Free";
  font-weight: 700;
  content: "\f105";
}

.ui-datepicker .ui-datepicker-next .ui-icon {
  background: transparent !important;
}

.ui-datepicker th {
  color: #A2A2A2 !important;
  font-weight: 400 !important;
}

.ui-datepicker td > a {
  border: 0 !important;
  border-radius: 50%;
  background: transparent !important;
  color: #777 !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.ui-datepicker-today a {
  color: #3BBBCA !important;
  font-weight: 600 !important;
}

.ui-datepicker td.ui-datepicker-current-day a {
  background: linear-gradient(90deg, #95DFC5 0%, #7CB6E7 100%) !important;
  color: #fff !important;
}

.dateBtn {
  display: inline-flex;
  vertical-align: middle;
  gap: 0.25rem;
  margin: 0 0.25rem;
}

.dateBtn [class^=btn-style] {
  color: #777;
}

/* date style 추가 - HJ */
.p-datepicker {
  padding: 8px 5px;
}

.p-timepicker {
  min-width: 180px;
}

.p-timepicker span {
  font-size: 1.1rem;
  color: #777 !important;
}

.p-timepicker button {
  color: #4b5563 !important;
}

.p-datepicker, .p-datepicker table {
  font-size: 0.7rem;
  color: #777 !important;
}

.p-datepicker-title > button:first-child {
  margin-right: 8px;
}

.p-datepicker-title > button:first-child::after {
  content: "년";
}

.p-datepicker-calendar, .p-monthpicker, .p-yearpicker {
  margin-top: 5px;
}

.p-datepicker-calendar tr > th {
  font-size: 0.6rem;
}

.p-datepicker-calendar tr > td > span {
  width: 2.2rem;
  height: 2.2rem;
}

/* important 삭제 */
.p-datepicker-calendar tr > th:first-child, td:first-child {
  color: #F36363;
}

.p-datepicker-calendar tr > th:last-child, td:last-child {
  color: #2970CD;
}

.p-monthpicker-month, .p-yearpicker-year {
  width: 25%;
  height: 2.7rem;
}

.p-datepicker-buttonbar {
  padding: 10px 12px;
}

/* p-calendar */
/* 첨부파일 input 제거 - HJ */
.attach-file {
  display: flex;
  justify-content: space-between;
}

.attach-file div {
  width: 66.5rem;
  height: auto;
  max-height: 4.5rem;
  padding: 0.5rem;
  display: flex;
  align-items: start;
  border-radius: 0.25rem;
  border: 1px solid #DCDCDC;
  background: #fff;
  overflow-y: hidden;
  flex-direction: column;
}

.attach-file div span {
  width: auto;
  max-width: 100%;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #A2A2A2;
  font-size: 0.75rem;
  font-weight: 400;
  display: inline-block;
}

.attach-file div span + span {
  margin-top: 0.35rem;
}

.attach-file .btn-style2 {
  width: 5rem;
  margin: 0 0 0 0.25rem;
}

.attach-file.expanded div {
  max-height: 4.5rem;
  overflow-y: auto;
}

/* 첨부파일 - HJ */
.attach-file2 {
  color: #777777;
  font-weight: 200;
}

.attach-file2 i {
  margin-right: 0.2rem;
}

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

.attach-file3 > div {
  width: 56.5rem;
  height: auto;
  max-height: 4.5rem;
  height: auto;
  padding: 0.5rem;
  display: flex;
  align-items: start;
  border-radius: 0.25rem;
  border: 1px solid #DCDCDC;
  background: #fff;
  overflow-y: hidden;
  flex-direction: column;
}

.attach-file3 > div span {
  width: auto;
  max-width: 100%;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #A2A2A2;
  font-size: 0.75rem;
  font-weight: 400;
  display: inline-block;
}

.attach-file3 > div span + span {
  margin-top: 0.35rem;
}

.attach-file3 .btn-style2, .attach-file3 .btn-style4 {
  width: 5rem;
  margin: 0 0 0 0.25rem;
}

.attach-file3.expanded div {
  max-height: 4.5rem;
  overflow-y: auto;
}

.popper-tooltip {
  background: #C26C65;
  color: #fff;
  font-weight: normal;
  padding: 0.2rem 0.4rem;
  font-size: 0.7rem;
  border-radius: 0.2rem;
  z-index: 2;
  display: none;
}

.popper-tooltip.help {
  background: #fff;
  color: #444;
  border: 1px solid #ccc;
  padding: 0.7rem 1rem;
  box-shadow: 0 0.2rem 0.2rem 0 rgba(0, 0, 0, 0.1);
  display: block;
}

.popper-tooltip .arrow {
  position: absolute;
  width: 0.75em;
  height: 0.75em;
  overflow: hidden;
}

.popper-tooltip .arrow::before {
  content: '';
  position: absolute;
  width: 0.75em;
  height: 0.75em;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(45deg);
  background: #C26C65;
}

.popper-tooltip.help .arrow::before {
  background: #fff;
  border: 1px solid #ccc;
  box-shadow: 0 0.2rem 0.2rem 0 rgba(0, 0, 0, 0.1);
}

.popper-tooltip[data-popper-placement^='bottom'] .arrow {
  top: -0.75em;
  width: 1.5em;
}

.popper-tooltip[data-popper-placement^='bottom'] .arrow::before {
  top: 100%;
}

.popper-tooltip[data-popper-placement^='top'] .arrow {
  bottom: -0.75em;
  width: 1.5em;
}

.popper-tooltip[data-popper-placement^='top'] .arrow::before {
  top: 0;
}

.popper-tooltip[data-popper-placement^='left'] .arrow {
  right: -0.75em;
  height: 1.5em;
}

.popper-tooltip[data-popper-placement^='left'] .arrow::before {
  left: 0;
}

.popper-tooltip[data-popper-placement^='right'] .arrow {
  left: -0.75em;
  height: 1.5em;
}

.popper-tooltip[data-popper-placement^='right'] .arrow::before {
  left: 100%;
}

/* 검색필터 */
/* 검색필터 : 중앙정렬 타입 */
/* 키워드 */
/* 배경색 */
[class^=srh-filter] {
  display: flex;
  width: 100%;
  padding: 0.5rem 0.75rem;
  align-items: center;
  flex-wrap: wrap;
  background: #FAFBFE;
  border: 1px solid #D0D5E5;
  border-radius: 0.7rem;
}

[class^=srh-filter] > ul,
[class^=srh-filter] > .col-wrap [class^=col-md-] > ul {
  flex: 2;
}

[class^=srh-filter] > ul.flexWidth,
[class^=srh-filter] > .col-wrap [class^=col-md-] > ul.flexWidth {
  display: flex;
}

[class^=srh-filter] > ul.flexWidth > li,
[class^=srh-filter] > .col-wrap [class^=col-md-] > ul.flexWidth > li {
  display: flex;
  padding: 0.25rem;
  align-items: center;
}

[class^=srh-filter] > ul.flexWidth > li div[class*=InpSel],
[class^=srh-filter] > .col-wrap [class^=col-md-] > ul.flexWidth > li div[class*=InpSel] {
  flex: 1;
}

[class^=srh-filter] > ul > li,
[class^=srh-filter] > .col-wrap [class^=col-md-] > ul > li {
  display: inline-block;
  padding: 0.15rem;
  vertical-align: middle;
}

[class^=srh-filter] > ul > li.w100,
[class^=srh-filter] > .col-wrap [class^=col-md-] > ul > li.w100 {
  width: 100%;
}

[class^=srh-filter] > ul > li .srh-tit,
[class^=srh-filter] > .col-wrap [class^=col-md-] > ul > li .srh-tit {
  display: inline-block;
  margin-right: 0.5rem;
  color: #84878D;
  font-size: 0.7rem;
}

[class^=srh-filter] > ul > li .srh-tit-w85,
[class^=srh-filter] > .col-wrap [class^=col-md-] > ul > li .srh-tit-w85 {
  min-width: 4.25rem;
  max-width: 100%;
}

[class^=srh-filter] > ul > li .srh-tit > strong,
[class^=srh-filter] > .col-wrap [class^=col-md-] > ul > li .srh-tit > strong {
  display: block;
  color: #444;
  font-size: 0.8rem;
  font-weight: 600;
}

[class^=srh-filter] > ul > li .srh-tit .tit-info,
[class^=srh-filter] > .col-wrap [class^=col-md-] > ul > li .srh-tit .tit-info {
  vertical-align: middle;
  line-height: 1;
}

[class^=srh-filter] > ul > li .srh-tit .tit-info .tit-info-cont,
[class^=srh-filter] > .col-wrap [class^=col-md-] > ul > li .srh-tit .tit-info .tit-info-cont {
  line-height: 1.5;
}

[class^=srh-filter] > ul > li .srh-cont,
[class^=srh-filter] > .col-wrap [class^=col-md-] > ul > li .srh-cont {
  display: inline-block;
  width: auto;
  min-width: inherit;
  vertical-align: middle;
}

[class^=srh-filter] > ul > li .srh-cont input,
[class^=srh-filter] > .col-wrap [class^=col-md-] > ul > li .srh-cont input {
  display: inline-block;
  min-width: inherit;
  width: 8rem;
  vertical-align: middle;
}

[class^=srh-filter] > ul > li .srh-cont.unit > em,
[class^=srh-filter] > .col-wrap [class^=col-md-] > ul > li .srh-cont.unit > em {
  display: inline-block;
  color: #84878D;
  font-size: 0.7rem;
  vertical-align: middle;
}

[class^=srh-filter] > ul > li .srh-cont .srh-unit,
[class^=srh-filter] > .col-wrap [class^=col-md-] > ul > li .srh-cont .srh-unit {
  display: inline-block;
  margin: 0 0.25rem;
  font-size: 0.7rem;
  vertical-align: middle;
}

[class^=srh-filter] .btn-style2 {
  display: flex;
  align-items: center;
  margin-left: 0.25rem;
}

[class^=srh-filter].sch-ac {
  display: flex;
  justify-content: center;
}

[class^=srh-filter].sch-ac > ul {
  flex: inherit;
}

[class^=srh-filter].srh-filter2 {
  background: rgba(231, 231, 231, 0.65);
  border: 0;
  border-radius:0;
  margin-bottom:1rem;
}

[class^=srh-filter] .m-tit {
  color: #444;
  font-weight: 500;
}

[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: #444;
  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;
  display: inline-block;
  min-width: 3.5rem;
}

[class^=srh-filter].ac-src-frm {
  justify-content: center;
  gap: 0.5rem;
}

[class^=srh-filter].n-bg-color {
  background: #FAFBFE;
}



.srh-mini-filter {
  background: rgba(231, 231, 231, 0.65);
  padding: 0.65rem 0.6rem;
  border-radius: 0.5rem;
}

.srh-mini-filter > ul {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.srh-mini-filter > ul > li > a {
  white-space: nowrap;
}

/* 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;
}

/* tit + radio form */
/* 인감, 로고 첨부(hj) */
.add-img-con {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}
/* 추가 */
.add-img-con .add-img{display:flex;flex-direction:column;align-items:center;justify-content:center; border:1px dashed #ccc;width:7.5rem;height:7.5rem;cursor:pointer;margin-bottom:0.5rem;}

/* .add-img-con .add-img {
  height: 8.15rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 2.5rem;
  border: 1px dashed #ccc;
} */

.add-img-con .add-img > a {
  width: 5rem;
  height: 5rem;
  border: 1px solid #ccc;
  border-radius: 50%;
  background: #d9d9d9;
  position: relative;
  background-position: center;
  background-size: cover;
}

.add-img-con .add-img > a .img {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.add-img-con .add-img > a:before {
  content: "\ea4a";
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background: linear-gradient(90deg, #7BC6AC 0%, #65A1D3 100%);
  position: absolute;
  bottom: 0;
  right: 0;
  font-family: "xeicon";
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 10;
}

.add-img-con .add-img > span {
  color: #262626;
  font-weight: 500;
}

.add-img-con .add-img.no-add-img > a:before {
  content: "\f2ed";
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background: #83858F;
  position: absolute;
  bottom: 0;
  right: 0;
  font-family: "Line Awesome Free";
  color: #fff;
  font-weight: 300;
  font-size: 0.9rem;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 10;
}

/* box style */
.box-style1 {
  padding: 1.5rem;
  border: 1px solid #E1E1E1;
}

.box-style2 {
  padding: 1.5rem;
  background: #F6F6F6;
}

.box-style3 {
  padding: 1rem 1.5rem;
  background: #FAFAFA;
}

.box-style4 {
  padding: 0.15rem 0.5rem;
  border-radius: 0.7rem;
  overflow: hidden;
  background: #F1F2F7;
}

.box-style4 .wrap {
  position: relative;
  padding: 1.5rem;
  min-height: 5rem;
  border: 0.05rem solid #ccc;
  border-radius: calc(0.7rem - 2px);
  background-color: #fff;
  z-index: 1;
}

.box-style5 {
  padding: 0.5rem 0.75rem;
  border: 1px solid #575b66;
  background: linear-gradient(271deg, rgb(54, 57, 62) 0%, rgb(44, 48, 57) 100%);
}

.box-style6 {
  display: flex;
  width: 100%;
  padding: 0;
  /*(ej) 240716*/
  /* (hj)240718 */
}

.box-style6 .right.box_r {
  width: 75%;
}

.box-style6 .left, .box-style6 .right {
  border-radius: 0.7rem;
  overflow: hidden;
}

.box-style6 .left .box, .box-style6 .right .box {
  padding: 0.8rem;
  text-align: center;
}

.box-style6 .left .box .tit, .box-style6 .right .box .tit {
  font-size: 1.05rem;
  font-weight: 700;
}

.box-style6 .left .box .tit .las, .box-style6 .right .box .tit .las {
  margin-left: 0.2rem;
  padding: 0.1rem;
  color: #fff;
  border-radius: 0.2rem;
}

.box-style6 .left .box .tit .las.la-arrow-down, .box-style6 .right .box .tit .las.la-arrow-down {
  background: #769CE4;
}

.box-style6 .left .box .tit .las.la-arrow-up, .box-style6 .right .box .tit .las.la-arrow-up {
  background: #FD6868;
}

.box-style6 .left .box .tit > span, .box-style6 .right .box .tit > span {
  margin-right: 0.2rem;
  padding: 0.2rem 0.5rem;
  border-radius: 1rem;
  background-color: #fff;
  font-size: 0.75rem;
  font-weight: 500;
  vertical-align: middle;
}

.box-style6 .left .box .txt, .box-style6 .right .box .txt {
  margin-top: 0.5rem;
  padding: 0.3rem 1rem;
  background: #373C51;
  color: #fff;
  border-radius: 0.7rem;
  font-weight: 800;
}

.box-style6 .left .box .txt span, .box-style6 .right .box .txt span {
  margin-right: 0.2rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: #D2D6E5;
}
.box-style6 .left .box .txt span, .box-style6 .right .box .txt em{
  font-size: 0.9rem;
  font-weight: 600;
  color: #D2D6E5;
}

.box-style6 .left .box .txt span.num, .box-style6 .right .box .txt span.num {
  font-weight: 800;
  font-size: 1.6rem;
  background: linear-gradient(90deg, #7DC5B2 0%, #6AA7D2 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.box-style6 .left .box .txt span.up, .box-style6 .right .box .txt span.up {
  padding: 0.2rem 0.5rem;
  background: #FD6868;
  color: #fff;
  font-size: 0.7rem;
  border-radius: 2rem;
}

.left {
  margin-right: 1%;
  width: 24%;
}

.left .box {
  background: linear-gradient(90deg, #7DC5B2 0%, #6AA7D2 100%);
}

.left .box .tit {
  color: #fff;
}

.right {
  display: table;
  table-layout: fixed;
  width: 100%;
  border: 1px solid #B1C6D4;
}

.right .box {
  background: #E1ECF3;
  display: table-cell;
  border-right: 1px dashed #ccc;
}

.right .box .tit {
  color: #262626;
}

.right .box:nth-child(2n) {
  background-color: #F1F5F8;
}

.right .box:last-child {
  border-right: 0;
}

.box-style6.type2 .right {
  width: 100%;
}

.box-style6.type2::before {
  display: none;
}

.box-style6.type3 .right .box {
  min-height: 9rem;
}

.c-up, .c-down {
  margin-top: 0.5rem;
  border-radius: 0.5rem;
  text-align: center;
}

.c-up {
  color: #FD6868;
}

.c-down {
  color: #689BFD;
}

.box-style6.type3 .right .box .txt.empty {
  margin-top: 1.8rem !important;
}

.box-style6.type3 .right .box .list {
  display: flex;
  gap: 0.3rem;
}

.box-style6.type3 .right .box .list li {
  flex-grow: 1;
  width: 50%;
}

.box-style6 .c-up2 {
  border: 1px solid #B1C6D4;
  border-radius: 0.3rem;
  background: #fff;
  color: #474747;
  font-weight: 700;
  margin-top: 0.5rem;
  padding: 0.3rem 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.box-style6 .c-up2 > i {
  color: #FD6868;
  margin-left: 0.5rem;
  font-size: 1rem;
}

.box-style6 .c-down2 {
  border: 1px solid #B1C6D4;
  border-radius: 0.3rem;
  background: #fff;
  color: #474747;
  font-weight: 700;
  margin-top: 0.5rem;
  padding: 0.3rem 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.box-style6 .c-down2 > i {
  color: #6892FD;
  margin-left: 0.5rem;
  font-size: 1rem;
}

.box-style7 {
  padding: 0.8rem 0.6rem;
  border: 1px solid #ccc;
  background: #fff;
}

.box-style8 {
  padding: 0.75rem 2rem;
  border-radius: 0.5rem;
  background: #f6f6f6;
}

.box-style9 {
  padding: 1.3rem 1rem;
  border: 1px solid #ccc;
  background: #fff;
  border-radius: 0.5rem;
}

.box-style10 {
  display: flex;
  gap: 0.5rem;
  padding: 0;
}

.box-style10 .box {
  flex-grow: 1;
  text-align: center;
}

.box-style10 .box .inner {
  padding: 0.5rem;
  border: 1px solid #D0D5E5;
  border-radius: 0.5rem;
  background-color: #E7EAF2;
}

.box-style10 .box .inner p {
  font-size: 0.9rem;
  font-weight: 600;
}

.box-style11 {
  padding: 0.5rem 0.75rem;
  background: #373C51;
  color: #fff;
}

.box-style12 {
  display: flex;
  padding: 0;
}

.box-style12 .img {
  display: flex;
  width: 5.3rem;
  background: linear-gradient(180deg, #7BC6AC 0%, #65A1D3 100%) !important;
  align-items: center;
  justify-content: center;
}

.box-style12 .txt {
  display: flex;
  width: calc(100% - 5.3rem);
  height: 5.3rem;
  padding: 0 1rem;
  background: #fff;
  align-items: center;
  border: 1px solid #eee;
  border-left: 0;
}

.box-style13 {
  padding: 0.75rem 2rem;
  border-radius: 0.5rem;
  background: #FEF6F6;
}

/* 첨부파일 추가 */
.b-st2-inner{display:flex;flex-direction:column;gap:0.5rem;align-items:center;}

/* 사각 형태 박스 */
.q-box {
  padding: 0.8rem 0.6rem;
  border: 1px solid #ccc;
  background: #fff;
}

/* box text style */
.box-text-style1 {
  padding: 1rem;
  border: 2px solid #dcdcdc;
  border-radius: 0.5rem;
}

.box-text-style1 > ul {
  margin: -0.5rem 0;
}

.box-text-style1 > ul > li {
  display: flex;
  padding: 0.5rem 0;
  justify-content: space-between;
  align-items: center;
}

.box-text-style1 > ul > li + li {
  border-top: 1px dashed #ccc;
}

.box-text-style1 > ul > li:last-of-type {
  border-bottom: 1px solid #ddd;
}

.box-text-style1 > ul > li > strong {
  color: #444;
  font-size: 0.9rem;
  font-weight: 600;
}

.box-text-style1 > ul > li > strong > span {
  display: block;
  font-size: 0.8rem;
  font-weight: 400;
}

.box-text-style1 > ul > li > span {
  color: #444;
  font-size: 1rem;
  font-weight: 700;
}

.box-text-style1 > ul > li > span > em {
  margin-left: 0.25rem;
  color: #555;
  font-size: 0.7rem;
  font-weight: 400;
}

.box-text-style2 {
  display: flex;
  width: 100%;
  height: calc(100% - 2.45rem);
  margin-top: 0.5rem;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
}

.box-text-style2 > li {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-content: space-around;
  height: 50%;
  width: calc(50% - 0.25rem);
}

.box-text-style2 > li > div {
  width: 100%;
  height: 100%;
  border: 1px solid #6a707f;
}

.box-text-style2 > li > div > strong {
  display: block;
  padding: 0.25rem;
  background: #515561;
  color: #fff;
  text-align: center;
  font-size: 0.65rem;
}

.box-text-style2 > li > div > span {
  display: flex;
  height: calc(100% - 1.95rem);
  padding: 0 0.75rem;
  align-items: center;
  justify-content: flex-end;
}

.box-text-style2 > li > div > span > span {
  color: #929bae;
}

.box-text-style2 > li > div > span > span > em {
  display: inline-block;
  margin-right: 0.15rem;
  color: #fff;
  font-size: 1rem;
  font-weight: 700;
}

.box-text-style2 > li > div > span > span > em.l-length {
  font-size: 0.7rem;
}

.box-text-style2.h-fix1 {
  height: calc(33.333% - 3rem);
}

.box-text-style2.h-fix1 + .line5 {
  margin: 1rem 0 0.35rem;
}

/* .box-text-style3 > ul {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.8rem;
}

.box-text-style3 > ul > li {
  padding: 1rem;
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 0.5rem;
}

.box-text-style3 > ul > li.bg-c2 {
  background: #EFF9FB;
  border-color: #ADDFE8;
}

.box-text-style3 > ul > li.bg-c2 > div > strong > em {
  background: #24ACC5;
}

.box-text-style3 > ul > li.bg-c2 > strong {
  color: #24ACC5;
}

.box-text-style3 > ul > li.bg-c3 {
  background: #F1F6FC;
  border-color: #C6D8EF;
}

.box-text-style3 > ul > li.bg-c3 > div > strong > em {
  background: #2970CD;
}

.box-text-style3 > ul > li.bg-c3 > strong {
  color: #2970CD;
}

.box-text-style3 > ul > li > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.box-text-style3 > ul > li > div > strong {
  color: #444;
  font-size: 0.8rem;
  font-weight: 600;
}

.box-text-style3 > ul > li > div > strong > em {
  display: inline-block;
  margin-left: 0.25rem;
  padding: 0.15rem 0.5rem;
  border-radius: 0.25rem;
  color: #444;
  color: #fff;
  font-weight: 400;
}

.box-text-style3 > ul > li > div > span {
  color: #999;
  font-size: 0.7rem;
}

.box-text-style3 > ul > li > strong {
  display: block;
  margin-top: 2rem;
  font-size: 1.75rem;
  font-weight: 700;
  text-align: center;
} */

.box-text-style3 > ul {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.8rem;
}
.box-text-style3 > ul > li {
  display: flex;
  flex-direction: column;
  padding: 1rem;
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 0.5rem;
  min-height: 8.5rem;
}
.box-text-style3 > ul > li.bg-c2 {
  background: #EFF9FB;
  border-color: #ADDFE8;
}
.box-text-style3 > ul > li.bg-c2 > div > strong > em {
  background: #24ACC5;
}
.box-text-style3 > ul > li.bg-c2 > strong {
  color: #24ACC5;
}
.box-text-style3 > ul > li.bg-c3 {
  background: #F1F6FC;
  border-color: #C6D8EF;
}
.box-text-style3 > ul > li.bg-c3 > div > strong > em {
  background: #2970CD;
}
.box-text-style3 > ul > li.bg-c3 > strong {
  color: #2970CD;
}
.box-text-style3 > ul > li > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 1;
}
.box-text-style3 > ul > li > div > strong {
  color: #444;
  font-size: 0.8rem;
  font-weight: 600;
}
.box-text-style3 > ul > li > div > strong > em {
  display: inline-block;
  margin-left: 0.25rem;
  padding: 0.15rem 0.5rem;
  border-radius: 0.25rem;
  color: #444;
  color: #fff;
  font-weight: 400;
}
.box-text-style3 > ul > li > div > span {
  color: #999;
  font-size: 0.7rem;
}
.box-text-style3 > ul > li > strong {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.75rem;
  font-weight: 700;
  flex-grow: 1;
}


/* box + icon */
.icon-box-wrap1 {
  padding: 7.5rem 0;
  background: #F6F6F6;
  text-align: center;
}

.icon-box-wrap1 .txt1 {
  position: relative;
  margin: 1.25rem 0 1rem;
  color: #262626;
  font-size: 1.1rem;
  font-weight: 600;
}

.icon-box-wrap1 .txt2 {
  position: relative;
  margin: 1.25rem 0 1rem;
  color: #262626;
  font-size: 1.5rem;
  font-weight: 500;
}

.icon-box-wrap1 .txt2 > span {
  display: block;
  font-size: 1.2rem;
  font-weight: 400;
}

.icon-box-wrap1 .img {
  position: relative;
  display: flex;
  width: 7.5rem;
  height: 7.5rem;
  margin: auto;
  border-radius: 50%;
  background: #fff;
  align-items: center;
  justify-content: center;
}

.icon-box-wrap1 .img:before {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 120%;
  height: 120%;
  border-radius: 50%;
  border: 1px solid #fff;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  content: "";
}

.icon-box-wrap1-4 {
  padding: 7.5rem;
  background: #f6f6f6;
  text-align: center;
  background: #f6f6f6;
}

.icon-box-wrap1-4 .txt1 {
  margin: 1rem 0 1.5rem;
  font-size: 1.1rem;
  font-weight: 600;
  text-align: center;
}

.icon-box-wrap1-4 .txt1 > span {
  display: block;
  font-size: 0.9rem;
  font-weight: 400;
  margin-top: 0.5rem;
  white-space: nowrap;
}

.icon-box-wrap1-4 .img {
  position: relative;
  display: flex;
  width: 7.5rem;
  height: 7.5rem;
  margin: auto;
  border-radius: 50%;
  background: #fff;
  align-items: center;
  justify-content: center;
}

.icon-box-wrap1-4 .img img {
  position: absolute;
  top: 50%;
  left: 25%;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
}

.icon-box-wrap1-4 .img:after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 120%;
  height: 120%;
  border-radius: 50%;
  border: 1px solid #fff;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  content: "";
}

.icon-box-wrap4 {
  position: relative;
  padding: 0.5rem 0.75rem;
  background: linear-gradient(129deg, rgb(123, 198, 172) 0%, rgb(101, 161, 211) 100%);
  box-shadow: 0 0 0.5rem 0 rgba(0, 0, 0, 0.2);
}

.icon-box-wrap4:before {
  position: absolute;
  top: 50%;
  left: 50%;
  width: calc(100% - 6px);
  height: calc(100% - 6px);
  background: #fff;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  content: "";
}

.icon-box-wrap4 > * {
  position: relative;
  z-index: 1;
}

.icon-box-wrap4 .tit {
  display: inline-block;
}

.icon-box-wrap4 .tit [class^=state] {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  border-radius: 1rem;
  color: #fff;
  font-size: 0.9rem;
  line-height: 1;
  vertical-align: middle;
}

.icon-box-wrap4 .tit .state1 {
  background: #C66B00;
}

.icon-box-wrap4 .tit .state2 {
  background: #4B7CC7;
}

.icon-box-wrap4 .tit > span {
  display: inline-block;
  margin-left: 0.25rem;
  color: #5C5C5C;
  font-size: 1rem;
  font-weight: 500;
  vertical-align: middle;
}

.icon-box-wrap4 .tit > span.month {
  color: #262626;
  font-size: 2rem;
  font-weight: 700;
  margin-right: 0.5rem;
}

.icon-box-wrap4 .tit .year-select {
  position: relative;
  display: inline-block;
  margin-left: 0.25rem;
  vertical-align: middle;
}

.icon-box-wrap4 .tit .year-select .label {
  display: block;
  padding-right: 2rem;
  color: #262626;
  font-size: 2rem;
  font-weight: 700;
}

.icon-box-wrap4 .tit .year-select .label:after {
  position: absolute;
  top: 50%;
  right: 0;
  width: 1.45rem;
  height: 1.45rem;
  background: #F3F3F3;
  border-radius: 50%;
  color: #5C5C5C;
  font-family: "Line Awesome Free";
  font-size: 0.8rem;
  line-height: 1.45rem;
  text-align: center;
  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;
  content: "\f106";
}

.icon-box-wrap4 .tit .year-select > ul {
  position: absolute;
  top: 2.5rem;
  left: 0;
  width: 100%;
  max-height: 0;
  border-radius: 0.5rem;
  background: #F3F3F3;
  overflow: hidden;
  transition: all 0.3s;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
}

.icon-box-wrap4 .tit .year-select > ul > li {
  width: 100% !important;
  float: none;
  padding: 0;
}

.icon-box-wrap4 .tit .year-select > ul > li + li {
  border-top: 1px dotted #ccc;
}

.icon-box-wrap4 .tit .year-select > ul > li a {
  display: block;
  padding: 0.35rem 0.5rem;
  line-height: 1;
}

.icon-box-wrap4 .tit .year-select > ul > li a > span {
  display: block;
}

.icon-box-wrap4 .tit .year-select.active > ul {
  max-height: 500px;
  padding: 0.15rem 0;
}

.icon-box-wrap4 .tit .year-select.active > ul > li.on > a:after {
  top: calc(50% - 2px);
  transform: translateY(-50%) rotate(180deg);
  -webkit-transform: translateY(-50%) rotate(180deg);
  -moz-transform: translateY(-50%) rotate(180deg);
}

.icon-box-wrap4 .tit > img {
  display: inline-block;
  vertical-align: middle;
}

.icon-box-wrap4 .count-txt {
  display: inline-block;
  margin-left: 0.85rem;
  color: #5C5C5C;
  font-size: 1rem;
  font-weight: 500;
  vertical-align: middle;
}

.icon-box-wrap4 .count-txt > em {
  display: inline-block;
  margin-left: 1rem;
  color: #262626;
  font-size: 1.3rem;
  font-weight: 700;
  vertical-align: middle;
}

.icon-box-wrap4 .count-txt > em > strong {
  display: inline-block;
  margin: 0 0.25rem;
  background: linear-gradient(90deg, #7BC6AB 0%, #64A0D3 83.51%);
  color: #64A0D3;
  font-weight: 800;
  font-size: 2rem;
  vertical-align: middle;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.icon-box-wrap4 .count-txt > em > span {
  color: #262626;
  font-size: 1.1rem;
  font-weight: 600;
}

/* (hj) 240717 */
.icon-box-wrap5 {
  display: flex;
  gap: 1rem;
}

.icon-box-wrap5 .icon-box1 {
  border: 1px solid #ccc;
  border-radius: 0.5rem;
  overflow: hidden;
  flex: 1;
  height: 6rem;
}

.icon-box-wrap5 .icon-box1 .tit {
  text-align: center;
  color: #fff;
  font-size: 1rem;
  font-weight: 700;
  background: #009360;
}

.icon-box-wrap5 .icon-box1 > div {
  display: flex;
}

.icon-box-wrap5 .icon-box1 > div .img-tit {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  align-items: center;
  width: 5.5rem;
  padding: 0.5rem;
  background: #EDF8F4;
}

.icon-box-wrap5 .icon-box1 > div .img-tit img {
  width: 2rem;
  height: 2rem;
}

.icon-box-wrap5 .icon-box1 > div .img-tit span {
  display: block;
  font-size: 0.9rem;
  font-weight: 700;
  text-align: center;
}

.icon-box-wrap5 .icon-box1 > div .value {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  align-items: center;
  justify-content: center;
}

.icon-box-wrap5 .icon-box1 > div .value > strong {
  color: #009360;
  font-size: 1.4rem;
  font-weight: 700;
}

.icon-box-wrap5 .icon-box1 > div .value > span {
  color: #555;
  font-size: 0.75rem;
}

.icon-box-wrap5 .icon-box1 > div .value.dash-right {
  position: relative;
}

.icon-box-wrap5 .icon-box1 > div .value.dash-right:after {
  content: "";
  width: 1px;
  height: 60%;
  border: 1px dashed #ccc;
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
}

.icon-box-wrap5 .icon-box1.type2 .tit {
  background: #0093AD;
}

.icon-box-wrap5 .icon-box1.type2 .img-tit {
  background: #E7F5F8;
}

.icon-box-wrap5 .icon-box1.type2 .value > strong {
  color: #0093AD;
}

.icon-box-wrap5 .icon-box2 {
  border-radius: 0.5rem;
  border: 1px solid #ccc;
  flex: 1;
  overflow: hidden;
  height: 6rem;
}

.icon-box-wrap5 .icon-box2 > div {
  display: flex;
  height: 100%;
}

.icon-box-wrap5 .icon-box2 > div .img-tit {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  flex-direction: column;
  width: 5.5rem;
  padding: 0.5rem;
  background: #EDF8F4;
}

.icon-box-wrap5 .icon-box2 > div .img-tit img {
  width: 2rem;
  height: 2rem;
}

.icon-box-wrap5 .icon-box2 > div .img-tit span {
  display: block;
  font-size: 0.9rem;
  font-weight: 700;
  text-align: center;
}

.icon-box-wrap5 .icon-box2 > div .tit-value {
  flex: 1;
  border-right: 1px dashed #ccc;
}

.icon-box-wrap5 .icon-box2 > div .tit-value .tit {
  text-align: center;
  color: #fff;
  font-size: 1rem;
  font-weight: 700;
  background: #009360;
}

.icon-box-wrap5 .icon-box2 > div .tit-value > div {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  align-items: center;
  justify-content: center;
  padding: 0.25rem 0;
}

.icon-box-wrap5 .icon-box2 > div .tit-value > div > strong {
  color: #009360;
  font-size: 1.4rem;
  font-weight: 700;
}

.icon-box-wrap5 .icon-box2 > div .tit-value > div > span {
  color: #555;
  font-size: 0.75rem;
}

.icon-box-wrap5 .icon-box2 > div .tit-value:last-child {
  border: none;
}

.icon-box-wrap5 .icon-box2.type2 .tit {
  background: #0093AD;
}

.icon-box-wrap5 .icon-box2.type2 .img-tit {
  background: #E7F5F8;
}

.icon-box-wrap5 .icon-box2.type2 .tit-value .tit {
  background: #0093AD;
}

.icon-box-wrap5 .icon-box2.type2 .tit-value > div strong {
  color: #0093AD;
}

.icon-box-wrap5 .icon-box2.type3 {
  position: relative;
  z-index: 1;
}

.icon-box-wrap5 .icon-box2.type3 .tit-value .tit {
  background: none;
  padding: 0.1rem 0;
}

.icon-box-wrap5 .icon-box2.type3 .tit-value > div > strong {
  background: linear-gradient(90deg, #00B073 0%, #0C75CA 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.icon-box-wrap5 .icon-box2.type3 .tit-value:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 1.7rem;
  background: linear-gradient(90deg, #00B073 0%, #0C75CA 100%);
  z-index: -1;
}

.icon-box-wrap8 {
  height: calc(50% - 1.45rem);
}

.icon-box-wrap8 .titFlex {
  padding: 0.25rem 1rem;
  background: #626671;
  box-shadow: 0.05rem 0.05rem 0.15rem 0.1rem rgba(0, 0, 0, 0.15);
}

.icon-box-wrap8 .titFlex > span {
  color: #fff;
  font-weight: 500;
}

.icon-box-wrap8 .titFlex > em {
  color: #fff;
  font-size: 0.65rem;
}

.icon-box-wrap8 .titFlex > em > strong {
  font-size: 1rem;
  font-weight: 600;
  margin-right: 0.3rem;
}

.icon-box-wrap8 > ul {
  display: flex;
  width: 100%;
  height: calc(100% - 2.45rem);
  margin-top: 0.5rem;
  flex-flow: row wrap;
  justify-content: space-between;
  gap: 0.25rem;
}

.icon-box-wrap8 > ul > li {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-content: space-around;
  height: 50%;
  width: calc(50% - 0.125rem);
}

.icon-box-wrap8 > ul > li > div {
  display: flex;
  width: 100%;
  height: 100%;
  border: 1px solid #ccc;
  text-align: center;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}

.icon-box-wrap8 > ul > li > div .img {
  display: block;
}

.icon-box-wrap8 > ul > li > div .img > img {
  display: block;
}

.icon-box-wrap8 > ul > li > div .txt {
  display: block;
  width: 100%;
  font-size: 0.75rem;
  line-height: 1;
}

.icon-box-wrap8 > ul > li > div .txt > strong {
  display: block;
  color: #444 !important;
  font-size: 0.6rem;
}

.icon-box-wrap8 > ul > li > div .txt > strong > em {
  margin-right: 0.15rem;
  font-size: 0.9rem;
  color: #444;
  font-weight: 700;
}

.icon-box-wrap8.icon-box-wrap8-2 .titFlex {
  background: #F3F5FA;
  box-shadow: none;
  border-radius: 0.5rem;
}

.icon-box-wrap8.icon-box-wrap8-2 .titFlex > span {
  display: inline-block;
  font-weight: 700;
  font-size: 0.9rem;
  color: #262626;
}

.icon-box-wrap8.icon-box-wrap8-2 .titFlex > span > em {
  display: inline-block;
  margin-left: 0.25rem;
  padding: 0.15rem 0.65rem;
  background: #fff;
  color: #555;
  border-radius: 1.5rem;
  font-size: 0.75rem;
}

.icon-box-wrap8.icon-box-wrap8-2 .titFlex > ul {
  display: inline-block;
  margin: 0 -0.5rem;
}

.icon-box-wrap8.icon-box-wrap8-2 .titFlex > ul > li {
  position: relative;
  float: left;
  padding: 0 0.5rem;
}

.icon-box-wrap8.icon-box-wrap8-2 .titFlex > ul > li + li:before {
  position: absolute;
  top: 50%;
  left: 0;
  width: 1px;
  height: 0.5rem;
  background: #575d68;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  content: "";
}

.icon-box-wrap8.icon-box-wrap8-2 .titFlex > ul > li > span {
  color: #555;
  font-size: 0.8rem;
  font-weight: 600;
}

.icon-box-wrap8.icon-box-wrap8-2 .titFlex > ul > li > em {
  color: #b5b8c0;
  font-size: 0.7rem;
}

.icon-box-wrap8.icon-box-wrap8-2 .titFlex > ul > li > em > strong {
  margin: 0 0.25rem 0 0.5rem;
  color: #43C5DB;
  font-size: 1rem;
  font-weight: 700;
}

.icon-box-wrap8.icon-box-wrap8-2 > ul {
  height: auto;
}

.icon-box-wrap8.icon-box-wrap8-2 > ul > li {
  height: 10.25rem;
}

.icon-box-wrap8.icon-box-wrap8-2 > ul > li .cnt {
  display: flex;
  justify-content: space-between;
}

.icon-box-wrap8.icon-box-wrap8-2 > ul > li .cnt .l-box {
  display: flex;
  width: 6.5rem;
  height: 100%;
  background: linear-gradient(178deg, #F3F5FA, #fff 100%);
  justify-content: center;
  flex-wrap: wrap;
  align-content: center;
}

.icon-box-wrap8.icon-box-wrap8-2 > ul > li .cnt .l-box .txt {
  margin-top: 0.5rem;
  color: #555;
  font-size: 0.9rem;
  font-weight: 700;
  text-align: center;
}

.icon-box-wrap8.icon-box-wrap8-2 > ul > li .cnt .l-box .txt > em {
  display: block;
  width: 2.75rem;
  margin: 0.35rem auto 0;
  padding: 0.2rem 0;
  background: #E9EEFA;
  color: #555;
  font-size: 0.7rem;
  border-radius: 1rem;
}

.icon-box-wrap8.icon-box-wrap8-2 > ul > li .cnt .r-box {
  width: calc(100% - 6.5rem);
  padding: 0 1rem;
}

.icon-box-wrap8.icon-box-wrap8-2 > ul > li .cnt .r-box > ul {
  margin: -0.25rem 0;
}

.icon-box-wrap8.icon-box-wrap8-2 > ul > li .cnt .r-box > ul > li {
  display: flex;
  padding: 0.25rem 0;
  justify-content: space-between;
}

.icon-box-wrap8.icon-box-wrap8-2 > ul > li .cnt .r-box > ul > li + li {
  border-top: 1px solid #ccc;
}

.icon-box-wrap8.icon-box-wrap8-2 > ul > li .cnt .r-box > ul > li > span {
  color: #555;
  font-size: 0.7rem;
  font-weight: 500;
  line-height: 1.5rem;
}

.icon-box-wrap8.icon-box-wrap8-2 > ul > li .cnt .r-box > ul > li > strong {
  color: #555555;
  font-size: 0.7rem;
}

.icon-box-wrap8.icon-box-wrap8-2 > ul > li .cnt .r-box > ul > li > strong > em {
  display: inline-block;
  margin-right: 0.25rem;
  color: #43C5DB;
  font-size: 1rem;
  font-weight: 700;
}

.icon-box-wrap10 > ul {
  display: flex;
  height: 10rem;
  justify-content: space-between;
  align-items: center;
  gap: 0 0.55rem;
}

.icon-box-wrap10 > ul > li * {
  flex-grow: 1;
}

.icon-box-wrap10 > ul > li {
  width: 100%;
  height: 100%;
  padding: 1rem 1.5rem;
  border: 1px solid #D0D5E5;
  background: #F3F5FA;
  border-radius: 0.5rem;
}

.icon-box-wrap10 > ul > li > strong {
  display: block;
  font-size: 1rem;
  font-weight: 600;
  color: #3BBBCA;
}

.icon-box-wrap10 > ul > li [class^=cnt] .num {
  position: relative;
}

.icon-box-wrap10 > ul > li [class^=cnt] .num:before {
  position: absolute;
  bottom: 0.5rem;
  right: 0;
  width: 3.2rem;
  height: 3.2rem;
  background-image: url(/portal/assets/img/sub/icon_box_wrap_icon16.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  content: "";
}

.icon-box-wrap10 > ul > li [class^=cnt] .num:after {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: #ccc;
  z-index: 1;
  content: "";
}

.icon-box-wrap10 > ul > li [class^=cnt] .num > span {
  color: #b5b8c0;
  font-size: 0.7rem;
}

.icon-box-wrap10 > ul > li [class^=cnt] .num > span strong {
  margin-right: 0.25rem;
  background: linear-gradient(90deg, #51C69E 0%, #399CED 100%);
  color: #64A0D3;
  font-size: 2rem;
  font-weight: 800;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.icon-box-wrap10 > ul > li [class^=cnt] .up-down.up {
  font-weight: 700;
}

.icon-box-wrap10 > ul > li [class^=cnt] .up-down.up:before {
  content: "";
  position: relative;
  display: inline-block;
  margin-right: 0.25rem;
  font-size: 1rem;
  font-family: "xeicon";
  content: "\e931";
  color: #FD6868;
}

.icon-box-wrap10 > ul > li [class^=cnt] .up-down.down {
  font-weight: 700;
}

.icon-box-wrap10 > ul > li [class^=cnt] .up-down.down:before {
  content: "";
  position: relative;
  display: inline-block;
  margin-right: 0.25rem;
  font-size: 1rem;
  font-family: "xeicon";
  content: "\e937";
  color: #24ACC5;
}

.icon-box-wrap10 > ul > li [class^=cnt] ul {
  margin-top: 0.4rem;
}

.icon-box-wrap10 > ul > li [class^=cnt] ul li {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.icon-box-wrap10 > ul > li [class^=cnt] ul li > span {
  color: #555;
  font-size: 0.75rem;
}

.icon-box-wrap10 > ul > li [class^=cnt] ul li > strong {
  color: #525252;
  font-size: 0.8rem;
}

.icon-box-wrap10 > ul > li [class^=cnt] ul li > strong em {
  font-size: 1rem;
  font-weight: 700;
}

.icon-box-wrap10 > ul > li .cnt2 .num:before {
  background-image: url(/portal/assets/img/sub/icon_box_wrap_icon17.png);
}

.icon-box-wrap10 > ul > li .cnt3 .num:before {
  background-image: url(/portal/assets/img/sub/icon_box_wrap_icon18.png);
}

.icon-box-wrap11 + .icon-box-wrap11 {
  margin-top: 0.4rem;
}

.icon-box-wrap11 .cnt-tit {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.35rem 0.5rem;
  border-top: 1px solid #858fa1;
  border: 1px solid #D0D5E5;
  border-radius: 0.5rem;
  background: #F3F5FA;
}

.icon-box-wrap11 .cnt-tit > strong {
  display: inline-block;
  width: 10rem;
  color: #262626;
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: -1px;
}

.icon-box-wrap11 .cnt-tit > ul {
  flex:1;
  display: flex;
  align-items: center;
  justify-content: end;
  gap:.6rem;
}

.icon-box-wrap11 .cnt-tit > ul > li {
  vertical-align: middle;
  float: left;
  display: flex;
  align-items: center;
  gap: .6rem;
}

.icon-box-wrap11 .cnt-tit > ul > li > span {
  display: inline-block;
  /* width: 3.8rem; */
  color: #555;
  font-size: 0.8rem;
}

.icon-box-wrap11 .cnt-tit > ul > li > strong {
  position: relative;
  display: inline-block;
  width: 12.5rem;
  padding: 0.35rem 0.5rem;
  background: #373C51;
  border-radius: 0.5rem;
  text-align: right;
  color: #c3c3c3;
  font-size: 0.65rem;
  
}

.icon-box-wrap11 .cnt-tit > ul > li > strong:before {
  position: absolute;
  top: 50%;
  left: 0.75rem;
  width: 0.9rem;
  height: 0.9rem;
  background-image: url(/portal/assets/img/sub/icon_box_wrap_icon29.png);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  content: "";
}

.icon-box-wrap11 .cnt-tit > ul > li > strong > em {
  margin-right: 0.15rem;
  color: #43C5DB;
  font-size: 0.95rem;
  font-weight: 700;
}

.icon-box-wrap11 .cnt-tit > ul > li.power > strong:before {
  width: 0.9rem;
  height: 0.9rem;
  background-image: url(/portal/assets/img/sub/icon_box_wrap_icon30.png);
}

.icon-box-wrap11 .cnt-tit > ul > li.number {
  display: inline-block;
  width: 3.8rem;
  background: #fff;
  border-radius: 1rem;
}

.icon-box-wrap11 .cnt-tit > ul > li.number > em {
  display: inline-block;
  width: 100%;
  text-align: center;
  color: #555;
}

.icon-box-wrap11 .cnt-tit > ul > li.number > em > strong {
  font-size: 0.85rem;
  font-weight: 700;
}

/* .icon-box-wrap11 .cnt-tit > ul > li:last-child {
  width: 12%;
} */

.icon-box-wrap11 .cnt-ani {
  display: flex;
  padding: 1.4rem 0;
  justify-content: space-between;
  align-items: center;
}

.icon-box-wrap11 .cnt-ani > [class^=tg]:not(.tg-ani) {
  position: relative;
  display: inline-block;
  width: 25%;
  height: 100%;
  margin-top: 6rem;
  padding: 0.5rem 0;
  border-radius: 1rem;
  text-align: center;
  font-weight: 700;
  color: #36A7F4;
  font-size: 0.9rem;
}

.icon-box-wrap11 .cnt-ani > [class^=tg]:not(.tg-ani):before {
  position: absolute;
  bottom: 100%;
  left: 50%;
  width: 190px;
  height: 100px;
  background: url(/portal/assets/img/sub/icon_box_wrap_icon23.png) no-repeat center;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  content: "";
}

.icon-box-wrap11 .cnt-ani .tg2:not(.tg-ani) {
  color: #6AC223;
}

.icon-box-wrap11 .cnt-ani .tg2:not(.tg-ani):before {
  background-image: url(/portal/assets/img/sub/icon_box_wrap_icon26.png);
}

.icon-box-wrap11 .cnt-ani .tg-ani {
  position: relative;
  width: 50%;
}

.icon-box-wrap11 .cnt-ani .tg-ani .ani1 {
  position: relative;
  display: block;
  width: calc(100% - 1.1rem);
  height: 0.8rem;
  background: #D9D9D9;
}

.icon-box-wrap11 .cnt-ani .tg-ani .ani1:before {
  position: absolute;
  top: 50%;
  right: -1.1rem;
  width: 1.1rem;
  height: 1.3rem;
  background-image: url(/portal/assets/img/sub/arr_ver_radius.png);
  background-size: 2.2rem 1.3rem;
  background-position: -1.1rem 0;
  background-repeat: no-repeat;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  content: "";
}

.icon-box-wrap11 .cnt-ani .tg-ani .ani1 > em {
  position: absolute;
  top: 50%;
  width: 0;
  max-width: calc(100% - 1.25rem);
  height: calc(100% - 0.5rem);
  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;
  background: repeating-linear-gradient(to right, rgba(74, 138, 255, 0) 0%, rgb(74, 138, 255) 30%, rgb(107, 230, 194) 80%, rgba(74, 138, 255, 0) 100%);
  background-size: 200% auto;
  background-position: 0 100%;
  animation: gradient2 2s infinite;
  animation-fill-mode: forwards;
  animation-timing-function: linear;
}

.icon-box-wrap11 .cnt-ani .tg-ani .ani1 > em > span {
  position: absolute;
  color: #555;
  font-size: 0.6rem;
  opacity: 0;
  transition: all 0.3s;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
}

.icon-box-wrap11 .cnt-ani .tg-ani .ani1 > em > span:before {
  position: absolute;
  left: 50%;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  content: "";
}

.icon-box-wrap11 .cnt-ani .tg-ani .ani1 > em.finish > span {
  opacity: 1;
}

.icon-box-wrap11 .cnt-ani .tg-ani .ani1.r-ani {
  margin-right: 2.25rem;
  border-radius: 0.25rem 0 0 0.25rem;
}

.icon-box-wrap11 .cnt-ani .tg-ani .ani1.r-ani > em {
  left: 0;
}

.icon-box-wrap11 .cnt-ani .tg-ani .ani1.r-ani > em > span {
  bottom: -0.5rem;
  right: -1rem;
  padding-bottom: 2.15rem;
}

.icon-box-wrap11 .cnt-ani .tg-ani .ani1.r-ani > em > span:before {
  bottom: 0;
  width: 2.2rem;
  height: 2.05rem;
  background-image: url(/portal/assets/img/sub/icon_box_wrap_icon24.png);
}

.icon-box-wrap11 .cnt-ani .tg-ani .ani1.l-ani {
  margin: 2.25rem 0 0 1.1rem;
  border-radius: 0 0.25rem 0.25rem 0;
}

.icon-box-wrap11 .cnt-ani .tg-ani .ani1.l-ani:before {
  background-position: 0 0;
  right: inherit;
  left: -1.1rem;
}

.icon-box-wrap11 .cnt-ani .tg-ani .ani1.l-ani > em {
  right: 0;
  background: repeating-linear-gradient(to right, rgba(74, 138, 255, 0) 0%, rgb(255, 228, 0) 30%, rgb(107, 230, 194) 80%, rgba(74, 138, 255, 0) 100%);
  background-size: 200% auto;
  background-position: 0 100%;
  animation: gradient2 2s infinite;
  animation-fill-mode: forwards;
  animation-timing-function: linear;
}

.icon-box-wrap11 .cnt-ani .tg-ani .ani1.l-ani > em > span {
  top: -0.75rem;
  left: -1rem;
  padding-top: 2.35rem;
}

.icon-box-wrap11 .cnt-ani .tg-ani .ani1.l-ani > em > span:before {
  top: 0;
  width: 1.3rem;
  height: 2.15rem;
  background-image: url(/portal/assets/img/sub/icon_box_wrap_icon25.png);
}

.icon-box-wrap11 .cnt-ani .tg-ani.tg-ani-ct .ani1.r-ani > em {
  margin-left: 50%;
  max-width: 45%;
  background: repeating-linear-gradient(to right, rgba(74, 138, 255, 0) 0%, rgb(74, 138, 255) 30%, rgb(107, 230, 194) 80%, rgba(74, 138, 255, 0) 100%);
  background-size: 200% auto;
  background-position: 0 100%;
  animation: gradient2 2s infinite;
  animation-fill-mode: forwards;
  animation-timing-function: linear;
}

.icon-box-wrap11 .cnt-ani .tg-ani.tg-ani-ct .ani1.l-ani > em {
  margin-right: 50%;
  max-width: 45%;
  background: repeating-linear-gradient(to right, rgba(74, 138, 255, 0) 0%, rgb(255, 228, 0) 30%, rgb(107, 230, 194) 80%, rgba(74, 138, 255, 0) 100%);
  background-size: 200% auto;
  background-position: 0 100%;
  animation: gradient2 2s infinite;
  animation-fill-mode: forwards;
  animation-timing-function: linear;
}

.icon-box-wrap11 .cnt-ani .tg-ani .ani2 {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: 1rem;
  text-align: center;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
}

@keyframes floating {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-0.5rem);
  }
  100% {
    transform: translateY(0);
  }
}

.icon-box-wrap11 .cnt-ani .tg-ani .ani2 img {
  display: block;
  margin: auto;
  animation: floating 3s ease infinite;
  width: 62px;
  height: 62px;
}

.icon-box-wrap11 .cnt-ani .tg-ani .ani2 > em {
  display: block;
  margin-top: 1rem;
  color: #555;
  font-size: 0.8rem;
}

.icon-box-wrap13 {
  margin-right: 2rem;
  height: 5.65rem;
}

.icon-box-wrap13 > ul {
  display: flex;
  justify-content: space-between;
  overflow: hidden;
  border: 1px solid #ccc;
}

.icon-box-wrap13 > ul li {
  text-align: center;
  height: 5.5rem;
  border-right: 1px dotted #ccc;
}

.icon-box-wrap13 > ul li:first-child {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #EDF8F4;
}

.icon-box-wrap13 > ul li:first-child span {
  margin-top: 0.25rem;
  font-weight: 700;
  font-size: 0.9rem;
  color: #262626;
}

.icon-box-wrap13 > ul li + li {
  flex: 2;
}

.icon-box-wrap13 > ul li + li span {
  background: #7AC5AB;
  color: #fff;
  font-size: 1rem;
  font-weight: 600;
}

.icon-box-wrap13 > ul li + li strong {
  display: block;
  font-size: 1.4rem;
  font-weight: 700;
  color: #65BC9E;
  line-height: 1;
  margin: 0.5rem 0 0.15rem 0;
  height: 1.75rem;
}

.icon-box-wrap13 > ul li + li em {
  color: #555;
  font-size: 0.75rem;
  margin-bottom: 1.5rem;
}

.icon-box-wrap13 > ul li:last-child {
  border: none;
}

.icon-box-wrap13 > ul span {
  display: block;
}

.icon-box-wrap13.icon-box-wrap13-2 {
  margin-right: 0;
}

.icon-box-wrap13.icon-box-wrap13-2 strong {
  color: #61C3D5;
}

.icon-box-wrap13.icon-box-wrap13-2 > ul li:first-child {
  background: #E7F5F8;
}

.icon-box-wrap13.icon-box-wrap13-2 > ul li + li span {
  background: #71B5C1;
}

.icon-box-wrap14 {
  border: 1px solid #ccc;
}

.icon-box-wrap14 > ul {
  display: flex;
}

.icon-box-wrap14 > ul li {
  flex: 1;
  height: 6rem;
  border-right: 1px dotted #ccc;
}

.icon-box-wrap14 > ul li > div {
  text-align: center;
}

.icon-box-wrap14 > ul li > div > span {
  display: block;
  font-size: 1rem;
  font-weight: 700;
  color: #fff;
  background: #7AC5AB;
  padding: 0.15rem;
}

.icon-box-wrap14 > ul li > div > strong {
  display: block;
  color: #65BC9E;
  font-size: 1.4rem;
  font-weight: 700;
}

.icon-box-wrap14 > ul li > div > em {
  font-size: 0.75rem;
  color: #555;
}

.icon-box-wrap14 > ul li:last-child {
  border: none;
}

/* 2nd */
/* .generator-box-wrap {
  display: flex;
  gap: 0.5rem;
}
.generator-box-wrap .box {
  border: 1px solid #D0D5E5;
  border-radius: 0.5rem;
  background: #fff;
  padding: 1rem;
  flex: 1;
  position: relative;
}
.generator-box-wrap .box.f-w{
  max-width: 15%;
}
.generator-box-wrap .box .inner {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.generator-box-wrap .box .inner > li {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.generator-box-wrap .box .tit {
  font-size: 1rem;
  font-weight: 600;
  color: #262626;
}
.generator-box-wrap .box .inner > li .tit2 {
  font-size: 0.8rem;
  font-weight: 500;
  color: #444;
}
.generator-box-wrap .box .inner > li .detail1 {
  color: #525252;
  font-size: 0.7rem;
  font-weight: 400;
  display: flex;
  align-items: center;
  gap: 0.3rem;
}
.generator-box-wrap .box .inner > li .detail1 strong {
  font-size: 2rem;
  font-weight: 700;
  background: linear-gradient(90deg, #00B073 0%, #0C75CA 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.generator-box-wrap .box .inner > li .detail2 {
  color: #555;
  font-size: 0.7rem;
  font-weight: 400;
  display: flex;
  align-items: center;
  gap: 0.3rem;
}
.generator-box-wrap .box .inner > li .detail2 strong {
  font-size: 1.1rem;
  font-weight: 700;
} */

/* 1st */
/* .generator-box-wrap {
  display: flex;
  gap: 0.5rem;
}
.generator-box-wrap .box {
  flex: 1;
  border-radius: 0.5rem;
  border: 1px solid #ccc;
  background: #fff;
  padding: 1rem;
}
.generator-box-wrap .box .tit {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: .5rem;
}
.generator-box-wrap .box .inner1 {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
.generator-box-wrap .box .inner1 strong {
  font-size: 2rem;
  font-weight: 700;
  background: linear-gradient(90deg, #00B073 0%, #0C75CA 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  height: 2.35rem;
  display: flex;
  align-items: center;
  justify-self: center;
}
.generator-box-wrap .box .inner1 span {
  color: #525252;
}
.generator-box-wrap .box .inner2 {
  display: flex;
  gap: 0.25rem;
}
.generator-box-wrap .box .inner2 > li {
  flex: 1;
}
.generator-box-wrap .box .inner2 > li > div {
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 0.25rem;
}
.generator-box-wrap .box .inner2 > li > div .lst-tit {
  border-radius: 0.25rem;
  background: #E7EAF2;
  height: 1.5rem;
  line-height: 1.5rem;
  width: 100%;
  text-align: center;
  color: #444;
  font-size: 0.7rem;
  font-weight: 500;
}
.generator-box-wrap .box .inner2 > li > div strong {
  color: #444;
  font-size: 1rem;
  font-weight: 700;
}
.generator-box-wrap .box .inner2 > li > div span {
  color: #555;
  font-size: 0.7rem;
}
.generator-box-wrap .box.fix-w {
  max-width: 15%;
} */

.generator-box-wrap {
  display: flex;
  gap: 0.5rem;
}
.generator-box-wrap .box {
  flex: 1;
  border-radius: 0.5rem;
  border: 1px solid #ccc;
  background: #fff;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.generator-box-wrap .box .tit {
  font-size: 1rem;
  font-weight: 600;
}
.generator-box-wrap .box .inner1 {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  flex: 1;
}
.generator-box-wrap .box .inner1 strong {
  font-size: 2rem;
  font-weight: 700;
  background: linear-gradient(90deg, #00B073 0%, #0C75CA 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.generator-box-wrap .box .inner1 span {
  color: #525252;
}
.generator-box-wrap .box .inner2 {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  flex-wrap: wrap;
  flex: 1;
}
.generator-box-wrap .box .inner2 > li {
  min-width: calc((100% - 0.25rem) / 2);
  max-width: calc((100% - 0.25rem) / 2);
}
.generator-box-wrap .box .inner2 > li.one {
  max-width: 100%;
  flex: 1;
}
.generator-box-wrap .box .inner2 > li > div { 
  
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.generator-box-wrap .box .inner2 > li > div .lst-tit {
  display: inline-block;
  border-radius: 0.25rem;
  background: #E7EAF2;
  width: 5rem;
  height: 1.5rem;
  line-height: 1.5rem;
  text-align: center;
  color: #444;
  font-size: 0.7rem;
  font-weight: 500;
}
.generator-box-wrap .box .inner2 > li > div > div strong {
  color: #444;
  font-size: 1rem;
  font-weight: 700;
}
.generator-box-wrap .box .inner2 > li > div > div span {
  color: #555;
  font-size: 0.7rem;
}
.generator-box-wrap .box.fix-w {
  max-width: 13.5%;
}

.up-icon {
  display: inline-block;
  width: 0.8rem;
  height: 0.8rem;
  border-radius: 50%;
  background: #FD6868;
  display: flex;
  align-items: center;
  position: relative;
}
.up-icon:after {
  content: "";
  background: url("../img/sub/arrow-up.png") no-repeat center/100%;
  width: 10px;
  height: 10px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
}

.down-icon {
  display: inline-block;
  width: 0.8rem;
  height: 0.8rem;
  border-radius: 50%;
  background: #43C5DB;
  display: flex;
  align-items: center;
  position: relative;
}
.down-icon:after {
  content: "";
  background: url("../img/sub/arrow-down.png") no-repeat center/100%;
  width: 10px;
  height: 10px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
}

.f1 {
  flex: 1;
}

.cont.map {
  padding:0;
}

.over-hidden {
  overflow: hidden !important;
}

/* tooltip2 */
.tooltip2-con {
  width: fit-content;
  min-width: 9.5rem;
  max-width: 15rem;
  display: inline-block;
  height: auto;
  position: relative;
}
.tooltip2-con:before {
  content: "";
  width: calc(100% + 4px);
  height: calc(100% + 4px);
  background: linear-gradient(180deg, #00B073 0%, #0C75CA 83.51%);
  display: inline-block;
  position: absolute;
  top: -2px;
  left: -2px;
  border-radius: 0.55rem;
}

.tooltip2 {
  padding: 0.6rem 1rem;
  border-radius: 0.5rem;
  position: relative;
  z-index: 1;
  width: 100%;
  background: #fff;
  display: inline-block;
}
.tooltip2 .tit {
  color: #444;
  font-weight: 600;
  font-size: 16px;
  margin-bottom: 0.5rem;
}
.tooltip2 > div {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.25rem;
}
.tooltip2 > div .t-badge {
  color: #444;
  font-weight: 500;
  padding: 0.1rem 0.3rem;
  border-radius: 0.25rem;
  background: #E7EAF2;
}
.tooltip2 > div > span strong {
  color: #262626;
  font-size: 0.9rem;
  font-weight: 700;
  margin-right: 0.15rem;
}
.tooltip2 .triangle {
  display: inline-block;
  width: 15px;
  height: 15px;
  transform: rotate(-45deg);
  border-left: 2px solid #0C75CA;
  border-bottom: 2px solid #0C75CA;
  position: absolute;
  bottom: -13.75px;
  left: 45%;
  background: #fff;
}

.location-marker {
  display: inline-block;
  width: 2rem;
  height: 2rem;
  background: url("../img/sub/location-maker.png") no-repeat center/contain;
  position: absolute;
  bottom: -3rem;
  left: 40%;
}

.marker {
  position: absolute;
}

/* //tooltip2 */
.weather-box {
  border-radius: 0.5rem;
  border: 1px solid #D0D5E5;
  background: #fff;
  padding: 0.25rem 0.5rem;
}
.weather-box > ul {
  display: flex;
  gap: 0.5rem;
}
.weather-box > ul > li {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}
.weather-box > ul > li [class^=weather] {
  display: inline-block;
  width: 0.9rem;
  height: 0.9rem;
}
.weather-box > ul > li .weather1 {
  background: url(/portal/assets/img/sub/w-brokencloud_icon.png) no-repeat center/100%;
}
.weather-box > ul > li .weather2 {
  background: url(/portal/assets/img/sub/w-cloudy_icon.png) no-repeat center/100%;
}
.weather-box > ul > li .weather3 {
  background: url(/portal/assets/img/sub/w-manycloud_icon.png) no-repeat center/100%;
}
.weather-box > ul > li .weather4 {
  background: url(/portal/assets/img/sub/w-mist_icon.png) no-repeat center/100%;
}
.weather-box > ul > li .weather5 {
  background: url(/portal/assets/img/sub/w-rain_icon.png) no-repeat center/100%;
}
.weather-box > ul > li .weather6 {
  background: url(/portal/assets/img/sub/w-snow_icon.png) no-repeat center/100%;
}
.weather-box > ul > li .weather7 {
  background: url(/portal/assets/img/sub/w-sun_icon.png) no-repeat center/100%;
}
.weather-box > ul > li .weather8 {
  background: url(/portal/assets/img/sub/w-sunrain_icon.png) no-repeat center/100%;
}
.weather-box > ul > li .weather9 {
  background: url(/portal/assets/img/sub/w-thunder_icon.png) no-repeat center/100%;
}
.weather-box > ul > li .weather10 {
  background: url(/portal/assets/img/sub/w-wind_icon.png) no-repeat center/100%;
}
.weather-box > ul > li .water-icon {
  background: url(/portal/assets/img/sub/water_icon.png) no-repeat center/contain;
  display: inline-block;
  width: 0.7rem;
  height: 0.7rem;
}
.weather-box > ul > li .txt {
  color: #444;
  font-size: 0.7rem;
  font-weight: 800;
}
.weather-box > ul > li .txt em {
  color: #262626;
  font-size: 0.7rem;
  font-weight: 400;
  margin-right: 0.25rem;
}

/* box */
.icon-box-flex {
  display: flex;
}

.icon-box-flex > li {
  flex: 1;
}

.icon-box-flex2 {
  display: flex;
  width: 100%;
  flex-wrap: wrap;
  flex-direction: row;
  gap: 1rem !important;
}

.icon-box-flex2 > li {
  width: calc(50% - 0.5rem);
}

/* box-list */
.box-list-sroll {
  max-height: 33rem;
  padding-right: 1rem;
  overflow: hidden;
  overflow-y: auto;
}

.box-list-sroll::-webkit-scrollbar {
  width: 0.15rem;
}

.box-list-sroll::-webkit-scrollbar-thumb {
  border: 0;
  border-radius: 0.5rem;
  background: #BFBFBF;
  background-clip: padding-box;
}

.box-list-sroll::-webkit-scrollbar-track {
  border-radius: 0.5rem;
  background: #E8E8E8;
}

.box-list {
  display: flex;
  flex-direction: row;
  border: 1px solid #ccc;
}

.box-list + .box-list {
  margin-top: 0.5rem;
}

.box-list .tit {
  flex: 0 0 10%;
  border-right: 1px solid #ccc;
  background: #F1F9FC;
  position: relative;
}

.box-list .tit span {
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
}

.box-list .lst-wrap {
  width: 100%;
  padding: 0.5rem 1rem;
}

.box-list .lst-wrap .lst {
  overflow: hidden;
}

.box-list .lst-wrap .lst ul {
  margin: -0.5rem -0.75rem;
  overflow: hidden;
  display: flex;
  flex-wrap: wrap;
}

.box-list .lst-wrap .lst ul li {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  float: left;
  padding: 0.5rem 0.75rem;
  width: 33.333%;
  border-bottom: 1px dotted #ccc;
}

.box-list .lst-wrap .lst ul li > span {
  font-size: 0.75rem;
  color: #444;
  transition: 0.3s;
  -webkit-transition: 0.3s;
  -moz-transition: 0.3s;
  word-wrap: break-word;
  word-break: keep-all;
}

.box-list .lst-wrap .lst ul li a {
  display: block;
  color: #666;
  width: 1.2rem;
  height: 1.2rem;
  border-radius: 50%;
  background: #f5f5f5;
  margin-right: 0.7rem;
  text-align: center;
  transition: 0.3s;
  -webkit-transition: 0.3s;
  -moz-transition: 0.3s;
}

.box-list .lst-wrap .lst ul li a i {
  line-height: 1.2rem;
}

.box-list .lst-wrap .lst ul li + li:before {
  content: "";
  position: absolute;
  border: 1px solid #ccc;
  width: 2px;
  height: 33%;
  top: 50%;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  left: 0;
}

/* 합계 박스 */
.total-count-box {
  display: flex;
  height: 2.5rem;
  align-items: center;
  justify-content: space-between;
  gap: 0 0.5rem;
}

.total-count-box .total-count-txt {
  display: flex;
  height: 100%;
  padding: 0 1rem;
  background: #F6F6F6;
  color: #262626;
  font-weight: 700;
  align-items: center;
  flex: 2;
  justify-content: space-between;
}

.total-count-box .total-count-btn {
  display: flex;
  height: 100%;
  padding: 0 4rem;
  background: linear-gradient(90deg, #7BC6AB 0%, #64A0D3 83.51%);
  color: #fff;
  align-items: center;
}

.total-count-box.total-count-box-complete .total-count-txt {
  justify-content: space-between;
}

.total-count-box.total-count-box2 {
  height: 3rem;
}

.total-count-box.total-count-box2 .box-graph3 {
  display: flex;
  height: 100%;
  align-items: center;
  flex: 2;
}

/* .box-graph2 {
  line-height: 1.2;
}

.box-graph2 > li {
  display: flex;
  align-items: center;
  padding: 1rem 0;
}

.box-graph2 > li > ul {
  position: relative;
  float: left;
  width: 30%;
  padding-right: 1.75rem;
}

.box-graph2 > li > ul.fixHeight1 {
  min-height: 5.2rem;
}

.box-graph2 > li > ul:before {
  position: absolute;
  top: 50%;
  right: 0;
  width: 1px;
  height: 100%;
  background: #E1E1E1;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  content: "";
}

.box-graph2 > li > ul > li {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.box-graph2 > li > ul > li .tit {
  float: left;
  font-size: 1rem;
  letter-spacing: -0.08rem;
}

.box-graph2 > li > ul > li .dot-graph {
  width: 7rem;
}

.box-graph2 > li > ul > li span.tit {
  color: #5C5C5C;
  font-size: 0.8rem;
  font-weight: 600;
}

.box-graph2 > li > ul > li .num {
  float: right;
  color: #5C5C5C;
}

.box-graph2 > li > ul > li .num > strong {
  font-size: 1.3rem;
  font-weight: 700;
}

.box-graph2 > li > ul > li .num > em {
  margin-left: 0.25rem;
  color: #84878D;
  font-size: 0.7rem;
  width: 1.85rem;
  display: inline-block;
}

.box-graph2 > li > ul > li .titT1 + .num > strong {
  color: var(--color-point-1-second);
}

.box-graph2 > li .graph {
  float: left;
  width: 70%;
  padding-left: 1.75rem;
}

.box-graph2 > li .graph .titT3 {
  margin-bottom: 0.25rem;
}

.box-graph2 > li .graph .txt {
  margin-bottom: 0.25rem;
  float: left;
  line-height: 1;
}

.box-graph2 > li .graph .txt > em {
  margin-left: 0.25rem;
  color: #84878D;
  font-size: 0.7rem;
}

.box-graph2 > li .graph .txt > strong {
  color: #5C5C5C;
  font-weight: 800;
  font-size: 1.7rem;
}

.box-graph2 > li .graph .txt:first-of-type > strong {
  background: linear-gradient(90deg, #7BC6AB 0%, #64A0D3 83.51%);
  color: #64A0D3;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.box-graph2 > li .graph .txt + .txt {
  float: right;
}

.box-graph2 > li .graph .graph-count-vertical {
  clear: both;
}

.box-graph2 > li + li {
  border-top: 1px solid #E1E1E1;
}

.box-graph2-small > li > ul > li .num > strong {
  font-size: 0.9rem;
} */

/* box-total2 추가(hj) */
.box-total2 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.6rem 1.2rem;
  background: #F8FCFC;
  border: 2px solid #71B5C1;
  font-weight: 500;
}

.box-total2 > span > strong {
  margin-right: 0.5rem;
}

.box-graph3 {
  display: flex;
  width: 100%;
  gap: 0.5rem 1.5rem;
}

.box-graph3 > li {
  position: relative;
  flex: 1;
}

.box-graph3 > li.calc-total > div {
  padding: 1rem;
  border: 0;
  background: #F6F6F6;
}

.box-graph3 > li.calc-total > div > strong {
  color: #262626;
}

.box-graph3 > li.calc-total:before {
  position: absolute;
  top: 50%;
  left: -1rem;
  color: #555;
  font-size: 0.8rem;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  content: "=";
}

.box-graph3 > li.calc-multiplication:before {
  position: absolute;
  top: 50%;
  left: -1rem;
  color: #555;
  font-size: 0.8rem;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  content: "X";
}

.box-graph3 > li.calc-plus:before {
  position: absolute;
  top: 50%;
  right: -1rem;
  color: #555;
  font-size: 1rem;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  content: "+";
}

.box-graph3 > li.calc-plus2:before {
  position: absolute;
  top: 50%;
  left: -1rem;
  color: #555;
  font-size: 1rem;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  content: "+";
}

.box-graph3 > li > div {
  position: relative;
  padding: 1.5rem 1rem 1rem 1rem;
  border: 1px solid #EAEAF2;
}

.box-graph3 > li > div > em {
  position: absolute;
  top: -0.3rem;
  left: 0.3rem;
  width: 1.5rem;
  height: 1.5rem;
  background: #107F93;
  color: #fff;
  font-weight: 700;
  font-size: 0.8rem;
  line-height: 1.5rem;
  text-align: center;
}

.box-graph3 > li > div > strong {
  display: block;
  padding-bottom: 1rem;
  border-bottom: 1px dashed #ccc;
  color: #107F93;
  font-weight: 700;
  font-size: 0.8rem;
  text-align: center;
}

.box-graph3 > li > div > span {
  display: block;
  margin-top: 1rem;
  color: #262626;
  font-size: 0.8rem;
  font-weight: 700;
  text-align: right;
}

.box-graph3 > li > div > span > strong {
  display: inline-block;
  margin-right: 0.25rem;
}

.box-graph3 > li > div > span.data-enter {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.box-graph3 > li > div > span.data-enter > input {
  font-weight: 700;
}

.box-graph3 > li > div > span.data-enter > em {
  margin-left: 0.25rem;
  color: #555;
  font-size: 0.8rem;
}

.box-graph3 > li > div.center {
  display: flex;
  align-items: center;
  justify-content: center !important;
  padding: 0.25rem !important;
  border: 0;
}

.box-graph3 > li > div > div.data-total {
  position: relative;
  text-align: left;
}

.box-graph3 > li > div > div.data-total > span {
  font-size: 1.8rem;
  font-weight: 700;
}

.box-graph3 > li > div > div.data-total > em {
  margin-left: 0.5rem;
  color: #555;
  font-size: 0.9rem;
}

.box-graph3.box-graph3-2 > li > div {
  display: flex;
  padding: 1rem 2.5rem;
  justify-content: space-between;
  align-items: center;
}

.box-graph3.box-graph3-2 > li > div > strong {
  display: inline-block;
  margin: 0;
  padding: 0;
  border: 0;
}

.box-graph3.box-graph3-2 > li > div > span {
  margin: 0;
}

.box-graph3.box-graph3-2 > li > div > span > em {
  display: inline-block;
  color: #666;
  font-size: 0.8rem;
  font-weight: 400;
}

.box-graph3.box-graph3-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 0.5rem 1.5rem;
}

.box-graph3.box-graph3-3 > li > div {
  padding: 1.25rem 0.5rem 0.5rem 0.5rem;
}

.box-graph3.box-graph3-3 > li > div > strong {
  font-size: 0.7rem;
}

.box-graph5 {
  max-height: 16.5rem;
  overflow-y: scroll;
}

.box-graph5.no-scroll {
  max-height: 100vh;
  overflow-y: auto;
}

.box-graph5::-webkit-scrollbar {
  width: 0.15rem;
}

.box-graph5::-webkit-scrollbar-thumb {
  border: 0;
  border-radius: 0.5rem;
  background: #BFBFBF;
  background-clip: padding-box;
}

.box-graph5::-webkit-scrollbar-track {
  border-radius: 0.5rem;
  background: #E8E8E8;
}

.box-graph5 > ul > li {
  display: flex;
}

.box-graph5 > ul > li + li {
  margin-top: 1rem;
}

.box-graph5 > ul > li > .scope {
  display: flex;
  width: 5.7rem;
  border: 1px solid #ccc;
  border-radius: 0.5rem;
  box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.15);
  text-align: center;
  overflow: hidden;
  flex-wrap: wrap;
  justify-content: center;
  align-content: space-between;
}

.box-graph5 > ul > li > .scope > span {
  display: block;
  width: 100%;
  padding: 0.5rem;
  background: #F4F8FB;
  color: #444;
  font-size: 0.8rem;
  font-weight: 600;
}

.box-graph5 > ul > li > .scope > .cnt {
  display: flex;
  height: calc(100% - 2.3rem);
  padding: 1rem 0 0.5rem;
  flex-wrap: wrap;
  justify-content: center;
  align-content: space-between;
  width: 100%;
}

.box-graph5 > ul > li > .scope > .cnt > strong {
  display: flex;
  height: calc(100% - 2rem);
  color: #555;
  font-size: 0.7rem;
  flex-wrap: wrap;
  justify-content: center;
  align-content: center;
}

.box-graph5 > ul > li > .scope > .cnt > strong > em {
  display: block;
  width: 100%;
  color: #444;
  font-size: 1.3rem;
  font-weight: 900;
  line-height: 1.1;
}

.box-graph5 > ul > li > .scope > .cnt > span {
  display: block;
  width: calc(100% - 1rem);
  margin: auto;
  padding-top: 0.5rem;
  color: #999;
  font-size: 0.7rem;
  border-top: 1px solid #ccc;
}

.box-graph5 > ul > li .chart {
  /* width: calc(100% - 5.7rem); */
  /* padding-left: 2rem; */
}

.box-graph5.type2 > ul > li > .scope {
  width: 10.4rem;
}

.box-graph5.type2 > ul > li .chart {
  width: calc(100% - 10.4rem);
}

.box-graph5.res1{}
.box-graph5.res1 > ul > li {display:flex;gap:1rem;}
.box-graph5.res1 > ul > li > .scope{min-width:20%;}
.box-graph5.res1 > ul > li > .chart{flex:1;}

/* .flt-graph .chart {
  display: inline-block;
  vertical-align: middle;
  width: 15.375rem;
}

.flt-graph .info {
  position: relative;
  display: inline-block;
  margin-left: 1.5rem;
  padding: 0 1.5rem;
  width: calc(100% - 17.5rem);
  border: 3px solid #E1E1E1;
  vertical-align: middle;
}

.flt-graph .info:before {
  position: absolute;
  top: 50%;
  left: -2.2rem;
  width: 2.2rem;
  height: 0.15rem;
  background: #E1E1E1;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  content: "";
}

.flt-graph .info:after {
  position: absolute;
  top: 50%;
  left: -2.2rem;
  width: 0.9rem;
  height: 0.9rem;
  border: 3px solid #E1E1E1;
  background: #fff;
  border-radius: 50%;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  content: "";
} */

.num-info-lst {
  display: flex;
  height: 100%;
  gap: 0.5rem;
  flex-direction: column;
}

.num-info-lst ul {
  display: flex;
  height: calc(100% - 1rem);
  flex-direction: column;
  justify-content: space-around;
}

.num-info-lst ul > li {
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex: 1;
}

.num-info-lst ul > li + li {
  border-top: 1px solid #E1E1E1;
}

.num-info-lst ul > li .num {
  display: flex;
  line-height: 1;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-end;
}

.num-info-lst ul > li .num > strong {
  color: #838383;
  font-size: 3rem;
  font-weight: 700;
}

.num-info-lst ul > li .num > em {
  color: #A2A2A2;
  font-size: 1.2rem;
  font-weight: 500;
}

.num-info-lst .num-info-btn {
  display: flex;
  width: 100%;
  height: 3rem;
  background: linear-gradient(90deg, #7BC6AB 0%, #64A0D3 83.51%);
  color: #fff;
  font-size: 1.1rem;
  font-weight: 700;
  align-items: center;
  justify-content: center;
}


/* 입력 박스 */
.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;
}

/* 레이어 팝업 */
.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: absolute;
  top: 50%;
  left: 50%;
  min-width: 30rem;
  max-height:80%;
  overflow-y: auto;
  padding: 1rem 1.25rem;
  border-radius: 0.25rem;
  background: #fff;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  z-index: 101;
}

.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 .cont-y-scrl {
  height: 17rem !important;
  overflow-y: scroll !important;
  padding-right: 1rem;
}

.layer-wrap .btn-close-layer {
  position: absolute;
  top: 1rem;
  right: 1rem;
  color: #262626;
  font-size: 0.8rem;
}

/* layer 최소 너비 */
.layer-wrap.l-mw1{min-width:80%;}

/* 약관동의(h) */
.terms-wrap .all-check {
  text-align: right;
}

.terms-wrap .terms-tit {
  display: flex;
  margin-top: 1rem;
  align-items: center;
  justify-content: space-between;
}

.terms-wrap .terms-tit > strong {
  display: inline-block;
  color: #5C5C5C;
  font-size: 0.8rem;
  font-weight: 500;
  line-height: 1;
}

.terms-wrap .terms-tit .btn-round {
  height: 0.8rem;
  padding: 0 0.25rem;
  font-size: 0.6rem;
  line-height: calc(0.8rem - 2px);
}

.terms-wrap .terms-cont {
  height: 3.5rem;
  padding: 0.25rem 0.5rem;
  border: 1px solid #E1E1E1;
  color: #666;
  font-size: 0.65rem;
  overflow: hidden;
  overflow-y: scroll;
}

.terms-wrap .terms-cont::-webkit-scrollbar {
  width: 0.15rem;
}

.terms-wrap .terms-cont::-webkit-scrollbar-track {
  border-radius: 0.5rem;
  background: rgba(0, 0, 0, 0.05);
}

.terms-wrap .terms-cont::-webkit-scrollbar-thumb {
  border-radius: 0.5rem;
  background: rgba(0, 0, 0, 0.2);
}

/* width */
[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 */
.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;
}

.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 */
.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;
}

.mgr0 {
  margin-right: 0 !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;
}

.mgb40 {
  margin-bottom: 2rem !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;
}

/* width, height px */
.h320 {
  height: 16rem !important;
}

/* line */

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

.line2 {
  display: block;
  margin: 1.3rem 0;
  border-top: 2px dashed #ccc;
}

.line3 {
  display: block;
  margin: 1rem 0 1.3rem;
  border-top: 1px solid #E1E1E1;
}

.line4 {
  position: relative;
  display: block;
  margin: 1.3rem 0;
  border-top: 1px dashed #ccc;
  overflow: visible;
}

.line4:before {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1.6rem;
  height: 1.6rem;
  border: 1px solid #ccc;
  border-radius: 50%;
  background: #fff;
  color: #D9D9D9;
  font-family: "Line Awesome Free";
  font-size: 1.5rem;
  font-weight: 700;
  line-height: calc(1.6rem - 2px);
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  z-index: 1;
  content: "\f04c";
}

.line5 {
  position: relative;
  display: block;
  margin: 1rem 0;
  border-top: 1px solid #707785;
  overflow: visible;
}

.line6 {
  position: relative;
}

.line6:before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  width: 1px;
  height: calc(100% - 1.5rem);
  background: #ccc;
  vertical-align: center;
}

.line7 {
  display: block;
  border-top: 1px solid #D0D5E5;
  margin: 1rem 0;
}

/* .lnk-lst {
  display: table;
  margin: 0 -0.25rem;
} */
.lnk-lst {
  display: flex;
  gap: 0.5rem;
}

.lnk-lst > li {
  flex: 1;
}

/* .lnk-lst > li {
  display: table-cell;
  width: 1%;
  padding: 0 0.25rem;
} */

.lnk-lst > li > a {
  position: relative;
  display: flex;
  height: 5rem;
  margin: 2px;
  border: 1px solid #E1E1E1;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  /*transition: background-color 0.3s;*/
  /*-webkit-transition: background-color 0.3s;*/
  /*-moz-transition: background-color 0.3s;*/
}

.lnk-lst > li > a > strong {
  display: block;
  color: #262626;
  font-size: 1.1rem;
  font-weight: 700;
}

.lnk-lst > li > a > span {
  display: block;
  color: #5C5C5C;
  font-size: 0.9rem;
}

.lnk-lst > li > a [class^=checkbox-radio-type01] {
  position: absolute;
  top: 50%;
  left: 1.5rem;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
}

.lnk-lst > li > a.active {
  margin: 0;
  border: 3px solid transparent;
  background-image: linear-gradient(#fff, #fff), linear-gradient(114deg, #7BC6AB 0%, #64A0D3 83%);
  background-origin: border-box;
  background-clip: padding-box, border-box;
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2);
}

.graph-list-type1 {
  display: flex;
  gap: 2rem;
}

.graph-list-type1 > li {
  position: relative;
  gap: 1rem;
}

.graph-list-type1 > li .titT3 > span {
  margin-left: 0.25rem;
  color: #777;
  font-size: 0.65rem;
  letter-spacing: -0.05rem;
}

.graph-list-type1 > li > span {
  display: block;
  color: #777;
  font-size: 0.7rem;
  letter-spacing: -0.05rem;
}

.graph-list-type1 > li.graph-list-gauge {
  width: 20%;
}

.graph-list-type1 > li.graph-list-gauge .txt {
  float: left;
  width: 54%;
  padding-right: 0.5rem;
}

.graph-list-type1 > li.graph-list-gauge .graph-count-vertical {
  float: left;
  width: 46%;
  height: 3.5rem;
  transform: translateY(0.6rem);
  -webkit-transform: translateY(0.6rem);
  -moz-transform: translateY(0.6rem);
}

.graph-list-type1 > li.graph-list-gauge strong {
  display: inline-block;
  color: #64A0D3;
  font-weight: 800;
  font-size: 3.2rem;
  background: linear-gradient(90deg, #7BC6AB 0%, #64A0D3 100%);
  -webkit-background-clip: text;
  line-height: 1;
  -webkit-text-fill-color: transparent;
}

.graph-list-type1 > li.graph-list-gauge .txt > em {
  display: inline-block;
  margin-left: 0.25rem;
  color: #A2A2A2;
  font-size: 1.2rem;
  font-weight: 500;
}

.graph-list-type1 > li:not(.graph-list-gauge) {
  flex: 2;
}

.graph-list-type1 > li:not(.graph-list-gauge) + li:before {
  position: absolute;
  top: 50%;
  left: -1rem;
  width: 0.25rem;
  height: 1rem;
  background: #D9D9D9;
  border-radius: 0.5rem;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  content: "";
}

.graph-list-type1 > li:not(.graph-list-gauge) > strong {
  display: inline-block;
  color: #838383;
  font-weight: 700;
  font-size: 1.75rem;
}

.graph-list-type1 > li:not(.graph-list-gauge) > em {
  display: inline-block;
  margin-left: 0.25rem;
  color: #A2A2A2;
  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: -0.1rem;
}

.graph-list-type1 > li:nth-of-type(2) {
  flex: 2;
}

.graph-list-type1 + .btns {
  position: absolute;
  bottom: 1rem;
  right: 1rem;
  margin: 0;
}

.graph-list-type2 {
  display: flex;
  gap: 2rem;
}

.graph-list-type2 > li {
  position: relative;
  flex: 1;
}

.graph-list-type2 > li .graph {
  overflow: hidden;
}

.graph-list-type2 > li .graph .txt {
  float: left;
  width: 30%;
  padding-right: 0.5rem;
}

.graph-list-type2 > li .graph .graph-count-vertical {
  float: left;
  width: 70%;
  height: 3.75rem;
}

.graph-list-type2 > li .graph strong {
  display: inline-block;
  color: #64A0D3;
  font-weight: 800;
  font-size: 2.4rem;
  background: linear-gradient(90deg, #7BC6AB 0%, #64A0D3 100%);
  -webkit-background-clip: text;
  line-height: 1;
  -webkit-text-fill-color: transparent;
}

.graph-list-type2 > li .graph .txt > em {
  display: inline-block;
  margin-left: 0.25rem;
  color: #A2A2A2;
  font-size: 1.1rem;
  font-weight: 500;
}

.graph-list-type2 > li:nth-of-type(2) {
  flex: 2;
}

.graph-list-type2 > li:nth-of-type(2) > ul {
  display: flex;
  height: 3.75rem;
  border: 1px solid #E1E1E1;
  align-items: center;
}

.graph-list-type2 > li:nth-of-type(2) > ul > li {
  position: relative;
  display: flex;
  padding: 0 1rem;
  flex: 1;
  justify-content: space-evenly;
}

.graph-list-type2 > li:nth-of-type(2) > ul > li + li:before {
  position: absolute;
  top: 50%;
  left: 0;
  width: 0.25rem;
  height: 1rem;
  border-radius: 0.5rem;
  background: #D9D9D9;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  content: "";
}

.graph-list-type2 > li:nth-of-type(2) > ul > li > span {
  display: block;
}

.graph-list-type2 > li:nth-of-type(2) > ul > li > span .titT3 {
  margin-bottom: 0;
  line-height: 1;
}

.graph-list-type2 > li:nth-of-type(2) > ul > li > span > strong {
  display: inline-block;
  color: #3BBBCA;
  font-weight: 600;
  font-size: 1.8rem;
  line-height: 1;
}

.graph-list-type2 > li:nth-of-type(2) > ul > li > span > em {
  display: inline-block;
  margin-left: 0.25rem;
  color: #84878D;
  font-size: 0.7rem;
  font-weight: 500;
  line-height: 1;
}

.graph-list-type3 .electric-charges-num {
  overflow: hidden;
}

.graph-list-type3 .electric-charges-num li {
  float: left;
  width: 50%;
}

.graph-list-type3 .electric-charges-num li span {
  color: #222;
  font-size: 2rem;
  font-weight: 700;
  line-height: 1;
}

.graph-list-type3 .electric-charges-num li span > strong:after {
  display: inline-block;
  font-size: 1rem;
  content: "%";
}

.graph-list-type3 .electric-charges-num li span.up {
  color: #fe3c4e;
}

.graph-list-type3 .electric-charges-num li span.up:before {
  display: inline-block;
  content: "+";
}

.graph-list-type3 .electric-charges-num li span.up:after {
  display: inline-block;
  margin-left: 0.25rem;
  font-size: 2rem;
  font-family: "xeicon";
  content: "\e92f";
}

.graph-list-type3 .electric-charges-num li span.down {
  color: #309bfa;
}

.graph-list-type3 .electric-charges-num li span.down:before {
  display: inline-block;
  content: "-";
}

.graph-list-type3 .electric-charges-num li span.down:after {
  display: inline-block;
  margin-left: 0.25rem;
  font-size: 2rem;
  font-family: "xeicon";
  content: "\e935";
}

.graph-list-type3 .electric-charges-num li > em {
  display: block;
  margin-top: 0.15rem;
  color: #777;
  font-size: 0.7rem;
}

.graph-list-type3 .comparative-graph {
  margin: 0 -1rem;
  overflow: hidden;
}

.graph-list-type3 .comparative-graph > li {
  float: left;
  width: 50%;
  padding: 1rem;
}

.graph-list-type3 .comparative-graph > li .num {
  display: block;
}

.graph-list-type3 .comparative-graph > li .num > strong {
  display: inline-block;
  margin-right: 0.25rem;
  color: #111;
  font-size: 1.1rem;
  font-weight: 700;
}

.graph-list-type3 .comparative-graph > li .num > em {
  display: inline-block;
  margin-left: 0.5rem;
  margin-top: 0.15rem;
  color: #777;
  font-size: 0.7rem;
}

.graph-list-type3 .comparative-graph > li .date {
  display: block;
  margin-top: 0.15rem;
  color: #111;
  font-size: 0.7rem;
}

.graph-list-type3 .graph-count-vertical > em.ct1 {
  background: #7fb5ff;
}

.graph-list-type3 .graph-count-vertical > em.ct2 {
  background: #d0f0a7;
}

.graph-list-type3 .graph-count-vertical > em.ct3 {
  background: #2233b5;
}

.graph-list-type3 .graph-count-vertical > em.ct4 {
  background: #85da85;
}

/* 세로형 바 그래프 */
.graph-count-vertical {
  position: relative;
  width: 100%;
  height: 3.5rem;
  background: #E7E7E7;
}

.graph-count-vertical > em {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background: linear-gradient(90deg, #64a0d3, #7bc6ab, #49c699, #64a0d3);
  background-size: 400% 400%;
  animation: gradient1 5s ease infinite;
}

.graph-list-type4 {
  display: flex;
  gap: 0 1rem;
}

.graph-list-type4 .srh-filter2 {
  width: 18.5rem;
  height: 7rem;
}

.graph-list-type4 .txt-wrap {
  width: calc(100% - 18.5rem);
}

.graph-list-type4 .txt-wrap .txt {
  display: inline-block;
  color: #444;
  font-size: 0.9rem;
  font-size: 0.9rem;
  vertical-align: top;
}

.graph-list-type4 .txt-wrap .txt > strong {
  display: block;
  font-size: 1.3rem;
  font-weight: 700;
}

.graph-list-type4 .txt-wrap .txt > em {
  display: block;
  margin-top: 0.25rem;
  padding: 0.25rem 0.75rem;
  border-radius: 1rem;
  background: #F4F4F4;
  color: #777;
  font-size: 0.75rem;
}

.graph-list-type4 .txt-wrap .txt > span {
  display: block;
  margin-top: 0.5rem;
  color: #777;
  font-size: 0.7rem;
}

.graph-list-type4 .txt-wrap > img {
  display: inline-block;
  vertical-align: bottom;
  margin: 0 1rem;
}

.graph-list-type4 .txt-wrap .rate {
  display: inline-block;
  vertical-align: top;
  text-align: center;
}

.graph-list-type4 .txt-wrap .rate > strong {
  color: #333;
  font-size: 1rem;
  font-weight: 600;
}

.graph-list-type4 .txt-wrap .rate > span {
  display: flex;
  width: 12rem;
  height: 4.25rem;
  margin-top: 0.75rem;
  border-radius: 0.5rem;
  background: #F8F8F8;
  color: #777;
  font-size: 0.9rem;
  font-weight: 600;
  align-items: center;
  justify-content: center;
}

.graph-list-type4 .txt-wrap .rate > span > em {
  background: linear-gradient(90deg, #7BC6AB 0%, #64A0D3 83.51%);
  color: #64A0D3;
  font-weight: 800;
  font-size: 1.75rem;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* 세로형 바 그래프 (hj) 240717 */
/*  on-off 등 여러 상태 (hj) 240718 */
.statusFlex {
  display: flex;
  justify-content: right;
  gap: 0.5rem;
}

.statusFlex2 {
  display: flex;
  justify-content: space-between;
}

.status-con {
  display: inline-flex;
  gap: 0.5rem;
  padding: 0.2rem 0.3rem;
  margin-bottom: 0.5rem;
  justify-content: right;
}

.status-con.type2 {
  background: #F1F2F7;
  padding: 0.2rem 0.7rem;
  border-radius: 2.5rem;
}

/* 게시판 상세 */
.posting-status {
  display: flex;
  margin: 0.5rem 0;
}

.posting-status > li {
  padding: 0 0.75rem;
  color: #555;
  position: relative;
}

.posting-status > li .bold {
  font-weight: 600;
  margin-left: 0.15rem;
}

.posting-status > li:nth-child(1) {
  padding-left: 0;
}

.posting-status > li:last-child:after {
  display: none;
}

.posting-status > li:after {
  content: "";
  width: 1px;
  height: 0.7rem;
  background: #ccc;
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
}

/* on / off 상태 */
.s-on:before {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: #43C5DB;
  display: inline-block;
  margin-right: 0.3rem;
}

.s-off { /*240813 ej 수정*/
}

.s-off:before {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: url("../img/sub/bg_pattern1.png") #555;
  display: inline-block;
  margin-right: 0.3rem;
}

/* 방전/ 충전/ 미작동 상태 */
.discharge:before {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: url("../img/sub/bg_pattern2.png") #555;
  display: inline-block;
  margin-right: 0.3rem;
}

.charge:before {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: url("../img/sub/bg_pattern3.png") #F00;
  display: inline-block;
  margin-right: 0.3rem;
}

.not-work:before {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: #fff;
  border: 1px solid #ccc;
  display: inline-block;
  margin-right: 0.3rem;
}

/* pagination */
.tui-pagination .tui-ico-next {
  background: url(/portal/assets/img/sub/next-icon.png) no-repeat center/100% !important;
  opacity: 1 !important;
  width: 10px !important;
  height: 10px !important;
}

.tui-pagination .tui-ico-last {
  background: url(/portal/assets/img/sub/last-icon.png) no-repeat center/100% !important;
  opacity: 1 !important;
  width: 10px !important;
  height: 10px !important;
}

.tui-pagination .tui-ico-prev {
  background: url(/portal/assets/img/sub/prev-icon.png) no-repeat center/100% !important;
  opacity: 1 !important;
  width: 10px !important;
  height: 10px !important;
}

.tui-pagination .tui-ico-first {
  background: url(/portal/assets/img/sub/first-icon.png) no-repeat center/100% !important;
  opacity: 1 !important;
  width: 10px !important;
  height: 10px !important;
}

/* n-list-flex 추가(hj) 240731 */
.n-list-flex > div {
  display: flex;
  gap: 0.3rem;
}

/* 화면 구간이 나누어질 때 오른쪽에 들어가는 라인 */
div.r-line {
  padding-right: 1rem;
  margin-right: 1rem;
}

div.r-line:after {
  content: "";
  width: 1px;
  height: 100%;
  background: #ccc;
  position: absolute;
  top: 0;
  right: 0;
}

.task-tooltip-con {
  position: relative;
  display: inline-block;
}

.task-tooltip-con .task-tooltip {
  border: 2px solid #7BC6AD;
  border-radius: 0.25rem;
  height: auto;
  letter-spacing: -0.25px;
  background-color: #fff;
  padding: 0.35rem 0.65rem;
  width: fit-content;
  z-index: 100;
  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
  transition: all 0.5s;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  opacity: 0;
  visibility: hidden;
}

.task-tooltip-con[data-visible="true"] .task-tooltip {
  opacity: 1; /* 보이도록 변경 */
  visibility: visible;
}

.task-tooltip-con .task-tooltip > strong {
  display: flex;
  justify-content: space-between;
  align-items: center;
  white-space: nowrap;
}

.task-tooltip-con .task-tooltip > strong > span {
  color: #444;
  font-weight: 700;
}

.task-tooltip-con .task-tooltip > strong > em {
  color: #43C5DB;
  margin-left: 1rem;
}

.task-tooltip-con .task-tooltip > span {
  white-space: nowrap;
  color: #444;
  display: flex;
  gap: 0.3rem;
  font-size: 0.75rem;
  margin-top: 0.25rem;
}

.task-tooltip-con .task-tooltip > span > strong {
  font-weight: 700;
}

.task-tooltip-con .task-tooltip > span > strong > em {
  font-weight: 400;
}

.task-tooltip-con > a {
  position: absolute;
  bottom: -1.75rem;
  left: 50%;
  width: 1.35rem;
  height: 1.15rem;
  background: url(/portal/assets/img/sub/map_point_detail_box_arr.png) no-repeat center/contain;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  animation-delay: 0s;
  animation-duration: 3s;
  animation-name: rotateCenterY;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

.task-tooltip-con:hover {
  z-index: 1;
}

.task-tooltip-con:hover > .task-tooltip {
  opacity: 1;
  visibility: visible;
}

.task-tooltip-con:before {
  pointer-events: auto;
}

@keyframes gradient1 {
  0%, 100% {
    background-position: 0% 50%;
    opacity: 0.85;
  }
  50% {
    background-position: 100% 50%;
    opacity: 1;
  }
}

@keyframes gradient2 {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: -200% 0;
  }
}


/* ----------- .sub-wrap  E-cloud 내 새로운 스타일 ----------- */
/* inner-flex 컨텐츠 gap */
.sub-inner-flex1 {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* 중앙배치 */
.f-c-c {
  display: flex;
  align-items: center;
  justify-content: center;
}

.n-box {
  border-radius: 0.5rem;
  border: 1px solid #ccc;
  background: #fff;
  padding: 1.5rem 1rem;
  position: relative;
  z-index: 0;
}

.n-box .border {
  position: absolute;
  width: 100%;
  top: 0;
  left: 0;
  height: 25%;
  border-radius: 0.46rem 0.46rem 0 0;
  background: linear-gradient(90deg, #00B073 0%, #0C75CA 100%);
  z-index: -3;
}

.n-box .border:before {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  right: 3px;
  width: calc(100% - 6px);
  height: 100%;
  border-radius: 0.35rem 0.35rem 0 0;
  background: #fff;
}

.txt-break {
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.txt-break > p {
  color: #333;
}

.txt-break > p > strong {
  color: #107F93;
  font-weight: 700;
  font-size: 1rem;
}

.txt-break.type2 {
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.txt-break > p {
  color: #333;
  font-size: 1.1rem;
  font-weight: 600;
}

.txt-break > p > strong {
  color: #107F93;
  font-weight: 700;
  font-size: 1.3rem;
}



.txt-break2 {
  text-align: left;
  color: #555;
}

.txt-break3 {
  text-align: center;
}

.txt-break3 > strong {
  font-size: 1rem;
  font-weight: 500;
  display: block;
  margin-bottom: 0.5rem;
}

/* .txt-break4 > p{color:#333;}
.txt-break4 > p > strong{color:#107F93;font-weight:700;font-size:1rem;}
 */


.tit-sub-badge {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.tit-sub-badge .tit {
  color: #262626;
  font-size: 1.1rem;
  font-weight: 600;
}

.tit-sub-badge > span {
  color: #444;
  font-size: 1rem;
  font-weight: 500;
}

.tit-sub-badge > em {
  border: 1px solid #D0D5E5;
  background: #E7EAF2;
  border-radius: 1.85rem;
  padding: 0.1rem 0.6rem;
}

.sub-box-wrap {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

.sub-box-wrap .sub-box {
  border: 1px solid #ccc;
  padding: 1rem;
  border-radius: 0.5rem;
  flex: 1;
}

.sub-box-wrap .sub-box .sub-b-tit {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.5rem;
}

.sub-box-wrap .sub-box .sub-b-tit .tit-l {
  color: #444;
  font-weight: 500;
}

.sub-box-wrap .sub-box .sub-b-tit .tit-l > em {
  width: 1.2rem;
  height: 1.2rem;
  display: inline-block;
  background: linear-gradient(90deg, #00B073 0%, #0C75CA 100%);
  border-radius: 50%;
  text-align: center;
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  line-height: 1.2rem;
  margin-right: 0.25rem;
}

.sub-box-wrap .sub-box .sub-b-tit .tit-r {
  color: #555;
}

.sub-box-wrap .sub-box .sub-b-tit .tit-r > strong {
  color: #107F93;
  font-size: 1rem;
  font-weight: 700;
}

.sub-box-wrap .sub-box > ul {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.sub-box-wrap .sub-box > ul > li {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.sub-box-wrap .sub-box > ul > li .txt-l {
  color: #333;
}

.sub-box-wrap .sub-box > ul > li .txt-r {
  color: #555;
}

.sub-box-wrap .sub-box > ul > li .txt-r > strong {
  color: #333;
  font-weight: 700;
  margin-right: 0.25rem;
}

.sub-box2 {
  border: 1px solid #ccc;
  padding: 1rem;
  border-radius: 0.5rem;
}

.sub-box3 {
  padding: 1rem;
  background: #FAFAFA;
}

.grid-item {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: 2rem;
  row-gap: 0.8rem;
}

.arc-range-slider-wrap {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.arc-range-slider-wrap .m-btn {
  width: 2rem;
  height: 2rem;
  text-align: center;
  line-height: 2rem;
  background: #EAEAEA;
  border-radius: 0.25rem;
}

.arc-range-slider-wrap .p-btn {
  width: 2rem;
  height: 2rem;
  text-align: center;
  line-height: 2rem;
  background: #EAEAEA;
  border-radius: 0.25rem;
}

.arc-range-slider-wrap input[type=range].arc-range-slider {
  -webkit-appearance: none;
  width: 100%;
  height: 0.45rem;
  border-radius: 2.5rem;
  accent-color: #44C5DB;
}

.arc-range-slider-wrap:hover input[type=range].arc-range-slider::-webkit-slider-thumb,
.arc-range-slider-wrap:focus input[type=range].arc-range-slider::-webkit-slider-thumb {
  scale: 1;
}

.arc-range-slider-wrap input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  scale: 0;
  width: 0.85rem;
  height: 0.85rem;
  border-radius: 50%;
  background: #44C5DB;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
}

.p-m-gaugeWrap .tit-input {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}

.p-m-gaugeWrap .p-m-gauge {
  display: flex;
  gap: 1rem;
  align-items: center;
}

.p-m-gaugeWrap .p-m-gauge .m-btn {
  width: 2rem;
  height: 2rem;
  text-align: center;
  line-height: 2rem;
  background: #EAEAEA;
  border-radius: 0.25rem;
}

.p-m-gaugeWrap .p-m-gauge .p-btn {
  width: 2rem;
  height: 2rem;
  text-align: center;
  line-height: 2rem;
  background: #EAEAEA;
  border-radius: 0.25rem;
}

.p-m-gaugeWrap .p-m-gauge .p-m-count {
  width: 100%;
  position: relative;
  background: #EAEAEA;
  padding: 0.2rem;
  border-radius: 2.5rem;
  height: 0.45rem;
}

.p-m-gaugeWrap .p-m-gauge .p-m-count > em {
  position: absolute;
  top: 0;
  left: 0;
  background: #44C5DB;
  border-radius: 25rem;
  height: 100%;
  cursor: pointer;
  animation: gradient1 5s ease infinite;
}

.p-m-gaugeWrap .p-m-gauge .p-m-count > em .circle {
  position: absolute;
  display: inline-block;
  width: 0.85rem;
  height: 0.85rem;
  border-radius: 50%;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  background: #44C5DB;
  cursor: pointer;
}

.current-row-graph-wrap {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.current-row-graph-wrap .current-row-graph .tit {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.5rem;
}

.current-row-graph-wrap .current-row-graph .tit > span {
  color: #444;
  font-weight: 500;
}

.current-row-graph-wrap .current-row-graph .tit > strong {
  color: #444;
  font-size: 0.7rem;
}

.current-row-graph-wrap .current-row-graph .tit > strong > em {
  font-size: 0.8rem;
  font-weight: 700;
  margin-right: 0.25rem;
}

.current-row-graph-wrap .current-row-graph .row-graph {
  width: 100%;
  height: 0.5rem;
}

.current-row-graph-wrap .current-row-graph .row-graph > div {
  width: 100%;
  height: 100%;
  border-radius: 2.5rem;
  background: rgba(238, 238, 238, 0.97);
  display: flex;
  position: relative;
}

.current-row-graph-wrap .current-row-graph .row-graph > div > em {
  display: inline-block;
  height: 100%;
  border-radius: 2.5rem;
  position: relative;
}

.current-row-graph-wrap .current-row-graph .row-graph > div > em.c-color1 {
  background: #545CC1;
}

.current-row-graph-wrap .current-row-graph .row-graph > div > em.c-color2 {
  background: #4C96F9;
}

.current-row-graph-wrap .current-row-graph .row-graph > div > em.c-color3-1 {
  background: #44C5DB;
  border-radius: 2.5rem 0 0 2.5rem;
}

.current-row-graph-wrap .current-row-graph .row-graph > div > em.c-color3-2 {
  background: #9F92FF;
  border-radius: 0;
}

.current-row-graph-wrap .current-row-graph .row-graph > div > em.c-color3-3 {
  background: #FFBB24;
  border-radius: 0 2.5rem 2.5rem 0;
}

.current-row-graph-wrap .current-row-graph .row-graph > div > em.c-color4 {
  background: linear-gradient(270deg, #7EC7AF 0%, #68A4D4 100%);
}

.current-row-graph-wrap .current-row-graph .row-graph > div > em .row-badge {
  position: absolute;
  top: -50%;
  left: 50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  width: fit-content;
  border-radius: 2.5rem;
  text-align: center;
  color: #fff;
  background: rgba(0, 0, 0, 0.5);
  font-size: 0.7rem;
  white-space: nowrap;
  padding: 0 0.3rem;
}

.regist-form {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.regist-form .regi-item1 {
  border-radius: 0.5rem;
  background: #F9F9F9;
  padding: 1rem 3rem;
}

.regist-form .regi-item1 > p {
  text-align: center;
  margin-bottom: 0.5rem;
}

.regist-form .regi-item2 {
  flex: 1;
}

.regist-form .regi-item2 > ul > li {
  margin-top: 1rem;
}

.regist-form .regi-item2 > ul > li > div {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.regist-form .regi-item2 > ul > li > div .t-btn {
  color: #3BBBCA;
}

.regist-form .regi-item2 > ul > li > ul > li {
  margin-top: 0.5rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-left: 1.5rem;
}

.regist-form .regi-item2 > ul > li > ul > li > span {
  transform: rotate(270deg);
  -webkit-transform: rotate(270deg);
  -moz-transform: rotate(270deg);
}

.check-wrap > span > label {
  color: #777;
  font-size: 0.75rem;
}

.txt-item-wrap {
  text-align: left;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.txt-item-wrap .txt-item {
  padding: 0 0.75rem;
  border: 1px solid #ccc;
  border-radius: 0.25rem;
  height: 1.3rem;
  line-height: 1.3rem;
}
.txt-item-wrap .txt-item.on {
  background: linear-gradient(90deg, #00B073 0%, #0C75CA 100%);
  border-radius: 0.25rem;
  color: #fff;
  border: none;
}
.txt-item-wrap .input-wrap > input {
  height: 1.3rem;
}
.txt-item-wrap .btn-style2 {
  height: 1.5rem;
  line-height: 1.5rem;
}

.selected-box {
  padding: 0.3rem 0.5rem;
  border-bottom: 1px solid #ccc;
  background: #F5F5F5;
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

.selected-box .item-wrap {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

.selected-box .item-wrap .item {
  display: flex;
  align-items: center;
}

.selected-box .item-wrap .item > a {
  width: 1rem;
  height: 1rem;
  border: 1px solid #ccc;
  background: #fff;
  border-radius: 50%;
  text-align: center;
  line-height: 1.1rem;
  transition: 0.3s;
  margin-left: 0.25rem;
}

.selected-box .item-wrap .item > a:hover {
  background: #ccc;
}

.img-txt {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 2.35rem;
}

.img-txt .img {
  display: inline-block;
  width: 5rem;
  height: 3.3rem;
  background: url(/portal/assets/img/sub/img-txt.png) no-repeat center/100%;
}

.img-txt .txt {
  color: #444;
  font-weight: 600;
}

.img-txt .txt > strong {
  font-size: 2rem;
  font-weight: 800;
  background: linear-gradient(90deg, #00B073 0%, #0C75CA 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* .inverter-box {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

.inverter-box .box {
  padding: 1rem;
  background: #F3F5FA;
  border: 1px solid #D0D5E5;
  border-radius: 0.5rem;
  flex: 1;
  max-width: 17.8rem;
}

.inverter-box .box .tit {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.5rem;
}

.inverter-box .box .tit > span {
  color: #262626;
  font-weight: 600;
  font-size: 1rem;
}

.inverter-box .box .tit > em {
  color: #fff;
  font-size: 0.7rem;
  font-weight: 500;
  border-radius: 2.5rem;
  padding: 0.1rem 0.6rem;
}

.inverter-box .box .tit > em.st1 {
  background: #43C5DB;
}

.inverter-box .box .tit > em.st2 {
  background: #FFBB24;
}

.inverter-box .box .tit > em.st3 {
  background: #FD6868;
}

.inverter-box .box .inner {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.inverter-box .box .inner > div {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  align-items: center;
}

.inverter-box .box .inner > div .img {
  display: inline-block;
  width: 3rem;
  height: 2.5rem;
  background: url(/portal/assets/img/sub/inverter-img1.png) no-repeat bottom/100%;
  position: relative;
}

.inverter-box .box .inner > div .img:before {
  content: "";
  width: 2.8rem;
  height: 3px;
  background: #D9D9D9;
  position: absolute;
  top: 50%;
  right: -100%;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
}

.inverter-box .box .inner > div .img:after {
  content: "";
  width: 2.8rem;
  height: 1px;
  background: linear-gradient(270deg, #FF8400 0%, rgba(255, 190, 13, 0) 100%);
  position: absolute;
  top: 50%;
  right: -100%;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  background-size: 200% 100%;
  animation: flow 2s linear infinite;
}

@keyframes flow {
  from {
    background-position: 200% 0;
  }
  to {
    background-position: 0 0;
  }
}

.inverter-box .box .inner > div .img2 {
  display: inline-block;
  width: 3rem;
  height: 2.5rem;
  background: url(/portal/assets/img/sub/inverter-img2.png) no-repeat bottom/65%;
}

.inverter-box .box .inner > div .txt {
  text-align: center;
  color: #fff;
  font-size: 0.7rem;
  border-radius: 0.5rem;
  background: #373C51;
  padding: 0.2rem;
  width: 6rem;
}

.inverter-box .box .inner > span {
  color: #444;
  font-weight: 600;
}

.inverter-box .box .inner > span > strong {
  color: #3BBBCA;
  font-size: 1.3rem;
  font-weight: 600;
} */

.inverter-box {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}
.inverter-box .box {
  padding: 1rem;
  background: #F3F5FA;
  border: 1px solid #D0D5E5;
  border-radius: 0.5rem;
  flex: 1;
  max-width: 16.8rem;
}
.inverter-box .box .tit {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.5rem;
}
.inverter-box .box .tit > span {
  color: #262626;
  font-weight: 600;
  font-size: 1rem;
}
.inverter-box .box .tit > em {
  color: #fff;
  font-size: 0.7rem;
  font-weight: 500;
  border-radius: 2.5rem;
  padding: 0.1rem 0.6rem;
}
.inverter-box .box .tit > em.st1 {
  background: #43C5DB;
}
.inverter-box .box .tit > em.st2 {
  background: #FFBB24;
}
.inverter-box .box .tit > em.st3 {
  background: #FD6868;
}
.inverter-box .box .inner {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.inverter-box .box .inner > div {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.inverter-box .box .inner > div .img {
  display: inline-block;
  width: 3rem;
  height: 2.5rem;
  background: url(/portal/assets/img/sub/inverter-img1.png) no-repeat bottom/100%;
  position: relative;
}
.inverter-box .box .inner > div .img:before {
  content: "";
  width: 2.3rem;
  height: 3px;
  background: #D9D9D9;
  position: absolute;
  top: 50%;
  right: -80%;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
}
.inverter-box .box .inner > div .img:after {
  content: "";
  width: 2.3rem;
  height: 1px;
  background: linear-gradient(270deg, #FF8400 0%, rgba(255, 190, 13, 0) 100%);
  position: absolute;
  top: 50%;
  right: -80%;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  background-size: 200% 100%;
  animation: flow 2s linear infinite;
}
@keyframes flow {
  from {
    background-position: 200% 0;
  }
  to {
    background-position: 0 0;
  }
}
.inverter-box .box .inner > div .img2 {
  display: inline-block;
  width: 3rem;
  height: 2.5rem;
  background: url(/portal/assets/img/sub/inverter-img2.png) no-repeat bottom/65%;
}
.inverter-box .box .inner > div .txt {
  text-align: center;
  color: #262626;
  font-size: 1rem;
  border-radius: 0.5rem;
  background: transparent;
  width: 5rem;
  font-weight: 600;
}
.inverter-box .box .inner > p {
  padding: 0.3rem 1rem;
  background: #373C51;
  color: #fff;
  border-radius: 0.7rem;
  font-weight: 800;
  width: 100%;
  text-align: center;
}
.inverter-box .box .inner > p > strong {
  font-size: 1.8rem;
  font-weight: 700;
  background: linear-gradient(90deg, #91E7D1 0%, #7CBFEE 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.board > li {
  display: flex;
  justify-content: space-between;
  padding: 0.5rem 0;
  border-bottom: 1px dashed #ccc;
}

.board > li > strong {
  color: #333;
  font-size: 0.9rem;
  font-weight: 600;
}

.board > li:last-child {
  border-bottom: none;
}

.status-box {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  width: 100%;
}

.status-box .box {
  padding: 1rem;
  background: #F3F5FA;
  border: 1px solid #D0D5E5;
  border-radius: 0.5rem;
  flex: 1;
  min-width: 16.75rem;
}

.status-box .box .tit {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.5rem;
}

.status-box .box .tit > span {
  color: #262626;
  font-weight: 600;
  font-size: 1rem;
}

.status-box .box .tit > em {
  color: #fff;
  font-size: 0.7rem;
  font-weight: 500;
  border-radius: 2.5rem;
  padding: 0.1rem 0.6rem;
}

.status-box .box .tit > em.st1 {
  background: #43C5DB;
}

.status-box .box .tit > em.st2 {
  background: #FFBB24;
}

.status-box .box .tit > em.st3 {
  background: #FD6868;
}

.status-box .box > ul > li {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.status-box .box > ul > li > strong {
  color: #666;
  font-size: 0.75rem;
  font-weight: 500;
}

.status-box .box > ul > li > span {
  color: #393939;
  font-size: 0.8rem;
  font-weight: 600;
}

.new-srh-filter1 {
  padding: 0.4rem 0.8rem;
  background: #F6F6F6;
  margin-bottom: 1rem;
}

.new-srh-filter1 > ul {
  display: flex;
  align-items: center;
}

.new-srh-filter1 > ul > li .tit {
  color: #84878D;
  font-size: 0.7rem;
  margin: 0 0.8rem;
}

.new-srh-filter1 > ul.flex-sb {
  display: flex;
  justify-content: space-between;
}

.regist-form {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.regist-form .regi-item1 {
  border-radius: 0.5rem;
  background: #F9F9F9;
  padding: 1rem 3rem;
}

.regist-form .regi-item1 > p {
  text-align: center;
  margin-bottom: 0.5rem;
}

.regist-form .regi-item2 {
  flex: 1;
}

.regist-form .regi-item2 > ul > li {
  margin-top: 1rem;
}

.regist-form .regi-item2 > ul > li > div {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.regist-form .regi-item2 > ul > li > div .t-btn {
  color: #3BBBCA;
}

.regist-form .regi-item2 > ul > li > ul > li {
  margin-top: 0.5rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-left: 1.5rem;
}

.regist-form .regi-item2 > ul > li > ul > li > span {
  transform: rotate(270deg);
  -webkit-transform: rotate(270deg);
  -moz-transform: rotate(270deg);
}

.check-wrap > span > label {
  color: #777;
  font-size: 0.75rem;
}


/* .selected-box {
  padding: 0.3rem 0.5rem;
  border-bottom: 1px solid #ccc;
  background: #F5F5F5;
  display: flex;
  gap: 1rem;
}

.selected-box .item-wrap {
  display: flex;
  gap: 1rem;
}

.selected-box .item-wrap .item {
  display: flex;
  align-items: center;
}

.selected-box .item-wrap .item > a {
  width: 1rem;
  height: 1rem;
  border: 1px solid #ccc;
  background: #fff;
  border-radius: 50%;
  text-align: center;
  line-height: 1.1rem;
  transition: 0.3s;
  margin-left: 0.25rem;
}

.selected-box .item-wrap .item > a:hover {
  background: #ccc;
} */

.posting-status2 {
  display: flex;
  margin: 0.5rem 0;
}

.posting-status2 > li {
  padding: 0 0.75rem;
  color: #555;
  position: relative;
}

.posting-status2 > li:nth-child(1) {
  padding-left: 0;
}

.posting-status2 > li:last-child:after {
  display: none;
}

.posting-status2 > li:after {
  content: "";
  width: 1px;
  height: 0.7rem;
  background: #ccc;
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
}

.tb-box .tit {
  color: #262626;
  font-size: 1rem;
  font-weight: 600;
  text-align: center;
  margin-bottom: 0.5rem;
}

.tb-box .tit > strong {
  color: #107F93;
  font-size: 1rem;
  font-weight: 800;
  margin-right: 0.3rem;
}

.tb-box .goal {
  border: 1px solid #AFD8D8;
  background: #F7FCFC;
  text-align: center;
  border-radius: 0.25rem;
  padding: 0.3rem 0;
  color: #444;
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.tb-box .goal > strong {
  color: #107F93;
  font-weight: 800;
}

.tb-box > ul > li {
  padding: 0.3rem 0;
  display: flex;
  align-items: center;
  gap: 1rem;
  border-bottom: 1px dashed #ccc;
}

.tb-box > ul > li > div {
  width: 78%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.tb-box > ul > li > div > span {
  color: #444;
  font-weight: 600;
}

.tb-box > ul > li > div > strong {
  color: #107F93;
  font-weight: 700;
  font-size: 0.9rem;
}

.tb-box > ul > li .badge {
  width: 3.4rem;
  height: 1.5rem;
  background: #107F93;
  border-radius: 0.25rem;
  text-align: center;
  color: #fff;
  font-size: 0.75rem;
  line-height: 1.5rem;
}

.tb-box > ul > li .badge .icon {
  background: url(/portal/assets/img/sub/tb-box-icon.png) no-repeat center/100%;
  width: 0.55rem;
  height: 0.55rem;
  display: inline-block;
  margin-left: 0.15rem;
}

.tb-box > ul > li:last-child {
  border: none;
}

.tb-box2 > ul > li {
  padding: 0.8rem 0;
}
.tb-box2 > ul > li > span {
  display: inline-block;
  width: 6rem;
  height: 1.6rem;
  border-radius: 0.25rem;
  border: 1px solid #AFD8D8;
  background: #F7FCFC;
  text-align: center;
  line-height: 1.6rem;
  color: #107F93;
  font-weight: 800;
}
.tb-box2 > ul > li.goal {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding-top: 1.5rem;
  flex-wrap: wrap;
}
.tb-box2 > ul > li.goal > div{display:flex;align-items:center;justify-content:end;gap:0.5rem;flex:1;flex-wrap:wrap;}
.tb-box2 > ul > li.goal > div > strong {
  width: 8rem;
  display: inline-block;
  text-align: right;
  color: #107F93;
  font-size: 1.2rem;
  font-weight: 700;
}
.tb-box2 > ul > li.goal > div > span {
  color: #444;
  font-size: 0.75rem;
}
.tb-box2 > ul > li.goal > div > em {
  color: #444;
  font-weight: 600;
}
.tb-box2 > ul > li.achieve {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.tb-box2 > ul > li.achieve > div > strong {
  width: 8rem;
  display: inline-block;
  text-align: right;
  color: #107F93;
  font-size: 1.2rem;
  font-weight: 700;
}
.tb-box2 > ul > li.achieve > div {display:flex;align-items:center;justify-content:end;gap:0.5rem;flex:1;flex-wrap:wrap;}
.tb-box2 > ul > li.achieve > div > span {
  color: #444;
  font-size: 0.75rem;
}
.tb-box2 > ul > li.achieve > div > em {
  color: #444;
  font-weight: 600;
}
.tb-box2 > ul > li.txt > p {
  font-size: 0.7rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #AFD8D8;
  background: #F7FCFC;
  border-radius: 0.25rem;
  height: 1.6rem;
  line-height: 1.6rem;
  color: #444;
  font-weight: 600;
}
.tb-box2 > ul > li.txt > p > strong {
  color: #107F93;
  font-weight: 800;
  margin: 0 0.1rem;
}
.tb-box2 > ul > li:first-child {
  border-bottom: 1px dashed #ccc;
}


.tb-box3 > ul > li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  flex-wrap: wrap;
  padding: 0.35rem 0;
}

.tb-box3 > ul > li > span {
  border: 1px solid #AFD8D8;
  background: #F7FCFC;
  border-radius: 0.25rem;
  text-align: center;
  width: 6rem;
  color: #107F93;
  font-weight: 800;
}

.tb-box3 > ul > li.con1 {
  border-bottom: 1px dashed #ccc;
}

.tb-box3 > ul > li.con1 > span {
  height: 5.5rem;
  line-height: 5.5rem;
}

.tb-box3 > ul > li.con1 > ul {
  width: 65%;
}

.tb-box3 > ul > li.con1 > ul > li {
  display: flex;
  align-items: center;
  gap:0.5rem;
  flex-wrap: wrap;
}

.tb-box3 > ul > li.con1 > ul > li > span {
  color: #444;
  font-size: 0.75rem;
}

.tb-box3 > ul > li.con1 > ul > li > span:nth-child(2){display:flex;align-items:center;justify-content:end;flex:1;flex-wrap:wrap;}

.tb-box3 > ul > li.con1 > ul > li > span > strong {
  font-size: 1.2rem;
  font-weight: 700;
  margin-right: 0.65rem;
}

.tb-box3 > ul > li.con2 > span {
  height: 1.6rem;
  line-height: 1.6rem;
}

.tb-box3 > ul > li.con2 > em {
  color: #444;
  font-size: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: end;
  flex: 1;
  flex-wrap: wrap;
}

.tb-box3 > ul > li.con2 > em > strong {
  font-size: 1.2rem;
  font-weight: 700;
  margin-right: 0.65rem;
}

.tb-box3 > ul > li.txt > p {
  width: 100%;
  text-align: center;
  font-size: 0.7rem;
  word-wrap: break-word;
  word-break: keep-all;
}

.tb-box4 > ul {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 1.5rem 0;
}

.tb-box4 > ul > li {
  display: flex;
  align-items: center;
  flex-wrap:wrap;
  padding: 0.7rem 0;
  border-bottom: 1px dashed #ccc;
}

.tb-box4 > ul > li > span {
  border: 1px solid #AFD8D8;
  background: #F7FCFC;
  border-radius: 0.25rem;
  width: 6rem;
  height: 1.6rem;
  color: #107F93;
  font-weight: 800;
  text-align: center;
  line-height: 1.6rem;
}
.tb-box4 > ul > li > strong{display:flex;align-items:center;justify-content:end;flex:1;}

.tb-box4 > ul > li > strong > span {
  font-size: 1.2rem;
  font-weight: 700;
  margin-right: 0.65rem;
}

.tb-box4 > ul > li:last-child {
  border: none;
}

.f1{flex:1}

.complex-graph-wrap{
  display:flex;gap:0.5rem;
}

.complex-graph{
  flex:1;min-width:19%;
}

/* rec */
.step-wrap {
  display: flex;
  gap: 2.5rem;
}

.step-wrap .step-box {
  border: 1px solid #DCDCDC;
  border-radius: 0.5rem;
  padding: 0.75rem;
  flex: 1;
  position: relative;
}

.step-wrap .step-box .inner1 {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.step-wrap .step-box .inner1 > span {
  display: inline-block;
  width: 3.9rem;
  height: 3.9rem;
  border-radius: 50%;
  background-color: #F5FBFC;
}

.step-wrap .step-box .inner1 > span.img1 {
  background-image: url(/portal/assets/img/sub/step-box-img1.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 60%;
}

.step-wrap .step-box .inner1 > span.img2 {
  background-image: url(/portal/assets/img/sub/step-box-img2.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 60%;
}

.step-wrap .step-box .inner1 > span.img3 {
  background-image: url(/portal/assets/img/sub/step-box-img3.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 60%;
}

.step-wrap .step-box .inner1 > span.img4 {
  background-image: url(/portal/assets/img/sub/step-box-img4.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 60%;
}

.step-wrap .step-box .inner1 > span.img5 {
  background-image: url(/portal/assets/img/sub/step-box-img5.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 60%;
}

.step-wrap .step-box .inner1 .txt {
  color: #262626;
  font-size: 1rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  word-wrap: break-word;
  word-break: keep-all;
}

.step-wrap .step-box .inner1 .txt > strong {
  color: #3BBBCA;
  font-size: 1.5rem;
  font-weight: 900;
  margin-right: 0.25rem;
}

.step-wrap .step-box .inner2 {
  border-radius: 0.5rem;
  background: #F5FBFC;
  padding: 0.25rem 1.3rem;
  margin-top: 0.5rem;
  display: flex;
  align-items: center;
  gap:0.5rem
}

.step-wrap .step-box .inner2 > span {
  color: #333;
  font-size: 1rem;
  font-weight: 600;
  flex-grow: 1;
  word-break: keep-all;
  word-wrap: break-word;
}

.step-wrap .step-box:after {
  content: "\e93e";
  font-family: "xeicon";
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  font-size: 0.8rem;
  color: #555;
  background: #F1F1F1;
  display: inline-block;
  text-align: center;
  line-height: 1.5rem;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  right: -2rem;
}

.step-wrap .step-box:last-child:after {
  display: none;
}

/* ppa 부하량 */
.step-wrap2 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.8rem;
}

.step-wrap2 .step-box2 {
  border: 1px solid #ccc;
  border-radius: 0.5rem;
  overflow: hidden;
  height: 100%;
}

.step-wrap2 .step-box2 .tit {
  padding: 0.6rem;
  background: linear-gradient(90deg, #00B073 0%, #0C75CA 100%);
  color: #fff;
  font-size: 1rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
}

.step-wrap2 .step-box2 .inner {
  padding: 1.5rem 1rem;
  height: calc(100% - 2.8rem);
}

.step-wrap2 .step-box2 .inner .img1 {
  background: url(/portal/assets/img/sub/step-box2-img1.png) no-repeat center;
  background-size: 100% auto;
  height: 12rem;
  margin: 2.5rem 0;
}

.step-wrap2 .step-box2 .inner .img2 {
  background: url(/portal/assets/img/sub/step-box2-img2.png) no-repeat center;
  background-size: 100% auto;
  height: 20rem;
  margin: 2.5rem 0;
}

.step-wrap2 .step-box2 .inner .link-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}

.step-wrap2 .step-box2 .inner .link-btn > span > a {
  margin-left: 0.3rem;
}

.factory-main-box {
  border: 1px solid #ADDFE8;
  background: #EFF9FB;
  border-radius: 0.75rem;
  padding: 1rem 2rem;
  height: fit-content;
}

.factory-main-box .tit {
  color: #262626;
  font-size: 1.1rem;
  font-weight: 600;
  border-bottom: 1px dashed #ccc;
  padding-bottom: 0.5rem;
}

.factory-main-box > ul > li {
  padding: 0.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.factory-main-box > ul > li > span {
  color: #333;
  font-size: 0.9rem;
  font-weight: 600;
}

.factory-main-box > ul > li > strong {
  color: #333;
  font-size: 0.8rem;
  font-weight: 400;
}

.factory-main-box > ul > li > strong > span {
  background: linear-gradient(90deg, #00B073 0%, #0C75CA 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 1rem;
  font-weight: 900;
  margin-right: 0.5rem;
}

.factory-main-box > ul > li:last-child {
  padding-bottom: 0;
}

.factory-main-box > ul.active {
  max-height: 10.7rem;
  opacity: 1;
}

.factory-box {
  border: 1px solid #ccc;
  background: #fff;
  border-radius: 0.75rem;
  padding: 1rem 2rem;
  height: fit-content;
}

.factory-box .tit-btns {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 0.5rem;
}

.factory-box .tit-btns > div {
  display: flex;
  gap: 0.3rem;
}

.factory-box .tit-btns > span {
  color: #262626;
  font-size: 1.1rem;
  font-weight: 600;
}

.factory-box .tit-btns > div [class^=btn] {
  border: 1px solid #999;
  border-radius: 50%;
  width: 2rem;
  height: 2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  color: #333;
  transition: 0.3s;
  cursor: pointer;
  transition: all 0.3s;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
}

.factory-box .tit-btns > div [class^=btn]:hover {
  background: #ccc;
}

.factory-box .tit-btns > div .btn-2.active > i {
  transform: rotate(180deg);
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
}

.factory-box > ul {
  border-top: 1px dashed #ccc;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 0.5s ease, opacity 0.5s ease;
}

.factory-box > ul > li {
  padding: 0.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.factory-box > ul > li > span {
  color: #333;
  font-size: 0.9rem;
  font-weight: 600;
}

.factory-box > ul > li > strong {
  color: #333;
  font-size: 0.8rem;
  font-weight: 400;
}

.factory-box > ul > li > strong > span {
  background: linear-gradient(90deg, #00B073 0%, #0C75CA 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 1rem;
  font-weight: 900;
  margin-right: 0.5rem;
}

.factory-box > ul > li:last-child {
  padding-bottom: 0;
}

.factory-box > ul.active {
  max-height: 10.7rem;
  opacity: 1;
}

.icon-box-wrap6 {
  display: flex;
  border: 1px solid #ccc;
}

.icon-box-wrap6 .year-tit {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  background: linear-gradient(180deg, #01B174 0%, #0D76CB 100%);
  color: #fff;
  font-size: 1.1rem;
  font-weight: 500;
  padding: 0 0.9rem;
  width: 7.5rem;
  height: 7rem;
}

.icon-box-wrap6 .year-tit .select-group {
  display: block;
  width: 100%;
}

.icon-box-wrap6 .year-tit .select-group:after {
  color: #fff;
}

.icon-box-wrap6 .year-tit .select-group select {
  border: 1px solid rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

.icon-box-wrap6 .year-tit .select-group option {
  color: #000;
}

.icon-box-wrap6 > ul {
  display: flex;
  flex: 1;
  padding: 0.6rem 0;
}

.icon-box-wrap6 > ul > li {
  flex: 1;
  display: flex;
  align-items: center;
  display: flex;
  gap: 1.7rem;
  padding: 0 1.5rem;
  border-left: 1px dashed #ccc;
}

.icon-box-wrap6 > ul > li.c1 .img {
  width: 4.2rem;
  height: 4.2rem;
  border-radius: 50%;
  background: #E9FAF4;
  position: relative;
  z-index: 1;
}

.icon-box-wrap6 > ul > li.c1 .img img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
}

.icon-box-wrap6 > ul > li.c1 .txt {
  flex: 1;
}

.icon-box-wrap6 > ul > li.c1 .txt > span {
  color: #444;
  font-weight: 500;
  font-size: 0.85rem;
}

.icon-box-wrap6 > ul > li.c1 .txt > span > strong {
  color: #555;
  font-weight: 400;
  font-size: 0.75rem;
}

.icon-box-wrap6 > ul > li.c1 .txt > span > strong > em {
  width: 1.5rem;
  display: inline-block;
  text-align: right;
  margin-right: 0.15rem;
  color: #05A28C;
  font-size: 600;
  font-size: 0.9rem;
}

.icon-box-wrap6 > ul > li.c1 .txt > strong {
  display: flex;
  align-items: center;
  justify-content: end;
  color: #000;
  font-size: 0.8rem;
  text-align: right;
}

.icon-box-wrap6 > ul > li.c1 .txt > strong > em {
  margin-right: 0.25rem;
  color: #05A28C;
  font-size: 1.3rem;
  font-weight: 700;
}

.icon-box-wrap6 > ul > li.c2 .img {
  width: 4.2rem;
  height: 4.2rem;
  border-radius: 50%;
  background: #FFEEF1;
  position: relative;
}

.icon-box-wrap6 > ul > li.c2 .img img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
}

.icon-box-wrap6 > ul > li.c2 .txt {
  flex: 1;
}

.icon-box-wrap6 > ul > li.c2 .txt > span {
  color: #444;
  font-weight: 500;
  font-size: 0.85rem;
}

.icon-box-wrap6 > ul > li.c2 .txt > span > strong {
  color: #555;
  font-weight: 400;
  font-size: 0.75rem;
}

.icon-box-wrap6 > ul > li.c2 .txt > span > strong > em {
  width: 1.5rem;
  display: inline-block;
  text-align: right;
  margin-right: 0.15rem;
  color: #F36363;
  font-size: 600;
  font-size: 0.9rem;
}

.icon-box-wrap6 > ul > li.c2 .txt > strong {
  display: flex;
  align-items: center;
  justify-content: end;
  color: #000;
  font-size: 0.8rem;
  text-align: right;
}

.icon-box-wrap6 > ul > li.c2 .txt > strong > em {
  margin-right: 0.25rem;
  color: #F36363;
  font-size: 1.3rem;
  font-weight: 700;
}

.icon-box-wrap6 > ul > li:after {
  content: "";
}

.c-t-box {
  border: 1px solid #ccc;
  display: flex;
  gap: 2rem;
  height: 5.7rem;
}

.c-t-box .tit {
  width: 13.5rem;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background: linear-gradient(180deg, #02B175 0%, #0E77CB 100%);
  color: #fff;
  font-size: 1.5rem;
  font-weight: 600;
}

.c-t-box > ul {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  padding: 0.5rem 0;
  height: 100%;
}

.c-t-box > ul > li {
  display: flex;
  align-items: center;
  width: 100%;
}

.c-t-box > ul > li > label {
  width: 5.8rem;
  color: #666;
  font-size: 0.85rem;
  font-weight: 600;
  display: inline-block;
}

.c-t-box > ul > li input {
  width: 16rem;
}

.c-t-box > ul > li .select-group {
  width: 7.7rem;
}

.c-t-box > ul > li .calendar-input {
  width: 7.7rem;
}

.t-b-box2 {
  border-top: 2px solid #3BBBCA;
  border-bottom: 1px solid #ccc;
  padding: 1rem 0;
}

.more-box-wrap {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

.more-box-wrap .more-box {
  border: 1px solid #D0D5E5;
  border-radius: 0.5rem;
  padding: 1rem;
  position: relative;
  flex: 1;
  max-width: 21.2rem;
  min-width: 21.2rem;
}

.more-box-wrap .more-box .tit {
  font-size: 1.2rem;
  font-weight: 700;
  border-bottom: 1px solid #ccc;
  padding-bottom: 0.5rem;
}

.more-box-wrap .more-box .inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

.more-box-wrap .more-box .inner .inner-list {
  border-radius: 0.5rem;
  background: #F4F7FE;
  padding: 0 1rem;
  width: 100%;
}

.more-box-wrap .more-box .inner .inner-list > li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem 0;
  border-bottom: 1px dashed #ccc;
}

.more-box-wrap .more-box .inner .inner-list > li > span {
  font-weight: 600;
}

.more-box-wrap .more-box .inner .inner-list > li > em {
  display: flex;
  align-items: center;
}

.more-box-wrap .more-box .inner .inner-list > li > em > strong {
  font-size: 1.1rem;
  font-weight: 700;
  margin-right: 0.5rem;
}

.more-box-wrap .more-box .inner .inner-list > li:last-child {
  border: none;
}

.more-box-wrap .more-box .more-btn {
  position: absolute;
  top: 1rem;
  right: 1rem;
}

.icon-tit-box {
  border: 1px solid #D0D5E5;
  border-radius: 0.5rem;
  padding: 1.5rem 1rem;
  background: #fff;
  flex: 1;
}

.icon-tit-box .tit {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.icon-tit-box .tit img {
  width: 1.5rem;
  height: 1.5rem;
}

.icon-tit-box .tit > span {
  font-size: 1rem;
  font-weight: 600;
}

.icon-tit-box .value {
  color: #555;
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  justify-content: end;
  gap: 0.25rem;
}

.icon-tit-box .value > strong {
  color: #262626;
  font-size: 2rem;
  font-weight: 700;
}

.tooltip1 {
  border-radius: 0.5rem;
  border: 1.5px solid #115AB6;
  padding: 0.5rem 1rem;
  background: #fff;
  box-shadow: 2px 2px 2px 0px rgba(0, 0, 0, 0.15);
  position: relative;
  width: auto;
  max-width: 18rem;
  display: inline-block;
}

.tooltip1 .inner {
  text-align: center;
  width: 100%;
}

.tooltip1 .inner .txt1 {
  color: #444;
  font-weight: 700;
}

.tooltip1 .inner .txt2 {
  color: #444;
  font-size: 0.75rem;
}

.tooltip1 .triangle {
  width: 10px;
  height: 10px;
  transform: rotate(45deg);
  box-shadow: 2px 2px 2px 0 rgba(0, 0, 0, 0.15);
  position: absolute;
  bottom: -6px;
  left: 50%;
  text-align: center;
  z-index: 1;
  background: #fff;
  border-right: 1px solid #115AB6;
  border-bottom: 1px solid #115AB6;
}

.none-b-wrap {
  display: flex;
  align-items: center;
}

.none-b-wrap .box {
  flex: 1;
}

.none-b-wrap .box:nth-child(1) {
  border-right: 1px dashed #ccc;
}

.n-grid-wrap {
  display: grid;
  grid-template-rows: auto 1fr;
}

.n-grid-wrap > div {
  align-items: center;
  justify-content: center;
}

.control-layer {
  min-width: 18rem;
}

.control-layer .control-cont > p {
  color: #444;
}

.control-layer .control-cont > p > span {
  margin: 0 0.5rem;
}

.cont.m-h {
  min-height: 35rem;
}

.breadcrumb > ul {
  display: flex;
  gap: 0.15rem;
  align-items: center;
}

.breadcrumb > ul > li {
  cursor: pointer;
}

.breadcrumb > ul > li > a {
  color: #444;
  font-size: 0.7rem;
}

.breadcrumb > ul > li > a > i {
  color: #999;
}

.breadcrumb > ul > li.home > a > i {
  color: #444;
}

.breadcrumb > ul > li.now > a {
  color: #262626;
  font-weight: 700;
}

.flt-graph .chart {
  display: inline-block;
  vertical-align: middle;
  width: 15.375rem;
}

.flt-graph .info {
  position: relative;
  display: inline-block;
  margin-left: 1.5rem;
  padding: 0 1.5rem;
  width: calc(100% - 17.5rem);
  border: 3px solid #E1E1E1;
  vertical-align: middle;
}

.flt-graph .info:before {
  position: absolute;
  top: 50%;
  left: -2.2rem;
  width: 2.2rem;
  height: 0.15rem;
  background: #E1E1E1;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  content: "";
}

.flt-graph .info:after {
  position: absolute;
  top: 50%;
  left: -2.2rem;
  width: 0.9rem;
  height: 0.9rem;
  border: 3px solid #E1E1E1;
  background: #fff;
  border-radius: 50%;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  content: "";
}

.box-graph2 {
  line-height: 1.2;
}

.box-graph2 > li {
  display: flex;
  align-items: center;
  padding: 1rem 0;
}

.box-graph2 > li > ul {
  position: relative;
  float: left;
  width: 30%;
  padding-right: 1rem;
}

.box-graph2 > li > ul.fixHeight1 {
  min-height: 5.2rem;
}

.box-graph2 > li > ul:before {
  position: absolute;
  top: 50%;
  right: 0;
  width: 1px;
  height: 100%;
  background: #E1E1E1;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  content: "";
}

.box-graph2 > li > ul > li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}

.box-graph2 > li > ul > li .tit {
  float: left;
  font-size: 1rem;
  letter-spacing: -0.08rem;
  width: 33%;
}

.box-graph2 > li > ul > li .dot-graph {
  width: 7rem;
}

.box-graph2 > li > ul > li span.tit {
  color: #5C5C5C;
  font-size: 0.8rem;
  font-weight: 600;
  word-wrap: break-word;
  word-break: keep-all;
}

.box-graph2 > li > ul > li .num {
  float: right;
  color: #5C5C5C;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: end;
}

.box-graph2 > li > ul > li .num > strong {
  font-size: 1.3rem;
  font-weight: 700;
  word-break: break-all;
  flex: 1;
  text-align: right;
}

.box-graph2 > li > ul > li .num > em {
  margin-left: 0.25rem;
  color: #84878D;
  font-size: 0.7rem;
  width: 16%;
}

.box-graph2 > li > ul > li .titT1 + .num > strong {
  color: #3BBBCA;
}

.box-graph2 > li .graph {
  float: left;
  width: 70%;
  padding-left: 1rem;
}

.box-graph2 > li .graph .titT3 {
  margin-bottom: 0.25rem;
}

.box-graph2 > li .graph .txt {
  margin-bottom: 0.25rem;
  float: left;
  line-height: 1;
}

.box-graph2 > li .graph .txt > em {
  margin-left: 0.25rem;
  color: #84878D;
  font-size: 0.7rem;
}

.box-graph2 > li .graph .txt > strong {
  color: #5C5C5C;
  font-weight: 800;
  font-size: 1.7rem;
}

.box-graph2 > li .graph .txt:first-of-type > strong {
  background: linear-gradient(90deg, #7BC6AB 0%, #64A0D3 83.51%);
  color: #64A0D3;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.box-graph2 > li .graph .txt + .txt {
  float: right;
}

.box-graph2 > li .graph .graph-count-vertical {
  clear: both;
}

.box-graph2 > li + li {
  border-top: 1px solid #E1E1E1;
}

.box-graph2-small > li > ul > li .num > strong {
  font-size: 0.9rem;
}

.tooltip-icon {
  display: inline-block;
  vertical-align: middle;
  color: #3BBBCA;
  cursor: pointer;
  font-size: 1rem;
  margin: 0 0.25rem;
}

.grid-wrap1 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 0.8fr;
  gap: 1rem;
  height: 80vh;
}
.grid-wrap1 [class^=cont] {
  padding: 1.5rem;
  border: 1px solid #D0D5E5;
  border-radius: 0.5rem;
}
.grid-wrap1 .cont1 {
  grid-column: 1/2;
  grid-row: 1/span 2;
}
.grid-wrap1 .cont2 {
  grid-column: 2/2;
}
.grid-wrap1 .cont3 {
  grid-column: 2/2;
}

.n-legend {
  display: flex;
  align-items: center;
  gap: 1rem;
  justify-content: end;
  margin-bottom: 0.5rem;
}
.n-legend > li {
  color: #444;
  font-size: 0.75rem;
  position: relative;
}
.n-legend > li.c1:before {
  content: "";
  width: 0.6rem;
  height: 0.6rem;
  background: #7A7A7A;
  display: inline-block;
  border-radius: 50%;
  margin-right: 0.25rem;
}
.n-legend > li.c2:before {
  content: "";
  width: 0.6rem;
  height: 0.6rem;
  background: #AAA;
  display: inline-block;
  border-radius: 50%;
  margin-right: 0.25rem;
}
.n-legend > li.c3:before {
  content: "";
  width: 0.6rem;
  height: 0.6rem;
  background: #126CE2;
  display: inline-block;
  border-radius: 50%;
  margin-right: 0.25rem;
}
.n-legend > li.c4:before {
  content: "";
  width: 0.6rem;
  height: 0.6rem;
  background: #43C5DB;
  display: inline-block;
  border-radius: 50%;
  margin-right: 0.25rem;
}

.ess-gener-box {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}
.ess-gener-box > div {
  padding: 1rem;
  border-radius: 0.5rem;
}
.ess-gener-box > div .tit {
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: 0.25rem;
  white-space:nowrap;
}
.ess-gener-box [class^=inner] {
  flex: 1;
}
.ess-gener-box [class^=inner] > strong {
  background: #373C51;
  border-radius: 0.5rem;
  color: #D2D6E5;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 5rem;
  padding:0 .25rem;
  /* width: 6rem; */
}
.ess-gener-box [class^=inner] > strong > em {
  font-size: 1.7rem;
  font-weight: 700;
  margin-right: 0.25rem;
}
.ess-gener-box .ess-box1 {
  display: flex;
  align-items: center;
  gap: 1rem;
  width: 25%;
  background: linear-gradient(90deg, #7DC5B2 0%, #6AA7D2 100%);
}
.ess-gener-box .ess-box1 .inner .tit {
  color: #fff;
}
.ess-gener-box .ess-box1 .inner > strong > em {
  background: linear-gradient(90deg, #91E7D1 0%, #7CBFEE 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 700;
}
.ess-gener-box .ess-box2 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  border: 1px solid #B1C6D4;
  background: #E1ECF3;
  flex: 1;
}

.ess-gener-box .ess-box2 .inner > strong > em {
  color: #43C5DB;
}
.ess-gener-box .ess-box2 .list {
  flex: 1;
  margin-left: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.ess-gener-box .ess-box2 .list > li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.25rem 1rem;
  border-radius: 0.5rem;
  background: #fff;
}
.ess-gener-box .ess-box2 .list > li > span {
  font-size: 0.9rem;
  font-weight: 600;
  width: 6rem;
}
.ess-gener-box .ess-box2 .list > li > strong {
  color: #555;
  font-size: 0.9rem;
  font-weight: 400;
}
.ess-gener-box .ess-box2 .list > li > strong > em {
  color: #43C5DB;
  font-size: 1rem;
  font-weight: 700;
  margin-right: 0.25rem;
}
.ess-gener-box .ess-box3 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  border: 1px solid #B1C6D4;
  background: #F1F5F8;
  flex: 1;
}
.ess-gener-box .ess-box3 .inner > strong > em {
  color: #43DBA4;
}
.ess-gener-box .ess-box3 .list {
  flex: 1;
  margin-left: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.ess-gener-box .ess-box3 .list > li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.25rem 1rem;
  border-radius: 0.5rem;
  background: #fff;
}
.ess-gener-box .ess-box3 .list > li > span {
  font-size: 0.9rem;
  font-weight: 600;
  width: 6rem;
}
.ess-gener-box .ess-box3 .list > li > strong {
  color: #555;
  font-size: 0.9rem;
  font-weight: 400;
}
.ess-gener-box .ess-box3 .list > li > strong > em {
  color: #43DBA4;
  font-size: 1rem;
  font-weight: 700;
  margin-right: 0.25rem;
}



.sub-wrap {
  /* 가이드 텍스트 */
  /* .n-srh-filter */
  /* inner-flex 컨텐츠 gap */
}

.sub-wrap .page-tit {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  margin-bottom: 0.5rem;
}

.sub-wrap .page-tit .tit {
  color: #262626;
  font-size: 1.3rem;
  font-weight: 700;
  display: flex;
  align-items: center;
}

.sub-wrap .page-tit .tit > span {
  color: #555;
  font-size: 0.8rem;
  margin-left: 0.5rem;
  font-weight: 400;
}

.sub-wrap .page-tit .tit .badge {
  border: 1px solid #D0D5E5;
  border-radius: 1.85rem;
  padding: 0.3rem 0.6rem;
  background: #E7EAF2;
  margin-left: 1rem;
  color: #555;
  font-size: 0.7rem;
  font-weight: 400;
}

.sub-wrap .page-tit .tit .badge > i {
  margin-right: 0.15rem;
}

.sub-wrap .breadcrumb > ul {
  display: flex;
  gap: 0.15rem;
  align-items: center;
}

.sub-wrap .breadcrumb > ul > li {
  cursor: pointer;
}

.sub-wrap .breadcrumb > ul > li > a {
  color: #444;
  font-size: 0.7rem;
}

.sub-wrap .breadcrumb > ul > li > a > i {
  color: #999;
}

.sub-wrap .breadcrumb > ul > li.home > a > i {
  color: #444;
}

.sub-wrap .breadcrumb > ul > li.now > a {
  color: #262626;
  font-weight: 700;
}

.sub-wrap .g-txt {
  color: #555;
}

.sub-wrap .g-txt > strong {
  color: #444;
  font-size: 1rem;
  font-weight: 500;
  margin-right: 0.5rem;
}

.sub-wrap .n-select-group {
  border: 1px solid red;
  position: relative;
  display: inline-block;
  height: 2rem;
  padding: 0;
  border: 0;
}

.sub-wrap .n-select-group select {
  position: relative;
  display: block;
  padding: 0 2rem 0 0.5rem;
  width: 100%;
  height: 100%;
  color: #333;
  background: #fff;
  cursor: pointer;
  font-size: 0.8rem;
}

.sub-wrap .n-select-group:after {
  content: "\e941";
  font-family: "xeicon";
  font-size: 0.8rem;
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  z-index: 2;
  cursor: pointer;
  transition: 0.3s;
}

.sub-wrap .sub-inner-flex1 {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.eng-grid-wrap1 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 0.8fr;
  gap: 1rem;
  height: 70vh;
}
.eng-grid-wrap1 [class^=cont] {
  padding: 1.5rem;
  border: 1px solid #D0D5E5;
  border-radius: 0.5rem;
  background: #fff;
}
.eng-grid-wrap1 .withTab .tab-st2 + .cont2 {
  border-radius: 0 0 0.5rem 0.5rem;
}
.eng-grid-wrap1 .cont1 {
  grid-column: 1/2;
  grid-row: 1/span 2;
}
.eng-grid-wrap1 .cont2 {
  grid-column: 2/2;
  height: calc(100% - 38px);
}
.eng-grid-wrap1 .cont3 {
  grid-column: 2/2;
}


.eng-flex-wrap {
  display: flex;
  gap: 1rem;
  height: 100%;
  width: 100% !important;
}
.eng-flex-wrap [class^=cont] {
  padding: 1.5rem;
  border: 1px solid #D0D5E5;
  border-radius: 0.5rem;
  background: #fff;
}
.eng-flex-wrap [class^=cont].n-p{
  padding:0;
  overflow: hidden;
}
.eng-flex-wrap > div {
  flex: 1;
  max-width: 50%;
}
.eng-flex-wrap > div.eng-flex2 {
  display: flex;
  gap: 1rem;
  flex-direction: column;
}
.eng-flex-wrap > div.eng-flex2 .withTab {
  flex: 1;
}
.eng-flex-wrap > div.eng-flex2 .withTab > .cont2 {
  height: calc(100% - 38px);
  border-radius: 0 0 0.5rem 0.5rem;
}
.eng-flex-wrap > div.eng-flex2 .cont3 {
  flex: 1;
}

.page-count .select-group{height:1.5rem;}

/* ----------- // .sub-wrap 내 스타일 E-cloud ----------- */

/* 2025.1.20 추가  */
.map-table-wrap {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.map-table-wrap > div {
  min-height: 29.1rem;
}
.map-table-wrap .map-box {
  border-radius: 0.5rem;
  border: 1px solid #D0D5E5;
  width: 43.43%;
  position: relative;
}
.map-table-wrap .table-box {
  flex: 1;
}

.grid-sort2 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}
.grid-sort2 > div {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}
.grid-sort2 > div:nth-child(1) > div {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}
.grid-sort2 > div:nth-child(1) .paging {
  margin-right: 0.25rem;
}
.grid-sort2 > div:nth-child(1) .paging > span {
  color: #84878D;
  font-size: 0.75rem;
}
.grid-sort2 > div:nth-child(1) .paging > span > strong {
  color: #107F93;
  font-weight: 700;
  margin: 0 0.25rem;
}
.grid-sort2 > div:nth-child(1) .check > span {
  color: #84878D;
  font-size: 0.75rem;
  margin: 0;
}
.grid-sort2 > div:nth-child(2) > span {
  color: #84878D;
  font-size: 0.75rem;
}
.grid-sort2 .select-group {
  height: 1.5rem;
}

.map-pin1 {
  position: absolute;
}
.map-pin1 > a {
  display: inline-block;
  width: 2.3rem;
  height: 3.05rem;
  background: url(/img/sub/map-pin1.png) no-repeat center/100%;
  position: relative;
}
.map-pin1 > a .tooltip3-con {
  position: absolute;
  top: -200%;
  left: -30%;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.map-pin1 > a .tooltip3-con .tooltip3 {
  display: inline-flex;
  flex-direction: column;
  gap: 0.25rem;
  border-radius: 0.5rem;
  border: 2px solid #FF9603;
  background: #fff;
  padding: 0.75rem;
  min-width: 8.65rem;
  position: relative;
}
.map-pin1 > a .tooltip3-con .tooltip3 .tit {
  color: #444;
  font-weight: 700;
}
.map-pin1 > a .tooltip3-con .tooltip3 .inner > span {
  display: inline-block;
  border-radius: 0.25rem;
  background: #E7EAF2;
  min-width: 3.45rem;
  color: #444;
  font-size: 0.7rem;
  font-weight: 500;
  text-align: center;
}
.map-pin1 > a .tooltip3-con .tooltip3 .inner > strong {
  color: #262626;
  font-size: 0.75rem;
  font-weight: 700;
}
.map-pin1 > a .tooltip3-con .tooltip3 .inner > strong > em {
  font-weight: 400;
}
.map-pin1 > a .tooltip3-con .tooltip3 .triangle {
  width: 10px;
  height: 10px;
  transform: rotate(45deg);
  box-shadow: 2px 2px 2px 0 rgba(0, 0, 0, 0.15);
  position: absolute;
  bottom: -6.7px;
  left: 9%;
  text-align: center;
  z-index: 1;
  background: #fff;
  border-right: 2px solid #FF9603;
  border-bottom: 2px solid #FF9603;
}
.map-pin1 > a:hover > .tooltip3-con {
  opacity: 1;
  transform: translateY(0);
}

.map-pin2 {
  position: absolute;
}
.map-pin2 > a {
  display: inline-block;
  width: 2.3rem;
  height: 3.05rem;
  background: url(/img/sub/map-pin2.png) no-repeat center/80%;
  position: relative;
}
.map-pin2 > a .tooltip3-con {
  position: absolute;
  top: -200%;
  left: -30%;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.map-pin2 > a .tooltip3-con .tooltip3 {
  display: inline-flex;
  flex-direction: column;
  gap: 0.25rem;
  border-radius: 0.5rem;
  border: 2px solid #0C78C6;
  background: #fff;
  padding: 0.75rem;
  min-width: 8.65rem;
  position: relative;
  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}
.map-pin2 > a .tooltip3-con .tooltip3 .tit {
  color: #444;
  font-weight: 700;
}
.map-pin2 > a .tooltip3-con .tooltip3 .inner > span {
  display: inline-block;
  border-radius: 0.25rem;
  background: #E7EAF2;
  min-width: 3.45rem;
  color: #444;
  font-size: 0.7rem;
  font-weight: 500;
  text-align: center;
}
.map-pin2 > a .tooltip3-con .tooltip3 .inner > strong {
  color: #262626;
  font-size: 0.75rem;
  font-weight: 700;
}
.map-pin2 > a .tooltip3-con .tooltip3 .inner > strong > em {
  font-weight: 400;
}
.map-pin2 > a .tooltip3-con .tooltip3 .triangle {
  width: 10px;
  height: 10px;
  transform: rotate(45deg);
  box-shadow: 2px 2px 2px 0 rgba(0, 0, 0, 0.15);
  position: absolute;
  bottom: -6.7px;
  left: 9%;
  text-align: center;
  z-index: 1;
  background: #fff;
  border-right: 2px solid #0C78C6;
  border-bottom: 2px solid #0C78C6;
}
.map-pin2 > a:hover > .tooltip3-con {
  opacity: 1;
  transform: translateY(0);
}

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

.n-btn-tit {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.n-btn-tit > div {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.n-btn-tit > div .tit {
  color: #107F93;
  font-size: 1.1rem;
  font-weight: 600;
}

.inter-cont-wrap {
  display: flex;
  gap: 1rem;
}
.inter-cont-wrap .inter-inner1 {
  flex: 1;
}
.inter-cont-wrap .inter-inner2 {
  width: 20%;
}

.col-line {
  display: inline-block;
  width: 1px;
  background: #ccc;
}

.cont-inner-gap1 {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.circle-btn-tog {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid #999;
  background: #fff;
  width: 1.75rem;
  height: 1.75rem;
  transition: all 0.3s;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
}
.circle-btn-tog:hover {
  background: #999;
}
.circle-btn-tog:hover > i {
  transform: rotate(180deg);
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
}

.toggle-item-wrap {
  background: #F3F4F5;
  padding: 1rem;
  min-height: 27.85rem;
}
.toggle-item-wrap .toggle-item .toggle-item-tit {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #ccc;
  padding-bottom: 0.75rem;
}
.toggle-item-wrap .toggle-item .toggle-item-tit .tit {
  color: #595757;
  font-size: 1rem;
  font-weight: 700;
}
.toggle-item-wrap .toggle-item .toggle-item-content {
  border-radius: 0.75rem;
  border: 1px solid #ccc;
  background: #fff;
  padding: 1rem;
  margin: 0.75rem 0;
  display: none;
}
.toggle-item-wrap .toggle-item .toggle-item-content .tit {
  color: #333;
  font-weight: 800;
}
.toggle-item-wrap .toggle-item + div {
  padding-top: 0.75rem;
}
.toggle-item-wrap .toggle-item.on .circle-btn-tog > i {
  transform: rotate(180deg);
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
}
.toggle-item-wrap .toggle-item.on .toggle-item-content {
  display: block;
}

/* // 2025.1.20 추가  */





/* 지도영역 */
#map {
  position: relative;
  width: 100%;
  /*height: 33rem;*/
  height: calc(100vh - 16rem);
}

#map .marker-area1 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

#map .marker-area1 > a {
  position: absolute;
  width: 1.35rem;
  height: 1.85rem;
  background: url(portal/assets/images/sub/marker_icon1.png);
}

#map .marker-area1 > a.active {
  animation-delay: 0s;
  animation-duration: 3s;
  animation-name: rotateY;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

#map.map2 {
  height: 31.8rem;
}

#map .marker-area2 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

#map .marker-area2 > a {
  position: absolute;
  border-radius: 50%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
}

#map .marker-area2 > a:not(.marker0) {
  background: rgba(197, 197, 197, 0.2);
  border: 2px solid #c5c5c5;
}

#map .marker-area2 > a:not(.marker0):before {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 2px;
  height: 50%;
  background: #c5c5c5;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  content: "";
}

#map .marker-area2 > a:not(.marker0):after {
  position: absolute;
  top: calc(100% - 0.3rem);
  left: 50%;
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
  background: #fff;
  border: 2px solid #c5c5c5;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  content: "";
}

#map .marker-area2 > a .bubble-txt {
  position: absolute;
  display: block;
  min-width: 9rem;
  padding: 0.5rem;
  background: #c5c5c5;
  border-radius: 0.5rem;
  color: #fff;
}

#map .marker-area2 > a .bubble-txt:before {
  position: absolute;
  top: -0.25rem;
  left: 50%;
  width: 0.5rem;
  height: 0.5rem;
  background: #c5c5c5;
  transform: translateX(-50%) rotate(-45deg);
  -webkit-transform: translateX(-50%) rotate(-45deg);
  -moz-transform: translateX(-50%) rotate(-45deg);
  content: "";
}

#map .marker-area2 > a .bubble-txt > strong {
  display: block;
  font-size: 0.8rem;
  font-weight: 600;
}

#map .marker-area2 > a .bubble-txt > strong > em {
  display: inline-block;
  width: 0.8rem;
  height: 0.8rem;
  margin-right: 0.35rem;
  border-radius: 50%;
  background: #fff;
  color: #c5c5c5;
  font-size: 0.6rem;
  font-weight: 700;
  text-align: center;
  line-height: 0.8rem;
  vertical-align: middle;
}

#map .marker-area2 > a .bubble-txt > span {
  display: block;
  font-size: 0.9rem;
  font-weight: 600;
}

#map .marker-area2 > a .bubble-txt > span > em {
  display: inline-block;
  margin-left: 2rem;
  font-weight: 700;
}

#map .marker-area2 > a.marker0 {
  width: 0.6rem;
  height: 0.6rem;
  border: 2px solid #484848;
  background: #fff;
  z-index: 5;
}

#map .marker-area2 > a.marker0:before {
  position: absolute;
  top: calc(50% - 0.6rem);
  left: 50%;
  width: 1.2rem;
  height: 1.4rem;
  background: url(portal/assets/images/sub/marker_icon2.png);
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  content: "";
}

#map .marker-area2 > a.marker1 {
  width: 6.45rem;
  height: 6.45rem;
  z-index: 4;
}

#map .marker-area2 > a.marker1 .bubble-txt {
  top: calc(100% + 1rem);
  left: 50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
}

#map .marker-area2 > a.marker1.active {
  border: 2px solid #e08923;
  background: rgba(224, 137, 35, 0.2);
}

#map .marker-area2 > a.marker1.active:before {
  background: #e08923;
}

#map .marker-area2 > a.marker1.active:before {
  border-color: #e08923;
}

#map .marker-area2 > a.marker1.active .bubble-txt {
  background: #c66b00;
}

#map .marker-area2 > a.marker1.active .bubble-txt:before {
  background: #c66b00;
}

#map .marker-area2 > a.marker1.active .bubble-txt > strong > em {
  color: #c66b00;
}

#map .marker-area2 > a.marker1.over {
  border: 2px solid #e08923;
  background: rgba(224, 137, 35, 0.2);
}

#map .marker-area2 > a.marker1.over:before {
  background: #e08923;
}

#map .marker-area2 > a.marker1.over:before {
  border-color: #e08923;
}

#map .marker-area2 > a.marker1.over .bubble-txt {
  background: #c66b00;
}

#map .marker-area2 > a.marker1.over .bubble-txt:before {
  background: #c66b00;
}

#map .marker-area2 > a.marker1.over .bubble-txt > strong > em {
  color: #c66b00;
}

#map .marker-area2 > a.marker2 {
  width: 13.85rem;
  height: 13.85rem;
  z-index: 3;
}

#map .marker-area2 > a.marker2:before {
  top: 0;
}

#map .marker-area2 > a.marker2:after {
  top: -0.3rem;
}

#map .marker-area2 > a.marker2 .bubble-txt {
  top: calc(-50% + 2rem);
  left: 50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
}

#map .marker-area2 > a.marker2 .bubble-txt:before {
  top: auto;
  bottom: -0.25rem;
}

#map .marker-area2 > a.marker2.active {
  border: 2px solid #00bb9f;
  background: rgba(0, 187, 159, 0.2);
}

#map .marker-area2 > a.marker2.active:before {
  background: #00bb9f;
}

#map .marker-area2 > a.marker2.active:after {
  border-color: #00bb9f;
}

#map .marker-area2 > a.marker2.active .bubble-txt {
  background: #009a83;
}

#map .marker-area2 > a.marker2.active .bubble-txt:before {
  background: #009a83;
}

#map .marker-area2 > a.marker2.active .bubble-txt > strong > em {
  color: #009a83;
}

#map .marker-area2 > a.marker2.over {
  border: 2px solid #00bb9f;
  background: rgba(0, 187, 159, 0.2);
}

#map .marker-area2 > a.marker2.over:before {
  background: #00bb9f;
}

#map .marker-area2 > a.marker2.over:after {
  border-color: #00bb9f;
}

#map .marker-area2 > a.marker2.over .bubble-txt {
  background: #009a83;
}

#map .marker-area2 > a.marker2.over .bubble-txt:before {
  background: #009a83;
}

#map .marker-area2 > a.marker2.over .bubble-txt > strong > em {
  color: #009a83;
}

#map .marker-area2 > a.marker3 {
  width: 15.75rem;
  height: 15.75rem;
  z-index: 2;
}

#map .marker-area2 > a.marker3:before {
  top: 50%;
  left: inherit;
  right: 0;
  width: 50%;
  height: 2px;
  transform: translateX(0);
  -webkit-transform: translateX(0);
  -moz-transform: translateX(0);
}

#map .marker-area2 > a.marker3:after {
  top: 50%;
  left: calc(100% - 0.3rem);
  transform: translate(0, -50%);
  -webkit-transform: translate(0, -50%);
  -moz-transform: translate(0, -50%);
}

#map .marker-area2 > a.marker3 .bubble-txt {
  top: 50%;
  left: auto;
  right: calc(-50% - 2.5rem);
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
}

#map .marker-area2 > a.marker3 .bubble-txt:before {
  top: 50%;
  left: -0.25rem;
  transform: translateY(-50%) rotate(45deg);
  -webkit-transform: translateY(-50%) rotate(45deg);
  -moz-transform: translateY(-50%) rotate(45deg);
}

#map .marker-area2 > a.marker3.active {
  border: 2px solid #2970cd;
  background: rgba(41, 112, 205, 0.2);
}

#map .marker-area2 > a.marker3.active:before {
  background: #2970cd;
}

#map .marker-area2 > a.marker3.active:after {
  border-color: #2970cd;
}

#map .marker-area2 > a.marker3.active .bubble-txt {
  background: #0e53ad;
}

#map .marker-area2 > a.marker3.active .bubble-txt:before {
  background: #0e53ad;
}

#map .marker-area2 > a.marker3.active .bubble-txt > strong > em {
  color: #0e53ad;
}

#map .marker-area2 > a.marker3.over {
  border: 2px solid #2970cd;
  background: rgba(41, 112, 205, 0.2);
}

#map .marker-area2 > a.marker3.over:before {
  background: #2970cd;
}

#map .marker-area2 > a.marker3.over:after {
  border-color: #2970cd;
}

#map .marker-area2 > a.marker3.over .bubble-txt {
  background: #0e53ad;
}

#map .marker-area2 > a.marker3.over .bubble-txt:before {
  background: #0e53ad;
}

#map .marker-area2 > a.marker3.over .bubble-txt > strong > em {
  color: #0e53ad;
}

#map .marker-area2 > a.marker4 {
  width: 26.25rem;
  height: 26.25rem;
  z-index: 1;
}

#map .marker-area2 > a.marker4:before {
  top: 50%;
  left: -0.3rem;
  width: 50%;
  height: 2px;
  transform: translateX(0);
  -webkit-transform: translateX(0);
  -moz-transform: translateX(0);
}

#map .marker-area2 > a.marker4:after {
  top: 50%;
  left: -0.3rem;
  transform: translate(0, -50%);
  -webkit-transform: translate(0, -50%);
  -moz-transform: translate(0, -50%);
}

#map .marker-area2 > a.marker4 .bubble-txt {
  top: calc(50% - 3rem);
  left: -18.5%;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
}

#map .marker-area2 > a.marker4 .bubble-txt:before {
  top: auto;
  bottom: -0.25rem;
}

#map .marker-area2 > a.marker4.active {
  border: 2px solid #e08923;
  background: rgba(224, 137, 35, 0.2);
}

#map .marker-area2 > a.marker4.active:before {
  background: #e08923;
}

#map .marker-area2 > a.marker4.active:before {
  border-color: #e08923;
}

#map .marker-area2 > a.marker4.active .bubble-txt {
  background: #c66b00;
}

#map .marker-area2 > a.marker4.active .bubble-txt:before {
  background: #c66b00;
}

#map .marker-area2 > a.marker4.active .bubble-txt > strong > em {
  color: #c66b00;
}

#map .marker-area2 > a.marker4.over {
  border: 2px solid #e08923;
  background: rgba(224, 137, 35, 0.2);
}

#map .marker-area2 > a.marker4.over:before {
  background: #e08923;
}

#map .marker-area2 > a.marker4.over:before {
  border-color: #e08923;
}

#map .marker-area2 > a.marker4.over .bubble-txt {
  background: #c66b00;
}

#map .marker-area2 > a.marker4.over .bubble-txt:before {
  background: #c66b00;
}

#map .marker-area2 > a.marker4.over .bubble-txt > strong > em {
  color: #c66b00;
}

#map.map3 {
  min-height: 40.75rem;
  height: 100%;
}

#map.map3 .m-location {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

#map.map3 .m-location .m-location-box {
  border: 1px solid #53808c;
  border-radius: 0.25rem;
  width: 8rem;
  padding: 0.4rem;
  background: linear-gradient(180deg, rgba(123, 198, 172, 0.9) 0.78%, rgba(101, 161, 211, 0.9) 100.16%);
  box-shadow: 2px 2px 5px 0 rgba(0, 0, 0, 0.2);
}

#map.map3 .m-location .m-location-box span,
#map.map3 .m-location .m-location-box strong {
  display: block;
  text-align: left;
  color: #fff;
}

#map.map3 .m-location .m-location-box span {
  font-size: 0.65rem;
  font-weight: 800;
}

[class^="map-pointer-"] {
  display: inline-block;
  color: #777;
  font-weight: 700;
}

[class^="map-pointer-"]:before {
  display: inline-block;
  margin-right: 0.35rem;
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 50%;
  border: 2px solid #e08923;
  background: rgba(224, 137, 35, 0.2);
  vertical-align: middle;
  content: "";
}

.map-pointer-c2:before {
  background: rgba(0, 187, 159, 0.2);
  border-color: #00bb9f;
}

.map-pointer-c3:before {
  background: rgba(41, 112, 205, 0.2);
  border-color: #2970cd;
}

.matching-wrap {
  position: relative;
}

.matching-wrap.active .tbl-st {
  display: none;
}

.map-matching-cont {
  position: relative;
  display: none;
  width: 100%;
  padding: 0.75rem 1rem;
}

.map-matching-cont [class^="map-matching-c"] {
  display: block;
  margin-bottom: 0.25rem;
  color: #262626;
  font-size: 1.4rem;
  font-weight: 700;
}

.map-matching-cont [class^="map-matching-c"] > em {
  display: inline-block;
  width: 1.2rem;
  height: 1.2rem;
  border-radius: 50%;
  background: #c66b00;
  color: #fff;
  font-weight: 600;
  font-size: 0.9rem;
  line-height: 1.2rem;
  text-align: center;
  vertical-align: middle;
}

.map-matching-cont .map-matching-c2 > em {
  background: #009a83;
}

.map-matching-cont .map-matching-c3 > em {
  background: #0e53ad;
}

.map-matching-cont .graph-list-type1 > li:not(.graph-list-gauge) .titT3 {
  letter-spacing: -0.075rem;
}

.map-matching-cont .graph-list-type1 > li:not(.graph-list-gauge) > strong {
  font-size: 1.1rem;
}

.map-matching-cont.active {
  display: block;
}

.map-matching-cont .map-matching-close {
  position: absolute;
  top: 0.75rem;
  right: 1rem;
  color: #333;
  font-size: 0.9rem;
}

.box-graph7 {
  display: flex;
  gap: 2.5rem;
  height: 19rem;
}

.box-graph7 > li {
  flex: 1;
}

.box-graph7 > li > div {
  border: 1px solid #C8C8D6;
  padding: 0.75rem;
  position: relative;
}

.box-graph7 > li > div > em {
  position: absolute;
  top: -0.3rem;
  left: 0.3rem;
  width: 1.5rem;
  height: 1.5rem;
  background: #71B5C1;
  color: #fff;
  font-weight: 700;
  font-size: 0.8rem;
  line-height: 1.5rem;
  text-align: center;
}

.box-graph7 > li > div > strong {
  display: block;
  padding-bottom: 1rem;
  color: var(--color-point-1-second);
  font-weight: 700;
  font-size: 0.8rem;
  text-align: center;
}

.box-graph7 > li > div > strong .guide-textbox {
  margin-left: 0.25rem;
  color: #444;
  text-align: left;
  font-weight: normal;
}

.box-graph7 > li > div > strong .guide-textbox .guide-text {
  width: 19rem;
}

.box-graph7 > li > div > span {
  display: block;
  margin-top: 1rem;
  color: #262626;
  font-size: 0.8rem;
  font-weight: 700;
  text-align: right;
}

.box-graph7 > li > div > span > strong {
  display: inline-block;
  margin-right: 0.25rem;
}

.box-graph7 > li:first-of-type, .box-graph7 > li:nth-of-type(3) {
  background: #F8FCFC;
}

.box-graph7 > li:first-of-type > div, .box-graph7 > li:nth-of-type(3) > div {
  height: 100%;
}

.box-graph7 > li:first-of-type > div > strong, .box-graph7 > li:nth-of-type(3) > div > strong {
  border-bottom: 1px dashed #ccc;
}

.box-graph7 > li:first-of-type > div > div, .box-graph7 > li:nth-of-type(3) > div > div {
  display: flex;
  justify-content: center;
  align-items: center;
  height: calc(100% - 1.5rem);
}

.box-graph7 > li:first-of-type > div > div .srh-cont, .box-graph7 > li:nth-of-type(3) > div > div .srh-cont {
  display: flex;
  align-items: center;
}

.box-graph7 > li:first-of-type > div > div .srh-cont span, .box-graph7 > li:nth-of-type(3) > div > div .srh-cont span {
  margin-left: 0.5rem;
  color: #262626;
  font-weight: 600;
}

.box-graph7 > li:nth-of-type(2) {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  position: relative;
}

.box-graph7 > li:nth-of-type(2) > div {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.25rem 0.5rem 1rem 2.3rem;
  height: 17.8571428571%;
}

.box-graph7 > li:nth-of-type(2) > div.height-c {
  height: 33.3333333333%;
}

.box-graph7 > li:nth-of-type(2) > div .srh-cont {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.box-graph7 > li:nth-of-type(2) > div .srh-cont strong {
  color: var(--color-point-1-second);
  font-weight: 600;
  margin-right: 2.25rem;
  white-space: nowrap;
  flex: 2;
}

.box-graph7 > li:nth-of-type(2) > div .srh-cont > div {
  display: inline-flex;
  align-items: center;
}

.box-graph7 > li:nth-of-type(2) > div .srh-cont > div input {
  margin: 0;
}

.box-graph7 > li:nth-of-type(2) > div .srh-cont > div span {
  margin-left: 0.5rem;
  color: #262626;
  font-weight: 600;
}

.box-graph7 > li:nth-of-type(2):before {
  content: "+";
  position: absolute;
  top: 50%;
  left: -1.5rem;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  font-size: 0.8rem;
  color: #ccc;
  font-weight: 400;
}

.box-graph7 > li:nth-of-type(3) {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  background: #fff;
  position: relative;
}

.box-graph7 > li:nth-of-type(3) > div {
  height: 50%;
}

.box-graph7 > li:nth-of-type(3):before {
  content: "+";
  position: absolute;
  top: 50%;
  left: -1.5rem;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  font-size: 0.8rem;
  color: #ccc;
  font-weight: 400;
}

.tab-order-st3 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 7rem;
}

.tab-order-st3 > li {
  position: relative;
  width: 25%;
}

.tab-order-st3 > li > div {
  padding: 0.5rem 1rem;
  border: 2px solid #ccc;
  border-radius: 0.5rem;
  display: flex;
  align-items: center;
}

.tab-order-st3 > li > div span {
  font-size: 0.9rem;
  font-weight: 600;
  color: #555;
  white-space: nowrap;
}

.tab-order-st3 > li > div strong {
  display: inline-block;
  margin-right: 0.5rem;
  color: #3BBBCA;
  font-size: 1.5rem;
  font-weight: 900;
}

.tab-order-st3 > li > div .circle {
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  margin-right: 1.3rem;
  background: rgba(59, 187, 202, 0.05);
  position: relative;
}

.tab-order-st3 > li:first-of-type > div .circle:before {
  content: "";
  width: 60%;
  height: 60%;
  background: url(/portal/assets/img/sub/stepicon2.png) no-repeat center/100% 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
}

.tab-order-st3 > li:nth-child(2) > div .circle:before {
  content: "";
  width: 60%;
  height: 60%;
  background: url(/portal/assets/img/sub/stepicon3.png) no-repeat;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
}

.tab-order-st3 > li:nth-child(3) > div .circle {
  position: relative;
}

.tab-order-st3 > li:nth-child(3) > div .circle:before {
  content: "";
  width: 60%;
  height: 60%;
  background: url(/portal/assets/img/sub/stepicon4.png) no-repeat center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
}

.tab-order-st3 > li:nth-child(3) > div span p {
  font-size: 0.7rem;
  letter-spacing: -1px;
}

.tab-order-st3 > li:nth-child(3) > div:before {
  content: "관장기관";
  position: absolute;
  top: 70%;
  left: -4.6rem;
  font-weight: 500;
  font-size: 0.75rem;
  letter-spacing: -1px;
}

.tab-order-st3 > li:nth-child(4) > div .circle:before {
  content: "";
  width: 60%;
  height: 60%;
  background: url("../img/sub/stepicon5.png") no-repeat;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
}

.tab-order-st3 > li:nth-child(4) > div:before {
  content: "e.cloud 플랫폼";
  position: absolute;
  top: 70%;
  left: -5.75rem;
  font-weight: 500;
  font-size: 0.75rem;
  letter-spacing: -1px;
}

.tab-order-st3 > li.on > div {
  background: linear-gradient(90deg, #00b073 0%, #0C75CA 100%);
  color: #fff;
  border-color: transparent;
  border: none;
}

.tab-order-st3 > li.on > div .circle {
  background: #fff;
}

.tab-order-st3 > li.on > div span {
  color: #fff;
}

.tab-order-st3 > li.on > div > strong {
  color: #fff;
}

.tab-order-st3 > li:after {
  content: "\f105";
  position: absolute;
  top: 50%;
  right: -3.5rem;
  transform: translate(50%, -50%);
  -webkit-transform: translate(50%, -50%);
  -moz-transform: translate(50%, -50%);
  font-size: 1rem;
  font-weight: 800;
  color: #a2a2a2;
  font-family: "Line Awesome Free";
  background: #efefef;
  width: 1.4rem;
  height: 1.4rem;
  border-radius: 50%;
  padding: 0.75rem;
  display: flex;
  justify-content: center;
  align-items: center;
}

.tab-order-st3 > li:last-of-type:after {
  display: none;
}

.total-btn-box-type1 {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.5rem 0;
}

.total-btn-box-type1 .box-total2 {
  flex: 2;
}

.total-btn-box-type1 .btns {
  margin: 0;
}

/* Disable Styles */
.disabled-style {
  border-color: lightgray !important;
  color: lightgray !important;
}

.box-text-style4 p {
  color: #262626;
  font-size: 0.75rem;
}

.box-text-style4 p span {
  display: block;
}

.box-text-style4 p strong {
  font-weight: 700;
}

.box-text-style4 .hl-text {
  color: #3BBBCA;
  font-size: 0.75rem;
  font-weight: 700;
}

.new-srh-filter1 {
  padding: 0.4rem 0.8rem;
  background: #F6F6F6;
  margin-bottom: 1rem;
}

.new-srh-filter1 > ul {
  display: flex;
  align-items: center;
}

.new-srh-filter1 > ul > li .tit {
  color: #84878D;
  font-size: 0.7rem;
  margin: 0 0.8rem;
}

.new-srh-filter1 > ul.flex-sb {
  display: flex;
  justify-content: space-between;
}

.control-box {
  display: flex;
  gap: 1rem;
  width: 100%;
  flex-wrap: wrap;
}

.control-box .box {
  display: flex;
  gap: 1rem;
  align-items: center;
  padding: 0.5rem 0.75rem;
  border: 1px solid #D0D5E5;
  background: #fff;
  border-radius: 0.5rem;
  min-width: calc((100% - (1rem * 3)) / 4);
  max-width: calc((100% - (1rem * 3)) / 4);
  transition: all 0.3s;
}

.control-box .box > span {
  display: inline-block;
  width: 3.1rem;
  height: 3.1rem;
}

/* 인버터 */
.control-box .box > span.img1 {
  background: url(/portal/assets/img/sub/control-img1.png) no-repeat center/contain;
}
/* 냉난방기 */
.control-box .box > span.img2 {
  background: url(/portal/assets/img/sub/control-img2.png) no-repeat center/contain;
}
/* 컴프레셔 */
.control-box .box > span.img3 {
  background: url(/portal/assets/img/sub/control-img3.png) no-repeat center/contain;
}
/* 냉동기 */
.control-box .box > span.img4 {
  background: url(/portal/assets/img/sub/control-img4.png) no-repeat center/contain;
}
/* 환기팬 */
.control-box .box > span.img5 {
  background: url(/portal/assets/img/sub/control-img5.png) no-repeat center/contain;
}
/* 전등 */
.control-box .box > span.img6 {
  background: url(/portal/assets/img/sub/control-img6.png) no-repeat center/contain;
}
/* */
.control-box .box .inner {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  flex: 1;
}

.control-box .box .inner .tit {
  color: #333;
  font-size: 0.9rem;
  font-weight: 500;
}

.control-box .box .inner > li {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.control-box .box .inner > li > span {
  color: #333;
  font-size: 0.8rem;
  font-weight: 400;
}

.control-box .box .inner > li > strong {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  color: #333;
  font-weight: 600;
}

.control-box .box .inner > li > strong .btn {
  border: 1px solid #ccc;
  background: #fff;
  border-radius: 0.25rem;
  padding: 0.1rem 0.5rem;
  transition: 0.3s;
  color: #444;
  font-size: 0.7rem;
  font-weight: 400;
  margin-left: 0.25rem;
}
.control-box .box .inner > li .input-wrap{gap:.15rem;}
.control-box .box .inner > li .input-wrap input{flex:1;}
.control-box .box .inner > li .btn-wrap{display:inline-flex;align-items:center;gap:.15rem;}

.control-box .box .inner > li > strong .btn:hover {
  background: #ccc;
}

.control-box .box .inner > li .slide-toggle-con .button {
  width: 2.5rem;
  height: 1.1rem;
}

.control-box .box .inner > li .slide-toggle-con .button .txt em {
  font-size: 0.6rem;
  right: 0.29rem;
}

.control-box .box .inner > li .slide-toggle-con .button .txt:before {
  font-size: 0.6rem;
}

.control-box .box .inner > li .slide-toggle-con .button .inside {
  width: 0.7rem;
  height: 0.7rem;
}

.control-box .box .inner > li .slide-toggle-con label {
  margin: 0;
}

.control-box .box .inner > li .slide-toggle-con input:checked ~ label .button .inside {
  left: 1.6rem;
}

.control-box .box.on {
  background: #F3F5FA;
}


.control-box2 {
  display: flex;
  gap: 1rem;
  width: 100%;
  flex-wrap: wrap;
}

.control-box2 .box {
  display: flex;
  gap: 1rem;
  align-items: center;
  padding: 0.5rem 0.75rem;
  border: 1px solid #D0D5E5;
  background: #fff;
  border-radius: 0.5rem;
  flex: 1;
  max-width: 21.2rem;
}

.control-box2 .box > span {
  display: inline-block;
}

.control-box2 .box > span.img5 {
  width: 3.1rem;
  height: 3.1rem;
  background: url(/portal/assets/img/sub/control-img5.png) no-repeat center/contain;
}

.control-box2 .box > span.img6 {
  width: 2.5rem;
  height: 4.1rem;
  background: url(/portal/assets/img/sub/control-img6.png) no-repeat center/contain;
}

.control-box2 .box .inner {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  flex: 1;
}

.control-box2 .box .inner .tit {
  color: #333;
  font-size: 0.9rem;
  font-weight: 500;
}

.control-box2 .box .inner > li {
  display: flex;
  align-items: center;
}

.control-box2 .box .inner > li .tit2 {
  color: #333;
  white-space: nowrap;
}

.control-box2 .box .inner > li.radio {
  gap: 0.5rem;
}

.control-box2 .box .inner > li.input {
  gap: 0.5rem;
}

.control-box2 .box .inner > li.input .input-util {
  margin: 0;
  color: #777;
  font-size: 0.75rem;
}

.control-box2 .box.on {
  background: #F3F5FA;
}

.toggle-box {
  border: 1px solid #ccc;
  border-radius: 0.5rem;
  padding: 1rem;
  margin-bottom: 1rem;
}

.toggle-box .tog-btn.active > i {
  transition: all 0.3s;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  transform: rotate(180deg);
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
}

.toggle-box .flexWrap {
  margin-bottom: 1rem;
  border-bottom: 1px solid #ccc;
}

.toggle-box .t-img {
  width: 100%;
  background: url(/portal/assets/img/sub/t-img.png) no-repeat center/contain;
  height: 0;
  overflow: hidden;
  transition: height 0.5s ease;
}

.toggle-box .t-img.show {
  height: 20rem;
}

.click-item-wrap {
  display: inline-flex;
  gap: 0.5rem;
}

.click-item-wrap .click-item {
  border: 1px solid #ccc;
  height: 2rem;
  line-height: 2rem;
  border-radius: 0.25rem;
  padding: 0 0.75rem;
  background: #fff;
}

.click-item-wrap .click-item > span {
  color: #555;
}

.click-item-wrap .click-item > span > i {
  margin-right: 0.25rem;
}

.click-item-wrap .click-item.on {
  background: linear-gradient(90deg, #01B074 0%, #0D76CA 100%);
  border: 1px solid transparent;
}

.click-item-wrap .click-item.on > span {
  color: #fff;
}

.cont.report {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.report-tit-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /*border-bottom: 1px solid #D0D5E5;*/
  /*padding-bottom: 1rem;*/
}

.report-tit-wrap > div {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.report-tit-wrap > div:nth-child(1) .logo {
  display: inline-block;
  width: 9rem;
  height: 2.2rem;
  background: url(/portal/assets/img/sub/logo_b.png) no-repeat center/100%;
}

.report-tit-wrap > div:nth-child(1) > span {
  font-size: 1.5rem;
  font-weight: 600;
}

.re-box-wrap {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

.re-box {
  flex: 1;
  border: 1px solid #ccc;
  background: #fff;
  box-shadow: 2px 2px 2px 0px rgba(0, 0, 0, 0.1);
  border-radius: 0.5rem;
  min-width: 13.5rem;
}

.re-box .tit {
  text-align: center;
  background: #F4F8FB;
  padding: 0.4rem 0;
  border-radius: 0.5rem 0.5rem 0 0;
  color: #444;
  font-size: 0.9rem;
  font-weight: 600;
}

.re-box > div {
  padding: 0.425rem 0;
  flex:1;
  /* display:flex;
  flex-direction: column;
  align-items:center;
  justify-content:center; */
}

.re-box.type2{
  display:flex;
  flex-direction:column;
  height:auto;
}

.re-box.type2 > div{display:flex;flex-direction:column;justify-content:center;align-items:center;}

.re-box.rb-st1{flex:none;min-width:calc((100% - (1rem * 4)) / 5);}

.re-box > div > span {
  color: #555;
  font-size: 0.7rem;
  display: flex;
  align-items: center;
  justify-content: center;
  padding:0 0.25rem;
}

.re-box > div > span > strong {
  font-size: 1.5rem;
  font-weight: 800;
  margin-right: 0.5rem;
}

.progress-wrap {
  display: flex;
  gap: 1rem;
  height: 5.6rem;
}

.progress-wrap .progress-con1 {
  width: 20%;
  display: grid;
  grid-template-rows: 1fr;
  gap: 0.5rem;
  height: 100%;
}

.progress-wrap .progress-con1 .tit-value {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1.1rem;
  border-radius: 0.5rem;
  background: #F4F8FB;
}

.progress-wrap .progress-con1 .tit-value .tit {
  color: #262626;
  font-size: 0.9rem;
  font-weight: 600;
}

.progress-wrap .progress-con1 .tit-value > em {
  color: #555;
  font-size: 0.9rem;
  margin-right: 0.5rem;
}

.progress-wrap .progress-con1 .tit-value > em > strong {
  color: #43C5DB;
  font-size: 1.5rem;
  font-weight: 700;
  margin-right: 0.85rem;
}


.re-graph-wrap{display:flex;gap:1rem;}
.re-graph-wrap > div:nth-child(1){width:20%;height:auto;}
.re-graph-wrap > div:nth-child(1) .re-box{height:100%;}
.re-graph-wrap > div:nth-child(2){flex:1;}
/* .progress-wrap .progress-con2 {
  flex: 1;
}

.progress-wrap .progress-con2 .amount-con {
  border-radius: 0.5rem;
  overflow: hidden;
  height: 100%;
}

.progress-wrap .progress-con2 .amount-con .amount1 {
  background: #637484;
  color: #fff;
  padding: 0.5rem 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  height: 50%;
  font-weight: 600;
}

.progress-wrap .progress-con2 .amount-con .amount1 .tit {
  font-size: 0.9rem;
}

.progress-wrap .progress-con2 .amount-con .amount1 > strong {
  font-size: 1.3rem;
}

.progress-wrap .progress-con2 .amount-con .amount2 {
  color: #fff;
  display: flex;
  align-items: center;
  font-weight: 600;
  height: 50%;
}

.progress-wrap .progress-con2 .amount-con .amount2 > div {
  padding: 0.3rem 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  height: 100%;
}

.progress-wrap .progress-con2 .amount-con .amount2 > div .tit {
  font-size: 0.9rem;
}

.progress-wrap .progress-con2 .amount-con .amount2 > div > strong {
  font-size: 1.3rem;
}

.progress-wrap .progress-con2 .amount-con .amount2 > div.achieved {
  background: linear-gradient(90deg, #7AC5AF 0.42%, #67A4D1 99.99%);
}

.progress-wrap .progress-con2 .amount-con .amount2 > div.defic {
  background: #AAB3BC;
  flex: 1;
} */

.progress-wrap .progress-con2 {
  width: 70%;
  margin: auto;
  height: 5.6rem;
}
.progress-wrap .progress-con2 .amount-con {
  border-radius: 0.5rem;
  height: 100%;
}
.progress-wrap .progress-con2 .amount-con .amount1 {
  background: #637484;
  color: #fff;
  padding: 0.5rem 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  height: 50%;
  font-weight: 600;
  border-radius: 0.5rem 0.5rem 0 0;
  position: relative;
}
.progress-wrap .progress-con2 .amount-con .amount1 .tit {
  font-size: 0.9rem;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  left: -3rem;
  color: #262626;
}
.progress-wrap .progress-con2 .amount-con .amount1 > strong {
  font-size: 1.3rem;
}
.progress-wrap .progress-con2 .amount-con .amount2 {
  color: #fff;
  display: flex;
  align-items: center;
  font-weight: 600;
  height: 50%;
  border-radius: 0 0 0.5rem 0.5rem;
  overflow: hidden;
}
.progress-wrap .progress-con2 .amount-con .amount2 > div {
  padding: 0.3rem 0;
  height: 100%;
  position: relative;
}
.progress-wrap .progress-con2 .amount-con .amount2 > div .tit {
  font-size: 0.9rem;
  color: #333;
  position: absolute;
}
.progress-wrap .progress-con2 .amount-con .amount2 > div > strong {
  font-size: 1.3rem;
  position: absolute;
  z-index: 1;
}
.progress-wrap .progress-con2 .amount-con .amount2 > div.achieved {
  background: linear-gradient(90deg, #7AC5AF 0.42%, #67A4D1 99.99%);
}
.progress-wrap .progress-con2 .amount-con .amount2 > div.achieved .tit {
  top: 50%;
  left: -3rem;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
}
.progress-wrap .progress-con2 .amount-con .amount2 > div.achieved > strong {
  left: 1rem;
}
.progress-wrap .progress-con2 .amount-con .amount2 > div.achieved > strong.zero {
  display: none;
}
.progress-wrap .progress-con2 .amount-con .amount2 > div.defic {
  background: #AAB3BC;
  flex: 1;
  display: flex;
  justify-content: end;
}
.progress-wrap .progress-con2 .amount-con .amount2 > div.defic .tit {
  top: 50%;
  right: -3rem;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
}
.progress-wrap .progress-con2 .amount-con .amount2 > div.defic > strong {
  right: 1rem;
}

.re-graph-list-gauge {
  display: flex;
  gap: 1.85rem;
}

.re-graph-list-gauge .label {
  color: #444;
  font-size: 0.85rem;
  font-weight: 500;
}

.re-graph-list-gauge .graph-count-vertical {
  position: relative;
  flex: 1;
  background: #E7EAF2;
  padding: 0.2rem;
  border-radius: 0.3rem;
  border: 1px solid #D0D5E5;
  height: 1.5rem;
  vertical-align: middle;
}

.re-graph-list-gauge .graph-count-vertical > em {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  background: linear-gradient(180deg, #7EC7AF 0%, #68A4D4 100%);
  animation: gradient1 5s ease infinite;
  border-radius: 0.3rem 0 0 0.3rem;
  height: 100%;
}

.re-graph-list-gauge .graph-count-vertical > em > .percent-tool {
  position: absolute;
  top: -110%;
  right: -1.25rem;
}

.bdr-st {
  border-radius: 0.3rem !important;
}

.percent-tool {
  width: 2.55rem;
  height: 1.2rem;
  border-radius: 0.3rem;
  border: 1px solid #D5DAE8;
  background: #fff;
  box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.percent-tool > span {
  font-size: 0.8rem;
  font-weight: 800;
}

.percent-tool > span > em {
  font-size: 0.6rem;
  font-weight: 400;
  margin-left: 0.15rem;
}

.percent-tool .triangle {
  display: inline-block;
  width: 8px;
  height: 8px;
  transform: rotate(45deg);
  border-right: 1px solid #D5DAE8;
  border-bottom: 1px solid #D5DAE8;
  background: #fff;
  position: absolute;
  bottom: -5px;
  box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.25);
}

.re-box-wrap2 {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  width: 100%;
}

.re-box2 {
  border: 1px solid #D0D5E5;
  border-radius: 0.6rem;
  flex: 1;
  min-width: 22rem;
  max-width: 22.5rem;
}

.re-box2 .tit {
  text-align: center;
  background: #F4F8FB;
  padding: 0.4rem 0;
  border-radius: 0.5rem 0.5rem 0 0;
  color: #444;
  font-size: 0.9rem;
  font-weight: 600;
  border-bottom: 1px solid #D0D5E5;
}

.re-box2 .inner {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  padding: 0.5rem 1.4rem;
}

.re-box2 .inner > div .label {
  color: #444;
  font-size: 0.85rem;
  font-weight: 500;
}

.re-box2 .inner > div .value {
  background: #E7EAF2;
  border-radius: 0.3rem;
  padding: 0.1rem 0.5rem;
}

.re-box2 .inner > div .value > p {
  display: flex;
  align-items: center;
  justify-content: end;
  color: #555;
  font-size: 0.85rem;
  font-weight: 500;
}

.re-box2 .inner > div .value > p > strong {
  color: #262626;
  font-size: 1.35rem;
  font-weight: 700;
  margin-right: 0.3rem;
}

.t-b-box2 {
  border-top: 2px solid #3BBBCA;
  border-bottom: 1px solid #ccc;
  padding: 1rem 0;
}

.txt-badge {
  display: inline-block;
  border: 1px solid #D0D5E5;
  border-radius: 1.8rem;
  background: #E7EAF2;
  padding: 0.15rem 0.5rem;
  color: #555;
  font-weight: 400;
  font-size: 0.7rem;
  margin: 0 0.5rem;
}

.icon-value-box {
  border: 1px solid #D0D5E5;
  border-radius: 0.6rem;
  overflow: hidden;
  background: #fff;
  padding: 1rem;
  display: grid;
  grid-template-rows: 1fr;
  gap: 1rem;
}

.icon-value-box .inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.icon-value-box .inner .img-tit {
  text-align: center;
  width: 6rem;
  padding: 0.7rem 0;
  border-radius: 0.5rem;
  background: #E7F5F8;
}

.icon-value-box .inner .img-tit img {
  width: 1.8rem;
  height: 1.5rem;
}

.icon-value-box .inner .img-tit > p {
  font-size: 0.9rem;
  font-weight: 700;
}

.icon-value-box .inner > span {
  color: #555;
  font-size: 0.75rem;
  display: flex;
  align-items: center;
}

.icon-value-box .inner > span strong {
  color: #262626;
  font-size: 1.4rem;
  font-weight: 700;
  margin-right: 0.5rem;
}

.icon-value-box .inner:nth-child(2) {
  border-top: 1px dashed #ccc;
  padding-top: 1rem;
}

.re-wrap {
  display: flex;
  gap: 1rem;
}

.re-wrap > div:nth-child(1) {
  width: 20%;
}

.re-wrap > div:nth-child(2) {
  flex: 1;
}

.re-wrap2 {
  display: flex;
  gap: 1rem;
}

.re-wrap2 > div:nth-child(1) {
  width: 38%;
}

.re-wrap2 > div:nth-child(2) {
  /* flex: 1; */
  width: 61%;
}

.re-wrap3 {
  display: flex;
  gap: 1rem;
}

.re-wrap3 > div {
  width: 50%;
}

.re-wrap4 {
  display: flex;
  gap: 1rem;
}

.re-wrap4 > div {
  flex: 1;
  width: calc((100% - (1rem * 3)) / 4);
}

.re-wrap5 {
  display: flex;
  gap: 0.5rem;
}

.re-wrap5 > div:nth-child(1) {
  width: 40%;
}

.re-wrap5 > div:nth-child(2) {
  flex: 1;
}

.up-txt {
  font-size: 0.65rem !important;
  color: #EC6767 !important;
  padding-top: 0.5rem;
  text-align: center;
}

.down-txt {
  font-size: 0.65rem !important;
  color: #4F77C8 !important;
  padding-top: 0.5rem;
  text-align: center;
}

.no-txt {
  font-size: 0.65rem !important;
  color: #4F77C8 !important;
  padding-top: 0.5rem;
  text-align: center;
}

.compare-down {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2rem;
}

.compare-down > span {
  color: #4F77C8;
  font-size: 0.65rem;
}

.compare-down .down-txt {
  padding: 0;
}

.compare-up {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2rem;
}

.compare-up > span {
  color: #EC6767;
  font-size: 0.65rem;
}

.compare-up .up-txt {
  padding: 0;
}

.plus-icon, .minus-icon, .equal-icon {
  color: #555;
  font-size: 0.9rem;
  display: inline-block;
}

.calc-box {
  border: 1px solid #ccc;
  border-radius: 0.5rem;
  padding: 1rem;
}



.calc-box .tit {
  -ms-content-zoom-chaining: 0.9rem;
  font-weight: 600;
  text-align: center;
  border-bottom: 1px dashed #ccc;
  padding-bottom: 0.5rem;
  word-wrap: break-word;
  word-break: keep-all;
}

.calc-box .inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  margin-top: 0.5rem;
}

.calc-box .inner > strong {
  display: block;
  font-size: 0.9rem;
  font-weight: 600;
  word-wrap: break-word;
  word-break: keep-all;
  width: 100%;
  text-align: center;
}

.calc-box.type2 {
  background: #E7F5F8;
  border: none;
}

.calc-box-wrap > div {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.calc-box-wrap > div .calc-box {
  flex: 1;
}

.t-b-box2 .pl-4 > div {
  display: flex;
  gap: 1rem;
}

.t-b-box2 .pl-4 > div > span {
  color: #ccc
}

.t-b-box2 > ul > li {
  border-bottom: 1px solid #ccc;
  padding-top: 20px;
  padding-bottom: 20px;
}

.t-b-box2 .srh-filter2 .srh-tit {
  display: inline-block;
  color: #84878D;
  font-size: 0.7rem;
}

.t-b-box2 > ul > li .completed2 {
  color: #2970CD;
  border: 1px solid #2970CD;
  padding: 0.25rem 1.3rem;
  border-radius: 27.5rem;
  position: relative;
  line-height: 1;
  vertical-align: middle;
  margin: 0 0 0 0.7rem;
}

.t-b-box2 > ul > li .pending2 {
  color: #777777;
  border: 1px solid #DCDCDC;
  padding: 0.25rem 1.3rem;
  border-radius: 27.5rem;
  position: relative;
  line-height: 1;
  vertical-align: middle;
  margin: 0 0 0 0.7rem;
}

.t-b-box {
  border-top: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
  padding: 1rem 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin: 1rem 0;
}

.sort-box {
  border-radius: 0.25rem;
  background: #f5f5f5;
  padding: 0.3rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.sort-box > span {
  color: #333;
  font-weight: 500;
}

.sort-box > span > strong {
  color: #006B93;
  font-weight: 700;
  margin-right: 0.15rem;
}

/* div(flex) */
.flexWrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.flexWrap2 {
  display: flex;
  align-items: center;
  gap: 3rem;
}

.flexWrap2 > div {
  flex: 1;
}

.flexWrap3 {
  display: flex;
  gap: 1rem;
}

.flexWrap5 {
  display: inline-flex;
  justify-content: center;
  align-items: center;
}

.control-box3 {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

.control-box3 .box {
  border-radius: 0.5rem;
  border: 1px solid #D0D5E5;
  background: #fff;
  min-width: 13.8rem;
  max-width: 13.8rem;
  padding: 0.5rem;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.control-box3 .box .tit {
  color: #333;
  font-size: 0.9rem;
  font-weight: 500;
  text-align: center;
}

.control-box3 .box .img7 {
  display: inline-block;
  width: 1.7rem;
  height: 5.75rem;
  background: url(/portal/assets/img/sub/control-img7-off.png) no-repeat center/100%;
  cursor: pointer;
}

.control-box3 .box.on {
  background: #F3F5FA;
}

.control-box3 .box.on .img7 {
  background: url(/portal/assets/img/sub/control-img7-on.png) no-repeat center/100%;
  cursor: pointer;
}

.border-tab-st2 {
  border-radius: 0 0 0.5rem 0.5rem !important;
}

.no-font-weight {
  font-weight: normal !important;
}

.button-end-sys {
  text-align: end;
  margin-bottom: 0.5rem;
}

.b-inner-txt {
  padding-top: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}

.b-inner-txt > span {
  color: #444;
}

.b-inner-txt > span > strong {
  font-weight: 700;
  margin-left: 0.2rem;
}

.b-inner-txt > span:nth-child(1) {
  position: relative;
}

.b-inner-txt > span:nth-child(1):after {
  content: "";
  width: 1px;
  height: 0.55rem;
  display: inline-block;
  background: #373C51;
  position: absolute;
  top: 50%;
  right: -0.5rem;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
}

.ql-container {
  font-size: 0.8rem !important;
  font-family: 'Pretendard', sans-serif !important;
}


/* 25.02.10 */
.goal-set-wrap {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem;
  flex-wrap: wrap;
  background: #FAFAFA;
}
.goal-set-wrap > div:nth-child(1) {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  width: 35%;
}
.goal-set-wrap > div:nth-child(1) .tit-input {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.goal-set-wrap > div:nth-child(1) .tit-input .tit {
  display: inline-block;
  width: 5.5rem;
  color: #444;
  font-size: 0.75rem;
  font-weight: 600;
}
.goal-set-wrap > div:nth-child(1) .tit-input .unit {
  color: #A2A2A2;
  font-size: 0.75rem;
}
.goal-set-wrap > div:nth-child(2) {
  flex: 1;
}

.flexWrap6{display:flex;align-items:center;gap:1rem;}
.flexWrap6 > div:nth-child(1){width:55%;}
.flexWrap6 > div:nth-child(2){flex:1;}


/* 25.03.05 */
.my-info-txt{display:flex;align-items:center;gap:0.5rem;flex-wrap:wrap;}

/* 25.03.13 */
.datePicker-res{display:inline-block;width:100%;}
.datePicker-res .calendar-picker{width:100%;}
.datePicker-res .calendar-input{width:100%;max-width:none;}
.datePicker-res.mn-1{min-width:8rem;}

.l-txt{width:100%;word-wrap:break-word;word-break:keep-all;}


/* 25.03.25 탄소플래너 - 탄소중립 로드맵  */
.cp-rdm-grid{display:flex;flex-direction:column;gap:1rem;min-height:calc(100vh - 9rem);}
.cp-rdm-grid .area2{display:flex;gap:1rem;flex-grow:1;}
.cp-rdm-grid .area2 > div:nth-child(1){width:calc(75% - 0.5rem);display:flex;flex-direction:column;gap:1rem;}
.cp-rdm-grid .area2 > div:nth-child(2){width:calc(25% - 0.5rem);}

.cp-rdm-grid .area2 .area2-1{display:flex;gap:1rem;}
.cp-rdm-grid .area2 .area2-1 > div{flex:1;}
.cp-rdm-grid .area2 .area2-2{display:flex;flex-direction:column;gap:1rem;height:100%;}
.cp-rdm-grid .area2 .area2-2 > div{min-height:30%;}
.cp-rdm-grid .area2 .area2-2 > div:nth-child(1){height:auto;min-height:unset;}

.cp-rdm-grid div[class*=cont]{
  height: 100%;
  padding: 0.75rem 1rem;
  background: #fff;
  border: 1px solid #D0D5E5;
  border-radius: 0.5rem;}
.cp-rdm-sel > li + li{margin-top:.5rem;}
.cp-rdm-sel > li > div{display:flex;align-items:center;gap:.25rem;}
.cp-rdm-sel > li > div > span{display:inline-block;width:15%;}
.cp-rdm-sel > li > div .select-group{flex:1;}

/* 25.04.16 m-list */
.m-list-wrap{padding:0 .5rem;border-top:2px solid #3BBBCA;max-height:11.5rem;overflow-y:auto;}
.m-list-wrap > ul > li + li{margin-top:.25rem;}
.m-list-wrap > ul > li > div > *{height:1.8rem;padding:.4rem 0;display:flex;align-items:center;}
.m-list-wrap > ul > li > div .list-inner{justify-content:space-between;border-bottom:1px dashed #ccc;}
.m-list-wrap > ul > li > div .list-inner:last-child{border-bottom:1px solid #ccc;}
.m-list-wrap > ul > li .date{color:#333;font-size:.7rem;font-weight:500;border-bottom:1px solid #ccc;}
.m-list-wrap > ul > li .list-tit{color:#333;font-size:.7rem;}
.m-list-wrap > ul > li .list-value{color:#555;font-size:.65rem;font-weight:500;display:flex;align-items:center;gap:.25rem;}
.m-list-wrap > ul > li .list-value strong{color:#333;font-size:.8rem;font-weight:600;}
.m-list-wrap > ul > li .no-data{display:flex;align-items:center;justify-content:center;height:3rem;font-size:.7rem;}

.fix-color{color:#D2D6E5 !important;}


/* 25.06.10 추가 */
.box-inner-txt{
  display: flex;
  flex-direction: column;
  gap:.5rem;
  line-height: 1.4;
}
.box-inner-txt .txt-st1 {
  color: #333;
  font-size: 0.9rem;
  font-weight: 600;
}
.box-inner-txt .txt-st2 {
  color: #107F93;
  font-size: 0.9rem;
  font-weight: 600;
}
.box-inner-txt .txt-st3 {
  color: #333;
  font-size: 0.9rem;
  font-weight: 400;
}
.box-inner-txt .txt-st4 {
  background: linear-gradient(90deg, #00B073 0%, #0C75CA 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 1.4rem;
  font-weight: 800;
}
.box-inner-txt .txt-st5 {
  color: #107F93;
  font-size: 1rem;
  font-weight: 700;
}
.box-inner-txt .txt-st6 {
  color: #333;
  font-size: .8rem;
  font-weight: 400;
}
.box-inner-txt .txt-st7 {
  color: #107F93;
  font-size: .8rem;
  font-weight: 400;
}
.box-inner-txt .inner-box-wrap {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  height: 3.35rem;
  padding: 0.5rem;
  border-radius: 0.5rem;
  background: #F1F2F7;
}
.box-inner-txt .inner-box-wrap > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex: 1;
  height: 100%;
  border-radius: 0.5rem;
  background: #373C51;
  padding: 0 1rem;
}
.box-inner-txt .inner-box-wrap > div .tit {
  color: #fff;
  font-size: 0.9rem;
  font-weight: 500;
}
.box-inner-txt .inner-box-wrap > div .txt {
  color: #fff;
  font-size: 0.9rem;
  font-weight: 500;
}
.box-inner-txt .inner-box-wrap > div .txt > strong {
  background: linear-gradient(90deg, #91E7D1 0%, #7CBFEE 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-right: 0.5rem;
  font-size: 1rem;
  font-weight: 700;
}

.box-inner-txt .inner-box-wrap.type2{margin-bottom: 1rem;}

.box-inner-txt .inner-box-wrap.type2 > div{
  background: #fff;
}
.box-inner-txt .inner-box-wrap.type2 > div .tit{
  color: #333;
}
.box-inner-txt .inner-box-wrap.type2 > div .txt{
  color: #333;
}
.box-inner-txt .inner-box-wrap.type2 > div .txt > strong{
  background: linear-gradient(90deg, #00B073 0%, #0C75CA 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-right: 0.5rem;
  font-size: 1rem;
  font-weight: 700;
}

/* error */
.error-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100vh;
  background: #F1F2F7;
}
.error-wrap > div {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}
.error-wrap > div .txt1 {
  font-size: 1.5rem;
  font-weight: 700;
}
.error-wrap > div .txt2 {
  font-size: 1rem;
  word-wrap: break-word;
  word-break: keep-all;
}
.error-wrap > div .btn-home {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  width: 60%;
  height: 2rem;
  border: 1px solid #DCDCDC;
  background: #fff;
  font-size: 0.8rem;
  color: #333;
  transition: all 0.3s;
}
.error-wrap > div .btn-home i {
  color: #777;
}
.error-wrap > div .btn-home:hover {
  background: #DCDCDC;
}


/* responsive */

/* // */

/* respoinsive */

/* 1800px */
@media screen and (max-width: 1800px) {
  /*(ej) 240715*/
  .col-wrap.md-100 {
    display: block;
  }

  .col-wrap.md-100 [class^=col-md] {
    width: 100%;
  }

  /*(ej) 240716*/
  .icon-box-flex3.type2 {
    flex-flow: row wrap;
  }

  .icon-box-flex3.type2 .box-style1 {
    width: 100%;
    min-height: auto;
  }

  .icon-box-flex3.type2 .box-style1:nth-child(2) .img img {
    width: auto;
  }
}
/* //1800px */

/* 1600px */
@media screen and (max-width: 1600px) {
  /*공급 자원 현황 (산단 전체)(ej) 240715*/
  .icon-box-wrap8 .titFlex {
    flex-flow: row wrap;
  }

  .icon-box-wrap8 .titFlex > span {
    display: block;
    width: 100%;
    text-align: center;
  }

  .icon-box-wrap8 .titFlex > ul {
    margin: 0 !important;
    width: 100%;
  }

  .icon-box-wrap8 .titFlex > ul > li {
    width: 50%;
  }

  .icon-box-wrap8 .titFlex > ul > li > em {
    float: right;
  }

  .icon-box-wrap8 > ul > li {
    width: 100%;
  }

  .icon-box-wrap10 > ul {
    height: auto;
    flex-flow: row wrap;
    overflow: hidden;
  }

  .icon-box-wrap10 > ul > li {
    width: 49%;
    margin: 0.2rem 0;
  }
}
/* //1600px */

/* 1760px */
@media screen and (max-width: 1760px){
  .tab-st2.res2 > li {width: 100%;}
  .tab-st2[class*=res2] > li > a{background:#fff;border-radius:.5rem;border:1px solid #D0D5E5;font-size:.8rem;font-weight:400; color:#666;}
  .tab-st2[class*=res2] > li.on > a{font-weight:600;}
  .tab-st2[class*=res2] > li.on > a:before{background:linear-gradient(90deg, #00B073 0%, #0C75CA 100%);}
  .tab-st2[class*=res2] > li.on > a > span{color:#fff;background:none;-webkit-background-clip:unset;-webkit-text-fill-color:unset;}
  .tab-st2[class*=res2] > li + li{margin-top:0.25rem;}
  .tab-st2[class*=res2] > li:last-child{margin-bottom:0.75rem;}

}
/* //1760px */

/* 1200px */
@media screen and (max-width: 1200px) {
  /* 탭 : 개수 지정 */
  .Tab_w20 > li {
    width: 25%;
  }

  .Tab_w10 > li {
    width: 25%;
  }




  /* box style */
  .box-style6 {
    display: block;
  }

  .box-style6 .right.box_r {
    width: 100%;
  }

  .box-style6 .left, .box-style6 .right {
    border-radius: 0.7rem;
    overflow: hidden;
  }

  .box-style6 .left .box, .box-style6 .right .box {
    padding: 0.5rem;
  }

  .box-style6 .left .box.last, .box-style6 .right .box.last {
    width: 100%;
  }

  .box-style6 .left .box .txt, .box-style6 .right .box .txt {
    padding: 0.1rem 1rem;
  }

  .left {
    margin: 0 0 0.5rem 0;
    width: 100%;
  }

  .right {
    display: block;
  }

  .right .box {
    width: 50%;
    display: inline-block;
    float: left;
  }

  .right .box:nth-child(n+3) {
    border-top: 1px dashed #ccc;
  }

  .right .box:nth-child(2n), .right .box:last-child {
    border-right: 0;
  }

  .box-style6.type2 .right {
    width: 100%;
  }

  .box-style6.type2::before {
    display: none;
  }

  /* 타이틀(tit + btns)
  .tit-btns-wrap {
    display: block;
  } */

  .tit-btns-wrap > .flexWrap {
    display: inline-block;
  }

  .tit-btns-wrap > .al, .tit-btns-wrap .ar {
    margin-top: 0.3rem;
  }

  /* graph-typeA3 */
  /* tit + legend */
  .tit-flex > span {
    white-space: nowrap;
  }

  .tit-flex > div {
    font-size: 0.7rem;
  }

  /* select */
  /* gridtbl1 */
  .gridWrap {
    max-width: 100%;
    height: 100vh;
    box-sizing: border-box;
    overflow-x: auto;
  }

  .gridWrap::-webkit-scrollbar {
    width: 0.15rem;
  }

  .gridWrap::-webkit-scrollbar-thumb {
    border: 0;
    border-radius: 0.5rem;
    background: #d8d8d8;
    background-clip: padding-box;
  }

  .gridWrap::-webkit-scrollbar-track {
    border-radius: 0.5rem;
    background: #eee;
  }

  .gridWrap #gridTbl1 {
    overflow-x: auto;
  }

  .gridWrap #gridTbl1 .tui-grid-rside-area {
    width: 100%;
    height: 100%;
  }

  .gridWrap #gridTbl1 .tui-grid-cell-header {
    white-space: nowrap;
    overflow-x: auto;
  }

  .gridWrap #gridTbl1 .tui-grid-row-odd {
    white-space: nowrap;
    overflow-x: auto;
  }

  /* tab-st4 -> select */
  .tab-st4 {
    display: none;
  }

  .tab-st-box4 .select-group {
    display: block;
    width: 100%;
  }

  /*재생E 계약 현황(ej) 240715*/
  .icon-box-wrap11 .cnt-tit {
    flex-flow: row wrap;
  }

  .icon-box-wrap11 .cnt-tit > strong {
    margin-bottom: 0.2rem;
  }

  .icon-box-wrap11 .cnt-tit > ul {
    width: 100%;
  }
}
/* //1200px */



/* 1024px */
@media screen and (max-width: 1024px) {
  /* icon-box-flex3추가 (ej) 240715*/
  .icon-box-flex3 .box-style1 {
    min-height: 14rem;
    align-content: center;
  }

  .icon-box-flex3 .box-style1 .img img {
    position: relative !important;
    left: auto;
    bottom: auto;
  }

  .icon-box-flex3 .box-style1:nth-child(2) {
    width: 20%;
  }

  .icon-box-flex3 .box-style1:nth-child(2) .tit, .icon-box-flex3 .box-style1:nth-child(2) .img {
    text-align: center;
  }

  .icon-box-flex3 .box-style1 ul {
    display: inline-block;
    width: 100%;
  }

  .icon-box-flex3 .box-style1 ul li {
    margin: 0.25rem;
    width: calc(50% - 0.5rem);
    float: left;
  }

  .icon-box-flex3 .box-style1.m-h {
    min-height: 21rem;
  }

  /*(ej) 240716*/
  .box-style10 {
    flex-flow: row wrap;
  }

  .box-style10 .box {
    width: 49%;
  }

}
/* //1024px */

/* 900px */
@media (max-width:900px){
  .tab-st2.res1 > li {width: 100%;}
  .tab-st2[class*=res1] > li > a{background:#fff;border-radius:.5rem;border:1px solid #D0D5E5;font-size:.8rem;font-weight:400; color:#666;}
  .tab-st2[class*=res1] > li.on > a{font-weight:600;}
  .tab-st2[class*=res1] > li.on > a:before{background:linear-gradient(90deg, #00B073 0%, #0C75CA 100%);}
  .tab-st2[class*=res1] > li.on > a > span{color:#fff;background:none;-webkit-background-clip:unset;-webkit-text-fill-color:unset;}
  .tab-st2[class*=res1] > li + li{margin-top:0.25rem;}
  .tab-st2[class*=res1] > li:last-child{margin-bottom:0.75rem;}
}
/* //900px */


/* 769px */
@media (min-width: 769px) {
  /* 행추가 */
  div[class*=tbl-st] table .add-row-wrap .add-row:hover:before {
    transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
  }
  /* 캘린더 테이블 */
  #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);
  }

  /* split형 : 리스트 목록 */
  .tit-list ul > li > div > button:hover > i {
    transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
  }

  /* spliter 컨트롤 */
  .spliter-nav [class^=spliter-arr]:hover {
    border-color: #c4c4c4;
  }

  .spliter-nav [class^=spliter-arr]:hover i {
    transform: translateX(-0.1rem);
    -webkit-transform: translateX(-0.1rem);
    -moz-transform: translateX(-0.1rem);
  }

  .spliter-nav .spliter-arrL:hover i {
    transform: translateX(0.1rem);
    -webkit-transform: translateX(0.1rem);
    -moz-transform: translateX(0.1rem);
  }

  /* 탭 */
  .tab-st {
    /* 탭 : 1차 탭 */
    /* 탭 :2차 탭 */
  }

  .tab-st1 li:not(.on) a:hover {
    color: #333;
    font-weight: 700;
  }

  .tab-st2 li.on a:hover, .tab-st2 li.on a:focus, .tab-st2 li.on a:hover:after, .tab-st2 li.on a:focus:after {
    color: #22499d;
    font-weight: 600;
  }

  /* 탭 :리스트 */
  .tab-list li a:hover, .tab-list li a:focus {
    color: #333;
    background: #f5f5f5;
    border-color: #999;
  }

  /* 버튼 : 기본 */
  [class^=btn-style]:not(.btn-style-disable):hover {
    background: transparent;
  }

  .btn-style1:not(.btn-style-disable):hover {
    background: #DCDCDC;
    color: #000;
  }

  .btn-style2:not(.btn-style-disable):hover {
    color: #00B073;
    border: 1px solid;
  }

  .btn-style2:not(.btn-style-disable):hover:before {
    opacity: 1;
  }

  .btn-style3:not(.btn-style-disable):hover {
    color: #AAABB1;
  }

  .btn-style4:not(.btn-style-disable):hover {
    color: #60616B;
  }

  .btn-style5:not(.btn-style-disable):hover {
    color: #83858F;
  }

  .btn-style6:not(.btn-style-disable):hover {
    color: #7B99C6;
  }

  .btn-style7:not(.btn-style-disable):hover {
    color: #59C1A1;
  }

  .btn-style8:not(.btn-style-disable):hover {
    color: #4780A7;
  }

  .btn-style9:not(.btn-style-disable):hover {
    border-color: #83858F;
  }

  .btn-style10:not(.btn-style-disable):hover {
    color: #7ACAD3;
  }

  .btn-style11:not(.btn-style-disable):hover {
    color: #C66B00;
  }

  .btn-style12:not(.btn-style-disable):hover {
    color: #3BBBCA;
  }

  .btn-style-disable:hover {
    cursor: default !important;
  }

  /* more btn */
  .more-btn:hover > i {
    transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
  }

  /* circle btn */
  .circle-btn-text:hover {
    background: #fff;
    color: #222;
  }

  .circle-btn-icon:hover {
    background: #fff;
    color: #222;
  }

  /** 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, #7BC6AB 0%, #64A0D3 10%);
    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;
  }

  /* select required - HJ */
  select[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;
  }

  /* serch form */
  .srh-frm button:hover {
    color: #7BC6AB;
  }

  .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);
  }

  /* datepicker calendar custom */
  .ui-datepicker td:not(.ui-datepicker-today, .ui-datepicker-current-day) a:hover {
    background: #EBEBEB !important;
    color: #777 !important;
  }

  .ui-datepicker select.ui-datepicker-year,
  .ui-datepicker select.ui-datepicker-month {
    margin-right: 0.25rem;
    border: 1px solid #DCDCDC;
  }

  /* tab + box */
  .tab-box .tb-list-box .tb-icon-lst > li a:hover > .img > img {
    transform: rotateY(180deg);
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
  }

  .tab-box .tb-list-box .tb-icon-lst > li a:hover > .txt:after {
    color: #3BBBCA;
  }

  .tab-box .tb-list-box .tb-txt-lst > li > ul > li > a:hover {
    color: #3BBBCA;
    font-weight: 600;
  }

  .tab-box .tb-list-box .tb-txt-lst > li > ul > li > a:hover:before {
    width: 100%;
  }

  .tab-box .tb-list-box .tb-txt-lst > li > a:hover > span:after {
    color: #3BBBCA;
  }

  [class^=srh-filter] .keyword > ul > li > a:hover {
    border-color: #3BBBCA;
  }
}
/* //769px */

/* 768px */
@media screen and (max-width: 768px) {
  /* 탭 : 개수 지정 */
  .Tab_w { /*240715(ej)*/
  }

  .Tab_w20 > li {
    width: 33%;
  }

  .Tab_w15 > li {
    width: 33%;
  }

  .Tab_w10 > li {
    width: 33%;
  }

  /* tab 높이 지정 */
  /* ul[class^=tab-st] > li > a {height:1.75rem;} */
  


  .tbl-st-row table {
    display: block;
    table-layout: unset;
  }

  .tbl-st-row table tbody, .tbl-st-row table tfoot {
    display: block;
  }

  .tbl-st-row table tbody tr, .tbl-st-row table tbody th, .tbl-st-row table tbody td, .tbl-st-row table tfoot tr, .tbl-st-row table tfoot th, .tbl-st-row table tfoot td {
    display: block;
    height: auto;
  }

  .tbl-st-row table tbody th, .tbl-st-row table tfoot th {
    border-right: 0;
  }

  .tbl-st-row .attach-file3 {
    display: block;
  }

  .tbl-st-row .attach-file3 > div {
    width: 100%;
    margin-bottom: 0.5rem;
  }

  /* 탭 : 순차적 */
  .tab-order-st1 {
    display: block;
    overflow: hidden;
  }

  .tab-order-st1 > li {
    margin-bottom: 0.5rem;
    width: 46%;
    float: left;
  }

  .tab-order-st1 > li + li:before {
    left: -0.85rem;
  }

  .tab-order-st1 > li:nth-child(1n) {
    margin-right: 4%;
  }

  /* 리스트 : 가로 나열 */
  .li-w30 > li, .li-w25 > li, .li-w20 > li {
    width: 50% !important;
  }

  /*테이블 스크롤*/
  .scroll-gr {
    overflow-x: auto !important;
  }

  .scroll-gr > table {
    min-width: 800px;
  }

  /*검색창 넓이값*/
  [class*=srh-filter] {
    display: block;
    /*240715(ej)*/
  }

  /* 타이틀(tit + btns) */
  .tit-btns-wrap {
    display: flex;
    justify-content: end;
    flex-wrap: wrap;
  }
  .tit-btns-wrap > [class^="titT"]{width:100%;flex:none}


  /* [class*=srh-filter] .calendar-picker, [class*=srh-filter] .select-group, [class*=srh-filter] input[class*=InpSel], [class*=srh-filter] textarea[class*=InpSel], [class*=srh-filter] [class*=InpSel] select, [class*=srh-filter] .disIb {
    margin: 0.1rem 0;
    width: 100% !important;
  }

  [class*=srh-filter] .calendar-input {
    width: 100%;
    max-width: none;
  }

  [class*=srh-filter] [class*=btn-style] {
    display: block;
  }

  [class*=srh-filter] > ul > li {
    width: 100%;
  }
  [class*=srh-filter] > ul > li + li{margin-top:.25rem;}

  [class*=srh-filter] > ul > li .srh-tit {
    display: block;
  }

  [class*=srh-filter] > ul > li .srh-cont {
    width: 100%;
  }
  [class*=srh-filter] [class^="btn-style"]{
    margin-top:0.5rem;
    width: 100%;
  } */

  /*재생E 계약 현황(ej) 240715*/
  .icon-box-wrap11 .cnt-tit > ul {
    position: relative;
  }

  .icon-box-wrap11 .cnt-tit > ul > li {
    margin: 0.2rem 0;
    padding: 0;
    width: 100%;
  }

  .icon-box-wrap11 .cnt-tit > ul > li:last-child {
    width: 100%;
  }

  .icon-box-wrap11 .cnt-ani > [class^=tg]:not(.tg-ani) {
    font-size: 0.8rem;
  }

  .icon-box-wrap11 .cnt-ani > [class^=tg]:not(.tg-ani):before {
    width: 100%;
    background-size: 80% auto;
  }

  .icon-box-wrap11 .cnt-ani .tg2:not(.tg-ani):before {
    width: 100%;
    background-size: 80% auto;
  }

  /* 보고서 */
  .srh-filter .click-item-wrap {
    width: 100%;
    flex-wrap: wrap;
  }
  .srh-filter .click-item-wrap > .click-item {
    text-align: center;
    width: 48.4%;
  }
  .srh-filter .click-item-wrap > .click-item > span {
    white-space: nowrap;
  }
  .report-tit-wrap {
    flex-wrap: wrap;
    position: relative;
  }
  .report-tit-wrap > div:nth-child(1) .logo {
    width: 6rem;
  }
  .report-tit-wrap > div:nth-child(1) > span {
    font-size: 1.2rem;
  }
  .report-tit-wrap > div:nth-child(2) .btn-style2 {
    position: absolute;
    top: 0;
    right: 0;
    width: 4.5rem;
    height: 1.5rem;
    line-height: 1.5rem;
    padding: 0;
  }
  .report-tit-wrap > div:nth-child(2) .btn-style2 i {
    margin: 0;
  }
  .report-tit-wrap > div:nth-child(2) .btn-style2 > span > span {
    display: none;
  }
  .posting-status {
    flex-wrap: wrap;
  }
  .posting-status > li {
    padding: 0;
    width: 100%;
  }
  .posting-status > li:after {
    display: none;
  }
  .re-box-wrap {
    width: 100%;
    flex-wrap: wrap;
  }
  .re-box-wrap .re-box {
    min-width: 100%;
  }

}
/* //768px */


/* 640px */
@media screen and (max-width: 640px) {
  /* 탭 : 개수 지정 */
  .Tab_w30 > li {
    width: 50%;
  }

  .Tab_w20 > li {
    width: 50%;
  }

  .Tab_w10 > li {
    width: 50%;
  }

  .tab-st1 > li, .tab-st2 > li {
    width: 50%;
  }

  .tab-st1 > li > a, .tab-st2 > li > a {
    width: 100%;
  }

  .tab-st2.res3 > li {width: 100%;}
  .tab-st2[class*=res3] > li > a{background:#fff;border-radius:.5rem;border:1px solid #D0D5E5;font-size:.8rem;font-weight:400; color:#666;}
  .tab-st2[class*=res3] > li.on > a{font-weight:600;}
  .tab-st2[class*=res3] > li.on > a:before{background:linear-gradient(90deg, #00B073 0%, #0C75CA 100%);}
  .tab-st2[class*=res3] > li.on > a > span{color:#fff;background:none;-webkit-background-clip:unset;-webkit-text-fill-color:unset;}
  .tab-st2[class*=res3] > li + li{margin-top:0.25rem;}
  .tab-st2[class*=res3] > li:last-child{margin-bottom:0.75rem;}

  .tab-st3 > li {
    width: 100%;
  }

  .tab-st3 > li + li {
    margin-top: 0.5rem;
  }

  .tab-st3 > li:first-of-type > a {
    border-radius: 0.5rem;
  }

  .tab-st3 > li:last-of-type > a {
    border-radius: 0.5rem;
  }

  /* box style */
  .box-style6 {
    /*(ej)240716*/
  }

  .box-style6 .left .box .txt span.num, .box-style6 .right .box .txt span.num {
    font-size: 1.4rem;
  }

  .right .box {
    width: 100%;
    border-right: 0;
  }

  .right .box:nth-child(n+2) {
    border-top: 1px dashed #ccc;
  }

  .box-style6.type3 .right .box {
    min-height: auto;
  }

  .box-style6.type3 .right .box .txt.empty {
    margin-top: 0 !important;
  }

  /*공급 자원 현황 (산단 전체)(ej) 240715*/
  .icon-box-wrap8 .titFlex > ul > li {
    width: 100%;
  }

  .icon-box-wrap8 .titFlex > ul > li + li::before {
    display: none;
  }

  .icon-box-wrap10 > ul > li {
    width: 100%;
    margin: 0.4rem 0;
  }

  /* icon-box-flex3추가 (ej) 240715*/
  .icon-box-flex3 {
    display: block;
  }

  .icon-box-flex3 .box-style1 {
    width: 100% !important;
    min-height: auto;
  }

  .icon-box-flex3 .box-style1:first-child::after {
    content: "\f103";
    top: auto;
    bottom: -1.5rem;
    right: calc(50% - 0.5rem);
  }

  .icon-box-flex3 .box-style1:nth-child(2) {
    margin-top: 1.5rem;
    width: 100%;
  }

  .icon-box-flex3 .box-style1:nth-child(2) .tit, .icon-box-flex3 .box-style1:nth-child(2) .img {
    text-align: center;
  }

  .icon-box-flex3 .box-style1:nth-child(2) .img img {
    display: block;
    margin: 0 auto;
    width: 3.5rem;
  }

  .icon-box-flex3 .box-style1.m-h {
    min-height: auto;
  }
}
/* //640px */

/* 460px */
@media screen and (max-width: 460px) {
  /* 탭 : 개수 지정 */
  .Tab_w30 > li, .Tab_w20 > li, .Tab_w10 > li {
    width: 100%;
  }

  .tab-st1 > li {
    width: 100%;
  }

  /* 임시 */
  .tab-st1.res1 > li {
    width: 50% !important;
  }

  .tab-st2 > li{
    width: 100%;
  }

  .tab-st1 li a > span{word-break:keep-all;word-wrap:break-word;}

  /* tab border */
  ul[class^=tab-st1] {border:1px solid #D0D5E5;}
  ul[class^=tab-st1] > li{border-bottom:1px solid #ccc;}
  

  /* 탭 : 순차적 */
  .tab-order-st1 > li {
    width: 100%;
  }

  .tab-order-st1 > li + li:before {
    display: none;
  }

  .tab-order-st1 > li:nth-child(1n) {
    margin-right: 0;
  }
}
/* //460px */


/* 추가 */

/* 1024 서치 필터 px */
@media screen and (max-width:1024px){
  .srh-filter2 > ul{display:flex;flex-wrap:wrap;flex:none;width:100%;}
  .srh-filter2 > ul > li{width:100%;padding:0;}
  /* .srh-filter2 > ul > li .srh-tit{display:none;} */
  [class*=srh-filter] .calendar-picker {display:flex;align-items:center;flex-wrap:wrap;}
  [class*=srh-filter] .dateBtn.res1{margin: 0.1rem 0 0.35rem 0;}
  [class*=srh-filter] .dateBtn{margin:0;}
  [class*=srh-filter] .dateBtn{display:flex;flex-wrap:wrap;}
  [class*=srh-filter] .dateBtn.res2 [class*=btn-style] {width:calc((100% - 0.25rem) / 2);margin-top:0;}

  [class*=srh-filter] .search-wrap{width:100%;}
  [class*=srh-filter] [class*=mg]{margin-left:0 !important;margin-right:0 !important;}

  [class*=srh-filter] .calendar-picker, [class*=srh-filter] .select-group, [class*=srh-filter] input[class*=InpSel], [class*=srh-filter] textarea[class*=InpSel], [class*=srh-filter] [class*=InpSel] select, [class*=srh-filter] .disIb {
    margin: 0.1rem 0;
    width: 100% !important;
  }

  [class*=srh-filter] .calendar-input {
    width: 100%;
    max-width: none;
  }

  [class*=srh-filter] [class*=btn-style] {
    display: block;
  }

  [class*=srh-filter] > ul > li {
    width: 100%;
  }
  [class*=srh-filter] > ul > li + li{margin-top:.25rem;}

  [class*=srh-filter] > ul > li .srh-tit {
    display: block;
  }

  [class*=srh-filter] > ul > li .srh-cont {
    width: 100%;
  }

  [class*=srh-filter] > ul > li .srh-cont {display:flex;align-items:center;flex-wrap:wrap;}
  [class*=srh-filter] > ul > li .srh-cont .srh-tit{width:100%;}
  [class*=srh-filter] [class^="btn-style"]{
    margin-top:0.5rem;
    width: 100%;
  }

  
  
}

@media all and (min-width: 340px) and (max-width: 767px) {
  /* 설비현황 */
  .inverter-box .box {
    width: 100%;
    max-width:none;
    flex:none;
  }
  .board > li {
    flex-wrap: wrap;
  }
  .board > li strong {
    width: 100%;
  }
  .board > li span {
    width: 100%;
  }

  .txt-break > p{word-break: keep-all; word-wrap: break-word;}

  
  /* page-tit */
  .page-tit {
    position: relative;
    padding-top: 2rem;
    z-index:2;
  }
  .page-tit .weather-box {
    display: none;
  }
  .page-tit .breadcrumb {
    position: absolute;
    top: -0.5rem;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: center;
    z-index: 3;
  }
  .page-tit .breadcrumb:before{content:"";width:calc(100% + 1rem);position:absolute;height:3rem;top:-1rem;z-index:-1;background-color:#E1E4EE;}
}

/* 1800px */
@media screen and (max-width:1800px){
  div[class*=tbl-st]{overflow-x:auto;white-space:nowrap;}
  div[class*=tbl-st] table{table-layout:auto;}
  div[class*=tbl-st].n-nowrap {white-space:normal;}
  div[class*=tbl-st].n-nowrap table{table-layout:fixed;overflow-x:auto;}
  /* 보고서 - 탄소중립현황 */
  .re-wrap4{flex-wrap:wrap;}
  .re-wrap4 > div {flex:none;width:calc((100% - (1rem * 2)) / 3);}

}

/* 1700px */
@media screen and (max-width:1700px) {
  /* RE100 실적현황 */
  .box-graph2 > li > ul > li.num > strong{
    word-break:break-all;
  }
  /* PPA거래 대상조회 상세 */
  .tab-order-st3{gap:3rem;}
  .tab-order-st3 > li:after{right:-1.5rem;}
  .tab-order-st3 > li:nth-child(3) > div:before{left:-2.6rem;}
  .tab-order-st3 > li:nth-child(4) > div:before{content:"E-Market\A플랫폼";white-space:pre-line;left:-2.9rem;}
  /* .tab-order-st3 > li{width:calc((100% - 7rem) / 2);} */

  /* 부전거래 신고 - 신고하기 팝업 */
  .layer-wrap.l-mw1{min-width:none;width:80%;}

  /* 탄소플래터 - 탄소중립 로드맵 */
  .cp-rdm-grid .area2{flex-grow:unset;flex-wrap:wrap;}
  .cp-rdm-grid .area2 > div:nth-child(1){width:100%;}
  .cp-rdm-grid .area2 > div:nth-child(1) .cont{min-height: 20rem;}
  .cp-rdm-grid .area2 > div:nth-child(2){width:100%;}
}

/* 1600px */
@media screen and (max-width:1600px) {
  /* 생산소비 - ESS 현황 */
  .ess-gener-box .ess-box2, 
  .ess-gener-box .ess-box3{flex:none;width:100%;}
  .ess-gener-box [class^="inner"]{flex:none;width:50%;}

  /* 정산관리 */
  .icon-box-wrap6 .year-tit{height:auto;}
  .icon-box-wrap6 > ul{flex-wrap:wrap;gap:1rem;}
  .icon-box-wrap6 > ul > li{flex:none;width:calc((100% - 1rem) / 2);}

  /* 탄소플래너 - 탄소중립 로드맵 */
  .col-wrap.cp-box-res2{flex-wrap:wrap;}
  .col-wrap.cp-box-res2 [class*=col-md]{width:50%;}

  .col-wrap.cp-box-res2 .tb-box2 > ul > li > span{width:auto;max-width:30%;flex:1;}
  .col-wrap.cp-box-res2 .tb-box3 > ul > li > span{width:auto;max-width:30%;flex:1;}
  .col-wrap.cp-box-res2 .tb-box4 > ul > li > span{width:auto;max-width:30%;flex:1;}


}

/* 1500px */
@media screen and (max-width:1500px){
  .flexInput.res2 input{min-width:8rem;}
}

/* 1400px */
@media screen and (max-width:1400px){
  /* RE100 포트폴리오 */
  .lnk-lst{flex-wrap:wrap;}
  .lnk-lst > li{flex:none;width:100%;}

  /* RE100 이행수단 실적 */
  .box-graph2 > li > ul{width:55%;}

  /* 탄소 감축목표 관리 */
  .goal-set-wrap > div:nth-child(1){width:100%;}
  .box-text-style3 > ul{grid-template-columns: 1fr;}

  /* 탄소-다배출원 분석 */
  .icon-box-wrap9 ul{flex-wrap:wrap;gap:1rem;}

  /* REC 시세조회 */
  .icon-box-wrap5{flex-wrap:wrap;}
  .icon-box-wrap5 .icon-box1{width:100%;flex:none;}

  .icon-box-wrap5 .icon-box2{width:100%;flex:none;}


  /* 보고서 */
  .re-wrap2{flex-wrap:wrap;}
  .re-wrap2 > div:nth-child(1){width:100%;}
  .re-wrap2 > div:nth-child(2){width:100%;}

  .tui-grid-rside-area{overflow-x: scroll !important;}

  /* SCOPE별 배출량 조회 */
  .re-graph-wrap{flex-wrap:wrap;}
  .re-graph-wrap > div:nth-child(1){width:100%;}
  .re-graph-wrap > div:nth-child(2){flex:none;width:100%;}

  /* PPA거래 대상조회 상세 */
  .tab-order-st3{flex-wrap:wrap;}
  .tab-order-st3 > li{width:100%;}
  .tab-order-st3 > li > div{justify-content:center;}
  .tab-order-st3 > li:after{content:"\f107";right:50%;top:unset;bottom:-3rem;}
  .tab-order-st3 > li:nth-child(3) > div:before {left:0;top:-2rem;}
  .tab-order-st3 > li:nth-child(4) > div:before {left:0;top:-2.5rem;}

  .box-graph7{flex-wrap:wrap;height:auto;}
  /* .box-graph7 > li:nth-of-type(3){flex-direction:row;}
  .box-graph7 > li:nth-of-type(3) > div{flex:1;height:auto;} */
  /* .box-graph7 > li:nth-last-of-type(3) > div{height:auto;} */
  .box-graph7 > li:nth-of-type(3):before {left:50%;top:-1.25rem;}
  .box-graph7 > li:nth-of-type(3) > div > div{height:auto;padding-top:.75rem;}

  /* 정산조정 신청 */
  .box-style12 .txt{height:auto;}
  .box-style12 .txt .list-st1{display:flex;flex-wrap:wrap;padding:0.5rem;}
  .box-style12 .txt .list-st1 > li{width:100% !important;padding-top:0;margin-bottom:0.25rem !important;word-wrap:break-word;word-break:keep-all;}

  /* 보고서 - RE100 */
  .progress-wrap{flex-wrap:wrap;height:auto;}
  .progress-wrap .progress-con1{width:100%;grid-template-rows:none;grid-template-columns:repeat(2, 1fr);height:auto;}
  .progress-wrap .progress-con2{width:83%;margin:auto;}

  .re-wrap > div:nth-child(1){width:35%;}
  .re-box-wrap2 .re-box2{width:calc((100% - 1rem) / 2);flex:none;min-width:unset;max-width:none;}

  /* 보고서 - 탄소중립 현황 */
  .re-wrap4{flex-wrap:wrap;}
  .re-wrap4 > div {flex:none;width:calc((100% - (1rem * 1)) / 2);}

  /* 보고서 - 장외거래 */
  .re-wrap3.res2{flex-wrap:wrap;}
  .re-wrap3.res2 > div{width:100%;}

  .calc-box-wrap > div .calc-box{flex:none;min-width:20%;}
  .calc-box-wrap > div .calc-box.type2{flex:1;}

  /* 설비제어 - 제어요청 */
  .control-box .box{
    flex:none;
    min-width: calc((100% - (1rem * 2)) / 3);
  }
}


  

/* 1200px */
@media screen and (max-width:1200px){
  /* 생산소비 - 시간별 사용량 조회 */
  .tui-grid-content-area{overflow-x:auto;}
  /* .tui-grid-header-area{height:auto !important;} */
  /* RE100 이행수단 실적 */
  .box-graph2 > li{flex-wrap: wrap;}
  .box-graph2 > li > ul{width:100%;padding-right:0;}
  .box-graph2 > li > ul > li .num > em {width:10%;}
  .box-graph2 > li > ul:before{display:none;}
  .box-graph2 > li .graph{width:100%;padding-left:0;padding-top:1rem;}
  
  .box-style6 .right.res1{display:flex;flex-wrap:wrap;}

  /* PPA 대상조회 */
  .selected-box{gap:.5rem;}
  .selected-box .btn-style1{width:100%;}

  /* 배출권 거래 현황 */
  .step-wrap{flex-wrap:wrap;}
  .step-wrap .step-box{flex:none;width:calc((100% - (2.5rem * 1)) / 2);}
  .step-wrap .step-box:nth-child(2):after{display:none;}

  /* 리포트 */
  .report-tit-wrap {flex-wrap:wrap;position:relative;}
  .report-tit-wrap > div:nth-child(1){width:100%;}
  .report-tit-wrap > div:nth-child(2) .btn-style2{position:absolute;top:0;right:0;}

  /* REC 시세조회 */
  .icon-box-wrap5 .icon-box2.type3{height:auto;}
  .icon-box-wrap5 .icon-box2 > div {flex-wrap:wrap;}
  .icon-box-wrap5 .icon-box2 > div .tit-value{flex:none;width:100%;border:none;}
  .icon-box-wrap5 .icon-box2.type3 > div .tit-value .tit{background:linear-gradient(90deg, #00B073 0%, #0C75CA 100%);}

  /* 보고서 - RE100 */
  .re-wrap{flex-wrap:wrap;}
  .re-wrap > div:nth-child(1){width:100%;}
  .re-wrap > div:nth-child(2){width:100%;}  
  
  /* 탄소플래너 - 탄소중립로드탭 */
  .col-wrap.cp-box-res1{flex-wrap:wrap;}
  .col-wrap.cp-box-res1 [class*=col-md]{width:100%;}


  /* RE100플래너 목표관리 */
  .box-inner-txt > p{word-wrap:break-word;word-break:keep-all;}
  .box-inner-txt .inner-box-wrap{flex-wrap:wrap;gap:.5rem;height:auto;}
  .box-inner-txt .inner-box-wrap > div{flex:none;width:100%;padding:.5rem;}
}


/* 1024px */
@media screen and (max-width:1024px) {
  /* 생산소비 - ESS 현황 */
  .ess-gener-box [class^="inner"]{flex:1;}
  .ess-gener-box .ess-box2, 
  .ess-gener-box .ess-box3{flex-wrap:wrap;}
  .ess-gener-box .ess-box2 .list,
  .ess-gener-box .ess-box3 .list{flex:none;width:100%;margin:unset;}
  /* RE100 포트폴리오 */
  .tit-sub-badge{flex-wrap:wrap;}
  .tit-sub-badge .tit{width:100%;}

  /* 탄소-방법론현황 */
  [class^=srh-filter] .keyword{flex-wrap:wrap;}
  [class^=srh-filter] .keyword > ul{flex-wrap:wrap;gap:.25rem;justify-content: center;}
  [class^=srh-filter] .keyword > ul > li{padding:0;}

  /* 정산관리 */
  .icon-box-wrap6 > ul > li{width:100%;}

  /* 서치필터 */
  [class*=srh-filter] [class*=btn-style]{width:100%;}

  .flexWrap6{flex-wrap:wrap;}
  .flexWrap6 > div:nth-child(1){width:100%;}
  .icon-box-wrap5 .icon-box2 {height:auto;}
  .icon-box-wrap5 .icon-box2 > div{flex-wrap:wrap;}
  .icon-box-wrap5 .icon-box2 > div .img-tit{width:100%;}
  .icon-box-wrap5 .icon-box2 > div .tit-value{flex:none;width:100%;}

  /* 팝업 */
  .layer-wrap{min-width:80% !important;max-width:80% !important;}
  .layer-wrap [class*=tit] {word-break:keep-all;word-wrap:break-word;}

  .regist-form{flex-wrap:wrap;}
  .regist-form .regi-item1{width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;}

  /* PPA거래 대상조회 상세 */
  .box-graph7 > li:first-of-type > div > div{height:auto;padding-top:.75rem;}
  .box-graph7 > li:nth-of-type(2):before{left:50%;top:-1.25rem;}
  .box-graph7 > li {width:100%;flex:none;}

  /* 정산조정 신청 */
  .n-list-flex{margin-top:0.5rem;}
  .n-list-flex > div{flex-wrap:wrap;gap:0;}
  .n-list-flex > div > p{white-space:pre-line;}

  /* 보고서 - 탄소중립 현황 */
  .re-wrap4 > div {width:100%;}

  /* 보고서 - 장외거래 */
  .re-wrap3.res1{flex-wrap:wrap;}
  .re-wrap3.res1 > div{width:100%;}

  .calc-box-wrap > div{flex-wrap:wrap;}
  .calc-box-wrap > div .calc-box {width:calc((100% - 2.9rem) / 2);}
  .calc-box.type2{flex:1;}

  /* 부전거래 신고 - 신고하기 팝업 */
  .layer-wrap.l-mw1 .line6::before{display:none;}

  /* 탄소플래너 - 탄소중립 로드맵 */
  .col-wrap.cp-box-res2 [class*=col-md]{width:100%;}

  /* 내 정보 관리 */
  .my-info-txt > strong{width:100%;}

  /* open API */
  #lnb{margin:0 !important;padding:0 !important; border-right:none;}
  #lnb::before{display:none !important;}

  /* 시설별 배출량 조회 */
  .box-graph5.res1 > ul > li{flex-wrap:wrap;}
  .box-graph5.res1 > ul > li > .scope{min-width:none;width:100%;}

  /* 탄소플래너 - 탄소중립 로드맵 */
  .cp-rdm-grid .area2 .area2-1{flex-wrap:wrap;}
  .cp-rdm-grid .area2 .area2-1 > div{flex:none;width:100%;height:auto;}

  .cp-rdm-grid [class*=cont]{height: auto;}
  .cp-rdm-grid .area2 > div:nth-child(1) .cont{min-height:unset;}
  .cp-rdm-grid .area2 .area2-2 > div{min-height:unset;}

  /* 설비제어 - 제어요청 */
  .control-box .box{
    min-width: calc((100% - (1rem)) / 2);
  }

}


/* 800px */
@media screen and (max-width:800px){
  /* RE100 이행수단 실적 */
  .box-graph2 > li > ul > li .titT1 + .num > strong{font-size:1.1rem;}
  .box-graph2 > li .graph .txt > strong{font-size:1.1rem;}
  .box-graph2 > li > ul > li .num > strong {font-size: 1rem;}
  .flt-graph .info{margin-left:0;width:100%;}
  .flt-graph .info:before {top:-2.25rem;left:50%;width:0.15rem;height:2.2rem;transform: translateX(-50%);}
  .flt-graph .info:after{top:-3rem;left:50%;transform: translateX(-50%);}

}

/* 768px */
@media screen and (max-width:768px){
  .step-wrap .step-box{width:100%;}
  .step-wrap .step-box:after{display:none;}
  .step-wrap .step-box:before{content:"\e941";display:inline-block;font-family:"xeicon";width:1.5rem;height:1.5rem;border-radius:50%;background:#f1f1f1;line-height:1.5rem;text-align:center;color:#555;font-size:.8rem;position:absolute;bottom:-2rem;left:50%;transform: translateX(-50%);}
  .step-wrap .step-box:last-child:before{display:none;} 

  /* REC 시세조회 */
  .icon-box-wrap5 .icon-box1{height:auto;}
  .icon-box-wrap5 .icon-box1 > div{flex-wrap:wrap;}
  .icon-box-wrap5 .icon-box1 > div .img-tit{width:100%;}

  /* 정산관리 */
  .icon-box-wrap6{flex-wrap: wrap;}
  .icon-box-wrap6 .year-tit{width:100%;padding:1rem;}

  /* PPA거래 대상조회 상세 */
  .total-btn-box-type1 {flex-wrap:wrap;justify-content:end;}
  .total-btn-box-type1 .box-total2{flex:none;width:100%;}

  /* RE100플래너 목표관리 */
  .flexInput.res1 input{width:8rem !important;}
  .flexInput.res1 input:disabled{width: 100% !important;}

  .g-txt{display:flex;flex-wrap:wrap;word-wrap:break-word;word-break:keep-all;}
  .g-txt strong{width:100%;margin:0;}

  /* 정산조정 신청 */
  .box-style12{flex-direction:column;}
  .box-style12 .img{width:100%;height:5rem;}
  .box-style12 .txt{width:100%;}

  .b-st2-inner > p {white-space:pre-line;word-wrap:break-word;word-break:keep-all;}

  /* 보고서 - RE100 */
  .progress-wrap{gap:2rem;}
  .progress-wrap .progress-con1{grid-template-columns:1fr;}
  .progress-wrap .progress-con2{height:4.6rem;width:100%;}
  .progress-wrap .progress-con2 .amount-con .amount1 .tit{font-size:0.8rem;top:-1.5rem;left:50%;transform:translateX(-50%);}
  .progress-wrap .progress-con2 .amount-con .amount2 > div.achieved .tit{font-size:0.8rem;top:unset;bottom:-2rem;left:0;}
  .progress-wrap .progress-con2 .amount-con .amount2 > div.defic .tit{font-size:0.8rem;top:unset;bottom:-2rem;right:0;}
  .progress-wrap .progress-con2 .amount-con .amount1 > strong {font-size:1.1rem;}
  .progress-wrap .progress-con2 .amount-con .amount2 > div > strong{font-size:1.1rem;}

  .re-box-wrap2 .re-box2{width:100%;}

  /* Open API 조회  */
  .box-list .lst-wrap .lst ul li{width:100%;}

  /* RE100플레너 - 목표관리 */
  .box-inner-txt .txt-st1{font-size:.8rem;}
  .box-inner-txt .txt-st2{font-size:.8rem;}
  .box-inner-txt .txt-st3{font-size:.8rem;}
  .box-inner-txt .txt-st4{font-size:1.2rem;}
  
  /* 설비제어 - 제어요청 */
  .control-box .box{
    width:100%;
  }

}

/* 600px */
@media screen and (max-width:600px){
  /* PPA거래 대상조회 상세 */
  .box-graph7 > li:nth-of-type(2) > div .srh-cont{flex-wrap:wrap;}
  .box-graph7 > li:nth-of-type(2) > div .srh-cont strong{width:100%;}
  .box-graph7 > li:nth-of-type(2) > div .srh-cont > div{width:100%;justify-content:end;}

  /* 보고서 - 장외거래 */
  .compare-up{flex-wrap:wrap;gap:0.25rem;}
  .compare-up .up-txt{width:100%;}
  .compare-down{flex-wrap:wrap;gap:0.25rem;}
  .compare-down .down-txt{width:100%;}
}
/* //600px */

/* 480px */
@media screen and (max-width:480px){
  /* 생산소비 - ESS 현황 */
  .ess-gener-box img{}
  .ess-gener-box [class^="inner"]{flex:none;width:100%;}
  .ess-gener-box .ess-box2 > div:nth-child(1),
  .ess-gener-box .ess-box3 > div:nth-child(1){display:flex;align-items:center;justify-content:center;width:100%;}
  /* RE100 포트폴리오 */
  .lnk-lst > li > a > strong{font-size:1rem;}
  .lnk-lst > li > a > span{font-size:.7rem;}
  .lnk-lst > li > a [class^=checkbox-radio-type01]{left:3%;}
  /* 탄소 감축목표 관리 */
  .goal-set-wrap > div:nth-child(1) .tit-input{flex-wrap:wrap;gap:.4rem;}
  .goal-set-wrap > div:nth-child(1) .tit-input label{width:100%;}
  /* page-tit */
  .sub-wrap .page-tit .tit{font-size:1.1rem;}

  /* box-style6 */
  .box-style6 .left .box .tit, .box-style6 .right .box .tit{font-size:1rem;}
  .box-style6 .left .box .txt, .box-style6 .right .box .txt{padding:0 1rem;margin-top:0;}

  /* eroor */
  .error-wrap {
    padding: 0 0.5rem;
  }
  .error-wrap > div {
    gap: 0.5rem;
  }
  .error-wrap > div > img {
    width: 10rem;
    height: 7.75rem;
  }
  .error-wrap > div .txt1 {
    font-size: 1.2rem;
  }
  .error-wrap > div .txt2 {
    font-size: 0.8rem;
  }
  .error-wrap > div .btn-style1{width:60%;}

}

/* 450px */
@media screen and (max-width:450px) {
  /* page-tit */
  .page-tit .tit{flex-wrap:wrap;gap:.5rem;}
  .page-tit .tit .badge{margin-left:unset !important;}

  /* PPA거래 대상조회 상세 */
  .box-graph7 .srh-cont input{width:80% !important;}

  /* 보고서 - RE100 */
  .icon-value-box .inner{flex-direction:column;gap:0.5rem;}
  .icon-value-box .inner .img-tit{width:100%;}

  /* 탄소플래너 - 탄소중립 로드맵 */
  .col-wrap.cp-box-res2 .tb-box2 > ul > li > span{max-width:none;flex:none;width:100%;}

  .col-wrap.cp-box-res2 .tb-box3 > ul > li.con1 > span{height:1.6rem;line-height:1.6rem;}
  .col-wrap.cp-box-res2 .tb-box3 > ul > li > span{max-width:none;flex:none;width:100%;}
  .col-wrap.cp-box-res2 .tb-box3 > ul > li.con1 > ul{width:100%;}
  .col-wrap.cp-box-res2 .tb-box4 > ul > li > span{max-width:none;flex:none;width:100%;}
}

/* 400px */
@media screen and (max-width:400px){
  /* calendar */
  .calendar-input input{font-size:.65rem !important;}
  /* RE100  */
  .box-graph2 > li > ul > li .tit {width:40rem;}
  .box-graph2 > li .graph .txt > strong{font-size:.8rem;}

  /* 보고서 */
  .report-tit-wrap > div:nth-child(1){flex-wrap:wrap;gap:.5rem}
  .report-tit-wrap > div:nth-child(1) > span{width:100%;}



}


/* 차트 텍스트 */

.highcharts-no-data.trans-txt {
  transform: translate(245px, 121px) !important;
}