@charset "utf-8";


/* 공통 기준: 1920px = 100vw */
section{
  padding: 7.813vw 0;
}
body{
  background-image: url("../img/body_bg.png");
  background-position: top center;
  background-size: 100% auto;
  background-repeat: no-repeat;
  width: 100vw;
  overflow-x: hidden;
}


/* header */
/* 접근성용 숨김 텍스트 */
.visually-hidden {
  position:absolute !important; width:0.052vw; height:0.052vw;
  padding:0; margin:-0.052vw; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* 헤더 프레임 */
.site-header{
  position: sticky; top: 0; z-index: 1000;
  backdrop-filter: blur(0.78vw);
  background: linear-gradient(180deg, rgba(10,12,20,.72), rgba(10,12,20,.55));
  border-bottom: 0.052vw solid rgba(255,255,255,.08);
  box-shadow: 0 0.52vw 1.56vw rgba(0,0,0,.25);
}

/* 내부 래퍼 */
.header-wrap{
  width: 74vw; max-width: 74vw; margin: 0 auto;
  height: 4.6vw; display:flex; align-items:center; justify-content:space-between;
}

/* 브랜드 */
.brand{ display:inline-flex; align-items:center; gap:0.7vw; text-decoration:none; }
.brand img{ height: 2.1vw; width:auto; display:block; }

/* 네비게이션 */
.main-nav{ list-style:none; display:flex; align-items:center; gap: 2.1vw; }
.main-nav > li { position:relative; }

.main-nav a{
  position:relative; display:inline-flex; align-items:center;
  padding: 0.7vw 0; font-size: 0.94vw; font-weight: 600;
  color:#f5f7fb; text-decoration:none; letter-spacing: 0.02em;
  opacity:.92; transition: opacity .2s ease, transform .2s ease;
}

/* 하이라이트 바(언더라인) */
.main-nav a::after{
  content:""; position:absolute; left:0; right:0; bottom:-0.4vw; height:0.21vw;
  background: linear-gradient(90deg, #ffd400, #ffb800);
  border-radius: 1vw; transform: scaleX(0); transform-origin: center;
  transition: transform .25s ease;
}

/* 호버/포커스 */
.main-nav a:hover,
.main-nav a:focus{
  opacity:1; transform: translateY(-0.1vw);
}
.main-nav a:hover::after,
.main-nav a:focus::after{
  transform: scaleX(1);
}

/* CTA(문의) 칩 스타일 */
.main-nav .cta{
  padding: 0.62vw 1.25vw;
  background: linear-gradient(180deg, #ffd400, #ffb800);
  color:#111; border-radius: 1.2vw; box-shadow: 0 0.36vw 1.04vw rgba(255, 184, 0, .35);
  opacity:1; transform:none;
}
.main-nav .cta::after{ display:none; }
.main-nav .cta:hover{ transform: translateY(-0.1vw); }

/* 활성 상태(스크롤 스파이로 class 추가해 쓰기 좋음) */
.main-nav a.is-active{ opacity:1; }
.main-nav a.is-active::after{ transform: scaleX(1); }




/* 문의폼 */
.form{
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: #0000004c;
  align-items: center;
  justify-content: center;
  z-index: 100;
  font-family: 'suit';
  text-align: left;
  display: none;
}
.form.on{
  display: flex;
}
.form .cont{
  width: 500px;
  padding: 40px 40px 60px;
  border-radius: 30px;
  background: #fff;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow-y: scroll;
}
.form .cont::-webkit-scrollbar{
  display: none;
}
.form .cont .close{
  position: absolute;
  right: 40px;
  top: 40px;
  width: 30px;
  height: 30px;
  cursor: pointer;
}
.form .cont >h3{
  font-size: 25px;
  font-weight: 700;
  margin-bottom: 30px;
}
.form .cont .inner{
  display: flex;
  flex-direction: column;
  gap: 15px;
}
.form .cont button{
  width: 100%;
  height: 50px;
  border-radius: 10px;
  background: #0046FF;
  color: #fff;
  font-size: 20px;
  font-weight: 700;
  cursor: pointer;
}
.form .cont .inner .box{
  display: flex;
  flex-direction: column;
  width: 100%;
  gap: 5px;
}
.form .cont .inner .box label{
  font-size: 20px;
  font-weight: 600;
}
.form .cont .inner .box input{
  border-radius: 10px;
  border: 1px solid #838383;
  font-size: 16px;
  padding-left: 20px;
  height: 30px;
}
.form .cont .inner .box textarea{
  border-radius: 10px;
  border: 1px solid #838383;
  font-size: 16px;
  padding-left: 20px;
  height: 100px;
}
.form .cont .inner .box textarea::placeholder{
  color: #ddd;
}
.form .cont .inner .box input::placeholder{
  color: #ddd;
}
/* 문의폼 */


/* section01 */
#hero{
  width: 100vw;
  height: 44.79vw; /* 860px */
  background: #FFF5F0;
  position: relative;
  overflow: hidden;
}
#hero .container{
  padding-left: 13.54vw; /* 260px */
  display: flex;
}
#hero .container .eyebrow{
  font-family: 'suit';
  color: #000;
  font-size: 2.08vw; /* 40px */
}
#hero .container .eyebrow strong{
  font-weight: 800;
}
#hero .right{
  display: flex;
  position: relative;
  margin-left: 16.42vw; /* 200px */
  width: 21.88vw; /* 420px */
  height: 45vw; /* 864px */
}
#hero .right .icon_img figure:nth-child(1){
  position: absolute;
  width: 15.63vw; /* 300px */
  height: 11.93vw; /* 229px */
  bottom: 9.58vw; /* 184px */
  left: -9.06vw; /* -174px */
  z-index: 2;
}
#hero .right .icon_img figure:nth-child(2){
  position: absolute;
  width: 2.86vw; /* 55px */
  height: 2.86vw; /* 55px */
  bottom: 19.22vw; /* 369px */
  left: -3.65vw; /* -70px */
  z-index: 2;
}
#hero .right .icon_img figure:nth-child(3){
  position: absolute;
  width: 15.63vw; /* 300px */
  height: 3.39vw; /* 65px */
  top: 14.06vw; /* 270px */
  left: -7.81vw; /* -150px */
  z-index: 2;
}
#hero .right .icon_img figure:nth-child(4){
  position: absolute;
  width: 14.58vw; /* 280px */
  height: 3.39vw; /* 65px */
  bottom: 17.97vw; /* 345px */
  right: -5.21vw; /* -100px */
  z-index: 2;
}
#hero .right .mockup_slide{
  display: flex;
  width: 100%;
  height: 100%;
  position: relative;
}
#hero .right .mockup_slide figure{
  left: 0;
  top: 0;
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: 0.3s;
}
#hero .right .mockup_slide figure.active{
  opacity: 1;
}
#hero .container h1{
  font-size: 5.21vw; /* 100px */
  margin: 2.08vw 0 6.35vw; /* 40px 0 122px */
  color: #FF8040;
  line-height: 0.62;
}
#hero .container .left{
  margin-top: 3.54vw; /* 68px */
}
#hero .container .cta-group{
  width: 29.53vw; /* 567px */
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  align-items: center;
}

