#mainVisual {
    width:100%;
    height:calc(100vh - var(--header-heihgt));
    position:relative;
    overflow:hidden;
}

.main-visual-slide, .main-visual-slide .slick-list, .main-visual-slide .slick-track, .main-visual-item {
    height:100%;
}
.main-visual-img {
    position:absolute;
    width:100%;
    height:100%;
}
.main-visual-item .main-visual-img {
  transform:scale(1.1,1.1) rotate(0.002deg)
}
.main-visual-item.active .main-visual-img {
  background-size:cover !important; transition:transform 2.8s linear; transform:scale(1.0, 1.0);
}
.main-visual-item .visual-txt-con 
{display:flex; align-items:center; justify-content:center; flex-direction:column; z-index:9999; position:relative; text-align:center;}
.main-visual-item .visual-txt-con h2 
{font-size:6rem; color:#fff; font-weight:800}
.main-visual-item .visual-txt-con p 
{font-size:2.4rem; color:#fff; font-weight:200; margin:6rem 0;}

.main-visual-slide .slick-dots 
{position:absolute; bottom:22rem; width:100%; display:flex; justify-content: center; align-items:center; z-index:9999;;}
.main-visual-slide .slick-dots li
{margin:0 1rem; padding:1rem; cursor:pointer; border:1px solid transparent; border-radius:50px; line-height:0; transition:all 0.3 ease;}
.main-visual-slide .slick-dots li button
{width:1rem; height:1rem; border-radius:50px; background:#fff; display:inline-block; font-size:0;}
.main-visual-slide .slick-dots li.slick-active 
{border-color:#fff;}
.main-visual-slide .slick-dots li:hover 
{border-color:#fff;}

.play-pause-controls 
{position:absolute; bottom:22.5rem; left:55%; display:flex; z-index:9999;}
.play-pause-controls .play-pause-btn 
{font-size:1.9rem; color:#fff; cursor:pointer;}
.play-pause-controls .play-pause-btn.play-btn 
{display:none;}
.play-pause-controls .play-pause-btn.pause-btn
{display:block; font-size:2.3rem;}
.mouse-scroll 
{position:absolute; bottom:-12.5rem; width:25rem; height:25rem; background:rgba(0,0,0,0.5); border-radius:50%; left:calc(50% - 12.5rem); z-index:9999;}
.mouse-scroll .scroll-con 
{position:relative; display:flex; flex-direction:column; justify-content:center; align-items:center; width:100%; height:50%; animation:mouseScroll infinite 2s ease-in-out;}
.mouse-scroll .scroll-con .txt 
{font-size:1.4rem; color:#fff; font-weight:400; margin-top:1.5rem;}
@keyframes mouseScroll {
  0% {
    transform:translateY(0)
  }
  50% {
    transform: translateY(10px)
  }
  100% {
    transform: translateY(0px)
  }
}

.main-product
{padding:13rem 0; background-image:url('../img/main_product_bg.png'); background-repeat:no-repeat; background-position:right bottom; overflow:hidden;}

.main-product .container 
{position:relative;}
.main-product-top  
{display:flex; justify-content: space-between; align-items:end; flex-wrap:wrap; border-bottom:1px solid #ddd;}
.main-product-top .left-con 
{width:50%; display:flex; align-items:center; justify-content:space-between;}
.main-product-top .left-con h2 
{font-size:3.6rem; color:var(--main-color); font-weight:800;}
.main-product .slick-dots {
  position:absolute;
  top:1.8rem;
  right:0;
  width:50%;
  display:flex;
  justify-content: end;
  align-items: center;
}
.main-product .slick-dots li 
{border:1px solid #ddd; border-radius:10px 10px 0 0;  padding:1.5rem 3rem; border-bottom:none; background:#fff; cursor:pointer; transition: all 0.3s ease;}
.main-product .slick-dots li strong 
{font-size:1.6rem; color:#222; font-weight:500; transition:all 0.3s ease;}
.main-product .slick-dots li.slick-active,
.main-product .slick-dots li:hover
{background:var(--main-color);}
.main-product .slick-dots li.slick-active strong,
.main-product .slick-dots li:hover strong
{color:#fff;}

.main-product-top .main-prd-controls 
{position:flex;}
.main-product-top .main-prd-controls button {
  display:inline-block; width:6.4rem; height:6.4rem;
}
.main-product-top .main-prd-controls button.prev
{background-image:url('../img/main_product_left.png')}
.main-product-top .main-prd-controls button.next
{background-image:url('../img/main_product_right.png')}



.main-product-tab-con 
{margin-top:9rem; position:static !important;}
.main-product-tab-con .slick-list 
{overflow:visible;}

.main-product .main-prd-con
{ display:flex !important; align-items: center;}
.main-prd-con .product-left-con 
{width:50%;  padding-right:10%;}
.main-prd-con .prd-des .prd-tit 
{font-size:3.2rem; color:#101010; font-weight:700; }
.main-prd-con .prd-des .prd-txt 
{font-size:2rem; color:#3c3c3c; font-weight:300; margin:4rem 0; line-height:1.5; word-break:keep-all;;}
.main-prd-con .prd-des .prd-btn 
{font-size:1.6rem; color:#666666; border:1px solid #666666; padding:1rem 3rem; border-radius:25px; display:inline-block; transition:all 0.3s ease;}
.main-prd-con .prd-des .prd-btn:hover 
{background:var(--main-color); color:#fff;}

.main-prd-con .product-right-con 
{width:72rem; height:360px;}
.main-prd-con .prd-img 
{width:100%; height:100%; position:relative; z-index:1; border-radius:15px;}
.main-prd-con .prd-deco-box 
{position:absolute; width:25rem; height:15rem; bottom:-3rem; right:-3rem; background:var(--sub-color); border-radius:15px;}


.main-banner-con 
{display:flex; flex-wrap:wrap;}
.main-banner-con .main-contact-con 
{background-image:url('../img/main_contact_bg.jpg'); width:50%; }
.main-banner-con .main-location-con 
{background-image:url('../img/main_location_bg.jpg'); width:50%;}
.main-banner-con .main-contact-con a
{padding:9rem 24rem; display:block;}
.main-banner-con .main-location-con a 
{padding:9rem 5rem; display:block;}
.main-banner-con .banner-txt-con .tit 
{font-size:3.2rem; font-weight:700; color:#fff; border-bottom:1px solid #ffffff85; padding:0 0 2rem; margin:0 0 3rem}
.main-banner-con .banner-txt-con .txt 
{font-size:2.4rem; color:#fff; font-weight:200; line-height:1.5;}
.main-banner-con .banner-txt-con .more-btn 
{font-size:1.5rem; color:#fff; font-weight:300; border:1px solid #fff; border-radius:50px; padding:1.5rem 4rem; display:inline-block; margin-top:4rem; transition:all 0.3s ease;}

.main-banner-con a:hover .banner-txt-con .more-btn 
{background:var(--main-color);}



@media screen and (max-width: 1300px) {
  /* visual */
    #mainVisual {
      height: 80vh;
    }
      .visual-txt-con {padding: 0 2rem;}
    .main-visual-slide .slick-dots {
      bottom: 18rem;
    }
    .play-pause-controls {
      left: 58%;
    bottom: 18.5rem;
    }
    /* product */
  #mainProduct {
    padding: 13rem 2rem;
  }
  .main-prd-con .product-left-con {
    padding-right: 3%;
  }
  .main-product-top .left-con {
    width: 40%;
  }
 .main-product .slick-dots {
    width: auto;
  }
  /* contact */
.main-banner-con .main-contact-con a,
.main-banner-con .main-location-con a {
  padding: 5rem;
}
/* footer */
#footer .container {width: 100%; padding: 0 2rem;}
#footer .f-detail-con {padding: 2rem; gap: 2rem;}

}

@media screen and (max-width: 1240px) {
  *{word-break: keep-all;}

  /* visual */
  .main-visual-slide .slick-dots {
      padding-right: 5rem;
    }
  .mouse-scroll {
    width: 20rem;
    height: 20rem;
    left: 50%; bottom: -10rem;
    transform: translate(-50%);
  }
  /* product */
  /* 탭버튼들 줄바꿈하기 */
  .main-product-top .left-con {width: 100%;}
  .main-product .slick-dots {
    top: 10rem;
    right: auto;
    justify-content: flex-start;  
    padding: 0;
  }
  .main-product-tab-con {
    margin-top: 16rem;
  }
}

@media screen and (max-width: 1024px) {
#header {height: 70px;}
#logo a {width: 100%;}
 /* visual */
  #mainVisual {
      height: 60vh;
  }
  .main-visual-item .visual-txt-con h2 {
    font-size: 5rem;
  }
  .main-visual-item .visual-txt-con p {
    margin: 3rem 0;
    font-size: 2.1rem;
  }
 .main-visual-slide .slick-dots {
   bottom: 12rem;
 }
 .play-pause-controls {
   left: 58%;
   bottom: 12.5rem;
 }
  .mouse-scroll { zoom: 0.8; }

  /* products */
.main-product-top .left-con h2 {font-size: 3.2rem;}
.main-prd-con .prd-des .prd-tit {font-size: 2.8rem;}
.main-prd-con .prd-des .prd-txt {font-size: 1.8rem;}

  /* contact */
.main-banner-con .banner-txt-con .tit {font-size: 3.2rem;}
.main-banner-con .banner-txt-con .txt {font-size: 2rem;}
  /* footer */
  #footer .f-detail-con .f-info-con li span:after {
    display: none;
  }
  #footer .f-detail-con .f-info-con li span {
    margin: 0;
    padding-right: 2rem;
    line-height: 1.2;
  }
  #footer .f-detail-con .copy {
    font-size: 1.2rem;
  }
  #footer .f-detail-con .f-info-con ul {display: flex; flex-flow: row wrap; justify-content: center;}
  #footer .f-detail-con .f-info-con li {width: 100%;}

  /* sitemap */

}
@media screen and (max-width: 767px) {

  /* visual */
  .main-visual-item .visual-txt-con h2 {
    font-size: 3.8rem;
    line-height: 1.4;
  }
  .main-visual-slide .slick-dots {
    zoom: 0.8;
    bottom: 13em;
  }
  .play-pause-controls {
    zoom: 0.8;
    bottom: 13.5rem;   
  }

  /* product */
    #mainProduct {padding: 8rem 0; text-align: center;}
  .main-prd-con .prd-des .prd-txt {
    font-size: 1.8rem;
  }
  .main-product .slick-dots li {
    padding: 1.5rem 2.5rem;
  }
  .main-product-tab-con {
    margin-top: 19rem;
  }
  
  /* contact */
.main-banner-con {
  flex-flow: column;
}
.main-banner-con .main-contact-con,
.main-banner-con .main-location-con {
  width: 100%;
  text-align: center;
}

#footer .f-police-con a {
  margin: 0;
  padding: 1.5rem;
}
}

@media screen and (max-width: 650px) {
  /* visual */
    .main-visual-item .visual-txt-con h2 {
    font-size: 3rem;
  }
.main-visual-slide .slick-dots li {
  padding: 0.3rem;
}
.play-pause-controls {bottom: 12.5rem;}
  /* product */
  .main-product .main-prd-con {
    flex-flow: column;
  }
  .main-prd-con .product-left-con {
    width: 100%;
    padding: 0 0 10% 0;
  }
  .main-prd-con .product-right-con {
    width: 100%;
  }
  .main-product .slick-dots {
    flex-flow: row wrap;
    padding-right: 2rem;
  }
  .main-product .slick-dots li {
    width: 50%;
    text-align: center;
}
#footer .f-detail-con .f-info-con li {display: flex; flex-flow: row wrap; gap: 1rem; align-items: center; justify-content: center;}
#footer .f-detail-con .f-info-con li span {text-align: center; }
#footer .container { display: flex; flex-flow: row wrap; justify-content: center; }
#footer .f-police-con a {display: block; width: 50%; text-align: center;}
}

@media screen and (max-width: 450px) {
/* products */
.main-product-top .main-prd-controls {zoom: 0.6;}
.main-product .slick-dots {top: 6rem; width: calc(100% - 4rem); left: 50%; transform: translate(-50%); padding: 0;}
.main-product-tab-con {margin-top: 15rem;}
.main-product .slick-dots li { width: 100%;}
.main-product-tab-con {margin-top: 25rem;}
/* contact */
.main-banner-con .main-contact-con a,
.main-banner-con .main-location-con a {padding: 5rem 2rem;}
/* footer */
#footer .f-detail-con .f-right-con {text-align: left;}

}

@media screen and (max-width: 360px) {}