@charset "utf-8";
html, body { font-size: 16px; }




/*--------------------------------------1300----------------------------------*/
@media screen and (max-width:1300px) {
/*--------------------------------------header----------------------------------*/
#header nav #gnb li {width: 110px;height: 74px;}
#header .depth_toggle {
    top: 70px;
}
#header nav .depth_toggle .sub_nav li a {font-size: 1rem; word-break: inherit;}
#header nav .depth_toggle .sub_nav {width: 110px;}


/*--------------------------------------visual----------------------------------*/
.bx-wrapper .bx-pager,
.bx-wrapper .bx-controls-auto {
    bottom: 3rem !important;
    left: 3rem !important;
}
#fp-nav.fp-right {
    left: 1vw;
}
.sec1::before {
    display: none;
}

/*---------------------------------------main-----------------------------------*/
  .site-header {
    height: 78px;
    padding: 0 clamp(28px, 3vw, 46px);
    gap: 28px;
  }

  .brand {
    width: 164px;
    flex-basis: 164px;
  }

  .desktop-nav {
    gap: clamp(30px, 3.6vw, 54px);
    margin-right: 24px;
    font-size: 15px;
  }


  .service-showcase {
    grid-template-columns: minmax(300px, 31vw) minmax(0, 69vw);
  }

 

  .service-tabs {
    width: min(100%, 300px);
  }

  .rental-showcase {
    grid-template-columns: minmax(300px, 30vw) minmax(0, 1fr);
  }

  .service-dots, .product-dots {
    right: calc(56% - (var(--web-width) / 2) + 40px);
  }
    .service-slide {
        flex: 0 0 380px;
    }
    
}

/*--------------------------------------1200----------------------------------*/
@media screen and (max-width:1200px) {
  /* .snap-panel{
    height: auto !important;
  } */
  .service-hero{
    padding: 6rem 2rem;
  }
.service-overview{
  grid-template-rows: 1fr;
}
    .inspection-hero {
        padding: 6rem 2rem 3rem;
    }
.rental-section{
  grid-template-rows: 1fr;
  height: auto;
}
.service-dots, .product-dots {
   display: none;
}

.product-grid{
      padding-right: calc((100vw - 82%) / 2 + 32px);
}
  .rental-showcase{
    grid-template-columns: 1fr;
  }
  .rental-copy{
    flex-direction: row;
    gap: 4rem;
      height: max-content;
  }
  .product-stage{
    height: max-content;
    margin-right: 0;
  }
  .service-showcase{
    grid-template-columns: 1fr;
    height: fit-content;
  }
  .service-copy{
    padding: 2rem;
    width: 100%;
  }
  .service-stage{
    height: fit-content;
    margin-right: 0;
    padding: 40px 1.5rem;
  }
  .service-overview{
    height: auto;
  }
.service-slide {
      flex: 1;
      min-height: 260px;
    }
.service-track{
  transform: none;
}
    .service-next, .product-next{
      display: none;
    }
.rental-hero-copy{
  padding: 6rem 2rem 2rem;
}


.product-stage::-webkit-scrollbar {
        display: none;              /* Chrome/Safari 스크롤바 숨김 */
    }


}

/*--------------------------------------1100----------------------------------*/
@media screen and (max-width:1100px) {
  


}

/*--------------------------------------1024----------------------------------*/
@media screen and (max-width:1024px) {
    

/********************************* main *******************************/


.service-track{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  width: 100%;
}
.sec_maintenance .split-section {
    position: relative;
    height: auto; 
    min-height: 100svh;
}
.sec_maintenance .split-section::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background-image: 
        linear-gradient(90deg, rgba(1, 7, 18, 0.85) 0%, rgba(1, 10, 26, 0) 100%),
        linear-gradient(180deg, 
            rgba(1, 7, 18, 0) 0%,      
            rgba(1, 10, 26, 0.5) 50%,  
            rgba(1, 10, 26, 1) 95%,    
            #010a1a 100%           
        ),
        url(../images/main/inspection-bg.png);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed; /* 스크롤 시 배경 고정 */
  aspect-ratio: 16 / 9;
}

