/* 구분 -----------------------------------*/
/**** pc ****/
@media only all and (min-width:768px) {.MAIN_maintop_KNB3{width: 100%;float: left; height: 100%; position: relative }
}
/**** pc2 ****/
@media all and (max-width:1280px) and (min-width:768px) {
}
/**** 모바일 ****/
@media only all and (max-width:767px) {.MAIN_maintop_KNB3{width: 100%;float: left; height: 100%; position: relative; 	-webkit-transform: scale(0.7);
	transform: scale(0.7); margin-left: -20px }
}
/**** 모바일2 ****/
@media only all and (max-width:400px) {
}
/* 구분 //end -----------------------------------*/


/* 구분 -----------------------------------*/
/**** pc ****/
@media only all and (min-width:768px) {.MAIN_maintop_KNB3  .wg_img1{width:  clamp(500px, 71.875vw, 800px);  height:auto; float: left;position: absolute; right:-100px;  bottom:clamp(-80px, 6.250vw, 0px); }
.MAIN_maintop_KNB3  .wg_img1 img{width:100%; float: left;}


}
/**** pc2 ****/
@media all and (max-width:1280px) and (min-width:768px) {
}
/**** 모바일 ****/
@media only all and (max-width:767px) {.MAIN_maintop_KNB3  .wg_img1{width:100%;  height:auto; float: left;position: absolute; right:-20px;  bottom:30px;	-webkit-transform: scale(1.4);
	transform: scale(1.4);  }
.MAIN_maintop_KNB3  .wg_img1 img{width:100%; float: left; }


}
/**** 모바일2 ****/
@media only all and (max-width:400px) {
}
/* 구분 //end -----------------------------------*/




    canvas {
      display: block;
      touch-action: none;
      border: none;
      background: transparent;position: absolute; left:calc(50% + 100px); z-index: 999999
    }


