*{margin:0;padding:0;box-sizing:border-box;}
@font-face {
    font-family: 'Suit';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_suit@1.0/SUIT-Thin.woff2') format('woff2');
    font-weight: 100;
    font-display: swap;
}

@font-face {
    font-family: 'Suit';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_suit@1.0/SUIT-ExtraLight.woff2') format('woff2');
    font-weight: 200;
    font-display: swap;
}

@font-face {
    font-family: 'Suit';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_suit@1.0/SUIT-Light.woff2') format('woff2');
    font-weight: 300;
    font-display: swap;
}

@font-face {
    font-family: 'Suit';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_suit@1.0/SUIT-Regular.woff2') format('woff2');
    font-weight: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Suit';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_suit@1.0/SUIT-Medium.woff2') format('woff2');
    font-weight: 500;
    font-display: swap;
}

@font-face {
    font-family: 'Suit';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_suit@1.0/SUIT-SemiBold.woff2') format('woff2');
    font-weight: 600;
    font-display: swap;
}

@font-face {
    font-family: 'Suit';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_suit@1.0/SUIT-Bold.woff2') format('woff2');
    font-weight: 700;
    font-display: swap;
}

@font-face {
    font-family: 'Suit';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_suit@1.0/SUIT-ExtraBold.woff2') format('woff2');
    font-weight: 800;
    font-display: swap;
}

@font-face {
    font-family: 'Suit';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_suit@1.0/SUIT-Heavy.woff2') format('woff2');
    font-weight: 900;
    font-display: swap;
}
body{
     font-family:'Suit';
     background:#000000;
     overflow-x:hidden;
}
@font-face {
    font-family: 'kangwon';
    src: url('../font/kangwonL.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
.mob-br{
  display:none ;
}
html{
  width:100%;
}
.hero{
  display:block;
  position:relative;
  height: 1000px;
  overflow:hidden;
  margin-top: 300px;
}
.mob-br{
  display:none;
}
.section{
  height:570vh;           
}
.s1{
  height:500vh;
}
.s2{
  height:420vh;
}
.section-b{
   height:370vh; 
}
.section-d{
  height:270vh; 
}
.section-c{
  height:250vh; 
  min-height: auto;
 
  background-size:cover;
  background-position: center;
}
#index01{
  position:relative;
  height:100vh;
  overflow:hidden;
  width:100%;
}
.sticky{
  position:sticky;
  top:0;
  height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}

.items,
.items-ab,
.items-abs,
.items-absc{
  position:absolute;
  width:70%;
  max-width:100%;
  text-align:center;
  opacity:0;
  transform:translateY(80px) scale(0.95);
  filter:blur(12px);
}

.items h1,
.items-ab h1,
.items-abs h1,
.items-absc h1{
  font-size:2.6rem;
  font-weight:600;
  margin-bottom:20px;
  color: #ffffff;
}
.items-absc h1{
  margin-bottom:0;
}
.mobi-h1{
  display:none;
}
.items h1 b,
.items-ab h1 b,
.items-abs h1 b,
.items-absc h1 b{
   color:#fff;
  font-weight:800;
  font-size:3.2rem;
  margin: 0 10px;
}
.items-abs h1.bsc{
   font-family:'kangwon';
  font-size:60px;
  color:#fff;
}
.items-abs h1 span{
    font-family:'Pretendard';
    font-weight:800;
    font-size: 100px;
    color:#fff;
}
.items h2{
  font-size:3.6rem;
  color:#fff;
}
.items img{
  width:70%;
  border-radius:20px;
  box-shadow:0 10px 40px rgba(0,0,0,.1);
}
#pcmv{
  width: 768px;
}
.items .bva{
  max-width: 400px;
  animation: wobble 1s ease-in-out infinite;
}
.bvaa{
  font-family:'kangwon';
  font-weight:200;
}
/* ===== Header ===== */
.header {
  display:block;
  margin-top:100px;
  padding:80px 80px 40px;
  padding-top:120px;
}
.header span {
  font-size:22px;
  opacity:0.6;
  color:#fff;
}
.header h1 {
  font-size:60px;
  font-weight:600;
  letter-spacing:0px;
  color:#fff;
  text-align:center;
}

/* ===== Gallery ===== */
.gallery {
  
  padding:40px 80px 120px;
 
  display:grid;
  grid-template-columns:2fr 1fr 1fr 1fr;
  grid-auto-rows:260px;
  gap:24px;
}

.item {
  position:relative;
  overflow:hidden;
  border-radius:10px;
  cursor:pointer;
}
.item.large {grid-row:span 2;}
.item.empty {
  background:#fff;
  cursor:default;
}

.item img {
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .6s ease;
}
.item:hover img {transform:scale(1.08);}

/* ===== Popup ===== */
.popup {
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.85);
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:0;
  pointer-events:none;
  transition:.4s ease;
  z-index:1000;
}
.popup.active {
  opacity:1;
  pointer-events:auto;
}

.popup-inner {
  width:80%;
  max-width:1200px;
  background:#111;
  border-radius:14px;
  overflow:hidden;
  display:grid;
  grid-template-columns:1.4fr 1fr;
  animation:popupUp .5s ease;
}

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

