/* 공통 */
html {
  font-size: 62.5%;
}
button {
  background: inherit;
  border: 0;
}

.w_1600 {width: 1600px; margin: 0 auto;}
.w_1400 {width: 1400px; margin: 0 auto;}
.w_1200 {width: 1200px; margin: 0 auto;}




.main_banner {width: 100%; overflow: hidden; height: 950px; position: relative; background-color: #FFF;}
.main_wrap {width: 100%; height: 950px;}
.main_slide {width: 52%; height: 100%; overflow: hidden;}
.main_slide .img_box {width: 100%; height: 100%;}


.main_slide .img_box.img1 {background: url(/img/bg2.png) no-repeat; background-size: cover; background-position: center;}
.main_slide .img_box.img2 {background: url(/img/bg1.png) no-repeat; background-size: cover; background-position: center;}
.main_slide .img_box.img3 {background: url(/img/bg3.png) no-repeat; background-size: cover; background-position: center;}

.swiper-container-horizontal>.swiper-pagination-bullets, .swiper-pagination-custom, .swiper-pagination-fraction {width: 50% !important;}


.main_txt {margin-right: 160px; text-align: right; width:calc(48% - 160px); height: 100%; position: relative; z-index: 10;}
.main_txt > .txt {position: absolute; top: 50%; right: 0;  transform: translateY(-50%) translateY(40px);}


.main_txt .m_b_btn {display: block; width: 270px; height: 70px; margin-left: auto; border: 2px solid #000; border-radius: 40px; font-size: 30px; font-weight: 500; position: absolute; bottom: 200px; right: 0; overflow: hidden; text-align: center; line-height: 65px;}


.main_txt .m_b_btn::before {
  content: "";
  position: absolute;
  inset: 0;

  background: #000;

  transform: scaleX(0);
  transform-origin: left;

  transition: transform 0.5s ease;
  z-index: -1;
}

/* hover */
.main_txt .m_b_btn:hover::before {
  transform: scaleX(1);
}

/* 글자 색 */
.main_txt .m_b_btn:hover {
  color: white;
}

.main_txt h2 {font-size: 50px; font-weight: 300; letter-spacing: -1px; margin-bottom: 40px;}
.main_txt h2 b{font-weight: 700;}
.main_txt p {font-size: 20px; color: #555; margin-bottom: 110px;}






/* 🔥 기본 숨김 */
.txt {
  opacity: 0;
  transform: translateY(50px);
  transition: 0.8s ease;
}

/* 🔥 활성 */
.txt.active {
  opacity: 1;
  transform: translateY(-50%) translateY(0);
}


/* section1 */

section {padding-top: 150px; padding-bottom: 150px;}
.sec1 {background-color: #FFF;}
.sec1 .sec_title {margin-bottom: 100px;}
.sec_title {font-size: 50px; font-weight: 700; text-align: center; letter-spacing: -1px;}
.sec1_num > li > img {width: 52px; display: block; margin: 0 auto;}
.sec1_num > li > h5 {color: #19C3A2; font-size: 30px; font-weight: 600; margin-top: 45px; margin-bottom: 25px; text-align: center;}
.sec1_num > li > p {font-size: 20px; font-weight: 500; color: #8E8E8E; text-align: center;}
.sec1_num > li {width: 22%;}
.sec1_num > li > h5 > span {display: inline-block; font-size: 50px;}
.sec2 .sec_title {margin-bottom: 50px; text-align: left; }
.sec2 .title_sub {margin-bottom: 100px; color: #666; font-size: 24px;}
.sec2_li > li {width: 23%;}
.sec2_li > li > video {width: 100%; height: 100%; margin-bottom: 40px; border-radius: 20px;}
.sec2_li > li > .img_wrap {margin-bottom: 40px; border-radius: 20px; overflow: hidden;}
.sec2_li > li > span {color: #19C3A2; display: inline-block; font-weight: 600; margin-bottom: 20px;}
.sec2_li > li > h6 {font-size: 32px; font-weight: 700; margin-bottom: 20px;}
.sec2_li > li > p {font-size: 18px; color: #666; line-height: 30px;}
.sec2 { background-color: #f7f7f7;}

.sec2_li > li:first-child .img_wrap {background-color: #89E9D6;}
.sec2_li > li:nth-child(3) .img_wrap {background-color: #B1DCFF;}
.sec2_li > li:nth-child(4) .img_wrap {background-color: #FFE0B5;}
.sec3{background-color: #19C3A2;}
.sec3_wrap { align-items: flex-start;}
.sec3_left {width: 22%; position: sticky;
  top: 100px; }
.sec3_right {width: 75%;}
.sec3_chat_li {display: flex; flex-direction: column; width: 100%; gap: 60px 0;
}

.sec3_chat_li::after {content: "";display: block; clear: both;}


.msg {
  display: flex;
}


.msg.left {
  justify-content: flex-start;
}

.msg.right {
  justify-content: flex-end;
}
.sec3_chat_li > li .bubble {background-color: #FFF; border-radius: 40px 0 40px 40px; width: fit-content; padding: 20px 30px; height: 85px; font-size: 28px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08); transition: box-shadow 0.3s ease, transform 0.3s ease;}




.sec3_chat_li > li.left .bubble {border-radius: 0 40px 40px 40px;}

.bubble {
  transition: transform 0.2s ease-out;
  will-change: transform, opacity;
  font-weight: 400;
}
.bubble > b{font-weight: 700;}


.container {
  display: flex;
  align-items: flex-start; /* 핵심: 부모 컨테이너 내에서 top 고정 */
  justify-content: space-between;
  
}

.sidebar {
  width: 300px;
  position: sticky;
  top: 0; /* 뷰포트 최상단에 닿았을 때 고정 */
  height: 100vh; /* 사이드바 높이 (원하는 높이) */
  background-color: #f0f0f0;
}

.main-content {
  width: 77%;
  height: 957px; /* 긴 스크롤 유도 */
}

.sec3_left h4 {font-size: 50px; font-weight: 500; margin-bottom: 30px; color: #FFF; letter-spacing: -1px; white-space: nowrap;}
.sec3_left h4 > b {font-weight: 800;}
.sec3_left > img {width: 65%;}



.sec4 {
  height: 500px;
  overflow: hidden;
  position: relative;
  width: 90%; 
  margin: 0 auto;
}


.sec4 .bg_inner {
  position: fixed;
  background-image: url("/img/sec4_bg.png");
  background-size: cover;
  background-position: top;
  z-index: -1;
  width: 100%; 
  height: 100%;
  top: 0;
  left: 0;
  overflow: hidden;
}



.sec4_txt {font-size: 60px; font-weight: 300; position: absolute; color: #FFF; text-align: center; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; font-weight: 600; line-height: 1.5;}


.sec5 {background-color: #f7f7f7;}
.sec5 .sec_title {text-align: left; margin-bottom: 150px;}
.sec5_li {margin-bottom: 100px;}
.sec5_li > li {background-color: #FFF; width: 23%; border-radius: 30px; padding: 50px 30px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12); position: relative;}
.sec5_li > li > h6 {margin-bottom: 20px; font-size: 24px; font-weight: 700;}
.sec5_li > li > p {font-size: 18px; color: #666; line-height: 30px; margin-bottom: 34px;}
.sec5_li > li > img {width: 80px; }

.sec5_wrap > p {text-align: center; font-size: 20px; color: #555; line-height: 35px;}
.sec5_wrap > p > b{font-weight: 700; color: #121212; font-size: 18px;}
section.sec6 {padding-top: 100px;}


.sec6 {background-color: #FFF;}
.svc-timeline {
  position: relative;
  width: 1100px;
  overflow: hidden;
}

.sec6_left {position: sticky; top: 120px;}
.sec6_wrap {align-items: start;}


.sec6_left > h5 {font-size: 30px; font-weight: 700; margin-bottom: 10px;}
.sec6_left > h6 {font-size: 90px; color: #ededed; font-weight: 800; line-height: 1;}


/* 🔥 가운데 세로 라인 */
/* .svc-timeline::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  width: 2px;
  height: 100%;
  background: #2dd4bf;
  transform: translateX(-50%);
} */

/* 아이템 */
.svc-item {
  position: relative;
  width: 100%;
  min-height: 250px;

  display: flex;
  justify-content:center;

  opacity: 0;
  transform: translateY(60px);
}

/* 활성화 */
.svc-item.active {
  opacity: 1;
  transform: translateY(0);
}


/* 🔥 단계 번호 */
.svc-num {
  position: absolute;
  left: 50%;
  transform: translate(-50%, 0);
  font-size: 50px;
  font-weight: 600;
  color: #999;
  background-color: #FFF;
  padding: 20px 0;

  opacity: 0.5;
  transition: opacity 0.6s ease;
  text-align: center; line-height: 1;
}

.svc-num > span {font-size: 28px; font-weight: 400;}
.svc-item.active .svc-num {
  opacity: 1;
  transform: translate(-50%, 0);
}







/* 텍스트 */
.svc-content {
  width: 39%;

  background: #fff;



  opacity: 0;
  transform: translateY(30px);
  transition: 0.6s ease; 

  z-index: -1;

}

/* 이미지 */
.svc-img {
  width: 40%;
  opacity: 0;
  transition: 0.8s ease;
}

/* 왼쪽에서 등장 */
.svc-img.left {
   transform: translateX(-200px);
   position: relative;
}

/* 오른쪽에서 등장 */
.svc-img.right {
 transform: translateX(200px);

}

/* 이미지 스타일 */
.svc-img img {
  width: 100%;
  display: block;
}

/* 활성화 시 */
.svc-item.active .svc-content {
  opacity: 1;
  transform: translateY(0);
}

.svc-item.active .svc-img {
  opacity: 1;
  transform: translateX(0);
  position: relative;
}

.svc-img > img {width: 70px;     position: absolute;
    top: 50%;
    left: 50%;
    transform: translateY(-50%);}


.svc-line-progress {
  position: absolute;
  left: 50%;
  top: 140px;
  width: 3px;
  height: 100px;
  background: #19C3A2;
  transform: translateX(-50%);
}

.svc-timeline {
  position: relative;
  height: 1250px;
}

.svc_c_inner {width: 100%; position: absolute; top: 20%; border-bottom: 1px solid  #19C3A2; padding-bottom: 20px; padding-left: 10px; padding-right: 10px;}
.svc_c_inner > h3 {font-size: 28px; font-weight: 700; margin-bottom: 10px;}

.svc-content.right {text-align: right;}



.sec7 {background-color: #F5F5F5;}

.sec7_title {font-size: 100px; font-weight: 700; margin-bottom: 80px; line-height: 1; color: #333;}

.a2_slide {
  width: 99%;
  overflow: hidden;
  margin-bottom: 140px;
  position: relative;
}

.a2_slide_warp {
  display: flex;
  width: max-content;
  gap: 20px; 
  animation: slideScroll 28s linear infinite;
}


.a2_slide:hover .a2_slide_warp {
  animation-play-state: paused;
}

.a2_slide_li {
  flex: 0 0 auto;
  width: 370px;
}

.a2_slide_li img {
  width: 100%;
  height: auto;
  object-fit: cover;
  display: block;
  pointer-events: none;
  user-select: none;
}
.a2_slide_li span {display: block; margin-top: 15px; font-size: 18px; font-weight: 500; }


@keyframes slideScroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}


@media (max-width: 860px) {
  .a2_slide_warp {
    animation: slideScroll 26s linear infinite;
  }
}

.pf_more_btn {display: block; width: fit-content; margin: 0 auto; color: #333; font-size: 24px; font-weight: 700; position: relative;}
.pf_more_btn::after {content: ""; display: inline-block; background: url(/img/more_btn.png) no-repeat; background-size: contain; width: 150px; height: 26px; position: absolute; bottom: -20px; left: 70%;   transform: translateX(0);
  transition: transform 0.3s ease;}
.pf_more_btn:hover::after {
  transform: translateX(50px); 
}

.sec8 {background: url(/img/sec8_bg.png) no-repeat; background-size: cover; width: 100%;}

.sec8_title {text-align: center; font-size: 60px; font-weight: 300; color: #FFF; margin-bottom: 70px; padding-right: 20px; padding-left: 20px;}
.sec8_title b {font-weight: 700; }



    .form-box {
        padding: 20px;
        border-radius: 20px;
    }

    .form-box .box_row {
        display: flex;
        justify-content: space-between;
        margin-bottom: 20px;
    }
        .form-box .box_row input::placeholder {color: #ccc;}
        .form-box select {margin-bottom: 20px; }

    .form-box input[type="text"], .form-box select, .form-box textarea {
        
        padding: 12px 30px;
        border: none;
        border-radius: 40px;
        background: #fff;
        font-size: 20px;
        outline: none;
        opacity: 0.8;
    }
    .form-box input[type="text"], .form-box select {height: 70px;}

.form-box input[type="text"] {width: 48%; }
.form-box select, .form-box textarea {width: 100%;}

    .form-box textarea {
        resize: none;
        height: 176px;
        width: 100%;
       border-radius: 20px !important;
    }
  .form-box textarea::placeholder {color: #ccc;}
    .form-box .check-area {
        margin-top: 10px;
        font-size: 20px;
    }

      .form-box input[type="checkbox"] {
    accent-color: #2f5d50; /* 원하는 색 */
    transform: scale(1.5); /* 크기 */
    margin-right: 8px;
}

.form-box .check-area label {color: #FFF; font-size: 14px;}

    .form-box button {
        margin-top: 15px;
        width: 100%;
        padding: 12px;
        border: none;
        border-radius: 40px;
        height: 70px;
        background: #418779;
        color: #fff;
        font-size: 18px;
        cursor: pointer;
        font-weight: 600;
    }

    .form-box button:hover {
        background: #24473d;
    }




    /* pf */

.pf_page {padding-top:200px; padding-bottom: 150px;}
.pf_top {text-align: center;}
.pf_top_txt {margin-bottom: 150px;}
.pf_top_txt > h5 {color: #19C3A2; font-weight: 600; font-size: 24px; margin-bottom: 20px; line-height: 1.2;}
.pf_top_txt > h4 {font-size: 48px; font-weight: 600; line-height: 1.2; margin-bottom: 30px;}
.pf_top_txt > p {font-size: 18px; color: #6C6C6C;}
.pf_con {margin: 40px 0;}
.pf_page section {padding-top: 1px; padding-bottom: 0;  box-sizing: border-box; scroll-margin-top: 200px;}


#category {position: sticky;
    top: 0;}
.pf_category {gap: 8px; padding-bottom: 20px;     
    background: #FFF;
    z-index: 99; padding-top: 20px; margin-bottom: 20px;
    flex-wrap: nowrap;        /* 한 줄 고정 */
  overflow-x: auto;         /* 가로 스크롤 */
  overflow-y: hidden;       /* 세로 숨김 */
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
    scrollbar-width: none; /* Firefox */
}
.pf_category::-webkit-scrollbar {
  display: none; /* Chrome, Safari */
}
.pf_category > button {height: 40px; padding: 5px 10px; border-radius: 5px; font-weight: 500; transition: all 0.5s ease;}
.pf_category > button:hover {background-color: #f5f5f5; }
.pf_category > button.active {background-color: #222; color: #FFF;}

.pf_title {font-size: 28px; font-weight: 600; margin-bottom: 30px;}
.web_content {gap: 4%;}
.web_content li {width: 22%; }
.wc_box {overflow: hidden; border: 1px solid #DDD; border-radius: 20px; height: 400px; position: relative;}
.web_content li > a > p {margin-top: 15px; font-size: 18px; font-weight: 500;}

.wc_box img {
  width: 100%;
  height: 110%;
  display: block;

  transition: transform 0.6s ease; /* 🔥 부드럽게 */
}

.wc_box:hover img {
  transform: translateY(-15%);
}
.n_cont_txt {display: block; text-align: center; color: #666; padding-top: 30px; padding-bottom: 30px;}

.sec5, .sec6, .sec8 { scroll-margin-top: -100px;}