/* step-modal-dafault */
.txt-point{
  color:#368556;
}
#step-modal .modal-container{
  background: #fff;
}

#step-modal .modal-body{
  padding:0;
  overflow: hidden;
  overflow-y: scroll;
}

#step-modal  .modal-footer{
  padding:0;
}
#step-modal .modal-footer .btn-group{
  margin:0;
}
#step-modal .modal-footer .btn-group button{
  min-width: 150px;
  margin: 20px 0;
}

#step-modal .modal-content .step{
  padding: 20px 0;
  /*height: 770px;*/
  min-height: 770px;
  max-height: 770px;
  /*display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;*/
  background: #f2ede9;
}

/* step-header */
#step-modal .step-header .btn-close{
  display: block;
  position: relative;
  width: 25px;
  height: 25px;
  padding: 25px;
  text-align: right;
  margin-left: auto;
  position: absolute;
  top:0;
  right:0;
  z-index: 1111;
}

#step-modal .step-header .btn-close::before{
  content: ' ';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 2px;
  height: 24px;
  margin-top: -12px;
  margin-left: -1px;
  background: #000;
  border-radius: 5px;
  transform: rotate(45deg);
}
#step-modal .step-header .btn-close::after{
  content: ' ';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 2px;
  height: 24px;
  margin-top: -12px;
  margin-left: -1px;
  background: #000;
  border-radius: 5px;
  transform: rotate(-45deg);
}

#step-modal .step-header .btn-close.white::before,
#step-modal .step-header .btn-close.white::after{
  background: #fff;
}

#step-modal .step-header{
  text-transform: uppercase;
  font-size:24px;
  color:#000;
} 
#step-modal .step-header.center{
  text-align: center;
}
#step-modal .step-header strong{
  font-weight: bold;
  display: block;
}

#step-modal .step-header.white{
  color:#fff;
}

/* step-body */
#step-modal .step-body{
  padding:0 30px;
  width:100%;
}
#step-modal .step-body.center{
  width:100%;
  text-align: center;
}

#step-modal .step-body.white{
  color:#fff;
}

#step-modal .modal-wrap{
  max-width: 420px;
  height: calc(100% - 40px);
  margin: 30px auto;
}


@media screen and (max-width: 767px) {
  #step-modal .step-body{
    padding:0 16px;
  }
}

/* step-foot */
#step-modal .step-foot{
  position: relative;
}

#step-modal .step-foot .btn-group{
  display: flex;
  justify-content: center;
  gap: 20px;
}
#step-modal .step-foot button{
  min-width: 132px;
  max-width: 132px;
  margin-right:0;
  flex:1;
}

#step-modal .step-foot.white{
  color:#fff;
}
#step-modal .step-foot.center{
  text-align: center;
  font-size:18px;
}

/* step-title */
#step-modal .step-title{
  margin:15px 0;
  font-size:30px;
}

#step-modal .step-title.center{
  text-align: center;
}

#step-modal .step-title.white{
  color:#fff;
}
/* sub-title */
#step-modal .step-sub-title{
  font-size:28px;
}

#step-modal .step-sub-title.center{
  text-align: center;
}

#step-modal .step-sub-title em{
  font-weight: bold;
  color:#368556;
}





/* step-content */
#step-modal .step-desc{
  font-size:16px;
  word-break: keep-all;
  font-weight: 400;
  line-height: 1.5;
}

#step-modal .step-desc.center{
  text-align: center;
  font-size:24px;
  color:#000;
}

#step-modal .step-desc.white{
  color:#fff;
}

#step-modal .step-desc em{
  font-weight: bold;
  color:#368556;
}

#step-modal .step-point{
  position: relative;
  font-weight: bold;
  font-size:18px;
  margin:20px 0;
}

#step-modal .step-point em{
  position: relative;
  color:#84f103;
  margin-bottom: 20px;
}




/* step0 */
.modal-content #step-info .step-body{
  min-height: 400px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.modal-content .emphasize{
  font-size:24px;
}

.modal-content #step0 .step-header{
  line-height: 1;
}

.modal-content #step0_2 .step-header{
  line-height: 1;
}

.modal-content #step0_3 .step-header{
  line-height: 1;
}

.modal-content #step5 .step-header{
  line-height: 1;
}

