@charset "UTF-8";

*{box-sizing:border-box;margin:0;padding:0}
/* :root{
  --blue:#2c90fe;
  --dark:#202124;
  --gray:#8b95a1;
  --light:#f6f8fc;
  --white:#fff;
  --deep:#222325;
  --section-radius:40px;
  --pad-x:clamp(18px,4.2vw,80px);
  --pad-y:clamp(70px,7vw,128px);
} */
:root{
  --blue:#2c90fe;
  --dark:#202124;
  --black:#222;
  --gray:#7C848E;
  --dark-gray:#4E5968;
  --light:#f6f8fc;
  --white:#fff;
  --deep:#222325;
  --section-radius:40px;
  --pad-x:clamp(18px,4.2vw,80px);
  --pad-y:clamp(16px,4.2vw,80px);
  --navy:#1a3a52;
  --sky:#9ccfff;
  --card:#ffffff;
  --rd04-navy: #56616d;

  --viewport1440: 1440;
    --viewport768: 768;
    --viewport320: 320;
    --vwPercent: 100vw;
}


@font-face {
    font-family: 'KakaoBigSans-ExtraBold';
    src: url("../fonts/KakaoBigSans-ExtraBold.woff") format('woff'),
         url("../fonts/KakaoBigSans-ExtraBold.woff2") format('woff2');
    font-weight: 400;
    font-display: swap;
}
@font-face {
    font-family: 'KakaoBigSans-Bold';
    src: url("../fonts/KakaoBigSans-Bold.woff") format('woff'),
         url("../fonts/KakaoBigSans-Bold.woff2") format('woff2');
    font-weight: 700;
    font-display: swap;
}
@font-face {
    font-family: 'KakaoBigSans-Regular';
    src: url("../fonts/KakaoBigSans-Regular.woff") format('woff'),
         url("../fonts/KakaoBigSans-Regular.woff2") format('woff2');
    font-weight: 800;
    font-display: swap;
}
html{scroll-behavior:smooth}
body{white-space: normal;
  font-family:'KakaoBigSans-Regular',-apple-system,BlinkMacSystemFont,sans-serif;font-weight: 400;
  color:var(--dark);
  background:#fff;
  overflow-x:hidden;
  word-break: keep-all;
  line-height: 1.6;
}


img{max-width:100%;display:block}
@media (max-width: 768px) {
  br {
    display: block;
    content: "";
  }
  .header-main {margin:0 1rem 0;}
}


/* main tag  */
@media (max-width: 768px) {
.container-xl {
    max-width: 100%;
}
.container-sm, .container-xl, .container-xxl {
    --bs-gutter-x: 0rem;
}
}
.swiper-pagination {display: none;}
.footer {margin: 1.0rem;}

