/* BASIC css start */
@charset "UTF-8";

* 
{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* »óÇ° Å×ÀÌºí ½ºÅ¸ÀÏ */
#bike1_product .product-table 
{
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    border-collapse: separate;
    border-spacing: 0;
}
        
#bike1_product .product-cell 
{
    
}
        
/* »óÇ° Ä«µå */
#bike1_product .product-card {
    position: relative;
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    transition: box-shadow 0.3s ease;
}

#bike1_product .product-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* À̹ÌÁö ÄÁÅ×ÀÌ³Ê */
#bike1_product .product-image-wrapper 
{
    position: relative;
    width: 100%;
    overflow: hidden;
    border-radius: 8px;
}

#bike1_product .product-image-wrapper a img
{
    border-radius: 8px;
}

#bike1_product .product-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.25s ease;
}

#bike1_product .product-card:hover .product-image {
    transform: scale(1.1);
}

/* Ç°Àý ¿À¹ö·¹ÀÌ */
#bike1_product .soldout-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
}

#bike1_product .soldout-text {
    color: #fff;
    font-size: 18px;
    font-weight: 700;
    text-transform: uppercase;
}

/* »óÇ° Á¤º¸ */
#bike1_product .product-info {
    padding: 16px;
}

#bike1_product .product-name 
{
    font-size: 14px;
    color: #111;
    line-height: 1.5;
    margin-bottom: 8px;
    min-height: 42px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
        
#bike1_product .product-name a 
{
    font-size: 1.125rem;
    line-height: 1.75rem;
    font-weight: 600;
    color: #222 !important;
    line-height: 1.5 !important;
    text-decoration: none;
}
        
#bike1_product .product-name a:hover 
{
    color: #666;
}

/* ±¸ºÐ¼± - È£¹ö ½Ã »ö»ó º¯°æ */
#bike1_product .product-divider {
    display: block;
    content: "";
    height: 1px;
    background: #eaeaea;
    margin-top: 9px;
    margin-bottom: 12px;
    transition: all 0.55s ease;
}

#bike1_product .product-card:hover .product-divider 
{
    background: #a8a8a9;
}

/* °¡°Ý */
#bike1_product .product-price 
{
    font-size: 16px;
    font-weight: 700;
    color: #111;
    margin-bottom: 16px;
}

#bike1_product .price-consumer {
    font-size: 13px;
    color: #999;
    text-decoration: line-through;
    margin-right: 6px;
}

#bike1_product .price-sell 
{
    color: #d73434;
}

/* ¾×¼Ç ¹öÆ° - È£¹ö ½Ã Ç¥½Ã */
#bike1_product .product-actions {
    display: flex;
    align-items: center;
    justify-content: end;
    opacity: 0;
    transform: translateY(10px);
    transition: all 0.3s ease;
}

#bike1_product .product-card:hover .product-actions {
    opacity: 1;
    transform: translateY(0);
}

#bike1_product .action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    margin: 0 4px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.2s ease;
}

#bike1_product .action-btn:hover 
{
    background: #404040;
    border-color: #404040;
}

#bike1_product .action-btn:hover svg 
{
    stroke: #fff;
}

#bike1_product .action-btn svg 
{
    width: 18px;
    height: 18px;
    stroke: #111;
    transition: stroke 0.2s ease;
}
        
/* Swiper Á¦¾î */
/* ¹ÝÀÀÇü À̹ÌÁö ºñÀ² À¯Áö (1920:600 = 16:5) */
.main-visual-wrapper 
{
    position: relative;
    width: 100%;
    overflow: visible;
    background: #f0f0f0;
}

