@charset "utf-8";


/********************
** 메인배너
********************/
.w_main_center{margin-top:-54px;}
.main_left{position:absolute; top:50%; left:0; animation: floatAnimation1 3s ease-in-out infinite;}
.main_right{position:absolute; top:30%; right:0; animation: floatAnimation2 3s ease-in-out infinite;}
@keyframes floatAnimation1 {
    0%, 100% {
      transform: translateY(0);
    }
    50% {
      transform: translateY(-10px);
    }
  }
  @keyframes floatAnimation2 {
    0%, 100% {
      transform: translateY(-7px);
    }
    50% {
      transform: translateY(3px);
    }
  }


/********************
** 스탭
********************/

@keyframes drawLineAnimation {
    to {
        stroke-dashoffset: 0; 
    }
}
@keyframes fillBackgroundAnimation {
    from { opacity: 0; }
    to { opacity: 1; }
}
@keyframes fadeInIconAnimation {
    from { opacity: 0; }
    to { opacity: 1; }
}
/* (기존) 텍스트용 키프레임 */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

.growth_roadmap {    position: relative;    opacity: 0;    visibility: hidden;    transition: opacity 0.5s ease-out;}
.growth_roadmap.animate {    opacity: 1;    visibility: visible;}
.roadmap_milestones {    position: relative;    z-index: 10;     height: 100%;    margin: 0 auto;}
.milestone {    position: absolute;    width: 200px;     opacity: 0;    visibility: hidden;    transform: translateY(20px);}
.growth_roadmap.animate .milestone {    animation-name: fadeInUp;    animation-duration: 0.6s;    animation-timing-function: ease-out;    animation-fill-mode: forwards;    animation-play-state: running;    visibility: visible;}
.growth_roadmap.animate .milestone:nth-child(1) { animation-delay: 1.2s; }
.growth_roadmap.animate .milestone:nth-child(2) { animation-delay: 1.4s; }
.growth_roadmap.animate .milestone:nth-child(3) { animation-delay: 1.6s; }
.growth_roadmap.animate .milestone:nth-child(4) { animation-delay: 1.8s; }
#roadmap_line {    stroke-dasharray: 9999;    stroke-dashoffset: 9999;     visibility: hidden;}
.growth_roadmap.animate #roadmap_line {    visibility: visible;    animation-name: drawLineAnimation;    animation-duration: 1.5s;      animation-timing-function: ease-out;    animation-delay: 0.2s;        animation-fill-mode: forwards;     animation-play-state: running;}
#roadmap_fill {    opacity: 0;     visibility: hidden;}
.growth_roadmap.animate #roadmap_fill {    visibility: visible;    animation-name: fillBackgroundAnimation;    animation-duration: 0.7s;    animation-timing-function: ease-in;    animation-delay: 1.2s;     animation-fill-mode: forwards;     animation-play-state: running;}
#roadmap_mover_icon {    opacity: 0;     visibility: hidden;}
.growth_roadmap.animate #roadmap_mover_icon {    visibility: visible;    animation-name: fadeInIconAnimation;    animation-duration: 0.3s;    animation-delay: 0.5s;     animation-fill-mode: forwards;     animation-play-state: running;}
.stepBox{bottom:0; z-index:-1}





/********************
** 서비스
********************/
.serviceBox{display:grid; grid-template-columns: repeat(2, 1fr);}
.serviceList{  cursor: pointer;    border: 1px solid transparent;    border-radius: 16px;    background-image:linear-gradient(#3E454B, #3E454B), linear-gradient(to right bottom, #29F280, #121621, #29F280);   background-origin: padding-box, border-box;      background-clip: padding-box, border-box; }
.serviceList1 {    position: relative;    border-radius: 16px;    background: #3E454B;    padding: 1px;     z-index: 1;  }
.serviceList1::before {    content: "";    position: absolute;    inset: 0;    padding: 1px;    border-radius: 16px;    background: linear-gradient(to right bottom, #29F280, #121621, #29F280);    -webkit-mask:      repeating-linear-gradient(0deg, #fff 0 6px, transparent 6px 12px),      repeating-linear-gradient(90deg, #fff 0 6px, transparent 6px 12px);    -webkit-mask-composite: xor;    mask-composite: exclude;    pointer-events: none;  }  
.serviceList1 > .content {    position: relative;    background: #121621;    border-radius: 15px;    overflow: hidden;}
.serviceImg {    bottom: 0;    clip-path: inset(0 100% 0 0);     transition: clip-path 0.5s ease-out; }
.serviceList1 > .content:hover .serviceImg {    clip-path: inset(0 0 0 0); }

.modal-overlay {    display: none;     position: fixed;    z-index: 1000;     left: 0;    top: 0;    width: 100%;    height: 100%;    overflow: auto;    background-color: rgba(0, 0, 0, 0.85);    align-items: center;    justify-content: center;}
.modal-overlay.active {    display: flex; }
.modal-content {    display: block;    max-width: 90%;     max-height: 90vh;     width: auto;    height: auto;}
.modal-close {    position: absolute;    top: 20px;    right: 20px;    color: #f1f1f1;    font-weight: bold;    cursor: pointer;    transition: 0.3s;}
.modal-close:hover {    color: #bbb;}

/********************
** 로고 슬라이드
********************/
.resultImg{top:50%; left:50%; transform: translate(-50%, -50%);}
.logoSlide {    overflow: hidden; }
.swiper-container {    width: 100%;}
.swiper-wrapper {   transition-timing-function: linear !important;}


/********************
** faq
********************/
.faq_answer {max-height: 0;overflow: hidden;transition: max-height 0.5s ease-in-out, padding 0.5s ease-in-out, opacity 0.4s ease-in-out;opacity: 0;}
.faq_question{border-radius:16px 16px 16px 16px;}
.faq_item.active .faq_question{ border-radius: 16px 16px 0 0; border-bottom:none; background:#41424B;}
.faq_item.active .faq_answer {max-height: 500px; padding:24px 36px; opacity: 1;background:#41424B;border-radius: 0 0 16px 16px; border:1px solid #181A47; border-top:none;}
.faq_item.active .icon_plus {transform: rotate(180deg); }
.icon_plus {transition: transform 0.3s ease-in-out;}

.lastbanner{background:url('/img/final.jpg'); background-size:cover; background-position:center}


/********************
** Contact
********************/
.online {    bottom: -348px;     z-index: 999;    transition: bottom 0.5s ease-in-out; }
.online.active {    bottom: 0;}
.online .UpBottom {    display: flex;border-radius: 8px 8px 0 0; }
.online .DownBottom {    display: none;}
.online.active .UpBottom {    display: none;}
.online.active .DownBottom {    display: flex; border-radius: 8px 8px 0 0;}
.inputBox{ padding:0 24px; height:52px; border-radius: 4px;}
.inputBox:placeholder-shown{color: #91949f; line-height: 1em;}
.custom-checkbox{width: 20px; height: 20px; padding: 0; border: 1px solid #26272b; border-radius: 4px; background-color: #fff; margin-right: 10px; transition: background-color 0.3s, border 0.3s; position: relative;}
.checkpolicy input[type="checkbox"] {display: none;}
.checkpolicy input[type="checkbox"]:checked + .custom-checkbox{background-color: #121621; border-color: #121621;}
.checkpolicy input[type="checkbox"]:checked + .custom-checkbox::after{content: ''; position: absolute; top: 2px; left: 5px; width: 5px; height: 8px; border: solid white; border-width: 0 3px 3px 0; transform: rotate(45deg);}
.moreBtn{text-decoration: underline;}
.onlineBtn{background:#121621; cursor: pointer; height:52px;}