/* 정연 커스텀 Css */

.sign-up-img {
  transform: scaleX(-1);
  -webkit-transform: scaleX(-1);
  -moz-transform: scaleX(-1);
  -ms-transform: scaleX(-1);
  -o-transform: scaleX(-1);
  filter: FlipH;
  -ms-filter: "FlipH";
  transform: scaleX(-1);
  -webkit-transform: scaleX(-1);
  -moz-transform: scaleX(-1);
  -ms-transform: scaleX(-1);
  -o-transform: scaleX(-1);
  display: block; /* 기본적으로 보이게 */
}

/* 모바일 화면(최대 너비 768px)에서 이미지 숨기기 */
@media (max-width: 768px) {
  .sign-up-img {
    display: none; /* 모바일에서는 숨김 */
  }
}

.is-editor-empty:first-child::before {
  content: attr(data-placeholder);
  float: left;
  color: #adb5bd;
  pointer-events: none;
  height: 0;
}


.history-thum {
  height: 70px;
  overflow: hidden;
  position: relative;
}

.modal-content {
  background-color: #fff !important;
}

.list-latestthum {
  height: 50px;
  overflow: hidden;
  position: relative;
}
.list-latestthum img {
  width: 100%;
  height: auto;
  max-height: 40px;
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.text-overflow120 {
  min-width: 120px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.text-overflow180 {
  min-width: 180px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.text-overflow300 {
  min-width: 300px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.indexlatest-noimg {
  font-size : 4.5rem;
  color: #ffffff;
}

.noimg {
  font-size : 4rem;
  color: #ffffff;
}

.vertical-center {
  vertical-align: middle !important;
}

.gallery-noimg {
  height: 240px;
  align-content: center;
  overflow: hidden;
  position: relative;
  background-color: #f2f2f2 !important;
}

.gallery-container {
  height: 240px;
  overflow: hidden;
  position: relative;
}

.gallery-container:hover img {
  -webkit-transform: scale(1.1) rotate(1deg) !important;
  transform: scale(1.1) rotate(1deg) !important;
}

.table-hover tbody tr:hover td,
.table-hover tbody tr:hover th {
  background-color: #ffc107 !important;
  opacity: .9;
  -webkit-transition: all 0.5s ease;
  transition: all 0.5s ease;
}

.widget .board-recent .board-recent-thumb {
  width: 25%;
}

.widget .board-recent .board-recent-content {
  width: 75%;
  padding-left: 10px;
}

.widget .board-recent .board-recent-content.full {
  width: 100%;
  padding-left: 0px;
}

.widget .board-recent a .board-recent-content {
  display: block;
  color: #3c4858;
  font-size: 12px;
  -webkit-transition: all 0.5s ease;
  transition: all 0.5s ease;
}

.widget .board-recent a:hover  .board-recent-content {
  color: #d42f9d;
}

.widget .board-recent span .board-recent-content {
  font-size: 12px;
}

.boardfiles {
  background: #e9ecef;
  color: #3c4858;
  display: inline-block;
  font-size: 9px;
  letter-spacing: 1px;
  margin: 5px 5px 5px 0;
  padding: 4px 6px 4px;
  -webkit-transition: all 0.5s ease;
  transition: all 0.5s ease;
  font-weight: 600;
}

.h-px {
  height: 1px;
}
.w-px {
  width: 1px;
}

.overflow-hidden {
  overflow: hidden !important;
}

.ed-clickable {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100px;
  border: 1px dashed #614092 !important;
  border-radius: 4px !important;
  padding: 10px 10px;
  @media (max-width: 991.98px) {
    min-height: 100px;
  }
}

.unselected-menu {
  border-right: 1px solid #e9ecef !important;
  border-bottom: 1px solid #e9ecef !important;
}

.selected-menu {
  box-shadow: 0 3px 5px 0 rgba(47, 85, 212, 0.3);
  border: 1px solid #6f42c1 !important;
}

.text-overflow {
  min-width: 180px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  max-width: 20px;
}

.wx-80 {
  width: 80px;
}

.wx-90 {
  width: 90px;
}

.wx-100 {
  width: 100px;
}

#loading-websiteinfo {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: linear-gradient(45deg, #ffffff, #ffffff);
  z-index: 9999999;
  opacity: .9;
}

#loading-websiteinfo #status-websiteinfo {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}

.btn-square {
  border-radius: 0 !important;
}

.cursor-pointers {
  cursor: pointer;
}
.cursor-pointer {
  cursor: pointer;
}

.font-weight-700 {
  font-weight: 700;
}
.font-weight-600 {
  font-weight: 600;
}
.font-weight-500 {
  font-weight: 500;
}
.font-weight-400 {
  font-weight: 400;
}
.font-weight-300 {
  font-weight: 300;
}

.form-group .admin-label {
  font-size: 12px;
  font-weight: 700;
}

@-webkit-keyframes animate {
    50% {
        -ms-transform: rotate(180deg);
        -webkit-transform: rotate(180deg);
        transform: rotate(180deg);
    }

    100% {
        -ms-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
}

@keyframes animate {
    50% {
        -ms-transform: rotate(180deg);
        -webkit-transform: rotate(180deg);
        transform: rotate(180deg);
    }

    100% {
        -ms-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
}



@keyframes rotating {
    0% {
        transform: rotate(0deg);
        top: 10%;
    }

    100% {
        transform: rotate(360deg);
        top: 25%;
    }
}

@keyframes rotating2 {
    0% {
        transform: rotate(0deg);
        top: 30%;
        left: 25%;
    }

    100% {
        transform: rotate(360deg);
        top: 20%;
        left: 40%;
    }
}

@keyframes rotating3 {
    0% {
        top: 85%;
    }

    100% {
        top: 40%;
    }
}

@keyframes rotating4 {
    0% {
        top: 40%;
    }

    100% {
        top: 10%;
    }
}

@keyframes rotating5 {
    0% {
        left: 35%;
    }

    100% {
        left: 5%;
    }
}

@keyframes hero_animation {
    0% {
        -webkit-transform: translate(0, 0);

    }

    100% {
        -webkit-transform: translate(20px, 10px);

    }
}

.popup-gallery {
    img {
        cursor: zoom-in;
    }
}

.effect-icon-1 {
    font-size: 40px;
    opacity: 0.2;
}

.effect-icon-2 {
    font-size: 48px;
    opacity: 0.2;
}

.effect-icon-3 {
    font-size: 32px;
    opacity: 0.2;
}

.animation-effect-1 {
    position: absolute;
    z-index: 1;
    top: 10%;
    left: 4%;
    animation: rotating alternate ease-in-out infinite 9s;
}

.animation-effect-2 {
    position: absolute;
    top: 85%;
    left: 3%;
    z-index: 1;
    animation: rotating3 alternate ease-in-out infinite 18s;
}

.animation-effect-3 {
    position: absolute;
    top: 20%;
    left: 15%;
    z-index: 1;
    animation: rotating2 alternate ease-in-out infinite 18s;
}

.animation-effect-4 {
    position: absolute;
    top: 40%;
    left: 67%;
    z-index: 1;
    animation: rotating4 alternate ease-in-out infinite 10s;
}

.animation-effect-5 {
    position: absolute;
    top: 18%;
    left: 55%;
    z-index: 1;
    animation: rotating5 alternate ease-in-out infinite 20s;
}

.animation-effect-6 {
    position: absolute;
    z-index: 1;
    top: 10%;
    right: 4%;
    animation: rotating alternate ease-in-out infinite 9s;
}

.animation-effect-7 {
  position: absolute;
  top: 85%;
  right: 3%;
  z-index: 1;
  animation: rotating3 alternate ease-in-out infinite 18s;
}

.animation-effect-8 {
  position: absolute;
  top: 24%;
  left: 55%;
  z-index: 1;
  animation: rotating5 alternate ease-in-out infinite 20s;
}

.animation-effect-9 {
  position: absolute;
  top: 40%;
  left: 67%;
  z-index: 1;
  animation: rotating4 alternate ease-in-out infinite 10s;
}

.member-login-img {
  position: absolute;
  bottom: 20px;
  right: 60px;
  font-size: 100px !important;
}

@media (max-width: 768px) {
  .navigation-otherbtn {
    display: none;
  }
}


.navwave {
  background-image: radial-gradient(circle 8px at 92% 63%, rgb(255,250,85) 0%,transparent 22%),radial-gradient(circle 2px at 73% 80%, rgb(201,242,255) 0%,transparent 60%),radial-gradient(circle 2px at 88% 58%, rgb(201,242,255) 0%,transparent 5%),radial-gradient(circle 2px at 39% 24%, rgb(201,242,255) 0%,transparent 17%),radial-gradient(circle 2px at 31% 10%, rgb(201,242,255) 0%,transparent 83%),radial-gradient(circle 2px at 25% 64%, rgb(201,242,255) 0%,transparent 65%),radial-gradient(circle 2px at 46% 18%, rgb(201,242,255) 0%,transparent 86%),radial-gradient(circle 2px at 27% 89%, rgb(201,242,255) 0%,transparent 61%),radial-gradient(circle 2px at 72% 43%, rgb(201,242,255) 0%,transparent 46%),radial-gradient(circle 2px at 73% 2%, rgb(201,242,255) 0%,transparent 87%),radial-gradient(circle 5px at 94% 33%, rgb(253,250,147) 0%,transparent 93%),radial-gradient(circle 5px at 35% 87%, rgb(253,250,147) 0%,transparent 42%),radial-gradient(circle 4px at 78% 1%, rgb(255,249,27) 0%,transparent 76%),radial-gradient(circle 4px at 71% 51%, rgb(255,249,27) 0%,transparent 69%),radial-gradient(circle 4px at 26% 45%, rgb(255,249,27) 0%,transparent 83%),linear-gradient(90deg, rgb(35,35,35) 0%, rgb(35,35,35) 50%,rgb(35,35,35) 50%, rgb(35,35,35) 100%); background-size: 278px 278px;
}

.navwave-2 {
  background-image: radial-gradient(circle 8px at 92% 63%, rgb(255,250,85) 0%,transparent 22%),radial-gradient(circle 2px at 73% 80%, rgb(201,242,255) 0%,transparent 60%),radial-gradient(circle 2px at 88% 58%, rgb(201,242,255) 0%,transparent 5%),radial-gradient(circle 2px at 39% 24%, rgb(201,242,255) 0%,transparent 17%),radial-gradient(circle 2px at 31% 10%, rgb(201,242,255) 0%,transparent 83%),radial-gradient(circle 2px at 25% 64%, rgb(201,242,255) 0%,transparent 65%),radial-gradient(circle 2px at 46% 18%, rgb(201,242,255) 0%,transparent 86%),radial-gradient(circle 2px at 27% 89%, rgb(201,242,255) 0%,transparent 61%),radial-gradient(circle 2px at 72% 43%, rgb(201,242,255) 0%,transparent 46%),radial-gradient(circle 2px at 73% 2%, rgb(201,242,255) 0%,transparent 87%),radial-gradient(circle 5px at 94% 33%, rgb(253,250,147) 0%,transparent 93%),radial-gradient(circle 5px at 35% 87%, rgb(253,250,147) 0%,transparent 42%),radial-gradient(circle 4px at 78% 1%, rgb(255,249,27) 0%,transparent 76%),radial-gradient(circle 4px at 71% 51%, rgb(255,249,27) 0%,transparent 69%),radial-gradient(circle 4px at 26% 45%, rgb(255,249,27) 0%,transparent 83%),linear-gradient(90deg, #492f5c 0%, #492f5c 50%, #492f5c 50%,  #492f5c 100%); background-size: 278px 278px;
}

.bg-derc-member {
  height: 100vh;
  -ms-flex-item-align: center;
  -ms-grid-row-align: center;
  align-self: center;
  position: relative;
  background-position: center center;
}

.bread-overlay {
  position: absolute;
  top: inherit;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  /*background: linear-gradient(to right, #3a3089, #56035d);*/
  /*background: linear-gradient(135deg, #3a3089, #56035d, #3a3089, #56035d);*/
  /*background: linear-gradient(115deg, #F44336, #673AB7, #673ab7, #000000);*/
  background: linear-gradient(115deg, #e336f4, #673ab7, #ff6499);
  background-size: 300% 300%;
  animation: navwavegradient 10s ease infinite;
}

@keyframes navwavegradient {
  0% {
      background-position: 0% 50%;
  }
  30% {
      background-position: 100% 50%;
  }
  70% {
      background-position: 100% 50%;
  }
  100% {
      background-position: 0% 50%;
  }
}

.bread-overlay-2 {
  position: absolute;
  top: inherit;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  /*background: linear-gradient(135deg, #9C27B0, #3a3089, #673AB7, #E91E63);*/
  background: linear-gradient(136deg, #F44336, #673AB7, #673ab7, #000000);
  background-size: 400% 400%;
  animation: navwavegradient 12s ease infinite;
}

.boardfile-icon.boardfile li a {
  color: #adb5bd;
  border-color: #adb5bd;
}

.boardfile-icon li a {
  color: #3c4858;
  border: 1px solid #3c4858;
  display: inline-block;
  height: 65px;
  width: 65px;
  text-align: center;
  -webkit-transition: all 0.4s ease;
  transition: all 0.4s ease;
  overflow: hidden;
  position: relative;
}

.bread-overlay-3 {
  position: absolute;
  top: inherit;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #9C27B0, #3a3089, #9C27B0, #3a84b7);
  background-size: 400% 400%;
  animation: navwavegradient 12s ease infinite;
}

.text-bold {
  font-weight: bold;
}

.font-size-10 {
  font-size: 10px !important;
}

.font-size-11 {
  font-size: 11px !important;
}

.font-size-12 {
  font-size: 12px !important;
}

.font-size-13 {
  font-size: 13px !important;
}

.font-size-14 {
  font-size: 14px !important;
}

.font-size-15 {
  font-size: 15px !important;
}

.font-size-16 {
  font-size: 16px !important;
}

.font-size-17 {
  font-size: 17px !important;
}

.font-size-18 {
  font-size: 18px !important;
}

.opacity-9 {
  opacity: .9;
}

.opacity-8 {
  opacity: .8;
}

.opacity-7 {
  opacity: .7;
}

.opacity-6 {
  opacity: .6;
}

.opacity-5 {
  opacity: .5;
}

.opacity-4 {
  opacity: .4;
}

.opacity-3 {
  opacity: .3;
}

.opacity-2 {
  opacity: .2;
}

.opacity-1 {
  opacity: .1;
}

.password-field {
  -webkit-text-security: disc;
}

.reply-form {
  width: 100%;
  height: 350px !important
}

.text-home-title {
  text-decoration-line: overline;
}

.main-vuetyper .vue-typer {
  border-radius: 6px !important;
  line-height: 1.5 !important;
  font-weight: 400 !important;
}

.main-vuetyper .vue-typer .custom.char {
  color: #ffffff;
  background-color: #7952B3;
  font-weight: 600 !important;
  
}
.main-vuetyper .vue-typer .custom.char.selected {
  background-color: #7952B3;
}

.main-vuetyper .vue-typer .custom.caret {
  width: 10px;
  background-color: #ffffff;
  opacity: .60;
}

.history-edit {
  position: absolute;
  width: 36px;
  top: 26px;
  left: -24px;
}

.timeline-menu {
  padding: 0;
  list-style: none;
}

.timeline-current-section {
  padding-top: 50px;
}

.timeline-current-section input {
  max-width: 3em;
}

.timeline-menu-item a {
  cursor: pointer;
}

.timeline-main {
  max-width: 80%;
}

@media (max-width: 575px) {
  .timeline-mobile-bg {
    max-width: 60px;
    padding: 0px 0px !important;
    padding-right: 15px;
    padding-left: 15px;
  }
  .timeline-menu-text {
    padding: 4px 20px !important;
  }
  .timeline-menu-item {
    margin-left: 0.25rem !important;
  }
}

.timeline-menu-text {
  font-family: sans-serif;
  padding: 4px 20px;
  outline: none;
  text-decoration: none;
  font-size: 11px;
  letter-spacing: 0.5px;
  -webkit-transition: all 0.1s;
  transition: all 0.1s;
  font-weight: 600;
}

.timeline-menu-item {
  text-decoration: none;
  /*background-color: #f8f9fc;*/
  -webkit-user-select:none;
  -moz-user-select:none;
  -ms-user-select:none;
  user-select:none
}

.timeline-customActive {
  background-color: #ffc107 !important;
  color: #614092 !important;
  border-radius: 6px !important;
  /*color: #178ce6;
  border-left: 1px solid #178ce6;*/
}

/*
.timeline-content {
  cursor: e-resize;
}
*/

.admin-board-list .label {
  position: absolute;
  top: 3px;
  left: -10px;
  z-index: 2;
}

.timeline-content .content:before {
  content: "";
  position: absolute;
  top: 30px;
  left: 0;
  margin-left: 13px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  border: 8px solid #3c4858;
  border-color: transparent #ffffff #ffffff transparent;
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;
  -webkit-transform: rotate(135deg);
  transform: rotate(135deg);
  -webkit-box-shadow: 2px 2px 2px -1px rgba(60, 72, 88, 0.15);
  box-shadow: 2px 2px 2px -1px rgba(60, 72, 88, 0.15);
}

.text-yellow {
  color: #ffe713;
}

.input-square {
  padding: 0rem 0.5rem !important;
  border-radius: 0rem;
}

.h-100 {
  height: 100% !important;
}