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


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

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

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

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

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

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

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

.offer {
   position:relative;
}

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

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

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

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

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

.offer_btn3 {
   position: absolute;
   top:95.8%;
   left: 0;
}

.offer_img2 {
   position: absolute;
   top:67.8%;
   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:10.8%;
    left: 0;
 } 

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

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

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

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

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

.con1_img7 {
   position: absolute;
   top:92.6%;
   left: 0;
}

 /* -------- con2 -------- */

 .con2 {
   position: relative;
}

.con2_bg {
   margin-bottom: -1%;
    max-width: 105%;
}

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

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

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

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

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

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

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


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

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

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

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

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

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

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

.con3_img6 {
   position: absolute;
   top:60.7%;
   left: 0;
} 

.con3_img7 {
   position: absolute;
   top:60.7%;
   left: 0;
} 

.con3_img8 {
   position: absolute;
   top:71.8%;
   left: 0;
} 
 /* -------- con4 -------- */ 

 .con4 {
   position: relative;
}

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

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

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

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

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

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

.con4_img7 {
   position: absolute;
   top:68%;
   left: 0;
} 

/* -------- con5 -------- */

.con5 {
   position: relative;
   margin-top: -2%;
}


.con5_img2 {
   position: absolute;
   top:26.5%;
   left: 0;
} 


/* -------- con6 -------- */

.con6 {
   position: relative;
   margin-top: -2%;
}

.con6_img1 {
   position: absolute;
   top:13.4%;
   left: 0;
} 

.con6_img2 {
   position: absolute;
   top: 25.7%;
   left: 0;
} 

.con6_img3 {
   position: absolute;
   top:31.6%;
   left: 0;
} 

.con6_img4 {
   position: absolute;
   top:35.9%;
   left: 0;
}

.con6_img5 {
   position: absolute;
   top:41.8%;
   left: 0;
} 

.con6_img6 {
   position: absolute;
   top:62%;
   left: 0;
} 

.con6_img7 {
   position: absolute;
   top:71%;
   left: 0;
} 

.con6_img8 {
   position: absolute;
   top:81%;
   left: 0;
} 

.con6_img9 {
   position: absolute;
   top:90%;
   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; /* 그 외의 브라우저용 사용자 정의 스타일 */
  }
   
}