.modal-content #step6 .step-header{
  line-height: 1;
}

.modal-content #step0 .step-body{
  position: relative;
  width: 100%;
  margin-top: 40px;
  padding: 0 20px;
}

.modal-content #step0 .step-body .step-list{
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  width: 90%;
  margin: 0 auto;
}

.modal-content #step0 .step-body .step-list li{
  border: solid 1px #000;
  border-radius: 8px;
  height: 70px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 100%;
  background: #fff;
}

.modal-content #step0 .step-body .step-list li h4{
  font-size:20px;
  font-weight: 500;
}
`
.modal-content #step0 .step-slider01{
  position: relative;  
}

.modal-content #step0 .step-slider01 .swiper-slide{
  overflow: hidden;
  margin-top:30px;
}

.modal-content #step0 .step-slider01 .swiper-slide-active{
  /* border:solid 1px red; */
  margin-top:0px;
}

.modal-content #step0 .step-slider01 img{
  object-fit: cover;
  border-radius: 20px;
}


@media screen and (max-width: 520px) {
  .modal-content #step0 .step-body .step-list{
    width:100%;
  }
}


/* step1*/

.modal-content #step0_2 .step-subject,
.modal-content #step0_3 .step-subject{
  margin: 20px 0 10px;
  gap: 10px;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  font-weight: bold;
  font-size: 20px;
  text-align: left;
}

.modal-content #step0_2 .step-subject img,
.modal-content #step0_3 .step-subject img{
  margin-top:8px;
}

.modal-content #step0_2 h5
.modal-content #step0_3 h5{
  font-weight: bold;
}

.modal-content #step0_2 ul,
.modal-content #step0_3 ul{
  position: relative;
}


.modal-content #step0_2 ul li,
.modal-content #step0_3 ul li{
  width: 100%;
  text-align: center;
  font-weight: 600;
  color: #202020;
  cursor: pointer;
  font-size: 18px;
  margin-bottom: 20px;
}

.modal-content #step0_2 ul li {
  padding-bottom: 20px;
  border-bottom: solid 1px #ddd;
  
}

.modal-content #step0_2 ul li:last-child{
  margin-bottom: 0;
  border:none;
}

.modal-content #step0_3 ul li{
  padding: 10px;
  border-bottom:solid 1px #ddd;
}


.modal-content #step0_3 .step-subject{
  align-items: flex-start;
}


@media screen and (max-width: 520px) {
  .modal-content #step0_3 ul li{
   margin:0;
  }
}


.modal-content #step1{
  background: #4c4847 !important;
  padding-bottom: 0 !important;
}


/*.modal-content .loading-container{
  position: relative;
  height: 537px;
  display: flex;
  justify-content: center;
  align-items: center;
}*/

.modal-content .step-foot.bottom{
  position: relative;
  background: #fff;
  padding: 20px;
  width: 100%;
  height: 20vh;
  font-size: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}


.loading-container {
  font-size: 24px;
  color: #333;
}

.loading-text {
  display: inline;
}

.dots::before {
  content: '.';
  animation: loadingDots 1.5s infinite step-start;
}

@keyframes loadingDots {
  0% {
    content: '.';
  }
  33% {
    content: '..';
  }
  66% {
    content: '...';
  }
  100% {
    content: '....';
  }
}


.logo-text{
  color:#353535;
  font-size:14px;
}

/*@media screen and (max-width: 767px) {
  .modal-content .loading-container{
    height: 434px;
  }
}*/

/* 로딩 이미지를 회전시키는 애니메이션 */
@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.loading-container {
  position: relative;
  width: 100%;
  overflow: hidden;
}




.loading-line {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background-color: white; /* 흰색 선 */
  animation: moveLine 4s infinite ease-in-out; /* 4초 동안 위아래 반복 */
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.8), 0 0 20px rgba(255, 255, 255, 0.6); /* 네온 효과 */
  animation: moveLine 4s infinite ease-in-out, flicker 1s infinite alternate; /* 네온 움직임 & 반짝임 */
}

@keyframes moveLine {
  0% {
      top: 0;
  }
  50% {
      top: 100%; /* 아래로 이동 */
  }
  100% {
      top: 0; /* 다시 위로 이동 */
  }
}

@keyframes flicker {
  0% {
      opacity: 0.8;
      box-shadow: 0 0 8px rgba(255, 255, 255, 0.5), 0 0 15px rgba(255, 255, 255, 0.3);
  }
  100% {
      opacity: 1;
      box-shadow: 0 0 12px rgba(255, 255, 255, 0.9), 0 0 25px rgba(255, 255, 255, 0.6);
  }
}

.loading-image img {
  animation: rotate 2s linear infinite;
}

.loading-text {
  margin-top: 30px;
  font-size: 16px;
  color: #fff; /* 텍스트 색상을 조절하세요 */
}

.modal-content #step2{
  position: relative;
}

.modal-content #step3{
  position: relative;
}

.modal-content #step4{
  position: relative;
  background: #4c4847 !important;
  padding-bottom:0px !important;
}


.modal-content #step5{
  position: relative;
}


.modal-content #step7{
  position: relative;
}

.modal-content .box-body .row>label{
  font-size:16px;
}

.modal-content #step7 .form-control>.d-flex.wrap li .rdo-wrap label{
  border-radius: 5px;
}

.modal-content #step7 .form-control>.d-flex.wrap li:first-child .rdo-wrap input:checked+label{
  background: #f7e2bd;
}

.modal-content #step7 .form-control>.d-flex.wrap li:first-child .rdo-wrap input:checked+label::after{
  background: #ff4813
}
.modal-content #step7 .form-control>.d-flex.wrap li:first-child input:checked+label::before{
  border-color: #ff4813
}

/* nth-child(2) */
.modal-content #step7 .form-control>.d-flex.wrap li:nth-child(2) .rdo-wrap input:checked+label{
  background: #d2e1f2;
}

.modal-content #step7 .form-control>.d-flex.wrap li:nth-child(2) .rdo-wrap input:checked+label::after{
  background: #0047bb
}
.modal-content #step7 .form-control>.d-flex.wrap li:nth-child(2) input:checked+label::before{
  border-color: #0047bb
}


.modal-content #step7 .form-control>.d-flex.wrap li:nth-child(3) .rdo-wrap input:checked+label{
  background: #c3dec3;
}

.modal-content #step7 .form-control>.d-flex.wrap li:nth-child(3) .rdo-wrap input:checked+label::after{
  background: #368556
}
.modal-content #step7 .form-control>.d-flex.wrap li:nth-child(3) input:checked+label::before{
  border-color: #368556
}

.modal-content #step7 .form-control>.d-flex.wrap li:nth-child(4) .rdo-wrap input:checked+label{
  background: #fad6dc;
}

.modal-content #step7 .form-control>.d-flex.wrap li:nth-child(4) .rdo-wrap input:checked+label::after{
  background: #eb002a
}
.modal-content #step7 .form-control>.d-flex.wrap li:nth-child(4) input:checked+label::before{
  border-color: #eb002a
}


.modal-content #step8{
  background:#fff url(/_image/bg/bg-step03.png)center center /cover no-repeat;
}

.modal-content .form-control>.d-flex.wrap li{
  background: none;
  border-radius: 20px;
  padding:0;
}


.modal-content .form-control>.d-flex.wrap .rdo-wrap input+label::before{
  top: 50%;
  transform: translateY(-50%);
  left:10px;
}

.modal-content .form-control>.d-flex.wrap .rdo-wrap input:checked+label{
  background: #c3dec3;
}
.modal-content .form-control>.d-flex.wrap .rdo-wrap input:checked+label::after{
  top: 50%;
  transform: translateY(-50%);
  left:15px;
}



.modal-content .step-box .rdo-wrap label{
  background: #fff;
  padding: 10px;
  padding-left: 40px;
  border-radius: 20px;
}

.modal-content #step9{
  background:#4c4847 !important;
}

.modal-content #step10{
  background:#fff url(/_image/bg/bg-step01.png)center center /cover no-repeat;
}


/* 반응형 미디어 쿼리 */
@media (max-width: 768px) {
  .modal-content .step-box .rdo-wrap label{
    font-size:13px;
  }
}



.step-foot {
  text-align: center;
}


.progress-list {
  display: flex;
  justify-content: center;
  gap: 10px;
  list-style: none;
}

.progress-item {
  width: 60px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  border-radius: 5px;
  font-size: 14px;
  background-color: #ccc; /* 초기 색상 */
  color: white;
  opacity: 0.5;
  transition: background-color 1s ease, opacity 1s ease; /* 애니메이션 효과 */
}

.progress-item[data-status="complete"] {
  background-color: var(--highlight-color, #4caf50); /* 기본 색상 */
  opacity: 1;
}

/* 각 progress-item별 색상 */
.progress-item:nth-child(1)[data-status="complete"] {
  --highlight-color: #4caf50; /* 초록 */
}
.progress-item:nth-child(2)[data-status="complete"] {
  --highlight-color: #03a9f4; /* 파랑 */
}
.progress-item:nth-child(3)[data-status="complete"] {
  --highlight-color: #ff9800; /* 주황 */
}
.progress-item:nth-child(4)[data-status="complete"] {
  --highlight-color: #9c27b0; /* 보라 */
}
.progress-item:nth-child(5)[data-status="complete"] {
  --highlight-color: #ff5722; /* 빨강 */
}

/* 반응형 미디어 쿼리 */
@media (max-width: 768px) {
  .progress-item {
    width: 50px; /* 작은 화면에서 아이템 크기 조정 */
    height: 25px;
    font-size: 12px;
    line-height: 25px;
  }
}



.face-time img{
  width:100%;
  height: 100%;
  object-fit: cover;
}

.face-select{
  display: flex;
  gap:10px
}
.face-select.red li{
  background: #df143a;
}
.face-select.green li{
  background: #338b49;
}
.face-select li{
  flex:1;
  color:#fff;
  border-radius: 10px;
  padding:10px;
  cursor: pointer;
}

.face-info{
  font-weight: bold;
  color:#666;
  margin:10px 0;
}
.face-info em{
  color:#368556; 
}


#step-modal .step-box{
  position: relative;
  height: auto;
  border-radius: 10px;
  color: #000;
  overflow: hidden;  
  padding:0;
}

#step-modal .step-box.scroll{
  position: relative;
  margin-top:30px;
  height: 500px;
  max-height: 500px;
  overflow-y: scroll;
}


/* test */
/* @media screen and (max-width: 520px) {
  #step-modal .step-box.scroll{
    height: 50vh;
    max-height: 50vh;
  }
} */

/* 스크롤기능은살리고,스크롤바만가리기 */
#step-modal .step-box.scroll::-webkit-scrollbar {
  display: none;
}



#step-modal .step-box.ab{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  width: 90%;
  padding:50px;
}

#step-modal .step-box.ab.none{
  background: none;
}


#step-modal .step-box .box-header{
  position: absolute;
  text-align: center;
  color: #000;
  display: flex;
  margin-top: 10px;
  padding: 12px;
  top: 0;
  left: 0;
  width: 100%;
  justify-content: center;
  align-items: center;
  border-radius: 10px;
  font-weight: 500;
  font-size: 20px;
  z-index: 1;
}

#step-modal .step-box .box-header.white{
  color:#fff;
}

#step-modal .step-box .box-header.green{
  background: #368556;
}
#step-modal .step-box .box-header.orange{
  background: linear-gradient(to right, #fea406, #c2156d);
}

#step-modal .step-box .box-header.ocean{
  background: linear-gradient(to right, #00a5dc, #6c25a4);
}


#step-modal .step-box .box-header.deep_green{
  background: #368580;
}

#step-modal .step-box .rdo-wrap,
#step-modal .step-box .rdo-wrap label {
  width: 100%;
}

.step-box .height_graph{
  position: relative;
  display: flex;
  justify-content: space-between;
  margin:40px 0;
  gap:10px;
}

.step-box .height_graph li{
  position: relative;
  height: 125px;
  border: solid 1px #fff;
  font-weight: bold;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  flex:1;
}

.step-box .height_graph li span{
  font-size:20px;
  line-height: 1.8;
  color:#fff;
  text-align: center;
  border-radius: 15px;
  display: inline-block;
  width:60px;
  width:100%;
}

.step-box .height_graph li:nth-child(1) span{
  height: 100%;
  background: #fa5a5c;
}
.step-box .height_graph li:nth-child(2) span{
  height: 80%;
  background: #41d1ff;
}
.step-box .height_graph li:nth-child(3) span{
  height: 100%;
  background: #ffcf47;
}
.step-box .height_graph li:nth-child(4) span{
  height: 50%;
  background: #ffb377;
}
.step-box .height_graph li:nth-child(5) span{
  height: 100%;
  background: #4b6588;
}

.box-body{
  margin-top:70px;
}

.box-body .form-control.none{
  border:none;
  padding:0;
  background: none;
}

.box-body .row>label{
  font-size:16px;
  text-transform: uppercase;
}

.box-body .btn-group{
  margin:0;
}


.box-title.center{
  text-align: center;
  font-size:18px;
}

.box-group{
  margin:10px 0;
  display: flex;
  gap:10px;
}
.box-group.center{
  text-align: center;
}

.box-group.column{
  flex-direction: column;
}

.box-group a{
  min-width: 100px;
  border:solid 1px #000;
  border-radius: 10px;
  color:#000;
  font-size:17px;
}

.box-group a.point{
  background: #368556;
  color:#fff;
  border-color:#368556;
}



.cetner-box{
  display: flex;
  justify-content: center;
  align-items: center;
}



.loading-rainbow {
  margin:20px 0;
  width: 100%;
  height: 25px;
  background-color: white;
  border-radius: 15px;
  border: 6px solid #fff;
  overflow: hidden;
  position: relative;
}

.loading-rainbow .progress-bar {
  width: 0%;
  height: 100%;
  background: linear-gradient(90deg, #f87e17, #f25726, #a4037e, #7d1899, #4053bd, #138dd3, #00a5dc); /* 지정된 색상 */
  border-radius: 15px; 
  animation: progress 5s forwards; /* 로딩바 채워짐 애니메이션 */
  position: relative;
}

.loading-rainbow .progress-bar::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -120%;
  width: 80px;
  height: 250%;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 50%, rgba(255, 255, 255, 0) 100%);
  transform: rotate(35deg);
  z-index: 1;
  pointer-events: none;
  animation: lightSweep 1s ease-out forwards;  
  animation-delay: 5s; /* 로딩바가 다 채워진 후 애니메이션*/
}

@keyframes progress {
  0% {
    width: 0%;
  }
  100% {
    width: 100%;
  }
}

@keyframes lightSweep {
  0% {
    left: -120%;
    opacity: 0;
  }
  50% {
    left: 100%;
    opacity: 1;
  }
  100% {
    left: 120%;
    opacity: 0;
  }
}


.loading-wrap {
  position: relative;
  margin: 20px auto;
}

.loading {
  background-color: #ececec;
  box-shadow: inset 0 0.5em 0.5em rgba(94, 49, 49, 0.05);
  bottom: 0;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  
}

.loading.active {
  transition: all 5000ms ease-out;
  transform: translateX(100%);
  -webkit-transform: translateX(100%)
}


@media screen and (max-width: 767px) {
  #step-modal .step-title{
    font-size:26px;
  }
  #step-modal .step-desc{
    font-size: 14px;
    /*margin:10px 0;*/
  }
  #step-modal .step-point{
    font-size:17px;
    margin:15px 0;
  }
  .modal-content #step1 ul li{
    /* padding:10px; */
    font-size:14px;
  }  
  .box-body .row>label{
    font-size:15px
  }
}

@media screen and (max-width: 767px) {
  #step-modal .modal-wrap{
    height: calc(100% - 80px);
	margin: 40px auto;
  }

  #step-modal .modal-container{
    height: 100% !important;
  }

  #step-modal .modal-body{
    height: 100% !important;
  }

  #step-modal .modal-content{
    height: 100% !important;
  }

  #step-modal .modal-content .step{   
    height: 100% !important;
    min-height: 100% !important;
	max-height: 100% !important;
  }
}

#step-modal #step0 .btn-group, #step-modal #step0_2 .btn-group, #step-modal #step0_3 .btn-group {
  margin:0px 0px 0px -147px !important;
}

#step-modal #step6 .btn-group, #step-modal #step7 .btn-group, #step-modal #step8 .btn-group {
  margin:0px 0px 0px -110px !important;
}

#step-modal .step .btn-group {
  position: absolute !important;
  left: 50% !important;
  bottom: 25px !important;
}

#step-modal .step .btn-group .btn {
  margin:0px !important;
}