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


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

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

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

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

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

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

.fv_img2 {
    position: absolute;
    top: 63.5%;
    left: 0;
}
/* -------- offer -------- */ 

.offer {
   position:relative;
}

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

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

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

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

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

.offer_img3 {
   position: absolute;
   top:50%;
   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: -1%
 }

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

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

/* showが付いた時に1回だけバーン */
.con1_img2.show {
   opacity: 1;
   animation: popBang .30s 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;
   margin-bottom: -1%;
}

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

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

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


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

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


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

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

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



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

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

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

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

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

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

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

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



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

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

.con4_img1 {
   position: absolute;
   top: 30%;
   left: 0;
} 

.con4_img2 {
   position: absolute;
   top: 43.3%;
   left: 0;
} 

.con4_img3 {
   position: absolute;
   top: 58.3%;
   left: 0;
} 

.con4_img4 {
   position: absolute;
   top: 74.7%;
   left: 0;
} 

.con4_img5 {
   position: absolute;
   top: 84.5%;
   left: 0;
} 

/* ---------------- 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; /* 그 외의 브라우저용 사용자 정의 스타일 */
  }
   
}