.inspection-points ul{
  opacity: 1 !important;
  transform: none !important;
}
.inspection-points{
  grid-template-columns: 1fr;
  gap: 2rem;
  width: 100%;
}
.inspection-points article{
      border-bottom: 1px solid rgba(255, 255, 255, .22);
      border-right: 0;
      height: fit-content;
      padding: 2rem 0;
}
.inspection-points article:last-child{
  border-bottom: 0;
}
.product-grid {
    padding: 0 2rem;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    transform: none;
    width: 100%;
}

.inspection-points .material-symbols-outlined{
  color: #fff;
}
.inspection-points article::after{
  background: none;
}

 .inspection-points article:hover,
    .inspection-points article:focus-within {
        z-index: unset;
        color: unset;
        background: unset;
    }

    .inspection-points article:hover em,
    .inspection-points article:focus-within em {
        opacity: unset;
        transform: none;
    }

    .inspection-points article:hover .material-symbols-outlined,
    .inspection-points article:focus-within .material-symbols-outlined {
        opacity: unset;
        transform: none;
        color: unset;
        border-color: unset;
        background: unset;
    }

    .inspection-points article:hover strong,
    .inspection-points article:focus-within strong,
    .inspection-points article:hover > span:not(.material-symbols-outlined),
    .inspection-points article:focus-within > span:not(.material-symbols-outlined) {
        color: unset;
        opacity: unset;
        transform: none;
    }

    .inspection-points article:hover ul,
    .inspection-points article:focus-within ul {
        opacity: unset;
        transform: none !important;
        transition: none !important;
    }

    .inspection-points article:hover::after,
    .inspection-points article:focus-within::after {
        opacity: unset;
        background: none;
    }
    .inspection-points article {
        transition: none !important;
    }
.inspection-points article > span:not(.material-symbols-outlined){
  max-width: 100%;
  min-height: 64px;
}
.inspection-points .material-symbols-outlined{
  width: 40px;
  height: 40px;
}
.rental-hero::after{
  bottom: -9px;
}
}

/*--------------------------------------980----------------------------------*/
@media screen and (max-width:980px) {
 

}

/*--------------------------------------860----------------------------------*/
@media screen and (max-width:860px) {
  

}

/*--------------------------------------800----------------------------------*/
@media screen and (max-width:800px) {

}

/*--------------------------------------760----------------------------------*/
@media screen and (max-width:760px) {
 .rental-copy{
  flex-direction: column;
  gap: 2rem;
 }

.service-tabs,
.rental-tabs{
  display: none;
}
.sec_maintenance .inspection-hero .split-copy p br{
  display: none;
}
}

/*--------------------------------------640----------------------------------*/
@media screen and (max-width:640px) {
.product-stage{
  overflow-x: auto;           
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch; 
  scrollbar-width: none; 
  }


  .split-section::after,
  .rental-hero::after{
    display: none;
  }

}

/*--------------------------------------580----------------------------------*/
@media screen and (max-width:580px) {
     html, body {
        height: auto;
        overflow: auto;
    }

    .fp-section {
        height: auto !important;
    }

  
    .hero{
      height: auto;
    }
.service-track{
  grid-template-columns: 1fr;
}

}


/*--------------------------------------480----------------------------------*/
@media screen and (max-width:480px) {
   .rental-tabs{
    grid-template-columns: 1fr;
   }
.proof-strip{
  grid-template-columns: 1fr;
}
.proof-strip div + div {
  border-left: 0;
  border-top: 1px solid rgba(255, 255, 255, .2);
}
}

/*--------------------------------------380----------------------------------*/
@media screen and (max-width:380px) {


}