@charset "utf-8";

#features-page .inner{max-width:1200px;}
#features-page .page-tit h2::before{content:'Features';}
#features-page .feature-con{width:100%;;transform:translate3d(0,0,0);}
#features-page .sec-com{display:flex;align-items:flex-end;width:100%;height:calc(100vh - var(--hdHeight));padding-top:var(--gap-lg);}
#features-page .sec01{background:linear-gradient(105deg, #1BABFF 0.22%, #006FFF 115.17%);}
#features-page .sec02{background:linear-gradient(105deg, #44C09E 0.22%, #5FDDD0 115.17%);}
#features-page .sec03{background:linear-gradient(105deg, #4091F0 0.22%, #70C3F0 115.17%);}
#features-page .sec04{background:linear-gradient(105deg, #9C1BFF 0.22%, #4D00FF 115.17%);}
#features-page .sec05{background:linear-gradient(105deg, #EA870D 0.22%, #FFB42A 115.17%);}
.sub-contents .feature-tab{position:sticky;top:50px;z-index:10;width:fit-content;margin: auto;}
.sub-contents .feature-tab ul{gap:10px;justify-content: center;}
.sub-contents .feature-tab a{display:flex;align-items:center;height:47px;padding:0 20px;border-radius:999px;background: rgba(255, 255, 255, 0.30);color:#fff;text-align: center;}
.sub-contents .feature-tab a.active{color:var(--main);background:#fff;font-weight:600;}
.sub-contents .feature-con .sec-com{position:relative;z-index:1;height:100vh;transition:opacity .3s ease,transform .3s ease;}
.sub-contents .feature-con .sec-com + .sec-com{position:absolute;top:0;left:0;width:100%;}


.feature-item .con-img{position:relative;width:60%;padding:0 90px;text-align: right;}
.feature-item .con-img img{width:325px}
.sec01 .feature-item .con-img .pop1{position:absolute;top:50%;left:50%;width:160px;margin-left: -120px;}
.sec01 .feature-item .con-img .pop2 {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 160px;
  margin-left: 200px;
  margin-top: -60px;
}
.sec02 .feature-item .con-img .pop1 {position: absolute;top: 150px;left: 90px;width: 282px;}
.sec02 .feature-item .con-img .pop2{position:absolute;bottom:70px;left:100px;width:333px;margin-top:-5%;}
.sec02 .feature-item .con-img .pop3{position:absolute;top:50%;right:40px;width:83px;margin-top:-5%;}
.sec03 .feature-item .con-img .pop1 {
  position: absolute;
  top: 50%;
  /* right: auto; */
  width: 200px;
  margin-top: -10px;
  left: 50%;
  margin-left: 140px;
}
.sec03 .feature-item .con-img .pop2 {
  position: absolute;
  top: 50%;
  right: auto;
  width: 300px;
  /* margin-top: 5%; */
  left: 50%;
  margin-left: -160px;
  margin-top: 30px;
}
.sec04 .feature-item .con-img .pop1 {position: absolute;top: 150px;left: 140px;width: 150px;}
.sec04 .feature-item .con-img .pop2{position:absolute;top:50px;left:50px;width:150px;}
.sec04 .feature-item .con-img .pop3{position:absolute;top:50%;right:0px;width:340px;margin-top:-18%;}
.sec05 .feature-item .con-img .pop1 {position: absolute;bottom: 150px;left: 50%;width: 180px;margin-left: -170px;}
.sec05 .feature-item .con-img .pop2{position:absolute;bottom:130px;left:50%;width:180px;margin-left: 200px;}
.sec05 .feature-item .con-img .pop3 {
  position: absolute;
  bottom: 50px;
  left:50%;
  width: 180px;
  margin-left: -230px;
}

.feature-item .con-txt{width:40%;}
.feature-item .con-txt .num{font-size:var(--font18);font-weight:600;color:#fff;}
.feature-item .con-txt .con-tit h3{margin:20px 0;}
.feature-item .con-txt .con-tit p{font-size:var(--font18);}
/* .feature-item .con-img .m-only2{display:none;} */

/* ===============================
반응형
================================ */

@media screen and (min-height:900px){
  .sub-contents .feature-con .sec-com{align-items: center !important;}
  .feature-item{margin-top:0 !important;align-items: center !important;}
}

@media (min-width:1025px){
  #features-page .feature-con{position:relative;height:calc((100vh - var(--hdHeight)) * 6);}
  .sub-contents{background:linear-gradient(105deg, #1BABFF 0.22%, #006FFF 115.17%);padding-top:var(--gap-lg);}
  #features-page .sec01{background:transparent;}
  #features-page .feature-tab{position:sticky;top:164px;z-index:20;}
  #features-page .sec-com{position:sticky;top:var(--hdHeight);height:calc(100vh - var(--hdHeight));width:100%;opacity:0;transform:translateY(120px);transition:opacity .4s ease,transform .4s ease;z-index:1;}
  #features-page .sec-com.active{opacity:1;transform:translateY(0);z-index:2;}
  #features-page .sec-com + .sec-com{margin-top:calc(-100vh + var(--hdHeight));}
  .feature-item{margin-top:var(--gap-lg);}
  .pop-com{
    opacity: 0;
    transform: translateY(40px);
    will-change: transform, opacity;
  }
}


@media (max-width:1024px){
  #features-page .feature-con{height:auto;}
  #features-page .feature-tab{display:none;}
  #features-page .sec-com{position:static;height:auto;opacity:1;transform:none;margin-top:0;}
  #features-page .sec-com>.inner{padding:0;}
  #features-page .feature-item{flex-wrap: wrap;gap:var(--gap-lg);justify-content: center;}
  #features-page .feature-item .con-txt{width:100%;text-align: center;padding:0 30px;}
  #features-page .feature-item .con-img{overflow:hidden;width:100vw;max-width:700px;margin:auto;text-align: center;padding:0;}
  #features-page .feature-item .con-img .pc-only{display:none;}
  #features-page .feature-item .con-img .m-only{display:block;}

  .sec01 .feature-item .con-img .pop1{margin-left:-250px;}
  .sec01 .feature-item .con-img .pop2{margin-left:100px;}
  .sec02 .feature-item .con-img .pop1{display:none;}
  .sec02 .feature-item .con-img .pop2{left:50%;margin-left:-50%;margin-top:0;bottom:110px;}
  .sec02 .feature-item .con-img .pop3 {top: 70px;margin-top: 0;right: auto;left: 50%;margin-left: 130px;}
  .sec03 .feature-item .con-img .pop2 {
    position: absolute;
    top: 50%;
    right: auto;
    width: 300px;
    /* margin-top: 5%; */
    left: 50%;
    margin-left: -300px;
    margin-top: 30px;
}
.sec03 .feature-item .con-img .pop1 {
  position: absolute;
  top: 50%;
  /* right: auto; */
  width: 200px;
  margin-top: -10px;
  left: 50%;
  margin-left: 40px;
}
.sec04 .feature-item .con-img .pop3{right:60px;}
.sec05 .feature-item .con-img .pop1{margin-left:-270px}
.sec05 .feature-item .con-img .pop3{margin-left:-330px;}
.sec05 .feature-item .con-img .pop2{margin-left:100px;}
  
}

@media (max-width:768px){
  #features-page .feature-item .con-txt{padding:0 20px;}

  .sec04 .feature-item .con-img .pop3{right:auto;left:20px;width: 60vw;margin-top:-20vw;}
  .sec04 .feature-item .con-img .pop1{display:none;}
  .sec04 .feature-item .con-img .pop2{left:auto;right:5vw;width:25vw;}
  .sec05 .feature-item .con-img .pop3{margin-left: 0;width: 30vw;left: 30px;bottom: 150px;}
  .sec05 .feature-item .con-img .pop1{bottom: 80px;left: 20px;margin-left: 0;width: 30vw;}
  .sec05 .feature-item .con-img .pop2 {width: 30vw;margin-left: 0;right: 0px;left: auto;bottom: 100px;}
  /* #features-page .feature-item .con-img:has(.m-only2) .m-only{display:none !important;}
  #features-page .feature-item .con-img .m-only2{display:block !important;} */
}

@media (max-width:500px){
  .feature-item .con-img img{width:60vw;}

  .sec01 .feature-item .con-img .pop1 {width: 37vw;margin-left: 0;left: -10px;margin-top:-20px;}
  .sec01 .feature-item .con-img .pop2 {width: 37vw;margin-left: 0;right: -30px;left:auto;}
  .sec02 .feature-item .con-img .pop3{width: 20vw;
    margin-left: 25vw;}
  .sec02 .feature-item .con-img .pop2{margin-left: 0;
    left: -15px;
    width: 60vw;
    bottom: 20vw;}

    .sec03 .feature-item .con-img .pop2 {
      width: 55vw;
      left: -50px;
      margin-left: 0;
      top: auto;
      margin-top: 0;
      bottom: 10vw;
  }
  .sec03 .feature-item .con-img .pop1{
    left: auto;
    margin-left: 0;
    right: 0;
    width: 35vw;
  }
}