@charset "UTF-8";
/* CSS Document */


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

main {
    background-color: #451b2d;
    text-align: center;
}

.bgc {
    background-color: #DD6388;
    max-width: 700px;
    margin: 0 auto;
    filter: drop-shadow(0px 0px 10px rgba(0,0,0,0.3));
}

  /* -------- FV -------- */

.fv {
    position:relative;
	margin-bottom: -0.5%
}

.fv_img1 {
    position: absolute;
    top: 14%;
    left: 0;
}

/* -------- offer -------- */ 

.offer {
   position:relative;
}

.offer_bg {
   margin-top: -1%;
   margin-bottom: -1%;
}

.offer_img1 {
   position: absolute;
   top:22%;
   left: 0;
}

.offer_img1_1 {
   position: absolute;
   top:63%;
   left: 0;
}

.offer_btn {
   position: absolute;
   top:31%;
   left: 0;
}

.offer_btn2 {
   position: absolute;
   top:73%;
   left: 0;
}


.heartbeat {
	-webkit-animation: heartbeat 3s ease-in-out infinite both;
	        animation: heartbeat 3s ease-in-out infinite both;
}
/* 
 @keyframes heartbeat {
   from {
     -webkit-transform: scale(1);
             transform: scale(1);
     -webkit-transform-origin: center center;
             transform-origin: center center;
     -webkit-animation-timing-function: ease-out;
             animation-timing-function: ease-out;
   }
   10% {
     -webkit-transform: scale(0.95);
             transform: scale(0.95);
     -webkit-animation-timing-function: ease-in;
             animation-timing-function: ease-in;
   }
   17% {
     -webkit-transform: scale(0.98);
             transform: scale(0.98);
     -webkit-animation-timing-function: ease-out;
             animation-timing-function: ease-out;
   }
   33% {
     -webkit-transform: scale(0.93);
             transform: scale(0.93);
     -webkit-animation-timing-function: ease-in;
             animation-timing-function: ease-in;
   }
   45% {
     -webkit-transform: scale(1);
             transform: scale(1);
     -webkit-animation-timing-function: ease-out;
             animation-timing-function: ease-out;
   }
 } */


 @keyframes heartbeat {
   from {
     -webkit-transform: scale(1);
             transform: scale(1);
     -webkit-transform-origin: center center;
             transform-origin: center center;
     -webkit-animation-timing-function: ease-out;
             animation-timing-function: ease-out;
   }
   10% {
     -webkit-transform: scale(0.95);
             transform: scale(0.95);
     -webkit-animation-timing-function: ease-in;
             animation-timing-function: ease-in;
   }
   20% {
     -webkit-transform: scale(0.98);
             transform: scale(0.98);
     -webkit-animation-timing-function: ease-out;
             animation-timing-function: ease-out;
   }
   30% {
     -webkit-transform: scale(0.93);
             transform: scale(0.93);
     -webkit-animation-timing-function: ease-in;
             animation-timing-function: ease-in;
   }
   45% {
     -webkit-transform: scale(1);
             transform: scale(1);
     -webkit-animation-timing-function: ease-out;
             animation-timing-function: ease-out;
   }
 }


 /* -------- con1 -------- */

 .con1 {
    position: relative;
    margin-bottom:-2%;
 }


 .con1_img1 {
    position: absolute;
    top:0;
    left: 0;
 } 

 .con1_img2 {
    position: absolute;
    top:31%;
    left: 0;
 }

 .con1_img3 {
   position: absolute;
   top:50%;
   left: 0;
}

.con1_img4 {
   position: absolute;
   top:64%;
   left: 0;
}

.con1_img5 {
   position: absolute;
   top:64%;
   left: 0;
}

.con1_img6 {
   position: absolute;
   top:74%;
   left: 0;
}

.con1_img7 {
   position: absolute;
   top:88.5%;
   left: 0;
   transform: scale(0.65);
   transform-origin: center center;
}

/* showが付いた時に1回だけバーン */
.con1_img7.show {
   opacity: 1;
   animation: popBang .55s ease-out forwards;
}

@keyframes popBang {
   0% {
      opacity: 0;
      transform: scale(0.65);
   }
   65% {
      opacity: 1;
      transform: scale(1.08);
   }
   100% {
      opacity: 1;
      transform: scale(1);
   }
}
 /* -------- con2 -------- */

 .con2 {
   position: relative;
}

.con2_bg {
   margin-bottom: -1%;
}

.con2_img1 {
   position: absolute;
   top: 0;
   left: 0;
} 

.con2_img2 {
   position: absolute;
   top: 11%;
   left: 0;
}

.con3_img2.show {
  transition-delay: 2s;
}

.con2_img3 {
   position: absolute;
   top: 25%;
   left: 0;
}

.con2_img4 {
   position: absolute;
   top: 31%;
   left: 0;
}

.con2_img5 {
   position: absolute;
   top:70.5%;
   left: 0;
}

.con2_img6 {
   position: absolute;
   top:73%;
   left: 0;
}

.con2_img7 {
   position: absolute;
   top:80%;
   left: 0;
}

.con2_img8 {
   position: absolute;
   top:91%;
   left: 0;
}



 /* -------- con3 -------- */
 
 .con3 {
   position: relative;
}

.con3_bg {
   margin-bottom: -1%;
}

.con3_img1 {
   position: absolute;
   top: 0;
   left: 0;
} 

.con3_img2 {
   position: absolute;
   top: 37.1%;
   left: 0;
} 

.con3_img3 {
   position: absolute;
   top: 37.5%;
   left: 0;
} 

.con3_img4 {
   position: absolute;
   top:37.9%;
   left: 0;
} 

.con3_img5 {
   position: absolute;
   top:78%;
   left: 0;
} 


.con3_img2.show {
  transition-delay: .1s;
}

.con3_img3.show {
  transition-delay: .4s;
}

.con3_img4.show {
  transition-delay: .8s;
}

/* ---------------- SP ---------------- */
   
@media (max-width: 700px) {

   .bgc {
      width: 100%;
      max-width: 750px;
      margin:0 auto;
      filter: unset!important;
   }

   main{
      padding: 0!important;
   }

summary::-webkit-details-marker { /* Safari 브라우저용 사용자 정의 스타일 */
      display: none;
  }
summary {
      list-style-type: none; /* 그 외의 브라우저용 사용자 정의 스타일 */
  }
   
}