.roaming {font-family: 'KakaoBigSans-Regular', sans-serif;}
.roaming .section-head span {font-family: 'KakaoBigSans-Bold';}
.roaming .section-head h2 {font-family: 'KakaoBigSans-Bold'; color:#222222;}
.roaming .titletx {font-family: 'KakaoBigSans-Regular';color:var(--gray);}
.roaming .card-copy span {font-family: 'KakaoBigSans-Bold';}
.roaming .card-copy p {font-family: 'KakaoBigSans-Regular';color:var(--gray);}
.roaming h3{font-family: 'KakaoBigSans-Bold';color:var(--black);}
.roaming .itemtx {font-family: 'KakaoBigSans-Regular';color:var(--dark-gray);}
.roaming .titw {color:var(--white) !important;}
.card-copy span{color:var(--blue);font-size:clamp(14px,.95vw,17px);font-weight:700;letter-spacing:-.05em}


.rd-section{
  position:relative;
  width:100%;
  /* min-height:100vh; */
  overflow:hidden;
  border-radius:0 0 var(--section-radius) var(--section-radius);
}
.rd-section.light,.rd-section.gradient{
  background:var(--light);
}
.rd-section.white{
  background:#fff;
}
.rd-section.dark{
  background:var(--deep);
  color:#fff;
}
.section-head{
  position:relative;
  z-index:2;
  max-width:960px;
  margin:0 auto;
  text-align:center;
  padding:0 18px;
}
.section-head span:not(.badge){
  display: flex;
  margin-bottom:clamp(14px,1.6vw,20px);
  color:var(--blue);
  line-height:1.3;
  font-size:clamp(14px,1.05vw,18px);
  font-weight:700;
  letter-spacing:-.04em;
  
  align-items: center;   
  justify-content: center;
  
}
/* .section-head span:not(.badge-w){
  display: flex;
  margin-bottom:clamp(14px,1.6vw,20px);
  color:var(--white);
  line-height:1.3;
  font-size:clamp(14px,1.05vw,18px);
  font-weight:700;
  letter-spacing:-.04em;
  
  align-items: center;   
  justify-content: center;
  
} */
.section-head h2{
  color:#222222;
  font-size:clamp(32px,3.1vw,36px);
  line-height:1.3;
  font-weight:700;
  letter-spacing:-0.04em;
}
.section-head p{
      font-family: 'KakaoBigSans-Regular';
  margin-top:clamp(18px,1.5vw,20px);
  color:var(--gray);
  font-size:clamp(13px,.95vw,18px);
  line-height:1.5;
  letter-spacing:-.0725em;
  word-break:keep-all;
}


.dark-head p{color:#a0a6ad}
.badge{
  display:grid;
  place-items:center;
  width:42px;height:42px;
  margin:0 auto 18px;
  border-radius:50%;
  background:var(--blue);
  color:#fff!important;
  font-size:16px!important;
  font-weight:850;
}

.badge_round {font-family: 'KakaoBigSans-Bold'; color:var(--blue);    line-height: 150%; border: 1px solid var(--blue); border-radius: 150px; padding: calc(3 / var(--viewport1440) * var(--vwPercent)) calc(8 / var(--viewport1440) * var(--vwPercent)) calc(3 / var(--viewport1440) * var(--vwPercent));}

/* 00 hero new*/

@media (max-width: 768px) {
  .section-head{
  margin:28px auto 0;}
.section-head p{
  display:none;
}
.badge_round { padding: calc(8 / var(--viewport1440) * var(--vwPercent)) calc(32 / var(--viewport1440) * var(--vwPercent)) calc(8 / var(--viewport1440) * var(--vwPercent));}
}


/* 00 hero */
.rd-hero{
  min-height:100vh;
  background:url("../images/hero.jpg") center/cover no-repeat;
}
.rd-hero .hero-copy{
  position:relative;
  width:100%;
  min-height:100vh;
  padding:clamp(22px,3vw,52px);
}
.rd-hero h1{
  color:var(--blue);
  font-size:clamp(76px,13.4vw,250px);
  line-height:.82;
  letter-spacing:-.09em;
  font-weight:850;
  white-space:nowrap;
}
.hero-meta{
  position:absolute;
  display:flex;
  gap:clamp(42px,7vw,140px);
  color:var(--blue);
  font-size:clamp(11px,.95vw,18px);
  line-height:1.15;
}
.hero-meta b{font-weight:850}
.meta-left{top:27%;left:clamp(22px,3vw,52px)}
.meta-right{top:27%;right:clamp(32px,5vw,110px)}
.meta-bottom{left:clamp(22px,3vw,52px);bottom:clamp(24px,3vw,54px)}

/* 19 camping */
.rd-camping{
  min-height:100vh;
  background:url("../images/section19.jpg") center/cover no-repeat;
  color:var(--blue);
}
.camping-title{
  position:absolute;
  top:26%;
  left:50%;
  transform:translateX(-50%);
  color:var(--blue);
  font-size:clamp(68px,10vw,190px);
  font-weight:850;
  letter-spacing:-.08em;
  white-space:nowrap;
}

/* common section spacing */
.big-empty,.placeholder-video,.ai-gallery,.mockup-feature,.guide-section,.review-section,.personal-section,.design-system,.phone-panel,.direction-section,.insight-section,.interview-section,.chart-section,.problem-section,.travel-section,
.people-section,.direc-section,.s12-section {
  padding:var(--pad-y) var(--pad-x);
}

/* placeholder */
.big-empty{min-height:980px}
.placeholder-video{min-height:1320px}


.video-layout{
  width:min(920px,100%);
  margin:60px auto 0;
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:16px;
}
.video-box {
  width: min(100%, 1200px);
  border-radius: 32px;
  overflow: hidden;
}

.video-box video {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

.video-box,.video-wide{
  /* background:#f6f8fc; */
  border-radius:28px;
}
.video-box{height:auto}
.video-wide{
   overflow: hidden;
  grid-column:1/-1;
  position: relative;
  width: 100%;
  height: 470px; 
  overflow: hidden;
}

.video-wide video{
  position: absolute;
  inset: 0;

  width: 100%;
  height: 100%;

  object-fit: cover;
  object-position: center center;

  display: block;
}
/* .video-wide{
  overflow: hidden;
  grid-column:1/-1;
  height: 520px;
  border-radius: 28px;
}
.video-wide video { width:100%; } */

/* ai-gallery */
.ai-gallery h2 {color:var(--white)}

/* gallery */
.image-grid.four{
  max-width:1810px;
  margin:clamp(50px,5vw,80px) auto 0;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:clamp(16px,1.3vw,26px);
}
.image-grid.four img{
  border-radius:28px;
  aspect-ratio:440/639;
  object-fit:cover;
}

/* feature mockup sections */
.feature-card{
  position:relative;
  max-width:1740px;
  min-height:clamp(620px,45vw,820px);
  margin:clamp(62px,6vw,110px) auto 0;
  background:#fff;
  border-radius:32px;
  overflow:hidden;
}
.feature-text{
  position:absolute;
  z-index:4;
  max-width:360px;
}
.feature-text.left{left:11%;top:30%}
.feature-text.right{right:13%;top:30%}
.feature-text b,.feature-text .pill{
  display:inline-flex;
  align-items:center;
  min-height:38px;
  margin-bottom:18px;
  color:var(--blue);
  font-size:15px;
  font-weight:850;
}
.pill{
  padding:0 18px;
  background:var(--blue);
  border-radius:16px;
  color:#fff!important;
}
.feature-text h3{
  font-size:clamp(23px,1.6vw,32px);
  line-height:1.35;
  letter-spacing:-.07em;
}
.feature-text p{
  margin-top:20px;
  color:#7e8995;
  font-size:clamp(13px,.85vw,15px);
  line-height:1.7;
}
.mock{
  position:absolute;
  z-index:3;
}
.phone-large{
  left:50%;
  bottom:0;
  width:clamp(300px,27vw,450px);
  transform:translateX(-50%);
  filter:drop-shadow(0 24px 34px rgba(25,45,72,.16));
}
.deco-left{left:21%;top:27%;width:clamp(180px,20vw,340px)}
.deco-right{right:20%;top:34%;width:clamp(170px,18vw,310px)}
.review-left{left:12%;bottom:18%;width:clamp(280px,28vw,470px)}
.review-right{right:11%;bottom:22%;width:clamp(280px,27vw,460px)}
.personal-left{left:-2%;bottom:18%;width:clamp(340px,38vw,640px)}
.personal-right{right:11%;bottom:26%;width:clamp(280px,24vw,420px)}

/* guide */
.phone-row{
  max-width:1740px;
  margin:clamp(70px,7vw,120px) auto 0;
  display:grid;
  grid-template-columns:repeat(5,1fr);
  align-items:end;
  gap:clamp(18px,2vw,44px);
}
.phone-row img{
  filter:drop-shadow(0 24px 28px rgba(20,40,70,.1));
}
.phone-row .center-phone{
  transform:scale(1.18);
  z-index:2;
}

/* design system */
.ds-grid{
  /* max-width:1740px; */
  margin:clamp(32px,5vw,92px) auto 0;
  display:grid;
  grid-template-columns:.9fr 1.12fr;
  gap:16px;
}
.ds-card{
  min-height:760px;
  padding:clamp(42px,4vw,80px);
  background:#fff;
  border-radius:32px;
  overflow:hidden;
}
.ds-card h3{
  font-size:clamp(22px,2.3vw,32px);
  letter-spacing:-.07em;
}
.ds-card p{
  margin-top:1rem;
  color:var(--gray);
  line-height:1.5;
  font-size:clamp(15px,.95vw,16px);
}
.ds-card img{
  margin-top:56px;
  width:calc(100% + 80px);
  max-width:none;
  border-radius:24px 0 0 0;
}
.type-foundation{
  margin-top:70px;
  display:grid;
  grid-template-columns:260px 1fr;
  gap:20px;
  align-items:end;
}
.type-foundation span{
  display:block;
  margin-bottom:18px;
  color:var(--gray);
  font-weight:800;
}
.type-foundation strong{
  display:block;
  font-size:clamp(90px,7vw,140px);
  line-height:100%;
  letter-spacing:-.08em;
}
.type-foundation b{font-size:24px; color:var(--dark)}
.type-list {font-family: 'KakaoBigSans-Bold';}
.type-list h4{font-family: 'KakaoBigSans-ExtraBold'; font-weight: 800; font-size:clamp(24px,6.5vw,42px); letter-spacing:-.03em;color:var(--dark);line-height: 1.4;}
.type-list h5{font-family: 'KakaoBigSans-Bold'; font-weight: 700; font-size:clamp(18px,6vw,32px);letter-spacing:-.03em;color:var(--dark);line-height: 1.5;}
.type-list h6{font-family: 'KakaoBigSans-Regular'; font-weight: 400; font-size:clamp(14px,5.5vw,28px);letter-spacing:-.04em;color:var(--dark);line-height: 1.5;}
.colors{
  margin-top:54px;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
}
.colors span{
  min-height:74px;
  display:grid;
  place-items:center;
  font-size:clamp(12px,.95vw,17px);
  background:var(--c);
  border:1px solid rgba(0,0,0,.08);
  border-radius:16px;
  font-weight:850;
}
@media (max-width: 1440px) { 
  .type-foundation {margin-top:40px;grid-template-columns: 200px 1fr;align-items: center;}
  .type-list h4 {   font-size: 20px;}
  .type-list h5 {  font-size: 18px;}
    .type-list h6 {  font-size: 16px;}
    .colors {margin-top: 34px;}
    .colors span {min-height: 54px;}
    .ds-card {min-height: auto;}

} 
@media (max-width: 768px) {
  .type-list h4{font-family: 'KakaoBigSans-Bold'; font-weight: 700;letter-spacing:-0.06em;}
  .type-list h5 {letter-spacing:-0.06em;}
  .type-list h6 {letter-spacing:-0.06em;}
.colors span{
  min-height:48px;
}
}

/* blue panel phone */
.phone-panel{
  min-height:100vh;
  padding:var(--pad-y) 0 0;
}
.blue-band{
  position:absolute;
  left:0;right:0;bottom:0;
  height:clamp(320px,32vw,470px);
  background:var(--blue);
  border-radius:34px 34px 0 0;
}
.blue-phone{
  position:absolute;
  left:50%;
  bottom:0;
  width:clamp(260px,24vw,400px);
  transform:translateX(-50%);
  z-index:3;
  filter:drop-shadow(0 24px 34px rgba(25,45,72,.16));
}

/* direction/insight cards */
.gradient{background:linear-gradient(180deg,#f6f8fc 0%,#eaf6ff 100%)}



.wide-direction{
  /* max-width:1680px; */
  margin:80px auto 0;
  min-height:360px;
  padding:70px;
}
.wide-direction .cap{margin:0 auto 20px}

.simple-card-grid{
  /* max-width:1720px; */
  margin:clamp(70px,7vw,110px) auto 0;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:18px;
}
.simple-card-grid article{
  min-height:560px;
  padding:70px 66px;
}
.simple-card-grid h3{
  font-size:clamp(24px,1.8vw,34px);line-height:1.35;letter-spacing:-.07em;
}
.simple-card-grid p{margin-top:28px;color:#6f7a86;line-height:1.7}
.simple-card-grid footer{
  position:absolute;
}
.simple-card-grid article{position:relative}
.simple-card-grid footer{
  left:66px;right:66px;bottom:60px;
  display:flex;justify-content:space-between;
}
.simple-card-grid footer b{color:var(--blue)}
.simple-card-grid footer span{color:#7d8792;font-weight:800}





.interview-swiper {
  width: 100%;
  overflow: hidden;
}

.interview-swiper .swiper-wrapper {
  align-items: stretch;
}

.interview-swiper .swiper-slide {
  height: auto;
  background: #fff;
  border-radius: 28px;
  padding: 56px 44px 40px;
}




















/* interview */
.interview-grid{
  /* max-width:1740px; */
  margin:clamp(70px,7vw,110px) auto 0;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:18px;
}
.interview-grid article{
  /* min-height:580px; */
  padding:48px;
}

.interview-grid img{
  width:160px;height:160px;
  object-fit:contain;
  margin:0 auto 20px;
}
.interview-grid .quo {text-align: left;display: inline-block; margin-left: 0;}
.interview-grid .quo img{    width: calc(20 / var(--viewport1440) * var(--vwPercent));
    height: calc(20 / var(--viewport1440) * var(--vwPercent));}
.interview-grid b{color:var(--blue);font-size:44px;line-height:1; width:20px;height:20px;}
.interview-grid h3{color:var(--dark);
  margin-top:10px;
  font-size:clamp(21px,1.5vw,22px);
  line-height:1.30;letter-spacing:-.07em;
}
.interview-grid p{font-size: 16px; margin-top:20px;color:var(--dark-gray);line-height:1.5}
.interview-grid footer{display:flex;gap:10px;margin-top:28px}
.interview-grid footer span{
  padding:10px 18px;border-radius:12px;background:#e9f3ff;color:var(--blue);font-weight:850;font-size:14px;
}

/* charts - .chart-card is legacy, use .rd-chart-card instead */

/* problem */
.problem-wrap{
  /* max-width:1660px; */
  margin:clamp(70px,7vw,120px) auto 0;
  padding:90px 70px;
  background:#fff;
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:54px;
  border-radius: 32px;
}
.problem-wrap b{color:var(--blue); font-size:13px;}
.problem-wrap h3{font-size:20px;margin-top:8px;letter-spacing:-.06em; color:var(--black)}
.problem-wrap p{font-size:14px;margin-top:20px;color:var(--dark-gray);line-height:1.6;letter-spacing:-.0725em; }
.problem-wrap img{
  /* width:100%; */
  /* height:460px; */
  margin-top:44px;
  object-fit:cover;
  object-position:center 58%;
  border-radius:28px;
}

/* travel */
.travel-section .card-grid{
  /* max-width:1740px; */
  margin:clamp(60px,6vw,90px) auto 0;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
}

.travel-section .travel-swiper{
  display:block !important;
  margin:clamp(40px,6vw,90px) auto 0;
  overflow:hidden;
}

.travel-section .travel-swiper .swiper-wrapper{
  display:flex;
  gap:16px;
  padding:0 clamp(0px,4vw,0px);
  box-sizing: border-box;
}

.travel-section .travel-swiper .swiper-slide{
  /* width: calc((100% - 32px) / 3);
  flex: 0 0 calc((100% - 32px) / 3); */
width: calc((100% - 32px) / 3) !important;
    flex-shrink: 0;
    box-sizing: border-box;
}
@media (max-width:768px){
.travel-section .travel-swiper .swiper-slide{
  width: calc((100% - 16px) / 1.2);
  flex: 0 0 calc((100% - 16px) / 1.2);
}
.travel-section .travel-swiper .swiper-wrapper{
  gap:8px;
}
}
.travel-section .travel-swiper .travel-card{
  height:100%;
  min-height:690px;
}

@media (max-width:768px){
.travel-section .travel-swiper .travel-card{
  height:auto;
  min-height:400px;
}
}

.travel-section .swiper-pagination{
  margin-top:40px;
  text-align:center;
}

.travel-section .swiper-pagination-bullet{
  width:8px;
  height:8px;
  background:rgba(34,44,58,.3);
}

.travel-section .swiper-pagination-bullet-active{
  background:var(--blue);
}

.problem-section .problem-swiper{
  display:block !important;
  margin:clamp(60px,6vw,90px) auto 0;
  overflow:hidden;
}

.problem-swiper .swiper-wrapper{
  display:flex;
  gap:80px;
  padding:0 clamp(0px,4vw,0px);
  box-sizing: border-box;
}

.problem-swiper .swiper-slide{

  width: calc((100% - 320px) / 5);
  flex: 0 0 calc((100% - 320px) / 5);
}

@media (max-width:768px){
.problem-swiper .swiper-slide{

  width: calc((100% - 160px) / 2.2);
  flex: 0 0 calc((100% - 160px) / 2.2);

}
}

.problem-section .swiper-pagination{
  margin-top:40px;
  text-align:center;
}

.problem-section .swiper-pagination-bullet{
  width:8px;
  height:8px;
  background:rgba(34,44,58,.3);
}

.problem-section .swiper-pagination-bullet-active{
  background:var(--blue);
}

.travel-section .travel-card{
  position:relative;
  min-height:690px;
  overflow:hidden;
  border-radius:32px;
  background:#eaf5ff;
  display:flex;
  align-items:flex-start;
}

.travel-section .travel-card img{
  position:absolute;
  width:100%;
  height:100%;
  object-fit:cover;
  top:0;
  left:0;
}

.travel-section .card-content{
  position:relative;
  z-index:2;
  padding:60px;
  color:#222;
  /* text-shadow:0 2px 8px rgba(0,0,0,0.3); */
}
@media (max-width:768px){
.travel-section .card-content{
  padding:0px;
}
}
.travel-section .card-content span{
  display:block;
  margin-bottom:12px;
  color:#222;
  font-size:16px;
  font-weight:700;
  letter-spacing:-.04em;
}

.travel-section .card-content h2{
  font-family: kakaoBigSans-Bold;
  color:#222;
  font-size:clamp(20px,2.2vw,32px);
  line-height:1.3;
  letter-spacing:-.07em;
  margin-bottom:12px;
}

.travel-section .card-content p{
  max-width:340px;
  color:rgba(255,255,255,0.95);
  font-size:16px;
  line-height:1.65;
  letter-spacing:-.035em;
}

/* CSS-only entrance */
@media (prefers-reduced-motion:no-preference){
  .rd-section :is(.section-head,.travel-grid article,.chart-card,.interview-grid article,.simple-card-grid article,.direction-grid article,.ds-card,.feature-card,.image-grid img,.phone-row img,.problem-wrap article){
    animation:fadeUp .85s ease both;
    animation-timeline:view();
    animation-range:entry 0% cover 28%;
  }
}
@keyframes fadeUp{
  from{opacity:.2;transform:translateY(28px)}
  to{opacity:1;transform:translateY(0)}
}

/* responsive */

  /* .problem-section .problem-swiper .swiper-slide{width:calc(100% / 5)} */

@media (max-width:1280px){
  .rd-hero h1{font-size:clamp(62px,14vw,180px)}
  .image-grid.four,.simple-card-grid,.interview-grid{grid-template-columns:repeat(2,1fr)}
  .travel-section .card-grid,.chart-grid.three,.chart-grid.six,.ds-grid{grid-template-columns:1fr;}
  .travel-section .travel-swiper .swiper-slide{width:calc(100% / 2.2)}
  .problem-section .problem-swiper .swiper-slide{width:calc(100% / 3.2)}
  .problem-wrap{grid-template-columns:repeat(2,1fr)}
  .feature-card{min-height:auto;padding:44px 22px;display:grid;gap:32px;justify-items:center}
  .feature-text,.mock{position:relative!important;left:auto!important;right:auto!important;top:auto!important;bottom:auto!important;transform:none!important}
  .feature-text{text-align:center;max-width:560px}
  .phone-large{width:min(62vw,390px)}
  .personal-left,.personal-right,.review-left,.review-right{width:min(100%,620px)}
  .phone-row{grid-template-columns:repeat(3,1fr)}
  .phone-row .center-phone{transform:none}
}
@media (max-width:768px){
  :root{--section-radius:28px}
  .rd-section{min-height:auto}
  .rd-hero .hero-copy,.rd-hero{min-height:680px}
  .rd-hero h1{font-size:clamp(48px,18vw,110px);white-space:normal;line-height:.9}
  .hero-meta{font-size:12px}
  .meta-left,.meta-right{top:30%;flex-direction:column;gap:12px}
  .meta-right{align-items:flex-end}
  .rd-camping{min-height:680px}
  .camping-title{font-size:clamp(52px,18vw,120px)}
  .image-grid.four,.simple-card-grid,.interview-grid,.direction-grid,.problem-wrap,.phone-row{grid-template-columns:1fr}
  .grid2 {
        grid-template-columns: repeat(2, 1fr) !important;
        }
  /* .problem-section .problem-swiper .swiper-slide{width:calc(100% / 2.2)} */
  .travel-section .travel-swiper .swiper-slide{width:calc(100% / 1.2)}
  .video-layout{grid-template-columns: repeat(2, 1fr)}
  .video-box,.video-wide{height:auto}
  /* .video-wide video{height:100%} */
  .ds-card{min-height:auto;padding:2.4rem}
  .ds-card img{width:100%;border-radius:20px;margin-top: 24px;}
  .type-foundation{grid-template-columns:1fr;gap:32px; margin-top: 48px;}
  /* .colors{grid-template-columns:1fr 1fr} */
  .blue-band{height:300px}
  .blue-phone{width:min(78vw,310px)}
  .phone-panel{min-height:660px}
  .travel-section .card-grid article{min-height:560px;padding:48px 36px}
  .travel-section .travel-swiper .swiper-slide{width:calc(100% / 1.2)}
  .problem-wrap{padding:38px 24px}
  /* .problem-section .problem-swiper{margin:clamp(40px,4vw,60px) auto 0}
  .problem-section .problem-swiper .swiper-wrapper{gap:16px}
  .problem-section .problem-swiper .swiper-slide{padding:24px 18px} */
  .problem-wrap b{font-size:12px}
  .problem-wrap h3{font-size:16px;margin-top:6px}
  .problem-wrap p{font-size:13px;margin-top:12px;line-height:1.5}
  .problem-wrap img{height:240px;margin-top:28px}
  .problem-section .swiper-pagination{margin-top:28px}
  .chart-card{min-height:500px;padding:40px 28px}
}
@media (max-width:768px){
  .section-head h2{font-size:20px}
  .section-head p br{display:none}
  /* .colors{grid-template-columns:1fr} */
  /* .image-grid.four{max-width:360px} */
    /* .video-layout{grid-template-columns:2fr} */
  /* .video-box,.video-wide{height:260px;} */
  .video-box{display:inline-block}
  .video-wide video{width:100%}
  .video-wide{
  position: relative;
  width: 100%;
  height: 280px; 
  overflow: hidden;}
}
@media (max-width:420px){
   .video-wide {height: 220px; }
}

.video-wide video{
  position: absolute;
  inset: 0;

  width: 100%;
  height: 100%;

  object-fit: cover;
  object-position: center center;

  display: block;
}



/*  chart styles */
.rd-section{width:100%;background:var(--light-bg);border-radius:0 0 40px 40px}
/* .rd-section{width:100%;min-height:100vh;background:var(--light-bg);border-radius:0 0 40px 40px} */
.rd-chart-section{padding:clamp(76px,7vw,118px) clamp(18px,4vw,82px)}
.rd-section-head{max-width:900px;margin:0 auto;text-align:center}
.rd-section-head span{display:block;margin-bottom:20px;color:var(--blue);font-size:clamp(15px,1vw,18px);font-weight:850;letter-spacing:-.04em}
.rd-section-head h2{font-size:clamp(34px,3vw,54px);line-height:1.18;font-weight:850;letter-spacing:-.075em}
.rd-section-head p{margin-top:24px;color:var(--gray);font-size:clamp(13px,.9vw,16px);line-height:1.65;letter-spacing:-.04em}
.rd-source{max-width:1740px;margin:clamp(58px,6vw,96px) auto 24px;text-align:right;color:var(--gray);font-size:13px;font-weight:600}

/* Chart Swiper Styles */
.chart-swiper-wrapper{
  margin:clamp(60px,6vw,90px) auto 0;
  overflow:hidden;
}

.chart-swiper-1,
.chart-swiper-2{
  display:block !important;
  
}

.chart-swiper-1 .swiper-wrapper,
.chart-swiper-2 .swiper-wrapper{
  display: flex !important; /* Swiper 기본 flex 유지 */
  gap: 16px;               /* 슬라이드 간의 간격 설정 */
  box-sizing: border-box;
}

.chart-swiper-1 .swiper-slide,
.chart-swiper-2 .swiper-slide{
  width: calc((100% - 32px) / 3) !important; 
  flex-shrink: 0; /* 슬라이드 크기가 줄어들지 않도록 방지 */
  box-sizing: border-box;
}

@media (max-width:768px) {
.chart-swiper-1 .swiper-slide,
.chart-swiper-2 .swiper-slide{
  width: calc((100% - 16px) / 1.05) !important; 
  flex-shrink: 0; /* 슬라이드 크기가 줄어들지 않도록 방지 */
  box-sizing: border-box;
  padding-right: 30px;
}
}

/* .chart-swiper-1 .rd-chart-grid,
.chart-swiper-2 .rd-chart-grid{
  margin:0;
  display:flex;
  gap:clamp(0px,1.4vw,0px);
  box-sizing: border-box !important;
} */

.chart-swiper-1 .swiper-pagination,
.chart-swiper-2 .swiper-pagination{
  margin-top:40px;
  text-align:center;
}

.chart-swiper-1 .swiper-pagination-bullet,
.chart-swiper-2 .swiper-pagination-bullet{
  width:8px;
  height:8px;
  background:rgba(34,44,58,.3);
}

.chart-swiper-1 .swiper-pagination-bullet-active,
.chart-swiper-2 .swiper-pagination-bullet-active{
  background:var(--blue);
}

/* .rd-chart-grid{ margin:0 auto;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,1.4vw,26px)}
.rd-chart-grid{ margin:0 auto;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,1.4vw,26px)} */
/* .rd-chart-card{position:relative;min-height:clamp(600px,50vw,690px);padding:clamp(0px,3.5vw,64px);border-radius:32px;background:var(--card);overflow:hidden} */

.card-copy h3{margin-top:10px;font-size:clamp(20px,1.65vw,32px);line-height:1.25;letter-spacing:-.07em;font-weight:700}
.card-copy p{margin-top:22px;font-size:clamp(13px,.85vw,15px);line-height:1.65;letter-spacing:-.04em}
.legend{margin-top:46px;text-align:center;color:#76818d;font-size:11px;white-space:nowrap}
.legend i{display:inline-block;width:6px;height:6px;margin:0 5px 1px 11px;border-radius:50%}
.legend i:first-child{margin-left:0}.legend .blue{background:var(--blue)}.legend .dark{background:var(--navy)}.legend .sky{background:var(--sky)}.legend .pale{background:#cbd8e3}.legend .light{background:#dfe7ee}.legend .soft{background:#edf1f5}
.chart-source{position:absolute;left:0;right:0;bottom:54px;text-align:center;color:var(--gray);font-size:13px;font-weight:600}



/* Donut animation */
.donut-area{position:relative;width:370px;height:290px;margin:50px auto 0}
@media (max-width:768px){
.donut-area{margin:50px auto 0}
.legend{margin-top:20px;}
}

.donut-chart{
  --slice-1:0deg;--slice-2:0deg;--slice-3:0deg;--slice-4:0deg;--slice-5:0deg;--slice-6:0deg;
  position:absolute;left:50%;top:45%;width:220px;height:220px;border-radius:50%;
  transform:translate(-50%,-50%) rotate(-90deg) scale(.92);
  background:conic-gradient(
    var(--blue) 0deg var(--slice-1),
    var(--navy) var(--slice-1) var(--slice-2),
    var(--sky) var(--slice-2) var(--slice-3),
    #d2dde7 var(--slice-3) var(--slice-4),
    #e2e9ef var(--slice-4) var(--slice-5),
    #edf2f6 var(--slice-5) var(--slice-6),
    transparent var(--slice-6) 360deg
  );
  box-shadow:0 20px 42px rgba(34,44,58,.08);
  opacity:0;
  transition:
    --slice-1 .8s ease,
    --slice-2 1s ease .1s,
    --slice-3 1.15s ease .2s,
    --slice-4 1.3s ease .3s,
    --slice-5 1.45s ease .4s,
    --slice-6 1.6s ease .5s,
    transform .9s ease,
    opacity .5s ease;
}
/* .rd-chart-card.is-ready .donut-chart{
  --slice-1:101deg;--slice-2:198deg;--slice-3:270deg;--slice-4:324deg;--slice-5:349deg;--slice-6:360deg;
  opacity:1;  transform:translate(-50%,-50%) rotate(-90deg) scale(1);
} */
.donut-center{position:absolute;inset:62px;display:grid;place-items:center;align-content:center;text-align:center;border-radius:50%;background:#fff;transform:rotate(90deg);opacity:0;transition:opacity .45s ease .95s}
/* .rd-chart-card.is-ready .donut-center{opacity:1} */
.donut-center strong{font-size:15px;font-weight:850;letter-spacing:-.05em}
.donut-center span{margin-top:4px;color:#8b95a1;font-size:10px;font-weight:700}
.bubble{position:absolute;min-width:72px;padding:12px 14px;border-radius:16px;background:#fff;text-align:center;color:#66717d;font-size:11px;line-height:1.15;box-shadow:0 18px 34px rgba(30,42,64,.1);opacity:0;transform:translateY(12px);transition:opacity .55s ease,transform .55s ease}
/* .rd-chart-card.is-ready .bubble{opacity:1;transform:translateY(0)}
.rd-chart-card.is-ready .age-b1{transition-delay:.9s}.rd-chart-card.is-ready .age-b2{transition-delay:1s}.rd-chart-card.is-ready .age-b3{transition-delay:1.1s}.rd-chart-card.is-ready .age-b4{transition-delay:1.2s}.rd-chart-card.is-ready .age-b5{transition-delay:1.3s}.rd-chart-card.is-ready .age-b6{transition-delay:1.4s} */
.bubble b{display:block;margin-top:2px;color:var(--dark);font-size:17px}
.age-b1{top:20px;right:10px}
.age-b2{right:32px;bottom:20px}
.age-b3{left:14px;bottom:56px}
.age-b4{left:-10;top:70px}
.age-b5{top:0px;left:25px}
.age-b6{top:-35px;left:100px}

/* Vertical bar */
.vertical-bars{height:300px;margin:0px auto 0;display:grid;grid-template-columns:repeat(6,1fr);gap:22px;align-items:end;max-width:440px}
.vbar-item{position:relative;height:100%;display:flex;align-items:center;justify-content:flex-end;flex-direction:column}
.value{
  position:absolute;

  bottom:calc(var(--bar-height) + 50px);

  padding:10px 13px;
  border-radius:15px;
  background:#fff;
  box-shadow:0 16px 32px rgba(30,42,64,.08);

  font-size:13px;
  font-weight:850;
}
/* .value{position:absolute;top:calc(var(--bar-height,0px) + 0px);padding:10px 13px;border-radius:15px;background:#fff;box-shadow:0 16px 32px rgba(30,42,64,.08);font-size:13px;font-weight:850} */
.vbar{width:50px;height:0;border-radius:25px;transition:height .8s ease}
.blue-bar{background:var(--blue)}.dark-bar{background:var(--navy)}
.pale-bar{background:linear-gradient(180deg,#e8edf2,#d9e2ea)}
.vbar-item b{margin-top:14px;color:#8b95a1;font-size:13px;font-weight:650}

/* Progress */
.progress-chart{
  margin:80px auto 0;
  max-width:430px;
  display:grid;
  gap:12px;
}

.progress-row{
  display:grid;
  grid-template-columns:1fr 76px;
  align-items:center;
  gap:12px;
}

.track{
  height:42px;
  border-radius:999px;
  background:#f0f2f5;
  overflow:hidden;
}

.fill{
  display:flex;
  align-items:center;
  width:0;
  height:100%;
  padding-left:22px;
  border-radius:999px;
  color:#fff;
  font-size:13px;
  font-weight:850;
  white-space:nowrap;
  transition:width .9s ease;
}
.blue-fill{
  background:linear-gradient(90deg,#2F80FF,#3C8DFF);
}
.sky-fill{
  background:linear-gradient(90deg,#9ccfff,#9ccfff);
}

.dark-fill{
  background:var(--navy);
}

.gray-fill{
  background:#D2DCE5;
  color:var(--dark);
}

.gray-text{
  color:var(--dark) !important;
}

.progress-row b{
  color:var(--blue);
  font-size:14px;
  font-weight:850;
  text-align:end;
}
/* .progress-chart{margin:54px auto 0;max-width:430px;display:grid;gap:12px}
.progress-row{display:grid;grid-template-columns:1fr 100px;align-items:center;gap:12px}
.track{height:44px;border-radius:999px;background:#f0f2f5;overflow:hidden}
.fill{display:flex;align-items:center;width:0;height:100%;padding-left:24px;border-radius:999px;color:#fff;font-size:12px;font-weight:850;white-space:nowrap;transition:width .9s ease}
.blue-fill{background:var(--blue)}
.dark-fill{background:var(--navy)}
.gray-fill{background:#dfe6ec;color:#9aa3ad}
.progress-row b{color:#8b95a1;font-size:13px;font-weight:750; text-align: end;} */
/* .rd-chart-card.is-ready .vbar{height:var(--target-height)}.rd-chart-card.is-ready .fill{width:var(--target-width)} */

@property --slice-1{syntax:'<angle>';inherits:false;initial-value:0deg}
@property --slice-2{syntax:'<angle>';inherits:false;initial-value:0deg}
@property --slice-3{syntax:'<angle>';inherits:false;initial-value:0deg}
@property --slice-4{syntax:'<angle>';inherits:false;initial-value:0deg}
@property --slice-5{syntax:'<angle>';inherits:false;initial-value:0deg}
@property --slice-6{syntax:'<angle>';inherits:false;initial-value:0deg}

@media (max-width:1280px){.rd-chart-grid{grid-template-columns:repeat(1,minmax(0,1fr));max-width:100%;gap:clamp(18px,1.4vw,26px);padding-right: 16px;}.rd-chart-card{min-height:670px}
  .chart-swiper-1 .swiper-slide,
  .chart-swiper-2 .swiper-slide{width:calc(100% / 1.3)}
}
@media (max-width:768px){
  .rd-chart-section{padding:64px 18px;border-radius:0 0 28px 28px}
  .rd-source{text-align:center}
  .rd-chart-card{min-height:clamp(540px,65vw,640px);border-radius:28px;}
  .donut-area{width:310px;height:310px}
  .donut-chart{width:200px;height:200px}
  .vertical-bars{gap:14px}
  .vbar{width:30px}
  .chart-swiper-1 .swiper-slide,
  .chart-swiper-2 .swiper-slide{width:calc(100% / 1.3)}
}
@media (max-width:480px){
  .rd-section-head h2{font-size:30px}
  .rd-section-head p br{display:none}
  .legend{transform:scale(.88);transform-origin:center}
  /* .rd-chart-card{min-height:clamp(500px,70vw,610px);padding:34px 20px}.donut-area{width:280px}.bubble{min-width:62px;padding:10px}.age-b1{right:-4px}.age-b2{right:18px}.age-b3{left:0}.age-b4{left:-4px}.age-b5{left:102px}.age-b6{right:72px} */
  .progress-row{grid-template-columns:1fr 100px;gap:12px}.progress-row b,.vbar-item b{font-size:11px}
  .chart-swiper-1 .swiper-slide,  .chart-swiper-2 .swiper-slide{width:calc(100% / 1.3)}
}



/* mockup */

/* 공통 */
.progress-bar {
  position: absolute;

  width: 150px;
  height: 31px;

  /* top: 50%;
  left: 52%; */

  overflow: visible;
  z-index: 998;
}
.progress-bar.left {    top: 50%;
    left: 50%;}
    .progress-bar.right {    top: 60%;
    left: 52%;}

/* 라인 */
.progress-line {
  position: absolute;
  top: 14px;
  left: 0;

  width: 100%;
  height: 2px;

  background: #eaeaec;
}

/* 점 */
.progress-dot {
  position: absolute;
  top: 0;

  width: 31px;
  height: 31px;
  border-radius: 50%;

  background: #eaeaec;

  display: flex;
  align-items: center;
  justify-content: center;

  z-index: 2;
}

.progress-dot span {
  width: 13px;
  height: 13px;
  border-radius: 50%;

  background: #3182f6;
}

/* =========================
   LEFT VERSION
========================= */

.progress-bar.left {
  transform: translate(145px, -220px);
}

.progress-bar.left .progress-dot {
  left: 0;
  transform: translateX(-50%);
}

/* =========================
   RIGHT VERSION
========================= */

.progress-bar.right {
      transform: translate(-295px, -220px);
}

.progress-bar.right .progress-dot {
  left: 100%;
  transform: translateX(-50%);
}

.s12 .progress-bar.left {
  transform: translate(145px, 55px);
}

.s12 .progress-bar.right {
      transform: translate(-320px, -220px);
}


.s12-section,
.s12-section * {
  box-sizing: border-box;
}

.s12-section {
  width: 100%;
  min-height: 100vh;
  /* padding: clamp(30px, 7vw, 110px) clamp(18px, 4vw, 80px); */
  background: #f6f8fc;
  border-radius: 0 0 40px 40px;
  overflow: hidden;
  font-family: Pretendard, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #202124;
}

@media (max-width: 768px) {
.s12-section { min-height: auto !important;  }
}
.s12-header {
  text-align: center;
}

.s12-eyebrow {
  display: block;
  color: #2f8df4;
  font-size: clamp(15px, 1vw, 18px);
  font-weight: 850;
  letter-spacing: -0.04em;
}

.s12-step {
  font-family: "KakaoBigSans-Bold", sans-serif;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  /* margin: 18px auto 24px; */
  border-radius: 16px;
  background: #2f8df4;
  color: #fff;
  font-size: 17px;
  font-weight: 850;
}
@media (min-width: 768px) {
.s12-step {
  
  width: 36px;
  height: 36px;
  /* margin: 18px auto 24px; */
  border-radius: 16px;
  
}
}


.s12-header h2 {
  margin: 0;
  font-size: clamp(32px, 3vw, 52px);
  line-height: 1.18;
  font-weight: 850;
  letter-spacing: -0.075em;
}

.s12-header p {
  margin: 22px 0 0;
  color: #8b96a2;
  font-size: clamp(14px, 0.9vw, 16px);
  letter-spacing: -0.04em;
}

.s12-stage {
  position: relative;
  /* max-width: 1740px; */
  min-height: clamp(660px, 48vw, 860px);
  margin: clamp(40px, 7vw, 60px) auto 0;
  background: #fff;
  border-radius: 32px;
  overflow: hidden;
}

.s15-stage {
  position: relative;
  /* max-width: 1740px; */
  min-height: clamp(660px, 48vw, 660px);
  margin: clamp(40px, 7vw, 60px) auto 0;
  background: #fff;
  border-radius: 32px;
  overflow: hidden;
}

.s16-stage {
    position: relative;
    /* max-width: 1740px; */
    min-height: clamp(300px, 48vw, 540px);
    margin: clamp(40px, 7vw, 60px) auto 0;
    background: var(--blue);
    border-radius: 32px;
    overflow: hidden;
}
.s16-phone {
    position: absolute;
    z-index: 6;
    left: 50%;
    bottom: 0%;
    width: clamp(292px, 26vw, 390px) !important;
    transform: translateX(-50%);
}

.s16-left-ui {
    position: absolute;
    z-index: 3;
    left: 5%;
    bottom: 20%;
    width: clamp(100px, 40vw, 200px) !important;
    height: auto !important;
}

.s16-right-ui {
    position: absolute;
    z-index: 999;
    right: 15%;
    bottom: 35%;
    width: clamp(100px, 26vw, 200px) !important;
    height: auto !important;
}













.s12-section .s16-phone img {
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important;

    max-width: none !important;
    object-fit: contain !important;
    display: block;
}

/* 텍스트 */
.s12-text {
  position: absolute;
  z-index: 999;
  max-width: 370px;
}

.s12-text-left {
top: 40%;
    right: 57%;
    transform: translate(-50%, -50%);
}

.s12-text-right {
  top: 40%;
    left: 73.5%;
    transform: translate(-50%, -50%);
}

.s12-badge-line {
  display: flex;
  align-items: center;
  gap: 94px;
  margin-bottom: 24px;
}

.s12-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 110px;
  height: 42px;
  padding: 0 20px;
  border-radius: 17px;
  background: #2f8df4;
  color: #fff;
  font-size: 15px;
  font-weight: 850;
  letter-spacing: -0.04em;
  white-space: nowrap;
}

.s12-badge-line i {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  border: 2px solid #b6d8ff;
  border-radius: 50%;
  background: #2f8df4;
  box-shadow: inset 0 0 0 5px #fff;
}

.s12-text-right .s12-badge {
  margin-bottom: 28px;
}

.s12-text h3 {
  margin: 0;
  font-size: clamp(23px, 1.55vw, 30px);
  line-height: 1.35;
  font-weight: 850;
  letter-spacing: -0.075em;
}

.s12-text p {
  font-family: 'KakaoBigSans-Regular';
  margin: 24px 0 0;
  color: #7e8995;
  font-size: clamp(13px, 0.85vw, 18px);
  line-height: 1.7;
  letter-spacing: -0.05em;
  word-break: keep-all;
}

/* 이미지 */
.s12-section img,
.s12-section picture,
.s12-section figure {
    /* width: auto !important; */
    /* height: auto !important; */
    max-width: none !important;
    object-fit: contain !important;
    display: block;
}

.s12-phone {
    position: absolute;
    z-index: 6;
    left: 50%;
    bottom: 6.6%;
    width: clamp(292px, 26vw, 390px) !important;
    transform: translateX(-50%);
}

.s12-phone img {
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
}

.s12-left-ui {
    position: absolute;
    z-index: 3;
    left: -3%;
    bottom: 15%;
    width: clamp(390px, 40vw, 750px) !important;
    height: auto !important;
}

.s12-right-icons {
    position: absolute;
    z-index: 999;
     right: 13%;
    bottom: 28%;
    /* width: clamp(310px, 26vw, 360px) !important; */
    height: auto !important;
}

.s12-line {
  position: absolute;
  z-index: 2;
  height: 1px;
  background: #acd5ff;
}

.s12-line-left {
  top: 15.5%;
  left: 22%;
  width: 230px;
}

.s12-line-right {
  top: 57.7%;
  right: 31.5%;
  width: 145px;
}

/* 선택 애니메이션: 기존 JS와 충돌 방지를 위해 CSS만 사용 */
@media (prefers-reduced-motion: no-preference) {
  .s12-stage {
    animation: s12StageIn 0.7s ease both;
    animation-timeline: view();
    animation-range: entry 0% cover 24%;
  }
}

@keyframes s12StageIn {
  from {
    opacity: 0.35;
    transform: translateY(26px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 1280px) {
  .s12-stage {
    min-height: 980px;
  }

  .s12-text-left {
    top: 7%;
    left: 8%;
  }

  .s12-text-right {
    top: 7%;
    right: 8%;
  }

  .s12-phone {
    top: 25%;
    width: min(60vw, 410px) !important;
  }

  .s12-left-ui {
    left: -9%;
    bottom: 20%;
  }

  .s12-right-icons {
    right: 4%;
    bottom: 22%;
  }

  .s12-line {
    display: none;
  }
}

@media (max-width: 768px) {
  
  .s12-text {
    position: relative;}
  .s12-stage {
    min-height: 600px;
  }
    .s12-text-left {
      width: 80%;
        top: 14%;
        left: 48%;
    }
    .s12-text-right {
        width: 40%;
        top: 6%;
        left: 53%;
        display: none;
    }
        .s12-text {
        position: absolute;
    }
    .s12-text h3 {font-size:20px;}
    .s12-text p {margin: 14px 0 0;}
    .s12-text-left {
        width: 80%;
        top: 16%;
        left: 48%;
    }
}




/* -------------------------------------------   */
.s10-phone {
    position: absolute;
    z-index: 6;
    left: 50%;
    bottom: 6.6%;
    width: clamp(292px, 26vw, 390px) !important;
    transform: translateX(-50%);
}
.s10-phone img{
    width: 100% !important;
}
.s10-left-ui {
    position: absolute;
    z-index: 3;
    left: 12%;
    bottom: 28%;
    /* width: clamp(390px, 40vw, 360px) !important; */
    height: auto !important;
    /* box-shadow: -10px 18px 30px 0 rgba(27, 32, 37, 0.10); */
}

.s10-right-ui {
    position: absolute;
    z-index: 999;

    /* width: clamp(310px, 26vw, 430px) !important; */
    height: auto !important;
    bottom: 15%;
  left: 75%;
  transform: translate(-50%, -50%);
  /* box-shadow: -10px 18px 30px 0 rgba(27, 32, 37, 0.10); */
}
.s10-text {
  position: absolute;
  z-index: 999;
  max-width: 360px;
}

.s10-text-left {
  top: 32%;
  left: 75%;
  transform: translate(-50%, -50%);
}

.s10-text-right {
  top: 32%;
  right: 53%;
  transform: translate(-50%, -50%);
}


.s10-text h3 {
  margin: 0;
  font-size: clamp(23px, 1.55vw, 30px);
  line-height: 1.35;
  font-weight: 850;
  letter-spacing: -0.075em;
}

.s10-text p {
  font-family:KakaoBigSans-Regular, sans-serif;
  margin: 24px 0 0;
  color: #7e8995;
  font-size: clamp(15px, 0.85vw, 15px);
  line-height: 1.5;
  letter-spacing: -0.05em;
  word-break: keep-all;
}
@media (max-width: 1440px) {
.s10-text-right {right: 47%;} 
.s10-left-ui {left: 2%;    bottom: 28%;}
.s12-section img,.s14-section img {width:30%;} 
.s10-phone,.s12-phone,.s14-phone { width: clamp(292px, 20vw, 390px) !important;}
.s10-text-left {left: 76%;}
.progress-bar {display:none}}
@media (max-width: 1280px) {
.s10-text-right {right: 47%;} 
.s10-left-ui {left: 2%;    bottom: 28%;}
.s12-section img,.s14-section img {width:30%;} 
.s10-phone,.s12-phone,.s14-phone { width: clamp(292px, 20vw, 390px) !important;}
.s10-text-left {left: 76%;}
.progress-bar {display:none}}

@media (max-width: 1280px) {
  /* .s10-stage {
    min-height: 980px;
  } */

  .s10-text-left {
    top: 7%;
    left: 8%;
  }

  .s10-text-right {
    top: 7%;
    right: 8%;
  }

  .s10-phone {
    top: 25%;
    width: min(60vw, 410px) !important;
  }

  .s10-left-ui {
    left: -9%;
    bottom: 20%;
  }

  .s10-right-ui {
    right: 4%;
    bottom: 22%;
  }

  .s10-line {
    display: none;
  }
}

@media (max-width: 768px) {
  
  .s10-text {
    position: relative;}
  .s10-stage {
    min-height: 800px;
  }
    .s10-text-left {
      width: 80%;
        top: 16%;
        left: 48%;
    }
    .s10-text p {margin: 14px 0 0;}
    .s10-text-right {
              display: none;
        width: 40%;
        top: 6%;
        left: 53%;
    }
        .s10-text {
        position: absolute;
    }
    .s10-text h3 {font-size:20px;}
    .progress-bar,img.s10-left-ui,img.s10-right-ui,img.s12-left-ui,img.s12-right-icons,img.s14-left-ui,img.s14-right-ui  
    {display: none;}
}
/* -------------------------------------------   */

/* -------------------------------------------   */

.s14-phone {
    position: absolute;
    z-index: 6;
    left: 50%;
    top: 6.6%;
    width: clamp(292px, 26vw, 390px) !important;
    transform: translateX(-50%);
}
.s14-phone img{
    width: 100% !important;
}

.s14-left-ui {
    position: absolute;
    z-index: 3;
    left: 0;
    bottom: 10%;
    width: clamp(390px, 40vw, 690px) !important;
    height: auto !important;
}

.s14-right-ui {
    position: absolute;
    z-index: 3;
    right: 0;
    bottom: 10%;
    width: clamp(390px, 40vw, 690px) !important;
    height: auto !important;
}

.s14-text {
  position: absolute;
  z-index: 5;
  max-width: 360px;
}

.s14-text-left {
  top: 32%;
    right: 53%;
    transform: translate(-50%, -50%);
}

.s14-text-right {
  top: 32%;
    right: 20%;
    transform: translate(-50%, -50%);
}


.s14-text h3 {
  margin: 0;
  font-size: clamp(23px, 1.55vw, 30px);
  line-height: 1.35;
  font-weight: 850;
  letter-spacing: -0.075em;
}

.s14-text p {
  margin: 24px 0 0;
  color: #7e8995;
  font-size: clamp(13px, 0.85vw, 15px);
  line-height: 1.7;
  letter-spacing: -0.05em;
  word-break: keep-all;
}


@media (max-width: 1280px) {
  .s14-stage {
    min-height: 980px;
  }

  .s14-text-left {
    top: 7%;
    left: 8%;
  }

  .s14-text-right {
    top: 7%;
    right: 8%;
  }

  .s14-phone {
    top: 35%;
    width: min(60vw, 410px) !important;
  }

  .s14-left-ui {
    left: -9%;
    bottom: 20%;
  }

  .s14-right-icons {
    right: 4%;
    bottom: 22%;
  }

  .s14-line {
    display: none;
  }
}

@media (max-width: 768px) {
  
  .s14-text {
    position: relative;}
  .s14-stage {
    min-height: 800px;
  }
    .s14-text-left {
      width:40%;
        top: 6%;
        left: 8%;
    }
    .s14-text-right {
        width: 40%;
        top: 6%;
        left: 53%;
    }
        .s14-text {
        position: absolute;
    }
    .s14-text h3 {font-size:16px;}
}

@media (max-width: 768px) {
  .s15-stage {    min-height: clamp(490px, 48vw, 660px);}
.s16-phone {top: 5%;}
    .s14-phone {top: 5%;}

}
/* -------------------------------------------   */

/* mockup 2  */
/* .s10-section,
.s10-section * {
  box-sizing: border-box;
}

.s10-section {
  width: 100%;
  min-height: 100vh;
  padding: clamp(72px, 7vw, 118px) clamp(18px, 4vw, 80px);
  background: #f6f8fc;
  border-radius: 0 0 40px 40px;
  overflow: hidden;
  font-family: Pretendard, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #202124;
}

.s10-header {
  text-align: center;
  position: relative;
  z-index: 3;
}

.s10-eyebrow {
  display: block;
  color: #2f8df4;
  font-size: clamp(15px, 1vw, 18px);
  font-weight: 850;
  letter-spacing: -0.04em;
  margin-bottom: 20px;
}

.s10-header h2 {
  margin: 0;
  font-size: clamp(34px, 3vw, 54px);
  line-height: 1.18;
  font-weight: 850;
  letter-spacing: -0.075em;
}

.s10-header p {
  margin: 24px 0 0;
  color: #8b96a2;
  font-size: clamp(13px, 0.9vw, 16px);
  line-height: 1.65;
  letter-spacing: -0.04em;
}

.s10-stage {
  position: relative;
  max-width: 1740px;
  min-height: clamp(610px, 42vw, 760px);
  margin: clamp(72px, 7vw, 112px) auto 0;
  background: #fff;
  border-radius: 32px;
  overflow: hidden;
}

.s10-section img {
  width: auto !important;
  height: auto !important;
  max-width: none !important;
  object-fit: contain !important;
  display: block !important;
}

.s10-img,
.s10-phone {
  position: absolute;
}

.s10-text {
  position: absolute;
  z-index: 5;
  left: 7.8%;
  bottom: 10.5%;
  max-width: 355px;
}

.s10-text h3 {
  margin: 0;
  color: #202124;
  font-size: clamp(24px, 1.55vw, 31px);
  line-height: 1.32;
  font-weight: 850;
  letter-spacing: -0.075em;
}

.s10-text p {
  margin: 22px 0 0;
  color: #7e8995;
  font-size: clamp(13px, 0.85vw, 15px);
  line-height: 1.7;
  letter-spacing: -0.05em;
  word-break: keep-all;
}

.s10-phone {
  z-index: 4;
  left: 50%;
  bottom: 0;
  width: clamp(300px, 28vw, 470px) !important;
  transform: translateX(-50%);
  filter: drop-shadow(0 24px 36px rgba(20, 40, 70, 0.16));
}

.s10-phone img {
  width: 100% !important;
  height: auto !important;
  object-fit: contain !important;
}

.s10-left-emoji {
  z-index: 3;
  left: 20.5%;
  top: 22%;
  width: clamp(220px, 22vw, 380px) !important;
}

.s10-notice {
  z-index: 6;
  left: 48.5%;
  top: 29.5%;
  width: clamp(350px, 36vw, 630px) !important;
  transform: translateX(-50%);
  filter: drop-shadow(0 18px 30px rgba(20, 40, 70, 0.08));
}

.s10-right-emoji {
  z-index: 3;
  right: 17.8%;
  top: 34.5%;
  width: clamp(200px, 19vw, 340px) !important;
}

.s10-line {
  position: absolute;
  z-index: 2;
  height: 1px;
  background: #acd5ff;
}

.s10-line-left {
  left: 29.5%;
  top: 31.6%;
  width: 150px;
}

.s10-line-right {
  right: 23.2%;
  top: 48.2%;
  width: 180px;
} */

/* CSS only entrance */
/* @media (prefers-reduced-motion: no-preference) {
  .s10-stage {
    animation: s10StageIn 0.75s ease both;
    animation-timeline: view();
    animation-range: entry 0% cover 24%;
  }

  .s10-phone {
    animation: s10PhoneIn 0.85s ease both;
    animation-timeline: view();
    animation-range: entry 4% cover 30%;
  }

  .s10-left-emoji,
  .s10-right-emoji,
  .s10-notice,
  .s10-text {
    animation: s10FadeUp 0.75s ease both;
    animation-timeline: view();
    animation-range: entry 8% cover 32%;
  }
}

@keyframes s10StageIn {
  from {
    opacity: 0.35;
    transform: translateY(28px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes s10FadeUp {
  from {
    opacity: 0.15;
    transform: translateY(26px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes s10PhoneIn {
  from {
    opacity: 0.1;
    transform: translateX(-50%) translateY(42px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0) scale(1);
  }
}

@media (max-width: 1280px) {
  .s10-stage {
    min-height: 880px;
  }

  .s10-text {
    left: 8%;
    bottom: 9%;
  }

  .s10-phone {
    width: min(42vw, 430px) !important;
  }

  .s10-left-emoji {
    left: 8%;
    top: 18%;
  }

  .s10-notice {
    top: 26%;
    width: min(52vw, 600px) !important;
  }

  .s10-right-emoji {
    right: 8%;
    top: 41%;
  }
}

@media (max-width: 900px) {
  .s10-stage {
    min-height: auto;
    padding: 44px 22px 56px;
    display: grid;
    gap: 34px;
    justify-items: center;
  }

  .s10-text,
  .s10-phone,
  .s10-img {
    position: relative;
    inset: auto;
    left: auto;
    right: auto;
    top: auto;
    bottom: auto;
    transform: none !important;
  }

  .s10-text {
    order: 1;
    max-width: 560px;
    text-align: center;
  }

  .s10-left-emoji {
    order: 2;
    width: min(100%, 380px) !important;
  }

  .s10-phone {
    order: 3;
    width: min(78vw, 410px) !important;
  }

  .s10-notice {
    order: 4;
    width: min(100%, 620px) !important;
  }

  .s10-right-emoji {
    order: 5;
    width: min(100%, 330px) !important;
  }

  .s10-line {
    display: none;
  }

  @keyframes s10PhoneIn {
    from {
      opacity: 0.1;
      transform: translateY(42px) scale(0.96);
    }
    to {
      opacity: 1;
      transform: translateY(0) scale(1);
    }
  }
}

@media (max-width: 480px) {
  .s10-section {
    padding: 58px 18px;
    border-radius: 0 0 28px 28px;
  }

  .s10-stage {
    border-radius: 28px;
    padding: 34px 16px 46px;
  }

  .s10-header h2 {
    font-size: 30px;
  }

  .s10-header p br {
    display: none;
  }

  .s10-text h3 {
    font-size: 24px;
  }
} */



/* mockup 10  */

.s10v2-section,
.s10v2-section *{
  box-sizing:border-box;
}

.s10v2-section{
  width:100%;
  padding:clamp(72px,7vw,120px) clamp(18px,4vw,80px);
  background:#f5f7fb;
  border-radius:40px;
  overflow:hidden;
  font-family:Pretendard,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}

.s10v2-section img{
  width:auto !important;
  height:auto !important;
  max-width:none !important;
  object-fit:contain !important;
  display:block !important;
}

.s10v2-head{
  text-align:center;
}

.s10v2-step{
  width:48px;
  height:48px;
  border-radius:999px;
  background:#2f8df4;
  color:#fff;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:18px;
  font-weight:700;
  margin-bottom:18px;
}

.s10v2-eyebrow{
  display:block;
  color:#2f8df4;
  font-size:18px;
  font-weight:800;
  letter-spacing:-0.05em;
}

.s10v2-title{
  margin:26px 0 18px;
  font-size:clamp(36px,3.2vw,68px);
  line-height:1.14;
  font-weight:850;
  letter-spacing:-0.08em;
  color:#202124;
}

.s10v2-desc{
  margin:0;
  color:#8a95a3;
  font-size:clamp(14px,1vw,18px);
  line-height:1.7;
  letter-spacing:-0.05em;
}

.s10v2-stage{
  position:relative;
  margin:80px auto 0;
  max-width:1680px;
  min-height:820px;
  background:#fff;
  border-radius:36px;
  overflow:hidden;
}

.s10v2-copy{
  position:absolute;
  z-index:5;
  width:310px;
}

.s10v2-copy-left{
  left:14%;
  top:26%;
}

.s10v2-copy-right{
  right:12%;
  top:28%;
}

.s10v2-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:50px;
  padding:0 22px;
  border-radius:999px;
  background:#2f8df4;
  color:#fff;
  font-size:18px;
  font-weight:700;
  letter-spacing:-0.04em;
  margin-bottom:28px;
}

.s10v2-copy h3{
  margin:0;
  color:#202124;
  font-size:clamp(30px,1.8vw,42px);
  line-height:1.28;
  font-weight:850;
  letter-spacing:-0.08em;
}

.s10v2-copy p{
  margin:24px 0 0;
  color:#7d8896;
  font-size:16px;
  line-height:1.75;
  letter-spacing:-0.05em;
  word-break:keep-all;
}

.s10v2-phone{
  position:absolute;
  z-index:4;
  left:50%;
  bottom:0;
  width:420px !important;
  transform:translateX(-50%);
  filter:drop-shadow(0 26px 38px rgba(20,40,70,.16));
}

.s10v2-phone img{
  width:100% !important;
  height:auto !important;
}

.s10v2-left-ui{
  position:absolute;
  z-index:3;
  left:17%;
  bottom:13%;
  width:360px !important;
}

.s10v2-right-ui{
  position:absolute;
  z-index:3;
  right:14%;
  bottom:18%;
  width:280px !important;
}

.s10v2-notice{
  position:absolute;
  z-index:6;
  left:50%;
  top:18%;
  width:560px !important;
  transform:translateX(-50%);
}

.s10v2-left-ui img,
.s10v2-right-ui img,
.s10v2-notice img{
  width:100% !important;
  height:auto !important;
}

.s10v2-line{
  position:absolute;
  z-index:2;
  height:1px;
  background:#a8d1ff;
}

.s10v2-line-left{
  left:28%;
  top:34%;
  width:180px;
}

.s10v2-line-right{
  right:20%;
  top:64%;
  width:160px;
}

.s10v2-dot{
  position:absolute;
  width:30px;
  height:30px;
  border-radius:999px;
  border:2px solid #9fc9ff;
  background:#fff;
  z-index:3;
}

.s10v2-dot::after{
  content:"";
  position:absolute;
  inset:7px;
  border-radius:999px;
  background:#2f8df4;
}

.s10v2-dot-left{
  left:39%;
  top:32.4%;
}

.s10v2-dot-right{
  right:28.6%;
  top:62.2%;
}

@media (prefers-reduced-motion:no-preference){

  .s10v2-phone{
    animation:s10v2Phone .8s ease both;
    animation-timeline:view();
    animation-range:entry 0% cover 35%;
  }

  .s10v2-copy,
  .s10v2-left-ui,
  .s10v2-right-ui,
  .s10v2-notice{
    animation:s10v2Fade .8s ease both;
    animation-timeline:view();
    animation-range:entry 5% cover 32%;
  }
}

@keyframes s10v2Fade{
  from{
    opacity:0;
    transform:translateY(32px);
  }
  to{
    opacity:1;
    transform:translateY(0);
  }
}

@keyframes s10v2Phone{
  from{
    opacity:0;
    transform:translateX(-50%) translateY(40px) scale(.96);
  }
  to{
    opacity:1;
    transform:translateX(-50%) translateY(0) scale(1);
  }
}

@media (max-width:1280px){

  .s10v2-stage{
    min-height:1200px;
  }

  .s10v2-copy-left,
  .s10v2-copy-right{
    position:relative;
    inset:auto;
    width:100%;
    max-width:540px;
    margin:0 auto;
    text-align:center;
  }

  .s10v2-copy-left{
    padding-top:70px;
  }

  .s10v2-copy-right{
    margin-top:60px;
  }

  .s10v2-phone{
    position:relative;
    left:auto;
    bottom:auto;
    transform:none;
    margin:50px auto 0;
  }

  .s10v2-left-ui,
  .s10v2-right-ui,
  .s10v2-notice{
    position:relative;
    left:auto;
    right:auto;
    top:auto;
    bottom:auto;
    transform:none;
    margin:30px auto 0;
  }

  .s10v2-line,
  .s10v2-dot{
    display:none;
  }
}

@media (max-width:768px){

  .s10v2-section{
    padding:60px 16px;
  }

  .s10v2-stage{
    border-radius:28px;
  }

  .s10v2-title{
    font-size:34px;
  }

  .s10v2-copy h3{
    font-size:28px;
  }

  .s10v2-phone{
    width:min(82vw,420px) !important;
  }

  .s10v2-left-ui,
  .s10v2-right-ui,
  .s10v2-notice{
    width:min(92vw,560px) !important;
  }
}


/* 개선 첫번째   */

.rd13-section,
.rd13-section * {
  box-sizing: border-box;
}

.rd13-section {
  width: 100%;
  min-height: 100vh;
  padding: clamp(72px, 7vw, 116px) clamp(18px, 4vw, 80px);
  background: #f6f8fc;
  border-radius: 0 0 40px 40px;
  overflow: hidden;
  font-family: Pretendard, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #202124;
}

.rd13-section img {
  width: auto !important;
  height: auto !important;
  max-width: none !important;
  object-fit: contain !important;
  display: block !important;
}
/* 
.rd13-section .section-head {
  position: relative;
  z-index: 5;
  max-width: 900px;
  margin: 0 auto;
  padding: 0 18px;
  text-align: center;
}

.rd13-section .section-head > span:not(.rd13-step) {
  display: block;
  margin-bottom: 20px;
  color: #2f8df4;
  font-size: clamp(15px, 1vw, 18px);
  font-weight: 850;
  letter-spacing: -0.04em;
}

.rd13-step {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin: 0 auto 22px;
  border-radius: 50%;
  background: #2f8df4;
  color: #fff !important;
  font-size: 17px !important;
  font-weight: 850;
}

.rd13-section .section-head h2 {
  margin: 0;
  color: #202124;
  font-size: clamp(34px, 3vw, 54px);
  line-height: 1.18;
  font-weight: 850;
  letter-spacing: -0.075em;
}

.rd13-section .section-head p {
  margin: 24px 0 0;
  color: #8b96a2;
  font-size: clamp(13px, 0.9vw, 16px);
  line-height: 1.65;
  letter-spacing: -0.04em;
} */

.rd13-stage {
  position: relative;
  /* max-width: 1740px; */
  min-height: clamp(660px, 47vw, 850px);
  margin: clamp(70px, 7vw, 116px) auto 0;
  background: #fff;
  border-radius: 32px;
  overflow: hidden;
}

.rd13-copy {
  position: absolute;
  z-index: 7;
  max-width: 360px;
}

.rd13-copy-left {
  left: 11%;
  top: 22%;
}

.rd13-copy-right {
  right: 11.5%;
  top: 24%;
}

.rd13-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 46px;
  min-width: 132px;
  padding: 0 22px;
  margin-bottom: 26px;
  border-radius: 18px;
  background: #2f8df4;
  color: #fff;
  font-size: 15px;
  font-weight: 850;
  letter-spacing: -0.04em;
  white-space: nowrap;
}

.rd13-copy strong {
  display: block;
  margin-bottom: 18px;
  color: #2f8df4;
  font-size: clamp(17px, 1.08vw, 22px);
  line-height: 1.2;
  font-weight: 850;
  letter-spacing: -0.06em;
}

.rd13-copy h3 {
  margin: 0;
  color: #202124;
  font-size: clamp(24px, 1.55vw, 31px);
  line-height: 1.32;
  font-weight: 850;
  letter-spacing: -0.075em;
}

.rd13-copy p {
  margin: 22px 0 0;
  color: #7e8995;
  font-size: clamp(13px, 0.85vw, 15px);
  line-height: 1.72;
  letter-spacing: -0.05em;
  word-break: keep-all;
}

.rd13-phone {
  position: absolute;
  z-index: 5;
  left: 50%;
  bottom: 0;
  width: clamp(310px, 28vw, 390px) !important;
  transform: translateX(-50%);
  filter: drop-shadow(0 24px 36px rgba(20, 40, 70, 0.16));
}

.rd13-phone img {
  width: 100% !important;
  height: auto !important;
  object-fit: contain !important;
}

.rd13-img {
  position: absolute;
  z-index: 4;
}

.rd13-left-cards {
  left: 10.4%;
  bottom: 17.4%;
  width: clamp(320px, 29vw, 500px) !important;
}

.rd13-right-list {
  right: 10.7%;
  bottom: 18.8%;
  width: clamp(320px, 30vw, 510px) !important;
}

.rd13-line {
  position: absolute;
  z-index: 2;
  height: 1px;
  background: #acd5ff;
}

.rd13-line-left-top {
  left: 29.4%;
  top: 25.8%;
  width: 160px;
}

.rd13-line-left-mid {
  left: 26.7%;
  top: 35.5%;
  width: 200px;
}

.rd13-line-right {
  right: 28.6%;
  top: 62.5%;
  width: 210px;
}

.rd13-dot {
  position: absolute;
  z-index: 3;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  border: 2px solid #9fc9ff;
  background: #fff;
}

.rd13-dot::after {
  content: "";
  position: absolute;
  inset: 7px;
  border-radius: 999px;
  background: #2f8df4;
}

.rd13-dot-left-top {
  left: 36.8%;
  top: 24%;
}

.rd13-dot-left-mid {
  left: 34.8%;
  top: 33.7%;
}

.rd13-dot-right {
  right: 37.4%;
  top: 60.7%;
}

@media (prefers-reduced-motion: no-preference) {
  .rd13-stage {
    animation: rd13StageIn 0.75s ease both;
    animation-timeline: view();
    animation-range: entry 0% cover 24%;
  }

  .rd13-phone {
    animation: rd13PhoneIn 0.85s ease both;
    animation-timeline: view();
    animation-range: entry 4% cover 30%;
  }

  .rd13-copy,
  .rd13-left-cards,
  .rd13-right-list {
    animation: rd13FadeUp 0.75s ease both;
    animation-timeline: view();
    animation-range: entry 8% cover 32%;
  }
}

@keyframes rd13StageIn {
  from { opacity: 0.35; transform: translateY(28px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes rd13FadeUp {
  from { opacity: 0.15; transform: translateY(26px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes rd13PhoneIn {
  from { opacity: 0.1; transform: translateX(-50%) translateY(42px) scale(0.96); }
  to { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
}

@media (max-width: 1280px) {
  .rd13-stage { min-height: 980px; }
  .rd13-copy-left { left: 7%; top: 8%; }
  .rd13-copy-right { right: 7%; top: 8%; }
  .rd13-phone { width: min(42vw, 430px) !important; }
  .rd13-left-cards { left: 5%; bottom: 16%; }
  .rd13-right-list { right: 5%; bottom: 18%; }
  .rd13-line, .rd13-dot { display: none; }
}

@media (max-width: 900px) {
  .rd13-stage {
    min-height: auto;
    padding: 44px 22px 56px;
    display: grid;
    gap: 36px;
    justify-items: center;
  }

  .rd13-copy,
  .rd13-phone,
  .rd13-img {
    position: relative;
    inset: auto;
    left: auto;
    right: auto;
    top: auto;
    bottom: auto;
    transform: none !important;
  }

  .rd13-copy {
    width: 100%;
    max-width: 560px;
    text-align: center;
  }

  .rd13-copy-left { order: 1; }
  .rd13-left-cards { order: 2; width: min(100%, 500px) !important; }
  .rd13-phone { order: 3; width: min(78vw, 410px) !important; }
  .rd13-copy-right { order: 4; }
  .rd13-right-list { order: 5; width: min(100%, 510px) !important; }
  .rd13-line, .rd13-dot { display: none; }

  @keyframes rd13PhoneIn {
    from { opacity: 0.1; transform: translateY(42px) scale(0.96); }
    to { opacity: 1; transform: translateY(0) scale(1); }
  }
}

@media (max-width: 480px) {
  .rd13-section {
    padding: 58px 18px;
    border-radius: 0 0 28px 28px;
  }

  .rd13-stage {
    border-radius: 28px;
    padding: 34px 16px 46px;
  }

  .rd13-section .section-head h2 { font-size: 30px; }
  .rd13-section .section-head p br { display: none; }
  .rd13-copy h3 { font-size: 24px; }
  .rd13-badge { height: 40px; font-size: 13px; }
}



/* 개선 가이드   */

.rd14-section,
.rd14-section * {
  box-sizing: border-box;
}

.rd14-section {
  width: 100%;
  min-height: 100vh;
  padding: clamp(72px, 7vw, 116px) clamp(18px, 4vw, 80px);
  background: #f6f8fc;
  border-radius: 0 0 40px 40px;
  overflow: hidden;
  font-family: Pretendard, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #202124;
}

/* 기존 .item img { width:100%; height:100%; object-fit:cover; } 충돌 차단 */
.rd14-section img {
  /* width: auto !important; */
  height: auto !important;
  max-width: none !important;
  object-fit: contain !important;
  display: block !important;
}
/* 
.rd14-section .section-head {
  position: relative;
  z-index: 5;
  max-width: 900px;
  margin: 0 auto;
  padding: 0 18px;
  text-align: center;
}

.rd14-section .section-head > span:not(.rd14-step) {
  display: block;
  margin-bottom: 18px;
  color: #2f8df4;
  font-size: clamp(15px, 1vw, 18px);
  font-weight: 850;
  letter-spacing: -0.04em;
}



.rd14-section .section-head h2 {
  margin: 0;
  color: #202124;
  font-size: clamp(34px, 3vw, 54px);
  line-height: 1.18;
  font-weight: 850;
  letter-spacing: -0.075em;
}

.rd14-section .section-head p {
  margin: 24px 0 0;
  color: #8b96a2;
  font-size: clamp(13px, 0.9vw, 16px);
  line-height: 1.65;
  letter-spacing: -0.04em;
} */

/* Stage */


.rd14-stage {
  position: relative;
  /* max-width: 1740px; */
  min-height: clamp(660px, 48vw, 850px);
  margin: clamp(78px, 7.5vw, 126px) auto 0;
    background: #fff;
  border-radius: 32px;
  overflow: hidden;
}

/* phones */
.rd14-phone {
  position: absolute;
  filter: drop-shadow(0 20px 30px rgba(20, 40, 70, 0.10));
}

.rd14-phone-side {
  width: clamp(190px, 15vw, 260px) !important;
  bottom: 6%;
  z-index: 3;
}

.rd14-phone-01 {
  left: 0;
}

.rd14-phone-02 {
  left: 20%;
}

.rd14-phone-04 {
  right: 20%;
}

.rd14-phone-05 {
  right: 0;
}

.rd14-main-wrap {
  position: absolute;
  z-index: 5;
  left: 50%;
  bottom: 0;
  width: clamp(310px, 27vw, 390px) !important;
  transform: translateX(-50%);
  filter: drop-shadow(0 28px 40px rgba(20, 40, 70, 0.16));
}

.rd14-phone-main {
  position: relative;
  width: 100% !important;
  height: auto !important;
  object-fit: contain !important;
}

/* connection lines */
.rd14-line {
  position: absolute;
  z-index: 2;
  height: 1px;
  background: #acd5ff;
}

.rd14-line-top {
  left: 51.5%;
  top: 15.8%;
  width: 200px;
}

.rd14-line-mid {
  left: 58%;
  top: 47.6%;
  width: 185px;
}

.rd14-dot {
  position: absolute;
  z-index: 6;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  border: 2px solid #9fc9ff;
  background: #fff;
}

.rd14-dot::after {
  content: "";
  position: absolute;
  inset: 7px;
  border-radius: 999px;
  background: #2f8df4;
}

.rd14-dot-top {
  left: 61.8%;
  top: 14%;
}

.rd14-dot-mid {
  left: 59.6%;
  top: 45.8%;
}

/* CSS only animation */
@media (prefers-reduced-motion: no-preference) {
  .rd14-stage {
    animation: rd14StageIn 0.75s ease both;
    animation-timeline: view();
    animation-range: entry 0% cover 24%;
  }

  .rd14-main-wrap {
    animation: rd14MainIn 0.85s ease both;
    animation-timeline: view();
    animation-range: entry 4% cover 32%;
  }

  .rd14-phone-side {
    animation: rd14FadeUp 0.75s ease both;
    animation-timeline: view();
    animation-range: entry 8% cover 34%;
  }
}

@keyframes rd14StageIn {
  from {
    opacity: 0.35;
    transform: translateY(28px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes rd14FadeUp {
  from {
    opacity: 0.2;
    transform: translateY(28px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes rd14MainIn {
  from {
    opacity: 0.1;
    transform: translateX(-50%) translateY(42px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0) scale(1);
  }
}

/* Responsive */
@media (max-width: 1280px) {
  .rd14-stage {
    min-height: 1080px;
    display: grid;
    grid-template-columns: repeat(5, minmax(160px, 1fr));
    align-items: end;
    gap: 20px;
    overflow-x: auto;
    padding: 20px 0 40px;
  }

  .rd14-phone,
  .rd14-main-wrap {
    position: relative;
    inset: auto;
    left: auto;
    right: auto;
    bottom: auto;
    top: auto;
    transform: none !important;
  }

  .rd14-main-wrap {
    order: 3;
    width: 390px !important;
    margin: 0 auto;
  }

  .rd14-phone-side {
    width: 260px !important;
  }

  .rd14-phone-01 { order: 1; }
  .rd14-phone-02 { order: 2; }
  .rd14-phone-04 { order: 4; }
  .rd14-phone-05 { order: 5; }

  .rd14-line,
  .rd14-dot {
    display: none;
  }
}

@media (max-width: 900px) {
  .rd14-stage {
    min-height: auto;
    display: grid;
    grid-template-columns: 1fr;
    gap: 34px;
    justify-items: center;
    overflow-x: visible;
    padding: 0;
  }

  .rd14-main-wrap {
    width: min(78vw, 410px) !important;
    order: 1;
  }

  .rd14-phone-side {
    width: min(76vw, 300px) !important;
  }

  .rd14-phone-01 { order: 2; }
  .rd14-phone-02 { order: 3; }
  .rd14-phone-04 { order: 4; }
  .rd14-phone-05 { order: 5; }

  @keyframes rd14MainIn {
    from {
      opacity: 0.1;
      transform: translateY(42px) scale(0.96);
    }
    to {
      opacity: 1;
      transform: translateY(0) scale(1);
    }
  }
}

@media (max-width: 480px) {
  .rd14-section {
    padding: 58px 18px;
    border-radius: 0 0 28px 28px;
  }

  .rd14-section .section-head h2 {
    font-size: 30px;
  }

  .rd14-section .section-head p br {
    display: none;
  }

  .rd14-step {
    width: 40px;
    height: 40px;
  }
}

/* 개선 푸시 */

.rd15-section,
.rd15-section * {
  box-sizing: border-box;
}

.rd15-section {
  width: 100%;
  min-height: 100vh;
  padding: clamp(72px, 7vw, 116px) clamp(18px, 4vw, 80px);
  background: #f6f8fc;
  border-radius: 0 0 40px 40px;
  overflow: hidden;
  font-family: Pretendard, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #202124;
}

/* 기존 .item img { width:100%; height:100%; object-fit:cover; } 충돌 차단 */
.rd15-section img {
  width: auto !important;
  height: auto !important;
  max-width: none !important;
  object-fit: contain !important;
  display: block !important;
}

/* .rd15-section .section-head {
  position: relative;
  z-index: 5;
  max-width: 900px;
  margin: 0 auto;
  padding: 0 18px;
  text-align: center;
}

.rd15-section .section-head > span {
  display: block;
  margin-bottom: 20px;
  color: #2f8df4;
  font-size: clamp(15px, 1vw, 18px);
  font-weight: 850;
  letter-spacing: -0.04em;
}

.rd15-section .section-head h2 {
  margin: 0;
  color: #202124;
  font-size: clamp(34px, 3vw, 54px);
  line-height: 1.18;
  font-weight: 850;
  letter-spacing: -0.075em;
}

.rd15-section .section-head p {
  margin: 24px 0 0;
  color: #8b96a2;
  font-size: clamp(13px, 0.9vw, 16px);
  line-height: 1.65;
  letter-spacing: -0.04em;
} */

.rd15-stage {
  position: relative;
  /* max-width: 1740px; */
  min-height: clamp(620px, 42vw, 760px);
  margin: clamp(72px, 7vw, 112px) auto 0;
  background: #fff;
  border-radius: 32px;
  overflow: hidden;
}

/* 좌측 설명 텍스트 */
.rd15-copy {
  position: absolute;
  z-index: 7;
  left: 3.7%;
  bottom: 10.2%;
  width: 350px;
}

.rd15-copy h3 {
  margin: 0;
  color: #202124;
  font-size: clamp(24px, 1.55vw, 31px);
  line-height: 1.32;
  font-weight: 850;
  letter-spacing: -0.075em;
}

.rd15-copy p {
  margin: 22px 0 0;
  color: #7e8995;
  font-size: clamp(13px, 0.85vw, 15px);
  line-height: 1.72;
  letter-spacing: -0.05em;
  word-break: keep-all;
}

/* 이미지 비주얼 */
.rd15-img,
.rd15-phone {
  position: absolute;
}

.rd15-phone {
  z-index: 4;
  left: 50%;
  bottom: 0;
  width: clamp(292px, 26vw, 390px) !important;
  transform: translateX(-50%);
  filter: drop-shadow(0 24px 36px rgba(20, 40, 70, 0.16));
}

/* .rd15-phone img {
  width: 100% !important;
  height: auto !important;
  object-fit: contain !important;
} */

.rd15-left-visual {
  z-index: 3;
  left: 17%;
  top: 20%;
  width: clamp(220px, 22vw, 390px) !important;
}

.rd15-right-visual {
  z-index: 3;
  right: 17.5%;
  top: 34.5%;
  width: clamp(205px, 19vw, 345px) !important;
}

/* 알림 카드: 이미지가 아닌 HTML 텍스트 */
.rd15-notification {
  position: absolute;
  z-index: 8;
  width: clamp(360px, 32vw, 560px);
  min-height: 82px;
  padding: 17px 22px;
  display: grid;
  grid-template-columns: 46px 1fr auto;
  align-items: center;
  gap: 14px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(16px);
  box-shadow: 0 22px 42px rgba(30, 42, 64, 0.08);
}

.rd15-noti-front {
  left: 50%;
  top: 26%;
  transform: translateX(-50%);
}

.rd15-noti-back {
  left: 47.5%;
  top: 33%;
  transform: translateX(-50%);
  opacity: 0.78;
  z-index: 6;
}

.rd15-avatar {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 70% 72%, #3ed36a 0 13%, transparent 14%),
    linear-gradient(135deg, #123a78, #ff5b3f);
}

.rd15-noti-content strong {
  display: block;
  color: #202124;
  font-size: 16px;
  font-weight: 850;
  letter-spacing: -0.05em;
}

.rd15-noti-content p {
  margin: 3px 0 0;
  color: #4e5968;
  font-size: 15px;
  line-height: 1.3;
  letter-spacing: -0.045em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rd15-notification > span {
  align-self: start;
  color: #9aa3ad;
  font-size: 16px;
}

/* 연결 라인 */
.rd15-line {
  position: absolute;
  z-index: 2;
  height: 1px;
  background: #acd5ff;
}

.rd15-line-left {
  left: 27.2%;
  top: 31.7%;
  width: 155px;
}

.rd15-line-right {
  right: 22.8%;
  top: 48.4%;
  width: 175px;
}

.rd15-dot {
  position: absolute;
  z-index: 4;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  border: 2px solid #9fc9ff;
  background: #fff;
}

.rd15-dot::after {
  content: "";
  position: absolute;
  inset: 7px;
  border-radius: 999px;
  background: #2f8df4;
}

.rd15-dot-left {
  left: 31.8%;
  top: 29.9%;
}

.rd15-dot-right {
  right: 27.8%;
  top: 46.7%;
}

/* CSS only animation */
@media (prefers-reduced-motion: no-preference) {
  .rd15-stage {
    animation: rd15StageIn 0.75s ease both;
    animation-timeline: view();
    animation-range: entry 0% cover 24%;
  }

  .rd15-phone {
    animation: rd15PhoneIn 0.85s ease both;
    animation-timeline: view();
    animation-range: entry 4% cover 30%;
  }

  .rd15-left-visual,
  .rd15-right-visual,
  .rd15-notification,
  .rd15-copy {
    animation: rd15FadeUp 0.75s ease both;
    animation-timeline: view();
    animation-range: entry 8% cover 32%;
  }
}

@keyframes rd15StageIn {
  from {
    opacity: 0.35;
    transform: translateY(28px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes rd15FadeUp {
  from {
    opacity: 0.15;
    transform: translateY(26px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes rd15PhoneIn {
  from {
    opacity: 0.1;
    transform: translateX(-50%) translateY(42px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0) scale(1);
  }
}

/* Responsive */
@media (max-width: 1280px) {
  .rd15-stage {
    min-height: 940px;
  }

  .rd15-copy {
    left: 7%;
    bottom: 8%;
  }

  .rd15-phone {
    width: min(42vw, 430px) !important;
  }

  .rd15-left-visual {
    left: 8%;
    top: 18%;
  }

  .rd15-noti-front {
    top: 24%;
  }

  .rd15-noti-back {
    top: 31%;
  }

  .rd15-right-visual {
    right: 8%;
    top: 41%;
  }
}

@media (max-width: 900px) {
  .rd15-stage {
    min-height: auto;
    padding: 44px 22px 56px;
    display: grid;
    gap: 34px;
    justify-items: center;
  }

  .rd15-copy,
  .rd15-phone,
  .rd15-img,
  .rd15-notification {
    position: relative;
    inset: auto;
    left: auto;
    right: auto;
    top: auto;
    bottom: auto;
    transform: none !important;
  }

  .rd15-copy {
    order: 1;
    width: 100%;
    max-width: 560px;
    text-align: center;
  }

  .rd15-left-visual {
    order: 2;
    width: min(100%, 390px) !important;
  }

  .rd15-phone {
    order: 3;
    width: min(78vw, 410px) !important;
  }

  .rd15-noti-front {
    order: 4;
  }

  .rd15-noti-back {
    order: 5;
  }

  .rd15-right-visual {
    order: 6;
    width: min(100%, 345px) !important;
  }

  .rd15-notification {
    width: min(100%, 560px);
  }

  .rd15-line,
  .rd15-dot {
    display: none;
  }

  @keyframes rd15PhoneIn {
    from {
      opacity: 0.1;
      transform: translateY(42px) scale(0.96);
    }
    to {
      opacity: 1;
      transform: translateY(0) scale(1);
    }
  }
}

@media (max-width: 480px) {
  .rd15-section {
    padding: 58px 18px;
    border-radius: 0 0 28px 28px;
  }

  .rd15-stage {
    border-radius: 28px;
    padding: 34px 16px 46px;
  }

  .rd15-section .section-head h2 {
    font-size: 30px;
  }

  .rd15-section .section-head p br {
    display: none;
  }

  .rd15-copy h3 {
    font-size: 24px;
  }

  .rd15-notification {
    grid-template-columns: 38px 1fr;
    padding: 14px 16px;
  }

  .rd15-avatar {
    width: 38px;
    height: 38px;
  }

  .rd15-notification > span {
    display: none;
  }

  .rd15-noti-content p {
    white-space: normal;
  }
}


/* 개선 시작 */


.rd08-section,
.rd08-section * {
  box-sizing: border-box;
}

.rd08-section {
  width: 100%;
  min-height: 100vh;
  padding: clamp(72px, 7vw, 116px) 0 0;
  /* background: #ffffff; */
  overflow: hidden;
  
  color: #202124;
}
.rd08-section h2 {color: var(--white); font-family:'KakaoBigSans-Bold', sans-serif; }
.rd08-section p {color: var(--gray); font-family:'KakaoBigSans-Regular', sans-serif;}

/* 기존 .item img { width:100%; height:100%; object-fit:cover; } 충돌 차단 */
.rd08-section img {
  width: auto !important;
  height: auto !important;
  max-width: none !important;
  object-fit: contain !important;
  display: block !important;
}
/* 
.rd08-section .section-head {
  position: relative;
  z-index: 5;
  max-width: 900px;
  margin: 0 auto;
  padding: 0 18px;
  text-align: center;
}

.rd08-section .section-head > span {
  display: block;
  margin-bottom: 20px;
  color: #2f8df4;
  font-size: clamp(15px, 1vw, 18px);
  font-weight: 850;
  letter-spacing: -0.04em;
}

.rd08-section .section-head h2 {
  margin: 0;
  color: #202124;
  font-size: clamp(34px, 3vw, 54px);
  line-height: 1.18;
  font-weight: 850;
  letter-spacing: -0.075em;
}

.rd08-section .section-head p {
  margin: 24px 0 0;
  color: #8b96a2;
  font-size: clamp(13px, 0.9vw, 16px);
  line-height: 1.65;
  letter-spacing: -0.04em;
} */

.rd08-visual {
  position: relative;
  width: 100%;
  min-height: clamp(620px, 47vw, 760px);
  margin-top: clamp(98px, 9vw, 100px);
}

.rd08-blue-box {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 52%;
  background: #2f96f6;
  border-radius: 36px;
}

.rd08-phone {
  position: absolute;
  z-index: 3;
  left: 50%;
  bottom: 0;
  width: clamp(300px, 48vw, 800px) !important;
  transform: translateX(-50%);
  filter: drop-shadow(0 24px 38px rgba(20, 40, 70, 0.18));
}

.rd08-phone img {
  /* width: 100% !important; */
  height: auto !important;
  object-fit: contain !important;
}

@media (prefers-reduced-motion: no-preference) {
  .rd08-blue-box {
    animation: rd08BlueIn 0.8s ease both;
    animation-timeline: view();
    animation-range: entry 0% cover 26%;
  }

  .rd08-phone {
    animation: rd08PhoneIn 0.9s ease both;
    animation-timeline: view();
    animation-range: entry 3% cover 30%;
  }
}

@keyframes rd08BlueIn {
  from {
    opacity: 0.2;
    transform: translateY(36px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes rd08PhoneIn {
  from {
    opacity: 0.1;
    transform: translateX(-50%) translateY(44px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0) scale(1);
  }
}

@media (max-width: 900px) {
  .rd08-visual {
    min-height: 640px;
    margin-top: 72px;
  }

  .rd08-blue-box {
    height: 48%;
    border-radius: 28px;
  }

  .rd08-phone {
    width: min(76vw, 410px) !important;
  }
}

@media (max-width: 768px) {
  .rd08-section {
    padding-top: 58px;
    min-height: auto;
  }

  .rd08-section .section-head h2 {
    font-size: 20px;
  }

  .rd08-section .section-head p br {
    display: none;
  }

  .rd08-visual {
    min-height: 360px;
  }
  .rd08-phone img {
    width: 100% !important;}

  .rd08-blue-box {
    height: 45%;
  }
}
@media (max-width: 390px) {
  .rd08-visual {
    min-height: 320px;
  }
}

.rd19-section,
.rd19-section * {
  box-sizing: border-box;
}

.rd19-section {
  width: 100%;
  overflow: hidden;
  /* border-radius: 40px;
  background: #f6f8fc; */
}

/* 기존 .item img { width:100%; height:100%; object-fit:cover; } 충돌 차단 */
.rd19-section .rd19-full-image {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  max-width: 100% !important;
  object-fit: contain !important;
  border-radius: 40px;
}

@media (max-width: 768px) {
  .rd19-section {
    border-radius: 28px;
  }

  .rd19-section .rd19-full-image {
    border-radius: 28px;
  }
}


/* -----------------------------------------------------------  */
/* .people-section,.travel-section, .direc-section{
  padding:40px 18px 18px 18px
} */

 .swiper {
      width: 100%;
      height: 100%;
    }

    .swiper-slide {
      
      font-size: 18px;
      background: #fff;
      border-radius: 32px;
      /* display: flex;
      justify-content: start;
      align-items: center; */
    }

    .swiper-slide img {
      display: block;
      /* width: 100%;
      height: 100%; */
      object-fit: cover;
    }
    /* .roasis-swiper .swiper-slide {background: none !important;} */

    .swiper-wrapper  b {
      font-family: 'KakaoBigSans-Bold', sans-serif;
      color: var(--rd04-dark);
      font-size: 14px;
   }
    .swiper-wrapper  .badge_round { font-family: 'KakaoBigSans-Bold', sans-serif; display: inline-block;color: var(--blue);letter-spacing: -.06em;}
    .swiper-wrapper h3 {
      font-size: 20px;
      margin-top: 8px;
      letter-spacing: -.06em;
      color: var(--black); }
    .swiper-wrapper p {
      font-size: 14px;
      margin-top: 20px;
      color: var(--dark-gray);
      line-height: 1.6;
      letter-spacing: -.0725em;
    }

    /* section 01 info */
    .swiper-wrapper {margin: clamp(40px, 6vw, 90px) auto 0;}
    .roinfo-swiper .swiper-slide {
      display: flex;
      justify-content: start;
      align-items: start;
      box-sizing: border-box; 
    }

    .roinfo-swiper .swiper-slide img {
      position: absolute;
      width: 100%;
      height: 100%;
      object-fit: cover;
      top: 0;
      left: 0;
    }
    .item-content {padding:3rem;}
    .item-content h2 {
      font-family: kakaoBigSans-Bold;
      color: #222;
      font-size: clamp(20px, 2.2vw, 28px);
      line-height: 1.3;
      letter-spacing: -.07em;
      margin-bottom: 12px;
    }
    .item-content span {
      display: block;
      /* margin-bottom: 20px; */
      color: #222;
      font-size: 14px;
      font-weight: 700;
      letter-spacing: -.04em;
    }


    .item-content p {
      /* max-width: 340px; */
      font-family: 'KakaoBigSans-Regular' !important;
      color: var(--dark-gray);
      font-size: 16px;
      line-height: 1.5;
      letter-spacing: -.04em;
    }
    @media (max-width: 768px) {
          .item-content {padding:2rem;}
       /* .item-content span {font-size: 12px;margin-bottom: 12px;} */
       .swiper-wrapper p { margin-top: 0px;}
       .item-content p {font-size: 15px;margin-top:1rem}
       .item-content span {font-size: 11px;}
    } 
    .roinfo-swiper .swiper-slide {
      height:600px;
      background-repeat: no-repeat;
      background-position: center;
      
    }
        @media (max-width: 1440px) { 
     .roinfo-swiper .swiper-slide {
      height:500px;
     } 
    }
    .roinfo-swiper .swiper-slide:nth-child(1) {
      background-image:url('../images/card01.jpg');
    }
        .roinfo-swiper .swiper-slide:nth-child(2) {
      background-image:url('../images/card02.jpg');
    }
        .roinfo-swiper .swiper-slide:nth-child(3) {
      background-image:url('../images/card03.jpg');
    }
    @media (max-width: 768px){
    .roinfo-swiper .swiper-slide {background-size: 100% auto;
      height:400px;}
      /* .item-content {padding: 1rem;} */
          .roasis-swiper .item-content {padding:2rem !important;}
          .people-swiper .item-content, .direc-section .item-content {padding: 2.4rem;}
    }

    .roinfo-swiper .swiper-content {
      position: relative;
        /* min-height: 690px; */
        overflow: hidden;
        
    }

    
    /* section 02 asis */


    /* section 03 chart */  


    .rochart-swiper .swiper-pagination,
.chart-swiper .swiper-pagination{
  margin-top:40px;
  text-align:center;
}

.rochart-swiper .swiper-pagination-bullet,
.rochart-swiper .swiper-pagination-bullet{
  width:8px;
  height:8px;
  background:rgba(34,44,58,.3);
}

.rochart-swiper .swiper-pagination-bullet-active,
.rochart-swiper .swiper-pagination-bullet-active{
  background:var(--blue);
}



.donut-chart{
  --slice-1:0deg;--slice-2:0deg;--slice-3:0deg;--slice-4:0deg;--slice-5:0deg;--slice-6:0deg;
  position:absolute;left:50%;top:45%;width:220px;height:220px;border-radius:50%;
  /* transform:translate(-50%,-50%) rotate(-90deg) scale(.92); */
  background:conic-gradient(
    from 90deg,
    var(--blue) 0deg var(--slice-1),
    var(--rd04-navy) var(--slice-1) var(--slice-2),
    var(--sky) var(--slice-2) var(--slice-3),
    #d2dde7 var(--slice-3) var(--slice-4),
    #e2e9ef var(--slice-4) var(--slice-5),
    #edf2f6 var(--slice-5) var(--slice-6),
    transparent var(--slice-6) 360deg
  );
  box-shadow:0 20px 42px rgba(34,44,58,.08);
  opacity:0;
  transition:
    --slice-1 .8s ease,
    --slice-2 1s ease .1s,
    --slice-3 1.15s ease .2s,
    --slice-4 1.3s ease .3s,
    --slice-5 1.45s ease .4s,
    --slice-6 1.6s ease .5s,
    transform .9s ease,
    opacity .5s ease;
}
.rd-chart-card{position:relative;min-height:clamp(640px,50vw,640px);border-radius:32px;background:var(--card);overflow:hidden}
.rd-chart-card.is-ready .donut-chart{
  --slice-1:101deg;
  --slice-2:198deg;
  --slice-3:270deg;
  --slice-4:324deg;
  --slice-5:349deg;
  --slice-6:360deg;
  opacity:1;  transform:translate(-50%,-50%) rotate(-90deg) scale(1);
}
.rd-chart-card.is-ready .donut-center{opacity:1}
.rd-chart-card.is-ready .bubble{opacity:1;transform:translateY(0)}
.rd-chart-card.is-ready .age-b1{transition-delay:.9s}.rd-chart-card.is-ready .age-b2{transition-delay:1s}.rd-chart-card.is-ready .age-b3{transition-delay:1.1s}.rd-chart-card.is-ready .age-b4{transition-delay:1.2s}.rd-chart-card.is-ready .age-b5{transition-delay:1.3s}.rd-chart-card.is-ready .age-b6{transition-delay:1.4s}
.rd-chart-card.is-ready .vbar{height:var(--target-height)}.rd-chart-card.is-ready .fill{width:var(--target-width)}


@media (max-width:480px){
 .rd-chart-card{min-height:clamp(620px,70vw,610px);}
.donut-area {
    width: 100%;
    max-width: 100%;
    /* overflow: hidden; */
  }

  /* .donut-area .bubble {
    position: absolute;
    box-sizing: border-box;
        text-align: center;
    color: #66717d;
    font-size: 11px;
    line-height: 1.15;
  } */

  /* .donut-area .bubble.age-b6 {
    width: clamp(58px, 15vw, 72px);
    height: clamp(58px, 15vw, 72px);
    min-width: 0;
    min-height: 0;
    padding: 0;
    flex-shrink: 0;

   
    right: 6%;
    bottom: 8%;
  } */
 /* .bubble{min-width:62px;padding:10px} */
 .age-b1{right:-4px}.age-b2{right:18px}
 .age-b3{left:0}.age-b4{left:-4px}
 .age-b5{left:30px}
 /* .age-b6{right:72px} */
}



.people-swiper h3 {
  font-family: 'KakaoBigSans-Bold';
    color: var(--dark);
    margin-top: 10px;
    font-size: clamp(21px, 1.5vw, 22px);
    line-height: 1.30;
    letter-spacing: -.07em;
}
.people-swiper p {
      font-family: 'KakaoBigSans-Regular';
    color: var(--dark-gray);
    font-size: clamp(15px, .95vw, 16px);
    margin-top: 20px;
    color: var(--dark-gray);
    line-height: 1.5;
    letter-spacing: -0.5px;
}
.people-swiper footer {
    display: flex;
    gap: 10px;
    margin-top: 28px;
}
.people-swiper footer span {
  font-family: 'KakaoBigSans-Regular';
    padding: 10px 18px;
    border-radius: 12px;
    background: #e9f3ff;
    color: var(--blue);
    font-weight: 850;
    font-size: 14px;

}
/* 
.people-swiper .swiper-wrapper {
  display: flex !important;
  gap: 16px;              
  box-sizing: border-box;
}
.people-swiper .swiper-slide {
  width: calc((100% - 48px) / 4) !important; 
  flex-shrink: 0; 
  box-sizing: border-box;
} 
@media (max-width: 1400px) {
.people-swiper .swiper-slide {
  width: calc((100% - 48px) / 3.2) !important; 
  flex-shrink: 0;
  box-sizing: border-box;
} 
}
@media (max-width: 1024px) {
.people-swiper .swiper-slide {
  width: calc((100% - 32px) / 2.2) !important; 
  flex-shrink: 0; 
  box-sizing: border-box;
} 
}
@media (max-width: 768px) {
.people-swiper .swiper-slide {
  width: calc((100% - 16px) / 1.2) !important; 
  flex-shrink: 0; 
  box-sizing: border-box;
} 
} */


/* 
.direction-grid{

  margin:clamp(70px,7vw,110px) auto 0;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:18px;
  text-align: center;
}
@media (max-width: 1280px) {
.direction-grid{

  grid-template-columns:repeat(2,1fr);
  }
}
.direction-grid article,.wide-direction,.simple-card-grid article,.interview-grid article,.chart-card{
  background:#fff;
  border-radius:28px;
}
.direction-grid article{
  min-height:470px;
  padding:48px;
} */
.cap{
  width:150px;height:120px;
  margin:40px auto 0px;
  /* background:radial-gradient(circle at 50% 35%,#1aa7ff 0 35%,#a7e0ff 36% 58%,transparent 59%); */
  border-radius:50%;
}
.direc-grid b,.wide-direction b{display: inline-block; color:var(--blue);font-size:13px}
.direc-grid h3,.wide-direction h3{
  margin-top:18px;
  font-size:clamp(22px,1.3vw,24px);
  line-height:1.35;
  letter-spacing:-.07em;
}
.direc-grid p,.wide-direction p{
  margin-top:18px;color:#6f7a86;line-height:1.5;font-size:15px;
}


.direc-swiper .item-content,.roasis-swiper .item-content {
  align-items:center;}
.direc-swiper h3{margin-top:18px;
  font-size:clamp(22px,1.3vw,24px);
  line-height:1.35;
  letter-spacing:-.07em;}
.direc-swiper p{margin-top:18px;color:#6f7a86;line-height:1.5;font-size:15px;}
.people-swiper .avatar {width:100%;  display:flex;
  align-items:center;justify-content: center;}

.roasis-swiper .item-content p {
    height: 100px;}
.roasis-swiper .item-img {display: flex;
    justify-content: center;}
.roasis-swiper .item-img img {max-width: 80%;}
@media (max-width:768px){
.roasis-swiper .item-img img {max-width: 60%;}
}