@charset "UTF-8";

/* tutorial 추가 시작 */
.tutorial-wrap *{
  /* pointer-events: none; */
}
.tutorial-wrap .accordion-item{
  overflow: unset;
}
.tutorial {
  position: absolute;
  z-index: 999;
  background-color: #fff;
  width: 100%;
}

.tutorial::before {
  content: "";
  display: block;
  position: absolute;
  z-index: -1;
  background-color: #fff;
  border: 2px solid #fa3158 !important;
  border-radius: 8px;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0
}

.tutorial.none::before {
  background:none;
  border: none !important;
}

.tutorial::after {
  content: "";
  display: block;
  position: fixed;
  z-index: -2;
  background-color: #000000;
  opacity: .5;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
}

.tutorial.bg-none::after {
  content: "";
  display: block;
  position: fixed;
  z-index: -2;
  background: none;
  opacity: .5 ;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
}

.icon-hand {
  animation: blink 1s infinite;
  position: absolute;
  z-index: 999;
  
}
.iconImg {
  display: block;
  background-image: url("/assets/common/tutorial/images/icon_hand_touch.svg");
  width: 32px;
  height: 32px;
}
.handTooltip {
  display: flex;
  background: #1750E4;
  color: #fff;
  font-size: 14px;
  border-radius: 8px;
  position: absolute;
  margin-top: 16px;
  top:-2px;
  left: 20px;
  padding: 8px 16px;
  white-space: nowrap;
  z-index: -1;
}
.handTooltip.right{
  left: unset;
  right:2px;
  top:3px;
  padding: 8px 16px;
}

/* 깜빡이는 애니메이션 */
@keyframes blink {
  0%,
  100% {
    opacity: 1;
  }
  25% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
}

.icon-hand {
  animation: blink 2s infinite 2s; /* 1초 후 시작 */
  animation-delay: 1s; /* 0.5초 쉬고 시작 */
}

.tutorial-info{
  display: block;
  width: 100%;
  position: absolute;
  top:-40px;
  left: 50%;  
  color:#fff;
  border-radius: 8px 8px 0 0;
  text-align: center;
  z-index: 99999999;
  transform: translate(-50%, 0);
  background: #fa3158;
  padding: 16px;  
}

.tutorial-info__modal {
  display: block;
  width: 100%;
  position: absolute;
  left: 50%;
  color: #fff;
  border-radius: 8px;
  text-align: center;
  z-index: 99999999;
  transform: translate(-50%, 0);
  background: #fa3158;
  padding: 16px;
}

.tutorial-info__text {  
  background: #fa3158;  
} 
.tutorial .accordion-header,
  .tutorial .tree_main,
  /* .tutorial .modal-header, */
  /* .tutorial .modal-footer, */
  .tutorial .accordion-body,
  .tutorial .list-basic-check
  /* .tutorial .list-basic */{
  border-left: 2px solid #fa3158 !important;
  border-right: 2px solid #fa3158 !important;
} 
 .tutorial .modal-header{
  /* border-top: 1px solid #fa3158 !important; */
 }
.tutorial .modal-footer {
  /* border-bottom: 1px solid #fa3158 !important; */
}
.tutorial .border-0,
.tutorial .modal .tree_main{
  border:none !important;
}
.tutorial .modal-content{
  border: 2px solid #fa3158 !important;
}

.tutorial .filter-radio input:disabled+label,
.tutorial .filter-check input:disabled+label{
  opacity: 1;
}
.tutorial .form-check-input:disabled{
  background: #fff;
}

.tutorial .right-tab .right-tab__wrap{
  border: 2px solid #fa3158 !important;
}
.tutorial-item__right .tutorial-info{
  position: fixed;
  width: inherit;
  left:inherit;
  right:90px;
  border-radius:8px;
}

.tutorial-item__right .tutorial .accordion-header,
.tutorial-item__right .tutorial .tree_main{
  border:none !important;
}

.tutorial-item__bottom .tutorial-info {
  position: fixed;
  width: inherit;
  left: inherit;
  top: inherit;
  border-radius: 8px;
}

.tutorial-item__table-sm
.treeview-container li .line{
 min-height: 36px;
}

.pointer-events{
  pointer-events: auto;
  cursor: pointer;
}

.step-active{
  position: relative;
}
.step-active input{
  pointer-events: auto;
}
.step-active .icon-hand {
  display: block !important;
}

.step-active .pointer {
  pointer-events: auto;
  cursor: pointer;
}

.tutorial-modal-wrap{
  position: relative;
}
.tutorial-modal {
  position: relative;
  outline:2px solid #fa3158;
  border-radius: 12px;
}

.tutorial-modal-wrap .tutorial-info{
  border-radius: 0 0 8px 8px;
  top:0
}
.tutorial-modal::after {
  content: "";
  display: block;
  position: fixed;
  z-index: -2;
  background-color: #000000;
  opacity: .4;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
}