.popup-inner img {
  width:100%;
  height:100%;
  object-fit:cover;
}

.popup-content {
  padding:50px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  background:#fff;
}

.popup-content h2 {
  font-size:36px;
  margin-bottom:20px;
}
.popup-content p {
  font-size:16px;
  line-height:1.7;
  opacity:.8;
}

.close {
  position:absolute;
  top:-5px;
  right:10px;
  font-size:30px;
  cursor:pointer;
}

/* ===== Responsive ===== */
@media(max-width:1200px){
  .gallery {grid-template-columns:1fr 1fr;}
  .popup-inner {grid-template-columns:1fr;}
  .header h1 {font-size:56px;}
}


/* ===== Slider ===== */
.slider-wrap {
  position:relative;
  width:100%;
  height:75vh;
  overflow:hidden;
   
}

.slider {
  display:flex;
  height:100%;
  transition:transform .8s cubic-bezier(.22,.61,.36,1);
}

.slide {
  min-width:70%;
  margin:0;
  background:#111;
  border-radius:10px;
  overflow:hidden;
  box-shadow:0 20px 60px rgba(0,0,0,.6);
  transform:scale(.9);
  opacity:.4;
  transition:.6s ease;
}

.slide.active {
  transform:scale(1);
  opacity:1;
}

.slide img {
  width:100%;
  height:100%;
  object-fit:cover;
}

/* ===== Arrows ===== */
.arrow {
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  font-size:60px;
  cursor:pointer;
  opacity:.7;
  z-index:10;
  user-select:none;
  color:#fff;
  transition: all 0.3s ease;
}
.arrow:hover {opacity:1; font-size:60px; transform:translate(0%,-50%)}
.arrow.left {left:40px;}
.arrow.right {right:40px;}

/* ===== Caption ===== */
.caption {
  position:absolute;
  left:80px;
  bottom:40px;
  font-size:15px;
  opacity:.8;
}

/* ===== Responsive ===== */
@media(max-width:1200px){
  .slide {min-width:90%;}
  .header h1 {font-size:56px;}
}

@media all and max-width

/* ===== HERO ===== */
.hero {
  position:relative;
  height:100vh;
  overflow:hidden;
  margin-top:100px;
}

/* Blurred Background */
.hero::before {
  content:"";
  position:absolute;
  inset:0;
  background:url('https://images.unsplash.com/photo-1544717305-2782549b5136?auto=format&fit=crop&w=1920&q=80') center/cover no-repeat;
  filter:blur(20px) brightness(.4);
  transform:scale(1.15);
}

.hero::after {
  content:"";
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.45);
}

/* ===== Video Card ===== */
.video-wrap {
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  width:900px;
  max-width:90%;
  aspect-ratio:16/9;
  border-radius:14px;
  overflow:hidden;
  z-index:1;
  box-shadow:0 30px 80px rgba(0,0,0,.6);
}
.service-price .video-wrap{
  width:300%;
  max-width:300%;
  z-index:-1;
}
.video-wrap video{
  display:block;
  opacity:0.5;
}
.video-thumb,
.video-thumb img {
  width:100%;
  height:100%;
  object-fit:cover;
}

.video-thumb {
  position:absolute;
  inset:0;
  cursor:pointer;
}

.play-btn {
  position:absolute;
  inset:0;
  display:flex;
  justify-content:center;
  align-items:center;
  font-size:72px;
  background:rgba(0,0,0,.2);
}

/* Video text */
.video-text {
  position:absolute;
  left:40px;
  top:40px;
  z-index:3;
}

.video-text span {
  font-size:18px;
  opacity:.85;
  color:#fff;
}

.video-text h1 {
  margin-top:8px;
  font-size:42px;
  font-weight:800;
  color:#fff;
}

/* Actual video */
video {
  width:100%;
  height:100%;
  object-fit:cover;
  display:none;
}
#random-number{
  color:#f0ff0f;
  font-size:40px;
  padding:0 0px;
  border-radius:30px;
  align-content:center;
  vertical-align:middle;
}
/* ===== Bottom CTA ===== */
.bottom-cta {
  position:fixed;
  left:50%;
  bottom:30px;
  transform:translateX(-50%);
  z-index:10;
  transition:.4s ease;
  width: 500px;
}

.bottom-cta.hide {
  opacity:0;
  transform:translate(-50%,80px);
  pointer-events:none;
}

.cta-box {
  display:flex;
  align-items:center;
  gap:24px;
  padding:20px 28px;
  border-radius:14px;
  color:#fff;
  background:linear-gradient(
    120deg,
    #007fff,
    #00BCD4,
    #2457bf,
    #0f187b
  );
  background-size:300% 300%;
  animation:gradientMove 6s ease-in-out infinite;

  box-shadow:0 20px 60px rgba(0,0,0,.5);
}

.cta-box p{
  font-size:21px;
  line-height:1.4;
}

.cta-box button {
  border:none;
  background:#fff;
  color:#3782ff;
  padding:10px 18px;
  border-radius:8px;
  font-weight:700;
  cursor:pointer;
  position:absolute;
  right:30px;
  font-size: 16px;
}