#hero .container .cta-group > a{
  font-family: 'suit';
  width: 100%;
  margin-top: 0.78vw; /* 15px */
  height: 5.21vw; /* 100px */
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border-radius: 0.52vw; /* 10px */
  box-shadow: 0px 0px 0.52vw #00000038; /* 10px */
  color: #000;
  font-size: 1.88vw; /* 36px */
}
#hero .container .cta-group > a figure{
  width: 2.60vw; /* 50px */
  height: 2.60vw; /* 50px */
  margin-left: 0.26vw; /* 5px */
}
#hero .container .cta-group .links{
  width: 100%;
  height: 5.21vw; /* 100px */
  display: flex;
  justify-content: center;
  gap: 0.52vw; /* 10px */
}
#hero .container .cta-group .links a{
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.26vw; /* 5px */
  font-size: 1.88vw; /* 36px */
  border-radius: 0.52vw; /* 10px */
  box-shadow: 0px 0px 0.52vw #00000038; /* 10px */
  font-family: 'suit';
}
#hero .container .cta-group .links a figure{
  width: 2.60vw; /* 50px */
  height: 2.60vw; /* 50px */
}
#hero .container .cta-group .links a:nth-child(1){
  width: 11.93vw; /* 229px */
  background: #fff;
  color: #000;
}
#hero .container .cta-group .links a:nth-child(2){
  width: 17.08vw; /* 328px */
  background: #FF8040;
  color: #fff;
}
/* section01 */



/* section02 */
#numbers{
  display: flex;
  flex-direction: column;
  align-items: center;
}
#numbers-heading{
  font-size: 3.125vw;
  text-align: center;
  margin-bottom: 4.167vw;
}
#numbers-heading span{
  color: #0046FF;
}
#numbers .stats{
  display: flex;
  justify-content: center;
  gap: 3.125vw;
  color: #fff;

}
#numbers .stats li{
  width: 26.042vw;
  height: 26.042vw;
  border-radius: 1.563vw;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0.052vw solid #0046FF;
}
#numbers .stats li:nth-child(2){
  border-color: #009DFF;
}
#numbers .stats li:nth-child(3){
  border-color: #001BB7;
}
#numbers .stats li .stat{
  width: 23.438vw;
  height: 23.438vw;
  border-radius: 1.563vw;
  background: #0046FF;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  text-align: center;
}
#numbers .stats li:nth-child(2) .stat{
  background: #009DFF;
}
#numbers .stats li:nth-child(3) .stat{
  background: #001BB7;
}
#numbers .stats li .stat figure:nth-child(1){
  width: 2.76vw;
  height: 2.76vw;
  position: absolute;
  left: 50%;
  top: 1.042vw;
  transform: translateX(-50%);
}
#numbers .stats li .stat figure:last-child{
  width: 2.76vw;
  height: 2.76vw;
  position: absolute;
  left: 50%;
  bottom: 1.042vw;
  transform: translateX(-50%);
}
#numbers .stats li .stat .label{
  font-size: 2.604vw;
  margin-bottom: 1.563vw;
}
#numbers .stats li .stat .value{
  font-size: 3.125vw;
}
#numbers .stats li .stat .value span{
  font-size: 2.083vw;
}
/* section02 */




/* section03 */
#social-proof{
  width: 72.917vw;
  height: 107.917vw;
  margin: 0 auto;
  background-image: url("../img/sec03_bg.png");
  background-position: center center;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  border-radius: 2.083vw;
  overflow: hidden;
  box-shadow: 1.042vw 1.042vw 1.042vw #00000045;
  color: #fff;
}
#social-proof .container{
  display: flex;
  flex-direction: column;
  align-items: center;
}
#social-proof-heading{
  font-size: 4.167vw;
  line-height: 1.75;
  text-align: center;
}
#social-proof-heading span{
  color: #FF8040;
}
#social-proof .container > p{
  text-align: center;
  font-family: 'suit';
  font-size: 1.563vw;
  margin: 2.604vw 0 1.042vw;
  line-height: 1.66;
}
#social-proof .container > figure{
  width: 30.677vw;
  height: 30.677vw;
  margin-bottom: 6.771vw;
}
#social-proof .container .badges{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2.604vw;
}
#social-proof .container .badges li{
  position: relative;
  width: 48.75vw;
  height: 7.813vw;
  display: flex;
  justify-content: center;
  align-items: center;
}
#social-proof .container .badges li figure{
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
}
#social-proof .container .badges li p{
  font-size: 3.125vw;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: max-content;
}
#social-proof .container .badges li p strong{
  color: #FF8040;
}
/* section03 */




