@charset "utf-8";

:root{
  --display:'Cormorant Garamond',Georgia,serif;
}

#mainpage{width:100%;background:var(--wh);overflow:clip;}
.main-display{margin:0;font-family:var(--display);font-size:80rem;font-weight:500;line-height:1;color:var(--bk-deep);letter-spacing:0;}

.main-more{display:inline-flex;align-items:center;gap:10rem;color:var(--main);font-size:var(--font18);font-weight:var(--fw-semibold);letter-spacing:-.36rem;}
.main-more .arr{display:flex;width:34rem;aspect-ratio:1;align-items:center;justify-content:center;border-radius:50%;background:var(--main);line-height:0;}
.main-more .arr img{display:block;width:16rem;height:auto;}
.main-more.is-wh{color:var(--wh);}
.main-more.is-wh .arr{border:1px solid var(--wh);background:transparent;}

/* ========== Section common ========== */
.main-sec{padding:150rem 0 0;}
.main-sec:last-child{padding-bottom:150rem;}
/* .main-info.main-sec{padding:150rem 0 50rem;} */
.main-sec.pd-bt{padding-bottom:150rem;}

/* ========== Visual ========== */
.main-visual{position:relative;width:100%;aspect-ratio:1700/886;overflow:hidden;color:var(--wh);}
.main-visual::before{content:"";position:absolute;inset:0;background:rgba(0,0,0,.28);z-index:2;}
.main-visual-con{position:absolute;inset:0;z-index:5;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10rem;padding:100rem var(--pad-x) 0;text-align:center;}
.main-visual-tit{margin:0;font-size:var(--font65);font-weight:var(--fw-bold);line-height:1.3;}
.main-visual-desc{margin:0;font-size:var(--font24);line-height:1.5;letter-spacing:-.48rem;}

/* ========== Quick ========== */
.main-quick{display:flex;width:100%;}
.main-quick-item{display:flex;flex:1;align-items:center;justify-content:center;gap:16rem;padding:40rem;color:var(--wh);font-size:var(--font24);font-weight:var(--fw-bold);letter-spacing:-.48rem;}
.main-quick-item.is-light{background:var(--main-light);}
.main-quick-item.is-dark{background:var(--main);}
.main-quick-item .ico{display:flex;width:34rem;aspect-ratio:1;flex:none;align-items:center;justify-content:center;line-height:0;}
.main-quick-item .ico img{display:block;width:100%;height:auto;}

/* ========== About ========== */
.main-about{background:var(--wh);}
.main-about .main-display{margin-bottom:60rem;}
.main-about-top{display:flex;align-items:stretch;border-top:1px solid var(--gray-200);border-bottom:1px solid var(--gray-200);}
.main-about-top .con-img{flex:1;aspect-ratio:650/530;}
.main-about-img{background:url('../img/main/about.jpg') no-repeat center / cover;}
.main-about-txt{display:flex;flex:1;align-items:flex-end;justify-content:space-between;gap:20rem;padding:40rem 0 40rem 40rem;}
.main-about-txt .tit{margin:0 0 14rem;font-size:var(--font24);font-weight:var(--fw-bold);line-height:1.5;letter-spacing:-.48rem;}
.main-about-txt .desc{margin:0;font-size:var(--font18);line-height:1.5;letter-spacing:-.36rem;color:var(--bk-deep);}

.main-feature-lst{width:var(--inner);margin:0 auto;border-bottom:1px solid var(--gray-200);}
.main-feature-lst ul{display:flex;width:100%;}
.main-feature-lst li{display:flex;flex:1;flex-direction:column;border-right:1px solid var(--gray-200);padding-bottom:100rem;}
.main-feature-lst li:last-child{border-right:0;}
.main-feature-lst .txt-box{display:flex;flex:1;flex-direction:column;gap:16rem;padding:150rem 40rem 40rem;}
.main-feature-lst .txt-box strong{font-size:var(--font24);font-weight:var(--fw-bold);line-height:1.5;letter-spacing:-.48rem;color:var(--bk-deep);}
.main-feature-lst .txt-box p{margin:0;font-size:var(--font18);line-height:1.5;letter-spacing:-.36rem;color:var(--bk-deep);}
.main-feature-lst .con-img{aspect-ratio:325/265;background-color:var(--gray-400);}
.main-feat-img--feat01{background:url('../img/main/feat01.jpg') no-repeat center / cover;}
.main-feat-img--feat02{background:url('../img/main/feat02.jpg') no-repeat center / cover;}
.main-feat-img--feat03{background:url('../img/main/feat03.jpg') no-repeat center / cover;}
.main-feat-img--feat04{background:url('../img/main/feat04.jpg') no-repeat center / cover;}