.app {
    min-width: 100vw;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    overflow: hidden;
    position: absolute;
    top: 0px;
}

.app::before {
    width: 100%;
    height: 100%;
    background: rgb(0, 0, 0);
    position: absolute;
    display: block;
    content: "";
    left: 0px;
    top: 0px;
    z-index: 1;
    opacity: 0.7;
}

.tag-list {
    gap: 0rem 2em;
    position: relative;
    padding: 1.5rem 0px;
    overflow: hidden;
    width: 100%;
    max-width: 100vw;
    display: flex;
    flex-shrink: 0;
    flex-direction: row-reverse;
}

.loop-slider {
    display: flex;
    width: 20%;
    & .inner {
        display: block;
        width: 100%;
        animation-name: loop;
        animation-timing-function: linear;
        animation-iteration-count: infinite;
        animation-direction: var(--direction);
        animation-duration: var(--duration);
    }
}

.tag {
    display: flex;
    align-items: center;
    width: 100%;
    gap: 0px 0.2rem;
    color: rgb(226, 232, 240);
    font-size: 0.9rem;
    background-color: rgb(51, 65, 85);
    border-radius: 0.4rem;
    overflow: hidden;
    margin-right: 0rem;
    box-shadow: rgba(0, 0, 0, 0.2) 0px 0.1rem 0.2rem, rgba(0, 0, 0, 0.3) 0px 0.1rem 0.5rem, rgba(0, 0, 0, 0.4) 0px 0.2rem 1.5rem;
    margin-bottom: 30px;
    & span {
        font-size: 1.2rem;
        color: rgb(100, 116, 139);
    }

    & img {
        width: 100%;
    }
}

.fade {
    pointer-events: none;
    background: linear-gradient(90deg, rgb(30, 41, 59), transparent 30%, transparent 70%, rgb(30, 41, 59));
    position: absolute;
    inset: 0px;
}
#index01 .phrase {
    text-align: center;
    color: rgb(255, 255, 255);
    padding-top: 0px;
    position: absolute;
    width:100%;
    z-index:10;
    margin-top: 300px;
    left:0;
    word-break:keep-all;
}

#index01 .phrase h4 {
    top: 100px;
    font-size:30px;
    position: relative;
    overflow: hidden;
    background: linear-gradient(to right, rgb(127, 227, 244), rgb(222, 239, 251), rgb(234, 243, 255), rgb(34, 93, 198)) text;
    font-weight: 800;
    -webkit-text-fill-color: transparent;
    opacity: 0;
    transition: 1s;
}
#index01 .phrase h1{
   position: relative;
  font-size:120px;
   opacity: 0;
    transition: 1s;
   top: 100px;
}
#index01 .phrase h1.add,
#index01 .phrase h4.add {
    opacity: 1;
    top: 0px;
}



#index01 .phrase hr {
    height: 2px;
    width: 200px;
    margin: 50px auto;
    border: 0px;
    background: rgb(255, 255, 255);
    opacity: 0.2;
}

#index01 .phrase p {
    font-size: 24px;
    top: 1000px;
    opacity: 0;
    transition: 1s;
}

#index01 .phrase p.add {
    opacity: 1;
    top: 0px;
}



.container, 
.flow {
    display: flex;
    align-items: center;
    gap: 40px;
     align-items: center;
    justify-content: center;
  height:80vh;
  }

  .item-lb {
    text-align: center;
  }

  .label {
    margin-bottom: 20px;
    font-size: 24px;
    opacity: 0.85;
    color:#fff;
  }

  .card img {
    width: 72%;
    display: block;
  }

  /* 중앙 화살표 */
  .arrow {
    font-size: 20px;
    opacity: 0.6;
    user-select: none;
  }

  /* 미세한 hover 효과 */
  .container:hover .item:first-child .card {
    transform: scale(0.96);
    opacity: 0.6;
  }

  .container:hover .item:last-child .card {
    transform: scale(1.04);
    box-shadow: 0 40px 80px rgba(0,0,0,0.45);
  }


 

.card-wrap {
  text-align: center;
}

 

.card {
  width: 380px;
  height: 460px;
  background: #fff;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transition: transform .6s cubic-bezier(.4,0,.2,1),
              box-shadow .6s cubic-bezier(.4,0,.2,1),
              opacity .6s;
}
.card video{
  display:block;
}
.card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.arrow {
  font-size: 48px;
  opacity: .6;
  user-select: none;
}

/* Hover */
.flow .card-wrap .card:hover {
  opacity: 1;
  transform: scale(1.05);
}
 





.step {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #fff;
  color: #000;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 24px;
  margin-bottom: 28px;
}

.title {
  font-size: 40px;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin-bottom: 22px;
  color:#fff;
}

.title::before {
  content: "[ ";
}

.title::after {
  content: " ]";
}

.desc {
  font-size: 21px;
  line-height: 1.7;
  opacity: .85;
  margin-bottom: 34px;
  color:#fff;
}

.bta {
  display: inline-block;
  background: #fff;
  color: #000;
  padding: 16px 34px;
  border-radius: 12px;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.5;
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
  transition: transform .3s ease, box-shadow .3s ease;
}

.bta span {
  font-weight: 700;
}