/* seciton04 */
#benefits .container{
  display: flex;
  flex-direction: column;
  align-items: center;
}
#benefits-heading{
  font-size: 3.125vw;
  text-align: center;
  margin-bottom: 4.167vw;
}
#benefits-heading span{
  color: #0046FF;
}
#benefits .container .features{
  display: flex;
  flex-wrap: wrap;
  width: 54.167vw;
  gap: 2.083vw;
}
#benefits .container .features li{
  border-radius: 1.042vw;
  width: 26.042vw;
  height: 26.042vw;
  background-image: url("../img/sec04_bg01.png");
  background-position: center center;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
#benefits .container .features li:nth-child(2){
  background-image: url("../img/sec04_bg02.png");
}
#benefits .container .features li:nth-child(3){
  background-image: url("../img/sec04_bg03.png");
}
#benefits .container .features li:nth-child(4){
  background-image: url("../img/sec04_bg04.png");
}

#benefits .container .features li article{
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  height: 100%;
  padding-top: 1.563vw;
  color: #fff;
}
#benefits .container .features li article figure{
  width: auto;
  height: 10.938vw;
  margin-bottom: 1.042vw;
}
#benefits .container .features li article figure img{
  width: auto;
  height: 100%;
}
#benefits .container .features li article h3{
  font-size: 1.979vw;
  text-align: center;
  margin-bottom: 1.042vw;
}
#benefits .container .features li article p{
  font-family: 'suit';
  padding: 0 1.042vw;
  word-break: keep-all;
  text-align: center;
  font-size: 1.458vw;
  font-weight: 600;
}
/* seciton04 */



/* section05 */
#reviews{
  background: rgba(183, 183, 183, 0.05);
}
#reviews .container{
  display: flex;
  flex-direction: column;
  align-items: center;
}
#reviews .container .section-header{
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 4.167vw;
}
#reviews .container .section-header figure{
  width: 17.865vw;
  height: 5.208vw;
}
#reviews .container .section-header p{
  font-family: 'suit';
  font-size: 1.458vw;
  margin: 1.563vw 0 0.938vw;
}
#reviews .container .section-header h2{
  font-size: 3.125vw;
  color: #0046FF
}
#reviews .container .review-gallery{
  width: 100%;
  overflow: hidden;
  padding-top: 2.344vw;
  position: relative;
}
#reviews .container .review-gallery::after{
  content: "";
  position: absolute;
  bottom: -2.865vw;
  left: 50%;
  transform: translateX(-50%);
  width: 110%;
  height: 6.771vw;
  background-image: url("../img/layer_blur.png");
  background-position: center center;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  z-index: 1;
}
#reviews .container .review-gallery .inner{
  display: flex;
  width: max-content;
}
#reviews .container .review-gallery .inner ul{
  width: 21.875vw;
  height: 27.396vw;

}
#reviews .container .review-gallery .inner ul li:nth-child(1){
  width: 100%;
  height: 100%;
  border-radius: 3.125vw 3.125vw 0 0;
  box-shadow: 0 0 2.604vw #0000002d;
  overflow: hidden;
}
#reviews .container .review-gallery .inner ul li:nth-child(1) figure{
  width: 100%;
  height: 100%;
}
#reviews .container .review-gallery .inner ul li:nth-child(2){
  display: none;
}

/* 슬라이더 상태/애니메이션 */
#reviews .review-gallery .inner { will-change: transform; transition: transform .5s ease; }

/* 전체 화면 상세보기 모달 */
.review-modal {
  position: fixed; inset: 0; background: rgba(0,0,0,.85);
  display: none; align-items: center; justify-content: center; z-index: 9999;
}
.review-modal.open { display: flex; }
.review-modal img { max-width: 92vw; max-height: 92vh; border-radius: 0.625vw; box-shadow: 0 0.521vw 2.083vw rgba(0,0,0,.6); }
.review-modal .close {
  position: absolute; top: 1.25vw; right: 1.25vw; width: 2.292vw; height: 2.292vw; border-radius: 50%;
  background: rgba(255,255,255,.15); color: #fff; font-size: 1.25vw; line-height: 2.292vw; text-align: center;
  border: 0.052vw solid rgba(255,255,255,.2); cursor: pointer;
}
/* section05 */