/* ========== Information ========== */
.main-info{background:var(--wh);}
.main-info .main-display{margin-bottom:60rem;}
.main-info-grid{display:flex;gap:30rem;align-items:stretch;}
.info-card{
  position:relative;display:flex;flex:1;flex-direction:column;justify-content:flex-end;align-items:flex-start;
  gap:24rem;padding:40rem;overflow:hidden;color:var(--wh);
  background:center/cover no-repeat var(--main);
  transition:flex .55s cubic-bezier(.33,0,.2,1),background-color .45s ease,background-image .45s ease;height:400rem;
}
.info-card--cost{background-image:url('../img/main/info_cost.jpg');}
.info-card--process{background-image:url('../img/main/info_process.jpg');}
.info-card--transport{background-image:url('../img/main/info_transport.jpg');}
.info-card::before{
  content:"";position:absolute;inset:0;z-index:0;
  background:linear-gradient(180deg,rgba(0,0,0,0) 40%,rgba(0,0,0,.4) 95%);
  transition:opacity .45s ease;
}
.info-card .txt,
.info-card .main-more{position:relative;z-index:1;}
.info-card .txt{display:flex;flex-direction:column;gap:12rem;}
.info-card .txt strong{font-size:var(--font24);font-weight:var(--fw-bold);letter-spacing:-.48rem;}
.info-card .txt p{
  display:none;margin:0;
  font-size:var(--font18);line-height:1.5;letter-spacing:-.36rem;
}
.info-card .main-more{display:none;align-self:flex-end;}
.info-card.is-active{
  flex:2.35;
  background-color:var(--main);
  background-image:none !important;
}
.info-card.is-active::before{opacity:0;}
.info-card.is-active .txt p,
.info-card.is-active .main-more{display:flex;}

/* ========== Reviews ========== */
.main-review{background:var(--wh);overflow:clip;}
.main-review > .inner{overflow:visible;}
.main-sec-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:60rem;}
/* .inner 안에서 왼쪽 정렬 고정, 오른쪽만 뷰포트까지 확장 */
.main-review-lst{
  width:calc(50vw + 50%);
  max-width:none;
  height:auto;
  margin:0;
  overflow:hidden;
  box-sizing:border-box;
}
.main-review-lst.swiper{width:calc(50vw + 50%);height:auto;}
.main-review-lst .swiper-wrapper{height:auto;align-items:stretch;}
.main-review-lst .swiper-slide{
  width:auto;height:auto;box-sizing:border-box;
}
.review-card{
  display:flex;flex-direction:column;gap:32rem;width:480rem;aspect-ratio:480/440;height:100%;
  padding:40rem;background:var(--main-pale);box-sizing:border-box;color:inherit;
}
.review-card .top{display:flex;align-items:center;justify-content:space-between;width:100%;}
.review-card .name{font-size:var(--font20);color:var(--main-light);letter-spacing:-.4rem;}
.review-card .badge{padding:5rem 12rem;border-radius:999px;background:var(--wh);font-size:var(--font16);color:var(--main-light);letter-spacing:-.32rem;}
.review-card strong{font-size:var(--font24);font-weight:var(--fw-bold);letter-spacing:-.48rem;color:var(--bk-deep);}
.review-card p{flex:1;margin:0;font-size:var(--font18);line-height:1.5;letter-spacing:-.36rem;color:var(--bk-deep);}
.review-card .date{font-size:var(--font16);color:var(--gray-500);letter-spacing:-.32rem;}
.review-card.empty{align-items:center;justify-content:center;}
.review-card.is-photo{
  padding:0;background:url('../img/main/review_paw.jpg') center/cover no-repeat var(--wh);
}

/* ========== CTA ========== */
.main-cs{
  position:relative;display:flex;align-items:center;justify-content:center;
  width:100%;padding:80rem var(--pad-x);overflow:hidden;color:var(--wh);
  background:url('../img/main/cta_bg.jpg') center/cover no-repeat;
}
.main-cs-con{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:24rem;text-align:center;}
.main-cs .eyebrow{margin:0;font-size:var(--font16);letter-spacing:-.32rem;}
.main-cs h3{margin:0;font-size:var(--font45);font-weight:var(--fw-bold);line-height:1.4;letter-spacing:-.45rem;}
.cs-btn{display:inline-flex;align-items:center;justify-content:center;padding:14rem 30rem;border:1px solid var(--wh);border-radius:999px;font-size:var(--font18);letter-spacing:-.36rem;color:var(--wh);}