.bta:hover {
  transform: translateY(-3px);
  box-shadow: 0 20px 50px rgba(0,0,0,.5);
}

.arrows{
  color:#fff;
  font-size:60px;
  opacity:0.4;
}



#index043{
    background:#000000;
    padding: 100px 0px;
}
.section-main p{
    width: 100%;
    font-size: 50px;
    font-family: Pretendard;
 
    line-height:70px;
    font-weight: 600;
    color: rgb(255 255 255);
    transition: all 0.4s ease;
    opacity:0;
    position:fixed;
    top: 52%;
    text-align:center;
    left:50%;
    transform:translate(-50%,-50%);
}
#index043 p{
    position:relative;
    top:unset;
    transform:translate(0);
    left:0;
    text-align:left;
    
    margin-top: 20px;
    opacity:1;
}
#index043 p.mmp{
    text-align: center;
    margin-bottom: 100px;
    padding-top:40px;
}
.section-main p{
    opacity:1;
    top:50%;
}
.first-sb01 ul{
     display:flex;
     flex-wrap:wrap;
     width: 100%;
     gap:2%;
 }
.first-sb01 ul li{
    width:49%;
    background:#1c1c1c;
    height: 400px;
    margin-bottom: 20px;
    padding: 20px;
    border-radius: 30px;
    position:relative;
}
.first-sb01 ul li span{
    font-size: 24px;
    background:#1a7dba;
    display:inline-block;
    width: 30px;
    height: 30px;
    border-radius: 30px;
    color:#fff;
    font-weight:600;
    text-align:center;
}
.first-sb01 ul li p{
    position:relative;
    font-size:21px;
    opacity:1;
    line-height:36px;
}
.first-sb01 ul li#fis1:before{
    position:absolute;
    content:'';
    display:block;
    width: 500px;
    height: 250px;
    background:url(../images/img001.png) no-repeat;
    background-size: contain;
    background-position:center;
    bottom:0;
    right:0;
}
.first-sb01 ul li#fis2:before{
     position:absolute;
     content:'';
     display:block;
     width: 500px;
     height: 230px;
     background:url(../images/img002.png) no-repeat;
     background-size: contain;
     background-position:center;
     bottom:0;
     right:50%;
     transform:translate(50%,0)
}
.first-sb01 ul li#fis3:before{
     position:absolute;
    content:'';
    display:block;
    width: 500px;
    height: 300px;
    background:url(../images/img003.png) no-repeat;
    background-size: contain;
    background-position:center;
    bottom:0;
    right:0%;
    border-radius: 30px;
}
.first-sb01 ul li#fis4:before{
     position:absolute;
    content:'';
    display:block;
    width: 620px;
    height: 300px;
    background:url(../images/img004.png) no-repeat;
    background-size: cover;
    background-position:center;
    bottom:0;
    right:0%;
    border-radius: 30px;
}


.page-w{
  padding:0 200px;
}


#indx08 {
    width: 100%;
    padding: 200px 0px;
    padding-bottom: 200px;
    text-align:center;
  position:relative;
}

#indx08 .fp-overflow {
    width: 100%;
    height: 100%;
    padding-top: 200px;
    padding-bottom: 200px;
}

.main-vod {
     position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  width:100%;
  aspect-ratio:16/9;
  border-radius:14px;
  overflow:hidden;
  z-index:-1;
  box-shadow:0 30px 80px rgba(0,0,0,.6);
}

.main-vod video {
    width: 100%;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    height: 100%;
    background-color: black;
    background-position: center center;
    background-size: cover;
    object-fit: cover;
    z-index: -1;
    backface-visibility: hidden;
    opacity: 0.5;
    display:block;
}
 

#indx08 .tit-08 h3 {
    font-size: 48px;
    color: rgb(255, 255, 255);
}

#indx08 .tit-08 h5 {
    font-size: 36px;
    margin-top: 30px;
    font-weight: 400;
    color: rgb(255, 255, 255);
}

#indx08 .ust ul {
    display: flex;
    width: 100%;
    flex-wrap: wrap;
    gap: 2%;
    margin-top: 100px;
}

#indx08 .ust ul li {
    width: 32%;
    text-align: center;
    border-radius: 20px;
    padding: 30px 50px 20px;
    background: rgba(144, 183, 255, 0.267);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(47, 103, 203, 0.267);
    box-shadow: rgba(0, 0, 0, 0.1) 0px 20px 30px;
    color: rgb(255, 255, 255);
    overflow: hidden;
    top: -100px;

    transition: 0.3s;
}

#indx08 .ust ul li.ful {
    top: 0px;
    opacity: 1;
}

#indx08 .ust ul li h3 {
    font-size: 24px;
}

#indx08 .ust ul li img {
    position: absolute;
    right: -20px;
    width: 130px;
    bottom: -20px;
    opacity:0.3;
}

#indx08 .ust ul li#us4 {
    width: 100%;
    margin-top: 30px;
    background: rgba(34, 93, 198,0.7);
    color: rgb(255, 255, 255);
    padding-top:30px;
    padding-bottom:30px;
    backdrop-filter: blur(20px);
}
#indx08 .ust ul li#us4 h3{
    font-size:24px;
    align-content:center;
    padding: 0 20px;

}
#indx08 .ust ul li h5 {
    font-size: 60px;
}

