@charset "utf-8";
@import "reset.css";
@import "tab-menu.css";
@import "swiper-custom.css";
@import "toggle-box.css";

/* img-box */
.img-box {
  position: relative;
}

/* sec-wrap */
.sec-wrap {
  position: relative;
}

.sec1 .prod {
  transform: translateY(25%);
  z-index: 1;
}
.sec1 .prod,
.sec1 .txt {
  position: absolute;
  opacity: 0;
}
.sec1 .prod1 {
  width: 56.2666%;
  left: 0;
  top: 47%;
}
.sec1 .prod2 {
  width: 77.7333%;
  right: -21%;
  top: 56%;
}
.sec1 .txt1 {
  width: 49.3333%;
  right: 0.5%;
  top: 58.7%;
}
.sec1 .txt2 {
  width: 63.8666%;
  left: 0.5%;
  top: 71.7%;
}
.sec1 .txt3 {
  width: 67.7333%;
  left: 50%;
  transform: translateX(-50%) translateY(25%);
  top: 83%;
  z-index: 1;
}

.sec2 .bg-wrap,
.sec2 .title1 {
  position: absolute;
}
.sec2 .bg-wrap {
  width: 100%;
  height: 33.2391%;
  left: 0;
  top: 0;
  background: url(../images/sec2/bg1.png) no-repeat left center / auto 100%;
}
/* TODO */
.sec2 .bg-wrap img {
  width: auto;
  height: 100%;
}
/* TODO */
.sec2 .title1 {
  width: 46.4%;
  left: 4%;
  top: 7%;
  z-index: 1;
  mix-blend-mode: overlay;
  transform: translateX(-110%);
}

.sec3 .card {
  width: 84%;
  position: absolute;
  left: 50%;
  transform: translateX(-50%) translateY(25%);
  opacity: 0;
}
.sec3 .card1 {
  top: 10.5%;
}
.sec3 .card2 {
  top: 47%;
}
.sec3 .card3 {
  top: 81.8%;
}

.benefit-box {
  position: absolute;
  left: 0;
}
.benefit-box.box1 {
  top: 8.3%;
}
.benefit-box.box2 {
  top: 34%;
}
.benefit-box.box3 {
  top: 54%;
}
.benefit-box.box4 {
  top: 75%;
}
.sec4 .num,
.sec4 .prod {
  transform: translateY(25%);
  opacity: 0;
}
.sec4 .num {
  width: 100%;
  transform: translateY(45%);
}
.sec4 .prod {
  width: 100%;
  position: absolute;
  left: 0;
  top: 0;
  mix-blend-mode: darken;
}

.sec5 .swiper-mask {
  width: 100%;
  position: absolute;
  left: 0;
  top: 19%;
}
.sec5 .swiper-bg-wrap {
  overflow: hidden;
}
.sec5 .swiper-bg,
.sec5 .prod {
  transition: all 0.7s;
}
.sec5 .swiper-bg {
  transform: scale(1.5);
}
.sec5 .prod {
  position: absolute;
  transform: translateX(100%);
}
.sec5 .prod1 {
  top: 41%;
}
.sec5 .prod2 {
  top: 26.6%;
}
.sec5 .prod3 {
  top: 26%;
}
.sec5 .prod4 {
  top: 42%;
}
.sec5 .c-scrollbar {
  display: flex;
  align-items: center;
  width: 84%;
  margin: 0 auto;
  margin-top: 76%;
}
.sec5 .scr-num {
  width: 8.4%;
  margin-left: 1%;
}