/* ========== FAQ ========== */
.main-faq{background:var(--wh);}
.main-faq-grid{display:flex;align-items:flex-start;justify-content:space-between;gap:60rem;}
.main-faq-side{display:flex;flex-direction:column;gap:45rem;flex:none;width:25%;}
.main-faq-lst{width:calc(100% - 25% - 60rem);}
.main-faq-lst ul{display:flex;flex-direction:column;gap:20rem;}
.main-faq-lst li{padding:30rem;background:var(--main-pale);}
.main-faq-lst .faq-q{display:flex;width:100%;align-items:center;justify-content:space-between;gap:20rem;text-align:left;font-size:var(--font24);font-weight:var(--fw-bold);letter-spacing:-.48rem;color:var(--main);}
.main-faq-lst .faq-q .chev{width:24rem;height:auto;flex:none;transition:transform .2s;}
.main-faq-lst li.is-open .faq-q{padding-bottom:30rem;border-bottom:1px solid var(--gray-200);}
.main-faq-lst li.is-open .faq-q .chev{transform:rotate(180deg);}
.main-faq-lst .faq-a{display:none;padding-top:30rem;}
.main-faq-lst li.is-open .faq-a{display:block;}
.main-faq-lst .faq-a-in{font-size:var(--font18);line-height:1.5;letter-spacing:-.36rem;color:var(--bk-deep);}

@media screen and (max-width:1450px){
  .main-faq-lst{width:auto;}
  .main-feature-lst{width:100%;padding:0 50rem;box-sizing:border-box;}
  /* .inner padding-right 50만큼 오른쪽으로 확장 */
  .main-review-lst,
  .main-review-lst.swiper{width:calc(100% + 50rem);}
}

@media screen and (max-width:1024px){
  .main-display{font-size:56rem;}
  .main-visual-tit{font-size:42rem;}
  .main-visual-desc{font-size:var(--font18);}
  .main-quick-item{padding:28rem;font-size:var(--font18);}
  .main-about-top{flex-direction:column;}
  .main-about-top .con-img{aspect-ratio:16/10;}
  .main-about-txt{padding:30rem 0;}
  .main-feature-lst{padding:0 30rem;}
  .main-feature-lst ul{flex-wrap:wrap;}
  .main-feature-lst li{flex:1 1 50%;padding-bottom:0;}
  .main-feature-lst .txt-box{padding:40rem 24rem 24rem;}
  .main-faq-grid{flex-direction:column;gap:0rem;}
  .main-faq-lst{width:100%;}
  .main-review-lst,
  .main-review-lst.swiper{width:calc(100% + 30rem);}
  .review-card{width:min(480rem,80vw);}

  /* Information — 호버 확장 애니메이션 제거, 세로 스택 */
  .main-info-grid{flex-direction:column;gap:20rem;}
  .info-card,
  .info-card.is-active{
    flex:none;
    width:100%;
    height:auto;
    aspect-ratio:335/274;
    padding:24rem;
    gap:24rem;
    transition:none;
    background-color:transparent;
  }
  .info-card.is-active{
    background-image:inherit !important;
  }
  .info-card.is-active.info-card--cost{background-image:url('../img/main/info_cost.jpg') !important;}
  .info-card.is-active.info-card--process{background-image:url('../img/main/info_process.jpg') !important;}
  .info-card.is-active.info-card--transport{background-image:url('../img/main/info_transport.jpg') !important;}
  .info-card::before,
  .info-card.is-active::before{
    opacity:1;
    background:linear-gradient(180deg,rgba(0,0,0,0) 20%,rgba(0,0,0,.55) 90%);
  }
  .info-card .txt{gap:12rem;width:100%;}
  .info-card .txt p,
  .info-card .main-more,
  .info-card.is-active .txt p,
  .info-card.is-active .main-more{display:flex;}
  .info-card .main-more{align-self:flex-end;}
}