#indx08 .ust ul li#us4 a {
    background: rgb(255, 255, 255);
    color: rgb(0, 0, 0);
    padding: 20px 100px;
    font-size: 18px;
    border-radius: 30px;
    display: inline-block;
    margin-top: 30px;
    overflow: hidden;
    transition: 0.3s;
    text-decoration:none;
}
.now-project h3{
  display:inline-block;
  vertical-align:middle;
    background:#13202e;
    align-items:center;
     
  align-content:center;
  justify-content:center;
  justify-items:center;
  margin-top:30px;
  border-radius:30px;
  padding: 5px 20px;
}
#indx08 .ust ul li#us4 a::before {
    content: "";
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 400%;
    background: linear-gradient(0deg, transparent, transparent 50%, rgba(131, 193, 255, 0.667));
    transform: rotate(-45deg);
    transition: 0.5s;
    opacity: 0;
}

#indx08 .ust ul li#us4 a:hover {
    transform: scale(1.02);
    background: rgb(26, 69, 145);
    color: rgb(255, 255, 255);
}

#indx08 .ust ul li#us4 a:hover::before {
    opacity: 1;
    transform: rotate(-45deg) translateY(-30%);
}




.card-vv {
  width: 100%;
  padding: 0 24px;
  text-align: center;
}

.section-title {
  font-size: 18px;
  line-height: 1.6;
  font-weight: 500;
  margin-bottom: 60px;
  color:#fff;
  font-size: 36px;
}

.cards {
  display: flex;
  gap: 40px;
  justify-content: center;
}

.card-sec {
  background: #fff;
  color: #000;
  border-radius: 18px;
  padding: 48px 42px 42px;
  width: 100%;
  max-width: 520px;
  text-align: left;
  box-shadow: 0 30px 80px rgba(0,0,0,.45);
  text-align:center;
}

.icon {
  width: 80px;
  height: 80px;
  margin:0 auto;
  margin-bottom: 24px;
}
.icon img{
  width: 100%;
}

.icon svg {
  width: 100%;
  height: 100%;
}

.card-title {
  font-size: 22px;
  font-weight: 700;
  line-height: 1.4;
  margin-bottom: 16px;
  font-family:KoPub Dotum;
  letter-spacing:-1px;
}

.card-desc {
  font-size: 16px;
  line-height: 1.4;
  opacity: .9;
  font-family:KoPub Dotum;
  letter-spacing:-1px;
}

.feas {
  color:#ffffff66;
  justify-content: space-between;
  margin-top: 32px;
  font-size: 13px;
  font-size:16px;
  width: 50%;
  margin: 0 auto;
  margin-top: 50px;
  margin-bottom:100px;
  text-align:center;
}

.feas a {
  margin-top: 20px;
  color: #fff;
  text-decoration: none;
  display:block;
  text-align:center;
  width:100%;
  font-size: 24px;
}


#indx11 {
    padding-top: 100px;
  padding-bottom:100px;
}

.tit-11 {
    text-align: center;
    font-size: 36px;
    color:#fff;
}

.tit-11 h3 {
    color: rgb(255 255 255);
    margin-top: 50px;
}

.process ul {
    width: 100%;
    flex-wrap: wrap;
    display: flex;
    gap: 2%;
    margin-top: 50px;
    margin-bottom: 100px;
}

.process ul li {
    text-align: center;
    width: 23.5%;
    padding: 0px 40px;
    margin-bottom: 50px;
    position: relative;
  list-style:none;
    transition: all 0.3s ease;
  z-index:1;
  opacity:0;
}
.process ul li.add{
    opacity:1;
}
.process ul li:nth-child(4n)::before {
    display: none;
}

.process ul li::before {
    content: "";
    display: block;
    width:  0%;
    height: 3px;
    background: rgb(255 255 255);
    left: 50%;
    position: absolute;
    top: 60px;
    z-index:0;
   transition: all 0.4s ease;
}
.process ul li.add::before{
     width:100%;
}
.process ul li:last-child::before {
    display: none;
}

.process ul li h5 {
    font-size: 24px;
    color: rgb(255 255 255);
}

.process ul li p {
    font-size: 18px;
    margin-top: 10px;
    line-height: 26px;
    color:#fff;
    font-weight:400;
    opacity:0.8;
  word-break:keep-all;
}
.process ul li p.mobile{
  display:none;
}
.process ul li img{
  border-radius:100px;
  width:120px;
  transition: all 0.6s ease;
  z-index:1;
  position:relative;
}
#indx12 {
 
    padding: 100px 0px;
}
.faq-container {
    max-width: 30rem;
    display: flex;
    flex-direction: column;
    gap: 2rem;
    margin: 0px auto;
    padding: 0px;
    list-style: none;
}

.faq {
    position: relative;
    overflow: hidden;
    transition: 0.3s;
    border-bottom: 1px solid rgb(255 255 255 / 20%);
}

.faq.active {
}

.faq__question {
    padding: 1rem;
}