/* 구분 -----------------------------------*/
/**** pc ****/
@media only all and (min-width:768px) {
	.MAIN_maintop_KNB3 .flower1{position: absolute; left: 50%; top: -200px; margin-left: -63%;  -webkit-animation: flower_ani  0.5s forwards; /* Safari 4.0 - 8.0 */
  animation: flower_ani 0.5s forwards; animation-delay:1.1;  }
.MAIN_maintop_KNB3 .flower2{position: absolute; left: 50%; top: -180px; margin-left: -53%;-webkit-animation: flower_ani  0.8s forwards; /* Safari 4.0 - 8.0 */
  animation: flower_ani 0.8s forwards; animation-delay:3;  }
.MAIN_maintop_KNB3 .flower3{position: absolute; left: 50%; top: -250px; margin-left: -48%;-webkit-animation: flower_ani  1s forwards; /* Safari 4.0 - 8.0 */
  animation: flower_ani 1s forwards; animation-delay:2;  }
.MAIN_maintop_KNB3 .flower4{position: absolute; left: 50%; top: -400px; margin-left: -30%;-webkit-animation: flower_ani  2s forwards; /* Safari 4.0 - 8.0 */
  animation: flower_ani 2s forwards; animation-delay:3;  }
.MAIN_maintop_KNB3 .flower5{position: absolute; left: 50%; top: -420px; margin-left: 20%; -webkit-animation: flower_ani  0.5s forwards; /* Safari 4.0 - 8.0 */
  animation: flower_ani 0.5s forwards; animation-delay:2.7; }
.MAIN_maintop_KNB3 .flower6{position: absolute; left: 50%; top: -150px; margin-left: 45%; -webkit-animation: flower_ani  0.3s forwards; /* Safari 4.0 - 8.0 */
  animation: flower_ani 0.3s forwards; animation-delay:4; }

.MAIN_maintop_KNB3 .flower7{position: absolute; left: 50%; top: -370px; margin-left: -53%; 
  -webkit-animation: flower_ani2 1s forwards;
  animation: flower_ani2 1s forwards;
  animation-delay: 0.5s; /* ← s 단위 빠져 있었음 */ transform-origin: right bottom; opacity: 0;  }
.MAIN_maintop_KNB3 .flower8{position: absolute; left: 50%; top: -450px; margin-left: 30%;   -webkit-animation: flower_ani3 1s forwards;
  animation: flower_ani3 1s forwards;
  animation-delay: 1.2s; /* ← s 단위 빠져 있었음 */ transform-origin: left bottom; opacity: 0; }
.MAIN_maintop_KNB3 .flower9{position: absolute; left: 50%; top: -380px; margin-left: 40%;   -webkit-animation: flower_ani3 1s forwards;
  animation: flower_ani3 1s forwards;
  animation-delay: 0.7s; /* ← s 단위 빠져 있었음 */ transform-origin: left bottom; opacity: 0; }


}
/**** pc2 ****/
@media all and (max-width:1280px) and (min-width:768px) {
}
/**** 모바일 ****/
@media only all and (max-width:767px) {
	.MAIN_maintop_KNB3 .flower1{position: absolute; left: 50%; top: -150px; margin-left: -63%;  -webkit-animation: flower_ani  0.5s forwards; /* Safari 4.0 - 8.0 */
  animation: flower_ani 0.5s forwards; animation-delay:1.1;  }
.MAIN_maintop_KNB3 .flower2{position: absolute; left: 50%; top: -130px; margin-left: -53%;-webkit-animation: flower_ani  0.8s forwards; /* Safari 4.0 - 8.0 */
  animation: flower_ani 0.8s forwards; animation-delay:3;  }
.MAIN_maintop_KNB3 .flower3{position: absolute; left: 50%; top: -200px; margin-left: -48%;-webkit-animation: flower_ani  1s forwards; /* Safari 4.0 - 8.0 */
  animation: flower_ani 1s forwards; animation-delay:2;  }
.MAIN_maintop_KNB3 .flower4{position: absolute; left: 50%; top: -300px; margin-left: -30%;-webkit-animation: flower_ani  2s forwards; /* Safari 4.0 - 8.0 */
  animation: flower_ani 2s forwards; animation-delay:3;  }
.MAIN_maintop_KNB3 .flower5{position: absolute; left: 50%; top: -300px; margin-left: 20%; -webkit-animation: flower_ani  0.5s forwards; /* Safari 4.0 - 8.0 */
  animation: flower_ani 0.5s forwards; animation-delay:2.7; }
.MAIN_maintop_KNB3 .flower6{position: absolute; left: 50%; top: -150px; margin-left: 45%; -webkit-animation: flower_ani  0.3s forwards; /* Safari 4.0 - 8.0 */
  animation: flower_ani 0.3s forwards; animation-delay:4; }

.MAIN_maintop_KNB3 .flower7{position: absolute; left: 50%; top: -300px; margin-left: -53%; 
  -webkit-animation: flower_ani2 1s forwards;
  animation: flower_ani2 1s forwards;
  animation-delay: 0.5s; /* ← s 단위 빠져 있었음 */ transform-origin: right bottom; opacity: 0;  }
.MAIN_maintop_KNB3 .flower7 img{width: 80px}	
	
.MAIN_maintop_KNB3 .flower8{position: absolute; left: 50%; top: -300px; margin-left: 40%;   -webkit-animation: flower_ani3 1s forwards;
  animation: flower_ani3 1s forwards;
  animation-delay: 1.2s; /* ← s 단위 빠져 있었음 */ transform-origin: left bottom; opacity: 0; }
.MAIN_maintop_KNB3 .flower8 img{width: 80px}	
	
	
.MAIN_maintop_KNB3 .flower9{position: absolute; left: 50%; top: -250px; margin-left: 50%;   -webkit-animation: flower_ani3 1s forwards;
  animation: flower_ani3 1s forwards;
  animation-delay: 0.7s; /* ← s 단위 빠져 있었음 */ transform-origin: left bottom; opacity: 0; }
.MAIN_maintop_KNB3 .flower9 img{width: 80px}	


}
/**** 모바일2 ****/
@media only all and (max-width:400px) {
}
/* 구분 //end -----------------------------------*/






@-webkit-keyframes flower_ani {
  0% {
    -webkit-transform: scale(0.2);
    opacity: 0; transform:rotate(-10deg) 
  }
  100% {
    -webkit-transform: scale(1);
    opacity: 1;transform:rotate(0deg) 
  }
}

@keyframes flower_ani {
  0% {
    transform: scale(0.2);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 1 
  }
}

@-webkit-keyframes flower_ani2 {
  0% {
    -webkit-transform: scale(0.5);
    opacity: 0; transform:rotate(10deg) 
  }
  100% {
    -webkit-transform: scale(1);
    opacity: 1;transform:rotate(0deg) 
  }
}

@keyframes flower_ani2 {
  0% {
    transform: scale(0.5);
    opacity: 0;transform:rotate(10deg) 
  }
  100% {
    transform: scale(1);
    opacity: 1 ;transform:rotate(0deg) 
  }
}

@-webkit-keyframes flower_ani3 {
  0% {
    -webkit-transform: scale(0.5);
    opacity: 0; transform:rotate(-10deg) 
  }
  100% {
    -webkit-transform: scale(1);
    opacity: 1;transform:rotate(0deg) 
  }
}