@media screen and (max-width:800px){
  .main-display{font-size:40rem;}
  .main-sec{padding:var(--sec-pad) 0 0;}
  .main-sec.pd-bt{padding-bottom:var(--sec-pad);}
  .main-sec:last-child{padding-bottom:var(--sec-pad);}

  .main-about .main-display,
  .main-info .main-display,
  .main-sec-head{margin-bottom:32rem;}

  .main-more{gap:10rem;font-size:var(--font15);letter-spacing:-.3rem;font-weight:var(--fw-bold);}
  .main-more .arr{width:28rem;}

  .main-visual{aspect-ratio:375/640;}
  .main-visual-con{padding:0 var(--pad-x);gap:10rem;}
  .main-visual-tit{font-size:var(--font65);}
  .main-visual-desc{font-size:var(--font16);}

  .main-quick{flex-direction:row;}
  .main-quick-item{padding:20rem 12rem;gap:8rem;font-size:var(--font15);}
  .main-quick-item .ico{width:24rem;}

  /* About — 이미지 풀블리드 + 텍스트 세로 정렬 */
  .main-about-top{
    margin:0 -20rem;
    width:calc(100% + 40rem);
    border-top:0;
  }
  .main-about-top .con-img{aspect-ratio:375/246;}
  .main-about-txt{
    flex-direction:column;
    align-items:flex-end;
    gap:32rem;
    padding:30rem 20rem;
  }
  .main-about-txt .txt{width:100%;}
  .main-about-txt .tit{margin:0 0 16rem;font-size:var(--font20);letter-spacing:-.4rem;}
  .main-about-txt .desc{font-size:var(--font16);letter-spacing:-.32rem;}

  /* Feature — 가로 스크롤 (터치: 제스처 / PC: 스크롤바) */
  .main-feature-lst{
    width:100%;
    padding:0;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
  }
  .main-feature-lst ul{
    flex-wrap:nowrap;
    width:max-content;
   
  }
  @media (pointer:fine){
    .main-feature-lst{scrollbar-width:thin;scrollbar-color:var(--gray-300) transparent;}
    .main-feature-lst::-webkit-scrollbar{display:block;height:6rem;}
    .main-feature-lst::-webkit-scrollbar-track{background:transparent;}
    .main-feature-lst::-webkit-scrollbar-thumb{background:var(--gray-300);border-radius:999px;}
  }
  @media (pointer:coarse){
    .main-feature-lst{scrollbar-width:none;}
    .main-feature-lst::-webkit-scrollbar{display:none;}
  }
  .main-feature-lst li{
    flex:none;
    width:280rem;
    border-right:1px solid var(--gray-200);
    border-bottom:0;
    padding-bottom:0;
  }
  .main-feature-lst li:last-child{border-right:0;}
  .main-feature-lst .txt-box{
    gap:12rem;
    padding:30rem 20rem;
    min-height:174rem;
  }
  .main-feature-lst .txt-box strong{font-size:var(--font20);letter-spacing:-.4rem;}
  .main-feature-lst .txt-box p{font-size:var(--font16);letter-spacing:-.32rem;color:var(--gray-500);}
  .main-feature-lst .con-img{aspect-ratio:280/220;}

  /* Information — 모바일 시안 이미지 */
  .info-card--cost,
  .info-card.is-active.info-card--cost{background-image:url('../img/main/info_cost_mo.jpg') !important;}
  .info-card--process,
  .info-card.is-active.info-card--process{background-image:url('../img/main/info_process_mo.jpg') !important;}
  .info-card--transport,
  .info-card.is-active.info-card--transport{background-image:url('../img/main/info_transport_mo.jpg') !important;}

  .info-card .txt strong{font-size:var(--font20);letter-spacing:-.4rem;}
  .info-card .txt p{font-size:var(--font16);letter-spacing:-.32rem;}

  /* Reviews — .inner padding 20, 오른쪽만 확장 */
  .main-review-lst,
  .main-review-lst.swiper{width:calc(100% + 20rem);}
  .review-card{
    width:80vw;
    aspect-ratio:auto;
    min-height:380rem;
    gap:24rem;
    padding:40rem;
  }
  .review-card .name,
  .review-card .badge,
  .review-card .date{font-size:var(--font14);letter-spacing:-.28rem;}
  .review-card strong{font-size:var(--font20);letter-spacing:-.4rem;}
  .review-card p{font-size:var(--font16);letter-spacing:-.32rem;}
  .review-card.is-photo{display:flex;}

  /* CTA */
  .main-cs{
    aspect-ratio:375 / 356;
    padding:0 var(--pad-x);
    background:url('../img/main/cta_bg_m.jpg') center/cover no-repeat;
  }
  .main-cs-con{gap:24rem;width:100%;}
  .main-cs .eyebrow{font-size:var(--font14);letter-spacing:-.28rem;}
  .main-cs h3{font-size:var(--font20);line-height:1.5;letter-spacing:-.4rem;}
  .cs-btn{height:48rem;padding-top:0;padding-bottom:0;font-size:var(--font16);letter-spacing:-.32rem;}

  /* FAQ */
  .main-faq-side{
    flex-direction:row;
    align-items:center;
    justify-content:space-between;
    width:100%;
    gap:0;
    margin-bottom:32rem;
  }
  .main-faq-lst ul{gap:12rem;}
  .main-faq-lst li{padding:20rem;}
  .main-faq-lst .faq-q{font-size:var(--font18);letter-spacing:-.36rem;}
  .main-faq-lst li.is-open .faq-q{padding-bottom:20rem;}
  .main-faq-lst .faq-a{padding-top:20rem;}
  .main-faq-lst .faq-a-in{font-size:var(--font16);letter-spacing:-.32rem;}

  .main-quick-item .ico{display:none;}
}