.main-visual-wrapper .swiper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.swiper-slide {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

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

@media (min-width: 1920px) 
{
    /* swiper-slide ³»ºÎÀÇ ¸ðµç À̹ÌÁö¿¡ object-fit: none Àû¿ë */
    .swiper-slide img 
    {
        object-fit: none !important; /* !important¸¦ »ç¿ëÇÏ¿© ´Ù¸¥ ½ºÅ¸ÀϺ¸´Ù ¿ì¼± Àû¿ë */
        object-position: center center; /* none Àû¿ë ½Ã À̹ÌÁö Áß¾Ó Á¤·Ä (¼±Åà »çÇ×) */
    }
}

/* Prev/Next ¹öÆ° - SVG È­»ìÇ¥ ¾ÆÀÌÄÜ, ȸ»ö ¹è°æ, ¿ÞÂÊ 10% ¿À¸¥ÂÊ 9% À§Ä¡ */
.swiper-button-prev, .swiper-button-next 
{
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%);
    z-index: 20 !important;
    width: 40px !important;
    height: 50px !important;
    background: rgba(150, 150, 150, 0.3);
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.swiper-button-prev 
{
    left: 2% !important;
}

.swiper-button-next {
    right: 1.75% !important;
}

.swiper-button-prev:hover, .swiper-button-next:hover 
{
    background: rgba(0, 0, 0, 0.35) !important;
}

/* SVG ¾ÆÀÌÄÜ ½ºÅ¸ÀÏ */
.swiper-button-prev svg, .swiper-button-next svg 
{
    width: 24px !important;
    height: 24px !important;
    stroke: white !important;
    fill: none !important;
    stroke-width: 2 !important;
}

/* Swiper ±âº» ¾ÆÀÌÄÜ Á¦°Å */
.swiper-button-prev::after, .swiper-button-next::after 
{
    content: '' !important;
}

/* ÆäÀÌÁö³×ÀÌ¼Ç ÄÁÅ×ÀÌ³Ê - Áß¾Ó Á¤·Ä */
.swiper-pagination 
{
    position: absolute;
    bottom: 20px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: auto !important;
    display: flex;
    gap: 6px;
    justify-content: center;
}

/* ÆäÀÌÁö³×ÀÌ¼Ç ¹öÆ° - ȸ»ö °è¿­·Î º¯°æ */
.swiper-pagination-bullet 
{
    background: rgba(120, 120, 120, 0.4) !important;
    opacity: 1 !important;
    width: 24px !important;
    height: 5px !important;
    margin: 0 !important;
    padding: 0 !important;
    transition: all 0.3s ease !important;
    border: none !important;
    border-radius: 0 !important;
    cursor: pointer !important;
    flex-shrink: 0 !important;
}

.swiper-pagination-bullet-active 
{
    background: rgba(0, 0, 0, 0.7) !important;
    width: 40px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
}

/* ÇÁ·Î±×·¡½º ¹Ù - ȸ»ö ¹è°æ, ÁøÇÑ È¸»ö ÁøÇ൵ */
.progress-bar-wrapper 
{
    position: absolute;
    bottom: 45px;
    left: 50%;
    transform: translateX(-50%);
    width: auto;
    min-width: 220px;
    z-index: 10;
}

.progress-bar-container 
{
    height: 3px;
    background: rgba(120, 120, 120, 0.3);
    overflow: hidden;
    width: 100%;
}

.progress-bar-fill 
{
    height: 100%;
    background: rgba(0, 0, 0, 0.45);
    width: 0%;
    transition: width 0.1s linear;
}

/* ¼û°ÜÁø ½½¶óÀ̵å */
.swiper-slide-hidden 
{
    display: none !important;
}

/* ¸ð¹ÙÀÏ ¹ÝÀÀÇü Á¶Á¤ */
@media (max-width: 1023px)
{
    .swiper-pagination 
    {
        /* ÆäÀÌÁö³×À̼ÇÀ» ´õ ¾Æ·¡·Î ³»¸² (±âÁ¸ PC: 20px, ¸ð¹ÙÀÏ: 14px -> 20px Á¤µµ·Î ´Ù½Ã Á¶Á¤) */
        bottom: 14px !important; /* ±âÁ¸ 768px ½ºÅ¸ÀÏ À¯Áö */
    }
}
@media (max-width: 768px) 
{
    .swiper-button-prev, .swiper-button-next 
    {
        width: 40px;
        height: 40px;
    }

    .swiper-button-prev svg, .swiper-button-next svg 
    {
        width: 20px;
        height: 20px;
    }

    .swiper-button-prev 
    {
        left: 10%;
    }

    .swiper-button-next 
    {
        right: 9%;
    }

    .swiper-pagination 
    {
        bottom: 14px !important;
    }

    .swiper-pagination-bullet 
    {
        width: 20px;
        height: 4px;
    }

    .swiper-pagination-bullet-active 
    {
        width: 28px;
    }

    .progress-bar-wrapper 
    {
        bottom: 16px;
        min-width: 150px;
    }
}
        
/* À̺¥Æ® ¹è³Ê Á¦¾î 
.small-banner-container 
{
  width: 100vw;
  max-width: 1440px;
  margin: 0 auto;
}

.small-banner-container ul 
{
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  padding: 0;
  margin: 0;
  list-style: none;
}

.small-banner-container li 
{
    width: 50%;
    flex: 0 0 50%;
}

.small-banner-container li a 
{
    display: block;
    overflow: hidden;
}

.small-banner-container li a img 
{
    transition: transform 0.3s ease;
}*/

/* 1200px ÀÌ»ó: 50% / 50% °¡·Î ¹èÄ¡   
@media (min-width: 1200px) 
{
    .small-banner-container li 
    {
        width: 50%;
        flex: 0 0 50%;
    }
    .small-banner-container li a:hover img 
    {
      transform: scale(1.0125);
    }
}
@media (max-width: 1440px) 
{
    .small-banner-container 
    {
        margin: 0;
    }
}*/

/* 1200px ¹Ì¸¸ÀÏ ¶§ ±â±â ½ÇÁ¦ Æø¿¡ ¸ÂÃß±â */
/*@media (max-width: 1200px) 
{
    .small-banner-container 
    {
        width: 100vw; 
        max-width: none;
        margin: 0;
    }
    
    .small-banner-container li 
    {
        width: 100%;   
        display: block;   
    }
    
    .small-banner-container li a img 
    {
        width: 100%;          
        height: auto;
        display: block;
    }
}*/
/* À̺¥Æ® ¹è³Ê Á¦¾î */

/*  ¼­ºñ½º ¼½¼Ç(ǪÅÍ À§)  */
/* ¼Ò¼È ¾ÆÀÌÄÜ */
.social-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #d9d9d9;
  color: #4a4a4a;
  transition: all 0.3s ease;
  cursor: pointer;
  text-decoration: none;
  filter: grayscale(100%);
}