/* section06 */
#process .container{
  display: flex;
  flex-direction: column;
  align-items: center;
}
#process .container .section-header{
  text-align: center;
}
#process-heading{
  font-size: 4.125vw;
}
#process-heading span{
  color: #0046FF;
}
#process .container .section-header p{
  font-family: 'suit';
  font-size: 1.302vw;
  font-weight: 800;
  color: #FF8040;
  margin: 1.042vw 0 2.604vw;
}
#process .container .steps{
  display: flex;
  flex-wrap: wrap;
  gap: 1.563vw 2.604vw;
  width: 72.917vw;
}
#process .container .steps li{
  width: 25vw;
  height: 22.917vw;
  position: relative;
  background: #F4F4F4;
  padding: 2.083vw;
  border-radius: 1.563vw;
  overflow: hidden;
}
#process .container .steps li:nth-child(2){
  width: 45.313vw;
  height: 22.917vw;
  background: #001BB7;
  color: #fff;
}
#process .container .steps li:nth-child(3){
  width: 45.313vw;
  height: 22.917vw;
  background: #0046FF;
  color: #fff;
}
#process .container .steps li figure{
  position: absolute;
  width: 15.938vw;
  height: 17.24vw;
  bottom: 0;
  right: 0.573vw;
}
#process .container .steps li:nth-child(2) figure{
  width: 29.948vw;
  height: 21.771vw;
  bottom: 0;
  right: 1.615vw;
}
#process .container .steps li:nth-child(3) figure{
  width: 23.438vw;
  height: 20.833vw;
  bottom: 0;
  right: 4.688vw;
}
#process .container .steps li:nth-child(4) figure{
  width: 15.156vw;
  height: 16.094vw;
  bottom: 0;
  right: 0;
}
#process .container .steps li article{
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
#process .container .steps li h3{
  font-size: 3.167vw;
  color: #000;
}
#process .container .steps li:nth-child(2) h3{
  color: #fff;
}
#process .container .steps li:nth-child(3) h3{
  color: #fff;
}
#process .container .steps li span{
  display: flex;
  width: 4.167vw;
  height: 4.167vw;
  border-radius: 50%;
  border: 0.156vw solid #fff;
  font-size: 2.604vw;
  align-items: center;
  justify-content: center;
  background: #000;
  color: #fff;
}
/* section06 */




/* section07 */
#serp-cases .container{
  display: flex;
  flex-direction: column;
  align-items: center;
}
#serp-heading{
  font-size: 3.125vw;
  margin-bottom: 4.167vw;
}
#serp-heading span{
  color: #0046FF;
}
#serp-cases .container .inner{
  gap: 7.188vw;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}
#serp-cases .container .inner > figure{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 1.563vw;
  height: 1.563vw;
}
#serp-cases .container .inner .card-grid{
  position: relative;
  width: 26.146vw;
  height: 37.656vw;
}
#serp-cases .container .inner .card-grid figure{
  display: none;
}

#serp-cases .container .inner .case-detail{
  width: 26.042vw;
  padding: 2.083vw;
  background: #0046FF;
  color: #fff;
  border-radius: 3.125vw;
}
#serp-cases .container .inner .case-detail .case-header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 2.604vw;
}
#serp-cases .container .inner .case-detail .case-header h3{
  font-size: 2.083vw;
}
#serp-cases .container .inner .case-detail .case-header .controls{
  display: flex;
  align-items: center;
}
#serp-cases .container .inner .case-detail .case-header .controls button{
  width: 2.344vw;
  height: 2.344vw;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}
#serp-cases .container .inner .case-detail .case-header .controls button:nth-child(1){
  margin-right: -0.417vw;
}
#serp-cases .container .inner .case-detail .case-header .controls button:nth-child(2){
  width: 3.125vw;
  height: 3.125vw;
  position: relative;
  z-index: 1;
}
#serp-cases .container .inner .case-detail .case-header .controls button:nth-child(3){
  margin-left: -0.417vw;
}
#serp-cases .container .inner .case-detail .case-header .controls button img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}
#serp-cases .container .inner .case-detail .text{
  font-size: 1.302vw;
  line-height: 1.6;
  font-family: 'suit';
  font-weight: 600;
}

/* 3-카드 스택: 항상 3장만 표시, 나머지는 화면에 없음 */
#serp-cases .container .inner .card-grid {
  position: relative;
  width: 26.146vw;
  height: 37.656vw;
  user-select: none;
  cursor: grab;
}
#serp-cases .container .inner .card-grid.grabbing { cursor: grabbing; }

/* 3개 슬롯 공통(절대배치) */
#serp-cases .container .inner .card-grid figure {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 20.521vw;   /* 맨앞(Active) 기준 크기 */
  height: 37.656vw;
  margin: 0;
  opacity: 0;
  pointer-events: none;
  transform: translateX(2.083vw) scale(.9) rotate(0deg);
  transition: transform .48s ease, opacity .48s ease, filter .48s ease;
  will-change: transform, opacity;
  display: block !important; /* 기존 display:none 무시 */
  z-index: 0;
}
#serp-cases .container .inner .card-grid figure img{
  width: 100%; height: 100%; object-fit: cover;
}

/* 앞/뒤/그뒤 배치 (살짝 기울임) */
#serp-cases  .container .inner .card-grid figure.active {
  opacity: 1 !important; pointer-events: auto; z-index: 3;
  transform: translateX(0) scale(1) rotate(0deg);
}
#serp-cases .container .inner .card-grid figure.next {
  opacity: 1 !important; z-index: 2;
  transform: translateX(-3.542vw) scale(.89) rotate(-5deg);
}
#serp-cases .container .inner .card-grid figure.more_next {
  opacity: 1 !important; z-index: 1;
  transform: translateX(-7.031vw) scale(.76) rotate(-10deg);
}
/* section07 */



