.num {
  position: absolute;
  top: 24%;
  height: 15%;
  border-radius: 3em;
  background-color: #fff;
  padding: 1% 1% 1% 1%;
  font-size: 4vh;
  left: 50%;
  align-items: center;
  justify-content: center;
  transform: translate(-50%, -50%);
  display: none;
  padding: 3%;
  z-index: 9;
}
.no_10{
  width: 32%;
  top: 16%;
}
.sp-1 {
  position: absolute;
  top: 14%;
  width: 44%;
  height: 33%;
  /* right: 5%; */
  right: 23%;
}
.p1sclass {
  font-weight: bold;
}
.page1_text1{
  position: absolute;
  top: 10%;
  left: 12%;
  transform: translate(50%,50%);
  z-index: 9;
  color: white;
  font-size: 4vmin;
  width: 37.5%;
}
.girl1 {
  position: absolute;
  /* left: 38%; */
  left: 17%;
  bottom: 5%;
  width : 15%;
}
.balon {
  position: absolute;
  top: 100%;
  height: 34%;
}
.bln_1 {
  left: 48%;
}
.bln_2 {
  left: 52%;
}
.bln_3 {
  left: 54%;
}
.bln_4 {
  left: 56%;
}
.bln_5 {
  left: 56%;
}
.bln_6 {
  left: 48%;
}
.bln_7 {
  left: 48%;
}
.bln_8 {
  left: 48%;
}
.bln_9 {
  left: 67%;
}
.bln_10 {
  transform: translate(-50%);
  left: 50%;
  height: 50%;
  top: 32% !important;
}
.zoom-up{
  left: 40%;
  top: 32% !important;
  animation: scaleup 3s ;
  animation-fill-mode: forwards;
  animation-iteration-count: 3;
}
@keyframes scaleup{
  from{
transform: scale(1);
  left: 40%;
    top: 28%;
  }
  to{
transform: scale(1.2);
left: 40% !important;
    top: 28% !important;
  }
}

/* =============================== */
.bln_1_anim{
  animation: ballon1_anim 3s forwards;
}
@keyframes ballon1_anim{
  from{left: 48%}
  to{left: 43%}
}

.bln_1_1_anim{
  animation: ballon1_1_anim 3s forwards;
}
@keyframes ballon1_1_anim{
  from{left: 48%}
  to{left: 40%}
}

.bln_1_2_anim{
  animation: ballon1_2_anim 3s forwards;
}
@keyframes ballon1_2_anim{
  from{left: 48%}
  to{left: 37%}
}

.bln_1_3_anim{
  animation: ballon1_3_anim 3s forwards;
}
@keyframes ballon1_3_anim{
  from{left: 48%}
  to{left: 30%}
}

.bln_1_4_anim{
  animation: ballon1_4_anim 3s forwards;
}
@keyframes ballon1_4_anim{
  from{left: 48%}
  to{left: 28%}
}

.bln_1_5_anim{
  animation: ballon1_5_anim 3s forwards;
}
@keyframes ballon1_5_anim{
  from{left: 48%}
  to{left: 16%}
}

.bln_2_anim{
  animation: ballon2_anim 3s forwards;
}
@keyframes ballon2_anim{
  from{left: 48%}
  to{left: 47%}
}

.bln_2_1_anim{
  animation: ballon2_1_anim 3s forwards;
}
@keyframes ballon2_1_anim{
  from{left: 48%}
  to{left: 43.5%}
}

.bln_2_2_anim{
  animation: ballon2_2_anim 3s forwards;
}
@keyframes ballon2_2_anim{
  from{left: 48%}
  to{left: 37%}
}

.bln_2_3_anim{
  animation: ballon2_3_anim 3s forwards;
}
@keyframes ballon2_3_anim{
  from{left: 48%}
  to{left: 35%}
}

.bln_2_4_anim{
  animation: ballon2_4_anim 3s forwards;
}
@keyframes ballon2_4_anim{
  from{left: 48%}
  to{left: 23%}
}

.bln_3_anim{
  animation: ballon3_anim 3s forwards;
}
@keyframes ballon3_anim{
  from{left: 48%}
  to{left: 50%}
}

.bln_3_1_anim{
  animation: ballon3_1_anim 3s forwards;
}
@keyframes ballon3_1_anim{
  from{left: 48%}
  to{left: 44%}
}

.bln_3_2_anim{
  animation: ballon3_2_anim 3s forwards;
}
@keyframes ballon3_2_anim{
  from{left: 48%}
  to{left: 42%}
}

.bln_3_3_anim{
  animation: ballon3_3_anim 3s forwards;
}
@keyframes ballon3_3_anim{
  from{left: 48%}
  to{left: 30%}
}