.faq__title {
    margin: 0px;
    font-size: 1.2rem;
    text-indent: -0.5rem;
    color: rgb(255 255 255);
    cursor:pointer;
  font-weight:300;
}
.faq.active .faq__title{
  font-weight:600;
}
.tit-12{
  font-size: 36px;
  text-align: center;
  color:#fff;
  margin-bottom: 50px;
}
.faq__title span {
    margin-right: 6px;
    font-size: 24px;
    font-weight: 800;
}

.faq__answer {
    max-height: 0px;
    overflow: hidden;
    transition: max-height 0.3s ease-in-out;
}

.faq__text {
    padding: 0rem 2rem 20px;
    color: rgb(169 169 169);
    font-size:18px;
}

.faq__text span {
    margin-right: 6px;
    display:none;
    font-weight: 800;
}

.faq.active .faq__answer {
    padding-left:0px;
    max-height: 200px;
    transition: max-height 0.3s ease-in-out;
}

.faq__btn {
    cursor: pointer;
    width: 2rem;
    height: 2rem;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 1rem;
    right: 1rem;
    border: 0px;
    border-radius: 50%;
    font-size: 1.5rem;
}

.faq__btn:focus {
    outline: 0px;
}

.faq__icon.close {
    display: none;
}

.faq.active .faq__btn {
    background: rgb(9, 126, 219);
}

.faq .faq__btn {
    background: rgb(238, 246, 255);
}

.faq.active .faq__icon.close {
    color: rgb(255, 255, 255);
    display: block;
}

.faq.active .faq__icon.open {
    display: none;
}

.faq-list ul {
    display: flex;
    flex-wrap: wrap;
    gap: 2%;
}

.faq-list ul li {
    width: 100%;
}
.process ul li img{
    border-radius:100px;
    width:120px;
    transition: all 0.6s ease;
}

#statsSection{
  padding: 0 100px;
}

.wrapper {
  display:grid;
  grid-template-columns:1.2fr 1fr;
  gap:80px;
  align-items:center;
}

/* VIDEO */
.video-box {
  position:relative;
  border-radius:20px;
  overflow:hidden;
}

.video-box img {
  width:100%;
  display:block;
  filter:brightness(.6);
}

.video-overlay {
  position:absolute;
  inset:0;
  padding:40px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}

.badge {
  background:#6c2cff;
  padding:6px 14px;
  border-radius:6px;
  font-size:14px;
  font-weight:600;
  width:fit-content;
  margin-bottom:14px;
}

.video-title {
  font-size:36px;
  font-weight:800;
  color:#fff;
}

.video-sub {
  font-size:16px;
  opacity:.8;
  color:#fff;
}

/* PLAY BUTTON */
.play-btn {
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  width:72px;
  height:72px;
  border-radius:50%;
  background:rgba(255,255,255,.9);
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
}
.play-btn::before {
  content:'';
  margin-left:4px;
  border-style:solid;
  border-width:12px 0 12px 18px;
  border-color:transparent transparent transparent #000;
}

/* RIGHT */
.right h2 {
  font-size:40px;
  font-weight:800;
  line-height:1.3;
  margin-bottom:40px;
  color:#fff;
}

.stats {
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:20px;
}

.stat {
  background:#fff;
  color:#000;
  border-radius:20px;
  padding:30px 24px;
}
.stat p{
  font-size: 16px;
  margin-top: 10px;
}
.stat-title {
  font-size:24px;
  opacity:.6;
  margin-bottom:16px;
}
.stat-wrap{
  display:flex;
  font-size: 18px;
  align-items:center;
}
.stat-value {
  font-size:44px;
  font-weight:800;
  margin-right: 10px;
}
.stat-value span {color:#6c2cff;}

/* VIDEO MODAL */
.modal {
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.8);
  display:none;
  align-items:center;
  justify-content:center;
  z-index:999;
}

.modal.active {display:flex;}

.modal-content {
  width:80%;
  max-width:960px;
  aspect-ratio:16/9;
  position:relative;
}

.modal iframe {
  width:100%;
  height:100%;
  border-radius:12px;
}

.modal-close {
  position:absolute;
  top:-40px;
  right:0;
  color:#fff;
  font-size:28px;
  cursor:pointer;
}

#smart-store{
  text-align:center;
  overflow:hidden;
}
#smart-store ul li img{
  margin-bottom: 50px;
  border-radius: 20px;
}
#seller-bb{
  text-align:center;
  padding: 100px 0px;
  padding-bottom: 200px;
}
.seller-mat-img{
  width: 80%;
  margin: 0 auto;
}
.seller-mat-img ul{
  display:flex;
  justify-content:center;
}
.seller-mat-img ul li{
  list-style:none;
}
.seller-mat-img ul li p{
  font-size: 24px;
  background:#fff;
  display:inline-block;
  padding: 5px 20px;
  margin-bottom: 30px;
  font-weight:800;
  border-radius: 30px;
}
.seller-mat-img ul li img{
  display:block;
  width:100%;
}
#smart-store h1,
#seller-bb h1{
  color:#fff;
  margin-bottom: 30px;
}
#ibbs{
  width: 900px;
}

/* slider */
.slider {
  width:100%;
  /* overflow:hidden; */
  margin-bottom:70px;
}