/* section08 */
#pricing{
  width: 100vw;
  height: 56.25vw;
  background-image: url("../img/sec08_bg.png");
  background-position: center center;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  padding: 0;
  padding-top: 6.771vw;
  position: relative;
}
#pricing .container{
  display: flex;
  flex-direction: column;
  align-items: center;
}
#pricing .container .section-header{
  margin-bottom: 7.135vw;
  text-align: center;
}
#pricing .container .section-header p{
  font-size: 2.083vw;
  color: #ffffffb9;
}
#pricing .container .section-header h2{
  font-size: 3.125vw;
  background: linear-gradient(to right, #FFCC40, #FF8040);
  color: transparent;
  -webkit-background-clip: text;
  margin-top: 0.521vw;
}
#pricing .container .pricing-grid{
  display: flex;
  gap: 2.604vw;
  margin-left: 10%;
}
#pricing .container .pricing-grid .pricing-left{
  width: 18.229vw;
  height: 18.229vw;
  border-radius: 50%;
  background: #150D7C;
  padding-top: 4.167vw;
}
#pricing .container .pricing-grid .pricing-left header{
  text-align: center;
  font-family: 'suit';
}
#pricing .container .pricing-grid .pricing-left header p{
  font-weight: 600;
  color: #fff;
  font-size: 1.302vw;
  margin-bottom: 0.781vw;
}
#pricing .container .pricing-grid .pricing-left header h3{
  font-size: 1.563vw;
  font-weight: 700;
  background: linear-gradient(to right, #FFCC40, #FF8040);
  color: transparent;
  -webkit-background-clip: text;
}
#pricing .container .pricing-grid .pricing-left >figure{
  position: absolute;
  bottom: 0;
  left: 16%;
  width: 46.25vw;
  height: 27.917vw;
}
#pricing .container .pricing-grid .pricing-right > h3{
  font-size: 2.083vw;
  color: #fff;
  margin-bottom: 1.563vw;
}
#pricing .container .pricing-grid .pricing-right > h3 strong{
  font-size: 4.167vw;
}
#pricing .container .pricing-grid .pricing-right .retention{
  width: 26.042vw;
  position: relative;
  color: #fff;
  margin-bottom: 1.302vw;
}
#pricing .container .pricing-grid .pricing-right .retention::before{
  content: "";
  width: 100%;
  border-radius: 0 1.042vw 1.042vw 0;
  background: #000340;
  height: 2.083vw;
  position: absolute;
  left: 0;
  top: 2.865vw;
}
/* 베이스: 초기 상태는 width:0 */
#pricing .container .pricing-grid .pricing-right .retention { position: relative; }
#pricing .container .pricing-grid .pricing-right .retention::after{
  content:"";
  position:absolute;
  left:0;
  top:2.865vw;
  height:2.083vw;
  width:0;                           /* 초기 0 */
  border-radius:0 1.042vw 1.042vw 0;
  background:linear-gradient(to right,#FFCC40,#FF8040);
  will-change: width;
}

/* 트랜지션은 'ready' 상태에서만 활성화 (첫 페인트 이후) */
#pricing .container .pricing-grid .pricing-right.ready .retention::after{
  transition: width 1.2s ease;
}

/* 실제 애니메이션 시작 상태 */
#pricing .container .pricing-grid .pricing-right.inview .retention::after{
  width:92%;
}
#pricing .container .pricing-grid .pricing-right .retention h4{
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  font-family: 'suit';
  font-size: 1.302vw;
  font-weight: 700;
  margin-bottom: 2.865vw;
}
#pricing .container .pricing-grid .pricing-right .retention h4 strong{
  font-size: 2.083vw;
  font-weight: 900;
}
#pricing .container .pricing-grid .pricing-right .retention h4 strong span{
  font-size: 1.302vw;
  font-weight: 700;
}
#pricing .container .pricing-grid .pricing-right .retention p{
  font-size: 0.938vw;
  font-family: 'suit';
  color: #ffffff91;
}
#pricing .container .pricing-grid .pricing-right .uplifts {
  display: flex;
  flex-direction: column;
  gap: 1.563vw;
}
#pricing .container .pricing-grid .pricing-right .uplifts li{
  position: relative;
  width: 15.625vw;
  height: 2.083vw;
  border-radius: 1.042vw;
  display: flex;
  align-items: center;
  padding-left: 1.042vw;
  background: #0046FF;
  color: #fff;
}
#pricing .container .pricing-grid .pricing-right .uplifts li figure{
  width: 1.563vw;
  height: 1.563vw;
  margin-right: 0.521vw;
}
#pricing .container .pricing-grid .pricing-right .uplifts li span{
  font-family: 'suit';
  font-size: 1.302vw;
  font-weight: 700;
  color: #fff;
}
#pricing .container .pricing-grid .pricing-right .uplifts li > img{
  position: absolute;
  right: -1.719vw;
  top: 50%;
  transform: translateY(-50%);
  width: 4.844vw;
  height: 3.646vw;
}
/* section08 */



/* section09 */
#contact{
  width: 100vw;
  height: 17.708vw;
  background-image: url("../img/sec09_bg.png");
  background-position: center center;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  padding: 0;
  padding-left: 13.542vw;
}
#contact .container{
  display: flex;
  height: 100%;
  flex-direction: column;
  justify-content: center;
}
#contact .container h2{
  font-size: 2.083vw;
  color: #fff;
  margin-bottom: 0.781vw;
}
#contact .container p{
  font-size: 0.938vw;
  color: #fff;
  font-family: 'suit';
  margin-bottom: 1.563vw;
}
#contact .container .cta-group{
  display: flex;
  gap: 1.042vw;
}
#contact .container .cta-group a{
  width: 13.021vw;
  height: 3.125vw;
  border-radius: 1.042vw;
  font-size: 1.042vw;
  display: flex;
  align-items: center;
  justify-content: center;
}
#contact .container .cta-group a:nth-child(1){
  background: #333;
  border: 0.156vw solid #fff;
  color: #fff;
}
#contact .container .cta-group a:nth-child(2){
  background: #fff;
  color: #333;
}
#contact .container .cta-group a:nth-child(3){
  background: #fff;
  color: #FF8040;
}
/* section09 */




