@charset "uft-8";
.mainBoxWrap{width:100%;height:100vh;}
.mainBoxWrap h1{margin-bottom:10px;}
.main02BoxWrap a{ display:flex; align-items: center; justify-content: center; color:#fff;font-size:24px; font-weight:500;width:360px; height:100px; background:#202020; border-radius:50px; margin:50px auto 0;z-index:99;position:relative;}
.mainBoxWrap .mainBox{display:flex;place-items:center; height:100vh;justify-content: space-between;}
.mainBoxWrap .mainBox01{place-items:center; height:100vh;}
.mainBoxWrap .mainBox02{display:flex;place-items:center; height:100vh;padding: 10em 20em;overflow: scroll; justify-content: space-between;gap:80px;}
.mainBoxWrapBox{max-width:1200px; margin:0 auto;}

.main02Box, .partnerBox{text-align: center; padding-top:10em;}

.main01BoxWrap{ background:#F4F4F5}

.main01TextBox p{font-size:64px; font-weight:500;line-height:80px;color:#fff;text-shadow: 2px 2px 4px rgba(73, 179, 234, 0.2);}
.main01TextBox a{display:flex; font-size:24px; color:#fff; border-radius:50px; border:1px solid #fff; width:400px; height:100px;background: rgb(252,235,85);
    background: linear-gradient(320deg, rgba(252,235,85,1) 0%, rgba(228,66,48,1) 100%);margin-top: 70px;justify-content: center;align-items: center;}
.m_main01TextBox{display:none;}

.scroll-down {
  position: fixed;
  bottom: 40%;
  /*left: 50%;*/
  right:10%;
  transform: translateX(-50%);
  text-align: center;
  font-size: 12px;
  color: #999;
  z-index: 999999;
}

.scroll-down span{
  display: inline-block;
}

.m_scroll-down{
  display: none;
}

.scroll-down .arrow {
  width: 24px;
  height: 39px;
  /*border-left: 2px solid #999;
  border-bottom: 2px solid #999;
  transform: rotate(-45deg);*/
  display: block;
  background: url(../images/mouse.png) no-repeat right;
  margin: 8px auto 0;
  animation: scrollBounce 1.5s infinite;
}

@keyframes scrollBounce {
  0%, 100% {
    transform: rotate(0) translateY(0);
  }
  50% {
    transform: rotate(0) translateY(8px);
  }
}



.main02Box .main02ImgBox{max-width: 100%;margin: 0 auto;position: relative;}
.main02Box .main02ImgBox .oj{position:absolute; top:0; left:50%; transform: translate(-50%, 0);}
.main02Box .main02ImgBox .oj01{left:30%;left:10%;}
.main02Box .main02ImgBox .oj02{left:60%; top:70px;}
.main02Box .main02ImgBox .oj03{top:-150px;left:26.5%}
.main02Box .main02ImgBox .oj04{top:-130px;left:35%;}
.main02Box .main02ImgBox .oj05{top:130px;left:45%;}
.main02Box .main02ImgBox .oj06{left:32%;}

.main03Box{height: 100vh;}
.main03Box .slick-slide{  height: 100vh;display: flex;flex-direction: row; /* 또는 column, 명확히 지정 */justify-content: center;align-items: center;}
.serviceBox01 .main03ImgBox{position:relative; top:0; left:0%; width:100%; height:50%;}
.serviceBox03 .main03ImgBox{position:relative;top:0; left:5%; width:100%; height:50%;}
.serviceBox01 .main03ImgBox .oj, .serviceBox03 .main03ImgBox .oj{position:absolute; top:0; /*left:50%; transform: translate(-100%, 0);*/}
.serviceBox02 .main03ImgBox{position:relative; top:0; right:0%; width:70%; height:50%;}
.serviceBox02 .main03ImgBox .oj{position:absolute; top:0; right:0%; transform: translate(0, 0);}


.main03Section01 .mainTitBox,.main03Section03 .mainTitBox{text-align: right;}

.main03Swiper .mainTitBox p{color:#333;line-height:1.4em;}

.main03Section01{ background:url(../images/main_bg03.png) no-repeat;}
.main03Section02{ background:url(../images/main_bg04.png) no-repeat;}
.main03Section03{ background:url(../images/main_bg05.png) no-repeat;}
.main03Section01,.main03Section02,.main03Section03 {background-size: cover;background-position: center;}

.main03BoxList {
  /* slick이 처리하므로 여기선 display 제거 */
  height: 100vh;
  margin: 0 auto;
}

.main03Section {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  box-sizing: border-box;
  padding: 80px 20em;
  flex: 1;
  height:100%;
}

.mainBoxWrap .su_tit{font-size:20px; font-weight:400; padding-bottom:10px;font-family: "SUITE", sans-serif; color:#202020;}
.reviewRollingBox{overflow: hidden;width:540px;height:900px;}
.reviewRollingBox .vertical-slider .slide-box{width: 454px; /*height:300px;*/background:url(../images/dot_icon.png) no-repeat 470px 30px #F4F4F5;border-radius: 10px;padding: 50px; margin-bottom:10px;}
.vertical-slider {overflow: hidden;margin: 0 auto;}
.vertical-slider .slick-slide {margin-bottom: 10px; /* 각 슬라이드 간 간격 */box-sizing: border-box;}
.vertical-slider .slick-slide > div {padding: 20px;border-radius: 8px;}
.main01BoxWrap{ background:url(../images/main_bg01.png) no-repeat;background: url(../images/main_bg01.png) no-repeat center center; width: 100%;height: 100%;background-size: cover;}
.main02BoxWrap{background: rgb(237,255,209);
    background: linear-gradient(90deg, rgba(237,255,209,1) 0%, rgba(255,219,130,1) 35%, rgba(255,205,131,1) 67%, rgba(255,127,84,1) 100%);}
.main03BoxWrap{ background:#F4F4F5;position: relative;}
.main04BoxWrap{ background:#fff;position:relative;}
.main04BoxWrap::before{content:'';background:url(../images/blur_bg.png) 100%;position: absolute;z-index:99;top:0;left:0;width:100%;height:100%;}
.main05BoxWrap{background:#F4F4F5;position: relative;z-index: 999;}
 
.reviewTxtBox{display: block;}
.mainTitBox p, .reviewTxtBox p{font-size:32px;color:#9EA3B7;line-height: 1.2;}

.m_reviewTxtBox{display: none;}
/*.main04BoxWrap .mainBox{gap:200px;}*/
.main05BoxWrap .mainBox{gap:180px;}


.mainTitBox{flex:1 0 330px; z-index:99;}

.newBoxlist{}
.newBoxlist ul{display: flex;gap:16px;}
.newBoxlist ul li div{width:400px; height:300px;}
.newBoxlist ul li p{font-size:24px; line-height:1.4em;}

.moreBox{
  color:#202020;
  margin-top:120px;
  display:inline-flex;
  font-size:18px;
  gap:20px;
  align-items: center;
}

.moreBoxW{
  color:#FFF;
  margin-top:120px;
  display:inline-flex;
  font-size:18px;
  gap:20px;
  align-items: center;
}

.moreBoxW:after{
  content:'';
  width:81px;
  height:34px;
  background:url(../images/m_arw_w.png) no-repeat;
  margin-right:20px;
}

.moreBox:after{
  content:'';
  width:81px;
  height:34px;
  background:url(../images/m_arw.png) no-repeat;
  margin-right:20px;
}

.main03BoxWrap .swiper .swiper-pagination{
  bottom:10%;
}

.main03BoxWrap .swiper .swiper-pagination-bullet{
  background:#fff; 
  width:10px;
  height:10px;
  transition: all 0.3s;
}

.main03BoxWrap .swiper .swiper-pagination-bullet-active{
  width:50px;
  height:10px;
  border-radius:10px;
  background-color:#fff;
}


.serviceBox01 .main03ImgBox .oj01{
  left:-10%; top:-30%
}
.serviceBox01 .main03ImgBox .oj01 img{
  width:85%
}
.serviceBox01 .main03ImgBox .oj02{
  left:50%; top:-10%
}
.serviceBox01 .main03ImgBox .oj02 img{
  width:500px;
}
.serviceBox01 .main03ImgBox .oj03{
  left:62%; top:20%;
}
.serviceBox01 .main03ImgBox .oj03 img{
  width:320px;
}
.serviceBox01 .main03ImgBox .oj04{
  left:45%; top:-10%;
}
.serviceBox01 .main03ImgBox .oj04 img{
  width:200px;
}


.serviceBox02 .main03ImgBox .oj01{
  right:-10%; top:0;
}
.serviceBox02 .main03ImgBox .oj01 img{
  width:80%
}
.serviceBox02 .main03ImgBox .oj02{
  right:25%; top:-20%;
}
.serviceBox02 .main03ImgBox .oj02 img{
  width:200px;
}
.serviceBox02 .main03ImgBox .oj03{
  right:-15%; top:-20%;
}
.serviceBox02 .main03ImgBox .oj03 img{
  width:200px;
}
.serviceBox02 .main03ImgBox .oj04{
  right:-45%; top:0%;
}
.serviceBox02 .main03ImgBox .oj04 img{
  width:490px;
}

.serviceBox03 .main03ImgBox .oj01{
  left:-10%; top:-30%
}
.serviceBox03 .main03ImgBox .oj01 img{
  width:80%;
}
.serviceBox03 .main03ImgBox .oj02{
  left:43%; top:30%
}
.serviceBox03 .main03ImgBox .oj02 img{
  width:500px
}
.serviceBox03 .main03ImgBox .oj03{
  left:50%; top:-25%;
}
.serviceBox03 .main03ImgBox .oj03 img{
  width:300px;
}

.p_logoBox{padding-top:200px;}
.p_logoBox .logo-slider{padding: 20px 0;}
.p_logoBox {
  padding-top: 150px;
  overflow: hidden;
}

.logo-slider {
  margin: 20px 0;
}

.logo-slider .slick-slide {
  margin: 0 10px;
}

.logo-slider img {
  height: 50px;
  width: auto;
  display: block;
  margin: 0 auto;
  object-fit: contain;
  opacity: 0.8;
  transition: all 0.3s;
}

.logo-slider img:hover {
  opacity: 1;
}

.logo-slider .slick-track {
  display: flex !important;
  align-items: center;
}
.row2 {
  direction: rtl
}

/*선정산계산기모달*/
.modalPopup{display:none; position: fixed; background: rgba(0, 0, 0, 0.4); width: 100%; height: 100%;z-index: 99999999999;top:0;left:0;}
.p_modalBox{max-width:420px; padding:1.5em 1em;background: #F4F4F5; border-radius: 10px;position:absolute; transform:translate(-50%, -50%); top:50%; left:50%;}
.p_modalBox .p_logo{display:flex;}
.p_modalBox .p_logo p{line-height:55px; padding-left:20px;}
.p_Box{background:#fff; padding:1.5em 1em;border-radius: 10px;margin: 16px 0;}

.priceBoxWrap{display:flex;justify-content: end;}
.p_txtBox p{font-size:16px;}
.p_pricBox .priceTit{text-align:left;padding-left:40px;display:flex ;place-items:end;line-height:45px;}
.p_pricBox .priceBox{text-align:right;padding-left:40px;}
.p_pricBox .priceBox input{font-size:24px;font-weight:400;width:180px;border: none;text-align:right;}
.p_pricBox .priceBox span{font-size:16px;}
.p_percent p{font-size:16px;}
.percent{font-size:24px;}

.slider-container {margin-top: 20px;}
.slider_txt{display:flex;width:100%;justify-content:space-between;}
.slider_barBox{width:100%;}
.slider_barBox input{width:100%;padding:0;}
.slider-labels{display:flex;gap:72px;}
.slider-labels span{display:inline-block;color: #9EA3B7;font-weight: 500;}
.p_modalBottom{margin-bottom:0px;}
.p_modalBottom p{display:flex;place-items:center;padding-right:20px;}
.p_modalBottom button{width:110px;padding:10px;background:#202020; color:#fff; text-align:center; border-radius:50px;}
.modalPopup .totalBox , .p_modalBottom{display:flex;justify-content:end;}
.modalPopup .totalBox{background: #202020;color: #fff;padding: 1em 2em;border-radius: 10px;}
.modalPopup .totalBox .tit{line-height: 30px;padding-right:40px;}
.won{display:inline-block;padding-left:20px;}
.cl_btn button{width: 100%;padding: 1em;font-size: 16px;background: #ddd;border-radius: 10px;margin: 16px 0; text-align:center; color:#fff;background: rgb(34,127,194);
    background: -moz-linear-gradient(90deg, rgba(34,127,194,1) 0%, rgba(82,198,214,1) 100%);
    background: -webkit-linear-gradient(90deg, rgba(34,127,194,1) 0%, rgba(82,198,214,1) 100%);
    background: linear-gradient(90deg, rgba(34,127,194,1) 0%, rgba(82,198,214,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#227fc2",endColorstr="#52c6d6",GradientType=1);}

.totalpop_closeBtn{position: absolute;top: -40px ; width: 60px;height: 60px;background: #F4F4F5;text-align: center;line-height: 60px;border-radius: 10px;right: 152px;transform: translate(250%, 100%);}
.close-btn {
    position: relative;
    width: 60px;
    height: 60px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
  }
  
.close-btn::before,
.close-btn::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 30px;
  height: 4px;
  background-color: #9EA3B7;
  transform-origin: center;
  transition: background-color 0.2s;
  border-radius:19px;
}

.close-btn::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

.close-btn::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.close-btn:hover::before,
.close-btn:hover::after {
  background-color: #ff4d4f; /* hover 시 색상 변화 */
}
  
/*
.fade-in-span {
  display: inline-block;
  opacity: 0;
  transform: translateY(30px); 
  transition: all 0.8s ease;
}

.fade-in-span.visible {
  opacity: 1;
  transform: translateY(0); 
}*/

.main03Swiper .txtW .mainTitBox p,  .main03Swiper .txtW .mainTitBox h1
{
  color:#fff;
}


@keyframes float {
  0%   { transform: translateY(0); }
  50%  { transform: translateY(-15px); }
  100% { transform: translateY(0); }
}
  
/* 처음에는 숨겨진 상태 */
.float-in-img {
  transform: scale(0);
  opacity: 0;
  animation: floatIn 0.5s ease-out 0.3s forwards, floatUpDown 3s ease-in-out infinite;
}
.float-in-img.visible {
  opacity: 1;
  transform: translateY(0);
}

/* 커지며 나타남 */
@keyframes floatIn {
  0% {
    transform: scale(0);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

/*.main01ImgBox img {
  animation: float 3s ease-in-out infinite;
}*/

.text-animate {
  opacity: 0;
  transform: translateY(60px);
  transition: all 1s cubic-bezier(0.25, 1, 0.5, 1); /* 더 부드러운 탄성 효과 */
}

  
  
/* 스크롤 진입 시 아래서 위로 올라오며 나타남 */
.text-animate.visible {
  opacity: 1;
  transform: translateY(0);
}

/* .fade-in-span {
  opacity: 0;
  transform: translateY(40px);
  transition: all 0.8s ease;
  display: inline-block;
}

.fade-in-span.visible {
  opacity: 1;
  transform: translateY(0);
}*/

@keyframes bounceInUp {
  0% { opacity: 0; transform: translateY(80px); }
  60% { opacity: 1; transform: translateY(-30px); }
  80% { transform: translateY(10px); }
  100% { transform: translateY(0); }
}

.bounce-in {
  opacity: 0;
  transform: translateY(60px);
}

.bounce-in.visible {
  opacity: 1;
  animation: bounceInUp 1s ease-out forwards;
}


/* 순차 등장 지연 */
.oj01 { transition-delay: 0.1s; }
.oj02 { transition-delay: 0.1s; }
.oj03 { transition-delay: 1s; }
.oj04 { transition-delay: 1.5s; }
.oj05 { transition-delay: 2s; }
.oj06 { transition-delay: 2.5s; }

/* 모바일 대응 */
@media (max-width: 1211px) {

  .mainBoxWrap .mainBox{
    padding:0 5em;
  }

  .main03Section{
    padding:0 5em;
  }

  .mainBoxWrap .mainBox02{
    padding:0 10em;
  }
}

@media (max-width: 1080px){
  .moreBox{
    margin-top: 50px;
  }
  .mainBoxWrap .mainBox{
    padding:10em 5em;
  }
  .mainBoxWrap .mainBox02{
    padding: 8em 5em;
    display: grid;
    height: auto;
    overflow: scroll;
    justify-content: flex-start;
    gap: 80px;
    place-items: flex-start;
}
  .mainBoxWrap .mainBox{
    display: grid;
    justify-content: center;
    gap: 50px;
  }
  .reviewTxtBox{
    display: none;
  }
  .m_reviewTxtBox{
    display: block;
  }
  .reviewRollingBox{
    width:80%;
  }
}

@media screen and (max-width: 1024px) {
  .main02Box .main02ImgBox .oj01 { left: 15%; }
  .main02Box .main02ImgBox .oj02 { left: 70%; top: 50px; }
  .main02Box .main02ImgBox .oj03 { top: -100px; left: 20%; }
  .main02Box .main02ImgBox .oj04 { top: -90px; left: 30%; }
  .main02Box .main02ImgBox .oj05 { top: 100px; left: 50%; }
  .main02Box .main02ImgBox .oj06 { left: 25%; }
}

@media (max-width: 785px){
  .flowWrap{
    bottom:15%;
  }

  .mainBoxWrap{
    min-height: 820px;
  }


  .main01BoxWrap,.main03BoxWrap, .main06BoxWrap{
    min-height: 100vh;
  }

  .p_logoBox{
    padding-top:0;
  }
  
  .mainBoxWrap .mainBox {
    gap: 0px;
 }
  
  .m_main01TextBox{
    display: contents;
  }
  
  .main01ImgBox{
    display: contents;
  }

  .main01TextBox{display: none;}
  .m_main01TextBox p{font-size:42px; font-weight:500;line-height:54px;color:#fff;text-shadow: 2px 2px 4px rgba(73, 179, 234, 0.2);}
  .m_main01TextBox a{display:flex; font-size:24px; color:#fff; border-radius:50px; border:1px solid #fff; width:350px; height:100px;background: rgb(252,235,85);
    background: linear-gradient(320deg, rgba(252,235,85,1) 0%, rgba(228,66,48,1) 100%);justify-content: center;align-items: center;}
  .main03Section{
    display: grid;
  }
  .serviceBox02 .main03ImgBox{
    width:100%;
  }
  .serviceBox01 .main03ImgBox .oj{
    width:100%;
  }

  .serviceBox02 .main03ImgBox .oj01{
    left: 20%;
    top: -200px;
}
  .serviceBox01 .main03ImgBox .oj01 img{
    width:85%;

  }

  .serviceBox02 .main03ImgBox .oj01 img{
    width:85%;
  }

  .main03Section {
    display: grid;
   justify-content:normal;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
    padding: 2em;
    flex: 1;
    height: 100%;
}
.main02Box .main02ImgBox .oj01 { display: none; left: 0%; }
.main02Box .main02ImgBox .oj02 { display: none; left: 0%; top: 50px; }
.main02Box .main02ImgBox .oj03 { top: -10px; left: 0%; }
.main02Box .main02ImgBox .oj04 { top: 0px; left: 0%; }
.main02Box .main02ImgBox .oj05 { top: 100px; left: 40%; }
.main02Box .main02ImgBox .oj05 img{
  width:80%;
}
.main02Box .main02ImgBox .oj06 { left: 10%; }
.main02Box .main02ImgBox .oj06 img{
  width:80%;
}
}

@media screen and (max-width: 768px) {

  .mainBoxWrap .mainBox{
    padding:5em 2em;
    text-align:center;
  }
  .mainBoxWrap .mainBox02{
    padding:5em 2em;
  }

.scroll-down{

  display: none;

}

  .m_scroll-down{
    display: block;
    position: absolute;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    animation: slideDown 1.6s infinite;
    height: auto;
    opacity: 0.7;
    color:#fff;
  }

  .m_arrow{
    display: block;
    width: 24px;
    height: 24px;
    border-left: 2px solid #fff;
    border-bottom: 2px solid #fff;
    transform: rotate(-45deg);
  }

  @keyframes slideDown {
    0% { transform: translateX(-50%) translateY(0); opacity: 0.7; }
    50% { transform: translateX(-50%) translateY(10px); opacity: 1; }
    100% { transform: translateX(-50%) translateY(0); opacity: 0.7; }
  }
}




@media screen and (max-width: 480px) {
  .main02Box .main02ImgBox .oj04 img { width:80%; }
  .mainBoxWrap .mainBox {
    gap: 40px;
  }
  .mainBoxWrap .mainBox img{
    width:80%;
  }
  
  .main02Box .main02ImgBox {
    text-align: center;
  }
}