@charset "utf-8";


/*메인공통*/
#main { position: relative; }
#main .inner { padding-top: 11rem; padding-bottom: 11rem; }


/*메인*/
.sec01 { position: relative; height: 1480px;}
.sec01 .line { background: linear-gradient(180deg, rgba(255, 255, 255, 0.40) 88.5%, rgba(0, 0, 0, 0.15) 100%); opacity: 1; z-index: 1; }
.sec01 .inner { justify-items: center; align-content: center; position: relative; height: 100vh; padding-top: 0; padding-bottom: 0; z-index: 1; }
.sec01 .tit { margin-bottom: 6.2rem; color: #fff; font-size: 6.6rem; text-align: center; text-transform: uppercase; }
.sec01 .scroll { justify-items: center; align-content: center; grid-gap:0; width: 4.5rem; height: 7.4rem; border-radius: 2.2rem; border: 1px solid #FFF; background: linear-gradient(180deg, rgba(255, 255, 255, 0.30) 0%, rgba(255, 255, 255, 0.00) 100%); }
.sec01 .scroll span { height: 1rem; animation: scroll-ani 2s 0s linear infinite alternate; }
.sec01 .scroll span:nth-child(2) { animation-duration: .5s; }
.sec01 .scroll span:nth-child(3) { animation-duration: 1s; }
.sec01 video.sec02_vd { opacity: .65; }

@media all and (max-width:960px) {
  .sec01{height: 980px;}
}
@media all and (max-width:480px) {
  .sec01{height: 810px;}
}
@media all and (max-width:420px) {
  .sec01 .tit{font-size: 5.8rem;line-height: 6rem}
}



.sec02 { position: relative; margin-bottom: 19rem; margin-top: -18rem; text-align: center; z-index: 1; }
.sec02 .icon { width: 10rem; }
.sec02 .tit { margin: 5rem 0 4rem; }
.sec02 .txt { font-size: 2rem; }
.video_wr{padding-top: 4rem}
.video_wr video.sec02_vd{width: 69rem;}

@media all and (max-width:960px) {
  .sec02{margin-bottom: 7rem}
}
@media all and (max-width:640px) {
  .video_wr video.sec02_vd{width: 85%;}
}
@media all and (max-width:480px) {
  .sec02{margin-bottom: 0;}
  .sec02 .tit{font-size: 4rem;line-height: 5.2rem}
}


.sec03 { }
.sec03 .inner { position: relative; }
.sec03 .inner > .tit-wr { position: absolute; top: 0; left: var(--inner-pd); }
.sec03 .box-wr { flex-direction: column; align-items: flex-start; }
.sec03 .box-wr .box .tit-wr { position: relative; padding: 0 3rem; margin-top: -7rem; z-index: 1; }
.sec03 .box-wr .box:not(:first-child) { margin-top: -10rem; }
.sec03 .box-wr .box:nth-child(odd) { margin-left: auto; }
.sec03 .box-wr .box:nth-child(odd) .tit-wr { text-align: right; }

@media all and (max-width:960px) {
  .sec03 .inner > .tit-wr{position: relative;top: inherit;left: inherit;}
  .sec03 .box-wr{padding-top: 9rem;}
  .sec03 .box-wr .box:not(:first-child){margin-top: 7rem;}
}
@media all and (max-width:640px) {
  .sec03{overflow: hidden;}
  .sec03 .box-wr .box{width: 100%;}
  .sec03 .box-wr .box:nth-child(odd){margin-left: inherit;width: 100%;}
  .img-mask{-webkit-mask-position: inherit;mask-position: inherit;}
}
@media all and (max-width:480px) {
  .sec03 .box-wr .box .tit-wr{padding: 0 2rem;margin-top: -5rem}
  .sec03 .tit-h01{font-size: 3.8rem;line-height: 4.3rem}
  .sec03 .txt{line-height: 3rem}

  .sec03 .box-wr img.sv_img{object-fit: cover;object-position: top;}
  .sec03 .box-wr img.sv_img03{height: 52rem;}
  .sec03 .box-wr img.sv_img06{height: 52rem}
}



/*제품소개*/
.sec05 { overflow-x: hidden;}
.sec05 .inner { align-items: flex-start; padding-left: 0; padding-right: 0;padding-bottom: 0 !important; }
.sec05 .tit-wr { position: relative; padding-left: var(--inner-pd); }
.sec05 .tit-wr, .sec05 .swiper-container { width: 50%; height: 100%;}
.sec05 .swiper-container{overflow: hidden;}
.sec05 .swiper-container,.sec05 .swiper-container .swiper-wrapper { min-height: 50rem; }
.sec05 .swiper-container .swiper-wrapper {align-items: flex-end;}
.sec05 .swiper-container .swiper-slide { position: relative; display: flex; justify-content: center; align-items: center; width: 30rem; height: 30rem; background-color: var(--color-bg); transition: .3s; }
.sec05 .swiper-container .swiper-slide-active { width: 50rem; height: 50rem;}
.sec05 .swiper-container .swiper-slide.sliding{transform: translateX(13rem);}
/* .sec05 .swiper-container .swiper-slide[data-swiper-slide-index="0"] {transform: translateX(-13rem);} */
/* .sec05 .swiper-container .swiper-slide.sliding {margin-left: 2rem; } */
.sec05 .swiper-container .swiper-slide .tit-s01 { position: absolute; left: 4rem; bottom: 4rem; color: #fff;}
.sec05 .swiper-container .swiper-slide img { width: auto; height: auto; }
.sec05 .swiper-navi-wr { display: flex; justify-content: center; align-items: center; position: absolute; right: 2rem; bottom: 2rem; width: auto; }
.sec05 .swiper-navi-wr .swiper-pagination { position: relative; }
.sec05 .swiper-navi-wr .swiper-button { position: relative; left: initial; right: initial; top: initial; bottom: initial; display: inline-block; width: auto; height: auto; margin: initial; }
.sec05 .swiper-navi-wr .swiper-button::after,.sec05 .swiper-navi-wr .swiper-button::before { display: none; }
.sec05 .swiper-navi-wr .swiper-pagination .swiper-pagination-bullet { display: inline-block; width: .8rem; height: .8rem; border-radius: 2rem; background:#D9D9D9; opacity: 1; }
.sec05 .swiper-navi-wr .swiper-pagination .swiper-pagination-bullet:last-child { margin-right: 0; }
.sec05 .swiper-navi-wr .swiper-pagination .swiper-pagination-bullet-active { background: var(--color-point); }
.sec05 .swiper-horizontal>.swiper-pagination-bullets, .sec05 .swiper-pagination-bullets.swiper-pagination-horizontal, .sec05 .swiper-pagination-custom, .sec05 .swiper-pagination-fraction { bottom: 0; top: 0; left: 0;    width: auto; }
.sec05 .swiper-pagination-bullets.swiper-pagination-horizontal {    padding-bottom: 0.5rem;}

.sec05 .swiper-container.swiper-mo{display: none;}

@media all and (max-width:960px) {
  .sec05 .inner{flex-direction: column;padding: 0 40px;}
  .sec05 .tit-wr, .sec05 .swiper-container{width: 100%;}
  .sec05 .swiper-container{padding-top: 12rem;}
  .sec05 .swiper-navi-wr{left: 0;right: inherit;bottom: -7rem}
}
@media all and (max-width:480px) {
  .sec05 .inner{padding: 0 20px;}
  .sec05 .swiper-container .swiper-slide{width: 100%;height: 50rem}
  .sec05 .swiper-container .swiper-slide img{width: 100%;height: 100%;}
  .sec05 .swiper-container .swiper-slide-active{width: 100%;}
  .sec05 .swiper-container .swiper-slide.sliding{transform: translateX(0)}

  .sec05 .swiper-container.swiper-mo{display: block;}
  .sec05 .swiper-container.swiper-pc{display: none;}

  .sec05 .swiper-container,.sec05 .swiper-container .swiper-wrapper { min-height: 40rem; }
  .sec05 .swiper-container .swiper-slide{height: 40rem}
}






























/**/