/* secction10 */
footer{
  background: #001166;
  padding: 2.604vw 0;
}
footer .container{
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #fff;
}
footer .container .brand{
  font-size: 2.083vw;
  margin-bottom: 1.042vw;
}
footer .container address{
  font-family: 'suit';
  font-size: 0.729vw;
  text-align: center;
  line-height: 2;
}
footer .container .copyright{
  color: #ffffff6f;
  margin-bottom: 2.604vw;
  font-family: 'suit';
  font-size: 0.729vw;
  line-height: 2;
}
footer .container .mission{
  font-size: 1.042vw;
  line-height: 1.75;
  font-family: 'batang';
  text-align: center;
}
/* secction10 */



/* section11 */
aside{
  padding: 1.302vw 0;
  background: #111111;
  font-family: 'suit';
  color: #fff;
}
aside .banner{
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
aside .banner > figure:nth-child(1){
  width: 5.625vw;
  height: 4.688vw;
  margin-bottom: 1.563vw;
}
aside .banner > h2{
  font-size: 1.823vw;
  font-weight: 900;
  margin-bottom: 0.521vw;
}
aside .banner > p{
  font-size: 1.042vw;
  font-weight: 700;
  margin-bottom: 1.823vw;
}
aside .banner .links{
  display: flex;
  justify-content: center;
  gap: 1.042vw;
  margin-bottom: 3.125vw;
}
aside .banner .links a{
  display: flex;
  flex-direction: column;
  align-items: center;
}
aside .banner .links a figure{
  width: 2.604vw;
  height: 2.604vw;
  margin-bottom: 0.521vw;
}
aside .banner .links a span{
  font-size: 0.938vw;
  font-weight: 700;
}
aside .banner > figure:last-child{
  width: 23.073vw;
  height: 0.885vw;
  margin-bottom: 1.563vw;
}
/* section11 */













/* =========================================
   Mobile ≤500px (500px = 100vw baseline)
   ========================================= */
@media screen and (max-width: 500px){
  /* 공통 */
  section{padding: 20vw 0;}
  body{background-size: cover;}

  /* Header */
  .site-header{
    display: none;
  }
  .header-wrap{
    width: 92vw; max-width: 92vw; height: 12vw;
  }
  .brand{ gap: 2.4vw; }
  .brand img{ height: 6vw; }
  .main-nav{
    gap: 4vw; overflow-x: auto; white-space: nowrap; scrollbar-width: none;
  }
  .main-nav::-webkit-scrollbar{ display:none; }
  .main-nav a{ font-size: 3.6vw; padding: 2.6vw 0; }
  .main-nav a::after{ bottom: -1.8vw; height: 0.8vw; }
  .main-nav .cta{
    padding: 2vw 4vw; border-radius: 4vw; box-shadow: 0 1.6vw 4vw rgba(255,184,0,.35);
  }



  /* 문의 */
  .form .cont{
    
width: calc(100% - 20px);
    
height: calc(100vh - 20px);
padding: 20px 20px 30px;
  }
  .form .cont .close{
    top: 20px;
    right: 20px;
  }
  .form .cont .inner{
    height: max-content;
  }
  /* 문의 */

  /* Hero */
 #hero {
    height: 900px; /* 860px */
  }

  #hero .container {
    flex-direction: column;
    padding-left: 0;
    align-items: center;
  }

  #hero .container .eyebrow {
    font-size: 5vw; /* 40px */
    text-align: center;
  }

  #hero .container h1 {
    font-size: 16vw; /* 100px */
    margin: 8vw 0 15vw; /* 40px 0 122px */
    text-align: center;
  }

  #hero .container .left {
    margin-top: 0; /* 68px */
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  #hero .container .cta-group {
    width: 90vw; /* 567px → 줄임 */
  }

  #hero .container .cta-group > a {
    margin-top: 3vw; /* 15px */
    height: 13vw; /* 100px */
    font-size: 5vw; /* 36px */
    border-radius: 2vw; /* 10px */
  }

  #hero .container .cta-group > a figure {
    width: 6vw; /* 50px */
    height: 6vw; /* 50px */
    margin-left: 1vw; /* 5px */
  }

  #hero .container .cta-group .links {
    height: 13vw; /* 100px */
    gap: 2vw; /* 10px */
  }

  #hero .container .cta-group .links a {
    font-size: 7.2vw; /* 36px */
    border-radius: 2vw;
  }

  #hero .container .cta-group .links a figure {
    width: 6vw;
    height: 6vw;
  }

  #hero .container .cta-group .links a:nth-child(1) {
    width: 45vw; /* 229px */
    font-size: 5vw;
  }

  #hero .container .cta-group .links a:nth-child(2) {
    width: 65vw; /* 328px */
    font-size: 5vw;
  }

  /* 오른쪽 mockup 영역 */
  #hero .right {
    margin-left: 0;
    margin-top: 10vw;
    width: 300px;
    height: 629px; /* 비율 유지 */
  }

  #hero .right .icon_img figure:nth-child(1) {
    width: 60vw; /* 300px */
    height: 46vw; /* 229px */
    bottom: 36.8vw; /* 184px */
    left: -34.8vw; /* -174px */
    display: none;
  }

  #hero .right .icon_img figure:nth-child(2) {
    width: 40px; /* 55px */
    height: 40px;
    bottom: 280px; /* 369px */
    left: 20px; /* -70px */
  }

  #hero .right .icon_img figure:nth-child(3) {
    width: 219px;
    height: 47px; /* 65px */
    top: 200px; /* 270px */
    left: 20px; /* -150px */
  }

  #hero .right .icon_img figure:nth-child(4) {
    width: 205px; /* 280px */
    height: 47px;
    bottom: 250px; /* 345px */
    right: 20px; /* -100px */
  }
  /* Numbers */
  #numbers-heading{ font-size: 8vw; margin-bottom: 8vw; }
  #numbers .stats{
    flex-direction: column; gap: 6vw;
  }
  #numbers .stats li{
    width: 92vw;
    height: 68vw;
    border-radius: 4.8vw;
  }
  #numbers .stats li .stat{
    width: 90%;
    height: 60vw;
    border-radius: 4.8vw;
  }
  #numbers .stats li .stat figure:nth-child(1),
  #numbers .stats li .stat figure:last-child{
    width: 10.6vw; height: 10.6vw;
  }
  #numbers .stats li .stat figure:nth-child(1){top: 4vw;width: 6vw;height: 6vw;}
  #numbers .stats li .stat figure:last-child{bottom: 4vw;width: 6vw;height: 6vw;}
  #numbers .stats li .stat .label{font-size: 6vw;margin-bottom: 3.4vw;}
  #numbers .stats li .stat .value{font-size: 10vw;}
  #numbers .stats li .stat .value span{ font-size: 6vw; }

  /* Social proof */
  #social-proof{
    width: 92vw;
    height: auto;
    border-radius: 6vw;
    box-shadow: 4vw 4vw 4vw rgba(0,0,0,.27);
    background-size: auto 100%;
  }
  #social-proof-heading{ font-size: 8vw; }
  #social-proof .container > p{font-size: 3.5vw;margin: 6vw 0 4vw;}
  #social-proof .container > figure{
    width: 64vw; height: 64vw; margin-bottom: 10vw;
  }
  #social-proof .container .badges{ gap: 6vw; }
  #social-proof .container .badges li{
    width: 87vw;
    height: 13vw;
  }
  #social-proof .container .badges li p{ font-size: 6vw; }

  /* Benefits */
  #benefits-heading{ font-size: 8vw; margin-bottom: 8vw; }
  #benefits .container .features{
    width: 92vw; gap: 4vw;
  }
  #benefits .container .features li{
    width: 92vw; height: auto; border-radius: 4.8vw;
    background-size: cover;
  }
  #benefits .container .features li article{
    padding: 5vw 0;
  }
  #benefits .container .features li article figure{
    height: 34vw; margin-bottom: 4vw;
  }
  #benefits .container .features li article h3{
    font-size: 6vw; margin-bottom: 3vw;
  }
  #benefits .container .features li article p{
    padding: 0 4vw; font-size: 4.2vw;
  }

  /* Reviews */
  #reviews .container .section-header{ margin-bottom: 8vw; }
  #reviews .container .section-header figure{
    width: 54vw; height: 16vw;
  }
  #reviews .container .section-header p{ font-size: 4vw; margin: 4vw 0 3vw; }
  #reviews .container .section-header h2{ font-size: 8vw; }
  #reviews .container .review-gallery{padding-top: 11vw;}
  #reviews .container .review-gallery::after{
    bottom: -11vw;
    height: 28vw;
    width: 120%;
  }

  #reviews .container .review-gallery .inner ul{
    width: 84vw;
    height: auto;
  }
  #reviews .container .review-gallery .inner ul li:nth-child(1){
    border-radius: 11vw 11vw 0 0;
    box-shadow: 0 0 8vw rgba(0,0,0,.18);
  }
  .review-modal .close{
    
top: 2vw;
    
right: 2vw;
    
width: 10vw;
    
height: 10vw;
    
font-size: 8vw;
    
line-height: normal;
    
display: flex;
    
align-items: center;
    
justify-content: center;
    
padding: 0;
  }
  /* Process */
  #process-heading{font-size: 8vw;}
  #process .container .section-header p{
    font-size: 4vw;
    margin: 3vw 0 10vw;
  }
  #process .container .steps{
    width: 92vw; gap: 4vw;
  }
  #process .container .steps li{
    width: 92vw;
    height: 40vw;
    padding: 5vw;
    border-radius: 4.8vw;
    overflow: hidden;
  }
  #process .container .steps li:nth-child(2),
  #process .container .steps li:nth-child(3){
    width: 92vw;
    height: 40vw;
  }
  #process .container .steps li figure{
    width: 48vw;
    height: 52vw;
    right: 2vw;
  }
  #process .container .steps li:nth-child(2) figure{
    width: 66vw; height: 52vw; right: 3vw;
  }
  #process .container .steps li:nth-child(3) figure{
    width: 54vw;
    height: 48vw;
    right: 2vw;
  }
  #process .container .steps li:nth-child(4) figure{
    width: 46vw; height: 48vw;
  }
  #process .container .steps li article{gap: 4vw;}
  #process .container .steps li h3{font-size: 7vw;}
  #process .container .steps li h3 br{
    display: none;
  }
  #process .container .steps li span{
    width: 10vw;
    height: 10vw;
    font-size: 5vw;
    border-width: 0.6vw;
  }

  /* SERP Cases (3-카드 스택) */
  #serp-heading{font-size: 8vw;margin-bottom: 10vw;word-break: keep-all;text-align: center;}
  #serp-cases .container .inner{
    gap: 8vw; flex-direction: column;
  }
  #serp-cases .container .inner .card-grid{
    width: 76vw;
    height: 114vw;
  }
  /* 3 슬롯 공통 */
  #serp-cases .container .inner .card-grid figure{
    width: 62vw;
    height: 114vw;
    transform: translateX(4vw) scale(.9) rotate(0deg);
  }
  /* 앞/뒤/그뒤 배치 */
  #serp-cases .container .inner .card-grid figure.active{
    transform: translateX(0) scale(1) rotate(0deg);
  }
  #serp-cases .container .inner .card-grid figure.next{
    transform: translateX(-8vw) scale(.9) rotate(-5deg);
  }
  #serp-cases .container .inner .card-grid figure.more_next{
    transform: translateX(-16vw) scale(.78) rotate(-10deg);
  }
  /* 우측 설명 박스 → 아래로 */
  #serp-cases .container .inner .case-detail{
    width: 92vw; padding: 6vw; border-radius: 6vw;
  }
  #serp-cases .container .inner .case-detail .case-header{
    margin-bottom: 6vw;
  }
  #serp-cases .container .inner .case-detail .case-header h3{
    font-size: 6.5vw;
  }
  #serp-cases .container .inner .case-detail .case-header .controls button{
    width: 8vw; height: 8vw;
  }
  #serp-cases .container .inner .case-detail .case-header .controls button:nth-child(2){
    width: 10vw; height: 10vw;
  }
  #serp-cases .container .inner .case-detail .text{
    font-size: 4vw;
  }

  /* Pricing */
  #pricing{
    height: auto;
    padding-top: 20vw;
    padding-bottom: 16vw;
    background-size: cover;
  }
  #pricing .container .section-header{
    margin-bottom: 12vw;
  }
  #pricing .container .section-header p{font-size: 4vw;}
  #pricing .container .section-header h2{font-size: 9vw;margin-top: 1.6vw;word-break: keep-all;}
  #pricing .container .pricing-grid{
    flex-direction: column; gap: 8vw; margin-left: 0;
    align-items: center;
  }
  #pricing .container .pricing-grid .pricing-left{
    width: 92vw;
    height: 40vw;
    padding-top: 7vw;
    border-radius: 60px;
  }
  #pricing .container .pricing-grid .pricing-left header p{font-size: 4.8vw;margin-bottom: 2vw;}
  #pricing .container .pricing-grid .pricing-left header h3{font-size: 7vw;}
  #pricing .container .pricing-grid .pricing-left > figure{
    position: static;
    width: 92vw;
    height: 52vw;
    margin-top: 6vw;
    display: none;
  }
  #pricing .container .pricing-grid .pricing-right > h3{
    font-size: 6vw; margin-bottom: 4vw; text-align: center;
  }
  #pricing .container .pricing-grid .pricing-right > h3 strong{
    font-size: 12vw;
  }
  #pricing .container .pricing-grid .pricing-right .retention{
    width: 92vw; margin-bottom: 4vw;
  }
  #pricing .container .pricing-grid .pricing-right .retention::before,
  #pricing .container .pricing-grid .pricing-right .retention::after{
    height: 6vw; top: 12vw; border-radius: 0 4vw 4vw 0;
  }
  #pricing .container .pricing-grid .pricing-right .retention h4{
    font-size: 4.2vw; margin-bottom: 12vw;
  }
  #pricing .container .pricing-grid .pricing-right .retention h4 strong{
    font-size: 7vw;
  }
  #pricing .container .pricing-grid .pricing-right .retention h4 strong span{
    font-size: 4.2vw;
  }
  #pricing .container .pricing-grid .pricing-right .retention p{
    font-size: 3.6vw;
  }
  #pricing .container .pricing-grid .pricing-right .uplifts{
    gap: 3.6vw; align-items: center;
  }
  #pricing .container .pricing-grid .pricing-right .uplifts li{
    width: 72vw; height: 10vw; border-radius: 5vw; padding-left: 4vw;
  }
  #pricing .container .pricing-grid .pricing-right .uplifts li figure{
    width: 6vw; height: 6vw; margin-right: 3vw;
  }
  #pricing .container .pricing-grid .pricing-right .uplifts li span{
    font-size: 4.6vw;
  }
  #pricing .container .pricing-grid .pricing-right .uplifts li > img{
    width: 18vw; height: 12vw; right: -6vw;
  }

  /* Contact */
  #contact{
    height: auto; padding: 12vw 0; padding-left: 0; background-size: cover;
  }
  #contact .container{ align-items: center; text-align: center; }
  #contact .container h2{font-size: 8vw;word-break: keep-all;margin-bottom: 3vw;}
  #contact .container p{ font-size: 3.8vw; margin-bottom: 6vw; }
  #contact .container .cta-group{
    flex-direction: column; gap: 3.6vw; width: 100%; align-items: center;
  }
  #contact .container .cta-group a{
    width: 92vw; height: 14vw; border-radius: 5vw; font-size: 4.6vw;
  }

  /* Footer */
  footer{ padding: 8vw 0; }
  footer .container .brand{ font-size: 6vw; margin-bottom: 3vw; }
  footer .container address,
  footer .container .copyright{
    font-size: 3.2vw; line-height: 2;
  }
  footer .container .mission{ font-size: 4vw; }

  /* Aside */
  aside{ padding: 6vw 0; }
  aside .banner > figure:nth-child(1){
    width: 18vw; height: 15vw; margin-bottom: 6vw;
  }
  aside .banner > h2{font-size: 6.8vw;margin-bottom: 4vw;word-break: keep-all;}
  aside .banner > p{font-size: 4.6vw;margin-bottom: 7vw;padding: 0 40px;word-break: keep-all;}
  aside .banner .links{
    gap: 4vw; margin-bottom: 10vw;
  }
  aside .banner .links a figure{
    width: 10vw; height: 10vw; margin-bottom: 2vw;
  }
  aside .banner .links a span{ font-size: 3.8vw; }
  aside .banner > figure:last-child{
    width: 70vw;
    height: 2.4vw;
    margin-bottom: 6vw;
  }
}