@charset "utf-8";

/********************
** header
********************/
header{left:0;top:0;border-bottom:1px solid #91949f;}
.toggleBtn{cursor:pointer;}
.toggleBtn span{transition:ease-in-out 0.3s;}
.toggleBtn span:nth-child(1){left:0;top:0}
.toggleBtn span:nth-child(2){left:0;top:10px;}
.toggleBtn span:nth-child(3){left:0;top:20px}

.toggleBtn.active span:nth-child(1){
  left:50%;top:50%;
  transform:translate(-50%,-50%) rotate(45deg);
  background:#222;
}
.toggleBtn.active span:nth-child(2){left:9999px;top:10px;}
.toggleBtn.active span:nth-child(3){
  left:50%;top:50%;
  transform:translate(-50%,-50%) rotate(-45deg);
  background:#222;
}

.dropMenuArrow{transform:rotate(0deg);transition:ease-in-out 0.3s;}
.dropDownMenu.active .dropMenuArrow{transform:rotate(180deg);}

.menu{position:relative;}
.dropDownMenu{position:relative;}

/* 기본: 숨김 */
.dropDownMenu .dropDownCnt{
  position:absolute;
  left:0;
  top:100%;
  width:100%;
  min-width:180px;
  z-index:1000;

  background:#fff;
  border:1px solid #eeeef0;

  opacity:0;
  visibility:hidden;
  transform:translateY(-8px);
  transition:opacity .2s ease, transform .2s ease, visibility .2s ease;

  box-sizing:border-box;
}

/* hover 시 표시 */
.dropDownMenu:hover .dropDownCnt{
  opacity:1;
  visibility:visible;
  transform:translateY(0);
}


.dropDownCnt > a{
  display:flex;            /* inline이면 padding/height 체감이 약함 */
  align-items:center;      /* 세로 중앙 */
  width:100%;
  box-sizing:border-box;   /* padding 포함 계산 */
  border-bottom:1px solid #eeeef0;
}
.dropDownCnt > a:last-child{border-bottom:0;}





/********************
** 메인배너(mainBanner)
********************/
.navBtn{background:linear-gradient(-135deg, #C8B1FF 0%, #FFE8BF 100%); box-shadow: 0 0 8px rgba(0, 0, 0, 0.25); bottom:40px; right:40px}
.navBtn {    transition: all 0.3s ease-in-out;}
.navBtn.hide-nav {    opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(20px); }


.mainBanner{background:url('/img/mainBanner.jpg'); background-size:cover; background-position:center;}
.mainCard .mainCardBox {    left: 0;    transition: all 0.5s;    box-shadow: 0 0 16px rgba(0,0,0,0.15);     animation: verticalSlide 5s linear infinite;}
.mainCard .mainCardBox:last-child {    animation-delay: -2.5s;}
@keyframes verticalSlide {
    0% {
        top: 20px;         
        transform: scale(0.9); 
        z-index: 1;        
        opacity: 0.7;    
        filter: brightness(90%); 
    }

    20% {
        top: 0px;          
        transform: scale(1);  
        z-index: 2;       
        opacity: 1;      
        filter: brightness(100%);
    }
    50% {
        top: 0px;          
        transform: scale(1);
        z-index: 2;
        opacity: 1;
        filter: brightness(100%);
    }
    60% {
        top: -20px;      
        transform: scale(0.9); 
        z-index: 0;       
        opacity: 0;      
    }
    100% {
        top: 20px;     
        transform: scale(0.9);
        z-index: 0;
        opacity: 0;  
    }
}
.mainBtn{background:linear-gradient(to bottom, #1F46D6 0%, #275BE9 100%);}

.subJob{background:url('/img/serviceBg.jpg')center center no-repeat; background-size:cover}
.subJobBox{border:1px solid #D9DADE;}
.video{aspect-ratio: 16 / 9;}

/********************
** star section
********************/
.start{background:url('/img/problemBg.jpg')center center no-repeat; background-size:cover}
.startBox{box-shadow:0 0 16px rgba(0, 0, 0, 0.10)}
.startTxt{border-bottom:1px dashed #B8BAC1;}
.serviceDetailTxt{background:linear-gradient(90deg, #7A1EE3 0%, #6618BF 100%);}


/********************
** calculation section
********************/
.calculation {    background: url('/img/calculationBg.jpg');     background-size: cover;     background-position: center;}
.calculationBox {    border: 5px solid #340B6A;     border-bottom: none;     border-radius: 36px 36px 0 0;    overflow: hidden;}
.calculationInput {    background: none;    border: none;}
.calculationInput::placeholder {        color: #999999;           font-size: 16px;         font-weight: 400;        opacity: 1;  }
.calculationInput:focus {        outline: none;}
.calculationInput::-webkit-outer-spin-button,
.calculationInput::-webkit-inner-spin-button {        -webkit-appearance: none;        margin: 0;}
.calculationInput[type=number] {        -moz-appearance: textfield;}
.step-section {    transition: all 0.3s ease;}
.hidden {    display: none !important;}

.benefitBox{border:1px solid #883FFF;}
.benefitBoxRight{background:url('/img/benefit-002.svg'); background-size:100%; background-repeat: no-repeat; background-position: top;}
.chat_bubble::after {    content: '';    position: absolute;    left: -12px;      top: 20px;        border-right: 12px solid #fff;     border-top: 8px solid transparent;     border-bottom: 8px solid transparent; }
.chat_bubbleR::before{    content: '';    position: absolute;    right: -12px;      top: 20px;        border-left: 12px solid #DED4FF;     border-top: 8px solid transparent;     border-bottom: 8px solid transparent; }

/********************
** portaLife
********************/
.portalLifeLeft{border-radius: 16px 0 0 16px; box-shadow: -2px 4px 8px rgba(0, 0, 0, 0.25);}
.portalLifeRight{box-shadow: -2px 4px 8px #3D79F4;}
.vsIcon{top:50%; left:0;transform: translate(-50%, -50%); }

.step{background:url('/img/stepBg.jpg')center center; background-size:cover;}
.stepBox{display:grid; grid-template-columns: repeat(4 , 1fr);}
.stepPoint {    left: 50%;     top: -30px; animation: bounce 2s infinite ease-in-out;}
@keyframes bounce {
    0% {
        transform: translate(-50%, 0);
    }
    50% {
        transform: translate(-50%, -15px);
    }
    100% {
        transform: translate(-50%, 0);
    }
}

/********************
** Contact
********************/
.online{background:url('/img/contactBg.jpg'); background-size:cover;}
.inputBox{ padding: 24px; border: 1px solid #D9DADE; border-radius: 4px;}
.inputBox:placeholder-shown{color: #91949f; line-height: 1em;}

.custom-checkbox{width: 20px; height: 20px; padding: 0; border: 1px solid #3D79F4; 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: #3D79F4; border-color: #3D79F4;}
.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{ cursor: pointer;}

/********************
** subBanner
********************/
.subBanner1{background:url('/img/subBanner-001.jpg')center center; background-size:cover}
.subBanner2{background:url('/img/subBanner-002.jpg')center center; background-size:cover}
.subBanner3{background:url('/img/subBanner-003.jpg')center center; background-size:cover}
.subBanner4{background:url('/img/subBanner-004.jpg')center center; background-size:cover}
.subBanner5{background:url('/img/subBanner-005.jpg')center center; background-size:cover}
.subBanner6{background:url('/img/subBanner-006.jpg')center center; background-size:cover}

/********************
** success
********************/

/** List **/
.successTable th {border-top:2px solid #26272B;}
.successTable td {border-top:1px solid #D9DADE;}
.successTable tbody:last-child {border-bottom:2px solid #26272B;}
.catTabs{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  background:#fff;
  border:1px solid #E6E8EE;
}

.catTabs a{
  display:flex;
  align-items:center;
  justify-content:center;

  background:#fff;
  color:#666;
  text-decoration:none;
  white-space:nowrap;

  border-right:1px solid #E6E8EE;
  border-bottom:1px solid #E6E8EE;

  min-height:56px;
}

/* 오른쪽 라인 제거 (4번째마다) */
.catTabs a:nth-child(4n){
  border-right:0;
}

/* ✅ 마지막 줄은 하단 라인 제거 (겹침 방지) */
.catTabs a:nth-last-child(-n+4){
  border-bottom:0;
}

.catTabs a.is-active{
  background:#EEF5FF;
  color:#1F4BB6;
  font-weight:600;
}


/* 모바일: 2개 */
@media (max-width:768px){
  .catTabs{ grid-template-columns:repeat(2, 1fr); }

  .catTabs a:nth-child(3n){ border-right:1px solid #E6E8EE; }
  .catTabs a:nth-child(2n){ border-right:0; }

  /* ✅ 2열 기준 마지막 줄(최대 2개) 하단 라인 제거 */
  .catTabs a:nth-last-child(-n+3){ border-bottom:1px solid #E6E8EE; } /* 태블릿 규칙 무효화 */
  .catTabs a:nth-last-child(-n+2){ border-bottom:0; }
}

    /* ---------- 갤러리 그리드 ---------- */
    .caseGrid{
      display:grid;
      grid-template-columns:repeat(3, minmax(0, 1fr)); /* 웹 3개 */
      gap:24px;
      row-gap:56px;
    }
    @media (max-width: 1024px){
      .caseGrid{ grid-template-columns:repeat(2, minmax(0, 1fr)); gap:18px; row-gap:32px;} /* 태블릿 2개 */
    }
    @media (max-width: 768px){
      .caseGrid{ grid-template-columns:repeat(2, minmax(0, 1fr)); gap:16px; row-gap:24px;} /* 모바일도 2개 */
    }

    /* ---------- 카드 ---------- */
    .caseCard{
      text-decoration:none;
      color:inherit;
      display:block;
    }
    .caseThumb{
      width:100%;
      aspect-ratio:1 / 1;
      background:#F2F4F7;
      overflow:hidden;
    }
    .caseThumb img{
      width:100%;
      height:100%;
      object-fit:cover;
      display:block;
    }
    .caseCat{
      display:inline-block;
      background:#EEF5FF;
      color:#1F4BB6;
    }
    .caseTit{
      word-break:keep-all;
    }

/** view **/
.successBLine {border-bottom:1px solid #D9DADE;}
.successBtnLine {border:1px solid #D9DADE;}

/********************
** notice
********************/

/** List **/
.noticeTable th {border-top:2px solid #26272B;}
.noticeTable td {border-top:1px solid #D9DADE;}
.noticeTable tbody:last-child {border-bottom:2px solid #26272B;}

/** view **/
.noticeBLine {border-bottom:1px solid #D9DADE;}
.noticeBtnLine {border:1px solid #D9DADE;}

/********************
** notice
********************/
/** List **/
.sonsultTable th {border-bottom:1px solid #D9DADE; border-top:1px solid #D9DADE; border-right:1px solid #D9DADE;}
.sonsultTable th:last-child {border-right:none;}
.sonsultTable td {border-bottom:1px solid #D9DADE; border-top:1px solid #D9DADE; border-right:1px solid #D9DADE;}
.sonsultTable td:last-child {border-right:none;}

.consiltCntLine {border-top:1px solid #EEEEF0;}
.consiltCnts .consiltCntLine:last-child {border-bottom:1px solid #EEEEF0;}