.bln_4_anim{
  animation: ballon4_anim 3s forwards;
}
@keyframes ballon4_anim{
  from{left: 48%}
  to{left: 52%}
}

.bln_4_1_anim{
  animation: ballon4_1_anim 3s forwards;
}
@keyframes ballon4_1_anim{
  from{left: 48%}
  to{left: 49%}
}

.bln_4_2_anim{
  animation: ballon4_2_anim 3s forwards;
}
@keyframes ballon4_2_anim{
  from{left: 48%}
  to{left: 37%}
}

.bln_5_anim{
  animation: ballon5_anim 3s forwards;
}
@keyframes ballon5_anim{
  from{left: 46%}
  to{left: 60%}
}

.bln_5_1_anim{
  animation: ballon5_1_anim 3s forwards;
}
@keyframes ballon5_1_anim{
  from{left: 46%}
  to{left: 44%}
}

.bln_6_anim{
  animation: ballon6_anim 3s forwards;
}
@keyframes ballon6_anim{
  from{left: 48%}
  to{left: 63%}
}

.bln_6_1_anim{
  animation: ballon6_1_anim 3s forwards;
}
@keyframes ballon6_1_anim{
  from{left: 48%}
  to{left: 51%}
}

.bln_7_anim{
  animation: ballon7_anim 3s forwards;
}
@keyframes ballon7_anim{
  from{left: 48%}
  to{left: 69.5%}
}

.bln_7_1_anim{
  animation: ballon7_1_anim 3s forwards;
}
@keyframes ballon7_1_anim{
  from{left: 48%}
  to{left: 57.5%}
}

.bln_8_anim{
  animation: ballon8_anim 3s forwards;
}
@keyframes ballon8_anim{
  from{left: 48%}
  to{left: 76.5%}
}

.bln_8_1_anim{
  animation: ballon8_1_anim 3s forwards;
}
@keyframes ballon8_1_anim{
  from{left: 48%}
  to{left: 64.5%}
}

.bln_9_anim{
  animation: ballon9_anim 3s forwards;
}
@keyframes ballon9_anim{
  from{left: 48%}
  to{left: 71%}
}
/* ============================== */
.btmtext{
  position: absolute;
  bottom: 0%;
  left: 0%;
  width: 100%;
  text-align: center;
  font-size: 3vw;
  background-color: #fad270;
  padding: 1% 1% 0% 1%;

}
.toptxt {
  position: absolute;
  top: 0%;
  left: 0%;
  width: 100%;
  text-align: center;
  font-size: 3vw;
  background-color: #fad270;
  padding: 1% 1% 0% 1%;
}
.txt_1 {
  display: none;
}
.txt_2 {
  display: none;
}
.txt_3 {
  display: none;
}
.txt_4 {
  display: none;
}
.txt_5 {
  display: none;
}
.bgcp {
  position: absolute;
  top: 0%;
  left: 0%;
  height: 100%;
  width: 100%;
}
.cover_1balloon,.cover_2balloon,.cover_3balloon,.cover_4balloon{
  position: absolute;
  width: 14%;
  height: 50%;
  top: 24%;
  left: 6%;
  z-index: 9;
}
.cover_2balloon{
  left: 30%;
  top: 8%;
}
.cover_3balloon{
  left: 55%;
  top: 8%;
}
.cover_4balloon{
  left: 80%;
}
.cn1 {
  position: absolute;
  top: 20%;
  left: 28%;
  font-size: 4vw;
  z-index: 20;
  color: #ee6987;
  font-family: sniglet;
  transform: rotate(-30deg);
}
.cn2 {
  position: absolute;
  top: 20%;
  left: 55%;
  font-size: 4vw;
  z-index: 20;
  color: #38761d;
  font-family: sniglet;
}
.cn3 {
  position: absolute;
  top: 21%;
  left: 80%;
  font-size: 4vw;
  z-index: 20;
  color: #b45f06;
  font-family: sniglet;
  transform: rotate(30deg);
}

.nmb {
  position: absolute;
  top: 75%;
  left: 10%;
  font-size: 3.5vw;
  z-index: 20;
  font-family: sniglet;
  width: 80%;
  text-align: center;
}
.grade {
  position: absolute;
  top: 63%;
  left: 0%;
  font-size: 3vw;
  z-index: 20;
  color: #5b5f67;
  width: 100%;
  text-align: center;
}
.cn4 {
  position: absolute;
  top: 40%;
  left: 39%;
  font-size: 4vw;
  z-index: 20;
  color: #ee6987;
  font-family: sniglet;
}
.cn5 {
  position: absolute;
  top: 40%;
  left: 70%;
  font-size: 4vw;
  z-index: 20;
  color: #38761d;
  font-family: sniglet;
}

.inverted {
  transform: rotateY(180deg);
}