.track {
  display:flex;
  gap:24px;
  width:max-content;
}

.card-rev {
  width:360px;
  background:#f9f9f9;
  border-radius:18px;
  padding:16px;
  color:#000;
  flex-shrink:0;
  position:relative;
  margin: 15px;
}
.card-rev img{
  width: 100%;
}
.card-reva{
  border-radius: 18px;
  overflow:hidden;
  margin: 15px;
}
.card-reva img{
  width: 100%;
}
.card img {
  width:100%;
  border-radius:12px;
}

.bubble {
  background:#f1f3f5;
  padding:10px 12px;
  border-radius:12px;
  font-size:13px;
  margin-bottom:8px;
}

.bubble.me {
  background:#e8f0ff;
}



.service-price{
  width:100%;
  height: 100%;
  padding-bottom: 200px;
  position:relative;
  overflow:hidden;
}
.service-price-list{
    padding-top: 200px;
}
.service-price-list > h4{
    font-size:60px;
    text-align: center;
    color:rgb(255 255 255);
    line-height: 1.2;
    margin-top: 100px;
}
.service-list-inner > ul{
    display:flex;
    gap:1%;
    width:100%;
    margin-top:60px;
  flex-wrap:wrap;
  justify-content:center;
}
.service-list-inner > ul > li{
    width: 25%;
    list-style:none;
}
.item-info{
    background:#ffffff11;
    border-radius: 20px;
    border:1px solid #ddd;
    padding: 20px;
    padding-top:30px;
    transition: all 0.3s ease;
    height:100%;
  backdrop-filter:blur(20px);
  box-shadow:inset -12px -22px 85px rgba(255,255,255,0.20)
}
.service-list-inner > ul > li:hover .item-info{
    border:1px solid #1c4c95;
}
.item-info h3{
    font-size: 28px;
  color:#fff;
}
.info-t p{
    margin-top: 20px;
    margin-bottom:30px;
    font-size: 16px;
    line-height: 24px;
    color:#ffffff;
    height: 50px;
}
.info-price{
    margin-top: 70px;
}
.info-price h3 b{
    font-size:16px;
    font-weight: 400;
    color:#3584d3;
}
.info-price span{
    font-size: 14px;
    font-weight:400;
    color:#ffffffaa;
    display:block;
    text-align: left;
}
.al-btn {
    margin-top: 30px;
}
.al-btn a{
    display:block;
    width: 100%;
    height: 50px;
    line-height: 50px;
    color:#fff;
    text-align: center;
    background:#3584d3;
    border-radius: 30px;
    font-size: 18px;
    font-weight: 600;
    text-decoration:none;
}
.info-head{
    height:auto;
    margin-top: 30px;
}
.info-head ul li{
    font-size:18px;
    font-weight: 600;
    margin: 4px 5px;
   list-style:none;
    display:inline-block;
    padding: 5px 10px;
    background:#eee;
  border-radius:30px;
}
.info-head ul li.all{
    text-align:center;
    font-size:18px;
    color:#3584d3;
}
.info-skill{
    margin: 50px 0px;
    border-top: 1px solid #ffffff33;
    padding-top: 20px;
    height: auto;
}
.info-skill h5{
    font-size: 18px;
    color:#ffffff;
}
.info-skill ul li{
    font-size: 16px;
    padding-left: 30px;
    margin:10px 0px;
    position:relative;
    color:#ffffff;
    line-height: 24px;
    list-style:none;
}
.info-skill ul li:before{
    content:'✓';
    display:block;
    border-radius:7px;
    color:#3198ff;
    position:absolute;
    left:10px;
    top: 0px;
    font-weight: 800;
}
.recommend{
    font-size: 14px;
    display:inline-block;
    padding: 5px 10px;
    border-radius: 5px;
    background:#ff7171;
    color:#fff;
    vertical-align:middle;
}
 
.gsap-bg {
  position: fixed;
  inset: 0;
  background: url('../images/sunset.jpg') center/cover no-repeat;
  opacity: 0;
  transform: scale(1.15);
  z-index: -1;
}

#mobile-menu{
  position:fixed;
  width:100%;
  opacity:0;
  height: 100%;
  z-index:1000;
  background:#292929;
  padding: 40px;
  right:-100%;
  transition: all 0.3s ease;
}
#mobile-close{
  width: 50px;
  height: 50px;
  font-size: 40px;
  color:#fff;
}
#mobile-menu.view{
  opacity:1;
  right:0;
}
#mobile-menu .gnb{
  display:block;
}
#mobile-menu .gnb a{
  display:block;
  margin-top: 10px;
}
/* 헤더 */
#header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 80px;
  z-index: 1000;
  transition: background 0.4s ease, box-shadow 0.4s ease;
}

#header.scrolled {
  background: rgba(0, 0, 0, 0.5);
  box-shadow: 0 10px 30px rgba(0,0,0,0.5);
  backdrop-filter:blur(10px);
}