@keyframes flower_ani3 {
  0% {
    transform: scale(0.5);
    opacity: 0;transform:rotate(-10deg) 
  }
  100% {
    transform: scale(1);
    opacity: 1 ;transform:rotate(0deg) 
  }
}
/* 구분 -----------------------------------*/
/**** pc ****/
@media only all and (min-width:768px) {.MAIN_maintop_KNB3 .tbox1{position: absolute; left: 50%; bottom: 20px; margin-left:-220px; font-size:clamp(16px, 2.344vw, 30px);font-weight: 700; color: #fff; padding: 30px 40px; border-radius:20px; background-color:#fc6240; z-index: 99  ;  -webkit-animation: tbox_ani 0.8s ease-out forwards;
  animation: tbox_ani 0.8s ease-out forwards;
  animation-delay: 1s;  --rotate: 0deg;  opacity: 0}

.MAIN_maintop_KNB3 .tbox2{position: absolute; left: 50%; bottom: 60px; margin-left:-80px; font-size: clamp(16px, 2.344vw, 30px);font-weight: 700; color: #fff; padding: 30px 40px; border-radius:20px; background-color:#6985e2; z-index: 99 ; --rotate: 25deg; 
 ;  -webkit-animation: tbox_ani 0.8s ease-out forwards;
  animation: tbox_ani 0.8s ease-out forwards;
  animation-delay: 1.5s;  opacity: 0}
.MAIN_maintop_KNB3 .tbox3{position: absolute; left: 50%; bottom: 150px; margin-left:30px; font-size:clamp(16px, 2.344vw, 30px);font-weight: 700; color: #fff; padding: 30px 40px; border-radius:20px; background-color:#fcaf40; z-index: 99 ; --rotate: -23deg;
 ;  -webkit-animation: tbox_ani 0.8s ease-out forwards;
  animation: tbox_ani 0.8s ease-out forwards;
  animation-delay: 2.5s;  opacity: 0}
.MAIN_maintop_KNB3 .tbox4{position: absolute; left: 50%; bottom: 60px; margin-left:150px; font-size: clamp(16px, 2.344vw, 30px);font-weight: 700; color: #fff; padding: 30px 40px; border-radius:20px; background-color:#fc8240; z-index: 99 ;--rotate: 18deg; ; -webkit-animation: tbox_ani 0.8s ease-out forwards;
  animation: tbox_ani 0.8s ease-out forwards;
  animation-delay: 2s; opacity: 0 }


}
/**** pc2 ****/
@media all and (max-width:1280px) and (min-width:768px) {
}
/**** 모바일 ****/
@media only all and (max-width:767px) {.MAIN_maintop_KNB3 .tbox1{position: absolute; left: 50%; bottom: -10px; margin-left:-180px; font-size:clamp(16px, 2.344vw, 30px);font-weight: 700; color: #fff; padding: 20px 40px; border-radius:20px; background-color:#fc6240; z-index: 99  ;  -webkit-animation: tbox_ani 0.8s ease-out forwards;
  animation: tbox_ani 0.8s ease-out forwards;
  animation-delay: 1s;  --rotate: 0deg;  opacity: 0}

.MAIN_maintop_KNB3 .tbox2{position: absolute; left: 50%; bottom:20px; margin-left:-40px; font-size: clamp(16px, 2.344vw, 30px);font-weight: 700; color: #fff; padding:20px 40px; border-radius:20px; background-color:#6985e2; z-index: 99 ; --rotate: 25deg; 
 ;  -webkit-animation: tbox_ani 0.8s ease-out forwards;
  animation: tbox_ani 0.8s ease-out forwards;
  animation-delay: 1.5s;  opacity: 0}
.MAIN_maintop_KNB3 .tbox3{position: absolute; left: 50%; bottom:50px; margin-left:50px; font-size:clamp(16px, 2.344vw, 30px);font-weight: 700; color: #fff; padding: 20px 40px; border-radius:20px; background-color:#fcaf40; z-index: 99 ; --rotate: -10deg;
 ;  -webkit-animation: tbox_ani 0.8s ease-out forwards;
  animation: tbox_ani 0.8s ease-out forwards;
  animation-delay: 2.5s;  opacity: 0}
.MAIN_maintop_KNB3 .tbox4{position: absolute; left: 50%; bottom: 0px; margin-left:130px; font-size: clamp(16px, 2.344vw, 30px);font-weight: 700; color: #fff; padding: 20px 40px; border-radius:20px; background-color:#fc8240; z-index: 99 ;--rotate: 18deg; ; -webkit-animation: tbox_ani 0.8s ease-out forwards;
  animation: tbox_ani 0.8s ease-out forwards;
  animation-delay: 2s; opacity: 0 }


}
/**** 모바일2 ****/
@media only all and (max-width:400px) {
}
/* 구분 //end -----------------------------------*/




@-webkit-keyframes tbox_ani {
  0% {
    -webkit-transform: translateY(-100px) rotate(var(--rotate, 0deg));
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0) rotate(var(--rotate, 0deg));
    opacity: 1;
  }
}

@keyframes tbox_ani {
  0% {
    transform: translateY(-100px) rotate(var(--rotate, 0deg));
    opacity: 0;
  }
  100% {
    transform: translateY(0) rotate(var(--rotate, 0deg));
    opacity: 1;
  }
}