.tutorial.border-0:before {
  display: block;
  border:0 !important
}

.outline{
  outline: 2px solid #fa3158;
}
.outline-before::before {
  outline: 2px solid #fa3158;
  border:none !important;
}
.bg-disabled{
  position: relative;
}

.bg-disabled::after{
  content: "";
  display: block;
  position: absolute;
  z-index: 0;
  background-color: #000000;
  opacity: .5;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
}

.botArea:hover{
  background-color: #eff6ff !important;
}

.print__grid,
.print__wrap.unit__wrap,
.unit__wrap .print__body,
.unit__wrap .marsonry-question-list,
*{
  overflow: unset;
}

.tutorial-infoBox{
  display: block;
  width: 100%;
  max-width: 500px;
  color:#fff;
  border-radius: 8px;
  text-align: center;
  background: #fa3158;
  padding: 16px;  
  margin: 40px auto;
}

.contents__tutorial img{
  max-width: 772px;
  margin: 0 auto;
}

@keyframes slideUp {
  0% {
    transform: translateY(100%);
    opacity: 0;
  }

  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

.slideUp {
  animation: slideUp 0.5s ease-out forwards;
  /* 애니메이션 속도를 조절할 수 있습니다 */
}

.tablet__wrap {
  width: 1024px !important;
  height: 768px;
  background-color: #fff;
  border-radius: 30px;
  border: 10px solid #333;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.25);
  position: relative;
  overflow: hidden;
  margin: 0 auto;
}

/* 상단 카메라 부분 */
.tablet__wrap::before {
  content: "";
  position: absolute;
  top: 15px;
  left: 50%;
  transform: translateX(-50%);
  width: 40px;
  height: 5px;
  background-color: #333;
  border-radius: 3px;
}

/* 하단 버튼
.tablet__wrap::after {
  content: "";
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  width: 40px;
  height: 40px;
  background-color: #333;
  border-radius: 50%;
}
 */
.tablet__wrap .mark-header__top .title{
    position: absolute;
    left: 50%;
    transform: translate(-50%, 0);
    display: flex;
    justify-content: center;
}

.tablet__wrap .mark-header__top .btn-mark__close {
  border: none;
  padding: 0;
  position: absolute;
  right: 16px;
}

.tablet__wrap .btn-mark__txt {
  display: none;
}

.tablet__wrap .mark-header__top button .material-symbols-sharp {
  font-size: 28px;
}

.tablet__wrap .mark-header__top li {
  min-width: auto;
}

.btn-fin{
  display: flex;
  justify-content: center;
  align-items: center;
  height: 48px;
  color: #fff;
  border-radius: 8px;
  text-align: center;
  background: #fa3158;
  padding: 24px;
  margin: 40px auto;
  position: fixed;
  bottom:0px;
  left:50%;
  margin-left: 450px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  z-index: 999999999;
  font-size: 18px;
  gap: 8px;
}

.btn-fin.btn-list{
  background: #1750E4;
  bottom:inherit;
  top:100px;  
  margin-left: -680px;
  flex-shrink: 0;
  min-width: 200px;
}

@media screen and (max-width: 1380px){
  .btn-fin.btn-list{
    margin-left: 450px;
  }
}

.btn-fin.right{
  left:inherit;
  margin-left: inherit;
  right:60px
}


/* dropzoneBox 시작 - center에 적용되있어면 뺄 것 */
.dropzoneBox {
  border: 3px dashed #7db8ff;
  border-radius: 20px;
  width: calc(100% - 48px);
  min-height: 460px;
  padding: 20px 0 !important;
  margin-bottom: 16px !important;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  color:#7db8ff50;
}
.dropzoneBox .icon-drag{
  font-size: 48px;
}
.dropzoneBox:hover {
  background-color: #1e85ff10 !important;
  border-radius: 20px;
}
.dropzoneBox:hover i{
  color:#7db8ff;
}

/*drag*/
.dropzone__wrap{
  display: flex;  
  background-color: #fff;
}
.drop__grid {
  width: 50%;
  border-right: 1px solid #f1f1f2;
  height: 100%;
  display: flex;
  flex-wrap: wrap;
  flex-grow: 0;
  flex-shrink: 1;
  flex-direction: column;
  inset: 0;
  
}
.drop__header{
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid #f1f1f2;
  background-color: #fff;
  flex-shrink: 1;
  padding: 8px 16px;
}
.drop__body {
  max-width: 100%;
  padding: 24px !important;
  background-color: #f6f6f9;
}
#dropzone .marsonry-question-item {
  width:90%;
}
/* dropzoneBox 시작 - center에 적용되있어면 뺄 것 */

.dropzoneBox{
  position: relative;
  align-items: flex-start;
}
.dropzoneBox .icon-drag{
  position: absolute;
  top:50%;
  transform: translate(0, -50%);
}