.header-inner {
  max-width: 1600px;
  height: 100%;
  margin: 0 auto;
  padding: 0 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* 로고 */
.logo {
  font-size: 28px;
  font-weight: 700;
}
.logo a {
    background: url("../images/logo_white.svg") center center / contain no-repeat;
    display: block;
    width: 300px;
    height: 40px;
}

.logo.white a {
    background: url("../images/logo_white.svg") center center / contain no-repeat;
    display: block;
    width: 300px;
    height: 40px;
}
/* 메뉴 */
.gnb {
  display: flex;
  gap: 40px;
}

.gnb a {
  color: #fff;
  text-decoration: none;
  font-size: 18px;
  opacity: 0.9;
}

.gnb a:hover {
  opacity: 1;
}

/* 햄버거 버튼 */
.menu-btn {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
}

.menu-btn span {
  display: block;
  width: 24px;
  height: 2px;
  background: #fff;
  margin: 6px 0;
}

/* 모바일 */
@media (max-width: 1024px) {
  .gnb {
    display: none;
  }
  #mobile-menu .gnb{
    display:block;
  }
  .menu-btn {
    display: block;
  }
  .slide{
    height: 250px;
  }
  .items h2{
    font-size: 30px;
  }
}
.review-section{
  width: 100%;
  overflow-x:hidden;
}
.review-section .slider{
  overflow:hidden;
}
.mob-br{
  display:none;
}
.pc-h1{
  display:block;
}
.mobi-h1{
  display:none;
}
@media (max-width: 600px) {
  .items-abs h1.bsc{
    font-size: 24px;
  }
  .items-abs h1 span{
    font-size: 40px;
  }
}


@keyframes ani33 {
    0% {
        background: linear-gradient(to right, rgb(222, 239, 251), rgb(234, 243, 255), rgb(204, 229, 255), rgb(255, 255, 255), rgb(255, 255, 255));
    }

    100% {
        background: linear-gradient(to right, rgb(255, 255, 255), rgb(192, 215, 226), rgb(231, 238, 244), rgb(211, 246, 250), rgb(239, 245, 255));
    }
}
@keyframes gradientMove {
  0% {
    background-position:0% 50%;
  }
  50% {
    background-position:100% 50%;
  }
  100% {
    background-position:0% 50%;
  }
}

@keyframes loop {
    0% {
        transform: translateY(0px);
        opacity: 0;
    }

    2% {
        opacity: 1;
    }

    98% {
        opacity: 1;
    }

    100% {
        transform: translateY(-10%);
        opacity: 0;
    }
}

@keyframes wobble {
  0%   { transform: translateX(0); }
  15%  { transform: translateX(-8px); }
  30%  { transform: translateX(6px); }
  45%  { transform: translateX(-4px); }
  60%  { transform: translateX(2px); }
  75%  { transform: translateX(-1px); }
  100% { transform: translateX(0); }
}

#footer-active{
    position:fixed;
    right:0;
    z-index:1000;
    bottom:0;
}
#footer-active{
    background: rgb(255 255 255 / 86%);
    backdrop-filter: blur(20px);
    right:30px;
    box-shadow: rgb(88 186 255 / 28%) 0px 20px 30px;
    transition: 0.3s; 
    bottom: 340px;
    padding: 30px;
    width:240px;
    border-radius: 30px;
    border: 1px solid #91c0e8;
}
#footer-active h5{
    font-size:22px;
    color:#3584d3;
}
#footer-active p{
    font-size: 16px;
    margin-top:10px;
    color:#4678b6;
}
#footer-active a{
    display:block;
    width: 100%;
    height: 40px;
    line-height: 40px;
    text-align: center;
    background:#3584d3;
    border-radius: 30px;
    color:#fff;
    font-size: 18px;
}
#footer-active img{
    display:block;
    width: 150px;
    margin: 0 auto;
}
footer{
    background:#000;
    padding: 40px 0px;
  padding-bottom: 150px;
}
#footer-logo{
    width: 400px;
    height:40px;
    background:url(../images/logo_white.svg) no-repeat;
    background-size:contain;
    z-index:100;
}
#footer-inner{
    display:flex;
    align-content: center;
    align-items:center;
}
#footer-info-cont{
    margin-left: 40px;
}
#footer-info-cont hr{
    border:0;
    height: 1px;
    background:#aaa;
    margin: 10px 0px;
}
#footer-info-cont ul{
    display:flex;
    flex-wrap:wrap;
}
#footer-info-cont ul li{
    color:#989898;
    line-height: 30px;
    font-size: 14px;
     margin-right:30px;
  list-style:none;
  
}
#footer-info-cont ul li span{
    font-weight:600;
    color:#aaa;
    margin-right: 10px;
}
#footer-info-cont ul li a{
    text-decoration:none;
    color:#fff;
    font-size: 16px;
}


.logo-marquee {
  width: 100%;
  overflow: hidden;
  padding: 30px 0;
}

.logo-track {
  display: flex;
  width: max-content;
  animation: marquee 30s linear infinite;
}
.logo-slide{
  padding:100px 0px;
}
.logos {
  flex: 0 0 auto;
  padding: 0 48px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.logos img {
  height: 38px;
  width: auto;
  opacity: 0.8;
}

/* hover 시 멈춤 */
.logo-marquee:hover .logo-track {
  animation-play-state: paused;
}

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