/* YouTube - »ç°¢Çü ¹è°æ */
.social-icon[data-icon="youtube"] 
{
  border-radius: 8px;
}

/* Hover Effects */

/* Facebook - ÆĶõ»ö */
.social-icon[data-icon="facebook"]:hover 
{
  background-color: #1877f2;
  color: white;
  filter: grayscale(0%);
  transform: scale(1.05);
}

/* ³×À̹ö */
.social-icon[data-icon="naver"]:hover 
{
  background-color: #00c73c;
  color: white;
  transform: scale(1.05);
  filter: grayscale(0%);
}

/* YouTube - »¡°£»ö */
.social-icon[data-icon="youtube"]:hover 
{
  background-color: #ff0000;
  color: white;
  filter: grayscale(0%);
  transform: scale(1.05);
}

/* Instagram - ±×¶óµ¥ÀÌ¼Ç */
.social-icon[data-icon="instagram"]:hover 
{
  background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
  color: white;
  filter: grayscale(0%);
  transform: scale(1.05);
}

.more-link 
{
    font-size: 14px;
    color: #444444;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    /*gap: 4px;*/
}

.more-link-arrow 
{
    display: inline-block;
    margin-left: -13px;
    transition: margin-left 0.35s ease;
    opacity: 0;
}

.more-link:hover .more-link-arrow 
{
    margin-left: 4px;
    opacity: 1;
}
/*  ¼­ºñ½º ¼½¼Ç(ǪÅÍ À§)  */

/* ³³Ç°½ÇÀû ¼½¼Ç */
#performance .carousel-container 
{
  position: relative;
  overflow: hidden;
}

#performance .carousel-swiper 
{
    margin: 0;
    padding: 0;
}

/* ¿À¸¥Âʸ¸ ´ÙÀ½ ½½¶óÀ̵尡 º¸À̵µ·Ï padding-right Ãß°¡ */
#performance .carousel-swiper .swiper-wrapper {
  display: flex !important;
  gap: 0px !important;
  padding-right: 0px !important;
}

/* À̹ÌÁö Å©±â Ãà¼Ò: calc((100% - 40px) / 3.2)·Î º¯°æ */
#performance .carousel-swiper .swiper-slide 
{
  width: calc((100% - 30px * 2) / 3) !important;
  overflow: hidden !important;
  border-radius: 0px;
  aspect-ratio: 16 / 9 !important;
  transition: all 0.35s ease-out
}

#performance .carousel-swiper .swiper-slide:hover
{
    border-radius: 0 60px 0 60px;
}

#performance .carousel-swiper .swiper-slide a {
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

#performance .carousel-swiper .swiper-slide img {
  width: 100%;
  height: 100%;
  object-fit: fill;
  transition: all 0.65s ease-out;
}

#performance .carousel-swiper .swiper-slide:hover img 
{
    transform: scale(1.015);
    filter: brightness(0.675);
}


/* ÇÁ·Î±×·¡½º¹Ù */
#performance .progress-bar-carousel 
{
  height: 2px;
  background-color: #e0e0e0;
  margin-top: 32px;
  position: relative;
  width: 100%;
}

/* ÇÁ·Î±×·¡½º¹Ù ÃʱⰪ 0%¿¡¼­ ½ÃÀÛ */
#performance .progress-fill-carousel 
{
  height: 100%;
  background-color: #3c3c3c;
  transition: width 0.6s ease-out;
  width: 0%;
}

#performance .nav-button {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid #3c3c3c;
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #3c3c3c;
  font-size: 18px;
  transition: all 0.45s ease;
}

#performance .nav-button:hover 
{
    color: white;
    background-color: #4b4b4b;
    border: none;
}

#performance .desc-text {
  line-height: 1.6;
}

