/* Section 01 */
.section-01 .title{  
  top: 3.5%; left: 7.3%; width: 60.2%; height: 15.1%; 
}

.section-01 .sub-title{
  top: 22.2%; left: 7.2%; width: 29.4%; height: 3.4%;
}

.section-01 .model{
  top: 7.1%; left: 46.8%; width: 53.3%; height: 25.4%;
}

.section-01 .cover{
  top: 29.8%; left: 0.0%; width: 100.0%; height: 5.3%;
}

.section-01 .product{
  top: 26.9%; left: 6.2%; width: 65.3%; height: 5.5%; 
}

.section-01 .bottom-text{
  top: 33.1%; left: 20.1%; width: 60.7%; height: 0.8%; 
}

.section-01 .coupon {
  top: 43.9%; left: 24.3%; width: 50.6%; height: 5.2%; 
}

.section-01 .download{
  top: 50.5%; left: 4.8%; width: 90.7%; height: 2.6%;
}

.section-01 .join{
  top: 53.6%; left: 4.8%; width: 90.7%; height: 2.6%;
}

.section-01 .video{
  /* left: -2.5%; width: 106.3%; */
  left : 0;
  width : 100%;
  top: 71.8%;  height: 11.2%;
  overflow : hidden;
}

.section-01 .video iframe{
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  background: #000000;
}

.section-01 .active-drink{
  top: 84.5%; left: 34.6%; width: 31.8%; height: 11.2%;
}

.section-01 .all-protein{
  top: 85.5%; left: 3.8%; width: 33.6%; height: 11.4%;
}

.section-01 .my-kids{
  top: 85.4%; left: 62.3%; width: 34.7%; height: 11.5%;
}

/* Section 01 효과 */
.section-01 .title, .section-01 .model{
  opacity : 0;
  transform : translateY(-40px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.section-01 .sub-title {
  opacity: 0;
  transform: translateY(-30px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.section-01 .product {
  opacity: 0;
  transform: translateY(-30px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

/* 활성화 상태 */
.section-01 .title.fade-in-visible,
.section-01 .model.fade-in-visible {
  opacity: 1;
  transform: translateY(0);
}

.section-01 .sub-title.fade-in-visible {
  opacity: 1;
  transform: translateY(0);
}

.section-01 .product.fade-in-visible {
  opacity: 1;
  transform: translateY(0);
}
/* Section 02 */
.section-02 .benefit{
  width: 28.8%; height: 34.0%;
}

.section-02 .benefit-top{
  top: 24.5%
}

.section-02 .benefit-bottom{
  top: 61.1%;
}

.section-02 .benefit-01{
  left: 4.8%;
}

.section-02 .benefit-02{
  left: 35.3%
}

.section-02 .benefit-03{
  width: 29.7%; 
  left: 65.6%
}

/* Section 03 */
.section-03 .model{
  top: 27.3%; left: 18.4%; width: 66.8%; height: 34.2%; 
}

.section-03 .ribbon{
  top: 83.5%; left: 33.3%; width: 32.7%; height: 5.1%; 
}

/* Swiper */
.section-03 .swiper-container{
  top: 54.9%; 
  left: 1.8%; 
  width: 94.8%; 
  height: 30.7%;
  overflow : hidden;
}

.section-03 .swiper-wrapper {
  align-items: end;
}

.section-03 .swiper-slide {
  /* width: 36.6% !important;  */
  height: 79.5% !important; 
  transition: all 0.3s ease;
  display: flex;
  justify-content: center;
  align-items: center;
  bottom : 6.8%;
  opacity : 0;
}


.section-03 .swiper-slide-active {
  height: 100.0% !important; 
  transform : scale(1.26);
  position : relative;
  z-index : 9;
  filter: drop-shadow(0 0 50px #fff5af);
  bottom : 0;
  opacity :1;
} 

.section-03 .swiper-slide-prev, 
.section-03 .swiper-slide-next{
  position : relative;
  z-index : 8;
  opacity :1;
} 



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

@media (max-width : 768px){
  .section-03 .swiper-slide{
    /* padding : 0; */
  }
}