/* ¹ÝÀÀÇü ¼³Á¤ */
/* 1024px ¹Ì¸¸ (¸ð¹ÙÀÏ/ÅÂºí¸´) ½ºÅ¸ÀÏ ÅëÇÕ: 1023px ÀÌÇÏ */
@media (max-width: 1023px) 
{ 
    /* ¸ð¹ÙÀÏ/ÅÂºí¸´¿¡¼­ ÁÂ¿ì ¿©¹éÀ» ¹«½ÃÇÏ°í Àüü ³Êºñ·Î È®Àå */
    #performance .carousel-swiper 
    {
        margin: 0 -24px !important; 
        padding: 0 24px !important; 
    }
    
    /* 769px ~ 1023px (ÅÂºí¸´)¿¡¼­ 3°³ ³ëÃâ CSS °è»ê */
    #performance .carousel-swiper .swiper-slide 
    {
        width: calc((100% - 20px * 2) / 3) !important; // 3°³ ³ëÃâ, °£°Ý 20px
    }
}


/* 1024px ÀÌ»ó (PC) ½ºÅ¸ÀÏ */
@media (min-width: 1024px)
{
    /* PC ȯ°æ (HTML ÄÁÅ×À̳Ê: lg:px-0) */
    #performance .carousel-swiper
    {
        /* ¸¶Áø Á¦°Å */
        margin: 0 !important; 
        /* ÄÁÅ×ÀÌ³Ê ÆеùÀÌ 0ÀÌ µÇ¾úÀ¸¹Ç·Î Swiper ÀÚü¿¡ Á¿ì 24px Æеù ºÎ¿© */
        padding-left: 0 !important; 
        padding-right: 0 !important;
    }

    /* PC ȯ°æ (1024px ÀÌ»ó)¿¡¼­ 3°³ ³ëÃâ CSS °è»ê */
    #performance .carousel-swiper .swiper-slide 
    {
        /* JSÀÇ spaceBetween: 30¿¡ ¸ÂÃã.*/
        width: calc((100% - 30px * 2) / 3) !important; // 3°³ ³ëÃâ, °£°Ý 30px
    }
}
@media (max-width: 768px) 
{
  #performance .carousel-swiper .swiper-slide 
  {
    width: calc((100% - 10px) / 2) !important;
  }

  #performance .carousel-swiper .swiper-wrapper 
  {
    /* ´ÙÀ½ ½½¶óÀ̵å ÇÁ¸®ºä Æеù Á¦°Å */
    padding-right: 0px !important; 
  }

  #performance .nav-button 
  {
    width: 36px;
    height: 36px;
    font-size: 14px;
  }

  #performance .carousel-section 
  {
    padding: 0 16px;
    padding-top: 48px;
    padding-bottom: 48px;
  }
  
     /* ¸ð¹ÙÀÏ¿¡¼­´Â hover radius Àý¹ÝÀÌÇÏ */
    #performance .carousel-swiper .swiper-slide:hover
    {
        border-radius: 0 25px 0 25px;
    }
}
/*  ³³Ç°½ÇÀû  */

div.guide_line
{
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    height: 1px;
    background-color: rgb(229 231 235 / var(--tw-border-opacity, 1))
}

h2.highlighter1, h2.highlighter2
{
    font-family: "Poppins", sans-serif;
}
h2.highlighter1::after, h2.highlighter2::after
{
    content: '';
    position: absolute;
    display: block;
    bottom: 2px;
    left: 0;
    height: 18px;
    /*background: linear-gradient(to top, #dee4f9 40%, transparent 40%);*/
    width: 0; 
    z-index: -1;
    /* Æ®·£Áö¼Ç ¼³Á¤: AOS Ŭ·¡½º Ãß°¡ ½Ã 1.5ÃÊ µ¿¾È ºÎµå·´°Ô ³Êºñ º¯È­ */
    transition: width 1s linear; 
    transform-origin: left; /* ¿ÞÂÊ¿¡¼­ ½ÃÀÛ */
}
/* CSS ¼öÁ¤: È­¸é¿¡ º¸ÀÏ ¶§ Àû¿ëµÉ Ŭ·¡½º Á¤ÀÇ */
h2.highlighter1.aos-animate::after , h2.highlighter2.aos-animate::after
{
    width: 100%; /* AOS°¡ Ŭ·¡½º¸¦ Ãß°¡ÇÏ¸é ³Êºñ°¡ 100%·Î ¾Ö´Ï¸ÞÀÌ¼Ç */
}

/*h2.highlighter1[data-aos].aos-animate 
{
    opacity: 1 !important;
    transform: none !important;
}*/

h2.highlighter1::after
{
    background: #dee4f9;
}
h2.highlighter2::after
{
    background: #f5d8d8;
}
/* BASIC css end */